:root {
  color-scheme: dark;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  color: #fff6de;
  background: #192323;
  --orange: #ff852e;
  --ink: #152323;
}
* { box-sizing: border-box; min-width: 0; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; }
button, select { font: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #fff0aa; outline-offset: -3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.game-screen, .home, .practice { width: 100%; height: 100%; min-height: 0; overflow: clip; }
.home, .practice { position: relative; background: url('./assets/academy.jpg') center center / cover no-repeat; }
.home::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#101c2140,#10212105 40%,#101c21a6),linear-gradient(0deg,#101c21b0,transparent 35%); pointer-events: none; }
.brand { position: absolute; left: 3vw; top: 3vh; font-size: clamp(14px,2.7vmin,24px); font-weight: 950; letter-spacing: -1px; text-shadow: 0 2px 3px #000; }
.brand span { color: var(--orange); }
.brand b { margin-left: 12px; color: #ffecb8; }
.home-title { position: absolute; left: 7vw; top: 32%; transform: rotate(-4deg); text-shadow: 0 3px 0 #142427,0 6px 24px #000; }
.home-title p { font-size: clamp(12px,2.5vmin,22px); letter-spacing: .22em; font-weight: 900; margin: 0 0 12px; }
.home-title h1 { font-size: clamp(30px,8.5vmin,100px); font-style: italic; letter-spacing: -.065em; line-height: .95; margin: 0; color: #ffb33f; -webkit-text-stroke: 1px #2f251c; }
.home-title h1 span { display: block; color: #ff7729; }
.home-subtitle { display: block; margin-top: 18px; font-size: clamp(14px,2.5vmin,22px); font-weight: 700; }
.mode-list { position: absolute; right: 7vw; top: 25%; width: min(35vw,410px); height: 53%; display: grid; grid-template-rows: repeat(4,minmax(0,1fr)); gap: clamp(6px,1.6vh,18px); }
.mode { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 clamp(12px,2.5vw,30px); border: 2px solid #b2a47c; border-left: 6px solid #b2a47c; border-radius: 3px; background: #172b2bea; color: #e2dccb; box-shadow: 0 4px 0 #0a1616a0; }
.mode strong { font-size: clamp(14px,2.8vmin,25px); }
.mode small { font-size: clamp(10px,1.65vmin,13px); color: #b4bdaf; white-space: nowrap; }
.mode.available { background: #f18c31; color: #202923; border-color: #ffdb8b; }
.mode.available:hover { background: #ffac48; }
.mode.available span { font-size: 24px; }
.home-footer { position: absolute; left: 0; bottom: 3vh; width: 100%; margin: 0; text-align: center; font-size: clamp(10px,1.7vmin,14px); letter-spacing: .15em; }
/* The three tracks consume the viewport exactly; controls are overlays within them. */
.practice { display: grid; grid-template-rows: minmax(0,40%) minmax(0,20%) minmax(0,40%); }
.practice > section { position: relative; width: 100%; height: 100%; min-height: 0; overflow: clip; }
.camera-panel { background: #0b171be0; }
.camera-wrap { position: absolute; inset: 0; }
.camera-wrap video { display: block; width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
.camera-toolbar, .arena-toolbar { position: absolute; z-index: 4; top: clamp(6px,1.5vh,16px); left: clamp(8px,2vw,24px); right: clamp(8px,2vw,24px); display: flex; align-items: center; gap: 12px; }
.back, #camera-status, .quiet, select, .character-options { background: #142223e8; border: 1px solid #b4b58a60; border-radius: 4px; color: #fff6de; }
.back, #camera-status { padding: 8px 12px; font-size: 14px; }
#camera-status { font-size: 12px; }
.jutsu-picker { margin-left: auto; }
select { padding: 8px 12px; max-width: 40vw; font-size: 14px; }
#camera-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
#camera-placeholder strong { font-size: clamp(16px,3vh,26px); }
#camera-placeholder p { margin: 0; color: #c4cec8; font-size: 14px; }
.primary { padding: 10px 18px; font-size: 14px; font-weight: 800; color: #17241e; background: var(--orange); border: 1px solid #ffd391; border-radius: 4px; white-space: nowrap; }
.primary:hover { background: #ffae56; }
.primary:disabled { background: #394640; color: #b5c0b5; border-color: #7c8b7740; }
.camera-feedback { position: absolute; z-index: 3; bottom: 7px; left: 12px; right: 12px; text-align: center; pointer-events: none; }
.camera-feedback p { margin: 0; font-size: 12px; line-height: 1.25; text-shadow: 0 1px 4px #000; }
.camera-feedback .error { background: #4c1819f2; color: #ffe4de; padding: 6px; border-radius: 4px; }
.camera-feedback:has(.error:not([hidden])) #camera-message { display: none; }
.camera-panel:has(#live-overlay:not([hidden])) .camera-feedback { display: none; }
.live-overlay { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.live-overlay span { background: #142223db; padding: 6px 10px; border-radius: 4px; font-size: 14px; }
.quiet { padding: 6px 10px; font-size: 14px; }
.sequence-panel { border-block: 2px solid #d6b465; background: #102425e8; }
.signs { height: 100%; list-style: none; display: flex; align-items: stretch; justify-content: center; gap: clamp(6px,1vw,14px); margin: 0; padding: clamp(4px,1vh,10px) 10px; }
.sign-card { position: relative; height: 100%; width: min(24vw,18vh); flex: 0 1 min(24vw,18vh); min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) clamp(20px,3.5vh,30px) 3px; border: 2px solid transparent; border-radius: 4px; background: #12201f; opacity: .65; overflow: clip; }
.sign-card.active { border-color: #ffb44a; opacity: 1; }
.sign-card.done { border-color: #99db84; opacity: 1; }
.sign-image { min-height: 0; overflow: clip; }
.sign-image img { width: 100%; height: 100%; display: block; object-fit: contain; }
.sign-meta { display: grid; place-items: center; font-size: clamp(12px,2vh,16px); text-transform: capitalize; }
.sign-meta small, .sign-state { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.sign-progress { height: 3px; background: #314335; }
.sign-progress span { display: block; height: 100%; width: 0; background: #ffb44a; transition: width 70ms linear; }
.done .sign-progress span { background: #99db84; }
.character-panel { background: linear-gradient(#12281d20,#10211855); }
.arena { position: relative; width: 100%; height: 100%; overflow: clip; }
.arena-toolbar { justify-content: space-between; }
.character-options { display: flex; overflow: clip; }
.character-options button { padding: 8px 14px; background: transparent; color: #e5e8d6; border: 0; font-size: 14px; }
.character-options button[aria-pressed=true] { background: #ef9b3a; color: #14211c; font-weight: 800; }
.arena-caption { position: absolute; z-index: 2; left: 5vw; top: 43%; max-width: 40%; text-shadow: 0 2px 4px #102015,0 0 10px #102015; }
.arena-caption p { margin: 0 0 8px; font-size: clamp(10px,1.7vh,14px); letter-spacing: .13em; font-weight: 800; }
.arena-caption h2 { margin: 0; font-size: clamp(16px,3.5vh,32px); }
.sprite-space { position: absolute; width: 40%; height: 72%; left: 45%; bottom: 8%; display: grid; place-items: center; }
#sprite { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 5px #11221890); z-index: 2; }
.arena-footer { position: absolute; z-index: 3; bottom: 5px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: end; gap: 12px; font-size: 12px; text-shadow: 0 1px 4px #000; }
.arena-footer p { margin: 0; max-width: 75%; }
.arena-footer span { white-space: nowrap; }
.jutsu-effect { position: absolute; inset: 5%; opacity: 0; border-radius: 50%; background: radial-gradient(circle,#eefcff 0,#60d9ff88 20%,transparent 67%); filter: blur(6px); }
.casting .sprite-space { animation: lunge 1.7s ease-in-out; }
.casting .jutsu-effect { animation: burst 1.7s ease-out; }
.casting.fireball .jutsu-effect { background: radial-gradient(circle,#fff3bb,#ff772ac9 30%,transparent 65%); }
.casting .arena-caption h2 { color: #a5edff; }
.casting.fireball .arena-caption h2 { color: #ffd58b; }
@keyframes lunge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3vw) scale(.96); } 48%,65% { transform: translateX(7vw) scale(1.08); } }
@keyframes burst { 0%,100% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; transform: scale(1.3); } 65% { opacity: 1; transform: translateX(4vw) scale(1.7); } }
@media (max-aspect-ratio: 3/4) {
  .home-title { top: 13%; left: 10%; }
  .home-title h1 { font-size: 16vmin; }
  .home-title h1 span { display: inline; }
  .home-title p { font-size: 3vmin; }
  .home-subtitle { font-size: 3.5vmin; }
  .mode-list { top: 42%; height: 45%; right: 10%; width: 80%; }
  .mode strong { font-size: 4.5vmin; }
  .mode small { font-size: 3vmin; }
  .camera-toolbar { gap: 6px; }
  #camera-status { display: none; }
  .arena-caption { left: 4vw; max-width: 44%; }
  .sprite-space { width: 52%; left: 44%; height: 68%; bottom: 13%; }
  .arena-footer span { display: none; }
  .arena-footer p { max-width: 100%; }
  .character-options button { padding-inline: 10px; }
  .primary { padding-inline: 12px; }
}
@media (max-height: 500px) {
  .camera-toolbar, .arena-toolbar { top: 4px; }
  .back, select, .primary, .character-options button { padding: 5px 9px; font-size: 12px; }
  #camera-status, #camera-placeholder p { display: none; }
  #camera-placeholder { gap: 5px; }
  #camera-placeholder strong { font-size: 14px; }
  .camera-feedback p, .arena-footer { font-size: 10px; }
  .arena-caption { top: 38%; }
  .arena-caption p { margin-bottom: 3px; }
  .sign-meta { font-size: 11px; }
  .sprite-space { height: 68%; bottom: 10%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; } }
.music-toggle { position: absolute; z-index: 5; top: 3vh; right: 3vw; }
.casting.earth .jutsu-effect { background: radial-gradient(circle,#ffe4a0,#d1a252bb 35%,transparent 70%); }
.casting.water .jutsu-effect { background: radial-gradient(circle,#c8ffff,#228de6bb 35%,transparent 70%); }
.casting.clone .jutsu-effect { background: radial-gradient(circle,#fff,#ddd9 35%,transparent 70%); }

.casting.wind .jutsu-effect { background: radial-gradient(circle,#f0fff7,#80e6ae99 35%,transparent 70%); }
.fireball-vfx { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; overflow: hidden; }
.fireball-light, .fireball-flare { position: absolute; inset: 14% 12%; border-radius: 50%; pointer-events: none; }
.fireball-light { background: radial-gradient(ellipse at 54% 48%, #ffd36c66 0, #ff7c2c30 35%, transparent 70%); filter: blur(12px); opacity: .72; }
.fireball-flare { background: radial-gradient(circle, #fff4bd 0, #ff8a2dce 18%, #ff4a1838 42%, transparent 68%); opacity: 0; transform: scale(.2); }
.fireball-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; mix-blend-mode: screen; filter: saturate(1.15) drop-shadow(0 0 13px #ff7f2c80); opacity: 0; }
.fireball-frame-b { transform: translateX(.35%); }
.fireball-embers { position: absolute; inset: 12% 20%; pointer-events: none; }
.fireball-embers i { position: absolute; width: 4px; height: 8px; border-radius: 60% 40% 60% 40%; background: #ffd777; box-shadow: 0 0 7px #ff7b22; opacity: 0; }
.fireball-embers i:nth-child(1) { left: 9%; bottom: 16%; --ember-x: -18px; --ember-delay: 0ms; }
.fireball-embers i:nth-child(2) { left: 28%; bottom: 7%; --ember-x: 10px; --ember-delay: 130ms; }
.fireball-embers i:nth-child(3) { left: 61%; bottom: 15%; --ember-x: -5px; --ember-delay: 240ms; }
.fireball-embers i:nth-child(4) { left: 76%; bottom: 5%; --ember-x: 21px; --ember-delay: 80ms; }
.fireball-embers i:nth-child(5) { left: 46%; bottom: 24%; --ember-x: 12px; --ember-delay: 320ms; }
.fireball-ready .fireball-vfx { opacity: .62; }
.fireball-ready .fireball-light { opacity: .9; }
.fireball-rising .fireball-embers i { animation: fireball-ember-rise 850ms ease-out var(--ember-delay) infinite; }
.fireball-cast .fireball-vfx, .fireball-impact .fireball-vfx, .fireball-fade .fireball-vfx { opacity: 1; }
.fireball-cast .fireball-frame-a, .fireball-cast .fireball-frame-b { opacity: .78; }
.fireball-impact .fireball-frame-a, .fireball-fade .fireball-frame-a { opacity: .78; }
.fireball-flicker .fireball-frame-a { animation: fireball-pose-a 160ms steps(1, end) infinite; }
.fireball-flicker .fireball-frame-b { animation: fireball-pose-b 160ms steps(1, end) infinite; }
.fireball-cast .fireball-flare { animation: fireball-cast-flare 520ms ease-out both; }
.fireball-impact .fireball-flare { animation: fireball-impact-flare 640ms ease-out both; }
.fireball-cast .sprite-space { animation: fireball-recoil 1.45s ease-out both; }
.fireball-cast #sprite, .fireball-impact #sprite { filter: drop-shadow(0 8px 5px #11221890) drop-shadow(0 0 20px #ff8b3566); }
.fireball-fade .fireball-vfx { animation: fireball-vfx-fade 280ms ease-out both; }
@keyframes fireball-pose-a { 0%,49.99% { opacity: .82; } 50%,100% { opacity: 0; } }
@keyframes fireball-pose-b { 0%,49.99% { opacity: 0; } 50%,100% { opacity: .82; } }
@keyframes fireball-ember-rise { 0% { opacity: 0; transform: translate3d(0, 8px, 0) scale(.7); } 25% { opacity: .8; } 100% { opacity: 0; transform: translate3d(var(--ember-x), -32px, 0) scale(.2); } }
@keyframes fireball-impact-flare { 0% { opacity: 0; transform: scale(.25); } 18% { opacity: .95; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes fireball-cast-flare { 0% { opacity: 0; transform: scale(.4); } 22% { opacity: .78; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes fireball-recoil { 0%,100% { transform: translateX(0); } 18% { transform: translateX(-1.3vw) scale(.985); } 42% { transform: translateX(2.2vw) scale(1.015); } 62% { transform: translateX(-.5vw); } }
@keyframes fireball-vfx-fade { from { opacity: 1; } to { opacity: 0; } }
.fireball-reduced .sprite-space { animation: none; }
.fireball-reduced .fireball-frame-a { opacity: .82; }
.fireball-reduced .fireball-frame-b, .fireball-reduced .fireball-embers { display: none; }
.fireball-reduced .fireball-light { opacity: .9; }
.fireball-reduced.fireball-impact .fireball-flare { animation: none; opacity: .12; transform: none; }
.fireball-reduced .fireball-vfx { animation: none; opacity: .78; }
.fireball-reduced .fireball-flare { animation: none; opacity: .12; transform: none; }
.lightning-vfx { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; overflow: hidden; }
.lightning-corona, .lightning-filaments, .lightning-bloom { position: absolute; inset: 0; pointer-events: none; }
.lightning-corona { inset: 4%; background: radial-gradient(ellipse at center, transparent 38%, #72ddff0c 65%, #9cecff25 91%, transparent 100%); filter: blur(9px); opacity: .7; }
.lightning-filaments { inset: 5%; border: 1px solid #9beaff32; box-shadow: inset 0 0 13px #41c9ff2b, 0 0 15px #36bfff30; opacity: .72; }
.lightning-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; mix-blend-mode: screen; filter: saturate(1.35) brightness(1.08) drop-shadow(0 0 12px #54dfffaa); opacity: 0; }
.lightning-frame-b { transform: translateX(.2%); }
.lightning-bloom { inset: 12% 18%; border-radius: 50%; background: radial-gradient(ellipse, #f1fdffb8 0, #62dfff4a 24%, transparent 70%); filter: blur(7px); opacity: 0; transform: scale(.28); }
.lightning-ready .lightning-vfx { opacity: .34; }
.lightning-ready .lightning-corona { opacity: .45; }
.lightning-cast .lightning-vfx, .lightning-impact .lightning-vfx, .lightning-fade .lightning-vfx { opacity: 1; }
.lightning-cast .lightning-frame-a, .lightning-cast .lightning-frame-b { opacity: .76; }
.lightning-impact .lightning-frame-a, .lightning-fade .lightning-frame-a { opacity: .72; }
.lightning-flicker .lightning-frame-a { animation: lightning-pose-a 130ms steps(1, end) infinite; }
.lightning-flicker .lightning-frame-b { animation: lightning-pose-b 130ms steps(1, end) infinite; }
.lightning-cast .lightning-corona { animation: lightning-corona-pulse 520ms ease-out both; }
.lightning-impact .lightning-bloom { animation: lightning-impact-bloom 520ms ease-out both; }
.lightning-cast .fighter, .lightning-impact .fighter { filter: drop-shadow(0 0 11px #54dfff72); }
.lightning-fade .lightning-vfx { animation: lightning-vfx-fade 280ms ease-out both; }
@keyframes lightning-pose-a { 0%,49.99% { opacity: .78; } 50%,100% { opacity: 0; } }
@keyframes lightning-pose-b { 0%,49.99% { opacity: 0; } 50%,100% { opacity: .78; } }
@keyframes lightning-corona-pulse { 0% { opacity: .3; } 20% { opacity: .88; } 100% { opacity: .5; } }
@keyframes lightning-impact-bloom { 0% { opacity: 0; transform: scale(.28); } 16% { opacity: .86; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes lightning-vfx-fade { from { opacity: 1; } to { opacity: 0; } }
.lightning-reduced .lightning-vfx { animation: none; opacity: .72; }
.lightning-reduced .lightning-frame-a { opacity: .62; }
.lightning-reduced .lightning-frame-b { display: none; }
.lightning-reduced .lightning-corona, .lightning-reduced .lightning-filaments { animation: none; opacity: .42; }
.lightning-reduced .lightning-bloom { animation: none; opacity: .12; transform: none; }
#survival-timer { color: #ffdd82; background: #102020ee; padding: 6px 10px; border: 1px solid #d6b465; border-radius: 4px; font-size: clamp(16px,3vmin,26px); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
#survival-timer.urgent { color: #ff8c76; border-color: #ff8c76; }
#survival-jutsu { margin-left: auto; max-width: 48%; font-size: clamp(12px,2vmin,16px); padding: 6px 10px; background: #142223ec; border-radius: 4px; }
#survival-result { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; background: #091513e8; padding: 20px; }
#survival-result > div { text-align: center; max-width: 100%; }
#survival-result h2 { font-size: clamp(24px,6vmin,54px); color: #ffae56; }
#survival-result p { font-size: 16px; }
#survival-result .back { display: inline-block; margin-left: 10px; }
.practice.single-mode { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: minmax(0,60%) minmax(0,40%); }
.practice.single-mode #single-battle { grid-column: 1 / -1; grid-row: 1; display: flex; flex-direction: column; background: #0d1623; border-bottom: 2px solid #d6b465; }
.practice.single-mode .camera-panel { grid-column: 1; grid-row: 2; }
.practice.single-mode .sequence-panel { grid-column: 2; grid-row: 2; }
.practice.single-mode .character-panel { display: none; }
.single-battle-head { flex: 0 0 auto; display: grid; grid-template-columns: 1.3fr minmax(92px, .65fr) minmax(72px, .55fr) minmax(92px, .65fr); align-items: center; gap: clamp(8px, 2vw, 24px); padding: clamp(6px, 1.4vh, 14px) clamp(10px, 2.3vw, 28px); background: linear-gradient(90deg, #17253c, #152431 50%, #39251e); }
.battle-kicker { margin: 0 0 3px; color: #a9b6bd; font-size: clamp(9px, 1.4vmin, 12px); letter-spacing: .13em; font-weight: 800; }
.single-battle-head h2 { margin: 0; color: #ffb84c; font-size: clamp(18px, 3vmin, 30px); }
.battle-fighter { text-align: left; }
.battle-fighter.cpu { text-align: right; }
.battle-fighter strong { display: block; color: #f0dba8; font-size: clamp(12px, 2.2vmin, 20px); }
.battle-fighter small { display: block; margin: 3px 0 5px; color: #9aa8ad; font-size: clamp(9px, 1.3vmin, 12px); letter-spacing: .12em; }
.battle-hp { display: flex; gap: 4px; }
.battle-hp.cpu { flex-direction: row-reverse; }
.battle-hp i { display: block; width: clamp(24px, 4vw, 52px); height: clamp(8px, 1.5vh, 14px); border: 1px solid #ffdc85; background: #d8782b; box-shadow: inset 0 0 0 1px #ff9d40; }
.battle-hp i.lost { background: #26313c; border-color: #56606c; box-shadow: none; }
.battle-timer-wrap { display: grid; justify-items: center; gap: 3px; color: #b9c4c6; font-size: clamp(8px, 1.3vmin, 11px); letter-spacing: .08em; }
#single-timer { color: #ffdf84; font-size: clamp(18px, 3.1vmin, 30px); font-variant-numeric: tabular-nums; }
#single-timer.urgent { color: #ff8d78; }
.battle-arena-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-top: 1px solid #35465a; border-bottom: 1px solid #35465a; }
#single-arena { display: block; width: 100%; height: 100%; object-fit: contain; background: #142335; image-rendering: pixelated; }
.battle-callout { position: absolute; inset: 38% 0 auto; text-align: center; color: #fff0bc; font-size: clamp(16px, 4vmin, 42px); font-weight: 900; text-shadow: 3px 3px 0 #4a2830; opacity: 0; pointer-events: none; }
.battle-callout.show { animation: battle-callout 900ms ease-out both; }
@keyframes battle-callout { 0% { opacity: 0; transform: scale(1.3); } 18%,70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9); } }
.single-battle-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; min-height: 25px; padding: 4px 12px; color: #c5d0ca; font-size: clamp(10px, 1.4vmin, 13px); }
.single-battle-footer > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.single-battle-footer #single-rule { flex: 1 1 100%; order: 5; white-space: normal; overflow: visible; text-align: center; color: #e1d09d; font-size: .9em; }
#single-sound-slot .quiet { padding: 4px 7px; font-size: 11px; }
.greybox-note { color: #ffcc68; letter-spacing: .08em; font-size: .85em; }
#single-result { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; background: #091513e8; padding: 20px; }
#single-result > div { max-width: min(560px, 92vw); padding: 22px; border: 2px solid #d6b465; background: #132021f5; text-align: center; box-shadow: 0 8px 30px #0008; }
#single-result h2 { margin: 5px 0 12px; color: #ffae56; font-size: clamp(28px, 7vmin, 58px); }
#single-result p:not(.battle-kicker) { color: #d5dfd8; }
#single-result .back { display: inline-block; margin-left: 10px; padding: 10px 12px; }
@media (max-aspect-ratio: 3/4) {
  .practice.single-mode { grid-template-columns: 1fr; grid-template-rows: minmax(0,55%) minmax(0,24%) minmax(0,21%); }
  .practice.single-mode #single-battle { grid-column: 1; grid-row: 1; }
  .practice.single-mode .camera-panel { grid-column: 1; grid-row: 2; }
  .practice.single-mode .sequence-panel { grid-column: 1; grid-row: 3; }
  .practice.single-mode .signs { padding-block: 3px; }
  .practice.single-mode .sign-card { width: min(28vw, 13vh); flex-basis: min(28vw, 13vh); }
  .single-battle-head { grid-template-columns: 1.15fr .8fr .55fr .8fr; }
  .single-battle-head h2 { font-size: 16px; }
  .battle-fighter strong { font-size: 12px; }
}
.game-dialog { color: #fff6dc; background: #142321; border: 1px solid #a78445; border-radius: 12px; width: min(620px,94vw); max-height: 94dvh; padding: clamp(14px,3vmin,28px); overflow: hidden; }
.game-dialog::backdrop { background: #061210e8; }
.game-dialog h2 { color: #ffb35a; margin: 8px 65px 14px 0; font-size: clamp(18px,4vmin,28px); }
.dialog-close { float: right; }
.ranking-note, #leaderboard-status { font-size: 14px; margin: 8px 0; }
.game-dialog table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.game-dialog th, .game-dialog td { text-align: left; padding: 10px 5px; border-bottom: 1px solid #ffffff20; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-dialog th:first-child { width: 9%; }.game-dialog th:nth-child(2) { width: 43%; }
.board-pages { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 16px; font-size: 14px; }
.invite-dialog { text-align: center; }.invite-dialog img { display: block; width: min(260px,50vw,45dvh); margin: 12px auto; }.invite-dialog .primary { display: inline-block; }
#score-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin: 20px auto; max-width: 500px; }
#score-form label { flex-basis: 100%; }#player-name { min-width: 0; max-width: 60%; padding: 10px; border: 1px solid #ad8a47; border-radius: 5px; font: inherit; background: #fff8e9; color: #142321; }
#score-status { max-width: 500px; }#survival-result .quiet { margin-right: 8px; }
@media(max-height:500px) { .game-dialog th,.game-dialog td { padding-block: 4px; }.game-dialog h2 { margin-block: 3px; }.board-pages { margin-top: 6px; }#survival-result h2 { margin: 4px; }#score-form { margin: 8px auto; }#score-form label { flex-basis: auto; }#survival-result p { margin: 8px 0; } }
.multiplayer { position: relative; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(#102322bb,#102322e8),url('./assets/academy.jpg') center/cover; display: grid; place-items: center; padding: 4vmin; }
.multiplayer > .back { position: absolute; top: 3vh; left: 3vw; }
.mp-card { width: min(480px,94vw); text-align: center; padding: 20px; background: #122622ed; border: 1px solid #aa884e; border-radius: 10px; }
.mp-card h1 { color: #ffad50; font-size: clamp(24px,5vmin,40px); margin: 8px 0; }.mp-card p { margin: 12px 0; font-size: 14px; }
.mp-card label { display: block; margin: 12px 0 8px; }.mp-card input { width: 100%; background: #fff7e7; color: #182820; border: 1px solid #b79557; border-radius: 4px; padding: 12px; font: inherit; }
.mp-actions,.mp-join { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }.mp-actions > * { flex: 1; }.mp-join input { max-width: 65%; text-transform: uppercase; letter-spacing: .15em; }
#mp-room-code { display: block; font-size: clamp(24px,6vmin,42px); letter-spacing: .15em; color: #ffd183; margin: 12px 0; }
#mp-hud { position: absolute; z-index: 5; top: 52px; left: 3%; right: 3%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; pointer-events: none; }
#mp-hud > div { display: grid; grid-template-columns: 1fr auto; background: #0b1e1be8; padding: 6px 10px; border-radius: 5px; font-size: 14px; }
#mp-hud progress { width: 100%; height: 12px; grid-column: 1/-1; accent-color: #8fdb63; }#mp-hud span:last-child { grid-column: 2; grid-row: 1; }#mp-hud p { margin: 2px 0; font-size: 14px; text-shadow: 0 1px 3px #000; }#mp-hud button { pointer-events: auto; justify-self: end; }
#mp-finish { position: fixed; inset: 0; z-index: 30; background: #091b16f5; display: grid; place-items: center; text-align: center; padding: 20px; }#mp-finish h2 { color: #ffb85e; font-size: clamp(28px,7vmin,60px); }
@media(max-height:550px) { .mp-card { padding: 10px 18px; }.mp-card p { margin: 5px 0; }.mp-card input { padding: 7px; }.mp-card label { margin: 5px 0; }.mp-actions,.mp-join { margin-top: 6px; }#mp-room-code { margin: 5px; }#mp-hud { top: 35px; }#mp-hud > div { padding: 3px 6px; font-size: 12px; }#mp-hud progress { height: 8px; } }
.camera-share-option { display: flex !important; justify-content: center; align-items: center; gap: 8px; font-size: 14px; }.mp-card .camera-share-option input { width: auto; }.camera-share-note { color: #c3cdbb; font-size: 12px !important; }
/* Both battle modes can use this class: local player left, opponent right. */
.battle-layout .camera-wrap { right: 50%; border-right: 1px solid #8a9a7666; }
.opponent-camera-wrap { position: absolute; inset: 0 0 0 50%; background: #102021; }
.opponent-camera-wrap video { width: 100%; height: 100%; object-fit: contain; }
#opponent-camera-status { position: absolute; bottom: 4px; left: 8px; right: 8px; margin: 0; padding: 4px; background: #102321b8; font-size: 12px; text-align: center; }
.battle-layout .camera-feedback,.battle-layout .live-overlay { max-width: 48%; }
.battle-layout .camera-toolbar { left: 8px; right: auto; top: 5px; }.battle-layout #camera-status { display: none; }
.battle-layout #mp-hud { top: 36px; left: 0; right: 0; column-gap: 0; }.battle-layout #mp-hud > div { margin: 0 6px; }
.battle-layout #mp-hud > p { padding-left: 8px; }.battle-layout #mp-battle-exit { position: fixed; top: 5px; right: 8px; }
.battle-layout .sequence-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.battle-layout .sequence-panel > .signs { width: 100%; padding-inline: 5px; gap: 6px; }
#opponent-sequence { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid #8a9a7666; align-items: center; justify-content: center; }
#opponent-sequence .signs { width: 100%; flex: 1; min-height: 0; gap: 6px; padding: 2px 5px; }
#opponent-jutsu-name,#opponent-weave-label { max-width: 95%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 12px; line-height: 16px; }
.battle-layout .sign-card { width: min(12vw,13vh); }.battle-layout .sign-image { height: min(10vh,12vw); }.battle-layout .sign-meta strong { font-size: clamp(10px,1.8vmin,14px); }
.battle-layout .arena-toolbar .character-options,.battle-layout .arena-caption,.battle-layout .sprite-space { display: none; }.battle-layout .arena-toolbar { justify-content: flex-end; }
.battle-stage { position: absolute; inset: 0; overflow: hidden; --fighter-size: min(38vw,37vh); }
.fighter { position: absolute; bottom: 4%; width: var(--fighter-size); height: var(--fighter-size); background-size: 300% 200%; background-repeat: no-repeat; image-rendering: auto; will-change: transform,background-position; }
.fighter-sasuke { left: 5%; background-image: url('./assets/sasuke-sheet.png'); }.fighter-naruto { right: 5%; background-image: url('./assets/naruto-sheet.png'); }
.fighter-label { position: absolute; top: 15%; font-size: 14px; font-weight: bold; color: #ffe1a1; text-shadow: 0 1px 3px black; }.sasuke-label { left: 6%; }.naruto-label { right: 6%; }
.battle-layout .arena-footer { bottom: 2px; pointer-events: none; }.battle-layout .arena-footer #sound-status { display:none; }
@media(max-height:500px) { .battle-layout #mp-hud { top: 32px; }.battle-layout #mp-hud > div { font-size: 11px; padding: 2px 5px; }.battle-layout #mp-hud > p { font-size: 11px; }#opponent-camera-status { font-size: 10px; }.fighter-label { top: 8%; font-size: 12px; }.camera-share-option { margin: 4px 0 !important; }.camera-share-note { margin: 3px 0 !important; } }

#intro-dialog { width: min(880px, 92vw); max-width: 92vw; max-height: 92dvh; box-sizing: border-box; padding: clamp(16px,3vh,32px); border: 2px solid #e9943b; border-radius: 20px; background: #152626; color: #fff4df; text-align: center; overflow: hidden; }
#intro-dialog[open] { display: flex; flex-direction: column; align-items: center; gap: clamp(8px,1.5vh,16px); }
#intro-dialog::backdrop { background: #071010dd; backdrop-filter: blur(7px); }
#intro-dialog h2 { margin: 0; color: #ffad49; font-size: clamp(28px,6vh,56px); }
#intro-dialog p { margin: 0; max-width: 60ch; font-size: clamp(12px,1.8vh,18px); }
#intro-dialog .intro-kicker { letter-spacing: .14em; color: #ffad49; font-size: 11px; }
#intro-video { width: 100%; height: min(43dvh,420px); min-height: 0; object-fit: contain; background: #081414; border-radius: 12px; }
#intro-go { flex-shrink: 0; min-width: 180px; }

#reconnect-video { position: absolute; z-index: 5; right: 6px; bottom: 36px; padding: 5px 8px; font-size: 11px; background: #102321dd; }

#opponent-fallback { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center,#647170,#273332); overflow: hidden; }
#opponent-fallback[hidden] { display: none; }
.fallback-shinobi { width: min(30vw,24vh); height: min(30vw,24vh); background: url('./assets/naruto-sheet.png') 0 0 / 300% 200%; filter: saturate(.45); }
#opponent-fallback strong { font-size: clamp(12px,2vh,22px); text-align: center; color: #fff3d7; text-shadow: 0 2px 8px #000; }
#opponent-camera-status { z-index: 2; }
#match-countdown { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #303637dc; color: #ffb455; font-size: clamp(64px,17vw,180px); font-weight: 900; text-shadow: 0 5px 0 #141e20; backdrop-filter: blur(5px); pointer-events: none; }
#match-countdown[hidden] { display: none; }

/* Reallocate the former 40/20/40 training layout to camera/signs, keeping 2:1. */
.practice.training-layout { grid-template-rows: minmax(0,2fr) minmax(0,1fr); }
.training-layout > .character-panel { display: none; }
.training-layout .sign-card { width: min(29vw,30vh); flex-basis: min(29vw,30vh); }
.training-layout .sign-meta { font-size: clamp(14px,2.6vh,22px); }
.training-layout #sound-toggle { flex-shrink: 0; }
@media(max-width:600px) { .training-layout .camera-toolbar { gap: 5px; flex-wrap: wrap; } .training-layout #sound-toggle { font-size: 11px; padding: 5px; } }

.fire-target { position: fixed; top: 0; bottom: 0; width: 50%; z-index: 30; pointer-events: none; overflow: hidden; }
.fire-target-you { left: 0; }
.fire-target-opponent { right: 0; }
.fire-target .fireball-frame { mix-blend-mode: normal; }