/* PH Lifestyle design system (docs/UI-STYLE.md): white and one green, with
   near-black text and greys, Apple-style controls, Poppins. Sheets and the
   phone are white; what floats over the street is smoked glass (below). Every
   screen uses these tokens; the 3D world and app logos keep their own colours. */
:root {
  /* Colour: ink, greys, white, and one green (Nigeria green). */
  --ink: #1d1d1f;
  --ink-2: #424245;
  --muted: #6e6e73;
  --faint: #86868b;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #ebebf0;
  --fill: rgba(120, 120, 128, 0.12);
  --fill-strong: rgba(120, 120, 128, 0.2);
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);
  --material: rgba(255, 255, 255, 0.78);
  --material-strong: rgba(255, 255, 255, 0.94);
  --accent: #008751;
  --accent-rgb: 0, 135, 81;
  --accent-hover: #007a49;
  --accent-press: #006b40;
  --accent-soft: rgba(var(--accent-rgb), 0.1);
  --accent-line: rgba(var(--accent-rgb), 0.35);
  --on-accent: #ffffff;
  --on-ink: #ffffff; /* text on an ink fill; dark where ink turns white (smoked glass) */
  --danger-rgb: 215, 0, 21; /* only the faint outline on illegal actions (.act.bad) */
  --scrim: rgba(0, 0, 0, 0.28);
  /* Depth. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
  --blur: saturate(180%) blur(20px);
  /* Shape: one radius scale. */
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  --radius: var(--r-lg);
  /* Controls: Apple's three heights. */
  --h-lg: 50px;
  --h: 44px;
  --h-sm: 32px;
  /* Type: Poppins, tracked in by 1%. */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --track: -0.01em;
  --track-tight: -0.02em;
  /* Older names, kept so every rule written before this lands on the palette. */
  --glass: var(--material);
  --glass-strong: var(--material-strong);
  --green: var(--accent);
  --green-deep: var(--accent);
  --gold: var(--accent);
  --gold-deep: var(--accent-press);
  --red: var(--ink);
  --blue: var(--accent);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; letter-spacing: var(--track); }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #9fb6c4;
  color: var(--ink);
  font: 400 15px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* --- Buttons: one system everywhere ------------------------------------ */
/* .btn is filled blue; add .tinted, .gray or .plain for the quieter kinds,
   .lg / .sm for size. Older class names (.big, button.gold, .danger) map on. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--h); padding: 0 18px; border: 0; border-radius: var(--r);
  background: var(--accent); color: var(--on-accent);
  font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color 0.15s, transform 0.1s, opacity 0.15s;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { background: var(--accent-press); transform: scale(0.98); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.btn.lg { min-height: var(--h-lg); font-size: 17px; }
.btn.sm { min-height: var(--h-sm); padding: 0 14px; border-radius: var(--r-pill); font-size: 13px; }
.btn.tinted { background: var(--accent-soft); color: var(--accent); }
.btn.tinted:hover { background: rgba(var(--accent-rgb), 0.14); }
.btn.gray { background: var(--fill); color: var(--ink); }
.btn.gray:hover { background: var(--fill-strong); }
.btn.plain { background: none; color: var(--accent); padding: 0 8px; }
.btn.plain:hover { background: var(--accent-soft); }
.btn.dark { background: var(--ink); color: var(--on-ink); }
.btn.dark:hover { background: #000; }
.btn.block { display: flex; width: 100%; }

#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }

/* --- Name tags, bubbles, doing chips --------------------------------- */
#tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.tagwrap {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transform-origin: 0 0;
  will-change: transform;
}
.tagwrap > * { translate: -50% 0; }
.tagwrap { translate: 0 -100%; }
.tag {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; border-radius: var(--r-pill);
  padding: 2px 8px 2px 6px;
  background: var(--material-strong); color: var(--ink);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.tag-me { background: var(--accent); color: #fff; }
.tag-npc { background: var(--material); color: var(--ink-2); font-weight: 500; }
.tag-badge { font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--fill); border-radius: var(--r-xs); padding: 1px 4px; }
.tag-me .tag-badge { background: rgba(255, 255, 255, 0.22); }
.tag-badge:empty { display: none; }
.tag-crown .tag-name::before { content: "★ "; color: var(--accent); }
.tag-me.tag-crown .tag-name::before { color: #fff; }
/* A tag that would sit on a more important one (avatars.js unstackTags). */
.tag { transition: opacity 0.18s; }
.tag.tag-hidden { opacity: 0; pointer-events: none; }
/* Phones and touch screens: a smaller, shorter tag. Your own blue tag drops
   the YOU pill (the colour says it); the stars fold to "★5" (onboarding.css). */
@media (max-width: 720px), (pointer: coarse) {
  .tag { gap: 3px; padding: 1px 7px 1px 5px; font-size: 10.5px; }
  .tag-me .tag-badge { display: none; }
  .tag-badge { font-size: 7.5px; padding: 0 3px; border-radius: 4px; }
}
.bubble {
  max-width: 220px;
  padding: 7px 11px;
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px;
  background: #fff; color: #1d1d1f; /* speech stays white paper over the street */
  font-size: 13px; font-weight: 500; line-height: 1.35;
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
}
.bubble.pop { animation: pop 0.22s ease-out; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.react { font-size: 30px; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.2)); }
.react.rise { animation: rise 1.8s ease-out forwards; }
@keyframes rise { 0% { transform: translateY(10px) scale(0.5); opacity: 0; } 15% { transform: translateY(0) scale(1.15); opacity: 1; } 100% { transform: translateY(-40px) scale(1); opacity: 0; } }
.doing { position: relative; width: 38px; height: 38px; display: grid; place-items: center; }
.doing-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--accent) var(--p, 0deg), rgba(255,255,255,0.75) 0);
  -webkit-mask: radial-gradient(circle, transparent 13px, #000 14px);
          mask: radial-gradient(circle, transparent 13px, #000 14px);
}
.doing-emoji { font-size: 16px; background: #fff; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow-sm); }

#tap-ring {
  position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 50%;
  pointer-events: none; animation: ring 0.5s ease-out forwards;
}
@keyframes ring { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }

/* Line icons drawn inline (index.html, phone/icons.js); they take the text colour. */
.ico { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- Over the street: smoked glass ---------------------------------------- */
/* What floats on the 3D world (the HUD, toasts, name tags) is dark glass with
   white text, so it never glares over the scene; sheets and the phone stay
   white. The same tokens re-pointed, so feature CSS inside #hud follows. The
   green is lifted a step so it reads on the dark glass. */
#hud, #toasts, #tags, #ui-hint {
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.86);
  --muted: rgba(255, 255, 255, 0.62);
  --faint: rgba(255, 255, 255, 0.42);
  --surface: rgba(24, 28, 26, 0.74);
  --surface-2: rgba(255, 255, 255, 0.08);
  --surface-3: rgba(255, 255, 255, 0.14);
  --fill: rgba(255, 255, 255, 0.1);
  --fill-strong: rgba(255, 255, 255, 0.18);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --material: rgba(24, 28, 26, 0.56);
  --material-strong: rgba(24, 28, 26, 0.7);
  --accent: #22a861;
  --accent-rgb: 34, 168, 97;
  --accent-hover: #27b86b;
  --accent-press: #1d9454;
  --accent-soft: rgba(var(--accent-rgb), 0.18);
  --accent-line: rgba(var(--accent-rgb), 0.5);
  --on-ink: #1d1d1f;
  --danger-rgb: 255, 99, 89;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.16);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.26);
  --blur: saturate(150%) blur(18px);
  color: var(--ink); /* text inherits a colour, not the token, so restate it */
  color-scheme: dark;
}

