/* A single preloaded atlas; every pose occupies the same square. */
.home-art {
  background:#111519;
  pointer-events:none;
  overflow:hidden;
  isolation:isolate;
}
.home-art:after { content:''; position:absolute; inset:0; z-index:4; background:linear-gradient(0deg,#14181b 0%,#14181bf5 20%,#14181b99 37%,#14181b10 62%,#11151a4d 100%); }
.home-art-scene { position:absolute; inset:0; background-size:cover; background-position:50% 0; background-repeat:no-repeat; opacity:0; transform:translateX(0) scaleX(var(--scene-facing,1)); will-change:opacity,transform; }
.home-art-scene[data-hero='leon'] { --scene-facing:-1; }
.home-art-scene.is-current { opacity:1; z-index:1; }
.home-art-scene.is-exiting { z-index:1; opacity:1; }
.scene-shutter { position:absolute; z-index:5; inset:-5% -20%; pointer-events:none; background:linear-gradient(90deg,transparent 0%,#0b1116 10%,#0b1116 90%,transparent); opacity:0; transform:translateX(-130%) skewX(-12deg); }
.home-art.is-transitioning .is-current { z-index:2; animation:scene-enter .72s cubic-bezier(.25,.75,.25,1) both; }
.home-art.is-transitioning .is-exiting { animation:scene-exit .72s cubic-bezier(.25,.75,.25,1) both; }
.home-art.instant .home-art-scene { animation:none; }
@keyframes scene-enter {
  from { opacity:1; transform:translateX(calc(100%*var(--scene-direction,1))) scaleX(var(--scene-facing,1)); }
  to { opacity:1; transform:translateX(0) scaleX(var(--scene-facing,1)); }
}
@keyframes scene-exit {
  from { opacity:1; transform:translateX(0) scaleX(var(--scene-facing,1)); }
  to { opacity:1; transform:translateX(calc(-100%*var(--scene-direction,1))) scaleX(var(--scene-facing,1)); }
}
.home-screen { --scene-accent:#cad3a2; }
.home-screen[data-selected-hero='jill'] { --scene-accent:#91ccd8; }
.home-screen[data-selected-hero='claire'] { --scene-accent:#e3aaa2; }
.home-screen[data-selected-hero='leon'] .home-title { text-align:right; }
.choose-caption .scene-tag { color:var(--scene-accent); font-size:12px; letter-spacing:.5px; }
.hero-choice { height:126px; }
.hero-choice .sprite { width:calc(78px*var(--art-ratio)); height:78px; flex:none; margin:0 auto; }
.hero-choice .sprite.actor-sprite { width:78px; }
.hero-choice strong { font-size:14px; line-height:18px; }
.hero-choice small { font-size:11px; line-height:14px; margin-top:3px; }
.home-title h1 { font-size:clamp(43px,11vw,55px); letter-spacing:3px; }
.home-title h1 span { font-size:clamp(37px,10vw,48px); letter-spacing:2px; }
.sprite.actor-sprite {
  background-image:url('./assets/character-actions.webp');
  background-size:600% 300%;
  background-position:calc(var(--actor-column)*20%) calc(var(--actor-row)*50%);
  width:var(--art-height);
  height:var(--art-height);
  transform-origin:50% 88%;
}
.survivor { left:4px; }
.survivor .sprite.actor-sprite { width:112px; height:112px; }
.survivor .actor-sprite[data-pose='aim'],
.survivor .actor-sprite[data-pose='fire'],
.survivor .actor-sprite[data-pose='hurt'],
.survivor .actor-sprite[data-pose='reload'] { animation:none; }
.survivor .sprite.actor-sprite.fx-recoil { animation:actor-recoil .24s ease-out; }
.survivor .sprite.actor-sprite.fx-hurt { animation:actor-hurt .34s ease-out; }
.survivor .sprite.actor-sprite.fx-melee { animation:actor-melee .25s ease-out; }
.survivor .actor-sprite[data-pose='reload'] { animation:actor-reload .38s ease-in-out; }
.enemy .sprite.fx-lunge { animation:enemy-charge .34s ease-in-out; }
.survivor.fx-muzzle:after { left:80%; right:auto; top:34%; width:22px; height:16px; }
.survivor-shield { left:6px; bottom:-1px; }
.survivor .focus-badge, .survivor .retain-badge { left:7px; top:-10px; font-size:11px; }
.survivor .retain-badge { top:11px; }
@keyframes actor-recoil {
  0% { transform:translateX(-5px) rotate(-3deg); }
  40% { transform:translateX(-2px) rotate(-1deg); }
  100% { transform:translateX(0) rotate(0); }
}
@keyframes actor-hurt {
  0% { filter:brightness(1.9) drop-shadow(0 0 4px #f08883); transform:translateX(-7px) rotate(-3deg); }
  40% { filter:brightness(1.2); transform:translateX(-3px); }
  100% { filter:brightness(1) drop-shadow(0 4px 2px #0007); transform:translateX(0); }
}
@keyframes actor-melee {
  35% { transform:translate(11px,-2px) rotate(5deg); }
  100% { transform:translate(0,0); }
}
@keyframes actor-reload {
  35% { transform:translateY(2px) rotate(-2deg); }
  65% { transform:translateY(-1px); }
  100% { transform:translateY(0); }
}
@keyframes enemy-charge {
  0% { transform:translate(0,0); }
  16% { transform:translate(calc(var(--strike-x,-28px)*-.12),calc(var(--strike-y,8px)*-.12)) rotate(2deg); }
  52% { transform:translate(var(--strike-x,-28px),var(--strike-y,8px)) rotate(-5deg) scale(1.04); }
  100% { transform:translate(0,0) rotate(0); }
}

/* Quick supplies stay usable when a small phone holds all four items. */
.hand-title { flex:none; }
.quick-items { min-width:0; overflow-x:auto; scrollbar-width:none; }
.quick-item, .quick-item-cost { flex:none; }
.quick-item { min-width:44px; }
.quick-items::-webkit-scrollbar { display:none; }
.game-card:disabled { opacity:.65; cursor:wait; }
@media (max-width:374px) {
  .quick-item-cost { display:none; }
}
@media (max-height:750px) {
  .hero-choice { height:111px; }
  .hero-choice .sprite { width:calc(64px*var(--art-ratio)); height:64px; }
  .hero-choice .sprite.actor-sprite { width:64px; }
  .survivor .sprite.actor-sprite { width:96px; height:96px; }
}
@media (prefers-reduced-motion:reduce) {
  .home-art-scene { animation:none!important; transform:scaleX(var(--scene-facing,1))!important; }
  .scene-shutter { display:none!important; }
  .survivor .sprite.actor-sprite { animation:none!important; }
}