/* ==========================================================================
   PALVO — design system  ·  "Cozy Midnight Arcade"
   Deep plum night · glass panels · candy accents · toy-press buttons
   ========================================================================== */

:root {
  --bg0: #0e0c22;
  --bg1: #1a1638;
  --panel: rgba(255, 255, 255, .055);
  --panel-strong: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .09);
  --line-bright: rgba(255, 255, 255, .16);
  --ink: #f4f1ff;
  --ink-dim: #9b94c9;
  --ink-faint: #6d668f;
  --coral: #ff7a59;
  --coral-deep: #e05537;
  --mint: #3ee6c0;
  --mint-deep: #1fae8e;
  --gold: #ffc24b;
  --gold-deep: #d99a1f;
  --lilac: #b78bff;
  --pink: #ff5d84;
  --blue: #8fd0ff;
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .65);
  --font-display: "Fredoka", "Baloo 2", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg0);
  overflow: hidden;
  user-select: none;
}

/* ---------- atmosphere: layered night sky ---------- */
.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 78% -10%, #3b2a6e 0%, transparent 55%),
    radial-gradient(900px 600px at -10% 30%, #232a5e 0%, transparent 50%),
    radial-gradient(700px 500px at 50% 110%, #3d1f4e 0%, transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
.sky::before {           /* stars */
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff9 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 34% 8%, #fff7 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 58% 22%, #fff8 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 76% 12%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 30%, #fff8 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 22% 42%, #fff5 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 66% 44%, #fff6 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 44% 60%, #fff4 50%, transparent 51%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
.sky::after {            /* soft grain */
  content: ""; position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: repeating-conic-gradient(#fff 0 .0001%, transparent 0 .0003%);
}
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }

/* ---------- app frame (phone-first, centers on desktop) ---------- */
#app {
  position: relative; z-index: 1;
  max-width: 470px; height: 100dvh; margin: 0 auto;
  display: flex; flex-direction: column;
}
@media (min-width: 500px) {
  #app { box-shadow: 0 0 0 1px var(--line), 0 40px 120px -40px #000; border-radius: 0; }
}

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; }
.screen.active { display: flex; animation: screenIn .32s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.screen-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 130px; scrollbar-width: none; }
.screen-scroll::-webkit-scrollbar { display: none; }

/* ---------- typography ---------- */
.h-display { font-family: var(--font-display); font-weight: 600; letter-spacing: .2px; }
h1.h-display { font-size: 30px; } h2.h-display { font-size: 21px; }
.section-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink-dim); letter-spacing: 2.2px; text-transform: uppercase; margin: 22px 4px 10px; display: flex; align-items: center; gap: 8px; }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.dim { color: var(--ink-dim); } .faint { color: var(--ink-faint); }
.small { font-size: 12.5px; }

/* ---------- HUD ---------- */
.hud { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.hud-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel-strong); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 12px 7px 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  backdrop-filter: blur(8px);
}
.hud-chip .ico { font-size: 15px; }
.hud-aura { color: var(--gold); }
.hud-energy { color: var(--mint); }
.hud-chip .sub { font-size: 10px; color: var(--ink-faint); font-family: var(--font-body); font-weight: 700; margin-left: 2px; }
.hud-spacer { flex: 1; }
.hud-level {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: conic-gradient(var(--coral) calc(var(--xp, 0) * 1%), rgba(255,255,255,.12) 0);
}
.hud-level .inner {
  width: 34px; height: 34px; border-radius: 50%; background: var(--bg1);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 13px;
  border: 1px solid var(--line);
}
.bump { animation: bump .45s cubic-bezier(.2, 2.2, .4, 1); }
@keyframes bump { 30% { transform: scale(1.22); } }

