:root{--slate-950: #0f1415;--slate-900: #151c1e;--slate-800: #1d2729;--slate-700: #2a3739;--slate-500: #5b6d70;--paper: #e9e4d6;--paper-dim: #a9a695;--blue: #3b82f6;--blue-deep: #1d4fd8;--gold: #ffd35a;--danger: #e0644a;--radius: 10px;--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--font-title: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--slate-950);color:var(--paper);font-family:var(--font-ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2{margin:0;font-weight:600}p{margin:0}.muted{color:var(--paper-dim)}.small{font-size:.875rem}.mono{font-family:var(--font-mono)}:focus-visible{outline:3px solid var(--blue);outline-offset:2px}.btn{appearance:none;border:1px solid var(--slate-500);background:var(--slate-800);color:var(--paper);font:inherit;font-weight:600;padding:.65rem 1.1rem;border-radius:var(--radius);cursor:pointer;min-height:44px;transition:background .12s,border-color .12s}.btn:hover:not(:disabled){background:var(--slate-700)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--blue-deep);border-color:var(--blue);color:#fff}.btn.primary:hover:not(:disabled){background:#2b61e8}.btn.ghost{background:transparent;border-color:transparent;color:var(--paper-dim)}.btn.ghost:hover:not(:disabled){color:var(--paper);background:var(--slate-800)}.btn.danger{background:#7d2a1a;border-color:var(--danger);color:#fff}.btn.small-btn{min-height:34px;padding:.3rem .8rem;font-size:.875rem}.input{font:inherit;color:var(--paper);background:var(--slate-950);border:1px solid var(--slate-500);border-radius:var(--radius);padding:.6rem .8rem;min-height:44px;min-width:0;flex:1}.row{display:flex;gap:.6rem;align-items:center}.row.wrap{flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}.stack>.row{width:100%}.lobby{max-width:520px;margin:0 auto;padding:2.5rem 16px 4rem;display:flex;flex-direction:column;gap:1rem}.lobby-head{margin-bottom:.75rem}.lobby-head h1{font-family:var(--font-title);font-size:clamp(2.2rem,8vw,3.2rem);letter-spacing:-.01em;line-height:1.05}.lobby-head p{color:var(--paper-dim);margin-top:.6rem;max-width:40ch}.panel{background:var(--slate-900);border:1px solid var(--slate-700);border-radius:14px;padding:1.1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}.panel>*{max-width:100%}.panel h2{font-size:1.05rem}.panel .row{width:100%}.status-line{display:flex;align-items:center;gap:.6rem;flex:1}.pulse{width:10px;height:10px;border-radius:50%;background:var(--blue);animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}.invite-code{font-family:var(--font-mono);font-size:2rem;letter-spacing:.25em;padding:.3rem .9rem .3rem 1.15rem;background:var(--slate-950);border:1px dashed var(--blue);border-radius:var(--radius);-webkit-user-select:all;user-select:all}.rules{align-items:stretch}.rules summary{cursor:pointer;font-weight:600}.rules ul{margin:.8rem 0 0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.5rem;color:var(--paper-dim)}.game{max-width:760px;margin:0 auto;padding:12px 12px 2rem;display:flex;flex-direction:column;gap:10px}.players{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.chip{display:flex;align-items:center;gap:.55rem;padding:.4rem .8rem;background:var(--slate-900);border:1px solid var(--slate-700);border-radius:999px;min-height:40px;transition:border-color .15s,box-shadow .15s}.chip.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}.chip-name{font-weight:600;max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.swatch{width:16px;height:16px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}.swatch.white{background:#f4efe2}.swatch.black{background:linear-gradient(135deg,#8a8f96,#2a2a31 60%,#0b0b0e)}.away{font-size:.75rem;color:var(--danger)}.hand{display:inline-flex;gap:3px;align-items:center;margin-left:.2rem}.mini-disc{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8cbcff,#3b82f6 50%,#1740a8)}.hand-count{font-size:.8rem;font-weight:700;color:#8cbcff}.board-wrap{position:relative}.board{display:block;width:100%;height:auto;max-height:72vh;margin:0 auto;touch-action:manipulation}.board .hit{cursor:pointer}.board .hit:hover{fill:#ffffff24}.win-cell{animation:glow 1.6s ease-in-out infinite}@keyframes glow{0%,to{opacity:.7}50%{opacity:1}}.result{background:var(--slate-900);border:2px solid var(--slate-500);border-radius:14px;padding:1rem 1.2rem 1.1rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;width:100%}.result.won{border-color:var(--gold)}.result.lost{border-color:var(--danger)}.result h2{font-family:var(--font-title);font-size:2rem}.controls{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;min-height:7.5rem}.instruction{font-weight:600}.hint{color:#ffb4a0}.notice{background:#3a2a14;border:1px solid #8a6a2a;color:#ffdca0;padding:.4rem .8rem;border-radius:var(--radius)}.resign{display:flex;gap:.5rem;align-items:center;margin-top:auto}.banner{position:sticky;top:0;z-index:10;background:#3a2a14;color:#ffdca0;text-align:center;padding:.4rem 1rem;font-size:.9rem}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%);background:#3a1a14;border:1px solid var(--danger);color:#ffd9cf;padding:.7rem 1.1rem;border-radius:var(--radius);max-width:calc(100vw - 32px);cursor:pointer;z-index:20}@media(min-width:900px){.game{max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-areas:"board players" "board controls";grid-template-rows:auto 1fr;column-gap:28px;align-items:start;padding-top:24px}.players{grid-area:players;flex-direction:column;justify-content:flex-start}.board-wrap{grid-area:board}.controls{grid-area:controls;min-height:0}.board{max-height:88vh}}@media(prefers-reduced-motion:reduce){.pulse,.win-cell{animation:none}.btn,.chip{transition:none}}