*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0a0a0f; --surface: #14141f; --border: #2e2e42;
  --text: #ffffff; --muted: #8e8ebf;
  --gold: #ffcc00; --green: #22c55e; --red: #ef4444;
  --b0: #ffaa44; --b1: #33dfff;
}
body {
  background: var(--bg); color: var(--text);
  font-family: 'DM Mono', monospace;
  height: 100dvh; display: flex; flex-direction: column;
  align-items: center; overflow: hidden;
  user-select: none; -webkit-tap-highlight-color: transparent;
}

/* ── MAIN LAYOUT WRAPPER ── */
.container {
  width: 100%; max-width: 500px; height: 100%;
  display: flex; flex-direction: column;
  padding: 12px 20px; gap: 10px;
}

/* ── HEADER & HUD ── */
header {
  display: flex; align-items: center; justify-content: space-between;
}
.logo { font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; color: var(--gold); letter-spacing: 0.04em; line-height: 1; }
.reset-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 6px 14px; font-family: 'DM Mono', monospace;
  font-size: 0.75rem; cursor: pointer; transition: all 0.1s;
}
.reset-btn:active { background: var(--border); transform: scale(0.95); }

/* ── DASHBOARD STATS ── */
.stats-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.stat-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 4px; text-align: center;
}
.stat-box .n { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: #ffffff; line-height: 1.1; }
.stat-box .l { font-size: 0.55rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
#hud-score { color: var(--gold); }

/* ── TIMER ── */
#timer-bar-bg { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; width: 100%; }
#timer-bar-fill { height: 100%; width: 100%; background: var(--gold); border-radius: 3px; transition: width 0.1s linear, background 0.3s; }

/* ── MID INFO / FEEDBACK ── */
#mid {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 56px; text-align: center; margin: 4px 0;
}
/* Font upgraded to Bebas Neue and sized up for clear prompt layout visibility */
.q-label { 
  font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; 
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1;
}
#feedback {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; letter-spacing: 0.03em;
  min-height: 2rem; line-height: 1.1; margin-top: 2px;
}

/* ── EQUATION BOXES ── */
#boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
  max-height: 180px;
}
.box {
  border-radius: 16px; border: 2px solid var(--border);
  background: #11111a;
  cursor: pointer; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 4px; transition: transform 0.05s, border-color 0.1s;
}
.box::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.03;
}
#b0::before { background: var(--b0); }
#b1::before { background: var(--b1); }
.box:active { transform: scale(0.97); }

.box-key { 
  position: absolute; top: 6px; left: 10px;
  font-family: 'Bebas Neue', sans-serif; font-size: 0.9rem; 
  opacity: 0.3;
}
#b0 .box-key { color: var(--b0); }
#b1 .box-key { color: var(--b1); }

.eq { 
  display: flex; flex-direction: row; align-items: center; justify-content: center; 
  gap: 2px; width: 100%; letter-spacing: -0.04em;
}
.eq-num { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; color: #ffffff; line-height: 1; }

#b0 .eq-op { color: var(--b0); }
#b1 .eq-op { color: var(--b1); }
.eq-op { font-size: 3rem; font-weight: bold; line-height: 1; font-family: 'DM Mono', monospace; }

/* ── FLOATING POPUPS & FLASHES ── */
.box.flash-correct { animation: correct-flash 0.3s ease; }
.box.flash-wrong   { animation: wrong-flash 0.3s ease; }
@keyframes correct-flash {
  50% { border-color: var(--green); background: #0a2414; }
}
@keyframes wrong-flash {
  50% { border-color: var(--red); background: #240a0a; }
}

.score-pop {
  position: absolute; left: 50%; top: 50%;
  font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem;
  pointer-events: none; animation: sfloat 0.5s ease forwards; z-index: 10;
}
@keyframes sfloat { 0%{opacity:1;transform:translate(-50%, -20%)} 100%{opacity:0;transform:translate(-50%, -80%)} }

/* ── FOOTER HINT ── */
footer {
  text-align: center; font-size: 0.6rem; color: var(--muted); letter-spacing: 0.05em; padding-top: 4px; padding-bottom: 4px;
}