:root { color-scheme: dark; --paper:#efe3c2; --ink:#171713; --red:#a63126; --player-human:#d46b9a; --player-ai:#2b9f98; --gold:#c99b42; --panel:#28271f; --line:#5d5948; font-family: Georgia, "Times New Roman", serif; }
* { box-sizing:border-box; }
body { margin:0; background:#161712; color:var(--paper); }
button, select { font:inherit; }
button { border:1px solid var(--gold); background:#343126; color:var(--paper); padding:.55rem .75rem; border-radius:.25rem; cursor:pointer; }
button:hover:not(:disabled), button:focus-visible { background:#4a4431; outline:2px solid var(--paper); outline-offset:2px; }
button:disabled { opacity:.38; cursor:not-allowed; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.5rem; border-bottom:1px solid var(--line); background:#20211a; position:sticky; top:0; z-index:5; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font-size:clamp(1.5rem,3vw,2.5rem); } h2 { font-size:1.15rem; letter-spacing:.05em; text-transform:uppercase; }
.eyebrow { color:var(--gold); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.2rem; }
.status { text-align:center; line-height:1.25; display:grid; }.status span,.status small { color:#bdb397; }.status strong { font-size:1.05rem; }
.phase-rail { display:flex; justify-content:center; gap:clamp(.4rem,3vw,2rem); padding:.55rem 1rem; background:#11120e; border-bottom:1px solid var(--line); position:sticky; top:81px; z-index:4; }
.phase-step { display:flex; align-items:center; gap:.4rem; color:#8d8877; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; }.phase-step b { display:grid; place-items:center; width:1.6rem; height:1.6rem; border:1px solid #5d5948; border-radius:50%; }.phase-step.active { color:var(--paper); }.phase-step.active b { background:var(--gold); color:var(--ink); border-color:var(--gold); }
main { max-width:1500px; margin:auto; padding:1rem; }
.objective-strip { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:1rem; }.objective-strip div { display:grid; grid-template-columns:auto 1fr; gap:.75rem; background:#20211a; padding:.65rem .9rem; }.objective-strip strong { color:var(--gold); }.objective-strip span { color:#c8bea2; font-size:.9rem; }
.players { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.player, .actions, .markets, .log-panel { border:1px solid var(--line); background:var(--panel); padding:1rem; border-radius:.35rem; }
.player.human { border-top:4px solid var(--player-human); }.player.ai { border-top:4px solid var(--player-ai); }.player-heading { display:flex; justify-content:space-between; align-items:start; }.control-score { font-size:1.7rem; display:flex; gap:.3rem; color:var(--gold); }.control-score small { font-size:.7rem; text-transform:uppercase; color:#bdb397; align-self:center; }.tableau-line { margin:.65rem 0 0; font-size:.88rem; color:#d0c6a9; }
.resource-row,.button-row { display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; }
.token { padding:.25rem .5rem; border:1px solid var(--line); background:#1b1c17; border-radius:999px; font-size:.82rem; display:inline-flex; align-items:center; gap:.3rem; }.token b { display:grid; place-items:center; width:1.1rem; height:1.1rem; color:var(--gold); }.cement b { color:#c7c5ba; }.coal b { color:#77766d; }.steel b { color:#9fc3c8; }.textiles b { color:#cf8c68; }.clout-token b { color:var(--gold); }.escape-token { border-color:#8a7650; }
.workspace { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(280px,1fr); gap:1rem; align-items:start; }
.board { display:grid; grid-template-columns:repeat(2,minmax(240px,1fr)); gap:2.2rem; position:relative; padding:1rem; }.map-lines { position:absolute; inset:5%; width:90%; height:90%; pointer-events:none; }.map-lines path { fill:none; stroke:#665e43; stroke-width:1.2; stroke-dasharray:2 2; }
.district { text-align:left; min-height:290px; width:100%; border:2px solid var(--line); background:#24251f; padding:.8rem; color:var(--paper); position:relative; z-index:1; box-shadow:0 8px 20px #0006; }
.district.selected { outline:3px solid var(--gold); }.district.human-control { border-color:var(--player-human); }.district.ai-control { border-color:var(--player-ai); }.district.riot { background:#3a1e19; box-shadow:inset 0 0 0 2px var(--red); }
.district h3 { display:flex; justify-content:space-between; gap:.5rem; margin:.5rem 0 .65rem; font-size:1.15rem; }.district-controller { text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; color:#bcb297; }.strike-label { font-size:.75rem; color:#d3c8a8; }.district.riot .strike-label { color:#ff9a83; }
.zone-track { display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.55rem; }.zone-track span { padding:.2rem .4rem; border:1px dashed #716a55; background:#151611; color:#bdb397; font-size:.68rem; text-transform:capitalize; }.zone-track b { color:var(--gold); }
.district-meta { font-size:.84rem; color:#ccc2a5; margin-bottom:.55rem; }
.district-population { display:grid; grid-template-columns:1fr 1fr auto; gap:.65rem; align-items:end; padding:.65rem; background:#191a15; border:1px solid #484536; }.district-population small { display:block; margin-bottom:.35rem; color:#a9a18b; }.district-population>b { font-size:.72rem; color:#bdb397; }.worker-dots,.strike-track,.staff-track { display:flex; gap:.2rem; flex-wrap:wrap; }.worker { display:inline-block; width:.85rem; height:.85rem; background:#e3dcc7; border:1px solid #090a08; transform:rotate(45deg); box-shadow:1px 1px 0 #000; }.strike-worker { background:#c33b30; }.empty-worker { background:transparent; border-color:#6e594c; box-shadow:none; }.property-stack { display:grid; gap:.35rem; margin-top:.6rem; }.building-card { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.45rem .55rem; background:#181914; border-left:4px solid var(--line); }.building-card small { display:block; color:#aaa28d; margin-top:.1rem; }.building-card.owner-human { border-left-color:var(--player-human); }.building-card.owner-ai { border-left-color:var(--player-ai); }.neutral-card { border:1px dashed var(--gold); border-left-width:4px; }.ruin-card { color:#e78979; background:repeating-linear-gradient(135deg,#2a1714,#2a1714 5px,#3a211b 5px,#3a211b 10px); }.empty-sites { padding:.25rem; color:#8c8675; font-size:.72rem; text-align:center; border:1px dashed #484536; }.staff-slot { width:.72rem; height:.72rem; border:1px solid #b7ab89; border-radius:50%; }.staff-slot.push-slot { border-style:dashed; border-color:#cf745f; }.staff-slot.filled { background:#e1d8bd; }.passive-tag { font-size:.65rem; color:#98917f; text-transform:uppercase; }
.owner-human { color:var(--player-human); }.owner-ai { color:var(--player-ai); }.danger { color:#ff9a83; font-weight:bold; }
.actions { position:sticky; top:135px; min-height:300px; }
.action-group { border-top:1px solid var(--line); padding-top:.75rem; margin-top:.75rem; }
.action-group h3 { display:flex; justify-content:space-between; margin-bottom:.45rem; font-size:1rem; }.action-group h3 span { color:var(--gold); font-size:.7rem; text-transform:uppercase; }.helper { color:#aaa28d; font-size:.82rem; line-height:1.35; }.turn-guide { display:flex; gap:.75rem; padding:.75rem; background:#171813; border:1px solid var(--gold); }.turn-guide p { margin:.2rem 0 0; color:#c9bfa4; font-size:.85rem; line-height:1.35; }.guide-number { display:grid; place-items:center; min-width:2rem; height:2rem; background:var(--gold); color:var(--ink); border-radius:50%; font-weight:bold; }.selected-summary { display:grid; padding:.75rem 0; }.selected-summary span,.selected-summary small { color:#a9a18b; }.selected-summary strong { font-size:1.3rem; }.trade-row { justify-content:flex-end; margin:.25rem 0; }.trade-row>span { margin-right:auto; display:flex; gap:.4rem; align-items:center; text-transform:capitalize; }.trade-row small { color:#938d7b; }.primary-action { background:var(--gold); color:var(--ink); font-weight:bold; }.black-market { background:#181714; padding:.65rem; }.mobster-card { position:relative; padding:.65rem; background:#0e0f0d; border:1px solid #51482d; margin:.4rem 0; }.mobster-card>span { position:absolute; right:.6rem; font-size:2rem; color:#5d5233; }.mobster-card p { font-size:.8rem; max-width:80%; color:#b9af94; }
.actions button { margin:.18rem; }
.markets { margin-top:1rem; }.market-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }.market-tier { padding:.65rem; background:#1b1c17; }.market-tier h3 { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:.4rem; }.market-tier h3 small { color:#918a76; font-weight:normal; }.market-card { border:1px solid #58513b; border-left:3px solid var(--gold); padding:.65rem; background:#24231c; margin:.5rem 0; position:relative; min-height:125px; }
.market-card p { font-size:.82rem; margin:.25rem 0; color:#cfc6ab; }
.revolution-warning { grid-column:1/-1; border:1px solid var(--red); background:#351b17 !important; }.revolution-warning small,.end-score small { margin-top:.35rem; color:#d6b4a7; }.end-score { display:grid; gap:.35rem; padding:.75rem; border:1px solid var(--red); background:#211713; }
.card-tier { position:absolute; right:.5rem; top:.45rem; color:var(--gold); font-size:.72rem; }.card-facts { display:flex; justify-content:space-between; gap:.4rem; color:#aaa28d; font-size:.72rem; margin:.5rem 0; text-transform:capitalize; }.labor-preview { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin:.8rem 0; }.labor-preview div { display:grid; padding:.55rem; background:#191a15; }.labor-preview span { color:#9f9884; font-size:.72rem; }.labor-preview strong { margin-top:.2rem; }.allocation span small { display:block; color:#a9a18b; margin-top:.15rem; }.allocation select { min-width:3.5rem; padding:.4rem; background:#11120e; color:var(--paper); border:1px solid var(--gold); }.roll-count { color:var(--gold); margin-top:1rem; }.die { display:grid; place-items:center; align-content:center; }.die small { font-size:.55rem; text-transform:uppercase; }.die b { font-size:1.3rem; }
.log-panel { margin-top:1rem; }.section-heading { display:flex; justify-content:space-between; }.log { max-height:260px; overflow:auto; padding-left:1.7rem; }.log li { padding:.2rem; border-bottom:1px dotted #444236; }
.dice { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0; }.die { width:48px; height:48px; font-size:1.35rem; }.die.held { background:var(--gold); color:var(--ink); }.die.locked { background:var(--red); }
.allocation { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.5rem; margin:.4rem 0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:1050px) { .workspace { grid-template-columns:1fr; }.actions { position:static; }.market-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) { .masthead { align-items:flex-start; flex-direction:column; position:static; }.phase-rail { top:0; overflow:auto; justify-content:flex-start; }.players,.board,.objective-strip { grid-template-columns:1fr; }.board { padding:0; gap:.75rem; }.map-lines { display:none; }.district { min-height:0; }.market-grid { grid-template-columns:1fr; }.objective-strip div { grid-template-columns:1fr; }.district-population { grid-template-columns:1fr 1fr; }.district-population>b { grid-column:1/-1; } }
@media (prefers-reduced-motion:no-preference) { button,.district { transition:background-color .15s ease, transform .15s ease; }.district:hover { transform:translateY(-2px); } }