/* ---------- cards ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.card + .card { margin-top: 12px; }
.card-tight { padding: 12px; border-radius: var(--r-md); }

/* ---------- toy buttons ---------- */
.btn {
  font-family: var(--font-display); font-weight: 600; font-size: 15.5px;
  color: #fff; border: none; cursor: pointer; border-radius: 18px;
  padding: 13px 22px; position: relative;
  background: linear-gradient(180deg, var(--coral), var(--coral-deep));
  box-shadow: 0 4px 0 0 #a83b22, 0 12px 24px -10px rgba(255, 122, 89, .5);
  transition: transform .08s, box-shadow .08s, filter .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 0 #a83b22, 0 4px 10px -6px rgba(0,0,0,.5); }
.btn.mint { background: linear-gradient(180deg, var(--mint), var(--mint-deep)); box-shadow: 0 4px 0 0 #0f7d64, 0 12px 24px -10px rgba(62, 230, 192, .45); color: #04281f; }
.btn.mint:active { box-shadow: 0 0 0 0 #0f7d64; }
.btn.gold { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); box-shadow: 0 4px 0 0 #a8770e, 0 12px 24px -10px rgba(255, 194, 75, .5); color: #3a2705; }
.btn.gold:active { box-shadow: 0 0 0 0 #a8770e; }
.btn.ghost { background: var(--panel-strong); box-shadow: 0 4px 0 0 rgba(0,0,0,.35); border: 1px solid var(--line-bright); color: var(--ink); }
.btn.ghost:active { box-shadow: 0 0 0 0 transparent; }
.btn.block { display: flex; width: 100%; }
.btn.sm { padding: 9px 16px; font-size: 13.5px; border-radius: 14px; }
.btn:disabled { filter: grayscale(.8) brightness(.6); pointer-events: none; }

/* ---------- meters ---------- */
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.meter { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 11px; }
.meter .lab { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; }
.meter .lab b { color: var(--ink); font-family: var(--font-display); }
.meter .track { height: 9px; border-radius: 6px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.meter .fill { height: 100%; border-radius: 6px; width: 0; transition: width .7s cubic-bezier(.2, .8, .2, 1); position: relative; }
.meter .fill::after { content: ""; position: absolute; inset: 0 0 55% 0; background: rgba(255, 255, 255, .28); border-radius: 6px; }
.fill.energy { background: linear-gradient(90deg, #ffe38a, var(--gold)); }
.fill.mood { background: linear-gradient(90deg, #ff9d7e, var(--coral)); }
.fill.social { background: linear-gradient(90deg, #7cf3d8, var(--mint)); }
.fill.confidence { background: linear-gradient(90deg, #d3b5ff, var(--lilac)); }
.meter.low .fill { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* ---------- home stage ---------- */
.stage { position: relative; margin: 4px 0 10px; display: flex; flex-direction: column; align-items: center; }
.stage .room {
  position: absolute; inset: 12px 0 8px; border-radius: var(--r-lg); z-index: -1;
  background:
    radial-gradient(340px 200px at 50% 20%, rgba(255, 194, 75, .16), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .18));
  border: 1px solid var(--line);
  overflow: hidden;
}
.stage .room::before {   /* window with moon */
  content: ""; position: absolute; top: 14px; right: 18px; width: 74px; height: 58px;
  border-radius: 12px; border: 2px solid var(--line-bright);
  background:
    radial-gradient(14px 14px at 68% 30%, #ffeec2 45%, transparent 50%),
    linear-gradient(180deg, #262450, #191735);
  box-shadow: inset 0 0 18px rgba(143, 208, 255, .18);
}
.stage .room::after {    /* floor line */
  content: ""; position: absolute; left: 0; right: 0; bottom: 26%;
  height: 1px; background: linear-gradient(90deg, transparent, var(--line-bright), transparent);
}
.pv-bob { animation: bob 3.4s ease-in-out infinite; transform-origin: 60px 100px; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-.6deg); } }
.pv-blink { animation: blink 4.6s infinite; transform-origin: center 34px; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }
.pv-flip { transform: scaleX(-1); }
.pv-stroke { stroke: #241d3d; stroke-width: 3; fill: none; stroke-linecap: round; }
.pv-stroke-thin { stroke: #241d3d; stroke-width: 2.2; fill: none; stroke-linecap: round; opacity: .75; }
.pv-glowgold { filter: drop-shadow(0 0 6px rgba(255, 194, 75, .8)); }
.avatar-tap { cursor: pointer; transition: transform .12s; }
.avatar-tap:active { transform: scale(.96); }

/* speech bubble */
.bubble {
  position: relative; max-width: 88%; margin: 2px auto 10px;
  background: #fff; color: #241d3d; border-radius: 18px; padding: 11px 15px;
  font-size: 14.5px; font-weight: 700; line-height: 1.35; text-align: center;
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(6px) scale(.94); transition: all .25s cubic-bezier(.2, 1.4, .4, 1);
  min-height: 20px;
}
.bubble.show { opacity: 1; transform: none; }
.bubble::after { content: ""; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 14px; height: 14px; background: #fff; border-radius: 3px; }

/* care dock */
.dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.care {
  background: var(--panel-strong); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 4px 9px; text-align: center; cursor: pointer; transition: transform .1s, background .2s;
}
.care:active { transform: scale(.93); }
.care .ico { font-size: 23px; display: block; margin-bottom: 3px; }
.care .t { font-size: 11.5px; font-weight: 800; color: var(--ink-dim); letter-spacing: .4px; }

/* want / request card */
.want { display: flex; gap: 10px; align-items: center; border-color: rgba(255, 194, 75, .35); }
.want .txt { flex: 1; font-size: 14px; font-weight: 700; }
.want .txt .who { font-size: 11px; color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800; display: block; margin-bottom: 2px; }

/* ---------- bottom nav ---------- */
.nav {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 40;
  display: flex; background: rgba(20, 17, 44, .88); border: 1px solid var(--line-bright);
  border-radius: 24px; padding: 7px; backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .8);
}
.nav button {
  flex: 1; background: none; border: none; color: var(--ink-faint); cursor: pointer;
  font-family: var(--font-body); font-weight: 800; font-size: 10px; letter-spacing: .5px;
  padding: 7px 0 5px; border-radius: 17px; transition: all .2s;
}
.nav button .ico { display: block; font-size: 21px; margin-bottom: 2px; filter: grayscale(.5) opacity(.75); transition: all .2s; }
.nav button.active { color: #fff; background: linear-gradient(180deg, rgba(255, 122, 89, .28), rgba(255, 122, 89, .12)); box-shadow: inset 0 0 0 1px rgba(255, 122, 89, .4); }
.nav button.active .ico { filter: none; transform: translateY(-1px) scale(1.12); }
.nav button .dot { position: absolute; margin: -34px 0 0 26px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); display: none; }
.nav button.notify .dot { display: block; }

/* ---------- Solo City map (tall, scrolls with the page) ---------- */
.map {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); margin-top: 6px;
  background:
    radial-gradient(280px 200px at 72% 6%, rgba(255, 160, 90, .14), transparent 60%),   /* downtown warmth */
    radial-gradient(300px 220px at 24% 36%, rgba(94, 200, 140, .10), transparent 65%),  /* pitch green */
    radial-gradient(280px 200px at 70% 60%, rgba(143, 208, 255, .10), transparent 60%), /* scholars */
    radial-gradient(300px 220px at 30% 78%, rgba(255, 93, 132, .12), transparent 60%),  /* neon strip */
    radial-gradient(340px 260px at 55% 100%, rgba(62, 230, 192, .14), transparent 65%), /* waterfront */
    linear-gradient(175deg, #221e49, #171432 55%, #1b2340);
}
.map-road { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.district-label {
  position: absolute; left: 14px; right: 14px; display: flex; align-items: baseline; gap: 10px;
  pointer-events: none;
}
.district-label b {
  font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 3px;
  color: var(--ink-dim); text-shadow: 0 2px 8px #000;
}
.district-label span { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; color: var(--ink-faint); text-transform: uppercase; }
.district-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-bright), transparent); }
.poi {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; color: var(--ink);
  font-family: var(--font-body);
}
.poi .pin {
  position: relative;
  width: 56px; height: 56px; border-radius: 20px; display: grid; place-items: center; font-size: 26px;
  background: var(--panel-strong); border: 1px solid var(--line-bright); backdrop-filter: blur(6px);
  box-shadow: var(--shadow); transition: transform .15s;
}
.poi:active .pin { transform: scale(.9); }
.poi .nm { font-size: 11px; font-weight: 800; text-shadow: 0 2px 6px #000; }
.poi.locked { filter: grayscale(1) brightness(.62); }
.poi.locked .pin::after { content: "🔒"; position: absolute; font-size: 13px; top: -7px; right: -7px; }
.poi .resident {
  position: absolute; bottom: -5px; right: -7px; font-size: 12px;
  background: rgba(20, 17, 44, .92); border: 1px solid var(--line-bright);
  border-radius: 999px; padding: 2px 4px; line-height: 1;
}
.poi .resident.met { border-color: rgba(255, 93, 132, .6); }
.poi.hot .pin {
  border-color: rgba(255, 122, 89, .65);
  box-shadow: 0 0 18px rgba(255, 122, 89, .35), var(--shadow);
}
.poi.hot .pin::before {
  content: "🔥"; position: absolute; top: -9px; left: -8px; font-size: 14px;
  animation: bob 1.6s ease-in-out infinite;
}
.poi .crowd {
  position: absolute; top: -7px; right: -8px; min-width: 18px; height: 18px;
  border-radius: 999px; background: var(--coral); color: #fff;
  font-size: 10.5px; font-weight: 800; display: grid; place-items: center;
  padding: 0 4px; border: 2px solid #1a1638; font-family: var(--font-body);
}
.poi .fee-tag {
  font-size: 9.5px; font-weight: 800; color: var(--gold); letter-spacing: .5px;
  background: rgba(255, 194, 75, .12); border: 1px solid rgba(255, 194, 75, .35);
  border-radius: 999px; padding: 1px 7px;
}
.hearts { font-size: 11px; letter-spacing: 1px; white-space: nowrap; }
.match-score { font-size: 34px; font-weight: 600; margin-top: 8px; }

/* ---------- people: presence, friends, duels ---------- */
.people-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.people-row::-webkit-scrollbar { display: none; }
.friends-bar { display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px; scrollbar-width: none; }
.friends-bar::-webkit-scrollbar { display: none; }
.person-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 8px 10px 7px; cursor: pointer; color: var(--ink); font-family: var(--font-body);
  transition: transform .12s;
}
.person-chip:active { transform: scale(.94); }
.person-chip .pav { display: block; height: 42px; }
.person-chip .pnm { font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.person-chip .ploc { font-size: 9.5px; font-weight: 800; color: var(--ink-faint); white-space: nowrap; }
.odot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-faint); flex: 0 0 auto;
}
.odot.on { background: var(--mint); box-shadow: 0 0 7px var(--mint); }
.odot.big { width: 10px; height: 10px; margin-left: 4px; }
.duel-actors { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.duel-vs { font-size: 18px; color: var(--coral); letter-spacing: 1px; }
.duel-line {
  min-height: 44px; margin-top: 10px; padding: 10px 14px; border-radius: 14px;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 700; display: grid; place-items: center;
}

/* ---------- decoratable home ---------- */
.room.has-svg::before, .room.has-svg::after { display: none; }
.room.has-svg { overflow: hidden; }
.room.has-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.deco-btn {
  position: absolute; top: 22px; left: 10px; z-index: 5;
  width: 40px; height: 40px; border-radius: 14px; font-size: 19px; cursor: pointer;
  background: rgba(20, 17, 44, .82); border: 1px solid var(--line-bright);
  backdrop-filter: blur(6px); transition: transform .12s;
}
.deco-btn:active { transform: scale(.9); }
.deco-row { display: flex; gap: 7px; flex-wrap: wrap; }
.deco-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); font-family: var(--font-body); font-weight: 800; font-size: 12px;
  padding: 8px 11px; cursor: pointer; transition: all .15s;
}
.deco-chip.sel { border-color: var(--mint); color: var(--mint); background: rgba(62, 230, 192, .1); }
.deco-chip.shop { color: var(--gold); border-style: dashed; }
.paint-dot { width: 14px; height: 14px; border-radius: 5px; border: 1px solid var(--line-bright); display: inline-block; }

/* ---------- venue interior ---------- */
.venue-view {
  position: absolute; inset: 0; z-index: 46; display: none; flex-direction: column;
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
}
.venue-view.open { display: flex; animation: screenIn .3s cubic-bezier(.2, .9, .3, 1.15); }
.venue-top { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; }
.venue-top .btn { width: 74px; }
.venue-stage {
  position: relative; flex: 1; margin: 0 14px; border-radius: var(--r-lg);
  overflow: hidden; border: 1px solid var(--line-bright); box-shadow: var(--shadow);
}
.room-ambient { display: none; }
/* the drawn room keeps its aspect and hugs the bottom; the wall gradient
   above blends seamlessly (stage background = room wall hue) */
.room-wrap {
  position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 400 / 500;
}
.room-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.venue-people { position: absolute; inset: 0; }
.sprite {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
  transition: transform .12s;
}
.sprite:active { transform: translate(-50%, -100%) scale(.94); }
.sprite .stag {
  margin-top: -6px; font-size: 10px; font-weight: 800; letter-spacing: .4px;
  background: rgba(13, 11, 32, .85); border: 1px solid var(--line-bright);
  border-radius: 999px; padding: 2px 8px; display: inline-flex; align-items: center;
  text-shadow: none; white-space: nowrap;
}
.sprite .stag.npc { color: var(--gold); border-color: rgba(255, 194, 75, .45); }
.sprite.buddy .stag { color: var(--coral); border-color: rgba(255, 122, 89, .5); }
.venue-foot { padding: 10px 14px 16px; }
.venue-actions { display: flex; gap: 9px; }
.venue-actions .btn { flex: 1; }
.evt-badge {
  position: absolute; top: -9px; left: -9px; font-size: 14px;
  background: rgba(20, 17, 44, .92); border: 1px solid rgba(255, 93, 132, .6);
  border-radius: 999px; padding: 2px 5px; line-height: 1;
  animation: bump 2.2s cubic-bezier(.2, 2, .4, 1) infinite;
}

/* ---------- match arena ---------- */
.arena-stage { overflow: hidden; }
.arena-stage::before {   /* night sky above the stands */
  content: ""; position: absolute; inset: 0 0 40% 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 16% 22%, #fff8 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 38% 12%, #fff6 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 62% 28%, #fff7 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 81% 16%, #fff5 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 90% 38%, #fff6 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 27% 44%, #fff4 50%, transparent 51%);
  animation: twinkle 5s ease-in-out infinite alternate;
}
.arena-wrap { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 400 / 230; }
.arena-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.arena-score { font-size: 26px; margin-top: 2px; letter-spacing: 1px; }
.arena-ball {
  position: absolute; top: 0; left: 0; z-index: 20; font-size: 21px;
  opacity: 0; pointer-events: none; margin: -11px 0 0 -11px;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5));
}
.arena-flash {
  position: absolute; top: 34%; left: 0; right: 0; z-index: 30; text-align: center;
  font-size: 30px; font-weight: 600; color: #fff; pointer-events: none;
  text-shadow: 0 4px 18px #000, 0 0 30px rgba(255, 255, 255, .3);
  opacity: 0; transform: scale(.7);
  transition: all .22s cubic-bezier(.2, 1.6, .4, 1);
}
.arena-flash.show { opacity: 1; transform: scale(1); }
.arena-flash.gold { color: var(--gold); text-shadow: 0 4px 18px #000, 0 0 34px rgba(255, 194, 75, .55); }

/* ---------- quests / season pass / leaderboard ---------- */
.quest-row { display: flex; align-items: center; gap: 10px; padding: 8px 0 2px; }
.quest-row.claimed { opacity: .45; }
.quest-row .qico { font-size: 20px; }
.quest-row .qtxt { font-size: 13px; font-weight: 800; }
.qbar { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .35); overflow: hidden; margin-top: 4px; }
.qbar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--mint), var(--gold)); transition: width .4s; }
.qcount { font-size: 12px; font-weight: 800; color: var(--ink-faint); }
.qdone { color: var(--mint); font-weight: 800; font-size: 15px; }
.qbadge {
  min-width: 22px; height: 22px; border-radius: 999px; background: var(--pink);
  color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; padding: 0 6px;
}
.pass-strip { margin-top: 10px; border-color: rgba(183, 139, 255, .35); }
.guide-card { border-color: rgba(62, 230, 192, .4); background: linear-gradient(120deg, rgba(62, 230, 192, .1), rgba(255, 194, 75, .06)); }
.guide-card .who { font-size: 10px; color: var(--mint); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800; }
.pass-head {
  display: grid; grid-template-columns: 30px 1fr 1fr; gap: 8px; padding: 4px 0;
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px; color: var(--ink-faint);
}
.pass-row {
  display: grid; grid-template-columns: 30px 1fr 1fr; gap: 8px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.pass-row.locked { opacity: .38; }
.pass-row .ptier {
  width: 26px; height: 26px; border-radius: 50%; background: var(--panel-strong);
  border: 1px solid var(--line-bright); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
}
.pass-row .plane { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pass-row .plane.prem { padding-left: 8px; border-left: 1px solid rgba(255, 194, 75, .3); }
.preward { font-size: 12.5px; font-weight: 800; }
.lb-row { padding: 8px 6px; border-radius: 12px; margin-top: 4px; }
.lb-row.me { background: linear-gradient(90deg, rgba(255, 122, 89, .2), transparent); border: 1px solid rgba(255, 122, 89, .4); }
.lb-pos {
  width: 26px; height: 26px; border-radius: 50%; background: var(--panel-strong);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
}

/* ---------- sheets & modals ---------- */
.sheet-veil {
  position: absolute; inset: 0; z-index: 60; background: rgba(8, 6, 20, .6);
  opacity: 0; pointer-events: none; transition: opacity .25s; backdrop-filter: blur(3px);
}
.sheet-veil.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 61;
  background: linear-gradient(180deg, #221e49, #17142f);
  border: 1px solid var(--line-bright); border-bottom: none;
  border-radius: 28px 28px 0 0; padding: 10px 18px 26px;
  transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .9, .25, 1);
  max-height: 86%; display: flex; flex-direction: column;
}
.sheet.open { transform: none; }
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line-bright); margin: 4px auto 12px; }
.sheet-body { overflow-y: auto; scrollbar-width: none; }
.sheet-body::-webkit-scrollbar { display: none; }

.modal-veil {
  position: absolute; inset: 0; z-index: 70; background: rgba(8, 6, 20, .7);
  display: none; place-items: center; padding: 24px; backdrop-filter: blur(4px);
}
.modal-veil.open { display: grid; }
.modal {
  width: 100%; max-width: 340px; text-align: center;
  background: linear-gradient(180deg, #262254, #191537);
  border: 1px solid var(--line-bright); border-radius: 28px; padding: 26px 22px 22px;
  box-shadow: 0 40px 80px -20px #000;
  animation: popIn .35s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes popIn { from { transform: scale(.8); opacity: 0; } }
.modal .big { font-size: 52px; margin-bottom: 8px; }

/* ---------- shop ---------- */
.shop-tabs { display: flex; gap: 7px; margin: 8px 0 4px; }
.shop-tabs button {
  flex: 1; background: var(--panel); border: 1px solid var(--line); color: var(--ink-dim);
  font-family: var(--font-display); font-weight: 600; font-size: 13px; padding: 9px 4px;
  border-radius: 14px; cursor: pointer; transition: all .2s;
}
.shop-tabs button.active { color: #fff; background: linear-gradient(180deg, rgba(255,122,89,.3), rgba(255,122,89,.12)); border-color: rgba(255, 122, 89, .5); }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.item-card {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px 12px 12px; cursor: pointer; transition: transform .12s;
  overflow: hidden;
}
.item-card:active { transform: scale(.96); }
.item-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--rc, var(--blue)); opacity: .8; }
.item-card .emoji { font-size: 34px; display: block; text-align: center; margin: 6px 0 8px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.item-card .nm { font-family: var(--font-display); font-weight: 600; font-size: 14px; text-align: center; }
.item-card .rar { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rc, var(--blue)); margin: 2px 0 6px; }
.item-card .buff { text-align: center; font-size: 11.5px; color: var(--ink-dim); font-weight: 700; min-height: 15px; }
.item-card .price { margin-top: 9px; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--gold); }
.item-card .price .was { color: var(--ink-faint); text-decoration: line-through; font-size: 11px; margin-right: 5px; }
.item-card.owned { opacity: .55; }
.item-card .own-tag { position: absolute; top: 8px; right: 9px; font-size: 9.5px; font-weight: 800; letter-spacing: 1px; color: var(--mint); }
.deal-strip {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  border: 1px solid rgba(255, 194, 75, .4);
  background: linear-gradient(120deg, rgba(255, 194, 75, .14), rgba(255, 122, 89, .1));
}
.deal-strip .emoji { font-size: 38px; }
.deal-strip .t { flex: 1; }
.deal-strip .cd { font-family: var(--font-display); color: var(--gold); font-size: 12.5px; font-weight: 600; }

/* ---------- closet ---------- */
.slot-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 10px; }
.slot {
  background: var(--panel); border: 1px dashed var(--line-bright); border-radius: var(--r-md);
  padding: 10px 4px; text-align: center; cursor: pointer; font-size: 11px; font-weight: 800; color: var(--ink-dim);
}
.slot .ico { display: block; font-size: 24px; margin-bottom: 3px; }
.slot.filled { border-style: solid; border-color: rgba(62, 230, 192, .5); }

/* ---------- chat ---------- */
.chat-log { display: flex; flex-direction: column; gap: 9px; padding: 6px 2px 12px; min-height: 180px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; font-weight: 600; line-height: 1.4; animation: msgIn .25s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.92); } }
.msg.buddy { align-self: flex-start; background: #fff; color: #241d3d; border-bottom-left-radius: 6px; }
.msg.me { align-self: flex-end; background: linear-gradient(180deg, var(--coral), var(--coral-deep)); border-bottom-right-radius: 6px; }
.msg.sys { align-self: center; background: none; color: var(--ink-faint); font-size: 11.5px; font-weight: 700; }
.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #241d3d55; animation: tp 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tp { 40% { transform: translateY(-5px); background: #241d3d; } }
.chat-chips { display: flex; gap: 7px; flex-wrap: wrap; padding-top: 6px; }
.chat-input { display: flex; gap: 8px; padding-top: 10px; }
.chat-input input {
  flex: 1; background: rgba(0, 0, 0, .35); border: 1px solid var(--line-bright); border-radius: 16px;
  color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 12px 16px; outline: none;
}
.chat-input input:focus { border-color: var(--coral); }

/* ---------- scene (café) ---------- */
.scene-stage {
  position: relative; border-radius: var(--r-lg); border: 1px solid var(--line);
  background:
    radial-gradient(260px 140px at 30% 15%, rgba(255, 194, 75, .2), transparent 60%),
    linear-gradient(180deg, #2a2352, #1b1636);
  padding: 18px 14px 14px; margin-top: 8px; overflow: hidden;
}
.scene-actors { display: flex; justify-content: space-around; align-items: flex-end; min-height: 130px; }
.scene-actor { text-align: center; }
.scene-actor .nm { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--ink-dim); margin-top: 2px; }
.scene-actor.talking .nm { color: var(--gold); }
.scene-log { margin-top: 10px; min-height: 76px; }
.scene-line {
  background: #fff; color: #241d3d; border-radius: 16px; padding: 10px 14px;
  font-size: 14.5px; font-weight: 700; animation: msgIn .3s cubic-bezier(.2, 1.2, .4, 1);
}
.scene-line .who { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--coral-deep); display: block; margin-bottom: 2px; font-weight: 800; }
.scene-hooks { display: flex; gap: 8px; margin-top: 12px; }

/* ---------- onboarding ---------- */
.ob-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 22px 40px; text-align: center; }
.logo {
  font-family: var(--font-display); font-weight: 600; font-size: 54px; letter-spacing: 1px;
  background: linear-gradient(120deg, #ffd9a3, var(--coral) 45%, var(--lilac));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 30px rgba(255, 122, 89, .35));
}
.tagline { color: var(--ink-dim); font-weight: 700; margin-top: 4px; letter-spacing: .3px; }
.quiz-card {
  background: linear-gradient(180deg, #2b2558, #1d1840);
  border: 1px solid var(--line-bright); border-radius: 28px; padding: 34px 24px;
  box-shadow: var(--shadow); margin: 26px 0 18px; animation: popIn .3s cubic-bezier(.2, 1.4, .4, 1);
}
.quiz-card .qemoji { font-size: 46px; display: block; margin-bottom: 14px; }
.quiz-card .qtext { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.4; }
.quiz-btns { display: flex; gap: 10px; }
.quiz-btns .btn { flex: 1; }
.ob-progress { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-bottom: 8px; }
.ob-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--coral), var(--gold)); border-radius: 3px; transition: width .3s; }
.swatches { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.swatch { width: 42px; height: 42px; border-radius: 14px; border: 2px solid transparent; cursor: pointer; transition: transform .12s; }
.swatch.sel { border-color: #fff; transform: scale(1.12); box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.style-row { display: flex; justify-content: center; gap: 8px; }
.style-row .btn { min-width: 92px; }
.ob-name {
  width: 100%; background: rgba(0, 0, 0, .35); border: 1px solid var(--line-bright); border-radius: 18px;
  color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 22px; text-align: center;
  padding: 14px; outline: none; margin: 14px 0;
}
.ob-name:focus { border-color: var(--coral); }

/* ---------- toast & fx ---------- */
#toasts { position: absolute; top: 16px; left: 0; right: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  background: rgba(20, 17, 44, .95); border: 1px solid var(--line-bright); border-radius: 999px;
  padding: 10px 18px; font-weight: 800; font-size: 13.5px; box-shadow: var(--shadow);
  animation: toastIn .3s cubic-bezier(.2, 1.4, .4, 1), toastOut .3s ease-in 2.3s forwards;
}
.toast.gold { color: var(--gold); } .toast.mint { color: var(--mint); } .toast.bad { color: var(--pink); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.9); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }

.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
.confetti i {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 3px;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .1; } }

.float-num {
  position: absolute; z-index: 96; font-family: var(--font-display); font-weight: 600; font-size: 19px;
  pointer-events: none; animation: floatUp 1.1s ease-out forwards; text-shadow: 0 2px 10px #000;
}
@keyframes floatUp { to { transform: translateY(-46px); opacity: 0; } }

/* server status pill */
.brain-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); }
.brain-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.brain-pill.live { color: var(--mint); } .brain-pill.live i { background: var(--mint); box-shadow: 0 0 8px var(--mint); animation: pulse 2s infinite; }

/* misc rows */
.row { display: flex; align-items: center; gap: 10px; }
.row .grow { flex: 1; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; margin-top: 10px; }
.stat-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 8px; text-align: center; }
.stat-box .v { font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.stat-box .k { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.ocean-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; font-weight: 800; }
.ocean-row .k { width: 110px; color: var(--ink-dim); }
.ocean-row .track { flex: 1; height: 7px; border-radius: 4px; background: rgba(0,0,0,.35); overflow: hidden; }
.ocean-row .track i { display: block; height: 100%; background: linear-gradient(90deg, var(--lilac), var(--coral)); border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}