:root{
  --gold:#ffd36b;
  --gold2:#ffb13b;
  --sand:#f1c27d;
  --dark:#090604;
  --panel:rgba(33,20,8,.88);
  --panel2:rgba(8,5,3,.62);
  --text:#fff3cf;
  --bad:#ff8074;
  --good:#82ffb8;
  --blue:#88dcff;
  --purple:#d99aff;
  --bossGlow:#ffd36b;
  --bossBg1:rgba(255,190,80,.26);
  --bossBg2:rgba(110,65,20,.18);
}
*{box-sizing:border-box}
html,body{
  margin:0;width:1280px;height:720px;overflow:hidden;background:transparent;
  font-family:"Segoe UI",Arial,sans-serif;color:var(--text);
}
#overlay{
  position:relative;width:1280px;height:720px;opacity:0;transform:scale(.985);
  transition:opacity .25s ease,transform .25s ease;
}
#overlay.show{opacity:1;transform:scale(1)}
#sandBg,#fxBack,#fxFront,#screenFlash{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
#sandBg{
  background:
    radial-gradient(circle at 50% 120%,var(--bossBg1),rgba(0,0,0,0) 46%),
    radial-gradient(circle at 10% 20%,rgba(255,211,107,.12),rgba(0,0,0,0) 34%),
    radial-gradient(circle at 88% 18%,rgba(255,120,60,.09),rgba(0,0,0,0) 38%);
}
#sandBg:before,#sandBg:after{
  content:"";position:absolute;left:-15%;right:-15%;height:160px;bottom:-60px;
  background:radial-gradient(ellipse at center,var(--bossBg1),var(--bossBg2) 55%,rgba(0,0,0,0) 78%);
  filter:blur(10px);animation:sandDrift 8s linear infinite;
}
#sandBg:after{bottom:-30px;opacity:.55;animation-duration:12s;animation-direction:reverse}
@keyframes sandDrift{from{transform:translateX(-80px)}to{transform:translateX(80px)}}

#stage{
  position:absolute;left:48px;right:48px;top:28px;height:664px;border-radius:34px;overflow:hidden;
  border:3px solid rgba(255,211,107,.52);
  background:
    linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.55)),
    radial-gradient(circle at 22% 34%,rgba(255,211,107,.17),transparent 34%),
    linear-gradient(145deg,rgba(50,31,12,.88),rgba(10,7,4,.82));
  box-shadow:0 0 48px rgba(255,185,70,.22),inset 0 0 45px rgba(255,211,107,.07);
}
#stage.shake{animation:stageShake .42s ease}
@keyframes stageShake{
  0%{transform:translate(0,0)}20%{transform:translate(-10px,4px)}
  40%{transform:translate(10px,-4px)}60%{transform:translate(-6px,3px)}
  80%{transform:translate(6px,-2px)}100%{transform:translate(0,0)}
}
#bossArea{
  position:absolute;left:30px;top:28px;width:410px;height:320px;border-radius:30px;overflow:hidden;
  border:2px solid rgba(255,211,107,.32);
  background:
    radial-gradient(circle at 50% 82%,rgba(255,190,80,.28),transparent 50%),
    radial-gradient(circle at 50% 18%,rgba(255,211,107,.12),transparent 42%),
    rgba(0,0,0,.24);
}
#bossArea:after{
  content:"";position:absolute;left:-20%;right:-20%;bottom:-25px;height:110px;
  background:radial-gradient(ellipse at center,rgba(255,190,90,.38),rgba(70,42,10,.22) 58%,rgba(0,0,0,0) 78%);
  filter:blur(6px);
}
#worm{
  position:absolute;left:50%;bottom:22px;width:330px;height:230px;object-fit:contain;z-index:3;
  transform:translateX(-50%);
  filter:drop-shadow(0 0 24px var(--bossGlow));
}
#wormVideo,#wormFallback{
  position:absolute;left:50%;bottom:6px;width:360px;height:270px;object-fit:contain;z-index:3;
  transform:translateX(-50%);
  filter:drop-shadow(0 0 24px var(--bossGlow));
  background:transparent;
}
#wormFallback{display:none;}
#worm.idle{animation:wormIdle 3.2s ease-in-out infinite}
#worm.roar{animation:wormRoar .8s ease}
#worm.hit{animation:wormHit .42s ease}
#worm.cast{animation:wormCast 1s ease}
#worm.warn{animation:wormWarn .8s ease-in-out infinite alternate}
#worm.dodge{animation:wormDodge .48s ease}
#worm.dead{animation:wormDead 1.2s ease forwards}
@keyframes wormIdle{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
@keyframes wormRoar{0%,100%{transform:translateX(-50%) scale(1)}42%{transform:translateX(-50%) scale(1.12) translateY(-12px)}}
@keyframes wormHit{0%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 16px)) rotate(-3deg)}55%{transform:translateX(calc(-50% + 14px)) rotate(3deg)}100%{transform:translateX(-50%)}}
@keyframes wormCast{0%,100%{transform:translateX(-50%) scale(1)}45%{transform:translateX(-50%) scale(1.13) translateY(-10px)}}
@keyframes wormWarn{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.07) translateY(-8px)}}
@keyframes wormDodge{0%,100%{transform:translateX(-50%)}45%{transform:translateX(calc(-50% - 28px)) rotate(-4deg)}}
@keyframes wormDead{0%{transform:translateX(-50%) scale(1)}100%{transform:translateX(-50%) translateY(90px) scale(.8);opacity:.35}}

