/* Slide Shuffle */
/* shared layout for the DOM games (copied into each game.css at build time) */
.gwrap { position: relative; height: 100%; max-width: 640px; margin: 0 auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; color: var(--text, #f3ebe0); }
.screen { display: none; flex: 1; min-height: 0; flex-direction: column; align-items: center; gap: 10px; overflow-y: auto; touch-action: pan-y; }
.screen.on { display: flex; }
#scr-play.screen { overflow: hidden; touch-action: none; }
.g-title { font-family: ui-serif, Georgia, "Times New Roman", serif; font-size: 32px; margin: 8px 0 0; text-align: center; }
.g-sub { color: var(--text-dim, #c2b5a3); margin: 0 0 4px; text-align: center; }
.g-best { color: var(--text-dim, #c2b5a3); font-size: 14px; text-align: center; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.opt { width: 100%; max-width: 420px; }
.opt-label { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--text-dim, #c2b5a3); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--outline, #9a8a76); background: transparent; color: var(--text, #f3ebe0); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent, #f2b134); border-color: var(--accent, #f2b134); color: var(--accent-ink, #1a1208); }
.seg button[aria-pressed="true"]::before { content: "\2713\00a0"; }
.seg button:disabled { opacity: .5; cursor: not-allowed; }
.screen > .btn { width: 100%; max-width: 420px; }
.hud { display: flex; gap: 8px; width: 100%; justify-content: center; flex: none; }
.stat { flex: 1; max-width: 140px; background: var(--surface, #1e1a16); border: 1px solid var(--line, #5a4e42); border-radius: 10px; padding: 4px 8px; text-align: center; }
.stat span { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim, #c2b5a3); }
.stat b { font-family: ui-serif, Georgia, serif; font-size: 22px; font-variant-numeric: tabular-nums; }
.caption { min-height: 1.5em; margin: 0; text-align: center; font-weight: 700; color: var(--accent, #f2b134); flex: none; }
.end-line { margin: 0; font-size: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.end-line.dim { color: var(--text-dim, #c2b5a3); font-size: 15px; }
.stars { font-size: 40px; letter-spacing: 6px; margin: 0; color: var(--accent, #f2b134); }
.fb-pause { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,6,4,.8); z-index: 20; text-align: center; font-size: 24px; }
.fb-pause[hidden] { display: none; }
[hidden] { display: none !important; }

#play { background: radial-gradient(120% 80% at 50% 0%, #2a2016 0%, #120e0a 70%); }
.board { position: relative; width: var(--size, 320px); height: var(--size, 320px); flex: none; margin: 0 auto; border-radius: 16px; background: #20170f; box-shadow: inset 0 0 0 3px #4a3a2a, 0 10px 30px rgba(0,0,0,.5); --gap: 6px; padding: var(--gap); }
.tile { position: absolute; left: var(--gap); top: var(--gap); width: calc((var(--size, 320px) - var(--gap) * (var(--n) + 1)) / var(--n)); height: calc((var(--size, 320px) - var(--gap) * (var(--n) + 1)) / var(--n));
  transform: translate(calc(var(--x) * (100% + var(--gap))), calc(var(--y) * (100% + var(--gap)))); transition: transform 140ms ease-out;
  border: 2px solid #3a2416; border-radius: 10px; background: linear-gradient(180deg, #d9a066 0%, #b9824a 55%, #a06a38 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 3px 6px rgba(0,0,0,.45);
  color: #2a1608; font: 800 calc(var(--size, 320px) / var(--n) * .38) / 1 ui-serif, Georgia, serif; cursor: pointer; padding: 0; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.tile:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; z-index: 2; }
.tile.home { box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 0 0 3px rgba(102,212,146,.75), 0 3px 6px rgba(0,0,0,.45); }
.board.picture .tile { background-color: #6b4a2a; }
.board.picture .tile .num { position: absolute; left: 5px; top: 4px; font-size: max(12px, calc(var(--size, 320px) / var(--n) * .17)); color: #fff6d8; background: rgba(20,14,8,.6); padding: 1px 5px; border-radius: 6px; font-family: system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } }
html.reduce-motion .tile { transition: none; }