/* UbayBian Brain Games v2 · Math Reactor · visual polish */
.reactor-overlay{
  position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
  padding:clamp(14px,3vw,36px);
  background:
    radial-gradient(circle at 14% 10%,rgba(38,180,235,.24),transparent 34%),
    radial-gradient(circle at 86% 84%,rgba(246,185,52,.18),transparent 30%),
    rgba(4,27,52,.86);
  backdrop-filter:blur(18px) saturate(122%);
  -webkit-backdrop-filter:blur(18px) saturate(122%);
  animation:reactorFade .22s ease-out both;
}
.reactor-shell{
  --reactor-blue:#168fe8;
  --reactor-cyan:#26b4eb;
  --reactor-orange:#ff6b32;
  --reactor-gold:#f6b934;
  --reactor-green:#17a673;
  --reactor-coral:#e95662;
  --reactor-ink:#17354d;
  --reactor-muted:#627f94;
  position:relative;width:min(1080px,96vw);min-height:min(720px,90vh);max-height:92vh;
  overflow:auto;border:1px solid rgba(255,255,255,.78);border-radius:36px;
  color:var(--reactor-ink);
  background:
    radial-gradient(circle at 50% 38%,rgba(255,255,255,1) 0%,rgba(247,252,255,.98) 36%,rgba(233,244,251,.98) 100%);
  box-shadow:0 30px 90px rgba(0,28,61,.43),inset 0 1px 0 rgba(255,255,255,.95);
}
.reactor-shell:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.38;
  background-image:
    linear-gradient(rgba(22,143,232,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,143,232,.04) 1px,transparent 1px),
    radial-gradient(circle at 68% 35%,rgba(38,180,235,.10),transparent 30%),
    radial-gradient(circle at 30% 78%,rgba(246,185,52,.08),transparent 28%);
  background-size:32px 32px,32px 32px,auto,auto;
  mask-image:linear-gradient(to bottom,#000,transparent 82%);
}
.reactor-top{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:26px 28px 12px;
}
.reactor-brand{display:flex;align-items:center;gap:15px;min-width:0;}
.reactor-bolt{
  width:58px;height:58px;display:grid;place-items:center;flex:0 0 auto;border-radius:19px;
  font-size:28px;background:linear-gradient(145deg,#dcf5ff,#fff5df);
  box-shadow:inset 0 0 0 1px rgba(22,143,232,.10),0 10px 24px rgba(16,110,184,.12),0 0 28px rgba(38,180,235,.10);
}
.reactor-kicker{margin:0 0 3px;font-size:12px;font-weight:700;letter-spacing:.16em;color:#477b9e;}
.reactor-title{margin:0;font-size:clamp(30px,3vw,42px);line-height:1.03;font-weight:800;letter-spacing:-.035em;color:#17354d;}
.reactor-subtitle{margin:6px 0 0;font-size:15px;color:#627f94;font-weight:600;}
.reactor-close{
  width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  color:#496a82;background:#edf6fb;font-size:25px;line-height:1;transition:.18s ease;
}
.reactor-close:hover{transform:rotate(6deg) scale(1.04);background:#e3f1f8;color:#173b55;}
.reactor-stage{position:relative;z-index:1;padding:8px 34px 34px;}
.reactor-view{min-height:550px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.reactor-view[hidden]{display:none!important;}

/* ready */
.reactor-ready{text-align:center;max-width:760px;margin:auto;}
.reactor-orb{
  position:relative;width:110px;height:110px;margin:0 auto 18px;border-radius:34px;display:grid;place-items:center;
  font-size:48px;background:linear-gradient(145deg,#dcf6ff 10%,#fff6df 88%);
  box-shadow:0 18px 46px rgba(20,115,179,.16),0 0 36px rgba(38,180,235,.12),inset 0 0 0 1px rgba(255,255,255,.88);
}
.reactor-orb:before{content:"";position:absolute;inset:20%;border-radius:22px;background:radial-gradient(circle,rgba(255,107,50,.16),transparent 68%);filter:blur(4px);}
.reactor-orb:after{content:"";position:absolute;inset:-10px;border:1px solid rgba(38,180,235,.22);border-radius:42px;animation:reactorOrbit 3.2s ease-in-out infinite;}
.reactor-ready h3{margin:0;font-size:clamp(42px,4.4vw,58px);line-height:1;font-weight:800;letter-spacing:-.045em;color:#17354d;}
.reactor-ready-copy{max-width:600px;margin:15px auto 24px;color:#627f94;font-size:18px;line-height:1.55;font-weight:600;}
.reactor-mission-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 26px;}
.reactor-chip{padding:9px 14px;border-radius:999px;background:#e5f6ff;color:#0f6da9;font-size:13px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(22,143,232,.12),0 5px 16px rgba(22,143,232,.05);}
.reactor-xp-card{width:min(580px,100%);margin:0 auto 27px;padding:16px 18px;border-radius:20px;text-align:left;background:rgba(255,255,255,.82);border:1px solid #d7e9f3;box-shadow:0 10px 30px rgba(31,91,132,.08);}
.reactor-xp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:14px;font-weight:600;color:#55768e;}
.reactor-xp-row strong{color:#173d58;font-size:15px;font-weight:800;}
.reactor-xp-track{height:10px;overflow:hidden;border-radius:999px;background:#dfeef5;}
.reactor-xp-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#168fe8,#26b4eb);transition:width .35s ease;box-shadow:0 0 16px rgba(38,180,235,.38);}
.reactor-main-btn{
  min-width:220px;border:0;border-radius:18px;padding:16px 26px;cursor:pointer;
  color:white;background:linear-gradient(135deg,#ff8437,#ff642e);font:800 17px/1 inherit;
  box-shadow:0 13px 30px rgba(255,107,50,.27);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.reactor-main-btn:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 17px 36px rgba(255,107,50,.34);}
.reactor-main-btn:disabled{opacity:.55;cursor:wait;transform:none;filter:none;}

/* playing */
.reactor-play{width:100%;max-width:860px;margin:auto;}
.reactor-hud{display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;gap:22px;margin:4px 0 24px;}
.reactor-stat{min-height:92px;padding:15px 18px;border-radius:23px;background:rgba(255,255,255,.82);border:1px solid #d7e9f3;box-shadow:0 12px 34px rgba(25,83,122,.07);}
.reactor-stat.right{text-align:right;}
.reactor-stat-label{display:block;margin-bottom:5px;color:#67879d;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.reactor-stat-value{display:block;font-size:40px;font-weight:800;letter-spacing:-.045em;color:#17354d;}
.reactor-score-pop{animation:reactorPop .28s cubic-bezier(.2,.8,.3,1.35);}
.reactor-timer-wrap{display:grid;place-items:center;}
.reactor-timer{
  --progress:100;--ring:#26b4eb;
  width:132px;height:132px;padding:9px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--ring) calc(var(--progress)*1%),rgba(24,130,190,.12) 0);
  box-shadow:0 16px 42px rgba(8,126,195,.18),0 0 0 8px rgba(38,180,235,.07),0 0 34px rgba(38,180,235,.10);
  transition:background .3s ease,transform .2s ease;
}
.reactor-timer-core{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#fff,#edf9ff);box-shadow:inset 0 0 0 1px rgba(21,151,220,.09);}
.reactor-timer-number{font-size:52px;font-weight:800;letter-spacing:-.055em;line-height:.9;color:#17354d;}
.reactor-timer-unit{display:block;margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.14em;color:#67879d;text-transform:uppercase;text-align:center;}
.reactor-play.is-warning .reactor-timer{--ring:#f0a53a;animation:reactorPulse 1s ease-in-out infinite;}
.reactor-play.is-critical .reactor-timer{--ring:#e95662;animation:reactorPulse .55s ease-in-out infinite;}
.reactor-final-label{height:22px;margin:-8px 0 4px;text-align:center;color:#db6439;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;}
.reactor-question-card{
  position:relative;overflow:hidden;margin:0 auto 20px;padding:31px 24px;border-radius:28px;text-align:center;
  background:
    radial-gradient(circle at 82% 18%,rgba(38,180,235,.11),transparent 26%),
    linear-gradient(145deg,#ffffff,#f4fbff);
  border:1px solid #d5e8f3;
  box-shadow:0 18px 48px rgba(20,81,123,.10),0 0 30px rgba(38,180,235,.04);
}
.reactor-question-card:before{content:"";position:absolute;inset:auto -40px -70px auto;width:160px;height:160px;border-radius:50%;background:rgba(246,185,52,.055);}
.reactor-question{position:relative;font-size:clamp(54px,6vw,70px);font-weight:800;letter-spacing:-.05em;color:#17354d;transition:.18s ease;}
.reactor-question.is-entering{animation:reactorQuestion .22s ease-out;}
.reactor-answer-dock{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin:auto;max-width:720px;}
.reactor-input{
  width:100%;min-width:0;border:2px solid #acd5e9;border-radius:20px;padding:16px 19px;
  color:#17354d;background:rgba(255,255,255,.94);font:800 25px/1.1 inherit;text-align:center;outline:none;
  box-shadow:inset 0 2px 6px rgba(28,97,143,.04);transition:.18s ease;
}
.reactor-input::placeholder{font-size:17px;font-weight:600;color:#7f9bad;}
.reactor-input:focus{border-color:#26b4eb;box-shadow:0 0 0 5px rgba(38,180,235,.12),0 10px 30px rgba(18,109,166,.08);}
.reactor-submit{border:0;border-radius:18px;padding:17px 24px;cursor:pointer;background:linear-gradient(135deg,#168fe8,#26b4eb);color:#fff;font:800 15px/1 inherit;box-shadow:0 9px 22px rgba(22,143,232,.20);transition:.16s ease;}
.reactor-submit:hover{transform:translateY(-1px);filter:saturate(1.08);box-shadow:0 12px 26px rgba(22,143,232,.27);}
.reactor-play-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:720px;margin:13px auto 0;color:#627f94;font-size:14px;font-weight:600;}
.reactor-key{padding:6px 9px;border:1px solid #d2e5ef;border-radius:8px;background:rgba(255,255,255,.88);color:#4f7086;box-shadow:0 2px 0 #dceaf1;font-size:12px;font-weight:700;}
.reactor-flash{position:absolute;left:50%;top:47%;z-index:7;transform:translate(-50%,-50%) scale(.75);padding:12px 18px;border-radius:999px;opacity:0;pointer-events:none;font-size:16px;font-weight:800;letter-spacing:.03em;box-shadow:0 15px 38px rgba(0,0,0,.15);}
.reactor-flash.show{animation:reactorFlash .65s ease-out both;}
.reactor-flash.correct{color:#087d4a;background:#d9f8e9;border:1px solid #a9ebcd;}
.reactor-flash.wrong{color:#b82d43;background:#ffe2e6;border:1px solid #ffc1ca;}
.reactor-play.flash-correct .reactor-question-card{animation:reactorGlowGreen .34s ease-out;}
.reactor-play.flash-wrong .reactor-question-card{animation:reactorShake .26s ease-out;}

/* result */
.reactor-result{position:relative;text-align:center;max-width:760px;margin:auto;}
.reactor-result:before{content:"";position:absolute;left:50%;top:44%;width:360px;height:260px;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle,rgba(246,185,52,.12) 0%,rgba(38,180,235,.07) 36%,transparent 72%);filter:blur(5px);}
.reactor-complete-badge{position:relative;display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;padding:8px 13px;border-radius:999px;background:#e3f6ff;color:#0d6fae;font-size:12px;font-weight:700;letter-spacing:.11em;}
.reactor-result h3{position:relative;margin:0;font-size:clamp(34px,4vw,46px);font-weight:800;letter-spacing:-.035em;color:#17354d;}
.reactor-result-score{position:relative;margin:12px 0 0;font-size:clamp(88px,9vw,106px);font-weight:800;line-height:.9;letter-spacing:-.06em;color:#17354d;text-shadow:0 9px 28px rgba(20,91,137,.10);}
.reactor-result-caption{position:relative;margin:11px 0 24px;color:#627f94;font-size:16px;font-weight:600;}
.reactor-new-best{position:relative;display:inline-flex;align-items:center;gap:7px;margin-bottom:22px;padding:9px 14px;border-radius:999px;color:#7b5200;background:#fff1b8;font-size:13px;font-weight:800;animation:reactorTrophy .7s cubic-bezier(.2,.8,.3,1.25) both;box-shadow:0 8px 20px rgba(246,185,52,.16);}
.reactor-result-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 auto 25px;}
.reactor-result-card{padding:18px 13px;border-radius:20px;background:rgba(255,255,255,.84);border:1px solid #d8e9f2;box-shadow:0 10px 28px rgba(28,83,120,.07);}
.reactor-result-card span{display:block;color:#607f94;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.reactor-result-card strong{display:block;margin-top:8px;color:#17354d;font-size:32px;font-weight:800;}
.reactor-result-actions{position:relative;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.reactor-ghost-btn{border:1px solid #d1e4ee;border-radius:18px;padding:15px 24px;cursor:pointer;background:rgba(255,255,255,.92);color:#496b82;font:700 15px/1 inherit;transition:.16s ease;}
.reactor-ghost-btn:hover{transform:translateY(-1px);background:#fff;border-color:#bed9e7;}
.reactor-save-note{position:relative;min-height:22px;margin:14px 0 0;color:#627f94;font-size:14px;font-weight:600;}
.reactor-save-note.error{color:#c93b50;}

@keyframes reactorFade{from{opacity:0}to{opacity:1}}
@keyframes reactorOrbit{0%,100%{transform:scale(.96);opacity:.35}50%{transform:scale(1.04);opacity:.82}}
@keyframes reactorPop{0%{transform:scale(.9)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes reactorPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes reactorQuestion{from{opacity:.2;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes reactorFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}72%{opacity:1;transform:translate(-50%,-58%) scale(1)}100%{opacity:0;transform:translate(-50%,-72%) scale(.96)}}
@keyframes reactorGlowGreen{50%{box-shadow:0 18px 52px rgba(23,166,115,.22),inset 0 0 0 2px rgba(23,166,115,.28)}}
@keyframes reactorShake{0%,100%{transform:none}30%{transform:translateX(-5px)}65%{transform:translateX(5px)}}
@keyframes reactorTrophy{0%{opacity:0;transform:translateY(7px) scale(.75)}65%{transform:translateY(-2px) scale(1.08)}100%{opacity:1;transform:none}}

@media(max-width:760px){
  .reactor-overlay{padding:0;align-items:stretch;}
  .reactor-shell{width:100%;min-height:100dvh;max-height:100dvh;border-radius:0;border:0;}
  .reactor-top{padding:18px 18px 8px;}
  .reactor-bolt{width:48px;height:48px;border-radius:16px;font-size:23px;}
  .reactor-title{font-size:27px;}
  .reactor-subtitle{font-size:12px;}
  .reactor-close{width:43px;height:43px;}
  .reactor-stage{padding:6px 17px 24px;}
  .reactor-view{min-height:calc(100dvh - 95px);}
  .reactor-orb{width:96px;height:96px;font-size:42px;}
  .reactor-ready h3{font-size:42px;}
  .reactor-ready-copy{font-size:16px;}
  .reactor-hud{grid-template-columns:1fr 112px 1fr;gap:9px;margin-bottom:18px;}
  .reactor-stat{min-height:74px;padding:11px;border-radius:17px;}
  .reactor-stat-label{font-size:10px;}
  .reactor-stat-value{font-size:30px;}
  .reactor-timer{width:104px;height:104px;padding:7px;}
  .reactor-timer-number{font-size:38px;}
  .reactor-question-card{padding:28px 14px;border-radius:23px;}
  .reactor-question{font-size:clamp(42px,13vw,60px);}
  .reactor-answer-dock{grid-template-columns:1fr;}
  .reactor-submit{width:100%;}
  .reactor-play-meta{justify-content:center;font-size:13px;}
  .reactor-play-meta .reactor-key{display:none;}
  .reactor-result-score{font-size:88px;}
  .reactor-result-grid{gap:7px;}
  .reactor-result-card{padding:14px 7px;}
  .reactor-result-card span{font-size:10px;}
  .reactor-result-card strong{font-size:24px;}
}
@media(prefers-reduced-motion:reduce){
  .reactor-overlay,.reactor-orb:after,.reactor-score-pop,.reactor-play.is-warning .reactor-timer,.reactor-play.is-critical .reactor-timer,.reactor-question.is-entering,.reactor-flash.show,.reactor-play.flash-correct .reactor-question-card,.reactor-play.flash-wrong .reactor-question-card,.reactor-new-best{animation:none!important;}
}