:root{color-scheme:dark;--ink:#10181b;--panel:#192225;--muted:#8c9a9d;--lime:#c5f56e;--cyan:#81e2eb}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:#eef1ee;font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:4px}.top{height:83px;display:flex;align-items:center;padding:0 36px;border-bottom:1px solid #ffffff10;gap:26px}.brand{color:inherit;text-decoration:none;font-size:25px;font-weight:800;letter-spacing:3px;display:flex;align-items:center;gap:13px}.logo{color:var(--lime);font-size:36px;line-height:1;transform:rotate(-15deg)}.lab{font-size:10px;letter-spacing:2px;color:var(--muted);margin-left:18px;font-weight:500}.build{margin-left:auto;font-size:10px;letter-spacing:1.5px;color:var(--muted);display:flex;gap:10px;align-items:center}.build i,.music-tag i{width:6px;height:6px;border-radius:50%;background:var(--lime)}.quiet{background:none;border:0;color:#d7dfdf;padding:9px 12px;font-size:12px}.quiet span{font-size:10px;margin-left:8px;padding:2px 5px;border:1px solid #ffffff26;border-radius:4px;color:var(--muted)}main{display:grid;grid-template-columns:265px minmax(0,1fr);max-width:1700px;margin:auto;min-height:calc(100vh - 83px)}.sidebar{padding:37px 27px;border-right:1px solid #ffffff10}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:var(--muted)}h1{font-size:66px;letter-spacing:-4px;line-height:1;margin:15px 0 18px;font-weight:650}.accent{color:var(--cyan)}.intro{color:var(--muted);font-size:13px}.weapon-art{height:163px;position:relative;overflow:hidden;margin:14px 0 24px}.orbit{height:120px;width:120px;border:1px solid #81e2eb24;border-radius:50%;position:absolute;top:15px;left:45px;box-shadow:0 0 55px #81e2eb0a}.orbit:after{content:'';position:absolute;inset:15px;border:1px dashed #81e2eb20;border-radius:50%}.gun{position:absolute;top:58px;left:24px;width:166px;height:38px;background:linear-gradient(#b7d8d7,#426366);border-radius:12px 20px 8px 5px;transform:rotate(-25deg);box-shadow:0 10px 22px #0008}.gun b{position:absolute;left:20px;top:29px;width:25px;height:37px;background:#536d70;transform:skew(-17deg);border-radius:0 0 7px 7px}.gun i{position:absolute;left:88px;top:5px;width:63px;height:8px;background:var(--cyan);box-shadow:0 0 20px #81e2eb77;border-radius:2px}.gun span{position:absolute;left:160px;top:7px;width:20px;height:25px;background:#27383e;border:5px solid #789496;border-radius:3px}.weapon-caption{position:absolute;bottom:0;left:0;color:#74878a;font-size:9px;letter-spacing:1.6px}.spec{display:flex;flex-direction:column;margin-bottom:15px}.spec span{color:var(--muted);font-size:11px}.spec strong{font-weight:500;font-size:13px}.sound-controls{display:flex;gap:12px;border-top:1px solid #ffffff12;padding-top:22px;margin-top:23px}.sound-controls label,.volume{font-size:9px;letter-spacing:1.6px;color:var(--muted)}select,input[type=number]{display:block;margin-top:8px;background:#253034;border:0;color:#e6efec;border-radius:6px;padding:9px;width:107px}input[type=number]{width:70px}.sound-controls label:last-child{position:relative}.sound-controls label:last-child span{position:absolute;right:7px;bottom:11px;font-size:8px;pointer-events:none}input[type=number]{appearance:textfield;padding-right:24px}input::-webkit-inner-spin-button{appearance:none}.toggle{display:flex;align-items:center;gap:10px;color:#ced8d6;font-size:12px;margin:22px 0}.toggle input{accent-color:var(--lime)}.volume input{display:block;width:100%;accent-color:var(--cyan);height:4px;margin-top:15px}.roadmap{border-top:1px solid #ffffff12;margin-top:30px;padding-top:20px;color:var(--muted)}.roadmap>span{font-size:9px;letter-spacing:1.6px}.roadmap p{font-size:12px}.roadmap small{font-size:10px;color:#667a7e}.play{padding:30px 32px 20px;min-width:0}.arena-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}h2{font-size:25px;font-weight:550;letter-spacing:-.8px;margin:7px 0 0}.music-tag{display:flex;align-items:center;gap:12px;border:1px solid #ffffff18;padding:10px 14px;border-radius:30px;font-size:12px}.music-tag span:last-child{border-left:1px solid #ffffff22;padding-left:12px;color:var(--muted);font-size:10px}#viewport{position:relative;height:clamp(440px,61vh,720px);overflow:hidden;border-radius:12px;background:#435455;outline:0;touch-action:none;cursor:crosshair}#viewport>canvas{position:absolute;inset:0;width:100%;height:100%}.hud{position:absolute;left:24px;right:24px;top:20px;display:flex;gap:32px;z-index:2;pointer-events:none}.stat{color:#eef5e8;text-shadow:0 1px 4px #0008}.stat small{display:block;letter-spacing:1.5px;font-size:8px}.stat b{font-size:25px;font-weight:600;font-variant-numeric:tabular-nums}.best{margin-left:auto;text-align:right}.bottomhud{position:absolute;left:24px;right:24px;bottom:20px;display:flex;gap:24px;align-items:end;justify-content:space-between;z-index:2;pointer-events:none}.meter{width:150px}.meter>span{display:flex;justify-content:space-between;color:#dce5dc;font-size:9px;letter-spacing:1px}.meter>div{margin-top:7px;height:5px;background:#10232288;border-radius:4px;overflow:hidden}.meter i{display:block;height:100%;width:100%;background:var(--lime);transition:width .08s}.energy i{background:var(--cyan)}.note{text-align:center}.note small{display:block;font-size:8px;letter-spacing:1.5px;color:#d4ded3}.note b{display:block;font-size:24px;line-height:1.3;font-weight:500}.note span{font-size:8px;letter-spacing:1.3px;color:#c9d8d3}.overlay{position:absolute;inset:0;z-index:5;background:linear-gradient(90deg,#132322f5,#142c2aaa);backdrop-filter:blur(4px);display:flex;align-items:center;padding:8%;cursor:default}.overlay.hidden{display:none}.startcard{max-width:490px}.startcard .eyebrow{color:var(--cyan)}h3{font-size:clamp(29px,3.2vw,48px);line-height:1.1;font-weight:550;letter-spacing:-1.8px;margin:20px 0}.startcard p{color:#bbccca;line-height:1.8;font-size:14px}.primary{display:flex;justify-content:space-between;gap:35px;align-items:center;background:var(--lime);color:#172322;border:0;border-radius:7px;padding:14px 20px;font-weight:600;min-width:230px;margin:27px 0 18px}.primary span{font-size:22px}.startcard>small{font-size:10px;line-height:1.8;color:#90aaa6}.transport{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff10;gap:12px}.record-controls{display:flex;align-items:center;gap:10px}.rec{display:flex;align-items:center;gap:9px;background:#253034;border:1px solid #ffffff0c;border-radius:6px;color:#dbe4e1;padding:9px 12px;font-size:12px}.rec i{width:8px;height:8px;background:#ff776d;border-radius:50%}.rec.active i{animation:blink 1s infinite}.rec.active{border-color:#ff776d66}.transport-right{display:flex;align-items:center;gap:14px}.transport-right>span{font-size:9px;letter-spacing:1px;color:var(--muted);white-space:nowrap}#scope{opacity:.7;width:140px;height:30px}.foot{display:flex;gap:26px;color:#7e9495;font-size:10px;margin-top:18px;flex-wrap:wrap}kbd{font:9px monospace;border:1px solid #ffffff20;padding:2px 4px;border-radius:3px;margin-right:4px;color:#c1cfcd}#toast{position:absolute;left:50%;top:90px;transform:translateX(-50%);z-index:4;color:#eff7ed;background:#142b29d9;border:1px solid #ffffff18;border-radius:7px;padding:9px 18px;font-size:12px;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}#toast.show{opacity:1}#labels{position:absolute;inset:0;z-index:1;pointer-events:none}.hp-label{position:absolute;transform:translate(-50%,-100%);width:32px;height:4px;border-radius:3px;background:#20302caa;overflow:hidden}.hp-label i{height:100%;display:block;background:#e4957c}.hp-label.self{width:45px;height:5px}.hp-label.self i{background:var(--lime)}dialog{color:#e1ebe5;background:#192725;border:1px solid #ffffff25;border-radius:14px;padding:32px;max-width:580px;font-size:13px}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}dialog p{color:#adc0bd}.close{float:right;margin-top:-12px;margin-right:-12px}.error{color:#f8a69b}@keyframes blink{50%{opacity:.3}}@media(min-width:1550px){.play{padding:37px 45px}.sidebar{padding:42px 32px}main{grid-template-columns:290px minmax(0,1fr)}}@media(max-width:1000px){.lab{display:none}main{grid-template-columns:210px minmax(0,1fr)}.sidebar{padding:28px 20px}.play{padding:25px 20px}.sound-controls{gap:7px}select{width:96px}#scope{display:none}.foot{gap:12px}.hud{gap:20px}.weapon-art{transform:scale(.88);transform-origin:left center}.music-tag{padding:8px 10px}.music-tag span:last-child{display:none}}@media(max-width:720px){.top{height:65px;padding:0 18px}.brand{font-size:19px}.build{font-size:8px;letter-spacing:.6px}.top #help{padding:5px}main{display:block}.sidebar{display:none}.play{padding:18px 12px}.arena-top h2{font-size:22px}#viewport{height:65vh;min-height:400px}.overlay{padding:8%}.hud{left:16px;right:16px;gap:20px}.best{display:none}.bottomhud{left:16px;right:16px;gap:12px}.meter{width:90px}.transport{gap:4px}.transport-right>span{display:none}.record-controls{gap:0}.quiet{font-size:10px;padding:9px 7px}.foot{font-size:9px}.startcard>small{font-size:11px}}

.pitch-rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}.pitch-ring{fill:none;stroke:#dbf8f2;stroke-width:.65;opacity:.14}.pitch-ring.selected{stroke:#bcf575;stroke-width:1.6;opacity:.85}.pitch-line{stroke:#ddfffc;stroke-width:.8;stroke-dasharray:2 6;opacity:.45}.pitch-dot{fill:#ccfff4;stroke:#203f36;stroke-width:1.2}.pitch-ring-name{fill:#d6f2e2;font-size:8px;opacity:.58;paint-order:stroke;stroke:#253d31;stroke-width:2px;stroke-linejoin:round}.pitch-rings.gliding .pitch-ring.selected{stroke:#80e9f5}.pitch-badge{position:absolute;z-index:2;pointer-events:none;color:#18332e;background:#c5f56ee8;border-radius:4px;padding:3px 6px;font-size:10px;font-weight:700;white-space:nowrap}.pitch-badge:empty{display:none}
/* Prototype 03: instrument and cosmetic loadout. */
.sidebar{padding:26px 24px;max-height:calc(100vh - 83px);overflow:auto;scrollbar-width:thin;scrollbar-color:#425754 transparent}.sidebar h1{font-size:48px;letter-spacing:-2px;margin:10px 0}.sidebar .intro{font-size:11px;min-height:32px;margin:8px 0}.weapon-art{height:94px;margin:8px 0 17px}.orbit{width:75px;height:75px;top:0;left:70px}.gun{top:30px;left:30px;transform:rotate(-20deg) scale(.75);transform-origin:left center}.weapon-caption{font-size:8px;letter-spacing:.8px}.weapon-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.weapon-choice{position:relative;text-align:left;background:#202d2e;border:1px solid #ffffff12;border-radius:7px;color:#dce6e0;padding:8px 10px;min-height:52px}.weapon-choice b{display:block;font-size:12px;font-weight:600}.weapon-choice small{font-size:8px;color:#829794}.weapon-choice.selected{border-color:var(--weapon,#81e2eb);background:#30403d}.weapon-choice:before{content:'';position:absolute;right:9px;top:11px;width:5px;height:5px;background:var(--weapon);border-radius:50%}.weapon-choice:disabled{opacity:.5}.weapon-choice.selected:disabled{opacity:1}.loadout-hint{display:block;color:#8daba3;font-size:9px;margin-top:10px;min-height:26px}.skin-section{border-top:1px solid #ffffff12;padding-top:14px;margin-top:6px;display:flex;align-items:center;justify-content:space-between;gap:10px}.skin-section .eyebrow{font-size:8px;letter-spacing:1px}.skin-section b{display:block;font-size:9px;font-weight:500;letter-spacing:.5px;color:#d1e0d7;margin-top:3px}.skin-swatches{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.skin-choice{background:#202d2e;color:#dce6e0;font-size:10px;line-height:1;height:24px;border:1px solid #ffffff12;border-left:4px solid var(--skin);border-radius:6px;padding:0 8px;cursor:pointer}.skin-choice.selected{border-color:#e8f7ee;border-left-color:var(--skin);background:#30403d}.sound-controls{margin-top:14px;padding-top:15px}.sidebar .toggle{margin:14px 0;font-size:11px}.sidebar .roadmap{margin-top:20px;padding-top:12px}.roadmap small{display:block;margin-top:7px;line-height:1.7}.mode-picker{display:flex;gap:9px;margin-top:23px}.mode-picker button{background:#ffffff06;border:1px solid #ffffff20;border-radius:7px;color:#c9dbd2;text-align:left;padding:10px 14px;min-width:140px}.mode-picker b{display:block;font-size:12px;font-weight:600}.mode-picker small{font-size:9px;color:#93aba1}.mode-picker .selected{border-color:var(--lime);background:#c5f56e0a}.glide-track{position:relative;width:96px;height:3px;background:#e8fff326;border-radius:4px;margin:7px auto 0;overflow:hidden}
#glide.on{color:var(--cyan)}#glideFill{position:absolute;left:0;top:0;height:100%;width:50%;border-radius:4px;background:var(--cyan)}.practice-hint{position:absolute;top:94px;left:24px;z-index:2;color:#d9ede0;letter-spacing:1.5px;font-size:8px;pointer-events:none}.practice-hint span{display:block;color:#b0c6b8;font-size:9px;letter-spacing:0;margin-top:3px}.wave-break{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:3;background:#162c28ed;border:1px solid #b5dd9855;border-radius:9px;padding:13px 16px;text-align:center;max-width:90%}.wave-break span{display:block;font-size:12px;color:#d2e6da}.wave-break button{border:0;background:var(--lime);border-radius:5px;padding:7px 20px;color:#17322b;font-size:12px;margin-top:9px}.mode-picker[hidden],.wave-break[hidden],.practice-hint[hidden]{display:none}.transport-right{gap:7px}.transport .quiet{white-space:nowrap}@media(max-width:1000px){.sidebar{padding:22px 15px}.weapon-choice{padding:8px}.skin-section{display:block}.skin-section b{display:inline;margin-left:5px}.skin-swatches{margin-top:12px}.mode-picker button{min-width:120px}.transport-right>span{display:none}}@media(max-width:720px){main{display:block}.sidebar{display:block;max-height:none;border-right:0;border-bottom:1px solid #ffffff12;padding:18px 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}.sidebar>.eyebrow,.sidebar h1,.sidebar .intro,.weapon-art,.loadout-hint,.sidebar .roadmap,.sidebar .volume,.sidebar>.toggle{display:none}.weapon-grid{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}.skin-section{margin:0;padding:0;border:0}.skin-swatches{margin-top:6px}.sound-controls{margin:0;padding:0;border:0}.sound-controls select{width:100%;font-size:11px;padding:7px}.sound-controls input{font-size:11px;padding:7px;width:67px}.transport .quiet{font-size:9px;padding:8px 5px}.transport-right{gap:0}.mode-picker button{min-width:0;flex:1}.sidebar .skin-section .eyebrow{font-size:8px}}

.boss-bar{position:absolute;left:50%;top:62px;transform:translateX(-50%);width:min(46%,420px);z-index:3;pointer-events:none;text-align:center;color:#f3e6d0;font-size:10px;letter-spacing:2px;text-shadow:0 1px 4px #000a}.boss-bar[hidden]{display:none}.boss-bar>div{margin-top:5px;height:12px;background:#1b1316cc;border:1px solid #ffffff30;border-radius:7px;overflow:hidden}.boss-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#b8473f,#e58a5c);transition:width .1s}
.coop{margin:6px 0 14px;padding-top:14px;border-top:1px solid #ffffff14}.coop-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.coop input{background:#253034;border:0;color:#e6efec;border-radius:6px;padding:8px 10px;width:118px}.coop #coopCode{width:96px;text-transform:uppercase;letter-spacing:2px}.coop-btn{background:#253034;border:1px solid #ffffff22;color:#e6efec;border-radius:6px;padding:8px 12px;font-size:12px}.coop-btn:hover{border-color:var(--lime)}.coop-room{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px;font-size:11px;letter-spacing:1.4px;color:var(--muted)}.coop-room b{font-size:20px;letter-spacing:4px;color:var(--lime)}.coop-room ul{flex-basis:100%;margin:2px 0 0;padding-left:18px;font-size:12px;letter-spacing:0}.coop-status{display:block;margin-top:6px;font-size:11px;color:#90aaa6;min-height:1em}.mate-label{position:absolute;transform:translate(-50%,-100%);text-align:center;font-size:10px;font-weight:600;text-shadow:0 1px 3px #000c;white-space:nowrap}.mate-label i{display:block;width:40px;height:4px;margin:2px auto 0;border-radius:3px;background:#20302caa;overflow:hidden}.mate-label b{display:block;height:100%;width:100%;background:currentColor}.mate-label.down span:after{content:' · DOWN'}.hp-label.down i,.mate-label.down b{background:#ffd27a}.hp-label.down{overflow:visible}.hp-label.down:after{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:9px;color:#ffd27a;white-space:nowrap;content:'DOWN'}

.score-stat{margin-left:auto;text-align:right}.score-stat em{display:block;font-style:normal;font-size:9px;letter-spacing:1.4px;color:#cfe3dc}.score-stat em[hidden]{display:none}.hud .best{margin-left:0}
.beat-bar{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:3;pointer-events:none;display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:20px;background:#0f1d1cb8;border:1px solid #ffffff1c;color:#eef5e8;text-shadow:0 1px 3px #0008}
.beat-chord{font-weight:650;font-size:15px;min-width:34px;text-align:center}.beat-no{font-size:9px;letter-spacing:1.2px;color:#a9bdb8;min-width:26px}
.beat-cells{display:flex;gap:6px}.beat-cell{position:relative;width:30px;height:9px;border-radius:5px;background:#ffffff1f;overflow:hidden}.beat-cell.one{width:38px}.beat-cell i{position:absolute;inset:0;width:0;background:#ffffff40}.beat-cell.on{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.beat-cell.on.one{background:#fff;box-shadow:0 0 14px #fff}
.rhythm-pop{position:absolute;left:50%;top:100%;transform:translate(-50%,6px);font-size:13px;letter-spacing:1.5px;white-space:nowrap;opacity:0;transition:opacity .25s}.rhythm-pop.show{opacity:1;transition:none}.rhythm-pop.perfect{color:#fff3a6}.rhythm-pop.good{color:#a8f0c8}.rhythm-pop.miss{color:#ff9e93}
.combo{font-size:10px;letter-spacing:1.2px;color:#ffe38a;min-width:44px}
.boss-bar{top:78px}
.fx-hud{position:absolute;left:24px;top:82px;z-index:2;display:flex;flex-direction:column;gap:6px;pointer-events:none}.fx-chip{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 6px;border-radius:14px;background:#0f1d1cc4;border:1px solid var(--fx);color:#eef5e8;font-size:11px;min-width:120px}.fx-chip b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--fx);color:#10181b;font-size:12px}.fx-chip span{flex:1}.fx-chip small{font-variant-numeric:tabular-nums;color:#cfe0da}.fx-chip i{font-style:normal;color:var(--fx);letter-spacing:1px}.fx-chip.low{opacity:.6}
.dmg-num{position:absolute;transform:translate(-50%,-100%);font-weight:700;font-size:13px;color:#fff;text-shadow:0 1px 2px #000,0 0 6px #0008;white-space:nowrap;pointer-events:none}.dmg-num.mate{font-size:10px;opacity:.6}.dmg-num.big{font-size:18px}.dmg-num.crit{font-size:calc(14px * var(--crit,1.5));font-weight:900;letter-spacing:.02em;text-shadow:0 1px 2px #000,0 0 10px #ffb40099;animation:critPop .26s cubic-bezier(.2,1.6,.4,1)}@keyframes critPop{0%{transform:translate(-50%,-100%) scale(.4)}100%{transform:translate(-50%,-100%) scale(1)}}@media (prefers-reduced-motion:reduce){.dmg-num.crit{animation:none}}
.pk-label{position:absolute;transform:translate(-50%,-50%);font-size:15px;font-weight:700;color:#10181b;text-shadow:none;pointer-events:none}
.metro-settings{margin:-8px 0 14px}.metro-settings .toggle{margin:10px 0}.metro-settings .volume input{margin-top:10px}.metro-note{display:block;font-size:9px;color:#667a7e;margin-top:6px}
.result-scores{margin:0;padding-left:18px;font-size:12px;color:#cfe0da}
@media(max-width:720px){.beat-bar{top:10px;gap:6px;padding:5px 8px}.beat-cell{width:20px}.beat-cell.one{width:26px}.fx-hud{left:16px;top:70px}.hud{top:44px}}
#viewport{container-type:size}#toast{top:118px}
@container (max-width: 980px){.hud{top:16px}.beat-bar{top:66px}.fx-hud{top:112px}.boss-bar{top:112px}#toast{top:150px}}
/* Feedback-Runde 2: Impact bei Combos/Streaks, Koop-Harmonie */
@keyframes pc-pop{0%{transform:translate(-50%,6px) scale(.55);opacity:0}35%{transform:translate(-50%,6px) scale(1.25);opacity:1}100%{transform:translate(-50%,6px) scale(1)}}
@keyframes pc-bump{0%{transform:scale(1)}30%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes pc-jpop{0%{transform:translate(-50%,-100%) scale(.5);opacity:0}30%{transform:translate(-50%,-100%) scale(1.3);opacity:1}100%{transform:translate(-50%,-100%) scale(1)}}
@keyframes pc-title{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}18%{transform:translate(-50%,-50%) scale(1.12);opacity:1}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-56%) scale(1);opacity:0}}
@keyframes pc-flash{0%{opacity:var(--pulse,.5)}100%{opacity:0}}
@keyframes pc-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.rhythm-pop{font-weight:800;font-size:17px;letter-spacing:2px;top:calc(100% + 2px)}
.rhythm-pop.show{animation:pc-pop .32s ease-out}
.rhythm-pop.perfect{color:#fff3a6;text-shadow:0 0 12px #ffd86a,0 1px 3px #000a}
.rhythm-pop.good{color:#a8f0c8;text-shadow:0 0 10px #5fe0a0aa,0 1px 3px #000a}
.rhythm-pop.miss{font-size:12px;font-weight:600}
.combo{display:flex;align-items:baseline;gap:5px;min-width:58px;font-size:10px;color:var(--tier,#ffe38a)}
.combo b{font-size:20px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 10px var(--tier,#ffe38a)}
.combo span{font-size:8px;letter-spacing:1.4px;opacity:.85}
.combo em{font-style:normal;font-size:15px;font-weight:800;padding:1px 6px;border-radius:9px;background:var(--tier,#ffe38a);color:#132322}
.combo.bump b{animation:pc-bump .22s ease-out}
.combo.tier3 b,.combo.tier4 b{font-size:24px}
.combo.broke{color:#c9d2cf;animation:pc-shake .25s}
.combo.broke span{font-size:9px;opacity:.8}
.beat-bar{transition:box-shadow .3s,border-color .3s}
.beat-bar.glow{border-color:#ffe38a88;box-shadow:0 0 18px #ffe38a55,inset 0 0 10px #ffe38a22}
.judge-pop{position:absolute;transform:translate(-50%,-100%);font-weight:800;font-size:15px;letter-spacing:1.5px;white-space:nowrap;pointer-events:none;animation:pc-jpop .3s ease-out;text-shadow:0 1px 3px #000c}
.judge-pop.perfect{color:#fff3a6;text-shadow:0 0 10px #ffd86a,0 1px 3px #000c}
.judge-pop.good{color:#a8f0c8;font-size:13px}
.judge-pop.harm{color:#ffe9a8;font-size:13px;text-shadow:0 0 12px #ffd86a,0 1px 3px #000c}
.judge-pop.harm.chord{color:#ffc4f3;text-shadow:0 0 12px #ff8fe6,0 1px 3px #000c}
.milestone{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;text-align:center;opacity:0;white-space:nowrap}
.milestone.show{animation:pc-title 1.4s ease-out forwards}
.milestone b{display:block;font-size:clamp(28px,4.6vw,54px);font-weight:900;letter-spacing:3px;color:#fff6c8;text-shadow:0 0 22px #ffd86a,0 0 4px #fff,0 3px 8px #000a}
.milestone small{display:block;font-size:11px;letter-spacing:2px;color:#ffe9a8;margin-top:4px;text-shadow:0 1px 3px #000a}
.milestone.lvl3 b,.milestone.lvl4 b{color:#ffd6f6;text-shadow:0 0 26px #ff8fe6,0 0 4px #fff,0 3px 8px #000a}
.milestone.team b{color:#e9f8ff;text-shadow:0 0 24px #7fd8ff,0 0 4px #fff,0 3px 8px #000a}
.harm-pop{position:absolute;left:50%;top:calc(100% + 26px);transform:translate(-50%,6px);font-size:14px;font-weight:800;letter-spacing:2px;color:#ffe9a8;white-space:nowrap;opacity:0;transition:opacity .3s;text-shadow:0 0 12px #ffd86a,0 1px 3px #000a}
.harm-pop.show{opacity:1;transition:none;animation:pc-pop .32s ease-out}
.harm-pop.chord{color:#ffc4f3;text-shadow:0 0 12px #ff8fe6,0 1px 3px #000a}
.harm-pop i{font-style:normal;color:#fff}
.harm-pop em{font-style:normal;font-size:11px;padding:1px 5px;border-radius:8px;background:#ffe9a8;color:#132322}
.duet{display:none;align-items:baseline;gap:4px;font-size:8px;letter-spacing:1.3px;color:#bfeaff}
.duet.on,.duet.broke{display:flex}
.duet b{font-size:16px;font-weight:800;line-height:1}
.duet em{font-style:normal;font-size:12px;font-weight:800;padding:0 5px;border-radius:8px;background:#7fd8ff;color:#132322}
.duet.broke{color:#c9d2cf}
#viewport::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 70px 14px var(--edgeColor,#ffe38a);opacity:var(--edge,0)}
#viewport::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 50%,#fff8,#ffe38a33 45%,transparent 75%);opacity:0}
#viewport.pulse::before{animation:pc-flash .45s ease-out}
.hit-volume{display:block;margin:-4px 0 14px}
@media(prefers-reduced-motion:reduce){.rhythm-pop.show,.harm-pop.show,.combo.bump b,.combo.broke,.judge-pop{animation:none}.milestone.show{animation:none;opacity:1}#viewport.pulse::before{animation:none}}
.sound-controls{flex-wrap:wrap;row-gap:10px}
.timbre-tag{display:inline-block;font-style:normal;font-size:9px;letter-spacing:1.5px;color:#10181b;background:#ffd166;border-radius:9px;padding:1px 8px;margin:2px 0 1px}.timbre-tag.pop{animation:timbrepop .35s ease-out}@keyframes timbrepop{0%{transform:scale(1.6);background:#fff}100%{transform:scale(1)}}

/* Frankfurt v2 (13.10.2026): Ortsanzeige, Minimap, große Karte */
.loc{display:flex;flex-direction:column;line-height:1.05;color:#f4f1ea;text-shadow:0 1px 4px #000c;padding:6px 10px 7px;background:#0d0f10b8;border-radius:4px;border-left:3px solid #f4f1ea;min-width:150px}.loc[hidden]{display:none}
.loc b{font-size:22px;font-weight:900;letter-spacing:1.5px}.loc small{font-size:10px;letter-spacing:2.4px;color:#d9d3c6;margin-top:2px}
.loc span{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;letter-spacing:1.6px;font-weight:700}.loc em{font-style:normal}
.loc .pin{width:9px;height:9px;border:2px solid #f4f1ea;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:inline-block}
.loc.pop{animation:loc-pop .7s ease-out}@keyframes loc-pop{0%{transform:scale(1);background:#f4f1ea55}35%{transform:scale(1.07)}100%{transform:scale(1)}}
.loc-banner{position:absolute;left:50%;top:26%;transform:translateX(-50%);z-index:3;pointer-events:none;font-size:clamp(18px,2.6vw,30px);font-weight:900;letter-spacing:6px;color:#f4f1ea;text-shadow:0 2px 10px #000c;opacity:0;white-space:nowrap}
.loc-banner.show{animation:loc-banner 2.2s ease-out}@keyframes loc-banner{0%{opacity:0;letter-spacing:14px}15%{opacity:1;letter-spacing:6px}75%{opacity:1}100%{opacity:0}}
#viewport>.minimap{position:absolute;inset:auto;right:20px;top:74px;width:150px;height:150px;z-index:3;border-radius:3px;cursor:zoom-in;box-shadow:0 1px 8px #0006;background:transparent}.minimap[hidden]{display:none}
.bigmap{position:absolute;inset:6% 8%;z-index:4;background:#0d0f10e6;border:1px solid #ffffff2a;border-radius:10px;padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;cursor:zoom-out}.bigmap[hidden]{display:none}
.bigmap .eyebrow small{margin-left:12px;color:#8c9a9d;letter-spacing:1px}.bigmap canvas{flex:1;width:100%;min-height:0}
@container (max-width: 980px){#viewport>.minimap{top:118px;width:120px;height:120px}}
@media(max-width:720px){.loc b{font-size:16px}.loc{min-width:0}#viewport>.minimap{width:100px;height:100px}}
@media(prefers-reduced-motion:reduce){.loc.pop,.loc-banner.show{animation:none}}

/* Combo-Tanz + Emote-Rad (14.10.2026) */
.dance-banner{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;text-align:center;opacity:0;white-space:nowrap;font-size:clamp(24px,3.8vw,44px);font-weight:900;letter-spacing:4px;color:#d6fff0;text-shadow:0 0 22px #4dffc0,0 0 4px #fff,0 3px 8px #000a}
.dance-banner small{display:block;font-size:11px;letter-spacing:2px;color:#bff7e2;margin-top:4px;text-shadow:0 1px 3px #000a}
.dance-banner.show{animation:pc-dance 2.6s ease-out forwards}
@keyframes pc-dance{0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-5deg)}10%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(4deg)}22%{transform:translate(-50%,-50%) scale(1) rotate(-3deg)}34%{transform:translate(-50%,-50%) rotate(2deg)}46%{transform:translate(-50%,-50%) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%)}}
.emote-wheel{position:absolute;z-index:6;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#0c1416d0 0 22%,#ffffff14 22.5% 23%,#0c1416c8 23.5% 100%);border:1px solid #ffffff2a;box-shadow:0 10px 30px #0008}
.emote-wheel b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;letter-spacing:3px;color:#ffe9a8}
.emote-wheel span{position:absolute;transform:translate(-50%,-50%);font-size:12px;font-weight:700;letter-spacing:1px;color:#d9e2dc;padding:6px 9px;border-radius:12px;white-space:nowrap;transition:background .08s,color .08s}
.emote-wheel span.sel{background:#ffe38a;color:#16120a}
@media(prefers-reduced-motion:reduce){.dance-banner.show{animation:none;opacity:1}}

/* Treffer-Screen (BO2): rote Blut-Vignette, Deckkraft per JS (hurtfx.mjs); unter HUD und Minimap */
.hurt-fx{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;visibility:hidden;border-radius:inherit;background:radial-gradient(ellipse 80% 74% at 50% 50%,rgba(120,0,0,0) 46%,rgba(150,8,8,.34) 68%,rgba(115,0,0,.74) 86%,rgba(60,0,0,.96) 100%);box-shadow:inset 0 0 90px 8px rgba(140,0,0,.5)}
.boss-bar em{font-style:normal}.boss-bar.final{color:#ffb4a0;letter-spacing:3px}.boss-bar.final>div i{filter:saturate(1.4) brightness(1.1)}

/* ===== Vollbild-Layout (14.10.2026): Spielfeld füllt das Fenster, Menü (Esc) als Seitenleiste, Aufnahme klein in der Ecke ===== */
html,body{height:100%;overflow:hidden}
main{display:block!important;max-width:none!important;min-height:0!important;margin:0!important}
.play{padding:0!important;position:fixed;inset:0}
.arena-top,.foot{display:none!important}
#viewport{position:fixed!important;inset:0;width:100vw;height:100vh;height:100dvh;min-height:0!important;border-radius:0!important}
#viewport::after{border-radius:0}
.menu-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 8px}.menu-actions .quiet{padding:7px 12px}
.controls-list{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#9fb2b2;margin-top:12px;padding-top:12px;border-top:1px solid #ffffff14}.controls-list kbd{background:#253034;border-radius:4px;padding:0 5px;margin:0 2px;color:#e6efec}
.overlay{background:linear-gradient(90deg,#132322f2,#142c2acc)}
#viewport>.bottomhud{bottom:44px}
/* Pfeile am Rand */
.edge-arrows{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.edge-arrow{position:absolute;left:0;top:0;width:0;height:0;color:var(--c,#fff)}
.edge-arrow .tri{position:absolute;left:-13px;top:-13px;width:26px;height:26px;filter:drop-shadow(0 1px 3px #000c)}
.edge-arrow .tri svg{display:block;width:100%;height:100%;fill:currentColor}
.edge-arrow .tag{position:absolute;left:0;top:0;transform:translate(-50%,0);margin-top:16px;white-space:nowrap;font-size:10px;font-weight:700;letter-spacing:1px;text-shadow:0 1px 3px #000,0 0 6px #000a;text-align:center;line-height:1.15}
.edge-arrow .tag small{display:block;font-weight:600;opacity:.85;letter-spacing:.5px}
.edge-arrow.down{color:#ff4a3c;animation:edge-pulse .8s ease-in-out infinite}
.edge-arrow.down .tag b{display:block;font-size:11px;letter-spacing:2px}
.edge-arrow.boss{color:#ff5a4a}
@keyframes edge-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.edge-arrow.down{animation:none}}
/* Auto-Aim-Marker (Text) + Einblendungen */
.intro-keys{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:6;background:#0f1719dd;border:1px solid #ffffff22;border-radius:10px;padding:8px 14px;font-size:12px;color:#dfe9e6;pointer-events:none;max-width:92%;text-align:center}
.intro-keys[hidden],.fs-offer[hidden]{display:none}
.fs-offer{position:absolute;left:50%;top:70px;transform:translateX(-50%);z-index:7;display:flex;gap:10px;align-items:center;background:#0f1719ee;border:1px solid #ffffff2a;border-radius:10px;padding:8px 12px;font-size:13px}
.fs-offer button{padding:5px 10px}
.coop-room[hidden]{display:none}
/* Paket 2 (15.10.2026): Cash, Perks, Second Take, Power-ups, Kauf-Hinweis, Schilder */
.eco-hud{position:absolute;right:24px;bottom:96px;z-index:3;pointer-events:none;text-align:right;color:#f6f1e4;text-shadow:0 2px 6px #000b}.eco-hud[hidden]{display:none}
.cash-box{position:relative}.cash-box small{display:block;font-size:9px;letter-spacing:2.4px;color:#d9d0b8}.cash-box b{font-size:30px;font-weight:900;letter-spacing:1px;color:#ffe27a;font-variant-numeric:tabular-nums}.cash-box b.double{color:#fff;text-shadow:0 0 14px #ffd23a,0 2px 6px #000b}
.cash-pop{position:absolute;right:0;top:-18px;font-style:normal;font-weight:800;font-size:15px;opacity:0}.cash-pop.up{color:#9dff8a}.cash-pop.down{color:#ff8a7a}.cash-pop.show{animation:cash-pop .9s ease-out forwards}@keyframes cash-pop{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.eco-row{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:4px}.perk-icons{display:flex;gap:5px}.perk-icons i{display:grid;place-items:center;width:24px;height:30px;border-radius:5px;font-style:normal;font-size:11px;font-weight:900;color:#0d0f10;background:var(--c);box-shadow:0 0 10px var(--c),inset 0 -6px 0 #0003}
.srv-hud{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:12px;background:#0f1d1cc4;border:1px solid #7cf5d0;color:#7cf5d0;font-size:12px}.srv-hud b{color:#fff}.srv-hud small{font-size:8px;letter-spacing:1.5px}.srv-hud.none{border-color:#ffffff30;color:#9aa}
.power-hud{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);z-index:3;display:flex;gap:8px;pointer-events:none}.pw-chip{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 7px;border-radius:16px;background:#0d1214d0;border:1.5px solid var(--c);box-shadow:0 0 14px color-mix(in srgb,var(--c) 55%,transparent);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px}.pw-chip b{color:var(--c);font-size:15px}.pw-chip small{color:var(--c);font-variant-numeric:tabular-nums}.pw-chip.low{animation:pw-low .5s steps(2) infinite}@keyframes pw-low{50%{opacity:.35}}
.buy-prompt{position:absolute;left:50%;bottom:160px;transform:translateX(-50%);z-index:4;pointer-events:none;padding:8px 16px;border-radius:8px;background:#0d1214e6;border:1.5px solid var(--c,#ffd27a);color:#f6f1e4;font-size:13px;font-weight:600;max-width:calc(100% - 32px);text-align:center;box-shadow:0 0 18px color-mix(in srgb,var(--c,#ffd27a) 40%,transparent)}.buy-prompt[hidden]{display:none}.buy-prompt kbd{display:inline-block;min-width:20px;padding:1px 6px;margin-right:6px;border-radius:4px;background:var(--c,#ffd27a);color:#0d0f10;font-weight:900;text-align:center}.buy-prompt.no{color:#ffb4a8}
.self-revive{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:4;pointer-events:none;text-align:center;color:#7cf5d0;text-shadow:0 0 18px #7cf5d0,0 2px 8px #000c}.self-revive[hidden]{display:none}.self-revive small{display:block;font-size:13px;font-weight:800;letter-spacing:5px}.self-revive b{font-size:72px;font-weight:900;line-height:1;color:#fff}
.beat-flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#ffffff 0%,#d26bff99 40%,#d26bff00 75%)}.beat-flash.show{animation:beat-flash .55s ease-out}@keyframes beat-flash{0%{opacity:.85}100%{opacity:0}}
.milestone.power b{color:#fff;text-shadow:0 0 28px var(--pw,#ffd23a),0 0 8px var(--pw,#ffd23a),0 3px 8px #000a}
.st-tag,.door-tag,.pw-tag{position:absolute;transform:translate(-50%,-100%);pointer-events:none;text-align:center;white-space:nowrap;text-shadow:0 1px 4px #000c}
.st-tag{padding:3px 8px;border-radius:6px;background:#0d1214c8;border:1px solid #ffffff26;font-size:11px}.st-tag b{display:block;font-size:12px}.st-tag i{font-style:normal;font-weight:800}.st-tag i.ok{color:#9dff8a}.st-tag i.no{color:#ffb4a8}.st-tag small{color:#c8c0b0;font-size:10px}
.door-tag{padding:3px 9px;border-radius:6px;background:#5a1d17e0;border:1px solid #ffb07a;color:#fff3d8;font-size:12px}.door-tag.ok{background:#1f4d22e0;border-color:#9dff8a}.door-tag b{font-size:14px}.door-tag small{display:block;font-size:9px;letter-spacing:1.5px;opacity:.85}
.pw-tag b{display:block;font-size:22px;line-height:1}.pw-tag small{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#fff}
@media(prefers-reduced-motion:reduce){.cash-pop.show,.beat-flash.show,.pw-chip.low{animation:none}}
/* D1 Griffbrett (Third person): Tonleiter-Leiter rechts neben dem Fadenkreuz */
/* Melody control Wheel: kompakte Leiter (aktuelle Stufe ± 4, läuft mit) */
.melody-controls{margin-top:14px;padding-top:14px}
.judge-pop.flow-hook{color:#ffd166;font-size:20px;letter-spacing:2px}.judge-pop.flow-resolve{color:#8affd8;font-size:17px;letter-spacing:2px}.judge-pop.flow-max{color:#fff6c8;font-size:20px}

/* Griffbrett v2 (15.10.2026): Akkordtöne = breite leuchtende Zonen, Zwischentöne dünn; „OCT n“ beim Lagenwechsel */
#octPop.pop{animation:octpop .35s ease-out}
@keyframes octpop{from{transform:scale(1.5)}to{transform:scale(1)}}
/* Loop-Station */
.loop-hud{margin-top:4px;font:700 10px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:1.5px;color:#d5e1dc99}
.loop-hud.armed{color:#ffd166;text-shadow:0 0 8px #ffd16699;animation:looparm 1s ease-in-out infinite alternate}
@keyframes looparm{from{opacity:.7}to{opacity:1}}
/* Sprung-Leiter (Rechtsklick): Nicht-Akkordtöne abgedunkelt */

/* ===== HUD nach Zielbild (look-test, 15.10.2026): kantig, halbtransparentes Schwarz, schmale Technik-Schrift, Akzent Cyan ===== */
:root{--hud-font:"DIN Condensed","DIN Alternate","Barlow Condensed","Avenir Next Condensed","Arial Narrow",sans-serif;--hud-bg:rgba(8,10,12,.6);--hud-line:rgba(205,210,214,.5);--hud-cy:#2fd6e6}
.hud-tl,.hud-tr,.hud-bl,.ladder,.beat-hud,.eco-hud,.rhythm-pop,.harm-pop,.crosshair,.transport.corner,.boss-bar,#toast,.buy-prompt,.power-hud,.fx-hud,.practice-hint,.srv-hud,.perk-icons,.milestone,.dance-banner,.loc-banner,.wave-break,.fs-offer,.intro-keys,.self-revive{font-family:var(--hud-font)}
.hb-box{background:var(--hud-bg);border:1px solid var(--hud-line);color:#fff;text-transform:uppercase}
.hb-box small{letter-spacing:.12em}
/* Oben links: Logo + Ort + Welle/Kills/Zeit */
.hud-tl{position:absolute;left:0;top:0;z-index:2;pointer-events:none;width:340px;padding:14px 40px 0 18px;color:#fff;text-transform:uppercase;background:linear-gradient(90deg,rgba(6,8,10,.8) 0,rgba(6,8,10,.62) 62%,rgba(6,8,10,0) 100%)}
.logo-row{display:flex;align-items:center;gap:12px}
.logo-wave{width:34px;height:34px;flex:none;color:#fff}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-name{font-size:34px;font-weight:700;letter-spacing:.1em;text-shadow:0 1px 4px #000a}
.loc-sub{font-size:13px;letter-spacing:.24em;color:#dfe4e6;margin-top:3px;white-space:nowrap;text-shadow:0 1px 3px #000a}
.loc-sub[hidden]{display:none}.loc-sub em{font-style:normal}
.loc-sub.pop{animation:loc-pop .7s ease-out}
.hud-stats{display:flex;align-items:center;gap:12px;margin:10px 0 0 -8px;padding:6px 0 9px 8px;border-top:1px solid rgba(255,255,255,.38);font-variant-numeric:tabular-nums}
.hud-stats span{display:flex;align-items:baseline;gap:7px}
.hud-stats small{font-size:15px;letter-spacing:.14em}
.hud-stats b{font-size:18px;font-weight:600;letter-spacing:.08em}
.hud-stats .sep{width:1px;height:16px;background:rgba(255,255,255,.75)}
/* Oben rechts: Minimap + Score */
.hud-tr{position:absolute;right:16px;top:16px;z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.hud-tr .minimap{display:block;width:160px;height:160px;border:1px solid rgba(225,230,233,.75);border-radius:0;background:rgba(8,10,12,.5);box-shadow:none;cursor:zoom-in;pointer-events:auto;position:static}
.hud-tr .minimap[hidden]{display:none}
.score-box{position:relative;display:flex;align-items:baseline;gap:12px;padding:3px 12px 4px}
.score-box small{font-size:15px}
.score-box b{font-size:26px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.score-box em{font-style:normal;font-size:13px;letter-spacing:.1em;color:var(--hud-cy)}
.score-box em[hidden]{display:none}
.best-line{position:absolute;right:0;top:calc(100% + 3px);font-size:11px;letter-spacing:.14em;color:#ffffffaa;white-space:nowrap;text-shadow:0 1px 3px #000}
.best-line b{font-size:11px;font-weight:500}
/* Rechts mittig: Griffbrett-Leiter dauerhaft am Rand */
.ladder{position:absolute;right:14px;top:244px;width:100px;z-index:3;pointer-events:none;color:#fff;text-transform:uppercase;text-shadow:0 1px 3px #000c;transition:opacity .15s}
.lad-key,.lad-bpm{height:24px;line-height:24px;font-size:16px;letter-spacing:.12em;padding-left:12px;white-space:nowrap}
.lad-body{position:relative}
.lad-body::before{content:'';position:absolute;left:18px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.7)}
.lad-bar{position:absolute;left:82px;top:0;bottom:0;width:10px;border:1px solid rgba(255,255,255,.5);background:rgba(8,10,12,.45)}
#fretboard{position:absolute;left:18px;top:50%;width:60px;height:0;pointer-events:none;display:none}
#fretboard .fret-rung{position:absolute;left:-4px;width:60px;display:flex;align-items:center;font-size:var(--rf,13px);font-weight:600;line-height:1;letter-spacing:.1em;color:rgba(255,255,255,.62);white-space:nowrap}
#fretboard .fret-rung s{display:block;flex:none;width:8px;height:1px;background:rgba(255,255,255,.78);text-decoration:none}
#fretboard .fret-rung span{margin-left:12px}
#fretboard .fret-rung.chord{color:#fff}#fretboard .fret-rung.chord s{width:11px;background:var(--hud-cy);box-shadow:0 0 5px var(--hud-cy)}
#fretboard .fret-rung.root{color:#ffe08a}#fretboard .fret-rung.root s{width:11px;background:#ffe08a;box-shadow:0 0 5px #ffe08a}
#fretboard .fret-rung.cur{color:#031418;z-index:1}
#fretboard .fret-rung.cur s{display:none}
#fretboard .fret-rung.cur span{margin-left:4px;padding:0 7px;min-width:36px;line-height:1.35;background:var(--hud-cy);box-shadow:0 0 10px rgba(47,214,230,.55)}
#fretboard .fret-rung.cur::before{content:'';position:absolute;left:-12px;top:50%;margin-top:-5px;border:5px solid transparent;border-left:8px solid var(--hud-cy)}
#fretboard>i{position:absolute;left:62px;top:-3px;width:14px;height:6px;background:var(--hud-cy);box-shadow:0 0 6px var(--hud-cy)}
#fretboard>i.free{background:#ffb582;box-shadow:0 0 6px #ffb582}
#fretboard.edge>i{background:#ff776d;box-shadow:0 0 6px #ff776d}
/* Sprung-Leiter (Rechtsklick): Zwischentöne dunkeln ab, Akkordtöne bleiben, Marker grün */
#fretboard.arp .fret-rung.thin:not(.cur){opacity:.2;transition:opacity .08s}
#fretboard.arp>i{background:#c5f56e;box-shadow:0 0 6px #c5f56e}
#octPop{position:absolute;right:118px;top:246px;z-index:4;pointer-events:none;display:none;font:700 16px/1 var(--hud-font);letter-spacing:.14em;color:var(--hud-cy);text-shadow:0 0 10px var(--hud-cy),0 1px 3px #000}
#octPop.pop{animation:octpop .35s ease-out}
/* Fadenkreuz: vier Striche, Punkt, Notenname */
.crosshair{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:3;pointer-events:none;display:none;background:radial-gradient(circle,var(--hud-cy) 0 2.2px,transparent 2.9px),linear-gradient(#fff,#fff) 50% 0/2px 9px no-repeat,linear-gradient(#fff,#fff) 50% 100%/2px 9px no-repeat,linear-gradient(#fff,#fff) 0 50%/9px 2px no-repeat,linear-gradient(#fff,#fff) 100% 50%/9px 2px no-repeat;filter:drop-shadow(0 0 2px #000)}
.xh-note{position:absolute;left:calc(100% + 2px);top:50%;transform:translateY(-8px);font-size:16px;letter-spacing:.08em;color:var(--hud-cy);text-shadow:0 1px 3px #000;white-space:nowrap}
#rhythmPop{left:calc(50% + 66px);top:calc(50% - 98px);font-size:19px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;z-index:3;pointer-events:none}
#rhythmPop.perfect{color:var(--hud-cy);text-shadow:0 0 12px rgba(47,214,230,.7),0 1px 3px #000a}
#rhythmPop.good{color:#a8f0e0;text-shadow:0 0 10px rgba(47,214,230,.4),0 1px 3px #000a}
#rhythmPop.miss{font-size:14px;color:#ff9e93}
#harmPop{left:calc(50% + 66px);top:calc(50% - 68px);z-index:3;pointer-events:none;font-weight:600}
/* Unten mittig: Beat-Leiste + Combo */
.beat-hud{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff;text-transform:uppercase;text-shadow:0 1px 3px #000a;background:linear-gradient(180deg,rgba(8,10,12,.42),rgba(8,10,12,.62));border:1px solid rgba(205,210,214,.14);padding:8px 16px 7px;backdrop-filter:blur(2px)}
.bh-row{display:grid;grid-template-columns:48px auto 48px;gap:12px;align-items:center}
.beat-hud .beat-chord{min-width:0;text-align:right;font-size:14px;font-weight:500;letter-spacing:.08em;color:#ffffffbb}
.beat-hud .beat-no{min-width:0;font-size:12px;letter-spacing:.1em;color:#ffffff88}
.beat-cells{display:flex;align-items:center;gap:0}
.bt-cell{position:relative;width:12px;height:12px;background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.2)}
.bt-cell+.bt-cell{margin-left:20px}
.bt-cell+.bt-cell::before{content:'';position:absolute;right:100%;top:50%;width:20px;height:1px;background:rgba(255,255,255,.5)}
.bt-cell.on{background:var(--hud-cy);border-color:var(--hud-cy);box-shadow:0 0 10px var(--hud-cy)}
.bt-cell.on::before{background:var(--hud-cy)}
.beat-hud.glow .bh-row{filter:drop-shadow(0 0 6px #ffe38a99)}
.bh-combo{display:flex;align-items:center;gap:12px}
.beat-hud .combo{display:flex;align-items:baseline;gap:9px;min-width:0;font-size:17px;letter-spacing:.14em;color:#fff}
.beat-hud .combo span{font-size:inherit;letter-spacing:inherit;opacity:1}
.beat-hud .combo b{font-size:21px;font-weight:600;letter-spacing:.06em;color:var(--tier,#ffae3a);text-shadow:none}
.beat-hud .combo em{font-size:13px;padding:0 5px;border-radius:0}
.beat-hud .combo:empty::before{content:"COMBO 00";color:rgba(255,255,255,.42)}
.beat-hud .combo.broke span{font-size:14px}
.beat-hud .duet{font-size:11px}
/* Unten links: Gesundheit/Energie + Waffe */
.hud-bl{position:absolute;left:16px;bottom:16px;z-index:3;pointer-events:none;width:min(330px,40%);display:flex;flex-direction:column;gap:6px}
.hb-vitals{padding:7px 12px 9px}
.hb-line{display:flex;align-items:baseline;gap:14px}
.hb-line small{font-size:15px}
.hb-line b{font-size:22px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.hb-hp,.hb-en{height:8px;background:rgba(255,255,255,.14);overflow:hidden}
.hb-hp{margin:3px 0 9px}
.hb-hp i{display:block;position:relative;height:100%;width:100%;background:#fff;transition:width .08s}
.hb-hp i::after{content:'';position:absolute;right:0;top:0;bottom:0;width:4px;background:#7dff4a}
.hb-en{margin-top:4px;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 3px),transparent calc(10% - 3px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 3px),transparent calc(10% - 3px) 10%)}
.hb-en i{display:block;height:100%;width:100%;background:var(--hud-cy);transition:width .08s}
.hb-weapon{display:flex;align-items:center;gap:12px;padding:6px 10px}
.wpn-icon{width:58px;height:26px;flex:none;color:#fff}
.hb-wname{flex:1;display:flex;flex-direction:column;line-height:1.1;min-width:0}
.hb-wname b{font-size:17px;font-weight:600;letter-spacing:.1em;white-space:nowrap}
.hb-weapon .timbre-tag{background:none;border-radius:0;padding:0;margin:0;font-size:13px;letter-spacing:.14em;color:#ffffffaa;align-self:flex-start}
.hb-slot{flex:none;border:1px solid var(--hud-line);padding:2px 9px;font-size:22px;font-weight:600;letter-spacing:.06em}
.hud-bl .loop-hud{margin:0;padding-left:2px}
/* Unten rechts: Cash (+ Flow nur wenn aktiv), Perks, Aufnahme */
.eco-hud{right:16px;bottom:62px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.eco-hud .eco-row{margin:0}
.cash-box{position:relative;min-width:200px;padding:6px 14px 8px;text-align:left}
.cash-line{position:relative;display:flex;align-items:baseline;gap:16px}
.cash-box .cash-line small{display:inline;font-size:15px;color:#fff;letter-spacing:.12em}
.cash-box .cash-line b{margin-left:auto;font-size:32px;font-weight:600;color:#fff;letter-spacing:.04em}
.cash-box .cash-line b.double{color:#fff;text-shadow:0 0 14px #ffd23a,0 2px 6px #000b}
.cash-box .meter.flow{display:flex;align-items:center;gap:10px;width:auto;margin-top:2px}
.cash-box .meter.flow>span{display:flex;gap:6px;color:#ffae3a;font-size:14px;letter-spacing:.1em;white-space:nowrap}
.cash-box .meter.flow>span b{display:none}
.cash-box .meter.flow em{margin:0;color:#ffae3a;font-size:14px}
.cash-box .meter.flow>div{flex:1;height:6px;margin:0;border-radius:0;background:rgba(255,255,255,.16)}
.cash-box .meter.flow i{background:#ffae3a}
.perk-icons i{border-radius:0}.srv-hud{border-radius:0;background:var(--hud-bg)}
/* Übriges passend zur neuen Optik, ohne Überlappung mit den Ecken */
.boss-bar{top:18px;width:min(32%,400px);font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.boss-bar>div{border-radius:0;height:10px;background:var(--hud-bg);border:1px solid var(--hud-line)}
#toast{top:76px;border-radius:0;background:var(--hud-bg);border:1px solid var(--hud-line);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.buy-prompt{border-radius:0;background:var(--hud-bg);font-size:15px;letter-spacing:.06em;bottom:128px}
.buy-prompt kbd{border-radius:0}
.power-hud{bottom:108px}.pw-chip{border-radius:0}
.fx-hud{left:16px;top:118px}
.practice-hint{left:50%;top:18px;transform:translateX(-50%);text-align:center;font-size:12px;letter-spacing:.16em}
.wave-break{border-radius:0;background:var(--hud-bg);border:1px solid var(--hud-line)}.wave-break button{border-radius:0}
.fs-offer{top:auto;bottom:176px;border-radius:0;background:var(--hud-bg)} /* über Tastenhilfe und Beat-Leiste statt oben mittig: verdeckt das Wellen-Banner (#toast) nicht */
.intro-keys{bottom:112px;border-radius:0}
.bigmap{border-radius:0}
.timbre-tag.pop{animation:timbrepop .35s ease-out}
/* Groove (Branch groove, in look-HUD eingepasst): Balken unten mittig direkt über der Beat-Leiste (kantig, halbtransparentes Schwarz, dünner Rahmen, Cyan-Akzente), Stufenfarbe + Symbol,
   Markierungen bei 40/80, „ROLE“ wenn die Lila-Prüfung fehlt; Pops links unter dem Fadenkreuz (rechts steht die Griffbrett-Leiter; max. 250 ms, nicht über dem Ziel) */
.groove-bar{position:absolute;left:50%;bottom:var(--groove-y,95px);transform:translateX(-50%);z-index:3;pointer-events:none;display:flex;align-items:center;gap:8px;padding:3px 9px;background:#000000a6;border:1px solid #81e2eb55;color:#eef5e8;font:600 11px/1 var(--hud-font);letter-spacing:.1em;border-color:rgba(205,210,214,.18)}
.groove-sym{min-width:22px;text-align:center;font-size:11px;letter-spacing:1px}
.groove-bar[data-tier="0"] .groove-sym{color:#e5484d}.groove-bar[data-tier="1"] .groove-sym{color:#3b82f6}.groove-bar[data-tier="2"] .groove-sym{color:#a855f7}
.groove-track{position:relative;width:184px;height:10px;background:#ffffff12;outline:1px solid #ffffff26}
.groove-track i{position:absolute;left:0;top:0;bottom:0;width:0;background:#e5484d}
.groove-track s{position:absolute;top:-3px;bottom:-3px;width:1px;background:#81e2eb;opacity:.85}.groove-track .m40{left:40%}.groove-track .m80{left:80%}
#grooveNum{font-style:normal;min-width:20px;text-align:right;font-variant-numeric:tabular-nums;color:#cfe9ea}
.groove-role{font-size:8px;letter-spacing:1.2px;color:#d8b4fe;border:1px solid #a855f7aa;padding:2px 4px}
.groove-bar.flash{animation:gFlash .6s ease-out}.groove-bar.flash-down{animation:gFlashDown .5s ease-out}
@keyframes gFlash{0%{filter:brightness(1)}15%{filter:brightness(2.2);border-color:#fff;box-shadow:0 0 22px #ffffff88}100%{filter:brightness(1)}}
@keyframes gFlashDown{0%{filter:brightness(1)}20%{filter:brightness(.6);border-color:#e5484d99}100%{filter:brightness(1)}}
.groove-pop{position:absolute;right:calc(50% + 22px);top:calc(50% + 10px);text-align:right;z-index:3;pointer-events:none;font:800 11px/1 system-ui,-apple-system,sans-serif;letter-spacing:1px;color:#eef5e8;text-shadow:0 1px 3px #000,0 0 6px #000a;opacity:0;white-space:nowrap}
.groove-pop.show{opacity:1}.groove-pop.dim{opacity:.55}
.groove-pop.t0{color:#ffc0c2}.groove-pop.t1{color:#a9c8ff}.groove-pop.t2{color:#dcc2ff}
.groove-pop.neg{top:calc(50% + 27px);color:#ff9a9a}
@media(prefers-reduced-motion:reduce){.groove-bar.flash,.groove-bar.flash-down{animation:none}}
/* Groove Runde 2: Pops 24 px über dem Groove-Balken (GDD v0.3 2.2), max. 2 Zeilen, hohle Markierung beim Abschuss */
.groove-pops{position:absolute;left:50%;bottom:calc(var(--groove-y,95px) + 46px);transform:translateX(-50%);z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:3px}
.gp-line{display:flex;align-items:center;gap:6px;font:800 15px/1.15 system-ui,-apple-system,sans-serif;letter-spacing:.8px;color:#fff;text-shadow:0 1px 3px #000,0 0 6px #000a;white-space:nowrap;opacity:1;transition:opacity .15s linear}
.gp-line i{width:7px;height:7px;border-radius:2px;background:#e5484d;flex:none}
.gp-line.t1 i{background:#3b82f6}.gp-line.t2 i{background:#a855f7}
.gp-line.neg{color:#ffd6d6}.gp-line.neg i{background:#ff6b6b;border-radius:50%}
.gp-line.hollow{color:#ffffffd0;border:1px dashed #ffffff99;padding:1px 6px;font-size:13px}
.gp-line.hollow i{background:transparent;border:1px solid #fff}
.gp-line.fade{opacity:0}
/* Beat-Leiste: Schlag 1 und 3 = starke Schläge (808-Downbeat), Aufleuchten beim bestätigten Treffer */
.bt-cell.strong{background:rgba(255,255,255,.42);border-color:rgba(255,255,255,.45)}
.bt-cell.strong.on{background:#fff;box-shadow:0 0 14px #fff}
.bt-cell.hit{animation:beatHit .35s ease-out}
@keyframes beatHit{0%{background:#ffb582;box-shadow:0 0 22px #ffb582,0 0 6px #fff}100%{box-shadow:none}}
/* Griffbrett: vorbereiteter nächster Ton (Impulswaffen) und eingefrorener abgefeuerter Ton */
#fretboard .fret-rung.next span::after{content:' NEXT';font-size:8px;letter-spacing:1px;color:#ffb582;margin-left:4px}
#fretboard .fret-rung.next s{outline:1px solid #ffb582;outline-offset:2px}
#fretboard .fret-rung.fired s{box-shadow:0 0 10px #ffb582;background:#ffb582}
#fretboard .fret-rung.cur.next span::after{color:#031418;opacity:.8}
/* JAM CLASH (Branch pvp): Lobby-Einstellungen, Ergebnis, Einzählung, Tod/Respawn, Abschuss-Liste, Hit-/Kill-Marker (80/180 ms), Gegner-Labels */
.arena-setup{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin:10px 0 4px;font-family:var(--hud-font);letter-spacing:.08em}
.arena-setup label{display:flex;flex-direction:column;gap:3px;font-size:10px;color:#b9c6c8}.arena-setup label.toggle{flex-direction:row;align-items:center}
.arena-setup select{min-width:150px}.arena-setup .pvp-arena-name{font-size:9px;color:#8c9a9d;letter-spacing:.06em}.arena-setup .pvp-info{flex-basis:100%;font-size:10px;color:#8c9a9d}
#pvpReady.on{background:#2fd6e6;color:#031418}
.arena-result{margin:8px 0 6px;font-family:var(--hud-font);letter-spacing:.08em}
.arena-result .ar-score{display:flex;gap:10px;align-items:baseline;font-size:34px;font-weight:600;margin-bottom:6px}.arena-result .ar-score i{color:#8c9a9d;font-style:normal}
.arena-result table{width:100%;border-collapse:collapse;font-size:13px}.arena-result th{font-size:10px;color:#8c9a9d;text-align:right;font-weight:500;padding:2px 6px}
.arena-result td{text-align:right;padding:3px 6px;border-top:1px solid #ffffff14}.arena-result td:first-child,.arena-result th:first-child{text-align:left}.arena-result tr.me td{background:#2fd6e612}
.arena-count{position:absolute;left:50%;top:34%;transform:translateX(-50%);z-index:4;pointer-events:none;font:600 22px/1 var(--hud-font);letter-spacing:.2em;color:#fff;text-shadow:0 1px 4px #000c;background:#0008;padding:6px 14px}
.arena-death{position:absolute;left:50%;top:58%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px;background:#000000b0;border:1px solid #ff5d7366;font-family:var(--hud-font);letter-spacing:.12em;color:#fff}
.arena-death b{font-size:18px;color:#ff8a9a}.arena-death span{font-size:11px;color:#c9d1d3}.arena-death em{font-style:normal;font-size:16px}
.arena-next{display:flex;gap:6px;align-items:center;margin-top:4px}.arena-next small{font-size:9px;color:#8c9a9d}.arena-next select{font-size:11px;max-width:160px}
.arena-feed{position:absolute;left:16px;top:118px;z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;gap:3px;font:600 12px/1.2 var(--hud-font);letter-spacing:.1em}
.arena-feed div{background:#000000a0;padding:3px 8px;color:#eef1ee}
.hb-swap{flex:none;font-size:10px;letter-spacing:.1em;color:#b9c6c8;align-self:center}
.crosshair.pvp-hit::after,.crosshair.pvp-kill::after{content:'';position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;background:linear-gradient(45deg,transparent 46%,#fff 46% 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,#fff 46% 54%,transparent 54%);filter:drop-shadow(0 0 2px #000)}
.crosshair.pvp-kill::after{width:34px;height:34px;margin:-17px 0 0 -17px;background:linear-gradient(45deg,transparent 44%,#ff4d5e 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#ff4d5e 44% 56%,transparent 56%)}
.judge-pop.pvp-dmg{color:#fff;font-size:13px;font-family:var(--hud-font)}.judge-pop.pvp-dmg.head{color:#ffd166}.judge-pop.pvp-prot{color:#9fd8ff;font-size:11px;letter-spacing:2px}
.mate-label.foe span{text-shadow:0 0 6px currentColor,0 1px 2px #000}
.arena-setup[hidden],.arena-result[hidden],.arena-count[hidden],.arena-death[hidden],.hb-swap[hidden]{display:none}
/* ===== PvP-HUD nach Zielbild (docs/ref-look/hud-pvp-ziel.webp, Branch pvp, Cache v=49): body.pvp-hud solange ein Jam-Clash-Match läuft.
   Kantig, halbtransparentes Schwarz, dünne helle Ränder, Mitte frei. Survival/Soundcheck behalten ihr HUD (.pvp-only ist dort aus). ===== */
.pvp-only{display:none}
body.pvp-hud{--groove-y:112px}
.pvp-hud .hud-tl,.pvp-hud #scoreBox,.pvp-hud #beatBar,.pvp-hud .hud-bl,.pvp-hud #ecoHud,.pvp-hud #pause,.pvp-hud #scope,.pvp-hud .hp-label.self,.pvp-hud .lad-key,.pvp-hud .lad-bpm,.pvp-hud .lad-bar,.pvp-hud .groove-sym,.pvp-hud .wav-txt{display:none!important}
.pvp-top,.pvp-key,.pvp-vitals,.pvp-abil{font-family:var(--hud-font);color:#fff;text-transform:uppercase;pointer-events:none;font-variant-numeric:tabular-nums}
/* Oben mittig: Score-Leiste */
.pvp-hud .pvp-top{display:flex;position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:3;align-items:center;gap:16px;padding:5px 20px 4px;background:rgba(8,10,12,.5);border:1px solid rgba(205,210,214,.18)}
.pt-a,.pt-b{min-width:22px;text-align:center;font-size:32px;line-height:1;font-weight:600;text-shadow:0 0 12px currentColor,0 1px 3px #000}
.pt-a{color:#2fd6e6}.pt-b{color:#e5484d}
.pt-sep{width:1px;height:28px;background:rgba(255,255,255,.55)}
.pt-mid{display:flex;flex-direction:column;align-items:center;line-height:1}
.pt-mid b{font-size:22px;font-weight:600;letter-spacing:.06em}
.pt-mid small{font-size:11px;letter-spacing:.2em;color:#ffffffc0;margin-top:3px}
.pvp-top.low .pt-mid b{color:#ff8a8d}
/* Oben rechts: Tonart + Tempo unter der Minimap */
.pvp-hud .pvp-key{display:block;font-size:17px;letter-spacing:.14em;white-space:nowrap;text-shadow:0 1px 3px #000c;margin-top:-1px}
/* Rechts: Griffbrett-Leiter, 7 Stufen */
.pvp-hud .ladder{top:214px;right:22px;width:96px}
.pvp-hud .lad-body::before{left:14px;width:2px;background:rgba(47,214,230,.6);box-shadow:0 0 4px rgba(47,214,230,.4)}
.pvp-hud #fretboard{left:14px}
#fretboard.pvp7 .fret-rung{left:0;text-transform:none;font-size:15px;font-weight:500;color:rgba(255,255,255,.8)}
#fretboard.pvp7 .fret-rung span{margin-left:12px}
#fretboard.pvp7 .fret-rung s{width:6px;height:2px;margin-left:-2px;background:transparent;box-shadow:none}
#fretboard.pvp7 .fret-rung.chord s{background:var(--hud-cy);box-shadow:none}
#fretboard.pvp7 .fret-rung.root s{background:#ffe08a;box-shadow:none}
#fretboard.pvp7 .fret-rung.root{color:rgba(255,236,170,.9)}
#fretboard.pvp7 .fret-rung.cur{color:#031418}
#fretboard.pvp7 .fret-rung.cur span{margin-left:6px;padding:4px 10px;min-width:48px;font-weight:600;line-height:1.2}
#fretboard.pvp7 .fret-rung.cur::before{left:-17px}
#fretboard.pvp7>i{left:-3px;top:-1.5px;width:8px;height:3px}
#fretboard.pvp7.arp .fret-rung.thin:not(.cur){opacity:.25}
/* Waffen-Mechanik: leuchtende Töne je Waffe (mechhints.mjs, Klassen mh + mh-<Art>; Stärke --mhk). Unbekannte Arten = Standardfarbe. */
#fretboard .fret-rung.mh{--mh:#ffd25a}
#fretboard .fret-rung.mh-root{--mh:#c5f56e}#fretboard .fret-rung.mh-fifth{--mh:#9fcf5a}#fretboard .fret-rung.mh-next{--mh:#ff6bd5}
#fretboard .fret-rung.mh-tight{--mh:#ff7d92}#fretboard .fret-rung.mh-mid{--mh:#ffb3c0}#fretboard .fret-rung.mh-wide{--mh:#8fd0ff}
#fretboard .fret-rung.mh s{width:16px;height:4px;background:var(--mh);box-shadow:0 0 8px var(--mh);opacity:calc(.35 + .65 * var(--mhk,1))}
#fretboard .fret-rung.mh:not(.cur) span{color:var(--mh);text-shadow:0 0 6px var(--mh)}
#fretboard .fret-rung.mh.cur span{box-shadow:0 0 0 2px var(--mh),0 0 12px var(--mh)}
#fretboard .fret-rung.mh-next s{animation:mhPulse .5s ease-in-out infinite alternate}
#fretboard .fret-rung.mh-motif{--mh:#ffe08a}#fretboard .fret-rung.mh-motif-fin{--mh:#ffd25a}#fretboard .fret-rung.mh-motif-fin s{animation:mhPulse .4s ease-in-out infinite alternate} /* Pluck-Kombo: leuchtende Fortsetzung, Finisher-Ton pulsiert */
@keyframes mhPulse{from{opacity:.35;transform:scaleX(.7)}to{opacity:1;transform:scaleX(1.25)}}
/* Chords/Sub (mech_harmonic): Countdown bis zum Akkordwechsel unter dem Fadenkreuz, Sub-Druck-Ring + nächster Grundton */
.chord-ticks{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);display:none;align-items:center;pointer-events:none;white-space:nowrap}
.chord-ticks i{display:block;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.25);box-shadow:0 0 2px #000;transition:background .08s}
.chord-ticks i.on{background:#ff9fae;border-color:#ffd0d8;box-shadow:0 0 6px #ff9fae}
.chord-ticks.last i.on{background:#ffe066;border-color:#fff3b0;box-shadow:0 0 8px #ffe066}
.chord-ticks b{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font-size:11px;letter-spacing:.14em;color:#ffe066;text-shadow:0 0 6px #ffb000,0 1px 2px #000;opacity:0;transition:opacity .08s}
.chord-ticks.flash b{opacity:1}.chord-ticks.flash i{background:#ffe066;box-shadow:0 0 10px #ffe066}
.sub-ring{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;display:none}
.sub-ring.pre{animation:mhPulseT .25s ease-in-out infinite alternate}
.sub-next{position:absolute;left:calc(100% + 26px);top:50%;transform:translateY(-50%);font-size:13px;font-weight:600;letter-spacing:.08em;color:#ff6bd5;text-shadow:0 0 6px #ff6bd5,0 1px 2px #000;white-space:nowrap;pointer-events:none;display:none}
.pvp-hud #octPop{top:216px;right:126px}
/* Fadenkreuz: schlichtes Kreuz, Note darunter „— G4 —“ */
.pvp-hud .crosshair{width:30px;height:30px;margin:-15px 0 0 -15px;background:linear-gradient(#fff,#fff) 50% 0/2px 10px no-repeat,linear-gradient(#fff,#fff) 50% 100%/2px 10px no-repeat,linear-gradient(#fff,#fff) 0 50%/10px 2px no-repeat,linear-gradient(#fff,#fff) 100% 50%/10px 2px no-repeat}
.pvp-hud .xh-note{left:50%;top:calc(100% + 7px);transform:translateX(-50%);font-size:16px;font-weight:600;display:flex;align-items:center;gap:6px}
.pvp-hud .xh-note::before,.pvp-hud .xh-note::after{content:'';width:9px;height:1px;background:currentColor;opacity:.85}
/* Köpfe: Dreieck (Cyan = Team/Helfer, Rot = Gegner), Gegner mit dünnem Lebensbalken, Name nur nah/im Fadenkreuz */
.mate-label.pvp{font:600 10px/1.1 var(--hud-font);letter-spacing:.12em;text-transform:uppercase}
.mate-label.pvp span{display:none}
.mate-label.pvp.near span{display:block;opacity:.9;margin-bottom:3px}
.mate-label.pvp i{display:none}
.mate-label.pvp.foe i{display:block;width:30px;height:3px;border-radius:0;background:#000a;margin:0 auto 4px}
.mate-label.pvp.foe b{background:#e5484d}
.mate-label.pvp::after{content:'';display:block;width:0;height:0;margin:0 auto;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid currentColor;filter:drop-shadow(0 1px 1px #000b)}
/* Unten links: HP + Energie + zwei Waffen */
.pvp-hud .pvp-vitals{display:flex;position:absolute;left:24px;bottom:18px;z-index:3;width:290px;flex-direction:column}
.pv-line{display:flex;align-items:baseline;gap:8px;line-height:1;text-shadow:0 1px 3px #000c}
.pv-line small{font-size:13px;letter-spacing:.14em;min-width:30px}
.pv-line small+b{margin-left:14px}
.pv-line b{font-size:19px;font-weight:600;letter-spacing:.04em}
.pv-line em{font-style:normal;font-size:14px;letter-spacing:.08em;color:#ffffffd0}
.pv-bar{height:7px;margin:5px 0 12px;background:rgba(255,255,255,.12);outline:1px solid rgba(255,255,255,.28);overflow:hidden}
.pv-bar i{display:block;height:100%;width:100%;transition:width .08s}
.pv-hp i{background:#fff}
.pvp-vitals.low .pv-hp i{background:#ff6b6e}
.pv-en{-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(12.5% - 2px),transparent calc(12.5% - 2px) 12.5%);mask:repeating-linear-gradient(90deg,#000 0 calc(12.5% - 2px),transparent calc(12.5% - 2px) 12.5%)}
.pv-en i{background:var(--hud-cy);box-shadow:0 0 6px rgba(47,214,230,.5)}
.pv-weapons{display:flex;gap:8px;margin-top:4px}
.pv-w{flex:1;display:flex;align-items:center;gap:10px;height:44px;padding:0 10px;background:rgba(8,10,12,.42);border:1px solid rgba(205,210,214,.16);color:#ffffff80}
.pv-w.on{background:rgba(8,10,12,.62);border-color:rgba(225,230,233,.6);color:#fff}
.pv-wi svg{display:block;width:50px;height:20px}
.pv-w b{font-size:14px;font-weight:600;letter-spacing:.12em;white-space:nowrap}
/* Unten mittig: Groove-Zeile (Zahl links, Balken mit Marken 40/80, Combo rechts), darunter Fähigkeiten 1–4 */
.pvp-hud .groove-bar{background:none;border:0;padding:0;gap:10px;backdrop-filter:none;text-shadow:0 1px 3px #000c}
.groove-max,.groove-combo{display:none}
.pvp-hud #grooveNum{order:0;min-width:0;font-size:19px;font-weight:600;color:var(--gcol,#2fd6e6)}
.pvp-hud .groove-max{display:inline;order:1;margin-left:-6px;font-size:13px;letter-spacing:.08em;color:#ffffffc0}
.pvp-hud .groove-track{order:2;width:260px;height:8px;margin:0 4px;outline-color:rgba(255,255,255,.3)}
.pvp-hud .groove-role{order:3}
.pvp-hud .groove-combo{display:flex;order:4;align-items:baseline;gap:8px}
.groove-combo small{font-size:13px;letter-spacing:.14em}.groove-combo b{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.pvp-hud .groove-track s{background:#fff;opacity:.55;transition:opacity .12s,box-shadow .12s}
.pvp-hud .groove-bar.pulse .groove-track s{opacity:1;box-shadow:0 0 6px #fff}
.pvp-hud .groove-bar.pulse1 .groove-track s{top:-5px;bottom:-5px}
.pvp-hud .groove-bar[data-tier="0"]{--gcol:#ff8a8d}.pvp-hud .groove-bar[data-tier="1"]{--gcol:#2fd6e6}.pvp-hud .groove-bar[data-tier="2"]{--gcol:#c79bff}
.pvp-hud .groove-bar[data-tier="1"] .groove-track i{background:linear-gradient(90deg,#1b8fc9,#2fd6e6)!important;box-shadow:0 0 8px rgba(47,214,230,.55)}
.pvp-hud .groove-pops{left:calc(50% + 70px);transform:none;bottom:calc(var(--groove-y) + 22px);align-items:flex-start}
.pvp-hud .gp-line{font:600 12px/1.15 var(--hud-font);letter-spacing:.12em}
.pvp-hud .gp-line i{width:5px;height:5px}
.pvp-hud .pvp-abil{display:flex;position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;gap:28px}
.ab-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.ab-box{position:relative;width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:rgba(8,10,12,.55);border:1px solid rgba(205,210,214,.45);color:#fff}
.ab-ic{width:40px;height:40px}
.ab-tile.ready .ab-box{border:2px solid #f5b83d;box-shadow:0 0 10px rgba(245,184,61,.35),inset 0 0 12px rgba(245,184,61,.18);color:#ffd27a}
.ab-tile.cd .ab-box{color:#ffffff70;background:rgba(8,10,12,.4)}
.ab-tile.ult.cd .ab-box{color:#fff;background:rgba(8,10,12,.55);border-radius:0}
.ab-t{text-transform:none;position:absolute;left:0;right:0;bottom:3px;text-align:center;font-style:normal;font-size:13px;letter-spacing:.06em;color:#fff;text-shadow:0 1px 2px #000}
.ab-key{min-width:18px;height:18px;line-height:18px;text-align:center;font-size:12px;border:1px solid rgba(205,210,214,.6);background:rgba(8,10,12,.6)}
.ab-ring{position:absolute;inset:-6px;width:76px;height:76px;transform:rotate(-90deg);pointer-events:none}
.ab-ring circle{fill:none;stroke-width:4}
.ab-ring-bg{stroke:rgba(255,255,255,.08)}
.ab-ring-fg{stroke:#f5a623;filter:drop-shadow(0 0 3px #f5a623aa)}
.ab-pct{position:absolute;left:calc(100% + 8px);top:44px;font-size:15px;font-weight:600;color:#f5b83d;text-shadow:0 1px 3px #000}
/* Unten rechts: nur REC + Wellenform */
/* Abschüsse, Einzählung, Tod im gleichen Stil */
.pvp-hud .arena-feed{top:16px}
.pvp-hud .arena-count{top:30%;padding:8px 18px;background:rgba(8,10,12,.6);border:1px solid rgba(205,210,214,.35);color:#2fd6e6;font-size:22px;text-shadow:0 0 10px rgba(47,214,230,.5)}
.pvp-hud .arena-death{background:rgba(8,10,12,.72);border:1px solid rgba(229,72,77,.55)}
.pvp-hud .arena-death b{color:#e5484d;letter-spacing:.2em}
/* Fähigkeiten 1–4 (Ability_GameFeel_v1, Cache v=50): Kacheln aktiv/gesperrt/gedrückt, Schild-Zeile über HP, Marken über Crew/Titan */
.pv-shield{display:none}.pv-shield.on{display:block}
.pv-shield .pv-line small,.pv-shield .pv-line b{color:#f5b83d}
.pv-sh i{background:#f5b83d;box-shadow:0 0 6px rgba(245,184,61,.55)}
.ab-tile.active .ab-box{border:2px solid #f5b83d;box-shadow:0 0 14px rgba(245,184,61,.55),inset 0 0 14px rgba(245,184,61,.25);color:#ffd27a}
.ab-tile.active .ab-t{color:#ffd27a}
.ab-tile.blocked .ab-box{border-color:#e5484d;color:#ffffff70}
.ab-tile.blocked .ab-t{bottom:auto;top:50%;transform:translateY(-50%);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:#000c;color:#ff8a8d;padding:2px 0}
.ab-tile.press .ab-box{transform:scale(.94)}
.ab-box{transition:transform .08s}
.pvp-abil.off .ab-tile{opacity:.35}
.mate-label.pvp.summon span{display:none}
.mate-label.pvp.summon::after{border-left-width:5px;border-right-width:5px;border-top-width:7px}
.mate-label.pvp.summon.foe i{width:22px;height:2px}
.mate-label.pvp.titan::after{border-left-width:8px;border-right-width:8px;border-top-width:11px}
.mate-label.pvp.titan.foe i{width:60px;height:4px}
/* MY IDEAS: Clip-Karten im Ergebnis (Top 3) und Bibliothek (ideasui.mjs) */
.arena-result[hidden]+.clip-cards,.clip-cards[hidden]{display:none}
.clip-cards{margin:4px 0 10px;font-family:var(--hud-font,inherit);letter-spacing:.06em}
.clip-cards .ic-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11px;color:#c5f56e;margin-bottom:4px}.clip-cards .ic-head small{color:#8c9a9d;font-size:10px}
.ic-card{border:1px solid #ffffff1c;background:#0c1416b0;padding:6px 8px;margin-bottom:5px}
.ic-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}.ic-top em{font-style:normal;color:#81e2eb;font-size:11px}
.ic-why{font-size:10px;color:#adc0bd;margin:1px 0 3px}
.ic-btns,.ic-ex,.il-btns{display:flex;flex-wrap:wrap;gap:4px}.ic-btns .quiet,.ic-ex .quiet,.il-btns .quiet{border:1px solid #ffffff26;padding:4px 7px;font-size:10px;letter-spacing:.06em}
.ic-btns .quiet.on,.il-star.on{color:#ffd166}.ic-ex{margin-top:4px}.ic-ex[hidden],.ic-prog[hidden]{display:none}
.ic-prog{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:10px;color:#adc0bd;position:relative}.ic-prog i{display:block;height:3px;background:#c5f56e;width:0;flex:none;max-width:40%}.ic-prog span{flex:1}
.ic-none{font-size:11px;color:#8c9a9d;padding:4px 0}.ic-hint{display:block;font-size:10px;color:#8c9a9d}
.ideas-open{display:block;margin:6px auto 0}
.ideas-dialog{max-width:760px;width:calc(100vw - 32px);max-height:86vh;overflow:auto}.ideas-dialog h3{margin:2px 0 4px}.ideas-sub{margin:0 0 10px}
.ideas-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px;font-size:12px}.ideas-filters select{background:#0f1a1a;color:#e1ebe5;border:1px solid #ffffff26;padding:3px 6px}.ideas-filters small{color:#8c9a9d;margin-left:auto}
.il-row{border-top:1px solid #ffffff18;padding:8px 0;display:grid;grid-template-columns:1fr;gap:5px}
.il-main{display:flex;gap:8px;align-items:flex-start}.il-main b{display:block;font-size:13px}.il-main small{display:block;color:#8c9a9d;font-size:11px}.il-main .il-why{color:#adc0bd;font-size:10px;letter-spacing:.06em}
.il-star{background:none;border:1px solid #ffffff26;color:#8c9a9d;font-size:15px;line-height:1;padding:4px 7px}
.il-tags{background:#0f1a1a;color:#e1ebe5;border:1px solid #ffffff1c;padding:3px 7px;font-size:11px;max-width:340px}
.il-btns .il-del{color:#ff8e8e;margin-left:auto}
/* ===== PRODUCER RATING (16.10.2026): Stufen-Abzeichen, Rating-Zeile im Ergebnis, Dialog LEADERBOARD – Stil wie das PvP-HUD (kantig, halbtransparentes Schwarz, dünne helle Ränder) ===== */
.tier-badge{--tc:#c9d3d6;display:inline-flex;align-items:center;gap:6px;font-family:var(--hud-font);font-size:12px;letter-spacing:.14em;color:var(--tc);text-transform:uppercase;white-space:nowrap;line-height:1}
.tier-badge i{width:10px;height:10px;background:var(--tc);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 8px var(--tc);flex:none}
.tier-badge.big{font-size:15px;flex-direction:column;gap:5px;min-width:74px}.tier-badge.big i{width:30px;height:30px;background:linear-gradient(135deg,#fff8 0,var(--tc) 45%,#0006 100%);filter:drop-shadow(0 0 6px var(--tc))}
.t-bronze{--tc:#d08a55}.t-silver{--tc:#c9d3d6}.t-gold{--tc:#f2c94c}.t-platinum{--tc:#6fe3d8}.t-diamond{--tc:#8fb6ff}
.arena-rating{margin:8px 0 2px}.ar-rating{display:flex;align-items:center;gap:14px;padding:9px 14px;background:rgba(8,10,12,.55);border:1px solid rgba(205,210,214,.18);border-left:3px solid #8c9a9d;font-family:var(--hud-font);text-transform:uppercase}
.arena-rating[hidden],.startcard:has(.arena-result[hidden]) .arena-rating{display:none}
.ar-rating.up{border-left-color:#2fd6e6}.ar-rating.down{border-left-color:#e5484d}.ar-rating.off{display:block;color:#8c9a9d;font-size:13px;letter-spacing:.12em}
.ar-rating b{display:block;font-size:22px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:#fff}
.ar-rating.up b{text-shadow:0 0 12px #2fd6e655}.ar-rating small{display:block;font-size:13px;letter-spacing:.14em;color:#ffffffb0;margin-top:2px}
.ar-rating .tier-move{display:inline-block;margin-top:4px;font-style:normal;font-size:12px;letter-spacing:.18em;padding:2px 6px;border:1px solid currentColor}.tier-move.up{color:#2fd6e6}.tier-move.down{color:#e5484d}
.menu-links{display:flex;justify-content:center;gap:4px}.menu-links .ideas-open{margin:6px 0 0}
.lb-dialog{max-width:820px;width:calc(100vw - 32px);max-height:88vh;overflow:auto;background:rgba(10,13,15,.96);border:1px solid rgba(205,210,214,.2);border-radius:0;font-family:var(--hud-font)}
.lb-dialog h3{margin:2px 0 2px;font-size:34px;letter-spacing:.04em}.lb-dialog h3 small{font-size:15px;letter-spacing:.2em;color:#8c9a9d;margin-left:8px}.lb-sub{margin:0 0 12px;font-size:13px;letter-spacing:.06em}
.lb-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-bottom:12px}.lb-tabs{display:flex;border:1px solid rgba(205,210,214,.2)}
.lb-tab{background:none;border:0;border-right:1px solid rgba(205,210,214,.14);color:#c7d0d2;font-family:var(--hud-font);font-size:14px;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px}.lb-tab:last-child{border-right:0}
.lb-tab.on{background:#2fd6e622;color:#fff;box-shadow:inset 0 -2px 0 #2fd6e6}
.lb-card{display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding:12px 16px;margin-bottom:12px;background:rgba(0,0,0,.45);border:1px solid rgba(205,210,214,.16);text-transform:uppercase}
.lb-card-main{display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto;column-gap:14px;align-items:center}.lb-card-main .tier-badge{grid-row:1/3}
.lb-name{font-size:20px;letter-spacing:.08em;color:#fff}.lb-big{font-size:34px;line-height:1;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}.lb-rank{grid-column:2;font-size:12px;letter-spacing:.16em;color:#8c9a9d}
.lb-card-main .lb-name{grid-column:2}.lb-card-main .lb-big{grid-column:3;grid-row:1/3;margin-left:6px}
.lb-stats{display:flex;flex-wrap:wrap;gap:6px 20px;margin-left:auto}.lb-stats span{display:flex;flex-direction:column;align-items:flex-end}.lb-stats small{font-size:10px;letter-spacing:.18em;color:#8c9a9d}.lb-stats b{font-size:18px;color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.lb-list table{width:100%;border-collapse:collapse;font-size:15px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.lb-list th{font-size:11px;letter-spacing:.16em;color:#8c9a9d;font-weight:500;text-align:right;padding:3px 8px;border-bottom:1px solid rgba(205,210,214,.18)}
.lb-list td{text-align:right;padding:4px 8px;border-top:1px solid #ffffff10;color:#dfe6e7}.lb-list td.nm,.lb-list th.nm{text-align:left}.lb-list td:nth-child(3),.lb-list th:nth-child(3){text-align:left}
.lb-list td.rt{color:#fff;font-weight:600}.lb-list td.up{color:#2fd6e6}.lb-list td.down{color:#e5484d}
.lb-list tr.me td{background:#2fd6e61c;color:#fff}.lb-list tr.me td:first-child{box-shadow:inset 3px 0 0 #2fd6e6}.lb-list tr.me small{color:#2fd6e6;letter-spacing:.14em}
.lb-list tr.gap td{text-align:left;font-size:11px;letter-spacing:.2em;color:#8c9a9d;padding-top:10px;border-top:1px dashed #ffffff30}
.lb-empty,.lb-offline{padding:26px 0;text-align:center;color:#8c9a9d;letter-spacing:.12em}.lb-offline{font-size:22px;color:#fff;border:1px dashed rgba(205,210,214,.25)}
.lb-foot{display:grid;grid-template-columns:1fr 1.6fr;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(205,210,214,.14)}
.lb-foot label{font-size:11px;letter-spacing:.16em;color:#8c9a9d}.lb-foot small{display:block;font-size:12px;letter-spacing:.04em;text-transform:none;color:#8c9a9d;margin-top:4px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.lb-row{display:flex;gap:6px;margin-top:5px}.lb-row input{flex:1;min-width:0;background:#0f1a1a;color:#e1ebe5;border:1px solid #ffffff26;padding:6px 8px;font-size:13px}
.lb-msg{grid-column:1/-1;color:#c5f56e!important}
@media(max-width:720px){.lb-foot{grid-template-columns:1fr}.lb-stats{margin-left:0}}

/* ---------- Game-Feel-Paket (16.10.2026): Ladebildschirm, Schadenszahlen, Hitmarker, Killfeed, Punkte-Popup, Medaillen, Heat ---------- */
.load-screen{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 60%,#14202a 0,#07090c 70%);font-family:var(--hud-font);color:#fff;text-transform:uppercase}
.load-screen[hidden]{display:none}
.ls-box{width:min(420px,80vw);display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:center}
.ls-eyebrow{font-size:12px;letter-spacing:.3em;color:#2fd6e6}
.ls-box b{font-size:22px;letter-spacing:.14em;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000c}
.ls-bar{height:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}
.ls-bar i{display:block;height:100%;width:0;background:#2fd6e6;box-shadow:0 0 10px #2fd6e688;transition:width .15s linear}
.ls-box small{font-size:12px;letter-spacing:.06em;text-transform:none;color:#9aa6ad;min-height:2.4em}
.judge-pop.dmg2{font-weight:800;letter-spacing:.5px;font-variant-numeric:tabular-nums;font-size:17px;color:#fff;text-shadow:0 0 3px #000,0 1px 3px #000c;animation:pc-dpop .16s ease-out}
.judge-pop.dmg2.k-head{color:#ffc23d;font-size:22px}.judge-pop.dmg2.k-crit{color:#d77bff;font-size:24px;text-shadow:0 0 8px #9b3dff,0 1px 3px #000c}.judge-pop.dmg2.k-shield{color:#9fd8ff;font-size:15px}
.judge-pop.dmg2.bump{animation:pc-dbump .14s ease-out}
@keyframes pc-dpop{0%{transform:translate(-50%,-100%) scale(1.5);opacity:.4}100%{transform:translate(-50%,-100%) scale(1)}}
@keyframes pc-dbump{0%{transform:translate(-50%,-100%) scale(1.28)}100%{transform:translate(-50%,-100%) scale(1)}}
.crosshair.pvp-head::after{content:'';position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;background:linear-gradient(45deg,transparent 43%,#ffd25a 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,#ffd25a 43% 57%,transparent 57%);filter:drop-shadow(0 0 2px #000)}
.crosshair.pvp-kill::after{animation:pc-xkill .3s ease-out}
@keyframes pc-xkill{0%{transform:scale(1.6)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
.kill-feed{display:none;position:absolute;right:188px;top:0;flex-direction:column;align-items:flex-end;gap:3px;font:600 12px/1.2 var(--hud-font);letter-spacing:.08em;text-transform:uppercase}
.pvp-hud .kill-feed{display:flex}
.kf-row{display:flex;align-items:center;gap:6px;padding:3px 7px;background:rgba(8,10,12,.62);border:1px solid transparent;color:#fff;white-space:nowrap;transition:opacity .4s}
.kf-row.me{border-color:#ffd25a;background:rgba(40,32,10,.7)}.kf-row.old{opacity:0}
.kf-row svg{width:30px;height:12px;color:#dfe6ea}.kf-row .kf-ab{width:14px;height:14px;color:#2fd6e6}.kf-row .kf-hs{width:12px;height:12px;color:#ffc23d}
.feel-pop{position:absolute;left:50%;top:calc(50% + 46px);transform:translateX(-50%);z-index:4;pointer-events:none;display:flex;align-items:baseline;gap:10px;font-family:var(--hud-font);text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 3px #000c;transition:opacity .25s}
.feel-pop[hidden]{display:none}.feel-pop.fade{opacity:0}
.feel-pop b{font-size:19px;letter-spacing:.16em;color:#fff}.feel-pop em{font-style:normal;font-size:17px;color:#ffd25a;font-variant-numeric:tabular-nums}
.feel-pop.bump b{animation:pc-fpop .22s ease-out}
@keyframes pc-fpop{0%{transform:scale(1.35)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.judge-pop.dmg2,.judge-pop.dmg2.bump,.feel-pop.bump b,.crosshair.pvp-kill::after{animation:none}}
.pvp-hud .groove-bar{--heat:0;box-shadow:0 0 calc(var(--heat) * 16px) calc(var(--heat) * 2px) rgba(255,120,40,calc(var(--heat) * .85));border-color:rgba(255,150,70,calc(.2 + var(--heat) * .8))}
.ar-medals{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0 4px}
.ar-medal{width:118px;padding:8px 6px;background:rgba(8,10,12,.7);border:1px solid rgba(255,210,90,.55);display:flex;flex-direction:column;gap:3px;align-items:center;text-transform:uppercase;font-family:var(--hud-font);opacity:0;animation:pc-medal .35s ease-out forwards;animation-delay:calc(var(--i) * .45s)}
.ar-medal b{font-size:13px;letter-spacing:.1em;color:#ffd25a}.ar-medal span{font-size:12px;color:#fff;letter-spacing:.06em}.ar-medal small{font-size:10px;color:#9aa6ad;text-transform:none}
.ar-medal.me{border-color:#2fd6e6;box-shadow:0 0 10px #2fd6e655}
.arena-result.skip .ar-medal{animation:none;opacity:1}
@keyframes pc-medal{0%{opacity:0;transform:translateY(8px) scale(.9)}100%{opacity:1;transform:none}}
.ar-skip{display:block;text-align:center;font-size:11px;color:#9aa6ad;margin-top:2px}
.startcard.result-mode>#start{order:-1;font-size:20px;padding:14px 26px;margin:0 0 10px}
.startcard.result-mode{display:flex;flex-direction:column}

.hud-tr{position:absolute}.pvp-hud .hud-tr .kill-feed{display:flex} /* Killfeed oben rechts neben der Minimap (darunter liegt die Ton-Leiter) */
/* Versions-Hinweis (Server hat neue Version) */
.update-note{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:14px;background:#142b29f2;border:1px solid var(--lime);border-radius:8px;padding:8px 10px 8px 16px;font-size:13px;color:#eef5e8;box-shadow:0 6px 24px #0009}.update-note[hidden]{display:none}.update-note button{background:var(--lime);color:#172322;border:0;border-radius:6px;padding:6px 14px;font-weight:600}

/* ===== STARTMENÜ (Louis 16.10.2026): Start-Screen wie Brawl Stars/Fortnite, Suche, Lobby-/Pause-/Ergebnis-Karte, Klassenwahl, Einstellungen.
   #overlay[data-screen] = home | search | lobby | pause | result | card (game.js screenTick, menu.mjs menuScreen). Stil wie das PvP-HUD:
   kantig, halbtransparentes Schwarz, dünne helle Ränder, schmale Technik-Schrift; PLAY als einziges großes, gelbes Element. ===== */
:root{--menu-bg:rgba(8,10,12,.72);--menu-line:rgba(205,210,214,.22);--menu-hi:#2fd6e6;--play:#ffd23f}
.overlay{padding:0;align-items:stretch;justify-content:center}
.overlay>#home,.overlay>#search,.overlay>.startcard{display:none}
.overlay[data-screen=home]>#home{display:block}
.overlay[data-screen=search]>#search{display:flex}
.overlay[data-screen=lobby]>.startcard,.overlay[data-screen=pause]>.startcard,.overlay[data-screen=card]>.startcard{display:block}
.overlay[data-screen=result]>.startcard{display:flex}
/* Start-Screen und Suche: Figur und Arena sichtbar, nur Ränder abgedunkelt */
.overlay[data-screen=home],.overlay[data-screen=search],.overlay[data-screen=lobby]{background:radial-gradient(ellipse 70% 80% at 34% 58%,transparent 0,rgba(4,6,8,.18) 55%,rgba(4,6,8,.72) 100%),linear-gradient(90deg,transparent 50%,rgba(4,6,8,.55) 100%);backdrop-filter:none}
body.on-menu #viewport>*:not(canvas):not(#overlay):not(#classPick):not(#loadScreen):not(#toast){visibility:hidden!important}
.home{position:absolute;inset:0;font-family:var(--hud-font);letter-spacing:.06em}
.home-top{position:absolute;left:28px;right:28px;top:22px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.home-id{display:flex;gap:12px;align-items:center;background:var(--menu-bg);border:1px solid var(--menu-line);padding:8px 14px 8px 8px}
.home-avatar{width:46px;height:46px;background:linear-gradient(135deg,var(--menu-hi),#126c78);display:grid;place-items:center}
.home-avatar i{width:18px;height:18px;border-radius:50%;background:#0a0d10;box-shadow:0 14px 0 6px #0a0d10;transform:translateY(-6px)}
.home-idtext{display:flex;flex-direction:column;gap:4px}
.home-idtext input{background:transparent;border:0;border-bottom:1px solid transparent;color:#fff;font:600 20px/1.1 var(--hud-font);letter-spacing:.08em;padding:0;width:190px;text-transform:uppercase;outline:none}
.home-idtext input:hover,.home-idtext input:focus{border-bottom-color:var(--menu-line)}
.home-idtext input::placeholder{color:#8c9a9d}
.home-rating{display:flex;align-items:center;gap:8px;font-size:12px;color:#c9d1d3;min-height:20px}
.home-rating b{font-size:17px;color:#fff;letter-spacing:.04em}.home-rating small{font-size:11px;color:#8c9a9d;letter-spacing:.12em}
.home-tools{display:flex;gap:8px}
.home-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:74px;height:64px;min-width:0;margin:0;padding:6px;background:var(--menu-bg);border:1px solid var(--menu-line);border-radius:0;color:#e9eef0;font-family:var(--hud-font);text-align:center}
.home-tool span{font-size:22px;line-height:1;color:var(--play)}.home-tool svg{width:24px;height:24px;color:#e9eef0}
.home-tool small{font-size:10px;letter-spacing:.14em;color:#c9d1d3}
.home-tool:hover{border-color:#fff;background:rgba(20,26,30,.85)}
.home-logo{position:absolute;left:50%;top:26px;transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:0 2px 18px #000c}
.home-logo b{display:block;font-size:44px;line-height:1;letter-spacing:.12em;color:#fff;text-transform:uppercase}
.home-logo span{display:block;margin-top:4px;font-size:13px;letter-spacing:.5em;color:var(--play)}
.home-side{position:absolute;right:36px;bottom:40px;width:min(470px,calc(100vw - 72px));display:flex;flex-direction:column;gap:10px}
.home-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hm-btn{min-width:0;margin:0;padding:9px 12px;background:var(--menu-bg);border:1px solid var(--menu-line);border-radius:0;color:#e9eef0;font-family:var(--hud-font);text-align:left;display:flex;flex-direction:column;gap:1px}
.hm-btn b{font-size:20px;letter-spacing:.06em;font-weight:600;text-transform:uppercase}.hm-btn small{font-size:10px;letter-spacing:.14em;color:#8c9a9d;text-transform:uppercase}
.hm-btn.hm-side{padding:6px 12px}.hm-btn.hm-side b{font-size:14px}
.hm-btn:hover{border-color:#fff}
.hm-btn.on{border-color:var(--play);background:rgba(255,210,63,.12);box-shadow:inset 0 -3px 0 var(--play)}
.hm-btn.on small{color:#ffe28a}
.play-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:0;height:96px;margin:4px 0 0;padding:0;background:linear-gradient(180deg,#ffe066,var(--play) 55%,#e9b512);border:0;border-radius:0;color:#16130a;font-family:var(--hud-font);text-align:center;clip-path:polygon(0 0,100% 0,100% 78%,96% 100%,0 100%);box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .08s,filter .12s}
.play-btn b{font-size:52px;line-height:.95;letter-spacing:.14em;font-weight:700}.play-btn small{font-size:12px;letter-spacing:.22em;font-weight:600;opacity:.8}
.play-btn:hover{filter:brightness(1.07)}.play-btn:active{transform:translateY(2px)}.play-btn:disabled{filter:grayscale(.6) brightness(.8);cursor:progress}
.home-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.home-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;margin:0;padding:8px 12px;background:var(--menu-bg);border:1px solid var(--menu-line);border-radius:0;color:#e9eef0;font-family:var(--hud-font);text-align:left}
.home-chip small{font-size:10px;letter-spacing:.16em;color:#8c9a9d}.home-chip b{font-size:16px;letter-spacing:.08em}
.home-chip kbd,.class-pick kbd,.arena-next kbd{display:inline-block;min-width:16px;padding:0 4px;margin-left:4px;border:1px solid #ffffff40;font:inherit;font-size:10px;color:#e9eef0;text-align:center}
.home-chip:hover{border-color:#fff}
.friends-box{background:var(--menu-bg);border:1px solid var(--menu-line);padding:10px 12px}.friends-box[hidden]{display:none}
.friends-box .coop-row{display:flex;gap:6px;margin:0}.friends-box .coop-row>*{margin:0}
.friends-box input{flex:1;min-width:0;background:#0a0d10;border:1px solid var(--menu-line);color:#fff;font:600 15px var(--hud-font);letter-spacing:.3em;padding:6px 10px;text-transform:uppercase}
.friends-box .coop-btn{min-width:0;flex:0 0 auto;border-radius:0}
.fb-note{display:block;margin-top:6px;font-size:10px;letter-spacing:.06em;color:#8c9a9d}
.home-foot{position:absolute;left:28px;bottom:20px;display:flex;gap:14px;align-items:center;font-size:11px;letter-spacing:.14em;color:#8c9a9d}
.home-foot .build{font-size:10px}.home-version{opacity:.75}
.coop-status{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);max-width:min(560px,90vw);text-align:center;font-family:var(--hud-font);font-size:12px;letter-spacing:.08em;color:#c9d1d3;text-shadow:0 1px 4px #000;pointer-events:none}
.overlay[data-screen=pause] .coop-status,.overlay[data-screen=result] .coop-status,.overlay[data-screen=card] .coop-status{display:none}
/* Suche (Quick Match) */
.search{position:absolute;right:36px;bottom:40px;width:min(470px,calc(100vw - 72px));flex-direction:column;align-items:stretch;gap:8px;padding:22px 24px;background:var(--menu-bg);border:1px solid var(--menu-line);font-family:var(--hud-font);letter-spacing:.06em}
.search .eyebrow{color:var(--play);letter-spacing:.3em}
.search>b{font-size:30px;letter-spacing:.08em;color:#fff}
.search.err>b{color:#ff8a9a}
.search.counting>b{color:var(--play)}
.search-spin{display:flex;gap:5px;height:28px;align-items:flex-end}
.search-spin i{width:8px;background:var(--menu-hi);animation:pc-eq 1s ease-in-out infinite}.search-spin i:nth-child(2){animation-delay:-.25s}.search-spin i:nth-child(3){animation-delay:-.5s}.search-spin i:nth-child(4){animation-delay:-.75s}
.search.err .search-spin i{animation:none;height:4px;background:#ff8a9a}
@keyframes pc-eq{0%,100%{height:5px}50%{height:28px}}
.search>em{font-style:normal;font-size:22px;color:#c9d1d3;font-variant-numeric:tabular-nums}
.search-players{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.search-players li{padding:7px 10px;border:1px solid var(--menu-line);border-left:4px solid var(--c,#fff);font-size:14px;color:#fff}
.search-players li.empty{color:#5d6a6e;border-left-color:#3a4448}.search-players small{font-size:10px;color:var(--play);margin-left:6px}
.search-info{font-size:12px;color:#9aa6ad}
.search-btns{display:flex;gap:8px;margin-top:6px}.search-btns button{margin:0;border-radius:0;min-width:0}.search-btns .coop-btn{flex:1}
@media(prefers-reduced-motion:reduce){.search-spin i{animation:none;height:14px}}
/* Karte: Lobby (Freunde-Raum), Esc-Menü, Ergebnis, Survival-Ende */
.overlay>.startcard{align-self:center;margin:auto;max-width:min(620px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 32px);overflow:auto;background:var(--menu-bg);border:1px solid var(--menu-line);padding:26px 30px 20px;scrollbar-width:thin}
.overlay[data-screen=lobby]>.startcard{margin:auto 36px auto auto;max-width:min(520px,calc(100vw - 32px))}
.overlay[data-screen=result]>.startcard{max-width:min(860px,calc(100vw - 32px))}
.overlay[data-screen=pause]>.startcard{max-width:420px;text-align:center}
.overlay[data-screen=pause] .startcard h3{font-size:48px}
.card-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0 10px}
.card-actions>button{margin:0}.card-actions .primary{min-width:220px}
.pause-only,.card-back{display:none}
.overlay[data-screen=pause] .pause-only,.overlay[data-screen=result] .card-back,.overlay[data-screen=card] .card-back{display:inline-flex;align-items:center}
.overlay[data-screen=pause] .card-actions{flex-direction:column;align-items:stretch}.overlay[data-screen=pause] .card-actions>button{justify-content:center;min-width:0;font-size:14px;padding:12px}
.overlay[data-screen=pause] .card-actions .quiet{border:1px solid var(--menu-line);border-radius:0}
.overlay[data-screen=pause] #modePicker,.overlay[data-screen=pause] #arenaSetup,.overlay[data-screen=pause] #coopRoom,.overlay[data-screen=pause] .menu-links,.overlay[data-screen=pause] #arenaResult,.overlay[data-screen=pause] #arenaRating,.overlay[data-screen=pause] #clipCards,.overlay[data-screen=pause] #overlayHint,.overlay[data-screen=pause] #cardEyebrow{display:none}
.overlay:not(.is-online)[data-screen=card] #modePicker,.overlay[data-screen=result] #modePicker{display:none}
.overlay[data-screen=result] .card-actions{order:-1;margin:0 0 10px}.startcard.result-mode>.card-actions #start{font-size:20px;padding:14px 26px}
.card-back{border:1px solid var(--menu-line)!important;border-radius:0!important;font-size:13px!important;padding:12px 18px!important}
.lobby-class{margin:0;align-self:stretch}
#coopPlayers{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:5px}
#coopPlayers li{padding:7px 10px;border:1px solid var(--menu-line);border-left:4px solid currentColor;font-family:var(--hud-font);font-size:14px;letter-spacing:.05em}
.hud-menu{position:absolute;right:16px;bottom:14px;z-index:8;min-width:0;margin:0;height:32px;padding:0 10px;background:var(--hud-bg);border:1px solid var(--hud-line);border-radius:0;color:#ffffffaa;font:12px var(--hud-font);letter-spacing:.12em}
.hud-menu span{margin-left:6px;opacity:.7;font-size:10px}.hud-menu:disabled{display:none}.pvp-hud .hud-menu{display:none}
/* Klassenwahl: große Karten in der Bildschirmmitte (nach dem Tod, Taste B, CLASS-Knöpfe) */
.class-pick{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,6,8,.62);backdrop-filter:blur(3px);font-family:var(--hud-font);letter-spacing:.05em}
.class-pick[hidden]{display:none}
.cp-box{width:min(980px,100%);max-height:calc(100vh - 32px);overflow:auto;background:rgba(8,10,12,.95);border:1px solid var(--menu-line);padding:20px 24px 16px;scrollbar-width:thin}
.cp-head{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:12px;text-align:center}
.cp-head .eyebrow{color:var(--menu-hi);letter-spacing:.3em}.cp-head b{font-size:34px;letter-spacing:.1em;color:#fff}.cp-head em{font-style:normal;font-size:12px;letter-spacing:.14em;color:#9aa6ad;text-transform:uppercase}
.class-pick.dead .cp-box{border-color:rgba(229,72,77,.55)}.class-pick.dead .cp-head .eyebrow{color:#e5484d}.class-pick.dead .cp-head b{color:#ffb3b8}
.cp-slots{display:flex;gap:6px;justify-content:center;margin-bottom:12px}.cp-slots[hidden]{display:none}
.cp-slot{display:flex;flex-direction:column;align-items:flex-start;min-width:170px;margin:0;padding:6px 14px;background:transparent;border:1px solid var(--menu-line);border-radius:0;color:#c9d1d3;font-family:var(--hud-font)}
.cp-slot small{font-size:10px;letter-spacing:.2em;color:#8c9a9d}.cp-slot b{font-size:18px;letter-spacing:.08em}
.cp-slot.on{border-color:var(--play);color:#fff;box-shadow:inset 0 -3px 0 var(--play)}
.cp-cards{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px}
.cp-cards .weapon-choice{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr;column-gap:12px;align-items:start;min-height:112px;margin:0;padding:12px 14px;background:rgba(20,26,30,.8);border:1px solid var(--menu-line);border-left:4px solid var(--weapon);border-radius:0;color:#e9eef0;font-family:var(--hud-font);text-align:left;letter-spacing:.05em}
.cp-cards .weapon-choice:before{display:none}
.cp-cards .wc-ic{grid-row:1 / 4;width:64px;color:var(--weapon)}.cp-cards .wc-ic svg{width:64px;height:26px;display:block;margin-top:6px}
.cp-cards .weapon-choice b{font-size:22px;letter-spacing:.08em;text-transform:uppercase}.cp-cards .weapon-choice small{font-size:11px;letter-spacing:.16em;color:#9aa6ad;text-transform:uppercase}
.cp-cards .weapon-choice em{font-style:normal;font-size:12px;letter-spacing:.02em;color:#b9c3c7;margin-top:6px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.cp-cards .wc-key{position:absolute;left:8px;bottom:6px;font-style:normal;font-size:10px;color:#5d6a6e}
.cp-cards .weapon-choice:hover:not(:disabled){border-color:#fff;border-left-color:var(--weapon)}
.cp-cards .weapon-choice.selected{background:color-mix(in srgb,var(--weapon) 16%,rgba(14,18,20,.9));border-color:var(--weapon)}
.cp-cards .weapon-choice.slot-active{box-shadow:0 0 0 2px var(--play)}
.cp-cards .weapon-choice[data-slot]:not([data-slot=""])::after{content:attr(data-slot);position:absolute;right:8px;top:8px;width:22px;height:22px;display:grid;place-items:center;background:var(--weapon);color:#0a0d10;font-weight:700;font-size:13px}
.cp-cards .weapon-choice:disabled{opacity:.45}.cp-cards .weapon-choice.selected:disabled{opacity:1}
.cp-info{display:flex;gap:20px;justify-content:space-between;align-items:flex-end;margin-top:12px;flex-wrap:wrap}
.cp-detail h1{font-size:26px;margin:0;letter-spacing:.04em}.cp-detail .intro{margin:2px 0;font-size:13px;color:#b9c3c7}.cp-detail .weapon-caption{position:static;display:block;font-size:10px;letter-spacing:.2em;color:#8c9a9d}
.class-pick .skin-section .eyebrow{font-size:10px;letter-spacing:.2em}.class-pick .skin-section b{font-size:12px;letter-spacing:.1em;margin-left:6px}
.class-pick .loadout-hint{display:block;font-size:11px;color:#9aa6ad;margin-top:4px}
.class-pick .skin-section{display:flex;flex-direction:column;gap:6px}.class-pick .skin-swatches{display:flex;flex-wrap:wrap;gap:5px;max-width:480px}
.class-pick .skin-choice{border-radius:0;height:28px;font-size:11px}
.cp-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;border-top:1px solid var(--menu-line);padding-top:12px}
.cp-hint{font-size:11px;letter-spacing:.1em;color:#8c9a9d}.cp-foot .primary{margin:0;min-width:160px;border-radius:0}
.arena-next{font-size:11px;letter-spacing:.12em;color:#c9d1d3;margin-top:2px}
.wave-break button.quiet{margin-left:6px;border:1px solid #ffffff30}
/* Einstellungen (Zahnrad): Tabs Audio / Graphics / Controls / Camera */
.set-dialog{max-width:720px;width:calc(100vw - 32px);max-height:88vh;overflow:auto;background:rgba(10,13,15,.97);border:1px solid rgba(205,210,214,.2);border-radius:0;color:#e9eef0;padding:18px 24px 22px;scrollbar-width:thin}
.set-dialog::backdrop{background:rgba(0,0,0,.55)}
.set-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--hud-font)}.set-head b{font-size:28px;letter-spacing:.14em}
.set-head .close{min-width:0;margin:0}
.set-tabs{display:flex;gap:4px;margin:10px 0 14px;border-bottom:1px solid var(--menu-line)}
.set-tab{min-width:0;flex:0 0 auto;margin:0 0 -1px;padding:8px 16px;background:transparent;border:1px solid transparent;border-radius:0;color:#9aa6ad;font:600 14px var(--hud-font);letter-spacing:.14em;text-transform:uppercase}
.set-tab.on{color:#fff;border-color:var(--menu-line);border-bottom-color:rgba(10,13,15,.97);box-shadow:inset 0 3px 0 var(--play)}
.set-pane[hidden]{display:none}
.set-pane .volume{display:block;margin:12px 0 2px}.set-pane .toggle{margin:12px 0}.set-pane .sound-controls{margin:10px 0 4px}
.set-pane .sound-controls label{flex:1 1 180px}.set-pane .sound-controls select{width:100%}
.set-sub{display:block;margin:18px 0 6px;color:var(--menu-hi)}
.set-pane .controls-list{margin-top:14px}
.menu-row{display:flex;gap:8px;margin-top:12px}.menu-row .quiet{border:1px solid var(--menu-line);border-radius:0;padding:8px 14px;min-width:0;flex:0 0 auto;margin:0}
@media(max-width:720px){
  .home-top{left:12px;right:12px;top:12px}.home-idtext input{width:120px;font-size:16px}.home-tool{width:54px;height:52px}.home-tool small{display:none}
  .home-logo{top:84px}.home-logo b{font-size:28px}.home-side,.search{right:16px;left:16px;width:auto;bottom:44px}.play-btn{height:78px}.play-btn b{font-size:40px}
  .hm-btn b{font-size:16px}.home-foot{left:16px;bottom:12px}.cp-cards{grid-template-columns:1fr 1fr}.cp-head b{font-size:24px}
  .overlay[data-screen=lobby]>.startcard{margin:auto}
}
@media(max-height:620px){.home-logo{display:none}.play-btn{height:72px}.cp-cards .weapon-choice{min-height:84px}.cp-cards .weapon-choice em{display:none}}
.overlay>.startcard h3{font-family:var(--hud-font);font-weight:600;letter-spacing:.05em;text-transform:uppercase;line-height:.95;margin:6px 0 10px}
.overlay[data-screen=result]>.startcard h3{font-size:72px;text-align:center}.overlay[data-screen=result] #overlayText{text-align:center;margin-top:0}
/* FFA-Ergebnis (18.10.): Sieger groß in seiner Farbe, eigener Platz, Platzierungs-Tabelle mit Krone, Rating je Zeile */
.ar-win{display:block;text-shadow:0 0 18px currentColor}.ar-tied{display:block;font-size:13px;letter-spacing:.12em;color:#c9d3d5;margin-top:4px}
.arena-result .ar-place{font:600 20px/1.1 var(--hud-font);letter-spacing:.18em;color:#fff;margin:0 0 8px}
.arena-result table.ar-ffa td.ar-pl{width:2em;text-align:center;color:#c9d3d5;font-weight:600}.arena-result table.ar-ffa th:first-child{text-align:center}
.arena-result table.ar-ffa td:nth-child(2){text-align:left}.arena-result .ar-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}
.arena-result table.ar-ffa tr.winner td{background:#ffd54a14;border-top:1px solid #ffd54a80;border-bottom:1px solid #ffd54a80}.arena-result table.ar-ffa tr.winner td.ar-pl{color:#ffd54a;font-size:16px}
.arena-result table.ar-ffa tr.me td{box-shadow:inset 0 0 0 9999px #2fd6e612}.arena-result table.ar-ffa tr.me td:first-child{box-shadow:inset 3px 0 0 #2fd6e6,inset 0 0 0 9999px #2fd6e612}
.arena-result .ar-rt.up{color:#6fe39a}.arena-result .ar-rt.down{color:#ff7a7a}
/* ===== Getroffen-Feedback (Louis 18.10.2026): Richtungsbögen um das Fadenkreuz, Ghost Damage, Angreifer-Markierung, Todes-Info ===== */
.hurt-arcs{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.hurt-arc{position:absolute;left:50%;top:50%;width:calc(min(100vw,100vh) * var(--arc-size,59) / 100);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);will-change:transform,opacity;overflow:visible}
.hurt-arc .ha-glow{opacity:.32}
.hurt-arc .ha-core{opacity:.95}
.hb-hp,.pv-bar{position:relative}
.hp-ghost{position:absolute;left:0;top:0;bottom:0;width:100%;background:#fff3d6;opacity:.85;pointer-events:none;text-decoration:none}
.hb-hp i,.pv-bar i{position:relative;z-index:1}
.mate-label.pvp.mark span{display:block;opacity:1;margin-bottom:3px;color:#fff;text-shadow:0 0 6px currentColor,0 1px 2px #000}
.mate-label.pvp.mark::after{border-top-color:#ff3b47;transform:scale(1.35);filter:drop-shadow(0 0 5px #ff3b47)}
.mate-label.pvp.mark b{box-shadow:0 0 0 1px #fff8}
.cp-killer{display:block;margin-top:6px;font:700 12px/1.2 var(--hud-font);letter-spacing:.14em;color:#ffb4b8}
.cp-killer[hidden]{display:none}
.class-pick.dead .cp-head .eyebrow{font-size:13px;letter-spacing:.16em}
/* Zombies (Louis 19.10.2026): Reparatur-Fortschritt im Kauf-Hinweis, REMAINING */
.buy-prompt.rep{padding-bottom:13px}
.buy-prompt.rep::after{content:'';position:absolute;left:12px;right:12px;bottom:5px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--c,#ffd27a) calc(var(--prog,0) * 100%),rgba(255,255,255,.18) 0)}
.hud-stats .z-remain[hidden]{display:none}.hud-stats .z-remain.low b{color:#ffd27a}
/* ---------- HANDY (17.10.2026): Touch-UI nur mit html/body.touch (pointer: coarse oder ?touch=1); am PC greift nichts davon ---------- */
html.touch,body.touch{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body.touch #viewport{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.touch .startcard,body.touch dialog,body.touch .class-pick .cp-box{touch-action:pan-y}
.touch-ui{position:absolute;inset:0;z-index:9;display:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:var(--hud-font)}
.touch-ui.on{display:block}
body.touch .ladder,body.touch #octPop,body.touch .hud-menu,body.touch .pvp-abil,body.touch .intro-keys,body.touch .fs-offer{display:none!important}
/* Stick: schwebend (Basis dort, wo der Daumen aufsetzt), ruhend als blasser Hinweis unten links nah an der Ecke (v4: 75 %, Größe = 2 × TOUCH.stick.radius) */
.t-stick{position:absolute;left:0;top:0;width:calc(2 * var(--t-stickr));height:calc(2 * var(--t-stickr));border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(8,10,12,.28);pointer-events:none}
.t-stick:not(.on){transform:none!important;left:calc(var(--t-sl) + var(--t-stickx));top:auto;bottom:calc(var(--t-sb2) + var(--t-sticky));opacity:.22}
.t-stick i{position:absolute;left:50%;top:50%;width:calc(.9 * var(--t-stickr));height:calc(.9 * var(--t-stickr));margin:calc(-.45 * var(--t-stickr)) 0 0 calc(-.45 * var(--t-stickr));border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 8px #0006}
.t-stick:not(.on) i{transform:none!important}
.t-stick.sprint{border-color:#c5f56e}.t-stick.sprint i{background:#c5f56e}
/* Griffbrett-Leiste rechts unten in der Ecke (v4, wie der Feuerknopf bei CoD Mobile): Zonen der Lage (Akkordtöne breit + hell, Grundton am hellsten, Zwischentöne schmal), Marker = Finger */
.t-strip{position:absolute;right:0;top:auto;bottom:max(var(--t-stripb),var(--t-sb));height:min(calc(100% - 16px),calc(var(--t-striphk,1) * 100%));width:calc(var(--t-stripw) + var(--t-sr));padding-right:var(--t-sr);display:flex;flex-direction:column;border-radius:14px 0 0 14px;overflow:hidden;background:rgba(8,10,12,.5);border:1px solid rgba(205,210,214,.32)}
.t-strip.playing{border-color:var(--hud-cy);box-shadow:0 0 10px rgba(47,214,230,.35)}
.t-lage{flex:none;height:30px;display:flex;align-items:center;justify-content:center;color:#ffffffb0;font-size:13px;background:rgba(255,255,255,.04)}
.t-lage.lo{border-top:1px solid rgba(255,255,255,.12)}.t-lage.hi{border-bottom:1px solid rgba(255,255,255,.12)}
.t-lage.pressed{background:rgba(47,214,230,.32)}
.t-zones{position:relative;flex:1;overflow:hidden}
.t-zone{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:flex-end;padding-right:7px;font-size:12px;letter-spacing:.06em;color:#ffffff70;border-top:1px solid rgba(255,255,255,.07);pointer-events:none}
.t-zone.thin span{font-size:9px;opacity:.7}
.t-zone.chord{background:rgba(47,214,230,.12);color:#cfeff3}
.t-zone.root{background:rgba(47,214,230,.24);color:#fff}
.t-zone.cur{background:rgba(47,214,230,.62);color:#031418}
.t-zone.cur.next{outline:1px dashed #fff;outline-offset:-3px}
.t-zone.mh{--mh:#ffd25a;box-shadow:inset 6px 0 0 var(--mh);color:#fff}
.t-zone.mh-root{--mh:#c5f56e}.t-zone.mh-fifth{--mh:#9fcf5a}.t-zone.mh-next{--mh:#ff6bd5;animation:mhPulseT .5s ease-in-out infinite alternate}@keyframes mhPulseT{from{opacity:.55}to{opacity:1}}
.t-zone.mh-motif{--mh:#ffe08a}.t-zone.mh-motif-fin{--mh:#ffd25a;animation:mhPulseT .4s ease-in-out infinite alternate}
.t-zone.mh-tight{--mh:#ff7d92}.t-zone.mh-mid{--mh:#ffb3c0}.t-zone.mh-wide{--mh:#8fd0ff}
.t-zone.mh:not(.cur){background:color-mix(in srgb,var(--mh) calc(10% + 22% * var(--mhk,1)),transparent)}
.t-marker{position:absolute;left:0;right:0;top:0;height:3px;margin-top:-1.5px;background:#fff;box-shadow:0 0 8px #fff;pointer-events:none}
.t-lagetag{position:absolute;left:7px;top:8px;font-size:11px;letter-spacing:.1em;color:#ffffffb0;white-space:nowrap;text-shadow:0 1px 2px #000;pointer-events:none}
.t-lage.hi{justify-content:flex-end;padding-right:10px}
/* Knöpfe */
.t-btn{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:rgba(8,10,12,.5);border:1px solid rgba(205,210,214,.45);color:#fff;font-size:12px;letter-spacing:.1em;line-height:1}
.t-btn b{font-weight:600}.t-btn small{font-size:9px;letter-spacing:.14em;color:#ffffffa0}
.t-btn.pressed{transform:scale(.92);background:rgba(47,214,230,.32)}
.t-dash,.t-swap,.t-turn{left:calc(var(--t-sl) + var(--x) - var(--t-btn) / 2);bottom:calc(var(--t-sb2) + var(--y) - var(--t-btn) / 2);width:var(--t-btn);height:var(--t-btn)}
body.touch #viewport{--t-sr:var(--t-sr-test,env(safe-area-inset-right,0px));--t-sl:var(--t-sl-test,env(safe-area-inset-left,0px));--t-sb:var(--t-sb-test,env(safe-area-inset-bottom,0px));--t-sb2:max(0px,calc(var(--t-sb) - 10px));--t-mw:min(var(--t-mapw),calc((100vw - var(--t-sl) - var(--t-sr)) * var(--t-midk,.2) - var(--t-edge) - 2px));--t-mh:calc(var(--t-mw) * var(--t-mapk,.667))} /* Safe-Area (Test: ui.setInsets); sb2 = unterer Rand ohne die ersten 10 px (Home-Balken liegt im eigenen Abstand); mw/mh = Minimap, höchstens so breit, dass sie neben dem freien Mittelfeld bleibt */
.t-probe{position:absolute;left:0;top:0;height:0;visibility:hidden;pointer-events:none}.t-probe-l{width:var(--t-sl)}.t-probe-r{width:var(--t-sr)}
/* linker Daumen (v4): DASH rechts neben dem Stick, SWAP darüber, ↻ links darüber (Mittelpunkte --x/--y aus TOUCH.layout) */
.t-swap{display:none}.t-swap small{font-size:7px;letter-spacing:.1em}
.t-turn{font-size:19px}.t-dash b{font-size:11px}
.t-swap .t-wn{font-size:8px;margin-top:2px;white-space:nowrap;letter-spacing:.04em}
.touch-ui.arena .t-swap{display:flex}
.t-menu,.t-class,.t-fs{top:var(--t-edge);right:calc(var(--t-sr) + var(--t-edge) + var(--t-mw) + var(--t-topgap) + var(--i) * (var(--t-top) + var(--t-topgap)));width:var(--t-top);height:var(--t-top);border-radius:50%;font-size:13px}
.t-menu{--i:0}.t-class{--i:1}.t-fs{--i:2} /* oben rechts links neben der Minimap: II · B · ⤢ */
.t-map{top:var(--t-edge);right:calc(var(--t-sr) + var(--t-edge));width:var(--t-mw);height:var(--t-mh);border-radius:10px;background:transparent;border:0}.t-map.pressed{transform:none;background:rgba(47,214,230,.18)} /* Tippfläche auf der Minimap */
/* Fähigkeiten 1–4: Bogen links neben der Leiste (rechter Daumen), Mittelpunkte --x (von rechts) / --y (von unten) */
.t-abil{position:absolute;inset:0;display:none;pointer-events:none}
.touch-ui.abil .t-abil{display:block}
.t-ab{position:absolute;right:calc(var(--t-sr) + var(--x) - var(--t-ab) / 2);bottom:calc(var(--t-sb2) + var(--y) - var(--t-ab) / 2);width:var(--t-ab);height:var(--t-ab);border-radius:50%;pointer-events:auto}
.t-ab .t-ic svg,.t-ab .t-ic .ab-ic{width:22px;height:22px;display:block}
.t-ab em{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-style:normal;font-size:10px;color:#fff;text-shadow:0 1px 2px #000}
.t-ab kbd{position:absolute;left:-2px;top:-2px;min-width:14px;height:14px;line-height:14px;text-align:center;font-size:9px;border:1px solid rgba(205,210,214,.6);background:rgba(8,10,12,.8);font-family:inherit}
.t-ab.ready{border:2px solid #f5b83d;color:#ffd27a;box-shadow:0 0 10px rgba(245,184,61,.35)}
.t-ab.cd{color:#ffffff70}.t-ab.active{border:2px solid #f5b83d;color:#ffd27a}.t-ab.blocked{border-color:#e5484d}
/* große Karte offen (Minimap angetippt): Ebene lässt Tippen durch (schließt die Karte), nur Knöpfe bleiben */
.touch-ui.mapopen{pointer-events:none}.touch-ui.mapopen .t-btn{pointer-events:auto}
/* ===== Handy-HUD Layout v4 (Louis 19.10.2026, Vorbild CoD Mobile docs/ref-look/handy-hud-codm.jpg): Mitte frei. Oben links Score/Zeit/Modus
   (Survival: Welle, Kills, Zeit, REMAINING, Cash), oben rechts Minimap + Icons + Killfeed, unten Mitte schmal Waffen + HP/Energie + Groove,
   Pops oben mittig. Maße als --t-* aus TOUCH.layout (touchui.mjs setzt sie auf #viewport). PC unverändert. ===== */
body.touch .hud-tr{position:static} /* Kinder (Minimap, Killfeed, Score) richten sich nach der Spielansicht */
body.touch .hud-tr .minimap{position:absolute;right:calc(var(--t-sr) + var(--t-edge));top:var(--t-edge);width:var(--t-mw);height:var(--t-mh);border-radius:10px;opacity:.86;border-color:rgba(225,230,233,.4);pointer-events:none}
body.touch .hud-tr .kill-feed{position:absolute;right:calc(var(--t-sr) + var(--t-edge));top:calc(var(--t-edge) + var(--t-mh) + 6px);max-width:var(--t-mw);font-size:9px;gap:2px;pointer-events:none}
body.touch.pvp-hud .hud-tr .kill-feed{display:flex}
body.touch .kf-row{padding:2px 5px;gap:4px}body.touch .kf-row svg{width:22px;height:9px}
body.touch #pvpKey,body.touch #beatBar,body.touch .hud-tl .logo-row,body.touch .hud-bl .loop-hud,body.touch .hud-bl .hb-swap,body.touch .srv-hud small{display:none!important}
body.touch.pvp-hud .pvp-top{left:calc(var(--t-sl) + var(--t-edge));top:var(--t-edge);transform:scale(.7);transform-origin:0 0;gap:12px;padding:4px 14px 3px}
body.touch:not(.pvp-hud) .hud-tl{left:calc(var(--t-sl) + var(--t-edge));top:var(--t-edge);width:auto;padding:4px 9px 3px;background:rgba(8,10,12,.5);border:1px solid rgba(205,210,214,.18)}
body.touch .hud-stats{margin:0;padding:0;border:0;gap:7px}
body.touch .hud-stats span{gap:4px}
body.touch .hud-stats small{font-size:10px;letter-spacing:.12em}
body.touch .hud-stats b{font-size:13px}
body.touch .hud-stats .sep{height:10px}
body.touch .eco-hud{left:calc(var(--t-sl) + var(--t-edge));right:auto;top:calc(var(--t-edge) + 30px);bottom:auto;flex-direction:row-reverse;align-items:center;gap:6px;text-align:left}
body.touch .eco-hud .cash-box{min-width:0;padding:1px 8px 2px}
body.touch .eco-hud .cash-line small{font-size:10px}
body.touch .eco-hud .cash-line b{font-size:14px;margin-left:6px}
body.touch .eco-hud .srv-hud{padding:1px 6px;font-size:10px}
body.touch .perk-icons i{width:16px;height:20px;font-size:9px}
body.touch .power-hud{left:calc(var(--t-sl) + var(--t-edge));top:calc(var(--t-edge) + 56px);bottom:auto;transform:scale(.7);transform-origin:0 0;flex-direction:column;align-items:flex-start}
body.touch .hud-tr .score-box{position:absolute;right:calc(var(--t-sr) + var(--t-edge));top:calc(var(--t-edge) + var(--t-mh) + 6px);padding:1px 8px;gap:6px}
body.touch .score-box small{font-size:10px}body.touch .score-box b{font-size:14px}body.touch .score-box em{font-size:9px}body.touch .score-box .best-line{display:none}
body.touch .fx-hud{left:auto;right:calc(var(--t-sr) + var(--t-edge));top:calc(var(--t-edge) + var(--t-mh) + 30px);transform:scale(.7);transform-origin:100% 0;align-items:flex-end}
body.touch.pvp-hud .arena-feed{left:calc(var(--t-sl) + var(--t-edge));top:calc(var(--t-edge) + 40px);font-size:9px;max-width:160px}
body.touch #viewport .boss-bar{top:var(--t-edge);width:min(26vw,220px,calc(100vw - 2 * (max(var(--t-sl),var(--t-sr)) + var(--t-edge) + var(--t-mw) + 4 * var(--t-topgap) + 3 * var(--t-top)) - 16px));font-size:10px}body.touch #viewport .boss-bar .bb-phase{margin-top:2px;font-size:8px} /* schmal zwischen Score-Block und Icons (#viewport: vor boss.css) */
body.touch .practice-hint{top:var(--t-edge);font-size:10px}
body.touch .groove-pops{left:50%;transform:translateX(-50%);top:calc(var(--t-edge) + 40px);bottom:auto;align-items:center}
body.touch .gp-line{font:600 11px/1.15 var(--hud-font);letter-spacing:.1em}
body.touch .feel-pop{top:var(--t-edge)}body.touch .feel-pop b{font-size:14px}body.touch .feel-pop em{font-size:13px}
body.touch .milestone{top:calc(var(--t-edge) + 36px);transform:translateX(-50%)}body.touch .milestone b{font-size:18px}body.touch .milestone small{font-size:9px;margin-top:1px}
body.touch .loc-banner{top:calc(var(--t-edge) + 40px);font-size:15px;letter-spacing:4px}
body.touch .buy-prompt{left:calc(var(--t-sl) + 16px);transform:none;bottom:calc(var(--t-sb2) + var(--t-useh) / 2 + 206px);max-width:calc((100vw - var(--t-sl) - var(--t-sr)) * var(--t-midk,.2) - 20px);padding:4px 8px;font-size:11px;text-align:left}
/* unten Mitte: Waffen-Slots (aktiv hervorgehoben), darunter dünner HP- und Energie-Balken; Groove-Zeile direkt darüber */
body.touch.pvp-hud .pvp-vitals{left:50%;top:auto;bottom:calc(var(--t-sb2) + var(--t-vitb));width:var(--t-vitw);transform:translateX(-50%);display:grid;grid-template-columns:28px 1fr;column-gap:6px;row-gap:3px;align-items:center}
body.touch.pvp-hud .pv-weapons{grid-column:1/-1;order:-1;margin:0 0 1px;gap:4px}
body.touch.pvp-hud .pv-w{height:24px;padding:0 6px;gap:6px}
body.touch.pvp-hud .pv-wi svg{width:30px;height:12px}
body.touch.pvp-hud .pv-w b{font-size:10px;letter-spacing:.08em}
body.touch.pvp-hud .pv-line{grid-column:1;justify-content:flex-end}
body.touch.pvp-hud .pv-line small,body.touch.pvp-hud .pv-line em{display:none}
body.touch.pvp-hud .pv-line b{font-size:11px;margin:0}
body.touch.pvp-hud .pv-bar{grid-column:2;height:5px;margin:0}
body.touch.pvp-hud .pv-line:has(#pvpEn){display:none}
body.touch.pvp-hud .pv-en{height:3px}
body.touch.pvp-hud .pv-shield.on{display:block;position:absolute;left:34px;right:0;top:25px}body.touch.pvp-hud .pv-shield .pv-line{display:none}body.touch.pvp-hud .pv-shield .pv-bar{height:2px}
body.touch:not(.pvp-hud) .hud-bl{left:50%;top:auto;bottom:calc(var(--t-sb2) + var(--t-vitb));width:var(--t-vitw);transform:translateX(-50%);gap:3px}
body.touch .hud-bl .hb-weapon{order:-1;height:24px;padding:0 6px;gap:6px}
body.touch .hud-bl .wpn-icon{width:30px;height:12px}
body.touch .hud-bl .hb-wname b{font-size:10px}body.touch .hud-bl .hb-wname em{font-size:8px}
body.touch .hud-bl .hb-slot{padding:0 5px;font-size:11px}
body.touch .hud-bl .hb-vitals{display:grid;grid-template-columns:28px 1fr;column-gap:6px;row-gap:3px;align-items:center;padding:0;background:none;border:0}
body.touch .hb-vitals .hb-line{grid-column:1;justify-content:flex-end;gap:0}
body.touch .hb-vitals .hb-line small{display:none}
body.touch .hb-vitals .hb-line b{font-size:11px}
body.touch .hb-vitals .hb-line:has(#energyText){display:none}
body.touch .hb-vitals .hb-hp,body.touch .hb-vitals .hb-en{grid-column:2;height:5px;margin:0}
body.touch .hb-vitals .hb-en{height:3px}
body.touch .groove-bar{left:50%;top:auto;bottom:calc(var(--t-sb2) + var(--t-vitb) + var(--t-vith) + 3px);width:var(--t-vitw);transform:translateX(-50%);padding:0;gap:6px;background:none;border:0;backdrop-filter:none;text-shadow:0 1px 3px #000c}
body.touch .groove-bar .groove-sym,body.touch .groove-bar .groove-max{display:none!important}
body.touch #grooveNum{order:0;min-width:18px;font-size:12px;font-weight:600;color:var(--gcol,#2fd6e6)}
body.touch .groove-track{order:2;flex:1;width:auto;height:5px;margin:0}
body.touch .groove-role{order:3;font-size:7px;padding:1px 3px}
body.touch .groove-combo{display:flex;order:4;align-items:baseline;gap:4px}body.touch .groove-combo small{font-size:9px}body.touch .groove-combo b{font-size:12px}
body.touch .groove-track s{background:#fff;opacity:.55;transition:opacity .12s,box-shadow .12s}
body.touch .groove-bar.pulse .groove-track s{opacity:1;box-shadow:0 0 6px #fff}
body.touch .groove-bar[data-tier="0"]{--gcol:#ff8a8d}body.touch .groove-bar[data-tier="1"]{--gcol:#2fd6e6}body.touch .groove-bar[data-tier="2"]{--gcol:#c79bff}
/* Fadenkreuz der Zielhilfe: enger mit dem Groove, leuchtet in der Stufenfarbe, solange ein Ziel gehalten wird (Handy und PC) */
.crosshair.aa{width:calc(34px * var(--aas,1));height:calc(34px * var(--aas,1));margin:calc(-17px * var(--aas,1)) 0 0 calc(-17px * var(--aas,1));transition:width .15s,height .15s,margin .15s}
.pvp-hud .crosshair.aa{width:calc(30px * var(--aas,1));height:calc(30px * var(--aas,1));margin:calc(-15px * var(--aas,1)) 0 0 calc(-15px * var(--aas,1))}
.crosshair.aa-lock{filter:drop-shadow(0 0 calc(var(--aag,0) * 6px) var(--aac,#fff)) drop-shadow(0 0 calc(var(--aag,0) * 2px) var(--aac,#fff))}
/* Hochformat: bitte drehen; iOS: Hinweis „Zum Home-Bildschirm“; Bildraten-Anzeige (?fps=1) */
.rotate-hint{display:none}
@media (orientation:portrait){html.touch .rotate-hint{display:flex;position:fixed;inset:0;z-index:2000;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:#0b1020f5;color:#fff;font:600 19px/1.3 var(--hud-font);letter-spacing:.08em;text-transform:uppercase}}
.rotate-hint b{font-size:64px;line-height:1;color:var(--hud-cy);animation:t-rot 2.4s ease-in-out infinite}
@keyframes t-rot{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
.home-hint{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:1500;display:flex;gap:12px;align-items:center;padding:8px 10px 8px 14px;background:#192225f2;border:1px solid #81e2eb66;color:#eef1ee;font-size:13px;max-width:calc(100vw - 24px)}
.home-hint[hidden]{display:none}.home-hint button{background:none;border:0;color:#fff;font-size:20px;padding:0 6px}
.fps-meter{position:absolute;left:50%;top:2px;transform:translateX(-50%);z-index:50;font:600 11px/1.4 ui-monospace,monospace;color:#c5f56e;background:#000b;padding:1px 6px;pointer-events:none}
.touch-settings{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12)}
/* Handy-Menüs (Querformat, geringe Höhe): kompakter Start-Screen, große Tipp-Ziele, Karten scrollen */
@media (max-height:520px){
html.touch .home-top{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));top:10px}
html.touch .home-id{padding:5px 10px 5px 5px}html.touch .home-avatar{width:36px;height:36px}html.touch .home-idtext input{font-size:17px;width:150px}
html.touch .home-tool{width:58px;height:48px}html.touch .home-tool small{font-size:9px}
html.touch .home-logo{top:14px}html.touch .home-logo b{font-size:24px}html.touch .home-logo span{font-size:10px;letter-spacing:.3em}
html.touch .home-side{right:max(12px,env(safe-area-inset-right));bottom:10px;width:min(440px,calc(100vw - 260px));gap:6px}
html.touch .hm-btn{padding:6px 10px;min-height:44px}html.touch .hm-btn b{font-size:16px}html.touch .hm-btn small{font-size:9px}
html.touch .play-btn{height:66px}html.touch .play-btn b{font-size:38px}
html.touch .home-chip{padding:6px 10px;min-height:44px}
html.touch .home-foot{left:max(12px,env(safe-area-inset-left));bottom:8px}
html.touch .search{right:12px;bottom:10px;padding:12px 16px;gap:5px}
html.touch .overlay>.startcard{max-height:calc(100vh - 16px);padding:14px 18px 12px}
html.touch .overlay[data-screen=lobby]>.startcard{margin:auto 12px auto auto}
html.touch .startcard h3{font-size:26px;margin:4px 0}
html.touch .class-pick .cp-box{max-height:calc(100vh - 12px);overflow:auto}
html.touch .set-dialog,html.touch .lb-dialog,html.touch .ideas-dialog{max-height:calc(100vh - 16px)}
}
html.touch button,html.touch select,html.touch .hm-btn{touch-action:manipulation}
/* ===== Fähigkeiten 1–4 in allen Modi (Louis 18.10.2026): Survival/Soundcheck zeigen dieselben Kacheln wie das PvP-HUD (body.abil-hud, game.js) ===== */
body.abil-hud{--groove-y:196px}
body.abil-hud:not(.touch) .beat-hud{bottom:112px} /* Survival: Kacheln unten, Beat-Leiste + Groove darüber gestapelt */
.abil-hud .pvp-abil{display:flex;position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;gap:28px}

/* Zombies (Louis 19.10.2026): Barrikaden reparieren (Fortschritt im Kauf-Hinweis), Wandkäufe, REMAINING, Handy-Q-Knopf über dem linken Bogen */
.t-use{left:calc(var(--t-sl) + var(--x) - var(--t-usew) / 2);bottom:calc(var(--t-sb2) + var(--y) - var(--t-useh) / 2);width:var(--t-usew);height:var(--t-useh);border-radius:20px;display:none;flex-direction:row;gap:8px;border-color:#ffd27a;background:rgba(40,30,8,.62)}
.t-use b{font-size:17px;color:#ffd27a}.t-use small{font-size:10px;letter-spacing:.1em;color:#fff;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.touch-ui.use .t-use,.touch-ui.slots2 .t-swap{display:flex}