:root{color-scheme:dark;--bg:#07080b;--panel:rgba(19,18,22,.94);--gold:#c9a35d;--ivory:#f3ead7;--obsidian:#090d13;--text:#f7f1e8;--muted:#c6baaa;--danger:#ff8d8d;--success:#87d7a3;--focus:#71ddd3}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at 50% -10%,rgba(201,163,93,.2),transparent 34rem),linear-gradient(135deg,#040405,#121116 48%,#06080b);color:var(--text)}
button,select,input,.button{min-height:44px;border:1px solid rgba(201,163,93,.55);border-radius:14px;background:linear-gradient(180deg,#2b2419,#14100b);color:var(--text);padding:.7rem 1rem;font:inherit}
button,.button{cursor:pointer;text-decoration:none;text-align:center}
button:hover,.button:hover{filter:brightness(1.12)}
button:focus-visible,select:focus-visible,input:focus-visible,.button:focus-visible,.point:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
button:disabled{opacity:.5;cursor:not-allowed}
.primary{background:linear-gradient(180deg,#8a6a32,#463216);font-weight:800}
.ghost{background:transparent}
.shell{min-height:100vh;display:grid;place-items:center;padding:clamp(.75rem,2.5vw,2rem)}
.hero,.panel,dialog{border:1px solid rgba(201,163,93,.3);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(0,0,0,.34)),var(--panel);box-shadow:0 24px 80px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.08);border-radius:26px}
.hero{width:min(760px,100%);padding:clamp(1.25rem,5vw,3rem);text-align:center}
h1{margin:.1rem 0 1rem;font-family:Georgia,serif;font-size:clamp(2.6rem,9vw,5.2rem);letter-spacing:.04em}
h2{margin:.2rem 0 .8rem}
.eyebrow{color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:.78rem}
.controls{display:grid;gap:.8rem;margin:1.3rem auto;max-width:460px;padding:1rem}
label{display:grid;gap:.35rem;text-align:left;color:var(--muted)}
select,input{width:100%;background:#101115}
.note,footer,.muted{color:var(--muted);font-size:.9rem}
.account{display:flex;gap:.6rem;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:.7rem}
.game-layout{width:min(1320px,100%);display:grid;grid-template-columns:minmax(230px,300px) minmax(300px,1fr) minmax(220px,300px);gap:1rem;align-items:stretch}
.panel{padding:1rem}
.status{color:var(--gold);font-weight:800;font-size:1.05rem}
.message{border-left:3px solid var(--gold);padding:.7rem .8rem;background:rgba(255,255,255,.04);border-radius:8px}
.message.error{border-color:var(--danger);color:#ffd0d0}
.message.success{border-color:var(--success);color:#c9f3d6}
.score{display:grid;gap:.45rem;color:var(--muted);margin:1rem 0}
.actions{display:grid;gap:.55rem}
.board-panel{display:grid;place-items:center}
.board-wrap{width:min(76vmin,680px);aspect-ratio:1;position:relative;border-radius:30px;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.08),transparent 28%),linear-gradient(145deg,#17171c,#030304);border:2px solid rgba(201,163,93,.36);touch-action:manipulation}
.board-wrap svg{position:absolute;inset:5%;width:90%;height:90%;overflow:visible}
.board-wrap line{stroke:rgba(201,163,93,.78);stroke-width:1.25;vector-effect:non-scaling-stroke}
.board-wrap .mill{fill:none;stroke:#ffe6a1;stroke-width:3.4;stroke-linecap:round;opacity:.9}
.point{position:absolute;transform:translate(-50%,-50%);width:clamp(36px,6vmin,58px);height:clamp(36px,6vmin,58px);border-radius:50%;padding:0;background:#21190f;border:2px solid rgba(201,163,93,.7);box-shadow:0 8px 22px rgba(0,0,0,.5)}
.point.p1{background:radial-gradient(circle at 34% 28%,#fffdf4,var(--ivory) 45%,#ad9e86);border-color:#fff4d1}
.point.p2{background:radial-gradient(circle at 34% 28%,#3f4855,var(--obsidian) 52%,#010203);border-color:#8e98aa;border-radius:30% 50% 30% 50%}
.point.legal{outline:4px solid rgba(120,222,154,.85)}
.point.capture{outline:4px solid rgba(255,117,117,.95)}
.point.in-mill{box-shadow:0 0 0 3px rgba(201,163,93,.55),0 8px 22px rgba(0,0,0,.5)}
.point.selected{box-shadow:0 0 0 6px rgba(255,230,161,.48),0 8px 22px rgba(0,0,0,.5)}
.point.last{filter:drop-shadow(0 0 10px rgba(201,163,93,.9))}
.log ol{padding-left:1.25rem;color:var(--muted);max-height:48vh;overflow:auto}
.rules,.lobby{width:min(820px,100%);line-height:1.65}
.room-list{display:grid;gap:.65rem;margin:1rem 0}
.room{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid rgba(201,163,93,.22);padding:.8rem;border-radius:14px}
.room p{margin:.2rem 0}
dialog{color:var(--text);width:min(420px,calc(100% - 2rem));padding:1.25rem}
dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(5px)}
dialog form{display:grid;gap:.8rem}
@media(max-width:940px){.game-layout{grid-template-columns:1fr}.board-panel{order:-1}.board-wrap{width:min(92vw,680px)}.log ol{max-height:14rem}}
@media(max-width:520px){.shell{padding:.5rem}.panel{border-radius:18px}.point{width:38px;height:38px}.room{align-items:stretch;flex-direction:column}.game-layout{gap:.6rem}}
@media(prefers-reduced-motion:no-preference){.point{transition:transform .16s ease,filter .16s ease}.point:hover{transform:translate(-50%,-50%) scale(1.06)}}