:root{
  --bg:#0b0c1a; --panel:#1a1d3c; --panel2:#242850; --ink:#eef0ff; --muted:#a6a9d6;
  --acc:#ffd23f; --acc2:#3fe0c5; --good:#37d67a; --bad:#ff5d6c; --line:#3a3f74;
  --rieser:#ff0000; --font:"Trebuchet MS","Segoe UI",system-ui,sans-serif; --theme:#3fe0c5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:#05060f;color:var(--ink);font-family:var(--font);display:flex;align-items:center;justify-content:center;min-height:100%;-webkit-user-select:none;user-select:none;overflow:hidden}
#app{position:relative;width:100%;max-width:940px;aspect-ratio:16/10;max-height:100vh;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 0 0 2px rgba(255,255,255,.04);background:#0b0c1a}
@media(max-aspect-ratio:16/10){#app{height:auto}}

/* ===== Bühne ===== */
#battle{position:absolute;inset:0}
.bg-layer{position:absolute;inset:0;overflow:hidden;z-index:0}
.bg-anim{position:absolute;inset:-4%;width:108%;height:108%;animation:bgSway 16s ease-in-out infinite alternate}
.bg-anim svg{width:100%;height:100%;display:block;object-fit:cover}
.bg-fallback{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 20%,color-mix(in srgb,var(--theme) 30%,#0b0c1a),#06070f 75%)}
@keyframes bgSway{from{transform:scale(1.04) translate(-1%,0)}to{transform:scale(1.08) translate(1%,-1.2%)}}
#vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 100% at 50% 40%,transparent 45%,rgba(0,0,0,.55) 100%);box-shadow:inset 0 0 120px rgba(0,0,0,.6)}
#vignette.flash-bad{animation:vigBad .4s ease}
@keyframes vigBad{30%{box-shadow:inset 0 0 200px 40px rgba(255,50,70,.85)}}
#vignette.flash-good{animation:vigGood .4s ease}
@keyframes vigGood{30%{box-shadow:inset 0 0 200px 20px rgba(63,224,197,.5)}}

#arena{position:absolute;top:0;left:0;right:0;height:58%;z-index:2}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}

.fighter{position:absolute;bottom:3%;width:26%;max-width:290px;aspect-ratio:1;z-index:4;filter:drop-shadow(0 18px 14px rgba(0,0,0,.5));transform-origin:50% 92%}
.fighter svg{width:100%;height:100%;overflow:visible}
.fighter .emoji-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:92px}
.fighter.hero{left:5%}
.fighter.enemy{right:4%}
.fighter.enemy.boss{width:40%;bottom:1%}
.prop-cart{position:absolute;bottom:1%;left:0;width:20%;max-width:200px;aspect-ratio:1;z-index:3;opacity:.98;filter:drop-shadow(0 12px 10px rgba(0,0,0,.5))}
.prop-cart svg{width:100%;height:100%}
.prop-cart:empty{display:none}

/* Idle-Atmen */
.hero{animation:idleHero 2.6s ease-in-out infinite}
.enemy{animation:idleEnemy 3.1s ease-in-out infinite}
@keyframes idleHero{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-5px) scaleY(1.02)}}
@keyframes idleEnemy{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-1.2deg)}}
.enemy.charging{filter:drop-shadow(0 18px 14px rgba(0,0,0,.5)) drop-shadow(0 0 14px var(--theme))}
.enemy.windup{animation:windup .5s ease-in-out infinite}
@keyframes windup{0%,100%{transform:translateY(-4px) scale(1.02)}50%{transform:translateY(-4px) scale(1.08) rotate(2deg)}}

/* Entrance */
.hero.enter{animation:enterL .6s cubic-bezier(.2,1.3,.4,1) both}
.enemy.enter{animation:enterR .7s cubic-bezier(.2,1.3,.4,1) both}
@keyframes enterL{0%{transform:translateX(-180%) rotate(-12deg)}70%{transform:translateX(8%)}100%{transform:none}}
@keyframes enterR{0%{transform:translateX(180%) rotate(12deg) scale(.9)}70%{transform:translateX(-8%)}100%{transform:none}}

