/* ============================================================
   css/game.css — all game styles (theme/base/UI split deferred)
   Source: original style blocks 1 (minus font-face), 2, 3
============================================================ */


/* Jackpot badge styles (polished + thick outline) */
.tag.jp{
  display:inline-flex;
  align-items:center;
  line-height:1;
  padding:2px 8px;              /* a touch wider for readability */
  border-radius:10px;           /* slightly rounder than base .tag */
  border-width:2px !important; 
  font-weight:700;
  letter-spacing:.15px;         /* subtle premium look */
}

/* Uncommon Jackpot → green */
.tag.jp-uncommon{
  border-color:#065f46;
  background:#0b1a13;
  color:#34d399;
  box-shadow:0 0 0 1px #065f4633 inset, 0 0 8px #34d39933;
}

/* Rare Jackpot → blue */
.tag.jp-rare{
  border-color:#1e40af;
  background:#0b1020;
  color:#60a5fa;
  box-shadow:0 0 0 1px #1e40af33 inset, 0 0 8px #60a5fa33;
}

/* Epic Jackpot → purple */
.tag.jp-epic{
  border-color:#7e22ce;
  background:#160b1f;
  color:#a855f7;
  box-shadow:0 0 0 1px #7e22ce33 inset, 0 0 8px #a855f733;
}

/* Legendary Jackpot → gold (matches Legendary gear vibe) */
.tag.jp-legendary{
  border-color:#9a6b14;         /* same border tone as Legendary gear */
  background:#1f130f;
  color:#fbbf24;                 /* gold text */
  box-shadow:0 0 0 1px #9a6b1433 inset, 0 0 10px #fbbf2433;
  text-shadow:0 0 8px #fbbf2426; /* gentle golden glow on text */
}

/* Artifact Jackpot → orange */
.tag.jp-artifact{
  border-color:#7c2d12;
  background:#1f130b;
  color:#f97316;
  box-shadow:0 0 0 1px #7c2d1233 inset, 0 0 8px #f9731633;
}

/* Mythic Jackpot → red */
.tag.jp-mythic{
  border-color:#7f1d1d;
  background:#1a0b0b;
  color:#dc2626;
  box-shadow:0 0 0 1px #7f1d1d33 inset, 0 0 8px #dc262633;
}


/* Boss marker: pulsing core with orbiting ember */
.boss-marker { pointer-events: none; }
.boss-marker.inactive { opacity: 0.6; }
.hero-callout { pointer-events: none; }
.hero-callout text {
  letter-spacing: 1px;
}
.boss-core,
.boss-orbit-wrap {
  transform-box: fill-box;
  transform-origin: center;
}

.boss-marker {
  pointer-events: none;
  filter: url(#glowBoss);
}

.boss-core,
.boss-core-inner,
.boss-flare {
  transform-box: fill-box;
  transform-origin: center;
}

.boss-core {
  fill: url(#bossCoreGrad);
  stroke: rgba(138, 0, 0, 0.9);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  animation: bossCore 1.4s ease-in-out infinite;
}

.boss-core-inner {
  fill: rgba(255, 225, 225, 0.95);
  opacity: .85;
  animation: coreInner 1.4s ease-in-out infinite;
}

.boss-flare {
  fill: rgba(176, 0, 0, 0.35);
  mix-blend-mode: screen;
  animation: flarePulse 1.4s ease-in-out infinite;
}

.boss-orbit {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: orbitSpin 2.6s linear infinite;
}

.boss-orbit-wrap { pointer-events: none; }

.boss-orb {
  transform-box: fill-box;
  transform-origin: center;
  fill: rgba(210, 32, 48, 0.95);
  opacity: 0.9;
  mix-blend-mode: normal;
  animation: orbPulse 2s ease-in-out infinite;
}

.boss-orb-trail {
  fill: rgba(138, 0, 0, 0.85);
  opacity: .45;
  filter: blur(0.6px);
  mix-blend-mode: normal;
  transform-box: fill-box;
  transform-origin: center;
  animation: orbitTrail 2.6s linear infinite;
}

/* Mini Boss marker: compact molten core with halo */
.mini-marker {
  pointer-events: none;
  filter: url(#glowMini);
}

.mini-core,
.mini-core-inner,
.mini-flare,
.mini-orbit-wrap {
  transform-box: fill-box;
  transform-origin: center;
}

.mini-core {
  fill: url(#miniCoreGrad);
  stroke: rgba(255, 172, 66, 0.85);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  animation: bossCore 1.4s ease-in-out infinite;
}

.mini-core-inner {
  fill: rgba(255, 249, 235, 0.9);
  opacity: .8;
  animation: coreInner 1.6s ease-in-out infinite;
}

.mini-flare {
  fill: rgba(255, 150, 40, 0.32);
  mix-blend-mode: screen;
  animation: flarePulse 1.8s ease-in-out infinite;
}

.mini-orbit {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: orbitSpin 3.1s linear infinite;
}

.mini-orbit-wrap { pointer-events: none; }

.mini-orb {
  transform-box: fill-box;
  transform-origin: center;
  fill: rgba(255, 214, 160, 0.95);
  opacity: 0.9;
  mix-blend-mode: normal;
  animation: orbPulse 2.4s ease-in-out infinite;
}

.mini-orb-trail {
  fill: rgba(255, 164, 66, 0.85);
  opacity: .45;
  filter: blur(0.5px);
  mix-blend-mode: normal;
  transform-box: fill-box;
  transform-origin: center;
  animation: orbitTrail 3.1s linear infinite;
}

/* Chest marker: gold coin with a gentle spin */
.map-coin {
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center center;
  animation: coinSpin 5.5s linear infinite;
}

.map-coin use {
  pointer-events: none;
}

/* Elite (guaranteed) chest: a gently breathing shiny coin on the mini-map. */
.chest-marker--elite .map-coin {
  filter: drop-shadow(0 0 2px rgba(255, 188, 46, 0.58)) drop-shadow(0 0 5px rgba(219, 143, 18, 0.46)) brightness(1.14) saturate(1.22);
  animation: coinSpin 3.2s linear infinite, eliteCoinBreathe 6.8s ease-in-out infinite;
}

/* Hero marker: layered violet core with orbiting void orb */
.hero-marker { pointer-events:none; filter:url(#glowPurple); }
.hero-marker.hidden { opacity: 0; }
.hero-core,
.hero-ring,
.hero-pulse {
  transform-box:fill-box;
  transform-origin:center;
}

.hero-core {
  fill:url(#heroCoreGrad);
  stroke:rgba(168,139,250,0.55);
  stroke-width:0.9;
  vector-effect:non-scaling-stroke;
  animation:bossCore 1.8s ease-in-out infinite;
}

.hero-ring {
  fill:none;
  stroke:rgba(124,58,237,0.95);
  stroke-width:1.6;
  vector-effect:non-scaling-stroke;
  mix-blend-mode:normal;
  opacity:.95;
  animation:coreInner 1.8s ease-in-out infinite;
}

.hero-pulse {
  display:none;
  fill:rgba(59,7,100,0.16);
  stroke:rgba(168,85,247,0.35);
  stroke-width:2.2;
  opacity:0;
}

.hero-marker.pulsing .hero-pulse {
  display:inline;
  animation:reversePulse 1.8s ease-out infinite;
}

.hero-orbit-wrap {
  pointer-events:none;
  transform-box:fill-box;
  transform-origin:center;
}

.hero-orbit {
  transform-box:view-box;
  transform-origin:0 0;
  animation:orbitSpin 3.4s linear infinite;
}

.hero-orb {
  transform-box:fill-box;
  transform-origin:center;
  fill:url(#heroOrbGrad);
  stroke:rgba(76,29,149,0.85);
  stroke-width:0.9;
  vector-effect:non-scaling-stroke;
  opacity: 0.9;
  mix-blend-mode:normal;
  animation:orbPulse 2.8s ease-in-out infinite;
}

.hero-orb-trail {
  fill:rgba(109,40,217,0.6);
  opacity:.4;
  filter:blur(0.5px);
  mix-blend-mode:normal;
  transform-box:fill-box;
  transform-origin:center;
  animation:orbitTrail 3.4s linear infinite;
}

/* Core scales + fades a bit */
@keyframes bossCore {
  0%   { transform: scale(0.92); opacity: .9; }
  45%  { transform: scale(1.05); opacity: .65; }
  60%  { transform: scale(1.24); opacity: .85; }
  100% { transform: scale(0.96); opacity: .9; }
}

@keyframes coreInner {
  0%   { transform: scale(0.86); opacity: .75; }
  45%  { transform: scale(1.05); opacity: .95; }
  100% { transform: scale(0.9);  opacity: .8; }
}

@keyframes flarePulse {
  0%   { transform: scale(0.88); opacity: .35; }
  40%  { transform: scale(1.12); opacity: .55; }
  70%  { transform: scale(1.35); opacity: .2; }
  100% { transform: scale(1.1);  opacity: .28; }
}

@keyframes orbitSpin {
  to { transform: rotate(1turn); }
}

@keyframes orbitTrail {
  0%   { opacity: .65; }
  55%  { opacity: .18; }
  100% { opacity: 0; }
}

@keyframes orbPulse {
  0%, 100% { transform: scale(0.92); }
  45%      { transform: scale(1.1); }
}

@keyframes spin-border{
  to{transform:rotate(1turn)}
}

@keyframes reversePulse{
  0%{transform:scale(1.4);opacity:0;}
  50%{opacity:1;}
  100%{transform:scale(1);opacity:0;}
}

@keyframes coinSpin {
  0%   { transform: rotate(0deg)   scaleX(1); }
  25%  { transform: rotate(90deg)  scaleX(0.55); }
  50%  { transform: rotate(180deg) scaleX(0.25); }
  75%  { transform: rotate(270deg) scaleX(0.55); }
  100% { transform: rotate(360deg) scaleX(1); }
}

@keyframes eliteCoinBreathe {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(255, 183, 38, 0.50)) drop-shadow(0 0 4px rgba(204, 123, 12, 0.38)) brightness(1.08) saturate(1.18);
  }
  50% {
    filter: drop-shadow(0 0 3px rgba(255, 196, 54, 0.68)) drop-shadow(0 0 7px rgba(224, 139, 12, 0.56)) brightness(1.20) saturate(1.28);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .boss-marker, .mini-marker,
  .boss-core, .boss-core-inner, .boss-flare, .boss-orbit, .boss-orb, .boss-orb-trail,
  .mini-core, .mini-core-inner, .mini-flare, .mini-orbit, .mini-orb, .mini-orb-trail,
  .hero-marker, .hero-core, .hero-ring, .hero-orbit, .hero-orb, .hero-orb-trail, .hero-pulse,
  .map-coin, .idle-coin .coin-icon, .btn.resume-pulse, .btn.resume-orb::before,
  .card::before, .card::after, .modal-card::before {
    animation: none;
    transform: none;
    filter: none;
    mix-blend-mode: normal;
  }
  .btn.resume-pulse{box-shadow:none;}
}

:root{
  --bg1:#000; --bg2:#000; --panel:#0f1420; --border:#243041; /* pitch black background */
  --window-border:#4c1d95; --window-inner:#050505;
  --game-frame-border:rgba(72,30,132,.45);
  --modal-main-tint-1:rgba(6,12,22,.42);
  --modal-main-tint-2:rgba(4,8,16,.58);
  --modal-main-border:rgba(64,92,148,.38);
  --modal-main-glow:rgba(30,64,175,.32);
  --modal-secondary-tint-1:rgba(6,12,22,.38);
  --modal-secondary-tint-2:rgba(3,7,16,.52);
  --modal-secondary-border:rgba(18,44,92,.78);
  --modal-secondary-glow:rgba(30,64,175,.26);
  --void-ink:rgba(2,4,12,.9);
  --void-mist:rgba(72,98,160,.15);
  --void-ember:rgba(140,90,220,.18);
  --glass-sheen:rgba(230,245,255,.18);
  --text:#e5e7eb; --muted:#a9b6cc; --accent:#38bdf8; --good:#10b981;
  --bad:#ef4444; --gold:#fbbf24; --boss:#8b0000; --boss-orbit:#a00000;
  --mini-boss:#ff8c00; --mini-boss-orbit:#cc6f00;
  /* Brightened affix tier colors */
  --tier-Common:#f3f4f6; --tier-Uncommon:#0a9b47;
  --tier-Rare:#005bea; --tier-Epic:#5b21b6;
  --tier-Legendary:#fbbf24; --tier-Artifact:#f97316;
  --tier-Mythic:#dc2626;
  --drag-ghost-border:#3b82f6;
  --drag-ghost-bg:rgba(59,130,246,.1);
  --app-width:1400px;
  --app-height:880px;
  --game-screen-top:12px;
  --game-screen-height:880px;
  --game-screen-bottom-gap:12px;
  --game-menu-gap:10px;
  --default-ui-top:12px;
  --default-ui-bottom-gap:12px;
  --panel-scroll-height:480px;
  --hero-roster-scroll-height:calc(var(--app-height) - 104px);
  --hero-roster-hard-max-height:calc(var(--app-height) - 104px);
  --adventure-log-panel-height:calc(var(--app-height) - 110px);
  --adventure-log-scroll-height:48px;
  --hero-column-panel-height:calc(var(--app-height) - 110px);
  --battle-loot-max-lines-height:260px;
  --battle-shell-min-height:var(--battle-loot-max-lines-height);
  --runtime-screen-width:1200px;
  --runtime-screen-height:720px;
  --runtime-screen-aspect:1.6667;
  --runtime-ui-scale:1;
  --modal-viewport-padding:24px;
  --modal-card-padding:14px;
  --modal-max-width:1460px;
  --modal-max-height:calc(100vh - 48px);
  --regular-info-modal-lift:clamp(48px, 9vh, 96px);
  --key-input-glow:rgba(138,43,226,.48);
  --key-input-glow-core:rgba(211,160,255,.68);
  --heal-potion-sprite-url:url('../Assets/HealPotions/Healing-Potions.png');
  --heal-potion-render-size:48px;
  --heal-potion-sheet-columns:10;
  --heal-potion-sheet-rows:10;
  --heal-potion-sheet-width:calc(var(--heal-potion-render-size) * var(--heal-potion-sheet-columns));
  --heal-potion-sheet-height:calc(var(--heal-potion-render-size) * var(--heal-potion-sheet-rows));
  --heal-potion-center-y:0px;
}

/* …your existing styles … */

  *{box-sizing:border-box}
      html,body{height:100%;margin:0;background:#000;color:var(--text);/* was linear-gradient(180deg,var(--bg1),var(--bg2)) */
        font:14px/1.35 'Press Start 2P', monospace;overflow:hidden}
      body.wallpaper-engine,
      body.browser-fullscreen-runtime{
        width:100vw;
        width:100dvw;
        min-width:100vw;
        min-height:100vh;
        min-height:100dvh;
        overscroll-behavior:none;
        user-select:none;
        touch-action:manipulation;
      }
      body.browser-fullscreen-runtime{
        position:fixed;
        inset:0;
        overflow:hidden;
      }
      body.wallpaper-engine .wrap,
      body.browser-fullscreen-runtime .wrap{
        left:0;
      }
      body.starfield-disabled{
        background-color:#070b14;
        background-image:
          radial-gradient(130% 85% at 50% -8%, rgba(56,189,248,.18), rgba(56,189,248,0) 58%),
          radial-gradient(120% 100% at 85% 110%, rgba(124,58,237,.16), rgba(124,58,237,0) 62%),
          linear-gradient(180deg,#101a31 0%, #060b15 52%, #030508 100%);
        background-attachment:fixed;
      }
      .wrap{width:min(var(--app-width),calc(100vw - 8px));height:var(--app-height);position:absolute;top:6px;left:0;padding:0 4px 14px;display:grid;grid-template-columns:minmax(360px,390px) minmax(480px,1fr) minmax(360px,390px);gap:0 6px;align-items:start;align-content:start;z-index:1}
      #starfield-bg{
        position:fixed;
        inset:0;
        width:100vw;
        height:100vh;
        pointer-events:auto;
        background:#000;
        z-index:0;
      }
  .card{
    position:relative;
    background:
      radial-gradient(120% 160% at 50% -10%, rgba(56,189,248,.12), transparent 55%),
      radial-gradient(140% 180% at 50% 120%, rgba(0,0,0,.7), transparent 60%),
      linear-gradient(145deg,rgba(10,14,22,.14),rgba(6,10,16,.28)),
      linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
    border:1px solid rgba(148,163,184,.18);
    border-radius:14px;
    outline:1px solid rgba(6,10,16,.85);
    outline-offset:-1px;
    padding:10px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.03),
      inset 0 -18px 30px rgba(0,0,0,.5),
      0 18px 34px rgba(0,0,0,.55);
    backdrop-filter:blur(1px) saturate(120%);
    -webkit-backdrop-filter:blur(1px) saturate(120%);
  }
  .card::before{
    content:"";
    position:absolute;
    inset:6px;
    border-radius:10px;
    background:
      radial-gradient(110% 140% at 50% 15%, var(--void-mist), transparent 60%),
      radial-gradient(160% 200% at 50% 110%, rgba(0,0,0,.7), transparent 60%),
      radial-gradient(90% 120% at 20% 0%, rgba(120,140,255,.08), transparent 55%);
    opacity:.22;
    pointer-events:none;
  }
  .card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    border:1px solid rgba(120,140,190,.18);
    box-shadow:
      inset 0 0 22px rgba(0,0,0,.55),
      inset 0 0 22px rgba(56,189,248,.08);
    pointer-events:none;
  }
  .card > *{position:relative;z-index:1}
  .card.main-panel{
    position:relative;
    background:
      radial-gradient(140% 180% at 50% -20%, rgba(56,189,248,.16), transparent 60%),
      radial-gradient(140% 200% at 50% 120%, rgba(0,0,0,.75), transparent 65%),
      linear-gradient(150deg,rgba(4,10,24,.45),rgba(3,8,20,.62)),
      linear-gradient(170deg,rgba(10,28,68,.28),rgba(6,14,32,.2)),
      linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
    border:1px solid rgba(148,163,184,.2);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.05),
      inset 0 -22px 36px rgba(0,0,0,.55),
      0 16px 30px rgba(0,0,0,.48);
  }
  .card.main-panel::after{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid var(--game-frame-border);
    border-radius:inherit;
    box-shadow:0 0 6px rgba(122,56,214,.18), inset 0 0 0 1px rgba(255,255,255,.04), inset 0 0 24px rgba(8,12,24,.6);
    pointer-events:none;
  }
  .hud{
    --floor-action-gap:8px;
    grid-column:1/-1;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:10px;
    padding-top:4px;
    padding-left:8px;
    position:relative
  }
  .hud-right{margin-left:auto;display:flex;gap:8px;margin-right:8px;justify-content:flex-end}
  .hud-center{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-left:0;
    padding-inline:8px;
    align-self:flex-start;
    flex:1 1 220px;
    min-width:max-content;
  }
  .pause-ats{display:flex;flex-direction:column;gap:4px}
  .idle-shop{display:flex;flex-direction:column;gap:4px}
  .zoom-controls{display:flex;flex-direction:column;gap:4px}
  .zoom-controls .btn{padding:4px 8px;font-size:11px;min-height:26px}
  .shop-title{display:block;text-align:center;margin:0 auto;width:fit-content;max-width:100%}
  .row{display:flex;gap:8px;align-items:center}
  button, .btn{font-family:'Press Start 2P', monospace}
  button{cursor:pointer}
  button:disabled{cursor:not-allowed}
  :where(button,.btn,[role="button"]){
    transition:transform .12s ease,box-shadow .16s ease,filter .16s ease;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
  }
  :where(button,.btn,[role="button"]):hover:not(:disabled):not([aria-disabled="true"]){
    transform:translateY(-1px);
    filter:hue-rotate(6deg) saturate(1.06);
    box-shadow:0 3px 7px rgba(0,0,0,.3);
  }
  .btn{background:#1a2232;border:1px solid #2a3140;border-radius:10px;padding:8px 12px;color:var(--text);cursor:pointer}
  .btn:hover{background:#202a3e}
  .btn[disabled]{opacity:.55;cursor:not-allowed}
  /* Dark UV glass fortress theme */
  :root{
    --retro-ink:#05030a;
    --retro-panel:#08050f;
    --retro-panel-2:#120a1f;
    --retro-edge-light:#cbb4ff;
    --retro-edge-mid:#7b44d8;
    --retro-edge-dark:#1a1030;
    --retro-gold:#d3a664;
    --retro-gold-bright:#f0c987;
    --retro-cyan:#9f86ff;
    --retro-violet:#b78dff;
    --retro-violet-deep:#4c1d95;
    --fortress-steel:#2f2a39;
    --fortress-stone:#171220;
  }
  body{
    background:
      radial-gradient(130% 115% at 10% -8%,rgba(147,51,234,.24),transparent 45%),
      radial-gradient(150% 135% at 96% 104%,rgba(59,7,100,.2),transparent 50%),
      linear-gradient(165deg,#010102 0%,#07040d 42%,#120a18 76%,#020203 100%);
    text-shadow:1px 1px 0 rgba(0,0,0,.55);
  }
  .card,
  .modal-card,
  .stats-card{
    border-radius:12px !important;
    border:1px solid rgba(160,120,255,.42) !important;
    background:
      linear-gradient(130deg,rgba(9,6,16,.52),rgba(7,4,12,.68)),
      linear-gradient(210deg,rgba(42,30,68,.28),rgba(25,18,40,.2)),
      radial-gradient(130% 150% at 50% -20%,rgba(168,85,247,.24),transparent 58%),
      linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.01) 24%,rgba(255,255,255,0) 70%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.2),
      inset 0 -18px 30px rgba(4,1,9,.68),
      inset 0 0 0 2px rgba(53,37,83,.36),
      0 14px 26px rgba(0,0,0,.48),
      0 0 18px rgba(93,48,168,.22) !important;
    backdrop-filter:blur(8px) saturate(135%);
    -webkit-backdrop-filter:blur(8px) saturate(135%);
  }
  .card::before,
  .modal-card::before,
  .card::after,
  .modal-card::after{
    border-radius:9px !important;
  }
  .hud{
    border:1px solid rgba(180,145,255,.38);
    border-radius:12px;
    background:
      linear-gradient(125deg,rgba(8,5,14,.62),rgba(8,5,14,.82)),
      radial-gradient(145% 160% at 10% 0%,rgba(111,52,191,.28),transparent 55%),
      radial-gradient(120% 120% at 90% 110%,rgba(77,51,39,.22),transparent 54%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 20px rgba(0,0,0,.42);
    padding:8px 10px 6px;
  }
  .btn{
    border-radius:10px;
    border:1px solid rgba(190,159,255,.5);
    background:
      linear-gradient(155deg,rgba(24,14,40,.84),rgba(15,10,24,.88)),
      linear-gradient(180deg,rgba(171,97,255,.18),rgba(171,97,255,0) 38%),
      linear-gradient(180deg,rgba(96,53,30,.2),rgba(21,13,32,.2));
    color:#f6f0ff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 -2px 0 rgba(9,4,17,.72),0 4px 10px rgba(0,0,0,.45);
    transition:transform .12s ease,filter .16s linear,background .14s linear,border-color .12s linear;
  }
  .btn:hover{
    background:
      linear-gradient(145deg,rgba(36,20,61,.9),rgba(18,10,30,.92)),
      linear-gradient(180deg,rgba(196,116,255,.27),rgba(196,116,255,0) 45%),
      linear-gradient(180deg,rgba(126,78,46,.26),rgba(34,19,43,.2));
    transform:translateY(-1px);
    filter:brightness(1.08) saturate(1.15) hue-rotate(6deg);
    border-color:rgba(222,190,255,.8);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 -2px 0 rgba(9,4,17,.72),0 6px 12px rgba(0,0,0,.48);
  }
  .btn:active{
    transform:translateY(1px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 -1px 0 rgba(9,4,17,.78),0 1px 4px rgba(0,0,0,.5);
  }
  .btn.buy,
  .start-btn{
    border-color:#b58a54 !important;
    background:
      linear-gradient(155deg,rgba(57,30,89,.9),rgba(30,18,43,.95)),
      linear-gradient(180deg,rgba(221,157,74,.25),rgba(178,112,31,.16) 45%,rgba(0,0,0,0));
    box-shadow:inset 0 0 0 1px rgba(243,222,181,.46),0 0 0 1px rgba(70,42,20,.9),0 0 16px rgba(178,112,31,.26);
  }
  .pill,
  .tag{
    border-radius:3px !important;
    border-width:2px !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  }
  .modal{
    background:
      radial-gradient(circle at 50% 8%,rgba(147,51,234,.24),rgba(4,2,8,.84) 62%),
      rgba(0,0,0,.72);
  }
  .name-display,
  .keypad-display{
    border-radius:8px;
    border:1px solid rgba(182,150,255,.42);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
    background:linear-gradient(170deg,rgba(14,10,24,.85),rgba(7,5,13,.92));
  }
  @keyframes resumePulse{
    0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,0);}
    55%{box-shadow:0 0 18px 6px rgba(56,189,248,.55);}
  }
  @keyframes runResumeGreenPulse{
    0%,100%{
      border-color:#22c55e;
      box-shadow:0 0 8px rgba(34,197,94,.45), 0 0 0 0 rgba(74,222,128,.55);
    }
    50%{
      border-color:#86efac;
      box-shadow:0 0 14px rgba(74,222,128,.95), 0 0 22px rgba(34,197,94,.75), 0 0 0 2px rgba(34,197,94,.35);
    }
  }
  @keyframes firstHirePulse{
    0%,100%{
      border-color:#4c1d95;
      box-shadow:0 0 0 0 rgba(124,58,237,0), 0 0 5px rgba(124,58,237,.35);
    }
    /* first bump */
    10%{
      border-color:#a78bfa;
      box-shadow:0 0 0 1px rgba(167,139,250,.32), 0 0 12px rgba(139,92,246,.75);
    }
    19%{
      border-color:#4c1d95;
      box-shadow:0 0 0 0 rgba(124,58,237,0), 0 0 5px rgba(124,58,237,.35);
    }
    /* second bump */
    28%{
      border-color:#8b5cf6;
      box-shadow:0 0 0 1px rgba(139,92,246,.30), 0 0 11px rgba(124,58,237,.72);
    }
    /* slower fade from the second bump */
    42%{
      border-color:#6d3fc5;
      box-shadow:0 0 0 1px rgba(124,58,237,.15), 0 0 8px rgba(124,58,237,.42);
    }
    58%{
      border-color:#4c1d95;
      box-shadow:0 0 0 0 rgba(124,58,237,0), 0 0 5px rgba(124,58,237,.35);
    }
    /* longer rest before repeating */
    82%{
      border-color:#4c1d95;
      box-shadow:0 0 0 0 rgba(124,58,237,0), 0 0 5px rgba(124,58,237,.35);
    }
  }
  @keyframes resumeOrbLoop{
    from{offset-distance:0%;}
    to{offset-distance:100%;}
  }
  .btn.resume-pulse{
    border-color:var(--accent);
    color:#fff;
    animation:resumePulse 1.6s ease-in-out infinite;
    box-shadow:0 0 0 0 rgba(56,189,248,0);
  }
  .btn.resume-orb{
    position:relative;
    overflow:visible;
  }
  .btn.resume-orb::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:14px;
    height:14px;
    border-radius:999px;
    offset-path:inset(-4px round 12px);
    offset-anchor:50% 50%;
    offset-rotate:0deg;
    pointer-events:none;
    z-index:2;
    opacity:0;
    animation-play-state:paused;
  }
  .btn.resume-orb::before{
    background:
      radial-gradient(circle,
        rgba(255,234,179,0.65) 0%,
        rgba(255,223,153,0.45) 45%,
        rgba(255,214,140,0) 72%);
    animation:resumeOrbLoop 4.8s linear infinite reverse;
    filter:blur(0.2px);
  }
  .btn.attention{position:relative;border:1px dotted var(--gold)}
  .btn.attention::after{display:none}
  .btn.buy{
    border:2px solid #b58a54;
    box-shadow:0 0 10px rgba(213,166,100,.45), 0 0 4px rgba(124,58,237,.25);
  }
  .btn.buy:not([disabled]){
    color:#fff;
  }
  .btn.buy[disabled]{
    color:#6b7280;
  }
  .start-btn{
    background:#2d0a4d;
    border:2px solid #7e22ce;
    box-shadow:0 0 8px #7e22ce;
    color:#fff;
    position:relative;
    overflow:visible;
  }
  .start-btn::before{
    content:"";
    position:absolute;
    top:-6px;left:-6px;right:-6px;bottom:-6px;
    border:2px solid #7e22ce;
    border-radius:inherit;
    box-shadow:0 0 12px #7e22ce;
    opacity:0;
    animation:reversePulse 1.8s ease-out infinite;
    pointer-events:none;
  }
  .start-btn[disabled]{
    background:#555;
    border-color:#555;
    box-shadow:none;
    color:#bbb;
  }
  .start-btn[disabled]::before{
    display:none;
  }
  .btn.tiny{padding:2px 6px;font-size:10px}
  .save-reset{display:flex;gap:6px;align-items:flex-start}
  .hud-icon-btn{
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-size:16px;
    line-height:1;
  }
  .hud-icon-btn .icon-glow{display:inline-flex;align-items:center;justify-content:center;line-height:1}
  #saveBtn{ color:#f5d0fe; }
  #saveBtn .icon-glow{text-shadow:0 0 8px #f0abfc,0 0 14px #a855f7}
  #run.run-paused-icon{
    color:#4ade80;
    text-shadow:0 0 8px #4ade80,0 0 16px #16a34a;
    border:1px solid #22c55e;
    animation:runResumeGreenPulse 1.2s ease-in-out infinite;
  }
  #run.run-running-icon{
    color:#f87171;
    text-shadow:0 0 8px #f87171,0 0 16px #dc2626;
    border:1px solid #ef4444;
    box-shadow:0 0 6px rgba(239,68,68,.5);
  }
  #hireBtn.first-hire-pulse{
    border:1px solid #4c1d95;
    box-shadow:0 0 5px rgba(124,58,237,.35);
    animation:firstHirePulse 2.4s ease-in-out infinite;
  }
  .log .save-banner{display:block;margin:4px auto;text-align:center;font-family:'Press Start 2P',monospace;color:#fff}
  .pill{display:inline-flex;gap:6px;align-items:center;background:linear-gradient(160deg,rgba(18,12,30,.9),rgba(11,8,20,.94));border:1px solid rgba(185,150,255,.38);border-radius:999px;padding:4px 10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 8px rgba(76,29,149,.16)}
  .pill.tiny{font-size:10px;padding:2px 6px}
  .pill.locked{opacity:.5}
  #streakPill{
    box-shadow:0 8px 18px rgba(15,23,42,.32), inset 0 0 0 1px rgba(255,255,255,.12);
    border-radius:14px;
    padding:6px 12px;
    min-width:260px;
    justify-content:center;
    margin:0 auto;
    background:linear-gradient(155deg,rgba(24,17,36,.95),rgba(13,10,24,.96));
  }
  #streakPill.active{box-shadow:0 8px 18px rgba(15,23,42,.32),0 0 6px #4ade80;border:1px solid #4ade80}
  #streakPill.inactive{box-shadow:0 8px 18px rgba(15,23,42,.32),0 0 6px var(--bad);border:1px solid var(--bad)}
  #streakPill .toggle-caption{font-size:10px;color:var(--muted);margin-left:4px}
#idlePill{flex-direction:column;text-align:center;gap:2px}
#idlePill:hover{cursor:pointer}
#idlePill .idle-label{color:#6b7280}
  #idlePill .idle-timer{color:#dc2626}
  #idlePill.active .idle-label,#idlePill.active .idle-timer{color:#4ade80;text-shadow:0 0 6px #4ade80}
  .idle-coin-reserve-display{
    display:none;
    align-items:center;
    gap:8px;
    order:90;
    margin-left:auto;
    flex:0 0 auto;
    min-height:28px;
    padding:4px 10px;
    border:1px solid rgba(251,191,36,.82);
    border-radius:999px;
    color:#ffe7a3;
    background:
      linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 42%),
      radial-gradient(circle at 16% 12%,rgba(251,191,36,.32),transparent 44%),
      linear-gradient(155deg,rgba(73,43,13,.94),rgba(19,14,25,.96));
    box-shadow:
      0 0 12px rgba(251,191,36,.26),
      inset 0 0 0 1px rgba(255,255,255,.13),
      inset 0 0 12px rgba(251,191,36,.08);
    font-size:11px;
    letter-spacing:.2px;
    line-height:1;
    white-space:nowrap;
  }
  .idle-coin-reserve-display:not(.hidden){
    display:inline-flex;
  }
  #floorWrap .floor-actions #gphBtn{
    order:80;
    flex:0 0 auto;
  }
  .idle-coin-reserve-text{
    display:inline-flex;
    align-items:center;
    gap:2px;
    color:var(--gold);
    text-shadow:0 0 7px rgba(251,191,36,.72),0 1px 0 rgba(0,0,0,.85);
  }
  .idle-coin-reserve-divider{
    width:1px;
    height:14px;
    background:linear-gradient(180deg,transparent,rgba(251,191,36,.74),transparent);
    box-shadow:0 0 6px rgba(251,191,36,.5);
  }
  .idle-coin-reserve-timer{
    color:#d9f99d;
    text-shadow:0 0 7px rgba(132,204,22,.48);
  }
  #idleCoinDropTimer{
    color:#4ade80;
    text-shadow:0 0 7px rgba(74,222,128,.7);
  }
  #floorInfoBottom .xp-bonus{color:inherit}
  #floorInfoBottom .loot-bonus{color:inherit}
  #floorInfoBottom .gem-bonus{color:inherit}
  #floorInfoBottom .gold-bonus{color:#dc2626;text-shadow:0 0 6px rgba(220,38,38,0.65);transition:color 0.2s ease,text-shadow 0.2s ease}
  #floorInfoBottom .gold-bonus.active{color:#4ade80;text-shadow:0 0 6px #4ade80}
  #streakText{white-space:nowrap;text-align:center;font-weight:600;letter-spacing:.2px}
  .small{font-size:12px;color:#cbd5e1}
  .monster-affix-detail{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    align-self:center;
    gap:2px;
    margin:0 auto;
    width:100%;
    max-width:360px;
    font-size:11px;
    color:#cbd5e1;
    opacity:.85;
    text-align:left;
  }
  .monster-affix-line{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    max-width:360px;
    margin:0;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    gap:6px;
    flex-wrap:nowrap;
    transform-origin:left center;
  }
  .monster-affix-line__label{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:4px;
    text-align:left;
  }
  .monster-affix-line__math{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    white-space:nowrap;
    gap:4px;
  }
  .monster-affix-line--stacked{
    flex-direction:column;
    gap:2px;
    white-space:normal;
  }
  .monster-affix-line--stacked .monster-affix-line__label{
    flex-wrap:wrap;
    line-height:1.2;
  }
  .monster-affix-line--stacked .monster-affix-line__math{
    white-space:nowrap;
  }
  .monster-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    width:100%;
    text-align:center;
  }
  .monster-elite-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:2px 8px;
    border:1px solid #7c2d12;
    border-radius:999px;
    background:#1f130f;
    color:#fbbf24;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    box-shadow:0 0 6px rgba(124,45,18,0.5);
  }
  .monster-elite-row{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
  }
  .monster-name{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    flex-wrap:nowrap;
    font-size:14px;
    font-weight:700;
    text-align:center;
    line-height:1.25;
  }
  .monster-level{
    flex:0 0 auto;
    font-size:11px;
    color:#8b5cf6;
    text-shadow:0 0 4px #4c1d95,0 0 8px #4c1d95;
    letter-spacing:0;
    white-space:nowrap;
  }
  .monster-name-text{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:0;
  }
  .monster-name .encounter-display-name{
    width:auto;
    min-width:0;
  }
  .encounter-display-name{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    width:100%;
    text-align:center;
    line-height:1.12;
  }
  .encounter-display-affix,
  .encounter-display-base{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    text-align:center;
  }
  .encounter-display-affix{
    padding:1px 8px;
    border:1px solid color-mix(in srgb,currentColor 34%,transparent);
    border-radius:999px;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.18));
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:capitalize;
    text-shadow:0 0 7px currentColor,0 1px 0 rgba(0,0,0,.85);
  }
  .encounter-display-base{
    color:#a31515;
    font-size:15px;
    font-weight:900;
    text-shadow:0 0 7px rgba(139,0,0,.32),1px 1px 0 rgba(0,0,0,.7);
    gap:5px;
    flex-wrap:nowrap;
  }
  .encounter-display-level{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
  }
  .encounter-display-base-text{
    min-width:0;
  }
  .encounter-display-base--chest{
    color:#fbbf24;
    text-shadow:0 0 8px rgba(251,191,36,.58),0 0 14px rgba(245,158,11,.32),1px 1px 0 rgba(0,0,0,.8);
  }
  #battleBox.battle-fx-hit{
    animation:battleHitPulse .28s ease-out;
  }
  #battleBox.battle-fx-clash{
    animation:battleClashPulse .34s ease-out;
  }
  #battleBox.battle-fx-chunk{
    animation:battleChunkPulse .4s cubic-bezier(.2,.75,.18,1);
  }
  @keyframes battleHitPulse{
    0%{transform:translate(0,0) scale(1);filter:brightness(1);}
    28%{transform:translate(-1px,0) scale(1.008);filter:brightness(1.06);}
    55%{transform:translate(1px,0) scale(1.01);filter:brightness(1.1);}
    100%{transform:translate(0,0) scale(1);filter:brightness(1);}
  }
  @keyframes battleClashPulse{
    0%{transform:translate(0,0) scale(1);filter:saturate(1) brightness(1);}
    20%{transform:translate(-1px,1px) scale(1.01);filter:saturate(1.16) brightness(1.08);}
    45%{transform:translate(1px,-1px) scale(1.014);filter:saturate(1.24) brightness(1.14);}
    100%{transform:translate(0,0) scale(1);filter:saturate(1) brightness(1);}
  }
  @keyframes battleChunkPulse{
    0%{transform:translate(0,0) scale(1);filter:brightness(1);}
    15%{transform:translate(-2px,1px) scale(1.016);filter:brightness(1.16);}
    42%{transform:translate(2px,-1px) scale(1.02);filter:brightness(1.24);}
    70%{transform:translate(-1px,0) scale(1.01);filter:brightness(1.1);}
    100%{transform:translate(0,0) scale(1);filter:brightness(1);}
  }
  .encounter-name{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    flex-wrap:wrap;
    width:100%;
    max-width:360px;
    margin:0 auto;
    font-size:13px;
    font-weight:700;
    text-align:center;
    line-height:1.25;
    word-break:break-word;
  }
  .timer{
    font-family:'Press Start 2P', monospace;
    color:var(--gold);
    border:1px solid var(--gold);
    padding:2px 6px;
    border-radius:6px;
    background:#1f130f;
  }

  .gph-gold-glow{
    color:var(--gold);
    text-shadow:0 0 6px var(--gold), 0 0 14px rgba(251,191,36,.55);
    font-weight:700;
  }
  .gph-total-only{
    text-align:center;
  }
  .gold-border{
    border:1px solid var(--gold);
    padding:2px 6px;
    border-radius:6px;
    background:#1f130f;
    box-shadow:0 0 4px var(--gold), inset 0 0 4px var(--gold);
  }
  .hero-point-border{
    border:1px solid #7c3aed;
    padding:2px 6px;
    border-radius:6px;
    background:linear-gradient(180deg, #1e1b4b 0%, #172554 100%);
    box-shadow:0 0 4px #8b5cf6, inset 0 0 4px rgba(96, 165, 250, 0.85);
    color:#ddd6fe;
  }
  .hero-point-border b{
    margin-left:4px;
    color:#bfdbfe;
  }
  #heroGold,
  #descendFloorBtn,
  #rerollFloorBtn,
  #gphBtn{
    min-height:28px;
    padding:3px 11px;
    border-radius:999px;
  }
  #heroGold{
    margin-top:0;
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
  }
  #heroGold b{
    margin-left:2px;
  }
  #shopGold{
    position:absolute;
    top:8px;
    left:8px;
    transform:none;
    z-index:10;
    display:none;
  }
  .switch{
    position:relative;
    display:inline-block;
    width:40px;
    height:20px;
  }
  .switch input{
    opacity:0;
    width:0;
    height:0;
  }
  .slider{
    position:absolute;
    cursor:pointer;
    top:0;left:0;right:0;bottom:0;
    background:linear-gradient(to right,var(--bad) 50%,var(--good) 50%);
    border-radius:20px;
    border:1px solid #fff;
  }
  .slider:before{
    position:absolute;
    content:'';
    height:16px;width:16px;
    left:2px;bottom:2px;
    background:white;
    border-radius:50%;
    transition:.2s;
  }
    .switch input:checked + .slider:before{
      transform:translateX(20px);
    }
    .pill.auto-equip .switch input:checked + .slider{
      border:1px solid #3b82f6;
      box-shadow:0 0 6px #3b82f6, 0 0 6px #3b82f6 inset;
    }
    .pill.idle-toggle .switch input:checked + .slider{
      border:1px solid #4ade80;
      box-shadow:0 0 6px #4ade80,0 0 6px #4ade80 inset;
    }
    .pill.auto-run-toggle .switch input:not(:checked) + .slider{
      border:1px solid var(--bad);
      box-shadow:0 0 6px var(--bad),0 0 6px var(--bad) inset;
    }
    .pill.auto-run-toggle .switch input:checked + .slider{
      border:1px solid #4ade80;
      box-shadow:0 0 6px #4ade80,0 0 6px #4ade80 inset;
    }
  .nowrap{white-space:nowrap;}
  .flavor-text{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:100%;
    text-align:center;
    font-size:10px;
    line-height:1.35;
    opacity:.8;
  }
  .exploring-phase-line{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    text-align:center;
  }
  #reset{
    border:2px solid var(--bad);
  }
  :root{
    --heroes-stack-gap:8px;
  }
  #heroes{
    padding-right:0;
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:stretch;
    max-height:var(--hero-roster-scroll-height);
  }
  .main-panel .gscrollWrap[data-gscroll="roster"]{
    margin-top:var(--heroes-stack-gap);
  }
  .hero-hire-container{
    width:100%;
    margin-left:0;
    margin-right:0;
    display:flex;
    justify-content:center;
  }
  .hero-hire-container .hire-slot{
    width:100%;
    max-width:none;
  }
  .hero{border:1px solid #2a3140;border-radius:10px;padding:6px;background:#0b1118;margin-bottom:0;width:100%;position:relative;z-index:10;display:flex;flex-direction:column;gap:6px}
  .hero-main-panel,
  .hero-pets-panel{
    width:100%;
    border:1px solid rgba(37,99,235,.55);
    border-radius:10px;
    background:linear-gradient(160deg,rgba(8,18,36,.95),rgba(7,16,30,.92));
    box-shadow:
      inset 0 0 0 1px rgba(96,165,250,.12),
      0 0 8px rgba(37,99,235,.22);
  }
  .hero-main-panel{
    position:relative;
    margin:0;
    padding:8px;
  }
  .hero-info{
    cursor:pointer;
    display:flex;
    flex-direction:column;
  }
  .hero-info:focus,
  .hero-pets:focus{
    outline:none;
  }
  .hero-info:focus-visible .hero-main-panel,
  .hero-pets:focus-visible .hero-pets-panel{
    border-color:rgba(212,175,55,.72);
    box-shadow:
      inset 0 0 0 1px rgba(255,230,170,.18),
      0 0 12px rgba(212,175,55,.26);
  }
  .hero-main-name-row{
    position:static;
    justify-content:flex-start;
    align-items:center;
    width:100%;
    min-height:68px;
  }
  .hero-portrait-frame{
    position:relative;
    width:68px;
    height:68px;
    flex:0 0 68px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(37,99,235,.55);
    border-radius:10px;
    background:
      radial-gradient(circle at 50% 18%,rgba(96,165,250,.16),transparent 58%),
      linear-gradient(160deg,rgba(8,18,36,.96),rgba(7,16,30,.94));
    box-shadow:
      inset 0 0 0 1px rgba(96,165,250,.14),
      inset 0 -10px 18px rgba(0,0,0,.42),
      0 0 8px rgba(37,99,235,.22);
    overflow:hidden;
  }
  .hero-portrait-frame::after{
    content:"";
    position:absolute;
    inset:2px;
    border-radius:8px;
    border:1px solid rgba(148,163,184,.16);
    box-shadow:inset 0 0 14px rgba(8,12,24,.72);
    pointer-events:none;
  }
  .hero-portrait{
    width:64px;
    height:64px;
    flex:0 0 64px;
    display:block;
    border-radius:8px;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% 35%,rgba(56,189,248,.1),transparent 54%),
      linear-gradient(145deg,rgba(3,8,20,.78),rgba(2,6,14,.9));
    background-position:var(--hero-portrait-position, center);
    background-repeat:no-repeat;
    background-size:cover;
  }
  .hero-portrait.has-portrait{
    background-image:
      var(--hero-portrait-image),
      radial-gradient(circle at 50% 35%,rgba(56,189,248,.1),transparent 54%),
      linear-gradient(145deg,rgba(3,8,20,.78),rgba(2,6,14,.9));
  }
  .hero-portrait.has-portrait.is-sheet{
    background-image:
      radial-gradient(circle at 50% 35%,rgba(56,189,248,.1),transparent 54%),
      linear-gradient(145deg,rgba(3,8,20,.78),rgba(2,6,14,.9));
    background-size:cover, cover;
    background-position:center;
  }
  .hero-portrait-img{
    display:block;
    width:64px;
    height:64px;
    max-width:64px;
    max-height:64px;
    object-fit:cover;
    object-position:center;
    border-radius:8px;
  }
  .hero-portrait.is-sheet .hero-portrait-img{
    position:absolute;
    left:0;
    top:0;
    width:var(--hero-portrait-render-width, calc(var(--hero-portrait-columns, 5) * 64px));
    height:var(--hero-portrait-render-height, calc(var(--hero-portrait-rows, 4) * 64px));
    max-width:none;
    max-height:none;
    object-fit:fill;
    object-position:left top;
    border-radius:0;
    transform:translate(var(--hero-portrait-offset-x, 0), var(--hero-portrait-offset-y, 0));
  }
  .hero-portrait-frame[data-open-portrait]{
    cursor:zoom-in;
  }
  .hero-portrait-frame[data-open-portrait]:hover,
  .hero-portrait-frame[data-open-portrait]:focus-visible{
    border-color:rgba(96,165,250,.82);
    box-shadow:
      inset 0 0 0 1px rgba(96,165,250,.2),
      inset 0 -10px 18px rgba(0,0,0,.42),
      0 0 12px rgba(37,99,235,.36);
    outline:none;
  }

  #portraitModal,
  #statsPortraitModal{
    align-items:center;
    justify-content:center;
  }
  #portraitModal.portrait-modal-layer{
    z-index:58;
  }
  #statsPortraitModal.portrait-modal-layer-top{
    z-index:92;
  }
  .portrait-showcase-card{
    width:auto;
    min-width:0;
    max-width:calc(100vw - 32px);
    padding:10px;
    overflow:hidden;
    --modal-tint-1:rgba(8,18,36,.96);
    --modal-tint-2:rgba(7,16,30,.94);
    --modal-border:rgba(37,99,235,.55);
    --modal-glow:rgba(37,99,235,.26);
  }
  .portrait-showcase-body{
    display:grid;
    place-items:center;
  }
  .portrait-showcase-stack{
    display:grid;
    gap:10px;
    justify-items:center;
  }
  .portrait-showcase-frame{
    position:relative;
    width:calc(var(--hero-portrait-showcase-size, 280px) + 8px);
    height:calc(var(--hero-portrait-showcase-size, 280px) + 8px);
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(37,99,235,.55);
    border-radius:14px;
    background:
      radial-gradient(circle at 50% 18%,rgba(96,165,250,.16),transparent 58%),
      linear-gradient(160deg,rgba(8,18,36,.96),rgba(7,16,30,.94));
    box-shadow:
      inset 0 0 0 1px rgba(96,165,250,.14),
      inset 0 -18px 28px rgba(0,0,0,.42),
      0 0 12px rgba(37,99,235,.24);
    overflow:hidden;
  }
  .portrait-showcase-frame::after{
    content:"";
    position:absolute;
    inset:4px;
    border-radius:11px;
    border:1px solid rgba(148,163,184,.16);
    box-shadow:inset 0 0 20px rgba(8,12,24,.72);
    pointer-events:none;
  }
  .portrait-showcase-art{
    position:relative;
    width:var(--hero-portrait-showcase-size, 280px);
    height:var(--hero-portrait-showcase-size, 280px);
    border-radius:10px;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% 35%,rgba(56,189,248,.1),transparent 54%),
      linear-gradient(145deg,rgba(3,8,20,.78),rgba(2,6,14,.9));
  }
  .portrait-showcase-img{
    position:absolute;
    left:0;
    top:0;
    width:var(--hero-portrait-render-width, calc(var(--hero-portrait-columns, 5) * var(--hero-portrait-showcase-size, 280px)));
    height:var(--hero-portrait-render-height, calc(var(--hero-portrait-rows, 4) * var(--hero-portrait-showcase-size, 280px)));
    max-width:none;
    max-height:none;
    object-fit:fill;
    object-position:left top;
    transform:translate(var(--hero-portrait-offset-x, 0), var(--hero-portrait-offset-y, 0));
    user-select:none;
    -webkit-user-drag:none;
  }
  .portrait-showcase-empty{
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    color:#94a3b8;
    font-size:13px;
    text-align:center;
  }
  .portrait-showcase-info{
    width:min(calc(100vw - 64px), calc(var(--hero-portrait-showcase-size, 280px) + 112px));
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:8px;
    border:1px solid rgba(147,51,234,.48);
    border-radius:12px;
    background:
      radial-gradient(circle at 50% 0%, rgba(147,51,234,.18), transparent 58%),
      linear-gradient(150deg, rgba(14,10,24,.92), rgba(7,5,13,.96));
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.08),
      0 10px 22px rgba(0,0,0,.38),
      0 0 16px rgba(147,51,234,.16);
    box-sizing:border-box;
  }
  .portrait-showcase-meta-row{
    display:grid;
    grid-template-columns:minmax(72px,.8fr) minmax(0,1.2fr);
    gap:6px;
    min-width:0;
  }
  .portrait-showcase-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-width:0;
    padding:5px 7px;
    border:1px solid rgba(148,163,184,.18);
    border-radius:8px;
    background:rgba(2,6,23,.38);
    color:#cbd5e1;
    font-size:12px;
    line-height:1.15;
    letter-spacing:.01em;
  }
  .portrait-showcase-line span:first-child{
    color:#94a3b8;
    font-weight:700;
  }
  .portrait-showcase-line b{
    color:#f8fafc;
    font-weight:800;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .portrait-showcase-name,
  .portrait-showcase-race{
    width:100%;
    justify-content:flex-start;
  }
  .portrait-showcase-name b,
  .portrait-showcase-race b{
    min-width:0;
    flex:1 1 auto;
  }
  .portrait-showcase-level{
    justify-content:center;
  }
  .portrait-showcase-stats-button{
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    font:inherit;
    justify-content:center;
    text-align:center;
    background:
      radial-gradient(circle at 50% 0%, rgba(250,204,21,.16), transparent 64%),
      linear-gradient(150deg, rgba(30,41,59,.72), rgba(15,23,42,.82));
    box-shadow:
      inset 0 0 0 1px rgba(250,204,21,.08),
      0 0 0 rgba(250,204,21,0);
    transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease;
  }
  .portrait-showcase-stats-button b{
    color:#fde68a;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .portrait-showcase-stats-button:hover,
  .portrait-showcase-stats-button:focus-visible{
    border-color:rgba(250,204,21,.72);
    color:#f8fafc;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.12),
      0 0 14px rgba(250,204,21,.18),
      0 8px 18px rgba(0,0,0,.28);
    transform:translateY(-1px);
    outline:none;
  }
  .portrait-showcase-stats-button:active{
    transform:translateY(0);
  }
  .hero-slot-badge{
    position:absolute;
    top:2px;
    left:2px;
    z-index:2;
    width:16px;
    height:16px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    border:1px solid #2d0f5d;
    background:radial-gradient(circle at 35% 30%,rgba(148,163,184,.18),rgba(18,8,33,.92) 58%,rgba(7,3,15,.96));
    color:#a8b0bd;
    font-size:8px;
    line-height:1;
    font-weight:700;
    font-family:Georgia,'Times New Roman',serif;
    letter-spacing:.1px;
    text-shadow:0 0 4px rgba(148,163,184,.42);
    box-shadow:
      0 0 5px rgba(45,15,93,.85),
      0 0 10px rgba(45,15,93,.45),
      inset 0 0 6px rgba(126,34,206,.36),
      inset 0 0 0 1px rgba(216,180,254,.12);
    pointer-events:none;
  }
  .hero-stats-card{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .hero-stats-card .small,
  .hero-stats-card li{
    line-height:1.25;
  }
  .hero-stats-race-line{
    color:#f6d58a;
    font-weight:800;
    letter-spacing:.2px;
    text-shadow:0 0 8px rgba(246,213,138,.34),1px 1px 0 rgba(0,0,0,.7);
  }
  .hero-dps-stat-line{
    color:#8b0000;
    font-weight:800;
    text-shadow:0 0 7px rgba(139,0,0,.42),1px 1px 0 rgba(0,0,0,.7);
  }
  .hero-attack-stat-line{
    color:#fbbf24;
    font-weight:800;
    text-shadow:0 0 7px rgba(251,191,36,.38),1px 1px 0 rgba(0,0,0,.7);
  }
  .hero-hp-stat-line{color:var(--bad)}
  .hero-healing-stat-line{color:#34d399;text-shadow:0 0 6px rgba(52,211,153,.28)}
  .hero-healing-stat-line .muted,
  .hero-healing-stat-sources{color:#9ca3af;opacity:.82;text-shadow:none}
  .hero-stat-list{
    list-style:none;
    padding-left:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .hero-affix-start{margin-top:6px}
  .hero-exp-line{
    color:#7FFF3F;
    margin-top:4px;
  }
  .hero-stats-level-line{display:flex;align-items:center;gap:4px}
  .inventory-stats .stats-card .hero-slot-badge{
    position:static;
    flex:0 0 16px;
    margin:0;
    vertical-align:middle;
  }
  .hero-meta-row{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    gap:4px;
    width:100%;
    box-sizing:border-box;
    margin:6px 0 0;
    padding:5px 7px;
    border:1px solid rgba(15,23,42,.92);
    border-radius:8px;
    background:
      linear-gradient(160deg,rgba(4,9,18,.96),rgba(5,13,25,.94)),
      radial-gradient(120% 140% at 50% -40%,rgba(96,165,250,.08),transparent 62%);
    box-shadow:
      inset 0 0 0 1px rgba(148,163,184,.06),
      inset 0 -8px 14px rgba(0,0,0,.34);
    font-size:11px;
    line-height:1.15;
  }
  .hero-meta-row [data-hero-level],
  .hero-meta-row [data-hero-ilvl],
  .hero-meta-row [data-hero-dps]{
    display:block;
    min-width:0;
    text-align:left;
    line-height:1.15;
  }
  .hero-meta-row [data-hero-ilvl]{
    color:#c65f00 !important;
    text-shadow:0 0 7px rgba(198,95,0,.38),0 1px 0 #000;
  }
  .hero-meta-row [data-hero-dps]{
    color:#8b0000;
    font-weight:900;
    text-shadow:0 0 7px rgba(139,0,0,.42),1px 1px 0 rgba(0,0,0,.7);
  }
  .hero-main-bars{
    margin-top:5px;
  }
  .hero-hp-row{
    position:relative;
  }
  .hero-heals{
    position:absolute;
    top:50%;
    left:-12px;
    transform:translate(-100%,-50%);
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:center;
  }
  .hero-pets{
    margin-top:0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .hero-pets[data-open-pets]{cursor:pointer}
  .hero-pets-panel{
    margin:0 2px;
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:6px;
    border-color:rgba(126,34,206,.65);
    background:linear-gradient(160deg,rgba(30,14,50,.95),rgba(22,10,40,.92));
    box-shadow:
      inset 0 0 0 1px rgba(196,181,253,.14),
      0 0 10px rgba(126,34,206,.24);
  }
  .hero-pets .pet-line{
    font-size:11px;
    line-height:1.2;
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hero-pets .pet-label{
    display:inline-flex;
    align-items:center;
    margin-right:4px;
  }
  .hero-pets .pet-icons{
    display:inline-flex;
    align-items:center;
  }
  .hero-pets .pet-icons .pet-icon{
    display:inline-flex;
    align-items:center;
  }
  .hero-pets .pet-name{
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:2px;
  }
  .hero-pets .pet-dps{
    font-variant-numeric:tabular-nums;
  }
  .hero-pets.has-info .hero-pet-actions{
    margin-top:0;
  }
  .hero-pet-actions{
    margin:0 2px;
    padding:4px 2px 0;
    gap:8px;
    justify-content:center;
    align-items:center;
    width:calc(100% - 4px);
    box-sizing:border-box;
  }
  .hero-pet-actions .hero-pet-action-btn{
    flex:1 1 0;
    min-width:0;
    max-width:104px;
    padding:5px 10px;
    border-radius:999px;
    line-height:1.05;
    text-align:center;
    justify-content:center;
    background:
      linear-gradient(135deg,rgba(46,16,101,.78),rgba(15,23,42,.82)),
      radial-gradient(120% 140% at 50% -40%,rgba(216,180,254,.22),transparent 60%);
    border-color:rgba(167,139,250,.72);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.08),
      0 0 9px rgba(126,34,206,.28);
    color:#151044;
    text-shadow:
      0 0 4px rgba(96,165,250,.65),
      0 0 8px rgba(124,58,237,.55),
      0 1px 0 rgba(255,255,255,.18);
    font-weight:900;
  }
  .hero-pet-actions .hero-pet-action-btn b,
  .hero-pet-actions .hero-pet-action-btn span{
    color:inherit;
    text-shadow:inherit;
  }
  .hero-pet-actions .hero-pet-action-btn:hover{
    border-color:rgba(216,180,254,.95);
    background:
      linear-gradient(135deg,rgba(76,29,149,.86),rgba(30,41,59,.88)),
      radial-gradient(120% 140% at 50% -40%,rgba(216,180,254,.3),transparent 62%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.12),
      0 0 12px rgba(167,139,250,.4);
  }
  .hero-bars-row{
    display:flex;
    align-items:flex-end;
    gap:6px;
    width:100%;
  }
  .hero-bars{
    flex:1 1 auto;
    min-width:0;
  }
  .hero-hp-row{
    display:flex;
    align-items:center;
    width:100%;
    margin-bottom:4px;
  }
  .hero-xp-row{
    width:100%;
  }
  .hero-xp-row .bar.hero-xp{
    margin:0;
  }
  .hero-bar-heal-btn{
    align-self:flex-end;
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    flex:0 0 48px;
    margin-bottom:-5px;
    padding:2px;
    gap:0;
    font-size:0;
    border-radius:6px;
    overflow:hidden;
    isolation:isolate;
    background:
      radial-gradient(circle at 50% 8%,rgba(248,113,113,.16),transparent 52%),
      linear-gradient(145deg,rgba(18,10,14,.98),rgba(5,8,13,.96));
    border:1px solid rgba(248,113,113,.58);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.09),
      inset 0 -5px 8px rgba(15,23,42,.72),
      0 0 0 1px rgba(34,197,94,.18),
      0 2px 8px rgba(0,0,0,.45);
  }
  .hero-bar-heal-btn::before{
    inset:-1px;
    border-radius:6px;
    opacity:.72;
  }
  .hero-bar-heal-btn .potion-count{
    position:absolute;
    right:3px;
    bottom:3px;
    display:block;
    margin:0;
    padding:1px 2px;
    min-width:10px;
    color:#fef3c7;
    background:rgba(15,23,42,.82);
    border:1px solid rgba(251,191,36,.58);
    border-radius:4px;
    font-size:7px;
    line-height:1;
    font-weight:700;
    letter-spacing:.2px;
    text-align:center;
    text-shadow:0 1px 0 rgba(0,0,0,.8);
    pointer-events:none;
  }
  .hero-bar-heal-btn::after{
    left:50%;
    bottom:4px;
    z-index:2;
    display:block;
    transform:translateX(-50%);
    font-size:7px;
    letter-spacing:.2px;
  }
  .hero-bar-heal-btn[data-ready="true"]::after{
    left:5px;
    top:5px;
    bottom:auto;
    width:12px;
    height:12px;
    transform:none;
    font-size:13px;
    line-height:10px;
    letter-spacing:0;
  }
  .hero-bar-heal-btn[data-ready="true"]{
    border-color:rgba(248,113,113,.82);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.1),
      inset 0 -5px 8px rgba(15,23,42,.72),
      0 0 0 1px rgba(248,113,113,.22),
      0 0 10px rgba(248,113,113,.34),
      0 2px 8px rgba(0,0,0,.45);
  }
  .hero-bar-heal-btn .heal-potion-icon{
    --heal-potion-center-y:0px;
    width:100%;
    height:100%;
  }
  .bar.hp{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 8px;
    height:16px;
    background:#360404;
    border:1px solid #d4af37;
    box-shadow:0 0 6px rgba(127,0,0,.6),0 0 12px rgba(127,0,0,.35),0 0 0 1px rgba(212,175,55,.65) inset;
    flex:1 1 auto;
    min-width:0;
  }
  .bar.loot{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 8px;
    height:16px;
    background:#2a1507;
    border:1px solid #d4af37;
    box-shadow:0 0 6px rgba(217,119,6,.55),0 0 12px rgba(234,179,8,.35),0 0 0 1px rgba(212,175,55,.65) inset;
    flex:1 1 auto;
    min-width:0;
  }
  .bar.hp>i{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    background:linear-gradient(90deg,#7f0000,#c00000,#7f0000);
    box-shadow:0 0 6px rgba(255,82,82,.7),0 0 12px rgba(255,82,82,.45);
    transition:width .25s linear;
  }
  .bar.loot>i{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    background:linear-gradient(90deg,#b45309,#fbbf24,#b45309);
    box-shadow:0 0 6px rgba(251,191,36,.7),0 0 12px rgba(217,119,6,.55);
    transition:width .25s linear;
  }
  .bar.hp .bar-label{
    position:relative;
    z-index:1;
    font-size:10px;
    line-height:1;
    color:var(--text);
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    text-align:center;
    width:100%;
  }
  .monster-hp-wrap{
    position:relative;
    width:360px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
  }
  .monster-frog-lane{
    position:relative;
    height:12px;
    width:100%;
    overflow:hidden;
    display:none;
    pointer-events:none;
  }
  body.ui-theme-frog .monster-frog-lane{
    display:block;
  }
  .monster-frog{
    position:absolute;
    bottom:0;
    font-size:10px;
    line-height:1;
    filter:drop-shadow(0 0 4px rgba(134,239,172,.45));
    transform:translateY(0);
    animation:monsterFrogHop 1.35s ease-in-out infinite;
    opacity:.92;
  }
  .monster-frog:nth-child(1){ left:7%; animation-delay:0s; }
  .monster-frog:nth-child(2){ left:24%; animation-delay:.26s; }
  .monster-frog:nth-child(3){ left:42%; animation-delay:.52s; }
  .monster-frog:nth-child(4){ left:63%; animation-delay:.18s; }
  .monster-frog:nth-child(5){ left:81%; animation-delay:.77s; }
  @keyframes monsterFrogHop{
    0%,100%{ transform:translateY(0) scale(1); }
    25%{ transform:translateY(-1px) scale(.98); }
    50%{ transform:translateY(-5px) scale(1.06); }
    72%{ transform:translateY(-1px) scale(.99); }
  }
  .bar.loot .bar-label{
    position:relative;
    z-index:1;
    font-size:10px;
    line-height:1;
    color:var(--gold);
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    text-align:center;
    width:100%;
    text-shadow:0 0 6px rgba(251,191,36,.45);
  }
  .bar.glow-purple{
    filter:drop-shadow(0 0 3px rgba(45,15,93,.6));
  }
  .hero-name{font-weight:bold}
  .hero-name-display{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:2px;
    white-space:normal;
    max-width:100%;
    min-width:0;
    font-weight:inherit;
    --hero-name-max-font:18px;
    --hero-name-min-font:var(--hero-name-max-font);
    font-size:var(--hero-name-max-font);
    line-height:1.2;
    text-align:left;
  }
  .hero .hero-name-display{
    width:auto;
    min-height:68px;
    flex:1 1 auto;
    box-sizing:border-box;
    padding:2px 8px 2px 8px;
    --hero-name-min-font:9px;
    --hero-name-line-min-font:8px;
    align-items:flex-start;
    justify-content:center;
    text-align:left;
  }
  .hero-name-display .hero-name-line{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:4px;
    white-space:nowrap;
    flex-wrap:nowrap;
    max-width:100%;
    min-width:0;
  }
  .hero-name-display .hero-name-base{
    font-size:1.15em;
    color:#fff;
  }
  .hero-name-display .hero-base-name-group{
    display:inline-flex;
    align-items:center;
    gap:0;
  }
  .hero-name-display .hero-name-base .hero-base-name{
    position:relative;
    display:inline-block;
    padding-bottom:1px;
    --hero-base-underline-inset-left:0px;
    --hero-base-underline-inset-right:0px;
  }
  .hero-name-display .hero-name-base .hero-base-name::after{
    content:"";
    position:absolute;
    left:var(--hero-base-underline-inset-left);
    right:var(--hero-base-underline-inset-right);
    bottom:0;
    height:1px;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(30,64,175,0.5),rgba(29,78,216,0.5),rgba(30,64,175,0.5));
    box-shadow:0 0 4px rgba(29,78,216,0.5);
  }
  .hero-name-display .hero-name-class,
  .hero-name-display .hero-name-suffix{font-size:0.9em;}
  .hero-name-display .hero-affix{display:inline-flex;align-items:center;gap:4px}
  .hero-name-display .hero-affix .tier-dot{margin:0}
  .hero-name-display .hero-affix-text{font-weight:600}
  .hero-name-display.hero-name-condensed{letter-spacing:.01em}
  .hero-name[data-rename]{cursor:pointer}
  .hero-name .hero-affix{display:inline-flex;align-items:center}
  .hero-name .hero-affix-suffix .tier-dot{margin-left:6px;margin-right:0}
  .hero-name-display .hero-affix-suffix .tier-dot{margin-left:0;margin-right:0}
  .pill.hero-name{font-weight:normal;color:#fff;font-size:1em}
  button.hero-base-name{
    --hero-base-underline-inset-left:10px;
    --hero-base-underline-inset-right:10px;
  }
  .hero-name-wrap{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;max-width:100%}
  .hero-name-wrap .hero-affix{display:inline-flex;align-items:center}
  .hero-name-wrap .hero-affix .hero-affix-text{margin-left:2px}
  .shiny-icon{display:inline-flex;align-items:center;vertical-align:middle;line-height:1;transform:translateY(-3px);color:#fbbf24;text-shadow:0 0 3px rgba(250,191,36,0.85),0 0 7px rgba(217,119,6,0.6)}
  .hero-name .hero-shiny,.hero-name-wrap .hero-shiny{display:inline-flex;align-items:center;margin-right:2px}
  #modalTitle.inventory-title{flex:1 1 auto;display:flex;align-items:flex-start;justify-content:center;gap:8px;padding:6px 0;text-align:center;flex-wrap:wrap}
  #modalTitle.inventory-title.inventory-title-single-line{flex-wrap:nowrap;align-items:center}
  #modalTitle.inventory-title .hero-name-wrap{align-items:center;gap:4px;min-width:0;font-size:clamp(0.95rem,2.4vw,1.2rem);white-space:normal;flex-wrap:wrap;flex:1 1 100%;justify-content:center;order:-1}
  #modalTitle.inventory-title.inventory-title-single-line .hero-name-prefix,
  #modalTitle.inventory-title.inventory-title-single-line .hero-name-wrap,
  #modalTitle.inventory-title.inventory-title-single-line .hero-name-display,
  #modalTitle.inventory-title.inventory-title-single-line .hero-name-display .hero-name-line{white-space:nowrap;flex-wrap:nowrap}
  #modalTitle.inventory-title.inventory-title-single-line .hero-name-wrap{flex:0 1 auto;order:0}
  #modalTitle.inventory-title .hero-name-display{flex-direction:row;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;--hero-name-max-font:16px;--hero-name-min-font:12px;font-size:var(--hero-name-max-font);line-height:1.3}
  #modalTitle.inventory-title .hero-name-display .hero-name-line{flex-wrap:wrap;white-space:normal;justify-content:center}
  #modalTitle.inventory-title .hero-name-display .hero-name-base{font-size:1.05em}
  #modalTitle.inventory-title .hero-name-display .hero-name-class,
  #modalTitle.inventory-title .hero-name-display .hero-name-suffix{font-size:0.85em}
  #modalTitle.inventory-title .pill.hero-name{margin:0;padding:3px 10px;font-size:0.9em}
  #modalTitle.inventory-title .hero-name-prefix{display:inline-flex;align-items:center;gap:4px;font-size:0.85em;color:#cbd5e1;white-space:nowrap}
  .inventory-modal-header{align-items:center;display:grid;gap:10px;grid-template-columns:auto minmax(0,1fr) auto;width:100%}
  .inventory-modal-header.no-nav,
  .modal-card.modal-pets-view .inventory-modal-header,
  .modal-card.modal-creature-view .inventory-modal-header{grid-template-columns:minmax(0,1fr)}
  .modal-card.modal-pets-view .inventory-modal-header,
  .modal-card.modal-creature-view .inventory-modal-header{position:relative;align-items:flex-start;min-height:34px}
  .inventory-modal-header.no-nav .inventory-title-cluster,
  .modal-card.modal-pets-view .inventory-title-cluster,
  .modal-card.modal-creature-view .inventory-title-cluster{justify-self:center}
  .modal-card.modal-pets-view #modalGold,
  .modal-card.modal-creature-view #modalGold{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    z-index:1;
  }
  .modal-card.modal-pets-view .hero-loot-nav-btn,
  .modal-card.modal-creature-view .hero-loot-nav-btn{display:none !important}
  .inventory-title-cluster{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
  .hero-loot-nav-btn{
    border:1px solid rgba(148,163,184,.45);
    border-radius:12px;
    padding:8px 14px;
    font-weight:700;
    letter-spacing:.35px;
    background:linear-gradient(180deg,rgba(37,99,235,.34),rgba(30,64,175,.2));
    box-shadow:0 6px 18px rgba(15,23,42,.38), inset 0 1px 0 rgba(255,255,255,.2);
    transition:transform .12s ease,box-shadow .16s ease,filter .16s ease;
  }
  .hero-loot-nav-btn:hover:not(:disabled){
    transform:translateY(-1px);
    filter:brightness(1.08);
    box-shadow:0 10px 22px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.28);
  }
  .hero-loot-nav-btn:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.45)}
  .hero-loot-nav-btn.left{justify-self:start}
  .hero-loot-nav-btn.right{justify-self:end}
  .hero-loot-nav-btn.hidden{visibility:hidden;pointer-events:none}
  .pet-title-stack{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1px;
    text-align:center;
  }
  .pet-title-row{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
    white-space:normal;
  }
  .pet-title-amp{
    display:inline-flex;
    align-items:center;
    font-weight:600;
  }
  .pet-title-group{
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .pet-title-group .pet-title-icon{
    display:inline-flex;
    align-items:center;
  }
  .tier-word{margin-left:2px;font-size:0.8em}
  .tier-word-break{display:block;margin:2px 0 0 0;font-size:0.75em}
  .pill.auto-equip{box-shadow:0 0 6px #3b82f6}
  .pill.idle-toggle{box-shadow:0 0 6px #4ade80}
  .pill.auto-run-toggle{box-shadow:0 0 6px var(--bad);padding:4px 6px;gap:4px}
  .pill.auto-run-toggle.on{box-shadow:0 0 6px #4ade80}
  .pill.auto-run-toggle .switch{width:32px}
  .pill.auto-run-toggle .switch input:checked + .slider:before{transform:translateX(12px)}
  .pill.auto-equip.locked{opacity:.5;cursor:pointer}
  .pill.equip-best{box-shadow:0 0 6px #3b82f6;cursor:pointer}
  .pill.equip-best.locked{opacity:.5;cursor:pointer}
  .pill.inventory-pets{box-shadow:0 0 8px rgba(139,92,246,.55);cursor:pointer;justify-content:center}
  .pill.inventory-pets:hover{border-color:#a78bfa;color:#f5f3ff;background:rgba(76,29,149,.28)}
  .pill.inventory-retire{
    justify-content:center;
    cursor:pointer;
    color:#fee2e2;
    border-color:rgba(248,113,113,.85);
    background:linear-gradient(135deg,rgba(127,29,29,.82),rgba(69,10,10,.9));
    box-shadow:0 0 10px rgba(239,68,68,.5),inset 0 0 0 1px rgba(254,202,202,.08);
  }
  .pill.inventory-retire:hover{
    color:#fff;
    border-color:#fca5a5;
    background:linear-gradient(135deg,rgba(185,28,28,.92),rgba(127,29,29,.95));
    box-shadow:0 0 14px rgba(248,113,113,.65),inset 0 0 0 1px rgba(254,202,202,.16);
  }
  .stats-card{border:1px solid rgba(148,163,184,.28);border-radius:12px;padding:10px;background:rgba(15,23,42,.55);margin-bottom:8px;position:relative;z-index:10;pointer-events:auto;box-shadow:0 12px 28px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.05);backdrop-filter:blur(6px) saturate(125%);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
  .stats-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.55),0 0 18px rgba(59,130,246,.2)}
  .bar{height:10px;background:#2b2f3b;border:1px solid #3a3f4b;border-radius:999px;overflow:hidden}
  .bar>i{display:block;height:100%;background:var(--bad)}
  .bar.rest{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 8px;
    background:#0a142e;
    border-color:#1e3a8a;
    box-shadow:0 0 6px rgba(37,99,235,.35),0 0 12px rgba(30,64,175,.25),0 0 0 1px rgba(30,64,175,.55) inset;
  }
  .bar.rest>i{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    background:linear-gradient(90deg,#0b2a6b,#1d4ed8,#0b2a6b);
    box-shadow:0 0 6px rgba(59,130,246,.6),0 0 12px rgba(37,99,235,.4);
    transition:width .15s linear;
  }
  .bar.search{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 8px;
    background:#2a1507;
    border-color:#9a3412;
    box-shadow:0 0 6px rgba(234,88,12,.35),0 0 12px rgba(180,83,9,.25),0 0 0 1px rgba(124,45,18,.6) inset;
  }
  .bar.search>i{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    background:linear-gradient(90deg,#b45309,#f97316,#b45309);
    box-shadow:0 0 6px rgba(249,115,22,.6),0 0 12px rgba(234,88,12,.45);
    transition:width .15s linear;
  }

  .bar.rest .bar-label,
  .bar.search .bar-label{
    position:relative;
    z-index:1;
    width:100%;
    color:#fff7ed;
    font-size:10px;
    font-weight:800;
    letter-spacing:.04em;
    line-height:1;
    text-align:center;
    text-shadow:0 1px 2px #000,0 0 5px rgba(0,0,0,.9);
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  .bar.search.discovering{
    background:#170a2b;
    border-color:#6d28d9;
    box-shadow:0 0 6px rgba(109,40,217,.35),0 0 12px rgba(76,29,149,.25),0 0 0 1px rgba(46,16,101,.65) inset;
  }
  .bar.search.discovering>i{
    background:linear-gradient(90deg,#4c1d95,#7c3aed,#4c1d95);
    box-shadow:0 0 6px rgba(124,58,237,.55),0 0 12px rgba(109,40,217,.4);
  }
  .blue>i{background:#7FFF3F}
  .bar.bubbles{background-color:#1a1e27;background-image:repeating-linear-gradient(to right,#2b2f3b 0,#2b2f3b calc((100%/20) - 2px),transparent calc((100%/20) - 2px),transparent calc(100%/20))}
  .bar.bubbles>i{
    background-color:#7FFF3F;
    background-image:repeating-linear-gradient(
      to right,
      #7FFF3F 0,
      #7FFF3F calc((100%/20) - 2px),
      rgba(26,30,39,.55) calc((100%/20) - 2px),
      rgba(26,30,39,.55) calc(100%/20)
    );
  }
  .bar.hero-xp{position:relative;background:#10230d;border-color:#2f5b26;box-shadow:0 0 6px rgba(127,255,63,.45),0 0 12px rgba(127,255,63,.25)}
  .bar.hero-xp::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.85;background-repeat:repeat;background-size:calc(100%/20) 100%,calc(100%/20) 100%;background-image:radial-gradient(circle at center,rgba(255,255,255,.22) 0,rgba(255,255,255,.08) 55%,rgba(255,255,255,0) 72%),linear-gradient(to right,rgba(16,35,13,0) 0,rgba(16,35,13,0) calc(100% - 2px),rgba(16,35,13,.55) calc(100% - 2px),rgba(16,35,13,.55) 100%)}
  .bar.hero-xp>i{position:relative;background:linear-gradient(90deg,#58d445,#7fff3f,#58d445);box-shadow:0 0 6px rgba(127,255,63,.7),0 0 12px rgba(127,255,63,.55);transition:width .25s linear;border-radius:inherit}
  .bar.hero-xp>i::after{content:"";position:absolute;top:50%;right:-2px;width:16px;height:16px;border-radius:50%;pointer-events:none;opacity:0;transform:translate(50%,-50%) scale(.35);background:radial-gradient(circle,rgba(230,255,198,.98) 0%,rgba(166,255,94,.9) 28%,rgba(96,255,56,.55) 52%,rgba(96,255,56,0) 76%);box-shadow:0 0 8px rgba(127,255,63,.95),0 0 18px rgba(127,255,63,.7),0 0 30px rgba(74,222,128,.42);mix-blend-mode:screen}
  .bar.hero-xp>i.xp-end-pulse::after{animation:heroXpEndPulse .72s ease-out}
  @keyframes heroXpEndPulse{0%{opacity:0;transform:translate(50%,-50%) scale(.25)}18%{opacity:1;transform:translate(50%,-50%) scale(1.08)}55%{opacity:.72;transform:translate(50%,-50%) scale(.82)}100%{opacity:0;transform:translate(50%,-50%) scale(1.35)}}
  .potion-btn{--heal-ring-color:rgba(34,197,94,.88);min-width:48px;min-height:48px;width:48px;height:48px;aspect-ratio:1;flex:0 0 48px;padding:4px;border:1px solid rgba(110,231,183,.48);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:#f87171;font-size:16px;line-height:1;position:relative;overflow:hidden;isolation:isolate;box-shadow:0 0 0 1px rgba(34,197,94,.25);transition:transform .15s ease,box-shadow .15s ease}
  .potion-btn::before{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;z-index:2;pointer-events:none}
  .potion-btn[data-cooldown="true"]{
    border-color:rgba(148,163,184,.42);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 1px rgba(15,23,42,.72),0 2px 8px rgba(0,0,0,.42);
  }
  .potion-btn[data-cooldown="true"]::before{
    background:
      radial-gradient(circle at 50% 50%,rgba(15,23,42,.04) 0 46%,rgba(2,6,23,.24) 47% 56%,rgba(0,0,0,.42) 57% 100%),
      conic-gradient(from -90deg,transparent 0 calc(var(--pct,0deg) - 2deg),rgba(250,204,21,.76) calc(var(--pct,0deg) - 2deg) var(--pct,0deg),transparent var(--pct,0deg) 360deg),
      conic-gradient(from -90deg,rgba(52,211,153,.26) 0 var(--pct,0deg),rgba(3,7,18,.88) var(--pct,0deg) 360deg);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.07),
      inset 0 0 0 2px rgba(34,197,94,.12),
      inset 0 0 16px rgba(0,0,0,.74),
      0 0 8px rgba(52,211,153,.16);
    backdrop-filter:saturate(.58) brightness(.72);
  }
  .potion-btn[data-cooldown="true"] .heal-potion-icon{
    filter:grayscale(.42) saturate(.62) brightness(.72) drop-shadow(0 0 2px rgba(148,163,184,.32));
  }
  .potion-btn::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:3px;
    z-index:2;
    display:block;
    transform:translateX(-50%);
    font-size:9px;
    color:#fbbf24;
    line-height:1;
    pointer-events:none;
  }
  .potion-btn:not([data-ready="true"])::after{
    content:'';
  }
  .potion-btn[data-ready="true"]::after{
    content:'';
    left:4px;
    top:4px;
    bottom:auto;
    width:11px;
    height:11px;
    display:block;
    transform:none;
    border:0;
    border-radius:1px;
    background:
      linear-gradient(to bottom,transparent 0 30%,rgba(4,47,46,.2) 30% 37%,rgba(6,78,59,.72) 37% 63%,rgba(4,47,46,.2) 63% 70%,transparent 70% 100%),
      linear-gradient(to right,transparent 0 30%,rgba(4,47,46,.2) 30% 37%,rgba(6,78,59,.72) 37% 63%,rgba(4,47,46,.2) 63% 70%,transparent 70% 100%);
    box-shadow:none;
    color:transparent;
    opacity:.72;
    filter:
      drop-shadow(0 0 2px rgba(16,185,129,.8))
      drop-shadow(0 0 5px rgba(5,150,105,.48));
    mix-blend-mode:screen;
    animation:healReadyCrossPulse 1.8s ease-in-out infinite;
  }
  .potion-btn.hero-bar-heal-btn[data-ready="true"]::after{
    left:5px;
    top:5px;
    width:10px;
    height:10px;
  }
  @keyframes healReadyCrossPulse{
    0%,100%{opacity:.52;transform:scale(.94);filter:drop-shadow(0 0 2px rgba(16,185,129,.7)) drop-shadow(0 0 4px rgba(5,150,105,.38))}
    50%{opacity:.78;transform:scale(1.04);filter:drop-shadow(0 0 3px rgba(16,185,129,.88)) drop-shadow(0 0 7px rgba(5,150,105,.58))}
  }
  @media (prefers-reduced-motion:reduce){
    .potion-btn[data-ready="true"]::after{animation:none}
  }
  .heal-potion-icon{
    position:absolute;
    inset:50% auto auto 50%;
    z-index:1;
    display:block;
    width:var(--heal-potion-render-size,42px);
    height:var(--heal-potion-render-size,42px);
    transform:translate(-50%,calc(-50% + var(--heal-potion-center-y,0px)));
    flex:0 0 auto;
    image-rendering:pixelated;
    image-rendering:crisp-edges;
    background-image:
      var(--heal-potion-sprite-url),
      radial-gradient(circle at 50% 28%,rgba(255,255,255,.92) 0 10%,transparent 12%),
      linear-gradient(180deg,#fee2e2 0 18%,#dc2626 19% 58%,#7f1d1d 59% 100%);
    background-repeat:no-repeat;
    background-size:
      var(--heal-potion-sheet-width,calc(42px * 10)) var(--heal-potion-sheet-height,calc(42px * 10)),
      100% 100%,
      100% 100%;
    background-position:
      var(--heal-potion-offset-x,0) var(--heal-potion-offset-y,0),
      center,
      center;
    border-radius:3px;
    filter:drop-shadow(0 0 4px rgba(248,113,113,.68));
  }
  .heal-potion-icon::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(135deg,rgba(255,255,255,.32),transparent 36%,rgba(0,0,0,.18) 78%);
    pointer-events:none;
  }

  .potion-count{position:relative;z-index:3;font-size:10px;line-height:1;color:#facc15}
  .potion-btn.disabled{opacity:.5;cursor:default}
  .potion-btn:not(.disabled):hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(34,197,94,.5),0 0 8px rgba(34,197,94,.35)}
  /* Dungeon map backdrop */
  .svgbox{
  position:relative;
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  width:100%;
  aspect-ratio:80/50;
  background:#000;
  image-rendering:pixelated;
}
  .svgbox svg{
    width:100%;
    height:100%;
    display:block;
    position:relative;
    z-index:1;
    pointer-events:none;
  }

  .svgbox .click-ring{
    position:absolute;
    left:0;
    top:0;
    width:4px;
    height:4px;
    border:2px solid #88ccff;
    border-radius:50%;
    pointer-events:none;
    transform:translate(-50%,-50%) scale(0);
    /* animation:clickRing 2.5s steps(12,end) forwards; */ /* clicking animation disabled */
    image-rendering:pixelated;
    opacity:0.8;
    z-index:0;
  }

  @keyframes clickRing{
    to{transform:translate(-50%,-50%) scale(20);opacity:0;}
  }

  .hero-icon{
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#2d0a4d;
    border:1px solid #7e22ce;
    box-shadow:0 0 6px #7e22ce;
    vertical-align:middle;
    margin:0 2px;
  }

  .log{
    height:100%;
    min-height:0;
    max-height:none;
    font-size:11px;
  }
  .viewport-bounded-panel{
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  #adventureLogPanel{
    height:auto;
    min-height:0;
    padding-left:6px;
    padding-right:6px;
    max-height:min(var(--adventure-log-panel-height), calc(var(--app-height) - 96px));
  }
  #heroColumnPanel{
    height:auto;
    padding-left:6px;
    padding-right:6px;
    max-height:min(var(--hero-column-panel-height), calc(var(--app-height) - 96px));
  }
  .hero-column-heading{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:100%;
    margin:0 0 8px;
    text-align:center;
  }
  .hero-column-heading .rpg-panel-title{
    margin:0;
  }
  .hero-column-heading #dpsBtn{
    align-self:center;
    margin:0;
  }
  .hero-column-heading .hero-title-with-dps{
    gap:8px;
    padding-left:16px;
    padding-right:16px;
    text-align:center;
  }
  .hero-title-label{
    flex:0 0 auto;
  }
  .hero-title-dps-button{
    min-height:22px;
    padding:3px 8px;
    font-size:11px;
    line-height:1;
    transform:none;
  }
  #heroColumnPanel .gscrollWrap[data-gscroll="roster"]{
    margin-top:0;
    margin-bottom:6px;
    flex:0 1 var(--hero-roster-scroll-height);
    height:var(--hero-roster-scroll-height);
    max-height:var(--hero-roster-scroll-height);
    min-height:0;
  }
  .heroRosterScroll{
    max-height:var(--hero-roster-scroll-height);
    min-height:0;
  }
  .card.main-panel > .gscrollWrap{
    margin-left:0;
    width:100%;
  }
  .gscrollWrap{
    display:grid;
    grid-template-columns:26px 1fr;
    gap:4px;
    height:100%;
    width:100%;
    min-height:0;
  }
  .gScrollArea{
    height:100%;
    overflow:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .gScrollArea::-webkit-scrollbar{width:0;height:0}
  .gscrollLane{
    padding:4px 3px;
    display:flex;
    flex-direction:column;
    gap:6px;
    user-select:none;
    touch-action:none;
    border:1px solid rgba(139,92,246,.4);
    background:linear-gradient(180deg, rgba(139,92,246,.12) 0%, rgba(59,7,100,.15) 50%, rgba(139,92,246,.12) 100%);
    box-shadow:0 0 16px rgba(139,92,246,.25), inset 0 0 20px rgba(139,92,246,.1);
    border-radius:10px;
    min-width:22px;
    max-width:22px;
    animation:gLanePulse 3s ease-in-out infinite;
    position:relative;
    z-index:15;
  }
  @keyframes gLanePulse{0%,100%{box-shadow:0 0 20px rgba(139,92,246,.25), inset 0 0 30px rgba(139,92,246,.1)}50%{box-shadow:0 0 28px rgba(139,92,246,.4), inset 0 0 35px rgba(139,92,246,.15)}}
  .gBand{height:22px;border-radius:6px;border:1px solid rgba(167,139,250,.5);background:linear-gradient(180deg, rgba(139,92,246,.25), rgba(88,28,135,.2)),rgba(15,10,30,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 10px rgba(139,92,246,.3);position:relative;overflow:hidden;cursor:pointer;padding:0;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center}
  .gBand:hover{border-color:rgba(167,139,250,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(139,92,246,.5), 0 2px 4px rgba(0,0,0,.3);background:linear-gradient(180deg, rgba(139,92,246,.35), rgba(88,28,135,.28)),rgba(15,10,30,.6);transform:scale(1.02)}
  .gBand:active{transform:scale(0.98) translateY(1px)}
  .gBand::before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;transform:translate(-50%,-50%);border-left:4px solid transparent;border-right:4px solid transparent;opacity:1;filter:drop-shadow(0 0 4px rgba(255,255,255,.6));pointer-events:none;transition:all 0.2s ease}
  .gBand::after{display:none}
  .gBandUp::before{border-bottom:6px solid rgba(255,255,255,.95);border-top:none;margin-top:-1px}
  .gBandDown::before{border-top:6px solid rgba(255,255,255,.95);border-bottom:none;margin-top:1px}
  .gBand:hover::before{filter:drop-shadow(0 0 8px rgba(167,139,250,1)) drop-shadow(0 0 12px rgba(255,255,255,.5))}
  .gShine{position:absolute;inset:0;background:linear-gradient(90deg,rgba(139,92,246,0) 0%,rgba(167,139,250,.4) 50%,rgba(139,92,246,0) 100%);opacity:.8;background-size:200% 100%;animation:gBtnSweep 2s linear infinite;pointer-events:none;border-radius:8px}
  @keyframes gBtnSweep{0%{background-position:200% 0%}100%{background-position:-200% 0%}}
  .gCharge{position:absolute;left:4px;right:4px;top:50%;height:10px;margin-top:-5px;border-radius:999px;background:linear-gradient(90deg,rgba(139,92,246,0),rgba(167,139,250,.6),rgba(139,92,246,0));opacity:0;transform:scaleX(.05);transform-origin:center;filter:drop-shadow(0 0 12px rgba(167,139,250,.4));pointer-events:none}
  .gscrollLane.holdUp .gBandUp .gCharge,.gscrollLane.holdDown .gBandDown .gCharge{opacity:1;transform:scaleX(var(--gCharge,.05))}
  .gBand.disabled{opacity:.25;cursor:default;filter:grayscale(.4);pointer-events:none}
  .gBand.disabled .gShine{opacity:.1}
  .gBand.disabled::before{opacity:.3;filter:none}
  .gSlot{flex:1;border-radius:10px;overflow:hidden;border:1px solid rgba(139,92,246,.35);background:linear-gradient(180deg, rgba(139,92,246,.08), rgba(15,10,30,.4), rgba(139,92,246,.08));position:relative;cursor:grab;box-shadow:inset 0 0 20px rgba(139,92,246,.12), inset 0 2px 4px rgba(0,0,0,.2)}
  .gSlot:active{cursor:grabbing}
  .gSlot:hover{border-color:rgba(139,92,246,.5);box-shadow:inset 0 0 25px rgba(139,92,246,.18), inset 0 2px 4px rgba(0,0,0,.2)}
  .gTrack{position:absolute;left:50%;top:16px;bottom:16px;width:4px;transform:translateX(-50%);border-radius:999px;opacity:1;background:linear-gradient(180deg, rgba(139,92,246,.3), rgba(167,139,250,.7), rgba(139,92,246,.3));box-shadow:0 0 12px rgba(139,92,246,.4), 0 0 24px rgba(139,92,246,.2);animation:gTrackGlow 2s ease-in-out infinite}
  @keyframes gTrackGlow{0%,100%{box-shadow:0 0 12px rgba(139,92,246,.4), 0 0 24px rgba(139,92,246,.2)}50%{box-shadow:0 0 16px rgba(139,92,246,.6), 0 0 32px rgba(139,92,246,.3)}}
  .gTrack::after{content:"";position:absolute;left:50%;top:0;width:24px;height:100px;transform:translateX(-50%) translateY(var(--gAuraY,0px));border-radius:999px;background:radial-gradient(ellipse at center,rgba(167,139,250,.5) 0%,rgba(139,92,246,.2) 40%,rgba(0,0,0,0) 70%);opacity:1;pointer-events:none}
  @keyframes gShimmer{0%{background-position:0% 0%}100%{background-position:0% 180%}}
  .gTipDot{position:absolute;left:50%;width:10px;height:10px;transform:translateX(-50%);border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(167,139,250,.8) 60%,rgba(139,92,246,.4) 100%);opacity:1;filter:drop-shadow(0 0 6px rgba(139,92,246,.6));pointer-events:none;box-shadow:0 0 8px rgba(139,92,246,.5), 0 0 16px rgba(139,92,246,.3)}
  .gTipTop{top:16px}.gTipBot{bottom:16px}
  .gSlot.atTop .gTipTop{opacity:.3;filter:none;box-shadow:0 0 4px rgba(139,92,246,.2)}
  .gSlot.atBottom .gTipBot{opacity:.3;filter:none;box-shadow:0 0 4px rgba(139,92,246,.2)}
  .gSlot.atTop .gTrack::after{opacity:.6;background:radial-gradient(ellipse at center,rgba(99,102,241,.4) 0%,rgba(0,0,0,0) 60%)}
  .gSlot.atBottom .gTrack::after{opacity:.6;background:radial-gradient(ellipse at center,rgba(236,72,153,.35) 0%,rgba(0,0,0,0) 60%)}

  .rpg-panel-title{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:190px;
    max-width:100%;
    min-width:190px;
    min-height:31px;
    padding:5px 18px;
    border:1px solid rgba(160, 112, 55, .78);
    border-radius:10px;
    color:#ffe8ba;
    background:
      radial-gradient(120% 160% at 50% -55%, rgba(255, 220, 140, .28), transparent 55%),
      linear-gradient(90deg, rgba(38, 20, 10, .94), rgba(96, 55, 24, .86) 48%, rgba(35, 18, 9, .94)),
      repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 7px);
    box-shadow:
      inset 0 1px 0 rgba(255, 232, 181, .2),
      inset 0 -9px 18px rgba(15, 8, 3, .58),
      0 1px 0 rgba(255,255,255,.06),
      0 5px 14px rgba(0,0,0,.42),
      0 0 18px rgba(180, 118, 45, .12);
    text-shadow:0 1px 0 #120904, 0 0 10px rgba(245, 178, 92, .28);
    letter-spacing:.04em;
    font-size:14px;
    font-weight:700;
    line-height:1.15;
    white-space:nowrap;
  }
  .rpg-panel-title::before,
  .rpg-panel-title::after{
    content:"";
    position:absolute;
    top:50%;
    width:7px;
    height:7px;
    border-radius:50%;
    background:radial-gradient(circle, #ffe0a3 0 18%, #b7792f 42%, #3a1d0d 78%);
    box-shadow:0 0 7px rgba(245, 178, 92, .42);
    transform:translateY(-50%);
    opacity:.9;
  }
  .rpg-panel-title::before{left:7px;}
  .rpg-panel-title::after{right:7px;}

  .hero-column-heading .rpg-panel-title,
  .mini-map-heading .rpg-panel-title,
  .adventure-log-titlebar .rpg-panel-title{
    width:calc(100% - 8px);
    max-width:calc(100% - 8px);
  }


  .log .start-message{display:block;text-align:center;font-weight:700;margin:0 auto 6px;font-size:16px;line-height:1.4}
  .adventure-log-titlebar{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    margin:0 0 8px;
  }
  .adventure-log-titlebar .log-title{
    margin:0 auto;
    text-align:center;
    letter-spacing:.5px;
  }
  .log-header{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;margin:0 0 6px 0}
  .log-header .log-actions{margin-left:0;display:flex;align-items:center;justify-content:center;gap:8px}
  .button-panel-container{
    border:1px solid rgba(37,99,235,.7);
    border-radius:12px;
    padding:6px 8px;
    background:linear-gradient(155deg, rgba(8,15,30,.92), rgba(10,20,36,.78));
    box-shadow:inset 0 0 0 1px rgba(148,163,184,.2), 0 8px 16px rgba(2,6,23,.45), 0 0 16px rgba(56,189,248,.15);
  }
  .log-header #dunChecklist{align-self:stretch;margin:0;width:100%;box-sizing:border-box}
  .adventure-log-shell{
    color:#f8fafc;
    border:1px solid rgba(37,99,235,.7);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    padding:6px 7px;
    gap:5px;
    background:linear-gradient(155deg, rgba(8,15,30,.92), rgba(10,20,36,.78));
    box-shadow:inset 0 0 0 1px rgba(148,163,184,.2), 0 8px 16px rgba(2,6,23,.45), 0 0 16px rgba(56,189,248,.15);
    margin:0;
    flex:0 1 auto;
    min-height:0;
    overflow:hidden;
  }
  .adventure-log-shell .log-title{
    text-align:left;
    font-weight:700;
    font-size:14px;
    letter-spacing:.5px;
    line-height:1.15;
  }
  .adventure-log-shell .gscrollWrap{
    margin:0;
    width:100%;
    height:var(--adventure-log-scroll-height);
    max-height:var(--adventure-log-scroll-height);
    flex:0 1 var(--adventure-log-scroll-height);
    min-height:0;
  }
  #adventureLogPanel{
    background:
      linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,0) 22%),
      radial-gradient(120% 95% at 50% -16%, rgba(148,163,184,.24), transparent 62%),
      linear-gradient(155deg, rgba(17,24,39,.96), rgba(8,13,24,.94));
  }
  #adventureLogPanel .log-header{
    border:1px solid rgba(37,99,235,.54);
    border-radius:13px;
    padding:6px;
    background:linear-gradient(155deg, rgba(9,18,34,.9), rgba(7,13,26,.86));
    box-shadow:inset 0 0 0 1px rgba(148,163,184,.14), inset 0 -14px 24px rgba(0,0,0,.28);
  }
  #adventureLogPanel .button-panel-container,
  #adventureLogPanel #dunChecklist{
    background:linear-gradient(155deg, rgba(7,14,28,.94), rgba(5,10,20,.9));
    box-shadow:inset 0 0 0 1px rgba(148,163,184,.13), 0 6px 14px rgba(2,6,23,.32), 0 0 13px rgba(56,189,248,.11);
  }
  #adventureLogPanel .adventure-log-shell{
    background:linear-gradient(155deg, rgba(5,11,23,.96), rgba(3,7,15,.94));
    box-shadow:inset 0 0 0 1px rgba(148,163,184,.12), 0 8px 16px rgba(2,6,23,.42), 0 0 14px rgba(56,189,248,.1);
  }
  #adventureLogPanel .gscrollWrap{
    background:linear-gradient(155deg, rgba(3,7,14,.98), rgba(1,3,8,.96));
    border-radius:9px;
  }
  #adventureLogPanel .log{
    background:linear-gradient(180deg, rgba(2,5,11,.98), rgba(0,2,6,.98));
  }
  #dungeonMiniMapPanel{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    min-height:0;
  }
  .mini-map-heading{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    margin:0 0 2px;
  }
  .mini-map-heading .rpg-panel-title{
    margin:0 auto;
    text-align:center;
  }
  .dps-display-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    margin:-6px 0 0;
  }
  .dps-display-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:0;
    flex:0 0 auto;
    padding:6px 10px;
    border-color:rgba(251,191,36,.66);
    border-radius:999px;
    color:#fff7d6;
    background:
      radial-gradient(120% 180% at 50% -45%, rgba(251,191,36,.34), transparent 62%),
      linear-gradient(135deg, rgba(58,35,9,.96), rgba(28,18,42,.94) 54%, rgba(8,18,38,.96));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -10px 18px rgba(0,0,0,.34),
      0 8px 18px rgba(0,0,0,.32),
      0 0 18px rgba(251,191,36,.16);
    font-size:12px;
    letter-spacing:.04em;
    text-align:center;
    text-shadow:0 1px 0 rgba(0,0,0,.9), 0 0 10px rgba(251,191,36,.42);
  }
  .dps-display-button b{
    color:#facc15;
    text-shadow:0 0 10px rgba(250,204,21,.7);
  }
  #dungeonMiniMapPanel .svgbox{
    margin:0 auto;
  }
  #dungeonMiniMapPanel > .row{
    margin:0;
  }
  .monster-battle-shell{
    position:relative;
    margin:0 2px 2px;
    padding:7px 11px 32px;
    border:1px solid rgba(37,99,235,.7);
    border-radius:12px;
    background:linear-gradient(155deg, rgba(8,15,30,.92), rgba(10,20,36,.78));
    box-shadow:inset 0 0 0 1px rgba(148,163,184,.2), 0 8px 16px rgba(2,6,23,.45), 0 0 16px rgba(56,189,248,.15);
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:0 1 auto;
    min-height:var(--battle-shell-min-height);
    height:auto;
    overflow:visible;
  }
  .monster-battle-shell .battle-status-row,
  .monster-battle-shell .battle-status-label{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:22px;
    min-width:96px;
    padding:4px 10px;
    border:1px solid var(--game-frame-border);
    border-radius:999px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,0) 46%),
      radial-gradient(120% 160% at 50% -35%, color-mix(in srgb, var(--game-frame-border) 72%, transparent), transparent 62%),
      rgba(2,6,23,.58);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.045),
      inset 0 -7px 14px rgba(0,0,0,.34),
      0 0 10px color-mix(in srgb, var(--game-frame-border) 55%, transparent);
    letter-spacing:.02em;
    text-align:center;
    text-shadow:0 0 8px currentColor, 0 1px 0 rgba(0,0,0,.8);
  }
  .monster-battle-shell .battle-status-row{
    align-self:flex-end;
  }
  .monster-battle-shell .battle-loot-roll-panel{
    position:absolute;
    left:50%;
    bottom:8px;
    transform:translateX(-50%);
    max-width:calc(100% - 20px);
    padding:6px 10px 7px;
    border:1px solid rgba(251,191,36,.42);
    border-radius:12px;
    background:
      linear-gradient(135deg,rgba(39,24,7,.92),rgba(15,10,24,.9)),
      radial-gradient(120% 160% at 15% 0%,rgba(251,191,36,.22),transparent 58%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.08),
      0 8px 18px rgba(0,0,0,.28),
      0 0 12px rgba(251,191,36,.18);
    pointer-events:none;
  }
  .monster-battle-shell .battle-loot-roll-label{
    margin:0;
    font-size:.78rem;
    line-height:1.1;
    color:#facc15;
    text-align:center;
    text-shadow:
      0 0 7px rgba(251,191,36,.55),
      0 1px 0 rgba(0,0,0,.85);
    white-space:nowrap;
  }
  .monster-battle-shell .loot-roll-uv-dot{
    display:inline-block;
    width:.58em;
    height:.58em;
    margin:0 .45em;
    border-radius:999px;
    vertical-align:.03em;
    background:#3b0764;
    box-shadow:
      0 0 3px rgba(216,180,254,.72),
      0 0 8px rgba(126,34,206,.62),
      0 0 14px rgba(76,29,149,.44);
  }
  .monster-battle-shell .loot-roll-mult{
    display:inline-block;
    margin-right:.45em;
    color:#fde68a;
    font-size:.72rem;
    letter-spacing:.01em;
    opacity:.92;
  }
  .log .adventure-log-loot-drop{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-right:.35em;
    color:#facc15;
    font-weight:900;
    text-transform:none;
    letter-spacing:.04em;
    text-shadow:
      0 0 7px rgba(251,191,36,.55),
      0 1px 0 rgba(0,0,0,.85);
    filter:drop-shadow(0 0 7px rgba(251,191,36,.45));
    white-space:nowrap;
  }
  .monster-battle-shell .battle-status-row--split{
    align-self:stretch;
    justify-content:space-between;
    gap:8px;
    width:100%;
    min-width:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .monster-battle-shell .battle-status-role{
    min-width:0;
    max-width:calc(100% - 112px);
    gap:5px;
    flex-wrap:nowrap;
    font-weight:800;
    white-space:nowrap;
  }
  .monster-battle-shell .battle-status-role-part{
    white-space:nowrap;
  }
  .monster-battle-shell .battle-status-role-part--elite{
    color:#fbbf24;
  }
  .monster-battle-shell .battle-status-role-part--keeper{
    color:var(--boss);
  }
  .monster-battle-shell .battle-status-role-part--mini{
    color:var(--mini-boss);
  }
  .monster-battle-shell .battle-status-event{
    color:var(--bad);
    flex:0 0 auto;
  }
  #battleBox{
    opacity:.85;
    color:#334155;
    position:relative;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    flex:1 1 auto;
    min-height:calc(var(--battle-shell-min-height) - 42px);
    overflow:visible;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  #battleBox > *{
    max-width:100%;
  }
  .battle-event-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:fit-content;
    min-width:min(360px, 100%);
    max-width:min(100%, 430px);
    min-height:78px;
    margin:0 auto;
    padding:13px 16px 12px;
    border:1px solid var(--game-frame-border);
    border-radius:16px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 34%),
      radial-gradient(110% 150% at 50% -42%, color-mix(in srgb, var(--game-frame-border) 34%, transparent), transparent 68%),
      linear-gradient(155deg, rgba(8,15,30,.88), rgba(3,7,18,.72));
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.045),
      inset 0 -13px 24px rgba(0,0,0,.24),
      0 9px 18px rgba(2,6,23,.32),
      0 0 16px color-mix(in srgb, var(--game-frame-border) 40%, transparent);
    text-align:center;
    overflow:visible;
  }
  .battle-event-card::before{
    content:"";
    position:absolute;
    inset:4px;
    border:1px solid color-mix(in srgb, var(--game-frame-border) 42%, transparent);
    border-radius:12px;
    pointer-events:none;
    opacity:.65;
  }
  .battle-event-card::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    top:0;
    height:1px;
    background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--game-frame-border) 82%, white 18%), transparent);
    opacity:.8;
    pointer-events:none;
  }
  .battle-event-card > *{
    position:relative;
    z-index:1;
    max-width:100%;
  }
  .battle-event-card .bar,
  .battle-event-card .monster-hp-wrap,
  .battle-event-card [class^="search-"],
  .battle-event-card [class*=" search-"]{
    max-width:100%;
  }
  .battle-event-card .flavor-text{
    min-height:0;
    padding:0 2px;
  }
  .battle-event-card--combat{
    min-width:min(390px, 100%);
  }
  .log .start-btn{display:block;margin:4px auto}
  .entry{padding:4px 6px;border-bottom:1px solid rgba(26,34,48,.72)}
  .log-row{padding:4px 6px;border-bottom:1px solid rgba(26,34,48,.72)}
  .log-row.event{
    --log-event-rgb:148, 163, 184;
    border:1px solid rgba(216, 226, 238, .42);
    border-radius:8px;
    background:
      radial-gradient(115% 140% at 50% 0%, rgba(var(--log-event-rgb), .08), transparent 58%),
      linear-gradient(180deg, rgba(8, 12, 20, .9), rgba(5, 8, 14, .58) 72%, rgba(5, 8, 14, .28));
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.055),
      inset 0 -18px 26px rgba(0,0,0,.2),
      0 0 10px rgba(203,213,225,.16);
    margin:4px 0;
    padding:6px;
    border-bottom:none;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .log-row--combat{--log-event-rgb:127, 29, 29}
  .log-row--loot{--log-event-rgb:146, 93, 39}
  .log-row--combat.event,
  .log-row--loot.event{
    background:
      radial-gradient(115% 145% at 50% 0%, rgba(var(--log-event-rgb), .1), transparent 60%),
      linear-gradient(180deg, rgba(8, 11, 18, .94), rgba(4, 7, 12, .68) 72%, rgba(4, 7, 12, .34));
  }
  .log-row--level-up{--log-event-rgb:22, 101, 52}
  .log-row--resting{--log-event-rgb:67, 56, 120}
  .log-row--discovering{--log-event-rgb:76, 29, 149}
  .log-row--searching{--log-event-rgb:194, 65, 12}
  .log-row--exploring{--log-event-rgb:6, 78, 59}
  .log-line{display:flex;align-items:flex-start;gap:4px;min-width:0}
  .log-message{min-width:0;overflow-wrap:anywhere}
  .log-type{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:1.2}
  .log-type.combat{color:#ef4444}
  .log-type.loot{color:#facc15}
  .log-type.level-up{color:#4ade80}
  .log-type.resting{color:#c4b5fd}
  .log-type.discovering{color:#c084fc}
  .log-type.searching{color:#fb923c}
  .log-type.exploring{color:#34d399}
  .log-type.system{color:#9ca3af}
  .log .adventure-log-extra-loot-roll{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    margin:2px 0;
    padding:5px 9px 6px;
    border:1px solid rgba(146, 93, 39, .78);
    border-radius:8px;
    background:linear-gradient(180deg, rgba(84, 49, 20, .34), rgba(44, 26, 13, .26));
    box-shadow:inset 0 0 0 1px rgba(245, 158, 11, .08);
    color:#f8d792;
    text-align:center;
  }
  .log .adventure-log-extra-loot-roll__title{
    display:block;
    width:100%;
  }
  .log .adventure-log-extra-loot-roll__rewards{
    display:block;
    width:100%;
    color:#fef3c7;
    white-space:normal;
  }
  .log-row--item-drop{
    position:relative;
    border-color:color-mix(in srgb, var(--drop-rarity, #facc15) 72%, #3b220c) !important;
    background:
      radial-gradient(120% 160% at 12% 0%, color-mix(in srgb, var(--drop-rarity, #facc15) 30%, transparent), transparent 48%),
      linear-gradient(135deg, rgba(38,22,12,.92), rgba(15,23,42,.88) 54%, rgba(31,20,10,.92)) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--drop-rarity, #facc15) 34%, transparent),
      0 0 14px color-mix(in srgb, var(--drop-rarity, #facc15) 42%, transparent),
      0 4px 14px rgba(0,0,0,.32) !important;
  }
  .log-row--item-drop::after{
    content:"";
    position:absolute;
    inset:2px;
    pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--drop-rarity, #facc15) 18%, transparent), transparent);
    opacity:.72;
  }
  .log-row--rarity-Common{--drop-rarity:#f3f4f6}
  .log-row--rarity-Uncommon{--drop-rarity:#34d399}
  .log-row--rarity-Rare{--drop-rarity:#60a5fa}
  .log-row--rarity-Epic{--drop-rarity:#a855f7}
  .log-row--rarity-Legendary{--drop-rarity:#fbbf24}
  .log-row--rarity-Artifact{--drop-rarity:#f97316}
  .log-row--rarity-Mythic{--drop-rarity:#dc2626}
  .log .adventure-log-item-drop{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:2px;
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    padding:4px 9px 5px;
    margin:3px 0;
    border:1px solid color-mix(in srgb, var(--drop-rarity, currentColor) 62%, #fef3c7);
    border-radius:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18));
    box-shadow:inset 0 0 8px color-mix(in srgb, var(--drop-rarity, #facc15) 22%, transparent);
  }
  .log .adventure-log-item-drop__sigil{
    display:none;
    color:var(--drop-rarity, #facc15);
    text-shadow:0 0 8px var(--drop-rarity, #facc15);
  }
  .log .adventure-log-item-drop__type{
    display:block;
    width:100%;
    text-align:center;
    color:#fde68a;
    font-weight:900;
    letter-spacing:.025em;
    text-shadow:0 0 7px rgba(253,230,138,.42),0 1px 0 rgba(0,0,0,.85);
  }
  .log .adventure-log-item-drop__text{
    display:block;
    width:100%;
    text-align:left;
    line-height:1.2;
  }
  .encounter-name-affix{
    font-weight:850;
    text-shadow:0 0 7px currentColor,0 1px 0 rgba(0,0,0,.82);
  }
  .encounter-name-base{
    color:#f8fafc;
  }
  .log .adventure-log-sale-container{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    justify-content:center;
    gap:1px;
    width:100%;
    min-width:0;
    max-width:100%;
    margin:1px 0 3px;
    padding:5px 6px 6px;
    border:1px solid rgba(250, 204, 21, .54);
    border-radius:14px;
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(250, 204, 21, .14), transparent 58%),
      linear-gradient(180deg, rgba(32, 22, 8, .82), rgba(9, 14, 24, .72));
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.06),
      inset 0 -18px 24px rgba(0,0,0,.18),
      0 0 12px rgba(250, 204, 21, .16);
    text-align:center;
    vertical-align:top;
  }
  .log .adventure-log-sale-container .adventure-log-loot-drop{
    margin-right:0;
  }
  .log .adventure-log-sale-item,
  .log .adventure-log-sale-level,
  .log .adventure-log-sale-type,
  .log .adventure-log-sale-name{
    display:block;
    width:100%;
    text-align:center;
    border:1px solid rgba(253, 230, 138, .2);
    border-radius:9px;
    background:linear-gradient(180deg, rgba(15,23,42,.42), rgba(2,6,23,.28));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
    padding:2px 6px;
  }
  .log .adventure-log-sale-type,
  .log .adventure-log-sale-type-line{
    color:#fde68a;
    font-weight:900;
    letter-spacing:.025em;
    text-shadow:0 0 7px rgba(253,230,138,.42),0 1px 0 rgba(0,0,0,.85);
  }
  .log .adventure-log-sale-name{
    line-height:1.12;
  }
  .log .adventure-log-sale-type-line,
  .log .adventure-log-sale-item-name{
    display:block;
    width:100%;
    text-align:center;
  }
  .log .adventure-log-sale-container .adventure-log-sale-rewards{
    margin-top:3px;
    width:100%;
  }
  .log .adventure-log-chest-rewards{
    display:block;
    width:100%;
    text-align:center;
    margin-top:2px;
  }
  .log .adventure-log-reward-container{
    white-space:nowrap;
  }
  .log .adventure-log-reward-gp,
  .log .adventure-log-reward-xp{font-weight:800}
  .log .adventure-log-reward-gp{color:var(--gold);text-shadow:0 0 4px rgba(251,191,36,.58),0 0 9px rgba(251,191,36,.32)}
  .log .adventure-log-reward-xp{color:#7fff3f;text-shadow:0 0 4px rgba(127,255,63,.58),0 0 10px rgba(127,255,63,.34)}
  .tag{display:inline-block;padding:2px 6px;border-radius:8px;border:1px solid #3a465a;font-size:11px}
  .rar-Common{background:#111827;color:#f3f4f6;border-color:#273248;text-shadow:0 0 5px #f3f4f6}
  .rar-Uncommon{background:#0f1f17;color:#34d399;border-color:#1f5c3e;text-shadow:0 0 5px #34d399}
  .rar-Rare{background:#0d1930;color:#60a5fa;border-color:#285192;text-shadow:0 0 5px #60a5fa}
  .rar-Epic{background:#1a0f2b;color:#a855f7;border-color:#7e22ce;text-shadow:0 0 5px #a855f7}
  .rar-Legendary{background:#2a1b09;color:#fbbf24;border-color:#9a6b14;text-shadow:0 0 5px #fbbf24}
  .rar-Artifact{background:#2b1b0f;color:#f97316;border-color:#7c2d12;text-shadow:0 0 5px #f97316}
  .rar-Mythic{background:#2b0f0f;color:#dc2626;border-color:#7f1d1d;text-shadow:0 0 5px #dc2626}
  .tier-dot{display:inline-flex;align-items:center;justify-content:center;width:0.5em;height:0.5em;border-radius:50%;margin-right:6px;vertical-align:middle;transform:translateY(-1px)}
  #infoContent .tier-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
  #infoContent .tier-list li{display:flex;align-items:center;font-weight:600;gap:6px}

  #infoTitle.wallpaper-dungeon-title{
    display:grid;
    gap:3px;
    justify-items:center;
    width:min(100%, 680px);
    margin:4px auto 10px;
    padding:10px 18px 12px;
    border:1px solid rgba(147,197,253,.34);
    border-radius:18px;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(96,165,250,.17), transparent 58%),
      radial-gradient(80% 120% at 50% 100%, rgba(168,85,247,.13), transparent 62%),
      linear-gradient(135deg, rgba(10,18,34,.82), rgba(5,8,18,.92));
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.05),
      inset 0 -18px 34px rgba(0,0,0,.28),
      0 0 20px rgba(37,99,235,.16);
    text-align:center;
  }
  #infoTitle.wallpaper-dungeon-title .title-main{
    --shop-title-top:#f2e4ff;
    --shop-title-mid:#a855f7;
    --shop-title-low:#401061;
    --shop-title-deep:#100318;
    --shop-title-stroke:#1b0628;
    --shop-title-aura:rgba(168,85,247,.58);
    --shop-title-edge:rgba(232,213,255,.76);
    position:relative;
    isolation:isolate;
    display:block;
    box-sizing:border-box;
    width:min(100%,640px);
    margin:0 auto;
    padding:2px 16px 5px;
    border:0;
    background:linear-gradient(180deg,var(--shop-title-top) 0%,var(--shop-title-mid) 34%,var(--shop-title-low) 70%,var(--shop-title-top) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(27px,4.15vw,54px);
    font-weight:900;
    line-height:.82;
    letter-spacing:.095em;
    text-align:center;
    text-transform:uppercase;
    -webkit-text-stroke:1.6px var(--shop-title-stroke);
    filter:drop-shadow(0 12px 10px rgba(0,0,0,.55));
    text-shadow:
      0 1px 0 var(--shop-title-edge),
      0 3px 0 var(--shop-title-deep),
      2px 5px 0 rgba(0,0,0,.54),
      0 0 12px var(--shop-title-aura),
      0 0 24px color-mix(in srgb,var(--shop-title-aura) 68%,transparent);
  }
  #infoTitle.wallpaper-dungeon-title .title-main::before{
    content:attr(data-text);
    position:absolute;
    inset:2px 16px 5px;
    z-index:-1;
    color:var(--shop-title-deep);
    -webkit-text-stroke:7px var(--shop-title-deep);
    text-shadow:0 0 16px rgba(0,0,0,.95),0 8px 18px rgba(0,0,0,.9);
  }
  #infoTitle.wallpaper-dungeon-title .title-main::after{
    content:"✦────────✦";
    display:block;
    margin-top:6px;
    background:linear-gradient(90deg,transparent 0%,var(--shop-title-edge) 20%,var(--shop-title-mid) 50%,var(--shop-title-edge) 80%,transparent 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-size:clamp(9px,1.2vw,14px);
    letter-spacing:.2em;
    line-height:1;
    -webkit-text-stroke:0;
    text-shadow:0 1px 0 var(--shop-title-deep),0 0 10px var(--shop-title-aura);
  }

  .modal{position:fixed;inset:0;background:radial-gradient(circle at 50% 20%,rgba(2,6,18,.7),rgba(0,0,0,.85) 68%),rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:30;padding:var(--modal-viewport-padding,24px);box-sizing:border-box;transform:none!important;zoom:1}
  .modal.hidden{display:none}
  body > .modal{isolation:isolate}
  .modal[data-default-zoom-layer="true"]{transform:none!important;zoom:1!important}
  .modal[data-default-zoom-layer="true"] > .modal-card{zoom:1}
  .modal,
  .modal *{
    scrollbar-width:none;
  }
  .modal::-webkit-scrollbar,
  .modal *::-webkit-scrollbar{
    width:0;
    height:0;
  }
  #modal,
  #statsModal,
  #diceModal,
  #shopModal,
  #tomeModal,
  #tomeSectionModal{
    align-items:flex-start;
    justify-content:center;
    padding-top:calc(var(--default-ui-top, 12px) + var(--game-menu-gap, 10px));
    padding-bottom:max(12px, var(--default-ui-bottom-gap, 12px));
  }
  #modal .modal-card,
  #statsModal .modal-card,
  #diceModal .modal-card,
  #shopModal .modal-card,
  #tomeModal .modal-card,
  #tomeSectionModal .modal-card{margin:0 auto auto}
  #infoModal,
  #shopItemInfoModal,
  #noGoldModal,
  #healShopModal,
  #killStreakInactiveModal,
  #resetModal,
  #freePetModal,
  #renameHeroModal,
  #floorSelectModal,
  #waypointInfoModal,
  #fireHeroModal,
  #dpsModal,
  #equipBestModal{
    align-items:center;
    justify-content:center;
    padding-top:max(12px, var(--default-ui-top, 12px));
    padding-bottom:calc(max(12px, var(--default-ui-bottom-gap, 12px)) + var(--regular-info-modal-lift, 72px));
  }
  #infoModal .modal-card,
  #shopItemInfoModal .modal-card,
  #noGoldModal .modal-card,
  #healShopModal .modal-card,
  #killStreakInactiveModal .modal-card,
  #resetModal .modal-card,
  #freePetModal .modal-card,
  #renameHeroModal .modal-card,
  #floorSelectModal .modal-card,
  #waypointInfoModal .modal-card,
  #fireHeroModal .modal-card,
  #dpsModal .modal-card,
  #gphModal .modal-card,
  #equipBestModal .modal-card{
    margin-left:auto;
    margin-right:auto;
  }
  #fireHeroModal .retire-hero-button-container{
    align-items:stretch;
  }
  #fireHeroModal .retire-refund-note{
    align-self:center;
    max-width:100%;
    margin:0 auto;
    padding:3px 7px;
    border:1px solid rgba(250,204,21,.22);
    border-radius:8px;
    background:linear-gradient(135deg, rgba(250,204,21,.08), rgba(120,53,15,.14));
    color:#fde68a;
    font-size:10px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:.01em;
    text-align:center;
    white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,.65);
  }
  #noGoldModal{z-index:40}
  .hidden{display:none!important}
  .modal-card{position:relative;background:
      radial-gradient(130% 160% at 50% -20%, var(--void-ember), transparent 60%),
      radial-gradient(160% 200% at 50% 120%, rgba(0,0,0,.75), transparent 65%),
      linear-gradient(150deg,var(--modal-tint-1,rgba(6,12,22,.62)),var(--modal-tint-2,rgba(4,8,16,.82))),
      linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));
    border:1px solid var(--modal-border,rgba(148,163,184,.25));
    border-radius:16px;
    min-width:min(420px,calc(100vw - var(--modal-viewport-padding,24px) - var(--modal-viewport-padding,24px)));
    max-width:min(var(--modal-max-width,1080px),calc(100vw - var(--modal-viewport-padding,24px) - var(--modal-viewport-padding,24px)));
    max-height:var(--modal-max-height,calc(100vh - 48px));
    padding:var(--modal-card-padding,14px);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.04),
      inset 0 -26px 40px rgba(0,0,0,.55),
      0 22px 42px rgba(0,0,0,.62),
      0 0 24px var(--modal-glow,rgba(56,189,248,.12));
    backdrop-filter:blur(8px) saturate(125%);
    -webkit-backdrop-filter:blur(8px) saturate(125%);
    transform-origin:top center;
    overflow:hidden;
    transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease;
  }
  .modal-card::before{content:"";position:absolute;inset:6px;border-radius:12px;background:
      radial-gradient(120% 150% at 50% 0%, var(--glass-sheen), transparent 62%),
      radial-gradient(140% 180% at 50% 120%, rgba(0,0,0,.6), transparent 62%),
      linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.01)),
      linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.28));
    border:1px solid rgba(44,76,128,.25);
    box-shadow:inset 0 0 18px rgba(0,0,0,.28);
    pointer-events:none;
  }
  .modal-card::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid color-mix(in srgb,var(--modal-border,rgba(148,163,184,.25)) 70%,transparent);box-shadow:0 0 12px var(--modal-glow,rgba(56,189,248,.2)), inset 0 0 24px rgba(0,0,0,.6);pointer-events:none}
  .modal-card > *{position:relative;z-index:1}
  .modal-card.modal-main{--modal-tint-1:var(--modal-main-tint-1);--modal-tint-2:var(--modal-main-tint-2);--modal-border:var(--modal-main-border);--modal-glow:var(--modal-main-glow)}
  .modal-card.modal-secondary{--modal-tint-1:var(--modal-secondary-tint-1);--modal-tint-2:var(--modal-secondary-tint-2);--modal-border:var(--modal-secondary-border);--modal-glow:var(--modal-secondary-glow)}
  #statsModal .modal-card{
    width:min(620px, calc(100vw - 48px));
    min-width:min(320px, calc(100vw - 48px));
    max-width:min(680px, calc(100vw - 32px));
    display:flex;
    flex-direction:column;
    overflow:visible;
    max-height:none;
  }
  #statsModal{
    align-items:flex-start;
    padding-top:max(20px, calc(env(safe-area-inset-top, 0px) + 8px));
  }
  #statsBody{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-bottom:4px;
    min-width:320px;
  }
  .stats-summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:8px;
  }
  .stats-summary-card{
    border:1px solid rgba(99,137,191,.28);
    border-radius:10px;
    padding:10px 12px;
    background:linear-gradient(180deg,rgba(20,28,45,.94),rgba(11,16,28,.98));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 20px rgba(0,0,0,.22);
  }
  .stats-summary-card .label{
    display:block;
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#93a4c6;
    margin-bottom:6px;
  }
  .stats-summary-card .value{
    display:block;
    font-size:16px;
    color:#f8fafc;
  }
  .stats-accordion{
    border:1px solid rgba(99,137,191,.24);
    border-radius:10px;
    background:linear-gradient(180deg,rgba(16,24,40,.9),rgba(8,13,23,.96));
    overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 24px rgba(0,0,0,.18);
  }
  .stats-accordion-summary{
    width:100%;
    border:0;
    background:transparent;
    cursor:pointer;
    padding:11px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:12px;
    color:#e5eefc;
    user-select:none;
    text-align:left;
  }
  .stats-accordion-caret{
    color:#4c1d95;
    font-size:26px;
    font-weight:700;
    line-height:1;
    transition:transform .2s ease;
    flex:0 0 auto;
  }
  .stats-accordion.is-open .stats-accordion-caret{transform:rotate(90deg)}
  .stats-accordion-summary .meta{
    color:#8ea4ca;
    font-size:10px;
    margin-left:auto;
  }
  .stats-accordion-body{
    border-top:1px solid rgba(99,137,191,.18);
    padding:10px 14px 12px;
    display:none;
  }
  .stats-side-panel{
    position:absolute;
    left:calc(100% + 10px);
    top:0;
    width:min(360px, calc(100vw - 36px));
    max-height:min(80vh, calc(100vh - 48px));
    border:1px solid rgba(125,164,221,.45);
    border-radius:12px;
    background:linear-gradient(180deg,rgba(14,22,38,.95),rgba(6,11,20,.98));
    box-shadow:0 20px 40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    z-index:3;
  }
  .stats-side-panel.hidden{display:none}
  .stats-side-panel::before{
    content:'▸';
    position:absolute;
    left:-14px;
    top:14px;
    color:#4c1d95;
    font-size:26px;
    font-weight:700;
    line-height:1;
    transform:rotate(180deg);
    text-shadow:0 0 10px rgba(76,29,149,.35);
  }
  .stats-side-head{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-bottom:1px solid rgba(125,164,221,.24);
    color:#eff6ff;
    font-size:12px;
  }
  .stats-side-body{
    padding:10px 12px 12px;
    overflow:auto;
  }
  .stats-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }
  .stats-list li{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:4px 0;
    border-bottom:1px dotted rgba(148,163,184,.14);
  }
  .stats-list li:last-child{border-bottom:none}
  .stats-list .name{color:#cbd5e1}
  .stats-list .value{color:#f8fafc;text-align:right;white-space:nowrap}
  .stats-subtle{color:#8ea4ca;font-size:10px}
  .name-display{font-family:'Press Start 2P', monospace;text-align:center;border:1px solid #2b3446;border-radius:6px;background:#141b27;color:#cbd5e1;margin-top:8px;padding:6px 10px;min-height:32px}
  .keyboard-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:8px}
  .keyboard-grid button{font-family:'Press Start 2P', monospace;background:#1a2232;border:1px solid #2a3140;border-radius:6px;color:var(--text);padding:6px 0;cursor:pointer}
  .keyboard-grid button:hover{background:#202a3e}
  .keyboard-grid .key-spacer{visibility:hidden}
.keyboard-grid button[data-action="backspace"]{color:#ff0000;font-size:20px}
.keyboard-grid button[data-action="shift"]{font-size:11px}
.keyboard-grid button[data-action="shift"].is-active{background:#2b3446;border-color:#56627a;color:#f8fafc}
  .keypad-display{font-family:'Press Start 2P', monospace;background:#101624;border:2px solid #2a3140;border-radius:8px;padding:12px;margin-top:8px;text-align:center;font-size:16px;letter-spacing:1px;min-height:32px;display:flex;align-items:center;justify-content:center}
  .keypad-display.clamped{animation:pulseClamp .4s ease-in-out}
  @keyframes pulseClamp{0%{box-shadow:0 0 0 0 rgba(255,0,0,.6);}100%{box-shadow:0 0 12px 4px rgba(255,0,0,0);}}
  .keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
  .keypad-grid button{font-family:'Press Start 2P', monospace;background:#1a2232;border:1px solid #2a3140;border-radius:8px;color:var(--text);padding:12px 0;cursor:pointer;transition:background .15s ease}
  .keypad-grid button:hover{background:#202a3e}
  .keypad-grid button[data-action="enter"]{background:#1a2232;border-color:#2a3140;color:#22c55e;grid-column:span 2}
  .keypad-grid button[data-action="enter"]:hover{background:#202a3e;color:#4ade80;border-color:#3f4b60}
  .keypad-grid button[data-action="cancel"]{color:var(--bad)}
  .keypad-grid button[data-action="clear"],
  .keypad-grid button[data-action="backspace"]{color:var(--bad)}
  .waypoint-range-text{margin-top:8px;text-align:center;opacity:.85;letter-spacing:.02em}
  .keyboard-grid button,
  .keypad-grid button{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    --key-glow-color:rgba(138,43,226,.78);
    --key-glow-core:rgba(211,160,255,.82);
    --key-glow-edge:rgba(186,85,255,.42);
  }
  .keyboard-grid button::after,
  .keypad-grid button::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:inherit;
    opacity:0;
    pointer-events:none;
    z-index:0;
    mix-blend-mode:screen;
    border:1px solid color-mix(in srgb,var(--key-glow-core) 72%,transparent);
    background:
      linear-gradient(90deg, var(--key-glow-edge), transparent 18% 82%, var(--key-glow-edge)),
      linear-gradient(180deg, var(--key-glow-edge), transparent 22% 78%, var(--key-glow-edge));
    box-shadow:
      inset 0 0 6px color-mix(in srgb,var(--key-glow-core) 42%,transparent),
      inset 0 0 10px color-mix(in srgb,var(--key-glow-color) 36%,transparent),
      0 0 6px color-mix(in srgb,var(--key-glow-color) 34%,transparent);
  }
  .keyboard-grid button.key-glow-out,
  .keypad-grid button.key-glow-out{
    animation:keyButtonGlowPulse 1.18s ease-out;
  }
  .keyboard-grid button.key-glow-out::after,
  .keypad-grid button.key-glow-out::after{
    animation:keyGlowEdgeFade 1.18s ease-out;
  }
  .key-input-opening .keyboard-grid button.key-glow-out,
  .key-input-opening .keypad-grid button.key-glow-out,
  .key-input-opening .keyboard-grid button.key-glow-out::after,
  .key-input-opening .keypad-grid button.key-glow-out::after{
    animation:none;
  }
  @keyframes keyButtonGlowPulse{
    0%,100%{box-shadow:0 0 0 rgba(0,0,0,0), inset 0 0 0 rgba(255,255,255,0)}
    36%{box-shadow:0 0 5px color-mix(in srgb,var(--key-glow-color) 42%,transparent), inset 0 0 5px color-mix(in srgb,var(--key-glow-core) 20%,transparent)}
    68%{box-shadow:0 0 9px color-mix(in srgb,var(--key-glow-color) 28%,transparent), inset 0 0 3px color-mix(in srgb,var(--key-glow-color) 16%,transparent)}
  }
  @keyframes keyGlowEdgeFade{
    0%{opacity:0}
    16%{opacity:.56}
    54%{opacity:.34}
    100%{opacity:0}
  }


  .grid-gear{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:minmax(120px,auto);
    gap:8px;
    margin:0;
    padding:4px 0;
    flex-shrink:0;
    min-width:0;
    width:100%;
    max-width:480px;
    justify-content:center;
    align-content:start;
    justify-items:stretch;
    align-items:stretch;
  }
  .grid-gear .gear-slot{max-width:none;width:100%;min-height:120px}
  .grid-gear-pet{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:4px;margin-top:4px;align-items:start;justify-items:start}
  .gear-slot{--item-rarity:rgba(148,163,184,.8);border:1px solid rgba(148,163,184,.25);border-radius:12px;padding:8px;min-height:64px;background:rgba(8,12,20,.62);font-size:12px;display:flex;flex-direction:column;gap:4px;min-width:0;max-width:220px;box-sizing:border-box;box-shadow:0 10px 22px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.04);backdrop-filter:blur(5px) saturate(110%);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease}
  .gear-slot:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.55),0 0 16px rgba(59,130,246,.18)}
  .gear-slot.equipped{padding:8px;min-height:64px;position:relative}
  .gear-slot .equipped{position:absolute;inset:0;opacity:0;pointer-events:none}
  .gear-slot.equipped{padding:8px;min-height:64px;position:relative}
  .gear-slot.equipped .tier-dot{display:none}
  .gear-slot.pet{min-width:90px;max-width:110px;padding:4px;min-height:auto}
  .gear-slot.pet .slot-name{font-size:10px}
  .gear-slot.pet b:not(.item-name){display:none}
  .gear-slot.pet .item-header{align-items:center;text-align:center}
  .gear-slot.pet .item-header .small{align-self:center}
  .gear-slot.pet .item-name{display:block;width:100%;text-align:center}
  .gear-slot.pet .small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gear-slot.pet.locked{opacity:.5}
  .slot-name{font-size:11px;opacity:.85;margin-bottom:4px;color:#a7b5cc}
  .list-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed #263046}

  /* Red outline for items stored in the gear stash (unequipped).  The red box
     wraps just the item details so action buttons can sit outside of it. */
  .stashed{
    --item-rarity:rgba(148,163,184,.8);
    border:1px solid var(--item-rarity);
    border-radius:12px;
    padding:7px;
    margin-bottom:2px;
    flex:0 0 150px;
    width:150px;
    height:150px;
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:11px;
    min-width:0;
    box-sizing:border-box;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% 50%,rgba(8,12,20,.95) 0 46%,rgba(8,12,20,.78) 70%,transparent 100%),
      rgba(8,12,20,.95);
    box-shadow:
      0 10px 22px rgba(0,0,0,.45),
      inset 0 0 0 1px color-mix(in srgb,var(--item-rarity) 38%,transparent);
  }
  @keyframes stashOverflowPulse {
    0%,100%{
      background:rgba(255,0,0,.22);
      box-shadow:inset 0 0 0 1px rgba(255,56,56,.65),0 0 10px rgba(255,0,0,.35),0 0 20px rgba(255,0,0,.2);
    }
    50%{
      background:rgba(255,0,0,.34);
      box-shadow:inset 0 0 0 1px rgba(255,88,88,.9),0 0 16px rgba(255,0,0,.55),0 0 30px rgba(255,0,0,.35);
    }
  }
  .stashed.stash-overflow-invalid{
    border-color:#ff3b3b;
    animation:stashOverflowPulse 1.35s ease-in-out infinite;
  }
  .stash-grid .stash-item{align-items:stretch}
  .stash-grid .stashed{
    flex:1 1 auto;
    width:100%;
  }
  .stash-empty{
    opacity:1;
    border-style:dashed;
    color:#94a3b8;
    background:#000;
    background-image:none;
    justify-content:flex-start;
    align-items:center;
    text-align:center;
    letter-spacing:0.5px;
  }

  .stash-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(150px,1fr));
    gap:4px;
    margin-top:4px;
    align-items:stretch;
    justify-items:stretch;
    align-content:start;
  }
  .stash-item{display:flex;flex-direction:column;gap:4px;min-width:0;height:100%}
  .stash-item .sell{position:static;margin-top:4px;align-self:center}
  .lock-toggle{
    font-size:14px;
    line-height:1;
    min-width:24px;
    min-height:22px;
    padding:2px 6px;
    align-self:flex-start;
  }
  .lock-toggle.locked{box-shadow:0 0 8px rgba(251,191,36,.45);border-color:#fbbf24;color:#fbbf24}
  .lock-toggle.on-item{position:absolute;right:2px;bottom:2px;z-index:2}
  .lock-toggle.equipped{position:absolute;right:2px;bottom:2px;z-index:2}
  .gear-slot.locked-slot{box-shadow:inset 0 0 0 1px rgba(251,191,36,.7),0 0 14px rgba(251,191,36,.24)}
  .stash-locked{gap:6px;justify-content:center;align-items:center;text-align:center}
  .stash-locked .btn{margin-top:4px}
  .stash-locked .btn.buy{padding:6px 8px;font-size:9px;min-width:0}

  .inventory-hero-overview{
    --inventory-portrait-size:76px;
    display:grid;
    grid-template-columns:var(--inventory-portrait-size) minmax(128px, 1fr);
    align-items:stretch;
    gap:8px;
    width:min(260px,100%);
    margin:0 0 8px 0;
  }
  .inventory-layout{display:flex;flex-wrap:nowrap;gap:8px;align-items:flex-start}
  .inventory-stats{--inventory-panel-gap:8px;flex:0 0 260px;max-width:260px;display:flex;flex-direction:column;gap:var(--inventory-panel-gap);min-width:180px}
  .inventory-stats .stats-card{width:100%;box-sizing:border-box;margin-bottom:0}
  .inventory-stats .inventory-hero-stats-card,
  .inventory-hero-meta-card{
    min-height:72px;
  }
  .inventory-hero-meta-card{
    justify-content:center;
    margin-bottom:0;
    padding:8px;
    box-sizing:border-box;
    border-radius:14px;
  }
  #modal .modal-card.modal-hero-view{
    --inventory-outer-portrait-size:76px;
    --inventory-outer-portrait-gap:8px;
  }
  #modal .modal-card.compact.modal-hero-view{
    max-width:min(var(--modal-max-width,1200px),calc(100vw - var(--modal-viewport-padding,24px) - var(--modal-viewport-padding,24px)));
  }
  #modal .modal-card.modal-hero-view .inventory-hero-portrait-frame{
    position:relative;
    top:auto;
    left:auto;
    z-index:12;
    width:var(--inventory-portrait-size);
    height:var(--inventory-portrait-size);
    align-self:stretch;
  }
  #modal .modal-card.modal-hero-view .inventory-hero-portrait-frame .hero-slot-badge{
    display:flex;
  }
  .inventory-actions{
    display:flex;
    flex-direction:column;
    gap:var(--inventory-panel-gap);
    align-items:stretch;
    margin-top:-2px;
    padding:8px;
    border:1px solid rgba(126,34,206,.5);
    border-radius:14px;
    background:
      linear-gradient(165deg,rgba(17,10,32,.76),rgba(8,6,16,.62)),
      radial-gradient(115% 120% at 50% -30%,rgba(126,34,206,.22),transparent 62%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.07),
      0 10px 22px rgba(0,0,0,.28),
      0 0 14px rgba(126,34,206,.16);
  }

  .stash-status-panel{
    display:inline-flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    width:fit-content;
    max-width:100%;
    margin:8px 0 6px;
    padding:6px 10px;
    opacity:.95;
    border:1px solid rgba(96,165,250,.36);
    border-radius:10px;
    background:
      linear-gradient(145deg,rgba(15,23,42,.72),rgba(8,13,24,.58)),
      radial-gradient(120% 160% at 0% 0%,rgba(59,130,246,.18),transparent 60%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.05),
      0 8px 18px rgba(0,0,0,.26),
      0 0 12px rgba(59,130,246,.12);
  }
  .stash-status-note{
    opacity:.85;
    margin-left:0;
    color:#60a5fa;
    text-shadow:0 0 6px rgba(96,165,250,.35);
  }

  .inventory-actions .inventory-action-pill{
    align-self:stretch;
    width:100%;
    min-height:30px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:7px 10px;
    border-radius:999px;
    text-align:center;
    letter-spacing:.02em;
    line-height:1.05;
    white-space:nowrap;
  }
  .inventory-actions .inventory-action-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1.15em;
    filter:drop-shadow(0 0 4px rgba(216,180,254,.5));
  }
  .inventory-actions .equip-best{
    background:linear-gradient(135deg,rgba(30,64,175,.72),rgba(37,99,235,.28));
    border-color:rgba(96,165,250,.78);
  }
  .inventory-actions .auto-equip{
    justify-content:space-between;
  }
  .inventory-actions .auto-equip .switch{
    flex:0 0 auto;
  }
  .inventory-main{flex:2 1 380px;display:flex;gap:12px;align-items:flex-start;min-width:0;flex-wrap:nowrap;padding-right:8px;box-sizing:border-box}
  .inventory-main .grid-gear{flex:1 1 520px;min-width:0;max-width:none;width:auto;grid-template-columns:repeat(3,minmax(120px,1fr))}
  .inventory-gems{
    flex:0 0 240px;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:stretch;
    min-width:220px;
    width:240px;
    max-width:none;
    padding:14px;
    margin-left:auto;
    margin-right:0;
    border:1px solid rgba(51,65,85,.7);
    border-radius:12px;
    background:linear-gradient(160deg,rgba(9,14,24,.9),rgba(7,11,20,.7));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 14px 28px rgba(0,0,0,.5);
    box-sizing:border-box;
  }
  .inventory-gems .small{text-align:center;margin:0;font-size:10px;white-space:nowrap;line-height:1.1}
  .inventory-gems #gemStash{flex:1 1 auto}
  .pet-inventory .pet-panel-group .pet-info-note{
    grid-column:1 / -1;
    margin-bottom:4px;
    color:#cbd5f5;
  }
  .pet-inventory .pet-panel-group .pet-info-note.pet-info-note--alert{color:#f87171}
  .inventory-gems .gem-stash{
    width:100%;
    border:1px solid rgba(148,163,184,.25);
    background:rgba(7,10,18,.7);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  }
  .pet-inventory .inventory-main{flex-wrap:nowrap;align-items:stretch;padding-right:0}
  .pet-inventory .inventory-stats{flex:1 1 200px;max-width:240px}
  .pet-inventory .pet-panel-group{
    display:grid;
    flex:2 1 320px;
    gap:12px;
    grid-template-columns:repeat(2,minmax(280px,1fr));
    align-items:stretch;
    min-width:0;
    width:100%;
    padding:4px;
    box-sizing:border-box;
    overflow-x:auto;
  }
  .pet-inventory .pet-panel-group .stats-card{min-width:0;box-sizing:border-box;height:100%}
  .pet-inventory .inventory-gems{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:stretch;
    flex:0 0 220px;
    min-width:200px;
    width:auto;
    max-width:220px;
    margin-left:auto;
    margin-right:6px;
    align-self:stretch;
  }
  .pet-inventory .pet-panel-group .pet-gear-wrapper{
    margin-left:auto;
    display:flex;
    justify-content:flex-end;
    padding-right:4px;
  }
  .pet-inventory .pet-panel-group .pet-gear-wrapper .grid-gear-pet{
    display:inline-grid;
    justify-items:end;
  }
  .pet-summary-card{display:flex;flex-direction:column;gap:6px}
  .pet-summary-card .small{line-height:1.3}

  #modal .modal-card.compact{max-width:min(var(--modal-max-width,1200px),calc(100vw - var(--modal-viewport-padding,24px) - var(--modal-viewport-padding,24px)));min-width:min(360px,calc(100vw - var(--modal-viewport-padding,24px) - var(--modal-viewport-padding,24px)));max-height:none;overflow:visible}
  #modal .modal-card.pet-egg-compact{
    width:fit-content;
    max-width:calc(100vw - 48px);
    min-width:min(320px,calc(100vw - 48px));
    overflow:visible;
    max-height:none;
  }
  #modal .modal-card.pet-egg-compact .pet-panel-group{
    justify-content:center;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    overflow:visible;
  }

  @media(max-width:1100px){
    .inventory-layout{flex-wrap:wrap}
    .inventory-main{padding-right:0;flex-wrap:wrap}
    .inventory-gems{flex:1 1 320px;max-width:100%;min-width:0;margin-left:0;margin-right:0;width:100%}
    .pet-inventory .inventory-layout{flex-wrap:nowrap}
    .pet-inventory .inventory-main{flex-wrap:nowrap}
    .pet-inventory .inventory-gems{flex:0 0 220px;max-width:220px;width:auto;margin-right:6px}
  }

  @media(max-width:900px){
    .inventory-main{flex-direction:column;flex-wrap:wrap;padding-right:0}
    .inventory-main .grid-gear{width:100%;max-width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
    .inventory-gems{align-self:stretch;max-width:100%;min-width:0;margin-left:0;margin-right:0;flex:1 1 auto;width:100%}
    .pet-inventory .inventory-gems{flex:1 1 auto;max-width:100%;margin-left:0;margin-right:0}
    .pet-inventory .inventory-main{flex-direction:row;flex-wrap:nowrap}
    .pet-inventory .inventory-gems{flex:0 0 220px;max-width:220px;width:auto;margin-right:6px;align-self:stretch}
  }

  @media(max-width:640px){
    .grid-gear{grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%}
  }

  @media(max-width:420px){
    .grid-gear{grid-template-columns:1fr}
  }

  @media(max-width:720px){
    .inventory-layout{flex-direction:column}
    .inventory-stats{max-width:100%}
    .pet-inventory .inventory-layout{flex-direction:row}
  }

  .gem-stash{border:1px dashed #334155;border-radius:10px;padding:6px;background:#0a0f18;display:flex;flex-direction:column;gap:6px;width:100%;max-width:100%;flex:1 1 auto;min-width:0;box-sizing:border-box}

  .modal-card.compact{font-size:12px}
  .compact .gear-slot{padding:2px;min-height:30px;gap:2px}
  .compact .gear-slot.equipped{padding:2px;min-height:30px}
  /* In compact mode keep slot labels visible but tighter */
  .compact .slot-name{display:block;font-size:9px;margin-bottom:2px}
  .compact .stashed{padding:2px;margin-bottom:2px;gap:2px}
  .compact .stash-item{gap:2px;min-width:150px}
  .compact .item-header{gap:1px}
  .compact .gear-slot .item-header,
  .compact .stashed .item-header{font-size:8.5px}
  .compact .gear-slot .stat-line,
  .compact .stashed .stat-line{font-size:8.5px;max-height:calc(1.1em * 3)}
.stat-line--nowrap{white-space:nowrap;}
  .inventory-gems{position:relative}
  .drop-zone,
  .gem-drop-zone{
    --drop-zone-accent:#34d399;
    --drop-zone-accent-strong:#86efac;
    display:none;
    position:absolute;
    border:1px solid color-mix(in srgb,var(--drop-zone-accent) 78%,#ffffff 8%);
    border-radius:14px;
    text-align:center;
    background:
      radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--drop-zone-accent) 26%,transparent),transparent 60%),
      linear-gradient(145deg,rgba(5,14,23,.92),rgba(5,10,18,.82));
    pointer-events:none;
    z-index:30;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    overflow:hidden;
    isolation:isolate;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.12),
      inset 0 -18px 36px rgba(0,0,0,.45),
      0 16px 32px rgba(0,0,0,.5),
      0 0 28px color-mix(in srgb,var(--drop-zone-accent) 34%,transparent);
  }
  .gem-drop-zone{
    --drop-zone-accent:#a78bfa;
    --drop-zone-accent-strong:#ddd6fe;
  }
  .drop-zone::before,
  .gem-drop-zone::before{
    content:"";
    position:absolute;
    inset:7px;
    border:2px dashed color-mix(in srgb,var(--drop-zone-accent-strong) 78%,transparent);
    border-radius:10px;
    opacity:.9;
    filter:drop-shadow(0 0 8px color-mix(in srgb,var(--drop-zone-accent) 55%,transparent));
    pointer-events:none;
  }
  .drop-zone::after,
  .gem-drop-zone::after{
    content:"";
    position:absolute;
    width:120%;
    height:46%;
    left:-10%;
    top:-18%;
    transform:rotate(-8deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
    opacity:.75;
    pointer-events:none;
  }
  .drop-zone.active,
  .gem-drop-zone.active{
    display:flex;
    pointer-events:none;
    align-items:center;
    justify-content:center;
    animation:dropZonePulse 1.45s ease-in-out infinite;
  }
  .drop-zone .btn,
  .gem-drop-zone .btn{
    position:relative;
    z-index:1;
    min-width:min(190px,calc(100% - 28px));
    padding:8px 12px;
    border-color:color-mix(in srgb,var(--drop-zone-accent) 64%,rgba(255,255,255,.28));
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 18px color-mix(in srgb,var(--drop-zone-accent) 28%,transparent);
    color:#f8fafc;
    text-transform:uppercase;
    letter-spacing:.08em;
    text-shadow:0 1px 0 #000,0 0 10px color-mix(in srgb,var(--drop-zone-accent) 45%,transparent);
    pointer-events:none;
    white-space:normal;
    line-height:1.25;
  }
  @keyframes dropZonePulse{
    0%,100%{filter:saturate(1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -18px 36px rgba(0,0,0,.45),0 16px 32px rgba(0,0,0,.5),0 0 28px color-mix(in srgb,var(--drop-zone-accent) 34%,transparent)}
    50%{filter:saturate(1.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -18px 36px rgba(0,0,0,.45),0 16px 32px rgba(0,0,0,.5),0 0 38px color-mix(in srgb,var(--drop-zone-accent) 46%,transparent)}
  }
  .gem-row{display:flex;align-items:center;justify-content:flex-start;gap:6px;padding:0;border:0;border-radius:0;width:100%;box-sizing:border-box;background:transparent;box-shadow:none}
  .gem-row .stashed{flex:1 1 auto;width:100%;max-width:100%;min-width:0;height:auto;padding:6px 10px;background:rgba(7,11,18,.85);box-shadow:inset 0 0 0 1px rgba(239,68,68,.35),0 8px 18px rgba(0,0,0,.45)}
  .gem-row .stashed{flex-direction:column;align-items:center;gap:2px}
  .gem-row .gem-icon{font-size:14px}
  .gem-row .gem-title{font-weight:bold;text-align:center;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;text-overflow:ellipsis;word-break:break-word;max-width:100%;line-height:1.15;max-height:calc(1.15em * 2)}
  .gem-row .gem-stats-heading{width:100%;text-align:center;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#fde68a;text-shadow:0 0 6px rgba(253,230,138,.38)}
  .socket-row{display:flex;gap:4px;margin-top:4px}
  .socket{width:24px;height:24px;border:1px dashed #22c55e;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;background:#064e3b}
  .socket.empty{opacity:.5}

/* Gem cards sit at half the height of the 200px item squares. */
.gem-row .stashed,
.gem-row .stashed.pickable,
.gem-row .stash-empty{
  height:var(--gem-card-height)!important;
  min-height:var(--gem-card-height)!important;
  max-height:var(--gem-card-height)!important;
  flex:0 0 var(--gem-card-height)!important;
  justify-content:center;
}

.socket.with-gem{box-shadow:0 0 6px currentColor;background:currentColor;border-color:currentColor}
  .socket.with-gem .gem-icon{color:#fff;text-shadow:0 0 2px #000}
  b.item-name{font-size:10.5px}
  .stat-line{font-size:10px;opacity:.85;white-space:normal}
  .highlight-target{
    background:var(--drag-ghost-bg);
    box-shadow:inset 0 0 0 2px var(--drag-ghost-border),0 0 8px 2px var(--drag-ghost-border);
    border-color:var(--drag-ghost-border)!important;
  }
  /* Dynamic slot styling via :has() */
  .gear-slot:has(.equipped){
    border:2px solid #00ff88;
    box-shadow:0 0 6px #00ff88aa,0 12px 24px rgba(0,0,0,.45);
  }
  .gear-slot:has(.socket.with-gem){
    box-shadow:0 0 14px rgba(59,130,246,.28),0 10px 22px rgba(0,0,0,.45);
  }
  .drag-origin{
    box-shadow:0 0 8px 2px var(--drag-ghost-border)!important;
    border-color:var(--drag-ghost-border)!important;
  }
  .pickable{cursor:grab}
  .pickable:active{cursor:grabbing}
  body.dragging,body.dragging *{cursor:grabbing!important}
  .drag-ghost{
  position:fixed;
  pointer-events:none;
  opacity:.95;
  border:3px dotted var(--drag-ghost-border);
  border-radius:10px;
  padding:4px;
  transform:translate(-50%,-50%);
  z-index:1000;
  box-sizing:border-box;
  overflow:hidden;

  /* true window */
  background: transparent;

  /* tiny blur, glass not frost */
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);

  /* inside-edge glow (rim), not a circle */
  box-shadow:
    0 10px 26px rgba(0,0,0,.55),                 /* depth */
    inset 0 0 0 1px rgba(120,180,255,.28),       /* crisp inner line */
    inset 0 0 14px rgba(40,120,255,.22),         /* soft inner bloom */
    inset 0 0 34px rgba(10,40,120,.18);          /* deeper fade inward */
}

  .idle-coin{position:absolute;cursor:grab;z-index:9;transition:top linear;perspective:800px;}
  .idle-coin:active{cursor:grabbing}

  .eggbar{height:6px;background:#2a103d;border:1px solid #7e22ce;border-radius:999px;overflow:hidden;margin-top:4px;margin-bottom:6px;box-shadow:0 0 6px #a855f7}
  .eggbar>i{display:block;height:100%;background:linear-gradient(90deg,#7e22ce,#c084fc,#7e22ce);box-shadow:0 0 6px #a855f7,0 0 12px #a855f7;transition:width .25s linear}
  .pet-egg-preview{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:4;
    isolation:isolate;
    margin:0 auto 10px;
    width:180px;
    height:225px;
    overflow:hidden;
    transform:translateZ(0);
    cursor:pointer;
    border-radius:50%;
  }
  .pet-egg-preview:focus-visible{outline:2px solid rgba(192,132,252,.92);outline-offset:3px}
  .pet-egg-preview svg{display:block;position:relative;z-index:1;width:288px;height:378px;shape-rendering:geometricPrecision;text-rendering:geometricPrecision;color-interpolation-filters:sRGB;filter:drop-shadow(0 14px 18px rgba(0,0,0,.52)) saturate(1.24) contrast(1.16) brightness(1.04);backface-visibility:hidden}
  .pet-egg-preview .egg-cinematic-starfield{mix-blend-mode:screen}
  .pet-egg-preview .egg-star-depth-0{filter:contrast(1.08)}
  .pet-egg-preview .egg-star-depth-1,.pet-egg-preview .egg-star-depth-2{filter:contrast(1.18) saturate(1.15)}
  .pet-egg-preview .egg-shooting-stars{mix-blend-mode:screen}
  .pet-egg-preview .egg-slosh-layer,
  .pet-egg-preview .egg-slosh-depth,
  .pet-egg-preview .egg-slosh-liquid,
  .pet-egg-preview .egg-slosh-bio,
  .pet-egg-preview .egg-slosh-rings,
  .pet-egg-preview .egg-slosh-glass{
    transform-box:fill-box;
    transform-origin:center;
    will-change:transform,opacity,filter;
  }
  .pet-egg-preview.egg-preview-slosh{
    --egg-slosh-duration:4.2s;
    --egg-slosh-ease:cubic-bezier(.36,0,.24,1);
  }
  .pet-egg-preview.egg-preview-slosh .egg-slosh-layer{
    animation:eggSloshSuspended var(--egg-slosh-duration) var(--egg-slosh-ease);
  }
  .pet-egg-preview.egg-preview-slosh .egg-slosh-depth{
    animation:eggSloshDepth var(--egg-slosh-duration) var(--egg-slosh-ease);
  }
  .pet-egg-preview.egg-preview-slosh .egg-slosh-liquid{
    animation:eggSloshLiquid var(--egg-slosh-duration) var(--egg-slosh-ease);
    opacity:.31;
  }
  .pet-egg-preview.egg-preview-slosh .egg-slosh-bio{
    animation:eggSloshBio var(--egg-slosh-duration) var(--egg-slosh-ease);
    filter:drop-shadow(0 0 5px rgba(255,255,255,.22));
  }
  .pet-egg-preview.egg-preview-slosh .egg-slosh-rings{
    animation:eggSloshRings var(--egg-slosh-duration) var(--egg-slosh-ease);
  }
  .pet-egg-preview.egg-preview-slosh .egg-slosh-glass{
    animation:eggSloshGlass var(--egg-slosh-duration) var(--egg-slosh-ease);
  }
  @keyframes eggSloshSuspended{
    0%{transform:translate(0,0) rotate(0deg) scale(1);}
    28%{transform:translate(1.4px,-1px) rotate(1.15deg) scale(1.002);}
    58%{transform:translate(-1px,.7px) rotate(-.75deg) scale(1.001);}
    82%{transform:translate(.35px,-.2px) rotate(.25deg) scale(1);}
    100%{transform:translate(0,0) rotate(0deg) scale(1);}
  }
  @keyframes eggSloshDepth{
    0%{transform:translate(0,0) rotate(0deg);opacity:1;}
    30%{transform:translate(-1.8px,1.2px) rotate(-1.05deg);opacity:.98;}
    60%{transform:translate(1.2px,-.7px) rotate(.7deg);opacity:.99;}
    84%{transform:translate(-.35px,.2px) rotate(-.22deg);opacity:1;}
    100%{transform:translate(0,0) rotate(0deg);opacity:1;}
  }
  @keyframes eggSloshLiquid{
    0%{transform:translate(0,0) rotate(0deg) scale(1);}
    30%{transform:translate(2.8px,-1.8px) rotate(1.7deg) scale(1.012,.996);}
    60%{transform:translate(-1.9px,1.3px) rotate(-1.1deg) scale(1.007,1.002);}
    84%{transform:translate(.55px,-.35px) rotate(.32deg) scale(1.002,.999);}
    100%{transform:translate(0,0) rotate(0deg) scale(1);}
  }
  @keyframes eggSloshBio{
    0%{transform:translate(0,0) rotate(0deg);}
    30%{transform:translate(-2.3px,1.7px) rotate(-1.55deg);}
    62%{transform:translate(1.7px,-1px) rotate(.95deg);}
    86%{transform:translate(-.45px,.3px) rotate(-.24deg);}
    100%{transform:translate(0,0) rotate(0deg);}
  }
  @keyframes eggSloshRings{
    0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1;}
    30%{transform:translate(1.7px,-1.3px) rotate(1.1deg) scale(1.006);opacity:.94;}
    62%{transform:translate(-1.2px,.9px) rotate(-.72deg) scale(1.003);opacity:.98;}
    86%{transform:translate(.3px,-.18px) rotate(.2deg) scale(1.001);opacity:.99;}
    100%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1;}
  }
  @keyframes eggSloshGlass{
    0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:.42;}
    32%{transform:translate(-1.4px,1px) rotate(-.7deg) scale(1.006,.998);opacity:.5;}
    64%{transform:translate(.9px,-.6px) rotate(.42deg) scale(.999,1.003);opacity:.46;}
    100%{transform:translate(0,0) rotate(0deg) scale(1);opacity:.42;}
  }
  .pet-egg-empty{position:relative;display:flex;align-items:flex-start;gap:14px;width:100%}
  .pet-egg-empty-main{display:flex;flex-direction:column;align-items:stretch;justify-content:center;flex:1;width:100%;padding:22px 10px 8px;box-sizing:border-box}
  .pet-egg-preview-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    max-width:100%;
    padding:6px;
    box-sizing:border-box;
  }
  .pet-egg-preview-row > div:first-child{
    flex:0 0 auto;
    display:flex;
    justify-content:center;
    min-width:120px;
  }
  .pet-egg-preview-row .pet-egg-stats-card{
    flex:0 1 auto;
    min-width:180px;
    max-width:100%;
  }
  .pet-egg-stats{min-width:0;text-align:left;width:auto;max-width:100%}
  .pet-egg-stats-card{
    width:fit-content;
    max-width:320px;
    min-height:120px;
    display:flex;
    overflow:hidden;
    align-self:stretch;
    border:1px solid rgba(148,163,184,.25);
    border-radius:12px;
    padding:10px 12px;
    background:rgba(10,15,24,.72);
    box-shadow:inset 0 0 16px rgba(0,0,0,.35);
    box-sizing:border-box;
  }
  .pet-egg-stats-list{
    list-style:none;
    padding-left:0;
    margin:6px 0;
    display:flex;
    flex-direction:column;
    gap:2px;
    width:100%;
  }
  .pet-egg-stats-list li{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.2;
    max-width:100%;
  }
  @media(max-width:520px){
    .pet-egg-preview-row{
      flex-direction:column;
      align-items:center;
      text-align:center;
    }
    .pet-egg-stats-card{width:100%}
    .pet-egg-stats{text-align:left}
  }
  .pet-egg-name{position:relative;display:inline-block;font-size:14px;font-weight:700;color:#e2e8f0;text-shadow:0 0 6px rgba(15,23,42,.65),0 0 10px rgba(109,40,217,.65),0 0 18px rgba(109,40,217,.45);margin:0 auto 8px;text-align:center;padding:2px 10px}
  .pet-egg-reroll{display:flex;flex-direction:column;align-items:center;gap:3px}
  .pet-egg-reroll-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#cbd5f5;opacity:.85}
  .pet-egg-buy{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    min-height:46px;
    line-height:1.1;
    text-align:center;
    align-self:center;
    width:fit-content;
  }
  .pet-egg-buy-label{font-weight:700}
  .pet-egg-buy-price{font-size:11px}
  .price-token,.pet-egg-buy-price{color:var(--gold);text-shadow:0 0 6px var(--gold);font-weight:700}
  .pet-egg-action-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:10px}
  .egg-regenerate-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.18);
    background:linear-gradient(140deg,rgba(255,255,255,.18),rgba(255,255,255,.04));
    color:#e2e8f0;
    box-shadow:0 12px 22px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.22);
    backdrop-filter:blur(5px);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .egg-regenerate-btn svg{width:16px;height:16px}
  .egg-regenerate-btn:hover{
    transform:translateY(-2px);
    border-color:rgba(167,139,250,.6);
    box-shadow:0 16px 28px rgba(15,23,42,.35), inset 0 1px 0 rgba(255,255,255,.26);
  }
  .egg-regenerate-btn:active{transform:translateY(0)}
  .pet-level{color:#8b5cf6;text-shadow:0 0 4px #4c1d95,0 0 8px #4c1d95}
  .egg-roll-label{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;line-height:1.2}

  
/* === Visual FX layers: vignette === */
.fx-layer{ position:absolute; inset:0; pointer-events:none; }

/* Map fog overlay */
.map-fog{
  z-index:1;
  opacity:1;
  filter:saturate(.62) contrast(1.16) brightness(.82);
}

.map-overlay{
  z-index:6;
}
.map-overlay text{
  pointer-events:none;
}
.map-overlay .hero-callout{
  pointer-events:none;
}

/* Layer order */
.vignette{ z-index:5; }
#naviLayer{ z-index:8; }

/* Vignette “film” */
.vignette{
  background: radial-gradient(120% 90% at 50% 55%,
    transparent 40%,
    rgba(0,0,0,.35) 68%,
    rgba(0,0,0,.70) 100%);
  mix-blend-mode:multiply;
  opacity: var(--vignette, .6);
}

#dunChecklist {
  color: #f8fafc;
  border: 1px solid rgba(37,99,235,.7);
  border-radius: 12px;
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: 7px 11px;
  align-items: stretch;
  font-size: .82rem;
  line-height: 1.25;
  gap: 6px;
  flex-wrap: nowrap;
  background: linear-gradient(155deg, rgba(8,15,30,.92), rgba(10,20,36,.78));
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.2), 0 8px 16px rgba(2,6,23,.45), 0 0 16px rgba(56,189,248,.15);
}

#dunChecklist .dun-step {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .46rem;
  position: relative;
  transition: color .2s ease, text-shadow .2s ease;
  line-height: 1.25;
  width: 100%;
  min-height: 1.1rem;
}

#dunChecklist .dun-icon{
  width: .9rem;
  height: .9rem;
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 999px;
}

#dunChecklist .dun-icon-svg{
  width: .95rem;
  height: .95rem;
  display: inline-block;
  flex: 0 0 auto;
  overflow: visible;
}

#dunChecklist .dun-icon-svg-loot{
  filter: drop-shadow(0 0 4px rgba(250,204,21,.55));
  animation: coinSpin 5.5s linear infinite;
}

#dunChecklist .dun-mini-core{
  stroke: rgba(124,45,18,.75);
  stroke-width: 1.1;
  animation: bossCore 1.8s ease-in-out infinite;
}

#dunChecklist .dun-mini-core-inner{
  fill: rgba(255, 235, 215, 0.95);
  animation: coreInner 1.8s ease-in-out infinite;
}

#dunChecklist .dun-mini-flare{
  fill: rgba(255, 150, 40, 0.35);
  animation: flarePulse 1.8s ease-in-out infinite;
}

#dunChecklist .dun-mini-orbit{
  transform-box: view-box;
  transform-origin: 0 0;
  animation: orbitSpin 3.1s linear infinite;
}

#dunChecklist .dun-mini-orb{
  fill: rgba(255, 214, 160, 0.95);
  animation: orbPulse 2.4s ease-in-out infinite;
}

#dunChecklist .dun-mini-orb-trail{
  fill: rgba(255, 164, 66, 0.85);
  opacity: .45;
  filter: blur(0.4px);
  animation: orbitTrail 3.1s linear infinite;
}

#dunChecklist .dun-keeper-core{
  stroke: rgba(43,0,0,.85);
  stroke-width: 1.2;
  animation: bossCore 1.4s ease-in-out infinite;
}

#dunChecklist .dun-keeper-core-inner{
  fill: rgba(255, 225, 225, 0.95);
  animation: coreInner 1.4s ease-in-out infinite;
}

#dunChecklist .dun-keeper-flare{
  fill: rgba(176, 0, 0, 0.35);
  animation: flarePulse 1.4s ease-in-out infinite;
}

#dunChecklist .dun-keeper-orbit{
  transform-box: view-box;
  transform-origin: 0 0;
  animation: orbitSpin 2.6s linear infinite;
}

#dunChecklist .dun-keeper-orb{
  fill: rgba(210, 32, 48, 0.95);
  animation: orbPulse 2s ease-in-out infinite;
}

#dunChecklist .dun-keeper-orb-trail{
  fill: rgba(138, 0, 0, 0.85);
  opacity: .45;
  filter: blur(0.5px);
  animation: orbitTrail 2.6s linear infinite;
}

#dunChecklist .dun-icon-coin{
  background:
    radial-gradient(circle at 35% 34%, #fff7c2 0 22%, transparent 23%),
    radial-gradient(circle at 50% 50%, #fde68a 0 42%, #facc15 43% 72%, #b45309 73% 100%);
  box-shadow: inset 0 0 0 1px rgba(120,53,15,.85), 0 0 4px rgba(250,204,21,.55);
  animation: coinSpin 5.5s linear infinite;
}

#dunChecklist .dun-icon-mini{
  background: radial-gradient(circle at 40% 36%, #ffd8bf 0 24%, #fb923c 45%, #c2410c 100%);
  box-shadow: 0 0 6px rgba(194,65,12,.55), inset 0 0 0 1px rgba(124,45,18,.75);
  animation: bossCore 1.8s ease-in-out infinite;
}

#dunChecklist .dun-icon-keeper{
  background: radial-gradient(circle at 40% 35%, #ffe6e6 0 22%, #c51616 46%, #2b0000 100%);
  box-shadow: 0 0 7px rgba(140,0,0,.7), inset 0 0 0 1px rgba(43,0,0,.85);
  animation: bossCore 1.4s ease-in-out infinite;
}

#dunChecklist .dun-step.in-progress {
  animation: dunChecklistPulse 1.2s ease-in-out infinite;
}

#dunChecklist .dun-step.complete {
  color: #16a34a;
}

#dunChecklist .dun-sep {
  display: none;
}

@keyframes dunChecklistPulse {
  0% {
    text-shadow:
      0 0 0 rgba(74,222,128,0),
      0 0 0 rgba(34,197,94,0);
  }
  50% {
    text-shadow:
      0 0 10px rgba(74,222,128,.95),
      0 0 18px rgba(34,197,94,.7);
  }
  100% {
    text-shadow:
      0 0 0 rgba(74,222,128,0),
      0 0 0 rgba(34,197,94,0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #dunChecklist .dun-step.in-progress {
    animation: none;
  }
}

/* Info button and modal */
.log-actions > button{
  --orb-size:26px;
  width:var(--orb-size);
  height:var(--orb-size);
  min-width:var(--orb-size);
  min-height:var(--orb-size);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  padding:0;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.24), rgba(255,255,255,.04) 58%),
    radial-gradient(circle at 75% 78%, rgba(160,120,255,.18), rgba(160,120,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
  box-shadow:
    0 10px 16px rgba(0,0,0,.62),
    inset 0 0 0 1px rgba(0,0,0,.36),
    0 0 16px rgba(120,210,255,.12);
  transition: box-shadow .18s ease, transform .12s ease;
}
.log-actions > button:hover{
  box-shadow:
    0 12px 20px rgba(0,0,0,.68),
    inset 0 0 0 1px rgba(0,0,0,.32),
    0 0 18px rgba(120,210,255,.22),
    0 0 14px rgba(160,120,255,.2);
}
.log-actions > button:active{ transform:scale(.97); }
.log-actions > button:focus{ outline:none; }
.log-actions > button:focus-visible{
  box-shadow:
    0 12px 20px rgba(0,0,0,.68),
    inset 0 0 0 1px rgba(0,0,0,.32),
    0 0 0 2px rgba(255,255,255,.2),
    0 0 18px rgba(120,210,255,.35);
}

#saveBtn{ color:#f5d0fe; }
#saveBtn .icon-glow,
#infoBtn .icon-glow,
.pause-toggle-btn .run-icon,
.starfield-toggle-btn .ico{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  line-height:1;
  transform:none;
}
#saveBtn .icon-glow{text-shadow:0 0 8px #f0abfc,0 0 14px #a855f7}

.info-btn{ color:#60a5fa; }
#infoBtn .icon-glow{
  color:#3b82f6;
  text-shadow:0 0 8px rgba(59,130,246,.7),0 0 14px rgba(59,130,246,.45);
}

#atsBtn{
  color:#f8d28f;
  border-color:rgba(250,204,21,.35);
  background:
    radial-gradient(circle at 28% 22%, rgba(255,240,196,.35), rgba(255,255,255,.04) 58%),
    radial-gradient(circle at 74% 80%, rgba(251,191,36,.22), rgba(251,191,36,0) 70%),
    linear-gradient(180deg, rgba(36,24,10,.92), rgba(22,16,9,.92));
  box-shadow:
    0 10px 20px rgba(0,0,0,.62),
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 0 14px rgba(251,191,36,.2);
}

#atsBtn .icon-glow{
  color:#fbbf24;
  text-shadow:0 0 8px rgba(251,191,36,.85),0 0 16px rgba(245,158,11,.5);
}

#atsBtn:hover{
  box-shadow:
    0 14px 24px rgba(0,0,0,.68),
    inset 0 0 0 1px rgba(0,0,0,.3),
    0 0 18px rgba(251,191,36,.32),
    0 0 10px rgba(245,158,11,.22);
}

#diceBtn{
  width:var(--orb-size);
  min-width:var(--orb-size);
  border-radius:50%;
  padding:0;
  font-size:15px;
  font-weight:800;
  letter-spacing:0;
  color:#fde68a;
  background:
    linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.92));
  border:1px solid rgba(250,204,21,.28);
  box-shadow:
    0 10px 24px rgba(2,6,23,.34),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(255,211,106,.06);
}

#diceBtn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 14px 28px rgba(2,6,23,.42),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 1px rgba(255,211,106,.12);
}

.dice-menu-modal{
  padding:24px;
  background:transparent;
}

.dice-menu-card{
  width:min(500px, calc(100vw - 48px));
  min-width:min(260px, calc(100vw - 48px));
  max-width:min(560px, calc(100vw - 32px));
  max-height:none;
  border-radius:22px;
  display:flex;
  flex-direction:column;
  overflow:visible;
  margin:0 auto auto;
  border-color:rgba(149,127,255,.36);
  background:
    linear-gradient(160deg, rgba(19,17,24,.98), rgba(8,7,12,.99) 54%, rgba(20,13,34,.98));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 -34px 54px rgba(0,0,0,.48),
    0 24px 60px rgba(0,0,0,.58),
    0 0 40px rgba(76,63,145,.22);
}


.dice-menu-header{
  --dice-hero-chip-gap:8px;
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:46px 18px 14px;
  border-bottom:1px solid rgba(148,163,184,.12);
}

.dice-hero-points-chip{
  position:absolute;
  top:var(--dice-hero-chip-gap);
  left:var(--dice-hero-chip-gap);
  display:inline-flex;
  align-items:center;
  z-index:1;
}

.window-title-chip,
.dice-menu-header h3{
  grid-column:2;
  justify-self:center;
  margin:0;
  font-size:clamp(14px, 2.2vw, 20px);
  font-weight:800;
  color:#4c3f91;
  letter-spacing:.2px;
  line-height:1.1;
  text-shadow:0 3px 0 #1e3a8a;
  border:1px solid rgba(92, 51, 23, .9);
  border-radius:8px;
  padding:5px 14px;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#diceTitle{
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(22px, 4.2vw, 38px);
  letter-spacing:.08em;
  line-height:1.02;
  text-transform:uppercase;
}

#diceModal .window-title-chip{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#c084fc;
  background:
    linear-gradient(180deg, #f4ecff 0%, #c084fc 26%, #7c3aed 48%, #5f5968 70%, #2f3137 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 2px 0 rgba(5,5,8,.98),
    0 0 10px rgba(167,139,250,.62),
    0 0 20px rgba(126,34,206,.34);
  border:1px solid rgba(167,139,250,.86);
  border-radius:14px;
  padding:10px 22px;
  box-shadow:
    inset 0 0 0 1px rgba(27,24,31,.92),
    inset 0 0 18px rgba(168,85,247,.16),
    0 0 0 1px rgba(52,46,58,.78),
    0 0 22px rgba(168,85,247,.18);
}

#diceModal .window-title-chip::before{
  content:"";
  position:absolute;
  inset:3px;
  z-index:-1;
  border:1px solid rgba(223,179,255,.32);
  border-radius:8px;
  background:
    linear-gradient(135deg, rgba(31,29,36,.98), rgba(65,60,75,.94) 46%, rgba(18,17,22,.99));
  box-shadow:inset 0 0 18px rgba(0,0,0,.52);
}

#diceModal .window-title-chip::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(139,92,246,.42), rgba(38,34,43,.96), rgba(192,132,252,.36));
}

.dice-menu-header .modal-close-orb{
  grid-column:3;
  justify-self:end;
}

.dice-menu-card::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(243,200,115,.18);
  border-radius:17px;
  pointer-events:none;
}

.dice-form{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:16px 18px 18px;
  overflow:visible;
}

.casino-form{gap:12px;}

.casino-card{
  position:relative;
  isolation:isolate;
  border:1px solid rgba(120,102,174,.34);
  background:
    linear-gradient(180deg, rgba(18,16,23,.96), rgba(7,7,11,.99) 58%, rgba(16,10,28,.98));
  border-radius:18px;
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.055),
    inset 0 -18px 32px rgba(0,0,0,.42),
    0 12px 24px rgba(0,0,0,.34),
    0 0 22px rgba(76,63,145,.16);
}

.casino-card::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(243,200,115,.16);
  border-radius:13px;
  pointer-events:none;
  z-index:-1;
}

.casino-card > .btn{
  align-self:center;
  min-width:min(240px, 100%);
  margin-top:2px;
}

.casino-section-title{
  font-weight:900;
  color:#d8b4fe;
  text-shadow:0 1px 0 #050508, 0 0 10px rgba(168,85,247,.45);
}

.casino-section-title-chip{
  align-self:center;
  margin:0 0 4px;
  max-width:100%;
  font-size:clamp(12px, 1.9vw, 16px);
  text-align:center;
}

.casino-wager-outcome .win-sign{color:#4ade80;font-weight:800;}
.casino-wager-outcome .lose-sign{color:var(--bad);font-weight:800;}
.casino-wager-outcome{
  display:grid;
  gap:5px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:12px;
  background:rgba(2,6,23,.28);
}
.casino-wager-outcome-line{display:block;text-align:center;}

.casino-slider-label{
  font-size:12px;
  color:#efe7ff;
  text-shadow:0 1px 0 #050508, 0 0 8px rgba(168,85,247,.36);
  display:flex;
  justify-content:center;
  gap:4px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.casino-slider-controls{
  display:flex;
  align-items:center;
  gap:10px;
}

.casino-slider{
  width:100%;
  cursor:grab;
  accent-color:#8b5cf6;
}

.casino-slider:active,
.casino-slider.is-dragging{
  cursor:grabbing;
}

.casino-slider-arrow{
  min-width:38px;
  height:38px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
  user-select:none;
}

.casino-stat-line,
#heroExchangePreview{
  align-self:center;
  width:100%;
  box-sizing:border-box;
  padding:9px 12px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(15,23,42,.34), rgba(2,6,23,.28));
  text-align:center;
}

.dice-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.dice-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.dice-row label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.3px;
  color:#efe7ff;
  text-shadow:0 1px 0 #050508, 0 0 8px rgba(168,85,247,.36);
}

.dice-row select{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(15,23,42,.92);
  color:#e2e8f0;
  border:1px solid rgba(71,85,105,.9);
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.dice-row select:focus{
  outline:none;
  border-color:rgba(96,165,250,.9);
  box-shadow:
    0 0 0 3px rgba(59,130,246,.18),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.dice-modifier-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(15,23,42,.74), rgba(9,14,28,.82));
  border:1px solid rgba(148,163,184,.12);
}

.dice-modifier-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.35px;
  text-transform:uppercase;
  color:#efe7ff;
  text-shadow:0 1px 0 #050508, 0 0 8px rgba(168,85,247,.36);
}

.dice-modifier{
  display:grid;
  grid-template-columns:56px 1fr 56px;
  align-items:center;
  gap:10px;
}

.dice-mod-btn{
  height:44px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.96));
  color:#e2e8f0;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
  box-shadow:
    0 10px 22px rgba(2,6,23,.26),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.dice-mod-btn.is-minus{ color:#fca5a5; }
.dice-mod-btn.is-plus{ color:#93c5fd; }

.dice-mod-value{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(2,6,23,.42);
  color:#f8fafc;
  font-size:18px;
  font-weight:900;
  letter-spacing:.3px;
}

.dice-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:2px;
}

/* Adventure Log dice cards */
.log .dice-roll-entry{
  position:relative;
  margin:0 0 12px;
  padding:14px 16px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(10,18,38,.96), rgba(7,13,28,.96));
  border:1px solid rgba(99,102,241,.16);
  box-shadow:
    0 14px 34px rgba(2,6,23,.34),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.log .dice-roll-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.log .dice-roll-left{
  min-width:0;
  flex:1 1 auto;
}

.log .dice-roll-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:#f8fafc;
  font-size:14px;
  font-weight:900;
  letter-spacing:.2px;
}

.log .dice-roll-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.log .dice-roll-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(30,41,59,.82), rgba(15,23,42,.9));
  border:1px solid rgba(148,163,184,.14);
  color:#e5e7eb;
  font-size:13px;
  font-weight:800;
  letter-spacing:.15px;
  white-space:nowrap;
}

.log .dice-roll-chip.mod-plus{
  color:#86efac;
  border-color:rgba(34,197,94,.22);
}

.log .dice-roll-chip.mod-minus{
  color:#fca5a5;
  border-color:rgba(239,68,68,.22);
}

.log .dice-roll-total{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:8px;
}

.log .dice-roll-equals{
  color:#94a3b8;
  font-size:30px;
  font-weight:900;
  line-height:1;
}

.log .dice-roll-total-pill{
  min-width:68px;
  height:40px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(51,65,85,.88), rgba(30,41,59,.96));
  border:1px solid rgba(250,204,21,.24);
  color:#fde68a;
  font-size:16px;
  font-weight:900;
  letter-spacing:.35px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 24px rgba(2,6,23,.34);
}

.log .dice-roll-total-gold{
  color:#ffd86b;
  font-weight:900;
  text-shadow:
    0 0 4px rgba(255,216,107,.9),
    0 0 10px rgba(251,191,36,.72),
    0 0 20px rgba(217,119,6,.45);
}

body.shadow-lantern-open #adventureLogPanel{
  background:transparent;
  box-shadow:none;
  position:relative;
  z-index:32;
}

body.shadow-lantern-open #adventureLogPanel::before,
body.shadow-lantern-open #adventureLogPanel::after{
  opacity:0;
}

body.shadow-lantern-open #starfield-bg,
body.shadow-lantern-open #naviLayer,
body.shadow-lantern-open .wrap > :not(#adventureLogPanel):not(#diceModal){
  filter:brightness(.26) saturate(.65);
}

body.shadow-lantern-open #diceModal{
  background:transparent;
}

@media (max-width: 700px){
  .dice-grid{
    grid-template-columns:1fr;
  }

  .log .dice-roll-top{
    flex-direction:column;
  }

  .log .dice-roll-total{
    padding-left:0;
    align-self:flex-end;
  }
}

.pause-toggle-btn{ font-size:14px; }
.pause-toggle-btn .run-icon.pause,
.pause-toggle-btn .run-icon.play{ font-size:14px; }

.starfield-toggle-btn{
  --ring: rgba(255,255,255,.18);
  --gold:#ffd36a;
  --goldGlow: rgba(255,211,106,.55);
  --accent: var(--gold);
  --glow: var(--goldGlow);
  --size:26px;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  border:1px solid var(--ring);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:transform .12s ease, box-shadow .25s ease, border-color .25s ease;
}
.starfield-toggle-btn .core,
.starfield-toggle-btn .donut,
.starfield-toggle-btn .orbit{ display:none; }
.starfield-toggle-btn .ico{
  font-size:15px;
  color: rgba(255,255,255,.55);
  opacity:.92;
  transition: color .25s ease, text-shadow .25s ease;
  z-index:2;
}
.starfield-toggle-btn[aria-pressed="false"]::after{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  top:50%;
  height:2px;
  border-radius:999px;
  background:rgba(8,8,12,.94);
  box-shadow:0 0 2px rgba(0,0,0,.85);
  transform:translateY(-50%) rotate(-28deg);
  z-index:3;
  pointer-events:none;
}
.starfield-toggle-btn[aria-pressed="true"]{
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.14));
  box-shadow:
    0 12px 20px rgba(0,0,0,.72),
    inset 0 0 0 1px rgba(0,0,0,.30),
    0 0 16px var(--glow),
    0 0 24px rgba(255,211,106,.26);
}
.starfield-toggle-btn[aria-pressed="true"] .ico{
  color: var(--accent);
  text-shadow: 0 0 6px rgba(255,211,106,.55), 0 0 10px rgba(255,211,106,.30);
  opacity:1;
}

  #floorWrap{
    display:flex;
    flex:1 1 340px;
    flex-direction:column;
    align-items:flex-start;
    align-self:flex-start;
    margin-top:3px;
    margin-bottom:3px;
    gap:4px;
    min-width:0;
    padding-right:0;
    max-width:100%;
  }
  #floorWrap .floor-actions{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-start;
    gap:var(--floor-action-gap);
    white-space:nowrap;
    width:100%;
    max-width:100%;
  }
  #floorWrap .floor-actions #heroGold{
    margin-left:0;
    flex:0 0 auto;
  }
  #floorInfo{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    overflow:hidden;
    width:100%;
    max-width:100%;
    padding:3px 10px;
  }
  #floorInfo > div{
    width:100%;
    text-align:left;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    line-height:1.15;
  }
  #floorInfoTop{max-width:100%;}
  #floorInfoBottom{max-width:100%;font-size:0.82em;line-height:1.08;}

  .bonus{
    font-size:0.75em;
    margin-left:4px;
    white-space:nowrap;
  }

  .navi-zone{
    display:flex;
    padding:2px;
    flex:0 0 auto;
    align-self:stretch;
    align-items:center;
  }
  .navi-home{
    position:relative;
    width:72px;
    height:72px;
    display:block;
    border-radius:50%;
    background:radial-gradient(circle at 50% 50%, rgba(45,0,0,0.96) 0 26%, rgba(7,0,0,0.98) 52%, rgba(0,0,0,1) 100%);
    overflow:hidden;
    border:1px solid rgba(255,48,32,0.46);
    box-shadow:
      inset 0 0 0 1px rgba(255,210,180,0.10),
      inset 0 0 20px rgba(255,22,12,0.16),
      0 0 18px rgba(210,8,4,0.18);
    z-index:9;
  }
  #naviClock{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    z-index:0;
  }
  @keyframes naviClockBlink{
    0%,49%{opacity:0.5;}
    50%,100%{opacity:0;}
  }
  .navi-clock-digit,
  .navi-clock-segment{
    font-family:monospace;
    font-size:18px;
    color:rgba(116,42,190,0.72);
    text-shadow:
      0 0 8px rgba(127,44,210,0.95),
      0 0 18px rgba(72,0,130,0.82),
      0 0 28px rgba(38,0,74,0.72);
    opacity:0.5;
  }
  .navi-clock-segment{
    animation:naviClockBlink 1s steps(1) infinite;
  }
  .navi-home.idle-mode{
    animation:naviGlow 1s ease-in-out infinite alternate;
    box-shadow:0 0 12px rgba(255,28,12,0.64), inset 0 0 18px rgba(255,34,18,0.18);
  }
  .navi-home .home-spark{
    position:absolute;
    width:2px;
    height:2px;
    border-radius:50%;
    background:#ff2a16;
    pointer-events:none;
    box-shadow:0 0 4px 2px rgba(0,102,102,0.8);
  }
  .navi-home .home-coin{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#ffd700;
    pointer-events:none;
    box-shadow:0 0 8px 4px rgba(255,215,0,0.9);
  }
  .home-coin-transfer{
    position:fixed;
    width:6px;
    height:6px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 35%, #fff6bf 0%, #ffe27a 28%, #ffc837 60%, #cc8600 100%);
    box-shadow:0 0 10px 4px rgba(255,215,0,0.55);
    pointer-events:none;
    transform:translate(-50%, -50%);
    z-index:9000;
  }
  .navi-home .home-red,
  .navi-home .home-violet{
    display:none;
  }

#infoModal .modal-card{
  position:relative;
  background:#111;
  color:#fff;
  border:2px solid #3b82f6;
  text-align:left;
  padding-top:44px;

  /* allow it to grow to fit content */
  overflow: visible;
  max-height: none;
}

#infoModal{
  align-items:flex-start;
  padding-top:max(36px, calc(env(safe-area-inset-top, 0px) + 16px));
}

#infoModal #infoContent{
  display:flex;
  flex-direction:column;
  overflow: visible;
  max-height: none;
  min-height:0;
  padding-bottom:10px;
}

.info-theme-panel{
  position:absolute;
  top:4px;
  left:6px;
  display:flex;
  gap:8px;
  align-items:center;
  z-index:3;
  padding:5px 7px;
  border-color:rgba(37,99,235,.72);
}

.info-theme-btn{
  --orb-size:32px;
  width:var(--orb-size);
  height:var(--orb-size);
  min-width:var(--orb-size);
  min-height:var(--orb-size);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  padding:0;
  margin:0;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  font-size:16px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:
    0 10px 16px rgba(0,0,0,.62),
    inset 0 0 0 1px rgba(0,0,0,.36),
    0 0 16px rgba(120,210,255,.12);
  transition:box-shadow .18s ease, transform .12s ease;
}

.info-theme-btn .icon-glow{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  line-height:1;
  transform:none;
}

.info-theme-btn[data-ui-theme="mega"]{
  color:#93c5fd;
  border-color:rgba(147,197,253,.4);
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.24), rgba(255,255,255,.04) 58%),
    radial-gradient(circle at 75% 78%, rgba(96,165,250,.24), rgba(96,165,250,0) 70%),
    linear-gradient(180deg, rgba(20,32,71,.94), rgba(8,15,38,.95));
}
.info-theme-btn[data-ui-theme="mega"] .icon-glow{
  color:#60a5fa;
  text-shadow:0 0 8px rgba(96,165,250,.7),0 0 14px rgba(59,130,246,.5);
}

.info-theme-btn[data-ui-theme="obsidian"]{
  color:#e2e8f0;
  border-color:rgba(226,232,240,.42);
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.2), rgba(255,255,255,.04) 56%),
    radial-gradient(circle at 72% 80%, rgba(148,163,184,.22), rgba(148,163,184,0) 72%),
    linear-gradient(180deg, rgba(43,47,58,.92), rgba(15,17,24,.96));
}
.info-theme-btn[data-ui-theme="obsidian"] .icon-glow{
  color:#e2e8f0;
  text-shadow:0 0 8px rgba(226,232,240,.55),0 0 14px rgba(148,163,184,.42);
}

.info-theme-btn[data-ui-theme="current"]{
  color:#f5d0fe;
  border-color:rgba(217,70,239,.38);
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.24), rgba(255,255,255,.04) 56%),
    radial-gradient(circle at 74% 78%, rgba(217,70,239,.25), rgba(217,70,239,0) 72%),
    linear-gradient(180deg, rgba(66,25,98,.92), rgba(34,12,54,.95));
}
.info-theme-btn[data-ui-theme="current"] .icon-glow{
  color:#e879f9;
  text-shadow:0 0 8px rgba(232,121,249,.7),0 0 14px rgba(192,38,211,.46);
}

.info-theme-btn[data-ui-theme="sunforge"]{
  color:#fde68a;
  border-color:rgba(251,191,36,.48);
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.22), rgba(255,255,255,.03) 56%),
    radial-gradient(circle at 72% 78%, rgba(251,146,60,.36), rgba(251,146,60,0) 70%),
    linear-gradient(180deg, rgba(112,47,18,.95), rgba(48,15,6,.96));
}
.info-theme-btn[data-ui-theme="sunforge"] .icon-glow{
  color:#fbbf24;
  text-shadow:0 0 8px rgba(251,191,36,.75),0 0 14px rgba(249,115,22,.52);
}

.info-theme-btn[data-ui-theme="eldritch"]{
  color:#d8b4fe;
  border-color:rgba(168,85,247,.45);
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.2), rgba(255,255,255,.03) 55%),
    radial-gradient(circle at 72% 82%, rgba(45,212,191,.28), rgba(45,212,191,0) 72%),
    linear-gradient(180deg, rgba(25,16,54,.94), rgba(10,16,34,.96));
}
.info-theme-btn[data-ui-theme="eldritch"] .icon-glow{
  color:#5eead4;
  text-shadow:0 0 8px rgba(94,234,212,.7),0 0 14px rgba(129,140,248,.46);
}

.info-theme-btn[data-ui-theme="frog"]{
  color:#bbf7d0;
  border-color:rgba(134,239,172,.5);
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.2), rgba(255,255,255,.03) 55%),
    radial-gradient(circle at 74% 82%, rgba(14,116,144,.36), rgba(14,116,144,0) 72%),
    linear-gradient(180deg, rgba(18,52,34,.96), rgba(8,26,18,.98));
}
.info-theme-btn[data-ui-theme="frog"] .icon-glow{
  color:#86efac;
  text-shadow:0 0 8px rgba(134,239,172,.7),0 0 14px rgba(14,116,144,.5);
}

.info-theme-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 12px 20px rgba(0,0,0,.68),
    inset 0 0 0 1px rgba(0,0,0,.32),
    0 0 18px rgba(120,210,255,.22),
    0 0 14px rgba(160,120,255,.2);
}

.info-theme-btn.active,
.info-theme-btn[aria-pressed="true"]{
  border-color:rgba(255,255,255,.85);
  box-shadow:
    0 12px 22px rgba(0,0,0,.72),
    inset 0 0 0 1px rgba(255,255,255,.26),
    0 0 0 2px rgba(255,255,255,.2),
    0 0 18px rgba(120,210,255,.35);
}

body.ui-theme-mega{
  --key-input-glow:rgba(140,225,255,.82);
  --key-input-glow-core:rgba(244,241,208,.98);
  --text:#f4f1d0;
  --accent:#8ce1ff;
  --btn-bg:linear-gradient(180deg,#2f4e8f,#17264f);
  --btn-border:#9ac2ff;
  --game-frame-border:#9ac2ff;
}
body.starfield-disabled.ui-theme-mega{
  background-color:#0b1430;
  background-image:
    radial-gradient(125% 85% at 50% -12%, rgba(76,168,255,.35), rgba(76,168,255,0) 58%),
    radial-gradient(95% 80% at 10% 105%, rgba(67,56,202,.26), rgba(67,56,202,0) 62%),
    linear-gradient(180deg,#1b3173 0%, #10224d 52%, #09122b 100%);
}
body.ui-theme-mega .card,
body.ui-theme-mega .modal-card,
body.ui-theme-mega .stats-card{
  position:relative;
  border:2px solid #9ac2ff !important;
  border-radius:3px !important;
  background:
    linear-gradient(180deg, rgba(26,45,88,.96), rgba(16,28,61,.98)) !important;
  image-rendering:pixelated;
  box-shadow:
    inset 0 0 0 1px rgba(240,249,255,.14),
    inset 0 -10px 0 rgba(4,10,28,.5),
    0 0 0 1px rgba(8,15,38,.95),
    0 0 18px rgba(40,205,255,.18),
    0 14px 24px rgba(0,0,0,.5) !important;
}
body.ui-theme-mega .card::after,
body.ui-theme-mega .modal-card::after,
body.ui-theme-mega .stats-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(183,236,255,.06) 0,
    rgba(183,236,255,.06) 1px,
    rgba(4,12,26,0) 1px,
    rgba(4,12,26,0) 3px
  );
  mix-blend-mode:screen;
  opacity:.5;
}
body.ui-theme-mega .btn,
body.ui-theme-mega .pill{
  border:2px solid var(--btn-border) !important;
  border-radius:2px !important;
  color:#f8f4d8 !important;
  background:var(--btn-bg) !important;
  text-shadow:0 1px 0 rgba(8,16,34,.95), 0 0 6px rgba(140,225,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(240,249,255,.25),
    inset 0 -2px 0 rgba(7,14,31,.7),
    0 3px 0 rgba(5,10,24,.75),
    0 0 10px rgba(96,165,250,.25);
}

body.ui-theme-obsidian{
  --key-input-glow:rgba(196,181,253,.78);
  --key-input-glow-core:rgba(241,245,249,.96);
  --text:#f1f5f9;
  --accent:#c4b5fd;
  --game-frame-border:rgba(231,240,255,.38);
}
body.starfield-disabled.ui-theme-obsidian{
  background-color:#0b0c10;
  background-image:
    radial-gradient(120% 90% at 45% -16%, rgba(226,232,240,.12), rgba(226,232,240,0) 60%),
    radial-gradient(90% 72% at 80% 105%, rgba(148,163,184,.15), rgba(148,163,184,0) 63%),
    linear-gradient(180deg,#20242d 0%, #101218 50%, #06070a 100%);
}
body.ui-theme-obsidian .card,
body.ui-theme-obsidian .modal-card,
body.ui-theme-obsidian .stats-card{
  border-color:rgba(231,240,255,.38) !important;
  background:
    linear-gradient(145deg,rgba(18,18,23,.76),rgba(6,6,8,.9)),
    radial-gradient(135% 135% at 10% 5%,rgba(165,180,252,.13),transparent 52%),
    radial-gradient(145% 150% at 96% 112%,rgba(148,163,184,.14),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.02) 20%,rgba(255,255,255,0) 72%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.2),
    inset 0 -22px 36px rgba(0,0,0,.72),
    inset 0 0 18px rgba(255,255,255,.08),
    0 15px 28px rgba(0,0,0,.6),
    0 0 18px rgba(226,232,240,.14) !important;
  backdrop-filter:blur(10px) saturate(110%);
  -webkit-backdrop-filter:blur(10px) saturate(110%);
}
body.ui-theme-obsidian .btn,
body.ui-theme-obsidian .pill{
  border-color:rgba(226,232,240,.6) !important;
  color:#f8fafc !important;
  background:linear-gradient(180deg,rgba(36,41,48,.9),rgba(13,15,20,.95)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 14px rgba(0,0,0,.42);
}

body.ui-theme-sunforge{
  --key-input-glow:rgba(251,191,36,.84);
  --key-input-glow-core:rgba(255,247,230,.98);
  --text:#fff1d6;
  --accent:#fbbf24;
  --game-frame-border:rgba(251,191,36,.64);
}
body.starfield-disabled.ui-theme-sunforge{
  background-color:#2b0f08;
  background-image:
    radial-gradient(120% 88% at 54% -14%, rgba(251,191,36,.33), rgba(251,191,36,0) 54%),
    radial-gradient(88% 78% at 15% 105%, rgba(249,115,22,.3), rgba(249,115,22,0) 62%),
    linear-gradient(180deg,#6f2412 0%, #3a140b 48%, #170905 100%);
}
body.ui-theme-sunforge .card,
body.ui-theme-sunforge .modal-card,
body.ui-theme-sunforge .stats-card{
  border-color:rgba(251,191,36,.64) !important;
  background:
    radial-gradient(130% 120% at 12% 2%, rgba(255,219,121,.28), transparent 52%),
    radial-gradient(140% 150% at 94% 106%, rgba(249,115,22,.23), transparent 56%),
    linear-gradient(150deg,rgba(72,24,10,.95),rgba(25,9,6,.97)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,219,121,.22),
    inset 0 -20px 35px rgba(22,8,4,.75),
    0 0 18px rgba(251,146,60,.3),
    0 16px 28px rgba(0,0,0,.56) !important;
}
body.ui-theme-sunforge .btn,
body.ui-theme-sunforge .pill{
  border-color:rgba(251,191,36,.75) !important;
  color:#fff7e6 !important;
  background:linear-gradient(180deg,rgba(146,64,14,.92),rgba(84,29,14,.95)) !important;
  box-shadow:inset 0 1px 0 rgba(255,237,183,.24),0 8px 14px rgba(0,0,0,.46),0 0 10px rgba(249,115,22,.33);
}

body.ui-theme-eldritch{
  --key-input-glow:rgba(45,212,191,.82);
  --key-input-glow-core:rgba(199,210,254,.96);
  --text:#ecfeff;
  --accent:#2dd4bf;
  --game-frame-border:rgba(94,234,212,.52);
}
body.starfield-disabled.ui-theme-eldritch{
  background-color:#09101d;
  background-image:
    radial-gradient(125% 90% at 42% -14%, rgba(67,56,202,.28), rgba(67,56,202,0) 57%),
    radial-gradient(96% 74% at 88% 108%, rgba(45,212,191,.22), rgba(45,212,191,0) 64%),
    linear-gradient(180deg,#1a2452 0%, #0d2738 52%, #050c15 100%);
}
body.ui-theme-eldritch .card,
body.ui-theme-eldritch .modal-card,
body.ui-theme-eldritch .stats-card{
  border-color:rgba(94,234,212,.52) !important;
  background:
    radial-gradient(140% 140% at 9% 8%, rgba(129,140,248,.22), transparent 52%),
    radial-gradient(132% 150% at 88% 112%, rgba(45,212,191,.18), transparent 55%),
    linear-gradient(155deg,rgba(16,20,44,.94),rgba(7,20,28,.97)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(167,243,208,.22),
    inset 0 -20px 34px rgba(4,12,22,.78),
    0 0 18px rgba(45,212,191,.24),
    0 16px 28px rgba(0,0,0,.58) !important;
}
body.ui-theme-eldritch .btn,
body.ui-theme-eldritch .pill{
  border-color:rgba(94,234,212,.66) !important;
  color:#e6fffb !important;
  background:linear-gradient(180deg,rgba(67,56,202,.88),rgba(8,96,122,.94)) !important;
  box-shadow:inset 0 1px 0 rgba(199,210,254,.24),0 8px 14px rgba(0,0,0,.44),0 0 10px rgba(45,212,191,.28);
}

body.ui-theme-frog{
  --key-input-glow:rgba(134,239,172,.82);
  --key-input-glow-core:rgba(232,255,232,.97);
  --text:#e8ffe8;
  --accent:#86efac;
  --game-frame-border:rgba(134,239,172,.58);
}
body.starfield-disabled.ui-theme-frog{
  background-color:#0a1e15;
  background-image:
    radial-gradient(128% 90% at 48% -12%, rgba(74,222,128,.28), rgba(74,222,128,0) 57%),
    radial-gradient(96% 78% at 86% 106%, rgba(14,116,144,.24), rgba(14,116,144,0) 62%),
    linear-gradient(180deg,#1f5b34 0%, #123924 50%, #081910 100%);
}
body.ui-theme-frog .card,
body.ui-theme-frog .modal-card,
body.ui-theme-frog .stats-card{
  border-color:rgba(134,239,172,.58) !important;
  background:
    radial-gradient(138% 138% at 11% 6%, rgba(74,222,128,.2), transparent 50%),
    radial-gradient(145% 150% at 90% 108%, rgba(14,116,144,.24), transparent 56%),
    linear-gradient(154deg, rgba(12,45,26,.95), rgba(7,23,18,.98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(187,247,208,.2),
    inset 0 -22px 34px rgba(4,16,10,.78),
    0 0 18px rgba(74,222,128,.24),
    0 16px 28px rgba(0,0,0,.58) !important;
}
body.ui-theme-frog .btn,
body.ui-theme-frog .pill{
  border-color:rgba(134,239,172,.7) !important;
  color:#effff1 !important;
  background:linear-gradient(180deg, rgba(34,94,55,.92), rgba(9,52,64,.94)) !important;
  box-shadow:inset 0 1px 0 rgba(220,252,231,.22),0 8px 14px rgba(0,0,0,.44),0 0 10px rgba(14,116,144,.32);
}

.info-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:16px;
}

.info-tome-wrap{
  display:flex;
  justify-content:center;
  margin-top:8px;
  margin-bottom:6px;
}

#adventurersTomeBtn{
  min-width:460px;
  max-width:min(100%, 460px);
  min-height:76px;
  padding:22px 36px;
  border-radius:20px;
  font-family:'Times New Roman',serif;
  font-weight:700;
  letter-spacing:1.4px;
  font-size:2.15rem;
  color:#c9a46a;
  border:1px solid rgba(176,133,74,.86);
  background:linear-gradient(160deg,rgba(47,31,18,.94),rgba(28,18,10,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,227,170,.2),
    0 12px 24px rgba(0,0,0,.4),
    0 0 14px rgba(187,109,255,.6),
    0 0 32px rgba(151,71,255,.42);
}

#adventurersTomeBtn:hover{
  transform:translateY(-1px);
  color:#f2d39a;
  box-shadow:
    inset 0 1px 0 rgba(255,227,170,.28),
    0 16px 28px rgba(0,0,0,.46),
    0 0 18px rgba(199,134,255,.72),
    0 0 40px rgba(151,71,255,.56),
    0 0 0 1px rgba(176,133,74,.4);
}

#tomeModal .modal-card,
#tomeSectionModal .modal-card{
  width:min(720px,calc(100vw - 44px));
  max-height:min(86vh,760px);
}

.tome-title{
  margin:2px 0 12px;
  text-align:center;
  font-family:'Times New Roman',serif;
  letter-spacing:1.4px;
  color:#e2bf7d;
  text-shadow:0 0 8px rgba(0,0,0,.5);
}

.tome-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}

.tome-section-btn{
  text-align:center;
  padding:10px 12px;
}

.tome-book{
  display:flex;
  flex-direction:column;
  min-height:420px;
}

.tome-discovered{
  text-align:center;
  font-weight:700;
  letter-spacing:.6px;
  color:#f1d499;
  margin-bottom:10px;
}

.tome-page-body{
  flex:1 1 auto;
  border:1px solid rgba(148,163,184,.2);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(15,23,42,.45);
  overflow:auto;
}

.tome-page-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.tome-page-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:8px;background:rgba(30,41,59,.38)}

.tome-page-list .tome-item-group-btn{width:100%;text-align:left;font-family:'Times New Roman',serif;letter-spacing:.5px}

.tome-nav{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.tome-nav .btn{min-width:118px}
.tome-page-indicator{font-size:12px;color:#cbd5e1}

.modal-close-orb{
  position:absolute;
  top:10px;
  right:12px;
  width:30px;
  height:30px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:10px;
  cursor:pointer;
  display:grid;
  place-items:center;
  color:#e2e8f0;
  font-size:0;
  line-height:1;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  background:
    linear-gradient(150deg,rgba(15,23,42,.84),rgba(30,41,59,.62));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 8px 20px rgba(2,6,23,.35),
    0 0 0 1px rgba(15,23,42,.3);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
  z-index:3;
}
.modal-close-orb::before,
.modal-close-orb::after{
  content:"";
  position:absolute;
  width:13px;
  height:2px;
  border-radius:99px;
  background:currentColor;
  opacity:.9;
}
.modal-close-orb::before{transform:rotate(45deg)}
.modal-close-orb::after{transform:rotate(-45deg)}
.modal-close-orb:hover{
  transform:translateY(-1px) scale(1.03);
  color:#f8fafc;
  filter:saturate(1.06) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 10px 24px rgba(2,6,23,.42),
    0 0 0 1px rgba(148,163,184,.4);
}
.modal-close-orb:active{
  transform:translateY(0) scale(.95);
}
.modal-close-orb:focus-visible{
  outline:2px solid rgba(125,211,252,.95);
  outline-offset:2px;
}
#infoModal a{ color:#3b82f6; }

#infoModal .shadowgate-title{
  font-family:'Times New Roman',serif;
  font-weight:bold;
  letter-spacing:2px;
  margin-top:0;
  color:#654321;
  text-decoration:underline;
  text-decoration-color:#654321;
  font-size:2.5em;
  text-shadow:0 0 6px #8b0000,0 0 12px #000;
  text-align:center;
}

#infoModal ul{
  padding-left:20px;
  list-style-position:outside;
}

#infoModal li{
  margin-bottom:10px;
}

#infoModal p{
  margin-bottom:15px;
}


/* Background ripple effect */
body{ position:relative; }
.bg-ripple{
  position:fixed;
  pointer-events:none;
  left:0;top:0;
  width:20px;height:20px;
  border-radius:50%;
  background:rgba(191,0,255,0.75); /* bright UV purple */
  transform:translate(-50%,-50%) scale(0);
  /* animation:bg-ripple 0.8s ease-out forwards; */ /* background ripple disabled */
}
  @keyframes bg-ripple{
    to{
      transform:translate(-50%,-50%) scale(40);
      opacity:0;
    }
  }

  body, #naviLayer, #naviHome, #naviHome *, .svgbox {
    transition: filter 3s ease;
  }
  body.idle-mode { filter: brightness(0.75); }
  body.idle-mode #naviLayer,
  body.idle-mode #naviHome,
  body.idle-mode #naviHome * { filter: brightness(1.3333); }
  body.idle-mode .svgbox { filter: brightness(1.1333); }
  body.game-paused * {
    animation-play-state: paused !important;
  }
  body.game-paused #naviLayer,
  body.game-paused #naviLayer *,
  body.game-paused #naviHome,
  body.game-paused #naviHome *,
  body.game-paused .modal,
  body.game-paused .modal *,
  body.game-paused #shopModal,
  body.game-paused #shopModal *,
  body.game-paused #shopItemInfoModal,
  body.game-paused #shopItemInfoModal *,
  body.game-paused #infoModal,
  body.game-paused #infoModal *,
  body.game-paused #gphModal,
  body.game-paused #gphModal *,
  body.game-paused .btn.resume-pulse,
  body.game-paused .btn.resume-orb::before {
    animation-play-state: running !important;
  }
  body.game-paused .btn.resume-pulse{
    animation: none;
    box-shadow: none;
  }
  body.game-paused .btn.resume-orb::before{
    opacity:1;
  }

  /* Inventory readability tweaks */
  .gear-slot,
  .stashed{display:flex;flex-direction:column;gap:4px;font-size:10px;line-height:1.2;position:relative}
  .gear-slot.equipped{
    overflow:hidden;
    background:
      radial-gradient(circle at 50% 50%,rgba(8,12,20,.95) 0 46%,rgba(8,12,20,.78) 70%,transparent 100%),
      linear-gradient(135deg,color-mix(in srgb,var(--item-rarity) 34%,transparent),rgba(8,12,20,.82) 30% 70%,color-mix(in srgb,var(--item-rarity) 26%,transparent)),
      rgba(8,12,20,.9);
    box-shadow:
      0 10px 22px rgba(0,0,0,.45),
      inset 0 0 0 1px color-mix(in srgb,var(--item-rarity) 38%,transparent),
      inset 0 0 24px color-mix(in srgb,var(--item-rarity) 16%,transparent);
  }
  .gear-slot.equipped::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:
      linear-gradient(90deg,color-mix(in srgb,var(--item-rarity) 42%,transparent),transparent 20% 80%,color-mix(in srgb,var(--item-rarity) 42%,transparent)),
      linear-gradient(180deg,color-mix(in srgb,var(--item-rarity) 32%,transparent),transparent 24% 76%,color-mix(in srgb,var(--item-rarity) 32%,transparent));
    opacity:.72;
    mix-blend-mode:screen;
  }
  .gear-slot.equipped > *{position:relative;z-index:1}
  .gear-slot.equipped .item-header,
  .stash-grid .stashed.pickable .item-header{
    margin:14px 2px 2px;
    padding:5px 6px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    background:linear-gradient(180deg,rgba(2,6,14,.66),rgba(2,6,14,.36));
    box-shadow:inset 0 0 12px rgba(0,0,0,.28);
  }
  .stash-grid .stashed.pickable .stat-lines,
  .gear-slot.equipped .stat-lines{
    padding:3px 5px;
    border-radius:7px;
    background:rgba(2,6,14,.28);
  }
  .gear-slot .slot-name{font-size:9px;margin-bottom:2px}
  .gear-slot.pet .slot-name{font-size:8.5px}
  .gear-slot .small,
  .stashed .small{font-size:clamp(7.5px,0.85vw,9px);line-height:1.1}
  .item-name{font-size:9.5px}
  .item-header{display:flex;flex-direction:column;gap:2px;line-height:1.2;min-width:0;width:100%}
  .gear-slot .item-header,
  .stashed .item-header{font-size:clamp(8.5px,0.95vw,10px);padding:0 6px;box-sizing:border-box}
  .gear-slot .item-name,
  .stashed .item-name{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;font-size:inherit;line-height:1.2;width:100%;max-width:100%;padding:0 4px;margin:0;text-align:center}
  .gear-slot.pet .item-name{display:block;overflow:visible;-webkit-line-clamp:unset;white-space:normal;text-overflow:unset;max-height:none}
  .gear-slot .item-header .small,
  .stashed .item-header .small{align-self:flex-start}
  .stat-lines{display:flex;flex-direction:column;gap:2px}
  .gear-slot .stat-lines,
  .stashed .stat-lines{flex-grow:1}
  .gear-slot .stat-line,
  .stashed .stat-line{font-size:clamp(9px,1vw,11px);line-height:1.15;max-height:calc(1.15em * 3);overflow:hidden}
  .gear-slot .socket-row,
  .stashed .socket-row{margin-top:auto}



/* --- idle coin animation --- */

  .idle-coin{
    position:absolute;
    cursor:grab;
    z-index:9;
    transition:top linear;
    perspective:800px;
  }
  .idle-coin:active{cursor:grabbing;}
  .idle-coin-portal-flash{
    --idle-coin-gold: rgba(255,197,49,.44);
    --idle-coin-white: rgba(255,255,255,.56);
    position:absolute;
    left:0;
    top:0;
    width:44px;
    height:44px;
    pointer-events:none;
    z-index:10;
    transform:translate(-50%,-50%) scale(.16);
    transform-origin:50% 50%;
    border-radius:999px;
    background:radial-gradient(circle at 50% 50%, rgba(255,251,218,.62) 0%, rgba(255,223,118,.36) 30%, rgba(255,185,38,.2) 58%, rgba(245,158,11,0) 78%);
    box-shadow:0 0 12px rgba(255,221,112,.3),0 0 26px rgba(245,158,11,.2);
    filter:blur(1.8px) saturate(1.18) brightness(1.05);
    mix-blend-mode:screen;
    isolation:isolate;
    overflow:visible;
    animation:idleCoinPortalCircleBloom .76s cubic-bezier(.16,1,.3,1) forwards;
  }
  .idle-coin-light-pillar{
    position:absolute;
    left:50%;
    top:50%;
    width:42px;
    height:42px;
    pointer-events:none;
    z-index:-1;
    border-radius:999px;
    transform:translate(-50%,-50%) scale(.32);
    transform-origin:50% 50%;
    opacity:0;
    mix-blend-mode:screen;
    background:radial-gradient(circle, rgba(255,246,203,.3) 0%, rgba(255,218,104,.2) 42%, rgba(245,158,11,.1) 62%, rgba(245,158,11,0) 80%);
    box-shadow:0 0 24px rgba(255,218,104,.24),0 0 54px rgba(245,158,11,.16);
    filter:blur(4px) saturate(1.18) brightness(1.05);
    animation:idleCoinGoldenCircleBloom .76s cubic-bezier(.16,1,.3,1) forwards;
  }
  .idle-coin-light-pillar::before,
  .idle-coin-light-pillar::after{
    content:none;
  }
  .idle-coin-portal-flash::before,
  .idle-coin-portal-flash::after{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    border-radius:999px;
    pointer-events:none;
    mix-blend-mode:screen;
  }
  .idle-coin-portal-flash::before{
    width:34px;
    height:34px;
    transform:translate(-50%,-50%) scale(.35);
    opacity:0;
    background:radial-gradient(circle, rgba(255,253,231,.88) 0%, rgba(255,229,129,.58) 30%, rgba(255,191,36,.3) 56%, rgba(255,191,36,0) 76%);
    box-shadow:0 0 28px rgba(255,244,188,.42),0 0 62px rgba(255,191,36,.48);
    filter:blur(.45px);
    animation:idleCoinPortalSpark .76s ease-out forwards;
  }
  .idle-coin-portal-flash::after{
    width:56px;
    height:56px;
    transform:translate(-50%,-50%) scale(.28);
    opacity:0;
    background:radial-gradient(circle, rgba(255,248,210,.34) 0%, rgba(255,218,104,.26) 35%, rgba(245,158,11,.14) 60%, rgba(245,158,11,0) 80%);
    box-shadow:0 0 76px rgba(245,158,11,.44);
    filter:blur(4px);
    animation:idleCoinRayFall .76s cubic-bezier(.16,1,.3,1) forwards;
  }

  @keyframes idleCoinPortalCircleBloom{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.12);filter:blur(2.8px) saturate(1.08) brightness(1.12);}
    22%{opacity:.54;transform:translate(-50%,-50%) scale(.45);filter:blur(1.4px) saturate(1.12) brightness(1.08);}
    58%{opacity:.3;transform:translate(-50%,-50%) scale(1.05);filter:blur(2.6px) saturate(1.06) brightness(1.03);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.72);filter:blur(6px) saturate(1) brightness(1);}
  }
  @keyframes idleCoinGoldenCircleBloom{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.1);filter:blur(4px) saturate(1.06) brightness(1.08);}
    34%{opacity:.24;transform:translate(-50%,-50%) scale(.7);filter:blur(4px) saturate(1.08) brightness(1.04);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.65);filter:blur(8px) saturate(1) brightness(1);}
  }
  @keyframes idleCoinPortalFanToCone{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.18);filter:blur(4px) saturate(1.02) brightness(1.08);}
    28%{opacity:.46;transform:translate(-50%,-50%) scale(.72);filter:blur(2.2px) saturate(1.08) brightness(1.06);}
    64%{opacity:.24;transform:translate(-50%,-50%) scale(.96);filter:blur(3px) saturate(1.04) brightness(1.02);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.12);filter:blur(6px) saturate(1) brightness(1);}
  }
  @keyframes idleCoinPortalSpark{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.2);}
    24%{opacity:.42;transform:translate(-50%,-50%) scale(.62);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.05);}
  }
  @keyframes idleCoinRayFall{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.2);}
    30%{opacity:.24;transform:translate(-50%,-50%) scale(.64);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.02);}
  }
  @keyframes idleCoinGoldenCone{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.18);filter:blur(5px) saturate(1.04) brightness(1.08);}
    32%{opacity:.26;transform:translate(-50%,-50%) scale(.72);filter:blur(4px) saturate(1.06) brightness(1.04);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.08);filter:blur(7px) saturate(1) brightness(1);}
  }
  @keyframes idleCoinGroundGlimmer{
    0%{opacity:0;transform:translateX(-50%) scale(.2);}
    32%{opacity:.48;transform:translateX(-50%) scale(.88);}
    72%{opacity:.16;transform:translateX(-50%) scale(1.12);}
    100%{opacity:0;transform:translateX(-50%) scale(.76);}
  }
  .idle-coin--rest{
    perspective:none;
  }
  .idle-coin .coin-icon{
    position:relative;
    display:inline-block;
    width:.92em;
    height:.92em;
    margin-right:4px;
    border-radius:50%;
    border:1px solid rgba(255,221,112,.84);
    background:linear-gradient(115deg,#a76708 0%,#f2b722 30%,#ffe08a 50%,#f59e0b 69%,#8a4f06 100%);
    box-shadow:0 0 7px rgba(255,221,112,.64),0 0 15px rgba(245,158,11,.42);
    transform:rotateY(0deg);
    transform-style:preserve-3d;
    will-change:transform,filter;
    animation:coinTwist 4.8s linear infinite,coinGlow 1.8s ease-in-out infinite alternate;
  }
  .idle-coin--rest .coin-icon{
    animation:none;
    box-shadow:0 0 6px rgba(255,221,112,.48),0 0 12px rgba(245,158,11,.28);
    will-change:auto;
  }
  .fx-lite .idle-coin .coin-icon{
    animation:none;
    box-shadow:0 0 5px rgba(255,221,112,.48);
    will-change:auto;
  }
  .fx-lite .idle-coin--rest .coin-icon{
    box-shadow:0 0 4px rgba(255,215,0,0.38);
  }
  .idle-coin .coin-icon::before,
  .idle-coin .coin-icon::after{
    content:'';
    position:absolute;
    inset:0.12em;
    border-radius:50%;
    background:radial-gradient(circle at 30% 24%,#fff7cf 0%,#ffd978 38%,#e99f1a 74%,#985a08 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
    backface-visibility:hidden;
  }
  .idle-coin .coin-icon::after{
    transform:rotateY(180deg);
    background:radial-gradient(circle at 70% 26%,#fff5c8 0%,#ffd36b 38%,#d99114 74%,#854d07 100%);
  }
  @keyframes idleCoinPortalFanToCone{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.18);filter:blur(4px) saturate(1.02) brightness(1.08);}
    28%{opacity:.46;transform:translate(-50%,-50%) scale(.72);filter:blur(2.2px) saturate(1.08) brightness(1.06);}
    64%{opacity:.24;transform:translate(-50%,-50%) scale(.96);filter:blur(3px) saturate(1.04) brightness(1.02);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.12);filter:blur(6px) saturate(1) brightness(1);}
  }
  @keyframes idleCoinPortalSpark{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.18);}
    22%{opacity:.36;transform:translate(-50%,-50%) scale(.58);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.02);}
  }
  @keyframes idleCoinRayFall{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.2);}
    30%{opacity:.24;transform:translate(-50%,-50%) scale(.64);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.02);}
  }
  @keyframes idleCoinGoldenCone{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.18);filter:blur(5px) saturate(1.04) brightness(1.08);}
    32%{opacity:.26;transform:translate(-50%,-50%) scale(.72);filter:blur(4px) saturate(1.06) brightness(1.04);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.08);filter:blur(7px) saturate(1) brightness(1);}
  }
  @keyframes idleCoinGroundGlimmer{
    0%{opacity:0;transform:translateX(-50%) scale(.2);}
    32%{opacity:.48;transform:translateX(-50%) scale(.88);}
    72%{opacity:.16;transform:translateX(-50%) scale(1.12);}
    100%{opacity:0;transform:translateX(-50%) scale(.76);}
  }
  @keyframes coinGlow{
    from{box-shadow:0 0 6px rgba(255,221,112,.5),0 0 12px rgba(245,158,11,.28);}
    to{box-shadow:0 0 9px rgba(255,229,129,.72),0 0 20px rgba(245,158,11,.44);}
  }
  @keyframes coinTwist{
    0%,100%{transform:rotateY(0deg);filter:brightness(1.04) saturate(1.1);}
    25%{transform:rotateY(90deg);filter:brightness(.94) saturate(1.02);}
    50%{transform:rotateY(180deg);filter:brightness(1.05) saturate(1.1);}
    75%{transform:rotateY(270deg);filter:brightness(.94) saturate(1.02);}
  }
  .fx-lite .navi-home.idle-mode{
    animation:none;
    box-shadow:0 0 6px rgba(0,102,102,0.8);
  }
  .fx-lite .navi-home .home-spark,
  .fx-lite .navi-home .home-coin,
  .fx-lite .navi-home .home-red,
  .fx-lite .navi-home .home-violet{
    box-shadow:none;
  }
  body.ultra-minimal #starfield-bg,
  body.ultra-minimal #naviLayer,
  body.ultra-minimal #mapFog,
  body.ultra-minimal #mapOverlay,
  body.ultra-minimal .vignette{
    display:none !important;
  }
  body.ultra-minimal .starfield-toggle-btn{
    opacity:.45;
    filter:grayscale(1);
  }
  body.ultra-minimal .card,
  body.ultra-minimal .modal-card{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), inset 0 -8px 14px rgba(0,0,0,.38);
  }
  body.ultra-minimal *,
  body.ultra-minimal *::before,
  body.ultra-minimal *::after{
    text-shadow:none !important;
    filter:none !important;
  }

/* --- button polish --- */

  /* Unified button polish: subtle shadow + shared hover lift (matches Total DPS behavior) */
  button,
  .btn,
  .pill,
  [role="button"],
  .info-theme-btn,
  .modal-close-orb,
  .gBand,
  .potion-btn{
    box-shadow:0 2px 6px rgba(15,23,42,.28);
    transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
  }
  button:hover:not(:disabled),
  .btn:hover:not(:disabled),
  .pill:hover:not(:disabled),
  [role="button"]:hover,
  .info-theme-btn:hover,
  .modal-close-orb:hover,
  .gBand:hover,
  .potion-btn:hover:not(.disabled){
    transform:translateY(-2px);
  }

  #shopPill{
    border:1px solid #3b82f6;
    box-shadow:0 0 8px #3b82f6;
    color:#6d28d9;
    justify-content:center;
    transition:transform .15s ease,box-shadow .15s ease,color .15s ease;
  }
  #shopPill:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(15,23,42,.45),0 0 10px rgba(59,130,246,.7);
  }
  #shopPill.idle{
    border-color:#22c55e;
    box-shadow:0 0 8px #22c55e;
    color:#22c55e;
  }
  #shopPill.idle:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(15,23,42,.45),0 0 10px rgba(34,197,94,.65);
  }
  #dpsBtn,
  #gphBtn{
    transition:transform .15s ease,box-shadow .15s ease;
  }
  #dpsBtn{
    min-height:24px;
    padding:4px 9px;
    border-color:rgba(248,113,113,.58);
    color:#fecaca;
    background:linear-gradient(135deg,rgba(69,10,10,.82),rgba(15,23,42,.78));
    box-shadow:0 0 8px rgba(127,29,29,.38), inset 0 0 0 1px rgba(254,202,202,.08);
  }
  #dpsBtn:hover,
  #gphBtn:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(15,23,42,.45),0 0 10px rgba(148,163,184,.45);
  }
  #descendFloorBtn,
  #rerollFloorBtn,
  #gphBtn{
    border:1px solid #1e3a8a;
    box-shadow:0 0 6px #1e3a8a;
    justify-content:center;
    font-size:12px;
    margin-bottom:0;
  }
  #descendFloorBtn{
    color:#ffd700;
  }
  #rerollFloorBtn{
    color:#cbd5e1;
  }
  #gphBtn{
    color:#93c5fd;
    margin-left:auto;
  }
  #shopModal .modal-card{
    border:8px ridge #8b5a2b;
    background:#2e1a09;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    width:min(1040px,calc(100vw - 16px));
    min-width:min(460px,calc(100vw - 16px));
    max-width:min(1040px,calc(100vw - 16px));
    height:auto;
    max-height:calc(100vh - 16px);
    padding-top:40px;
    padding-bottom:12px;
    box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 18px 40px rgba(0,0,0,.65),0 0 25px rgba(56,189,248,.15);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  #shopModal{
    align-items:flex-start;
    justify-content:center;
    padding:8px;
    box-sizing:border-box;
  }
  #shopModal h3,
  #shopModal .close,
  #shopModal #shopItems{
    width:100%;
  }
  #shopModal #shopGold{
    width:auto;
    display:inline-flex;
    align-items:center;
  }
  #shopModal .modal-card::before,
  #shopModal .modal-card::after{
    content:none;
  }
  #shopModal .close{
    position:absolute;
    top:5px;
    right:10px;
    cursor:pointer;
  }
  #shopTitle.shop-title{
    --shop-title-top:#f7eaff;
    --shop-title-mid:#b983ff;
    --shop-title-low:#4f1688;
    --shop-title-deep:#17051f;
    --shop-title-stroke:#15051d;
    --shop-title-aura:rgba(178,92,255,.5);
    --shop-title-edge:rgba(245,226,255,.68);
    position:relative;
    isolation:isolate;
    display:block;
    box-sizing:border-box;
    width:min(100%,640px);
    margin:0 auto 7px;
    padding:2px 16px 5px;
    border:0;
    background:linear-gradient(180deg,var(--shop-title-top) 0%,var(--shop-title-mid) 34%,var(--shop-title-low) 70%,var(--shop-title-top) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(27px,4.15vw,54px);
    font-weight:900;
    line-height:.82;
    letter-spacing:.12em;
    text-align:center;
    text-transform:uppercase;
    -webkit-text-stroke:1.6px var(--shop-title-stroke);
    filter:drop-shadow(0 12px 10px rgba(0,0,0,.55));
    text-shadow:
      0 1px 0 var(--shop-title-edge),
      0 3px 0 var(--shop-title-deep),
      2px 5px 0 rgba(0,0,0,.54),
      0 0 12px var(--shop-title-aura),
      0 0 24px color-mix(in srgb,var(--shop-title-aura) 68%,transparent);
  }
  #shopTitle.shop-title::before{
    content:attr(data-text);
    position:absolute;
    inset:2px 16px 5px;
    z-index:-1;
    color:var(--shop-title-deep);
    -webkit-text-stroke:7px var(--shop-title-deep);
    text-shadow:0 0 16px rgba(0,0,0,.95),0 8px 18px rgba(0,0,0,.9);
  }
  #shopTitle.shop-title::after{
    content:"✦────────✦";
    display:block;
    margin-top:6px;
    background:linear-gradient(90deg,transparent 0%,var(--shop-title-edge) 20%,var(--shop-title-mid) 50%,var(--shop-title-edge) 80%,transparent 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-size:clamp(9px,1.2vw,14px);
    letter-spacing:.2em;
    line-height:1;
    -webkit-text-stroke:0;
    text-shadow:0 1px 0 var(--shop-title-deep),0 0 10px var(--shop-title-aura);
  }
  #shopTitle.shop-title--uv{
    --shop-title-top:#f2e4ff;
    --shop-title-mid:#a855f7;
    --shop-title-low:#401061;
    --shop-title-deep:#100318;
    --shop-title-stroke:#1b0628;
    --shop-title-aura:rgba(168,85,247,.58);
    --shop-title-edge:rgba(232,213,255,.76);
  }
  #shopTitle.shop-title--forest{
    --shop-title-top:#e7ffe8;
    --shop-title-mid:#4ade80;
    --shop-title-low:#14532d;
    --shop-title-deep:#04150c;
    --shop-title-stroke:#082113;
    --shop-title-aura:rgba(74,222,128,.48);
    --shop-title-edge:rgba(220,252,231,.78);
    letter-spacing:.095em;
  }
  #shopItems{
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:0 1 auto;
    min-height:0;
    max-height:calc(100vh - 120px);
    overflow-y:auto;
    overflow-x:hidden;
    margin-top:8px;
    padding-right:4px;
  }
  .shop-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin:0;
    padding:0;
    border:none;
    border-radius:0;
    background:none;
    box-shadow:none;
  }
  .shop-item .shop-label{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    flex:1;
    min-width:0;
    padding:7px 10px;
    border-radius:10px;
    border:1px solid rgba(198,134,76,.55);
    background:rgba(35,20,10,.62);
  }
  .shop-item .shop-count{font-weight:600;color:#facc15;white-space:nowrap;}
  .shop-item .shop-total{font-weight:600;color:#38bdf8;white-space:nowrap;}
  .shop-item .shop-actions{
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:0;
    padding:4px;
    border-radius:10px;
    background:rgba(24,14,8,.7);
  }
  .shop-item .price-token{
    display:inline-flex;
    align-items:center;
    padding:2px 8px;
    border-radius:999px;
    border:1px solid rgba(250,204,21,.55);
    background:rgba(17,10,5,.7);
  }
  .shop-item .shop-help-btn{
    width:22px;
    height:22px;
    min-width:22px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.8);
    background:#0f172a;
    color:#e2e8f0;
    font-weight:700;
    font-size:12px;
    line-height:1;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .shop-item .shop-help-btn:hover{border-color:#60a5fa;color:#dbeafe;box-shadow:0 0 6px rgba(96,165,250,.45);}
  .shop-item .shop-help-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:1px;}
  .shop-item button{margin-left:0;}
  .shop-item .shop-actions .buy{margin-left:0;}
  .shop-item.purchased{opacity:.6;}
  #purchasedItemsList{max-height:none;overflow:visible;}
  .shop-item.special{
    border:2px solid #9400D3;
    padding:4px;
    animation:naviPulse 1.5s ease-in-out infinite;
  }
  @keyframes naviGlow{from{box-shadow:0 0 5px rgba(130,0,0,0.8), inset 0 0 14px rgba(255,34,18,0.12);}to{box-shadow:0 0 18px rgba(255,36,18,0.85), inset 0 0 22px rgba(255,78,42,0.2);}}
  @keyframes naviPulse{
    0%,100%{border-color:#9400D3;box-shadow:0 0 5px #9400D3;}
    50%{border-color:#ba55d3;box-shadow:0 0 15px #ba55d3;}
  }


  .log-line:has(.idle-shop-open-log),
  .log-message:has(.idle-shop-open-log){
    display:block;
    width:100%;
  }

  .log .idle-shop-open-log{
    position:relative;
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:4px 0;
    padding:5px 7px;
    border:1px solid rgba(103, 70, 38, .88);
    border-radius:7px;
    color:#e8d7b5;
    background:
      linear-gradient(180deg, rgba(27, 20, 14, .96), rgba(15, 11, 8, .98)),
      repeating-linear-gradient(90deg, rgba(99, 66, 35, .22) 0 1px, rgba(24, 16, 10, .22) 1px 7px);
    box-shadow:
      inset 0 0 0 1px rgba(196, 154, 94, .08),
      inset 0 10px 18px rgba(88, 58, 29, .18),
      inset 0 -16px 20px rgba(0, 0, 0, .42),
      0 1px 0 rgba(0, 0, 0, .55);
    overflow:hidden;
  }
  .log .idle-shop-open-log::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 14% 20%, rgba(43, 74, 48, .2), transparent 34%),
      linear-gradient(90deg, transparent, rgba(130, 92, 51, .08), transparent);
    pointer-events:none;
  }
  .log .idle-shop-open-log__sign{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    box-sizing:border-box;
    border:1px solid rgba(217, 195, 154, .28);
    border-radius:5px;
    padding:3px 8px;
    background:rgba(8, 6, 5, .22);
    font:inherit;
    font-weight:800;
    font-size:12px;
    line-height:1.2;
    letter-spacing:.06em;
    color:#d9c39a;
    text-align:center;
    text-transform:uppercase;
    text-shadow:0 1px 0 rgba(0, 0, 0, .82);
    cursor:pointer;
  }
  .log .idle-shop-open-log--idle .idle-shop-open-log__sign{
    border-color:rgba(74, 222, 128, .72);
    box-shadow:0 0 6px rgba(74, 222, 128, .58);
  }
  .log .idle-shop-open-log--regular .idle-shop-open-log__sign{
    border-color:rgba(109, 40, 217, .76);
    box-shadow:0 0 6px rgba(76, 29, 149, .68);
  }
  .log .idle-shop-open-log__sign:hover,
  .log .idle-shop-open-log__sign:focus-visible{
    transform:translateY(-1px);
    outline:none;
  }

  /* Premium hero inventory equipment board: exactly 9 roomy 200px RPG slots. */
  #modal .modal-card.modal-hero-view .inventory-main > .grid-gear{
    --hero-gear-slot-size:200px;
    --hero-gear-slot-gap:6px;
    flex:0 0 auto;
    display:grid;
    grid-template-columns:repeat(3,var(--hero-gear-slot-size));
    grid-auto-rows:var(--hero-gear-slot-size);
    gap:var(--hero-gear-slot-gap);
    width:calc((var(--hero-gear-slot-size) * 3) + (var(--hero-gear-slot-gap) * 2));
    max-width:none;
    min-width:0;
    padding:8px;
    margin:0;
    justify-content:center;
    align-content:start;
    justify-items:stretch;
    align-items:stretch;
    border:1px solid rgba(216,180,254,.22);
    border-radius:18px;
    background:
      radial-gradient(circle at 50% -18%,rgba(245,158,11,.16),transparent 38%),
      linear-gradient(135deg,rgba(30,20,52,.58),rgba(5,8,17,.82) 46%,rgba(18,13,31,.7));
    box-shadow:
      0 18px 42px rgba(0,0,0,.48),
      inset 0 0 0 1px rgba(255,255,255,.05),
      inset 0 0 34px rgba(126,34,206,.13);
    box-sizing:content-box;
  }
  #modal .modal-card.modal-hero-view .inventory-main > .grid-gear .gear-slot{
    width:150px;
    height:150px;
    min-width:150px;
    max-width:150px;
    min-height:150px;
    max-height:150px;
    padding:9px;
    gap:5px;
    overflow:hidden;
    border-width:1px;
    border-radius:16px;
    background:
      linear-gradient(180deg,rgba(255,255,255,.055),transparent 24%),
      radial-gradient(circle at 50% 42%,rgba(30,41,59,.84),rgba(6,9,18,.95) 68%);
    box-shadow:
      0 12px 24px rgba(0,0,0,.42),
      inset 0 0 0 1px rgba(255,255,255,.045),
      inset 0 -18px 28px rgba(0,0,0,.28);
  }
  #modal .modal-card.modal-hero-view .inventory-main > .grid-gear .gear-slot::after{
    content:"";
    position:absolute;
    inset:5px;
    border-radius:12px;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.055);
    box-shadow:inset 0 0 18px rgba(0,0,0,.42);
  }
  #modal .modal-card.modal-hero-view .inventory-main > .grid-gear .gear-slot.equipped{
    border-color:color-mix(in srgb,var(--item-rarity) 72%,rgba(255,255,255,.16));
    background:
      radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--item-rarity) 22%,transparent),transparent 44%),
      linear-gradient(145deg,color-mix(in srgb,var(--item-rarity) 28%,rgba(8,12,20,.92)),rgba(7,10,19,.95) 42% 74%,color-mix(in srgb,var(--item-rarity) 18%,rgba(4,7,13,.95)));
    box-shadow:
      0 13px 26px rgba(0,0,0,.46),
      0 0 18px color-mix(in srgb,var(--item-rarity) 24%,transparent),
      inset 0 0 0 1px color-mix(in srgb,var(--item-rarity) 34%,transparent),
      inset 0 0 24px color-mix(in srgb,var(--item-rarity) 15%,transparent);
  }
  #modal .modal-card.modal-hero-view .inventory-main > .grid-gear .gear-slot:hover{
    transform:translateY(-3px);
    z-index:3;
    box-shadow:
      0 18px 34px rgba(0,0,0,.55),
      0 0 22px color-mix(in srgb,var(--item-rarity,rgba(96,165,250,.9)) 28%,transparent),
      inset 0 0 0 1px rgba(255,255,255,.08);
  }
  #modal .modal-card.modal-hero-view .inventory-main > .grid-gear .slot-name{
    align-self:center;
    max-width:104px;
    margin:0 auto 1px;
    padding:3px 9px;
    border:1px solid rgba(216,180,254,.2);
    border-radius:999px;
    color:#e9d5ff;
    background:linear-gradient(180deg,rgba(76,29,149,.46),rgba(15,23,42,.52));
    box-shadow:0 0 10px rgba(126,34,206,.16),inset 0 0 8px rgba(255,255,255,.04);
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
    line-height:1.1;
    text-align:center;
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #modal .modal-card.modal-hero-view .inventory-main > .grid-gear .gear-slot:not(.equipped){
    align-items:center;
    justify-content:center;
    color:#94a3b8;
    border-style:solid;
    border-color:rgba(148,163,184,.24);
  }
  #modal .modal-card.modal-hero-view .inventory-main > .grid-gear .gear-slot:not(.equipped) .slot-name{
    position:absolute;
    top:9px;
    left:50%;
    transform:translateX(-50%);
  }
  #modal .modal-card.modal-hero-view .inventory-main > .grid-gear .gear-slot:not(.equipped) > div:not(.slot-name){
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px dashed rgba(216,180,254,.22);
    border-radius:50%;
    background:radial-gradient(circle,rgba(126,34,206,.12),rgba(2,6,14,.16) 64%,transparent 65%);
    color:#c4b5fd;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.78 !important;
  }

/* Refined equipped item slots: dark fantasy card, top name, bottom sockets. */
.gear-slot.equipped{
  --slot-edge:color-mix(in srgb,var(--item-rarity) 58%,rgba(226,232,240,.22));
  justify-content:flex-start;
  border-width:1px!important;
  border-color:var(--slot-edge)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),transparent 18%),
    radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--item-rarity) 10%,transparent),transparent 36%),
    linear-gradient(145deg,rgba(12,18,30,.96),rgba(4,7,14,.98) 58%,rgba(9,13,22,.96));
  box-shadow:
    0 12px 24px rgba(0,0,0,.48),
    0 0 10px color-mix(in srgb,var(--item-rarity) 14%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--item-rarity) 28%,rgba(255,255,255,.04)),
    inset 0 0 14px color-mix(in srgb,var(--item-rarity) 12%,transparent)!important;
}
.gear-slot.equipped .slot-name{display:none!important}
.gear-slot.equipped::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--item-rarity) 45%,transparent),transparent 18% 82%,color-mix(in srgb,var(--item-rarity) 45%,transparent)) top/100% 1px no-repeat,
    linear-gradient(90deg,color-mix(in srgb,var(--item-rarity) 32%,transparent),transparent 22% 78%,color-mix(in srgb,var(--item-rarity) 32%,transparent)) bottom/100% 1px no-repeat,
    linear-gradient(180deg,color-mix(in srgb,var(--item-rarity) 34%,transparent),transparent 20% 80%,color-mix(in srgb,var(--item-rarity) 28%,transparent)) left/1px 100% no-repeat,
    linear-gradient(180deg,color-mix(in srgb,var(--item-rarity) 34%,transparent),transparent 20% 80%,color-mix(in srgb,var(--item-rarity) 28%,transparent)) right/1px 100% no-repeat;
  opacity:.82;
  mix-blend-mode:screen;
}
.gear-slot.equipped::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:10px;
  pointer-events:none;
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--item-rarity) 42%,transparent),transparent 22px),
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--item-rarity) 34%,transparent),transparent 22px),
    radial-gradient(circle at 0 100%,color-mix(in srgb,var(--item-rarity) 26%,transparent),transparent 20px),
    radial-gradient(circle at 100% 100%,color-mix(in srgb,var(--item-rarity) 26%,transparent),transparent 20px);
  opacity:.42;
}
.gear-slot.equipped .item-header{
  margin:2px 20px 3px;
  padding:0;
  min-height:28px;
  align-items:center;
  justify-content:flex-start;
  border:0;
  background:transparent;
  box-shadow:none;
}
.gear-slot.equipped .item-name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  max-height:2.35em;
  overflow:hidden;
  font-size:clamp(10px,1.05vw,12px);
  font-weight:900;
  line-height:1.15;
  letter-spacing:.015em;
  text-align:center;
  text-shadow:0 1px 2px #000,0 0 7px color-mix(in srgb,currentColor 48%,transparent);
}
.gear-slot.equipped .item-header .small{
  align-self:center;
  font-size:8px;
  opacity:.78;
  text-shadow:0 1px 2px #000;
}
.gear-slot.equipped .stat-lines{
  margin:auto 4px 18px;
  flex:0 1 auto;
  padding:4px 6px;
  border:1px solid rgba(226,232,240,.055);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(2,6,14,.46),rgba(2,6,14,.24));
  box-shadow:inset 0 0 10px rgba(0,0,0,.2);
}
.gear-slot.equipped .stat-line{
  font-family:var(--font-pixel,inherit);
  font-size:clamp(8.5px,.9vw,10px);
  line-height:1.12;
  color:#dbeafe;
  opacity:.9;
}
.gear-slot.equipped .socket-row{
  position:absolute;
  left:50%;
  bottom:5px;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:auto;
  margin:0;
  padding:0;
}
.socket{
  width:16px;
  height:16px;
  border-radius:50%;
  border:1px solid rgba(148,163,184,.24);
  background:radial-gradient(circle at 42% 38%,rgba(15,23,42,.8),rgba(0,0,0,.92) 68%);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.95),0 1px 2px rgba(255,255,255,.05);
  color:#64748b;
  font-size:0;
}
.socket.empty{opacity:1;color:transparent}
.socket.empty::after{content:"";width:5px;height:5px;border-radius:50%;background:rgba(2,6,14,.9);box-shadow:inset 0 0 3px #000}
.socket.with-gem{
  background:radial-gradient(circle at 35% 30%,#fff 0 8%,currentColor 28%,rgba(0,0,0,.84) 78%);
  border-color:color-mix(in srgb,currentColor 72%,#fff 12%);
  box-shadow:0 0 7px color-mix(in srgb,currentColor 42%,transparent),inset 0 0 5px rgba(255,255,255,.3);
}
.socket.with-gem .gem-icon{font-size:9px;color:#fff;text-shadow:0 0 4px currentColor,0 1px 2px #000}
.gear-slot:has(.equipped){
  border-width:1px!important;
  border-color:var(--slot-edge)!important;
  box-shadow:0 12px 24px rgba(0,0,0,.48),0 0 10px color-mix(in srgb,var(--item-rarity) 14%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--item-rarity) 28%,rgba(255,255,255,.04))!important;
}
.gear-slot:has(.socket.with-gem){
  box-shadow:0 12px 24px rgba(0,0,0,.48),0 0 10px color-mix(in srgb,var(--item-rarity) 14%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--item-rarity) 28%,rgba(255,255,255,.04))!important;
}
#modal .modal-card.modal-hero-view .inventory-main > .grid-gear .gear-slot.equipped{
  border-color:var(--slot-edge)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 18%),
    radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--item-rarity) 11%,transparent),transparent 36%),
    linear-gradient(145deg,rgba(12,18,30,.97),rgba(4,7,14,.99) 58%,rgba(9,13,22,.97));
  box-shadow:0 13px 25px rgba(0,0,0,.5),0 0 11px color-mix(in srgb,var(--item-rarity) 15%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--item-rarity) 30%,rgba(255,255,255,.04)),inset 0 0 14px color-mix(in srgb,var(--item-rarity) 12%,transparent)!important;
}

/* Unified 200px fantasy item cards for stash, hero gear, pet gear, and pickup ghosts. */
:root{--item-card-size:200px;--gem-card-height:calc(var(--item-card-size) / 2);}
.stashed,
.gear-slot.equipped,
.drag-ghost.stashed,
.drag-ghost.gear-slot.equipped{
  width:var(--item-card-size)!important;
  height:var(--item-card-size)!important;
  min-width:var(--item-card-size)!important;
  max-width:var(--item-card-size)!important;
  min-height:var(--item-card-size)!important;
  max-height:var(--item-card-size)!important;
  flex:0 0 var(--item-card-size)!important;
  padding:9px!important;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:16px;
}
.grid-gear .gear-slot,
.grid-gear-pet .gear-slot,
#modal .modal-card.modal-hero-view .inventory-main > .grid-gear .gear-slot{
  width:var(--item-card-size)!important;
  height:var(--item-card-size)!important;
  min-width:var(--item-card-size)!important;
  max-width:var(--item-card-size)!important;
  min-height:var(--item-card-size)!important;
  max-height:var(--item-card-size)!important;
  box-sizing:border-box;
}
.grid-gear-pet{grid-template-columns:repeat(auto-fill,var(--item-card-size));gap:6px;justify-items:center;align-items:start;}
.gear-slot.pet{min-width:var(--item-card-size)!important;max-width:var(--item-card-size)!important;padding:9px!important;}
.stash-grid{grid-template-columns:repeat(auto-fill,minmax(var(--item-card-size),var(--item-card-size)));gap:6px;justify-content:center;justify-items:center;align-items:start;}
.stash-item{width:var(--item-card-size);min-width:var(--item-card-size);max-width:var(--item-card-size);height:auto;align-items:center;}
.stash-grid .stashed{width:var(--item-card-size)!important;flex:0 0 var(--item-card-size)!important;}
.stashed.pickable,
.gear-slot.equipped{
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),transparent 18%),
    radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--item-rarity) 7%,transparent),transparent 34%),
    linear-gradient(145deg,rgba(12,18,30,.97),rgba(4,7,14,.99) 58%,rgba(9,13,22,.97));
  box-shadow:
    0 12px 24px rgba(0,0,0,.48),
    inset 0 0 0 1px color-mix(in srgb,var(--item-rarity) 24%,rgba(255,255,255,.035)),
    inset 0 0 8px color-mix(in srgb,var(--item-rarity) 10%,transparent)!important;
}
.gear-slot.equipped::before,
.stash-grid .stashed.pickable::before,
.drag-ghost.stashed::before{
  inset:3px;
  border-radius:12px;
  background:none;
  border:1px solid color-mix(in srgb,var(--item-rarity) 34%,transparent);
  box-shadow:inset 0 0 7px color-mix(in srgb,var(--item-rarity) 18%,transparent);
  opacity:.7;
}
.gear-slot.equipped::after,
#modal .modal-card.modal-hero-view .inventory-main > .grid-gear .gear-slot::after{opacity:.18;}
.gear-slot.equipped .item-header,
.stash-grid .stashed.pickable .item-header,
.drag-ghost.stashed .item-header{
  position:relative;
  z-index:1;
  min-height:31px;
  margin:0 17px 2px!important;
  padding:0!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:1px;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:center;
}
.gear-slot .item-name,
.gear-slot.equipped .item-name,
.gear-slot.pet .item-name,
.stashed .item-name,
.stash-grid .stashed.pickable .item-name{
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  line-clamp:2;
  -webkit-box-orient:vertical;
  width:100%;
  max-width:100%;
  max-height:2.35em!important;
  overflow:hidden!important;
  white-space:normal!important;
  word-break:break-word;
  padding:0 2px!important;
  margin:0 auto!important;
  font-size:clamp(10px,1.05vw,12px)!important;
  font-weight:900;
  line-height:1.15!important;
  letter-spacing:.015em;
  text-align:center!important;
  text-overflow:clip!important;
  text-shadow:0 1px 2px #000,0 0 6px color-mix(in srgb,currentColor 38%,transparent);
}
.gear-slot .item-header .small,
.stashed .item-header .small{align-self:center!important;text-align:center;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gear-slot.equipped .stat-lines,
.stash-grid .stashed.pickable .stat-lines,
.drag-ghost.stashed .stat-lines{margin:2px 4px 21px!important;flex:1 1 auto;min-height:0;overflow:hidden;}
.gear-slot .socket-row,
.gear-slot.equipped .socket-row,
.stashed .socket-row,
.stash-grid .stashed.pickable .socket-row{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:6px!important;
  transform:translateX(-50%)!important;
  z-index:2;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px;
  width:auto!important;
  margin:0!important;
  padding:0!important;
}
#modal .modal-card.modal-hero-view .inventory-main > .grid-gear .gear-slot:not(.equipped) .slot-name{
  left:6px;
  right:6px;
  top:8px;
  transform:none;
  width:auto;
  max-width:none;
  margin:0;
  padding:4px 7px;
  box-sizing:border-box;
  border-radius:999px;
  white-space:nowrap;
}
.drag-ghost.stashed,
.drag-ghost.gear-slot.equipped{padding:9px!important;border:1px solid var(--item-rarity,var(--drag-ghost-border))!important;opacity:.96;}
.gear-slot:not(.equipped){position:relative;align-items:center;justify-content:center;}
.gear-slot:not(.equipped) .slot-name{
  position:absolute;
  left:6px;
  right:6px;
  top:8px;
  width:auto;
  max-width:none;
  margin:0;
  padding:4px 7px;
  box-sizing:border-box;
  border:1px solid rgba(216,180,254,.22);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(76,29,149,.48),rgba(15,23,42,.56));
  box-shadow:0 0 10px rgba(126,34,206,.16),inset 0 0 8px rgba(255,255,255,.04);
  color:#e9d5ff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1.1;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Hero loot inventory fit and item-card polish. */
#modal .modal-card.modal-hero-view{
  width:fit-content;
  max-width:min(98vw,calc(var(--modal-max-width,1460px) + var(--inventory-outer-portrait-size,68px) + var(--inventory-outer-portrait-gap,10px)));
  overflow-x:auto;
}
#modal .modal-card.modal-hero-view .inventory-layout,
#modal .modal-card.modal-hero-view .inventory-main{
  width:max-content;
  max-width:none;
}
#modal .modal-card.modal-hero-view .stash-grid{
  grid-template-columns:repeat(6,var(--item-card-size));
  grid-auto-rows:auto;
  gap:6px;
  justify-content:start;
  justify-items:stretch;
  align-items:start;
}
#modal .modal-card.modal-hero-view .stash-item{
  width:var(--item-card-size);
  min-width:var(--item-card-size);
  max-width:var(--item-card-size);
}
.stashed.pickable,
.gear-slot.equipped,
.drag-ghost.stashed,
.drag-ghost.gear-slot.equipped{
  background:
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0 58%,color-mix(in srgb,var(--item-rarity) 10%,transparent) 78%,color-mix(in srgb,var(--item-rarity) 22%,transparent) 100%),
    linear-gradient(145deg,rgba(9,13,22,.98),rgba(2,4,9,.995) 52%,rgba(8,11,18,.98));
  box-shadow:
    0 12px 24px rgba(0,0,0,.5),
    inset 0 0 0 1px color-mix(in srgb,var(--item-rarity) 42%,rgba(255,255,255,.035)),
    inset 0 0 6px color-mix(in srgb,var(--item-rarity) 12%,transparent)!important;
}
.gear-slot.equipped::before,
.stash-grid .stashed.pickable::before,
.drag-ghost.stashed::before,
.drag-ghost.gear-slot.equipped::before{
  inset:2px;
  border:1px solid color-mix(in srgb,var(--item-rarity) 42%,transparent);
  box-shadow:inset 0 0 5px color-mix(in srgb,var(--item-rarity) 18%,transparent),0 0 5px color-mix(in srgb,var(--item-rarity) 18%,transparent);
  background:none!important;
  opacity:.8;
}
.gear-slot.equipped .item-header,
.stash-grid .stashed.pickable .item-header,
.drag-ghost.stashed .item-header{
  margin:0 14px 4px!important;
  min-height:34px;
  justify-content:flex-start;
}
.socket{
  width:24px!important;
  height:24px!important;
  border:2px dotted color-mix(in srgb,var(--item-rarity,#a78bfa) 74%,#f8fafc 12%)!important;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.16) 0 2px,transparent 3px),
    radial-gradient(circle at 50% 50%,rgba(2,6,14,.96),rgba(0,0,0,.98) 68%);
  box-shadow:
    0 0 6px color-mix(in srgb,var(--item-rarity,#a78bfa) 34%,transparent),
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 7px rgba(0,0,0,.95);
}
.socket.empty::after{
  width:8px;
  height:8px;
  background:color-mix(in srgb,var(--item-rarity,#a78bfa) 34%,rgba(255,255,255,.18));
  box-shadow:0 0 7px color-mix(in srgb,var(--item-rarity,#a78bfa) 48%,transparent),inset 0 0 3px #000;
}
.socket.with-gem .gem-icon{font-size:12px;}
.gear-slot .socket-row,
.gear-slot.equipped .socket-row,
.stashed .socket-row,
.stash-grid .stashed.pickable .socket-row,
.drag-ghost.stashed .socket-row{gap:7px;bottom:7px!important;}

/* Keep held and equipped item cards visually identical, clear, and free of pickup-only controls. */
.gear-slot.equipped.pickable,
.drag-ghost.stashed{
  opacity:1!important;
}
.gear-slot.equipped.pickable::after,
.drag-ghost.stashed::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
}
.gear-slot.equipped.pickable::before,
.drag-ghost.stashed::before{
  mix-blend-mode:normal!important;
}
.drag-ghost .lock-toggle{
  display:none!important;
}


/* Final item-card unification: equipped gear and stash cards use the same
   clean held-item card treatment with no white/gray pickup overlay. */
.stashed.pickable,
.gear-slot.equipped,
.drag-ghost.stashed,
.drag-ghost.gear-slot.equipped{
  background:
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0 58%,color-mix(in srgb,var(--item-rarity) 10%,transparent) 78%,color-mix(in srgb,var(--item-rarity) 22%,transparent) 100%),
    linear-gradient(145deg,rgba(9,13,22,.98),rgba(2,4,9,.995) 52%,rgba(8,11,18,.98))!important;
  border-color:color-mix(in srgb,var(--item-rarity) 76%,rgba(255,255,255,.08))!important;
  box-shadow:
    0 12px 24px rgba(0,0,0,.5),
    0 0 14px color-mix(in srgb,var(--item-rarity) 24%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--item-rarity) 42%,rgba(255,255,255,.035)),
    inset 0 0 6px color-mix(in srgb,var(--item-rarity) 12%,transparent)!important;
  opacity:1!important;
}
.gear-slot.equipped::after,
.stash-grid .stashed.pickable::after,
.drag-ghost.stashed::after,
.drag-ghost.gear-slot.equipped::after{
  content:none!important;
  display:none!important;
}
.gear-slot.equipped::before,
.stash-grid .stashed.pickable::before,
.drag-ghost.stashed::before,
.drag-ghost.gear-slot.equipped::before{
  mix-blend-mode:normal!important;
  background:none!important;
}
.socket.with-gem{
  border-color:color-mix(in srgb,currentColor 76%,#f8fafc 10%)!important;
  background:
    radial-gradient(circle at 38% 28%,rgba(255,255,255,.78),rgba(255,255,255,.16) 18%,transparent 35%),
    radial-gradient(circle at 50% 56%,color-mix(in srgb,currentColor 72%,#ffffff 8%),color-mix(in srgb,currentColor 34%,#020617) 52%,rgba(0,0,0,.98) 78%)!important;
  box-shadow:
    0 0 8px color-mix(in srgb,currentColor 70%,transparent),
    0 0 0 1px rgba(255,255,255,.07),
    inset 0 0 8px rgba(0,0,0,.85)!important;
}

/* Clean item-card layout pass: remove stash sheen and pin equipped stats neatly. */
.stash-grid .stashed.pickable,
.drag-ghost.stashed{
  background:linear-gradient(145deg,rgba(8,12,20,.99),rgba(2,4,9,1) 52%,rgba(7,10,17,.99))!important;
  box-shadow:
    0 12px 24px rgba(0,0,0,.5),
    0 0 10px color-mix(in srgb,var(--item-rarity) 18%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--item-rarity) 38%,rgba(255,255,255,.02))!important;
}
.stashed.pickable::before,
.drag-ghost.stashed::before{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  box-shadow:none!important;
}
.gear-slot.equipped{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
  padding:7px!important;
}
.gear-slot.equipped .item-header{
  flex:0 0 auto!important;
  width:100%!important;
  min-height:28px!important;
  max-height:28px!important;
  margin:2px 0 0!important;
  padding:0 4px!important;
  box-sizing:border-box!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
.gear-slot.equipped .item-name{
  width:100%!important;
  max-width:100%!important;
  padding:0 1px!important;
  -webkit-line-clamp:2!important;
  line-clamp:2!important;
  max-height:28px!important;
  line-height:14px!important;
  font-size:clamp(10px,1vw,12px)!important;
  overflow:hidden!important;
  overflow-wrap:normal!important;
  word-break:keep-all!important;
  line-break:auto!important;
  hyphens:none!important;
  text-align:center!important;
}
.gear-slot.equipped .item-header .small{
  display:none!important;
}
.gear-slot.equipped .stat-lines{
  align-self:stretch!important;
  flex:0 0 auto!important;
  width:auto!important;
  max-width:none!important;
  min-height:0!important;
  margin:0 3px 36px!important;
  padding:6px 7px 7px!important;
  box-sizing:border-box!important;
  border:1px solid color-mix(in srgb,var(--item-rarity) 34%,rgba(148,163,184,.18))!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,rgba(2,6,14,.82),rgba(2,6,14,.58))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 0 12px rgba(0,0,0,.34)!important;
  overflow:hidden!important;
}
.gear-slot.equipped .stat-line{
  display:block!important;
  width:100%!important;
  max-height:none!important;
  overflow:hidden!important;
  text-align:left!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  line-height:1.22!important;
  margin:0!important;
}

/* Final drag/drop visibility overrides: strong socket and gear-slot targeting without stash haze. */
.stashed.pickable::before,
.stashed.pickable::after,
.stash-grid .stashed.pickable::before,
.stash-grid .stashed.pickable::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  box-shadow:none!important;
}

.gear-slot.equipped{
  padding-top:4px!important;
}
.gear-slot.equipped .item-header{
  margin:0 0 1px!important;
  min-height:24px!important;
  max-height:24px!important;
  padding:0 3px!important;
}
.gear-slot.equipped .item-name{
  max-height:24px!important;
  line-height:12px!important;
}
.gear-slot.equipped .stat-lines{
  margin-top:1px!important;
}

.stashed.pickable,
.stash-grid .stashed.pickable{
  background:linear-gradient(145deg,rgba(8,12,20,.99),rgba(2,4,9,1) 52%,rgba(7,10,17,.99))!important;
}
.gear-slot.equipped .item-name,
.gear-slot.equipped .item-name .item-name-part{
  overflow-wrap:normal!important;
  word-break:keep-all!important;
  hyphens:none!important;
}
.gear-slot.equipped .item-name .item-name-part{
  display:inline-block;
  white-space:nowrap;
}

.socket{
  width:28px!important;
  height:28px!important;
  border-width:2px!important;
}
.socket.empty::after{
  width:9px!important;
  height:9px!important;
}
.socket.with-gem .gem-icon{
  font-size:15px!important;
}

body.dragging-gem .socket{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
}
body.dragging-gem .socket.empty.highlight-target{
  border-color:#38bdf8!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(125,211,252,.28) 0 4px,transparent 5px),
    radial-gradient(circle at 50% 50%,rgba(8,47,73,.96),rgba(2,6,23,.99) 70%)!important;
  box-shadow:
    0 0 0 2px rgba(14,165,233,.7),
    0 0 16px 5px rgba(37,99,235,.75),
    0 0 30px 9px rgba(2,132,199,.42),
    inset 0 0 10px rgba(125,211,252,.32)!important;
  opacity:1!important;
  animation:gemSocketBluePulse 1.05s ease-in-out infinite;
}
body.dragging-gem .socket.with-gem{
  color:currentColor!important;
  animation:none!important;
}
.drag-ghost.socket,
.drag-ghost.socket.with-gem{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  max-width:28px!important;
  max-height:28px!important;
  overflow:visible!important;
  box-shadow:
    0 0 0 2px rgba(125,211,252,.9),
    0 0 18px 6px rgba(37,99,235,.82),
    inset 0 0 10px rgba(255,255,255,.22)!important;
}
.drag-ghost.socket .gem-icon{font-size:15px!important;}

body.dragging-item .gear-slot.highlight-target{
  border-color:#1d4ed8!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(30,64,175,.22),transparent 62%),
    linear-gradient(145deg,rgba(8,18,38,.98),rgba(2,6,23,.995) 56%,rgba(7,13,30,.98))!important;
  box-shadow:
    0 0 0 2px rgba(30,64,175,.95),
    0 0 18px 5px rgba(30,64,175,.9),
    0 0 42px 14px rgba(15,23,42,.72),
    0 16px 28px rgba(0,0,0,.62),
    inset 0 0 0 1px rgba(147,197,253,.3),
    inset 0 0 18px rgba(30,64,175,.34)!important;
  z-index:3;
  animation:gearSlotBluePulse 1s ease-in-out infinite;
}
body.dragging-item .gear-slot.highlight-target::before{
  content:""!important;
  display:block!important;
  inset:-5px!important;
  border:2px solid rgba(30,64,175,.78)!important;
  border-radius:20px!important;
  background:none!important;
  box-shadow:0 0 22px rgba(30,64,175,.86),0 0 44px rgba(15,23,42,.65)!important;
  opacity:1!important;
}

@keyframes gemSocketBluePulse{
  0%,100%{filter:saturate(1);}
  50%{filter:saturate(1.45) brightness(1.14);}
}
@keyframes gearSlotBluePulse{
  0%,100%{filter:saturate(1);}
  50%{filter:saturate(1.28) brightness(1.08);}
}

/* Item stash cards must mirror equipped item cards exactly, without sheen layers. */
.stash-grid .stashed.pickable,
.drag-ghost.stashed{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
  padding:4px 7px 7px!important;
  position:relative!important;
  border:1px solid var(--item-rarity)!important;
  border-radius:12px!important;
  background:rgba(8,12,20,.62)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.04)!important;
  backdrop-filter:blur(5px) saturate(110%);
}
.stash-grid .stashed.pickable::before,
.stash-grid .stashed.pickable::after,
.drag-ghost.stashed::before,
.drag-ghost.stashed::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  box-shadow:none!important;
  border:0!important;
}
.stash-grid .stashed.pickable .item-header,
.drag-ghost.stashed .item-header{
  flex:0 0 auto!important;
  width:100%!important;
  min-height:24px!important;
  max-height:24px!important;
  margin:0 0 1px!important;
  padding:0 3px!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:1px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:center!important;
}
.stash-grid .stashed.pickable .item-name,
.drag-ghost.stashed .item-name{
  width:100%!important;
  max-width:100%!important;
  padding:0 1px!important;
  -webkit-line-clamp:2!important;
  line-clamp:2!important;
  max-height:24px!important;
  line-height:12px!important;
  font-size:clamp(10px,1vw,12px)!important;
  overflow:hidden!important;
  overflow-wrap:normal!important;
  word-break:keep-all!important;
  line-break:auto!important;
  hyphens:none!important;
  text-align:center!important;
}
.stash-grid .stashed.pickable .item-header .small,
.drag-ghost.stashed .item-header .small{
  display:none!important;
}
.stash-grid .stashed.pickable .stat-lines,
.drag-ghost.stashed .stat-lines{
  align-self:stretch!important;
  flex:0 0 auto!important;
  width:auto!important;
  max-width:none!important;
  min-height:0!important;
  margin:1px 3px 36px!important;
  padding:6px 7px 7px!important;
  box-sizing:border-box!important;
  border:1px solid color-mix(in srgb,var(--item-rarity) 34%,rgba(148,163,184,.18))!important;
  border-radius:9px!important;
  background:rgba(2,6,14,.7)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 0 12px rgba(0,0,0,.34)!important;
  overflow:hidden!important;
}
.stash-grid .stashed.pickable .stat-line,
.drag-ghost.stashed .stat-line{
  display:block!important;
  width:100%!important;
  max-height:none!important;
  overflow:hidden!important;
  text-align:left!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  line-height:1.22!important;
  margin:0!important;
}

/* Absolute stash clarity override: item-stash cards must not inherit any
   overlay/underlay sheen, blend, filter, translucency, or rarity-tinted wash.
   Keep rarity readable in the text/border only; the card surfaces are opaque. */
#stash,
#modal #stash{
  opacity:1!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  mix-blend-mode:normal!important;
  isolation:isolate;
}
#stash .stash-grid .stashed.pickable,
#modal #stash .stash-grid .stashed.pickable,
#stash .drag-ghost.stashed,
#modal #stash .drag-ghost.stashed{
  background:linear-gradient(145deg,#090d16,#020409 52%,#080b12)!important;
  background-image:linear-gradient(145deg,#090d16,#020409 52%,#080b12)!important;
  border:1px solid var(--item-rarity,#64748b)!important;
  box-shadow:0 12px 24px rgba(0,0,0,.5)!important;
  opacity:1!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  mix-blend-mode:normal!important;
  color:#e5edf8;
  isolation:isolate;
}
#stash .stash-grid .stashed.pickable::before,
#stash .stash-grid .stashed.pickable::after,
#modal #stash .stash-grid .stashed.pickable::before,
#modal #stash .stash-grid .stashed.pickable::after,
#stash .drag-ghost.stashed::before,
#stash .drag-ghost.stashed::after,
#modal #stash .drag-ghost.stashed::before,
#modal #stash .drag-ghost.stashed::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  mix-blend-mode:normal!important;
}
#stash .stash-grid .stashed.pickable .item-header,
#modal #stash .stash-grid .stashed.pickable .item-header,
#stash .drag-ghost.stashed .item-header,
#modal #stash .drag-ghost.stashed .item-header{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  opacity:1!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  mix-blend-mode:normal!important;
}
#stash .stash-grid .stashed.pickable .stat-lines,
#modal #stash .stash-grid .stashed.pickable .stat-lines,
#stash .drag-ghost.stashed .stat-lines,
#modal #stash .drag-ghost.stashed .stat-lines{
  background:linear-gradient(180deg,rgba(2,6,14,.9),rgba(2,6,14,.72))!important;
  box-shadow:inset 0 0 12px rgba(0,0,0,.34)!important;
  opacity:1!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  mix-blend-mode:normal!important;
}
#stash .stash-grid .stashed.pickable *,
#modal #stash .stash-grid .stashed.pickable *,
#stash .drag-ghost.stashed *,
#modal #stash .drag-ghost.stashed *{
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  mix-blend-mode:normal!important;
}

/* Empty item-stash slots are intentionally pure black, not grey/white/washed. */
#stash .stash-grid .stash-empty,
#modal #stash .stash-grid .stash-empty{
  background:#000!important;
  background-image:none!important;
  opacity:1!important;
  justify-content:flex-start!important;
  align-items:center!important;
  text-align:center!important;
}
#stash .stash-grid .stash-empty .item-header,
#modal #stash .stash-grid .stash-empty .item-header{
  width:100%;
  margin-top:2px;
  justify-content:center!important;
  text-align:center!important;
}

/* Keep gear-stash item cards visually identical to equipped item-slot cards. */
#stash .stash-grid .stashed.pickable,
#modal #stash .stash-grid .stashed.pickable,
#stash .drag-ghost.stashed,
#modal #stash .drag-ghost.stashed{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
  padding:4px 7px 7px!important;
  position:relative!important;
  border:1px solid color-mix(in srgb,var(--item-rarity) 76%,rgba(255,255,255,.08))!important;
  border-radius:12px!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0 58%,color-mix(in srgb,var(--item-rarity) 10%,transparent) 78%,color-mix(in srgb,var(--item-rarity) 22%,transparent) 100%),
    linear-gradient(145deg,rgba(9,13,22,.98),rgba(2,4,9,.995) 52%,rgba(8,11,18,.98))!important;
  box-shadow:
    0 12px 24px rgba(0,0,0,.5),
    0 0 14px color-mix(in srgb,var(--item-rarity) 24%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--item-rarity) 42%,rgba(255,255,255,.035)),
    inset 0 0 6px color-mix(in srgb,var(--item-rarity) 12%,transparent)!important;
  opacity:1!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  mix-blend-mode:normal!important;
}
#stash .stash-grid .stashed.pickable .stat-lines,
#modal #stash .stash-grid .stashed.pickable .stat-lines,
#stash .drag-ghost.stashed .stat-lines,
#modal #stash .drag-ghost.stashed .stat-lines{
  background:linear-gradient(180deg,rgba(2,6,14,.82),rgba(2,6,14,.58))!important;
  border:1px solid color-mix(in srgb,var(--item-rarity) 34%,rgba(148,163,184,.18))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 0 12px rgba(0,0,0,.34)!important;
}

/* Item name containers: match the stat panel treatment and keep names tucked
   against the top of each item square for a tighter RPG card silhouette. */
.gear-slot.equipped .item-header,
#stash .stash-grid .stashed.pickable .item-header,
#modal #stash .stash-grid .stashed.pickable .item-header,
#stash .drag-ghost.stashed .item-header,
#modal #stash .drag-ghost.stashed .item-header{
  margin:0 3px 2px!important;
  padding:3px 6px!important;
  min-height:28px!important;
  max-height:32px!important;
  width:auto!important;
  border:1px solid color-mix(in srgb,var(--item-rarity,#64748b) 34%,rgba(148,163,184,.18))!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,rgba(2,6,14,.82),rgba(2,6,14,.58))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 0 12px rgba(0,0,0,.34)!important;
}
.gear-slot.equipped .item-name,
#stash .stash-grid .stashed.pickable .item-name,
#modal #stash .stash-grid .stashed.pickable .item-name,
#stash .drag-ghost.stashed .item-name,
#modal #stash .drag-ghost.stashed .item-name{
  max-height:24px!important;
  line-height:12px!important;
}
.gear-slot.equipped .stat-lines,
#stash .stash-grid .stashed.pickable .stat-lines,
#modal #stash .stash-grid .stashed.pickable .stat-lines,
#stash .drag-ghost.stashed .stat-lines,
#modal #stash .drag-ghost.stashed .stat-lines{
  margin-top:1px!important;
}

/* Final stash-card clarity pass: keep only a rarity-colored edge aura that
   fades inward. The card center and interior panels stay pure black/clear. */
#stash .stash-grid .stashed.pickable,
#modal #stash .stash-grid .stashed.pickable{
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0) 0 66%,
      color-mix(in srgb,var(--item-rarity,#64748b) 7%,transparent) 82%,
      color-mix(in srgb,var(--item-rarity,#64748b) 24%,transparent) 100%),
    #000!important;
  background-blend-mode:normal!important;
  box-shadow:
    0 12px 24px rgba(0,0,0,.5),
    0 0 14px color-mix(in srgb,var(--item-rarity,#64748b) 24%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--item-rarity,#64748b) 48%,rgba(255,255,255,.04)),
    inset 0 0 18px color-mix(in srgb,var(--item-rarity,#64748b) 18%,transparent)!important;
}
#stash .stash-grid .stashed.pickable .item-header,
#modal #stash .stash-grid .stashed.pickable .item-header,
#stash .stash-grid .stashed.pickable .stat-lines,
#modal #stash .stash-grid .stashed.pickable .stat-lines{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Item stash slots: force the card backgrounds to pure black. Rarity remains on
   borders/text only so every stash slot reads as a black slot. */
#stash .stash-grid .stashed,
#modal #stash .stash-grid .stashed,
#stash .stash-grid .stashed.pickable,
#modal #stash .stash-grid .stashed.pickable,
#stash .stash-grid .stash-empty,
#modal #stash .stash-grid .stash-empty{
  background:#000!important;
  background-image:none!important;
  background-blend-mode:normal!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

#stash .stash-grid .stashed.pickable::before,
#modal #stash .stash-grid .stashed.pickable::before{
  background:none!important;
}

/* Stash item-card final surface: keep every stash card body pure black while
   preserving the same rarity-colored edge glow language used by equipped gear. */
#stash .stash-grid .stashed.pickable,
#modal #stash .stash-grid .stashed.pickable,
#stash .drag-ghost.stashed,
#modal #stash .drag-ghost.stashed{
  background:#000!important;
  background-image:none!important;
  border-color:color-mix(in srgb,var(--item-rarity,#64748b) 72%,rgba(255,255,255,.16))!important;
  box-shadow:
    0 13px 26px rgba(0,0,0,.46),
    inset 0 0 0 1px color-mix(in srgb,var(--item-rarity,#64748b) 34%,transparent)!important;
}

#stash .stash-grid .stashed.pickable .item-header,
#modal #stash .stash-grid .stashed.pickable .item-header,
#stash .stash-grid .stashed.pickable .stat-lines,
#modal #stash .stash-grid .stashed.pickable .stat-lines,
#stash .drag-ghost.stashed .item-header,
#modal #stash .drag-ghost.stashed .item-header,
#stash .drag-ghost.stashed .stat-lines,
#modal #stash .drag-ghost.stashed .stat-lines{
  background:#000!important;
  background-image:none!important;
}

/* Exact stash/equipped item-card template parity.
   Stash cards inherit old pure-black overrides above, so this final pass
   deliberately replays the equipped-card template: transparent/clear panels,
   rarity glow, and the same dark glass surface treatment. */
#stash .stash-grid .stashed.pickable,
#modal #stash .stash-grid .stashed.pickable,
#stash .drag-ghost.stashed,
#modal #stash .drag-ghost.stashed{
  background:
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0 58%,color-mix(in srgb,var(--item-rarity) 10%,transparent) 78%,color-mix(in srgb,var(--item-rarity) 22%,transparent) 100%),
    linear-gradient(145deg,rgba(9,13,22,.98),rgba(2,4,9,.995) 52%,rgba(8,11,18,.98))!important;
  border-color:color-mix(in srgb,var(--item-rarity) 76%,rgba(255,255,255,.08))!important;
  box-shadow:
    0 12px 24px rgba(0,0,0,.5),
    0 0 14px color-mix(in srgb,var(--item-rarity) 24%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--item-rarity) 42%,rgba(255,255,255,.035)),
    inset 0 0 6px color-mix(in srgb,var(--item-rarity) 12%,transparent)!important;
}
#stash .stash-grid .stashed.pickable .item-header,
#modal #stash .stash-grid .stashed.pickable .item-header,
#stash .drag-ghost.stashed .item-header,
#modal #stash .drag-ghost.stashed .item-header{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}
#stash .stash-grid .stashed.pickable .stat-lines,
#modal #stash .stash-grid .stashed.pickable .stat-lines,
#stash .drag-ghost.stashed .stat-lines,
#modal #stash .drag-ghost.stashed .stat-lines{
  background:linear-gradient(180deg,rgba(2,6,14,.82),rgba(2,6,14,.58))!important;
  border:1px solid color-mix(in srgb,var(--item-rarity) 34%,rgba(148,163,184,.18))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 0 12px rgba(0,0,0,.34)!important;
}

  .stats-summary-card.stats-gpm-card{
    position:relative;
    overflow:hidden;
    border-color:rgba(251,191,36,.7);
    background:
      radial-gradient(circle at 18% 18%,rgba(252,211,77,.34),transparent 34%),
      radial-gradient(circle at 82% 0%,rgba(250,204,21,.18),transparent 38%),
      linear-gradient(145deg,rgba(67,39,12,.96),rgba(18,14,24,.98) 58%,rgba(9,13,25,.98));
    box-shadow:
      0 18px 34px rgba(0,0,0,.38),
      0 0 22px rgba(251,191,36,.2),
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 0 22px rgba(251,191,36,.08);
  }
  .stats-summary-card.stats-gpm-card::before{
    content:'';
    position:absolute;
    inset:-42% -18% auto;
    height:78%;
    background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.22) 48%,transparent 76%);
    transform:rotate(-10deg);
    pointer-events:none;
  }
  .stats-summary-card.stats-gpm-card::after{
    content:'';
    position:absolute;
    inset:1px;
    border-radius:9px;
    border:1px solid rgba(255,240,189,.16);
    pointer-events:none;
  }
  .stats-gpm-card .label,
  .stats-gpm-card .value,
  .stats-gpm-card .stats-gpm-unit,
  .stats-gpm-card .stats-gpm-meter{
    position:relative;
    z-index:1;
  }
  .stats-gpm-card .label{
    color:#fde68a;
    text-shadow:0 0 10px rgba(251,191,36,.4),0 1px 0 rgba(0,0,0,.8);
  }
  .stats-gpm-card .value{
    font-size:19px;
    letter-spacing:.02em;
  }
  .stats-gpm-orb{
    position:absolute;
    right:10px;
    top:8px;
    z-index:1;
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(251,191,36,.55);
    border-radius:999px;
    background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.55),rgba(251,191,36,.42) 34%,rgba(91,56,13,.9) 74%);
    box-shadow:0 0 14px rgba(251,191,36,.35),inset 0 0 10px rgba(255,255,255,.18);
    font-size:16px;
  }
  .stats-gpm-unit{
    display:block;
    margin-top:3px;
    color:#fef3c7;
    font-size:10px;
    line-height:1.35;
    opacity:.86;
  }
  .stats-gpm-meter{
    display:block;
    height:6px;
    margin-top:9px;
    border:1px solid rgba(251,191,36,.45);
    border-radius:999px;
    background:rgba(24,14,8,.74);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.75);
  }
  .stats-gpm-meter span{
    display:block;
    height:100%;
    min-width:10px;
    border-radius:inherit;
    background:linear-gradient(90deg,#92400e,#f59e0b,#fef3c7);
    box-shadow:0 0 10px rgba(251,191,36,.58);
  }

/* Final item-name placement parity: equipped cards, stash cards, and drag ghosts
   all keep the rarity-framed name plate at the very top with only a hairline gap. */
.stashed.pickable,
.drag-ghost.stashed,
.drag-ghost.gear-slot.equipped{
  padding-top:2px!important;
}
.gear-slot.equipped{
  padding-top:0!important;
}
.gear-slot.equipped .item-header,
.stash-grid .stashed.pickable .item-header,
#stash .stash-grid .stashed.pickable .item-header,
#modal #stash .stash-grid .stashed.pickable .item-header,
.drag-ghost.stashed .item-header,
.drag-ghost.gear-slot.equipped .item-header,
#stash .drag-ghost.stashed .item-header,
#modal #stash .drag-ghost.stashed .item-header{
  margin:0 3px 2px!important;
  padding:3px 6px!important;
  min-height:28px!important;
  max-height:32px!important;
  width:auto!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid color-mix(in srgb,var(--item-rarity,#64748b) 34%,rgba(148,163,184,.18))!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,rgba(2,6,14,.82),rgba(2,6,14,.58))!important;
  background-image:linear-gradient(180deg,rgba(2,6,14,.82),rgba(2,6,14,.58))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 0 12px rgba(0,0,0,.34)!important;
}
.gear-slot.equipped .item-header{
  margin:-1px 3px 2px!important;
}
.gear-slot.equipped .item-name,
.stash-grid .stashed.pickable .item-name,
#stash .stash-grid .stashed.pickable .item-name,
#modal #stash .stash-grid .stashed.pickable .item-name,
.drag-ghost.stashed .item-name,
.drag-ghost.gear-slot.equipped .item-name{
  max-height:24px!important;
  line-height:12px!important;
}

/* Equipped hero item names: two-line fit without broken words or side spill. */
.gear-slot.equipped .item-header{
  overflow:hidden!important;
  min-width:0!important;
}
.gear-slot.equipped .item-name{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  line-clamp:2!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  max-height:24px!important;
  overflow:hidden!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:keep-all!important;
  hyphens:none!important;
  text-wrap:normal!important;
  box-sizing:border-box!important;
}
.gear-slot.equipped .item-name .item-name-part{
  display:inline-block!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  vertical-align:bottom!important;
}

/* Keep destructive hero retirement actions red and inward-glowing across every UI theme. */
body .pill.inventory-retire,
body.ui-theme-mega .pill.inventory-retire,
body.ui-theme-obsidian .pill.inventory-retire,
body.ui-theme-sunforge .pill.inventory-retire,
body.ui-theme-eldritch .pill.inventory-retire,
body.ui-theme-frog .pill.inventory-retire,
#fireHeroModal .retire-hero-button-container .btn.retire-danger{
  color:#fee2e2 !important;
  border-color:rgba(248,113,113,.9) !important;
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(248,113,113,.18), rgba(127,29,29,.76) 52%, rgba(69,10,10,.96) 100%),
    linear-gradient(135deg, rgba(185,28,28,.94), rgba(69,10,10,.98)) !important;
  box-shadow:
    inset 0 0 16px rgba(248,113,113,.48),
    inset 0 0 4px rgba(254,202,202,.42),
    0 0 9px rgba(239,68,68,.36) !important;
  text-shadow:0 1px 0 rgba(69,10,10,.9), 0 0 7px rgba(254,202,202,.32) !important;
}
body .pill.inventory-retire:hover,
body.ui-theme-mega .pill.inventory-retire:hover,
body.ui-theme-obsidian .pill.inventory-retire:hover,
body.ui-theme-sunforge .pill.inventory-retire:hover,
body.ui-theme-eldritch .pill.inventory-retire:hover,
body.ui-theme-frog .pill.inventory-retire:hover,
#fireHeroModal .retire-hero-button-container .btn.retire-danger:hover{
  color:#fff !important;
  border-color:#fecaca !important;
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(254,202,202,.26), rgba(185,28,28,.82) 52%, rgba(91,12,12,.98) 100%),
    linear-gradient(135deg, rgba(220,38,38,.96), rgba(127,29,29,.98)) !important;
  box-shadow:
    inset 0 0 20px rgba(248,113,113,.62),
    inset 0 0 6px rgba(254,202,202,.5),
    0 0 13px rgba(248,113,113,.48) !important;
}

/* Balance pass: cleaner DPS/drop-rate row, hero iLv, weapon attack, hire button. */
.dps-display-row{align-items:center;justify-content:center;gap:0;flex-wrap:wrap;margin:-10px 0 -2px;min-height:0}
.dps-drop-rates{display:inline-flex!important;align-items:center;justify-content:center;gap:12px;margin:0 auto;vertical-align:middle;width:100%;padding:0 10px;box-sizing:border-box}
.drop-rate-chip{display:inline-flex;align-items:center;justify-content:center;min-width:138px;min-height:26px;padding:4px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:linear-gradient(180deg,rgba(16,24,39,.9),rgba(5,9,18,.92));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 5px 12px rgba(0,0,0,.3);font-weight:800;letter-spacing:.03em;line-height:1;white-space:nowrap}
.drop-rate-chip.loot-bonus{color:#facc15;text-shadow:0 0 8px rgba(250,204,21,.35);border-color:rgba(250,204,21,.38);background:linear-gradient(180deg,rgba(82,54,13,.9),rgba(24,18,8,.94))}
.drop-rate-chip.gem-bonus{color:#c084fc;text-shadow:0 0 8px rgba(192,132,252,.35);border-color:rgba(192,132,252,.38);background:linear-gradient(180deg,rgba(54,32,86,.9),rgba(17,13,28,.94))}
.hero-ilvl,.stat-line--ilvl{color:#c084fc!important;text-shadow:0 0 8px rgba(168,85,247,.65),0 1px 0 #000;font-weight:900;letter-spacing:.03em}
.stat-line--attack{color:#fbbf24!important;text-shadow:0 0 8px rgba(251,191,36,.42);font-weight:900}
.hero-hire-container .hire-slot{width:100%;box-sizing:border-box}
.hero-hire-container #hireBtn.hire-wide-btn{width:100%;display:flex;align-items:center;justify-content:center;text-align:center}
.gph-total-only{display:flex;align-items:center;justify-content:center;min-height:34px;font-size:13px;white-space:nowrap}

/* Keep the DPS meter label aligned with the hero DPS stat color while the value remains gold. */
.dps-display-button .dps-meter-label{
  color:#8b0000;
  font-weight:900;
  text-shadow:0 0 7px rgba(139,0,0,.42),1px 1px 0 rgba(0,0,0,.7);
}

/* Preserve gem rarity color while a gem is held on the mouse. */

body.dragging-gem .socket.with-gem{
  color:var(--gem-rarity-color,var(--held-gem-rarity-color,currentColor))!important;
  border-color:color-mix(in srgb,var(--gem-rarity-color,var(--held-gem-rarity-color,currentColor)) 72%,#fff 12%)!important;
}
body.dragging-gem #gemStash .stashed[style*="--gem-rarity-color"]{
  color:var(--gem-rarity-color,var(--held-gem-rarity-color,currentColor))!important;
  border-color:var(--gem-rarity-color,var(--held-gem-rarity-color,currentColor))!important;
}
.drag-ghost.socket.with-gem{
  color:var(--drag-ghost-border,currentColor)!important;
  border-color:currentColor!important;
  background:currentColor!important;
  box-shadow:0 0 10px currentColor,inset 0 0 0 1px rgba(255,255,255,.24)!important;
}
.drag-ghost.socket.with-gem .gem-icon{
  color:#fff!important;
  text-shadow:0 0 4px currentColor,0 1px 2px #000!important;
}

.gold-monster-title{
  color:#fbbf24;
  font-weight:800;
  text-shadow:0 0 6px rgba(251,191,36,.95),0 0 14px rgba(245,158,11,.72),0 0 24px rgba(234,179,8,.45);
}

.keeper-journal-note{
  position:relative;
  margin:4px 0;
  padding:10px 12px;
  border:1px solid rgba(146,64,14,.55);
  border-radius:10px;
  color:#3b2414;
  background:linear-gradient(135deg,rgba(252,232,178,.96),rgba(180,120,58,.88));
  box-shadow:inset 0 0 18px rgba(92,45,13,.22),0 0 18px rgba(120,53,15,.22);
  font-family:Georgia,'Times New Roman',serif;
}
.keeper-journal-note::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px dashed rgba(92,45,13,.28);
  border-radius:8px;
  pointer-events:none;
}
.keeper-journal-title{
  color:#7f1d1d;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,248,220,.5),0 0 8px rgba(127,29,29,.25);
}
.keeper-journal-body{
  margin-top:6px;
  line-height:1.35;
  font-style:italic;
}

/* Compact DPS meter when it lives inside the Heroes title plaque. */
.hero-column-heading .hero-title-dps-button#dpsBtn{
  min-height:22px;
  padding:3px 8px;
  border-color:rgba(251,191,36,.66);
  color:#fff7d6;
  background:
    radial-gradient(120% 180% at 50% -45%, rgba(251,191,36,.34), transparent 62%),
    linear-gradient(135deg, rgba(58,35,9,.96), rgba(28,18,42,.94) 54%, rgba(8,18,38,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -10px 18px rgba(0,0,0,.34),
    0 0 14px rgba(251,191,36,.18);
}
.hero-column-heading .hero-title-dps-button#dpsBtn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -10px 18px rgba(0,0,0,.34),
    0 0 18px rgba(251,191,36,.32);
}

.log-line--encounter-announcement{
  display:block;
  width:100%;
}
.log-line--encounter-announcement .log-message{
  display:block;
  width:100%;
}
.log .adventure-log-encounter-announcement{
  width:100%;
  margin:0 0 3px;
  padding:7px 10px 8px;
  border:1px solid rgba(139, 92, 246, .36);
  border-radius:8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 246, .22), transparent 58%),
    linear-gradient(180deg, rgba(24, 16, 43, .68), rgba(10, 14, 28, .45));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 0 14px rgba(76,29,149,.16);
  text-align:center;
}
.log .adventure-log-encounter-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  color:#f8fafc;
  font-weight:900;
  letter-spacing:.02em;
  text-align:center;
}
.log .adventure-log-encounter-name{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.log .adventure-log-encounter-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:4px;
  color:#cbd5e1;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* Dark-fantasy encounter log cards and roomier theme selector. */
.info-theme-panel{
  gap:11px;
  padding:9px 12px;
}

.log .adventure-log-encounter-announcement{
  position:relative;
  padding:10px 12px 11px;
  border-color:rgba(var(--log-event-rgb, 139, 92, 246), .2);
  border-radius:12px;
  background:
    radial-gradient(100% 140% at 50% -25%, rgba(var(--log-event-rgb, 139, 92, 246), .12), transparent 54%),
    linear-gradient(180deg, rgba(9, 13, 22, .96), rgba(5, 8, 14, .74) 76%, rgba(5, 8, 14, .38));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 -20px 28px rgba(0,0,0,.32);
}
.log .adventure-log-encounter-announcement::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(var(--log-event-rgb, 139, 92, 246), .13);
  border-radius:9px;
  pointer-events:none;
}
.log .adventure-log-encounter-level-line,
.log .adventure-log-encounter-title,
.log .adventure-log-encounter-detail,
.log .adventure-log-encounter-outcome{
  position:relative;
  z-index:1;
}
.log .adventure-log-encounter-title{
  flex-direction:row;
  align-items:flex-end;
  align-content:flex-end;
  gap:4px 6px;
  min-width:0;
  overflow-wrap:anywhere;
  line-height:1.16;
}
.log .adventure-log-encounter-level-line{
  width:100%;
  margin:0 0 2px;
  text-align:center;
  line-height:1.05;
}
.log .adventure-log-encounter-level-line .monster-level{
  display:inline-block;
  line-height:1.05;
}
.log .adventure-log-encounter-pretitle{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:100%;
  margin:0 0 2px;
}
.log .adventure-log-role-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:14px;
  min-width:0;
  padding:1px 5px;
  border:1px solid var(--game-frame-border);
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,0) 46%),
    radial-gradient(120% 160% at 50% -35%, color-mix(in srgb, var(--game-frame-border) 72%, transparent), transparent 62%),
    rgba(2,6,23,.58);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 -7px 14px rgba(0,0,0,.34),
    0 0 10px color-mix(in srgb, var(--game-frame-border) 55%, transparent);
  font-size:8px;
  line-height:1.05;
  letter-spacing:.035em;
  text-align:center;
  text-shadow:0 0 8px currentColor, 0 1px 0 rgba(0,0,0,.8);
  text-transform:uppercase;
}
.log .adventure-log-role-tag .battle-status-role-part{
  white-space:nowrap;
}
.log .adventure-log-role-tag .battle-status-role-part--keeper{
  color:var(--boss);
}
.log .adventure-log-role-tag .battle-status-role-part--mini{
  color:var(--mini-boss);
}
.log .adventure-log-elite-tag{
  flex:0 0 auto;
  min-height:14px;
  padding:1px 5px;
  font-size:8px;
  line-height:1.05;
  letter-spacing:.035em;
  box-shadow:0 0 4px rgba(124,45,18,.42);
}
.log .adventure-log-name-with-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  max-width:100%;
  vertical-align:middle;
}
.log .adventure-log-name-text{
  min-width:0;
  overflow-wrap:anywhere;
}
.log .adventure-log-encounter-title .adventure-log-encounter-name{
  flex:1 1 120px;
  max-width:100%;
  line-height:1.1;
  overflow-wrap:anywhere;
}
.log .adventure-log-encounter--combat .adventure-log-encounter-name{
  color:#a31515;
  text-shadow:0 0 8px rgba(139,0,0,.45),0 1px 0 rgba(0,0,0,.8);
}
.log .adventure-log-keeper-role{
  display:block;
  width:100%;
  margin-bottom:3px;
  color:#8b0000;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  line-height:1.05;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 0 7px rgba(139,0,0,.42),1px 1px 0 rgba(0,0,0,.7);
}
.log .adventure-log-keeper-name{
  display:block;
  width:100%;
  color:#8b0000;
  text-shadow:0 0 7px rgba(139,0,0,.42),1px 1px 0 rgba(0,0,0,.7);
}
.log .adventure-log-encounter--loot .adventure-log-encounter-name{
  color:#fbbf24;
  text-shadow:0 0 5px rgba(251,191,36,.62),0 0 11px rgba(245,158,11,.38),0 1px 0 rgba(0,0,0,.8);
}
.log .adventure-log-encounter--discovering .adventure-log-encounter-name{
  color:#c084fc;
  text-shadow:0 0 8px rgba(124,58,237,.86),0 1px 0 rgba(0,0,0,.8);
}
.log .adventure-log-encounter--resting .adventure-log-encounter-name{
  color:#93c5fd;
  text-shadow:0 0 8px rgba(37,99,235,.86),0 1px 0 rgba(0,0,0,.8);
}
.log .adventure-log-encounter--searching .adventure-log-encounter-name{
  color:#fb923c;
  text-shadow:0 0 8px rgba(194,65,12,.86),0 1px 0 rgba(0,0,0,.8);
}
.log .adventure-log-encounter-detail:empty{
  display:none;
}
.log .adventure-log-encounter-detail{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  width:100%;
  margin-top:6px;
}
.log .adventure-log-encounter-count{
  color:#fde68a;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.log .adventure-log-mini-bar{
  position:relative;
  width:min(100%, 260px);
  height:16px;
  overflow:hidden;
  border-radius:0;
}
.log .adventure-log-mini-bar i{
  display:block;
  height:100%;
  border-radius:999px;
  transition:width .25s linear;
}
.log .adventure-log-mini-bar span{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff7ed;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-shadow:0 1px 2px #000,0 0 5px rgba(0,0,0,.9);
}
.log .adventure-log-mini-bar--hp i{
  background:linear-gradient(90deg,#7f0000,#c00000,#7f0000);
  box-shadow:0 0 6px rgba(255,82,82,.7),0 0 12px rgba(255,82,82,.45);
}
.log .adventure-log-mini-bar--timer i{
  background:linear-gradient(90deg,#b45309,#fbbf24,#b45309);
  box-shadow:0 0 6px rgba(251,191,36,.7),0 0 12px rgba(217,119,6,.55);
}
.log .adventure-log-mini-bar--resting i{
  background:linear-gradient(90deg,#0b2a6b,#60a5fa,#0b2a6b);
  box-shadow:0 0 6px rgba(96,165,250,.7),0 0 12px rgba(37,99,235,.55);
}
.log .adventure-log-mini-bar--searching i,
.log .adventure-log-mini-bar--search i{
  background:linear-gradient(90deg,#c2410c,#fb923c,#c2410c);
  box-shadow:0 0 6px rgba(251,146,60,.7),0 0 12px rgba(194,65,12,.55);
}
.log .adventure-log-mini-bar--discovering i{
  background:linear-gradient(90deg,#4c1d95,#c084fc,#4c1d95);
  box-shadow:0 0 6px rgba(192,132,252,.7),0 0 12px rgba(124,58,237,.55);
}
.log .adventure-log-encounter-outcome{
  margin-top:7px;
  padding:3px 10px;
  border:1px solid rgba(251,191,36,.28);
  border-radius:999px;
  color:#fef3c7;
  background:rgba(31,18,13,.64);
  font-weight:900;
  letter-spacing:.08em;
}
.log .adventure-log-encounter-outcome--reward{
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  min-width:140px;
  text-transform:none;
}


/* Adventure Log encounter cards: mirror the centered battle-event-card presentation. */
.log .adventure-log-encounter-announcement{
  width:auto;
  min-width:min(260px, 100%);
  max-width:min(100%, 430px);
  margin:1px auto 4px;
  padding:11px 14px 12px;
  border:1px solid color-mix(in srgb, rgb(var(--log-event-rgb, 139, 92, 246)) 54%, var(--game-frame-border));
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 34%),
    radial-gradient(110% 150% at 50% -42%, rgba(var(--log-event-rgb, 139, 92, 246), .26), transparent 68%),
    linear-gradient(155deg, rgba(8,15,30,.9), rgba(3,7,18,.74));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 -13px 24px rgba(0,0,0,.24),
    0 9px 18px rgba(2,6,23,.28),
    0 0 16px rgba(var(--log-event-rgb, 139, 92, 246), .24);
}
.log .adventure-log-encounter-announcement::before{
  inset:4px;
  border-color:rgba(var(--log-event-rgb, 139, 92, 246), .3);
  border-radius:12px;
}
.log .adventure-log-encounter-announcement::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  opacity:.75;
  pointer-events:none;
}
.log .adventure-log-encounter-title{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.log .adventure-log-encounter-level-line .monster-level{
  width:100%;
  text-align:center;
  font-size:11px;
}
.log .adventure-log-encounter-title .adventure-log-encounter-name{
  flex:0 1 auto;
  width:100%;
  text-align:center;
  font-size:14px;
  font-weight:800;
}
.log .adventure-log-encounter--combat .adventure-log-encounter-title .adventure-log-encounter-name,
.log .adventure-log-encounter--loot .adventure-log-encounter-title .adventure-log-encounter-name{
  font-size:11px;
}

/* Full-width DPS meter polish: span the hero column with breathing room. */
.hero-column-heading .hero-title-dps-button#dpsBtn,
#dpsBtn.dps-display-button.hero-title-dps-button{
  width:calc(100% - 16px);
  max-width:calc(100% - 16px);
  margin:2px 8px 0;
  padding:6px 12px;
  font-size:13px;
  line-height:1.15;
  letter-spacing:.055em;
}
.hero-column-heading .hero-title-dps-button#dpsBtn b,
#dpsBtn.dps-display-button.hero-title-dps-button b{
  font-size:1.08em;
}

/* Boss identity colors shared by battle cards and adventure log encounters. */
.dungeon-keeper-monster-name,
.log .dungeon-keeper-monster-name,
.monster-battle-shell .dungeon-keeper-monster-name{
  color:#7f0000;
  text-shadow:
    0 0 5px rgba(127,0,0,.95),
    0 0 13px rgba(239,68,68,.72),
    0 1px 0 rgba(0,0,0,.9);
}
.mini-boss-monster-name,
.log .mini-boss-monster-name,
.monster-battle-shell .mini-boss-monster-name{
  color:#c2410c;
  text-shadow:
    0 0 5px rgba(194,65,12,.92),
    0 0 13px rgba(251,146,60,.68),
    0 1px 0 rgba(0,0,0,.9);
}
.monster-battle-shell .battle-status-role-part--keeper,
.log .adventure-log-role-tag .battle-status-role-part--keeper{
  color:#7f0000;
  text-shadow:0 0 7px rgba(239,68,68,.8),0 1px 0 rgba(0,0,0,.9);
}
.monster-battle-shell .battle-status-role-part--mini,
.log .adventure-log-role-tag .battle-status-role-part--mini{
  color:#c2410c;
  text-shadow:0 0 7px rgba(251,146,60,.75),0 1px 0 rgba(0,0,0,.9);
}
.battle-event-card--campfire{
  border-color:rgba(234,88,12,.28);
  background:
    radial-gradient(100% 130% at 50% 105%, rgba(239,68,68,.2), transparent 58%),
    linear-gradient(180deg, rgba(42,16,6,.52), rgba(9,13,22,.36));
  box-shadow:inset 0 0 0 1px rgba(251,146,60,.1), 0 0 15px rgba(194,65,12,.18);
}
.campfire-title{
  color:#ea580c;
  text-shadow:0 0 8px rgba(251,146,60,.9),0 0 15px rgba(220,38,38,.48);
}
.bar.campfire{
  background:linear-gradient(90deg, rgba(69,10,10,.88), rgba(124,45,18,.74), rgba(113,63,18,.58));
  border-color:rgba(251,146,60,.38);
  box-shadow:inset 0 0 0 1px rgba(255,237,213,.08), 0 0 10px rgba(234,88,12,.28);
}
.bar.campfire i{
  background:linear-gradient(90deg, #7f1d1d 0%, #dc2626 28%, #f97316 62%, #fde047 100%);
  box-shadow:0 0 10px rgba(249,115,22,.8), 0 0 18px rgba(220,38,38,.55);
}
.bar.glow-fire{
  filter:drop-shadow(0 0 4px rgba(249,115,22,.72));
}
.log-row--campfire{--log-event-rgb:234, 88, 12}
.log-type.campfire{color:#fb923c;text-shadow:0 0 7px rgba(249,115,22,.75)}
.log .adventure-log-encounter--campfire .adventure-log-encounter-name{color:#ea580c;text-shadow:0 0 8px rgba(251,146,60,.85)}

/* Hero action plaques: match the Heroes title container without widening hero cards. */
.hero-pet-actions-plaque{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(100% - 4px);
  min-width:0;
  min-height:31px;
  margin:0 2px;
  padding:4px 8px;
  box-sizing:border-box;
  border:1px solid rgba(160,112,55,.78);
  border-radius:10px;
  background:
    radial-gradient(120% 160% at 50% -55%, rgba(255,220,140,.28), transparent 55%),
    linear-gradient(90deg, rgba(38,20,10,.94), rgba(96,55,24,.86) 48%, rgba(35,18,9,.94)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 7px);
  box-shadow:
    inset 0 1px 0 rgba(255,232,181,.2),
    inset 0 -9px 18px rgba(15,8,3,.58),
    0 1px 0 rgba(255,255,255,.06),
    0 5px 14px rgba(0,0,0,.42),
    0 0 18px rgba(180,118,45,.12);
}
.hero-pet-actions-plaque::before,
.hero-pet-actions-plaque::after{
  content:"";
  position:absolute;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:radial-gradient(circle, #ffe0a3 0 18%, #b7792f 42%, #3a1d0d 78%);
  box-shadow:0 0 7px rgba(245,178,92,.42);
  transform:translateY(-50%);
  opacity:.9;
  pointer-events:none;
}
.hero-pet-actions-plaque::before{left:7px}
.hero-pet-actions-plaque::after{right:7px}
.hero-pet-actions-plaque .hero-pet-actions{
  width:100%;
  margin:0;
  padding:3px 10px;
}

.hero-hire-container #hireBtn.cannot-afford{
  cursor:pointer;
  filter:saturate(.85) brightness(.9);
}
.adventure-log-gold-warning{
  width:100%;
  min-width:0;
  max-width:100%;
  color:#ffe8ba;
}
.log .adventure-log-gold-warning{
  margin:2px auto;
}

/* Pixel RPG quick-action frame for the hero Stats / Pets controls only. */
.hero-pet-actions-plaque{
  border-radius:0;
  border:1px solid #3b2117;
  background:
    repeating-linear-gradient(0deg, rgba(255,232,181,.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255,232,181,.025) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #141017 0%, #21151d 48%, #100b10 100%);
  box-shadow:
    inset 0 0 0 1px rgba(7,4,5,.9),
    inset 0 5px 0 rgba(91,55,34,.22),
    inset 0 -7px 0 rgba(0,0,0,.38),
    0 1px 0 rgba(255,196,104,.18),
    0 4px 10px rgba(0,0,0,.38);
}
.hero-pet-actions-plaque::before,
.hero-pet-actions-plaque::after{
  top:4px;
  width:9px;
  height:9px;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
  opacity:1;
  image-rendering:pixelated;
}
.hero-pet-actions-plaque::before{
  left:4px;
  border-left:2px solid #d08239;
  border-top:2px solid #f0a14b;
  box-shadow:2px 2px 0 #58301e;
}
.hero-pet-actions-plaque::after{
  right:4px;
  border-right:2px solid #5a3323;
  border-bottom:2px solid #2a1712;
  box-shadow:-2px -2px 0 #b76b32;
}
.hero-pet-actions .hero-pet-action-btn{
  min-height:31px;
  border-radius:0 !important;
  border:2px solid #6f452b !important;
  padding:7px 11px;
  color:#F4E8DD !important;
  font-family:'Press Start 2P', monospace;
  font-size:10px;
  font-weight:500;
  line-height:1;
  letter-spacing:.02em;
  text-align:center;
  text-shadow:1px 1px 0 #2a1712 !important;
  -webkit-font-smoothing:none;
  font-smooth:never;
  image-rendering:pixelated;
  background:
    linear-gradient(135deg, transparent 0 6px, rgba(222,135,61,.22) 6px 7px, transparent 7px calc(100% - 7px), rgba(46,25,17,.5) calc(100% - 7px) calc(100% - 6px), transparent calc(100% - 6px)),
    repeating-linear-gradient(0deg, rgba(255,237,205,.035) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #21151c 0%, #2a1b1d 46%, #160f12 100%) !important;
  box-shadow:
    inset 1px 1px 0 #e09143,
    inset 3px 3px 0 #372119,
    inset -1px -1px 0 #2b1812,
    inset -3px -3px 0 #0b0708,
    0 1px 0 rgba(255,202,121,.16) !important;
  outline:1px solid #120a09;
  outline-offset:-5px;
}
.hero-pet-actions .hero-pet-action-btn::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, #d08239 0 2px, transparent 2px) top left/8px 8px no-repeat,
    linear-gradient(225deg, #5a3323 0 2px, transparent 2px) top right/8px 8px no-repeat,
    linear-gradient(45deg, #2a1712 0 2px, transparent 2px) bottom left/8px 8px no-repeat,
    linear-gradient(315deg, #2a1712 0 2px, transparent 2px) bottom right/8px 8px no-repeat;
  opacity:.95;
  z-index:-1;
}
.hero-pet-actions .hero-pet-action-btn:hover,
.hero-pet-actions .hero-pet-action-btn:focus-visible,
.hero-pet-actions .hero-pet-action-btn:active{
  border-color:#b76b32 !important;
  color:#F4E8DD !important;
  filter:none;
  transform:none;
  background:
    linear-gradient(135deg, transparent 0 6px, rgba(255,180,70,.34) 6px 7px, transparent 7px calc(100% - 7px), rgba(79,43,23,.52) calc(100% - 7px) calc(100% - 6px), transparent calc(100% - 6px)),
    repeating-linear-gradient(0deg, rgba(255,237,205,.04) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #3a241b 0%, #4a2d20 48%, #211513 100%) !important;
  box-shadow:
    inset 1px 1px 0 #ffb454,
    inset 3px 3px 0 #6e3b1e,
    inset -1px -1px 0 #5b331d,
    inset -3px -3px 0 #120a08,
    0 0 0 1px #2b1812,
    0 1px 0 rgba(255,218,139,.18) !important;
}

/* ============================================================
   Stash/pets-stash card wash removal (catch-all, end-of-file).
   Some #stash / #modal scoped rules re-add a rarity inner-glow that reads as a
   milky/white fill on bright (gold/Legendary) cards. Force a flat dark card with
   the rarity kept on the border + a 1px inner line only. Covers every container
   variant so it wins regardless of nesting.
   ============================================================ */
.stashed,
.stashed.pickable,
.drag-ghost.stashed,
#stash .stashed,
#stash .stash-grid .stashed,
#modal #stash .stashed,
#modal #stash .stash-grid .stashed{
  background:rgba(8,12,20,.96)!important;
  background-image:none!important;
  background-blend-mode:normal!important;
}
.stashed.pickable,
#stash .stash-grid .stashed.pickable,
#modal #stash .stash-grid .stashed.pickable,
#stash .drag-ghost.stashed,
#modal #stash .drag-ghost.stashed{
  box-shadow:
    0 10px 22px rgba(0,0,0,.45),
    inset 0 0 0 1px color-mix(in srgb,var(--item-rarity,#64748b) 40%,transparent)!important;
}

/* Also neutralize any pseudo-element wash/glow on stash cards (kept border only). */
.stashed::before, .stashed::after,
.stashed.pickable::before, .stashed.pickable::after,
#stash .stash-grid .stashed.pickable::before,
#stash .stash-grid .stashed.pickable::after,
#modal #stash .stash-grid .stashed.pickable::before,
#modal #stash .stash-grid .stashed.pickable::after{
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* ============================================================
   ROOT CAUSE of the stash "milky wash": empty gem sockets glow with the item
   rarity color (box-shadow bloom on .socket and .socket.empty::after). On
   bright rarities (gold) with several sockets those glows merge into a light
   haze. Dim the bloom — keep the dotted slot outline + a dark fill + a faint dot.
   ============================================================ */
.stashed .socket,
.stash-grid .stashed.pickable .socket,
.drag-ghost.stashed .socket,
.gear-slot .socket,
.gear-slot.equipped .socket{
  box-shadow:0 0 0 1px rgba(255,255,255,.05), inset 0 0 7px rgba(0,0,0,.95)!important;
}
.stashed .socket.empty::after,
.stash-grid .stashed.pickable .socket.empty::after,
.drag-ghost.stashed .socket.empty::after,
.gear-slot .socket.empty::after,
.gear-slot.equipped .socket.empty::after{
  background:color-mix(in srgb,var(--item-rarity,#64748b) 22%,rgba(2,6,14,.92))!important;
  box-shadow:inset 0 0 3px #000!important;
}

/* ============================================================
   Top "white curtain" over the stash: the modal-card top glass-sheen
   (radial --glass-sheen at 50% 0%) reads as a light gradient over the upper
   stash row. Remove the top sheen on the hero-view stash modal (keep the
   bottom vignette + border).
   ============================================================ */
#modal .modal-card.modal-hero-view::before,
#modal .modal-card.modal-hero-view.compact::before{
  background:
    radial-gradient(140% 180% at 50% 120%, rgba(0,0,0,.6), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.30))!important;
}

/* ============================================================
   FINAL wash kill (specificity-matched). Earlier catch-alls used `.stashed`
   (3 classes) but the winning rules use `.stashed.pickable` (4) and deep
   equipped-gear selectors, so they out-specified the fix. These selectors match
   each winner's specificity exactly and, being last in source, win. Dark card +
   rarity on the BORDER only — no rarity radial/gradient/glow (the milky wash).
   Covers gear stash, gem stash, and equipped gear, all rarities.
   ============================================================ */
.stashed.pickable,
#stash .stash-grid .stashed.pickable,
#modal #stash .stash-grid .stashed.pickable,
#gemStash .stashed.pickable,
#modal #gemStash .stashed.pickable,
.gear-slot.equipped,
#modal .modal-card.modal-hero-view .inventory-main > .grid-gear .gear-slot.equipped{
  background:#0a0e16!important;
  background-image:none!important;
  box-shadow:0 12px 24px rgba(0,0,0,.5), inset 0 0 0 1px color-mix(in srgb,var(--item-rarity,#64748b) 40%,transparent)!important;
}

/* ============================================================
   Inventory "white curtain" + card "frame" fix (2026-06-28).
   Two root causes: (1) ui-polish .modal-card background paints a white-top
   gradient that washed the top of the modal (the "curtain"); (2) the stash
   card box-shadow rendered as a lighter "frame" behind each tile. Fix: flat-dark
   modal-card + stash surfaces; no box-shadow/gradient/pseudo on the stash
   subtree; rarity shown as a flat border + socket glow only. Selectors match the
   earlier winners' specificity (.stash-grid, 2 ids) and are last in source.
   ============================================================ */
#modal .modal-card,
#modal .modal-card.compact,
#modal .modal-card.modal-hero-view,
#modal .modal-card.modal-pets-view,
#modal .modal-card.modal-creature-view{
  background:#0b0913!important; background-image:none!important;
}
#modal .modal-card::before, #modal .modal-card::after,
#modal .modal-card.compact::before, #modal .modal-card.compact::after{
  background:none!important; background-image:none!important;
}
#stash, #stash *, #modal #stash, #modal #stash *{ background-image:none!important; }
#stash .stash-grid, #stash .stash-item, #stash .stashed, #stash .stashed.pickable,
#stash .stash-grid .stashed.pickable,
#modal #stash .stash-grid, #modal #stash .stash-item, #modal #stash .stashed, #modal #stash .stashed.pickable,
#modal #stash .stash-grid .stashed.pickable{
  background:#0a0e16!important; box-shadow:none!important; filter:none!important; backdrop-filter:none!important;
}
#stash *::before, #stash *::after, #modal #stash *::before, #modal #stash *::after{
  background:none!important; background-image:none!important; box-shadow:none!important; opacity:0!important;
}
#stash .stash-grid .stashed.pickable, #modal #stash .stash-grid .stashed.pickable{
  border:1px solid color-mix(in srgb,var(--item-rarity,#64748b) 60%,transparent)!important;
}
#stash .stashed.pickable .socket, #modal #stash .stashed.pickable .socket{
  box-shadow:0 0 6px color-mix(in srgb,var(--item-rarity,#a78bfa) 45%,transparent), inset 0 0 7px rgba(0,0,0,.9)!important;
  opacity:1!important;
}
/* card internals flat too (match the 2-id .stash-grid winners) — kills the faint
   dark gradient inside item-header/stat-lines so the card face is uniform. */
#stash .stash-grid .stashed.pickable .item-header,
#modal #stash .stash-grid .stashed.pickable .item-header,
#stash .stash-grid .stashed.pickable .stat-lines,
#modal #stash .stash-grid .stashed.pickable .stat-lines{
  background:#0d1119!important; background-image:none!important;
}

/* ============================================================
   Hero-view portrait visibility fix (2026-06-28). The portrait frame was
   positioned in a negative-left OUTER gutter (left:-(size+gap)) that the
   modal-card's overflow:auto clipped → invisible. The modal is taller than the
   viewport so overflow:auto must stay (scroll). Move the portrait into a
   reserved gutter INSIDE the scroll box: pad the layout left and pin the frame
   to left:0 so it sits left of the stats column, visible.
   ============================================================ */
#modal .modal-card.modal-hero-view .inventory-layout{
  position:relative;
  padding-left:calc(var(--inventory-outer-portrait-size,68px) + var(--inventory-outer-portrait-gap,10px));
  padding-right:calc(var(--inventory-outer-portrait-size,68px) + var(--inventory-outer-portrait-gap,10px));
}
#modal .modal-card.modal-hero-view .inventory-hero-portrait-frame{
  left:0!important;
  top:0!important;
  z-index:12!important;
}

/* On-screen build version stamp (Ben wants to see the running version). */
body::after{
  content:"build v17";
  position:fixed; bottom:3px; right:6px; z-index:999999; pointer-events:none;
  font:bold 12px monospace; color:#7CFC9A;
  background:rgba(0,0,0,.7); padding:2px 7px; border-radius:5px;
}

/* Compact hero Stats/Pets plaque and make each action read taller in a slimmer button. */
.hero-pet-actions-plaque{
  min-height:27px;
  padding:2px 8px;
}
.hero-pet-actions-plaque .hero-pet-actions{
  width:auto;
  max-width:184px;
  gap:10px;
  padding:2px 8px;
  justify-content:center;
}
.hero-pet-actions .hero-pet-action-btn{
  flex:0 0 78px;
  min-width:78px;
  max-width:78px;
  min-height:27px;
  padding:5px 4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1.08;
}

/* Full-width, centered dropped-item presentation inside adventure log event cards. */
.log-line:has(.adventure-log-item-drop),
.log-line:has(.adventure-log-sale-container){
  width:100%;
  align-items:stretch;
}
.log-line:has(.adventure-log-item-drop) .log-message,
.log-line:has(.adventure-log-sale-container) .log-message{
  flex:1 1 auto;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:center;
}
.log .adventure-log-item-drop{
  align-self:stretch;
  width:100%;
  margin:4px 0;
  text-align:center;
}
.log .adventure-log-item-drop__type,
.log .adventure-log-item-drop__text{
  text-align:center;
}
.log .adventure-log-item-drop__text{
  line-height:1.25;
}

/* Final Stats/Pets quick-action spacing pass: remove plaque rivets and keep icons left of labels. */
.hero-pet-actions-plaque{
  --hero-pet-action-gap:8px;
  padding:var(--hero-pet-action-gap);
}
.hero-pet-actions-plaque::before,
.hero-pet-actions-plaque::after{
  content:none !important;
  display:none !important;
}
.hero-pet-actions-plaque .hero-pet-actions{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  gap:var(--hero-pet-action-gap);
  display:flex;
  justify-content:space-between;
  align-items:stretch;
}
.hero-pet-actions .hero-pet-action-btn{
  flex:1 1 0;
  min-width:0;
  max-width:none;
  min-height:32px;
  padding:6px 8px;
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
  font-size:11px;
  line-height:1;
}
.hero-pet-actions .hero-pet-action-btn::before{
  content:none !important;
  display:none !important;
}
.hero-pet-actions .hero-pet-action-icon,
.hero-pet-actions .hero-pet-action-label{
  display:inline-flex;
  align-items:center;
  line-height:1;
}
.hero-pet-actions .hero-pet-action-icon{
  flex:0 0 auto;
  font-size:1.15em;
  transform:translateY(-.03em);
}
.hero-pet-actions .hero-pet-action-label{
  flex:0 1 auto;
}

/* Clean milestone cards for Keeper defeats and new dungeon depth events. */
.log .adventure-log-simple-event-title{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  line-height:1.05;
  text-align:left;
}
.log .adventure-log-simple-event-title b{
  display:block;
  font-size:14px;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.log .adventure-log-simple-event-title small{
  display:block;
  margin-top:2px;
  color:#cbd5e1;
  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.log .adventure-log-simple-event-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(2,6,23,.62);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 0 16px rgba(var(--log-event-rgb, 139, 92, 246), .26);
  font-size:16px;
}
.log .adventure-log-simple-event-detail{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
}
.log .adventure-log-event-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:18px;
  padding:2px 7px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(15,23,42,.72);
  color:#e2e8f0;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0,0,0,.75);
}
.log .adventure-log-event-pill--danger{ color:#fecaca; border-color:rgba(248,113,113,.32); background:rgba(69,10,10,.55); }
.log .adventure-log-event-pill--success{ color:#bbf7d0; border-color:rgba(74,222,128,.28); background:rgba(5,46,22,.5); }
.log .adventure-log-event-pill--depth{ color:#bfdbfe; border-color:rgba(96,165,250,.3); background:rgba(30,58,138,.5); }
.log .adventure-log-keeper-defeated-title b{
  color:#fecaca;
  text-shadow:0 0 10px rgba(248,113,113,.42), 0 1px 0 rgba(0,0,0,.85);
}
.log .adventure-log-new-dungeon-title b{
  color:#bfdbfe;
  text-shadow:0 0 10px rgba(96,165,250,.48), 0 1px 0 rgba(0,0,0,.85);
}
.log .adventure-log-encounter--dungeon{
  --log-event-rgb:37, 99, 235;
  border-color:rgba(96,165,250,.38);
}
.log .adventure-log-encounter--dungeon .adventure-log-encounter-outcome{
  max-width:100%;
  border-radius:10px;
  border-color:rgba(147,197,253,.22);
  background:rgba(15,23,42,.58);
  color:#dbeafe;
  font-size:11px;
  letter-spacing:.02em;
  text-transform:none;
}

/* Tavern-sign milestone card that combines a Keeper defeat with the newly reached dungeon depth. */
.log .adventure-log-keeper-depth-title b{
  color:#d8b57a;
  text-shadow:0 2px 0 rgba(0,0,0,.9), 0 0 12px rgba(92,51,23,.55);
}
.log .adventure-log-keeper-depth-card{
  position:relative;
  display:grid;
  gap:8px;
  width:min(100%, 360px);
  margin:2px auto 0;
  padding:10px 11px 11px;
  border:3px solid #1c0f08;
  border-radius:12px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.2), rgba(255,255,255,.025) 18%, rgba(0,0,0,.18) 37%, rgba(255,255,255,.02) 62%, rgba(0,0,0,.24)),
    repeating-linear-gradient(0deg, #3a2114 0 13px, #301a10 13px 26px, #452818 26px 39px);
  box-shadow:
    inset 0 0 0 1px rgba(111,68,36,.65),
    inset 0 0 18px rgba(0,0,0,.62),
    0 10px 22px rgba(0,0,0,.5);
  color:#d9c2a0;
}
.log .adventure-log-keeper-depth-card::before,
.log .adventure-log-keeper-depth-card::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(19,10,5,.9), transparent);
  opacity:.72;
}
.log .adventure-log-keeper-depth-card::before{ top:4px; }
.log .adventure-log-keeper-depth-card::after{ bottom:4px; }
.log .adventure-log-keeper-depth-plank{
  position:relative;
  display:grid;
  justify-items:center;
  gap:3px;
  padding:7px 9px;
  border:1px solid rgba(23,12,6,.9);
  border-radius:9px;
  background:rgba(24,13,7,.48);
  box-shadow:inset 0 1px 0 rgba(184,134,76,.16), inset 0 -10px 18px rgba(0,0,0,.25);
  text-align:center;
}
.log .adventure-log-keeper-depth-kicker,
.log .adventure-log-keeper-depth-welcome,
.log .adventure-log-keeper-depth-verdict{
  color:#b99a6b;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  line-height:1.05;
  text-transform:uppercase;
}
.log .adventure-log-keeper-depth-name,
.log .adventure-log-keeper-depth-level{
  color:#e0c08a;
  font-size:15px;
  letter-spacing:.08em;
  line-height:1.05;
  text-transform:uppercase;
  text-shadow:0 2px 0 #120905, 0 0 10px rgba(0,0,0,.58);
}
.log .adventure-log-keeper-depth-verdict strong{ color:#c99a5a; }
.log .adventure-log-keeper-depth-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  height:8px;
}
.log .adventure-log-keeper-depth-divider span{
  width:82%;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, #150b06 18%, #7a4a28 50%, #150b06 82%, transparent);
  box-shadow:0 1px 0 rgba(213,159,94,.16);
}
.log .adventure-log-keeper-depth-pills{ margin-top:1px; }
.log .adventure-log-event-pill--carved{ color:#d6b27a; border-color:rgba(132,83,45,.55); background:rgba(35,19,10,.72); }

/* Hero inventory left-stack alignment pass (portrait/meta + stats + actions). */
#modal .modal-card.modal-hero-view{
  --inventory-portrait-size:114px;
  --inventory-panel-width:276px;
  --inventory-panel-gap:6px;
}
#modal .modal-card.modal-hero-view .inventory-layout{
  padding-left:0;
  padding-right:0;
  gap:6px;
  align-items:flex-start;
}
#modal .modal-card.modal-hero-view .inventory-stats{
  flex:0 0 var(--inventory-panel-width);
  max-width:var(--inventory-panel-width);
  min-width:var(--inventory-panel-width);
  gap:var(--inventory-panel-gap);
}
#modal .modal-card.modal-hero-view .inventory-hero-overview{
  display:grid;
  grid-template-columns:var(--inventory-portrait-size) minmax(0,1fr);
  gap:6px;
  align-items:stretch;
  width:100%;
  margin:0;
  padding:6px;
  box-sizing:border-box;
  border:1px solid rgba(126,34,206,.5);
  border-radius:14px;
  background:
    linear-gradient(165deg,rgba(17,10,32,.78),rgba(8,6,16,.64)),
    radial-gradient(115% 120% at 50% -30%,rgba(126,34,206,.24),transparent 62%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 10px 22px rgba(0,0,0,.28),
    0 0 14px rgba(126,34,206,.16);
}
#modal .modal-card.modal-hero-view .inventory-hero-portrait-frame{
  width:var(--inventory-portrait-size);
  height:var(--inventory-portrait-size);
  min-width:var(--inventory-portrait-size);
  min-height:var(--inventory-portrait-size);
  align-self:stretch;
}
#modal .modal-card.modal-hero-view .inventory-hero-meta-card{
  min-height:var(--inventory-portrait-size);
  width:100%;
  margin:0;
}
#modal .modal-card.modal-hero-view .inventory-hero-stats-card,
#modal .modal-card.modal-hero-view .inventory-actions{
  width:100%;
  margin:0;
}
#modal .modal-card.modal-hero-view .inventory-main{
  gap:6px;
  padding-right:0;
}