@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url('../fonts/BarlowCondensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url('../fonts/BarlowCondensed-700.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-display:swap;src:url('../fonts/BarlowCondensed-800.woff2') format('woff2')}
@font-face{font-family:'Great Vibes';font-weight:400;font-display:swap;src:url('../fonts/GreatVibes-400.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-weight:300;font-display:swap;src:url('../fonts/TitilliumWeb-300.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-weight:400;font-display:swap;src:url('../fonts/TitilliumWeb-400.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-weight:600;font-display:swap;src:url('../fonts/TitilliumWeb-600.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-weight:700;font-display:swap;src:url('../fonts/TitilliumWeb-700.woff2') format('woff2')}

:root{
  --void:#200334; --card:#2b0a45; --card2:#260742;
  --pink:#ff01f9; --blue:#3df6ff; --blush:#f9eefb; --sky:#94ebff; --violet:#75439e;
  --pink83:hsl(301 100% 83%); --blue83:hsl(183 100% 83%);
  --dim:rgb(249 238 251 / .74); --faint:rgb(249 238 251 / .5); --line:rgb(249 238 251 / .14);
  --display:'Barlow Condensed','Arial Narrow',sans-serif; --body:'Titillium Web',system-ui,sans-serif; --script:'Great Vibes',cursive;
  --hex:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:var(--body);color:var(--blush);font-size:16px;line-height:1.5;
  background:
   radial-gradient(700px 520px at 0% -10%, rgb(117 67 158 / .55), transparent 62%),
   radial-gradient(640px 640px at 110% 30%, rgb(255 1 249 / .12), transparent 62%),
   radial-gradient(640px 480px at 15% 110%, rgb(61 246 255 / .08), transparent 62%),
   var(--void);
  background-attachment:fixed;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
a{color:var(--blue83)}
button{font:inherit;color:inherit}
.wrap{max-width:960px;margin:0 auto;padding:16px}
.neon-pink{color:var(--pink83);text-shadow:0 0 4px rgb(255 1 249 / .83),0 0 12px rgb(255 1 249 / .6),0 0 26px rgb(255 1 249 / .4)}
.neon-blue{color:var(--blue83);text-shadow:0 0 4px rgb(61 246 255 / .83),0 0 12px rgb(61 246 255 / .5),0 0 26px rgb(61 246 255 / .3)}
h1,h2,h3,h4{font-family:var(--display);text-transform:uppercase;margin:0;line-height:1.05;letter-spacing:.02em}
h1{font-weight:800;font-size:clamp(34px,7vw,52px)}
h2{font-weight:800;font-size:clamp(26px,5vw,36px)}
h3{font-weight:700;font-size:22px;letter-spacing:.06em}
h4{font-weight:700;font-size:17px;letter-spacing:.08em}
.wordmark{font-family:var(--script);font-size:30px;text-transform:none;color:var(--pink83);text-shadow:0 0 4px rgb(255 1 249 / .8),0 0 14px rgb(255 1 249 / .55);text-decoration:none}
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--blue83);text-shadow:0 0 10px rgb(61 246 255 / .6);margin:0 0 8px}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.muted{color:var(--dim)} .faint{color:var(--faint)}
.small{font-size:13px}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 14px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.topbar nav{display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid rgb(117 67 158 / .9);background:rgb(42 7 68 / .7);color:var(--blush);text-decoration:none;font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;cursor:pointer}
.pill:hover,.pill.on{border-color:var(--blue);box-shadow:0 0 12px rgb(61 246 255 / .35)}
.pill.pink.on,.pill.pink:hover{border-color:var(--pink);box-shadow:0 0 12px rgb(255 1 249 / .35)}
.btn{display:inline-block;border:0;cursor:pointer;padding:12px 22px;border-radius:10px;background:linear-gradient(90deg,var(--pink),var(--violet));color:#fff;font-family:var(--display);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:15px;text-decoration:none;box-shadow:0 0 18px rgb(255 1 249 / .3)}
.btn.ghost{background:transparent;border:1px solid var(--violet);box-shadow:none}
.btn:disabled{opacity:.5;cursor:not-allowed}

.card{background:rgb(42 7 68 / .78);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px;backdrop-filter:blur(2px)}
.card.glow-pink{border-color:rgb(255 1 249 / .5);box-shadow:0 0 22px rgb(255 1 249 / .14)}
.card.glow-blue{border-color:rgb(61 246 255 / .45);box-shadow:0 0 22px rgb(61 246 255 / .12)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){.grid2{grid-template-columns:1fr}}

/* bars */
.bar{height:12px;border-radius:999px;background:rgb(117 67 158 / .3);overflow:hidden;box-shadow:inset 0 0 4px rgb(0 0 0 / .5)}
.bar>i{display:block;height:100%;border-radius:999px;transition:width .6s ease;background:linear-gradient(90deg,var(--violet),var(--pink));box-shadow:0 0 10px rgb(255 1 249 / .7)}
.bar.blue>i{background:linear-gradient(90deg,var(--violet),var(--blue));box-shadow:0 0 10px rgb(61 246 255 / .7)}
.barlabel{display:flex;justify-content:space-between;font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;margin-bottom:6px}

/* month switcher */
.months{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.month{flex:0 0 auto;min-width:92px;text-align:center;padding:8px 12px;border-radius:12px;border:1px solid rgb(117 67 158 / .8);background:rgb(42 7 68 / .7);cursor:pointer}
.month b{display:block;font-family:var(--display);font-weight:800;letter-spacing:.1em;font-size:16px}
.month span{font-size:11px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
.month.on{border-color:var(--pink);box-shadow:0 0 14px rgb(255 1 249 / .4)}
.month.done b::after{content:' ✓';color:var(--blue83)}
.banner{border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:14px;border:1px dashed rgb(61 246 255 / .5);background:rgb(61 246 255 / .06)}
.banner.coach{border-color:rgb(255 1 249 / .6);background:rgb(255 1 249 / .07)}

/* focus block */
.focus dl{margin:0;display:grid;gap:10px}
.focus dt{font-family:var(--display);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:var(--pink83)}
.focus dd{margin:0;color:var(--dim)}

/* phases */
details.phase{border:1px solid rgb(117 67 158 / .9);border-radius:16px;background:rgb(42 7 68 / .8);margin-bottom:14px;overflow:hidden}
details.phase>summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;justify-content:space-between;gap:12px;align-items:center}
details.phase>summary::-webkit-details-marker{display:none}
details.phase>summary .chev{transition:transform .2s;color:var(--faint)}
details.phase[open]>summary .chev{transform:rotate(90deg)}
.phase-body{padding:0 18px 18px}
.seg{border:1px solid rgb(117 67 158 / .35);background:rgb(117 67 158 / .1);border-radius:12px;padding:12px 14px;margin-top:12px}
.seg-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.seg-h b{font-family:var(--display);font-weight:800;letter-spacing:.08em;font-size:18px;color:var(--pink83)}
.seg-h span{color:var(--dim);font-size:14px}
.task{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.task:first-of-type{border-top:0}
.task p{margin:0;color:var(--dim)}
.task.done p{color:var(--blush)}
.check{appearance:none;-webkit-appearance:none;flex:0 0 26px;width:26px;height:26px;margin-top:1px;border:2px solid var(--violet);border-radius:6px;cursor:pointer;position:relative;background:transparent}
.check:checked{background:var(--blue);border-color:var(--blue);box-shadow:0 0 10px var(--blue)}
.check:checked::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:var(--void);font-weight:800}
.check:disabled{cursor:default}
.xp-tag{flex:0 0 auto;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--blue83);opacity:.8}
textarea.reflect{width:100%;min-height:76px;margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--void);border:1px solid rgb(117 67 158 / .9);color:var(--blush);font:inherit;font-size:14px;resize:vertical}
textarea.reflect:focus{outline:none;border-color:var(--pink)}
textarea.reflect[readonly]{border-style:dashed;opacity:.85}
.saved{font-size:11px;color:var(--faint);height:14px}

.event{margin-top:16px;padding:18px;border-radius:14px;text-align:center;border:1.5px solid var(--pink);background:linear-gradient(135deg,rgb(255 1 249 / .1),rgb(61 246 255 / .08));box-shadow:0 0 18px rgb(255 1 249 / .2)}
.event label{display:flex;justify-content:center;align-items:center;gap:12px;cursor:pointer}
.event .check{flex-basis:32px;width:32px;height:32px}
.event p{color:var(--dim);margin:10px auto 0;max-width:60ch}
.event .claim{font-family:var(--display);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue83);margin-top:10px}

