/* Math Arena (s-004). Used by william/pages/math-arena and alice/pages/math-arena.
   Phone first: the number pad sits at the bottom, in thumb reach (ADR-0005). */

.arena { display: flex; flex-direction: column; min-height: min(78dvh, 44rem); }
.arena-screen { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.arena-centre { justify-content: center; align-items: center; text-align: center; }

.arena-bar { display: flex; justify-content: space-between; font-family: var(--font-mono); color: var(--ink-soft); }

.arena-ring {
  --p: 1;
  width: min(64vw, 30dvh, 15rem); aspect-ratio: 1; margin-inline: auto;
  border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 360deg), var(--line) 0);
}
.arena-face {
  width: calc(100% - 18px); aspect-ratio: 1; border-radius: 50%;
  background: var(--bg); display: grid; place-content: center; text-align: center; gap: var(--space-2);
}
.arena-q { font: 700 var(--step-2)/1.1 var(--font-display); margin: 0; }
.arena-typed { font: 600 var(--step-2)/1 var(--font-mono); margin: 0; color: var(--accent); }

.arena-feedback { min-height: 1.6em; margin: 0; text-align: center; font-weight: 600; max-width: none; }
.arena-feedback.is-right { color: var(--accent); }
.arena-feedback.is-miss { color: var(--ink-soft); }

.arena-pad { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.arena-key { min-height: max(var(--tap), 7dvh); padding: 0; border-radius: var(--radius); font-size: var(--step-1); }

.arena-big { font: 700 var(--step-3)/1 var(--font-display); margin: 0; }
.arena-best { color: var(--ink-soft); margin: 0; }
.arena-note { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface); }
.arena-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.arena-go { min-width: 12rem; font-size: var(--step-1); }