:root{
  --pink:#E85D8C;--blue:#4A9EF5;--purple:#8B5CF6;
  --orange:#F59E0B;--orange2:#F97316;
  --teal:#14B8A6;--red:#EF4444;--green:#22C55E;
  --bg:#FFF9F3;--card:#FFFFFF;--text:#3D3D4E;--muted:#A0A0B8;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.06);--shadow-md:0 8px 24px rgba(0,0,0,0.10);
}
html,body{background:var(--bg);font-family:'Nunito',sans-serif;color:var(--text);-webkit-tap-highlight-color:transparent}

/* NAV */
nav{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,0.06);padding:0 20px;position:sticky;top:0;z-index:100}
.nav-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{font-family:'Fredoka',cursive;font-size:22px;font-weight:700;color:var(--pink);text-decoration:none}
.nav-back{font-size:13px;font-weight:800;color:var(--muted);text-decoration:none;transition:color 0.2s}
.nav-back:hover{color:var(--orange)}
.nav-links{display:flex;gap:20px;list-style:none}
@media(max-width:760px){.nav-links{display:none}}

/* LAYOUT */
#app{max-width:580px;margin:0 auto;padding:12px 16px 24px}

/* TOPBAR */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.game-title{font-family:'Fredoka',cursive;font-size:22px;font-weight:700;color:var(--text)}
.game-title span{color:var(--orange)}

