/* ================================================================
   UNBRAIN v2 — arcade organiser design system
   mobile-first · 5 themes · CRT layer · 3D chunk buttons · boss HP
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --pixel:'Press Start 2P', monospace;
  --mono:'VT323', ui-monospace, monospace;
  /* NEON ARCADE (default) */
  --bg:#0b0720; --bg2:#160b38; --panel:#1c1145; --panel2:#26165c;
  --ink:#eafff9; --ink-dim:#9d92c9;
  --a1:#22e3d6; --a2:#ff4fd8; --a3:#b6ff3d; --a4:#ffcf3d;
  --danger:#ff5470; --ok:#4ade80;
  --hp:#ff5470; --hp2:#ffcf3d;
  --line:rgba(255,255,255,.10);
  --shadow-hard:4px 4px 0 rgba(0,0,0,.55);
  --glow:0 0 18px;
}
[data-theme="gameboy"]{
  --bg:#0f1a0d; --bg2:#182a10; --panel:#1d3316; --panel2:#2a4a1e;
  --ink:#d6ffb0; --ink-dim:#8fae76;
  --a1:#9be04b; --a2:#c6ff6a; --a3:#6bbb2a; --a4:#e5ff9c;
  --danger:#e07a4b; --hp:#e07a4b; --hp2:#e5ff9c;
}
[data-theme="vapor"]{ /* true vaporwave: pastel neons over a sunset grid — nothing like the dark themes */
  --bg:#170b3a; --bg2:#6d1663; --panel:#2a1656; --panel2:#3a1f74;
  --ink:#fdf0ff; --ink-dim:#c2a4e2;
  --a1:#01cdfe; --a2:#ff71ce; --a3:#05ffa1; --a4:#fffb96;
  --hp:#ff71ce; --hp2:#fffb96;
  --line:rgba(255,113,206,.24);
  --shadow-hard:4px 4px 0 rgba(122,27,109,.65);
}
[data-theme="vapor"] body{
  background:linear-gradient(180deg,#150b38 0%,#2c1160 42%,#7a1b6d 72%,#ff5f9e 96%,#ffb46e 100%);
  background-attachment:fixed;
}
[data-theme="vapor"] body::before{ /* retro perspective grid rolling to the horizon */
  content:''; position:fixed; left:-25vw; right:-25vw; bottom:0; height:30vh; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(1,205,254,.55) 42px 45px),
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(1,205,254,.60) 22px 25px);
  transform:perspective(300px) rotateX(56deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);
  mask-image:linear-gradient(180deg,transparent,#000 45%);
}
[data-theme="vapor"] body::after{ /* vapor sun sinking behind the grid horizon */
  content:''; position:fixed; left:50%; bottom:16vh; width:19vh; height:19vh; margin-left:-9.5vh;
  border-radius:50%; pointer-events:none; opacity:.55;
  background:linear-gradient(180deg,#fffb96 0%,#ffb46e 40%,#ff71ce 75%,#ff5f9e 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 46%,transparent 46% 52%,#000 52% 62%,transparent 62% 67%,#000 67% 76%,transparent 76% 80%,#000 80%);
  mask-image:linear-gradient(180deg,#000 0 46%,transparent 46% 52%,#000 52% 62%,transparent 62% 67%,#000 67% 76%,transparent 76% 80%,#000 80%);
  filter:drop-shadow(0 0 24px rgba(255,95,158,.5));
}
[data-theme="vapor"] .wrap,[data-theme="vapor"] .nav{position:relative;z-index:1}
[data-theme="matrix"]{
  --bg:#020a02; --bg2:#051505; --panel:#07200a; --panel2:#0b3110;
  --ink:#c6ffce; --ink-dim:#66a06e;
  --a1:#22ff66; --a2:#8dffb0; --a3:#0fbf4a; --a4:#eaffea;
  --danger:#ff8866; --hp:#ff8866; --hp2:#eaffea;
}
[data-theme="sunset"]{
  --bg:#1a0712; --bg2:#2f0c20; --panel:#3a0f28; --panel2:#521738;
  --ink:#ffeef2; --ink-dim:#d59aad;
  --a1:#ff9f68; --a2:#ff477e; --a3:#ffd23f; --a4:#ffb3c6;
  --hp:#ff477e; --hp2:#ffd23f;
}
[data-theme="frost"]{ /* lv7 */
  --bg:#061220; --bg2:#0a2136; --panel:#0d2a44; --panel2:#123a5e;
  --ink:#eaf8ff; --ink-dim:#8fb4cd;
  --a1:#7df9ff; --a2:#9bb8ff; --a3:#c2fff7; --a4:#ffffff;
  --danger:#ff7d9c; --hp:#ff7d9c; --hp2:#c2fff7;
}
[data-theme="lava"]{ /* lv9 */
  --bg:#1c0602; --bg2:#320b03; --panel:#3d0f04; --panel2:#571707;
  --ink:#ffeedd; --ink-dim:#cf9576;
  --a1:#ff6b1a; --a2:#ffb52e; --a3:#ff3d2e; --a4:#ffd98a;
  --danger:#ff3d2e; --hp:#ff3d2e; --hp2:#ffd98a;
}
[data-theme="galaxy"]{ /* lv12 */
  --bg:#070313; --bg2:#140a2e; --panel:#1b0e3d; --panel2:#281457;
  --ink:#f0eaff; --ink-dim:#a293d1;
  --a1:#8f7dff; --a2:#ff6ef2; --a3:#5ef2c8; --a4:#ffe066;
  --hp:#ff6ef2; --hp2:#ffe066;
}
[data-theme="royal"]{ /* lv15 */
  --bg:#140f02; --bg2:#241b04; --panel:#2e2306; --panel2:#42320a;
  --ink:#fff7dd; --ink-dim:#c9b57a;
  --a1:#ffd23f; --a2:#ffef9e; --a3:#e0a92e; --a4:#ffffff;
  --danger:#ff7455; --hp:#ff7455; --hp2:#ffef9e;
}
[data-theme="void"]{ /* lv18 */
  --bg:#000000; --bg2:#0c0c14; --panel:#101018; --panel2:#191926;
  --ink:#e8e8f5; --ink-dim:#77778f;
  --a1:#c8c8ff; --a2:#8b5cf6; --a3:#e5e5e5; --a4:#b7ffbf;
  --danger:#ff5470; --hp:#ff5470; --hp2:#b7ffbf;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--mono); font-size:20px; color:var(--ink);
  background:
    radial-gradient(ellipse at 15% -5%, var(--bg2), transparent 55%),
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--a2) 12%, transparent), transparent 50%),
    var(--bg);
  min-height:100vh; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
/* pixel-grid ambient background */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:34px 34px; opacity:.25;
  mask-image:radial-gradient(ellipse at 50% 20%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 20%, #000 30%, transparent 75%);
}
/* CRT scanlines + vignette (toggleable easter egg) */
html.crt body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
html.crt .wrap{animation:crtflicker 4s infinite}
@keyframes crtflicker{0%,100%{opacity:1}97%{opacity:1}98%{opacity:.92}99%{opacity:1}}

.wrap{max-width:600px; margin:0 auto; padding:14px 14px 110px; position:relative; z-index:1}

h1,h2,h3{font-family:var(--pixel); font-weight:400; line-height:1.6}
h1{font-size:17px} h2{font-size:13px; margin:.5em 0}
.pixel{font-family:var(--pixel)}
.small{font-size:16px} .dim{color:var(--ink-dim)}
a{color:var(--a1); text-decoration:none}
.center{text-align:center}
.hidden{display:none !important}
.row{display:flex; gap:8px; flex-wrap:wrap}
.row>*{flex:1}

