@font-face { font-family: Poppins; font-weight: 800; font-display: swap; src: url(/fonts/poppins-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 900; font-display: swap; src: url(/fonts/poppins-latin-900-normal.woff2) format("woff2"); }
@font-face { font-family: Figtree; font-weight: 500; font-display: swap; src: url(/fonts/figtree-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Figtree; font-weight: 600; font-display: swap; src: url(/fonts/figtree-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Figtree; font-weight: 700; font-display: swap; src: url(/fonts/figtree-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: Figtree; font-weight: 800; font-display: swap; src: url(/fonts/figtree-latin-800-normal.woff2) format("woff2"); }

/* RuralPass-style: near-black greens, heavy Poppins headlines, yellow CTAs,
   green and orange accents. One dark theme — the 3D city supplies the light. */
:root {
  --green: #3fa34d;
  --green-2: #5fd46d;
  --green-soft: rgba(63, 163, 77, 0.16);
  --gold: #ffd60a;
  --gold-soft: rgba(255, 214, 10, 0.13);
  --orange: #f0943a;
  --red: #ef4444;
  --ink: #f4f2ec;
  --ink-2: #c9c6bd;
  --ink-3: #8f8c84;
  --line: rgba(255, 255, 255, 0.1);
  --surface: rgba(7, 11, 8, 0.82);
  --surface-solid: #0f1511;
  --surface-2: #19211b;
  --bg: #070b08;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --radius: 22px;
  --radius-sm: 12px;
  --font: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: Poppins, Figtree, system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 15px/1.45 var(--font); color: var(--ink); background: var(--bg); overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.center { text-align: center; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.tight { gap: 5px; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }
.card, .glass { background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius); box-shadow: var(--shadow); }
:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 2px; }

#stage { position: fixed; inset: 0; touch-action: none; }
#stage canvas { display: block; width: 100%; height: 100%; }

.map-controls { display: none; position: fixed; z-index: 11; top: 90px; right: 16px; padding: 6px; width: 112px; gap: 3px; }
body.map-mode:not(.onboarding):not(.sheet-open):not(.in-room) .map-controls { display: grid; }
.map-controls button { min-height: 40px; border: 0; border-radius: 11px; background: transparent; color: var(--ink); font-weight: 800; font-size: 23px; line-height: 1; }
.map-controls button:hover, .map-controls button:focus-visible { background: var(--surface-2); }
.map-controls .map-place { font-size: 12px; line-height: 1.15; }
.map-control-rule { height: 1px; background: var(--line); margin: 2px 5px; }

/* ── Icons & animation ─────────────────────────────────────────── */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; overflow: visible; }
.ic.zap { color: #f59e0b; } .ic.gold { color: var(--gold); } .ic.up { color: var(--green-2); }
.ic.filled use { fill: currentColor; }
.anim-pulse { animation: ic-pulse 1.6s ease-in-out infinite; }
.anim-bounce { animation: ic-bounce 0.9s ease-in-out infinite; }
.anim-bob { animation: ic-bob 2.4s ease-in-out infinite; }
.anim-wiggle { animation: ic-wiggle 0.9s ease-in-out infinite; }
.anim-spin { animation: ic-spin 1s linear infinite; }
.anim-wave { animation: ic-wave 1s ease-in-out infinite; transform-origin: 30% 90%; }
.anim-pop { animation: ic-pop 0.5s ease-out; }
button:hover > .anim-hover, button[aria-current="true"] > .anim-hover { animation: ic-bounce 0.6s ease-in-out; }
@keyframes ic-pulse { 50% { opacity: 0.45; transform: scale(0.9); } }
@keyframes ic-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } }
@keyframes ic-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes ic-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes ic-spin { to { transform: rotate(360deg); } }
@keyframes ic-wave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-16deg); } 60% { transform: rotate(10deg); } }
@keyframes ic-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: ic-pulse 1.4s infinite; }
.live-dot.green { background: #22c55e; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-solid); font-weight: 650; min-height: 42px; transition: transform 0.08s, background 0.15s; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #0e2a1b; font-weight: 800; }
.btn.primary:hover { background: #ffe14d; }
.btn.gold { background: var(--orange); border-color: var(--orange); color: #1d1206; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 14px; border-radius: 12px; }
.btn.block { width: 100%; justify-content: space-between; text-align: left; }
.btn .meta { color: var(--ink-3); font-weight: 500; font-size: 12.5px; }
.btn.primary .meta, .btn.gold .meta { color: inherit; opacity: 0.85; }
.icon-btn { width: 38px; height: 38px; border-radius: 12px; border: 0; background: transparent; display: grid; place-items: center; flex: none; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn .ic { width: 19px; height: 19px; }
.icon-btn.big { width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: #0e2a1b; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-solid); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.chip:hover { background: var(--surface-2); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }

/* ── HUD ───────────────────────────────────────────────────────── */
.hud-wrap { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 10; display: grid; justify-items: center; gap: 8px; pointer-events: none; width: min(720px, calc(100% - 24px)); }
.hud-wrap > * { pointer-events: auto; }
.hud { display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 16px; border-radius: 99px; font-size: 14px; }
.hud:empty { display: none; }
.hud-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hud-item.strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.sep { width: 1px; height: 18px; background: var(--line); }
.sound-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-2); display: grid; place-items: center; }
.sound-btn.on { background: var(--green); color: #fff; }
.cash { padding: 7px 14px; border-radius: 99px; background: var(--surface-2); font-weight: 750; font-variant-numeric: tabular-nums; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; width: 16px; }
.eq i { display: block; width: 3px; background: currentColor; border-radius: 2px; animation: eq 0.9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -0.3s; } .eq i:nth-child(3) { animation-delay: -0.6s; } .eq i:nth-child(4) { animation-delay: -0.15s; }
.eq.big { height: 30px; width: 34px; gap: 4px; color: var(--green-2); } .eq.big i { width: 6px; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.ticker { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 16px; font-size: 13.5px; max-width: 100%; }
.ticker .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ticker .ago { color: var(--ink-3); font-size: 12px; flex: none; }
.tick-ic { color: var(--gold); }

.mini { position: fixed; top: 12px; left: 12px; z-index: 10; display: flex; gap: 10px; align-items: center; padding: 8px 12px 8px 8px; }
.mini-me { border: 0; padding: 0; background: none; }
.mini-face { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 19px; text-transform: uppercase; border: 3px solid #f59e0b; }
.mini-stats { display: grid; gap: 2px; font-size: 13px; }
.meter { display: inline-block; width: 90px; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; transition: width 0.4s; }
.loc { display: inline-flex; gap: 4px; align-items: center; border: 0; background: none; padding: 0; color: var(--ink-2); font-size: 12.5px; font-weight: 600; max-width: 170px; }
.loc:hover { color: var(--green); }

/* ── 3D labels ─────────────────────────────────────────────────── */
.labels { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.labels > * { position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform; }
.wlabel { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; border: 0; background: rgba(255, 255, 255, 0.95); color: #111827; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.wlabel:hover { filter: brightness(0.97); }
.wl-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; }
.wl-ic .ic { width: 13px; height: 13px; }
.wlabel.featured { font-size: 13.5px; padding-right: 12px; }
.wlabel.featured .wl-ic { width: 26px; height: 26px; }
.wlabel.home { background: rgba(255, 255, 255, 0.85); font-weight: 600; }
.wlabel.soon { background: #facc15; }
.wl-soon { font-size: 11px; font-weight: 700; color: #713f12; }
.wl-status { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 99px; }
.wl-status:empty { display: none; }
.wl-status.open { background: #dcfce7; color: #15803d; }
.wl-status.closed { background: #f1f5f9; color: #64748b; }
.labels.far .wlabel:not(.featured):not(.soon) { display: none; }
.dlabel { font-size: 15px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(17, 24, 39, 0.55); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); pointer-events: none; white-space: nowrap; }
.you-label { padding: 2px 9px; border-radius: 99px; background: #22c55e; color: #fff; font-size: 12px; font-weight: 800; pointer-events: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.olabel { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; border: 0; background: rgba(255, 255, 255, 0.95); color: #111827; font-size: 12px; font-weight: 650; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); white-space: nowrap; }
.olabel .ic { width: 14px; height: 14px; color: #0b6b45; }
.ntag { padding: 2px 8px; border-radius: 8px; border: 0; background: rgba(17, 24, 39, 0.72); color: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ntag.me { background: #22c55e; }
.bubble3d { max-width: 200px; width: max-content; padding: 6px 10px; border-radius: 14px; background: #fff; color: #111827; font-size: 13px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); overflow-wrap: anywhere; pointer-events: none; display: flex; gap: 4px; align-items: center; }
.bubble3d .ic { color: var(--gold); width: 18px; height: 18px; }

/* ── Bottom card & tabs ────────────────────────────────────────── */
.place-card { position: fixed; z-index: 11; left: 50%; bottom: 92px; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); padding: 14px; display: grid; gap: 10px; }
.card-head { display: flex; align-items: center; gap: 10px; }
.card-head b { font-size: 16.5px; }
.card-head small { display: block; }
.status.open { color: var(--green-2); } .status.closed { color: var(--ink-3); } .status.soon { color: #a16207; }
.cat-dot { width: 40px; height: 40px; border-radius: 14px; display: inline-grid; place-items: center; flex: none; color: #fff; background: var(--c, var(--green)); }
.cat-dot .ic { width: 20px; height: 20px; }
.blurb { color: var(--ink-2); font-size: 14px; }
.tonight { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; background: linear-gradient(90deg, #3b1a07, #7c2d12); color: #fff; font-size: 13.5px; }
.tonight .ic { color: #fde68a; }
.here-tag { display: inline-flex; gap: 4px; align-items: center; color: #15803d; font-weight: 700; font-size: 13px; }
.tabbar { position: fixed; z-index: 12; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; padding: 6px; gap: 4px; border-radius: 22px; }
.tabbar button { position: relative; border: 0; background: transparent; border-radius: 16px; padding: 7px 22px; display: grid; justify-items: center; gap: 2px; min-width: 90px; color: var(--ink-2); }
.tabbar button .ic { width: 21px; height: 21px; }
.tabbar button small { font-size: 12px; font-weight: 650; }
.tabbar button:hover { background: var(--surface-2); }
.tabbar button[aria-current="true"] { background: var(--gold); color: #0e2a1b; }
.dot { position: absolute; top: 6px; right: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); border: 2px solid var(--surface-solid); }

/* In a room the card holds the chat. */
.room-log { display: grid; gap: 4px; font-size: 13.5px; }
.log-line { display: flex; gap: 6px; align-items: baseline; }
.log-line .who { border: 0; background: none; padding: 0; font-weight: 750; color: var(--green); flex: none; }
.log-line .chat-body { overflow-wrap: anywhere; min-width: 0; }
.log-line.system { color: var(--ink-3); font-style: italic; font-size: 12.5px; }
.log-line .report { width: 26px; height: 26px; margin-left: auto; opacity: 0.4; }
.log-line .report:hover { opacity: 1; }
.chat-input { display: flex; gap: 6px; align-items: center; }
.chat-input input { flex: 1; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.chat-input .send { background: var(--gold); color: #0e2a1b; border-radius: 50%; }
.emote-bar { display: flex; gap: 0; }
.room-menu { position: fixed; z-index: 40; width: 240px; padding: 6px; display: grid; gap: 2px; background: var(--surface-solid); }
.menu-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 2px 10px; }
.menu-item { display: flex; align-items: center; gap: 8px; border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 10px; font-size: 14px; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.menu-sub { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: var(--surface-2); grid-template-columns: auto 1fr; align-items: center; }
.menu-sub .row { grid-column: 1 / -1; gap: 4px; }
.pad { padding: 8px 10px; }
.challenge { position: fixed; z-index: 60; top: 80px; left: 50%; transform: translateX(-50%); width: min(380px, calc(100% - 24px)); padding: 14px; display: grid; gap: 10px; background: var(--surface-solid); border: 2px solid var(--gold); }
.challenge .ic { color: var(--red); width: 22px; height: 22px; }
body.in-room .ticker { display: none; }

/* ── Phone screens ─────────────────────────────────────────────── */
.sheet-head { display: flex; align-items: center; gap: 6px; padding: 14px 10px 10px 16px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { flex: 1; font-size: 18px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.sheet-head h2 .cat-dot { width: 32px; height: 32px; border-radius: 10px; }
.sheet-body { overflow-y: auto; padding: 14px 16px 24px; display: grid; gap: 16px; align-content: start; overscroll-behavior: contain; }
.section { display: grid; gap: 8px; }
.section > h3 { font: 800 11.5px/1.2 var(--font); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
.notice { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); font-size: 13.5px; }
.notice.gold { background: var(--gold-soft); } .notice.green { background: var(--green-soft); }
.tabs { display: flex; gap: 4px; background: var(--surface-2); border-radius: 12px; padding: 3px; }
.tabs button { flex: 1; border: 0; background: transparent; padding: 8px; border-radius: 10px; font-weight: 650; color: var(--ink-2); font-size: 13.5px; }
.tabs button[aria-pressed="true"] { background: #2a352c; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.stat b { display: block; font-size: 16px; }
.stat small { color: var(--ink-3); }
.item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.item .e { display: grid; place-items: center; width: 34px; color: var(--green-2); flex: none; }
.item .e .ic { width: 22px; height: 22px; }
.item .t { flex: 1; min-width: 0; }
.item .t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .t small { color: var(--ink-3); }
.person { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border: 0; background: none; width: 100%; text-align: left; border-radius: 12px; }
.person:hover { background: var(--surface-2); }
.person.current { background: var(--green-soft); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; flex: none; text-transform: uppercase; }
.avatar.lg { width: 58px; height: 58px; font-size: 22px; }
.party-tag { font-size: 10.5px; font-weight: 750; padding: 1px 6px; border-radius: 6px; color: #fff; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; gap: 5px; align-items: center; padding: 4px 10px; border-radius: 99px; background: var(--gold-soft); font-size: 12.5px; font-weight: 650; }
.badge.trait-badge { background: var(--green-soft); }
.badge.tiny { font-size: 10.5px; padding: 1px 7px; margin-left: 6px; }
.badge.rare { background: linear-gradient(90deg, #facc15, #f472b6); color: #3b0764; }
.live-count { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 750; color: var(--red); }
.rank { width: 22px; color: var(--ink-3); text-align: right; } .rank .ic { width: 18px; height: 18px; }
.rank-1 { color: #d4a017; } .rank-2 { color: #9ca3af; } .rank-3 { color: #b4703c; }
.post { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.post-head { display: flex; align-items: center; gap: 8px; }
.post-head .who { border: 0; background: none; padding: 0; font-weight: 750; }
.post-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.post-actions { display: flex; gap: 4px; }
.post-actions button { display: inline-flex; gap: 4px; align-items: center; border: 0; background: none; color: var(--ink-3); padding: 3px 7px; border-radius: 7px; font-size: 13px; }
.post-actions button:hover { background: var(--surface-2); color: var(--ink); }
.post-actions button.on { color: var(--red); }
.composer { display: grid; gap: 8px; }
textarea, input[type="text"], input[type="password"], input:not([type]), select { width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-solid); }
textarea { resize: vertical; min-height: 70px; }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
.bar-track { height: 10px; border-radius: 99px; display: flex; overflow: hidden; background: var(--line); }
.bar-track i { display: block; height: 100%; }
.legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; background: var(--c); }
.council { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: center; font-size: 13px; }
.race-result { display: grid; gap: 4px; }
.race-result div { display: flex; gap: 10px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.race-result div.you { background: var(--green); color: #fff; font-weight: 700; }
.msgs { display: grid; gap: 6px; }
.msg { max-width: 82%; padding: 8px 12px; border-radius: 14px; background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; justify-self: start; }
.msg.mine { background: var(--green); color: #fff; justify-self: end; }
.now-playing { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.now-playing b { display: block; }
.np-ic { width: 30px; height: 30px; color: var(--green-2); }
input[type="range"] { flex: 1; accent-color: var(--green); }

/* ── Onboarding ────────────────────────────────────────────────── */
.onboard { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: linear-gradient(180deg, rgba(7, 11, 8, 0.1), rgba(7, 11, 8, 0.7)); overflow-y: auto; }
body.onboarding .labels, body.onboarding .hud-wrap, body.onboarding #mini, body.onboarding #tabs, body.onboarding #card { display: none !important; }
.ob-card { position: relative; width: min(440px, 100%); background: var(--surface-solid); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); padding: 24px; display: grid; gap: 14px; }
.ob-card h2 { font-size: 24px; }
.ob-card label { display: grid; gap: 5px; font-weight: 650; font-size: 13.5px; }
.ob-card label.check { display: flex; gap: 10px; align-items: center; font-weight: 500; font-size: 14px; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); }
.ob-card label.check input { width: 20px; height: 20px; accent-color: var(--green); }
.ob-back { position: absolute; top: 14px; right: 14px; }
.ob-brand { display: flex; gap: 14px; align-items: center; }
.ob-brand h1 { font-size: 30px; letter-spacing: -0.02em; }
.brand-mark { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--gold); color: #0e2a1b; font: 900 30px/1 var(--display); flex: none; }
.block-c { width: 100%; }
.error { color: var(--red); font-size: 13.5px; min-height: 1em; }
.ob-creator { width: min(900px, 100%); grid-template-columns: 300px 1fr; align-items: start; }
.ob-left { display: grid; gap: 10px; position: sticky; top: 0; }
.ob-preview { width: 100%; height: 340px; border-radius: 20px; background: radial-gradient(circle at 50% 35%, #2a3b2d, #0b120d); }
.ob-right { display: grid; gap: 14px; max-height: min(78vh, 720px); overflow-y: auto; padding-right: 4px; }
.ob-field { display: grid; gap: 8px; }
.ob-label { font-weight: 750; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface-solid); background: var(--c); box-shadow: 0 0 0 1px var(--line); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--gold); }
.opts { display: flex; gap: 6px; flex-wrap: wrap; }
.opt { padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-solid); font-weight: 600; font-size: 13.5px; }
.opt[aria-checked="true"] { background: var(--gold); color: #0e2a1b; border-color: var(--gold); }
.traits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.trait { display: grid; gap: 2px; text-align: left; padding: 10px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface-solid); }
.trait .ic { width: 20px; height: 20px; color: var(--green); }
.trait small { color: var(--ink-3); font-size: 12px; line-height: 1.3; }
.trait[aria-pressed="true"] { border-color: var(--gold); background: var(--green-soft); }
.trait-count { padding: 1px 8px; border-radius: 99px; background: var(--surface-2); color: var(--ink); text-transform: none; letter-spacing: 0; }
.ob-dice { width: min(560px, 100%); }
.dice-row { display: grid; grid-template-columns: 1fr 180px; gap: 16px; align-items: center; }
.dice-stage { height: 170px; display: grid; place-items: center; perspective: 600px; }
.dice { position: relative; width: 90px; height: 90px; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1.2); transform: rotateX(-25deg) rotateY(35deg); }
.dice.rolling { animation: roll 0.45s linear infinite; transition: none; }
@keyframes roll { from { transform: rotateX(0) rotateY(0) rotateZ(0); } to { transform: rotateX(360deg) rotateY(720deg) rotateZ(180deg); } }
.dice[data-face="1"] { transform: rotateX(0) rotateY(0); } .dice[data-face="2"] { transform: rotateY(-90deg); } .dice[data-face="3"] { transform: rotateY(180deg); }
.dice[data-face="4"] { transform: rotateY(90deg); } .dice[data-face="5"] { transform: rotateX(-90deg); } .dice[data-face="6"] { transform: rotateX(90deg); }
.face { position: absolute; inset: 0; border-radius: 18px; background: #f4f2ec; border: 2px solid #d6d3c9; display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px; gap: 4px; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.08); }
.face i { width: 14px; height: 14px; border-radius: 50%; background: #0b6b45; place-self: center; }
.f1 { transform: translateZ(45px); } .f2 { transform: rotateY(90deg) translateZ(45px); } .f3 { transform: rotateY(180deg) translateZ(45px); }
.f4 { transform: rotateY(-90deg) translateZ(45px); } .f5 { transform: rotateX(90deg) translateZ(45px); } .f6 { transform: rotateX(-90deg) translateZ(45px); }
.f1 i { grid-area: 2 / 2; }
.odds { display: grid; gap: 3px; font-size: 13px; }
.odds-row { display: flex; justify-content: space-between; padding: 3px 8px; border-radius: 8px; background: var(--surface-2); }
.odds-row.rare { background: var(--gold-soft); font-weight: 700; }
.roll-result { display: grid; gap: 6px; justify-items: start; padding: 14px; border-radius: 16px; background: var(--green-soft); }
.roll-result h3 { font-size: 26px; }

.toasts { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 70; display: grid; gap: 8px; width: min(440px, calc(100% - 24px)); pointer-events: none; }
.toast { background: #f4f2ec; color: #0e2a1b; font-weight: 600; padding: 11px 15px; border-radius: 14px; box-shadow: var(--shadow); font-size: 14px; }
.toast.err { background: var(--red); }
.noscript { position: fixed; inset: 40% 20px auto; text-align: center; font-weight: 650; }

/* Keep the HUD and card clear of the side sheet on wide screens. */
@media (min-width: 900px) {
  body.sheet-open .place-card, body.sheet-open .tabbar, body.sheet-open .hud-wrap { left: calc((100% - 420px) / 2); }
}

/* ── Phones ────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  body { font-size: 14px; }
  .map-controls { top: 72px; right: 8px; width: 92px; }
  .hud-wrap { top: 8px; width: calc(100% - 16px); }
  .hud { gap: 8px; font-size: 13px; padding-left: 12px; }
  .hide-sm { display: none !important; }
  .mini { top: 62px; left: 8px; padding: 5px 10px 5px 5px; }
  .mini-face { width: 34px; height: 34px; font-size: 15px; border-width: 2px; }
  .meter { width: 64px; }
  .loc { display: none; }
  .place-card { bottom: 82px; width: calc(100% - 16px); padding: 12px; }
  .tabbar { bottom: 8px; width: calc(100% - 16px); justify-content: space-between; }
  .tabbar button { min-width: 0; flex: 1; padding: 7px 4px; }
  .ob-creator { grid-template-columns: 1fr; }
  .ob-left { position: static; }
  .ob-preview { height: 240px; }
  .ob-right { max-height: none; overflow: visible; }
  .dice-row { grid-template-columns: 1fr; }
  .emote-bar .icon-btn { width: 32px; }
  .card-head b { font-size: 15px; }
  .card-head { flex-wrap: wrap; }
  .place-card .emote-bar { order: 5; width: 100%; justify-content: space-between; }
  .place-card .room-log { max-height: 66px; overflow: hidden; }
  .toasts { top: 112px; }
  .ticker { display: none !important; }
}

/* ── Loading ───────────────────────────────────────────────────── */
.loading { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #13301c, var(--bg) 70%); transition: opacity 0.6s; }
.loading.done { opacity: 0; pointer-events: none; }
.loading-in { display: grid; gap: 16px; justify-items: center; width: min(320px, 80vw); }
.load-brand { display: grid; justify-items: center; font-family: var(--display); line-height: 0.9; }
.load-brand b { font-size: 44px; font-weight: 900; letter-spacing: -0.02em; }
.load-brand span { font-size: 44px; font-weight: 900; color: var(--gold); letter-spacing: 0.18em; }
.loading-track { width: 100%; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.loading-track i { display: block; height: 100%; width: 5%; background: linear-gradient(90deg, var(--green), var(--gold)); transition: width 0.4s; }
.loading small { color: var(--ink-3); }

/* ── District banner (entering a new area) ─────────────────────── */
.district-banner { position: fixed; z-index: 9; top: 110px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; pointer-events: none; opacity: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
.district-banner small { font-weight: 800; letter-spacing: 0.2em; font-size: 11px; color: var(--gold); text-transform: uppercase; }
.district-banner b { font: 900 clamp(28px, 6vw, 52px)/1 var(--display); letter-spacing: -0.01em; }
.district-banner.show { animation: banner 3.2s ease-out; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, 10px); } 12%, 70% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
body:not(.playing) .district-banner { display: none; }

/* ── Touch joystick & run button ───────────────────────────────── */
.touch-joy, .run-btn { display: none; }
@media (pointer: coarse) {
  body.playing:not(.map-mode):not(.in-room):not(.sheet-open) .touch-joy { display: block; position: fixed; z-index: 8; left: 18px; bottom: 96px; width: 120px; height: 120px; touch-action: none; }
  body.playing:not(.map-mode):not(.in-room):not(.sheet-open) .run-btn { display: grid; position: fixed; z-index: 8; right: 20px; bottom: 112px; width: 64px; height: 64px; border-radius: 50%; place-items: center; border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(7, 11, 8, 0.55); color: var(--gold); touch-action: none; }
  .run-btn.on { background: var(--gold); color: #0e2a1b; }
  .run-btn .ic { width: 26px; height: 26px; }
  .joy-base { position: absolute; inset: 0; border-radius: 50%; background: rgba(7, 11, 8, 0.45); border: 2px solid rgba(255, 255, 255, 0.22); }
  .joy-knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: rgba(244, 242, 236, 0.85); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
  body.sheet-open #card:not([hidden]) ~ .touch-joy { display: none; }
}

/* ── The phone ─────────────────────────────────────────────────── */
.phone { position: fixed; z-index: 20; right: 18px; bottom: 18px; top: 18px; width: 380px; display: grid; align-items: end; pointer-events: none; }
.phone-frame { pointer-events: auto; position: relative; height: min(100%, 790px); display: flex; flex-direction: column; overflow: hidden; border-radius: 46px; background: #0b100c; border: 10px solid #1b1d1c; box-shadow: 0 0 0 2px #3a3d3b, 0 30px 70px rgba(0, 0, 0, 0.6); animation: phone-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
@keyframes phone-in { from { transform: translateY(40px) scale(0.96); opacity: 0; } }
.phone-status { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px 4px; font-size: 13px; font-weight: 700; position: relative; flex: none; }
.notch { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); width: 104px; height: 28px; border-radius: 20px; background: #000; }
.phone-sig { display: inline-flex; gap: 2px; align-items: flex-end; font-size: 11.5px; }
.phone-sig i { display: block; width: 3px; background: var(--ink); border-radius: 1px; }
.phone-sig i:nth-child(1) { height: 4px; } .phone-sig i:nth-child(2) { height: 6px; } .phone-sig i:nth-child(3) { height: 8px; } .phone-sig i:nth-child(4) { height: 10px; margin-right: 4px; }
.phone .sheet-head { border-bottom: 1px solid var(--line); padding: 8px 10px 8px 8px; }
.home-bar { flex: none; align-self: center; width: 130px; height: 5px; margin: 8px 0 10px; padding: 0; border: 0; border-radius: 99px; background: rgba(244, 242, 236, 0.7); }
.home-bar:hover { background: var(--gold); }
.phone .sheet-body { flex: 1; }
.phone.home .sheet-head { display: none; }
.phone.home .phone-frame { background: radial-gradient(120% 70% at 20% 0%, #1c4d27 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, #5b3110 0%, transparent 60%), #070b08; }
.widget { display: grid; gap: 2px; padding: 16px 18px; border-radius: 24px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.widget small { font-weight: 800; letter-spacing: 0.14em; font-size: 10.5px; color: var(--gold); }
.widget b { font: 900 34px/1.05 var(--display); }
.widget span { color: var(--ink-2); font-size: 13px; }
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 6px; }
.app { display: grid; justify-items: center; gap: 6px; border: 0; background: none; padding: 0; color: var(--ink); }
.app small { font-size: 11px; font-weight: 600; white-space: nowrap; }
.app-ic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000)); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); transition: transform 0.15s; flex: none; }
.app-ic .ic { width: 27px; height: 27px; }
.app:hover .app-ic { transform: translateY(-3px) scale(1.04); }
.app:active .app-ic { transform: scale(0.92); }
.sponsored { display: grid; gap: 8px; }
.sponsored > small { font-weight: 800; letter-spacing: 0.14em; font-size: 10px; color: var(--ink-3); }
.ad { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ad:hover { background: rgba(255, 255, 255, 0.1); }
.ad .app-ic { width: 46px; height: 46px; border-radius: 13px; color: #0e2a1b; }
.ad small { color: var(--ink-3); }
.balance { display: grid; gap: 2px; padding: 18px; border-radius: 22px; background: linear-gradient(135deg, #1f6b2c, #0f3d18); }
.balance small { font-weight: 800; letter-spacing: 0.14em; font-size: 10.5px; color: var(--gold); }
.balance b { font: 900 30px/1.1 var(--display); }
.balance span { color: rgba(255, 255, 255, 0.75); font-size: 13px; }
@media (max-width: 720px) {
  .phone { inset: 0; width: 100%; padding: 10px 10px 0; }
  .phone-frame { height: 92%; border-radius: 34px 34px 0 0; border-bottom: 0; }
  .apps { gap: 14px 4px; } .app-ic { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── Map pins (HTML overlay) ───────────────────────────────────── */
.pins { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.pin { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; pointer-events: none; will-change: transform; }
.pin-ic { pointer-events: auto; position: absolute; left: -17px; top: -40px; width: 34px; height: 34px; border-radius: 50% 50% 50% 6px; transform: rotate(-45deg); display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 60%); border: 2.5px solid #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); cursor: pointer; animation: pin-bob 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); transition: transform 0.15s; }
.pin-ic .ic { width: 17px; height: 17px; transform: rotate(45deg); }
.pin.featured .pin-ic { left: -22px; top: -50px; width: 44px; height: 44px; }
.pin.featured .pin-ic .ic { width: 22px; height: 22px; }
.pin.featured .pin-ic::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid var(--c); opacity: 0; animation: pin-pulse 2.4s ease-out infinite; animation-delay: var(--d, 0s); }
.pin.look .pin-ic { filter: saturate(0.6); }
.pin-name { position: absolute; left: 0; top: -58px; transform: translate(-50%, -100%) scale(0.9); padding: 6px 11px; border-radius: 10px; background: rgba(7, 11, 8, 0.92); color: var(--ink); font: 700 13px/1.2 var(--font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.pin.featured .pin-name { top: -68px; }
.pin-name small { display: block; color: var(--gold); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.pin-name::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pin:hover, .pin:focus-visible { z-index: 5; }
.pin:hover .pin-ic, .pin:focus-visible .pin-ic { animation-play-state: paused; transform: rotate(-45deg) scale(1.18); }
.pin:hover .pin-name, .pin:focus-visible .pin-name { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.pins.near .pin.featured .pin-name { opacity: 1; background: #f4f2ec; color: #173123; border-color: rgba(10, 35, 20, 0.16); pointer-events: auto; cursor: pointer; }
.pins.near .pin.featured .pin-name small { color: #795900; }
.pin:focus-visible { outline: none; }
.pins.far .pin:not(.featured) .pin-ic { transform: rotate(-45deg) scale(0.8); }
@keyframes pin-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes pin-pulse { 0% { opacity: 0.8; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.5); } }
.dname { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; text-align: center; transform-origin: center; scale: var(--label-scale, 1); }
.dname b { display: block; translate: -50% -50%; font: 900 clamp(13px, 1.4vw, 20px)/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--c); text-shadow: 0 2px 0 rgba(7, 11, 8, 0.85), 0 0 14px rgba(7, 11, 8, 0.75); white-space: nowrap; }
.dname.soon b { font-size: clamp(11px, 1vw, 13px); color: #c9c6bd; opacity: 0.85; }
.dname.soon small { display: inline-block; translate: -50% -40%; padding: 1px 7px; border-radius: 99px; background: var(--gold); color: #0e2a1b; font: 800 9px/1.5 var(--font); letter-spacing: 0.06em; text-transform: uppercase; }
body.in-room .pins, body.onboarding .pins { display: none; }
img.brand-mark { object-fit: cover; padding: 0; background: none; border-radius: 14px; }
.load-logo { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); animation: logo-in 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes logo-in { from { transform: scale(0.6) rotate(-8deg); opacity: 0; } }
/* ── Guests ────────────────────────────────────────────────────── */
.guest-bar { position: fixed; z-index: 12; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(640px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 10px 10px 10px 16px; border-radius: 20px; }
.guest-bar .pitch { display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.guest-bar .pitch .ic { color: var(--gold); width: 20px; height: 20px; }
.guest-bar .pitch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.guest .place-card { bottom: 86px; }
.pitches { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pitches li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; animation: pitch-in 0.45s ease-out both; animation-delay: calc(var(--i) * 0.08s); }
.pitches .ic { color: var(--gold); flex: none; }
@keyframes pitch-in { from { opacity: 0; transform: translateX(-8px); } }
@media (max-width: 720px) { .guest-bar { flex-direction: column; align-items: stretch; } .guest-bar .row { justify-content: flex-end; } }
.cookie-bar { position: fixed; z-index: 80; left: 12px; bottom: 12px; max-width: 380px; display: flex; gap: 10px; align-items: center; padding: 10px 10px 10px 14px; border-radius: 16px; font-size: 13px; }
.cookie-bar .ic { color: var(--gold); flex: none; }
@media (max-width: 720px) { .cookie-bar { left: 8px; right: 8px; top: 120px; bottom: auto; max-width: none; } }
@media (max-width: 720px) { body.guest .place-card { bottom: 132px; } }
.opt:disabled { opacity: 0.35; cursor: not-allowed; }
.trait small.pro { color: var(--green-2); }
.trait small.con { color: #f8a07a; }
.ob-landing { width: min(360px, 100%); gap: 16px; padding: 26px 24px 20px; }
.ob-links { display: flex; justify-content: center; gap: 6px; }
.ob-links button { border: 0; background: none; color: var(--ink-2); font-weight: 700; padding: 8px 12px; border-radius: 10px; }
.ob-links button:hover { color: var(--ink); background: var(--surface-2); }
.ob-links button + button::before { content: ""; }
.cookie-bar { padding: 6px 6px 6px 14px; gap: 12px; border-radius: 99px; font-size: 12.5px; color: var(--ink-2); }
.cookie-bar .btn { min-height: 30px; padding: 4px 14px; border-radius: 99px; }
@media (max-width: 720px) { .cookie-bar { left: 50%; right: auto; transform: translateX(-50%); top: 112px; white-space: nowrap; } }
.trait small.pro::before { content: "▲ "; font-size: 9px; }
.trait small.con::before { content: "▼ "; font-size: 9px; }
/* creator: breathing room on both sides so swatch rings and option pills never clip */
.ob-creator { padding: 26px 30px; gap: 26px; }
.ob-right { padding: 6px 14px 12px 8px; gap: 16px; scrollbar-gutter: stable; }
.ob-left { padding-left: 2px; }
.swatches { padding: 4px; gap: 10px; }
.opts { gap: 7px; }
.ob-right > .row.end { position: sticky; bottom: -12px; padding: 12px 0 4px; background: linear-gradient(transparent, var(--surface-solid) 35%); }
@media (max-width: 720px) { .ob-creator { padding: 20px 18px; } .ob-right { padding: 4px 6px 10px; } }
.ob-landing .ob-brand { flex-direction: column; text-align: center; gap: 10px; }
.ob-landing .ob-brand .brand-mark { width: 72px; height: 72px; border-radius: 20px; }
.ob-landing .ob-brand h1 { font-size: 28px; }
.ob-links button { white-space: nowrap; }
/* the name tag keeps its size when the pin shrinks */
.pin-name { transform-origin: 50% 100%; transform: translate(-50%, -100%) scale(calc(var(--inv, 1) * 0.9)); }
.pin:hover .pin-name, .pin:focus-visible .pin-name { transform: translate(-50%, -100%) scale(var(--inv, 1)); }
.pins.near .pin.featured .pin-name { transform: translate(-50%, -100%) scale(var(--inv, 1)); }
.aura-ic { color: #7dd3fc; margin-left: 6px; }
.challenge.vibe { border-color: #7dd3fc; }
.challenge.vibe .ic { color: #7dd3fc; }