/* Aktionen */
.hero.lunge{animation:lunge .5s ease both}
@keyframes lunge{0%{transform:none}45%{transform:translateX(60%) scale(1.1,.94)}100%{transform:none}}
.hero.recoil{animation:recoil .5s ease both}
@keyframes recoil{0%{transform:none}25%{transform:translateX(-16%) rotate(-6deg)}100%{transform:none}}
.hero.dodgeMove{animation:dodgeMove .5s ease both}
@keyframes dodgeMove{0%{transform:none}40%{transform:translateX(-30%) translateY(-8%) rotate(-8deg)}100%{transform:none}}
.enemy.hit{animation:enemyHit .45s ease both;filter:drop-shadow(0 18px 14px rgba(0,0,0,.5)) brightness(2.4) saturate(.4)}
@keyframes enemyHit{0%{transform:none}20%{transform:translateX(10%) rotate(4deg)}40%{transform:translateX(-6%) rotate(-3deg)}60%{transform:translateX(6%)}100%{transform:none}}
.enemy.lungeAtk{animation:enemyLunge .5s ease both}
@keyframes enemyLunge{0%{transform:none}45%{transform:translateX(-46%) rotate(-8deg) scale(1.1,.9)}100%{transform:none}}
.enemy.die{animation:enemyDie 1.1s ease-in forwards;pointer-events:none}
@keyframes enemyDie{0%{opacity:1}30%{transform:translateY(-10px) rotate(6deg) scale(1.1)}100%{transform:translateY(30px) rotate(720deg) scale(0);opacity:0;filter:brightness(3)}}

#battle.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97)}
#battle.shake.big{animation:shakeBig .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}30%,70%{transform:translate(4px,-2px)}50%{transform:translate(-5px,2px)}}
@keyframes shakeBig{10%,90%{transform:translate(-6px,3px) rotate(-.4deg)}30%,70%{transform:translate(10px,-5px) rotate(.5deg)}50%{transform:translate(-13px,6px) rotate(-.7deg)}}

/* Floats / Combo / Banner / Speech */
#floats{position:absolute;inset:0;z-index:7;pointer-events:none}
.dmg{position:absolute;font-weight:900;font-size:32px;text-shadow:0 3px 0 rgba(0,0,0,.5),0 0 14px currentColor;animation:dmgUp 1s ease-out forwards;transform:translate(-50%,0)}
.dmg.crit{font-size:46px}
@keyframes dmgUp{0%{opacity:0;transform:translate(-50%,10px) scale(.5)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-70px) scale(1)}}
.combo-tag{position:absolute;top:18%;left:50%;transform:translateX(-50%);z-index:8;font-weight:900;font-size:26px;color:var(--acc);text-shadow:0 3px 0 rgba(0,0,0,.5);opacity:0}
.combo-tag.show{animation:comboPop .8s ease}
@keyframes comboPop{0%{opacity:0;transform:translateX(-50%) scale(.4) rotate(-8deg)}30%{opacity:1;transform:translateX(-50%) scale(1.2) rotate(4deg)}100%{opacity:0;transform:translateX(-50%) scale(1)}}
.battle-banner{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);z-index:9;text-align:center;font-weight:900;font-size:clamp(28px,6vw,58px);color:#fff;opacity:0;text-shadow:0 4px 0 rgba(0,0,0,.6),0 0 28px var(--theme);pointer-events:none}
.battle-banner.show{animation:bannerIn 1.1s ease both}
@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}25%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
.speech{position:absolute;right:6%;top:6%;max-width:52%;z-index:8;background:rgba(10,11,26,.92);border:2px solid var(--theme);border-radius:14px;padding:9px 12px;font-size:13px;line-height:1.35;box-shadow:0 8px 20px rgba(0,0,0,.5);opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}
.speech.show{opacity:1;transform:none}
.speech::after{content:"";position:absolute;bottom:-9px;right:26px;border:9px solid transparent;border-top-color:var(--theme);border-bottom:0}