/* ---------- top bar ---------- */
.topbar{display:flex; align-items:center; gap:10px; margin-bottom:12px; position:relative; z-index:2}
.logo{font-family:var(--pixel); font-size:15px; color:var(--a1); cursor:pointer; user-select:none;
  text-shadow:2px 2px 0 color-mix(in srgb, var(--a2) 80%, #000), var(--glow) color-mix(in srgb, var(--a1) 55%, transparent)}
.logo b{color:var(--a2)}
.spacer{flex:1}
.lvlchip{font-family:var(--pixel); font-size:9px; color:var(--bg);
  background:linear-gradient(180deg,var(--a3),color-mix(in srgb,var(--a3) 70%,#000));
  padding:7px 10px; border-radius:9px; box-shadow:var(--shadow-hard); white-space:nowrap}
.usertitle{font-size:14px; color:var(--a4); font-family:var(--mono)}

/* ---------- chunky 3D buttons ---------- */
.btn{
  font-family:var(--pixel); font-size:11px; color:#08121a; border:none; cursor:pointer;
  background:linear-gradient(180deg,var(--a1),color-mix(in srgb,var(--a1) 68%,#000));
  border-radius:11px; padding:13px 15px; text-transform:lowercase;
  box-shadow:var(--shadow-hard), inset 0 2px 0 rgba(255,255,255,.35);
  transition:transform .06s, box-shadow .06s; position:relative;
}
.btn:active{transform:translate(3px,3px); box-shadow:1px 1px 0 rgba(0,0,0,.55)}
.btn.mag{background:linear-gradient(180deg,var(--a2),color-mix(in srgb,var(--a2) 68%,#000)); color:#1a0417}
.btn.lime{background:linear-gradient(180deg,var(--a3),color-mix(in srgb,var(--a3) 68%,#000)); color:#0d1a02}
.btn.gold{background:linear-gradient(180deg,var(--a4),color-mix(in srgb,var(--a4) 68%,#000)); color:#1a1402}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--line)}
.btn.danger{background:linear-gradient(180deg,var(--danger),color-mix(in srgb,var(--danger) 60%,#000)); color:#fff}
.btn.big{font-size:14px; padding:17px 18px; width:100%}
.btn:disabled{opacity:.5; cursor:wait}

/* ---------- panels ---------- */
.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:2px solid var(--line); border-radius:16px; padding:14px; margin-bottom:14px;
  position:relative; box-shadow:0 10px 0 -5px rgba(0,0,0,.45), 0 20px 44px rgba(0,0,0,.45);
}

/* ---------- check-in hero ---------- */
.hero{text-align:center; padding:18px 14px; overflow:hidden}
.hero::before{content:''; position:absolute; inset:-40% -20% auto; height:120%;
  background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb,var(--a2) 26%,transparent), transparent 65%);
  pointer-events:none}
.streak-badge{font-family:var(--pixel); display:inline-flex; flex-direction:column; align-items:center;
  gap:7px; padding:16px 26px; border-radius:18px; margin:8px 0 10px; position:relative;
  border:2px solid var(--line); background:rgba(0,0,0,.3)}
.streak-num{font-size:44px; line-height:1; color:var(--a4); text-shadow:var(--glow) var(--a4)}
.streak-emoji{font-size:36px; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--a4) 60%,transparent))}
.streak-title{font-size:9px; color:var(--a2); letter-spacing:1px}
.streak-flavor{font-size:16px; color:var(--ink-dim); min-height:22px}
/* tier flair — escalates, future tiers unknown until earned */
.st3 .streak-emoji{animation:bounce 1.6s ease-in-out infinite}
.st5 .streak-emoji,.st7 .streak-emoji{animation:wiggle 1.1s ease-in-out infinite}
.st7 .streak-badge{border-color:var(--a4)}
.st10 .streak-badge{animation:floaty 3s ease-in-out infinite; border-color:var(--a4)}
.st14 .streak-badge{animation:hue 7s linear infinite}
.st21 .streak-badge{animation:hue 5s linear infinite; box-shadow:0 0 26px color-mix(in srgb,var(--a2) 55%,transparent)}
.st30 .streak-badge{animation:hue 4s linear infinite, floaty 3s ease-in-out infinite; box-shadow:0 0 34px var(--a3)}
.st50 .streak-num{animation:hue 2.5s linear infinite}
.st50 .streak-badge{box-shadow:0 0 40px var(--a1)}
.st75 .streak-badge{animation:glitch .9s steps(2) infinite; box-shadow:0 0 40px var(--a2)}
.st100 .streak-badge{animation:hue 2s linear infinite, floaty 2.5s ease-in-out infinite;
  box-shadow:0 0 60px var(--a4); border-color:var(--a4)}
.st100 .streak-num{font-size:52px}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wiggle{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hue{from{filter:hue-rotate(0)}to{filter:hue-rotate(360deg)}}
@keyframes glitch{0%,100%{transform:translate(0)}25%{transform:translate(-2px,1px) skewX(2deg)}75%{transform:translate(2px,-1px) skewX(-2deg)}}

/* ---------- XP ---------- */
.xpbar{height:16px; background:rgba(0,0,0,.45); border-radius:9px; overflow:hidden;
  border:2px solid var(--line); position:relative}
.xpbar>i{display:block; height:100%; border-radius:7px;
  background:repeating-linear-gradient(45deg,var(--a3) 0 10px, color-mix(in srgb,var(--a3) 75%,#fff) 10px 20px);
  box-shadow:var(--glow) color-mix(in srgb,var(--a3) 60%,transparent);
  transition:width .9s cubic-bezier(.2,1,.3,1)}
.xptext{font-size:14px; color:var(--ink-dim); margin-top:4px}
.xp-ledger-trigger{display:block;width:100%;margin:12px 0 8px;padding:5px 4px 3px;background:transparent;
  color:inherit;border:1px solid transparent;border-radius:10px;cursor:pointer;font-family:inherit}
.xp-ledger-trigger:hover,.xp-ledger-trigger:focus-visible{border-color:var(--a1);outline:none;background:rgba(0,0,0,.14)}
.xp-ledger-hint{font-family:var(--mono);font-size:14px;color:var(--a1);margin-top:3px}
.xp-ledger-card{width:min(94vw,520px)}
.xp-ledger-head{display:flex;align-items:center;gap:12px;justify-content:space-between;padding-right:30px}
.xp-ledger-head h2{margin:0}
.xp-ledger-balance{font-family:var(--pixel);font-size:12px;color:var(--a4);white-space:nowrap}
.xp-ledger-list{display:flex;flex-direction:column;gap:7px;margin-top:12px;max-height:60dvh;overflow:auto;padding-right:3px}
.xp-ledger-row{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:start;padding:9px;
  border:1px solid var(--line);border-radius:11px;background:rgba(0,0,0,.2)}
.xp-ledger-amount{font-family:var(--pixel);font-size:11px;text-align:right;padding-top:4px}
.xp-ledger-amount.plus{color:var(--ok)}.xp-ledger-amount.minus{color:var(--danger)}
.xp-ledger-copy{min-width:0;overflow-wrap:anywhere}

/* ---------- WEEK RADAR ---------- */
.radar{display:flex; gap:6px; overflow-x:auto; padding:4px 2px 8px; scrollbar-width:none}
.radar::-webkit-scrollbar{display:none}
.rday{min-width:66px; flex:0 0 auto; text-align:center; padding:9px 4px; border-radius:12px;
  background:rgba(0,0,0,.28); border:2px solid var(--line)}
.rday.today{border-color:var(--a1); box-shadow:var(--glow) color-mix(in srgb,var(--a1) 45%,transparent)}
.rday.overdue{border-color:var(--danger); animation:redpulse 1.4s infinite}
@keyframes redpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 60%,transparent)}50%{box-shadow:0 0 14px 2px color-mix(in srgb,var(--danger) 60%,transparent)}}
.rday .d{font-family:var(--pixel); font-size:8px; color:var(--ink-dim)}
.rday .n{font-family:var(--pixel); font-size:13px; margin:3px 0}
.rday .dots{min-height:18px; font-size:13px; letter-spacing:1px}
.rday.today .d{color:var(--a1)}

/* ---------- BOSS cards (deadline projects) ---------- */
.boss{border:2px solid var(--cat,var(--a1)); border-radius:16px; margin-bottom:12px;
  background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.16)); overflow:hidden; position:relative;
  transition:transform .12s}
.boss.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-5px,2px) rotate(-.6deg)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,1px) rotate(.5deg)}80%{transform:translate(2px,-1px)}}
.boss-head{display:flex; align-items:center; gap:10px; padding:12px 12px 8px}
.boss-emoji{font-size:30px; filter:drop-shadow(2px 2px 0 rgba(0,0,0,.5))}
.boss-titlebox{flex:1; min-width:0}
.boss-title{font-size:21px; line-height:1.1; word-break:break-word}
.boss.done .boss-title{text-decoration:line-through; color:var(--ink-dim)}
.boss-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.pill{font-size:13px; padding:2px 9px; border-radius:20px; background:rgba(255,255,255,.08);
  border:1px solid var(--line)}
.pill.due-over{color:#fff; background:var(--danger); border-color:transparent; font-family:var(--pixel); font-size:8px; padding:4px 8px}
.pill.due-soon{color:#1a1402; background:var(--a4); border-color:transparent}
/* HP bar */
.hpwrap{padding:0 12px 4px}
.hplabel{display:flex; justify-content:space-between; font-family:var(--pixel); font-size:8px; color:var(--ink-dim); margin-bottom:3px}
.hpbar{height:14px; border-radius:8px; background:rgba(0,0,0,.5); border:2px solid rgba(0,0,0,.6); overflow:hidden}
.hpbar>i{display:block; height:100%; border-radius:5px;
  background:linear-gradient(90deg,var(--hp),var(--hp2));
  transition:width .55s cubic-bezier(.2,1,.3,1)}
.boss .subs{padding:4px 10px 10px}
.boss-foot{display:flex; gap:8px; align-items:center; padding:0 12px 12px; flex-wrap:wrap}

/* ---------- tasks (minions + subtasks) ---------- */
.task{display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border-radius:13px;
  margin-bottom:9px; background:rgba(0,0,0,.24); border:1px solid var(--line);
  border-left:5px solid var(--cat,var(--a1)); position:relative; transition:opacity .3s}
.task.sub{margin:0 0 7px 0; background:rgba(0,0,0,.18); border-left-width:4px}
.check{width:32px; height:32px; flex:0 0 32px; border-radius:9px; cursor:pointer;
  border:2px solid var(--cat,var(--a1)); background:rgba(0,0,0,.3); position:relative;
  transition:transform .1s; box-shadow:inset 2px 2px 0 rgba(0,0,0,.4)}
.check:active{transform:scale(.82)}
.done>.check, .task.done .check, .quest-card.done>.quest-summary>.check{background:var(--ok); border-color:var(--ok)}
.done>.check::after, .task.done .check::after, .quest-card.done>.quest-summary>.check::after{content:'✔'; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; color:#04210f; font-family:var(--pixel); font-size:13px}
.task.done .ttitle{text-decoration:line-through; color:var(--ink-dim)}
.tbody{flex:1; min-width:0}
.ttitle{font-size:20px; word-break:break-word}
.tmeta{display:flex; gap:7px; flex-wrap:wrap; margin-top:3px; align-items:center}
.tinylink{font-size:14px; color:var(--ink-dim); cursor:pointer; text-decoration:underline dotted}

/* notes */
.notes{margin-top:8px}
.note{font-size:16px; background:rgba(0,0,0,.32); border:1px dashed var(--line);
  border-radius:9px; padding:7px 10px; margin-top:6px}
.note b{color:var(--a4)}

/* ---------- bottom nav ---------- */
.nav{position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; justify-content:center; gap:10px;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, transparent, var(--bg) 45%)}
.navbtn{font-family:var(--pixel); font-size:8px; color:var(--ink-dim); display:flex; flex-direction:column;
  align-items:center; gap:5px; padding:9px 16px; background:var(--panel); border:2px solid var(--line);
  border-radius:13px; cursor:pointer; box-shadow:var(--shadow-hard); text-decoration:none; transition:transform .08s}
.navbtn.active{color:var(--bg); background:var(--a1); border-color:var(--a1); box-shadow:var(--glow) color-mix(in srgb,var(--a1) 55%,transparent)}
.navbtn:active{transform:translateY(3px)}
.navbtn .ic{font-size:21px}

/* ---------- chat ---------- */
.chat-wrap{display:flex; flex-direction:column; height:calc(100dvh - 148px)}
.chat-scroll{flex:1; overflow-y:auto; padding:8px 2px}
.msg{max-width:84%; margin:8px 0; padding:10px 14px; border-radius:16px; font-size:19px; line-height:1.25; word-break:break-word; position:relative}
.msg.user{margin-left:auto; color:#06131a; border-bottom-right-radius:5px;
  background:linear-gradient(180deg,var(--a1),color-mix(in srgb,var(--a1) 70%,#000))}
.msg.bot{margin-right:auto; background:var(--panel2); border:1px solid var(--line); border-bottom-left-radius:5px}
.msg.audio::before{content:'🎙 '; opacity:.75}
.voicebtn{font-size:15px; color:var(--a2); cursor:pointer; display:inline-block; margin-top:5px}
.typing{display:inline-flex; gap:4px; padding:4px 0}
.typing i{width:8px; height:8px; border-radius:2px; background:var(--a2); animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.2}30%{opacity:1}}
.chips{display:flex; gap:7px; overflow-x:auto; padding:6px 2px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.qchip{flex:0 0 auto; font-size:15px; padding:7px 12px; border-radius:20px; cursor:pointer;
  background:rgba(0,0,0,.3); border:1px solid var(--line); color:var(--ink-dim)}
.qchip.disabled{opacity:.42;pointer-events:none}
.composer{display:flex; gap:8px; align-items:center; padding:8px 2px}
.composer input[type=text]{flex:1; font-family:var(--mono); font-size:20px; color:var(--ink);
  background:rgba(0,0,0,.4); border:2px solid var(--line); border-radius:13px; padding:12px}
.composer input:focus{outline:none; border-color:var(--a1)}
.composer button:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.35)}
.micbtn{width:56px; height:56px; flex:0 0 56px; border-radius:50%; border:none; cursor:pointer;
  color:#fff; font-size:25px; touch-action:none; box-shadow:var(--shadow-hard); transition:transform .12s;
  background:radial-gradient(circle at 35% 28%, var(--a2), color-mix(in srgb,var(--a2) 55%,#000))}
.micbtn.rec{transform:scale(1.18); animation:recpulse .8s infinite}
.micbtn.cancel{background:radial-gradient(circle at 35% 28%, var(--danger), color-mix(in srgb,var(--danger) 45%,#000))}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a2) 65%,transparent)}50%{box-shadow:0 0 0 18px transparent}}
.rechint{font-size:15px; color:var(--ink-dim); text-align:center; min-height:20px}
.chatlimit{font-size:12px;color:var(--ink-dim);text-align:right;min-height:15px;padding:0 3px}

/* ---------- overlays: toast, banner, confetti, modals ---------- */
.toast{position:fixed; left:50%; bottom:118px; transform:translateX(-50%) translateY(16px);
  background:var(--panel2); border:2px solid var(--a3); color:var(--ink); font-family:var(--pixel);
  font-size:10px; padding:12px 16px; border-radius:13px; z-index:300; opacity:0; pointer-events:none;
  transition:all .3s; box-shadow:var(--glow) color-mix(in srgb,var(--a3) 50%,transparent); max-width:86vw; text-align:center; line-height:1.6}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.confetti{position:fixed; inset:0; pointer-events:none; z-index:400; overflow:hidden}
.confetti i{position:absolute; width:9px; height:13px; top:-20px; will-change:transform}
@keyframes fall{to{transform:translateY(112vh) rotate(760deg)}}
.overlay{position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72); opacity:0; pointer-events:none; transition:opacity .22s; padding:16px}
.overlay.show{opacity:1; pointer-events:auto}
.ocard{font-family:var(--mono); width:min(94vw,440px); max-height:86dvh; overflow-y:auto; text-align:left;
  background:linear-gradient(180deg,var(--panel),var(--panel2)); border:3px solid var(--a1);
  border-radius:18px; padding:20px; box-shadow:var(--glow) color-mix(in srgb,var(--a1) 45%,transparent);
  animation:popin .35s cubic-bezier(.2,1.5,.4,1)}
.ocard.gold{border-color:var(--a4); box-shadow:var(--glow) var(--a4)}
.ocard.red{border-color:var(--danger); box-shadow:var(--glow) color-mix(in srgb,var(--danger) 50%,transparent)}
.ocard h2{margin-top:0}
.info-banner{cursor:pointer;touch-action:manipulation;user-select:none}
.info-banner-hint{margin-top:14px}
.egggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px}
.eggchip{appearance:none;width:100%;margin:0;padding:10px 12px;display:flex;flex-direction:column;align-items:flex-start;
  gap:3px;color:var(--ink);font-family:var(--mono);cursor:pointer;text-align:left;touch-action:manipulation}
.eggchip:hover,.eggchip:focus-visible{border-color:var(--a4);background:color-mix(in srgb,var(--a4) 12%,rgba(255,255,255,.08));outline:none}
.eggchip:active{transform:translateY(1px)}
.eggchip small{font-size:11px;color:var(--ink-dim)}
.egg-shelf-hint{margin-top:9px}
.eggstory-emoji{font-size:64px;filter:drop-shadow(0 5px 12px rgba(0,0,0,.55));animation:floaty 2s ease-in-out infinite}
.eggstory-kicker{font-family:var(--pixel);font-size:8px;color:var(--a4);letter-spacing:.05em;margin-top:8px}
.eggstory h2{margin:8px 0 14px;color:var(--a4)}
.eggstory-how,.eggstory-lore{padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.27);line-height:1.45}
.eggstory-how b{font-family:var(--pixel);font-size:8px;color:var(--a3)}
.eggstory-lore{margin:10px 0 14px;border-color:color-mix(in srgb,var(--a4) 42%,var(--line));font-style:italic}
@keyframes popin{from{transform:scale(.5) rotate(-4deg); opacity:0}to{transform:scale(1); opacity:1}}

/* loot box — dedicated overlay: always viewport-centred, above #overlay banners,
   and only its own ✕ / button close it (no backdrop tap, no Esc, no timers) */
.lootov{position:fixed; inset:0; z-index:520; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72); padding:16px}
.lootcard{position:relative}
.lootbox{font-size:74px; display:inline-block; cursor:pointer; user-select:none;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.6)); animation:floaty 2s ease-in-out infinite}
.lootbox.opening{animation:lootshake .5s ease-in-out 2}
@keyframes lootshake{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) scale(1.06)}75%{transform:rotate(12deg) scale(1.06)}}
.lootprize{font-size:52px; animation:popin .5s cubic-bezier(.2,1.6,.4,1)}

/* vibe check */
.vibes{display:flex; gap:9px; justify-content:center; margin:10px 0}
.vibe{font-size:32px; cursor:pointer; transition:transform .12s; filter:grayscale(.55); padding:4px}
.vibe:active{transform:scale(1.3)}
.vibe.sel{filter:none; transform:scale(1.25)}

/* focus timer */
.focus-time{font-family:var(--pixel); font-size:46px; color:var(--a1); text-shadow:var(--glow) color-mix(in srgb,var(--a1) 60%,transparent); text-align:center; margin:14px 0}
.focus-task{text-align:center; font-size:19px; color:var(--a4); margin-bottom:6px}

/* inputs */
input[type=text],input[type=password],input[type=datetime-local],input[type=date],
input[type=time],input[type=number],select,textarea{
  font-family:var(--mono); font-size:19px; color:var(--ink); width:100%;
  background:rgba(0,0,0,.4); border:2px solid var(--line); border-radius:11px; padding:11px 12px;
  color-scheme:dark; box-sizing:border-box}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--a1)}
select option{background:var(--panel); color:var(--ink)}
label.fld{display:block; margin:12px 0 4px; font-size:15px; color:var(--ink-dim)}

/* chips grids (personas, themes) */
.chipgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:9px}
.chipgrid.c3{grid-template-columns:repeat(3,1fr)}
.pchip{border:2px solid var(--line); border-radius:13px; padding:11px; cursor:pointer;
  background:rgba(0,0,0,.26); transition:transform .08s; position:relative}
.pchip:active{transform:scale(.95)}
.pchip.sel{border-color:var(--a1); box-shadow:var(--glow) color-mix(in srgb,var(--a1) 45%,transparent)}
.pchip.locked{opacity:.45; cursor:not-allowed}
.pchip .ce{font-size:27px}
.pchip .cl{font-family:var(--pixel); font-size:9px; margin-top:5px; line-height:1.5}
.pchip .cb{font-size:14px; color:var(--ink-dim); margin-top:2px}
.pchip .lock{position:absolute; top:6px; right:8px; font-size:14px}

/* sticker shelf */
.shelf{display:flex; flex-wrap:wrap; gap:8px; font-size:28px; padding:6px 0}
.shelf .slot{width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); border:1px dashed var(--line); border-radius:10px}

/* login */
.login-card{max-width:410px; margin:7vh auto 0}
.pick-user{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0}
.pick-user .u{padding:17px 10px; text-align:center; border-radius:15px; cursor:pointer;
  background:rgba(0,0,0,.26); border:2px solid var(--line); transition:transform .08s}
.pick-user .u:active{transform:scale(.94)}
.pick-user .u .av{font-size:38px}
.pick-user .u .nm{font-family:var(--pixel); font-size:10px; margin-top:7px}

/* arcade (snake) */
#snakeCanvas{background:rgba(0,0,0,.55); border:3px solid var(--a3); border-radius:10px;
  image-rendering:pixelated; touch-action:none; display:block; margin:0 auto}

/* reminder nudge banner */
.nudge{position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:350; width:min(94vw,430px);
  background:linear-gradient(180deg,var(--panel),var(--panel2)); border:2px solid var(--a4);
  border-radius:14px; padding:12px 14px; box-shadow:var(--glow) color-mix(in srgb,var(--a4) 45%,transparent), 0 12px 30px rgba(0,0,0,.6);
  animation:nudgein .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes nudgein{from{transform:translateX(-50%) translateY(-90px)}to{transform:translateX(-50%) translateY(0)}}

@media(min-width:640px){ body{font-size:21px} .wrap{padding-top:24px} }
@media(prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* ---------- music fab + equalizer ---------- */
.musicfab{position:fixed;right:max(14px,calc((100vw - 600px)/2 + 14px));
  top:calc(14px + env(safe-area-inset-top));bottom:auto;z-index:580;width:52px;height:52px;border-radius:50%;
  border:2px solid var(--line);cursor:pointer;font-size:20px;color:var(--ink-dim);
  background:var(--panel);box-shadow:var(--shadow-hard);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;line-height:1;transition:transform .08s}
.musicfab:active{transform:scale(.9)}
.musicfab:focus-visible{outline:3px solid var(--a4);outline-offset:3px}
.musicfab.on{color:var(--a3);border-color:var(--a3);box-shadow:0 0 18px color-mix(in srgb,var(--a3) 45%,transparent)}
.musicfab .eq{display:inline-flex;gap:2px;align-items:flex-end;height:9px}
.musicfab .eq i{width:3px;height:3px;background:currentColor;border-radius:1px}
.musicfab.on .eq i{animation:eqbar .5s ease-in-out infinite}
.musicfab.on .eq i:nth-child(2){animation-delay:.15s}
.musicfab.on .eq i:nth-child(3){animation-delay:.3s}
@keyframes eqbar{0%,100%{height:3px}50%{height:9px}}
/* The generated control occupies a reserved rail in the first app topbar. */
body.has-musicfab .wrap>.topbar:first-child{min-height:54px;padding-right:64px}

/* ---------- quest log (agenda) ---------- */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.quest-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px}
.quest-actions .btn{width:100%;min-height:52px}
.agfilters{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;align-items:center}
.fchip{font-size:14px;padding:6px 12px;border-radius:18px;cursor:pointer;color:var(--ink-dim);
  font-family:var(--mono);line-height:1.1;appearance:none;-webkit-appearance:none;
  background:rgba(0,0,0,.3);border:1.5px solid var(--line);transition:all .15s;user-select:none}
.fchip.sel{color:var(--bg);background:var(--a1);border-color:var(--a1);box-shadow:var(--glow) color-mix(in srgb,var(--a1) 45%,transparent)}
.fchip:focus-visible{outline:2px solid var(--a4);outline-offset:2px}
.agcard{display:flex;align-items:center;gap:12px;padding:13px;border-radius:14px;margin-bottom:10px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));border:2px solid var(--line);
  border-left:6px solid var(--cat,var(--a1));text-decoration:none;color:var(--ink);
  transition:transform .12s, box-shadow .12s;position:relative}
.agcard:active{transform:scale(.98)}
.agcard:hover{box-shadow:var(--glow) color-mix(in srgb,var(--a1) 30%,transparent)}
.agcard.overdue{border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
.agcard.done{opacity:.55}
.agcard.done .agtitle{text-decoration:line-through}
.agrank{font-family:var(--pixel);font-size:16px;color:var(--a4);width:30px;text-align:center;
  text-shadow:2px 2px 0 rgba(0,0,0,.5)}
.agbody{flex:1;min-width:0}
.agtitle{font-size:20px;word-break:break-word}
.agmeta{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.aggo{font-family:var(--pixel);font-size:12px;color:var(--a2)}
.pill.due-soon-soft{color:var(--a4);border-color:color-mix(in srgb,var(--a4) 40%,transparent)}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:14px}

/* Collapsible quest cards retain the existing boss-battle visual language. */
.quest-card{margin-bottom:12px}
.quest-summary{display:flex;align-items:center;gap:10px;min-height:62px;padding:11px 12px;
  list-style:none;cursor:pointer;user-select:none;background:rgba(0,0,0,.10);transition:background .18s}
.quest-summary::-webkit-details-marker{display:none}
.quest-summary::before{content:'▶';flex:0 0 15px;width:15px;color:var(--a4);font-family:var(--pixel);
  font-size:8px;text-align:center;transition:transform .2s cubic-bezier(.2,1,.3,1)}
.quest-card[open]>.quest-summary::before{transform:rotate(90deg)}
.quest-card[open]>.quest-summary{background:color-mix(in srgb,var(--cat,var(--a1)) 8%,rgba(0,0,0,.16))}
.quest-summary:focus-visible{outline:2px solid var(--a4);outline-offset:-4px}
.quest-summary .boss-titlebox{min-width:0}
.quest-summary .check{margin-left:auto}
.quest-count{flex:0 0 auto;white-space:nowrap;font-size:13px;padding:3px 9px;border-radius:999px;
  color:var(--a3);background:rgba(0,0,0,.32);border:1px solid color-mix(in srgb,var(--a3) 35%,transparent)}
.quest-card.done .quest-count{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.quest-detail{border-top:1px solid var(--line);padding-top:8px;background:rgba(0,0,0,.08)}
.quest-detail>.hpwrap{padding-top:2px}
.quest-detail>.notes{padding:0 12px 10px}
.quest-detail>.boss-foot{padding-top:2px}
.quest-empty{padding:24px 14px;text-align:center}

/* ---------- phone app install ---------- */
.install-app-panel{margin-top:14px;border-color:color-mix(in srgb,var(--a2) 45%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--a2) 8%,var(--panel)),var(--panel2))}
.install-app-copy{margin-bottom:12px}
.install-app-copy h2{margin:0 0 5px}
.install-app-panel .btn{width:100%}
#installAppBtn{text-transform:none}
.install-guide{max-width:430px}
.install-guide-icon{font-size:54px;line-height:1;margin-bottom:8px}
.install-steps{display:grid;gap:9px;margin:14px 0;text-align:left;counter-reset:install-step}
.install-step{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border:1px solid var(--line);
  border-radius:12px;background:rgba(0,0,0,.2)}
.install-step::before{counter-increment:install-step;content:counter(install-step);display:grid;place-items:center;
  flex:0 0 28px;width:28px;height:28px;border-radius:50%;font-family:var(--pixel);font-size:9px;
  color:var(--bg);background:var(--a4)}
.install-step b{color:var(--a4)}

/* Future and archived bosses sit below the current quest list as outer folds. */
.quest-section{margin:18px 0 12px;border:2px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 88%,transparent),var(--panel2))}
.quest-section-summary{display:flex;align-items:center;gap:10px;min-height:58px;padding:11px 13px;
  list-style:none;cursor:pointer;user-select:none;transition:background .18s}
