/* arrow — Middle Arrow (flanker). Stimulus row in the top area, the answer pad in the bottom 45%. */
.arrow-stim { min-height: clamp(130px, 24dvh, 160px); }
.arrow-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.arrow-row { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; color: var(--stage-ink); }
.arrow-row svg { display: block; width: 100%; height: auto; }
.arrow-row.wrong { opacity: 0.4; }
.arrow-caption { margin: 0; min-height: 1.4em; font-size: 13px; color: #6A665F; text-align: center; }

/* never a fixed pad: it shrinks on short phones (iPhone SE, 360 × 600) so every key stays on screen */
.arrow-pad {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  height: min(340px, 42vh);
  height: clamp(200px, 42dvh, 340px);
}
/* four-way: up and down are full-width bars, left and right share the middle row (96 / 128 / 96 at full size) */
.arrow-pad.four { grid-template-rows: minmax(48px, 0.75fr) minmax(56px, 1fr) minmax(48px, 0.75fr); }
.arrow-pad.four .arrow-U, .arrow-pad.four .arrow-D { grid-column: 1 / -1; }
.arrow-pad.four .arrow-btn { flex-direction: row; gap: 12px; }

.arrow-btn { position: relative; overflow: hidden; min-height: 44px; user-select: none; -webkit-user-select: none; }
.arrow-btn svg { display: block; flex: none; }
/* a thin water ring where the thumb lands, a fainter second one just behind; lines stay 1 px as they grow */
.arrow-ripple { position: absolute; width: 0; height: 0; pointer-events: none; }
.arrow-ripple::before, .arrow-ripple::after {
  content: ''; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 1px solid var(--stage-dim); opacity: 0;
  animation: arrow-ripple 0.6s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}
.arrow-ripple::after { animation-delay: 0.14s; border-color: var(--stage-faint); }
@keyframes arrow-ripple { from { width: 12px; height: 12px; opacity: 0.85; } to { width: 200px; height: 200px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .arrow-ripple { display: none; } }

/* the check-in (Middle Arrow v4): a "+" in the middle of a fixed field; the row (drawn at its own 182 × 24 px)
   lands beside it, its centre ±37 px across and ±48 px up/down (set inline), so the field needs 2 × 60 px + room */
.arrow-v4 .arrow-wrap { gap: 14px; }
.arrow-field { position: relative; width: 100%; max-width: 320px; height: 136px; flex: none; color: var(--stage-ink); }
.arrow-fix { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; color: var(--stage-ink); }
.arrow-fix svg { display: block; }
.arrow-v4row { position: absolute; left: 50%; top: 50%; line-height: 0; }
.arrow-v4row svg { display: block; max-width: none; }