/* SLOUCH — frameless UI. One palette. Type does the work.
   bg #05070E · ink #E9F1FF · mut #5C6A8A · acc #5CE1FF · hot #FF4D6D */
:root {
  --bg: #05070e;
  --ink: #e9f1ff;
  --mut: #5c6a8a;
  --acc: #5ce1ff;
  --hot: #ff4d6d;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --display: "Zen Dots", sans-serif;
  --body: "Chakra Petch", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: var(--body); touch-action: none; user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;
}
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#cam { position: fixed; width: 2px; height: 2px; opacity: 0.01; pointer-events: none; left: -10px; }
#focus-tint { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(92, 145, 255, 0.25) 100%);
  transition: opacity 0.4s; }
body.focus-active #focus-tint { opacity: 1; }

/* ── screens ── */
.screen {
  position: fixed; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; z-index: 10; gap: 10px;
  padding: calc(18px + var(--sat)) 26px calc(18px + var(--sab));
}
.screen.active { display: flex; }
.screen.overlay { background: rgba(5, 7, 14, 0.82); backdrop-filter: blur(8px); }
.screen.scrollable { justify-content: flex-start; overflow-y: auto; touch-action: pan-y; }
.screen.scrollable::-webkit-scrollbar { display: none; }
#screen-menu, #screen-calibrate, #screen-settings, #screen-store, #screen-history,
#screen-leaderboard, #screen-trophies, #screen-lore, #screen-report {
  background: linear-gradient(180deg, rgba(5,7,14,0.55) 0%, rgba(5,7,14,0.86) 55%, var(--bg) 100%);
}
#screen-loading { background: var(--bg); }

/* ── type ── */
.logo {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(44px, 14vw, 78px); letter-spacing: 0.04em; color: var(--ink);
  text-shadow: 0 0 34px rgba(92, 225, 255, 0.5);
}
.label { font-family: var(--body); font-weight: 700; font-size: 12px; letter-spacing: 0.42em;
  color: var(--acc); text-align: center; }
.small { font-size: 12px; letter-spacing: 0.06em; }
.mut { color: var(--mut); }
.hot { color: var(--hot); }
.acc { color: var(--acc); }
.center { text-align: center; }
b { font-weight: 700; }

.big-num, .best-num, .hud-score {
  font-family: var(--display); font-weight: 400; color: var(--ink);
}
.big-num { font-size: 56px; text-shadow: 0 0 26px rgba(92,225,255,0.4); }
.best-num { font-size: 30px; color: var(--acc); letter-spacing: 0.04em; }

/* ── icons ── */
.ic { width: 20px; height: 20px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.tiny { width: 14px; height: 14px; vertical-align: -2px; }
.ic.big { width: 44px; height: 44px; }

/* ── buttons: one filled CTA per screen, everything else is text ── */
button { font-family: var(--body); color: var(--ink); background: none; border: none; cursor: pointer; }
.cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: min(300px, 78vw); padding: 16px; margin-top: 8px;
  font-weight: 700; font-size: 15px; letter-spacing: 0.3em; text-indent: 0.3em;
  color: #041018; background: var(--acc); border-radius: 999px;
  box-shadow: 0 0 30px rgba(92, 225, 255, 0.35);
  transition: transform 0.08s;
}
.cta:active { transform: scale(0.96); }
.cta .ic { stroke: #041018; fill: #041018; width: 14px; height: 14px; }
.ghost-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; width: min(300px, 78vw);
  font-weight: 600; font-size: 13px; letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--ink); opacity: 0.85;
}
.ghost-btn:active { opacity: 0.5; }
.ghost-btn.danger { color: var(--hot); }
.iconrow { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.iconbtn { display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 14px; color: var(--mut); font-size: 9px; font-weight: 700; letter-spacing: 0.24em; }
.iconbtn:active, .iconbtn .ic:active { color: var(--acc); }

/* ── loading ── */
.loader-bar { width: min(220px, 60vw); height: 2px; margin-top: 20px;
  background: rgba(92, 106, 138, 0.3); }
#loader-fill { height: 100%; width: 0%; background: var(--acc);
  box-shadow: 0 0 10px var(--acc); transition: width 0.3s; }

/* ── menu ── */
.top { position: absolute; top: calc(16px + var(--sat)); left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center; padding: 0 26px; }
.stat { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
.menu-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rank-line { display: flex; align-items: center; gap: 8px; }
#rank-chevrons { display: inline-flex; gap: 2px; }
#rank-chevrons i { width: 9px; height: 9px; border-right: 2px solid var(--acc);
  border-bottom: 2px solid var(--acc); transform: rotate(-135deg); display: inline-block; }
.event { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--acc);
  padding: 6px 0; }
