/* UbayBian Math Reactor v0.4.5 · high-contrast visual pass */

/* Make the arena denser and more intentional on desktop */
.reactor-shell{
  width:min(1040px,95vw);
  min-height:min(660px,88vh);
  max-height:90vh;
  border-radius:34px;
  background:
    radial-gradient(circle at 52% 32%,rgba(255,255,255,1) 0%,rgba(245,251,255,.99) 38%,rgba(225,240,249,.98) 100%);
}
.reactor-top{padding:24px 28px 8px;}
.reactor-stage{padding:4px 36px 30px;}
.reactor-view{min-height:500px;}
.reactor-title{font-size:clamp(29px,2.8vw,39px);font-weight:800;}
.reactor-subtitle{font-size:15px;font-weight:500;color:#66839a;}
.reactor-kicker{font-size:12px;font-weight:700;color:#39799f;}

/* Ready: slightly smaller type, stronger visual focus */
.reactor-ready{max-width:700px;padding:18px 28px 12px;}
.reactor-orb{
  width:96px;height:96px;margin-bottom:16px;border-radius:30px;font-size:43px;
  background:linear-gradient(145deg,#d8f5ff 0%,#eefaff 45%,#fff1d3 100%);
  box-shadow:0 16px 42px rgba(15,116,181,.17),0 0 0 8px rgba(38,180,235,.045),0 0 38px rgba(255,107,50,.08);
}
.reactor-ready h3{font-size:clamp(38px,4vw,50px);font-weight:800;}
.reactor-ready-copy{font-size:17px;font-weight:500;line-height:1.5;color:#5e7b91;margin:13px auto 20px;}
.reactor-chip{
  background:linear-gradient(180deg,#ecf9ff,#dff4ff);
  color:#0b659d;font-size:13px;font-weight:700;
  border:1px solid rgba(38,180,235,.19);
}
.reactor-xp-card{background:rgba(255,255,255,.9);border-color:#cfe4ef;box-shadow:0 12px 28px rgba(20,82,122,.08);}
.reactor-save-note{font-size:13px!important;font-weight:500!important;color:#647f92!important;}

/* HUD gets individual identities */
.reactor-hud{grid-template-columns:1fr 154px 1fr;gap:20px;margin-bottom:18px;}
.reactor-stat{position:relative;overflow:hidden;min-height:88px;padding:14px 18px;background:rgba(255,255,255,.9);}
.reactor-stat:first-child{border-color:rgba(38,180,235,.33);background:linear-gradient(145deg,#f8fdff,#e9f8ff);}
.reactor-stat.right{border-color:rgba(246,185,52,.34);background:linear-gradient(145deg,#fffef8,#fff6dc);}
.reactor-stat:first-child:before,.reactor-stat.right:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:5px;}
.reactor-stat:first-child:before{background:linear-gradient(#26b4eb,#168fe8);}
.reactor-stat.right:before{background:linear-gradient(#f6b934,#ff8a35);}
.reactor-stat-label{font-size:11px;font-weight:700;color:#5c8097;}
.reactor-stat-value{font-size:38px;font-weight:800;}
.reactor-timer{box-shadow:0 15px 38px rgba(18,143,208,.20),0 0 0 9px rgba(38,180,235,.09),0 0 46px rgba(38,180,235,.14);}
.reactor-timer-number{font-size:50px;}

/* Dark reactor question panel: the biggest visible change */
.reactor-question-card{
  width:min(560px,100%);
  margin:0 auto 22px;
  padding:31px 24px 34px;
  border:1px solid rgba(80,211,255,.30);
  background:
    radial-gradient(circle at 86% 18%,rgba(65,204,255,.20),transparent 27%),
    radial-gradient(circle at 12% 100%,rgba(255,183,54,.13),transparent 30%),
    linear-gradient(135deg,#123a57 0%,#0c5275 56%,#0a3654 100%);
  box-shadow:0 20px 48px rgba(5,44,74,.24),inset 0 1px 0 rgba(255,255,255,.06),0 0 34px rgba(38,180,235,.08);
}
.reactor-question-card:before{width:150px;height:150px;right:-48px;bottom:-78px;background:rgba(246,185,52,.09);border:1px solid rgba(246,185,52,.07);}
.reactor-question{font-size:clamp(50px,5.5vw,66px);font-weight:800;color:#fff;letter-spacing:-.045em;text-shadow:0 5px 18px rgba(0,0,0,.16);}

.reactor-answer-dock{max-width:620px;gap:10px;}
.reactor-input{font-size:23px;font-weight:700;border-color:#87cfe9;background:#fff;}
.reactor-input::placeholder{font-size:16px;font-weight:500;color:#819bae;}
.reactor-submit{
  min-width:96px;background:linear-gradient(135deg,#15a8e5,#0789cf);font-size:15px;font-weight:700;
  box-shadow:0 10px 24px rgba(10,145,211,.23);
}
.reactor-play-meta{max-width:620px;font-size:13px;font-weight:500;color:#5e7d93;}
.reactor-key{font-size:11px;font-weight:600;}

/* Results: score becomes a designed object instead of just a big number */
.reactor-result{max-width:690px;}
.reactor-complete-badge{background:linear-gradient(180deg,#fff4dc,#ffe9bf);color:#9b5e08;border:1px solid rgba(246,185,52,.28);font-weight:700;}
.reactor-result h3{font-size:clamp(31px,3.5vw,42px);font-weight:800;}
.reactor-result-score{
  display:grid;place-items:center;
  width:142px;height:142px;margin:16px auto 0;
  border-radius:50%;font-size:82px;line-height:1;font-weight:800;
  background:radial-gradient(circle at 35% 28%,#ffffff 0%,#f3fbff 58%,#def3fb 100%);
  border:8px solid rgba(38,180,235,.17);
  box-shadow:0 0 0 1px rgba(22,143,232,.14),0 16px 38px rgba(21,100,149,.12),0 0 45px rgba(246,185,52,.10);
}
.reactor-result-caption{margin:9px 0 20px;font-size:15px;font-weight:500;color:#607e94;}
.reactor-result-grid{max-width:500px;gap:10px;margin:0 auto 22px;}
.reactor-result-card{position:relative;overflow:hidden;padding:16px 11px;background:#fff;border-color:#d3e7f1;}
.reactor-result-card:nth-child(1){background:linear-gradient(145deg,#fffdf5,#fff5d8);border-color:#f2dfaa;}
.reactor-result-card:nth-child(2){background:linear-gradient(145deg,#f7fdff,#e6f8ff);border-color:#c7e9f6;}
.reactor-result-card:nth-child(3){background:linear-gradient(145deg,#fff8fc,#f9eaf4);border-color:#eed4e5;}
.reactor-result-card span{font-size:11px;font-weight:700;color:#58788f;}
.reactor-result-card strong{font-size:29px;font-weight:800;color:#163951;}
.reactor-result-actions .reactor-main-btn{min-width:220px;}
.reactor-ghost-btn{font-weight:600;}

@media(max-width:760px){
  .reactor-shell{min-height:100dvh;max-height:100dvh;width:100%;border-radius:0;}
  .reactor-view{min-height:calc(100dvh - 92px);}
  .reactor-ready{padding:8px 5px;}
  .reactor-ready h3{font-size:40px;}
  .reactor-question-card{width:100%;padding:27px 14px 30px;}
  .reactor-question{font-size:clamp(40px,12vw,58px);}
  .reactor-result-score{width:126px;height:126px;font-size:72px;}
  .reactor-result-grid{width:100%;}
}