/* ============================================================
   PIVOT! — Sachi's Superhero HQ
   Cute, chunky, pastel. Light + dark. No external assets.
   ============================================================ */

:root{
  --grape:#7c5cff;
  --grape-deep:#5b3fd6;
  --blush:#ffd6e7;
  --peach:#ffb37b;
  --mint:#6fe3c4;
  --lemon:#ffd86b;
  --sky:#7ec8ff;
  --rose:#ff7a9c;

  --bg:#fbf7ff;
  --bg-2:#f2ecff;
  --surface:#ffffff;
  --surface-2:#f7f3ff;
  --ink:#2b2340;
  --ink-soft:#6c6288;
  --line:#e8e0f7;
  --shadow:0 10px 30px rgba(96,72,170,.10), 0 2px 6px rgba(96,72,170,.06);
  --shadow-lift:0 18px 40px rgba(96,72,170,.18);
  --radius:22px;
  --radius-sm:14px;
  --font:"Baloo 2","Quicksand","Nunito","Trebuchet MS",system-ui,-apple-system,"Segoe UI",sans-serif;
  --speed:.28s;
}

/* Dark palette: applied by explicit choice, and by system preference unless
   the user has explicitly asked for light. */
html[data-theme="dark"]{
  --bg:#16122a;
  --bg-2:#1e1838;
  --surface:#221b3d;
  --surface-2:#2b2350;
  --ink:#f2edff;
  --ink-soft:#a99fcd;
  --line:#352c5c;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-lift:0 18px 40px rgba(0,0,0,.45);
  --blush:#3a2a48;
}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
  --bg:#16122a;
  --bg-2:#1e1838;
  --surface:#221b3d;
  --surface-2:#2b2350;
  --ink:#f2edff;
  --ink-soft:#a99fcd;
  --line:#352c5c;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-lift:0 18px 40px rgba(0,0,0,.45);
  --blush:#3a2a48;
  }
}

*{box-sizing:border-box}

html{color-scheme:light dark}

body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1100px 520px at 12% -8%, var(--blush) 0%, transparent 55%),
    radial-gradient(900px 480px at 92% 4%, rgba(126,200,255,.35) 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  padding-bottom:104px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.01em}
h2{font-size:1.06rem}
p{margin:0}
button{font-family:inherit}
.muted{color:var(--ink-soft)}
.muted-inline{color:var(--ink-soft);font-weight:600;font-size:.82rem}
.small{font-size:.85rem}

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:calc(env(safe-area-inset-top,0px) + 12px) 18px 12px;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{display:grid;place-items:center;filter:drop-shadow(0 4px 10px rgba(124,92,255,.4))}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font-size:1.32rem;letter-spacing:.06em;color:var(--grape)}
.brand-text small{font-size:.72rem;color:var(--ink-soft);font-weight:600}
.icon-btn{
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  width:42px;height:42px;border-radius:50%;font-size:1.1rem;cursor:pointer;
  box-shadow:var(--shadow);transition:transform var(--speed);
}
.icon-btn:hover{transform:rotate(-14deg) scale(1.06)}

/* ---------------- tabs ---------------- */
.tabs{
  position:sticky;top:calc(env(safe-area-inset-top,0px) + 66px);z-index:35;
  display:flex;gap:6px;padding:10px 12px;overflow-x:auto;scrollbar-width:none;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  padding:9px 15px;border-radius:999px;font-size:.88rem;font-weight:700;cursor:pointer;
  transition:all var(--speed);
}
.tab:hover{transform:translateY(-2px)}
.tab.is-active{
  background:linear-gradient(135deg,var(--grape),var(--rose));
  color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(124,92,255,.38);
}

/* ---------------- layout ---------------- */
main{max-width:860px;margin:0 auto;padding:8px 16px 40px}
.view{display:none;animation:rise .38s ease both}
.view.is-active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin:14px 0;box-shadow:var(--shadow);
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.intro-card h2{font-size:1.3rem;margin-bottom:6px}
.link-btn{background:none;border:none;color:var(--grape);font-weight:800;font-size:.85rem;cursor:pointer;padding:0}
.link-btn:hover{text-decoration:underline}

