:root{--bg: #0b1322;--panel: #121c30;--panel-2: #18243c;--line: #24324f;--text: #e9eef7;--muted: #9aabc6;--accent: #ffd166;--accent-ink: #241a00;--hot: #ff6b6b;--sea: #1c4f7c;--sea-edge: #123657;--ink: #17120c;--font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font)}body{display:flex;flex-direction:column;min-height:100vh}button{font:600 14px var(--font);color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}.swatch{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid #0006;flex:none}#seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px 8px 4px}.seat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dot name vp" "facts facts badges";align-items:center;column-gap:6px;row-gap:2px;min-width:0;padding:5px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:13px}.seat.turn{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.seat.you .name{text-decoration:underline;text-underline-offset:3px}.seat .dot,.scores .dot{grid-area:dot;display:inline-block;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink)}.seat .name{grid-area:name;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seat .tag{margin-left:4px;font-weight:400;font-size:11px;color:var(--muted)}.seat .vp{grid-area:vp;font:700 15px var(--mono);color:var(--accent)}.seat .facts{grid-area:facts;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seat .badges{grid-area:badges;display:flex;gap:3px}.badge{font-size:10px;font-weight:700;padding:1px 5px;border-radius:6px;background:var(--accent);color:var(--accent-ink)}#table{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:8px;padding:4px 8px 8px;min-height:0;align-content:start}#stage{display:flex;align-items:center;justify-content:center;min-height:0}#board{display:block;width:100%;height:auto;max-height:calc(100vh - 86px);touch-action:manipulation;user-select:none}#side{display:flex;flex-direction:column;gap:8px;min-width:0}#turn{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}#status{flex:1 1 100%;margin:0;font-size:16px;font-weight:600}#status[data-ask=wait],#status[data-ask=none]{color:var(--muted);font-weight:500}#clock{font:700 15px var(--mono);color:var(--muted)}#clock.low{color:var(--hot)}#dice{display:inline-flex;align-items:center;gap:4px}.die{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;background:#f4ead2;color:var(--ink);font:700 15px var(--mono)}.sum{font:700 15px var(--mono);color:var(--muted)}#hand{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.chip{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"swatch count" "label label";align-items:center;gap:2px 6px;padding:5px 6px;border-radius:8px;background:var(--panel-2);min-width:0}.chip .swatch{grid-area:swatch;width:14px;height:14px}.chip .count{grid-area:count;font:700 17px var(--mono);text-align:right}.chip .label{grid-area:label;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}.devs{margin:6px 0 0;font-size:12px;color:var(--muted)}#actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}#actions[hidden]{display:none}#log{margin:0;list-style:none;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:13px;color:var(--muted);max-height:240px;overflow-y:auto}#log li:last-child{color:var(--text)}#note{margin:0;min-height:1.2em;font-size:13px;color:var(--hot)}#dialog{position:fixed;right:16px;bottom:16px;width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow-y:auto;z-index:5}#dialog[hidden]{display:none}.card{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--accent);border-radius:14px;background:var(--panel);box-shadow:0 10px 30px #000a}.card .head{display:flex;align-items:center;justify-content:space-between;gap:8px}.card h2{margin:0;font-size:17px}.card .head button{min-height:32px;padding:4px 10px;font-size:13px}.card h3{margin:4px 0 0;font-size:14px;color:var(--accent)}.card .hint,.card .terms{margin:0;font-size:13px;color:var(--muted)}.card .terms{color:var(--text)}.row{display:flex;flex-wrap:wrap;gap:6px}.row button{flex:1 1 auto}.steppers{display:grid;gap:4px}.stepper{display:grid;grid-template-columns:auto 1fr 40px 28px 40px;align-items:center;gap:6px}.stepper .count{text-align:center;font:700 16px var(--mono)}.stepper button{padding:0;min-height:34px}.answers{display:grid;gap:6px}.answer{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.answer .who{font-weight:600}.answer .said{color:var(--muted)}.scores{border-collapse:collapse;font-size:15px}.scores td{padding:4px 6px}.scores .num{font-family:var(--mono);font-weight:700}#overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0b1322e0;z-index:10}#overlay[hidden]{display:none}#overlay form{display:flex;flex-direction:column;gap:10px;width:min(340px,calc(100vw - 32px));padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}#overlay h1{margin:0 0 4px;font-size:26px}#overlay input{padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:16px var(--font)}#overlay button{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-size:16px}#board .frame{fill:var(--sea);stroke:var(--sea-edge);stroke-width:1.2;stroke-linejoin:round}#board .tile{stroke:#2a2015;stroke-width:.35;stroke-linejoin:round}#board .glyph{opacity:.85}#board .token .disc{fill:#f4ead2;stroke:#3b2f1c;stroke-width:.3}#board .token .num{font:700 3.5px var(--font);fill:var(--ink)}#board .token .pip{fill:var(--ink)}#board .token.red .num,#board .token.red .pip{fill:#c0392b}#board .harbour .pier{stroke:#d8b27a;stroke-width:.55;stroke-linecap:round}#board .harbour .flag{stroke:var(--ink);stroke-width:.3}#board .harbour .rate{font:700 2.4px var(--font);fill:var(--ink)}#board .harbour .rate.small{font-size:2.1px}#board .harbour .glyph{opacity:.95}#board .road .edge{stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}#board .road .body{stroke-width:1.7;stroke-linecap:round}#board .building .body{stroke:var(--ink);stroke-width:.5;stroke-linejoin:round}#board .building .ring{fill:#ffffff2e;stroke:#fff;stroke-width:.5}#board .road .ring{stroke:#fff;stroke-opacity:.85;stroke-width:3.7;stroke-linecap:round}#board .robber .shade{fill:#050a14;fill-opacity:.38}#board .robber .figure{fill:#1c1c24;stroke:#f4ead2;stroke-width:.35}#board .spot{cursor:pointer}#board .vertex-spot .hit{fill:transparent}#board .vertex-spot .mark{fill:#fff;stroke:var(--ink);stroke-width:.5;animation:glow 1.1s ease-in-out infinite alternate}#board .path-spot .hit{fill:transparent}#board .path-spot .halo{stroke:#fff;stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 .6px #000a);animation:glow 1.1s ease-in-out infinite alternate}#board .path-spot .mark{stroke:var(--ink);stroke-width:.9;stroke-linecap:round;stroke-dasharray:1.2 1}#board .hex-spot polygon{fill:#ffffff14;stroke:#fff;stroke-width:.7;stroke-dasharray:1.6 1.1}#board .hex-spot:hover polygon{fill:#fff3}@keyframes glow{0%{opacity:.7}to{opacity:1}}@media(max-width:900px){#seats{grid-template-columns:repeat(2,minmax(0,1fr));padding:6px 6px 2px;gap:4px}.seat{padding:4px 7px;font-size:12px}#table{grid-template-columns:minmax(0,1fr);padding:2px 6px 8px;gap:6px}#board{max-height:none}#status{font-size:15px}#actions{grid-template-columns:repeat(4,minmax(0,1fr))}#actions button{padding:6px 4px;font-size:13px}#log{max-height:96px}#dialog{left:8px;right:8px;bottom:8px;width:auto;max-height:70vh}}