.quest-section-summary::-webkit-details-marker{display:none}
.quest-section-summary::before{content:'▶';flex:0 0 15px;width:15px;color:var(--a4);font-family:var(--pixel);
  font-size:8px;text-align:center;transition:transform .2s cubic-bezier(.2,1,.3,1)}
.quest-section[open]>.quest-section-summary::before{transform:rotate(90deg)}
.quest-section-summary:focus-visible{outline:2px solid var(--a4);outline-offset:-4px}
.quest-section-icon{flex:0 0 auto;font-size:23px;line-height:1}
.quest-section-title{flex:1;min-width:0;font-family:var(--pixel);font-size:10px;line-height:1.45;color:var(--ink)}
.quest-section-count{flex:0 0 auto;white-space:nowrap;font-size:12px;padding:3px 8px;border-radius:999px;
  color:var(--ink-dim);background:rgba(0,0,0,.3);border:1px solid var(--line)}
.quest-section-list{padding:12px 10px 0;border-top:1px solid var(--line)}
.quest-section-list>.quest-card:last-child{margin-bottom:10px}
.quest-section-future{border-color:color-mix(in srgb,var(--a4) 48%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--a4) 7%,var(--panel)),var(--panel2))}
.quest-section-future>.quest-section-summary{background:color-mix(in srgb,var(--a4) 5%,transparent)}
.quest-section-future .quest-section-count{color:var(--a4);border-color:color-mix(in srgb,var(--a4) 38%,var(--line))}
.quest-section-archived{opacity:.82}
.quest-section-archived>.quest-section-summary{background:rgba(0,0,0,.12)}
.quest-now-empty{display:flex;align-items:center;justify-content:center;gap:8px;margin:5px 0 14px;padding:12px;
  color:var(--ink-dim);font-size:15px;text-align:center;border:1px dashed var(--line);border-radius:13px;background:rgba(0,0,0,.12)}

