:root {
  color-scheme: dark;
  --ink: #f7fbfc;
  --muted: #9db7c2;
  --paper: #061f2a;
  --panel: #0b3040;
  --panel-2: #123e4f;
  --line: #2a5362;
  --acid: #55d7e3;
  --route: #55d7e3;
  --navy: #082b3a;
  --teal: #00a8b5;
  --sand: #f3f0e7;
  --badge-bg: #e53935;
  --badge-ink: #ffffff;
  --badge-border: 0 solid transparent;
  --font-body: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, sans-serif;
  --font-display: Futura, "Avenir Next Condensed", "Century Gothic", "Trebuchet MS", sans-serif;
  --orange: #ff8a3d;
  --red: #ff5f57;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #0a3545 0, var(--paper) 30rem); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; opacity: .16; background-image: linear-gradient(30deg, transparent 47%, #55d7e3 48%, #55d7e3 49%, transparent 50%); background-size: 80px 80px; mask-image: linear-gradient(to bottom, #000, transparent 36rem); }
button { font: inherit; }
input { width: 100%; padding: 13px; border: 1px solid #477080; border-radius: 6px; background: var(--panel-2); color: var(--ink); font: inherit; }
button:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
#app { width: min(100%, 680px); margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 18px max(36px, env(safe-area-inset-bottom)); }
.topbar, .section-heading, .location-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.topbar { margin-bottom: 25px; padding-bottom: 18px; border-bottom: 1px solid rgba(157,183,194,.28); }
.brand-lockup { display: flex; align-items: center; gap: 11px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.brand-mark { display: block; width: 50px; height: 50px; flex: 0 0 50px; object-fit: contain; }
.brand-name { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 1.03rem; font-weight: 800; letter-spacing: .13em; line-height: 1; }
.brand-name span { color: var(--acid); }
.brand-place { margin: 5px 0 0; color: var(--muted); font-size: .68rem; letter-spacing: .08em; }
.top-rider { margin: 5px 0 0; color: var(--ink); font-size: .68rem; opacity: .78; }
.service-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.mode-badge { display: grid; place-items: center; min-width: 48px; height: 48px; flex: 0 0 auto; padding: 0 9px; border: var(--badge-border); border-radius: 8px; background: var(--badge-bg); color: var(--badge-ink); font-size: .92rem; font-weight: 900; letter-spacing: -.03em; white-space: nowrap; box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); }
.mode-badge.neutral { border: 0; background: var(--acid); color: var(--navy); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .mode-badge, .status-strip strong, .primary-button, .username-suggestions button { font-family: var(--font-display); }
h1 { margin-bottom: 0; font-size: clamp(1.45rem, 6vw, 2rem); font-weight: 700; letter-spacing: .015em; }
h2 { margin-bottom: 8px; font-size: 1.4rem; font-weight: 700; letter-spacing: .02em; }
h3 { margin-bottom: 3px; font-size: 1rem; letter-spacing: .025em; }
.eyebrow { margin-bottom: 5px; color: var(--acid); font: 700 .65rem/1.2 var(--font-display); letter-spacing: .2em; }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--acid); font-size: 1.45rem; cursor: pointer; }
.install-button { max-width: 112px; padding: 8px 9px; border: 1px solid var(--acid); border-radius: 7px; background: rgba(85,215,227,.08); color: var(--acid); font-size: .7rem; font-weight: 800; line-height: 1.15; cursor: pointer; }
.status-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: rgba(11,48,64,.86); }
.status-strip div { min-width: 0; padding: 11px 8px; border-right: 1px solid var(--line); text-align: center; }
.status-strip div:last-child { border: 0; }
.status-strip span, .status-strip strong { display: block; }
.status-strip span { color: var(--muted); font-size: .67rem; text-transform: uppercase; letter-spacing: .08em; }
.status-strip strong { margin-top: 4px; font-size: .82rem; white-space: nowrap; }
.stop-status { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: -8px 0 16px; }
.stop-status div { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(11,48,64,.72); }
.stop-status span, .stop-status strong, .stop-status small { display: block; }
.stop-status span { color: var(--muted); font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.stop-status strong { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.stop-status small { margin-top: 5px; color: var(--muted); font-size: .72rem; }
.stop-status i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--muted); vertical-align: 1px; }
.stop-status .arrived i { background: var(--acid); box-shadow: 0 0 0 4px rgba(85,215,227,.12); }
.player-bar { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(11,48,64,.86); }
.player-bar span, .player-bar strong { display: block; }
.player-bar span { color: var(--muted); font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.player-bar strong { margin-top: 2px; font-size: .8rem; }
.player-bar button { padding: 8px 10px; border: 1px solid var(--acid); border-radius: 5px; background: transparent; color: var(--acid); font-size: .72rem; cursor: pointer; }
.card { border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(18,62,79,.98), rgba(8,43,58,.98)); box-shadow: 0 18px 50px rgba(0,0,0,.2); }
.card::before { content: ""; display: block; height: 4px; border-radius: 9px 9px 0 0; background: linear-gradient(90deg, var(--acid) 0 28%, var(--teal) 28% 55%, #08728b 55% 100%); }
.setup-card { padding: 0 26px 30px; text-align: left; overflow: hidden; }
.identity-card { padding: 0 26px 30px; overflow: hidden; }
.identity-card::before { margin: 0 -26px 29px; }
.identity-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.5; }
.username-suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.username-suggestions button { padding: 12px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--ink); font-weight: 750; cursor: pointer; }
.username-suggestions button:hover { border-color: var(--acid); color: var(--acid); }
.callsign-help { margin: 12px 0 0 !important; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.login-panel { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.login-panel summary { color: var(--acid); cursor: pointer; font-weight: 750; }
.login-panel .field-label { margin-top: 14px; }
.setup-card::before { margin: 0 -26px 29px; }
.setup-card h2 { font-size: 2rem; }
.setup-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.field-label, .round-display > span { display: block; margin: 24px 0 9px; color: var(--ink); font-size: .83rem; font-weight: 850; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
select { width: 100%; padding: 14px 40px 14px 13px; border: 1px solid #477080; border-radius: 6px; background: var(--panel-2); color: var(--ink); font: inherit; }
input { width: 100%; padding: 12px 13px; border: 1px solid #477080; border-radius: 6px; background: var(--panel-2); color: var(--ink); font: inherit; }
.nearby-button { margin-top: 9px; padding: 8px 10px; border: 1px solid var(--acid); border-radius: 5px; background: transparent; color: var(--acid); font-weight: 700; cursor: pointer; }
.city-request-panel { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.city-request-panel .field-label { margin-top: 0; }
.round-display { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 13px 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.round-display > span { grid-column: 1 / -1; margin-left: -13px; margin-right: -13px; padding: 0 13px 9px; border-bottom: 1px solid var(--line); }
.round-display strong { font-size: 1rem; }
.round-display small { color: var(--muted); text-align: right; }
.round-message { min-height: 1.4em; margin: 12px 0 0 !important; font-size: .78rem; }
.primary-button { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 14px; padding: 14px 18px; border: 0; border-radius: 6px; background: var(--acid); color: var(--navy); font-weight: 850; cursor: pointer; }
.primary-button:disabled, .text-button:disabled { opacity: .38; cursor: not-allowed; }
.primary-button.secondary { border: 1px solid var(--acid); background: transparent; color: var(--acid); }
.text-button { display: block; margin: 14px auto 0; padding: 8px; border: 0; background: none; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fine-print { min-height: 1.4em; margin: 14px 0 0 !important; font-size: .78rem; }
.eligibility-note, .safety-note { margin: 12px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.location-card { padding: 22px; overflow: hidden; border-top: 4px solid var(--acid); }
.location-card::before { display: none; }
.location-card h2 { margin: 0; font-size: 1.8rem; }
.distance { margin: 5px 0 0; color: var(--muted); }
.location-meta { display: grid; justify-items: end; gap: 8px; }
.time-button { padding: 6px 8px; border: 1px solid var(--acid); border-radius: 4px; background: transparent; color: var(--acid); font-size: .68rem; font-weight: 750; cursor: pointer; }
.signal { display: flex; align-items: end; gap: 4px; height: 34px; }
.signal span { width: 5px; border-radius: 3px; background: var(--acid); animation: pulse 1.2s ease-in-out infinite alternate; }
.signal span:nth-child(1) { height: 12px; }.signal span:nth-child(2) { height: 22px; animation-delay: .2s; }.signal span:nth-child(3) { height: 32px; animation-delay: .4s; }
@keyframes pulse { to { opacity: .25; } }
.notice { margin: 12px 0 28px; min-height: 22px; color: var(--muted); font-size: .85rem; text-align: center; }
.section-heading { margin: 0 2px 12px; align-items: end; }
.section-heading h2 { margin: 0; }
.pill { padding: 5px 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pill.open { border-color: var(--acid); background: rgba(216,255,67,.1); color: var(--acid); }
.market-list { display: grid; gap: 8px; margin-bottom: 28px; }
.incident-banner { margin: 0 0 10px; padding: 11px 13px; border: 1px solid var(--orange); border-radius: 6px; background: rgba(255,138,61,.1); color: #ffd1b3; font-size: .8rem; line-height: 1.4; }
.market-row { display: grid; grid-template-columns: 34px 1fr 62px auto; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.item-icon { width: 34px; height: 34px; border-radius: 50% 50% 50% 6px; background: var(--item-color); box-shadow: inset 0 0 0 8px rgba(0,0,0,.18); transform: rotate(-45deg); }
.item-info p, .item-price span { margin: 0; color: var(--muted); font-size: .72rem; }
.pack-count { padding: 6px 7px; border: 1px solid var(--line); border-radius: 7px; background: rgba(6,31,42,.55); text-align: center; }
.pack-count strong, .pack-count span { display: block; }
.pack-count strong { color: var(--acid); font: 1rem/1 var(--font-display); }
.pack-count span { margin-top: 3px; color: var(--muted); font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; }
.item-price { text-align: right; }
.item-price strong, .item-price span { display: block; }
.direct-actions { grid-column: 2 / 5; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.direct-actions button { padding: 10px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink); font-weight: 800; cursor: pointer; }
.direct-actions .current-buy { border-color: #6c7e31; color: var(--acid); }
.direct-actions button:disabled { opacity: .32; cursor: not-allowed; }
.advanced-order { grid-column: 2 / 5; }
.advanced-order summary { color: var(--muted); cursor: pointer; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.order-rule { grid-column: 2 / 4; display: grid; grid-template-columns: 1.35fr .65fr 1fr; gap: 7px; align-items: end; }
.advanced-order .order-rule, .advanced-order .trade-actions { grid-column: auto; margin-top: 8px; }
.order-rule select, .order-rule input { min-width: 0; padding: 8px; font-size: .75rem; }
.order-rule label span { display: block; margin-bottom: 3px; color: var(--muted); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }
.trade-actions { grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; }
.trade-actions button { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink); font-weight: 700; cursor: pointer; }
.trade-actions .buy-button { border-color: #6c7e31; color: var(--acid); }
.trade-actions button:disabled { opacity: .32; cursor: not-allowed; }
.route-card, .officer-card, .chat-card { padding: 0 18px 18px; overflow: hidden; }
.leaderboard-card, .chat-card { margin-top: 14px; }
.leaderboard-card { padding: 0 18px 18px; overflow: hidden; }
.route-card::before, .leaderboard-card::before, .officer-card::before, .chat-card::before { margin: 0 -18px 16px; }
.officer-card { margin-bottom: 28px; }
.officer-signal { min-height: 3em; margin: 8px 0 0; padding: 12px; border-left: 3px solid var(--orange); background: rgba(255,138,61,.08); color: var(--ink); line-height: 1.45; }
.officer-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.officer-actions button, .chat-compose button, .event-actions button { padding: 10px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--ink); font-weight: 750; cursor: pointer; }
.officer-actions small { display: block; margin-top: 3px; color: var(--muted); font-weight: 500; }
.officer-actions button:disabled { opacity: .35; cursor: not-allowed; }
.leaderboard-list { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: rank; }
.leaderboard-list li { display: flex; justify-content: space-between; padding: 11px 6px; border-top: 1px solid var(--line); counter-increment: rank; }
.leaderboard-list li span::before { content: counter(rank) ". "; color: var(--muted); }
.leaderboard-list strong { color: var(--acid); font: .8rem ui-monospace, monospace; }
.leaderboard-list li.empty span, .leaderboard-list li.empty strong { color: var(--muted); }
.chat-feed { display: grid; gap: 7px; max-height: 190px; overflow-y: auto; }
.chat-message { padding: 9px 10px; border-radius: 6px; background: rgba(6,31,42,.55); font-size: .79rem; line-height: 1.4; }
.chat-message strong { color: var(--acid); }
.chat-message span { display: block; margin-top: 2px; color: var(--muted); font-size: .68rem; }
.chat-compose { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 10px; }
.chat-compose select { min-width: 0; }
.chat-compose button { padding-inline: 16px; background: var(--acid); color: var(--navy); }
.compact { margin-bottom: 8px; }
.district-list { display: grid; gap: 2px; }
.district { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; padding: 12px 6px; border-top: 1px solid var(--line); }
.district-dot { width: 8px; height: 8px; border: 2px solid var(--muted); border-radius: 50%; }
.district.visited .district-dot { border-color: var(--route); background: var(--route); }
.district.current .district-dot { border-color: var(--route); background: var(--route); box-shadow: 0 0 0 5px color-mix(in srgb, var(--route) 18%, transparent); }
.district p { margin: 2px 0 0; color: var(--muted); font-size: .75rem; }
.district > span:last-child { color: var(--muted); font: .72rem ui-monospace, monospace; }
.danger { margin-top: 20px; color: #d77; }
dialog { width: min(calc(100% - 36px), 460px); padding: 27px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
dialog::backdrop { background: rgba(5,8,5,.8); backdrop-filter: blur(3px); }
dialog p:not(.eyebrow) { color: var(--muted); line-height: 1.5; }
#account-dialog { max-height: calc(100vh - 36px); overflow-y: auto; }
.event-actions { display: grid; gap: 7px; margin-top: 18px; }
.event-actions button { text-align: left; }
.event-actions button strong { display: block; color: var(--acid); }
.event-actions button span { display: block; margin-top: 3px; color: var(--muted); font-size: .75rem; font-weight: 500; }
.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: 430px) { .market-row { grid-template-columns: 34px 1fr 56px; }.item-price { grid-column: 2 / 4; text-align: left; }.direct-actions, .advanced-order { grid-column: 2 / 4; }.stop-status { grid-template-columns: 1fr; } }
@media (min-width: 560px) { .market-row { grid-template-columns: 36px 1fr 66px 80px; }.direct-actions, .advanced-order, .order-rule, .trade-actions { grid-column: 2 / 5; }.advanced-order .order-rule, .advanced-order .trade-actions { grid-column: auto; } }