.menu-actions { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 12px; }
#daily-status { margin-left: 8px; letter-spacing: 0.08em; }
.missions { width: min(320px, 84vw); margin-top: 12px; }
.mission { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-top: 1px solid rgba(92, 106, 138, 0.18); font-size: 12px; letter-spacing: 0.04em; }
.mission:first-child { border-top: none; }
.mission .dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: rgba(92, 106, 138, 0.5); }
.mission.done .dot { background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.mission.done { color: var(--mut); text-decoration: line-through; }
.mission .prog { margin-left: auto; color: var(--mut); font-weight: 700; }
footer.iconrow { position: absolute; bottom: calc(16px + var(--sab)); }

/* ── goal rings ── */
.ring-bg { fill: none; stroke: rgba(92, 106, 138, 0.28); stroke-width: 3.4; }
.ring { fill: none; stroke: var(--acc); stroke-width: 3.4; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0.6s; }
.ring.r2 { stroke: var(--ink); }
.ring.r3 { stroke: var(--hot); }
.ring-bg.w, .ring.w { stroke-width: 6; }

/* ── calibration ── */
.cal-frame { position: relative; width: min(230px, 58vw); aspect-ratio: 3/4;
  border-radius: 16px; overflow: hidden; }
#cal-preview { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); background: #000; }
.cal-guide { position: absolute; inset: 8%; stroke: rgba(92, 225, 255, 0.65); fill: none;
  stroke-width: 1.2; stroke-dasharray: 4 5; }
.cal-count { font-family: var(--display); font-size: 44px; color: var(--acc); min-height: 56px;
  text-shadow: 0 0 18px rgba(92, 225, 255, 0.6); }

/* ── HUD ── */
#hud { justify-content: flex-start; pointer-events: none; padding: calc(12px + var(--sat)) 20px; gap: 6px; }
.hud-top { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; }
.hud-score { font-size: 40px; text-shadow: 0 0 18px rgba(92, 225, 255, 0.5); line-height: 1; }
.hud-right { display: flex; align-items: center; gap: 10px; }
.hud-mult { font-weight: 700; color: var(--acc); font-size: 17px; }
#btn-pause { pointer-events: auto; color: var(--ink); opacity: 0.8; padding: 6px; }
.hud-bars { align-self: flex-start; width: min(190px, 48vw); display: flex; flex-direction: column; gap: 4px; }
.bar { height: 3px; background: rgba(92, 106, 138, 0.3); }
.bar.thin { height: 2px; }
#hud-shield-fill { height: 100%; width: 100%; background: var(--acc);
  box-shadow: 0 0 8px var(--acc); transition: width 0.15s linear; }
#hud-flow-fill { height: 100%; width: 0%; background: var(--ink); transition: width 0.15s linear; }
.hud-powerups { align-self: flex-start; display: flex; gap: 12px; }
.hud-powerups .pu { display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--acc); }
.hud-duel, .hud-pace { position: absolute; top: calc(74px + var(--sat)); right: 20px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--acc); text-align: right; }
.hud-pace { top: calc(94px + var(--sat)); }
.hud-pace.behind { color: var(--hot); }
.hud-boss { margin-top: 5vh; font-family: var(--display); font-size: 16px; letter-spacing: 0.18em;
  color: var(--hot); text-shadow: 0 0 18px rgba(255, 77, 109, 0.7); animation: pulse 0.7s infinite; }
.hud-gate { margin-top: 11vh; font-family: var(--display); font-size: 19px; letter-spacing: 0.14em;
  color: var(--ink); text-shadow: 0 0 18px rgba(92, 225, 255, 0.8); text-align: center;
  animation: pulse 0.9s infinite; }
.hud-slouch { position: absolute; bottom: 17vh; left: 0; right: 0; text-align: center;
  font-weight: 700; color: var(--hot); font-size: 14px; letter-spacing: 0.2em;
  animation: pulse 0.5s infinite; }
.hud-toast { position: absolute; top: 25vh; left: 0; right: 0; text-align: center;
  font-family: var(--display); font-size: 17px; color: var(--acc); letter-spacing: 0.1em;
  text-shadow: 0 0 16px rgba(92, 225, 255, 0.7); animation: toast-rise 1.2s forwards; }
.hud-face-lost { position: absolute; bottom: 25vh; left: 0; right: 0; text-align: center;
  color: var(--mut); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }
@keyframes toast-rise { 0% { opacity: 0; transform: translateY(12px); }
  20% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px); } }

/* ── boon offer: readable over any world brightness ── */
.boon { position: absolute; left: 0; right: 0; bottom: 20vh; display: flex;
  flex-direction: column; align-items: center; gap: 14px;
  padding: 18px 0 22px;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 12, 0.66) 22%, rgba(4, 6, 12, 0.66) 78%, transparent);
  backdrop-filter: blur(3px); }
