/* Shared navigation and feedback. Board tracks and tile dimensions stay fixed. */
/* Stop double-tap zoom on every page, including nested scrolling areas.
   Zero specificity preserves each game's own touch-action:none gesture surface. */
:where(html, body, body *) { touch-action:manipulation; }
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:page-out 160ms ease-out both; }
::view-transition-new(root) { animation:page-in 320ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes page-out { to { opacity:0; } }
@keyframes page-in { from { clip-path:circle(0 at 50% 24%); } to { clip-path:circle(150% at 50% 24%); } }

.playground-home {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 14px;
  border:1px solid #d5d9cd;
  border-radius:99px;
  background:#fffdf7;
  color:#454e3d;
  font:600 12px 'DM Sans',system-ui,sans-serif;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  touch-action:manipulation;
  transition:background 180ms,border-color 180ms,box-shadow 180ms;
}
.playground-home:hover { background:#e9eddf; border-color:#899780; box-shadow:0 3px 12px #292c2710; }
.playground-home:focus-visible { outline:3px solid #285b89; outline-offset:3px; }
.playground-home svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.primary-button,.btn,.card { position:relative; overflow:hidden; }
.interaction-ripple { position:absolute; border-radius:50%; background:currentColor; opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(0); animation:press-ripple 500ms ease-out; }
@keyframes press-ripple { from { opacity:.16; transform:translate(-50%,-50%) scale(0); } to { opacity:0; transform:translate(-50%,-50%) scale(1); } }

.grid-option input:checked+.grid-option-content:after,.mode-option input:checked+span:after { animation:choice-check 220ms cubic-bezier(.2,1.5,.4,1); }
@keyframes choice-check { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:scale(1); } }
.grid-option-content,.mode-option>span { transition:background 180ms,border-color 180ms,box-shadow 180ms; }
.tile.clicked .icon { stroke-dasharray:32; stroke-dashoffset:0; animation:check-draw 180ms ease-out; }
@keyframes check-draw { from { stroke-dashoffset:32; opacity:.3; } to { stroke-dashoffset:0; opacity:1; } }
.tile.feedback-wrong .tile-number { animation:wrong-symbol 240ms ease-out; }
@keyframes wrong-symbol { 25% { transform:translateX(-3px); } 60% { transform:translateX(3px); } 85% { transform:translateX(-1px); } }
.feedback-wrong:not(.tile) { outline:2px solid #ffb8a3; outline-offset:4px; }
.result-overlay { animation:result-reveal 340ms cubic-bezier(.2,.7,.2,1); }
@keyframes result-reveal { from { opacity:0; clip-path:circle(0 at 50% 50%); } to { opacity:1; clip-path:circle(150% at 50% 50%); } }
.result-overlay .result-icon { animation:choice-check 360ms cubic-bezier(.2,1.5,.4,1); }
.record-new { animation:record-arrive 300ms ease-out; }
@keyframes record-arrive { from { opacity:.3; translate:0 5px; } to { opacity:1; translate:0 0; } }
.how-to-play[open] ol { animation:record-arrive 220ms ease-out; }
.how-to-play summary { min-height:44px; }

/* Shared motion vocabulary: small controls are light; cards and sheets carry weight. */
:root { --motion-settle:420ms;--motion-out:cubic-bezier(.2,.8,.2,1);--card-radius:26px; }
::view-transition { pointer-events:none; }
::view-transition-group(game-stage) { animation-duration:var(--motion-settle);animation-timing-function:var(--motion-out); }
::view-transition-old(game-stage) { animation:stage-out 180ms ease-in both; }
::view-transition-new(game-stage) { animation:stage-in var(--motion-settle) var(--motion-out) both; }
@keyframes stage-out { to { opacity:0; } }
@keyframes stage-in { from { opacity:.5; } to { opacity:1; } }
.play-panel,#app { view-transition-name:game-stage; }
.motion-control { translate:var(--motion-x,0px) var(--motion-y,0px);scale:var(--motion-scale,1); }
.motion-reveal.result-overlay,.panel.motion-reveal { animation:none; }
.grid-options,.mode-options { position:relative;isolation:isolate; }
.grid-option:hover .grid-option-content { transform:none; }
.choice-ink { position:absolute;left:0;top:0;z-index:2;width:100px;height:100px;transform-origin:0 0;pointer-events:none; }
.choice-ink svg { display:block;width:100%;height:100%;overflow:visible; }
.choice-ink rect { fill:none;stroke:var(--orange,#c44d28);stroke-width:2;vector-effect:non-scaling-stroke; }
fieldset:disabled>.choice-ink { visibility:hidden; }

/* Only the card's visual surface moves; its native link and focus ring stay put. */
.grid .card.motion-card { overflow:visible;background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transform:none;transition:none;animation:none;perspective:1000px; }
.grid .card.motion-card .card-surface { position:relative;display:flex;flex-direction:column;flex:1;min-width:0;background:var(--glass);border:1px solid var(--line);border-radius:calc(var(--card-radius) + var(--bend,0px)) calc(var(--card-radius) - var(--bend,0px)) calc(var(--card-radius) + var(--bend,0px)) calc(var(--card-radius) - var(--bend,0px));overflow:hidden;box-shadow:0 8px 28px #0002;transform-style:preserve-3d;transition:border-color 180ms,box-shadow 180ms; }
.grid .card.motion-card:is(:hover,:focus-visible,.is-tugging) .card-surface { border-color:var(--accent);box-shadow:0 20px 46px -22px var(--accent); }
.grid .card.motion-card.is-tugging { cursor:grabbing;z-index:2; }
.grid .card.motion-card .art { position:relative;overflow:hidden; }
.grid .card.motion-card .art:before { content:'';position:absolute;inset:-20%;background:radial-gradient(circle at 28% 24%,#fff5,transparent 42%),radial-gradient(circle at 78% 80%,#ffffff24,transparent 35%);translate:calc(var(--layer-x,0px) * .3) calc(var(--layer-y,0px) * .3);pointer-events:none; }
.grid .card.motion-card .art svg { position:relative;transform:translate3d(var(--layer-x,0px),var(--layer-y,0px),18px) scale(1.025);transition:none; }
.grid .card.motion-card .body { transform:translate3d(calc(var(--layer-x,0px) * .18),calc(var(--layer-y,0px) * .12),0); }
.grid .card.motion-card .play i { transform:translateX(calc(var(--layer-x,0px) * .35));transition:transform 160ms var(--motion-out); }
.grid .card.motion-card:is(:hover,:focus-visible) .play i { transform:translateX(calc(4px + var(--layer-x,0px) * .35)); }

dialog.motion-sheet { max-height:min(85dvh,680px);overflow:auto;translate:0 var(--sheet-y,0px);scale:calc(1 + var(--sheet-strain,0));opacity:0;transform:translateY(38px) scale(.985);transition:opacity 160ms ease-out,transform 180ms var(--motion-out),display 180ms allow-discrete,overlay 180ms allow-discrete; }
dialog.motion-sheet[open] { opacity:1;transform:translateY(0) scale(1);transition-duration:160ms,320ms,320ms,320ms; }
dialog.motion-sheet:not([open]) { pointer-events:none; }
dialog.motion-sheet:not([open])::backdrop { pointer-events:none; }
dialog.motion-sheet::backdrop { background:#17201788;backdrop-filter:blur(3px); }
@starting-style { dialog.motion-sheet[open] { opacity:0;transform:translateY(38px) scale(.985); } }
.sheet-grip { position:relative;display:grid;place-items:center;height:44px;margin:-14px -6px 12px;touch-action:none;cursor:grab; }
.sheet-grip:active { cursor:grabbing; }
.sheet-grip>span { width:38px;height:4px;border-radius:99px;background:#8b9480; }
.sheet-close { position:absolute;right:0;top:0;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#454e3d;cursor:pointer; }
.sheet-close:hover { background:#e9eddf; }
.sheet-close:focus-visible { outline:3px solid #285b89;outline-offset:2px; }
.sheet-close svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round; }

@media(max-width:900px) {
  .site-header .header-motto { display:none; }
  .site-header { gap:18px; }
}
@media(max-width:600px) {
  :root { --card-radius:18px; }
  dialog.motion-sheet { inset:auto 0 0;width:calc(100% - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-bottom));margin:12px auto calc(12px + env(safe-area-inset-bottom));border-radius:22px; }
  html { scroll-padding-top:12px; }
  .site-header { height:auto; min-height:76px; padding:12px 0; margin:0 16px; display:grid; grid-template-columns:1fr auto; gap:8px 12px; }
  .site-header .brand { font-size:25px; }
  .site-header nav { grid-column:1/-1; justify-content:center; gap:28px; margin:0; font-size:12px; }
  .site-header nav a { display:inline-flex; align-items:center; min-height:36px; }
  .playground-home { padding:0 12px; font-size:12.1px; }
  main { padding:0 16px; }
  .intro { padding:24px 0; }
  .intro-copy { font-size:12px; line-height:1.65; margin-top:14px; }
  .arena { gap:22px; }
  .setup-panel>.panel-description { display:block; margin:6px 0 0; font-size:12.1px; }
  .mode-options { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:14px; gap:7px; }
  .mode-option>span { padding:10px 8px; min-height:68px; }
  .mode-option strong { font-size:19px; }
  .mode-option small { font-size:12.1px; }
  .mode-option input:checked+span:after { top:5px; right:5px; font-size:10px; }
  .grid-options { gap:7px; margin-top:14px; }
  .grid-option-content { min-height:88px; padding:10px 8px; }
  .grid-option strong { font-size:16px; }
  .grid-option small { font-size:10px; }
  .mini-grid { width:20px; height:20px; margin-bottom:7px; }
  .mode-note,.size-note { font-size:12.1px; line-height:1.5; }
  .how-to-play { margin-top:12px; padding-top:8px; }
  .how-to-play summary { font-size:12.1px; }
  .how-to-play small { font-size:12.1px; }
  .timer { font-size:62px; }
  .timer-block { padding-bottom:10px; }
  .next-cue { min-height:62px; padding:9px 12px; }
  .next-cue p { font-size:12.1px; }
  .board-frame { padding:12px; }
  .board[data-size="6"] { gap:5px; }
  .board[data-size="6"] .tile { font-size:19px; }
  .board-hint { font-size:12.1px; line-height:1.6; }
  .start-button,.restart-button { min-height:48px; font-size:13px; }
  .record-date,.storage-note,.records-caption { font-size:12.1px; line-height:1.6; }
  .install-banner { flex-wrap:wrap; }
  .install-banner p { font-size:12.1px; }
  .site-footer { padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
}
@media(max-width:360px) {
  .mode-option>span { padding:10px 6px; }
  .mode-option small { font-size:10px; }
  .board-frame { padding:10px; }
  .board[data-size="6"] { gap:4px; }
  .board[data-size="6"] .tile { font-size:17px; }
  .grid-option small { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none!important; }
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .motion-control { translate:none!important;scale:1!important; }
  .grid .motion-card .card-surface,.grid .motion-card .art svg,.grid .motion-card .body { transform:none!important; }
  .choice-ink { display:none; }
  dialog.motion-sheet { translate:none!important;scale:1!important;transform:none!important; }
}

/* Copyright stays on its own final line across the playground and game footers. */
footer{flex-wrap:wrap}
footer .site-copyright{flex:0 0 100%;order:10;width:100%;margin:0;font-size:12.1px;line-height:1.6;text-align:center}

/* Give dropdown arrows consistent breathing room without changing native selection. */
select:not([multiple]):not([size]),select:not([multiple])[size="1"]{
  -webkit-appearance:none;
  appearance:none;
  padding-inline-end:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%234c6053' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:right 16px center;
  background-size:12px 8px;
  background-repeat:no-repeat;
}
@media(forced-colors:active){
  select:not([multiple]):not([size]),select:not([multiple])[size="1"]{
    -webkit-appearance:menulist;
    appearance:auto;
    background-image:none;
  }
}

/* Compact game slogans fit their explicit two-line composition on phones. */
body :is(.intro,.bbl-intro) h1,body #setup>h1{font-size:clamp(30px,4.2vw,48px)!important;line-height:1.15!important;max-inline-size:100%;text-wrap:balance}
@media(max-width:700px){body :is(.intro,.bbl-intro) h1,body #setup>h1{font-size:clamp(22px,5.8vw,32px)!important;letter-spacing:-.025em!important;line-height:1.15!important}}