/* Shared visual shell for the DeepRoots math games: design tokens, fonts,
   card/button/form chrome, the timer ring, and shared results-screen
   styles. Game-specific styles (the problem/target/equation card, tiles,
   and per-game h1/top-row sizing) stay in each game's own <style> block. */

:root{
  --bg-top: #FFF7EA;
  --bg-bottom: #FFE7C2;
  --panel: #FFFFFF;
  --panel-line: #FFDDA3;
  --well: #FFF4E3;      /* soft recessed background for inputs/tiles/stats */
  --ink: #4A3728;
  --ink-dim: #AB8F6E;
  --accent: #FF9F1C;    /* warm sunshine orange */
  --accent-dim: #B96E00;
  --accent-soft: rgba(255, 159, 28, 0.16);
  --on-accent: #45250A; /* text color for on top of --accent */
  --good: #46B36B;
  --good-soft: rgba(70, 179, 107, 0.16);
  --bad: #FF6161;
  --bad-soft: rgba(255, 97, 97, 0.16);
  --bad-text: #D6432B;
  --gold: #FFB300;
  --gold-soft: rgba(255, 179, 0, 0.16);
  --mono: 'Chivo Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display: 'Space Grotesk', ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --body: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
}
@font-face{
  font-family:'Space Grotesk';
  src: local('Space Grotesk');
}
* { box-sizing: border-box; }
html, body {
  margin:0; padding:0; height:100%;
  background: linear-gradient(160deg, var(--bg-top), var(--bg-bottom));
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  overflow: hidden;
}
#root { height:100vh; width:100vw; display:flex; align-items:center; justify-content:center; padding:24px; }

.card {
  width: 100%;
  max-width: 560px;
  background: var(--panel);
  border: 2px solid var(--panel-line);
  border-radius: 28px;
  padding: 40px 36px;
  position: relative;
  box-shadow: 0 14px 0 rgba(255, 176, 82, 0.18), 0 18px 34px rgba(180, 120, 40, 0.12);
}

/* Every game's setup screen is a #setup-screen.card that's already in the
   DOM on page load (not toggled in later like the results/end screens), so
   this plays once as a welcoming entrance rather than firing every time a
   screen is shown. Piloted on Crack the Code before extracting here. */
@media (prefers-reduced-motion: no-preference) {
  #setup-screen { animation: setupCardIn .4s ease-out both; }
}
@keyframes setupCardIn {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin: 0 0 6px 0;
}
h1 {
  font-family: var(--display);
  font-weight: 700;
  margin: 0 0 28px 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}

label {
  display:block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.field { margin-bottom: 22px; }
input[type=text], select {
  width: 100%;
  background: var(--well);
  border: 2px solid var(--panel-line);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  padding: 13px 14px;
  border-radius: 14px;
  outline: none;
  transition: border-color .15s ease;
  appearance: none;
  -webkit-appearance: none;
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1L7 7L13 1' stroke='%23AB8F6E' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
input[type=text]:focus, select:focus { border-color: var(--accent); }

.highscore-line {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-dim);
  margin: -8px 0 22px 0;
  min-height: 18px;
}
.highscore-line b { color: var(--accent-dim); }

button {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  border: none;
  border-radius: 16px;
  padding: 15px 20px;
  cursor: pointer;
  width: 100%;
  letter-spacing: 0.01em;
  transition: transform .08s ease, opacity .15s ease, box-shadow .08s ease;
}
button:active { transform: translateY(2px) scale(0.98); }
/* Same look as <button>, for links that act as buttons (e.g. "Play Another Game"). */
a.btn-primary, a.btn-secondary {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  border-radius: 16px;
  padding: 15px 20px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 0.01em;
  transition: transform .08s ease, opacity .15s ease, box-shadow .08s ease;
  text-decoration: none;
  text-align: center;
  display: block;
}
a.btn-primary:active, a.btn-secondary:active { transform: translateY(2px) scale(0.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 0 var(--accent-dim); }
.btn-primary:hover { filter: brightness(1.04); }
.btn-primary:active { box-shadow: 0 2px 0 var(--accent-dim); }
.btn-primary:disabled { opacity: 0.45; cursor: default; filter: none; box-shadow: 0 6px 0 var(--accent-dim); pointer-events: none; }
.btn-secondary { background: var(--well); color: var(--ink-dim); border: 2px solid var(--panel-line); margin-top: 10px; }
.btn-secondary:hover { color: var(--ink); border-color: var(--ink-dim); }

/* ---------- PLAY SCREEN ---------- */
.play-wrap { width:100%; max-width: 560px; display:flex; flex-direction:column; align-items:center; position: relative; }

.top-row { display:flex; align-items:center; justify-content:space-between; width:100%; }

.ring-wrap { position: relative; width: 84px; height: 84px; flex-shrink:0; }
.ring-wrap svg { transform: rotate(-90deg); width:100%; height:100%; }
.ring-bg { fill:none; stroke: var(--panel-line); stroke-width: 7; }
.ring-fg { fill:none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .2s ease; }
.ring-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--ink); }