.boon-row { display: flex; gap: 9vw; }
.boon-card { width: 38vw; max-width: 200px; text-align: center; display: flex;
  flex-direction: column; gap: 6px; }
.boon-card b { font-family: var(--display); font-size: 18px; letter-spacing: 0.08em; color: #ffffff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
.boon-card span { font-size: 13px; font-weight: 600; color: #dfe8f5; letter-spacing: 0.03em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.boon-card i { height: 2px; background: rgba(92, 106, 138, 0.4); display: block; }
.boon-card i::after { content: ""; display: block; height: 100%; width: 0%;
  background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.boon-card.leaning b { color: var(--acc); text-shadow: 0 0 14px var(--acc); }

/* ── game over ── */
.go-best { font-family: var(--display); color: var(--acc); font-size: 14px; letter-spacing: 0.3em;
  animation: pulse 0.8s infinite; }
.go-close { width: min(260px, 70vw); display: flex; flex-direction: column; gap: 5px; align-items: center; }
.go-close-bar { width: 100%; height: 3px; background: rgba(92, 106, 138, 0.3); }
#go-close-fill { height: 100%; width: 0%; background: var(--acc); box-shadow: 0 0 8px var(--acc);
  transition: width 0.8s ease-out; }
#go-duel-result { font-family: var(--display); font-size: 17px; letter-spacing: 0.14em; }
#go-duel-result.win { color: var(--acc); }
#go-duel-result.lose { color: var(--hot); }
.go-rankup { font-family: var(--display); color: var(--acc); letter-spacing: 0.2em; font-size: 14px;
  animation: pulse 0.8s infinite; }
.go-missions { width: min(300px, 78vw); }
.go-missions .mission { font-size: 11.5px; }
#go-unlocks { display: flex; flex-direction: column; gap: 4px; }
#go-unlocks .unlock { display: flex; align-items: center; gap: 8px; color: var(--acc);
  font-weight: 700; font-size: 12px; letter-spacing: 0.12em; }
#go-name { display: block; margin: 6px auto 0; padding: 10px; width: 170px; text-align: center;
  font-family: var(--display); font-size: 18px; letter-spacing: 0.2em; text-transform: uppercase;
  background: none; border: none; border-bottom: 2px solid var(--acc); color: var(--ink); outline: none; }

/* ── generic rows (store, trophies, history, report) ── */
.rows { width: min(360px, 90vw); }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 2px;
  border-top: 1px solid rgba(92, 106, 138, 0.16); }
.rows .row:first-child { border-top: none; }
.row .art { width: 34px; height: 34px; flex: none; display: flex; align-items: center;
  justify-content: center; color: var(--mut); }
.row .info { flex: 1; min-width: 0; }
.row .name { font-weight: 700; font-size: 13px; letter-spacing: 0.1em; }
.row .desc { color: #b6c2da; font-size: 12px; letter-spacing: 0.03em; margin-top: 2px; }
.row .act { font-family: var(--body); font-weight: 700; font-size: 12px; letter-spacing: 0.12em;
  color: var(--acc); padding: 8px 4px; white-space: nowrap; }
.row .act:disabled { color: var(--mut); opacity: 0.6; }
.row .act.owned { color: var(--ink); }
.row .act.equipped { color: var(--mut); }
.row.soon { opacity: 0.45; }
.swatch { width: 26px; height: 26px; border-radius: 50%; }
.swatch.duo { background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); }
.trailline { width: 30px; height: 3px; border-radius: 2px; }
.pips { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.pips i { width: 6px; height: 6px; border-radius: 50%; background: rgba(92, 106, 138, 0.4); }
.pips i.on { background: var(--acc); box-shadow: 0 0 6px var(--acc); }
.pips.xl { margin: 6px 0 0; gap: 6px; }
.pips.xl i { width: 22px; height: 8px; border-radius: 4px; }
.ic.xl { width: 30px; height: 30px; }
.row.big { padding: 16px 2px; }
.row.big .name { font-size: 15px; }
.row.big .desc { font-size: 12.5px; margin-top: 4px; }
.row.big .act { font-size: 14px; }

/* ── tabs ── */
.tabs { display: flex; gap: 22px; justify-content: center; margin: 6px 0 4px; }
.tab { font-weight: 700; font-size: 12px; letter-spacing: 0.2em; padding: 8px 0;
  color: var(--mut); border-bottom: 2px solid transparent; }
.tab.active { color: var(--acc); border-bottom-color: var(--acc); }

/* ── leaderboard ── */
#board-list { list-style: none; width: min(340px, 86vw); }
#board-list li { display: flex; gap: 14px; padding: 11px 2px; font-size: 15px; font-weight: 600;
  border-top: 1px solid rgba(92, 106, 138, 0.16); }
