/* Dungeon Hunter: both versions. Phone first; widens for a TV in landscape. */
#app.dh{max-width:none}
.dh #screen>div{position:absolute;inset:0;background-size:cover;background-position:center}
.dim{color:var(--dim)}.center{text-align:center}
.dsp{width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.dsp.flip{transform:scaleX(-1)}
.top{position:absolute;top:calc(var(--safe-t) + 10px);left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:3}
.ver{min-width:48px;min-height:40px;border-radius:20px;border:1px solid rgba(157,176,200,.45);background:rgba(7,13,24,.7);font-weight:700;font-size:.85rem;padding:0 12px}
.coins{display:inline-flex;align-items:center;gap:4px;background:rgba(7,13,24,.78);border-radius:20px;padding:6px 12px;font-weight:700;font-variant-numeric:tabular-nums}
.coins b{font-size:.8em;margin-left:4px}.coins b:first-child{margin-left:0}
.cg{color:#ffd24a}.cs{color:#d7dde6}.cb{color:#c8834f}
.toast .coins{background:none;padding:0}
.bar{height:10px;border-radius:6px;background:rgba(0,0,0,.55);overflow:hidden;border:1px solid rgba(255,255,255,.15)}
.bar u{display:block;height:100%;width:0;transition:width .35s ease-out;background:#4ade80}
.bar.hp u{background:linear-gradient(90deg,#22c55e,#4ade80)}.bar.hp u.low{background:linear-gradient(90deg,#ef4444,#f97316)}
.bar.mp u{background:linear-gradient(90deg,#3b82f6,#60a5fa)}.bar.xp u{background:linear-gradient(90deg,#eab308,#fde047)}
.bar.big{height:14px}
.pulse{animation:pz 1.1s ease-in-out infinite}
@keyframes pz{0%,100%{box-shadow:0 0 0 0 rgba(255,214,74,.0)}50%{box-shadow:0 0 0 6px rgba(255,214,74,.55)}}
.dot{position:relative}.dot::after{content:'';position:absolute;top:6px;right:8px;width:10px;height:10px;border-radius:50%;background:#ff4d6d}
button:focus-visible,body.pad button:focus{outline:3px solid #ffd24a;outline-offset:2px}

/* home 1 */
.home1{display:flex;flex-direction:column;justify-content:flex-end;padding:0 18px calc(var(--safe-b) + 20px)}
.home1::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,24,0) 35%,rgba(7,13,24,.9) 78%)}
.htitle{position:relative;margin-bottom:16px}
.htitle small,.tower>small{color:#7dd3fc;letter-spacing:.12em;font-weight:700;font-size:.75rem;text-transform:uppercase}
.htitle h1{font:800 clamp(2.6rem,12vw,4.2rem)/1 Georgia,serif;margin:.2rem 0 0;text-shadow:0 2px 18px #000,0 0 30px rgba(96,165,250,.5)}
.hmenu{position:relative;display:grid;gap:10px;max-width:520px;width:100%}
.hmenu .btn{text-align:center}.hrow{display:flex;gap:10px}.hrow .btn{flex:1}

/* hall 1 */
.hall1{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 18px calc(var(--safe-b) + 20px);gap:12px}
.hall1::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,24,.35),rgba(7,13,24,.85))}
.hall1>*{position:relative}
.fl{font-size:1.2rem;background:rgba(7,13,24,.75);padding:6px 14px;border-radius:20px}
.pips{display:flex;gap:6px;justify-content:center}
.pips i{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.3);font-style:normal;font-size:.7rem;display:grid;place-items:center}
.pips i.done{background:#22c55e;border-color:#4ade80}.pips i.now{border-color:#ffd24a;box-shadow:0 0 10px #ffd24a}.pips i.boss{border-color:#f87171}
.hallhero{width:min(52vw,260px);height:min(52vw,260px)}
.hallbars{width:min(70vw,320px);display:grid;gap:6px}
.hall1 .btn.big{max-width:420px}

/* battle 1: classic side-on */
.b1{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr auto auto;padding:calc(var(--safe-t) + 10px) 10px calc(var(--safe-b) + 10px);gap:8px}
.b1::before{content:'';position:absolute;inset:0;background:rgba(7,13,24,.35)}
.b1>*{position:relative}
.fbox,.hbox{background:rgba(250,246,235,.94);color:#1b2433;border-radius:10px;padding:8px 12px;border:3px solid #384b66;align-self:start;display:grid;grid-template-columns:1fr auto;gap:2px 8px}
.fbox .bar,.hbox .bar,.hbox small{grid-column:1/3}.hbox small{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.fbox{grid-column:1;grid-row:1}.fspot{grid-column:2;grid-row:1/3;position:relative}
.hspot{grid-column:1;grid-row:2/4;position:relative}.hbox{grid-column:2;grid-row:3;align-self:end}
.plat{position:absolute;left:8%;right:8%;bottom:4%;height:16%;border-radius:50%;background:radial-gradient(rgba(0,0,0,.55),transparent 70%)}
.b1 #foe,.b1 #me{position:absolute;inset:0}
.b1 #me .dsp{transform:scaleX(-1)}
.b1.isboss #foe{inset:-12% -8% 0 -18%}
.msg{grid-column:1/3;grid-row:4;background:rgba(9,17,31,.92);border:2px solid #60a5fa;border-radius:10px;padding:10px 14px;min-height:52px;font-weight:600}
.cmds{grid-column:1/3;grid-row:5;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cmd{text-align:center;min-height:64px;font-size:1.02rem}.cmd small{margin:0}

/* shared animations */
.lunge{animation:lg .3s}@keyframes lg{50%{transform:translate(18%,-8%)}}
.lungeL{animation:lgl .3s}@keyframes lgl{50%{transform:translate(-18%,8%)}}
.lunge2{animation:lg2 .3s}@keyframes lg2{50%{transform:translateY(14%) scale(1.15)}}
.hurt{animation:ht .35s}@keyframes ht{0%,100%{filter:none}30%{filter:drop-shadow(0 0 6px #ff3b4a);transform:translateX(-4%)}60%{transform:translateX(4%)}}
.wind{animation:wd .6s}@keyframes wd{50%{transform:scale(1.12);filter:drop-shadow(0 0 16px #f87171)}}
.die{animation:dy .7s forwards}@keyframes dy{to{opacity:0;transform:translateY(12%) scale(.85)}}
.dmg{position:absolute;z-index:30;transform:translateX(-50%);font:900 1.7rem/1 system-ui,sans-serif;color:#fff;text-shadow:0 2px 0 #000,0 0 8px #000;pointer-events:none;animation:up 1s ease-out forwards;white-space:nowrap}
.dmg.crit{color:#ffd24a;font-size:2.3rem}.dmg.bad{color:#ff6b6b}.dmg.heal{color:#4ade80}.dmg.sk{color:#93c5fd}
@keyframes up{0%{opacity:0;margin-top:10px}15%{opacity:1}100%{opacity:0;margin-top:-60px}}

/* home 2: the tower */
.home2{display:flex;flex-direction:column}
.home2::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,24,.2),rgba(7,13,24,.85) 60%)}
.tower{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding:70px 18px 12px}
.flr{position:relative;width:min(78vw,420px);min-height:56px;border-radius:14px;display:flex;align-items:center;gap:12px;padding:8px 16px;background:rgba(30,41,59,.75);border:2px solid rgba(148,163,184,.35);color:var(--dim)}
.flr span{font:800 1.3rem Georgia,serif;min-width:44px}.flr em{margin-left:auto;font-style:normal}
.flr.up{opacity:.55}.flr.done{background:rgba(20,83,45,.6);border-color:#22c55e;color:#bbf7d0}
.flr.now{min-height:84px;background:linear-gradient(180deg,#1d4ed8,#1e3a8a);border-color:#93c5fd;color:#fff;box-shadow:0 0 24px rgba(96,165,250,.6)}
.flr.now .pips{flex:1;gap:4px}.flr.now .pips i{width:14px;height:14px;border-width:1px}.flr.now b{font-size:1.4rem}
.towhero{display:flex;align-items:center;gap:8px;height:96px;font-weight:800;text-shadow:0 2px 6px #000}.towhero .dsp{width:96px;height:96px}
.tabs2{position:relative;display:flex;justify-content:center;gap:10px;padding:8px 10px calc(var(--safe-b) + 10px);background:rgba(7,13,24,.9);border-top:1px solid rgba(148,163,184,.25)}
.tabs2 button{width:64px;height:56px;border-radius:14px;border:1px solid rgba(148,163,184,.35);background:rgba(30,41,59,.85);font-size:1.6rem}
.tabs2 button.on{border-color:#93c5fd;background:#1e3a8a}

/* battle 2: tap the enemy */
.b2{display:flex;flex-direction:column}
.b2::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,24,.55),rgba(7,13,24,.2) 40%,rgba(7,13,24,.85))}
.b2>*{position:relative}
.ftop{display:flex;gap:10px;align-items:center;padding:calc(var(--safe-t) + 10px) 10px 0}
.fname{flex:1;display:grid;grid-template-columns:1fr auto;gap:2px 8px}.fname .bar{grid-column:1/3}.fname span{color:var(--dim)}
.where{background:rgba(7,13,24,.75);border-radius:14px;padding:4px 10px;font-weight:700;font-size:.85rem}
.foe2{flex:1;min-height:0;border:0;background:none;position:relative;margin:10px 6%;padding:0;border-radius:24px}
.foe2 .dsp{position:absolute;inset:0}
.foe2:active .dsp{transform:scaleX(-1) scale(.94)}
.isboss .foe2{margin:0}
.tapme{position:absolute;right:16%;bottom:12%;font-size:2.6rem;animation:tp 1s infinite}
@keyframes tp{50%{transform:translateY(-12px)}}
.me2{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:0 12px calc(var(--safe-b) + 16px)}
.mecard{flex:1;display:flex;align-items:center;gap:10px;background:rgba(9,17,31,.85);border:2px solid rgba(148,163,184,.35);border-radius:16px;padding:6px 10px}
.mecard .dsp{width:64px;height:64px;flex:none}.mebars{flex:1;display:grid;gap:6px}
.rb{width:76px;height:76px;border-radius:50%;border:3px solid rgba(148,163,184,.5);background:rgba(30,41,59,.92);font-size:2rem;position:relative;flex:none}
.rb small{position:absolute;bottom:2px;right:6px;font-size:.8rem;font-weight:800}
.rb.sk{width:92px;height:92px;border-color:#93c5fd;background:radial-gradient(#1d4ed8,#172554)}
.rb:disabled{opacity:.4}
.say2{position:absolute;left:0;right:0;top:34%;text-align:center;font:900 1.6rem/1.1 system-ui,sans-serif;text-shadow:0 2px 0 #000,0 0 10px #000;pointer-events:none;opacity:0}
.say2.pop{animation:sp 1.1s forwards}@keyframes sp{0%{opacity:0;transform:scale(.7)}15%{opacity:1;transform:scale(1.1)}70%{opacity:1}100%{opacity:0}}
.dhnext .next2{display:grid;gap:10px}.dhnext .btn{text-align:center}

/* panels and boxes */
.win.dhp{max-height:88vh;overflow:auto;width:min(94vw,560px);background:linear-gradient(180deg,#0f1b30,#0a1222);border:1px solid #3b5b8a;box-shadow:0 10px 40px #000;border-radius:14px}
.win.dhnext{background:rgba(10,18,34,.96);border:1px solid #3b5b8a;border-radius:14px;width:min(90vw,420px)}
.ph{display:flex;align-items:center;gap:10px;margin-bottom:8px}.ph h2{margin:0;flex:1}
.x{width:44px;height:44px;border-radius:50%;border:1px solid rgba(148,163,184,.4);background:rgba(30,41,59,.9);font-size:1.1rem}
.tally{background:#1e3a8a;border-radius:14px;padding:4px 12px;font-weight:800}
.herohead{display:flex;gap:12px;align-items:center;margin-bottom:8px}.herohead>div{flex:1}.dsp.mini{width:72px;height:72px;flex:none}
.herohead small{color:var(--dim)}
.pts{color:#ffd24a;font-weight:800;margin:.4rem 0}
.stats{display:grid;gap:6px;margin-bottom:10px}
.srow{display:flex;align-items:center;gap:10px;background:rgba(30,41,59,.6);border-radius:10px;padding:6px 10px}
.srow span{flex:1}.srow small{display:block;color:var(--dim);font-size:.75rem}.srow em{font:800 1.3rem system-ui;font-style:normal;min-width:44px;text-align:right}
.plus{font-size:1.4rem!important;min-width:48px}
.gear{display:grid;gap:6px}
.gslot,.frow,.loot{display:flex!important;align-items:center;gap:10px;text-align:left}
.frow{background:rgba(30,41,59,.6);border-radius:10px;padding:6px 10px}.frow>div{flex:1}
.gslot small,.frow small,.loot small{display:block;color:var(--dim);font-size:.78rem;font-weight:400}
.lic{font-size:1.5rem;width:34px;text-align:center}
.scroll{max-height:46vh;overflow:auto;display:grid;gap:6px;margin-top:8px}
.loot{border:2px solid rgba(148,163,184,.35);border-radius:12px;padding:8px 12px;background:rgba(30,41,59,.7);margin:6px 0}
.tree{position:relative;width:100%;aspect-ratio:1;max-height:56vh;margin:0 auto;max-width:56vh}
.tree svg{position:absolute;inset:0;width:100%;height:100%}
.tree line{stroke:rgba(148,163,184,.35);stroke-width:1.2}.tree line.lit{stroke:#ffd24a;stroke-width:1.8}
.node{position:absolute;transform:translate(-50%,-50%);width:13%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(148,163,184,.4);background:#111827;font-size:clamp(1rem,4vw,1.5rem);filter:grayscale(1);opacity:.55;padding:0}
.node.next{opacity:.8}
.node.open{filter:none;opacity:1;border-color:#ffd24a;animation:pz 1.1s infinite}
.node.lit{filter:none;opacity:1;border-color:#ffd24a;background:radial-gradient(#854d0e,#1c1917);box-shadow:0 0 14px rgba(255,210,74,.7)}
.node.sel{outline:3px solid #fff}
.ndesc{min-height:92px;display:grid;gap:6px;margin-top:8px;text-align:center}.ndesc small{display:block;color:var(--dim)}.ndesc .ok{color:#4ade80}
.win.dhbox{background:none;border:0;box-shadow:none;width:min(92vw,420px)}
.boxwin{display:grid;gap:6px;justify-items:center;text-align:left}.boxwin .loot,.boxwin .btn{width:100%}.boxwin .btn{text-align:center}
.chest{font-size:6rem;background:none;border:0;border-radius:24px;animation:bx 1.2s infinite}
.boss .chest{filter:drop-shadow(0 0 18px #5fd38a)}.dungeon .chest{filter:drop-shadow(0 0 24px #ffb13b)}
.chest.opened{animation:op .4s forwards}@keyframes op{0%{transform:scale(1)}50%{transform:scale(1.3) rotate(-6deg)}100%{transform:scale(.8)}}
@keyframes bx{50%{transform:rotate(4deg) scale(1.05)}}

/* TV and other wide screens */
@media (orientation:landscape) and (min-width:700px){
  html{font-size:clamp(16px,1.4vw,26px)}
  .home1{padding:0 6vw 6vh;justify-content:center}.home1::before{background:linear-gradient(90deg,rgba(7,13,24,.9),rgba(7,13,24,.2) 70%)}
  .hmenu{max-width:30rem}
  .b1{grid-template-columns:1fr 1.1fr 1fr;grid-template-rows:auto 1fr auto;padding:3vh 3vw}
  .fbox{grid-column:3;grid-row:1}.fspot{grid-column:2/4;grid-row:1/3}.hspot{grid-column:1/2;grid-row:1/3}.hbox{grid-column:1;grid-row:1;align-self:start}
  .msg{grid-column:1/3;grid-row:3}.cmds{grid-column:3;grid-row:3;grid-template-columns:1fr;grid-template-rows:repeat(3,auto)}
  .cmd{min-height:3.2rem}
  .hallhero{width:34vh;height:34vh}
  .tower{flex-direction:row-reverse;align-items:center;justify-content:center;flex-wrap:wrap;padding:12vh 4vw 2vh}
  .flr{width:auto;min-width:9rem}.flr.now{min-width:22rem}
  .b2 .foe2{margin:1vh 25vw}
  .me2{max-width:900px;margin:0 auto;width:100%}
  .tree{max-width:60vh;max-height:60vh}
}
a.btn{text-decoration:none;color:#fff}
.mecard{min-width:0}@media (max-width:480px){.mecard .dsp{display:none}}

/* bars with the numbers inside */
.bar.tx{height:22px;position:relative;border-radius:8px}
.bar.tx span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 .82rem/1 system-ui,sans-serif;color:#fff;text-shadow:0 1px 2px #000,0 0 4px #000;font-variant-numeric:tabular-nums;white-space:nowrap}
.hbox .bar.tx{margin-top:4px}
.lbl{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.9rem}
.frow1 .bar.tx{height:18px}.frow1 .bar.tx span{font-size:.72rem}

/* groups: enemies in formation, a target ring */
.foes{position:absolute;inset:0}
.foe{position:absolute;inset:0;border:0;background:none;padding:0;border-radius:18px}
.foe:disabled{pointer-events:none}
.foes.n2 .foe:nth-child(1){inset:0 30% 30% 0}.foes.n2 .foe:nth-child(2){inset:30% 0 0 30%}
.foes.n3 .foe:nth-child(1){inset:0 45% 45% 0}.foes.n3 .foe:nth-child(2){inset:0 0 45% 45%}.foes.n3 .foe:nth-child(3){inset:45% 22% 0 22%}
.foes.n2 .foe.bossf{inset:-10% 25% 10% -10%}.foes.n2 .foe.bossf+.foe{inset:45% 0 0 50%}
.foe .dsp{position:relative;z-index:1}
.foe.tgt::after{content:'';position:absolute;z-index:0;left:var(--rl,22%);width:var(--rw,56%);top:var(--rt,auto);bottom:var(--rb,auto);height:var(--rh,12%);border:3px solid #ffd24a;border-radius:50%;background:radial-gradient(closest-side,rgba(255,210,74,.28),transparent);box-shadow:0 0 12px #ffd24a,inset 0 0 8px rgba(255,210,74,.6);animation:pz 1.1s infinite;pointer-events:none}
.foe.tgt:not([style*='--rt'])::after{--rb:0}
.foe.elite .dsp{filter:drop-shadow(0 0 10px #c27bff) drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.tagh{position:absolute;top:8%;right:14%;background:#16a34a;color:#fff;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-weight:900;box-shadow:0 0 8px #4ade80}
.fbox{display:grid;gap:4px}
.frow1{display:grid;grid-template-columns:1fr auto;gap:2px 8px}.frow1 .bar{grid-column:1/3}
.frow1.dead{opacity:.35}.frow1.tgt b::before{content:'▶ ';color:#b45309}
.b1 .hbox{display:block}
.b1 .fbox{display:grid}

/* first-points hint */
.hintwrap{position:relative;flex:1;display:flex}.hintwrap .btn{flex:1}
.hint{position:absolute;bottom:calc(100% + 10px);left:0;right:-40%;z-index:6;background:#ffd24a;color:#1b1300;font-weight:700;font-size:.88rem;line-height:1.3;padding:8px 12px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.5);animation:rise .3s ease-out}
.hint::after{content:'';position:absolute;top:100%;left:24px;border:8px solid transparent;border-top-color:#ffd24a}
.top .hintwrap{flex:none}.top .hint{left:auto;right:0;top:calc(100% + 10px);bottom:auto;width:min(70vw,260px)}
.top .hint::after{top:auto;bottom:100%;left:auto;right:18px;border-top-color:transparent;border-bottom-color:#ffd24a}

/* hero page: only the pressed row reacts */
.hpmp{display:flex;gap:14px;font-size:.9rem;margin-top:2px}
.srow.boost{animation:boost .55s ease-out}
@keyframes boost{0%{background:rgba(255,210,74,.55);box-shadow:0 0 0 0 rgba(255,210,74,.8);transform:scale(1.03)}100%{background:rgba(30,41,59,.6);box-shadow:0 0 0 14px rgba(255,210,74,0);transform:none}}
em.bump{animation:bump .45s cubic-bezier(.2,1.8,.4,1)}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.6);color:#ffd24a;text-shadow:0 0 12px #ffd24a}100%{transform:scale(1)}}
.plus.gone{opacity:.25}
.spark{position:absolute;z-index:40;width:7px;height:7px;border-radius:50%;pointer-events:none;animation:spk .7s ease-out forwards}
@keyframes spk{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.dmg.plusone{color:#ffd24a;font-size:1.5rem}.dmg.mp{color:#7cc4ff;font-size:1.1rem}
.win.dhp{animation:none}
.sub{margin:.4rem 0 .2rem;font-size:.8rem;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.itabs{display:flex;gap:6px;margin-top:10px}.itabs .btn.on{background:#1e3a8a;border-color:#93c5fd}
.loot em{font-style:normal;font-weight:800;margin-left:4px}.loot em.up{color:#4ade80}.loot em.down{color:#f87171}
.loot>div{flex:1}.ok{color:#4ade80}
a.ver{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#fff}

/* attack looks */
.vfx{position:absolute;z-index:32;pointer-events:none;transform:translate(-50%,-50%) scale(var(--s,1))}
.slash{width:150px;height:150px;border-radius:50%;border-top:7px solid #fff;border-right:3px solid rgba(255,255,255,.6);filter:drop-shadow(0 0 6px #fff);animation:sl .32s ease-out forwards}
.slash.rev{border-top:0;border-bottom:7px solid #fff;border-right:0;border-left:3px solid rgba(255,255,255,.6)}
@keyframes sl{0%{transform:translate(-50%,-50%) scale(var(--s)) rotate(-70deg);opacity:0}30%{opacity:1}100%{transform:translate(-50%,-50%) scale(var(--s)) rotate(40deg);opacity:0}}
.cross{width:180px;height:180px;background:linear-gradient(45deg,transparent 46%,#bfe3ff 47%,#fff 50%,#bfe3ff 53%,transparent 54%),linear-gradient(-45deg,transparent 46%,#bfe3ff 47%,#fff 50%,#bfe3ff 53%,transparent 54%);filter:drop-shadow(0 0 10px #60a5fa) drop-shadow(0 0 20px #3b82f6);animation:cr .5s ease-out forwards}
@keyframes cr{0%{transform:translate(-50%,-50%) scale(calc(var(--s)*.3)) rotate(-20deg);opacity:0}25%{opacity:1;transform:translate(-50%,-50%) scale(calc(var(--s)*1.1))}100%{transform:translate(-50%,-50%) scale(calc(var(--s)*1.3));opacity:0}}
.impact{width:150px;height:150px;border-radius:50%;background:radial-gradient(#fff 0 12%,#ffd24a 13% 30%,rgba(255,154,60,.6) 31% 45%,transparent 46%);animation:im .5s ease-out forwards}
@keyframes im{0%{transform:translate(-50%,-50%) scale(calc(var(--s)*.2));opacity:1}100%{transform:translate(-50%,-50%) scale(calc(var(--s)*1.6));opacity:0}}
.fireball{width:44px;height:44px;border-radius:50%;background:radial-gradient(#fff6c2 0 20%,#ffb13b 40%,#ff4d1a 70%,transparent 72%);box-shadow:0 0 18px #ff7a1a,0 0 36px #ff4d1a;transform:translate(-50%,-50%);margin:-22px 0 0 -22px;left:0;top:0;transition:transform .34s cubic-bezier(.5,0,.9,.6)}
.vfx.fireball{transform:none}
.boom{width:190px;height:190px;border-radius:50%;background:radial-gradient(#fff 0 10%,#ffd36b 11% 28%,#ff7a1a 29% 48%,rgba(255,77,26,.4) 49% 62%,transparent 63%);animation:im .55s ease-out forwards}
.critring{width:120px;height:120px;border-radius:50%;border:5px solid #ffd24a;animation:im .45s ease-out forwards}
@keyframes charge{0%,100%{filter:none}40%{filter:drop-shadow(0 0 14px #93c5fd);transform:scale(1.08)}}
.charge{animation:charge .45s}

/* ✨ toggle */
#fxbtn{position:absolute;z-index:45;top:calc(var(--safe-t) + 4px);left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;border:1px solid rgba(148,163,184,.35);background:rgba(7,13,24,.55);font-size:.9rem;line-height:1;padding:0;opacity:.75}
#fxbtn[aria-pressed="true"]{border-color:#ffd24a;opacity:1}

/* fancy mode */
body.fancy .dh #screen>div{animation:kb 30s ease-in-out infinite alternate}
@keyframes kb{from{background-size:110%}to{background-size:125%}}
body.fancy .foe .dsp,body.fancy #me .dsp{animation:bob 2.4s ease-in-out infinite}
body.fancy .foe:nth-child(2) .dsp{animation-delay:-.8s}body.fancy .foe:nth-child(3) .dsp{animation-delay:-1.6s}
@keyframes bob{50%{translate:0 -4%}}
body.fancy .b1::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 20% 80%,#ffd27a,transparent),radial-gradient(2px 2px at 60% 90%,#9ae6ff,transparent),radial-gradient(1.5px 1.5px at 80% 70%,#ffd27a,transparent),radial-gradient(2px 2px at 35% 60%,#c4f1ff,transparent);background-size:100% 100%;animation:embers 6s linear infinite;opacity:.8}
@keyframes embers{from{transform:translateY(10%)}to{transform:translateY(-30%);opacity:0}}
body.fancy .dmg{text-shadow:0 2px 0 #000,0 0 14px currentColor}
body.fancy .dmg.crit{font-size:2.8rem}
body.fancy .btn.primary,body.fancy .cmd:not(:disabled){box-shadow:0 0 14px rgba(96,165,250,.35)}
body.fancy .plat{background:radial-gradient(rgba(96,165,250,.35),rgba(0,0,0,.5) 50%,transparent 70%)}
@media (prefers-reduced-motion:reduce){body.fancy *{animation-duration:.01s!important}}

/* group fights get their own layout (wins over the one-on-one grid) */
.b1.ff{grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) minmax(0,24%) auto auto;grid-template-areas:"fbox fbox" "fspot fspot" "hspot hbox" "msg msg" "cmds cmds"}
.b1.ff .fbox{grid-area:fbox;grid-column:fbox;grid-template-columns:1fr 1fr;align-self:start}
.b1.ff .frow1:only-child{grid-column:1/3}
.b1.ff .fspot{grid-area:fspot}
.b1.ff .hspot{grid-area:hspot}
.b1.ff .hbox{grid-area:hbox;align-self:center}
.b1.ff .msg{grid-area:msg}.b1.ff .cmds{grid-area:cmds}
.b1.ff .foes{display:flex;align-items:flex-end;justify-content:center;gap:2%}
.b1.ff .foe{position:relative;inset:auto!important;flex:1;height:78%;max-width:46%}
.b1.ff .foe:nth-child(2){height:92%}
.b1.ff .foe.bossf{flex:1.7;height:100%;max-width:62%}
.b1.ff .foe .plat{bottom:0}
@media (orientation:landscape) and (min-width:700px){
  .b1.ff{grid-template-columns:1.5fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"fbox hbox" "fspot hspot" "msg cmds"}
  .b1.ff .fbox{grid-template-columns:repeat(3,1fr)}
  .b1.ff .hbox{align-self:start}
  .b1.ff #me .dsp{transform:none}
}
#fxbtn{width:26px;height:26px;top:calc(var(--safe-t) + 2px);font-size:.8rem}
.srow{padding:6px 8px 6px 12px}.sname{min-width:0}.sname small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.78rem!important}
.sname small b{color:#e8edf5}.sname small b.up{color:#4ade80}
.srow em small{display:block;font-size:.65rem;color:#93c5fd;font-weight:700;text-align:right;line-height:1}
.hpmp{flex-wrap:wrap}

/* red System window */
.win.red{background:none;border:0;box-shadow:none;width:min(90vw,420px);animation:sysin .35s ease-out}
.sysred{position:relative;background:linear-gradient(180deg,rgba(40,4,8,.94),rgba(18,2,4,.96));border:1px solid #ff3b4a;border-radius:6px;padding:18px 20px 16px;text-align:center;color:#ffe3e5;
  box-shadow:0 0 22px rgba(255,40,60,.55),inset 0 0 26px rgba(255,40,60,.18);font-family:ui-monospace,Menlo,Consolas,monospace;overflow:hidden}
.sysred::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,60,80,.06) 0 1px,transparent 1px 3px);pointer-events:none}
.sysred .sh{font-weight:800;letter-spacing:.3em;color:#ff5a66;text-shadow:0 0 10px #ff2a3a;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,59,74,.5)}
.sysred p{margin:.35rem 0;font-size:.95rem}.sysred p b{color:#fff}
.sysred .btn{margin-top:10px;text-align:center;border-color:#ff3b4a;background:rgba(80,8,14,.9)}
.sbar{height:4px;margin-top:14px;background:rgba(255,59,74,.2);border-radius:2px;overflow:hidden}.sbar u{display:block;height:100%;width:0;background:#ff3b4a;box-shadow:0 0 8px #ff3b4a}
@keyframes sysin{0%{opacity:0;transform:scaleY(.1)}60%{opacity:1;transform:scaleY(1.04)}100%{transform:none}}
.win.dhp{width:100%;max-width:560px;box-sizing:border-box}.win.red,.win.dhnext{max-width:420px;width:100%}
.win.dhp{grid-template-columns:minmax(0,1fr)}.win.dhp>*,.herohead>div,.srow>span{min-width:0}
.stats,.gear{grid-template-columns:minmax(0,1fr)}.srow{min-width:0}
/* patrol clock */
.patrol{position:relative;max-width:520px;width:100%;background:rgba(9,17,31,.82);border:1px solid rgba(147,197,253,.35);border-radius:12px;padding:8px 12px;margin-bottom:10px;display:grid;gap:6px}
.patrol.full{border-color:#ffd24a;box-shadow:0 0 14px rgba(255,210,74,.35)}
.ptop{display:flex;align-items:baseline;gap:8px}.ptop span{font-weight:700;flex:1}.ptop b{font:800 1.25rem/1 ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;color:#e0f2fe}
.ptop small{color:var(--dim);font-family:ui-monospace,Menlo,monospace}.patrol.full .ptop small{color:#ffd24a;font-weight:800}
.pbar u{background:linear-gradient(90deg,#0ea5e9,#22d3ee)!important}.patrol.full .pbar u{background:linear-gradient(90deg,#eab308,#fde047)!important}
.pbar .coins{background:none;padding:0;font-size:.8rem}
.prow{display:flex;align-items:center;justify-content:space-between;gap:8px}.prow small{color:var(--dim)}.prow small .coins{background:none;padding:0;font-size:.78rem}
.prow .btn{min-height:38px}
.coins.bump{animation:bump .45s cubic-bezier(.2,1.8,.4,1)}
@media (orientation:landscape) and (min-width:700px){.patrol{max-width:30rem}}
/* skill tree v2 */
.ptabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.ptabs .btn{font-size:.78rem;padding:6px 4px;min-width:0}.ptabs .btn.on{background:#1e3a8a;border-color:#93c5fd}
.ptabs .dot::after{top:4px;right:4px;width:8px;height:8px}
.tree2{position:relative;width:100%;max-width:420px;margin:4px auto 0;aspect-ratio:1/1.1;max-height:48vh}
.tree2 svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tree2 line{stroke:rgba(148,163,184,.3);stroke-width:1.3}.tree2 line.lit{stroke:#ffd24a;stroke-width:2;filter:drop-shadow(0 0 2px #ffd24a)}
.troot{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);font-size:.72rem;color:var(--dim);background:#0a1222;padding:0 6px;border-radius:8px}
.node2{position:absolute;transform:translate(-50%,-50%);width:17%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(148,163,184,.4);background:#111827;padding:0;display:grid;place-items:center}
.node2 .ni{font-size:clamp(1rem,5vw,1.5rem);filter:grayscale(1);opacity:.5}
.node2.lit .ni,.node2.open .ni{filter:none;opacity:1}
.node2.open{border-color:#ffd24a;animation:pz 1.1s infinite}
.node2.lit{background:radial-gradient(#854d0e,#1c1917);border-color:#ffd24a;box-shadow:0 0 12px rgba(255,210,74,.6)}
.node2.maxed{border-color:#fde047;box-shadow:0 0 18px rgba(253,224,71,.85)}
.node2.lock{opacity:.6}
.node2.sel{outline:3px solid #fff;outline-offset:2px}
.pips2{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);display:flex;gap:2px}
.pips2 i{width:7px;height:7px;border-radius:50%;background:#334155;border:1px solid #0a1222}.pips2 i.on{background:#ffd24a;box-shadow:0 0 4px #ffd24a}
.node2 .lv{position:absolute;top:-8px;right:-10px;background:#1e293b;border:1px solid #475569;border-radius:8px;font-size:.6rem;padding:0 4px;color:#cbd5e1}
.ndesc .rk{font-size:.75rem;color:#ffd24a;font-weight:700}.ndesc small.up{color:#4ade80}.tiny{font-size:.75rem;margin:2px 0 0}
.well{border-color:#a855f7!important}.btn.well{background:rgba(59,7,100,.6)}.btn.well small{color:#d8b4fe}
.x.well:disabled{opacity:.3}
.ph .x.well{margin-right:-4px}
.swirl{animation:swirl .45s ease-in}@keyframes swirl{50%{transform:translate(-50%,-50%) rotate(180deg) scale(.7);filter:hue-rotate(200deg) brightness(1.6)}}
.sysred #rbyes{border-color:#ff3b4a}.sysred .btn+.btn{margin-top:6px}
.tree2{max-height:40vh}
.tl{display:flex;gap:6px}
textarea#sug{width:100%;box-sizing:border-box;min-height:120px;padding:10px;border-radius:10px;border:1px solid #3b5b8a;background:#050c18;color:#fff;font:inherit;resize:vertical}
.sugrow{display:flex;gap:8px}.sugrow .btn.primary{flex:1}.sugrow .btn.small{flex:none}
.sugi{background:rgba(30,41,59,.6);border-radius:10px;padding:6px 10px;margin:4px 0}.sugi p{margin:2px 0;font-size:.9rem;white-space:pre-wrap}
.rcode{width:100%;box-sizing:border-box;min-height:52px;padding:10px;border-radius:10px;border:1px solid #ff3b4a;background:#050c18;color:#fff;font:700 1.3rem ui-monospace,Menlo,monospace;letter-spacing:.15em;text-align:center;text-transform:uppercase}
/* guilds */
.btn.locked{opacity:.6}
.gin{width:100%;box-sizing:border-box;min-height:48px;padding:10px;border-radius:10px;border:1px solid #3b5b8a;background:#050c18;color:#fff;font:inherit;font-size:1.1rem}
.emb{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.emb .btn{font-size:1.3rem;min-width:0;padding:4px}.emb .btn.on{background:#1e3a8a;border-color:#ffd24a}
.ghead{display:flex;gap:12px;align-items:center}.gemb{font-size:2.6rem}.ghead b{font-size:1.2rem}.ghead small{display:block;color:var(--dim)}
.gperk{margin:4px 0;font-size:.9rem}.gperk b{color:#4ade80}.gperk small{color:var(--dim)}
.gmem{max-height:30vh}.glog{display:block;color:var(--dim);font-size:.78rem}
.loot .btn.small+.btn.small{margin-left:-4px}

/* ---- fit-to-screen cleanup (2026-11-07) ---- */
/* filter tabs: equal columns, never wider than the panel */
.itabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}.itabs .btn{min-width:0;padding:6px 2px;text-align:center}
/* skill path tabs: icon over a short label */
.ptabs .btn{display:flex;flex-direction:column;align-items:center;gap:0;line-height:1.1;font-size:.72rem}
/* forge rows: name and stats get the full width, the +1 button sits under them */
.frow{flex-wrap:nowrap}.frow>div{flex:1;min-width:0}.frow.fg{flex-wrap:wrap}.frow.fg>div{flex:1 1 55%}.frow .btn.small{flex:none}
.frow .btn[data-forge]{flex:1 1 100%;display:flex;justify-content:center;gap:8px;align-items:center;min-height:40px}.frow .btn[data-forge] small{display:inline;margin:0}
/* enemy name boxes: one line each, level on the right, never overlapping */
.frow1{grid-template-columns:minmax(0,1fr) auto}
.frow1 b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:.9rem}.frow1 span{font-size:.78rem;white-space:nowrap}
.b1.ff .fbox{gap:4px 10px}
.b1.ff .frow1 b{font-size:.8rem}
/* battle buttons: one line where possible */
.cmd{font-size:.95rem;line-height:1.15;padding:6px 4px}.cmd small{font-size:.7rem}
/* item names: wrap cleanly, never push buttons off */
.loot b,.frow b,.gslot b{overflow-wrap:anywhere}
.loot .btn.small{flex:none}
/* the ✦ effects button: top-right corner, clear of the boxes */
#fxbtn{left:auto;right:8px;transform:none;top:calc(var(--safe-t) + 6px)}
body[data-scr="home"] #fxbtn{top:calc(var(--safe-t) + 52px)}
.b1.ff .fbox{margin-right:30px}
@media (max-width:380px){
  .ptabs .btn{font-size:.66rem}.cmd{font-size:.86rem}.hmenu .btn{font-size:.95rem}
  .htitle h1{font-size:2.4rem}.patrol .ptop b{font-size:1.1rem}
  .srow em{font-size:1.15rem;min-width:36px}
}
/* rules page tables scroll inside their own box */
.ph h2{white-space:nowrap}.ph .tally .coins{background:none;padding:0;font-size:.85rem}
/* leaderboard */
.board{max-height:55vh}
.brow{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto auto;gap:8px;align-items:center;background:rgba(30,41,59,.6);border-radius:10px;padding:6px 10px;margin:3px 0}
.brow.mine{outline:2px solid #ffd24a}.brow .brk{font-weight:800;text-align:center}.brow b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brow small{color:var(--dim);font-size:.72rem}
.bv{font-size:.8rem;color:var(--dim);white-space:nowrap}.bv.on{color:#fff;font-weight:800}
.top .tl .ver{min-width:38px;padding:0 8px}
@media (max-width:380px){.top .tl{gap:4px}.top .tl .ver{min-width:34px;padding:0 6px}.top .coins{font-size:.85rem;padding:5px 8px}}

/* ===== polish pass (2026-11-07): same style, more depth ===== */
/* backdrop: dim and soften whatever is behind a window */
.dh .veil{backdrop-filter:blur(3px) saturate(.9);-webkit-backdrop-filter:blur(3px) saturate(.9);background:rgba(2,6,14,.62)}
/* windows: layered glass with a lit top edge */
.win.dhp,.win.dhnext{background:linear-gradient(180deg,rgba(26,42,72,.97) 0%,rgba(13,22,40,.98) 38%,rgba(8,14,27,.99) 100%);border:1px solid rgba(120,160,220,.35);
  box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 40px rgba(60,110,200,.08)}
.win.dhp h2,.ph h2{background:linear-gradient(180deg,#e0f2fe,#7dd3fc);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;letter-spacing:.14em}
/* buttons: bevel, depth, a real press */
.dh .btn{background:linear-gradient(180deg,rgba(38,56,90,.95),rgba(18,30,52,.95));border:1px solid rgba(130,165,215,.32);
  box-shadow:0 3px 0 rgba(0,0,0,.45),0 6px 14px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .08s,box-shadow .08s,filter .15s}
.dh .btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)}
.dh .btn.primary{background:linear-gradient(180deg,#22c7b4 0%,#109a8c 55%,#0b7d73 100%);border-color:#5ff0de;box-shadow:0 3px 0 #06544d,0 8px 20px rgba(20,200,180,.25),inset 0 1px 0 rgba(255,255,255,.35)}
.dh .btn.primary:active:not(:disabled){box-shadow:0 1px 0 #06544d,0 3px 8px rgba(20,200,180,.2),inset 0 1px 0 rgba(255,255,255,.25)}
.dh .btn.on{background:linear-gradient(180deg,#2f5fc4,#1e3a8a);border-color:#93c5fd;box-shadow:0 2px 0 #10265e,inset 0 1px 0 rgba(255,255,255,.2)}
.dh .btn:disabled{filter:saturate(.4) brightness(.8);box-shadow:none}
.dh .x,.dh .ver{background:linear-gradient(180deg,rgba(40,58,92,.9),rgba(15,25,44,.9));box-shadow:0 2px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)}
/* bars: recessed track, glossy fill */
.bar{background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(20,28,44,.7));border:1px solid rgba(0,0,0,.6);box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.08)}
.bar u{position:relative;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.bar u::after{content:'';position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));border-radius:inherit}
/* cards and rows: soft lift */
.loot,.srow,.frow,.sugi,.brow,.flr{box-shadow:0 2px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06)}
.patrol{background:linear-gradient(180deg,rgba(20,34,60,.88),rgba(8,15,28,.9));box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1)}
.coins{box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
/* title: carved and lit */
.htitle h1{color:#f4f8ff;text-shadow:0 1px 0 #cfe0ff,0 2px 0 #8fb0e0,0 3px 0 #4a6a9e,0 4px 0 #22385e,0 8px 14px rgba(0,0,0,.75),0 0 30px rgba(96,165,250,.55)}
/* battle: depth of field, light from above, ground shadows, sprites that sit in the scene */
.b1{isolation:isolate}
.b1::before{background:radial-gradient(120% 80% at 50% 35%,rgba(7,13,24,0) 30%,rgba(7,13,24,.55) 100%),linear-gradient(180deg,rgba(255,240,200,.06),rgba(7,13,24,.35) 70%,rgba(7,13,24,.7));z-index:-1}
.b1 .dsp,.hall1 .dsp{filter:drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 10px 14px rgba(0,0,0,.5)) drop-shadow(0 0 1px rgba(255,255,255,.4))}
.plat{background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,.25) 60%,transparent);height:14%}
.foe .dsp,#me .dsp{animation:breathe 3.6s ease-in-out infinite;transform-origin:50% 95%}
.foe:nth-child(2) .dsp{animation-delay:-1.2s}.foe:nth-child(3) .dsp{animation-delay:-2.4s}
.b1 #me .dsp{animation-name:breatheFlip}.foe .dsp.flip{animation-name:breatheFlip}
@keyframes breathe{50%{transform:scale(1.015,.99)}}@keyframes breatheFlip{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-1) scale(1.015,.99)}}
@media (orientation:landscape) and (min-width:700px){.b1.ff #me .dsp{animation-name:breathe}}
.fbox,.hbox{box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(0,0,0,.08);border-radius:12px;background:linear-gradient(180deg,#fffdf6,#efe7d3)}
.msg{background:linear-gradient(180deg,rgba(14,26,48,.95),rgba(7,13,26,.97));box-shadow:0 8px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1)}
.cmd:not(:disabled){text-shadow:0 1px 0 rgba(0,0,0,.6)}
/* floating numbers: inked outline */
.dmg{-webkit-text-stroke:1.5px rgba(0,0,0,.85);paint-order:stroke fill}
/* hall and home: light pooling under the hero */
.hallhero{position:relative}.hallhero::after{content:'';position:absolute;left:15%;right:15%;bottom:2%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);z-index:-1}
.home1::after,.hall1::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 90% at 50% 20%,transparent 50%,rgba(0,0,0,.45));z-index:0}
.home1>*,.hall1>*{z-index:1}
@media (prefers-reduced-motion:reduce){.foe .dsp,#me .dsp{animation:none}}
/* attack looks v2 */
.vfx.proj{transform:none;left:0;top:0;transition:transform .32s cubic-bezier(.5,0,.9,.6);border-radius:50%;background:radial-gradient(#fff 0 18%,var(--c) 45%,transparent 72%);box-shadow:0 0 16px var(--c),0 0 32px var(--c)}
.vfx.proj.fireball{background:radial-gradient(#fff6c2 0 18%,#ffb13b 38%,var(--c) 64%,transparent 72%)}
.vfx.proj.arrow{border-radius:2px;height:4px!important;width:46px!important;margin:-2px 0 0 -23px!important;background:linear-gradient(90deg,transparent,var(--c) 30%,#fff 92%,#fff);box-shadow:0 0 8px var(--c)}
.vfx.proj.shard{border-radius:2px 50% 50% 2px;height:12px!important;background:linear-gradient(90deg,transparent,var(--c) 40%,#fff);box-shadow:0 0 12px var(--c)}
.vfx.proj.falling{transition:transform .38s cubic-bezier(.6,0,1,.8)}
.boltline{width:6px;transform:translateX(-50%)!important;top:0!important;background:linear-gradient(180deg,transparent,var(--c) 20%,#fff 50%,var(--c));box-shadow:0 0 14px var(--c),0 0 30px var(--c);clip-path:polygon(40% 0,100% 30%,30% 55%,100% 80%,50% 100%,0 70%,70% 45%,0 20%);width:40px!important;animation:bl .45s steps(3) forwards}
@keyframes bl{0%{opacity:1}100%{opacity:0}}
.impact{background:radial-gradient(#fff 0 12%,var(--c,#ffd24a) 13% 30%,transparent 46%)}
.impact.big,.boom.big,.cross.big,.ice.big,.zap.big,.critring.big{--s:1.6}
.impact.small{--s:.6}
.boom.gold{background:radial-gradient(#fff 0 12%,#fde047 13% 30%,rgba(250,204,21,.5) 31% 50%,transparent 52%);animation:im .55s ease-out forwards}
.cross{filter:drop-shadow(0 0 10px var(--c,#60a5fa)) drop-shadow(0 0 20px var(--c,#3b82f6))}
.slash{border-top-color:var(--c,#fff)}.slash.thin{border-top-width:3px}
.ice{width:150px;height:150px;background:conic-gradient(from 0deg,transparent 0 8%,var(--c) 9% 11%,transparent 12% 20%,var(--c) 21% 23%,transparent 24% 33%,var(--c) 34% 36%,transparent 37% 45%,var(--c) 46% 48%,transparent 49% 58%,var(--c) 59% 61%,transparent 62% 70%,var(--c) 71% 73%,transparent 74% 83%,var(--c) 84% 86%,transparent 87%);border-radius:50%;filter:drop-shadow(0 0 8px var(--c));animation:im .55s ease-out forwards}
.zap{width:150px;height:150px;border-radius:50%;background:radial-gradient(#fff 0 10%,var(--c) 11% 22%,transparent 40%);filter:drop-shadow(0 0 12px var(--c));animation:zp .45s steps(4) forwards}
@keyframes zp{0%{transform:translate(-50%,-50%) scale(calc(var(--s)*.6))}50%{transform:translate(-50%,-50%) scale(calc(var(--s)*1.3)) rotate(30deg)}100%{transform:translate(-50%,-50%) scale(calc(var(--s)*1.5));opacity:0}}
.critring{border-color:var(--c,#ffd24a)}
/* skill tree: sub tabs, weapon note, attack nodes */
.ptabs.sub{grid-template-columns:repeat(3,1fr);margin-top:-2px}.ptabs.sub .btn{flex-direction:row;gap:4px;font-size:.78rem}
.wneed{margin:2px 0;font-size:.78rem;color:#fca5a5;text-align:center}.wneed.ok{color:#86efac}
.node2.act{border-radius:30%}.node2.act.lit{background:radial-gradient(#7c2d12,#1c1917)}
.ndesc .skinfo{color:#93c5fd}
/* battle skill list */
.cmds.sk{grid-template-columns:repeat(2,1fr);max-height:34vh;overflow:auto}
.cmds.sk .btn{min-height:52px}
@media (orientation:landscape) and (min-width:700px){.cmds.sk{grid-template-columns:1fr 1fr;grid-template-rows:none}}

/* ===== looks: avatar layers ===== */
.av{position:relative;width:100%;height:100%;container-type:inline-size;animation:breathe2 3.6s ease-in-out infinite;transform-origin:50% 95%}
.av .dsp{position:absolute;inset:0;transform:none!important;animation:none!important}
.av.flip,.b1 #me .av{transform:scaleX(-1)}
@media (orientation:landscape) and (min-width:700px){.b1.ff #me .av{transform:none}}
@keyframes breathe2{50%{scale:1.015 .99}}
.av .shirt{position:absolute;inset:0;background:var(--c);-webkit-mask-size:100% 100%;mask-size:100% 100%;mix-blend-mode:color;opacity:.95;pointer-events:none}
.av .shirt+.shirt{display:none}
.av .acc{position:absolute;transform:translate(-50%,-50%);line-height:1;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.av .acc.head{font-size:26cqw;transform:translate(-50%,-30%)}
.av .acc.head.halo{width:30cqw;height:9cqw;border:2cqw solid #fde68a;border-radius:50%;box-shadow:0 0 6cqw #fde68a;transform:translate(-50%,-60%)}
.av .acc.face{font-size:17cqw}
.av .acc.back{font-size:42cqw;z-index:-1;opacity:.95}
.av .aura{position:absolute;inset:6% 10% 2%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 55%,transparent),transparent 75%);animation:aura 2.4s ease-in-out infinite;z-index:-1}
@keyframes aura{50%{transform:scale(1.08);opacity:.75}}
.mini{width:72px;height:72px;flex:none}
.wprev{width:150px;height:150px;margin:0 auto}
.lic .sw{display:inline-block;width:24px;height:24px;border-radius:6px;background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 0 0 2px rgba(255,255,255,.2)}
.lic .sw.ring{border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);box-shadow:none}
.loot.wearing{outline:2px solid #ffd24a}
.top .tr{display:flex;gap:6px;align-items:center}
.ver.dia{min-width:auto;padding:0 10px;font-weight:800;color:#bae6fd;position:relative}.ver.dia b{color:#4ade80;margin-left:3px}
.sysred.gold{border-color:#ffd24a;box-shadow:0 0 22px rgba(255,210,74,.5),inset 0 0 26px rgba(255,210,74,.15)}.sysred.gold .sh{color:#ffd24a;text-shadow:0 0 10px #ffb13b;border-color:rgba(255,210,74,.5)}
.win.red .sysred.gold{background:linear-gradient(180deg,rgba(40,30,4,.95),rgba(18,12,2,.96))}
.hrow .btn small{display:block}
@media (max-width:380px){.ver.dia{padding:0 6px;font-size:.8rem}.top .tl{gap:3px}.top .tl .ver{min-width:30px;padding:0 4px}}
/* old flip rules on the bare sprite no longer apply inside an avatar */
.b1 #me .av .dsp{transform:none!important}
/* the avatar is always a centred square, so shirt colour and accessories line up with the picture */
#me,.hallhero,.wprev,.mini,.foe,.towhero{container-type:size}
.av{width:min(100cqw,100cqh);height:min(100cqw,100cqh);margin:0 auto;inset:0}
#me>.av,.foe>.av{position:absolute;margin:auto}
.ideas{max-height:52vh}.idea{background:rgba(30,41,59,.6);border-radius:12px;padding:8px 12px;margin:6px 0;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.idea small{color:var(--dim);font-size:.74rem}.idea p{margin:4px 0;white-space:pre-wrap;font-size:.92rem}
.vchips{display:flex;flex-wrap:wrap;gap:4px}.vchip{font-size:.72rem;background:rgba(0,0,0,.3);border-radius:10px;padding:2px 8px}.vchip.yes{background:rgba(22,101,52,.6)}.vchip.no{background:rgba(127,29,29,.6)}.vchip.maybe{background:rgba(133,77,14,.6)}
.vrow{display:flex;gap:8px;margin-top:6px}.vrow .btn{flex:1}
/* living portal on the home screen */
.portalfx{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:0;mix-blend-mode:screen}
.portalfx i{position:absolute;inset:0;border-radius:50%}
.portalfx .sw1{background:conic-gradient(from 0deg,transparent 0 10%,rgba(125,211,252,.55) 18%,transparent 30% 45%,rgba(167,139,250,.5) 55%,transparent 68% 80%,rgba(56,189,248,.5) 88%,transparent);
  -webkit-mask:radial-gradient(closest-side,transparent 18%,#000 38%,#000 62%,transparent 78%);mask:radial-gradient(closest-side,transparent 18%,#000 38%,#000 62%,transparent 78%);animation:spin 9s linear infinite}
.portalfx .sw2{inset:14%;background:conic-gradient(from 90deg,transparent 0 15%,rgba(186,230,253,.6) 25%,transparent 38% 60%,rgba(147,197,253,.55) 72%,transparent 85%);
  -webkit-mask:radial-gradient(closest-side,transparent 10%,#000 35%,transparent 75%);mask:radial-gradient(closest-side,transparent 10%,#000 35%,transparent 75%);animation:spin 5s linear infinite reverse}
.portalfx .core{inset:36%;background:radial-gradient(closest-side,#fff,rgba(186,230,253,.9) 35%,rgba(56,189,248,.4) 65%,transparent);animation:core 2.6s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes core{50%{transform:scale(1.25);opacity:.75}}
@media (prefers-reduced-motion:reduce){.portalfx i{animation:none}}
.x.help{width:34px;height:34px;font-weight:900;color:#93c5fd;margin-right:-4px}
.helpov{z-index:60}
.sysred.blue{border-color:#60a5fa;box-shadow:0 0 22px rgba(96,165,250,.5),inset 0 0 26px rgba(96,165,250,.15);background:linear-gradient(180deg,rgba(6,20,44,.95),rgba(3,10,24,.97))}
.sysred.blue .sh{color:#93c5fd;text-shadow:0 0 10px #3b82f6;border-color:rgba(96,165,250,.5)}.sysred.blue::before{background:repeating-linear-gradient(0deg,rgba(96,165,250,.06) 0 1px,transparent 1px 3px)}
.sysred.blue .btn{border-color:#60a5fa;background:rgba(14,40,90,.9)}
.av .tint{position:absolute;inset:0;background:var(--c);-webkit-mask-size:100% 100%;mask-size:100% 100%;pointer-events:none}
.approw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.approw .sw-b{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;min-height:58px}.approw .sw-b small{font-size:.68rem;margin:0}
.approw .sw{display:inline-block;width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 0 0 2px rgba(255,255,255,.2)}
/* zones: each floor's own light. The picture is filtered on a layer behind, so the fighters stay true-colour. */
.zoned::before{z-index:-2}
.hall1.zoned,.b1.zoned{isolation:isolate}

.b1.zoned::before{background:radial-gradient(120% 80% at 50% 35%,transparent 30%,rgba(7,13,24,.55) 100%),linear-gradient(180deg,hsla(var(--zm),70%,60%,.10),rgba(7,13,24,.35) 70%,rgba(7,13,24,.7));z-index:-1}
.hall1.zoned::before{background:linear-gradient(180deg,hsla(var(--zm),70%,60%,.12),rgba(7,13,24,.85));z-index:-1}
.fl small{display:block;font-size:.66rem;font-weight:600;color:#93c5fd;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.htitle2{color:#ffd24a;font-size:.85rem}
/* mini bosses */
.pips i.mini{border-color:#c084fc;font-size:.62rem}
.foe.minif .dsp{filter:drop-shadow(0 0 10px #c084fc) drop-shadow(0 0 22px rgba(192,132,252,.6)) drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.b1.solo .foe.minif{inset:-10% -6% 0 -14%}
.minibn{color:#c084fc;letter-spacing:.08em}
.elite .chest{filter:drop-shadow(0 0 18px #c084fc)}
.meet{width:110px;height:110px;margin:0 auto}
.tree2{aspect-ratio:1/1.28;max-height:52vh}.node2{width:15%}
.node2.lock{opacity:.55}
/* each floor: its own pan, zoom and mirror of the room */
.zbg{position:absolute;inset:0;z-index:-3;pointer-events:none;background-size:cover;background-repeat:no-repeat;background-position:var(--zp,50%) 60%;
  transform:scale(calc(var(--zz,1) * var(--zf,1)),var(--zz,1));-webkit-filter:hue-rotate(var(--zh)) brightness(var(--zb)) saturate(var(--zs));filter:hue-rotate(var(--zh)) brightness(var(--zb)) saturate(var(--zs))}
/* particles */
.zparts{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.zparts i{position:absolute;bottom:-10px;width:var(--sz);height:var(--sz);border-radius:50%;opacity:0;animation:prise 6s linear infinite}
.zparts.dust i{background:rgba(255,240,210,.55);animation-name:pdrift}.zparts.motes i{background:#c084fc;box-shadow:0 0 6px #a855f7;animation-name:pdrift}
.zparts.embers i{background:#ffb13b;box-shadow:0 0 6px #ff5d2a}.zparts.sparks i{background:#fde047;box-shadow:0 0 6px #f59e0b;animation-name:pspark}
.zparts.spores i{background:#86efac;box-shadow:0 0 6px #22c55e;animation-name:pdrift}.zparts.sparkle i{background:#e9d5ff;box-shadow:0 0 8px #c084fc;animation-name:ptwinkle;bottom:auto;top:calc(var(--sz) * 18%)}
.zparts.bubbles i{border:1px solid rgba(186,230,253,.7);background:transparent;width:calc(var(--sz) * 2);height:calc(var(--sz) * 2)}
.zparts.snow i{background:#fff;top:-10px;bottom:auto;animation-name:pfall}.zparts.drips i{background:#7dd3fc;width:2px;height:8px;border-radius:2px;top:-10px;bottom:auto;animation-name:pfall}
.zparts.steam i{background:rgba(226,232,240,.35);width:calc(var(--sz) * 8);height:calc(var(--sz) * 8);filter:blur(6px)}
.zparts.stars i{background:#fff;animation-name:ptwinkle;bottom:auto;top:calc(var(--sz) * 12%)}
.zparts.leaves i{background:linear-gradient(135deg,#86efac,#15803d);border-radius:0 70% 0 70%;width:calc(var(--sz) * 2.4);height:calc(var(--sz) * 1.4);top:-12px;bottom:auto;animation-name:pleaf;opacity:.85}
.zparts.ash i{background:rgba(203,213,225,.55);top:-10px;bottom:auto;animation-name:pfall;filter:blur(.5px)}
.zparts.amber i{background:#fbbf24;box-shadow:0 0 8px #f59e0b,0 0 2px #fff7d6;animation-name:pdrift}
@keyframes pleaf{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:.9}50%{transform:translate(-26px,45vh) rotate(160deg)}100%{opacity:0;transform:translate(18px,92vh) rotate(340deg)}}
@keyframes prise{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translate(20px,-90vh)}}
@keyframes pdrift{0%{opacity:0;transform:translate(0,0)}20%{opacity:.7}100%{opacity:0;transform:translate(40px,-60vh)}}
@keyframes pspark{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(-30px,-40vh)}}
@keyframes pfall{0%{opacity:0;transform:translate(0,0)}10%{opacity:.9}100%{opacity:0;transform:translate(-20px,100vh)}}
@keyframes ptwinkle{0%,100%{opacity:.1}50%{opacity:1;transform:scale(1.6)}}
.zparts.flick::after{content:'';position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 40%,rgba(255,170,80,.10),transparent);animation:flick 3.2s steps(9) infinite}
@keyframes flick{0%,100%{opacity:.4}20%{opacity:.9}35%{opacity:.5}60%{opacity:1}80%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.zparts{display:none}}
/* fighters stand on the room's floor */
.b1 .foe .dsp{object-position:50% 100%}
#me>.av,.foe>.av{margin:auto auto 0}
.b1.solo .fspot{grid-row:2/3;margin-top:0}
.b1.solo.isboss .fspot{grid-row:1/3}
.ideaq{font-style:italic;color:#fff;white-space:pre-wrap;max-height:30vh;overflow:auto}
.nh{margin:.6rem 0 .1rem!important;color:#ff9aa2;font-weight:800;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase}.notes{list-style:none;margin:0;padding:0;text-align:left;font-size:.85rem;max-height:34vh;overflow:auto}.notes li{margin:3px 0}
/* long-press info card */
.infopop{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:80;width:min(86%,360px);background:linear-gradient(180deg,rgba(14,30,60,.98),rgba(6,14,30,.98));border:1px solid #60a5fa;border-radius:14px;padding:12px 16px;box-shadow:0 0 24px rgba(96,165,250,.5),0 20px 40px rgba(0,0,0,.6);pointer-events:none;animation:sysin .2s ease-out}
.infopop b{display:block;font-size:1.05rem;color:#e0f2fe;margin-bottom:4px}.infopop p{margin:4px 0;font-size:.88rem;color:#cbd5e1}
[data-info]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* speed button, next to the effects toggle */
#spdbtn{position:absolute;z-index:45;top:calc(var(--safe-t) + 6px);right:40px;min-width:26px;height:26px;border-radius:13px;border:1px solid rgba(148,163,184,.35);background:rgba(7,13,24,.55);font-size:.72rem;font-weight:800;color:#e2e8f0;padding:0 6px;opacity:.8}
#spdbtn.on{border-color:#4ade80;color:#4ade80;opacity:1}
body[data-scr="home"] #spdbtn{top:calc(var(--safe-t) + 52px)}
/* faster battles also speed up the little animations */
.lunge,.lungeL,.lunge2,.hurt,.wind,.die,.charge,.knock{animation-duration:calc(.35s / var(--gs,1))!important}
/* fancy extras */
.zoompunch{animation:zp2 .28s ease-out}@keyframes zp2{40%{transform:scale(1.045)}}
.knock{animation:kn .3s ease-out}@keyframes kn{30%{translate:5% -2%}}
.castglow{animation:cg .5s ease-out}@keyframes cg{40%{filter:drop-shadow(0 0 18px var(--glow))}}
.conf{position:absolute;top:-10px;z-index:60;width:8px;height:12px;border-radius:2px;pointer-events:none;animation:conf 1.8s ease-in forwards}
@keyframes conf{to{transform:translateY(110vh) rotate(var(--r));opacity:.6}}
.rays{position:absolute;inset:-20%;z-index:55;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 45%,rgba(255,215,90,.22) 0 6deg,transparent 6deg 18deg);animation:rays 1.4s ease-out forwards}
@keyframes rays{0%{opacity:0;transform:rotate(0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:rotate(40deg) scale(1.2)}}
body.fancy .dmg{animation-duration:1.2s}
body.fancy .b1 .plat{animation:platpulse 3s ease-in-out infinite}@keyframes platpulse{50%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.conf,.rays{display:none}}
/* ---- fit pass 2 (small phones, big text) ---- */
body:not([data-scr="home"]) #fxbtn,body:not([data-scr="home"]) #spdbtn{display:none}
.tally{white-space:nowrap;flex:none;font-size:.85rem;padding:4px 10px}
.ph{flex-wrap:nowrap;min-width:0}.ph h2{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ver.dia{white-space:nowrap}
.node2 .lv{font-size:.52rem;padding:0 3px;top:-6px;right:-8px}
@media (max-width:360px){
  .top .tl .ver{min-width:28px;height:34px;padding:0 3px;font-size:.85rem}
  .top .coins{font-size:.78rem;padding:4px 7px;gap:2px}.top .tr{gap:4px}.ver.dia{padding:0 5px;font-size:.75rem}
  .ph h2{font-size:.9rem;letter-spacing:.08em}.x{width:38px;height:38px}.x.help{width:30px;height:30px}
  .win.dhp{padding:12px}.srow{padding:5px 6px 5px 10px}.srow em{font-size:1.05rem}.plus{min-width:42px}
  .cmd{font-size:.8rem;min-height:56px}.msg{font-size:.88rem;padding:8px 10px;min-height:44px}
  .hall1 .btn.big{font-size:1rem;min-height:52px}.hallhero{width:44vw;height:44vw}
  .patrol .ptop span{font-size:.85rem}.htitle h1{font-size:2.1rem}
}
@media (max-height:600px){.htitle{margin-bottom:6px}.htitle h1{font-size:2rem}.patrol{padding:6px 10px;margin-bottom:6px}.hmenu{gap:6px}.hmenu .btn{min-height:42px}}
#modal:not(:empty)~#fxbtn,#modal:not(:empty)~#spdbtn{display:none}
@media (max-width:380px){.tree2{max-height:62vh}.ph h2{font-size:.82rem;letter-spacing:.04em}}
/* healing */
.healcol{width:120px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(134,239,172,.75),rgba(74,222,128,.25) 60%,transparent);animation:hc .9s ease-out forwards;mix-blend-mode:screen}
@keyframes hc{0%{opacity:0;transform:translate(-50%,-30%) scale(calc(var(--s)*.6),calc(var(--s)*.3))}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(var(--s),calc(var(--s)*1.2))}}
.potfx::after{content:'🧪';font-size:42px;position:absolute;left:-21px;top:-60px;animation:potup .7s ease-out forwards}
@keyframes potup{0%{transform:translateY(10px) rotate(-20deg);opacity:0}40%{opacity:1}100%{transform:translateY(-30px) rotate(20deg);opacity:0}}
.healplus{position:absolute;z-index:34;color:#4ade80;font:900 22px/1 system-ui;text-shadow:0 0 8px #22c55e,0 2px 0 #052e16;pointer-events:none;animation:hp 1.2s ease-out forwards}
@keyframes hp{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-90px) scale(1.2)}}
.healed{animation:hd .8s ease-out}@keyframes hd{40%{filter:drop-shadow(0 0 16px #4ade80)}}
.prow .x2{border-color:#ffd24a;color:#ffd24a}.prow{gap:6px}.prow small{flex:1}
/* pets */
.petpic{display:inline-grid;place-items:center;width:44px;height:44px;flex:none}.petpic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}.petpic b{font-size:30px}
/* v90: the pet stands on the ground in front of the hero, facing the enemies, big enough to see (flyers hover) */
#pet{position:absolute;left:48%;bottom:-3%;width:66%;height:34%;z-index:3;pointer-events:none}
#pet .petpic{width:100%;height:100%;display:block}#pet .petpic img{display:block;object-position:50% 100%;animation:petidle 2.6s ease-in-out infinite;transform-origin:50% 100%}
#pet .petpic b{font-size:min(14vw,64px);display:grid;place-items:end center;height:100%}
#pet .petshadow{position:absolute;left:22%;right:22%;bottom:1%;height:8%;border-radius:50%;background:radial-gradient(rgba(0,0,0,.55),transparent 70%)}
#pet.pet-owl,#pet.pet-hawk{bottom:26%;width:50%;height:28%;left:50%}#pet.pet-owl .petshadow,#pet.pet-hawk .petshadow{bottom:-90%;opacity:.5}
#pet.pet-owl .petpic img,#pet.pet-hawk .petpic img{animation:petfly 2.2s ease-in-out infinite}
@keyframes petidle{50%{transform:translateY(-3%) scaleY(1.03)}}@keyframes petfly{50%{transform:translateY(-9%)}}
.b1.ff #pet{left:48%}
.petbite{animation:pb calc(.42s / var(--gs,1)) cubic-bezier(.3,0,.3,1)}@keyframes pb{35%{transform:translate(70%,-18%) scale(1.12)}60%{transform:translate(78%,-14%) scale(1.08) rotate(4deg)}}
.pounce{animation:pnc calc(.55s / var(--gs,1)) cubic-bezier(.3,0,.3,1)}@keyframes pnc{40%{transform:translate(95%,-60%) scale(1.3) rotate(-10deg)}70%{transform:translate(100%,-40%) scale(1.2)}}
body.lowpower #pet .petpic img{animation:none}@media (prefers-reduced-motion:reduce){#pet .petpic img{animation:none}.petbite,.pounce{animation:none}}
/* enemies always take the tap: they sit above the message and stat boxes */
.b1 .fspot{z-index:4}.b1 .foe{z-index:4}.b1 .msg,.b1 .hbox{z-index:2}
.foe.down{pointer-events:auto;opacity:.35}
/* enemies leaving the field */
.foe.gone{visibility:hidden;pointer-events:none}
.halfcut{position:absolute;z-index:31;object-fit:contain;object-position:50% 100%;pointer-events:none;transform:scaleX(-1)}
.halfcut.top{clip-path:polygon(0 0,100% 0,100% 38%,0 62%);animation:cutTop .85s ease-in forwards}
.halfcut.bot{clip-path:polygon(0 62%,100% 38%,100% 100%,0 100%);animation:cutBot .85s ease-in forwards}
@keyframes cutTop{0%{transform:scaleX(-1)}25%{transform:scaleX(-1) translate(-6%,-6%)}100%{transform:scaleX(-1) translate(-30%,-25%) rotate(-25deg);opacity:0}}
@keyframes cutBot{0%{transform:scaleX(-1)}25%{transform:scaleX(-1) translate(4%,3%)}100%{transform:scaleX(-1) translate(15%,30%) rotate(10deg);opacity:0}}
.blowup .dsp{animation:blow .3s ease-in forwards!important}@keyframes blow{to{transform:scaleX(-1) scale(1.35);filter:brightness(3) saturate(0);opacity:0}}
.faint .dsp{animation:faint .5s ease-in forwards!important}@keyframes faint{to{transform:scaleX(-1) translateY(45%) scaleY(.6);opacity:0;filter:brightness(.4)}}
.est{color:#fde68a;font-weight:800}.est.weak{color:#4ade80}
/* ===== more visuals ===== */
/* entrances */
.b1 .foe .dsp{animation-name:enter,breatheFlip;animation-duration:.55s,3.6s;animation-timing-function:cubic-bezier(.2,1.4,.4,1),ease-in-out;animation-iteration-count:1,infinite;animation-delay:0s,.55s}
@keyframes enter{0%{transform:scaleX(-1) translateY(-40%);opacity:0}100%{transform:scaleX(-1);opacity:1}}
.b1 #me{animation:heroin .5s ease-out}@keyframes heroin{from{transform:translateX(-40%);opacity:0}}
/* boss title card */
.bosscard{position:absolute;left:0;right:0;top:30%;z-index:58;text-align:center;pointer-events:none;padding:10px 0;background:linear-gradient(90deg,transparent,rgba(127,29,29,.85) 20%,rgba(127,29,29,.85) 80%,transparent);animation:bcard 2.2s ease-in-out forwards}
.bosscard.bcmini{background:linear-gradient(90deg,transparent,rgba(88,28,135,.85) 20%,rgba(88,28,135,.85) 80%,transparent)}
.bosscard small{display:block;letter-spacing:.4em;font-weight:800;color:#fecaca;font-size:.72rem}.bosscard b{font:900 1.6rem/1.1 Georgia,serif;color:#fff;text-shadow:0 2px 0 #000,0 0 18px rgba(255,80,80,.7)}
@keyframes bcard{0%{transform:translateX(-100%);opacity:0}15%{transform:none;opacity:1}80%{transform:none;opacity:1}100%{transform:translateX(100%);opacity:0}}
/* health: white trail of what was just lost */
.bar.tx .trail{position:absolute;left:0;top:0;bottom:0;width:100%;background:rgba(255,255,255,.75);border-radius:inherit}
.bar.tx u{position:relative;z-index:1}.bar.tx span{z-index:2}
/* taking a big hit, and low health */
.ouch{animation:ouch .45s ease-out}@keyframes ouch{0%{box-shadow:inset 0 0 0 0 rgba(255,0,0,0)}30%{box-shadow:inset 0 0 90px 30px rgba(255,30,30,.55)}100%{box-shadow:inset 0 0 0 0 rgba(255,0,0,0)}}
.b1.lowhp::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 70px 20px rgba(220,20,20,.45);animation:beat 1s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:.35}15%{opacity:1}30%{opacity:.5}45%{opacity:.9}}
/* the room drifts slowly */
.b1 .zbg,.hall1 .zbg{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{background-position:calc(var(--zp,50%) - 3%) 58%}to{background-position:calc(var(--zp,50%) + 3%) 62%}}
/* damage numbers pop harder */
.dmg{animation-name:up2}@keyframes up2{0%{opacity:0;margin-top:14px;transform:translateX(-50%) scale(.5)}15%{opacity:1;transform:translateX(-50%) scale(1.25)}30%{transform:translateX(-50%) scale(1)}100%{opacity:0;margin-top:-70px}}
@media (prefers-reduced-motion:reduce){.b1 .zbg,.hall1 .zbg,.b1.lowhp::after{animation:none}}
/* Nov 7: boss fights pull the camera back a little so effects have room */
.b1.zoomout .fspot,.b1.zoomout .hspot{transform:scale(.86);transform-origin:50% 80%;transition:transform .6s ease}
/* big-win celebrations: mini boss, floor boss, dungeon boss */
.celeb{position:absolute;left:0;right:0;top:32%;z-index:60;text-align:center;pointer-events:none;padding:14px 0;background:linear-gradient(90deg,transparent,rgba(88,28,135,.92) 15%,rgba(88,28,135,.92) 85%,transparent);animation:celeb 1.9s ease-out forwards}
.celeb.cboss{background:linear-gradient(90deg,transparent,rgba(153,27,27,.92) 15%,rgba(153,27,27,.92) 85%,transparent);animation-duration:2.4s}
.celeb.cdungeon{top:26%;padding:24px 0;background:linear-gradient(90deg,transparent,rgba(161,98,7,.95) 12%,rgba(161,98,7,.95) 88%,transparent);animation-duration:3.2s}
.celeb small{display:block;letter-spacing:.35em;font-weight:800;color:#fde68a;font-size:.75rem}
.celeb b{display:block;font:900 2rem/1.1 Georgia,serif;color:#fff;text-shadow:0 2px 0 #000,0 0 22px rgba(255,210,74,.85)}
.celeb.cdungeon b{font-size:2.6rem;color:#fff7d6}
@keyframes celeb{0%{transform:scale(2.4);opacity:0}12%{transform:scale(.94);opacity:1}18%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:scale(1.04)}}
@keyframes celebfade{0%,85%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.celeb{animation:celebfade 2s forwards}.b1.zoomout .fspot,.b1.zoomout .hspot{transition:none}}
/* double rewards button in the hall */
.hall1 .dbl{margin:6px auto 0;display:block}.hall1 .dbl small{display:block;opacity:.85}
/* mailbox and badges */
.mailbox .mail{background:rgba(255,255,255,.06);border-radius:12px;padding:10px 12px;margin:8px 0}.mailbox .mail.new{box-shadow:inset 3px 0 0 #ff4d6d}
.mail .mh{display:flex;justify-content:space-between;gap:8px}.mail p{margin:6px 0}.mail .mr{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700}
.badges .bdg{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border-radius:12px;padding:8px 10px;margin:6px 0}.badges .bdg.on{box-shadow:inset 0 0 0 2px #ffd24a}
.badges .bdg.locked{opacity:.5}.badges .bdg>div{flex:1}.badges .bdg small{display:block;opacity:.8}.bdg .bi{font-size:1.8rem}
.wbadge{margin-right:4px}.board .brow{cursor:pointer}
.ginfo{padding:2px 8px;min-height:0;vertical-align:middle}.glevels .glv.on{box-shadow:inset 0 0 0 2px #ffd24a}.glevels .glv.got{opacity:.75}.glevels .gtot{text-align:right;opacity:.85}
.glevels .glv{display:block}.glevels .glv .gtot{display:block;text-align:left;margin-top:2px}
/* Super Boost: a ticking chip, a gold aura on the hero, gold damage numbers */
.boostchip{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;background:linear-gradient(90deg,#b45309,#f59e0b);color:#fff;font-weight:800;font-size:.8rem;box-shadow:0 0 12px rgba(255,200,60,.7)}
.hbox .boostchip{margin:0 0 0 6px;font-size:.7rem;padding:1px 7px}
body.boosted .b1 #me .dsp,body.boosted .hall1 .hallhero .dsp{filter:drop-shadow(0 0 6px #ffd24a) drop-shadow(0 0 16px rgba(255,170,40,.75)) drop-shadow(0 10px 14px rgba(0,0,0,.5))}
body.boosted.fancy .b1 #me{animation:boostglow 1.6s ease-in-out infinite}@keyframes boostglow{50%{filter:drop-shadow(0 0 8px rgba(255,214,102,.7))}}
.dmg.boost{color:#ffd24a!important;text-shadow:0 0 8px rgba(255,170,40,.9),0 2px 0 #000;font-size:1.15em}
@media (prefers-reduced-motion:reduce){body.boosted.fancy .b1 #me{animation:none}}

/* ---- Stage 2b: quests, taunt, Spark Tap, guided unlocks ---- */
.quests .sub small{display:block;text-transform:none;letter-spacing:0;font-size:.72rem}
.quest>div{flex:1;min-width:0}.quest .qbar,.qbar{height:16px;margin:4px 0;position:relative}
.qbar u{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#ffd24a);border-radius:6px}
.qbar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;text-shadow:0 1px 2px #000}
.quest.qdone{opacity:.55}
#me.taunting{animation:taunting .7s ease}
@keyframes taunting{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-10px) rotate(-6deg)}40%{transform:translateY(0) rotate(5deg)}60%{transform:translateY(-6px) rotate(-4deg)}80%{transform:translateY(0) rotate(2deg)}}
.sparkhave{font-size:1.1rem;margin:.4rem 0}
.orbwrap{display:flex;justify-content:center;padding:10px 0 14px}
.sparkorb{width:190px;height:190px;border-radius:50%;border:3px solid #fde68a;font-size:4.2rem;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 40% 35%,#fff7c2 0,#facc15 25%,#f59e0b 55%,#7c2d12 100%);box-shadow:0 0 30px #facc15aa,inset 0 -10px 30px #7c2d1288;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.sparkorb small{font-size:.75rem;font-weight:800;text-shadow:0 1px 3px #000}
.sparkorb.bump{animation:orbbump .18s ease}@keyframes orbbump{50%{transform:scale(.92);box-shadow:0 0 60px #fde047}}
.sparkorb.spent{filter:grayscale(.8) brightness(.6);box-shadow:none}
.tourring{position:fixed;z-index:120;border:3px solid #ffd24a;border-radius:14px;pointer-events:none;box-shadow:0 0 0 9999px rgba(0,0,0,.55),0 0 24px #ffd24a;animation:tourpulse 1.1s ease-in-out infinite}
@keyframes tourpulse{50%{box-shadow:0 0 0 9999px rgba(0,0,0,.55),0 0 40px #fde047}}
.tourtip{position:fixed;z-index:121;width:240px;background:#1e293b;border:2px solid #ffd24a;border-radius:12px;padding:10px 12px;font-size:.9rem;display:flex;gap:8px;align-items:center;justify-content:space-between;pointer-events:auto}

/* ===== Stage 2c (Nov 7): animation, enemy attacks, damage text, chests, compact buttons. Visual only. ===== */
/* damage numbers: floating game text, no box; a little arc and pop, bigger for crits and huge hits */
.dmg{font-family:"Arial Black","Segoe UI Black","Helvetica Neue",system-ui,sans-serif;font-weight:900;letter-spacing:.02em;-webkit-text-stroke:2px #0b0f1a;paint-order:stroke fill;
  text-shadow:0 3px 0 #0b0f1a,0 0 10px rgba(0,0,0,.55);background:none!important;border:0!important;padding:0!important;box-shadow:none!important;animation-name:dmgArc;animation-duration:1.15s;animation-timing-function:ease-out}
.dmg.skd{color:#93c5fd}
.dmg.crit{color:#ffd24a;font-size:2.5rem;font-style:italic;transform-origin:50% 80%}
.dmg.crit::after{content:'!';margin-left:1px}
.dmg.huge{font-size:2.9rem;color:#ff9f43}.dmg.crit.huge{font-size:3.2rem;color:#ffe066}
.dmg.bad.huge{color:#ff4d4d}
@keyframes dmgArc{0%{opacity:0;transform:translate(-50%,10px) scale(.4) rotate(-8deg)}10%{opacity:1;transform:translate(calc(-50% - 5px),-4px) scale(1.35) rotate(4deg)}16%{transform:translate(calc(-50% + 5px),-8px) scale(1.2) rotate(-3deg)}22%{transform:translate(calc(-50% - 3px),-11px) scale(1.08)}30%{transform:translate(-50%,-14px) scale(1) rotate(0)}
  70%{opacity:1;transform:translate(calc(-50% + 10px),-46px) scale(.95)}100%{opacity:0;transform:translate(calc(-50% + 16px),-70px) scale(.85)}}
.dmg.crit,.dmg.huge{animation-name:dmgSlam}
@keyframes dmgSlam{0%{opacity:0;transform:translate(-50%,0) scale(2.4) rotate(-10deg)}10%{opacity:1;transform:translate(calc(-50% - 8px),-4px) scale(.9) rotate(3deg)}16%{transform:translate(calc(-50% + 8px),-6px) scale(1.15)}22%{transform:translate(calc(-50% - 5px),-8px) scale(1.05)}28%{transform:translate(calc(-50% + 3px),-9px)}
  34%{transform:translate(-50%,-10px) scale(1)}75%{opacity:1;transform:translate(-50%,-40px) scale(1)}100%{opacity:0;transform:translate(-50%,-62px) scale(.9)}}

/* hero idle: breathing (kept), plus a slow sway and an occasional weight shift. Uses translate/rotate so flips stay. */
#me>.av,.hallhero>.av,.towhero>.av,.wprev>.av{animation:idleSway 5.6s ease-in-out infinite;transform-origin:50% 96%}
.hallhero>.dsp,.towhero>.dsp{animation:idleSway 5.6s ease-in-out infinite,breathe 3.6s ease-in-out infinite;transform-origin:50% 96%}
@keyframes idleSway{0%,100%{rotate:0deg;translate:0 0}22%{rotate:-1.6deg}45%{rotate:1.2deg;translate:0 -1%}62%{rotate:0deg}74%{translate:3% 0}80%{translate:3% 0;rotate:1deg}90%{translate:0 0}}
/* attack: wind back, lunge, follow through */
#me.swingatk{animation:swingAtk calc(.46s / var(--gs,1)) cubic-bezier(.3,0,.3,1)}
@keyframes swingAtk{0%{translate:0 0;rotate:0deg}28%{translate:-8% 3%;rotate:-8deg}55%{translate:22% -6%;rotate:9deg}72%{translate:16% -3%;rotate:4deg}100%{translate:0 0;rotate:0deg}}
#me.drawshot{animation:drawShot calc(.4s / var(--gs,1)) ease-out}
@keyframes drawShot{0%,100%{translate:0 0}35%{translate:-7% 1%;rotate:-3deg}55%{translate:3% 0;rotate:1deg}}
.vfx.swoosh{width:150px;height:150px;border-radius:50%;border-top:9px solid var(--c,#fff);border-right:4px solid transparent;border-left:4px solid transparent;
  filter:drop-shadow(0 0 8px var(--c,#fff)) drop-shadow(0 0 2px #fff);animation:swoosh calc(.38s / var(--gs,1)) ease-out forwards}
.vfx.swoosh.rev{border-top:0;border-bottom:9px solid var(--c,#fff);animation-name:swooshR}
@keyframes swoosh{0%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s)*.6)) rotate(-70deg)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(var(--s)) rotate(70deg)}}
@keyframes swooshR{0%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s)*.6)) rotate(70deg)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(var(--s)) rotate(-70deg)}}

/* enemy attack looks */
.vfx.proj.glob{border-radius:50% 50% 45% 55%;background:radial-gradient(circle at 35% 35%,#f7fee7 0 12%,var(--c) 30%,#3f6212 70%,transparent 72%)}
.vfx.proj.bone{border-radius:40%;height:8px!important;background:linear-gradient(90deg,#fff 0 18%,#e2e8f0 20% 80%,#fff 82%);box-shadow:0 0 6px #fff}
.vfx.proj.rock{border-radius:38% 52% 44% 50%;background:radial-gradient(circle at 35% 30%,#d6b38a,#7c5434 60%,#3b2a1a);box-shadow:0 4px 10px rgba(0,0,0,.6)}
.vfx.splat{width:130px;height:130px;background:radial-gradient(circle,var(--c) 0 18%,transparent 19%),radial-gradient(circle at 20% 30%,var(--c) 0 9%,transparent 10%),radial-gradient(circle at 78% 26%,var(--c) 0 8%,transparent 9%),
  radial-gradient(circle at 70% 78%,var(--c) 0 10%,transparent 11%),radial-gradient(circle at 26% 74%,var(--c) 0 7%,transparent 8%);filter:drop-shadow(0 0 8px var(--c));animation:im .6s ease-out forwards}
.vfx.beam{height:8px;transform-origin:0 50%;transform:translateY(-50%)!important;border-radius:4px;background:linear-gradient(90deg,var(--c),#fff 50%,var(--c));box-shadow:0 0 12px var(--c),0 0 26px var(--c);animation:beam .36s ease-out forwards}
.vfx.beam.zig{height:22px;clip-path:polygon(0 50%,8% 10%,18% 80%,30% 20%,42% 85%,55% 15%,66% 80%,78% 20%,90% 75%,100% 50%,90% 95%,78% 45%,66% 100%,55% 40%,42% 100%,30% 45%,18% 100%,8% 35%);animation-timing-function:steps(3)}
@keyframes beam{0%{opacity:0;clip-path:inset(0 100% 0 0)}30%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0}}
.vfx.wail{width:70px;height:70px;border-radius:50%;border:4px solid var(--c);box-shadow:0 0 14px var(--c),inset 0 0 10px var(--c);animation:wail .55s ease-out forwards}
@keyframes wail{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%{opacity:.9}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(2.2)}}
.vfx.claw{width:140px;height:140px;background:linear-gradient(60deg,transparent 30%,var(--c) 31% 33%,#fff 33.5%,transparent 35%),linear-gradient(60deg,transparent 46%,var(--c) 47% 49%,#fff 49.5%,transparent 51%),
  linear-gradient(60deg,transparent 62%,var(--c) 63% 65%,#fff 65.5%,transparent 67%);filter:drop-shadow(0 0 6px var(--c));animation:claw .5s ease-out forwards}
@keyframes claw{0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translate(-50%,-50%) scale(var(--s))}25%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s)*1.15))}}

/* reward chests by rarity (drawn; painted art replaces it when assets/dh_chest_<tier>.webp exists) */
.chest.c2{overflow:visible;font-size:0;animation:bx 1.2s infinite;padding:0;width:150px;height:130px;position:relative;filter:none}
.chest2{position:relative;width:150px;height:130px;display:block;--wood:#8b5a2b;--wood2:#6b3f1d;--band:#4b5563;--trim:#9ca3af;--glow:transparent}
.chest2 .base{position:absolute;left:12px;right:12px;bottom:6px;height:62px;border-radius:6px 6px 10px 10px;background:linear-gradient(180deg,var(--wood),var(--wood2));box-shadow:inset 0 -6px 0 rgba(0,0,0,.25),0 8px 14px rgba(0,0,0,.45);border:3px solid var(--trim)}
.chest2 .lid{position:absolute;left:8px;right:8px;bottom:64px;height:48px;border-radius:40px 40px 6px 6px;background:linear-gradient(180deg,var(--wood),var(--wood2));border:3px solid var(--trim);transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.chest2 .band{position:absolute;top:0;bottom:0;left:22%;width:12px;background:var(--band);box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}.chest2 .band.b2{left:auto;right:22%}
.chest2 .lock{position:absolute;left:50%;top:6px;width:22px;height:26px;margin-left:-11px;border-radius:4px 4px 8px 8px;background:linear-gradient(#fde68a,#b45309);box-shadow:0 0 0 2px #451a03}
.chest2 .glow{position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:.9;animation:cglow 1.6s ease-in-out infinite}
@keyframes cglow{50%{opacity:.5;transform:scale(1.08)}}
.chest2 .gem{position:absolute;left:50%;bottom:92px;width:20px;height:20px;margin-left:-10px;rotate:45deg;background:linear-gradient(135deg,#fff,var(--gemc,#c084fc) 40%,#3b0764);box-shadow:0 0 12px var(--gemc,#c084fc);z-index:2}
.chest2.t-uncommon{--trim:#86efac;--band:#166534;--glow:rgba(74,222,128,.55)}
.chest2.t-rare{--wood:#1e3a8a;--wood2:#172554;--trim:#cbd5e1;--band:#94a3b8;--glow:rgba(89,168,255,.6)}
.chest2.t-epic{--wood:#3b0764;--wood2:#1e0336;--trim:#fbbf24;--band:#111827;--glow:rgba(194,123,255,.7);--gemc:#c084fc}
.chest2.t-epic .band{background:linear-gradient(#fbbf24,#92400e);box-shadow:0 0 6px #fbbf24}
.chest2.t-legendary{--wood:#f59e0b;--wood2:#b45309;--trim:#fff7d6;--band:#7c2d12;--glow:rgba(255,140,40,.85);--gemc:#ff7a1a}
.chest2.t-legendary .base,.chest2.t-legendary .lid{box-shadow:0 0 18px #ffb13b,inset 0 -6px 0 rgba(0,0,0,.2)}
.chest2 .flames{position:absolute;left:-10px;right:-10px;bottom:56px;height:150px;opacity:.95;background:radial-gradient(ellipse 16% 70% at 18% 100%,#ff4d1a 0 40%,transparent 100%),radial-gradient(ellipse 20% 95% at 50% 100%,#ffd24a 0 30%,#ff7a1a 55%,transparent 100%),radial-gradient(ellipse 15% 65% at 82% 100%,#ff5d2a 0 40%,transparent 100%),radial-gradient(ellipse 10% 50% at 34% 100%,#ffb13b 0 35%,transparent 100%),radial-gradient(ellipse 10% 55% at 67% 100%,#ffb13b 0 35%,transparent 100%);
  filter:blur(2px);animation:flames .5s steps(2) infinite alternate;transform-origin:50% 100%}
@keyframes flames{0%{transform:scaleY(.9) skewX(-3deg)}100%{transform:scaleY(1.12) skewX(4deg)}}
.chest2.hasart>:not(.chestart){display:none}.chest2 .chestart{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);object-fit:contain}
.chest2.t-legendary.hasart .flames,.chest2.hasart .glow{display:block}
.chest2.opened .lid{transform:translateY(-14px) rotate(-28deg)}
/* opening styles, picked at random for everyday chests */
.chest.c2.op-pop{animation:cpop .48s ease-in forwards}@keyframes cpop{60%{transform:scale(1.25)}100%{transform:scale(1.35);opacity:.2}}
.chest.c2.op-shakeburst{animation:cshake .48s linear forwards}@keyframes cshake{0%,100%{rotate:0deg}20%{rotate:-9deg}40%{rotate:9deg}60%{rotate:-6deg;scale:1.1}80%{rotate:4deg;scale:1.25}}
.chest.c2.op-spin{animation:cspin .48s ease-in forwards}@keyframes cspin{100%{transform:rotateY(360deg) scale(1.2)}}
.chest.c2.op-bounce{animation:cbounce .48s ease-out forwards}@keyframes cbounce{30%{translate:0 -30px}55%{translate:0 0;scale:1.15 .85}80%{translate:0 -12px;scale:1}}
.chest.c2.op-grand{animation:cgrand .9s ease-in forwards}@keyframes cgrand{0%{scale:1}20%{rotate:-6deg;scale:1.05}40%{rotate:6deg;scale:1.1}60%{rotate:-4deg;scale:1.2;filter:brightness(1.5)}100%{scale:1.35;filter:brightness(2.4);opacity:.3}}
.chest.c2.op-pop .lid,.chest.c2.op-shakeburst .lid,.chest.c2.op-bounce .lid,.chest.c2.op-grand .lid{transform:translateY(-18px) rotate(-32deg)}
.boxwin.open .chest.c2{height:96px;width:110px;animation:none}.boxwin.open .chest2{transform:scale(.72);transform-origin:50% 0}
@media (prefers-reduced-motion:reduce){.chest.c2,.chest2 .glow,.chest2 .flames,#me>.av,.hallhero>.av,.towhero>.av,.wprev>.av,.hallhero>.dsp,.towhero>.dsp{animation:none!important}}

/* compact buttons: icons only for players who know the game */
#lblbtn{position:absolute;z-index:45;top:calc(var(--safe-t) + 52px);right:84px;min-width:26px;height:26px;border-radius:13px;border:1px solid rgba(148,163,184,.35);background:rgba(7,13,24,.55);font-size:.7rem;font-weight:800;color:#e2e8f0;padding:0 6px;opacity:.8}
#lblbtn[aria-pressed="true"]{border-color:#ffd24a;color:#ffd24a;opacity:1}
body:not([data-scr="home"]) #lblbtn,#modal:not(:empty)~#lblbtn{display:none}
body.compact .hrow>.btn .dhlb,body.compact .hrow>.btn>small,body.compact .hrow .hintwrap>.btn .dhlb,body.compact .top>.btn .dhlb{display:none}
body.compact .hrow>.btn[data-lz],body.compact .hrow .hintwrap>.btn[data-lz]{font-size:1.45rem;min-height:44px;padding:4px}
.dhlz{display:inline}
.boxwin.t-legendary:not(.open){padding-top:64px}.boxwin.t-legendary.open .chest.c2{margin-top:30px}

/* --- 2c part 2: XP bar, chest shapes, boss crate, flying loot, taunts, living looks --- */
.bar.tx.slimxp{height:14px;border-radius:7px}.bar.tx.slimxp span{font-size:.64rem;letter-spacing:.02em}
.homexp{margin:0 0 6px}
/* each rarity its own shape, not just its own colour */
.chest2.t-common .lid{border-radius:10px 10px 4px 4px;height:36px;bottom:64px}
.chest2.t-common .band.b2{display:none}.chest2.t-common .band{left:calc(50% - 6px)}.chest2.t-common .lock{display:none}
.chest2.t-uncommon .lid{border-radius:40px 40px 6px 6px}
.chest2.t-uncommon .base::after{content:'';position:absolute;left:-6px;right:-6px;bottom:-6px;height:10px;border-radius:6px;background:#166534}
.chest2.t-rare .base,.chest2.t-rare .lid{border-width:4px}
.chest2.t-rare .base::before,.chest2.t-rare .base::after{content:'';position:absolute;top:-4px;width:18px;height:18px;background:linear-gradient(135deg,#f1f5f9,#64748b);clip-path:polygon(0 0,100% 0,0 100%)}
.chest2.t-rare .base::before{left:-4px}.chest2.t-rare .base::after{right:-4px;transform:scaleX(-1)}
.chest2.t-rare .lid{height:54px;border-radius:50% 50% 6px 6px/70% 70% 6px 6px}
.chest2.t-epic .lid{border-radius:14px 14px 4px 4px;height:52px;clip-path:polygon(0 30%,12% 0,25% 22%,38% 0,50% 18%,62% 0,75% 22%,88% 0,100% 30%,100% 100%,0 100%);border-radius:0}
.chest2.t-epic .base{border-radius:4px 4px 16px 16px}
.chest2.t-epic .base::before,.chest2.t-epic .base::after{content:'';position:absolute;bottom:14px;width:22px;height:34px;background:linear-gradient(#fbbf24,#92400e);clip-path:polygon(0 50%,100% 0,70% 50%,100% 100%)}
.chest2.t-epic .base::before{left:-20px}.chest2.t-epic .base::after{right:-20px;transform:scaleX(-1)}
.chest2.t-legendary .lid{height:56px;border-radius:50% 50% 6px 6px/80% 80% 6px 6px}
.chest2.t-legendary .lid::after{content:'';position:absolute;left:50%;top:-22px;width:46px;height:24px;margin-left:-23px;background:linear-gradient(#fff7d6,#fbbf24);clip-path:polygon(0 100%,0 30%,22% 70%,50% 0,78% 70%,100% 30%,100% 100%);filter:drop-shadow(0 0 6px #ffb13b)}
/* the boss crate: wide, dark iron and wood, rivets, an emblem; it rumbles and glows before it bursts */
.chest.c2.crate{width:200px;height:150px}
.crate2{position:relative;width:200px;height:150px;display:block;--trim:#9ca3af;--glow:rgba(255,80,60,.0)}
.crate2 .cbody{position:absolute;left:10px;right:10px;bottom:4px;height:92px;background:repeating-linear-gradient(90deg,#5b3a1e 0 30px,#4a2f17 30px 32px);border:5px solid #374151;border-radius:6px;box-shadow:0 10px 18px rgba(0,0,0,.6),inset 0 0 0 3px #1f2937}
.crate2 .clid{position:absolute;left:4px;right:4px;bottom:94px;height:34px;background:linear-gradient(#6b7280,#374151);border:4px solid #1f2937;border-radius:8px 8px 3px 3px;transform-origin:10% 100%;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.crate2 .xbar{position:absolute;inset:8px 6px;background:linear-gradient(to top right,transparent 46%,#374151 47% 53%,transparent 54%)}.crate2 .xbar.x2{background:linear-gradient(to top left,transparent 46%,#374151 47% 53%,transparent 54%)}
.crate2 .plank{position:absolute;left:0;right:0;top:50%;height:6px;background:#374151}.crate2 .plank.p2{display:none}
.crate2 .rv{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f1f5f9,#6b7280);top:4px;left:4px}.crate2 .rv.r2{left:auto;right:4px}.crate2 .rv.r3{top:auto;bottom:4px}.crate2 .rv.r4{top:auto;bottom:4px;left:auto;right:4px}
.crate2 .emblem{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:radial-gradient(#111827,#030712);border:3px solid var(--trim);display:grid;place-items:center;font-size:26px;font-style:normal;box-shadow:0 0 12px var(--glowc,#ef4444)}
.crate2 .glow{position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(closest-side,var(--glowc,#ef4444),transparent);opacity:.35;animation:cglow 1.4s ease-in-out infinite}
.crate2 .beams{position:absolute;left:50%;bottom:90px;width:0;height:0}
.crate2.t-uncommon{--glowc:#4ade80}.crate2.t-rare{--glowc:#59a8ff}.crate2.t-epic{--glowc:#c27bff;--trim:#fbbf24}.crate2.t-legendary{--glowc:#ffb13b;--trim:#fff7d6}
.crate2.k-dungeon .clid{background:linear-gradient(#fbbf24,#92400e)}.crate2.k-dungeon .cbody{border-color:#b45309}
.boxwin.iscrate .cratecap{font:900 1.05rem/1 "Arial Black",system-ui,sans-serif;letter-spacing:.18em;color:#fde68a;text-shadow:0 0 10px #f59e0b,0 2px 0 #000;animation:capin .5s ease-out}
@keyframes capin{from{opacity:0;transform:scale(1.8)}}
.chest.c2.crate.op-crate{animation:crumble 1.25s linear forwards}
.chest.c2.crate.op-crate .glow{animation:cbuild 1.25s ease-in forwards}
@keyframes crumble{0%,100%{translate:0 0}8%{translate:-4px 1px}16%{translate:4px -1px}24%{translate:-5px 0}32%{translate:5px 1px}40%{translate:-6px -1px}48%{translate:6px 0}56%{translate:-7px 1px}64%{translate:7px -1px}72%{translate:-8px 0;scale:1.04}80%{translate:8px 1px;scale:1.08}88%{translate:-4px 0;scale:1.12;filter:brightness(1.6)}96%{scale:1.2;filter:brightness(2.4)}}
@keyframes cbuild{0%{opacity:.35;transform:scale(1)}100%{opacity:1;transform:scale(1.9)}}
.crate2.opened .clid{transform:translateY(-22px) rotate(-38deg)}
.crate2.opened .beams{width:0}.crate2.opened .beams::before{content:'';position:absolute;left:-90px;bottom:0;width:180px;height:160px;background:conic-gradient(from 160deg at 50% 100%,transparent,var(--glowc,#fde68a) 10deg,transparent 20deg,var(--glowc,#fde68a) 30deg,transparent 40deg);opacity:.55;filter:blur(2px);animation:cglow 1.6s ease-in-out infinite}
.boxwin.open .chest.c2.crate{height:100px;width:150px}.boxwin.open .crate2{transform:scale(.62);transform-origin:50% 0}
/* loot flies out one piece at a time, glowing in its rarity colour */
.boxwin .loot.fly{opacity:0;animation:lootfly .55s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:var(--d)}
@keyframes lootfly{0%{opacity:0;transform:translateY(-70px) scale(.4) rotate(-6deg)}60%{opacity:1;transform:translateY(4px) scale(1.04)}100%{opacity:1;transform:none}}
.boxwin .loot.fly.r-rare,.boxwin .loot.fly.r-epic,.boxwin .loot.fly.r-legendary,.boxwin .loot.fly.r-unique{box-shadow:0 0 0 1px var(--rc),0 0 18px color-mix(in srgb,var(--rc) 60%,transparent)}
/* the loot screen after a normal fight fits one phone screen */
.boxwin.open{gap:5px}.boxwin.open .loot{padding:6px 8px;min-height:0}.boxwin.open .btn.dbl{margin-top:2px}
.boxwin.open .chest.c2{margin-bottom:-6px}
@media (max-height:700px){.boxwin.open .chest.c2{height:70px}.boxwin.open .chest2{transform:scale(.52)}.boxwin.open .chest.c2.crate{height:76px}.boxwin.open .crate2{transform:scale(.48)}}
@media (prefers-reduced-motion:reduce){.boxwin .loot.fly{animation:none;opacity:1}.chest.c2.crate.op-crate{animation:none}}

/* taunts: a speech bubble that stays, and a signature move per weapon (original) */
.tbubble{position:absolute;z-index:44;max-width:62%;padding:8px 12px;border-radius:14px;background:#fff;color:#111827;font:800 .9rem/1.2 system-ui,sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.45);transform:translate(0,-100%);animation:bubin .3s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.tbubble::after{content:'';position:absolute;left:22px;bottom:-9px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}
.tbubble.bye{transition:opacity .35s,transform .35s;opacity:0;transform:translate(0,-120%)}
@keyframes bubin{from{opacity:0;transform:translate(0,-80%) scale(.6)}}
#me.tn-sword{animation:tnSword calc(.8s / var(--gs,1)) ease-in-out}@keyframes tnSword{30%{rotate:-10deg;translate:-4% 0}60%{rotate:8deg;translate:4% -4%}}
#me.tn-dagger{animation:tnDagger calc(.8s / var(--gs,1)) ease-in-out}@keyframes tnDagger{25%{translate:-10% 0;opacity:.5}50%{translate:10% 0;opacity:.5}75%{translate:0 0;opacity:1}}
#me.tn-bow{animation:tnBow calc(.8s / var(--gs,1)) ease-out}@keyframes tnBow{35%{translate:0 -16%}60%{translate:0 0;scale:1.05 .95}}
#me.tn-staff{animation:tnStaff calc(.8s / var(--gs,1)) ease-in}@keyframes tnStaff{40%{translate:0 -10%;scale:1.05}60%{translate:0 2%;scale:1.02 .96}}
#me.tn-fists{animation:tnFists calc(.8s / var(--gs,1)) ease-in-out}@keyframes tnFists{20%,60%{scale:1.1}40%,80%{scale:1}}
.vfx.tspin{width:170px;height:170px;border-radius:50%;border:6px solid transparent;border-top-color:var(--c);border-left-color:var(--c);filter:drop-shadow(0 0 8px var(--c));animation:tspin .75s ease-out forwards}
@keyframes tspin{0%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s)*.5)) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(var(--s)) rotate(720deg)}}
.vfx.torbit{width:22px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--c),#fff);box-shadow:0 0 8px var(--c);animation:torbit .75s linear forwards}
.vfx.torbit.o2{animation-direction:reverse}
@keyframes torbit{0%{transform:translate(-50%,-50%) rotate(0) translateX(calc(var(--s)*60px)) rotate(0)}100%{transform:translate(-50%,-50%) rotate(720deg) translateX(calc(var(--s)*60px)) rotate(-720deg);opacity:0}}
.vfx.tpuff{width:120px;height:36px;border-radius:50%;background:radial-gradient(closest-side,rgba(148,163,184,.75),transparent);animation:im .6s ease-out forwards}
.vfx.tarrow{width:54px;height:5px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--c) 30%,#fff);box-shadow:0 0 8px var(--c);animation:tarrow .85s ease-out forwards}
@keyframes tarrow{0%{transform:translate(-50%,0) rotate(0)}50%{transform:translate(-50%,-40px) rotate(540deg)}100%{transform:translate(-50%,0) rotate(1080deg);opacity:0}}
.vfx.tquake{width:200px;height:50px;border-radius:50%;border:4px solid var(--c);box-shadow:0 0 16px var(--c),inset 0 0 12px var(--c);animation:im .7s ease-out forwards}
.vfx.tpow{width:70px;height:70px;background:conic-gradient(#ffd24a 0 10%,transparent 0 20%,#ffd24a 0 30%,transparent 0 40%,#ffd24a 0 50%,transparent 0 60%,#ffd24a 0 70%,transparent 0 80%,#ffd24a 0 90%,transparent 0);clip-path:circle(50%);animation:im .55s ease-out forwards}
.vfx.tpow.p2{animation-delay:.12s}

/* living looks: auras breathe, fire flickers, capes and wings move, hair sways; everything flares on big moments */
.av .aura[data-id="au_fire"]{animation:auraFire .35s steps(2) infinite alternate}@keyframes auraFire{0%{transform:scale(1.02,1);opacity:.85}100%{transform:scale(1.07,1.12);opacity:1}}
.av .aura[data-id="au_storm"]{animation:auraStorm 1.8s steps(1) infinite}@keyframes auraStorm{0%,88%{opacity:.7}90%{opacity:1;filter:brightness(2)}93%{opacity:.6}96%{opacity:1;filter:brightness(1.8)}}
.av .aura[data-id="au_snow"]{animation:aura 3.2s ease-in-out infinite}
.av .acc.back[data-id="bk_cape"]{transform-origin:50% 0;animation:cape 2.6s ease-in-out infinite}@keyframes cape{50%{rotate:5deg;scale:1.04 1}}
.av .acc.back[data-id="bk_wings"]{animation:wings 1.8s ease-in-out infinite}@keyframes wings{50%{scale:1.08 .96;translate:0 -3%}}
.av .acc.head[data-id="hd_pumpkin"]{animation:pumpkin 1.2s steps(2) infinite}@keyframes pumpkin{50%{filter:drop-shadow(0 0 6px #ff7a1a) brightness(1.15)}}
.av .acc.head.horns{width:26cqw;height:12cqw;font-size:0;transform:translate(-50%,-58%)}
.av .acc.head.horns::before,.av .acc.head.horns::after{content:"";position:absolute;bottom:0;width:8cqw;height:12cqw;background:linear-gradient(160deg,#ff6b5a,#c81e1e 60%,#7f1d1d);box-shadow:inset 0 0 0 .6cqw #ffd0c8;border-radius:100% 0 0 0}
.av .acc.head.horns::before{left:0;transform:rotate(-12deg)}
.av .acc.head.horns::after{right:0;transform:scaleX(-1) rotate(-12deg)}
.av .acc.head.halo{animation:halo 2.4s ease-in-out infinite}@keyframes halo{50%{translate:-50% -66%;box-shadow:0 0 9cqw #fde68a}}
.av .tint{animation:hairSway 4.8s ease-in-out infinite;transform-origin:50% 60%}@keyframes hairSway{50%{rotate:.6deg}}
/* fire-tree outfits have flaming hair: a flickering glow over the head; frost and storm outfits get their own */
.av.lk-fire::after,.av.lk-ice::after,.av.lk-lightning::after{content:'';position:absolute;left:30%;right:30%;top:2%;height:26%;border-radius:50% 50% 40% 40%;pointer-events:none;mix-blend-mode:screen}
.av.lk-fire::after{background:radial-gradient(ellipse at 50% 80%,rgba(255,180,60,.75),rgba(255,80,20,.35) 45%,transparent 70%);animation:headFire .28s steps(2) infinite alternate}
@keyframes headFire{0%{transform:scale(1,1) translateY(0);opacity:.75}100%{transform:scale(1.08,1.18) translateY(-4%);opacity:1}}
.av.lk-ice::after{background:radial-gradient(ellipse at 50% 70%,rgba(186,230,253,.55),transparent 65%);animation:aura 2.6s ease-in-out infinite}
.av.lk-lightning::after{background:radial-gradient(ellipse at 50% 70%,rgba(253,224,71,.6),transparent 60%);animation:auraStorm 1.6s steps(1) infinite}
.av.tier0.lk-fire::after,.av.tier0.lk-ice::after,.av.tier0.lk-lightning::after{display:none}
.av.flare{filter:drop-shadow(0 0 10px rgba(255,210,120,.8));transition:filter .2s}
.av.flare::after{opacity:1!important;transform:scale(1.25,1.45) translateY(-8%)!important}
.av.flare .aura{transform:scale(1.25)!important;opacity:1!important}
@media (prefers-reduced-motion:reduce){.av .aura,.av .acc,.av .tint,.av::after,.tbubble{animation:none!important}}
.vfx.lightburst{z-index:31;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,#fff 0 8%,rgba(255,236,170,.9) 18%,rgba(255,190,80,.45) 40%,transparent 70%),repeating-conic-gradient(rgba(255,230,150,.45) 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent);animation:lburst 1.3s ease-out forwards}
.vfx.lightburst.boss{filter:hue-rotate(-20deg)}
@keyframes lburst{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotate(40deg)}}
.boxwin .loot .btn{width:auto;flex:none;white-space:nowrap}
.home1>.homexp{flex:none;width:min(100%,420px);align-self:center}

/* ---------- Stage 2d: Options, clean home top bar, menu themes ---------- */
#lblbtn,#fxbtn,#spdbtn{display:none!important}
.optrow .btn.small{min-width:64px}.optrow .btn.small.on{border-color:#4ade80;color:#4ade80}
.optwin a.btn{display:flex;justify-content:center;text-decoration:none;color:#fff;margin-top:10px}
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0 4px}
.theme{position:relative;aspect-ratio:3/4;border-radius:12px;border:2px solid rgba(148,163,184,.35);background-size:cover;background-position:center;overflow:hidden;padding:0;cursor:pointer}
.theme small{position:absolute;left:0;right:0;bottom:0;padding:3px 4px;font-size:.62rem;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.85));text-align:center;line-height:1.15}
.theme.on{border-color:#ffd24a;box-shadow:0 0 0 2px rgba(255,210,74,.35),0 0 14px rgba(255,210,74,.45)}
.home1.themed{background-size:cover;background-position:center}
.home1.themed .portalfx{display:none}
/* home top bar: never runs off the edge. Narrow phones show gold only (tap Items for the rest). */
.home1 .top{gap:6px}.home1 .top .tl{display:flex;gap:5px;flex:0 1 auto;min-width:0}.home1 .top .tr{flex:0 0 auto}
.home1 .top .tl .ver{min-width:36px;padding:0 6px}
@media (max-width:460px){.home1 .top .coins .xs{display:none}.home1 .top .coins{padding:5px 9px}}
@media (max-width:370px){.home1 .top .tl{gap:3px}.home1 .top .tl .ver{min-width:32px;padding:0 4px;font-size:.8rem}.home1 .top .ver.dia{padding:0 6px}}
.coins .xs{display:inline-flex;align-items:center;gap:inherit}
.bar.tx .coins,.bar.tx .coins .xs{position:static;inset:auto;display:inline-flex;font:inherit}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.home1.tight .htitle{margin-bottom:6px}.home1.tight .htitle h1{font-size:2.3rem}.home1.tight .hmenu{gap:7px}.home1.tight .hrow{gap:8px}.home1.tight .patrol{padding:6px 10px;margin-bottom:6px;gap:4px}
.home1.tighter .htitle h1{font-size:1.85rem;line-height:.95}.home1.tighter .hmenu .btn{min-height:40px;padding-top:6px;padding-bottom:6px}.home1.tighter .hmenu .btn.big{min-height:52px}.home1.tighter .patrol .prow small{display:none}
.home1.tightest .htitle h1,.home1.tightest .htitle>small{display:none}.home1.tightest .htitle{margin-bottom:4px}.home1.tightest .hmenu{gap:5px}.home1.tightest .hrow{gap:6px}.home1.tightest .hmenu .btn{min-height:36px;font-size:.88rem}.home1.tightest .patrol .ptop{font-size:.9rem}
.home1.tb1 #idea{display:none}.home1.tb2 #code{display:none}
/* painted chests keep their rarity glow (Nov 7): a pulsing halo behind, a tinted rim light on the art itself */
.chest2.hasart .glow{z-index:0}.chest2.hasart .flames{z-index:0}.chest2 .chestart{z-index:1;filter:drop-shadow(0 0 6px var(--glow)) drop-shadow(0 6px 10px rgba(0,0,0,.55));animation:cartglow 1.8s ease-in-out infinite}
.chest2.t-common .chestart{animation:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
@keyframes cartglow{50%{filter:drop-shadow(0 0 16px var(--glow)) drop-shadow(0 6px 10px rgba(0,0,0,.55))}}
@media (prefers-reduced-motion:reduce){.chest2 .chestart{animation:none}}
/* ---------- Stage 2d: rooms ---------- */
.room{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;--rt:hsla(var(--zm,200),35%,40%,1);--rd:rgba(6,10,20,.92)}
.room .rback{position:absolute;left:14%;right:14%;top:14%;bottom:44%;background:linear-gradient(180deg,rgba(6,10,20,.15),rgba(6,10,20,.35));box-shadow:inset 0 0 40px rgba(0,0,0,.55)}
.room .rdoor{position:absolute;left:50%;bottom:0;width:30%;height:62%;transform:translateX(-50%);border-radius:50% 50% 0 0/40% 40% 0 0;background:radial-gradient(ellipse at 50% 85%,hsla(var(--zm,200),80%,65%,.35),rgba(0,0,0,.88) 60%);box-shadow:0 0 0 4px rgba(20,26,40,.85),0 0 0 7px hsla(var(--zm,200),30%,50%,.35),0 0 30px hsla(var(--zm,200),80%,60%,.25)}
.room .rdoor i{position:absolute;left:10%;right:10%;bottom:0;height:30%;background:radial-gradient(ellipse at 50% 100%,hsla(var(--zm,200),90%,70%,.45),transparent 70%);animation:rdglow 4s ease-in-out infinite}
@keyframes rdglow{50%{opacity:.4}}
.room .rwall{position:absolute;top:0;bottom:30%;width:22%;background:linear-gradient(90deg,var(--rd),rgba(10,16,30,.55));display:flex;justify-content:space-around}
.room .rwall.l{left:0;transform:perspective(420px) rotateY(38deg);transform-origin:0 50%}
.room .rwall.r{right:0;transform:perspective(420px) rotateY(-38deg);transform-origin:100% 50%;background:linear-gradient(270deg,var(--rd),rgba(10,16,30,.55))}
.room .rwall i{width:16%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.14) 30%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.5));box-shadow:0 0 12px rgba(0,0,0,.5)}
.room .rfloor{position:absolute;left:-60%;right:-60%;bottom:-6%;height:46%;transform:perspective(380px) rotateX(62deg);transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 2px,transparent 2px 9%),repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 11%),linear-gradient(180deg,rgba(8,12,22,.25),hsla(var(--zm,200),25%,22%,.55) 60%,rgba(8,12,22,.8));mix-blend-mode:multiply;opacity:.9}
.room .rfloor i{position:absolute;inset:0;background:radial-gradient(ellipse 30% 40% at 50% 70%,hsla(var(--zm,200),70%,70%,.18),transparent 70%);mix-blend-mode:screen}
.room .rfog{position:absolute;left:0;right:0;top:40%;height:26%;background:linear-gradient(180deg,transparent,hsla(var(--zm,200),40%,70%,.16) 50%,transparent);filter:blur(4px)}
.room .rtorch{position:absolute;top:30%;width:10px;height:18px}.room .rtorch.l{left:9%}.room .rtorch.r{right:9%}
.room .rtorch i,.room .rbraz i{position:absolute;left:50%;bottom:100%;width:16px;height:24px;margin-left:-8px;border-radius:50% 50% 40% 40%;background:radial-gradient(ellipse at 50% 80%,#fff7c2,#ffb13b 40%,#ff4d1a 70%,transparent 72%);filter:blur(.4px);animation:flick .5s ease-in-out infinite alternate;box-shadow:0 0 22px 8px rgba(255,140,40,.35)}
.room .rtorch::before{content:'';position:absolute;inset:0;background:linear-gradient(#5b3a1a,#2a1a0b);border-radius:2px}
@keyframes flick{0%{transform:scale(1,1) translateY(0)}100%{transform:scale(.88,1.12) translateY(-2px)}}
/* boss arenas: coliseum or cathedral */
.room.arena .rback{left:6%;right:6%;top:4%;bottom:40%}
.room.arena .rwall{width:18%;bottom:24%}
.room.arena .rwall i{width:20%;background:linear-gradient(90deg,#3a3f52,#c9c2ad 35%,#8b856f 60%,#2a2d3a);box-shadow:0 0 18px rgba(0,0,0,.6)}
.room.arena .rdoor{width:40%;height:78%;background:radial-gradient(ellipse at 50% 85%,rgba(255,80,60,.45),rgba(0,0,0,.9) 62%);box-shadow:0 0 0 6px rgba(30,24,30,.9),0 0 0 10px rgba(201,162,77,.45),0 0 40px rgba(255,80,60,.3)}
.room .rshaft{position:absolute;top:-10%;width:16%;height:80%;background:linear-gradient(180deg,rgba(255,240,200,.32),rgba(255,240,200,0));transform:skewX(-14deg);filter:blur(6px);mix-blend-mode:screen;animation:shaft 6s ease-in-out infinite}
.room .rshaft.s1{left:18%}.room .rshaft.s2{left:44%;width:12%;animation-delay:-2s;background:linear-gradient(180deg,rgba(190,140,255,.3),transparent)}.room .rshaft.s3{left:68%;animation-delay:-4s;background:linear-gradient(180deg,rgba(120,200,255,.28),transparent)}
@keyframes shaft{50%{opacity:.45}}
.room .rcrowd{position:absolute;top:34%;width:30%;height:16%;opacity:.8;background:radial-gradient(circle at 50% 30%,#0b0f1a 0 34%,transparent 36%) 0 0/18px 22px,radial-gradient(circle at 50% 30%,#121828 0 34%,transparent 36%) 9px 9px/18px 22px;animation:crowd 1.2s ease-in-out infinite alternate}
.room .rcrowd.l{left:-2%;transform:perspective(420px) rotateY(38deg)}.room .rcrowd.r{right:-2%;transform:perspective(420px) rotateY(-38deg)}
@keyframes crowd{100%{background-position:0 -3px,9px 7px}}
.room .rban{position:absolute;top:4%;width:7%;height:24%;clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);background:linear-gradient(180deg,#7f1d1d,#b91c1c 60%,#7f1d1d);box-shadow:inset 0 3px 0 #c9a24d;animation:ban 3s ease-in-out infinite;transform-origin:50% 0}
.room .rban::after{content:'';position:absolute;left:30%;right:30%;top:30%;height:22%;border-radius:50%;background:#c9a24d;opacity:.85}
.room .rban.b1{left:24%}.room .rban.b2{left:36%;background:linear-gradient(180deg,#1e3a8a,#2563eb 60%,#1e3a8a);animation-delay:-1s}.room .rban.b3{right:36%;background:linear-gradient(180deg,#1e3a8a,#2563eb 60%,#1e3a8a);animation-delay:-2s}.room .rban.b4{right:24%}
@keyframes ban{50%{transform:rotate(1.5deg) skewX(1deg)}}
.room .rbraz{position:absolute;bottom:30%;width:26px;height:16px;border-radius:0 0 10px 10px;background:linear-gradient(#57534e,#1c1917);box-shadow:0 0 0 2px #c9a24d}
.room .rbraz.l{left:12%}.room .rbraz.r{right:12%}.room .rbraz i{width:24px;height:34px;margin-left:-12px}
.b1.isboss .fspot,.b1.isboss .hspot{transform:scale(.8);transform-origin:50% 85%;transition:transform .6s ease}
/* fighters stand on the floor: firmer contact shadows */
.b1 .plat,.hall1 .plat{background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,.35) 55%,transparent)}
body:not(.fancy) .room .rshaft,body:not(.fancy) .room .rcrowd{animation:none}
@media (prefers-reduced-motion:reduce){.room *{animation:none!important}}
/* ---------- gold store ---------- */
.coinbtn{background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.gshave .coins{display:inline-flex}.gsrow .btn.small{min-width:86px;white-space:nowrap}.gs-epic{border-color:#c27bff}.gs-legend{border-color:#ffb13b;box-shadow:0 0 12px rgba(255,177,59,.25)}
/* ---------- guild hall background + tap board ---------- */
.ghall{background-size:cover!important;background-position:center!important}
.tapboard{display:grid;gap:4px;margin-bottom:8px}.tapboard .tb{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.05)}.tapboard em{font-style:normal;font-weight:800;color:#ffd24a}
/* ---------- skill tree: a royal hall ---------- */
.skillwin{background:radial-gradient(120% 60% at 50% 0,rgba(201,162,77,.22),transparent 60%),linear-gradient(180deg,#2a0f3d,#14082a 45%,#0b0618)!important;border:2px solid #c9a24d!important;box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 30px rgba(201,162,77,.3),inset 0 0 40px rgba(0,0,0,.6)!important}
.skillwin::before,.skillwin::after{content:'';position:absolute;top:0;width:34px;height:90px;clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);background:linear-gradient(180deg,#7f1d1d,#b91c1c);box-shadow:inset 0 3px 0 #c9a24d;opacity:.85;pointer-events:none}
.skillwin::before{left:10px}.skillwin::after{right:10px}
.skillwin .ph h2{color:#ffd24a;text-shadow:0 0 12px rgba(255,210,74,.45);font-family:Georgia,serif;letter-spacing:.06em}
.skillwin .tree2{background:radial-gradient(ellipse at 50% 60%,rgba(201,162,77,.12),transparent 70%);border-radius:16px}
/* ---------- Spark Tap 2.0 ---------- */
.sparkintro{text-align:center;display:grid;gap:8px;justify-items:center}.sparkorb.big2{width:96px;height:96px;font-size:2.6rem;pointer-events:none}
.sarena{position:absolute;inset:0;z-index:80;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:#05060d}
.sarena .sbg{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 55%,#1e3a8a,#0b0f2a 55%,#05060d);transition:filter .3s}
.sarena[data-heat="1"] .sbg{filter:hue-rotate(40deg) saturate(1.3)}.sarena[data-heat="2"] .sbg{filter:hue-rotate(110deg) saturate(1.6) brightness(1.15);animation:sspin 3s linear infinite}
.sarena[data-heat="3"] .sbg{filter:hue-rotate(200deg) saturate(2) brightness(1.3);animation:sspin 1.6s linear infinite}
.sarena[data-heat="4"] .sbg{filter:hue-rotate(290deg) saturate(2.4) brightness(1.45);animation:sspin .9s linear infinite}
.sarena[data-heat="5"] .sbg{animation:sspin .5s linear infinite,srainbow .6s linear infinite;filter:saturate(3) brightness(1.6)}
@keyframes sspin{to{transform:rotate(360deg)}}@keyframes srainbow{to{filter:hue-rotate(360deg) saturate(3) brightness(1.6)}}
.sarena[data-heat="4"],.sarena[data-heat="5"]{animation:sshake .12s linear infinite}
@keyframes sshake{25%{transform:translate(3px,-2px)}50%{transform:translate(-3px,2px)}75%{transform:translate(2px,3px)}}
.sarena .sorb{position:absolute;left:50%;top:52%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid #fff7c2;font-size:3.6rem;color:#fff;background:radial-gradient(circle at 40% 35%,#fff7c2,#ffd24a 35%,#f59e0b 60%,#7c2d12);box-shadow:0 0 40px #ffd24a,0 0 90px rgba(255,180,40,.6);pointer-events:none}
.sarena[data-heat="3"] .sorb,.sarena[data-heat="4"] .sorb{box-shadow:0 0 60px #f472b6,0 0 140px rgba(192,132,252,.8)}.sarena[data-heat="5"] .sorb{box-shadow:0 0 80px #fff,0 0 200px #ffd24a;animation:sbeat .25s ease-in-out infinite}
@keyframes sbeat{50%{transform:scale(1.12)}}
.sarena .shud{position:absolute;left:12px;right:12px;top:calc(var(--safe-t,0px) + 12px);display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;z-index:2}
.sarena .stime{height:12px;border-radius:6px;background:rgba(255,255,255,.15);overflow:hidden}.sarena .stime u{display:block;height:100%;width:100%;background:linear-gradient(90deg,#f43f5e,#ffd24a,#4ade80)}
.sarena .sstat{text-align:center;color:#fff;line-height:1}.sarena .sstat b{font-size:1.6rem;font-weight:900;text-shadow:0 0 10px #000}.sarena .sstat small{display:block;font-size:.62rem;opacity:.8}
.sarena .sheat{position:absolute;left:12px;right:12px;top:calc(var(--safe-t,0px) + 62px);height:22px;border-radius:11px;background:rgba(0,0,0,.45);overflow:hidden;z-index:2}
.sarena .sheat u{display:block;height:100%;width:0;background:linear-gradient(90deg,#60a5fa,#ffd24a,#f97316,#f43f5e,#e879f9);transition:width .15s}.sarena .sheat span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:.14em;color:#fff;text-shadow:0 0 6px #000;font-size:.8rem}
.sarena .scount{position:absolute;left:50%;top:30%;transform:translateX(-50%);font:900 4rem/1 Georgia,serif;color:#fff;text-shadow:0 0 30px #ffd24a;z-index:3}
.sarena .sp{position:absolute;width:9px;height:9px;margin:-4px;border-radius:50%;pointer-events:none;animation:spfly .65s ease-out forwards;box-shadow:0 0 8px currentColor}
@keyframes spfly{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.sarena .sring{position:absolute;width:20px;height:20px;margin:-10px;border-radius:50%;border:3px solid #fff;pointer-events:none;animation:sring .7s ease-out forwards}
@keyframes sring{to{transform:scale(9);opacity:0;border-width:1px}}
.sarena .szap{position:absolute;top:0;bottom:30%;width:6px;background:linear-gradient(#fff,#a5f3fc,transparent);filter:drop-shadow(0 0 8px #60a5fa);clip-path:polygon(40% 0,100% 30%,55% 35%,100% 70%,30% 100%,60% 60%,0 55%,50% 30%);transform:scaleX(4);pointer-events:none;animation:szap .38s steps(3) forwards}
@keyframes szap{to{opacity:0}}
.sarena.done .sorb{opacity:.25}
.sarena .sresult{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(88%,360px);padding:18px;border-radius:16px;background:rgba(9,16,30,.94);border:2px solid #ffd24a;text-align:center;z-index:4;display:grid;gap:8px;box-shadow:0 0 40px rgba(255,210,74,.35)}
.sarena .sresult .sbig{font:900 3rem/1 Georgia,serif;color:#ffd24a}.sarena .sresult em{color:#4ade80;font-style:normal;font-weight:800}
.sarena .spay{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.sarena .spay span{padding:4px 10px;border-radius:12px;background:rgba(255,255,255,.08);font-weight:700;font-size:.85rem}.sarena .spay .coins{background:none;padding:0}
@media (prefers-reduced-motion:reduce){.sarena *,.sarena{animation:none!important}}
/* one-screen fixes (Stage 2d audit) */
.skillwin>*{position:relative;z-index:1}.skillwin::before,.skillwin::after{z-index:0;width:26px;height:64px;opacity:.7}
.skillwin .ptabs{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.skillwin .ptabs .btn{padding:5px 2px;font-size:.72rem}
@media (max-height:900px){.skillwin .tree2{max-height:44vh}}
@media (max-height:780px){.skillwin .tree2{max-height:40vh}.dhp .srow{padding-top:5px;padding-bottom:5px;min-height:0}.dhp .herohead{margin-bottom:2px}.dhp .stats{gap:5px}}
.room .rcrowd{opacity:.55;background:radial-gradient(ellipse 40% 34% at 50% 34%,#05070d 0 98%,transparent 100%) 0 0/20px 26px,radial-gradient(ellipse 60% 40% at 50% 100%,#05070d 0 98%,transparent 100%) 0 0/20px 26px}
.room .rban{height:17%}
@media (max-height:900px){.skillwin .tree2{max-height:42vh}}
@media (max-height:780px){.skillwin .tree2{max-height:36vh}.dhp .srow .btn{min-height:34px;height:34px;padding-top:0;padding-bottom:0}.dhp .stats{margin-bottom:6px}.dhp .herohead .dsp.mini{width:60px;height:60px}}
@media (max-height:780px){.dhp .srow{padding-top:3px;padding-bottom:3px}.dhp .srow small{font-size:.72rem}.dhp .srow b{font-size:.95rem}}
@media (max-height:780px){.heropanel .hrow .btn small{display:none}.heropanel .hrow .btn{min-height:42px}}
/* ---------- the title screen as a demon gate (Nov 7) ---------- */
.home1 .demon{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.home1 .demon .dtint{position:absolute;inset:0;background:radial-gradient(60% 40% at 53% 30%,rgba(255,70,20,.28),transparent 70%),linear-gradient(180deg,rgba(60,0,0,.55),rgba(20,0,4,.35) 40%,rgba(5,0,2,.6));mix-blend-mode:multiply}
.home1 .demon .dtint::after{content:'';position:absolute;inset:0;background:radial-gradient(45% 30% at 53% 30%,rgba(255,60,20,.35),transparent 70%);mix-blend-mode:screen;animation:dpulse 3.2s ease-in-out infinite}
@keyframes dpulse{50%{opacity:.45}}
.home1.demonic .portalfx{filter:hue-rotate(165deg) saturate(1.6) brightness(1.05)}
.home1 .dsig{position:absolute;transform:translate(-50%,-50%);width:260px;height:260px}
.home1 .dsig .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,90,40,.55);box-shadow:0 0 18px rgba(255,60,20,.6),inset 0 0 18px rgba(255,60,20,.45);
  background:repeating-conic-gradient(from 0deg,rgba(255,120,60,.55) 0 2deg,transparent 2deg 15deg);-webkit-mask:radial-gradient(closest-side,transparent 86%,#000 87% 96%,transparent 97%);mask:radial-gradient(closest-side,transparent 86%,#000 87% 96%,transparent 97%);animation:dspin 40s linear infinite}
.home1 .dsig .ring.r2{inset:-9%;opacity:.5;animation-direction:reverse;animation-duration:60s}
@keyframes dspin{to{transform:rotate(360deg)}}
.home1 .dsig .horn{position:absolute;top:-22%;width:30%;height:42%;background:linear-gradient(180deg,#f5e6d3,#7c2d12 45%,#1c0a05);clip-path:polygon(50% 0,72% 30%,100% 100%,40% 100%,30% 45%);filter:drop-shadow(0 0 10px rgba(255,60,20,.7))}
.home1 .dsig .hl{left:4%;transform:rotate(-24deg) scaleX(-1)}.home1 .dsig .hr{right:4%;transform:rotate(24deg)}
.home1 .dsig .crack{position:absolute;width:2px;background:linear-gradient(#ffb13b,#ff3b1a,transparent);box-shadow:0 0 8px #ff4d1a;transform-origin:50% 0;animation:dcrack 2.4s ease-in-out infinite}
.home1 .dsig .c1{left:20%;top:78%;height:40%;transform:rotate(28deg)}.home1 .dsig .c2{left:78%;top:80%;height:34%;transform:rotate(-34deg);animation-delay:-.8s}.home1 .dsig .c3{left:50%;top:96%;height:30%;animation-delay:-1.6s}
@keyframes dcrack{50%{opacity:.35}}
.home1 .dembers i{position:absolute;bottom:-10px;width:var(--sz);height:var(--sz);border-radius:50%;background:#ffb13b;box-shadow:0 0 6px 2px rgba(255,90,30,.8);animation:dember linear infinite;opacity:0}
@keyframes dember{0%{transform:translate(0,0);opacity:0}10%{opacity:.95}70%{opacity:.7}100%{transform:translate(30px,-95vh);opacity:0}}
.home1.demonic .htitle h1{color:#ffe9dc;text-shadow:0 1px 0 #ffb4a0,0 2px 0 #c2410c,0 3px 0 #7c1d0b,0 4px 0 #3b0a05,0 8px 14px rgba(0,0,0,.8),0 0 26px rgba(255,60,20,.7);animation:dtitle 3.2s ease-in-out infinite}
@keyframes dtitle{50%{text-shadow:0 1px 0 #ffb4a0,0 2px 0 #c2410c,0 3px 0 #7c1d0b,0 4px 0 #3b0a05,0 8px 14px rgba(0,0,0,.8),0 0 44px rgba(255,80,30,.95)}}
.home1.demonic .htitle small{color:#fca5a5}
.home1>.demon~*{z-index:1}
body:not(.fancy) .home1 .dembers{display:none}
@media (prefers-reduced-motion:reduce){.home1 .demon *,.home1.demonic .htitle h1{animation:none!important}}

/* Stage 3: nine gear slots as a compact 3×3 grid so "Wearing" fits on one screen */
.gear9 { display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; margin:4px 0 8px; }
.gslot { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; padding:5px 4px 4px; border-radius:10px; border:1.5px solid var(--rc, rgba(255,255,255,.14));
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.25)); color:inherit; font:inherit; cursor:pointer; box-shadow:inset 0 0 10px color-mix(in srgb, var(--rc, transparent) 30%, transparent); }
.gslot .lic { font-size:18px; line-height:1; }
.gslot b { font-size:10.5px; line-height:1.15; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--rc, #cbd5e1); }
.gslot small { font-size:9px; opacity:.75; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gslot.empty { opacity:.55; border-style:dashed; }
.gslot.r-unique { animation:uniqGlow 2.4s ease-in-out infinite; }
@keyframes uniqGlow { 50% { box-shadow:inset 0 0 14px rgba(255,59,74,.5), 0 0 8px rgba(255,59,74,.45); } }
.forge9 { max-height:52vh; }
/* gear looks: armor shown on the hero (stage 3) */
.av .acc.gearhelm { filter:drop-shadow(0 0 4px var(--rc)); font-size:1.05em; }
.av .gearchest { position:absolute; inset:0; background:var(--c); mix-blend-mode:multiply; opacity:.75; pointer-events:none; -webkit-mask-size:100% 100%; mask-size:100% 100%; }
.presets { display:grid; grid-template-columns:1fr; gap:5px; }
.presets .prow { display:flex; gap:6px; align-items:center; }
.presets .prow b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gpick { display:flex; gap:8px; justify-content:center; margin:6px 0; }
.gpick .btn.on { outline:2px solid #fbbf24; }
.petlv { font-size:12px; opacity:.85; }

/* Stage 3b: country flags, country picker, Hunters Online globe, guild milestones */
.flag{font-size:1.05em;margin-right:.3em;vertical-align:-.05em;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.ctrypick .ctq{width:100%;box-sizing:border-box;padding:.55em .7em;border-radius:10px;border:1px solid #6b4a2a;background:#1a1016;color:#f4e6d0;font:inherit;margin:.2em 0 .45em}
.ctrypick .ctlist{max-height:46vh;max-height:46dvh;display:flex;flex-direction:column;gap:2px}
.ctrypick .ctrow{display:flex;align-items:center;text-align:left;padding:.5em .6em;border:0;border-radius:8px;background:rgba(255,255,255,.04);color:inherit;font:inherit;cursor:pointer}
.ctrypick .ctrow.on{background:rgba(255,177,59,.18);color:#ffd27a}
.ctrypick .ctrow:focus-visible,.ctrypick .ctrow:hover{background:rgba(255,122,26,.16)}
.worldpanel .wglobe{position:relative;height:38vh;height:38dvh;min-height:200px;border-radius:14px;overflow:hidden;
  background:radial-gradient(circle at 50% 55%,rgba(255,110,30,.16),rgba(20,8,14,.0) 60%),#0b0609;box-shadow:inset 0 0 40px rgba(255,90,20,.18)}
.worldpanel .wglobe>.dim{padding-top:15vh}
.worldpanel .wglobe.flat{display:flex;align-items:center;justify-content:center;height:auto;min-height:0;padding:.8em}
.worldpanel .wflat{font-size:2.4rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.worldpanel .wflat small{font-size:.75rem;color:var(--dim);max-width:24em}
.worldpanel .wonline{margin:.5em 0 .3em;text-align:center}
.worldpanel .wonline b{color:#ffb13b;font-size:1.15em}
.worldpanel .wtop{max-height:24vh;max-height:24dvh}
.worldpanel .wrow{display:flex;align-items:center;gap:.35em;padding:.35em .2em;border-bottom:1px solid rgba(255,255,255,.06)}
.worldpanel .wrow b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.worldpanel .wrow.mine b{color:#ffe066}
.worldpanel .won{color:#7dff9a;font-style:normal}
.wtip{background:rgba(20,10,14,.92);border:1px solid #a8541c;border-radius:8px;padding:4px 8px;color:#f4e6d0;font:12px system-ui}
.glog.gms{color:#ffd27a;font-weight:600}
.glog.gms.badge{color:#c9a8ff}
@media (max-height:700px){.worldpanel .wglobe{height:32vh;height:32dvh}.worldpanel .wtop{max-height:20vh;max-height:20dvh}}
.hflag{margin-left:auto;margin-right:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:44px;min-height:40px;padding:2px 6px;border-radius:10px;
  border:1px solid rgba(255,177,59,.35);background:rgba(255,122,26,.08);color:inherit;font-size:1.15rem;line-height:1.1;cursor:pointer;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",inherit}
.hflag small{font-size:.58rem;color:var(--dim);font-family:inherit;letter-spacing:.02em}

/* Stage 3c: relic slot (10-slot grid), melt/sell buttons, damage over time */
.gear9.g10 { grid-template-columns:repeat(5, 1fr); gap:4px; }
.gear9.g10 .gslot { padding:4px 2px 3px; }
.gear9.g10 .gslot b { font-size:9.5px; }
.gear9.g10 .gslot small { display:none; }
.iacts { display:flex; gap:4px; margin-left:auto; flex-shrink:0; }
.iacts .btn.small { padding:5px 7px; min-width:0; }
.iacts .imelt { color:#fdba74; } .iacts .isell { color:#fde68a; }
.dotbar { display:flex; flex-wrap:wrap; gap:3px; pointer-events:none; }
.dotbar:not(:empty) { margin:0 0 3px; }
.dotbar i { font-style:normal; font-size:11px; font-weight:800; padding:1px 5px; border-radius:9px; background:rgba(10,8,20,.82); border:1.5px solid var(--dc); color:var(--dc); box-shadow:0 0 8px var(--dc); white-space:nowrap; }
#me.dotted { filter:drop-shadow(0 0 10px var(--dc)) drop-shadow(0 0 3px var(--dc)); }
.dotpuff { position:absolute; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle, var(--dc) 0%, transparent 70%); pointer-events:none; z-index:30; animation:dotRise .9s ease-out forwards; }
@keyframes dotRise { 0% { transform:translateY(0) scale(.6); opacity:.95; } 100% { transform:translateY(-46px) scale(1.5); opacity:0; } }
.dmg.dotn { font-size:1.05rem; }
@media (prefers-reduced-motion: reduce) { .dotpuff { animation:none; opacity:0; } }

.msg .desp { color:#ff4d6a; text-shadow:0 0 8px rgba(255,40,70,.7); }

/* Long system windows (update notes, help, system notices): the text scrolls, the button stays put at the bottom (thumb zone) */
.win.red:has(.sysscroll) { overflow:hidden; display:flex; flex-direction:column; }
.sysscroll { display:flex; flex-direction:column; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); min-height:0; }
.sysscroll .sbody { flex:1 1 auto; min-height:0; max-height:60vh; max-height:60dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-right:4px; position:relative; z-index:1;
  mask-image:linear-gradient(180deg, #000 calc(100% - 18px), transparent); -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 18px), transparent); }
.sysscroll .sfoot { flex:0 0 auto; position:relative; z-index:2; padding-top:6px; }
.sysscroll .sfoot .btn { width:100%; min-height:48px; margin-top:4px; }
/* any other system window that runs long: its last button sticks to the bottom of the window */
.win.red .sysred:not(.sysscroll) > .btn:last-child { position:sticky; bottom:0; z-index:2; box-shadow:0 -10px 16px rgba(18,2,4,.95); }

.sysscroll .notes { max-height:none !important; overflow:visible !important; }

.boostchip.mega { background:linear-gradient(90deg,#7c2d12,#b91c1c,#7c2d12); color:#fff7d6; box-shadow:0 0 14px rgba(255,80,40,.8); animation:uniqGlow 1.2s ease-in-out infinite; }

/* ===== Stage 3d (Nov 7): enemy variety and glow, healers, lightning, bigger box openings, thumb zone, toasts, taste pass ===== */
/* every spawn: a small colour and size shift (bosses keep their true look) */
.foe .dsp{scale:var(--sz,1);filter:hue-rotate(var(--hue,0deg)) drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.foe.elite .dsp{filter:hue-rotate(var(--hue,0deg)) drop-shadow(0 0 10px #c27bff) drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.foe.minif .dsp{filter:hue-rotate(var(--hue,0deg)) drop-shadow(0 0 10px #c084fc) drop-shadow(0 0 22px rgba(192,132,252,.6)) drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.foe .etag{position:absolute;z-index:3;left:50%;top:2%;translate:-50% 0;font:800 .62rem/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#f5d0fe;background:rgba(40,10,50,.82);border:1px solid #c084fc;border-radius:99px;padding:3px 7px;white-space:nowrap;pointer-events:none}
/* glow grows with strength: elites and mini bosses a soft aura, bosses a strong pulsing one with motes */
.foe.gl1::before,.foe.gl2::before,.foe.gl3::before{content:'';position:absolute;z-index:0;inset:12% 14% 4%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,var(--gc,#c084fc) 0%,transparent 75%);opacity:.32;filter:blur(6px)}
.foe.gl2{--gc:#f87171}.foe.gl3{--gc:#fbbf24}
.foe.gl2::before,.foe.gl3::before{opacity:.5;animation:auraP 1.8s ease-in-out infinite}
.foe.gl3::before{inset:4% 6% 0;opacity:.62}
@keyframes auraP{50%{opacity:.85;scale:1.08}}
body.fancy .foe.gl2 .plat::after,body.fancy .foe.gl3 .plat::after{content:'';position:absolute;inset:-160% 10% 0;pointer-events:none;background:radial-gradient(2px 2px at 20% 80%,var(--gc) 50%,transparent 51%),radial-gradient(2px 2px at 60% 70%,#fff 50%,transparent 51%),radial-gradient(3px 3px at 80% 90%,var(--gc) 50%,transparent 51%),radial-gradient(2px 2px at 40% 95%,#fff 50%,transparent 51%);animation:motes 2.4s linear infinite;opacity:.8}
@keyframes motes{to{translate:0 -60%;opacity:0}}
/* flinch is a touch harder; wind-up crouches before a big hit */
.foe.hurt .dsp{animation:flinch .32s ease-out}@keyframes flinch{30%{translate:5% 0}}
.foe.wind .dsp{animation:windup .55s ease-in-out}@keyframes windup{40%{translate:-4% 2%;scale:calc(var(--sz,1) * 1.04) calc(var(--sz,1) * .94)}}
/* healers: one of four colours; staff raise + glow, a beam to whoever it heals, a "Heals!" tag, the bar glows as it refills */
.foe.hv-green{--hc:#4ade80}.foe.hv-blue{--hc:#60a5fa}.foe.hv-gold{--hc:#facc15}.foe.hv-shadow{--hc:#a78bfa}
.foe.hv-blue .dsp{filter:hue-rotate(95deg) drop-shadow(0 0 8px #60a5fa)}.foe.hv-gold .dsp{filter:hue-rotate(-60deg) saturate(1.3) drop-shadow(0 0 8px #facc15)}
.foe.hv-shadow .dsp{filter:hue-rotate(160deg) brightness(.8) drop-shadow(0 0 8px #a78bfa)}.foe.hv-green .dsp{filter:drop-shadow(0 0 8px #4ade80)}
.foe[class*='hv-'] .tagh{color:var(--hc);text-shadow:0 0 8px var(--hc)}
.foe.healcast .dsp{animation:healcast .8s ease-out}@keyframes healcast{30%{translate:0 -7%;filter:drop-shadow(0 0 18px var(--hc))}}
.healtag{position:absolute;z-index:4;left:50%;top:-4%;translate:-50% 0;font:900 .9rem/1 "Arial Black",system-ui,sans-serif;text-shadow:0 0 10px currentColor,0 2px 0 #000;animation:healtag 1.3s ease-out forwards;pointer-events:none}
@keyframes healtag{0%{opacity:0;scale:.6}15%{opacity:1;scale:1.15}25%{scale:1}100%{opacity:0;translate:-50% -60%}}
.healbeam{position:absolute;z-index:6;height:8px;margin-top:-4px;transform-origin:0 50%;pointer-events:none;border-radius:8px;background:linear-gradient(90deg,transparent,var(--hc) 20%,#fff 50%,var(--hc) 80%,transparent);box-shadow:0 0 14px var(--hc),0 0 30px var(--hc);animation:beam .9s ease-out forwards}
@keyframes beam{0%{opacity:0;scale:0 1}25%{opacity:1;scale:1 1}70%{opacity:.9}100%{opacity:0;scale:1 .2}}
#fbox .frow1.healbar .bar{box-shadow:0 0 0 2px var(--hc),0 0 14px var(--hc);transition:box-shadow .3s}
#fbox .frow1.healbar .bar u{transition:width .8s ease-out}
.dmg.heal{font-size:1.5em;color:#4ade80;text-shadow:0 0 10px #22c55e,0 2px 0 #052e16,0 0 2px #000}
/* lightning: branching bolts, a flicker, and idle sparks on storm mages */
.zapsvg{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none;animation:zapf .42s steps(3) forwards}
.zapsvg path{fill:none;stroke-linejoin:round;stroke-linecap:round}
.zapsvg .z1{stroke:#fff;stroke-width:3.5;filter:drop-shadow(0 0 6px #fde047) drop-shadow(0 0 14px #facc15)}
.zapsvg.big .z1{stroke-width:6}.zapsvg .z2{stroke:#fef9c3;stroke-width:1.8;filter:drop-shadow(0 0 5px #facc15)}
@keyframes zapf{0%,60%{opacity:1}30%{opacity:.4}100%{opacity:0}}
#app.flicker::after{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;background:#fef9c3;opacity:0;animation:flick .35s steps(4) forwards}
@keyframes flick{0%,50%{opacity:.1}25%,75%{opacity:0}100%{opacity:0}}
.idlespark{position:absolute;z-index:3;width:3px;height:14px;border-radius:2px;background:#fef9c3;box-shadow:0 0 8px #facc15,0 0 16px #fde047;rotate:25deg;pointer-events:none;animation:idsp .6s ease-out forwards}
@keyframes idsp{0%{opacity:0;scale:.3}30%{opacity:1;scale:1}100%{opacity:0;scale:.6 1.4}}
@media (prefers-reduced-motion:reduce){.zapsvg,.healbeam,.idlespark,.foe.gl2::before,.foe.gl3::before{animation:none}#app.flicker::after{display:none}}
/* boxes: harder and harder shakes, light from the seams, then the burst; a big rarity banner after */
.chest.c2{position:relative}
.chest.c2.rumble{animation:rumble .23s linear}
@keyframes rumble{20%{translate:calc(var(--rk,1) * -2px) calc(var(--rk,1) * 1px);rotate:calc(var(--rk,1) * -1.4deg)}40%{translate:calc(var(--rk,1) * 2px) 0;rotate:calc(var(--rk,1) * 1.4deg)}60%{translate:calc(var(--rk,1) * -2px) calc(var(--rk,1) * -1px)}80%{translate:calc(var(--rk,1) * 2px) 0}}
.chest .seams{position:absolute;inset:18% 8%;border-radius:12px;pointer-events:none;z-index:2;background:radial-gradient(closest-side,var(--sc),transparent);mix-blend-mode:screen;opacity:calc(var(--rk,0) * .22);filter:blur(4px);transition:opacity .2s}
.chest .seams::before{content:'';position:absolute;left:-10%;right:-10%;top:46%;height:6px;background:linear-gradient(90deg,transparent,#fff,var(--sc),#fff,transparent);box-shadow:0 0 18px var(--sc);opacity:calc(var(--rk,0) * .25)}
.rarbanner{position:absolute;z-index:20;left:50%;top:16%;translate:-50% 0;display:grid;justify-items:center;gap:2px;pointer-events:none;animation:rban 2.2s ease-out forwards}
.rarbanner b{font:900 2.4rem/1 "Arial Black",system-ui,sans-serif;letter-spacing:.08em;color:var(--rc);text-shadow:0 0 16px var(--rc),0 0 34px var(--rc),0 3px 0 #000}
.rarbanner small{font-weight:800;color:#fff;text-shadow:0 2px 4px #000}
@keyframes rban{0%{opacity:0;scale:2.2}12%{opacity:1;scale:.92}20%{scale:1}80%{opacity:1}100%{opacity:0;translate:-50% -30%}}
.boxwin .loot.fly{animation:lootfly .6s cubic-bezier(.2,1.4,.4,1) forwards,trail .9s ease-out forwards;animation-delay:var(--d),var(--d)}
@keyframes trail{0%{box-shadow:0 -40px 30px -10px var(--rc,#fff)}100%{box-shadow:0 0 0 0 transparent}}
/* thumb zone: windows sit low, the main buttons sit at the bottom where the thumb reaches */
.dh .veil{align-items:flex-end;padding-bottom:calc(14px + var(--safe-b,0px))}
.boxwin .thumbbar{display:grid;gap:6px;width:100%;margin-top:6px;position:sticky;bottom:0}
.boxwin .thumbopen,.thumbopen{width:100%;min-height:54px;font-size:1.05rem;margin-top:10px}
.veil.boxveil{cursor:pointer}
/* toasts: at most three; inside a window they are small and quick */
.toast.tmini{font-size:.74rem;padding:5px 9px;opacity:.94}
.toast.more{text-align:center;color:#fde68a;border-color:#a16207}
/* taste pass: solid buttons with a thin gold edge and a soft inner glow; royal trim on windows */
.dh .btn{background:linear-gradient(180deg,#1b1530 0%,#120d22 100%);border:1px solid rgba(212,175,55,.55);box-shadow:inset 0 0 12px rgba(255,214,120,.08),0 2px 6px rgba(0,0,0,.45);transition:transform .08s,box-shadow .2s,filter .2s}
.dh .btn:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 0 16px rgba(255,214,120,.18),0 1px 2px rgba(0,0,0,.5)}
.dh .btn.primary{background:linear-gradient(180deg,#3b1d5e 0%,#24123d 100%);border-color:#d4af37;box-shadow:inset 0 0 14px rgba(255,214,120,.18),0 0 12px rgba(212,175,55,.25),0 2px 6px rgba(0,0,0,.45);color:#fff3cf}
.dh .btn.on{border-color:#ffd24a;box-shadow:inset 0 0 14px rgba(255,210,74,.25)}
.dh .btn:disabled{filter:grayscale(.6) brightness(.75)}
.dh .win.dhp{background:radial-gradient(120% 80% at 50% 0%,rgba(76,29,149,.22),transparent 60%),linear-gradient(180deg,#140f24 0%,#0c0918 100%);border:1px solid rgba(212,175,55,.45);box-shadow:inset 0 0 0 3px rgba(12,9,24,.9),inset 0 0 0 4px rgba(212,175,55,.2),0 10px 40px rgba(0,0,0,.6);position:relative}
.dh .win.dhp::before,.dh .win.dhp::after{content:'';position:absolute;width:26px;height:26px;pointer-events:none;border:2px solid rgba(212,175,55,.6);opacity:.8}
.dh .win.dhp::before{left:6px;top:6px;border-right:0;border-bottom:0;border-top-left-radius:10px}
.dh .win.dhp::after{right:6px;bottom:6px;border-left:0;border-top:0;border-bottom-right-radius:10px}
.dh .win.dhp h2{color:#f5d98b;border-bottom-color:rgba(212,175,55,.45);text-shadow:0 0 10px rgba(212,175,55,.35)}
.volrow input[type=range]{width:100%;accent-color:#d4af37;margin-top:4px}
.crate2.hasart{position:relative}.crate2.hasart>*:not(.crateart):not(.glow):not(.beams){opacity:0}
.crate2 .crateart{position:absolute;left:50%;top:50%;width:118%;translate:-50% -52%;z-index:2;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(248,113,113,.45));pointer-events:none}
.giftwin{display:grid;justify-items:center;gap:8px;width:100%}
.gift3d{position:relative;width:min(62vw,240px);aspect-ratio:1;border:0;display:grid;place-items:center;cursor:pointer}
.gift3d img{width:100%;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(94,234,212,.45))}
.gift3d.pulse{animation:giftbob 1.6s ease-in-out infinite}@keyframes giftbob{50%{translate:0 -4%;scale:1.03}}
.gift3d.rumble{animation:rumble .23s linear}
.gift3d.burst img{animation:giftburst .65s ease-in forwards}@keyframes giftburst{30%{scale:1.15;filter:brightness(2)}100%{scale:1.6;opacity:0;filter:brightness(3) blur(4px)}}
.giftemoji{font-size:7rem}

/* ---------- Stage 3e: stats and events ---------- */
.hflag.hstat{margin-left:auto}.hflag.hstat+.hflag{margin-left:0}
.statwin .statsall{max-height:min(70dvh,560px)}
.strow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 4px;border-bottom:1px solid rgba(255,210,74,.12);font-size:.92rem}
.strow b{color:#ffe7a3;text-align:right}.strow b small{color:var(--dim);font-weight:600;margin-left:4px}
.strow .rdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:2px;vertical-align:middle}
.statcard{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;margin:2px 0 8px;padding:8px 10px;border-radius:12px;background:rgba(255,210,74,.07);border:1px solid rgba(255,210,74,.25);font-size:.84rem}
.statcard b{color:#ffe7a3}
.evchip{display:inline-flex;align-items:center;gap:4px;margin:6px 4px 0 0;padding:4px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:linear-gradient(90deg,#9f1239,#15803d);color:#fff;font:800 .82rem/1.2 inherit;box-shadow:0 0 14px rgba(255,90,90,.45);cursor:pointer}
.evchip.soon{background:linear-gradient(90deg,#334155,#475569);box-shadow:none;font-weight:700}
.evchip small{opacity:.8;font-weight:600}.evchip.dot::after{top:-2px;right:-2px}
.evwin .evcal{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:4px 0 8px}
.evday{display:grid;justify-items:center;padding:4px 0;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font-size:.7rem;line-height:1.15}
.evday b{font-size:1rem;color:#fff}.evday i{font-style:normal;font-size:.85rem}
.evday.got{background:rgba(34,197,94,.18);border-color:rgba(74,222,128,.55)}.evday.today{border-color:#ffd24a;box-shadow:0 0 10px rgba(255,210,74,.55)}.evday.missed{opacity:.45}
.evwin .evlist{max-height:min(46dvh,360px)}.evp.qdone{opacity:.65}
.evprev{margin:4px 0 8px;padding:6px 10px;border-radius:10px;background:rgba(56,189,248,.12);border:1px dashed rgba(56,189,248,.5);font-size:.8rem;text-align:center}
.evprev .btn{margin-left:6px}
.evopen{display:grid;gap:8px;width:100%}.evopen .cratecap{text-align:center}
.gift3d.huge{width:min(74vw,290px)}.gift3d.huge img{filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)) drop-shadow(0 0 32px rgba(255,210,74,.75))}
/* Christmas home: lights along the top, gentle snow, a little tree with presents */
.home1.ev-xmas{position:relative}
.xmasfx{position:absolute;inset:0;z-index:0!important;pointer-events:none;overflow:hidden}
.xlights{position:absolute;left:0;right:0;top:calc(var(--safe-t, 0px) + 2px);display:flex;justify-content:space-around}
.xlights i{width:9px;height:12px;border-radius:50% 50% 45% 45%;background:hsl(calc(var(--i) * 77),90%,60%);box-shadow:0 0 10px hsl(calc(var(--i) * 77),90%,60%);animation:xblink 1.8s ease-in-out infinite;animation-delay:calc(var(--i) * -.27s)}
@keyframes xblink{50%{opacity:.35;box-shadow:none}}
.xsnow i{position:absolute;top:-10px;width:var(--sz);height:var(--sz);border-radius:50%;background:#fff;opacity:.8;animation:xsnow linear infinite}
@keyframes xsnow{to{transform:translate3d(30px,110dvh,0)}}
.xtree{position:absolute;right:10px;bottom:calc(var(--safe-b, 0px) + 150px);font-size:2.6rem;filter:drop-shadow(0 0 10px rgba(255,220,120,.6));opacity:.9}
.xtree span{position:absolute;bottom:-4px;left:-14px;font-size:1.1rem}.xtree span.p2{left:auto;right:-12px}
@media (prefers-reduced-motion: reduce){.xsnow i,.xlights i{animation:none}}
body:not(.fancy) .xsnow{display:none}

/* boss title-card tagline (Nov 8) */
.bosscard .bctag{display:block;margin-top:6px;font-size:.78em;font-style:italic;font-weight:400;opacity:.9;max-width:86vw;letter-spacing:.02em}

/* ===== Stage 3f (Nov 8): the visual review, built ===== */
/* 15. one bold game font (Cinzel 900, self-hosted, OFL) with an outline: titles, prices, levels, big numbers */
@font-face{font-family:GameFont;src:url(../assets/fonts/cinzel-900.woff2) format('woff2');font-weight:900;font-display:swap}
.dh .win h2,.dh .ph h2,.gol,.nplate b,.coins,.dia,.gprice,.aplus b,.adiff b,.fcost b,.rarbanner b,.dmg,.qring text,.fl,.tabbar .tl2,.curbar b,.dh .bar.tx span,.gcard>b,.pcard>b,.htitle2,.evchip{font-family:GameFont,Georgia,serif;font-weight:900}
.dh .win h2,.dh .ph h2,.gol,.nplate b,.gprice,.aplus b,.rarbanner b,.pcard>b{-webkit-text-stroke:.6px rgba(0,0,0,.55);paint-order:stroke fill;text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 10px rgba(212,175,55,.25)}
.dh .win.dhp h2,.dh .win.dhp .ph h2{color:#f5d98b;background:none;-webkit-background-clip:initial;background-clip:initial;letter-spacing:.08em}

/* 1. dim and blur the world behind every panel */
.dh .veil{backdrop-filter:blur(7px) saturate(.8) brightness(.8);-webkit-backdrop-filter:blur(7px) saturate(.8) brightness(.8);background:rgba(4,3,12,.62)}

/* 13. quick transitions: panels slide up, screens fade (reduced motion: none) */
.dh .win.dhp{animation:panelin .18s ease-out}
@keyframes panelin{from{opacity:0;translate:0 18px}}
#screen>.home1,#screen>.hall1{animation:scrin .18s ease-out}
@keyframes scrin{from{opacity:.55}}
@media (prefers-reduced-motion:reduce){.dh .win.dhp,#screen>.home1,#screen>.hall1{animation:none}}

/* 5. taller panels that start high and fill the screen; lists grow, buttons stay low */
.dh .win.dhp.tall{min-height:min(80dvh,740px);max-height:calc(100dvh - 24px - var(--safe-t,0px) - var(--safe-b,0px));display:flex;flex-direction:column;gap:10px}
.dh .win.dhp.tall>.scroll{flex:1 1 auto;min-height:0;max-height:none}
.dh .win.dhp.tall>*{flex:none}.dh .win.dhp.tall>.scroll,.dh .win.dhp.tall>.empty3,.dh .win.dhp.tall>.pcards,.dh .win.dhp.tall>.gsgrid{flex:1 1 auto}

/* 12. the currency bar, always right under the panel title */
.curbar{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:-4px 0 0;font-size:.82rem}
.curbar .cb{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:99px;background:rgba(0,0,0,.35);border:1px solid rgba(212,175,55,.35);white-space:nowrap}
.curbar .cb .coins{background:none;border:0;padding:0;font-size:.82rem}.curbar .coins .xs{display:none}
.curbar .cplus{width:26px;height:26px;border-radius:50%;border:1px solid #d4af37;background:linear-gradient(180deg,#3b1d5e,#24123d);color:#ffe7a3;font:900 1rem/1 GameFont,serif;padding:0}
@media (max-width:370px){.curbar{font-size:.74rem;gap:4px}.curbar .cb{padding:2px 6px}}

/* 6. empty states */
.empty3{display:grid;justify-items:center;align-content:center;gap:10px;padding:24px 8px;text-align:center}
.empty3 .eic{font-size:4.2rem;filter:drop-shadow(0 0 18px rgba(212,175,55,.35));animation:ebob 2.4s ease-in-out infinite}
@keyframes ebob{50%{translate:0 -6px}}
.empty3 b{color:#e9d8a6;font-size:1.05rem}.empty3 .btn{min-width:180px}
@media (prefers-reduced-motion:reduce){.empty3 .eic{animation:none}}

/* 2, 3, 14. home: hero with a nameplate beside the title, one big Enter button, quick row, bottom tab bar */
.home1.h3f{padding:0 12px calc(var(--safe-b) + 8px)}
.h3f .hstage{position:relative;display:flex;align-items:flex-end;gap:6px;width:100%;max-width:520px;align-self:center;margin-bottom:4px}
.h3f .hhero{--hw:clamp(110px,36vw,178px);flex:0 0 var(--hw);width:var(--hw);height:var(--hw);position:relative;container-type:size}
.h3f .hhero .av{position:absolute;inset:0;width:100%!important;height:100%!important}
.h3f .hhero::after{content:'';position:absolute;left:14%;right:14%;bottom:1%;height:11%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);z-index:-1}
.h3f .hhero .av{transform:scaleX(1)}
.h3f .htitle{flex:1 1 auto;min-width:0;margin-bottom:8px}
.h3f .htitle h1{font-size:clamp(2rem,9.5vw,3.3rem)}
.nplate{display:inline-grid;margin-top:8px;padding:5px 12px 5px 10px;border-radius:10px;background:linear-gradient(90deg,rgba(59,29,94,.9),rgba(20,12,36,.75));border:1px solid rgba(212,175,55,.55);box-shadow:0 4px 12px rgba(0,0,0,.45);max-width:100%}
.nplate b{font-size:1rem;color:#ffe7a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nplate .npf{margin-right:5px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;-webkit-text-stroke:0}
.nplate small{color:#d6c7f5;font-weight:800;font-size:.74rem;letter-spacing:.06em}.nplate .npb{margin-left:4px}
.h3f .hmenu{gap:8px;align-self:center}
.hquick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.dh .btn.qb,.dh .btn.tab{display:grid;justify-items:center;align-content:center;gap:1px;min-height:52px;padding:4px 2px;border-radius:14px}
.btn.qb .ti,.btn.tab .ti{font-style:normal;font-size:1.3rem;line-height:1.1}
.btn.qb .tl2,.btn.tab .tl2{font-size:.66rem;font-weight:800;letter-spacing:.04em;color:#e9d8a6;white-space:nowrap}
.btn.qb.locked,.btn.tab.locked{filter:grayscale(.8) brightness(.7)}
.dh .btn.gofloor{min-height:66px;border-radius:18px;display:grid;justify-items:center;gap:1px;font-size:1.25rem;background:radial-gradient(120% 140% at 50% 0%,#7c3aed 0%,#3b1d5e 45%,#1e0f36 100%);border:2px solid #f5d98b;box-shadow:0 0 18px rgba(245,217,139,.45),0 0 40px rgba(124,58,237,.45),inset 0 0 18px rgba(255,214,120,.25);animation:goglow 2.2s ease-in-out infinite}
.btn.gofloor .gol{font-size:1.3rem;color:#fff3cf;letter-spacing:.04em}
.btn.gofloor small{font-size:.72rem;color:#e9d8a6;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
@keyframes goglow{50%{box-shadow:0 0 28px rgba(245,217,139,.7),0 0 60px rgba(124,58,237,.6),inset 0 0 22px rgba(255,214,120,.35)}}
@media (prefers-reduced-motion:reduce){.dh .btn.gofloor{animation:none}}
.tabbar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:5px;border-radius:18px;background:linear-gradient(180deg,rgba(20,12,36,.92),rgba(8,6,16,.96));border:1px solid rgba(212,175,55,.45);box-shadow:0 -4px 16px rgba(0,0,0,.45)}
.dh .tabbar .btn.tab{min-height:50px;background:transparent;border-color:transparent;box-shadow:none}
.dh .tabbar .btn.tab:active{background:rgba(124,58,237,.25)}
.h3f .dot::after,.tabbar .dot::after{top:4px;right:8px}
body.compact .btn.qb .tl2,body.compact .btn.tab .tl2{display:none}
/* phones with less height: shrink the hero first, then the title */
.home1.h3f.tight .hhero{--hw:clamp(96px,28vw,140px)}.home1.h3f.tight .htitle h1{font-size:clamp(1.8rem,8vw,2.6rem)}
.home1.h3f.tighter .hhero{--hw:clamp(84px,24vw,118px)}.home1.h3f.tighter .btn.qb{min-height:44px}.home1.h3f.tighter .btn.qb .tl2{display:none}.home1.h3f.tighter .dh .btn.gofloor,.home1.h3f.tighter .btn.gofloor{min-height:56px}
.home1.h3f.tightest .hhero{--hw:clamp(72px,20vw,96px)}.home1.h3f.tightest .htitle h1{display:none}.home1.h3f.tightest .btn.tab{min-height:44px}

/* 4. one hint at a time, in the layout (never over the title or a button) */
.hint.hpill{position:relative;inset:auto;width:auto;max-width:520px;align-self:center;margin:0;padding:6px 14px;font-size:.82rem;border-radius:99px;text-align:center;animation:hpill 1.6s ease-in-out infinite}
.hint.hpill::after{display:none}
@keyframes hpill{50%{box-shadow:0 0 16px rgba(255,210,74,.7)}}
.hall1>.hint.hpill{margin-bottom:-4px}

/* 7. skill tree: bigger nodes, brighter icons, a glow on ones you can learn now */
.tree2 .node2{width:18%}
.tree2 .node2 .ni{font-size:clamp(1.25rem,6.4vw,1.9rem)}
.tree2 .node2.open:not(.maxed){border-color:#ffd24a;box-shadow:0 0 0 2px rgba(255,210,74,.35),0 0 18px rgba(255,210,74,.75),inset 0 0 12px rgba(255,210,74,.35);background:radial-gradient(#3b2a07,#140f05)}
.tree2 .node2.lit:not(.open){box-shadow:0 0 12px rgba(255,210,74,.5)}

/* 8. the forge: the item on an anvil */
.forge3 .anvil{position:relative;display:grid;justify-items:center;gap:6px;padding:14px 10px 12px;border-radius:16px;background:radial-gradient(90% 70% at 50% 25%,color-mix(in srgb,var(--rc) 22%,transparent),transparent 70%),rgba(0,0,0,.28);border:1px solid color-mix(in srgb,var(--rc) 55%,transparent)}
.forge3 .aitem{position:relative;width:96px;height:96px;display:grid;place-items:center;border-radius:20px;background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 35%,transparent),transparent);z-index:1}
.forge3 .aic{font-size:3.6rem;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 0 14px var(--rc))}
.forge3 .aglow{position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,154,60,.35),transparent);animation:aglow 2s ease-in-out infinite}
@keyframes aglow{50%{opacity:.4;scale:1.1}}
.forge3 .ablock{width:150px;height:26px;margin-top:-18px;border-radius:6px 6px 14px 14px;background:linear-gradient(180deg,#5b6474,#2b313c 60%,#14171d);box-shadow:0 6px 12px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.18);clip-path:polygon(0 0,100% 0,88% 100%,12% 100%)}
.forge3 .aname{font-size:1rem;text-align:center}
.forge3 .aplus{display:flex;align-items:center;gap:10px;font-size:1.5rem}.forge3 .aplus i,.forge3 .adiff i{font-style:normal;color:#ffd24a;font-size:.9em}
.forge3 .aplus .nx,.forge3 .adiff .nx{color:#86efac}
.forge3 .adiff{display:grid;gap:3px;width:100%;max-width:300px}
.forge3 .adiff span{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:baseline;font-size:.86rem}.forge3 .adiff small{color:var(--dim)}
.forge3 .anvil.hit .aitem{animation:fhit .5s ease-out}
@keyframes fhit{0%{scale:1}20%{scale:.86}45%{scale:1.14}100%{scale:1}}
.fcost{display:flex;justify-content:center;gap:10px}
.fcost span{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:99px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);font-size:.9rem}
.fcost .ok{border-color:rgba(134,239,172,.55)}.fcost .no{border-color:rgba(248,113,113,.65);color:#fca5a5}
.fpick{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}.fpick::-webkit-scrollbar{display:none}
.fchip{flex:0 0 auto;display:grid;justify-items:center;width:52px;padding:5px 0;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid color-mix(in srgb,var(--rc) 55%,transparent);color:inherit;font-size:1.3rem;line-height:1.1}
.fchip small{font:900 .66rem/1 GameFont,serif;color:#e9d8a6}
.fchip.on{background:color-mix(in srgb,var(--rc) 25%,#120d22);box-shadow:0 0 12px color-mix(in srgb,var(--rc) 60%,transparent);border-color:var(--rc)}
.forge3 .fup{margin-top:auto;min-height:58px;font-size:1.15rem}

/* 9. pets: swipeable portrait cards */
.pcards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 11%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pcards::-webkit-scrollbar{display:none}
.pcard{flex:0 0 78%;scroll-snap-align:center;display:grid;justify-items:center;align-content:start;gap:7px;padding:14px 12px;border-radius:18px;background:radial-gradient(90% 60% at 50% 20%,rgba(124,58,237,.3),transparent 70%),rgba(0,0,0,.3);border:1px solid rgba(212,175,55,.4);text-align:center}
.pcard.on{border-color:#86efac;box-shadow:0 0 18px rgba(134,239,172,.35)}
.pcard .petpic.big{width:min(52vw,210px);height:min(52vw,210px);display:grid;place-items:center}
.pcard .petpic.big img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}.pcard .petpic.big b{font-size:6rem}
.pcard>b{font-size:1.15rem;color:#ffe7a3}.pcard>small{color:#cbd5e1;min-height:2.4em}
.pcard .bar{width:80%}.pcard .btn{min-width:60%}.pwith{color:#86efac;font-weight:800}.plock{font-size:1.4rem;opacity:.7}
.pdots{display:flex;justify-content:center;gap:7px}.pdots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}.pdots i.on{background:#ffd24a;box-shadow:0 0 8px #ffd24a}

/* 10. quests: progress rings, ready rows glow, Claim all */
.q3{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.qring{width:44px;height:44px;rotate:-90deg}.qring circle{fill:none;stroke-width:5}.qring .qr0{stroke:rgba(255,255,255,.12)}.qring .qr1{stroke:#ffd24a;stroke-linecap:round;transition:stroke-dashoffset .5s}
.qring text{rotate:90deg;transform-origin:20px 20px;fill:#ffe7a3;font-size:10px;text-anchor:middle}
.q3.qready{border-color:#ffd24a;box-shadow:0 0 14px rgba(255,210,74,.35)}.q3.qready .qr1{stroke:#86efac}
.qok{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:rgba(34,197,94,.2);color:#86efac;font-size:1.3rem;font-weight:900}
#qall{min-height:56px}

/* 11. gold store: a grid of cards with a gold price ribbon */
.gsgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.gcard{position:relative;display:grid;justify-items:center;align-content:space-between;gap:6px;padding:12px 8px 0;min-height:150px;border-radius:16px;overflow:hidden;color:inherit;background:radial-gradient(90% 70% at 50% 25%,rgba(124,58,237,.3),transparent 70%),linear-gradient(180deg,#1b1530,#100b1e);border:1px solid rgba(212,175,55,.5);box-shadow:inset 0 0 14px rgba(255,214,120,.08)}
.gcard.gs-legend{background:radial-gradient(90% 70% at 50% 25%,rgba(255,177,59,.35),transparent 70%),linear-gradient(180deg,#2a1708,#120b04);border-color:#ffb13b;box-shadow:0 0 16px rgba(255,177,59,.35)}
.gcard.gs-epic{background:radial-gradient(90% 70% at 50% 25%,rgba(194,123,255,.35),transparent 70%),linear-gradient(180deg,#1f1033,#100b1e);border-color:#c27bff}
.gcard .gpic{width:72px;height:72px;display:grid;place-items:center;font-size:2.6rem}.gcard .gpic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.gcard>b{font-size:.82rem;color:#f5e6c4;text-align:center;line-height:1.15}
.gcard .gprice{align-self:stretch;margin:0 -8px;padding:7px 0;background:linear-gradient(180deg,#f5d98b,#b8860b);color:#2a1a00;font-size:1rem;text-align:center;-webkit-text-stroke:0;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.gcard .gprice .cg{color:#7c4a00}
.gcard.poor{filter:grayscale(.55) brightness(.75)}
.gcard:active{scale:.97}

/* suggestion box: done ideas tucked behind one row */
details.built{margin-top:8px;border-top:1px solid rgba(255,255,255,.12);padding-top:6px}
details.built summary{cursor:pointer;color:#86efac;font-weight:800;font-size:.85rem;list-style:none}
details.built summary::-webkit-details-marker{display:none}
details.built .idea.done{opacity:.7}
.fcost{align-items:center}.fcost span{line-height:1.2}.fcost .coins{background:none;border:0;padding:0;box-shadow:none;font-size:.9rem}.fcost .coins .xs{display:inline}
.h3f .hhero{--hw:clamp(116px,40vw,200px)}
@media (max-height:700px){.h3f .hhero{--hw:clamp(100px,32vw,150px)}}
.gcard .gprice{justify-self:stretch;width:calc(100% + 16px)}
.pcards{align-items:center}.pcard{align-content:center}
.dh .win.dhp.tall>.scroll{align-content:start}
.tree2{container-type:size}
.tree2 .node2{width:min(18cqw,13.5cqh)}
.tree2 .node2 .ni{font-size:min(6.4vw,7.2cqh,1.9rem)}
.tree2 .node2{min-height:0;min-width:0;height:auto}
.curbar{margin:-8px 0 -4px;font-size:.76rem}.curbar .cb{padding:1px 8px}.curbar .cplus{width:22px;height:22px;font-size:.9rem}
.forge3 .fup{display:grid;justify-items:center;gap:1px}.forge3 .fup small{font-size:.72rem;color:#e9d8a6;font-weight:800}
/* boss crate stage (Nov 8 fix): the crate gets its own padded area, nothing clips its shake/scale/glow, text sits in its own row */
.dh .win.dhbox{overflow:visible}
.dh .win.dhbox:has(.boxwin.open){overflow:auto;max-height:calc(100dvh - 28px - var(--safe-t,0px) - var(--safe-b,0px))}
.dh .veil:has(.win.dhbox){overflow:visible}
.boxwin.iscrate:not(.open){grid-template-rows:auto auto auto;row-gap:0}
.boxwin.iscrate:not(.open) .chest.c2.crate{width:min(56vw,210px);height:min(46vw,170px);margin:clamp(40px,8vh,70px) auto clamp(30px,5vh,46px);overflow:visible}
.boxwin.iscrate .crate2{width:100%;height:100%;overflow:visible}
.crate2 .crateart{width:100%;max-height:100%;object-fit:contain;translate:-50% -50%}
.boxwin.iscrate .cratecap{position:relative;z-index:3;display:block;margin:4px 0 2px;text-align:center}
.boxwin.iscrate.open .chest.c2.crate{width:120px;height:82px;margin:2px auto 6px}
.boxwin.iscrate.open .crate2{transform:scale(.6);transform-origin:50% 0;width:200px;height:150px;margin-left:-40px}
.boxwin.iscrate.open .chest.c2.crate{width:144px;height:104px}.boxwin.iscrate.open .crate2{transform:scale(.72);margin-left:-28px}

/* ===== target indicator (Nov 8): corner brackets + rune ring hugging the sprite, rim light, bouncing chevron; no ground ellipse ===== */
.foe.tgt::after,.foe.tgt:not([style*='--rt'])::after{display:none}
.foe .tgtfx{position:absolute;z-index:3;left:var(--tl,18%);top:var(--tt,12%);width:var(--tw,64%);height:var(--th,76%);pointer-events:none;opacity:0;transition:opacity .15s}
.foe .tgtfx b{position:absolute;width:min(30%,26px);height:min(30%,26px);border:3px solid #ffd24a;filter:drop-shadow(0 0 4px #ff5a3c) drop-shadow(0 0 2px #000)}
.foe .tgtfx .k1{left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:6px}
.foe .tgtfx .k2{right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:6px}
.foe .tgtfx .k3{left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:6px}
.foe .tgtfx .k4{right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:6px}
.foe .tgtfx .chev{position:absolute;left:50%;top:-24px;width:0;height:0;translate:-50% 0;border:9px solid transparent;border-top:12px solid #ff5a3c;filter:drop-shadow(0 0 5px #ffd24a) drop-shadow(0 1px 0 #000)}
.foe .tgtfx::before{content:'';position:absolute;inset:-6%;border-radius:50%;border:2px dashed rgba(255,210,74,.55);opacity:.0}
.foe.tgt:not(.down) .tgtfx{opacity:1;animation:tsnap .26s cubic-bezier(.2,1.6,.4,1)}
.foe.tgt:not(.down) .tgtfx b{animation:tbreath 1.4s ease-in-out infinite}
.foe.tgt:not(.down) .tgtfx .chev{animation:tbob .9s ease-in-out infinite}
.foe.tgt:not(.down) .tgtfx::before{opacity:.7;animation:trune 6s linear infinite}
.foe.tgt:not(.down){filter:drop-shadow(0 0 1.5px rgba(255,246,214,.9)) drop-shadow(0 0 8px rgba(255,90,60,.65))}
@keyframes tsnap{0%{scale:1.35;opacity:0}60%{scale:.94;opacity:1}100%{scale:1}}
@keyframes tbreath{50%{border-color:#ff8a3c;filter:drop-shadow(0 0 8px #ff5a3c) drop-shadow(0 0 2px #000)}}
@keyframes tbob{50%{translate:-50% -6px}}
@keyframes trune{to{rotate:360deg}}
/* first battles: the other enemies pulse faintly so new players learn to tap them */
.b1.tthint .foe:not(.tgt):not(.down) .tgtfx{opacity:.35;animation:thint 1.6s ease-in-out infinite}
.b1.tthint .foe:not(.tgt):not(.down) .tgtfx .chev,.b1.tthint .foe:not(.tgt) .tgtfx::before{display:none}
.b1.tthint .foe:not(.tgt):not(.down) .tgtfx b{border-color:#fff7d6}
@keyframes thint{50%{opacity:.08}}
/* the target's name and HP bar light up in the enemy list */
.frow1.tgt{position:relative;border-radius:8px;background:linear-gradient(90deg,rgba(255,90,60,.18),rgba(255,210,74,.08));box-shadow:0 0 0 1px rgba(255,210,74,.7),0 0 10px rgba(255,90,60,.35);padding:2px 6px;margin:-2px -6px}
.frow1.tgt b{color:#b91c1c}.frow1.tgt b::before{content:'🎯 ';color:inherit}
.frow1.tgt .bar{box-shadow:0 0 0 2px #ffd24a}
@media (prefers-reduced-motion:reduce){.foe.tgt .tgtfx,.foe.tgt .tgtfx b,.foe.tgt .tgtfx .chev,.foe.tgt .tgtfx::before,.b1.tthint .foe .tgtfx{animation:none!important}}

/* ---- Allies (Nov 8): mount behind the hero, mercenary and summon beside, Bulk sheet ---- */
.allypic{display:inline-grid;place-items:center;width:44px;height:44px;flex:none}.allypic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.allypic.noimg img{display:none}.allypic.noimg::after{content:'?';font-size:2rem;opacity:.5}
.pcard .allypic.big{width:min(52vw,210px);height:min(52vw,210px)}.pcard .allypic.big img{filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}.pcard .allypic.locked img{filter:grayscale(1) brightness(.45)}
#mount{position:absolute;left:-14%;bottom:-3%;width:96%;height:22%;z-index:0}.hspot #me{z-index:1}#mount .allypic{width:100%;height:100%}
#mount .allypic img{transform:scaleX(-1);animation:mountbob 3.2s ease-in-out infinite}@keyframes mountbob{50%{transform:scaleX(-1) translateY(-3%)}}
#merc{position:absolute;left:46%;bottom:18%;width:62%;height:22%;z-index:0}#merc .allypic{width:100%;height:100%}
#merc .mhp{position:absolute;left:22%;right:22%;top:-4px;height:6px;min-height:0;padding:0}#merc .mhp u{background:#60a5fa}
#merc.down{filter:grayscale(1) brightness(.5);opacity:.6}
#sumspot{position:absolute;left:44%;bottom:34%;width:34%;height:34%;z-index:1;pointer-events:none}
.sumspr{width:100%;height:100%;filter:drop-shadow(0 0 10px #a855f7)}.sumspr .allypic{width:100%;height:100%}
.sumspr.rise{animation:sumrise .6s ease-out}@keyframes sumrise{from{transform:translateY(40%) scale(.5);opacity:0;filter:drop-shadow(0 0 30px #a855f7) brightness(2)}}
.sumspr.fade{transition:opacity .6s,transform .6s;opacity:0;transform:translateY(20%) scale(.8)}
.lungeR{animation:lgr .3s}@keyframes lgr{40%{transform:translateX(14%)}}
.sumbtn{border-color:#a855f7 !important;box-shadow:inset 0 0 12px rgba(168,85,247,.35)}
.allyhub{display:grid;gap:10px;margin-top:8px}.allyhub .btn.big{min-height:64px;font-size:1.1rem}
@media (prefers-reduced-motion:reduce){#mount .allypic img,.sumspr.rise{animation:none}}
.bulkwin{display:flex;flex-direction:column}.bulkwin .sub{margin:6px 0 4px}.bulkwin .bchips{display:flex;flex-wrap:wrap;gap:5px}.bulkwin .bchip{padding:5px 9px;min-height:32px;font-size:.85rem}.bulkwin .bchip{border-color:var(--rc,#8a7a4a)}.bulkwin .bchip.on{background:color-mix(in srgb,var(--rc,#d4a843) 30%,#1a1424);box-shadow:0 0 0 2px var(--rc,#d4a843) inset}
.bulkwin .bup{display:flex;gap:8px;align-items:center;margin:8px 0;font-size:.85rem}.bulkwin .bup input{width:20px;height:20px;flex:none;margin:0}.bulkwin .bsum{text-align:center;font-size:1rem;margin:4px 0}.bulkwin .bsum small{display:block;opacity:.7;font-size:.75rem}
.bulkwin .bbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
/* v85: eleven gear slots plus the next locked one: six across */
.gear9.g12 { grid-template-columns:repeat(6, 1fr); gap:3px; }
.gear9.g12 .gslot b { font-size:9px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.gslot.locked { opacity:.55; border-style:dashed; }
.gslot.locked small { display:block !important; font-size:9px; }
.aitag { font-size:9px; padding:0 4px; border-radius:6px; background:#3b2a55; color:#cdb6ff; margin-left:4px; vertical-align:middle; }
.gtest { margin:6px 0; padding:6px; border:1px dashed #6b5a8a; border-radius:10px; }

/* v85: one more armor type (shoulders) in the bulk sheet: tighter chips so the buttons stay on screen */
.bulkwin .bchips{gap:4px}.bulkwin .bchip{padding:3px 7px;min-height:28px;font-size:.78rem}
/* stage 8: Arena 2.0, weekly shop, passes */
.arena2 .atix{display:flex;justify-content:space-between;align-items:center;margin:.3rem 0 .5rem;padding:.4rem .7rem;border:1px solid rgba(255,210,74,.35);border-radius:10px;background:rgba(0,0,0,.35);font-size:.9rem}
.arena2 .afight{display:flex;flex-direction:column;gap:.6rem;margin-top:auto}
.arena2 .btn.big{font-size:1.15rem;padding:.9rem}
.arena2 .soon{text-align:center;padding:1rem;border:1px dashed rgba(255,255,255,.2);border-radius:12px}
.vfxdot{display:inline-block;width:1.4em;height:.5em;border-radius:1em;background:linear-gradient(90deg,transparent,var(--c),#fff);box-shadow:0 0 10px var(--c)}
.weekly .wkrow{display:flex;gap:.45rem;overflow-x:auto;padding-bottom:.3rem;scroll-snap-type:x mandatory}
.weekly .wkit{flex:0 0 auto;min-width:6.2rem;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.45rem;border-radius:12px;border:1px solid rgba(255,210,74,.3);background:rgba(20,16,40,.85);color:inherit}
.weekly .wkit.lim{border-color:#c084fc;box-shadow:0 0 12px rgba(192,132,252,.35)}
.weekly .wkit.own{opacity:.55}
.weekly .wkit small{font-size:.72rem}
.passes{margin-top:.6rem}
.passrow .btn[disabled]{opacity:.6}
/* suggestion box: big clear send result + waiting chip */
.sugbig{margin:.7rem 0 .2rem;padding:.8rem .9rem;border-radius:12px;font-size:1.02rem;line-height:1.35;border:1px solid rgba(255,255,255,.18)}
.sugbig.ok{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.55)}
.sugbig.wait{background:rgba(250,204,21,.13);border-color:rgba(250,204,21,.55)}
.sugwait{display:inline-block;margin:.3rem 0;padding:.25rem .6rem;border-radius:99px;background:rgba(250,204,21,.18);border:1px solid rgba(250,204,21,.5);font-size:.82rem}

/* Nov 8: painted chests never show the old drawn chest while loading */
.chest2.artwait>:not(.chestart){visibility:hidden}
.itico{width:1.6em;height:1.6em;object-fit:contain;vertical-align:middle;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
/* Ledger of Beasts */
.btabs{flex-wrap:wrap}.bcount{margin:.2rem 0}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:8px}
.bcard{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:12px;border:1px solid rgba(255,215,120,.25);background:rgba(20,16,32,.75);color:inherit;min-width:0}
.bcard img{width:72px;height:72px;object-fit:contain}
.bcard b{font-size:.78rem;line-height:1.1;text-align:center}.bcard small{font-size:.65rem;opacity:.7;text-align:center;line-height:1.1}
.bcard.hid img{filter:brightness(0) drop-shadow(0 0 2px rgba(255,255,255,.35))}.bcard.hid{opacity:.8}
.bcard.k-boss{border-color:rgba(255,180,60,.6)}.bcard.k-dboss{border-color:rgba(255,80,80,.8);box-shadow:0 0 10px rgba(255,80,80,.3)}
.btags{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;font-style:normal}.btags em{font-style:normal;font-size:.6rem;padding:1px 5px;border-radius:8px;background:rgba(255,255,255,.08)}
.bentry{display:flex;flex-direction:column;gap:6px}.bentry>img{width:180px;height:180px;object-fit:contain;align-self:center;filter:drop-shadow(0 6px 12px rgba(0,0,0,.6))}
.bline{font-style:italic;text-align:center;opacity:.9}
/* Low power mode: quiet the decoration, step animations at ~30 fps, flatten glows */
body.lowpower .ember,body.lowpower .embers,body.lowpower .spark,body.lowpower .sparks,body.lowpower .confetti,body.lowpower .snow,body.lowpower .motes,body.lowpower .zfx,body.lowpower .rays{display:none!important}
body.lowpower *,body.lowpower *::before,body.lowpower *::after{animation-timing-function:steps(18,end)!important;text-shadow:none!important}
body.lowpower .chest2 .chestart,body.lowpower .glow,body.lowpower .aura{animation:none!important}
body.lowpower .chestart,body.lowpower .foe img,body.lowpower .hero img{filter:none!important}
body.lowpower .veil{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* v88: item type label, element and broad-bonus chips */
.ittype{display:block;font-size:.62rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#cbd5e1;opacity:.9;line-height:1.1}
.itfx{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:2px}
.itel,.itbroad{font-weight:700;font-size:.68rem;white-space:nowrap}
.itbroad{color:#ffd24a;text-shadow:0 0 6px rgba(255,210,74,.45)}
/* v88: ascended tree page and toggle */
.ascrow .lockd{opacity:.6}
.tree2.asc{background:radial-gradient(ellipse at 50% 40%,rgba(168,85,247,.18),transparent 70%);border-radius:16px}
.tree2.asc .node2.act{box-shadow:0 0 10px rgba(250,204,21,.45)}
/* v88: ultimate full-screen moment */
.ultfx{position:fixed;inset:0;z-index:9000;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,var(--u1) 0%,var(--u2) 55%,rgba(0,0,0,.92) 100%);animation:ultIn var(--ud) ease-out forwards}
.ultrays{position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.18) 0 6deg,transparent 6deg 18deg);animation:ultSpin var(--ud) linear}
.ultsym{position:relative;font-size:min(34vw,180px);filter:drop-shadow(0 0 30px var(--u1));animation:ultPop var(--ud) cubic-bezier(.2,1.4,.4,1)}
.ultname{position:relative;font-family:var(--gamefont,Cinzel,serif);font-weight:900;font-size:min(9vw,46px);color:#fff;text-shadow:0 0 18px var(--u1),0 3px 0 #000;-webkit-text-stroke:1px rgba(0,0,0,.6);text-align:center;padding:0 12px}
.ulttag{position:relative;letter-spacing:.4em;color:var(--u1);font-weight:800;margin-top:6px}
.ultfx.calm{animation:ultFade var(--ud) ease-out forwards}.ultfx.calm .ultrays{display:none}.ultfx.calm .ultsym{animation:none}
body.ultshake .battle,body.ultshake .b1{animation:ultShake .45s 2}
@keyframes ultIn{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes ultFade{0%{opacity:0}20%{opacity:.85}80%{opacity:.85}100%{opacity:0}}
@keyframes ultSpin{to{transform:rotate(60deg)}}
@keyframes ultPop{0%{transform:scale(.2);opacity:0}30%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
@keyframes ultShake{0%,100%{transform:none}25%{transform:translate(-6px,3px)}50%{transform:translate(5px,-4px)}75%{transform:translate(-3px,-2px)}}
@media (prefers-reduced-motion:reduce){.ultfx{animation:ultFade var(--ud) ease-out forwards}.ultrays{display:none}.ultsym{animation:none}}
/* v89 any screen: mouse hover states on computers; inside the big-screen frame the page never scrolls sideways */
html.mouse button:not(:disabled),html.mouse [data-tap],html.mouse .foe{cursor:pointer}
html.mouse .btn:not(:disabled):hover{filter:brightness(1.14) saturate(1.05);box-shadow:0 0 0 1px rgba(214,178,94,.55),0 4px 14px rgba(0,0,0,.35)}
html.mouse .btn:not(:disabled):active{filter:brightness(.95)}
html.mouse .foe:hover .dsp{filter:brightness(1.12)}
html.framed,html.framed body{overflow-x:hidden}
.btn:focus-visible{outline:2px solid #f6d38b;outline-offset:2px}
.skullico{width:1.25em;height:1.25em;vertical-align:-.25em;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

/* v91: three-founder voting */
#idea { position:relative; }
.ideadot { position:absolute; top:-4px; right:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#e5303c; color:#fff; font:700 10px/16px system-ui, sans-serif; text-align:center; box-shadow:0 0 0 2px rgba(10,12,20,.9); pointer-events:none; }
.ideatabs { flex-wrap:wrap; gap:4px; }
.ideatabs .btn.small { font-size:12px; padding:6px 8px; }
.idea .why { display:block; margin-top:4px; color:#ff9aa2; }
.idea.claude { border-left:3px solid #6aa8ff; }

/* v92: automatic x2 for pass holders, shown on the loot screen */

/* v92: the mount stands fully in view under the hero (the hero rides above it); nothing hides it behind the message bar */
.b1 .hspot.hasmount #me{top:-6%;bottom:24%}
.b1 .hspot.hasmount #mount{left:-4%;bottom:0;width:84%;height:40%;z-index:0}
.b1 .hspot.hasmount #pet{left:56%;width:52%;height:30%;bottom:0}
.b1 .hspot.hasmount #pet.pet-owl,.b1 .hspot.hasmount #pet.pet-hawk{bottom:46%}

/* v92: no rotating rune ring, only the gold corner brackets */
.foe .tgtfx::before,.foe.tgt:not(.down) .tgtfx::before{display:none!important;animation:none!important}

/* v93: v92's skills overlay reverted (founders: keep the original attack/skills layout) */
/* v92: tell every browser this page is already dark, so Samsung Internet / Edge / Safari don't auto-recolour or brighten it */
:root,html,body{color-scheme:dark}
html{forced-color-adjust:none}
/* wide-gamut (P3) screens (iPhones, many Samsungs) show our saturated glows hotter than Chrome on sRGB: tone the big colour fields down a touch */
@media (color-gamut:p3){
  .zbg{-webkit-filter:hue-rotate(var(--zh)) brightness(var(--zb)) saturate(calc(var(--zs) * .88));filter:hue-rotate(var(--zh)) brightness(var(--zb)) saturate(calc(var(--zs) * .88))}
  .vfx,.flash,.critring{opacity:.9}
}

/* v92: boss smack talk, a line of battle text just above the message bar (no bubble, no layout change) */
.b1 .smack{position:absolute;z-index:7;box-sizing:border-box;padding:6px 12px;border-radius:10px;background:rgba(40,8,8,.88);border:1px solid #ff5a3c;color:#ffe9d6;font-weight:600;font-size:14px;line-height:1.3;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;box-shadow:0 6px 16px rgba(0,0,0,.45)}
.b1 .smack b{color:#ff9a6b}
.b1 .smack.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.b1 .smack{transition:none;transform:none}}

/* v92: guild member characters and profile card */
.gmrow{cursor:pointer;gap:10px}
.gav{position:relative;flex:0 0 44px;width:44px;height:52px;display:grid;place-items:end center;overflow:visible}
.gav .av{width:44px;height:52px}.gav0{font-size:26px;place-items:center}
.gav .gbm,.gav .gbp{position:absolute;bottom:-2px;font-style:normal;font-size:13px;filter:drop-shadow(0 1px 1px #000)}.gav .gbm{left:-4px}.gav .gbp{right:-4px}
.gprof{display:flex;gap:14px;align-items:center;margin:4px 0 10px}.gpav{width:96px;height:112px;flex:0 0 96px}.gpav .av{width:96px;height:112px}
.gprof small{display:block;color:#9db0c8}.gplv{font-size:18px}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pst{background:rgba(255,255,255,.05);border-radius:8px;padding:6px 8px}.pst small{display:block;color:#9db0c8;font-size:11px}
.pgear{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pg{border:1px solid;border-radius:8px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.pg .itico{width:34px;height:34px}.pg small{font-size:10.5px;line-height:1.2}
.pmore{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:8px;font-size:12.5px;color:#cbd5e1}
/* v93 Spark Tap monsters: they rush the orb with crazy faces; a tap blows up the nearest one */
.sarena .smobs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sarena .smob{position:absolute;left:0;top:0;will-change:transform}
.sarena .smob img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)) saturate(1.2);animation:smobsq .32s ease-in-out infinite alternate;transform-origin:50% 90%}
.sarena .smob.left img{scale:-1 1}
.sarena .smob.fly img{animation-duration:.22s}
@keyframes smobsq{0%{transform:scale(1.08,.9) rotate(-7deg)}100%{transform:scale(.92,1.1) rotate(7deg)}}
.sarena .smob .seyes{position:absolute;left:30%;right:30%;top:24%;display:flex;justify-content:space-between;pointer-events:none}
.sarena .smob .seye{position:relative;width:34%;aspect-ratio:1;border-radius:50%;background:#fff;border:2px solid #111;box-shadow:0 0 6px rgba(255,255,255,.6)}
.sarena .smob .seye::after{content:'';position:absolute;left:30%;top:30%;width:42%;height:42%;border-radius:50%;background:#111;animation:seyejit .18s steps(2) infinite}
.sarena .smob .seye::before{content:'';position:absolute;left:-15%;right:-15%;top:-38%;height:22%;background:#1a0b0b;border-radius:2px;transform:rotate(18deg)}
.sarena .smob .seye+.seye::before{transform:rotate(-18deg)}
@keyframes seyejit{0%{transform:translate(-12%,8%)}100%{transform:translate(14%,-6%)}}
.sarena .smob .sline{position:absolute;left:50%;top:50%;width:120%;height:46%;margin:-23% 0 0 -60%;transform:rotate(var(--ang)) translateX(-62%);background:repeating-linear-gradient(180deg,transparent 0 7px,rgba(255,255,255,.45) 7px 9px);-webkit-mask:linear-gradient(90deg,transparent,#000 70%);mask:linear-gradient(90deg,transparent,#000 70%);opacity:.7}
.sarena .smob.bonk img{animation:smobbonk .35s ease-out}
@keyframes smobbonk{0%{transform:scale(1.3,.7)}60%{transform:scale(.85,1.2) rotate(-14deg)}100%{transform:scale(1)}}
.sarena .smob.boom{transition:opacity .3s,filter .3s;opacity:0;filter:brightness(3)}
.sarena .smob.boom img{animation:smobpop .3s ease-out forwards}
@keyframes smobpop{0%{transform:scale(1)}100%{transform:scale(1.6) rotate(25deg)}}
.sarena .sboom{position:absolute;transform:translate(-50%,-50%) scale(.2);border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff 0,#ffd24a 30%,rgba(244,63,94,.7) 55%,transparent 70%);animation:sboom .45s ease-out forwards}
@keyframes sboom{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.sarena .scoin{position:absolute;margin:-11px;font-size:22px;line-height:1;pointer-events:none;transition:transform .5s cubic-bezier(.5,0,.7,1),opacity .5s;text-shadow:0 0 10px #ffd24a}
body.lowpower .sarena .smob img,body.lowpower .sarena .smob .seye::after{animation:none}
body.lowpower .sarena .smob .sline{display:none}
@media (prefers-reduced-motion:reduce){.sarena .smob img,.sarena .smob .seye::after{animation:none}.sarena .smob .sline{display:none}}
/* v93 brightness: the game dims or lifts, menus stay as they are */
/* v94: brightness is a see-through overlay, never a filter on the whole screen (a full-screen filter over animated, filtered sprites made phone GPUs drop layers, so some enemies vanished). Contrast only touches the backgrounds. */
#dimveil{position:fixed;inset:0;pointer-events:none;z-index:2147483000;background:#000;opacity:0;display:none}
body.dimmed #dimveil{display:block;opacity:var(--dimo,0)}
body.dimmed.brighter #dimveil{background:#fff;mix-blend-mode:soft-light}
body.dimmed.contrasted #bg,body.dimmed.contrasted .zbg{filter:contrast(var(--con,1))}
.brirow input{width:100%}
.brisample{display:block;height:18px;margin-top:6px;border-radius:6px;background:linear-gradient(90deg,#0b1020,#1e3a8a 30%,#ffd24a 60%,#f43f5e 80%,#fff)}

/* v93: pass ×2 is a flourish, not a button: a gold ×2 pops over the rewards with a burst, then fades; coins show doubled */
.thumbbar{position:relative}
.x2fx{position:absolute;left:50%;bottom:calc(100% + 12px);width:0;height:0;pointer-events:none;z-index:3}
.x2fx b{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:900 44px/1 Cinzel,Georgia,serif;color:#ffd24a;text-shadow:0 0 14px #ffb13b,0 3px 0 #7a4b00;animation:x2pop 1.6s ease-out forwards}
.x2fx i{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px;border-radius:50%;background:#ffd24a;box-shadow:0 0 10px #ffd24a;opacity:0;animation:x2spark .8s ease-out .1s forwards}
.x2fx i:nth-child(2){--dx:-70px;--dy:-30px}.x2fx i:nth-child(3){--dx:70px;--dy:-34px}.x2fx i:nth-child(4){--dx:-50px;--dy:40px}.x2fx i:nth-child(5){--dx:55px;--dy:38px}.x2fx i:nth-child(6){--dx:0;--dy:-60px}.x2fx i:nth-child(7){--dx:-8px;--dy:58px}
@keyframes x2pop{0%{transform:translate(-50%,-50%) scale(.2) rotate(-12deg);opacity:0}20%{transform:translate(-50%,-50%) scale(1.25) rotate(4deg);opacity:1}55%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-90%) scale(.9);opacity:0}}
@keyframes x2spark{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
.coinsrow .x2tag{margin-left:6px;font-style:normal;font-weight:900;color:#ffd24a;text-shadow:0 0 8px #ffb13b;animation:x2tag 1.8s ease-out forwards}
@keyframes x2tag{0%,60%{opacity:1}100%{opacity:.35}}
.coinsrow.x2on b{animation:x2count .6s ease-out}
@keyframes x2count{0%{transform:scale(.9)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
body.lowpower .x2fx i,body.lowpower .x2fx b{animation-duration:.01s}
@media (prefers-reduced-motion:reduce){.x2fx i{display:none}.x2fx b{animation:x2fade 1.6s forwards}@keyframes x2fade{0%,60%{opacity:1}100%{opacity:0}}}
/* v93: the Taunt button shows your own hero, steaming */
.tface{position:relative;display:inline-block;width:30px;height:30px;vertical-align:middle;margin-right:4px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,210,74,.5)}
.tface .tav{position:absolute;left:50%;top:-6%;width:300%;height:300%;transform:translateX(-50%);pointer-events:none}
.tface .tav>*{width:100%!important;height:100%!important}
.tsteam{position:absolute;top:52%;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.85);opacity:0;animation:tsteam 1.4s ease-out infinite;pointer-events:none}
.tsteam.l{left:22%;--sx:-9px}.tsteam.r{right:22%;--sx:9px;animation-delay:.7s}
.tfwrap{position:relative;display:inline-block}
@keyframes tsteam{0%{opacity:.9;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(var(--sx),6px) scale(1.6)}}
body.lowpower .tsteam{animation:none;opacity:.6}
@media (prefers-reduced-motion:reduce){.tsteam{animation:none;opacity:.6}}
.fcheck .fcrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fcheck .fcrow small{display:block;opacity:.7}.fcbtns{display:flex;gap:6px;flex:0 0 auto}.fcbtns em{font-style:normal;font-weight:700;opacity:.85}
.inlnews small{display:block;opacity:.85;margin-top:2px}
.toast.inline .inl{opacity:.75}

/* v94: an enemy that is alive is always drawn (safety net for stuck classes or images that failed to load) */
.foe.vfix{visibility:visible!important;opacity:1!important}.foe.vfix .dsp{opacity:1!important;visibility:visible!important}
/* v95 invites */
.invquest { background:rgba(255,200,90,.08); border:1px solid rgba(255,200,90,.35); border-radius:10px; padding:10px 12px; margin:8px 0; }
.invquest small { display:block; opacity:.85; margin:2px 0 6px; }
.invcode { font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:1px; }
/* v95: Taunt face shows the whole head and shoulders (was zoomed 300% and cut off) */
.tface{width:34px;height:34px;border-radius:10px}
.tface .tav{left:50%;top:2%;width:165%;height:165%;transform:translateX(-50%)}
.tsteam{top:40%;width:6px;height:6px}
/* v95: Skills fit one screen. The chosen skill's details and the Learn button sit in a bar pinned to the bottom of the
   window (thumb zone), so you never scroll to learn; the tree shrinks to leave room for it */
.skillwin .tree2{max-height:min(46vh,calc(100dvh - 380px));min-height:200px}
.skillwin .ndesc{position:sticky;bottom:-16px;z-index:6;margin:6px -16px -16px;padding:8px 16px calc(12px + env(safe-area-inset-bottom));min-height:0;
  background:linear-gradient(180deg,rgba(18,12,20,.9),rgba(14,9,16,.98));border-top:1px solid rgba(255,210,74,.45);box-shadow:0 -8px 18px rgba(0,0,0,.45)}
.skillwin .ndesc .btn{min-height:44px}
/* v95: target brackets belong to the battle field only: never above pop-ups, the skills/items lists or the loot screen */
body:has(#modal .veil) .foe .tgtfx,.b1:has(#cmds.sk) .foe .tgtfx,.b1:has(#iback) .foe .tgtfx,.b1:has(.loot1,.hallloot,.lootbox) .foe .tgtfx{display:none!important}
.foe .tgtfx{z-index:2}
/* v96: loot and chest screens are a solid layer (iPhone Safari showed the battle HUD through the see-through cards and veil) */
body:has(#modal .veil) .b1 .hbox,body:has(#modal .veil) .b1 .hspot,body:has(#modal .veil) .b1 #msg,body:has(#modal .veil) .b1 .msg,body:has(#modal .veil) .b1 #cmds{visibility:hidden}
.dh .veil:has(.win.dhbox),.dh .veil:has(.boxwin),.dh .veil:has(.lootlist),.dh .veil:has(.loot1){background:rgba(6,4,14,.94)}
.win.dhbox .loot,.win .lootrow,.win.dhbox .loot.r-common,.win.dhbox .loot[class*='r-']{background-color:#141225!important;opacity:1}
/* v96: the chest/crate sits in the middle of the field, the Open button stays down in the thumb zone */
.win.dhbox .boxwin{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100dvh - 190px)}
/* v96: regular chests: tap anywhere to open, small pulsing hint over the chest */
.veil.tapopen{cursor:pointer}
.win.dhbox .taphint{order:-1;margin-bottom:6px;padding:4px 12px;border-radius:999px;background:rgba(20,16,36,.85);border:1px solid #b8893a;color:#ffe9b0;font-size:.8rem;letter-spacing:.04em;pointer-events:none;animation:tapHint 1.2s ease-in-out infinite;white-space:nowrap;z-index:3}
@keyframes tapHint{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.win.dhbox .taphint{animation:none;opacity:.9}}
/* v96 (Dragon's iPhone shot): the loot sheet is fully solid; the enemy panel goes too, not just the hero HUD and message bar */
body:has(#modal .veil .dhbox) .b1 #fbox,body:has(#modal .veil .dhbox) .b1 .foes,body:has(#modal .veil .dhbox) .b1 .fbox{visibility:hidden}
.dh .veil:has(.win.dhbox),.dh .veil:has(.boxwin){background:radial-gradient(120% 70% at 50% 35%,#1d1633,#08060f 70%)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* v96 guild polish (Dragon's iPhone shot): every member always listed (the inner scroller collapsed to 0 on a full panel),
   header fully visible, small inline ⓘ, one muted note line, tighter gaps, builder tools folded away */
.dh .win.dhp.tall>.scroll.gmem,.gwin .scroll.gmem{flex:none!important;max-height:none!important;overflow:visible;min-height:auto;gap:5px;margin-top:4px}
.gwin .gmrow{padding:6px 10px;min-height:0}
.gwin .ghead{gap:10px;margin:6px 0 4px;min-width:0;padding-top:2px}.gwin .gemb{font-size:1.9rem;line-height:1;flex:none}
.gwin .ghead>div{min-width:0}.gwin .ghead b{display:block;font-size:1.1rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gwin .gperk{margin:6px 0 0;font-size:.86rem;line-height:1.35}.gwin .gperk small{display:block;color:var(--dim)}
.gwin .ginfo{display:inline-grid;place-items:center;width:22px;height:22px;min-height:0;margin:0 0 0 6px;padding:0;border-radius:50%;border:1px solid #b8893a;background:rgba(255,210,74,.12);color:#ffd24a;font-size:.72rem;line-height:1;vertical-align:middle;cursor:pointer}
.gwin .gnote{display:block;margin:2px 0 4px;font-size:.74rem;color:var(--dim)}
.gwin h3.sub{margin:10px 0 2px}.gwin .itabs{margin:4px 0}
.gwin .gtest{margin:8px 0;padding:4px 8px;border:1px dashed #6b5a8a;border-radius:10px;font-size:.8rem}
.gwin .gtest summary{cursor:pointer;color:var(--dim);padding:4px 0;list-style-position:inside}
.gwin .gtrow{display:flex;gap:6px;flex-wrap:wrap;padding:4px 0 2px}.gwin .gtrow .btn{flex:1 1 auto;width:auto;min-height:36px;padding:4px 8px;font-size:.78rem}
.gwin .gmrow{margin:0}.gwin .gav,.gwin .gav0{flex:none}
/* v96 Ideas: a full-height sheet, compact header, no money bar, one row of pill tabs with count badges, the list fills the rest */
.dh .win.dhp.tall.ideawin{height:calc(100dvh - 24px - var(--safe-t,0px) - var(--safe-b,0px));min-height:0;gap:8px}
.ideawin .ph{margin-bottom:0}.ideawin .ph h2{font-size:1.05rem}.ideawin .ph .x{width:34px;height:34px;min-height:0;font-size:.9rem}
.ideatabs2{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:2px 1px 4px;margin:0 -2px;-webkit-overflow-scrolling:touch}
.ideatabs2::-webkit-scrollbar{display:none}
.ideatabs2 .itab{flex:none;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(212,175,55,.35);background:rgba(255,255,255,.05);color:#e8e3f5!important;font:600 .8rem/1 system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.ideatabs2 .itab.on{background:linear-gradient(180deg,#4b2a86,#2e1a57);border-color:#d4af37;color:#ffe9b0;box-shadow:0 0 10px rgba(212,175,55,.25)}
.ideatabs2 .itab b{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:rgba(255,255,255,.15);font-size:.7rem;line-height:18px;text-align:center}
.ideatabs2 .itab b.hot{background:#e5303c;color:#fff}
/* Nov 9: 💼 Business (Trihunters only) */
.sugbiz{display:flex;align-items:center;gap:8px;margin:2px 0 8px;font-size:.82rem;color:#e8e3f5}.sugbiz input{width:18px;height:18px;accent-color:#d4af37}
.bizhint{margin:2px 2px 6px}
.ideawin .scroll.ideas{max-height:none;margin-top:0}
.ideaempty{display:grid;justify-items:center;gap:8px;padding:48px 16px;text-align:center;color:var(--dim)}
.ideaempty span{font-size:3rem;line-height:1}.ideaempty p{margin:0;font-size:.95rem}.ideaempty .btn{width:auto;padding:10px 22px}
/* v96 (Dragon: "jumpy"): main panels are full-height sheets with a fixed size, so loading, toggles and list changes never
   move or resize them; a redraw of the same panel doesn't replay the opening animation */
.dh .win.dhp.tall{height:calc(100dvh - 24px - var(--safe-t,0px) - var(--safe-b,0px));min-height:0}
.dh .win.dhp.again,.dh .win.again{animation:none!important}
.dh .win.dhp.skillwin{height:calc(100dvh - 24px - var(--safe-t,0px) - var(--safe-b,0px));max-height:none;display:flex;flex-direction:column}
.dh .win.dhp.skillwin>*{flex:none}.dh .win.dhp.skillwin>.ndesc{margin-top:auto}
.optwin>.scroll{max-height:none}
/* Options: labels always show on its buttons, even with Icons only on */
body.compact .win .hrow>.btn .dhlb,body.compact .win .hrow>.btn>small{display:inline!important}
body.compact .win .hrow>.btn[data-lz]{font-size:inherit;min-height:44px;padding:8px 10px}
.optrow.inlnews small.dim{display:block;margin-bottom:2px}
.ideatabs2.skel{height:40px}.ideaskel{height:92px;margin:6px 0;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));background-size:200% 100%;animation:skel 1.2s linear infinite}
@keyframes skel{to{background-position:-200% 0}}


/* v97 (Drayke: "these buttons don't look good"): one battle action bar. Every button is the same framed plate: dark
   carved metal, thin gold rim, a top bevel highlight, a soft inner glow; a round medallion icon on the left and a label
   that always shows (Icons only mode included), a small caption under it and an MP badge on Skills. The bar is a fixed
   height so the field above never moves. Accent colour is only a thin glow along the bottom edge and the medallion ring. */
.b1 #cmds{--cmdh:56px;align-items:stretch;background:none;border:0;border-radius:0;padding:0;min-height:0;box-shadow:none}
@media (max-width:370px),(max-height:700px){.b1 #cmds{--cmdh:52px}}
.b1 #cmds .btn.cmd{--acc:255,190,90;position:relative;isolation:isolate;border-radius:12px;border:1px solid #b88a3c;color:#f6e7c6;font-weight:800;
  background:
    radial-gradient(120% 90% at 50% -30%,rgba(255,226,170,.16),transparent 60%),
    radial-gradient(90% 60% at 50% 115%,rgba(var(--acc),.16),transparent 70%),
    repeating-linear-gradient(120deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,#2e2230 0%,#1e1520 55%,#140d16 100%);
  box-shadow:inset 0 1px 0 rgba(255,236,196,.32),inset 0 0 0 1px rgba(0,0,0,.55),inset 0 -2px 0 rgba(var(--acc),.55),inset 0 -10px 14px -8px rgba(var(--acc),.35),
    0 2px 0 #0a060b,0 5px 12px rgba(0,0,0,.45);
  text-shadow:0 1px 0 #000;transition:transform .08s ease-out,filter .12s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.b1 #cmds .btn.cmd::before{content:'';position:absolute;inset:2px;border-radius:10px;border:1px solid rgba(255,214,150,.10);pointer-events:none}
.b1 #cmds .btn.cmd small{color:#cdbb98;font-weight:700}
.b1 #cmds .btn.cmd small .est,.b1 #cmds .btn.cmd .est{color:#ffd27a}
/* the main bar and the potion bar: icon left, label + caption right, fixed height */
.b1 #cmds .btn.cmd2{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:6px;height:var(--cmdh);min-height:var(--cmdh);padding:0 6px;text-align:left;line-height:1.1}
.b1 #cmds .cmd2 .cic{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 50% 38%,#3a2a3a,#120a12 72%);box-shadow:0 0 0 1px #c9a24d,0 0 0 2px rgba(0,0,0,.6),0 0 8px rgba(var(--acc),.45),inset 0 1px 2px rgba(255,236,196,.25)}
.b1 #cmds .cmd2 .cic>svg{width:25px;height:25px;overflow:visible;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))}
.b1 #cmds .cmd2 .ctx{display:flex;flex-direction:column;min-width:0;gap:3px}
.b1 #cmds .cmd2 .cl{font-family:GameFont,Georgia,serif;font-weight:900;font-size:.9rem;letter-spacing:0;color:#fbecc8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b1 #cmds .cmd2 .cs{display:block;margin:0;padding:0;background:none;border:0;font-size:.68rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #000}
.b1 #cmds .cmd2 .pdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 3px 1px 0;vertical-align:middle;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.b1 #cmds .cmd2 .pdot+*,.b1 #cmds .cmd2 .pdot.mp{margin-left:6px}
.b1 #cmds .cmd2 .pdot.hp{background:radial-gradient(circle at 35% 30%,#ffb0b0,#d42a3a 60%,#7a0f1a)}
.b1 #cmds .cmd2 .pdot.mp{background:radial-gradient(circle at 35% 30%,#bfe2ff,#3b82f6 60%,#1e3a8a)}
.b1 #cmds .cmd2 .mpc{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);z-index:3;white-space:nowrap;display:inline-flex;align-items:baseline;gap:1px;padding:1px 5px;border-radius:999px;font-style:normal;font-size:.56rem;font-weight:900;line-height:1.25;
  color:#e6f2ff;background:linear-gradient(180deg,#2c5fd6,#173a8c);box-shadow:0 0 0 1px rgba(150,200,255,.55),0 1px 2px rgba(0,0,0,.6);text-shadow:none}
.b1 #cmds .cmd2 .mpc em{font-style:normal;font-size:.5rem;opacity:.85;margin-left:1px}
.b1 #cmds .cmd2 .mpc.low{background:linear-gradient(180deg,#7a2430,#4a121b);box-shadow:0 0 0 1px rgba(255,140,140,.55)}
/* accents (thin edge glow + medallion ring only) */
.b1 #cmds .ac-attack,.b1 #cmds .ac-taunt{--acc:255,120,50}
.b1 #cmds .ac-skills{--acc:176,110,255}
.b1 #cmds .ac-items{--acc:90,220,130}
.b1 #cmds .ac-hp{--acc:255,80,90}
.b1 #cmds .ac-mp{--acc:90,160,255}
.b1 #cmds .ac-back{--acc:230,190,110}
/* Taunt: the player's own face fills a small round frame, with steam puffs from it */
.b1 #cmds .cmd2 .cic .tfwrap{position:absolute;inset:0;display:block}
.b1 #cmds .cmd2 .cic .tface{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#4a3040,#160c14 75%);box-shadow:none}
.b1 #cmds .cmd2 .cic .tface .tav{position:absolute;left:50%;top:-4%;width:150%;height:150%;transform:translateX(-46%)}
.b1 #cmds .cmd2 .cic .tsteam{top:-3px;width:6px;height:6px;z-index:2}
.b1 #cmds .cmd2 .cic .tsteam.l{left:1px}.b1 #cmds .cmd2 .cic .tsteam.r{right:1px;left:auto}
/* pressed: sinks and flashes */
.b1 #cmds .btn.cmd:active:not(:disabled){transform:translateY(2px);filter:brightness(1.3);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.55),inset 0 -2px 0 rgba(var(--acc),.8),0 0 0 1px rgba(255,217,138,.55),0 0 14px rgba(var(--acc),.5)}
@media (hover:hover){.b1 #cmds .btn.cmd:hover:not(:disabled){filter:brightness(1.1)}}
/* recommended: a gentle gold pulse on the rim */
.b1 #cmds .btn.cmd.pulse{border-color:#f3cf7a;animation:cmdGlow 2.2s ease-in-out infinite}
@keyframes cmdGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,236,196,.4),inset 0 0 0 1px rgba(0,0,0,.55),inset 0 -2px 0 rgba(var(--acc),.6),0 2px 0 #0a060b,0 0 0 1px rgba(243,207,122,.25),0 0 6px rgba(255,190,90,.25)}
  50%{box-shadow:inset 0 1px 0 rgba(255,236,196,.5),inset 0 0 0 1px rgba(0,0,0,.55),inset 0 -2px 0 rgba(var(--acc),.8),0 2px 0 #0a060b,0 0 0 1px rgba(243,207,122,.6),0 0 16px rgba(255,190,90,.55)}}
/* disabled: desaturated and dim, still readable */
.b1 #cmds .btn.cmd:disabled{filter:grayscale(.85) brightness(.68);border-color:#5a4a3a;animation:none;cursor:not-allowed}
body.lowpower .b1 #cmds .btn.cmd{transition:none}
body.lowpower .b1 #cmds .btn.cmd.pulse{animation:none;box-shadow:inset 0 1px 0 rgba(255,236,196,.45),inset 0 0 0 1px rgba(0,0,0,.55),inset 0 -2px 0 rgba(var(--acc),.7),0 2px 0 #0a060b,0 0 0 1px rgba(243,207,122,.55),0 0 10px rgba(255,190,90,.4)}
@media (prefers-reduced-motion:reduce){.b1 #cmds .btn.cmd.pulse{animation:none}}
.b1 #cmds .cmd2 .cl.long{font-size:.74rem}
@media (max-width:370px){.b1 #cmds .btn.cmd2{column-gap:5px;padding:0 5px}.b1 #cmds .cmd2 .cic{width:28px;height:28px}.b1 #cmds .cmd2 .cic>svg{width:22px;height:22px}
  .b1 #cmds .cmd2 .cl{font-size:.84rem}.b1 #cmds .cmd2 .cl.long{font-size:.7rem}.b1 #cmds .cmd2 .cs{font-size:.62rem}}
/* a skill's own emoji in the same medallion, same size as the drawn icons */
.b1 #cmds .cmd2 .cemo{font-size:18px;line-height:1;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))}
@media (max-width:370px){.b1 #cmds .cmd2 .cemo{font-size:16px}}
/* the main label never ellipses: it may only shrink */
.b1 #cmds .cmd2 .cl{text-overflow:clip}
.b1 #cmds .cmd2 .cl.xlong,.b1 #cmds.sk .cmd2 .cl.xlong{white-space:normal;font-size:.74rem;line-height:1.02;overflow-wrap:anywhere}

/* v97 founders' layout test (dh/layouts.js). Hard limit from Driz: the whole command area stays within ~90px on a 390x844
   phone, every tap target at least 44px. The style.css .sk rule (navy panel + blue edge) never reaches the battle bar. */
.b1 #cmds.sk{background:none!important;border:0!important;border-radius:0;padding:0;max-height:none;overflow:visible}
.b1 #cmds{max-height:92px}
.b1 #cmds .cl.long{font-size:.78rem}
/* shared small plate (skills lists) */
.b1 #cmds .lyscroll{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:44px;gap:4px 6px;max-height:92px;overflow-y:auto;overscroll-behavior:contain;padding-bottom:2px}
.b1 #cmds .cmd2.small{height:44px;min-height:44px;border-radius:10px}
.b1 #cmds .cmd2.small .cic{width:28px;height:28px}.b1 #cmds .cmd2.small .cic>svg{width:21px;height:21px}.b1 #cmds .cmd2.small .cemo{font-size:15px}
.b1 #cmds .cmd2.small .ctx{gap:1px}.b1 #cmds .cmd2.small .cs{font-size:.62rem}
.b1 #cmds .cmd2.small .mpc{bottom:-5px}
/* B: thumb arc. A big round Attack bottom-right, the rest as round buttons fanned up toward it */
.b1 #cmds.ly-B.m-main{display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;height:88px;padding-right:2px}
.b1 #cmds.ly-B .arc{display:flex;align-items:flex-end;gap:4px}
.b1 #cmds .cmd2.v-round,.b1 #cmds .cmd2.v-big{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;height:auto;min-height:44px;padding:0;background:none;border:0;box-shadow:none;text-align:center}
.b1 #cmds .cmd2.v-round::before,.b1 #cmds .cmd2.v-big::before{display:none}
.b1 #cmds .cmd2.v-round{width:70px}
.b1 #cmds .cmd2.v-round .cic{width:42px;height:42px;background:radial-gradient(circle at 50% 35%,#3a2a3a,#140c16 75%)}
.b1 #cmds .cmd2.v-round .cic>svg{width:28px;height:28px}.b1 #cmds .cmd2.v-round .cemo{font-size:20px}
.b1 #cmds .cmd2.v-round .ctx,.b1 #cmds .cmd2.v-big .ctx{align-items:center;gap:0}
.b1 #cmds .cmd2.v-round .cl{font-size:.74rem}.b1 #cmds .cmd2.v-round .cs{font-size:.58rem}
.b1 #cmds .arc.n3 .a1{margin-bottom:10px}.b1 #cmds .arc.n3 .a2{margin-bottom:18px}.b1 #cmds .arc.n2 .a1{margin-bottom:12px}
.b1 #cmds .cmd2.v-big{width:88px}
.b1 #cmds .cmd2.v-big .cic{width:62px;height:62px;box-shadow:0 0 0 2px #e0b85a,0 0 0 3px rgba(0,0,0,.6),0 0 16px rgba(var(--acc),.55),inset 0 2px 3px rgba(255,236,196,.3)}
.b1 #cmds .cmd2.v-big .cic>svg{width:40px;height:40px}
.b1 #cmds .cmd2.v-big .cl{font-size:.82rem}.b1 #cmds .cmd2.v-big .cs{font-size:.6rem}
.b1 #cmds .cmd2.v-round.pulse,.b1 #cmds .cmd2.v-big.pulse{animation:none}
.b1 #cmds .cmd2.v-round.pulse .cic,.b1 #cmds .cmd2.v-big.pulse .cic{animation:cicGlow 2.2s ease-in-out infinite}
@keyframes cicGlow{0%,100%{filter:none}50%{filter:brightness(1.25) drop-shadow(0 0 6px rgba(255,200,100,.8))}}
body.lowpower .b1 #cmds .cmd2.pulse .cic{animation:none;filter:drop-shadow(0 0 5px rgba(255,200,100,.7))}
.b1 #cmds .cmd2.v-round:active:not(:disabled),.b1 #cmds .cmd2.v-big:active:not(:disabled){box-shadow:none;transform:translateY(2px) scale(.96)}
.b1 #cmds .cmd2.v-round .mpc{bottom:-4px}
/* C: skill strip. Attack and Items fixed, every skill in a sideways scrolling row (no Skills menu) */
.b1 #cmds.ly-C.m-main{display:grid;grid-template-columns:66px minmax(0,1fr) 66px;gap:6px;height:var(--cmdh)}
.b1 #cmds .cmd2.v-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px;height:var(--cmdh);text-align:center}
.b1 #cmds .cmd2.v-tile .cic{width:28px;height:28px}.b1 #cmds .cmd2.v-tile .cic>svg{width:21px;height:21px}
.b1 #cmds .cmd2.v-tile .ctx{align-items:center;gap:0}.b1 #cmds .cmd2.v-tile .cl{font-size:.72rem}.b1 #cmds .cmd2.v-tile .cs{font-size:.56rem}
.b1 #cmds .strip{display:flex;gap:6px;overflow-x:auto;overscroll-behavior:contain;scroll-snap-type:x proximity;padding:0 1px;align-items:stretch;-webkit-mask:linear-gradient(90deg,#000 92%,transparent);mask:linear-gradient(90deg,#000 92%,transparent)}
.b1 #cmds .strip::-webkit-scrollbar{display:none}
.b1 #cmds .cmd2.v-chip{flex:0 0 auto;width:124px;scroll-snap-align:start;height:var(--cmdh)}
.b1 #cmds .cmd2.v-chip .cl.long{font-size:.74rem}
/* D: 2x2 grid, label under the icon, a slim Back bar */
.b1 #cmds.ly-D{display:flex;flex-direction:column;gap:2px}
.b1 #cmds .g2{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:44px;gap:2px 6px;max-height:90px;overflow-y:auto;overscroll-behavior:contain}
.b1 #cmds.ly-D.m-skills .g2,.b1 #cmds.ly-D.m-items .g2{max-height:58px}
.b1 #cmds .g2.odd>:last-child{grid-column:1/-1}
.b1 #cmds .cmd2.v-tile2{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:22px auto;justify-items:center;align-content:center;row-gap:1px;height:44px;min-height:44px;padding:1px 4px;text-align:center}
.b1 #cmds .cmd2.v-tile2 .cic{width:22px;height:22px}.b1 #cmds .cmd2.v-tile2 .cic>svg{width:17px;height:17px}.b1 #cmds .cmd2.v-tile2 .cemo{font-size:13px}
.b1 #cmds .cmd2.v-tile2 .ctx{flex-direction:row;align-items:baseline;gap:5px;justify-content:center;max-width:100%}
.b1 #cmds .cmd2.v-tile2 .cl{font-size:.74rem}.b1 #cmds .cmd2.v-tile2 .cs{font-size:.6rem}
.b1 #cmds .cmd2.v-tile2 .mpc{bottom:auto;top:1px;left:calc(100% + 3px);transform:none}
.b1 #cmds .cmd2.v-slim{display:flex;justify-content:center;align-items:center;gap:6px;height:30px;min-height:30px;padding:0 10px;border-radius:999px}
.b1 #cmds .cmd2.v-slim::after{content:'';position:absolute;inset:-7px 0}
.b1 #cmds .cmd2.v-slim .cic{width:20px;height:20px}.b1 #cmds .cmd2.v-slim .cic>svg{width:15px;height:15px}
.b1 #cmds .cmd2.v-slim .ctx{flex-direction:row;gap:6px;align-items:baseline}.b1 #cmds .cmd2.v-slim .cl{font-size:.78rem}.b1 #cmds .cmd2.v-slim .cs{display:none}
/* founders' layout tag + after-fight vote */
.b1 .lytag{position:absolute;right:14px;z-index:6;padding:0 6px;line-height:15px;border-radius:999px;background:rgba(10,6,14,.72);border:1px solid rgba(212,175,55,.45);color:#e9d9b4;font-size:10px;font-weight:700;pointer-events:none}
#lyvote{white-space:nowrap;position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);z-index:100000;display:flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;border-radius:999px;
  background:rgba(16,10,22,.96);border:1px solid #c9a24d;color:#f6e7c6;font-size:13px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.55);transition:opacity .25s}
#lyvote .btn.small{min-height:44px;min-width:44px;padding:0 8px;font-size:18px}#lyvote .btn.x{font-size:14px;opacity:.8}
#lyvote.out{opacity:0}
.lyopt .lypins{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0}.lyopt .lypins .btn{min-height:40px;min-width:44px}.lyopt .lypins .btn.on{border-color:#ffd27a;background:rgba(255,200,90,.18)}
.lyopt .lytally small{display:block}
/* v97: banner band (relic procs and the like): small, under the enemy cards, gone in under 2 s */
.b1 .bband{position:absolute;left:50%;transform:translateX(-50%);z-index:8;max-width:86%;padding:3px 12px;border-radius:999px;background:rgba(14,8,20,.9);border:1px solid #c9a24d;color:#ffe7a8;
  font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:0 3px 10px rgba(0,0,0,.5);animation:bbIn .2s ease-out;transition:opacity .3s}
.b1 .bband.relic{border-color:#c084fc;color:#f1e4ff}
.b1 .bband.out{opacity:0}
@keyframes bbIn{from{opacity:0;transform:translate(-50%,-4px)}}
/* v97: boss smack talk is a bubble beside the boss with a tail pointing at it */
.b1 .smack{font-size:13px;padding:5px 10px;border-radius:12px;background:rgba(40,8,8,.92)}
.b1 .smack::after{content:'';position:absolute;bottom:-7px;left:var(--tail,50%);margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#ff5a3c}
/* v97: the log is its own strip: at most two lines, fixed height, so the buttons and field never jump */
.b1 .msg{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* ===== v98 ===== */
/* sign-in week */
.swk{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0 6px}
.swd{position:relative;border:1px solid rgba(255,210,74,.28);border-radius:9px;background:rgba(20,14,4,.55);padding:5px 3px 6px;text-align:center;line-height:1.15;min-width:0}
.swd small{display:block;font-size:10px;opacity:.75}
.swd b{display:block;font-size:12px;color:#ffe7a3}
.swd span{display:block;font-size:10px;margin-top:3px;color:#f8f1dc;overflow-wrap:anywhere}
.swd.big{grid-column:span 1;border-color:rgba(255,210,74,.6);background:linear-gradient(160deg,rgba(90,60,8,.7),rgba(30,20,4,.7))}
.swd.now{border:2px solid #ffd24a;box-shadow:0 0 12px rgba(255,210,74,.55)}
.swd.got{opacity:.62}
.swd.got.now{opacity:1}
.swck{position:absolute;right:3px;top:2px;font-style:normal;color:#4ade80;font-weight:800;font-size:13px}
.swfoot{font-size:12px;text-align:center;margin:2px 0 0;opacity:.9}
/* gold embers instead of confetti */
.conf.ember2{top:auto;bottom:22%;width:5px;height:5px;border-radius:50%;background:var(--ec,#ffd24a)!important;box-shadow:0 0 6px var(--ec,#ffd24a),0 0 12px rgba(255,170,40,.55);animation-name:ember2;animation-timing-function:cubic-bezier(.15,.7,.35,1);animation-fill-mode:forwards;opacity:0}
.conf.ember2.big{width:7px;height:7px}
@keyframes ember2{0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:1}70%{opacity:.85}100%{opacity:0;transform:translate(var(--ex),var(--ey)) scale(.3)}}
/* scene: a little darker behind the fighters so whites and colours read clearly (Hazey) */
.room .rback{background:linear-gradient(180deg,rgba(6,10,20,.26),rgba(6,10,20,.46))!important}
.room .rfog{opacity:.55}
.room .rshaft{opacity:.6}
/* eyes: the elemental head glow is part of Glowing Eyes now, not the default */
.av.lk-fire:not(.gleyes)::after,.av.lk-ice:not(.gleyes)::after,.av.lk-lightning:not(.gleyes)::after{display:none}
.av .acc.eyeglow{width:22%;height:6%;transform:translate(-50%,-50%);display:flex;justify-content:space-between;font-size:0}
.av .acc.eyeglow i{width:28%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 20%,#fde047 40%,rgba(253,224,71,0) 72%);box-shadow:0 0 6px rgba(253,224,71,.8)}
/* pets: bigger and in front of the hero, out from under the HUD */
.b1 #pet{left:34%;bottom:3%;width:66%;height:26%;z-index:4}
.b1 #pet .petpic img{scale:1.35;transform-origin:50% 100%}
.b1 #pet .petshadow{left:12%;right:12%}
.b1 .hspot.hasmount #pet{left:40%;width:62%;height:24%;bottom:5%}
.b1 #pet.pet-owl,.b1 #pet.pet-hawk{bottom:30%;width:52%;height:24%;left:46%}
.b1 .hspot.hasmount #pet.pet-owl,.b1 .hspot.hasmount #pet.pet-hawk{bottom:48%}
#pet.petlunge{animation:petlunge calc(.5s / var(--gs,1)) cubic-bezier(.3,0,.3,1)}
#pet.petpounce{animation:petlunge calc(.62s / var(--gs,1)) cubic-bezier(.3,0,.3,1)}
@keyframes petlunge{0%{transform:none}38%{transform:translate(var(--pdx,70%),var(--pdy,-18%)) scale(1.15)}55%{transform:translate(calc(var(--pdx,70%) * 1.04),var(--pdy,-18%)) scale(1.1) rotate(5deg)}100%{transform:none}}
#pet.petpounce{animation-name:petpounce}
@keyframes petpounce{0%{transform:none}40%{transform:translate(var(--pdx),calc(var(--pdy) - 30px)) scale(1.3) rotate(-10deg)}60%{transform:translate(var(--pdx),var(--pdy)) scale(1.2)}100%{transform:none}}
.vfx.petclaw{z-index:30}
@media (prefers-reduced-motion:reduce){#pet.petlunge,#pet.petpounce{animation:none}}
/* weapon tree tiers: extra flare and rings on your hits */
.vfx.wtier{position:absolute;pointer-events:none;z-index:29}
.vfx.wt-flare{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9) 0 8%,var(--c) 22%,transparent 62%);animation:wtflare .5s ease-out forwards}
@keyframes wtflare{0%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s) * .3))}25%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s) * 1.25))}}
.vfx.wt-ring{width:130px;height:130px;border-radius:50%;border:3px solid var(--c);box-shadow:0 0 10px var(--c),inset 0 0 8px var(--c);animation:wtring .55s ease-out forwards}
.vfx.wt-ring2{border-width:2px;border-color:#ffd24a;box-shadow:0 0 12px #ffd24a}
@keyframes wtring{0%{opacity:.95;transform:translate(-50%,-50%) scale(calc(var(--s) * .2))}100%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s) * 1.5))}}
.spark.wtspark{width:4px;height:4px;box-shadow:0 0 6px #ffd24a}
body.lowpower .vfx.wtier,body.lowpower .wtspark{display:none}

/* v97d: founders chose layout A; every skill visible at once (3 across, no scrolling) */
.b1 #cmds .lyscroll{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:44px;max-height:none;overflow:visible}
.b1 #cmds .lyscroll .cmd2.small{height:44px;min-height:44px}
@media (max-width:380px){.b1 #cmds .cmd2 .cl,.b1 #cmds .cmd2 .cl.long{font-size:.72rem;letter-spacing:-.01em}}
.b1 #cmds .lyscroll .cmd2 .cl{font-size:.72rem;white-space:normal;line-height:1.02;overflow-wrap:anywhere;text-overflow:clip}
.b1 #cmds .lyscroll .cmd2 .cic{width:26px;height:26px;flex:none}

/* ===== v98: chest opening ===== */
.win.dhbox .taphint{display:none}
.chest.c2.cfx{animation:none}
.chest.c2.cwob{animation:cwob .28s cubic-bezier(.36,.07,.19,.97)}
@keyframes cwob{0%{transform:none}20%{transform:rotate(-7deg) scale(1.04,.96)}45%{transform:rotate(6deg) scale(.97,1.05)}70%{transform:rotate(-4deg) scale(1.03,.97)}100%{transform:scale(1.06,.94)}}
.chest.c2.copen{animation:cpop .35s cubic-bezier(.2,1.5,.4,1)}
@keyframes cpop{0%{transform:scale(1.06,.94)}50%{transform:scale(.96,1.08) translateY(-4px)}100%{transform:none}}
.chest2.splitlid .chestart:not(.clid){clip-path:inset(40% -20% -20% -20%)}
.chest2 .chestart.clid{clip-path:inset(-20% -20% 60% -20%);transform-origin:50% 40%;z-index:2}
.copen .chest2 .chestart.clid{animation:lidopen .34s cubic-bezier(.2,.9,.3,1.15) forwards}
@keyframes lidopen{0%{transform:none}55%{transform:perspective(260px) translateY(-14%) rotateX(58deg)}100%{transform:perspective(260px) translateY(-22%) rotateX(72deg) scale(1.02);opacity:.92}}
.copen .chest2:not(.splitlid) .lid{transition:transform .3s cubic-bezier(.2,.9,.3,1.15);transform:translateY(-34%) rotate(-24deg)}
.chest.c2 .cglow{position:absolute;left:50%;top:44%;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--rc,#ffd24a) 55%,transparent) 0,transparent 65%);opacity:0;transition:opacity .25s}
.chest.c2.cwob .cglow{opacity:.45}
.chest.c2.copen .cglow{opacity:1;animation:cglow 1s ease-out forwards}
@keyframes cglow{0%{transform:scale(.7)}40%{transform:scale(1.25)}100%{transform:scale(1.05);opacity:.75}}
.chest.c2 .cbeam{position:absolute;left:50%;top:42%;width:240px;height:220px;margin-left:-120px;transform-origin:50% 100%;translate:0 -100%;pointer-events:none;z-index:3;opacity:0;mix-blend-mode:screen;
  background:conic-gradient(from 150deg at 50% 100%,transparent 0deg,color-mix(in srgb,var(--rc) 70%,#fff) 8deg,transparent 16deg,#fff4d6 26deg,transparent 34deg,color-mix(in srgb,var(--rc) 70%,#fff) 44deg,transparent 52deg,#fff4d6 60deg,transparent 68deg);
  -webkit-mask-image:linear-gradient(0deg,#000 10%,transparent 95%);mask-image:linear-gradient(0deg,#000 10%,transparent 95%)}
.chest.c2.copen .cbeam{animation:cbeam .7s ease-out forwards}
@keyframes cbeam{0%{opacity:0;transform:scaleY(.2)}30%{opacity:.95;transform:scaleY(1.05)}100%{opacity:0;transform:scaleY(1.15)}}
.chest.c2.cskip .cbeam,.chest.c2.cskip .cglow{animation-duration:.15s}
.cbp{position:absolute;pointer-events:none;z-index:70}
.cbp.cember{width:5px;height:5px;margin:-2px;border-radius:50%;background:var(--ec);box-shadow:0 0 6px var(--ec),0 0 12px rgba(255,170,40,.6);opacity:0;animation:cember var(--du,.9s) cubic-bezier(.12,.75,.3,1) var(--dl,0s) forwards}
@keyframes cember{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(var(--ex),calc(var(--ey) + 60px)) scale(.4)}}
.cbp.cshard{width:4px;height:13px;margin:-6px -2px;border-radius:1px;background:linear-gradient(var(--ec),#fff);box-shadow:0 0 8px var(--ec);opacity:0;animation:cshard var(--du,.7s) cubic-bezier(.15,.7,.3,1) forwards}
@keyframes cshard{0%{opacity:0;transform:none}10%{opacity:1}100%{opacity:0;transform:translate(var(--ex),calc(var(--ey) + 40px)) rotate(var(--rot))}}
.cbp.ctwinkle{width:14px;height:14px;margin:-7px;opacity:0;background:radial-gradient(circle,#fff 0 12%,transparent 14%),linear-gradient(90deg,transparent 45%,var(--ec) 48% 52%,transparent 55%),linear-gradient(0deg,transparent 45%,var(--ec) 48% 52%,transparent 55%);
  translate:var(--ex) var(--ey);animation:ctw .7s ease-in-out var(--dl,0s) forwards}
@keyframes ctw{0%{opacity:0;transform:scale(.2) rotate(0)}40%{opacity:1;transform:scale(1.2) rotate(45deg)}100%{opacity:0;transform:scale(.3) rotate(90deg)}}
.cbp.cring{width:60px;height:60px;margin:-30px;border-radius:50%;border:3px solid var(--ec);box-shadow:0 0 14px var(--ec);animation:cring .6s ease-out forwards}
@keyframes cring{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(3.2)}}
body.lowpower .chest.c2 .cbeam{display:none}
@media (prefers-reduced-motion:reduce){.cbp,.chest.c2 .cbeam{display:none}.chest.c2.cwob,.chest.c2.copen,.copen .chest2 .chestart.clid{animation:none}}

/* ===== v98: battle page polish (layout A) ===== */
.b1 #cmds,.b1 #cmds .btn.cmd{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.b1 #cmds .btn.cmd{transition:transform .08s ease-out,filter .12s ease-out}
.b1 #cmds .btn.cmd:active:not(:disabled){transform:translateY(2px) scale(.97);filter:brightness(1.3)}
/* out-of-mana buttons stay readable and say why: solid plate, light label, red MP badge */
.b1 #cmds .btn.cmd:disabled{filter:grayscale(.6) brightness(.82);opacity:1}
.b1 #cmds .btn.cmd:disabled .cl{color:#d6dbe3}
.b1 #cmds .btn.cmd:disabled .cs{color:#aab3c0}
.b1 #cmds .btn.cmd:disabled .mpc{background:#7f1d1d;color:#fecaca;filter:none}
/* enemy names: a touch smaller on narrow phones so two names fit without cutting */
@media (max-width:380px){#fbox .frow1 b{font-size:.82rem;letter-spacing:-.01em}#fbox .frow1 span{font-size:.72rem}}
#fbox .frow1 b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* battle log: comfortable line spacing */
.b1 .msg{line-height:1.3}

/* ===== v98: layout A main bar = every attack visible ===== */
.b1 #cmds.ly-A.m-main{max-height:none;display:flex;flex-direction:column;gap:4px;height:auto}
.b1 #cmds.ly-A.m-main .arow{display:grid;gap:6px;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.b1 #cmds.ly-A.m-main .arow.n2{--n:2}
.b1 #cmds.ly-A.m-main .arow .cmd2{height:var(--cmdh,56px);min-height:44px}
.b1 #cmds.ly-A.m-main .agrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:42px;gap:4px}
.b1 #cmds.ly-A.m-main .agrid.n1{grid-template-columns:repeat(2,minmax(0,1fr))}
.b1 #cmds.ly-A.m-main .agrid .cmd2{height:42px;min-height:42px;padding-top:0;padding-bottom:0}
.b1 #cmds.ly-A.m-main .agrid .cmd2 .cic{width:26px;height:26px;flex:none}
.b1 #cmds.ly-A.m-main .agrid .cmd2 .cl{font-size:.7rem;white-space:normal;line-height:1.02;overflow-wrap:anywhere;text-overflow:clip}
.b1 #cmds.ly-A.m-main .agrid .cmd2 .cs{font-size:.62rem;white-space:nowrap}
/* short phones and long skill lists: 40px rows (still a full tap target) */
@media (max-height:700px){.b1 #cmds.ly-A.m-main .agrid{grid-auto-rows:40px}.b1 #cmds.ly-A.m-main .agrid .cmd2{height:40px;min-height:40px}.b1 #cmds.ly-A.m-main .arow .cmd2{height:48px}}
.b1 #cmds.ly-A.m-main .agrid.n7,.b1 #cmds.ly-A.m-main .agrid.n8,.b1 #cmds.ly-A.m-main .agrid.n9,.b1 #cmds.ly-A.m-main .agrid.n10{grid-auto-rows:40px}
.b1 #cmds.ly-A.m-main .agrid.n7 .cmd2,.b1 #cmds.ly-A.m-main .agrid.n8 .cmd2,.b1 #cmds.ly-A.m-main .agrid.n9 .cmd2,.b1 #cmds.ly-A.m-main .agrid.n10 .cmd2{height:40px;min-height:40px}

/* ===== v98: parchment cards (Driz) ===== */
:root{--parch-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --parch-fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .35' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .14 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='220' height='90' filter='url(%23f)'/%3E%3C/svg%3E");}
.b1 .fbox{background:none!important;box-shadow:none!important;border:0!important;padding:0!important;gap:6px!important}
.b1 .fbox .frow1,.b1 .hbox,.allybox,.petbox{position:relative;color:#2b1d0e;border-radius:6px;border:2px solid #5b4325;
  background:
    linear-gradient(90deg,rgba(91,67,37,.55),rgba(255,240,205,.0) 7px,rgba(255,240,205,0) calc(100% - 7px),rgba(91,67,37,.55)),
    radial-gradient(ellipse 40% 55% at 82% 20%,rgba(150,105,45,.18),transparent 70%),
    radial-gradient(ellipse 30% 40% at 12% 85%,rgba(130,90,40,.16),transparent 70%),
    var(--parch-fiber),var(--parch-noise),
    linear-gradient(180deg,#f3e6c4,#e6d2a4 60%,#d9c08a);
  box-shadow:0 6px 16px rgba(0,0,0,.5),inset 0 0 14px rgba(110,70,20,.35),inset 0 0 0 1px rgba(255,245,215,.35)}
/* rolled scroll ends on the left and right */
.b1 .fbox .frow1::before,.b1 .fbox .frow1::after,.b1 .hbox::before,.b1 .hbox::after{content:'';position:absolute;top:-4px;bottom:-4px;width:7px;border-radius:4px;pointer-events:none;
  background:linear-gradient(90deg,#6b4d27,#d9bf88 45%,#f6e7c2 55%,#8a6634);box-shadow:0 2px 4px rgba(0,0,0,.45)}
.b1 .fbox .frow1::before,.b1 .hbox::before{left:-6px}
.b1 .fbox .frow1::after,.b1 .hbox::after{right:-6px}
.b1 .fbox .frow1{padding:6px 10px 7px!important;margin:0 6px}
.b1 .fbox .frow1 b,.b1 .hbox .lbl b{color:#2b1d0e;text-shadow:0 1px 0 rgba(255,245,215,.6)}
.b1 .fbox .frow1 span:not(.bar span){color:#5b4325}
/* full enemy names: wrap to two lines, never cut, never under the level */
.b1 #fbox .frow1{grid-template-columns:minmax(0,1fr) auto!important;align-items:start}
.b1 #fbox .frow1>b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.08;overflow-wrap:anywhere;font-size:.84rem}
.b1 #fbox .frow1>span{white-space:nowrap;padding-left:6px;font-size:.72rem;align-self:start;margin-top:1px}
.b1 #fbox .frow1 .bar{grid-column:1/-1}
@media (max-width:380px){.b1 #fbox .frow1>b{font-size:.76rem}}

/* ===== v98: liquid health and mana bars (Driz) ===== */
.bar.tx{border:1px solid #2b1d0e!important;background:linear-gradient(180deg,rgba(10,8,6,.85),rgba(35,26,18,.8))!important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.75),0 1px 0 rgba(255,240,205,.35),0 0 0 1px rgba(255,220,150,.18)!important;overflow:hidden}
/* glass: a highlight across the top of the tube, over the liquid, under the numbers */
.bar.tx::after{content:'';position:absolute;left:3px;right:3px;top:1px;height:38%;border-radius:6px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.05))}
.bar.tx u{overflow:hidden}
.bar.tx.hp u{background:linear-gradient(180deg,#ff6b6b,#dc2626 45%,#8f1020)!important;box-shadow:0 0 10px rgba(239,68,68,.55),inset 0 -3px 4px rgba(60,0,0,.45)!important}
.b1 #fbox .bar.tx.hp u{background:linear-gradient(180deg,#86efac,#22c55e 45%,#14692f)!important;box-shadow:0 0 8px rgba(34,197,94,.45),inset 0 -3px 4px rgba(0,40,10,.4)!important}
.b1 #fbox .bar.tx.hp u.low{background:linear-gradient(180deg,#fca5a5,#ef4444 45%,#7f1d1d)!important;box-shadow:0 0 8px rgba(239,68,68,.55)!important}
.bar.tx.mp u{background:
    radial-gradient(circle at 20% 70%,rgba(255,255,255,.7) 0 1.2px,transparent 1.8px) 0 0/23px 22px,
    radial-gradient(circle at 70% 40%,rgba(255,255,255,.55) 0 1px,transparent 1.6px) 0 0/31px 22px,
    linear-gradient(180deg,#93c5fd,#4f46e5 50%,#3b0f7a)!important;
  box-shadow:0 0 10px rgba(99,102,241,.55),inset 0 -3px 4px rgba(20,0,60,.45)!important;animation:mpbub 2.6s linear infinite}
@keyframes mpbub{to{background-position:0 -22px,0 -44px,0 0}}
/* moving sheen across the liquid, and a sloshing surface at the edge of the fill */
.bar.tx u::after{content:''!important;position:absolute;inset:0!important;height:auto!important;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%) 0 0/250% 100% no-repeat!important;animation:barsheen 3.2s ease-in-out infinite}
@keyframes barsheen{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
.bar.tx u::before{content:'';position:absolute;right:-3px;top:-20%;bottom:-20%;width:6px;border-radius:50%;background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);animation:slosh 1.8s ease-in-out infinite}
@keyframes slosh{0%,100%{transform:translateY(-12%) scaleY(1.05)}50%{transform:translateY(12%) scaleY(.92)}}
/* the drain ghost catches up a moment after a hit */
.bar.tx .trail{background:linear-gradient(180deg,rgba(255,236,200,.9),rgba(255,180,120,.75))!important;transition:width .6s ease-in .35s!important}
.bar.tx.hit{animation:barflash .28s ease-out}
@keyframes barflash{0%{filter:brightness(1.8)}100%{filter:none}}
.bar.tx span{text-shadow:0 1px 1px #000,0 0 3px #000,0 0 6px rgba(0,0,0,.6)!important;color:#fff!important}
body.lowpower .bar.tx u,body.lowpower .bar.tx u::after,body.lowpower .bar.tx u::before{animation:none!important}
@media (prefers-reduced-motion:reduce){.bar.tx u,.bar.tx u::after,.bar.tx u::before{animation:none!important}}
.b1 #cmds.ly-A.m-main .agrid .cmd2 .cl{overflow-wrap:normal;word-break:normal;hyphens:auto}
.b1 #cmds.ly-A.m-main .agrid .cmd2 .cl.xlong{font-size:.6rem;letter-spacing:-.01em}
.b1 #fbox .frow1>b{overflow-wrap:normal!important;word-break:normal!important;hyphens:manual}
.b1 #fbox .frow1>b{grid-column:1/-1;padding-right:44px;font-size:.78rem}
.b1 #fbox .frow1>span{position:absolute;right:9px;top:6px;padding-left:0}
@media (max-width:380px){.b1 #fbox .frow1>b{font-size:.72rem;padding-right:40px}.b1 #fbox .frow1>span{font-size:.66rem}}

/* ===== v98: chest screen backdrop ===== */
.veil.boxveil.chestbg{background:#07060c!important;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden}
.veil.boxveil.chestbg::before{content:'';position:absolute;inset:-24px;z-index:0;pointer-events:none;background:var(--chbg,linear-gradient(#1b1430,#07060c)) center/cover no-repeat;filter:blur(7px) brightness(.42) saturate(.9)}
.veil.boxveil.chestbg::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 46% 30% at 50% 42%,color-mix(in srgb,var(--chc,#ffd24a) 22%,transparent),transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 45%,rgba(255,236,190,.12),transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%,transparent 45%,rgba(0,0,0,.78) 100%)}
.veil.boxveil.chestbg>.win{position:relative;z-index:1}
.veil.boxveil.chestbg .chdust{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.7;
  background:radial-gradient(circle,rgba(255,214,140,.9) 0 1.2px,transparent 2px) 0 0/97px 113px,radial-gradient(circle,rgba(255,180,90,.7) 0 1px,transparent 1.8px) 40px 60px/131px 89px;animation:chdust 14s linear infinite}
.veil.boxveil.chestbg .chdust.d2{opacity:.45;background-size:71px 97px,113px 131px;animation-duration:22s;animation-direction:reverse}
@keyframes chdust{to{background-position:30px -340px,70px -280px}}
body.lowpower .veil.boxveil.chestbg .chdust{animation:none}
body.lowpower .veil.boxveil.chestbg::before{filter:brightness(.42)}
#syncdot{position:fixed;left:6px;bottom:calc(6px + env(safe-area-inset-bottom));z-index:2147482000;font-style:normal;font-size:11px;line-height:1;padding:3px 5px;border-radius:9px;pointer-events:none;background:rgba(10,12,20,.7);border:1px solid rgba(255,255,255,.2)}
#syncdot.ok{color:#86efac}
#syncdot.bad{color:#fbbf24;border-color:#f59e0b}
.brireset{display:flex;justify-content:flex-end;margin:2px 0 6px}

/* forge milestones (card mw9q774nocxe): +50 shimmers gold, +100 pulses */
.fglow{display:inline-block;filter:drop-shadow(0 0 4px #fbbf24)}.fglow.g100{filter:drop-shadow(0 0 6px #f472b6) drop-shadow(0 0 3px #fde047);animation:fgpulse 1.6s ease-in-out infinite}
@keyframes fgpulse{50%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.fglow.g100{animation:none}}

/* mail: one row per message, tap for the text (Dragon, Nov 10); gifts to claim stay visible */
.mail .mdet>summary{list-style:none;cursor:pointer;align-items:center}.mail .mdet>summary::-webkit-details-marker{display:none}
.mail .mdet>summary::after{content:'▸';color:var(--dim);margin-left:6px;transition:transform .15s}.mail .mdet[open]>summary::after{transform:rotate(90deg)}
.mail .mdet>summary b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail .mdet[open]>summary b{white-space:normal}.mail .mdet>summary small{flex:none}
/* v111d: mailbox rows never push the list sideways (long titles / unbroken links) */
.scroll.mailbox{overflow-x:hidden}
.mailbox .mail,.mailbox .mail .mdet{min-width:0;max-width:100%;box-sizing:border-box}
.mailbox .mail .mdet>summary{min-width:0;max-width:100%}
.mailbox .mail p,.mailbox .mail small,.mailbox .mail b{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.mail .mdet>summary b{overflow-wrap:anywhere}

/* v116 wardrobe expansion: neck / hand / feet looks sit on fixed spots on the hero */
.av .acc.neck{font-size:13cqw;left:52%;top:41%}
.av .acc.hand{font-size:22cqw;left:20%;top:62%;transform:translate(-50%,-50%) rotate(-12deg)}
.av .acc.feet{font-size:17cqw;left:52%;top:93%}
/* v117: Info screen (chest odds, uniques) */
.infochest{display:flex;gap:10px;align-items:center;padding:8px;margin:6px 0;border:1px solid rgba(157,176,200,.25);border-radius:12px;background:rgba(7,13,24,.5)}
.infochest .icpic{flex:0 0 64px;height:56px;position:relative;transform:scale(.55);transform-origin:center;margin:-14px -6px}
.infochest .icbody{flex:1;min-width:0}.infochest .icbody b{display:block}.infochest .icbody small{display:block}
.infochest .icodds{display:flex;flex-wrap:wrap;gap:4px 10px;margin:4px 0;font-size:.82rem}.infochest .icodds em{font-style:normal;font-weight:800}
.infodist{margin:8px 0}.infodist summary{cursor:pointer;font-weight:700}
#patrol .btn.dot::after{top:-3px;right:-3px}
/* v120 One Back button: every window's Close (the round ✕) is the last thing in its title row, pinned to the right corner, never squeezed */
.win .ph>.x[data-back]{flex:none;margin-left:auto;order:99}
/* v120 shielded enemies: a small shield badge on the foe and its shield number beside its name (no extra row, so layouts do not move) */
.tagsh{position:absolute;top:8%;left:14%;background:#1e3a8a;color:#fff;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-size:.85rem;box-shadow:0 0 8px #60a5fa;pointer-events:none}
.frow1 .fsh{font-style:normal;font-size:.72rem;color:#93c5fd;font-weight:700;white-space:nowrap}.frow1 .fsh.gone{opacity:.4;text-decoration:line-through}
/* v120 pets and allies fully visible (card mwbc12njb83y, Rhino): a formation instead of a pile.
   Back row above the hero: mercenary (left) and summon (right). Front row on the ground: the pet, beside the hero, never in front of
   a body (the hero steps a little left to make room). Fliers hover beside the hero on the right. With a mount the hero stands higher,
   so the back row rises with it. tests/dh/allyvis-ui.cjs keeps every pair of pictures from covering each other. */
.b1 .hspot #merc{left:0;bottom:40%;width:56%;height:21%;z-index:2}
.b1 .hspot #sumspot{left:56%;bottom:40%;width:44%;height:24%;z-index:2}
.b1 .hspot:has(#pet) #me{right:18%}
.b1 .hspot #pet{left:66%;bottom:1%;width:34%;height:16%;z-index:4}
.b1 .hspot #pet .petpic img{scale:1}
.b1 .hspot #pet.pet-owl,.b1 .hspot #pet.pet-hawk{left:66%;bottom:20%;width:34%;height:15%}
.b1 .hspot.hasmount #merc,.b1 .hspot.hasmount #sumspot{bottom:62%}
.b1 .hspot.hasmount #pet{left:66%;bottom:1%;width:34%;height:16%}
.b1 .hspot.hasmount #pet.pet-owl,.b1 .hspot.hasmount #pet.pet-hawk{bottom:40%}

.needsyou{border:1px solid #c9a227;border-radius:10px;padding:8px;margin-bottom:10px;background:rgba(201,162,39,.08)}.needsyou>small{display:block;margin:2px 0 6px}.nyrow .vrow{align-items:center}.nyrow .vrow small{white-space:nowrap}
/* Mini Games hub (v122) */
.mgs{display:flex;flex-direction:column;gap:8px}.mgtile{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;color:inherit;border:1px solid #6b5a2e66;background:rgba(30,41,59,.6)}
.mgtile.locked{opacity:.55}.mgtile small{display:block}.mgarrow{margin-left:auto;opacity:.8}.mgdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff4d4d;vertical-align:middle}
/* v122 H (card v1njrj): the six left buttons (with Daily + Info) must never sit under the diamond/gold counters. Tighter buttons on phones; if it still cannot fit, the counters drop to their own row instead of overlapping. */
.home1 .top{flex-wrap:wrap;row-gap:4px}.home1 .top .tr{margin-left:auto}
@media (max-width:460px){.home1 .top .tl{gap:3px}.home1 .top .tl .ver{min-width:30px;padding:0 3px;font-size:.8rem}.home1 .top .ver.dia{padding:0 6px;font-size:.78rem}.home1 .top .coins{padding:5px 7px}}
/* v122 H home (cards 14wbwj 7wcp5k glujdn z3zese): patrol opens from a button, bigger idle hero with its allies, Enter Floor at the bottom */
.home1.h122 .patrol{display:none}
.home1.h122.patopen .patrol{display:grid;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,420px);z-index:30;padding:14px 14px 12px}
.home1.h122 .patback{position:fixed;inset:0;background:rgba(3,6,14,.72);z-index:29}
.home1.h122 .patrol .patx{position:absolute;top:-12px;right:-6px;width:34px;height:34px;min-width:0;padding:0;border-radius:50%}
.home1.h122 .tabbar{grid-template-columns:repeat(5,1fr)}
.home1.h122 .tabbar .btn.tab .tl2{font-size:.7rem}
.h3f.h122 .hhero{--hw:clamp(150px,50vw,250px)}
@media (max-height:700px){.h3f.h122 .hhero{--hw:clamp(118px,38vw,170px)}}
.h3f.h122.tight .hhero{--hw:clamp(110px,32vw,160px)}.h3f.h122.tighter .hhero{--hw:clamp(92px,27vw,128px)}.h3f.h122.tightest .hhero{--hw:clamp(76px,22vw,100px)}
.h122 .hhero .av{transform-origin:50% 92%;animation:h122walk 1.5s ease-in-out infinite}
.h122 .hhero.swing .av{animation:h122swing .7s ease-in-out 1}
@keyframes h122walk{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-2.5%) rotate(-1.2deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-2.5%) rotate(1.2deg)}}
@keyframes h122swing{0%{transform:rotate(0)}30%{transform:rotate(-9deg) translateX(-3%)}60%{transform:rotate(11deg) translateX(5%)}100%{transform:rotate(0)}}
body.lowpower .h122 .hhero .av,body.lowpower .h122 .hhero.swing .av{animation:none}
@media (prefers-reduced-motion:reduce){.h122 .hhero .av,.h122 .hhero.swing .av{animation:none}}
.h122allies{position:absolute;inset:0;pointer-events:none}
.h122a{position:absolute;width:34%;aspect-ratio:1;display:block}
.h122a img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.h122a.noimg{display:none}
.h122a.mount{left:2%;bottom:-4%}.h122a.pet{right:-6%;bottom:-3%;width:28%}.h122a.merc{right:-8%;bottom:32%;width:30%}.h122a.summon{left:0;bottom:40%;width:26%}
/* v122 H (card jx17he): Items has Bag and Worn views, so the bag is never cut off by the worn gear */
.h122vt{display:flex;gap:6px;margin:2px 0 6px}.h122vt .btn{flex:1}.h122vt small{opacity:.75;margin-left:3px}
.h122inv.vw-bag .doll18,.h122inv.vw-bag .gear9{display:none}
.h122inv.vw-worn .scroll.inv,.h122inv.vw-worn .itabs:not(.h122vt){display:none}

/* v123: Items + Skills moved into the hero page for everyone, so its button row wraps instead of running off narrow phones */
.heropanel .hrow{flex-wrap:wrap}.heropanel .hrow .btn{flex:1 1 30%;min-width:0}