/* A weathered grimoire around a candlelit, overgrown sanctum. */
:root {
  --bg: #191814;
  --panel: #25231c;
  --line: #514935;
  --muted: #a39a85;
  --text: #e7ddc6;
  --lime: #d3b77c;
}
body {
  background: radial-gradient(ellipse at 50% 0, #49402b33, transparent 65%),
    repeating-linear-gradient(104deg, #ffffff02 0 1px, transparent 1px 5px), #191814;
}
.brand { font-family: Georgia, serif; font-weight: 700; letter-spacing: 1.4px; }
.brand-light { color: #c7b99b; }
.brand small, .prototype-label { color: #a39578; }
.brand-symbol { color: #c4a260; text-shadow: none; }
.icon-button { color: #b3a68b; border-color: #514633; border-radius: 3px; }
.arena-panel {
  background: #24271f;
  border: 1px solid #786344;
  border-radius: 3px;
  box-shadow: 0 0 0 4px #28251c, 0 0 0 5px #4c412b, 0 12px 35px #0005;
}
.arena-topline { background: #27271f; border-bottom: 1px solid #74634355; color: #b9aa8c; }
.arena-topline i { background: #bba06a; }
.fighter-label { color: #d5cbb5; }
.health-track, .enemy-health .health-track { border-color: #88744977; background: #151611; }
.health-track > div { background: linear-gradient(90deg, #46666d, #93b2ac); box-shadow: none; }
.enemy-health .health-track > div { background: linear-gradient(90deg, #b87864, #783d36); box-shadow: none; }
.arena { --action-duration: 560ms; }
.arena-scenery { filter: sepia(.15) saturate(.75); transition: filter .12s; }
.is-frozen .arena-scenery { filter: sepia(.2) saturate(.65); }
.sanctum-mist {
  position: absolute; inset: 60% 0 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 90%, #c3bd8c10, transparent 60%), radial-gradient(ellipse at 80% 90%, #c3bd8c0a, transparent 60%);
}
.arena::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 65%, transparent 15%, #100c08bb 90%);
  opacity: 0; transition: opacity .08s;
}
.arena.has-impact::after { opacity: .8; }
.arena.has-impact .arena-scenery { filter: sepia(.35) saturate(.35) brightness(.7); }
.arena-state { color: #d2c299; font-family: Georgia, serif; font-size: 10px; letter-spacing: 1.5px; z-index: 6; }
.state-diamond, .arena-bottom { color: #af9e77; }
.arena-bottom { z-index: 6; }
.arena-bottom > span:last-child { color: #d0bd94; }
.arena-bottom i { background: #c8ab72; }
.fighter { transform-origin: 50% 95%; }
.fighter.player { filter: drop-shadow(0 7px 5px #0009); --fighter-color: #b0c7c8; }
.fighter.enemy { filter: drop-shadow(0 7px 5px #0009); --fighter-color: #d89981; }
.fighter.is-hit { animation: none; }
.fighter.is-hit .character { animation: struck-portrait var(--action-duration) ease-out; }
.fighter.is-attacking, .fighter.is-attacking.is-hit {
  z-index: 4;
  animation: portrait-strike var(--action-duration) cubic-bezier(.2,.75,.25,1);
}
.is-attacking .body, .is-hit .body { animation: none; }
.is-attacking .sword-arm { animation: portrait-sword var(--action-duration) ease-out; }
.is-attacking .strike-arc { animation: portrait-slash var(--action-duration) ease-out; }
.strike-arc { border-width: 7px; filter: drop-shadow(0 0 4px #dbcda888); }
.magic-shield {
  border-color: #a5bfbe; border-width: 3px;
  background: radial-gradient(ellipse, #9fae9415, #bdc8ad25);
  box-shadow: 0 0 12px #b4c9ba33, inset 0 0 12px #c2c8a333;
  clip-path: polygon(50% 0, 100% 18%, 92% 70%, 50% 100%, 8% 70%, 0 18%);
  border-radius: 35%;
}
.enemy .magic-shield { border-color: #cba58c; background: #9b665c33; }
.is-clashing .magic-shield { box-shadow: 0 0 18px #eed9ac88, inset 0 0 20px #eed9ac66; }
.damage-number { font-family: Georgia, serif; color: #f1c6a8; text-shadow: 0 2px 4px #000; font-size: 34px; }
.damage-number.blocked { color: #d0d8c4; font-family: Georgia, serif; }
.eyebrow { color: #aa9b7e; }
.planning-heading h1 { font-family: Georgia, serif; font-weight: 400; font-size: 34px; color: #e3d2ac; }
.countdown strong { font-family: Georgia, serif; letter-spacing: -1px; }
.countdown-track { background: #54462c; }
.countdown-track > div { box-shadow: none; }
.timeline-header { color: #bcad8d; }
.timeline-header > span:last-child { color: #9f967e; }
.timeline {
  border: 1px solid #8e7850; border-radius: 3px;
  background: repeating-linear-gradient(95deg, #fff1 0 1px, transparent 1px 7px), #b7a47f;
  box-shadow: 0 3px 12px #0003, inset 0 0 25px #53442866;
}
.tick-ruler, .timeline-scale { color: #514332; }
.enemy-lane { background: #512d2ad9; border-color: #86644c; }
.player-lane { background: #263b48eb; border-color: #77795c; }
.lane-label { color: #e8b49b; font-family: Georgia, serif; }
.lane-label small { color: #bc9b80; }
.player-lane .lane-label { color: #c5d4ce; }
.player-lane .lane-label small { color: #a1b0a4; }
.tick-cell { border-color: #c8a37533; border-radius: 2px; }
.tick-cell.attack { background: linear-gradient(145deg, #a75b47, #743b33); border-color: #d29675; color: #f7dac0; box-shadow: none; }
.tick-cell.block { background: repeating-linear-gradient(-45deg,#bfa5820d 0 5px,transparent 5px 10px),#4f3933; border-color: #967c63; color: #cdb296; }
.player-lane .tick-cell { border-color: #a6b9ae44; }
.player-lane .tick-cell.attack { background: linear-gradient(145deg, #527d91, #38566d); border-color: #a4b6b8; color: #e6e5cf; }
.player-lane .tick-cell.block { background: repeating-linear-gradient(-45deg,#bdd2bb0d 0 5px,transparent 5px 10px),#385b5d; border-color: #9cb4a4; color: #d5e2ce; }
.player-lane .tick-cell.fireball { background: linear-gradient(135deg, #725133, #8d5134); border-color: #d9a568; color: #f6d1a0; }
.player-lane .tick-cell.mend { background: linear-gradient(135deg, #3b5038, #4b6544); border-color: #9db276; color: #dde9bc; }
.tick-cell.is-current { outline: 2px solid #ead09d; outline-offset: -3px; background-image: linear-gradient(#e8d4a922,#e8d4a911); }
.tick-cell.is-impact { box-shadow: inset 0 0 0 2px #f2d7a2; filter: brightness(1.2); }
.cast-impact { position: absolute; top: 6px; right: 6px; font-size: 8px; color: #f4d7a1; }
.playhead { background: #f2d5a0; box-shadow: 0 0 6px #eec08a77; }
.playhead span { color: #f2d5a0; }
.is-tick-playback .playhead { transition: left .1s ease-out; }
.planner-caption { color: #b2a78f; min-height: 48px; }
.planner-caption button { color: #b9a786; }
.spellbook-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 12px; color: #cdb990; }
.spellbook-label > span { font: italic 18px Georgia,serif; white-space: nowrap; }
.spellbook-label small { font-size: 9px; color: #9e947d; text-align: right; }
.action-buttons { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.action-choice { background: linear-gradient(#383329,#29271f); border: 1px solid #6e5e40; border-radius: 3px; padding: 17px 15px; gap: 11px; box-shadow: inset 0 0 0 3px #1c1a1633; }
.action-choice.is-selected, .action-choice.block-choice.is-selected { background: linear-gradient(#474333,#35362c); border-color: #d7bd84; box-shadow: inset 0 0 0 2px #c5a97633; }
.action-copy strong { font-family: Georgia,serif; font-size: 12px; letter-spacing: .8px; color: #e1d2b3; }
.action-copy small { color: #b6aa90; font-size: 8px; }
.action-icon { color: #a6bfca; }
.block-choice .action-icon { color: #b5c7bc; }
.fireball-choice .action-icon { color: #dca36b; }
.mend-choice .action-icon { color: #afc58b; }
.choice-dot { border-color: #8a7857; flex-shrink: 0; }
.is-selected .choice-dot { background: #d7bd84; border-color: #d7bd84; box-shadow: inset 0 0 0 2px #51472f; }
kbd { border-color: #796e57; color: #c4b89d; }
.instructions { color: #a49a83; }
.footer { border-color: #4c422e; color: #8e8168; }
.footer i { color: #bca26b; }
.result-card { background: radial-gradient(ellipse at top, #77623b33, transparent 65%), #29271f; border-color: #8c764d; border-radius: 4px; }
.result-card h2 { color: #ebd3a1; }
.replay-toolbar { background: #332f24; border-color: #8a7652; border-radius: 3px; }
.casting-aura { position: absolute; inset: 45% 20% 0; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(ellipse, #e6a05333, transparent 70%); }
.is-casting .casting-aura { opacity: 1; animation: spell-gather .65s ease-in-out infinite alternate; }
.is-casting.is-mending .casting-aura { background: radial-gradient(ellipse, #c4d89344, transparent 70%); }
.is-fireball .strike-arc { border-color: #efb572; }
.is-healing .casting-aura { opacity: 1; background: radial-gradient(ellipse, #c4d89388, transparent 70%); }
.spell-effect { position: absolute; pointer-events: none; }
.fireball-effect { top: 48%; left: 42%; width: 48px; height: 34px; border-radius: 45% 60% 60% 45%; background: radial-gradient(ellipse at 70% 50%, #fff0c1 0 12%, #edb167 25%, #be5c2b 55%, transparent 75%); box-shadow: -15px 0 25px #d77e3755; animation: fireball-flight var(--spell-duration) ease-in forwards; }
.enemy-spell.fireball-effect { animation-name: enemy-fireball-flight; }
.mend-effect { top: 40%; left: calc(50% - 155px); font: bold 30px Georgia,serif; color: #c6dc9c; text-shadow: 0 2px 4px #192218; animation: float-up .9s ease-out forwards; }
@keyframes portrait-strike {
  0% { translate: 0 0; scale: 1; }
  16% { translate: calc(65px * var(--direction)) -5px; scale: 1.24; }
  48% { translate: calc(70px * var(--direction)) -5px; scale: 1.24; }
  70% { translate: calc(55px * var(--direction)) -3px; scale: 1.16; }
  100% { translate: 0 0; scale: 1; }
}
@keyframes portrait-sword { 0% { transform: rotate(-35deg); } 20%, 50% { transform: rotate(80deg); } 100% { transform: rotate(0); } }
@keyframes portrait-slash { 0% { opacity: 0; scale: .65; } 18%, 43% { opacity: 1; scale: 1.15; } 70%, 100% { opacity: 0; scale: 1.35; } }
@keyframes struck-portrait { 0% { translate: 0 0; } 22%, 40% { translate: calc(-17px * var(--direction)) 0; filter: sepia(.5) brightness(1.6); } 100% { translate: 0 0; filter: none; } }
@keyframes spell-gather { from { scale: .85; opacity: .5; } to { scale: 1.2; opacity: 1; } }
@keyframes fireball-flight { 0% { left: 42%; opacity: 0; scale: .5; } 15% { opacity: 1; } 55% { left: 60%; opacity: 1; scale: 1.2; } 100% { left: 63%; opacity: 0; scale: 1.8; } }
@keyframes enemy-fireball-flight { 0% { left: 60%; opacity: 0; } 15% { opacity: 1; } 55% { left: 40%; opacity: 1; } 100% { left: 37%; opacity: 0; scale: 1.8; } }
@media (max-width: 1000px) {
  .action-buttons { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .action-copy small { font-size: 9px; }
}
@media (max-width: 760px) {
  .planning-heading h1 { font-size: 26px; }
  .spellbook-label { align-items: flex-start; }
  .spellbook-label small { max-width: 240px; line-height: 1.6; font-size: 8px; }
  .arena-state { font-size: 8px; }
  @keyframes portrait-strike {
    0%, 100% { translate: 0 0; scale: 1; }
    16%, 48% { translate: calc(35px * var(--direction)) 0; scale: 1.18; }
    70% { translate: calc(25px * var(--direction)) 0; scale: 1.1; }
  }
}
@media (max-width: 430px) {
  .planning-heading h1 { font-size: 23px; }
  .action-choice { padding: 14px 10px; gap: 8px; }
  .action-copy strong { font-size: 10px; }
  .action-copy small { font-size: 7px; }
  .spellbook-label small { max-width: 190px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .fighter.is-attacking, .fighter.is-attacking.is-hit, .fighter.is-hit .character, .is-casting .casting-aura { animation: none; }
  .fighter.is-attacking { filter: brightness(1.2); }
  .is-tick-playback .playhead { transition: none; }
  .fireball-effect { animation-duration: .1s; }
}

/* Successful guards read as a distinct, weighty impact. */
.damage-number.blocked {
  display: flex;
  align-items: center;
  gap: 6px;
  top: 29%;
  width: max-content;
  max-width: 47%;
  padding: 5px 9px;
  color: #fff0be;
  font: 800 21px Georgia, serif;
  letter-spacing: .5px;
  border: 1px solid #d2b77f;
  border-radius: 4px;
  background: #2b3029eb;
  box-shadow: 0 3px 0 #111811, 0 0 16px #ebd6a533;
  text-shadow: 0 2px 1px #171c15;
  animation: shield-callout 1s ease-out forwards;
}
.damage-number.blocked svg { width: 23px; height: 23px; flex-shrink: 0; stroke-width: 2.2; }
.is-clashing .magic-shield { animation: shield-bang .38s ease-out; }
@keyframes shield-callout {
  0% { opacity: 0; transform: translate(-50%, 7px) scale(.7); }
  12% { opacity: 1; transform: translate(-50%, -3px) scale(1.13); }
  24%, 65% { opacity: 1; transform: translate(-50%, -5px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -32px) scale(.95); }
}
@keyframes shield-bang {
  0%, 45% { filter: brightness(1); }
  15% { filter: brightness(2); scale: 1.12; }
  30% { scale: .96; }
  100% { scale: 1; filter: brightness(1); }
}
@media (max-width: 760px) {
  .damage-number.blocked { font-size: 15px; padding: 5px 7px; gap: 4px; }
  .damage-number.blocked svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-clashing .magic-shield { animation: none; filter: brightness(1.4); }
}

/* Transparent painted sprites retain the same lunge, guard and hit state hooks. */
.fighter .character-sprite {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: 50% 95%;
  user-select: none;
  pointer-events: none;
  animation: sprite-idle 3.5s ease-in-out infinite;
}
.fighter::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 18%;
  width: 65%;
  height: 10px;
  background: #080b0799;
  border-radius: 50%;
  filter: blur(3px);
  z-index: -1;
}
.fighter.is-attacking .character-sprite { animation: sprite-strike var(--action-duration) ease-out; }
.fighter.is-hit .character-sprite { animation: struck-portrait var(--action-duration) ease-out; }
.fighter.is-dead .character-sprite { animation: none; }
@keyframes sprite-idle { 50% { translate: 0 -3px; rotate: .5deg; } }
@keyframes sprite-strike {
  0% { rotate: calc(-5deg * var(--direction)); }
  18%, 48% { rotate: calc(9deg * var(--direction)); }
  100% { rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) {
  .fighter .character-sprite,
  .fighter.is-attacking .character-sprite,
  .fighter.is-hit .character-sprite { animation: none; }
}

.planning-release {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 17px;
  padding-top: 16px;
  border-top: 1px solid #6e5e4044;
}
.planning-release p { margin: 0; font: italic 16px Georgia, serif; color: #d0bd96; }
.planning-release small { display: block; margin-top: 5px; font: 10px sans-serif; color: #a69b83; }
.advance-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-width: 180px;
  padding: 14px 22px;
  border: 1px solid #ecd4a0;
  border-radius: 3px;
  background: linear-gradient(#dac28e, #b2935c);
  color: #302618;
  box-shadow: inset 0 0 0 3px #67502d22, 0 3px 0 #5a4528;
  font: 700 13px Georgia, serif;
  letter-spacing: 1px;
}
.advance-button:hover:not(:disabled) { filter: brightness(1.12); }
.advance-button:active:not(:disabled) { translate: 0 2px; box-shadow: inset 0 0 0 3px #67502d22; }
.advance-button:disabled { opacity: .4; }
.advance-button span { font-size: 20px; }
@media (max-width: 760px) {
  .planning-release { gap: 12px; }
  .planning-release p { font-size: 14px; }
  .planning-release small { max-width: 190px; font-size: 8px; line-height: 1.6; }
  .advance-button { min-width: 130px; padding: 12px 16px; gap: 16px; font-size: 11px; }
}

/* Fighter frame visibility; the shinobi theme adds a sixth hand-seal drawing. */
.sprite-atlas .sprite-frame { display: none; }
.fighter[data-pose="idle"] .sprite-frame[data-frame="idle"],
.fighter[data-pose="attack"] .sprite-frame[data-frame="attack"],
.fighter[data-pose="attack-alt"] .sprite-frame[data-frame="attack-alt"],
.fighter[data-pose="block"] .sprite-frame[data-frame="block"],
.fighter[data-pose="hurt"] .sprite-frame[data-frame="hurt"] { display: block; }
.fighter .sprite-atlas { overflow: hidden; }
.fighter { width: 300px; height: 220px; bottom: 20px; }
.fighter.player { left: calc(50% - 300px); }
.fighter.enemy { right: calc(50% - 300px); }
.fighter .magic-shield { right: 12px; }
.fighter.enemy .magic-shield { left: 12px; right: auto; }
@media (min-width: 1600px) {
  .fighter { width: 330px; height: 242px; }
  .fighter.player { left: calc(50% - 330px); }
  .fighter.enemy { right: calc(50% - 330px); }
}
@media (max-width: 760px) {
  .fighter { width: 270px; height: 198px; bottom: 23px; }
  .fighter.player { left: calc(50% - 240px); }
  .fighter.enemy { right: calc(50% - 240px); }
}
@media (max-width: 430px) {
  .fighter { width: 250px; height: 183px; }
  .fighter.player { left: calc(50% - 215px); }
  .fighter.enemy { right: calc(50% - 215px); }
}

/* Timing is visible; move type remains concealed until its execution tick. */
.enemy-lane .tick-cell.unknown-action {
  background: repeating-linear-gradient(-45deg, #bfa58208 0 6px, transparent 6px 12px), #413330;
  border: 1px dashed #a48a6a;
  color: #e4c9a4;
  box-shadow: none;
}
.unknown-mark { font: italic 700 30px Georgia, serif; line-height: 1; }
.ability-uses { font: 10px Georgia, serif; color: #e2c692; margin-top: 3px; }
.action-choice.is-exhausted { background: #28251f; border-style: dashed; }
.action-choice.is-exhausted .ability-uses { color: #c88874; }
.damage-number > small { display: block; font: bold 9px Georgia, serif; letter-spacing: .5px; white-space: nowrap; color: #e3b078; }
@media (max-width: 760px) {
  .unknown-mark { font-size: 25px; }
  .ability-uses { font-size: 9px; }
}