:root {
  --bg: #1e293b;
  --panel: #0f172a;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --correct: #4ade80;
  --wrong: #f87171;
  --key: #334155;
  --key-hover: #475569;
  --stick: #b45309;
  --stick-tip: #dc2626;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, sans-serif;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: 12px 10px 20px;
}

.game {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

h1 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}

/* ---------- Score bar ---------- */
.score {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border-radius: 10px;
  padding: 8px 16px;
  width: 100%;
}
.score-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.score-side:last-child { justify-content: flex-end; }
.score-label { color: var(--muted); font-size: 0.85rem; }
.score-num   { font-size: 1.4rem; font-weight: 700; min-width: 1.5ch; text-align: center; }
.score-vs    { color: var(--muted); font-size: 0.8rem; }

.name-btn {
  background: none;
  border: 1px solid var(--key);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 8px;
}
.name-btn:hover { border-color: var(--accent); color: var(--accent); }

.name-input {
  background: var(--key);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  padding: 2px 8px;
  width: 100px;
}

.name-list {
  background: var(--panel);
  border: 1px solid var(--key);
  border-radius: 6px;
  list-style: none;
  padding: 4px 0;
  position: absolute;
  z-index: 10;
  min-width: 120px;
}
.name-list li {
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 12px;
}
.name-list li:hover { background: var(--key); }

/* ---------- Level toggle ---------- */
.level-toggle {
  display: flex;
  gap: 6px;
}
.level-btn {
  background: var(--key);
  border: 2px solid transparent;
  border-radius: 20px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 5px 14px;
  text-transform: capitalize;
  transition: border-color 0.15s;
}
.level-btn:hover  { border-color: var(--muted); }
.level-btn.active { border-color: var(--accent); color: var(--accent); }

/* ---------- Status ---------- */
.status {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 1.05rem;
  justify-content: center;
  min-height: 1.3em;
  text-align: center;
}

.status .mini-digit {
  display: inline-block;
  width: 17px;
  height: 30px;
  margin: 0 3px;
  vertical-align: middle;
}

/* ---------- Equation ---------- */
/* No width:100% here on purpose — it must size to its own content (which can
   be wider than .game on a long equation) so the JS scale-to-fit below can
   shrink the whole box+content as one unit. If this box had a fixed width,
   scaling it would shrink the overflowing children by the same factor as the
   box itself, leaving the overflow-to-box ratio (and the clipping) unchanged. */
.equation {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: center;
}

.cell {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cell.digit    { width: 76px; height: 132px; }
.cell.operator { width: 60px; height: 132px; }
.cell.equals   { width: 60px; height: 132px; }

/* Digit SVGs fill their cell (their viewBox aspect ratio already matches);
   operator/equals SVGs stay their natural small size and get centered by
   the flexbox above, instead of filling — that's what kept them off-center.
   60px/76px are sized so a stick's rendered length matches a digit stick's
   (~40px) instead of looking shorter. Doubled from the original 30px/38px/
   20px so matchsticks are easier to tap accurately on a phone. */
.cell.digit svg    { display: block; width: 100%; height: 100%; }
.cell.operator svg { display: block; width: 60px; height: 60px; }
.cell.equals svg   { display: block; width: 60px; height: 76px; }

.stick-shaft {
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke 0.15s, opacity 0.15s;
}
.stick-shaft.unlit {
  stroke: var(--key);
  opacity: 0.4;
  stroke-dasharray: 2 4;
}
.stick-shaft.lit {
  stroke: var(--stick);
  opacity: 1;
}

.stick-head {
  transition: fill 0.15s, opacity 0.15s;
}
.stick-head.unlit {
  fill: none;
}
.stick-head.lit {
  fill: var(--stick-tip);
  opacity: 1;
}

.stick-hit {
  stroke: transparent;
  stroke-width: 14;
}

.stick-group.clickable {
  cursor: pointer;
}

.stick-group.selected .stick-shaft {
  stroke: var(--accent);
}
.stick-group.selected .stick-head {
  fill: var(--accent);
  opacity: 1;
}
.stick-group.selected {
  animation: pulse 0.6s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { opacity: 1; }
  to   { opacity: 0.5; }
}

.stick-group.demo-flash .stick-shaft {
  stroke: #facc15;
  opacity: 1;
  stroke-dasharray: none;
}
.stick-group.demo-flash .stick-head {
  fill: #facc15;
  opacity: 1;
}
.stick-group.demo-flash {
  animation: demo-flash 0.4s ease-in-out infinite alternate;
}

@keyframes demo-flash {
  from { opacity: 1; }
  to   { opacity: 0.25; }
}

/* ---------- Stats ---------- */
.stats {
  color: var(--muted);
  font-size: 0.85rem;
}
.stats strong { color: var(--text); }

/* ---------- Result banner ---------- */
.result {
  background: var(--panel);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  padding: 10px 20px;
  text-align: center;
  width: 100%;
}
.result.win { color: var(--correct); }

/* ---------- Buttons ---------- */
.actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

/* Show Me keeps its space reserved even when inactive, so Reset and New
   Game never shift position depending on whether the puzzle is solved. */
.actions-inactive {
  visibility: hidden;
  pointer-events: none;
}

.action-btn {
  background: var(--key);
  border: none;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  flex: 1;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px 16px;
}
.action-btn:hover { background: var(--key-hover); }
.action-btn:disabled { opacity: 0.5; cursor: default; }

.new-game {
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #0f172a;
  cursor: pointer;
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  padding: 10px 32px;
}
.new-game:hover  { opacity: 0.9; }
.new-game:active { transform: scale(0.97); }

/* ---------- Solve dialog ---------- */
.solve-dialog {
  background: var(--panel);
  border: none;
  border-radius: 12px;
  color: var(--text);
  padding: 20px;
  width: min(90vw, 340px);
}
.solve-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.solve-dialog h2 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.solve-dialog p {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 10px;
}

#solve-input {
  background: var(--key);
  border: 1px solid var(--key-hover);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  padding: 10px 12px;
  width: 100%;
}
#solve-input:focus {
  border-color: var(--accent);
  outline: none;
}

.solve-error {
  color: var(--wrong) !important;
  font-size: 0.85rem !important;
  margin-top: 8px !important;
}

.solve-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.solve-actions button {
  flex: 1;
}

/* ---------- Home logo ---------- */
.home-btn {
  display: block;
  margin: 1.5rem auto 0;
  max-width: 220px;
}
.home-btn img { display: block; width: 100%; }
.home-btn:hover { opacity: 0.8; }