.play-header{gap:24px;padding-bottom:24px}.back{color:#6d52a4;text-decoration:none;font-size:14px;font-weight:700}.session-label{margin-left:auto;color:#8b7ca8;font-size:12px}.play-header .avatar{display:grid;place-items:center}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px;padding-top:0}.game-shell{background:#28394c;border-radius:22px;overflow:hidden;box-shadow:0 6px 0 #38225823}.game-hud{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;color:white;background:#273347}.player{display:flex;gap:10px;align-items:center;font-weight:700;font-size:13px}.player small{display:block;color:#99acc4;font-size:8px;letter-spacing:1.3px;margin-top:4px}.player-face{width:39px;height:39px;background:#4bd2eb;border-radius:13px;display:grid;place-items:center;color:#20384c;font-size:21px}.rival{text-align:right}.rival .player-face{background:#ff7b78}.scoreboard{text-align:center;min-width:100px}.scoreboard b{display:block;font:800 27px 'Outfit',sans-serif;letter-spacing:7px;margin-left:7px}.scoreboard>span{font-size:8px;color:#a6b9d2;letter-spacing:1.5px}.canvas-wrap{position:relative;background:#123c4a}canvas{width:100%;height:auto;aspect-ratio:5/3;display:block;touch-action:none;outline-offset:-4px!important}.game-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;padding:10px 18px;color:#dae2ef}.game-controls p{font-size:12px;margin:0}.game-controls>div{display:flex;gap:8px;flex-shrink:0}.game-controls button{border:0;border-radius:9px;background:#3c4b62;color:#fff;width:33px;height:33px;font-size:19px}.game-details{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:28px}.game-details h1{font-size:33px;margin:5px 0 10px}.game-details p{color:#7b6a91;font-size:13px;line-height:1.6;max-width:600px;margin:0}.save-game{flex-shrink:0;border:0;background:#fff9;border-radius:14px;padding:12px 16px;color:#7253aa;font-weight:700;font-size:12px}.save-game[aria-pressed=true]{background:#ffd6e2;color:#ab375e}.instructions{border-top:1px solid #8970ad30;margin-top:22px;padding-top:18px;display:flex;gap:25px;align-items:flex-start;justify-content:space-between}.instructions h3{font:700 14px 'Outfit',sans-serif;margin:0 0 7px}.instructions p{color:#89769c;font-size:12px;line-height:1.7;margin:0;max-width:550px}.practice-badge{font-size:9px;color:#7d6d98;white-space:nowrap;padding-top:3px}.aside-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px}.aside-heading h2{font:800 20px 'Outfit',sans-serif;margin:0}.aside-heading span{font-size:9px;color:#8b78a6}.recommendation{display:block;position:relative;aspect-ratio:1.9;margin-bottom:13px;border-radius:17px;overflow:hidden;box-shadow:0 4px 0 #48316e20;color:#fff;text-decoration:none;transition:transform .2s}.recommendation:hover{transform:translateY(-3px)}.recommendation img{width:100%;height:100%;object-fit:cover;display:block}.recommendation:after{content:'';position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#151137d9)}.recommendation>div{position:absolute;bottom:12px;left:15px;z-index:1}.recommendation b{font:800 23px 'Outfit',sans-serif;display:block}.recommendation small{font-size:9px}.recommendation>span{position:absolute;right:13px;bottom:16px;background:white;color:#7842d1;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:10px}.browse-all{display:block;padding:12px;text-align:center;background:#d9cdf7;border-radius:12px;color:#614294;font-size:12px;font-weight:700;text-decoration:none}.little-note{padding:20px 15px;color:#8870a4;font-size:12px;text-align:center}.little-note p{font-size:10px}.little-note>span{color:#ac91d6;font-size:21px;letter-spacing:10px}.result{position:absolute;inset:0;background:#1c264a99;backdrop-filter:blur(5px);display:grid;place-items:center;text-align:center;color:#fff}.result[hidden]{display:none}.result span{font-size:11px;letter-spacing:3px}.result h2{font:800 48px 'Outfit',sans-serif;margin:12px}.result button{background:#ffdb65;color:#422960;border:0;border-radius:13px;padding:14px 28px;font-weight:800}.touch-controls{display:flex;justify-content:center;gap:10px;margin-top:15px}.touch-controls[hidden]{display:none}.touch-controls button{width:45px;height:42px;border:0;border-radius:12px;background:#fff9;color:#6037a5;font-size:23px}.game-shell:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#192e3f}.game-shell:fullscreen .canvas-wrap{min-height:0;align-self:center;width:min(100vw,calc((100vh - 145px)*5/3))}.game-shell:fullscreen .game-hud,.game-shell:fullscreen .game-controls{width:100%}
@media(max-width:1100px){.play-layout{grid-template-columns:minmax(0,1fr) 215px;gap:18px}.practice-badge{white-space:normal;max-width:120px}.recommendation b{font-size:20px}}@media(max-width:800px){.play-layout{display:block}.recommendations{margin-top:28px}.recommendations #related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.recommendation{aspect-ratio:1.3;margin:0}.recommendation>span{display:none}.recommendation b{font-size:19px}.recommendation small{font-size:8px}.browse-all{margin-top:14px}.little-note{display:none}.session-label{display:none}.play-header .avatar{margin-left:auto}.game-hud{padding:12px 18px}}@media(max-width:620px){.play-header{flex-wrap:nowrap;gap:14px;padding:16px}.back{font-size:12px}.play-layout{padding:0 10px 25px}.game-hud{padding:12px}.player{gap:6px;font-size:10px}.player-face{width:28px;height:28px;font-size:16px;border-radius:9px}.player small{font-size:6px}.scoreboard b{font-size:22px}.scoreboard{min-width:60px}.scoreboard>span{font-size:6px;letter-spacing:.8px}.game-shell{border-radius:15px}.game-controls{padding:9px 10px;gap:8px;min-height:56px}.game-controls p{font-size:10px;line-height:1.4}.game-controls button{width:28px;height:29px}.game-controls>div{gap:5px}.game-details{margin:23px 5px 0;align-items:flex-start}.game-details h1{font-size:27px}.game-details p{font-size:11px}.save-game{font-size:10px;padding:10px}.instructions{margin:18px 5px 0;display:block}.practice-badge{display:block;max-width:none;margin-top:12px}.recommendations{margin:25px 5px 0}.recommendations #related{grid-template-columns:repeat(2,1fr)}.recommendation{aspect-ratio:1.4}.recommendation>div{left:11px;bottom:10px}.recommendation b{font-size:20px}.recommendations #related a:last-child{grid-column:span 2;aspect-ratio:2.8}.game-details .eyebrow{font-size:7px}footer{margin-top:10px}}

@media(max-width:620px){.sumo-game:not(:fullscreen) .canvas-wrap{aspect-ratio:1/1;overflow:hidden}.sumo-game:not(:fullscreen) #game{position:absolute;top:0;left:-33.333333%;width:166.666667%;height:100%;max-width:none}.sumo-game .result h2{font-size:34px}}

.game-hud .player.active-turn .player-face{box-shadow:0 0 0 3px #d4ff8d,0 0 16px #d4ff8d40}.game-controls #pool-reaim{width:auto;min-width:90px;padding:8px 12px;font:700 12px Outfit,sans-serif;color:#d4ff8d;white-space:nowrap}.game-controls #pool-reaim[hidden]{display:none}
@media(max-width:620px){.board-game:not(:fullscreen) .canvas-wrap{aspect-ratio:1/1;overflow:hidden}.board-game:not(:fullscreen) #game{position:absolute;top:0;left:-33.333333%;width:166.666667%;height:100%;max-width:none}}

/* Keep Snake steering within reach and inside fullscreen. */
.touch-controls{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,48px);gap:6px;margin:0;padding:10px 0 6px;background:#28394c;touch-action:none;user-select:none}
.touch-controls button{width:52px;height:48px;background:#d6f49a;color:#193b50;box-shadow:0 3px 0 #12283d;touch-action:none;-webkit-tap-highlight-color:transparent}
.touch-controls button:active{transform:translateY(2px);box-shadow:0 1px 0 #12283d;background:#aff0e1}
.touch-controls [data-dir=up]{grid-column:2;grid-row:1}.touch-controls [data-dir=left]{grid-column:1;grid-row:2}.touch-controls [data-dir=down]{grid-column:2;grid-row:2}.touch-controls [data-dir=right]{grid-column:3;grid-row:2}
.game-shell:fullscreen:has(.touch-controls:not([hidden])) .canvas-wrap{width:min(100vw,calc((100dvh - 265px)*5/3))}
