.app-version { margin: 20px 0 0; color: var(--muted); font-size: .85rem; text-align: center; }
.onboarding-scene { display: flex; flex-direction: column; min-height: min(680px, 80dvh); gap: 12px; padding: 16px 0; }
.onboarding-heading { font-size: 1rem; color: var(--muted); margin: 0; text-align: center; }
.tutorial-target { outline: 2px solid var(--focus); outline-offset: 2px; }
.tutorial-hint { color: var(--focus); line-height: 1.5; }
.quest-entry.tutorial-target { border-radius: 8px; padding: 14px 10px; margin: 8px 0; }
.onboarding-group-hint { margin: 0; padding: 10px 12px; border: 1px solid var(--edge-light); border-radius: 8px; font-size: .85rem; line-height: 1.5; }
.onboarding-cast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 16px; margin-top: auto; }
.onboarding-actor { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.onboarding-actor .onboarding-portrait { opacity: .5; }
.onboarding-actor.speaking .onboarding-portrait { opacity: 1; }
.onboarding-actor span { overflow-wrap: anywhere; text-align: center; font-size: .85rem; }
.onboarding-portrait { display: block; width: 100%; height: clamp(140px, 30dvh, 270px); object-fit: contain; image-rendering: pixelated; }
.onboarding-dialogue { border: 1px solid var(--edge-light); border-radius: 12px; background: var(--surface); padding: 16px; }
.speaker-benji .onboarding-speaker { display: block; text-align: right; }
.onboarding-speaker { color: var(--accent); }
.onboarding-line { min-height: 3em; margin: 12px 0 16px; font-size: 1.05rem; line-height: 1.6; overflow-wrap: anywhere; }
.onboarding-class { color: var(--focus); font-weight: 700; }
.onboarding-choices { display: flex; gap: 12px; flex-wrap: wrap; }
.onboarding-choices button { flex: 1; min-width: 90px; min-height: 48px; overflow-wrap: anywhere; }
.onboarding-choices .choice-selected { color: var(--on-accent); background: var(--accent); }
.onboarding-arena { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: auto 0 0; }
.onboarding-target { display: block; width: min(240px, 65vw); padding: 0; background: transparent; border: 0; outline: none; box-shadow: none; appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.onboarding-target:focus-visible { outline: none; }
.onboarding-target:focus-visible .onboarding-dummy { filter: drop-shadow(0 0 3px var(--focus)); }
.onboarding-target:disabled { opacity: 1; cursor: default; }
.onboarding-target:active { background: transparent; color: inherit; }
.onboarding-target:active:not(:disabled) .onboarding-dummy, .onboarding-target.pressed .onboarding-dummy { transform: scale(.95); }
.onboarding-dummy { display: block; height: clamp(160px, 28dvh, 260px); width: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.onboarding-target.defeated { opacity: .25; }
.repeat-actions .dummy-hit-controls { justify-items: center; }
.onboarding-health { width: min(280px, 80%); text-align: center; font-variant-numeric: tabular-nums; }
.onboarding-health progress { height: 12px; }
.scene-dummy .onboarding-cast { margin-top: 0; }
.scene-dummy .onboarding-portrait { height: 96px; }
.onboarding-rewards { display: grid; gap: 10px; }
.onboarding-reward { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: .9rem; }
.onboarding-reward-track { grid-column: 1 / -1; height: 6px; background: var(--surface-raised); overflow: hidden; border-radius: 3px; }
.onboarding-reward-track span { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: onboarding-fill 650ms ease-out both; animation-delay: calc(var(--reward-order) * 75ms); }
.onboarding-reward-note { color: var(--muted); font-size: .85rem; line-height: 1.5; }
@keyframes onboarding-fill { from { transform: scaleX(0); } to { transform: scaleX(var(--reward-fill, 1)); } }
@keyframes onboarding-enter { from { opacity: 0; } to { opacity: 1; } }
.onboarding-enter { animation: onboarding-enter 350ms ease-out; }
@media (max-height: 500px) and (orientation: landscape) {
  .onboarding-scene { min-height: 0; }
  .onboarding-portrait { height: 110px; }
  .onboarding-dummy { height: 130px; }
  .scene-dummy .onboarding-portrait { height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-reward-track span, .onboarding-enter { animation: none; }
  .onboarding-reward-track span { transform: scaleX(var(--reward-fill, 1)); }
}