.game .screen-body{display:flex;flex-direction:column;gap:20px}.vs-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.vs{font-family:var(--font-display);font-size:14px;color:var(--muted)}.player-chip{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);border-radius:12px;box-shadow:var(--shadow-xs);padding:8px 14px}.player-chip.active{box-shadow:var(--shadow-sm)}.player-chip.empty{opacity:.7;box-shadow:none}.pc-name{font-weight:700;font-size:14px}.pc-status{font-family:var(--font-mono);font-size:10px;color:var(--muted-2)}.pc-status.active{color:var(--blue)}.vs-leave{font-size:12px;padding:8px 16px;border-radius:10px}.btn-mute{all:unset;margin-left:auto;display:flex;align-items:center;justify-content:center;width:38px;height:38px;font-size:16px;line-height:1;background:#fff;border:3px solid var(--ink);border-radius:10px;box-shadow:var(--shadow-xs);cursor:pointer}.btn-mute:hover{box-shadow:var(--shadow-sm)}.btn-mute[aria-pressed=true]{background:var(--warm);opacity:.8}.game-cols{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:start}@media (max-width: 720px){.game-cols{grid-template-columns:1fr}}.board-frame{position:relative;background:var(--warm);border:var(--border-w) solid var(--ink);border-radius:14px;box-shadow:var(--shadow-sm);padding:16px}.board-frame-label{position:absolute;top:12px;right:16px;font-family:var(--font-mono);font-size:10px;color:#a08a4a;text-transform:uppercase;letter-spacing:1px;pointer-events:none}.game-side{display:flex;flex-direction:column;gap:14px}.turn-card{border:var(--border-w) solid var(--ink);border-radius:14px;box-shadow:var(--shadow-sm);padding:16px;text-align:center}.turn-eyebrow{font-family:var(--font-mono);font-size:11px;opacity:.85}.turn-title{font-family:var(--font-display);font-size:20px;margin-top:4px;line-height:1.1}.turn-card.tone-blue{background:var(--blue);color:#fff}.turn-card.tone-yellow{background:var(--yellow);color:var(--ink)}.turn-card.tone-purple{background:var(--purple);color:#fff}.turn-card.tone-ink{background:var(--ink);color:#fff}.turn-card.tone-neutral{background:#fff;color:var(--ink)}.turn-clock{font-family:var(--font-mono);font-size:26px;font-weight:700;margin-top:10px;letter-spacing:.04em;font-variant-numeric:tabular-nums}.turn-clock.urgent{color:var(--red, #e5484d);animation:turn-clock-pulse 1s steps(2,jump-none) infinite}@keyframes turn-clock-pulse{50%{opacity:.35}}.side-card{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:14px}.btn-resign{all:unset;display:block;width:100%;box-sizing:border-box;text-align:center;font-family:var(--font-display);font-size:14px;padding:12px 14px;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:12px;box-shadow:var(--shadow-xs);cursor:pointer}.btn-resign:hover{box-shadow:var(--shadow-sm)}.btn-resign.armed{background:var(--red);color:#fff}.resign-confirm{display:flex;flex-direction:column;gap:10px;padding:14px;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow-xs);text-align:center}.resign-ask{font-weight:700;font-size:14px}.resign-actions{display:flex;gap:8px}.resign-actions>*{flex:1}.side-placeholder{border:3px dashed #b7b0a4;border-radius:14px;padding:18px;text-align:center;color:#a49d90;font-family:var(--font-mono);font-size:12px;line-height:1.6}.board{display:grid;gap:2px;aspect-ratio:1 / 1;width:100%;max-width:min(100%,calc(100vh - 300px));margin-inline:auto;background:var(--ink);border:2px solid var(--ink);border-radius:6px;overflow:hidden}.cell{all:unset;position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1 / 1;background:var(--card);cursor:default}.board.interactive .cell:not(:disabled){cursor:pointer}.board.interactive .cell:not(:disabled):hover:after{content:"";position:absolute;width:66%;height:66%;border-radius:50%;background:#1a152338}.board.you-white.interactive .cell:not(:disabled):hover:after{background:#ff4d3d73}.board.you-black.interactive .cell:not(:disabled):hover:after{background:#1a15234d}.stone{width:72%;height:72%;border-radius:50%;display:block;box-sizing:border-box}.stone.black{background:var(--ink);border:2px solid var(--ink)}.stone.white{background:var(--red);border:2px solid var(--ink)}.cell.win{background:var(--warm)}.cell.win .stone{box-shadow:0 0 0 3px var(--yellow)}.player-chip .stone{width:20px;height:20px;flex:none}.game-over{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#1a15238c;border-radius:10px;animation:game-over-fade .25s ease-out}@keyframes game-over-fade{0%{opacity:0}to{opacity:1}}.game-over-card{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:28px 36px;background:var(--card);border:var(--border-w) solid var(--ink);border-radius:18px;box-shadow:var(--shadow);animation:game-over-pop .25s ease-out}@keyframes game-over-pop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.game-over-title{font-family:var(--font-display);font-size:1.5rem;color:var(--ink)}.game-over-stones{display:flex;gap:10px}.game-over-stone,.game-over-stones .stone{width:48px;height:48px;flex:none}.game-over-card .btn{margin-top:4px}.lb-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}.lb-tabs{margin-left:auto;display:flex;gap:8px;font-family:var(--font-mono);font-size:12px}.lb-tab{border:2px solid var(--ink);border-radius:20px;padding:6px 14px}.lb-tab.active{background:var(--ink);color:var(--yellow)}.lb-tab.locked{background:#fff;color:#a49d90;border-color:#d8d0c2}.podium{display:flex;align-items:flex-end;justify-content:center;gap:16px;margin-bottom:22px}.podium-col{display:flex;flex-direction:column;align-items:center;text-align:center}.crown{font-size:22px;line-height:1;margin-bottom:2px}.podium-name{font-weight:700;color:var(--ink);margin-top:6px}.podium-elo{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:2px}.podium-block{border:3px solid var(--ink);border-radius:10px 10px 0 0;width:120px;margin-top:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);color:var(--ink)}.podium-col.p1 .podium-block{height:100px;font-size:28px}.podium-col.p2 .podium-block{height:70px;width:110px;font-size:22px}.podium-col.p3 .podium-block{height:54px;width:110px;font-size:22px;color:#fff}.lb-rows{display:flex;flex-direction:column;gap:8px}.lb-row{display:grid;grid-template-columns:44px 1fr 90px 90px;align-items:center;gap:12px;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:10px 16px}.lb-rank{font-family:var(--font-display);font-size:16px;color:var(--muted)}.lb-player{display:flex;align-items:center;gap:10px;min-width:0}.lb-name{font-weight:700;color:var(--ink)}.lb-wins{font-family:var(--font-mono);font-size:14px;color:var(--muted)}.lb-elo{font-family:var(--font-display);font-size:15px;color:var(--ink)}.podium-col,.lb-row{position:relative}.lb-remove{all:unset;cursor:pointer;position:absolute;top:6px;right:8px;z-index:1;font-family:var(--font-mono);font-size:11px;line-height:1;padding:3px 6px;border:2px solid var(--red);border-radius:8px;color:var(--red);background:#fff}.lb-remove:hover{background:var(--red);color:#fff}@media (max-width: 520px){.lb-row{grid-template-columns:32px 1fr 70px}.lb-wins{display:none}}:root{--bg: #e9e6df;--card: #fff7ec;--warm: #ffe9b8;--panel: #ffffff;--ink: #1a1523;--text: #1a1523;--muted: #7a7480;--muted-2: #8a8490;--red: #ff4d3d;--yellow: #ffc21e;--blue: #2b59ff;--green: #17c98c;--purple: #7b3fe4;--green-ink: #0a2a1c;--border-w: 4px;--radius: 16px;--shadow: 8px 8px 0 var(--ink);--shadow-sm: 4px 4px 0 var(--ink);--shadow-xs: 3px 3px 0 var(--ink);--font-body: Rubik, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;--font-display: Bungee, var(--font-body);--font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;font-family:var(--font-body)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);display:flex;justify-content:center}#root{width:100%;max-width:1240px;min-height:100vh;display:flex;justify-content:center;padding:32px 24px 64px}h1,h2,h3{margin:0}.muted{color:var(--muted)}.mono{font-family:var(--font-mono)}.screen{width:100%;background:var(--card);border:var(--border-w) solid var(--ink);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}.screen-body{padding:28px 32px 36px;flex:1;min-height:0}.screen.narrow{max-width:520px}.screen.wide{max-width:1180px}.wordmark{display:flex;gap:2px;font-family:var(--font-display);line-height:.9;letter-spacing:1px}.wordmark-lg{font-size:clamp(48px,12vw,74px)}.wordmark span:nth-child(1){color:var(--red)}.wordmark span:nth-child(2){color:var(--yellow)}.wordmark span:nth-child(3){color:var(--blue)}.wordmark span:nth-child(4){color:var(--green)}.wordmark span:nth-child(5){color:var(--purple)}.wordmark-sub{font-family:var(--font-display);color:var(--ink);letter-spacing:4px}.wordmark-inline{display:flex;align-items:baseline;gap:4px;font-family:var(--font-display);font-size:22px}.wordmark-inline .a{color:var(--red)}.wordmark-inline .b{color:var(--ink)}.display{font-family:var(--font-display);color:var(--ink)}.display-xl{font-family:var(--font-display);font-size:clamp(26px,5vw,34px);color:var(--ink)}.display-lg{font-family:var(--font-display);font-size:26px;color:var(--ink)}.eyebrow{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted-2)}button{font-family:var(--font-body);cursor:pointer}.btn{font-family:var(--font-display);font-size:16px;color:#fff;background:var(--red);border:var(--border-w) solid var(--ink);border-radius:14px;box-shadow:var(--shadow-sm);padding:14px 24px;letter-spacing:1px;transition:transform .06s ease,box-shadow .06s ease}.btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}.btn:active:not(:disabled){transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-lg{font-size:26px;border-radius:16px;box-shadow:var(--shadow);padding:18px 56px;letter-spacing:2px}.btn-yellow{background:var(--yellow);color:var(--ink)}.btn-green{background:var(--green);color:var(--green-ink)}.btn-blue{background:var(--blue)}.btn-ink{background:var(--ink)}.btn-block{width:100%}.btn-chip{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--font-display);font-size:12px;background:var(--green);color:var(--green-ink);border:2px solid var(--ink);border-radius:8px;padding:6px 14px;letter-spacing:.5px}.btn-chip:hover{filter:brightness(1.04)}.btn-chip.yellow{background:var(--yellow);color:var(--ink)}.linklike{background:none;border:none;padding:0;color:var(--muted);font-family:var(--font-mono);font-size:12px;cursor:pointer}.linklike:hover{color:var(--ink)}input{font-family:var(--font-body);font-size:20px;font-weight:700;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:12px;padding:12px 14px;outline:none;width:100%}input::placeholder{color:#b7b0a4;font-weight:500}input:focus{box-shadow:var(--shadow-xs)}.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;font-weight:700;border:2px solid var(--ink);border-radius:20px;padding:4px 12px}.pill-live{background:var(--green);color:var(--green-ink)}.pill-warm{background:var(--warm);color:var(--ink);font-weight:400}.pill-full{background:#eee;color:var(--muted);font-weight:400}.tag{font-family:var(--font-mono);font-size:10px;font-weight:700;border:2px solid var(--ink);border-radius:20px;padding:3px 8px}.tag-soon{background:#fff;color:var(--ink)}.avatar{flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);color:#fff;border:2px solid var(--ink);border-radius:9px;position:relative;-webkit-user-select:none;user-select:none}.avatar.ink-text{color:var(--ink)}.avatar .dot{position:absolute;bottom:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid #fff}.you-chip{display:inline-flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--ink);border-radius:12px;box-shadow:var(--shadow-xs);padding:6px 8px 6px 14px}.you-chip .name{font-weight:700;font-size:15px}.welcome{text-align:center;padding:60px 40px 64px;background:radial-gradient(circle at 50% 0%,var(--warm) 0%,var(--card) 62%);display:flex;flex-direction:column;align-items:center;flex:1;justify-content:center}.welcome .tagline{margin-top:18px;font-size:17px;color:var(--muted);max-width:440px}.identity-card{margin-top:40px;display:flex;align-items:center;gap:22px;background:#fff;border:var(--border-w) solid var(--ink);border-radius:18px;box-shadow:var(--shadow);padding:20px 24px;text-align:left;max-width:100%}.identity-avatar{position:relative}.reroll{all:unset;cursor:pointer;position:absolute;bottom:-12px;right:-12px;width:34px;height:34px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}.reroll:hover{transform:rotate(-30deg)}.identity-fields{min-width:0;flex:1}.identity-fields .eyebrow{margin-bottom:6px}.identity-fields input{width:100%}.identity-hint{margin-top:8px;font-size:12px;color:var(--muted-2)}.welcome .btn-lg{margin-top:34px}.online-note{margin-top:22px;font-family:var(--font-mono);font-size:12px;color:var(--muted-2)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.catalog-intro{margin-bottom:22px}.catalog-intro .sub{font-size:15px;color:var(--muted);margin-top:4px}.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.game-card{all:unset;cursor:pointer;display:flex;flex-direction:column;background:#fff;border:var(--border-w) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .08s ease,box-shadow .08s ease}.game-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}.game-thumb{height:130px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:var(--border-w) solid var(--ink)}.game-thumb .emoji{font-size:44px}.thumb-art{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;background:var(--card)}.game-thumb .badge{position:absolute;top:10px;left:10px;z-index:1}.thumb-dots{display:grid;grid-template-columns:repeat(5,16px);grid-auto-rows:16px;gap:3px}.thumb-dots span{border-radius:50%}.game-cardbody{padding:14px 16px 16px}.game-name{font-family:var(--font-display);font-size:16px;color:var(--ink)}.game-meta{font-size:13px;color:var(--muted);margin-top:4px}.game-foot{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}.game-foot .rooms{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--green)}.game-foot .soon{font-family:var(--font-mono);font-size:12px;color:var(--muted-2)}.game-slot{border:var(--border-w) dashed #b7b0a4;border-radius:var(--radius);min-height:236px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#a49d90}.game-slot .plus{width:52px;height:52px;border-radius:14px;border:var(--border-w) dashed #b7b0a4;display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1}.game-slot .label{font-family:var(--font-mono);font-size:12px}.lobby-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}.lobby-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;align-items:start}.col-label{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted-2);margin-bottom:10px}.room-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.room-row{display:flex;align-items:center;gap:14px;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow-xs);padding:12px 16px}.room-row.full{opacity:.7}.room-row .room-info{min-width:0}.room-row .room-title{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-row .room-sub{font-family:var(--font-mono);font-size:12px;color:var(--muted)}.room-row .room-actions{margin-left:auto;display:flex;align-items:center;gap:12px;flex-shrink:0}.empty-note{background:#fff;border:3px dashed #b7b0a4;border-radius:14px;padding:22px 18px;text-align:center;color:var(--muted);font-size:14px}.presence{background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow-xs);padding:6px;display:flex;flex-direction:column}.presence-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:2px dashed #eadfca}.presence-row:last-child{border-bottom:none}.presence-name{font-weight:700;font-size:15px}.presence-name .self{font-family:var(--font-mono);font-size:11px;color:var(--muted-2);font-weight:400}.presence-status{font-family:var(--font-mono);font-size:11px;color:var(--muted)}.presence-status.hosting{color:var(--red)}.presence-status.playing{color:var(--purple)}.presence-foot{margin-top:12px;text-align:center;font-family:var(--font-mono);font-size:12px;color:var(--muted-2)}@media (max-width: 860px){.game-grid{grid-template-columns:repeat(2,1fr)}.lobby-cols{grid-template-columns:1fr}}@media (max-width: 520px){#root{padding:16px 12px 40px}.screen-body{padding:20px 18px 26px}.welcome{padding:40px 20px 44px}.game-grid{grid-template-columns:1fr}.identity-card{flex-direction:column;text-align:center}.identity-fields input{width:100%}}