/* medals */
.shelf{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.medal-wrap{width:104px;text-align:center}
.medal{width:84px;height:84px;margin:0 auto;position:relative;display:grid;place-items:center;clip-path:var(--hex);background:linear-gradient(135deg,var(--pink),var(--blue))}
.medal::before{content:'';position:absolute;inset:3px;clip-path:var(--hex);background:radial-gradient(circle at 50% 35%,#3a0d5c,var(--void))}
.medal i{position:relative;font-style:normal;font-size:34px}
.medal .count{position:absolute;bottom:9px;right:14px;font-family:var(--display);font-weight:800;font-size:14px;color:#fff;text-shadow:0 0 6px var(--pink)}
.medal-wrap b{display:block;font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px;margin-top:6px;line-height:1.1}
.medal-wrap span{font-size:11px;color:var(--faint)}
.medal.locked{background:rgb(117 67 158 / .6);filter:grayscale(.7);opacity:.6}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:30px;line-height:1}
.stat span{display:block;margin-top:6px;font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;transition:.35s;z-index:50;padding:12px 18px;border-radius:12px;background:var(--card);border:1px solid var(--pink);box-shadow:0 0 22px rgb(255 1 249 / .4);font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* sky */
.planets{display:grid;gap:8px}
.prow{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;font-size:15px}
.prow .glyph{font-size:20px;text-align:center;color:var(--blue83)}
.prow .deg{font-family:var(--display);font-weight:700;letter-spacing:.06em;color:var(--dim)}
.rx{font-family:var(--display);font-weight:800;color:var(--pink83);font-size:12px;margin-left:6px;letter-spacing:.1em}
.prow .bar{grid-column:2/4;height:6px;margin-top:-2px}
details.more>summary{cursor:pointer;list-style:none;margin-top:12px;font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--blue83)}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:'▸';display:inline-block;margin-right:8px;transition:transform .2s}
details.more[open]>summary::before{transform:rotate(90deg)}
.wheel{width:100%;max-width:520px;margin:0 auto;display:block}
.wheel text{font-family:var(--display)}

input.field,select.field{width:100%;padding:12px 14px;border-radius:10px;border:2px solid var(--violet);background:transparent;color:#fff;font:inherit}
input.field:focus,select.field:focus{outline:none;border-color:var(--sky)}
select.field option{background:var(--void)}
label.lbl,legend.lbl{display:block;font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--faint);margin:10px 0 4px}
.center{text-align:center}
.hidden{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}