/* UbayBian v0.5.28 · Brain Games Arcade Polish
   Depth, Ubay mascot, HUD balance, tighter spacing, stronger celebration,
   and math-themed cosmic decoration. Visual layer only. */

/* ---------- Arena depth ---------- */
.reactor-shell{
  background:
    radial-gradient(circle at 50% 44%,rgba(54,167,223,.12),transparent 38%),
    radial-gradient(circle at 82% 18%,rgba(255,117,198,.16),transparent 28%),
    radial-gradient(circle at 14% 78%,rgba(53,225,255,.13),transparent 30%),
    linear-gradient(180deg,rgba(20,48,87,.80),rgba(22,35,73,.86));
  border-color:rgba(175,231,255,.40);
  box-shadow:
    0 40px 110px rgba(0,8,32,.62),
    0 0 0 1px rgba(118,219,255,.13) inset,
    0 0 58px rgba(55,205,255,.13),
    0 0 100px rgba(179,93,255,.09);
}
.reactor-stage{
  position:relative;
  isolation:isolate;
  padding-top:0;
}
.reactor-stage::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0 26px 22px;
  border-radius:34px;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%,rgba(104,224,255,.10),transparent 34%),
    radial-gradient(circle at 78% 78%,rgba(189,111,255,.075),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid rgba(164,226,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -28px 70px rgba(3,18,47,.12);
}
.reactor-view{position:relative;z-index:2;}

/* ---------- Header: less website-like, more arcade ---------- */
.reactor-top{padding-bottom:4px;}
.reactor-title{letter-spacing:-.025em;}
.reactor-brand{position:relative;}
.reactor-brand::after{
  content:"";
  position:absolute;
  left:80px;
  right:-18px;
  bottom:-9px;
  height:1px;
  background:linear-gradient(90deg,rgba(68,224,255,.36),rgba(180,114,255,.16),transparent);
}

/* ---------- Ubay mascot companion ---------- */
.reactor-mascot{
  position:absolute;
  z-index:8;
  width:112px;
  pointer-events:none;
  transition:left .35s ease,right .35s ease,top .35s ease,transform .35s ease,opacity .25s ease;
  filter:drop-shadow(0 15px 18px rgba(0,5,24,.28));
}
.reactor-mascot-bot{
  position:relative;
  width:74px;
  height:82px;
  margin:auto;
  animation:reactorMascotFloat 3.4s ease-in-out infinite;
}
.reactor-mascot-head{
  position:absolute;
  left:9px;top:14px;
  width:56px;height:44px;
  border-radius:19px 19px 17px 17px;
  background:linear-gradient(180deg,#f44f69 0 26%,#4d8cd7 27% 42%,#e8f8ff 43% 100%);
  border:2px solid rgba(183,239,255,.75);
  box-shadow:0 0 0 5px rgba(61,214,255,.08),0 0 24px rgba(78,218,255,.28);
}
.reactor-mascot-head::before{
  content:"";
  position:absolute;
  left:7px;right:7px;top:13px;height:18px;
  border-radius:10px;
  background:#082f56;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.10);
}
.reactor-mascot-eye{
  position:absolute;z-index:2;top:34px;
  width:8px;height:5px;border-radius:50%;
  background:#79efff;box-shadow:0 0 8px #55e7ff;
}
.reactor-mascot-eye.left{left:26px;}
.reactor-mascot-eye.right{right:26px;}
.reactor-mascot-antenna{
  position:absolute;left:35px;top:1px;width:4px;height:16px;border-radius:6px;background:#ffd65d;
}
.reactor-mascot-antenna::before{
  content:"";position:absolute;left:-3px;top:-4px;width:10px;height:10px;border-radius:50%;background:#ffd65d;box-shadow:0 0 12px rgba(255,214,93,.55);
}
.reactor-mascot-body{
  position:absolute;left:20px;top:55px;width:34px;height:25px;border-radius:9px 9px 13px 13px;
  background:linear-gradient(180deg,#29bce9,#477ed1);
  border:2px solid rgba(203,246,255,.70);
}
.reactor-mascot-body::before{
  content:"⚡";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#ffd768;text-shadow:0 0 7px rgba(255,216,104,.45);
}
.reactor-mascot-bubble{
  width:max-content;
  max-width:130px;
  margin:7px auto 0;
  padding:7px 9px;
  border-radius:11px;
  color:#163e64;
  background:rgba(242,251,255,.94);
  border:1px solid rgba(169,230,255,.62);
  box-shadow:0 8px 20px rgba(0,8,34,.16),0 0 18px rgba(85,220,255,.08);
  font-size:10px;
  line-height:1.25;
  font-weight:900;
  text-align:center;
}
.reactor-shell[data-reactor-state="ready"] .reactor-mascot{left:42px;top:207px;}
.reactor-shell[data-reactor-state="play"] .reactor-mascot{right:34px;left:auto;top:245px;transform:scale(.92);}
.reactor-shell[data-reactor-state="result"] .reactor-mascot{right:42px;left:auto;top:252px;transform:scale(1.02);}
@keyframes reactorMascotFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}

/* ---------- Math-themed cosmic decorations ---------- */
.reactor-math-field{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;border-radius:44px;}
.reactor-math-field span{
  position:absolute;
  display:grid;place-items:center;
  font-weight:950;
  text-shadow:0 0 16px currentColor;
  opacity:.48;
}
.reactor-math-field .m1{left:6%;top:42%;font-size:34px;color:#71e7ff;transform:rotate(-12deg)}
.reactor-math-field .m2{right:7%;top:30%;font-size:32px;color:#ff7597;transform:rotate(10deg)}
.reactor-math-field .m3{right:11%;bottom:17%;font-size:26px;color:#c697ff;transform:rotate(-8deg)}
.reactor-math-field .m4{left:13%;bottom:13%;font-size:28px;color:#ffcf63;transform:rotate(9deg)}
.reactor-math-field .m5{right:20%;top:12%;font-size:18px;color:#ffe777;opacity:.68}
.reactor-math-field .m6{left:22%;top:24%;font-size:14px;color:#70ffd5;opacity:.58}

/* ---------- Intro: tighter, stronger composition ---------- */
.reactor-ready{
  max-width:720px;
  padding-top:0;
  transform:translateY(-12px);
}
.reactor-orb{
  width:94px;height:94px;font-size:44px;
  margin-bottom:12px;
}
.reactor-ready h3{
  font-size:clamp(35px,3.6vw,46px);
  margin-bottom:8px;
}
.reactor-ready-copy{font-size:16px;line-height:1.45;margin-bottom:17px;}
.reactor-mission-chips{margin-bottom:18px;}
.reactor-xp-card{margin-bottom:19px;padding:15px 18px;}
.reactor-main-btn{min-width:220px;}

/* ---------- Gameplay HUD balance ---------- */
.reactor-play{max-width:850px;}
.reactor-hud{
  grid-template-columns:132px 154px 132px;
  gap:16px;
  max-width:454px;
  margin:0 auto 20px;
  align-items:center;
}
.reactor-stat{
  min-height:96px;
  padding:13px 13px;
}
.reactor-stat-label{font-size:11px;letter-spacing:.10em;}
.reactor-stat-value{font-size:42px;}
.reactor-timer{width:142px;height:142px;}

/* ---------- Question surface: more reactor depth ---------- */
.reactor-question-card{
  position:relative;
  width:min(600px,100%);
  margin-bottom:18px;
  padding:33px 26px;
  border-color:rgba(124,231,255,.44);
  background:
    radial-gradient(circle at 86% 22%,rgba(60,228,255,.16),transparent 27%),
    linear-gradient(135deg,rgba(28,62,105,.78),rgba(13,35,74,.83));
  box-shadow:
    0 22px 52px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -18px 42px rgba(2,18,50,.18),
    0 0 0 4px rgba(57,215,255,.025),
    0 0 42px rgba(69,222,255,.11);
}
.reactor-question-card::after{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:20px;
  border:1px solid rgba(197,246,255,.06);
  pointer-events:none;
  background:linear-gradient(90deg,rgba(65,226,255,.10),transparent 20% 80%,rgba(190,108,255,.08));
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
}
.reactor-question{letter-spacing:-.02em;}

/* ---------- Answer dock: less form-like ---------- */
.reactor-answer-dock{max-width:610px;gap:13px;}
.reactor-input{
  min-width:0;
  flex:1 1 auto;
  padding:16px 18px;
  font-size:16px;
}
.reactor-submit{
  flex:0 0 126px;
  min-width:126px;
  padding:16px 18px;
  border-radius:17px;
  font-size:16px;
  font-weight:900;
  background:linear-gradient(135deg,#ff9b52,#ff7139 55%,#ff5572);
  box-shadow:0 13px 28px rgba(255,91,54,.30),inset 0 1px 0 rgba(255,255,255,.25);
}
.reactor-play-meta{margin-top:14px;}

/* ---------- Result: stronger celebration ---------- */
.reactor-result{transform:translateY(-8px);}
.reactor-result h3{font-size:clamp(34px,3.6vw,46px);margin-bottom:8px;}
.reactor-result-score{
  width:142px;height:142px;
  font-size:72px;
  border-width:7px;
  box-shadow:
    0 0 0 10px rgba(52,219,255,.055),
    0 0 46px rgba(65,223,255,.28),
    0 0 72px rgba(190,91,255,.13),
    inset 0 0 32px rgba(75,219,255,.05);
}
.reactor-result-caption{margin-top:7px;}
.reactor-new-best{
  margin-top:8px;
  margin-bottom:12px;
  padding:8px 16px;
  box-shadow:0 0 28px rgba(255,205,78,.20),0 8px 20px rgba(0,0,0,.12);
}
.reactor-result-grid{
  width:min(560px,100%);
  grid-template-columns:repeat(3,1fr);
  gap:13px;
  margin-top:2px;
}
.reactor-result-card{
  min-height:102px;
  padding:15px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.075));
  border-color:rgba(171,230,255,.25);
  box-shadow:0 12px 30px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.08);
}
.reactor-result-card strong{font-size:31px;}
.reactor-result-actions{margin-top:14px;}
.reactor-result-actions .reactor-main-btn{min-width:220px;}
.reactor-result-actions .reactor-ghost-btn{min-width:112px;}
.reactor-shell[data-reactor-state="result"] .reactor-stage::after{
  content:"✦  ★  ✦";
  position:absolute;
  z-index:1;
  left:50%;top:26px;
  transform:translateX(-50%);
  color:#ffd96b;
  letter-spacing:18px;
  font-size:18px;
  opacity:.72;
  text-shadow:0 0 22px rgba(255,207,86,.42);
  pointer-events:none;
}

@media (max-width:900px){
  .reactor-mascot{opacity:.55;transform:scale(.78)!important;}
  .reactor-shell[data-reactor-state="ready"] .reactor-mascot{left:14px;top:220px;}
  .reactor-shell[data-reactor-state="play"] .reactor-mascot,
  .reactor-shell[data-reactor-state="result"] .reactor-mascot{right:12px;top:255px;}
  .reactor-math-field .m1,.reactor-math-field .m2,.reactor-math-field .m3,.reactor-math-field .m4{opacity:.25;}
}
@media (max-width:680px){
  .reactor-stage::before{inset:0 10px 14px;border-radius:27px;}
  .reactor-mascot{display:none;}
  .reactor-ready{transform:none;}
  .reactor-hud{grid-template-columns:1fr 126px 1fr;max-width:100%;gap:8px;}
  .reactor-timer{width:118px;height:118px;}
  .reactor-stat{min-height:82px;padding:10px 8px;}
  .reactor-stat-value{font-size:34px;}
  .reactor-answer-dock{max-width:100%;}
  .reactor-submit{flex-basis:104px;min-width:104px;padding-inline:10px;}
  .reactor-result-grid{gap:8px;}
  .reactor-result-card{min-height:88px;padding:12px 8px;}
  .reactor-result-card strong{font-size:25px;}
}