:root{color-scheme:dark;--bg:#0c1326;--panel:#141e35;--ink:#edf4ff;--muted:#a6b5cf;--one:#55dcea;--two:#ffb664;--border:#2c3953}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 10%,#182b46 0,transparent 58%),var(--bg);color:var(--ink);font:15px/1.5 system-ui,Segoe UI,sans-serif}main{max-width:1260px;margin:auto;padding:25px 32px}.mast{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{color:var(--ink);font-size:12px;letter-spacing:2px;text-decoration:none}.brand span{color:var(--muted);font-size:10px}button,input,select{font:inherit}button,select,input{border:1px solid var(--border);border-radius:9px;background:#0e182c;color:var(--ink);padding:10px 12px;min-height:44px}button{cursor:pointer;transition:background .15s,transform .15s}button:hover{background:#273650}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #b1eaff;outline-offset:3px}label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);margin:12px 0}input,select{width:100%;min-width:0}.title{display:flex;justify-content:space-between;align-items:center;margin:37px 0 28px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.5px;color:var(--one)}h1{font-family:Georgia,serif;font-size:44px;letter-spacing:-1.5px;font-weight:400;line-height:1.05;margin:10px 0}h1 span{display:block;color:#d7e5fa}h2{font:24px Georgia,serif;margin:0 0 16px}.intro{color:var(--muted);font-size:14px}.layout{display:grid;grid-template-columns:310px 1fr;gap:26px;align-items:start}.panel{background:linear-gradient(135deg,#18243c,#121c30);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:16px}.row{display:flex;gap:10px}.row label{flex:1}.row .colorLabel{flex:0 0 52px}input[type=color]{padding:5px;height:44px}.primary{background:var(--one);color:#08212c;font-weight:700;border-color:var(--one);width:100%;display:flex;justify-content:space-between}.primary:hover{background:#93eaf3}#start{margin:16px 0 8px}#resume{width:100%}summary{cursor:pointer;font-weight:600}details p{color:var(--muted)}.small{font-size:12px}.table{padding:22px 30px;background:linear-gradient(145deg,#17233a,#111a2f);border:1px solid var(--border);border-radius:20px;box-shadow:0 25px 70px #0004}.scores{display:flex;gap:14px;align-items:center}.score{position:relative;padding:12px 16px;border:1px solid var(--border);border-radius:12px;flex:1;display:grid;grid-template-columns:1fr auto;transition:box-shadow .2s;min-width:0}.score.active{border-color:var(--color);box-shadow:0 0 24px color-mix(in srgb,var(--color) 10%,transparent)}.score .player{color:var(--color);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score strong{font-size:30px;font-weight:500;grid-row:span 2;line-height:1.3}.score small{font-size:9px;letter-spacing:1.5px;color:var(--muted)}.versus{font:italic 16px Georgia;color:var(--muted)}.turnbar{display:flex;justify-content:space-between;gap:10px;margin:18px 0 10px;font-size:13px}#remaining{color:var(--muted);white-space:nowrap}#viewport{overflow:auto;border-radius:12px;background:radial-gradient(ellipse,#172940,#101a2d);max-height:650px;max-width:600px;margin-inline:auto;scrollbar-width:thin}#board{display:block;width:100%;min-height:150px;touch-action:pan-x pan-y;outline-offset:-3px}#board:focus-visible{outline:2px solid #b1eaff}.guide{stroke:#354763;stroke-width:2;stroke-dasharray:1 7;stroke-linecap:round}.drawn{stroke-width:6;stroke-linecap:round;}.newLine{animation:lineIn .24s ease-out}.lastLine{stroke-width:9;filter:drop-shadow(0 0 4px #fff7)}.dot{fill:#dce9fb;stroke:#172940;stroke-width:2;pointer-events:none}.owned{opacity:.2}.newBox{animation:boxIn .3s ease-out}.initial{fill:#eaf3ff;font:600 19px system-ui;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.preview{stroke-width:8;stroke-linecap:round;opacity:.65;pointer-events:none}.hintEdge{stroke:#fff;stroke-width:8;stroke-dasharray:6 5}.boardfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin:8px 0}.boardfoot label{flex-direction:row;align-items:center;margin:0}.boardfoot select{font-size:12px;width:75px;min-height:36px;padding:4px}.actions{display:flex;gap:10px;justify-content:center}.actions button{flex:1;max-width:170px}#message{min-height:24px;color:#c8e5f3;text-align:center;font-size:13px}.tagline{font:italic 15px Georgia;color:#8294ae;text-align:center;margin:24px 0 5px}footer{display:flex;justify-content:space-between;color:#8c9db6;font-size:11px;margin-top:24px}#roomCode{letter-spacing:3px;color:var(--one)}#connection{font-size:12px}#stats{font-size:12px;overflow:auto}#stats table{border-collapse:collapse;width:100%}#stats td,#stats th{padding:6px;text-align:left;border-bottom:1px solid var(--border)}[hidden]{display:none!important}@keyframes lineIn{from{opacity:0;stroke-width:1}to{opacity:1}}@keyframes boxIn{from{opacity:0}to{opacity:.2}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}@media(max-width:850px){main{padding:18px}.layout{grid-template-columns:260px 1fr;gap:16px}.table{padding:15px}.title{margin:25px 0}h1{font-size:36px}.intro{display:none}.brand span{display:none}}@media(max-width:650px){main{padding:12px}.layout{display:flex;flex-direction:column;gap:14px}.layout aside{width:100%}.table{width:100%;padding:12px;order:-1}.title{margin:21px 0}h1{font-size:34px}h1 span{display:inline}.eyebrow{font-size:9px}.scores{gap:8px}.score{padding:8px 10px}.score strong{font-size:25px}.score .player{font-size:13px}.turnbar{margin:12px 0 5px;font-size:12px}.tagline{margin:14px 0 3px}.panel{padding:16px}#viewport{max-height:65vh}footer{display:block}footer span{display:block}.mast button{font-size:12px;padding:6px 10px;min-height:38px}}

.score.winner{border-color:var(--color);box-shadow:0 0 28px color-mix(in srgb,var(--color) 24%,transparent);animation:celebrate .65s ease-out}.score.winner small{color:var(--ink)}@keyframes celebrate{50%{transform:translateY(-4px);filter:brightness(1.2)}}

/* Games navigation uses normal header/menu flow, never the playfield overlay. */
a.return-games{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 10px;box-sizing:border-box;color:inherit;font:600 13px/1.25 system-ui,sans-serif;letter-spacing:normal;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;border-radius:5px}
a.return-games:hover{background:#ffffff14}a.return-games:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.mast{flex-wrap:wrap}.mast .return-games{padding:6px}