/* ---------------- buttons ---------------- */
.btn{
  border:none;border-radius:999px;padding:11px 20px;font-weight:800;font-size:.92rem;cursor:pointer;
  background:linear-gradient(135deg,var(--grape),var(--rose));color:#fff;
  box-shadow:0 8px 20px rgba(124,92,255,.34);
  transition:transform var(--speed),box-shadow var(--speed);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-big{padding:14px 30px;font-size:1.02rem}
.btn-sm{padding:7px 14px;font-size:.82rem}
.btn-ghost{background:var(--surface-2);color:var(--ink);box-shadow:none;border:1px solid var(--line)}
.btn-danger{background:linear-gradient(135deg,#ff7a7a,#d83b5c);box-shadow:0 8px 20px rgba(216,59,92,.3)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* ---------------- hero card ---------------- */
.hero-card{
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  background:linear-gradient(140deg,var(--surface) 0%,var(--surface-2) 100%);
  position:relative;overflow:hidden;
}
.hero-card::after{
  content:"";position:absolute;inset:auto -60px -90px auto;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,.22),transparent 70%);pointer-events:none;
}
.hero-avatar{flex:0 0 118px;width:118px;height:118px;position:relative;z-index:1}
.hero-avatar svg{width:100%;height:100%;overflow:visible}
.hero-meta{flex:1 1 240px;min-width:0;z-index:1}
.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.hero-name{font-size:1.72rem;background:linear-gradient(120deg,var(--grape),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-rank{font-size:.9rem;font-weight:700;color:var(--ink-soft);margin-bottom:10px}

.xpbar{position:relative;height:26px;border-radius:999px;background:var(--bg-2);overflow:hidden;border:1px solid var(--line)}
.xpbar-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--mint),var(--sky),var(--grape));transition:width .6s cubic-bezier(.3,1.4,.5,1)}
.xpbar-text{position:absolute;inset:0;display:grid;place-items:center;font-size:.76rem;font-weight:800;color:var(--ink);text-shadow:0 1px 3px rgba(255,255,255,.7)}
html[data-theme="dark"] .xpbar-text{text-shadow:0 1px 3px rgba(0,0,0,.8)}

.hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:.8rem;font-weight:700}
.chip b{color:var(--grape)}
.chip-flame b{color:var(--peach)}

