/* Ink, parchment and chunky technique cards to match the illustrated fighters. */
:root {
  color-scheme: light;
  --bg: #e9d2a0;
  --panel: #fff0cb;
  --line: #392a25;
  --muted: #76604a;
  --text: #352820;
  --lime: #eab64e;
  --ink: #392a25;
  --hand: "Chalkboard SE", "Comic Sans MS", cursive;
}
body {
  color: var(--ink);
  font-family: var(--hand);
  background: radial-gradient(ellipse at 50% 0, #fff4d5, transparent 75%),
    repeating-linear-gradient(95deg, #9a683009 0 1px, transparent 1px 7px), #e9d2a0;
}
button { font-family: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #255f9c; outline-offset: 4px; }
.game-shell { max-width: 1440px; }
.masthead { height: 100px; }
.brand { font: 900 28px var(--hand); letter-spacing: -1px; color: var(--ink); transform: rotate(-1deg); }
.brand-light { color: #356eaa; }
.brand-symbol { color: #b67722; text-shadow: 2px 2px #fff6d9; }
.brand small { color: #816445; font: 700 9px var(--hand); letter-spacing: 2px; margin-top: 4px; }
.prototype-label { color: #765a3d; font-family: var(--hand); letter-spacing: 1px; }
.prototype-label i { background: #a5682f; }
.icon-button { background: #ffedbd; color: var(--ink); border: 2px solid var(--ink); border-radius: 12px 9px 13px 8px; box-shadow: 2px 3px 0 var(--ink); }
.arena-panel { border: 3px solid var(--ink); border-radius: 16px 12px 18px 10px; overflow: hidden; box-shadow: 5px 6px 0 #392a2540; background: #353a2d; }
.arena-topline { background: #f1d496; color: #59412b; border-bottom: 3px solid var(--ink); font: 700 11px var(--hand); letter-spacing: 1px; }
.arena-topline i { background: #965e2b; }
.health-row { top: 57px; }
.fighter-label { color: #fff1c5; text-shadow: 1px 2px #191e18; font-family: var(--hand); }
.fighter-label b { color: #9acbff; }
.enemy-health .fighter-label b { color: #f7a797; }
.fighter-label strong { color: #fff6d8; font-family: var(--hand); }
.fighter-label small { color: #d6cdb4; }
.health-track, .enemy-health .health-track { height: 14px; background: #201f1b; border: 2px solid #241d18; border-radius: 7px 5px 8px 6px; box-shadow: 0 1px 0 #f7e4ac66; }
.health-track > div { background: #6da5db; border-right: 2px solid #c1e0fa; }
.enemy-health .health-track > div { background: #cf6256; border-left: 2px solid #f6ad87; border-right: 0; }
.versus { color: #f7d395; font: 900 20px var(--hand); text-shadow: 2px 2px #231c15; }
.arena-scenery { filter: saturate(.85) brightness(1.12); }
.is-frozen .arena-scenery { filter: saturate(.65) brightness(1.08); }
.arena-state { font-family: var(--hand); color: #f4deaa; letter-spacing: 1px; }
.arena-bottom { font-family: var(--hand); color: #dac9a1; }
.planning-panel { padding-top: 26px; }
.planning-heading { margin-bottom: 16px; }
.eyebrow { font-family: var(--hand); font-weight: 700; color: #917044; letter-spacing: 1.5px; }
.planning-heading h2 { font: 900 36px var(--hand); color: var(--ink); letter-spacing: -1.5px; }
.planning-heading h2 span { color: #a65134; }
.countdown { background: #fff1cb; border: 3px solid var(--ink); border-radius: 14px 10px 17px 10px; padding: 8px 14px; box-shadow: 3px 4px 0 #392a2538; transform: rotate(2deg); color: #8a5728; }
.countdown strong { color: var(--ink); font-family: var(--hand); font-weight: 900; }
.countdown > span, .countdown b { color: #816044; font-family: var(--hand); }
.countdown.is-urgent { background: #ffc3a3; }
.countdown-track { height: 7px; border: 1px solid #a17e4d; border-radius: 5px; background: #d6b982; margin-bottom: 17px; }
.countdown-track > div { background: #b57b34; border-radius: 5px; }
.timeline-header { color: #66492e; font: 700 11px var(--hand); letter-spacing: .8px; }
.timeline-header > span:last-child { color: #81654a; }
.timeline { border: 3px solid var(--ink); border-radius: 14px 9px 15px 10px; background: #f3dba4; box-shadow: 5px 6px 0 #392a2540; }
.tick-ruler, .timeline-scale { color: #694d32; font-family: var(--hand); font-weight: 700; }
.lane { min-height: 100px; border-top: 2px solid var(--ink); }
.enemy-lane { background: #a3453e; }
.player-lane { background: #356d9c; border-color: var(--ink); }
.lane-label { color: #fff0d5; font: 900 12px var(--hand); letter-spacing: 1px; }
.lane-label small { color: #f4bc99; font: 700 8px var(--hand); margin-top: 5px; letter-spacing: 0; }
.player-lane .lane-label { color: #fff3d8; }
.player-lane .lane-label small { color: #b6d7e7; }
.tick-cell { height: 78px; border: 2px solid #f6c99b33; border-radius: 7px 5px 8px 5px; color: #fff3d8; }
.player-lane .tick-cell { border-color: #b4dcf04d; }
.tick-cell.has-action { border: 2px solid #42282b; box-shadow: 2px 3px 0 #392a2566; }
.tick-cell svg { width: 31px; height: 31px; stroke-width: 2; }
.tick-cell .action-tick { font-family: var(--hand); font-size: 8px; font-weight: 700; bottom: 4px; right: 5px; }
.tick-cell.attack, .tick-cell.heavy { background: #e66d55; border-color: #5c2926; color: #fff4da; box-shadow: 2px 3px 0 #392a2566; }
.tick-cell.heavy { background: #aa3841; color: #ffe1b5; }
.tick-cell.block { background: #623d40; border-color: #392a25; color: #ffceac; }
.tick-cell.substitute { background: #a56d54; color: #fff3ca; }
.tick-cell.ward { background: #805b8d; color: #f5dcff; }
.tick-cell.fireball { background: #df8437; color: #fff2bb; }
.player-lane .tick-cell.attack { background: #649bd5; border-color: #203d5c; color: #fff9e5; box-shadow: 2px 3px 0 #392a2566; }
.player-lane .tick-cell.block { background: #62bbb9; border-color: #224b53; color: #183d47; }
.player-lane .tick-cell.substitute { background: #f1d28a; border-color: #5c492e; color: #634827; }
.player-lane .tick-cell.ward { background: #b497d4; border-color: #4e365f; color: #382344; }
.player-lane .tick-cell.fireball { background: #eca056; border-color: #673d29; color: #5f3323; }
.player-lane .tick-cell.mend { background: #a0c17d; border-color: #3b542d; color: #2f4825; }
.enemy-lane .tick-cell.unknown-action { background: repeating-linear-gradient(-40deg, #ffffff05 0 6px, transparent 6px 12px), #6a3b3a; border: 2px dashed #e9b699; color: #f8dfb5; box-shadow: none; }
.unknown-mark { font: 900 35px var(--hand); }
.move-name { position: absolute; left: 2px; right: 2px; top: 3px; font: 700 8px var(--hand); letter-spacing: .3px; text-align: center; }
.tick-cell.is-current { outline: 3px solid #ffe39c; outline-offset: -4px; }
.tick-cell.is-impact { box-shadow: inset 0 0 0 3px #fff3c0, 2px 3px 0 #392a2566; }
.player-lane .tick-cell.is-preview { background: #a6d5e788; border-color: #fff2c4; }
.player-lane .tick-cell.invalid-preview { background: #c35c5588; border-color: #f8a48e; }
.playhead { width: 3px; background: #fff2b6; box-shadow: 1px 0 0 #392a25; }
.playhead span { color: #fff2b6; text-shadow: 1px 1px #392a25; }
.cast-impact { color: inherit; top: auto; bottom: 5px; left: 5px; right: auto; }
.planner-caption { color: #735538; font-size: 12px; padding: 5px 0; }
.planner-caption button { color: #7e5032; font: 700 10px var(--hand); }
.counter-guide { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; padding: 12px 15px; margin: 6px 0 20px; background: #f8e6bc; border: 2px dashed #b2925c; border-radius: 12px 7px 11px 8px; font-size: 12px; }
.counter-guide > span { display: flex; align-items: center; gap: 7px; }
.counter-guide svg { width: 20px; height: 20px; color: #99613f; }
.counter-guide b { color: #aa8352; }
.counter-guide strong { color: #315a77; }
.spellbook-label { color: var(--ink); }
.spellbook-label > span { font: 900 22px var(--hand); transform: rotate(-2deg); }
.spellbook-label small { color: #806345; font: 11px var(--hand); }
.action-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.action-choice { --card: #d3e4ef; --accent: #376fa0; border: 3px solid var(--ink); border-radius: 12px 8px 14px 8px; background: var(--card); padding: 15px 16px; gap: 12px; box-shadow: 3px 4px 0 #392a2540; }
.substitute-choice { --card: #f4dfac; --accent: #9c6b27; }
.block-choice { --card: #c4e2d8; --accent: #357c79; }
.ward-choice { --card: #e1d1ed; --accent: #815ba0; }
.fireball-choice { --card: #f7d4a9; --accent: #b4652c; }
.mend-choice { --card: #d9e6bc; --accent: #638243; }
.action-choice:nth-child(even) { border-radius: 8px 14px 9px 12px; }
.action-choice.is-selected, .action-choice.block-choice.is-selected { background: var(--card); border-color: var(--ink); box-shadow: 0 0 0 3px #fff2c9, 0 0 0 6px var(--accent), 4px 6px 0 #392a2533; }
.action-choice:hover:not(:disabled) { filter: brightness(1.04); translate: 0 -2px; }
.action-choice:disabled { opacity: .6; }
.action-copy { gap: 3px; }
.action-copy strong { color: var(--ink); font: 900 13px var(--hand); letter-spacing: .3px; gap: 7px; }
.action-copy small { color: #6c5748; font: 10px var(--hand); white-space: normal; }
.action-choice .action-icon { color: var(--accent); }
.action-icon svg { width: 34px; height: 34px; stroke-width: 2; }
.ability-uses { color: var(--accent); font: 900 11px var(--hand); }
.action-choice.is-exhausted { background: #d9cbb4; border-style: dashed; }
.action-choice.is-exhausted .ability-uses { color: #a14a38; }
.choice-dot { width: 12px; height: 12px; border: 2px solid var(--accent); }
.is-selected .choice-dot { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--card); }
kbd { color: #765f47; border-color: #9c896d77; background: #fffae955; font: 9px var(--hand); }
.planning-release { border-color: #b28c57; margin-top: 22px; }
.planning-release p { color: #573e2a; font: 700 17px var(--hand); }
.planning-release small { color: #8b6a45; font: 11px var(--hand); }
.advance-button { background: #efbf58; color: #412c1d; border: 3px solid var(--ink); border-radius: 10px 14px 9px 13px; box-shadow: 3px 4px 0 var(--ink); font: 900 15px var(--hand); }
.instructions { color: #806345; font: 11px var(--hand); }
.instructions b { color: #714c2a; font-family: var(--hand); font-weight: 900; }
.footer { color: #97764b; border-color: #bd9e6b; font-family: var(--hand); }
.footer i { color: #a36d2f; }
.result-card { color: var(--ink); background: #fff0c9; border: 4px solid var(--ink); border-radius: 24px 14px 27px 16px; box-shadow: 9px 10px 0 #0005; }
.result-card h2 { color: #734c2b; font-family: var(--hand); font-weight: 900; }
.result-card > p, .result-stats, .result-card .replay-note { color: #816449; }
.result-stats { border-color: #c7a977; }
.result-stats b { color: #573e2a; }
.restart-button, .replay-button { border: 2px solid var(--ink); border-radius: 10px 7px 12px 8px; box-shadow: 2px 3px 0 #392a2544; font-family: var(--hand); }
.restart-button { background: #eeb953; color: var(--ink); }
.replay-button { background: #dac8e5; color: #50385e; }
.replay-toolbar { color: var(--ink); background: #fff0c9; border: 3px solid var(--ink); border-radius: 12px 9px; font-family: var(--hand); }
.replay-toolbar button { color: var(--ink); background: #dec49a; font-family: var(--hand); }
.damage-number { color: #fff1cb; font-family: var(--hand); font-weight: 900; text-shadow: 2px 2px #392a25, -1px -1px #392a25; }
.damage-number.blocked { background: #f5db93; color: var(--ink); border: 3px solid var(--ink); border-radius: 12px 7px 11px 7px; box-shadow: 3px 3px 0 #392a2566; font-family: var(--hand); text-shadow: none; }
.damage-number > small { font: 900 10px var(--hand); color: #ffce9a; }
.fighter[data-defense="ward"] .magic-shield { clip-path: none; border-radius: 50%; border: 4px dashed #dbbaff; background: #a677d34d; box-shadow: inset 0 0 20px #e7c4ff66, 0 0 12px #c08de666; }
.fighter[data-defense="deflect"] .magic-shield { clip-path: none; border-radius: 0; border: 0; background: none; box-shadow: none; color: #ffe7a0; }
.fighter[data-defense="deflect"] .magic-shield::after { content: '⚔'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 80px; text-shadow: 2px 3px #392a25; }
.fighter.is-heavy .strike-arc { border-width: 11px; border-color: #ffb78d; }
.fighter[data-defense="block"] .magic-shield { display: none; }
.fighter[data-pose="block"] .character-sprite { animation: none; }
.fighter[data-pose="block"].is-clashing .character-sprite { animation: shield-brace var(--action-duration) ease-out; }
@keyframes shield-brace {
  0% { translate: 0 0; }
  12% { translate: calc(-12px * var(--direction)) 3px; filter: brightness(1.35); }
  30% { translate: calc(4px * var(--direction)) 0; filter: none; }
  60%, 100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fighter[data-pose="block"].is-clashing .character-sprite { animation: none; }
}
@media (max-width: 1000px) {
  .action-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counter-guide { gap: 8px 18px; font-size: 11px; }
}
@media (max-width: 760px) {
  .masthead { height: 85px; }
  .brand { font-size: 21px; }
  .brand small { font-size: 7px; letter-spacing: 1px; }
  .health-row { top: 52px; }
  .arena-topline { font-size: 8px; }
  .planning-heading h2 { font-size: 27px; }
  .eyebrow { font-size: 7px; }
  .countdown { padding: 5px 7px; gap: 5px; }
  .countdown strong { min-width: 73px; font-size: 32px; }
  .countdown svg { display: none; }
  .timeline-header { font-size: 8px; }
  .lane-label { font-size: 9px; }
  .lane-label small { font-size: 5px; }
  .lane { min-height: 90px; }
  .tick-cell { height: 72px; border-width: 1.5px; }
  .tick-cell svg { width: 21px; height: 24px; }
  .tick-cell .action-tick { font-size: 6px; right: 2px; }
  .move-name { font-size: 5px; letter-spacing: 0; }
  .enemy-lane .tick-cell.unknown-action { border-width: 1px; }
  .unknown-mark { font-size: 28px; }
  .planner-caption { font-size: 10px; line-height: 1.5; }
  .counter-guide { gap: 6px 13px; padding: 9px; font-size: 10px; margin-bottom: 15px; }
  .counter-guide svg { width: 16px; height: 16px; }
  .spellbook-label > span { font-size: 19px; }
  .spellbook-label small { font-size: 9px; max-width: 200px; }
  .action-choice { padding: 12px 10px; gap: 8px; }
  .action-copy strong { font-size: 11px; }
  .action-copy small { font-size: 9px; }
  .action-icon svg { width: 26px; }
  .choice-dot { width: 10px; height: 10px; }
  .planning-release p { font-size: 14px; }
  .planning-release small { font-size: 9px; }
  .advance-button { font-size: 12px; }
  .instructions { font-size: 9px; gap: 6px 14px; }
}
@media (max-width: 430px) {
  .planning-heading h2 { font-size: 23px; letter-spacing: -.8px; }
  .countdown strong { font-size: 28px; min-width: 65px; }
  .lane-label { font-size: 7px; padding-left: 4px; }
  .lane-label small { font-size: 4px; }
  .tick-cell svg { width: 17px; }
  .move-name { font-size: 4px; }
  .tick-cell .action-tick { font-size: 5px; }
  .action-choice { padding: 10px 7px; gap: 5px; }
  .action-copy strong { font-size: 10px; gap: 4px; }
  .action-copy small { font-size: 8px; }
  .action-icon svg { width: 23px; }
  .choice-dot { display: none; }
  .spellbook-label small { max-width: 150px; font-size: 8px; }
}

/* Slowmo Shinobi: indigo cloth, vermilion lacquer, bright lantern light. */
:root { --ink: #24243d; --text: #24243d; --bg: #172d46; --lime: #ffbf58; }
body {
  background: radial-gradient(ellipse at 50% -10%, #387b8c55, transparent 65%),
    repeating-linear-gradient(115deg, #8cb1c208 0 1px, transparent 1px 9px), #172d46;
}
.brand { color: #fff0ce; letter-spacing: -.7px; }
.brand-light { color: #ff785f; font-weight: 900; margin-left: 5px; }
.brand-symbol { color: #ffc86f; text-shadow: 2px 3px #091b31; font-size: 43px; transform: rotate(12deg); }
.brand small { color: #a9d8db; }
.prototype-label { color: #a4c4ce; }
.prototype-label i { background: #ff9773; }
.icon-button { background: #27536a; color: #fff0ce; border-color: #0e2035; box-shadow: 2px 3px #0e2035; }
.arena-panel { border-color: #0d2035; background: #245870; box-shadow: 5px 6px #091b3199; }
.arena-topline { background: #ac3d3c; color: #ffe8bb; border-color: #271d32; }
.arena-topline i { background: #ffc66b; }
.arena { height: 330px; }
.arena-scenery, .is-frozen .arena-scenery, .arena.has-impact .arena-scenery {
  object-fit: cover; object-position: center 72%; filter: none;
}
.arena::after { background: radial-gradient(ellipse at 50% 65%, transparent 25%, #101d3a77 95%); }
.arena.has-impact::after { opacity: .35; }
.courtyard-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#102a4380, transparent 35%, transparent 80%, #102a4366); }
.is-releasing { animation: shinobi-release .35s ease-out; }
.is-releasing .fighter { filter: brightness(1.15); }
@keyframes shinobi-release { 0% { filter: brightness(1.3); } 100% { filter: none; } }
.health-card { padding: 8px 10px; background: #14273cdd; border: 2px solid #101d31; border-radius: 9px 5px 11px 7px; }
.health-row { top: 56px; }
.health-track > div { background: #4fbdd9; border-color: #a2edec; }
.enemy-health .health-track > div { background: #f37663; border-color: #ffd093; }
.fighter-label { margin-bottom: 6px; }
.arena-state { top: 84px; color: #fff0d1; padding: 4px 12px; border-radius: 12px; background: #15273dbb; }
.arena-bottom, .arena-bottom > span:last-child { color: #fff0d1; text-shadow: 1px 2px #17263e; }
.state-diamond { color: #efb961; }
.fighter.player { --fighter-color: #8cf0eb; }
.fighter.enemy { --fighter-color: #ffc599; }
.fighter[data-pose="cast"] .sprite-frame[data-frame="cast"] { display: block; }
.fighter[data-pose="cast"] .character-sprite { animation: seal-focus 1.1s ease-in-out infinite alternate; }
@keyframes seal-focus { to { translate: 0 -2px; filter: drop-shadow(0 0 5px #67efce66); } }
.fighter.is-fireball .character-sprite { animation: seal-release var(--action-duration) ease-out; }
@keyframes seal-release { 20% { scale: 1.04; filter: brightness(1.18); } 100% { scale: 1; } }
.fighter[data-defense="ward"] .magic-shield { border-color: #92efe2; background: #42cdb82b; box-shadow: inset 0 0 20px #98f4d755, 0 0 12px #77f3da44; }
.planning-panel { margin-top: 24px; padding: 22px 24px 20px; background: #f8e7be; border: 3px solid #11223a; border-radius: 14px 9px 18px 10px; box-shadow: 5px 6px #091b3188; }
.planning-heading .eyebrow { color: #986343; }
.planning-heading h2 span { color: #ce5546; }
.countdown { background: #ffe2a1; transform: rotate(1deg); }
.countdown-track > div { background: #ce6544; }
.timeline { background: #ffe5ad; }
.enemy-lane { background: #9d3e4a; }
.player-lane { background: #285c8a; }
.tick-cell.attack { background: #ee775a; }
.tick-cell.heavy { background: #cb4e56; }
.tick-cell.ward { background: #427c77; color: #c7ffea; }
.player-lane .tick-cell.attack { background: #53a5d3; color: #fff8dd; }
.player-lane .tick-cell.ward { background: #91d8be; border-color: #2f655c; color: #264d4a; }
.ward-choice { --card: #c3e8d7; --accent: #317b6c; }
.attack-choice { --card: #c2e3f2; --accent: #277ca7; }
.fireball-choice { --card: #ffd3a2; --accent: #bb5839; }
.counter-guide { border-color: #c09e69; background: #ffefcc; }
.counter-guide strong { color: #286879; }
.advance-button { background: #ec7957; color: #271e31; }
.footer { color: #aac4ca; border-color: #557887; }
.footer i { color: #f3ac64; }
.result-card { background: #fff0cc; }
.result-card h2 { color: #a7453d; }
.result-rune { color: #cc6646; }
.restart-button { background: #ec7957; }
.replay-button { background: #badddd; color: #23485c; }
@media (min-width: 1600px) { .arena { height: 365px; } }
@media (max-width: 760px) {
  .arena { height: 290px; }
  .health-card { padding: 7px; }
  .health-row { top: 52px; gap: 9px; left: 10px; right: 10px; }
  .arena-state { top: 95px; font-size: 7px; }
  .brand { font-size: 20px; }
  .brand small { font-size: 6px; }
  .planning-panel { padding: 18px 10px; margin-top: 18px; }
  .counter-guide { gap: 7px 10px; }
  .counter-guide > span { gap: 4px; }
  .action-copy strong { font-size: 10px; letter-spacing: 0; }
}
@media (max-width: 430px) {
  .game-shell { padding: 0 7px; }
  .brand { font-size: 18px; }
  .brand-symbol { font-size: 32px; }
  .brand small { letter-spacing: .5px; }
  .planning-panel { padding: 15px 7px; }
  .planning-heading h2 { font-size: 21px; }
  .countdown { padding: 4px 5px; }
  .countdown strong { font-size: 26px; min-width: 58px; }
  .timeline-header { font-size: 7px; }
  .action-buttons { gap: 10px; }
  .action-choice { padding: 10px 6px; gap: 4px; }
  .action-copy strong { font-size: 9px; gap: 3px; }
  .action-copy small { font-size: 8px; }
  .action-icon svg { width: 21px; }
  .spellbook-label > span { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fighter[data-pose="cast"] .character-sprite, .fighter.is-fireball .character-sprite, .is-releasing { animation: none; }
}

/* Physical techniques: sword guards, replacement logs, scroll earth and fire breath. */
.fighter[data-pose="scroll"] .sprite-frame[data-frame="scroll"],
.fighter[data-pose="breath"] .sprite-frame[data-frame="breath"],
.fighter[data-pose="substitute"] .sprite-frame[data-frame="substitute"] { display: block; }
.fighter[data-pose="scroll"] .character-sprite { animation: seal-focus 1.1s ease-in-out infinite alternate; }
.fighter[data-pose="substitute"] .character-sprite { animation: substitution-poof var(--action-duration) ease-out; }
@keyframes substitution-poof {
  0%, 12% { opacity: 0; scale: .65; filter: brightness(2); }
  25% { opacity: 1; scale: 1.09; filter: brightness(1.4); }
  35%, 100% { opacity: 1; scale: 1; filter: none; }
}
.earth-wall { position: absolute; left: 70%; bottom: 3%; width: 29%; height: 91%; z-index: 5; opacity: 0; scale: 1 0; transform-origin: center bottom; pointer-events: none; transition: opacity .08s, scale .12s ease-out; }
.enemy .earth-wall { left: auto; right: 70%; transform: scaleX(-1); }
.earth-wall svg, .fire-breath svg { width: 100%; height: 100%; overflow: visible; stroke-linejoin: round; }
.earth-body { fill: #79533e; stroke: #372c2b; stroke-width: 4; }
.earth-face { fill: #b98954; stroke: #503b31; stroke-width: 2; }
.earth-cracks { fill: none; stroke: #624535; stroke-width: 3; }
.earth-highlight { fill: none; stroke: #edc68c; stroke-width: 3; }
.earth-rubble { fill: #a5774e; stroke: #49362b; stroke-width: 3; }
.fighter.is-blocking[data-defense="ward"] .earth-wall { opacity: 1; scale: 1; }
.fighter.is-clashing[data-defense="ward"] .earth-wall { filter: brightness(1.2); }
.fire-breath { position: absolute; left: 58%; top: 37%; width: 75%; height: 34%; pointer-events: none; z-index: 5; opacity: 0; transform-origin: left center; }
.enemy .fire-breath { left: auto; right: 63%; top: 40%; transform: scaleX(-1); transform-origin: center; }
.flame-outer { fill: #ed6c26; stroke: #7c3026; stroke-width: 2; }
.flame-inner { fill: #ffc846; stroke: #ed8124; stroke-width: 1; }
.flame-core { fill: #fff3bc; stroke: none; }
.is-fireball .fire-breath { opacity: 1; }
.is-fireball .fire-breath svg { transform-origin: left center; animation: breathe-fire var(--action-duration) ease-out forwards; }
.is-fireball .strike-arc { display: none; }
@keyframes breathe-fire {
  0% { opacity: 0; scale: .05 .4; }
  15% { opacity: 1; scale: .5 .8; }
  32%, 65% { opacity: 1; scale: 1; }
  82% { opacity: .7; scale: 1.12 .7; }
  100% { opacity: 0; scale: 1.2 .2; }
}
.damage-number.clash-callout { top: 22%; color: #744921; background: #ffe4a1; }
.substitute-choice { --card: #ded9bd; --accent: #766a3b; }
.player-lane .tick-cell.substitute { background: #cfc993; border-color: #635a35; color: #453d27; }
@media (prefers-reduced-motion: reduce) {
  .fighter[data-pose="scroll"] .character-sprite, .fighter[data-pose="substitute"] .character-sprite { animation: none; }
  .earth-wall { transition: none; }
  .is-fireball .fire-breath svg { animation: none; }
}

/* Preparation is visible, but only the second tick grants protection. */
.fighter[data-pose="ready"] .sprite-frame[data-frame="idle"] { display: block; }
.fighter[data-pose="ready"] .character-sprite { animation: none; rotate: calc(-3deg * var(--direction)); }
.tick-cell.staged-defense { background-image: linear-gradient(90deg, #172d4644 0 49.5%, #ffe7a899 49.5% 50.5%, transparent 50.5%); }
.tick-cell.staged-defense::after { content: '2'; position: absolute; top: 4px; right: 5px; font: 900 9px var(--hand); background: #ffedb7; color: #51402d; border-radius: 50%; width: 14px; height: 14px; line-height: 14px; text-align: center; }
.ward-choice { --card: #e8cba3; --accent: #8b6137; }
.tick-cell.ward { background-color: #8e6147; color: #ffe8ba; }
.player-lane .tick-cell.ward { background-color: #c49a68; border-color: #634632; color: #392c22; }
.substitution-smoke { position: absolute; inset: -3% 4% 0; z-index: 7; pointer-events: none; opacity: 0; }
.substitution-smoke svg { width: 100%; height: 100%; overflow: visible; }
.smoke-cloud { fill: #fff1d5; stroke: #6c6967; stroke-width: 2.5; transform-origin: 120px 110px; }
.smoke-left { --puff-x: -25px; --puff-y: -8px; }
.smoke-right { --puff-x: 28px; --puff-y: -4px; }
.smoke-top { --puff-x: 0px; --puff-y: -29px; }
.smoke-bottom { --puff-x: 2px; --puff-y: 20px; }
.is-substituting .substitution-smoke { opacity: 1; }
.is-substituting .smoke-cloud { animation: smoke-poof var(--action-duration) ease-out forwards; }
@keyframes smoke-poof {
  0% { opacity: 0; translate: 0 0; scale: .3; }
  10% { opacity: 1; scale: .85; }
  30% { opacity: 1; }
  85%, 100% { opacity: 0; translate: var(--puff-x) var(--puff-y); scale: 1.2; }
}
@media (prefers-reduced-motion: reduce) {
  .is-substituting .smoke-cloud { animation: none; opacity: .3; }
}

/* Six Gates: a small inked travel scroll above the duel, not a separate menu. */
.journey-panel { margin: 0 0 18px; padding: 15px 20px; border: 3px solid #102139; border-radius: 13px 8px 16px 9px; background: #eed5a0; box-shadow: 4px 4px #091b3180; }
.journey-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; font-weight: 900; color: #624527; }
.journey-heading small { margin-left: 12px; font-size: 11px; font-weight: 400; }
.journey-heading > strong { color: #32687a; font-size: 10px; text-align: right; }
.journey-path { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; margin: 14px 0 0; padding: 0; gap: 8px; }
.gate { position: relative; display: flex; align-items: center; gap: 9px; padding: 9px 7px; border: 2px solid transparent; border-radius: 10px 7px; min-width: 0; }
.gate b { display: block; font-size: 11px; line-height: 1.2; }
.gate small { display: block; font-size: 7px; letter-spacing: .5px; margin-top: 4px; }
.gate-seal { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: 2px solid #8a734e; border-radius: 50% 45% 47% 42%; font-size: 16px; background: #f7e4be; }
.gate.is-active { color: #fff2d5; background: #ac4c43; border-color: #472f32; box-shadow: 2px 3px #583c2b33; rotate: -1deg; }
.gate.is-active .gate-seal { background: #ffd780; border-color: #422a2c; color: #63362b; }
.gate.is-cleared { color: #316359; }
.gate.is-cleared .gate-seal { background: #a5c4a4; border-color: #3a6854; }
.gate.is-locked { color: #8e795b; }
.encounter-brief { display: flex; gap: 16px; align-items: center; color: #fff0cc; padding: 4px 3px 17px; }
.rival-portrait { width: 72px; height: 75px; overflow: hidden; position: relative; flex-shrink: 0; background: #f6d698; border: 3px solid #0e2138; border-radius: 16px 9px 16px 8px; box-shadow: 3px 3px #091b3180; rotate: -3deg; }
.rival-portrait img { position: absolute; width: 246px; max-width: none; left: -7px; top: 0; }
.rival-copy { flex: 1; min-width: 0; }
.rival-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.rival-heading h2 { margin: 0; font: 900 24px var(--hand); }
.rival-heading > span { border: 1px solid #f7ca7b70; border-radius: 5px; padding: 4px 8px; color: #ffcc86; font-size: 8px; letter-spacing: .6px; }
.rival-copy > small { color: #a9c8d2; font-size: 11px; }
.rival-copy p { margin: 6px 0 0; font-size: 12px; line-height: 1.55; color: #d5e4df; max-width: 760px; }
.rival-trait { width: 175px; flex-shrink: 0; border-left: 2px dashed #f2c98950; padding-left: 18px; }
.rival-trait > span { display: block; font-size: 8px; color: #a6c4c9; letter-spacing: 1px; margin-bottom: 6px; }
.rival-trait strong { font-size: 12px; font-weight: 700; line-height: 1.6; color: #ffd18c; }
.action-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.locked-techniques { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; padding-top: 13px; border-top: 1px dashed #bc9c6c; color: #866d4c; }
.locked-techniques:empty { display: none; }
.locked-techniques > span { font-size: 10px; }
.locked-techniques small { display: block; margin: 3px 0 0 13px; font-size: 8px; color: #967c5b; }
.tick-cell .cast-impact { left: auto; right: calc(50% / var(--action-span, 2)); bottom: 20px; top: auto; translate: 50% 0; font-size: 10px; color: #fff4b5; text-shadow: 1px 1px #352d26; }
.result-overlay { overflow-y: auto; padding: 22px; }
.result-card { width: min(560px, 100%); padding: 25px 30px; max-height: calc(100dvh - 44px); overflow-y: auto; }
.result-rune { margin-bottom: 5px; font-size: 34px; }
.result-card h2 { font-size: 40px; margin: 10px 0; }
.result-card > p { margin: 8px 0; }
.result-stats { gap: 26px; margin: 17px 0; padding: 14px 0; font: 9px var(--hand); }
.result-stats b { font-family: var(--hand); font-weight: 900; }
.technique-reward { display: flex; gap: 14px; text-align: left; padding: 17px; margin: 0 0 20px; background: #f4dc9b; border: 2px dashed #b28848; border-radius: 11px 6px 12px 8px; }
.reward-seal { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; background: #f8edca; border: 2px solid #60472e; border-radius: 50%; color: #865133; font-size: 26px; }
.reward-seal svg { width: 27px; height: 27px; }
.technique-reward small { font-size: 8px; letter-spacing: 1px; color: #927043; }
.technique-reward h3 { margin: 3px 0 8px; font-size: 19px; color: #7b402e; }
.technique-reward p { font-size: 11px; line-height: 1.6; margin: 0; color: #664c34; }
.technique-reward .next-rival { border-top: 1px solid #b88c4f66; padding-top: 10px; margin-top: 10px; }
.next-rival b { display: block; font-size: 9px; color: #397075; margin-bottom: 5px; }
.game-shell { --rival-filter: none; --scenery-filter: none; }
[data-encounter="reed"] { --rival-filter: hue-rotate(85deg) saturate(.7); --scenery-filter: hue-rotate(12deg); }
[data-encounter="fox"] { --rival-filter: hue-rotate(20deg) saturate(1.2); --scenery-filter: sepia(.1) saturate(1.2); }
[data-encounter="tortoise"] { --rival-filter: hue-rotate(175deg) saturate(.5); --scenery-filter: hue-rotate(165deg) saturate(.7); }
[data-encounter="mantis"] { --rival-filter: hue-rotate(270deg); --scenery-filter: hue-rotate(35deg) saturate(.8); }
[data-encounter="fangs"] { --rival-filter: hue-rotate(335deg); --scenery-filter: hue-rotate(320deg); }
[data-encounter="viper"] { --scenery-filter: hue-rotate(15deg) brightness(.88); }
.game-shell .enemy .sprite-frame image, .game-shell .rival-portrait img { filter: var(--rival-filter); }
.game-shell .arena-scenery { filter: var(--scenery-filter); }
.boss-enraged .rival-heading > span { color: #fff0bd; background: #b6433c; border-color: #ffb16d; }
.boss-enraged .arena-topline { background: #842b45; }
@media (max-width: 1000px) {
  .journey-panel { padding: 12px; }
  .journey-path { gap: 3px; }
  .gate { flex-direction: column; text-align: center; padding: 6px 2px; gap: 5px; }
  .gate b { font-size: 9px; }
  .gate small { font-size: 6px; }
  .rival-trait { width: 135px; }
  .rival-copy p { font-size: 11px; }
}
@media (max-width: 760px) {
  .journey-heading small { display: none; }
  .journey-heading > strong { font-size: 8px; }
  .journey-heading { font-size: 10px; }
  .journey-panel { margin-bottom: 14px; padding: 10px 6px; }
  .journey-path { margin-top: 9px; }
  .gate-seal { width: 26px; height: 26px; font-size: 13px; }
  .gate b { font-size: 8px; }
  .gate small { font-size: 5px; letter-spacing: 0; }
  .encounter-brief { gap: 10px; flex-wrap: wrap; padding-bottom: 14px; }
  .rival-portrait { width: 52px; height: 60px; }
  .rival-portrait img { width: 195px; left: -7px; }
  .rival-heading h2 { font-size: 20px; }
  .rival-heading > span { font-size: 6px; padding: 3px 5px; }
  .rival-copy p { font-size: 10px; }
  .rival-trait { width: 100%; border: 0; padding: 0; display: flex; gap: 8px; align-items: center; }
  .rival-trait > span { font-size: 7px; margin: 0; }
  .rival-trait strong { font-size: 10px; }
  .action-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .locked-techniques { gap: 9px 15px; }
  .locked-techniques > span { font-size: 9px; }
  .footer { gap: 12px; line-height: 1.7; }
  .footer > span:last-child { flex-shrink: 0; }
  .result-card { padding: 20px; }
  .result-card h2 { font-size: 32px; }
  .technique-reward { padding: 12px; gap: 9px; }
  .technique-reward h3 { font-size: 16px; }
  .reward-seal { width: 32px; height: 32px; }
  .reward-seal svg { width: 22px; height: 22px; }
  .replay-toolbar > span { max-width: 110px; white-space: normal; }
}

/* One familiar rival, unchanged colors, moving through a continuous village. */
.game-shell { --rival-filter: none; --scenery-filter: none; --cinema-drift: 1; }
.game-shell .enemy .sprite-frame image, .game-shell .rival-portrait img { filter: none; }
.scene-stage { position: absolute; inset: 0; pointer-events: none; }
.scene-plate { display: none; position: absolute; inset: 0; width: 100%; height: 100%; stroke: none; object-fit: cover; object-position: center 72%; }
.scene-stage[data-location="courtyard"] .scene-courtyard,
.scene-stage[data-location="rooftops"] .scene-rooftops,
.scene-stage[data-location="bridge"] .scene-bridge,
.scene-stage[data-location="bamboo"] .scene-bamboo,
.scene-stage[data-location="summit"] .scene-summit { display: block; }
.fighter[data-pose="crouch"] .sprite-frame[data-frame="crouch"],
.fighter[data-pose="jump"] .sprite-frame[data-frame="jump"],
.fighter[data-pose="knockout"] .sprite-frame[data-frame="knockout"] { display: block; }
.fighter.is-dead { opacity: 1; transform: none; transition: none; }
.fighter.cinematic-fighter { animation: none !important; translate: none; transform: translate(calc(var(--cinema-x, 0px) * var(--direction) * var(--cinema-drift)), var(--cinema-y, 0px)) rotate(calc(var(--cinema-tilt, 0deg) * var(--direction))); transform-origin: 50% 87%; will-change: transform; }
.fighter.cinematic-fighter .character-sprite, .fighter.is-knocked-out .character-sprite { animation: none !important; translate: none; rotate: none; }
.fighter.cinematic-fighter .strike-arc, .fighter.cinematic-fighter .casting-aura, .fighter.cinematic-fighter .earth-wall, .fighter.cinematic-fighter .fire-breath, .fighter.cinematic-fighter .substitution-smoke { display: none; }
.is-travelling .fighter::before { opacity: 0; }
.cinematic-caption { position: absolute; top: 26%; left: 8%; right: 8%; z-index: 10; display: none; pointer-events: none; text-align: center; color: #fff1c3; text-shadow: 2px 3px #10213a, -1px -1px #10213a; }
.cinematic-caption strong { display: block; font: 900 clamp(20px, 3.3vw, 44px) var(--hand); letter-spacing: 3px; }
.is-knockout .cinematic-caption { display: block; animation: cinema-title .5s ease-out both; }
.is-knockout .cinematic-caption { animation-delay: 1.8s; top: 29%; }
.is-travelling .arena-state, .is-knockout .arena-state { visibility: hidden; }
.is-travelling .arena-bottom, .is-knockout .arena-bottom { z-index: 10; }
.is-knockout { background: #142942; }
.is-knockout .scene-stage { filter: saturate(.92) brightness(.88); }
.fighter.landing-dust::after { content: ''; position: absolute; bottom: -2px; left: 10%; width: 80%; height: 18px; z-index: 8; border: 4px solid #eedcba; border-radius: 50%; box-shadow: 0 -4px 0 #796e5b66; animation: landing-dust .6s ease-out both; }
.has-landed { animation: landing-bump .3s ease-out; }
@keyframes cinema-title { from { opacity: 0; translate: 0 8px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes landing-dust { from { opacity: .9; scale: .3 .5; } to { opacity: 0; scale: 1.4 1; } }
@keyframes landing-bump { 25% { translate: 0 3px; } 60% { translate: 0 -1px; } to { translate: 0 0; } }
@media (max-width: 760px) {
  .game-shell { --cinema-drift: .45; }
  .cinematic-caption { top: 35%; }
  .cinematic-caption strong { font-size: 22px; letter-spacing: 1px; }
  .is-knockout .cinematic-caption { top: 36%; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-stage, .fighter.cinematic-fighter { will-change: auto; }
  .is-knockout .cinematic-caption, .has-landed { animation: none; }
  .fighter.landing-dust::after { display: none; }
}


/* The fight and timeline are the interface. */
.game-shell { padding-top: 24px; padding-bottom: 24px; }
.health-row { top: 16px; }
.planning-panel { margin-top: 18px; padding-top: 18px; }
.planning-heading { margin-bottom: 12px; }
.planning-heading h2 { font-size: 26px; margin: 0; letter-spacing: -.5px; }
.countdown { padding: 5px 12px; transform: none; }
.countdown strong { font-size: 32px; min-width: 80px; }
.countdown > span { font-size: 13px; }
.controls-row { margin-top: 20px; }
.planning-release { margin-top: 18px; padding-top: 14px; }
.clear-button { padding: 10px 0; background: none; color: #785b40; font: 900 11px var(--hand); letter-spacing: .8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .game-shell { padding-top: 12px; padding-bottom: 12px; }
  .health-row { top: 12px; }
  .planning-heading h2 { font-size: 23px; }
  .countdown strong { font-size: 28px; min-width: 70px; }
}

/* Painted technique cards and the small, persistent chakra reserve. */
.technique-art { stroke: none; fill: none; overflow: hidden; }
.action-choice { min-height: 105px; padding: 8px 12px; }
.action-choice .action-icon { flex: 0 0 64px; width: 64px; height: 85px; }
.action-icon .technique-art { width: 64px; height: 85px; }
.tick-cell .technique-art { width: 48px; height: 60px; stroke: none; }
.tick-cell .action-tick, .tick-cell .move-name { z-index: 2; text-shadow: 0 1px 2px #172338; }
.tick-cell.charge { background: #3a91aa; border-color: #9be5ed; }
.charge-choice { --accent: #236d8c; background: #b5e2e7; }
.chakra-row { position: absolute; top: 66px; left: 22px; right: 22px; z-index: 12; display: flex; justify-content: space-between; pointer-events: none; }
.chakra-row > div { display: flex; align-items: center; gap: 8px; background: #10253cdd; padding: 5px 9px; border-radius: 6px; color: #9cdded; font: 800 9px var(--hand); letter-spacing: 1px; }
.chakra-pips { display: inline-flex; align-items: center; gap: 5px; }
.chakra-pips i { display: inline-block; width: 10px; height: 14px; border: 1px solid #6f9dab; border-radius: 70% 30% 60% 40%; background: #122d40; rotate: 25deg; }
.chakra-pips i.is-full { background: #75dcf4; box-shadow: 0 0 7px #7be3fa88; }
.chakra-pips b { font-size: 10px; letter-spacing: 0; margin-left: 3px; }
.enemy-chakra i.is-full { background: #ffb884; box-shadow: 0 0 7px #ffba7788; }
.will-fizzle { box-shadow: inset 0 0 0 2px #ffc276; }
.chakra-warning { position: absolute; right: 5px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #ffd195; color: #613117; font: 900 13px var(--hand); z-index: 3; }
.did-fizzle { filter: saturate(.25); opacity: .65; }
.fighter[data-pose="heavy-charge"] .sprite-frame[data-frame="heavy-charge"] { display: block; }
.fighter[data-pose="heavy-charge"] .character-sprite { animation: heavy-windup 1.8s ease-out both; }
@keyframes heavy-windup { from { scale: 1; } to { scale: 1.07; } }
.fighter.is-heavy.is-attacking .strike-arc { border-color: #ffe591; filter: drop-shadow(0 0 8px #f7ab40); }
.fighter.is-charging .casting-aura { opacity: 1; border-color: #9aeaff; animation: chakra-gather var(--action-duration, 1200ms) ease-out both; }
@keyframes chakra-gather { from { opacity: 0; scale: 1.5; } 35% { opacity: 1; } to { opacity: 0; scale: .45; } }
.spell-effect.charge-effect { color: #b9f5ff; text-shadow: 2px 2px #15334a; font: 900 18px var(--hand); animation: float-up var(--spell-duration) ease-out both; }
.spell-effect.fizzle-effect { width: 95px; height: 70px; background: none; border: 0; box-shadow: none; animation: float-up var(--spell-duration) ease-out both; }
.charge-effect, .fizzle-effect { top: 43%; }
.charge-effect.player-spell, .fizzle-effect.player-spell { left: calc(50% - 115px); }
.charge-effect.enemy-spell, .fizzle-effect.enemy-spell { left: calc(50% + 50px); }
.fizzle-effect b { position: absolute; left: 12px; bottom: 0; color: #f9e6c6; font: 900 20px var(--hand); text-shadow: 2px 2px #273844; }
.fizzle-effect i { position: absolute; top: 0; left: 30px; width: 28px; height: 22px; border: 2px solid #645a49; border-radius: 48%; background: #ddceb0; animation: fizzle-puff var(--spell-duration) ease-out both; }
.fizzle-effect i:nth-child(2) { left: 10px; top: 12px; animation-delay: 50ms; }
.fizzle-effect i:nth-child(3) { left: 51px; top: 10px; animation-delay: 90ms; }
@keyframes fizzle-puff { from { opacity: 0; scale: .1; } 25% { opacity: .9; } to { opacity: 0; scale: 1.5; translate: 0 -20px; } }
.unlock-card { max-height: 90dvh; overflow-y: auto; }
.unlock-card .technique-reward { display: block; border: 0; padding: 0; background: transparent; margin: 8px 0 22px; }
.unlock-card h2 { font-size: clamp(25px, 5vw, 36px); }
.unlock-art { width: 150px; height: 200px; margin: 0 auto 6px; filter: drop-shadow(0 6px 0 #ae87572b); }
.unlock-art .technique-art { width: 100%; height: 100%; }
.unlock-card .technique-reward > p { color: #695037; font: 600 14px/1.6 var(--hand); }
.bonus-unlock { display: flex; align-items: center; justify-content: center; gap: 16px; border-top: 1px solid #bc9d71; margin-top: 14px; padding-top: 10px; text-align: left; }
.bonus-unlock .technique-art { width: 60px; height: 80px; }
.bonus-unlock span { font: 600 11px var(--hand); color: #796044; }
.bonus-unlock b { display: block; font-size: 18px; color: #24546e; margin: 4px 0; }
.bonus-unlock small { display: block; }
@media (max-width: 760px) {
  .chakra-row { top: 65px; left: 10px; right: 10px; }
  .chakra-row > div { font-size: 7px; gap: 5px; padding: 4px 6px; }
  .action-choice { gap: 7px; padding: 7px; min-height: 95px; }
  .action-choice .action-icon { flex-basis: 44px; width: 44px; height: 64px; }
  .action-icon .technique-art { width: 44px; height: 64px; }
  .tick-cell .technique-art { width: 32px; height: 47px; max-width: 100%; }
  .unlock-art { width: 120px; height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .fighter[data-pose="heavy-charge"] .character-sprite, .fighter.is-charging .casting-aura { animation: none; }
}


/* A small title, one playback control, and no artificial floor shadows. */
.game-title { margin: 0 0 20px; }
.game-title h1 { margin: 0; color: #fff0ce; font: 900 28px var(--hand); letter-spacing: -.7px; }
.game-title h1 > span { color: #ffcb77; margin-right: 8px; }
.game-title em { font-style: normal; color: #ff785f; }
.fighter::before { display: none; }
.fighter.player, .fighter.enemy { filter: none; }
.playback-controls { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.fast-forward-button { padding: 10px 13px; background: #234d65; color: #fff0ce; border: 2px solid #152b41; border-radius: 9px 6px 10px 7px; font: 900 11px var(--hand); letter-spacing: .5px; }
.fast-forward-button[aria-pressed="true"] { background: #cf694b; }
.fizzle-effect b { width: 150px; left: -30px; text-align: center; font-size: 13px; line-height: 1.3; }
.unlock-preview { position: relative; height: 190px; margin: 0 0 18px; overflow: hidden; border-radius: 12px; background: radial-gradient(ellipse at 50% 80%, #ddc49655, transparent 70%); --action-duration: 900ms; }
.unlock-preview .fighter.unlock-fighter { width: 210px; height: 190px; left: calc(50% - 105px); right: auto; bottom: 0; }
.unlock-card .unlock-art { width: 105px; height: 140px; }
.unlock-card .technique-reward { margin-bottom: 0; }
.unlock-preview .fighter .character-sprite { animation-duration: 900ms; }
@media (max-width: 760px) {
  .game-title { margin-bottom: 12px; }
  .game-title h1 { font-size: 22px; }
  .playback-controls { gap: 8px; }
  .fast-forward-button { font-size: 9px; padding: 8px; max-width: 105px; }
  .unlock-preview { height: 155px; }
  .unlock-preview .fighter.unlock-fighter { height: 155px; width: 175px; left: calc(50% - 87px); }
}


/* A heavy move reads as two aligned beats: windup, then the dangerous hit. */
.tick-cell.heavy, .tick-cell.slam { padding: 0; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.heavy-charge-half, .heavy-hit-half { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-width: 0; }
.heavy-charge-half { background: #423747; color: #d7c3b3; border-right: 2px dashed #ffd486; }
.heavy-hit-half { background: #c54442; color: #fff1b5; }
.heavy-charge-half small, .heavy-hit-half small { position: absolute; top: 4px; font: 900 8px var(--hand); letter-spacing: .5px; z-index: 2; }
.heavy-charge-half b, .heavy-hit-half b { position: absolute; bottom: 4px; font: 900 8px var(--hand); z-index: 2; }
.heavy-charge-half svg { width: 24px; height: 27px; opacity: .55; }
.tick-cell.heavy.is-current[data-stage="charge"] .heavy-charge-half,
.tick-cell.slam.is-current[data-stage="charge"] .heavy-charge-half,
.tick-cell.slam.is-current[data-stage="impact"] .heavy-hit-half,
.tick-cell.heavy.is-current[data-stage="impact"] .heavy-hit-half { box-shadow: inset 0 0 0 3px #ffe39c; }
.player-lane .tick-cell.is-locked { opacity: .6; cursor: default; }
.player-lane .tick-cell.is-locked::after { content: '•'; position: absolute; top: 3px; right: 5px; color: #d3e9e5; }
.fast-forward-button:disabled { opacity: .45; cursor: wait; }
@media (max-width: 760px) {
  .heavy-charge-half small, .heavy-hit-half small, .heavy-charge-half b, .heavy-hit-half b { font-size: 6px; letter-spacing: 0; }
  .heavy-charge-half svg { width: 17px; height: 21px; }
  .planning-heading h2 { font-size: 20px; }
}

/* Four grounded positions; fighters retain their tile through scene changes. */
.arena > .fighter {
  --body-width: clamp(105px, 24%, 290px);
  width: var(--body-width); height: clamp(165px, 24vw, 265px);
  left: var(--position-x, 39%); right: auto; margin-left: calc(var(--body-width) / -2); bottom: 38px;
}
.arena > .fighter.enemy { --position-x: 61%; }
.position-slots { position: absolute; bottom: 10px; left: 6%; width: 88%; display: grid; grid-template-columns: repeat(4, 1fr); z-index: 1; pointer-events: none; }
.position-slot { position: relative; margin: 0 12%; height: 19px; border-bottom: 3px solid #f6e2b958; border-radius: 3px; text-align: center; color: #fff0c480; font: 800 10px var(--hand); }
.position-slot span { background: #172c3bdd; border-radius: 4px; padding: 2px 7px; }
.position-slot.occupied-player { border-color: #78e8ef; color: #a4f5fc; }
.position-slot.occupied-enemy { border-color: #fa9c7c; color: #ffc28e; }
.position-slot.is-threatened { border-color: #ff6248; color: #fff0c4; }
.position-slot.is-threatened::before { content: 'SLAM ↓'; position: absolute; bottom: 18px; left: 0; width: 100%; height: 70px; padding-top: 9px; border: 2px dashed #ff8b55; border-bottom: 0; background: linear-gradient(0deg, #ef482e77, #ed402c11); color: #ffe598; font: 900 12px var(--hand); animation: slam-warning .6s ease-in-out infinite alternate; }
.range-label { display: block; font: 800 9px var(--hand); color: #ffe2a3; letter-spacing: 1px; margin-top: 3px; }
.versus { text-align: center; }
.is-travelling .position-slots { opacity: 0; }
.dodge-choice, .dash-choice { background: #cbe3ce; }
.kunai-choice { background: #d8dfeb; }
.tick-cell.dodge, .tick-cell.dash { background: #7f9d7e; color: #f6f0cf; border-color: #bbdbb1; }
.player-lane .tick-cell.dodge, .player-lane .tick-cell.dash { background: #5c9fa4; color: #e4ffff; border-color: #a5e3d1; }
.tick-cell.kunai { background: #ad747b; color: #ffe9db; border-color: #edb2a0; }
.player-lane .tick-cell.kunai { background: #709bb7; color: #f4f7fa; border-color: #c9e4ef; }
.tick-cell.slam { border: 2px solid #ffa268; }
.tick-cell.slam .heavy-hit-half { background: #a83124; }
.fighter.is-throwing .strike-arc { display: none; }
.fighter.is-throwing { animation: none; }
.fighter.is-dodging .character-sprite { animation: retreat-hop var(--action-duration, 1200ms) ease-out; }
.fighter.is-dashing .character-sprite { animation: dash-lean var(--action-duration, 1200ms) ease-out; }
.fighter.is-slamming .character-sprite { animation: ground-cleave var(--action-duration, 1200ms) ease-out; }
.movement-callout { font: 900 clamp(12px, 2vw, 22px) var(--hand); white-space: nowrap; color: #ffe6a3; text-shadow: 2px 2px #24283e; margin-left: -50px; }
.ranged-projectile { position: absolute; top: 61%; width: 64px; height: 40px; z-index: 6; pointer-events: none; transform: translateX(-50%) scaleX(var(--direction)); }
.ranged-projectile svg { width: 100%; height: 100%; stroke-width: 1.5; stroke: #273047; }
.kunai-projectile svg { rotate: 40deg; }
.fireball-projectile { width: 86px; height: 62px; top: 56%; }
.fireball-projectile svg { fill: #ff9c32; stroke: #ffe29a; rotate: 90deg; }
.ground-impact { position: absolute; bottom: 29px; width: 150px; height: 130px; margin-left: -75px; z-index: 5; pointer-events: none; color: #ffb955; animation: ground-burst var(--action-duration, 1200ms) ease-out both; }
.ground-impact b { display: block; font-size: 130px; line-height: 1; text-align: center; transform: scaleY(.45); text-shadow: 2px 3px #6c352c; }
.ground-impact i { position: absolute; width: 22px; height: 25px; background: #9b7959; border: 3px solid #3e3031; rotate: 30deg; left: 20%; top: 15%; }
.ground-impact i:nth-child(2) { left: 65%; top: 35%; rotate: -20deg; }
.ground-impact i:nth-child(3) { left: 45%; top: 0; width: 15px; }
@keyframes slam-warning { to { background-color: #e3463444; } }
@keyframes retreat-hop { 35% { translate: 0 -22px; rotate: calc(-8deg * var(--direction)); } }
@keyframes dash-lean { 25% { rotate: calc(12deg * var(--direction)); scale: 1.08; } }
@keyframes ground-cleave { 15% { translate: 0 -18px; scale: 1.12; } 40% { translate: 0 7px; scale: 1.05; } }
@keyframes ground-burst { from { opacity: 0; scale: .4; } 20% { opacity: 1; scale: 1; } to { opacity: 0; scale: 1.4; translate: 0 -15px; } }
@media (max-width: 760px) {
  .arena > .fighter { --body-width: clamp(95px, 27%, 180px); height: 175px; }
  .position-slot { margin: 0 8%; }
  .position-slot.is-threatened::before { font-size: 9px; height: 55px; }
  .range-label { font-size: 7px; letter-spacing: 0; }
  .ranged-projectile { width: 36px; height: 28px; }
  .fireball-projectile { width: 48px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .position-slot.is-threatened::before, .fighter.is-dodging .character-sprite, .fighter.is-dashing .character-sprite, .fighter.is-slamming .character-sprite { animation: none; }
}

/* Keep the timeline directly beneath the arena; the clock belongs to the fight. */
.health-row { align-items: flex-start; }
.battle-clock { flex: 0 0 132px; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 14; }
.battle-clock .countdown { justify-content: center; width: 104px; padding: 3px 9px; gap: 5px; border-width: 2px; box-shadow: 2px 3px 0 #17233855; }
.battle-clock .countdown strong { min-width: 0; font-size: 30px; letter-spacing: -.5px; }
.battle-clock .countdown > span { font-size: 10px; }
.battle-clock .countdown-track { width: 90px; height: 4px; margin: 6px 0 0; border: 0; background: #122c40bb; }
.battle-clock .countdown-track > div { background: #ffe39b; box-shadow: none; }
.battle-clock .range-label { margin-top: 6px; text-shadow: 1px 2px #172338; }
.battle-clock .fast-forward-button { margin-top: 7px; font-size: 9px; padding: 6px 8px; white-space: nowrap; }
.planning-panel { padding-top: 14px; }
@media (max-width: 760px) {
  .health-row { gap: 8px; }
  .health-card { min-width: 0; }
  .battle-clock { flex-basis: 78px; }
  .battle-clock .countdown { width: 68px; padding: 2px 5px; border-radius: 9px; }
  .battle-clock .countdown strong { font-size: 24px; }
  .battle-clock .countdown-track { width: 58px; margin-top: 4px; }
  .battle-clock .range-label { margin-top: 4px; }
  .battle-clock .fast-forward-button { font-size: 7px; padding: 5px 3px; max-width: none; letter-spacing: 0; }
  .planning-panel { padding-top: 10px; }
}