:root {
  color: #17264d;
  background: #fff9f2;
  font-family: ui-rounded, "Avenir Next", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 320px; margin: 0; background: radial-gradient(circle at 85% 5%, #e6ddff 0 10rem, transparent 10rem), #fff9f2; }
button, a { font: inherit; }
button { min-height: 44px; padding: .55rem .8rem; border: 3px solid #17264d; border-radius: 14px; color: #17264d; background: #fff; font-weight: 800; cursor: pointer; }
button:not(:disabled):hover { background: #fff2bd; }
button:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible, a:focus-visible { outline: 4px solid #ef6a44; outline-offset: 3px; }
.game-bar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: .5rem max(1rem, calc((100vw - 1100px) / 2)); color: #fff; background: #17264d; }
.game-bar a { min-height: 44px; display: inline-flex; align-items: center; color: #fff; font-weight: 800; }
.game-bar p { margin: 0; font-size: .8rem; letter-spacing: .08em; }
main { max-width: 1100px; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem); }
.card { border: 3px solid #17264d; border-radius: 24px; background: #fff; box-shadow: 6px 7px 0 #17264d; }
.eyebrow { margin: 0; color: #6b4cc7; font-size: .82rem; font-weight: 900; letter-spacing: .08em; }
.primary { min-height: 48px; background: #ffcf59; }
.start-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr); gap: 1.25rem; max-width: 820px; margin: clamp(1rem, 6vh, 4rem) auto; padding: clamp(1.15rem, 4vw, 2.2rem); }
.welcome-copy { align-self: center; }
.start-card h1 { margin: .2rem 0; font-size: clamp(2.1rem, 7vw, 4rem); }
.start-actions, .actions, .destinations { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.welcome-preview { align-self: stretch; padding: .75rem; border: 3px dashed #6b4cc7; border-radius: 18px; background: #eaf8ff; }
.welcome-preview > p { margin: 0 0 .45rem; font-weight: 900; }
.preview-docks, .help-docks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; align-items: end; }
.preview-dock, .help-dock { min-height: 154px; display: flex; flex-direction: column; justify-content: end; align-items: center; padding: .35rem; border: 2px solid #17264d; border-radius: 12px; background: #e5dcff; font-size: .68rem; font-weight: 900; text-align: center; }
.preview-dock.target, .help-dock.target { background: #d5f2d6; }
.preview-pieces, .help-pieces { width: 100%; min-height: 95px; display: flex; flex-direction: column-reverse; justify-content: end; align-items: center; border-bottom: 7px solid #8b5e3c; }
.round-head { margin-bottom: .7rem; }
.round-head h1 { margin: .15rem 0; font-size: clamp(1.55rem, 5vw, 2.6rem); }
.support-status { margin: 0; font-weight: 700; }
.rule-strip { display: flex; align-items: center; gap: .75rem; margin-bottom: .8rem; padding: .55rem .8rem; border: 3px solid #17264d; border-radius: 16px; background: #fff3c5; font-weight: 800; }
.rule-strip p { flex: 1; margin: 0; }
.rule-picture { width: 83px; display: flex; flex-direction: column-reverse; align-items: center; border-bottom: 5px solid #8b5e3c; }
.rule-picture .piece { height: 21px; font-size: .65rem; line-height: 1; }
.rule-target { white-space: nowrap; }
.play-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(285px, .75fr); gap: 1.1rem; }
.dock-card { min-height: 388px; padding: 1rem; border: 3px solid #17264d; border-radius: 24px; background: linear-gradient(#dff5ff, #ecfbff); }
.rule { margin: 0 0 .65rem; font-weight: 800; }
.docks { min-height: 315px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; align-items: end; }
.dock { min-height: 305px; display: flex; flex-direction: column; align-items: center; justify-content: end; padding: .55rem .25rem; border-radius: 18px; background: #e5dcff; }
.dock.target { background: #d5f2d6; }
.dock:disabled { opacity: 1; cursor: default; }
.dock.selected { box-shadow: inset 0 0 0 4px #ef6a44; }
.dock-name { align-self: stretch; min-height: 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem; font-size: .78rem; }
.dock-mark { width: .85rem; height: .85rem; display: inline-block; flex-shrink: 0; border: 2px solid #17264d; }
.mark-circle { border-radius: 50%; }
.mark-triangle { width: 0; height: 0; border-right: .48rem solid transparent; border-bottom: .84rem solid #17264d; border-left: .48rem solid transparent; border-top: 0; }
.target-flag { display: block; width: 100%; }
.pieces { width: 100%; min-height: 188px; display: flex; flex-direction: column-reverse; align-items: center; justify-content: end; border-bottom: 10px solid #8b5e3c; }
.piece { height: 38px; display: grid; place-items: center; border: 3px solid #17264d; border-radius: 11px 11px 5px 5px; color: #17264d; font-weight: 900; }
.piece-1 { width: 36%; background: #ffe36e; }
.piece-2 { width: 53%; background: #ffb66c; }
.piece-3 { width: 70%; background: #f38382; }
.piece-4 { width: 87%; background: #ad8bea; }
.piece.exposed { outline: 4px solid #ef6a44; outline-offset: 2px; }
.support { min-height: 2.6rem; padding-top: .45rem; font-size: .72rem; font-weight: 700; }
.controls { align-self: start; padding: 1rem; }
.controls h2 { margin: 0; }
.destinations button { min-height: 48px; flex: 1; }
.undo-note { margin: .65rem 0 0; font-size: .82rem; font-weight: 700; }
.feedback, .hint-output { min-height: 3.1rem; margin: .65rem 0 0; padding: .65rem; border-radius: 12px; background: #fff5cd; font-weight: 700; }
.hint-output:empty { display: none; }
.completion { margin: .7rem 0 0; padding: .7rem; text-align: center; border-radius: 16px; box-shadow: none; }
.completion h2 { margin: .15rem 0; font-size: 1.25rem; }
.completion p { margin: .25rem 0; }
.completion .eyebrow { font-size: .7rem; }
.completion .start-actions { display: flex; flex-wrap: nowrap; justify-content: center; margin-top: .45rem; }
.completion button { min-height: 48px; min-width: 0; padding: .4rem .55rem; font-size: .875rem; }
dialog { max-width: min(740px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0; border: 3px solid #17264d; border-radius: 24px; color: #17264d; background: #fff9f2; box-shadow: 7px 8px 0 #17264d; }
dialog::backdrop { background: rgb(23 38 77 / .56); }
.help-content { padding: 1.2rem; overflow: auto; }
.help-heading { display: flex; align-items: start; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.help-heading button { flex-shrink: 0; }
.dialog-home-link { min-height: 44px; display: inline-flex; align-items: center; margin-top: .85rem; color: #17264d; font-weight: 800; }
.help-content h2, .help-content h3 { margin: 0 0 .4rem; }
.help-docks { margin: .7rem 0; }
.help-dock { min-height: 150px; }
.help-dock p { margin: 0 0 .3rem; }
.help-pieces { min-height: 94px; }
.invalid-example { display: flex; align-items: center; gap: .8rem; padding: .65rem; border: 3px solid #17264d; border-radius: 14px; background: #fff3c5; }
.invalid-example p { margin: 0; font-weight: 800; }
.invalid-dock { width: 125px; display: flex; flex-direction: column-reverse; align-items: center; border-bottom: 7px solid #8b5e3c; }
.invalid-dock .piece { height: 27px; }
.blocked-piece { opacity: .7; transform: translateY(-8px); outline: 3px solid #ef6a44; }

@media (max-width: 650px) {
  main { padding: .7rem; }
  .start-card { grid-template-columns: 1fr; }
  .start-card { margin: .5rem auto; padding: 1rem; gap: .65rem; }
  .welcome-preview { padding: .5rem; }
  .preview-dock { min-height: 108px; }
  .preview-pieces { min-height: 67px; }
  .play-layout { grid-template-columns: 1fr; gap: .65rem; }
  .dock-card { min-height: 270px; padding: .65rem; }
  .docks { min-height: 218px; gap: .32rem; }
  .dock { min-height: 208px; }
  .dock-name { min-height: 3.2rem; font-size: .65rem; line-height: 1.2; }
  .pieces { min-height: 116px; }
  .piece { height: 28px; border-width: 2px; border-radius: 8px 8px 4px 4px; }
  .support { min-height: 2.2rem; font-size: .62rem; }
  .controls { padding: .7rem; }
  .controls h2 { font-size: 1.05rem; }
  .actions { gap: .35rem; margin-top: .55rem; }
  .actions button { padding: .42rem .55rem; }
  .feedback, .hint-output { min-height: 0; margin-top: .45rem; }
  .rule-strip { gap: .4rem; padding: .45rem; font-size: .75rem; }
  .rule-picture { width: 48px; }
  .rule-target { display: none; }
}

@media (max-width: 360px) {
  .round-head h1 { font-size: 1.3rem; line-height: 1.25; }
  .round-head .eyebrow { font-size: .7rem; letter-spacing: .04em; }
  .support-status { font-size: .85rem; }
  .dock-card .rule { font-size: .85rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .game-bar { min-height: 42px; padding-top: .25rem; padding-bottom: .25rem; }
  main { padding: .45rem .7rem; }
  .round-head { margin-bottom: .25rem; }
  .round-head h1 { font-size: 1.2rem; line-height: 1.2; }
  .round-head .eyebrow { font-size: .7rem; }
  .support-status { font-size: .8rem; }
  .rule-strip { margin-bottom: .35rem; padding: .3rem .5rem; font-size: .75rem; }
  .rule-picture { width: 50px; }
  .rule-picture .piece { height: 16px; font-size: .55rem; }
  .play-layout { grid-template-columns: 1.18fr .82fr; gap: .65rem; }
  .dock-card { min-height: 218px; padding: .5rem; }
  .docks { min-height: 174px; }
  .dock { min-height: 166px; }
  .pieces { min-height: 85px; }
  .piece { height: 21px; }
  .support { min-height: 1.8rem; }
  .controls { padding: .55rem; }
  .controls h2 { font-size: 1rem; line-height: 1.2; }
  .destinations { margin-top: .35rem; }
  .actions { margin-top: .35rem; }
  .actions button { min-height: 44px; }
  .feedback, .hint-output, .undo-note { margin-top: .35rem; }
  dialog { max-height: calc(100dvh - .8rem); }
  .help-content { padding: .7rem; }
  .help-heading h2 { font-size: 1.25rem; }
  .help-dock { min-height: 92px; }
  .help-pieces { min-height: 54px; }
  .help-dock .piece { height: 18px; }
}

@media (max-height: 400px) {
  .game-bar { min-height: 42px; padding-top: .25rem; padding-bottom: .25rem; }
  main { padding: .35rem .7rem; }
  .start-card { margin: .2rem auto; padding: .35rem .8rem; gap: .55rem; }
  .start-card h1 { font-size: 1.8rem; }
  .start-card p { margin-top: .2rem; margin-bottom: .2rem; font-size: .9rem; }
  .start-actions { margin-top: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}