/* ---------------- threat meter ---------------- */
.threat-badge{font-weight:800;font-size:.86rem;padding:5px 13px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line)}
.threat-track{
  position:relative;height:18px;border-radius:999px;
  background:linear-gradient(90deg,#6fe3c4 0%,#ffd86b 38%,#ffb37b 65%,#ff7a9c 84%,#6b4bd6 100%);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.14);
}
.threat-knob{
  position:absolute;top:50%;left:50%;width:28px;height:28px;border-radius:50%;
  background:var(--surface);border:3px solid var(--ink);transform:translate(-50%,-50%);
  transition:left .7s cubic-bezier(.3,1.3,.5,1);box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.threat-scale{display:flex;justify-content:space-between;margin-top:8px;font-size:.66rem;color:var(--ink-soft);font-weight:700;text-align:center}
.threat-scale i{font-style:normal;opacity:.7;font-weight:600}
.threat-tip{margin-top:12px;font-size:.88rem;color:var(--ink-soft);background:var(--surface-2);border-radius:var(--radius-sm);padding:11px 14px;border:1px dashed var(--line)}

/* ---------------- mood ---------------- */
.mood-row{display:flex;gap:8px;flex-wrap:wrap}
.mood-btn{
  flex:1 1 90px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius-sm);
  padding:12px 6px;cursor:pointer;text-align:center;transition:all var(--speed);color:var(--ink);
}
.mood-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mood-btn.is-on{background:linear-gradient(135deg,var(--grape),var(--rose));color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(124,92,255,.35)}
.mood-emoji{display:block;font-size:1.6rem;line-height:1.2}
.mood-label{font-size:.7rem;font-weight:800}
.mood-echo{margin-top:12px;font-size:.92rem;font-weight:600;min-height:1.4em}

/* ---------------- quests ---------------- */
.track-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.track-pill{flex:1 1 120px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px}
.track-pill .tp-top{display:flex;align-items:center;gap:7px;font-weight:800;font-size:.85rem}
.track-pill .tp-bar{height:7px;border-radius:999px;background:var(--bg-2);margin-top:8px;overflow:hidden}
.track-pill .tp-fill{height:100%;border-radius:999px;transition:width .5s ease}

.track-block{margin:14px 0}
.track-head{display:flex;align-items:center;gap:10px;margin:0 4px 10px}
.track-emoji{font-size:1.5rem}
.track-title{font-size:1.1rem;font-weight:800}
.track-sub{font-size:.78rem;color:var(--ink-soft);font-weight:600}

.quest{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:8px;cursor:pointer;color:var(--ink);
  transition:transform var(--speed),box-shadow var(--speed),opacity var(--speed);
}
.quest:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.quest-box{
  flex:0 0 26px;width:26px;height:26px;border-radius:9px;border:2.5px solid var(--line);
  display:grid;place-items:center;font-size:.9rem;color:#fff;transition:all var(--speed);
}
.quest.is-done{opacity:.62}
.quest.is-done .quest-text{text-decoration:line-through;text-decoration-thickness:2px}
.quest.is-done .quest-box{background:linear-gradient(135deg,var(--mint),var(--sky));border-color:transparent}
.quest-text{flex:1;font-weight:700;font-size:.93rem;min-width:0}
.quest-note{display:block;font-size:.74rem;color:var(--ink-soft);font-weight:600}
.quest-xp{flex:0 0 auto;font-size:.74rem;font-weight:800;color:var(--grape);background:var(--bg-2);border-radius:999px;padding:3px 10px}
.quest-del{flex:0 0 auto;background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:1rem;padding:2px 4px;border-radius:8px}
.quest-del:hover{color:var(--rose);background:var(--bg-2)}

.quick-list .quest{margin-bottom:7px}
.all-done{text-align:center;padding:16px;font-weight:800;color:var(--mint)}

.add-form{display:flex;gap:8px;flex-wrap:wrap}
.add-form input[type=text]{flex:2 1 220px}
.add-form select{flex:1 1 130px}
.add-form input,.add-form select{
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  border-radius:999px;padding:11px 16px;font-family:inherit;font-size:.9rem;font-weight:600;
}
.add-form input:focus,.add-form select:focus{outline:2px solid var(--grape);outline-offset:1px}
.custom-list{margin-top:12px}
.custom-list:empty{display:none}

/* ---------------- focus ---------------- */
.focus-card{text-align:center}
.aperture{position:relative;width:min(280px,76vw);aspect-ratio:1;margin:6px auto 18px}
.aperture-svg{width:100%;height:100%;transform:rotate(-90deg)}
.ap-ring{fill:none;stroke:var(--bg-2);stroke-width:12}
.ap-progress{
  fill:none;stroke:url(#x);stroke:var(--grape);stroke-width:12;stroke-linecap:round;
  stroke-dasharray:628;stroke-dashoffset:628;transition:stroke-dashoffset 1s linear;
}
.focus-readout{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px}
.focus-time{font-size:2.9rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* The readout is centred, so the bottom margin both lifts the stack and opens
   up clearance under the phase line — which is what it needed. */
.focus-phase{font-size:.84rem;font-weight:700;color:var(--ink-soft);max-width:150px;margin:0 auto 14px}
.focus-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}

.seg{display:inline-flex;gap:4px;background:var(--bg-2);border-radius:999px;padding:4px;border:1px solid var(--line);flex-wrap:wrap;justify-content:center}
.seg-btn{border:none;background:none;color:var(--ink-soft);font-weight:800;font-size:.82rem;padding:8px 15px;border-radius:999px;cursor:pointer;transition:all var(--speed)}
.seg-btn.is-on{background:var(--surface);color:var(--grape);box-shadow:var(--shadow)}

.focus-task{display:block;margin:16px auto 0;max-width:420px;text-align:left}
.focus-task span{font-size:.78rem;font-weight:800;color:var(--ink-soft);display:block;margin-bottom:5px;padding-left:14px}
.focus-task input{width:100%;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:999px;padding:11px 16px;font-family:inherit;font-weight:600}
.focus-task input:focus{outline:2px solid var(--grape);outline-offset:1px}
.sprint-count{margin-top:14px;font-size:.84rem;font-weight:700;color:var(--ink-soft)}

.tip-card h3{font-size:1rem;margin-bottom:10px}
.rule-list{margin:0;padding-left:20px;color:var(--ink-soft);font-size:.9rem}
.rule-list li{margin-bottom:7px}
.rule-list b{color:var(--ink)}

/* ---------------- breathe ---------------- */
.breathe-card{text-align:center}
.orb-wrap{position:relative;height:290px;display:grid;place-items:center;margin-bottom:6px}
.orb{
  width:130px;height:130px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 30%,#fff9,transparent 60%),linear-gradient(140deg,var(--mint),var(--sky),var(--grape));
  color:#fff;font-weight:800;font-size:1.12rem;letter-spacing:.04em;
  box-shadow:0 0 50px rgba(124,92,255,.45);
  transition:transform 4s cubic-bezier(.4,0,.5,1);z-index:2;
}
.orb-glow{
  position:absolute;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,.28),transparent 70%);
  transition:transform 4s cubic-bezier(.4,0,.5,1);z-index:1;
}
.breathe-count{font-size:.86rem;font-weight:800;color:var(--ink-soft);margin-bottom:14px}
.pattern-note{margin-top:12px;font-size:.85rem;color:var(--ink-soft);min-height:2.4em}

