/* Shared look for the /play/{game} pages. Game screens stay dark in every theme: they are monitors. */
.gm{margin-top:22px; border:1px solid var(--line-strong); border-radius:18px; background:var(--card); box-shadow:var(--shadow); padding:14px; display:flex; flex-direction:column; gap:12px;}
.gm [hidden]{display:none !important;}
.gm-top{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:space-between; padding:2px 4px 0;}
.gm-title{font:600 13px 'IBM Plex Mono', monospace; letter-spacing:.05em; color:var(--copper);}
.gm-stats{display:flex; flex-wrap:wrap; gap:6px 16px; font:600 12px 'IBM Plex Mono', monospace; color:var(--ink-soft);}
.gm-stats b{color:var(--ink);}
.gm-screen{position:relative; border-radius:12px; overflow:hidden; background:#080604; color:#ffd08a; box-shadow:inset 0 0 0 1px rgba(255,170,60,.18), 0 0 30px rgba(255,140,40,.08);}
.gm-screen canvas{display:block; width:100%; touch-action:none;}
.gm-screen canvas:focus-visible, .gm-screen:focus-visible{outline:2px solid var(--terminal); outline-offset:-2px;}
.gm-screen.scan::after{content:''; position:absolute; inset:0; pointer-events:none; border-radius:12px;
    background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px);
    box-shadow:inset 0 0 70px rgba(0,0,0,.6);}
