:root {
  --panel: rgba(16, 26, 31, 0.86);
  --panel-solid: #141f24;
  --panel-2: rgba(34, 47, 53, 0.75);
  --line: rgba(209, 224, 224, 0.13);
  --line-2: rgba(209, 224, 224, 0.22);
  --text: #eaf0e8;
  --muted: #9fb0b1;
  --dim: #6f8284;
  --gold: #ffc93c;
  --gold-2: #f3a93a;
  --brick: #e0663f;
  --green: #5ee89a;
  --red: #ff6b6b;
  --teal: #3fd6c0;
  --purple: #a987ff;
  --cyan: #5fd3ff;
  --radius: 18px;
  --shadow: 0 12px 40px rgba(6, 14, 18, 0.35);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #a9d3de; color: var(--text); font: 13px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
a { color: inherit; }
[hidden] { display: none !important; }

#stage { position: fixed; inset: 0; }
#city { width: 100%; height: 100%; display: block; touch-action: none; outline: none; cursor: grab; }
#city:active { cursor: grabbing; }

.glass {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

/* loading */
.loading { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: radial-gradient(circle at 50% 45%, #bfe0e8, #8fc3d1); z-index: 50; transition: opacity .6s ease, visibility .6s; }
.loading.gone { opacity: 0; visibility: hidden; }
.loading-mark { width: 64px; height: 64px; border-radius: 18px; background: var(--panel-solid); display: grid; place-items: center; box-shadow: var(--shadow); }
.loading-mark svg { width: 44px; height: 44px; stroke: none; fill: var(--brick); }
.loading-mark svg .g { fill: var(--gold); animation: drop 1.1s ease-in-out infinite; }
.loading-t { font: 700 14px var(--display); color: #16323a; letter-spacing: .02em; }
@keyframes drop { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(0); } }

/* top HUD */
.hud-top { position: fixed; top: 12px; left: 12px; right: 12px; height: 62px; display: flex; align-items: center; gap: 16px; padding: 0 10px 0 10px; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand-mark { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(160deg, #22343b, #121c20); border: 1px solid var(--line-2); display: grid; place-items: center; flex: none; }
.brand-mark svg { width: 30px; height: 30px; stroke: none; fill: var(--brick); }
.brand-mark svg .g { fill: var(--gold); }
.brand-t { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.brand-t b { font: 800 16px var(--display); letter-spacing: .04em; }
.brand-t small { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.stats { flex: 1; display: flex; justify-content: center; gap: 4px; min-width: 0; }
.stat { display: flex; flex-direction: column; padding: 4px 16px; border-left: 1px solid var(--line); min-width: 0; }
.stat:first-child { border-left: 0; }
.stat .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
.stat .v { font: 700 19px/1.15 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .v.gold { color: var(--gold); }
.stat .d { font-size: 11px; color: var(--green); white-space: nowrap; }
.stat .d.muted { color: var(--muted); }
.hud-actions { display: flex; align-items: center; gap: 8px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); cursor: pointer; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s, transform .1s; }
.btn:hover { background: rgba(60, 78, 86, .8); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--gold); color: #1b1606; border-color: transparent; }
.btn.primary:hover { background: #ffd564; }
.btn.green { background: var(--green); color: #07210f; border-color: transparent; }
.btn.green:hover { background: #7ff2b0; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: rgba(255,255,255,.06); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn.wallet.on { background: var(--panel-2); color: var(--text); border-color: var(--line-2); }
.btn.wallet.on::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.btn.wallet.on svg { display: none; }
.icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; border: 0; background: transparent; cursor: pointer; color: var(--muted); }
.icon-btn:hover { background: rgba(255,255,255,.07); color: var(--text); }

.status { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.status[data-state="live"] { color: var(--green); }
.status[data-state="live"] i { background: var(--green); box-shadow: 0 0 0 0 rgba(94,232,154,.6); animation: ping 2s infinite; }
.status[data-state="mock"] { color: var(--cyan); }
.status[data-state="mock"] i { background: var(--cyan); }
.status[data-state="stale"] { color: #ffb84d; }
.status[data-state="stale"] i { background: #ffb84d; animation: blink 1s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(94,232,154,.55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(94,232,154,0); } }
@keyframes blink { 50% { opacity: .3; } }

/* pulse */
.pulse { position: fixed; right: 12px; top: 86px; width: 318px; bottom: 214px; display: flex; flex-direction: column; z-index: 15; overflow: hidden; }
.pulse-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); position: relative; }
.eyebrow { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: ping 2s infinite; }
.pulse-head h2 { font: 800 24px/1.1 var(--display); margin: 8px 0 4px; letter-spacing: -.01em; }
.pulse-head p { margin: 0; color: var(--muted); font-size: 12.5px; }
.pulse-close { position: absolute; top: 10px; right: 10px; display: none; }
.pulse-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.pulse-list li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 9px 10px; border-radius: 12px; cursor: pointer; align-items: start; }
.pulse-list li:hover { background: rgba(255,255,255,.05); }
.pulse-list li.fresh { animation: fresh 1.2s ease; }
@keyframes fresh { from { background: rgba(255, 201, 60, .18); transform: translateX(8px); } to { background: transparent; transform: none; } }
.pk { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.pk svg { width: 16px; height: 16px; }
.pk.launch { background: rgba(255,201,60,.16); color: var(--gold); }
.pk.milestone { background: rgba(94,232,154,.15); color: var(--green); }
.pk.grad { background: rgba(95,211,255,.15); color: var(--cyan); }
.pk.burn { background: rgba(255,120,60,.16); color: #ff8a4c; }
.pk.haunt { background: rgba(169,135,255,.16); color: var(--purple); }
.pt { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.pt b { font-weight: 700; color: #fff; }
.pm { font-size: 11px; color: var(--dim); margin-top: 2px; }
.pm a { color: var(--dim); }
.pm a:hover { color: var(--muted); }
.empty { color: var(--muted); padding: 18px; text-align: center; }

/* side panel (coin card / launch) */
.side { position: fixed; left: 12px; top: 86px; width: 372px; max-height: calc(100% - 86px - 90px); overflow-y: auto; z-index: 25; padding: 18px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; animation: slideIn .25s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.side .x { position: absolute; top: 12px; right: 12px; }
.card-head { display: flex; gap: 14px; align-items: center; padding-right: 30px; }
.logo { width: 60px; height: 60px; border-radius: 16px; object-fit: cover; background: #0e171a; border: 2px solid rgba(255,255,255,.85); flex: none; }
.card-head h3 { margin: 0; font: 800 20px/1.15 var(--display); overflow-wrap: anywhere; }
.card-head .tick { color: var(--muted); font-weight: 600; margin-top: 2px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.badge-t { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--muted); }
.badge-t.grad { background: rgba(95,211,255,.14); color: var(--cyan); }
.badge-t.guest { background: rgba(224,102,63,.18); color: #ff9a74; }
.badge-t.dead { background: rgba(169,135,255,.18); color: var(--purple); }
.badge-t.row { background: rgba(255,201,60,.16); color: var(--gold); }
.badge-t.downtown { background: rgba(63,214,192,.14); color: var(--teal); }
.mc-big { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 4px; }
.mc-big b { font: 800 34px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; transition: color .4s; }
.mc-big b.flash-up { color: var(--green); }
.mc-big b.flash-down { color: var(--red); }
.chg { font-weight: 700; font-size: 14px; }
.chg.up { color: var(--green); }
.chg.down { color: var(--red); }
.chg.flat { color: var(--muted); }
.mc-sub { color: var(--muted); font-size: 12px; }
.storey-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); margin: 12px 0 4px; overflow: hidden; }
.storey-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--teal), var(--gold)); transition: width .6s ease; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.cell { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; min-width: 0; }
.cell .k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cell .v { font-weight: 700; font-size: 14px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.actions .wide { grid-column: 1 / -1; }
.note { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.note.guest { border-color: rgba(224,102,63,.35); }
.note.dead { border-color: rgba(169,135,255,.35); }
.mint { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 11.5px; color: var(--dim); margin-top: 12px; overflow-wrap: anywhere; }

/* launch form */
.lp-head { padding-right: 30px; }
.lp-head h3 { margin: 6px 0 4px; font: 800 22px/1.15 var(--display); }
.lp-head p { margin: 0; color: var(--muted); }
.form { display: grid; gap: 12px; margin-top: 16px; }
.field { display: grid; gap: 5px; }
.field > span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.field > span em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--dim); }
.field input, .field textarea { width: 100%; background: rgba(0,0,0,.25); border: 1px solid var(--line-2); border-radius: 11px; padding: 10px 12px; color: var(--text); font: 500 14px var(--font); outline: none; transition: border-color .15s, box-shadow .15s; }
.field textarea { resize: vertical; min-height: 64px; }
.field input:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,201,60,.15); }
.field.bad input, .field.bad textarea, .field.bad .drop { border-color: var(--red); }
.field .err { color: var(--red); font-size: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.drop { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1.5px dashed var(--line-2); border-radius: 12px; cursor: pointer; background: rgba(0,0,0,.18); }
.drop:hover, .drop.over { border-color: var(--gold); }
.drop img, .drop .ph { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: none; background: rgba(255,255,255,.06); display: grid; place-items: center; color: var(--muted); }
.drop .dt { font-size: 12.5px; color: var(--muted); }
.drop .dt b { color: var(--text); display: block; font-size: 13px; }
.chips { display: flex; gap: 6px; }
.chip { height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); cursor: pointer; font-weight: 600; font-size: 12px; }
.chip.on { background: var(--gold); color: #1b1606; border-color: transparent; }
.buyrow { display: flex; gap: 8px; align-items: center; }
.buyrow input { flex: 1; min-width: 0; }
details.more summary { cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 600; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: '+ '; }
details.more[open] summary::before { content: '− '; }
details.more .form { margin-top: 10px; }
.disclose { border-radius: 14px; border: 1px solid rgba(255,201,60,.3); background: rgba(255,201,60,.06); padding: 12px 14px; display: grid; gap: 7px; }
.disclose p { margin: 0; font-size: 12.5px; color: #e9dfc2; }
.disclose-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.disclose-row span { color: var(--muted); }
.disclose-row b { text-align: right; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 2px 2px; border-top: 1px solid var(--line); }
.total span { color: var(--muted); }
.total b { font: 800 20px var(--display); }
.total small { color: var(--dim); display: block; text-align: right; font-weight: 500; }
.go { width: 100%; height: 50px; font-size: 16px; font-weight: 800; border-radius: 14px; margin-top: 4px; font-family: var(--display); letter-spacing: .02em; }
.progress { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 4px; }
.progress li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; padding: 7px 4px; color: var(--dim); }
.progress li .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; }
.progress li .dot svg { width: 13px; height: 13px; stroke-width: 3; display: none; }
.progress li.active { color: var(--text); }
.progress li.active .dot { border-color: var(--gold); border-top-color: transparent; animation: spin .8s linear infinite; }
.progress li.ok { color: var(--text); }
.progress li.ok .dot { border-color: var(--green); background: var(--green); color: #07210f; }
.progress li.ok .dot svg { display: block; }
.progress li.fail { color: var(--red); }
.progress li.fail .dot { border-color: var(--red); }
.progress li small { display: block; color: var(--dim); font-size: 11.5px; }
.progress li small a { color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }
.errbox { margin-top: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.4); color: #ffc2c2; font-size: 13px; }
.errbox b { color: var(--red); display: block; margin-bottom: 2px; }
.donebox { margin-top: 14px; padding: 14px; border-radius: 14px; background: rgba(94,232,154,.09); border: 1px solid rgba(94,232,154,.35); }
.donebox h4 { margin: 0 0 4px; font: 800 18px var(--display); color: var(--green); }
.donebox p { margin: 0 0 12px; color: var(--muted); }

/* drawer */
/* tools open in the right column, in place of the pulse */
.drawer { position: fixed; right: 12px; top: 86px; width: 340px; max-height: calc(100% - 86px - 214px); overflow-y: auto; z-index: 18; padding: 16px 18px; animation: slideR .22s ease; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
@keyframes slideR { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
body.tool-open .pulse { display: none; }
.drawer h3 { margin: 4px 0 4px; font: 800 20px var(--display); }
.drawer > p, .drawer .sub { margin: 0 0 12px; color: var(--muted); }
.zones { display: grid; gap: 8px; }
.zone { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; text-align: left; width: 100%; }
.zone:hover { border-color: var(--line-2); background: rgba(255,255,255,.06); }
.zone .sw { width: 14px; height: 14px; border-radius: 4px; }
.zone .zn b { display: block; font-size: 14px; }
.zone .zn small { color: var(--muted); }
.zone .zp { text-align: right; font-weight: 800; font-size: 15px; font-family: var(--display); }
.zone .zp small { display: block; font: 500 11px var(--font); color: var(--muted); }
.zone.off { cursor: default; opacity: .75; }
.toll-note { margin-top: 10px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.toll-note svg { width: 14px; height: 14px; color: #ff8a4c; }
.search { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.25); border: 1px solid var(--line-2); border-radius: 12px; padding: 0 12px; }
.search input { flex: 1; min-width: 0; height: 44px; background: transparent; border: 0; outline: none; color: var(--text); font: 500 15px var(--font); }
.results { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.results li { display: grid; grid-template-columns: 26px 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 8px; border-radius: 11px; cursor: pointer; }
.results.norank li { grid-template-columns: 36px 1fr auto; }
.results li:hover { background: rgba(255,255,255,.05); }
.results .rk { color: var(--dim); font-weight: 800; text-align: center; font-family: var(--display); }
.results li:first-child .rk { color: var(--gold); }
.results img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; background: #0e171a; }
.results .nm { min-width: 0; }
.results .nm b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results .nm small { color: var(--muted); white-space: nowrap; }
.results .rv { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.results .rv small { display: block; font-weight: 600; }
.tabs { display: inline-flex; padding: 3px; border-radius: 11px; background: rgba(0,0,0,.25); border: 1px solid var(--line); margin-bottom: 8px; }
.tabs button { border: 0; background: transparent; padding: 6px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--muted); }
.tabs button.on { background: rgba(255,255,255,.1); color: var(--text); }

/* toolbar */
.toolbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; display: flex; gap: 4px; padding: 6px; z-index: 19; border-radius: 18px; }
.toolbar button { position: relative; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 13px; border: 0; background: transparent; cursor: pointer; font-weight: 600; color: #d7e0d9; }
.toolbar button:hover { background: rgba(255,255,255,.07); }
.toolbar button.on { background: var(--gold); color: #1b1606; }
.toolbar button[data-tool="build"] { background: rgba(255,201,60,.14); color: var(--gold); }
.toolbar button[data-tool="build"].on { background: var(--gold); color: #1b1606; }
.toolbar svg { width: 20px; height: 20px; }
.toolbar .badge { position: absolute; top: 7px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.only-phone { display: none !important; }

/* map controls, minimap, clock */
.mapctl { position: fixed; left: 12px; bottom: 70px; display: flex; flex-direction: column; padding: 4px; gap: 2px; border-radius: 14px; z-index: 16; }
.mapctl button { width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: #d7e0d9; }
.mapctl button:hover { background: rgba(255,255,255,.08); }
.minimap { position: fixed; right: 12px; bottom: 14px; padding: 7px; z-index: 16; border-radius: 16px; }
.minimap canvas { display: block; width: 170px; height: 170px; border-radius: 11px; cursor: crosshair; }
.clock { position: fixed; left: 12px; bottom: 14px; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; z-index: 16; border-radius: 14px; }
.clock b { font-variant-numeric: tabular-nums; font-size: 14px; }
.clock .sun { width: 18px; height: 18px; display: grid; place-items: center; color: var(--gold); }
.clock .hint { color: var(--dim); font-size: 12px; border-left: 1px solid var(--line); padding-left: 10px; }

/* toasts */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 88px; display: grid; gap: 8px; z-index: 40; pointer-events: none; justify-items: center; width: max-content; max-width: calc(100% - 24px); }
.toast { background: var(--panel-solid); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); font-weight: 600; animation: rise2 .25s ease; max-width: 100%; }
.toast.good { border-color: rgba(94,232,154,.5); }
.toast.bad { border-color: rgba(255,107,107,.5); }
@keyframes rise2 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fps { position: fixed; left: 12px; top: 84px; z-index: 60; font: 600 11px ui-monospace, Consolas, monospace; background: rgba(0,0,0,.6); padding: 6px 8px; border-radius: 8px; white-space: pre; }

/* modal */
.modal { width: min(560px, calc(100% - 24px)); max-height: calc(100% - 40px); overflow-y: auto; padding: 24px; color: var(--text); background: var(--panel-solid); }
.modal::backdrop { background: rgba(8, 16, 20, .55); backdrop-filter: blur(3px); }
.modal h2 { font: 800 28px/1.1 var(--display); margin: 8px 0 14px; }
.modal-x { position: absolute; top: 12px; right: 12px; margin: 0; }
.steps { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; color: var(--muted); }
.steps li::before { content: counter(s); width: 32px; height: 32px; border-radius: 10px; background: rgba(255,201,60,.14); color: var(--gold); display: grid; place-items: center; font: 800 16px var(--display); }
.steps li b { color: var(--text); display: block; }
.fine { color: var(--dim); font-size: 12px; margin: 14px 0 0; }

/* labels over the canvas */
.city-labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.lbl { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 9px; background: rgba(14, 22, 26, .84); border: 1px solid rgba(255,255,255,.14); white-space: nowrap; font-size: 11.5px; pointer-events: auto; cursor: pointer; will-change: transform; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.lbl::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: inherit; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); transform: translateX(-50%) rotate(45deg); }
.lbl b { font-weight: 800; color: #fff; }
.lbl span { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.lbl.up span { color: var(--green); }
.lbl.down span { color: var(--red); }
.lbl.top { border-color: rgba(255,201,60,.7); background: rgba(40, 30, 6, .9); }
.lbl.top b::before { content: '♛ '; color: var(--gold); }
.lbl.brick { background: var(--gold); border-color: transparent; }
.lbl.brick b, .lbl.brick span { color: #1b1606; }
.lbl.brick::after { border-color: transparent; }
.lbl.dead { background: rgba(40, 22, 60, .9); border-color: rgba(169,135,255,.5); }
.lbl.sel { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 4px 14px rgba(0,0,0,.3); }
.lbl.lot b { font-weight: 700; }
.lbl.lot.row b { color: var(--gold); }
.lbl.lot.downtown b { color: var(--teal); }
.lbl.stale { opacity: .6; }

/* medium widths */
@media (max-width: 1180px) {
  .stat { padding: 4px 10px; }
  .stat .v { font-size: 16px; }
  .clock .hint { display: none; }
  .brand-t small { display: none; }
}
@media (max-width: 1000px) {
  .hud-actions .how span { display: none; }
  .hud-actions .how { padding: 0 11px; }
  .pulse { width: 280px; }
  .drawer { width: 300px; }
  .side { width: 340px; }
}
@media (max-width: 900px) and (min-width: 721px) {
  .stat .d { display: none; }
  .status span { display: none; }
  .status { padding: 0 9px; }
}

/* phones */
@media (max-width: 720px) {
  .hud-top { top: 8px; left: 8px; right: 8px; height: auto; flex-wrap: wrap; padding: 8px; gap: 8px 8px; border-radius: 16px; }
  .brand { flex: 1; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .brand-mark svg { width: 24px; height: 24px; }
  .brand-t b { font-size: 14px; }
  .brand-t small { display: none; }
  .hud-actions { gap: 6px; }
  .hud-actions .btn { height: 34px; padding: 0 10px; border-radius: 10px; }
  .btn.wallet span { font-size: 12px; }
  .btn.wallet:not(.on) span { display: none; }
  .status { height: 24px; padding: 0 8px; font-size: 10px; }
  .status span { display: none; }
  .stats { order: 3; flex: 0 0 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); padding-top: 6px; }
  .stat { padding: 0 6px; align-items: center; text-align: center; }
  .stat .k { font-size: 8.5px; letter-spacing: .06em; white-space: normal; line-height: 1.15; min-height: 20px; display: flex; align-items: center; }
  .stat .v { font-size: 13.5px; }
  .stat .d { display: none; }

  .pulse { display: none; left: 8px; right: 8px; top: auto; bottom: calc(72px + var(--safe-b)); width: auto; max-height: 58vh; z-index: 30; }
  .pulse-head .eyebrow { padding-right: 34px; }
  body.pulse-open .pulse { display: flex; animation: sheet .25s ease; }
  .pulse-close { display: grid; }
  .pulse-head h2 { font-size: 20px; }

  .side { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 74vh; border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + var(--safe-b)); z-index: 30; animation: sheet .25s ease; }
  @keyframes sheet { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

  .toolbar { left: 8px; right: 8px; transform: none; bottom: calc(8px + var(--safe-b)); justify-content: space-around; padding: 4px; border-radius: 16px; }
  .toolbar button { flex: 1; flex-direction: column; gap: 2px; height: 50px; padding: 0 4px; justify-content: center; font-size: 10px; }
  .toolbar button span { font-size: 10px; }
  .only-phone { display: flex !important; }
  .drawer { left: 8px; right: 8px; top: auto; width: auto; bottom: calc(72px + var(--safe-b)); max-height: 56vh; animation: sheet .22s ease; }
  .mapctl, .minimap, .clock { display: none; }
  body.side-open .drawer, body.side-open .toolbar { display: none; }
  .drawer { padding: 12px 14px; }
  .drawer h3 { font-size: 17px; margin: 2px 0; }
  .drawer .sub { font-size: 12px; margin-bottom: 8px; }
  .drawer .zones { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .drawer .zone { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 3px; padding: 9px 6px; }
  .drawer .zone .zn b { font-size: 12.5px; }
  .drawer .zone .zn small, .drawer .zone .zp small, .drawer .zone.off { display: none; }
  .drawer .zone .zp { text-align: center; font-size: 14px; }
  .drawer .toll-note { font-size: 11px; margin-top: 8px; }
  .toasts { bottom: calc(80px + var(--safe-b)); }
  .lbl { font-size: 10.5px; padding: 3px 7px; }
  .modal { padding: 20px 18px; }
  .modal h2 { font-size: 23px; }
}
@media (max-width: 720px) and (max-height: 640px) {
  .side { max-height: 86vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
}