/* joust.css - the tilt screen: a 16:9 canvas with HTML panels over it */
.screen-joust, .screen-duel { padding: 0; background: #0c0a12; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.joust-stage { position: relative; width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; }
.joust-canvas {
  width: 100%; height: 100%; display: block; image-rendering: pixelated;
  cursor: crosshair; touch-action: none; outline: none; user-select: none; -webkit-user-select: none;
}
.joust-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 16, .55); padding: 16px; overflow: auto;
}
.joust-overlay[hidden] { display: none; }
/* A panel's buttons ignore clicks for a moment after it appears (see panel() in the joust screens). */
.joust-panel.arming button { pointer-events: none; }
.joust-panel { max-width: 560px; width: 100%; text-align: center; max-height: 100%; overflow: auto; }
.joust-panel .kicker { font-style: italic; color: var(--limewash-dim); margin: 0; }
.joust-panel h2 { font-size: clamp(1.4rem, 3.4vw, 2.2rem); color: var(--gold-hi); }
.joust-panel h2.win { color: #ffe066; }
.joust-panel h2.lose { color: #ff8080; }
.joust-panel .row { justify-content: center; margin-top: 12px; }
.joust-panel .stack { display: flex; flex-direction: column; gap: 8px; max-width: 280px; margin: 0 auto; }
.joust-panel .final-score { font-family: var(--serif-sc); font-size: 1.3rem; }
.joust-panel .small { font-size: .9rem; margin: 0 0 4px; }
.controls { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; text-align: left; margin: 12px 0; font-size: .95rem; }
.controls dt { font-family: var(--serif-sc); color: var(--gold); }
.controls dd { margin: 0; }

.pause-btn { position: absolute; left: 8px; bottom: 8px; opacity: .7; min-height: 30px; }
/* the spur button only shows on touch screens; elsewhere it's the space bar */
.spur-btn { display: none; position: absolute; right: 12px; bottom: 12px; min-width: 88px; min-height: 64px; opacity: .85; }
@media (pointer: coarse) { .spur-btn { display: block; } }

/* online duels: who is ready */
.ready-line { font-style: italic; color: var(--gold-hi); margin: 8px 0 0; }