/* FULLSCREEN BTN */
.btn-icon{background:var(--card);border:2px solid #FDE68A;color:var(--orange);font-size:18px;border-radius:10px;padding:4px 9px;cursor:pointer;transition:all 0.2s;line-height:1;font-family:sans-serif;display:flex;align-items:center}
.btn-icon:hover{background:var(--orange);color:#fff;border-color:var(--orange)}

/* STATS ROW */
.stats-row{display:flex;gap:8px;margin-bottom:12px;align-items:stretch}
.lives-box{background:var(--card);border-radius:14px;padding:7px 14px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:4px;flex:1}
.heart{font-size:clamp(16px,4.5vmin,24px);transition:all 0.3s}
.heart.dead{filter:grayscale(1);opacity:0.28;transform:scale(0.8)}
.stat-box{background:var(--card);border-radius:14px;padding:7px 14px;box-shadow:var(--shadow-sm);text-align:center;flex:1}
.stat-v{font-family:'Fredoka',cursive;font-size:clamp(18px,4.5vmin,26px);font-weight:700;line-height:1.1}
.stat-l{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:800}
.stat-v.orange{color:var(--orange)}
.combo-box{background:var(--card);border-radius:14px;padding:7px 12px;box-shadow:var(--shadow-sm);text-align:center;min-width:68px;transition:background 0.25s,box-shadow 0.25s}
.combo-box.hot{background:linear-gradient(135deg,var(--orange),var(--orange2));box-shadow:0 4px 16px rgba(249,115,22,0.35)}
.combo-box .stat-v{color:var(--orange)}
.combo-box.hot .stat-v{color:#fff}
.combo-box.hot .stat-l{color:rgba(255,255,255,0.8)}

/* DIFFICULTY */
.diff-wrap{margin-bottom:12px}
.diff-label{font-size:11px;color:var(--muted);font-weight:800;margin-bottom:6px;letter-spacing:0.5px}
.diff-btns{display:flex;gap:8px}
.dbtn{background:var(--card);border:2px solid #FDE68A;color:var(--orange);font-size:12px;font-weight:800;border-radius:24px;padding:7px 0;cursor:pointer;transition:all 0.2s;font-family:'Nunito',sans-serif;flex:1;text-align:center}
.dbtn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.dbtn.active{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 4px 14px rgba(245,158,11,0.35)}

/* HINT */
.hint{background:var(--card);border-radius:12px;padding:10px 16px;font-size:13px;color:var(--muted);text-align:center;box-shadow:var(--shadow-sm);margin-bottom:12px;font-weight:700;line-height:1.6}
.hint b{color:var(--orange)}

/* START BTN */
.btn-start{width:100%;background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;border:none;border-radius:14px;padding:12px;font-size:15px;font-weight:900;font-family:'Nunito',sans-serif;cursor:pointer;box-shadow:0 4px 16px rgba(245,158,11,0.35);transition:all 0.15s;margin-bottom:14px;letter-spacing:0.3px}
.btn-start:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(245,158,11,0.45)}
.btn-start:active{transform:scale(0.97)}

/* PROGRESS DOTS */
.progress-row{display:flex;justify-content:center;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.pdot{width:10px;height:10px;border-radius:50%;background:#EDE5F5;transition:all 0.3s cubic-bezier(.34,1.56,.64,1)}
.pdot.correct{background:var(--teal);transform:scale(1.2)}
.pdot.wrong{background:var(--red);transform:scale(1.1)}
.pdot.timeout{background:var(--muted)}
.pdot.current{background:var(--orange);animation:pulseDot 0.7s ease infinite alternate}
@keyframes pulseDot{from{transform:scale(1)}to{transform:scale(1.4)}}

/* GAME AREA */
.game-area{display:flex;flex-direction:column;gap:14px}

/* QUESTION SECTION */
.question-section{display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,32px)}

/* TIMER RING */
.timer-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.timer-svg{width:clamp(76px,17vmin,140px);height:clamp(76px,17vmin,140px);transform:rotate(-90deg);overflow:visible}
.t-bg{fill:none;stroke:#EDE5F5;stroke-width:7}
.t-arc{fill:none;stroke:var(--orange);stroke-width:7;stroke-linecap:round;stroke-dasharray:276.46;stroke-dashoffset:0;transition:stroke-dashoffset 0.95s linear,stroke 0.3s}
.timer-num{position:absolute;font-family:'Fredoka',cursive;font-weight:700;font-size:clamp(20px,5vmin,34px);color:var(--text);pointer-events:none;transition:color 0.3s}

/* QUESTION */
.question-box{flex:1;min-width:0;text-align:center}
.q-label{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:0.5px;margin-bottom:4px}
.q-eq{font-family:'Fredoka',cursive;font-size:clamp(38px,10vmin,88px);font-weight:700;color:var(--text);line-height:1.1;word-break:break-all;transition:transform 0.2s}

/* OPTIONS GRID */
.opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{background:var(--card);border:2.5px solid #FDE68A;border-radius:18px;font-family:'Fredoka',cursive;font-size:clamp(24px,6vmin,52px);font-weight:700;color:var(--text);cursor:pointer;padding:10px 8px;min-height:clamp(62px,14vmin,100px);width:100%;transition:all 0.15s;box-shadow:var(--shadow-sm)}
.opt:hover:not([disabled]){transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--orange);color:var(--orange)}
.opt:active:not([disabled]){transform:scale(0.95)}
.opt[disabled]{cursor:default}
.opt.correct{background:linear-gradient(135deg,#F0FFF4,#DCFCE7);border-color:var(--green);color:var(--green);animation:pop 0.35s cubic-bezier(.34,1.56,.64,1)}
.opt.wrong{background:linear-gradient(135deg,#FFF1F2,#FFE4E6);border-color:var(--red);color:var(--red);animation:shake 0.38s ease}
.opt.show-correct{background:linear-gradient(135deg,#F0FFF4,#DCFCE7);border-color:var(--green);color:var(--green)}
.opt.skip{background:#F5F5F5;border-color:#DDD;color:var(--muted)}
@keyframes pop{0%{transform:scale(0.88)}55%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* KEY HINT */
.key-hint{display:flex;gap:8px;justify-content:center}
.kh{font-size:11px;color:var(--muted);font-weight:800;background:var(--card);border-radius:8px;padding:2px 7px;box-shadow:var(--shadow-sm)}

/* SCORE FLOAT */
.score-float{position:fixed;font-family:'Fredoka',cursive;font-size:clamp(16px,4vmin,24px);font-weight:700;pointer-events:none;z-index:300;animation:floatUp 0.85s ease forwards}
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-64px) scale(0.75)}}

/* OVERLAY */
.overlay{position:fixed;inset:0;background:rgba(139,92,246,0.14);backdrop-filter:blur(6px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border-radius:24px;padding:36px 28px;text-align:center;max-width:360px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.14);animation:modalIn 0.4s cubic-bezier(.34,1.56,.64,1)}
@keyframes modalIn{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}
.modal .em{font-size:60px;margin-bottom:6px}
.modal h2{font-family:'Fredoka',cursive;font-size:28px;font-weight:700;margin-bottom:6px}
.modal .sub{font-size:14px;color:var(--muted);font-weight:700;margin-bottom:20px;line-height:1.5}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.chip{background:#FFF7ED;color:var(--orange);font-size:13px;font-weight:800;border-radius:20px;padding:5px 14px}
.chip.teal{background:#F0FFF4;color:var(--teal)}
.chip.purple{background:#F5F3FF;color:var(--purple)}
.modal .btn-go{width:100%;border:none;border-radius:14px;padding:12px;font-size:15px;font-weight:900;font-family:'Nunito',sans-serif;cursor:pointer;margin-bottom:10px;color:#fff}
.modal .btn-go.primary{background:linear-gradient(135deg,var(--orange),var(--orange2));box-shadow:0 4px 16px rgba(245,158,11,0.3)}
.modal .btn-go.secondary{background:linear-gradient(135deg,var(--purple),var(--pink))}
.modal .btn-go:hover{opacity:0.9}

/* RESPONSIVE */
@media(max-width:400px){
  #app{padding:10px 12px 16px}
  .diff-btns{gap:6px}
  .dbtn{font-size:11px;padding:6px 0}
}
@media(min-width:800px){
  .q-eq{font-size:clamp(70px,8vw,100px)}
  .opt{font-size:clamp(38px,4.5vw,58px);min-height:110px}
  .timer-svg{width:150px;height:150px}
  .timer-num{font-size:36px}
}
@media(min-width:1200px){
  .q-eq{font-size:100px}
  .opt{font-size:58px;min-height:120px;border-radius:22px}
}

/* sticky footer: pin footer to viewport bottom on short pre-game screens */
body{display:flex;flex-direction:column;min-height:100vh}
#app{flex:1 0 auto}