/* ============================================================
   26° 刚刚好 — classroom energy challenge
   ============================================================ */
:root{
  --lime:#d9ff7d;
  --mint:#8ff0c1;
  --mint-dim:#4dbb8d;
  --amber:#ffc46b;
  --coral:#ff8f7c;
  --ice:#9bdcff;
  --text:#f3fbf4;
  --muted:#a3b8aa;
  --faint:#6f8a79;
  --ink:#07120e;
  --panel:linear-gradient(160deg, rgba(12,28,23,.86), rgba(7,18,15,.72));
  --panel-line:rgba(218,255,231,.13);
  --shadow:0 24px 64px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
  --display:"Avenir Next Condensed","DIN Condensed","Helvetica Neue",-apple-system,"PingFang SC",sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Avenir Next","Segoe UI","PingFang SC","Hiragino Sans GB",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:#07110d;color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;user-select:none}
button{font-family:inherit;color:inherit}
#app{position:fixed;inset:0}
canvas{display:block;outline:none}
kbd{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;
  border-radius:5px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 1px 0 rgba(0,0,0,.35);font-family:var(--display);font-size:10px;font-weight:700;color:#e9fff2;letter-spacing:.03em;
}
.grain{
  position:fixed;inset:-30%;z-index:3;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%, transparent 46%, rgba(3,12,9,.38) 100%);
}
.temp-tint{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .8s ease}
.temp-tint.hot{opacity:1;background:radial-gradient(ellipse at 50% 50%, transparent 46%, rgba(255,104,54,.28) 100%)}
.temp-tint.cold{opacity:1;background:radial-gradient(ellipse at 50% 50%, transparent 48%, rgba(70,160,255,.22) 100%)}

/* ---------- HUD shell ---------- */
.hud{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:1;transition:opacity .35s ease}
body[data-mode="menu"] .hud,
body[data-mode="report"] .hud,
body[data-mode="quiz"] .hud,
body[data-mode="final"] .hud,
body[data-mode="campaign"] .hud{opacity:0}
body[data-mode="paused"] .hud{opacity:.28}
.panel{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:18px;
  box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
}
.hud-top{
  position:absolute;inset:22px 26px auto;display:grid;
  grid-template-columns:minmax(220px,270px) minmax(330px,390px) minmax(220px,270px);
  justify-content:space-between;align-items:start;gap:16px;
}
.panel-eyebrow{font-family:var(--display);font-size:9px;line-height:1;letter-spacing:.17em;font-weight:700;color:var(--faint);text-transform:uppercase;display:flex;align-items:center;gap:7px}
.level-count{margin-left:auto;font-size:8.5px;letter-spacing:.12em;color:var(--lime);opacity:.8}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(217,255,125,.12),0 0 12px rgba(217,255,125,.55);animation:pulse 2.2s infinite}
@keyframes pulse{50%{opacity:.45;box-shadow:0 0 0 5px rgba(217,255,125,.05)}}

