/* Fake Dungeon 3 — battle + loot */
.b-bgwrap { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.b-bg { animation: drift 14s ease-in-out infinite alternate; z-index: 0; }
@keyframes drift { from { transform: scale(1.05) translateX(-1%); } to { transform: scale(1.05) translateX(1%); } }
.b-vig { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,6,16,.75) 0%, transparent 16%, transparent 60%, rgba(4,6,16,.88) 84%); }
#s-battle.redflash .b-vig { animation: redflash .3s; } @keyframes redflash { 30% { box-shadow: inset 0 0 70px 20px rgba(255,40,60,.55); } }
#s-battle.bossfight .b-vig { background: linear-gradient(180deg, rgba(40,4,16,.8) 0%, transparent 18%, transparent 60%, rgba(4,6,16,.88) 84%); }
.b-field { position: absolute; inset: 0; }
.b-field.flash::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 60% 55%, #fff, rgba(199,125,255,.6) 40%, transparent 75%); animation: flash .38s ease-out forwards; pointer-events: none; z-index: 900; }
@keyframes flash { from { opacity: .95; } to { opacity: 0; } }
.b-mobs, .b-nums { position: absolute; inset: 0; } .b-nums { pointer-events: none; z-index: 950; }

/* fighters: the element sits on the ground line, the picture hangs above it */
.f { position: absolute; width: 0; height: 0; z-index: 640; }
.f .spr { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2); margin-top: calc(var(--s) * -.92); transition: transform .16s ease-out; will-change: transform; }
.f .spr img { width: 100%; height: 100%; transform-origin: 50% 92%; animation: idle 2.6s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(0,0,0,.35)); }
@keyframes idle { 50% { transform: scaleY(1.03) scaleX(.985); } }
.f .shadow { position: absolute; left: 0; top: 0; width: calc(var(--s) * .62); height: calc(var(--s) * .13); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.7), rgba(0,0,0,.35) 60%, transparent); }
.f.mob { cursor: pointer; } .f.mob .spr { pointer-events: auto; }
.f.mob.fly .spr { margin-top: calc(var(--s) * -1.12); } .f.mob.fly .spr img { animation: hover 2.2s ease-in-out infinite; } .f.mob.fly .shadow { opacity: .55; transform: translate(-50%, -50%) scale(.8); }
@keyframes hover { 50% { transform: translateY(-9%); } }
.f.mob.enter { animation: mob-in .5s cubic-bezier(.2,1.2,.4,1) backwards; } @keyframes mob-in { from { transform: translateX(60vw); } }
.f.mob.boss.enter { animation: boss-in .9s cubic-bezier(.3,1.4,.5,1) backwards; } @keyframes boss-in { from { transform: translateY(-80vh) scale(1.3); } 70% { transform: translateY(0) scale(1.06, .92); } }
.f .ring { position: absolute; left: 0; top: 0; width: calc(var(--s) * .78); height: calc(var(--s) * .2); transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid var(--gold1); box-shadow: 0 0 12px var(--gold2), inset 0 0 10px rgba(255,200,80,.6); opacity: 0; }
.f.target .ring { opacity: 1; animation: ring 1s ease-in-out infinite; } @keyframes ring { 50% { transform: translate(-50%, -50%) scale(1.1); opacity: .65; } }
.f .hpw { position: absolute; left: 0; top: calc(var(--s) * -1.0); width: calc(var(--s) * .62); min-width: 64px; transform: translateX(-50%); text-align: center; pointer-events: none; }
.f.fly .hpw { top: calc(var(--s) * -1.18); } .f.boss .hpw { width: calc(var(--s) * .8); top: calc(var(--s) * -.99); }
.f .hpw .bar { height: 11px; } .f.boss .hpw .bar { height: 15px; }
.f .nm { font-size: 10.5px; line-height: 1.5; white-space: nowrap; } .f.boss .nm { font: 900 14px 'Cinzel', serif; color: #ffb0b8; }
.f.hurt .spr { transform: translateX(calc(var(--s) * .07)) rotate(4deg); } .f.hero.hurt .spr { transform: translateX(calc(var(--s) * -.07)) rotate(-4deg); }
.f.hurt .spr img { filter: brightness(3.2) saturate(.2); }
.f.hero.hurt .spr img { filter: brightness(1.5) saturate(1.6) drop-shadow(0 0 10px #ff3b50); }
.f.bite .spr { transform: translateX(calc(var(--s) * -.42)) rotate(-7deg); transition-duration: .11s; }
.f.lunge .spr { transform: translateX(calc(var(--u) * 13)) rotate(6deg); transition-duration: .1s; } .f.lunge2 .spr { transform: translateX(calc(var(--u) * 17)) scale(1.12) rotate(8deg); transition-duration: .1s; }
.f.cast .spr { transform: translateX(calc(var(--s) * -.04)) scale(1.06); }
.f.dead { pointer-events: none; } .f.dead .spr { transition: transform .5s ease-in, opacity .5s .1s; transform: translate(calc(var(--s) * .3), calc(var(--s) * .08)) rotate(38deg) scale(.7); opacity: 0; }
.f.dead .spr img { filter: brightness(3) saturate(0); animation: none; } .f.dead .hpw, .f.dead .ring, .f.dead .shadow { opacity: 0; transition: opacity .3s; }
.f.hero.down .spr { transition: transform .6s ease-in; transform: rotate(-82deg) translate(calc(var(--s) * -.3), calc(var(--s) * .1)); } .f.hero.down .spr img { filter: grayscale(.8) brightness(.6); animation: none; }
.f.hero.cheer .spr img { animation: cheer .5s ease-in-out infinite; } @keyframes cheer { 50% { transform: translateY(-9%) scaleY(1.04); } }
.f .dome { position: absolute; left: 0; top: 0; width: calc(var(--s) * .95); height: calc(var(--s) * .95); margin-left: calc(var(--s) * -.475); margin-top: calc(var(--s) * -.93); border-radius: 50% 50% 46% 46%; z-index: 2; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at 40% 30%, rgba(190,235,255,.35), rgba(88,180,255,.14) 55%, rgba(88,180,255,.3) 100%); border: 3px solid rgba(160,220,255,.85); box-shadow: 0 0 22px rgba(88,180,255,.8), inset 0 0 22px rgba(160,220,255,.5); pointer-events: none; }
.f.guarding .dome { opacity: 1; animation: domep 1s ease-in-out infinite; } @keyframes domep { 50% { transform: scale(1.04); } }
.b-pet { position: absolute; width: calc(var(--s) * .34); left: calc(var(--s) * -.36); top: calc(var(--s) * -1.18); animation: float 2.4s ease-in-out infinite; filter: drop-shadow(0 6px 5px rgba(0,0,0,.5)); }
.slash { position: absolute; left: 0; top: 0; width: calc(var(--s) * 1.1); height: calc(var(--s) * 1.1); margin: calc(var(--s) * -1.0) 0 0 calc(var(--s) * -.55); border-radius: 50%; z-index: 5; pointer-events: none;
  background: conic-gradient(from 200deg, transparent 0 20deg, #fff 60deg, var(--gold1) 95deg, transparent 130deg); -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 64%, #000 96%, transparent 100%); mask: radial-gradient(closest-side, transparent 62%, #000 64%, #000 96%, transparent 100%);
  animation: slash .36s ease-out forwards; filter: drop-shadow(0 0 8px #fff); }
@keyframes slash { from { transform: rotate(-70deg) scale(.6); opacity: 1; } 70% { opacity: 1; } to { transform: rotate(80deg) scale(1.15); opacity: 0; } }
.proj { position: absolute; z-index: 800; width: 34px; height: 6px; margin: -3px 0 0 -17px; border-radius: 3px; background: linear-gradient(90deg, transparent, #e9d9a8 30%, #fff); box-shadow: 0 0 8px #fff; animation: proj .15s linear forwards; pointer-events: none; }
.proj.mage { width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: radial-gradient(circle, #fff 20%, #7ff 45%, #a05cff 75%, transparent 78%); box-shadow: 0 0 18px #7ff, 0 0 30px #a05cff; }
.proj.big { transform: scale(1.8); filter: brightness(1.3); }
@keyframes proj { from { transform: translate(0, 0) rotate(var(--rot)); } to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }

/* numbers */
.num { position: absolute; font: 900 26px 'Nunito', sans-serif; color: #fff; -webkit-text-stroke: 5px #080b1c; paint-order: stroke fill; text-shadow: 0 3px 0 #080b1c; white-space: nowrap; transform: translate(-50%, -50%); animation: num 2.2s cubic-bezier(.2,.8,.3,1) forwards; }
.num.tap { font-size: 19px; color: #dfe6ff; } .num.skill { font-size: 32px; color: var(--gold1); }
.num.crit { font-size: 36px; color: #ffb84a; text-shadow: 0 3px 0 #080b1c, 0 0 16px rgba(255,150,40,.9); }
.num.ouch { color: #ff6b78; font-size: 25px; } .num.block { color: #9fd8ff; font-size: 20px; } .num.heal { color: #7dff95; font-size: 28px; }
@keyframes num { 0% { transform: translate(-50%, -30%) scale(.3); opacity: 0; } 9% { transform: translate(-50%, -75%) scale(1.3); opacity: 1; } 16% { transform: translate(-50%, -85%) scale(1); } 75% { transform: translate(-50%, -150%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -190%) scale(.9); opacity: 0; } }

/* top + banners */
.b-top { position: relative; z-index: 20; display: flex; align-items: flex-start; gap: 6px; padding: 8px; }
.b-btn { width: 46px; height: 44px; flex: none; font-weight: 900; font-size: 13px; color: var(--text); } .b-btn.on { color: #032b28; background: var(--grain), linear-gradient(180deg, #c5fff3, #3ee0c5 55%, #1a9c8c); background-blend-mode: overlay, normal; border-color: #063f39; }
.b-btn:active { transform: translateY(2px); }
.b-title { flex: 1; text-align: center; min-width: 0; } .b-title .title { font-size: 17px; white-space: nowrap; } .b-floor { font-size: 13px; margin-top: 1px; }
.pips { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: 1px; } .pips i { width: 10px; height: 10px; transform: rotate(45deg); background: #1a2150; border: 2px solid #05070f; box-shadow: 0 0 0 1px #5766b8; }
.pips i.on { background: var(--gold1); box-shadow: 0 0 0 1px var(--gold3), 0 0 8px var(--gold2); } .pips i.done { background: var(--teal); }
.b-banner { position: absolute; left: 0; right: 0; top: 21%; z-index: 30; text-align: center; pointer-events: none; opacity: 0; }
.b-banner .title { display: inline-block; font-size: 30px; color: var(--gold1); padding: 4px 30px; background: linear-gradient(90deg, transparent, rgba(6,8,20,.82) 22%, rgba(6,8,20,.82) 78%, transparent); -webkit-text-stroke-width: 5px; }
.b-banner .bossname { color: #ff8f9a; font-size: 32px; } .b-banner .win { font-size: 44px; color: #fff3b8; } .b-banner .lose { font-size: 40px; color: var(--red); }
.b-banner.show { animation: banner 1.3s ease-out forwards; } @keyframes banner { 0% { opacity: 0; transform: scale(1.7); } 14% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px); } }

/* bottom HUD */
.b-hud { position: relative; z-index: 20; margin-top: auto; padding: 0 10px calc(10px + var(--sab)); }
.b-hp { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.b-hp > img { width: 54px; height: 54px; flex: none; border-radius: 10px; object-fit: cover; object-position: 50% 12%; background: var(--grain), linear-gradient(180deg, #3b4a94, #1a2150); background-blend-mode: overlay, normal; border: 2px solid var(--gold3); box-shadow: inset 0 0 0 1px #080b1c, 0 3px 0 #05070f; }
.b-hpname { font-size: 13px; margin-bottom: 3px; } .b-hpname span { color: var(--gold1); }
.bar.big { height: 24px; border-radius: 7px; } .bar.big span { font-size: 13px; }
.b-skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.sk { position: relative; aspect-ratio: 1 / 1.02; max-height: 96px; border-radius: 14px; overflow: hidden; touch-action: manipulation;
  background: var(--grain), var(--scratch), linear-gradient(180deg, #4a59ac 0%, #2a3478 45%, #171d4a 100%); background-blend-mode: overlay, normal, normal; border: 2px solid var(--gold3);
  box-shadow: inset 0 2px 0 rgba(190,205,255,.5), inset 0 0 0 2px #0a0e22, inset 0 -4px 0 rgba(0,0,20,.45), 0 5px 0 #05070f, 0 8px 12px rgba(0,0,0,.5); transition: transform .07s; }
.sk:active, .sk.used { transform: translateY(4px) scale(.97); }
.sk img { position: absolute; left: 50%; top: 44%; width: 84%; transform: translate(-50%, -50%); filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.sk.pot img { width: 74%; }
.sk span { position: absolute; left: 0; right: 0; bottom: 4px; font-size: 10.5px; line-height: 1; text-align: center; white-space: nowrap; }
.sk .cd { position: absolute; inset: 0; background: rgba(5,7,18,.78); transform-origin: bottom; transform: scaleY(0); }
.sk .cdn { position: absolute; inset: 0 0 12px; display: grid; place-items: center; font-size: 26px; -webkit-text-stroke: 4px #05070f; paint-order: stroke fill; }
.sk .cnt { position: absolute; right: 6px; top: 3px; font-size: 16px; color: var(--gold1); }
.sk.ready { animation: skready 1.6s ease-in-out infinite; } @keyframes skready { 50% { box-shadow: inset 0 2px 0 rgba(190,205,255,.5), inset 0 0 0 2px #0a0e22, 0 5px 0 #05070f, 0 0 16px 2px rgba(255,224,138,.75); border-color: var(--gold0); } }
.sk.wait img { filter: grayscale(.7) brightness(.7); } .sk.nope { animation: nope .28s; } @keyframes nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---- loot ---- */
#loot { position: absolute; inset: calc(var(--tagh) + var(--sat)) 0 0 0; z-index: 40; display: flex; flex-direction: column; align-items: center; padding: 14px 14px calc(14px + var(--sab)); overflow: hidden;
  background: radial-gradient(90% 60% at 50% 30%, #2a3676, #060814 75%); animation: fade .3s; }
#loot.royal { background: radial-gradient(90% 60% at 50% 30%, #55309a, #060814 75%); }
.l-rays { position: absolute; left: 50%; top: 27%; width: 150vh; height: 150vh; margin: -75vh; pointer-events: none; opacity: .0; transition: opacity .5s;
  background: repeating-conic-gradient(rgba(255,224,138,.16) 0 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(closest-side, #000, transparent 55%); mask: radial-gradient(closest-side, #000, transparent 55%); animation: spin 26s linear infinite; }
#loot.open .l-rays { opacity: 1; } @keyframes spin { to { transform: rotate(360deg); } }
.l-title { position: relative; font-size: 16px; margin-top: 4px; animation: pop .4s cubic-bezier(.2,1.5,.4,1); max-width: 100%; }
.l-chest { position: relative; width: 62%; max-width: 250px; aspect-ratio: 1; margin-top: 12vh; transition: width .35s, margin .35s; flex: none; }
.l-chest img { width: 100%; height: 100%; filter: drop-shadow(0 16px 14px rgba(0,0,0,.6)); animation: wobble 1.1s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes wobble { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-5deg) scale(1.04); } 80% { transform: rotate(5deg) scale(1.04); } 90% { transform: rotate(-3deg); } }
.l-chest span { position: absolute; left: 0; right: 0; bottom: -18px; font-size: 19px; color: var(--gold1); animation: pulse 1s ease-in-out infinite; }
#loot.open .l-chest { width: 48%; max-width: 190px; margin-top: 3vh; pointer-events: none; } #loot.open .l-chest span { display: none; }
#loot.open .l-chest img { animation: chestpop .5s cubic-bezier(.2,1.6,.4,1); filter: drop-shadow(0 0 26px rgba(255,210,110,.9)) drop-shadow(0 12px 10px rgba(0,0,0,.6)); } @keyframes chestpop { 30% { transform: scale(1.3, .85); } }
.l-body { position: relative; width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.l-rewards { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; animation: pop .35s .1s backwards; }
.l-rewards .plate { position: relative; height: 34px; padding: 0 12px 0 34px; display: flex; align-items: center; font-size: 15px; } .l-rewards img { position: absolute; left: -6px; top: -5px; width: 42px; height: 42px; }
.l-rewards .xp { padding-left: 10px; gap: 6px; } .l-rewards .xp span { color: var(--teal); font-size: 12px; }
.l-lvl small { display: block; font: 700 11px 'Nunito', sans-serif; color: var(--teal); letter-spacing: .08em; -webkit-text-stroke: 0; }
.l-lvl { text-align: center; font-size: 23px; color: #fff3b8; margin-top: 8px; animation: pop .5s .35s backwards, pulse 1.2s 1s ease-in-out infinite; }
.l-pet { align-self: center; display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 6px; margin-top: 8px; border-color: var(--teal); animation: pop .5s .5s backwards; } .l-pet img { width: 44px; height: 44px; } .l-pet b { display: block; font-size: 13.5px; } .l-pet small { font-size: 11px; color: var(--dim); }
.l-cards { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 4px 2px; }
.l-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; flex: none; animation: card-in .45s cubic-bezier(.2,1.4,.4,1) backwards;
  background: var(--grain), linear-gradient(90deg, color-mix(in srgb, var(--rc) 34%, #141a3c), #141a3c 70%); background-blend-mode: overlay, normal; border: 2px solid var(--rc);
  box-shadow: inset 0 0 0 2px #080b1c, 0 4px 0 #05070f, 0 0 14px color-mix(in srgb, var(--rc) 35%, transparent); }
@keyframes card-in { from { transform: translateY(26px) scale(.8) rotateX(70deg); opacity: 0; } }
.l-card .it { width: 58px; flex: none; } .l-name { font: 900 15px 'Cinzel', serif; line-height: 1.1; } .l-sub { font-size: 12px; color: var(--dim); margin-top: 2px; }
.l-card .btn { min-width: 92px; flex: none; } .l-card .btn .sub { font-size: 10.5px; opacity: 1; color: #033; text-shadow: none; } .l-card .btn { flex-direction: column; gap: 0; line-height: 1.05; }
.l-tag { font-size: 12px; color: var(--teal); padding: 0 6px; flex: none; }
.l-foot { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; animation: fade .4s .8s backwards; }