/* Hide (src/life/hide-ui.js): everything over the street fades out (HUD,
   toasts, name tags and the cards features add to <body>); the street stays. */
#hud, #toasts, #tags { transition: opacity 0.2s ease; }
.ui-off body > :not(#scene):not(#ui-hint) { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
#ui-hint {
  position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); z-index: 45; transform: translateX(-50%);
  padding: 8px 14px; border-radius: var(--r-pill); background: var(--material-strong); color: var(--ink);
  font-size: 13px; font-weight: 500; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); animation: hint-in 0.2s ease;
}
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 6px); } }

/* --- HUD ------------------------------------------------------------- */
.panel {
  background: var(--material);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }

/* Money and needs, then the next goal, stacked down the left. The place card
   joins the stack on phones; on wide screens it sits top-centre. */
#hud-left {
  position: absolute; left: 12px; top: calc(12px + var(--safe-t));
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none;
}
#hud-left > * { pointer-events: auto; }
#hud-me { position: relative; padding: 10px 12px; width: 220px; }
.cash {
  display: flex; align-items: baseline; gap: 3px; border: 0; background: none; padding: 0; margin-bottom: 6px;
  font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums;
}
.cash .naira { font-size: 16px; font-weight: 500; color: var(--muted); }
.cash-add {
  align-self: center; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 5px;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; font-weight: 500; line-height: 1;
}

#hud-goal {
  display: flex; align-items: center; gap: 7px; max-width: 340px; min-height: 36px; padding: 5px 10px 5px 6px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--material-strong); text-align: left;
  box-shadow: var(--shadow); font-size: 13px; font-weight: 600; line-height: 1.25;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
#hud-goal .goal-tag {
  flex: none; padding: 2px 6px; border-radius: var(--r-xs); background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
