/* ============================================================
   $COAL — THE DIG styles v3 (populated iso chamber)
   ============================================================ */
.mine{ display:flex; height:100%; width:100%; overflow:hidden; }

/* ---------------- depth gauge ---------------- */
.gauge{ width:60px; flex:none; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#2a241b,#1a160f); border-right:3px solid var(--frame-edge);
  box-shadow:inset -4px 0 10px rgba(0,0,0,.5); z-index:5; }
.gauge-cap{ text-align:center; padding:8px 0 7px; border-bottom:2px solid var(--frame-edge); background:linear-gradient(180deg,#3a3122,#241d14); }
.gauge-cap .pixel{ font-size:9px; color:var(--gold-bright); text-shadow:0 1px 0 #000; }
.gauge-track{ position:relative; flex:1; margin:8px 0; }
.gtick{ position:absolute; right:6px; display:flex; align-items:center; gap:4px; transform:translateY(-50%); }
.gtick-line{ width:7px; height:2px; background:rgba(245,166,35,.4); }
.gtick-lbl{ font-size:9px; color:var(--muted); width:24px; text-align:right; }
.gauge-marker{ position:absolute; left:0; right:0; height:0; transform:translateY(-50%); z-index:3; }
.gauge-marker::before{ content:""; position:absolute; left:0; right:4px; top:0; height:3px; transform:translateY(-50%); background:linear-gradient(90deg, transparent, var(--gold)); box-shadow:0 0 8px var(--gold); }
.gauge-knob{ position:absolute; right:1px; top:0; transform:translateY(-50%) rotate(45deg); width:11px; height:11px; background:linear-gradient(180deg,var(--gold-pale),var(--ochre)); border:2px solid #5e3a12; border-radius:2px; box-shadow:0 0 8px var(--gold); }

/* ---------------- the room ---------------- */
.scene{ position:relative; flex:1; overflow:hidden; background:#0a0705; }
.room{ position:absolute; inset:0; background-size:cover; background-position:center 60%; transition:background-image .4s; }
.room-vig{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 120px 24px rgba(0,0,0,.55);
  background:linear-gradient(180deg, rgba(10,7,4,.28), transparent 20%, transparent 72%, rgba(10,7,4,.5)); }
.seam-shine{ position:absolute; left:50%; top:16%; transform:translateX(-50%); width:40%; height:38%; z-index:2; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 40%, rgba(143,247,247,.55), rgba(43,214,214,.18) 45%, transparent 72%); animation:flicker 2.6s ease-in-out infinite; }
.seam-shine.reach{ animation:flicker 1.1s ease-in-out infinite; }
/* glow at the top-middle door where haulers vanish */
.door-glow{ position:absolute; left:50%; top:13%; transform:translate(-50%,-50%); width:130px; height:90px; z-index:2; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(245,166,35,.32), transparent 70%); animation:flicker 3s ease-in-out infinite; }

/* ---------------- floor + deposits ---------------- */
.floor{ position:absolute; inset:0; z-index:4; }

/* === real sprite-strip miners (percentage technique, foot-anchored) === */
.miner{ background-repeat:no-repeat; image-rendering:auto; transform-origin:bottom center; }
.miner--swing{ aspect-ratio:835/948; background-image:url('assets/strips/swing_empty.webp');
  background-size:400% 100%; animation:coalSwing var(--dur,.95s) steps(4,jump-none) infinite; animation-delay:var(--delay,0s); }
@keyframes coalSwing{ from{background-position:0% 0} to{background-position:100% 0} }

/* deposit = ore on the floor + a miner swinging into it */
.dep{ position:absolute; transform:translate(-50%,-100%); }
.dep-ore{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:calc(60px * var(--sc));
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.6)); z-index:1; }
.dep-miner{ position:absolute; bottom:0; left:50%; height:calc(98px * var(--sc));
  transform:translateX(-50%) scaleX(var(--flip)); filter:drop-shadow(0 5px 5px rgba(0,0,0,.55)); z-index:2; }
.ground-glow{ position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); width:calc(72px * var(--sc)); height:16px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(245,166,35,.32), transparent 70%); z-index:0; }