#bossHud{
  position:absolute;left:470px;right:28px;top:28px;height:184px;border-radius:28px;padding:18px 22px;
  border:2px solid rgba(255,211,107,.32);background:rgba(0,0,0,.24);
}
#title{
  font-size:48px;line-height:1;font-weight:1000;letter-spacing:2px;color:var(--gold);
  text-shadow:0 0 18px rgba(255,211,107,.45);
}
#subline{font-size:20px;font-weight:850;color:var(--sand);margin-top:6px}
#statusLine{position:absolute;right:22px;top:24px;width:360px;text-align:right;font-size:28px;font-weight:1000;color:#ffe2a3}
#hpWrap{position:absolute;left:22px;right:22px;bottom:30px;height:36px;border-radius:999px;overflow:hidden;background:rgba(0,0,0,.44);border:2px solid rgba(255,255,255,.16)}
#hpBar{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#b91e1e,#ff7b3a,#ffd36b);transition:width .45s cubic-bezier(.18,1,.3,1)}
#hpShine{position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent)}
#hpShine.run{animation:shine .65s ease}
@keyframes shine{0%{opacity:0;transform:translateX(-100%)}20%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
#hpText{position:absolute;left:26px;bottom:8px;font-size:17px;font-weight:900;color:#fff3cf}

#phaseRow{position:absolute;left:470px;right:28px;top:226px;height:58px;display:flex;gap:12px}
.phase{
  flex:1;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:1000;
  color:#ffe2a3;background:rgba(0,0,0,.25);border:1px solid rgba(255,211,107,.25);
}
.phase.active{color:var(--gold);border-color:rgba(255,211,107,.9);background:rgba(255,211,107,.15);box-shadow:0 0 18px rgba(255,211,107,.18)}
#warningBox{
  position:absolute;left:470px;right:28px;top:298px;height:58px;border-radius:20px;display:none;align-items:center;justify-content:center;
  border:2px solid rgba(255,128,116,.46);background:rgba(90,22,8,.34);font-size:22px;font-weight:1000;color:#ffd6bd;
}
#warningBox.show{display:flex;animation:warnPulse .62s ease-in-out infinite alternate}
@keyframes warnPulse{from{box-shadow:0 0 8px rgba(255,128,116,.2)}to{box-shadow:0 0 24px rgba(255,128,116,.5)}}

