/* Android Chrome stability fallbacks: older WebViews can ignore svh/env units. */
@supports not (height: 100svh) {
  html, body { min-height:100vh; }
  .splash-screen { min-height:100vh; }
  .game { min-height:calc(100vh - 20px); }
  .cinematic-room, .reward-screen { min-height:100vh; }
}
@supports not (padding: env(safe-area-inset-top)) {
  .app-shell { padding-top:10px; padding-bottom:10px; }
  .bottom-hud { padding-bottom:10px; }
}

:root {
  --bg:#050607; --panel:#101018; --text:#f8f3d5; --muted:#a9a27a; --accent:#ffd33d; --cyan:#45f3ff; --pink:#ff4fd8; --danger:#ff4747; --good:#55ff7a;
  --tile:min(7.55vw,56px); color-scheme:dark;
}
*{box-sizing:border-box} html,body{min-height:100%} body{margin:0;background:linear-gradient(rgba(255,255,255,.025) 50%,rgba(0,0,0,.07) 50%) 0 0/100% 4px,radial-gradient(circle at 50% 0%,#1f1647 0%,#090912 48%,#020203 100%);color:var(--text);font-family:"Courier New",monospace;min-height:100svh;touch-action:manipulation;text-shadow:0 0 6px rgba(255,211,61,.22);overflow-x:hidden}button{font:inherit;color:inherit}.app-shell{width:min(1180px,100%);margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}.hidden{display:none!important}
.splash-screen{min-height:100svh;display:grid;place-items:center;padding:clamp(12px,3vw,28px);background:radial-gradient(circle at 50% 20%,#22144c 0%,#080812 52%,#010102 100%)}
.arcade-cabinet{width:min(820px,96vw);min-height:min(94svh,920px);display:grid;grid-template-rows:auto 1fr auto;gap:clamp(10px,2vw,18px);padding:clamp(16px,3vw,34px);border-radius:28px 28px 18px 18px;background:linear-gradient(135deg,#20202a,#060609 42%,#1b1b24);border:6px solid #050507;box-shadow:inset 0 0 0 4px #343444,inset 0 0 45px rgba(255,255,255,.05),0 28px 90px rgba(0,0,0,.85),0 0 40px rgba(69,243,255,.18);cursor:pointer;position:relative;overflow:hidden}.arcade-cabinet:before{content:'';position:absolute;inset:10px;border:2px solid rgba(255,255,255,.06);border-radius:22px;pointer-events:none}.arcade-marquee{height:clamp(28px,5vw,54px);border:3px solid #050507;border-radius:10px;background:linear-gradient(90deg,#ff4fd8,#ffd33d,#45f3ff,#ff4fd8);box-shadow:0 0 18px rgba(255,211,61,.24);opacity:.82}.arcade-monitor{display:grid;place-items:center;align-self:center;justify-self:center;width:min(660px,86vw);aspect-ratio:1/1;padding:clamp(12px,2.2vw,24px);border-radius:24px;background:radial-gradient(circle at 50% 50%,#111827 0%,#05060a 70%);border:10px solid #050507;box-shadow:inset 0 0 0 3px #1c1c27,inset 0 0 38px rgba(69,243,255,.1),0 0 0 6px #2a2a35,0 16px 36px rgba(0,0,0,.85)}.splash-image{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px;background:#11141b;box-shadow:inset 0 0 30px rgba(0,0,0,.8);filter:saturate(1.06) contrast(1.05)}.splash-start{justify-self:center;align-self:end;border:0;background:transparent;color:#fff;font-weight:900;font-size:clamp(1.4rem,6vw,3rem);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:.35em .7em;text-shadow:0 0 3px #fff,0 0 10px rgba(69,243,255,.9),0 .16em 0 rgba(255,79,216,.65),0 .3em 18px rgba(0,0,0,.95);animation:tapStartPulse 1.15s ease-in-out infinite}.splash-start:focus-visible{outline:3px solid #fff;outline-offset:6px;border-radius:8px}@keyframes tapStartPulse{0%,100%{transform:translateY(0) scale(1);text-shadow:0 0 3px #fff,0 0 10px rgba(69,243,255,.85),0 .16em 0 rgba(255,79,216,.6),0 .3em 18px rgba(0,0,0,.95)}50%{transform:translateY(-7px) scale(1.08);text-shadow:0 0 5px #fff,0 0 18px rgba(69,243,255,1),0 .28em 0 rgba(255,79,216,.82),0 .55em 28px rgba(0,0,0,1)}}.splash-copyright{justify-self:center;color:rgba(255,255,255,.86);font-size:clamp(.65rem,2vw,.95rem);font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 0 #000,0 0 8px rgba(255,255,255,.25);margin-top:-6px;z-index:2}
.splash-copy,.eyebrow,.button,.splash-button{display:none}.topbar{display:none}.panel{background:linear-gradient(180deg,rgba(20,20,35,.98),rgba(8,8,14,.98));border:2px solid rgba(69,243,255,.65);border-radius:6px;padding:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 20px rgba(69,243,255,.12)}h2{margin:0 0 .5rem;font-size:1rem;color:var(--cyan);text-transform:uppercase}p{margin:.25rem 0;color:var(--muted)}
.hero-select{margin-top:12px}.hero-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}.hero-card{border:2px solid transparent;background:#111123;border-radius:6px;padding:12px;text-align:left;cursor:pointer;min-height:160px}.hero-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid rgba(255,255,255,.18);margin-bottom:8px}.hero-card.selected{border-color:var(--accent);box-shadow:0 0 18px rgba(255,211,61,.33)}.hero-card strong{color:var(--accent);display:block}
.game{position:relative;min-height:calc(100svh - 20px);display:grid;place-items:center;padding-bottom:130px}.board-wrap{overflow:auto;display:grid;place-items:center;touch-action:none;max-width:100%}.board{display:grid;grid-template-columns:repeat(12,var(--tile));grid-template-rows:repeat(12,var(--tile));gap:2px;user-select:none}.tile{width:var(--tile);height:var(--tile);border-radius:2px;background:#0d1220;border:1px solid rgba(69,243,255,.16);display:grid;place-items:center;font-weight:900;font-size:calc(var(--tile)*.34);overflow:hidden;position:relative;padding:0;cursor:pointer;color:var(--cyan)}.tile img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.tile.border{background:#020203;color:#24242e;border-color:#171723}.tile.hidden-tile{background:#111526}.tile.hidden-tile:after{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(69,243,255,.16),transparent 55%);pointer-events:none}.tile.hero{outline:3px solid var(--accent);outline-offset:-3px;box-shadow:0 0 16px rgba(255,211,61,.44);z-index:3}.tile.removed{background:#06070d;color:#555b76}.tile.targeting{cursor:crosshair}.enemy-alert{z-index:2;animation:enemyPulse .8s infinite alternate;box-shadow:0 0 18px rgba(255,71,71,.6)}@keyframes enemyPulse{from{transform:scale(1)}to{transform:scale(1.13)}}
.effect-panel{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:20}.effect-icon{width:52px;height:52px;border:2px solid var(--pink);display:grid;place-items:center;background:#070710;box-shadow:0 0 16px rgba(255,79,216,.35)}.effect-icon img{width:100%;height:100%;object-fit:cover}.die-display{position:fixed;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);min-width:96px;height:60px;border:3px solid var(--accent);background:#070710;color:var(--accent);display:grid;place-items:center;font-size:1.4rem;font-weight:900;z-index:21;box-shadow:0 0 18px rgba(255,211,61,.35)}.die-pop{animation:diePop .45s ease}@keyframes diePop{0%{transform:translateX(-50%) scale(.75)}70%{transform:translateX(-50%) scale(1.22)}100%{transform:translateX(-50%) scale(1)}}
.toast{position:fixed;left:50%;top:86px;transform:translateX(-50%);z-index:22;background:rgba(5,5,9,.92);border:2px solid var(--cyan);padding:10px 14px;border-radius:4px;color:var(--text);max-width:min(560px,92vw);text-align:center;opacity:0;pointer-events:none}.toast.show{animation:toast 1.8s ease forwards}@keyframes toast{0%{opacity:0;transform:translate(-50%,-8px)}15%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}
.bottom-hud{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1.3fr 1fr 1.4fr;gap:10px;padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:linear-gradient(180deg,transparent,rgba(0,0,0,.76) 16%,rgba(0,0,0,.94))}.bottom-hud strong{display:block;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}.inventory-dock{display:flex;gap:8px;align-items:center;min-height:56px;flex-wrap:wrap}.inventory-item{width:52px;height:52px;border:2px solid var(--accent);background:#06070d;padding:0;position:relative;cursor:pointer;box-shadow:0 0 12px rgba(255,211,61,.18)}.inventory-item img{width:100%;height:100%;object-fit:cover}.inventory-item span{position:absolute;left:-9999px}.empty-inventory{color:var(--muted);font-size:.8rem}.health-zone{text-align:center}.heart-track{display:flex;justify-content:center;gap:8px;align-items:center;min-height:56px}.heart{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(255,71,71,.4))}.stats-zone{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.stats-zone span{display:block;color:var(--cyan);font-size:.95rem;font-weight:900}.merchant-button{grid-column:auto;border:2px solid var(--accent);background:#06070d;padding:0;width:52px;height:52px;justify-self:end;align-self:center;cursor:pointer;box-shadow:0 0 12px rgba(255,211,61,.24)}.merchant-button:disabled{opacity:.42;filter:grayscale(1);cursor:not-allowed}.merchant-button img{width:100%;height:100%;object-fit:cover}.merchant-choice{display:flex!important;align-items:center;gap:10px;text-align:left}.merchant-choice img{width:44px;height:44px;object-fit:cover;border:1px solid rgba(255,255,255,.22)}.merchant-choice span{font-weight:900}.pulse-once{animation:pulseOnce .5s ease}.flash-once{animation:flashOnce .45s ease}@keyframes pulseOnce{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}@keyframes flashOnce{0%,100%{filter:none}50%{filter:brightness(1.6)}}
.dialog{border:2px solid var(--accent);border-radius:6px;padding:0;color:var(--text);background:#090912;width:min(92vw,480px);box-shadow:0 0 40px rgba(255,211,61,.22)}.dialog::backdrop{background:rgba(0,0,0,.75)}.dialog form{padding:18px}.choice-buttons{display:grid;gap:8px;margin-top:12px}.choice-buttons button{border:2px solid var(--cyan);border-radius:4px;padding:.8rem;background:#18182a;cursor:pointer}.choice-buttons button.primary{background:var(--accent);color:#211706;font-weight:900;border-color:#000}
@media(max-width:900px){:root{--tile:min(7.8vw,42px)}.game{padding-bottom:190px}.bottom-hud{grid-template-columns:1fr;gap:6px}.stats-zone{grid-template-columns:repeat(6,1fr)}.heart{width:34px;height:34px}.inventory-item{width:46px;height:46px}.die-display{height:48px;min-width:80px}.toast{top:70px}}

/* Patch: always show a dungeon floor layer under playable cells. */
.tile:not(.border){
  background-image:url('../assets/tiles/floor.jpg');
  background-size:cover;
  background-position:center;
}
.tile.hidden-tile img,
.tile img{position:relative;z-index:1;}
.tile.removed{background-color:#0b0a08;color:transparent;}

/* Patch: merchant pile lives top-left and behaves like a face-down deck. */
.merchant-button{
  position:fixed;
  top:max(10px,env(safe-area-inset-top));
  left:max(10px,env(safe-area-inset-left));
  z-index:24;
  width:58px;
  height:58px;
  border:3px solid var(--accent);
  border-radius:6px;
  background:#050507;
  box-shadow:0 0 16px rgba(255,211,61,.35), inset 0 0 0 2px rgba(0,0,0,.55);
}
.merchant-button.merchant-locked{filter:grayscale(.65) brightness(.8);border-color:#59606f;box-shadow:0 0 8px rgba(255,255,255,.12)}
.merchant-button img{width:100%;height:100%;object-fit:cover;display:block;}
.choice-buttons{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));}
.merchant-choice{display:grid!important;justify-items:center;text-align:center;gap:6px;min-height:112px;}
.merchant-choice img{width:64px;height:64px;object-fit:cover;border:2px solid rgba(255,255,255,.25)}
.merchant-choice em{font-style:normal;color:var(--accent);font-size:.74rem;}

/* Patch: dangerous trap reveal and monster ambush feedback. */
body.trap-screen-flash::after,
body.monster-screen-flash::after{
  content:'';position:fixed;inset:0;z-index:80;pointer-events:none;
  animation:dangerFade .82s ease-out forwards;
}
body.trap-screen-flash::after{background:rgba(255,0,0,.55);box-shadow:inset 0 0 80px rgba(255,0,0,.9)}
body.monster-screen-flash::after{background:rgba(0,255,80,.42);box-shadow:inset 0 0 95px rgba(0,255,80,.75)}
@keyframes dangerFade{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.trap-danger{z-index:5;animation:trapDanger .85s ease-out both!important;}
@keyframes trapDanger{0%{transform:scale(.95) rotate(0);filter:brightness(1)}20%{transform:scale(1.18) rotate(-3deg);filter:brightness(2) saturate(2)}45%{transform:scale(1.08) rotate(3deg)}100%{transform:scale(1);filter:none}}
.monster-strike{z-index:6;animation:monsterStrike .62s ease-out both!important;}
@keyframes monsterStrike{0%{transform:scale(1)}35%{transform:scale(1.28) translateY(-6px);filter:brightness(1.8)}100%{transform:scale(1);filter:none}}

/* Game over overlay */
.game-over-overlay{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  align-content:center;
  gap:clamp(18px,4vw,34px);
  background:radial-gradient(circle at 50% 45%,rgba(120,0,0,.25),rgba(0,0,0,.92) 62%,#000 100%);
  opacity:0;
  pointer-events:none;
  animation:gameOverFadeIn 2.4s ease forwards;
}
.game-over-overlay:not(.hidden){pointer-events:auto;}
.game-over-title{
  color:#ff1515;
  font-weight:900;
  font-size:clamp(3rem,14vw,10rem);
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
  line-height:.9;
  text-shadow:
    0 0 5px #ff0000,
    0 0 16px rgba(255,0,0,.9),
    0 0 42px rgba(255,0,0,.7),
    0 .08em 0 #3a0000,
    0 .18em 30px rgba(0,0,0,.95);
  animation:gameOverPulse 1.55s ease-in-out infinite;
}
.play-again{
  border:0;
  background:transparent;
  color:#ffd33d;
  cursor:pointer;
  font-weight:900;
  font-size:clamp(1.15rem,5vw,2.6rem);
  letter-spacing:.06em;
  text-transform:none;
  padding:.4em .75em;
  text-shadow:0 0 5px #ffd33d,0 0 18px rgba(255,211,61,.8),0 .16em 0 rgba(80,42,0,.9);
  animation:playAgainPulse 1.1s ease-in-out infinite;
}
.play-again:focus-visible{outline:3px solid #ffd33d;outline-offset:8px;border-radius:8px;}
@keyframes gameOverFadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes gameOverPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.32)}}
@keyframes playAgainPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.06)}}


/* Patch: visual collection trail and boss/trap polish. */
.tile-flyer{
  position:fixed;
  z-index:140;
  width:var(--tile);
  height:var(--tile);
  object-fit:cover;
  transform:translate(-50%,-50%);
  pointer-events:none;
  filter:drop-shadow(0 0 12px rgba(255,211,61,.9));
  animation:itemFly 1.02s cubic-bezier(.2,.8,.25,1) forwards;
}
@keyframes itemFly{
  0%{transform:translate(-50%,-50%) scale(1.2) rotate(0);opacity:1}
  70%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.42) rotate(380deg);opacity:0}
}
.pickup-spark{
  position:fixed;
  z-index:139;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ffe96a;
  box-shadow:0 0 9px #ffd33d,0 0 18px rgba(255,211,61,.6);
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:sparkTrail .88s ease-out forwards;
}
@keyframes sparkTrail{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0)}
}
body.trap-screen-flash::after{animation:dangerFade 2s ease-out forwards;}
.trap-danger{animation:trapDanger 2s ease-out both!important;}
.trap-burst{
  position:fixed;
  z-index:145;
  width:min(46vw,260px);
  height:min(46vw,260px);
  object-fit:cover;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(1.45);
  filter:drop-shadow(0 0 22px rgba(255,0,0,.95)) saturate(1.8);
  animation:trapBurst 2s cubic-bezier(.22,.72,.35,1) forwards;
}
@keyframes trapBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(2.45) rotate(-10deg)}
  16%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(5deg)}
  45%{opacity:1;transform:translate(-50%,-50%) scale(.72) rotate(-8deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.25) rotate(540deg)}
}
.boss-stack{box-shadow:0 0 0 3px #ff1515,0 0 24px rgba(255,0,0,.65)!important;}
.boss-stack .boss-stack-count{
  position:absolute;
  z-index:3;
  right:2px;
  bottom:2px;
  min-width:1.45em;
  height:1.45em;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#ff1515;
  color:white;
  font-weight:900;
  font-size:.8rem;
  text-shadow:0 0 4px #000;
  border:2px solid #fff;
}
.boss-pile-pulse{animation:bossPilePulse .8s ease-in-out both!important;}
@keyframes bossPilePulse{0%,100%{transform:scale(1)}35%{transform:scale(1.28);filter:brightness(1.7) saturate(1.4)}}
/* Keep the game-over prompt readable but static per UX request. */
.play-again{animation:none!important;}


/* Patch: combat feedback, dice images, and Pegasus companion. */
.die-display img{
  width:54px;
  height:54px;
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 0 8px rgba(255,211,61,.55));
}
body.combat-hurt-flash::after,
body.combat-hit-flash::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:82;
  pointer-events:none;
  animation:combatFlash .82s ease-out forwards;
}
body.combat-hurt-flash::after{background:rgba(0,255,80,.42);box-shadow:inset 0 0 95px rgba(0,255,80,.75)}
body.combat-hit-flash::after{background:rgba(0,100,255,.45);box-shadow:inset 0 0 95px rgba(0,150,255,.85)}
@keyframes combatFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.monster-defeat-flyer{
  position:fixed;
  z-index:146;
  width:var(--tile);
  height:var(--tile);
  object-fit:cover;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(1.05) rotate(0);
  filter:drop-shadow(0 0 22px rgba(0,160,255,.95)) saturate(1.4) brightness(1.15);
  animation:monsterDefeatFly .86s cubic-bezier(.18,.78,.28,1) forwards;
}
@keyframes monsterDefeatFly{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(0)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.72) rotate(220deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.25) rotate(980deg)}
}
.pegasus-companion{
  position:fixed;
  right:max(12px,env(safe-area-inset-right));
  bottom:calc(108px + env(safe-area-inset-bottom));
  width:74px;
  height:74px;
  z-index:28;
  transform:translateY(34px) rotate(-8deg);
  pointer-events:none;
  opacity:.94;
  filter:drop-shadow(0 0 14px rgba(69,243,255,.45));
}
.pegasus-companion img{width:100%;height:100%;object-fit:cover;border-radius:8px;border:2px solid rgba(69,243,255,.48)}
.pegasus-companion:after{content:'';position:absolute;inset:55% -10% -18% -10%;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.68));border-radius:0 0 12px 12px;}
.pegasus-peek{animation:pegasusPeek .72s ease-in-out both;}
@keyframes pegasusPeek{
  0%,100%{transform:translateY(34px) rotate(-8deg)}
  18%{transform:translateY(-2px) rotate(8deg)}
  34%{transform:translateY(-8px) rotate(-10deg)}
  50%{transform:translateY(-4px) rotate(10deg)}
  68%{transform:translateY(-9px) rotate(-6deg)}
}
.pegasus-flyer{
  position:fixed;
  z-index:150;
  width:86px;
  height:86px;
  object-fit:cover;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(1) rotate(-10deg);
  border-radius:8px;
  filter:drop-shadow(0 0 18px rgba(69,243,255,.95));
  animation:pegasusLanding 1.32s cubic-bezier(.16,.8,.2,1) forwards;
}
@keyframes pegasusLanding{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-18deg)}
  12%{opacity:1;transform:translate(-50%,-70%) scale(1.18) rotate(10deg)}
  62%{opacity:1;transform:translate(calc(-50% + var(--dx)*.72),calc(-50% + var(--dy)*.45 - 90px)) scale(1.06) rotate(-12deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.62) rotate(-8deg)}
}
@media(max-width:900px){.pegasus-companion{bottom:calc(184px + env(safe-area-inset-bottom));width:62px;height:62px}.die-display img{width:42px;height:42px}}


/* Patch: square die box, arcade score, and boss henchmen reveal-rush animation. */
.die-display{
  width:72px!important;
  height:72px!important;
  min-width:0!important;
  aspect-ratio:1/1;
  padding:4px;
  border-width:3px;
}
.die-display img{
  width:100%!important;
  height:100%!important;
  max-width:62px;
  max-height:62px;
  object-fit:contain;
}
.score-display{
  position:fixed;
  top:calc(max(10px, env(safe-area-inset-top)) + 78px);
  left:50%;
  transform:translateX(-50%);
  z-index:21;
  color:#fff;
  font-weight:900;
  font-size:clamp(1rem, 3.2vw, 1.45rem);
  letter-spacing:.12em;
  font-family:"Courier New", monospace;
  text-shadow:0 0 4px #fff,0 0 14px rgba(69,243,255,.65),2px 2px 0 #000;
  line-height:1;
  pointer-events:none;
}
.boss-henchman-runner{
  position:fixed;
  z-index:151;
  width:var(--tile);
  height:var(--tile);
  object-fit:cover;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(1);
  filter:drop-shadow(0 0 18px rgba(255, 22, 22, .95)) saturate(1.5) brightness(1.12);
  animation:bossHenchmanRun .9s cubic-bezier(.18,.8,.18,1) forwards;
}
@keyframes bossHenchmanRun{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-16deg)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(8deg)}
  68%{opacity:1;transform:translate(calc(-50% + var(--dx)*.78),calc(-50% + var(--dy)*.78)) scale(.92) rotate(-8deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.28) rotate(18deg)}
}

/* Patch: relic HUD and inventory updates. */
.relic-hud{
  position:fixed;
  top:max(78px,calc(70px + env(safe-area-inset-top)));
  right:max(76px,calc(76px + env(safe-area-inset-right)));
  z-index:29;
  display:flex;
  gap:6px;
  padding:5px;
  border:2px solid rgba(255,211,61,.65);
  background:rgba(5,5,9,.82);
  box-shadow:0 0 12px rgba(255,211,61,.25), inset 0 0 12px rgba(0,0,0,.65);
  border-radius:6px;
}
.relic-slot{
  width:38px;
  height:38px;
  border:2px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.55);
  border-radius:4px;
  display:grid;
  place-items:center;
  opacity:.5;
}
.relic-slot.collected{opacity:1;border-color:#ffd33d;box-shadow:0 0 10px rgba(255,211,61,.35)}
.relic-slot img{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px;}
.game-over-overlay.victory-active{
  background:radial-gradient(circle at 50% 45%,rgba(0,78,150,.32),rgba(0,0,0,.92) 62%,#000 100%);
}
.game-over-overlay.victory-active .game-over-title{
  color:#45f3ff;
  text-shadow:0 0 5px #45f3ff,0 0 18px rgba(69,243,255,.9),0 0 48px rgba(69,243,255,.7),0 .08em 0 #00283a,0 .18em 30px rgba(0,0,0,.95);
}
.inventory-zone strong::after{content:' (3)';color:#ffd33d;font-size:.75em;}


/* Fountain, Wizard, Rogue, and mossy floor patch */
.tile.floor-mossy:not(.border){
  background-image:url('../assets/tiles/floor_mossy.jpg');
  background-size:cover;
  background-position:center;
}
.tile.hero.wizard-charging{
  box-shadow:0 0 0 2px rgba(55,170,255,.72),0 0 18px rgba(55,170,255,.9), inset 0 0 24px rgba(55,170,255,.5);
}
.tile.hero.wizard-charging::after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:8px;
  border:2px solid rgba(80,190,255,.65);
  animation:wizardAura 1.1s ease-in-out infinite;
  pointer-events:none;
  z-index:4;
}
.wizard-charge-pulse{animation:wizardChargePulse .45s ease both;}
@keyframes wizardAura{0%,100%{opacity:.25;transform:scale(.94)}50%{opacity:.9;transform:scale(1.1)}}
@keyframes wizardChargePulse{0%,100%{filter:none}45%{filter:brightness(1.75) drop-shadow(0 0 14px #45aaff)}}
.wizard-lightning{
  position:fixed;
  z-index:151;
  width:10px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(160,230,255,0),#aff1ff 12%,#1aa7ff 55%,#ffffff 70%,rgba(0,120,255,0));
  clip-path:polygon(48% 0,70% 18%,54% 18%,80% 42%,58% 42%,90% 70%,52% 56%,64% 100%,26% 62%,44% 62%,18% 34%,40% 34%,28% 8%);
  filter:drop-shadow(0 0 12px #3bc4ff) drop-shadow(0 0 28px #1a7dff);
  animation:lightningStrike .7s ease-out forwards;
  pointer-events:none;
}
@keyframes lightningStrike{0%{opacity:0;transform:translateX(-50%) scaleY(.1)}14%{opacity:1;transform:translateX(-50%) scaleY(1.05)}55%{opacity:1}100%{opacity:0;transform:translateX(-50%) scaleY(.86)}}
.rogue-shadowstep{animation:rogueFade .55s ease both!important;}
@keyframes rogueFade{0%,100%{opacity:1;filter:none}32%{opacity:.16;filter:brightness(.4) saturate(.3)}58%{opacity:.86;transform:translateX(8px)}}
.rogue-ghost{
  position:fixed;
  z-index:150;
  width:var(--tile);
  height:var(--tile);
  object-fit:cover;
  transform:translate(-50%,-50%);
  opacity:.45;
  filter:brightness(.1) drop-shadow(0 0 12px rgba(160,80,255,.8));
  pointer-events:none;
  animation:rogueGhost .62s ease-out forwards;
}
@keyframes rogueGhost{0%{opacity:.55;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)), -50%) scale(1.15)}}
.heart-bonus{
  transform:scale(1.18);
  filter:drop-shadow(0 0 8px #ffd33d) drop-shadow(0 0 18px rgba(255,211,61,.9));
  border-radius:50%;
  animation:bonusHeartGlow 1.05s ease-in-out infinite;
}
@keyframes bonusHeartGlow{0%,100%{filter:drop-shadow(0 0 8px #ffd33d) drop-shadow(0 0 16px rgba(255,211,61,.75));}50%{filter:drop-shadow(0 0 14px #fff3a0) drop-shadow(0 0 28px rgba(255,211,61,1));transform:scale(1.28)}}
body.fountain-gold-flash::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:83;
  pointer-events:none;
  background:rgba(255,211,61,.48);
  box-shadow:inset 0 0 110px rgba(255,211,61,.95);
  animation:fountainGoldFade 1.3s ease-out forwards;
}
@keyframes fountainGoldFade{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.fairy-flyer{
  position:fixed;
  z-index:152;
  width:min(18vw,96px);
  height:min(18vw,96px);
  object-fit:contain;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 12px rgba(255,220,120,.95));
  pointer-events:none;
  animation:fairySpiral 1.65s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fairySpiral{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(0deg)}
  14%{opacity:1}
  55%{transform:translate(calc(-50% + var(--cx) * .65 + 42px),calc(-50% + var(--cy) * .65 - 30px)) scale(.85) rotate(200deg)}
  82%{opacity:1;transform:translate(calc(-50% + var(--cx) * .94 - 18px),calc(-50% + var(--cy) * .94 + 16px)) scale(.7) rotate(325deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(.18) rotate(420deg)}
}

/* Patch: richer fountain fairies, 50/50 moss, tile-back shatter, exit reveal */
.tile.hero{
  z-index:30;
}
.tile.hero .hero-img{
  position:relative;
  z-index:31;
}
.tile-shatter-layer{
  position:fixed;
  z-index:8;
  pointer-events:none;
  overflow:visible;
  transform:translateZ(0);
}
.tile-shard{
  position:absolute;
  display:block;
  background-image:url('../assets/tiles/tile_back.jpg');
  background-repeat:no-repeat;
  filter:brightness(1.14) drop-shadow(0 5px 5px rgba(0,0,0,.55));
  animation:tileShardBreak .58s cubic-bezier(.17,.72,.26,1) forwards;
  transform-origin:center;
}
@keyframes tileShardBreak{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  32%{opacity:1;transform:translate3d(calc(var(--sx) * .34),calc(var(--sy) * .18),0) scale(.98) rotate(calc(var(--sr) * .18))}
  100%{opacity:0;transform:translate3d(var(--sx),var(--sy),0) scale(.42) rotate(var(--sr))}
}

body.fountain-hearts-active #healthDock,
body.fountain-hearts-active #heartTrack{
  box-shadow:0 0 0 4px rgba(255,211,61,.85),0 0 28px rgba(255,211,61,1),inset 0 0 22px rgba(255,211,61,.38);
  animation:heartDockBlessing .55s ease-in-out infinite alternate;
}
body.fountain-hearts-active .heart{
  animation:heartBlessPulse .55s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 10px #ffd33d) drop-shadow(0 0 22px rgba(255,211,61,.9));
}
@keyframes heartDockBlessing{from{transform:scale(1)}to{transform:scale(1.075)}}
@keyframes heartBlessPulse{from{transform:scale(1)}to{transform:scale(1.32)}}
.fairy-flyer{
  animation:fairyHeartSpiral 3.25s cubic-bezier(.2,.85,.18,1) forwards!important;
  transform-origin:center;
}
@keyframes fairyHeartSpiral{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0deg)}
  8%{opacity:1}
  30%{transform:translate(calc(-50% + var(--hx)),calc(-50% + var(--hy))) scale(.72) rotate(160deg)}
  44%{transform:translate(calc(-50% + var(--hx) + var(--orbit)),calc(-50% + var(--hy))) scale(.7) rotate(300deg)}
  58%{transform:translate(calc(-50% + var(--hx)),calc(-50% + var(--hy) - var(--orbit))) scale(.82) rotate(480deg)}
  72%{transform:translate(calc(-50% + var(--hx) - var(--orbit)),calc(-50% + var(--hy))) scale(.76) rotate(660deg)}
  84%{opacity:1;transform:translate(calc(-50% + var(--hx)),calc(-50% + var(--hy) + var(--orbit))) scale(.9) rotate(820deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--exitx)),calc(-50% + var(--exity))) scale(2.65) rotate(1040deg)}
}

.tile.exit-reveal{
  z-index:30;
  animation:exitTileGrow 1.65s ease-in-out both;
  box-shadow:0 0 28px rgba(80,200,255,.9),0 0 52px rgba(50,150,255,.5);
}
.tile.exit-reveal .hero-img{
  animation:heroDescendStairs 1.55s ease-in-out both;
}
.tile.exit-reveal::after{
  content:'';
  position:absolute;
  inset:-10%;
  background:url('../assets/tiles/exit.jpg') center/cover no-repeat;
  opacity:.55;
  z-index:1;
  border-radius:inherit;
  animation:exitGhostPulse 1.65s ease-in-out both;
  pointer-events:none;
}
@keyframes exitTileGrow{0%{transform:scale(1)}35%{transform:scale(2);filter:brightness(1.4)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes heroDescendStairs{0%{opacity:1;transform:scale(1) translateY(0)}55%{opacity:.74;transform:scale(.76) translateY(12%)}100%{opacity:.18;transform:scale(.35) translateY(34%);filter:brightness(.45)}}
@keyframes exitGhostPulse{0%{opacity:0;transform:scale(.5)}35%{opacity:.7;transform:scale(1.12)}100%{opacity:0;transform:scale(1.8)}}

/* Patch: two-step hero select and safer item targeting. */
.hero-select > p{display:none!important;}
.hero-cards{align-items:start;}
.hero-card{position:relative;text-align:center;min-height:auto;padding:10px;overflow:hidden;}
.hero-card p{display:none!important;}
.hero-card-image{position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;border:1px solid rgba(255,255,255,.18);margin-bottom:8px;background:#050507;}
.hero-card-image img{width:100%;height:100%;object-fit:cover;margin:0;border:0;display:block;}
.hero-ability-overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:10px;background:rgba(0,0,0,.68);color:#fff;font-weight:900;font-size:.82rem;line-height:1.2;text-shadow:0 2px 0 #000,0 0 10px rgba(69,243,255,.7);opacity:0;transform:scale(.96);transition:opacity .16s ease,transform .16s ease;}
.hero-card.selected .hero-ability-overlay{opacity:1;transform:scale(1);}
.hero-card.selected .hero-card-image img{filter:brightness(.48) saturate(1.15);}
.hero-start-btn{display:block;margin:18px auto 0;padding:.7rem 2.4rem;border:3px solid var(--accent);border-radius:6px;background:#101018;color:var(--accent);font-size:clamp(1.15rem,4vw,2rem);font-weight:900;letter-spacing:.12em;box-shadow:0 0 18px rgba(255,211,61,.25);cursor:pointer;}
.hero-start-btn:disabled{opacity:.35;filter:grayscale(1);cursor:not-allowed;box-shadow:none;}
.hero-start-btn:not(:disabled){animation:startReadyPulse 1s ease-in-out infinite;}
@keyframes startReadyPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.tile.targeting{filter:brightness(.72) grayscale(.22);}
.tile.target-valid{filter:none;box-shadow:0 0 0 3px var(--cyan),0 0 18px rgba(69,243,255,.85);animation:validTargetPulse .76s ease-in-out infinite alternate;}
.tile.target-selected{box-shadow:0 0 0 3px var(--accent),0 0 20px rgba(255,211,61,.9)!important;}
@keyframes validTargetPulse{from{transform:scale(1)}to{transform:scale(1.08)}}


/* Patch: dedicated mount slot above hearts for mobile-friendly HUD. */
.health-zone{
  display:grid;
  justify-items:center;
  align-content:center;
  gap:4px;
  min-width:0;
}
.mount-slot{
  width:72px;
  height:58px;
  display:grid;
  place-items:end center;
  margin:-42px auto 0;
  pointer-events:none;
  position:relative;
  z-index:34;
}
.mount-slot:empty{display:none;}
.mount-slot:empty{display:none;}.mount-slot{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:56px;
}
.pegasus-companion{
  position:relative!important;
  right:auto!important;
  bottom:auto!important;
  width:48px!important;
  height:48px!important;
  z-index:35!important;
  transform:none!important;
  pointer-events:none;
  opacity:.96;
  filter:drop-shadow(0 0 12px rgba(69,243,255,.45));
}
.pegasus-companion.hidden{display:none!important;}
.pegasus-companion img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
  border:2px solid rgba(69,243,255,.55);
}
.pegasus-jump{animation:pegasusJump .4s ease-in-out both;}
@keyframes pegasusJump {
  0% {transform:translateY(0);}
  50% {transform:translateY(-16px) scale(1.2);}
  100% {transform:translateY(0);}
}
.pegasus-companion:after{
  content:'';
  position:absolute;
  inset:62% -12% -20% -12%;
  background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.72));
  border-radius:0 0 12px 12px;
}
@keyframes pegasusPeek{
  0%,100%{transform:translateY(18px) rotate(-5deg)}
  18%{transform:translateY(-12px) rotate(9deg)}
  34%{transform:translateY(-18px) rotate(-11deg)}
  50%{transform:translateY(-14px) rotate(12deg)}
  68%{transform:translateY(-19px) rotate(-7deg)}
}
@media(max-width:900px){
  .mount-slot{width:64px;height:50px;margin:-34px auto 0;}
  .pegasus-companion{width:58px!important;height:58px!important;transform:translateY(14px) rotate(-5deg)!important;}
  .bottom-hud{padding-top:22px;}
  .health-zone{order:2;}
  .inventory-zone{order:1;}
  .stats-zone{order:3;}
}


/* Patch: mobile camera viewport + compact player HUD + left relic column. */
:root{--camera-tiles:5;--board-gap:2px;--mobile-tile:min(18.2vw,82px);}
.game{
  padding:calc(74px + env(safe-area-inset-top)) 10px calc(178px + env(safe-area-inset-bottom));
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.board-wrap{
  width:calc((var(--tile) * var(--camera-tiles)) + (var(--board-gap) * (var(--camera-tiles) - 1)) + 18px)!important;
  height:calc((var(--tile) * var(--camera-tiles)) + (var(--board-gap) * (var(--camera-tiles) - 1)) + 18px)!important;
  overflow:hidden!important;
  position:relative;
  touch-action:none;
  display:block!important;
  max-width:calc(100vw - 86px)!important;
  max-height:calc(100svh - 235px)!important;
  padding:8px!important;
  border-color:rgba(69,243,255,.82)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 28px rgba(69,243,255,.18),0 14px 42px rgba(0,0,0,.55)!important;
}
.board{
  position:absolute;
  left:8px;
  top:8px;
  gap:var(--board-gap)!important;
  will-change:transform;
  transition:transform .24s cubic-bezier(.2,.82,.2,1);
  transform-origin:0 0;
}
.left-hud{
  position:fixed;
  left:max(8px,env(safe-area-inset-left));
  top:calc(76px + env(safe-area-inset-top));
  z-index:32;
  display:grid;
  gap:8px;
  justify-items:center;
  pointer-events:auto;
}
.left-hud .merchant-button{
  width:54px;
  height:54px;
  justify-self:center;
  grid-column:auto;
}
.relic-hud{
  position:static!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:7px!important;
  padding:6px!important;
  border:2px solid rgba(255,211,61,.62);
  background:rgba(5,5,9,.78);
  box-shadow:0 0 18px rgba(255,211,61,.18);
  border-radius:6px;
}
.relic-slot{width:42px!important;height:42px!important;}
.effect-panel{top:calc(82px + env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));}
.die-display{top:max(8px,env(safe-area-inset-top));width:58px!important;min-width:58px!important;height:58px!important;}
.score-display{top:calc(68px + env(safe-area-inset-top))!important;}
.bottom-hud.player-panel{
  grid-template-columns:1fr!important;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:min(96vw,620px);
  padding:0 max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.84) 15%,rgba(0,0,0,.96));
  pointer-events:none;
}
.bottom-hud.player-panel .panel{pointer-events:auto;}
.health-zone{
  width:100%;
  padding:8px 10px 10px!important;
  gap:4px;
  border-color:rgba(69,243,255,.72)!important;
}
.player-row{
  display:grid;
  grid-template-columns:minmax(112px,.8fr) minmax(160px,1.2fr);
  gap:8px;
  align-items:end;
  width:100%;
}
.player-subpanel{min-width:0;}
.player-subpanel strong{font-size:.68rem!important;}
.heart-track{min-height:42px;gap:5px;justify-content:center;}
.heart{width:34px!important;height:34px!important;}
.inventory-dock{min-height:42px;gap:6px;justify-content:center;}
.inventory-item{width:42px!important;height:42px!important;}
.empty-inventory{font-size:.68rem;}
.compact-stats{
  width:100%;
  display:grid!important;
  grid-template-columns:repeat(5,1fr)!important;
  gap:4px!important;
  margin-top:3px;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.compact-stats div:nth-child(6){display:none;}
.compact-stats strong{font-size:.58rem!important;color:rgba(169,162,122,.86)!important;}
.compact-stats span{font-size:.78rem!important;line-height:1;color:var(--cyan)!important;}
.mount-slot{
  width:60px!important;
  height:44px!important;
  margin:-34px auto -2px!important;
}
.pegasus-companion{width:56px!important;height:56px!important;transform:translateY(12px) rotate(-5deg)!important;}
@media(max-width:900px){
  :root{--tile:var(--mobile-tile);}
  .app-shell{padding:0!important;width:100%;}
  .game{padding-top:calc(72px + env(safe-area-inset-top));padding-bottom:calc(160px + env(safe-area-inset-bottom));}
  .board-wrap{max-width:calc(100vw - 80px)!important;max-height:calc(100svh - 232px)!important;}
  .toast{top:calc(128px + env(safe-area-inset-top));max-width:calc(100vw - 24px);}
  .left-hud .merchant-button{width:48px;height:48px;}
  .relic-slot{width:36px!important;height:36px!important;}
  .effect-icon{width:44px!important;height:44px!important;}
  .player-row{grid-template-columns:1fr 1.35fr;gap:6px;}
  .heart{width:30px!important;height:30px!important;}
  .inventory-item{width:38px!important;height:38px!important;}
}
@media(max-width:420px){
  :root{--mobile-tile:min(18.6vw,72px);}
  .board-wrap{max-width:calc(100vw - 74px)!important;}
  .compact-stats{grid-template-columns:repeat(4,1fr)!important;}
  .compact-stats div:nth-child(4){display:none;}
  .player-row{grid-template-columns:1fr;}
  .bottom-hud.player-panel{width:98vw;}
  .mount-slot{margin:-32px auto -4px!important;}
}

/* Patch: death camera, reward chest, extended mobile HUD, and boss gem bonus. */
.board{transform-origin:center center;backface-visibility:hidden;contain:layout paint style;}
.board-wrap{background:#05070b;isolation:isolate;}
body.death-camera-active .board{transition:transform 4.8s cubic-bezier(.18,.76,.16,1), filter 4.8s ease!important;transform:perspective(900px) translate3d(0,0,0) scale(.72) rotate(-8deg)!important;filter:saturate(.52) brightness(.7) contrast(1.1);}
body.death-camera-active .board-wrap{perspective:900px;box-shadow:inset 0 0 40px rgba(255,0,0,.18),0 0 38px rgba(255,0,0,.22)!important;}
body.death-camera-active .board-canvas,body.death-camera-active .board-webgl-canvas{transition:filter 4.8s ease!important;filter:saturate(.55) brightness(.72) contrast(1.08);}
@media (prefers-reduced-motion: reduce){body.death-camera-active .board{transition:filter .25s ease!important;transform:scale(.92)!important;}}
.player-row-extended{grid-template-columns:.62fr 1fr 1.45fr .7fr!important;align-items:end;}
.mount-subpanel,.gear-subpanel{text-align:center;}
.mount-slot{margin:0 auto!important;width:46px!important;height:46px!important;border:2px solid rgba(69,243,255,.55);border-radius:7px;background:rgba(0,0,0,.55);box-shadow:inset 0 0 12px rgba(0,0,0,.7),0 0 10px rgba(69,243,255,.18);overflow:visible;}
.pegasus-companion{width:48px!important;height:48px!important;transform:translateY(0) rotate(-5deg)!important;}
.gear-slots{display:flex;gap:6px;justify-content:center;align-items:center;min-height:42px;}
.gear-slot{width:38px;height:38px;border:2px solid rgba(255,255,255,.2);background:rgba(0,0,0,.6);border-radius:6px;display:grid;place-items:center;color:#ffd33d;font-weight:900;box-shadow:inset 0 0 12px rgba(0,0,0,.72);}
.gear-slot.filled{border-color:#ffd33d;box-shadow:0 0 12px rgba(255,211,61,.35),inset 0 0 12px rgba(0,0,0,.72);}
.reward-screen{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#2a1648 0%,#080812 56%,#000 100%);padding:18px;color:#fff;text-align:center;}
.reward-panel{width:min(560px,94vw);padding:22px;border:4px solid #ffd33d;border-radius:12px;background:linear-gradient(180deg,#191326,#060609);box-shadow:0 0 36px rgba(255,211,61,.34),inset 0 0 24px rgba(0,0,0,.8);}
.reward-panel h2{font-size:clamp(1.6rem,7vw,3rem);color:#ffd33d;text-shadow:0 0 8px rgba(255,211,61,.75);}
.reward-chest{font-size:clamp(4rem,21vw,8rem);border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 0 20px rgba(255,211,61,.55));animation:chestBounce 1.15s ease-in-out infinite;}
@keyframes chestBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.07)}}
.reward-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0;}
.reward-slot{min-height:66px;display:grid;place-items:center;border:3px solid rgba(69,243,255,.65);background:#030711;color:#fff;font-weight:900;font-size:clamp(1rem,5vw,1.8rem);box-shadow:inset 0 0 18px rgba(69,243,255,.12);}
.progress-readout{font-weight:900;color:#45f3ff;margin-top:8px;}
.progress-code{margin:10px auto;padding:10px;width:max-content;min-width:190px;background:#000;border:2px solid rgba(255,255,255,.22);color:#fff;font-weight:900;letter-spacing:.18em;line-height:1.45;text-align:center;}
.code-import{display:flex;gap:8px;justify-content:center;margin:10px auto;}
.code-import input{width:170px;background:#04050a;color:#fff;border:2px solid rgba(255,255,255,.25);padding:8px;font:inherit;text-align:center;text-transform:uppercase;}
.code-import button{border:2px solid #45f3ff;background:#06070d;color:#45f3ff;font-weight:900;padding:8px 12px;}
.confetti-bit{position:fixed;top:-18px;z-index:210;width:9px;height:14px;background:hsl(var(--h),95%,58%);pointer-events:none;animation:confettiFall 1.9s linear forwards;box-shadow:0 0 6px rgba(255,255,255,.25);}
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(112vh) rotate(820deg);opacity:0}}
.bonus-gem-flyer{position:fixed;z-index:215;width:34px;height:34px;object-fit:cover;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 0 10px rgba(255,211,61,.9));animation:bonusGemFly 1.08s cubic-bezier(.2,.78,.18,1) forwards;}
@keyframes bonusGemFly{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.25) rotate(360deg)}}
@media(max-width:900px){.player-row-extended{grid-template-columns:.55fr 1fr 1.2fr .6fr!important}.mount-slot{width:40px!important;height:40px!important}.pegasus-companion{width:42px!important;height:42px!important}.gear-slot{width:34px;height:34px}.inventory-item{width:36px!important;height:36px!important}.heart{width:28px!important;height:28px!important}}
@media(max-width:420px){.player-row-extended{grid-template-columns:.55fr 1fr 1fr .6fr!important}.player-subpanel strong{font-size:.54rem!important}.gear-slot{width:30px;height:30px}.mount-slot{width:34px!important;height:34px!important}.pegasus-companion{width:36px!important;height:36px!important}.inventory-item{width:32px!important;height:32px!important}.heart{width:25px!important;height:25px!important}}


/* Patch: reward choice images, load-code overlay, Pegasus alignment, and hero-death fade. */
.load-game-btn{display:block;margin:12px auto 0;border:2px solid var(--cyan);background:#090912;color:#fff;border-radius:6px;padding:.72rem 1.1rem;font-weight:900;letter-spacing:.08em;cursor:pointer;box-shadow:0 0 14px rgba(69,243,255,.2)}
.load-game-overlay{position:fixed;inset:0;z-index:360;display:grid;place-items:center;background:rgba(0,0,0,.78);padding:20px}.load-game-panel{width:min(420px,94vw);padding:20px;border:4px solid var(--accent);border-radius:10px;background:linear-gradient(180deg,#181326,#050507);box-shadow:0 0 34px rgba(255,211,61,.34);text-align:center}.load-code-grid{display:grid;gap:10px;margin:16px 0}.load-code-grid input{font:900 1.35rem 'Courier New',monospace;text-align:center;letter-spacing:.18em;text-transform:uppercase;background:#02040a;color:#fff;border:3px solid var(--cyan);border-radius:6px;padding:.55rem}.load-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.load-actions button{border:2px solid var(--accent);background:#101018;border-radius:6px;padding:.7rem;font-weight:900;cursor:pointer}.load-actions button:first-child{background:var(--accent);color:#160b00}
.reward-slot{cursor:pointer;overflow:hidden;position:relative;min-height:104px}.reward-slot img{width:64px;height:64px;object-fit:contain;display:block;filter:drop-shadow(0 0 10px rgba(255,211,61,.35))}.reward-slot span{display:block;font-weight:900;color:#fff;text-shadow:0 0 7px #000}.reward-slot.reward-ready{animation:rewardReadyPulse 1s ease-in-out infinite;border-color:#ffd33d}.reward-slot.reward-collected{border-color:#55ff7a;box-shadow:0 0 24px rgba(85,255,122,.5),inset 0 0 20px rgba(85,255,122,.12);animation:none}@keyframes rewardReadyPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035);filter:brightness(1.25)}}
.tile.hero.hero-dead .hero-img{opacity:.45;filter:grayscale(1) brightness(.7);transform:scale(.92)}
.pegasus-companion{position:relative!important;right:auto!important;bottom:auto!important;z-index:2!important;width:48px!important;height:48px!important;transform:translateY(0) rotate(0deg)!important;opacity:1!important;margin:auto!important}.pegasus-companion:after{display:none!important}.pegasus-flyer{transform:translate(-50%,-50%) scale(1) rotate(0deg)!important}.pegasus-peek{animation:pegasusSlotJump .8s ease-in-out both!important}@keyframes pegasusSlotJump{0%,100%{transform:translateY(0) rotate(0deg)}18%{transform:translateY(-16px) rotate(-5deg)}36%{transform:translateY(-26px) translateX(8px) rotate(6deg)}58%{transform:translateY(-18px) translateX(-6px) rotate(-7deg)}78%{transform:translateY(-6px) rotate(4deg)}}
@keyframes pegasusLanding{0%{opacity:0;transform:translate(-50%,-50%) scale(.72) rotate(0deg)}12%{opacity:1;transform:translate(-50%,-70%) scale(1.12) rotate(0deg)}62%{opacity:1;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) - 22px)) scale(1.05) rotate(0deg)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.62) rotate(0deg)}}

/* Patch: HUD simplification and strict 3-slot inventory. */
.top-gems{
  position:fixed;
  z-index:24;
  top:max(10px,env(safe-area-inset-top));
  left:calc(max(10px,env(safe-area-inset-left)) + 72px);
  padding:.25rem .55rem;
  border:2px solid rgba(255,211,61,.72);
  border-radius:6px;
  background:rgba(0,0,0,.78);
  color:#fff;
  font-weight:900;
  font-size:clamp(.78rem,2.8vw,1.05rem);
  letter-spacing:.08em;
  text-shadow:0 0 8px rgba(255,211,61,.75),0 2px 0 #000;
  box-shadow:0 0 16px rgba(255,211,61,.22), inset 0 0 12px rgba(0,0,0,.75);
  pointer-events:none;
}
.inventory-dock{
  display:grid!important;
  grid-template-columns:repeat(3, minmax(38px, 48px));
  justify-content:center;
  align-items:center;
  gap:7px!important;
  min-height:52px;
}
.inventory-slot{
  width:48px;
  height:48px;
  border:2px solid rgba(255,211,61,.7);
  border-radius:6px;
  background:rgba(0,0,0,.64);
  box-shadow:inset 0 0 14px rgba(0,0,0,.85),0 0 8px rgba(255,211,61,.16);
}
.inventory-slot.empty{
  border-color:rgba(255,255,255,.28);
  background:rgba(0,0,0,.46);
  box-shadow:inset 0 0 16px rgba(0,0,0,.9);
}
.inventory-slot.filled{cursor:pointer;}
.inventory-slot img{width:100%;height:100%;object-fit:cover;border-radius:3px;}
.inventory-slot span{position:absolute;left:-9999px;}@media(max-width:900px){
  .top-gems{left:calc(max(8px,env(safe-area-inset-left)) + 58px);font-size:.78rem;padding:.22rem .45rem;}
  .inventory-dock{grid-template-columns:repeat(3,38px);gap:6px!important;}
  .inventory-slot{width:38px!important;height:38px!important;}
  }

/* Patch: gem flight, trap multitool, fountain persistence/fairy polish, death grayscale, responsive camera. */
.gem-flyer{
  position:fixed;
  z-index:170;
  width:34px;
  height:34px;
  object-fit:cover;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(1);
  filter:drop-shadow(0 0 12px rgba(69,243,255,.95)) saturate(1.35);
  animation:gemFlyToHud .95s cubic-bezier(.2,.8,.18,1) forwards;
}
@keyframes gemFlyToHud{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0)}
  15%{opacity:1;transform:translate(-50%,-70%) scale(1.2) rotate(90deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.35) rotate(520deg)}
}
.multitool-shimmy{
  animation:multitoolShimmy .78s ease-in-out both!important;
  box-shadow:0 0 18px rgba(69,243,255,.9),0 0 28px rgba(255,211,61,.45)!important;
}
@keyframes multitoolShimmy{
  0%,100%{transform:translateX(0) rotate(0) scale(1)}
  12%{transform:translateX(-6px) rotate(-8deg) scale(1.08)}
  24%{transform:translateX(6px) rotate(8deg) scale(1.08)}
  36%{transform:translateX(-5px) rotate(-7deg) scale(1.08)}
  48%{transform:translateX(5px) rotate(7deg) scale(1.08)}
  65%{transform:translateX(0) rotate(0) scale(1.16)}
}
.tile.hero.hero-dead .hero-img{
  opacity:1!important;
  filter:grayscale(1) saturate(0) brightness(.78) contrast(1.12)!important;
  transform:scale(.96)!important;
}
/* Make the fountain stay visibly present after it blesses the hero. */
.tile:has(img[src*="fountain"]){box-shadow:0 0 16px rgba(255,211,61,.28), inset 0 0 10px rgba(255,211,61,.12)}
.fairy-flyer{
  animation:fairyButterflyBlessing 3.55s cubic-bezier(.24,.74,.24,1) forwards!important;
  transform-origin:center center;
  filter:drop-shadow(0 0 10px rgba(255,235,130,.9));
}
@keyframes fairyButterflyBlessing{
  0%{opacity:0;transform:translate(0,0) scale(.42) rotate(-18deg)}
  12%{opacity:1;transform:translate(calc(var(--hx)*.35),calc(var(--hy)*.35 - 24px)) scale(.75) rotate(16deg)}
  28%{transform:translate(calc(var(--hx)*.78 + 28px),calc(var(--hy)*.78 - 22px)) scale(.86) rotate(-22deg)}
  42%{transform:translate(calc(var(--hx) + var(--orbit)),calc(var(--hy) - 10px)) scale(.9) rotate(24deg)}
  54%{transform:translate(calc(var(--hx) - var(--orbit)*.65),calc(var(--hy) + var(--orbit)*.45)) scale(.94) rotate(-18deg)}
  66%{transform:translate(calc(var(--hx) + var(--orbit)*.45),calc(var(--hy) + var(--orbit)*.72)) scale(1) rotate(28deg)}
  78%{transform:translate(calc(var(--hx) - var(--orbit)*.2),calc(var(--hy) - var(--orbit)*.55)) scale(1.06) rotate(-28deg)}
  100%{opacity:0;transform:translate(calc(var(--exitx)),calc(var(--exity))) scale(2.25) rotate(20deg)}
}
/* More space on tablets/desktops/fullscreen: wider camera, larger tile view. */
@media(min-width:760px){
  :root{--camera-tiles:7;--tile:min(9.2vw,72px);}
  .game{padding-bottom:calc(188px + env(safe-area-inset-bottom));}
  .board-wrap{max-width:calc(100vw - 132px)!important;max-height:calc(100svh - 250px)!important;}
}
@media(min-width:1080px){
  :root{--camera-tiles:9;--tile:min(7.2vw,82px);}
  .board-wrap{max-width:calc(100vw - 190px)!important;max-height:calc(100svh - 240px)!important;}
}
@media(min-width:1380px){
  :root{--camera-tiles:10;--tile:min(6.2vw,88px);}
}

/* Patch: tap-only mobile controls, dice roll tumble, simplified treasure screen, and meta shop. */
.reward-chest{width:min(52vw,230px);height:min(52vw,230px);display:grid;place-items:center;margin:0 auto 12px;padding:0;border:0;background:transparent;cursor:pointer;animation:chestBounce 1.15s ease-in-out infinite;}
.reward-chest img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 24px rgba(255,211,61,.75));}
.reward-result{min-height:2.2em;font-size:clamp(1.1rem,5vw,2rem);font-weight:900;color:#fff;text-shadow:0 0 10px rgba(255,211,61,.8);margin:12px 0;}
.reward-slots,.progress-code,.code-import,.load-game-overlay{display:none!important;}
.treasure-spark{position:fixed;z-index:500;width:8px;height:8px;border-radius:50%;background:#ffd33d;box-shadow:0 0 10px #ffd33d,0 0 20px rgba(255,211,61,.65);pointer-events:none;transform:translate(-50%,-50%);animation:treasureSpark .85s ease-out forwards;}
@keyframes treasureSpark{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.1)}}
.die-display.die-rolling{animation:dieRollShake .66s linear infinite;}
.die-display.archer-reroll{animation:archerBadReroll .82s ease both;}
@keyframes dieRollShake{0%{transform:rotate(-8deg) scale(1.04)}25%{transform:rotate(8deg) scale(1.1)}50%{transform:rotate(-4deg) scale(1.03)}75%{transform:rotate(12deg) scale(1.08)}100%{transform:rotate(-8deg) scale(1.04)}}
@keyframes archerBadReroll{0%,100%{transform:scale(1) rotate(0)}18%{transform:scale(1.28) rotate(-8deg)}35%{transform:scale(1.24) rotate(8deg)}52%{transform:scale(1.25) rotate(-6deg)}72%{transform:scale(1.1) rotate(360deg)}}
.mode-btn:disabled{opacity:.5;filter:grayscale(1);}
.shop-btn{border-color:var(--accent)!important;}


/* Patch: hero-select heart-piece badge and 1000-gem heart-piece shop support. */
.heart-piece-badge{
  width:min(520px,92vw);
  margin:0 auto 12px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:12px;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:3px solid rgba(255,211,61,.92);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(58,20,80,.9),rgba(7,8,16,.94));
  box-shadow:0 0 24px rgba(255,211,61,.22), inset 0 0 20px rgba(255,211,61,.08);
  color:#fff;
  text-align:left;
}
.heart-piece-badge img{
  grid-row:1 / span 2;
  width:54px;
  height:54px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(255,80,130,.85));
  animation:heartPieceGlow 1.4s ease-in-out infinite alternate;
}
.heart-piece-badge span{
  font-weight:900;
  letter-spacing:.08em;
  color:#ffd33d;
  text-shadow:0 0 8px rgba(255,211,61,.5),0 2px 0 #000;
}
.heart-piece-badge b{color:#fff;font-size:1.15em;}
.heart-piece-badge em{
  font-style:normal;
  color:#45f3ff;
  font-weight:900;
  font-size:.86rem;
  letter-spacing:.06em;
}
@keyframes heartPieceGlow{from{transform:scale(1);filter:drop-shadow(0 0 6px rgba(255,80,130,.7))}to{transform:scale(1.08);filter:drop-shadow(0 0 16px rgba(255,80,130,1))}}
@media(max-width:520px){.heart-piece-badge{padding:8px 10px;column-gap:8px}.heart-piece-badge img{width:42px;height:42px}.heart-piece-badge span{font-size:.8rem}.heart-piece-badge em{font-size:.72rem}}
/* Make room for up to 7 heart containers in the main HUD. */
.heart-track{flex-wrap:nowrap;}
@media(max-width:900px){.heart-track{gap:3px}.heart{width:24px!important;height:24px!important}}
@media(max-width:420px){.heart-track{gap:2px}.heart{width:21px!important;height:21px!important}}

/* Patch: title reset, locked heroes, ghost idle threat. */
.reset-progress-btn{
  justify-self:center;
  border:2px solid rgba(255,255,255,.65);
  background:rgba(0,0,0,.45);
  color:#fff;
  font-weight:900;
  letter-spacing:.08em;
  font-size:clamp(.72rem,2.2vw,1rem);
  padding:.45em .9em;
  border-radius:6px;
  cursor:pointer;
  text-shadow:0 0 8px rgba(255,255,255,.4);
  z-index:3;
}
.reset-progress-btn:hover{border-color:#ff4747;color:#ffb4b4;box-shadow:0 0 14px rgba(255,71,71,.32)}
.hero-card.locked{filter:grayscale(.9) brightness(.58);border-color:#54545d;position:relative;}
.hero-card.locked:after{content:'LOCKED';position:absolute;inset:auto 10px 42px 10px;background:rgba(0,0,0,.78);border:2px solid #ffd33d;color:#ffd33d;font-weight:900;padding:.3em;text-align:center;box-shadow:0 0 12px rgba(255,211,61,.35)}
.hero-price{display:block;color:#ffd33d;font-style:normal;font-weight:900;margin-top:.35rem;text-align:center;}
.ghost-fx{position:fixed;z-index:115;pointer-events:none;width:clamp(90px,18vw,230px);height:auto;filter:drop-shadow(0 0 20px rgba(210,230,255,.55));will-change:transform,opacity;}
.ghost-facing-right{transform:scaleX(-1)}
.ghost-facing-left{transform:scaleX(1)}
.ghost-flyby{left:0;opacity:0;animation:ghostFlyby 5.2s ease-in-out forwards;}
@keyframes ghostFlyby{0%{transform:translateX(var(--from-x)) scaleX(var(--ghost-scale,1)) scale(.7);opacity:0}18%{opacity:.72}65%{opacity:.45}100%{transform:translateX(var(--to-x)) scaleX(var(--ghost-scale,1)) scale(1.05);opacity:0}}
.ghost-flyby.ghost-facing-right{--ghost-scale:-1}.ghost-flyby.ghost-facing-left{--ghost-scale:1}
.ghost-drain{left:50%;top:46%;opacity:.9;transform:translate(-50%,-50%) scale(5);animation:ghostDrainApproach 10s ease-in forwards;}
@keyframes ghostDrainApproach{0%{opacity:.9;transform:translate(-50%,-50%) scale(5)}100%{opacity:.15;transform:translate(-50%,-50%) scale(.55)}}
body.ghost-draining .ghost-drain{animation:ghostDrainHover 3.2s ease-in-out infinite alternate;opacity:.15;}
@keyframes ghostDrainHover{from{transform:translate(-50%,-52%) scale(.52)}to{transform:translate(-50%,-48%) scale(.62)}}

/* Patch: make hero select the shop and center LOCKED overlays. */
#heroShopBtn.hidden{display:none!important;}
.meta-shop-inline{
  width:min(680px,94vw);
  margin:0 auto 14px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.hero-shop-gems,
.hero-shop-buy{
  border:3px solid rgba(255,211,61,.86);
  background:linear-gradient(180deg,rgba(18,25,42,.95),rgba(5,7,15,.96));
  color:#fff;
  border-radius:10px;
  padding:9px 12px;
  font-weight:900;
  letter-spacing:.08em;
  text-shadow:0 2px 0 #000,0 0 8px rgba(255,211,61,.45);
  box-shadow:0 0 18px rgba(255,211,61,.18), inset 0 0 16px rgba(255,211,61,.08);
}
.hero-shop-gems b{color:#ffd33d;font-size:1.15em;}
.hero-shop-buy{cursor:pointer;}
.hero-shop-buy span{color:#45f3ff;margin-left:6px;}
.hero-shop-buy:disabled{opacity:.55;filter:grayscale(1);cursor:default;}
.hero-card.locked .hero-card-image{position:relative;}
.hero-card.locked .hero-card-image img{filter:grayscale(.85) brightness(.55);}
.hero-card.locked .hero-ability-overlay{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px!important;
  background:rgba(0,0,0,.36)!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:none;
}
.hero-card.locked .locked-banner{
  display:block;
  width:105%;
  transform:rotate(-8deg);
  color:#ff3333;
  font-size:clamp(1.2rem,5vw,2.2rem);
  font-weight:1000;
  letter-spacing:.12em;
  text-shadow:0 3px 0 #000,0 0 14px rgba(255,0,0,.9);
  border-top:3px solid rgba(255,255,255,.75);
  border-bottom:3px solid rgba(255,255,255,.75);
  background:rgba(0,0,0,.5);
  padding:.1em .2em;
}
.hero-card.locked .hero-ability-overlay small{
  color:#ffd33d;
  font-weight:900;
  text-shadow:0 2px 0 #000;
}
.hero-card.locked .hero-ability-overlay i{
  opacity:0;
  color:#45f3ff;
  font-style:normal;
  font-weight:900;
  text-shadow:0 0 10px rgba(69,243,255,.9),0 2px 0 #000;
}
.hero-card.locked.need-gems .hero-ability-overlay i{animation:findMoreGems 1.2s ease both;}
@keyframes findMoreGems{0%,100%{opacity:0;transform:scale(.8)}20%,80%{opacity:1;transform:scale(1.08)}}

/* Patch: stack heart containers 3 on top, 4 below for mobile-safe HUD. */
.heart-track{
  display:grid!important;
  gap:2px!important;
  justify-items:center;
  align-items:center;
}
.heart-row{display:flex;justify-content:center;align-items:center;gap:3px;min-height:24px;}
.heart-row-top{padding-left:0;}
.heart-row-bottom{gap:2px;}
.heart-track .heart{width:24px!important;height:24px!important;object-fit:contain;}
@media(min-width:720px){.heart-track .heart{width:30px!important;height:30px!important}.heart-row{gap:5px;min-height:31px}}
@media(max-width:420px){.heart-track .heart{width:21px!important;height:21px!important}.heart-row{gap:1px;min-height:22px}}


/* Patch: spell rebalance, fountain renewal fairy, and cleaned hero select layout. */
.hero-select{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);
  grid-template-areas:
    "title title title title"
    "gems gems gems gems"
    ". mode start ."
    "heroes heroes heroes heroes"
    "shop shop shop shop";
  align-items:center;
  gap:12px;
  width:min(960px,96vw);
  margin:0 auto;
}
.hero-select h2{grid-area:title;text-align:center;margin-bottom:0;}
#metaShopInline{grid-area:shop;}
#heroCards.hero-cards,.hero-cards{grid-area:heroes;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(8px,2vw,16px);width:min(820px,96vw);margin:0 auto;}
#heroStartBtn{grid-area:start;margin:0;align-self:center;justify-self:center;}
#heroModeBtn{grid-area:mode;margin:0;align-self:center;justify-self:center;}
.heart-piece-badge{display:none!important;}
.hero-shop-gems{position:fixed;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:34;}
.hero-heart-display{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;order:4;}
.hero-heart-row{display:flex;gap:6px;align-items:center;justify-content:center;}
.heart-piece-dot,.heart-container-dot{display:grid;place-items:center;width:30px;height:30px;opacity:.28;filter:grayscale(1);transition:transform .2s ease,opacity .2s ease,filter .2s ease;}
.heart-piece-dot img,.heart-container-dot img{width:100%;height:100%;object-fit:contain;}
.heart-piece-dot.filled,.heart-container-dot.filled{opacity:1;filter:none;transform:scale(1.06);}
.hero-shop-buy{order:5;}
.hero-card.locked:after{display:none!important;content:none!important;}
.hero-card.locked .hero-ability-overlay i{display:none!important;}
.hero-card.locked .hero-ability-overlay small{font-size:.8rem;}
@media(max-width:520px){.hero-cards{gap:6px!important}.hero-card{padding:6px}.hero-card strong{font-size:.78rem}.hero-card.locked .locked-banner{font-size:1rem}.hero-start-btn{font-size:1rem;padding:.55rem 1.2rem}}

.confused-tile img{filter:hue-rotate(235deg) saturate(1.7) brightness(1.2) drop-shadow(0 0 12px rgba(120,80,255,.85));}
.confused-wobble{animation:confusedWobble .75s ease-in-out both!important;}
@keyframes confusedWobble{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-4px,2px) rotate(-7deg)}45%{transform:translate(5px,-2px) rotate(8deg)}70%{transform:translate(-2px,3px) rotate(-5deg)}}
.squash-puff{position:fixed;z-index:160;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#fff 0%,#cbd0d6 38%,rgba(80,80,80,.0) 70%);pointer-events:none;transform:translate(-50%,-50%) scale(.4);animation:squashPuff .82s ease-out forwards;}
.squash-drop{position:fixed;z-index:161;width:var(--tile);height:var(--tile);object-fit:cover;pointer-events:none;transform:translate(-50%,-180%) scale(1.15);filter:drop-shadow(0 0 14px rgba(255,255,255,.85));animation:squashDrop .72s cubic-bezier(.2,.85,.16,1) forwards;}
@keyframes squashPuff{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(5)}}
@keyframes squashDrop{0%{opacity:1;transform:translate(-50%,-220%) scale(1.2) rotate(-8deg)}62%{transform:translate(-50%,-50%) scale(1.05) rotate(3deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.82) rotate(0)}}
.fountain-ready{box-shadow:0 0 0 3px rgba(255,211,61,.9),0 0 28px rgba(255,211,61,.8)!important;}
.fountain-hover-fairy{position:absolute!important;z-index:4!important;width:42%!important;height:42%!important;object-fit:contain!important;left:50%!important;top:50%!important;margin:0!important;transform-origin:-18px -18px;animation:fountainFairyHover 1.25s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,230,120,.95));pointer-events:none;}
@keyframes fountainFairyHover{0%{transform:translate(-50%,-50%) rotate(0) translateX(22px) scale(.8)}50%{transform:translate(-50%,-58%) rotate(180deg) translateX(16px) scale(1.05)}100%{transform:translate(-50%,-50%) rotate(360deg) translateX(22px) scale(.8)}}
.heart-container-celebrate{animation:heartContainerCelebrate 1.2s ease both;}
@keyframes heartContainerCelebrate{0%,100%{filter:none;transform:scale(1)}35%{filter:drop-shadow(0 0 22px rgba(255,211,61,1));transform:scale(1.05)}70%{filter:drop-shadow(0 0 34px rgba(255,71,120,.9));transform:scale(1.02)}}


/* Patch: gem icon counter placement and Farmer 50-game unlock polish. */
.hero-shop-gems{
  position:fixed!important;
  top:max(10px,env(safe-area-inset-top))!important;
  right:max(10px,env(safe-area-inset-right))!important;
  left:auto!important;
  transform:none!important;
  z-index:80!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  min-height:36px;
}
.top-gems{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
}
.hero-shop-gems img,
.top-gems img{
  width:24px;
  height:24px;
  object-fit:contain;
  filter:drop-shadow(0 0 7px rgba(68,255,187,.8));
}
.hero-shop-gems b,
.top-gems b{
  color:#fff7a9!important;
  font-size:1.12em;
  letter-spacing:.08em;
  text-shadow:0 2px 0 #000,0 0 10px rgba(255,211,61,.65);
}
@media(max-width:520px){
  .hero-shop-gems{top:max(7px,env(safe-area-inset-top))!important;right:max(7px,env(safe-area-inset-right))!important;padding:6px 8px!important;font-size:.78rem!important;}
  .hero-shop-gems img,.top-gems img{width:20px;height:20px;}
}


/* Combat stats replace the old die UI. */
.combat-stats{
  position:fixed;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  z-index:21;display:flex;gap:8px;align-items:center;justify-content:center;
  padding:6px 9px;border:3px solid var(--accent);background:#070710;
  box-shadow:0 0 18px rgba(255,211,61,.35);min-height:58px;border-radius:6px;
}
.combat-stat{display:flex;align-items:center;gap:4px;min-width:54px;justify-content:center;}
.combat-stat img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 0 4px rgba(255,255,255,.2));}
.combat-stat b{font-size:1.25rem;color:#fff;text-shadow:0 0 5px #000;font-weight:900;}
.combat-stat.boosted b{color:#7df8ff;text-shadow:0 0 6px #45f3ff,0 0 14px rgba(69,243,255,.85);}
.stat-burst{animation:statBurst .42s ease;}
@keyframes statBurst{0%{transform:scale(1)}45%{transform:scale(1.24);filter:brightness(1.7)}100%{transform:scale(1)}}
.combat-stats.archer-reroll{animation:archerStatReroll .7s ease;}
@keyframes archerStatReroll{0%,100%{transform:translateX(-50%) scale(1) rotate(0)}20%{transform:translateX(-50%) scale(1.16) rotate(-4deg)}45%{transform:translateX(-50%) scale(1.16) rotate(4deg)}70%{transform:translateX(-50%) scale(1.05) rotate(360deg)}}
.exit-pulse{animation:exitPulse 1.25s ease-in-out infinite;}
@keyframes exitPulse{0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(255,211,61,0));transform:scale(1)}50%{filter:brightness(1.25) drop-shadow(0 0 10px rgba(255,211,61,.65));transform:scale(1.04)}}
@media(max-width:900px){.combat-stats{min-height:48px;padding:5px 7px}.combat-stat{min-width:44px}.combat-stat img{width:23px;height:23px}.combat-stat b{font-size:1.05rem}}

/* Combat callouts: bold but tucked below the main action area. */
.combat-message{
  position:fixed;
  left:50%;
  top:60%;
  transform:translate(-50%,-50%) scale(.9);
  z-index:80;
  pointer-events:none;
  opacity:0;
  font-family:var(--font-arcade, Impact, Haettenschweiler, 'Arial Black', sans-serif);
  font-size:clamp(1.75rem, 8.2vw, 5.6rem);
  line-height:.95;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#fff;
  text-align:center;
  max-width:min(88vw, 760px);
  white-space:normal;
  -webkit-text-stroke:2px #050505;
  text-shadow:0 0 7px #000,0 0 16px rgba(255,255,255,.55),0 5px 0 rgba(0,0,0,.52);
}
.combat-message.show{animation:combatMessagePop 1.1s ease-out forwards;}
.combat-message.hit{color:#7df8ff;text-shadow:0 0 10px #007cff,0 0 28px #55d7ff,0 8px 0 rgba(0,0,0,.55);}
.combat-message.hurt{color:#75ff74;text-shadow:0 0 10px #00a62d,0 0 28px #62ff86,0 8px 0 rgba(0,0,0,.55);}
.combat-message.defense{color:#ffd94a;text-shadow:0 0 10px #ff7a00,0 0 28px #ffe16a,0 8px 0 rgba(0,0,0,.55);}
@keyframes combatMessagePop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-2deg)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(1deg)}
  74%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(.98) rotate(0)}
}
.splash-copyright a{color:inherit;text-decoration:none}.splash-copyright a:hover{text-decoration:underline}

@media(max-height:720px){
  .combat-message{top:59%;font-size:clamp(1rem,5vw,2.5rem);}
}
@media(max-width:520px){
  .combat-message{top:61%;font-size:clamp(1rem,6.2vw,2.4rem);max-width:92vw;}
}


/* Patch: keep splash credit links from behaving like the splash start target. */
.splash-copyright a{position:relative;z-index:5;pointer-events:auto;cursor:pointer;}

/* Patch: restore strict centered 2x3 hero-select layout. */
#heroSelect.hero-select{
  min-height:100svh;
  box-sizing:border-box;
  margin:0 auto!important;
  padding:clamp(12px,2.4vw,24px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr)!important;
  grid-template-areas:
    "title title title title"
    "gems mode start ."
    "heroes heroes heroes heroes"
    "shop shop shop shop"!important;
  align-content:center!important;
  justify-items:center!important;
  gap:clamp(8px,1.6vw,16px)!important;
}
#heroCards.hero-cards{
  grid-area:heroes!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:1fr!important;
  width:min(820px,94vw)!important;
  max-width:820px!important;
  justify-content:center!important;
  align-items:stretch!important;
  margin:0 auto!important;
}
#heroCards .hero-card{
  width:100%!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
}
#heroCards .hero-card-image{width:100%;}
@media(max-width:560px){
  #heroSelect.hero-select{gap:7px!important;padding:8px!important;}
  #heroCards.hero-cards{gap:6px!important;width:96vw!important;}
}

/* Hotfix: strict 2x3 hero-select layout must still respect hidden state when game starts. */
#heroSelect.hero-select.hidden{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}


/* Patch: stable counters, minimap, centered hero select, and slot-machine reward. */
.hero-shop-gems{
  position:fixed!important;
  top:max(10px,env(safe-area-inset-top))!important;
  right:max(10px,env(safe-area-inset-right))!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  z-index:120!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
}
.top-gems{
  top:max(10px,env(safe-area-inset-top))!important;
  left:max(10px,env(safe-area-inset-left))!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
}
.mini-map{
  position:fixed;
  top:calc(max(10px,env(safe-area-inset-top)) + 54px);
  right:max(10px,env(safe-area-inset-right));
  z-index:26;
  display:grid;
  grid-template-columns:repeat(10,7px);
  grid-template-rows:repeat(10,7px);
  gap:2px;
  padding:6px;
  border:2px solid rgba(255,255,255,.42);
  border-radius:7px;
  background:rgba(0,0,0,.72);
  box-shadow:0 0 16px rgba(0,0,0,.75), inset 0 0 12px rgba(255,255,255,.06);
  pointer-events:none;
}
.mini-dot{width:7px;height:7px;display:block;background:#6f6f76;opacity:.8;border-radius:1px;}
.mini-dot.revealed{background:#227cff;box-shadow:0 0 4px rgba(34,124,255,.7);}
.mini-dot.hero-pos{background:#32ff6d;box-shadow:0 0 8px rgba(50,255,109,1);}
.mini-dot.exit-pos{background:#fff;box-shadow:0 0 7px rgba(255,255,255,1);}
.mini-dot.fountain-pos{background:#ffd33d;box-shadow:0 0 7px rgba(255,211,61,1);}
#heroSelect.hero-select:not(.hidden){
  display:grid!important;
  min-height:100svh!important;
  width:min(980px,100%)!important;
  margin:0 auto!important;
  align-content:center!important;
  justify-content:center!important;
  justify-items:center!important;
  grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr)!important;
  grid-template-areas:
    "title title title title"
    "gems mode start ."
    "heroes heroes heroes heroes"
    "shop shop shop shop"!important;
}
#heroSelect.hero-select.hidden{display:none!important;visibility:hidden!important;pointer-events:none!important;}
#heroCards.hero-cards{
  grid-area:heroes!important;
  width:min(820px,94vw)!important;
  max-width:820px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,auto)!important;
  justify-content:center!important;
  align-items:stretch!important;
  margin:0 auto!important;
}
.foresight-card-reveal{
  position:fixed;
  left:50%;top:46%;
  width:min(26vw,150px);
  height:min(26vw,150px);
  object-fit:cover;
  z-index:240;
  pointer-events:none;
  border:3px solid rgba(255,211,61,.85);
  background:#050507;
  box-shadow:0 0 24px rgba(255,211,61,.55),0 0 60px rgba(69,243,255,.2);
  transform:translate(-50%,-50%) scale(.55) rotate(-6deg);
  opacity:0;
  animation:foresightCardShow 1.12s ease-out forwards;
}
@keyframes foresightCardShow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-10deg)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.02) rotate(4deg)}
  66%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-135%) scale(.32) rotate(18deg)}
}
.reward-chest.slot-spinning,
.reward-chest:disabled{cursor:wait;filter:brightness(1.2) drop-shadow(0 0 28px rgba(69,243,255,.8));}
#rewardNextRun:disabled{opacity:.45;filter:grayscale(1);cursor:not-allowed;}
@media(max-width:760px){
  .mini-map{grid-template-columns:repeat(10,5px);grid-template-rows:repeat(10,5px);gap:1px;padding:5px;top:calc(max(8px,env(safe-area-inset-top)) + 45px);}
  .mini-dot{width:5px;height:5px;}
}
/* Hotfix: keep hero-select content centered and predictable. */
#heroSelect.hero-select > h2{grid-area:title!important;text-align:center!important;justify-self:center!important;}
#heroSelect.hero-select > p{display:none!important;}
#metaShopInline{grid-area:shop!important;justify-self:center!important;}
#heroModeBtn{grid-area:mode!important;}
#heroStartBtn{grid-area:start!important;}

/* Patch: main-game HUD alignment + uploaded stat icon sizing. */
.game .top-gems{
  top:max(10px,env(safe-area-inset-top))!important;
  left:calc(max(10px,env(safe-area-inset-left)) + 72px)!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  z-index:25!important;
}
.game .mini-map{
  top:max(10px,env(safe-area-inset-top))!important;
  right:calc(max(10px,env(safe-area-inset-right)) + 92px)!important;
  z-index:22!important;
  grid-template-columns:repeat(10,6px)!important;
  grid-template-rows:repeat(10,6px)!important;
  gap:1px!important;
  padding:5px!important;
}
.game .effect-panel{
  top:max(10px,env(safe-area-inset-top))!important;
  right:max(10px,env(safe-area-inset-right))!important;
  z-index:24!important;
}
.game .score-display{
  top:max(10px,env(safe-area-inset-top))!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:20!important;
}
.game .combat-stats{
  top:calc(max(10px,env(safe-area-inset-top)) + 48px)!important;
  z-index:21!important;
}
.game .combat-stat img{
  width:32px!important;
  height:32px!important;
  object-fit:contain!important;
}
@media(max-width:700px){
  .game .top-gems{left:calc(max(8px,env(safe-area-inset-left)) + 62px)!important;}
  .game .mini-map{right:calc(max(8px,env(safe-area-inset-right)) + 60px)!important;grid-template-columns:repeat(10,5px)!important;grid-template-rows:repeat(10,5px)!important;padding:4px!important;}
  .game .effect-icon{width:48px!important;height:48px!important;}
  .game .combat-stats{top:calc(max(8px,env(safe-area-inset-top)) + 44px)!important;}
  .game .combat-stat img{width:26px!important;height:26px!important;}
}

/* Patch: Foresight shows all three tiles in a row for 1s, then flies them away. */
.foresight-row{
  position:fixed;
  left:50%;
  top:44%;
  transform:translate(-50%,-50%);
  display:flex;
  gap:min(4vw,22px);
  align-items:center;
  justify-content:center;
  z-index:255;
  pointer-events:none;
}
.foresight-row .foresight-card-reveal{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  width:min(27vw,142px);
  height:min(27vw,142px);
  object-fit:cover;
  border:3px solid rgba(255,211,61,.9);
  background:#050507;
  box-shadow:0 0 26px rgba(255,211,61,.65),0 0 62px rgba(69,243,255,.25);
  opacity:1;
  transform:scale(1) rotate(0deg);
  animation:foresightCardHold 1s ease-out forwards;
}
.foresight-row.fly-away .foresight-card-reveal{
  animation:foresightCardFlyAway .65s ease-in forwards;
}
@keyframes foresightCardHold{
  0%{opacity:0;transform:scale(.35) rotate(-10deg)}
  20%{opacity:1;transform:scale(1.06) rotate(3deg)}
  100%{opacity:1;transform:scale(1) rotate(0deg)}
}
@keyframes foresightCardFlyAway{
  0%{opacity:1;transform:translate(0,0) scale(1) rotate(0deg)}
  100%{opacity:0;transform:translate(var(--flyx,0px),-58vh) scale(.25) rotate(24deg)}
}
.exit-found-pulse{animation:exitPulseFound 1.1s ease-in-out infinite;}
@keyframes exitPulseFound{0%,100%{filter:drop-shadow(0 0 4px #fff);transform:scale(1)}50%{filter:drop-shadow(0 0 16px #fff) drop-shadow(0 0 20px #45f3ff);transform:scale(1.08)}}
.hero-descend img{animation:heroDescendStairs 2s ease-in-out forwards;}
@keyframes heroDescendStairs{
  0%{transform:translate(0,0) scale(1);opacity:1;filter:brightness(1)}
  45%{transform:translate(8px,10px) scale(.86);opacity:.9;filter:brightness(.85)}
  100%{transform:translate(18px,34px) scale(.28);opacity:0;filter:brightness(.35)}
}


/* Patch: dungeon clear win, arcade level readout, and Pegasus slot polish. */
.game .arcade-level-indicator{
  position:fixed;
  top:calc(max(10px,env(safe-area-inset-top)) + 76px);
  right:calc(max(10px,env(safe-area-inset-right)) + 70px);
  z-index:23;
  padding:3px 7px;
  border:2px solid rgba(69,243,255,.7);
  border-radius:6px;
  background:rgba(5,5,9,.82);
  color:#fff;
  font-family:var(--arcade-font, monospace);
  font-weight:900;
  font-size:.78rem;
  letter-spacing:.08em;
  text-shadow:0 0 8px rgba(69,243,255,.85);
  pointer-events:none;
}
.game .arcade-level-indicator.hidden{display:none!important;}
.mount-slot{
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
.pegasus-companion{
  width:min(52px,12vw)!important;
  height:min(52px,12vw)!important;
  transform:translateY(0) rotate(0deg)!important;
  transform-origin:center center!important;
  overflow:visible!important;
}
.pegasus-companion img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:0!important;
}
.pegasus-peek{animation:pegasusWallFlightSlot .62s ease-in-out both!important;}
@keyframes pegasusWallFlightSlot{
  0%,100%{transform:translateY(0) scale(1) rotate(0deg)}
  16%{transform:translateY(-12px) translateX(-4px) scale(1.06) rotate(-7deg)}
  34%{transform:translateY(-20px) translateX(7px) scale(1.12) rotate(8deg)}
  56%{transform:translateY(-12px) translateX(-5px) scale(1.08) rotate(-6deg)}
  78%{transform:translateY(-5px) translateX(3px) scale(1.03) rotate(4deg)}
}
@media(max-width:700px){
  .game .arcade-level-indicator{
    top:calc(max(8px,env(safe-area-inset-top)) + 64px);
    right:calc(max(8px,env(safe-area-inset-right)) + 60px);
    font-size:.62rem;
    padding:2px 5px;
  }
  .pegasus-companion{width:38px!important;height:38px!important;}
}


/* Patch: death snapshot button and reward cleanup. */
.progress-readout{display:none!important;}
.death-share-btn{
  margin:14px auto 4px;
  padding:10px 16px;
  border:3px solid #fff4a6;
  border-radius:10px;
  background:linear-gradient(180deg,#3b1b55,#12071c);
  color:#fff4a6;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 0 18px rgba(255,244,166,.35), inset 0 0 14px rgba(255,255,255,.08);
  cursor:pointer;
}
.death-share-btn.hidden{display:none!important;}
.death-share-btn:hover,.death-share-btn:focus-visible{filter:brightness(1.22);transform:scale(1.03);}

.confused-status{
  position:fixed;
  left:50%;
  top:66%;
  transform:translateX(-50%);
  z-index:90;
  color:#d48cff;
  font-family:var(--arcade-font, Impact, fantasy);
  font-weight:900;
  letter-spacing:.18em;
  font-size:clamp(1.05rem,4vw,2.25rem);
  text-shadow:0 0 8px #7c2cff,0 0 22px #d946ef,0 5px 0 rgba(0,0,0,.55);
  pointer-events:none;
  animation:confusedPulse .8s ease-in-out infinite alternate;
}
.confused-status.hidden{display:none;}
@keyframes confusedPulse{from{opacity:.58; transform:translateX(-50%) scale(.94) rotate(-1deg);}to{opacity:1; transform:translateX(-50%) scale(1.08) rotate(1deg);}}

/* Patch: final polish - full-map secret view, ghost hover drain, lower alerts. */
body.full-map-view{
  --camera-tiles:12!important;
  --tile:min(
    calc((100vw - 30px - (var(--board-gap) * 11)) / 12),
    calc((100svh - 210px - (var(--board-gap) * 11)) / 12),
    58px
  )!important;
}
body.full-map-view .game{place-items:center!important;padding-top:calc(70px + env(safe-area-inset-top))!important;padding-bottom:calc(124px + env(safe-area-inset-bottom))!important;}
body.full-map-view .board-wrap{
  width:calc((var(--tile) * 12) + (var(--board-gap) * 11) + 18px)!important;
  height:calc((var(--tile) * 12) + (var(--board-gap) * 11) + 18px)!important;
  max-width:calc(100vw - 18px)!important;
  max-height:calc(100svh - 148px)!important;
  overflow:hidden!important;
}
body.full-map-view .board{transition:transform .35s ease!important;transform:translate(0,0)!important;}
.ghost-hover-player{position:fixed!important;transform:translate(-50%,-50%) scale(.9);opacity:.42!important;animation:ghostOrbitPlayer 2.8s ease-in-out infinite alternate!important;}
@keyframes ghostOrbitPlayer{from{filter:drop-shadow(0 0 18px rgba(215,230,255,.55));}to{filter:drop-shadow(0 0 30px rgba(255,255,255,.78));}}
.combat-message{top:68%!important;}
.confused-status{top:70%!important;}
.toast{top:calc(max(82px, env(safe-area-inset-top) + 84px))!important;}

/* Patch: gold hero portraits and reliable full-map toggle polish. */
.hero-card.gold-unlocked .hero-card-image{
  box-shadow:0 0 0 3px rgba(255,215,74,.95),0 0 24px rgba(255,205,55,.78),inset 0 0 22px rgba(255,230,120,.22)!important;
}
.hero-card.gold-unlocked strong{
  color:#ffe77a!important;
  text-shadow:0 0 8px rgba(255,214,60,.9),0 2px 0 rgba(0,0,0,.7)!important;
}
body.full-map-view .board-wrap{
  aspect-ratio:1/1!important;
}

/* Patch: dungeon themes + snapshot polish support */
.tile:not(.border){background-image:var(--floor-img, url('../assets/tiles/floor.jpg'))!important;background-size:cover;background-position:center;}
.tile.floor-mossy:not(.border){background-image:var(--floor-img, url('../assets/tiles/floor_mossy.jpg'))!important;}
.theme-shop{grid-column:1/-1;width:min(760px,96vw);margin:6px auto 0;padding:8px;border:2px solid rgba(255,211,61,.45);border-radius:8px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 14px rgba(0,0,0,.45);}
.theme-shop>strong{display:block;text-align:center;color:#ffd33d;font-size:.95rem;letter-spacing:.16em;margin-bottom:6px;text-shadow:0 0 10px rgba(255,211,61,.45);}
.theme-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
.theme-buy{border:2px solid rgba(69,243,255,.62);background:#080913;color:#fff;border-radius:6px;padding:7px 5px;font-weight:900;letter-spacing:.05em;cursor:pointer;display:grid;gap:2px;place-items:center;min-height:45px;}
.theme-buy span{font-size:.66rem;color:#ffd33d;letter-spacing:.08em;}
.theme-buy.active{border-color:#ffd33d;box-shadow:0 0 16px rgba(255,211,61,.45);background:linear-gradient(180deg,rgba(255,211,61,.16),rgba(8,9,19,.95));}
body[data-theme="jungle"] .board-wrap{box-shadow:0 0 26px rgba(91,255,99,.18), inset 0 0 24px rgba(35,88,38,.25);}
body[data-theme="stone"] .board-wrap{box-shadow:0 0 24px rgba(210,210,210,.14), inset 0 0 24px rgba(120,120,120,.18);}
body[data-theme="ice"] .board-wrap{box-shadow:0 0 30px rgba(160,235,255,.25), inset 0 0 24px rgba(100,200,255,.16);}
@media (max-width:720px){.theme-buttons{grid-template-columns:repeat(2,minmax(0,1fr));}.theme-shop{padding:6px}.theme-buy{min-height:38px;font-size:.74rem}}


/* Patch: themed board underlay + gold theme */
.board{
  background-image:var(--theme-floor-img, url('../assets/tiles/floor.jpg'))!important;
  background-size:var(--tile) var(--tile)!important;
  background-position:0 0!important;
  padding:2px;
  border-radius:4px;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.45), 0 0 18px rgba(0,0,0,.32);
}
.tile:not(.border){
  background-image:var(--floor-img, var(--theme-floor-img, url('../assets/tiles/floor.jpg')))!important;
  background-color:#16120c!important;
  background-size:cover!important;
  background-position:center!important;
}
.tile.floor-mossy:not(.border){
  background-image:var(--floor-img, var(--theme-mossy-img, url('../assets/tiles/floor_mossy.jpg')))!important;
}
.tile.removed:not(.border){
  background-image:var(--floor-img, var(--theme-floor-img, url('../assets/tiles/floor.jpg')))!important;
  color:transparent!important;
}
body[data-theme="gold"] .board-wrap{box-shadow:0 0 34px rgba(255,211,61,.32), inset 0 0 30px rgba(255,211,61,.18);}
body[data-theme="gold"] .theme-buy.active{border-color:#fff08a;box-shadow:0 0 18px rgba(255,240,138,.64);background:linear-gradient(180deg,rgba(255,211,61,.24),rgba(70,42,0,.88));}
@media (min-width:721px){.theme-buttons{grid-template-columns:repeat(5,minmax(0,1fr));}}


/* Patch: robust themed board underlay. Paint a themed floor beneath every playable cell and in every grid gap. */
.board{
  background-image:var(--theme-floor-img, url('../assets/tiles/floor.jpg'))!important;
  background-size:var(--tile) var(--tile)!important;
  background-position:center!important;
  background-color:#2b2116!important;
}
.board-wrap{
  background-image:var(--theme-floor-img, url('../assets/tiles/floor.jpg'))!important;
  background-size:var(--tile) var(--tile)!important;
  background-position:center!important;
  background-color:#2b2116!important;
}
.tile:not(.border){
  background-image:var(--tile-floor-img, var(--theme-floor-img, url('../assets/tiles/floor.jpg')))!important;
  background-size:cover!important;
  background-position:center!important;
  background-color:#2b2116!important;
}
.tile.floor-mossy:not(.border){
  background-image:var(--tile-floor-img, var(--theme-mossy-img, url('../assets/tiles/floor_mossy.jpg')))!important;
}
.tile.removed:not(.border){
  background-image:var(--tile-floor-img, var(--theme-floor-img, url('../assets/tiles/floor.jpg')))!important;
  background-size:cover!important;
  background-position:center!important;
  color:transparent!important;
}
.tile:not(.border)::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:var(--tile-floor-img, var(--theme-floor-img, url('../assets/tiles/floor.jpg')))!important;
  background-size:cover!important;
  background-position:center!important;
  z-index:0;
  pointer-events:none;
}
.tile.floor-mossy:not(.border)::before{
  background-image:var(--tile-floor-img, var(--theme-mossy-img, url('../assets/tiles/floor_mossy.jpg')))!important;
}
.tile.border::before{content:none!important;}
.tile img,.tile .boss-stack-count,.tile .fountain-hover-fairy{position:relative;z-index:1;}
body[data-theme="gold"] .board-wrap{box-shadow:0 0 32px rgba(255,211,61,.34), inset 0 0 26px rgba(212,154,40,.22);}

/* Patch: direct DOM floor underlay. JS now paints active-theme floor images directly per cell. */
.tile:not(.border){
  background-color:#2b2116!important;
  background-size:cover!important;
  background-position:center!important;
}
.tile:not(.border)::before{content:none!important;}
.tile-floor-underlay{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  pointer-events:none;
}
.tile-content{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}
.tile-content>img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}
.tile.hidden-tile::after{z-index:3;}
.tile.removed:not(.border) .tile-content{color:transparent;}
.board,.board-wrap{
  background-repeat:repeat!important;
  background-color:#2b2116!important;
}

/* Camera-correct dungeon underlay: this layer lives inside .board, so it translates with the dungeon. */
.board{position:relative;background-image:var(--theme-floor-img);background-size:var(--tile) var(--tile);background-position:0 0;}
.board-floor-layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,var(--tile));grid-template-rows:repeat(12,var(--tile));gap:2px;z-index:0;pointer-events:none;}
.board-floor-cell{background-image:var(--theme-floor-img);background-size:cover;background-position:center;border-radius:2px;}
.board-floor-cell.border{background:#020203;background-image:none;}
.tile{z-index:1;background:transparent!important;}
.tile.border{background:#020203!important;}
.tile-content{position:relative;z-index:2;width:100%;height:100%;display:grid;place-items:center;}
.tile-floor-underlay{display:none!important;}
.tile.removed,.tile:not(.hidden-tile){background:transparent!important;}
.tile.hidden-tile{background:transparent!important;}

/* Patch: align camera floor layer exactly with tile grid without changing child indexing. */
.board-floor-layer{
  position:absolute!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  display:grid!important;
  grid-template-columns:repeat(12,var(--tile))!important;
  grid-template-rows:repeat(12,var(--tile))!important;
  gap:var(--board-gap,2px)!important;
  z-index:0!important;
  pointer-events:none!important;
}
.board-floor-cell{min-width:0;min-height:0;background-size:cover!important;background-position:center!important;}
.board>.tile{position:relative!important;z-index:1!important;}

/* Patch: heart piece collection animations */
.heart-piece-quarter {
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:radial-gradient(circle, #ff4fd8 0, transparent 5px);
  background-size:24px 24px;
  opacity:0;
}
@keyframes heartPieceFill {
  0% {opacity:0; transform:scale(.3) rotate(0deg);}
  100% {opacity:1; transform:scale(1) rotate(var(--quarter-index, 0) * 90deg);}
}

.heart-piece-new-container {
  position:absolute;
  inset:-4px;
  z-index:5;
  pointer-events:none;
  background:#ffd33d;
  border-radius:6px;
  box-shadow:0 0 18px rgba(255,211,61,.7);
  opacity:0;
}
@keyframes heartContainerFill {
  0% {opacity:0; transform:scale(.4);}
  30% {opacity:1; transform:scale(1.2) rotate(-8deg);}
  100% {transform:scale(1); opacity:.7;}
}

/* Patch: camera-safe board centering and compact theme sprite buttons. */
.board{
  padding:0!important;
  box-sizing:content-box!important;
  gap:var(--board-gap,2px)!important;
  overflow:visible!important;
}
.board-floor-layer{
  inset:0!important;
  width:calc((var(--tile) * 12) + (var(--board-gap,2px) * 11))!important;
  height:calc((var(--tile) * 12) + (var(--board-gap,2px) * 11))!important;
  grid-template-columns:repeat(12,var(--tile))!important;
  grid-template-rows:repeat(12,var(--tile))!important;
  gap:var(--board-gap,2px)!important;
  transform:none!important;
}
.board>.tile{
  width:var(--tile)!important;
  height:var(--tile)!important;
}
.theme-shop{
  width:min(860px,96vw)!important;
  padding:7px!important;
}
.theme-buttons{
  display:flex!important;
  flex-wrap:nowrap!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:7px!important;
  overflow-x:auto!important;
  padding-bottom:2px!important;
}
.theme-buy{
  flex:0 0 auto!important;
  width:72px!important;
  min-height:84px!important;
  padding:4px!important;
  display:grid!important;
  grid-template-rows:44px auto auto!important;
  gap:2px!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.55))!important;
}
.theme-swatch{
  display:block!important;
  width:44px!important;
  height:44px!important;
  border:2px solid rgba(255,255,255,.28)!important;
  border-radius:5px!important;
  background-image:var(--theme-button-img)!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:inset 0 0 10px rgba(0,0,0,.35)!important;
}
.theme-buy b{font-size:.62rem!important;line-height:1!important;letter-spacing:.04em!important;color:#fff!important;}
.theme-buy em{font-size:.52rem!important;line-height:1!important;font-style:normal!important;color:#ffd33d!important;}
.theme-buy.active .theme-swatch{border-color:#ffd33d!important;box-shadow:0 0 12px rgba(255,211,61,.55),inset 0 0 10px rgba(0,0,0,.35)!important;}
body[data-theme="pirate"] .board-wrap{box-shadow:0 0 30px rgba(245,160,78,.22), inset 0 0 26px rgba(105,55,25,.22)!important;}
@media (max-width:720px){.theme-buttons{justify-content:flex-start!important}.theme-buy{width:64px!important;min-height:78px!important;grid-template-rows:38px auto auto!important}.theme-swatch{width:38px!important;height:38px!important}}

/* Geometry cleanup patch: the tile itself is the floor base. No extra board children. */
.board-wrap{
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
  padding:8px!important;
}
.board{
  position:absolute!important;
  left:8px!important;
  top:8px!important;
  display:grid!important;
  grid-template-columns:repeat(12,var(--tile))!important;
  grid-template-rows:repeat(12,var(--tile))!important;
  gap:var(--board-gap,2px)!important;
  padding:0!important;
  margin:0!important;
  box-sizing:content-box!important;
  transform-origin:0 0!important;
  contain:layout paint style!important;
}
.board-floor-layer{display:none!important;}
.board>.tile{
  position:relative!important;
  z-index:1!important;
  width:var(--tile)!important;
  height:var(--tile)!important;
  box-sizing:border-box!important;
  background-image:var(--tile-floor-img,var(--theme-floor-img,url('../assets/tiles/floor.jpg')))!important;
  background-size:cover!important;
  background-position:center!important;
  background-color:#2b2116!important;
}
.board>.tile.floor-mossy:not(.border){background-image:var(--tile-floor-img,var(--theme-mossy-img,url('../assets/tiles/floor_mossy.jpg')))!important;}
.board>.tile.border{background:#020203!important;background-image:none!important;}
.board>.tile.removed:not(.border),.board>.tile:not(.hidden-tile):not(.border){background-image:var(--tile-floor-img,var(--theme-floor-img,url('../assets/tiles/floor.jpg')))!important;}
.board>.tile.hidden-tile:not(.border){background-image:var(--tile-floor-img,var(--theme-floor-img,url('../assets/tiles/floor.jpg')))!important;}
.board>.tile::before{content:none!important;}
.tile-content{position:relative!important;z-index:2!important;width:100%!important;height:100%!important;display:grid!important;place-items:center!important;}

/* Final theme-shop and board-base cleanup */
.theme-buttons{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
}
.theme-buy{
  width:auto!important;
  min-width:0!important;
  min-height:82px!important;
  grid-template-rows:minmax(36px,1fr) auto auto!important;
  padding:6px 4px!important;
}
.theme-swatch{
  width:100%!important;
  max-width:54px!important;
  height:38px!important;
  border-radius:5px!important;
  background-image:var(--theme-button-img)!important;
  background-size:cover!important;
  background-position:center!important;
}
.theme-buy b{font-size:clamp(.48rem,1.25vw,.68rem)!important;line-height:1!important;white-space:nowrap!important;}
.theme-buy em{font-size:clamp(.44rem,1.05vw,.58rem)!important;line-height:1!important;white-space:nowrap!important;}
.board>.tile.outer-floor{
  background-color:#2b2116!important;
  border:1px solid rgba(69,243,255,.10)!important;
  color:transparent!important;
}
.board>.tile.outer-floor.floor-mossy,
.board>.tile.outer-floor{
  background-size:cover!important;
  background-position:center!important;
}
.board>.tile.outer-floor .tile-content:empty{display:none!important;}
@media (max-width:720px){
  .theme-buttons{gap:5px!important;}
  .theme-buy{min-height:68px!important;padding:4px 2px!important;}
  .theme-swatch{height:30px!important;max-width:42px!important;}
  .theme-buy b{font-size:.46rem!important;}
  .theme-buy em{font-size:.42rem!important;}
}

/* Publish polish: splash developer mode and clean theme cards */
.splash-dev-grid{
  width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;padding:8px;border-radius:10px;background:#050607;box-shadow:inset 0 0 28px rgba(0,0,0,.85),0 0 24px rgba(69,243,255,.16);
}
.splash-dev-tile{position:relative;border:2px solid rgba(69,243,255,.28);border-radius:7px;background-size:cover;background-position:center;cursor:pointer;overflow:hidden;box-shadow:inset 0 0 16px rgba(0,0,0,.42);}
.splash-dev-tile:active{transform:scale(.97)}
.splash-dev-tile.dev-hero{border-color:#ffd33d;box-shadow:0 0 18px rgba(255,211,61,.55),inset 0 0 12px rgba(0,0,0,.35);}
.splash-dev-tile img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.08)}
.dev-mode-active-animation{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;pointer-events:none;background:rgba(0,0,0,.48);}
.dev-mode-active-animation span{position:absolute;font-weight:1000;font-size:clamp(3rem,14vw,9rem);letter-spacing:.12em;color:#fff;text-shadow:0 0 8px #fff,0 0 26px #45f3ff,0 0 46px #ff4fd8;text-transform:uppercase;opacity:0;animation:devWordDrop 1.55s ease-in forwards;}
.dev-mode-active-animation span:nth-child(1){animation-delay:.05s}.dev-mode-active-animation span:nth-child(2){animation-delay:1.7s}.dev-mode-active-animation span:nth-child(3){animation-delay:3.35s}
@keyframes devWordDrop{0%{opacity:0;transform:translateY(-24vh) scale(.84)}22%{opacity:1;transform:translateY(0) scale(1.05)}55%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(46vh) scale(.72)}}
.theme-shop{width:min(920px,96vw)!important;margin-inline:auto!important;padding:8px!important;background:rgba(5,6,12,.66)!important;border:1px solid rgba(69,243,255,.22)!important;border-radius:8px!important;}
.theme-buttons{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important;width:100%!important;overflow:visible!important;}
.theme-buy{position:relative!important;width:100%!important;aspect-ratio:1/1!important;min-height:0!important;padding:0!important;display:grid!important;place-items:center!important;overflow:hidden!important;border:3px solid rgba(69,243,255,.5)!important;border-radius:9px!important;background-image:var(--theme-button-img)!important;background-size:cover!important;background-position:center!important;box-shadow:inset 0 0 22px rgba(0,0,0,.55),0 0 12px rgba(0,0,0,.45)!important;color:#fff!important;text-transform:uppercase!important;}
.theme-buy::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.62));z-index:0;}
.theme-buy.active{border-color:#ffd33d!important;box-shadow:0 0 18px rgba(255,211,61,.6),inset 0 0 22px rgba(0,0,0,.45)!important;}
.theme-buy.locked{filter:saturate(.65) brightness(.82)}
.theme-buy .theme-swatch{display:none!important;}
.theme-name{position:relative;z-index:2;font-size:clamp(.54rem,1.55vw,.86rem);font-weight:1000;letter-spacing:.04em;text-shadow:0 2px 0 #000,0 0 8px rgba(0,0,0,.9);}
.theme-status{position:absolute!important;left:4px;right:4px;bottom:4px;z-index:2;font-size:clamp(.42rem,1.1vw,.62rem);font-weight:1000;color:#ffd33d;text-shadow:0 1px 0 #000,0 0 7px rgba(0,0,0,.95);}
.theme-lock.locked-banner{position:absolute!important;z-index:4;left:-18%;right:-18%;top:50%;transform:translateY(-50%) rotate(-12deg);font-size:clamp(.48rem,1.3vw,.72rem);padding:.25em .3em;background:rgba(15,15,20,.9);color:#fff;border-top:2px solid rgba(255,255,255,.45);border-bottom:2px solid rgba(255,255,255,.45);box-shadow:0 0 12px rgba(0,0,0,.75);}
@media (max-width:720px){.theme-buttons{gap:5px!important}.theme-buy{border-width:2px!important}.theme-name{font-size:.47rem}.theme-status{font-size:.38rem;bottom:2px}.theme-lock.locked-banner{font-size:.38rem}}

/* Publish bugfix: theme cards should use real sprite images, not nested/background-only buttons */
.theme-buy.theme-card{
  position:relative!important;
  width:100%!important;
  aspect-ratio:1/1!important;
  min-height:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border:3px solid rgba(69,243,255,.5)!important;
  border-radius:9px!important;
  background:#080913!important;
  box-shadow:inset 0 0 22px rgba(0,0,0,.55),0 0 12px rgba(0,0,0,.45)!important;
  color:#fff!important;
  text-transform:uppercase!important;
}
.theme-buy.theme-card .theme-card-img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
  z-index:0!important;
  filter:saturate(1.08) contrast(1.04)!important;
}
.theme-buy.theme-card::before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.65))!important;
  z-index:1!important;
  pointer-events:none!important;
}
.theme-buy.theme-card.active{border-color:#ffd33d!important;box-shadow:0 0 18px rgba(255,211,61,.6),inset 0 0 22px rgba(0,0,0,.45)!important;}
.theme-buy.theme-card.locked .theme-card-img{filter:saturate(.55) brightness(.74) contrast(1.02)!important;}
.theme-buy.theme-card .theme-name{position:relative!important;z-index:2!important;font-size:clamp(.54rem,1.55vw,.86rem)!important;font-weight:1000!important;letter-spacing:.04em!important;text-shadow:0 2px 0 #000,0 0 8px rgba(0,0,0,.9)!important;}
.theme-buy.theme-card .theme-status{position:absolute!important;left:4px!important;right:4px!important;bottom:4px!important;z-index:2!important;font-size:clamp(.42rem,1.1vw,.62rem)!important;font-weight:1000!important;color:#ffd33d!important;text-shadow:0 1px 0 #000,0 0 7px rgba(0,0,0,.95)!important;}
.theme-buy.theme-card .theme-lock.locked-banner{position:absolute!important;z-index:4!important;left:-18%!important;right:-18%!important;top:50%!important;transform:translateY(-50%) rotate(-12deg)!important;font-size:clamp(.48rem,1.3vw,.72rem)!important;padding:.25em .3em!important;background:rgba(15,15,20,.9)!important;color:#fff!important;border-top:2px solid rgba(255,255,255,.45)!important;border-bottom:2px solid rgba(255,255,255,.45)!important;box-shadow:0 0 12px rgba(0,0,0,.75)!important;}
@media (max-width:720px){.theme-buy.theme-card{border-width:2px!important}.theme-buy.theme-card .theme-name{font-size:.47rem!important}.theme-buy.theme-card .theme-status{font-size:.38rem!important;bottom:2px!important}.theme-buy.theme-card .theme-lock.locked-banner{font-size:.38rem!important}}


/* Launch polish: merchant pile custom icon */
.merchant-button img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;}

/* Launch patch: tap-based 100-tap secret gem splash. */
.secret-gem-splash{
  position:fixed;
  z-index:510;
  width:22px;
  height:22px;
  object-fit:contain;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.35);
  filter:drop-shadow(0 0 9px rgba(255,211,61,.95));
  animation:secretGemSplash .88s cubic-bezier(.14,.78,.25,1) forwards;
}
@keyframes secretGemSplash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(90deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.35) rotate(420deg)}
}
.secret-gem-pop{
  position:fixed;
  z-index:511;
  pointer-events:none;
  color:#fff6a8;
  font:900 1.05rem/1 var(--font, system-ui, sans-serif);
  text-shadow:0 2px 0 #000,0 0 12px rgba(255,211,61,.95);
  transform:translate(-50%,-50%);
  animation:secretGemPop 1s ease-out forwards;
}
@keyframes secretGemPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  20%{opacity:1;transform:translate(-50%,-125%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-235%) scale(.9)}
}

/* Launch polish: mobile/desktop unified hero-tap secret feedback. */
.tile.hero.hero-secret-pressed{
  animation:heroSecretPress .22s cubic-bezier(.15,.9,.2,1) both;
}
@keyframes heroSecretPress{
  0%{transform:scale(1);filter:none;}
  38%{transform:scale(.88);filter:brightness(1.28) saturate(1.25) drop-shadow(0 0 12px rgba(255,211,61,.95));}
  100%{transform:scale(1);filter:none;}
}
.secret-gem-splash.hero-gem-splash{
  width:clamp(20px,4.2vw,34px);
  height:clamp(20px,4.2vw,34px);
  z-index:620;
}
.secret-gem-pop.hero-gem-pop{
  z-index:621;
  font-size:clamp(1rem,3.4vw,1.55rem);
}


/* Launch cleanup: the board itself should not use a repeating background image.
   Every visible cell paints its own theme floor sprite. */
.board{
  background:none!important;
  background-image:none!important;
}

/* iOS-safe dev mode final input: five taps instead of long press */
.splash-dev-tile.dev-hero-tap-pulse {
  animation: devHeroTapPulse .22s ease-out;
}
@keyframes devHeroTapPulse {
  0% { transform: scale(1); filter: brightness(1); }
  45% { transform: scale(.9); filter: brightness(1.35) drop-shadow(0 0 10px rgba(255,211,61,.85)); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Hardmode / frame / invincibility patch */
.hero-ability-overlay{font-size:.76rem!important;line-height:1.16!important;}
@media(max-width:520px){.hero-ability-overlay{font-size:.68rem!important;line-height:1.12!important;padding:6px!important;}.hero-card strong{font-size:.72rem!important}}
.hero-card.hero-frame-unlocked .hero-card-image::after,.hero-frame-overlay,.hero-frame-gameplay{content:'';position:absolute;inset:4px;border:3px solid #ffd33d;border-radius:6px;box-shadow:0 0 0 2px rgba(0,0,0,.85),0 0 14px rgba(255,211,61,.9),inset 0 0 14px rgba(255,211,61,.35);pointer-events:none;z-index:4;}
.tile.hero.hero-framed::before{content:'';position:absolute;inset:2px;border:3px solid #ffd33d;border-radius:4px;z-index:4;box-shadow:0 0 12px rgba(255,211,61,.9),inset 0 0 12px rgba(255,211,61,.35);pointer-events:none;}
.tile.hero.invincible-hero{animation:invincibleHeroPulse .75s ease-in-out infinite alternate!important;box-shadow:0 0 18px #ffd33d,0 0 36px rgba(255,211,61,.75)!important;}
.tile.hero.invincible-hero .hero-img{filter:brightness(1.25) saturate(1.35) drop-shadow(0 0 12px #ffd33d);}
.tile.hero.invincible-hero::after{content:'';position:absolute;inset:-14px;z-index:5;pointer-events:none;background:radial-gradient(circle,#fff 0 2px,transparent 3px),radial-gradient(circle,#ffd33d 0 2px,transparent 3px),radial-gradient(circle,#fff7a0 0 1px,transparent 2px);background-size:18px 18px,24px 24px,14px 14px;animation:invincibleSparks .55s linear infinite;mix-blend-mode:screen;}
@keyframes invincibleHeroPulse{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.08);filter:brightness(1.45)}}
@keyframes invincibleSparks{from{transform:scale(.88) rotate(0deg);opacity:.45}to{transform:scale(1.45) rotate(45deg);opacity:0}}
.invincible-spark{position:fixed;z-index:140;width:6px;height:6px;border-radius:50%;background:#fff6a0;box-shadow:0 0 10px #ffd33d,0 0 18px rgba(255,211,61,.9);pointer-events:none;transform:translate(-50%,-50%);animation:invincibleSparkFly .8s ease-out forwards;}
@keyframes invincibleSparkFly{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.1)}}
.target-cursor{outline:4px solid #fff!important;outline-offset:-6px;box-shadow:0 0 18px #fff,0 0 28px #45f3ff!important;animation:targetCursorPulse .7s ease-in-out infinite alternate;}
@keyframes targetCursorPulse{from{filter:brightness(1)}to{filter:brightness(1.65)}}

/* Patch: minimap invincibility code, lower combat stat placement, and gem reward burst. */
.game .combat-stats{
  top:auto!important;
  bottom:calc(max(126px, env(safe-area-inset-bottom) + 118px))!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:34!important;
}
.reward-result{min-height:3.2em!important;display:grid;place-items:center;}
.reward-big-number{
  display:inline-block;
  color:#ffd33d;
  font-weight:1000;
  font-size:clamp(2.6rem,14vw,7rem);
  letter-spacing:.04em;
  line-height:.92;
  text-shadow:0 0 8px #fff,0 0 22px #ffd33d,0 0 44px rgba(255,211,61,.85),0 .12em 0 rgba(70,38,0,.9);
  animation:rewardBigPop .7s cubic-bezier(.13,.9,.23,1.25) both;
}
@keyframes rewardBigPop{0%{opacity:0;transform:scale(.38) rotate(-4deg)}58%{opacity:1;transform:scale(1.18) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.treasure-gem-flyer{
  position:fixed;
  z-index:520;
  width:clamp(18px,5vw,46px);
  height:clamp(18px,5vw,46px);
  object-fit:contain;
  left:50%;
  top:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 8px #ffd33d) drop-shadow(0 0 18px rgba(255,211,61,.75));
  animation:treasureGemFly 1.55s cubic-bezier(.12,.72,.24,1) forwards;
}
@keyframes treasureGemFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(80deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.65) rotate(var(--rot))}
}
.treasure-center-spark{
  position:fixed;
  z-index:519;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fff6a0;
  box-shadow:0 0 8px #fff,0 0 16px #ffd33d,0 0 28px rgba(255,211,61,.8);
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:treasureCenterSpark 1.05s ease-out forwards;
}
@keyframes treasureCenterSpark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.08)}
}

/* Patch: visible code-entry press feedback + remove retired gear UI. */
.gear-subpanel,
.gear-slots,
.gear-slot,
#gearSlots{display:none!important;}
.secret-press-feedback{
  animation:secretPressButton .42s cubic-bezier(.18,.85,.25,1.18)!important;
  box-shadow:0 0 0 4px #fff,0 0 18px #45f3ff,0 0 34px #ffd33d!important;
  filter:brightness(1.6) saturate(1.45)!important;
}
@keyframes secretPressButton{
  0%{transform:scale(1)}
  35%{transform:scale(.88)}
  72%{transform:scale(1.12)}
  100%{transform:scale(1)}
}
.secret-press-label{
  position:fixed;
  z-index:20000;
  transform:translate(-50%,-50%);
  pointer-events:none;
  color:#fff;
  background:rgba(0,0,0,.72);
  border:2px solid #ffd33d;
  border-radius:999px;
  padding:.18rem .42rem;
  font-weight:1000;
  font-size:.72rem;
  letter-spacing:.06em;
  text-shadow:0 0 6px #45f3ff,0 0 12px #ffd33d;
  animation:secretPressLabel .52s ease-out forwards;
}
@keyframes secretPressLabel{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  20%{opacity:1;transform:translate(-50%,-64%) scale(1.05)}
  100%{opacity:0;transform:translate(-50%,-118%) scale(.85)}
}
.inventory-slot.secret-only-slot{
  opacity:.55;
  outline:1px dashed rgba(255,211,61,.38);
}
.inventory-slot.empty .slot-number{
  color:rgba(255,255,255,.36);
  font-weight:1000;
  font-size:.8rem;
}
#miniMap.secret-press-feedback{transform-origin:center;}


/* Patch: Arcade merchant limit/reset, centered bottom UI, and larger invincibility trail. */
.player-row-extended,
.player-row,
.player-subpanel,
.mount-subpanel,
.hearts-subpanel,
.inventory-subpanel{
  align-items:center!important;
  justify-items:center!important;
  text-align:center!important;
}
.mount-subpanel,
.hearts-subpanel,
.inventory-subpanel{
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
}
.mount-slot,
.heart-track,
.inventory-dock{
  margin-left:auto!important;
  margin-right:auto!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
}
.inventory-dock{justify-items:center!important;}
.game .combat-stats{
  top:auto!important;
  bottom:calc(112px + env(safe-area-inset-bottom))!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:34!important;
}
@media(max-width:900px){
  .game .combat-stats{bottom:calc(178px + env(safe-area-inset-bottom))!important;}
}
.tile.hero.invincible-hero::after{
  inset:-32px!important;
  background-size:26px 26px,34px 34px,20px 20px!important;
  animation:invincibleSparksWide .62s linear infinite!important;
}
@keyframes invincibleSparksWide{from{transform:scale(.75) rotate(0deg);opacity:.55}to{transform:scale(1.9) rotate(60deg);opacity:0}}
.invincible-spark{
  width:8px!important;
  height:8px!important;
  animation:invincibleSparkFlyWide 1.15s ease-out forwards!important;
}
.invincible-trail-spark{
  width:6px!important;
  height:6px!important;
  background:#fff3ad!important;
  opacity:.9!important;
}
@keyframes invincibleSparkFlyWide{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}
  100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.08)}
}

/* Patch: global arcade physics pass */
.physics-spark{position:fixed;z-index:230;width:7px;height:7px;border-radius:50%;background:#ffe477;box-shadow:0 0 10px #ffd33d,0 0 20px rgba(255,211,61,.8);pointer-events:none;transform:translate(-50%,-50%);animation:physicsSparkFly 1.05s ease-out forwards}.physics-spark.physics-monster,.physics-spark.physics-boss{background:#ff4d4d;box-shadow:0 0 12px #ff1515,0 0 22px rgba(255,0,0,.75)}.physics-spark.physics-trap{background:#ff8a00;box-shadow:0 0 12px #ff4500,0 0 24px rgba(255,50,0,.8)}@keyframes physicsSparkFly{0%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}70%{opacity:.95}100%{opacity:0;transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) scale(.08)}}
.physics-gem{position:fixed;z-index:232;width:26px;height:26px;object-fit:cover;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 0 10px rgba(255,211,61,.9));animation:physicsGemBurst 1.25s cubic-bezier(.2,.75,.18,1) forwards}@keyframes physicsGemBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.7) rotate(0)}42%{opacity:1;transform:translate(calc(-50% + var(--gx)*.55),calc(-50% + var(--gy)*.55 - 28px)) scale(1.05) rotate(calc(var(--gr)*.45))}100%{opacity:0;transform:translate(calc(-50% + var(--gx)),calc(-50% + var(--gy))) scale(.25) rotate(var(--gr))}}
.physics-fairy{position:fixed;z-index:234;width:36px;height:36px;object-fit:contain;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 0 14px rgba(255,245,150,.95));animation:physicsFairyFly 1.35s cubic-bezier(.18,.82,.25,1) forwards}@keyframes physicsFairyFly{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}18%{opacity:1}72%{opacity:1;transform:translate(calc(-50% + var(--fx)*.72),calc(-50% + var(--fy)*.72)) scale(1.15) rotate(16deg)}100%{opacity:0;transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy) - 34px)) scale(.45) rotate(-22deg)}}
.fairy-trail-spark{position:fixed;z-index:233;width:5px;height:5px;border-radius:50%;background:#fff7a8;box-shadow:0 0 8px #fff7a8,0 0 16px rgba(255,211,61,.7);pointer-events:none;transform:translate(-50%,-50%);animation:fairyTrailArc 1.05s ease-out forwards}@keyframes fairyTrailArc{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(0)}}

/* Patch: hero frame image asset and fountain-only fairy physics. */
.hero-card.hero-frame-unlocked .hero-card-image::after,
.hero-frame-overlay,
.hero-frame-gameplay,
.tile.hero.hero-framed::before{
  border:0!important;
  box-shadow:none!important;
  background-image:url('../assets/ui/hero-frame.png')!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  pointer-events:none!important;
}
.hero-card.hero-frame-unlocked .hero-card-image::after,
.hero-frame-overlay{inset:-2px!important;z-index:7!important;}
.hero-frame-gameplay{position:absolute!important;inset:-4px!important;z-index:7!important;}
.tile.hero.hero-framed::before{content:''!important;position:absolute!important;inset:-4px!important;z-index:7!important;}
.fountain-hover-fairy{display:none!important;}
.fairy-flyer{display:none!important;}
.fountain-physics-fairy{
  position:fixed;
  z-index:234;
  width:42px;
  height:42px;
  object-fit:contain;
  pointer-events:none;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 14px rgba(255,245,150,.98));
  animation:fountainFairyToHearts 2.25s cubic-bezier(.16,.82,.23,1) forwards;
}
@keyframes fountainFairyToHearts{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.28) rotate(var(--phase));}
  12%{opacity:1;transform:translate(calc(-50% + var(--orbit)),calc(-50% - var(--orbit)*.25)) scale(1) rotate(calc(var(--phase) + 90deg));}
  42%{opacity:1;transform:translate(calc(-50% + var(--hx)*.42 - var(--orbit)*.75),calc(-50% + var(--hy)*.42 + var(--orbit)*.32)) scale(1.16) rotate(calc(var(--phase) + 220deg));}
  72%{opacity:1;transform:translate(calc(-50% + var(--hx)*.78 + var(--orbit)*.34),calc(-50% + var(--hy)*.78 - var(--orbit)*.22)) scale(.9) rotate(calc(var(--phase) + 430deg));}
  100%{opacity:0;transform:translate(calc(-50% + var(--hx)),calc(-50% + var(--hy))) scale(.25) rotate(calc(var(--phase) + 620deg));}
}
.fountain-fairy-trail-spark{
  position:fixed;
  z-index:233;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff7a8;
  box-shadow:0 0 8px #fff7a8,0 0 18px rgba(255,211,61,.78);
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:fountainFairyTrailToHearts 1.75s ease-out forwards;
}
@keyframes fountainFairyTrailToHearts{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  22%{opacity:1;transform:translate(calc(-50% + var(--tx)*.22),calc(-50% + var(--ty)*.22)) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(0)}
}


/* Patch: hero shop gem counter stays in the hero-select shop, not fixed to viewport. */
#heroSelect .hero-shop-gems,
.hero-select .hero-shop-gems,
.meta-shop-inline .hero-shop-gems{
  position:static!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  z-index:auto!important;
  display:inline-flex!important;
  justify-content:center!important;
  align-items:center!important;
  margin:0 auto!important;
}

/* Patch: combat stats live in the intentional gap between board and player panel. */
.game .combat-stats{
  position:fixed!important;
  top:auto!important;
  bottom:calc(134px + env(safe-area-inset-bottom))!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:34!important;
}
@media(max-width:900px){
  .game .combat-stats{bottom:calc(192px + env(safe-area-inset-bottom))!important;}
}

/* Patch: physics-based Arcade stairs descent toward the exit. */
.tile.hero.hero-stairs-physics{
  z-index:90!important;
  animation:heroStairsPhysics 1.85s cubic-bezier(.16,.78,.22,1) forwards!important;
  transform-origin:center center!important;
}
@keyframes heroStairsPhysics{
  0%{transform:translate(0,0) scale(1) rotate(0deg);filter:brightness(1)}
  18%{transform:translate(calc(var(--stairs-dx) * .08),calc(var(--stairs-dy) * .08 - 22px)) scale(1.18) rotate(-8deg);filter:brightness(1.45) drop-shadow(0 0 14px #ffd33d)}
  58%{transform:translate(calc(var(--stairs-dx) * .55),calc(var(--stairs-dy) * .55)) scale(.82) rotate(180deg);filter:brightness(1.1) drop-shadow(0 0 18px #45f3ff)}
  100%{transform:translate(var(--stairs-dx),var(--stairs-dy)) scale(.15) rotate(540deg);opacity:0;filter:brightness(.6)}
}
.stairs-physics-spark{
  position:fixed;z-index:89;width:8px;height:8px;border-radius:50%;
  background:#45f3ff;box-shadow:0 0 10px #45f3ff,0 0 20px rgba(255,211,61,.75);
  pointer-events:none;transform:translate(-50%,-50%);
  animation:stairsSparkFly 1.15s ease-out forwards;
}
@keyframes stairsSparkFly{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.05)}
}

/* Patch: hero-unlock activation feedback and clean 3-panel bottom HUD. */
.hero-card.ready-unlock{
  filter:none!important;
  border-color:#ffd33d!important;
  box-shadow:0 0 18px rgba(255,211,61,.55),0 0 34px rgba(69,243,255,.2)!important;
}
.hero-card.ready-unlock::before{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:12px;
  padding:3px;
  background:conic-gradient(from var(--unlock-spin,0deg), transparent 0 12%, #ffd33d 18%, #fff7a8 24%, transparent 32% 56%, #45f3ff 64%, #ffd33d 72%, transparent 82% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:readyUnlockOrbit 1.15s linear infinite;
  pointer-events:none;
  z-index:8;
}
.hero-card.ready-unlock .hero-card-image img{filter:brightness(.9) saturate(1.2)!important;}
.hero-card.ready-unlock .locked-banner{color:#fff!important;text-shadow:0 0 8px #ffd33d!important;}
.hero-card.ready-unlock .hero-ability-overlay i{display:block!important;color:#ffd33d!important;font-weight:1000!important;}
@property --unlock-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes readyUnlockOrbit{to{--unlock-spin:360deg}}
.hero-card.hero-unlock-press{
  animation:heroUnlockButtonPress .72s cubic-bezier(.15,.88,.25,1) both!important;
  z-index:20;
}
@keyframes heroUnlockButtonPress{
  0%{transform:translateY(0) scale(1);filter:brightness(1)}
  18%{transform:translateY(5px) scale(.94);filter:brightness(1.25)}
  52%{transform:translateY(-7px) scale(1.08);filter:brightness(1.55) saturate(1.45)}
  100%{transform:translateY(0) scale(1);filter:brightness(1)}
}
.hero-unlock-side-spark{
  position:fixed;
  z-index:9002;
  width:9px;
  height:9px;
  border-radius:50%;
  pointer-events:none;
  background:#fff1a8;
  box-shadow:0 0 8px #fff,0 0 15px #ffd33d,0 0 28px rgba(255,211,61,.8);
  transform:translate(-50%,-50%) scale(.3);
  animation:heroUnlockSideSpark 1.04s cubic-bezier(.12,.72,.28,1) forwards;
}
@keyframes heroUnlockSideSpark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.4) rotate(55deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--ux)),calc(-50% + var(--uy))) scale(.1) rotate(760deg)}
}
.bottom-hud.player-panel{
  display:flex!important;
  justify-content:center!important;
  align-items:flex-end!important;
  padding-left:max(10px,env(safe-area-inset-left))!important;
  padding-right:max(10px,env(safe-area-inset-right))!important;
}
#healthDock.health-zone{
  width:min(760px,96vw)!important;
  margin:0 auto!important;
  display:grid!important;
  place-items:center!important;
}
.player-row-extended{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(8px,2vw,16px)!important;
  justify-items:center!important;
  align-items:stretch!important;
}
.player-row-extended > .player-subpanel{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  text-align:center!important;
}
.mount-subpanel,.hearts-subpanel,.inventory-subpanel{
  grid-column:auto!important;
}
.gear-subpanel,.gear-slots,.gear-slot,#gearSlots{
  display:none!important;
  width:0!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}
@media(max-width:900px){
  .player-row-extended{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media(max-width:420px){
  .player-row-extended{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;}
}

/* Patch: responsive bottom HUD final layout and theme unlock polish. */
:root{
  --pdq-player-panel-h:clamp(92px,15vw,136px);
  --pdq-combat-gap:clamp(6px,1.4vw,12px);
}
.bottom-hud.player-panel{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  height:calc(var(--pdq-player-panel-h) + env(safe-area-inset-bottom))!important;
  min-height:0!important;
  padding:clamp(6px,1.5vw,12px) max(8px,env(safe-area-inset-right)) calc(clamp(6px,1.5vw,12px) + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  gap:0!important;
}
#healthDock.health-zone{
  width:min(96vw,clamp(340px,72vw,780px))!important;
  height:100%!important;
  margin:0 auto!important;
  padding:clamp(5px,1.2vw,10px)!important;
  display:grid!important;
  place-items:center!important;
}
.player-row-extended{
  width:100%!important;
  height:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(5px,1.4vw,14px)!important;
  justify-items:center!important;
  align-items:center!important;
}
.player-row-extended > .player-subpanel,
.mount-subpanel,
.hearts-subpanel,
.inventory-subpanel{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:clamp(3px,1vw,8px)!important;
}
.player-subpanel strong{
  font-size:clamp(.48rem,1.5vw,.74rem)!important;
  line-height:1!important;
  margin:0!important;
}
.mount-slot{
  width:clamp(34px,8vw,56px)!important;
  height:clamp(34px,8vw,56px)!important;
}
.heart-track{min-height:auto!important;gap:clamp(2px,.8vw,6px)!important;justify-content:center!important;align-items:center!important;}
.heart-row{display:flex!important;justify-content:center!important;align-items:center!important;gap:clamp(2px,.6vw,5px)!important;}
.heart{width:clamp(20px,5.6vw,38px)!important;height:clamp(20px,5.6vw,38px)!important;}
.inventory-dock{min-height:auto!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:clamp(3px,1vw,7px)!important;}
.inventory-item,.inventory-slot{width:clamp(30px,7vw,50px)!important;height:clamp(30px,7vw,50px)!important;}
.gear-subpanel,.gear-slots,.gear-slot,#gearSlots,.player-row-extended > *:empty{display:none!important;}
.game .combat-stats{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:calc(var(--pdq-player-panel-h) + env(safe-area-inset-bottom) + var(--pdq-combat-gap))!important;
  transform:translateX(-50%)!important;
  width:min(48vw,260px)!important;
  min-height:0!important;
  padding:clamp(3px,.9vw,7px) clamp(5px,1.2vw,10px)!important;
  gap:clamp(4px,1.2vw,9px)!important;
  z-index:35!important;
}
.combat-stat{min-width:clamp(36px,10vw,62px)!important;padding:clamp(2px,.8vw,6px)!important;}
.combat-stat img{width:clamp(19px,5.2vw,32px)!important;height:clamp(19px,5.2vw,32px)!important;}
.combat-stat b{font-size:clamp(.82rem,3.2vw,1.25rem)!important;}
@media(max-width:520px){
  :root{--pdq-player-panel-h:clamp(106px,25vw,156px);--pdq-combat-gap:6px;}
  #healthDock.health-zone{width:98vw!important;}
  .player-row-extended{gap:4px!important;}
  .game .combat-stats{width:min(72vw,260px)!important;}
}
.theme-buy.theme-unlock-press{animation:themeUnlockPress .72s cubic-bezier(.15,.82,.28,1) both!important;}
@keyframes themeUnlockPress{
  0%{transform:scale(1);filter:brightness(1)}
  22%{transform:scale(.9);filter:brightness(1.25)}
  58%{transform:scale(1.14);filter:brightness(1.8) drop-shadow(0 0 18px #ffd33d)}
  100%{transform:scale(1);filter:brightness(1)}
}

/* Patch: movement polish, swipe-friendly inventory, and wavy ghost physics. */
.tile.hero-slide .tile-content{
  animation:heroSlideTile .17s cubic-bezier(.22,.86,.22,1) both!important;
  will-change:transform;
}
@keyframes heroSlideTile{
  0%{transform:translate(var(--hero-slide-x),var(--hero-slide-y)) scale(.96);filter:drop-shadow(0 0 0 rgba(255,211,61,0))}
  55%{transform:translate(calc(var(--hero-slide-x)*.16),calc(var(--hero-slide-y)*.16)) scale(1.04);filter:drop-shadow(0 0 12px rgba(255,211,61,.45))}
  100%{transform:translate(0,0) scale(1);filter:none}
}
#inventoryDock.inventory-dock,.inventory-dock{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(38px,1fr))!important;
  grid-auto-flow:column!important;
  grid-auto-columns:minmax(38px,1fr)!important;
  grid-auto-rows:auto!important;
  width:min(210px,34vw)!important;
  max-width:100%!important;
  gap:clamp(4px,1vw,8px)!important;
  justify-content:center!important;
  justify-items:center!important;
  align-items:center!important;
  overflow:visible!important;
  flex-wrap:nowrap!important;
}
#inventoryDock .inventory-slot,#inventoryDock .inventory-item{
  width:clamp(36px,8vw,54px)!important;
  height:clamp(36px,8vw,54px)!important;
  min-width:0!important;
}
@media(max-width:420px){
  #inventoryDock.inventory-dock,.inventory-dock{width:min(168px,42vw)!important;gap:3px!important;}
  #inventoryDock .inventory-slot,#inventoryDock .inventory-item{width:clamp(32px,10vw,44px)!important;height:clamp(32px,10vw,44px)!important;}
}
.ghost-fx{
  will-change:transform,opacity,left,top!important;
  filter:drop-shadow(0 0 20px rgba(210,230,255,.7)) drop-shadow(0 0 34px rgba(150,205,255,.32))!important;
}
.ghost-flyby{
  animation:ghostWavyFlyby 5.6s cubic-bezier(.2,.72,.27,1) forwards!important;
}
@keyframes ghostWavyFlyby{
  0%{transform:translate(var(--from-x),0) scaleX(var(--ghost-scale,1)) scale(.72) rotate(-4deg);opacity:0}
  12%{opacity:.72}
  22%{transform:translate(calc(var(--from-x) + 26vw),-24px) scaleX(var(--ghost-scale,1)) scale(.92) rotate(5deg)}
  40%{transform:translate(calc(var(--from-x) + 48vw),22px) scaleX(var(--ghost-scale,1)) scale(1.02) rotate(-6deg);opacity:.62}
  62%{transform:translate(calc(var(--from-x) + 72vw),-18px) scaleX(var(--ghost-scale,1)) scale(.96) rotate(4deg);opacity:.5}
  82%{transform:translate(calc(var(--from-x) + 96vw),18px) scaleX(var(--ghost-scale,1)) scale(1.05) rotate(-3deg);opacity:.3}
  100%{transform:translate(var(--to-x),-10px) scaleX(var(--ghost-scale,1)) scale(.78) rotate(3deg);opacity:0}
}
.ghost-hover-player{
  opacity:.48!important;
  animation:ghostWavyOrbitPlayer 2.6s ease-in-out infinite!important;
  transform-origin:center center!important;
}
@keyframes ghostWavyOrbitPlayer{
  0%{transform:translate(-50%,-50%) translate(42px,-6px) scale(.78) rotate(-7deg);filter:drop-shadow(0 0 18px rgba(215,230,255,.55))}
  25%{transform:translate(-50%,-50%) translate(14px,-44px) scale(.94) rotate(8deg)}
  50%{transform:translate(-50%,-50%) translate(-44px,4px) scale(.84) rotate(-10deg);filter:drop-shadow(0 0 30px rgba(255,255,255,.82))}
  75%{transform:translate(-50%,-50%) translate(-12px,38px) scale(1) rotate(9deg)}
  100%{transform:translate(-50%,-50%) translate(42px,-6px) scale(.78) rotate(-7deg);filter:drop-shadow(0 0 18px rgba(215,230,255,.55))}
}

/* Final publish polish: center the bottom Mount / Health / Inventory cluster. */
.bottom-hud.player-panel{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:100vw!important;
  right:0!important;
  padding-left:max(8px,env(safe-area-inset-left))!important;
  padding-right:max(8px,env(safe-area-inset-right))!important;
}
#healthDock.health-zone{
  width:min(94vw,620px)!important;
  margin-inline:auto!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  overflow:visible!important;
}
#healthDock .player-row-extended{
  width:auto!important;
  max-width:100%!important;
  display:grid!important;
  grid-template-columns:clamp(68px,16vw,112px) clamp(112px,25vw,188px) clamp(132px,31vw,202px)!important;
  justify-content:center!important;
  justify-items:center!important;
  align-items:center!important;
  gap:clamp(8px,2.2vw,20px)!important;
  margin-inline:auto!important;
}
#healthDock .player-subpanel,
#healthDock .mount-subpanel,
#healthDock .hearts-subpanel,
#healthDock .inventory-subpanel{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  display:grid!important;
  grid-template-rows:auto 1fr!important;
  place-items:center!important;
  justify-items:center!important;
  align-items:center!important;
  align-content:center!important;
  text-align:center!important;
  overflow:visible!important;
}
#healthDock .player-subpanel strong{
  justify-self:center!important;
  text-align:center!important;
  width:100%!important;
}
#healthDock .mount-slot{
  justify-self:center!important;
  align-self:center!important;
  margin:0 auto!important;
}
#healthDock .heart-track{
  justify-self:center!important;
  align-self:center!important;
  margin:0 auto!important;
  display:grid!important;
  place-items:center!important;
}
#healthDock .heart-row{
  justify-content:center!important;
  align-items:center!important;
  margin:0 auto!important;
}
#healthDock .inventory-dock{
  justify-self:center!important;
  align-self:center!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,clamp(30px,7vw,46px))!important;
  grid-auto-rows:clamp(30px,7vw,46px)!important;
  justify-content:center!important;
  justify-items:center!important;
  align-items:center!important;
  gap:clamp(4px,1vw,8px)!important;
  width:max-content!important;
  max-width:100%!important;
  flex-wrap:nowrap!important;
}
#healthDock .inventory-slot,
#healthDock .inventory-item{
  width:clamp(30px,7vw,46px)!important;
  height:clamp(30px,7vw,46px)!important;
}
.game .combat-stats{
  bottom:calc(var(--pdq-player-panel-h) + env(safe-area-inset-bottom) + clamp(6px,1.5vw,12px))!important;
}
@media(max-width:420px){
  #healthDock.health-zone{width:98vw!important;padding-left:4px!important;padding-right:4px!important;}
  #healthDock .player-row-extended{
    grid-template-columns:clamp(56px,17vw,72px) clamp(96px,29vw,128px) clamp(116px,36vw,148px)!important;
    gap:4px!important;
  }
  #healthDock .inventory-dock{grid-template-columns:repeat(3,clamp(28px,9vw,38px))!important;grid-auto-rows:clamp(28px,9vw,38px)!important;gap:3px!important;}
  #healthDock .inventory-slot,#healthDock .inventory-item{width:clamp(28px,9vw,38px)!important;height:clamp(28px,9vw,38px)!important;}
}


/* Patch: force the same smooth hero slide path in Classic, Arcade, and Hardmode. */
body[data-game-mode="classic"] .tile.hero-slide .tile-content,
body[data-game-mode="arcade"] .tile.hero-slide .tile-content,
body[data-game-mode="hardmode"] .tile.hero-slide .tile-content{
  animation:heroSlideTile .17s cubic-bezier(.22,.86,.22,1) both!important;
  will-change:transform,filter;
}
body[data-game-mode="arcade"] .tile.hero-slide .hero-img,
body[data-game-mode="hardmode"] .tile.hero-slide .hero-img,
body[data-game-mode="classic"] .tile.hero-slide .hero-img{
  transform:translateZ(0);
}

/* Swipe fix: full game gesture surface */
body, #app, #game, .game { overscroll-behavior: none; }
#game, .game { touch-action: none; }

/* Patch: inventory taps should win over global swipe capture. */
#inventoryDock, #inventoryDock *, .inventory-subpanel, .inventory-subpanel *{
  touch-action: manipulation!important;
  pointer-events: auto!important;
}

/* Patch: HARDMODE mood layer. */
body[data-game-mode="hardmode"] .board-wrap{
  position:relative;
  overflow:hidden;
}
body[data-game-mode="hardmode"] .board-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:8;
  background:radial-gradient(circle at 50% 48%, transparent 42%, rgba(0,0,0,.26) 69%, rgba(25,0,0,.56) 100%);
  mix-blend-mode:multiply;
}
body[data-game-mode="hardmode"]::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:18;
  box-shadow:inset 0 0 58px rgba(110,0,0,.44), inset 0 0 120px rgba(0,0,0,.62);
}
.hardmode-edge-flame{
  position:fixed;
  z-index:19;
  width:clamp(10px,2.4vw,24px);
  height:clamp(16px,4vw,42px);
  border-radius:70% 30% 70% 30%;
  background:radial-gradient(circle at 45% 70%, rgba(255,170,60,.62), rgba(160,18,12,.48) 43%, rgba(40,0,0,0) 74%);
  filter:blur(.4px) saturate(.65) drop-shadow(0 0 8px rgba(150,20,0,.42));
  opacity:.62;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(var(--fs,1));
  animation:hardmodeFlameDrift 1.65s cubic-bezier(.2,.8,.2,1) forwards;
}
.hardmode-red-spark{
  position:fixed;
  z-index:20;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#b51616;
  box-shadow:0 0 7px rgba(255,34,20,.75),0 0 14px rgba(100,0,0,.5);
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:hardmodeSparkDrift 1.35s ease-out forwards;
}
@keyframes hardmodeFlameDrift{
  0%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--fs,1)*.55)) rotate(-8deg)}
  22%{opacity:.72}
  100%{opacity:0;transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(calc(var(--fs,1)*1.15)) rotate(22deg)}
}
@keyframes hardmodeSparkDrift{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  18%{opacity:.85}
  100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.1)}
}

/* Patch: gem revive choice on death screen. */
.revive-hero-btn{
  border:3px solid #ffd33d;
  border-radius:10px;
  background:linear-gradient(180deg,#2a1600,#070300);
  color:#ffd33d;
  cursor:pointer;
  font-weight:900;
  font-size:clamp(1rem,4vw,2.05rem);
  letter-spacing:.06em;
  padding:.45em .85em;
  text-shadow:0 0 7px rgba(255,211,61,.85);
  box-shadow:0 0 20px rgba(255,211,61,.28), inset 0 0 18px rgba(255,211,61,.12);
}
.revive-hero-btn:disabled{
  opacity:.38;
  filter:grayscale(1);
  cursor:not-allowed;
}
.revive-gem-spark{
  position:fixed;
  z-index:150;
  width:9px;
  height:9px;
  border-radius:50%;
  pointer-events:none;
  background:#45f3ff;
  box-shadow:0 0 8px #45f3ff,0 0 18px rgba(69,243,255,.7);
  transform:translate(-50%,-50%);
  animation:reviveGemSpark 1.05s ease-out forwards;
}
@keyframes reviveGemSpark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
  14%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--rx)),calc(-50% + var(--ry))) scale(.1) rotate(420deg)}
}

/* Boss soft-lock fix polish: physics henchmen summon. */
.boss-henchman-runner.physics-henchman{
  z-index:170;
  animation:bossHenchmanPhysics 1.08s cubic-bezier(.16,.74,.13,1) forwards;
  transform-origin:center;
  filter:drop-shadow(0 0 20px rgba(255,32,32,.95)) drop-shadow(0 0 10px rgba(255,211,61,.55)) saturate(1.55) brightness(1.15);
}
@keyframes bossHenchmanPhysics{
  0%{opacity:0;transform:translate(-50%,-50%) translate(0,0) scale(.4) rotate(-24deg)}
  12%{opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(1.18) rotate(10deg)}
  54%{opacity:1;transform:translate(calc(-50% + var(--dx)*.58),calc(-50% + var(--dy)*.58 + var(--arc))) scale(1.02) rotate(-18deg)}
  82%{opacity:1;transform:translate(calc(-50% + var(--dx)*.92),calc(-50% + var(--dy)*.92)) scale(.74) rotate(14deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.32) rotate(34deg)}
}
.boss-henchman-spark{
  position:fixed;
  z-index:169;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff3b20;
  pointer-events:none;
  transform:translate(-50%,-50%);
  box-shadow:0 0 9px #ff2d00,0 0 16px rgba(255,211,61,.7);
  animation:bossHenchmanSpark 1s ease-out forwards;
}
@keyframes bossHenchmanSpark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0)}
}


/* Patch: lock page scrolling only while actively playing, so swipe movement never drags the page. */
html.game-playing,
body.game-playing{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.game-playing{
  touch-action:none!important;
}
#inventoryDock, #inventoryDock *, .inventory-subpanel, .inventory-subpanel *, dialog, dialog *{
  touch-action:manipulation!important;
}

/* Boss fight cinematic moment: all modes */
body.boss-encounter-active .board-wrap{
  transform:scale(1.045);
  transform-origin:center center;
  transition:transform .55s cubic-bezier(.2,.85,.2,1), filter .55s ease;
  filter:saturate(1.15) contrast(1.08);
}
body.boss-encounter-active .board-wrap::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:45;
  pointer-events:none;
  background:radial-gradient(circle at center, transparent 34%, rgba(0,0,0,.42) 72%, rgba(70,0,0,.64) 100%);
  mix-blend-mode:multiply;
  animation:bossViewportVignette 1.65s ease-in-out infinite alternate;
}
@keyframes bossViewportVignette{
  from{opacity:.55;filter:blur(0)}
  to{opacity:.82;filter:blur(.7px)}
}
body.boss-encounter-active::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:42;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 50%, rgba(255,45,0,.22), transparent 24%),
    radial-gradient(ellipse at 82% 52%, rgba(255,95,0,.18), transparent 24%),
    radial-gradient(ellipse at 50% 0%, rgba(120,0,0,.22), transparent 22%),
    radial-gradient(ellipse at 50% 100%, rgba(120,0,0,.28), transparent 28%);
  mix-blend-mode:screen;
  animation:bossEdgeFlamePulse 1.1s ease-in-out infinite alternate;
}
@keyframes bossEdgeFlamePulse{
  from{opacity:.34;filter:blur(10px) saturate(1.2)}
  to{opacity:.72;filter:blur(5px) saturate(1.65)}
}
body.boss-intro-active .tile{filter:brightness(.72) saturate(.85)}
body.boss-intro-active .tile.boss-stack{filter:brightness(1.5) saturate(1.55)!important;z-index:10;}
.boss-reveal-moment{
  animation:bossRevealMoment 1.55s cubic-bezier(.13,.8,.17,1) both!important;
}
@keyframes bossRevealMoment{
  0%{transform:scale(.35) rotate(-10deg);filter:brightness(3) saturate(2.4);box-shadow:0 0 0 0 rgba(255,0,0,.0)}
  20%{transform:scale(1.65) rotate(4deg);filter:brightness(2.3) saturate(2);box-shadow:0 0 34px 14px rgba(255,30,0,.9)}
  48%{transform:scale(1.22) rotate(-3deg);filter:brightness(1.65) saturate(1.6);box-shadow:0 0 28px 8px rgba(255,211,61,.75)}
  100%{transform:scale(1);filter:brightness(1.15) saturate(1.25);box-shadow:0 0 18px 4px rgba(255,0,0,.58)}
}
.boss-reveal-spark{
  position:fixed;
  z-index:172;
  width:8px;
  height:8px;
  border-radius:50%;
  pointer-events:none;
  background:#ff2a12;
  box-shadow:0 0 12px #ff0000,0 0 24px rgba(255,211,61,.75);
  transform:translate(-50%,-50%);
  animation:bossRevealSpark 1.25s ease-out forwards;
}
@keyframes bossRevealSpark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.45)}
  100%{opacity:0;transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(.05)}
}
body.boss-intro-active .boss-henchman-runner.physics-henchman{
  animation-duration:1.55s;
  filter:drop-shadow(0 0 28px rgba(255,32,32,1)) drop-shadow(0 0 16px rgba(255,211,61,.85)) saturate(1.8) brightness(1.25);
}

/* Stronger HARDMODE mood layer */
body[data-game-mode="hardmode"] .board-wrap::after{
  opacity:.92!important;
  background:radial-gradient(circle at center, transparent 22%, rgba(0,0,0,.52) 61%, rgba(70,0,0,.82) 100%)!important;
}
body[data-game-mode="hardmode"]::before{
  opacity:.88!important;
  box-shadow:inset 0 0 80px rgba(120,0,0,.62), inset 0 0 190px rgba(0,0,0,.92)!important;
}
body[data-game-mode="hardmode"] .hardmode-edge-flame{
  opacity:.8;
  filter:blur(.2px) saturate(1.35) brightness(.9);
}
body[data-game-mode="hardmode"] .hardmode-red-spark{
  width:7px!important;
  height:7px!important;
  opacity:.95;
  box-shadow:0 0 12px rgba(255,0,0,.95),0 0 26px rgba(255,60,0,.72)!important;
}

/* Input safety: cinematic/vignette layers must never intercept taps/swipes. */
.board-wrap::before,
.board-wrap::after,
body::before,
body::after,
.boss-reveal-spark,
.boss-henchman-spark,
.boss-henchman-runner,
.hardmode-edge-flame,
.hardmode-red-spark{
  pointer-events:none!important;
}

/* Separate normal monster alert from Boss-stack presentation. */
.tile.enemy-alert:not(.boss-stack){
  outline:2px solid rgba(255,96,96,.78)!important;
  outline-offset:-3px!important;
  box-shadow:0 0 10px rgba(255,71,71,.5), inset 0 0 10px rgba(255,71,71,.16)!important;
  animation:enemyPulse .8s infinite alternate!important;
}
.tile.enemy-alert:not(.boss-stack) .tile-content{
  transform-origin:center;
}
.tile.boss-stack{
  outline:3px solid rgba(255,35,20,.92)!important;
  outline-offset:-4px!important;
  box-shadow:0 0 0 2px rgba(0,0,0,.8),0 0 24px rgba(255,0,0,.68), inset 0 0 20px rgba(255,60,0,.2)!important;
}
.tile.enemy-alert:not(.boss-stack).boss-reveal-moment{
  animation:enemyPulse .8s infinite alternate!important;
}

/* Hotfix: Boss cinematic is visual only and can never block input. */
body.boss-encounter-active::before,
body.boss-encounter-active::after,
body.boss-intro-active::before,
body.boss-intro-active::after,
body.hardmode-flames-active::before,
body.hardmode-flames-active::after,
.board-wrap::before,
.board-wrap::after,
.boss-reveal-spark,
.boss-henchman-spark,
.boss-henchman-runner,
.hardmode-edge-flame,
.hardmode-red-spark{
  pointer-events:none!important;
}
body.boss-intro-active .tile{filter:none!important;}
body.boss-intro-active .tile.boss-stack{filter:brightness(1.22) saturate(1.22)!important;}
.tile.boss-stack{
  outline:2px solid rgba(255,56,38,.86)!important;
  outline-offset:-3px!important;
  box-shadow:0 0 12px rgba(255,30,0,.42), inset 0 0 12px rgba(255,60,0,.14)!important;
}
.tile.enemy-alert:not(.boss-stack){
  outline:2px solid rgba(255,94,94,.78)!important;
  box-shadow:0 0 8px rgba(255,71,71,.42)!important;
}

/* Boss reveal polish: cinematic stack ordering and 2s henchman jump-in. */
.tile.boss-stack{overflow:visible!important;position:relative!important;z-index:12!important;}
.tile.boss-stack .tile-content{position:relative;z-index:4;transform-origin:center center;}
.tile.boss-intro-stack .tile-content{animation:bossIntroGrowHold 2.45s cubic-bezier(.13,.8,.17,1) both!important;}
.tile.boss-intro-stack .boss-intro-sprite{position:relative;z-index:6;filter:drop-shadow(0 0 18px rgba(255,30,0,.9)) drop-shadow(0 0 10px rgba(255,211,61,.65));}
@keyframes bossIntroGrowHold{
  0%{transform:scale(.45) rotate(-8deg);filter:brightness(2.7) saturate(2.2)}
  18%{transform:scale(1.5) rotate(3deg);filter:brightness(2.05) saturate(1.9)}
  78%{transform:scale(1.5) rotate(-1deg);filter:brightness(1.35) saturate(1.4)}
  100%{transform:scale(1);filter:brightness(1.12) saturate(1.16)}
}
.tile.boss-stack:not(.boss-intro-stack) .boss-stack-top{position:relative;z-index:8;filter:drop-shadow(0 0 10px rgba(255,0,0,.65));}
.tile.boss-stack .boss-stack-count{z-index:12!important;right:-6px!important;bottom:-6px!important;position:absolute!important;}
.boss-henchman-runner.physics-henchman.boss-henchman-jumper{
  z-index:190!important;
  animation:bossHenchmanJumpIn 2s cubic-bezier(.16,.74,.13,1) forwards!important;
  transform-origin:center;
  pointer-events:none!important;
}
@keyframes bossHenchmanJumpIn{
  0%{opacity:0;transform:translate(-50%,-50%) translate(0,0) scale(.35) rotate(-30deg)}
  10%{opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(1.08) rotate(9deg)}
  45%{opacity:1;transform:translate(calc(-50% + var(--dx)*.55),calc(-50% + var(--dy)*.55 + var(--arc))) scale(1.02) rotate(-18deg)}
  72%{opacity:1;transform:translate(calc(-50% + var(--dx)*.88),calc(-50% + var(--dy)*.88 + var(--jump))) scale(.92) rotate(15deg)}
  88%{opacity:1;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) - 10px)) scale(.78) rotate(-7deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.56) rotate(0deg)}
}
.boss-henchman-spark{animation-duration:1.75s!important;}
body.boss-intro-active .tile.boss-stack{z-index:16!important;}


/* New-player relic guidance: visual-only, never intercepts input. */
.relic-exit-prompt{
  position:fixed;
  top:clamp(68px,10vh,112px);
  left:50%;
  transform:translateX(-50%);
  z-index:62;
  pointer-events:none!important;
  user-select:none;
  font-weight:900;
  font-size:clamp(1.1rem,5.2vw,3.1rem);
  letter-spacing:.08em;
  text-align:center;
  white-space:nowrap;
  color:#fff7a8;
  text-shadow:0 0 6px #fff,0 0 18px #ffd33d,0 10px 0 rgba(0,0,0,.58);
  animation:relicExitWave 1.7s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(255,211,61,.38));
}
.relic-exit-prompt.hidden{display:none!important;}
.relic-exit-prompt.relic-exit-pop{animation:relicExitPop .65s cubic-bezier(.2,1.3,.2,1) 1, relicExitWave 1.7s ease-in-out .65s infinite;}
@keyframes relicExitWave{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-.7deg) scale(1)}
  25%{transform:translateX(calc(-50% - 4px)) translateY(-3px) rotate(.8deg) scale(1.025)}
  50%{transform:translateX(-50%) translateY(1px) rotate(.35deg) scale(.995)}
  75%{transform:translateX(calc(-50% + 4px)) translateY(-2px) rotate(-.8deg) scale(1.02)}
}
@keyframes relicExitPop{0%{opacity:0;transform:translateX(-50%) translateY(-18px) scale(.72)}65%{opacity:1;transform:translateX(-50%) translateY(3px) scale(1.12)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.relic-flyer{
  z-index:152;
  filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px #ffd33d)!important;
  animation:relicFly 1.25s cubic-bezier(.16,.9,.2,1) forwards!important;
}
@keyframes relicFly{
  0%{transform:translate(-50%,-50%) scale(1.35) rotate(0deg);opacity:1}
  42%{transform:translate(calc(-50% + var(--dx) * .28),calc(-50% + var(--dy) * .18 - 52px)) scale(1.08) rotate(420deg);opacity:1}
  78%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.38) rotate(900deg);opacity:0}
}
.pickup-spark.relic-spark{background:#fff7a8;box-shadow:0 0 10px #fff,0 0 20px #ffd33d,0 0 30px rgba(255,211,61,.55);}

/* Final Boss intro timing polish: quick Boss pop, reliable 2s henchmen jump-in. */
.tile.boss-intro-stack .tile-content{animation:bossIntroGrowHoldFast .5s cubic-bezier(.13,.8,.17,1) both!important;}
@keyframes bossIntroGrowHoldFast{
  0%{transform:scale(.45) rotate(-8deg);filter:brightness(2.7) saturate(2.2)}
  42%{transform:scale(1.5) rotate(3deg);filter:brightness(2.05) saturate(1.9)}
  72%{transform:scale(1.5) rotate(-1deg);filter:brightness(1.45) saturate(1.55)}
  100%{transform:scale(1);filter:brightness(1.16) saturate(1.18)}
}
.boss-reveal-moment{animation:bossRevealMomentFast .5s cubic-bezier(.13,.8,.17,1) both!important;}
@keyframes bossRevealMomentFast{
  0%{transform:scale(.38) rotate(-10deg);filter:brightness(3) saturate(2.4);box-shadow:0 0 0 0 rgba(255,0,0,0)}
  45%{transform:scale(1.5) rotate(4deg);filter:brightness(2.2) saturate(2);box-shadow:0 0 34px 14px rgba(255,30,0,.85)}
  100%{transform:scale(1);filter:brightness(1.15) saturate(1.25);box-shadow:0 0 18px 4px rgba(255,0,0,.48)}
}
.henchman-source-pop{animation:henchmanSourcePop .46s ease-out both!important;}
@keyframes henchmanSourcePop{
  0%{transform:scale(.78);filter:brightness(.7) saturate(.8)}
  50%{transform:scale(1.25);filter:brightness(2.2) saturate(2)}
  100%{transform:scale(1);filter:none}
}
.boss-henchman-runner.boss-henchman-visible{
  position:fixed!important;
  z-index:9995!important;
  display:block!important;
  opacity:0;
  object-fit:cover;
  pointer-events:none!important;
  transform-origin:center;
  filter:drop-shadow(0 0 22px rgba(255,32,32,1)) drop-shadow(0 0 14px rgba(255,211,61,.9)) saturate(1.8) brightness(1.22);
  animation:bossHenchmanJumpInReliable 1.74s cubic-bezier(.16,.74,.13,1) forwards!important;
}
@keyframes bossHenchmanJumpInReliable{
  0%{opacity:0;transform:translate(-50%,-50%) translate(0,0) scale(.35) rotate(-30deg)}
  8%{opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(1.12) rotate(9deg)}
  44%{opacity:1;transform:translate(calc(-50% + var(--dx)*.55),calc(-50% + var(--dy)*.55 + var(--arc))) scale(1.03) rotate(-18deg)}
  70%{opacity:1;transform:translate(calc(-50% + var(--dx)*.9),calc(-50% + var(--dy)*.9 + var(--jump))) scale(.92) rotate(15deg)}
  88%{opacity:1;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) - 16px)) scale(.82) rotate(-7deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.58) rotate(0deg)}
}
.boss-henchman-spark.boss-henchman-spark-visible{
  position:fixed!important;
  z-index:9993!important;
  width:7px;height:7px;border-radius:50%;
  background:#ff3b20;box-shadow:0 0 10px #ff2d00,0 0 18px rgba(255,211,61,.8);
  pointer-events:none!important;transform:translate(-50%,-50%);
  animation:bossHenchmanSparkReliable 1.5s ease-out forwards!important;
}
@keyframes bossHenchmanSparkReliable{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0)}
}


/* Patch: relic guidance resets per game and overlays the dungeon grid top only. */
.board-wrap{position:relative;}
.board-wrap .relic-exit-prompt{
  position:absolute!important;
  top:clamp(6px,1.4vw,14px)!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateX(-50%);
  z-index:18;
  pointer-events:none!important;
  max-width:92%;
  font-size:clamp(.95rem,3.8vw,2.35rem);
  line-height:1;
  padding:.16em .45em;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.38),rgba(0,0,0,.05));
}
.board-wrap .relic-exit-prompt.hidden{display:none!important;}
.board-wrap .relic-exit-prompt.relic-exit-pop{animation:relicExitPopBoard .55s cubic-bezier(.2,1.3,.2,1) 1, relicExitWaveBoard 1.7s ease-in-out .55s infinite;}
@keyframes relicExitWaveBoard{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-.45deg) scale(1)}
  25%{transform:translateX(calc(-50% - 3px)) translateY(-2px) rotate(.55deg) scale(1.018)}
  50%{transform:translateX(-50%) translateY(1px) rotate(.2deg) scale(.995)}
  75%{transform:translateX(calc(-50% + 3px)) translateY(-1px) rotate(-.55deg) scale(1.014)}
}
@keyframes relicExitPopBoard{0%{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.76)}65%{opacity:1;transform:translateX(-50%) translateY(2px) scale(1.08)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

/* Boss henchmen snapshot cinematic fix: animation uses captured screen positions, not live tile state. */
.boss-henchman-source-flash{
  position:fixed!important;
  z-index:9994!important;
  object-fit:cover;
  pointer-events:none!important;
  transform:translate(-50%,-50%) scale(.55);
  filter:drop-shadow(0 0 18px rgba(255,211,61,.95)) drop-shadow(0 0 12px rgba(255,40,0,.85));
  animation:bossHenchmanSourceFlash .72s cubic-bezier(.18,.8,.18,1) forwards!important;
}
@keyframes bossHenchmanSourceFlash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(-12deg)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1.28) rotate(5deg)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1.02) rotate(-3deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(0)}
}
.boss-henchman-runner.boss-henchman-snapshot{
  position:fixed!important;
  z-index:9995!important;
  display:block!important;
  opacity:0;
  pointer-events:none!important;
  object-fit:cover;
  transform-origin:center;
  filter:drop-shadow(0 0 24px rgba(255,32,32,1)) drop-shadow(0 0 16px rgba(255,211,61,.9)) saturate(1.85) brightness(1.25);
  animation:bossHenchmanSnapshotRun 1.55s cubic-bezier(.16,.74,.13,1) forwards!important;
}
@keyframes bossHenchmanSnapshotRun{
  0%{opacity:0;transform:translate(-50%,-50%) translate(0,0) scale(.35) rotate(-28deg)}
  9%{opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(1.12) rotate(8deg)}
  44%{opacity:1;transform:translate(calc(-50% + var(--dx)*.52),calc(-50% + var(--dy)*.52 + var(--arc))) scale(1.05) rotate(-17deg)}
  70%{opacity:1;transform:translate(calc(-50% + var(--dx)*.88),calc(-50% + var(--dy)*.88 + var(--jump))) scale(.94) rotate(14deg)}
  88%{opacity:1;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) - 14px)) scale(.85) rotate(-6deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.58) rotate(0deg)}
}
.boss-henchman-source-flash,
.boss-henchman-runner.boss-henchman-snapshot{
  pointer-events:none!important;
}

/* Boss stack settle: a visual-only layout bump after the cinematic lands. */
.tile.boss-stack.boss-stack-settled{
  animation:bossStackSettledBump .34s cubic-bezier(.18,.9,.2,1.25) both!important;
}
@keyframes bossStackSettledBump{
  0%{transform:scale(.94);filter:brightness(1.35) saturate(1.35)}
  55%{transform:scale(1.09);filter:brightness(1.15) saturate(1.2)}
  100%{transform:scale(1);filter:none}
}

/* Boss fight input safety + impact polish. The intro can look dramatic, but it never owns input. */
body.boss-intro-active,
body.boss-encounter-active,
body.boss-intro-active *,
body.boss-encounter-active *{
  pointer-events:auto;
}
body.boss-intro-active::before,
body.boss-intro-active::after,
body.boss-encounter-active::before,
body.boss-encounter-active::after,
.boss-reveal-spark,
.boss-henchman-spark,
.boss-henchman-runner,
.boss-henchman-source-flash{
  pointer-events:none!important;
}
.board-wrap.boss-attack-shake{
  animation:bossAttackShake .34s cubic-bezier(.18,.8,.2,1) both!important;
}
@keyframes bossAttackShake{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  18%{transform:translate3d(-3px,2px,0) scale(1.006)}
  34%{transform:translate3d(4px,-2px,0) scale(1.008)}
  50%{transform:translate3d(-2px,-3px,0) scale(1.004)}
  68%{transform:translate3d(3px,2px,0) scale(1.006)}
  84%{transform:translate3d(-1px,1px,0) scale(1.002)}
}

.splash-discord-link{justify-self:center;color:#45f3ff;font-size:clamp(.78rem,2.2vw,1.05rem);font-weight:900;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;text-shadow:0 2px 0 #000,0 0 12px rgba(69,243,255,.55);position:relative;z-index:5;pointer-events:auto;cursor:pointer;margin-top:-4px}.splash-discord-link:hover{text-decoration:underline;color:#fff}.splash-discord-link:focus-visible{outline:3px solid #fff;outline-offset:5px;border-radius:6px}.splash-copyright{margin-top:0;margin-bottom:-4px}.splash-copyright a,.splash-discord-link,.splash-cashapp-link{touch-action:manipulation}

/* Patch: separate splash action buttons so reset is never near the Discord link. */
.arcade-cabinet .reset-progress-btn,
.arcade-cabinet .splash-cashapp-link,
.arcade-cabinet .splash-discord-link{
  position:absolute;
  bottom:clamp(12px,2.6vw,24px);
  justify-self:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:clamp(132px,22vw,190px);
  border:2px solid rgba(255,255,255,.65);
  background:rgba(0,0,0,.45);
  color:#fff;
  font-weight:900;
  letter-spacing:.08em;
  font-size:clamp(.68rem,1.8vw,.92rem);
  line-height:1;
  padding:.58em 1em;
  border-radius:6px;
  cursor:pointer;
  text-decoration:none;
  text-transform:uppercase;
  text-shadow:0 0 8px rgba(255,255,255,.4);
  z-index:6;
  pointer-events:auto;
  touch-action:manipulation;
  box-shadow:0 4px 0 rgba(0,0,0,.55),0 0 12px rgba(255,255,255,.08);
}
.arcade-cabinet .reset-progress-btn{
  left:clamp(12px,3vw,30px);
}
.arcade-cabinet .splash-cashapp-link{
  left:50%;
  transform:translateX(-50%);
  border-color:rgba(255,211,61,.82);
  color:#fff1a8;
  box-shadow:0 4px 0 rgba(0,0,0,.55),0 0 14px rgba(255,211,61,.24);
}
.arcade-cabinet .splash-discord-link{
  right:clamp(12px,3vw,30px);
  border-color:rgba(77,255,137,.78);
  color:#c8ffd7;
  box-shadow:0 4px 0 rgba(0,0,0,.55),0 0 14px rgba(77,255,137,.22);
}
.arcade-cabinet .reset-progress-btn:hover{
  border-color:#ff4747;
  color:#ffb4b4;
  box-shadow:0 4px 0 rgba(0,0,0,.55),0 0 14px rgba(255,71,71,.32);
}
.arcade-cabinet .splash-cashapp-link:hover{
  border-color:#ffd33d;
  color:#fff;
  text-decoration:none;
  box-shadow:0 4px 0 rgba(0,0,0,.55),0 0 18px rgba(255,211,61,.42);
}
.arcade-cabinet .splash-discord-link:hover{
  border-color:#4dff89;
  color:#fff;
  text-decoration:none;
  box-shadow:0 4px 0 rgba(0,0,0,.55),0 0 18px rgba(77,255,137,.4);
}
.arcade-cabinet .reset-progress-btn:focus-visible,
.arcade-cabinet .splash-cashapp-link:focus-visible,
.arcade-cabinet .splash-discord-link:focus-visible{
  outline:3px solid #fff;
  outline-offset:5px;
}
@media(max-width:520px){
  .arcade-cabinet .reset-progress-btn,
  .arcade-cabinet .splash-cashapp-link,
  .arcade-cabinet .splash-discord-link{
    bottom:10px;
    min-width:0;
    width:calc(33.333% - 14px);
    padding:.58em .45em;
    font-size:.64rem;
    letter-spacing:.045em;
  }
  .arcade-cabinet .reset-progress-btn{left:8px;}
  .arcade-cabinet .splash-cashapp-link{left:50%; transform:translateX(-50%);}
  .arcade-cabinet .splash-discord-link{right:8px;}
}

/* Patch: vertically center the splash art and TAP TO START cluster. */
.arcade-cabinet{
  grid-template-rows:auto minmax(0,1fr) auto auto auto minmax(54px,1fr);
  align-content:stretch;
}
.arcade-cabinet .splash-copyright{
  grid-row:1;
  align-self:start;
}
.arcade-cabinet .arcade-marquee{
  grid-row:3;
  width:100%;
  align-self:end;
  margin-bottom:clamp(8px,1.4vw,14px);
}
.arcade-cabinet .arcade-monitor{
  grid-row:4;
  align-self:center;
}
.arcade-cabinet .splash-start{
  grid-row:5;
  align-self:start;
  margin-top:clamp(8px,1.8vw,18px);
}
@media(max-height:720px){
  .arcade-cabinet{
    grid-template-rows:auto minmax(0,.8fr) auto auto auto minmax(46px,.8fr);
    gap:clamp(6px,1.3vh,10px);
  }
  .arcade-cabinet .arcade-marquee{
    margin-bottom:6px;
  }
  .arcade-cabinet .splash-start{
    margin-top:6px;
  }
}


/* Patch: add Cash App donation button to bottom center of splash screen. */
.arcade-cabinet .splash-cashapp-link{
  position:absolute;
  bottom:clamp(12px,2.6vw,24px);
  left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:clamp(154px,24vw,220px);
  border:2px solid rgba(255,211,61,.82);
  background:rgba(0,0,0,.45);
  color:#fff1a8;
  font-weight:900;
  letter-spacing:.08em;
  font-size:clamp(.68rem,1.8vw,.92rem);
  line-height:1;
  padding:.58em 1em;
  border-radius:6px;
  cursor:pointer;
  text-decoration:none;
  text-transform:uppercase;
  text-shadow:0 0 8px rgba(255,255,255,.4);
  z-index:6;
  pointer-events:auto;
  touch-action:manipulation;
  box-shadow:0 4px 0 rgba(0,0,0,.55),0 0 14px rgba(255,211,61,.24);
}
.arcade-cabinet .splash-cashapp-link:hover{
  border-color:#ffd33d;
  color:#fff;
  text-decoration:none;
  box-shadow:0 4px 0 rgba(0,0,0,.55),0 0 18px rgba(255,211,61,.42);
}
.arcade-cabinet .splash-cashapp-link:focus-visible{
  outline:3px solid #fff;
  outline-offset:5px;
}
@media(max-width:520px){
  .arcade-cabinet .splash-cashapp-link{
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    min-width:0;
    width:calc(33.333% - 14px);
    padding:.58em .45em;
    font-size:.58rem;
    letter-spacing:.035em;
  }
}

/* Final polish: stronger mobile grid swipes, centered support link wording, stairs physics, and staged Boss summon. */
.game .board-wrap,
.game #board,
.game .board,
.game .tile{
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.inventory-dock,
.inventory-slot,
.bottom-hud,
.player-panel,
#merchantButton,
#heroSelect,
#splashScreen,
.game-over-overlay,
.reward-screen,
dialog{
  touch-action:manipulation;
}

.tile.hero.hero-stairs-hidden .tile-content,
.tile.hero.hero-stairs-hidden .hero-img{
  opacity:0!important;
}
.hero-stairs-actor{
  position:fixed;
  z-index:9996;
  pointer-events:none!important;
  object-fit:contain;
  transform:translate(-50%,-50%);
  transform-origin:center center;
  filter:drop-shadow(0 0 16px rgba(69,243,255,.9)) drop-shadow(0 0 8px rgba(255,211,61,.9));
  animation:heroStairsActorPhysics 1.82s cubic-bezier(.16,.78,.16,1) forwards;
}
@keyframes heroStairsActorPhysics{
  0%{opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(1) rotate(0deg);filter:brightness(1.1) drop-shadow(0 0 10px rgba(255,211,61,.75))}
  18%{opacity:1;transform:translate(-50%,-50%) translate(calc(var(--stairs-dx)*.18),calc(var(--stairs-dy)*.18 - 24px)) scale(1.18) rotate(-8deg);filter:brightness(1.45) drop-shadow(0 0 18px rgba(255,211,61,1))}
  52%{opacity:1;transform:translate(-50%,-50%) translate(calc(var(--stairs-dx)*.72),calc(var(--stairs-dy)*.72 - 8px)) scale(.72) rotate(17deg);filter:brightness(1.15) drop-shadow(0 0 22px rgba(69,243,255,1))}
  78%{opacity:.86;transform:translate(-50%,-50%) translate(var(--stairs-dx),var(--stairs-dy)) scale(.42) rotate(-10deg);filter:brightness(.8) drop-shadow(0 0 18px rgba(69,243,255,.9))}
  100%{opacity:0;transform:translate(-50%,-50%) translate(var(--stairs-dx),calc(var(--stairs-dy) + 20px)) scale(.08) rotate(0deg);filter:brightness(.25)}
}
.tile.exit-stairs-swallow{z-index:85!important;animation:exitStairsSwallow 1.72s ease-out both!important;}
@keyframes exitStairsSwallow{
  0%,100%{filter:brightness(1)}
  20%{filter:brightness(1.8) drop-shadow(0 0 16px rgba(69,243,255,.95));transform:scale(1.05)}
  58%{filter:brightness(1.35) drop-shadow(0 0 30px rgba(255,211,61,.85));transform:scale(1.12)}
}

.board-wrap.boss-summon-shake{animation:bossSummonShake 1.2s cubic-bezier(.17,.84,.24,1) both!important;}
@keyframes bossSummonShake{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  8%{transform:translate3d(-4px,3px,0) scale(1.01)}
  17%{transform:translate3d(5px,-4px,0) scale(1.014)}
  28%{transform:translate3d(-6px,-2px,0) scale(1.012)}
  42%{transform:translate3d(5px,4px,0) scale(1.01)}
  57%{transform:translate3d(-3px,2px,0) scale(1.006)}
  73%{transform:translate3d(2px,-2px,0) scale(1.004)}
}
.tile.boss-intro-stack .tile-content{animation:bossIntroSummonGrow 1.15s cubic-bezier(.13,.8,.17,1) both!important;}
@keyframes bossIntroSummonGrow{
  0%{transform:scale(.28) rotate(-9deg);filter:brightness(2.2) saturate(2);opacity:.3}
  36%{transform:scale(1.42) rotate(5deg);filter:brightness(1.8) saturate(1.7);opacity:1}
  62%{transform:scale(1.12) rotate(-3deg);filter:brightness(1.35) saturate(1.5)}
  100%{transform:scale(1.22) rotate(0);filter:brightness(1.25) saturate(1.35)}
}
.boss-cinematic-word{
  position:fixed;
  left:50%;
  top:22%;
  transform:translate(-50%,-50%) scale(.7);
  z-index:9997;
  pointer-events:none!important;
  font-family:var(--arcade-font, Impact, fantasy);
  font-size:clamp(1.7rem,8vw,5.8rem);
  font-weight:1000;
  letter-spacing:.08em;
  line-height:.9;
  color:#fff;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 4px 0 #000,0 0 16px rgba(255,40,0,.95),0 0 36px rgba(255,211,61,.8);
  animation:bossWordImpact 1.05s cubic-bezier(.17,.86,.22,1) forwards;
}
.boss-cinematic-word.henchmen-word{color:#ffd33d;top:20%;}
.boss-cinematic-word.boss-fight-word{color:#ff4747;top:24%;animation:bossFightWordImpact 1.22s cubic-bezier(.15,.9,.18,1) forwards;}
@keyframes bossWordImpact{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-4deg);filter:blur(5px)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.16) rotate(2deg);filter:blur(0)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.92) translateY(-18px)}
}
@keyframes bossFightWordImpact{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.28) rotate(3deg)}
  48%{opacity:1;transform:translate(-50%,-50%) scale(1.02) rotate(-1deg)}
  82%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}
}
.boss-henchman-source-flash.boss-henchman-wake{
  animation:bossHenchmanWakeReveal 1.32s cubic-bezier(.18,.8,.18,1) forwards!important;
  filter:drop-shadow(0 0 18px rgba(255,211,61,.95)) drop-shadow(0 0 12px rgba(255,40,0,.85));
}
@keyframes bossHenchmanWakeReveal{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-12deg);filter:brightness(2.5) blur(4px)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.22) rotate(5deg);filter:brightness(1.6) blur(0)}
  42%{opacity:1;transform:translate(-50%,-50%) scale(.96) rotate(-4deg)}
  54%{transform:translate(calc(-50% - 3px),calc(-50% + 1px)) scale(1.02) rotate(-7deg)}
  64%{transform:translate(calc(-50% + 4px),calc(-50% - 2px)) scale(1.02) rotate(7deg)}
  74%{transform:translate(calc(-50% - 2px),calc(-50% + 2px)) scale(1.02) rotate(-5deg)}
  88%{opacity:1;transform:translate(-50%,-50%) scale(.92) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
}
.boss-henchman-runner.boss-henchman-reverent{
  position:fixed!important;
  z-index:9995!important;
  display:block!important;
  opacity:0;
  pointer-events:none!important;
  object-fit:cover;
  transform-origin:center;
  filter:drop-shadow(0 0 24px rgba(255,32,32,1)) drop-shadow(0 0 16px rgba(255,211,61,.9)) saturate(1.85) brightness(1.25);
  animation:bossHenchmanReverentStack 1.55s cubic-bezier(.16,.74,.13,1) forwards!important;
}
@keyframes bossHenchmanReverentStack{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(calc(var(--reverence-wobble) * -1))}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(var(--reverence-wobble))}
  24%{opacity:1;transform:translate(calc(-50% - 3px),calc(-50% + 2px)) scale(1.08) rotate(calc(var(--reverence-wobble) * -1))}
  38%{opacity:1;transform:translate(calc(-50% + var(--to-player-x)*.62),calc(-50% + var(--to-player-y)*.62)) scale(1.72) rotate(8deg)}
  56%{opacity:1;transform:translate(calc(-50% + var(--to-player-x)),calc(-50% + var(--to-player-y))) scale(2.25) rotate(-8deg);filter:brightness(1.5) drop-shadow(0 0 34px rgba(255,211,61,1))}
  74%{opacity:1;transform:translate(calc(-50% + var(--dx)*.72),calc(-50% + var(--dy)*.72 - 36px)) scale(1.03) rotate(7deg)}
  90%{opacity:1;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) - 8px)) scale(.82) rotate(-4deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.46) rotate(0)}
}
.tile.boss-stack.boss-stack-catch{animation:bossStackCatch .36s cubic-bezier(.18,.9,.2,1.25) both!important;}
@keyframes bossStackCatch{
  0%{transform:scale(1);filter:brightness(1)}
  45%{transform:scale(1.18);filter:brightness(1.65) saturate(1.5) drop-shadow(0 0 18px rgba(255,211,61,.9))}
  100%{transform:scale(1);filter:none}
}

/* Publish polish: exit descent, death revive value, invincibility rush, and scarier idle ghost. */
.death-gem-counter{
  color:#45f3ff;
  font-weight:1000;
  font-size:clamp(.95rem,3.4vw,1.45rem);
  letter-spacing:.08em;
  text-shadow:0 2px 0 #000,0 0 12px rgba(69,243,255,.75);
  margin:.25rem 0 .35rem;
  padding:.2em .55em;
  border:2px solid rgba(69,243,255,.45);
  background:rgba(0,0,0,.42);
  border-radius:8px;
  box-shadow:0 0 18px rgba(69,243,255,.18),inset 0 0 12px rgba(69,243,255,.1);
}
.death-gem-counter.revive-affordable{
  color:#ffd33d;
  border-color:rgba(255,211,61,.62);
  text-shadow:0 2px 0 #000,0 0 14px rgba(255,211,61,.82);
  box-shadow:0 0 22px rgba(255,211,61,.22),inset 0 0 14px rgba(255,211,61,.13);
}
.death-gem-counter.hidden{display:none!important;}

body.invincibility-active .tile.hero-slide .tile-content{
  animation:heroSlideTileInvincible .075s linear both!important;
}
@keyframes heroSlideTileInvincible{
  0%{transform:translate(var(--hero-slide-x),var(--hero-slide-y)) scale(1.02);filter:brightness(1.55) drop-shadow(0 0 14px #ffd33d)}
  100%{transform:translate(0,0) scale(1);filter:brightness(1.15) drop-shadow(0 0 8px #45f3ff)}
}
.invincible-gem-bonus{
  position:fixed;
  z-index:9998;
  pointer-events:none;
  transform:translate(-50%,-50%);
  color:#ffd33d;
  font-family:var(--arcade-font, Impact, fantasy);
  font-weight:1000;
  font-size:clamp(2.4rem,9.6vw,4.35rem);
  letter-spacing:.08em;
  text-shadow:0 3px 0 #000,0 0 12px rgba(255,211,61,.95),0 0 24px rgba(69,243,255,.55);
  animation:invincibleGemBonusPop .72s cubic-bezier(.15,.82,.2,1) forwards;
}
@keyframes invincibleGemBonusPop{
  0%{opacity:0;transform:translate(-50%,-50%) translateY(8px) scale(.45) rotate(-6deg)}
  18%{opacity:1;transform:translate(-50%,-50%) translateY(-8px) scale(1.14) rotate(3deg)}
  72%{opacity:1;transform:translate(-50%,-50%) translateY(-36px) scale(.96) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-50%) translateY(-58px) scale(.72) rotate(5deg)}
}

body.ghost-haunted .game::after,
body.ghost-hunting .game::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:114;
  pointer-events:none;
  background:radial-gradient(circle at 50% 48%,transparent 0 36%,rgba(0,0,0,.18) 58%,rgba(5,0,18,.58) 100%);
  opacity:.4;
  animation:ghostVignetteBreath 3.4s ease-in-out infinite alternate;
}
body.ghost-hunting .game::after{opacity:.62;background:radial-gradient(circle at 50% 48%,rgba(60,0,85,.04) 0 32%,rgba(0,0,0,.3) 58%,rgba(0,0,0,.78) 100%)}
@keyframes ghostVignetteBreath{from{filter:blur(0);opacity:.32}to{filter:blur(1px);opacity:.62}}
.ghost-fx{
  z-index:9994!important;
  pointer-events:none!important;
  width:clamp(90px,18vw,230px)!important;
  height:auto!important;
  filter:drop-shadow(0 0 18px rgba(185,224,255,.8)) drop-shadow(0 0 34px rgba(95,0,150,.42)) brightness(1.12)!important;
  will-change:transform,opacity,left,top!important;
}
.ghost-stalker{
  left:0;
  opacity:0;
  animation:ghostStalkerCross 5.55s cubic-bezier(.13,.7,.22,1) forwards!important;
}
@keyframes ghostStalkerCross{
  0%{opacity:0;transform:translate(var(--from-x),0) scaleX(var(--ghost-scale,1)) scale(.42) skewX(0deg);filter:blur(5px) brightness(.5)}
  9%{opacity:.22;filter:blur(2px) brightness(.8)}
  20%{opacity:.9;transform:translate(calc(var(--from-x) + 22vw),calc(var(--ghost-drift) * -.35)) scaleX(var(--ghost-scale,1)) scale(1.08) skewX(-5deg);filter:blur(0) brightness(1.35)}
  38%{opacity:.18;transform:translate(calc(var(--from-x) + 42vw),calc(var(--ghost-drift) * .6)) scaleX(var(--ghost-scale,1)) scale(.72) skewX(8deg)}
  55%{opacity:.82;transform:translate(calc(var(--from-x) + 66vw),calc(var(--ghost-drift) * -.55)) scaleX(var(--ghost-scale,1)) scale(1.26) skewX(-7deg);filter:brightness(1.65) drop-shadow(0 0 28px rgba(255,255,255,.9))}
  78%{opacity:.38;transform:translate(calc(var(--from-x) + 96vw),calc(var(--ghost-drift) * .5)) scaleX(var(--ghost-scale,1)) scale(.88) skewX(4deg)}
  100%{opacity:0;transform:translate(var(--to-x),0) scaleX(var(--ghost-scale,1)) scale(.35);filter:blur(5px) brightness(.35)}
}
.ghost-hunter{
  opacity:.72!important;
  animation:ghostHunterMaterialize 1.8s cubic-bezier(.08,.72,.14,1) both, ghostHunterPulse .84s ease-in-out 1.8s infinite alternate!important;
}
@keyframes ghostHunterMaterialize{
  0%{opacity:0;transform:translate(-50%,-50%) scale(4.8) rotate(-8deg);filter:blur(9px) brightness(.2)}
  45%{opacity:.95;transform:translate(-50%,-50%) scale(1.65) rotate(5deg);filter:blur(1px) brightness(1.7) drop-shadow(0 0 32px rgba(255,255,255,.85))}
  100%{opacity:.68;transform:translate(-50%,-50%) scale(.92) rotate(0);filter:blur(0) brightness(1.15)}
}
@keyframes ghostHunterPulse{
  from{opacity:.42;transform:translate(-50%,-50%) scale(.78) rotate(-3deg);filter:brightness(.85) drop-shadow(0 0 18px rgba(165,205,255,.65))}
  to{opacity:.9;transform:translate(-50%,-50%) scale(1.08) rotate(3deg);filter:brightness(1.75) drop-shadow(0 0 34px rgba(255,255,255,.95)) drop-shadow(0 0 48px rgba(105,0,160,.75))}
}
.ghost-warning-fx{
  position:fixed;
  left:50%;
  top:18%;
  z-index:9999;
  pointer-events:none;
  transform:translate(-50%,-50%);
  color:#dff4ff;
  font-family:var(--arcade-font, Impact, fantasy);
  font-size:clamp(1rem,4.6vw,3.2rem);
  font-weight:1000;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  text-shadow:0 3px 0 #000,0 0 14px rgba(210,235,255,.8),0 0 34px rgba(110,0,170,.65);
  animation:ghostWarningFlicker 2.75s steps(2,end) forwards;
}
@keyframes ghostWarningFlicker{
  0%{opacity:0;filter:blur(5px);transform:translate(-50%,-50%) scale(.72)}
  12%{opacity:.9;filter:blur(0);transform:translate(-50%,-50%) scale(1.08)}
  21%{opacity:.18}
  32%{opacity:.82}
  56%{opacity:.34}
  72%{opacity:.74;transform:translate(-50%,-58%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-76%) scale(.9);filter:blur(4px)}
}
.ghost-wisp-fx{
  position:fixed;
  z-index:9993;
  width:10px;
  height:10px;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  background:#e8fbff;
  box-shadow:0 0 12px rgba(225,250,255,.95),0 0 28px rgba(120,0,180,.65);
  animation:ghostWispRise 2.55s ease-out forwards;
}
@keyframes ghostWispRise{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  14%{opacity:.88}
  70%{opacity:.5;transform:translate(calc(-50% + var(--gx)*.7),calc(-50% + var(--gy)*.7)) scale(1.05)}
  100%{opacity:0;transform:translate(calc(-50% + var(--gx)),calc(-50% + var(--gy))) scale(.12)}
}

/* Publish final pass: arcade HUD relevance, gem waterfall rewards, robust swipes, and no-scroll launch screens. */
body[data-game-mode="arcade"] #relicHud,
body[data-game-mode="hardmode"] #relicHud,
#relicHud.hidden{
  display:none!important;
}
body[data-game-mode="arcade"] .left-hud,
body[data-game-mode="hardmode"] .left-hud{
  gap:0!important;
}

.gem-waterfall-piece{
  position:fixed;
  z-index:9992;
  width:clamp(18px,4.6vw,42px);
  height:clamp(18px,4.6vw,42px);
  object-fit:contain;
  pointer-events:none!important;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 9px #ffd33d) drop-shadow(0 0 18px rgba(255,211,61,.8)) saturate(1.25);
  animation:gemWaterfallPhysics 1.42s cubic-bezier(.13,.68,.18,1) forwards;
}
@keyframes gemWaterfallPhysics{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.28) rotate(0deg)}
  10%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(70deg)}
  38%{opacity:1;transform:translate(calc(-50% + var(--launch-x)),calc(-50% + var(--launch-y))) scale(1.22) rotate(calc(var(--gem-rot) * .32));filter:brightness(1.55) drop-shadow(0 0 14px #fff) drop-shadow(0 0 30px #ffd33d)}
  76%{opacity:1;transform:translate(calc(-50% + var(--land-x) * .72),calc(-50% + var(--land-y) * .72 + 42px)) scale(.9) rotate(calc(var(--gem-rot) * .74))}
  100%{opacity:0;transform:translate(calc(-50% + var(--land-x)),calc(-50% + var(--land-y))) scale(.24) rotate(var(--gem-rot));filter:brightness(.8) drop-shadow(0 0 6px #ffd33d)}
}
.gem-waterfall-label{
  position:fixed;
  z-index:9994;
  pointer-events:none!important;
  transform:translate(-50%,-50%);
  color:#ffd33d;
  font-family:var(--arcade-font, Impact, fantasy);
  font-weight:1000;
  font-size:clamp(3.0rem,15vw,8.8rem);
  letter-spacing:.07em;
  text-transform:uppercase;
  text-shadow:0 6px 0 #000,0 0 18px rgba(255,211,61,1),0 0 38px rgba(69,243,255,.72);
  animation:gemWaterfallLabelPop 1.05s cubic-bezier(.13,.82,.18,1) forwards;
}
@keyframes gemWaterfallLabelPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-5deg)}
  18%{opacity:1;transform:translate(-50%,-72%) scale(1.2) rotate(2deg)}
  72%{opacity:1;transform:translate(-50%,-102%) scale(1) rotate(0deg)}
  100%{opacity:0;transform:translate(-50%,-142%) scale(.76) rotate(3deg)}
}
.gem-waterfall-spark{
  position:fixed;
  z-index:9991;
  width:8px;
  height:8px;
  border-radius:999px;
  pointer-events:none!important;
  background:#fff5a8;
  box-shadow:0 0 10px #ffd33d,0 0 22px rgba(69,243,255,.55);
  transform:translate(-50%,-50%);
  animation:gemWaterfallSpark .92s ease-out forwards;
}
@keyframes gemWaterfallSpark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  16%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(.05)}
}

.game .board-wrap,
.game #board,
.game .board{
  touch-action:none!important;
  overscroll-behavior:contain!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
.game .board-wrap *{
  touch-action:none!important;
}
.bottom-hud,
.player-panel,
.inventory-dock,
.inventory-slot,
.inventory-item,
.left-hud,
.merchant-button,
#merchantButton,
#effectPanel,
.game-over-overlay,
.reward-screen,
.dialog,
button,
a{
  touch-action:manipulation!important;
}


/* Publish final rollback: splash and hero-select use the original layout again. */
}

/* Heart-container purchase polish and Phoenix revival ceremony. */
.toast.player-idle-message.show{animation:toastLongIdle 3.25s ease forwards!important;}
@keyframes toastLongIdle{0%{opacity:0;transform:translate(-50%,-8px)}10%,88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}

.hero-heart-row.containers{display:flex!important;flex-wrap:wrap;max-width:min(420px,92vw);gap:clamp(3px,1vw,8px)!important;}
.meta-heart-container{position:relative;display:inline-block;width:clamp(24px,5vw,38px);height:clamp(24px,5vw,38px);isolation:isolate;filter:drop-shadow(0 0 6px rgba(255,50,75,.25));}
.meta-heart-container .heart-empty-base,.meta-heart-container .heart-full-mask{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;}
.meta-heart-container .heart-empty-base{opacity:.72;filter:grayscale(.45) brightness(.85);}
.meta-heart-container .heart-full-mask{opacity:0;z-index:3;filter:drop-shadow(0 0 8px rgba(255,45,75,.72));}
.meta-heart-container.full .heart-full-mask{opacity:1;}
.meta-heart-container.partial .heart-full-mask{opacity:.08;}
.heart-quarter{position:absolute;z-index:2;width:50%;height:50%;opacity:0;background:radial-gradient(circle at 50% 50%,#ff385e 0 52%,#a00024 82%);filter:drop-shadow(0 0 5px rgba(255,50,80,.9));transition:opacity .18s ease,transform .18s ease;mix-blend-mode:screen;}
.heart-quarter.filled{opacity:.95;}
.heart-quarter.q0{left:0;top:0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);border-radius:100% 0 0 0;}
.heart-quarter.q1{left:0;bottom:0;border-radius:0 0 0 100%;}
.heart-quarter.q2{right:0;bottom:0;border-radius:0 0 100% 0;}
.heart-quarter.q3{right:0;top:0;border-radius:0 100% 0 0;}
.meta-heart-container.heart-piece-added{animation:heartPieceAdded .82s cubic-bezier(.12,.9,.18,1) both;}
@keyframes heartPieceAdded{0%{transform:scale(.88);filter:drop-shadow(0 0 0 rgba(255,40,70,0))}38%{transform:scale(1.28);filter:drop-shadow(0 0 16px rgba(255,45,80,.95)) drop-shadow(0 0 28px rgba(255,211,61,.55))}100%{transform:scale(1);filter:drop-shadow(0 0 7px rgba(255,50,75,.32))}}
.meta-heart-container.heart-container-complete{animation:heartContainerComplete 1.35s cubic-bezier(.08,.86,.2,1) both;}
@keyframes heartContainerComplete{0%{transform:scale(.72);filter:brightness(1)}22%{transform:scale(1.48);filter:brightness(2.1) saturate(1.8) drop-shadow(0 0 18px #ff244d) drop-shadow(0 0 36px #ffcc00)}48%{transform:scale(1.12)}72%{transform:scale(1.28);filter:brightness(1.7) drop-shadow(0 0 18px #ff244d)}100%{transform:scale(1);filter:drop-shadow(0 0 7px rgba(255,50,75,.32))}}
.heart-earned-message{position:fixed;left:50%;top:24%;z-index:10000;pointer-events:none;transform:translate(-50%,-50%);font-family:var(--arcade-font,Impact,fantasy);font-size:clamp(1.7rem,8vw,4.6rem);font-weight:1000;letter-spacing:.08em;color:#ff315b;-webkit-text-stroke:2px #080000;text-shadow:0 4px 0 #000,0 0 18px rgba(255,49,91,.95),0 0 42px rgba(255,211,61,.75);animation:heartEarnedMessage 1.42s ease-out forwards;}
@keyframes heartEarnedMessage{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-5deg)}18%,72%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(1deg)}100%{opacity:0;transform:translate(-50%,-78%) scale(.78) rotate(4deg)}}

.heart-track .heart-ui-container{display:inline-grid;place-items:center;width:24px;height:24px;position:relative;}
.heart-track .heart-ui-container .meta-heart-container{width:100%;height:100%;}
@media(min-width:720px){.heart-track .heart-ui-container{width:30px;height:30px}}
@media(max-width:420px){.heart-track .heart-ui-container{width:21px;height:21px}}
.heart-track .heart-ui-container.phoenix-heart-refill{animation:phoenixHeartPulse .75s ease both;animation-delay:var(--heart-delay,0ms);}
.heart-track .heart-ui-container.phoenix-heart-refill .heart-quarter{animation:phoenixQuarterGlow .72s ease both;animation-delay:var(--heart-delay,0ms);}
@keyframes phoenixHeartPulse{0%{transform:scale(.88);filter:brightness(.8)}45%{transform:scale(1.34);filter:brightness(2) drop-shadow(0 0 16px #ffd33d) drop-shadow(0 0 24px #ff365f)}100%{transform:scale(1)}}
@keyframes phoenixQuarterGlow{0%{opacity:.15}40%,100%{opacity:1}}

.phoenix-revive-ceremony{position:fixed;inset:0;z-index:10020;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 50% 52%,rgba(255,211,61,.16),rgba(255,100,0,.06) 24%,transparent 48%);animation:phoenixCeremonyFade 2.6s ease both;}
@keyframes phoenixCeremonyFade{0%,100%{opacity:0}12%,82%{opacity:1}}
.phoenix-revive-title{position:fixed;left:50%;top:28%;transform:translate(-50%,-50%);font-family:var(--arcade-font,Impact,fantasy);font-size:clamp(2rem,9vw,6rem);font-weight:1000;letter-spacing:.08em;color:#ffd33d;-webkit-text-stroke:2px #3a1100;text-shadow:0 6px 0 #000,0 0 18px #ffd33d,0 0 48px rgba(255,115,0,.95);animation:phoenixTitleBoom 2.15s cubic-bezier(.08,.8,.16,1) both;}
@keyframes phoenixTitleBoom{0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(-6deg)}22%,76%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(1deg)}100%{opacity:0;transform:translate(-50%,-86%) scale(.78) rotate(5deg)}}
.phoenix-light-column{position:fixed;left:50%;top:0;width:min(34vw,220px);height:100vh;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(255,255,230,.82) 32%,rgba(255,211,61,.72) 55%,transparent);filter:blur(10px);mix-blend-mode:screen;animation:phoenixColumn 2.25s ease both;}
@keyframes phoenixColumn{0%{opacity:0;transform:translateX(-50%) scaleX(.2)}30%,74%{opacity:.9;transform:translateX(-50%) scaleX(1)}100%{opacity:0;transform:translateX(-50%) scaleX(.35)}}
.phoenix-feather-flyer{position:fixed;z-index:10030;width:clamp(42px,9vw,86px);height:clamp(42px,9vw,86px);object-fit:cover;border-radius:12px;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 0 12px #ffd33d) drop-shadow(0 0 28px #ff7600);animation:phoenixFeatherFly 1.3s cubic-bezier(.13,.82,.16,1) forwards;}
@keyframes phoenixFeatherFly{0%{opacity:1;transform:translate(-50%,-50%) scale(.8) rotate(-12deg)}45%{opacity:1;transform:translate(-50%,-72vh) scale(1.15) rotate(30deg)}100%{opacity:0;transform:translate(-50%,-106vh) scale(.38) rotate(130deg)}}
.phoenix-gold-spark,.phoenix-swirl-spark{position:fixed;z-index:10025;width:8px;height:8px;border-radius:50%;pointer-events:none;background:#fff5aa;box-shadow:0 0 10px #fff,0 0 24px #ffd33d,0 0 36px rgba(255,111,0,.8);}
.phoenix-gold-spark{animation:phoenixSparkFall 1.45s cubic-bezier(.12,.62,.2,1) forwards;}
@keyframes phoenixSparkFall{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.08)}}
.phoenix-swirl-spark{animation:phoenixSwirl 1.5s ease-out forwards;transform-origin:0 0;}
@keyframes phoenixSwirl{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--spin)) translateX(10px) scale(.2)}18%{opacity:1}72%{opacity:.95;transform:translate(-50%,-50%) rotate(calc(var(--spin) + 320deg)) translateX(82px) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--spin) + 520deg)) translateX(24px) scale(.1)}}
.combat-message.revive{color:#ffd33d;text-shadow:0 0 12px #ffd33d,0 0 34px #ff8a00,0 8px 0 rgba(0,0,0,.72);}


/* Patch: global swipe movement, fractional damage hearts, and sleepy ghost cleanup. */
.tile.hero.hero-sleeping .hero-img,
.tile.hero.hero-sleeping .tile-content > img{
  transform-origin:50% 78%;
  animation:heroSleepBreath 1.85s ease-in-out infinite;
  filter:brightness(.78) saturate(.82) drop-shadow(0 0 8px rgba(190,210,255,.38));
}
.tile.hero.hero-sleeping::after{
  content:'Z';
  position:absolute;
  right:8%;
  top:2%;
  z-index:6;
  pointer-events:none;
  color:#dfe8ff;
  font-family:var(--arcade-font,Impact,fantasy);
  font-size:clamp(.72rem,2.2vw,1.15rem);
  text-shadow:0 0 8px rgba(210,230,255,.9),0 2px 0 #000;
  animation:heroSleepZ 1.9s ease-in-out infinite;
}
@keyframes heroSleepBreath{
  0%,100%{transform:translateY(1px) rotate(-1deg) scale(.98)}
  50%{transform:translateY(-2px) rotate(1.5deg) scale(1.025)}
}
@keyframes heroSleepZ{
  0%{opacity:0;transform:translate(0,8px) scale(.75)}
  25%,70%{opacity:.9}
  100%{opacity:0;transform:translate(12px,-18px) scale(1.25)}
}
.ghost-death-flee{
  pointer-events:none!important;
  z-index:10020!important;
  animation:ghostDeathFlee .92s cubic-bezier(.12,.75,.18,1) forwards!important;
  transform-origin:50% 50%;
}
@keyframes ghostDeathFlee{
  0%{opacity:.95;filter:brightness(1.8) drop-shadow(0 0 24px rgba(230,245,255,.92));transform:translate(-50%,-50%) scale(1)}
  45%{opacity:.72;filter:brightness(2.2) drop-shadow(0 0 38px rgba(255,255,255,.96));transform:translate(calc(-50% + var(--flee-x,90vw) * .22),-28vh) scale(.82) rotate(8deg)}
  100%{opacity:0;filter:blur(6px) brightness(2.8);transform:translate(calc(-50% + var(--flee-x,90vw)), -92vh) scale(.28) rotate(-18deg)}
}
.heart-ui-container.partial .heart-quarter.filled,
.meta-heart-container.partial .heart-quarter.filled{
  animation:quarterHeartPulse 1.1s ease-in-out infinite alternate;
}
@keyframes quarterHeartPulse{
  from{filter:drop-shadow(0 0 3px rgba(255,40,70,.75));transform:scale(.98)}
  to{filter:drop-shadow(0 0 8px rgba(255,75,95,1));transform:scale(1.04)}
}
@media (pointer:coarse){
  body:has(.game) .game{overscroll-behavior:none;}
}

/* Patch: asymmetric hero combat and hardmode golden hearts. */
.meta-heart-container.golden-meta-heart,
.heart-ui-container.golden-heart-ui .meta-heart-container{
  filter:drop-shadow(0 0 7px rgba(255,211,61,.9)) drop-shadow(0 0 16px rgba(255,146,0,.55));
}
.meta-heart-container.golden-meta-heart .heart-quarter.filled,
.heart-ui-container.golden-heart-ui .heart-quarter.filled{
  background:linear-gradient(135deg,#fff7b2,#ffd33d 48%,#ff9f1c 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 0 8px rgba(255,211,61,.75);
}
.heart-ui-container.golden-heart-ui.full{
  animation:goldenHeartIdle 1.8s ease-in-out infinite alternate;
}
@keyframes goldenHeartIdle{
  from{filter:drop-shadow(0 0 5px rgba(255,211,61,.45))}
  to{filter:drop-shadow(0 0 12px rgba(255,211,61,.95)) drop-shadow(0 0 22px rgba(255,138,0,.65))}
}
.tile .tile-content img[src$="heart_full.png"]{
  filter:drop-shadow(0 0 10px rgba(255,211,61,.9)) drop-shadow(0 0 20px rgba(255,154,0,.65));
  animation:goldenHeartTilePulse 1.2s ease-in-out infinite alternate;
}
@keyframes goldenHeartTilePulse{
  from{transform:scale(.94) rotate(-2deg)}
  to{transform:scale(1.08) rotate(2deg)}
}
.combat-message.hit::after{
  content:'';
}

/* Publish polish: swap minimap/status-effect positions. */
.game .mini-map{
  right:max(10px,env(safe-area-inset-right))!important;
}
.game .effect-panel{
  right:calc(max(10px,env(safe-area-inset-right)) + 92px)!important;
}
@media(max-width:700px){
  .game .mini-map{right:max(8px,env(safe-area-inset-right))!important;}
  .game .effect-panel{right:calc(max(8px,env(safe-area-inset-right)) + 76px)!important;}
}

/* Publish polish: physics-style combat actors. */
.combat-actor{
  position:fixed;
  z-index:260;
  transform:translate(-50%,-50%);
  pointer-events:none;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.35));
  will-change:transform,opacity,filter;
}
.combat-actor img{width:100%;height:100%;object-fit:cover;border-radius:4px;}
.combat-actor.hero.combat-hero-hit,
.combat-actor.hero.combat-monster-die{animation:combatHeroLunge .58s cubic-bezier(.18,.9,.22,1.18) both;}
.combat-actor.monster.combat-hero-hit{animation:combatMonsterRecoil .58s cubic-bezier(.2,.9,.25,1) both;}
.combat-actor.monster.combat-monster-die{animation:combatMonsterKO .82s cubic-bezier(.18,.9,.2,1) both;}
.combat-actor.hero.combat-hero-miss{animation:combatHeroMiss .62s ease-out both;}
.combat-actor.monster.combat-hero-miss{animation:combatMonsterLean .62s ease-out both;}
.combat-actor.hero.combat-monster-hit{animation:combatHeroHurt .68s cubic-bezier(.17,.84,.44,1) both;}
.combat-actor.monster.combat-monster-hit{animation:combatMonsterLunge .62s cubic-bezier(.18,.9,.22,1.15) both;}
.combat-actor.hero.combat-monster-dodge{animation:combatHeroDodge .62s ease-out both;}
.combat-actor.monster.combat-monster-dodge{animation:combatMonsterWhiff .62s ease-out both;}
.combat-actor.hero.combat-monster-block{animation:combatHeroBlock .58s ease-out both;}
.combat-actor.monster.combat-monster-block{animation:combatMonsterBounce .58s ease-out both;}
.combat-pop-label{
  position:fixed;
  z-index:270;
  transform:translate(-50%,-50%);
  pointer-events:none;
  font-family:var(--arcade-font, Impact, fantasy);
  font-size:clamp(1rem,4vw,2.35rem);
  font-weight:1000;
  letter-spacing:.08em;
  color:#fff7a4;
  text-shadow:0 2px 0 #000,0 0 12px rgba(255,211,61,.95),0 0 30px rgba(255,79,216,.45);
  animation:combatPopLabel .86s ease-out both;
}
.combat-pop-label.combat-monster-hit{color:#ff8080;text-shadow:0 2px 0 #000,0 0 16px rgba(255,40,40,.9);}
.combat-pop-label.combat-monster-dodge,.combat-pop-label.combat-monster-block{color:#8ffcff;text-shadow:0 2px 0 #000,0 0 16px rgba(69,243,255,.9);}
.combat-pop-label.combat-monster-die{color:#fff;text-shadow:0 2px 0 #000,0 0 18px rgba(255,255,255,.95),0 0 34px rgba(255,211,61,.9);}
@keyframes combatHeroLunge{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}38%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty) - 8px)) scale(1.18) rotate(-7deg);filter:drop-shadow(0 0 20px rgba(255,211,61,.9))}100%{opacity:0;transform:translate(-50%,-50%) scale(.82)}}
@keyframes combatMonsterRecoil{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}45%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.94) rotate(9deg);filter:brightness(1.55) drop-shadow(0 0 18px rgba(255,71,71,.8))}100%{opacity:0;transform:translate(-50%,-50%) scale(.88)}}
@keyframes combatMonsterKO{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}22%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty) - 10px)) scale(1.16) rotate(12deg);filter:brightness(1.8)}70%{opacity:1;transform:translate(calc(-50% + var(--tx) * 1.4),calc(-50% + var(--ty) + 40px)) scale(.72) rotate(38deg)}100%{opacity:0;transform:translate(calc(-50% + var(--tx) * 1.7),calc(-50% + var(--ty) + 74px)) scale(.35) rotate(80deg)}}
@keyframes combatHeroMiss{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}42%{transform:translate(calc(-50% + var(--tx) * .85),calc(-50% + var(--ty) * .85 - 10px)) scale(1.04) rotate(-18deg)}100%{opacity:0;transform:translate(calc(-50% + var(--rx)),calc(-50% + var(--ry))) scale(.8)}}
@keyframes combatMonsterLean{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.92)}30%,70%{opacity:1;transform:translate(calc(-50% + var(--tx) * -.35),calc(-50% + var(--ty) * -.35)) scale(1.04) rotate(7deg)}}
@keyframes combatMonsterLunge{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}40%{transform:translate(calc(-50% + var(--tx) * -1),calc(-50% + var(--ty) * -1 - 6px)) scale(1.16) rotate(8deg);filter:drop-shadow(0 0 20px rgba(255,71,71,.85))}100%{opacity:0;transform:translate(-50%,-50%) scale(.82)}}
@keyframes combatHeroHurt{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}30%{transform:translate(calc(-50% + var(--rx)),calc(-50% + var(--ry))) scale(1.05) rotate(-10deg);filter:brightness(1.7) drop-shadow(0 0 20px rgba(255,71,71,.9))}62%{transform:translate(calc(-50% + var(--rx) * -0.5),calc(-50% + var(--ry) * -0.5)) scale(.92) rotate(8deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.82)}}
@keyframes combatHeroDodge{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}35%{transform:translate(calc(-50% + var(--rx) * 1.8),calc(-50% + var(--ry) * 1.8 - 12px)) scale(1.08) rotate(-14deg);filter:drop-shadow(0 0 18px rgba(69,243,255,.9))}100%{opacity:0;transform:translate(-50%,-50%) scale(.78)}}
@keyframes combatMonsterWhiff{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}45%{transform:translate(calc(-50% + var(--tx) * -1.15),calc(-50% + var(--ty) * -1.15)) scale(1.1) rotate(18deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}}
@keyframes combatHeroBlock{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}35%{transform:translate(calc(-50% + var(--rx) * .45),calc(-50% + var(--ry) * .45)) scale(1.1);filter:drop-shadow(0 0 18px rgba(69,243,255,.9))}70%{transform:translate(calc(-50% + var(--rx) * -.25),calc(-50% + var(--ry) * -.25)) scale(.96)}100%{opacity:0;transform:translate(-50%,-50%) scale(.84)}}
@keyframes combatMonsterBounce{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}35%{transform:translate(calc(-50% + var(--tx) * -0.9),calc(-50% + var(--ty) * -0.9)) scale(1.08) rotate(6deg)}64%{transform:translate(calc(-50% + var(--tx) * .35),calc(-50% + var(--ty) * .35)) scale(.94) rotate(-8deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.82)}}
@keyframes combatPopLabel{0%{opacity:0;transform:translate(-50%,-30%) scale(.5) rotate(-4deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(2deg)}72%{opacity:1;transform:translate(-50%,-85%) scale(1)}100%{opacity:0;transform:translate(-50%,-130%) scale(.72)}}

/* Publish polish: last-heart danger state. */
body.last-heart-danger::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:245;
  border:clamp(6px,1.5vw,18px) solid rgba(255,20,36,.65);
  box-shadow:inset 0 0 42px rgba(255,0,20,.58), inset 0 0 110px rgba(130,0,0,.42), 0 0 28px rgba(255,20,36,.5);
  animation:lastHeartFramePulse 1.05s ease-in-out infinite;
}
#heartTrack .heart-ui-container.last-heart-beat{
  animation:lastHeartBeat .66s ease-in-out infinite!important;
  filter:drop-shadow(0 0 8px rgba(255,40,60,.9)) drop-shadow(0 0 18px rgba(255,0,0,.6));
}
@keyframes lastHeartFramePulse{0%,100%{opacity:.38;filter:brightness(.95)}50%{opacity:.86;filter:brightness(1.35)}}
@keyframes lastHeartBeat{0%,100%{transform:scale(1)}22%{transform:scale(1.24)}34%{transform:scale(.96)}52%{transform:scale(1.14)}72%{transform:scale(1)}}

.splash-start.loading { pointer-events: none; opacity: 0.9; animation: pdq-loading-pulse 0.9s ease-in-out infinite alternate; }
@keyframes pdq-loading-pulse { from { filter: brightness(0.95); transform: translateX(-50%) scale(0.99); } to { filter: brightness(1.18); transform: translateX(-50%) scale(1.02); } }


/* Mobile hot-path paint budget: keep the juice, trim the expensive glow stack. */
@media (max-width: 720px), (pointer: coarse) {
  .gem-waterfall-piece,
  .gem-waterfall-spark,
  .boss-reveal-spark,
  .fairy-spark,
  .tile-spark,
  .physics-gem {
    filter: none !important;
    box-shadow: none !important;
  }
  .danger-vignette,
  .screen-danger-frame {
    filter: none !important;
  }
}


/* Lava tile + HOT LAVA hazard */
body[data-game-mode="hardmode"]:not(.game-playing) .board-wrap::after,
body[data-game-mode="hardmode"]:not(.game-playing)::before{
  content:none!important;
  display:none!important;
}
.tile.lava-tile{
  box-shadow:inset 0 0 14px rgba(255,194,51,.18), 0 0 10px rgba(255,98,0,.20)!important;
}
.tile.lava-tile::after{
  content:'';
  position:absolute;
  inset:5%;
  pointer-events:none;
  border-radius:3px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,236,140,.26), rgba(255,170,0,.10) 34%, rgba(255,60,0,0) 72%),
    radial-gradient(circle at 50% 80%, rgba(255,56,0,.20), rgba(255,56,0,0) 68%);
  mix-blend-mode:screen;
  animation:lavaTileGlow 1.5s ease-in-out infinite alternate;
}
.tile.lava-tile img{
  filter:saturate(1.08) contrast(1.05);
}
@keyframes lavaTileGlow{
  from{opacity:.18; transform:scale(.98)}
  to{opacity:.42; transform:scale(1.02)}
}
body.hot-lava-active::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:28;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,214,74,.24), transparent 34%),
    radial-gradient(ellipse at 50% 100%, rgba(255,64,0,.34), transparent 42%),
    radial-gradient(ellipse at 0% 50%, rgba(255,179,52,.22), transparent 34%),
    radial-gradient(ellipse at 100% 50%, rgba(255,68,0,.28), transparent 34%);
  mix-blend-mode:screen;
  animation:hotLavaEdgePulse .9s ease-in-out infinite alternate;
}
body.hot-lava-active::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:27;
  pointer-events:none;
  box-shadow:inset 0 0 26px rgba(255,227,115,.45), inset 0 0 76px rgba(255,58,0,.36);
  animation:hotLavaEdgeBloom 1.05s ease-in-out infinite alternate;
}
@keyframes hotLavaEdgePulse{
  from{opacity:.38; filter:blur(10px) saturate(1.1)}
  to{opacity:.82; filter:blur(4px) saturate(1.4)}
}
@keyframes hotLavaEdgeBloom{
  from{opacity:.46}
  to{opacity:.9}
}
.hot-lava-banner{
  position:fixed;
  left:50%;
  top:20%;
  transform:translateX(-50%);
  z-index:190;
  pointer-events:none;
  font-weight:1000;
  font-size:clamp(1.8rem,7vw,4.5rem);
  letter-spacing:.08em;
  color:#ffe36b;
  text-shadow:0 0 10px rgba(255,220,110,.9),0 0 28px rgba(255,90,0,.92),0 4px 0 rgba(85,18,0,.9);
  animation:hotLavaBannerPop 1.1s cubic-bezier(.17,.83,.22,1) forwards;
}
@keyframes hotLavaBannerPop{
  0%{opacity:0; transform:translateX(-50%) scale(.66) translateY(12px)}
  18%{opacity:1; transform:translateX(-50%) scale(1.12) translateY(0)}
  82%{opacity:1; transform:translateX(-50%) scale(1)}
  100%{opacity:0; transform:translateX(-50%) scale(.95) translateY(-10px)}
}
.lava-viewport-spark{
  position:fixed;
  z-index:175;
  width:8px;
  height:12px;
  border-radius:70% 30% 70% 30%;
  pointer-events:none;
  background:radial-gradient(circle at 50% 75%, rgba(255,248,160,.96), rgba(255,179,43,.82) 40%, rgba(255,55,0,.18) 75%, rgba(255,55,0,0) 100%);
  box-shadow:0 0 10px rgba(255,213,77,.9),0 0 18px rgba(255,72,0,.55);
  transform:translate(-50%,-50%) scale(var(--ls,1));
  animation:lavaSparkRise .95s ease-out forwards;
}
@keyframes lavaSparkRise{
  0%{opacity:0; transform:translate(-50%,-50%) scale(calc(var(--ls,1)*.45))}
  14%{opacity:1}
  100%{opacity:0; transform:translate(calc(-50% + var(--lx)),calc(-50% + var(--ly))) scale(calc(var(--ls,1)*.1)) rotate(18deg)}
}
.mini-dot.lava-pos{background:#ff8a1c; box-shadow:0 0 4px rgba(255,156,44,.65)}


/* Arcade unlock polish: level readout under minimap + HARDMODE reveal */
.game .arcade-level-indicator{
  top:calc(max(10px,env(safe-area-inset-top)) + 88px)!important;
  right:max(10px,env(safe-area-inset-right))!important;
  width:82px!important;
  box-sizing:border-box!important;
  text-align:center!important;
  transform:none!important;
}
@media(max-width:700px){
  .game .arcade-level-indicator{
    top:calc(max(8px,env(safe-area-inset-top)) + 72px)!important;
    right:max(8px,env(safe-area-inset-right))!important;
    width:66px!important;
  }
}
#heroModeBtn.hardmode-unlock-pulse{
  animation:hardmodeModeButtonReveal 2.2s cubic-bezier(.15,.9,.2,1) both!important;
  border-color:#ffdf5f!important;
  color:#fff!important;
  background:linear-gradient(180deg,#4a1200,#120000)!important;
  box-shadow:0 0 16px rgba(255,211,61,.9),0 0 42px rgba(255,70,0,.75),inset 0 0 20px rgba(255,211,61,.22)!important;
}
@keyframes hardmodeModeButtonReveal{
  0%,100%{transform:scale(1);filter:brightness(1)}
  12%{transform:scale(1.12) rotate(-2deg);filter:brightness(1.6)}
  30%{transform:scale(1.05) rotate(2deg);filter:brightness(1.25)}
  48%{transform:scale(1.14) rotate(-1deg);filter:brightness(1.75)}
  68%{transform:scale(1.05) rotate(1deg);filter:brightness(1.3)}
  84%{transform:scale(1.18);filter:brightness(1.9)}
}

/* Stronger lava tile glow with white fire sparks */
.tile.lava-tile{
  box-shadow:inset 0 0 18px rgba(255,230,114,.36), inset 0 0 32px rgba(255,74,0,.24), 0 0 16px rgba(255,98,0,.34)!important;
}
.tile.lava-tile::after{
  inset:3%!important;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,210,.34), rgba(255,204,58,.22) 30%, rgba(255,72,0,.07) 64%, rgba(255,60,0,0) 82%),
    radial-gradient(circle at 45% 84%, rgba(255,82,0,.34), rgba(255,56,0,0) 72%)!important;
  animation:lavaTileGlowStrong 1.05s ease-in-out infinite alternate!important;
}
.tile.lava-tile::before{
  content:''!important;
  position:absolute!important;
  left:20%!important;
  right:20%!important;
  bottom:8%!important;
  top:auto!important;
  height:58%!important;
  pointer-events:none!important;
  z-index:3!important;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 14%, rgba(255,230,125,.75) 15% 28%, transparent 30%) 12% 82%/9px 9px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.9) 0 13%, rgba(255,230,125,.72) 14% 26%, transparent 30%) 48% 92%/7px 7px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.88) 0 12%, rgba(255,230,125,.68) 13% 25%, transparent 30%) 82% 78%/8px 8px no-repeat;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.8)) drop-shadow(0 0 9px rgba(255,183,64,.8));
  opacity:.72!important;
  animation:lavaTileWhiteSparks 1.15s ease-in-out infinite!important;
}
@keyframes lavaTileGlowStrong{
  from{opacity:.36; transform:scale(.98); filter:saturate(1.1)}
  to{opacity:.72; transform:scale(1.04); filter:saturate(1.55) brightness(1.18)}
}
@keyframes lavaTileWhiteSparks{
  0%{opacity:.2; transform:translateY(7px) scale(.72)}
  20%{opacity:.95}
  100%{opacity:0; transform:translateY(-16px) scale(.42)}
}


/* Hero select audio toggles */
.hero-audio-controls{
  position:fixed;
  top:max(10px,env(safe-area-inset-top));
  left:max(10px,env(safe-area-inset-left));
  z-index:160;
  display:flex;
  gap:7px;
  align-items:center;
  pointer-events:auto;
}
.hero-audio-btn{
  border:2px solid rgba(69,243,255,.78);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(13,22,35,.94),rgba(4,6,12,.96));
  color:#45f3ff;
  font-weight:1000;
  font-size:clamp(.64rem,1.9vw,.82rem);
  letter-spacing:.06em;
  padding:.42rem .58rem;
  box-shadow:0 0 12px rgba(69,243,255,.22), inset 0 0 10px rgba(69,243,255,.08);
  text-shadow:0 1px 0 #000;
  touch-action:manipulation;
  cursor:pointer;
}
.hero-audio-btn.off{
  border-color:rgba(255,71,71,.72);
  color:#ff7373;
  box-shadow:0 0 10px rgba(255,71,71,.18), inset 0 0 8px rgba(255,71,71,.06);
  opacity:.9;
}
.hero-audio-btn:focus-visible{outline:3px solid #fff;outline-offset:3px;}
#heroSelect.hidden .hero-audio-controls{display:none!important;}
@media(max-width:520px){
  .hero-audio-controls{gap:5px;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));}
  .hero-audio-btn{padding:.34rem .44rem;font-size:.62rem;}
}


/* Health refactor polish */
.hero-shop-buy.golden-heart-buy{border-color:#ffd33d;color:#ffe36b;box-shadow:0 0 12px rgba(255,211,61,.42), inset 0 0 16px rgba(255,211,61,.16)}
.heart-row-golden{filter:drop-shadow(0 0 7px rgba(255,211,61,.5));}
.heart-ui-container.temporary-golden-heart{opacity:.92;filter:hue-rotate(18deg) brightness(1.08) drop-shadow(0 0 8px rgba(255,255,255,.35));}


/* Bomb polish: chunky physics smoke, sparks, and monster bits */
.bomb-screen-shake{animation:bombScreenShake .38s cubic-bezier(.16,.84,.28,1) both!important;}
@keyframes bombScreenShake{
  0%,100%{transform:translate3d(0,0,0)}
  12%{transform:translate3d(-5px,3px,0)}
  24%{transform:translate3d(6px,-4px,0)}
  38%{transform:translate3d(-7px,-2px,0)}
  56%{transform:translate3d(5px,4px,0)}
  76%{transform:translate3d(-3px,2px,0)}
}
.bomb-blast-core{
  position:fixed;
  z-index:260;
  pointer-events:none;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle, rgba(255,255,235,.98) 0 12%, rgba(255,218,76,.94) 18%, rgba(255,92,0,.72) 39%, rgba(126,30,0,.45) 58%, rgba(0,0,0,0) 72%);
  box-shadow:0 0 22px rgba(255,235,140,.95),0 0 50px rgba(255,84,0,.78),0 0 88px rgba(255,30,0,.45);
  mix-blend-mode:screen;
  animation:bombBlastCore .72s cubic-bezier(.11,.9,.2,1) forwards;
}
@keyframes bombBlastCore{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  48%{opacity:.86;transform:translate(-50%,-50%) scale(1.75)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.45)}
}
.bomb-smoke-puff{
  position:fixed;
  z-index:255;
  width:clamp(18px,5vw,56px);
  height:clamp(18px,5vw,56px);
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(var(--bss,1));
  background:radial-gradient(circle at 42% 38%, rgba(242,232,201,.64), rgba(92,82,72,.50) 42%, rgba(24,21,22,.34) 72%, rgba(0,0,0,0) 100%);
  filter:blur(.65px);
  animation:bombSmokePuff 1.32s cubic-bezier(.12,.72,.18,1) forwards;
}
@keyframes bombSmokePuff{
  0%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--bss,1)*.25))}
  16%{opacity:.9}
  100%{opacity:0;transform:translate(calc(-50% + var(--bsx)),calc(-50% + var(--bsy))) scale(calc(var(--bss,1)*1.65)) rotate(18deg)}
}
.bomb-hot-spark{
  position:fixed;
  z-index:262;
  width:6px;
  height:6px;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  background:#fff6a6;
  box-shadow:0 0 8px #fff6a6,0 0 16px rgba(255,117,0,.92),0 0 26px rgba(255,0,0,.52);
  animation:bombHotSpark .82s ease-out forwards;
}
@keyframes bombHotSpark{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1.35)}
  72%{opacity:.95}
  100%{opacity:0;transform:translate(calc(-50% + var(--bpx)),calc(-50% + var(--bpy))) scale(.05)}
}
.monster-explosion-bit{
  position:fixed;
  z-index:263;
  width:clamp(12px,3vw,26px);
  height:clamp(12px,3vw,26px);
  pointer-events:none;
  border-radius:5px;
  transform:translate(-50%,-50%) scale(var(--mbs,1));
  box-shadow:0 0 8px rgba(255,60,45,.55), inset 0 0 0 1px rgba(0,0,0,.28);
  animation:monsterBitBurst 1.08s cubic-bezier(.13,.72,.18,1) forwards;
}
.monster-explosion-bit.boss-bit{width:clamp(14px,3.5vw,34px);height:clamp(14px,3.5vw,34px);box-shadow:0 0 12px rgba(255,35,20,.78),0 0 22px rgba(255,200,48,.45)}
@keyframes monsterBitBurst{
  0%{opacity:1;filter:brightness(1.7) saturate(1.8);transform:translate(-50%,-50%) scale(calc(var(--mbs,1)*.72)) rotate(0deg)}
  45%{opacity:1;filter:brightness(1.2) saturate(1.35);transform:translate(calc(-50% + var(--mbx)*.7),calc(-50% + var(--mby)*.7 - 16px)) scale(calc(var(--mbs,1)*1.05)) rotate(calc(var(--mbr)*.45))}
  100%{opacity:0;filter:brightness(.72) saturate(.8);transform:translate(calc(-50% + var(--mbx)),calc(-50% + var(--mby) + 36px)) scale(calc(var(--mbs,1)*.28)) rotate(var(--mbr))}
}


/* Golden hearts replace the normal 7-heart layout. */
.hero-heart-row.replacement-heart-row,
.heart-row.replacement-heart-row{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(3px,1vw,8px)!important;
}
.layered-heart-container{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:clamp(24px,5vw,38px);
  height:clamp(24px,5vw,38px);
  isolation:isolate;
}
.heart-track .layered-heart-container{width:24px;height:24px;}
@media(min-width:720px){.heart-track .layered-heart-container{width:30px;height:30px}}
@media(max-width:420px){.heart-track .layered-heart-container{width:21px;height:21px}}
.layered-heart-container .heart-layer,
.layered-heart-container .meta-heart-container{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.layered-heart-container .heart-layer-red{z-index:1;}
.layered-heart-container .heart-layer-gold{z-index:2;pointer-events:none;}
.hero-heart-row.golden-heart-row,.heart-row-golden{display:none!important;}
.meta-heart-container.golden-meta-heart{
  filter:drop-shadow(0 0 7px rgba(255,211,61,.9)) drop-shadow(0 0 16px rgba(255,146,0,.55));
}
.meta-heart-container.golden-meta-heart .heart-empty-base{opacity:0!important;}
.meta-heart-container.golden-meta-heart .heart-full-mask{opacity:0;z-index:3;filter:drop-shadow(0 0 8px rgba(255,211,61,.9)) drop-shadow(0 0 18px rgba(255,170,35,.7));}
.meta-heart-container.golden-meta-heart.full .heart-full-mask{opacity:1;}
.meta-heart-container.golden-meta-heart.partial .heart-full-mask{opacity:.12;}
.meta-heart-container.golden-meta-heart .heart-quarter.filled{
  background-image:url('../assets/ui/golden-heart.png');
  background-repeat:no-repeat;
  background-size:200% 200%;
  background-color:transparent!important;
  box-shadow:none!important;
  mix-blend-mode:normal;
  filter:drop-shadow(0 0 5px rgba(255,244,200,.95)) drop-shadow(0 0 10px rgba(255,184,58,.8));
}
.meta-heart-container.golden-meta-heart .heart-quarter.q0{background-position:left top;}
.meta-heart-container.golden-meta-heart .heart-quarter.q1{background-position:left bottom;}
.meta-heart-container.golden-meta-heart .heart-quarter.q2{background-position:right bottom;}
.meta-heart-container.golden-meta-heart .heart-quarter.q3{background-position:right top;}
.layered-heart-container.has-gold{filter:drop-shadow(0 0 8px rgba(255,211,61,.65));}
.layered-heart-container.gold-full{animation:goldenHeartIdle 1.8s ease-in-out infinite alternate;}
.tile .tile-content img[src$="golden-heart.png"]{filter:drop-shadow(0 0 12px rgba(255,219,99,.95)) drop-shadow(0 0 24px rgba(255,166,30,.75));}

/* Golden heart glow tuned down by roughly 60%. */
.meta-heart-container.golden-meta-heart{
  filter:drop-shadow(0 0 3px rgba(255,211,61,.36)) drop-shadow(0 0 7px rgba(255,146,0,.22))!important;
}
.meta-heart-container.golden-meta-heart .heart-full-mask{
  filter:drop-shadow(0 0 3px rgba(255,211,61,.36)) drop-shadow(0 0 7px rgba(255,170,35,.28))!important;
}
.meta-heart-container.golden-meta-heart .heart-quarter.filled{
  filter:drop-shadow(0 0 2px rgba(255,244,200,.38)) drop-shadow(0 0 4px rgba(255,184,58,.32))!important;
}
.layered-heart-container.has-gold{
  filter:drop-shadow(0 0 3px rgba(255,211,61,.26))!important;
}
.tile .tile-content img[src$="golden-heart.png"]{
  filter:drop-shadow(0 0 5px rgba(255,219,99,.38)) drop-shadow(0 0 10px rgba(255,166,30,.30))!important;
}
@keyframes goldenHeartIdle{
  from{filter:drop-shadow(0 0 2px rgba(255,211,61,.18))}
  to{filter:drop-shadow(0 0 5px rgba(255,211,61,.38)) drop-shadow(0 0 9px rgba(255,138,0,.26))}
}


/* Patch: crisp golden-heart quarters. Partial golden hearts should show only
   the filled quarters; the old faint full-heart mask made damaged/shop hearts
   read as still full. */
.meta-heart-container.golden-meta-heart{overflow:hidden;}
.meta-heart-container.golden-meta-heart.partial .heart-full-mask{opacity:0!important;}
.meta-heart-container.golden-meta-heart:not(.full) .heart-full-mask{opacity:0!important;}
.meta-heart-container.golden-meta-heart.full .heart-full-mask{opacity:1!important;}
.meta-heart-container.golden-meta-heart.partial .heart-quarter.filled{opacity:1!important;mix-blend-mode:normal;}
.meta-heart-container.golden-meta-heart.partial .heart-quarter:not(.filled){opacity:0!important;}
.layered-heart-container.gold-partial{filter:drop-shadow(0 0 2px rgba(255,211,61,.22))!important;}

/* Canvas/WebGL migration: the dungeon board is now rendered into a single
   high-DPI canvas. The grid buttons remain as transparent hit targets so the
   existing gameplay, keyboard/focus behavior, pointer handling, and FX anchor
   rectangles keep working without per-tile image DOM churn. */
.board{position:relative;isolation:isolate;contain:layout paint style;}
.board-canvas-render-layer{position:absolute;inset:0;z-index:0;pointer-events:none;display:block;width:100%;height:100%;}
.board>.canvas-hit-tile,.board>.board-hit-tile{position:relative!important;z-index:1!important;background:transparent!important;border-color:transparent!important;color:transparent!important;box-shadow:none!important;text-shadow:none!important;outline-color:transparent;opacity:1;}
.board>.canvas-hit-tile::before,.board>.canvas-hit-tile::after,.board>.board-hit-tile::before,.board>.board-hit-tile::after{content:none!important;display:none!important;}
.board>.canvas-hit-tile img,.board>.canvas-hit-tile .tile-content,.board>.canvas-hit-tile .boss-stack-count,.board>.canvas-hit-tile .hero-frame-gameplay,.board>.board-hit-tile img,.board>.board-hit-tile .tile-content,.board>.board-hit-tile .boss-stack-count,.board>.board-hit-tile .hero-frame-gameplay{display:none!important;}
.board>.canvas-hit-tile:focus-visible,.board>.board-hit-tile:focus-visible{outline:2px solid var(--cyan)!important;outline-offset:-4px;}

/* Canvas edge visibility fix:
   The canvas renderer keeps DOM buttons as hit targets, but many older tile
   rules have higher specificity than .canvas-hit-tile and were still painting
   floor/border/hero backgrounds above the canvas. That made the 12x12 edge and
   edge-position hero look covered by solid brown/dark blocks. Force every
   canvas hit target fully transparent while preserving focus/accessibility. */
.board > .tile.canvas-hit-tile,
.board > .tile.canvas-hit-tile.border,
.board > .tile.canvas-hit-tile.outer-floor,
.board > .tile.canvas-hit-tile.floor-mossy,
.board > .tile.canvas-hit-tile.hidden-tile,
.board > .tile.canvas-hit-tile.removed,
.board > .tile.canvas-hit-tile.hero,
.board > .tile.canvas-hit-tile.enemy-alert,
.board > .tile.canvas-hit-tile.target-valid,
.board > .tile.canvas-hit-tile.target-selected,
.board > .tile.canvas-hit-tile.target-cursor,
body[data-theme] .board > .tile.canvas-hit-tile {
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  color:transparent!important;
  filter:none!important;
  outline-color:transparent!important;
  text-shadow:none!important;
  transform:none!important;
  animation:none!important;
}
.board > .tile.canvas-hit-tile::before,
.board > .tile.canvas-hit-tile::after,
.board > .tile.canvas-hit-tile.hero::before,
.board > .tile.canvas-hit-tile.hero::after,
.board > .tile.canvas-hit-tile.hidden-tile::after,
.board > .tile.canvas-hit-tile.invincible-hero::after {
  content:none!important;
  display:none!important;
}
.board > .tile.canvas-hit-tile:focus-visible {
  outline:2px solid var(--cyan)!important;
  outline-offset:-4px!important;
}

/* Canvas hit targets must never run legacy tile animations. Several old tile
   classes (enemy-alert, exit-pulse, hero-slide, lava, invincible) animate
   transform/filter on .tile. Those transforms change getBoundingClientRect(),
   which can make canvas-anchored FX appear to pulse or drift. The canvas owns
   all visible board rendering now, so hit targets stay motionless. */
.board > .tile.canvas-hit-tile,
.board > .tile.canvas-hit-tile *,
.board > .tile.canvas-hit-tile::before,
.board > .tile.canvas-hit-tile::after {
  animation:none!important;
  transition:none!important;
  transform:none!important;
  filter:none!important;
}


/* Canvas reveal migration: tile-break is now a small physics canvas that
   overlays the exact tile being revealed. */
.tile-physics-explosion-layer{
  position:fixed;
  z-index:1200;
  pointer-events:none;
  overflow:visible;
  transform:translateZ(0);
  will-change:transform,opacity;
}

/* Canvas grid sizing: make the visible canvas cover the complete 12x12 board,
   including the outer ring and the gaps between cells. */
.board{
  width:calc((var(--tile) * 12) + (var(--board-gap,2px) * 11))!important;
  height:calc((var(--tile) * 12) + (var(--board-gap,2px) * 11))!important;
}
.board-canvas-render-layer{
  width:calc((var(--tile) * 12) + (var(--board-gap,2px) * 11))!important;
  height:calc((var(--tile) * 12) + (var(--board-gap,2px) * 11))!important;
}

/* Shared Canvas FX migration layer: gameplay particles, bomb blasts, item-use
   feedback, and boss sequence sprites render here instead of through many DOM
   nodes and CSS keyframes. */
.pdq-canvas-fx-layer{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:1300;
  pointer-events:none;
  contain:layout style paint;
  transform:translateZ(0);
}

/* WebGL screen FX overlay: screen-space flames, danger pulses, lava glow,
   celebrations, and flash effects. Kept pointer-transparent and independent
   of board layout/camera math. */
.pdq-webgl-screen-fx-layer{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:10040;
  pointer-events:none;
  contain:layout style paint;
  transform:translateZ(0);
}

/* Screen pulses now live in WebGL. Disable the old pseudo-element overlays
   when the WebGL layer is present so we do not double-flash the viewport. */
body.screen-fx-webgl-ready.last-heart-danger::after,
body.screen-fx-webgl-ready.trap-screen-flash::after,
body.screen-fx-webgl-ready.monster-screen-flash::after,
body.screen-fx-webgl-ready.combat-hurt-flash::after,
body.screen-fx-webgl-ready.combat-hit-flash::after,
body.screen-fx-webgl-ready.hot-lava-active::before,
body.screen-fx-webgl-ready.hot-lava-active::after{
  content:none!important;
  display:none!important;
}

/* Patch: when a golden heart layer is present, the red layer is only a layout
   base. Prevent red full/quarter pieces from visually bleeding through missing
   golden quarters in the HUD and hero shop. */
.layered-heart-container.has-gold .heart-layer-red .heart-full-mask,
.layered-heart-container.has-gold .heart-layer-red .heart-quarter.filled{
  opacity:0!important;
}
.layered-heart-container.has-gold .heart-layer-red .heart-empty-base{
  opacity:1!important;
}
.layered-heart-container .heart-layer-gold{
  z-index:5!important;
}


/* Patch: golden hearts use golden-heart.png as a clipped overlay over the
   normal red heart. Missing golden quarters intentionally reveal the red
   heart underneath in the HUD and hero shop. */
.meta-heart-container.golden-meta-heart .heart-empty-base{
  opacity:0!important;
}
.meta-heart-container.golden-meta-heart .heart-full-mask{
  content:url('../assets/ui/golden-heart.png');
  opacity:0!important;
  filter:drop-shadow(0 0 4px rgba(255,211,61,.48)) drop-shadow(0 0 8px rgba(255,170,35,.32))!important;
}
.meta-heart-container.golden-meta-heart.full .heart-full-mask{
  opacity:1!important;
}
.meta-heart-container.golden-meta-heart.partial .heart-full-mask,
.meta-heart-container.golden-meta-heart:not(.full) .heart-full-mask{
  opacity:0!important;
}
.meta-heart-container.golden-meta-heart .heart-quarter.filled{
  background-image:url('../assets/ui/golden-heart.png')!important;
  background-repeat:no-repeat!important;
  background-size:200% 200%!important;
  background-color:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  filter:drop-shadow(0 0 3px rgba(255,244,200,.55)) drop-shadow(0 0 6px rgba(255,184,58,.42))!important;
}
.meta-heart-container.golden-meta-heart .heart-quarter.q0{background-position:left top!important;}
.meta-heart-container.golden-meta-heart .heart-quarter.q1{background-position:left bottom!important;}
.meta-heart-container.golden-meta-heart .heart-quarter.q2{background-position:right bottom!important;}
.meta-heart-container.golden-meta-heart .heart-quarter.q3{background-position:right top!important;}
.layered-heart-container.has-gold .heart-layer-red .heart-full-mask,
.layered-heart-container.has-gold .heart-layer-red .heart-quarter.filled{
  opacity:revert!important;
}
.layered-heart-container.has-gold .heart-layer-red .heart-empty-base{
  opacity:.72!important;
}
.layered-heart-container .heart-layer-gold{
  z-index:5!important;
  pointer-events:none;
}
.tile .tile-content img[src$="golden-heart.png"]{
  filter:drop-shadow(0 0 5px rgba(255,219,99,.38)) drop-shadow(0 0 10px rgba(255,166,30,.30))!important;
}

/* Final ordering: undo the previous red-suppression patch explicitly.
   The red heart layer is the base health art below the clipped gold overlay. */
.layered-heart-container.has-gold .heart-layer-red .meta-heart-container.full .heart-full-mask{
  opacity:1!important;
}
.layered-heart-container.has-gold .heart-layer-red .meta-heart-container.partial .heart-full-mask{
  opacity:.08!important;
}
.layered-heart-container.has-gold .heart-layer-red .heart-quarter.filled{
  opacity:.95!important;
}
.layered-heart-container.has-gold .heart-layer-red .heart-quarter:not(.filled){
  opacity:0!important;
}

/* Exit-stairs animation disabled for now. Tile reveal shatter now anchors in
   board/world space so it remains on the revealed cell while the camera follows
   the hero after movement. */
.tile-physics-explosion-layer.board-anchored{
  position:absolute!important;
  z-index:4!important;
  transform:none!important;
}

/* Splash refresh: dual buttons + password input + save-code panel. */
.arcade-cabinet{cursor:default;}
.splash-action-row,
.splash-code-panel{grid-row:5;align-self:start;width:min(660px,86vw);justify-self:center;margin-top:clamp(8px,1.8vw,18px);}
.splash-action-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,18px);}
.splash-panel-btn{position:relative;min-height:clamp(150px,23vw,228px);border:0;border-radius:18px;cursor:pointer;overflow:hidden;text-transform:uppercase;letter-spacing:.06em;font-weight:900;box-shadow:0 14px 28px rgba(0,0,0,.48), inset 0 0 0 2px rgba(255,255,255,.06);transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;}
.splash-panel-btn:hover{transform:translateY(-2px) scale(1.01);filter:brightness(1.06);}
.splash-panel-btn:active{transform:translateY(1px) scale(.99);}
.splash-panel-btn:focus-visible{outline:3px solid #fff;outline-offset:5px;}
.splash-code-launch{display:grid;place-items:center;gap:10px;padding:20px;border:5px solid #050507;background:linear-gradient(180deg,#0f2c32,#071419 58%,#03070a);color:#8ff7ff;box-shadow:0 14px 28px rgba(0,0,0,.5), inset 0 0 0 3px rgba(69,243,255,.22),0 0 18px rgba(69,243,255,.16);}
.splash-code-launch::before{content:'';position:absolute;inset:14px;border:3px solid rgba(255,211,61,.28);border-radius:10px;pointer-events:none;}
.splash-panel-title{display:block;font-size:clamp(1.3rem,3.8vw,2.35rem);text-shadow:0 0 10px rgba(69,243,255,.4),0 .12em 0 rgba(0,0,0,.7);}
.splash-panel-sub{display:block;font-size:clamp(.78rem,1.9vw,1rem);letter-spacing:.18em;color:#ffe38b;text-shadow:0 0 8px rgba(255,211,61,.35);}

.splash-coin-btn{display:grid;grid-template-columns:minmax(52px,.42fr) 1fr;align-items:stretch;padding:0;border:14px solid #f13d33;background:#060607;color:#f13d33;box-shadow:0 14px 28px rgba(0,0,0,.52), inset 0 0 0 3px rgba(255,255,255,.03),0 0 18px rgba(241,61,51,.18);}
.splash-coin-btn::before{content:'';position:absolute;inset:18px;border:3px solid #f13d33;pointer-events:none;}
.coin-slot{position:relative;display:block;align-self:stretch;justify-self:stretch;margin:24px 0 24px 22px;border:0;background:#050507;box-shadow:inset 0 0 0 3px #f13d33;}
.coin-main{display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:22px 22px 20px 14px;align-items:center;text-align:center;}
.coin-price{display:block;font-size:clamp(2rem,6vw,3.6rem);line-height:.9;text-shadow:0 0 10px rgba(241,61,51,.2);}
.coin-copy{display:block;font-size:clamp(1rem,3.1vw,1.9rem);line-height:.92;}
.coin-footer{display:block;font-size:clamp(.74rem,1.85vw,.96rem);padding-top:10px;border-top:3px solid #f13d33;letter-spacing:.12em;}
.splash-coin-btn.loading .coin-price,.splash-coin-btn.loading .coin-copy,.splash-coin-btn.loading .coin-footer{color:#fff4b0;text-shadow:0 0 10px rgba(255,211,61,.35);}

.splash-code-panel{padding:18px 16px 16px;border:5px solid #050507;border-radius:16px;background:linear-gradient(180deg,#05110f,#020505 58%,#010202);box-shadow:0 14px 30px rgba(0,0,0,.58),inset 0 0 0 3px rgba(74,255,176,.12),0 0 18px rgba(74,255,176,.12);color:#6effa2;text-align:center;}
.splash-code-header{font-size:clamp(1rem,2.6vw,1.35rem);font-weight:900;letter-spacing:.16em;color:#f0f8ff;text-shadow:0 0 8px rgba(110,255,162,.28);margin-bottom:10px;}
.splash-code-slots{display:grid;grid-template-columns:repeat(13,minmax(18px,1fr));gap:5px;margin:0 auto 12px;max-width:720px;}
.splash-code-slot{min-height:44px;display:grid;place-items:center;border:2px solid rgba(110,255,162,.55);background:#000;color:#fff;font-size:clamp(1rem,2.8vw,1.4rem);font-weight:900;letter-spacing:.08em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 0 12px rgba(110,255,162,.08);}
.splash-code-slot.filled{border-color:#8bffbc;color:#8bffbc;box-shadow:0 0 12px rgba(110,255,162,.18),inset 0 0 0 1px rgba(255,255,255,.06);}
.splash-code-slot.cursor{animation:secretCursorPulse .85s step-end infinite;}
@keyframes secretCursorPulse{50%{box-shadow:0 0 0 rgba(0,0,0,0), inset 0 0 0 999px rgba(110,255,162,.12);}}
.splash-code-status{min-height:1.6em;margin-bottom:12px;font-size:clamp(.78rem,1.9vw,.98rem);letter-spacing:.08em;color:#c7ffd8;}
.splash-code-char-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;max-width:560px;margin:0 auto 12px;}
.splash-code-char{border:2px solid rgba(110,255,162,.4);background:#030807;color:#8bffbc;border-radius:6px;padding:.58rem 0;font-weight:900;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.45);}
.splash-code-char:hover{background:#08110f;color:#fff;}
.splash-code-char:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.25);}
.splash-code-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:560px;margin:0 auto;}
.splash-code-action{border:2px solid rgba(255,255,255,.22);background:#0b1210;color:#fff;border-radius:8px;padding:.72rem .5rem;font-weight:900;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.45);}
.splash-code-confirm{border-color:rgba(255,211,61,.78);background:#2a1d03;color:#ffe38b;box-shadow:0 4px 0 rgba(0,0,0,.45),0 0 12px rgba(255,211,61,.18);}

.progress-code-panel{margin:12px auto 0;padding:12px 14px;border:3px solid rgba(69,243,255,.4);border-radius:10px;background:linear-gradient(180deg,rgba(7,14,19,.96),rgba(3,5,9,.96));box-shadow:0 0 18px rgba(69,243,255,.12);display:grid;justify-items:center;gap:8px;width:min(360px,100%);}
.progress-code-label{font-size:.82rem;font-weight:900;letter-spacing:.22em;color:#c9faff;text-transform:uppercase;}
.progress-code-value{font-size:clamp(1.08rem,4.4vw,1.5rem);font-weight:900;letter-spacing:.22em;color:#fff;text-shadow:0 0 12px rgba(255,211,61,.28);}
.progress-code-copy{border:2px solid var(--accent);background:#17110a;color:#ffe38b;border-radius:7px;padding:.5rem .85rem;font-weight:900;cursor:pointer;}
.progress-code-copy:hover{box-shadow:0 0 14px rgba(255,211,61,.18);}

@media(max-width:720px){
  .splash-action-row{grid-template-columns:1fr;}
  .splash-panel-btn{min-height:136px;}
  .splash-coin-btn{grid-template-columns:78px 1fr;}
  .coin-slot{margin:18px 0 18px 16px;}
  .splash-code-char-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
}
@media(max-width:520px){
  .splash-code-slots{gap:4px;}
  .splash-code-slot{min-height:36px;font-size:.95rem;}
  .splash-code-char-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .splash-code-actions{grid-template-columns:repeat(2,1fr);}
  .progress-code-value{letter-spacing:.16em;}
}

/* Mobile polish: keep splash buttons side-by-side and tighten code input sizing. */
.splash-action-row{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:clamp(8px,1.6vw,14px)!important;
  width:min(560px,88vw)!important;
}
.splash-panel-btn{
  min-height:clamp(108px,18vw,166px)!important;
  border-radius:14px!important;
}
.splash-code-launch{padding:clamp(10px,2vw,16px)!important;border-width:4px!important;}
.splash-code-launch::before{inset:9px!important;border-width:2px!important;}
.splash-panel-title{font-size:clamp(.95rem,3.6vw,1.78rem)!important;line-height:1.04!important;}
.splash-panel-sub{font-size:clamp(.58rem,1.7vw,.78rem)!important;letter-spacing:.12em!important;}
.splash-coin-btn{grid-template-columns:clamp(34px,8vw,58px) 1fr!important;border-width:clamp(6px,1.8vw,10px)!important;}
.splash-coin-btn::before{inset:clamp(8px,1.8vw,14px)!important;border-width:2px!important;}
.coin-slot{margin:clamp(14px,3.2vw,22px) 0 clamp(14px,3.2vw,22px) clamp(10px,2.6vw,18px)!important;box-shadow:inset 0 0 0 2px #f13d33!important;}
.coin-main{gap:clamp(4px,1vw,8px)!important;padding:clamp(10px,2.4vw,18px) clamp(10px,2.4vw,18px) clamp(10px,2.4vw,16px) clamp(7px,1.7vw,12px)!important;}
.coin-price{font-size:clamp(1.25rem,5vw,2.55rem)!important;}
.coin-copy{font-size:clamp(.68rem,2.75vw,1.28rem)!important;line-height:.92!important;}
.coin-footer{font-size:clamp(.48rem,1.55vw,.72rem)!important;padding-top:clamp(4px,1vw,8px)!important;border-top-width:2px!important;letter-spacing:.08em!important;}

.splash-code-panel{
  width:min(600px,91vw)!important;
  padding:clamp(10px,2vw,16px)!important;
  margin-top:clamp(6px,1.4vw,14px)!important;
  max-height:min(52svh,560px);
  overflow:auto;
  scrollbar-width:thin;
}
.splash-code-header{font-size:clamp(.78rem,2.2vw,1.12rem)!important;margin-bottom:clamp(6px,1.2vw,10px)!important;}
.splash-code-slots{gap:clamp(3px,.9vw,6px)!important;margin-bottom:clamp(7px,1.5vw,11px)!important;}
.splash-code-slot{min-height:clamp(30px,6.3vw,42px)!important;font-size:clamp(.82rem,2.6vw,1.22rem)!important;border-width:2px!important;}
.splash-code-status{font-size:clamp(.62rem,1.8vw,.86rem)!important;margin-bottom:clamp(7px,1.4vw,10px)!important;}
.splash-code-char-grid{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:clamp(4px,.9vw,6px)!important;margin-bottom:clamp(7px,1.4vw,10px)!important;}
.splash-code-char{padding:clamp(.35rem,1.5vw,.52rem) 0!important;font-size:clamp(.72rem,2.1vw,.95rem)!important;border-radius:5px!important;}
.splash-code-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(5px,1vw,8px)!important;}
.splash-code-action{padding:clamp(.44rem,1.5vw,.64rem) .35rem!important;font-size:clamp(.6rem,1.7vw,.84rem)!important;}
@media(max-width:420px){
  .splash-action-row{width:min(360px,92vw)!important;gap:7px!important;}
  .splash-panel-btn{min-height:98px!important;}
  .splash-code-panel{max-height:min(58svh,520px);}
  .splash-code-char-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;}
  .splash-code-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-height:760px){
  .splash-code-panel{max-height:48svh;}
  .splash-panel-btn{min-height:96px!important;}
}


/* Hero select save-code polish: center it above mode/start; code itself copies. */
#heroSelect.hero-select:not(.hidden){
  grid-template-areas:
    "title title title title"
    ". code code ."
    ". mode start ."
    "heroes heroes heroes heroes"
    "shop shop shop shop"!important;
  row-gap:clamp(8px,1.35vw,14px)!important;
}
#progressCodePanel.progress-code-panel{
  grid-area:code!important;
  justify-self:center!important;
  align-self:center!important;
  width:min(430px,86vw)!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
  margin:0 auto!important;
  padding:10px 16px!important;
  border:2px solid rgba(69,243,255,.56)!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(9,18,30,.82),rgba(2,5,10,.9))!important;
  box-shadow:0 0 18px rgba(69,243,255,.16),inset 0 0 16px rgba(69,243,255,.06)!important;
  text-align:center!important;
}
#progressCodePanel .progress-code-label{
  display:block!important;
  font-size:clamp(.72rem,2vw,.95rem)!important;
  line-height:1!important;
  letter-spacing:.2em!important;
  color:#c9faff!important;
  text-shadow:0 0 8px rgba(69,243,255,.35)!important;
}
#progressCodeValue.progress-code-value{
  display:block!important;
  cursor:pointer!important;
  user-select:all!important;
  padding:2px 8px 4px!important;
  border-radius:8px!important;
  font-size:clamp(1.12rem,4.3vw,1.72rem)!important;
  line-height:1.05!important;
  letter-spacing:.18em!important;
  color:#fff!important;
  text-shadow:0 0 9px rgba(255,211,61,.45),0 2px 0 #000!important;
  transition:background .12s ease,transform .12s ease,box-shadow .12s ease!important;
}
#progressCodeValue.progress-code-value:hover,
#progressCodeValue.progress-code-value:focus-visible{
  background:rgba(255,211,61,.1)!important;
  box-shadow:0 0 0 2px rgba(255,211,61,.32)!important;
  outline:none!important;
}
#progressCodeValue.progress-code-value:active{transform:scale(.98)!important;}
.progress-code-copy{display:none!important;}
@media(max-width:560px){
  #heroSelect.hero-select:not(.hidden){
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-areas:
      "title title"
      "code code"
      "mode start"
      "heroes heroes"
      "shop shop"!important;
  }
  #progressCodePanel.progress-code-panel{width:min(360px,92vw)!important;padding:9px 12px!important;}
}


/* Save-code v2: longer portable codes with gems. */
.splash-code-panel{width:min(760px,92vw)!important;}
.splash-code-slots{grid-template-columns:repeat(13,minmax(18px,1fr))!important;max-width:720px!important;}
.splash-code-slot{min-height:clamp(30px,5.2vw,44px);font-size:clamp(.72rem,2.2vw,1.3rem);padding:0 .1rem;}
@media(max-width:560px){.splash-code-slots{gap:3px!important;}.splash-code-slot{min-height:30px;font-size:.72rem;letter-spacing:0;}.splash-code-panel{padding:14px 10px 12px!important;}.splash-code-status{font-size:.7rem;}}

/* Latest build keeps the copy action on the code itself, so style the helper line too. */
.progress-code-hint{display:block!important;font-size:.68rem!important;line-height:1!important;letter-spacing:.16em!important;font-weight:900!important;color:#ffe38b!important;opacity:.88!important;text-shadow:0 0 8px rgba(255,211,61,.22)!important;}
#progressCodeValue.progress-code-value.copied{background:rgba(255,211,61,.16)!important;box-shadow:0 0 0 2px rgba(255,211,61,.42),0 0 16px rgba(255,211,61,.18)!important;transform:scale(.985)!important;}



/* Patch: keep death/victory screens above every canvas/WebGL FX layer and reliably tappable. */
.game-over-overlay{
  z-index:22000!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
.game-over-overlay.hidden{
  display:none!important;
  pointer-events:none!important;
}
.game-over-overlay .play-again,
.game-over-overlay .death-share-btn,
.game-over-overlay .revive-hero-btn{
  position:relative;
  z-index:1;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}


/* Lighting/inventory patch: FX layers are always visual-only; the HUD wins taps even during boss + danger pulse. */
.pdq-canvas-fx-layer,
.pdq-webgl-screen-fx-layer,
body.last-heart-danger::before,
body.last-heart-danger::after,
body.screen-fx-webgl-ready.last-heart-danger::before,
body.screen-fx-webgl-ready.last-heart-danger::after{
  pointer-events:none!important;
}
.bottom-hud,
.bottom-hud.player-panel,
#inventoryDock,
.inventory-dock,
.inventory-subpanel,
#inventoryDock *,
.inventory-dock *,
.inventory-subpanel *{
  position:relative;
  z-index:24000!important;
  pointer-events:auto!important;
}
body.boss-encounter-active.last-heart-danger .bottom-hud,
body.boss-encounter-active.last-heart-danger #inventoryDock{
  filter:drop-shadow(0 0 12px rgba(255,211,61,.32));
}

/* Keep HUD anchored after pointer-priority rules above. */
.bottom-hud,
.bottom-hud.player-panel{
  position:fixed!important;
  z-index:24000!important;
  pointer-events:auto!important;
}

/* Patch: let the splash code input participate in page scrolling instead of
   becoming a tiny nested scroll window. The arcade cabinet grows with the form,
   and the whole splash page scrolls naturally on shorter mobile screens. */
body:not(.game-playing){overflow-y:auto;}
.splash-screen:has(#splashCodePanel:not(.hidden)){
  min-height:100svh;
  height:auto!important;
  place-items:start center!important;
  align-items:start!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  padding-bottom:max(28px,env(safe-area-inset-bottom))!important;
}
.splash-screen:has(#splashCodePanel:not(.hidden)) .arcade-cabinet{
  min-height:auto!important;
  height:auto!important;
  overflow:visible!important;
  margin-block:clamp(8px,2.5vw,22px)!important;
}
.splash-screen:has(#splashCodePanel:not(.hidden)) .splash-code-panel,
#splashCodePanel.splash-code-panel{
  max-height:none!important;
  overflow:visible!important;
  scrollbar-width:auto!important;
}
@media(max-width:420px){
  .splash-screen:has(#splashCodePanel:not(.hidden)) .splash-code-panel{max-height:none!important;}
}
@media(max-height:760px){
  .splash-screen:has(#splashCodePanel:not(.hidden)) .splash-code-panel{max-height:none!important;}
}

/* Patch: old arcade insert-coin glow. Keep it soft and cabinet-y rather than
   neon-blinding; the glow breathes around the red frame and coin text. */
.splash-coin-btn{
  animation:insertCoinCabinetGlow 2.25s ease-in-out infinite!important;
  filter:saturate(1.06);
}
.splash-coin-btn::after{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(circle at 62% 46%,rgba(255,75,48,.22),rgba(255,211,61,.08) 42%,transparent 70%);
  opacity:.6;
  mix-blend-mode:screen;
  animation:insertCoinFaceGlow 2.25s ease-in-out infinite!important;
}
.splash-coin-btn .coin-price,
.splash-coin-btn .coin-copy,
.splash-coin-btn .coin-footer{
  text-shadow:0 0 4px rgba(255,58,47,.52),0 0 12px rgba(255,58,47,.34),0 0 20px rgba(255,211,61,.16)!important;
}
.splash-coin-btn:hover{
  filter:saturate(1.15) brightness(1.08)!important;
}
@keyframes insertCoinCabinetGlow{
  0%,100%{box-shadow:0 14px 28px rgba(0,0,0,.52),inset 0 0 0 3px rgba(255,255,255,.03),0 0 14px rgba(241,61,51,.18),0 0 26px rgba(255,211,61,.05);}
  50%{box-shadow:0 16px 32px rgba(0,0,0,.56),inset 0 0 0 3px rgba(255,255,255,.045),0 0 24px rgba(241,61,51,.36),0 0 42px rgba(255,211,61,.16);}
}
@keyframes insertCoinFaceGlow{
  0%,100%{opacity:.42;transform:scale(.995);}
  50%{opacity:.78;transform:scale(1.01);}
}


/* ghost flyby visibility fix: keep WebGL sprite/particle overlay above board/HUD art while remaining click-through. */
.pdq-webgl-screen-fx-layer{z-index:10040!important;pointer-events:none!important;}


/* Ghost debug/fallback visibility patch: keeps the idle ghost readable even if
   a WebGL texture/layer/driver issue hides the sprite while particles still draw. */
.ghost-webgl-fallback{
  position:fixed!important;
  z-index:10055!important;
  left:0!important;
  width:clamp(104px,19vw,250px);
  height:auto!important;
  pointer-events:none!important;
  opacity:0;
  filter:drop-shadow(0 0 18px rgba(210,235,255,.62)) drop-shadow(0 0 38px rgba(140,92,255,.30));
  animation:ghostWebglFallbackFlyby 5.6s cubic-bezier(.16,.72,.24,1) forwards!important;
  transform-origin:center center;
  will-change:transform,opacity,filter;
}
@keyframes ghostWebglFallbackFlyby{
  0%{opacity:0;transform:translate3d(var(--from-x),0,0) scaleX(var(--ghost-scale,1)) scale(.58);filter:blur(4px) brightness(.55) drop-shadow(0 0 10px rgba(210,235,255,.2));}
  12%{opacity:.92;filter:blur(.4px) brightness(1.08) drop-shadow(0 0 20px rgba(210,235,255,.65)) drop-shadow(0 0 42px rgba(140,92,255,.34));}
  58%{opacity:.88;transform:translate3d(var(--mid-x),var(--ghost-drift,0px),0) scaleX(var(--ghost-scale,1)) scale(1.04);}
  82%{opacity:.72;}
  100%{opacity:0;transform:translate3d(var(--to-x),var(--ghost-drift-end,0px),0) scaleX(var(--ghost-scale,1)) scale(.68);filter:blur(5px) brightness(.42) drop-shadow(0 0 12px rgba(210,235,255,.25));}
}
.ghost-debug-marker{
  position:fixed;left:50%;top:16px;z-index:10070;transform:translateX(-50%);
  padding:.45rem .7rem;border:2px solid #ff4fd8;border-radius:8px;background:rgba(0,0,0,.76);color:#fff;
  font:900 12px/1 monospace;letter-spacing:.12em;pointer-events:none;box-shadow:0 0 18px rgba(255,79,216,.4);
}

/* Ghost drain anchor polish: flyby fallback CSS must not hijack drain ghosts. */
.ghost-drain.ghost-webgl-fallback{
  left:var(--ghost-drain-left,50%)!important;
  top:var(--ghost-drain-top,50%)!important;
  width:clamp(88px,15vw,180px)!important;
  opacity:.74!important;
  animation:ghostDrainAnchoredMaterialize 1.25s cubic-bezier(.08,.72,.14,1) both, ghostDrainAnchoredPulse 1.08s ease-in-out 1.25s infinite alternate!important;
  transform-origin:center center!important;
}
body.ghost-draining .ghost-drain.ghost-webgl-fallback{
  opacity:.62!important;
  animation:ghostDrainAnchoredPulse 1.08s ease-in-out infinite alternate!important;
}
@keyframes ghostDrainAnchoredMaterialize{
  0%{opacity:0;transform:translate(-50%,-50%) scale(2.25) rotate(-8deg);filter:blur(9px) brightness(.25) drop-shadow(0 0 12px rgba(170,205,255,.25));}
  58%{opacity:.9;transform:translate(-50%,-50%) scale(1.18) rotate(4deg);filter:blur(.8px) brightness(1.65) drop-shadow(0 0 34px rgba(230,245,255,.9));}
  100%{opacity:.68;transform:translate(-50%,-50%) scale(.92) rotate(0);filter:blur(0) brightness(1.18) drop-shadow(0 0 24px rgba(165,205,255,.72));}
}
@keyframes ghostDrainAnchoredPulse{
  from{opacity:.44;transform:translate(-50%,-52%) scale(.82) rotate(-2deg);filter:brightness(.9) drop-shadow(0 0 18px rgba(165,205,255,.7));}
  to{opacity:.82;transform:translate(-50%,-48%) scale(1.04) rotate(2deg);filter:brightness(1.55) drop-shadow(0 0 34px rgba(255,255,255,.95)) drop-shadow(0 0 46px rgba(105,0,160,.7));}
}


/* Hero select top controls polish: red BACK on the left, icon audio toggles on the right. */
#heroSelect .hero-audio-controls{
  position:fixed!important;
  top:max(10px,env(safe-area-inset-top))!important;
  left:max(10px,env(safe-area-inset-left))!important;
  right:max(10px,env(safe-area-inset-right))!important;
  z-index:170!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  pointer-events:none!important;
}
#heroSelect.hidden .hero-audio-controls{display:none!important;}
.hero-audio-toggle-group{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  pointer-events:auto!important;
}
#heroBackBtn.hero-back-btn{
  pointer-events:auto!important;
  min-width:74px!important;
  border-color:#ffffff!important;
  background:linear-gradient(180deg,#ff3434,#b90000 62%,#660000)!important;
  color:#fff!important;
  text-shadow:0 2px 0 #000,0 0 8px rgba(255,255,255,.28)!important;
  box-shadow:0 0 13px rgba(255,38,38,.34),inset 0 0 0 2px rgba(255,255,255,.08),0 4px 0 rgba(0,0,0,.45)!important;
}
#heroBackBtn.hero-back-btn:hover{filter:brightness(1.08)!important;}
#heroBackBtn.hero-back-btn:active{transform:translateY(2px)!important;box-shadow:0 0 10px rgba(255,38,38,.3),inset 0 0 0 2px rgba(255,255,255,.06),0 2px 0 rgba(0,0,0,.55)!important;}
.hero-audio-icon-btn{
  min-width:42px!important;
  min-height:38px!important;
  display:grid!important;
  place-items:center!important;
  padding:.34rem .48rem!important;
  font-size:clamp(1.12rem,3vw,1.42rem)!important;
  line-height:1!important;
  letter-spacing:0!important;
}
.hero-audio-icon-btn.off{
  color:#ff7373!important;
  filter:saturate(.95)!important;
}
@media(max-width:520px){
  #heroSelect .hero-audio-controls{top:max(8px,env(safe-area-inset-top))!important;left:max(8px,env(safe-area-inset-left))!important;right:max(8px,env(safe-area-inset-right))!important;gap:7px!important;}
  #heroBackBtn.hero-back-btn{min-width:64px!important;padding:.34rem .48rem!important;font-size:.68rem!important;}
  .hero-audio-toggle-group{gap:5px!important;}
  .hero-audio-icon-btn{min-width:36px!important;min-height:34px!important;padding:.28rem .36rem!important;font-size:1.05rem!important;}
}


/* Patch: blue arcade start button and dense save-code input layout. */
.splash-coin-btn{
  border-color:#1f8cff!important;
  color:#dff4ff!important;
  background:radial-gradient(circle at 50% 18%,rgba(45,180,255,.22),rgba(4,10,26,.98) 48%,#02050d 100%)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.52), inset 0 0 0 3px rgba(255,255,255,.035),0 0 20px rgba(31,140,255,.34),0 0 44px rgba(69,243,255,.18)!important;
  animation:blueCoinGlow 1.9s ease-in-out infinite!important;
}
.splash-coin-btn::before{border-color:#40c8ff!important;box-shadow:0 0 14px rgba(64,200,255,.42)!important;}
.splash-coin-btn .coin-slot{box-shadow:inset 0 0 0 2px #40c8ff,0 0 14px rgba(64,200,255,.24)!important;}
.splash-coin-btn .coin-price,.splash-coin-btn .coin-copy,.splash-coin-btn .coin-footer{
  color:#e8fbff!important;
  text-shadow:0 0 9px rgba(64,200,255,.72),0 2px 0 #001528!important;
}
.splash-coin-btn .coin-footer{border-top-color:#40c8ff!important;}
@keyframes blueCoinGlow{
  0%,100%{filter:brightness(1);box-shadow:0 14px 28px rgba(0,0,0,.52),inset 0 0 0 3px rgba(255,255,255,.035),0 0 18px rgba(31,140,255,.3),0 0 36px rgba(69,243,255,.14);}
  50%{filter:brightness(1.12);box-shadow:0 14px 28px rgba(0,0,0,.52),inset 0 0 0 3px rgba(255,255,255,.04),0 0 28px rgba(31,140,255,.54),0 0 64px rgba(69,243,255,.28);}
}
#splashCodeSlots.splash-code-slots{grid-template-columns:repeat(9,minmax(18px,1fr))!important;max-width:720px!important;}
@media(max-width:520px){#splashCodeSlots.splash-code-slots{grid-template-columns:repeat(7,minmax(16px,1fr))!important;}}


/* Patch: 13-character dense save codes + native keyboard-first input. */
#splashStartBtn,#splashCodeBtn{pointer-events:auto!important;position:relative!important;z-index:3!important;touch-action:manipulation!important;}
#splashStartBtn::before,#splashStartBtn::after,#splashCodeBtn::before,#splashCodeBtn::after{pointer-events:none!important;}
.splash-coin-btn{border-color:#1f8cff!important;color:#e8fbff!important;background:radial-gradient(circle at 50% 18%,rgba(45,180,255,.28),rgba(4,10,26,.98) 48%,#02050d 100%)!important;animation:blueCoinGlow 1.9s ease-in-out infinite!important;}
.splash-coin-btn::before{border-color:#40c8ff!important;box-shadow:0 0 14px rgba(64,200,255,.42)!important;}
.splash-coin-btn::after{background:radial-gradient(circle at 62% 46%,rgba(64,200,255,.22),rgba(31,140,255,.12) 42%,transparent 72%)!important;}
.splash-coin-btn .coin-slot{box-shadow:inset 0 0 0 2px #40c8ff,0 0 14px rgba(64,200,255,.24)!important;}
.splash-coin-btn .coin-price,.splash-coin-btn .coin-copy,.splash-coin-btn .coin-footer{color:#e8fbff!important;text-shadow:0 0 9px rgba(64,200,255,.72),0 2px 0 #001528!important;}
.splash-coin-btn .coin-footer{border-top-color:#40c8ff!important;}
.splash-code-native-input{position:absolute!important;width:1px!important;height:1px!important;opacity:.01!important;left:50%!important;top:50%!important;z-index:-1!important;font-size:16px!important;border:0!important;background:transparent!important;color:transparent!important;caret-color:#8bffbc!important;}
.splash-code-panel{cursor:text;}
.splash-code-panel:focus-within .splash-code-slot.cursor{box-shadow:0 0 14px rgba(110,255,162,.32),inset 0 0 0 999px rgba(110,255,162,.16)!important;}
#splashCodeSlots.splash-code-slots{grid-template-columns:repeat(13,minmax(16px,1fr))!important;max-width:720px!important;}
.splash-code-char-grid{display:grid!important;grid-template-columns:1fr!important;gap:5px!important;max-width:720px!important;}
.splash-code-key-row{display:flex;justify-content:center;gap:5px;flex-wrap:nowrap;}
.splash-code-key-row .splash-code-char{min-width:0;flex:0 1 2.1rem;padding:.48rem .2rem!important;line-height:1!important;}
.splash-code-key-row:last-child{flex-wrap:wrap;}
.splash-code-key-row:last-child .splash-code-char{flex:0 0 2.05rem;}
#progressCodePanel.progress-code-panel{width:min(420px,92vw)!important;}
#progressCodeValue.progress-code-value{font-size:clamp(1rem,3.6vw,1.42rem)!important;letter-spacing:.12em!important;word-break:normal!important;overflow-wrap:normal!important;line-height:1.18!important;}
@media(max-width:520px){
  #splashCodeSlots.splash-code-slots{grid-template-columns:repeat(13,minmax(10px,1fr))!important;gap:3px!important;}
  .splash-code-slot{font-size:clamp(.62rem,2.6vw,.86rem)!important;min-height:28px!important;}
  .splash-code-key-row{gap:3px;}
  .splash-code-key-row .splash-code-char{font-size:.68rem!important;flex-basis:1.55rem;padding:.38rem .1rem!important;}
  .splash-code-key-row:last-child .splash-code-char{flex-basis:1.55rem;}
}


/* Patch: native keyboard + Metroid slots only. The real input is hidden but
   focusable; tapping the slot panel opens the mobile/desktop keyboard. */
#splashCodeCharGrid,.splash-code-char-grid,.splash-code-key-row,.splash-code-char{display:none!important;}
#splashCodePanel{position:relative;}
#splashCodeSlots{cursor:text;}
#splashCodeInputField.splash-code-native-input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:.01!important;
  left:50%!important;
  top:42%!important;
  z-index:0!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:transparent!important;
  caret-color:transparent!important;
  font-size:16px!important;
  letter-spacing:0!important;
  text-align:left!important;
  box-shadow:none!important;
  pointer-events:none!important;
  transform:translate(-50%,-50%)!important;
}
#splashCodeInputField.splash-code-native-input:focus{outline:0!important;box-shadow:none!important;}
#splashCodePanel:focus-within .splash-code-slot.cursor,
#splashCodeSlots:focus-within .splash-code-slot.cursor{box-shadow:0 0 14px rgba(110,255,162,.32),inset 0 0 0 999px rgba(110,255,162,.16)!important;}
#splashCodePanel .splash-code-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:420px!important;}

/* Final WebGL board phase: Canvas 2D remains as a safe raster/fallback source,
   while the visible dungeon board is composited through WebGL. Hit targets stay
   above both visual layers and remain transparent/input-only. */
.board-webgl-render-layer{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  display:block;
  width:100%;
  height:100%;
  contain:layout style paint;
  transform:translateZ(0);
}
.board.webgl-board-active > .board-canvas-render-layer{
  opacity:0;
}
.board.webgl-board-active > .board-webgl-render-layer{
  opacity:1;
}
.board-webgl-render-layer{
  width:calc((var(--tile) * 12) + (var(--board-gap,2px) * 11))!important;
  height:calc((var(--tile) * 12) + (var(--board-gap,2px) * 11))!important;
}


/* WebGL-port combat readability: larger actor doubles and boss phase 2 staging. */
.combat-actor{width:calc(var(--combat-actor-size, 1px) * 1);height:calc(var(--combat-actor-size, 1px) * 1);}
.combat-actor img{box-shadow:0 0 0 2px rgba(255,255,255,.16),0 0 18px rgba(69,243,255,.32);}
.board-wrap.boss-phase-two-shake{animation:bossPhaseTwoShake 1.1s cubic-bezier(.16,.9,.18,1) both!important;}
.tile.boss-phase-two-reveal .tile-content{animation:bossPhaseTwoReveal 1.38s cubic-bezier(.13,.8,.17,1) both!important;}
.tile.boss-phase-two-reveal::after{content:"";position:absolute;inset:-14%;border-radius:12px;pointer-events:none;background:radial-gradient(circle,rgba(255,211,61,.48),rgba(255,66,66,.28) 42%,transparent 72%);animation:bossPhaseTwoAura 1.42s ease-out both;z-index:5;}
@keyframes bossPhaseTwoShake{0%,100%{transform:translate3d(0,0,0)}12%{transform:translate3d(-8px,4px,0)}24%{transform:translate3d(7px,-5px,0)}36%{transform:translate3d(-5px,-3px,0)}48%{transform:translate3d(5px,4px,0)}64%{transform:translate3d(-3px,2px,0)}82%{transform:translate3d(2px,-1px,0)}}
@keyframes bossPhaseTwoReveal{0%{transform:scale(.9) rotate(-3deg);filter:brightness(1)}18%{transform:scale(1.28) rotate(3deg);filter:brightness(2.1) saturate(1.8)}42%{transform:scale(1.08) rotate(-2deg);filter:brightness(1.65) saturate(1.5)}70%{transform:scale(1.18) rotate(1deg);filter:brightness(1.9) saturate(1.65)}100%{transform:scale(1) rotate(0);filter:brightness(1.18) saturate(1.22)}}
@keyframes bossPhaseTwoAura{0%{opacity:0;transform:scale(.55)}18%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(1.65)}}

/* Final combat callout size restore: placed late to beat older mobile/polish overrides. */
.combat-message{top:60%!important;font-size:clamp(1.75rem,8.2vw,5.6rem)!important;transform:translate(-50%,-50%) scale(.9);-webkit-text-stroke:2px #050505!important;}
@media(max-width:700px){.combat-message{top:61%!important;font-size:clamp(1.45rem,9.4vw,4rem)!important;}}
@media(max-height:720px){.combat-message{top:58%!important;font-size:clamp(1.35rem,7.8vw,3.8rem)!important;}}

/* Legacy-feel WebGL tune pass: restore the Pegasus snapshot combat proportions while keeping the new renderer. */
.combat-actor{
  width:var(--combat-actor-size, auto)!important;
  height:var(--combat-actor-size, auto)!important;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.35))!important;
}
.combat-actor img{
  box-shadow:none!important;
  border-radius:4px!important;
}
.combat-message{
  top:68%!important;
  transform:translate(-50%,-50%) scale(.72)!important;
  font-size:clamp(1.15rem,5.8vw,3.4rem)!important;
  -webkit-text-stroke:1.25px #050505!important;
  text-shadow:0 0 7px #000,0 0 16px rgba(255,255,255,.55),0 5px 0 rgba(0,0,0,.52)!important;
}
@keyframes combatMessagePop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.62) rotate(-2deg)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(1deg)}
  74%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-56%) scale(.9) rotate(0)}
}
@media(max-width:900px){.combat-message{top:59%!important;font-size:clamp(1rem,5vw,2.5rem)!important;}}
@media(max-width:520px){.combat-message{top:61%!important;font-size:clamp(1rem,6.2vw,2.4rem)!important;max-width:92vw!important;}}

/* DEV MODE utility: tiny splash-only FX/Layer Debug launchers. Hidden until
   the dev challenge is completed in the current session. They sit under the
   copyright line so they do not compete with splash/start buttons. */
.splash-dev-tools-row{
  position:relative;
  z-index:18;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(6px,1.6vw,10px);
  margin:-3px auto 0;
  pointer-events:auto;
}
.splash-dev-lightning-lab-btn{
  position:relative;
  justify-self:center;
  align-self:center;
  z-index:18;
  width:clamp(26px,4.4vw,34px);
  height:clamp(26px,4.4vw,34px);
  display:grid;
  place-items:center;
  border:2px solid rgba(137,207,255,.72);
  border-radius:999px;
  padding:0;
  margin:0;
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.22),rgba(87,202,255,.14) 36%,rgba(8,10,22,.92) 78%);
  color:#f8fbff;
  font-family:"Courier New",monospace;
  font-weight:1000;
  font-size:clamp(.92rem,2.25vw,1.16rem);
  cursor:pointer;
  box-shadow:0 0 13px rgba(137,207,255,.32),inset 0 0 10px rgba(255,255,255,.07),0 5px 12px rgba(0,0,0,.38);
  text-shadow:0 0 8px rgba(137,207,255,.75);
}
.splash-dev-lightning-lab-btn span{line-height:1;filter:drop-shadow(0 0 7px rgba(137,207,255,.95));}
.splash-dev-lightning-lab-btn:hover{filter:brightness(1.15);transform:translateY(-1px);}
.splash-dev-lightning-lab-btn:active{transform:translateY(1px) scale(.96);}
.splash-dev-layer-debug-btn{
  border-color:rgba(255,211,61,.72);
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.18),rgba(255,211,61,.13) 36%,rgba(8,10,22,.92) 78%);
  box-shadow:0 0 13px rgba(255,211,61,.28),inset 0 0 10px rgba(255,255,255,.07),0 5px 12px rgba(0,0,0,.38);
  text-shadow:0 0 8px rgba(255,211,61,.72);
}
@media (max-width:520px){
  .splash-dev-tools-row{gap:7px;margin-top:-2px;}
  .splash-dev-lightning-lab-btn{width:28px;height:28px;font-size:.96rem;margin:0;}
}



/* DEV polish: compact combat stat bar with camera toggle. */
.game .combat-stats{
  width:auto!important;
  max-width:min(82vw,318px)!important;
  gap:clamp(3px,.9vw,7px)!important;
  padding:clamp(3px,.8vw,6px) clamp(4px,1vw,8px)!important;
}
.game .combat-stat{
  min-width:clamp(30px,7.2vw,48px)!important;
  padding:clamp(2px,.65vw,5px)!important;
}
.game .combat-stat img{
  width:clamp(17px,4.7vw,28px)!important;
  height:clamp(17px,4.7vw,28px)!important;
}
.game .combat-stat b{
  font-size:clamp(.76rem,2.7vw,1.12rem)!important;
}
.combat-camera-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:clamp(30px,7.2vw,48px)!important;
  align-self:stretch;
  border:2px solid #89cfff;
  border-radius:6px;
  background:linear-gradient(180deg,#133a75,#07192f);
  color:#fff;
  font-size:clamp(.82rem,3vw,1.2rem);
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 0 13px rgba(69,163,255,.34),inset 0 0 12px rgba(137,207,255,.16);
  text-shadow:0 0 8px rgba(137,207,255,.9);
  padding:0 clamp(5px,1vw,8px);
}
.combat-camera-toggle.active{
  background:linear-gradient(180deg,#1c6ec8,#0a2e5a);
  border-color:#dff3ff;
  box-shadow:0 0 18px rgba(137,207,255,.68),inset 0 0 12px rgba(255,255,255,.16);
}
.combat-camera-toggle:hover{filter:brightness(1.14);}
.combat-camera-toggle:active{transform:translateY(1px) scale(.97);}
@media(max-width:520px){
  .game .combat-stats{max-width:min(88vw,286px)!important;}
  .combat-camera-toggle{min-width:clamp(28px,8vw,42px)!important;}
}

/* Patch: FX Lab modal must block background taps/clicks while open. */
#pdqLightningLab{
  pointer-events:auto!important;
  touch-action:none!important;
}
#pdqLightningLab .pdq-lightning-lab-panel{
  pointer-events:auto!important;
  touch-action:auto!important;
}

/* Patch: camera toggle lives to the left of the combat stat bar, not inside it. */
.combat-stats-shell{
  position:fixed;
  top:auto!important;
  bottom:calc(var(--pdq-player-panel-h) + env(safe-area-inset-bottom) + clamp(6px,1.5vw,12px))!important;
  left:50%;
  transform:translateX(-50%);
  z-index:35;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:clamp(5px,1vw,8px);
  pointer-events:auto;
}
.game .combat-stats-shell .combat-stats,
.combat-stats-shell .combat-stats{
  position:static!important;
  top:auto!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:auto!important;
  max-width:min(72vw,254px)!important;
}
.combat-stats-shell .combat-camera-toggle{
  flex:0 0 auto;
  min-width:clamp(32px,7.4vw,48px)!important;
  min-height:100%;
  height:auto;
}
@media(max-width:900px){
  .combat-stats-shell{
    bottom:calc(var(--pdq-player-panel-h) + env(safe-area-inset-bottom) + clamp(6px,1.5vw,12px))!important;
  }
  .game .combat-stats-shell .combat-stats{max-width:min(74vw,238px)!important;}
}
@media(max-width:520px){
  .game .combat-stats-shell .combat-stats{max-width:min(76vw,224px)!important;}
  .combat-stats-shell .combat-camera-toggle{min-width:clamp(30px,8vw,42px)!important;}
}


.pdq-file-protocol-warning{position:fixed;left:12px;right:12px;bottom:12px;z-index:10000;padding:10px 12px;border:2px solid rgba(69,243,255,.75);border-radius:8px;background:rgba(5,8,18,.94);color:#fff;font-size:12px;line-height:1.35;box-shadow:0 0 20px rgba(69,243,255,.22),0 8px 30px rgba(0,0,0,.6);cursor:pointer;text-align:center}.pdq-file-protocol-warning strong{color:#45f3ff}.pdq-file-protocol-warning code{color:#ffd33d;background:rgba(255,255,255,.08);padding:1px 4px;border-radius:3px}

/* WebGL board underlay cleanup:
   The visible dungeon grid is now owned by the canvas/WebGL layers. Older
   theme rules still paint repeating floor textures on .board/.board-wrap as a
   fallback underlay; after local WebGL hardening those underlays can show up as
   a phantom grid behind the real board. Keep the DOM/input layer and real
   canvas tiles, but remove the legacy background art beneath them. */
.board.webgl-board-active,
.board.webgl-board-active[data-webgl-board-active="true"] {
  background-image:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
.board.webgl-board-active > .board-floor-layer,
.board.webgl-board-active > .board-floor-cell {
  display:none!important;
  visibility:hidden!important;
}
.board-wrap:has(.board.webgl-board-active) {
  background-image:none!important;
  background-color:transparent!important;
}
.board.webgl-board-active > .tile.canvas-hit-tile,
.board.webgl-board-active > .tile.canvas-hit-tile.outer-floor,
.board.webgl-board-active > .tile.canvas-hit-tile.hidden-tile,
.board.webgl-board-active > .tile.canvas-hit-tile.removed,
.board.webgl-board-active > .tile.canvas-hit-tile.floor-mossy {
  background:none!important;
  background-image:none!important;
  background-color:transparent!important;
}


/* WebGL board ghost-layer cleanup: final override.
   The Canvas/WebGL renderer owns all visible dungeon art. Keep the DOM hit grid
   and legacy floor underlays transparent so neither the outer ring nor the old
   repeating floor texture can show behind the real board. */
.board-wrap:has(.board.webgl-board-active),
.board.webgl-board-active{
  background:transparent!important;
  background-image:none!important;
  background-color:transparent!important;
  background-repeat:no-repeat!important;
}
.board.webgl-board-active::before,
.board.webgl-board-active::after,
.board-wrap:has(.board.webgl-board-active)::before,
.board-wrap:has(.board.webgl-board-active)::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
.board.webgl-board-active .board-floor-layer,
.board.webgl-board-active .board-floor-cell,
.board.webgl-board-active .tile-floor-underlay{
  display:none!important;
  visibility:hidden!important;
  background:none!important;
  background-image:none!important;
}
.board.webgl-board-active>.tile,
.board.webgl-board-active>.canvas-hit-tile,
.board.webgl-board-active>.tile:not(.border),
.board.webgl-board-active>.tile.hidden-tile:not(.border),
.board.webgl-board-active>.tile.removed:not(.border),
.board.webgl-board-active>.tile.floor-mossy:not(.border),
.board.webgl-board-active>.tile.outer-floor,
.board.webgl-board-active>.tile.border{
  background:transparent!important;
  background-image:none!important;
  background-color:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  outline:none!important;
}
.board.webgl-board-active>.tile::before,
.board.webgl-board-active>.tile::after,
.board.webgl-board-active>.canvas-hit-tile::before,
.board.webgl-board-active>.canvas-hit-tile::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}
.board.webgl-board-active>.tile.outer-floor,
.board.webgl-board-active>.tile.border{
  color:transparent!important;
}
.board.webgl-board-active .board-canvas-render-layer,
.board.webgl-board-active .board-webgl-render-layer{
  background:transparent!important;
  background-image:none!important;
}

/* DEV layer debugger: lets us isolate phantom board/background layers safely. */
body.pdq-layer-hide-board-canvas .board-canvas-render-layer{display:none!important;}
body.pdq-layer-hide-board-webgl .board-webgl-render-layer{display:none!important;}
body.pdq-layer-hide-floor-layer .board-floor-layer,
body.pdq-layer-hide-floor-layer .board-floor-cell{display:none!important;}
body.pdq-layer-hide-hit-tiles .board>.canvas-hit-tile,.board>.board-hit-tile{opacity:0!important;}
body.pdq-layer-show-hit-tiles .board>.canvas-hit-tile,.board>.board-hit-tile{opacity:1!important;background:rgba(255,0,255,.16)!important;border:1px solid rgba(255,0,255,.55)!important;color:transparent!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important;}
body.pdq-layer-show-hit-tiles .board>.canvas-hit-tile.border{background:rgba(0,0,255,.18)!important;}
body.pdq-layer-hide-board-bg .board{background:none!important;background-image:none!important;}
body.pdq-layer-hide-wrap-bg .board-wrap{background:none!important;background-image:none!important;}
body.pdq-layer-outline-board .board{outline:3px solid rgba(255,79,216,.95)!important;outline-offset:0;}
body.pdq-layer-outline-board .board-wrap{outline:3px solid rgba(69,243,255,.95)!important;outline-offset:3px;}
body.pdq-layer-outline-board .board-canvas-render-layer{outline:2px dashed rgba(255,211,61,.9)!important;}
body.pdq-layer-outline-board .board-webgl-render-layer{outline:2px dashed rgba(69,243,255,.9)!important;}
.pdq-layer-debug-panel{position:fixed;z-index:100000;right:10px;bottom:10px;width:min(340px,calc(100vw - 20px));max-height:min(74vh,620px);overflow:auto;padding:10px;border:2px solid rgba(69,243,255,.78);border-radius:10px;background:rgba(5,6,14,.94);color:#fff;font:700 12px/1.25 "Courier New",monospace;box-shadow:0 0 26px rgba(0,0,0,.7),0 0 18px rgba(69,243,255,.24);pointer-events:auto;}
.pdq-layer-debug-panel *{box-sizing:border-box;}
.pdq-layer-debug-panel header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;color:#45f3ff;font-weight:1000;letter-spacing:.04em;}
.pdq-layer-debug-panel button{border:1px solid rgba(69,243,255,.65);background:rgba(10,18,34,.9);color:#fff;border-radius:7px;padding:6px 8px;font:inherit;cursor:pointer;}
.pdq-layer-debug-panel button:hover{filter:brightness(1.18);}
.pdq-layer-debug-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0;}
.pdq-layer-debug-panel button.active{background:rgba(69,243,255,.28);border-color:#ffd33d;color:#fff7bc;}
.pdq-layer-debug-panel pre{white-space:pre-wrap;word-break:break-word;max-height:210px;overflow:auto;padding:7px;border-radius:7px;background:rgba(0,0,0,.45);color:#d7fbff;font-weight:700;}


/* Layer fix: board-wrap no longer owns dungeon texture. All visible floor art,
   including the non-playable outer ring, is painted by the canvas/WebGL board. */
.game .board-wrap,
.board-wrap:has(.board.webgl-board-active){
  background:none!important;
  background-image:none!important;
  background-color:transparent!important;
  background-repeat:no-repeat!important;
}
.board-wrap:has(.board.webgl-board-active)::before,
.board-wrap:has(.board.webgl-board-active)::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}

/* DEV utility: mobile debug recorder button. */
.splash-dev-mobile-debug-btn{
  border-color:rgba(120,255,180,.72);
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.18),rgba(120,255,180,.13) 36%,rgba(8,10,22,.92) 78%);
  box-shadow:0 0 13px rgba(120,255,180,.26),inset 0 0 10px rgba(255,255,255,.07),0 5px 12px rgba(0,0,0,.38);
  text-shadow:0 0 8px rgba(120,255,180,.72);
}
#pdqMobileDebugPanel{
  pointer-events:auto;
}
#pdqMobileDebugPanel .pdq-mobile-debug-panel pre{
  max-height:42vh;
  overflow:auto;
  white-space:pre-wrap;
}

/* Mobile FX Lab scroll/accessibility patch: keep tabs visible and let the modal scroll independently. */
#pdqLightningLab{
  overflow:hidden!important;
  touch-action:none!important;
  overscroll-behavior:contain!important;
}
#pdqLightningLab .pdq-lightning-lab-panel{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  min-height:0!important;
  max-height:min(94dvh,94vh)!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
}
#pdqLightningLab .pdq-lightning-lab-scroll{
  min-height:0!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
}
#pdqLightningLab .pdq-lightning-lab-head,
#pdqLightningLab .pdq-lightning-lab-tabs{
  flex:0 0 auto!important;
}
#pdqLightningLab .pdq-lightning-lab-tabs{
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:thin!important;
}
#pdqLightningLab .pdq-lightning-lab-tabs button{
  flex:0 0 auto!important;
  white-space:nowrap!important;
}
@media(max-width:640px){
  #pdqLightningLab{place-items:start center!important;padding:8px!important;}
  #pdqLightningLab .pdq-lightning-lab-panel{width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;padding:10px!important;}
  #pdqLightningLab .pdq-lightning-lab-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;}
  #pdqLightningLab .pdq-lightning-lab-canvas{max-height:28dvh!important;object-fit:contain!important;}
  #pdqLightningLab .pdq-lightning-lab-grid,
  #pdqLightningLab .pdq-fx-lab-grid-combat,
  #pdqLightningLab .pdq-fx-lab-grid-tiles,
  #pdqLightningLab .pdq-fx-lab-grid-unlocks{grid-template-columns:1fr!important;}
}

/* Mobile performance/input cleanup: invalid canvas hit tiles should not receive
   direct taps. Swipe handling remains on the board/game surface, but removed and
   outer-ring tiles no longer become noisy touch targets on phones. */
.board.webgl-board-active > .tile.canvas-hit-tile.outer-floor,
.board.webgl-board-active > .tile.canvas-hit-tile.removed,
.board.webgl-board-active > .tile.canvas-hit-tile.border {
  pointer-events: none !important;
}
body.pdq-layer-show-hit-tiles .board.webgl-board-active > .tile.canvas-hit-tile.outer-floor,
body.pdq-layer-show-hit-tiles .board.webgl-board-active > .tile.canvas-hit-tile.removed,
body.pdq-layer-show-hit-tiles .board.webgl-board-active > .tile.canvas-hit-tile.border {
  pointer-events: none !important;
}

/* Teleport targeting fix: mobile hit-tile cleanup made removed/floor cells ignore
   pointer events, but Teleport intentionally targets revealed passable floor/removed
   cells. When targeting is active, valid glowing cells must become tappable again. */
.board.webgl-board-active > .tile.canvas-hit-tile.target-valid,
.board.webgl-board-active > .tile.canvas-hit-tile.target-cursor,
.board.webgl-board-active > .tile.canvas-hit-tile.target-selected {
  pointer-events: auto !important;
  touch-action: manipulation;
}


/* Splash alignment + version polish: keep the arcade cabinet and every splash
   content band on a single centerline. The version label sits below the
   INPUT CODE / TAP TO PLAY row and above the bottom link row, away from the
   DEV MODE utility buttons near the copyright line. */
#splashScreen.splash-screen{
  width:100%!important;
  justify-items:center!important;
  align-items:center!important;
  padding-inline:clamp(12px,2.7vw,24px)!important;
}
#splashScreen .arcade-cabinet{
  justify-self:center!important;
  margin-inline:auto!important;
  width:min(820px,100%)!important;
  max-width:100%!important;
  transform:none!important;
}
#splashScreen .splash-copyright,
#splashScreen .splash-dev-tools-row,
#splashScreen .arcade-marquee,
#splashScreen .arcade-monitor,
#splashScreen .splash-action-row,
#splashScreen .splash-code-panel,
#splashScreen .splash-version-label{
  justify-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#splashScreen .arcade-marquee,
#splashScreen .arcade-monitor,
#splashScreen .splash-action-row,
#splashScreen .splash-code-panel,
#splashScreen .splash-version-label{
  width:min(660px,100%)!important;
  max-width:100%!important;
}
#splashScreen .splash-action-row{
  width:min(560px,100%)!important;
}
#splashScreen .splash-version-label{
  grid-row:6;
  align-self:start;
  display:block;
  text-align:center;
  margin-top:clamp(7px,1.3vw,13px)!important;
  padding:0 clamp(12px,2vw,18px);
  color:rgba(220,248,255,.78);
  font-size:clamp(.62rem,1.55vw,.82rem);
  font-weight:900;
  line-height:1.15;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-shadow:0 2px 0 #000,0 0 10px rgba(69,243,255,.22);
  pointer-events:none;
  z-index:5;
}
#splashScreen .splash-code-panel:not(.hidden) + .splash-version-label{
  display:none;
}
@media(max-width:520px){
  #splashScreen.splash-screen{padding-inline:12px!important;}
  #splashScreen .arcade-cabinet{width:100%!important;}
  #splashScreen .splash-action-row{width:min(360px,100%)!important;}
  #splashScreen .splash-version-label{
    margin-top:8px!important;
    font-size:.58rem;
    letter-spacing:.075em;
    padding-inline:6px;
  }
}

/* Patch: in-game debug launcher + iPhone safe-area/browser-chrome guard. */
:root{
  --pdq-visual-viewport-top:0px;
  --pdq-mobile-chrome-top-pad:0px;
  --pdq-safe-top:calc(env(safe-area-inset-top, 0px) + var(--pdq-visual-viewport-top) + var(--pdq-mobile-chrome-top-pad));
  --pdq-safe-right:env(safe-area-inset-right, 0px);
  --pdq-safe-bottom:env(safe-area-inset-bottom, 0px);
  --pdq-safe-left:env(safe-area-inset-left, 0px);
  --pdq-app-height:100svh;
  --pdq-app-width:100vw;
}
@media(pointer:coarse){
  :root{--pdq-mobile-chrome-top-pad:18px;}
}
@media(display-mode:standalone){
  :root{--pdq-mobile-chrome-top-pad:0px;}
}
html,body,#app{
  min-height:var(--pdq-app-height, 100svh)!important;
  overscroll-behavior:none;
}
.game{
  min-height:var(--pdq-app-height, 100svh)!important;
  padding-top:calc(72px + var(--pdq-safe-top))!important;
}
.board-wrap{
  max-height:calc(var(--pdq-app-height, 100svh) - 232px - var(--pdq-safe-top))!important;
}
.game .top-gems{top:max(10px,var(--pdq-safe-top))!important;left:calc(max(10px,var(--pdq-safe-left)) + 72px)!important;}
.game .mini-map{top:max(10px,var(--pdq-safe-top))!important;right:calc(max(10px,var(--pdq-safe-right)) + 92px)!important;}
.game .effect-panel{top:max(10px,var(--pdq-safe-top))!important;right:max(10px,var(--pdq-safe-right))!important;}
.game .score-display{top:max(10px,var(--pdq-safe-top))!important;}
.left-hud{top:calc(76px + var(--pdq-safe-top))!important;left:max(8px,var(--pdq-safe-left))!important;}
.die-display{top:max(8px,var(--pdq-safe-top))!important;}
.toast{top:calc(116px + var(--pdq-safe-top))!important;}
.hero-select,.panel.hero-select{
  padding-top:calc(1rem + var(--pdq-safe-top))!important;
  min-height:var(--pdq-app-height, 100svh)!important;
}
.reward-screen,.splash-screen{
  min-height:var(--pdq-app-height, 100svh)!important;
  padding-top:var(--pdq-safe-top)!important;
  padding-left:max(12px,var(--pdq-safe-left))!important;
  padding-right:max(12px,var(--pdq-safe-right))!important;
}
.combat-debug-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:clamp(32px,7.4vw,48px)!important;
  align-self:stretch;
  border:2px solid #45f3ff;
  border-radius:6px;
  background:linear-gradient(180deg,#173640,#061417);
  color:#fff;
  font-size:clamp(.82rem,3vw,1.2rem);
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 0 13px rgba(69,243,255,.32),inset 0 0 12px rgba(69,243,255,.12);
  text-shadow:0 0 8px rgba(69,243,255,.9);
  padding:0 clamp(5px,1vw,8px);
}
.combat-debug-toggle.hidden{display:none!important;}
.combat-debug-toggle.active{
  border-color:#dffcff;
  background:linear-gradient(180deg,#18646f,#09262d);
  box-shadow:0 0 20px rgba(69,243,255,.65),inset 0 0 14px rgba(255,255,255,.14);
}
.combat-debug-toggle:active{transform:translateY(1px) scale(.97);}
.combat-debug-menu{
  position:absolute;
  left:0;
  bottom:calc(100% + 8px);
  display:grid;
  grid-template-columns:repeat(4, minmax(42px, 1fr));
  gap:6px;
  width:min(94vw, 336px);
  padding:8px;
  border:2px solid rgba(69,243,255,.62);
  border-radius:10px;
  background:rgba(4,8,16,.94);
  box-shadow:0 0 22px rgba(69,243,255,.3),0 12px 36px rgba(0,0,0,.65);
  pointer-events:auto;
  touch-action:none;
  z-index:50;
}
.combat-debug-menu.hidden{display:none!important;}
.combat-debug-tool{
  display:grid;
  place-items:center;
  gap:2px;
  min-height:50px;
  border:2px solid rgba(255,211,61,.38);
  border-radius:7px;
  background:linear-gradient(180deg,#1b1628,#08080d);
  color:#fff;
  cursor:pointer;
  box-shadow:inset 0 0 10px rgba(0,0,0,.55),0 0 10px rgba(255,211,61,.12);
}
.combat-debug-tool span{font-size:1.15rem;line-height:1;}
.combat-debug-tool b{font-size:.55rem;line-height:1.05;text-transform:uppercase;letter-spacing:.04em;color:#ffd33d;}
.combat-debug-tool:active{transform:scale(.96);}
@media(max-width:520px){
  .combat-debug-menu{grid-template-columns:repeat(4, minmax(34px, 1fr));width:min(96vw, 304px);gap:5px;padding:6px;}
  .combat-debug-tool{min-height:46px;}
  .combat-debug-tool b{font-size:.48rem;}
  .combat-stats-shell{gap:5px!important;}
}

/* Patch: legacy-only save codes, first-run tutorial, tooltips, and livelier tile swapping. */
.tutorial-overlay{
  position:fixed;
  inset:0;
  z-index:2200;
  display:grid;
  place-items:center;
  padding:calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + 18px) 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(4px);
  pointer-events:auto;
}
.tutorial-overlay.hidden{display:none!important;}
.tutorial-card{
  width:min(520px, 94vw);
  border:2px solid rgba(255,211,61,.86);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(21,28,42,.98), rgba(5,7,12,.98));
  box-shadow:0 22px 80px rgba(0,0,0,.58), inset 0 0 0 1px rgba(69,243,255,.22);
  color:#f8ffe8;
  padding:22px;
  text-align:center;
  font-family:"Courier New", monospace;
}
.tutorial-page-count{font-weight:900;color:#45f3ff;letter-spacing:.18em;font-size:.82rem;margin-bottom:8px;}
.tutorial-card h2{margin:0 0 12px;font-size:clamp(1.5rem, 7vw, 2.35rem);color:#ffd33d;text-transform:uppercase;text-shadow:0 0 16px rgba(255,211,61,.35);}
.tutorial-card p{margin:0 auto 16px;max-width:34ch;font-size:clamp(1rem, 4.5vw, 1.24rem);line-height:1.35;font-weight:800;}
.tutorial-relic-row{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin:16px 0 8px;}
.tutorial-relic{display:grid;gap:6px;justify-items:center;min-width:82px;color:#c7ffd8;font-size:.8rem;text-transform:uppercase;font-weight:900;}
.tutorial-relic img{width:58px;height:58px;border-radius:12px;border:2px solid rgba(69,243,255,.62);box-shadow:0 0 18px rgba(69,243,255,.22);object-fit:cover;}
.tutorial-actions{display:flex;gap:12px;justify-content:center;margin-top:18px;}
.tutorial-btn{border:2px solid rgba(199,255,216,.8);border-radius:999px;background:#0d1722;color:#c7ffd8;font-weight:900;padding:10px 18px;letter-spacing:.08em;cursor:pointer;}
.tutorial-next{background:#ffd33d;color:#111;border-color:#fff1a8;box-shadow:0 0 18px rgba(255,211,61,.28);}
.pdq-tooltip{
  position:fixed;
  z-index:2300;
  transform:translate(-50%, -100%);
  max-width:min(310px, 86vw);
  padding:9px 12px;
  border-radius:12px;
  background:rgba(3,8,15,.94);
  color:#f8ffe8;
  border:1px solid rgba(69,243,255,.7);
  box-shadow:0 10px 34px rgba(0,0,0,.45), 0 0 18px rgba(69,243,255,.18);
  font:800 .84rem/1.25 "Courier New", monospace;
  pointer-events:none;
  text-align:center;
}
.pdq-tooltip.hidden{display:none!important;}
.tile-swap-fly{
  animation:pdqTileSwapFly 420ms cubic-bezier(.2,.9,.24,1.05) both;
  z-index:8!important;
}
@keyframes pdqTileSwapFly{
  0%{transform:translate(0,0) scale(1) rotate(0deg);filter:brightness(1);}
  45%{transform:translate(calc(var(--swap-x,0px) * .55), calc(var(--swap-y,0px) * .55 - 18px)) scale(1.16) rotate(7deg);filter:brightness(1.38) drop-shadow(0 0 12px rgba(69,243,255,.75));}
  100%{transform:translate(var(--swap-x,0px), var(--swap-y,0px)) scale(1) rotate(0deg);filter:brightness(1);}
}
.tile-swap-ghost{
  position:fixed;
  z-index:2150;
  border-radius:10px;
  pointer-events:none;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:rgba(12,18,30,.72);
  box-shadow:0 0 16px rgba(69,243,255,.45),0 8px 18px rgba(0,0,0,.35);
  animation:pdqTileSwapGhost 520ms cubic-bezier(.16,.92,.24,1.06) forwards;
}
.tile-swap-ghost img{width:100%;height:100%;object-fit:cover;display:block;}
.tile-swap-ghost.empty-swap-ghost{border:2px dashed rgba(199,255,216,.45);}
@keyframes pdqTileSwapGhost{
  0%{transform:translate(0,0) scale(1) rotate(0deg);opacity:.96;}
  48%{transform:translate(calc(var(--tx,0px) * .54), calc(var(--ty,0px) * .54 - 22px)) scale(1.18) rotate(9deg);opacity:1;filter:brightness(1.35);}
  100%{transform:translate(var(--tx,0px), var(--ty,0px)) scale(.98) rotate(0deg);opacity:0;filter:brightness(1);}
}

/* Patch: tutorial opt-out, page examples, inventory long-press bubbles, and mobile-safe Layer Debugger. */
.tutorial-dont-show{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:8px auto 0;
  padding:8px 12px;
  border:1px solid rgba(199,255,216,.45);
  border-radius:999px;
  background:rgba(0,0,0,.22);
  color:#c7ffd8;
  font:900 .86rem/1 "Courier New",monospace;
  cursor:pointer;
  user-select:none;
}
.tutorial-dont-show input{width:18px;height:18px;accent-color:#ffd33d;}
.tutorial-relic-row{min-height:78px;}
.tutorial-relic b{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pdq-tooltip.inventory-bubble{
  z-index:120500;
  max-width:min(260px,82vw);
  border-color:rgba(255,211,61,.88);
  box-shadow:0 10px 34px rgba(0,0,0,.52),0 0 22px rgba(255,211,61,.22);
}
.pdq-tooltip.inventory-bubble::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:14px;
  height:14px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(3,8,15,.94);
  border-right:1px solid rgba(255,211,61,.88);
  border-bottom:1px solid rgba(255,211,61,.88);
}
html.pdq-layer-hide-board-canvas .board-canvas-render-layer{display:none!important;}
html.pdq-layer-hide-board-webgl .board-webgl-render-layer{display:none!important;}
html.pdq-layer-hide-floor-layer .board-floor-layer,
html.pdq-layer-hide-floor-layer .board-floor-cell{display:none!important;}
html.pdq-layer-hide-hit-tiles .board>.canvas-hit-tile,.board>.board-hit-tile{opacity:0!important;}
html.pdq-layer-show-hit-tiles .board>.canvas-hit-tile,.board>.board-hit-tile{opacity:1!important;background:rgba(255,0,255,.16)!important;border:1px solid rgba(255,0,255,.55)!important;color:transparent!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important;}
html.pdq-layer-show-hit-tiles .board>.canvas-hit-tile.border{background:rgba(0,0,255,.18)!important;}
html.pdq-layer-hide-board-bg .board{background:none!important;background-image:none!important;}
html.pdq-layer-hide-wrap-bg .board-wrap{background:none!important;background-image:none!important;}
html.pdq-layer-outline-board .board{outline:3px solid rgba(255,79,216,.95)!important;outline-offset:0;}
html.pdq-layer-outline-board .board-wrap{outline:3px solid rgba(69,243,255,.95)!important;outline-offset:3px;}
html.pdq-layer-outline-board .board-canvas-render-layer{outline:2px dashed rgba(255,211,61,.9)!important;}
html.pdq-layer-outline-board .board-webgl-render-layer{outline:2px dashed rgba(69,243,255,.9)!important;}
.pdq-layer-debug-panel{
  z-index:130000!important;
  touch-action:auto!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.pdq-layer-debug-panel.mobile-layout{
  left:10px!important;
  right:10px!important;
  top:calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + 10px)!important;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 10px)!important;
  width:auto!important;
  max-height:none!important;
  overflow:auto!important;
}
.pdq-layer-debug-panel.mobile-layout .pdq-layer-debug-grid{grid-template-columns:1fr!important;}
.pdq-layer-debug-panel.mobile-layout pre{max-height:32vh!important;}

/* Patch: hold-only tooltip behavior and topmost bubbles. */
.pdq-tooltip{
  z-index:2147483000!important;
  pointer-events:none!important;
}
.pdq-tooltip.tile-bubble,
.pdq-tooltip.inventory-bubble{
  z-index:2147483000!important;
}
.pdq-tooltip.tile-bubble::after,
.pdq-tooltip.inventory-bubble::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:14px;
  height:14px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(3,8,15,.94);
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
}

/* Patch: suppress native iOS image callouts/drag menus while preserving PDQ pointer input. */
#app img,
#app canvas,
#app .tile,
#app .canvas-hit-tile,
#app .inventory-slot,
#app .relic-slot,
#app .merchant-button,
#app .reward-chest,
#app .theme-card,
#app .hero-card,
#app .tutorial-relic,
#app .effect-icon,
#app .mount-slot,
#app .pegasus-companion,
.pdq-no-callout{
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  touch-action:manipulation;
}
#app img,
#app canvas,
.pdq-no-callout img,
.pdq-no-callout canvas{
  -webkit-user-drag:none!important;
  user-drag:none!important;
}
#app input,
#app textarea,
#app select,
#app [contenteditable="true"],
.pdq-layer-debug-panel pre,
.pdq-layer-debug-panel textarea{
  -webkit-touch-callout:default!important;
  -webkit-user-select:text!important;
  user-select:text!important;
}


/* Patch: final HUD spacing, hero-select control breathing room, and hold-to-quit dialog. */
:root{
  --pdq-hud-gap:clamp(8px, 1.55vw, 12px);
  --pdq-mini-size:clamp(58px, 12vw, 76px);
  --pdq-effect-size:clamp(48px, 10vw, 58px);
}
.game .mini-map,
.game #miniMap{
  position:fixed!important;
  top:calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + var(--pdq-hud-gap))!important;
  right:calc(var(--pdq-safe-right, env(safe-area-inset-right, 0px)) + var(--pdq-hud-gap))!important;
  z-index:32!important;
  width:var(--pdq-mini-size)!important;
  height:var(--pdq-mini-size)!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(10,1fr)!important;
  grid-template-rows:repeat(10,1fr)!important;
  gap:1px!important;
  padding:5px!important;
}
.game .mini-dot{width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;border-radius:1px!important;}
.game .effect-panel,
.game #effectPanel{
  position:fixed!important;
  top:calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + var(--pdq-hud-gap))!important;
  right:calc(var(--pdq-safe-right, env(safe-area-inset-right, 0px)) + var(--pdq-hud-gap) + var(--pdq-mini-size) + var(--pdq-hud-gap))!important;
  z-index:32!important;
}
.game .effect-icon{
  width:var(--pdq-effect-size)!important;
  height:var(--pdq-effect-size)!important;
  border-radius:8px!important;
  box-sizing:border-box!important;
}
.game .arcade-level-indicator,
.game #arcadeLevelIndicator{
  position:fixed!important;
  top:calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + var(--pdq-hud-gap) + var(--pdq-mini-size) + 5px)!important;
  right:calc(var(--pdq-safe-right, env(safe-area-inset-right, 0px)) + var(--pdq-hud-gap))!important;
  width:var(--pdq-mini-size)!important;
  transform:none!important;
  text-align:center!important;
  z-index:32!important;
  box-sizing:border-box!important;
  padding:3px 4px!important;
  border:2px solid rgba(255,211,61,.72)!important;
  border-radius:7px!important;
  background:rgba(6,7,16,.88)!important;
  color:#ffd33d!important;
  font:900 clamp(.48rem,1.75vw,.72rem)/1 "Courier New",monospace!important;
  letter-spacing:.03em!important;
  box-shadow:0 0 12px rgba(255,211,61,.22)!important;
}
@media(max-width:520px){
  :root{--pdq-hud-gap:7px;--pdq-mini-size:56px;--pdq-effect-size:46px;}
  .game .arcade-level-indicator,.game #arcadeLevelIndicator{font-size:.48rem!important;padding:3px 2px!important;}
}
#heroSelect.hero-select:not(.hidden),
#heroSelect.hero-select{
  grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr)!important;
  grid-template-areas:
    "title title title title"
    "gems mode start ."
    "heroes heroes heroes heroes"
    "shop shop shop shop"
    "code code code code"!important;
  row-gap:clamp(9px,1.7vw,18px)!important;
  padding-top:calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + clamp(42px,7vw,72px))!important;
  padding-bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(16px,3vw,32px))!important;
}
#progressCodePanel.progress-code-panel{
  grid-area:code!important;
  position:static!important;
  justify-self:center!important;
  align-self:center!important;
  margin:clamp(6px,1.4vw,12px) auto 0!important;
  max-width:min(360px,88vw)!important;
  width:auto!important;
  z-index:2!important;
}
#heroAudioControls.hero-audio-controls{
  z-index:5!important;
  pointer-events:auto!important;
}
#heroBackBtn.hero-back-btn,
#heroMusicBtn.hero-audio-icon-btn,
#heroSfxBtn.hero-audio-icon-btn{z-index:6!important;}
#heroModeBtn.mode-btn,
#heroModeBtn.load-game-btn{
  min-width:clamp(132px,19vw,172px)!important;
  width:clamp(132px,19vw,172px)!important;
  max-width:172px!important;
  white-space:nowrap!important;
  text-align:center!important;
  font-size:clamp(.78rem,2.2vw,1rem)!important;
  letter-spacing:.08em!important;
}
.hero-quit-confirm{
  position:fixed;
  z-index:2147482500;
  transform:translate(-50%,-100%);
  display:grid;
  gap:7px;
  justify-items:center;
  width:max-content;
  max-width:min(260px,82vw);
  padding:10px 12px;
  border:2px solid rgba(255,211,61,.92);
  border-radius:14px;
  background:rgba(5,8,16,.96);
  color:#f8ffe8;
  box-shadow:0 14px 42px rgba(0,0,0,.58),0 0 24px rgba(255,211,61,.24);
  font-family:"Courier New",monospace;
  pointer-events:auto;
}
.hero-quit-confirm::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-9px;
  width:16px;
  height:16px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(5,8,16,.96);
  border-right:2px solid rgba(255,211,61,.92);
  border-bottom:2px solid rgba(255,211,61,.92);
}
.hero-quit-confirm-btn{
  position:relative;
  z-index:1;
  border:2px solid #ff6b6b;
  border-radius:999px;
  background:linear-gradient(180deg,#581516,#1d0708);
  color:#fff4d8;
  padding:9px 14px;
  font:1000 .9rem/1 "Courier New",monospace;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow:0 0 16px rgba(255,88,88,.32), inset 0 0 10px rgba(255,255,255,.08);
}
.hero-quit-confirm span{font:800 .68rem/1.1 "Courier New",monospace;color:#c7ffd8;opacity:.9;}


/* Patch: gem sprite polish, robust hero hold quit positioning, and mode-specific tutorial layout. */
:root{
  --pdq-left-hud-gap: var(--pdq-hud-gap, clamp(8px, 1.55vw, 12px));
  --pdq-top-gems-height: clamp(44px, 8.6vw, 52px);
  --pdq-merchant-size: clamp(48px, 9.6vw, 54px);
}
.game .top-gems,
.game #topGems{
  position: fixed !important;
  top: calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + var(--pdq-left-hud-gap)) !important;
  left: calc(var(--pdq-safe-left, env(safe-area-inset-left, 0px)) + var(--pdq-left-hud-gap)) !important;
  min-height: var(--pdq-top-gems-height) !important;
  z-index: 33 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.game .left-hud{
  position: fixed !important;
  left: calc(var(--pdq-safe-left, env(safe-area-inset-left, 0px)) + var(--pdq-left-hud-gap)) !important;
  top: calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + var(--pdq-left-hud-gap) + var(--pdq-top-gems-height) + var(--pdq-left-hud-gap)) !important;
  gap: var(--pdq-left-hud-gap) !important;
  z-index: 32 !important;
}
.game .left-hud .merchant-button,
.game #merchantButton{
  width: var(--pdq-merchant-size) !important;
  height: var(--pdq-merchant-size) !important;
}
.game .relic-hud{
  gap: max(6px, calc(var(--pdq-left-hud-gap) - 1px)) !important;
}
.game .tutorial-relic img{
  image-rendering: auto;
}


/* Patch: no-overlap gem/merchant stack and explicit game-menu quit. */
:root{
  --pdq-left-hud-gap: clamp(8px, 1.55vw, 12px);
  --pdq-top-gems-box: clamp(38px, 7vw, 46px);
  --pdq-left-stack-clearance: clamp(66px, 12vw, 78px);
  --pdq-merchant-size: clamp(48px, 9.6vw, 54px);
}
.game .top-gems,
.game #topGems{
  position: fixed !important;
  top: calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + var(--pdq-left-hud-gap)) !important;
  left: calc(var(--pdq-safe-left, env(safe-area-inset-left, 0px)) + var(--pdq-left-hud-gap)) !important;
  min-height: var(--pdq-top-gems-box) !important;
  height: var(--pdq-top-gems-box) !important;
  max-height: var(--pdq-top-gems-box) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 34 !important;
}
.game .top-gems img,
.game #topGems img{
  width: clamp(22px, 4.7vw, 28px) !important;
  height: clamp(22px, 4.7vw, 28px) !important;
  object-fit: contain !important;
}
.game .left-hud{
  position: fixed !important;
  left: calc(var(--pdq-safe-left, env(safe-area-inset-left, 0px)) + var(--pdq-left-hud-gap)) !important;
  top: calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + var(--pdq-left-stack-clearance)) !important;
  gap: var(--pdq-left-hud-gap) !important;
  z-index: 32 !important;
}
.game .left-hud .merchant-button,
.game #merchantButton{
  width: var(--pdq-merchant-size) !important;
  height: var(--pdq-merchant-size) !important;
}
.combat-debug-toggle:not(.hidden){
  display: grid !important;
}
.combat-debug-menu{
  min-width: min(312px, 96vw);
}
.combat-debug-tool-quit{
  border-color: rgba(255, 107, 107, .92) !important;
  color: #fff4d8 !important;
  background: linear-gradient(180deg, rgba(88,21,22,.95), rgba(22,7,8,.95)) !important;
  box-shadow: 0 0 14px rgba(255,88,88,.24), inset 0 0 10px rgba(255,255,255,.07) !important;
}
.combat-debug-tool-quit b{
  color: #fff4d8 !important;
}


/* Patch: compact single game menu, camera inside menu, and reward glow cleanup. */
#combatCameraToggle,
.combat-camera-toggle{display:none!important;}
.combat-stats-shell .combat-debug-toggle:not(.hidden){
  display:grid!important;
  place-items:center!important;
  min-width:clamp(34px,8vw,44px)!important;
  width:clamp(34px,8vw,44px)!important;
  padding:0!important;
}
.combat-debug-menu{
  width:max-content!important;
  min-width:0!important;
  max-width:min(96vw, 336px)!important;
  grid-template-columns:repeat(2, minmax(52px, 62px))!important;
  justify-content:start!important;
  gap:6px!important;
  padding:6px!important;
}
.combat-debug-menu.dev-active{
  grid-template-columns:repeat(3, minmax(52px, 62px))!important;
}
.combat-debug-tool{
  min-width:52px!important;
  min-height:46px!important;
  padding:5px 4px!important;
}
.combat-debug-tool-camera.active{
  border-color:rgba(69,243,255,.9)!important;
  background:linear-gradient(180deg,#14384a,#06141b)!important;
  box-shadow:0 0 14px rgba(69,243,255,.38), inset 0 0 10px rgba(255,255,255,.08)!important;
}
.combat-debug-tool span{font-size:1rem!important;}
.combat-debug-tool b{font-size:.48rem!important;letter-spacing:.025em!important;}
.reward-panel{
  box-shadow:0 10px 32px rgba(0,0,0,.58), inset 0 0 18px rgba(0,0,0,.72)!important;
}
.reward-panel h2{
  text-shadow:0 2px 0 rgba(0,0,0,.9)!important;
}
.reward-chest,
.reward-chest img,
.reward-chest.slot-spinning,
.reward-chest:disabled{
  filter:none!important;
  box-shadow:none!important;
}
.reward-result{
  text-shadow:0 2px 0 rgba(0,0,0,.9)!important;
}
.treasure-spark,
.treasure-center-spark{
  box-shadow:none!important;
  filter:none!important;
}


/* Hotfix: measured top-left HUD stack so gem counter never covers merchant pile. */
:root{
  --pdq-top-left-gap: var(--pdq-hud-gap, clamp(8px, 1.55vw, 12px));
  --pdq-top-gems-measured-height: 78px;
  --pdq-merchant-size: clamp(48px, 9.6vw, 54px);
}
.game .top-gems,
.game #topGems{
  position: fixed !important;
  top: calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + var(--pdq-top-left-gap)) !important;
  left: calc(var(--pdq-safe-left, env(safe-area-inset-left, 0px)) + var(--pdq-top-left-gap)) !important;
  z-index: 34 !important;
  box-sizing: border-box !important;
}
.game .left-hud{
  position: fixed !important;
  left: calc(var(--pdq-safe-left, env(safe-area-inset-left, 0px)) + var(--pdq-top-left-gap)) !important;
  top: calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + var(--pdq-top-left-gap) + var(--pdq-top-gems-measured-height) + var(--pdq-top-left-gap)) !important;
  gap: var(--pdq-top-left-gap) !important;
  z-index: 32 !important;
}
.game .left-hud .merchant-button,
.game #merchantButton{
  width: var(--pdq-merchant-size) !important;
  height: var(--pdq-merchant-size) !important;
}


/* DEV: HUD Layout Tuner for phone-side UI placement debugging. */
.hud-tuner-layer{
  position:fixed;
  inset:0;
  z-index:2147483000;
  pointer-events:none;
  font-family:"Courier New",monospace;
}
.hud-tuner-layer.hidden{display:none!important;}
.hud-tuner-box{
  position:fixed;
  z-index:2147483001;
  border:2px dashed rgba(69,243,255,.95);
  background:rgba(69,243,255,.08);
  color:#e9ffff;
  box-shadow:0 0 16px rgba(69,243,255,.5), inset 0 0 12px rgba(69,243,255,.12);
  pointer-events:auto;
  touch-action:none;
  padding:0;
  margin:0;
  border-radius:6px;
  cursor:move;
  overflow:visible;
}
.hud-tuner-box.selected{
  border-color:#ffd33d;
  background:rgba(255,211,61,.12);
  box-shadow:0 0 18px rgba(255,211,61,.62), inset 0 0 12px rgba(255,211,61,.16);
}
.hud-tuner-box.hidden{display:none!important;}
.hud-tuner-box span{
  position:absolute;
  left:0;
  top:-18px;
  max-width:210px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:2px 5px;
  border-radius:5px;
  background:rgba(0,0,0,.82);
  color:#fff;
  font:900 10px/1 "Courier New",monospace;
  text-shadow:0 1px 0 #000;
  pointer-events:none;
}
.hud-tuner-panel{
  position:fixed;
  right:calc(var(--pdq-safe-right, env(safe-area-inset-right, 0px)) + 8px);
  bottom:calc(var(--pdq-safe-bottom, env(safe-area-inset-bottom, 0px)) + 8px);
  z-index:2147483100;
  width:min(330px, calc(100vw - 16px));
  box-sizing:border-box;
  display:grid;
  gap:8px;
  padding:10px;
  border:2px solid rgba(69,243,255,.88);
  border-radius:12px;
  background:rgba(4,8,16,.96);
  color:#f5ffff;
  box-shadow:0 14px 42px rgba(0,0,0,.68),0 0 28px rgba(69,243,255,.34);
  font-family:"Courier New",monospace;
  pointer-events:auto;
  touch-action:manipulation;
}
.hud-tuner-panel.hidden{display:none!important;}
.hud-tuner-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#45f3ff;font-weight:1000;letter-spacing:.05em;text-transform:uppercase;}
.hud-tuner-head button{width:30px;height:30px;border:2px solid rgba(255,255,255,.3);border-radius:8px;background:#090912;color:#fff;font-weight:1000;}
.hud-tuner-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;font:900 12px/1 "Courier New",monospace;color:#ffd33d;text-transform:uppercase;}
.hud-tuner-row select{min-width:0;background:#05070d;color:#fff;border:2px solid rgba(69,243,255,.7);border-radius:7px;padding:7px;font:900 12px/1 "Courier New",monospace;}
.hud-tuner-readout{padding:6px 7px;border:1px solid rgba(255,255,255,.18);border-radius:7px;background:rgba(0,0,0,.45);color:#fff;font:900 12px/1.15 "Courier New",monospace;}
.hud-tuner-pad{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.hud-tuner-pad button,.hud-tuner-actions button{border:2px solid rgba(255,211,61,.55);border-radius:7px;background:linear-gradient(180deg,#1a1528,#06070d);color:#fff;padding:8px 5px;font:1000 11px/1 "Courier New",monospace;box-shadow:inset 0 0 10px rgba(0,0,0,.55);}
.hud-tuner-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.hud-tuner-actions button:first-child{grid-column:1/-1;border-color:rgba(69,243,255,.82);color:#dfffff;}
.hud-tuner-panel small{color:rgba(245,255,255,.72);font:800 10px/1.25 "Courier New",monospace;}
.combat-debug-tool-hud-tuner{border-color:rgba(69,243,255,.86)!important;background:linear-gradient(180deg,#123746,#06131a)!important;}
@media(max-width:520px){
  .hud-tuner-panel{left:8px;right:8px;bottom:calc(var(--pdq-safe-bottom, env(safe-area-inset-bottom, 0px)) + 8px);width:auto;}
  .hud-tuner-pad{grid-template-columns:repeat(4,1fr);}
  .hud-tuner-box span{font-size:9px;top:-16px;}
}


/* Patch: standardized top HUD clusters. This replaces scattered fixed positioning
   for top-left/top-right widgets with two predictable anchored groups. */
:root{
  --pdq-cluster-gap: var(--pdq-hud-gap, clamp(8px, 1.55vw, 12px));
  --pdq-left-cluster-width: max-content;
  --pdq-right-cluster-width: max-content;
}
.game .pdq-hud-cluster{
  position: fixed !important;
  z-index: 36 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  translate: 0 0;
}
.game #pdqTopLeftHud.pdq-hud-left-cluster{
  top: calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + var(--pdq-cluster-gap)) !important;
  left: calc(var(--pdq-safe-left, env(safe-area-inset-left, 0px)) + var(--pdq-cluster-gap)) !important;
  right: auto !important;
  bottom: auto !important;
  display: grid !important;
  grid-template-columns: max-content !important;
  grid-auto-rows: max-content !important;
  gap: var(--pdq-cluster-gap) !important;
  align-items: start !important;
  justify-items: start !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100vw - var(--pdq-safe-left, 0px) - var(--pdq-safe-right, 0px) - 24px) !important;
}
.game #pdqTopRightHud.pdq-hud-right-cluster{
  top: calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + var(--pdq-cluster-gap)) !important;
  right: calc(var(--pdq-safe-right, env(safe-area-inset-right, 0px)) + var(--pdq-cluster-gap)) !important;
  left: auto !important;
  bottom: auto !important;
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  grid-template-rows: max-content max-content !important;
  grid-template-areas:
    "effect map"
    ". arcade" !important;
  column-gap: var(--pdq-cluster-gap) !important;
  row-gap: 5px !important;
  align-items: start !important;
  justify-items: end !important;
  width: max-content !important;
  min-width: 0 !important;
}
.game #pdqTopLeftHud #topGems,
.game #pdqTopLeftHud .top-gems,
.game #pdqTopLeftHud .left-hud,
.game #pdqTopLeftHud #merchantButton,
.game #pdqTopRightHud #effectPanel,
.game #pdqTopRightHud .effect-panel,
.game #pdqTopRightHud #miniMap,
.game #pdqTopRightHud .mini-map,
.game #pdqTopRightHud #arcadeLevelIndicator,
.game #pdqTopRightHud .arcade-level-indicator{
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.game #pdqTopLeftHud #topGems,
.game #pdqTopLeftHud .top-gems{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: clamp(38px, 7vw, 46px) !important;
  height: auto !important;
  max-height: none !important;
  width: max-content !important;
  z-index: auto !important;
}
.game #pdqTopLeftHud #topGems img,
.game #pdqTopLeftHud .top-gems img{
  width: clamp(22px, 4.7vw, 28px) !important;
  height: clamp(22px, 4.7vw, 28px) !important;
  object-fit: contain !important;
}
.game #pdqTopLeftHud .left-hud{
  display: grid !important;
  grid-template-columns: max-content !important;
  grid-auto-rows: max-content !important;
  gap: var(--pdq-cluster-gap) !important;
  align-items: start !important;
  justify-items: center !important;
  width: max-content !important;
  z-index: auto !important;
}
.game #pdqTopLeftHud .left-hud .merchant-button,
.game #pdqTopLeftHud #merchantButton{
  width: var(--pdq-merchant-size, clamp(48px, 9.6vw, 54px)) !important;
  height: var(--pdq-merchant-size, clamp(48px, 9.6vw, 54px)) !important;
  justify-self: center !important;
}
.game #pdqTopLeftHud .relic-hud{
  position: static !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: max(6px, calc(var(--pdq-cluster-gap) - 1px)) !important;
  width: max-content !important;
}
.game #pdqTopRightHud #effectPanel,
.game #pdqTopRightHud .effect-panel{
  grid-area: effect !important;
  z-index: auto !important;
}
.game #pdqTopRightHud #miniMap,
.game #pdqTopRightHud .mini-map{
  grid-area: map !important;
  z-index: auto !important;
}
.game #pdqTopRightHud #arcadeLevelIndicator,
.game #pdqTopRightHud .arcade-level-indicator{
  grid-area: arcade !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
  z-index: auto !important;
}
@media(max-width:520px){
  :root{ --pdq-cluster-gap: 7px; }
}

/* Patch: precise top-left HUD block spacing.
   Merchant and gem counter share the first row; relics sit directly below the
   merchant column. The legacy .left-hud wrapper becomes layout-transparent so
   it can no longer drag the merchant/relic stack around as a separate fixed UI. */
:root{
  --pdq-left-block-gap: var(--pdq-cluster-gap, var(--pdq-hud-gap, clamp(8px, 1.55vw, 12px)));
  --pdq-left-block-merchant-size: clamp(46px, 9vw, 54px);
  --pdq-left-block-relic-size: clamp(44px, 8.8vw, 52px);
}
.game #pdqTopLeftHud.pdq-hud-left-cluster{
  display:grid!important;
  grid-template-columns:var(--pdq-left-block-merchant-size) max-content!important;
  grid-template-rows:max-content max-content!important;
  grid-template-areas:
    "merchant gems"
    "relics ."!important;
  column-gap:var(--pdq-left-block-gap)!important;
  row-gap:var(--pdq-left-block-gap)!important;
  align-items:start!important;
  justify-items:start!important;
  width:max-content!important;
  height:max-content!important;
}
.game #pdqTopLeftHud .left-hud{
  display:contents!important;
  position:static!important;
  width:auto!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.game #pdqTopLeftHud #merchantButton,
.game #pdqTopLeftHud .merchant-button{
  grid-area:merchant!important;
  width:var(--pdq-left-block-merchant-size)!important;
  height:var(--pdq-left-block-merchant-size)!important;
  min-width:var(--pdq-left-block-merchant-size)!important;
  min-height:var(--pdq-left-block-merchant-size)!important;
  align-self:start!important;
  justify-self:start!important;
  margin:0!important;
}
.game #pdqTopLeftHud #topGems,
.game #pdqTopLeftHud .top-gems{
  grid-area:gems!important;
  align-self:center!important;
  justify-self:start!important;
  margin:0!important;
  min-height:0!important;
  height:var(--pdq-left-block-merchant-size)!important;
  max-height:var(--pdq-left-block-merchant-size)!important;
  padding:0 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
}
.game #pdqTopLeftHud .relic-hud{
  grid-area:relics!important;
  align-self:start!important;
  justify-self:start!important;
  width:var(--pdq-left-block-merchant-size)!important;
  min-width:var(--pdq-left-block-merchant-size)!important;
  padding:5px!important;
  gap:var(--pdq-left-block-gap)!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-auto-rows:var(--pdq-left-block-relic-size)!important;
  place-items:center!important;
  box-sizing:border-box!important;
}
.game #pdqTopLeftHud .relic-slot{
  width:100%!important;
  height:var(--pdq-left-block-relic-size)!important;
  box-sizing:border-box!important;
}
@media(max-width:520px){
  :root{
    --pdq-left-block-gap:7px;
    --pdq-left-block-merchant-size:48px;
    --pdq-left-block-relic-size:43px;
  }
  .game #pdqTopLeftHud #topGems,
  .game #pdqTopLeftHud .top-gems{padding:0 8px!important;}
}

/* Fix: true top-left HUD component.
   Merchant/gems/relics now share one real DOM component instead of nested legacy
   fixed-position widgets. This final override neutralizes old top/left/fixed rules
   on the children so only the parent cluster anchors to the viewport. */
:root{
  --pdq-economy-gap: var(--pdq-cluster-gap, var(--pdq-hud-gap, clamp(8px, 1.55vw, 12px)));
  --pdq-economy-cell: clamp(46px, 9vw, 54px);
  --pdq-economy-relic-cell: clamp(43px, 8.4vw, 50px);
}
.game #pdqTopLeftHud.pdq-hud-left-cluster{
  position: fixed !important;
  top: calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + var(--pdq-economy-gap)) !important;
  left: calc(var(--pdq-safe-left, env(safe-area-inset-left, 0px)) + var(--pdq-economy-gap)) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(var(--hud-topLeftHud-x, 0px), var(--hud-topLeftHud-y, 0px)) !important;
  display: grid !important;
  grid-template-columns: max-content !important;
  grid-template-rows: max-content max-content !important;
  grid-template-areas: none !important;
  gap: var(--pdq-economy-gap) !important;
  align-items: start !important;
  justify-items: start !important;
  width: max-content !important;
  height: max-content !important;
  max-width: calc(100vw - var(--pdq-economy-gap) * 2) !important;
  z-index: 34 !important;
  pointer-events: auto !important;
}
.game #pdqTopLeftHud .pdq-top-left-hud-row{
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: var(--pdq-economy-gap) !important;
  width: max-content !important;
  height: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
.game #pdqTopLeftHud #merchantButton,
.game #pdqTopLeftHud .merchant-button{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(var(--hud-merchantButton-x, 0px), var(--hud-merchantButton-y, 0px)) !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 var(--pdq-economy-cell) !important;
  width: var(--pdq-economy-cell) !important;
  height: var(--pdq-economy-cell) !important;
  min-width: var(--pdq-economy-cell) !important;
  min-height: var(--pdq-economy-cell) !important;
  max-width: var(--pdq-economy-cell) !important;
  max-height: var(--pdq-economy-cell) !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: flex-start !important;
  justify-self: start !important;
  z-index: auto !important;
}
.game #pdqTopLeftHud #topGems,
.game #pdqTopLeftHud .top-gems{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(var(--hud-topGems-x, 0px), var(--hud-topGems-y, 0px)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  height: var(--pdq-economy-cell) !important;
  min-height: var(--pdq-economy-cell) !important;
  max-height: var(--pdq-economy-cell) !important;
  margin: 0 !important;
  padding: 0 10px !important;
  gap: 8px !important;
  align-self: flex-start !important;
  justify-self: start !important;
  z-index: auto !important;
  box-sizing: border-box !important;
}
.game #pdqTopLeftHud #topGems img,
.game #pdqTopLeftHud .top-gems img{
  flex: 0 0 auto !important;
  width: min(30px, calc(var(--pdq-economy-cell) - 16px)) !important;
  height: min(30px, calc(var(--pdq-economy-cell) - 16px)) !important;
  object-fit: contain !important;
}
.game #pdqTopLeftHud #relicHud,
.game #pdqTopLeftHud .relic-hud{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(var(--hud-relicHud-x, 0px), var(--hud-relicHud-y, 0px)) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: var(--pdq-economy-relic-cell) !important;
  gap: var(--pdq-economy-gap) !important;
  place-items: center !important;
  width: var(--pdq-economy-cell) !important;
  min-width: var(--pdq-economy-cell) !important;
  max-width: var(--pdq-economy-cell) !important;
  margin: 0 !important;
  padding: 5px !important;
  align-self: start !important;
  justify-self: start !important;
  box-sizing: border-box !important;
  z-index: auto !important;
}
.game #pdqTopLeftHud #relicHud.hidden,
.game #pdqTopLeftHud .relic-hud.hidden,
body[data-game-mode="arcade"] .game #pdqTopLeftHud #relicHud,
body[data-game-mode="hardmode"] .game #pdqTopLeftHud #relicHud{
  display: none !important;
}
.game #pdqTopLeftHud #relicHud .relic-slot,
.game #pdqTopLeftHud .relic-hud .relic-slot{
  width: 100% !important;
  height: var(--pdq-economy-relic-cell) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
@media(max-width:520px){
  :root{
    --pdq-economy-gap: 7px;
    --pdq-economy-cell: 48px;
    --pdq-economy-relic-cell: 43px;
  }
  .game #pdqTopLeftHud #topGems,
  .game #pdqTopLeftHud .top-gems{ padding: 0 8px !important; }
}


/* Cleanup: final HUD cluster reset after removing legacy top-left child tuning.
   Only the top-left group itself may be manually moved. The merchant, gem
   counter, and relic tray are normal children now, so old saved offsets or
   legacy fixed-position rules cannot split them apart. */
:root{
  --pdq-clean-hud-gap: 7px;
  --pdq-clean-hud-cell: 48px;
  --pdq-clean-relic-cell: 43px;
}
.game #pdqTopLeftHud.pdq-hud-left-cluster{
  position: fixed !important;
  top: calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + var(--pdq-clean-hud-gap)) !important;
  left: calc(var(--pdq-safe-left, env(safe-area-inset-left, 0px)) + var(--pdq-clean-hud-gap)) !important;
  right: auto !important;
  bottom: auto !important;
  display: grid !important;
  grid-template-columns: max-content !important;
  grid-template-rows: max-content max-content !important;
  gap: var(--pdq-clean-hud-gap) !important;
  align-items: start !important;
  justify-items: start !important;
  width: max-content !important;
  height: max-content !important;
  transform: none !important;
  translate: var(--hud-topLeftHud-x, 0px) var(--hud-topLeftHud-y, 0px) !important;
  z-index: 34 !important;
}
.game #pdqTopLeftHud .pdq-top-left-hud-row{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: var(--pdq-clean-hud-gap) !important;
  width: max-content !important;
  height: var(--pdq-clean-hud-cell) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  translate: none !important;
}
.game #pdqTopLeftHud #merchantButton,
.game #pdqTopLeftHud .merchant-button,
.game #pdqTopLeftHud #topGems,
.game #pdqTopLeftHud .top-gems,
.game #pdqTopLeftHud #relicHud,
.game #pdqTopLeftHud .relic-hud{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  translate: none !important;
  margin: 0 !important;
  z-index: auto !important;
}
.game #pdqTopLeftHud #merchantButton,
.game #pdqTopLeftHud .merchant-button{
  flex: 0 0 var(--pdq-clean-hud-cell) !important;
  width: var(--pdq-clean-hud-cell) !important;
  height: var(--pdq-clean-hud-cell) !important;
  min-width: var(--pdq-clean-hud-cell) !important;
  min-height: var(--pdq-clean-hud-cell) !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}
.game #pdqTopLeftHud #topGems,
.game #pdqTopLeftHud .top-gems{
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  height: var(--pdq-clean-hud-cell) !important;
  min-height: var(--pdq-clean-hud-cell) !important;
  max-height: var(--pdq-clean-hud-cell) !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}
.game #pdqTopLeftHud #topGems img,
.game #pdqTopLeftHud .top-gems img{
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
}
.game #pdqTopLeftHud #relicHud,
.game #pdqTopLeftHud .relic-hud{
  width: var(--pdq-clean-hud-cell) !important;
  min-width: var(--pdq-clean-hud-cell) !important;
  max-width: var(--pdq-clean-hud-cell) !important;
  padding: 5px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: var(--pdq-clean-relic-cell) !important;
  gap: var(--pdq-clean-hud-gap) !important;
  place-items: center !important;
  box-sizing: border-box !important;
}
.game #pdqTopLeftHud #relicHud .relic-slot,
.game #pdqTopLeftHud .relic-hud .relic-slot{
  width: 100% !important;
  height: var(--pdq-clean-relic-cell) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
body[data-game-mode="arcade"] .game #pdqTopLeftHud #relicHud,
body[data-game-mode="hardmode"] .game #pdqTopLeftHud #relicHud,
.game #pdqTopLeftHud #relicHud.hidden{
  display: none !important;
}


/* Patch: final HUD relic alignment + retired file/WebGL warning. */
.pdq-file-protocol-warning{display:none!important;}
.game #pdqTopLeftHud.pdq-hud-left-cluster{
  justify-items:start!important;
  align-items:start!important;
}
.game #pdqTopLeftHud #relicHud,
.game #pdqTopLeftHud .relic-hud{
  justify-self:start!important;
  align-self:start!important;
  margin-left:0!important;
  transform:none!important;
  translate:none!important;
}
.game #pdqTopLeftHud #merchantButton,
.game #pdqTopLeftHud .merchant-button,
.game #pdqTopLeftHud #topGems,
.game #pdqTopLeftHud .top-gems{
  translate:none!important;
}

/* Patch: lock top-left economy HUD into explicit 2x2 grid.
   The wrapper row becomes display:contents so merchant/gems/relics are real
   grid items: merchant top-left, gems top-right, relics bottom-left. */
.game #pdqTopLeftHud.pdq-hud-left-cluster{
  display:grid!important;
  grid-template-columns:var(--pdq-clean-hud-cell,48px) max-content!important;
  grid-template-rows:var(--pdq-clean-hud-cell,48px) max-content!important;
  grid-template-areas:
    "merchant gems"
    "relics ."!important;
  column-gap:var(--pdq-clean-hud-gap,7px)!important;
  row-gap:var(--pdq-clean-hud-gap,7px)!important;
  justify-items:start!important;
  align-items:start!important;
  width:max-content!important;
  height:max-content!important;
}
.game #pdqTopLeftHud .pdq-top-left-hud-row{
  display:contents!important;
  position:static!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  translate:none!important;
}
.game #pdqTopLeftHud #merchantButton,
.game #pdqTopLeftHud .merchant-button{
  grid-area:merchant!important;
  justify-self:start!important;
  align-self:start!important;
}
.game #pdqTopLeftHud #topGems,
.game #pdqTopLeftHud .top-gems{
  grid-area:gems!important;
  justify-self:start!important;
  align-self:start!important;
}
.game #pdqTopLeftHud #relicHud,
.game #pdqTopLeftHud .relic-hud{
  grid-area:relics!important;
  justify-self:start!important;
  align-self:start!important;
  margin:0!important;
  margin-left:0!important;
}


/* Patch: playable cinematic reward/offering rooms and stable tutorial card sizing. */
.tutorial-card{
  min-height:min(560px,82svh)!important;
  width:min(520px,94vw)!important;
  display:grid!important;
  grid-template-rows:1fr auto!important;
  align-items:stretch!important;
}
.tutorial-step{
  min-height:clamp(330px,56svh,430px)!important;
  display:grid!important;
  grid-template-rows:auto auto 1fr auto!important;
  align-content:start!important;
}
.tutorial-actions{align-self:end!important;}
.cinematic-room{
  position:fixed; inset:0; z-index:410; display:grid; place-items:center; align-content:center; gap:clamp(12px,3vw,22px);
  background:radial-gradient(circle at 50% 28%,#202043 0%,#080815 58%,#000 100%); color:#fff; padding:calc(var(--pdq-safe-top, env(safe-area-inset-top,0px)) + 16px) 16px calc(var(--pdq-safe-bottom, env(safe-area-inset-bottom,0px)) + 16px);
  touch-action:manipulation;
}
.cinematic-room.hidden{display:none!important;}
.cinematic-room.sleep-intro{animation:cinematicSleepOpen 2.1s ease both;}
@keyframes cinematicSleepOpen{0%{filter:brightness(0);clip-path:inset(49% 0 49% 0)}38%{filter:brightness(.05);clip-path:inset(46% 0 46% 0)}100%{filter:brightness(1);clip-path:inset(0 0 0 0)}}
.cinematic-message{min-height:2.8em;text-align:center;font:1000 clamp(1rem,4.5vw,2.2rem)/1.08 "Courier New",monospace;letter-spacing:.08em;color:#e9f7ff;text-shadow:0 2px 0 #000,0 0 14px rgba(69,243,255,.55);}
.cinematic-message.gold-message{color:#ffd33d;text-shadow:0 2px 0 #000,0 0 18px rgba(255,211,61,.85);}
.cinematic-grid{--cinematic-size:3;display:grid;grid-template-columns:repeat(var(--cinematic-size),clamp(62px,15vw,108px));grid-template-rows:repeat(var(--cinematic-size),clamp(62px,15vw,108px));gap:4px;padding:8px;border:3px solid rgba(69,243,255,.85);border-radius:12px;background:rgba(2,5,12,.72);box-shadow:0 0 24px rgba(69,243,255,.34),inset 0 0 24px rgba(0,0,0,.85);}
.offering-room .cinematic-grid{grid-template-columns:repeat(var(--cinematic-size),clamp(48px,13vw,82px));grid-template-rows:repeat(var(--cinematic-size),clamp(48px,13vw,82px));}
.cinematic-cell{position:relative;display:grid;place-items:center;padding:0;border:2px solid rgba(255,255,255,.16);border-radius:8px;background:linear-gradient(135deg,#352719,#15100b);box-shadow:inset 0 0 12px rgba(0,0,0,.65);overflow:hidden;touch-action:manipulation;}
.cinematic-cell img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;}
.cinematic-cell.hero{border-color:#ffd33d;background:#080b12;box-shadow:0 0 16px rgba(255,211,61,.45),inset 0 0 14px rgba(0,0,0,.8);}
.cinematic-cell.hero img{object-fit:contain;padding:4px;}
.cinematic-cell.chest{border-color:#ffd33d;background:#120807;animation:cinematicChestPulse 1.2s ease-in-out infinite;}
@keyframes cinematicChestPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.24)}}
.cinematic-cell.relic{border-color:#ffe789;background:#060812;box-shadow:0 0 18px rgba(255,211,61,.34),inset 0 0 14px rgba(0,0,0,.8);}
.cinematic-cell.offering{border-color:#ff5c5c;box-shadow:0 0 16px rgba(255,75,75,.42),inset 0 0 14px rgba(0,0,0,.7);}
.cinematic-actions{min-height:44px;display:flex;gap:10px;justify-content:center;align-items:center;}
.cinematic-actions button{border:2px solid #45f3ff;border-radius:999px;background:#07121a;color:#e9fbff;padding:.75rem 1.15rem;font:1000 .9rem/1 "Courier New",monospace;letter-spacing:.08em;box-shadow:0 0 18px rgba(69,243,255,.28);}
.cinematic-actions #cinematicDoneBtn{border-color:#ffd33d;color:#fff6b5;background:#1c1405;box-shadow:0 0 20px rgba(255,211,61,.35);}
.mode-unlock-note{grid-column:1/-1;text-align:center;color:#ffe78a;font:900 .72rem/1.15 "Courier New",monospace;letter-spacing:.06em;opacity:.9;}


/* Patch: treasure room floor sprites and tap-through completion polish. */
.treasure-room .cinematic-cell.floor img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
}
.treasure-room .cinematic-message{
  min-height:2.8em;
}

/* Patch: compact merchant shop dialog and mode-scaled economy readability. */
.dialog.merchant-shop-dialog{
  width:min(390px,92vw)!important;
  max-width:92vw!important;
  max-height:min(560px,78svh)!important;
  overflow:hidden!important;
  border-width:3px!important;
  border-color:rgba(255,211,61,.82)!important;
  box-shadow:0 16px 48px rgba(0,0,0,.68),0 0 24px rgba(255,211,61,.22)!important;
}
.dialog.merchant-shop-dialog::backdrop{background:rgba(0,0,0,.62)!important;}
.dialog.merchant-shop-dialog form{
  padding:clamp(12px,3vw,16px)!important;
  display:grid!important;
  gap:8px!important;
  max-height:min(540px,76svh)!important;
  box-sizing:border-box!important;
}
.dialog.merchant-shop-dialog #choiceTitle{
  margin:0!important;
  text-align:center!important;
  color:#ffd33d!important;
  font-size:clamp(.95rem,4.2vw,1.15rem)!important;
}
.dialog.merchant-shop-dialog #choiceText{
  margin:0!important;
  text-align:center!important;
  color:#45f3ff!important;
  font:900 clamp(.66rem,2.8vw,.8rem)/1.1 "Courier New",monospace!important;
  letter-spacing:.07em!important;
}
.dialog.merchant-shop-dialog .choice-buttons{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin-top:4px!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  padding:1px 2px 4px!important;
}
.dialog.merchant-shop-dialog .merchant-choice{
  min-height:112px!important;
  padding:8px 6px!important;
  border-radius:8px!important;
  border:2px solid rgba(69,243,255,.58)!important;
  background:linear-gradient(180deg,#15172a,#070911)!important;
  box-shadow:inset 0 0 12px rgba(0,0,0,.62),0 0 10px rgba(69,243,255,.12)!important;
  display:grid!important;
  align-content:start!important;
  justify-items:center!important;
  gap:5px!important;
  text-align:center!important;
  color:#fff!important;
}
.dialog.merchant-shop-dialog .merchant-choice.primary{
  border-color:rgba(255,211,61,.78)!important;
  background:linear-gradient(180deg,#211b12,#090806)!important;
  color:#fff8d6!important;
}
.dialog.merchant-shop-dialog .merchant-choice:disabled{
  opacity:.44!important;
  filter:grayscale(.9)!important;
  cursor:not-allowed!important;
}
.dialog.merchant-shop-dialog .merchant-choice img{
  width:52px!important;
  height:52px!important;
  object-fit:cover!important;
  border:2px solid rgba(255,255,255,.18)!important;
  border-radius:5px!important;
}
.dialog.merchant-shop-dialog .merchant-choice span{
  font:900 clamp(.62rem,2.6vw,.75rem)/1.05 "Courier New",monospace!important;
  color:#fff!important;
  min-height:1.95em!important;
  display:grid!important;
  place-items:center!important;
}
.dialog.merchant-shop-dialog .merchant-choice em{
  font-style:normal!important;
  color:#ffd33d!important;
  font:1000 clamp(.62rem,2.6vw,.76rem)/1 "Courier New",monospace!important;
}
@media(max-width:360px){
  .dialog.merchant-shop-dialog{width:94vw!important;}
  .dialog.merchant-shop-dialog .choice-buttons{gap:6px!important;}
  .dialog.merchant-shop-dialog .merchant-choice{min-height:104px!important;padding:7px 4px!important;}
  .dialog.merchant-shop-dialog .merchant-choice img{width:46px!important;height:46px!important;}
}


/* Patch: merchant shop scroll/tap separation. */
.dialog.merchant-shop-dialog form{
  grid-template-rows:auto auto minmax(0,1fr)!important;
  overflow:hidden!important;
}
.dialog.merchant-shop-dialog .choice-buttons{
  min-height:0!important;
  max-height:calc(min(540px,76svh) - 86px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin;
}
.dialog.merchant-shop-dialog .choice-buttons *{
  touch-action:pan-y!important;
}
.dialog.merchant-shop-dialog .choice-buttons::-webkit-scrollbar{width:8px;}
.dialog.merchant-shop-dialog .choice-buttons::-webkit-scrollbar-thumb{background:rgba(255,211,61,.48);border-radius:999px;}
.dialog.merchant-shop-dialog .choice-buttons::-webkit-scrollbar-track{background:rgba(0,0,0,.25);}
.dialog.merchant-shop-dialog .merchant-choice{
  -webkit-user-select:none!important;
  user-select:none!important;
}


/* Patch: game-look cinematic rooms, floor-backed treasure/relic cells, and offering whiteout transition. */
.cinematic-room{
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.06), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, rgba(5,8,14,.92), rgba(3,5,10,.98));
}
.cinematic-room::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.52)),
    radial-gradient(circle at 50% 50%, rgba(69,243,255,.08), rgba(69,243,255,0) 36%);
  z-index:-1;
}
.cinematic-room.whiteout{
  animation:pdqCinematicWhiteout .62s ease forwards;
}
@keyframes pdqCinematicWhiteout{
  0%{filter:brightness(1);opacity:1}
  72%{filter:brightness(1.5);opacity:1}
  100%{filter:brightness(2.45);opacity:0}
}
.cinematic-grid{
  gap:2px;
  padding:8px;
  border:3px solid rgba(255,211,61,.82);
  border-radius:10px;
  background:rgba(6,10,18,.84);
  box-shadow:0 0 0 2px rgba(255,255,255,.08), 0 0 24px rgba(0,0,0,.55), inset 0 0 24px rgba(0,0,0,.86);
}
.cinematic-cell{
  border-radius:6px;
  border:1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.24)),
    url('../assets/tiles/floor.jpg') center/cover no-repeat;
  box-shadow:inset 0 0 10px rgba(0,0,0,.52);
}
.cinematic-cell.floor img{opacity:0;}
.cinematic-cell.hero img,
.cinematic-cell.chest img,
.cinematic-cell.relic img{
  width:76%;
  height:76%;
  object-fit:contain;
  padding:0;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));
}
.cinematic-cell.hero{border-color:rgba(255,211,61,.92);box-shadow:0 0 0 1px rgba(255,211,61,.8), inset 0 0 10px rgba(0,0,0,.52), 0 0 12px rgba(255,211,61,.36);}
.cinematic-cell.chest{border-color:rgba(255,211,61,.92);animation:cinematicChestPulse 1.2s ease-in-out infinite;}
.cinematic-cell.relic{border-color:rgba(255,231,137,.92);box-shadow:0 0 0 1px rgba(255,231,137,.72), inset 0 0 10px rgba(0,0,0,.52), 0 0 12px rgba(255,211,61,.2);}
.cinematic-cell.offering{border-color:rgba(255,92,92,.92);background:none;box-shadow:0 0 0 1px rgba(255,92,92,.65), inset 0 0 10px rgba(0,0,0,.38);}
.cinematic-cell.offering img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) contrast(1.06);}
.reward-screen{
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.06), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, rgba(5,8,14,.92), rgba(3,5,10,.98));
}
.reward-panel{
  width:min(520px,94vw);
  border-color:rgba(255,211,61,.82)!important;
  background:rgba(6,10,18,.84)!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.08), 0 0 24px rgba(0,0,0,.55), inset 0 0 24px rgba(0,0,0,.86)!important;
}
.reward-chest{
  width:clamp(92px,23vw,144px);
  height:clamp(92px,23vw,144px);
  display:grid;
  place-items:center;
  border:2px solid rgba(255,211,61,.92);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18)), url('../assets/tiles/floor.jpg') center/cover no-repeat;
}
.reward-chest img{
  width:76%;
  height:76%;
  object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));
}


/* Publish-candidate hardening: always render floor art underneath cinematic actors. */
.cinematic-room .cinematic-cell.hero,
.cinematic-room .cinematic-cell.chest,
.cinematic-room .cinematic-cell.relic{
  background:url('../assets/tiles/floor.jpg') center/cover no-repeat !important;
}
.treasure-room .cinematic-cell.hero,
.treasure-room .cinematic-cell.chest,
.offering-room .cinematic-cell.hero,
.offering-room .cinematic-cell.relic{
  background:url('../assets/tiles/floor.jpg') center/cover no-repeat !important;
}
.treasure-room::before,
.offering-room::before{
  background:linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.34));
}
.treasure-room .cinematic-cell,
.offering-room .cinematic-cell{
  background-image:url('../assets/tiles/floor.jpg') !important;
}
.treasure-room .cinematic-cell.floor{
  background:none!important;
  box-shadow:none!important;
}
.cinematic-room .cinematic-cell.hero img,
.cinematic-room .cinematic-cell.chest img,
.cinematic-room .cinematic-cell.relic img{
  position:relative;
  z-index:1;
}


/* WebGL Milestone B: board taps are now resolved from board/canvas coordinates.
   The grid buttons remain as transparent accessibility/tooltip/fallback anchors. */
.board > .tile.board-hit-tile,
.board > .tile.board-hit-tile.border,
.board > .tile.board-hit-tile.outer-floor,
.board > .tile.board-hit-tile.floor-mossy,
.board > .tile.board-hit-tile.hidden-tile,
.board > .tile.board-hit-tile.removed,
.board > .tile.board-hit-tile.hero,
.board > .tile.board-hit-tile.enemy-alert,
.board > .tile.board-hit-tile.target-valid,
.board > .tile.board-hit-tile.target-selected,
.board > .tile.board-hit-tile.target-cursor,
body[data-theme] .board > .tile.board-hit-tile {
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  color:transparent!important;
  filter:none!important;
  outline-color:transparent!important;
  text-shadow:none!important;
  transform:none!important;
  animation:none!important;
}
.board > .tile.board-hit-tile::before,
.board > .tile.board-hit-tile::after,
.board > .tile.board-hit-tile.hero::before,
.board > .tile.board-hit-tile.hero::after,
.board > .tile.board-hit-tile.hidden-tile::after,
.board > .tile.board-hit-tile.invincible-hero::after {
  content:none!important;
  display:none!important;
}
.board > .tile.board-hit-tile,
.board > .tile.board-hit-tile *,
.board > .tile.board-hit-tile::before,
.board > .tile.board-hit-tile::after {
  animation:none!important;
  transition:none!important;
  transform:none!important;
  filter:none!important;
}

/* Milestone D: playable treasure/relic cinematic boards now use the WebGL board renderer. */
.cinematic-grid.cinematic-webgl-board{
  --tile: clamp(62px,15vw,108px);
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:repeat(var(--cinematic-size), var(--tile))!important;
  grid-template-rows:repeat(var(--cinematic-size), var(--tile))!important;
  width:max-content;
  height:max-content;
  max-width:94vw;
  max-height:70svh;
  overflow:hidden;
  touch-action:manipulation;
}
.offering-room .cinematic-grid.cinematic-webgl-board{--tile:clamp(48px,13vw,82px);}
.cinematic-grid.cinematic-webgl-board > .board-canvas-render-layer,
.cinematic-grid.cinematic-webgl-board > .board-webgl-render-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:0!important;
  pointer-events:none!important;
}
.cinematic-grid.cinematic-webgl-board > .board-webgl-render-layer{z-index:1!important;display:block!important;}
.cinematic-grid.cinematic-webgl-board > .board-canvas-render-layer{z-index:0!important;}
.cinematic-grid.cinematic-webgl-board > .board-hit-tile,
.cinematic-grid.cinematic-webgl-board > .canvas-hit-tile,
.cinematic-grid.cinematic-webgl-board > .tile{
  width:var(--tile)!important;
  height:var(--tile)!important;
  position:relative!important;
  z-index:2!important;
  background:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  color:transparent!important;
  text-shadow:none!important;
  outline-color:transparent;
  opacity:1!important;
}
.cinematic-grid.cinematic-webgl-board > .board-hit-tile::before,
.cinematic-grid.cinematic-webgl-board > .board-hit-tile::after,
.cinematic-grid.cinematic-webgl-board > .canvas-hit-tile::before,
.cinematic-grid.cinematic-webgl-board > .canvas-hit-tile::after{
  content:none!important;
  display:none!important;
}
.cinematic-grid.cinematic-webgl-board > .board-hit-tile:focus-visible,
.cinematic-grid.cinematic-webgl-board > .canvas-hit-tile:focus-visible{
  outline:2px solid rgba(69,243,255,.9)!important;
  outline-offset:-5px;
}


/* Milestone E WebGL cleanup: the direct WebGL board is the only normal visible
   board renderer. The 2D canvas is fallback-only and hidden whenever WebGL is
   active. The hit grid remains for input/accessibility only and can never paint
   game art, even if old tile classes are attached for targeting/tooltips. */
.board.webgl-board-active > .board-webgl-render-layer{
  display:block!important;
  opacity:1!important;
  z-index:0!important;
  background:transparent!important;
}
.board.webgl-board-active > .board-canvas-render-layer{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}
.board:not(.webgl-board-active) > .board-canvas-render-layer{
  display:block;
  opacity:1;
  visibility:visible;
}
.board > .board-hit-tile,
.board > .board-hit-tile *,
.board > .board-hit-tile::before,
.board > .board-hit-tile::after{
  background:none!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  color:transparent!important;
  content:none!important;
  filter:none!important;
  text-shadow:none!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
}
.board > .board-hit-tile img,
.board > .board-hit-tile svg,
.board > .board-hit-tile canvas,
.board > .board-hit-tile .tile-content,
.board > .board-hit-tile .boss-stack-count,
.board > .board-hit-tile .hero-frame-gameplay{
  display:none!important;
  visibility:hidden!important;
}
.board > .board-hit-tile:focus-visible{
  outline:2px solid var(--cyan)!important;
  outline-offset:-4px!important;
}

/* Milestone E stacking fix: the panel/board backgrounds must never sit above
   the active WebGL dungeon. Keep the WebGL canvas as the visible board layer,
   with transparent hit anchors above it and panel/backdrop effects below it. */
.game .board-wrap,
.board-wrap:has(.board.webgl-board-active){
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
.game .board-wrap::before,
.game .board-wrap::after,
.board-wrap:has(.board.webgl-board-active)::before,
.board-wrap:has(.board.webgl-board-active)::after{
  z-index:0!important;
  pointer-events:none!important;
}
.board,
.board.webgl-board-active{
  position:relative!important;
  isolation:isolate!important;
  background:transparent!important;
  background-image:none!important;
  overflow:hidden!important;
}
.board.webgl-board-active > .board-webgl-render-layer{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:none!important;
  background:transparent!important;
  transform:translateZ(0)!important;
}
.board.webgl-board-active > .board-canvas-render-layer{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.board.webgl-board-active > .board-hit-tile,
.board.webgl-board-active > .canvas-hit-tile{
  position:relative!important;
  z-index:3!important;
  background:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  color:transparent!important;
}
.board.webgl-board-active > .board-hit-tile::before,
.board.webgl-board-active > .board-hit-tile::after,
.board.webgl-board-active > .canvas-hit-tile::before,
.board.webgl-board-active > .canvas-hit-tile::after{
  content:none!important;
  display:none!important;
}

/* WebGL viewport camera pass: when the direct renderer is active, the DOM board
   is a stable viewport. The renderer owns camera scrolling internally. */
body.pdq-webgl-board-direct .board-wrap > .board.webgl-board-active{
  position:absolute!important;
  left:8px!important;
  top:8px!important;
  width:calc(100% - 16px)!important;
  height:calc(100% - 16px)!important;
  transform:translate(0,0)!important;
  grid-template-columns:repeat(12,1fr)!important;
  grid-template-rows:repeat(12,1fr)!important;
  overflow:hidden!important;
}
body.pdq-webgl-board-direct .board.webgl-board-active > .board-webgl-render-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:2!important;
}
body.pdq-webgl-board-direct .board.webgl-board-active > .board-hit-tile,
body.pdq-webgl-board-direct .board.webgl-board-active > .canvas-hit-tile{
  min-width:0!important;
  min-height:0!important;
  width:auto!important;
  height:auto!important;
}

/* Patch: 2026-05 mobile reliability fixes from BUG_REPORT_AND_FIX_PLAN. */
*{-webkit-tap-highlight-color:transparent;}
.tile,button,[role="button"]{-webkit-tap-highlight-color:transparent;}
html.game-playing,body.game-playing{overflow:hidden!important;overscroll-behavior:none;}
.game-playing .game{touch-action:auto!important;user-select:none;-webkit-user-select:none;min-height:var(--pdq-app-height,100svh)!important;}
.game-playing .board-wrap{touch-action:pan-y!important;-webkit-overflow-scrolling:touch;}
.board-canvas-render-layer,.board-webgl-render-layer,.board-fx-layer,.canvas-fx-layer{touch-action:none!important;}
.cinematic-cell{touch-action:pan-y!important;}
@supports (height:100dvh){
  :root{--pdq-dvh-height:100dvh;}
  html,body,#app,.game,.splash-screen,.hero-select,.panel.hero-select,.reward-screen{min-height:var(--pdq-app-height,var(--pdq-dvh-height,100svh))!important;}
}
@supports (-webkit-touch-callout:none){
  .game-playing .game,.game-playing .board,.game-playing .tile{-webkit-touch-callout:none;}
}
.tutorial-overlay{background:rgba(0,0,0,.76);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
#splashCodeInputField.splash-code-native-input{font-size:16px!important;}
@media(max-width:560px){#heroCards.hero-cards{width:94vw!important;max-width:calc(100vw - 32px)!important;}}
body:not(.pdq-audio-unlocked) .game:not(.hidden)::after,
body:not(.pdq-audio-unlocked) .hero-select:not(.hidden)::after{
  content:'TAP TO ENABLE AUDIO';
  position:fixed;
  left:50%;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  z-index:4000;
  padding:6px 10px;
  border:1px solid rgba(255,211,61,.8);
  border-radius:999px;
  background:rgba(8,8,18,.88);
  color:#ffd33d;
  font:900 11px/1 "Courier New",monospace;
  letter-spacing:.08em;
  pointer-events:none;
  text-shadow:0 0 8px rgba(255,211,61,.35);
}

/* Phase 1 cinematic room fix: keep treasure/relic mini-boards isolated from the
   gameplay WebGL viewport camera CSS. The cinematic grid still reuses the board
   renderer for consistent input, but it must render as a centered 3x3/5x5 board,
   never as the mobile 5-tile camera window. */
.cinematic-room{
  grid-template-rows:auto minmax(0,auto) auto!important;
  justify-items:center!important;
  align-items:center!important;
  touch-action:pan-y!important;
  overflow:hidden!important;
}
.cinematic-room .cinematic-message,
.cinematic-room .cinematic-actions{
  position:relative!important;
  z-index:2!important;
}
.cinematic-room .cinematic-grid.cinematic-webgl-board,
body.pdq-webgl-board-direct .cinematic-room .cinematic-grid.cinematic-webgl-board,
body.pdq-webgl-board-direct .cinematic-grid.cinematic-webgl-board.board.webgl-board-active{
  --tile:clamp(64px, min(22vw, 18svh), 112px);
  position:relative!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  display:grid!important;
  grid-template-columns:repeat(var(--cinematic-size), var(--tile))!important;
  grid-template-rows:repeat(var(--cinematic-size), var(--tile))!important;
  width:max-content!important;
  height:max-content!important;
  max-width:calc(100vw - 32px)!important;
  max-height:calc(var(--pdq-app-height, 100svh) - 160px)!important;
  transform:none!important;
  justify-self:center!important;
  align-self:center!important;
  place-self:center!important;
  margin:0 auto!important;
  overflow:hidden!important;
  touch-action:pan-y!important;
  contain:layout paint style!important;
}
body.pdq-webgl-board-direct .offering-room .cinematic-grid.cinematic-webgl-board,
.offering-room .cinematic-grid.cinematic-webgl-board{
  --tile:clamp(48px, min(17vw, 13svh), 84px);
}
.cinematic-grid.cinematic-webgl-board > .board-canvas-render-layer,
.cinematic-grid.cinematic-webgl-board > .board-webgl-render-layer,
body.pdq-webgl-board-direct .cinematic-grid.cinematic-webgl-board.board.webgl-board-active > .board-webgl-render-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  pointer-events:none!important;
}
.cinematic-grid.cinematic-webgl-board > .board-hit-tile,
.cinematic-grid.cinematic-webgl-board > .canvas-hit-tile,
body.pdq-webgl-board-direct .cinematic-grid.cinematic-webgl-board.board.webgl-board-active > .board-hit-tile,
body.pdq-webgl-board-direct .cinematic-grid.cinematic-webgl-board.board.webgl-board-active > .canvas-hit-tile{
  min-width:0!important;
  min-height:0!important;
  width:var(--tile)!important;
  height:var(--tile)!important;
  position:relative!important;
  z-index:3!important;
  touch-action:pan-y!important;
}


/* Phase 2: while a combat proxy owns the hero visual, hide any stale DOM hero
   markup that may remain in a tile layer between renderer frames. Canvas/WebGL
   board hero rendering is suppressed from game.js; this is only a belt-and-
   suspenders guard for fallback DOM layers. */
body.hero-proxy-active .tile.hero .hero-img,
body.hero-proxy-active .tile.hero .hero-frame-gameplay{
  opacity:0!important;
  visibility:hidden!important;
}

/* Phase 5f: keep fallback DOM camera and board-anchored reveal overlays smooth without affecting WebGL hit testing. */
.board {
  transition: transform 150ms cubic-bezier(.2,.8,.2,1);
}
.board-anchored.tile-crack-shatter-layer,
.board-anchored.tile-physics-explosion-layer {
  position: absolute;
  pointer-events: none;
  z-index: 12;
}
@media (prefers-reduced-motion: reduce) {
  .board { transition: none; }
}


/* Phase 5g: bigger gem pickup callouts and faster block-break fallback. */
.tile-shatter-layer::before,
.tile-shatter-layer::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:18%;
  height:18%;
  background:#d08a3a;
  box-shadow:
    -24px -10px 0 #ffe7a1,
    22px -18px 0 #8b5529,
    -18px 20px 0 #6b4324,
    20px 18px 0 #fff6d2;
  transform:translate(-50%,-50%);
  animation:pdqFallbackBlockBreak .30s ease-out forwards;
}
.tile-shatter-layer::after{
  animation-delay:.025s;
  transform:translate(-50%,-50%) rotate(45deg) scale(.86);
}
@keyframes pdqFallbackBlockBreak{
  0%{opacity:1;filter:brightness(1.45);transform:translate(-50%,-50%) scale(.75) rotate(0deg)}
  56%{opacity:1;transform:translate(calc(-50% + 8px),calc(-50% - 13px)) scale(1.04) rotate(18deg)}
  100%{opacity:0;transform:translate(calc(-50% + 24px),calc(-50% + 22px)) scale(.42) rotate(80deg)}
}

/* Phase 5j: keep the 2D canvas visible as a transparent overlay in direct
   WebGL mode so realtime torch lighting and wall shadows can be drawn above
   the WebGL floor/wall sprites without reintroducing DOM overlays. */
.board.webgl-board-active > .board-canvas-render-layer{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  background:transparent!important;
  z-index:4!important;
  pointer-events:none!important;
}
.board.webgl-board-active > .board-webgl-render-layer{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:3!important;
}

/* Phase 5m: direct WebGL lighting overlay + rebuilt classic screen juice.
   Keep the transparent overlay canvas at full board size so raycast lighting
   can draw over WebGL, and let the old full-screen flashes coexist as a
   guaranteed visual fallback for the WebGL screen FX layer. */
body.pdq-webgl-board-direct .board.webgl-board-active > .board-canvas-render-layer,
.board.webgl-board-active > .board-canvas-render-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  background:transparent!important;
  z-index:4!important;
  pointer-events:none!important;
}
body.pdq-webgl-board-direct .board.webgl-board-active > .board-webgl-render-layer,
.board.webgl-board-active > .board-webgl-render-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:3!important;
  pointer-events:none!important;
}
body.pdq-webgl-board-direct .board.webgl-board-active > .board-hit-tile,
body.pdq-webgl-board-direct .board.webgl-board-active > .canvas-hit-tile,
.board.webgl-board-active > .board-hit-tile,
.board.webgl-board-active > .canvas-hit-tile{
  z-index:5!important;
}
body.screen-fx-webgl-ready.trap-screen-flash::after,
body.screen-fx-webgl-ready.monster-screen-flash::after,
body.screen-fx-webgl-ready.combat-hurt-flash::after,
body.screen-fx-webgl-ready.combat-hit-flash::after,
body.screen-fx-webgl-ready.last-heart-danger::after{
  content:''!important;
  display:block!important;
}
body.screen-fx-webgl-ready.trap-screen-flash::after,
body.screen-fx-webgl-ready.monster-screen-flash::after,
body.screen-fx-webgl-ready.combat-hurt-flash::after,
body.screen-fx-webgl-ready.combat-hit-flash::after{
  position:fixed!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:10035!important;
  animation:dangerFade .82s ease-out forwards!important;
}
body.screen-fx-webgl-ready.trap-screen-flash::after{background:rgba(255,0,0,.50)!important;box-shadow:inset 0 0 92px rgba(255,0,0,.92)!important;}
body.screen-fx-webgl-ready.monster-screen-flash::after{background:rgba(0,255,80,.36)!important;box-shadow:inset 0 0 105px rgba(0,255,80,.78)!important;}
body.screen-fx-webgl-ready.combat-hurt-flash::after{background:rgba(0,255,80,.34)!important;box-shadow:inset 0 0 105px rgba(0,255,80,.72)!important;}
body.screen-fx-webgl-ready.combat-hit-flash::after{background:rgba(0,100,255,.38)!important;box-shadow:inset 0 0 105px rgba(0,150,255,.82)!important;}
body.screen-fx-webgl-ready.last-heart-danger::after{z-index:10030!important;}


/* Phase 5n: rebuild the classic death-camera ceremony in the WebGL-era board.
   The entire dungeon frame now owns the global motion so WebGL, canvas lighting,
   hit grid, and border move together instead of only filtering the board art. */
body.death-camera-active .board{
  transform:none!important;
  transition:none!important;
  filter:none!important;
}
body.death-camera-active .board-wrap.panel,
body.death-camera-active .board-wrap{
  transform-origin:50% 38%!important;
  will-change:transform, opacity, filter!important;
  animation:pdqLegacyDeathGridFallaway 4.8s cubic-bezier(.22,.72,.12,1) both!important;
  box-shadow:
    inset 0 0 28px rgba(255,0,0,.20),
    0 0 30px rgba(255,0,0,.18),
    0 0 58px rgba(0,0,0,.95)!important;
}
body.death-camera-active .board-canvas,
body.death-camera-active .board-webgl-canvas,
body.death-camera-active .board-canvas-render-layer,
body.death-camera-active .board-webgl-render-layer{
  transition:none!important;
  filter:none!important;
}
body.death-camera-active .game-over-overlay{
  background:
    radial-gradient(circle at 50% 42%,rgba(150,0,0,.14),rgba(0,0,0,.42) 44%,rgba(0,0,0,.82) 100%)!important;
  animation:pdqLegacyGameOverFade 2.15s ease-out forwards!important;
}
body.death-camera-active .game-over-panel,
body.death-camera-active .game-over-title,
body.death-camera-active .play-again{
  animation-delay:.12s!important;
}
body.death-camera-active .game::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:118;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,0,0,.10),transparent 24%),
    radial-gradient(circle at 50% 50%,transparent 0 34%,rgba(0,0,0,.48) 72%,rgba(0,0,0,.88) 100%);
  opacity:0;
  animation:pdqLegacyDeathVignette 4.8s linear both;
}
@keyframes pdqLegacyDeathGridFallaway{
  0%{transform:perspective(900px) translate3d(0,0,0) scale(1) rotate(0deg);opacity:1;filter:saturate(1) brightness(1) contrast(1);}
  100%{transform:perspective(900px) translate3d(-1.8vw,-14vh,0) scale(.56) rotate(-12deg);opacity:.42;filter:saturate(.42) brightness(.43) contrast(1.18);}
}
@keyframes pdqLegacyDeathVignette{
  0%{opacity:0;}
  100%{opacity:.78;}
}
@keyframes pdqLegacyGameOverFade{
  0%{opacity:0;}
  100%{opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  body.death-camera-active .board-wrap.panel,
  body.death-camera-active .board-wrap{animation:none!important;transform:scale(.88)!important;opacity:.72!important;filter:brightness(.62) saturate(.55)!important;}
  body.death-camera-active .game::before{animation:none!important;opacity:.62!important;}
}

/* Phase 5p: smooth death camera pass. One continuous fallaway motion instead
   of stepped/poppy transforms from earlier legacy rebuilds. */
body.death-camera-active .board-wrap.panel,
body.death-camera-active .board-wrap{
  transform-origin:50% 46%!important;
  animation:pdqSmoothDeathGridFallaway 5.15s linear both!important;
}
body.death-camera-active .game::before{
  animation:pdqSmoothDeathVignette 5.15s linear both!important;
}
body.death-camera-active .game-over-overlay{
  animation:pdqSmoothGameOverFade 3.1s linear forwards!important;
}
@keyframes pdqSmoothDeathGridFallaway{
  0%{transform:perspective(900px) translate3d(0,0,0) scale(1) rotate(0deg);opacity:1;filter:saturate(1) brightness(1) contrast(1);}
  20%{transform:perspective(900px) translate3d(-.25vw,-2.6vh,0) scale(.91) rotate(-2.2deg);opacity:.92;filter:saturate(.90) brightness(.90) contrast(1.03);}
  40%{transform:perspective(900px) translate3d(-.70vw,-5.7vh,0) scale(.80) rotate(-4.8deg);opacity:.80;filter:saturate(.76) brightness(.77) contrast(1.07);}
  60%{transform:perspective(900px) translate3d(-1.15vw,-8.8vh,0) scale(.70) rotate(-7.5deg);opacity:.66;filter:saturate(.62) brightness(.63) contrast(1.11);}
  80%{transform:perspective(900px) translate3d(-1.55vw,-11.8vh,0) scale(.61) rotate(-10deg);opacity:.52;filter:saturate(.50) brightness(.51) contrast(1.15);}
  100%{transform:perspective(900px) translate3d(-1.9vw,-14.5vh,0) scale(.54) rotate(-12deg);opacity:.40;filter:saturate(.42) brightness(.43) contrast(1.18);}
}
@keyframes pdqSmoothDeathVignette{
  0%{opacity:0;}
  35%{opacity:.26;}
  70%{opacity:.55;}
  100%{opacity:.78;}
}
@keyframes pdqSmoothGameOverFade{
  0%{opacity:0;}
  38%{opacity:.26;}
  72%{opacity:.72;}
  100%{opacity:1;}
}

/* Phase 5q lighting debug overlay controls. */
.pdq-layer-debug-panel h4{
  margin:8px 0 4px;
  color:#ffd33d;
  font:1000 11px/1.1 "Courier New",monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pdq-layer-debug-panel .pdq-lighting-debug-grid button.active{
  background:rgba(255,211,61,.24);
  border-color:#7effb1;
  color:#eaffff;
}

/* Phase 5r: lighting 2.0 tuning controls. */
.pdq-lighting-tuning-grid{
  display:grid;
  gap:6px;
  grid-template-columns:1fr;
  margin:4px 0 8px;
}
.pdq-lighting-tuning-grid label{
  display:grid;
  grid-template-columns:minmax(84px,1fr) 42px minmax(90px,1.2fr);
  gap:6px;
  align-items:center;
  padding:5px 6px;
  border:1px solid rgba(69,243,255,.16);
  border-radius:8px;
  background:rgba(5,8,20,.58);
  color:#dffcff;
  font:800 10px/1.1 "Courier New",monospace;
}
.pdq-lighting-tuning-grid output{
  color:#ffd33d;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.pdq-lighting-tuning-grid input[type="range"]{
  width:100%;
  accent-color:#45f3ff;
}
.pdq-layer-debug-panel.mobile-layout .pdq-lighting-tuning-grid label{
  grid-template-columns:1fr 44px;
}
.pdq-layer-debug-panel.mobile-layout .pdq-lighting-tuning-grid input[type="range"]{
  grid-column:1 / -1;
}


/* Phase 5t: compact tutorial dialog. Size the tutorial card to the longest
   actual step content instead of reserving a large empty center gutter. */
.tutorial-overlay{
  align-items:center!important;
  justify-items:center!important;
  padding:calc(var(--pdq-safe-top, env(safe-area-inset-top, 0px)) + clamp(10px, 2.4svh, 18px)) clamp(12px, 3vw, 18px) calc(var(--pdq-safe-bottom, env(safe-area-inset-bottom, 0px)) + clamp(10px, 2.4svh, 18px))!important;
}
.tutorial-card{
  min-height:0!important;
  height:auto!important;
  max-height:min(78svh, 620px)!important;
  width:min(520px,94vw)!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  align-items:start!important;
  gap:clamp(10px, 2svh, 14px)!important;
  padding:clamp(16px, 3.2vw, 22px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
}
.tutorial-step{
  min-height:var(--pdq-tutorial-step-height, auto)!important;
  max-height:min(var(--pdq-tutorial-content-max, 62svh), 420px)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:0!important;
  overflow:visible!important;
}
.tutorial-step-measure{
  position:absolute!important;
  left:-9999px!important;
  top:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
  display:block!important;
}
.tutorial-card h2{margin-bottom:clamp(7px,1.4svh,10px)!important;}
.tutorial-card p{margin-bottom:clamp(8px,1.7svh,12px)!important;}
.tutorial-relic-row{min-height:0!important;margin:clamp(8px,1.8svh,12px) 0 clamp(4px,1svh,8px)!important;}
.tutorial-actions{align-self:start!important;margin-top:0!important;}
@media (max-height: 620px){
  .tutorial-card{max-height:88svh!important;padding:14px!important;gap:8px!important;}
  .tutorial-card h2{font-size:clamp(1.22rem, 5.2vw, 1.68rem)!important;}
  .tutorial-card p{font-size:clamp(.9rem, 3.8vw, 1.05rem)!important;line-height:1.25!important;}
  .tutorial-page-count{margin-bottom:5px!important;}
  .tutorial-relic img{width:46px!important;height:46px!important;}
  .tutorial-btn{padding:8px 14px!important;}
}

/* Phase 5aa: proper pause overlay replaces the small combat HUD menu. */
body.game-paused .board-wrap,
body.game-paused #inventoryDock,
body.game-paused .hud,
body.game-paused .game-board-shell{
  pointer-events:none!important;
}
.combat-debug-toggle{
  font-size:1.05rem!important;
  letter-spacing:0!important;
}
.pause-overlay{
  position:fixed;
  inset:0;
  z-index:2147480600;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 38%, rgba(18,18,32,.62), rgba(0,0,0,.86) 68%);
  backdrop-filter:blur(3px) saturate(.82);
  -webkit-backdrop-filter:blur(3px) saturate(.82);
  touch-action:none;
  pointer-events:auto;
}
.pause-panel{
  width:min(92vw,430px);
  min-height:min(62vh,520px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  padding:28px 22px calc(34px + env(safe-area-inset-bottom,0px));
  border:3px solid rgba(255,211,61,.82);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(13,13,23,.94), rgba(4,4,9,.97));
  box-shadow:0 24px 80px rgba(0,0,0,.74), inset 0 0 34px rgba(255,211,61,.10);
  color:#fff6d0;
  text-align:center;
  pointer-events:auto;
}
.pause-title{
  margin:auto 0 24px;
  font:900 clamp(2.6rem, 12vw, 4.8rem)/.86 Impact, fantasy;
  color:#ffd33d;
  letter-spacing:.08em;
  text-shadow:0 5px 0 #3c1700, 0 0 28px rgba(255,211,61,.42);
}
.pause-resume-btn,
.pause-quit-btn,
.pause-confirm-dialog button,
.pause-dev-panel button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.pause-resume-btn,
.pause-quit-btn{
  width:min(76vw,300px);
  min-height:54px;
  border-radius:14px;
  border:3px solid rgba(255,255,255,.18);
  font:900 1.2rem/1 "Courier New", monospace;
  letter-spacing:.10em;
  color:#fffbe0;
  background:#151824;
  box-shadow:0 8px 0 rgba(0,0,0,.36), 0 0 18px rgba(255,211,61,.16);
}
.pause-resume-btn{
  border-color:#ffd33d;
  background:linear-gradient(180deg,#332305,#151005);
  color:#fff3a6;
}
.pause-quit-btn{
  order:2;
  border-color:#ff4747;
  background:linear-gradient(180deg,#4a0b0b,#1c0608);
  color:#ffd6d6;
}
.pause-resume-btn{order:3;}
.pause-dev-panel{
  order:1;
  width:100%;
  margin-top:8px;
  padding:12px;
  border:1px solid rgba(69,243,255,.28);
  border-radius:14px;
  background:rgba(0,12,20,.46);
}
.pause-dev-panel h3{
  margin:0 0 8px;
  color:#45f3ff;
  font:900 .82rem/1 "Courier New", monospace;
  letter-spacing:.16em;
}
.pause-dev-move{
  display:grid;
  grid-template-columns:repeat(3,46px);
  grid-template-areas:". up ." "left . right" ". down .";
  justify-content:center;
  gap:6px;
  margin:8px auto 12px;
}
.pause-dev-move [data-dev-move="up"]{grid-area:up;}
.pause-dev-move [data-dev-move="left"]{grid-area:left;}
.pause-dev-move [data-dev-move="right"]{grid-area:right;}
.pause-dev-move [data-dev-move="down"]{grid-area:down;}
.pause-dev-move button,
.pause-dev-tool{
  border:1px solid rgba(69,243,255,.48);
  border-radius:10px;
  background:rgba(4,20,32,.92);
  color:#dffcff;
  font:900 .8rem/1 "Courier New", monospace;
  min-height:38px;
}
.pause-dev-tools{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.pause-dev-tool{
  min-height:34px;
  font-size:.68rem;
  letter-spacing:.03em;
}
.pause-confirm-dialog{
  position:absolute;
  inset:auto auto 50%;
  transform:translateY(50%);
  width:min(82vw,320px);
  padding:18px;
  display:grid;
  gap:10px;
  border:3px solid #ff4747;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(32,5,7,.98),rgba(6,3,5,.98));
  box-shadow:0 20px 70px rgba(0,0,0,.82),0 0 28px rgba(255,71,71,.28);
  z-index:2;
}
.pause-confirm-dialog h3{
  margin:0 0 4px;
  color:#ffd6d6;
  font:900 1.5rem/1 Impact, fantasy;
  letter-spacing:.08em;
}
.pause-confirm-dialog button{
  min-height:46px;
  border-radius:12px;
  font:900 1rem/1 "Courier New", monospace;
  letter-spacing:.08em;
}
.pause-confirm-really{
  border:2px solid #ff4747;
  background:#4a0b0b;
  color:#fff;
}
.pause-confirm-cancel{
  border:2px solid #ffd33d;
  background:#191407;
  color:#fff3a6;
}
@media (max-height:700px){
  .pause-panel{min-height:auto;padding-top:20px;gap:10px;}
  .pause-title{font-size:2.5rem;margin:8px 0 12px;}
  .pause-dev-panel{max-height:38vh;overflow:auto;}
}

/* Phase 5ab QA pass: save-code modal should fit the visible viewport and scroll naturally on mobile. */
#splashScreen .splash-code-panel,
#splashCodePanel.splash-code-panel{
  max-height:calc(var(--pdq-app-height, 100svh) - 116px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  overscroll-behavior:contain!important;
  padding-bottom:calc(14px + var(--safe-bottom, 0px))!important;
}
#splashCodePanel .splash-code-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:3!important;
  padding-top:8px!important;
  background:linear-gradient(180deg, rgba(3,8,7,0), rgba(3,8,7,.96) 34%, rgba(3,8,7,.98))!important;
}
#splashCodeSlots.splash-code-slots{
  max-width:100%!important;
}
#splashCodeBtn,
#splashStartBtn,
#splashCodeSubmitBtn{
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent;
}
.cinematic-cell.cinematic-sprite-fallback::after{
  content:'🎁';
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:clamp(1.8rem,9vw,4.8rem);
  color:#ffe58a;
  text-shadow:0 0 12px rgba(255,211,61,.62),0 3px 0 rgba(0,0,0,.55);
  pointer-events:none;
}
.offering-room .cinematic-cell.cinematic-sprite-fallback::after{content:'✦';}

/* Patch: heart piece sparkle animation before collection. */
.tile.heart-piece-pending {
  box-shadow:0 0 18px #ff4fd8,0 0 36px rgba(255,79,216,.7);
}
.tile.heart-piece-pending::after {
  content:'';
  position:absolute;
  inset:-4px;
  z-index:3;
  pointer-events:none;
  background:radial-gradient(circle, #ffd33d 0 2px, transparent 3px), radial-gradient(circle, #ff4fd8 0 3px, transparent 4px);
  background-size:16px 16px, 20px 20px;
  animation:heartPieceSparkle .7s ease-in-out infinite;
}
@keyframes heartPieceSparkle {
  0%,100% {opacity:.5;transform:scale(1);}
  50% {opacity:1;transform:scale(1.4);}
}

/* Patch: heart piece pickup animation for UI collection with quarter-fill effect. */
.tile.heart-piece-pending .tile-content > img {
  filter:brightness(1.3) saturate(1.2);
}

/* Hermes follow-up: collectible heart pieces, Pegasus slot polish, cinematic aspect safety, heart sprite masks. */
.tile.heart-piece-pending{
  box-shadow:0 0 14px rgba(255,211,61,.8),0 0 32px rgba(255,79,216,.62)!important;
}
.tile.heart-piece-pending::after{
  content:'';
  position:absolute;
  inset:-7px;
  z-index:4;
  pointer-events:none;
  border:2px solid rgba(255,211,61,.88);
  border-radius:999px;
  box-shadow:0 0 12px rgba(255,211,61,.9),0 0 22px rgba(255,79,216,.55);
  animation:heartPieceOrbitGlow .92s ease-in-out infinite;
}
@keyframes heartPieceOrbitGlow{
  0%,100%{opacity:.62;transform:rotate(0deg) scale(.95)}
  50%{opacity:1;transform:rotate(180deg) scale(1.08)}
}

#healthDock .mount-slot,
.mount-subpanel .mount-slot{
  width:clamp(34px,7.8vw,54px)!important;
  height:clamp(34px,7.8vw,54px)!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  padding:2px!important;
  border-radius:7px!important;
}
#pegasusCompanion.pegasus-companion,
.mount-slot .pegasus-companion{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  transform-origin:center center!important;
}
#pegasusCompanion.pegasus-companion img,
.mount-slot .pegasus-companion img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
  border:0!important;
  border-radius:3px!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 0 7px rgba(69,243,255,.42));
}
.pegasus-companion::after{content:none!important;display:none!important;}
.pegasus-companion.pegasus-wall-flight,
.pegasus-companion.pegasus-jump{
  animation:pegasusWallFlySlot .58s cubic-bezier(.2,.9,.16,1) both!important;
}
@keyframes pegasusWallFlySlot{
  0%{transform:translateY(0) translateX(0) scale(1) rotate(0deg)}
  18%{transform:translateY(-9px) translateX(-5px) scale(1.06) rotate(-10deg)}
  42%{transform:translateY(-18px) translateX(8px) scale(1.14) rotate(12deg)}
  68%{transform:translateY(-9px) translateX(-3px) scale(1.07) rotate(-6deg)}
  100%{transform:translateY(0) translateX(0) scale(1) rotate(0deg)}
}

.cinematic-room .cinematic-grid.cinematic-webgl-board,
body.pdq-webgl-board-direct .cinematic-room .cinematic-grid.cinematic-webgl-board,
body.pdq-webgl-board-direct .cinematic-grid.cinematic-webgl-board.board.webgl-board-active{
  --tile:clamp(54px, min(22vw, 18svh), 108px)!important;
  aspect-ratio:1/1!important;
  width:calc((var(--tile) * var(--cinematic-size)) + (var(--board-gap, 2px) * (var(--cinematic-size) - 1)))!important;
  height:calc((var(--tile) * var(--cinematic-size)) + (var(--board-gap, 2px) * (var(--cinematic-size) - 1)))!important;
  max-height:calc(var(--pdq-app-height, 100svh) - 158px)!important;
  max-width:calc(100vw - 32px)!important;
  grid-auto-rows:var(--tile)!important;
  overflow:hidden!important;
}
body.pdq-webgl-board-direct .offering-room .cinematic-grid.cinematic-webgl-board,
.offering-room .cinematic-grid.cinematic-webgl-board{
  --tile:clamp(40px, min(17vw, 12.5svh), 76px)!important;
  max-height:calc(var(--pdq-app-height, 100svh) - 152px)!important;
}
.offering-room .cinematic-cell.relic img,
.offering-room .cinematic-cell.hero img,
.cinematic-room .cinematic-cell.relic img{
  width:76%!important;
  height:76%!important;
  object-fit:contain!important;
}

.meta-heart-container.partial .heart-full-mask{opacity:0!important;}
.meta-heart-container .heart-quarter{
  background-image:url('../assets/ui/heart_full.png')!important;
  background-repeat:no-repeat!important;
  background-size:200% 200%!important;
  background-color:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  mix-blend-mode:normal!important;
  filter:drop-shadow(0 0 3px rgba(255,50,80,.55))!important;
}
.meta-heart-container .heart-quarter.q0{left:0!important;top:0!important;background-position:left top!important;clip-path:none!important;}
.meta-heart-container .heart-quarter.q1{left:0!important;bottom:0!important;background-position:left bottom!important;clip-path:none!important;}
.meta-heart-container .heart-quarter.q2{right:0!important;bottom:0!important;background-position:right bottom!important;clip-path:none!important;}
.meta-heart-container .heart-quarter.q3{right:0!important;top:0!important;background-position:right top!important;clip-path:none!important;}
.meta-heart-container.golden-meta-heart .heart-quarter{
  background-image:url('../assets/ui/golden-heart.png')!important;
  filter:drop-shadow(0 0 3px rgba(255,211,61,.45))!important;
}
.layered-heart-container.has-gold .heart-layer-red .meta-heart-container.partial .heart-full-mask{opacity:0!important;}


/* Hermes follow-up UI polish */
.cinematic-room.treasure-room .cinematic-cell.chest,
.cinematic-room.offering-room .cinematic-cell.relic,
.cinematic-room.offering-room .cinematic-cell.offering,
.cinematic-room.treasure-room .board-hit-tile.cinematic-cell.chest,
.cinematic-room.offering-room .board-hit-tile.cinematic-cell.relic,
.cinematic-room.offering-room .board-hit-tile.cinematic-cell.offering,
.cinematic-room.treasure-room .canvas-hit-tile.cinematic-cell.chest,
.cinematic-room.offering-room .canvas-hit-tile.cinematic-cell.relic,
.cinematic-room.offering-room .canvas-hit-tile.cinematic-cell.offering{
  box-shadow:none!important;
  filter:none!important;
  outline:none!important;
}
.cinematic-room.treasure-room .cinematic-cell.chest,
.cinematic-room.offering-room .cinematic-cell.relic,
.cinematic-room.offering-room .cinematic-cell.offering{
  border-color:rgba(255,255,255,.12)!important;
}
.cinematic-room.treasure-room .cinematic-cell.chest img,
.cinematic-room.offering-room .cinematic-cell.relic img,
.cinematic-room.offering-room .cinematic-cell.offering img{
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))!important;
}

.pause-panel.compact-pause-panel{
  width:min(88vw,260px)!important;
  min-height:auto!important;
  justify-content:center!important;
  gap:10px!important;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px))!important;
  border-radius:16px!important;
}
.pause-panel.compact-pause-panel .pause-title{display:none!important;}
.pause-panel.compact-pause-panel .pause-resume-btn,
.pause-panel.compact-pause-panel .pause-quit-btn{
  order:initial!important;
  width:100%!important;
  min-height:44px!important;
  font-size:.95rem!important;
}
.pause-panel.compact-pause-panel .pause-dev-panel{
  margin-top:4px!important;
}

#healthDock .mount-slot,
.mount-subpanel .mount-slot,
#mountSlot.mount-slot{
  width:clamp(30px,7vw,46px)!important;
  height:clamp(30px,7vw,46px)!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:2px solid var(--accent)!important;
  border-radius:0!important;
  background:#06070d!important;
  box-shadow:0 0 12px rgba(255,211,61,.18)!important;
  overflow:hidden!important;
}
#pegasusCompanion.pegasus-companion.hidden,
.mount-slot .pegasus-companion.hidden{
  display:none!important;
}
#pegasusCompanion.pegasus-companion,
.mount-slot .pegasus-companion{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  border-radius:0!important;
}
#pegasusCompanion.pegasus-companion img,
.mount-slot .pegasus-companion img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:0!important;
  filter:none!important;
}
@media(max-width:420px){
  #healthDock .mount-slot,
  .mount-subpanel .mount-slot,
  #mountSlot.mount-slot{
    width:clamp(28px,9vw,38px)!important;
    height:clamp(28px,9vw,38px)!important;
  }
}


/* Hermes mount/menu repair: clone inventory empty-slot geometry without accent border. */
#healthDock #mountSlot.mount-slot,
#mountSlot.mount-slot,
.mount-subpanel #mountSlot.mount-slot{
  width:clamp(36px,8vw,54px)!important;
  height:clamp(36px,8vw,54px)!important;
  min-width:0!important;
  aspect-ratio:1/1!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0 auto!important;
  border:2px solid rgba(255,255,255,.28)!important;
  border-radius:6px!important;
  background:rgba(0,0,0,.46)!important;
  box-shadow:inset 0 0 16px rgba(0,0,0,.9)!important;
  overflow:hidden!important;
}
#healthDock #mountSlot.mount-slot.filled,
#mountSlot.mount-slot.filled,
.mount-subpanel #mountSlot.mount-slot.filled{
  border-color:rgba(255,255,255,.28)!important;
  background:rgba(0,0,0,.64)!important;
  box-shadow:inset 0 0 14px rgba(0,0,0,.85),0 0 8px rgba(255,255,255,.08)!important;
}
#mountSlot #pegasusCompanion.pegasus-companion.hidden{display:none!important;}
#mountSlot #pegasusCompanion.pegasus-companion{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
  border-radius:3px!important;
  transform-origin:center center!important;
}
#mountSlot #pegasusCompanion.pegasus-companion img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  border:0!important;
  border-radius:3px!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
#combatDebugToggle.combat-debug-toggle{font-size:1rem!important;line-height:1!important;}
.pause-overlay .pause-panel,
.pause-overlay .pause-panel *{pointer-events:auto!important;}
@media(max-width:420px){
  #healthDock #mountSlot.mount-slot,
  #mountSlot.mount-slot,
  .mount-subpanel #mountSlot.mount-slot{
    width:clamp(32px,10vw,44px)!important;
    height:clamp(32px,10vw,44px)!important;
  }
}


/* Final mount-slot repair: make the mount HUD cell an inventory slot clone. */
#healthDock #mountSlot.mount-slot.inventory-slot,
#healthDock #mountSlot.mount-slot,
#mountSlot.mount-slot.inventory-slot,
#mountSlot.mount-slot,
.mount-subpanel #mountSlot.mount-slot.inventory-slot,
.mount-subpanel #mountSlot.mount-slot{
  box-sizing:border-box!important;
  inline-size:clamp(36px,8vw,54px)!important;
  block-size:clamp(36px,8vw,54px)!important;
  width:clamp(36px,8vw,54px)!important;
  height:clamp(36px,8vw,54px)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:54px!important;
  max-height:54px!important;
  aspect-ratio:1/1!important;
  display:grid!important;
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;
  padding:0!important;
  margin:0 auto!important;
  border:2px solid rgba(255,255,255,.28)!important;
  border-radius:6px!important;
  background:rgba(0,0,0,.46)!important;
  box-shadow:inset 0 0 16px rgba(0,0,0,.9)!important;
  overflow:hidden!important;
  position:relative!important;
  pointer-events:none!important;
}
#healthDock #mountSlot.mount-slot.filled,
#mountSlot.mount-slot.filled,
.mount-subpanel #mountSlot.mount-slot.filled{
  border-color:rgba(255,211,61,.7)!important;
  background:rgba(0,0,0,.64)!important;
  box-shadow:inset 0 0 14px rgba(0,0,0,.85),0 0 8px rgba(255,211,61,.16)!important;
}
#mountSlot.mount-slot.empty{
  border-color:rgba(255,255,255,.28)!important;
  background:rgba(0,0,0,.46)!important;
  box-shadow:inset 0 0 16px rgba(0,0,0,.9)!important;
}
#mountSlot > #pegasusCompanion.pegasus-companion.hidden{
  display:none!important;
}
#mountSlot > #pegasusCompanion.pegasus-companion{
  box-sizing:border-box!important;
  position:static!important;
  inset:auto!important;
  right:auto!important;
  bottom:auto!important;
  inline-size:100%!important;
  block-size:100%!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:1/1!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:3px!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:1!important;
}
#mountSlot > #pegasusCompanion.pegasus-companion:not(.pegasus-jump):not(.pegasus-wall-flight):not(.pegasus-peek){
  transform:none!important;
}
#mountSlot > #pegasusCompanion.pegasus-companion::after{
  content:none!important;
  display:none!important;
}
#mountSlot > #pegasusCompanion.pegasus-companion > img{
  box-sizing:border-box!important;
  display:block!important;
  inline-size:100%!important;
  block-size:100%!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:3px!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
@media(max-width:420px){
  #healthDock #mountSlot.mount-slot.inventory-slot,
  #healthDock #mountSlot.mount-slot,
  #mountSlot.mount-slot.inventory-slot,
  #mountSlot.mount-slot,
  .mount-subpanel #mountSlot.mount-slot.inventory-slot,
  .mount-subpanel #mountSlot.mount-slot{
    inline-size:clamp(32px,10vw,44px)!important;
    block-size:clamp(32px,10vw,44px)!important;
    width:clamp(32px,10vw,44px)!important;
    height:clamp(32px,10vw,44px)!important;
    max-width:44px!important;
    max-height:44px!important;
  }
}


/* Release cleanup: hide legacy debug/dev surfaces. Dev Mode now exposes only
   the in-game menu invincibility toggle. */
#splashDevToolsRow,
#splashDevLabBtn,
#splashLightningLabBtn,
#splashLayerDebugBtn,
#splashBossDebugBtn,
#splashMobileDebugBtn,
.pdq-mobile-debug-panel,
.pdq-layer-debug-panel,
.debug-panel,
.debug-menu,
.pause-dev-panel {
  display:none!important;
}
.combat-debug-tool-invincible.active {
  border-color:#ffd33d!important;
  color:#fff7b8!important;
  box-shadow:0 0 14px rgba(255,211,61,.35), inset 0 0 10px rgba(255,211,61,.12)!important;
}