/* Threat / Timing / Dodge */
.threat{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:8;width:52%;text-align:center}
.threat-label{font-size:12px;font-weight:bold;color:#ffb3ba;text-shadow:0 1px 2px #000;margin-bottom:3px;letter-spacing:.5px}
.threat-bar{height:12px;background:#180a0d;border:2px solid #000;border-radius:8px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.threat-bar span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#ffd23f,#ff8a3f,#ff2d4a);box-shadow:0 0 10px rgba(255,60,80,.6)}
.threat.hot .threat-bar{animation:threatHot .3s linear infinite}
@keyframes threatHot{50%{border-color:#ff2d4a;box-shadow:0 0 14px 2px rgba(255,45,74,.7)}}

.timing{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:12;width:74%;text-align:center;background:rgba(6,7,16,.82);border:2px solid var(--acc);border-radius:16px;padding:14px 16px;box-shadow:0 16px 40px rgba(0,0,0,.6);animation:pop .2s ease}
.timing-title{font-weight:bold;font-size:15px;margin-bottom:10px}
.timing-track{position:relative;height:34px;border-radius:10px;overflow:hidden;display:flex;border:2px solid #000}
.tzone{height:100%}
.tz-weak{flex:2;background:#7a2230}.tz-good{flex:2;background:#b58a1e}.tz-perfect{flex:1.1;background:#1f9d54;box-shadow:0 0 16px rgba(55,214,122,.7) inset}
.tmarker{position:absolute;top:-3px;bottom:-3px;left:0%;width:5px;background:#fff;box-shadow:0 0 10px #fff,0 0 4px #fff;border-radius:3px}
.timing .btn{margin-top:12px;max-width:260px;margin-left:auto;margin-right:auto}

.dodge{position:absolute;inset:0;z-index:13;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(255,0,0,.16),rgba(6,7,16,.55))}
#dodge[hidden],#timing[hidden]{display:none!important}
.dodge-ring{position:absolute;width:210px;height:210px;border:7px solid var(--bad);border-radius:50%;animation:ringShrink .8s linear forwards;box-shadow:0 0 30px rgba(255,45,74,.7)}
@keyframes ringShrink{0%{transform:scale(2.4);opacity:.3}100%{transform:scale(.75);opacity:1}}
.dodge-btn{position:relative;background:linear-gradient(180deg,#ff5d6c,#c8202f);color:#fff;border:none;border-radius:16px;padding:16px 26px;font-size:22px;font-weight:900;font-family:var(--font);cursor:pointer;box-shadow:0 8px 0 #7d0f19,0 12px 24px rgba(0,0,0,.5);animation:dodgeThrob .4s ease-in-out infinite}
.dodge-btn small{display:block;font-size:12px;font-weight:normal;opacity:.9;margin-top:3px}
@keyframes dodgeThrob{50%{transform:scale(1.06)}}

/* Nameplates / HUD */
.nameplate{position:absolute;z-index:10;background:rgba(10,11,26,.82);border:2px solid var(--line);border-radius:12px;padding:8px 12px;backdrop-filter:blur(3px);box-shadow:0 8px 22px rgba(0,0,0,.4)}
.enemy-plate{top:14px;right:14px;min-width:220px;max-width:44%}
.hero-plate{top:14px;left:14px;min-width:238px;max-width:46%}
.np-name{font-weight:bold;font-size:14px;color:#fff;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enemy-plate .np-name{color:var(--theme)}
.hpbar{height:14px;background:#0f1020;border:2px solid #000;border-radius:8px;overflow:hidden;position:relative}
.hpbar span{position:absolute;inset:0;width:100%;background:linear-gradient(180deg,color-mix(in srgb,var(--theme) 85%,#fff),var(--theme));transition:width .35s cubic-bezier(.4,0,.2,1)}
.np-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.np-row2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;font-size:13px;color:var(--muted)}
#score{color:var(--acc);font-weight:bold}
#comboInfo{color:var(--acc2);font-weight:bold}
.hearts{font-size:17px;white-space:nowrap}
.hearts .dead{filter:grayscale(1) brightness(.6);opacity:.5}
.heart-pop{display:inline-block;animation:heartPop .5s ease}
@keyframes heartPop{40%{transform:scale(1.7)}}
.energy-row{display:flex;align-items:center;gap:8px;margin-top:7px}
.energy-bar{position:relative;flex:1;height:16px;background:#0f1020;border:2px solid #000;border-radius:8px;overflow:hidden}
.energy-bar span{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,#3fe0c5,#7cf1ff,#ffd23f);transition:width .3s}
.energy-bar small{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:1px;color:#001;font-weight:bold;mix-blend-mode:overlay}
.super-btn{background:linear-gradient(180deg,#ffe27a,#ff9d2f);color:#231a00;border:none;border-radius:9px;padding:5px 9px;font-size:12px;font-weight:bold;cursor:pointer;box-shadow:0 4px 0 #b96a00;animation:superGlow .7s ease-in-out infinite}
.super-btn small{font-size:9px;opacity:.8}
@keyframes superGlow{50%{box-shadow:0 4px 0 #b96a00,0 0 16px 3px rgba(255,210,63,.8)}}

/* Aktions-Panel: Icon-Karten */
.prompt-panel{position:absolute;left:0;right:0;bottom:0;z-index:11;padding:10px 12px 12px;height:42%;background:linear-gradient(180deg,rgba(10,11,26,.96),rgba(6,7,16,.99));border-top:2px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.5);overflow-y:auto}
.alarm{display:flex;align-items:center;gap:8px;background:rgba(255,0,0,.12);border:2px solid var(--bad);border-left-width:6px;border-radius:10px;padding:9px 12px;margin-bottom:9px;font-size:14px;line-height:1.35;animation:alarmIn .3s ease}
.alarm .abadge{flex-shrink:0;font-size:11px;font-weight:bold;color:#fff;background:var(--bad);padding:3px 9px;border-radius:999px;align-self:flex-start}
@keyframes alarmIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
.card-opt{display:flex;align-items:center;gap:10px;text-align:left;background:linear-gradient(180deg,#1b1f3d,#141833);border:2px solid var(--line);color:var(--ink);border-radius:12px;padding:10px 12px;font-size:13.5px;font-family:var(--font);cursor:pointer;line-height:1.3;transition:transform .08s,border-color .12s,background .12s;position:relative;overflow:hidden}
.card-opt:hover:not(:disabled){transform:translateY(-2px) scale(1.01);border-color:var(--acc);background:#20264a}
.card-opt:disabled{cursor:default}
.card-opt .cico{font-size:26px;flex-shrink:0;width:34px;text-align:center}
.card-opt.correct{border-color:var(--good)!important;background:rgba(55,214,122,.2)!important;box-shadow:0 0 0 2px rgba(55,214,122,.4)}
.card-opt.wrong{border-color:var(--bad)!important;background:rgba(255,93,108,.2)!important}

.fb-box{border:2px solid;border-radius:12px;padding:11px 13px;animation:alarmIn .3s ease}
.fb-good{background:rgba(55,214,122,.12);border-color:var(--good)}
.fb-bad{background:rgba(255,93,108,.12);border-color:var(--bad)}
.fb-title{font-weight:bold;font-size:15px;margin-bottom:4px}
.fb-good .fb-title{color:var(--good)}.fb-bad .fb-title{color:var(--bad)}
.fb-text{font-size:13px;line-height:1.4}
.fb-fact{margin-top:8px;background:#0f1020;border:1px dashed var(--line);border-radius:8px;padding:8px 10px;font-size:12px;color:#dfe2ff}

.btn{display:block;width:100%;margin-top:10px;background:linear-gradient(180deg,var(--acc),#f0b400);color:#231a00;border:none;border-radius:12px;padding:13px;font-size:15px;font-weight:bold;font-family:var(--font);cursor:pointer;box-shadow:0 6px 0 #b98a00,0 10px 18px rgba(0,0,0,.35);transition:transform .06s,box-shadow .06s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #b98a00}
.btn-big{font-size:18px;padding:15px}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.9);opacity:0}to{opacity:1}}

/* ===== Overlays ===== */
.overlay{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.overlay.show{display:flex}
.overlay .keyart{position:absolute;inset:0;z-index:0}
.overlay .keyart svg,.overlay .keyart img{width:100%;height:100%;object-fit:cover}
.overlay .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,7,16,.5),rgba(6,7,16,.9))}
.card{position:relative;z-index:2;width:100%;max-width:560px;text-align:center;animation:cardIn .4s ease}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.title-badge{display:inline-block;font-size:10px;letter-spacing:1.2px;color:#fff;background:var(--rieser);padding:4px 11px;border-radius:999px;font-weight:bold;margin-bottom:12px}
.game-title{font-size:clamp(26px,5.6vw,46px);line-height:1.04;margin:0 0 10px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.5),0 0 26px rgba(255,0,0,.35)}
.subtitle{color:var(--acc2);font-weight:bold;margin-bottom:14px;font-size:15px}
.blurb{font-size:14px;line-height:1.5;color:#e6e8ff;margin-bottom:6px}
.hint{margin-top:12px;font-size:12.5px;color:var(--muted)}
.map-wrap{position:relative;z-index:2;width:100%;max-width:520px;text-align:center;animation:cardIn .4s ease}
.map-title{font-size:24px;margin:0 0 4px;color:#fff}.map-sub{color:var(--muted);font-size:13px;margin-bottom:12px}
.floors{display:flex;flex-direction:column-reverse;gap:8px;max-height:60vh;overflow-y:auto;padding:4px}
.floor{display:flex;align-items:center;gap:12px;background:rgba(20,22,45,.9);border:2px solid var(--line);border-radius:12px;padding:10px 12px;text-align:left;transition:border-color .15s,transform .1s}
.floor .ficon{font-size:26px;width:40px;text-align:center}.floor .fmeta{flex:1;min-width:0}
.floor .fname{font-weight:bold;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.floor .fsub{font-size:12px;color:var(--muted)}.floor .fstat{font-size:20px}
.floor.cleared{opacity:.75;border-color:var(--good)}.floor.locked{opacity:.5}
.floor.current{border-color:var(--acc);box-shadow:0 0 0 2px rgba(255,210,63,.35),0 8px 22px rgba(0,0,0,.4);cursor:pointer;animation:floorPulse 1.6s ease-in-out infinite}
.floor.current:hover{transform:translateX(4px)}
@keyframes floorPulse{50%{box-shadow:0 0 0 4px rgba(255,210,63,.55),0 8px 26px rgba(0,0,0,.5)}}
.scorecard{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0}
.scorecard div{background:rgba(20,22,45,.9);border:2px solid var(--line);border-radius:11px;padding:10px}
.scorecard span{display:block;color:var(--muted);font-size:12px}.scorecard b{font-size:20px;color:var(--acc2)}
.rank{font-size:17px;margin:4px 0}.rank b{color:var(--acc)}
.end-title{font-size:42px;margin:6px 0;text-shadow:0 3px 0 rgba(0,0,0,.5)}
.end-title.win{color:var(--acc)}.end-title.lose{color:var(--bad)}
.disclaimer{margin-top:12px;font-size:11px;color:var(--muted);line-height:1.4}
.confetti-emoji{font-size:34px;letter-spacing:5px}