/* Kid Land theme: loaded after the Vice Nation styles, so it only overrides. Bright, rounded, big
 * touch targets (the iPad is the main screen). */
:root {
  --accent: #5fd38d;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-solid: #ffffff;
  --line: rgba(40, 60, 110, 0.12);
  --text: #23304a;
  --muted: #6b7894;
  --gold: #ffb020;
  --good: #2fb36a;
  --bad: #ff5a6a;
  --display: 'Baloo 2', 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --cond: 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body: 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
}
html, body { background: #bfe6ff; color: var(--text); }
.vignette { background: radial-gradient(ellipse at 50% 55%, transparent 65%, rgba(40, 80, 140, 0.18) 100%); }

/* ---- top bar: brand + town switcher + the kid chip */
.topbar { top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); height: 62px; border-radius: 22px; box-shadow: 0 8px 28px rgba(30, 60, 120, 0.18); border: 2px solid #fff; }
.brand { font-family: var(--display); font-weight: 800; }
.brand-vice { font-size: 26px; color: #ff6f91; text-shadow: none; letter-spacing: 0.01em; }
.brand-nation { font-size: 26px; color: #3fa7ff; opacity: 1; letter-spacing: 0.01em; }
.map-chip { font-family: var(--body); font-weight: 600; color: var(--muted); }
.cnav-cur b { font-family: var(--display); font-weight: 800; color: var(--text); }
.cnav-cur small, .cnav-txt small { color: var(--muted); }
.cnav-panel { background: #fff; color: var(--text); border-radius: 20px; }
.cnav-item b { color: var(--text); font-family: var(--display); font-weight: 700; }
.city-lock { font-style: normal; margin-left: auto; }

.player-chip { margin-left: auto; }
.chip-me { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 2px solid var(--accent); background: #fff; min-height: 50px; }
.chip-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #e8f4ff; display: grid; place-items: center; }
.chip-text b { display: block; font-family: var(--display); font-weight: 800; font-size: 18px; line-height: 1; color: var(--text); }
.chip-text small { display: block; font-size: 12px; color: var(--muted); }

/* ---- buttons */
.vn-btn { font-family: var(--display); font-weight: 800; border-radius: 16px; min-height: 48px; padding: 8px 20px; font-size: 18px; }
.vn-btn.gold { background: linear-gradient(180deg, #ffcf4a, #ffab1f); color: #4a2a00; border: none; box-shadow: 0 4px 0 #d98a00; }
.vn-btn.gold:active { transform: translateY(3px); box-shadow: 0 1px 0 #d98a00; }
.vn-btn.ghost { background: #eef4ff; color: var(--text); border: 2px solid #d6e4ff; }

/* ---- side toolbar: bigger, friendlier buttons */
.toolbar { left: max(10px, env(safe-area-inset-left)); background: rgba(255, 255, 255, 0.92); border: 2px solid #fff; border-radius: 22px; box-shadow: 0 8px 28px rgba(30, 60, 120, 0.18); }
.tool { color: var(--text); border-radius: 16px; min-width: 60px; min-height: 58px; }
.tool .ico { font-size: 26px; }
.tool .lbl { font-family: var(--body); font-weight: 600; font-size: 12px; color: var(--text); }
.tool.active, .tool:hover { background: color-mix(in srgb, var(--accent) 25%, #fff); }
.tool-walk { background: linear-gradient(180deg, #7ee2a8, #4cc27e); }
.tool-walk .lbl { color: #0b3a20; }
.tool-sep { background: var(--line); }

/* ---- cards, tooltips, drawers, dialogs on white */
.card, .gps, .drawer, .tooltip, .place-hint, .view-menu, .site-menu, .minimap-wrap, .recenter, .city-banner {
  background: rgba(255, 255, 255, 0.96); color: var(--text); border: 2px solid #fff; box-shadow: 0 10px 34px rgba(30, 60, 120, 0.2);
}
.card { border-radius: 24px; }
.card h3, .drawer h4 { font-size: 22px; letter-spacing: 0; }
.drawer h4, .gps b { font-family: var(--display); font-weight: 800; color: var(--text); }
.card-title p, .card-desc, .drawer p, .tooltip span, .place-hint span { color: var(--muted); }
.card-desc { font-size: 15px; }
.card-icon { font-size: 34px; }
.card-actions .act { font-family: var(--display); font-weight: 700; font-size: 17px; min-height: 52px; border-radius: 16px; background: #eef4ff; color: var(--text); border: 2px solid #d6e4ff; }
.card-actions .act.primary { background: linear-gradient(180deg, #7ee2a8, #4cc27e); color: #0b3a20; border-color: #4cc27e; }
.card-actions .act.danger { background: #fff0f2; color: #c0303f; border-color: #ffc9cf; }
.chip { font-family: var(--body); font-weight: 600; }
.chip-you { background: #fff4d6; color: #8a5a00; }
.chip-sale { background: #e6fbef; color: #1d7a45; }
.chip-local { background: #eef4ff; color: #3a5a9a; }
.tooltip b, .place-hint b { color: var(--text); font-family: var(--display); }
.place-hint em { color: var(--good); font-style: normal; font-weight: 700; }
.place-hint.bad .bad { color: var(--bad); }
.city-banner b { font-family: var(--display); font-weight: 800; color: var(--text); }
.city-banner small, .city-banner span { color: var(--muted); }
.coords b { color: var(--text); }
.coords span { color: var(--muted); }
.help { color: var(--muted); }
.help kbd, kbd { background: #eef4ff; color: var(--text); border-color: #d6e4ff; }

/* build drawer: categories and big tiles */
.drawer { border-radius: 24px 24px 0 0; }
.build-list { gap: 10px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.bi-cat { flex: none; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; padding: 10px 6px; border-radius: 14px; background: color-mix(in srgb, var(--cat) 18%, #fff); color: color-mix(in srgb, var(--cat) 70%, #23304a); font-family: var(--display); font-weight: 800; font-size: 15px; text-align: center; }
.build-item { background: #f6f9ff; color: var(--text); border: 2px solid #e2ebff; border-radius: 18px; min-width: 116px; }
.build-item.active { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 18%, #fff); }
.bi-icon { font-size: 34px; }
.bi-name { font-family: var(--display); font-weight: 700; color: var(--text); text-transform: none; font-size: 16px; line-height: 1.1; }
.bi-size { color: var(--muted); }
.bi-foot i { background: var(--cat); }

/* GPS ("Find") list */
.gps-list button { color: var(--text); border-radius: 14px; min-height: 48px; }
.gps-list button:hover { background: #eef4ff; }
.gps-list small, .gps-list h5 small { color: var(--muted); }
.gps-list h5 { color: var(--text); font-family: var(--display); }

/* toasts */
.vn-toasts .toast { background: #fff; color: var(--text); border: 2px solid #e2ebff; border-radius: 18px; font-family: var(--body); box-shadow: 0 10px 30px rgba(30, 60, 120, 0.2); }
.vn-toasts .toast.good .toast-ico { background: var(--good); color: #fff; }
.vn-toasts .toast.bad .toast-ico { background: var(--bad); color: #fff; }

/* loader */
.loader { background: radial-gradient(ellipse at 50% 40%, #e6f6ff, #9fd6ff); }
.ld-box { color: var(--text); }
.ld-vice { color: #ff6f91; font-family: var(--display); font-weight: 800; }
.ld-nation { color: #3fa7ff; font-family: var(--display); font-weight: 800; }
.ld-city { font-family: var(--display); font-weight: 800; color: var(--text); }
.ld-tag, .ld-row small { color: var(--muted); }
.ld-row b { color: var(--text); }
.ld-track { background: rgba(255, 255, 255, 0.7); }
.ld-track span { background: linear-gradient(90deg, #ff6f91, #ffb020, #5fd38d, #3fa7ff); }

/* ---- dialogs: "Who's playing?", the look builder */
.vn-dialog { background: #fff; color: var(--text); border-radius: 28px; border: 3px solid #fff; box-shadow: 0 20px 60px rgba(30, 60, 120, 0.3); }
.vn-dialog::backdrop { background: rgba(120, 180, 240, 0.45); backdrop-filter: blur(6px); }
.vn-dialog h2 { font-family: var(--display); font-weight: 800; font-size: 34px; color: var(--text); margin: 0 0 12px; }
.vn-kicker { color: var(--accent); font-family: var(--display); font-weight: 800; letter-spacing: 0.04em; }
.vn-dialog .vn-close { color: var(--muted); }
.kid-signin.must .vn-close { display: none; }
.vn-error { color: var(--bad); font-weight: 600; min-height: 1.2em; }
.kid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; max-height: 60vh; overflow: auto; padding: 4px; }
.kid-pick { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 22px; border: 3px solid #e2ebff; background: #f6f9ff; color: var(--text); }
.kid-pick:hover, .kid-pick:focus-visible { border-color: var(--accent); background: #effcf4; }
.kid-pick span { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #e8f4ff; font-size: 44px; }
.kid-pick b { font-family: var(--display); font-weight: 800; font-size: 20px; }
.kid-new { border-style: dashed; }
.kid-new span { background: #fff4d6; color: #d98a00; }
.onboard-name label { display: block; font-family: var(--display); font-weight: 700; font-size: 18px; }
.onboard-name input { display: block; width: 100%; margin-top: 8px; font: 700 28px var(--display); padding: 12px 18px; border-radius: 18px; border: 3px solid #d6e4ff; color: var(--text); background: #f6f9ff; }
.onboard-name input:focus { outline: none; border-color: var(--accent); }
.onboard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }

/* street level: friendlier top bar */
.sv-bar button { font-family: var(--display); font-weight: 700; }

/* phones and small iPads in portrait: tighter top bar */
@media (max-width: 700px) {
  .chip-text { display: none; }
  .chip-me { padding: 4px; }
  .brand-vice, .brand-nation { font-size: 20px; }
}

/* town switcher (citynav.css is dark-themed) */
.cnav-cur b { color: var(--text); font-family: var(--display); font-weight: 800; text-transform: none; font-size: 18px; letter-spacing: 0; }
.cnav-btn:hover, .cnav-btn.open { background: #f2f7ff; border-color: #e2ebff; }
.cnav-btn:hover .cnav-chev { border-color: var(--text); }
.cnav-panel, #cityTabs.cnav-panel { background: #fff; border: 2px solid #e2ebff; box-shadow: 0 14px 40px rgba(30, 60, 120, 0.22); }
#cityTabs .cnav-item { color: var(--text); }
#cityTabs .cnav-item.active .cnav-txt b { color: var(--text); }
#cityTabs .cnav-item:hover { background: #f2f7ff; }
.loader, body.atlas .loader { --ld-accent: #3fa7ff; background: radial-gradient(120% 80% at 50% 38%, #e9f7ff 0%, #b8e2ff 60%, #8ccdff 100%); }
.ld-err { color: var(--bad); }

/* street level: the white flash going through a door */
.sv-doorfade { position: absolute; inset: 0; background: #fff; pointer-events: none; animation: sv-doorfade .5s ease-out forwards; z-index: 5; }
@keyframes sv-doorfade { from { opacity: 1; } to { opacity: 0; } }
/* street level help and buttons on the light theme (street3d.css loads after this, so be specific) */
.sv-root .sv-help kbd, .sv-root .sv-act kbd { background: #eef4ff; border-color: #d6e4ff; color: #23304a; }