/* quest spotlight when arriving from the quest log */
.spotlight{animation:spot 2.4s ease-out}
@keyframes spot{0%{box-shadow:0 0 0 3px var(--a4), var(--glow) var(--a4);transform:scale(1.02)}
  70%{box-shadow:0 0 0 3px var(--a4), var(--glow) var(--a4)}100%{box-shadow:none;transform:none}}

/* links inside bot messages */
.botlink{display:inline-block;padding:1px 9px;margin:1px 2px;border-radius:14px;font-size:16px;
  color:var(--bg);background:var(--a1);text-decoration:none;font-weight:bold;
  box-shadow:0 2px 0 rgba(0,0,0,.4)}
.botlink:active{transform:translateY(1px)}

/* ---------- home: spoken rundown + next actions ---------- */
.rundown-transcript{border-color:color-mix(in srgb,var(--a2) 38%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--a2) 8%,var(--panel)),var(--panel2));
  border-style:solid;border-width:1px;border-radius:12px;padding:12px;
  box-shadow:0 10px 0 -5px rgba(0,0,0,.45),0 18px 38px rgba(0,0,0,.36)}
.rundown-kicker{font-family:var(--pixel);font-size:9px;line-height:1.6;color:var(--a2);margin-bottom:7px}
.rundown-text{font-size:17px;line-height:1.35;color:var(--ink);margin:0}
.rundown-items{display:grid;gap:7px}
.rundown-item{display:flex;align-items:center;gap:9px;margin-top:0;color:var(--ink);text-decoration:none;
  border-style:solid;border-left:4px solid var(--a2);transition:transform .1s,border-color .18s,background .18s}