#goal-icon { flex: none; display: grid; place-items: center; color: var(--accent); font-size: 16px; }
#goal-icon .ico { width: 18px; height: 18px; }
#goal-text { min-width: 0; }
#goal-text small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.goal-go { flex: none; margin-left: auto; padding-left: 4px; color: var(--faint); font-size: 20px; font-weight: 400; line-height: 1; }
#hud-goal.urgent { border-color: var(--line-strong); }
#hud-goal.urgent .goal-tag { background: var(--ink); color: var(--on-ink); }
#hud-goal:active { transform: scale(0.97); }
.cash.bump { animation: bump 0.4s ease-out; }
@keyframes bump { 40% { transform: scale(1.12); } }
.need { display: grid; grid-template-columns: 18px 52px 1fr; align-items: center; gap: 6px; font-size: 12px; margin-top: 3px; }
.need-icon { display: grid; place-items: center; color: var(--ink-2); }
.need-icon .ico { width: 16px; height: 16px; stroke-width: 2; }
/* Mood: a face and a word beside the bars, from how full the needs are. */
#needs { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; }
#needs .need { grid-column: 1; }
.mood { grid-column: 2; grid-row: 1 / span 4; display: grid; justify-items: center; align-content: center; gap: 1px; min-width: 40px; cursor: default; }
#mood-face { font-size: 22px; line-height: 1; color: var(--ink-2); }
#mood-face .ico { width: 24px; height: 24px; stroke-width: 1.7; }
.mood.good #mood-face { color: var(--accent); }
#mood-word { font-size: 10px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.mood.good #mood-word { color: var(--accent); }
.mood.bad #mood-word { color: var(--ink); }
.need-label { color: var(--muted); font-weight: 500; }
.bar { height: 6px; border-radius: 99px; background: var(--fill); overflow: hidden; }
.bar i { display: block; height: 100%; width: 50%; border-radius: inherit; background: var(--accent); transition: width 0.6s ease, background 0.3s; }
.need.low .bar i { background: var(--ink); }
.need.low .need-icon, .need.low .need-label { color: var(--ink); font-weight: 600; }
.need.mid .bar i { background: var(--accent); }

#hud-place { position: fixed; left: 50%; top: calc(12px + var(--safe-t)); transform: translateX(-50%); padding: 8px 16px; text-align: center; max-width: min(460px, 46vw); }
#place-name { display: block; font-size: 16px; font-weight: 600; letter-spacing: var(--track-tight); }
#place-area { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
#place-area:empty { display: none; }
#place-ambience { margin: 3px 0 0; font-size: 12px; color: var(--muted); min-height: 16px; transition: opacity 0.6s; }

#hud-right { position: absolute; right: 12px; top: calc(12px + var(--safe-t)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--material); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  font-size: 13px; font-weight: 500;
}
#audience-stats { gap: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#views-pill, #online-pill { display: inline-flex; align-items: center; gap: 5px; }
#views-pill { color: var(--muted); }
#online-pill { border-left: 1px solid var(--line-strong); padding-left: 10px; }
@media (max-width: 360px) {
  #hud-right #audience-stats { font-size: 11px; gap: 4px; padding: 5px 6px; }
  #audience-stats #online-pill { padding-left: 4px; }
  #audience-stats > span { gap: 4px; }
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); animation: live 1.8s infinite; display: inline-block; }
@keyframes live { 70% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } }
/* --- Bottom nav: a white tab bar, line icons over their names ------------ */
#hud-nav {
  position: absolute; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%);
  display: flex; gap: 2px; padding: 6px; border-radius: var(--r-xl);
  background: var(--material-strong); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.nav-btn {
  position: relative; flex: none; width: 70px; display: grid; justify-items: center; align-content: center; gap: 2px;
  padding: 6px 2px 5px; border: 0; border-radius: var(--r-lg); background: none; color: var(--ink-2);
  transition: background-color 0.15s, color 0.15s;
}
.nav-btn:hover { background: var(--fill); color: var(--ink); }
.nav-btn:active .nav-tile { transform: scale(0.9); }
.nav-tile {
  position: relative; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm);
  font-size: 20px; line-height: 1; transition: transform 0.12s;
}
.nav-tile .ico { width: 24px; height: 24px; }
.nav-home, .nav-map, .nav-people, .nav-phone, .nav-hide { background: none; }
.nav-label { font-size: 11px; font-weight: 500; color: inherit; white-space: nowrap; }
.nav-btn small {
  position: absolute; left: calc(50% + 8px); top: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600; display: grid; place-items: center;
}
.nav-btn.pulse { background: var(--accent-soft); color: var(--accent); animation: nudge 1.4s ease-in-out infinite; }
.nav-btn.pulse .nav-label { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .nav-btn.pulse { animation: none; } }

.round {
  position: relative; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--material); font-size: 21px; color: var(--ink);
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.round.pulse { border-color: var(--accent); animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45); } 60% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .round.pulse { animation: none; } }
.round small { position: absolute; right: -3px; top: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600; display: grid; place-items: center; }
#phone-dot { background: var(--accent); }
#board-mini { padding: 8px 12px; min-width: 200px; font-size: 12px; }
#board-mini b { color: var(--ink); font-weight: 600; }
#board-list { margin: 4px 0 0; padding-left: 18px; color: var(--ink-2); }
#board-list li { margin: 2px 0; }
#board-list li span { float: right; color: var(--ink); font-weight: 600; margin-left: 8px; font-variant-numeric: tabular-nums; }

