/* ===========================================================
   Simon — game-specific styles only.
   Chrome (body, h1, button, #status, .hint, .score-box) all come
   from shared.css; we only style the board and pads here.
   =========================================================== */

/* Tighten the vertical rhythm a touch from the shared 20px default */
body { gap: 16px; }

/* Row of score boxes */
.stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- board ---------- */
/* A rounded "console" holding the four pads in a 2x2 grid.        */
/* clamp() keeps it playable from ~360px phones up to the desktop. */
#board {
  --gap: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  width: clamp(280px, 86vw, 420px);
  aspect-ratio: 1 / 1;
  padding: var(--gap);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 8px 26px var(--shadow);
}

/* ---------- pads ---------- */
/* Each pad is a coloured quarter. Dim by default, bright when lit. */
.pad {
  /* reset the inherited shared button look */
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  border: none;
  cursor: pointer;
  background: var(--pad);
  /* Dim state: desaturate + darken via an overlay-free filter */
  filter: brightness(0.55) saturate(0.85);
  transition: filter 0.12s ease, transform 0.08s ease;
  /* Rounded outer corners so the 2x2 reads as one disc-ish shape */
  -webkit-tap-highlight-color: transparent;
}
#pad-green  { border-radius: 80% 12px 12px 12px; }
#pad-red    { border-radius: 12px 80% 12px 12px; }
#pad-yellow { border-radius: 12px 12px 12px 80%; }
#pad-blue   { border-radius: 12px 12px 80% 12px; }

/* Don't let the shared button:hover opacity fade pads */
.pad:hover { opacity: 1; }

/* Faint cue that pads are pressable while it's the player's turn */
#board.playable .pad:hover { filter: brightness(0.7) saturate(0.95); }

/* Lit state — used for sequence playback and on press */
.pad.lit {
  filter: brightness(1.25) saturate(1.1);
  transform: scale(0.97);
  box-shadow: 0 0 24px var(--pad);
}

/* While the computer is showing the sequence, ignore pointer input */
#board.locked .pad { cursor: default; }

/* Failure flash: tint the whole board red briefly */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}
#board.fail { animation: shake 0.3s ease; }

/* Keep focus visible for keyboard users without a heavy ring */
.pad:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Start button sizing override */
#start { padding: 10px 36px; }