/* day */
.day-panel{padding:15px 16px 14px}
.day-row{display:flex;align-items:center;gap:11px;margin-top:12px}
.day-number{font-family:var(--display);font-size:34px;font-weight:800;line-height:.9;letter-spacing:-.04em;color:var(--lime)}
.day-copy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.day-copy b{font-size:14px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day-copy span{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weather-icon{width:30px;height:30px;border-radius:50%;flex:0 0 auto;position:relative}
.weather-icon.sun{background:radial-gradient(circle at 38% 35%,#fff4c4,#ffc45c 66%);box-shadow:0 0 0 5px rgba(255,196,92,.1),0 0 24px rgba(255,180,80,.45)}
.weather-icon.cloud{background:linear-gradient(145deg,#eef3ef,#9fb3ac);box-shadow:inset -4px -4px 8px rgba(60,80,72,.3),0 0 22px rgba(210,230,220,.22)}
.weather-icon.rain{background:linear-gradient(160deg,#c6dce2,#7e9ba5);box-shadow:inset -4px -4px 8px rgba(40,70,80,.35),0 0 22px rgba(140,190,210,.2)}
.weather-icon.rain::after{content:"";position:absolute;left:7px;right:7px;bottom:-6px;height:9px;background:repeating-linear-gradient(110deg,transparent 0 3px,rgba(160,220,255,.8) 3px 4px)}
.clock-row{display:flex;align-items:baseline;gap:8px;margin-top:13px;padding-top:11px;border-top:1px solid rgba(255,255,255,.07)}
.clock{font-family:var(--display);font-size:20px;font-weight:750;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.period{font-size:10px;color:var(--mint);padding:2px 7px;border-radius:20px;background:rgba(143,240,193,.09);border:1px solid rgba(143,240,193,.16)}
.out-temp{margin-left:auto;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.day-progress{height:2px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:11px;overflow:hidden}
.day-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mint),var(--lime));border-radius:2px;transition:width .3s linear}
.mission-line{display:flex;align-items:center;gap:6px;margin-top:9px;flex-wrap:wrap}
.mission-label{font-family:var(--display);font-size:7.5px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.mission-line em{font-style:normal;font-size:8.5px;line-height:1;padding:4px 6px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--muted);transition:.25s}
.mission-line em.ok{color:var(--lime);border-color:rgba(217,255,125,.35);background:rgba(217,255,125,.08)}

/* temperature */
.temp-panel{padding:15px 18px 13px;text-align:left}
.temp-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.status-pill{font-size:9px;font-weight:750;letter-spacing:.08em;padding:4px 9px;border-radius:20px;border:1px solid transparent;white-space:nowrap}
.status-pill.ok{color:var(--mint);background:rgba(143,240,193,.1);border-color:rgba(143,240,193,.22)}
.status-pill.hot{color:var(--amber);background:rgba(255,196,107,.11);border-color:rgba(255,196,107,.24)}
.status-pill.hotter{color:var(--coral);background:rgba(255,143,124,.12);border-color:rgba(255,143,124,.28)}
.status-pill.cold{color:var(--ice);background:rgba(155,220,255,.1);border-color:rgba(155,220,255,.24)}
.temp-main{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:4px}
.temp-read{font-family:var(--display);font-weight:750;font-size:52px;line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.temp-read small{font-size:19px;font-weight:600;color:var(--muted);margin-left:3px;letter-spacing:0}
.temp-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:10px;color:var(--muted);padding-bottom:5px}
.trend{color:var(--faint);font-variant-numeric:tabular-nums}
.trend.up{color:var(--amber)}.trend.down{color:var(--ice)}
.gauge{position:relative;height:16px;margin-top:9px}
.gauge-track{position:absolute;left:0;right:0;top:6px;height:5px;border-radius:5px;background:linear-gradient(90deg,#5e9bcc,#5fbf9d 34%,#c8e37a 50%,#ffc46b 68%,#ff8469)}
.gauge-track::after{content:"";position:absolute;inset:0;border-radius:5px;background:linear-gradient(90deg,rgba(255,255,255,.25),transparent 30%);opacity:.35}
.gauge-band{position:absolute;left:37.5%;width:12.5%;top:1px;height:15px;border-radius:4px;border:1px solid rgba(217,255,125,.7);background:rgba(217,255,125,.08);box-shadow:0 0 12px rgba(217,255,125,.18)}
.gauge-target{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font-size:7px;color:var(--lime);letter-spacing:.06em;font-weight:700}
.gauge-marker{position:absolute;top:0;left:22%;width:2px;height:16px;background:#fff;border-radius:2px;box-shadow:0 0 0 2px rgba(7,18,14,.65),0 0 9px rgba(255,255,255,.7);transition:left .28s linear}
.gauge-marker::after{content:"";position:absolute;left:50%;top:-4px;width:6px;height:6px;border-radius:50%;background:#fff;transform:translateX(-50%);box-shadow:0 0 8px rgba(255,255,255,.8)}
.gauge-scale{display:flex;justify-content:space-between;margin-top:4px;font-family:var(--display);font-size:7.5px;color:var(--faint);letter-spacing:.05em}

/* energy */
.energy-panel{padding:15px 16px 13px;justify-self:end;width:100%}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.budget-tag{font-size:8.5px;letter-spacing:.08em;color:var(--muted);border:1px solid rgba(255,255,255,.1);padding:3px 7px;border-radius:20px;white-space:nowrap}
.energy-value{font-family:var(--display);font-size:32px;font-weight:750;letter-spacing:-.03em;margin-top:5px;font-variant-numeric:tabular-nums}
.energy-value small{font-size:12px;font-weight:500;color:var(--muted);margin-left:4px;letter-spacing:0}
.energy-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:5px}
.energy-bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--mint),var(--lime));transition:width .4s ease,background .3s}
.energy-bar i.over{background:linear-gradient(90deg,var(--amber),var(--coral))}
.energy-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.energy-grid div{display:flex;flex-direction:column;gap:2px}
.energy-grid span{font-size:8.5px;color:var(--faint);letter-spacing:.08em}
.energy-grid b{font-family:var(--display);font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums}
.alert-line{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--mint);margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.07);min-height:27px;line-height:1.3}
.alert-line.warn{color:var(--coral)}
.alert-line .ok-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.alert-line.warn .ok-dot{animation:pulse 1.1s infinite}

/* mood */
.mood-panel{
  position:absolute;left:26px;top:212px;width:270px;padding:13px 15px;
  display:flex;align-items:center;gap:12px;
}
.mood-emoji{font-size:29px;line-height:1;filter:saturate(1.05)}
.mood-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mood-copy b{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mood-bar{height:3px;background:rgba(255,255,255,.09);border-radius:3px;overflow:hidden;margin-top:2px}
.mood-bar i{display:block;height:100%;width:50%;background:linear-gradient(90deg,var(--coral),var(--amber),var(--mint));border-radius:3px;transition:width .45s}
.mood-pct{font-family:var(--display);font-size:15px;font-weight:700;color:var(--lime);font-variant-numeric:tabular-nums}

/* prompt / crosshair */
.prompt{
  position:absolute;left:50%;bottom:122px;transform:translate(-50%,8px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:9px;padding:8px 14px 8px 9px;border-radius:12px;
  background:rgba(7,18,14,.82);border:1px solid rgba(217,255,125,.2);backdrop-filter:blur(12px);
  box-shadow:0 12px 30px rgba(0,0,0,.35);transition:opacity .18s ease,transform .18s ease;
  font-size:12px;letter-spacing:.01em;white-space:nowrap;
}
.prompt.show{opacity:1;transform:translate(-50%,0)}
.prompt kbd{background:var(--lime);color:#18240d;border:0;height:23px;min-width:23px;font-size:11px}
.crosshair{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);opacity:.8;transition:opacity .2s}
.crosshair::before,.crosshair::after{content:"";position:absolute;background:rgba(240,255,240,.55);border-radius:2px}
.crosshair::before{left:50%;top:0;width:1px;height:5px;transform:translateX(-50%);box-shadow:0 13px 0 rgba(240,255,240,.55)}
.crosshair::after{top:50%;left:0;height:1px;width:5px;transform:translateY(-50%);box-shadow:13px 0 0 rgba(240,255,240,.55)}
.crosshair i{position:absolute;inset:7px;border:1px solid rgba(240,255,240,.8);border-radius:50%}
.crosshair.hot i{border-color:var(--lime);box-shadow:0 0 12px rgba(217,255,125,.55)}
body[data-mode="menu"] .crosshair{opacity:0}

/* device dock */
.dock{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:3px;padding:6px;
  border-radius:17px;pointer-events:auto;
}
.device{
  position:relative;width:84px;height:67px;border:1px solid transparent;background:transparent;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s;color:var(--muted);
}
.device:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.08);transform:translateY(-1px)}
.device:active{transform:translateY(0)}
.device svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.device .d-key{position:absolute;top:5px;left:6px;font-family:var(--display);font-size:7.5px;color:var(--faint);border:1px solid rgba(255,255,255,.12);border-radius:3px;padding:0 3px;line-height:12px}
.device .d-name{font-size:10.5px;font-weight:600;letter-spacing:.02em}
.device .d-state{font-family:var(--display);font-size:7.5px;letter-spacing:.11em;color:var(--faint);text-transform:uppercase}
.device.on{background:linear-gradient(170deg,rgba(143,240,193,.13),rgba(143,240,193,.035));border-color:rgba(143,240,193,.24);color:var(--text)}
.device.on svg{color:var(--lime);filter:drop-shadow(0 0 7px rgba(217,255,125,.35))}
.device.on .d-state{color:var(--lime)}
.device.warn{border-color:rgba(255,143,124,.38);background:linear-gradient(170deg,rgba(255,120,90,.14),rgba(255,120,90,.02))}
.device.warn svg{color:var(--coral)}
.device.warn .d-state{color:var(--coral)}
.device.locked{opacity:.5;border-style:dashed;filter:saturate(.35)}
.device.locked .d-state{color:var(--amber);letter-spacing:.06em}
.device.locked .d-key{opacity:.4}

.hud-foot{
  position:absolute;left:26px;right:26px;bottom:24px;display:flex;align-items:center;justify-content:space-between;
  pointer-events:none;font-size:10px;color:var(--faint);
}
.key-hints{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.key-hints kbd{margin-right:2px}
.key-hints span{display:flex;align-items:center;gap:4px}
.foot-actions{display:flex;gap:6px;pointer-events:auto}
.icon-btn{
  width:31px;height:31px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(9,22,18,.6);
  color:var(--muted);font-size:12px;cursor:pointer;transition:.2s;backdrop-filter:blur(8px);
}
.icon-btn:hover{color:var(--text);border-color:rgba(217,255,125,.3)}
.icon-btn.muted{color:var(--faint);text-decoration:line-through}

/* toasts */
.toasts{position:absolute;right:26px;top:258px;width:320px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  display:flex;gap:11px;padding:12px 14px;border-radius:13px;
  background:linear-gradient(150deg,rgba(12,30,24,.94),rgba(7,19,15,.9));
  border:1px solid rgba(218,255,231,.14);box-shadow:0 16px 40px rgba(0,0,0,.32);
  backdrop-filter:blur(15px);animation:toastIn .32s cubic-bezier(.2,.85,.3,1);overflow:hidden;position:relative;
}
.toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--mint)}
.toast.good::before{background:var(--lime)}
.toast.bad::before{background:var(--coral)}
.toast.info::before{background:var(--ice)}
.toast-icon{font-size:17px;line-height:1.25;flex:0 0 auto}
.toast-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.toast-copy b{font-size:11.5px;font-weight:650;letter-spacing:.01em}
.toast-copy span{font-size:10.5px;line-height:1.45;color:var(--muted)}
.toast.out{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(18px);margin-top:-8px}}

/* ---------- overlays ---------- */
.overlay{
  position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;
  padding:4vh 5vw;background:rgba(3,10,8,.52);backdrop-filter:blur(9px) saturate(.9);
  -webkit-backdrop-filter:blur(9px) saturate(.9);
}
.overlay.show{display:flex;animation:overlayIn .4s ease}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.card{
  width:min(720px,94vw);max-height:92vh;overflow:auto;padding:34px 38px;
  background:linear-gradient(165deg,rgba(14,33,26,.97),rgba(6,16,12,.97));
  border:1px solid rgba(218,255,231,.15);border-radius:24px;
  box-shadow:0 40px 120px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  animation:cardIn .45s cubic-bezier(.2,.85,.3,1);
}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.card::-webkit-scrollbar{width:6px}
.card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px}
.eyebrow{
  font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.2em;color:var(--mint);
  display:flex;align-items:center;justify-content:space-between;gap:12px;text-transform:uppercase;
}
.btn{
  appearance:none;border:0;border-radius:999px;padding:14px 24px;font-size:13px;font-weight:700;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:.22s;white-space:nowrap;
}
.btn span{font-size:16px;transition:transform .22s}
.btn.primary{background:var(--lime);color:#152006;box-shadow:0 10px 30px rgba(217,255,125,.22),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(217,255,125,.3)}
.btn.primary:hover span{transform:translateX(3px)}
.btn.primary:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:var(--muted)}
.btn.ghost:hover{color:var(--text);border-color:rgba(255,255,255,.28)}
.fineprint{font-size:9.5px;color:var(--faint);letter-spacing:.04em;text-align:center}

/* start */
.start-screen{
  background:
    linear-gradient(100deg, rgba(3,12,9,.96) 0%, rgba(3,12,9,.82) 34%, rgba(3,12,9,.24) 66%, rgba(3,12,9,.06) 100%),
    radial-gradient(ellipse at 80% 20%, rgba(217,255,125,.06), transparent 55%);
  backdrop-filter:blur(2px);align-items:center;justify-content:flex-start;
}
.start-grid{display:flex;align-items:center;justify-content:space-between;gap:5vw;width:100%;max-width:1500px;margin:0 auto}
.start-main{width:min(640px,56vw);animation:cardIn .7s cubic-bezier(.2,.85,.3,1)}
.start-main .eyebrow{justify-content:flex-start;gap:9px;color:var(--mint);margin-bottom:18px}
.start-main h1{margin:0;font-family:var(--display);line-height:.84;letter-spacing:-.055em;display:flex;flex-direction:column;align-items:flex-start}
.huge-deg{font-size:clamp(88px,12.5vw,172px);font-weight:800;color:var(--lime);text-shadow:0 0 60px rgba(217,255,125,.24);letter-spacing:-.08em}
.title-line{font-size:clamp(56px,7vw,96px);font-weight:750;color:var(--text);margin-left:5px;margin-top:6px}
.start-lede{font-size:14px;line-height:1.75;color:#c6d6c9;margin:24px 0 0;max-width:470px;letter-spacing:.01em}
.goal-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:25px 0 27px;max-width:520px}
.goal{padding:11px 13px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.goal span{display:block;font-size:8.5px;letter-spacing:.13em;color:var(--faint);text-transform:uppercase;margin-bottom:5px}
.goal b{font-family:var(--display);font-size:14px;font-weight:700;color:var(--text);letter-spacing:.01em;white-space:nowrap}
.goal b span{display:inline;font-size:11px;color:var(--muted)}
.start-main .btn{padding:16px 30px;font-size:14px}
.start-actions{display:flex;align-items:center;gap:10px}
.start-actions .btn.ghost{padding:15px 20px;font-size:12px}
.start-progress{margin:14px 0 0;font-size:9.5px;letter-spacing:.1em;color:var(--faint)}
.controls-line{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:22px;font-size:10px;color:var(--muted)}
.controls-line span{display:flex;align-items:center;gap:5px}
.touch-note{display:none;font-size:10px;color:var(--faint);margin-top:14px}
.forecast{
  width:330px;flex:0 0 auto;padding:22px;border-radius:22px;
  background:linear-gradient(160deg,rgba(10,29,23,.78),rgba(5,16,12,.62));
  border:1px solid rgba(218,255,231,.13);backdrop-filter:blur(18px);box-shadow:0 30px 80px rgba(0,0,0,.35);
  animation:cardIn .8s .1s cubic-bezier(.2,.85,.3,1) both;
}
.forecast-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.08)}
.forecast-head span{font-size:12px;font-weight:650;letter-spacing:.04em}
.forecast-head small{font-family:var(--display);font-size:7.5px;letter-spacing:.17em;color:var(--faint)}
.forecast-day{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.055)}
.fc-icon{width:27px;height:27px;border-radius:50%;flex:0 0 auto;position:relative}
.fc-icon.sun{background:radial-gradient(circle at 38% 35%,#fff4c4,#ffb84d 68%);box-shadow:0 0 18px rgba(255,180,80,.35)}
.fc-icon.cloud{background:linear-gradient(145deg,#eef3ef,#98aca4);box-shadow:0 0 15px rgba(210,230,220,.16)}
.fc-icon.rain{background:linear-gradient(160deg,#c6dce2,#7896a1);box-shadow:0 0 15px rgba(140,190,210,.18)}
.fc-icon.rain::after{content:"";position:absolute;left:5px;right:5px;bottom:-4px;height:6px;background:repeating-linear-gradient(110deg,transparent 0 3px,rgba(160,220,255,.75) 3px 4px)}
.forecast-day div:nth-child(2){display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.forecast-day b{font-size:11px;font-weight:600}
.forecast-day span{font-size:9px;color:var(--faint);font-variant-numeric:tabular-nums}
.forecast-day em{font-style:normal;font-size:8.5px;color:var(--mint);background:rgba(143,240,193,.08);border:1px solid rgba(143,240,193,.15);padding:3px 7px;border-radius:20px;white-space:nowrap}
.start-fact{margin-top:17px;font-size:10.5px;line-height:1.7;color:#b9ccbc;padding-left:14px;border-left:2px solid rgba(217,255,125,.5);position:relative}
.fact-mark{position:absolute;left:-3px;top:-10px;font-family:Georgia,serif;font-size:25px;color:var(--lime);opacity:.6}
.forecast-foot{margin-top:15px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);font-size:8.5px;color:var(--faint);letter-spacing:.04em}
.start-credit{position:absolute;left:5vw;bottom:3.4vh;font-size:8.5px;letter-spacing:.15em;color:rgba(190,215,198,.4);text-transform:uppercase}
.loading{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;gap:12px;
  background:#07110d;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase;transition:opacity .5s;
}
.loading span{width:17px;height:17px;border:1.5px solid rgba(217,255,125,.25);border-top-color:var(--lime);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading.done{opacity:0;pointer-events:none}

/* pause */
.pause-card{width:min(430px,92vw);text-align:center;padding:42px 34px}
.pause-card .eyebrow{justify-content:center}
.pause-card h2{font-family:var(--display);font-size:40px;font-weight:750;letter-spacing:-.03em;margin:14px 0 0}
.pause-card p{font-size:12px;line-height:1.7;color:var(--muted);margin:12px 0 24px}
.pause-card .btn{width:100%;margin-top:8px}

/* report */
.report-card{width:min(760px,94vw)}
.report-top{display:flex;align-items:center;gap:18px;margin-top:18px}
.grade{
  width:82px;height:82px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:40px;font-weight:800;letter-spacing:-.03em;color:#eaffe9;
  border:1px solid rgba(143,240,193,.4);background:radial-gradient(circle at 34% 28%,rgba(143,240,193,.24),rgba(10,35,27,.5));
  box-shadow:0 0 44px rgba(143,240,193,.14),inset 0 0 26px rgba(143,240,193,.08);
}
.grade.g-S{border-color:rgba(217,255,125,.6);background:radial-gradient(circle at 34% 28%,rgba(217,255,125,.3),rgba(28,44,12,.55));color:var(--lime);box-shadow:0 0 50px rgba(217,255,125,.2),inset 0 0 30px rgba(217,255,125,.1)}
.grade.g-A{border-color:rgba(143,240,193,.5);color:var(--mint)}
.grade.g-B{border-color:rgba(255,196,107,.5);background:radial-gradient(circle at 34% 28%,rgba(255,196,107,.22),rgba(50,38,14,.55));color:var(--amber);box-shadow:0 0 44px rgba(255,196,107,.12)}
.grade.g-C{border-color:rgba(255,143,124,.5);background:radial-gradient(circle at 34% 28%,rgba(255,143,124,.2),rgba(50,20,16,.55));color:var(--coral)}
.report-title-wrap{flex:1;min-width:0}
.report-top h2{font-family:var(--display);font-size:27px;font-weight:750;letter-spacing:-.02em;margin:0}
.report-top p{font-size:11px;color:var(--muted);margin:5px 0 0;line-height:1.5}
.stars{font-size:17px;letter-spacing:3px;color:var(--lime);text-shadow:0 0 18px rgba(217,255,125,.3);white-space:nowrap}
.stars .off{color:rgba(255,255,255,.13);text-shadow:none}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:22px}
.stat-grid>div{padding:11px 13px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}
.stat-grid span{display:block;font-size:8.5px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;margin-bottom:5px}
.stat-grid b{font-family:var(--display);font-size:17px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.saving-line{margin:16px 0 0;padding:12px 15px;border-radius:11px;background:rgba(217,255,125,.055);border:1px solid rgba(217,255,125,.15);font-size:11px;line-height:1.6;color:#d3e9c6}
.tips-block{margin-top:20px}
.tips-block h3{display:flex;align-items:baseline;gap:9px;font-size:12px;margin:0 0 9px;font-weight:650}
.tips-block h3 small{font-family:var(--display);font-size:7.5px;letter-spacing:.16em;color:var(--faint)}
.tips-block ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tips-block li{position:relative;padding-left:18px;font-size:11px;line-height:1.6;color:#b8cbbd}
.tips-block li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 9px rgba(217,255,125,.35)}
.report-card .btn{width:100%;margin-top:22px}
.outcome-badge{display:inline-flex;align-items:center;margin-top:12px;padding:5px 12px;border-radius:20px;font-size:9.5px;font-weight:750;letter-spacing:.12em}
.outcome-badge.pass{color:var(--lime);background:rgba(217,255,125,.1);border:1px solid rgba(217,255,125,.32)}
.outcome-badge.fail{color:var(--coral);background:rgba(255,143,124,.1);border:1px solid rgba(255,143,124,.3)}
.objective-block{margin-top:18px}
.objective-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.objective-head span{font-size:12px;font-weight:650}
.objective-head small{font-family:var(--display);font-size:7.5px;letter-spacing:.16em;color:var(--faint)}
.objective-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.objective-list li{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);font-size:11px}
.objective-list li i{width:17px;height:17px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;font-style:normal;font-size:9px;font-weight:800}
.objective-list li.ok i{background:rgba(143,240,193,.16);color:var(--mint);border:1px solid rgba(143,240,193,.35)}
.objective-list li.fail i{background:rgba(255,143,124,.14);color:var(--coral);border:1px solid rgba(255,143,124,.34)}
.objective-list li span{flex:1;color:#cfe0d3}
.objective-list li b{font-family:var(--display);font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--text)}
.objective-list li small{font-size:8px;color:var(--amber);border:1px solid rgba(255,196,107,.3);padding:2px 6px;border-radius:20px}
.report-actions{display:flex;gap:9px;margin-top:22px}
.report-actions .btn{flex:1;width:auto;margin:0}
.report-actions .btn.ghost{flex:0 0 auto;padding-left:20px;padding-right:20px}

/* quiz */
.quiz-card{width:min(680px,94vw)}
.quiz-card .eyebrow>span:last-child{color:var(--faint);letter-spacing:.1em}
.quiz-card h2{font-size:22px;line-height:1.45;font-weight:650;letter-spacing:-.01em;margin:17px 0 20px;max-width:560px}
.quiz-options{display:flex;flex-direction:column;gap:8px}
.quiz-option{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 15px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);font-size:12px;line-height:1.5;
  color:#dcebdf;cursor:pointer;transition:.2s;
}
.quiz-option:hover{border-color:rgba(217,255,125,.3);background:rgba(217,255,125,.045)}
.quiz-option .letter{
  width:23px;height:23px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-family:var(--display);font-size:10px;font-weight:700;color:var(--muted);
}
.quiz-option.correct{border-color:rgba(143,240,193,.5);background:rgba(143,240,193,.1);color:#e6fff4}
.quiz-option.correct .letter{background:var(--mint);color:#0a2418;border-color:transparent}
.quiz-option.wrong{border-color:rgba(255,143,124,.45);background:rgba(255,143,124,.08);color:#ffe6df}
.quiz-option.wrong .letter{background:var(--coral);color:#2a0d08;border-color:transparent}
.quiz-option.dim{opacity:.5}
.quiz-option:disabled{cursor:default}
.quiz-explain{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s ease,margin .3s;font-size:11px;line-height:1.7;color:var(--muted);border-left:2px solid var(--mint);padding-left:0}
.quiz-explain.show{max-height:160px;opacity:1;margin:16px 0 0;padding-left:14px}
.quiz-card .btn{width:100%;margin-top:20px}

/* final */
.final-card{width:min(720px,94vw);text-align:center}
.final-card .eyebrow{justify-content:center}
.final-hero{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:20px;text-align:left}
.final-ring{
  width:92px;height:92px;border-radius:50%;flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid rgba(217,255,125,.45);background:radial-gradient(circle at 35% 30%,rgba(217,255,125,.22),rgba(10,30,20,.4));
  box-shadow:0 0 50px rgba(217,255,125,.15),inset 0 0 30px rgba(217,255,125,.06);
}
.final-ring span{font-family:var(--display);font-size:36px;font-weight:800;color:var(--lime);line-height:1}
.final-ring small{font-family:var(--display);font-size:7px;letter-spacing:.16em;color:var(--faint);margin-top:3px}
.final-hero h2{font-family:var(--display);font-size:31px;font-weight:750;letter-spacing:-.03em;margin:0}
.final-hero p{font-size:11px;color:var(--muted);margin:5px 0 0;line-height:1.5}
.final-score{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:20px 0 2px}
.final-score span{font-family:var(--display);font-size:58px;font-weight:800;letter-spacing:-.04em;color:var(--lime);text-shadow:0 0 40px rgba(217,255,125,.25);font-variant-numeric:tabular-nums}
.final-score small{font-size:10px;color:var(--faint);letter-spacing:.12em}
.final-card .stat-grid{text-align:left}
.final-note{font-size:10.5px;line-height:1.7;color:var(--muted);margin:17px auto 0;max-width:520px}
.final-actions{display:flex;gap:9px;margin-top:20px}
.final-actions .btn{flex:1;margin:0}
.final-card .fineprint{margin-top:15px}
.final-stars{font-family:var(--display);font-size:16px;letter-spacing:.08em;color:var(--lime);margin:2px 0 14px;text-shadow:0 0 18px rgba(217,255,125,.3)}
.final-stars span{font-family:var(--sans);font-size:9px;letter-spacing:.14em;color:var(--faint);margin-left:5px}

/* campaign map */
.campaign-card{width:min(820px,94vw)}
.campaign-card h2{font-family:var(--display);font-size:34px;font-weight:750;letter-spacing:-.03em;margin:14px 0 0}
.campaign-lede{font-size:11.5px;line-height:1.7;color:var(--muted);margin:9px 0 18px;max-width:620px}
.campaign-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.campaign-summary div{padding:10px 13px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.campaign-summary span{display:block;font-size:8px;letter-spacing:.13em;color:var(--faint);text-transform:uppercase;margin-bottom:4px}
.campaign-summary b{font-family:var(--display);font-size:15px;font-weight:700}
.level-path{display:flex;flex-direction:column;gap:7px;max-height:46vh;overflow:auto;padding-right:4px}
.level-node{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 13px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:.2s;color:var(--text);
}
.level-node:hover:not(:disabled){background:rgba(217,255,125,.06);border-color:rgba(217,255,125,.28);transform:translateX(2px)}
.level-node.current{border-color:rgba(217,255,125,.42);background:linear-gradient(100deg,rgba(217,255,125,.1),rgba(217,255,125,.02))}
.level-node.done .node-index{background:rgba(143,240,193,.15);color:var(--mint);border-color:rgba(143,240,193,.35)}
.level-node.locked{opacity:.42;cursor:not-allowed}
.node-index{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-family:var(--display);font-size:13px;font-weight:800;color:var(--lime)}
.node-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.node-main b{font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node-main small{font-size:9px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node-tag{font-size:8px;color:var(--amber);border:1px solid rgba(255,196,107,.3);background:rgba(255,196,107,.08);padding:3px 7px;border-radius:20px;white-space:nowrap}
.node-stars{font-size:12px;letter-spacing:2px;color:var(--lime);white-space:nowrap}
.node-stars .off{color:rgba(255,255,255,.13)}
.node-grade{width:22px;text-align:center;font-family:var(--display);font-size:15px;font-weight:800;color:var(--mint)}
.level-node.locked .node-grade{visibility:hidden}
.campaign-actions{display:flex;gap:9px;margin-top:18px}
.campaign-actions .btn{flex:1}
.campaign-actions #campaignResetBtn{flex:0 0 auto;font-size:11px;opacity:.7}

/* responsive */
@media (max-width:1180px){
  .hud-top{grid-template-columns:210px minmax(300px,360px) 210px;gap:10px}
  .day-panel,.energy-panel{padding:13px 14px}
  .mood-panel{width:210px;padding:11px 12px}
  .mood-pct{display:none}
  .temp-read{font-size:46px}
  .device{width:76px}
  .key-hints{display:none}
  .forecast{width:300px;padding:18px}
  .start-main{width:min(620px,60vw)}
}
@media (max-width:900px){
  .hud-top{grid-template-columns:1fr 1fr;inset:12px 12px auto;gap:8px}
  .temp-panel{grid-column:1/-1;grid-row:2;padding:10px 14px}
  .temp-main{margin-top:2px}
  .temp-read{font-size:38px}
  .gauge{margin-top:5px}
  .mood-panel{display:none}
  .toasts{right:12px;top:auto;bottom:108px;width:min(300px,70vw)}
  .dock{bottom:10px;max-width:calc(100vw - 20px)}
  .device{width:60px;height:58px;gap:0}
  .device svg{width:16px;height:16px}
  .device .d-name{font-size:9px}
  .device .d-state{display:none}
  .device .d-key{top:3px;left:4px;font-size:6.5px}
  .hud-foot{display:none}
  .prompt{bottom:82px;font-size:11px}
  .forecast{display:none}
  .start-main{width:100%;max-width:600px}
  .start-screen{background:linear-gradient(90deg,rgba(3,12,9,.95),rgba(3,12,9,.72))}
  .start-grid{justify-content:center}
  .start-credit{display:none}
  .stat-grid{grid-template-columns:1fr 1fr}
  .report-card,.quiz-card,.final-card{padding:26px 22px}
  .report-top{gap:13px;flex-wrap:wrap}
  .stars{width:100%;text-align:right}
}
@media (max-width:620px){
  .day-panel{grid-column:1/-1}
  .energy-panel{grid-column:1/-1;grid-row:3}
  .temp-panel{grid-column:1/-1;grid-row:2}
  .hud-top{grid-template-columns:1fr;gap:6px}
  .day-panel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 12px}
  .day-row{margin-top:0;flex:1}
  .day-number{font-size:24px}
  .clock-row{margin-top:0;padding-top:0;border:0;flex:0 0 auto;gap:6px}
  .day-progress{width:100%;margin-top:0}
  .panel-eyebrow{display:none}
  .out-temp{display:none}
  .temp-panel{padding:8px 12px}
  .temp-read{font-size:30px}
  .temp-meta{font-size:8.5px}
  .energy-panel{display:none}
  .dock{gap:0;padding:4px;bottom:8px}
  .device{width:52px;height:48px}
  .device .d-name{font-size:8px}
  .device .d-key{display:none}
  .start-main h1 .huge-deg{font-size:100px}
  .title-line{font-size:52px}
  .goal-row{grid-template-columns:1fr}
  .start-lede{font-size:12px;margin-top:18px}
  .start-main .eyebrow{font-size:8px}
  .controls-line{display:none}
  .touch-note{display:block}
  .overlay{padding:10px 12px}
  .report-top h2{font-size:22px}
  .grade{width:64px;height:64px;font-size:32px}
  .quiz-card h2{font-size:18px}
  .final-hero{flex-direction:column;text-align:center;gap:12px}
  .final-actions{flex-direction:column}
}