/* NALAROO Hitung Kilat v1.0 — Soft Kawaii Hand-Drawn Storybook
   Intentionally replaces the inherited UbayBian neon/cosmic skins.
   Keep .reactor-* hooks for the existing gameplay integration. */
.reactor-overlay {
  background:rgba(47,66,52,.55);
  -webkit-backdrop-filter:blur(7px) saturate(.85);
  backdrop-filter:blur(7px) saturate(.85);
}
.reactor-shell {
  --reactor-ink:#415b49;
  --reactor-muted:#657665;
  --reactor-sage:#77997e;
  --reactor-brown:#8d7057;
  --reactor-paper:#fff9ee;
  --reactor-gold:#e5b860;
  color:var(--reactor-ink);
  width:min(1030px,96vw);
  min-height:min(670px,91dvh);
  max-height:94dvh;
  border:3px solid #bba27f;
  border-radius:32px;
  background:linear-gradient(165deg,#fff9ee 0%,#fbf4e7 57%,#edf2e6 100%);
  box-shadow:0 10px 0 rgba(102,78,51,.12),0 26px 68px rgba(36,46,33,.31),inset 0 0 0 4px rgba(255,255,255,.62);
  overflow:auto;
  overscroll-behavior:contain;
  font-family:'Nunito',system-ui,sans-serif;
}
.reactor-shell::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.55;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 6% 94%,rgba(141,172,136,.20),transparent 32%),
    radial-gradient(ellipse at 94% 92%,rgba(176,193,148,.20),transparent 33%),
    radial-gradient(ellipse at 80% 18%,rgba(244,220,172,.22),transparent 36%);
  background-size:auto;
  mask-image:none;
}
.reactor-shell :is(button,input):focus-visible {
  outline:3px solid #547e66;
  outline-offset:3px;
}
.reactor-top {
  padding:18px 28px 15px;
  gap:14px;
  background:rgba(223,235,215,.79);
  border-bottom:2px solid #c8d4bd;
  border-radius:27px 27px 0 0;
}
.reactor-brand{gap:14px;}
.reactor-bolt {
  width:56px;height:56px;flex:0 0 56px;
  border-radius:17px;
  border:2px solid #bd9b73;
  background:#fff6df url('assets/learning-quest/ui/quest-xp-star.svg') center / 83% no-repeat;
  box-shadow:0 4px 0 #dac6a4;
}
.reactor-kicker {
  margin:0 0 3px;color:#6a8568;font-size:11px;
  font-weight:900;letter-spacing:.17em;
}
.reactor-title {
  color:#47634f;font-weight:900;
  font-size:clamp(27px,3.1vw,37px);line-height:1.14;
  letter-spacing:-.02em;text-shadow:none;
}
.reactor-subtitle{margin-top:3px;color:#617664;font-size:13px;font-weight:700;}
.reactor-close {
  flex:0 0 auto;width:45px;height:45px;border:2px solid #dcc9a9;
  background:#fff7e9;color:#6a5948;
  box-shadow:0 3px 0 #dccbad;font-size:24px;font-weight:700;
}
.reactor-close:hover {transform:none;color:#495b49;background:#f5eedc;}
.reactor-stage{z-index:1;padding:17px 32px 25px;}
.reactor-stage::before{
  content:"";position:absolute;inset:10px 21px 17px;z-index:0;
  border:1px solid rgba(161,185,149,.45);border-radius:26px;
  background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(229,239,218,.16));
  pointer-events:none;
}
.reactor-view {
  position:relative;z-index:1;
  min-height:525px;
  width:100%;
  margin-inline:auto;
}
.reactor-view[hidden]{display:none!important;}
/* Intro: airy but deliberately compact. */
.reactor-ready {max-width:665px;padding:14px 18px;text-align:center;}
.reactor-ready-guide {
  position:absolute;right:-124px;top:28px;width:126px;height:146px;
  object-fit:contain;pointer-events:none;filter:drop-shadow(0 7px 4px rgba(93,72,51,.10));
}
.reactor-orb {
  width:98px;height:98px;margin:0 auto 14px;
  border:2px solid #cfb18b;border-radius:28px;
  background:#fff6df url('assets/learning-quest/ui/quest-timer.svg') center / 83% no-repeat;
  box-shadow:0 6px 0 #e2d0b0,0 12px 23px rgba(129,105,75,.10);
}
.reactor-orb::before,.reactor-orb::after{display:none;}
.reactor-ready h3 {
  font-size:clamp(34px,4.2vw,45px);
  color:#45634d;font-weight:900;
  letter-spacing:-.025em;line-height:1.13;
}
.reactor-ready-copy {margin:12px auto 17px;max-width:510px;color:#607462;font-size:16px;line-height:1.5;font-weight:700;}
.reactor-mission-chips{gap:8px;margin:0 0 18px;}
.reactor-chip {
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 13px;border:1.5px solid #d4c9ac;border-radius:999px;
  color:#54705b;background:#fff8ea;
  box-shadow:0 3px 0 rgba(187,166,131,.18);
  font-size:12px;font-weight:900;
}
.reactor-chip::before {
  content:"";display:block;width:19px;height:19px;flex:0 0 auto;
  background:url('assets/learning-quest/ui/quest-xp-star.svg') center / contain no-repeat;
}
.reactor-chip-time::before {background-image:url('assets/learning-quest/ui/quest-timer.svg');}
.reactor-chip-best::before {background-image:url('assets/learning-quest/ui/quest-xp-star.svg');}
.reactor-xp-card {
  width:min(530px,100%);margin-bottom:18px;
  padding:13px 17px 15px;border-radius:19px;
  border:2px solid #d8c7a8;background:rgba(255,252,242,.92);
  box-shadow:0 5px 0 rgba(180,151,106,.12);
}
.reactor-xp-row {color:#5b6d59;font-size:13px;gap:10px;}
.reactor-xp-row strong {color:#977240;font-weight:900;}
.reactor-xp-track {
  height:13px;border:1px solid #c7d3b7;
  border-radius:999px;background:#e8eddb;box-shadow:inset 0 2px 4px rgba(77,95,67,.08);
}
.reactor-xp-fill{
  border-radius:999px;background:linear-gradient(90deg,#86ae89,#bfd69d);
  box-shadow:none;
}
.reactor-main-btn {
  min-width:218px;min-height:50px;padding:14px 23px;
  border:2px solid #698975;border-radius:16px;
  color:#fffdf4;background:#789a80;box-shadow:0 5px 0 #526e57;
  font:900 16px/1.15 'Nunito',system-ui,sans-serif;
  transition:background .16s,transform .16s;
}
.reactor-main-btn:hover:not(:disabled) {background:#658c72;box-shadow:0 5px 0 #526e57;transform:translateY(-1px);}
.reactor-main-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #526e57;}
.reactor-main-btn:disabled {opacity:.55;cursor:wait;filter:none;box-shadow:0 4px 0 #526e57;}
.reactor-save-note {margin:12px 0 0;color:#667666;font-size:12px;font-weight:700;}
.reactor-save-note.error{color:#9d4e47;}
/* Gameplay: score + timer + question remain the visual hierarchy. */
.reactor-play{max-width:790px;}
.reactor-hud {
  width:min(570px,100%);margin:0 auto 10px;
  grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr);gap:14px;
}
.reactor-stat {
  min-height:90px;padding:13px 18px;
  border:2px solid #cabb9f;border-radius:18px;
  color:#4b654f;background:#fff8e9;
  box-shadow:0 5px 0 rgba(155,126,90,.15);
}
.reactor-stat.right{text-align:right;}
.reactor-stat-label {color:#6b7a60;font-size:12px;letter-spacing:.08em;font-weight:900;}
.reactor-stat-value {color:#4a634e;font-size:39px;font-weight:900;text-shadow:none;}
.reactor-timer {
  --ring:#86a98b;
  width:120px;height:120px;padding:8px;
  background:conic-gradient(var(--ring) calc(var(--progress)*1%),#dfdec9 0);
  border:2px solid #b9a080;
  box-shadow:0 5px 0 #d8c39e,0 8px 15px rgba(94,85,62,.08);
}
.reactor-timer-core {
  background:#fffaee;border:2px solid #ddcfaf;
  box-shadow:inset 0 2px 4px rgba(141,114,78,.06);
}
.reactor-timer-number {font-size:45px;color:#45624e;font-weight:900;text-shadow:none;}
.reactor-timer-unit{color:#647a60;font-size:11px;font-weight:900;}
.reactor-play.is-warning .reactor-timer{--ring:#d9a74d;animation:none;}
.reactor-play.is-critical .reactor-timer{--ring:#c97d6c;animation:none;}
.reactor-final-label{margin:0 0 4px;color:#a16c41;height:22px;letter-spacing:.08em;}
.reactor-question-card {
  width:min(725px,100%);min-height:170px;
  display:grid;place-items:center;margin:0 auto 18px;
  padding:22px;border:3px solid #b99a73;border-radius:25px;
  background:linear-gradient(160deg,#fffbef,#f3ead7);
  box-shadow:0 7px 0 #dfc8a5,0 13px 24px rgba(97,76,54,.10);
}
.reactor-question-card::before{display:none;}
.reactor-question {
  color:#3e5848;font-size:clamp(48px,6vw,68px);
  font-weight:900;line-height:1.2;letter-spacing:.01em;text-shadow:none;
  font-variant-numeric:tabular-nums;
}
.reactor-answer-dock {
  width:min(635px,100%);max-width:635px;
  grid-template-columns:minmax(0,1fr) 148px;gap:12px;
}
.reactor-input{
  min-height:56px;padding:13px 15px;
  background:#fffdf5;border:2px solid #b8c7ac;border-radius:16px;
  color:#405b48;box-shadow:inset 0 2px 2px rgba(75,100,65,.04);
  font:900 22px/1.15 'Nunito',system-ui,sans-serif;
}
.reactor-input::placeholder{color:#8c9988;font-size:15px;}
.reactor-input:focus{
  border-color:#729477;box-shadow:0 0 0 4px rgba(133,169,139,.20);
}
.reactor-submit {
  min-height:56px;border:2px solid #ae7a54;border-radius:16px;
  background:#d59b6b;color:#fffdf6;
  box-shadow:0 5px 0 #a67551;
  font:900 16px/1.1 'Nunito',system-ui,sans-serif;
}
.reactor-submit:hover{background:#c98a5b;box-shadow:0 5px 0 #a67551;transform:translateY(-1px);}
.reactor-play-meta{width:min(635px,100%);max-width:635px;color:#607460;font-size:12px;}
.reactor-key{color:#607460;background:#f8f1e2;border:1px solid #d6c8aa;box-shadow:none;font-size:11px;}
.reactor-play-guide{
  position:absolute;right:-114px;top:46%;width:99px;height:120px;
  object-fit:contain;pointer-events:none;
}
.reactor-flash{
  top:45%;z-index:8;border-radius:16px;
  font-size:15px;font-weight:900;letter-spacing:0;
  box-shadow:0 4px 0 rgba(111,86,59,.12);
}
.reactor-flash.correct {color:#376a49;background:#dcebd5;border:2px solid #9ec4a2;}
.reactor-flash.wrong {color:#9c5548;background:#f6e0d6;border:2px solid #d9a497;}
.reactor-play.flash-correct .reactor-question-card{animation:none;border-color:#83a787;}
.reactor-play.flash-wrong .reactor-question-card{animation:none;border-color:#cda091;}
/* End screen: character sits in the layout, not on top of the panel. */
.reactor-result{max-width:690px;padding:4px 16px 8px;text-align:center;}
.reactor-result::before{display:none;}
.reactor-result-guide{width:104px;height:110px;object-fit:contain;margin:0 auto 3px;}
.reactor-complete-badge {
  margin:0 auto 7px;padding:7px 13px;border:1px solid #d7c39f;
  background:#fff1d0;color:#94703c;border-radius:999px;
  font-size:11px;font-weight:900;letter-spacing:.09em;
}
.reactor-result h3 {font-size:clamp(32px,4vw,42px);color:#45624c;font-weight:900;text-shadow:none;}
.reactor-result-score {
  margin:5px 0 0;font-size:clamp(62px,8vw,84px);
  color:#45634d;text-shadow:none;line-height:1;
}
.reactor-result-caption {margin:2px 0 11px;color:#657a64;font-size:14px;}
.reactor-new-best {
  margin-bottom:12px;color:#846439;background:#fff0c6;
  border:1px solid #d8b476;border-radius:999px;
  box-shadow:0 4px 0 #eddbb8;animation:none;
  padding:6px 12px;font-size:12px;
}
.reactor-new-best[hidden]{display:none!important;}
.reactor-result-grid {width:min(580px,100%);gap:10px;margin:0 auto 17px;}
.reactor-result-card {
  border:2px solid #d6c4a4;border-radius:17px;padding:12px 9px;
  background:#fffbf1;box-shadow:0 4px 0 rgba(158,124,85,.12);
}
.reactor-result-card:nth-child(2){background:#e9f0df;border-color:#b9cba9;}
.reactor-result-card span{color:#6c795f;font-size:10px;font-weight:900;letter-spacing:.02em;}
.reactor-result-card strong{font-size:29px;color:#48634f;font-weight:900;}
.reactor-result-actions{gap:11px;}
.reactor-ghost-btn{
  min-height:50px;padding:13px 20px;border:2px solid #c8ac8a;
  border-radius:16px;color:#645c4b;background:#fff6e5;
  box-shadow:0 4px 0 #ddc8a7;
  font:900 15px/1.2 'Nunito',system-ui,sans-serif;
}
.reactor-ghost-btn:hover{background:#f5ead7;border-color:#bd9d74;transform:none;}
@media (max-width:1000px) {
  .reactor-ready-guide{right:-78px;width:92px;}
  .reactor-play-guide{right:-75px;width:70px;}
}
@media (max-width:800px) {
  .reactor-ready-guide,.reactor-play-guide{display:none;}
  .reactor-shell{min-height:min(670px,94dvh);}
}
@media (max-width:760px) {
  .reactor-overlay{padding:0;align-items:stretch;}
  .reactor-shell {
    width:100%;height:100dvh;min-height:100dvh;max-height:100dvh;
    border:0;border-radius:0;box-shadow:none;
  }
  .reactor-top {padding:12px 15px;border-radius:0;gap:10px;}
  .reactor-brand{gap:10px;}
  .reactor-bolt{width:43px;height:43px;flex-basis:43px;border-radius:12px;}
  .reactor-title{font-size:25px;}
  .reactor-kicker{font-size:9px;margin-bottom:0;}
  .reactor-subtitle{font-size:11px;line-height:1.25;}
  .reactor-close{width:42px;height:42px;}
  .reactor-stage{padding:13px 13px 20px;}
  .reactor-stage::before{inset:7px 6px 11px;border-radius:18px;}
  .reactor-view{min-height:calc(100dvh - 107px);padding:12px 8px;}
  .reactor-ready{max-width:560px;}
  .reactor-orb{width:82px;height:82px;margin-bottom:15px;border-radius:21px;}
  .reactor-ready h3{font-size:36px;}
  .reactor-ready-copy{margin:10px auto 16px;font-size:15px;}
  .reactor-mission-chips{margin-bottom:16px;gap:6px;}
  .reactor-chip{padding:6px 10px;font-size:11px;}
  .reactor-chip::before{width:17px;height:17px;}
  .reactor-xp-card{margin-bottom:20px;}
  .reactor-hud{grid-template-columns:minmax(0,1fr) 103px minmax(0,1fr);gap:9px;margin-bottom:16px;}
  .reactor-stat{min-height:77px;padding:11px 9px;border-radius:14px;}
  .reactor-stat-label{font-size:10px;}
  .reactor-stat-value{font-size:28px;}
  .reactor-timer{width:100px;height:100px;padding:7px;}
  .reactor-timer-number{font-size:36px;}
  .reactor-final-label{height:20px;font-size:11px;margin:0 0 2px;}
  .reactor-question-card{min-height:139px;margin-bottom:17px;padding:20px 9px;border-radius:18px;}
  .reactor-question{font-size:clamp(34px,10vw,55px);}
  .reactor-answer-dock{grid-template-columns:minmax(0,1fr) 98px;gap:8px;}
  .reactor-input{font-size:20px;padding:12px 8px;}
  .reactor-submit{padding:12px 8px;}
  .reactor-play-meta{font-size:11px;text-align:center;justify-content:center;margin-top:14px;}
  .reactor-play-meta .reactor-key{display:none;}
  .reactor-result-guide{height:90px;width:90px;}
  .reactor-result h3{font-size:34px;}
  .reactor-result-score{font-size:68px;}
  .reactor-result-grid{gap:7px;margin-bottom:16px;}
  .reactor-result-card{padding:12px 5px;}
  .reactor-result-card span{font-size:9px;}
  .reactor-result-card strong{font-size:25px;}
  .reactor-result-actions{gap:9px;}
  .reactor-result-actions .reactor-main-btn{min-width:0;}
  .reactor-result-actions :is(.reactor-main-btn,.reactor-ghost-btn){flex:1 1 130px;font-size:13px;padding:12px 9px;}
  .reactor-save-note{font-size:11px;}
}
@media (max-width:350px){
  .reactor-title{font-size:23px;}
  .reactor-ready h3{font-size:32px;}
  .reactor-question{font-size:32px;}
  .reactor-chip{font-size:10px;padding:6px 8px;}
}
@media (max-height:690px) and (min-width:761px) {
  .reactor-shell{min-height:0;max-height:94dvh;}
  .reactor-stage{padding:10px 27px 15px;}
  .reactor-view{min-height:420px;}
  .reactor-orb{width:75px;height:75px;}
  .reactor-ready-copy{margin:9px auto;}
  .reactor-mission-chips{margin-bottom:10px;}
  .reactor-xp-card{margin-bottom:12px;}
  .reactor-result-guide{height:73px;}
  .reactor-hud{margin-bottom:5px;}
  .reactor-question-card{min-height:120px;margin-bottom:10px;}
}
@media (prefers-reduced-motion:reduce){
  .reactor-overlay,.reactor-score-pop,.reactor-question.is-entering,.reactor-flash.show,
  .reactor-main-btn,.reactor-submit,.reactor-ghost-btn {animation:none!important;transition:none!important;}
}

/* Hitung Kilat v1.1: retain the approved Storybook skin. */
.reactor-difficulty{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px 12px;width:min(100%,430px);margin:0 auto 15px;text-align:left;}
.reactor-band,.reactor-classic{grid-column:1/-1;}
.reactor-band{color:#3e5948;font-size:16px;}
.reactor-difficulty label{font-size:14px;font-weight:700;color:#244665;}
.reactor-challenge{font:700 15px Nunito,sans-serif;color:#244665;background:#fff8ec;border:1px solid #c69b6c;border-radius:12px;padding:10px 14px;min-height:44px;}
.reactor-classic{font-size:13px;color:#526950;margin:2px 0;}
.reactor-ready .reactor-orb{width:70px;height:70px;margin-bottom:12px;}
.reactor-ready h3{font-size:clamp(29px,4vw,42px);}
.reactor-ready-copy{margin:10px auto 15px;}
.reactor-ready .reactor-save-note{max-width:460px;}
.reactor-challenge:focus-visible{outline:3px solid #79521f;outline-offset:3px;}
.reactor-play-meta{flex-wrap:wrap;}
.reactor-result-actions{flex-wrap:wrap;}
@media(max-width:760px){
  .reactor-ready .reactor-orb{width:52px;height:52px;margin-bottom:10px;}
  .reactor-ready-copy{font-size:14px;}
  .reactor-difficulty{margin-bottom:12px;}
  .reactor-chip{font-size:12px;}
  .reactor-save-note{font-size:13px;}
}

@media(max-width:1100px){.reactor-ready-guide,.reactor-play-guide{display:none;}}