:root{
  --gold:#d3a65b;--gold2:#f1d594;--text:#f7f0e4;--muted:#c7bcaa;
  --line:rgba(227,194,123,.28);--panel:rgba(8,10,14,.86);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030406;color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body{touch-action:none}
button{font:inherit}
#app{height:100dvh;display:grid;place-items:center;background:radial-gradient(circle at 50% 10%,#223141,#07090d 45%,#020305)}
.game-shell{
  --scene:url("assets/bg-arkopolis-7r.webp?v=1.4.35");
  position:relative;width:min(100vw,1500px);height:min(100dvh,900px);min-height:560px;overflow:hidden;
  background-image:var(--scene);background-position:center;background-size:cover;
  border:1px solid rgba(216,181,111,.17);box-shadow:0 20px 90px rgba(0,0,0,.6);
  transition:background-image .55s ease, box-shadow .25s ease;
}
.game-shell.level-1{--scene:url("assets/bg-arkopolis-7r.webp?v=1.4.35")}
.game-shell.level-2{--scene:url("assets/bg-weinberg.webp?v=1.4.16")}
.game-shell.level-3{--scene:url("assets/bg-greywake.webp?v=1.4.16")}
.game-shell.level-4{--scene:url("assets/bg-emberhollow.webp?v=1.4.16")}
.game-shell.level-5{--scene:url("assets/bg-kamien.webp?v=1.4.16")}
.game-shell.level-6{--scene:url("assets/bg-skydocks.webp?v=1.4.16")}
.game-shell.level-7{--scene:url("assets/bg-college.webp?v=1.4.16")}
.game-shell.level-8{--scene:url("assets/bg-jahrmarkt.webp?v=1.4.16")}
.game-shell.level-9{--scene:url("assets/bg-plattform4.webp?v=1.4.16")}
.game-shell.level-10{--scene:url("assets/bg-college-night.webp?v=1.4.16")}
.game-shell.hexing{box-shadow:0 20px 90px rgba(130,60,170,.34)}

.game-shell:fullscreen,.game-shell:-webkit-full-screen{width:100vw!important;height:100dvh!important;max-width:none!important;min-height:0!important;border:0!important;box-shadow:none!important}
.game-shell:fullscreen .playfield,.game-shell:-webkit-full-screen .playfield{border-radius:0}

/* Mobile-Fokus: wichtige Motive nicht stumpf aus der Mitte schneiden */
@media (orientation:portrait) and (max-width:800px){
  .game-shell.level-2{background-position:74% center}
  .game-shell.level-5{background-position:27% center}
  .game-shell.level-6{background-position:78% center}
  .game-shell.level-8{background-position:58% center}
  .game-shell.level-10{background-position:50% center}
}

/* GEISTERNACHT – echtes 55-Sekunden-Spezialevent am Hermetic College */
.game-shell.level-10{box-shadow:0 20px 105px rgba(17,31,75,.42),0 0 70px rgba(89,48,155,.16)}
.level-10 .scene-shade{background:linear-gradient(180deg,rgba(0,3,13,.12),rgba(3,7,19,.27) 52%,rgba(0,2,10,.48))}
.level-10 .weather-layer{opacity:1;background:
  radial-gradient(circle at 16% 14%,rgba(220,235,255,.75) 0 1px,transparent 1.8px),
  radial-gradient(circle at 64% 9%,rgba(207,225,255,.68) 0 1px,transparent 1.9px),
  radial-gradient(circle at 84% 23%,rgba(255,230,189,.62) 0 1px,transparent 1.9px);
  background-size:180px 150px,240px 190px,210px 170px;animation:ghostStars 3.8s ease-in-out infinite alternate}
.level-10 .sera{filter:drop-shadow(0 0 10px rgba(137,187,255,.55)) drop-shadow(0 0 20px rgba(144,84,255,.32)) drop-shadow(0 8px 10px rgba(0,0,0,.68))}
.level-10 .ellie{filter:drop-shadow(0 8px 12px rgba(0,0,0,.68)) drop-shadow(0 0 14px rgba(131,77,229,.22))}
.level-10 .hud{background:linear-gradient(180deg,rgba(1,4,13,.96),rgba(2,6,18,.79));border-bottom-color:rgba(145,166,235,.22)}
@keyframes ghostStars{to{opacity:.72;filter:brightness(1.28)}}

.game-shell.night-event .rausch-wrap{opacity:.12;filter:saturate(.45)}
.game-shell.night-event .ellie{opacity:.46}
.night-event-hud{position:absolute;z-index:96;top:86px;right:12px;display:flex;align-items:baseline;gap:7px;padding:8px 12px;border:1px solid rgba(190,166,255,.34);border-radius:14px;background:linear-gradient(135deg,rgba(9,8,26,.88),rgba(48,27,82,.82));box-shadow:0 8px 24px rgba(0,0,0,.34),0 0 20px rgba(133,83,255,.18);backdrop-filter:blur(7px);opacity:0;transform:translateY(-8px);pointer-events:none;transition:.22s}
.night-event-hud.show{opacity:1;transform:translateY(0)}
.night-event-hud span{font-size:.7rem;letter-spacing:.11em;font-weight:950;color:#ded2ff}
.night-event-hud strong{font-size:1.35rem;color:#fff3c0;text-shadow:0 0 12px rgba(255,226,137,.42)}
.night-event-hud b{font-size:.58rem;color:#a99fc0;letter-spacing:.1em}
.night-event-layer{position:absolute;z-index:22;inset:0;pointer-events:none;overflow:hidden}
.night-object{position:absolute;left:0;top:0;will-change:transform;pointer-events:none;user-select:none}

.night-ghost{filter:drop-shadow(0 0 10px rgba(184,207,255,.48)) drop-shadow(0 0 24px rgba(144,87,255,.36));opacity:.86}
.ghost-shape{position:absolute;inset:0;border:1px solid rgba(224,235,255,.46);border-radius:48% 48% 35% 35%;background:radial-gradient(circle at 42% 32%,rgba(255,255,255,.88),rgba(192,213,255,.58) 34%,rgba(141,91,218,.28) 72%,rgba(75,37,116,.10));clip-path:polygon(8% 5%,92% 5%,96% 72%,84% 91%,72% 80%,59% 96%,45% 82%,30% 96%,18% 80%,5% 91%,4% 70%);backdrop-filter:blur(1px);animation:ghostPulse 1.2s ease-in-out infinite alternate}
.ghost-shape::before{content:"";position:absolute;left:28%;top:32%;width:8px;height:12px;border-radius:50%;background:#332247;box-shadow:27px 0 0 #332247,14px 20px 0 -2px rgba(64,36,83,.8)}
.ghost-shape::after{content:"✦";position:absolute;right:-8px;top:-10px;color:#d8bbff;font-size:14px;text-shadow:0 0 8px #b679ff}
@keyframes ghostPulse{to{opacity:.64;filter:brightness(1.18)}}

.night-fire{line-height:1;filter:drop-shadow(0 0 8px rgba(255,156,55,.95)) drop-shadow(0 0 20px rgba(255,74,32,.58));animation:firePulse .34s ease-in-out infinite alternate}
@keyframes firePulse{to{filter:drop-shadow(0 0 12px rgba(255,207,88,1)) drop-shadow(0 0 28px rgba(255,70,25,.72));opacity:.84}}
.night-broom{height:auto;filter:drop-shadow(0 7px 9px rgba(0,0,0,.52)) drop-shadow(0 0 9px rgba(184,117,255,.25))}
.night-dragon{height:auto;opacity:.25;filter:brightness(.34) saturate(.7) hue-rotate(205deg) drop-shadow(0 0 14px rgba(134,120,255,.38));z-index:-1}
.night-owl{height:auto;filter:drop-shadow(0 12px 16px rgba(0,0,0,.72)) drop-shadow(0 0 18px rgba(145,83,255,.40));z-index:4}
.night-gold{filter:drop-shadow(0 0 15px rgba(255,230,101,1)) drop-shadow(0 0 32px rgba(255,165,56,.62));z-index:5}
.game-shell.night-hex-hit .playfield::after{content:"✦ ᚱ ✧ ᚾ ✦";position:absolute;z-index:105;inset:18% 24%;display:grid;place-items:center;border:2px solid rgba(208,138,255,.48);border-radius:50%;color:#e9c7ff;font-size:clamp(28px,7vw,72px);letter-spacing:.2em;text-shadow:0 0 14px #a64cff,0 0 30px #6b2bbb;box-shadow:0 0 30px rgba(152,71,255,.35),inset 0 0 34px rgba(126,46,220,.26);pointer-events:none;animation:hexHit .55s ease-out forwards}
.game-shell.night-fire-hit .playfield::after{content:"";position:absolute;z-index:105;inset:0;background:radial-gradient(circle at 50% 56%,rgba(255,153,55,.20),rgba(255,55,20,.14) 30%,transparent 62%);pointer-events:none;animation:fireHit .5s ease-out forwards}
@keyframes hexHit{0%{opacity:0;transform:scale(.6) rotate(-16deg)}35%{opacity:1}100%{opacity:0;transform:scale(1.18) rotate(8deg)}}
@keyframes fireHit{0%{opacity:0}35%{opacity:1}100%{opacity:0}}

.scene-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(2,4,7,.10),rgba(3,5,8,.30) 58%,rgba(2,3,5,.56));transition:background .25s ease}
.level-3 .scene-shade{background:linear-gradient(180deg,rgba(22,32,43,.34),rgba(5,9,14,.60))}
.level-4 .scene-shade{background:linear-gradient(180deg,rgba(5,3,3,.30),rgba(2,1,1,.64))}
.level-5 .scene-shade{background:linear-gradient(180deg,rgba(5,14,20,.08),rgba(4,8,12,.30))}
.game-shell.hexing .scene-shade{background:linear-gradient(180deg,rgba(37,16,55,.14),rgba(62,21,92,.18) 48%,rgba(10,5,22,.48))}
.weather-layer{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s}
.level-3 .weather-layer{opacity:1;background:linear-gradient(115deg,transparent 38%,rgba(220,238,255,.06) 43%,transparent 48%);animation:wind 2.4s linear infinite}
.level-4 .weather-layer{opacity:1;background:radial-gradient(circle at 30% 70%,rgba(255,91,34,.09),transparent 25%),radial-gradient(circle at 70% 30%,rgba(255,161,57,.06),transparent 20%)}
@keyframes wind{to{transform:translateX(-12%)}}

.hud{position:absolute;z-index:50;left:0;right:0;top:0;min-height:78px;padding:10px 15px;display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,rgba(4,6,9,.95),rgba(4,6,9,.68));border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.brand{display:flex;flex-direction:column;min-width:205px}
.kicker{font-size:.64rem;letter-spacing:.23em;color:var(--gold);font-weight:900}
.brand strong{font-family:Georgia,"Times New Roman",serif;color:#f3dca9;font-size:1.22rem}
.level-box{min-width:152px;border-left:1px solid rgba(218,181,109,.22);padding-left:15px}
.level-box span{display:block;font-size:1.12rem;letter-spacing:.12em;color:#ffe08a;font-weight:1000;text-shadow:0 0 14px rgba(241,204,114,.48)}
.level-box strong{display:block;color:#f2d496;font-size:.78rem;margin-top:2px}
.hud-stats{margin-left:auto;display:flex;gap:7px}
.stat{min-width:82px;padding:7px 10px;text-align:center;border:1px solid rgba(226,190,116,.17);border-radius:12px;background:rgba(4,5,8,.42)}
.stat span{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.11em;color:#b9b0a2}
.stat strong{display:block;font-size:1.05rem;color:#fff4dc}
.stat.high strong{color:#f1cc72}
.stat.lives strong{color:#ffd0d9}
.hud-actions{display:flex;gap:7px}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(5,6,9,.7);color:#fff;cursor:pointer}
.icon-btn:hover{filter:brightness(1.08)}

.rausch-wrap{position:absolute;z-index:90;top:86px;right:12px;left:auto;transform:none;width:min(260px,34vw);pointer-events:none}
.rausch-label{display:flex;justify-content:space-between;align-items:center;gap:8px;white-space:nowrap;font-size:.94rem;letter-spacing:.11em;text-transform:uppercase;text-shadow:0 2px 5px #000;color:#f1e0b7;font-weight:900}
.rausch-label b{font-size:1.02rem;color:#fff4da;white-space:nowrap;flex:0 0 auto}
.rausch-bar{margin-top:6px;height:13px;border:1px solid rgba(232,195,116,.30);border-radius:999px;overflow:hidden;background:rgba(0,0,0,.45)}
.rausch-bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,#9a5bc4,#e7bb54,#fff0a5);box-shadow:0 0 12px #e9bd5d;transition:width .12s}
.game-shell.rausch .rausch-bar i{animation:rauschPulse .35s ease-in-out infinite alternate}
.game-shell.rausch .sera{filter:drop-shadow(0 0 10px #ffd767) drop-shadow(0 0 22px rgba(255,173,45,.8))}
@keyframes rauschPulse{to{filter:brightness(1.35)}}

.playfield{position:absolute;z-index:5;inset:78px 0 0;overflow:hidden;user-select:none}
.ellie{
  position:absolute;z-index:13;height:min(57%,520px);max-width:31%;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.40));transition:opacity .20s ease,filter .20s ease,left .22s,right .22s,transform .16s;
  transform-origin:50% 60%;will-change:transform,left,right;
}
.ellie.side-right{right:2%;bottom:-2%}
.ellie.side-left{left:2%;bottom:-2%;transform:scaleX(-1)}
.ellie.throw.side-right{transform:rotate(-2deg) translateX(-5px)}
.ellie.throw.side-left{transform:scaleX(-1) rotate(2deg) translateX(-5px)}

.ellie-spell,
.spell-wave{
  position:absolute;pointer-events:none;opacity:0;transition:opacity .25s ease, transform .35s ease;will-change:transform,opacity
}
.spell-wave{display:none !important}
.spell-wave.show{opacity:.35;transform:translate(-50%,-50%) scale(1) rotate(0deg)}
.ellie-spell{z-index:14;height:min(56%,520px);max-width:34%;bottom:1%;filter:drop-shadow(0 10px 20px rgba(0,0,0,.52))}
.ellie-spell.side-left{left:-2%;transform:translateY(14px) scale(.92)}
.ellie-spell.side-right{right:-2%;transform:translateY(14px) scale(.92)}
.ellie-spell.show{opacity:.8}
.ellie-spell.side-left.show,.ellie-spell.side-right.show{transform:translateY(0) scale(1)}

.sera{
  position:absolute;z-index:18;width:clamp(96px,10.2vw,142px);height:auto;left:35%;top:59%;
  transform:translate3d(-50%,-50%,0);pointer-events:none;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.52));will-change:left,top,transform;transition:filter .15s
}
.sera.snap{animation:snap .13s ease}
.sera.annoyed{animation:annoyed .42s ease}
@keyframes snap{50%{transform:translate3d(-50%,-50%,0) scale(1.11) rotate(-3deg)}}
@keyframes annoyed{50%{transform:translate3d(-50%,-50%,0) translateY(6px) rotate(2deg)}}

.item{position:absolute;z-index:16;will-change:transform;pointer-events:none}
.grape-bunch{width:41px;height:49px;position:relative;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.grape-bunch i{position:absolute;width:16px;height:16px;border-radius:50%;box-shadow:inset -3px -3px 5px rgba(0,0,0,.2),inset 2px 2px 4px rgba(255,255,255,.25)}
.grape-bunch i:nth-child(1){left:13px;top:10px}.grape-bunch i:nth-child(2){left:5px;top:19px}.grape-bunch i:nth-child(3){left:21px;top:19px}.grape-bunch i:nth-child(4){left:12px;top:29px}.grape-bunch i:nth-child(5){left:20px;top:36px;width:12px;height:12px}
.grape-bunch::before{content:"";position:absolute;left:21px;top:0;width:3px;height:14px;background:#5b7e36;transform:rotate(20deg);border-radius:2px}
.item.red .grape-bunch i{background:radial-gradient(circle at 35% 30%,#ef8e88,#9c2938 54%,#5d1420)}
.item.green .grape-bunch i{background:radial-gradient(circle at 35% 30%,#e7f09a,#91af43 54%,#536a2b)}
.item.gold .grape-bunch{filter:drop-shadow(0 0 10px rgba(255,222,119,.95))}
.item.gold .grape-bunch i{background:radial-gradient(circle at 35% 30%,#fffbd1,#e9bc42 50%,#926218)}
.item.rotten .grape-bunch{filter:drop-shadow(0 0 10px rgba(163,255,110,.22))}
.item.rotten .grape-bunch i{background:radial-gradient(circle at 35% 30%,#ceb7d8,#5f4968 48%,#2b1d31)}
.item.rotten .grape-bunch::after{content:"☣";position:absolute;right:-7px;top:8px;font-size:16px;color:#b7ff5d;text-shadow:0 0 8px rgba(183,255,93,.7)}
.junk{font-size:39px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.5))}
.face-grape{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(226,91,236,.55))}
.cookie{font-size:39px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.bonus-gull{width:clamp(98px,11vw,132px);height:auto;object-fit:contain;filter:drop-shadow(0 8px 9px rgba(0,0,0,.5))}

.message{position:absolute;z-index:65;left:50%;top:12%;transform:translate(-50%,-8px);opacity:0;padding:10px 16px;border:1px solid rgba(231,194,114,.36);border-radius:999px;background:rgba(5,6,9,.84);backdrop-filter:blur(7px);color:#f9e7b6;font-weight:850;white-space:nowrap;transition:.18s;pointer-events:none}
.message.show{opacity:1;transform:translate(-50%,0)}
.float-layer{position:absolute;inset:0;z-index:70;pointer-events:none;overflow:visible}
.float-score{position:absolute;left:0;top:0;transform:translate(-50%,0) scale(.92);font-weight:950;font-size:clamp(1.24rem,1vw + 1rem,1.85rem);letter-spacing:.02em;color:#fff5bd;text-shadow:0 3px 8px rgba(0,0,0,.8),0 0 16px rgba(255,220,132,.35);filter:drop-shadow(0 0 8px rgba(255,198,110,.28));animation:floatBurst 1.08s cubic-bezier(.2,.8,.2,1) forwards;white-space:nowrap;will-change:transform,opacity}.float-score::before,.float-score::after{content:'✦';position:absolute;top:50%;font-size:.72em;opacity:.85;transform:translateY(-50%);animation:orbitSpark .95s ease-out forwards}.float-score::before{left:-14px}.float-score::after{right:-14px;animation-delay:.05s}.float-score.bad{color:#ff9f97;text-shadow:0 3px 10px rgba(0,0,0,.85),0 0 16px rgba(255,90,90,.35);filter:drop-shadow(0 0 10px rgba(255,90,90,.38))}.float-score.special{color:#ffb6ff;text-shadow:0 3px 10px rgba(0,0,0,.85),0 0 16px rgba(241,109,255,.42);filter:drop-shadow(0 0 12px rgba(241,109,255,.42))}.float-score.lifeplus{font-size:clamp(1.65rem,1.45vw + 1rem,2.45rem);color:#ffe886;filter:drop-shadow(0 0 12px rgba(255,228,109,.5)) drop-shadow(0 0 18px rgba(255,127,221,.35))}.float-score.lifeminus{font-size:clamp(1.65rem,1.45vw + 1rem,2.35rem);color:#ff8f8f;filter:drop-shadow(0 0 12px rgba(255,114,114,.58))}.float-score.big{font-size:clamp(1.42rem,1.2vw + 1rem,2.1rem)}@keyframes floatBurst{0%{transform:translate(-50%,0) scale(.82) rotate(0deg);opacity:0}12%{transform:translate(calc(-50% + var(--dx,0px)*.18),-10px) scale(1.12) rotate(calc(var(--rot,0deg)*.4));opacity:1}40%{transform:translate(calc(-50% + var(--dx,0px)*.62),-38px) scale(1.2) rotate(var(--rot,0deg));opacity:1}100%{transform:translate(calc(-50% + var(--dx,0px)),-88px) scale(1.32) rotate(calc(var(--rot,0deg)*1.25));opacity:0}}@keyframes orbitSpark{0%{opacity:0;transform:translateY(-50%) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translateY(calc(-50% - 18px)) scale(1.25)}}

.level-splash{position:absolute;z-index:80;left:50%;bottom:8px;top:auto;transform:translate(-50%,18px) scale(.98);min-width:230px;max-width:min(72vw,390px);padding:9px 20px 13px;text-align:center;border-radius:100px 100px 22px 22px / 62px 62px 22px 22px;border:1px solid rgba(255,226,153,.46);background:linear-gradient(180deg,rgba(32,19,58,.95) 0%,rgba(87,42,116,.9) 40%,rgba(18,14,30,.88) 100%);box-shadow:0 12px 28px rgba(0,0,0,.32),0 0 24px rgba(240,182,255,.15),inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.28s;pointer-events:none;overflow:hidden}
.level-splash.show{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.level-splash::before{content:"";position:absolute;left:8%;right:8%;top:0;height:60%;background:radial-gradient(ellipse at 50% 0%,rgba(255,245,204,.34),rgba(158,92,255,.11) 52%,transparent 72%);pointer-events:none}
.level-splash::after{content:"";position:absolute;left:14%;right:14%;bottom:5px;height:18px;border-radius:999px;background:radial-gradient(ellipse at 50% 50%,rgba(133,214,255,.28),rgba(205,118,255,.08) 55%,transparent 72%);filter:blur(5px);pointer-events:none}
.level-splash span{display:block;position:relative;z-index:1;text-transform:uppercase;letter-spacing:.22em;color:#ffd47f;font-size:.62rem;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.level-splash strong{display:block;position:relative;z-index:1;font:700 1.16rem Georgia,serif;color:#fff3d2;margin:4px 0 0;text-shadow:0 3px 12px rgba(0,0,0,.45),0 0 10px rgba(255,210,132,.14)}

.big-reaction{position:absolute;inset:0;z-index:60;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .14s}
.big-reaction img{width:min(36vw,290px);max-width:58%;opacity:0;transform:scale(.74) translateY(24px);filter:drop-shadow(0 10px 18px rgba(0,0,0,.62));transition:transform .18s,opacity .18s}
.big-reaction span{display:none}
.big-reaction.show{opacity:1}
.big-reaction.show img{opacity:.24;transform:scale(.90) translateY(0)}

.buff-popup{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.78);z-index:121;min-width:min(68vw,360px);max-width:min(78vw,460px);padding:14px 18px 16px;border-radius:26px;border:1px solid rgba(255,230,150,.55);background:radial-gradient(circle at 50% 18%,rgba(255,246,199,.18),transparent 35%),linear-gradient(135deg,rgba(34,13,60,.90),rgba(88,43,121,.90) 46%,rgba(12,11,23,.92));box-shadow:0 16px 40px rgba(0,0,0,.42),0 0 24px rgba(201,116,255,.24);backdrop-filter:blur(7px);text-align:center;opacity:0;pointer-events:none;transition:opacity .18s,transform .22s;overflow:hidden}
.buff-popup::before{content:"";position:absolute;inset:10% 16%;border-radius:50%;border:1px solid rgba(255,223,130,.24);filter:blur(.2px)}
.buff-popup.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.buff-popup .buff-icon{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-58%);font-size:clamp(3.8rem,9vw,6rem);line-height:1;opacity:.18;filter:drop-shadow(0 0 12px rgba(255,237,170,.45))}
.buff-popup .buff-text{position:relative;z-index:1;display:block;font:900 clamp(1.15rem,3.2vw,2rem)/1.05 Georgia,serif;letter-spacing:.06em;color:#fff1c4;text-shadow:0 3px 10px rgba(0,0,0,.72)}
.buff-popup.negative{background:radial-gradient(circle at 50% 18%,rgba(255,239,185,.12),transparent 35%),linear-gradient(135deg,rgba(56,11,26,.92),rgba(128,21,52,.88) 44%,rgba(22,7,16,.94));border-color:rgba(255,168,111,.58)}
.buff-popup.negative .buff-icon{opacity:.22;color:#fff1bc}
.buff-popup.positive{background:radial-gradient(circle at 50% 18%,rgba(255,247,206,.16),transparent 35%),linear-gradient(135deg,rgba(24,18,61,.92),rgba(84,45,132,.9) 40%,rgba(13,15,38,.94));border-color:rgba(255,224,137,.62)}
.buff-popup.info{background:radial-gradient(circle at 50% 18%,rgba(212,246,255,.14),transparent 35%),linear-gradient(135deg,rgba(15,28,56,.92),rgba(21,70,108,.88) 44%,rgba(11,17,31,.94));border-color:rgba(118,222,255,.55)}
.buff-popup.warning{background:radial-gradient(circle at 50% 18%,rgba(255,243,164,.18),transparent 35%),linear-gradient(135deg,rgba(76,30,8,.94),rgba(154,72,16,.91) 44%,rgba(31,12,7,.96));border-color:rgba(255,207,91,.72);box-shadow:0 16px 42px rgba(0,0,0,.45),0 0 30px rgba(255,167,56,.28)}
.buff-popup.warning .buff-icon{opacity:.24}

.mouse-peek{position:absolute;z-index:52;width:138px;height:190px;opacity:0;pointer-events:none;transition:opacity .22s,transform .34s cubic-bezier(.22,.8,.28,1);overflow:visible;--mouse-pos:50%}
.mouse-peek::before{content:"";position:absolute;left:8%;right:8%;bottom:92px;height:18px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.42),transparent 68%);filter:blur(2px)}
.mouse-peek img{position:absolute;left:50%;bottom:0;width:100%;height:auto;transform:translateX(-50%);filter:drop-shadow(0 9px 10px rgba(0,0,0,.48))}
.mouse-peek.edge-bottom{left:var(--mouse-pos);bottom:-104px;top:auto;right:auto;transform:translate(-50%,42px) rotate(-2deg)}
.mouse-peek.edge-bottom.show{opacity:1;transform:translate(-50%,0) rotate(-1deg)}
.mouse-peek.edge-left{left:-72px;right:auto;bottom:auto;top:var(--mouse-pos);transform:translate(-30px,-50%) rotate(7deg)}
.mouse-peek.edge-left.show{opacity:1;transform:translate(0,-50%) rotate(4deg)}
.mouse-peek.edge-right{right:-72px;left:auto;bottom:auto;top:var(--mouse-pos);transform:translate(30px,-50%) rotate(-7deg)}
.mouse-peek.edge-right img{transform:translateX(-50%) scaleX(-1)}
.mouse-peek.edge-right.show{opacity:1;transform:translate(0,-50%) rotate(-4deg)}
.mouse-peek.edge-top{left:var(--mouse-pos);top:-88px;right:auto;bottom:auto;transform:translate(-50%,-26px) rotate(180deg)}
.mouse-peek.edge-top.show{opacity:1;transform:translate(-50%,0) rotate(180deg)}
@media(max-width:800px){
  .buff-popup{top:43%;min-width:min(76vw,300px);padding:12px 14px 14px;border-radius:22px}
  .buff-popup .buff-icon{font-size:clamp(3rem,14vw,4.8rem)}
  .buff-popup .buff-text{font-size:clamp(.98rem,5vw,1.35rem)}
  .mouse-peek{width:94px;height:132px}.mouse-peek.edge-bottom{bottom:-72px}.mouse-peek.edge-left{left:-48px}.mouse-peek.edge-right{right:-48px}.mouse-peek.edge-top{top:-56px}.mouse-peek::before{bottom:36px;height:13px}
}


.overlay{position:absolute;z-index:110;inset:0;display:grid;place-items:center;padding:22px;background:rgba(2,3,5,.20);opacity:0;visibility:hidden;transition:.22s}
.overlay.open{opacity:1;visibility:visible;background:rgba(2,3,5,.67);backdrop-filter:blur(7px)}
.pause-overlay.open{background:rgba(4,5,10,.48)}
.card{width:min(620px,94vw);padding:30px;border:1px solid rgba(231,194,114,.36);border-radius:24px;background:linear-gradient(180deg,rgba(14,16,20,.96),rgba(6,7,10,.97));box-shadow:0 30px 80px rgba(0,0,0,.68);text-align:center}
.pause-card{width:min(440px,92vw)}
.screen-sera-wrap{display:flex;justify-content:center;align-items:center;margin:14px 0 6px}
.screen-sera{width:min(180px,38vw);height:auto;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(0,0,0,.38));animation:screenSeraBob 2.6s ease-in-out infinite alternate}
.pause-sera-wrap{margin-top:8px;margin-bottom:14px}
.pause-sera{width:min(150px,32vw)}
@keyframes screenSeraBob{to{transform:translateY(-6px) rotate(-2deg)}}
.card h1,.card h2{font-family:Georgia,"Times New Roman",serif;color:#f2d599;margin:.34em 0 .4em}
.card h1{font-size:clamp(2rem,5vw,3.35rem)}.card h2{font-size:clamp(1.7rem,4vw,2.5rem)}
.card p{color:#d6ccbd;line-height:1.55}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;color:#c49a56!important;font-weight:900}
.mini-grapes{font-size:2.6rem}.rules{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:20px 0}
.rules span{padding:8px 11px;border-radius:999px;border:1px solid rgba(224,187,111,.18);background:rgba(255,255,255,.025);font-size:.76rem;color:#d8cdbd}.rules b{color:#f4d68e}
.primary{border:0;border-radius:999px;padding:13px 25px;background:linear-gradient(180deg,#e3bd6e,#a97a32);color:#170f05;font-weight:950;cursor:pointer;box-shadow:0 10px 28px rgba(193,143,61,.22)}
.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.result-grid div{padding:14px 8px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(226,190,116,.18)}
.result-grid span{display:block;font-size:.68rem;text-transform:uppercase;color:#aaa092;letter-spacing:.1em}.result-grid strong{display:block;margin-top:4px;font-size:1.45rem;color:#f6deb0}
.end-text{min-height:48px}

@media(max-width:800px){
  .hud{min-height:112px;align-items:flex-start;padding:7px;gap:6px}
  .brand{min-width:125px}.brand strong{font-size:.84rem}.kicker{font-size:.49rem}
  .level-box{display:block;position:absolute;left:7px;top:55px;min-width:126px;padding:5px 9px;border-left:0;border:1px solid rgba(226,190,116,.22);border-radius:10px;background:rgba(4,5,8,.54)}
  .level-box span{font-size:.92rem}.level-box strong{font-size:.62rem;white-space:nowrap}
  .hud-stats{display:grid;grid-template-columns:repeat(2,72px);gap:4px}.stat{min-width:0;padding:4px}.stat span{font-size:.5rem}.stat strong{font-size:.88rem}
  .hud-actions{display:flex;flex-direction:column;gap:4px}
  .icon-btn{width:34px;height:34px}
  .playfield{inset:112px 0 0}.rausch-wrap{top:116px;width:82vw}
  .rausch-label{font-size:.74rem}.rausch-label b{font-size:.86rem;white-space:nowrap}.rausch-bar{height:10px}
  .ellie{height:47%;max-width:36%}
  .ellie.side-right{right:-1%;bottom:0}
  .ellie.side-left{left:-1%;bottom:0}
  .ellie-spell{height:min(47%,400px);max-width:40%}
  .spell-wave{width:min(72vw,420px)}
  .sera{width:clamp(90px,22vw,120px);top:58%}
  .message{top:15%;font-size:.76rem;max-width:90%;white-space:normal;text-align:center}
  .level-splash{top:auto;bottom:4px;min-width:0;width:min(74vw,330px);padding:8px 12px 10px;border-radius:74px 74px 17px 17px / 50px 50px 17px 17px}
  .level-splash strong{font-size:1rem}
  .big-reaction img{width:min(56vw,300px)}
  .card{padding:22px 16px}.rules span{font-size:.68rem}
  .result-grid{grid-template-columns:repeat(2,1fr)}
}

/* V6: stärkere Gefahr, echte Lebenstrauben-Jagd und deutlichere Ellie-Ablenkung */
.item.life .grape-bunch{
  transform:scale(1.12);
  filter:drop-shadow(0 0 9px rgba(255,105,180,.9)) drop-shadow(0 0 18px rgba(255,220,120,.65));
  animation:lifePulse .72s ease-in-out infinite alternate;
}
.item.life .grape-bunch i{background:radial-gradient(circle at 35% 30%,#fff8c8,#f4ca5c 45%,#bd4d82 88%)}
.item.life .grape-bunch::after{
  content:"♥";position:absolute;right:-15px;top:-7px;font-size:25px;color:#ff9fbd;text-shadow:0 0 10px rgba(255,108,153,.95),0 2px 4px #000;
}
@keyframes lifePulse{to{transform:scale(1.24);filter:drop-shadow(0 0 14px rgba(255,105,180,1)) drop-shadow(0 0 24px rgba(255,220,120,.8))}}

.item.rotten .grape-bunch{
  transform:scale(1.14);
  filter:drop-shadow(0 0 13px rgba(157,255,78,.62)) drop-shadow(0 4px 5px rgba(0,0,0,.55));
  animation:rottenPulse .7s ease-in-out infinite alternate;
}
.item.rotten .grape-bunch i{background:radial-gradient(circle at 35% 30%,#d7b5dd,#65516f 44%,#25182b)}
.item.rotten .grape-bunch::before{background:#6e8f39}
.item.rotten .grape-bunch::after{
  content:"☣";position:absolute;right:-12px;top:3px;font-size:19px;color:#c8ff67;text-shadow:0 0 9px rgba(187,255,77,.95),0 2px 4px #000;
}
@keyframes rottenPulse{to{transform:scale(1.25) rotate(-3deg);filter:drop-shadow(0 0 19px rgba(157,255,78,.82)) drop-shadow(0 4px 5px rgba(0,0,0,.55))}}

.big-reaction.show img{opacity:.26;transform:scale(.95) translateY(0)}

.game-shell.hexing .ellie-spell.show{opacity:.94}
.spell-sparks{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:hidden}
.magic-spark{
  --dx:0px;--dy:0px;position:absolute;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle,#fff7bd 0 18%,#ffd6ff 28%,#f5a7ff 46%,#8b49ff 70%,transparent 74%);
  box-shadow:0 0 14px rgba(238,152,255,.95),0 0 28px rgba(116,64,255,.72),0 0 42px rgba(255,255,255,.35);
  animation:magicSpark 1.55s ease-out forwards;
}
@keyframes magicSpark{
  0%{opacity:0;transform:translate(0,0) scale(.2)}
  15%{opacity:1;transform:translate(calc(var(--dx)*.18),calc(var(--dy)*.18)) scale(1.1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35)}
}
.spell-banter{
  position:absolute;z-index:17;left:50%;top:30%;transform:translate(-50%,-12px) rotate(-2deg) scale(.96);
  max-width:min(72vw,520px);padding:12px 18px;border-radius:18px;
  border:1px solid rgba(243,178,255,.45);background:rgba(45,12,62,.79);backdrop-filter:blur(7px);
  color:#fff1ff;font-weight:900;font-size:clamp(.9rem,2vw,1.18rem);text-align:center;line-height:1.25;
  box-shadow:0 0 30px rgba(186,89,255,.32);text-shadow:0 2px 5px #000;
  opacity:0;pointer-events:none;transition:opacity .14s,transform .16s;
}
.spell-banter.show{opacity:1;transform:translate(-50%,0) rotate(1deg) scale(1)}

.bonus-gull{animation:gullWing .35s ease-in-out infinite alternate}
@keyframes gullWing{to{transform:translateY(-5px) rotate(3deg)}}

@media(max-width:800px){
  .spell-banter{top:32%;max-width:86vw;font-size:.82rem;padding:10px 12px}
  .item.life .grape-bunch{transform:scale(1.08)}
  .item.rotten .grape-bunch{transform:scale(1.08)}
}

/* V7: Gefahr sofort lesbar + drei Audio-Buttons */
.item.rotten{z-index:22;filter:drop-shadow(0 0 18px rgba(179,255,79,.72))}
.item.rotten::before{
  content:"☠";position:absolute;left:50%;top:-25px;transform:translateX(-50%);
  padding:3px 7px;border-radius:999px;border:1px solid rgba(255,244,159,.9);
  background:rgba(84,18,31,.94);color:#fff5a0;font-size:.62rem;font-weight:1000;letter-spacing:.12em;
  text-shadow:0 2px 4px #000;box-shadow:0 0 13px rgba(207,255,88,.55);white-space:nowrap;
  animation:dangerBlink .38s steps(2,end) infinite;
}
.item.rotten::after{
  content:"";position:absolute;left:50%;top:52%;width:74px;height:74px;transform:translate(-50%,-50%);
  border:3px solid rgba(185,255,82,.72);border-radius:50%;box-shadow:0 0 18px rgba(185,255,82,.75),inset 0 0 15px rgba(156,57,87,.45);
  animation:dangerRing .72s ease-out infinite;pointer-events:none;
}
.item.rotten .grape-bunch{transform:scale(1.28);filter:drop-shadow(0 0 18px rgba(180,255,71,.9)) drop-shadow(0 4px 6px rgba(0,0,0,.65))}
.item.rotten .grape-bunch i{background:radial-gradient(circle at 32% 28%,#e5e96d,#71852c 38%,#5d2749 64%,#271325 92%)}
.item.rotten .grape-bunch::after{content:"☠";right:-14px;top:2px;font-size:23px;color:#f4ff80;text-shadow:0 0 8px #6dff47,0 2px 4px #000}
@keyframes dangerBlink{50%{opacity:.58;transform:translateX(-50%) scale(1.08)}}
@keyframes dangerRing{0%{opacity:.85;transform:translate(-50%,-50%) scale(.64)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.32)}}

.item.life{z-index:23}
.item.life::before{content:"+1 ♥";position:absolute;left:50%;top:-23px;transform:translateX(-50%);padding:3px 7px;border-radius:999px;background:rgba(66,16,61,.86);border:1px solid rgba(255,218,134,.72);color:#fff0ad;font-size:.62rem;font-weight:950;white-space:nowrap;text-shadow:0 2px 4px #000}

@media(max-width:800px){
  .hud-actions{gap:3px}
  .icon-btn{width:32px;height:32px;font-size:.9rem}
  .item.rotten::before{top:-22px;font-size:.56rem}
  .item.rotten::after{width:64px;height:64px}
  .item.rotten .grape-bunch{transform:scale(1.18)}
}


/* V8: faule Traube wirklich unübersehbar */
.item.rotten{z-index:28!important;filter:drop-shadow(0 0 24px rgba(255,68,92,.78)) drop-shadow(0 0 30px rgba(183,255,69,.62))}
.item.rotten::before{
  content:"☠ ☠";top:-34px;padding:5px 10px;border:2px solid rgba(255,241,112,.96);
  background:rgba(120,8,28,.96);color:#fff6a8;font-size:.72rem;letter-spacing:.16em;
  box-shadow:0 0 17px rgba(255,64,83,.8),0 0 28px rgba(191,255,69,.55);
  animation:dangerBlinkV8 .28s steps(2,end) infinite;
}
.item.rotten::after{
  width:92px;height:92px;border:5px solid rgba(255,74,91,.82);
  box-shadow:0 0 20px rgba(255,55,74,.9),0 0 34px rgba(184,255,67,.62),inset 0 0 18px rgba(117,16,49,.65);
  animation:dangerRingV8 .58s ease-out infinite;
}
.item.rotten .grape-bunch{transform:scale(1.48);filter:drop-shadow(0 0 22px rgba(194,255,72,.98)) drop-shadow(0 0 12px rgba(255,48,79,.9))}
.item.rotten .grape-bunch i{background:radial-gradient(circle at 30% 25%,#f3ef62,#8b9625 30%,#751b45 60%,#1b0917 95%)}
.item.rotten .grape-bunch::after{content:"☠";right:-19px;top:-2px;font-size:29px;color:#fff374;text-shadow:0 0 10px #9eff42,0 0 16px #ff3b62,0 2px 4px #000}
@keyframes dangerBlinkV8{50%{opacity:.63;transform:translateX(-50%) scale(1.13)}}
@keyframes dangerRingV8{0%{opacity:1;transform:translate(-50%,-50%) scale(.55) rotate(0deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.38) rotate(20deg)}}
@media(max-width:800px){
  .item.rotten::before{top:-29px;font-size:.62rem;padding:4px 8px}
  .item.rotten::after{width:78px;height:78px;border-width:4px}
  .item.rotten .grape-bunch{transform:scale(1.34)}
}


/* V11 – Arcade polish */
.ellie.teleport-out{opacity:.08!important;filter:drop-shadow(0 0 20px rgba(226,154,255,.88)) blur(.7px)}
.ellie.teleport-in{animation:ellieTeleportIn .32s ease-out}
@keyframes ellieTeleportIn{0%{opacity:.08;filter:drop-shadow(0 0 24px rgba(255,216,112,.95)) blur(.8px)}55%{opacity:.72}100%{opacity:1;filter:drop-shadow(0 7px 9px rgba(0,0,0,.40))}}

.ambient-magic{position:absolute;inset:0;z-index:15;pointer-events:none;overflow:hidden}
.ambient-spark{--dx:0px;--dy:0px;position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#fff9c8 0 20%,#ffd26a 32%,#e991ff 58%,transparent 72%);box-shadow:0 0 10px rgba(255,220,122,.95),0 0 20px rgba(203,105,255,.6);animation:ambientSpark 1.15s ease-out forwards}
.ambient-spark.star{width:13px;height:13px;border-radius:2px;transform:rotate(45deg);background:radial-gradient(circle,#fff 0 16%,#ffe58d 35%,#c96aff 65%,transparent 73%)}
@keyframes ambientSpark{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}18%{opacity:1;transform:translate(calc(var(--dx)*.15),calc(var(--dy)*.15)) scale(1.2) rotate(45deg)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3) rotate(180deg)}}
.magic-rune{position:absolute;width:64px;height:64px;border:2px solid rgba(255,218,119,.8);border-radius:50%;box-shadow:0 0 18px rgba(255,205,96,.45),inset 0 0 16px rgba(195,96,255,.3);animation:runeFlash 1.5s ease-out forwards}
.magic-rune::before,.magic-rune::after{content:"";position:absolute;inset:12px;border:1px solid rgba(232,164,255,.75);transform:rotate(45deg)}
.magic-rune::after{inset:22px;border-radius:50%;transform:none}
@keyframes runeFlash{0%{opacity:0;transform:scale(.45) rotate(-35deg)}25%{opacity:.95}100%{opacity:0;transform:scale(1.25) rotate(45deg)}}

.level-countdown{position:absolute;z-index:76;left:50%;top:48%;transform:translate(-50%,-50%) scale(.78);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .12s,transform .16s;text-shadow:0 7px 18px rgba(0,0,0,.85)}
.level-countdown.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.level-countdown strong{font:1000 clamp(4.6rem,11.3vw,8.5rem)/.9 Georgia,serif;color:#ffe29a;-webkit-text-stroke:1px rgba(65,35,7,.4);filter:drop-shadow(0 0 16px rgba(255,196,76,.42))}
.level-countdown span{margin-top:8px;padding:6px 13px;border-radius:999px;background:rgba(7,8,11,.72);border:1px solid rgba(241,201,112,.35);font-weight:950;letter-spacing:.14em;color:#fff1c9;font-size:.78rem}
.level-countdown.level-up strong{font-size:clamp(2.7rem,8vw,5.4rem);letter-spacing:.06em}

.highspeed-badge{position:absolute;z-index:55;left:50%;top:17%;transform:translate(-50%,-10px) scale(.9);opacity:0;padding:8px 18px;border-radius:999px;border:1px solid rgba(111,225,255,.72);background:rgba(8,18,28,.8);color:#e9fbff;font-weight:1000;letter-spacing:.22em;text-shadow:0 0 10px rgba(96,216,255,.95);box-shadow:0 0 28px rgba(64,195,255,.28);pointer-events:none;transition:.22s}
.game-shell.highspeed .highspeed-badge{opacity:1;transform:translate(-50%,0) scale(1.08)}
.game-shell.highspeed .scene-shade{background:linear-gradient(180deg,rgba(5,9,15,.08),rgba(4,8,15,.30),rgba(2,4,8,.58))}
.game-shell.highspeed .weather-layer{opacity:.9;background:repeating-linear-gradient(100deg,transparent 0 54px,rgba(199,231,255,.13) 58px,transparent 64px);animation:speedLines .42s linear infinite}
@keyframes speedLines{to{transform:translateX(-90px)}}
.highspeed-video{position:absolute;z-index:6;inset:0;width:100%;height:100%;object-fit:contain;background:#000;border:0;border-radius:0;box-shadow:none;opacity:0;visibility:hidden;transform:none;transition:opacity .22s;pointer-events:none;filter:brightness(.62) saturate(1.08)}
.game-shell.highspeed .highspeed-video{opacity:.94;visibility:visible;transform:none}

@media(max-width:800px){
  .level-countdown{top:46%}
  .level-countdown strong{font-size:clamp(3.4rem,18vw,5.6rem)}
  .highspeed-badge{top:18%;font-size:.7rem;padding:6px 12px}
}


/* V13 · lebendige Welt */
.sera-shield{position:absolute;z-index:17;left:35%;top:59%;width:clamp(132px,14vw,190px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.75);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;will-change:left,top,transform}
.sera-shield::before,.sera-shield::after{content:"";position:absolute;inset:4%;border-radius:50%;border:3px solid rgba(111,208,255,.78);box-shadow:0 0 18px rgba(87,190,255,.85),inset 0 0 18px rgba(120,203,255,.38),0 0 38px rgba(255,215,107,.22);animation:shieldSpin 3.4s linear infinite}
.sera-shield::after{inset:13%;border:1px dashed rgba(255,222,128,.78);animation-direction:reverse;animation-duration:2.2s}
.sera-shield i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(87,202,255,.04) 0 54%,rgba(105,202,255,.17) 67%,transparent 73%)}
.sera-shield b{position:absolute;right:4%;top:10%;font-size:1.2rem;color:#ffe598;text-shadow:0 0 10px #fff,0 0 18px #7fe6ff;animation:shieldSpark .9s ease-in-out infinite alternate}
.sera-shield.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sera-shield.break{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(18deg)}
@keyframes shieldSpin{to{transform:rotate(360deg)}}
@keyframes shieldSpark{to{transform:scale(1.45) rotate(25deg);filter:brightness(1.5)}}

.portal-event{position:absolute;z-index:96;right:-1%;left:auto;top:8%;width:min(28vw,300px);height:min(34vh,280px);transform:translateY(-72%) scale(.84) rotate(4deg);opacity:0;pointer-events:none;overflow:visible;transition:opacity .28s,transform .36s}
.portal-event.show{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
.portal-ring{position:absolute;left:auto;right:6px;top:78px;width:92%;aspect-ratio:1/.54;transform:rotate(-8deg);border:4px solid rgba(244,198,94,.92);border-radius:50%;box-shadow:0 0 18px rgba(255,210,91,.95),0 0 42px rgba(151,87,255,.76),inset 0 0 24px rgba(219,103,255,.46);animation:portalPulse .65s ease-in-out infinite alternate}
.portal-ring::before,.portal-ring::after{content:"✦ ᚱ ✧ ᛟ ✦";position:absolute;inset:-17px;color:#ffeab0;font-size:.88rem;letter-spacing:1.7em;text-align:center;text-shadow:0 0 10px #be72ff;transform:rotate(4deg)}
.portal-ring::after{content:"";inset:17%;border:1px dashed rgba(213,154,255,.9);border-radius:50%}
.portal-event img{position:absolute;z-index:2;left:auto;right:0;top:18px;height:236px;max-width:96%;object-fit:contain;transform:none;clip-path:inset(0 0 24% 0);filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
@keyframes portalPulse{to{filter:brightness(1.35);transform:rotate(4deg) scale(1.05)}}

.broom-event{position:absolute;z-index:12;bottom:-10%;left:0;width:clamp(78px,7vw,106px);height:40%;opacity:0;pointer-events:none;transition:opacity .22s,left .75s ease-in-out}
.broom-event img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 9px 8px rgba(0,0,0,.45));transform-origin:50% 74%}
.broom-event.show{opacity:.92}
.broom-event.show img{animation:broomWobble .42s ease-in-out infinite alternate}
@keyframes broomWobble{to{transform:rotate(7deg) translateY(-4px)}}
.broom-dust{position:absolute;z-index:11;left:0;right:0;bottom:0;height:13%;pointer-events:none}
.broom-dust i{--drift:0px;position:absolute;bottom:4px;width:38px;height:22px;border-radius:50%;background:radial-gradient(ellipse,rgba(202,177,135,.34),rgba(125,103,80,.16) 55%,transparent 73%);filter:blur(2px);animation:dustPoof 1.35s ease-out forwards}
@keyframes dustPoof{0%{opacity:0;transform:translateX(0) scale(.4)}25%{opacity:.8}100%{opacity:0;transform:translateX(var(--drift)) translateY(-42px) scale(2.4)}}

.zarah-event{position:absolute;z-index:126;top:1%;width:min(27vw,310px);height:30%;opacity:0;pointer-events:none;transition:opacity .2s;will-change:transform,left,right,top}
.zarah-event img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 22px rgba(0,0,0,.68)) drop-shadow(0 0 12px rgba(255,214,104,.28))}
.zarah-event.from-left{left:-40%;transform:rotate(-6deg)}
.zarah-event.from-right{right:-40%;transform:scaleX(-1) rotate(-6deg)}
.zarah-event.from-left.show{opacity:1;animation:zarahFlyL 4.7s linear forwards}
.zarah-event.from-right.show{opacity:1;animation:zarahFlyR 4.7s linear forwards}
@keyframes zarahFlyL{0%{left:-34%;transform:rotate(-8deg) translateY(10px)}18%{left:1%;transform:rotate(3deg) translateY(-8px)}48%{left:38%;transform:rotate(-2deg) translateY(4px)}76%{left:68%;transform:rotate(4deg) translateY(-6px)}100%{left:108%;transform:rotate(9deg) translateY(-22px)}}
@keyframes zarahFlyR{0%{right:-34%;transform:scaleX(-1) rotate(-8deg) translateY(10px)}18%{right:1%;transform:scaleX(-1) rotate(3deg) translateY(-8px)}48%{right:38%;transform:scaleX(-1) rotate(-2deg) translateY(4px)}76%{right:68%;transform:scaleX(-1) rotate(4deg) translateY(-6px)}100%{right:108%;transform:scaleX(-1) rotate(9deg) translateY(-22px)}}

.zarah-screw .junk{filter:drop-shadow(0 0 7px rgba(255,213,117,.25)) drop-shadow(0 4px 5px rgba(0,0,0,.6))}

.ground-splats{position:absolute;z-index:10;left:0;right:0;bottom:0;height:11%;pointer-events:none;overflow:hidden}
.ground-splat{position:absolute;bottom:2px;width:clamp(34px,4vw,56px);aspect-ratio:1.5/1;border-radius:50% 50% 44% 56%/58% 52% 48% 42%;background:radial-gradient(ellipse at 50% 44%,rgba(255,198,255,.9) 0 14%,rgba(198,90,255,.82) 20%,rgba(121,46,156,.48) 56%,rgba(79,26,119,.06) 72%,transparent 76%);filter:blur(.4px) drop-shadow(0 0 8px rgba(221,109,255,.42));transform:translateX(-50%) scale(.45);opacity:0;animation:splatIn 1.2s ease-out forwards}
.ground-splat::before,.ground-splat::after{content:"";position:absolute;background:radial-gradient(circle,rgba(241,170,255,.85),rgba(129,41,181,.12) 70%,transparent 74%);border-radius:50%}
.ground-splat::before{width:32%;height:34%;left:8%;top:-12%}
.ground-splat::after{width:24%;height:26%;right:10%;top:-6%}
.ground-splat.fade{animation:splatOut .9s ease-in forwards}
@keyframes splatIn{0%{opacity:0;transform:translateX(-50%) scale(.2)}30%{opacity:.95}100%{opacity:.88;transform:translateX(-50%) scale(1)}}
@keyframes splatOut{to{opacity:0;transform:translateX(-50%) scale(.6)}}

.shield-cast{position:absolute;z-index:23;width:min(27vw,270px);height:min(42vh,360px);opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.82)}
.shield-cast img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.54))}
.shield-cast.show{opacity:1;animation:shieldCastPop .95s ease-out forwards}
.shield-cast .cast-ring{position:absolute;left:54%;top:56%;width:62%;aspect-ratio:1;border:3px solid rgba(255,230,141,.9);border-radius:50%;box-shadow:0 0 22px rgba(255,215,107,.7),0 0 42px rgba(120,218,255,.58),inset 0 0 22px rgba(222,126,255,.34)}
.shield-cast .cast-ring::before,.shield-cast .cast-ring::after{content:"";position:absolute;inset:10%;border-radius:50%;border:1px dashed rgba(122,230,255,.84)}
.shield-cast .cast-ring::after{inset:-13%;border-color:rgba(239,176,255,.78)}
@keyframes shieldCastPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}22%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}}

@media(max-width:800px){
  .sera-shield{width:clamp(120px,30vw,155px)}
  .portal-event{width:min(84vw,390px);height:330px;top:5%}
  .portal-event img{height:280px;top:36px}
  .portal-ring{top:94px}
  .broom-event{width:72px;height:34%;bottom:-9%}
  .zarah-event{width:min(34vw,150px);height:26%;top:1%}
  .screen-sera{width:min(140px,36vw)}
  .pause-sera{width:min(120px,30vw)}
  .shield-cast{width:min(42vw,210px);height:250px}
}

.zarah-event.zapped{opacity:1!important;filter:drop-shadow(0 0 24px rgba(255,244,155,.98)) drop-shadow(0 0 42px rgba(125,210,255,.86));animation:none!important}
.zarah-event.zapped.tumble-right{animation:zarahTumbleRight 1.25s cubic-bezier(.32,.02,.8,.42) forwards!important}
.zarah-event.zapped.tumble-left{animation:zarahTumbleLeft 1.25s cubic-bezier(.32,.02,.8,.42) forwards!important}
@keyframes zarahTumbleRight{0%{opacity:1;transform:rotate(0deg) scale(1)}16%{transform:translate(15px,-8px) rotate(38deg) scale(1.04)}100%{opacity:0;transform:translate(62vw,24vh) rotate(620deg) scale(.55)}}
@keyframes zarahTumbleLeft{0%{opacity:1;transform:scaleX(-1) rotate(0deg) scale(1)}16%{transform:scaleX(-1) translate(-15px,-8px) rotate(-38deg) scale(1.04)}100%{opacity:0;transform:scaleX(-1) translate(-62vw,24vh) rotate(-620deg) scale(.55)}}


/* V17.1 · Ellie vertreibt Zarah sichtbar */
.ellie-zap{position:absolute;z-index:108;inset:0;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden}
.ellie-zap.show{opacity:1;visibility:visible}
.ellie-zap img{position:absolute;z-index:3;bottom:-1%;width:min(28vw,270px);max-height:58%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.62)) drop-shadow(0 0 16px rgba(238,184,255,.22));animation:ellieZapPop 1.25s ease-out forwards}
.ellie-zap.target-left img{right:1%}
.ellie-zap.target-right img{left:1%;transform:scaleX(-1)}
.zap-beam{position:absolute;z-index:4;left:var(--zap-x,18%);top:var(--zap-y,68%);width:var(--zap-len,72%);height:30px;background:linear-gradient(90deg,#fffbd1 0%,#ffe875 24%,#cc8cff 58%,#92e8ff 100%);clip-path:polygon(0 40%,10% 18%,18% 54%,28% 20%,38% 61%,49% 28%,60% 58%,70% 18%,80% 54%,90% 30%,100% 44%,100% 62%,91% 50%,81% 72%,70% 43%,61% 78%,49% 48%,38% 82%,28% 43%,18% 78%,10% 45%,0 64%);filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 11px #ffe877) drop-shadow(0 0 20px #b96fff);opacity:0;transform-origin:left center;transform:rotate(var(--zap-angle,0deg));animation:zapBeam .82s steps(2,end) .08s forwards}
.ellie-zap.target-left .zap-beam{position:absolute;z-index:4;left:var(--zap-x,18%);top:var(--zap-y,68%);width:var(--zap-len,72%);height:30px;background:linear-gradient(90deg,#fffbd1 0%,#ffe875 24%,#cc8cff 58%,#92e8ff 100%);clip-path:polygon(0 40%,10% 18%,18% 54%,28% 20%,38% 61%,49% 28%,60% 58%,70% 18%,80% 54%,90% 30%,100% 44%,100% 62%,91% 50%,81% 72%,70% 43%,61% 78%,49% 48%,38% 82%,28% 43%,18% 78%,10% 45%,0 64%);filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 11px #ffe877) drop-shadow(0 0 20px #b96fff);opacity:0;transform-origin:left center;transform:rotate(var(--zap-angle,0deg));animation:zapBeam .82s steps(2,end) .08s forwards}
.ellie-zap.target-right .zap-beam{position:absolute;z-index:4;left:var(--zap-x,18%);top:var(--zap-y,68%);width:var(--zap-len,72%);height:30px;background:linear-gradient(90deg,#fffbd1 0%,#ffe875 24%,#cc8cff 58%,#92e8ff 100%);clip-path:polygon(0 40%,10% 18%,18% 54%,28% 20%,38% 61%,49% 28%,60% 58%,70% 18%,80% 54%,90% 30%,100% 44%,100% 62%,91% 50%,81% 72%,70% 43%,61% 78%,49% 48%,38% 82%,28% 43%,18% 78%,10% 45%,0 64%);filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 11px #ffe877) drop-shadow(0 0 20px #b96fff);opacity:0;transform-origin:left center;transform:rotate(var(--zap-angle,0deg));animation:zapBeam .82s steps(2,end) .08s forwards}
.zap-flash{position:absolute;z-index:5;left:var(--zap-target-x,50%);top:var(--zap-target-y,30%);width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 5%,rgba(255,232,113,.95) 8%,rgba(207,115,255,.64) 25%,rgba(114,218,255,.28) 48%,transparent 72%);opacity:0;filter:blur(1px);transform:translate(-50%,-50%);animation:zapFlash .95s ease-out .18s forwards}
.ellie-zap.target-left .zap-flash{position:absolute;z-index:5;left:var(--zap-target-x,50%);top:var(--zap-target-y,30%);width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 5%,rgba(255,232,113,.95) 8%,rgba(207,115,255,.64) 25%,rgba(114,218,255,.28) 48%,transparent 72%);opacity:0;filter:blur(1px);transform:translate(-50%,-50%);animation:zapFlash .95s ease-out .18s forwards}
.ellie-zap.target-right .zap-flash{position:absolute;z-index:5;left:var(--zap-target-x,50%);top:var(--zap-target-y,30%);width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 5%,rgba(255,232,113,.95) 8%,rgba(207,115,255,.64) 25%,rgba(114,218,255,.28) 48%,transparent 72%);opacity:0;filter:blur(1px);transform:translate(-50%,-50%);animation:zapFlash .95s ease-out .18s forwards}
@keyframes ellieZapPop{0%{opacity:0;transform:translateY(28px) scale(.82)}18%{opacity:1;transform:translateY(0) scale(1.03)}72%{opacity:1}100%{opacity:0;transform:translateY(6px) scale(.98)}}
@keyframes zapBeam{0%{opacity:0;filter:drop-shadow(0 0 3px #fff)}16%{opacity:1}42%{opacity:.45}60%{opacity:1}100%{opacity:0}}
@keyframes zapFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}28%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}
@media(max-width:800px){
  .ellie-zap img{width:min(42vw,205px);max-height:50%}
  .zap-beam{position:absolute;z-index:4;left:var(--zap-x,18%);top:var(--zap-y,68%);width:var(--zap-len,72%);height:30px;background:linear-gradient(90deg,#fffbd1 0%,#ffe875 24%,#cc8cff 58%,#92e8ff 100%);clip-path:polygon(0 40%,10% 18%,18% 54%,28% 20%,38% 61%,49% 28%,60% 58%,70% 18%,80% 54%,90% 30%,100% 44%,100% 62%,91% 50%,81% 72%,70% 43%,61% 78%,49% 48%,38% 82%,28% 43%,18% 78%,10% 45%,0 64%);filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 11px #ffe877) drop-shadow(0 0 20px #b96fff);opacity:0;transform-origin:left center;transform:rotate(var(--zap-angle,0deg));animation:zapBeam .82s steps(2,end) .08s forwards}
  .ellie-zap.target-left .zap-beam{position:absolute;z-index:4;left:var(--zap-x,18%);top:var(--zap-y,68%);width:var(--zap-len,72%);height:30px;background:linear-gradient(90deg,#fffbd1 0%,#ffe875 24%,#cc8cff 58%,#92e8ff 100%);clip-path:polygon(0 40%,10% 18%,18% 54%,28% 20%,38% 61%,49% 28%,60% 58%,70% 18%,80% 54%,90% 30%,100% 44%,100% 62%,91% 50%,81% 72%,70% 43%,61% 78%,49% 48%,38% 82%,28% 43%,18% 78%,10% 45%,0 64%);filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 11px #ffe877) drop-shadow(0 0 20px #b96fff);opacity:0;transform-origin:left center;transform:rotate(var(--zap-angle,0deg));animation:zapBeam .82s steps(2,end) .08s forwards}
  .ellie-zap.target-right .zap-beam{position:absolute;z-index:4;left:var(--zap-x,18%);top:var(--zap-y,68%);width:var(--zap-len,72%);height:30px;background:linear-gradient(90deg,#fffbd1 0%,#ffe875 24%,#cc8cff 58%,#92e8ff 100%);clip-path:polygon(0 40%,10% 18%,18% 54%,28% 20%,38% 61%,49% 28%,60% 58%,70% 18%,80% 54%,90% 30%,100% 44%,100% 62%,91% 50%,81% 72%,70% 43%,61% 78%,49% 48%,38% 82%,28% 43%,18% 78%,10% 45%,0 64%);filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 11px #ffe877) drop-shadow(0 0 20px #b96fff);opacity:0;transform-origin:left center;transform:rotate(var(--zap-angle,0deg));animation:zapBeam .82s steps(2,end) .08s forwards}
}


/* Release 1.0.0 · Anleitung & Release-Info */
.release-meta{display:flex;align-items:center;justify-content:center;gap:8px 12px;flex-wrap:wrap;margin:4px auto 12px;color:#bdb2a4;font-size:.69rem;letter-spacing:.035em}
.release-meta strong{color:#f6d990;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase}
.release-meta span{position:relative}
.release-meta span+span::before{content:"·";position:absolute;left:-8px;color:#746b61}
.release-meta.compact{margin:12px auto 16px;font-size:.66rem}
.start-actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.secondary{border:1px solid rgba(231,194,114,.34);border-radius:999px;padding:12px 22px;background:rgba(255,255,255,.04);color:#eadfc9;font-weight:850;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);transition:.18s}
.secondary:hover{background:rgba(231,194,114,.10);border-color:rgba(231,194,114,.55);transform:translateY(-1px)}
.start-card{max-height:calc(100% - 12px);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(218,181,105,.4) rgba(255,255,255,.03)}

.help-overlay{z-index:160!important;padding:14px;background:rgba(2,3,6,.80)!important;backdrop-filter:blur(10px)!important}
.help-card{position:relative;width:min(930px,96vw);max-height:min(92vh,900px);overflow:auto;padding:30px 32px 28px;text-align:left;scrollbar-width:thin;scrollbar-color:rgba(218,181,105,.52) rgba(255,255,255,.035)}
.help-card h2{text-align:center;margin-top:.25em}
.help-card>.eyebrow{text-align:center}
.help-intro{max-width:780px;margin:0 auto 20px;text-align:center;font-size:.98rem}
.help-intro strong{color:#f7dfa5}
.help-close{position:sticky;z-index:5;float:right;top:0;margin:-10px -10px 0 0;width:42px;height:42px;border-radius:50%;border:1px solid rgba(238,203,128,.32);background:rgba(8,9,13,.88);color:#f5dba4;font-size:1.65rem;line-height:1;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.help-close:hover{filter:brightness(1.16)}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 22px}
.help-block{position:relative;padding:16px 17px;border-radius:18px;border:1px solid rgba(227,190,116,.17);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.help-block h3{margin:0 0 9px;color:#f5d897;font:700 1.04rem Georgia,"Times New Roman",serif}
.help-block p{margin:.36em 0;color:#d7cfc4;font-size:.86rem;line-height:1.47}
.help-block p strong{color:#f2e4c4}
.help-block.danger{border-color:rgba(210,103,91,.25);background:linear-gradient(180deg,rgba(113,35,38,.12),rgba(255,255,255,.015))}
.help-block.magic{border-color:rgba(187,128,255,.27);background:linear-gradient(180deg,rgba(99,57,137,.15),rgba(255,255,255,.015))}
.help-block.highspeed-help{border-color:rgba(90,203,255,.27);background:linear-gradient(180deg,rgba(42,104,139,.14),rgba(255,255,255,.015))}
.help-footer{padding-top:2px;text-align:center}
.help-footer>p{max-width:760px;margin:0 auto;color:#e3d7c4}

@media(max-width:800px){
  .release-meta{gap:5px 10px;font-size:.6rem;margin-bottom:8px}
  .release-meta strong{width:100%;text-align:center;font-size:.7rem}
  .release-meta span+span::before{left:-7px}
  .start-actions{gap:8px}
  .secondary,.primary{padding:11px 18px}
  .help-overlay{padding:7px}
  .help-card{width:96vw;max-height:94vh;padding:20px 13px 20px;border-radius:20px}
  .help-grid{grid-template-columns:1fr;gap:9px;margin-top:14px}
  .help-block{padding:13px 14px}
  .help-block h3{font-size:.98rem}
  .help-block p{font-size:.79rem}
  .help-intro{font-size:.86rem;margin-bottom:12px}
  .help-close{width:38px;height:38px;margin:-7px -2px 0 0}
}

/* Version 1.0.3 · Teilen */
.share-btn{white-space:nowrap}
.share-overlay{z-index:195!important;padding:16px;background:rgba(2,3,6,.78)!important;backdrop-filter:blur(10px)!important}
.share-card{position:relative;width:min(520px,94vw);padding:28px 26px 24px;text-align:center}
.share-card h2{margin:.25em 0 .45em}
.share-icon{font-size:2.25rem;line-height:1;margin-bottom:4px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.share-preview{max-width:430px;margin:0 auto 18px;color:#ddd2c4;line-height:1.5;font-size:.94rem}
.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 12px}
.share-option{display:flex;align-items:center;justify-content:center;min-height:48px;padding:11px 15px;border-radius:999px;border:1px solid rgba(231,194,114,.34);background:rgba(255,255,255,.05);color:#f0e5d1;font-weight:900;text-decoration:none;cursor:pointer;font:inherit;transition:.18s;box-sizing:border-box}
.share-option:hover{transform:translateY(-1px);background:rgba(231,194,114,.11);border-color:rgba(231,194,114,.56)}
.share-option.whatsapp{border-color:rgba(92,214,132,.34);background:rgba(47,143,82,.12)}
.share-option.whatsapp:hover{background:rgba(47,143,82,.22);border-color:rgba(92,214,132,.58)}
.share-status{min-height:1.3em;margin:4px 0 14px;color:#f5d998;font-weight:800;font-size:.82rem}
@media(max-width:800px){
  .share-card{padding:24px 16px 20px}
  .share-actions{grid-template-columns:1fr}
  .share-preview{font-size:.86rem}
  .share-option{min-height:46px}
  .start-actions .share-btn{flex-basis:100%;max-width:220px}
}

/* Große 10er-Meilensteine – unabhängig von normalen Nachrichten */
.milestone-splash{position:absolute;z-index:118;left:50%;top:42%;width:min(88vw,620px);transform:translate(-50%,-50%) scale(.72) rotate(-1deg);padding:20px 28px 24px;text-align:center;opacity:0;visibility:hidden;pointer-events:none;border:1px solid rgba(255,229,151,.62);border-radius:34px;background:radial-gradient(circle at 50% 20%,rgba(255,244,191,.22),transparent 34%),linear-gradient(135deg,rgba(38,16,66,.95),rgba(104,47,128,.94) 46%,rgba(18,16,36,.96));box-shadow:0 20px 48px rgba(0,0,0,.48),0 0 34px rgba(203,118,255,.28),inset 0 1px 0 rgba(255,255,255,.22);backdrop-filter:blur(8px);overflow:hidden}
.milestone-splash::before,.milestone-splash::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.milestone-splash::before{inset:-42% 18% 42%;border:2px solid rgba(255,215,117,.32);box-shadow:0 0 28px rgba(255,206,99,.22);animation:milestoneRuneSpin 4s linear infinite}
.milestone-splash::after{left:10%;right:10%;bottom:9px;height:34px;border-radius:999px;background:radial-gradient(ellipse,rgba(90,214,255,.25),rgba(206,117,255,.10) 56%,transparent 74%);filter:blur(7px)}
.milestone-splash.show{visibility:visible;animation:milestonePop 3.25s cubic-bezier(.18,.82,.2,1) both}
.milestone-runes{position:relative;z-index:1;margin-bottom:2px;color:#ffd975;font-size:1rem;letter-spacing:.55em;text-indent:.55em;text-shadow:0 0 14px rgba(255,214,107,.7)}
.milestone-splash strong{position:relative;z-index:1;display:block;font:900 clamp(2.8rem,8vw,6rem)/.9 Georgia,serif;letter-spacing:.04em;color:#fff0ad;text-shadow:0 5px 18px rgba(0,0,0,.75),0 0 18px rgba(255,207,94,.48);-webkit-text-stroke:1px rgba(84,44,15,.22)}
.milestone-splash span{position:relative;z-index:1;display:block;margin-top:12px;font-weight:950;font-size:clamp(1.05rem,2.7vw,1.65rem);line-height:1.15;color:#f7d8ff;text-shadow:0 3px 12px rgba(0,0,0,.72),0 0 16px rgba(219,116,255,.42)}
@keyframes milestonePop{0%{opacity:0;transform:translate(-50%,-50%) scale(.64) rotate(-2deg)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.06) rotate(.8deg)}22%,78%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg)}100%{opacity:0;transform:translate(-50%,-58%) scale(1.08) rotate(1deg)}}
@keyframes milestoneRuneSpin{to{transform:rotate(360deg)}}
@media(max-width:700px){.milestone-splash{top:45%;width:min(86vw,420px);padding:17px 16px 20px;border-radius:28px}.milestone-splash strong{font-size:clamp(2.6rem,16vw,4.6rem)}.milestone-splash span{font-size:clamp(.98rem,4.7vw,1.3rem);padding:0 4px}}


/* Version 1.1.0 · MOBILE FIRST / AUFGERÄUMTES SPIELFELD */
.info-stack{
  position:absolute;z-index:86;left:10px;top:10px;width:min(42vw,360px);
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none;
}
.info-stack .message{
  position:relative;left:auto;top:auto;transform:none;max-width:100%;padding:0;
  border-radius:12px;background:transparent;border:none;font-size:.78rem;line-height:1.3;
  white-space:normal;text-align:left;opacity:0;display:none;backdrop-filter:none;box-shadow:none;
}
.info-stack .message.show{display:block;opacity:1;transform:none}
.message-entry{position:relative;overflow:hidden;padding:9px 12px 9px 16px;color:#f8e8bf;text-shadow:0 2px 5px #000;animation:messageSlideIn .34s cubic-bezier(.22,.8,.28,1);background:linear-gradient(90deg,rgba(8,9,14,.94),rgba(18,14,29,.84));border:1px solid rgba(231,194,114,.24);border-left:4px solid rgba(198,132,255,.92);border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.message-entry + .message-entry{margin-top:6px;color:#ddd2c2}
.message-entry.exit-right{animation:messageSlideOut .5s cubic-bezier(.4,0,.8,.2) forwards!important}
.message-entry.ellie-msg{border-left-color:#ffd26e;background:linear-gradient(90deg,rgba(50,16,72,.96),rgba(25,13,36,.86))}
.message-entry.milestone-msg{border-left-color:#7fe5ff;background:linear-gradient(90deg,rgba(19,46,72,.96),rgba(37,16,55,.88));color:#fff1bd;font-weight:950}
@keyframes messageSlideIn{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes messageSlideOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translateX(calc(100vw + 80px)) scale(.96)}}
.info-stack .spell-banter{
  position:relative;z-index:1;left:auto;top:auto;transform:translateX(-28px);opacity:0;
  max-width:100%;padding:9px 12px 9px 16px;border-radius:14px;font-size:.78rem;line-height:1.28;text-align:left;
  background:linear-gradient(90deg,rgba(63,18,86,.88),rgba(90,29,124,.72));border:1px solid rgba(216,135,255,.26);border-left:4px solid rgba(238,189,94,.96);box-shadow:0 10px 24px rgba(112,38,153,.24);
}
.info-stack .spell-banter.show{opacity:1;transform:none}

/* 10er-Meilensteine: kleine Ecke statt Bildschirmblocker */
.milestone-splash{
  left:auto;right:10px;top:10px;width:min(34vw,300px);transform:translateY(-10px) scale(.96);
  padding:9px 12px 11px;border-radius:15px;text-align:right;backdrop-filter:blur(6px);
  background:linear-gradient(135deg,rgba(38,16,66,.90),rgba(104,47,128,.88) 54%,rgba(18,16,36,.92));
  box-shadow:0 12px 28px rgba(0,0,0,.34),0 0 22px rgba(203,118,255,.18);
}
.milestone-splash::before,.milestone-splash::after{display:none}
.milestone-runes{font-size:.62rem;letter-spacing:.28em;margin:0 0 2px}
.milestone-splash strong{font-size:clamp(1.2rem,3.2vw,2rem);line-height:1;letter-spacing:.03em;-webkit-text-stroke:0}
.milestone-splash span{margin-top:5px;font-size:clamp(.68rem,1.5vw,.88rem);line-height:1.2}
.milestone-splash.show{visibility:visible;animation:milestoneCorner 3s ease both}
@keyframes milestoneCorner{0%{opacity:0;transform:translateY(-12px) scale(.94)}12%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px) scale(.98)}}

/* Anleitung: exakt die Spielobjekte als ruhiges Lexikon */
.grape-guide{margin:0 0 16px;padding:15px;border:1px solid rgba(231,194,114,.20);border-radius:18px;background:rgba(255,255,255,.025);text-align:left}
.grape-guide h3{margin:0 0 5px;color:#f4d68e}
.grape-guide>p{margin:0 0 13px;font-size:.86rem;color:#cfc5b6}
.grape-guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.guide-grape{min-height:118px;padding:9px 6px;border-radius:13px;border:1px solid rgba(231,194,114,.12);background:rgba(0,0,0,.20);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center}
.guide-grape.danger{border-color:rgba(255,110,110,.24);background:rgba(75,12,22,.16)}
.guide-grape strong{font-size:.75rem;color:#f5e0b6;margin-top:7px}
.guide-grape span{font-size:.66rem;color:#bfb5a7;margin-top:2px}
.guide-visual{position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;width:72px;height:62px;display:grid;place-items:center;transform:none!important;filter:none!important}
.guide-visual .grape-bunch{transform:scale(.94)}
.guide-visual.item.life::before{top:-7px;font-size:.5rem}
.guide-visual.item.rotten::before{top:-8px;font-size:.48rem}
.guide-visual.item.rotten::after{width:56px;height:56px}
.guide-visual.item.rotten .grape-bunch{transform:scale(1.05)}
.guide-visual .face-grape{width:57px;height:57px}
.guide-visual .cookie,.guide-visual .junk{font-size:34px}

/* Figuren auf Handy weniger dominant */
@media(max-width:800px){
  .rausch-wrap{top:124px;right:8px;left:auto;transform:none;width:min(39vw,176px)}
  .rausch-label{font-size:.72rem}.rausch-label b{font-size:.84rem;white-space:nowrap}.rausch-bar{height:10px}
  .info-stack{left:7px;top:8px;width:min(52vw,220px);gap:5px}
  .info-stack .message,.info-stack .spell-banter{font-size:.68rem;padding:6px 8px;border-radius:10px;line-height:1.24}
  .zarah-event{width:min(28vw,126px)!important;height:24%!important;top:1%!important}
  .portal-event{width:min(34vw,160px)!important;height:150px!important;top:58px!important;right:0!important;left:auto!important}
  .portal-event img{height:126px!important;top:16px!important;max-width:96%!important;right:0!important;left:auto!important}
  .portal-ring{width:124px!important;height:58px!important;right:2px!important;top:52px!important}
  .milestone-splash{right:7px;top:7px;width:min(39vw,170px);padding:7px 8px 8px;border-radius:12px}
  .milestone-runes{display:none}
  .milestone-splash strong{font-size:1.05rem}
  .milestone-splash span{font-size:.59rem;margin-top:3px}
  .grape-guide-grid{grid-template-columns:repeat(2,1fr)}
  .guide-grape{min-height:108px}
  .float-score{font-size:1.13rem}
  .float-score.lifeplus,.float-score.lifeminus{font-size:1.52rem}
  .big-reaction img{width:min(38vw,155px);max-width:42%}
  .big-reaction.show img{opacity:.18;transform:scale(.90) translateY(0)}
}

/* Querformat auf Handys: echtes Spiel-Layout statt gequetschtem Hochformat */
@media (orientation:landscape) and (max-height:650px){
  #app,.game-shell{width:100vw;height:100dvh;min-height:0;max-width:none;border:0}
  .hud{min-height:58px;height:58px;padding:5px 8px;align-items:center;gap:7px}
  .brand{min-width:128px}.brand strong{font-size:.82rem}.kicker{font-size:.47rem}
  .level-box{position:static;display:block;min-width:105px;padding:3px 8px;border-left:1px solid rgba(218,181,109,.22);border-top:0;border-right:0;border-bottom:0;border-radius:0;background:transparent}
  .level-box span{font-size:.82rem}.level-box strong{font-size:.58rem}
  .hud-stats{display:flex;margin-left:auto;gap:4px}.stat{min-width:58px;padding:3px 5px}.stat span{font-size:.43rem}.stat strong{font-size:.78rem}
  .hud-actions{flex-direction:row;gap:3px}.icon-btn{width:30px;height:30px;font-size:.8rem}
  .playfield{inset:58px 0 0}
  .rausch-wrap{top:60px;right:8px;left:auto;transform:none;width:min(22vw,210px)}.rausch-label{font-size:.58rem}.rausch-label b{font-size:.67rem;white-space:nowrap}.rausch-bar{height:7px;margin-top:3px}
  .ellie{height:53%;max-width:25%}.ellie-spell{height:50%;max-width:25%}
  .sera{width:clamp(76px,11vw,106px)}
  .info-stack{top:8px;left:7px;width:min(30vw,250px)}
  .milestone-splash{top:7px;right:7px;width:min(27vw,210px)}
  .portal-event{width:min(20vw,180px)!important;height:150px!important;top:42px!important;right:0!important;left:auto!important}.portal-event img{height:126px!important;top:8px!important;right:0!important;left:auto!important}
  .portal-ring{width:126px!important;height:56px!important;right:0!important;top:42px!important}
  .zarah-event{width:min(18vw,135px)!important;height:28%!important;top:1%!important}
  .level-splash{bottom:3px;width:min(34vw,260px);padding:5px 10px 7px}.level-splash span{font-size:.48rem}.level-splash strong{font-size:.82rem}
  .card{max-height:92dvh;overflow:auto;padding:16px}.start-card{width:min(760px,94vw)}
  .start-card .screen-sera-wrap{display:none}.rules{margin:10px 0}.card p{line-height:1.35}
}

/* 1.2.0: alle Meldungen laufen über die Slider-Leiste */
.info-stack .spell-banter{display:none!important}
.milestone-splash{display:none!important}
.secondary.home-link{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.start-record{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;align-items:center;width:min(420px,92%);margin:8px auto 14px;padding:11px 14px;border:1px solid rgba(231,194,114,.22);border-radius:16px;background:rgba(255,255,255,.025)}
.start-record span{grid-column:1/-1;color:#a99f91;font-size:.65rem;text-transform:uppercase;letter-spacing:.12em}
.start-record strong{color:#f6d990;font-size:1.18rem}.start-record b{color:#e7dcca;font-size:.78rem;font-weight:800}

@media(max-width:800px){
  .info-stack .message{width:100%;max-width:100%}
  .message-entry{padding:7px 9px 7px 12px;border-radius:11px;font-size:.66rem;line-height:1.22;box-shadow:0 6px 16px rgba(0,0,0,.26)}
  .start-record{width:min(340px,94%);padding:9px 11px;margin:6px auto 11px}.start-record strong{font-size:1rem}.start-record b{font-size:.7rem}
  .start-actions .home-link{flex-basis:100%;max-width:230px}
}

/* =========================================================
   1.4.4 · Audio-Mix + Statistik-Share + größeres 7R-Logo
   ========================================================= */
.realm-logo{display:block;height:auto;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.28))}
.realm-logo-start{width:min(225px,46vw);margin:0 auto 2px;opacity:.70}
.realm-logo-help{width:min(205px,42vw);margin:0 auto 2px;opacity:.58}
.start-card{position:relative;padding-top:22px}
.start-fullscreen-top{position:absolute!important;right:12px;top:10px;z-index:4;padding:8px 12px!important;border-color:rgba(244,205,112,.52)!important;background:rgba(25,20,12,.90)!important;color:#ffe9aa!important;font-weight:950!important;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.start-intro{max-width:510px;margin:7px auto 4px!important;font-size:.88rem;line-height:1.38!important}
.start-card .screen-sera-wrap{margin:4px 0 3px}
.start-card .screen-sera{width:min(112px,25vw)}
.compact-actions{gap:7px!important;margin-top:5px!important}
.compact-actions .primary,.compact-actions .secondary{padding:9px 14px!important;font-size:.76rem!important;min-height:38px}
.fullscreen-tip{margin:7px 0 0!important;font-size:.67rem!important;color:#978e82!important}
.start-card .rules{display:none!important}

/* Slider: nur noch kleine, einzeilige Hinweise. Wichtige Dinge poppen mittig auf. */
.info-stack{width:min(31vw,270px);gap:5px}
.message-entry{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:7px 10px 7px 13px;font-size:.69rem;line-height:1.15;border-radius:11px}
.message-entry + .message-entry{margin-top:4px}
@media(max-width:800px) and (orientation:portrait){
  .info-stack{left:7px;top:58px;width:min(47vw,205px);gap:4px}
  .message-entry{font-size:.61rem;line-height:1.1;padding:6px 8px 6px 10px;border-radius:9px}
  .rausch-wrap{z-index:91}
}
@media(max-width:800px){
  .start-card{width:min(520px,95vw);padding:16px 13px 14px!important;max-height:94dvh;overflow:auto}
  .realm-logo-start{width:min(180px,42vw);margin-bottom:0}
  .start-fullscreen-top{right:8px;top:7px;padding:7px 9px!important;font-size:.69rem!important}
  .start-card h1{font-size:clamp(1.55rem,8vw,2.25rem)!important;margin:.16em 0 .25em!important}
  .start-card .eyebrow{margin:1px 0!important;font-size:.54rem!important}
  .start-card .release-meta{margin:4px auto!important;gap:4px!important;font-size:.58rem!important}
  .start-card .start-record{margin:5px auto 6px!important;padding:7px 9px!important}
  .start-intro{font-size:.72rem!important;line-height:1.26!important;margin:4px auto 2px!important}
  .start-card .screen-sera-wrap{margin:1px 0!important}
  .start-card .screen-sera{width:min(82px,20vw)!important}
  .compact-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:min(330px,94%);margin:3px auto 0!important;gap:5px!important}
  .compact-actions .primary,.compact-actions .secondary{padding:7px 9px!important;font-size:.66rem!important;min-height:33px!important}
  .compact-actions .home-link{flex-basis:auto!important;max-width:none!important}
  .fullscreen-tip{font-size:.58rem!important;margin-top:5px!important}
}
@media (orientation:landscape) and (max-height:650px){
  .start-card{max-height:96dvh;overflow:auto;padding:11px 14px!important}
  .realm-logo-start{width:min(160px,24vw)}
  .start-card h1{font-size:1.55rem!important;margin:.05em 0 .15em!important}
  .start-card .screen-sera-wrap{display:none!important}
  .start-intro{font-size:.68rem!important;max-width:560px;margin:2px auto!important}
  .start-record{margin:3px auto 4px!important;padding:5px 9px!important}
  .compact-actions{grid-template-columns:repeat(4,minmax(0,1fr));width:min(620px,94%)}
  .fullscreen-tip{margin-top:3px!important}
  .info-stack{top:7px;left:7px;width:min(24vw,220px)}
  .message-entry{font-size:.58rem;padding:5px 7px 5px 9px}
}

/* 7R-Bonuslevel */
.logo-bonus-countdown{position:absolute;z-index:132;left:50%;top:47%;transform:translate(-50%,-50%) scale(.82);display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:min(78vw,520px);padding:19px 26px 22px;border:1px solid rgba(255,220,121,.58);border-radius:30px;background:radial-gradient(circle at 50% 24%,rgba(255,226,114,.22),transparent 38%),linear-gradient(135deg,rgba(26,18,9,.93),rgba(67,45,18,.92) 48%,rgba(13,10,8,.95));box-shadow:0 20px 48px rgba(0,0,0,.52),0 0 34px rgba(255,193,70,.23);opacity:0;visibility:hidden;pointer-events:none;text-align:center}
.logo-bonus-countdown.show{opacity:1;visibility:visible;animation:logoBonusCountPop .62s cubic-bezier(.18,.85,.22,1) both}
.logo-bonus-countdown span{font-weight:1000;letter-spacing:.22em;color:#e7c36c;font-size:.76rem;text-shadow:0 3px 8px #000}
.logo-bonus-countdown strong{font:1000 clamp(4.8rem,14vw,9rem)/.82 Georgia,serif;color:#fff0ad;text-shadow:0 4px 16px #000,0 0 22px rgba(255,211,94,.54)}
.logo-bonus-countdown b{margin-top:8px;color:#fff5d5;font-size:clamp(.9rem,2vw,1.2rem)}
@keyframes logoBonusCountPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.68)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.logo-bonus-timer{position:absolute;z-index:126;right:12px;top:70px;display:flex;align-items:center;gap:7px;padding:6px 10px 6px 7px;border:1px solid rgba(255,221,121,.48);border-radius:999px;background:rgba(12,10,7,.78);backdrop-filter:blur(6px);box-shadow:0 8px 20px rgba(0,0,0,.3),0 0 18px rgba(255,197,73,.13);opacity:0;visibility:hidden;pointer-events:none}
.logo-bonus-timer.show{opacity:1;visibility:visible}
.logo-bonus-timer img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 0 7px rgba(255,214,88,.55))}
.logo-bonus-timer span{font-size:.55rem;letter-spacing:.12em;color:#d8bb71;font-weight:950}
.logo-bonus-timer strong{font-size:1rem;color:#fff0b0;min-width:38px;text-align:right}
.logo-bonus-target{position:absolute;z-index:121;width:clamp(78px,8.6vw,112px);height:auto;object-fit:contain;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 0 10px rgba(255,226,114,.86)) drop-shadow(0 0 23px rgba(255,165,38,.42));will-change:left,top,transform;animation:logoTargetShimmer .7s ease-in-out infinite alternate}
.logo-bonus-target.show{opacity:1;visibility:visible}
.logo-bonus-target.launching{animation:logoLaunchSpin .34s linear infinite;filter:drop-shadow(0 0 16px rgba(255,236,137,1)) drop-shadow(0 0 34px rgba(255,147,35,.66))}
.logo-bonus-target.blink-out{opacity:0!important;transform:translate(-50%,-50%) scale(.28) rotate(24deg)!important;transition:opacity .08s,transform .12s;filter:drop-shadow(0 0 30px rgba(170,103,255,.92))}
.logo-bonus-target.catchable{filter:drop-shadow(0 0 19px rgba(255,250,190,1)) drop-shadow(0 0 38px rgba(112,219,255,.86));animation:logoCatchWindow .22s ease-in-out infinite alternate}
.ellie.logo-throw.side-right{transform:rotate(-7deg) translate(-10px,-7px) scale(1.015)}
.ellie.logo-throw.side-left{transform:scaleX(-1) rotate(7deg) translate(-10px,-7px) scale(1.015)}
@keyframes logoTargetShimmer{to{filter:drop-shadow(0 0 17px rgba(255,239,152,1)) drop-shadow(0 0 30px rgba(255,170,42,.62));transform:translate(-50%,-50%) scale(1.045) rotate(2deg)}}
@keyframes logoLaunchSpin{to{transform:translate(-50%,-50%) rotate(360deg) scale(1.06)}}
@keyframes logoCatchWindow{to{transform:translate(-50%,-50%) scale(1.10);filter:drop-shadow(0 0 23px rgba(255,252,205,1)) drop-shadow(0 0 48px rgba(105,223,255,.98))}}
.game-shell.logo-bonus .scene-shade{background:radial-gradient(circle at 50% 42%,rgba(255,188,56,.08),rgba(4,5,8,.35) 46%,rgba(2,3,5,.65))}
.game-shell.logo-bonus .rausch-wrap{opacity:.25}
.game-shell.logo-bonus .highspeed-badge{display:none!important}
.game-shell.logo-bonus .mouse-peek{display:none!important}
.game-shell.logo-bonus .ellie{filter:drop-shadow(0 7px 9px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(232,147,255,.25))}

/* Zarah klaut beim verlorenen 7R-Bonus das Logo und macht sich damit davon. */
.zarah-event.bonus-snatch{z-index:134!important;width:min(34vw,350px)!important;height:42%!important;top:14%!important;opacity:1!important}
.zarah-event.bonus-snatch.from-left.show{animation:zarahBonusSnatchL 3.7s cubic-bezier(.32,.02,.36,1) forwards!important}
.zarah-event.bonus-snatch.from-right.show{animation:zarahBonusSnatchR 3.7s cubic-bezier(.32,.02,.36,1) forwards!important}
.zarah-event.bonus-snatch .logo-bonus-target.captured{display:block!important;visibility:visible!important;opacity:1!important;position:absolute!important;left:50%!important;top:48%!important;width:37%!important;height:auto!important;transform:translate(-50%,-50%) rotate(-9deg)!important;filter:drop-shadow(0 0 12px rgba(255,226,114,.95))!important;animation:none!important;pointer-events:none!important}
@keyframes zarahBonusSnatchL{0%{left:-42%;transform:rotate(-7deg)}32%{left:34%;transform:rotate(4deg)}58%{left:38%;transform:rotate(-2deg)}100%{left:118%;transform:rotate(22deg) translateY(-30%)}}
@keyframes zarahBonusSnatchR{0%{right:-42%;transform:scaleX(-1) rotate(-7deg)}32%{right:34%;transform:scaleX(-1) rotate(4deg)}58%{right:38%;transform:scaleX(-1) rotate(-2deg)}100%{right:118%;transform:scaleX(-1) rotate(22deg) translateY(-30%)}}

@media(max-width:800px){
  .logo-bonus-countdown{min-width:min(84vw,340px);padding:14px 16px 16px;border-radius:23px}
  .logo-bonus-countdown strong{font-size:clamp(4rem,22vw,6.5rem)}
  .logo-bonus-countdown b{font-size:.78rem}
  .logo-bonus-timer{top:61px;right:7px;padding:4px 7px 4px 5px}.logo-bonus-timer img{width:22px;height:22px}.logo-bonus-timer span{font-size:.46rem}.logo-bonus-timer strong{font-size:.82rem;min-width:31px}
  .logo-bonus-target{width:clamp(67px,18vw,92px)}
  .zarah-event.bonus-snatch{width:min(48vw,205px)!important;height:34%!important;top:20%!important}
}
@media (orientation:landscape) and (max-height:650px){
  .logo-bonus-countdown{min-width:min(58vw,480px);padding:10px 18px 12px}.logo-bonus-countdown strong{font-size:4.2rem}.logo-bonus-countdown b{font-size:.72rem;margin-top:3px}
  .logo-bonus-timer{top:63px;right:8px}
  .logo-bonus-target{width:clamp(63px,7.6vw,88px)}
  .zarah-event.bonus-snatch{width:min(24vw,220px)!important;height:48%!important;top:18%!important}
}
/* Mit vier HUD-Schaltern im Hochformat als 2x2-Block, damit der Header nicht höher als das Spielfeld-Inset wird. */
@media(max-width:800px) and (orientation:portrait){
  .hud-actions{display:grid!important;grid-template-columns:repeat(2,32px);grid-auto-rows:32px;gap:4px!important;align-self:flex-start}
  .hud-actions .icon-btn{width:32px!important;height:32px!important}
}


/* Spielstatistik */
.stats-overlay{z-index:185!important;padding:12px;background:rgba(1,2,6,.82)!important;backdrop-filter:blur(11px)!important}
.stats-card{position:relative;width:min(820px,96vw);max-height:92dvh;overflow:auto;padding:28px 28px 24px;text-align:left;scrollbar-width:thin;scrollbar-color:rgba(218,181,105,.5) rgba(255,255,255,.035)}
.stats-card>.eyebrow,.stats-card>h2,.stats-card>.stats-summary,.stats-card>.stats-note{text-align:center}
.stats-summary{margin:4px auto 18px;padding:10px 14px;max-width:620px;border:1px solid rgba(211,166,91,.20);border-radius:14px;background:rgba(255,255,255,.035);color:#ddd1bf!important}
.stats-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.stats-section{border:1px solid rgba(221,187,117,.18);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018));overflow:hidden}
.stats-section h3{margin:0;padding:11px 13px;border-bottom:1px solid rgba(221,187,117,.14);font:800 .9rem Georgia,serif;color:#f1d69c;background:rgba(118,77,143,.08)}
.stats-head,.stats-row{display:grid;grid-template-columns:minmax(0,1fr) 64px 72px;align-items:center;gap:6px}
.stats-head{padding:7px 11px 4px;color:#8f8795;font-size:.57rem;text-transform:uppercase;letter-spacing:.08em;text-align:right}
.stats-list{padding:0 9px 8px}
.stats-row{min-height:30px;padding:5px 3px;border-top:1px solid rgba(255,255,255,.035)}
.stats-row span{font-size:.78rem;color:#d8cdbc}
.stats-row strong{text-align:right;font-size:.86rem;color:#fff0c8;font-variant-numeric:tabular-nums}
.stats-row strong:last-child{color:#ceb9ff}
.stats-note{font-size:.67rem;color:#918a80!important;margin:13px 0 16px!important}
.stats-card>.primary{display:block;margin:0 auto}
.stats-link{border-color:rgba(178,139,230,.34)!important;background:linear-gradient(180deg,rgba(85,48,112,.38),rgba(30,20,42,.54))!important}
@media(max-width:680px){.stats-card{padding:20px 12px 18px}.stats-body{grid-template-columns:1fr}.stats-head,.stats-row{grid-template-columns:minmax(0,1fr) 58px 65px}.stats-card h2{font-size:1.55rem}.night-event-hud{top:84px;right:8px;padding:6px 9px}.night-event-hud span{font-size:.57rem}.night-event-hud strong{font-size:1.15rem}}


/* 1.4.4 · Statistik teilen */
.stats-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.stats-actions .primary,.stats-actions .secondary{margin:0;min-width:190px}
.stats-share-btn{background:linear-gradient(180deg,rgba(110,67,151,.76),rgba(55,31,76,.88))!important;border-color:rgba(205,168,255,.52)!important}
@media(max-width:520px){.stats-actions{display:grid;grid-template-columns:1fr}.stats-actions .primary,.stats-actions .secondary{width:100%;min-width:0}}


/* ===== Version 1.4.6: Music volume, Highspeed Dodge, 7R guard ===== */
.music-control{position:relative;width:40px;height:40px;flex:0 0 auto}
.music-control>.icon-btn{width:100%;height:100%}
.music-volume-panel{position:absolute;z-index:260;top:calc(100% + 9px);right:-43px;width:238px;height:48px;display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid rgba(240,205,129,.32);border-radius:15px;background:rgba(5,7,11,.96);box-shadow:0 12px 34px rgba(0,0,0,.55),0 0 22px rgba(219,176,82,.10);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transform:translateY(-5px) scale(.97);transform-origin:top right;transition:.16s;pointer-events:none}
.music-volume-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto}
.music-volume-panel::before{content:"";position:absolute;right:52px;top:-6px;width:10px;height:10px;transform:rotate(45deg);background:rgba(5,7,11,.96);border-left:1px solid rgba(240,205,129,.28);border-top:1px solid rgba(240,205,129,.28)}
.music-volume-panel input[type="range"]{width:128px;accent-color:#e8ba63;cursor:pointer}
.music-volume-panel strong{min-width:37px;text-align:right;font-size:.69rem;color:#ffe6a9;font-variant-numeric:tabular-nums}
.music-mute-btn{width:31px;height:31px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font-size:.86rem}

.highspeed-layer{position:absolute;z-index:17;inset:0;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s}
.highspeed-layer.show{opacity:1;visibility:visible}
.highspeed-object{position:absolute;left:0;top:0;line-height:1;will-change:transform;filter:drop-shadow(0 4px 7px rgba(0,0,0,.65));user-select:none}
.highspeed-object.hs-cloud{opacity:.72;filter:drop-shadow(0 4px 9px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(212,231,255,.28))}
.highspeed-object.hs-star{color:#fff2a3;text-shadow:0 0 12px rgba(255,235,143,.95),0 0 26px rgba(106,193,255,.6)}
.highspeed-object.hs-screw{filter:drop-shadow(0 0 6px rgba(188,215,236,.55)) drop-shadow(0 5px 8px rgba(0,0,0,.7))}
.highspeed-object.hs-feather{opacity:.92;filter:drop-shadow(0 0 7px rgba(255,255,255,.35)) drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.highspeed-object.hit{opacity:.12!important;transform:scale(1.35)!important;transition:opacity .08s,transform .08s}
.highspeed-hud{position:absolute;z-index:58;left:50%;top:15%;transform:translate(-50%,-8px);display:flex;align-items:baseline;gap:8px;padding:7px 12px;border:1px solid rgba(103,220,255,.55);border-radius:999px;background:rgba(3,13,22,.78);box-shadow:0 0 26px rgba(58,198,255,.22);backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:.2s;pointer-events:none}
.highspeed-hud.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.highspeed-hud span{font-size:.68rem;font-weight:1000;letter-spacing:.13em;color:#dffaff}
.highspeed-hud strong{font-size:1.3rem;color:#fff3ad;font-variant-numeric:tabular-nums}
.highspeed-hud b{font-size:.58rem;letter-spacing:.09em;color:#8eeeff}
.game-shell.highspeed .highspeed-badge{display:none}
.game-shell.highspeed .ellie,.game-shell.highspeed .ellie-spell,.game-shell.highspeed .portal-event,.game-shell.highspeed .broom-event,.game-shell.highspeed .zarah-event,.game-shell.highspeed .sera-shield{opacity:0!important;visibility:hidden!important}
.game-shell.highspeed .item{display:none!important}
.game-shell.highspeed .sera.highspeed-fly{width:clamp(112px,12vw,170px);filter:drop-shadow(0 0 12px rgba(111,220,255,.7)) drop-shadow(0 0 28px rgba(60,127,255,.34)) drop-shadow(0 8px 12px rgba(0,0,0,.72));animation:hsSeraFloat .45s ease-in-out infinite alternate}
.game-shell.highspeed.highspeed-hit .sera{filter:drop-shadow(0 0 16px #fff) drop-shadow(0 0 30px rgba(255,79,79,.95));transform:translate3d(-50%,-50%,0) scale(.94) rotate(-3deg)}
@keyframes hsSeraFloat{to{transform:translate3d(-50%,-52%,0) rotate(1.4deg)}}
.game-shell.highspeed .highspeed-video{filter:brightness(.76) saturate(1.10) contrast(1.03)}
.game-shell.highspeed .weather-layer{opacity:.82;background:repeating-linear-gradient(99deg,transparent 0 46px,rgba(215,239,255,.16) 50px,transparent 56px);animation:speedLines .28s linear infinite}

.logo-bonus-guard{position:absolute;z-index:120;width:148px;height:58px;opacity:0;visibility:hidden;pointer-events:none;transform-origin:50% 50%;will-change:left,top,transform;filter:drop-shadow(0 0 9px rgba(170,89,255,.74));transition:opacity .08s}
.logo-bonus-guard::before{content:"";position:absolute;inset:7px 4px;border-radius:60% 18% 18% 60%;background:linear-gradient(90deg,rgba(119,53,225,.05),rgba(143,75,255,.35) 36%,rgba(202,136,255,.82) 76%,rgba(255,225,126,.94));clip-path:polygon(0 18%,100% 0,100% 100%,0 82%,25% 50%);box-shadow:0 0 12px rgba(149,79,255,.9),inset 0 0 12px rgba(255,255,255,.35);animation:logoGuardPulse .42s ease-in-out infinite alternate}
.logo-bonus-guard::after{content:"✦";position:absolute;right:-18px;top:50%;transform:translateY(-50%);font-size:25px;color:#ffe89b;text-shadow:0 0 8px #fff,0 0 18px #72dfff}
.logo-bonus-guard.show{opacity:.92;visibility:visible}
.logo-bonus-guard.open::after{font-size:31px;color:#dffcff;animation:logoGateOpen .22s ease-in-out infinite alternate}
.logo-bonus-guard.open::before{background:linear-gradient(90deg,rgba(82,47,185,.03),rgba(125,83,230,.24) 42%,rgba(98,223,255,.68) 78%,rgba(255,241,157,.98))}
.logo-bonus-guard.guard-hit{filter:drop-shadow(0 0 18px #fff) drop-shadow(0 0 36px #ab65ff);opacity:1}
@keyframes logoGuardPulse{to{transform:scaleY(1.12);filter:brightness(1.18)}}
@keyframes logoGateOpen{to{transform:translateY(-50%) scale(1.24);text-shadow:0 0 13px #fff,0 0 28px #61dfff}}

@media(max-width:800px){
  .music-control{width:34px;height:34px}
  .music-volume-panel{right:-38px;width:218px;height:44px;padding:6px 8px;gap:6px}
  .music-volume-panel input[type="range"]{width:114px}
  .highspeed-hud{top:17%;padding:6px 9px;gap:6px}.highspeed-hud span{font-size:.57rem}.highspeed-hud strong{font-size:1.12rem}.highspeed-hud b{font-size:.5rem}
  .game-shell.highspeed .sera.highspeed-fly{width:clamp(98px,24vw,132px)}
  .logo-bonus-guard{width:112px;height:46px}.logo-bonus-guard::after{right:-14px;font-size:21px}.logo-bonus-guard.open::after{font-size:26px}
}
@media(max-height:520px) and (orientation:landscape){
  .music-control{width:30px;height:30px}
  .music-volume-panel{top:34px;right:-36px;width:210px;height:40px}
  .highspeed-hud{top:13%;}
  .game-shell.highspeed .sera.highspeed-fly{width:clamp(92px,12vw,122px)}
}


/* ===== Version 1.4.6: Overlay music controls + tuned logo/highspeed ===== */
.overlay-music-wrap{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:10px}
.music-open-btn{min-width:210px}
.overlay-music-panel{display:none;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border:1px solid rgba(240,205,129,.26);border-radius:14px;background:rgba(7,9,13,.92);box-shadow:0 10px 24px rgba(0,0,0,.32)}
.overlay-music-panel.open{display:flex}
.overlay-music-panel input[type="range"]{width:min(46vw,220px);accent-color:#e8ba63}
.overlay-music-panel strong{min-width:40px;text-align:right;font-size:.74rem;color:#ffe6a9;font-variant-numeric:tabular-nums}
.zarah-event.bonus-snatch.from-right .logo-bonus-target.captured{transform:translate(-50%,-50%) scaleX(-1) rotate(9deg)!important}
.logo-bonus-guard{filter:drop-shadow(0 0 7px rgba(170,89,255,.42));}
.logo-bonus-guard::before{background:linear-gradient(90deg,rgba(119,53,225,.01),rgba(143,75,255,.16) 36%,rgba(202,136,255,.34) 76%,rgba(255,225,126,.48));box-shadow:0 0 8px rgba(149,79,255,.46),inset 0 0 10px rgba(255,255,255,.16)}
.logo-bonus-guard::after{text-shadow:0 0 6px rgba(255,255,255,.72),0 0 12px rgba(114,223,255,.36)}
.logo-bonus-guard.show{opacity:.56;visibility:visible}
.logo-bonus-guard.open::before{background:linear-gradient(90deg,rgba(82,47,185,.01),rgba(125,83,230,.10) 42%,rgba(98,223,255,.34) 78%,rgba(255,241,157,.62))}
@media (max-width:760px){.overlay-music-panel input[type="range"]{width:min(54vw,185px)}}


/* ===== Version 1.4.7 fine tuning ===== */
/* 7R chase intentionally unchanged after 1.4.6 approval. */


/* ===== Version 1.4.8: Lady Chaos Night ===== */
.game-shell.chaos-night .ellie,
.game-shell.chaos-night .ellie-spell,
.game-shell.chaos-night .portal-event,
.game-shell.chaos-night .broom-event,
.game-shell.chaos-night .zarah-event,
.game-shell.chaos-night .sera-shield{opacity:0!important;visibility:hidden!important}
.game-shell.chaos-night .rausch-wrap{opacity:.08!important}
.chaos-intro{position:absolute;z-index:116;inset:5% 5% 8%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:.38s}
.chaos-intro.show{opacity:1;visibility:visible}
.chaos-intro img{max-width:min(78%,900px);max-height:72%;object-fit:contain;filter:drop-shadow(0 22px 36px rgba(0,0,0,.72))}
.chaos-intro div{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);min-width:min(78%,600px);padding:10px 18px;border:1px solid rgba(231,190,255,.42);border-radius:16px;background:rgba(8,7,17,.88);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 22px rgba(158,74,255,.20);text-align:center}
.chaos-intro span{display:block;color:#e9dcff;font-size:.8rem;letter-spacing:.08em}
.chaos-intro strong{display:block;color:#ffd774;font-size:clamp(1rem,2.2vw,1.45rem);margin-top:3px}
.lady-chaos{position:absolute;z-index:28;top:12%;width:clamp(170px,29vw,390px);max-height:78%;object-fit:contain;opacity:0;visibility:hidden;pointer-events:none;filter:drop-shadow(0 18px 28px rgba(0,0,0,.72)) drop-shadow(0 0 16px rgba(194,56,255,.30));transition:opacity .18s,left .34s,right .34s,transform .22s;will-change:transform,left,right,opacity}
.lady-chaos.show{opacity:.95;visibility:visible}
.lady-chaos.left{left:-7%;right:auto;transform:none}
.lady-chaos.right{right:-7%;left:auto;transform:scaleX(-1)}
.lady-chaos.left.cast-pop{transform:scale(1.035) rotate(-1deg)}
.lady-chaos.right.cast-pop{transform:scaleX(-1) scale(1.035) rotate(1deg)}
.chaos-projectile{z-index:31;object-fit:contain;filter:drop-shadow(0 0 11px rgba(176,74,255,.48));transition:filter .12s}
.chaos-projectile.charging{filter:drop-shadow(0 0 19px rgba(255,232,126,.88)) drop-shadow(0 0 28px rgba(187,70,255,.72));opacity:.90}
.chaos-fire{filter:drop-shadow(0 0 14px rgba(255,116,28,.86)) drop-shadow(0 0 26px rgba(210,42,255,.42))}
.chaos-slime{filter:drop-shadow(0 0 13px rgba(87,255,65,.55)) drop-shadow(0 0 22px rgba(195,47,255,.30))}
.chaos-eye{filter:drop-shadow(0 0 15px rgba(202,57,255,.72))}
.chaos-ghost{opacity:.90;filter:drop-shadow(0 0 14px rgba(119,218,255,.60)) drop-shadow(0 0 24px rgba(173,75,255,.40))}
.chaos-bat{filter:drop-shadow(0 6px 8px rgba(0,0,0,.58)) drop-shadow(0 0 12px rgba(184,67,255,.38))}
.game-shell.chaos-night .night-event-hud{border-color:rgba(226,121,255,.42);background:linear-gradient(135deg,rgba(11,6,27,.92),rgba(74,16,81,.88))}
@media(max-width:800px){
  .lady-chaos{width:clamp(135px,34vw,230px);top:16%;max-height:68%}
  .lady-chaos.left{left:-10%}.lady-chaos.right{right:-10%}
  .chaos-intro{inset:4% 3% 7%}.chaos-intro img{max-width:92%;max-height:65%}
  .chaos-intro div{bottom:6%;min-width:82%;padding:8px 12px}
}
@media(max-height:520px) and (orientation:landscape){
  .lady-chaos{width:min(27vw,205px);top:12%;max-height:78%}
  .chaos-intro img{max-height:70%;max-width:68%}
}


/* ===== Version 1.4.9 · Statusmeldungen oben / mehr freie Spielfeldmitte ===== */
.buff-popup{top:8px!important;min-width:0!important;width:auto!important;max-width:min(56vw,430px)!important;padding:8px 14px!important;border-radius:15px!important;display:flex!important;align-items:center;justify-content:center;gap:8px;transform:translate(-50%,-10px) scale(.92)!important;overflow:visible!important}
.buff-popup.show{transform:translate(-50%,0) scale(1)!important}
.buff-popup::before{display:none!important}
.buff-popup .buff-icon{position:relative!important;left:auto!important;top:auto!important;transform:none!important;display:inline-block!important;font-size:1.15rem!important;line-height:1!important;opacity:.9!important;filter:drop-shadow(0 0 6px rgba(255,237,170,.35))}
.buff-popup .buff-text{font:900 clamp(.72rem,1.8vw,1.02rem)/1.05 Georgia,serif!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:800px) and (orientation:portrait){
  .buff-popup{top:7px!important;max-width:min(46vw,182px)!important;padding:6px 8px!important;gap:5px;border-radius:11px!important}
  .buff-popup .buff-icon{font-size:.9rem!important}
  .buff-popup .buff-text{font-size:.68rem!important;letter-spacing:.025em!important}
}
@media(orientation:landscape) and (max-height:650px){
  .buff-popup{top:6px!important;max-width:min(42vw,320px)!important;padding:5px 10px!important}
  .buff-popup .buff-text{font-size:.68rem!important}
}


/* ===== Version 1.4.11: Level-Status oben ===== */
.message-entry.level-status{border-left-color:#72dfff;background:linear-gradient(90deg,rgba(13,39,58,.97),rgba(21,18,42,.90));color:#fff1bd;font-weight:950;letter-spacing:.02em}
.message-entry.level-status.chaos-status{border-left-color:#ff63df;background:linear-gradient(90deg,rgba(76,9,65,.98),rgba(31,8,45,.92));color:#fff0fb;text-shadow:0 0 9px rgba(255,87,218,.38),0 2px 5px #000}


/* v1.4.13 · 7th Realm Games player profile + sichtbarer Spielername */
.player-profile-box{
  width:min(520px,92%);
  margin:2px auto 12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
  background:rgba(5,8,14,.62);
  box-shadow:0 10px 28px rgba(0,0,0,.2);
}
.player-profile-box label{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
  font-weight:800;
  letter-spacing:.02em;
}
.player-profile-box label span{font-size:.72rem;font-weight:600;opacity:.65;text-transform:uppercase;letter-spacing:.08em}
.player-profile-box input{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  background:rgba(0,0,0,.38);
  color:#fff;
  padding:9px 11px;
  font:inherit;
  outline:none;
}
.player-profile-box input:focus{border-color:rgba(255,221,122,.72);box-shadow:0 0 0 3px rgba(255,221,122,.12)}
.player-profile-box input::placeholder{color:rgba(255,255,255,.42)}
.player-profile-box small{display:block;margin-top:6px;font-size:.7rem;line-height:1.35;opacity:.62}
@media (max-height:760px){
  .player-profile-box{padding:7px 10px;margin-bottom:8px}
  .player-profile-box small{display:none}
  .player-profile-box input{padding:7px 10px}
}
\n\n/* v1.4.13 · Spielername im HUD und Ergebnis */\n.hud-player-name{\n  display:block;\n  margin-top:3px;\n  max-width:205px;\n  overflow:hidden;\n  text-overflow:ellipsis;\n  white-space:nowrap;\n  font-size:.66rem;\n  line-height:1.15;\n  font-weight:900;\n  letter-spacing:.035em;\n  color:#fff0b8;\n  text-shadow:0 1px 5px rgba(0,0,0,.9),0 0 10px rgba(238,188,90,.18);\n}\n.end-player-name{\n  width:max-content;\n  max-width:92%;\n  margin:3px auto 7px;\n  padding:7px 14px;\n  overflow:hidden;\n  text-overflow:ellipsis;\n  white-space:nowrap;\n  border:1px solid rgba(231,194,114,.28);\n  border-radius:999px;\n  background:rgba(226,181,91,.075);\n  color:#ffe8a5;\n  font-weight:950;\n  letter-spacing:.035em;\n  box-shadow:0 0 20px rgba(218,169,75,.08);\n}\n@media(max-width:800px){\n  .hud-player-name{max-width:125px;font-size:.57rem;margin-top:2px}\n}\n@media(orientation:landscape) and (max-height:650px){\n  .hud-player-name{max-width:128px;font-size:.52rem;margin-top:1px}\n}\n
/* v1.4.14 · Online-Rangliste / Serverdaten */
.realm-online-card{
  width:min(520px,94%);
  margin:7px auto 11px;
  padding:9px 12px;
  border:1px solid rgba(101,180,255,.2);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(37,76,115,.16),rgba(255,255,255,.018));
  box-shadow:0 0 22px rgba(54,139,221,.055);
  text-align:center;
}
.realm-online-card>span{display:block;color:#9db8d1;font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px}
.realm-online-card>strong{display:block;color:#dceeff;font-size:.96rem;line-height:1.25}
.realm-online-card>b{display:block;color:#f2dfad;font-size:.76rem;line-height:1.25;margin-top:3px}
.realm-online-card>small{display:block;color:#aaa79e;font-size:.66rem;line-height:1.25;margin-top:4px}
.realm-online-end{margin-top:10px;margin-bottom:13px}
.realm-top-five{display:grid;gap:3px;margin-top:7px;text-align:left}
.realm-top-five .realm-rank-row{display:grid;grid-template-columns:36px 1fr auto;gap:7px;align-items:center;padding:4px 7px;border-radius:8px;background:rgba(255,255,255,.025);font-size:.7rem}
.realm-top-five .realm-rank-row.me{background:rgba(241,195,92,.09);outline:1px solid rgba(241,195,92,.17)}
.realm-top-five .realm-rank-row i{font-style:normal;color:#90a6bb;font-weight:900}
.realm-top-five .realm-rank-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ddd7cb}
.realm-top-five .realm-rank-row b{color:#f4dfab}
@media(max-width:800px){
  .realm-online-card{padding:7px 9px;margin:5px auto 7px}
  .realm-online-card>strong{font-size:.82rem}.realm-online-card>b{font-size:.67rem}.realm-online-card>small{font-size:.59rem}
  .realm-top-five .realm-rank-row{font-size:.63rem;padding:3px 6px}
}
@media(orientation:landscape) and (max-height:650px){
  .start-card .realm-online-card{margin:3px auto 4px;padding:5px 8px}
  .start-card .realm-online-card>span{display:none}
  .start-card .realm-online-card>small{display:none}
}

/* v1.4.15 · eindeutige Nicknames, Datenschutz, Spielercode */
.player-profile-box .player-name-status{display:block!important;margin-top:6px;font-size:.69rem;line-height:1.3;opacity:.72}
.player-name-status.ok{color:#b8efb7;opacity:.95}.player-name-status.bad{color:#ffb1aa;opacity:1}.player-name-status.checking{color:#f2dfa8;opacity:.9}
.player-privacy-note{margin:6px 0 0;font-size:.66rem;line-height:1.32;color:rgba(238,234,224,.66)}
.player-privacy-note a,.help-block a{color:#f3d68c;text-decoration:underline;text-underline-offset:2px}
.player-recovery{margin-top:7px;border-top:1px solid rgba(255,255,255,.08);padding-top:6px}
.player-recovery summary{cursor:pointer;color:#e3d3a4;font-size:.7rem;font-weight:800;list-style:none}.player-recovery summary::-webkit-details-marker{display:none}
.player-recovery-body{padding:7px 0 1px}.player-recovery-body p{margin:0 0 6px;font-size:.68rem;line-height:1.35;color:#d8d1c5}.player-recovery-body code{color:#ffe6a4;font-weight:900;letter-spacing:.04em}
.player-recovery-row{display:flex;gap:6px;align-items:center}.player-recovery-row input{min-width:0;flex:1;text-transform:uppercase;letter-spacing:.06em}
.mini-action{border:1px solid rgba(231,194,114,.28);border-radius:10px;background:rgba(231,194,114,.08);color:#f5dfaa;padding:7px 9px;font:800 .68rem/1 inherit;cursor:pointer;white-space:nowrap}.mini-action:disabled{opacity:.45;cursor:default}
#playerRecoveryStatus{display:block!important;margin-top:6px;font-size:.65rem;line-height:1.3;opacity:.68}
#startBtn:disabled{opacity:.58;cursor:wait}
@media(max-width:800px){
  .player-profile-box .player-name-status{display:block!important;font-size:.61rem;margin-top:4px}.player-privacy-note{font-size:.58rem;margin-top:4px}.player-recovery summary{font-size:.61rem}.player-recovery-body p,#playerRecoveryStatus{font-size:.58rem}.mini-action{padding:6px 7px;font-size:.59rem}
}
@media(orientation:landscape) and (max-height:650px){
  .player-privacy-note{display:none}.player-recovery{margin-top:4px;padding-top:4px}.player-recovery-body{position:absolute;z-index:25;left:8%;right:8%;padding:10px;background:rgba(20,16,13,.97);border:1px solid rgba(231,194,114,.24);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.45)}
}


/* v1.4.18 · 7R-Spielerprofil / E-Mail-Verifizierung */
.player-account-box{margin-top:9px;padding:9px 10px;border:1px solid rgba(112,176,216,.18);border-radius:11px;background:rgba(23,39,52,.28)}
.player-account-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;color:#d9ecfb;font-size:.72rem}.player-account-badge{padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.07);color:#aebdca;font-size:.59rem;text-transform:uppercase;letter-spacing:.06em}.player-account-badge.ok{background:rgba(70,184,107,.16);color:#bdf0c9}.player-account-badge.pending{background:rgba(235,183,71,.14);color:#f2d99a}
.player-account-box label{display:block;margin-bottom:4px;font-size:.67rem;font-weight:850;color:#ddd4c2}.player-account-box label span{font-weight:500;color:#8e989f}.player-account-row{display:flex;gap:6px;align-items:center}.player-account-row input{min-width:0;flex:1}.player-code-row{margin-top:6px}.player-email-status{display:block;margin-top:6px;color:#9daab4;font-size:.62rem;line-height:1.35}.player-email-status.ok{color:#b8efc2}.player-email-status.bad{color:#ffb1aa}.player-email-status.pending{color:#f2dfa8}
@media(max-width:800px){.player-account-box{padding:7px 8px;margin-top:6px}.player-account-head{font-size:.64rem}.player-account-box label{font-size:.6rem}.player-email-status{font-size:.56rem}.player-account-row .mini-action{white-space:nowrap}}
@media(orientation:landscape) and (max-height:650px){.player-account-box{margin-top:4px;padding:5px 7px}.player-email-status{display:none}.player-account-head{margin-bottom:4px}.player-account-box label{display:none}.player-code-row{position:absolute;left:9%;right:9%;z-index:30;padding:8px;background:rgba(20,16,13,.98);border:1px solid rgba(231,194,114,.24);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.5)}}

/* ============================================================
   v1.4.20 · Drachenfunken UI Cleanup / Steampunk Shell
   Rein visuelle/UI-seitige Überarbeitung. Gameplay unverändert.
   ============================================================ */
:root{
  --df-brass:#d7aa57;
  --df-brass-hi:#f2d28b;
  --df-copper:#9f5f32;
  --df-iron:#14171a;
  --df-iron-2:#090b0d;
  --df-ink:#050607;
  --df-magic:#7fcfe9;
  --df-violet:#a27ce8;
  --df-paper:#eadfc7;
}

/* Start- und Endscreen scrollen als komplette Fläche. Das verhindert
   abgeschnittene Bereiche im Hochformat und vermeidet Doppel-Scrollbars. */
#startScreen,#endScreen,#accountScreen,#recordsScreen{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:max(14px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
}
#startScreen>.card,#endScreen>.card,#accountScreen>.card,#recordsScreen>.card{
  flex:0 0 auto;
  max-height:none!important;
  overflow:visible!important;
  margin:auto 0;
}

.steampunk-overlay.open{
  background:
    radial-gradient(circle at 50% 18%,rgba(110,75,33,.22),transparent 38%),
    radial-gradient(circle at 15% 90%,rgba(86,61,117,.10),transparent 34%),
    rgba(3,4,5,.78)!important;
  backdrop-filter:blur(9px) saturate(.9)!important;
}
.steampunk-card{
  position:relative;
  isolation:isolate;
  border:1px solid rgba(239,199,119,.50)!important;
  border-radius:22px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.035),transparent 30%),
    radial-gradient(circle at 10% 0,rgba(167,98,44,.16),transparent 28%),
    linear-gradient(180deg,rgba(24,23,20,.985),rgba(7,9,10,.99))!important;
  box-shadow:
    0 30px 85px rgba(0,0,0,.74),
    inset 0 1px 0 rgba(255,235,191,.10),
    inset 0 0 0 4px rgba(80,48,22,.17),
    0 0 34px rgba(210,154,68,.08)!important;
}
.steampunk-card::before{
  content:"";
  position:absolute;
  inset:7px;
  z-index:-1;
  pointer-events:none;
  border:1px solid rgba(143,91,43,.43);
  border-radius:16px;
  box-shadow:inset 0 0 20px rgba(0,0,0,.40);
}
.steampunk-card::after{
  content:"";
  position:absolute;
  inset:10px;
  z-index:-1;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(circle at 0 0,var(--df-brass-hi) 0 2px,transparent 3px),
    radial-gradient(circle at 100% 0,var(--df-brass-hi) 0 2px,transparent 3px),
    radial-gradient(circle at 0 100%,var(--df-brass-hi) 0 2px,transparent 3px),
    radial-gradient(circle at 100% 100%,var(--df-brass-hi) 0 2px,transparent 3px);
}
.steampunk-card h1,.steampunk-card h2{
  color:#f3d99d;
  text-shadow:0 2px 0 #4d2e14,0 0 18px rgba(237,187,85,.11);
}
.steampunk-card .eyebrow{color:#c8944d!important;text-shadow:0 1px 0 #000}

/* Buttons: mehr kleiner Messing-Apparat, weniger Web-Pille. */
.steampunk-card .primary,
.steampunk-card .secondary,
.profile-strip-button,
.steampunk-card .mini-action{
  transition:transform .15s ease,filter .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.steampunk-card .primary{
  border:1px solid #f0cc7d;
  border-radius:13px;
  background:linear-gradient(180deg,#e5bd67 0%,#ad7433 58%,#7f4c22 100%);
  color:#160d05;
  box-shadow:inset 0 1px 0 rgba(255,245,201,.55),inset 0 -2px 0 rgba(78,39,12,.62),0 8px 24px rgba(0,0,0,.35),0 0 18px rgba(205,148,54,.10);
  letter-spacing:.025em;
}
.steampunk-card .secondary{
  border:1px solid rgba(213,164,83,.48);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(65,49,32,.88),rgba(20,21,20,.96));
  color:#ead9b4;
  box-shadow:inset 0 1px 0 rgba(255,226,171,.08),inset 0 -2px 0 rgba(0,0,0,.4),0 5px 15px rgba(0,0,0,.22);
}
.steampunk-card .secondary:hover,.profile-strip-button:hover,.steampunk-card .mini-action:hover{border-color:rgba(239,201,122,.72);filter:brightness(1.08);transform:translateY(-1px)}
.steampunk-card .primary:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ---------- Startscreen ---------- */
.start-card{
  width:min(690px,96vw)!important;
  padding:23px 30px 20px!important;
}
.start-card .realm-logo-start{filter:drop-shadow(0 4px 9px rgba(0,0,0,.48)) sepia(.08)}
.start-card h1{margin:.18em 0 .24em!important}
.start-card .release-meta{margin-bottom:10px!important}
.start-card .start-intro{max-width:560px;margin:10px auto 6px;color:#d8cdb9;font-size:.88rem;line-height:1.45}
.start-card .screen-sera-wrap{margin:5px 0 6px}
.start-card .screen-sera{width:min(128px,27vw)}

.start-profile-strip{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:min(560px,95%);
  margin:8px auto 10px;
  padding:8px 9px 8px 11px;
  border:1px solid rgba(207,159,78,.34);
  border-radius:12px;
  background:linear-gradient(90deg,rgba(39,32,23,.82),rgba(10,14,15,.88));
  box-shadow:inset 0 1px 0 rgba(255,229,176,.045),0 7px 20px rgba(0,0,0,.20);
  text-align:left;
}
.profile-lamp{
  width:11px;height:11px;border-radius:50%;
  background:#b87831;
  box-shadow:0 0 0 3px rgba(87,56,27,.7),0 0 10px rgba(229,160,66,.32),inset 0 1px 2px rgba(255,255,255,.5);
}
.profile-lamp{animation:profileLamp 2.8s ease-in-out infinite alternate}
.profile-lamp.ok{background:#72d79b;box-shadow:0 0 0 3px rgba(31,76,55,.65),0 0 11px rgba(80,224,139,.32),inset 0 1px 2px rgba(255,255,255,.5)}
@keyframes profileLamp{to{filter:brightness(1.25)}}
.profile-strip-copy{min-width:0;display:flex;flex-direction:column;gap:1px}
.profile-strip-copy span{font-size:.58rem;text-transform:uppercase;letter-spacing:.12em;color:#a8906e;font-weight:850}
.profile-strip-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f0dfb9;font-size:.83rem}
.profile-strip-button{
  max-width:210px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:1px solid rgba(214,166,84,.43);border-radius:9px;
  padding:8px 10px;background:linear-gradient(180deg,rgba(83,58,29,.85),rgba(37,29,22,.94));
  color:#f0d9a4;font:850 .68rem/1.1 inherit;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,226,164,.09);
}
.profile-strip-button span{vertical-align:middle}

.start-gauges{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:8px;
  width:min(560px,95%);
  margin:0 auto 8px;
}
.steam-gauge{
  position:relative;
  min-width:0;
  padding:9px 11px 10px 35px;
  border:1px solid rgba(174,126,61,.35);
  border-radius:11px;
  background:radial-gradient(circle at 18px 50%,rgba(231,177,83,.15) 0 8px,rgba(0,0,0,.35) 9px 11px,transparent 12px),linear-gradient(180deg,rgba(35,35,31,.87),rgba(10,12,12,.9));
  text-align:left;
  box-shadow:inset 0 0 14px rgba(0,0,0,.34);
}
.steam-gauge::before{
  content:"";position:absolute;left:14px;top:50%;width:7px;height:7px;border-radius:50%;transform:translateY(-50%);
  background:#e1b461;box-shadow:0 0 8px rgba(228,175,78,.35);
}
.steam-gauge.online-gauge::before{background:#77d1df;box-shadow:0 0 9px rgba(90,205,229,.42)}
.steam-gauge span{display:block;color:#967f60;font-size:.55rem;letter-spacing:.11em;text-transform:uppercase;font-weight:900}
.steam-gauge strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;color:#f4dfac;font-size:.84rem}
.steam-gauge.online-gauge strong{color:#d6eef1}
.steam-gauge b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;color:#b7aa95;font-size:.62rem;font-weight:700}

.start-main-button{display:block;width:min(340px,86%);margin:8px auto 9px;padding:14px 24px!important;font-size:1rem}
.start-menu{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  width:min(560px,95%);
  margin:0 auto;
}
.start-menu .menu-button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:9px 8px;font-size:.72rem;white-space:nowrap}
.start-menu .menu-button span{overflow:hidden;text-overflow:ellipsis}
.start-music-panel{width:min(340px,88%);margin:8px auto 0!important}
.start-home-link{display:inline-block;margin:11px auto 0;color:#b8a583;font-size:.69rem;text-decoration:none;border-bottom:1px dotted rgba(202,161,91,.38)}
.start-home-link:hover{color:#f0d8a0}
.start-card .fullscreen-tip{margin:6px 0 0;font-size:.62rem;color:#84786a}

/* ---------- Account / Login ---------- */
.account-overlay{z-index:188!important}
.account-card{position:relative;width:min(650px,96vw)!important;padding:27px 30px 24px!important;text-align:left!important}
.account-card>.realm-logo,.account-card>.eyebrow,.account-card>h2{text-align:center;margin-left:auto;margin-right:auto}
.account-card>h2{margin-top:.20em}
.account-status-panel{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  margin:9px auto 13px;padding:10px 12px;width:min(540px,96%);
  border:1px solid rgba(195,146,70,.34);border-radius:12px;
  background:linear-gradient(90deg,rgba(54,38,24,.63),rgba(14,18,19,.75));
}
.account-status-lamp{width:13px;height:13px;border-radius:50%;background:#b9762e;box-shadow:0 0 0 4px rgba(78,49,24,.7),0 0 11px rgba(217,151,54,.28)}
.account-status-lamp.ok{background:#72d79b;box-shadow:0 0 0 4px rgba(31,76,55,.65),0 0 12px rgba(80,224,139,.32)}
.account-status-panel strong{display:block;color:#f0d8a6;font-size:.85rem}.account-status-panel small{display:block;margin-top:2px;color:#a69a87;font-size:.67rem;line-height:1.35}
.account-profile-box{width:min(540px,96%)!important;margin:0 auto 13px!important;padding:13px 14px!important;border-color:rgba(190,139,65,.34)!important;background:linear-gradient(180deg,rgba(12,15,16,.75),rgba(5,7,8,.78))!important}
.account-profile-box label{color:#e4d6b8}
.account-profile-box input{border-color:rgba(194,147,72,.34);background:rgba(0,0,0,.42);border-radius:9px}
.account-profile-box input:focus{border-color:rgba(242,202,117,.72);box-shadow:0 0 0 3px rgba(225,167,69,.11)}
.account-profile-box small{display:block!important}
.account-profile-box .player-account-box{border-color:rgba(115,175,183,.18);background:linear-gradient(180deg,rgba(28,50,51,.28),rgba(16,24,25,.20))}
.account-profile-box .player-recovery{margin-top:10px}
.account-profile-box .player-recovery-body{position:static!important;left:auto!important;right:auto!important;padding:8px 0 1px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.account-privacy{margin-top:8px;border-top:1px solid rgba(255,255,255,.07);padding-top:7px}
.account-privacy summary{cursor:pointer;color:#bdaa83;font-size:.67rem;font-weight:800;list-style:none}.account-privacy summary::-webkit-details-marker{display:none}
.account-privacy .player-privacy-note{display:block!important;margin-top:8px!important;font-size:.64rem!important}
.dialog-actions{display:flex;justify-content:center;margin-top:8px}

/* ---------- Rekorde ---------- */
.records-overlay{z-index:187!important}
.records-card{position:relative;width:min(650px,96vw)!important;padding:27px 30px 24px!important;text-align:center!important}
.records-card .records-online-card{width:min(540px,96%);margin:10px auto 11px;border-color:rgba(109,183,194,.26);background:linear-gradient(180deg,rgba(26,59,63,.28),rgba(13,18,19,.6))}
.records-top-wrap{width:min(540px,96%);margin:0 auto;padding:11px 12px;border:1px solid rgba(189,140,67,.28);border-radius:12px;background:rgba(8,10,10,.48);text-align:left}
.records-top-wrap h3{margin:0 0 7px;color:#caa464;font:800 .72rem/1 Georgia,serif;text-transform:uppercase;letter-spacing:.12em;text-align:center}
.records-top-five .realm-rank-row{padding:7px 9px;border-radius:9px;background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.014));font-size:.76rem}
.records-top-five .realm-rank-row.me{background:linear-gradient(90deg,rgba(210,160,72,.15),rgba(210,160,72,.05));outline-color:rgba(224,179,92,.32)}
.records-loading{padding:14px 8px;text-align:center;color:#958b7c;font-size:.72rem}

/* ---------- Game Over: Hochformat sicher scrollbar + Steampunk ---------- */
#endScreen>.card{width:min(650px,96vw)!important;padding:27px 28px 24px!important}
#endScreen .result-grid div{border-color:rgba(200,150,74,.28);background:linear-gradient(180deg,rgba(53,43,29,.35),rgba(10,12,12,.5));box-shadow:inset 0 1px 0 rgba(255,230,178,.035)}
#endScreen .realm-online-card{border-color:rgba(99,179,193,.24);background:linear-gradient(180deg,rgba(29,61,66,.25),rgba(10,13,14,.45))}

/* Help/Stats/Share bekommen dieselbe Material-DNA, ohne ihre Layoutlogik umzubauen. */
.help-card,.stats-card,.share-card,.pause-card{
  border-color:rgba(222,176,94,.42)!important;
  background:linear-gradient(180deg,rgba(23,22,19,.98),rgba(7,9,10,.985))!important;
  box-shadow:0 28px 75px rgba(0,0,0,.68),inset 0 0 0 4px rgba(92,55,24,.11)!important;
}
.help-close{border-color:rgba(210,163,82,.42)!important;background:rgba(50,35,22,.86)!important;color:#efd8aa!important}

@media(max-width:700px){
  #startScreen,#endScreen,#accountScreen,#recordsScreen{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .start-card{width:96vw!important;padding:16px 13px 15px!important}
  .start-card h1{font-size:clamp(1.7rem,8vw,2.3rem)!important}
  .start-card .realm-logo-start{max-width:min(210px,60vw)}
  .start-profile-strip{width:97%;grid-template-columns:auto minmax(0,1fr);gap:8px}
  .profile-strip-button{grid-column:1/-1;width:100%;max-width:none;text-align:center;padding:8px}
  .start-gauges{width:97%;grid-template-columns:1fr 1fr;gap:6px}
  .steam-gauge{padding:8px 7px 9px 27px}.steam-gauge::before{left:10px}
  .steam-gauge span{font-size:.49rem}.steam-gauge strong{font-size:.72rem}.steam-gauge b{font-size:.55rem}
  .start-card .start-intro{font-size:.76rem;margin:7px auto 4px}
  .start-card .screen-sera{width:min(88px,22vw)!important}
  .start-main-button{margin:6px auto 8px;padding:12px 18px!important}
  .start-menu{width:97%;grid-template-columns:repeat(2,1fr);gap:6px}
  .start-menu .menu-button{font-size:.68rem;padding:9px 7px}
  .start-home-link{margin-top:9px;font-size:.64rem}
  .account-card,.records-card{width:96vw!important;padding:20px 12px 18px!important}
  .account-status-panel,.account-profile-box,.records-card .records-online-card,.records-top-wrap{width:97%!important}
  .account-profile-box{padding:10px!important}
  .account-profile-box label{font-size:.7rem}.account-profile-box label span{font-size:.58rem}
  .account-profile-box input{padding:9px 8px}
  .player-account-row,.player-recovery-row{align-items:stretch}
  .player-account-row .mini-action,.player-recovery-row .mini-action{font-size:.58rem;padding:7px 7px}
  #endScreen>.card{width:96vw!important;padding:20px 12px 18px!important}
  #endScreen .start-actions{gap:7px}
}

@media(max-width:430px){
  .start-gauges{grid-template-columns:1fr}
  .steam-gauge{padding-left:32px}
  .profile-strip-copy strong{font-size:.76rem}
  .start-card .screen-sera-wrap{display:flex!important}
  .start-card .screen-sera{width:78px!important}
  #endScreen .result-grid{gap:6px;margin:12px 0}
  #endScreen .result-grid div{padding:9px 5px}
  #endScreen .realm-online-card{margin:8px auto 10px}
}

@media(orientation:landscape) and (max-height:650px){
  #startScreen,#endScreen,#accountScreen,#recordsScreen{padding-top:7px;padding-bottom:9px}
  .start-card{width:min(760px,96vw)!important;padding:12px 18px!important}
  .start-card .realm-logo-start{max-height:40px;width:auto}
  .start-card h1{font-size:1.55rem!important;margin:.05em 0 .12em!important}
  .start-profile-strip{margin:4px auto 5px;padding:5px 8px}
  .start-gauges{margin-bottom:4px}.steam-gauge{padding-top:6px;padding-bottom:6px}
  .start-card .start-intro{display:none}
  .start-card .screen-sera-wrap{display:none!important}
  .start-main-button{margin:5px auto 5px;padding:9px 18px!important}
  .start-menu .menu-button{padding:6px 8px}
  .start-home-link{margin-top:5px}.start-card .fullscreen-tip{display:none}
  .account-card,.records-card{width:min(720px,96vw)!important;padding:14px 20px!important}
  .account-profile-box .player-email-status,.account-profile-box .player-name-status{display:block!important}
  .account-profile-box .player-code-row{position:static!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
  #endScreen>.card{width:min(720px,96vw)!important;padding:14px 18px!important}
}

/* ============================================================
   v1.4.24 · Mobile Scroll / Browser-Chrome Fix
   Nur UI/Viewport. Gameplay unverändert.
   ============================================================ */
@media (max-width:800px){
  /* svh entspricht der kleinsten wirklich sichtbaren Browserfläche mit
     eingeblendeten Mobil-Bedienelementen und ist für Menüs sicherer als vh. */
  #app{height:100svh}
  .game-shell{height:min(100svh,900px)}

  /* Die mobilen Dialogflächen selbst übernehmen das Scrollen. Dadurch gibt es
     keinen inneren Scrollbereich, dessen Ende unter der Browserleiste liegt. */
  #startScreen,#endScreen,#accountScreen,#recordsScreen,#helpScreen{
    box-sizing:border-box;
    align-items:flex-start;
    overflow-x:hidden;
    overflow-y:auto;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    padding-top:max(10px,env(safe-area-inset-top));
    padding-bottom:calc(78px + env(safe-area-inset-bottom));
  }

  #startScreen>.card,#endScreen>.card,#accountScreen>.card,#recordsScreen>.card{
    margin:0 auto!important;
  }

  /* Anleitung: auf Mobile kein verschachteltes Card-Scrolling mehr. */
  #helpScreen{display:flex;justify-content:center}
  #helpScreen>.help-card{
    flex:0 0 auto;
    width:96vw;
    max-height:none!important;
    overflow:visible!important;
    margin:0 auto!important;
  }
  .help-footer{padding-bottom:18px}

  /* Der letzte Inhalt soll beim maximalen Scrollen klar oberhalb der
     Browserleiste stehen und nicht nur gerade eben am Rand kleben. */
  #startScreen>.card::after,#endScreen>.card::after,
  #accountScreen>.card::after,#recordsScreen>.card::after{
    pointer-events:none;
  }
}

@media (max-width:800px) and (orientation:portrait){
  #startScreen,#endScreen,#accountScreen,#recordsScreen,#helpScreen{
    padding-bottom:calc(94px + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   v1.4.24 · Drachenfunken Startscreen Refresh
   farbiger, klarer, responsiver, mit Profilbild-Auswahl
   ============================================================ */
.start-card{
  width:min(1120px,96vw)!important;
  max-height:calc(100% - 10px);
  padding:24px 24px 18px!important;
  overflow:auto;
}
.start-layout{
  display:grid;
  grid-template-columns:minmax(250px,300px) minmax(0,1fr);
  gap:18px;
  align-items:stretch;
}
.start-profile-column,.start-main-column{min-width:0}
.brass-panel{
  position:relative;
  border:1px solid rgba(222,177,95,.38);
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 18%),
    linear-gradient(180deg,rgba(18,20,23,.95),rgba(8,10,13,.96));
  box-shadow:inset 0 1px 0 rgba(255,228,170,.07), inset 0 0 0 3px rgba(104,65,27,.18), 0 20px 42px rgba(0,0,0,.28);
  overflow:hidden;
}
.brass-panel::before,
.brass-panel::after{
  content:"";
  position:absolute;
  width:86px;height:86px;
  opacity:.9;
  pointer-events:none;
}
.brass-panel::before{
  left:-14px;top:-14px;
  background:
    radial-gradient(circle at 22px 22px, rgba(234,195,117,.95) 0 4px, rgba(111,70,25,.95) 5px 10px, transparent 11px),
    linear-gradient(90deg, rgba(140,89,34,.95), rgba(231,192,108,.92) 60%, rgba(140,89,34,.95));
  background-size:44px 44px, 78px 10px;
  background-repeat:no-repeat;
  background-position:18px 18px, 20px 34px;
  transform:rotate(0deg);
}
.brass-panel::after{
  right:-14px;bottom:-14px;
  background:
    radial-gradient(circle at 64px 64px, rgba(234,195,117,.95) 0 4px, rgba(111,70,25,.95) 5px 10px, transparent 11px),
    linear-gradient(0deg, rgba(140,89,34,.95), rgba(231,192,108,.92) 60%, rgba(140,89,34,.95));
  background-size:44px 44px, 10px 78px;
  background-repeat:no-repeat;
  background-position:24px 24px, 34px 18px;
}
.brass-subpanel{
  margin-top:14px;
  padding:14px 14px 12px;
  border:1px solid rgba(214,165,84,.26);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(37,28,20,.85),rgba(11,14,16,.9));
  box-shadow:inset 0 1px 0 rgba(255,221,163,.06);
}
.start-profile-panel{padding:16px}
.profile-frame-wrap{display:flex;justify-content:center;margin-bottom:12px}
.profile-frame{
  position:relative;
  width:172px;height:172px;
  padding:8px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,245,214,.35), transparent 28%),
    linear-gradient(135deg, #a86d2b, #f0cf7f 40%, #7e4a1e 74%, #f4dd9b 100%);
  box-shadow:0 0 0 3px rgba(104,61,23,.7), 0 14px 28px rgba(0,0,0,.42), 0 0 24px rgba(113,186,255,.16);
}
.avatar-preview,
.account-avatar-preview{
  display:block;
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
  background:radial-gradient(circle at 50% 35%, rgba(125,154,255,.22), rgba(10,14,18,.96));
  border:3px solid rgba(24,20,17,.75);
}
.profile-level-badge{
  position:absolute;
  right:8px;bottom:10px;
  min-width:42px;height:42px;padding:0 10px;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;
  border:1px solid rgba(241,213,142,.8);
  background:linear-gradient(180deg,#73501b,#312112);
  color:#f6dfa5;font:900 .88rem/1 Georgia,serif;
  box-shadow:0 5px 15px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,233,184,.22);
}
.start-profile-strip{width:100%;margin:0;padding:10px 12px;background:linear-gradient(90deg,rgba(65,46,25,.9),rgba(14,18,20,.9))}
.avatar-picker-head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;text-align:center}
.avatar-picker-head strong{color:#efd7a1;font-size:.96rem}
.avatar-picker-head span{color:#b59a75;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
.avatar-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.avatar-choice{
  position:relative;
  padding:0;
  border:1px solid rgba(211,162,80,.42);
  border-radius:50%;
  aspect-ratio:1;
  overflow:hidden;
  cursor:pointer;
  background:linear-gradient(180deg,rgba(75,52,28,.8),rgba(18,21,24,.95));
  box-shadow:inset 0 1px 0 rgba(255,225,163,.07), 0 6px 12px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.avatar-choice img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-choice:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.06);border-color:rgba(255,221,139,.82);box-shadow:0 12px 20px rgba(0,0,0,.28), 0 0 0 2px rgba(255,212,111,.12)}
.avatar-choice.active{border-color:#ffd98d;box-shadow:0 0 0 2px rgba(255,217,141,.24), 0 10px 18px rgba(0,0,0,.32)}
.avatar-choice.active::after{
  content:"✓";
  position:absolute;right:3px;bottom:3px;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#1f1308;font:900 .8rem/1 system-ui,sans-serif;
  background:linear-gradient(180deg,#f7e0a4,#d2a753);
  box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.avatar-picker-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.avatar-picker-actions .secondary{padding:9px 10px;font-size:.7rem}
.avatar-note{margin-top:9px!important;text-align:center;color:#98876d!important;font-size:.62rem!important}
.start-main-column{display:flex;flex-direction:column;gap:14px}
.start-hero{
  min-height:410px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(290px,.95fr);
  gap:12px;
  padding:20px 22px;
  background:
    linear-gradient(180deg, rgba(9,15,30,.12), rgba(8,10,13,.25)),
    radial-gradient(circle at 72% 22%, rgba(110,193,255,.22), transparent 22%),
    radial-gradient(circle at 58% 70%, rgba(169,96,255,.18), transparent 26%),
    linear-gradient(180deg, rgba(13,29,48,.25), rgba(8,10,13,.18)),
    url('assets/bg-arkopolis.webp');
  background-size:cover;
  background-position:center;
}
.start-hero-copy{align-self:start;position:relative;z-index:2;padding-top:8px}
.start-card .realm-logo-start{max-width:min(320px,48vw);width:100%;height:auto}
.start-card h1{font-size:clamp(2.15rem,4vw,4.2rem)!important;margin:.1em 0 .14em!important;line-height:.97}
.start-card .eyebrow{font-size:.94rem!important;letter-spacing:.18em;text-transform:uppercase}
.start-card .release-meta{justify-content:flex-start;margin-bottom:14px!important}
.start-card .start-intro{max-width:520px;margin:0;color:#f0e7d3;font-size:1rem;line-height:1.55;text-shadow:0 1px 0 rgba(0,0,0,.55)}
.hero-scene{
  position:relative;
  min-height:280px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:20px 14px 18px;
}
.hero-glow{
  position:absolute;inset:8% 8% 20%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 55%, rgba(110,179,255,.33), rgba(167,85,255,.16) 30%, rgba(255,186,92,.10) 46%, transparent 70%);
  filter:blur(10px);
}
.start-card .screen-sera-wrap{
  position:relative;z-index:2;margin:0;
  display:flex;align-items:flex-end;justify-content:center;
  width:min(360px,100%);
  aspect-ratio:1 / .95;
  border-radius:30px;
  background:linear-gradient(180deg,rgba(8,12,18,.20),rgba(8,10,13,.55));
  box-shadow:inset 0 0 0 1px rgba(255,238,186,.08), inset 0 -30px 50px rgba(0,0,0,.28);
}
.start-card .screen-sera{
  width:min(310px,90%);
  max-width:100%;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.42)) drop-shadow(0 0 22px rgba(128,191,255,.22));
}
.hero-caption{position:relative;z-index:2;margin-top:10px;color:#ead8af;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.start-gauges{width:100%;margin:0;grid-template-columns:1fr 1fr}
.steam-gauge{
  min-height:86px;
  padding:12px 12px 12px 38px;
  border-color:rgba(196,152,74,.38);
  background:
    radial-gradient(circle at 18px 50%, rgba(229,174,83,.22) 0 8px, rgba(0,0,0,.4) 9px 12px, transparent 13px),
    linear-gradient(180deg,rgba(48,33,19,.82),rgba(10,13,16,.92));
}
.steam-gauge.online-gauge{
  background:
    radial-gradient(circle at 18px 50%, rgba(89,215,239,.22) 0 8px, rgba(0,0,0,.4) 9px 12px, transparent 13px),
    linear-gradient(180deg,rgba(23,47,55,.78),rgba(10,13,16,.92));
}
.start-main-button{
  display:block;width:min(430px,94%);margin:0 auto;padding:16px 28px!important;
  font-size:clamp(1.35rem,2vw,2rem);font-family:Georgia,serif;font-weight:900;letter-spacing:.03em;
  border-radius:22px!important;
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,248,214,.6), inset 0 -3px 0 rgba(78,39,12,.7), 0 12px 24px rgba(0,0,0,.34), 0 0 18px rgba(214,153,62,.12)!important;
}
.start-main-button::before,.start-main-button::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(209,112,255,.92), rgba(112,39,145,.92));
  box-shadow:0 0 0 4px rgba(90,53,22,.9), 0 0 15px rgba(194,102,255,.33);
}
.start-main-button::before{left:14px}.start-main-button::after{right:14px}
.start-menu{width:100%;margin:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.start-menu .menu-button{padding:12px 10px;font-size:.82rem;position:relative;overflow:hidden}
.start-menu .menu-button::after{
  content:"";position:absolute;inset:auto -40% 0 auto;width:60%;height:160%;
  background:linear-gradient(90deg,transparent,rgba(255,226,155,.12),transparent);
  transform:skewX(-26deg) translateX(140%);
  transition:transform .35s ease;
}
.start-menu .menu-button:hover::after{transform:skewX(-26deg) translateX(-20%)}
.start-music-panel{width:min(420px,100%);margin:0 auto!important}
.start-home-link{margin-top:12px}
.account-avatar-panel{
  display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;
  margin:0 0 12px;padding:10px 12px;border:1px solid rgba(197,150,74,.24);border-radius:14px;
  background:linear-gradient(180deg,rgba(46,33,22,.52),rgba(12,15,17,.5));
}
.account-avatar-preview-wrap{width:88px;height:88px;padding:4px;border-radius:50%;background:linear-gradient(135deg,#a86d2b,#f0cf7f 42%,#7e4a1e 75%,#f4dd9b);box-shadow:0 0 0 2px rgba(88,54,18,.72)}
.account-avatar-copy strong{display:block;color:#efd8a4;font-size:.92rem}
.account-avatar-copy span{display:block;margin-top:2px;color:#a79374;font-size:.67rem;line-height:1.35}
.account-avatar-inline-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.account-avatar-inline-actions .mini-action{margin:0}
@media(max-width:1000px){
  .start-layout{grid-template-columns:260px minmax(0,1fr)}
  .start-hero{grid-template-columns:1fr;min-height:auto}
  .hero-scene{min-height:240px}
}
@media(max-width:800px){
  .start-card{width:96vw!important;padding:14px 12px 16px!important}
  .start-layout{grid-template-columns:1fr;gap:12px}
  .start-profile-panel{padding:12px}
  .profile-frame{width:132px;height:132px}
  .avatar-choices{grid-template-columns:repeat(4, minmax(0,1fr));gap:8px}
  .start-hero{padding:16px 14px;gap:8px;background-position:center top}
  .start-card .realm-logo-start{max-width:min(240px,64vw)}
  .start-card h1{font-size:clamp(1.9rem,9vw,3rem)!important}
  .start-card .eyebrow{font-size:.72rem!important}
  .start-card .release-meta{justify-content:center;margin-bottom:10px!important}
  .start-card .start-intro{text-align:center;font-size:.85rem}
  .start-hero-copy{text-align:center}
  .hero-scene{padding:8px 10px 12px;min-height:190px}
  .start-card .screen-sera-wrap{width:min(260px,88vw)}
  .start-card .screen-sera{width:min(220px,84%)}
  .start-gauges{grid-template-columns:1fr;gap:8px}
  .steam-gauge{min-height:74px}
  .start-main-button{width:100%;padding:14px 18px!important;font-size:1.2rem}
  .start-main-button::before,.start-main-button::after{width:18px;height:18px}.start-main-button::before{left:10px}.start-main-button::after{right:10px}
  .start-menu{grid-template-columns:repeat(2,1fr);gap:8px}
  .start-menu .menu-button{font-size:.75rem;padding:10px 8px}
  .avatar-picker-actions{grid-template-columns:1fr}
  .account-avatar-panel{grid-template-columns:70px 1fr;gap:10px;padding:9px 10px}
  .account-avatar-preview-wrap{width:70px;height:70px}
}
@media(max-width:430px){
  .avatar-choices{grid-template-columns:repeat(4,1fr)}
  .start-profile-strip{grid-template-columns:auto minmax(0,1fr);gap:8px}
  .profile-strip-button{grid-column:1/-1;max-width:none;width:100%;text-align:center}
  .hero-caption{font-size:.68rem}
}
@media(orientation:landscape) and (max-height:650px){
  .start-card{width:min(1120px,96vw)!important;padding:12px!important}
  .start-layout{grid-template-columns:235px 1fr;gap:12px}
  .profile-frame{width:112px;height:112px}
  .avatar-picker-head{margin-bottom:7px}
  .avatar-choices{gap:6px}
  .avatar-picker-actions{gap:6px}
  .avatar-picker-actions .secondary{padding:7px 8px}
  .start-hero{min-height:0;padding:13px 14px;grid-template-columns:1.05fr .9fr}
  .start-card .realm-logo-start{max-width:230px}
  .start-card h1{font-size:2rem!important}
  .start-card .start-intro{font-size:.78rem;line-height:1.35}
  .hero-scene{min-height:160px;padding-bottom:8px}
  .start-card .screen-sera-wrap{width:220px}
  .start-card .screen-sera{width:180px}
  .steam-gauge{min-height:68px;padding-top:9px;padding-bottom:9px}
  .start-main-button{padding:11px 18px!important;font-size:1.05rem}
  .start-menu .menu-button{padding:8px 8px;font-size:.72rem}
}
.avatar-note.ok{color:#87d9a6!important}.avatar-note.pending{color:#e6c172!important}.avatar-note.bad{color:#ef9b8d!important}

/* v1.4.24 · Avatarverwaltung gehört ins Profil, Startscreen zeigt nur den aktiven Avatar. */
.account-avatar-picker{width:100%;margin:0 0 14px!important;padding:13px 14px 12px}
.account-avatar-picker .avatar-choices{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.avatar-choice .avatar-custom-label{
  position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  max-width:86%;padding:2px 5px;border-radius:999px;
  background:rgba(4,7,9,.82);color:#f3d9a1;font:800 .48rem/1.15 system-ui,sans-serif;
  white-space:nowrap;pointer-events:none;
}
.start-profile-panel{align-self:start}
@media(max-width:800px){
  .account-avatar-picker .avatar-choices{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
  .account-avatar-picker{padding:10px}
  .avatar-choice .avatar-custom-label{font-size:.42rem;padding:2px 4px}
}
@media(max-width:430px){
  .account-avatar-picker .avatar-choices{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
}


/* ==========================================================
   v1.4.27 · 7th Realm elegant start + restrained steampunk game
   Technical base: v1.4.24. Gameplay/profile sync unchanged.
   ========================================================== */

/* ---------- Start: quiet, premium 7th Realm ---------- */
#startScreen.steampunk-overlay.open{
  background:
    radial-gradient(circle at 50% 18%,rgba(119,92,45,.10),transparent 28%),
    radial-gradient(circle at 50% 88%,rgba(75,48,104,.08),transparent 32%),
    linear-gradient(180deg,rgba(4,5,8,.94),rgba(1,2,4,.98))!important;
  backdrop-filter:blur(8px)!important;
}
.sevenrealm-start{
  position:relative;
  width:min(640px,94vw)!important;
  max-height:94svh;
  overflow:auto;
  padding:28px 34px 22px!important;
  border:1px solid rgba(214,177,105,.30)!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 50% 18%,rgba(231,194,119,.055),transparent 28%),
    linear-gradient(180deg,rgba(15,17,21,.985),rgba(5,6,9,.995))!important;
  box-shadow:
    0 32px 90px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,238,199,.055),
    inset 0 0 0 1px rgba(255,255,255,.018)!important;
}
.sevenrealm-start::before{
  content:"";
  position:absolute;
  inset:9px;
  pointer-events:none;
  border:1px solid rgba(159,124,69,.16);
  border-radius:12px;
}
.sevenrealm-start::after{display:none!important}
.sevenrealm-start-actions{
  position:absolute;
  z-index:4;
  top:14px;
  right:14px;
  display:flex;
  gap:7px;
}
.sevenrealm-icon-action{
  min-width:42px;
  height:34px;
  padding:0 10px;
  border:1px solid rgba(216,178,103,.30);
  border-radius:8px;
  background:rgba(7,8,11,.76);
  color:#d8c49d;
  font:800 .67rem/1 system-ui,sans-serif;
  letter-spacing:.035em;
  cursor:pointer;
  transition:.15s ease;
}
.sevenrealm-icon-action:hover{
  border-color:rgba(234,200,133,.62);
  color:#f3dfb5;
  transform:translateY(-1px);
  background:rgba(20,17,13,.88);
}
.sevenrealm-start .realm-logo-start{
  display:block;
  width:min(248px,58vw)!important;
  max-width:none!important;
  margin:3px auto 12px!important;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.42));
}
.sevenrealm-start .eyebrow{
  margin:0 0 8px!important;
  color:#b99a63!important;
  font-size:.66rem!important;
  letter-spacing:.25em!important;
  text-transform:uppercase;
}
.sevenrealm-start h1{
  margin:0!important;
  color:#ead3a5!important;
  font:500 clamp(2.15rem,6vw,3.8rem)/1.02 Georgia,"Times New Roman",serif!important;
  letter-spacing:.012em;
  text-shadow:0 2px 0 rgba(73,44,17,.65),0 8px 24px rgba(0,0,0,.32)!important;
}
.sevenrealm-rule{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:min(360px,80%);
  margin:13px auto 5px;
  color:#9e7947;
}
.sevenrealm-rule span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(193,151,84,.48))}
.sevenrealm-rule span:last-child{background:linear-gradient(90deg,rgba(193,151,84,.48),transparent)}
.sevenrealm-rule b{font-size:.72rem;color:#c9a261}
.sevenrealm-sera-wrap{
  margin:4px 0 8px!important;
  min-height:150px;
  background:none!important;
  box-shadow:none!important;
}
.sevenrealm-start .screen-sera{
  width:min(174px,36vw)!important;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(85,154,211,.10))!important;
}
.sevenrealm-start-button{
  display:block!important;
  width:min(350px,86%)!important;
  margin:4px auto 11px!important;
  padding:13px 24px!important;
  border:1px solid rgba(232,198,129,.66)!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#d6b36d,#987035)!important;
  color:#171007!important;
  font:800 1rem/1.1 Georgia,"Times New Roman",serif!important;
  letter-spacing:.08em!important;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,246,215,.36),0 9px 24px rgba(0,0,0,.28)!important;
}
.sevenrealm-start-button::before,.sevenrealm-start-button::after{display:none!important}
.sevenrealm-menu{
  width:min(470px,92%)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:7px!important;
}
.sevenrealm-menu .menu-button{
  min-height:39px!important;
  padding:8px 6px!important;
  border:1px solid rgba(203,166,98,.24)!important;
  border-radius:8px!important;
  background:rgba(7,8,11,.62)!important;
  color:#cfc0a2!important;
  box-shadow:none!important;
  font-size:.68rem!important;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.sevenrealm-menu .menu-button::after{display:none!important}
.sevenrealm-menu .menu-button:hover{
  border-color:rgba(225,192,127,.50)!important;
  background:rgba(25,20,14,.78)!important;
  color:#f1ddba!important;
}
.sevenrealm-start .start-music-panel{
  width:min(360px,90%)!important;
  margin:9px auto 0!important;
  border-radius:9px;
  background:rgba(7,8,11,.94);
}
.sevenrealm-start-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 12px;
  margin-top:13px;
  color:#736b60;
  font-size:.59rem;
}
.sevenrealm-start-footer a{
  margin:0!important;
  color:#9b8b70;
  border:0!important;
}
.sevenrealm-start .fullscreen-tip{
  margin:6px 0 0!important;
  color:#5e5951!important;
  font-size:.57rem!important;
}

/* ---------- Game: thin elegant steampunk frame ---------- */
.game-shell{
  border:1px solid rgba(185,143,74,.48)!important;
  box-shadow:
    0 22px 90px rgba(0,0,0,.64),
    inset 0 0 0 1px rgba(255,225,158,.035)!important;
}
.game-shell::before{
  content:"";
  position:absolute;
  z-index:108;
  inset:0;
  pointer-events:none;
  opacity:.58;
  border:1px solid rgba(202,160,89,.34);
  box-shadow:inset 0 0 0 3px rgba(15,10,6,.36);
  background-image:
    url("assets/ui-corner-tl.webp?v=1.4.35"),
    url("assets/ui-corner-tr.webp?v=1.4.35"),
    url("assets/ui-corner-bl.webp?v=1.4.35"),
    url("assets/ui-corner-br.webp?v=1.4.35");
  background-repeat:no-repeat;
  background-position:left top,right top,left bottom,right bottom;
  background-size:
    clamp(76px,8vw,118px) auto,
    clamp(76px,8vw,118px) auto,
    clamp(76px,8vw,118px) auto,
    clamp(76px,8vw,118px) auto;
}
.game-shell:fullscreen::before,.game-shell:-webkit-full-screen::before{
  opacity:.52;
}

/* First location: the approved Arkopolis panorama. */
.game-shell.level-1{
  --scene:url("assets/bg-arkopolis-7r.webp?v=1.4.35");
  background-position:center center;
}
@media (orientation:portrait) and (max-width:800px){
  .game-shell.level-1{
    --scene:url("assets/bg-arkopolis-7r-mobile.webp?v=1.4.35");
    background-position:center center;
  }
}

/* ---------- HUD: no fat cards, just fine instruments ---------- */
.hud{
  min-height:76px;
  padding:8px 13px;
  gap:13px;
  background:
    linear-gradient(180deg,rgba(8,8,9,.965),rgba(8,8,10,.84))!important;
  border-bottom:1px solid rgba(196,151,79,.48)!important;
  box-shadow:0 5px 20px rgba(0,0,0,.24),inset 0 -1px 0 rgba(255,225,158,.035);
  backdrop-filter:blur(9px) saturate(.88);
}
.brand{min-width:190px}
.kicker{
  color:#a88650!important;
  font-size:.55rem!important;
  letter-spacing:.26em!important;
}
.brand strong{
  color:#e6cfa1!important;
  font-size:1.05rem!important;
  font-weight:500;
  letter-spacing:.015em;
}
.level-box{
  position:relative;
  min-width:142px;
  padding:3px 14px 3px 17px!important;
  border-left:1px solid rgba(195,151,82,.32)!important;
}
.level-box::before{
  content:"◆";
  position:absolute;
  left:-6px;
  top:50%;
  transform:translateY(-50%);
  color:#8c5db2;
  font-size:.48rem;
  text-shadow:0 0 7px rgba(168,94,213,.45);
}
.level-box span{
  color:#d9b56f!important;
  font-size:.86rem!important;
  letter-spacing:.15em!important;
  text-shadow:none!important;
}
.level-box strong{
  color:#aaa08e!important;
  font-size:.68rem!important;
  font-weight:600;
}
.hud-stats{
  gap:0!important;
  align-items:center;
}
.stat{
  min-width:78px!important;
  padding:3px 10px!important;
  border:0!important;
  border-left:1px solid rgba(183,144,80,.20)!important;
  border-radius:0!important;
  background:transparent!important;
}
.stat span{
  color:#827a6f!important;
  font-size:.51rem!important;
  letter-spacing:.13em!important;
}
.stat strong{
  color:#e7d5b2!important;
  font-size:.96rem!important;
  font-weight:700;
}
.stat.high strong{color:#cbaa68!important}
.stat.lives strong{color:#d9b4bd!important}
.hud-actions{gap:5px!important}
.icon-btn{
  width:34px!important;
  height:34px!important;
  border:1px solid rgba(199,158,88,.30)!important;
  border-radius:50%!important;
  background:rgba(8,9,11,.68)!important;
  color:#dbc69f!important;
  box-shadow:inset 0 1px 0 rgba(255,234,190,.04)!important;
  font-size:.82rem!important;
}
.icon-btn:hover{
  border-color:rgba(222,186,121,.58)!important;
  background:rgba(26,20,13,.78)!important;
}

/* Traubenrausch becomes a small elegant energy instrument. */
.rausch-wrap{
  top:82px!important;
  width:min(230px,31vw)!important;
  padding:5px 8px 6px;
  border:1px solid rgba(184,143,78,.22);
  border-radius:8px;
  background:rgba(7,8,10,.55);
  backdrop-filter:blur(6px);
}
.rausch-label{
  font-size:.62rem!important;
  letter-spacing:.13em!important;
  color:#bca77f!important;
  text-shadow:none!important;
}
.rausch-label b{
  color:#cdb89a!important;
  font-size:.66rem!important;
}
.rausch-bar{
  margin-top:4px!important;
  height:5px!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.07)!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45);
}
.rausch-bar i{
  background:linear-gradient(90deg,#694080,#a268bf,#c7a466)!important;
  box-shadow:0 0 7px rgba(155,94,198,.34)!important;
}

/* Keep gameplay clear: frame is ornamental, never a fat obstacle. */
.playfield{box-shadow:inset 0 0 40px rgba(0,0,0,.06)}

/* Mobile: preserve the proven v1.4.24 layout and only tone the skin. */
@media(max-width:800px){
  .sevenrealm-start{
    width:95vw!important;
    padding:22px 15px 18px!important;
    max-height:94svh!important;
  }
  .sevenrealm-start-actions{top:10px;right:10px}
  .sevenrealm-icon-action{height:32px;min-width:38px;padding:0 8px;font-size:.61rem}
  .sevenrealm-start .realm-logo-start{width:min(215px,58vw)!important;margin-top:4px!important}
  .sevenrealm-start h1{font-size:clamp(1.9rem,9vw,2.75rem)!important}
  .sevenrealm-sera-wrap{min-height:115px!important}
  .sevenrealm-start .screen-sera{width:min(132px,34vw)!important}
  .sevenrealm-start-button{width:min(330px,94%)!important;padding:12px 18px!important}
  .sevenrealm-menu{grid-template-columns:repeat(2,1fr)!important;width:min(330px,94%)!important}
  .game-shell::before{
    opacity:.46;
    background-size:72px auto,72px auto,72px auto,72px auto;
  }
  .hud{
    min-height:112px!important;
    padding:7px!important;
    gap:6px!important;
  }
  .brand{min-width:125px!important}
  .brand strong{font-size:.8rem!important}
  .kicker{font-size:.45rem!important}
  .level-box{
    position:absolute!important;
    left:7px!important;
    top:55px!important;
    min-width:126px!important;
    padding:5px 9px!important;
    border-left:0!important;
    border:1px solid rgba(190,148,80,.24)!important;
    border-radius:7px!important;
    background:rgba(7,8,10,.56)!important;
  }
  .level-box::before{display:none}
  .level-box span{font-size:.78rem!important}
  .level-box strong{font-size:.58rem!important}
  .hud-stats{display:grid!important;grid-template-columns:repeat(2,72px)!important;gap:2px!important}
  .stat{padding:3px!important;border-left:1px solid rgba(183,144,80,.16)!important}
  .stat span{font-size:.47rem!important}
  .stat strong{font-size:.82rem!important}
  .hud-actions{flex-direction:column!important;gap:3px!important}
  .icon-btn{width:32px!important;height:32px!important}
  .rausch-wrap{
    top:116px!important;
    width:min(240px,82vw)!important;
  }
}
@media(max-width:430px){
  .sevenrealm-start-footer{font-size:.54rem}
  .sevenrealm-start .fullscreen-tip{display:none}
}

/* Short landscape: remain compact. */
@media(orientation:landscape) and (max-height:650px){
  .sevenrealm-start{
    width:min(690px,94vw)!important;
    padding:16px 24px 13px!important;
  }
  .sevenrealm-start .realm-logo-start{width:190px!important;margin-bottom:6px!important}
  .sevenrealm-start .eyebrow{font-size:.56rem!important;margin-bottom:4px!important}
  .sevenrealm-start h1{font-size:1.8rem!important}
  .sevenrealm-rule{margin:6px auto 2px}
  .sevenrealm-sera-wrap{min-height:76px!important;margin:0 0 4px!important}
  .sevenrealm-start .screen-sera{width:88px!important}
  .sevenrealm-start-button{padding:9px 18px!important;margin-bottom:7px!important}
  .sevenrealm-menu .menu-button{min-height:32px!important;padding:6px!important;font-size:.6rem!important}
  .sevenrealm-start-footer{margin-top:7px}
  .sevenrealm-start .fullscreen-tip{display:none}
}


/* ==========================================================
   v1.4.29 · Live-Feinschliff nach Mobile-/Landscape-Test
   - edler Arkopolis-Startscreen
   - Landscape-HUD niedriger + dezentes Steampunk, ohne Edelsteine
   - Portrait: Traubenrausch und Nachrichten kollidieren nicht mehr
   - Preset-Avatare zeigen Köpfe statt Ganzkörperausschnitte
   ========================================================== */

/* ---------- Startscreen: approved golden Arkopolis scene ---------- */
#startScreen.steampunk-overlay.open{
  padding:10px!important;
  background:linear-gradient(180deg,rgba(3,4,6,.88),rgba(2,3,5,.95))!important;
  backdrop-filter:blur(5px)!important;
}
.sevenrealm-start{
  width:min(1180px,96vw)!important;
  min-height:min(760px,92svh);
  max-height:94svh!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 34px 20px!important;
  overflow:auto;
  border:1px solid rgba(215,173,98,.44)!important;
  border-radius:18px!important;
  background:
    linear-gradient(180deg,rgba(8,9,10,.19),rgba(7,7,8,.22) 42%,rgba(5,5,6,.56) 82%,rgba(5,5,6,.78)),
    radial-gradient(circle at 50% 24%,rgba(255,224,157,.06),transparent 28%),
    url('assets/bg-start-7r-arkopolis.webp?v=1.4.35') center center / cover no-repeat!important;
  box-shadow:0 28px 90px rgba(0,0,0,.64),inset 0 0 0 1px rgba(255,235,192,.04)!important;
}
.sevenrealm-start::before{
  inset:10px!important;
  border-color:rgba(204,158,84,.28)!important;
  background:
    linear-gradient(90deg,rgba(190,143,72,.34),transparent 9%,transparent 91%,rgba(190,143,72,.34)) top/100% 1px no-repeat,
    linear-gradient(90deg,rgba(190,143,72,.26),transparent 9%,transparent 91%,rgba(190,143,72,.26)) bottom/100% 1px no-repeat;
}
.sevenrealm-start-actions{top:16px!important;right:16px!important}
.sevenrealm-icon-action{
  border-color:rgba(215,177,105,.44)!important;
  background:rgba(8,8,9,.72)!important;
  color:#ead5ad!important;
  backdrop-filter:blur(5px);
}
.sevenrealm-start .realm-logo-start{
  width:min(275px,45vw)!important;
  margin:0 auto 10px!important;
  opacity:.92!important;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.55))!important;
}
.sevenrealm-start .eyebrow{
  margin:0 0 5px!important;
  color:#d5ac68!important;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.sevenrealm-start h1{
  max-width:950px;
  margin:0!important;
  color:#f0d69f!important;
  font-size:clamp(2.8rem,6.5vw,6rem)!important;
  line-height:.98!important;
  text-shadow:0 2px 0 rgba(67,39,15,.76),0 7px 25px rgba(0,0,0,.68)!important;
}
.sevenrealm-rule{margin:10px auto 2px!important}
.sevenrealm-sera-wrap{
  min-height:205px!important;
  margin:0 0 5px!important;
  justify-content:center!important;
  background:none!important;
}
.sevenrealm-start .screen-sera{
  width:min(225px,26vw)!important;
  filter:drop-shadow(0 15px 22px rgba(0,0,0,.56))!important;
}
.sevenrealm-start-button{
  width:min(520px,74%)!important;
  margin:0 auto 10px!important;
  padding:14px 24px!important;
  border-radius:9px!important;
  border:1px solid rgba(231,197,130,.72)!important;
  background:linear-gradient(180deg,rgba(176,126,57,.96),rgba(109,71,27,.98))!important;
  color:#f7e3b8!important;
  text-shadow:0 1px 0 rgba(0,0,0,.72)!important;
  box-shadow:inset 0 1px 0 rgba(255,238,198,.20),0 9px 22px rgba(0,0,0,.28)!important;
}
.sevenrealm-menu{
  width:min(660px,86%)!important;
  gap:8px!important;
}
.sevenrealm-menu .menu-button{
  min-height:42px!important;
  border-color:rgba(203,158,84,.36)!important;
  background:rgba(8,8,9,.70)!important;
  color:#e2cda6!important;
  backdrop-filter:blur(4px);
}
.sevenrealm-start-footer{
  margin-top:13px!important;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(5,5,6,.38);
  color:#c1ab84!important;
  backdrop-filter:blur(4px);
}
.sevenrealm-start-footer a{color:#d2bc91!important}
.sevenrealm-start .fullscreen-tip{color:#9d8b70!important}

/* ---------- Avatar picker: head portraits ---------- */
.account-avatar-picker .avatar-choice,
.account-avatar-preview-wrap{
  background:radial-gradient(circle at 50% 38%,rgba(73,58,39,.76),rgba(12,13,15,.96))!important;
}
.account-avatar-picker .avatar-choice img,
.account-avatar-preview{
  object-fit:contain!important;
  object-position:center!important;
}
.account-avatar-picker .avatar-choice{overflow:hidden!important}
.account-avatar-picker .avatar-choice img{transform:scale(1.02)}

/* ---------- Portrait: give messages and Traubenrausch their own lanes ---------- */
@media(max-width:800px) and (orientation:portrait){
  .sevenrealm-start{
    width:95vw!important;
    min-height:88svh!important;
    padding:20px 14px 16px!important;
    background:
      linear-gradient(180deg,rgba(5,6,7,.28),rgba(5,5,6,.36) 43%,rgba(4,4,5,.70) 82%,rgba(4,4,5,.84)),
      url('assets/bg-start-7r-arkopolis-mobile.webp?v=1.4.35') center center / cover no-repeat!important;
  }
  .sevenrealm-start .realm-logo-start{width:min(215px,54vw)!important;margin-top:8px!important}
  .sevenrealm-start h1{font-size:clamp(2.05rem,9.6vw,3.2rem)!important;max-width:94%}
  .sevenrealm-start .eyebrow{font-size:.56rem!important;letter-spacing:.20em!important}
  .sevenrealm-rule{width:min(280px,72%)}
  .sevenrealm-sera-wrap{min-height:170px!important;margin-top:auto!important}
  .sevenrealm-start .screen-sera{width:min(175px,42vw)!important}
  .sevenrealm-start-button{width:min(370px,92%)!important;padding:13px 18px!important}
  .sevenrealm-menu{width:min(370px,92%)!important;grid-template-columns:repeat(2,1fr)!important}
  .sevenrealm-start-footer{font-size:.53rem!important;gap:5px 9px!important}

  /* HUD upper-left declutter */
  .hud{min-height:106px!important;height:106px!important;padding:7px 8px!important}
  .brand{min-width:118px!important;max-width:145px!important;padding-top:1px}
  .brand .kicker{display:none!important}
  .brand strong{font-size:.76rem!important;line-height:1.05!important}
  .hud-player-name{font-size:.56rem!important;max-width:130px!important;margin-top:4px!important}
  .level-box{
    left:8px!important;top:55px!important;
    min-width:116px!important;
    padding:5px 8px!important;
    border-color:rgba(190,148,80,.22)!important;
    background:rgba(7,8,10,.62)!important;
  }
  .level-box span{font-size:.70rem!important;letter-spacing:.12em!important}
  .level-box strong{font-size:.54rem!important}
  .hud-stats{grid-template-columns:repeat(2,68px)!important;gap:1px!important;margin-left:auto!important}
  .stat{min-width:0!important;padding:3px 4px!important}
  .stat span{font-size:.44rem!important}
  .stat strong{font-size:.78rem!important}
  .hud-actions{gap:3px!important}
  .icon-btn{width:30px!important;height:30px!important}
  .playfield{inset:106px 0 0!important}

  /* Separate horizontal zones, so messages can never sit under the gauge. */
  .rausch-wrap{
    top:112px!important;
    right:8px!important;
    left:auto!important;
    width:min(42vw,178px)!important;
    padding:6px 8px!important;
  }
  .rausch-label{font-size:.61rem!important}
  .rausch-label b{font-size:.67rem!important}
  .rausch-bar{height:6px!important;margin-top:4px!important}
  .info-stack{
    left:8px!important;
    top:8px!important;
    width:min(47vw,205px)!important;
  }
  .message-entry{
    font-size:.60rem!important;
    padding:6px 8px 6px 10px!important;
  }
}

/* ---------- Landscape phone/tablet: slimmer, restrained steampunk HUD ---------- */
@media(orientation:landscape) and (max-height:650px){
  .hud{
    min-height:46px!important;
    height:46px!important;
    padding:4px 8px!important;
    gap:7px!important;
    background:
      linear-gradient(180deg,rgba(11,10,9,.97),rgba(8,8,9,.90))!important;
    border-top:1px solid rgba(215,174,98,.26)!important;
    border-bottom:1px solid rgba(204,160,87,.52)!important;
    box-shadow:inset 0 1px 0 rgba(255,235,192,.035),0 5px 14px rgba(0,0,0,.20)!important;
  }
  .hud::before,.hud::after{
    content:"";
    position:absolute;
    top:5px;
    width:54px;
    height:34px;
    pointer-events:none;
    opacity:.48;
  }
  .hud::before{
    left:0;
    background:
      radial-gradient(circle at 12px 17px,transparent 0 7px,rgba(189,143,73,.42) 8px 9px,transparent 10px),
      linear-gradient(90deg,rgba(189,143,73,.35),transparent) center/100% 1px no-repeat;
  }
  .hud::after{
    right:0;
    transform:scaleX(-1);
    background:
      radial-gradient(circle at 12px 17px,transparent 0 7px,rgba(189,143,73,.42) 8px 9px,transparent 10px),
      linear-gradient(90deg,rgba(189,143,73,.35),transparent) center/100% 1px no-repeat;
  }
  .brand{min-width:124px!important;max-width:170px!important}
  .kicker{font-size:.40rem!important;letter-spacing:.20em!important}
  .brand strong{font-size:.72rem!important;line-height:1!important}
  .hud-player-name{font-size:.48rem!important;margin-top:1px!important}
  .level-box{
    min-width:100px!important;
    padding:2px 8px!important;
    border-left-color:rgba(199,155,85,.24)!important;
  }
  .level-box span{font-size:.66rem!important;letter-spacing:.11em!important}
  .level-box strong{font-size:.48rem!important}
  .hud-stats{gap:1px!important}
  .stat{min-width:54px!important;padding:2px 6px!important}
  .stat span{font-size:.38rem!important;letter-spacing:.10em!important}
  .stat strong{font-size:.70rem!important}
  .hud-actions{gap:2px!important}
  .icon-btn{width:27px!important;height:27px!important;font-size:.68rem!important}
  .playfield{inset:46px 0 0!important}
  .rausch-wrap{
    top:49px!important;
    right:8px!important;
    width:min(22vw,198px)!important;
    padding:5px 7px!important;
    border-radius:7px!important;
  }
  .rausch-label{font-size:.50rem!important}
  .rausch-label b{font-size:.58rem!important}
  .rausch-bar{height:5px!important;margin-top:3px!important}
  .info-stack{top:7px!important;left:7px!important;width:min(30vw,240px)!important}
}

/* Slightly smaller game corner art: visible theme, no frame takeover. */
.game-shell::before{
  opacity:.43!important;
  background-size:
    clamp(62px,6.5vw,92px) auto,
    clamp(62px,6.5vw,92px) auto,
    clamp(62px,6.5vw,92px) auto,
    clamp(62px,6.5vw,92px) auto!important;
}
@media(max-width:800px){
  .game-shell::before{opacity:.37!important;background-size:58px auto,58px auto,58px auto,58px auto!important}
}

/* v1.4.29 · Level-/Modifikator-Anzeige im freien HUD-Bereich */
.hud-stage-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:stretch;
  flex:1 1 240px;
  min-width:180px;
  max-width:420px;
  padding:0 10px 0 14px;
  border-left:1px solid rgba(218,181,109,.16);
  overflow:hidden;
}
.hud-stage-title,
.hud-stage-meta{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hud-stage-title{
  color:#f1d79f;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hud-stage-meta{
  margin-top:3px;
  color:#c9b892;
  font-size:.63rem;
  font-weight:700;
  letter-spacing:.04em;
}
@media (max-width:800px){
  .hud-stage-info{display:none}
}
@media (orientation:landscape) and (max-height:650px){
  .hud-stage-info{
    display:flex!important;
    min-width:170px;
    max-width:300px;
    padding:0 6px 0 10px;
    border-left:1px solid rgba(218,181,109,.12);
  }
  .hud-stage-title{font-size:.60rem;letter-spacing:.07em}
  .hud-stage-meta{font-size:.50rem;margin-top:2px}
}
@media (min-width:801px){
  .hud-stage-info{display:flex}
}


/* ==========================================================
   v1.4.31 · Startscreen als echtes Game-Lobby-Design
   Gameplay bleibt v1.4.29. Nur Startscreen-Haut/Komposition.
   ========================================================== */

#startScreen.steampunk-overlay.open{
  padding:8px!important;
  background:
    radial-gradient(circle at 50% 18%,rgba(218,168,84,.10),transparent 28%),
    linear-gradient(180deg,rgba(2,3,5,.88),rgba(1,2,4,.96))!important;
  backdrop-filter:blur(5px)!important;
}
.game-lobby-start{
  position:relative;
  isolation:isolate;
  width:min(1240px,97vw)!important;
  min-height:min(790px,94svh)!important;
  max-height:95svh!important;
  overflow:auto!important;
  padding:24px 32px 18px!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(222,181,104,.54)!important;
  border-radius:22px!important;
  background:
    linear-gradient(180deg,rgba(7,7,9,.06),rgba(5,5,7,.12) 48%,rgba(4,4,6,.62) 86%,rgba(4,4,5,.82)),
    radial-gradient(circle at 50% 29%,rgba(255,225,163,.08),transparent 30%),
    url('assets/bg-start-7r-arkopolis.webp?v=1.4.35') center center / cover no-repeat!important;
  box-shadow:
    0 34px 100px rgba(0,0,0,.70),
    inset 0 0 0 1px rgba(255,236,194,.06),
    inset 0 0 70px rgba(0,0,0,.10)!important;
}
.game-lobby-start::before{
  content:""!important;
  position:absolute!important;
  inset:10px!important;
  z-index:-1!important;
  pointer-events:none!important;
  border:1px solid rgba(207,161,84,.36)!important;
  border-radius:16px!important;
  background:
    linear-gradient(90deg,rgba(226,181,101,.32),transparent 11%,transparent 89%,rgba(226,181,101,.32)) top/100% 1px no-repeat,
    linear-gradient(90deg,rgba(226,181,101,.24),transparent 11%,transparent 89%,rgba(226,181,101,.24)) bottom/100% 1px no-repeat!important;
}
.game-lobby-start::after{
  content:""!important;
  position:absolute!important;
  inset:16px!important;
  z-index:-1!important;
  pointer-events:none!important;
  border-radius:13px!important;
  box-shadow:inset 0 0 50px rgba(0,0,0,.18)!important;
  opacity:1!important;
}

/* Corners are game-like, but kept at the edge so content stays clean. */
.lobby-corner{
  position:absolute;
  z-index:1;
  width:132px;
  height:132px;
  pointer-events:none;
  opacity:.58;
  background-repeat:no-repeat;
  background-size:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.25));
}
.lobby-corner-tl{left:10px;top:10px;background-image:url('assets/ui-corner-tl.webp?v=1.4.35')}
.lobby-corner-tr{right:10px;top:10px;background-image:url('assets/ui-corner-tr.webp?v=1.4.35')}
.lobby-corner-bl{left:10px;bottom:10px;background-image:url('assets/ui-corner-bl.webp?v=1.4.35')}
.lobby-corner-br{right:10px;bottom:10px;background-image:url('assets/ui-corner-br.webp?v=1.4.35')}

.lobby-actions{z-index:6!important;top:17px!important;right:18px!important;gap:7px!important}
.lobby-actions .sevenrealm-icon-action{
  height:38px!important;
  min-width:42px!important;
  padding:0 13px!important;
  border:1px solid rgba(227,188,116,.52)!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,rgba(39,31,20,.92),rgba(10,11,13,.92))!important;
  color:#ecd4a7!important;
  box-shadow:inset 0 1px 0 rgba(255,234,190,.08),0 7px 16px rgba(0,0,0,.25)!important;
  backdrop-filter:blur(5px);
}
.lobby-profile-action{min-width:78px!important}
.lobby-actions .sevenrealm-icon-action:hover{border-color:rgba(245,211,145,.82)!important;color:#fff0c9!important;transform:translateY(-1px)}

.lobby-brand{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(480px,76vw);
  margin:0 auto 8px;
}
.game-lobby-start .realm-logo-start{
  width:min(270px,44vw)!important;
  margin:0 auto 7px!important;
  opacity:.96!important;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.50))!important;
}
.lobby-brand-rule{
  width:min(320px,62vw);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(219,174,96,.46),transparent);
}

.start-title-plaque{
  position:relative;
  z-index:4;
  width:min(850px,82%);
  margin:0 auto 4px;
  padding:13px 26px 15px;
  text-align:center;
  border:1px solid rgba(231,191,113,.55);
  border-radius:13px;
  background:
    linear-gradient(180deg,rgba(19,20,22,.92),rgba(6,7,9,.88)),
    radial-gradient(circle at 50% 0,rgba(255,225,157,.08),transparent 44%);
  box-shadow:
    inset 0 1px 0 rgba(255,236,193,.08),
    inset 0 -3px 0 rgba(67,45,21,.42),
    0 10px 28px rgba(0,0,0,.30);
}
.start-title-plaque::before,.start-title-plaque::after{
  content:"";
  position:absolute;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%) rotate(45deg);
  border:1px solid rgba(224,180,97,.62);
  background:#16120d;
  box-shadow:0 0 0 3px rgba(6,7,8,.55);
}
.start-title-plaque::before{left:-10px}.start-title-plaque::after{right:-10px}
.game-lobby-start .eyebrow{
  margin:0 0 5px!important;
  color:#d6ad68!important;
  font-size:.64rem!important;
  letter-spacing:.28em!important;
  text-transform:uppercase!important;
  text-shadow:none!important;
}
.game-lobby-start h1{
  margin:0!important;
  color:#f0d6a1!important;
  font:500 clamp(2.6rem,5.7vw,5.2rem)/.96 Georgia,"Times New Roman",serif!important;
  letter-spacing:.005em!important;
  text-shadow:0 2px 0 rgba(73,44,17,.75),0 10px 28px rgba(0,0,0,.54)!important;
}
.start-tagline{
  margin:8px auto 0!important;
  color:#cfbc96!important;
  font:600 .78rem/1.3 Georgia,"Times New Roman",serif!important;
  letter-spacing:.04em;
}

.lobby-middle{
  position:relative;
  z-index:3;
  width:min(1030px,91%);
  min-height:245px;
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(280px,1.5fr) minmax(150px,1fr);
  align-items:center;
  gap:18px;
  margin:-3px auto 0;
}
.lobby-sera-wrap{
  position:relative!important;
  z-index:3!important;
  min-height:245px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:none!important;
  box-shadow:none!important;
}
.lobby-sera-halo{
  position:absolute;
  width:250px;
  height:120px;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(232,174,81,.13),rgba(113,76,139,.08) 42%,transparent 72%);
  filter:blur(8px);
}
.game-lobby-start .screen-sera{
  position:relative;
  z-index:2;
  width:min(260px,29vw)!important;
  max-width:none!important;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.52)) drop-shadow(0 0 15px rgba(72,136,190,.13))!important;
  transform:translateY(2px);
}
.lobby-note{
  width:100%;
  max-width:210px;
  padding:13px 14px;
  border:1px solid rgba(207,163,91,.36);
  border-radius:10px 10px 12px 12px;
  background:linear-gradient(180deg,rgba(25,22,17,.78),rgba(8,9,11,.72));
  color:#bfad8d;
  box-shadow:inset 0 1px 0 rgba(255,230,180,.05),0 8px 20px rgba(0,0,0,.20);
  backdrop-filter:blur(4px);
}
.lobby-note-left{justify-self:end;transform:rotate(-1.2deg)}
.lobby-note-right{justify-self:start;transform:rotate(1.1deg)}
.lobby-note strong{
  display:block;
  margin-bottom:5px;
  color:#e0c58f;
  font:700 .73rem Georgia,"Times New Roman",serif;
  letter-spacing:.06em;
}
.lobby-note span{display:block;font-size:.65rem;line-height:1.45}

.lobby-controls{
  position:relative;
  z-index:5;
  width:min(820px,88%);
  margin:-6px auto 0;
}
.lobby-start-button{
  position:relative!important;
  width:min(570px,78%)!important;
  margin:0 auto 11px!important;
  padding:17px 26px!important;
  overflow:visible!important;
  border:1px solid #e5c47e!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#dcb264 0%,#a77432 58%,#75471d 100%)!important;
  color:#1b1006!important;
  font:900 clamp(1.25rem,2.2vw,1.85rem)/1 Georgia,"Times New Roman",serif!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  text-shadow:0 1px 0 rgba(255,239,194,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,247,213,.55),inset 0 -3px 0 rgba(76,38,12,.70),0 12px 26px rgba(0,0,0,.32)!important;
}
.lobby-start-button::before,.lobby-start-button::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:50%!important;
  width:16px!important;
  height:16px!important;
  border-radius:50%!important;
  transform:translateY(-50%)!important;
  background:radial-gradient(circle at 35% 30%,#e4c0ff,#8f56a9 55%,#422251)!important;
  box-shadow:0 0 0 4px rgba(68,41,18,.92),0 0 12px rgba(161,94,189,.26)!important;
}
.lobby-start-button::before{left:14px!important}.lobby-start-button::after{right:14px!important}
.lobby-start-button:hover{filter:brightness(1.06)!important;transform:translateY(-2px)!important}

.lobby-menu{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:9px!important;
  margin:0!important;
}
.lobby-menu .menu-button{
  min-height:52px!important;
  padding:10px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid rgba(217,177,104,.48)!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,rgba(24,23,20,.90),rgba(7,8,10,.92))!important;
  color:#dec79d!important;
  box-shadow:inset 0 1px 0 rgba(255,232,183,.06),0 8px 18px rgba(0,0,0,.20)!important;
  font-size:.72rem!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
.lobby-menu .menu-button b{color:#d6a958;font:800 1rem/1 Georgia,serif}
.lobby-menu .menu-button:hover{border-color:rgba(239,203,134,.78)!important;background:linear-gradient(180deg,rgba(43,34,22,.94),rgba(11,11,12,.94))!important;color:#f3dfb7!important;transform:translateY(-1px)}
.lobby-menu .menu-button::after{display:none!important}
.game-lobby-start .start-music-panel{margin:9px auto 0!important;width:min(390px,90%)!important}

.lobby-footer{
  position:relative;
  z-index:4;
  margin-top:12px!important;
  padding:6px 13px!important;
  border:1px solid rgba(183,141,75,.18);
  border-radius:999px!important;
  background:rgba(5,6,7,.46)!important;
  color:#b7a27f!important;
  backdrop-filter:blur(4px);
}
.lobby-footer a{color:#d5be91!important}
.game-lobby-start .fullscreen-tip{margin:6px 0 0!important;color:#8d7f69!important}

/* Tablet / narrow landscape */
@media(max-width:1000px){
  .game-lobby-start{width:96vw!important;padding:22px 22px 17px!important}
  .start-title-plaque{width:min(760px,86%)}
  .lobby-middle{grid-template-columns:1fr minmax(260px,1.35fr) 1fr;width:94%;gap:10px}
  .lobby-note{max-width:170px;padding:10px 11px}
  .lobby-note span{font-size:.58rem}
  .game-lobby-start .screen-sera{width:min(235px,29vw)!important}
  .lobby-controls{width:min(730px,90%)}
}

/* Phones: same design language, no fixed-poster layout. */
@media(max-width:800px) and (orientation:portrait){
  #startScreen.steampunk-overlay.open{padding:0!important}
  .game-lobby-start{
    width:100vw!important;
    min-height:calc(100svh - 1px)!important;
    max-height:none!important;
    padding:24px 13px calc(30px + env(safe-area-inset-bottom))!important;
    border-radius:0!important;
    border-left:1px solid rgba(222,181,104,.38)!important;
    border-right:1px solid rgba(222,181,104,.38)!important;
    background:
      linear-gradient(180deg,rgba(5,6,8,.10),rgba(4,5,7,.18) 48%,rgba(3,4,6,.72) 84%,rgba(3,4,5,.91)),
      url('assets/bg-start-7r-arkopolis-mobile.webp?v=1.4.35') center center / cover no-repeat!important;
  }
  .game-lobby-start::before{inset:9px!important;border-radius:18px!important}
  .lobby-corner{width:78px;height:78px;opacity:.40}
  .lobby-corner-tl,.lobby-corner-tr{top:8px}.lobby-corner-bl,.lobby-corner-br{bottom:8px}
  .lobby-actions{top:15px!important;right:15px!important}
  .lobby-actions .sevenrealm-icon-action{height:36px!important;padding:0 11px!important}
  .lobby-profile-action{min-width:67px!important}
  .lobby-brand{margin-top:7px;margin-bottom:8px;width:78%}
  .game-lobby-start .realm-logo-start{width:min(205px,53vw)!important;margin-bottom:5px!important}
  .start-title-plaque{width:94%;padding:12px 14px 13px;border-radius:11px}
  .start-title-plaque::before,.start-title-plaque::after{width:13px;height:13px}
  .game-lobby-start .eyebrow{font-size:.54rem!important;letter-spacing:.22em!important}
  .game-lobby-start h1{font-size:clamp(2rem,10vw,3rem)!important;line-height:1!important}
  .start-tagline{font-size:.65rem!important;margin-top:6px!important}
  .lobby-middle{display:flex;width:100%;min-height:240px;margin:0 auto;justify-content:center;align-items:center}
  .lobby-note{display:none}
  .lobby-sera-wrap{min-height:230px!important;width:100%!important}
  .lobby-sera-halo{width:220px;height:100px;bottom:36px}
  .game-lobby-start .screen-sera{width:min(210px,52vw)!important;transform:none!important}
  .lobby-controls{width:92%;margin:-10px auto 0}
  .lobby-start-button{width:100%!important;padding:15px 20px!important;margin-bottom:10px!important;font-size:1.2rem!important}
  .lobby-menu{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .lobby-menu .menu-button{min-height:52px!important;font-size:.68rem!important;padding:10px 7px!important}
  .lobby-footer{font-size:.53rem!important;gap:5px 9px!important;margin-top:12px!important}
  .game-lobby-start .fullscreen-tip{display:none!important}
}

/* Short landscape phones/tablets: compact game lobby. */
@media(orientation:landscape) and (max-height:650px){
  #startScreen.steampunk-overlay.open{padding:4px!important}
  .game-lobby-start{
    width:min(1120px,97vw)!important;
    min-height:96svh!important;
    max-height:97svh!important;
    padding:10px 24px 9px!important;
    justify-content:center!important;
  }
  .lobby-corner{width:78px;height:78px;opacity:.38}
  .lobby-actions{top:10px!important;right:12px!important}
  .lobby-actions .sevenrealm-icon-action{height:30px!important;font-size:.58rem!important;padding:0 9px!important}
  .lobby-profile-action{min-width:62px!important}
  .lobby-brand{margin:0 auto 3px;width:58%}
  .game-lobby-start .realm-logo-start{width:155px!important;margin-bottom:2px!important}
  .start-title-plaque{width:min(650px,70%);padding:7px 18px 8px;margin-bottom:0}
  .game-lobby-start .eyebrow{font-size:.47rem!important;margin-bottom:2px!important}
  .game-lobby-start h1{font-size:1.8rem!important}
  .start-tagline{font-size:.55rem!important;margin-top:3px!important}
  .lobby-middle{min-height:120px;width:70%;display:flex;justify-content:center;margin:0 auto}
  .lobby-note{display:none}
  .lobby-sera-wrap{min-height:115px!important}
  .lobby-sera-halo{width:150px;height:62px;bottom:18px}
  .game-lobby-start .screen-sera{width:112px!important;transform:none!important}
  .lobby-controls{width:min(700px,78%);margin:-4px auto 0}
  .lobby-start-button{width:min(410px,66%)!important;padding:9px 16px!important;margin-bottom:6px!important;font-size:.95rem!important}
  .lobby-start-button::before,.lobby-start-button::after{width:11px!important;height:11px!important}
  .lobby-menu{gap:6px!important}
  .lobby-menu .menu-button{min-height:34px!important;padding:6px!important;font-size:.56rem!important}
  .lobby-menu .menu-button b{font-size:.78rem!important}
  .lobby-footer{margin-top:6px!important;font-size:.47rem!important;padding:4px 10px!important}
  .game-lobby-start .fullscreen-tip{display:none!important}
}


/* ==========================================================
   v1.4.31 · FINAL START LOBBY
   Real rendered UI components + responsive HTML interaction.
   Gameplay/HUD remain unchanged from 1.4.29/1.4.30.
   ========================================================== */
#startScreen.game-start-overlay.open{
  padding:0!important;
  background:#020305!important;
  backdrop-filter:none!important;
}
.game-lobby-final{
  position:relative!important;
  isolation:isolate;
  width:min(1360px,100vw)!important;
  height:min(900px,100svh)!important;
  min-height:0!important;
  max-height:100svh!important;
  overflow:hidden!important;
  padding:16px 34px 13px!important;
  display:grid!important;
  grid-template-rows:auto auto minmax(210px,1fr) auto auto;
  align-items:center;
  justify-items:center;
  gap:3px;
  border:0!important;
  border-radius:0!important;
  background:
    linear-gradient(180deg,rgba(4,6,10,.03),rgba(4,5,7,.07) 56%,rgba(2,3,5,.42) 100%),
    url('assets/bg-start-7r-arkopolis.webp?v=1.4.35') center center/cover no-repeat!important;
  box-shadow:inset 0 0 0 1px rgba(217,175,96,.52),inset 0 0 75px rgba(0,0,0,.22)!important;
  text-align:center!important;
}
.game-lobby-final::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:8px!important;
  border:1px solid rgba(229,188,108,.42)!important;
  border-radius:12px!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(226,182,100,.32),transparent 12%,transparent 88%,rgba(226,182,100,.32)) top/100% 1px no-repeat,
    linear-gradient(90deg,rgba(226,182,100,.26),transparent 12%,transparent 88%,rgba(226,182,100,.26)) bottom/100% 1px no-repeat!important;
}
.game-lobby-final::after{display:none!important}
.game-lobby-final>*:not(.lobby-corner){position:relative;z-index:3}

.game-lobby-final .lobby-corner{
  z-index:2!important;
  width:118px!important;
  height:118px!important;
  opacity:.72!important;
}
.game-lobby-final .lobby-corner-tl{left:4px!important;top:4px!important}
.game-lobby-final .lobby-corner-tr{right:4px!important;top:4px!important}
.game-lobby-final .lobby-corner-bl{left:4px!important;bottom:4px!important}
.game-lobby-final .lobby-corner-br{right:4px!important;bottom:4px!important}

.lobby-top{
  width:100%;
  min-height:66px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.lobby-logo-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.lobby-logo{
  width:min(250px,28vw)!important;
  height:auto!important;
  filter:drop-shadow(0 5px 13px rgba(0,0,0,.46));
}
.lobby-logo-wrap span{
  color:#d4ae69;
  font:800 .60rem/1.1 system-ui,sans-serif;
  letter-spacing:.28em;
  text-transform:uppercase;
  text-shadow:0 2px 7px rgba(0,0,0,.72);
}
.lobby-top-actions{
  position:absolute!important;
  top:4px;
  right:4px;
  display:flex;
  gap:7px;
}
.lobby-top-button{
  min-width:43px;
  height:38px;
  padding:0 12px;
  border:1px solid rgba(229,188,112,.66);
  border-radius:9px;
  background:linear-gradient(180deg,rgba(47,35,21,.96),rgba(12,13,15,.96));
  color:#f0d49f;
  font:900 .70rem/1 system-ui,sans-serif;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,232,183,.10),0 7px 16px rgba(0,0,0,.30);
}
.lobby-top-button:hover{filter:brightness(1.12);transform:translateY(-1px)}
.lobby-profile-button{min-width:82px}

.lobby-title-frame{
  width:min(930px,76vw);
  aspect-ratio:3 / 1;
  margin:-14px auto -18px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 10% 11.5%;
  background:url('assets/ui-lobby-title.webp?v=1.4.35') center/contain no-repeat;
  filter:drop-shadow(0 13px 20px rgba(0,0,0,.36));
}
.lobby-title-copy{width:100%;transform:translateY(2px)}
.lobby-title-copy h1{
  margin:0!important;
  color:#efd29b!important;
  font:500 clamp(2.25rem,4.5vw,4.6rem)/.95 Georgia,"Times New Roman",serif!important;
  letter-spacing:.005em!important;
  white-space:nowrap;
  text-shadow:0 2px 0 #543114,0 8px 17px rgba(0,0,0,.58)!important;
}
.lobby-title-copy p{
  margin:6px 0 0!important;
  color:#d6bc8f!important;
  font:700 .78rem/1.15 Georgia,"Times New Roman",serif!important;
  letter-spacing:.04em;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}

.lobby-character-stage{
  width:min(1080px,88vw);
  min-height:240px;
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(330px,1.5fr) minmax(150px,1fr);
  align-items:center;
  gap:20px;
  margin:-12px auto -20px;
}
.lobby-sera-stage{
  position:relative;
  min-height:270px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lobby-sera-light{
  position:absolute;
  left:50%;
  bottom:36px;
  width:340px;
  height:140px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,205,102,.19),rgba(99,134,178,.12) 44%,transparent 72%);
  filter:blur(8px);
}
.lobby-sera{
  position:relative!important;
  z-index:2;
  width:min(350px,29vw)!important;
  max-width:none!important;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.50)) drop-shadow(0 0 18px rgba(78,145,207,.14))!important;
  animation:lobbySeraFloat 3.8s ease-in-out infinite alternate;
}
@keyframes lobbySeraFloat{to{transform:translateY(-7px) rotate(.4deg)}}
.lobby-floating-grape{
  position:absolute;
  z-index:4;
  font-size:1.5rem;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.35));
  animation:lobbyGrape 2.6s ease-in-out infinite alternate;
}
.grape-one{right:8%;top:21%}
.grape-two{left:12%;bottom:22%;font-size:1rem;animation-delay:-1.1s}
@keyframes lobbyGrape{to{transform:translateY(-8px) rotate(7deg)}}

.lobby-paper-note{
  position:relative;
  width:100%;
  max-width:205px;
  padding:14px 14px 13px;
  border:1px solid rgba(113,74,30,.62);
  border-radius:4px;
  background:
    linear-gradient(180deg,rgba(246,218,159,.97),rgba(204,165,99,.96));
  color:#4b2f16;
  box-shadow:0 8px 22px rgba(0,0,0,.27),inset 0 0 18px rgba(110,62,20,.10);
  font-family:Georgia,"Times New Roman",serif;
}
.lobby-paper-note::before{
  content:"";
  position:absolute;
  width:9px;height:9px;
  top:7px;left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:#7f5126;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.4);
}
.lobby-paper-left{justify-self:end;transform:rotate(-2deg)}
.lobby-paper-right{justify-self:start;transform:rotate(2deg)}
.lobby-paper-note strong{display:block;margin:3px 0 6px;font-size:.85rem}
.lobby-paper-note span{display:block;font-size:.69rem;line-height:1.35}
.lobby-paper-note b{display:block;margin-top:4px;font-size:.86rem}

.lobby-control-deck{
  width:min(1060px,90vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}
.lobby-rendered-button{
  position:relative;
  border:0!important;
  outline:0;
  background-color:transparent!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:100% 100%!important;
  cursor:pointer;
  color:#281506!important;
  text-shadow:0 1px rgba(255,238,194,.36);
  transition:transform .15s ease,filter .15s ease;
}
.lobby-rendered-button:hover{filter:brightness(1.08);transform:translateY(-2px)}
.lobby-rendered-button:active{transform:translateY(1px) scale(.99)}
.lobby-rendered-start{
  width:min(570px,64vw);
  aspect-ratio:2.63 / 1;
  margin:-12px auto -18px;
  background-image:url('assets/ui-lobby-start.webp?v=1.4.35')!important;
  font:900 clamp(1.4rem,2.4vw,2.25rem)/1 Georgia,"Times New Roman",serif!important;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.lobby-rendered-start span{display:block;transform:translateY(-1px)}
.lobby-rendered-menu{
  width:min(930px,86vw);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
}
.lobby-rendered-small{
  width:100%;
  aspect-ratio:2.76 / 1;
  background-image:url('assets/ui-lobby-menu.webp?v=1.4.35')!important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font:900 .72rem/1 system-ui,sans-serif!important;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.lobby-rendered-small b{
  font-size:1.05rem;
  font-weight:900;
}
.lobby-rendered-small span{transform:translateY(1px)}
.lobby-music-panel{
  position:absolute!important;
  z-index:20;
  bottom:72px;
  width:min(360px,80vw)!important;
  border-radius:10px!important;
  background:rgba(8,9,11,.96)!important;
}
.lobby-final-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 16px;
  color:#d1b57f;
  font-size:.62rem;
  text-shadow:0 2px 7px rgba(0,0,0,.8);
}
.lobby-final-footer a{
  color:#e0c494!important;
  text-decoration:none;
}
.lobby-final-tip{
  margin:2px 0 0!important;
  color:#9f8b69!important;
  font-size:.56rem!important;
}

/* Mobile: same game identity, rebuilt as a vertical game cover. */
@media(max-width:800px){
  #startScreen.game-start-overlay.open{
    display:block!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:0!important;
    background:#030405!important;
  }
  .game-lobby-final{
    width:100vw!important;
    height:auto!important;
    min-height:max(100svh,780px)!important;
    max-height:none!important;
    overflow:hidden!important;
    padding:14px 12px 22px!important;
    grid-template-rows:auto auto auto auto auto!important;
    gap:2px!important;
    background:
      linear-gradient(180deg,rgba(4,5,8,.04),rgba(3,4,6,.10) 50%,rgba(3,4,5,.64)),
      url('assets/bg-start-7r-arkopolis-mobile.webp?v=1.4.35') center center/cover no-repeat!important;
  }
  .game-lobby-final .lobby-corner{width:76px!important;height:76px!important;opacity:.62!important}
  .lobby-top{min-height:72px}
  .lobby-logo{width:min(205px,52vw)!important}
  .lobby-logo-wrap span{font-size:.48rem;letter-spacing:.20em}
  .lobby-top-actions{top:2px;right:2px}
  .lobby-top-button{height:34px;min-width:38px;padding:0 8px;font-size:.61rem}
  .lobby-profile-button{min-width:68px}
  .lobby-title-frame{
    width:min(620px,96vw);
    margin:-12px auto -20px;
    padding:0 11% 12%;
  }
  .lobby-title-copy h1{
    font-size:clamp(1.75rem,8vw,2.55rem)!important;
    white-space:normal;
  }
  .lobby-title-copy p{font-size:.62rem!important;margin-top:3px!important}
  .lobby-character-stage{
    width:100%;
    min-height:260px;
    display:flex;
    justify-content:center;
    margin:-12px 0 -22px;
  }
  .lobby-paper-note{display:none}
  .lobby-sera-stage{min-height:260px;width:100%}
  .lobby-sera{width:min(255px,58vw)!important}
  .lobby-sera-light{width:270px;height:110px}
  .grape-one{right:20%;top:24%}.grape-two{left:22%;bottom:18%}
  .lobby-control-deck{width:100%}
  .lobby-rendered-start{
    width:min(470px,96vw);
    margin:-4px auto -14px;
    font-size:clamp(1.22rem,5.2vw,1.7rem)!important;
  }
  .lobby-rendered-menu{
    width:min(500px,96vw);
    grid-template-columns:repeat(2,1fr);
    gap:0 3px;
  }
  .lobby-rendered-small{font-size:.66rem!important}
  .lobby-final-footer{max-width:92vw;font-size:.54rem;gap:5px 10px}
  .lobby-final-tip{display:none!important}
}

/* Short landscape: keep the full lobby on one screen. */
@media(orientation:landscape) and (max-height:650px){
  .game-lobby-final{
    width:100vw!important;
    height:100svh!important;
    max-height:100svh!important;
    padding:7px 22px 6px!important;
    grid-template-rows:50px 145px minmax(118px,1fr) 132px 18px!important;
    gap:0!important;
  }
  .game-lobby-final .lobby-corner{width:76px!important;height:76px!important}
  .lobby-top{min-height:48px}
  .lobby-logo{width:155px!important}
  .lobby-logo-wrap span{font-size:.42rem}
  .lobby-top-button{height:30px;font-size:.58rem}
  .lobby-title-frame{width:min(650px,54vw);margin:-21px auto -33px;padding-bottom:11.5%}
  .lobby-title-copy h1{font-size:2.2rem!important}
  .lobby-title-copy p{font-size:.56rem!important;margin-top:2px!important}
  .lobby-character-stage{min-height:118px;width:min(900px,84vw);margin:-22px auto -34px}
  .lobby-sera-stage{min-height:130px}
  .lobby-sera{width:170px!important}
  .lobby-sera-light{width:200px;height:72px;bottom:22px}
  .lobby-paper-note{max-width:165px;padding:8px 10px}
  .lobby-paper-note strong{font-size:.67rem;margin-bottom:3px}
  .lobby-paper-note span{font-size:.54rem}
  .lobby-paper-note b{display:none}
  .lobby-rendered-start{width:380px;margin:-18px auto -31px;font-size:1.25rem!important}
  .lobby-rendered-menu{width:670px;gap:0}
  .lobby-rendered-small{font-size:.60rem!important}
  .lobby-final-footer{font-size:.47rem}
  .lobby-final-tip{display:none!important}
}


/* ==========================================================
   v1.4.35 · Exact approved lobby masters + real interaction
   Desktop = approved 16:9 artwork, Portrait = approved 9:16 artwork.
   Buttons remain real HTML controls with hover/focus/pressed states.
   ========================================================== */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
#startScreen.master-start-overlay{
  z-index:150!important;
  inset:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 48%,rgba(144,96,45,.12),transparent 36%),
    #030406!important;
  backdrop-filter:none!important;
}
#startScreen.master-start-overlay:not(.open){display:none!important}
.master-start-stage{
  position:relative;
  isolation:isolate;
  width:min(100vw,calc(100svh * 16 / 9));
  aspect-ratio:16/9;
  max-height:100svh;
  flex:0 0 auto;
  overflow:hidden;
  background-image:url('assets/start-master-desktop.webp?v=1.4.35');
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  box-shadow:0 0 70px rgba(0,0,0,.78);
}
.master-start-stage::after{
  content:"";
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(108deg,transparent 20%,rgba(255,237,192,.035) 39%,transparent 55%) -130% 0/45% 100% no-repeat;
  animation:masterLobbySweep 11s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes masterLobbySweep{0%,72%{background-position:-130% 0}100%{background-position:330% 0}}

.master-action{
  position:absolute;
  z-index:10;
  display:block;
  margin:0!important;
  padding:0!important;
  border:1px solid transparent!important;
  outline:0;
  appearance:none;
  color:transparent!important;
  background:rgba(255,255,255,.001)!important;
  cursor:pointer;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease,backdrop-filter .16s ease;
}
.master-action::before{
  content:"";
  position:absolute;
  inset:-20% -45%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,244,203,.26) 49%,transparent 63%);
  transform:translateX(-65%);
  transition:opacity .12s ease,transform .32s ease;
}
@media(hover:hover){
  .master-action:hover{
    border-color:rgba(255,222,146,.34)!important;
    background:rgba(255,203,102,.035)!important;
    box-shadow:0 0 0 1px rgba(84,46,13,.42),0 0 18px rgba(235,176,67,.24),inset 0 0 16px rgba(255,218,133,.11);
    backdrop-filter:brightness(1.10) saturate(1.05);
    transform:translateY(-1px);
  }
  .master-action:hover::before{opacity:1;transform:translateX(65%)}
  .master-start-button:hover{box-shadow:0 0 0 1px rgba(92,50,15,.52),0 0 34px rgba(239,176,62,.38),inset 0 0 26px rgba(255,231,166,.16)}
}
.master-action:focus-visible{
  border-color:#ffe0a0!important;
  box-shadow:0 0 0 3px rgba(11,13,17,.92),0 0 0 5px rgba(246,194,93,.82),0 0 28px rgba(246,194,93,.32)!important;
}
.master-action:active{
  transform:translateY(2px) scale(.992)!important;
  background:rgba(42,19,2,.13)!important;
  backdrop-filter:brightness(.91) saturate(.95);
  box-shadow:inset 0 4px 18px rgba(48,23,5,.34),0 0 10px rgba(222,155,51,.16)!important;
}

/* Exact clickable geometry of the approved 16:9 artwork. */
.master-profile{left:81.05%;top:4.25%;width:10.45%;height:8.3%;border-radius:12px}
.master-fullscreen{left:91.48%;top:4.2%;width:4.55%;height:8.45%;border-radius:50%}
.master-start-button{left:34.45%;top:69.1%;width:31.95%;height:12.35%;border-radius:24px}
.master-help{left:15.05%;top:81.85%;width:17.95%;height:9.05%;border-radius:13px}
.master-records{left:34.0%;top:81.85%;width:15.65%;height:9.05%;border-radius:13px}
.master-share{left:50.45%;top:81.85%;width:14.7%;height:9.05%;border-radius:13px}
.master-music{left:66.9%;top:81.85%;width:13.65%;height:9.05%;border-radius:13px}

.master-glint{
  position:absolute;z-index:7;pointer-events:none;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle,#fff8d8 0 12%,#ffd783 13% 24%,rgba(255,210,116,.28) 25% 42%,transparent 68%);
  filter:drop-shadow(0 0 5px rgba(255,220,137,.78));opacity:.28;
  animation:masterGlint 3.4s ease-in-out infinite;
}
.glint-a{left:49.8%;top:68.2%;animation-delay:-.4s}
.glint-b{left:8.9%;top:4.1%;animation-delay:-1.7s}
.glint-c{right:5.2%;bottom:7.4%;animation-delay:-2.4s}
@keyframes masterGlint{0%,70%,100%{opacity:.12;transform:scale(.7)}77%{opacity:.8;transform:scale(1.45)}84%{opacity:.2;transform:scale(.8)}}

.master-music-panel{
  position:absolute!important;z-index:30!important;
  right:18.7%;bottom:17.2%;
  width:min(320px,25%)!important;
  border:1px solid rgba(225,183,99,.45)!important;
  border-radius:10px!important;
  background:rgba(8,9,11,.96)!important;
  box-shadow:0 14px 30px rgba(0,0,0,.48),0 0 18px rgba(206,149,58,.12)!important;
}
.master-footer-mask{
  position:absolute;z-index:8;left:21%;right:21%;bottom:1.25%;height:4.8%;pointer-events:none;
  border-radius:6px;
  background:linear-gradient(90deg,rgba(7,8,10,.02),rgba(7,8,10,.94) 10%,rgba(7,8,10,.96) 90%,rgba(7,8,10,.02));
}
.master-footer{
  position:absolute;z-index:9;left:23%;right:23%;bottom:1.95%;height:3.2%;
  display:flex;align-items:center;justify-content:center;gap:18px;
  color:#d9bd83;font:600 clamp(.54rem,.72vw,.76rem)/1 Georgia,"Times New Roman",serif;
  text-shadow:0 2px 5px #000;
  pointer-events:none;
}
.master-footer a{color:#e2c68e!important;text-decoration:none;pointer-events:auto}
.master-footer a:hover{color:#fff0c6!important}

/* Exact approved 9:16 composition. The stage always keeps its aspect ratio,
   so no button or title can drift relative to the artwork. */
@media(orientation:portrait){
  #startScreen.master-start-overlay{
    background:
      radial-gradient(circle at 50% 45%,rgba(124,79,37,.14),transparent 34%),
      #020306!important;
  }
  .master-start-stage{
    width:min(100vw,calc(100svh * 9 / 16));
    aspect-ratio:9/16;
    max-height:100svh;
    background-image:url('assets/start-master-mobile.webp?v=1.4.35');
  }
  .master-profile{left:71.0%;top:5.35%;width:19.6%;height:4.75%;border-radius:12px}
  .master-start-button{left:10.0%;top:62.05%;width:80.0%;height:9.1%;border-radius:22px}
  .master-help{left:8.65%;top:72.25%;width:40.15%;height:6.75%;border-radius:12px}
  .master-records{left:51.15%;top:72.25%;width:40.15%;height:6.75%;border-radius:12px}
  .master-share{left:8.65%;top:80.15%;width:40.15%;height:6.75%;border-radius:12px}

  /* Portrait: rechte untere Menüfläche IMMER in Musik + Vollbild teilen.
     Nicht an eine Pixelbreite koppeln, weil einige mobile Browser eine
     größere CSS-Viewport-Breite melden und sonst der Vollbildknopf verschwindet. */
  .master-music{
    left:51.15%!important;
    top:80.15%!important;
    width:27.62%!important;
    height:6.75%!important;
    border-radius:12px!important;
    background-image:url('assets/start-btn-music-mobile-compact.webp?v=1.4.41')!important;
    background-size:100% 100%!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
  }
  .master-fullscreen{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    left:78.77%!important;
    top:80.15%!important;
    width:12.53%!important;
    height:6.75%!important;
    border-radius:12px!important;
    background-image:url('assets/start-btn-fullscreen-mobile.webp?v=1.4.41')!important;
    background-size:100% 100%!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
  }
  .master-music-panel{right:7%;bottom:19.2%;width:44%!important}
  .master-footer-mask{left:7%;right:7%;bottom:.7%;height:4.5%}
  .master-footer{left:8%;right:8%;bottom:1.25%;height:3.1%;gap:8px;font-size:clamp(.44rem,2.3vw,.68rem);justify-content:space-around}
  .glint-a{left:49.6%;top:61.4%}
  .glint-b{left:48.7%;top:1.0%}
  .glint-c{right:11.3%;bottom:8.2%}
}

@media(max-width:520px) and (orientation:portrait){
  .master-footer{font-size:.46rem;gap:5px}
}
@media(prefers-reduced-motion:reduce){
  .master-start-stage::after,.master-glint{animation:none!important}
  .master-action{transition:none!important}
}


/* ==========================================================
   v1.4.35 · echte sichtbare Button-Layer + Logo-Link
   Die Schalter selbst sind jetzt reale HTML-Controls mit ihrem
   Bildausschnitt aus dem freigegebenen Master. Kein toter Hotspot.
   ========================================================== */
.master-logo-link{
  position:absolute;
  z-index:12;
  left:41.0%;
  top:2.2%;
  width:18.2%;
  height:15.2%;
  border-radius:16px;
  outline:0;
  -webkit-tap-highlight-color:transparent;
}
.master-logo-link::after{
  content:"";
  position:absolute;
  inset:8% 6%;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  box-shadow:0 0 26px rgba(238,196,107,.30), inset 0 0 18px rgba(255,231,174,.08);
  transition:opacity .18s ease, transform .18s ease;
}
@media(hover:hover){
  .master-logo-link:hover::after{opacity:1;transform:scale(1.04)}
}
.master-logo-link:focus-visible{
  outline:2px solid rgba(255,222,151,.86);
  outline-offset:4px;
}

/* Visible button layer: each control carries the exact artwork crop. */
.master-action{
  border:0!important;
  background-color:transparent!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:100% 100%!important;
  color:transparent!important;
  overflow:visible!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  transform-origin:center;
  transition:transform .16s cubic-bezier(.2,.75,.25,1),filter .16s ease,box-shadow .16s ease!important;
}
.master-action::before{
  content:"";
  position:absolute;
  inset:4%;
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,246,216,.32) 47%,rgba(255,220,134,.14) 55%,transparent 70%);
  transform:translateX(-90%);
  transition:opacity .12s ease,transform .34s ease;
  mix-blend-mode:screen;
}
.master-action::after{
  content:"";
  position:absolute;
  inset:-2%;
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  box-shadow:0 8px 18px rgba(0,0,0,.42),0 0 20px rgba(231,176,73,.24),inset 0 0 12px rgba(255,226,155,.08);
  transition:opacity .14s ease;
}
@media(hover:hover){
  .master-action:hover{
    transform:translateY(-3px) scale(1.018)!important;
    filter:brightness(1.13) saturate(1.08) contrast(1.03);
  }
  .master-action:hover::before{opacity:.9;transform:translateX(85%)}
  .master-action:hover::after{opacity:1}
  .master-start-button:hover{
    transform:translateY(-4px) scale(1.022)!important;
    filter:brightness(1.16) saturate(1.10) contrast(1.03) drop-shadow(0 0 9px rgba(244,190,81,.35));
  }
}
.master-action:focus-visible{
  outline:2px solid rgba(255,226,159,.92)!important;
  outline-offset:4px!important;
  filter:brightness(1.12) saturate(1.07);
}
.master-action:active{
  transform:translateY(2px) scale(.982)!important;
  filter:brightness(.93) saturate(.96)!important;
}

.master-profile{background-image:url('assets/start-btn-profile-desktop.webp?v=1.4.35')!important}
.master-start-button{background-image:url('assets/start-btn-start-desktop.webp?v=1.4.35')!important}
.master-help{background-image:url('assets/start-btn-help-desktop.webp?v=1.4.35')!important}
.master-records{background-image:url('assets/start-btn-records-desktop.webp?v=1.4.35')!important}
.master-share{background-image:url('assets/start-btn-share-desktop.webp?v=1.4.35')!important}
.master-music{background-image:url('assets/start-btn-music-desktop.webp?v=1.4.35')!important}

/* Dynamic footer owns the version. It permanently covers the baked text. */
.master-footer-mask{
  background:linear-gradient(90deg,rgba(7,8,10,.08),rgba(7,8,10,.98) 8%,rgba(7,8,10,.98) 92%,rgba(7,8,10,.08))!important;
}

@media(orientation:portrait){
  .master-logo-link{left:26.0%;top:2.1%;width:48%;height:14.5%}
  .master-profile{background-image:url('assets/start-btn-profile-mobile.webp?v=1.4.35')!important}
  .master-start-button{background-image:url('assets/start-btn-start-mobile.webp?v=1.4.35')!important}
  .master-help{background-image:url('assets/start-btn-help-mobile.webp?v=1.4.35')!important}
  .master-records{background-image:url('assets/start-btn-records-mobile.webp?v=1.4.35')!important}
  .master-share{background-image:url('assets/start-btn-share-mobile.webp?v=1.4.35')!important}
  .master-music{background-image:url('assets/start-btn-music-mobile.webp?v=1.4.35')!important}
  .master-action:active{transform:translateY(2px) scale(.975)!important}
}
@media(prefers-reduced-motion:reduce){
  .master-action,.master-action::before,.master-action::after,.master-logo-link::after{transition:none!important}
}


/* v1.4.35 · Maus von oben: Gesicht statt nur Hut */
.mouse-peek.edge-top{top:-88px!important}
@media(max-width:800px){.mouse-peek.edge-top{top:-56px!important}}


/* ==========================================================
   v1.4.36 · Handy-Hochformat: Musik kompakt + Vollbild sichtbar
   Nur Portrait-Mobile. Tablet/Querformat und Gameplay-Layout bleiben unverändert.
   ========================================================== */
@media(max-width:800px) and (orientation:portrait){
  /* Gameplay-HUD: alle vier Controls passen sicher in den 2x2-Block. */
  .hud-actions{
    display:grid!important;
    grid-template-columns:repeat(2,30px)!important;
    grid-auto-rows:30px!important;
    gap:3px!important;
    width:63px!important;
    min-width:63px!important;
    max-width:63px!important;
    flex:0 0 63px!important;
  }
  .hud-actions .icon-btn,
  .hud-actions .music-control,
  .music-control>.icon-btn{
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    height:30px!important;
  }
  #fullscreenBtn{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
  }

}


/* ========================================================================
   v1.4.39 · ORCAL-ZWISCHENFALL
   Langsamer cineastischer Aufbau: Annäherung → Scan → Lock-on → Fang-Tether.
   ======================================================================== */
.orcal-event-layer{
  position:absolute;z-index:42;inset:0;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .9s ease,visibility 0s linear .9s;
}
.orcal-event-layer.show{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.orcal-cinematic-shade{
  position:absolute;z-index:0;inset:0;
  background:
    radial-gradient(circle at 20% 25%,rgba(112,20,17,.13),transparent 24%),
    linear-gradient(180deg,rgba(0,3,7,.18),rgba(0,3,8,.42) 48%,rgba(0,2,6,.60));
  opacity:0;transition:opacity 1.8s ease;backdrop-filter:saturate(.76) brightness(.83);
}
.orcal-event-layer.show .orcal-cinematic-shade{opacity:1}
.game-shell.orcal-event .rausch-wrap{opacity:.20;filter:saturate(.45) brightness(.75);transition:opacity 1s}
.game-shell.orcal-event .ellie{opacity:0!important;visibility:hidden!important;transition:opacity .35s ease!important}
.game-shell.orcal-event .weather-layer{filter:brightness(.72) saturate(.58)}
.game-shell.orcal-event .hud{box-shadow:0 8px 28px rgba(0,0,0,.44)}

.orcal-ellie-rescue{
  position:absolute;z-index:21;right:1.5%;bottom:-2%;height:min(86%,700px);width:auto;max-width:48%;
  object-fit:contain;opacity:0;pointer-events:none;transform:translate(24px,18px) scale(.94);
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.72)) drop-shadow(0 0 22px rgba(80,184,255,.28));
  transition:opacity .24s ease,transform .34s cubic-bezier(.18,.8,.2,1);
}
.orcal-ellie-rescue.show{opacity:1;transform:translate(0,0) scale(1)}
.orcal-event-layer.tethered .orcal-event-hud{
  opacity:1;border-color:rgba(103,190,255,.58);box-shadow:0 0 22px rgba(60,145,255,.24),0 10px 28px rgba(0,0,0,.42);
}
.orcal-event-layer.tethered .orcal-event-hud>span{color:#e8f7ff;text-shadow:0 0 12px rgba(84,188,255,.58)}
.orcal-resistance-wrap b{white-space:nowrap}

.orcal-drone{
  position:absolute;z-index:8;left:-16%;top:-9%;width:clamp(210px,25vw,340px);height:auto;
  transform:translate(-50%,-50%) scale(.72) rotate(10deg);opacity:0;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.78)) drop-shadow(0 0 18px rgba(210,34,28,.18));
  transition:left 4.8s cubic-bezier(.18,.72,.22,1),top 4.8s cubic-bezier(.18,.72,.22,1),
             transform 4.8s cubic-bezier(.18,.72,.22,1),opacity 2s ease,filter .5s ease;
  will-change:left,top,transform,opacity;
}
.orcal-event-layer.drone-in .orcal-drone{
  left:20%;top:25%;opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg);
  animation:orcalHover 2.7s ease-in-out 4.9s infinite alternate;
}
.orcal-event-layer.locked .orcal-drone{
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.82)) drop-shadow(0 0 22px rgba(255,43,29,.42));
}
.orcal-drone.recoil{animation:orcalRecoil .34s ease-out 1!important}
.orcal-event-layer.exit .orcal-drone{
  left:-18%;top:-18%;opacity:0;transform:translate(-50%,-50%) scale(.82) rotate(12deg);
  transition:left 2.2s ease-in,top 2.2s ease-in,transform 2.2s ease-in,opacity 1.7s ease;
}
@keyframes orcalHover{to{transform:translate(-50%,-52%) scale(1.015) rotate(1deg)}}
@keyframes orcalRecoil{40%{transform:translate(-55%,-47%) scale(.96) rotate(-7deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(-2deg)}}

.orcal-scan-beam{
  position:absolute;z-index:3;width:min(78vw,920px);height:min(48vw,560px);
  transform-origin:0 50%;transform:translateY(-50%) rotate(-28deg);opacity:0;
  clip-path:polygon(0 47%,100% 3%,100% 97%,0 53%);
  background:
    radial-gradient(ellipse at 0 50%,rgba(255,63,42,.42),rgba(255,42,25,.15) 29%,rgba(255,31,20,.035) 64%,transparent 78%),
    repeating-linear-gradient(90deg,transparent 0 24px,rgba(255,82,58,.055) 25px 26px);
  filter:blur(.2px) drop-shadow(0 0 12px rgba(255,40,20,.28));
  mix-blend-mode:screen;transition:opacity .65s ease;
}
.orcal-scan-beam.show{opacity:.78;animation:orcalScanSweep 2.8s ease-in-out infinite alternate}
@keyframes orcalScanSweep{
  from{transform:translateY(-50%) rotate(-34deg)}
  to{transform:translateY(-50%) rotate(38deg)}
}

.orcal-reticle{
  position:absolute;z-index:11;width:clamp(72px,8vw,112px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%) scale(1.45);opacity:0;
  border:2px solid rgba(255,70,52,.64);box-shadow:0 0 16px rgba(255,45,31,.42),inset 0 0 18px rgba(255,45,31,.20);
  transition:opacity .32s,transform .55s cubic-bezier(.2,.8,.2,1);
}
.orcal-reticle::before,.orcal-reticle::after{content:"";position:absolute;background:rgba(255,95,72,.82);box-shadow:0 0 8px #ff3729}
.orcal-reticle::before{left:50%;top:-11%;width:2px;height:122%;transform:translateX(-50%)}
.orcal-reticle::after{top:50%;left:-11%;height:2px;width:122%;transform:translateY(-50%)}
.orcal-reticle i{position:absolute;inset:24%;border:1px dashed rgba(255,120,96,.88);border-radius:50%;animation:orcalReticleSpin 2.3s linear infinite}
.orcal-reticle b{position:absolute;inset:43%;border-radius:50%;background:#ff3f2e;box-shadow:0 0 14px #ff3423}
.orcal-reticle.show{opacity:.72;transform:translate(-50%,-50%) scale(1)}
.orcal-reticle.locked{opacity:1;animation:orcalReticleLock .46s ease-in-out 2}
@keyframes orcalReticleSpin{to{transform:rotate(360deg)}}
@keyframes orcalReticleLock{50%{transform:translate(-50%,-50%) scale(.82);filter:brightness(1.8)}}

.orcal-tether-line{
  position:absolute;z-index:13;height:5px;border-radius:999px;transform-origin:0 50%;opacity:0;
  background:linear-gradient(180deg,#d8efff 0,#46a9ff 34%,#0b48ad 54%,#6ce1ff 78%,#eefcff 100%);
  box-shadow:0 0 8px rgba(91,190,255,.95),0 0 18px rgba(40,117,255,.78);
}
.orcal-tether-line::after{
  content:"";position:absolute;inset:-4px 0;background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(255,255,255,.78) 20px 22px,transparent 24px 38px);
  filter:blur(1px);animation:orcalTetherPulse .48s linear infinite;
}
.orcal-tether-line.show{opacity:.94}
.orcal-tether-line.breaking{animation:orcalCableBreak .58s ease-out forwards}
@keyframes orcalTetherPulse{to{transform:translateX(38px)}}
@keyframes orcalCableBreak{0%{opacity:1;filter:brightness(1)}35%{opacity:1;filter:brightness(2.8)}100%{opacity:0;filter:brightness(4)}}

.orcal-tether-head,.orcal-projectile,.orcal-break-impact{
  position:absolute;z-index:14;pointer-events:none;opacity:0;height:auto;will-change:transform,opacity;
}
.orcal-tether-head{width:clamp(92px,9vw,132px);transform:translate(-50%,-50%) scale(.46) rotate(-18deg)}
.orcal-tether-head.show{opacity:1}
.orcal-tether-head.fly{animation:orcalTetherFly .76s cubic-bezier(.18,.74,.22,1) forwards}
@keyframes orcalTetherFly{
  to{transform:translate(calc(-50% + var(--orcal-tether-x)),calc(-50% + var(--orcal-tether-y))) scale(.72) rotate(9deg);opacity:1}
}
.orcal-projectile{width:clamp(92px,8vw,128px);transform:translate(-50%,-50%) scale(.48);filter:drop-shadow(0 0 12px rgba(255,71,38,.8))}
.orcal-projectile.electric{filter:drop-shadow(0 0 14px rgba(89,174,255,.95))}
.orcal-projectile.show{opacity:1}
.orcal-projectile.fly{animation:orcalShotFly .82s cubic-bezier(.2,.72,.2,1) forwards}
@keyframes orcalShotFly{
  0%{transform:translate(-50%,-50%) scale(.42);opacity:0}
  18%{opacity:1}
  100%{transform:translate(calc(-50% + var(--orcal-shot-x)),calc(-50% + var(--orcal-shot-y))) scale(.80);opacity:0}
}
.orcal-break-impact{
  width:clamp(160px,16vw,250px);transform:translate(-50%,-50%) scale(.35);
  filter:drop-shadow(0 0 20px rgba(192,93,255,.95));
}
.orcal-break-impact.show{animation:orcalImpact .72s ease-out forwards}
@keyframes orcalImpact{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}

.orcal-event-hud{
  position:absolute;z-index:18;left:50%;top:5.5%;transform:translate(-50%,-10px);
  min-width:min(430px,78vw);padding:8px 14px;border:1px solid rgba(255,95,69,.25);border-radius:13px;
  background:linear-gradient(180deg,rgba(5,8,11,.80),rgba(12,5,7,.68));box-shadow:0 10px 28px rgba(0,0,0,.36);
  text-align:center;opacity:0;transition:opacity 1.2s ease,transform 1.2s ease;backdrop-filter:blur(8px);
}
.orcal-event-layer.show .orcal-event-hud{opacity:.88;transform:translate(-50%,0)}
.orcal-event-hud>span{font-size:clamp(.62rem,.7vw,.78rem);font-weight:950;letter-spacing:.16em;color:#ffb4a6;text-shadow:0 0 10px rgba(255,55,35,.28)}
.orcal-resistance-wrap{display:none;margin-top:7px;grid-template-columns:auto 1fr;align-items:center;gap:9px}
.orcal-resistance-wrap.show{display:grid}
.orcal-resistance-wrap b{font-size:.55rem;letter-spacing:.12em;color:#d9dde4}
.orcal-resistance-wrap em{height:8px;border:1px solid rgba(129,198,255,.38);border-radius:999px;overflow:hidden;background:rgba(1,6,13,.72)}
.orcal-resistance-wrap em i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2366d1,#63cfff,#efffff);box-shadow:0 0 10px rgba(83,189,255,.74);transition:width .12s linear}

.sera.orcal-scan{
  width:clamp(126px,13vw,182px);
  filter:drop-shadow(0 10px 13px rgba(0,0,0,.64)) drop-shadow(0 0 14px rgba(92,171,255,.16));
  animation:orcalSeraQuestion 1.9s ease-in-out infinite alternate!important;
}
@keyframes orcalSeraQuestion{
  from{transform:translate3d(-50%,-50%,0) rotate(-1.6deg) translateY(0)}
  to{transform:translate3d(-50%,-50%,0) rotate(1.2deg) translateY(-4px)}
}

.sera.orcal-bound{
  width:clamp(138px,14vw,190px);
  filter:drop-shadow(0 0 12px rgba(69,178,255,.82)) drop-shadow(0 0 28px rgba(35,88,255,.46)) drop-shadow(0 10px 12px rgba(0,0,0,.72));
  animation:orcalSeraStruggle .32s ease-in-out infinite alternate!important;
}
@keyframes orcalSeraStruggle{
  from{transform:translate3d(-50%,-50%,0) rotate(-2.3deg) scale(.99)}
  to{transform:translate3d(-50%,-50%,0) rotate(2.8deg) scale(1.025)}
}

@media(max-width:800px){
  .orcal-drone{width:clamp(158px,42vw,235px)}
  .orcal-event-layer.drone-in .orcal-drone{left:22%;top:19%}
  .orcal-scan-beam{width:110vw;height:72vw}
  .orcal-event-hud{top:4%;min-width:min(390px,86vw);padding:7px 10px}
  .sera.orcal-scan{width:clamp(116px,31vw,160px)}
  .sera.orcal-bound{width:clamp(122px,33vw,166px)}
  .orcal-ellie-rescue{height:min(64%,520px);max-width:58%;right:-2%;bottom:-1%}
  .orcal-tether-head{width:92px}
  .orcal-projectile{width:88px}
}
@media(orientation:landscape) and (max-height:560px){
  .orcal-event-layer.drone-in .orcal-drone{left:21%;top:27%;width:clamp(145px,20vw,215px)}
  .orcal-event-hud{top:3%;min-width:330px;padding:5px 10px}
  .orcal-event-hud>span{font-size:.58rem}
  .orcal-resistance-wrap{margin-top:4px}
  .sera.orcal-scan{width:clamp(96px,14vw,138px)}
  .sera.orcal-bound{width:clamp(100px,14vw,145px)}
  .orcal-ellie-rescue{height:min(82%,500px);max-width:42%;right:0;bottom:-5%}
}


/* ==========================================================
   v1.4.41 · Portrait Startscreen FINAL
   Der mobile Master enthält die sichtbaren Split-Buttons bereits.
   Diese HTML-Buttons sind deshalb nur noch transparente Hotspots.
   Verhindert beim Touch das Freilegen des alten breiten Musik-Bildes.
   ========================================================== */
@media(orientation:portrait){
  .master-music{
    left:51.15%!important;
    top:80.15%!important;
    width:27.62%!important;
    height:6.75%!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    background-image:none!important;
    background-color:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  .master-fullscreen{
    left:78.77%!important;
    top:80.15%!important;
    width:12.53%!important;
    height:6.75%!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    background-image:none!important;
    background-color:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  .master-music:active,
  .master-fullscreen:active{
    transform:none!important;
    filter:none!important;
    background:transparent!important;
    box-shadow:none!important;
  }
}


/* ==========================================================
   v1.4.42 · Handy-Vollbildschalter + Sera-Lebensbalken + Orcal-Tuning
   ========================================================== */
.sera-health-wrap{
  position:relative;z-index:15;width:min(440px,42vw);margin:8px 18px 0 auto;padding:7px 10px 8px;
  border:1px solid rgba(255,214,133,.26);border-radius:12px;
  background:linear-gradient(180deg,rgba(8,12,15,.74),rgba(5,7,10,.56));
  box-shadow:0 8px 22px rgba(0,0,0,.28);backdrop-filter:blur(6px);
}
.sera-health-label{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#f7ddb0;font-size:.76rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.sera-health-label b{color:#f4f7ff;letter-spacing:.03em}
.sera-health-bar{position:relative;height:10px;margin-top:6px;border-radius:999px;overflow:hidden;background:rgba(6,10,14,.95);border:1px solid rgba(120,175,255,.22)}
.sera-health-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#2db56e 0%,#7fdb7b 34%,#f0d56a 66%,#df6948 100%);box-shadow:0 0 12px rgba(122,216,153,.45);transition:width .18s linear,filter .18s linear}
.sera-health-wrap.low .sera-health-bar i{filter:saturate(1.2) brightness(1.08)}
.sera-health-wrap.critical .sera-health-bar i{filter:saturate(1.4) brightness(1.14);animation:seraHealthAlarm .52s ease-in-out infinite alternate}
@keyframes seraHealthAlarm{to{box-shadow:0 0 18px rgba(255,92,76,.55)}}
@media(max-width:800px){
  .sera-health-wrap{width:min(92vw,520px);margin:6px auto 0;padding:6px 9px}
  .sera-health-label{font-size:.66rem}
  .sera-health-bar{height:9px}
}

@media(orientation:portrait){
  .master-fullscreen{
    display:block!important;visibility:visible!important;opacity:1!important;z-index:36!important;
    left:71.0%!important;top:10.95%!important;width:19.6%!important;height:4.75%!important;border-radius:12px!important;
    background-image:url('assets/start-btn-fullscreen-mobile.webp?v=1.4.42')!important;
    background-size:100% 100%!important;background-repeat:no-repeat!important;background-position:center!important;
  }
  .master-music{background-image:url('assets/start-btn-music-mobile-compact.webp?v=1.4.42')!important;}
}
@media(max-width:1100px) and (orientation:portrait){
  .master-fullscreen{
    display:block!important;visibility:visible!important;opacity:1!important;z-index:36!important;
    left:71.0%!important;top:10.95%!important;width:19.6%!important;height:4.75%!important;border-radius:12px!important;
  }
}

.orcal-resistance-wrap{grid-template-columns:auto 1fr auto!important;gap:10px!important}
.orcal-resistance-wrap strong{font-size:.62rem;letter-spacing:.08em;color:#f1f7ff;min-width:42px;text-align:right}
.orcal-resistance-wrap b{font-size:.56rem!important}
.orcal-resistance-wrap em{height:10px!important}
.orcal-resistance-wrap em i{background:linear-gradient(90deg,#56d884,#d8eb86,#f3a35a,#dd5148)!important;box-shadow:0 0 12px rgba(96,210,255,.34)!important}
.orcal-event-layer.tethered .orcal-event-hud>span{color:#f4fbff!important}
.orcal-ellie-rescue{transition:opacity .38s ease,transform .62s cubic-bezier(.18,.8,.2,1)!important}
.orcal-projectile.electric{filter:drop-shadow(0 0 14px rgba(89,174,255,.95)) drop-shadow(0 0 28px rgba(162,224,255,.44))!important}
.sera.orcal-shocked{filter:drop-shadow(0 0 12px rgba(118,204,255,.94)) drop-shadow(0 0 26px rgba(86,137,255,.62)) drop-shadow(0 10px 12px rgba(0,0,0,.72));animation:orcalSeraShock .10s steps(2,end) infinite!important}
@keyframes orcalSeraShock{0%{transform:translate3d(-50%,-50%,0) rotate(-4deg) scale(.985)}50%{transform:translate3d(calc(-50% - 3px),calc(-50% + 1px),0) rotate(3deg) scale(1.015)}100%{transform:translate3d(calc(-50% + 3px),calc(-50% - 1px),0) rotate(-2deg) scale(.99)}}
.game-shell.orcal-shock-hit::after{
  content:'';position:absolute;inset:0;z-index:107;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(182,237,255,.26),rgba(83,152,255,.14) 28%,transparent 60%);
  animation:orcalShockFlash .42s ease-out forwards;
}
@keyframes orcalShockFlash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}

/* ==========================================================
   v1.4.43 · Portrait Startscreen Hotfix
   Musik bleibt Teil des mobilen Masterbilds und wird NICHT mehr
   als sichtbares Overlay erneut darübergelegt.
   Vollbild sitzt separat unter Profil.
   ========================================================== */
@media(orientation:portrait){
  .master-music{
    left:51.15%!important;
    top:80.15%!important;
    width:27.62%!important;
    height:6.75%!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    background-image:none!important;
    background-color:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    transform:none!important;
    filter:none!important;
  }
  .master-music:active,
  .master-music:hover,
  .master-music:focus{
    background-image:none!important;
    background-color:transparent!important;
    transform:none!important;
    filter:none!important;
    box-shadow:none!important;
  }
  .master-fullscreen{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:36!important;
    left:71.0%!important;
    top:10.95%!important;
    width:19.6%!important;
    height:4.75%!important;
    border-radius:12px!important;
    background-image:url('assets/start-btn-fullscreen-mobile.webp?v=1.4.50')!important;
    background-size:100% 100%!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
  }
}


/* ==========================================================
   v1.4.50 · ORCAL als spielbare Sequenz + sichtbare Sera-Gesundheit
   ========================================================== */
.sera-health-wrap{
  position:absolute!important;z-index:65!important;top:1.6%!important;right:1.35%!important;
  width:min(270px,31%)!important;margin:0!important;padding:8px 10px 9px!important;
  border:1px solid rgba(255,218,143,.48)!important;border-radius:11px!important;
  background:linear-gradient(180deg,rgba(7,11,15,.94),rgba(7,10,13,.84))!important;
  box-shadow:0 8px 24px rgba(0,0,0,.48),0 0 16px rgba(225,176,86,.11)!important;
  backdrop-filter:blur(5px);pointer-events:none;
}
.sera-health-label{font-size:clamp(.60rem,.76vw,.78rem)!important;color:#f6ddb0!important;text-shadow:0 2px 4px #000}
.sera-health-label b{font-size:clamp(.62rem,.82vw,.84rem)!important}
.sera-health-bar{height:11px!important;margin-top:6px!important;background:#180d0d!important;border-color:rgba(255,220,150,.32)!important}
.sera-health-bar i{background:linear-gradient(90deg,#48b875,#79d78d)!important;box-shadow:0 0 13px rgba(86,218,138,.46)!important}
.sera-health-wrap.low .sera-health-bar i{background:linear-gradient(90deg,#dbb348,#f0d36c)!important;box-shadow:0 0 13px rgba(239,191,79,.50)!important}
.sera-health-wrap.critical .sera-health-bar i{background:linear-gradient(90deg,#c84f43,#ef735f)!important;box-shadow:0 0 16px rgba(237,85,71,.66)!important}
@media(max-width:800px){
  .sera-health-wrap{top:1.1%!important;right:1.5%!important;width:46%!important;padding:6px 8px 7px!important}
  .sera-health-label{font-size:.55rem!important}.sera-health-label b{font-size:.62rem!important}.sera-health-bar{height:9px!important}
}

.orcal-event-layer .orcal-event-hud{top:8.2%!important;min-width:min(520px,88vw)!important;padding:10px 14px 11px!important}
.orcal-event-layer.tethered .orcal-event-hud{background:linear-gradient(180deg,rgba(3,8,13,.94),rgba(6,13,23,.91))!important}
.orcal-event-hud>span{display:block;font-size:clamp(.64rem,.82vw,.88rem)!important;line-height:1.35!important}
.orcal-resistance-wrap{margin-top:9px!important;grid-template-columns:72px 1fr 50px!important;gap:10px!important}
.orcal-resistance-wrap b{font-size:.62rem!important;text-align:right;color:#dcecff!important}
.orcal-resistance-wrap em{height:13px!important;border-color:rgba(123,203,255,.62)!important;background:rgba(1,5,10,.94)!important}
.orcal-resistance-wrap em i{width:100%;background:linear-gradient(90deg,#53b4ff,#d7f4ff)!important;transition:width .10s linear!important}
.orcal-resistance-wrap strong{font-size:.72rem!important;min-width:46px!important;color:#fff!important}
.orcal-goal-hint{display:none;margin-top:7px;color:#bfe9ff;font-size:clamp(.52rem,.64vw,.66rem);font-weight:800;letter-spacing:.08em}
.orcal-event-layer.tethered .orcal-goal-hint{display:block}

.orcal-shock-warning{
  position:absolute;z-index:16;width:clamp(72px,8vw,112px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%) scale(.65);opacity:0;visibility:hidden;pointer-events:none;
  border:2px solid rgba(139,220,255,.88);box-shadow:0 0 12px rgba(84,188,255,.78),inset 0 0 20px rgba(84,188,255,.20);
}
.orcal-shock-warning.show{opacity:1;visibility:visible;animation:orcalShockWarn .72s ease-in-out infinite alternate}
.orcal-shock-warning i{position:absolute;inset:13%;border:2px dashed rgba(188,239,255,.92);border-radius:50%;animation:orcalShockSpin 1s linear infinite}
.orcal-shock-warning b{position:absolute;inset:0;display:grid;place-items:center;color:#e8fbff;font-size:1.2rem;text-shadow:0 0 10px #7ad8ff}
@keyframes orcalShockWarn{to{transform:translate(-50%,-50%) scale(1.02);filter:brightness(1.45)}}
@keyframes orcalShockSpin{to{transform:rotate(360deg)}}
.orcal-projectile.electric{width:clamp(98px,9vw,145px)!important;animation-duration:1.02s!important}

.orcal-ellie-rescue{
  opacity:0!important;transform:translate(34px,20px) scale(.92)!important;
  transition:opacity .75s ease,transform 1s cubic-bezier(.15,.75,.16,1)!important;
}
.orcal-ellie-rescue.show{opacity:1!important;transform:translate(0,0) scale(1)!important}
.orcal-ellie-magic{
  position:absolute;z-index:20;height:18px;border-radius:999px;opacity:0;visibility:hidden;pointer-events:none;
  transform-origin:100% 50%;
  background:linear-gradient(90deg,rgba(255,255,255,.04),#7fdcff 20%,#c18cff 53%,#fff4ba 82%,#fff 100%);
  box-shadow:0 0 8px #fff,0 0 18px rgba(126,213,255,.95),0 0 34px rgba(190,112,255,.72);
  clip-path:polygon(0 42%,8% 20%,16% 60%,25% 30%,34% 68%,44% 24%,54% 64%,65% 31%,76% 72%,88% 28%,100% 44%,100% 58%,88% 48%,77% 83%,65% 48%,54% 78%,44% 42%,34% 80%,25% 49%,16% 75%,8% 48%,0 61%);
}
.orcal-ellie-magic.show{opacity:.96;visibility:visible;animation:orcalEllieMagicPulse .36s steps(2,end) infinite alternate}
@keyframes orcalEllieMagicPulse{to{filter:brightness(1.65);height:24px}}
.orcal-event-layer.ellie-present .orcal-event-hud{border-color:rgba(181,124,255,.58)!important;box-shadow:0 0 26px rgba(147,91,255,.22),0 10px 28px rgba(0,0,0,.48)!important}

.sera.orcal-scan{animation:orcalSeraQuestion 1.65s ease-in-out infinite alternate!important}
.sera.orcal-bound{animation:orcalSeraStruggle .38s ease-in-out infinite alternate!important}
.sera.orcal-shocked{animation:orcalSeraShock .09s steps(2,end) infinite!important}

@media(max-width:800px){
  .orcal-event-layer .orcal-event-hud{top:9.0%!important;min-width:94vw!important;padding:8px 9px 9px!important}
  .orcal-resistance-wrap{grid-template-columns:52px 1fr 40px!important;gap:6px!important}
  .orcal-resistance-wrap b{font-size:.52rem!important}.orcal-resistance-wrap strong{font-size:.60rem!important}.orcal-resistance-wrap em{height:11px!important}
  .orcal-goal-hint{font-size:.49rem!important}
  .orcal-ellie-rescue{height:min(70%,560px)!important;max-width:64%!important;right:-4%!important;bottom:-1%!important}
}


/* ==========================================================
   v1.4.50 · Gesundheit / magischer Respawn / ORCAL Feinschliff
   ========================================================== */
/* Gesundheit oben mittig – eigene Spur, weg vom Traubenrausch. */
.sera-health-wrap{
  top:.9%!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;
  width:min(310px,34%)!important;z-index:72!important;
}
@media(max-width:800px){
  .sera-health-wrap{top:.7%!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(66vw,300px)!important;}
}

/* Tod bleibt sichtbar: 0 %, dann langsame magische Materialisierung. */
.sera.sera-dead{opacity:0!important;filter:blur(9px) brightness(1.7) drop-shadow(0 0 26px rgba(134,200,255,.95))!important;transform:translate3d(-50%,-50%,0) scale(.52)!important;transition:opacity .58s ease,filter .58s ease,transform .58s ease!important;}
.sera.sera-respawning{opacity:1!important;filter:drop-shadow(0 0 10px rgba(255,234,170,.95)) drop-shadow(0 0 28px rgba(113,184,255,.82))!important;animation:seraSlowMaterialize 2.55s cubic-bezier(.18,.68,.2,1) both!important;}
@keyframes seraSlowMaterialize{
  0%{opacity:.04;transform:translate3d(-50%,-50%,0) scale(.48) rotate(-6deg);filter:blur(10px) brightness(2.1) drop-shadow(0 0 32px rgba(135,203,255,.96));}
  35%{opacity:.42;transform:translate3d(-50%,-50%,0) scale(.72) rotate(3deg);filter:blur(5px) brightness(1.75) drop-shadow(0 0 34px rgba(202,155,255,.90));}
  72%{opacity:.84;transform:translate3d(-50%,-50%,0) scale(.94) rotate(-1deg);filter:blur(1.5px) brightness(1.3) drop-shadow(0 0 26px rgba(255,222,142,.82));}
  100%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1) rotate(0);filter:drop-shadow(0 10px 12px rgba(0,0,0,.72));}
}
.sera-respawn-magic{position:absolute;z-index:71;width:clamp(145px,17vw,235px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.35);opacity:0;visibility:hidden;pointer-events:none;border-radius:50%;border:2px solid rgba(156,220,255,.78);box-shadow:0 0 24px rgba(109,188,255,.74),inset 0 0 34px rgba(176,110,255,.28);}
.sera-respawn-magic.show{visibility:visible;opacity:1;animation:seraRespawnRing 3.15s ease-out both;}
.sera-respawn-magic i{position:absolute;inset:13%;border-radius:50%;border:2px dashed rgba(255,225,149,.88);animation:seraRespawnSpin 2.7s linear infinite;}
.sera-respawn-magic b,.sera-respawn-magic em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;color:#eaf8ff;text-shadow:0 0 14px #7bc9ff,0 0 28px #a56cff;font-size:clamp(28px,4vw,58px);}
.sera-respawn-magic em{transform:rotate(45deg);opacity:.64;font-size:clamp(42px,6vw,82px);}
.sera-respawn-magic.materialize{box-shadow:0 0 36px rgba(109,188,255,.92),0 0 68px rgba(176,110,255,.45),inset 0 0 38px rgba(255,221,145,.26);}
@keyframes seraRespawnRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.28) rotate(-28deg)}20%{opacity:1}72%{opacity:.96;transform:translate(-50%,-50%) scale(1.08) rotate(14deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.28) rotate(24deg)}}
@keyframes seraRespawnSpin{to{transform:rotate(360deg)}}

/* Gefangen = konstantes leichtes Zittern statt steifem Bild. */
.sera.orcal-bound{animation:orcalSeraBoundTremble .16s ease-in-out infinite alternate!important;}
@keyframes orcalSeraBoundTremble{
  0%{transform:translate3d(calc(-50% - 2px),calc(-50% + 1px),0) rotate(-2.2deg) scale(.995)}
  100%{transform:translate3d(calc(-50% + 2px),calc(-50% - 1px),0) rotate(2.0deg) scale(1.012)}
}

/* Ellie bewusst kleiner und lebendig. */
.orcal-ellie-rescue{height:min(52%,410px)!important;max-width:34%!important;right:2%!important;bottom:2%!important;}
.orcal-ellie-rescue.show{animation:orcalEllieHover 1.55s ease-in-out infinite alternate!important;}
@keyframes orcalEllieHover{
  from{transform:translate(0,2px) scale(.96)}
  to{transform:translate(-7px,-5px) scale(.985)}
}
.orcal-event-layer.orcal-casting .orcal-ellie-rescue.show{animation:orcalEllieCastBody .48s ease-in-out infinite alternate!important;filter:drop-shadow(0 0 12px rgba(198,156,255,.92)) drop-shadow(0 0 28px rgba(111,203,255,.72));}
@keyframes orcalEllieCastBody{
  from{transform:translate(-5px,-4px) scale(.97);filter:drop-shadow(0 0 9px rgba(167,126,255,.72)) brightness(1.04)}
  to{transform:translate(-10px,-7px) scale(1.00);filter:drop-shadow(0 0 21px rgba(125,214,255,.98)) drop-shadow(0 0 34px rgba(194,115,255,.74)) brightness(1.20)}
}
.orcal-event-layer.orcal-casting .orcal-ellie-magic.show{height:24px!important;animation:orcalEllieMagicCast .24s steps(2,end) infinite alternate!important;}
@keyframes orcalEllieMagicCast{to{filter:brightness(1.95);height:31px;box-shadow:0 0 13px #fff,0 0 27px rgba(126,213,255,1),0 0 48px rgba(190,112,255,.88)}}
@media(max-width:800px){
  .orcal-ellie-rescue{height:min(46%,390px)!important;max-width:44%!important;right:1%!important;bottom:2%!important;}
}

/* v1.4.50 UI spacing: Gesundheit hat die obere Mitte exklusiv; Traubenrausch sitzt darunter rechts. */
.rausch-wrap{top:124px!important;}
@media(max-width:800px) and (orientation:portrait){
  .sera-health-wrap{width:min(56vw,235px)!important;}
  .rausch-wrap{top:154px!important;right:8px!important;width:min(39vw,160px)!important;}
}
@media(max-width:800px) and (orientation:landscape){
  .sera-health-wrap{width:min(42vw,245px)!important;}
  .rausch-wrap{top:84px!important;right:8px!important;width:min(24vw,190px)!important;}
}


/* ==========================================================
   v1.4.50 · ORCAL Dramaturgie / Warnung / Ellie-Bewegung
   ========================================================== */
.orcal-scan-beam.show{opacity:.82!important;animation:none!important}
.orcal-scan-beam.scan-pass-1,
.orcal-scan-beam.scan-pass-2,
.orcal-scan-beam.scan-pass-3{animation:orcalScanPass 2.38s cubic-bezier(.32,.03,.21,.98) both!important}
@keyframes orcalScanPass{
  0%{opacity:.10;transform:translateY(-50%) rotate(-38deg) scaleY(.88);filter:brightness(.72) blur(.3px)}
  12%{opacity:.86}
  48%{opacity:.98;filter:brightness(1.32) blur(0)}
  88%{opacity:.82}
  100%{opacity:.08;transform:translateY(-50%) rotate(42deg) scaleY(1.04);filter:brightness(.78) blur(.4px)}
}
.orcal-shock-warning{
  width:clamp(132px,14vw,205px)!important;
  border:4px solid rgba(255,72,46,.90)!important;
  box-shadow:0 0 12px rgba(255,40,24,.96),0 0 30px rgba(255,64,33,.70),0 0 54px rgba(82,188,255,.54),inset 0 0 28px rgba(105,211,255,.26)!important;
  background:radial-gradient(circle at 50% 50%,rgba(236,251,255,.18) 0 18%,transparent 20%),conic-gradient(from 12deg,transparent 0 7%,rgba(255,66,40,.38) 8% 11%,transparent 12% 24%,rgba(117,219,255,.34) 25% 30%,transparent 31% 100%);
}
.orcal-shock-warning.show{animation:orcalShockWarnAggressive .28s steps(2,end) infinite alternate!important}
.orcal-shock-warning::before,.orcal-shock-warning::after{
  content:"";position:absolute;inset:-16%;pointer-events:none;
  clip-path:polygon(49% 0,56% 31%,79% 7%,68% 40%,100% 34%,72% 53%,96% 72%,64% 64%,71% 100%,51% 70%,32% 96%,38% 62%,4% 75%,31% 51%,0 34%,36% 39%);
  border:3px solid rgba(163,231,255,.68);filter:drop-shadow(0 0 8px rgba(110,214,255,.88));animation:orcalWarningSpikes .42s steps(2,end) infinite alternate;
}
.orcal-shock-warning::after{inset:-28%;opacity:.58;transform:rotate(19deg)}
.orcal-shock-warning i{inset:8%!important;border:3px dashed rgba(232,249,255,.98)!important;box-shadow:0 0 12px rgba(104,211,255,.92),inset 0 0 16px rgba(255,53,33,.38)!important;animation:orcalShockSpin .42s linear infinite!important}
.orcal-shock-warning b{font-size:clamp(3.1rem,5.6vw,5.4rem)!important;color:#fff!important;text-shadow:0 0 5px #fff,0 0 16px #79dcff,0 0 30px #ff3f27,0 0 48px #ff2f1d!important;transform:rotate(-8deg) scaleX(1.10)}
@keyframes orcalShockWarnAggressive{from{transform:translate(-50%,-50%) scale(.80) rotate(-3deg);filter:brightness(.95)}to{transform:translate(-50%,-50%) scale(1.09) rotate(3deg);filter:brightness(1.78)}}
@keyframes orcalWarningSpikes{to{transform:rotate(12deg) scale(1.08);opacity:.9}}
.orcal-dodge-burst{position:absolute;z-index:18;width:clamp(100px,11vw,165px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.34);opacity:0;visibility:hidden;pointer-events:none}
.orcal-dodge-burst.show{visibility:visible;animation:orcalDodgeBurst .72s ease-out both}
.orcal-dodge-burst i,.orcal-dodge-burst b{position:absolute;inset:8%;border-radius:50%;border:3px solid rgba(135,228,255,.92);box-shadow:0 0 18px rgba(101,210,255,.92),0 0 34px rgba(191,123,255,.62)}
.orcal-dodge-burst b{inset:25%;border-style:dashed;animation:orcalShockSpin .5s linear infinite}
.orcal-dodge-burst em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:clamp(2rem,4vw,4rem);color:#fff7c7;text-shadow:0 0 10px #fff,0 0 26px #8edfff,0 0 42px #b968ff}
@keyframes orcalDodgeBurst{0%{opacity:.95;transform:translate(-50%,-50%) scale(.28) rotate(-18deg)}60%{opacity:.92;transform:translate(-50%,-50%) scale(1.08) rotate(12deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.42) rotate(24deg)}}
.orcal-ellie-rescue{--orcal-ellie-x:0px;--orcal-ellie-y:0px;--orcal-ellie-r:0deg}
.orcal-ellie-rescue.show{animation:none!important;transform:translate(var(--orcal-ellie-x),var(--orcal-ellie-y)) rotate(var(--orcal-ellie-r)) scale(.97)!important;transition:opacity .72s ease!important}
.orcal-event-layer.orcal-casting .orcal-ellie-rescue.show{animation:none!important;transform:translate(var(--orcal-ellie-x),var(--orcal-ellie-y)) rotate(var(--orcal-ellie-r)) scale(1)!important}
.sera.orcal-stagger{animation:orcalSeraStagger 1.82s cubic-bezier(.18,.72,.22,1) both!important;transform-origin:50% 55%!important}
@keyframes orcalSeraStagger{0%{transform:translate3d(-50%,-50%,0) rotate(-15deg) scale(.96)}16%{transform:translate3d(calc(-50% + 18px),calc(-50% - 8px),0) rotate(12deg) scale(1.03)}34%{transform:translate3d(calc(-50% - 14px),calc(-50% + 7px),0) rotate(-9deg) scale(.99)}52%{transform:translate3d(calc(-50% + 9px),calc(-50% - 4px),0) rotate(6deg) scale(1.01)}72%{transform:translate3d(calc(-50% - 5px),calc(-50% + 3px),0) rotate(-3deg) scale(1)}100%{transform:translate3d(-50%,-50%,0) rotate(0) scale(1)}}


/* ==========================================================
   v1.4.50 · ORCAL Zug / verzögerte Einschläge / Nachlauf
   ========================================================== */
/* Einschlag liegt sichtbar im Feld, bevor er detoniert. */
.orcal-dodge-burst.armed{
  visibility:visible!important;opacity:1!important;
  animation:orcalShockArmed .22s steps(2,end) infinite alternate!important;
  width:clamp(135px,15vw,220px)!important;
  transform:translate(-50%,-50%) scale(1)!important;
  background:radial-gradient(circle,rgba(235,252,255,.34) 0 13%,rgba(84,196,255,.18) 14% 34%,rgba(255,62,38,.16) 35% 52%,transparent 70%);
  filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 24px rgba(87,206,255,.95)) drop-shadow(0 0 42px rgba(255,63,38,.82));
}
.orcal-dodge-burst.armed i{inset:2%!important;border:5px solid rgba(255,77,48,.96)!important;box-shadow:0 0 18px #ff4a32,0 0 38px rgba(100,216,255,.9),inset 0 0 24px rgba(255,62,38,.34)!important}
.orcal-dodge-burst.armed b{inset:18%!important;border:4px dashed #e9fbff!important;box-shadow:0 0 18px rgba(115,221,255,.96)!important;animation:orcalShockSpin .32s linear infinite!important}
.orcal-dodge-burst.armed em{font-size:clamp(3.1rem,6vw,6rem)!important;color:white!important;text-shadow:0 0 8px #fff,0 0 22px #77dfff,0 0 42px #ff4b31!important}
.orcal-dodge-burst.explode{visibility:visible!important;animation:orcalShockExplosion .48s cubic-bezier(.12,.65,.18,1) both!important}
@keyframes orcalShockArmed{from{filter:brightness(.92) drop-shadow(0 0 14px #71dfff)}to{filter:brightness(1.75) drop-shadow(0 0 30px #ff4a31)}}
@keyframes orcalShockExplosion{0%{opacity:1;transform:translate(-50%,-50%) scale(.78)}32%{opacity:1;transform:translate(-50%,-50%) scale(1.5);filter:brightness(2.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.25);filter:brightness(1)}}

/* Nach dem Seilriss ist der Orcal-Jäger sichtbar angeschlagen. */
.orcal-drone.damaged{animation:orcalDroneDamaged .105s steps(2,end) infinite!important;filter:drop-shadow(0 0 16px rgba(120,220,255,.92)) drop-shadow(0 0 30px rgba(255,58,37,.66))!important}
@keyframes orcalDroneDamaged{0%{transform:translate(-50%,-50%) rotate(-5deg) translate(-5px,2px)}100%{transform:translate(-50%,-50%) rotate(4deg) translate(5px,-3px)}}
.orcal-scan-beam.post-break-scan{opacity:.92!important;animation:orcalPostBreakScan 1.48s cubic-bezier(.2,.04,.22,1) both!important;filter:brightness(1.45) drop-shadow(0 0 18px rgba(255,54,35,.58))!important}
@keyframes orcalPostBreakScan{0%{transform:translateY(-50%) rotate(34deg);opacity:.15}18%{opacity:.95}78%{opacity:.9}100%{transform:translateY(-50%) rotate(-32deg);opacity:.08}}

/* Sera trudelt nach dem Befreien deutlicher aus. */
.sera.orcal-stagger{animation:orcalSeraTumble 2.18s cubic-bezier(.16,.76,.18,1) both!important;transform-origin:50% 55%!important}
@keyframes orcalSeraTumble{
  0%{transform:translate3d(-50%,-50%,0) rotate(-24deg) scale(.93)}
  18%{transform:translate3d(calc(-50% + 24px),calc(-50% - 13px),0) rotate(31deg) scale(1.04)}
  37%{transform:translate3d(calc(-50% - 19px),calc(-50% + 10px),0) rotate(-22deg) scale(.98)}
  56%{transform:translate3d(calc(-50% + 14px),calc(-50% - 7px),0) rotate(14deg) scale(1.02)}
  75%{transform:translate3d(calc(-50% - 7px),calc(-50% + 4px),0) rotate(-7deg) scale(1)}
  100%{transform:translate3d(-50%,-50%,0) rotate(0) scale(1)}
}


/* 1.4.50 ORCAL: schnellere, bedrohlichere Energiegeschosse */
.orcal-projectile.electric{
  animation-duration:.34s!important;
  filter:drop-shadow(0 0 18px rgba(89,174,255,.98)) drop-shadow(0 0 34px rgba(162,224,255,.72)) drop-shadow(0 0 46px rgba(255,64,45,.28))!important;
}
.orcal-projectile.electric.fly{animation-timing-function:cubic-bezier(.08,.72,.10,1)!important}


/* ==========================================================
   v1.4.50 · kompakte Gesundheit / Fessel-HUD / Heilfunken
   ========================================================== */
.sera-health-wrap{
  top:.22%!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;
  width:min(170px,18vw)!important;padding:2px!important;border-radius:999px!important;
  background:rgba(5,9,11,.88)!important;border:1px solid rgba(255,218,143,.42)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.40)!important;
}
.sera-health-bar{position:relative!important;height:17px!important;margin:0!important;border-radius:999px!important;overflow:hidden!important}
.sera-health-bar i{position:absolute!important;inset:0 auto 0 0!important;z-index:1!important}
.sera-health-bar span{position:absolute;z-index:3;left:7px;top:50%;transform:translateY(-50%);font-size:.48rem;font-weight:900;letter-spacing:.035em;color:#fff;text-shadow:0 1px 3px #000;white-space:nowrap}
.sera-health-bar b{position:absolute;z-index:3;right:6px;top:50%;transform:translateY(-50%);font-size:.50rem;color:#fff;text-shadow:0 1px 3px #000}
.sera-health-label{display:none!important}

.orcal-event-layer .orcal-event-hud{top:4.25%!important;min-width:min(350px,66vw)!important;max-width:72vw!important;padding:6px 9px 7px!important;border-radius:9px!important}
.orcal-event-hud>span{font-size:clamp(.52rem,.66vw,.68rem)!important;line-height:1.2!important}
.orcal-resistance-wrap{margin-top:5px!important;grid-template-columns:44px 1fr 34px!important;gap:6px!important}
.orcal-resistance-wrap b{font-size:.49rem!important}
.orcal-resistance-wrap em{height:8px!important}
.orcal-resistance-wrap strong{font-size:.54rem!important;min-width:32px!important}
.orcal-goal-hint{margin-top:4px!important;font-size:.45rem!important}

.sera-heal-fx{position:absolute;z-index:95;left:50%;top:46%;width:112px;height:112px;transform:translate(-50%,-50%) scale(.42);opacity:0;pointer-events:none;border-radius:50%;border:3px solid rgba(97,255,150,.88);box-shadow:0 0 18px rgba(64,255,124,.92),0 0 46px rgba(65,224,116,.48),inset 0 0 24px rgba(92,255,147,.34)}
.sera-heal-fx i{position:absolute;inset:12%;border-radius:50%;border:2px dashed rgba(190,255,207,.95);animation:seraHealSpin .72s linear infinite}
.sera-heal-fx em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:42px;color:#caffd6;text-shadow:0 0 12px #5dff93,0 0 24px #24d967}
.sera-heal-fx b{position:absolute;left:50%;top:67%;transform:translate(-50%,-50%);font-size:18px;color:#e5ffeb;text-shadow:0 0 10px #3eff7f}
.sera-heal-fx.show{animation:seraHealBurst .86s ease-out both}
@keyframes seraHealBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.34) rotate(-18deg)}22%{opacity:1;transform:translate(-50%,-50%) scale(.86) rotate(0)}70%{opacity:.92;transform:translate(-50%,-50%) scale(1.06) rotate(10deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.28) rotate(18deg)}}
@keyframes seraHealSpin{to{transform:rotate(360deg)}}

@media(max-width:800px){
  .sera-health-wrap{top:.18%!important;width:150px!important}
  .sera-health-bar{height:16px!important}
  .sera-health-bar span{font-size:.44rem!important;left:6px!important}
  .sera-health-bar b{font-size:.46rem!important;right:5px!important}
  .orcal-event-layer .orcal-event-hud{top:4.6%!important;min-width:72vw!important;max-width:78vw!important;padding:5px 7px 6px!important}
  .orcal-resistance-wrap{grid-template-columns:38px 1fr 30px!important;gap:5px!important}
  .orcal-resistance-wrap b{font-size:.43rem!important}.orcal-resistance-wrap strong{font-size:.48rem!important}.orcal-resistance-wrap em{height:7px!important}
  .orcal-goal-hint{font-size:.40rem!important}
  .sera-heal-fx{width:92px;height:92px}.sera-heal-fx em{font-size:34px}.sera-heal-fx b{font-size:15px}
}


/* ==========================================================
   v1.4.50 · Gesundheit minimal größer / bessere Lesbarkeit
   ========================================================== */
.sera-health-wrap{
  width:min(185px,20vw)!important;
}
.sera-health-bar{
  height:18px!important;
}
.sera-health-bar span{
  font-size:.65rem!important; /* ca. +2 pt */
  left:8px!important;
}
.sera-health-bar b{
  font-size:.67rem!important; /* ca. +2 pt */
  right:7px!important;
}
@media(max-width:800px){
  .sera-health-wrap{width:165px!important}
  .sera-health-bar{height:17px!important}
  .sera-health-bar span{font-size:.61rem!important;left:7px!important}
  .sera-health-bar b{font-size:.63rem!important;right:6px!important}
}
@media(max-width:800px) and (orientation:portrait){
  .sera-health-wrap{width:min(60vw,250px)!important;}
}
@media(max-width:800px) and (orientation:landscape){
  .sera-health-wrap{width:min(46vw,258px)!important;}
}


/* 1.4.51 — zentrale 7R-Anmeldung */
.central-account-panel{
  display:flex;align-items:center;gap:16px;
  padding:18px;border:1px solid rgba(214,181,109,.34);
  border-radius:16px;background:rgba(10,12,17,.46);
}
.central-account-avatar{
  flex:0 0 62px;width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;font-weight:900;font-size:22px;
  color:#f0d28c;border:1px solid rgba(214,181,109,.62);
  background:radial-gradient(circle at 40% 35%,rgba(240,210,140,.18),rgba(0,0,0,.24));
  box-shadow:0 8px 24px rgba(0,0,0,.26);
}
.central-account-copy{display:grid;gap:5px;min-width:0}
.central-account-copy strong{font-size:18px;color:#f4e2b7;overflow-wrap:anywhere}
.central-account-copy span{color:#b9c1cd;line-height:1.4;overflow-wrap:anywhere}
.central-account-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.central-account-actions button{min-width:150px}


/* 1.4.52 — Making-of & Drachenfunken */
.master-footer-making{
  position:relative;
  z-index:12;
  pointer-events:auto!important;
  border:0;background:transparent;color:#f0d28c;font:inherit;font-weight:800;
  text-decoration:underline;text-decoration-color:rgba(240,210,140,.4);
  text-underline-offset:3px;cursor:pointer;padding:0 5px;
  touch-action:manipulation;
}
.master-footer-making:hover{color:#fff1c6}

.making-overlay{z-index:145!important}
.making-card{
  width:min(1080px,96vw)!important;
  max-height:94dvh!important;
  overflow:auto!important;
  text-align:left!important;
  padding:28px!important;
}
.making-hero{text-align:center;padding:0 5% 20px}
.making-logo{display:block;width:min(135px,32vw);height:auto;margin:0 auto 10px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.45))}
.making-hero h2{font-size:clamp(1.75rem,3.6vw,3rem)!important}
.making-lead{max-width:820px;margin:0 auto!important;font-size:1.03rem}
.making-story-card{
  position:relative;padding:22px 22px 19px;border:1px solid rgba(217,176,94,.34);
  border-radius:18px;background:linear-gradient(180deg,rgba(42,30,18,.58),rgba(12,13,17,.84));
  box-shadow:inset 0 1px rgba(255,233,180,.06),0 14px 34px rgba(0,0,0,.22);
}
.making-story-card h3,.making-trailer h3,.making-books h3{font-family:Georgia,"Times New Roman",serif;color:#f1d18c;margin:.1em 0 .55em;font-size:clamp(1.25rem,2.2vw,1.72rem)}
.making-story-card p,.making-books p{margin:.55em 0;color:#ded3c2;line-height:1.68}
.making-number{
  float:left;margin:-8px 12px 5px -8px;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;color:#2b1607;font-weight:1000;font-size:1.2rem;
  background:radial-gradient(circle at 38% 30%,#ffe7a0,#c7923e 60%,#6d431c);
  border:2px solid #efd284;box-shadow:0 0 0 3px rgba(38,20,8,.8),0 5px 16px rgba(0,0,0,.35)
}
.making-intro-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(210px,.65fr);gap:20px;align-items:center;margin:12px 0 20px}
.making-character{display:block;max-width:100%;max-height:470px;object-fit:contain;margin:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
.making-sera{max-height:400px}
.making-mouse{max-height:410px}
.making-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}
.making-video-block{margin:18px 0;text-align:left}
.making-local-video{display:block;width:min(760px,100%);margin:18px auto 0;border-radius:16px;border:1px solid rgba(236,197,116,.35);background:#000;box-shadow:0 15px 36px rgba(0,0,0,.38)}
.making-chaos-strip{
  display:grid;grid-template-columns:minmax(145px,.48fr) minmax(0,1.45fr) minmax(145px,.48fr);
  gap:15px;align-items:end;margin:20px 0
}
.making-chaos-strip>img{display:block;width:100%;max-height:430px;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(0,0,0,.42))}
.making-ai-card{align-self:stretch}
.making-trailer{margin:22px 0;padding:22px;border:1px solid rgba(217,176,94,.34);border-radius:18px;background:rgba(7,9,13,.7);text-align:center}
.making-iframe-wrap{position:relative;aspect-ratio:16/9;width:min(820px,100%);margin:15px auto;border-radius:16px;overflow:hidden;border:1px solid rgba(236,197,116,.35);background:#000}
.making-iframe-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.making-external{display:inline-flex!important;width:auto!important;text-decoration:none!important}
.making-books{
  display:grid;grid-template-columns:minmax(260px,430px) minmax(0,1fr);
  gap:24px;align-items:center;margin:22px 0;padding:24px;
  border:1px solid rgba(217,176,94,.45);border-radius:20px;
  background:radial-gradient(circle at 12% 20%,rgba(150,91,32,.22),transparent 38%),rgba(10,11,15,.82)
}
.making-book-covers{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.making-book-cover{display:block;text-decoration:none!important;color:#f1d18c;text-align:center}
.making-book-cover img{display:block;width:100%;border-radius:12px;box-shadow:0 18px 38px rgba(0,0,0,.5);border:1px solid rgba(240,207,137,.35)}
.making-book-cover span{display:block;margin-top:9px;font-weight:800;font-size:.82rem;line-height:1.25;color:#f1d18c}
.making-buy{display:inline-flex!important;width:auto!important;margin:6px 6px 6px 0;text-decoration:none!important}
.making-band2{display:grid;gap:7px;margin-top:18px;padding:17px;border-left:3px solid #d8a751;background:rgba(255,211,127,.06);border-radius:4px 12px 12px 4px}
.making-band2 strong{color:#f4d797;font-family:Georgia,"Times New Roman",serif;font-size:1.25rem}
.making-band2 span{color:#d9cfbf}
.making-signoff{text-align:center!important;color:#f2d79f!important;font-family:Georgia,"Times New Roman",serif;font-size:1.1rem;margin:26px auto 8px!important;max-width:820px}
.making-open-btn{border-color:rgba(226,184,98,.48)!important}

@media(max-width:760px){
  .making-card{padding:18px 12px!important}
  .making-intro-grid,.making-two,.making-books{grid-template-columns:1fr}
  .making-chaos-strip{grid-template-columns:1fr 1fr}
  .making-chaos-strip .making-ai-card{grid-column:1/-1;grid-row:1}
  .making-chaos-strip>img{max-height:300px}
  .making-character{max-height:330px}
  .making-book-covers{width:min(520px,92vw);margin:auto}
  .making-book-cover{width:auto;margin:0}
  .making-story-card{padding:18px 15px}
  .master-footer-making{font-size:.72rem}
}


/* ==========================================================
   1.4.54 · UI HOTFIX
   1) Making-of muss über dem Startscreen liegen.
   2) Portrait-Vollbild-Hotspot muss exakt auf dem sichtbaren
      Vollbild-Button neben Musik liegen.
   Keine Gameplay-Änderungen.
   ========================================================== */
#makingScreen.making-overlay{
  z-index:220!important;
}

@media(orientation:portrait){
  #startFullscreenBtn.master-fullscreen{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:36!important;
    left:78.77%!important;
    top:80.15%!important;
    width:12.53%!important;
    height:6.75%!important;
    border-radius:12px!important;
    background-image:none!important;
    background-color:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    pointer-events:auto!important;
    touch-action:manipulation;
  }
}


/* ==========================================================
   1.4.56 MI-13 · OPERATION DRACHENFANG
   Testevent, noch nicht als Live-Fassung gedacht.
   ========================================================== */
.game-shell.mi13-event{
  --scene:url("assets/incidents/mi13-platform-ch17.webp?v=1.4.56")!important;
  box-shadow:0 20px 105px rgba(15,30,40,.62),0 0 58px rgba(70,145,180,.13);
}
.game-shell.mi13-event .scene-shade{background:linear-gradient(180deg,rgba(3,8,12,.10),rgba(4,7,10,.22) 55%,rgba(0,2,4,.34))}
.game-shell.mi13-event .weather-layer{opacity:.55;background:radial-gradient(circle at 12% 18%,rgba(225,236,245,.16),transparent 28%),linear-gradient(110deg,transparent 0 65%,rgba(122,193,225,.05) 82%,transparent 100%)}
.game-shell.mi13-event #ellie{opacity:0!important}
.game-shell.mi13-event .sera-health-wrap{z-index:97!important}
@media (orientation:portrait) and (max-width:800px){.game-shell.mi13-event{background-position:61% center!important}}

.mi13-event-layer{position:absolute;z-index:24;inset:0;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .28s ease}
.mi13-event-layer.show{opacity:1;visibility:visible}
.mi13-event-shade{position:absolute;z-index:0;inset:0;background:radial-gradient(circle at 55% 38%,transparent 0 38%,rgba(0,0,0,.18) 76%,rgba(0,0,0,.34));pointer-events:none}
.mi13-event-hud{position:absolute;z-index:48;top:1.2%;left:1.2%;display:grid;grid-template-columns:auto auto auto;align-items:baseline;gap:7px 9px;max-width:min(610px,72%);padding:9px 12px;border:1px solid rgba(208,183,126,.38);border-radius:13px;background:linear-gradient(135deg,rgba(8,12,16,.92),rgba(24,31,36,.83));box-shadow:0 9px 24px rgba(0,0,0,.36),0 0 18px rgba(91,159,186,.12);backdrop-filter:blur(7px)}
.mi13-event-hud span{font-size:.74rem;letter-spacing:.105em;font-weight:950;color:#efd79f;text-transform:uppercase}
.mi13-event-hud strong{font-size:1.4rem;line-height:1;color:#fff2c9}
.mi13-event-hud b{font-size:.57rem;letter-spacing:.1em;color:#b9c5ca}
.mi13-event-hud small{grid-column:1/-1;color:#d9e1e4;font-size:.62rem;letter-spacing:.09em;font-weight:850;text-transform:uppercase}
.mi13-title-card{position:absolute;z-index:49;left:50%;top:18%;transform:translate(-50%,-16px) scale(.96);display:grid;place-items:center;gap:2px;min-width:min(580px,82vw);padding:15px 24px;border:1px solid rgba(225,191,112,.48);border-radius:16px;background:linear-gradient(180deg,rgba(6,9,12,.94),rgba(19,24,27,.90));box-shadow:0 18px 50px rgba(0,0,0,.48);opacity:0;transition:.28s}
.mi13-title-card.show{opacity:1;transform:translate(-50%,0) scale(1)}
.mi13-title-card span{font-size:.72rem;letter-spacing:.34em;color:#b9c8cd;font-weight:900}
.mi13-title-card strong{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.5rem,3.2vw,2.8rem);letter-spacing:.045em;color:#f0cf83;text-shadow:0 3px 14px rgba(0,0,0,.8)}
.mi13-title-card b{font-size:.64rem;letter-spacing:.2em;color:#e5e9ea}
.mi13-objects{position:absolute;z-index:22;inset:0}
.mi13-obstacle{position:absolute;left:50%;top:-50%;height:auto;transform:translate(-50%,-50%);transform-origin:50% 18%;filter:drop-shadow(0 12px 13px rgba(0,0,0,.55));will-change:left,top,transform,opacity;user-select:none;pointer-events:none}
.mi13-obstacle.agent-ladder{width:clamp(118px,15vw,190px)}
.mi13-obstacle.rope-agent{width:clamp(105px,13vw,170px)}
.mi13-obstacle.rope-ladder{width:clamp(70px,8.2vw,112px)}
.mi13-obstacle.falling-agent{width:clamp(100px,12vw,155px);z-index:27}
.mi13-obstacle.mi13-hit{animation:mi13Hit .26s ease}
.mi13-obstacle.mi13-blasted{filter:drop-shadow(0 0 20px rgba(242,206,99,.85)) drop-shadow(0 0 42px rgba(97,201,255,.60));opacity:.96}
@keyframes mi13Hit{0%,100%{filter:drop-shadow(0 12px 13px rgba(0,0,0,.55))}45%{filter:drop-shadow(0 0 18px rgba(255,87,56,.95)) brightness(1.3)}}
.mi13-ellie-rescue{position:absolute;z-index:35;width:clamp(150px,19vw,270px);height:auto;left:70%;top:62%;transform:translate(-50%,-50%) scale(.88);opacity:0;filter:drop-shadow(0 10px 16px rgba(0,0,0,.58));transition:opacity .34s ease,filter .3s ease;pointer-events:none}
.mi13-ellie-rescue.show{opacity:1}
.mi13-ellie-rescue.charging{filter:drop-shadow(0 0 18px rgba(234,207,95,.72)) drop-shadow(0 0 40px rgba(98,180,255,.48)) drop-shadow(0 10px 16px rgba(0,0,0,.58));animation:mi13ElliePulse .72s ease-in-out infinite alternate}
@keyframes mi13ElliePulse{to{transform:translate(-50%,-50%) scale(.91)}}
.mi13-magic-core{position:absolute;z-index:36;left:70%;top:55%;width:82px;height:82px;transform:translate(-50%,-50%) scale(.3);opacity:0;border:2px solid rgba(244,213,111,.65);border-radius:50%;box-shadow:0 0 18px rgba(245,211,97,.64),inset 0 0 25px rgba(78,181,255,.34);transition:.3s;pointer-events:none}
.mi13-magic-core.show{opacity:1;transform:translate(-50%,-50%) scale(1);animation:mi13CoreSpin 1.5s linear infinite}
.mi13-magic-core i{position:absolute;inset:12px;border:1px dashed rgba(126,207,255,.78);border-radius:50%}
.mi13-magic-core b,.mi13-magic-core em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;color:#ffe59a;text-shadow:0 0 14px #9bdcff;font-size:30px}
.mi13-magic-core em{transform:rotate(45deg);font-size:20px;color:#a9ddff}
@keyframes mi13CoreSpin{to{rotate:360deg}}
.mi13-magic-flash{position:absolute;z-index:34;inset:0;opacity:0;pointer-events:none;background:radial-gradient(circle at 64% 52%,rgba(255,239,168,.72),rgba(110,207,255,.25) 20%,rgba(81,152,255,.08) 38%,transparent 66%)}
.mi13-magic-flash.show{animation:mi13Flash .56s ease-out}
@keyframes mi13Flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.mi13-impact-ring{position:absolute;z-index:29;width:90px;height:90px;border-radius:50%;border:2px solid rgba(255,224,128,.78);box-shadow:0 0 24px rgba(255,210,92,.78),inset 0 0 22px rgba(93,190,255,.4);transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none}
.mi13-impact-ring.show{animation:mi13Impact .62s ease-out forwards}
@keyframes mi13Impact{15%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(2.3)}}
.mi13-splat-mark{position:absolute;z-index:25;left:50%;bottom:3%;font-size:clamp(20px,3vw,38px);font-weight:1000;color:#e7cf91;text-shadow:0 2px 5px #000;opacity:0;transform:translateX(-50%) scale(.7);pointer-events:none}
.mi13-splat-mark.show{animation:mi13Splat .9s ease-out forwards}
@keyframes mi13Splat{15%{opacity:1;transform:translateX(-50%) scale(1.12)}100%{opacity:0;transform:translateX(-50%) scale(.95)}}
@media(max-width:800px){
 .mi13-event-hud{top:.6%;left:.8%;max-width:70%;padding:7px 9px;gap:5px 7px}.mi13-event-hud span{font-size:.57rem}.mi13-event-hud strong{font-size:1.08rem}.mi13-event-hud small{font-size:.5rem}
 .mi13-obstacle.agent-ladder{width:clamp(95px,24vw,145px)}.mi13-obstacle.rope-agent{width:clamp(86px,21vw,132px)}.mi13-obstacle.rope-ladder{width:clamp(58px,13vw,90px)}
 .mi13-ellie-rescue{width:clamp(130px,34vw,205px)}
 .mi13-title-card{top:14%;padding:12px 14px}.mi13-title-card strong{font-size:clamp(1.25rem,7vw,2.1rem)}
}

/* ==========================================================
   1.4.57 MI-13 CINEMATIC TEST · Operation Drachenfang
   ========================================================== */
.game-shell.mi13-event{
  --scene:url("assets/incidents/mi13-bg-ch17.webp?v=1.4.58")!important;
  background-position:center center!important;
}
.game-shell.mi13-event .scene-shade{background:linear-gradient(180deg,rgba(2,5,8,.07),rgba(3,6,9,.18) 56%,rgba(0,1,3,.30))}
.game-shell.mi13-event #ellie{opacity:0!important}
.mi13-event-layer{z-index:24!important}
.mi13-objects{z-index:22!important}

.mi13-long-ladder{
  position:absolute;z-index:20;top:2.3%;height:91%;width:auto;max-width:none;
  transform:translateX(-50%) scaleY(.02);transform-origin:50% 0%;
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.72));pointer-events:none;will-change:transform;
}
.mi13-climber{
  position:absolute;z-index:23;width:clamp(92px,9vw,145px);height:auto;
  transform:translate(-50%,-50%);filter:drop-shadow(0 9px 10px rgba(0,0,0,.62));pointer-events:none;
}
.mi13-ground-agent{
  position:absolute;z-index:25;width:clamp(90px,8.4vw,136px);height:auto;
  transform:translate(-50%,-100%);transform-origin:50% 100%;
  filter:drop-shadow(0 9px 11px rgba(0,0,0,.62));pointer-events:none;will-change:left,top,transform;
}
.mi13-shot{position:absolute;z-index:33;pointer-events:none;will-change:left,top,transform}
.mi13-grape-shot{width:29px;height:29px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.62)) drop-shadow(0 0 8px rgba(166,64,237,.45))}
.mi13-grape-shot i{position:absolute;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#f4b3ff 0 9%,#9d2fe8 34%,#4b0d71 100%);box-shadow:inset -2px -2px 4px rgba(0,0,0,.28)}
.mi13-grape-shot i:nth-child(1){left:8px;top:0}.mi13-grape-shot i:nth-child(2){left:1px;top:9px}.mi13-grape-shot i:nth-child(3){left:14px;top:9px}.mi13-grape-shot i:nth-child(4){left:8px;top:18px}
.mi13-grape-shot.reflected{filter:drop-shadow(0 0 8px #ffe07a) drop-shadow(0 0 14px #9d5cff);transform-origin:center}
.mi13-net-shot{width:clamp(58px,5.6vw,88px);height:auto;filter:drop-shadow(0 5px 7px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(220,170,72,.32))}
.mi13-net-caught{position:absolute;z-index:38;width:clamp(92px,10vw,146px);height:auto;transform:translate(-50%,-50%) scale(.82);opacity:.88;filter:drop-shadow(0 0 12px rgba(229,175,70,.56));animation:mi13NetPulse .32s ease-in-out infinite alternate;pointer-events:none}
@keyframes mi13NetPulse{from{transform:translate(-50%,-50%) scale(.78) rotate(-4deg)}to{transform:translate(-50%,-50%) scale(.86) rotate(4deg)}}

.mi13-ellie-rescue{
  z-index:36!important;width:clamp(165px,18vw,285px)!important;max-height:76%;object-fit:contain;
  transform:translate(-50%,-50%) scale(.94)!important;transition:opacity .22s ease,filter .2s ease!important;
}
.mi13-ellie-rescue[data-stage="2"]{filter:drop-shadow(0 0 13px rgba(125,46,168,.35)) drop-shadow(0 10px 16px rgba(0,0,0,.58))}
.mi13-ellie-rescue[data-stage="3"]{filter:drop-shadow(0 0 18px rgba(183,54,228,.55)) drop-shadow(0 0 28px rgba(255,173,53,.25)) drop-shadow(0 10px 16px rgba(0,0,0,.58))}
.mi13-ellie-rescue[data-stage="4"]{width:clamp(200px,23vw,350px)!important;filter:drop-shadow(0 0 24px rgba(221,73,255,.72)) drop-shadow(0 0 44px rgba(255,167,46,.48))}
.mi13-patience{grid-column:1/-1;display:none;grid-template-columns:auto minmax(110px,1fr) auto;gap:8px;align-items:center;margin-top:2px}
.mi13-patience.show{display:grid}
.mi13-patience b{font-size:.56rem!important;letter-spacing:.10em;color:#f2cfcf!important}
.mi13-patience em{display:block;height:7px;border:1px solid rgba(241,205,128,.34);border-radius:999px;background:rgba(0,0,0,.48);overflow:hidden}
.mi13-patience i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7f3ab5,#e45ad4 62%,#ffb447);box-shadow:0 0 12px rgba(222,84,239,.56);transition:width .22s ease}
.mi13-patience strong{font-size:.66rem!important;color:#ffe0d6!important}
.mi13-magic-flash.mega{background:radial-gradient(circle at 50% 57%,rgba(255,255,255,.98),rgba(255,211,100,.78) 13%,rgba(210,80,255,.62) 28%,rgba(103,34,168,.35) 45%,transparent 74%)!important;animation:mi13MegaFlash .7s ease-out!important}
@keyframes mi13MegaFlash{0%{opacity:0}15%{opacity:1}55%{opacity:.88}100%{opacity:0}}
.game-shell.mi13-entry-bang{animation:mi13EntryShake .40s ease}
.game-shell.mi13-mega-hit{animation:mi13MegaShake .48s ease}
.game-shell.mi13-ellie-hit .mi13-ellie-rescue{filter:drop-shadow(0 0 15px rgba(183,32,186,.8)) brightness(1.14)}
@keyframes mi13EntryShake{0%,100%{transform:none}25%{transform:translate3d(-5px,2px,0)}50%{transform:translate3d(6px,-3px,0)}75%{transform:translate3d(-3px,2px,0)}}
@keyframes mi13MegaShake{0%,100%{transform:none}15%{transform:translate3d(-9px,5px,0)}30%{transform:translate3d(10px,-6px,0)}46%{transform:translate3d(-8px,-3px,0)}62%{transform:translate3d(7px,4px,0)}78%{transform:translate3d(-4px,2px,0)}}
.mi13-smoke{position:absolute;z-index:47;inset:-8%;opacity:0;visibility:hidden;pointer-events:none;background:rgba(9,10,11,.0);transition:opacity .35s ease,visibility .35s}
.mi13-smoke.show{opacity:1;visibility:visible;background:rgba(10,11,12,.36)}
.mi13-smoke i{position:absolute;width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(185,188,188,.82) 0 18%,rgba(91,96,98,.65) 38%,rgba(35,39,42,.48) 58%,transparent 76%);filter:blur(18px);animation:mi13SmokeRoll 2.6s ease-in-out infinite alternate}
.mi13-smoke i:nth-child(1){left:-5%;top:18%}.mi13-smoke i:nth-child(2){left:24%;top:4%;animation-delay:-.8s}.mi13-smoke i:nth-child(3){right:-4%;top:20%;animation-delay:-1.6s}.mi13-smoke i:nth-child(4){left:15%;bottom:-4%;animation-delay:-.4s}.mi13-smoke i:nth-child(5){right:13%;bottom:-7%;animation-delay:-1.1s}
.mi13-smoke.clearing{opacity:.24;transition:opacity 1.3s ease}
@keyframes mi13SmokeRoll{from{transform:scale(.92) translate3d(-2%,1%,0)}to{transform:scale(1.12) translate3d(3%,-2%,0)}}
.mi13-final-shot{position:absolute;z-index:50;left:50%;bottom:1.5%;width:min(720px,58vw);max-height:84%;object-fit:contain;transform:translate(-50%,20px) scale(.94);opacity:0;visibility:hidden;filter:drop-shadow(0 18px 26px rgba(0,0,0,.72));transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.mi13-final-shot.show{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.sera.mi13-reflect{filter:drop-shadow(0 0 16px rgba(178,88,255,.8)) drop-shadow(0 8px 10px rgba(0,0,0,.52));animation:mi13SeraPop .24s ease}
@keyframes mi13SeraPop{50%{transform:translate3d(-50%,-50%,0) scale(1.12) rotate(-5deg)}}

@media (orientation:portrait) and (max-width:800px){
  .game-shell.mi13-event{background-position:61% center!important}
  .mi13-long-ladder{height:88%;top:3%}
  .mi13-climber{width:clamp(72px,19vw,105px)}
  .mi13-ground-agent{width:clamp(70px,17vw,100px)}
  .mi13-net-shot{width:clamp(50px,13vw,72px)}
  .mi13-ellie-rescue{width:clamp(135px,34vw,205px)!important}
  .mi13-ellie-rescue[data-stage="4"]{width:clamp(165px,42vw,245px)!important}
  .mi13-final-shot{width:min(94vw,560px);max-height:74%}
  .mi13-patience{grid-template-columns:auto minmax(74px,1fr) auto;gap:5px}
}


/* ==========================================================
   1.4.58 · MI-13 Korrekturrunde 1
   Randformation, dauernd schwingende Leitern, Netz-Fade,
   2 Sekunden Ruhe nach Ellies Landung, Tumult + Magic Storm.
   ========================================================== */
.mi13-long-ladder{transform-origin:50% 0%!important}
.mi13-net-shot{width:clamp(42px,4.4vw,64px)!important;opacity:.84!important}
.mi13-net-shot.caught-fade{
  z-index:39!important;animation:mi13NetCatchFade .70s cubic-bezier(.18,.8,.3,1) forwards!important;
  filter:drop-shadow(0 0 10px rgba(229,175,70,.42))!important;
}
@keyframes mi13NetCatchFade{
  0%{opacity:.72;transform:translate(-50%,-50%) scale(.62) rotate(0deg)}
  45%{opacity:.42;transform:translate(-50%,-50%) scale(.43) rotate(12deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(28deg)}
}
.mi13-net-caught{display:none!important}

.mi13-ellie-rescue[data-stage="landing"]{width:clamp(190px,22vw,340px)!important;filter:drop-shadow(0 16px 20px rgba(0,0,0,.68))!important}
.mi13-ellie-rescue.landing{animation:mi13HeroLanding .76s cubic-bezier(.14,.82,.24,1) both}
@keyframes mi13HeroLanding{
  0%{opacity:0;transform:translate(-50%,-115%) scale(.72) rotate(-7deg)}
  64%{opacity:1;transform:translate(-50%,-47%) scale(1.08) rotate(2deg)}
  82%{transform:translate(-50%,-52%) scale(.97) rotate(-1deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(.94) rotate(0deg)}
}

.mi13-juice-splash{
  position:absolute;z-index:46;transform:translate(-50%,-50%) rotate(-7deg);pointer-events:none;
  font-weight:1000;font-size:clamp(18px,2.4vw,34px);letter-spacing:.03em;color:#f6c6ff;
  text-shadow:0 2px 0 #531261,0 0 10px #9b2bd0,0 0 18px rgba(255,97,216,.8);
  animation:mi13JuicePop .76s ease-out forwards;
}
.mi13-juice-splash::before,.mi13-juice-splash::after{content:'●  •  ●';position:absolute;left:50%;top:50%;color:#9c28c7;font-size:.7em;letter-spacing:.36em;opacity:.9}
.mi13-juice-splash::before{transform:translate(-50%,-50%) rotate(25deg) scale(1.5)}
.mi13-juice-splash::after{transform:translate(-50%,-50%) rotate(-32deg) scale(1.15)}
@keyframes mi13JuicePop{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-12deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(4deg)}100%{opacity:0;transform:translate(-50%,-85%) scale(.82) rotate(-8deg)}}

.mi13-magic-storm{position:absolute;z-index:45;inset:-4%;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease;overflow:hidden}
.mi13-magic-storm.show{opacity:1;visibility:visible;background:radial-gradient(circle at 50% 58%,rgba(255,183,51,.16),rgba(184,48,255,.12) 23%,transparent 57%)}
.mi13-magic-storm i{position:absolute;left:50%;top:57%;width:6px;height:58%;transform-origin:50% 0;background:linear-gradient(180deg,rgba(255,250,184,.98),rgba(241,109,255,.84) 26%,rgba(114,31,181,.2) 72%,transparent);filter:drop-shadow(0 0 8px #f8b9ff);border-radius:999px;animation:mi13StormRay .72s ease-in-out infinite alternate}
.mi13-magic-storm i:nth-child(1){transform:rotate(18deg);animation-delay:-.1s}.mi13-magic-storm i:nth-child(2){transform:rotate(73deg);animation-delay:-.3s}.mi13-magic-storm i:nth-child(3){transform:rotate(132deg);animation-delay:-.5s}.mi13-magic-storm i:nth-child(4){transform:rotate(198deg);animation-delay:-.2s}.mi13-magic-storm i:nth-child(5){transform:rotate(258deg);animation-delay:-.6s}.mi13-magic-storm i:nth-child(6){transform:rotate(318deg);animation-delay:-.4s}
.mi13-magic-storm b,.mi13-magic-storm em{position:absolute;left:50%;top:57%;width:22vw;max-width:330px;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:4px solid rgba(246,186,255,.55);box-shadow:0 0 35px #bd49e8,inset 0 0 40px rgba(255,196,72,.32);animation:mi13StormRing 1.05s linear infinite}
.mi13-magic-storm em{width:34vw;max-width:520px;border-width:2px;border-style:dashed;animation-duration:1.55s;animation-direction:reverse}
.mi13-magic-storm.violent{filter:brightness(1.25) saturate(1.35)}
.mi13-magic-storm.detonate{animation:mi13StormDetonate .9s ease-out forwards}
@keyframes mi13StormRay{from{height:42%;opacity:.32}to{height:72%;opacity:.95}}
@keyframes mi13StormRing{to{transform:translate(-50%,-50%) rotate(360deg) scale(1.08)}}
@keyframes mi13StormDetonate{0%{opacity:1;filter:brightness(1.3)}35%{opacity:1;filter:brightness(2.4)}100%{opacity:0;transform:scale(1.18);filter:brightness(3)}}
.game-shell.mi13-doom-shake{animation:mi13DoomShake .13s linear infinite}
@keyframes mi13DoomShake{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(-2px,1px,0)}50%{transform:translate3d(2px,-1px,0)}75%{transform:translate3d(-1px,-2px,0)}}
@keyframes mi13MegaShake{0%,100%{transform:none}10%{transform:translate3d(-14px,8px,0) rotate(-.25deg)}24%{transform:translate3d(13px,-9px,0) rotate(.22deg)}38%{transform:translate3d(-11px,-6px,0)}52%{transform:translate3d(12px,7px,0)}68%{transform:translate3d(-8px,4px,0)}82%{transform:translate3d(6px,-3px,0)}}

@media (orientation:portrait) and (max-width:800px){
  .mi13-net-shot{width:clamp(38px,9.5vw,56px)!important}
  .mi13-ellie-rescue[data-stage="landing"]{width:clamp(165px,43vw,240px)!important}
  .mi13-magic-storm b{width:42vw}.mi13-magic-storm em{width:62vw}
}


/* ==========================================================
   1.4.72 · MI-13 Korrekturrunde 2
   Sera vor Ellie, Wurfbögen, Goldtrauben, neue Ellie-Sounds,
   langsamere Wutstufen, kleinerer Landing-Frame.
   ========================================================== */
.game-shell.mi13-event .sera{z-index:44!important;width:clamp(78px,8.7vw,116px)!important}
.mi13-ellie-rescue{z-index:34!important}
.mi13-ellie-rescue.jolt{animation:mi13EllieJolt .26s ease}
@keyframes mi13EllieJolt{0%{transform:translate(-50%,-50%) scale(.92) rotate(0)}20%{transform:translate(-48%,-51%) scale(.95) rotate(2deg)}45%{transform:translate(-52%,-49%) scale(.97) rotate(-3deg)}70%{transform:translate(-49%,-52%) scale(.95) rotate(2deg)}100%{transform:translate(-50%,-50%) scale(.92) rotate(0)}}
.mi13-ellie-rescue[data-stage="landing"]{width:clamp(155px,18vw,270px)!important}
.mi13-ellie-rescue[data-stage="4"]{width:clamp(184px,21vw,320px)!important}
.mi13-heal-drop{position:absolute!important;z-index:49!important;width:40px;height:40px;pointer-events:none;filter:drop-shadow(0 0 10px rgba(255,223,108,.75)) drop-shadow(0 0 24px rgba(255,197,57,.44));animation:mi13HealGlow .7s ease-in-out infinite alternate}
.mi13-heal-drop .grape{transform:scale(.92)}
@keyframes mi13HealGlow{to{filter:drop-shadow(0 0 14px rgba(255,242,154,.95)) drop-shadow(0 0 32px rgba(255,197,57,.58))}}
@media (orientation:portrait) and (max-width:800px){
  .game-shell.mi13-event .sera{width:clamp(74px,17vw,102px)!important}
  .mi13-ellie-rescue[data-stage="landing"]{width:clamp(142px,38vw,208px)!important}
  .mi13-ellie-rescue[data-stage="4"]{width:clamp(162px,43vw,230px)!important}
  .mi13-heal-drop{width:36px;height:36px}
}


/* ==========================================================
   1.4.72 · MI-13 Korrekturrunde 3
   Ellie-Splats/Layer, kontrollierte Wurfbögen, langsamer Aggro,
   Leitergrenzen, Goldtrauben-Fix, Audio-Cleanup, Pre-Burst.
   ========================================================== */
.game-shell.mi13-event .sera{
  z-index:44!important;
  height:clamp(82px,9.2vw,116px)!important;
  width:auto!important;
  max-width:none!important;
}
.mi13-ellie-rescue{z-index:34!important}
.mi13-shot{z-index:40!important}
.mi13-juice-splash{z-index:48!important}
.mi13-heal-drop{z-index:49!important}
.mi13-ground-agent.retire{opacity:0!important;transform:translate(-50%,-100%) scale(.82)!important;transition:opacity .25s ease,transform .25s ease!important}

/* Stage 4 is alive before the explosion — no more frozen cutout. */
.mi13-ellie-rescue.rage-flicker{
  animation:mi13RageFlicker .22s steps(2,end) infinite alternate!important;
  transform-origin:50% 62%!important;
}
@keyframes mi13RageFlicker{
  0%{filter:drop-shadow(0 0 14px rgba(173,38,216,.42)) brightness(.94) saturate(1.05);transform:translate(-50%,-50%) scale(.92) rotate(-.6deg)}
  45%{filter:drop-shadow(0 0 25px rgba(238,66,255,.74)) brightness(1.08) saturate(1.22);transform:translate(-50.6%,-49.4%) scale(.935) rotate(.8deg)}
  100%{filter:drop-shadow(0 0 32px rgba(255,97,207,.78)) brightness(1.16) saturate(1.30);transform:translate(-49.5%,-50.5%) scale(.95) rotate(-1deg)}
}
.mi13-ellie-rescue.preburst-small{animation:mi13PreBurstSmall .42s cubic-bezier(.3,.7,.2,1) both!important}
.mi13-ellie-rescue.preburst-big{animation:mi13PreBurstBig .48s cubic-bezier(.12,.86,.18,1) both!important}
.mi13-ellie-rescue.preburst-twitch{filter:drop-shadow(0 0 32px rgba(245,72,255,.92)) brightness(1.14)!important}
@keyframes mi13PreBurstSmall{to{transform:translate(-50%,-50%) scale(.78) rotate(-1deg)}}
@keyframes mi13PreBurstBig{0%{transform:translate(-50%,-50%) scale(.78)}65%{transform:translate(-50%,-50%) scale(1.10)}100%{transform:translate(-50%,-50%) scale(1.02)}}

/* Ladder contact: both ladder and Sera react. */
.mi13-long-ladder.hit{animation:mi13LadderHit .34s ease!important;filter:drop-shadow(0 0 12px rgba(255,208,90,.95)) drop-shadow(0 8px 10px rgba(0,0,0,.72))!important}
@keyframes mi13LadderHit{0%,100%{filter:drop-shadow(0 7px 9px rgba(0,0,0,.72))}40%{filter:brightness(1.8) drop-shadow(0 0 20px #ffd45a)}}
.sera.mi13-ladder-bump{animation:mi13SeraLadderBump .32s ease!important;filter:drop-shadow(0 0 18px rgba(255,205,76,.95)) drop-shadow(0 8px 10px rgba(0,0,0,.52))!important}
@keyframes mi13SeraLadderBump{0%,100%{transform:translate3d(-50%,-50%,0)}35%{transform:translate3d(-50%,-50%,0) scale(.90) rotate(6deg)}65%{transform:translate3d(-50%,-50%,0) scale(1.05) rotate(-4deg)}}
.mi13-ladder-spark{position:absolute;z-index:52;width:34px;height:34px;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;background:radial-gradient(circle,#fff9c8 0 10%,#ffd65c 18%,rgba(255,157,43,.72) 36%,transparent 68%);box-shadow:0 0 12px #fff2a2,0 0 25px #ffae35;animation:mi13LadderSpark .42s ease-out forwards}
@keyframes mi13LadderSpark{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}

/* Grape splat visible IN FRONT of Ellie. */
.mi13-juice-splash{mix-blend-mode:screen}
.mi13-juice-splash::before,.mi13-juice-splash::after{z-index:-1}

@media (orientation:portrait) and (max-width:800px){
  .game-shell.mi13-event .sera{height:clamp(76px,19vw,100px)!important;width:auto!important}
}


/* ==========================================================
   1.4.72 · MI-13 Korrekturrunde 5
   Ellie-Treffer endlich VOR Ellie, Matsch-Trauben, Goldtrauben
   im Spielraum, stärkerer Landing-Shake, weniger Beschuss.
   ========================================================== */
.mi13-projectiles-front{position:absolute;z-index:42;inset:0;pointer-events:none;overflow:visible}
.mi13-splats-front{position:absolute;z-index:43;inset:0;pointer-events:none;overflow:hidden}
.mi13-projectiles-front .mi13-shot{z-index:1!important}
.mi13-ellie-splat{
  position:absolute;z-index:2;height:auto;pointer-events:none;transform-origin:50% 50%;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.48));
  animation:mi13EllieSplatFall .90s cubic-bezier(.18,.72,.35,1) forwards;
}
@keyframes mi13EllieSplatFall{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.22) rotate(var(--splat-rot))}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(var(--splat-rot))}
  31%{opacity:.96;transform:translate(-50%,-44%) scale(.80) rotate(calc(var(--splat-rot) + 8deg))}
  100%{opacity:0;transform:translate(-50%,var(--splat-fall)) scale(.48) rotate(calc(var(--splat-rot) + 36deg))}
}
.game-shell.mi13-entry-bang{animation:mi13EntryShake162 .68s cubic-bezier(.2,.75,.25,1)!important}
@keyframes mi13EntryShake162{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  12%{transform:translate3d(-10px,5px,0) rotate(-.15deg)}
  24%{transform:translate3d(9px,-5px,0) rotate(.14deg)}
  38%{transform:translate3d(-8px,-3px,0)}
  52%{transform:translate3d(7px,4px,0)}
  68%{transform:translate3d(-5px,2px,0)}
  84%{transform:translate3d(3px,-2px,0)}
}
.mi13-heal-drop{z-index:41!important}
@media (orientation:portrait) and (max-width:800px){
  .mi13-ellie-splat{max-width:92px}
}


/* ==========================================================
   1.4.72 · MI-13 Korrekturrunde 6
   Variierende Ellie-Treffer, sichtbare Fall-Splashes,
   kleineres Landing, Sera-Netzfeedback, Heal-FX an Sera.
   ========================================================== */
.mi13-ellie-splat{
  animation:mi13EllieSplatFall163 1.14s cubic-bezier(.18,.72,.35,1) forwards!important;
}
@keyframes mi13EllieSplatFall163{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(var(--splat-rot))}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.02) rotate(var(--splat-rot))}
  38%{opacity:.98;transform:translate(-50%,-42%) scale(.82) rotate(calc(var(--splat-rot) + 12deg))}
  72%{opacity:.94;transform:translate(calc(-50% + calc(var(--splat-drift) * .68)),calc(var(--splat-fall) * .56)) scale(.58) rotate(calc(var(--splat-rot) + 58deg))}
  100%{opacity:0;transform:translate(calc(-50% + var(--splat-drift)),var(--splat-fall)) scale(.34) rotate(calc(var(--splat-rot) + 118deg))}
}
.mi13-net-caught{display:block!important;z-index:44!important;opacity:.88!important;pointer-events:none;filter:drop-shadow(0 0 12px rgba(255,216,117,.7)) drop-shadow(0 0 22px rgba(130,206,255,.42))!important}
.mi13-net-caught.show{animation:mi13NetPulse .26s ease-in-out infinite alternate,mi13NetWrapSera .78s ease-out both!important}
@keyframes mi13NetWrapSera{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.28) rotate(-14deg)}
  16%{opacity:.96;transform:translate(-50%,-50%) scale(.92) rotate(-4deg)}
  58%{opacity:.74;transform:translate(-50%,-50%) scale(.78) rotate(8deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.22) rotate(24deg)}
}
.sera.mi13-net-zapped{animation:mi13SeraNetShock .72s ease!important;filter:drop-shadow(0 0 18px rgba(255,218,91,.96)) drop-shadow(0 0 30px rgba(141,218,255,.62)) drop-shadow(0 8px 10px rgba(0,0,0,.52))!important}
@keyframes mi13SeraNetShock{
  0%,100%{transform:translate(-50%,-50%) rotate(0deg)}
  10%{transform:translate(calc(-50% - 4px),calc(-50% + 1px)) rotate(-3deg)}
  20%{transform:translate(calc(-50% + 5px),calc(-50% - 2px)) rotate(3deg)}
  30%{transform:translate(calc(-50% - 6px),calc(-50% + 3px)) rotate(-4deg)}
  40%{transform:translate(calc(-50% + 6px),calc(-50% - 2px)) rotate(4deg)}
  55%{transform:translate(calc(-50% - 4px),calc(-50% + 2px)) rotate(-2deg)}
  70%{transform:translate(calc(-50% + 3px),calc(-50% - 1px)) rotate(2deg)}
}
.mi13-ellie-rescue[data-stage="landing"]{width:clamp(136px,15vw,212px)!important}
@media (orientation:portrait) and (max-width:800px){
  .mi13-ellie-rescue[data-stage="landing"]{width:clamp(120px,31vw,182px)!important}
}


/* ==========================================================
   1.4.72 · MI-13 Korrekturrunde 7
   Fallende Trauben, Ambient-Funken, Bewegung, Agenten-Hit-FX,
   Blackout-Reveal, zusätzliche Final-Sounds.
   ========================================================== */
.mi13-ambient{position:absolute;inset:0;z-index:19;pointer-events:none;overflow:hidden}
.mi13-spark,.mi13-flash,.mi13-pipe-glow,.mi13-steam,.mi13-mini-broom,.mi13-mini-drone,.mi13-drone-scan{position:absolute;pointer-events:none}
.mi13-spark{width:8px;height:8px;border-radius:50%;opacity:0;animation:mi13BgSpark 4.2s ease-in-out infinite;box-shadow:0 0 12px currentColor,0 0 22px currentColor}
.mi13-spark::after{content:'';position:absolute;left:50%;top:50%;width:18px;height:2px;border-radius:999px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 10px currentColor}
.mi13-spark::before{content:'';position:absolute;left:50%;top:50%;width:18px;height:2px;border-radius:999px;background:currentColor;transform:translate(-50%,-50%) rotate(-45deg);box-shadow:0 0 10px currentColor}
.mi13-spark.s1{left:8%;top:14%;color:#d78dff;animation-delay:-.3s}.mi13-spark.s2{left:22%;top:27%;color:#ffd978;animation-delay:-1.4s}.mi13-spark.s3{left:36%;top:18%;color:#c889ff;animation-delay:-2.2s}.mi13-spark.s4{left:62%;top:21%;color:#ffd36a;animation-delay:-.9s}.mi13-spark.s5{left:79%;top:13%;color:#c26bff;animation-delay:-2.9s}.mi13-spark.s6{left:72%;top:38%;color:#ffca57;animation-delay:-1.7s}.mi13-spark.s7{left:16%;top:44%;color:#ba64ff;animation-delay:-3.6s}.mi13-spark.s8{left:88%;top:31%;color:#f7ca68;animation-delay:-.5s}
@keyframes mi13BgSpark{0%,82%,100%{opacity:0;transform:scale(.25)}8%,20%{opacity:.95;transform:scale(1.0)}35%{opacity:0;transform:scale(.45)}}
.mi13-flash{width:42px;height:42px;border-radius:50%;opacity:0;background:radial-gradient(circle,rgba(255,247,198,.95) 0 12%,rgba(224,103,255,.76) 24%,rgba(255,196,85,.54) 42%,transparent 72%);filter:blur(1px);animation:mi13BgFlash 5.7s ease-in-out infinite}
.mi13-flash.f1{left:29%;top:11%;animation-delay:-1.4s}.mi13-flash.f2{left:83%;top:19%;animation-delay:-3.8s}
@keyframes mi13BgFlash{0%,88%,100%{opacity:0;transform:scale(.15)}4%,10%{opacity:.85;transform:scale(1.15)}18%{opacity:0;transform:scale(.45)}}
.mi13-pipe-glow{bottom:12%;width:64px;height:18px;border-radius:999px;opacity:.25;background:linear-gradient(90deg,rgba(255,181,64,.0),rgba(255,181,64,.55),rgba(173,78,255,.55),rgba(255,181,64,.0));filter:blur(2px);animation:mi13PipeGlow 2.8s ease-in-out infinite}
.mi13-pipe-glow.g1{left:6%}.mi13-pipe-glow.g2{right:8%;animation-delay:-1.3s}
@keyframes mi13PipeGlow{0%,100%{opacity:.18;transform:scaleX(.88)}50%{opacity:.58;transform:scaleX(1.08)}}
.mi13-steam{bottom:12%;width:60px;height:80px;opacity:.55;filter:blur(.4px)}
.mi13-steam.st1{left:2%}.mi13-steam.st2{right:5%;animation-delay:-1.5s}
.mi13-steam i{position:absolute;left:50%;bottom:0;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.68) 0 12%,rgba(192,197,207,.44) 45%,rgba(175,181,194,0) 72%);animation:mi13SteamRise 2.9s ease-in-out infinite}
.mi13-steam i:nth-child(2){animation-delay:-.9s;left:35%}.mi13-steam i:nth-child(3){animation-delay:-1.7s;left:62%}
@keyframes mi13SteamRise{0%{opacity:0;transform:translate(-50%,0) scale(.3)}18%{opacity:.46}100%{opacity:0;transform:translate(-50%,-72px) scale(1.4)}}
.mi13-mini-broom{top:18%;left:-14%;width:44px;opacity:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.48));animation:mi13BroomSweep 12s linear infinite}
@keyframes mi13BroomSweep{0%,68%,100%{opacity:0;transform:translateX(0) translateY(0) rotate(-6deg)}72%{opacity:.72}83%{opacity:.72;transform:translateX(122vw) translateY(7px) rotate(3deg)}86%{opacity:0;transform:translateX(130vw) translateY(10px) rotate(6deg)}}
.mi13-mini-drone{top:7%;right:-16%;width:68px;opacity:0;filter:drop-shadow(0 0 8px rgba(255,72,72,.45)) drop-shadow(0 5px 8px rgba(0,0,0,.55));animation:mi13DronePeek 10.5s ease-in-out infinite}
.mi13-drone-scan{top:12%;right:7.8%;width:18vw;max-width:128px;height:26px;opacity:0;background:linear-gradient(90deg,rgba(255,77,77,0),rgba(255,82,82,.16),rgba(255,223,116,.38),rgba(255,82,82,.06),rgba(255,77,77,0));clip-path:polygon(0 50%,100% 0,100% 100%);filter:blur(1px);transform-origin:100% 50%;animation:mi13DroneScan 10.5s ease-in-out infinite}
@keyframes mi13DronePeek{0%,100%{opacity:0;transform:translateX(0) rotate(-4deg)}16%{opacity:0}22%{opacity:.72;transform:translateX(-7vw) rotate(-6deg)}28%{opacity:.78;transform:translateX(-10vw) rotate(0deg)}36%{opacity:0;transform:translateX(0) rotate(4deg)}}
@keyframes mi13DroneScan{0%,100%{opacity:0;transform:scaleX(.15) rotate(0deg)}16%{opacity:0}22%{opacity:.0;transform:scaleX(.25) rotate(-2deg)}24%{opacity:.72;transform:scaleX(.55) rotate(2deg)}29%{opacity:.60;transform:scaleX(1) rotate(-1deg)}35%{opacity:0;transform:scaleX(.18) rotate(0deg)}}
.mi13-ellie-rescue[data-stage="1"],.mi13-ellie-rescue[data-stage="2"],.mi13-ellie-rescue[data-stage="3"]{animation:mi13EllieIdle 1.8s ease-in-out infinite}
@keyframes mi13EllieIdle{0%,100%{transform:translate(-50%,-50%) scale(.93) rotate(-.5deg)}50%{transform:translate(-50%,-51.2%) scale(.955) rotate(.8deg)}}
.mi13-falling-grape{position:absolute;z-index:44;width:26px;height:26px;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.46));animation:mi13FallingGrape .66s cubic-bezier(.19,.74,.31,1) forwards}
.mi13-falling-grape i{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#f4b3ff 0 9%,#9d2fe8 34%,#4b0d71 100%);box-shadow:inset -2px -2px 4px rgba(0,0,0,.28)}
.mi13-falling-grape i:nth-child(1){left:7px;top:0}.mi13-falling-grape i:nth-child(2){left:0;top:8px}.mi13-falling-grape i:nth-child(3){left:13px;top:8px}.mi13-falling-grape i:nth-child(4){left:7px;top:16px}
@keyframes mi13FallingGrape{0%{opacity:1;transform:translate(-50%,-50%) scale(.9) rotate(0deg)}25%{opacity:1}100%{opacity:.04;transform:translate(calc(-50% + var(--grape-drift)),calc(-50% + var(--grape-fall))) scale(.55) rotate(240deg)}}
.mi13-ground-platch{position:absolute;z-index:45;transform:translate(-50%,-50%);font-size:clamp(12px,1.2vw,18px);font-weight:1000;letter-spacing:.08em;color:#ffd0ff;text-shadow:0 0 8px #8e2fd3,0 0 16px rgba(255,180,84,.92);animation:mi13GroundPlatch .54s ease-out forwards;pointer-events:none}
@keyframes mi13GroundPlatch{0%{opacity:0;transform:translate(-50%,-20%) scale(.35)}20%{opacity:1;transform:translate(-50%,-55%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-105%) scale(.85)}}
.mi13-agent-hit-fx{position:absolute;z-index:45;width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,247,208,.98) 0 12%,rgba(236,108,255,.86) 20%,rgba(255,187,76,.72) 34%,transparent 72%);box-shadow:0 0 15px rgba(231,89,255,.72),0 0 28px rgba(255,185,91,.54);animation:mi13AgentHitFx .5s ease-out forwards}
.mi13-agent-hit-fx::before,.mi13-agent-hit-fx::after{content:'';position:absolute;left:50%;top:50%;width:48px;height:3px;border-radius:999px;background:rgba(255,218,112,.9);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 10px rgba(255,219,118,.88)}
.mi13-agent-hit-fx::after{transform:translate(-50%,-50%) rotate(-45deg)}
@keyframes mi13AgentHitFx{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
.mi13-blackout{position:absolute;inset:0;z-index:53;background:#000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .38s ease,visibility .38s}
.mi13-blackout.show{opacity:1;visibility:visible}
.mi13-blackout.show.reveal{opacity:0;transition:opacity .88s ease}
@media (orientation:portrait) and (max-width:800px){
  .mi13-mini-broom{width:36px;top:22%}
  .mi13-mini-drone{width:54px;top:10%}
  .mi13-drone-scan{top:15%;right:7%;width:96px;height:20px}
  .mi13-ground-platch{font-size:12px}
  .mi13-agent-hit-fx{width:34px;height:34px}
}


/* ==========================================================
   1.4.72 · MI-13 Korrekturrunde 8
   Ellie-Pose-Sequenzen, echte Ambient-Gags, Sound-Mapping.
   ========================================================== */
.mi13-title-card,.mi13-title-card strong,.mi13-title-card span,.mi13-title-card b{ text-align:center!important; }
.mi13-title-card strong{display:block;width:100%;margin-inline:auto}

/* Keine Commodore-X mehr: nur kleine weiche Magiepunkte. */
.mi13-ambient{z-index:26!important}
.mi13-spark{width:6px!important;height:6px!important;border:1px solid currentColor;background:radial-gradient(circle,rgba(255,255,255,.96) 0 16%,currentColor 38%,transparent 72%)!important;box-shadow:0 0 8px currentColor,0 0 16px currentColor!important}
.mi13-spark::before,.mi13-spark::after{display:none!important;content:none!important}

/* Besen und Orcal-Drohne werden per JS einmal sichtbar ausgelöst. */
.mi13-mini-broom{left:-72px!important;top:20%!important;width:48px!important;opacity:0!important;animation:none!important;z-index:28!important}
.mi13-mini-broom.sweep{animation:mi13BroomSweep165 3.05s linear both!important}
@keyframes mi13BroomSweep165{
  0%{opacity:0;transform:translateX(0) translateY(0) rotate(-10deg) scale(.82)}
  8%{opacity:.82}
  48%{opacity:.92;transform:translateX(52vw) translateY(10px) rotate(2deg) scale(.92)}
  90%{opacity:.80;transform:translateX(calc(100vw + 105px)) translateY(-4px) rotate(8deg) scale(.84)}
  100%{opacity:0;transform:translateX(calc(100vw + 130px)) translateY(-8px) rotate(12deg) scale(.76)}
}
.mi13-mini-drone{right:-86px!important;top:10%!important;width:78px!important;opacity:0!important;animation:none!important;z-index:29!important}
.mi13-mini-drone.peek{animation:mi13DronePeek165 3.0s ease-in-out both!important}
@keyframes mi13DronePeek165{
  0%{opacity:0;transform:translateX(0) rotate(-7deg) scale(.82)}
  18%{opacity:.88;transform:translateX(-92px) rotate(-4deg) scale(.94)}
  42%{opacity:.95;transform:translateX(-112px) rotate(1deg) scale(1)}
  70%{opacity:.92;transform:translateX(-108px) rotate(-1deg) scale(.98)}
  100%{opacity:0;transform:translateX(12px) rotate(8deg) scale(.80)}
}
.mi13-drone-scan{right:12px!important;top:15%!important;width:150px!important;height:34px!important;opacity:0!important;animation:none!important;z-index:27!important;transform-origin:100% 50%!important;background:linear-gradient(90deg,rgba(255,55,55,0),rgba(255,76,76,.16),rgba(255,210,95,.54),rgba(255,76,76,.06),rgba(255,55,55,0))!important;clip-path:polygon(0 50%,100% 0,100% 100%)!important;filter:blur(.6px) drop-shadow(0 0 8px rgba(255,103,82,.45))!important}
.mi13-drone-scan.scan{animation:mi13DroneScan165 2.45s ease-in-out both!important}
@keyframes mi13DroneScan165{
  0%,12%{opacity:0;transform:scaleX(.12) rotate(-3deg)}
  24%{opacity:.72;transform:scaleX(.68) rotate(2deg)}
  45%{opacity:.90;transform:scaleX(1) rotate(-2deg)}
  68%{opacity:.58;transform:scaleX(.82) rotate(3deg)}
  100%{opacity:0;transform:scaleX(.12) rotate(0)}
}

/* Ellie lebt: kleine Positionswechsel plus 3 Posen pro Wutphase. */
.mi13-ellie-rescue.pose-swap{animation:mi13ElliePoseSwap165 .20s ease-out!important}
@keyframes mi13ElliePoseSwap165{
  0%{opacity:.76;filter:brightness(1.12) saturate(1.08);transform:translate(-50%,-50%) scale(.91) rotate(-1.2deg)}
  55%{opacity:1;transform:translate(-50.5%,-50.7%) scale(.97) rotate(.8deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(.94) rotate(0)}
}
.mi13-ellie-rescue[data-stage="landing"]{width:clamp(170px,19vw,290px)!important;max-height:80%!important}
.mi13-ellie-rescue[data-stage="1"],.mi13-ellie-rescue[data-stage="2"],.mi13-ellie-rescue[data-stage="3"]{width:clamp(160px,18vw,278px)!important;max-height:78%!important}
.mi13-ellie-rescue[data-stage="4"]{width:clamp(178px,20vw,310px)!important;max-height:80%!important}

@media (orientation:portrait) and (max-width:800px){
  .mi13-mini-broom{width:38px!important;top:22%!important}
  .mi13-mini-drone{width:58px!important;top:12%!important}
  .mi13-drone-scan{width:105px!important;height:24px!important;top:16%!important}
  .mi13-ellie-rescue[data-stage="landing"]{width:clamp(140px,36vw,210px)!important}
  .mi13-ellie-rescue[data-stage="1"],.mi13-ellie-rescue[data-stage="2"],.mi13-ellie-rescue[data-stage="3"]{width:clamp(138px,35vw,205px)!important}
  .mi13-ellie-rescue[data-stage="4"]{width:clamp(150px,39vw,222px)!important}
}


/* ==========================================================
   1.4.72 · MI-13 Feinkorrektur
   kleinere Ellie-Landung, längere Ambient-Gags, Licht,
   längeres Schwarz, langsamer Final-Zoom, HUD entschlackt.
   ========================================================== */
/* Linken Timer-/Statusbalken entfernen, Geduldsbalken behalten. */
.mi13-event-hud{
  top:1.2%!important;left:50%!important;transform:translateX(-50%)!important;
  width:min(520px,64%)!important;max-width:none!important;padding:0!important;
  border:0!important;border-radius:0!important;background:none!important;
  box-shadow:none!important;backdrop-filter:none!important;display:block!important;
}
.mi13-event-hud>span,.mi13-event-hud>strong,.mi13-event-hud>b,.mi13-event-hud>small{display:none!important}
.mi13-event-hud .mi13-patience{margin:0!important}

/* Ellie bei der Landung genauso kompakt wie die Folgephasen. */
.mi13-ellie-rescue[data-stage="landing"],
.mi13-ellie-rescue[data-stage="1"],
.mi13-ellie-rescue[data-stage="2"],
.mi13-ellie-rescue[data-stage="3"]{
  width:clamp(142px,15.5vw,225px)!important;max-height:72%!important;
}
.mi13-ellie-rescue[data-stage="4"]{width:clamp(156px,17.5vw,250px)!important;max-height:76%!important}

/* Besen: langsam genug, damit er wirklich gesehen wird. */
.mi13-mini-broom{left:-70px!important;top:22%!important;width:56px!important;opacity:0!important;animation:none!important;z-index:31!important}
.mi13-mini-broom.sweep{animation:mi13BroomSweep166 6.15s linear both!important}
@keyframes mi13BroomSweep166{
  0%{opacity:0;transform:translateX(0) translateY(0) rotate(-12deg) scale(.78)}
  7%{opacity:.95}
  18%{opacity:.96;transform:translateX(18vw) translateY(7px) rotate(-5deg) scale(.86)}
  48%{opacity:.98;transform:translateX(54vw) translateY(13px) rotate(2deg) scale(.92)}
  78%{opacity:.96;transform:translateX(88vw) translateY(3px) rotate(7deg) scale(.87)}
  93%{opacity:.78;transform:translateX(calc(100vw + 70px)) translateY(-3px) rotate(10deg) scale(.82)}
  100%{opacity:0;transform:translateX(calc(100vw + 120px)) translateY(-8px) rotate(13deg) scale(.76)}
}

/* Orcal-Drohne bleibt länger stehen; Scan ist bewusst deutlich rot. */
.mi13-mini-drone{right:-46px!important;top:10%!important;width:92px!important;opacity:0!important;animation:none!important;z-index:33!important}
.mi13-mini-drone.peek{animation:mi13DronePeek166 5.85s ease-in-out both!important}
@keyframes mi13DronePeek166{
  0%{opacity:0;transform:translateX(0) rotate(-8deg) scale(.78)}
  12%{opacity:.96;transform:translateX(-72px) rotate(-4deg) scale(.94)}
  24%{opacity:1;transform:translateX(-98px) rotate(0deg) scale(1)}
  74%{opacity:1;transform:translateX(-98px) rotate(1deg) scale(1)}
  88%{opacity:.88;transform:translateX(-72px) rotate(4deg) scale(.94)}
  100%{opacity:0;transform:translateX(12px) rotate(8deg) scale(.78)}
}
.mi13-drone-scan{
  right:42px!important;top:14.3%!important;width:235px!important;height:118px!important;
  opacity:0!important;animation:none!important;z-index:32!important;transform-origin:100% 50%!important;
  background:linear-gradient(90deg,rgba(255,20,20,0),rgba(255,30,30,.10) 18%,rgba(255,42,42,.30) 52%,rgba(255,84,46,.58) 84%,rgba(255,180,90,.76))!important;
  clip-path:polygon(0 16%,100% 46%,100% 54%,0 84%)!important;
  filter:drop-shadow(0 0 8px rgba(255,35,35,.85)) drop-shadow(0 0 18px rgba(255,70,40,.55))!important;
  mix-blend-mode:screen!important;
}
.mi13-drone-scan.scan{animation:mi13DroneScan166 4.55s ease-in-out both!important}
@keyframes mi13DroneScan166{
  0%{opacity:0;transform:scaleX(.18) rotate(-4deg)}
  12%{opacity:.76;transform:scaleX(.72) rotate(-2deg)}
  24%{opacity:.95;transform:scaleX(1) rotate(2deg)}
  40%{opacity:.82;transform:scaleX(.93) rotate(-3deg)}
  58%{opacity:.96;transform:scaleX(1.04) rotate(2deg)}
  76%{opacity:.78;transform:scaleX(.90) rotate(-2deg)}
  90%{opacity:.62;transform:scaleX(.72) rotate(1deg)}
  100%{opacity:0;transform:scaleX(.22) rotate(0deg)}
}
.mi13-drone-scan::after{
  content:'';position:absolute;right:0;top:50%;width:100%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,40,40,.3),#ff3b2e 70%,#ffd28a);
  box-shadow:0 0 8px #ff4030,0 0 16px rgba(255,52,44,.9);transform:translateY(-50%);
}

/* Vorhandene Laternen und die drei Frontlampen der CH-17 sichtbar aufglühen lassen. */
.mi13-lantern,.mi13-floater-lamp{position:absolute;pointer-events:none;z-index:27;border-radius:50%;mix-blend-mode:screen}
.mi13-lantern{
  width:34px;height:34px;background:radial-gradient(circle,#fff7cf 0 8%,rgba(255,209,104,.95) 15%,rgba(255,157,52,.62) 31%,rgba(255,126,28,.18) 50%,transparent 72%);
  box-shadow:0 0 12px rgba(255,215,123,.82),0 0 28px rgba(255,141,41,.58);animation:mi13LanternGlow 2.1s ease-in-out infinite alternate;
}
.mi13-lantern.l1{left:3.7%;top:56.5%}.mi13-lantern.l2{left:11.2%;top:42.0%}.mi13-lantern.l3{left:25.1%;top:91.1%}.mi13-lantern.l4{left:91.6%;top:56.0%}.mi13-lantern.l5{left:70.8%;top:91.2%}
@keyframes mi13LanternGlow{from{opacity:.48;transform:scale(.86)}to{opacity:.92;transform:scale(1.10)}}
.mi13-floater-lamp{
  background:radial-gradient(circle,#fffbe6 0 10%,#ffd788 18%,rgba(255,159,60,.90) 29%,rgba(255,102,26,.25) 50%,transparent 72%);
  box-shadow:0 0 15px rgba(255,210,126,.95),0 0 34px rgba(255,119,34,.66);animation:mi13FloaterLamp 1.65s ease-in-out infinite alternate;
}
.mi13-floater-lamp.fl1{left:56.7%;top:34.1%;width:40px;height:40px}
.mi13-floater-lamp.fl2{left:52.2%;top:46.7%;width:27px;height:27px}
.mi13-floater-lamp.fl3{left:56.5%;top:47.2%;width:30px;height:30px}
@keyframes mi13FloaterLamp{from{opacity:.62;transform:scale(.90)}to{opacity:1;transform:scale(1.16)}}

/* Finalbild: erst klein, nach Schwarz langsam größer werden. */
.mi13-final-shot{
  width:min(720px,58vw)!important;opacity:0!important;visibility:hidden!important;
  transform:translate(-50%,16px) scale(.72)!important;
  transition:opacity .72s ease,transform 4.3s cubic-bezier(.16,.82,.18,1)!important;
}
.mi13-final-shot.show{opacity:1!important;visibility:visible!important;transform:translate(-50%,8px) scale(.72)!important}
.mi13-final-shot.show.slow-zoom{transform:translate(-50%,0) scale(1)!important}
.mi13-smoke.clearing{opacity:.32!important;transition:opacity 2.6s ease!important}
.mi13-blackout{transition:opacity 1.05s ease,visibility 1.05s!important}
.mi13-blackout.show.reveal{opacity:0!important;transition:opacity 1.05s ease!important}

@media (orientation:portrait) and (max-width:800px){
  .mi13-event-hud{width:min(86%,430px)!important}
  .mi13-ellie-rescue[data-stage="landing"],.mi13-ellie-rescue[data-stage="1"],.mi13-ellie-rescue[data-stage="2"],.mi13-ellie-rescue[data-stage="3"]{width:clamp(128px,32vw,188px)!important;max-height:68%!important}
  .mi13-ellie-rescue[data-stage="4"]{width:clamp(142px,36vw,208px)!important}
  .mi13-mini-broom{width:44px!important;top:24%!important}
  .mi13-mini-drone{width:66px!important;right:-34px!important;top:13%!important}
  .mi13-drone-scan{right:28px!important;top:17%!important;width:145px!important;height:78px!important}
  .mi13-lantern,.mi13-floater-lamp{display:none!important}
  .mi13-final-shot{width:min(94vw,560px)!important}
}


/* ==========================================================
   1.4.72 · MI-13 finale Feinkorrektur
   Lichter entfernt, Ellie-Landung kleiner, Hilfe-Banner,
   Drohne/Besen deutlich sichtbarer, längeres Finale.
   ========================================================== */

/* Keine zusätzlich gesetzten Lampen. */
.mi13-lantern,.mi13-floater-lamp{display:none!important}

/* Schöne Hinweis-Einblendung oben mittig kurz vor Ellie. */
.mi13-help-banner{
  position:absolute;z-index:54;left:50%;top:11.5%;
  transform:translate(-50%,-14px) scale(.96);opacity:0;pointer-events:none;
  max-width:min(760px,78vw);padding:14px 22px;border-radius:18px;
  border:1px solid rgba(229,191,120,.56);
  background:linear-gradient(180deg,rgba(20,10,28,.92),rgba(34,16,45,.88));
  box-shadow:0 16px 42px rgba(0,0,0,.48),0 0 18px rgba(194,113,255,.16);
  color:#f7e6b2;font-weight:900;font-size:clamp(.88rem,1.6vw,1.12rem);
  letter-spacing:.03em;text-align:center;line-height:1.35;
  transition:opacity .34s ease,transform .34s ease;
}
.mi13-help-banner.show{opacity:1;transform:translate(-50%,0) scale(1)}
@media (orientation:portrait) and (max-width:800px){
  .mi13-help-banner{top:10%;max-width:min(88vw,520px);padding:10px 14px;font-size:clamp(.76rem,3.4vw,.96rem)}
}

/* Ellie-Landebild moderat kleiner. */
.mi13-ellie-rescue[data-stage="landing"]{width:clamp(133px,14.6vw,212px)!important;max-height:70%!important}
@media (orientation:portrait) and (max-width:800px){
  .mi13-ellie-rescue[data-stage="landing"]{width:clamp(113px,29vw,171px)!important;max-height:66%!important}
}

/* Besen und Drohne müssen wirklich sichtbar sein. */
.mi13-mini-broom{left:-88px!important;top:25%!important;width:72px!important;z-index:36!important;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))!important}
.mi13-mini-broom.sweep{animation:mi13BroomSweep167 7.2s linear both!important}
@keyframes mi13BroomSweep167{
  0%{opacity:0;transform:translateX(0) translateY(0) rotate(-14deg) scale(.8)}
  6%{opacity:.98}
  20%{opacity:1;transform:translateX(20vw) translateY(9px) rotate(-6deg) scale(.9)}
  46%{opacity:1;transform:translateX(46vw) translateY(13px) rotate(1deg) scale(.96)}
  72%{opacity:1;transform:translateX(73vw) translateY(7px) rotate(7deg) scale(.9)}
  92%{opacity:.84;transform:translateX(calc(100vw + 20px)) translateY(0) rotate(12deg) scale(.84)}
  100%{opacity:0;transform:translateX(calc(100vw + 100px)) translateY(-4px) rotate(14deg) scale(.8)}
}
.mi13-mini-drone{right:-70px!important;top:9%!important;width:112px!important;z-index:37!important;filter:drop-shadow(0 0 10px rgba(255,72,72,.52)) drop-shadow(0 5px 8px rgba(0,0,0,.55))!important}
.mi13-mini-drone.peek{animation:mi13DronePeek167 7.1s ease-in-out both!important}
@keyframes mi13DronePeek167{
  0%{opacity:0;transform:translateX(0) rotate(-10deg) scale(.76)}
  12%{opacity:.98;transform:translateX(-84px) rotate(-5deg) scale(.94)}
  24%{opacity:1;transform:translateX(-124px) rotate(0deg) scale(1.05)}
  76%{opacity:1;transform:translateX(-124px) rotate(1deg) scale(1.05)}
  90%{opacity:.9;transform:translateX(-80px) rotate(5deg) scale(.94)}
  100%{opacity:0;transform:translateX(8px) rotate(10deg) scale(.76)}
}
.mi13-drone-scan{
  right:44px!important;top:13.2%!important;width:270px!important;height:128px!important;z-index:35!important;
  background:linear-gradient(90deg,rgba(255,20,20,0),rgba(255,34,34,.10) 16%,rgba(255,48,48,.34) 48%,rgba(255,72,42,.70) 80%,rgba(255,194,110,.9))!important;
  clip-path:polygon(0 16%,100% 46%,100% 54%,0 84%)!important;
  filter:drop-shadow(0 0 10px rgba(255,34,34,.92)) drop-shadow(0 0 24px rgba(255,92,48,.62))!important;
  mix-blend-mode:screen!important
}
.mi13-drone-scan.scan{animation:mi13DroneScan167 5.2s ease-in-out both!important}
@keyframes mi13DroneScan167{
  0%{opacity:0;transform:scaleX(.12) rotate(-5deg)}
  12%{opacity:.82;transform:scaleX(.7) rotate(-2deg)}
  26%{opacity:1;transform:scaleX(1.02) rotate(2deg)}
  46%{opacity:.9;transform:scaleX(.96) rotate(-2deg)}
  68%{opacity:1;transform:scaleX(1.04) rotate(1deg)}
  84%{opacity:.82;transform:scaleX(.88) rotate(-1deg)}
  100%{opacity:0;transform:scaleX(.18) rotate(0deg)}
}
@media (orientation:portrait) and (max-width:800px){
  .mi13-mini-broom{width:54px!important;top:27%!important}
  .mi13-mini-drone{width:78px!important;right:-40px!important;top:12%!important}
  .mi13-drone-scan{right:24px!important;top:16%!important;width:170px!important;height:82px!important}
}

/* Finale noch etwas mehr wirken lassen. */
.mi13-blackout{transition:opacity 1.2s ease,visibility 1.2s!important}
.mi13-blackout.show.reveal{transition:opacity 1.2s ease!important}
.mi13-final-shot{transition:opacity .82s ease,transform 5.1s cubic-bezier(.16,.82,.18,1)!important}
.mi13-final-shot.show{transform:translate(-50%,8px) scale(.68)!important}
.mi13-final-shot.show.slow-zoom{transform:translate(-50%,0) scale(1)!important}


/* 1.4.72 hotfix: sichtbarer Besen/Drohne, ruhigere Ellie-Landung */
.mi13-entry-freeze .mi13-agent,.mi13-entry-freeze .mi13-climber,.mi13-entry-freeze .mi13-ladder,.mi13-entry-freeze .mi13-projectile,.mi13-entry-freeze .mi13-net{animation-play-state:paused!important}
.mi13-mini-broom{left:-96px!important;top:24%!important;width:76px!important;z-index:70!important;opacity:0!important}
.mi13-mini-broom.sweep{animation:mi13BroomSweep168 8.4s linear both!important}
@keyframes mi13BroomSweep168{0%{opacity:0;transform:translateX(0) translateY(0) rotate(-16deg) scale(.84)}8%{opacity:1}26%{opacity:1;transform:translateX(18vw) translateY(6px) rotate(-7deg) scale(.92)}52%{opacity:1;transform:translateX(45vw) translateY(10px) rotate(0deg) scale(.98)}76%{opacity:1;transform:translateX(70vw) translateY(5px) rotate(8deg) scale(.92)}92%{opacity:.94;transform:translateX(86vw) translateY(-1px) rotate(12deg) scale(.86)}100%{opacity:0;transform:translateX(calc(100vw + 90px)) translateY(-3px) rotate(15deg) scale(.82)}}
.mi13-mini-drone{right:-84px!important;top:8%!important;width:126px!important;z-index:72!important;opacity:0!important}
.mi13-mini-drone.peek{animation:mi13DronePeek168 8.1s ease-in-out both!important}
@keyframes mi13DronePeek168{0%{opacity:0;transform:translateX(0) rotate(-12deg) scale(.72)}10%{opacity:1;transform:translateX(-66px) rotate(-6deg) scale(.88)}24%{opacity:1;transform:translateX(-114px) rotate(0deg) scale(1.03)}72%{opacity:1;transform:translateX(-114px) rotate(0deg) scale(1.03)}88%{opacity:.9;transform:translateX(-62px) rotate(5deg) scale(.9)}100%{opacity:0;transform:translateX(12px) rotate(10deg) scale(.74)}}
.mi13-drone-scan{right:62px!important;top:12.4%!important;width:292px!important;height:138px!important;z-index:71!important;opacity:0!important;background:linear-gradient(90deg,rgba(255,8,8,0),rgba(255,20,20,.10) 12%,rgba(255,34,34,.38) 40%,rgba(255,48,48,.76) 78%,rgba(255,206,108,.96))!important;clip-path:polygon(0 15%,100% 46%,100% 54%,0 85%)!important;filter:drop-shadow(0 0 12px rgba(255,25,25,.95)) drop-shadow(0 0 28px rgba(255,88,42,.68))!important;mix-blend-mode:screen!important}
.mi13-drone-scan.scan{animation:mi13DroneScan168 6.2s ease-in-out both!important}
@keyframes mi13DroneScan168{0%{opacity:0;transform:scaleX(.14) rotate(-6deg)}12%{opacity:.92;transform:scaleX(.72) rotate(-2deg)}28%{opacity:1;transform:scaleX(1.04) rotate(2deg)}50%{opacity:.92;transform:scaleX(.98) rotate(-2deg)}74%{opacity:1;transform:scaleX(1.06) rotate(1deg)}90%{opacity:.86;transform:scaleX(.9) rotate(-1deg)}100%{opacity:0;transform:scaleX(.2) rotate(0deg)}}
.mi13-ellie-rescue[data-stage="landing"]{width:clamp(126px,13.8vw,196px)!important;max-height:68%!important}
@media (orientation:portrait) and (max-width:800px){.mi13-mini-broom{width:58px!important;top:26%!important}.mi13-mini-drone{width:86px!important;right:-44px!important;top:11%!important}.mi13-drone-scan{right:24px!important;top:16%!important;width:176px!important;height:88px!important}.mi13-ellie-rescue[data-stage="landing"]{width:clamp(106px,27vw,160px)!important;max-height:64%!important}}


/* ==========================================================
   1.4.72 · MI-13 · Ellies Reizpegel
   Treffer auf Ellie treiben den Pegel sichtbar hoch;
   Bildphasen hängen direkt an den Prozentstufen.
   ========================================================== */
.mi13-event-hud .mi13-patience{
  width:min(560px,72vw)!important;display:none;grid-template-columns:auto minmax(170px,1fr) auto!important;
  gap:10px!important;align-items:center!important;margin:0 auto!important;padding:9px 14px!important;
  border:1px solid rgba(235,198,120,.48)!important;border-radius:14px!important;
  background:linear-gradient(180deg,rgba(16,10,21,.92),rgba(31,15,38,.88))!important;
  box-shadow:0 10px 28px rgba(0,0,0,.38),0 0 18px rgba(158,75,219,.12)!important;
  backdrop-filter:blur(6px);
}
.mi13-event-hud .mi13-patience.show{display:grid!important}
.mi13-patience b{font-size:.65rem!important;letter-spacing:.12em!important;color:#f4e0ac!important;white-space:nowrap}
.mi13-patience em{height:12px!important;border:1px solid rgba(241,205,128,.45)!important;background:rgba(2,2,4,.72)!important;box-shadow:inset 0 1px 6px rgba(0,0,0,.7)!important}
.mi13-patience i{
  height:100%!important;border-radius:999px!important;
  background:linear-gradient(90deg,#8e57d9 0%,#c768df 46%,#e9b85e 100%)!important;
  box-shadow:0 0 10px rgba(186,93,226,.62)!important;transition:width .18s ease,filter .2s ease,background .2s ease!important;
}
.mi13-patience strong{min-width:44px;text-align:right;font-size:.72rem!important;color:#fff0cf!important}
.mi13-patience.warm i{background:linear-gradient(90deg,#9e5cdf,#d982d9 48%,#efbd64 100%)!important}
.mi13-patience.hot i{background:linear-gradient(90deg,#c66bcf,#e98283 48%,#ffb347 100%)!important;box-shadow:0 0 13px rgba(239,115,92,.65)!important}
.mi13-patience.critical i{background:linear-gradient(90deg,#e25f9e,#f56d61 48%,#ff9e36 100%)!important;box-shadow:0 0 15px rgba(255,87,66,.78)!important}
.mi13-patience.danger{animation:mi13IrritationDanger .48s ease-in-out infinite alternate}
.mi13-patience.danger i{filter:brightness(1.24) saturate(1.18)}
.mi13-patience.hit-pulse{animation:mi13IrritationHit .32s ease-out}
@keyframes mi13IrritationHit{0%{transform:scale(1)}38%{transform:scale(1.035);box-shadow:0 10px 28px rgba(0,0,0,.38),0 0 26px rgba(255,100,81,.65)}100%{transform:scale(1)}}
@keyframes mi13IrritationDanger{from{filter:none}to{filter:brightness(1.13) drop-shadow(0 0 7px rgba(255,78,61,.45))}}
@media (orientation:portrait) and (max-width:800px){
  .mi13-event-hud .mi13-patience{width:min(88vw,440px)!important;grid-template-columns:auto minmax(100px,1fr) auto!important;padding:7px 10px!important;gap:7px!important}
  .mi13-patience b{font-size:.53rem!important;letter-spacing:.08em!important}
  .mi13-patience em{height:10px!important}
  .mi13-patience strong{font-size:.62rem!important;min-width:38px}
}


/* ==========================================================
   1.4.72 · MI-13 Reizpegel-Korrektur
   Pegel gehört zu Ellie, steigt über die ganze Schutzphase,
   Traubenreste deutlich größer und langsamer sichtbar.
   ========================================================== */
.mi13-reiz-floating{
  position:absolute!important;z-index:58!important;display:none!important;
  width:min(520px,48vw)!important;grid-template-columns:auto minmax(155px,1fr) auto!important;
  gap:10px!important;align-items:center!important;padding:9px 14px!important;
  border:1px solid rgba(235,198,120,.52)!important;border-radius:14px!important;
  background:linear-gradient(180deg,rgba(16,10,21,.94),rgba(31,15,38,.91))!important;
  box-shadow:0 12px 28px rgba(0,0,0,.42),0 0 20px rgba(158,75,219,.18)!important;
  backdrop-filter:blur(6px)!important;transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
}
.mi13-reiz-floating.show{display:grid!important}
.mi13-reiz-floating.hit-pulse{animation:mi13ReizHit170 .34s ease-out!important}
@keyframes mi13ReizHit170{
  0%{transform:translate(-50%,-50%) scale(1)}
  42%{transform:translate(-50%,-50%) scale(1.045);box-shadow:0 12px 28px rgba(0,0,0,.42),0 0 30px rgba(255,100,81,.68)}
  100%{transform:translate(-50%,-50%) scale(1)}
}
.mi13-reiz-floating b{font-size:.66rem!important;letter-spacing:.12em!important;color:#f4e0ac!important;white-space:nowrap}
.mi13-reiz-floating em{height:12px!important;border:1px solid rgba(241,205,128,.45)!important;background:rgba(2,2,4,.72)!important;box-shadow:inset 0 1px 6px rgba(0,0,0,.7)!important}
.mi13-reiz-floating strong{min-width:44px;text-align:right;font-size:.72rem!important;color:#fff0cf!important}

/* Herunterfallende Matschtrauben endlich klar sichtbar. */
.mi13-falling-grape{
  z-index:50!important;width:52px!important;height:52px!important;
  filter:drop-shadow(0 6px 9px rgba(0,0,0,.58)) drop-shadow(0 0 8px rgba(146,47,220,.28))!important;
  animation:mi13FallingGrape170 1.05s cubic-bezier(.19,.70,.28,1) forwards!important;
}
.mi13-falling-grape i{width:22px!important;height:22px!important;box-shadow:inset -3px -3px 6px rgba(0,0,0,.3)!important}
.mi13-falling-grape i:nth-child(1){left:15px!important;top:0!important}
.mi13-falling-grape i:nth-child(2){left:2px!important;top:15px!important}
.mi13-falling-grape i:nth-child(3){left:28px!important;top:15px!important}
.mi13-falling-grape i:nth-child(4){left:15px!important;top:30px!important}
@keyframes mi13FallingGrape170{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1.02) rotate(0deg)}
  70%{opacity:1}
  100%{opacity:.10;transform:translate(calc(-50% + var(--grape-drift)),calc(-50% + var(--grape-fall))) scale(.72) rotate(300deg)}
}
.mi13-ground-platch{font-size:clamp(15px,1.55vw,22px)!important;z-index:51!important}

@media (orientation:portrait) and (max-width:800px){
  .mi13-reiz-floating{width:min(82vw,430px)!important;grid-template-columns:auto minmax(92px,1fr) auto!important;padding:7px 10px!important;gap:7px!important}
  .mi13-reiz-floating b{font-size:.54rem!important;letter-spacing:.08em!important}
  .mi13-reiz-floating em{height:10px!important}
  .mi13-reiz-floating strong{font-size:.62rem!important;min-width:38px!important}
  .mi13-falling-grape{width:44px!important;height:44px!important}
  .mi13-falling-grape i{width:19px!important;height:19px!important}
  .mi13-falling-grape i:nth-child(1){left:13px!important;top:0!important}
  .mi13-falling-grape i:nth-child(2){left:1px!important;top:13px!important}
  .mi13-falling-grape i:nth-child(3){left:25px!important;top:13px!important}
  .mi13-falling-grape i:nth-child(4){left:13px!important;top:25px!important}
}


/* ==========================================================
   1.4.72 LIVE · MI-13 Cameo-Hotfix
   Die Cameos sind absichtlich komplett vom alten Ambient-CSS
   entkoppelt. Kein !important auf animierten Transform-Werten.
   ========================================================== */
.mi13-cameo-layer{
  position:absolute!important;inset:0!important;z-index:58!important;
  overflow:hidden!important;pointer-events:none!important;
}

/* BESEN: im oberen Hintergrund klar sichtbar von links nach rechts. */
.mi13-cameo-layer > .mi13-mini-broom{
  position:absolute!important;left:0!important;top:20%!important;
  width:auto!important;height:128px!important;max-width:none!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.66))!important;
  transform:translate3d(-150px,0,0) rotate(88deg) scale(.95);
  animation:none!important;
}
.mi13-cameo-layer > .mi13-mini-broom.sweep{
  opacity:1!important;visibility:visible!important;
  animation:mi13BroomLive172 7.4s linear both!important;
}
@keyframes mi13BroomLive172{
  0%{transform:translate3d(-150px,0,0) rotate(86deg) scale(.92)}
  12%{transform:translate3d(5vw,4px,0) rotate(88deg) scale(.96)}
  35%{transform:translate3d(32vw,13px,0) rotate(90deg) scale(1)}
  62%{transform:translate3d(63vw,8px,0) rotate(93deg) scale(.98)}
  86%{transform:translate3d(91vw,1px,0) rotate(96deg) scale(.94)}
  100%{transform:translate3d(calc(100vw + 160px),-4px,0) rotate(98deg) scale(.9)}
}

/* DROHNE + SCAN als EIN gemeinsames Element. Dadurch kann der Scan
   nicht mehr irgendwo allein im Bild auftauchen. */
.mi13-cameo-layer .mi13-drone-cameo{
  position:absolute!important;right:1.5%!important;top:7%!important;
  width:154px!important;height:154px!important;pointer-events:none!important;
  opacity:0!important;visibility:hidden!important;
  transform:translate3d(205px,0,0) rotate(-5deg) scale(.92);
  animation:none!important;
}
.mi13-cameo-layer .mi13-drone-cameo.peek{
  opacity:1!important;visibility:visible!important;
  animation:mi13DroneLive172 7.4s ease-in-out both!important;
}
@keyframes mi13DroneLive172{
  0%{transform:translate3d(205px,0,0) rotate(-7deg) scale(.9)}
  17%{transform:translate3d(18px,0,0) rotate(-2deg) scale(1)}
  28%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  76%{transform:translate3d(0,5px,0) rotate(1deg) scale(1)}
  90%{transform:translate3d(35px,0,0) rotate(4deg) scale(.97)}
  100%{transform:translate3d(215px,-3px,0) rotate(8deg) scale(.9)}
}
.mi13-cameo-layer .mi13-drone-cameo .mi13-mini-drone{
  position:absolute!important;right:0!important;top:0!important;
  width:154px!important;height:154px!important;object-fit:contain!important;
  opacity:1!important;visibility:visible!important;pointer-events:none!important;
  transform:none!important;animation:none!important;
  filter:drop-shadow(0 0 12px rgba(255,70,70,.62)) drop-shadow(0 7px 12px rgba(0,0,0,.62))!important;
}
.mi13-cameo-layer .mi13-drone-cameo .mi13-drone-scan{
  position:absolute!important;right:76%!important;top:50%!important;
  width:min(31vw,350px)!important;height:150px!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transform:translateY(-50%) rotate(1deg)!important;transform-origin:100% 50%!important;
  background:linear-gradient(90deg,rgba(255,20,20,0) 0%,rgba(255,28,28,.12) 16%,rgba(255,42,42,.42) 54%,rgba(255,70,44,.82) 86%,rgba(255,214,122,.96) 100%)!important;
  clip-path:polygon(0 12%,100% 45%,100% 55%,0 88%)!important;
  filter:drop-shadow(0 0 11px rgba(255,35,35,.95)) drop-shadow(0 0 26px rgba(255,94,48,.72))!important;
  mix-blend-mode:screen!important;animation:none!important;
}
.mi13-cameo-layer .mi13-drone-cameo .mi13-drone-scan.scan{
  opacity:.96!important;visibility:visible!important;
}
.mi13-cameo-layer .mi13-drone-cameo .mi13-drone-scan::after{
  content:'';position:absolute;left:4%;right:0;top:50%;height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,48,48,.5),#ff3b2f 72%,#ffd493 100%);
  box-shadow:0 0 9px #ff3b2f,0 0 18px rgba(255,65,48,.95);
  transform:translateY(-50%);
}

@media (orientation:portrait) and (max-width:800px){
  .mi13-cameo-layer > .mi13-mini-broom{height:96px!important;top:22%!important}
  .mi13-cameo-layer .mi13-drone-cameo{width:110px!important;height:110px!important;right:1%!important;top:10%!important}
  .mi13-cameo-layer .mi13-drone-cameo .mi13-mini-drone{width:110px!important;height:110px!important}
  .mi13-cameo-layer .mi13-drone-cameo .mi13-drone-scan{right:74%!important;width:190px!important;height:92px!important}
}

/* ======================================================================
   v1.4.76 TEST · PIPIPAUSE – passives Comedy-Zwischenevent nach Level 10
   ====================================================================== */
.pipipause-layer{
  position:absolute; inset:0; z-index:5000; overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  background:#020305; color:#f7e7bd;
  transition:opacity .75s ease,visibility 0s linear .75s;
  font-family:inherit;
}
.pipipause-layer.show{opacity:1;visibility:visible;transition:opacity 1.8s cubic-bezier(.18,.72,.25,1);}
.pipipause-black,.pipipause-scene,.pipipause-curtain{position:absolute;inset:0;}
.pipipause-black{
  z-index:90;
  background:
    radial-gradient(circle at 50% 52%,#10151d 0,#030405 48%,#000 100%);
  opacity:0;
  transform:scale(1.075);
  filter:blur(8px);
  transition:opacity 1.9s cubic-bezier(.16,.74,.24,1),transform 2.4s ease,filter 1.9s ease;
}
.pipipause-layer.show .pipipause-black{opacity:1;transform:scale(1);filter:blur(0);}
.pipipause-layer.scene-visible .pipipause-black{opacity:0;transform:scale(.985);filter:blur(2px);transition-duration:.85s;}
.pipipause-bars::before,.pipipause-bars::after{content:"";position:absolute;left:0;right:0;height:8%;background:#000;z-index:3;box-shadow:0 0 30px #000;}
.pipipause-bars::before{top:0}.pipipause-bars::after{bottom:0}
.pipipause-tension{position:absolute;inset:0;overflow:hidden;opacity:.55;}
.pipipause-tension i{position:absolute;width:2px;height:42%;left:50%;top:30%;background:linear-gradient(transparent,rgba(255,205,103,.65),transparent);transform-origin:50% 50%;filter:blur(.4px);animation:pipiTension 4.2s ease-in-out infinite;}
.pipipause-tension i:nth-child(2){transform:rotate(45deg);animation-delay:-1.1s}.pipipause-tension i:nth-child(3){transform:rotate(90deg);animation-delay:-2.2s}.pipipause-tension i:nth-child(4){transform:rotate(135deg);animation-delay:-3.3s}
@keyframes pipiTension{0%,100%{opacity:.05;scale:.6}50%{opacity:.8;scale:1.45}}
.pipipause-loading{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:12;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;min-width:min(28vw,180px);opacity:0;transition:opacity .45s ease;text-align:center;}
.pipipause-layer.show .pipipause-loading{opacity:1;}
.pipipause-loading span{display:none !important;}
.pipipause-loading-bar{position:relative;width:min(28vw,180px);height:9px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(239,190,91,.42);box-shadow:0 0 16px rgba(255,190,79,.15),inset 0 0 18px rgba(0,0,0,.35);}
.pipipause-loading-bar i{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#5e3510,#f1bb58,#fff0a8);box-shadow:0 0 16px rgba(255,205,103,.45);}
.pipipause-countdown{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:13;font-size:clamp(18px,2.3vw,30px);font-weight:900;line-height:1;color:#fff1ba;text-shadow:0 2px 0 #754415,0 0 18px rgba(255,205,103,.28);opacity:0;text-align:center;width:72px;transform:translateY(-24px) scale(.78);transform-origin:center center;transition:opacity .18s ease,transform .18s ease;}
.pipipause-countdown.show{opacity:1;transform:translateY(-24px) scale(1);}
.pipipause-word{position:absolute;left:50%;top:50%;translate:-50% -50%;font-size:clamp(34px,7vw,104px);font-weight:800;letter-spacing:.025em;color:#f6d792;text-shadow:0 2px 0 #6b4211,0 0 24px rgba(255,190,79,.42),0 0 60px rgba(130,80,18,.55);opacity:0;transform:scale(.92);transition:opacity .12s ease,transform .22s ease;white-space:nowrap;}
.pipipause-word.show{opacity:1;transform:scale(1)}

.pipipause-scene{z-index:10;opacity:0;transform:scale(1.035);transition:opacity 1s ease,transform 9s ease;isolation:isolate;background:#a8b9c7;}
.pipipause-layer.scene-visible .pipipause-scene{opacity:1;transform:scale(1)}
.pipipause-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:0;filter:saturate(1.04) contrast(1.03) brightness(.96);}
.pipipause-sunwash{position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 14% 15%,rgba(255,236,184,.30),transparent 33%),linear-gradient(180deg,rgba(255,255,255,.02),rgba(54,36,13,.08));mix-blend-mode:screen;pointer-events:none;}
.pipipause-vignette{position:absolute;inset:-2%;z-index:80;box-shadow:inset 0 0 100px 24px rgba(5,8,12,.46);pointer-events:none;}
.pipipause-klo-glow{position:absolute;left:65%;top:58%;translate:-50% -50%;width:34%;height:66%;z-index:2;border-radius:46%;background:radial-gradient(ellipse,rgba(255,186,76,.16),rgba(255,186,76,0) 67%);filter:blur(15px);animation:pipiGlow 4.5s ease-in-out infinite;}
@keyframes pipiGlow{50%{opacity:.65;transform:scale(1.05)}}
.pipipause-klo{position:absolute;left:65%;top:53%;translate:-50% -50%;height:79%;width:auto;z-index:8;filter:drop-shadow(0 20px 20px rgba(17,12,8,.34)) drop-shadow(0 0 10px rgba(255,189,92,.10));transition:opacity .16s ease,filter .25s ease;}
.pipipause-klo.closed{opacity:0;height:80.5%;left:65.2%;top:53.2%;}
.pipipause-scene.occupied .pipipause-klo.open{opacity:0}.pipipause-scene.occupied .pipipause-klo.closed{opacity:1}
.pipipause-scene.shake .pipipause-klo.closed{animation:pipiKloShake .55s cubic-bezier(.36,.07,.19,.97) both}
@keyframes pipiKloShake{10%,90%{transform:translateX(-2px) rotate(-.12deg)}20%,80%{transform:translateX(4px) rotate(.16deg)}30%,50%,70%{transform:translateX(-6px) rotate(-.18deg)}40%,60%{transform:translateX(6px) rotate(.19deg)}}

.pipipause-raven{position:absolute;left:22.1%;top:40.8%;width:clamp(15px,1.7vw,24px);height:auto;z-index:18;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45));opacity:0;transform:translateY(-3px) rotate(-7deg);transition:opacity .5s ease,transform .5s ease;}
.pipipause-layer.scene-visible .pipipause-raven{opacity:1;transform:translateY(0) rotate(-7deg);animation:pipiRaven 5s ease-in-out 1s infinite;}
@keyframes pipiRaven{0%,78%,100%{transform:translateY(0) rotate(-3deg)}82%{transform:translateY(-3px) rotate(2deg)}86%{transform:translateY(0) rotate(-4deg)}}

.pipipause-airship{position:absolute;left:66.5%;top:13%;width:clamp(82px,10vw,160px);height:auto;z-index:2;opacity:0;filter:drop-shadow(0 10px 12px rgba(0,0,0,.24));transform-origin:center center;}
.pipipause-layer.scene-visible .pipipause-airship{opacity:1;animation:pipiAirshipApproach 28s linear .8s both;}
@keyframes pipiAirship{from{transform:translateX(0) translateY(0) rotate(-1deg)}50%{transform:translateX(74vw) translateY(8px) rotate(1deg)}to{transform:translateX(148vw) translateY(-4px) rotate(-1deg)}}

.pipipause-steam{position:absolute;left:76.3%;top:15%;width:95px;height:190px;z-index:16;pointer-events:none;opacity:.6;}
.pipipause-steam i{position:absolute;left:45%;bottom:0;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7),rgba(235,244,245,.12) 62%,transparent 70%);filter:blur(3px);opacity:0;animation:pipiSteam 3.7s ease-out infinite;}
.pipipause-steam i:nth-child(2){animation-delay:.8s;left:30%}.pipipause-steam i:nth-child(3){animation-delay:1.6s;left:55%}.pipipause-steam i:nth-child(4){animation-delay:2.4s;left:39%}
.pipipause-steam.burst i{animation-duration:1.15s;}
@keyframes pipiSteam{0%{opacity:0;transform:translate(0,0) scale(.6)}18%{opacity:.46}100%{opacity:0;transform:translate(16px,-150px) scale(2.4)}}

.pipipause-dust{position:absolute;left:65%;top:81%;width:300px;height:120px;translate:-50% -50%;z-index:19;pointer-events:none;opacity:0;}
.pipipause-dust.puff{opacity:1}.pipipause-dust i{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:rgba(217,184,125,.72);filter:blur(1.5px);opacity:0;}
.pipipause-dust.puff i{animation:pipiDust .9s ease-out both}.pipipause-dust i:nth-child(1){--dx:-115px;--dy:-25px}.pipipause-dust i:nth-child(2){--dx:-72px;--dy:-48px;animation-delay:.05s}.pipipause-dust i:nth-child(3){--dx:-30px;--dy:-66px;animation-delay:.08s}.pipipause-dust i:nth-child(4){--dx:20px;--dy:-52px;animation-delay:.02s}.pipipause-dust i:nth-child(5){--dx:72px;--dy:-34px;animation-delay:.07s}.pipipause-dust i:nth-child(6){--dx:112px;--dy:-20px;animation-delay:.04s}.pipipause-dust i:nth-child(7){--dx:48px;--dy:-75px;animation-delay:.1s}.pipipause-dust i:nth-child(8){--dx:-88px;--dy:-72px;animation-delay:.12s}
@keyframes pipiDust{0%{opacity:.85;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(3.2)}}

.pipipause-spark-field{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;}
.pipipause-spark-field i{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffd990;box-shadow:0 0 8px #ffd990;opacity:0;animation:pipiSpark var(--dur,4s) ease-in-out var(--delay,0s) infinite;}
@keyframes pipiSpark{0%,100%{opacity:0;transform:translateY(10px) scale(.3)}35%{opacity:.85}70%{opacity:.25;transform:translateY(-38px) scale(1.25)}}

.pipipause-ellie{position:absolute;height:auto;z-index:25;opacity:0;filter:drop-shadow(0 16px 13px rgba(0,0,0,.35));pointer-events:none;}
.pipipause-ellie.urgent{left:4%;bottom:-2%;height:71%;transform:translateX(-26px) scale(.96);transition:opacity .45s ease,transform 2.3s cubic-bezier(.28,.7,.2,1);}
.pipipause-ellie.urgent.show{opacity:1;transform:translateX(0) scale(.96)}
.pipipause-ellie.urgent.shuffle{transform:translateX(18vw) scale(.91);opacity:.9}
.pipipause-ellie.relief{left:35.5%;bottom:-1.4%;height:66%;transform:translateY(20px) scale(.97);transition:opacity .5s ease,transform .65s ease;filter:drop-shadow(0 10px 16px rgba(0,0,0,.24)) drop-shadow(0 0 14px rgba(255,214,125,.18));}
.pipipause-ellie.relief.show{opacity:1;transform:translateY(0) scale(.97);filter:drop-shadow(0 14px 18px rgba(0,0,0,.28)) drop-shadow(0 0 18px rgba(255,218,134,.38)) drop-shadow(0 0 30px rgba(167,116,255,.20));}

.pipipause-sera{position:absolute;height:auto;z-index:26;opacity:0;filter:drop-shadow(0 14px 12px rgba(0,0,0,.38));pointer-events:none;transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);}
.pipipause-sera.peek{left:8.5%;bottom:3.6%;width:5.4%;transform:translate(-4px,4px) rotate(-2deg) scale(.96);}
.pipipause-sera.peek.show{opacity:1;transform:translate(0,0) rotate(-2deg) scale(.96)}
.pipipause-question{display:none !important;}
.pipipause-question.show{opacity:1;transform:scale(1) rotate(8deg)}
.pipipause-sera.grape{display:none !important;}
.pipipause-sera.grape.show{display:none !important;opacity:0;transform:none;animation:none;}
@keyframes pipiSeraWait{0%,100%{translate:0 0}50%{translate:0 -5px}}

.pipipause-deer-track{display:none !important;}
.pipipause-deer-track img{width:100%;height:auto;filter:drop-shadow(0 12px 10px rgba(0,0,0,.28));}
.pipipause-deer-track.go{opacity:1;animation:pipiDeerCross 9.2s linear both;}
.pipipause-deer-track.go img{animation:pipiDeerBob .9s ease-in-out infinite;}
@keyframes pipiDeerCross{0%{transform:translateX(0)}38%{transform:translateX(52vw)}45%{transform:translateX(57vw)}58%{transform:translateX(61vw)}100%{transform:translateX(142vw)}}
@keyframes pipiDeerBob{0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 -4px;rotate:1deg}}

.pipipause-zarah-track{display:none !important;}
.pipipause-zarah-track img{display:block;width:100%;height:auto;}
.pipipause-zarah-track.approach{display:none !important;}
.pipipause-zarah-track.pause{display:none !important;}
.pipipause-zarah-track.leave{display:none !important;}

.pipipause-zarah-line,.pipipause-ellie-line{position:absolute;padding:.55em .85em;border-radius:18px;background:rgba(26,20,15,.91);border:1px solid rgba(239,190,91,.72);color:#f7e5bb;font-weight:750;font-size:clamp(14px,1.7vw,27px);line-height:1.12;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.34),0 0 18px rgba(239,190,91,.14);opacity:0;transform:translateY(8px) scale(.94);transition:opacity .25s ease,transform .25s ease;}
.pipipause-zarah-line{display:none !important;}
.pipipause-zarah-line.show{display:none !important;}
.pipipause-ellie-line{left:44%;bottom:21%;z-index:40;}
.pipipause-ellie-line.show{opacity:1;transform:translateY(0) scale(1)}


.pipipause-abort{position:absolute;right:18px;top:18px;z-index:160;pointer-events:auto;touch-action:manipulation;padding:.58em .95em;border-radius:999px;border:1px solid rgba(240,195,104,.75);background:rgba(20,14,10,.86);color:#f7e2ae;font-weight:800;font-size:clamp(12px,1.5vw,18px);box-shadow:0 10px 24px rgba(0,0,0,.34),0 0 18px rgba(239,190,91,.14);cursor:pointer;opacity:0;transform:translateY(-10px);transition:opacity .25s ease,transform .25s ease,background .2s ease;}
.pipipause-layer.scene-visible > .pipipause-abort{opacity:1;transform:translateY(0);}
.pipipause-abort:hover{background:rgba(42,28,16,.92)}
.pipipause-flies{position:absolute;left:59%;top:56%;width:18%;height:18%;z-index:20;pointer-events:none;opacity:.65;}
.pipipause-flies i{position:absolute;width:7px;height:7px;border-radius:50%;background:#2b2417;box-shadow:0 0 0 1px rgba(255,225,150,.3),0 0 8px rgba(255,207,103,.12);animation:pipiFly var(--dur,3.2s) ease-in-out var(--delay,0s) infinite;}
.pipipause-flies i:nth-child(1){left:20%;top:70%;--dur:2.7s;--delay:-1.2s}
.pipipause-flies i:nth-child(2){left:42%;top:30%;--dur:3.4s;--delay:-.4s}
.pipipause-flies i:nth-child(3){left:60%;top:56%;--dur:2.9s;--delay:-2.2s}
.pipipause-flies i:nth-child(4){left:78%;top:18%;--dur:3.5s;--delay:-.8s}
.pipipause-flies i:nth-child(5){left:50%;top:84%;--dur:3.1s;--delay:-1.8s}
.pipipause-flies i:nth-child(6){left:85%;top:72%;--dur:2.6s;--delay:-1.4s}
.pipipause-fireworks{position:absolute;inset:0;z-index:32;pointer-events:none;overflow:hidden;}
.pipipause-fireworks b{position:absolute;width:8px;height:8px;border-radius:50%;background:#ffd888;box-shadow:0 0 12px rgba(255,216,136,.7);animation:pipiFirework .95s ease-out forwards;}
.pipipause-ellie.relief.show{opacity:1;transform:translateY(0) scale(.97);animation:pipiReliefBob 2.4s ease-in-out .4s infinite,pipiReliefGlow 2.8s ease-in-out .2s infinite;}

.pipipause-curtain{z-index:120;background:#000;opacity:0;pointer-events:none;transition:opacity .8s ease;}
.pipipause-layer.fade-out .pipipause-curtain{opacity:1}

@media (max-width:900px){
  .pipipause-bg{object-position:60% center}
  .pipipause-klo{left:61%;top:49%;height:61%}.pipipause-klo.closed{left:61%;top:49%;height:62%}
  .pipipause-klo-glow{left:61%;top:52%;width:48%;height:58%}
  .pipipause-raven{left:23%;top:44%;width:16px}
  .pipipause-steam{left:74%;top:20%;transform:scale(.72)}
  .pipipause-ellie.urgent{height:52%;left:-1%;bottom:-1%}.pipipause-ellie.relief{height:47%;left:31%;bottom:-1%}
  .pipipause-ellie.urgent.shuffle{transform:translateX(14vw) scale(.86)}
  .pipipause-sera.peek{width:7.2%;left:7.4%;bottom:5.2%}
  .pipipause-sera.grape{display:none !important}
  .pipipause-question{display:none !important;}
  .pipipause-zarah-track{width:46%;bottom:-2%}
  .pipipause-deer-track{width:25%;bottom:15%}
  .pipipause-zarah-line{display:none !important;}
  .pipipause-ellie-line{left:40%;bottom:17%;font-size:14px}
  .pipipause-airship{width:20%;left:66%;top:12%}
}
@media (orientation:portrait) and (max-width:700px){
  .pipipause-bg{object-position:64% center}
  .pipipause-klo{left:58%;top:43%;height:52%}.pipipause-klo.closed{left:58%;top:43%;height:53%}
  .pipipause-klo-glow{left:58%;top:45%;width:64%;height:48%}
  .pipipause-raven{left:24%;top:46%;width:15px}
  .pipipause-steam{left:75%;top:19%;transform:scale(.58)}
  .pipipause-ellie.urgent{height:42%;left:-7%;bottom:-1%}.pipipause-ellie.relief{height:38%;left:29%;bottom:-1%}
  .pipipause-sera.peek{width:7.6%;left:6.6%;bottom:5.8%}
  .pipipause-sera.grape{display:none !important}
  .pipipause-question{display:none !important;}
  .pipipause-deer-track{width:30%;bottom:21%}
  .pipipause-zarah-track{width:58%;bottom:-1%}
  .pipipause-zarah-line{display:none !important;}
  .pipipause-ellie-line{left:37%;bottom:15%;font-size:13px}
  .pipipause-airship{width:24%;left:66%;top:11%}
}

@keyframes pipiLoad{0%{width:0%}20%{width:14%}38%{width:36%}62%{width:63%}78%{width:81%}100%{width:100%}}
@keyframes pipiAirship{0%{transform:translateX(118vw) translateY(0)}50%{transform:translateX(48vw) translateY(10px)}100%{transform:translateX(-52vw) translateY(-4px)}}
@keyframes pipiFly{0%,100%{transform:translate(0,0) scale(.8);opacity:.15}25%{transform:translate(14px,-10px) scale(1);opacity:.85}50%{transform:translate(-8px,-18px) scale(.7);opacity:.45}75%{transform:translate(10px,6px) scale(.95);opacity:.8}}
@keyframes pipiFirework{0%{transform:translate(0,0) scale(.4);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.1);opacity:0}}
@keyframes pipiReliefBob{0%,100%{transform:translateY(0) scale(.97)}50%{transform:translateY(-6px) scale(.975)}}

@media (prefers-reduced-motion:reduce){
  .pipipause-airship,.pipipause-raven,.pipipause-steam i,.pipipause-spark-field i,.pipipause-sera.grape.show,.pipipause-deer-track.go img{animation:none!important}
}
@keyframes pipiAirshipApproach{
  0%{opacity:0;transform:translate3d(0,8px,0) scale(.42);}
  10%{opacity:.28;transform:translate3d(-1vw,5px,0) scale(.46);}
  26%{opacity:.68;transform:translate3d(-7vw,1px,0) scale(.60);}
  42%{opacity:.92;transform:translate3d(-16vw,-3px,0) scale(.76);}
  62%{opacity:1;transform:translate3d(-33vw,-7px,0) scale(.94);}
  82%{opacity:1;transform:translate3d(-55vw,-10px,0) scale(1.07);}
  100%{opacity:.96;transform:translate3d(-82vw,-12px,0) scale(1.16);}
}


.pipipause-ellie-line::before{
  content:"";position:absolute;left:-10px;bottom:10px;width:18px;height:18px;
  background:rgba(26,20,15,.91);border-left:1px solid rgba(239,190,91,.72);
  border-bottom:1px solid rgba(239,190,91,.72);transform:rotate(45deg);
}

/* v1.4.82: exact user-supplied Sera, unchanged, on the left chest */
.pipipause-sera-crate{
  position:absolute;
  left:6.0%;
  bottom:18.0%;
  width:8.05%;
  max-width:139px;
  height:auto;
  z-index:27;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.34));
  transform:translateY(8px) scale(.98);
  transition:opacity .32s ease,transform .38s ease;
}
.pipipause-sera-crate.show{opacity:1;transform:translateY(0) scale(.98);}
@media(max-width:900px){.pipipause-sera-crate{left:4.6%;bottom:17.0%;width:10.9%;max-width:109px;}}
@media(max-width:560px){.pipipause-sera-crate{left:3.8%;bottom:16.0%;width:12.8%;max-width:91px;}}

.pipipause-raven{display:none !important;}


/* v1.4.86 – neuer Sera-Peek aus Nutzerbild, unverändert eingebunden */
.pipipause-sera.peek{
  left:-2.5% !important;
  top:3.0% !important;
  bottom:auto !important;
  width:31% !important;
  max-width:500px !important;
  height:auto !important;
  z-index:29 !important;
  opacity:0;
  pointer-events:none;
  transform:translateX(-18%) scale(.88) rotate(-2deg) !important;
  transform-origin:left center;
  filter:drop-shadow(0 14px 14px rgba(0,0,0,.40)) brightness(1.05);
  transition:opacity .24s ease, transform .28s cubic-bezier(.18,.86,.24,1.16), filter .28s ease;
}
.pipipause-sera.peek.show{
  opacity:1 !important;
  transform:translateX(0) scale(1) rotate(0deg) !important;
  filter:drop-shadow(0 16px 16px rgba(0,0,0,.42)) brightness(1);
}
@media(max-width:900px){
  .pipipause-sera.peek{
    left:-5% !important;
    top:7% !important;
    width:43% !important;
    max-width:380px !important;
  }
}
@media(max-width:560px){
  .pipipause-sera.peek{
    left:-8% !important;
    top:12% !important;
    width:55% !important;
    max-width:300px !important;
  }
}

.pipipause-ellie-line{display:none !important;}

@keyframes pipiReliefGlow{
  0%,100%{filter:drop-shadow(0 14px 18px rgba(0,0,0,.28)) drop-shadow(0 0 12px rgba(255,218,134,.22)) drop-shadow(0 0 22px rgba(167,116,255,.12));}
  50%{filter:drop-shadow(0 16px 20px rgba(0,0,0,.30)) drop-shadow(0 0 20px rgba(255,230,162,.55)) drop-shadow(0 0 36px rgba(167,116,255,.32));}
}

.pipipause-black,.pipipause-scene,.pipipause-curtain{pointer-events:none;}

.pipipause-layer.scene-visible > .pipipause-abort{pointer-events:auto;}


/* ==========================================================
   v1.4.92 · UX PATCH
   - klarer Lebensverlust / GAME OVER
   - lokaler Suspend-Save
   - Handy-Landscape: Musik + Vollbild getrennt
   ========================================================== */
.life-event-splash{
  position:absolute;z-index:210;left:50%;top:50%;width:min(82vw,680px);
  transform:translate(-50%,-50%) scale(.84);opacity:0;visibility:hidden;pointer-events:none;
  padding:22px 30px 24px;text-align:center;border-radius:28px;
  border:2px solid rgba(255,196,112,.72);
  background:radial-gradient(circle at 50% 18%,rgba(255,232,175,.16),transparent 36%),linear-gradient(135deg,rgba(57,10,23,.97),rgba(112,18,34,.96) 48%,rgba(20,6,12,.98));
  box-shadow:0 24px 60px rgba(0,0,0,.62),0 0 42px rgba(255,75,60,.24),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(8px);transition:opacity .16s ease,transform .2s ease;
}
.life-event-splash.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.life-event-splash strong{display:block;font:950 clamp(1.7rem,5.6vw,4.4rem)/.95 Georgia,"Times New Roman",serif;letter-spacing:.055em;color:#fff1cf;text-shadow:0 4px 18px rgba(0,0,0,.78),0 0 20px rgba(255,181,84,.22)}
.life-event-splash span{display:block;margin-top:10px;font-weight:900;font-size:clamp(.95rem,2.2vw,1.45rem);color:#ffd6c1;letter-spacing:.04em;text-shadow:0 3px 12px rgba(0,0,0,.78)}
.life-event-splash.game-over{border-color:rgba(255,192,91,.92);background:radial-gradient(circle at 50% 15%,rgba(255,225,146,.19),transparent 38%),linear-gradient(135deg,rgba(42,5,11,.99),rgba(128,13,23,.98) 48%,rgba(16,3,8,.99));box-shadow:0 26px 72px rgba(0,0,0,.72),0 0 54px rgba(255,74,49,.32),0 0 22px rgba(255,194,75,.18)}
.life-event-splash.game-over strong{font-size:clamp(2.8rem,9vw,7rem);color:#fff0b8;-webkit-text-stroke:1px rgba(86,25,9,.35)}
.life-event-splash.game-over span{font-size:clamp(1.05rem,2.8vw,1.8rem);color:#fff0dd}
@media(max-width:800px){
  .life-event-splash{width:min(88vw,520px);padding:17px 15px 19px;border-radius:22px}
  .life-event-splash strong{font-size:clamp(1.55rem,8.5vw,3rem)}
  .life-event-splash.game-over strong{font-size:clamp(2.65rem,15vw,5.5rem)}
}

.save-exit-btn{border-color:rgba(111,205,169,.52)!important;background:linear-gradient(180deg,rgba(22,68,55,.84),rgba(10,34,30,.9))!important;color:#dbfff1!important}
.pause-back-btn{border-color:rgba(226,184,98,.34)!important}

.suspend-start-card{
  position:absolute;z-index:45;left:50%;top:57.7%;transform:translate(-50%,-50%);
  width:min(520px,54%);padding:10px 14px 12px;border-radius:14px;text-align:center;
  border:1px solid rgba(236,193,105,.72);background:rgba(7,10,14,.94);
  box-shadow:0 14px 38px rgba(0,0,0,.62),0 0 22px rgba(221,163,68,.15);
  color:#ead6aa;font-family:Georgia,"Times New Roman",serif;
}
.suspend-start-card[hidden]{display:none!important}
.suspend-start-card>span{display:block;color:#d9bc83;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.suspend-start-card>strong{display:block;margin-top:3px;color:#fff0c4;font-size:1.08rem}
.suspend-start-card>small{display:block;margin:4px auto 8px;max-width:440px;color:#c8bda7;font:600 .68rem/1.3 system-ui,sans-serif}
.suspend-start-actions{display:grid;grid-template-columns:1.35fr .8fr;gap:8px}
.suspend-start-actions button{min-height:34px;padding:7px 10px!important;font-size:.78rem!important}
@media(orientation:portrait){
  .suspend-start-card{top:57.0%;width:82%;padding:9px 10px 10px}
  .suspend-start-card>small{font-size:.61rem}
  .suspend-start-actions button{font-size:.7rem!important;min-height:31px}
}

/* v1.4.92 · Smartphone-Querformat FINAL
   Der große MUSIK-Schalter ist Teil der Desktop-Mastergrafik. Deshalb wird
   seine Bildfläche im Landscape-Mobile vollständig überdeckt und durch eine
   gemeinsame Musik+Vollbild-Grafik ersetzt. Die Buttons selbst sind nur
   transparente Hotspots. Desktop und Portrait bleiben unangetastet. */
@media(orientation:landscape) and (max-width:1100px) and (max-height:650px){
  .master-start-stage::before{
    content:"";position:absolute;z-index:8;pointer-events:none;
    left:66.90%;top:81.85%;width:13.65%;height:9.05%;
    background:url('assets/start-btn-music-fullscreen-landscape.webp?v=1.4.93') center/100% 100% no-repeat;
  }
  .master-music{
    left:67.02%!important;top:81.85%!important;width:9.10%!important;height:9.05%!important;
    display:block!important;visibility:visible!important;opacity:1!important;z-index:36!important;
    border-radius:10px!important;background:none!important;box-shadow:none!important;filter:none!important;
  }
  #startFullscreenBtn.master-fullscreen{
    left:76.30%!important;top:81.85%!important;width:4.13%!important;height:9.05%!important;
    display:block!important;visibility:visible!important;opacity:1!important;z-index:37!important;
    border-radius:10px!important;background:none!important;box-shadow:none!important;filter:none!important;
  }
  .master-music:active,.master-music:hover,.master-music:focus,
  #startFullscreenBtn.master-fullscreen:active,#startFullscreenBtn.master-fullscreen:hover,#startFullscreenBtn.master-fullscreen:focus{
    background:transparent!important;box-shadow:none!important;filter:none!important;
  }
  .master-music-panel{right:19.1%!important;bottom:17.2%!important;width:min(310px,32%)!important}
}


/* ==========================================================
   v1.4.94 · Mobile/Tablet Gameplay Gate
   Startscreen darf Hochformat bleiben. Das eigentliche Spiel
   läuft auf Touch-Mobilgeräten nur im Querformat.
   ========================================================== */
.mobile-rotate-gate{
  position:absolute;
  inset:0;
  z-index:1000;
  display:none;
  place-items:center;
  padding:24px;
  background:rgba(3,5,8,.94);
  backdrop-filter:blur(9px);
}
.mobile-rotate-gate.show{display:grid}
.mobile-rotate-card{
  width:min(430px,88vw);
  padding:24px 22px;
  text-align:center;
  border:1px solid rgba(224,181,96,.48);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(23,22,19,.98),rgba(7,9,10,.99));
  box-shadow:inset 0 0 0 3px rgba(92,55,24,.10);
}
.mobile-rotate-icon{
  margin:0 auto 8px;
  font-size:3rem;
  line-height:1;
  color:#efc56f;
}
.mobile-rotate-card strong{
  display:block;
  margin-bottom:7px;
  font:900 clamp(1.15rem,4vw,1.55rem) Georgia,serif;
  color:#ffe4a4;
}
.mobile-rotate-card span{
  display:block;
  color:#c9c2b7;
  font-size:.86rem;
  line-height:1.45;
}
@media (hover:hover) and (pointer:fine){
  .mobile-rotate-gate{display:none!important}
}

/* ==========================================================
   v1.4.94 · Statistik / Endscreen auf Handy & Tablet Landscape
   Der Overlay scrollt, nicht die innere Karte.
   ========================================================== */
@media (orientation:landscape) and (pointer:coarse){
  #statsScreen,#endScreen{
    box-sizing:border-box;
    align-items:flex-start!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
    padding-top:max(8px,env(safe-area-inset-top))!important;
    padding-bottom:calc(86px + env(safe-area-inset-bottom))!important;
  }
  #statsScreen>.stats-card,
  #endScreen>.card{
    flex:0 0 auto;
    max-height:none!important;
    overflow:visible!important;
    margin:0 auto 30px!important;
  }
  #statsScreen>.stats-card{
    width:min(820px,96vw)!important;
    padding:18px 18px 24px!important;
  }
  .stats-actions{padding-bottom:16px}
}
@media (orientation:landscape) and (max-height:760px) and (max-width:1400px){
  #statsScreen{
    align-items:flex-start!important;
    overflow-y:auto!important;
    padding-bottom:calc(82px + env(safe-area-inset-bottom))!important;
  }
  #statsScreen>.stats-card{
    max-height:none!important;
    overflow:visible!important;
    margin:0 auto 28px!important;
  }
}

/* v1.4.95 – Rekordmeldungen im laufenden Spiel */
.message-entry.personal-record-msg{border-left-color:#e2bd62;background:linear-gradient(90deg,rgba(46,35,15,.96),rgba(20,24,31,.91));color:#fff1b5;font-weight:950}
.message-entry.world-record-msg{border-left-color:#79d8ff;background:linear-gradient(90deg,rgba(31,25,12,.97),rgba(17,39,52,.94));color:#fff0ad;font-weight:1000;box-shadow:inset 0 0 0 1px rgba(121,216,255,.13)}


/* v1.4.97 – deutlicher Nexus-Questabschluss */
.life-event-splash.quest-complete{
  border-color:rgba(217,176,86,.82);
  background:
    radial-gradient(circle at 50% 16%,rgba(71,132,171,.16),transparent 38%),
    linear-gradient(135deg,rgba(8,12,17,.985),rgba(18,25,31,.985) 52%,rgba(8,10,14,.99));
  box-shadow:0 24px 64px rgba(0,0,0,.66),0 0 30px rgba(69,143,184,.16),inset 0 0 0 1px rgba(255,221,145,.08);
}
.life-event-splash.quest-complete strong{
  color:#f3d99b;
  font-size:clamp(2rem,6.4vw,4.8rem);
  letter-spacing:.08em;
  text-shadow:0 4px 18px rgba(0,0,0,.76),0 0 15px rgba(75,156,200,.16);
}
.life-event-splash.quest-complete span{
  color:#c7def0;
  font-size:clamp(1rem,2.35vw,1.55rem);
  letter-spacing:.045em;
}
.life-event-splash.quest-complete::after{
  content:'✦';
  display:block;
  margin-top:10px;
  color:#d7b65e;
  font-size:1.15rem;
  opacity:.92;
}

/* 1.4.99 · 7R-Funkenmarkt-Inventar */
.market-inventory-overlay{background:rgba(4,6,10,.72);z-index:96}
.market-inventory-card{width:min(92vw,620px);max-height:min(88vh,760px);overflow:auto;padding:24px}
.market-inventory-lead{margin:6px 0 16px;color:#9eaaaf;line-height:1.55}
.market-item-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:14px;border:1px solid rgba(231,194,114,.28);border-radius:16px;background:rgba(8,12,17,.72)}
.market-item-icon{width:64px;height:64px;display:grid;place-items:center;border:1px solid rgba(231,194,114,.48);border-radius:50%;background:rgba(8,10,14,.9);font-size:32px;box-shadow:inset 0 0 22px rgba(67,157,207,.08)}
.market-item-copy strong{display:block;color:#f1deb8;font:800 1.05rem Georgia,serif}.market-item-copy span{display:block;margin-top:4px;color:#d7b76d;font-weight:900}.market-item-copy small{display:block;margin-top:5px;color:#85919b;line-height:1.45}
.market-item-state{margin:12px 0;padding:10px 12px;border-left:2px solid #4aa9db;background:rgba(28,92,125,.08);color:#a9bdc8;font-size:.8rem;line-height:1.45}
.market-item-actions{margin-top:12px}.market-item-note{margin:14px 0 0;color:#77838d;font-size:.72rem;line-height:1.55}
.market-shield-hud{position:absolute;z-index:28;right:12px;top:86px;display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(231,194,114,.5);border-radius:999px;background:rgba(7,11,15,.84);color:#efd17f;font-size:.67rem;font-weight:900;box-shadow:0 5px 18px rgba(0,0,0,.28)}
.market-shield-hud[hidden]{display:none!important}
@media(max-width:760px){.market-inventory-card{width:min(96vw,620px);padding:18px}.market-item-row{grid-template-columns:54px 1fr}.market-item-icon{width:48px;height:48px;font-size:25px}.market-shield-hud{right:8px;top:70px;font-size:.58rem;padding:5px 7px}.market-shield-hud span{display:none}}
@media(orientation:landscape) and (max-height:520px){.market-inventory-card{max-height:94vh;padding:14px}.market-item-row{padding:9px}.market-item-note{font-size:.62rem}.market-item-actions .primary,.market-item-actions .secondary{padding:8px 11px!important;min-height:34px!important;font-size:.7rem!important}}


/* v1.5.0 · direkte 7R-Nexus-Itemleiste */
.nexus-itembar{position:absolute;z-index:58;left:12px;bottom:12px;display:flex;gap:8px;align-items:flex-end;pointer-events:auto}
.nexus-itembar[hidden]{display:none!important}
.nexus-item-btn{position:relative;width:62px;height:62px;border:1px solid rgba(232,196,112,.68);border-radius:16px;background:linear-gradient(165deg,rgba(10,14,20,.96),rgba(16,24,31,.94));box-shadow:0 7px 22px rgba(0,0,0,.38),inset 0 0 0 1px rgba(87,182,221,.12);color:#f4d989;display:grid;grid-template-columns:1fr;place-items:center;cursor:pointer;transition:transform .14s,border-color .14s,box-shadow .14s,opacity .14s}
.nexus-item-btn:hover:not(:disabled){transform:translateY(-2px);border-color:#f0d38a;box-shadow:0 9px 26px rgba(0,0,0,.42),0 0 16px rgba(64,167,211,.18)}
.nexus-item-btn:disabled{cursor:default;opacity:.6}
.nexus-item-btn.active{border-color:rgba(92,205,245,.95);box-shadow:0 0 0 1px rgba(92,205,245,.25),0 0 20px rgba(72,186,230,.34),0 7px 22px rgba(0,0,0,.4)}
.nexus-item-btn.empty{opacity:.42}
.nexus-item-icon{font-size:26px;line-height:1;margin-top:3px}
.nexus-item-btn b{position:absolute;right:-5px;top:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:#0b1117;border:1px solid rgba(239,207,123,.85);color:#ffe39a;font-size:.72rem;box-shadow:0 3px 10px rgba(0,0,0,.45)}
.nexus-item-btn small{font-size:.52rem;letter-spacing:.04em;text-transform:uppercase;color:#d6c58f;margin-top:-4px}
@media(max-width:760px){.nexus-itembar{left:8px;bottom:max(8px,env(safe-area-inset-bottom))}.nexus-item-btn{width:54px;height:54px;border-radius:14px}.nexus-item-icon{font-size:23px}.nexus-item-btn b{min-width:22px;height:22px;font-size:.66rem}.nexus-item-btn small{font-size:.46rem}}
@media(orientation:landscape) and (max-height:520px){.nexus-itembar{left:7px;bottom:7px}.nexus-item-btn{width:48px;height:48px;border-radius:12px}.nexus-item-icon{font-size:20px}.nexus-item-btn small{display:none}.nexus-item-btn b{right:-4px;top:-5px;min-width:20px;height:20px;font-size:.6rem}}

/* 1.5.1 – Nexus-Itemleiste mittig unten */
.market-shield-hud{display:none!important}
.nexus-itembar{left:50%!important;right:auto!important;bottom:max(12px,env(safe-area-inset-bottom))!important;transform:translateX(-50%);justify-content:center;align-items:flex-end}
.nexus-item-btn.active::after{content:'AKTIV';position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);padding:2px 5px;border-radius:999px;background:#102731;border:1px solid rgba(94,209,245,.72);color:#9eeaff;font-size:.43rem;font-weight:900;letter-spacing:.07em;box-shadow:0 2px 8px rgba(0,0,0,.45)}
@media(max-width:760px){.nexus-itembar{left:50%!important;bottom:max(10px,env(safe-area-inset-bottom))!important}.nexus-item-btn.active::after{bottom:-10px}}
@media(orientation:landscape) and (max-height:520px){.nexus-itembar{left:50%!important;bottom:max(8px,env(safe-area-inset-bottom))!important}}


/* 1.5.2 – Nexus-Schild sichtbar + kompakte Meldungen + Desktop-Itembar-Fix */
.sera-shield.nexus-market::before{
  border-color:rgba(102,218,255,.96);
  box-shadow:0 0 20px rgba(78,196,255,.95),inset 0 0 20px rgba(112,214,255,.36),0 0 42px rgba(244,205,105,.32);
}
.sera-shield.nexus-market::after{border-color:rgba(255,224,136,.96)}
.sera-shield.nexus-market b{color:#fff0a6;text-shadow:0 0 9px #fff,0 0 20px #67d9ff}
.message-entry.nexus-item-msg{
  font-size:.50rem!important;
  line-height:1.05!important;
  padding:4px 7px 4px 9px!important;
  border-radius:8px!important;
  border-left-width:2px!important;
  max-width:min(72vw,360px)!important;
  letter-spacing:.01em!important;
}
@media(max-width:760px){
  .message-entry.nexus-item-msg{font-size:.46rem!important;padding:3px 6px 3px 8px!important;max-width:76vw!important}
}
.nexus-itembar,.nexus-item-btn{touch-action:manipulation}

.game-shell.highspeed .sera-shield.nexus-market,
.game-shell.chaos-night .sera-shield.nexus-market{opacity:1!important;visibility:visible!important}