:root{--red:#c8141c;--deep:#7d0a0e;--yel:#ffd21a;--ink:#1b1210;--paper:#f3e3c2}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:#2a0d08}
body{font-family:Oswald,system-ui,sans-serif;color:var(--paper);position:relative}
img{-webkit-user-drag:none;user-select:none}
.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}

/* ---- stage fade-in (no flash of unpositioned layers) ---- */
#bleed,#hdr{opacity:0;transition:opacity .3s ease}
html.ready #bleed,html.ready #hdr{opacity:1}

/* ---- bleed + safe ---- */
#bleed{position:absolute;left:0;top:0;width:2944px;height:1232px;transform-origin:0 0;will-change:transform}
#bleed>.plate{position:absolute;inset:0;background:url(assets/L0_bleed_plate.jpg) 0 0/100% 100% no-repeat}
#tint{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,rgba(255,40,0,0),rgba(120,0,0,.45));opacity:0;will-change:opacity}
.embers{position:absolute;left:0;top:0;pointer-events:none}

.flames{position:absolute;left:0;width:2944px;bottom:0;transform-origin:50% 100%;
  background:url(assets/FX_flames.webp) bottom/100% 100% no-repeat;will-change:transform}
#flBack{height:470px;filter:brightness(.7) saturate(1.1);transform:translateY(100%) scaleX(-1)}
#flFront{height:320px;transform:translateY(100%)}

#safe{position:absolute;left:512px;top:144px;width:1920px;height:1088px}
#shadow{position:absolute;left:760px;top:822px;width:400px;height:56px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(10px)}
#logo{position:absolute;inset:0;transform-origin:960px 850px;filter:drop-shadow(0 8px 6px rgba(60,0,0,.45));will-change:transform}
.lyr{position:absolute;display:block}
#shaft{position:absolute;left:898.5px;top:-476px;width:123.5px;height:930px;
  background:url(assets/L2_shaft_tile.webp) 0 100%/100% auto repeat-y;will-change:clip-path}
#body{left:736.5px;top:434px;width:446.5px;height:416px}
#finger{left:901px;top:235px;width:118.5px;height:209px;will-change:transform}

#safeui{position:absolute;left:512px;top:144px;width:1920px;height:1088px}
#ui{position:absolute;inset:0}

/* ---- pump panel ---- */
.panel{position:absolute;left:230px;top:500px;width:430px;padding:18px 22px 16px;background:var(--ink);
  border:6px solid var(--red);border-radius:18px;box-shadow:0 10px 0 rgba(0,0,0,.35)}
.panel .lbl{color:var(--paper);font:700 18px Oswald,sans-serif;letter-spacing:.14em;opacity:.8;display:flex;justify-content:space-between;gap:10px}
.panel .price{font:700 84px/1 Oswald,sans-serif;color:var(--yel);font-variant-numeric:tabular-nums;letter-spacing:.01em;margin:8px 0 2px;
  text-shadow:0 0 18px rgba(255,170,0,.45);display:flex;align-items:baseline;will-change:opacity}
.panel .price small{font-size:30px;color:var(--paper);margin-left:8px;text-shadow:none}
.panel.payoff .price{color:#ff3b1f;text-shadow:0 0 20px rgba(255,50,20,.55)}
.panel .gal{color:var(--paper);font:500 20px Oswald,sans-serif;letter-spacing:.08em;opacity:.75}

/* ---- CTA ---- */
#cta{position:absolute;left:230px;top:770px;width:430px;height:118px;border:0;border-radius:22px;background:var(--red);
  color:var(--yel);font:400 54px/1 Anton,Impact,sans-serif;letter-spacing:.04em;cursor:pointer;
  box-shadow:0 10px 0 var(--deep),0 18px 30px rgba(0,0,0,.4);overflow:hidden;user-select:none;
  -webkit-user-select:none;transition:transform .06s ease,box-shadow .06s ease}
#cta.pressed{transform:translateY(6px);box-shadow:0 4px 0 var(--deep),0 8px 16px rgba(0,0,0,.35)}
#cta:focus{outline:none}
#cta:focus-visible{outline:4px solid var(--yel);outline-offset:4px}
#bar{position:absolute;left:0;bottom:0;height:10px;width:0;background:var(--yel)}

#stat{position:absolute;left:230px;top:910px;width:430px;text-align:center;color:var(--paper);
  font:700 20px Oswald,sans-serif;letter-spacing:.16em;text-shadow:0 2px 0 #000}

/* ---- stamp ---- */
#stamp{position:absolute;left:1250px;top:300px;white-space:nowrap;padding:10px 26px 14px;border:9px solid var(--red);
  border-radius:14px;color:var(--red);font:400 104px/1 Anton,Impact,sans-serif;letter-spacing:.02em;
  background:rgba(255,226,140,.92);box-shadow:0 8px 0 rgba(0,0,0,.3);opacity:0;transform-origin:50% 50%;
  will-change:transform,opacity;filter:url(#roughstamp);pointer-events:none}

/* ---- directions ---- */
#dirs{position:absolute;left:1300px;top:500px;display:flex;gap:14px;opacity:0;will-change:transform,opacity}
.pill{display:inline-flex;align-items:center;gap:6px;font:700 26px Oswald,sans-serif;letter-spacing:.08em;color:var(--red);
  background:var(--yel);border:4px solid var(--red);border-radius:999px;padding:8px 22px;text-decoration:none;cursor:pointer;
  -webkit-user-select:none;user-select:none}
.pill:focus-visible{outline:4px solid #fff;outline-offset:3px}
.cfg-off{opacity:.6;filter:saturate(.7);border-style:dashed;cursor:not-allowed;pointer-events:auto}

/* ---- header ---- */
#hdr{position:fixed;left:0;right:0;top:0;height:72px;display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;z-index:5;background:linear-gradient(rgba(40,5,0,.55),rgba(40,5,0,0))}
#hdr .brand{font:400 34px Anton,Impact,sans-serif;color:var(--yel);letter-spacing:.04em;text-shadow:0 3px 0 var(--deep)}
#hdr .brand span{font:700 18px Oswald,sans-serif;color:var(--ink);background:var(--yel);border-radius:6px;padding:3px 8px;
  margin-left:10px;vertical-align:6px;text-shadow:none}
#hdr nav{display:flex;gap:12px;align-items:center}
.hpill{font:700 17px Oswald,sans-serif;letter-spacing:.1em;color:var(--yel);border:3px solid var(--yel);border-radius:999px;
  padding:5px 16px;text-decoration:none;background:transparent;cursor:pointer}
.hpill:focus-visible{outline:4px solid var(--yel);outline-offset:3px}
#sound{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:3px solid var(--yel);
  border-radius:999px;background:transparent;color:var(--yel);cursor:pointer;padding:0}
#sound svg{width:20px;height:20px;fill:currentColor;display:block}
#sound.muted{opacity:.55}