/* Sequence — Simon-style growing pattern recall. */

.game-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.head-btns { display: flex; gap: 6px; }

.sq-stage-text { text-align: center; font-weight: 800; font-size: 1.15rem; margin: var(--space-3) 0 2px; }
.sq-stage-sub { text-align: center; margin: 0 0 var(--space-2); font-size: 0.9rem; }

.sq-tiles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  max-width: 340px; margin: var(--space-3) auto;
}
.sq-tile {
  aspect-ratio: 1; min-height: 120px; border-radius: var(--radius);
  cursor: pointer; display: grid; place-items: center; padding: 0;
  background: var(--surface); border: 2px solid var(--border);
  transition: background 120ms var(--ease), border-color 120ms var(--ease), transform 90ms var(--ease);
}
.sq-tile[data-i="0"] { --tile-color: #22c55e; }
.sq-tile[data-i="1"] { --tile-color: #f59e0b; }
.sq-tile[data-i="2"] { --tile-color: #ef4444; }
.sq-tile[data-i="3"] { --tile-color: #a855f7; }
.sq-glyph { font-size: 2.1rem; color: var(--tile-color); opacity: 0.5; }

/* The flash is a plain class swap driven by a JS setTimeout, never a CSS
   @keyframes animation — common/theme.css zeroes animation/transition
   duration under prefers-reduced-motion with !important, which would make a
   keyframed flash instantaneous (and the game unplayable) for those users.
   The static background/border/glow below still shows for the full JS-timed
   duration regardless of the transition speed; the transition only softens
   the edges for everyone else. */
.sq-tile.lit {
  background: color-mix(in srgb, var(--tile-color) 55%, var(--bg-elev));
  border-color: var(--tile-color);
  box-shadow: 0 0 22px color-mix(in srgb, var(--tile-color) 55%, transparent);
}
.sq-tile.lit .sq-glyph { opacity: 1; }
.sq-tile.wrong { border-color: #f87171; background: color-mix(in srgb, #f87171 16%, var(--bg-elev)); }
.sq-tile:disabled { cursor: default; }
.sq-tile:active:not(:disabled) { transform: scale(0.96); }
.sq-tile:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }

.sq-progress { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: var(--space-2) 0; }
.sq-progress .pip { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.sq-progress .pip.on { background: var(--accent); }

#btn-start { margin-top: var(--space-3); }

.sq-meter { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; max-width: 320px; margin: var(--space-2) auto; }
.sq-pip { width: 14px; height: 14px; border-radius: 3px; background: var(--border); }
.sq-pip.on { background: var(--accent); }

.end-emoji { font-size: 3rem; }
#end-score { font-size: 1.4rem; font-weight: 800; margin: 8px 0 4px; }