/* Echo — widget-local styles. Four real buttons in a 2x2 grid; the flash
   bloom, the dim-during-watch state, and the dead-tap shrug all live here
   as classes the renderer toggles. Tile colours are CSS variables tuned per
   scheme: rich and saturated on dark, deepened on light so white-page
   glare never washes a flash. The glyphs carry identity if colours shift. */

:root {
  --eo-t0: #2e9e57;   /* green,  C4 */
  --eo-t0-lit: #5ade8e;
  --eo-t1: #ca4141;   /* red,    E4 */
  --eo-t1-lit: #ff7d70;
  --eo-t2: #3271c4;   /* blue,   G4 */
  --eo-t2-lit: #6fb0ff;
  --eo-t3: #d1912c;   /* amber,  A4 */
  --eo-t3-lit: #ffd066;
  --eo-glyph: rgba(255, 255, 255, 0.5);
  --eo-board-bg: #e8ecf4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --eo-t0: #1f7a41;
    --eo-t0-lit: #4fe087;
    --eo-t1: #a83535;
    --eo-t1-lit: #ff6f61;
    --eo-t2: #285da6;
    --eo-t2-lit: #62a8ff;
    --eo-t3: #ab7423;
    --eo-t3-lit: #ffc957;
    --eo-glyph: rgba(255, 255, 255, 0.45);
    --eo-board-bg: #1a2130;
  }
}

.arena-eo {
  height: auto;
  min-height: 0;
  padding: 16px 0 20px;
  position: relative;
}

.eo-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 3vw, 20px);
  width: min(100%, 420px);
  margin: 0 auto;
  padding: clamp(12px, 3vw, 20px);
  background: var(--eo-board-bg);
  border-radius: 20px;
  transition: opacity 250ms ease;
}

/* the whole board dims a touch while it performs; full brightness is the
   "your turn" signal (plus the HUD cue — never wonder whose turn it is) */
.eo-board.eo-watching { opacity: 0.86; }
.eo-board.eo-watching .eo-tile { cursor: default; }

.eo-tile {
  aspect-ratio: 1;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: filter 90ms ease-out, box-shadow 90ms ease-out, transform 90ms ease-out;
  /* the decay: flashes settle rather than snap off */
  transition-duration: 90ms;
}

.eo-tile svg {
  width: 34%;
  height: 34%;
  fill: var(--eo-glyph);
  stroke: var(--eo-glyph);
}

.eo-t0 { background: var(--eo-t0); }
.eo-t1 { background: var(--eo-t1); }
.eo-t2 { background: var(--eo-t2); }
.eo-t3 { background: var(--eo-t3); }

/* the flash: bloom in fast, settle out slow (the renderer removes the
   class; the longer outgoing transition is the decay) */
.eo-tile.eo-lit {
  transition-duration: 60ms;
  filter: brightness(1.25) saturate(1.15);
  transform: scale(1.03);
}
.eo-t0.eo-lit { background: var(--eo-t0-lit); box-shadow: 0 0 34px var(--eo-t0-lit); }
.eo-t1.eo-lit { background: var(--eo-t1-lit); box-shadow: 0 0 34px var(--eo-t1-lit); }
.eo-t2.eo-lit { background: var(--eo-t2-lit); box-shadow: 0 0 34px var(--eo-t2-lit); }
.eo-t3.eo-lit { background: var(--eo-t3-lit); box-shadow: 0 0 34px var(--eo-t3-lit); }

.eo-tile:not(.eo-lit) {
  transition-duration: 320ms; /* the settle */
}

/* input echoes are snappier than playback: call-and-response texture */
.eo-tile.eo-echo {
  transition-duration: 40ms;
}

/* dead tap during playback: a visible shrug, never a silent eat */
@keyframes eo-shrug {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-3px); }
  60% { transform: translateX(2px); }
}
.eo-tile.eo-dead { animation: eo-shrug 220ms ease; }

/* the respect pulse: after a wrong tap, show what it should have been */
@keyframes eo-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}
.eo-tile.eo-correct { animation: eo-pulse 600ms ease 2; }

.eo-cue { min-width: 8ch; text-align: center; }

.eo-hint {
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}

.eo-tier {
  font-style: italic;
  color: var(--muted);
  margin-top: 2px;
}

/* --- toolbar (house pattern, sound only) ------------------------------------------ */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tool[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.tool svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool svg .fill { fill: currentColor; stroke: none; }

#soundBtn .icon-when-on { display: none; }
#soundBtn[aria-pressed="true"] .icon-when-on { display: initial; }
#soundBtn[aria-pressed="true"] .icon-when-off { display: none; }

.toolbar-spacer { flex: 1; }

.toolbar .hud-chip strong { font-variant-numeric: tabular-nums; }

kbd {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface);
  font-size: 0.85em;
}

/* results replace the board on phones (house "ended" pattern) */
.arena-eo.ended .eo-board { display: none; }
.arena-eo.ended { height: auto; }
.arena-eo.ended .overlay { position: static; min-height: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* bloom/decay become plain high-contrast states; the shrug becomes a
     border blink; pacing itself is game content and stays untouched */
  .eo-tile, .eo-tile:not(.eo-lit), .eo-tile.eo-lit, .eo-tile.eo-echo {
    transition: none;
    transform: none;
  }
  .eo-tile.eo-lit {
    filter: none;
    outline: 5px solid var(--eo-glyph);
    outline-offset: -5px;
    box-shadow: none;
  }
  .eo-tile.eo-dead {
    animation: none;
    outline: 3px dashed var(--eo-glyph);
    outline-offset: -3px;
  }
  .eo-tile.eo-correct { animation: none; outline: 5px solid var(--eo-glyph); outline-offset: -5px; }
  .eo-board { transition: none; }
}