/* Math Tiles — styles.css (fixed layout + requested colors) */
:root {
  --bg: #ffffff;       /* White background */
  --panel: #fafafa;
  --tile: #E1AD01;     /* Dark blue tiles */
  --tile-hover: #003080;
  --correct: #12b981;  /* Green for correct */
  --wrong: #ef4444;    /* Red for wrong */
  --text: #000000;     /* Black text overall */
  --muted: #555555;
/* --shadow: 0 10px 30px rgba(0,0,0,.15); */
  --radius: 18px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background: var(--bg);
  color: var(--text);
  display: grid;
  place-items: center;
  padding: clamp(8px, 2.5vw, 16px);
}

/* Keep the game frame within 800x600; allow scrolling if content exceeds height */
.game {
  width: min(800px, 90vw);
  height: min(600px, 96vh);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
  background: var(--panel);
  border: 1px solid #e7e7e7;
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 8px;
  position: relative;
  overflow: auto; /* was hidden; now scroll to ensure tiles are reachable */
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(14px, 2vw, 18px);
}
.logo svg { height: 24px; width: 24px; }

.stats { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  background: #eef6ff;
  border: 1px solid #cfe4ff;
  color: #09315b;
  padding: 4px 8px; border-radius: 999px; font-weight: 600; font-size: 12px;
}

.problem {
  display: grid; place-items: center;
  padding: 8px 10px; margin-top: 2px;
  border-radius: var(--radius);
  background: #ffffff;
  border: 1px solid #e7e7e7;
  min-height: 60px;
  text-align: center;
}

.prompt {
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: .5px;
}
.sub { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* GRID: exact 3x3 tiles of 200px; centered. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  grid-auto-rows: 70px;
  gap: 8px;
  justify-content: center; /* center the 3 columns within container */
  align-content: start;
  padding: 4px;
}

/* Tiles */
.tile {
  width: 60pm;
  height: 60px;
  border-radius: 10px;
  background: var(--tile);
  border: 1px solid #003080;
  display: grid; place-items: center;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff; /* White text on tiles */
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.tile:hover { transform: translateY(-2px); background: var(--tile-hover); box-shadow: 0 12px 24px rgba(0,0,0,.18); }
.tile:active { transform: translateY(0); }

/* Correct / Wrong states per request */
.tile.correct {
  background: var(--correct);
  border-color: #0a7d57;
  color: #000000; /* Black text on correct tile */
}
.tile.wrong {
  background: var(--wrong);
  border-color: #b91c1c;
  color: #ffffff; /* White text on wrong tile */
}

/* Buttons & controls */
.controls { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.left-controls, .right-controls { display: flex; gap: 6px; align-items: center; }

button.primary, button.ghost {
  padding: 8px 10px; border-radius: 12px; font-weight: 700; border: 1px solid; cursor: pointer;
  background: transparent; color: var(--text);
  transition: transform .15s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
button.primary { border-color: #0a7d57; background: rgba(18,185,129,.12); }
button.primary:hover { background: rgba(18,185,129,.2); }
button.ghost { border-color: #d0d0d0; }
button.ghost:hover { background: #f2f2f2; }

/* Animations */
@keyframes pop {
  0% { transform: scale(.9); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.pop { animation: pop .28s ease-out; }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.shake { animation: shake .38s ease-in-out; }

/* Confetti (SVG) */
.confetti { pointer-events: none; position: absolute; inset: 0; overflow: visible; opacity: 0; transition: opacity .2s; }
.confetti.show { opacity: 1; }

/* Mobile friendliness: scale tiles down on very narrow screens so 3 columns fit without horizontal scroll */
@media (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(3, min(15vw, 60px));
    grid-auto-rows: min(15vw, 60px);
  }
  .tile {
    width: 80%;
    height: 80%;
    font-size: clamp(12px, 4vw, 20px);
  }
}