body.game-page{min-height:100vh;display:grid;place-items:center;overflow-x:hidden}.game-shell{width:min(1050px,calc(100% - 30px));min-height:100vh;margin:auto;display:grid;grid-template-columns:260px minmax(320px,620px);gap:45px;align-items:center;justify-content:center}.game-info{grid-column:1;grid-row:1}.game-stage{grid-column:2;grid-row:1;width:100%;min-width:0}.game-page .back{display:inline-block;margin-bottom:0}.game-page .tag,.game-page .eyebrow{margin-top:42px}.game-page .game-stage,.game-page .frame,.game-page .panel,.game-page .table,.game-page .grid{box-shadow:0 35px 100px #0008}.game-reversed .game-shell{grid-template-columns:minmax(320px,620px) 260px}.game-reversed .game-info{grid-column:2}.game-reversed .game-stage{grid-column:1}.game-overlay{grid-column:2;grid-row:1;z-index:3}.game-reversed .game-overlay{grid-column:1}.game-page .legacy-nav{display:none}.game-page .panel{min-height:560px}.game-page .controls{font-size:12px!important}.game-page .hud{font-size:12px!important}.game-page .hud b{font-size:17px}.game-page h1{font-size:56px;line-height:.88}.game-page .copy,.game-page .desc{font-size:12px;line-height:1.8}.game-page .status{font-size:12px}@media(max-width:760px){body.game-page{display:block}.game-shell,.game-reversed .game-shell{width:min(590px,calc(100% - 24px));min-height:0;padding:72px 0 28px;grid-template-columns:1fr;gap:24px}.game-info,.game-reversed .game-info{grid-column:1;grid-row:1;text-align:center}.game-stage,.game-reversed .game-stage{grid-column:1;grid-row:2}.game-overlay,.game-reversed .game-overlay{grid-column:1;grid-row:2}.game-page .tag,.game-page .eyebrow{margin-top:18px}.game-page h1{font-size:42px;margin:16px 0}.game-page .copy,.game-page .desc{display:none}.game-page .panel{min-height:min(560px,70vh)}}
body.game-page{overflow-y:auto}.game-shell{height:auto;padding:0}.game-info{text-align:left}.game-page .game-overlay{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;align-self:stretch;margin:12px;border-radius:18px}.game-page .grid{grid-template-columns:repeat(var(--cols,4),1fr)}@media(max-width:760px){.game-shell{padding:72px 0 28px}.game-info{text-align:center}.game-page .game-overlay{margin:12px}}

.game-page .back{color:var(--muted,#968b9c);text-decoration:none}.game-page .game-overlay{width:calc(100% - 24px);aspect-ratio:1.25;align-self:center;justify-self:center;margin:0}
@media(max-width:760px){.game-page .game-overlay{width:calc(100% - 24px);margin:0}}

/* Shared game typography and vertical rhythm */
.game-page .game-info .back{display:inline-block;margin:0;color:var(--muted,#968b9c);text-decoration:none;font:500 14px/1.2 "DM Mono",monospace!important;letter-spacing:.1em}
.game-page .game-info .tag,.game-page .game-info>.eyebrow{margin:36px 0 0;font:500 14px/1.2 "DM Mono",monospace!important;letter-spacing:.12em}
.game-page .game-info .tag+.eyebrow{margin-top:10px}
.game-page .game-info h1{margin:16px 0 18px;font-size:56px!important;line-height:.88!important;letter-spacing:-.07em}
.game-page .game-info h1 span{-webkit-text-stroke-width:1.5px}
.game-page .game-info .copy,.game-page .game-info .desc,.game-page .game-info .hint{margin:0;color:var(--muted,#817788);font:12px/1.8 "DM Mono",monospace!important;letter-spacing:0}
.game-page .scorebox,.game-page .stats,.game-page .meta{display:flex;gap:32px;margin:30px 0 0;padding-top:18px}
.game-page .scorebox small,.game-page .stats small,.game-page .meta span{font:500 12px/1.6 "DM Mono",monospace!important;letter-spacing:.1em}
.game-page .scorebox b,.game-page .stats b,.game-page .meta b{font:500 28px/1.2 "DM Mono",monospace!important}
.game-page .hud{margin:4px 5px 16px;font:500 12px/1.4 "DM Mono",monospace!important;letter-spacing:.1em}
.game-page .hud b{font-size:17px!important}
.game-page .controls,.game-page .status,.game-page .hint{font-size:12px!important;line-height:1.6!important;letter-spacing:.1em!important}
.game-page .controls,.game-page .status{margin-top:16px}
.game-page .button,.game-page .overlay span,.game-page .win button{font-size:12px!important;letter-spacing:.1em}
.game-page .overlay b,.game-page .win b{font-size:28px;line-height:1.15}
@media(max-width:760px){.game-page .game-info .back,.game-page .game-info .tag,.game-page .game-info>.eyebrow{font-size:13px!important}.game-page .game-info .tag,.game-page .game-info>.eyebrow{margin-top:18px}.game-page .game-info h1{font-size:42px!important;margin:14px 0 16px}.game-page .scorebox,.game-page .stats,.game-page .meta{justify-content:center;margin-top:18px}.game-page .controls,.game-page .status{font-size:11px!important}}

/* Hexes & Ohs uses .copy on its whole title panel, not only its description. */
@media(max-width:760px){.game-page .game-info.copy{display:flex;flex-direction:column;align-items:center;text-align:center}.game-page .game-info.copy>p{max-width:520px;margin-left:auto;margin-right:auto}}


/* Responsive play surfaces: isolate game gestures without trapping page navigation. */
.game-page canvas,.game-page .playfield,.game-page .board,.game-page .grid,.game-page .orbit{overscroll-behavior:contain}
.game-page canvas,.game-page .board button,.game-page .grid button,.game-page .orbit button{touch-action:manipulation}
.game-page canvas{touch-action:none}
.game-page .game-stage{position:relative}
.game-page .game-stage>.game-overlay{position:absolute;inset:12px 12px auto;width:auto;margin:0;aspect-ratio:1}
.game-page .game-shell>.game-overlay{width:calc(100% - 24px);max-width:none;aspect-ratio:1.25}
@media(max-width:760px){
 body.game-page{min-height:100dvh;overscroll-behavior-y:none}
 .game-shell,.game-reversed .game-shell{width:min(590px,calc(100% - 20px));padding:max(18px,env(safe-area-inset-top)) 0 max(18px,env(safe-area-inset-bottom));gap:14px}
 .game-page .game-info .tag,.game-page .game-info>.eyebrow{margin-top:10px}
 .game-page .game-info h1{font-size:clamp(34px,11vw,42px)!important;margin:10px 0 12px}
 .game-page .scorebox,.game-page .stats,.game-page .meta{margin-top:10px;padding-top:8px}
 .game-page .panel{min-height:0;padding:12px}
 .game-page .panel .playfield{min-height:0;aspect-ratio:1.08}
 .game-page .hud{margin:2px 3px 10px}
 .game-page .controls,.game-page .status{margin-top:10px}
 .game-page .game-shell>.game-overlay{width:calc(100% - 24px)}
}
@media(max-width:760px) and (max-height:700px){
 .game-shell,.game-reversed .game-shell{padding-top:max(10px,env(safe-area-inset-top));gap:9px}
 .game-page .game-info .tag,.game-page .game-info>.eyebrow{margin-top:7px}
 .game-page .game-info h1{font-size:32px!important;margin:7px 0 8px}
 .game-page .scorebox,.game-page .stats,.game-page .meta{margin-top:6px;padding-top:4px}
 .game-page .scorebox b,.game-page .stats b,.game-page .meta b{font-size:22px!important}
}

/* Snake is a fixed-viewport play screen: its frame and overlay follow the square canvas. */
html.snake-document,body.snake-page{height:100dvh;min-height:100dvh;overflow:hidden;overscroll-behavior:none}
body.snake-page .game-shell{height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden}
body.snake-page .frame{position:relative;width:100%}
body.snake-page .frame>.overlay{inset:12px}
@media(max-width:760px){
 body.snake-page .game-shell{grid-template-rows:auto minmax(0,1fr)}
 body.snake-page .game-stage{width:min(100%,calc(100dvh - 225px));min-height:0;justify-self:center;align-self:start}
}
@media(max-height:700px) and (min-width:761px){body.snake-page .game-stage{width:min(620px,calc(100dvh - 48px));justify-self:center}}

/* Every game is a single-screen play surface; only intentional inner regions may scroll. */
html{height:100%;overflow:hidden}
body.game-page{height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden;overscroll-behavior:none}
body.game-page .game-shell{height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden}
@media(max-width:760px){
 body.game-page .game-shell{grid-template-rows:auto minmax(0,1fr)}
 body.game-page .game-stage{width:min(100%,calc(100dvh - 270px));min-height:0;max-height:100%;justify-self:center;align-self:start;overflow:hidden}
}

/* Terminal display punctuation is the shared golden stop. */
.game-page .game-info h1 .title-stop{display:inline;color:#ffd36a!important;-webkit-text-fill-color:#ffd36a;-webkit-text-stroke:0!important;text-shadow:none}
/* Shared terminal feedback: a board bloom plus a lightweight celebration layer. */
body.game-result-win .game-stage{animation:result-win-border 1.15s cubic-bezier(.2,.8,.2,1)}body.game-result-lose .game-stage{animation:result-lose-border .5s ease}body.game-result-draw .game-stage{animation:result-draw-border .9s ease}body.game-result-win::after,body.game-result-lose::after,body.game-result-draw::after{position:fixed;inset:0;z-index:80;display:grid;place-items:center;pointer-events:none;font:700 clamp(38px,8vw,86px)/1 DM Mono,monospace;letter-spacing:.35em;white-space:nowrap}body.game-result-win::after{content:"✦  ✧  ✦";color:#ffd36a;text-shadow:0 0 28px #ffd36a;animation:result-stars 1.3s ease both}body.game-result-lose::after{content:"◇";color:#ff7890;text-shadow:0 0 24px #ff7890;animation:result-fade .8s ease both}body.game-result-draw::after{content:"◇  ◇";color:var(--accent,#ffd36a);text-shadow:0 0 22px currentColor;animation:result-fade 1s ease both}@keyframes result-win-border{0%{box-shadow:0 35px 100px #0008}38%{transform:scale(1.018);border-color:var(--accent,#ffd36a);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent,#ffd36a) 24%,transparent),0 0 70px color-mix(in srgb,var(--accent,#ffd36a) 48%,transparent)}100%{transform:none}}@keyframes result-lose-border{25%{transform:translateX(-5px);border-color:#ff7890}75%{transform:translateX(5px)}}@keyframes result-draw-border{50%{border-color:var(--accent,#ffd36a);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#ffd36a) 20%,transparent),0 20px 70px #0008}}@keyframes result-stars{0%{opacity:0;transform:scale(.45) rotate(-8deg)}35%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{opacity:0;transform:scale(1.35) translateY(-18vh)}}@keyframes result-fade{0%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}@media(prefers-reduced-motion:reduce){body.game-result-win .game-stage,body.game-result-lose .game-stage,body.game-result-draw .game-stage,body.game-result-win::after,body.game-result-lose::after,body.game-result-draw::after{animation:none}body.game-result-win::after,body.game-result-lose::after,body.game-result-draw::after{display:none}}
/* Turn ownership is deliberately louder than secondary HUD metadata. */
#status[data-turn="you"],#status[data-turn="other"]{color:var(--turn-color,var(--accent,#ffd36a));font-size:clamp(17px,2.2vw,24px)!important;font-weight:800;line-height:1.05!important;letter-spacing:-.02em!important;text-shadow:0 0 20px color-mix(in srgb,var(--turn-color,var(--accent,#ffd36a)) 45%,transparent);transition:color .2s,text-shadow .2s}
body.game-result-win .game-stage>.frame,body.game-result-win .game-stage>.grid{animation:result-win-border 1.15s cubic-bezier(.2,.8,.2,1)}body.game-result-lose .game-stage>.frame,body.game-result-lose .game-stage>.grid{animation:result-lose-border .5s ease}body.game-result-draw .game-stage>.frame,body.game-result-draw .game-stage>.grid{animation:result-draw-border .9s ease}@media(prefers-reduced-motion:reduce){body.game-result-win .game-stage>.frame,body.game-result-win .game-stage>.grid,body.game-result-lose .game-stage>.frame,body.game-result-lose .game-stage>.grid,body.game-result-draw .game-stage>.frame,body.game-result-draw .game-stage>.grid{animation:none}}