.rundown-item:hover,.rundown-item:focus-visible{border-color:var(--a4);background:color-mix(in srgb,var(--a4) 9%,rgba(0,0,0,.32));outline:none}
.rundown-item:active{transform:translate(2px,2px)}
.rundown-item-status{flex:0 0 auto}
.rundown-item-copy{flex:1;min-width:0}
.rundown-item-go{flex:0 0 auto;font-family:var(--pixel);font-size:7px;line-height:1.5;color:var(--a2);text-align:right}
.next-task-list{display:grid;gap:9px;margin-bottom:4px}
.next-task{display:flex;align-items:center;gap:11px;min-height:60px;padding:10px 12px;border-radius:13px;
  color:var(--ink);text-decoration:none;background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-left:5px solid var(--cat,var(--a1));box-shadow:0 5px 0 -2px rgba(0,0,0,.42);
  transition:transform .1s,border-color .18s,box-shadow .18s}
.next-task::after{content:'▶';flex:0 0 auto;font-family:var(--pixel);font-size:9px;color:var(--a2)}
.next-task:active{transform:translate(2px,2px);box-shadow:0 2px 0 -1px rgba(0,0,0,.42)}
.next-task:focus-visible{outline:3px solid var(--a4);outline-offset:2px}
.next-task>div,.next-task-body{flex:1;min-width:0}
.next-task-title{font-size:20px;line-height:1.05;word-break:break-word}
.next-task-quest{font-size:14px;line-height:1.2;color:var(--ink-dim);margin-top:4px}

