:root{--ink:#0b1220;--ink-2:#121a2c;--line:#2a3548;--glow-warm:#f4b942;--glow-cool:#5eead4;--steel:#8b9bb4;--sleeper:#3d2e24;--asphalt:#3a4254;--outage:#1a1028;--paper:#e8e4d9;--panel:#0b1220eb;--text:#e8e4d9;--muted:#8b9bb4;--accent:#5eead4;--amber:#f4b942;--shadow:0 18px 50px #00000059;--font:"Outfit", "Segoe UI", sans-serif;--display:"Syne", "Outfit", sans-serif}*,:before,:after{box-sizing:border-box}html,body{min-height:100%;font-family:var(--font);background:var(--ink);color:var(--text);margin:0}body.night,body.day{--ink:#0b1220;--ink-2:#121a2c;--line:#2a3548;--glow-warm:#f4b942;--glow-cool:#5eead4;--steel:#8b9bb4;--sleeper:#3d2e24;--asphalt:#3a4254;--outage:#1a1028;--paper:#e8e4d9;--panel:#0b1220eb;--text:#e8e4d9;--muted:#8b9bb4;--accent:#5eead4;--amber:#f4b942;background:radial-gradient(1200px 600px at 10% -10%,#1c3333 0%,#0000 50%),radial-gradient(900px 500px at 100% 0,#4a3038 0%,#0000 42%),#0b1220}body.day{--panel:#121a2cf0}button,input,select{font-family:inherit}.hidden{display:none!important}.screen{min-height:100dvh}.title-bg{pointer-events:none;background:linear-gradient(#0000,#070b14 78%),repeating-linear-gradient(90deg,#0000 0 46px,#5ee7ff0d 46px 48px);position:fixed;inset:0}body.day .title-bg{background:linear-gradient(#0000,#d5e4ee 80%),repeating-linear-gradient(90deg,#0000 0 46px,#1450640f 46px 48px)}.title-card{z-index:1;max-width:560px;margin:0 auto;padding:12vh 24px 48px;position:relative}.kicker{letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;font-size:11px}h1{font-family:var(--display);letter-spacing:-.04em;margin:0 0 16px;font-size:clamp(56px,12vw,96px);line-height:.9}.lede{color:var(--muted);margin:0 0 28px;font-size:18px;line-height:1.45}.lede strong{color:var(--text)}.player-count span,.name-fields label{color:var(--muted);margin-bottom:8px;font-size:13px;display:block}.hub-login{gap:10px;margin:16px 0;display:grid}.hub-login label{color:var(--muted);gap:6px;font-size:13px;display:grid}.hub-login input{border:1px solid var(--line);color:var(--text);background:#0003;border-radius:10px;padding:10px 12px}.form-error{color:#ff8a8a;margin:0;font-size:13px}.session-chip{border:1px solid var(--line);border-radius:12px;align-items:center;gap:10px;margin:12px 0;padding:10px 12px;display:flex}.session-chip span{color:var(--muted);font-size:12px;display:block}.join-box{gap:8px;margin:0 0 16px;display:grid}.join-row{gap:8px;display:flex}.join-row input{border:1px solid var(--line);min-width:0;color:var(--text);background:#0003;border-radius:10px;flex:1;padding:10px 12px;font-size:13px}.seat-letter{width:36px;height:36px;color:var(--accent);background:#5ee7ff29;border-radius:10px;place-items:center;font-weight:700;display:grid}.session-chip strong{display:block}.seat-list{gap:8px;margin:12px 0 18px;display:grid}.seat-row{border:1px solid var(--line);border-radius:12px;grid-template-columns:14px 1fr auto;align-items:center;gap:10px;padding:10px;display:grid}.seat-row .swatch{background:var(--c);opacity:.7}.seat-meta strong,.seat-meta span{display:block}.seat-meta span{color:var(--muted);font-size:12px}.seat-toggle{gap:4px;display:flex}.seat-toggle button{padding:6px 10px;font-size:12px}.seat-toggle button.on{background:var(--accent);color:#061016;border-color:#0000}.seat-avatar{object-fit:cover;border-radius:50%;width:32px;height:32px}.seat-avatar.sm{vertical-align:middle;width:18px;height:18px}.seat-letter{background:var(--accent);color:#061016;border-radius:50%;place-items:center;width:32px;height:32px;font-weight:700;display:grid}.computer-line{color:var(--amber);margin:0;font-size:13px}.score-card .who em{color:var(--muted);font-size:11px;font-style:normal;font-weight:500}.count-row{gap:8px;margin:8px 0 20px;display:flex}.count-row button,.icon-btn,.btn{border:1px solid var(--line);color:var(--text);cursor:pointer;background:#ffffff08;border-radius:999px}.count-row button{width:48px;height:48px;font-size:18px;font-weight:700}.count-row button.on,.build-btn.on{background:var(--accent);color:#061016;border-color:#0000}.name-fields{gap:8px;margin-bottom:22px;display:grid}.name-fields label{align-items:center;gap:10px;display:flex}.swatch{border-radius:50%;width:14px;height:14px;box-shadow:0 0 10px}.name-fields input{border:1px solid var(--line);color:var(--text);background:#0003;border-radius:10px;flex:1;padding:10px 12px}body.day .name-fields input,body.day select{background:#fff}.title-actions,.row{flex-wrap:wrap;gap:10px;display:flex}.btn{justify-content:center;align-items:center;padding:12px 18px;font-weight:650;text-decoration:none;display:inline-flex}.btn.primary{background:var(--amber);color:#1a1204;border-color:#0000}.btn.ghost{background:0 0}.btn.slim{padding:8px 12px;font-size:13px}.btn.wide{width:100%;margin:8px 0 20px}.btn:disabled,.build-btn:disabled{opacity:.4;cursor:not-allowed}.topbar{border-bottom:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:25;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:10px 16px;display:grid;position:sticky;top:0}.brand{align-items:center;gap:10px;display:flex}.logo{border:1px solid var(--accent);width:36px;height:36px;color:var(--accent);font-family:var(--display);place-items:center;font-weight:800;display:grid}.brand strong{font-family:var(--display);letter-spacing:.08em;display:block}.brand em{color:var(--muted);font-size:12px;font-style:normal}.prompt-stack{min-width:0}.prompt{margin:0;font-size:14px}.first-tip{color:var(--amber);margin:0;font-size:13px}.join-panel{align-items:center;gap:6px;max-width:min(280px,36vw);display:flex}.join-panel input{border:1px solid var(--line);min-width:0;color:var(--text);background:#0003;border-radius:10px;flex:1;padding:6px 8px;font-size:11px}.modal.intro p{color:var(--muted);margin:0 0 10px;font-size:15px;line-height:1.45}.modal.intro h2{margin-bottom:12px}.table-panel{margin-bottom:16px}.table-panel .seat-list{margin:10px 0 8px}.top-actions{gap:8px;display:flex}.icon-btn{padding:8px 12px;font-size:13px}#btn-mute{place-items:center;width:40px;height:40px;padding:8px;display:grid}#btn-mute svg{display:block}#btn-mute.muted{color:var(--muted)}.play-grid{grid-template-columns:1fr min(360px,38vw);min-height:calc(100dvh - 64px);display:grid}#board-wrap{padding:12px;position:relative;overflow:auto}.board-howto{z-index:6;background:#0408109e;border-radius:12px;place-items:center;padding:16px;display:grid;position:absolute;inset:12px}.board-howto .modal.intro{width:min(440px,100%)}#board{width:100%;min-width:720px;min-height:640px;display:block}.vert-hint{animation:1.15s ease-in-out infinite hintPulse}@keyframes hintPulse{50%{opacity:.4}}.hex-num,.hex-res{font-family:var(--display);pointer-events:none;font-weight:800}.hex-num{font-size:11px}.hex-label,.hex-label-disc{pointer-events:none}.hex-label{font-family:var(--font);letter-spacing:.02em;font-weight:700}.piece-cost{font-size:10px;font-family:var(--font);fill:var(--paper);pointer-events:none}.hex-district.out{opacity:0}.hex-res{letter-spacing:.04em;font-size:10px}.port-label,.hex-label,.hex-label-disc,.vert-hint,.edge-hint,.rail-drawn,.town-piece,.city-piece,.blackout-lamp,.blackout-veil,.port{pointer-events:none}.rail-pad{cursor:pointer;filter:drop-shadow(0 0 6px color-mix(in srgb, var(--glow-warm) 80%, transparent))}.hex-hit,.edge-hit,.vert-hit,.hex-blackout-hint,.rail-pad{cursor:pointer}#hud{border-left:1px solid var(--line);background:var(--panel);max-height:calc(100dvh - 64px);padding:12px 14px 32px;overflow:auto}.hud-block{margin-bottom:16px}.hud-block h2{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-size:12px}.hint{color:var(--muted);margin:0 0 8px;font-size:12px}.dice-block{gap:10px;display:grid}.dice{gap:10px;display:flex}.die{width:52px;height:52px;font-family:var(--display);background:var(--ink-2);border:1px solid var(--glow-warm);color:var(--paper);box-shadow:inset 0 0 12px color-mix(in srgb, var(--glow-warm) 22%, transparent);border-radius:10px;place-items:center;font-size:24px;display:grid}.die.seven{color:var(--glow-warm)}.die.seven svg{width:28px;height:28px}.res-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.res-tile{border:1px solid var(--line);font:inherit;color:inherit;text-align:left;cursor:default;background:#ffffff08;border-radius:10px;align-items:center;gap:8px;width:100%;padding:8px;display:flex}button.res-tile.discard{cursor:pointer;border-color:var(--amber)}.res-tile strong{font-size:18px;display:block}.res-tile span{color:var(--muted);font-size:11px}.dot{border-radius:3px;width:12px;height:12px;display:inline-block}.dot.house,.res-tile.house .dot{box-shadow:0 0 0 1px var(--glow-warm);background:#c96b6b}.dot.road{box-shadow:0 0 0 1px var(--steel);background:#7a8499}.dot.condo{box-shadow:0 0 0 1px var(--glow-cool);background:#5b7fbf}.dot.highway{background:#d4a017;box-shadow:0 0 0 1px #e6c15a}.dot.tech{box-shadow:0 0 0 1px var(--glow-cool);background:#2f9e90}.build-grid{gap:8px;display:grid}.build-btn{text-align:left;border:1px solid var(--line);color:inherit;cursor:pointer;background:#ffffff08;border-radius:12px;gap:6px;width:100%;margin-bottom:8px;padding:10px;display:grid}.build-btn.owned{outline:1px solid var(--accent)}.cost-row,.cost-chip{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.cost-chip{background:#00000040;border-radius:999px;padding:2px 7px;font-size:11px}body.day .cost-chip{background:#14283c14}.trade-row{grid-template-columns:1fr 1fr auto;gap:6px;display:grid}select{color:var(--text);border:1px solid var(--line);background:#10161f;border-radius:8px;padding:8px}.score-card{border:1px solid var(--line);border-left:4px solid var(--c);border-radius:10px;margin-bottom:8px;padding:8px 10px}.score-card.current{background:color-mix(in srgb, var(--c) 14%, transparent)}.score-card header{justify-content:space-between;font-weight:700;display:flex}.score-card p{color:var(--muted);margin:4px 0 0;font-size:12px}.charter-track{gap:3px;margin:6px 0 4px;display:flex}.charter-pip{background:var(--c);opacity:.22;border-radius:99px;width:8px;height:8px}.charter-pip.on{opacity:.7}.charter small{color:var(--muted);font-weight:500}.log{color:var(--muted);max-height:140px;margin:0;padding:0;font-size:12px;list-style:none;overflow:auto}.log li{border-bottom:1px solid var(--line);padding:4px 0}.overlay{z-index:20;background:#0408109e;place-items:center;padding:16px;display:grid;position:fixed;inset:0}#trade-modal,#trade-confirm{z-index:24}#wait-seat{z-index:22}.modal{background:var(--panel);border:1px solid var(--line);width:min(520px,100%);box-shadow:var(--shadow);border-radius:18px;padding:20px}.modal.wide{width:min(860px,100%)}.modal header{justify-content:space-between;align-items:center;gap:12px;display:flex}.modal h2,.modal h3{font-family:var(--display);margin:0 0 8px}.howto-grid{grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;display:grid}.howto-grid article{border:1px solid var(--line);background:#ffffff08;border-radius:12px;padding:12px}.howto-grid p{color:var(--muted);margin:0;font-size:14px;line-height:1.45}.trade-cols{grid-template-columns:1fr 1fr;gap:16px;margin:12px 0;display:grid}.stepper{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;display:flex}.stepper span{align-items:center;gap:6px;display:flex}.stepper button{border:1px solid var(--line);width:28px;height:28px;color:inherit;cursor:pointer;background:0 0;border-radius:8px}.pulse{animation:1.2s ease-in-out infinite pulse}@keyframes pulse{50%{box-shadow:0 0 0 4px #ffb02040}}.toast{color:#fff;z-index:30;background:#141b28;border:1px solid #ffb02066;border-radius:999px;padding:10px 14px;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.modal.win{text-align:center;background:radial-gradient(circle at 50% 0%, #ffb02033, transparent 55%), var(--panel)}.modal.win h2{font-size:36px}#win-breakdown{color:var(--muted);padding:0;list-style:none}#win-breakdown li{padding:4px 0}@media (width<=960px){.play-grid{grid-template-columns:1fr}#hud{border-left:0;border-top:1px solid var(--line);max-height:none}.topbar,.howto-grid,.trade-cols{grid-template-columns:1fr}.title-card{padding-top:8vh}}