#combatLog{
  position:absolute;left:470px;right:28px;top:372px;height:136px;border-radius:24px;padding:14px 18px;
  border:2px solid rgba(255,211,107,.28);background:rgba(0,0,0,.25);overflow:hidden;
}
.panelTitle{font-size:19px;font-weight:1000;color:var(--gold);margin-bottom:8px}
#lineLast,#lineBossAttack,#lineTop{font-size:18px;font-weight:850;color:#ffe2a3;margin-top:5px}
#hitFeed{position:absolute;left:18px;right:18px;bottom:10px;display:flex;gap:8px;flex-wrap:wrap}
.hitItem{font-size:13px;font-weight:900;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.hitItem.block{color:var(--blue)}
.hitItem.dodge{color:var(--good)}
.hitItem.down{color:var(--bad)}

#partyPanel{
  position:absolute;left:30px;right:28px;bottom:26px;height:132px;border-radius:24px;padding:13px 16px;
  border:2px solid rgba(255,211,107,.28);background:rgba(0,0,0,.25);
}
#party{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.playerCard{
  min-width:0;border-radius:16px;padding:8px 10px;background:rgba(255,255,255,.045);border:1px solid rgba(255,211,107,.18);
}
.playerCard.down{border-color:rgba(255,128,116,.45);background:rgba(80,10,10,.18)}
.playerTop{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:1000;gap:6px}
.playerName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playerDmg{font-size:12px;color:#ffe2a3;opacity:.88}
.playerBar{height:11px;margin-top:6px;border-radius:999px;background:rgba(0,0,0,.44);overflow:hidden}
.playerHp{height:100%;border-radius:999px;background:linear-gradient(90deg,#ff8074,#ffd36b)}
.playerMeta{margin-top:5px;font-size:12px;font-weight:850;color:#ffe2a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{display:inline-block;margin-left:4px;padding:1px 5px;border-radius:999px;border:1px solid rgba(255,211,107,.28);background:rgba(255,211,107,.11)}

#topBox{
  position:absolute;left:30px;top:366px;width:410px;height:142px;border-radius:24px;padding:14px 18px;
  border:2px solid rgba(255,211,107,.28);background:rgba(0,0,0,.25);
}

.fxText{
  position:absolute;z-index:80;font-weight:1000;white-space:nowrap;opacity:0;transform:translate(-50%,0);
  text-shadow:0 0 14px rgba(0,0,0,.7);animation:floatText 1.2s ease-out forwards;
}
.fxText.damage{font-size:34px;color:#ffcf90}
.fxText.crit{font-size:46px;color:#ffea73}
.fxText.heal{font-size:36px;color:var(--good)}
.fxText.guard{font-size:30px;color:var(--blue)}
.fxText.dodge{font-size:30px;color:var(--good)}
.fxText.warn{font-size:34px;color:#ffd6bd}
.fxText.down{font-size:36px;color:var(--bad)}
.fxText.ulti{font-size:44px;color:var(--gold)}
@keyframes floatText{0%{opacity:0;transform:translate(-50%,18px) scale(.8)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-74px) scale(1.08)}}

.flash-gold{background:radial-gradient(circle at 50% 42%,rgba(255,220,120,.34),rgba(255,150,50,.09),transparent 62%)}
.flash-red{background:radial-gradient(circle at 50% 42%,rgba(255,100,75,.32),rgba(255,60,40,.08),transparent 62%)}
.flash-blue{background:radial-gradient(circle at 50% 42%,rgba(120,220,255,.28),rgba(50,140,255,.07),transparent 62%)}
.flash-green{background:radial-gradient(circle at 50% 42%,rgba(130,255,184,.28),rgba(60,220,130,.07),transparent 62%)}
#screenFlash.run{animation:flashRun .62s ease forwards}
@keyframes flashRun{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

.slash,.ring,.dust,.spiral,.tail,.shield,.healFx,.bite,.sandBeam{position:absolute;z-index:55;pointer-events:none}
.slash{left:250px;top:168px;width:380px;height:16px;border-radius:999px;opacity:0;transform:rotate(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,245,210,.98),rgba(255,155,55,.92),transparent);
  box-shadow:0 0 30px rgba(255,180,80,.5);animation:slash .48s ease-out forwards}
.slash.heavy{width:520px;height:24px;top:158px;left:214px;transform:rotate(-10deg)}
.slash.crit{width:570px;height:26px;top:150px;left:198px;background:linear-gradient(90deg,transparent,#fffed0,#ffea49,transparent)}
@keyframes slash{0%{opacity:0;transform:scale(.6) rotate(-28deg)}18%{opacity:1}100%{opacity:0;transform:scale(1.2) rotate(-4deg)}}

.ring{left:235px;top:165px;width:80px;height:80px;border-radius:999px;border:5px solid rgba(255,211,107,.92);opacity:0;transform:translate(-50%,-50%) scale(.2);animation:ring .75s ease-out forwards}
.ring.storm{width:120px;height:120px;border-width:7px;border-color:rgba(255,230,120,.98)}
@keyframes ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(6)}}

.dust{left:235px;top:190px;width:150px;height:150px;border-radius:999px;opacity:0;transform:translate(-50%,-50%) scale(.3);
  background:radial-gradient(circle,rgba(255,220,120,.42),rgba(255,180,80,.18) 45%,transparent 72%);
  animation:dust .85s ease-out forwards}
@keyframes dust{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(3.2)}}

.spiral{left:235px;top:170px;width:250px;height:250px;border-radius:999px;border:6px solid rgba(255,211,107,.18);border-top-color:rgba(255,230,120,.95);border-right-color:rgba(255,170,70,.65);opacity:0;transform:translate(-50%,-50%) scale(.25);animation:spiral 1.15s ease-out forwards}
@keyframes spiral{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0deg)}14%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(2.35) rotate(430deg)}}

.tail{left:70px;top:105px;width:620px;height:250px;border-top:13px solid rgba(255,215,120,.94);border-radius:50%;opacity:0;filter:drop-shadow(0 0 16px rgba(255,211,107,.5));animation:tail .75s ease-out forwards}
@keyframes tail{0%{opacity:0;transform:rotate(-22deg) scale(.7)}18%{opacity:1}100%{opacity:0;transform:rotate(22deg) scale(1.14)}}

.shield{left:235px;top:170px;width:130px;height:130px;border-radius:999px;border:5px solid rgba(135,220,255,.95);opacity:0;transform:translate(-50%,-50%) scale(.35);box-shadow:0 0 28px rgba(135,220,255,.38);animation:shield .85s ease-out forwards}
.shield.green{border-color:rgba(130,255,184,.95);box-shadow:0 0 28px rgba(130,255,184,.38)}
@keyframes shield{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}

.healFx{left:235px;top:170px;width:180px;height:180px;border-radius:999px;opacity:0;transform:translate(-50%,-50%) scale(.35);background:radial-gradient(circle,rgba(130,255,184,.38),rgba(130,255,184,.08) 48%,transparent 74%);animation:healFx .95s ease-out forwards}
@keyframes healFx{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(2.7)}}