/* ---------- Home arcade cartridges ---------- */
.home-arcade-launches{display:grid;gap:9px;margin-top:10px}
.home-arcade-launches .btn{margin:0;width:100%}
.brainstack-launch{color:#07131a!important;border-color:var(--a1)!important;
  background:linear-gradient(100deg,var(--a1),color-mix(in srgb,var(--a2) 72%,var(--a1)))!important;
  box-shadow:0 5px 0 color-mix(in srgb,var(--a2) 52%,#000),0 0 18px color-mix(in srgb,var(--a1) 38%,transparent)!important}
.brainstack-unlock-note{text-align:center;margin-top:5px}

/* ---------- high-score profile pop-up ---------- */
.score-avatar-btn{width:32px;height:32px;flex:0 0 32px;padding:0;border:0;border-radius:50%;cursor:pointer;
  color:inherit;background:transparent;display:inline-grid;place-items:center;transition:transform .12s,box-shadow .15s}
.score-avatar-btn img{display:block;width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--a1)}
.score-avatar-btn:hover{transform:scale(1.08);box-shadow:0 0 14px color-mix(in srgb,var(--a1) 45%,transparent)}
.score-avatar-btn:focus-visible{outline:3px solid var(--a4);outline-offset:3px}
.score-name-btn{min-width:0;flex:1;padding:3px 0;border:0;cursor:pointer;color:inherit;background:transparent;
  font:inherit;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.score-name-btn:hover{text-decoration:underline;text-underline-offset:3px}
.score-name-btn:focus-visible{outline:3px solid var(--a4);outline-offset:3px;border-radius:4px}
.score-profile{text-align:center;padding:4px 0}
.score-profile-img{display:block;width:auto;height:auto;max-width:100%;max-height:min(68vh,512px);
  margin:10px auto 14px;border-radius:18px;object-fit:contain;border:3px solid var(--a1);
  box-shadow:var(--glow) color-mix(in srgb,var(--a1) 45%,transparent),var(--shadow-hard)}
.score-profile-name{font-size:16px;color:var(--a4);margin:5px 0 12px}
.score-profile-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 auto 14px;max-width:430px}
.score-profile-stat{display:grid;gap:3px;padding:10px 8px;border:1px solid var(--line);border-radius:12px;
  background:color-mix(in srgb,var(--panel2) 86%,transparent)}
.score-profile-stat b{font-family:var(--pixel);font-size:14px;color:var(--a3);line-height:1.2}
.score-profile-stat span{font-size:13px;color:var(--ink-dim);line-height:1.15}
.score-profile-catchphrase-label{font-family:var(--pixel);font-size:9px;color:var(--a2);text-transform:uppercase}
.score-profile-catchphrase{max-width:430px;margin:6px auto 2px;padding:9px 12px;border-left:3px solid var(--a2);
  color:var(--ink);font-style:italic;line-height:1.25;overflow-wrap:anywhere}
.score-profile-overlay{z-index:560;background:rgba(0,0,0,.82)}

/* ---------- Deadline Breaker lives ---------- */
.st-brains{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;font-size:16px;line-height:1}
.st-brains.ten{display:inline-grid;grid-template-columns:repeat(5,auto);gap:1px 3px;white-space:normal}
.st-brains .brain-live,.brain-live{display:inline-block;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--a3) 60%,transparent));
  transform:translateZ(0)}
.st-brains .brain-lost,.brain-lost{display:inline-block;filter:grayscale(1);opacity:.2;transform:scale(.88)}

/* Strong, temporary destination cue for Home/chat/calendar deep links. */
.task-target-glow{position:relative;z-index:1;animation:tasktarget 2.6s ease-out}
@keyframes tasktarget{0%,22%{box-shadow:0 0 0 3px var(--a4),0 0 28px 7px color-mix(in srgb,var(--a4) 65%,transparent);
    transform:scale(1.025)}70%{box-shadow:0 0 0 2px var(--a4),0 0 15px color-mix(in srgb,var(--a4) 42%,transparent)}
  100%{box-shadow:none;transform:none}}

/* ---------- radar v2: due trails + planned diamonds ---------- */
.rday .rlanes{min-height:20px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:1px 0}
.rlane{display:flex;align-items:center;justify-content:center;height:12px;width:100%}
.rtrail{display:block;width:100%;border-radius:2px;opacity:.85}
.rdot{display:block;width:14px;height:14px;border-radius:50%;box-shadow:0 0 8px currentColor}
.rmore{font-size:12px;color:var(--ink-dim)}
.rday .rplans{min-height:12px;display:flex;align-items:center;justify-content:center;gap:4px}
.rplan{display:block;width:9px;height:9px;transform:rotate(45deg);border-radius:2px;opacity:.95}
.rplanlead{display:block;width:12px;height:2px;background:var(--a1);opacity:.45;border-radius:1px}
.rplanspacer{display:block;height:9px}
.rday.rmorebtn{border-style:dashed;cursor:pointer}
.pill.plan{border-color:color-mix(in srgb,var(--a1) 50%,transparent);color:var(--a1)}