/* ---------------- haulers: 2-frame cart push, walking to the door ---------------- */
.hauler{ position:absolute; z-index:6; width:86px; aspect-ratio:954/935; pointer-events:none;
  background:url('assets/strips/cart_strip.webp') no-repeat; background-size:200% 100%;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.55));
  animation:haulWalk .52s steps(2,jump-none) infinite, haulPath 16s linear infinite; }
.hauler.h2{ animation-delay:.26s, 8s; }
@keyframes haulWalk{ from{background-position:0% 0} to{background-position:100% 0} }
@keyframes haulPath{
  0%{ left:6%; top:90%; transform:translate(-50%,-100%) scale(1); opacity:0; }
  4%{ opacity:1; }
  42%{ left:34%; top:62%; transform:translate(-50%,-100%) scale(.78); }
  72%{ left:49%; top:28%; transform:translate(-50%,-100%) scale(.48); opacity:1; }
  78%{ left:50%; top:24%; transform:translate(-50%,-100%) scale(.44); opacity:0; }
  100%{ left:50%; top:24%; transform:translate(-50%,-100%) scale(.44); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .hauler{ display:none; } }

/* ---------------- impact flash at the dig face ---------------- */
.impact{ position:absolute; z-index:7; width:calc(56px * var(--sc,1)); aspect-ratio:1; pointer-events:none;
  transform:translate(-50%,-100%);
  background:url('assets/strips/fx_impact_strip.webp') no-repeat; background-size:300% 100%;
  mix-blend-mode:screen;
  animation:impactAnim .45s steps(3,jump-none) forwards, impactFade .9s linear forwards; }
@keyframes impactAnim{ from{background-position:0% 0} to{background-position:100% 0} }
@keyframes impactFade{ 0%{opacity:.95} 55%{opacity:.85} 100%{opacity:0} }

/* ---------------- HUD overlays ---------------- */
.lvl-tag{ position:absolute; top:12px; left:14px; z-index:20; max-width:200px; background:rgba(8,6,4,.55); backdrop-filter:blur(3px);
  padding:8px 13px; border-radius:6px; border:2px solid var(--frame-edge); box-shadow:0 4px 0 rgba(0,0,0,.3); }
.lvl-name{ display:block; font-size:22px; color:var(--gold-bright); text-shadow:0 2px 0 #6b3f1a; line-height:1; white-space:nowrap; }
.lvl-sub{ display:block; font-size:8px; color:var(--bone-dim); margin-top:6px; white-space:nowrap; }
.depth-read{ position:absolute; top:12px; right:14px; z-index:20; text-align:right; pointer-events:none; white-space:nowrap; }
.depth-big{ font-size:38px; line-height:.85; }
.depth-ft{ font-size:16px; }
.depth-rate{ font-size:8.5px; color:var(--gold); margin-top:5px; white-space:nowrap; }
.tension{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:20; text-align:center;
  background:rgba(8,6,4,.6); backdrop-filter:blur(4px); padding:8px 18px; border-radius:8px; border:2px solid var(--frame-edge);
  box-shadow:0 4px 0 rgba(0,0,0,.3); white-space:nowrap; }
.tension .pixel{ display:block; font-size:8px; color:var(--muted); margin-bottom:4px; }
.tension-num{ font-size:18px; color:var(--diamond-glow); font-weight:700; text-shadow:0 2px 0 #1c6b6b; }
.tension.reach{ border-color:rgba(143,247,247,.5); box-shadow:0 0 22px rgba(143,247,247,.35); }
.tension.reach .pixel{ color:var(--diamond); } .tension.reach .tension-num{ color:#fff; }