.game-stage { width: 100%; max-width: 380px; position: relative; }
.game-stage .card { max-width: none; }
.game-stage.is-playing .hero { height: clamp(160px, calc(100svh - 340px), 560px); }
.game-stage.is-playing .card-inner { pointer-events: none; }
.game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 10; touch-action: none; }
.game-controls { width: 100%; max-width: 380px; margin-top: 14px; color: var(--legal); }
.game-readout { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.game-status { margin: 0; color: var(--legal); font-weight: 500; }
.game-status strong { font-size: 1.25rem; display: inline-block; min-width: 1ch; color: var(--accent); }
.game-hint { font-size: 0.75rem; margin: 5px 0 8px; }
.game-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.game-buttons button {
  min-height: 44px; padding: 0 14px; border: 1px solid #aaa9a3; border-radius: 22px;
  font: inherit; font-size: 0.8125rem; color: var(--legal); background: transparent; cursor: pointer;
}
.game-buttons button:hover { background: rgb(128 128 128 / 12%); }
.game-buttons button:first-child { background: var(--accent); color: white; border-color: var(--accent); }
body.game-active { padding-top: clamp(16px, 3vh, 28px); padding-bottom: 16px; overflow: hidden; overscroll-behavior: none; }
body.game-active .game-controls, body.game-active .legal { position: relative; z-index: 11; }
body.game-active .legal { margin-top: 4px; }
@media (prefers-color-scheme: dark) {
  .game-status strong { color: var(--focus); }
}

@media (max-height: 500px) {
  body.game-active { padding-top: 8px; }
  .is-playing .hero-text { padding: 0 16px 12px; gap: 8px; }
  .is-playing h1 { font-size: 1.5rem; margin-bottom: 4px; }
  .is-playing .role { font-size: 0.875rem; line-height: 1.3; }
  body.game-active .game-controls { margin-top: 8px; }
  body.game-active .game-hint { margin: 2px 0; }
  body.game-active .legal a { min-height: 36px; }
}