#board-list li:first-child { border-top: none; }
#board-list .rank { color: var(--mut); width: 24px; font-family: var(--display); font-size: 13px; }
#board-list li:nth-child(1) .rank { color: var(--acc); }
#board-list .tag { flex: 1; letter-spacing: 0.14em; }
#board-list .val { color: var(--acc); font-weight: 700; }
#board-list .empty { color: var(--mut); justify-content: center; font-weight: 400; font-size: 12.5px;
  letter-spacing: 0.06em; }

/* ── trophies ── */
.trophy { display: flex; gap: 14px; align-items: center; padding: 11px 2px;
  border-top: 1px solid rgba(92, 106, 138, 0.16); }
.trophy:first-child { border-top: none; }
.trophy .ic { color: var(--mut); opacity: 0.5; }
.trophy.unlocked .ic { color: var(--acc); opacity: 1; }
.trophy .t-name { font-weight: 700; font-size: 12.5px; letter-spacing: 0.12em; }
.trophy.unlocked .t-name { color: var(--acc); }
.trophy .t-desc { color: var(--mut); font-size: 11px; margin-top: 1px; }

/* ── history / report ── */
.hist-row { display: flex; gap: 12px; padding: 10px 2px; font-size: 13px; font-weight: 600;
  border-top: 1px solid rgba(92, 106, 138, 0.16); align-items: center; }
.hist-row:first-child { border-top: none; }
.hist-row .h-date { color: var(--mut); width: 70px; font-size: 11px; }
.hist-row .h-mode { width: 52px; font-size: 10px; letter-spacing: 0.14em; color: var(--mut); }
.hist-row .h-score { flex: 1; text-align: right; color: var(--acc); }
.hist-row .h-stretch { width: 52px; text-align: right; color: var(--ink); }
.rom-line { display: flex; justify-content: space-between; padding: 8px 2px; font-size: 12px;
  letter-spacing: 0.06em; border-top: 1px solid rgba(92, 106, 138, 0.16); }
.rom-line:first-child { border-top: none; }
.rom-line .delta { font-weight: 700; color: var(--acc); }
.rom-line .delta.down { color: var(--mut); }

.report-ring-wrap { position: relative; width: 130px; height: 130px; }
.report-ring-num { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.report-ring-num span { font-family: var(--display); font-size: 36px; }
.report-ring-num small { font-size: 8px; letter-spacing: 0.3em; color: var(--mut); }
.report-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.report-row .k { color: var(--mut); flex: 1; }
.report-row .bar { flex: 1.4; height: 3px; background: rgba(92, 106, 138, 0.25); }
.report-row .bar i { display: block; height: 100%; background: var(--acc); }
.report-row .v { min-width: 68px; text-align: right; }
.report-goals { display: flex; gap: 34px; margin: 8px 0; }
.report-goals .g { text-align: center; font-size: 9px; letter-spacing: 0.2em; color: var(--mut); }
.report-goals .g b { display: block; font-family: var(--display); font-size: 15px; color: var(--ink); }
.report-goals .g.done b { color: var(--acc); }

/* ── lore ── */
.lore { width: min(360px, 90vw); display: flex; flex-direction: column; gap: 16px; }
.lore .entry b { display: block; font-size: 11px; letter-spacing: 0.24em; color: var(--acc);
  margin-bottom: 4px; }
.lore .entry p { font-size: 13px; line-height: 1.65; color: var(--ink); }
.lore .entry.locked b { color: var(--mut); }
.lore-about { width: min(360px, 90vw); text-align: center; line-height: 1.6; margin-top: 10px; }

/* ── settings ── */
.setting { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(320px, 84vw); padding: 12px 0; font-weight: 700; font-size: 12px;
  letter-spacing: 0.24em; border-top: 1px solid rgba(92, 106, 138, 0.16); }
.setting:first-of-type { border-top: none; }
.setting input[type=range] { flex: 1; max-width: 46%; accent-color: var(--acc); height: 2px; }
.setting input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--acc); }

.hidden { display: none !important; }

/* ── world skins: the whole UI changes voice with the equipped world ── */
body.world-ocean {
  --acc: #3fd4ff;
  --bg: #04222e;
  --mut: #6b93a8;
  --display: "Fredoka", sans-serif;
}
body.world-ocean .logo { text-shadow: 0 0 34px rgba(63, 212, 255, 0.55); }
body.world-ocean .cta { box-shadow: 0 0 30px rgba(63, 212, 255, 0.4); }
body.world-jungle {
  --acc: #7ddf4a;
  --bg: #10240c;
  --mut: #7fa06b;
  --hot: #ff8a3c;
  --display: "Baloo 2", sans-serif;
}
body.world-jungle .logo { text-shadow: 0 0 34px rgba(125, 223, 74, 0.55); }
body.world-jungle .cta { box-shadow: 0 0 30px rgba(125, 223, 74, 0.4); }
body.world-jungle .label, body.world-ocean .label { letter-spacing: 0.3em; }