:root{--accent:#ff62b3;--bg:#090610;--ink:#fff8ed;--muted:#a69cae;--line:#ffffff1c}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 75% 20%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 38%),var(--bg);color:var(--ink);font-family:Manrope,system-ui,sans-serif}.shared-shell{width:min(1080px,calc(100% - 28px));min-height:100vh;margin:auto;padding:48px 0;display:grid;grid-template-columns:260px minmax(320px,650px);gap:54px;align-items:center}.shared-info .back{color:var(--muted);text-decoration:none;font:13px DM Mono;letter-spacing:.1em}.shared-info .tag{margin-top:34px;color:var(--accent);font:12px DM Mono;letter-spacing:.12em}.shared-info h1{margin:16px 0;font-size:clamp(43px,6vw,68px);line-height:.88;letter-spacing:-.06em}.shared-info h1 .title-outline{color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--accent) 58%,transparent)}.shared-info h1 .title-stop{display:inline;color:#ffd36a;-webkit-text-fill-color:#ffd36a;-webkit-text-stroke:0;text-shadow:none}.shared-info p{color:var(--muted);font:12px/1.7 DM Mono}.room-meta{display:grid;gap:8px;margin-top:25px;font:11px DM Mono;color:var(--muted)}.stage{border:1px solid var(--line);border-radius:28px;padding:16px;background:#ffffff08;box-shadow:0 35px 100px #0008}.hud{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 10px;font:11px DM Mono;letter-spacing:.08em}.hud-actions{display:flex;gap:7px}.button{border:0;border-radius:99px;background:var(--ink);color:#120b14;padding:10px 13px;font:600 10px DM Mono;letter-spacing:.08em;cursor:pointer}.button.secondary{background:transparent;border:1px solid var(--line);color:var(--ink)}.button:disabled{opacity:.38;cursor:not-allowed}.playfield{min-height:480px;border-radius:18px;background:#07050a;display:grid;place-items:center;padding:18px;overflow:auto}.board{width:min(100%,520px);display:grid;gap:6px}.board button{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:#ffffff08;color:var(--ink);cursor:pointer}.board button:disabled{cursor:default}.board.connect-four{grid-template-columns:repeat(7,1fr)}.board.gomoku{grid-template-columns:repeat(15,1fr);gap:2px}.board.gomoku button{border-radius:50%}.board.reversi,.board.checkers{grid-template-columns:repeat(8,1fr)}.board.checkers button.dark{background:#ffffff12}.piece{position:absolute;inset:17%;border-radius:50%;background:var(--piece);box-shadow:0 0 16px var(--piece)}.piece.x{--piece:#ff62b3}.piece.o{--piece:#60ddff}.piece.king:after{content:'✦';position:absolute;inset:0;display:grid;place-items:center;color:#120b14}.dots-board{width:min(100%,480px);aspect-ratio:1;display:grid;grid-template-columns:18px 1fr 18px 1fr 18px 1fr 18px;grid-template-rows:18px 1fr 18px 1fr 18px 1fr 18px;align-items:center;justify-items:center}.dots-board .dot{width:12px;height:12px;border-radius:50%;background:var(--ink);box-shadow:0 0 10px #fff}.dots-board .edge{border:0;border-radius:99px;background:#ffffff14;cursor:pointer}.dots-board .horizontal{width:100%;height:10px}.dots-board .vertical{width:10px;height:100%}.dots-board .box{width:85%;height:85%;border-radius:8px}.claimed{border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 35%,transparent)!important}.piles,.spark-game,.word-game{width:min(100%,480px);display:grid;gap:16px}.pile{padding:16px;border:1px solid var(--line);border-radius:15px}.stones{color:var(--accent);font-size:24px;letter-spacing:.2em}.pile-actions,.spark-actions{display:flex;gap:8px;margin-top:12px}.word-history{max-height:250px;overflow:auto;display:flex;flex-wrap:wrap;gap:8px}.word-history span{padding:8px 10px;border-radius:99px;background:#ffffff0c;font:11px DM Mono}.word-form{display:flex;gap:8px}.word-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:99px;background:#ffffff0b;color:var(--ink);padding:13px 16px;font:13px DM Mono}.players{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.player{padding:6px 8px;border:1px solid var(--line);border-radius:99px;font:9px DM Mono;color:var(--muted)}.player.turn{border-color:var(--accent);color:var(--accent)}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;background:#fff;color:#111;border-radius:99px;padding:11px 16px;font:10px DM Mono;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:760px){.shared-shell{grid-template-columns:1fr;gap:24px;padding:55px 0 28px}.shared-info{text-align:center}.shared-info .tag{margin-top:18px}.shared-info h1{font-size:44px}.shared-info p{display:none}.room-meta{margin-top:16px}.stage{padding:11px}.playfield{min-height:390px;padding:10px}.hud{font-size:10px}.button{font-size:9px;padding:9px 10px}}


/* The board, not an arbitrary dark frame, determines mobile stage height. */
.playfield{min-height:min(480px,calc(100dvh - 150px));overscroll-behavior:contain}
.board button,.dots-board .edge,.pile-actions button,.spark-actions button{touch-action:manipulation}
@media(max-width:760px){
 .shared-shell{width:min(620px,calc(100% - 20px));min-height:100dvh;padding:max(18px,env(safe-area-inset-top)) 0 max(18px,env(safe-area-inset-bottom));gap:14px}
 .shared-info .tag{margin-top:10px}
 .shared-info h1{font-size:clamp(34px,11vw,44px);margin:10px 0}
 .room-meta{margin-top:10px}
 .stage{padding:9px}
 .playfield{min-height:0;padding:8px;overflow:hidden}
 .hud{min-height:40px;padding-bottom:7px;flex-wrap:wrap}
 .hud-actions{margin-left:auto}
 .dots-board{width:min(100%,480px)}
 .piles,.spark-game,.word-game{gap:11px}
 .pile{padding:12px}
}
@media(max-width:380px){
 .shared-shell{width:calc(100% - 14px)}
 .shared-info h1{font-size:32px}
 .stage{padding:7px;border-radius:20px}
 .playfield{padding:6px;border-radius:14px}
 .hud{font-size:9px;letter-spacing:.04em}
 .button{padding:8px 9px}
}