/* Native selection feedback belongs to text fields, not the combat sprites. */
.battlefield,.battlefield *{
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
}
.battlefield img{-webkit-user-drag:none}
/* Fixed feet and contact shadows; only the clipped upper sprite moves. */
.battlefield .actor-idle{--idle-cycle:var(--enemy-idle-ms);--idle-lift:var(--enemy-idle-px);--idle-steps:var(--enemy-idle-steps);display:block;position:relative;z-index:1;width:100%;height:100%;pointer-events:none}
.battlefield .hero-idle{--idle-cycle:var(--hero-idle-ms);--idle-lift:var(--hero-idle-px);--idle-steps:var(--hero-idle-steps);--idle-delay:var(--hero-idle-phase)}
.battlefield.miniboss-fight .enemy-idle{--idle-cycle:var(--miniboss-idle-ms);--idle-lift:var(--miniboss-idle-px);--idle-steps:var(--miniboss-idle-steps)}
.battlefield.boss-fight .enemy-idle{--idle-cycle:var(--boss-idle-ms);--idle-lift:var(--boss-idle-px);--idle-steps:var(--boss-idle-steps)}
.battlefield .actor-idle>img,.battlefield .idle-motion,.battlefield .idle-feet{image-rendering:pixelated!important}
.battlefield .idle-top,.battlefield .idle-motion,.battlefield .idle-feet{position:absolute;inset:0;pointer-events:none}
.battlefield .idle-top{clip-path:inset(0 0 12% 0);visibility:hidden}
.battlefield .idle-feet{clip-path:inset(87% 0 0 0);visibility:hidden}
.battlefield .idle-motion,.battlefield .idle-feet{background:var(--idle-sprite) center bottom/contain no-repeat}
html.hw-game-active .idle-ready:not(.actor-active)>img{opacity:0}
html.hw-game-active .idle-ready:not(.actor-active)>.idle-top,html.hw-game-active .idle-ready:not(.actor-active)>.idle-feet{visibility:visible}
html.hw-game-active .idle-ready .idle-motion{animation:hw-idle-breathe var(--idle-cycle) steps(var(--idle-steps),end) var(--idle-delay,0s) infinite!important}
@keyframes hw-idle-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--idle-lift))}}
html.hw-game-active .actor-active .idle-motion,html.hw-game-active[data-combat-idle-paused] .idle-ready .idle-motion{animation-play-state:paused!important}
html.hw-lite .idle-top,html.hw-lite .idle-feet,html:not(.hw-game-active) .idle-top,html:not(.hw-game-active) .idle-feet,.combat-hero.defeated .idle-top,.combat-hero.defeated .idle-feet{display:none!important}
html.hw-lite .actor-idle>img,.combat-hero.defeated .actor-idle>img{opacity:1!important}
@media(prefers-reduced-motion:reduce){.battlefield .idle-top,.battlefield .idle-feet{display:none!important}.battlefield .actor-idle>img{opacity:1!important}}
/* Combat impacts stay on sprites, outside the stable HUD and static arena. */
.app-frame .battlefield .duel-slash{
  --impact-core:#f4e2c4;position:absolute;z-index:12;width:72px;height:72px;
  left:75%;top:50%;border:0;border-radius:0;opacity:0;transform:none;
  background:linear-gradient(135deg,transparent 45%,#9d81624d 47%,var(--impact-core) 50%,#a7764e80 52%,transparent 55%);
  box-shadow:none;pointer-events:none;
}
.duel-slash::before,.duel-slash::after{
  content:'';position:absolute;inset:16%;
  background:linear-gradient(45deg,transparent 45%,var(--impact-core) 50%,transparent 55%);
}
.duel-slash::after{inset:29%;transform:rotate(22deg)}
.app-frame .duel-slash.impact-critical{--impact-core:#ffdb96}
.hw-lite .duel-slash{display:none!important}
.hw-lite .battlefield .combat-hero-sprite,.hw-lite .battlefield .monster-art img{transform:none!important}
@media(prefers-reduced-motion:reduce){
  .duel-slash{display:none!important}
  .battlefield .combat-hero-sprite,.battlefield .monster-art img{transform:none!important}
}
/* Two bounded damage echoes, behind the immediate enemy/hero HP fills. */
.battlefield .hp-track,.hud-dock .hero-health-track{position:relative;isolation:isolate}
.battlefield .hp-damage-trail,.hud-dock .hero-health-track>.hp-damage-trail{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  display:block;width:100%;height:100%;transition:none;
  transform-origin:left center;background:linear-gradient(#c39a63,#765132);
}
.battlefield .hp-track .hp-fill{position:relative;z-index:1;transition:none}
.hud-dock .hero-health-track>#heroHPFill{position:relative;z-index:1;transition:none!important}
.battlefield .hp-track .hp-numbers{z-index:2;text-shadow:0 1px 2px #000}
.hw-lite .hp-damage-trail{visibility:hidden}
@media(prefers-reduced-motion:reduce){.hp-damage-trail{visibility:hidden}}
/* Cached actor coordinates share arena space; they never inherit sprite rotation. */
.app-frame .battlefield .hero-damage-layer{
  inset:0;width:100%;height:100%;display:block;contain:layout style;z-index:24;
}
.app-frame .battlefield .combat-number{
  position:absolute;width:max-content;margin:0;padding:0;pointer-events:none;
  font-family:Georgia,serif;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;
  letter-spacing:0;white-space:nowrap;color:#fff0d1;
  text-shadow:-1px -1px #100b0c,1px -1px #100b0c,-1px 1px #100b0c,1px 1px #100b0c,0 2px 2px #000;
  animation:none!important;transform:translateX(-50%);
}
.app-frame .combat-number.crit{color:#ff974f;font-weight:900}
.app-frame .combat-number.hero-hit{color:#ffafa3}
.app-frame .combat-number.healing{color:#c3e6b3}
.app-frame .combat-number.event-hit,.app-frame .combat-number.reward{color:#e8c889}
.combat-number[data-caption]::before{
  content:attr(data-caption);position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);
  padding:1px 4px;border:1px solid #9e774b;background:#171014e8;color:inherit;
  font:700 9px/11px Arial,sans-serif;letter-spacing:.7px;text-shadow:0 1px #000;
}
.combat-number.healing[data-caption]::before{border-color:#6f8062}
@keyframes hw-number-rise{
  0%{opacity:0;transform:translate(-50%,5px)}
  10%,55%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-32px)}
}
.hw-lite .app-frame .battlefield .combat-number{animation:none!important}
@keyframes hw-number-still{0%,75%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .app-frame .battlefield .combat-number{animation:none!important}
}
/* Q can trigger :focus-visible on the last clicked target. Keep the keyboard
   cue on its short caption instead of outlining the monster's entire box. */
.battlefield .attack-target:focus-visible{outline:none}
.battlefield .attack-target:focus-visible .target-hint{
  color:#ffe2b2;opacity:1;text-decoration:underline;text-underline-offset:3px;
}

/* One static painted frame, two cached WebP sprites; no extra animation loop. */
.app-frame .event-overlay{
  left:12px;right:auto;top:142px;width:156px;height:222px;
  padding:27px 15px 17px;background:url('assets/events/infernal-reliquary.webp?v=2') center/100% 100% no-repeat;
  animation:none;box-shadow:none;
}
.app-frame .event-ribbon{
  height:15px;padding:0;border:0;background:none;box-shadow:none;
  color:#e0bc8e;font:700 8px/15px var(--ui);letter-spacing:1px;text-shadow:0 1px #000;
}
.app-frame .event-button{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:78px 30px 12px 6px 16px;
  align-items:center;justify-items:center;gap:3px;width:100%;padding:0;
  border:0;background:none;box-shadow:none;animation:none;color:#f0d6b0;
}
.app-frame .event-button:focus-visible{outline:1px solid #cf9b64;outline-offset:2px}
.app-frame .event-illustration{display:block;width:100%;height:78px;line-height:1;pointer-events:none}
.app-frame .event-illustration img{display:block;width:100%;height:100%;object-fit:contain}
.app-frame .event-title{
  display:grid;place-items:center;width:100%;min-height:0;max-width:100%;
  font:700 14px/15px var(--serif);color:#f3dcbd;text-align:center;text-wrap:balance;
}
.app-frame .event-instruction{
  margin:0;padding:0;color:#d4b692;font:700 8px/12px var(--ui);letter-spacing:.2px;
}
.app-frame .event-progress-track{
  width:100%;height:6px;border:1px solid #72513b;background:#120b0c;overflow:hidden;
}
.app-frame .event-progress-track>span{
  width:100%!important;transform-origin:left center;background:linear-gradient(90deg,#7c2522,#d38b49);
}
.app-frame .event-clock{margin:0;color:#e7c494;font:700 11px/16px var(--ui);font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .app-frame .event-overlay{
    left:6px;top:164px;width:116px;height:min(184px,calc(100% - 172px));
    padding:22px 11px 13px;
  }
  .app-frame .event-ribbon{height:13px;font-size:7px;line-height:13px;letter-spacing:.3px}
  .app-frame .event-button{height:calc(100% - 13px);grid-template-rows:minmax(22px,1fr) 28px 12px 6px 15px;gap:3px}
  .app-frame .event-illustration{width:100%;height:100%;min-height:0}
  .app-frame .event-title{font-size:12px;line-height:14px}
  .app-frame .event-instruction{font-size:8px;letter-spacing:0;white-space:nowrap}
  .app-frame .event-clock{font-size:10px;line-height:15px}
}
@media(max-width:760px) and (max-height:650px) and (orientation:portrait){
  .app-frame .event-overlay{top:164px;height:min(166px,calc(100% - 172px));padding:18px 11px 10px}
  .app-frame .event-ribbon{height:11px;line-height:11px}
  .app-frame .event-button{height:calc(100% - 11px);grid-template-rows:minmax(24px,1fr) 26px 10px 5px 14px;gap:2px}
  .app-frame .event-title{line-height:13px}
  .app-frame .event-instruction{line-height:10px}
  .app-frame .event-clock{line-height:14px}
}
@media(orientation:landscape) and (max-height:600px){
  .app-frame .event-overlay{left:6px;top:94px;width:min(116px,calc(15vw - 10px));height:min(156px,calc(100% - 100px));padding:16px 11px 10px}
  .app-frame .event-ribbon{height:11px;font-size:7px;line-height:11px;letter-spacing:.3px}
  .app-frame .event-button{height:calc(100% - 11px);grid-template-rows:minmax(18px,1fr) 26px 10px 5px 14px;gap:2px}
  .app-frame .event-illustration{height:100%;min-height:0}
  .app-frame .event-title{font-size:12px;line-height:13px}
  .app-frame .event-instruction{font-size:8px;line-height:10px;letter-spacing:0;white-space:nowrap}
  .app-frame .event-clock{font-size:10px;line-height:14px}
}

/* Bounded decorative layers always remain below HP (17) and damage text (20/24). */
.target-flash,.finisher-art,.combat-spark{position:absolute;pointer-events:none;opacity:0;z-index:12}
.target-flash{background:#ffdfce;mask-image:var(--hit-mask);mask-size:contain;mask-position:center bottom;mask-repeat:no-repeat}
.finisher-art{z-index:10}
.finisher-art>img,.finisher-art>.target-flash{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.combat-spark{width:.18rem;height:.18rem;background:#f5bb75}
.screen-effects-control{display:flex;align-items:center;gap:.6rem;margin:1rem 0;font: .875rem/1.5 Arial,sans-serif}
html[data-screen-effects=off] .target-flash,html[data-screen-effects=off] .finisher-art,html[data-screen-effects=off] .combat-spark{display:none}
@media(prefers-reduced-motion:reduce){.target-flash,.finisher-art,.combat-spark{display:none}}

.finisher-art>img{image-rendering:pixelated}