.score-box { text-align:right; }
.score-box .num { font-family: var(--display); font-size: 40px; font-weight: 800; line-height:1; color: var(--accent-dim); }
.score-box .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); margin-top: 4px; }

/* ---------- STREAK MODE (no-timer games: current streak / best streak) ---------- */
.streak-row { display:flex; align-items:center; justify-content:center; gap:40px; width:100%; margin-bottom: 26px; }
.streak-box { text-align:center; }
.streak-box .num { font-family: var(--display); font-size: 40px; font-weight: 800; line-height:1; color: var(--accent-dim); }
.streak-box .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); margin-top: 4px; }

/* ---------- STREAK-END OVERLAY (shown over the play screen until dismissed) ---------- */
.streak-end-overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(74, 55, 40, 0.55);
  border-radius: 24px;
  padding: 20px;
}
.streak-end-panel {
  width: 100%; max-width: 400px;
  background: var(--panel); border: 2px solid var(--panel-line); border-radius: 20px;
  padding: 28px 26px; text-align: center;
  box-shadow: 0 14px 0 rgba(255, 176, 82, 0.18), 0 18px 34px rgba(180, 120, 40, 0.12);
}
/* Same reuse-on-display:none-toggle trick as .results-card above, but
   applied to .streak-end-overlay (not .streak-end-panel): the .hidden class
   toggles on the overlay itself, and a browser only restarts an animation
   when THAT element's own display goes none -> flex, not when only an
   ancestor's does — putting this on the panel (a child whose own display
   never changes) silently never replayed. */
@media (prefers-reduced-motion: no-preference) {
  .streak-end-overlay { animation: setupCardIn .4s ease-out both; }
}

/* ---------- CHOICE ROW (true/false controls) ---------- */
.choice-row { display:flex; gap:14px; width:100%; }
.choice-btn {
  flex:1; padding:20px 10px; border-radius:18px; font-family:var(--display); font-weight:800; font-size:20px;
  border:2px solid var(--panel-line); background:var(--well); cursor:pointer; transition: transform .08s ease, border-color .1s ease;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.choice-btn:active { transform: scale(0.97); }
.choice-btn .icon { font-size:26px; }
.choice-btn.correct-btn { color: var(--good); }
.choice-btn.correct-btn:hover { border-color: var(--good); }
.choice-btn.wrong-btn { color: var(--bad-text); }
.choice-btn.wrong-btn:hover { border-color: var(--bad); }
.choice-btn .key-hint { font-family:var(--mono); font-size:10px; color:var(--ink-dim); letter-spacing:0.08em; text-transform:uppercase; }

/* ---------- RESULTS ---------- */
.results-card { text-align:center; }
/* Reuses setupCardIn (defined above, next to #setup-screen). Needs no JS
   retrigger: .results-card is always display:none until shown, and a CSS
   animation restarts automatically whenever an element goes from
   display:none back to rendered — so this replays every time a results/end
   screen is shown (Play Again -> End Game -> Play Again, etc.), not just
   once on page load like the setup screen. */
@media (prefers-reduced-motion: no-preference) {
  .results-card { animation: setupCardIn .4s ease-out both; }
}
.big-score { font-family: var(--display); font-size: 72px; font-weight: 800; color: var(--accent-dim); line-height:1; margin: 10px 0 2px 0; }
.big-score-lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.new-high {
  display:inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--gold);
  padding: 6px 14px;
  border-radius: 999px;
  margin-top: 14px;
}
.stat-row { display:flex; gap: 12px; margin: 28px 0 8px 0; }
.stat {
  flex:1;
  background: var(--well);
  border: 2px solid var(--panel-line);
  border-radius: 16px;
  padding: 16px 10px;
}
.stat .n { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--ink); }
.stat .l { font-family: var(--mono); font-size: 10px; color: var(--ink-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }

.hidden { display:none !important; }