/* =========================================================
   BATTLES: the duel arena, the boss raid and the clan war
   ========================================================= */

/* ---------- the duel arena ---------- */
.arena{position:relative;max-width:760px;margin:14px auto;padding:16px 12px 14px;border-radius:20px;overflow:hidden;border:1px solid rgba(var(--accent-rgb),.45);
  background:radial-gradient(ellipse at 50% 120%,rgba(255,122,26,.35),transparent 60%),linear-gradient(180deg,rgba(14,6,20,.92),rgba(30,10,8,.92));box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 40px rgba(var(--accent-rgb),.18)}
.arena::before{content:"";position:absolute;inset:0;background:url('../img/welcome-bg.jpg') center/cover;opacity:.22;pointer-events:none}
.arena>*{position:relative}
.arena.shake{animation:arShake .35s}
@keyframes arShake{0%,100%{transform:translate(0)}20%{transform:translate(-5px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(3px,2px)}}
.arena-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px}
.fighters{display:grid;grid-template-columns:1fr 56px 1fr;gap:8px;align-items:end}
.ft{text-align:center;transition:transform .35s cubic-bezier(.3,1.6,.5,1),filter .3s}
.ft-tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.06em;padding:2px 10px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,176,46,.5);color:#ffd27a;margin-bottom:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft.them .ft-tag{border-color:rgba(255,90,60,.6);color:#ff9a86}
.ft-pic{position:relative;aspect-ratio:465/590;max-width:210px;margin:0 auto;border-radius:16px;overflow:hidden;border:2px solid rgba(255,176,46,.55);box-shadow:0 0 26px rgba(255,150,40,.35);animation:ftIdle 3.2s ease-in-out infinite}
.ft.them .ft-pic{border-color:rgba(255,90,60,.65);box-shadow:0 0 26px rgba(255,70,50,.35);animation-delay:-1.6s}
.ft-pic img{display:block;width:100%;height:100%;object-fit:cover}
@keyframes ftIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ft-name{font-weight:900;font-size:1.05rem;margin-top:8px;text-shadow:0 2px 8px #000}
.ft-str{font-size:.85rem;color:#ffd27a;font-weight:700}
.hp{height:12px;border-radius:7px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.18);overflow:hidden;margin:8px auto 2px;max-width:210px}
.hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#2ecc71,#8cf06a);border-radius:7px;transition:width .6s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 10px rgba(110,240,110,.6)}
.hp i.mid{background:linear-gradient(90deg,#f1c40f,#ffe066);box-shadow:0 0 10px rgba(255,220,80,.6)}
.hp i.low{background:linear-gradient(90deg,#e74c3c,#ff8a7a);box-shadow:0 0 10px rgba(255,90,70,.7);animation:hpLow .8s infinite alternate}
@keyframes hpLow{to{opacity:.65}}
.hpn{font-size:.78rem;font-weight:800;color:#fff;text-shadow:0 1px 4px #000}
.vs-emblem{align-self:center;justify-self:center;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:1.05rem;color:#2a1000;background:radial-gradient(circle at 35% 30%,#ffe9a8,#ffa21f 60%,#c75b00);box-shadow:0 0 0 3px rgba(0,0,0,.45),0 0 24px rgba(255,160,40,.75);animation:vsPulse 1.6s ease-in-out infinite}
@keyframes vsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.ft.lunge-r{transform:translateX(34px) scale(1.06)}
.ft.lunge-l{transform:translateX(-34px) scale(1.06)}
.ft.hit .ft-pic{animation:none;filter:brightness(1.9) saturate(.3) drop-shadow(0 0 14px #fff);transform:translateX(4px) rotate(-2deg)}
.ft.winner .ft-pic{box-shadow:0 0 46px rgba(255,210,80,.95);animation:ftWin .9s ease-in-out infinite alternate}
@keyframes ftWin{to{transform:translateY(-10px) scale(1.04)}}
.ft.loser{filter:grayscale(.85) brightness(.6)}
.dmg-layer{position:absolute;inset:0;pointer-events:none;z-index:5}
.dmg{position:absolute;transform:translateX(-50%);font-weight:900;font-size:1.9rem;color:#fff;text-shadow:0 0 6px #ff3b1f,0 3px 0 #7a1200,0 0 18px #ff3b1f;animation:dmgUp 1.05s ease-out forwards}
.dmg.crit{font-size:2.8rem;color:#ffe56a;text-shadow:0 0 10px #ff9d00,0 4px 0 #8a3b00,0 0 26px #ffb02e}
@keyframes dmgUp{0%{opacity:0;transform:translate(-50%,10px) scale(.5)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.25)}100%{opacity:0;transform:translate(-50%,-70px) scale(1)}}
.arena-log{margin-top:12px;min-height:84px;max-height:130px;overflow:hidden;padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.45);font-size:.84rem;line-height:1.5;color:#e9d6c8}
.arena-log div{animation:lgIn .35s ease}
.arena-log div:nth-child(n+4){opacity:.55}
.crit-t{color:#ffd24a}
@keyframes lgIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.arena-result{margin-top:12px;text-align:center;padding:14px;border-radius:16px;animation:resPop .6s cubic-bezier(.2,1.5,.4,1)}
.arena.won .arena-result{background:linear-gradient(180deg,rgba(255,200,60,.22),rgba(255,120,20,.12));border:1px solid rgba(255,200,80,.7)}
.arena.lost .arena-result{background:rgba(120,30,30,.3);border:1px solid rgba(255,90,70,.5)}
.res-title{font-size:2.3rem;font-weight:900;letter-spacing:.02em;background:linear-gradient(100deg,#ffb02e 20%,#fff3c4 45%,#ffb02e 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:liveShine 3s linear infinite}
.arena.lost .res-title{background:none;color:#ff8f7a;-webkit-text-fill-color:#ff8f7a}
.res-sub{font-weight:700;color:#ffe1a8}
@keyframes resPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media(max-width:520px){.fighters{grid-template-columns:1fr 38px 1fr}.vs-emblem{width:38px;height:38px;font-size:.8rem}.ft-name{font-size:.9rem}.dmg{font-size:1.5rem}}

/* ---------- the duel lobby ---------- */
.duel-home{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:860px){.duel-home{grid-template-columns:1.5fr 1fr}}
.duel-me{display:flex;gap:14px;align-items:center}
.duel-me-pic{flex:0 0 120px;aspect-ratio:465/590;border-radius:14px;overflow:hidden;border:2px solid rgba(255,176,46,.55);box-shadow:0 0 22px rgba(255,150,40,.3)}
.duel-me-pic img{display:block;width:100%;height:100%;object-fit:cover}
.duel-str{font-size:1.5rem;font-weight:900;color:#ffd27a}
.duel-random{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 0%,rgba(255,90,40,.25),transparent 70%),linear-gradient(160deg,rgba(60,20,12,.85),rgba(22,10,8,.8))}
.duel-vs-big{font-size:3.2rem;animation:vsPulse 1.8s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(255,150,40,.8))}
.duel-opps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.duel-opp{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:10px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--border)}
.duel-opp img{width:80px;aspect-ratio:465/590;object-fit:cover;border-radius:10px;border:1px solid rgba(255,176,46,.4)}

/* ---------- the boss raid ---------- */
.raid{background:radial-gradient(ellipse at 50% 0%,rgba(150,60,255,.22),transparent 65%),linear-gradient(160deg,rgba(40,16,48,.88),rgba(18,8,14,.82));border-color:rgba(176,92,255,.5)}
.raid-stage{text-align:center;padding:6px 0 2px}
.boss{font-size:6.2rem;line-height:1;display:inline-block;filter:drop-shadow(0 0 22px rgba(176,92,255,.85)) drop-shadow(0 12px 14px rgba(0,0,0,.6));animation:bossFloat 3.6s ease-in-out infinite}
@keyframes bossFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg) scale(1.04)}}
.boss.dead{filter:grayscale(1) brightness(.45);animation:none;transform:rotate(-16deg) scale(.9)}
.boss-name{font-weight:900;font-size:1.25rem;letter-spacing:.03em;margin:2px 0 8px;text-shadow:0 2px 10px rgba(176,92,255,.7)}
.boss-hp{position:relative;height:26px;border-radius:13px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);overflow:hidden;max-width:520px;margin:0 auto}
.boss-hp i{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(100deg,#d4263d 0 14px,#ff5a52 14px 28px);border-radius:13px;transition:width 1s;box-shadow:0 0 16px rgba(255,60,70,.7)}
.boss-hp b{position:absolute;inset:0;display:grid;place-items:center;font-size:.82rem;font-weight:900;text-shadow:0 1px 4px #000}
.raid-won .boss-hp i{background:#555;box-shadow:none}
.raid-top{display:grid;gap:5px}
.rt{display:grid;grid-template-columns:22px 1fr 90px auto;gap:8px;align-items:center;font-size:.85rem}
.rt .rk{font-weight:900;color:var(--accent2)}
.rt .rn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt .rbar{height:8px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.rt .rbar i{display:block;height:100%;background:linear-gradient(90deg,#8e44ff,#ff5ad8);border-radius:5px}

/* ---------- the clan war ---------- */
.war{background:radial-gradient(ellipse at 50% 0%,rgba(255,90,40,.2),transparent 65%),linear-gradient(160deg,rgba(46,20,13,.85),rgba(18,10,14,.82))}
.war-board{display:grid;grid-template-columns:1fr 48px 1fr;gap:8px;align-items:center;margin-top:10px}
.war-side{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:12px 6px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--border);transition:transform .3s,box-shadow .3s}
.war-side.lead{border-color:rgba(255,200,80,.7);box-shadow:0 0 24px rgba(255,170,40,.35);transform:scale(1.03)}
.war-badge{font-size:2.2rem}
.war-score{font-size:2rem;font-weight:900;color:#ffd27a;line-height:1.1}
.tug{position:relative;display:flex;height:16px;border-radius:9px;overflow:hidden;margin-top:12px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18)}
.tug i{display:block;height:100%;transition:width 1s}
.tug .tug-me{background:linear-gradient(90deg,#ffb02e,#ff7a1a);box-shadow:0 0 14px rgba(255,150,30,.7)}
.tug .tug-them{background:linear-gradient(90deg,#4a8cff,#7a5cff)}
.tug em{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:rgba(255,255,255,.6)}
@media(max-width:520px){.war-board{grid-template-columns:1fr 36px 1fr}.war-score{font-size:1.5rem}.boss{font-size:4.8rem}.rt{grid-template-columns:20px 1fr 60px auto}}
@media(prefers-reduced-motion:reduce){.boss,.vs-emblem,.duel-vs-big,.ft-pic,.res-title{animation:none!important}}

/* =========================================================
   THE 3D DUEL STAGE: real CSS 3D (perspective, translateZ, rotateY). Only transform and opacity move, so it stays smooth on phones.
   ========================================================= */
.hud{display:grid;grid-template-columns:1fr 46px 1fr;gap:8px;align-items:center;margin-bottom:6px}
.hud-p .hud-name{display:flex;justify-content:space-between;gap:6px;align-items:baseline;font-size:.9rem;text-shadow:0 2px 8px #000}
.hud-p .hud-name span{font-size:.78rem;color:#ffd27a;font-weight:700;white-space:nowrap}
.hud-p.them{text-align:right}
.hud .hp{max-width:none;margin:5px 0 1px}
.hud .vs-emblem{width:44px;height:44px;font-size:.9rem}
.stage3d{position:relative;height:clamp(260px,62vw,380px);perspective:900px;perspective-origin:50% 30%;overflow:hidden;border-radius:14px;touch-action:pan-y;cursor:grab;
  background:radial-gradient(ellipse at 50% 85%,rgba(255,130,30,.28),transparent 60%),linear-gradient(180deg,rgba(8,4,14,.35),rgba(30,12,8,.2))}
.stage3d:active{cursor:grabbing}
.cam{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--yaw,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);animation:camSway 7s ease-in-out infinite}
.cam.dragging{transition:none;animation:none}
.cam.zoom{animation:camPunch .6s ease-out}
@keyframes camSway{0%,100%{transform:rotateY(calc(var(--yaw,0deg) - 4deg))}50%{transform:rotateY(calc(var(--yaw,0deg) + 4deg))}}
@keyframes camPunch{0%{transform:rotateY(var(--yaw,0deg)) translateZ(0)}35%{transform:rotateY(calc(var(--yaw,0deg) + 3deg)) translateZ(110px)}100%{transform:rotateY(var(--yaw,0deg)) translateZ(0)}}
.scene3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(14deg)}
/* the floor: a glowing grid lying flat, lines rushing toward the camera */
.floor3d{position:absolute;left:-30%;right:-30%;bottom:-4%;height:70%;transform:rotateX(78deg);transform-origin:50% 100%;
  background:linear-gradient(rgba(255,150,50,.5) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,150,50,.5) 1.5px,transparent 1.5px),radial-gradient(ellipse at 50% 0%,rgba(255,120,30,.45),rgba(30,8,4,.9) 70%);
  background-size:44px 44px,44px 44px,100% 100%;animation:floorRun 1.6s linear infinite;box-shadow:inset 0 0 80px rgba(0,0,0,.8)}
@keyframes floorRun{to{background-position:0 44px,0 0,0 0}}
.glow-ring{position:absolute;left:50%;bottom:8%;width:70%;height:40px;margin-left:-35%;border-radius:50%;border:2px solid rgba(255,190,70,.55);box-shadow:0 0 30px rgba(255,150,40,.6),inset 0 0 24px rgba(255,150,40,.4);transform:rotateX(78deg) translateZ(2px);animation:ringPulse 2.4s ease-in-out infinite}
@keyframes ringPulse{50%{opacity:.5;transform:rotateX(78deg) scale(1.08)}}
.fighter{position:absolute;bottom:13%;width:38%;max-width:220px;transform-style:preserve-3d;will-change:transform;transition:transform .32s cubic-bezier(.3,1.4,.5,1),filter .3s}
.fighter.me{left:6%;transform:translateZ(0) rotateY(22deg)}
.fighter.them{right:6%;transform:translateZ(0) rotateY(-22deg)}
.card3d{position:relative;aspect-ratio:465/590;border-radius:16px;overflow:hidden;border:2px solid rgba(255,176,46,.7);box-shadow:0 0 30px rgba(255,150,40,.45),0 18px 28px rgba(0,0,0,.55);animation:ftIdle 3.2s ease-in-out infinite;backface-visibility:hidden}
.fighter.them .card3d{border-color:rgba(255,90,60,.75);box-shadow:0 0 30px rgba(255,70,50,.45),0 18px 28px rgba(0,0,0,.55);animation-delay:-1.6s}
.card3d img{display:block;width:100%;height:100%;object-fit:cover}
.card3d::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);animation:cardShine 4.5s ease-in-out infinite}
@keyframes cardShine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.shadow3d{position:absolute;left:6%;right:6%;bottom:-18px;height:26px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);transform:rotateX(78deg);transition:transform .3s}
.tag3d{position:absolute;left:50%;top:-22px;transform:translateX(-50%);font-size:.7rem;font-weight:800;letter-spacing:.05em;padding:1px 9px;border-radius:999px;background:rgba(0,0,0,.6);border:1px solid rgba(255,176,46,.5);color:#ffd27a;white-space:nowrap;max-width:140%;overflow:hidden;text-overflow:ellipsis}
.fighter.them .tag3d{border-color:rgba(255,90,60,.6);color:#ff9a86}
/* attack: lean back, then lunge at the camera with a spin; the target is knocked back */
.fighter.me.wind-r{transform:translate3d(-26px,0,-30px) rotateY(2deg)}
.fighter.them.wind-l{transform:translate3d(26px,0,-30px) rotateY(-2deg)}
.fighter.me.strike-r{transform:translate3d(46%,-6px,150px) rotateY(-30deg) scale(1.08);transition-duration:.2s}
.fighter.them.strike-l{transform:translate3d(-46%,-6px,150px) rotateY(30deg) scale(1.08);transition-duration:.2s}
.fighter.me.recoil-r,.fighter.me.recoil-l{transform:translate3d(-36px,0,-80px) rotateY(48deg);filter:brightness(1.9) saturate(.4)}
.fighter.them.recoil-l,.fighter.them.recoil-r{transform:translate3d(36px,0,-80px) rotateY(-48deg);filter:brightness(1.9) saturate(.4)}
.fighter.winner{transform:translate3d(0,-8px,70px) scale(1.1) rotateY(0deg);filter:drop-shadow(0 0 26px rgba(255,210,80,.95))}
.fighter.winner .card3d{animation:ftWin .9s ease-in-out infinite alternate}
.fighter.loser{transform:translate3d(0,14px,-90px) rotateY(0) scale(.92);filter:grayscale(.9) brightness(.55)}
.fx3d{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.ring3d{position:absolute;bottom:14%;width:120px;height:44px;margin-left:-60px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 20px #ffb02e,inset 0 0 14px #ffb02e;transform:rotateX(78deg) scale(.2);opacity:1;animation:ringOut .75s ease-out forwards}
.ring3d.big{border-color:#ffe56a;box-shadow:0 0 34px #ff9d00,inset 0 0 22px #ff9d00;animation-name:ringOutBig}
@keyframes ringOut{to{transform:rotateX(78deg) scale(2.6);opacity:0}}
@keyframes ringOutBig{to{transform:rotateX(78deg) scale(4.2);opacity:0}}
.spark3d{position:absolute;bottom:34%;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px #ff8a2a,0 0 4px #fff;animation:sparkFly .7s ease-out forwards}
.spark3d.gold{background:#ffe56a;box-shadow:0 0 14px #ff9d00}
@keyframes sparkFly{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(var(--dx),var(--dy),var(--dz));opacity:0}}
.flash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0;transition:opacity .12s}
.flash.on{opacity:.38}
.flash.crit{background:radial-gradient(circle,#fff6c8,#ff9d00);opacity:.55}
.stage-hint{text-align:center;font-size:.7rem;color:#bfa89a;margin-top:4px}
.stage3d .dmg-layer{position:absolute;inset:0}
.arena.punch{animation:arShake .4s}
@media(max-width:520px){.stage3d{height:clamp(240px,70vw,330px)}.fighter{width:40%}.hud-p .hud-name b{font-size:.8rem}.hud{grid-template-columns:1fr 36px 1fr}.hud .vs-emblem{width:34px;height:34px;font-size:.72rem}}
@media(prefers-reduced-motion:reduce){.cam,.floor3d,.glow-ring,.card3d,.card3d::after{animation:none!important}}