*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07021a;--pur:#7c3aed;--purl:#a78bfa;--gold:#fbbf24;
  --green:#34d399;--red:#f87171;--text:#f0ecff;
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);
  font-family:'Nunito',sans-serif;color:var(--text);touch-action:manipulation;
  user-select:none;-webkit-user-select:none;}
canvas{position:fixed;top:0;left:0;display:block;}
#bgc{z-index:0;}
#gc{z-index:1;}
#ui{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none;}
.ptr{pointer-events:all;}

/* TOP BAR */
#top{display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;pointer-events:none;}
.badge{background:rgba(255,255,255,0.08);backdrop-filter:blur(12px);
  border:1.5px solid rgba(167,139,250,0.3);border-radius:20px;
  padding:5px 14px;font-family:'Fredoka One',cursive;
  font-size:clamp(13px,3vw,18px);display:flex;align-items:center;gap:5px;
  text-shadow:0 1px 6px rgba(0,0,0,0.5);}

/* PROGRESS DOTS */
#progress{position:absolute;top:55px;left:50%;transform:translateX(-50%);
  display:flex;gap:7px;pointer-events:none;}
.pdot{width:clamp(24px,5vw,32px);height:6px;border-radius:3px;
  background:rgba(255,255,255,0.12);transition:all 0.3s;}
.pdot.done{background:var(--green);}
.pdot.active{background:var(--gold);box-shadow:0 0 8px var(--gold);}

/* QUESTION PANEL */
#qbox{position:absolute;top:clamp(60px,10vh,90px);left:50%;transform:translateX(-50%);
  width:min(560px,90vw);
  background:linear-gradient(135deg,rgba(124,58,237,0.35),rgba(79,30,180,0.25));
  backdrop-filter:blur(18px);
  border:2px solid rgba(167,139,250,0.4);border-radius:22px;
  padding:14px 22px;text-align:center;pointer-events:none;
  box-shadow:0 8px 40px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.1);}
#qlabel{font-size:clamp(10px,2vw,13px);color:var(--purl);
  text-transform:uppercase;letter-spacing:2px;margin-bottom:4px;font-weight:700;}
#qtext{font-family:'Fredoka One',cursive;font-size:clamp(18px,4.5vw,30px);line-height:1.3;}

/* TIMER */
#timerbar{position:absolute;bottom:clamp(130px,20vh,160px);left:50%;
  transform:translateX(-50%);width:min(380px,78vw);
  height:7px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden;}
#timerfill{height:100%;border-radius:4px;width:100%;
  background:linear-gradient(90deg,#34d399,#fbbf24 60%,#ef4444);
  transition:width 0.12s linear;transform-origin:left;}

/* ANSWER BUTTONS */
#answers{position:absolute;bottom:clamp(20px,4vh,40px);left:50%;
  transform:translateX(-50%);
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  width:min(680px,94vw);}
.abtn{font-family:'Fredoka One',cursive;font-size:clamp(18px,4vw,26px);
  width:clamp(64px,14vw,82px);height:clamp(64px,14vw,82px);
  border-radius:50%;border:2.5px solid rgba(255,255,255,0.25);
  background:linear-gradient(145deg,rgba(124,58,237,0.65),rgba(79,30,180,0.55));
  color:white;cursor:pointer;pointer-events:all;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.15);
  transition:transform 0.12s,box-shadow 0.12s;position:relative;overflow:hidden;}
.abtn::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,0.2),transparent 65%);}
.abtn:hover{transform:scale(1.1) translateY(-3px);
  box-shadow:0 8px 28px rgba(124,58,237,0.6),inset 0 1px 0 rgba(255,255,255,0.2);}
.abtn:active{transform:scale(0.94);}
.abtn.correct{background:linear-gradient(145deg,#059669,#10b981);
  border-color:#34d399;box-shadow:0 0 20px rgba(52,211,153,0.7);
  animation:popBounce 0.45s ease;}
.abtn.wrong{background:linear-gradient(145deg,#b91c1c,#ef4444);
  border-color:#f87171;animation:shakeWrong 0.4s ease;}
@keyframes popBounce{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1.05)}}
@keyframes shakeWrong{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}

/* HINT TEXT */
#hint{position:absolute;bottom:clamp(105px,16vh,135px);
  left:50%;transform:translateX(-50%);
  font-size:clamp(11px,2.5vw,14px);color:rgba(255,255,255,0.38);
  pointer-events:none;text-align:center;white-space:nowrap;}

/* FEEDBACK FLASH */
#fb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Fredoka One',cursive;font-size:clamp(36px,9vw,70px);
  pointer-events:none;opacity:0;transition:opacity 0.2s;
  text-shadow:0 0 40px currentColor;z-index:10;}
#fb.show{opacity:1;}

/* COMBO */
#combo{position:absolute;top:clamp(85px,12vh,110px);right:16px;
  font-family:'Fredoka One',cursive;font-size:clamp(13px,2.8vw,18px);
  color:var(--gold);text-align:right;pointer-events:none;
  opacity:0;transition:opacity 0.3s;text-shadow:0 0 12px var(--gold);}
#combo.show{opacity:1;}

/* SCREENS */
.screen{position:fixed;top:0;left:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:50;background:radial-gradient(ellipse at 50% 40%,
    rgba(100,30,220,0.25) 0%,rgba(7,2,26,0.96) 65%);pointer-events:all;
  padding:16px 16px 22px;}
.screen.off{display:none;}