.gm-status{margin:0; min-height:3em; font:500 14px 'IBM Plex Mono', monospace; color:var(--ink); padding:0 4px;}
.gm-controls{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between;}
.gm button{font:700 13px 'IBM Plex Mono', monospace; cursor:pointer; border-radius:100px;}
.gm button:focus-visible{outline:2px solid var(--terminal); outline-offset:3px;}
.gm-btn{min-height:44px; padding:0 22px; border:0; background:var(--copper); color:#140c04; box-shadow:0 0 18px var(--copper-glow);}
.gm-btn:hover{filter:brightness(1.08);}
.gm-btn:disabled{opacity:.45; cursor:default; filter:none;}
.gm-ghost{min-height:40px; padding:0 16px; border:1px solid var(--line-strong); background:transparent; color:var(--ink);}
.gm-ghost:hover{border-color:var(--copper); color:var(--copper);}
.gm-ghost:disabled{opacity:.4; cursor:default;}
.gm-result{border:1px solid var(--copper); border-radius:12px; padding:14px 16px; background:var(--copper-soft); display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between;}
.gm-result h2{margin:0 0 4px; font-size:20px;}
.gm-result p{margin:0; color:var(--ink-soft);}
.gm-result-actions{display:flex; gap:10px; flex-wrap:wrap;}
.gm-foot{display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; align-items:center; font:600 12px 'IBM Plex Mono', monospace; color:var(--ink-faint); padding:0 4px;}
.gm-how{margin-top:20px; padding-block:28px; max-width:68ch;}
.gm-how h2, .gm-more h2{font-size:22px;}
.gm-how li{margin:6px 0;}
.gm-more{margin-top:4px; padding-block:28px;}
.gm-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px;}
.gm-tile{display:flex; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink) !important;}
.gm-tile:hover{border-color:var(--copper);}
.gm-glyph{flex:0 0 46px; height:46px; display:grid; place-items:center; border-radius:10px; background:#0b0806; color:#ffb347; font-size:24px; text-shadow:0 0 10px rgba(255,154,46,.7);}
.gm-tile b{display:block; font-family:'Fraunces', Georgia, serif; font-size:17px; font-weight:600;}
.gm-tile small{display:block; font-size:13px; color:var(--ink-soft); line-height:1.4;}
@media (max-width:560px){ .gm{padding:10px; border-radius:14px;} }

/* --- Rewind --- */
.rw-list{list-style:none; margin:0; padding:14px; display:flex; flex-direction:column; gap:10px; counter-reset:rw;}
.rw-end{font:600 11px 'IBM Plex Mono', monospace; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,190,110,.6); padding:0 4px;}
.rw-card{display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px; border:1px solid rgba(255,170,60,.35); border-radius:12px; background:rgba(255,160,60,.06); color:#ffe7c4; cursor:grab; user-select:none; touch-action:none; transition:transform .15s, border-color .2s, background-color .2s, box-shadow .2s;}
.rw-card.dragging{opacity:.9; cursor:grabbing; box-shadow:0 8px 30px rgba(0,0,0,.6), 0 0 0 1px #ffb347; position:relative; z-index:2;}
.rw-card.locked{cursor:default; border-color:#ffb347; background:rgba(255,170,60,.2); box-shadow:0 0 16px rgba(255,154,46,.35);}
.rw-card.wrong{animation:rw-shake .35s;}
@keyframes rw-shake{25%{transform:translateX(-5px)} 75%{transform:translateX(5px)}}
.rw-card .rw-text{flex:1; font:500 15px/1.35 'IBM Plex Sans', system-ui, sans-serif;}
.rw-card .rw-text small{display:block; margin-top:3px; font:600 11px 'IBM Plex Mono', monospace; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,190,110,.65);}
.rw-card .rw-year{font:700 20px 'IBM Plex Mono', monospace; color:#ffb347; text-shadow:0 0 10px rgba(255,154,46,.6);}
.rw-card .rw-year a{color:inherit;}
.rw-card .rw-move{display:flex; flex-direction:column; gap:4px;}
.rw-card .rw-move button{width:32px; height:28px; border-radius:8px; border:1px solid rgba(255,170,60,.35); background:transparent; color:#ffd08a; font-size:12px;}
.rw-card .rw-move button:disabled{opacity:.25;}
.rw-tries{display:flex; gap:6px;}
.rw-tries i{width:12px; height:12px; border-radius:50%; border:1px solid var(--copper);}
.rw-tries i.used{background:var(--copper);}

/* --- Logic Lab --- */
.ll-board svg{display:block; width:100%; height:auto; user-select:none;}
.ll-board .sw{cursor:pointer;}
.ll-board .sw:focus{outline:none;}
.ll-board .sw:focus-visible rect.sw-body{stroke:#fff1d6; stroke-width:3;}

/* --- Defrag --- */
.df-grid{display:grid; gap:3px; padding:14px; max-width:620px; margin:0 auto; touch-action:manipulation;}
.gm .df-cell{aspect-ratio:1; border-radius:4px; border:0; padding:0; background:rgba(255,170,60,.06); position:relative; font:700 12px 'IBM Plex Mono', monospace; color:rgba(0,0,0,.6); cursor:pointer; transition:transform .12s, box-shadow .2s, background-color .2s;}
.df-cell.empty{background:rgba(255,170,60,.06); box-shadow:inset 0 0 0 1px rgba(255,170,60,.1);}
.df-cell.sel{transform:scale(1.12); box-shadow:0 0 0 2px #fff1d6, 0 0 14px #fff1d6; z-index:1;}
.df-cell.done{box-shadow:0 0 10px currentColor;}
.df-grid.picking .df-cell.empty:hover{background:rgba(255,200,120,.25);}
.df-legend{max-width:620px; margin:0 auto; display:flex; flex-wrap:wrap; gap:6px 14px; padding:0 14px 12px; font:600 11px 'IBM Plex Mono', monospace; color:rgba(255,210,160,.75);}
.df-legend span{display:inline-flex; align-items:center; gap:6px;}
.df-legend i{width:10px; height:10px; border-radius:2px;}
.df-legend .ok{color:#ffd08a;}

/* --- Phosphor --- */
.ph-tv{display:grid; grid-template-columns:1fr 1fr; height:clamp(150px, 26vw, 280px); margin:12px; border-radius:24px / 30px; overflow:hidden; box-shadow:0 0 0 8px #1a120c, 0 0 0 9px rgba(255,170,60,.25), inset 0 0 50px rgba(0,0,0,.6);}
.ph-tv div{position:relative; display:flex; align-items:flex-end; padding:10px 14px; font:600 11px 'IBM Plex Mono', monospace; letter-spacing:.12em; text-transform:uppercase;}
.ph-tv span{background:rgba(0,0,0,.45); color:#fff; padding:3px 8px; border-radius:6px;}
.ph-guns{display:grid; gap:12px; padding:4px 16px 16px;}
.ph-gun{display:grid; grid-template-columns:70px 1fr; gap:12px; align-items:center; font:700 12px 'IBM Plex Mono', monospace; letter-spacing:.08em;}
.ph-gun input{width:100%; height:36px; accent-color:currentColor; cursor:pointer;}
.ph-rounds{display:flex; gap:6px;}
.ph-rounds i{width:26px; height:26px; border-radius:6px; border:1px solid var(--line-strong); display:grid; place-items:center; font:700 10px 'IBM Plex Mono', monospace; font-style:normal; color:#000;}

/* --- touch pad (Terraform) --- */
.gm-pad{display:none; grid-template-columns:repeat(3, 52px); grid-template-rows:repeat(2, 46px); gap:6px; justify-content:center;}
.gm-pad button{border-radius:12px !important; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); font-size:18px !important;}
.gm-pad button:active{background:var(--copper-soft);}
.gm-pad [data-dir="up"]{grid-column:2;}
.gm-pad [data-dir="left"]{grid-column:1; grid-row:2;}
.gm-pad [data-dir="down"]{grid-column:2; grid-row:2;}
.gm-pad [data-dir="right"]{grid-column:3; grid-row:2;}
@media (pointer:coarse){ .gm-pad{display:grid;} }

/* --- Garage Mainframe --- */
.gg{display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:12px;}
.gg-term{min-height:420px; padding:14px 16px; font:500 13px/1.45 'IBM Plex Mono', monospace; color:#ffb347; text-shadow:0 0 6px rgba(255,154,46,.55); cursor:pointer; display:flex; flex-direction:column; user-select:none;}
.gg-count{font-size:30px; font-weight:700; color:#ffd08a; line-height:1.1;}
.gg-rate{font-size:12px; color:rgba(255,190,110,.7); margin-bottom:10px;}
.gg-era{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,190,110,.7);}
.gg-code{flex:1; overflow:hidden; white-space:pre; color:rgba(255,179,71,.85); mask-image:linear-gradient(to bottom, transparent, #000 40%);}
.gg-code .cur{display:inline-block; width:8px; height:14px; background:#ffb347; vertical-align:-2px; animation:gg-blink 1s steps(1) infinite;}
@keyframes gg-blink{50%{opacity:0}}
.gg-hint{font-size:11px; color:rgba(255,190,110,.6); margin-top:6px;}
.gg-pop{position:absolute; pointer-events:none; font:700 14px 'IBM Plex Mono', monospace; color:#ffe2a8; animation:gg-pop .8s ease-out forwards;}
@keyframes gg-pop{to{transform:translateY(-40px); opacity:0}}
.gg-shop{display:flex; flex-direction:column; gap:8px;}
.gg-shop h3{margin:6px 2px 0; font:600 11px 'IBM Plex Mono', monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--copper);}
.gg-item{display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; text-align:left; padding:8px 12px; border:1px solid var(--line-strong); border-radius:12px !important; background:var(--card); color:var(--ink); font:500 13px 'IBM Plex Sans', system-ui, sans-serif !important;}
.gg-item:hover:not(:disabled){border-color:var(--copper);}
.gg-item:disabled{opacity:.45; cursor:default;}
.gg-item .ic{font-size:20px; text-align:center;}
.gg-item b{display:block; font-size:14px;}
.gg-item small{display:block; color:var(--ink-soft); font-size:12px;}
.gg-item .own{font:700 18px 'IBM Plex Mono', monospace; color:var(--copper);}
.gg-item .cost{font:600 11px 'IBM Plex Mono', monospace; color:var(--ink-soft);}
.gg-item.locked{filter:blur(.4px);}
@media (max-width:760px){ .gg{grid-template-columns:1fr;} .gg-term{min-height:260px;} }
@media (prefers-reduced-motion: reduce){ .rw-card, .df-cell{transition:none;} .gg-pop, .rw-card.wrong{animation:none;} }

/* --- full screen --- */
.gm-fs{min-height:32px; padding:0 12px; border:1px solid var(--line-strong) !important; background:transparent; color:var(--ink-soft); font-size:11.5px !important; margin-left:auto;}
.gm-fs:hover{border-color:var(--copper) !important; color:var(--copper);}
.gm:fullscreen, .gm.is-max, .ss:fullscreen, .ss.is-max{margin:0; border-radius:0; border:0; overflow:auto; background:var(--paper); padding:12px max(12px, calc((100vw - 1500px) / 2));}
.gm.is-max, .ss.is-max{position:fixed; inset:0; z-index:1000;}
.gm:fullscreen .gm-screen canvas, .gm.is-max .gm-screen canvas, .ss:fullscreen .ss-screen canvas, .ss.is-max .ss-screen canvas{max-width:100% !important; width:min(100%, calc((100vh - 200px) * var(--ar, 1.6))) !important; margin:0 auto;}
.gm:fullscreen .ll-board svg, .gm.is-max .ll-board svg{max-height:calc(100vh - 200px);}
.gm:fullscreen .gg-term, .gm.is-max .gg-term{min-height:calc(100vh - 220px);}
.gm:fullscreen .df-grid, .gm.is-max .df-grid, .gm:fullscreen .df-legend, .gm.is-max .df-legend{max-width:min(900px, calc((100vh - 260px) * 1.5));}
.gm:fullscreen .ph-tv, .gm.is-max .ph-tv{height:calc(100vh - 420px);}

/* --- Nerd Word --- */
.nw-grid{display:grid; gap:6px; justify-content:center; padding:16px 12px 10px;}
.nw-row{display:grid; grid-template-columns:repeat(5, 54px); gap:6px;}
.nw-row.shake{animation:rw-shake .35s;}
.nw-tile{height:54px; display:grid; place-items:center; border:2px solid rgba(255,190,110,.22); border-radius:8px; font:700 26px 'IBM Plex Mono', monospace; text-transform:uppercase; color:#ffe7c4; transition:background-color .2s, border-color .2s;}
.nw-tile.typed{border-color:rgba(255,190,110,.6); animation:nw-pop .1s;}
.nw-tile.flip{animation:nw-flip .5s;}
.nw-tile.hit{background:#f6b23c; border-color:#f6b23c; color:#1a1208;}
.nw-tile.near{background:#2bb3a3; border-color:#2bb3a3; color:#06201d;}
.nw-tile.miss{background:#2a231c; border-color:#2a231c; color:#8a7a6c;}
@keyframes nw-pop{50%{transform:scale(1.08)}}
@keyframes nw-flip{50%{transform:rotateX(90deg)}}
.nw-kb{display:flex; flex-direction:column; gap:6px; align-items:center; padding:6px 8px 16px;}
.nw-kb-row{display:flex; gap:5px;}
.gm .nw-key{min-width:36px; height:50px; padding:0 4px; border:0; border-radius:6px; background:#3a2f25; color:#ffe7c4; font:700 14px 'IBM Plex Mono', monospace; text-transform:uppercase;}
.gm .nw-key.wide{min-width:58px; font-size:12px;}
.gm .nw-key.hit{background:#f6b23c; color:#1a1208;}
.gm .nw-key.near{background:#2bb3a3; color:#06201d;}
.gm .nw-key.miss{background:#1c1712; color:#6f6358;}
@media (max-width:420px){ .nw-row{grid-template-columns:repeat(5, 48px);} .nw-tile{height:48px; font-size:22px;} .gm .nw-key{min-width:28px; height:46px; font-size:13px;} .gm .nw-key.wide{min-width:46px;} }
@media (prefers-reduced-motion: reduce){ .nw-tile.flip, .nw-tile.typed, .nw-row.shake{animation:none;} }