.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px}
.mini-btn{
  border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius-sm);
  padding:12px;text-align:left;cursor:pointer;color:var(--ink);transition:all var(--speed);
}
.mini-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--grape)}
.mini-btn b{display:block;font-size:.88rem}
.mini-btn span{font-size:.74rem;color:var(--ink-soft);font-weight:600}
.mini-out{margin-top:14px;font-size:.95rem;font-weight:600;background:var(--surface-2);border-radius:var(--radius-sm);padding:14px;border:1px dashed var(--line);min-height:1.4em}
.mini-out:empty{display:none}

/* ---------------- trophies ---------------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
.stat{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px;text-align:center}
.stat-num{font-size:1.5rem;font-weight:800;color:var(--grape);line-height:1.1}
.stat-lab{font-size:.71rem;font-weight:700;color:var(--ink-soft)}

.badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px}
.badge{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px;text-align:center;transition:transform var(--speed);
}
.badge.is-locked{opacity:.44;filter:grayscale(1)}
.badge.is-won{border-color:var(--lemon);box-shadow:0 6px 18px rgba(255,216,107,.3);background:linear-gradient(160deg,var(--surface-2),color-mix(in srgb,var(--lemon) 16%,var(--surface-2)))}
.badge.is-won:hover{transform:translateY(-4px) rotate(-2deg)}
.badge-ico{font-size:1.9rem;display:block;line-height:1.3}
.badge-name{font-size:.84rem;font-weight:800;margin-top:2px}
.badge-desc{font-size:.72rem;color:var(--ink-soft);font-weight:600}

.ladder{margin:0;padding-left:0;list-style:none;counter-reset:lv}
.ladder li{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius-sm);
  font-size:.9rem;font-weight:700;border:1px solid transparent;
}
.ladder li::before{
  counter-increment:lv;content:counter(lv);
  flex:0 0 28px;height:28px;border-radius:50%;background:var(--bg-2);color:var(--ink-soft);
  display:grid;place-items:center;font-size:.8rem;font-weight:800;
}
.ladder li.is-now{background:var(--surface-2);border-color:var(--grape)}
.ladder li.is-now::before{background:linear-gradient(135deg,var(--grape),var(--rose));color:#fff}
.ladder li.is-past{color:var(--ink-soft)}
.ladder li.is-past::before{background:var(--mint);color:#134}
.ladder li.is-future{opacity:.6}

/* ---------------- heatmap ---------------- */
.heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.heat{aspect-ratio:1;border-radius:7px;background:var(--bg-2);border:1px solid var(--line)}
.heat.h1{background:color-mix(in srgb,var(--mint) 35%,var(--bg-2))}
.heat.h2{background:color-mix(in srgb,var(--mint) 62%,var(--bg-2))}
.heat.h3{background:color-mix(in srgb,var(--sky) 72%,var(--grape))}
.heat.h4{background:linear-gradient(135deg,var(--grape),var(--rose))}
.heat.is-today{outline:2.5px solid var(--peach);outline-offset:1px}
.heat-legend{display:flex;align-items:center;gap:5px;justify-content:flex-end;margin-top:10px;font-size:.7rem;color:var(--ink-soft);font-weight:700}
.heat-legend i{width:13px;height:13px;border-radius:4px;background:var(--bg-2);border:1px solid var(--line);display:inline-block}
.heat-legend i.h1{background:color-mix(in srgb,var(--mint) 35%,var(--bg-2))}
.heat-legend i.h2{background:color-mix(in srgb,var(--mint) 62%,var(--bg-2))}
.heat-legend i.h3{background:color-mix(in srgb,var(--sky) 72%,var(--grape))}
.heat-legend i.h4{background:linear-gradient(135deg,var(--grape),var(--rose))}