.screen h1{font-family:'Fredoka One',cursive;
  font-size:clamp(40px,11vw,82px);
  background:linear-gradient(135deg,#fde68a,#fbbf24,#f59e0b);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;filter:drop-shadow(0 0 24px rgba(251,191,36,0.45));
  margin-bottom:4px;line-height:1;}
.titleRow{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.titleBolt{font-size:clamp(34px,9vw,62px);line-height:1;
  filter:drop-shadow(0 0 20px rgba(251,191,36,0.6));}
.screen .sub{font-size:clamp(12px,2.8vw,17px);color:var(--purl);margin-bottom:22px;text-align:center;}

.gbtn{font-family:'Fredoka One',cursive;font-size:clamp(18px,4vw,24px);
  padding:12px 34px;border-radius:50px;border:none;cursor:pointer;
  transition:all 0.18s;margin:6px;pointer-events:all;}
.gbtn.pri{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;
  box-shadow:0 6px 28px rgba(124,58,237,0.5);}
.gbtn.pri:hover{transform:translateY(-3px) scale(1.05);
  box-shadow:0 10px 36px rgba(124,58,237,0.7);}
.gbtn.sec{background:transparent;color:var(--purl);
  border:2px solid rgba(167,139,250,0.5);}
.gbtn.sec:hover{border-color:var(--purl);color:#fff;background:rgba(124,58,237,0.2);}

/* Score popups */
.spop{position:absolute;font-family:'Fredoka One',cursive;font-size:clamp(18px,4vw,26px);
  color:var(--gold);pointer-events:none;z-index:20;
  animation:floatUp 1.1s ease forwards;text-shadow:0 0 10px var(--gold);}
@keyframes floatUp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-70px)}}

/* Mode select on menu */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;
  width:min(440px,88vw);margin-bottom:16px;}
.mcard{background:rgba(124,58,237,0.18);border:2px solid rgba(167,139,250,0.25);
  border-radius:18px;padding:13px 12px;cursor:pointer;text-align:center;
  transition:all 0.18s;pointer-events:all;}
.mcard:hover,.mcard.sel{background:rgba(124,58,237,0.5);
  border-color:var(--purl);transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(124,58,237,0.4);}
.mcard .mi{font-size:clamp(24px,5.6vw,34px);margin-bottom:4px;}
.mcard .mn{font-family:'Fredoka One',cursive;font-size:clamp(14px,3vw,18px);}
.mcard .md{font-size:clamp(10px,2vw,12px);color:var(--purl);margin-top:3px;}

.activity-switch{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;justify-content:center;}
.pill{font-family:'Fredoka One',cursive;font-size:clamp(14px,3vw,18px);
  padding:8px 16px;border-radius:999px;cursor:pointer;pointer-events:all;
  border:2px solid rgba(167,139,250,0.35);background:rgba(124,58,237,0.14);
  color:var(--text);transition:all 0.18s;}
.pill.active{background:linear-gradient(135deg,#7c3aed,#6d28d9);border-color:#c4b5fd;
  box-shadow:0 6px 24px rgba(124,58,237,0.45);}

.stageWrap{width:min(520px,90vw);margin:0 0 14px;text-align:center;}
.stageTitle{font-size:clamp(11px,2.5vw,13px);letter-spacing:2px;text-transform:uppercase;
  color:var(--purl);margin-bottom:6px;font-weight:800;}
.stageGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;}
.stageBtn{font-family:'Fredoka One',cursive;font-size:clamp(14px,3vw,18px);
  min-height:36px;padding:6px 0;border-radius:12px;border:2px solid rgba(167,139,250,0.28);
  background:rgba(124,58,237,0.18);color:var(--text);cursor:pointer;pointer-events:all;
  transition:all 0.18s;}
.stageBtn:hover,.stageBtn.sel{background:rgba(124,58,237,0.55);border-color:var(--gold);
  transform:translateY(-2px);box-shadow:0 6px 18px rgba(124,58,237,0.35);}
.menuNote{margin-top:8px;font-size:11px;color:var(--purl);opacity:0.8;text-align:center;}
.siteLinkWrap{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);
  z-index:90;text-align:center;padding:8px 12px;border-radius:999px;
  background:rgba(6,3,20,0.78);backdrop-filter:blur(10px);
  border:1px solid rgba(167,139,250,0.24);}
.siteLink{color:#fde68a;text-decoration:none;font-weight:800;font-size:13px;}
.siteLink:hover{text-decoration:underline;}
.guardScreen{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  flex-direction:column;padding:24px;background:rgba(5,2,18,0.94);text-align:center;}
.guardScreen.show{display:flex;}
.guardTitle{font-family:'Fredoka One',cursive;font-size:clamp(28px,8vw,56px);
  color:#fde68a;margin-bottom:12px;}
.guardText{max-width:560px;color:var(--text);font-size:clamp(14px,3.2vw,20px);line-height:1.4;margin-bottom:18px;}

@media (max-height: 760px){
  .stageWrap{margin-bottom:10px;}
  .stageGrid{gap:5px;}
  .stageBtn{min-height:32px;font-size:clamp(13px,2.8vw,16px);}
}

.qmark{display:inline-block;min-width:0.7em;color:#ef4444;font-weight:900;
  text-shadow:0 0 10px rgba(239,68,68,0.45);}

body.learning-theme #livbadge{display:none;}

/* Stats display on game over */
.stats{display:flex;gap:20px;margin:16px 0 28px;flex-wrap:wrap;justify-content:center;}
.stat{text-align:center;}
.stat .sv{font-family:'Fredoka One',cursive;font-size:clamp(30px,7vw,48px);color:var(--gold);}
.stat .sl{font-size:clamp(11px,2.5vw,14px);color:var(--purl);}

/* Click overlay for number line tapping */
#lineClicks{position:absolute;left:0;top:0;width:100%;height:100%;
  z-index:3;pointer-events:none;}
#lineClicks.active{pointer-events:all;cursor:pointer;}