/* ---------- Wittiz app tone & manner (light only): cream panels, orange primary, purple hero ---------- */
@font-face { font-family: "SBAggro"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff") format("woff"); font-weight: 300; font-display: swap; }
@font-face { font-family: "SBAggro"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "SBAggro"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff") format("woff"); font-weight: 700; font-display: swap; }
:root {
  color-scheme: light;
  /* palette */
  --cream: #FAF7F1;
  --cream-glass: rgba(255, 250, 243, .72);   /* light frosted glass */
  --glass-solid: rgba(255, 250, 243, .9);    /* glass where long text sits (menus, sheets on phones) */
  --glass-border: rgba(255, 255, 255, .6);
  --glass-blur: blur(18px) saturate(1.15);
  --glass-glow: inset 0 1px 0 rgba(255, 255, 255, .7);
  --card-glass: rgba(255, 255, 255, .78);
  --cream-2: #F3EDE2;          /* inset wells / track backgrounds */
  --card: #FFFFFF;
  --ink: #2B2B2B;
  --ink-2: #8A8A8A;
  --orange: #FF9F1C;
  --orange-d: #E58600;         /* emboss edge */
  --orange-soft: #FFF0DA;      /* tinted selection backgrounds */
  --purple-a: #8B5CF6;
  --purple-b: #6366F1;
  --purple-d: #4F46E5;         /* hero emboss edge */
  --grad-hero: linear-gradient(135deg, var(--purple-a), var(--purple-b));
  --gloss: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 52%);
  --blue: #79B8FF;
  --blue-d: #4F95E0;
  --blue-soft: #E6F2FF;
  --yellow: #FFD54A;
  --peach: #FFC9A3;
  --mint: #9EE6C9;
  --mint-d: #3FB98A;
  --line: rgba(60, 40, 0, .08);
  /* shape */
  --r-card: 22px;
  --r-well: 16px;
  --shadow: 0 6px 16px rgba(60, 40, 0, .12);
  --shadow-lg: 0 14px 36px rgba(60, 40, 0, .18);
  --emboss: 0 4px 0 var(--orange-d);
  --emboss-hero: 0 4px 0 var(--purple-d);
  --emboss-soft: 0 3px 0 rgba(60, 40, 0, .10);
  /* legacy token names used throughout this file */
  --accent: var(--orange);
  --accent-ink: #FFFFFF;
  --glass: var(--cream-glass);
  --glass-strong: var(--cream-glass);
  --stroke: rgba(60, 40, 0, .06);
  --text: var(--ink);
  --muted: var(--ink-2);
  --danger: #E5533D;
  --font: "Pretendard", -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-display: "SBAggro", "Pretendard", -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--cream); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg { width: 18px; height: 18px; flex: none; }
kbd { font: 600 10px/1 var(--font); padding: 3px 5px; border-radius: 5px; border: 1px solid rgba(255,255,255,.18); color: var(--muted); background: rgba(255,255,255,.04); }
[hidden] { display: none !important; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
#ui > * { pointer-events: auto; }
#ui > .labels, #ui > .toasts, #ui > .hint, #ui > .fade, #ui > .panels, #ui > .speedlines, #ui > .confetti { pointer-events: none; }
#ui > .panels > * { pointer-events: auto; }
#ui > .panels { position: absolute; inset: 0; z-index: 5; }

.glass { background: var(--glass); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid var(--stroke); border-radius: 999px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.glass-box { background: var(--glass); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid var(--stroke); border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.circle { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; }
.pill { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; }

/* header */
.hdr-left { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; display: flex; gap: 8px; align-items: center; }
.brand { font-size: 14px; }
.brand-icon { color: var(--accent); display: grid; }
.brand-name { font-weight: 700; letter-spacing: -.01em; }
.sep { width: 1px; height: 16px; background: rgba(255,255,255,.14); }
.room-btn { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.room-btn:hover { color: var(--text); }
.room-btn svg { width: 14px; height: 14px; }
.hdr-right { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; display: grid; grid-template-columns: auto auto; gap: 8px; justify-items: end; align-items: start; }
.people { font-size: 13px; gap: 6px; }
.people b { font-weight: 700; }
.tools { padding: 0 6px; gap: 2px; }
.tools button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: rgba(255,255,255,.82); }
.tools button:hover, .circle:hover { background: rgba(255,255,255,.07); }
.tools .off { color: var(--muted); }
.minimap { width: 180px; height: 320px; border-radius: 16px; display: block; }
.mm-wrap { position: relative; }
.mm-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(10,14,12,.6); color: var(--muted); }
.mm-x:hover { color: var(--text); }
.mm-x svg { width: 14px; height: 14px; }
.tools .map-tog.on { color: var(--accent); background: rgba(232,210,122,.12); }
.people.local b::after { content: attr(data-local); font-weight: 400; font-size: 10px; color: #f0c27b; }
/* language switch pill (EN / Korean): cover top-right + settings */
.lang-slot { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 12; }
.lang-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.55); font-size: 13px; font-weight: 600; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lang-pill:hover { background: rgba(255,255,255,.14); }
.lang-pill span.on { color: #f4e7b4; }
.lang-pill i { font-style: normal; opacity: .4; }
.settings .lang-pill { margin: 2px 0 4px; }
.hint { position: absolute; top: calc(max(16px, env(safe-area-inset-top)) + 50px); left: 16px; font-size: 12px; color: rgba(255,255,255,.78); padding: 5px 12px; border-radius: 999px; background: rgba(20,24,22,.45); border: 1px solid var(--stroke); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* toasts */
/* toasts: top-right under the header tools (under / left of the minimap when it is open) */
.toasts { z-index: 6; position: absolute; top: calc(max(16px, env(safe-area-inset-top)) + 56px); right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: min(320px, calc(100vw - 32px)); pointer-events: none; }
#ui.mm-open .toasts { right: 212px; }
.toast { height: auto; min-height: 34px; padding: 7px 14px; font-size: 13px; opacity: 0; transform: translateX(24px); transition: opacity .3s, transform .3s; text-align: right; max-width: 100%; border-radius: 16px; }
.toast.in { opacity: 1; transform: none; }
.toast.out { opacity: 0; transform: translateX(24px); }
@media (max-width: 900px) { #ui.mm-open .toasts { right: 16px; top: calc(max(16px, env(safe-area-inset-top)) + 56px + 340px); } }
.toast.gold { border-color: rgba(232,210,122,.35); }
.toast.dim { color: var(--muted); }

/* labels */
.labels { position: absolute; inset: 0; overflow: hidden; }
.nlabel { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; white-space: nowrap; background: rgba(14,18,16,.55); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); will-change: transform; }
.nlabel .em { font-size: 12px; }
.nlabel em, .vlist em { font-style: normal; font-weight: 700; font-size: 10px; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 1px 5px; margin-right: 2px; }
.nlabel.self { border-color: rgba(232,210,122,.45); }
.nlabel.lm { background: rgba(232,210,122,.12); border-color: rgba(232,210,122,.28); color: #f4e7b4; font-size: 11px; }

/* HUD */
.hud { position: absolute; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: 304px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.hud.active { border-color: rgba(232,210,122,.25); }
.course-pill { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 14px; font-weight: 600; text-align: left; }
.course-pill:hover { background: rgba(255,255,255,.09); }
.course-pill .ci { color: var(--accent); display: grid; }
.course-pill .course-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-pill .dir-ico { color: var(--accent); display: grid; }
.course-pill .chev { color: var(--muted); display: grid; }
.course-pill .chev svg { width: 14px; height: 14px; }
.hud-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; }
.hud-stats div { display: flex; flex-direction: column; gap: 1px; }
.hud-stats small, .sum-grid small { font-size: 10.5px; color: var(--muted); }
.hud-stats b { font: 700 18px/1.15 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hud-stats i, .sum-grid i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.hud-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.together b { color: var(--text); }
.net-mode { margin-left: auto; font-size: 11px; }
.net-mode.online { color: #9be3a6; }
.net-mode.local { color: #f0c27b; }
.badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.badge.paused { background: rgba(240,194,123,.18); color: #f0c27b; }
.hud-btns { display: flex; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); font-size: 13px; font-weight: 600; white-space: nowrap; }
.btn:hover { background: rgba(255,255,255,.13); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger, .btn.primary.danger { background: rgba(255,138,122,.16); color: #ffb3a8; border-color: rgba(255,138,122,.3); }
.btn svg { width: 16px; height: 16px; }
.hud-btns .session-btn { flex: 1; }
.auto-btn kbd { margin-left: 2px; }
.auto-btn.on { background: rgba(232,210,122,.18); border-color: rgba(232,210,122,.4); color: #f4e7b4; }

/* levels / booster */
.lv { display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-weight: 700; font-size: 10px; line-height: 1; padding: 2px 6px; border-radius: 999px; margin-right: 3px; color: #10140f; background: var(--lc, #8fd694); white-space: nowrap; vertical-align: 1px; }
.nlabel .zap { color: var(--accent); font-weight: 700; }
.nlabel.boost { border-color: rgba(232,210,122,.8); box-shadow: 0 0 14px rgba(232,210,122,.55), inset 0 0 8px rgba(232,210,122,.25); }
.hud-prog { display: flex; align-items: center; gap: 8px; }
.hud-prog .bars { flex: 1; display: grid; grid-template-columns: 1fr; gap: 2px; min-width: 0; }
.pbar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.pbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #F3E3A0, var(--accent)); transition: width .4s ease; }
.pbar.lv i { background: linear-gradient(90deg, #5cc98a, #4aa3e0); }
.hud-prog small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.boost-btn { height: 34px; padding: 0 10px; font-size: 12.5px; gap: 4px; }
.boost-btn.on { background: rgba(232,210,122,.25); border-color: var(--accent); color: #fff3c4; box-shadow: 0 0 16px rgba(232,210,122,.45); }
.hud.boost .st-cur { color: var(--accent); }
.hud.boost { border-color: rgba(232,210,122,.5); }
.next-lv { margin: 2px 0 6px; font-size: 13px; color: var(--accent); }
.prog-line { font-size: 13px; color: var(--text); margin: 6px 0 0; }
.speedlines { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255,255,255,.0) 0deg 3.2deg, rgba(255,255,255,.16) 3.4deg 3.7deg, rgba(255,255,255,0) 3.9deg 7deg);
  -webkit-mask-image: radial-gradient(circle at 50% 55%, transparent 0 28%, #000 66%); mask-image: radial-gradient(circle at 50% 55%, transparent 0 28%, #000 66%);
  animation: speedspin 0.42s linear infinite; } /* ×2 booster: denser mask + faster pulse */
.speedlines.on { opacity: 1; }
.speedvig { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(120% 95% at 50% 55%, transparent 55%, rgba(4,8,14,.55) 100%); }
#ui > .speedvig { pointer-events: none; }
@keyframes speedspin { from { transform: scale(1); } 50% { transform: scale(1.04) rotate(1.5deg); } to { transform: scale(1); } }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 7; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; opacity: .95; animation: confetti linear forwards; }
@keyframes confetti { to { transform: translate(var(--dx), 105vh) rotate(var(--rot)); opacity: .9; } }

/* music */
.pill-row { position: absolute; top: calc(max(16px, env(safe-area-inset-top)) + 86px); left: 16px; display: flex; gap: 6px; }
.music-pill { height: 32px; padding: 0 12px; font-size: 12.5px; gap: 6px; }
.app-badge { height: 32px; padding: 0 12px 0 6px; font-size: 12.5px; font-weight: 700; gap: 7px; color: #fff3c4; border-color: rgba(232,210,122,.55); background: linear-gradient(135deg, rgba(232,210,122,.22), rgba(20,24,22,.55)); box-shadow: 0 0 0 1px rgba(232,210,122,.12), 0 6px 18px rgba(232,210,122,.12); }
.app-badge:hover { border-color: var(--accent); }
.app-badge img { width: 20px; height: 20px; border-radius: 5px; display: block; }
.music-dock { position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: 232px; padding: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 4; }
.md-top { display: flex; align-items: flex-start; gap: 4px; }
.md-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-meta b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-meta small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-btn { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; font-size: 13px; color: var(--text); background: rgba(255,255,255,.06); }
.md-btn:hover { background: rgba(255,255,255,.12); }
.md-btn.on { background: rgba(232,210,122,.2); color: #f4e7b4; }
.yt-holder { width: 200px; height: 200px; margin: 0 auto; border-radius: 10px; overflow: hidden; background: #000; }
.yt-holder iframe { width: 200px; height: 200px; display: block; border: 0; }
.md-status { font-size: 12px; text-align: center; }
.md-prog { height: 3px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.md-prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s linear; }
.md-ctrls { display: flex; gap: 4px; justify-content: space-between; }
.music-dock.collapsed .md-ctrls, .music-dock.collapsed .md-meta small { display: none; }
.music-panel .mp-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 2px; }
.mp-list button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; text-align: left; }
.mp-list button:hover { background: rgba(255,255,255,.06); }
.mp-list button.cur { background: rgba(232,210,122,.12); color: #f4e7b4; }
.mp-n { width: 18px; text-align: center; color: var(--muted); font-size: 12px; }
.mp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-t b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-t small { font-size: 11.5px; color: var(--muted); }
.chip { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted); white-space: nowrap; }
.panel.music { right: 260px; }

/* header additions */
.hdr-right { display: flex; flex-direction: column; align-items: flex-end; }
.hdr-row { display: flex; gap: 8px; align-items: flex-start; }
.jelly-pill { font-size: 13px; gap: 4px; }
.jelly-pill b { font-variant-numeric: tabular-nums; }
.app-btn { font-size: 12.5px; gap: 6px; color: #f4e7b4; }
.app-btn svg { width: 16px; height: 16px; }
.hud-jelly { color: var(--text); display: inline-flex; align-items: center; white-space: nowrap; }
.hud-row { flex-wrap: wrap; row-gap: 4px; }
.hud-row .together, .today-btn { white-space: nowrap; }
.hud-jelly b { font-variant-numeric: tabular-nums; }
.badge.idle-b { background: rgba(124,140,245,.2); color: #b9c2ff; }
.auto-btn .half { font-style: normal; font-size: 10.5px; color: var(--muted); }
.hud-btns { flex-wrap: wrap; }
.hud-btns .auto-btn { flex: 1 1 100%; height: 32px; font-size: 12px; background: rgba(255,255,255,.05); }
.hud-btns .session-btn { flex: 1 1 100%; height: 42px; font-size: 14px; }
.course-pill .lap-n { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.hud-boost { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.hud-boost .boost-btn { grid-row: 1 / span 2; }
.hud-boost .pbar { align-self: end; }
.hud-boost small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: start; }
.boost-btn.cd { background: conic-gradient(rgba(232,210,122,.35) var(--cd, 0deg), rgba(255,255,255,.06) 0); opacity: 1; }
.antidote-btn { width: 100%; height: 36px; font-size: 13px; font-weight: 700; background: linear-gradient(135deg, rgba(140,210,255,.32), rgba(110,170,255,.22)); border-color: rgba(160,220,255,.55); color: #e6f6ff; animation: antidote-pulse 1.2s ease-in-out infinite; }
.antidote-btn.empty { animation: none; opacity: .65; }
@keyframes antidote-pulse { 50% { box-shadow: 0 0 0 4px rgba(140,210,255,.18); } }
.nlabel .frz-chip { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-62%); min-height: 36px; min-width: 64px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(160,220,255,.6); background: rgba(40,90,130,.78); color: #eaf7ff; font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1; white-space: nowrap; cursor: pointer; pointer-events: auto; transition: opacity .2s, background .15s, transform .15s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nlabel .frz-chip:hover { background: rgba(70,140,195,.92); border-color: #bfe8ff; box-shadow: 0 0 0 3px rgba(150,215,255,.25); }
.nlabel .frz-chip:active { transform: translateY(-62%) scale(.96); }
.nlabel .frz-chip.go { background: rgba(232,190,90,.85); border-color: rgba(255,230,160,.8); color: #2a2208; }
.nlabel.immune { border-color: rgba(150,215,255,.7); background-color: rgba(30,60,80,.6); background-image: linear-gradient(100deg, transparent 20%, rgba(170,225,255,.45) 45%, transparent 70%); background-size: 220% 100%; animation: immune-shimmer 1.6s linear infinite; }
@keyframes immune-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.auto-mark { font-size: 12px; }
td.acts { display: flex; gap: 2px; }

/* sheets (purchase / confirm / return / app QR) */
.sheet-back { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(5,8,12,.45); pointer-events: auto; }
.sheet { width: min(360px, calc(100vw - 32px)); padding: 18px; background: var(--glass-strong); display: flex; flex-direction: column; gap: 6px; animation: pop .2s ease; }
.sheet b { font-size: 15px; }
.sheet p { margin: 2px 0; font-size: 13.5px; }
.appdl { align-items: center; text-align: center; }
.appdl .qr { width: 228px; height: 228px; display: grid; place-items: center; background: #fff; border-radius: 14px; padding: 8px; margin: 8px 0; }
.appdl .qr svg, .appdl .qr img { width: 212px; height: 212px; display: block; }
.appdl .url { font-size: 12.5px; color: var(--muted); }
.app-cta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(232,210,122,.08); font-size: 12.5px; }

/* shop */
.shop-bal { display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 10px; }
.shop-bal b { font-size: 18px; color: var(--accent); }
.shop-bal small { color: var(--muted); margin-left: auto; }
.shop-tabs { margin-bottom: 12px; }
.shop-cards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.card { width: 124px; padding: 10px 8px 12px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.card img:not(.jelly) { width: 96px; height: 96px; object-fit: contain; }
.card .big { font-size: 56px; line-height: 96px; }
.card small { font-size: 11.5px; color: var(--muted); }
.card.locked img, .card.locked .big { filter: grayscale(.8) brightness(.7); }
.card.locked small { color: #f0c27b; display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 999px; background: rgba(240,194,123,.14); font-size: 11px; line-height: 16px; }
.card small img.jelly { width: 16px; height: 16px; margin-right: 2px; vertical-align: middle; }
.card.own { border-color: rgba(143,214,148,.4); }
.shop-boost { text-align: center; }
.big-n { font-size: 34px; font-weight: 800; margin: 6px 0; }
.big-n small { font-size: 16px; color: var(--muted); }
.shop-courses { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.shop-courses li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.04); }
.shop-courses li > i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.shop-courses li span { flex: 1; display: flex; flex-direction: column; }
.shop-courses li small { color: var(--muted); font-size: 12px; }
.shop-courses li.soon { opacity: .55; }
.shop-courses li.soon > i { background: rgba(255,255,255,.2); }

/* course list colours + locks */
.course-item b .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.course-item.locked { opacity: .6; }
.map-pill { width: 100%; margin-bottom: 8px; }
.course-item .free-ico { width: 56px; height: 56px; display: grid; place-items: center; font-size: 26px; border-radius: 10px; background: rgba(0,0,0,.25); flex: none; }

/* big map */
.panel.center.bigmap-panel { width: max-content; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
.bigmap { display: flex; gap: 14px; align-items: flex-start; }
.bm-stage { position: relative; flex: none; border-radius: 14px; overflow: hidden; background: #0d1512; }
.bm-stage canvas { position: absolute; inset: 0; }
.bm-live { cursor: pointer; }
.bm-tip { position: absolute; pointer-events: none; padding: 5px 9px; border-radius: 8px; font-size: 12px; background: rgba(10,14,12,.85); border: 1px solid rgba(255,255,255,.12); white-space: nowrap; }
.bm-side { width: 270px; display: flex; flex-direction: column; gap: 6px; max-height: 76vh; overflow: auto; }
.bm-title { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.bm-title i, .bm-legend i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.bm-start { font-size: 13px; color: var(--accent); margin: 4px 0 8px; }
.bm-lock { font-size: 13px; color: #f0c27b; }
.bm-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bm-legend button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; font-size: 13px; text-align: left; }
.bm-legend button span { flex: 1; }
.bm-legend button small { color: var(--muted); font-size: 11.5px; }
.bm-legend button em { font-style: normal; font-size: 11px; color: #f0c27b; }
.bm-legend button.on { background: rgba(232,210,122,.12); }
.bm-legend button.locked { opacity: .6; }
.bigmap.narrow { flex-direction: column; }
.bigmap.narrow .bm-side { width: 100%; max-height: none; overflow: visible; }
.panel.center.bigmap-panel { overflow: auto; }
.panel.music { right: 260px; }
@media (max-width: 700px) {
  .app-btn:not(.small) span { display: none; }
}

/* jelly icon sizes: inline 1em; HUD balance 22px; shop prices 28px; shop header / purchase sheet ≤ 40px */
img.jelly { width: 1em; height: 1em; vertical-align: -0.14em; object-fit: contain; display: inline-block; margin-right: 4px; }
img.tool-jelly { width: 18px; height: 18px; vertical-align: middle; margin: 0; }
.hud-jelly img.jelly { width: 22px; height: 22px; vertical-align: -6px; }
.shop-boost .btn img.jelly, .shop-courses small img.jelly { width: 28px; height: 28px; vertical-align: -9px; }
.shop-bal b img.jelly, .sheet b img.jelly, .sheet p img.jelly { width: 40px; height: 40px; vertical-align: -12px; }
.sheet p.muted img.jelly { width: 1em; height: 1em; vertical-align: -0.14em; }

/* entry branding + flight */
.ld-logo { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .92; display: block; margin: 0 auto 10px; }
.ld-tag { color: #f4e7b4; font-size: 14.5px; font-weight: 600; margin: 0 0 2px; }
.ld-park { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
#loading.picking .ld-park { font-size: 11.5px; margin-bottom: 6px; }
html.is-phone #loading.picking .ld-park { display: none; }
.flight { width: min(420px, 86vw); margin: 4px auto 0; }
.flight svg { width: 100%; height: auto; display: block; overflow: visible; }
/* during the character / course steps: small ambient plane above the title */
#loading.picking .flight { order: -1; width: min(260px, 70vw); opacity: .75; margin: 0 auto -4px; }
#loading.picking .ld-head h1 { font-size: 20px; }
#loading.picking .ld-logo { height: 20px; margin-bottom: 0; }
#loading.picking .ld-tag { font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .ld-dots i { animation: none; opacity: .7; } }
.steps { display: flex; gap: 8px; justify-content: center; align-items: center; font-size: 12px; color: var(--muted); margin: 6px 0 2px; }
.steps span { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.06); }
.steps span.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.steps span.done { background: rgba(143,214,148,.2); color: #b9ecbd; }
.course-step .bigmap { justify-content: center; text-align: left; }
.course-step .bigmap.narrow { align-items: center; }
.course-step .bm-side { max-height: 40vh; }
.seg.run-mode { max-width: 320px; margin: 8px auto 0; }
.seg.run-mode button { padding: 6px; font-size: 12.5px; }
.tog-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; margin: 10px 0 4px; }
.tog-row small { display: block; font-size: 11px; }
.tog-row input { width: 20px; height: 20px; accent-color: var(--accent); }
.btn.enter-big { width: 320px; max-width: 100%; height: 56px; font-size: 17px; margin: 8px auto 0; display: flex; }
@media (max-width: 640px) { .btn.enter-big { width: 100%; } }
.brand-icon svg { width: 17px; height: 17px; }

/* social: tap (freeze tag) / overtake */
.nlabel { position: absolute; }
.nlabel .bubble { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 3px 9px; border-radius: 12px; background: #fff; color: #1b1b1b; font-size: 12px; font-weight: 800; white-space: nowrap; animation: pop .2s ease; }
.nlabel .bubble::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #fff; }
.nlabel .tok { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.nlabel.flash { animation: lblflash .9s ease; }
@keyframes lblflash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px rgba(232,210,122,.9), 0 0 18px rgba(232,210,122,.8); background: rgba(232,210,122,.35); } }
canvas.can-touch { cursor: pointer; }

/* mobile controls guide (one-time) */
.mguide { position: absolute; inset: 0; z-index: 30; background: rgba(6,9,14,.72); color: #fff; pointer-events: auto; }
.mg-item { position: absolute; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px dashed rgba(255,255,255,.45); font-size: 14px; }
.mg-item small { font-size: 11.5px; color: rgba(255,255,255,.75); }
.mg-stick { left: 16px; bottom: 150px; } .mg-tap { left: 30%; top: 46%; } .mg-drag { right: 18px; top: 38%; }
.mg-runner { left: 18px; top: 30%; } .mg-note { right: 18px; top: 52%; } .mg-btns { right: 16px; bottom: 80px; max-width: 60vw; }
.mg-close { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font-weight: 700; color: var(--accent); }
.hud-compass { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #f4e7b4; }
.hud-compass .arrow { display: inline-block; transition: transform .2s ease; }
.note-card { text-align: center; }
.note-card .kind-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: rgba(232,210,122,.2); color: #f4e7b4; }
.note-card.k-healing .kind-chip { background: rgba(143,214,148,.2); color: #b9ecbd; } .note-card.k-park .kind-chip { background: rgba(92,200,240,.2); color: #b8e6ff; } .note-card.k-friend .kind-chip { background: rgba(239,154,180,.22); color: #ffc6d6; }
.note-text { font-size: 19px; font-weight: 700; line-height: 1.45; margin: 14px 4px 6px; padding: 16px; border-radius: 14px; background: #fff8e8; color: #2a2420; }
.note-by { margin: 0 0 4px; color: var(--muted); }
.notebox .nb-search { width: 100%; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--text); padding: 0 12px; margin: 6px 0 4px; }
.nb-item { width: 100%; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 10px; }
.nb-item:hover { background: rgba(255,255,255,.06); }
.nb-item small { color: var(--muted); font-size: 11.5px; }
.stamp-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.stamp { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 18px; opacity: .55; }
.stamp.on { opacity: 1; background: rgba(232,210,122,.12); }
.stamp small { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.2; }
.free-row .foot svg, .bm-title .foot svg { width: 16px; height: 16px; color: var(--accent); }
.bm-legend .free-row small.sub { display: block; font-size: 10.5px; color: var(--muted); }

/* keep the 4-emote action bar clear of the HUD on mid-width screens */
@media (min-width: 641px) and (max-width: 1180px) { .actions { left: 336px; transform: none; } }
.tip-card { text-align: center; }
.tip-body .tip-ic { font-size: 44px; line-height: 1.2; }
.tip-body b { font-size: 18px; display: block; margin: 4px 0; }
.tip-body p { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.tip-dots { display: flex; gap: 6px; justify-content: center; margin: 4px 0; }
.tip-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); }
.tip-dots i.on { background: var(--accent); }
.tip-card .row-btns { justify-content: center; }

/* Today's Run */
.today-btn { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: rgba(232,210,122,.15); color: #f4e7b4; }
.rec-tabs { margin-bottom: 10px; max-width: 220px; }
.after-sum p { font-size: 14px; margin: 4px 0 8px; }
.panel.center.today-panel { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; }
.today .td-head { display: flex; gap: 14px; align-items: center; }
.today .td-head img { width: 96px; height: 96px; object-fit: contain; }
.today .td-head h2 { margin: 0; font-size: 22px; color: var(--accent); }
.today .td-head p { margin: 2px 0 6px; color: var(--muted); font-size: 13px; }
.today .empty { color: var(--muted); font-size: 13px; }
.td-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.td-tiles div { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); }
.td-tiles div.big { grid-column: 1 / -1; }
.td-tiles small { display: block; font-size: 11px; color: var(--muted); }
.td-tiles b { font-size: 20px; font-variant-numeric: tabular-nums; }
.td-tiles .big b { font-size: 34px; }
.td-tiles i { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 3px; }
.td-map { display: block; margin: 0 auto; border-radius: 14px; }
.td-list { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.td-list li { display: grid; grid-template-columns: 48px 1fr 70px 64px 56px auto; gap: 6px; align-items: center; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
.td-list .c i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; }
.td-list em { font-style: normal; font-size: 11px; color: #9be3a6; }
.td-list em.idle { color: #b9c2ff; }
.td-streak { text-align: center; color: var(--accent); font-weight: 700; margin: 10px 0 2px; }
.td-foot { text-align: center; color: var(--muted); font-size: 12px; margin: 0 0 6px; }
@media (max-width: 640px) { .td-tiles { grid-template-columns: repeat(2, 1fr); } .td-list li { grid-template-columns: 44px 1fr 64px auto; } .td-list li span:nth-child(4), .td-list li span:nth-child(5) { display: none; } }

/* actions */
.actions { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom)); height: 52px; padding: 0 8px; gap: 4px; }
.actions button { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 999px; font-size: 13px; }
.actions button:hover { background: rgba(255,255,255,.08); }
.actions button:active { transform: scale(.97); }

/* joystick */
.joystick { position: absolute; left: 22px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 70px); width: 120px; height: 120px; border-radius: 50%; background: rgba(20,24,22,.35); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); touch-action: none; display: grid; place-items: center; }
.joystick .knob { width: 52px; height: 52px; border-radius: 50%; background: rgba(232,210,122,.85); box-shadow: 0 4px 16px rgba(0,0,0,.35); pointer-events: none; }

/* fade */
.fade { position: absolute; inset: 0; background: #05070c; opacity: 0; transition: opacity .3s ease; }
.fade.on { opacity: 1; }

/* panels */
.panel { position: absolute; top: calc(max(16px, env(safe-area-inset-top)) + 52px); right: 210px; width: 360px; max-height: calc(100vh - 100px); overflow: auto; padding: 14px 16px 16px; background: var(--glass-strong); animation: pop .22s ease; }
.panel.noanim { animation: none; }
.panel.anchor-left { left: 336px; right: auto; top: auto; bottom: max(16px, env(safe-area-inset-bottom)); }
.panel.center { left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); animation: none; width: 380px; }
.panel.wide { width: min(760px, calc(100vw - 32px)); right: 16px; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.panel-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.panel-hd h2 { margin: 0; font-size: 16px; font-weight: 700; }
.panel-hd .x { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.panel-hd .x:hover { background: rgba(255,255,255,.08); color: var(--text); }
.panel h3 { font-size: 12px; color: var(--muted); font-weight: 600; margin: 14px 0 8px; }
.muted { color: var(--muted); font-size: 12.5px; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.course-list { display: flex; flex-direction: column; gap: 6px; }
.course-item { display: flex; gap: 10px; align-items: center; text-align: left; padding: 6px; border-radius: 14px; border: 1px solid transparent; }
.course-item:hover { background: rgba(255,255,255,.05); }
.course-item.sel { background: rgba(232,210,122,.1); border-color: rgba(232,210,122,.35); }
.course-item canvas { width: 56px; height: 56px; border-radius: 10px; background: rgba(0,0,0,.25); flex: none; }
.course-item b { display: block; font-size: 14px; }
.course-item small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.course-item i { display: block; font-size: 11px; color: rgba(255,255,255,.35); font-style: normal; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg.three { grid-template-columns: repeat(3, 1fr); }
.seg.pace-grid { row-gap: 4px; }
.seg.two { grid-template-columns: repeat(2, 1fr); }
.seg.two.pace-grid button { flex-direction: row; justify-content: space-between; gap: 6px; padding: 6px 10px; min-height: 36px; font-size: 12.5px; }
.seg.two.pace-grid button small { font-size: 11px; white-space: nowrap; }
.seg.pace-grid button.locked { opacity: .5; cursor: not-allowed; }
.seg.pace-grid button.locked small { color: var(--muted); }
.seg.four { grid-template-columns: repeat(4, 1fr); }
.seg.five { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.seg.five button { font-size: 12.5px; }
.time-status { margin: 8px 0 0; }
.seg button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 6px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid transparent; font-size: 13px; font-weight: 600; }
.seg button small { font-size: 11px; color: var(--muted); font-weight: 400; }
.seg button.on { background: rgba(232,210,122,.14); border-color: rgba(232,210,122,.45); color: #f4e7b4; }

.slider { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; font-size: 13px; }
.slider input { width: 100%; accent-color: var(--accent); }

.share .shot { width: 100%; border-radius: 12px; display: block; background: #000; aspect-ratio: 16 / 10; object-fit: cover; }
.share .link { word-break: break-all; }

.vlist, .slist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vlist li { display: flex; gap: 10px; align-items: center; padding: 7px 6px; border-radius: 10px; }
.vlist li.self { background: rgba(232,210,122,.08); }
.vlist .em { font-size: 20px; width: 26px; text-align: center; }
.vlist b { display: block; font-size: 13.5px; font-weight: 600; }
.vlist small { font-size: 12px; color: var(--muted); }
.slist button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px; border-radius: 10px; font-size: 13.5px; }
.slist button span { display: flex; gap: 8px; align-items: center; }
.slist button:hover { background: rgba(255,255,255,.06); }
.slist button.cur { background: rgba(232,210,122,.1); color: #f4e7b4; }
.slist b { font-weight: 600; color: var(--muted); }

.help table { width: 100%; border-collapse: collapse; font-size: 13px; }
.help td { padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.06); }
.help td:first-child { width: 42%; }

.records .empty { text-align: center; padding: 32px 0; color: var(--muted); font-size: 14px; }
.tbl-wrap { overflow-x: auto; }
table.rec { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.rec th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11.5px; padding: 6px; border-bottom: 1px solid rgba(255,255,255,.1); white-space: nowrap; }
table.rec td { padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,.05); white-space: nowrap; }
table.rec tfoot td { color: var(--accent); font-weight: 700; border-bottom: 0; padding-top: 10px; }
table.rec .del { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
table.rec .del:hover { color: var(--danger); background: rgba(255,138,122,.1); }

.confirm p:first-child { font-size: 16px; font-weight: 600; margin: 4px 0; }
.sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.sum-grid div { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.sum-grid b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.splits { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.splits li { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.04); font-size: 12.5px; }

/* loading + picker */
#loading, #exit { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; min-height: 100dvh; background: radial-gradient(120% 90% at 50% 100%, #3a2a3e 0%, #121a30 45%, #070a14 100%); transition: opacity .6s ease; }
#loading.done { opacity: 0; pointer-events: none; }
/* margin:auto centres the whole group vertically and horizontally, and stays scroll-safe when taller than the viewport */
.ld-box { margin: auto; text-align: center; padding: 24px 16px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ld-head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ld-head h1, .ld-head p { margin: 0; }
.ld-icon { width: 54px; height: 54px; color: var(--accent); }
#loading h1, #exit h1 { font-size: 26px; margin: 10px 0 6px; letter-spacing: -.02em; }
.ld-sub { color: var(--muted); font-size: 14px; margin: 0; }
.ld-dots { display: flex; gap: 6px; justify-content: center; margin-top: 18px; }
.ld-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .3; animation: dot 1.2s infinite; }
.ld-dots i:nth-child(2) { animation-delay: .2s; } .ld-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 50% { opacity: 1; } }
#loading.picking .ld-dots, #loading.picking .ld-sub { display: none; }
#loading.error .ld-sub { color: var(--danger); }
#exit .btn { margin-top: 20px; }
.picker { animation: pop .3s ease; width: min(760px, calc(100vw - 64px)); margin: 0 auto; }
.picker h2 { font-size: 18px; margin: 18px 0 4px; }
.picker .cards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 16px 0 20px; }
.picker .card { width: 132px; padding: 10px 8px 12px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .15s, background .15s; }
.picker .card:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); }
.picker .card.sel { background: rgba(232,210,122,.14); border-color: rgba(232,210,122,.6); }
.picker .card img:not(.jelly) { width: 110px; height: 110px; object-fit: contain; }
.picker .card .big { font-size: 64px; line-height: 110px; }
.picker .card b { font-size: 14px; }
.picker .card small { font-size: 11.5px; color: var(--muted); }
.picker .enter { min-width: 180px; height: 44px; font-size: 15px; }
.picker.inpanel .cards { margin: 4px 0; }
.picker.inpanel .card { width: 120px; }

/* tablet / small laptop */
@media (max-width: 1100px) {
  .panel { right: 16px; }
  .panel.anchor-left { left: 16px; bottom: 16px; }
}
@media (max-height: 760px) {
  .minimap { width: 140px; height: 250px; }
}
/* phones */
@media (max-width: 640px) {
  .hdr-left { left: 10px; gap: 6px; }
  .hdr-left .circle { width: 36px; height: 36px; }
  .brand { height: 36px; padding: 0 10px; font-size: 13px; }
  .brand .brand-name, .brand .sep { display: none; }
  .room-btn { font-size: 12px; }
  .hdr-right { right: 10px; }
  .hdr-row { flex-direction: column; align-items: flex-end; gap: 6px; }
  .jelly-pill { height: 32px; padding: 0 10px; font-size: 12px; }
  .app-btn { height: 36px; padding: 0 10px; }
  .people { height: 36px; padding: 0 10px; }
  .tools { flex-direction: column; height: auto; padding: 4px; border-radius: 22px; }
  .tools button { width: 32px; height: 32px; }
  .minimap { width: 92px; height: 164px; border-radius: 12px; }
  .hint { display: none; }
  /* phones: under the vertical tools column, narrower, never over the HUD (left) */
  .toasts { top: calc(max(16px, env(safe-area-inset-top)) + 420px); right: 10px; width: 70vw; }
  #ui.mm-open .toasts { right: 10px; top: calc(max(16px, env(safe-area-inset-top)) + 600px); }
  .toast { font-size: 12px; }
  .hud { top: calc(max(16px, env(safe-area-inset-top)) + 46px); bottom: auto; left: 10px; width: calc(100vw - 72px); max-width: 300px; padding: 10px; gap: 8px; }
  .hud-stats b { font-size: 15px; }
  .course-pill { padding: 6px 8px; font-size: 13px; }
  .hud-row .together, .hud-row .net-mode { display: none; }
  .hud-row:not(:has(.badge:not([hidden]))) { display: none; }
  .hud-btns .btn { height: 34px; font-size: 12.5px; padding: 0 10px; }
  .hud-stats { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  #ui.mm-open .hud { width: calc(100vw - 124px); }
  .hud-boost .boost-btn { height: 30px; }
  .hud-btns .auto-btn { height: 28px; font-size: 11.5px; }
  .hud-stats small { font-size: 9.5px; white-space: nowrap; }
  .hud-stats i { display: none; }
  .auto-btn kbd, .actions kbd { display: none; }
  .actions { height: 48px; left: auto; right: 10px; transform: none; bottom: max(14px, env(safe-area-inset-bottom)); padding: 0 4px; }
  .actions button { padding: 0 9px; gap: 4px; font-size: 12px; }
  .actions button span { display: none; }
  .actions button svg { width: 22px; height: 22px; }
  .joystick { left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .panel, .panel.anchor-left, .panel.center, .panel.wide { left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 78vh; transform: none; border-radius: 20px 20px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); animation: sheet .25s ease; }
  @keyframes sheet { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
  .pill-row { top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 132px); left: 16px; }
  .music-dock { right: 10px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 58px); width: 220px; padding: 8px; }
  .music-dock.collapsed { gap: 4px; }
  .panel.music { right: 0; }
  .picker .card { width: 96px; }
  .picker .card img:not(.jelly) { width: 80px; height: 80px; }
  .picker .card .big { font-size: 48px; line-height: 80px; }
}

/* =====================================================================================
   Phone layout — html.is-phone is set by ui.js from
   matchMedia('(max-width: 599px), (max-height: 480px) and (orientation: landscape)')  (phones only; tablets keep desktop)
   so CSS and JS behaviour switch together. Everything respects the safe areas.
   ===================================================================================== */
/* phone-only elements: hidden on desktop */
.more-btn, .more-menu, .hud-strip, .strip-compass, .hud-back, .run-stop, .antidote-fab, .boost-fab, .hud-sheet-hd { display: none; }
.cloud-slot { display: contents; }
.cloud-slot:empty { display: none; }

html.is-phone {
  --st: max(10px, env(safe-area-inset-top)); --sb: max(12px, env(safe-area-inset-bottom));
  --sl: max(10px, env(safe-area-inset-left)); --sr: max(10px, env(safe-area-inset-right));
}
/* header: row 1 = [exit][room]  ……  [jelly][people][⋯]; row 2 = [HUD strip ……][cloud][map][settings]
   (--hdr-r1 / --hdr-r2 = measured widths of the right-hand rows, set by ui.js) */
.room-short { display: none; }
html.is-phone #ui .hdr-left { top: var(--st); left: var(--sl); gap: 6px; }
html.is-phone #ui .hdr-left .circle { width: 34px; height: 34px; }
html.is-phone #ui .brand { height: 34px; padding: 0 10px; font-size: 12.5px; gap: 6px; min-width: 0; max-width: max(64px, calc(100vw - var(--sl) - var(--sr) - 48px - var(--hdr-r1, 170px))); }
html.is-phone #ui .brand .brand-icon, html.is-phone #ui .brand .brand-name, html.is-phone #ui .brand .sep, html.is-phone #ui .room-name { display: none; }
html.is-phone #ui .room-btn { min-width: 0; font-size: 12.5px; color: var(--text); }
html.is-phone #ui .room-short { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
html.is-phone #ui .hdr-right { top: var(--st); right: var(--sr); z-index: 7; gap: 6px; }
html.is-phone #ui .hdr-row { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; max-width: calc(100vw - var(--sl) - var(--sr) - 110px); }
/* the wrapped row's box is wider than its items: let taps through to the HUD strip underneath */
html.is-phone #ui .hdr-right, html.is-phone #ui .hdr-row { pointer-events: none; }
html.is-phone #ui .hdr-row > *, html.is-phone #ui .more-menu, html.is-phone #ui .mm-wrap { pointer-events: auto; }
html.is-phone #ui .hdr-row::after { content: ''; order: 4; flex: 0 0 100%; height: 0; }
html.is-phone #ui .hdr-row > .jelly-pill { order: 1; height: 34px; padding: 0 10px; font-size: 12.5px; }
html.is-phone #ui .hdr-row > .people { order: 2; height: 34px; padding: 0 9px; gap: 4px; }
html.is-phone #ui .hdr-row > .more-btn { order: 3; display: grid; width: 34px; height: 34px; }
html.is-phone #ui .hdr-row > .cloud-slot { display: flex; order: 5; align-items: center; }
html.is-phone #ui .hdr-row > .cloud-slot:empty { display: none; }
html.is-phone #ui .hdr-row > .tools { order: 6; flex-direction: row; height: 34px; padding: 0 2px; border-radius: 999px; }
html.is-phone #ui .tools button { width: 30px; height: 30px; }
html.is-phone #ui .tools button:not([data-act="minimap"]):not([data-act="settings"]) { display: none; }
html.is-phone #ui .pill-row, html.is-phone #ui .hint { display: none; }
html.is-phone #ui .minimap { width: 92px; height: 164px; border-radius: 12px; }
/* ⋯ overflow menu (items keep their data-act → same click delegation) */
html.is-phone #ui .more-menu { display: flex; position: absolute; top: 40px; right: 0; width: min(250px, calc(100vw - 20px)); flex-direction: column; gap: 2px; padding: 6px; background: var(--glass-strong); animation: pop .18s ease; }
html.is-phone #ui .more-menu[hidden] { display: none; }
html.is-phone #ui .more-menu button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 14px; text-align: left; }
html.is-phone #ui .more-menu button:active { background: rgba(255,255,255,.1); }
html.is-phone #ui .more-menu .mi { width: 18px; text-align: center; font-size: 15px; }
html.is-phone #ui .more-menu .mi-ic { display: grid; }
html.is-phone #ui .more-menu .mi-app { color: #fff3c4; font-weight: 700; }
html.is-phone #ui .more-menu .mi-app img { width: 20px; height: 20px; border-radius: 5px; margin: 0 -1px; }
html.is-phone #ui .more-menu .off { color: var(--muted); }

/* compact HUD strip (row 2, left of people / map / settings) */
html.is-phone #ui .hud-strip { display: flex; position: absolute; top: calc(var(--st) + 40px); left: var(--sl); right: calc(var(--hdr-r2, 76px) + 6px); max-width: 440px; height: 34px; padding: 0 6px 0 11px; align-items: center; gap: 4px; font-size: 12px; text-align: left; }
html.is-phone #ui.run-active .hud-strip { border-color: rgba(232,210,122,.4); }
html.is-phone #ui .hs-txt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
html.is-phone #ui .hs-txt > * { flex: none; }
html.is-phone #ui .hs-txt > * + *::before { content: '·'; margin: 0 4px; color: var(--muted); font-weight: 400; }
html.is-phone #ui .hs-course { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
html.is-phone #ui .hs-course::before { content: none; }
html.is-phone #ui .hs-badge { flex: none; font-size: 10.5px; padding: 2px 6px; background: rgba(240,194,123,.18); color: #f0c27b; }
html.is-phone #ui .hs-badge.hs-idle { background: rgba(124,140,245,.2); color: #b9c2ff; }
html.is-phone #ui .hs-chev { display: grid; color: var(--muted); }
html.is-phone #ui .hs-chev svg { width: 14px; height: 14px; }
html.is-phone #ui .strip-compass { display: flex; position: absolute; top: calc(var(--st) + 80px); left: var(--sl); max-width: calc(100vw - var(--sl) - var(--sr) - 110px); padding: 4px 10px; border-radius: 999px; background: rgba(20,24,22,.5); border: 1px solid var(--stroke); white-space: nowrap; overflow: hidden; pointer-events: none; }
html.is-phone #ui .strip-compass[hidden] { display: none; }
html.is-phone #ui.hud-open .strip-compass { display: none; }

/* full HUD card → bottom sheet while expanded */
html.is-phone #ui .hud { display: none; }
html.is-phone #ui.hud-open .hud { display: flex; position: absolute; z-index: 6; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: 600px; margin: 0 auto; max-height: calc(100% - var(--st) - 84px); overflow: auto; padding: 6px 16px calc(var(--sb) + 8px); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); gap: 10px; border-radius: 20px 20px 0 0; background: var(--glass-strong); animation: sheet-up .25s ease; }
html.is-phone #ui.hud-open .hud-back { display: block; position: absolute; inset: 0; z-index: 5; background: rgba(4,6,10,.35); }
html.is-phone #ui .hud-sheet-hd { display: flex; position: relative; justify-content: center; align-items: center; height: 26px; margin-bottom: -4px; }
html.is-phone #ui .hud-sheet-hd .grab { width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.25); }
html.is-phone #ui .hud-x { position: absolute; right: -6px; top: -2px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
html.is-phone #ui .hud-stats b { font-size: 20px; }
html.is-phone #ui .hud-stats small { font-size: 11px; }
html.is-phone #ui .course-pill { padding: 8px 10px; font-size: 14px; }
html.is-phone #ui .hud-btns .session-btn { height: 46px; font-size: 15px; }
html.is-phone #ui .hud-btns .auto-btn { height: 38px; font-size: 12.5px; }
html.is-phone #ui .hud-boost .boost-btn { height: 36px; }
html.is-phone #ui .hud kbd { display: none; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* floating run controls */
html.is-phone #ui .run-stop { display: inline-flex; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--sb) + 4px); height: 36px; padding: 0 14px; font-size: 13px; background: rgba(60,24,22,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html.is-phone #ui .run-stop[hidden], html.is-phone #ui .antidote-fab[hidden] { display: none; }
html.is-phone #ui .antidote-fab { display: inline-flex; position: absolute; left: 50%; transform: translateX(-50%); width: auto; bottom: calc(var(--sb) + 50px); padding: 0 16px; height: 40px; z-index: 3; }
html.is-phone #ui .boost-fab { display: grid; place-items: center; position: absolute; right: calc(var(--sr) + 6px); bottom: calc(var(--sb) + 4px); width: 52px; height: 52px; border-radius: 50%; font-size: 22px; background: rgba(20,24,22,.55); border: 1px solid rgba(232,210,122,.55); box-shadow: 0 6px 20px rgba(0,0,0,.3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html.is-phone #ui .boost-fab .bf-n { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
html.is-phone #ui .boost-fab:disabled { opacity: .45; }
html.is-phone #ui .boost-fab.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,210,122,.25), 0 6px 20px rgba(0,0,0,.3); }
html.is-phone #ui .boost-fab.cd { background: conic-gradient(rgba(232,210,122,.45) var(--cd, 0deg), rgba(20,24,22,.55) 0); }
/* action bar → three 44 px round buttons stacked above ⚡ */
html.is-phone #ui .actions { left: auto; right: calc(var(--sr) + 10px); bottom: calc(var(--sb) + 66px); transform: none; height: auto; padding: 0; gap: 10px; flex-direction: column; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.is-phone #ui .actions button { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; background: var(--glass); border: 1px solid var(--stroke); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
html.is-phone #ui .actions button span, html.is-phone #ui .actions kbd { display: none; }
html.is-phone #ui .actions button svg { width: 21px; height: 21px; }
/* joystick: 96 px, bottom-left, semi-transparent */
html.is-phone #ui .joystick { left: calc(16px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); width: 96px; height: 96px; background: rgba(20,24,22,.26); border-color: rgba(255,255,255,.14); opacity: .9; }
html.is-phone #ui .joystick .knob { width: 40px; height: 40px; background: rgba(232,210,122,.75); }
/* toasts: under the header rows (left of the minimap when open) */
html.is-phone #ui .toasts { top: calc(var(--st) + 112px); right: var(--sr); width: 70vw; }
html.is-phone #ui.mm-open .toasts { right: calc(var(--sr) + 100px); width: calc(100vw - var(--sl) - var(--sr) - 104px); }
html.is-phone #ui .toast { font-size: 12px; }
/* panels: bottom sheets (also 641–768 px) */
html.is-phone #ui .panel, html.is-phone #ui .panel.anchor-left, html.is-phone #ui .panel.center, html.is-phone #ui .panel.wide, html.is-phone #ui .panel.music { left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: none; max-height: calc(100% - var(--st) - 84px); transform: none; border-radius: 20px 20px 0 0; padding-bottom: calc(var(--sb) + 4px); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); animation: sheet-up .25s ease; }
/* while a sheet is open, hide the floating controls under it */
html.is-phone #ui.hud-open :is(.actions, .boost-fab, .run-stop, .joystick),
html.is-phone #ui.sheet-open :is(.actions, .boost-fab, .run-stop, .joystick, .antidote-fab),
html.is-phone #ui.music-open :is(.actions, .boost-fab, .run-stop, .joystick, .antidote-fab) { visibility: hidden; }

/* music on phones: never a floating dock — a bottom sheet that plays only while open */
html.is-phone #ui .music-dock:not(.msheet) { display: none; }
.msheet-back { position: absolute; inset: 0; z-index: 9; display: flex; align-items: flex-end; background: rgba(4,6,10,.45); }
.msheet-back[hidden] { display: none; }
#ui .music-dock.msheet { position: relative; right: auto; bottom: auto; width: 100%; max-height: calc(100% - var(--st, 16px) - 48px); padding: 12px 16px calc(var(--sb, 16px) + 6px); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); gap: 8px; border-radius: 20px 20px 0 0; background: var(--glass-strong); animation: sheet-up .25s ease; }
.msheet .md-top { align-items: center; }
.msheet .md-meta b { font-size: 15px; }
.msheet .md-close { width: 36px; height: 36px; font-size: 15px; }
.msheet .ms-scroll { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.msheet .yt-holder { flex: none; }
.msheet .md-ctrls { justify-content: center; gap: 8px; }
.msheet .md-ctrls .md-btn { height: 38px; min-width: 44px; font-size: 15px; }
.msheet .ms-note { margin: 2px 0 0; text-align: center; }
.msheet .ms-yt { align-self: center; height: 38px; }
.msheet .mp-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 2px; }
.msheet .ms-legal { margin: 4px 0 0; font-size: 11px; text-align: center; }

/* entry steps: fit 390×844 without scrolling */
html.is-phone #loading.picking .ld-box { padding: calc(var(--st) + 30px) 12px calc(var(--sb) + 4px); gap: 6px; }
html.is-phone #loading.picking .ld-tag { font-size: 12px; margin-bottom: 4px; }
html.is-phone #loading.picking .ld-head { gap: 2px; }
@media (max-height: 760px) { html.is-phone #loading.picking .flight, html.is-phone #loading.picking .ld-logo { display: none; } }
html.is-phone .picker { width: calc(100vw - 24px); }
html.is-phone .course-step h2 { margin: 6px 0 2px; font-size: 17px; }
html.is-phone .course-step > .muted { margin: 0 0 8px; }
html.is-phone .course-step .bigmap { gap: 8px; }
html.is-phone .course-step .bm-side { display: flex; flex-direction: column; gap: 4px; width: 100%; max-height: none; overflow: visible; }
html.is-phone .course-step .bm-side h3, html.is-phone .course-step .bm-explore { display: none; }
html.is-phone .course-step .bm-legend { order: -1; flex-direction: row; gap: 6px; overflow-x: auto; padding: 0 0 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html.is-phone .course-step .bm-legend::-webkit-scrollbar { display: none; }
html.is-phone .course-step .bm-legend li { flex: none; }
html.is-phone .course-step .bm-legend button { width: auto; white-space: nowrap; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); font-size: 12.5px; }
html.is-phone .course-step .bm-legend button small { display: none; }
html.is-phone .course-step .bm-legend button.on { border-color: rgba(232,210,122,.6); }
html.is-phone .course-step .bm-card .muted, html.is-phone .course-step .bm-card p { margin: 2px 0; }
html.is-phone .course-step .seg.run-mode { margin-top: 4px; }
html.is-phone .course-step .btn.enter-big { height: 50px; margin-top: 6px; }

.settings .ios-silent { font-size: 12px; margin: 4px 0 2px; }

/* ---------- "Get the Wittiz app" placements ---------- */
.app-cta-btn { width: 100%; height: 46px; margin-top: 12px; justify-content: center; gap: 9px; font-size: 13.5px; font-weight: 700; }
.app-cta-btn img { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.app-cta-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-app-link { display: block; margin: 8px auto 0; background: none; border: 0; color: var(--accent); font: inherit; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: .9; }

/* ---------- cloud account (Supabase) ---------- */
.cloud-slot:empty { display: none; }
.login-pill { height: 36px; padding: 0 14px; font-size: 13px; font-weight: 700; color: var(--accent); border-color: rgba(232,210,122,.5); }
.acct-pill { height: 36px; padding: 0 12px 0 4px; gap: 7px; font-size: 12.5px; max-width: 180px; }
.acct-pill .acct-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 13px; flex: none; }
.acct-pill .acct-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-pop { position: fixed; z-index: 25; min-width: 210px; padding: 8px; display: flex; flex-direction: column; gap: 2px; pointer-events: auto; }
.acct-pop .acct-who { display: flex; flex-direction: column; padding: 6px 10px 8px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 4px; }
.acct-pop button { text-align: left; padding: 9px 10px; border-radius: 10px; font-size: 13px; }
.acct-pop button:hover { background: rgba(255,255,255,.08); }
.login-sheet .oauth { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.login-sheet .oauth-btn { height: 44px; justify-content: center; font-weight: 700; }
.login-sheet .or { text-align: center; font-size: 12px; margin: 2px 0; }
.login-sheet .email-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.login-sheet input, .acct-sec input { height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: inherit; padding: 0 12px; font: inherit; font-size: 16px; }
.login-sheet .status { min-height: 1.2em; font-size: 12.5px; }
.applying-chip { position: fixed; z-index: 30; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px); transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #2B2B2B; background: rgba(255,250,243,.9); box-shadow: 0 4px 12px rgba(60,40,0,.15); pointer-events: none; }
.applying-chip[hidden] { display: none; }
/* 스퍼트 energy bar: under the booster row (desktop) / above the ⚡ button (phones) */
.sprint-bar, .sprint-fab-bar { height: 5px; border-radius: 999px; background: rgba(43,43,43,.08); overflow: hidden; opacity: 0; transition: opacity .25s; }
.sprint-bar { margin-top: 6px; }
.sprint-bar.on, .sprint-fab-bar.on { opacity: 1; }
.sprint-bar i, .sprint-fab-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #FFD54A, #FF9F1C); transition: width .16s linear; }
.sprint-fab-bar { display: none; }
html.is-phone #ui .sprint-fab-bar { display: block; position: absolute; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: 52px; pointer-events: none; }
.login-sheet .code-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.login-sheet .code-form[hidden], .login-sheet .email-form[hidden], .login-sheet .oauth[hidden] { display: none; }
.login-sheet .code-lead { margin: 0; font-weight: 700; }
.login-sheet .code-in { text-align: center; letter-spacing: .5em; font-size: 24px !important; font-weight: 800; height: 52px !important; }
.login-sheet .link-alt { height: 36px; font-size: 12.5px; background: transparent; box-shadow: none; text-decoration: underline; }
.acct-sec { margin-bottom: 6px; }
.acct-sec .acct-row { display: flex; gap: 8px; }
.acct-sec .acct-row input { flex: 1; min-width: 0; }
.acct-sec .small { font-size: 12px; margin: 6px 0; }
.cloud-banner { position: fixed; z-index: 18; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 70px); width: min(520px, calc(100vw - 24px)); padding: 10px 10px 10px 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; pointer-events: auto; animation: pop .2s ease; }
.cloud-banner span { flex: 1; }
.cloud-banner .btn { height: 34px; flex: none; }
.cloud-banner .x { flex: none; width: 28px; height: 28px; border-radius: 50%; opacity: .7; }
html.is-phone .cloud-banner { top: calc(env(safe-area-inset-top, 0px) + 104px); }
.invite .inv-link { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); word-break: break-all; font-size: 12.5px; margin: 8px 0; }
.invite .inv-qr { display: grid; place-items: center; margin: 10px 0 4px; }
.invite .inv-qr svg { width: 168px; height: 168px; background: #fff; border-radius: 10px; }
.invite .inv-stats { text-align: center; font-weight: 700; margin-top: 6px; }

/* =====================================================================================
   WITTIZ APP THEME — bright "candy / toy" skin over the layout rules above.
   Layout (positions / sizes / phone breakpoints) lives above; this block only re-skins.
   ===================================================================================== */
/* ---- type ---- */
h1, h2, .panel-hd h2, .picker h2, .btn, .seg button, .hud-stats b, .hs-txt, .jelly-pill b, .td-tiles b, .sum-grid b,
.big-n, .shop-bal b, .tip-body b, .steps span, .course-pill .course-name, .bm-title b, .note-text, .td-streak,
.confirm p:first-child, .sheet > b, .people b, .lv, .nlabel em, .acct-av, .boost-fab, .bf-n, .frz-chip, .today .td-head h2 { font-family: var(--font-display); }
h1, h2, .panel-hd h2 { font-weight: 700; letter-spacing: -.01em; }
.btn, .seg button { font-weight: 500; letter-spacing: 0; }
.hud-stats b, .td-tiles b, .sum-grid b, .big-n { font-weight: 700; }
kbd { border-color: rgba(60,40,0,.14); color: var(--ink-2); background: rgba(255,255,255,.7); font-family: var(--font); }
button:focus-visible { outline: 3px solid rgba(255,159,28,.55); outline-offset: 2px; }

/* ---- surfaces ---- */
.glass { background: var(--cream-glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-glow), var(--shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.glass-box { background: var(--cream-glass); border: 1px solid var(--glass-border); border-radius: var(--r-card); box-shadow: var(--glass-glow), var(--shadow-lg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.glass .muted, .glass-box .muted, .hud-stats small, .hud-prog small, .hud-boost small { text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.circle:hover, .tools button:hover { background: var(--orange-soft); }
.muted { color: var(--ink-2); }

/* ---- buttons: chunky pills with an emboss edge ---- */
.btn { height: 42px; padding: 0 16px; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--emboss-soft); transition: transform .08s ease, box-shadow .08s ease, filter .15s; }
.btn:hover { background: #fff; filter: brightness(1.02); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(60,40,0,.10); }
.btn.primary { background: var(--orange); color: #fff; border-color: transparent; box-shadow: var(--emboss); }
.btn.primary:hover { background: var(--orange); filter: brightness(1.05); }
.btn.primary:active:not(:disabled) { box-shadow: 0 2px 0 var(--orange-d); }
.btn.buy { background: var(--gloss), var(--grad-hero); color: #fff; border-color: transparent; box-shadow: var(--emboss-hero); }
.btn.buy:active:not(:disabled) { box-shadow: 0 2px 0 var(--purple-d); }
.btn.danger, .btn.primary.danger { background: #FFE7E2; color: #D2412B; border-color: #FFCFC5; box-shadow: 0 3px 0 #F4B4A6; }
.btn:disabled { opacity: .45; box-shadow: none; }
.panel-hd .x, .mm-x { color: var(--ink-2); background: var(--cream-2); }
.panel-hd .x:hover, .mm-x:hover { background: var(--orange-soft); color: var(--orange-d); }

/* ---- header ---- */
.brand { font-size: 14px; }
.brand-icon, .brand-icon svg { color: var(--orange); }
.brand-name { font-family: var(--font-display); font-weight: 700; }
.sep { background: var(--line); }
.room-btn { color: var(--ink-2); }
.room-btn:hover { color: var(--orange-d); }
.hdr-left .circle, .more-btn { color: var(--orange); }
.people { color: var(--ink); }
.people span { color: var(--orange); display: grid; }
.people.local b::after { color: var(--orange-d); }
.tools button { color: var(--orange); }
.tools .off { color: #C9C2B6; }
.tools .map-tog.on { color: #fff; background: var(--orange); box-shadow: 0 2px 0 var(--orange-d); }
/* jelly counter: cream pill · paw icon left · orange + right */
.jelly-pill { gap: 6px; padding: 0 5px 0 10px; color: var(--ink); }
.jelly-pill img.jelly { width: 24px; height: 24px; margin: 0; vertical-align: middle; }
.jelly-pill b { font-size: 14px; font-weight: 700; }
.jelly-pill .jp-plus { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: #fff; font: 700 17px/1 var(--font-display); font-style: normal; box-shadow: 0 2px 0 var(--orange-d); margin-left: 2px; }
.jelly-pill:hover .jp-plus { filter: brightness(1.06); }
.app-btn { color: var(--orange-d); }
.lang-pill { background: var(--card); border: 1px solid var(--line); color: var(--ink-2); box-shadow: var(--shadow); font-family: var(--font-display); font-weight: 500; }
.lang-pill:hover { background: #fff; }
.lang-pill span.on { color: var(--orange); }
.hint { color: var(--ink); background: var(--cream-glass); border: 1px solid #fff; box-shadow: var(--shadow); }
.music-pill { color: var(--ink); }
.app-badge { color: #fff; background: var(--orange); border-color: transparent; box-shadow: var(--emboss), var(--shadow); }
.app-badge:hover { border-color: transparent; filter: brightness(1.05); }
.mm-wrap .minimap { border: 3px solid #fff; }

/* ---- toasts: white pills, orange accent ---- */
.toast { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 8px 16px; font-weight: 500; }
.toast.gold { border: 2px solid var(--orange); box-shadow: 0 4px 0 rgba(229,134,0,.35), var(--shadow); }
.toast.dim { color: var(--ink-2); background: rgba(255,255,255,.92); }

/* ---- 3D name labels ---- */
.nlabel { background: rgba(255,255,255,.96); color: var(--ink); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 4px 12px rgba(60,40,0,.18); font-weight: 600; padding: 3px 10px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nlabel em, .vlist em { background: var(--orange); color: #fff; box-shadow: 0 1.5px 0 var(--orange-d); }
.nlabel.self { border: 2px solid var(--orange); }
.nlabel.lm { background: rgba(255,248,226,.95); border-color: var(--yellow); color: #7A5600; font-weight: 700; }
.nlabel .zap { color: var(--orange); }
.nlabel.boost { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,159,28,.35), 0 0 16px rgba(255,159,28,.6); }
.nlabel .tok { background: var(--orange); color: #fff; font-weight: 700; }
.nlabel .bubble { color: var(--ink); box-shadow: 0 4px 12px rgba(60,40,0,.2); font-family: var(--font-display); font-weight: 500; }
.nlabel.immune { border-color: var(--blue); background-color: #EAF5FF; color: #1F5C9E; background-image: linear-gradient(100deg, transparent 20%, rgba(121,184,255,.55) 45%, transparent 70%); }
@keyframes lblflash { 0%, 100% { box-shadow: 0 4px 12px rgba(60,40,0,.18); } 30% { box-shadow: 0 0 0 4px rgba(255,159,28,.85), 0 0 18px rgba(255,159,28,.7); background: #FFF0DA; } }
/* freeze-tag chip: ice blue, 36 px tap target kept from the layout rule */
.nlabel .frz-chip { background: linear-gradient(180deg, #A8D4FF, var(--blue)); border: 2px solid #fff; color: #fff; text-shadow: 0 1px 0 rgba(30,90,160,.45); box-shadow: 0 3px 0 var(--blue-d), 0 6px 14px rgba(40,90,160,.25); font-weight: 700; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nlabel .frz-chip:hover { background: linear-gradient(180deg, #B8DCFF, #8BC2FF); border-color: #fff; box-shadow: 0 3px 0 var(--blue-d), 0 0 0 4px rgba(121,184,255,.3); }
.nlabel .frz-chip.go { background: linear-gradient(180deg, #FFB547, var(--orange)); border-color: #fff; color: #fff; text-shadow: 0 1px 0 rgba(160,80,0,.4); box-shadow: 0 3px 0 var(--orange-d), 0 6px 14px rgba(160,90,0,.25); }
/* level badge: purple name-tag pill */
.lv { background: var(--grad-hero); color: #fff; font-weight: 500; padding: 3px 7px; box-shadow: 0 1.5px 0 var(--purple-d); }

/* ---- HUD: light glass card, orange numbers ---- */
.hud.active { border-color: rgba(255,159,28,.55); }
.hud.boost { border-color: var(--orange); box-shadow: var(--glass-glow), 0 0 0 3px rgba(255,213,74,.7), var(--shadow-lg); }
.hud .course-pill { background: var(--card-glass); color: var(--ink); border-radius: 999px; padding: 9px 12px; box-shadow: var(--glass-glow), 0 2px 6px rgba(60,40,0,.06); }
.hud .course-pill:hover { background: #fff; }
.hud .course-pill .ci, .hud .course-pill .dir-ico { color: var(--orange); }
.hud .course-pill .chev, .hud .course-pill .lap-n { color: var(--ink-2); }
.hud .course-pill .course-name { font-weight: 700; }
.hud-stats small, .hud-stats i { color: #6F6A62; font-weight: 600; }
.hud-stats b { color: var(--orange); text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 2px 0 rgba(229,134,0,.18); font-size: 21px; }
.hud.boost .st-cur { color: var(--purple-b); }
.hud-row { color: var(--ink-2); }
.together b { color: var(--ink); }
.net-mode.online { color: var(--mint-d); }
.net-mode.local { color: var(--orange-d); }
.badge.paused { background: var(--orange-soft); color: var(--orange-d); }
.badge.idle-b { background: #EEF0FF; color: var(--purple-b); }
.hud-compass { color: var(--orange-d); font-weight: 700; }
.hud .pbar { background: rgba(60,40,0,.08); height: 6px; }
.pbar i { background: linear-gradient(90deg, var(--yellow), var(--orange)); }
.pbar.lv i { background: linear-gradient(90deg, var(--mint), var(--blue)); }
.hud-boost small, .hud-prog small { color: #6F6A62; }
.hud .boost-btn { background: var(--orange); color: #fff; border: 0; box-shadow: 0 3px 0 var(--orange-d); font-family: var(--font-display); font-weight: 500; }
.hud .boost-btn kbd { background: rgba(255,255,255,.3); border-color: transparent; color: #fff; }
.boost-btn.on, .hud .boost-btn.on { background: var(--yellow); color: #7A4A00; border-color: transparent; box-shadow: 0 3px 0 #D9A800, 0 0 18px rgba(255,213,74,.8); }
.boost-btn.cd, .hud .boost-btn.cd { background: conic-gradient(var(--orange) var(--cd, 0deg), #FFD9A6 0); }
.hud-btns .auto-btn { background: var(--card-glass); color: var(--ink); border: 1px solid var(--glass-border); box-shadow: var(--glass-glow), var(--emboss-soft); font-weight: 500; min-width: 0; max-width: 100%; overflow: hidden; }
.hud-btns .auto-btn kbd { background: var(--cream-2); border-color: transparent; }
.auto-btn .half { color: var(--ink-2); font-family: var(--font); }
.auto-btn.on, .hud-btns .auto-btn.on { background: var(--orange); color: #fff; border-color: transparent; box-shadow: 0 3px 0 var(--orange-d); }
.auto-btn.on .half { color: rgba(255,255,255,.9); }
/* the single hero action: Start run */
.hud-btns .btn.session-btn:not(.danger) { height: 54px; border-radius: 999px; background: var(--gloss), var(--grad-hero); color: #fff; border: 2px solid rgba(255,255,255,.7); box-shadow: var(--emboss-hero), 0 10px 20px rgba(79,70,229,.3); font-size: 17px; font-weight: 700; }
.hud-btns .btn.session-btn:not(.danger) svg { width: 20px; height: 20px; fill: #fff; }
.hud-btns .btn.session-btn:not(.danger):active { transform: translateY(2px); box-shadow: 0 2px 0 var(--purple-d), 0 6px 12px rgba(79,70,229,.25); }
.hud-btns .btn.session-btn.danger { height: 48px; }
.today-btn { background: var(--orange-soft); color: var(--orange-d); font-weight: 700; }
.hud-jelly { color: var(--ink); }
/* antidote: ice-blue pill */
.antidote-btn { background: linear-gradient(180deg, #A8D4FF, var(--blue)); color: #fff; border: 2px solid #fff; box-shadow: 0 3px 0 var(--blue-d); text-shadow: 0 1px 0 rgba(30,90,160,.4); }
@keyframes antidote-pulse { 50% { box-shadow: 0 3px 0 var(--blue-d), 0 0 0 5px rgba(121,184,255,.35); } }

/* ---- action bar ---- */
.actions.glass { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); height: 56px; padding: 0 8px; }
.actions button { color: var(--ink); font-weight: 600; height: 42px; }
.actions button svg { color: var(--orange); width: 20px; height: 20px; }
.actions button:hover { background: var(--orange-soft); }
.actions kbd { background: var(--cream-2); }

/* ---- joystick ---- */
.joystick { background: rgba(255,255,255,.55); border: 2px solid rgba(255,255,255,.9); box-shadow: var(--shadow); }
.joystick .knob { background: var(--orange); box-shadow: 0 4px 0 var(--orange-d), 0 6px 14px rgba(60,40,0,.25); }

/* ---- music dock ---- */
.md-meta b { font-family: var(--font-display); font-weight: 500; }
.md-btn { background: var(--card); color: var(--ink); box-shadow: var(--emboss-soft); border: 1px solid var(--line); }
.md-btn:hover { background: var(--orange-soft); }
.md-btn.on, .md-play { background: var(--orange); color: #fff; border-color: transparent; box-shadow: 0 3px 0 var(--orange-d); }
.md-prog { background: var(--cream-2); height: 5px; }
.md-prog i { background: var(--orange); }
.yt-holder { border-radius: var(--r-well); }
.mp-list button:hover { background: var(--orange-soft); }
.mp-list button.cur { background: var(--orange-soft); color: var(--orange-d); }
.mp-n { color: var(--ink-2); }
.chip { background: var(--cream-2); color: var(--ink-2); }

/* ---- panels / sheets ---- */
.panel { padding: 16px 18px 18px; }
.panel-hd { margin-bottom: 10px; }
.panel-hd h2 { font-size: 18px; color: var(--orange); display: flex; align-items: center; gap: 6px; }
.panel-hd h2 .ph-emo { font-size: 18px; line-height: 1; font-family: var(--font); }
.panel h3 { font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--ink); margin: 16px 0 8px; }
.sheet-back { background: rgba(60,40,0,.25); }
.sheet { background: var(--cream-glass); border-radius: 24px; padding: 20px; }
.sheet b { color: var(--ink); }
.confirm p:first-child { font-weight: 500; }
.seg button { background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--emboss-soft); color: var(--ink); }
.seg button:hover { background: #fff; }
.seg button small { color: var(--ink-2); font-family: var(--font); }
.seg button.on { background: var(--orange); border-color: transparent; color: #fff; box-shadow: 0 3px 0 var(--orange-d); }
.seg button.on small { color: rgba(255,255,255,.9); }
.seg.two.pace-grid button, .seg.five button { border-radius: 16px; }
.slider input, .tog-row input { accent-color: var(--orange); }
.course-item { background: var(--card); border: 2px solid transparent; box-shadow: 0 2px 8px rgba(60,40,0,.06); }
.course-item:hover { background: #fff; border-color: var(--orange-soft); }
.course-item.sel { background: var(--orange-soft); border-color: var(--orange); }
.course-item canvas, .course-item .free-ico { background: #26355F; border-radius: 12px; }
.course-item i { color: var(--ink-2); }
.vlist li.self, .slist button.cur { background: var(--orange-soft); color: var(--orange-d); }
.slist button:hover { background: var(--orange-soft); }
.slist b { color: var(--ink-2); }
.help td { border-bottom-color: var(--line); }
.share .shot { background: var(--cream-2); border-radius: var(--r-well); }
/* records */
.records .tbl-wrap { background: var(--card); border-radius: var(--r-card); box-shadow: 0 2px 10px rgba(60,40,0,.06); padding: 4px 10px; }
table.rec th { color: var(--ink-2); border-bottom-color: var(--line); }
table.rec td { border-bottom-color: rgba(60,40,0,.05); }
table.rec tfoot td { color: var(--orange-d); }
table.rec .del:hover { background: #FFE7E2; }
.sum-grid div, .td-tiles div { background: var(--card); border-radius: var(--r-well); box-shadow: 0 2px 10px rgba(60,40,0,.06); }
.sum-grid small, .td-tiles small { color: var(--ink-2); }
.sum-grid div:first-child, .td-tiles div.big { background: linear-gradient(180deg, #FFAC33, var(--orange)); color: #fff; box-shadow: 0 4px 0 var(--orange-d); }
.sum-grid div:first-child small, .sum-grid div:first-child i, .td-tiles div.big small, .td-tiles div.big i { color: rgba(255,255,255,.9); }
.splits li { background: var(--card); box-shadow: 0 1px 4px rgba(60,40,0,.06); }
.next-lv { color: var(--orange-d); font-weight: 600; }
/* today */
.today .td-head h2 { color: var(--orange); }
.today .td-head img { background: var(--card); border-radius: 24px; box-shadow: var(--shadow); }
.td-map { box-shadow: var(--shadow); }
.td-list li { border-bottom-color: var(--line); }
.td-list em { color: var(--mint-d); }
.td-list em.idle { color: var(--purple-b); }
.td-streak { color: var(--orange-d); font-family: var(--font-display); font-weight: 500; }
/* tips */
.tip-dots i { background: #E5DCCB; }
.tip-dots i.on { background: var(--orange); }
/* notes */
.note-card .kind-chip { background: var(--orange-soft); color: var(--orange-d); }
.note-card.k-healing .kind-chip { background: #DDF7EC; color: #23845E; }
.note-card.k-park .kind-chip { background: var(--blue-soft); color: #2E6FB8; }
.note-card.k-friend .kind-chip { background: #FFE6DA; color: #C2603A; }
.note-text { background: var(--card); color: var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow); border: 2px dashed var(--peach); font-weight: 500; }
.notebox .nb-search, .login-sheet input, .acct-sec input { background: var(--card); color: var(--ink); border: 1.5px solid #E7DECF; border-radius: 999px; padding: 0 16px; }
.notebox .nb-search:focus, .login-sheet input:focus, .acct-sec input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,159,28,.2); }
.nb-item { background: var(--card); margin-bottom: 4px; border-radius: var(--r-well); box-shadow: 0 1px 6px rgba(60,40,0,.06); }
.nb-item:hover { background: var(--orange-soft); }
.stamp { background: var(--card); box-shadow: 0 1px 6px rgba(60,40,0,.06); border-radius: var(--r-well); }
.stamp.on { background: var(--orange-soft); box-shadow: inset 0 0 0 2px var(--orange); }
.hud-compass .arrow { color: var(--yellow); }

/* ---- shop ---- */
.shop-bal { align-items: center; padding: 10px 14px; border-radius: var(--r-card); background: var(--card); box-shadow: 0 2px 10px rgba(60,40,0,.06); }
.shop-bal b { color: var(--ink); font-size: 22px; }
.shop-bal b img.jelly { width: 34px; height: 34px; vertical-align: -9px; }
.card { background: var(--card); border: 2px solid transparent; box-shadow: 0 3px 12px rgba(60,40,0,.08); border-radius: var(--r-card); }
.card b { font-weight: 500; }
.card.locked img, .card.locked .big { filter: grayscale(.55) brightness(.95) opacity(.75); }
.card small.price-chip, .card.locked small { color: #fff; background: var(--orange); box-shadow: 0 2px 0 var(--orange-d); font-weight: 700; padding: 3px 10px; font-family: var(--font-display); }
.card small.own-tag { color: #23845E; background: #DDF7EC; padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.card.own { border-color: var(--mint); }
.shop-boost { background: var(--card); border-radius: var(--r-card); padding: 12px; box-shadow: 0 2px 10px rgba(60,40,0,.06); margin-bottom: 10px; }
.shop-boost .row-btns { justify-content: center; }
.big-n { color: var(--ink); }
.big-n small { color: var(--ink-2); }
.shop-courses li { background: var(--card); border-radius: var(--r-well); box-shadow: 0 1px 6px rgba(60,40,0,.06); }
.shop-courses li.soon > i { background: #E5DCCB; }
.app-cta { background: var(--orange-soft); }
.appdl .qr { box-shadow: var(--shadow); }

/* ---- big map ---- */
.bm-stage { background: #26355F; border-radius: 20px; box-shadow: var(--shadow); }
.bm-tip { background: #fff; color: var(--ink); border: 0; box-shadow: var(--shadow); }
.bm-start { color: var(--orange-d); font-weight: 600; }
.bm-lock, .bm-legend button em { color: var(--orange-d); }
.bm-legend button:hover { background: var(--orange-soft); }
.bm-legend button.on { background: var(--orange-soft); box-shadow: inset 0 0 0 2px var(--orange); }
.bm-title b { font-weight: 500; }
.free-row .foot svg, .bm-title .foot svg { color: var(--orange); }

/* ---- cover / entry ---- */
#loading, #exit { background:
  radial-gradient(2px 2px at 18% 9%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 72% 6%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 86% 15%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 34% 17%, rgba(255,255,255,.85) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 58% 13%, #fff 50%, transparent 51%),
  linear-gradient(180deg, #5E7FD0 0%, #8FB0EA 14%, #C9DBF6 28%, var(--cream) 46%) var(--cream); color: var(--ink); }
.ld-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 10px; padding: 8px 16px 8px 10px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); }
.ld-brand .ld-logo { margin: 0; }
.ld-jelly { width: 34px; height: 34px; object-fit: contain; display: block; }
.ld-logo { filter: none; opacity: 1; }
#loading.picking .ld-brand { padding: 5px 12px 5px 7px; margin-bottom: 4px; }
#loading.picking .ld-jelly { width: 26px; height: 26px; }
#exit .ld-brand, #exit .ld-logo { margin-bottom: 6px; }
#loading h1, #exit h1 { color: var(--ink); font-weight: 700; }
.ld-tag { color: var(--orange-d); font-weight: 700; }
.ld-park, .ld-sub { color: var(--ink-2); }
.ld-icon { color: var(--orange); }
.ld-dots i { background: var(--orange); }
.steps span { background: var(--card); color: var(--ink-2); box-shadow: 0 1px 4px rgba(60,40,0,.08); font-weight: 500; }
.steps span.on { background: var(--orange); color: #fff; box-shadow: 0 2px 0 var(--orange-d); }
.steps span.done { background: #DDF7EC; color: #23845E; }
.picker h2 { color: var(--ink); }
.picker .card { background: var(--card); border: 3px solid transparent; box-shadow: 0 4px 14px rgba(60,40,0,.10); border-radius: 24px; }
.picker .card:hover { background: #fff; }
.picker .card.sel { background: var(--orange-soft); border-color: var(--orange); box-shadow: 0 4px 0 var(--orange-d), 0 8px 18px rgba(229,134,0,.25); }
.picker .card small { color: var(--ink-2); }
.picker .enter, .btn.enter-big { border-radius: 999px; }
.btn.enter-big { height: 56px; font-size: 18px; }
.entry-app-link { color: var(--orange-d); }
.course-step .bm-side { background: var(--card); border-radius: var(--r-card); padding: 12px; box-shadow: 0 3px 12px rgba(60,40,0,.08); }

/* ---- misc overlays ---- */
.fade { background: var(--cream); }
.speedvig { background: radial-gradient(120% 95% at 50% 55%, transparent 55%, rgba(255,159,28,.28) 100%); }
.mguide { background: rgba(43,43,43,.62); }
.mg-item { background: rgba(255,255,255,.95); color: var(--ink); border: 2px dashed var(--orange); }
.mg-item small { color: var(--ink-2); }
.mg-close { color: #fff; font-family: var(--font-display); font-weight: 500; }

/* ---- cloud account ---- */
.login-pill { color: #fff; background: var(--orange); border-color: transparent; box-shadow: 0 3px 0 var(--orange-d), var(--shadow); font-family: var(--font-display); font-weight: 500; }
.acct-pill { color: var(--ink); }
.acct-pill .acct-av { background: var(--grad-hero); color: #fff; font-weight: 700; }
.acct-pop .acct-who { border-bottom-color: var(--line); }
.acct-pop button:hover { background: var(--orange-soft); }
.login-sheet .oauth-btn { background: var(--card); }
.cloud-banner { background: var(--card); border: 2px solid var(--orange); box-shadow: var(--shadow-lg); }
.cloud-banner .x { background: var(--cream-2); color: var(--ink-2); }
.invite .inv-link { background: var(--card); border: 1.5px dashed var(--orange); }
.invite .inv-stats { color: var(--orange-d); font-family: var(--font-display); font-weight: 500; }

/* ---- phone skin (layout rules above stay as they are) ---- */
@media (max-width: 640px) { .actions button svg { width: 22px; height: 22px; } }
html.is-phone #ui .more-menu { background: var(--cream-glass); }
html.is-phone #ui .more-menu button { color: var(--ink); }
html.is-phone #ui .more-menu button svg, html.is-phone #ui .more-menu .mi-ic { color: var(--orange); }
html.is-phone #ui .more-menu button:active { background: var(--orange-soft); }
html.is-phone #ui .more-menu .mi-app { color: var(--orange-d); }
html.is-phone #ui .more-menu .off { color: #C9C2B6; }
/* compact HUD strip: light glass, orange numbers */
html.is-phone #ui .hud-strip { color: var(--ink); }
html.is-phone #ui.run-active .hud-strip { border-color: rgba(255,159,28,.7); box-shadow: var(--glass-glow), 0 0 0 1.5px rgba(255,159,28,.5), var(--shadow); }
html.is-phone #ui .hs-txt > * + *::before { color: var(--ink-2); }
html.is-phone #ui .hs-txt { font-weight: 500; letter-spacing: -.01em; color: var(--orange); text-shadow: 0 1px 0 rgba(255,255,255,.7); }
html.is-phone #ui .hs-course { color: var(--ink); font-weight: 500; }
html.is-phone #ui .login-pill { height: 34px; padding: 0 12px; font-size: 12.5px; }
html.is-phone #ui .hs-badge { background: var(--orange-soft); color: var(--orange-d); }
html.is-phone #ui .hs-badge.hs-idle { background: #EEF0FF; color: var(--purple-b); }
html.is-phone #ui .hs-chev { color: var(--ink-2); }
html.is-phone #ui .strip-compass { background: var(--cream-glass); border: 1px solid var(--glass-border); color: var(--ink); box-shadow: var(--glass-glow), var(--shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
html.is-phone #ui .strip-compass .arrow { color: var(--orange); }
/* HUD bottom sheet: the same light glass card */
html.is-phone #ui.hud-open .hud { background: var(--glass-solid); border: 1px solid var(--glass-border); box-shadow: var(--glass-glow), 0 -8px 30px rgba(60,40,0,.18); }
html.is-phone #ui.hud-open .hud-back { background: rgba(60,40,0,.22); }
html.is-phone #ui .hud-sheet-hd .grab { background: rgba(60,40,0,.18); }
html.is-phone #ui .hud-x { color: var(--ink-2); }
html.is-phone #ui .hud-stats b { font-size: 22px; }
html.is-phone #ui .hud-btns .btn.session-btn:not(.danger) { height: 54px; }
/* floating run controls: glass pills */
html.is-phone #ui .run-stop { background: var(--glass-solid); color: #D2412B; border: 1px solid var(--glass-border); box-shadow: var(--glass-glow), 0 3px 0 #F4B4A6, var(--shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
html.is-phone #ui .boost-fab { background: var(--cream-glass); color: var(--orange); border: 1px solid var(--glass-border); box-shadow: var(--glass-glow), 0 4px 0 rgba(229,134,0,.45), var(--shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
html.is-phone #ui .boost-fab .bf-n { background: var(--grad-hero); color: #fff; box-shadow: 0 1.5px 0 var(--purple-d); }
html.is-phone #ui .boost-fab.on { background: var(--yellow); border-color: #fff; box-shadow: 0 4px 0 #D9A800, 0 0 0 4px rgba(255,213,74,.4), var(--shadow); }
html.is-phone #ui .boost-fab.cd { background: conic-gradient(var(--yellow) var(--cd, 0deg), #fff 0); }
/* round action buttons: white, orange icons */
html.is-phone #ui .actions { background: none; border: 0; box-shadow: none; height: auto; padding: 0; }
html.is-phone #ui .actions button { background: var(--cream-glass); border: 1px solid var(--glass-border); color: var(--orange); box-shadow: var(--glass-glow), 0 3px 0 rgba(229,134,0,.35), var(--shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
html.is-phone #ui .actions button:active { background: var(--orange-soft); }
html.is-phone #ui .joystick { background: rgba(255,255,255,.45); border: 2px solid rgba(255,255,255,.85); opacity: 1; }
html.is-phone #ui .joystick .knob { background: var(--orange); }
/* sheets on phones */
html.is-phone #ui .panel, html.is-phone #ui .panel.anchor-left, html.is-phone #ui .panel.center, html.is-phone #ui .panel.wide, html.is-phone #ui .panel.music { border-radius: 24px 24px 0 0; box-shadow: 0 -8px 30px rgba(60,40,0,.18); }
#ui .music-dock.msheet { background: var(--cream-glass); border-radius: 24px 24px 0 0; }
.msheet-back { background: rgba(60,40,0,.25); }
html.is-phone .course-step .bm-legend button { background: var(--card); border: 1.5px solid #E7DECF; color: var(--ink); }
html.is-phone .course-step .bm-legend button.on { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 2px 0 var(--orange-d); }
html.is-phone .course-step .bm-legend button.on em { color: #fff; }
html.is-phone .course-step .bm-side { background: none; box-shadow: none; padding: 0; }

/* ---- light frosted glass pass (keeps glassmorphism; dark text on light glass) ---- */
.toast, .actions.glass, .lang-pill, .hint, .cloud-banner, .acct-pop { background: var(--cream-glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-glow), var(--shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.toast { font-family: var(--font-display); font-weight: 500; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.toast.gold { border: 1.5px solid var(--orange); box-shadow: var(--glass-glow), 0 3px 0 rgba(229,134,0,.35), var(--shadow); }
.toast.dim { background: var(--cream-glass); font-family: var(--font); font-weight: 600; }
.cloud-banner { border: 1.5px solid rgba(255,159,28,.7); }
.panel, .sheet, .more-menu, #ui .music-dock.msheet { background: var(--cream-glass); }
/* phones: full-width bottom sheets cover most of the scene → a denser frost keeps long lists readable at night */
html.is-phone #ui .panel, html.is-phone #ui .music-dock.msheet, html.is-phone #ui .more-menu { background: var(--glass-solid); }
/* inner cards: white-ish, slightly translucent */
.course-item, .nb-item, .stamp, .card, .shop-bal, .shop-boost, .shop-courses li, .records .tbl-wrap, .sum-grid div, .td-tiles div, .splits li, .course-step .bm-side, .md-btn, .seg button { background-color: var(--card-glass); }
.course-item.sel, .stamp.on, .vlist li.self, .slist button.cur, .mp-list button.cur, .bm-legend button.on { background-color: rgba(255,240,218,.85); }
.seg button.on, .md-btn.on, .md-play { background-color: var(--orange); }
.td-tiles div.big, .sum-grid div:first-child { background: linear-gradient(180deg, #FFAC33, var(--orange)); }
.picker .card { background-color: rgba(255,255,255,.9); }
.picker .card.sel { background-color: var(--orange-soft); }
/* point text in SB 어그로; body stays Pretendard */
.course-item b, .bm-legend button span, .shop-courses li b, .mp-t b, .card b, .card small.price-chip, .note-card .kind-chip, .acct-pill .acct-nm, .people b { font-family: var(--font-display); font-weight: 500; }
.course-item b .sw, .bm-legend button span small { font-family: var(--font); }

/* touch tablets / foldable inner screens keep the desktop HUD (bottom-left), so the stick moves right of it */
@media (pointer: coarse) and (min-width: 600px) {
  html:not(.is-phone) #ui .joystick { left: auto; right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 300px); width: 110px; height: 110px; }
}

/* ===================== entry course step layout (all breakpoints; overrides the phone pass) =====================
   bigmap.js sizes the map canvas per breakpoint; this block lays out the columns and the course list. */
#loading .picker.course-step { width: min(1120px, calc(100vw - 32px)); }
#loading .course-step .bigmap.entry { display: flex; gap: 16px; align-items: stretch; justify-content: center; text-align: left; }
#loading .course-step .bigmap.entry .bm-stage { flex: none; max-width: 100%; }
#loading .course-step .bigmap.entry .bm-side { flex: 1 1 360px; min-width: 0; width: auto; max-height: none; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
#loading .course-step .bigmap.entry .bm-card { flex: none; }
#loading .course-step .bigmap.entry .seg.run-mode { display: grid; grid-template-columns: 1fr 1fr; }
#loading .course-step .bigmap.entry .seg.run-mode button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#loading .course-step .bigmap.entry .btn.enter-big { width: 100%; }
#loading .course-step .bigmap.entry .bm-side h3 { display: block; margin: 4px 0 0; flex: none; }
#loading .course-step .bigmap.entry .bm-legend { order: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 2px 2px 0; }
#loading .course-step .bigmap.entry .bm-legend li { min-width: 0; }
#loading .course-step .bigmap.entry .bm-legend button { width: 100%; min-width: 0; white-space: nowrap; display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 12px; font-size: 12.5px; }
#loading .course-step .bigmap.entry .bm-legend button > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#loading .course-step .bigmap.entry .bm-legend button small { display: inline; flex: none; font-size: 11px; white-space: nowrap; }
#loading .course-step .bigmap.entry .bm-legend button small.sub { display: none; }
#loading .course-step .bigmap.entry .bm-legend button em { flex: none; }
#loading .course-step .bigmap.entry .bm-explore { display: none; }
/* desktop ≥ 1024: map 58 % · controls column ≥ 360 px; the list scrolls inside the column (nothing below the fold) */
@media (min-width: 1024px) {
  #loading .course-step .bigmap.entry .bm-side { max-height: max(300px, min(62vh, calc(100vh - 340px), 640px)); }
}
/* tablet / foldable inner 600–1023: one column, controls under the map, list 2 columns */
@media (min-width: 600px) and (max-width: 1023px) {
  #loading .course-step .bigmap.entry { flex-direction: column; align-items: center; }
  #loading .course-step .bigmap.entry .bm-side { width: min(100%, 900px); flex: none; }
  #loading .course-step .bigmap.entry .bm-legend { max-height: 24vh; }
}
/* phones / foldable cover 320–599: one column, full-width controls, list 1 column */
@media (max-width: 599px) {
  #loading .picker.course-step { width: calc(100vw - 24px); }
  #loading .course-step .bigmap.entry { flex-direction: column; align-items: stretch; gap: 8px; }
  #loading .course-step .bigmap.entry .bm-stage { align-self: center; }
  #loading .course-step .bigmap.entry .bm-side { width: 100%; flex: none; }
  #loading .course-step .bigmap.entry .bm-side h3 { display: none; }
  #loading .course-step .bigmap.entry .bm-legend { grid-template-columns: minmax(0, 1fr); max-height: 22vh; }
  #loading .course-step > .muted { display: none; }
}
/* landscape phones (≤ 480 tall): map left 45 %, controls right */
@media (max-height: 480px) and (orientation: landscape) {
  #loading .picker.course-step { width: calc(100vw - 24px); }
  #loading .course-step .bigmap.entry { flex-direction: row; align-items: stretch; }
  #loading .course-step .bigmap.entry .bm-side { flex: 1 1 auto; max-height: calc(100vh - 96px); }
  #loading .course-step .bigmap.entry .bm-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #loading .course-step .bigmap.entry .bm-side h3 { display: none; }
}