: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,#app{height:100dvh;font-family:var(--font);background:var(--ink);color:var(--text);margin:0;overflow:hidden}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{height:100dvh;overflow:hidden}#game-screen{flex-direction:column;display:flex}#table{background:var(--ink);grid-template-rows:auto 1fr auto;height:100dvh;display:grid;overflow:hidden}#title-screen{overflow:auto}.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;flex:none;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:6px 12px;display:grid;position:relative}.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{display:contents}#board-wrap{min-width:0;min-height:0;padding:4px;position:relative;overflow:hidden}.board-howto{z-index:6;pointer-events:none;background:0 0;justify-content:center;align-items:center;padding:12px;display:flex;position:absolute;inset:0}.board-howto.hidden{display:none!important}#table.is-lobby .board-howto{background:var(--ink)}#table.is-lobby #board{visibility:hidden;pointer-events:none}#table.is-lobby #hud .hud-block:not(.table-panel),#table.is-lobby #btn-end{display:none}#table.is-lobby #hud{max-height:28dvh}.board-howto .modal.intro{pointer-events:auto;flex-direction:column;width:min(440px,100%);min-height:0;max-height:100%;display:flex;overflow:hidden}.board-howto .intro-copy{-webkit-overflow-scrolling:touch;min-height:0;overflow:auto}.board-howto .intro-foot{background:var(--panel);flex:none;padding-top:12px;position:sticky;bottom:0}#board{width:100%;min-width:0;height:100%;min-height:0;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,.hex-pip{font-size:18px;font-weight:700}.hex-icon{fill:var(--paper);stroke:var(--ink);stroke-width:1.5px;pointer-events:none}.hex-icon-line{fill:none;stroke:var(--ink);stroke-width:1.5px}.commodity-mark{flex:none;display:block;overflow:visible}.hex-label{font-size:16px;font-weight:700}.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-top:1px solid var(--line);background:var(--panel);min-height:0;max-height:30dvh;padding:8px 10px 10px;overflow:auto}.hud-block{margin-bottom:10px}.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:40px;height:40px;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:repeat(5,minmax(0,1fr));gap:4px;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:4px;width:100%;padding:5px;display:flex}button.res-tile.discard{cursor:pointer;border-color:var(--amber)}.res-tile strong{font-size:15px;display:block}.res-tile span{color:var(--muted);font-size:11px}.cost-chip .commodity-mark{width:14px;height:14px}.res-tile .commodity-mark{width:22px;height:22px}.cost-chip b{font-size:11px;font-weight:700}.build-grid{gap:8px;display:grid}.build-btn{text-align:left;border:1px solid var(--line);color:inherit;cursor:pointer;background:#ffffff08;border-radius:10px;gap:4px;width:100%;margin-bottom:6px;padding:7px 8px;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:72px;margin:0;padding:0;font-size:11px;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}.permit-card{border:1px solid var(--line);border-radius:10px;margin-top:6px;padding:8px}.permit-card strong{font-size:13px;display:block}@media (width<=960px){#hud{max-height:32dvh}.topbar{grid-template-columns:1fr auto;gap:6px}.brand em,.prompt-stack .computer-line{display:none}.howto-grid,.trade-cols{grid-template-columns:1fr}.title-card{padding-top:8vh}.res-tile span{display:none}.log{max-height:48px}}