/* ---------- month calendar ---------- */
.calhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.calhead .btn{padding:8px 14px;font-size:14px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.caldow{text-align:center;font-family:var(--pixel);font-size:8px;color:var(--ink-dim);padding:2px 0}
.calday{aspect-ratio:1;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.calday.blank{background:transparent;border-color:transparent}
.calday.has{cursor:pointer;border-color:color-mix(in srgb,var(--a1) 35%,transparent)}
.calday.has:hover{background:var(--panel2)}
.calday.today{border-color:var(--a1);box-shadow:0 0 8px color-mix(in srgb,var(--a1) 45%,transparent)}
.calday .cn{font-family:var(--mono);font-size:15px;line-height:1}
.calday .cmarks{display:flex;gap:3px;min-height:8px;flex-wrap:wrap;justify-content:center;padding:0 2px}
.cdot{display:inline-block;width:8px;height:8px;border-radius:50%}
.cplan{display:inline-block;width:7px;height:7px;transform:rotate(45deg);border-radius:1.5px}
.cdone{opacity:.35}
.callegend{margin-top:8px;display:flex;align-items:center;gap:6px}
.calitem{cursor:pointer}
.calitem:hover{border-color:var(--a1)}

/* ---------- Deadline Breaker / skill tester ---------- */
.ocard.gamecard{width:min(96vw,620px);max-height:98dvh;padding:12px;overflow:hidden;border-color:var(--a4);
  box-shadow:0 0 26px color-mix(in srgb,var(--a4) 48%,transparent),0 24px 60px rgba(0,0,0,.7)}
.st-title{font-family:var(--pixel);font-size:12px;color:var(--a4);text-align:center;letter-spacing:.5px}
.st-hud{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:8px 0 7px;
  padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:rgba(0,0,0,.34)}
.st-focus{font-family:var(--pixel);font-size:10px;color:var(--a3);white-space:nowrap}
.st-score{font-family:var(--pixel);font-size:13px;color:var(--a4);text-align:center;text-shadow:0 0 10px color-mix(in srgb,var(--a4) 55%,transparent)}
.st-flow{font-family:var(--pixel);font-size:10px;color:var(--a2);text-align:right;white-space:nowrap}
.st-mission{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:22px;margin-bottom:6px;
  color:var(--ink-dim);font-size:14px}
.st-mission-copy{display:grid;gap:2px;min-width:0}.st-mission b{font-family:var(--pixel);font-size:9px;color:var(--a1)}
.st-mission small{font-family:var(--mono);font-size:8px;line-height:1.1;color:var(--a4);letter-spacing:.06em;white-space:nowrap}
.st-sectors{display:flex;gap:5px}.st-sectors i{width:9px;height:9px;border-radius:2px;border:1px solid var(--line);background:rgba(255,255,255,.08)}
.st-sectors i.on{background:var(--a1);border-color:var(--a1);box-shadow:0 0 7px color-mix(in srgb,var(--a1) 60%,transparent)}
.st-sectors i.boss{transform:rotate(45deg);background:var(--danger);border-color:var(--danger)}
.st-sectors i.final{transform:rotate(45deg);background:var(--a4);border-color:#fff;
  box-shadow:0 0 9px color-mix(in srgb,var(--danger) 80%,transparent)}
.ocard.gamecard.st-final-game{border-color:var(--danger);
  box-shadow:0 0 0 2px var(--a4),0 0 38px color-mix(in srgb,var(--danger) 70%,transparent),0 24px 60px rgba(0,0,0,.8)}
.st-final-game .st-title{color:var(--danger);text-shadow:0 0 12px color-mix(in srgb,var(--danger) 75%,transparent)}
.st-final-mission{padding:5px 7px;border:1px solid var(--danger);border-radius:8px;
  background:color-mix(in srgb,var(--danger) 12%,rgba(0,0,0,.28))}
.st-final-mission b{color:var(--a4)}.st-final-mission small{color:#fff}
.st-boss-announcement{position:absolute;z-index:4;top:42%;left:50%;width:min(88%,390px);
  transform:translate(-50%,-50%) scale(.78);padding:18px 14px;border:3px solid var(--a4);
  border-radius:15px;background:rgba(18,0,13,.94);box-shadow:0 0 0 3px var(--danger),0 0 34px var(--danger);
  text-align:center;opacity:0;visibility:hidden;pointer-events:none}
.st-boss-announcement b,.st-boss-announcement span{display:block;font-family:var(--pixel)}
.st-boss-announcement b{font-size:19px;color:var(--danger);text-shadow:2px 2px 0 #000}
.st-boss-announcement span{margin-top:10px;font-size:14px;color:var(--a4)}
.st-boss-announcement small{display:block;margin-top:12px;color:#fff;font-size:14px}
.st-boss-announcement small strong{font-family:var(--pixel);font-size:16px;color:var(--a3)}
.st-boss-skip{position:absolute;top:7px;right:7px;width:36px;height:36px;padding:0;border:1px solid var(--line);
  border-radius:50%;background:rgba(0,0,0,.48);color:#fff;font:18px/1 sans-serif;cursor:pointer}
.st-boss-skip:hover,.st-boss-skip:focus-visible{border-color:var(--a4);color:var(--a4);outline:none}
.st-boss-announcement.show{visibility:visible;pointer-events:auto;animation:stbossannounce 10s ease both}
.st-boss-announcement.final-chance{border-width:5px;border-color:#fff06a;
  background:radial-gradient(circle at center,#560009 0,#170006 68%);
  box-shadow:0 0 0 4px #ff002f,0 0 60px 18px rgba(255,0,47,.78)}
.st-boss-announcement.final-chance b{font-size:24px;color:#fff06a;
  letter-spacing:.06em;text-shadow:3px 3px 0 #9d0019,0 0 18px #fff}
.st-boss-announcement.final-chance span{font-size:17px;color:#fff}
.st-boss-announcement.final-chance small{font-family:var(--pixel);color:#ffcf3d}
.st-boss-announcement.final-chance.show{animation:stfinalchance 10s ease both}
@keyframes stbossannounce{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  2%,94%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-56%) scale(1.05)}}
@keyframes stfinalchance{0%{opacity:0;transform:translate(-50%,-50%) scale(.58) rotate(-2deg)}
  3%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(1deg)}
  7%,90%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
  94%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
  100%{opacity:0;transform:translate(-50%,-56%) scale(1.12)}}
.st-canvas-wrap{position:relative;display:flex;justify-content:center;border-radius:14px;overflow:hidden;background:#08051a}
#stCanvas{display:block;width:min(100%,360px);height:auto;aspect-ratio:360/520;border:2px solid var(--line);border-radius:12px;
  image-rendering:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:crosshair}
.st-touch-hint{text-align:center;color:var(--ink-dim);font-size:14px;margin-top:6px;line-height:1.2}
.st-touch-hint b{color:var(--a3)}
.st-actions{display:flex;gap:8px;margin-top:7px}.st-actions .btn{padding:9px 11px;font-size:9px}
.stdebt,.stprotected{margin:12px 0;padding:12px;border:2px solid var(--danger);border-radius:12px;background:rgba(0,0,0,.3)}
.stprotected{border-color:var(--a3);background:color-mix(in srgb,var(--a3) 8%,rgba(0,0,0,.3))}
.st-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}
.st-stat{padding:8px 5px;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.3);text-align:center}
.st-stat b{display:block;font-family:var(--pixel);font-size:10px;color:var(--a4);margin-bottom:3px}
.st-egg-unlock{display:grid;gap:7px;margin:12px 0;padding:13px;border:2px solid var(--a4);
  border-radius:13px;background:color-mix(in srgb,var(--a4) 8%,rgba(0,0,0,.34));
  box-shadow:0 0 18px color-mix(in srgb,var(--a4) 35%,transparent);text-align:center}
.st-egg-unlock .pixel{font-size:9px;color:var(--a4)}
.st-egg-unlock strong{font-size:18px;color:var(--ink)}
.st-egg-unlock span{font-size:14px;line-height:1.35;color:var(--ink-dim)}
.st-egg-unlock small{color:var(--a3)}
.st-warp-tip{margin:10px auto 2px;padding:7px 9px;max-width:430px;line-height:1.35;
  border:1px dashed color-mix(in srgb,var(--a3) 42%,transparent);border-radius:9px;
  background:color-mix(in srgb,var(--a3) 6%,transparent)}
.st-warp-tip b{color:var(--a3)}
@media(max-width:430px){.overlay{padding:5px}.ocard.gamecard{width:100%;padding:8px;border-radius:13px}.st-hud{padding:6px 7px;margin:5px 0}.st-score{font-size:11px}.st-focus,.st-flow{font-size:8px}.st-mission{margin-bottom:4px}.st-touch-hint{font-size:13px;margin-top:4px}.st-actions{margin-top:4px}}
@media(prefers-reduced-motion:reduce){.ocard.gamecard{box-shadow:0 12px 32px rgba(0,0,0,.65)}.st-score,.st-final-game .st-title{text-shadow:none}
  .st-boss-announcement.show,.st-boss-announcement.final-chance.show{animation:stbossfade 10s ease both}}
@keyframes stbossfade{0%,100%{opacity:0}2%,96%{opacity:1}}

/* ---------- BRAINSTACK falling-block cartridge ---------- */
.ocard.gamecard.bs-gamecard{width:min(96vw,590px);border-color:var(--a1);
  box-shadow:0 0 28px color-mix(in srgb,var(--a1) 48%,transparent),0 24px 60px rgba(0,0,0,.76)}
.bs-title{font-family:var(--pixel);font-size:13px;color:var(--a1);text-align:center;letter-spacing:.08em;
  text-shadow:0 0 11px color-mix(in srgb,var(--a1) 65%,transparent)}
.bs-hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:7px;margin:7px 0;
  padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.35)}
.bs-brains{font-size:15px;white-space:nowrap}.bs-score{font-family:var(--pixel);font-size:12px;color:var(--a4);text-align:center}
.bs-level{font-family:var(--pixel);font-size:8px;line-height:1.55;color:var(--a2);text-align:right;white-space:nowrap}
.bs-stage{font-family:var(--pixel);font-size:8px;color:var(--a3);text-align:center;min-height:14px;margin-bottom:5px}
.bs-layout{display:flex;align-items:flex-start;justify-content:center;gap:8px;min-height:0}
.bs-board-wrap{position:relative;display:flex;justify-content:center;min-width:0;border-radius:10px;overflow:hidden;background:#05030e}
#bsCanvas{display:block;width:auto;height:min(61dvh,600px);max-width:calc(100vw - 132px);aspect-ratio:1/2;
  border:2px solid var(--line);border-radius:10px;image-rendering:auto;touch-action:none;user-select:none;cursor:pointer}
.bs-side{width:94px;display:grid;gap:7px;flex:0 0 94px}
.bs-side-card{padding:6px;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.31);text-align:center}
.bs-side-card b{display:block;font-family:var(--pixel);font-size:7px;color:var(--ink-dim);margin-bottom:4px}
.bs-preview{display:block;width:80px;height:52px;max-width:100%;margin:auto;border-radius:6px}
.bs-stat{font-family:var(--pixel);font-size:11px;color:var(--a4);line-height:1.5}.bs-stat small{display:block;font:11px var(--mono);color:var(--ink-dim)}
.bs-controls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:7px}
.bs-control{min-height:42px;padding:5px 2px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);color:var(--ink);
  font:16px var(--mono);cursor:pointer;touch-action:manipulation;box-shadow:0 3px 0 rgba(0,0,0,.45)}
.bs-control small{display:block;font-size:8px;color:var(--ink-dim);line-height:1.05}.bs-control:active{transform:translateY(2px);box-shadow:none;border-color:var(--a1)}
.bs-actions{display:flex;gap:7px;margin-top:7px}.bs-actions .btn{padding:8px 10px;font-size:8px}
.bs-lobby-mark{font-size:58px;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--a1) 55%,transparent));margin:8px 0}
.bs-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}.bs-rules span{padding:8px 5px;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.28);font-size:12px}
.bs-lb{margin-top:12px;padding:9px;border:1px solid var(--line);border-radius:11px;background:rgba(0,0,0,.22)}
.bs-lb-row{display:grid;grid-template-columns:26px 1fr auto;gap:7px;align-items:center;padding:4px 1px;font-size:13px}.bs-lb-row b{color:var(--a4)}
@media(max-width:430px){
  .ocard.gamecard.bs-gamecard{padding:7px}.bs-hud{margin:4px 0;padding:5px 6px}.bs-score{font-size:10px}.bs-brains{font-size:13px}.bs-layout{gap:5px}
  #bsCanvas{height:min(56dvh,560px);max-width:calc(100vw - 113px)}.bs-side{width:84px;flex-basis:84px;gap:5px}.bs-preview{width:70px;height:44px}
  .bs-controls{grid-template-columns:repeat(3,1fr);gap:4px}.bs-control{min-height:38px}.bs-actions{margin-top:5px}.bs-rules{gap:5px}.bs-rules span{font-size:11px;padding:7px 3px}
}
@media(max-height:720px){#bsCanvas{height:min(49dvh,480px)}.bs-control{min-height:34px}.bs-controls{margin-top:4px}.bs-actions{margin-top:4px}}
.task.sub .subedit{flex:0 0 auto;padding:0 4px;opacity:.7}

/* ---------- sticky banner close ---------- */
.oclose{position:absolute;top:8px;right:10px;background:rgba(0,0,0,.35);border:1px solid var(--line);
  color:var(--ink);border-radius:50%;width:34px;height:34px;font-size:16px;cursor:pointer;line-height:1;z-index:2}
.oclose:hover{border-color:var(--a4);color:var(--a4)}
.ocard{position:relative}

/* ---------- skill tester v2 hud ---------- */
.strow{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0}
.stlab{font-size:13px;color:var(--a3)}
.stcombo{display:inline-block;width:44px;height:6px;background:rgba(0,0,0,.4);border-radius:3px;overflow:hidden}
.stcombo i{display:block;height:100%;background:var(--a2);width:0;border-radius:3px;transition:width .15s linear}

/* ---------- on-screen d-pad (UNSNAKE) ---------- */
.dpad{margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:6px;user-select:none}
.dmid{display:flex;gap:6px}
.dbtn{width:56px;height:44px;font-size:18px;background:var(--panel2);color:var(--ink);
  border:2px solid var(--line);border-radius:10px;box-shadow:0 3px 0 rgba(0,0,0,.5);cursor:pointer;touch-action:manipulation}
.dbtn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.5);border-color:var(--a1)}
@media(pointer:fine) and (min-width:700px){ .dpad{opacity:.55} }