/* ---------------- royal titles ---------------- */
.hero-titles{
  font-size:.79rem;font-weight:800;letter-spacing:.07em;margin-bottom:5px;text-wrap:balance;
  background:linear-gradient(100deg,#c9962b,#f0cf72,#c9962b);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-theme="dark"] .hero-titles,
:root:not([data-theme="light"]) .hero-titles{background:linear-gradient(100deg,#e0b449,#ffe9a8,#e0b449);-webkit-background-clip:text;background-clip:text}

/* ---------------- quote card ---------------- */
.quote-card{background:linear-gradient(130deg,var(--surface),color-mix(in srgb,var(--lemon) 11%,var(--surface)))}
.quote-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pep-mascot{flex:0 0 62px;width:62px;height:62px}
.pep-mascot svg{width:100%;height:100%;overflow:visible}
.quote-badge{font-size:.74rem;font-weight:800;letter-spacing:.05em;padding:5px 12px;border-radius:999px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-soft);white-space:nowrap}
.quote-text{
  margin:0;font-size:1.06rem;font-weight:700;line-height:1.5;white-space:pre-line;text-wrap:pretty;
  border-left:3px solid var(--grape);padding-left:14px;
}
.quote-by{margin-top:8px;padding-left:17px;font-size:.8rem;font-weight:700;color:var(--ink-soft)}
.quote-by:empty{display:none}
.quote-spin{margin-top:12px;font-size:.92rem;font-weight:600;color:var(--ink-soft);text-wrap:pretty}
.quote-spin:empty{display:none}
.quote-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px}
.quote-filters{display:flex;gap:5px;flex-wrap:wrap}
.qf{border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);
  border-radius:999px;padding:6px 11px;font-size:.76rem;font-weight:800;cursor:pointer;transition:all var(--speed)}
.qf:hover{transform:translateY(-2px)}
.qf.is-on{background:var(--grape);color:#fff;border-color:transparent}

/* ---------------- the verse ----------------
   A deliberate dark island in both themes, so every colour here is literal. */
.verse-card{
  background:linear-gradient(150deg,#2a1f4d 0%,#1b1436 60%,#241a42 100%);
  border:1px solid #4a3a7a;position:relative;overflow:hidden;
  padding:26px 24px;
}
.verse-card::after{
  content:"";position:absolute;inset:auto -70px -80px auto;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,207,114,.16),transparent 70%);pointer-events:none;
}
.verse-kicker{
  font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#f0cf72;margin-bottom:14px;
}
.verse-body{
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  font-size:1.12rem;line-height:1.72;color:#f4efff;position:relative;z-index:1;text-wrap:pretty;
}
.verse-q{margin-bottom:2px}
.verse-answer{text-align:right;font-style:italic;color:#f0cf72;margin:2px 0 6px}
.verse-line{display:block}
.verse-by{
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(240,207,114,.3);
  font-size:.82rem;font-weight:700;color:#c3b4e8;position:relative;z-index:1;
}
.verse-note{margin-top:12px;font-size:.92rem;line-height:1.6;color:#b4a6d8;position:relative;z-index:1;text-wrap:pretty}

@media (max-width:520px){
  .verse-body{font-size:1.02rem}
  .verse-card{padding:22px 18px}
}

/* ---------------- settings ---------------- */
.field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.field:last-of-type{border-bottom:none}
.field > span{font-weight:700;font-size:.92rem}
.field input[type=text],.field input[type=number]{
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  border-radius:999px;padding:9px 16px;font-family:inherit;font-weight:600;max-width:220px;flex:1 1 150px;
}
.field input[type=color]{width:56px;height:38px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);cursor:pointer;padding:3px}
.field-check{justify-content:flex-start}
.field input[type=checkbox]{width:22px;height:22px;accent-color:var(--grape);cursor:pointer}
.about-card p{margin-bottom:8px}

/* ---------------- panic button ---------------- */
.panic-fab{
  position:fixed;right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:50;
  width:88px;height:88px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(140deg,#ff7a9c,#e03050);color:#fff;
  font-weight:900;font-size:.9rem;letter-spacing:.05em;
  box-shadow:0 12px 30px rgba(224,48,80,.5);
  display:grid;place-items:center;transition:transform var(--speed);
}
.panic-fab:hover{transform:scale(1.08)}
.panic-fab:active{transform:scale(.95)}
.panic-label{position:relative;z-index:2;text-shadow:0 2px 6px rgba(0,0,0,.25)}
.panic-ring{position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(255,122,156,.6);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.85}70%{transform:scale(1.3);opacity:0}100%{opacity:0}}

/* ---------------- panic overlay ---------------- */
/* NOTE: a class selector beats the UA's [hidden] rule, so it needs saying twice.
   Without this the invisible overlay eats every click on the page. */
.panic-overlay[hidden]{display:none !important}
.panic-overlay{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:radial-gradient(circle at 50% 40%,#2a2150,#140f28 75%);
  animation:fade .4s ease both;overflow-y:auto;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panic-inner{max-width:480px;width:100%;text-align:center;color:#fff;position:relative;padding:20px 0}
.panic-close{position:absolute;top:-4px;right:0;background:rgba(255,255,255,.12);border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:1.05rem;cursor:pointer}
.panic-close:hover{background:rgba(255,255,255,.24)}
.panic-mascot{width:110px;height:110px;margin:8px auto 14px}
.panic-mascot svg{width:100%;height:100%;overflow:visible}
.panic-step-count{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#b9a9ff;margin-bottom:8px}
.panic-title{font-size:1.8rem;margin-bottom:12px}
.panic-body{font-size:1.05rem;line-height:1.65;color:#e6dfff;margin-bottom:22px;white-space:pre-line}
.panic-orb[hidden]{display:none !important}
.panic-orb{
  /* it scales to 1.35, so the margins have to clear ~26px on each side */
  width:150px;height:150px;border-radius:50%;margin:26px auto 56px;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 30%,#fff8,transparent 60%),linear-gradient(140deg,var(--mint),var(--sky));
  color:#12213a;font-weight:800;font-size:1.15rem;box-shadow:0 0 70px rgba(111,227,196,.5);
  transition:transform 4s cubic-bezier(.4,0,.5,1);
}
.panic-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------------- toast + confetti ---------------- */
.toast-wrap{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:calc(100% - 140px);max-width:380px}
.toast{
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:11px 20px;font-weight:800;font-size:.9rem;box-shadow:var(--shadow-lift);
  animation:pop .35s cubic-bezier(.3,1.5,.5,1) both;text-align:center;
}
.toast.gold{background:linear-gradient(135deg,var(--lemon),var(--peach));color:#4a2c00;border-color:transparent}
.toast.level{background:linear-gradient(135deg,var(--grape),var(--rose));color:#fff;border-color:transparent}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
.toast.out{animation:popOut .3s ease forwards}
@keyframes popOut{to{opacity:0;transform:translateY(-10px) scale(.95)}}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:65}

/* ---------------- reduced motion ---------------- */
html[data-motion="calm"] *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
html[data-motion="calm"] .orb,html[data-motion="calm"] .panic-orb,html[data-motion="calm"] .orb-glow{transition-duration:1.2s}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ---------------- small screens ---------------- */
@media (max-width:520px){
  .hero-card{gap:12px}
  .hero-avatar{flex:0 0 88px;width:88px;height:88px}
  .hero-name{font-size:1.45rem}
  .panic-fab{width:74px;height:74px;font-size:.8rem}
  .toast-wrap{width:calc(100% - 120px)}
  main{padding:8px 12px 30px}
  .card{padding:15px}
  .tabs .tab span:last-child{display:none}
  .tabs .tab{padding:10px 14px;font-size:1.1rem}
}

/* ---------------- blinking ----------------
   Two blinks per 22s cycle, so roughly one every ten seconds. The gaps are
   deliberately uneven (~9s then ~13s) so it reads as occasional rather than
   metronomic. The blink itself stays quick — ~350ms door to door. Both eyes
   share one cycle, so they stay in sync. Calm mode and prefers-reduced-motion
   switch it off via the global animation overrides below. */
@keyframes blink{
  0%, 40.1%, 41.7%, 81%, 82.6%, 100%{ transform:translateY(-38px) }  /* parked above the eye */
  40.9%, 81.8%                      { transform:translateY(0) }      /* dropped over it */
}
.eye-lid{animation:blink 22s ease-in-out infinite;transform:translateY(-38px)}

/* ---------------- idle float ---------------- */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero-avatar svg{animation:bob 3.6s ease-in-out infinite}
.pep-mascot svg{animation:bob 4.4s ease-in-out infinite}
.panic-mascot svg{animation:bob 5s ease-in-out infinite}
html[data-motion="calm"] .hero-avatar svg,
html[data-motion="calm"] .pep-mascot svg,
html[data-motion="calm"] .panic-mascot svg{animation:none}

/* ---------------- treat shop ---------------- */
.chip-token b{color:var(--lemon)}

.token-card{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(130deg,var(--surface),color-mix(in srgb,var(--lemon) 18%,var(--surface)))}
.token-balance{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.token-num{font-size:2.6rem;font-weight:800;line-height:1;color:var(--peach)}
.token-lab{font-size:.74rem;font-weight:800;color:var(--ink-soft);line-height:1.2}
.token-progress{flex:1 1 200px;min-width:0}
.token-bar{height:12px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden}
.token-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--lemon),var(--peach));transition:width .6s cubic-bezier(.3,1.4,.5,1)}
.token-progress p{margin-top:7px}

.section-head{margin:22px 4px 10px}

.daily-treat{background:linear-gradient(130deg,color-mix(in srgb,var(--mint) 18%,var(--surface)),var(--surface));
  border-style:dashed;border-width:2px;border-color:var(--mint)}
.daily-treat.is-locked{background:var(--surface);border-color:var(--line);border-style:dashed}
.dt-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dt-ico{font-size:2.2rem;line-height:1}
.dt-text{flex:1 1 180px;min-width:0}
.dt-kicker{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.dt-name{font-size:1.06rem;font-weight:800}
.dt-note{font-size:.84rem;color:var(--ink-soft);font-weight:600}

.treat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px}
.treat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);
  transition:transform var(--speed),box-shadow var(--speed);
}
.treat.can-buy{border-color:var(--peach)}
.treat.can-buy:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.treat.too-dear{opacity:.55}
.treat-top{display:flex;align-items:flex-start;gap:10px}
.treat-ico{font-size:1.7rem;line-height:1.1;flex:0 0 auto}
.treat-name{font-weight:800;font-size:.95rem;line-height:1.25}
.treat-note{font-size:.78rem;color:var(--ink-soft);font-weight:600;flex:1}
.treat-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.treat-cost{font-size:.8rem;font-weight:800;color:var(--peach);background:var(--bg-2);border-radius:999px;padding:4px 11px;white-space:nowrap}
.treat-btn{border:none;border-radius:999px;padding:8px 16px;font-weight:800;font-size:.82rem;cursor:pointer;
  background:linear-gradient(135deg,var(--lemon),var(--peach));color:#4a2c00;transition:transform var(--speed)}
.treat-btn:hover:not(:disabled){transform:translateY(-2px)}
.treat-btn:disabled{background:var(--bg-2);color:var(--ink-soft);cursor:not-allowed}
.treat-del{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:.95rem;padding:2px 5px;border-radius:8px}
.treat-del:hover{color:var(--rose);background:var(--bg-2)}
.ico-input{flex:0 0 66px !important;text-align:center;font-size:1.1rem !important}

.claim-list{display:flex;flex-direction:column;gap:7px}
.claim{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:9px 13px;font-size:.88rem;font-weight:700}
.claim .c-ico{font-size:1.2rem}
.claim .c-day{margin-left:auto;font-size:.74rem;color:var(--ink-soft);font-weight:700;white-space:nowrap}
.claim-empty{color:var(--ink-soft);font-size:.9rem;font-weight:600;text-align:center;padding:12px}

/* ---------------- coach in the dial ---------------- */
.focus-coach{width:clamp(46px,17vw,62px);margin:0 auto 2px}
.focus-coach svg{width:100%;height:100%;overflow:visible}

/* Slow, sine-eased motion. The easing matters more than the shape: a linear or
   bouncy curve reads as fidgeting, this one reads as breathing. Every pose also
   fades in, so swapping pose doesn't snap. */
@keyframes coachIn{from{opacity:0}to{opacity:1}}
@keyframes coachFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%    {transform:translateY(-2.5px) rotate(-1.2deg)}
  50%    {transform:translateY(-4px) rotate(0deg)}
  75%    {transform:translateY(-2.5px) rotate(1.2deg)}
}
@keyframes coachRise   {0%,100%{transform:translateY(0) scale(1)}     50%{transform:translateY(-7px) scale(1.03)}}
@keyframes coachSway   {0%,100%{transform:rotate(-2.5deg) translateY(0)} 50%{transform:rotate(2.5deg) translateY(-2px)}}
@keyframes coachNod    {0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-3px) rotate(1.5deg)}}
@keyframes coachBreathe{0%,100%{transform:scale(1) translateY(0)}     50%{transform:scale(1.045) translateY(-1.5px)}}

.focus-coach svg              {animation:coachIn .6s ease both, coachFloat   6s   cubic-bezier(.45,0,.55,1) infinite}
.focus-coach.pose-cheer svg   {animation:coachIn .6s ease both, coachRise    3.4s cubic-bezier(.45,0,.55,1) infinite}
.focus-coach.pose-flex svg    {animation:coachIn .6s ease both, coachSway    4.4s cubic-bezier(.45,0,.55,1) infinite}
.focus-coach.pose-point svg   {animation:coachIn .6s ease both, coachNod     4.8s cubic-bezier(.45,0,.55,1) infinite}
.focus-coach.pose-meditate svg{animation:coachIn .6s ease both, coachBreathe 7.5s cubic-bezier(.45,0,.55,1) infinite}
.focus-coach.pose-rest svg    {animation:coachIn .6s ease both, coachFloat   7s   cubic-bezier(.45,0,.55,1) infinite}

/* Coach's eyelids: same trick as Sachi's — a lid clipped to the eye, parked
   above it. Two blinks per 14s, ~9s and ~5s apart. */
@keyframes coachBlink{
  0%, 47.4%, 49.6%, 89.4%, 91.6%, 100%{ transform:translateY(-20px) }
  48.5%, 90.5%                        { transform:translateY(0) }
}
.coach-lid{animation:coachBlink 14s ease-in-out infinite;transform:translateY(-20px)}

.coach-line{
  margin:0 auto 14px;max-width:340px;min-height:2.6em;
  font-size:.92rem;font-weight:700;color:var(--ink-soft);text-wrap:pretty;
  animation:coachIn .6s ease both;
}

/* ---------------- travelling sprint timer ----------------
   A class selector beats the UA's [hidden] rule, so this must be said twice. */
.mini-timer[hidden]{display:none !important}
.mini-timer{
  position:fixed;right:18px;z-index:49;
  bottom:calc(env(safe-area-inset-bottom,0px) + 118px);
  display:flex;align-items:center;gap:9px;padding:7px 15px 7px 7px;
  border:1px solid var(--line);border-radius:999px;cursor:pointer;
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lift);
  animation:pop .35s cubic-bezier(.3,1.5,.5,1) both;transition:transform var(--speed);
}
.mini-timer:hover{transform:translateY(-3px)}
.mini-timer.is-paused{opacity:.72}
.mt-ring{position:relative;width:42px;height:42px;flex:0 0 42px;display:block}
.mt-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.mt-track{fill:none;stroke:var(--bg-2);stroke-width:4}
.mt-prog{fill:none;stroke:var(--grape);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:119.4;stroke-dashoffset:119.4;transition:stroke-dashoffset 1s linear}
.mini-timer.is-break .mt-prog{stroke:var(--mint)}
.mt-coach{position:absolute;inset:6px;pointer-events:none}
.mt-coach svg{width:100%;height:100%;transform:none;animation:coachFloat 7s cubic-bezier(.45,0,.55,1) infinite}
.mt-body{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.mt-time{font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums}
.mt-label{font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}

@media (max-width:520px){
  .mini-timer{bottom:calc(env(safe-area-inset-bottom,0px) + 104px);padding:6px 13px 6px 6px}
  .mt-ring{width:36px;height:36px;flex:0 0 36px}
  .mt-time{font-size:.92rem}
}