:root{
  --paper:#f5f0e6; --paper-2:#ebe3d3; --ink:#1f2a44; --ink-2:#4a5470;
  --card:#fffdf8; --accent:#e3a625; --accent-ink:#1f2a44; --teal:#1f6f6a; --coral:#b8432f;
  --good:#1f7a4d; --bad:#b3261e; --gold:#f3cd5b; --ring:#2456c7;
  --radius:18px; --shadow:0 10px 30px rgba(31,42,68,.12),0 2px 6px rgba(31,42,68,.08);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--ink); background:var(--paper);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  min-height:100vh;display:flex;flex-direction:column;
  background:
    radial-gradient(circle at 15% 10%, rgba(227,166,37,.18), transparent 40%),
    radial-gradient(circle at 90% 85%, rgba(31,111,106,.14), transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(31,42,68,.045) 31px 32px),
    var(--paper);
}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:0 0 10px 0;z-index:10}
.skip:focus{left:0}
.app{width:100%;max-width:560px;margin:0 auto;padding:max(1rem,env(safe-area-inset-top)) 1rem 1rem;flex:1}
.screen{animation:rise .35s ease both}
[hidden]{display:none!important}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

h1,h2{line-height:1.1;margin:.2em 0 .4em}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;font-weight:700;color:var(--teal);margin:0}
.lede{font-size:1.08rem;line-height:1.55;color:var(--ink-2)}
.small{font-size:.9rem;color:var(--ink-2)}
kbd{background:var(--card);border:1px solid #c9bfa9;border-bottom-width:3px;border-radius:6px;padding:0 .35em;font-size:.85em}

/* Intro */
.intro{text-align:center;padding-top:8vh}
.intro-badge{font-size:3.2rem;width:96px;height:96px;margin:0 auto 1rem;display:grid;place-items:center;background:var(--card);border-radius:28px;box-shadow:var(--shadow);transform:rotate(-6deg)}
.logo{font-size:clamp(3rem,13vw,4.6rem);font-weight:900;letter-spacing:-.04em;color:var(--ink);margin:.1em 0 .25em}
.logo::after{content:"";display:block;width:70%;height:12px;margin:-.32em auto 0;background:var(--accent);opacity:.55;border-radius:8px;position:relative;z-index:-1}
.best{margin-top:1.4rem;font-size:.95rem;color:var(--ink-2);background:rgba(255,253,248,.7);padding:.6rem .9rem;border-radius:12px;display:inline-block}

.stack{display:flex;flex-direction:column;gap:.7rem;margin-top:1.6rem}
.btn{appearance:none;border:0;border-radius:14px;padding:1rem 1.2rem;font:inherit;font-weight:800;font-size:1.05rem;cursor:pointer;min-height:52px;transition:transform .12s ease, box-shadow .12s ease, background .12s}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 4px 0 #0e1527}
.btn-primary:hover{background:#2a3860}
.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 #0e1527}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-ghost:hover{background:rgba(31,42,68,.06)}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px}

/* How to */
.howto{background:var(--card);border-radius:var(--radius);padding:1.4rem 1.3rem;box-shadow:var(--shadow);margin-top:1rem}
.howto-list{padding-left:1.2rem;line-height:1.55}
.howto-list>li{margin-bottom:.8rem}
.meter-key{list-style:none;padding:0;margin:.5rem 0 0}
.meter-key li{padding:.2rem 0}

/* HUD */
.hud{position:sticky;top:0;z-index:2;background:rgba(245,240,230,.92);backdrop-filter:blur(6px);margin:-1rem -1rem 1rem;padding:.8rem 1rem .7rem;border-bottom:1px solid rgba(31,42,68,.1)}
.hud-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.55rem}
.week{margin:0;font-weight:900;font-size:1.05rem}
.pips{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.pips li{width:14px;height:6px;border-radius:3px;background:#d6cdb9}
.pips li.done{background:var(--teal)}
.pips li.now{background:var(--accent)}
.meters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.meter{position:relative;background:var(--card);border-radius:12px;padding:.45rem .3rem .4rem;text-align:center;box-shadow:0 1px 3px rgba(31,42,68,.1)}
.meter .ico{font-size:1.15rem;line-height:1}
.meter .name{display:block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);margin-top:2px}
.meter .bar{height:7px;background:#e6dfcf;border-radius:4px;margin-top:5px;overflow:hidden}
.meter .fill{height:100%;border-radius:4px;background:var(--teal);transition:width .45s ease, background .3s}
.meter.low .fill{background:var(--coral)}
.meter .val{font-size:.72rem;font-weight:800;margin-top:3px;display:block}
.meter .dot{position:absolute;top:-5px;right:-3px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--card);transform:scale(0);transition:transform .15s}
.meter .dot.big{width:16px;height:16px;top:-7px;right:-5px}
.meter.preview .dot{transform:scale(1)}
.meter.bump{animation:bump .5s ease}
@keyframes bump{30%{transform:scale(1.08)}}

/* Card */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem 1.2rem 1.2rem;position:relative;animation:deal .35s ease both}
.card::before{content:"";position:absolute;top:-10px;left:50%;width:84px;height:22px;margin-left:-42px;background:rgba(227,166,37,.55);transform:rotate(-2deg);border-radius:3px}
.card.rare{background:linear-gradient(160deg,#fff8dc,#fffdf8 50%);outline:3px solid var(--gold)}
.card.rare::before{background:rgba(243,205,91,.9)}
@keyframes deal{from{opacity:0;transform:translateY(16px) rotate(1.5deg)}to{opacity:1;transform:none}}
.card-from{margin:0;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--teal)}
.card-title{font-size:1.55rem;font-weight:900;letter-spacing:-.01em;margin:.25rem 0 .5rem}
.card-title:focus{outline:none}
.card-text{font-size:1.06rem;line-height:1.55;margin:0 0 1.1rem;color:var(--ink-2)}
.choices{display:flex;flex-direction:column;gap:.6rem}
.choice{display:flex;align-items:center;gap:.75rem;text-align:left;width:100%;background:var(--paper);border:2px solid transparent;color:var(--ink);border-radius:14px;padding:.85rem .9rem;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;min-height:56px;transition:border-color .12s, background .12s, transform .12s}
.choice:hover,.choice:focus-visible{border-color:var(--ink);background:#fff}
.choice:active{transform:scale(.98)}
.choice .num{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:.85rem}
.result{margin-top:.2rem;animation:rise .3s ease both}
.result-text{font-size:1.08rem;line-height:1.55;margin:0 0 .8rem;padding:.8rem .9rem;background:var(--paper);border-left:4px solid var(--accent);border-radius:6px 12px 12px 6px}
.deltas{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.4rem}
.deltas.center{justify-content:center}
.deltas li{font-size:.85rem;font-weight:800;padding:.3rem .6rem;border-radius:999px;background:#e9e3d6}
.deltas li.up{background:#d8efe2;color:var(--good)}
.deltas li.down{background:#f7dcd8;color:var(--bad)}
.result .btn{width:100%}

/* Weekend */
.weekend{text-align:center;padding-top:10vh}
.weekend h2{font-size:2.4rem;font-weight:900}
.weekend .btn{margin-top:1.4rem;width:100%}

/* End */
.report{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem 1.2rem;margin-top:.5rem;border-top:10px solid var(--ink)}
.report-head{margin:0;text-transform:uppercase;letter-spacing:.16em;font-weight:800;font-size:.75rem;color:var(--teal)}
.end-title{font-size:clamp(1.8rem,8vw,2.4rem);font-weight:900;letter-spacing:-.02em;margin:.3rem 0 .3rem}
.end-sub{color:var(--ink-2);line-height:1.5;margin:0 0 1rem}
.grades{width:100%;border-collapse:collapse;font-size:.92rem}
.grades th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);padding:.3rem .3rem;border-bottom:2px solid var(--paper-2)}
.grades td{padding:.55rem .3rem;border-bottom:1px solid var(--paper-2);vertical-align:top;line-height:1.4}
.grades td.g{font-weight:900;font-size:1.25rem;text-align:center;width:3rem}
.grades td.a{font-weight:800;white-space:nowrap}
.g-A,.g-B{color:var(--good)} .g-C{color:#8a6100} .g-D,.g-E{color:var(--bad)}
.score{margin:1rem 0 0;font-size:1.05rem}
.newbest{background:var(--accent);color:var(--ink);font-weight:900;font-size:.8rem;padding:.2rem .5rem;border-radius:999px;margin-left:.3rem}
.signed{margin:.4rem 0 0;color:var(--ink-2);font-size:.9rem}

.toast{position:fixed;left:50%;bottom:calc(1.2rem + env(safe-area-inset-bottom));transform:translate(-50%,150%);background:var(--ink);color:#fff;padding:.75rem 1.1rem;border-radius:12px;font-weight:700;transition:transform .25s ease, visibility 0s .25s;visibility:hidden;max-width:90vw;text-align:center;z-index:20}
.toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .25s ease}
.foot{text-align:center;font-size:.78rem;color:var(--ink-2);padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom))}

@media (min-width:600px){ .app{padding-top:2rem} .hud{margin:0 0 1rem;border-radius:16px;border:1px solid rgba(31,42,68,.1)} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){ .meter .fill{background:CanvasText} .choice{border-color:CanvasText} }