.bite{left:215px;top:145px;width:220px;height:120px;opacity:0;animation:bite .52s ease-out forwards}
.bite:before,.bite:after{content:"";position:absolute;left:0;right:0;height:46px;border-radius:80px;border:6px solid rgba(255,235,170,.95);box-shadow:0 0 22px rgba(255,190,80,.58)}
.bite:before{top:0;border-bottom:0;transform:rotate(-7deg)}
.bite:after{bottom:0;border-top:0;transform:rotate(7deg)}
@keyframes bite{0%{opacity:0;transform:scale(1.35)}20%{opacity:1}100%{opacity:0;transform:scale(.75)}}

.sandBeam{left:250px;top:145px;width:720px;height:80px;border-radius:999px;opacity:0;transform-origin:left center;background:linear-gradient(90deg,rgba(255,235,130,.9),rgba(255,180,60,.55),transparent);filter:blur(.3px);animation:beam .85s ease-out forwards}
@keyframes beam{0%{opacity:0;transform:scaleX(.1)}22%{opacity:1}100%{opacity:0;transform:scaleX(1.1)}}

.rock{position:absolute;z-index:58;width:18px;height:18px;border-radius:5px;background:linear-gradient(145deg,#c68b46,#714018);opacity:0;animation:rock 1.05s linear forwards}
@keyframes rock{0%{opacity:0;transform:translateY(-60px) rotate(0) scale(.6)}12%{opacity:1}100%{opacity:0;transform:translateY(430px) rotate(520deg) scale(1.1)}}

.particle{position:absolute;z-index:54;width:5px;height:5px;border-radius:50%;background:rgba(255,211,107,.85);box-shadow:0 0 8px rgba(255,211,107,.8);opacity:0;animation:particle 1.1s ease-out forwards}
@keyframes particle{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}

#ws{display:none!important}


/* Multi-Boss Zusatz: Overlay nimmt Farben aus overlay.js entgegen */
html[data-boss="lavawurm"] #stage{
  background:
    linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.58)),
    radial-gradient(circle at 22% 34%,rgba(255,96,24,.20),transparent 34%),
    linear-gradient(145deg,rgba(65,19,7,.90),rgba(10,4,3,.86));
}
html[data-boss="eiswurm"] #stage{
  background:
    linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.55)),
    radial-gradient(circle at 22% 34%,rgba(120,220,255,.20),transparent 34%),
    linear-gradient(145deg,rgba(10,42,70,.88),rgba(3,7,12,.86));
}
html[data-boss="giftwurm"] #stage{
  background:
    linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.58)),
    radial-gradient(circle at 22% 34%,rgba(100,255,95,.18),transparent 34%),
    linear-gradient(145deg,rgba(18,64,22,.88),rgba(4,10,4,.86));
}
html[data-boss="schattenwurm"] #stage{
  background:
    linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.64)),
    radial-gradient(circle at 22% 34%,rgba(180,100,255,.18),transparent 34%),
    linear-gradient(145deg,rgba(32,16,55,.90),rgba(3,2,8,.88));
}
html[data-boss="kristallwurm"] #stage{
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.54)),
    radial-gradient(circle at 22% 34%,rgba(150,240,255,.20),transparent 34%),
    linear-gradient(145deg,rgba(22,54,88,.88),rgba(3,8,14,.86));
}
html[data-boss="goldwurm"] #stage{
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.55)),
    radial-gradient(circle at 22% 34%,rgba(255,228,90,.22),transparent 34%),
    linear-gradient(145deg,rgba(78,52,11,.88),rgba(10,7,3,.86));
}

html[data-boss] #title{
  color:var(--bossGlow);
  text-shadow:0 0 18px var(--bossGlow);
}
html[data-boss] #bossArea{
  background:
    radial-gradient(circle at 50% 82%,var(--bossBg1),transparent 50%),
    radial-gradient(circle at 50% 18%,rgba(255,211,107,.12),transparent 42%),
    rgba(0,0,0,.24);
}