/* Things to do here: one glass panel of rows down the right, like a menu,
   not a stack of cards. On phones it is one scrolling strip of icons. */
#dock {
  position: absolute; right: 12px; bottom: calc(14px + var(--safe-b));
  display: flex; flex-direction: column; gap: 2px; width: 236px; padding: 6px;
  border-radius: var(--r-lg); background: var(--material); border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
#dock:empty { display: none; }
.act {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  min-height: 44px; padding: 5px 8px 5px 6px; border: 0; border-radius: var(--r); background: none; color: var(--ink); text-align: left;
  transition: background-color 0.15s, transform 0.1s;
}
.act:hover { background: var(--fill); }
.act .act-icon {
  grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--fill); color: var(--ink); font-size: 17px; line-height: 1;
}
.act .act-icon .ico { width: 18px; height: 18px; }
.act b { align-self: end; font-size: 13.5px; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act small { align-self: start; font-size: 11.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act small:empty { display: none; }
.act:has(small:empty) b, .act b:last-child { grid-row: span 2; align-self: center; }
.act small .earn { color: var(--accent); font-weight: 600; }
.act small .cost { color: var(--ink); font-weight: 600; }
.act:active { transform: scale(0.97); }
.act[disabled] { opacity: 0.45; }
/* A highlighted action (button.gold elsewhere is a filled button): only its
   icon well turns green, the row stays glass. */
.act.gold, .act.gold:hover { color: var(--ink); }
.act.gold { background: none; }
.act.gold:hover { background: var(--fill); }
.act.gold .act-icon { background: var(--accent); color: #fff; }
/* An illegal action (a crime): a faint red outline and icon well, so it reads
   as risky before it is tapped. The one place red is used in the HUD. */
.act.bad { box-shadow: inset 0 0 0 1px rgba(var(--danger-rgb), 0.45); }
.act.bad:hover { background: rgba(var(--danger-rgb), 0.08); }
.act.bad .act-icon { background: rgba(var(--danger-rgb), 0.16); }

#chat {
  position: absolute; left: 12px; bottom: calc(14px + var(--safe-b));
  width: min(420px, calc(50vw - 210px));
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
#chat > * { pointer-events: auto; }
#chat-log {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px;
  max-height: 168px; overflow: hidden; justify-content: flex-end;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 30px);
}
#chat-log li {
  align-self: flex-start; max-width: 100%;
  padding: 4px 10px; border-radius: var(--r); background: var(--material-strong); color: var(--ink);
  font-size: 13px; box-shadow: var(--shadow-sm); overflow-wrap: anywhere;
}
#chat-log li b { color: var(--accent); font-weight: 600; margin-right: 5px; }
#chat-log li.mine b { color: var(--ink); }
#chat-log li.gist { background: var(--material-strong); box-shadow: inset 3px 0 0 var(--accent), var(--shadow-sm); }
#chat-log li.gist b { color: var(--accent); }
#chat-log li.sys { background: var(--material); color: var(--muted); }
#chat-form {
  display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: var(--r-pill);
  background: var(--material-strong); border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
#chat-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); padding: 8px 6px; font-size: 15px; }
#chat-input::placeholder { color: var(--faint); }
.chip-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--fill); color: var(--ink); font-size: 17px; flex: none; }
.chip-btn:hover { background: var(--fill-strong); }
.send { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 16px; flex: none; }
.send:hover { background: var(--accent-hover); }
.chip-btn, .send { display: inline-grid; place-items: center; padding: 0; }
.chip-btn .ico { width: 19px; height: 19px; }
.send .ico { width: 18px; height: 18px; stroke-width: 2.2; }
#views-pill .views-ico { width: 15px; height: 15px; }
.input-wrap .eye .ico { width: 20px; height: 20px; }
#quick, #reactions { display: flex; flex-wrap: wrap; gap: 6px; }
#quick button, #reactions button, .chips button {
  min-height: var(--h-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--r-pill); padding: 5px 12px; font-size: 13px; font-weight: 500;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
#quick button:hover, #reactions button:hover, .chips button:hover { background: var(--surface-2); }
/* The emoji reactions are the first row of the sticker panel (one button opens both). */
#reactions { grid-column: 1 / -1; justify-content: space-between; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
#reactions button { font-size: 22px; padding: 2px 9px; }

#toasts { position: fixed; left: 12px; right: 12px; top: calc(96px + var(--safe-t)); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 40; }
.toast {
  padding: 10px 16px; border-radius: var(--r-lg); background: var(--material-strong); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-weight: 500; font-size: 14px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  animation: toast 3.2s ease forwards; max-width: min(92vw, 460px); text-align: center;
}
.toast.good { box-shadow: inset 0 -2px 0 var(--accent), var(--shadow-lg); }
.toast.bad { box-shadow: inset 0 -2px 0 var(--ink), var(--shadow-lg); }
/* .quest is also the quest-list card below; keep the toast's own box. */
.toast.quest { padding: 10px 16px; margin: 0; border-radius: var(--r-lg); background: var(--material-strong); border-color: var(--accent-line); }
.toast.quest::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-8px); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }

#net-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 6px 12px; text-align: center; font-weight: 500; font-size: 13px; background: var(--ink); color: var(--on-ink); }

/* --- Title ----------------------------------------------------------- */
.screen { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; overflow-y: auto;
  background: linear-gradient(180deg, rgba(245,245,247,0) 0%, rgba(245,245,247,0.45) 55%, rgba(245,245,247,0.85) 100%); }
/* The sign-in screen is plain (the hall behind it no longer shows through),
   the card and the social row centred as one group. The auto margins centre
   it when it fits and fall to 0 when the sign-up form is taller than the
   screen, so the top never scrolls out of reach. */
#title { display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: radial-gradient(1100px 520px at 50% -8%, rgba(var(--accent-rgb), 0.09), transparent 62%), var(--bg); }
#title > .title-card { margin-top: auto; }
#title > .title-social { margin-bottom: auto; }
.title-social { display: grid; justify-items: center; gap: 8px; padding-bottom: 4px; }
.title-social-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.title-social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.title-social-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px 8px 12px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: border-color 0.15s, color 0.15s, transform 0.1s; }
.title-social-link svg { width: 18px; height: 18px; flex: none; }
.title-social-link[href]:hover { border-color: var(--accent); color: var(--accent); }
.title-social-link[href]:active { transform: scale(0.97); }
.title-social-link[aria-disabled="true"] { color: var(--muted); box-shadow: none; cursor: default; }
.title-social-link small { margin-left: -2px; padding: 2px 6px; border-radius: var(--r-pill); background: var(--surface-2); font-size: 10.5px; font-weight: 600; color: var(--muted); }
.title-card {
  width: min(560px, 100%); padding: 24px 24px 20px; border-radius: var(--r-xl);
  background: var(--material-strong); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.live-line { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.title-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.title-top .live-line { margin: 0; padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark { width: clamp(52px, 12vw, 64px); height: clamp(52px, 12vw, 64px); flex: none; border-radius: 23%; box-shadow: var(--shadow), inset 0 0 0 1px rgba(0,0,0,0.06); }
.logo-word { margin: 0; display: flex; align-items: baseline; gap: 0.2em; font-size: clamp(30px, 8vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.logo-word b { font-weight: 700; color: var(--ink); letter-spacing: inherit; }
.logo-word span { color: var(--accent); font-weight: 600; letter-spacing: inherit; }
#title-home { display: grid; gap: 10px; margin-top: 4px; }
#title-home .link { justify-self: center; }
.big.plain { background: var(--fill); color: var(--ink); border: 0; box-shadow: none; }
.big.plain:hover { background: var(--fill-strong); }
#title-nav { display: grid; gap: 4px; margin-bottom: 14px; }
#title-nav .link { justify-self: start; padding: 2px 0 6px; text-decoration: none; }
#title-new.guest #account-fields, #title-new.guest #adult-row { display: none; }
#account-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-items: start; }
#account-fields .field:last-child { grid-column: 1 / -1; }
.field small { font-size: 12px; color: var(--muted); }
.field span em { font-style: normal; font-weight: 400; color: var(--muted); }
.input-wrap { display: flex; align-items: center; margin: 0 !important; border-radius: var(--r); border: 1px solid var(--line-strong); background: #fff; transition: border-color 0.15s, box-shadow 0.15s; }
.input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field .input-wrap input { flex: 1; min-width: 0; border: 0; background: none; box-shadow: none; }
.input-wrap i { padding-left: 14px; margin-right: -8px; font-style: normal; font-weight: 600; color: var(--muted); }
.input-wrap .eye { border: 0; background: none; padding: 8px 12px; font-size: 16px; opacity: 0.55; }
.input-wrap .eye[aria-pressed="true"] { opacity: 1; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 12px; font-size: 13px; color: var(--muted); }
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.check a { color: var(--accent); }
.save-account, .password-form, .email-form, .verify-form { margin-top: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
.save-account h4, .password-form h4, .verify-form h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.save-account > p, .password-form > p, .verify-form > p { margin: 0 0 12px; }
.save-account .big, .password-form .big, .email-form .big, .verify-form .big { width: 100%; margin-top: 4px; }
.ph-account { margin: 0 14px; }
.tagline { margin: 8px 0 14px; color: var(--muted); }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field span, .field-label { font-weight: 500; font-size: 13px; color: var(--ink); margin: 0 0 6px; }
.field input { min-height: var(--h); padding: 11px 14px; border-radius: var(--r); border: 1px solid var(--line-strong); background: #fff; color: var(--ink); outline: 0; font-size: 16px; transition: border-color 0.15s, box-shadow 0.15s; }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field input::placeholder { color: var(--faint); }
#look-picker, .looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.look-card { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: var(--r); border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); font-size: 12px; font-weight: 500; text-align: center; transition: border-color 0.15s, background-color 0.15s; }
.look-card i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-strong); }
.look-card[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.error { color: var(--ink); font-weight: 600; margin: 0 0 10px; }
#resume-error { margin-top: 12px; }
#resume-login-btn { display: block; }
/* The primary action: Apple's large filled button. */
.big {
  width: 100%; min-height: var(--h-lg); padding: 13px 18px; border-radius: var(--r); border: 0;
  background: var(--accent); color: var(--on-accent); font-size: 17px; font-weight: 600; box-shadow: none;
  transition: background-color 0.15s, transform 0.1s;
}
.big:hover { background: var(--accent-hover); }
.big:active { background: var(--accent-press); transform: scale(0.98); }
.big[disabled] { opacity: 0.4; }
.link { border: 0; background: none; color: var(--accent); text-decoration: none; padding: 8px 0; font-size: 13px; font-weight: 500; }
.link:hover { text-decoration: underline; }
.welcome { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
.title-points { list-style: none; padding: 0; margin: 16px 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.title-points li { font-size: 12px; color: var(--muted); padding: 10px 12px; border-radius: var(--r); background: var(--surface-2); }
.title-points b { display: block; color: var(--ink); font-size: 13px; font-weight: 600; }
.fine { font-size: 11.5px; color: var(--faint); margin: 8px 0 0; }
.fine a { color: var(--accent); }
/* Forgot password / username (src/life/account-mail.js). */
.title-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; margin: 4px 0 0; }
.title-lead { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
#title-forgot .link, #title-reset .link { display: block; margin: 4px auto 0; }
.verify-form .big.plain { margin-bottom: 12px; }

/* --- Sheets ---------------------------------------------------------- */
#scrim { position: fixed; inset: 0; z-index: 44; background: var(--scrim); }
.sheet {
  position: fixed; z-index: 45; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(520px, 100%); max-height: 78vh; overflow-y: auto;
  padding: 14px 16px calc(18px + var(--safe-b));
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-lg);
  animation: sheet 0.22s ease-out;
}
@keyframes sheet { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.sheet header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sheet h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: var(--track-tight); }
.close { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--fill); color: var(--muted); font-size: 14px; font-weight: 600; display: grid; place-items: center; }
.close:hover { background: var(--fill-strong); color: var(--ink); }
.sheet-full { top: 0; max-height: none; height: 100%; border-radius: 0; width: 100%; display: flex; flex-direction: column; }
.row-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
/* Secondary buttons: Apple's grey fill. */
.row-buttons button, .spray-actions button {
  min-height: var(--h); padding: 10px 16px; border-radius: var(--r); border: 0;
  background: var(--fill); color: var(--ink); font-weight: 600;
  transition: background-color 0.15s, transform 0.1s;
}
.row-buttons button:hover, .spray-actions button:hover { background: var(--fill-strong); }
.row-buttons button:active, .spray-actions button:active { transform: scale(0.98); }
/* A player-card button that is there but greyed, with its reason (the theft report). */
.player-extra button[disabled] { opacity: 0.5; cursor: default; }
.player-extra button[disabled]:active { transform: none; }
.player-card-why { display: block; font-size: 12px; font-weight: 500; color: var(--faint, #777); }
/* Primary and destructive: filled blue, filled ink. */
button.gold { background: var(--accent); color: var(--on-accent); border: 0; }
button.gold:hover { background: var(--accent-hover); }
button.danger { background: var(--ink); color: var(--on-ink); border-color: transparent; }
button.danger:hover { background: #000; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.chips button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.spray-actions { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
/* Hold-to-spray: a long press is a hold, not a text selection or a menu. */
.spray-actions button { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.spray-actions .wide { grid-column: 1 / -1; }
.spray-actions .big { font-size: 17px; padding: 14px; color: var(--on-accent); background: var(--accent); box-shadow: none; }
.spray-actions .big:hover { background: var(--accent-hover); }
/* Lists: white rows on a grouped card with hairline borders. */
#people-list, .shop { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#people-list li button, .shop li { width: 100%; display: flex; align-items: center; gap: 10px; min-height: var(--h); padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; }
#people-list li button:hover { background: var(--surface-2); }
#people-list li i, .avatar-dot { width: 26px; height: 26px; border-radius: 50%; flex: none; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-strong); }
#people-list li small { margin-left: auto; color: var(--muted); font-size: 12px; text-align: right; }
.shop li { justify-content: space-between; }
.shop li b { display: block; font-weight: 600; }
.shop li button { min-height: var(--h-sm); padding: 6px 14px; border-radius: var(--r-pill); border: 0; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; flex: none; }
.shop li button:hover { background: var(--accent-hover); }
.shop li button[disabled] { background: var(--fill); color: var(--faint); }

/* --- Map -------------------------------------------------------------- */
#map-wrap { flex: 1; min-height: 0; display: grid; place-items: center; }
#map-wrap svg { width: 100%; height: 100%; max-height: 100%; }
.pin { cursor: pointer; }
.pin circle.halo { fill: rgba(var(--accent-rgb), 0.18); }
.pin.here circle.core { fill: var(--accent); }
.pin text { font: 600 13px var(--font); letter-spacing: var(--track); fill: var(--ink); paint-order: stroke; stroke: rgba(255,255,255,0.92); stroke-width: 3.5px; }
.pin text.count { font-size: 11px; fill: var(--accent); }
#ride-box { padding: 12px 0 calc(6px + var(--safe-b)); }
#ride-title { margin: 0 0 8px; font-weight: 600; font-size: 16px; }
#ride-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ride-opt { display: grid; gap: 2px; justify-items: center; padding: 12px 6px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); transition: border-color 0.15s, background-color 0.15s; }
.ride-opt:hover { border-color: var(--accent-line); }
.ride-opt .ride-ico { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 4px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-size: 22px; }
.ride-opt .ride-ico .ico { width: 22px; height: 22px; }
.ride-opt b { font-size: 15px; font-weight: 600; }
.ride-opt small { color: var(--muted); font-size: 11.5px; text-align: center; }
.ride-opt[disabled] { opacity: 0.45; }

/* --- Phone ------------------------------------------------------------ */
.phone {
  position: fixed; z-index: 46; right: 16px; bottom: 16px; width: 340px; height: min(640px, calc(100vh - 32px));
  border-radius: 38px; background: var(--bg); color: var(--ink); border: 6px solid #1d1d1f; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden; animation: sheet-up 0.22s ease-out;
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.phone-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--ink); }
.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 14px 18px; align-content: start; }
.app { display: grid; justify-items: center; gap: 6px; border: 0; background: none; color: var(--ink); font-size: 12px; font-weight: 500; }
.app span { width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; box-shadow: var(--shadow-sm); }
#phone-app { flex: 1; overflow-y: auto; padding: 0 16px 16px; }
#phone-body h3 { margin: 4px 0 10px; font-size: 20px; font-weight: 600; letter-spacing: var(--track-tight); }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-grid div { padding: 12px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.stat-grid b { display: block; font-size: 18px; font-weight: 600; }
.stat-grid small { color: var(--muted); }
.quest { padding: 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; }
.quest.done { background: var(--accent-soft); border-color: transparent; }
.quest b { display: block; font-weight: 600; }
.quest.done b::after { content: " · Done"; color: var(--accent); font-weight: 500; }
.quest .bar { margin-top: 8px; }
/* Segmented control: a grey track, the chosen segment a raised white pill. */
.tabs { display: flex; gap: 2px; margin-bottom: 10px; padding: 2px; border-radius: var(--r-sm); background: var(--fill); border: 0; }
.tabs button {
  flex: 1; min-height: 30px; padding: 6px 8px; border: 0; border-radius: 8px; background: none;
  color: var(--ink); font-size: 13px; font-weight: 500; transition: background-color 0.15s, box-shadow 0.15s;
}
.tabs button[aria-selected="true"], .tabs button[aria-pressed="true"] {
  background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.04);
}
.leaders { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.leaders li { counter-increment: rank; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); margin-bottom: 6px; }
.leaders li::before { content: counter(rank); width: 22px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.leaders li span { margin-left: auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.leaders li.me { outline: 2px solid var(--accent); outline-offset: -1px; }
.setting { display: flex; align-items: center; justify-content: space-between; min-height: var(--h); padding: 10px 12px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); margin-bottom: 8px; }
.setting button { min-height: var(--h-sm); padding: 6px 14px; border-radius: var(--r-pill); border: 0; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; }

/* --- Ride ------------------------------------------------------------- */
#ride-ui { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
#ride-ui > * { pointer-events: auto; }
#ride-caption { position: absolute; left: 50%; top: calc(16px + var(--safe-t)); transform: translateX(-50%); padding: 10px 18px; font-weight: 600; text-align: center; max-width: min(92vw, 560px); }
#ride-caption small { display: block; font-weight: 500; color: var(--muted); margin-top: 2px; }
.ghost { position: absolute; right: 16px; bottom: calc(18px + var(--safe-b)); min-height: var(--h); padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--material-strong); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
#roadblock {
  position: absolute; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px)); padding: 18px; border-radius: var(--r-xl);
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); animation: sheet 0.25s ease-out;
}
.rb-kicker { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.rb-line { font-size: 18px; font-weight: 600; margin: 6px 0 12px; letter-spacing: var(--track-tight); }
#rb-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#rb-choices button { min-height: var(--h); padding: 12px; border-radius: var(--r); border: 0; background: var(--fill); color: var(--ink); font-weight: 600; text-align: left; font-size: 14px; transition: background-color 0.15s; }
#rb-choices button:hover { background: var(--fill-strong); }
#rb-choices button small { display: block; color: var(--muted); font-weight: 500; font-size: 11.5px; margin-top: 2px; }
.rb-outcome { font-size: 16px; font-weight: 600; margin: 10px 0 0; color: var(--accent); }

/* --- Phone width ------------------------------------------------------ */
@media (max-width: 720px) {
  #hud-left { left: 8px; right: 8px; top: calc(8px + var(--safe-t)); gap: 6px; }
  #hud-me { width: 158px; padding: 8px 10px; }
  .cash { font-size: 19px; margin-bottom: 4px; }
  .cash-add { width: 18px; height: 18px; font-size: 14px; margin-left: 4px; }
  .need { grid-template-columns: 16px 1fr; font-size: 11px; margin-top: 2px; }
  .need-icon .ico { width: 14px; height: 14px; }
  .need-label { display: none; }
  .mood { min-width: 30px; }
  #mood-face { font-size: 18px; }
  #mood-face .ico { width: 20px; height: 20px; }
  #mood-word { display: none; }
  .bar { height: 5px; }
  #hud-goal { max-width: 100%; min-height: 32px; padding: 4px 8px 4px 5px; font-size: 12.5px; }
  #goal-text small { display: none; }
  #hud-place { position: static; transform: none; max-width: 100%; padding: 6px 12px; text-align: left; }
  #place-name { font-size: 14px; display: inline; }
  #place-area { display: inline; margin-left: 6px; font-size: 10.5px; }
  #place-ambience { font-size: 11px; }
  #hud-right { right: 8px; top: calc(8px + var(--safe-t)); gap: 6px; }
  .pill { padding: 5px 10px; font-size: 12px; }
  #audience-stats { gap: 6px; padding: 5px 8px; }
  #online-pill { padding-left: 6px; }
  /* "· 3 in Old GRA" would push the counter over the wallet on a phone. */
  #online-area { display: none; }
  .round { width: 42px; height: 42px; font-size: 19px; }
  /* Bottom of the screen, from the edge up: a floating tab bar, then one card
     holding the things to do here (a row of chips) over the chat field. The
     two pieces are #dock and #chat-form, drawn to look like one card. */
  #hud-nav {
    left: 10px; right: 10px; bottom: calc(8px + var(--safe-b)); transform: none; justify-content: space-around; gap: 0;
    padding: 4px; border-radius: 22px;
  }
  .nav-btn { flex: 1; width: auto; max-width: 84px; height: 50px; gap: 2px; padding: 4px 0 2px; }
  .nav-btn:hover { background: none; }
  .nav-tile { width: 28px; height: 28px; font-size: 19px; }
  .nav-tile .ico { width: 23px; height: 23px; }
  .nav-label { font-size: 10.5px; }
  #board-mini { min-width: 0; width: 170px; font-size: 11px; }
  #hud.with-board #hud-place { max-width: calc(100vw - 194px); }
  /* Top of the card: the actions as chips with their whole names, scrolling
     sideways. */
  #dock {
    left: 10px; right: 10px; width: auto; bottom: calc(131px + var(--safe-b));
    flex-direction: row; overflow-x: auto; gap: 6px; padding: 8px 8px 2px; scrollbar-width: none;
    border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--material-strong); box-shadow: none;
  }
  #dock::-webkit-scrollbar { display: none; }
  .act, .act.gold {
    flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 0; height: 34px;
    padding: 0 13px 0 4px; border-radius: var(--r-pill); background: var(--fill);
  }
  .act .act-icon { width: 26px; height: 26px; border-radius: 50%; font-size: 14px; }
  .act .act-icon .ico { width: 15px; height: 15px; }
  .act b { align-self: center; font-size: 13px; }
  .act small { display: none; }
  .act.bad:hover { background: rgba(var(--danger-rgb), 0.08); }
  /* Bottom of the card: the chat field. Chat shows over people's heads only,
     so the log is not drawn on phones. */
  #chat { left: 10px; right: 10px; width: auto; bottom: calc(76px + var(--safe-b)); }
  #chat-log { display: none; }
  #quick { position: absolute; left: 0; right: 0; bottom: 62px; padding: 8px; border-radius: var(--r-lg); background: var(--material-strong); box-shadow: var(--shadow); }
  #chat-form { height: 55px; gap: 4px; padding: 6px 8px 8px; border-radius: 22px; box-shadow: var(--shadow-lg); }
  #hud:has(#dock:not(:empty)) #chat-form { border-top: 0; border-radius: 0 0 22px 22px; box-shadow: 0 14px 24px -12px rgba(0, 0, 0, 0.4); }
  #chat-input { align-self: stretch; padding: 0 11px; border-radius: var(--r-pill); background: var(--fill); font-size: 15px; }
  .chip-btn { flex: none; width: 32px; height: 32px; font-size: 16px; }
  .send { flex: none; width: 36px; height: 36px; }
  #toasts { top: calc(228px + var(--safe-t)); }
  .phone { right: 0; bottom: 0; left: 0; width: 100%; height: 88vh; border-radius: 28px 28px 0 0; border-width: 4px 4px 0; }
  #look-picker, .looks { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .look-card { font-size: 10.5px; padding: 8px 2px 6px; }
  .title-card { padding: 20px 16px 16px; }
  .title-points { grid-template-columns: 1fr 1fr; }
  #account-fields { grid-template-columns: 1fr; }
  .rb-line { font-size: 16px; }
  #rb-choices { grid-template-columns: 1fr; }
}