/* ---------- compact-phone polish ---------- */
@media(max-width:430px){
  .wrap{padding-left:10px;padding-right:10px}
  .musicfab{top:calc(10px + env(safe-area-inset-top));right:10px;width:48px;height:48px;font-size:19px}
  body.has-musicfab .wrap>.topbar:first-child{min-height:50px;padding-right:56px;gap:7px}
  #chatpage>.topbar>.small{max-width:118px;font-size:13px;line-height:1.12;text-align:right}

  .quest-actions{gap:7px;margin-bottom:11px}
  .quest-actions .btn{min-height:48px;padding:11px 8px;font-size:9px}
  .agfilters{gap:5px}
  .fchip{font-size:13px;padding:6px 9px}
  .quest-summary{gap:7px;min-height:58px;padding:9px 8px}
  .quest-summary::before{flex-basis:12px;width:12px;font-size:7px}
  .quest-summary .boss-emoji{font-size:25px}
  .quest-summary .boss-title{font-size:18px;line-height:1.12}
  .quest-summary .boss-meta{gap:4px;margin-top:3px}
  .quest-summary .check{width:30px;height:30px;flex-basis:30px}
  .quest-count{font-size:11px;padding:3px 7px}
  .quest-detail{padding-top:6px}
  .quest-detail .task{padding:10px 9px;gap:8px}
  .quest-section{margin-top:15px;border-radius:14px}
  .quest-section-summary{gap:7px;min-height:54px;padding:9px 9px}
  .quest-section-summary::before{flex-basis:12px;width:12px;font-size:7px}
  .quest-section-icon{font-size:21px}
  .quest-section-title{font-size:9px}
  .quest-section-count{font-size:11px;padding:3px 7px}
  .quest-section-list{padding:9px 7px 0}

  .rundown-transcript{padding:12px;margin-bottom:12px}
  .rundown-kicker{font-size:8px;margin-bottom:5px}
  .rundown-text{font-size:16px;line-height:1.28}
  .next-task-list{gap:7px}
  .next-task{min-height:56px;padding:9px 10px;gap:8px}
  .next-task-title{font-size:18px;line-height:1.08}
  .next-task-quest{font-size:13px}

  .score-profile-img{border-radius:15px;margin-top:8px}
  .st-brains{gap:2px;font-size:14px}

  .nav{gap:5px;padding-left:5px;padding-right:5px}
  .navbtn{flex:1;max-width:82px;padding:8px 5px}
  .navbtn .ic{font-size:20px}
}

@media(max-width:350px){
  .quest-actions .btn{font-size:8px;padding-left:5px;padding-right:5px}
  .quest-summary{gap:5px;padding-left:6px;padding-right:6px}
  .quest-summary .boss-emoji{font-size:23px}
  .quest-count{font-size:10px;padding-left:5px;padding-right:5px}
  .quest-section-summary{gap:5px;padding-left:7px;padding-right:7px}
  .quest-section-icon{font-size:19px}
  .quest-section-count{font-size:10px;padding-left:5px;padding-right:5px}
  .next-task::after{font-size:8px}
}

@media(min-width:640px){
  .quest-card:hover{box-shadow:0 0 18px color-mix(in srgb,var(--cat,var(--a1)) 24%,transparent)}
  .quest-summary:hover{background:color-mix(in srgb,var(--cat,var(--a1)) 7%,rgba(0,0,0,.14))}
  .quest-section-summary:hover{background:color-mix(in srgb,var(--a4) 8%,rgba(0,0,0,.12))}
  .next-task:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--cat,var(--a1)) 55%,var(--line));
    box-shadow:0 8px 0 -3px rgba(0,0,0,.42),0 0 16px color-mix(in srgb,var(--cat,var(--a1)) 22%,transparent)}
}

@media(prefers-reduced-motion:reduce){
  .task-target-glow{animation:none;outline:3px solid var(--a4);outline-offset:2px}
}

/* ---------------- xp/diamond/lock pills + diamond cash-in + game leaderboard ---------------- */
.pill.xppill{color:var(--a3);border-color:color-mix(in srgb,var(--a3) 45%,transparent);font-weight:bold}
.pill.xppill.earned{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.pill.gempill{color:#7df9ff;border-color:color-mix(in srgb,#7df9ff 45%,transparent);background:rgba(125,249,255,.08)}
.pill.lockpill{opacity:.85}
.refcode{letter-spacing:2px;color:var(--a4)}
.refcode-big{font-size:22px;color:var(--a4);letter-spacing:6px;margin:14px 0;
  border:2px dashed color-mix(in srgb,var(--a4) 50%,transparent);border-radius:10px;padding:12px 6px;
  text-shadow:2px 2px 0 rgba(0,0,0,.5)}
.st-lb{margin-top:12px;background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:12px;padding:10px}
.st-lb-row{display:flex;align-items:center;gap:9px;padding:4px 2px}
.st-lb-medal{font-size:11px;width:28px;text-align:left}
.st-lb-profile{display:flex;align-items:center;gap:9px;flex:1;min-width:0;min-height:34px;padding:2px 5px;
  border:1px solid transparent;border-radius:9px;color:var(--ink);background:transparent;cursor:pointer;text-align:left}
.st-lb-profile:hover,.st-lb-profile:focus-visible{border-color:var(--a1);background:color-mix(in srgb,var(--a1) 9%,transparent);outline:none}
.st-lb-profile:active{transform:translateY(1px)}
.st-lb-face{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;font-size:18px}
.st-lb-face img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--a1)}
.st-lb-name{font-size:11px;flex:1;text-align:left}
.diamond-balance{font-family:var(--pixel);font-size:16px;color:#7df9ff;text-shadow:2px 2px 0 rgba(0,0,0,.5)}