/* Layout: Vollbild-WebGL-Bühne, HUD an den Ecken wie bei einem Konsolen-Shooter
   (Runden-Strichliste unten links, Punkte + Munition unten rechts). Bewusst nur ein dunkles Design. */
:root{
  --ink:#070b0d;
  --panel:rgba(9,13,15,.84);
  --line:rgba(236,228,207,.16);
  --bone:#ece4cf;
  --bone-dim:#a8a291;
  --blood:#b3121c;
  --blood-hi:#ff3a3f;
  --rust:#e8902e;
  --moss:#9cc46e;
  --f-display:"Bungee", Impact, "Arial Black", sans-serif;
  --f-body:"Chakra Petch", "Segoe UI", system-ui, sans-serif;
  color-scheme:dark;
  box-sizing:border-box;
  /* Mauszeiger im Spieldesign (img/cursor/*.svg, Zahlen = Spitze des Zeigers), dahinter der normale Zeiger als Ersatz */
  --cur-default:url(../img/cursor/default.svg) 3 2,default;
  --cur-pointer:url(../img/cursor/pointer.svg) 3 2,pointer;
  --cur-blocked:url(../img/cursor/blocked.svg) 3 2,not-allowed;
  --cur-locked:url(../img/cursor/locked.svg) 3 2,help;
  --cur-text:url(../img/cursor/text.svg) 16 16,text;
  --cur-grab:url(../img/cursor/grab.svg) 16 16,grab;
  --cur-grabbing:url(../img/cursor/grabbing.svg) 16 16,grabbing;
}
/* Mauszeiger: Standard überall, Hand für alles Anklickbare, Textcursor in Eingabefeldern
   (im Spiel ist der Zeiger gesperrt und unsichtbar) */
html,body{cursor:var(--cur-default)}
a[href],button,select,summary,label,[role="tab"],input[type="checkbox"],input[type="radio"],input[type="range"],input[type="submit"]{cursor:var(--cur-pointer)}
input:not([type]),input[type="text"],input[type="password"],input[type="email"],input[type="search"],input[type="number"],textarea{cursor:var(--cur-text)}
:disabled,button:disabled,input:disabled,select:disabled{cursor:var(--cur-blocked)}
.pRow:active{cursor:var(--cur-grabbing)}
/* Scrollleisten: schmal, dunkle Spur, blutroter Griff (Chrome/Edge/Safari) – Firefox kennt nur Farben */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(7,11,13,.55);box-shadow:inset 1px 0 0 var(--line)}
::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#7a0c13,var(--blood) 45%,#7a0c13);border:2px solid transparent;background-clip:padding-box;min-height:36px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#9a1018,var(--blood-hi) 45%,#9a1018);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:var(--bone);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-button{display:none}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--blood) rgba(7,11,13,.55)}}
html,body{margin:0;padding:0;height:100%;background:var(--ink);color:var(--bone);font-family:var(--f-body);overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
#app{position:fixed;inset:0;background:var(--ink)}
#stage{position:absolute;inset:0}
#stage canvas{display:block;width:100%;height:100%}
.hud{position:absolute;inset:0;pointer-events:none}
[hidden]{display:none!important}

/* Vignetten */
#hurt{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(150,0,8,.85) 100%);opacity:0;transition:opacity .15s}
#downed{position:absolute;inset:0;background:rgba(120,0,0,.35);backdrop-filter:grayscale(1)}

/* Fadenkreuz */
/* dünne Linien, beim Zielen nur ein kleiner Punkt in der Mitte */
#xh{position:absolute;left:50%;top:50%;width:0;height:0;--gap:8px;--lines:1}
#xh i{position:absolute;background:var(--bone);box-shadow:0 0 1px rgba(0,0,0,.9);opacity:var(--lines)}
#xh i:nth-child(1){width:1px;height:7px;left:0;bottom:var(--gap)}
#xh i:nth-child(2){width:1px;height:7px;left:0;top:var(--gap)}
#xh i:nth-child(3){height:1px;width:7px;top:0;right:var(--gap)}
#xh i:nth-child(4){height:1px;width:7px;top:0;left:var(--gap)}
#xh .dot{position:absolute;left:-1px;top:-1px;width:3px;height:3px;border-radius:50%;background:#ff4a3a;box-shadow:0 0 3px rgba(255,60,40,.8);opacity:calc(1 - var(--lines))}

/* Zielfernrohr (Scharfschützengewehr) */
/* Schwarzer Rand (.mask) und Fadenkreuz (.lens) sind getrennte Ebenen, damit das Fadenkreuz nicht mit ausgestanzt wird */
#scope{position:absolute;inset:0;pointer-events:none;--r:min(44vh,40vw)}
#scope .mask{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0 calc(var(--r) - 3px),#000 var(--r))}
#scope .lens{position:absolute;left:50%;top:50%;width:calc(var(--r) * 2);height:calc(var(--r) * 2);transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;
  box-shadow:inset 0 0 18px 4px rgba(0,0,0,.75)}
#scope .h,#scope .v,#scope .ph,#scope .pv{position:absolute;background:#050505}
#scope .h{left:0;right:0;top:50%;height:2px;margin-top:-1px}
#scope .v{left:50%;top:0;bottom:0;width:2px;margin-left:-1px}
/* dickere Balken außen, wie bei einem echten Zielfernrohr */
#scope .ph{top:50%;height:6px;margin-top:-3px;width:32%}
#scope .ph.l{left:0}#scope .ph.r{right:0}
#scope .pv{left:50%;bottom:0;width:6px;margin-left:-3px;height:32%}

/* Lebensbalken */
#hpBar{position:relative;width:200px;height:12px;background:rgba(0,0,0,.6);border:1px solid rgba(236,228,207,.35);clip-path:polygon(0 0,100% 0,96% 100%,0 100%)}
#hpBar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(#7ad04a,#4a9a2a);transition:width .12s}
#hpBar.mid i{background:linear-gradient(#e8c44a,#b89020)}
#hpBar.low i{background:linear-gradient(#ff4a3f,#b3121c)}
#hpBar span{position:absolute;right:14px;top:-1px;font:700 11px/14px var(--f-body);color:#fff;text-shadow:0 1px 0 #000}

/* Wahrscheinlichkeiten der Zufallskiste */
#boxOdds{position:absolute;right:max(22px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);min-width:210px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);font:600 13px var(--f-body)}
#boxOdds .lbl{display:block;font:700 11px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#7fd0ff;margin-bottom:6px}
#boxOdds ol{list-style:none;margin:0;padding:0;display:grid;gap:3px}
#boxOdds li{display:flex;justify-content:space-between;gap:16px}
#boxOdds li b{font-variant-numeric:tabular-nums;color:var(--bone)}
#boxOdds li.rare{color:#9fe8a0}#boxOdds li.vrare{color:#ff8a9a}
#boxOdds .note{display:block;margin-top:6px;font-size:11px;color:var(--bone-dim)}
#clickHint{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font:700 18px var(--f-body);padding:12px 20px;background:var(--panel);border:1px solid var(--line)}
#prompt .hold{display:block;margin-top:6px;font-size:13px;color:var(--bone-dim)}
#prompt .hold i{display:block;height:3px;margin-top:4px;background:rgba(255,255,255,.15)}
#prompt .hold i::after{content:"";display:block;height:100%;width:calc(var(--hold,0) * 100%);background:#7fd0ff}
#hit{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0}
#hit::before,#hit::after{content:"";position:absolute;left:12px;top:0;width:2px;height:26px;background:var(--bone);
  -webkit-mask:linear-gradient(#000 0 35%,transparent 35% 65%,#000 65%);mask:linear-gradient(#000 0 35%,transparent 35% 65%,#000 65%)}
#hit::before{transform:rotate(45deg)}#hit::after{transform:rotate(-45deg)}
#hit.kill::before,#hit.kill::after{background:var(--blood-hi)}

/* Runden-Strichliste */
#roundBox{position:absolute;left:max(22px,env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;align-items:flex-start}
#tally{display:flex;gap:18px;align-items:flex-end;min-height:72px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.grp{position:relative;display:flex;gap:9px;padding:0 4px}
.mk{width:11px;height:70px;background:var(--blood);clip-path:polygon(18% 0,90% 5%,100% 100%,0 95%)}
.mk:nth-child(2){height:66px;transform:rotate(3deg)}.mk:nth-child(3){height:72px;transform:rotate(-2deg)}.mk:nth-child(4){height:67px;transform:rotate(4deg)}
.slash{position:absolute;left:-8px;top:30px;width:92px;height:11px;background:var(--blood);transform:rotate(-28deg);clip-path:polygon(0 30%,100% 0,98% 80%,3% 100%)}
.rnum{font-family:var(--f-display);font-size:76px;line-height:.9;color:var(--blood);letter-spacing:.02em;text-shadow:0 3px 0 #2a0003}
#tally.flash .mk,#tally.flash .slash{background:var(--bone)}#tally.flash .rnum{color:var(--bone)}
.mk,.slash,.rnum{transition:background .6s,color .6s}
#perks{display:flex;gap:6px}
.perk{width:34px;height:34px;display:grid;place-items:center;font:700 13px/1 var(--f-body);color:#fff;border:2px solid rgba(255,255,255,.75);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);text-shadow:0 1px 0 #000}

/* Punkte + Munition */
#rightBox{position:absolute;right:max(22px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
#pointsWrap{position:relative}
#points{font-family:var(--f-display);font-size:34px;color:var(--bone);text-shadow:0 2px 0 #000;font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.55) 30%);padding:2px 10px 0 40px}
.gain{position:absolute;right:8px;bottom:100%;font:700 20px var(--f-body);color:#ffe17a;text-shadow:0 1px 0 #000;animation:gain .9s ease-out forwards}
.gain.big{color:#ffb347;font-size:24px}
@keyframes gain{from{transform:translate(0,0);opacity:1}to{transform:translate(var(--dx),-46px);opacity:0}}
#weapName{font:700 13px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
#weapName.up{color:#9fe8ff}#weapName.up2{color:#ff9a5a}#weapName.up3{color:#ffd54a;text-shadow:0 0 8px rgba(255,200,60,.6)}
#ammo{font-family:var(--f-display);font-size:44px;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 #000}
#ammo small{font-size:22px;color:var(--bone-dim)}
#ammo.low b{color:var(--blood-hi)}
#nades{display:flex;gap:5px;justify-content:flex-end}
#nades i{width:10px;height:10px;background:var(--moss);transform:rotate(45deg);box-shadow:0 0 0 1px #000}
#timers{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;gap:10px}
.tm{font:700 13px var(--f-body);letter-spacing:.1em;padding:5px 10px;background:var(--panel);border:1px solid var(--line)}

#prompt{position:absolute;left:50%;top:64%;transform:translateX(-50%);font:600 17px var(--f-body);padding:8px 14px;background:var(--panel);border:1px solid var(--line);white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
#prompt kbd,.keys kbd{font:700 13px var(--f-body);display:inline-block;min-width:24px;padding:2px 6px;margin-right:6px;text-align:center;border:1px solid var(--bone);border-bottom-width:3px;color:var(--bone)}
#prompt .cost{color:#ffe17a;margin-left:6px}
#prompt.poor .cost{color:var(--blood-hi)}
#prompt.off{color:var(--bone-dim)}

#msg{position:absolute;left:0;right:0;top:22%;text-align:center;opacity:0;transition:opacity .35s}
#msg.on{opacity:1}
#msg h2{margin:0;font:400 clamp(30px,6vw,58px)/1 var(--f-display);color:var(--bone);text-shadow:0 3px 0 #000,0 0 30px rgba(179,18,28,.6);text-wrap:balance;padding:0 16px}
#msg p{margin:10px 0 0;font:600 16px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
#feed{position:absolute;left:max(22px,env(safe-area-inset-left,0px));top:calc(18px + env(safe-area-inset-top,0px));font:600 13px var(--f-body);color:var(--bone-dim);letter-spacing:.06em;display:flex;flex-direction:column;gap:4px}
#roomName{font:400 15px var(--f-display);letter-spacing:.08em;color:var(--rust);text-transform:uppercase}
#zcount{color:var(--bone)}

/* Overlays */
.ov{position:absolute;inset:0;display:grid;place-items:center;overflow:auto;padding-block:24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:radial-gradient(ellipse at 50% 30%,rgba(60,8,12,.55),rgba(5,8,10,.92) 70%)}
.card{width:min(620px,100%);display:flex;flex-direction:column;gap:18px}
.title{margin:0;font:400 clamp(44px,11vw,96px)/.9 var(--f-display);color:var(--blood);letter-spacing:.01em;text-shadow:0 4px 0 #1a0002,0 0 40px rgba(179,18,28,.35)}
.sub{margin:0;font:600 15px/1.5 var(--f-body);color:var(--bone-dim);max-width:52ch}
.mapline{font:600 13px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 22px;font:500 14px var(--f-body);color:var(--bone);padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.keys div{display:flex;align-items:center;gap:4px;min-width:0}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
button{font:400 18px var(--f-display);color:var(--ink);background:var(--bone);border:0;padding:14px 26px;cursor:var(--cur-pointer);clip-path:polygon(0 0,100% 0,96% 100%,4% 100%)}
button:hover{background:#fff}
button:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
button.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 2px var(--bone);clip-path:none}
.best{font:600 14px var(--f-body);color:var(--bone-dim);letter-spacing:.08em}
.best b{color:var(--rust);font-family:var(--f-display);font-weight:400}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stats div{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--line);background:rgba(0,0,0,.35)}
.stats b{font:400 30px var(--f-display);color:var(--bone);font-variant-numeric:tabular-nums}
.stats span{font:600 11px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
@media (max-width:520px){.stats{grid-template-columns:repeat(2,1fr)}}
label.sens{display:flex;flex-direction:column;gap:6px;font:600 13px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim)}
input[type=range]{width:min(320px,100%);accent-color:var(--blood)}
.note{font:500 13px/1.5 var(--f-body);color:var(--bone-dim);margin:0}

/* Touch */
#touch{position:absolute;inset:0;pointer-events:none}
#stick{position:absolute;width:120px;height:120px;border-radius:50%;border:2px solid rgba(236,228,207,.35);margin:-60px 0 0 -60px;display:none}
#stick i{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:rgba(236,228,207,.35)}
.tb{position:absolute;pointer-events:auto;width:62px;height:62px;border-radius:50%;border:2px solid rgba(236,228,207,.5);background:rgba(10,14,16,.45);
  color:var(--bone);font:700 12px var(--f-body);display:grid;place-items:center;letter-spacing:.04em;clip-path:none;padding:0}
.tb.on{background:rgba(179,18,28,.6)}
#tFire{width:84px;height:84px;right:calc(26px + env(safe-area-inset-right,0px));bottom:calc(150px + env(safe-area-inset-bottom,0px));font-size:14px}
#tAds{right:calc(122px + env(safe-area-inset-right,0px));bottom:calc(200px + env(safe-area-inset-bottom,0px))}
#tReload{right:calc(122px + env(safe-area-inset-right,0px));bottom:calc(126px + env(safe-area-inset-bottom,0px))}
#tUse{right:calc(30px + env(safe-area-inset-right,0px));bottom:calc(250px + env(safe-area-inset-bottom,0px))}
#tSwap{right:calc(100px + env(safe-area-inset-right,0px));top:calc(70px + env(safe-area-inset-top,0px))}
#tKnife{right:calc(30px + env(safe-area-inset-right,0px));top:calc(70px + env(safe-area-inset-top,0px))}
#tNade{right:calc(170px + env(safe-area-inset-right,0px));top:calc(70px + env(safe-area-inset-top,0px))}
#tSprint{left:calc(30px + env(safe-area-inset-left,0px));top:calc(70px + env(safe-area-inset-top,0px))}
#tPause{left:calc(100px + env(safe-area-inset-left,0px));top:calc(70px + env(safe-area-inset-top,0px))}
body.touch #roundBox{bottom:auto;top:calc(150px + env(safe-area-inset-top,0px))}
body.touch #roundBox .mk{height:44px}body.touch .slash{top:18px;width:80px}body.touch .rnum{font-size:50px}body.touch #tally{min-height:46px}
body.touch #rightBox{bottom:calc(18px + env(safe-area-inset-bottom,0px));right:auto;left:50%;transform:translateX(-50%);flex-direction:row;align-items:flex-end;gap:16px}
body.touch #ammo{font-size:30px}body.touch #points{font-size:26px}
body.touch #feed{left:auto;right:max(22px,env(safe-area-inset-right,0px));top:calc(140px + env(safe-area-inset-top,0px))}
body.touch #timers{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
@media (prefers-reduced-motion:reduce){.gain{animation-duration:.01s}#msg{transition:none}}

/* ===== Roguelike: Profil, Karten, Shop, Fähigkeiten ===== */
:root{--gold:#ffcf4a;--xp:#7fd8ff}
.coin{display:inline-block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,var(--gold) 45%,#b07a10);box-shadow:0 0 0 1px #5a3a00;flex:none}
.profile{display:flex;align-items:center;gap:18px;padding:12px 14px;border:1px solid var(--line);background:rgba(0,0,0,.35)}
.profile .lvl{display:flex;flex-direction:column;align-items:center;line-height:1}
.profile .lvl span{font:600 10px var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
.profile .lvl b{font:400 30px var(--f-display);color:var(--bone)}
.profile .xp{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.profile .xp span{font:600 12px var(--f-body);color:var(--bone-dim);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.xpbar{height:8px;background:rgba(255,255,255,.08);overflow:hidden}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3a9ed8,var(--xp));transition:width .8s ease-out}
.gold{display:flex;align-items:center;gap:7px}
.gold b{font:400 22px var(--f-display);color:var(--gold);font-variant-numeric:tabular-nums}
.gold.big b{font-size:30px}.gold.big .coin{width:20px;height:20px}
.skillBadge{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:8px;padding:0 5px;border-radius:11px;background:var(--blood-hi);color:#fff;font:700 13px var(--f-body);vertical-align:2px}
.title.small{font-size:clamp(34px,7vw,56px)}
.card.wide{width:min(980px,100%)}
#runLoot{color:var(--gold)}
button:disabled{opacity:.4;cursor:var(--cur-blocked)}
button:disabled:hover{background:var(--bone)}
button.ghost:disabled:hover{background:transparent}

/* Belohnung am Ende */
.rewards{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.rw{display:flex;align-items:center;gap:8px}
.rw b{font:400 34px var(--f-display);color:var(--gold)}
.rw.xpw b{color:var(--xp)}
.rw span:last-child{font:600 12px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
.rw .coin{width:20px;height:20px}
.lvlup{font:400 16px var(--f-display);color:var(--bone);padding:6px 12px;background:var(--blood);animation:pop .5s ease-out}
.newUnlocks{font:600 14px/1.4 var(--f-body);color:#ffe17a;padding:6px 12px;border:1px solid rgba(255,207,74,.45);background:rgba(255,190,40,.1);animation:pop .5s ease-out}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

/* Kartenwahl */
#cardRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.ucard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:230px;padding:18px 16px 16px;text-align:left;
  font:500 14px/1.45 var(--f-body);color:var(--bone);background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(0,0,0,.4)),#12171a;
  border:2px solid var(--rc);clip-path:none;box-shadow:0 0 0 1px #000,0 10px 30px rgba(0,0,0,.5),inset 0 0 40px color-mix(in srgb,var(--rc) 14%,transparent);
  transition:transform .15s,box-shadow .15s;animation:deal .35s ease-out backwards}
.ucard:nth-child(2){animation-delay:.07s}.ucard:nth-child(3){animation-delay:.14s}.ucard:nth-child(4){animation-delay:.21s}
@keyframes deal{from{transform:translateY(30px) rotate(-3deg);opacity:0}}
.ucard:hover,.ucard:focus-visible{background:linear-gradient(170deg,rgba(255,255,255,.1),rgba(0,0,0,.3)),#161c20;transform:translateY(-6px);box-shadow:0 0 0 1px #000,0 16px 40px rgba(0,0,0,.6),0 0 24px color-mix(in srgb,var(--rc) 45%,transparent)}
.ucard.legendary{box-shadow:0 0 0 1px #000,0 0 30px rgba(255,180,48,.35),inset 0 0 50px rgba(255,180,48,.18)}
.ucard .uk{position:absolute;top:10px;right:12px;font:700 12px var(--f-body);width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line);color:var(--bone-dim)}
.ucard .ur{font:700 11px var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--rc)}
.ucard .un{font:400 21px/1.1 var(--f-display);color:var(--bone);text-wrap:balance}
.ucard .ud{color:var(--bone-dim);flex:1}
.ucard .us{font:700 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
.runCardsWrap{display:flex;flex-direction:column;gap:8px}
.runCardsWrap .lbl{font:600 12px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
#runCards{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:600 13px var(--f-body);padding:4px 9px;border:1px solid var(--rc);color:var(--bone);background:rgba(0,0,0,.35)}
#runCards .none{font:500 13px var(--f-body);color:var(--bone-dim)}

/* Shop */
.metaHead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
#shopList{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:8px;align-content:start;min-height:250px}
@media (max-width:520px){#shopList{grid-template-columns:1fr}.sItem{gap:10px;padding:9px 10px}.sItem button.buy{min-width:0;padding:8px 10px}}
.sItem{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);background:rgba(0,0,0,.4)}
.sItem.maxed{border-color:rgba(255,207,74,.35)}
.sBody{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sHead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sHead b{font:400 16px var(--f-display);color:var(--bone)}
.pips{display:flex;gap:3px}
.pips i{width:8px;height:8px;transform:rotate(45deg);border:1px solid var(--bone-dim)}
.pips i.on{background:var(--gold);border-color:var(--gold)}
.sItem p{margin:0;font:500 12.5px/1.4 var(--f-body);color:var(--bone-dim)}
.sItem button.buy{align-self:center;flex:none;min-width:92px;justify-content:center;font-size:15px;padding:8px 12px}
.sItem.maxed button.buy{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 1px rgba(255,207,74,.35)}
.sDot{display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;background:var(--gold);vertical-align:middle;box-shadow:0 0 6px var(--gold)}
button.buy{align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:16px;padding:9px 18px;background:var(--gold);color:#241800;clip-path:none}
button.buy:hover{background:#ffe08a}
button.buy:disabled:hover{background:var(--gold)}

/* Fähigkeiten */
#skillsInfo b{font-family:var(--f-display);font-weight:400;color:var(--bone)}
#skillsInfo b.hot{color:var(--blood-hi)}
#skillsList{display:flex;flex-direction:column;gap:8px}
.stRow{display:grid;grid-template-columns:1fr minmax(120px,180px) auto;align-items:center;gap:14px;padding:10px 12px;border:1px solid var(--line);background:rgba(0,0,0,.35)}
.stRow b{font:400 16px var(--f-display);color:var(--bone)}
.stRow p{margin:2px 0 0;font:500 12px var(--f-body);color:var(--bone-dim)}
.stBar{position:relative;height:20px;background:rgba(255,255,255,.07)}
.stBar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--blood),var(--blood-hi))}
.stBar span{position:relative;display:block;text-align:center;font:700 12px/20px var(--f-body);color:var(--bone)}
button.plus{width:40px;height:40px;padding:0;font-size:22px;line-height:1;clip-path:none}
@media (max-width:520px){.stRow{grid-template-columns:1fr auto}.stBar{grid-column:1/-1;grid-row:2}}

/* Startrunde */
.startRound{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.startRound .lbl{font:600 12px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
.rchips{display:flex;flex-wrap:wrap;gap:6px}
.rchip{font:700 14px var(--f-body);padding:7px 12px;background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--line);clip-path:none}
.rchip:hover{background:rgba(255,255,255,.08)}
.rchip.on{background:var(--blood);box-shadow:inset 0 0 0 1px var(--blood-hi);color:#fff}
.startRound .rnote{flex-basis:100%;font:500 13px var(--f-body);color:var(--bone-dim)}
.startRound .rnote:empty{display:none}
/* Fenster „Startrunde wählen“ nach „Solo spielen“ – liegt über dem Hauptmenü, das abgedunkelt dahinter bleibt */
#startPick{z-index:5;background:rgba(4,6,8,.72);backdrop-filter:blur(3px)}
.startPickCard{width:min(520px,calc(100vw - 32px));padding:22px 24px;background:var(--panel);border:1px solid var(--line);box-shadow:0 18px 60px rgba(0,0,0,.6);gap:12px}
.startPickCard .title.small{font-size:clamp(26px,4vw,38px)}
.startPickCard .startRound{margin:6px 0 18px}
.startPickCard .rchips{gap:8px}
.startPickCard .rchip{font-size:16px;padding:10px 16px}
.startPickCard .rnote{font-size:14px;line-height:1.45;margin-top:4px}

/* ================= Hauptmenü ================= */
.ov.mainmenu{display:grid;grid-template-columns:minmax(300px,520px) 1fr;grid-template-rows:minmax(0,1fr) auto;place-items:stretch;padding:0;overflow:hidden;
  background:linear-gradient(90deg,rgba(4,6,8,.93) 0%,rgba(4,6,8,.78) 28%,rgba(4,6,8,.15) 58%,rgba(4,6,8,0) 75%),
             radial-gradient(ellipse at 70% 45%,transparent 40%,rgba(0,0,0,.55) 100%)}
.mmFade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
/* Größen wachsen/schrumpfen mit der Fensterhöhe (vh, mit Unter- und Obergrenze): bei 1080p wie bisher, bei 720p
   kompakter – so passt das Menü ohne Scrollen. Unter 820 px Höhe fallen zusätzlich die Untertitel weg (siehe unten). */
.mmNav{position:relative;display:flex;flex-direction:column;justify-content:safe center;gap:clamp(8px,2.2vh,20px);padding:clamp(14px,3.6vh,32px) clamp(20px,3.4vw,48px);overflow-x:hidden;overflow-y:auto;min-height:0}
/* Titel skaliert mit der Breite der Menüspalte (Container-Einheit cqi), damit er nie abgeschnitten wird */
.mmBrand{container-type:inline-size}
.mmBrand .title{font-size:min(72px,12.6cqi);white-space:nowrap;line-height:1;padding-top:.08em}
.mmBrand .mapline b{color:var(--bone);font-weight:700}
.mmItems{display:flex;flex-direction:column;gap:2px}
.mmItem{position:relative;display:grid;grid-template-columns:1fr auto;align-items:baseline;text-align:left;width:100%;padding:clamp(4px,.62vh,7px) 14px clamp(4px,.62vh,7px) 18px;
  font:400 clamp(18px,3.15vh,24px)/1.1 var(--f-display);color:var(--bone-dim);background:transparent;clip-path:none;border-left:3px solid transparent;
  transition:color .15s,background .2s,border-color .15s,padding-left .2s}
.mmItem .k{grid-column:1;display:flex;align-items:center;gap:10px}
.mmItem small{grid-column:1;font:500 12px/1.4 var(--f-body);letter-spacing:.04em;color:rgba(236,228,207,.45);margin-top:3px;transition:color .15s}
.mmItem .soon{grid-column:2;grid-row:1/span 2;align-self:center;font:700 10px var(--f-body);letter-spacing:.14em;text-transform:uppercase;font-style:normal;
  color:var(--rust);border:1px solid rgba(232,144,46,.5);padding:3px 7px}
.mmItem:hover,.mmItem:focus-visible{color:#fff;background:linear-gradient(90deg,rgba(179,18,28,.38),rgba(179,18,28,0) 85%);border-left-color:var(--blood-hi);padding-left:26px;outline:none}
.mmItem:hover small,.mmItem:focus-visible small{color:var(--bone-dim)}
.mmItem.primary{font-size:clamp(25px,4.1vh,34px);color:var(--bone)}
.mmItem.primary::after{content:"";position:absolute;left:18px;bottom:4px;width:44px;height:3px;background:var(--blood);transition:width .25s}
.mmItem.primary:hover::after{width:96px}
.mmSep{height:1px;margin:clamp(4px,1.1vh,10px) 0 clamp(3px,.9vh,8px) 18px;background:linear-gradient(90deg,var(--line),transparent)}
.mmNav .startRound{padding:2px 0 8px 18px}
.mmNav .best{padding-left:18px}
.mmSide{align-self:end;justify-self:end;width:min(420px,100%);display:flex;flex-direction:column;gap:14px;padding:32px clamp(18px,3vw,40px);box-sizing:border-box;max-height:100vh;overflow-y:auto}   /* bei niedrigen Bildschirmen scrollbar (Missionen, Event, Banner) */
.mmGrp{display:contents}   /* Gruppen der rechten Spalte – nur im Zwei-Spalten-Modus sichtbar als Spalten */
@media (max-height:780px){.mmSide{gap:10px;padding-top:16px;padding-bottom:16px}}
/* breit, aber nicht sehr hoch (z. B. 1280×720 oder 1920×1080 mit Browserleisten): rechte Seite zweispaltig –
   Missionen + Event links, Konto, Banner, Discord und Profil rechts. So passt alles ohne Scrollen. */
@media (min-width:1180px) and (max-height:1000px){
  .mmSide{width:min(740px,58vw);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:14px;align-content:end}
  .mmGrp{display:flex;flex-direction:column;gap:8px;min-width:0}
  .mmGrpPlay{grid-column:1;grid-row:1 / span 2;align-self:end}
  .mmGrpTop{grid-column:2;grid-row:1}
  .mmGrpBottom{grid-column:2;grid-row:2;align-self:end}
}
/* wenig Höhe (z. B. 720p-Bildschirm mit Browserleisten): Untertitel der Menüpunkte ausblenden (außer bei Solo/Weiter),
   Sprache + Menümusik nebeneinander, Discord-Karte ohne Beschreibung */
@media (min-width:761px) and (max-height:820px){
  .mmItem:not(.primary) small{display:none}
  .discordCard .dcText small{display:none}
  .playerCard{padding:10px 12px;gap:8px}
  .mmSide{gap:8px}
}
/* Spielerkarte: oben Name + Abmelden, darunter Stufe, EXP und Gold – eine Einheit */
.playerCard{display:flex;flex-direction:column;gap:10px;padding:12px 14px;background:rgba(5,8,10,.78);backdrop-filter:blur(4px);border:1px solid var(--line)}
.playerCard .account{text-shadow:none;padding-bottom:9px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.playerCard .accWho{min-width:0;overflow-wrap:anywhere}
.mmSide .playerCard .profile{padding:0;border:0;background:none;backdrop-filter:none}
/* Sprache + Menümusik immer nebeneinander */
.mmSide .mmPrefs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mmPrefs .langPick{flex-direction:column;align-items:stretch;gap:3px}
.mmPrefs .langPick select,.mmPrefs button.musicToggle{min-width:0;width:100%}
.mmItem .skillBadge{position:static;transform:none}
/* Impressum · Datenschutz · Credits: unten mittig im Hauptmenü (eigene Zeile über beide Spalten) und unter der Anmeldung */
.mmFoot{grid-column:1 / -1;display:flex;justify-content:center;padding:0 16px 8px;position:relative}
.legalLinks{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font:600 12px var(--f-body);letter-spacing:.06em}
.legalLinks a{color:var(--bone-dim);text-decoration:none;text-shadow:0 1px 2px #000}
.legalLinks a:hover,.legalLinks a:focus-visible{color:var(--bone);text-decoration:underline}
.legalLinks a+a::before{content:"·";margin-right:16px;color:var(--bone-dim);opacity:.6;display:inline-block;text-decoration:none}
.authCard .legalLinks{margin-top:-4px}
@media (max-width:760px){
  .ov.mainmenu{grid-template-columns:1fr;grid-template-rows:auto auto;overflow:auto;background:rgba(4,6,8,.86)}
  .mmNav{padding-top:28px;overflow:visible;gap:18px;min-height:auto}.mmSide{justify-self:stretch;width:auto;max-height:none;overflow:visible}   /* untereinander: die ganze Seite scrollt */
  .mmItem{font-size:20px}.mmItem.primary{font-size:28px}
}

/* Rückfrage (Aufgeben) */
.confirm{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid rgba(255,58,63,.5);background:rgba(60,4,8,.45)}
.confirm b{font:400 22px var(--f-display);color:var(--blood-hi)}
.confirm span{font:500 14px/1.5 var(--f-body);color:var(--bone-dim)}
button.danger{background:var(--blood-hi);color:#fff}
button.danger:hover{background:#ff6266}

/* Priorität der Verstärkungen */
#prioList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:min(56vh,560px);overflow:auto;padding-right:4px}
.pRow{display:grid;grid-template-columns:34px 1fr auto auto auto;align-items:center;gap:8px;padding:6px 8px;background:rgba(255,255,255,.03);border-left:3px solid var(--rc);cursor:var(--cur-grab)}
.pRow.locked .pTxt b,.pRow.locked .pTxt small:not(.pLock){opacity:.5}
.pRow .pLock{color:#c8a070;font-weight:700}
.pRow.drag{opacity:.4}.pRow.over{background:rgba(255,255,255,.12)}
.pNo{font:400 18px var(--f-display);color:var(--bone-dim);text-align:center;font-variant-numeric:tabular-nums}
.pTxt{display:flex;flex-direction:column;min-width:0}
.pTxt b{font:700 15px var(--f-body);color:var(--bone)}
.pTxt small{font:500 12px var(--f-body);color:var(--bone-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.pBtn{width:32px;height:32px;padding:0;font:700 14px var(--f-body);clip-path:none;background:rgba(255,255,255,.08);color:var(--bone)}
button.pBtn:hover{background:rgba(255,255,255,.2)}
button.pBtn:disabled:hover{background:rgba(255,255,255,.08)}

/* Kurze Meldung */
#toast{position:absolute;left:50%;bottom:calc(36px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:20;
  font:700 16px var(--f-body);letter-spacing:.06em;padding:12px 22px;background:var(--panel);border:1px solid var(--rust);color:var(--bone)}
#toast.show{animation:toastIn .25s ease-out}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ================= Einstellungen ================= */
.setGroup{display:flex;flex-direction:column;gap:8px}
.setGroup .lbl{font:600 12px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
.setGroup .hint{font:500 12px var(--f-body);color:var(--bone-dim)}
#qualRow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
button.qChip{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px 14px;clip-path:none;background:rgba(255,255,255,.04);color:var(--bone);box-shadow:inset 0 0 0 1px var(--line)}
button.qChip b{font:400 18px var(--f-display)}
button.qChip small{font:500 12px/1.4 var(--f-body);color:var(--bone-dim)}
button.qChip:hover{background:rgba(255,255,255,.1)}
button.qChip.on{background:rgba(179,18,28,.35);box-shadow:inset 0 0 0 2px var(--blood-hi)}
@media (max-width:560px){#qualRow{grid-template-columns:1fr}}
.setToggle{display:flex;align-items:center;gap:10px;font:600 15px var(--f-body);cursor:var(--cur-pointer)}
.setToggle input{width:20px;height:20px;accent-color:var(--blood-hi)}
#fps{position:absolute;right:max(14px,env(safe-area-inset-right,0px));top:12px;z-index:30;pointer-events:none;text-align:right;
  font:600 12px var(--f-body);color:var(--bone-dim);padding:6px 10px;background:rgba(0,0,0,.55);border:1px solid var(--line)}
#fps b{font:400 20px var(--f-display);margin-right:4px;font-variant-numeric:tabular-nums}
#fps small{display:block;font-size:11px;opacity:.8}
#fps span{display:inline-block;margin-left:12px}#fps span:first-child{margin-left:0}
#fps .good b{color:#7ad04a}#fps .ok b{color:#e8c44a}#fps .bad b{color:var(--blood-hi)}

/* Lautstärke-Regler in den Einstellungen */
.volGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
@media (max-width:560px){.volGrid{grid-template-columns:1fr}}

/* ================= Anmeldung ================= */
.ov.authov{background:radial-gradient(ellipse at 50% 40%,rgba(10,6,8,.55),rgba(4,6,8,.9) 75%)}
.authCard{width:min(440px,100%);gap:14px}
.authCard .title{font-size:clamp(40px,9vw,64px)}
/* Titelbild (img/logo.webp) statt Schriftzug */
.logoTitle{line-height:0;text-shadow:none;padding:0}
.logoTitle img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.authCard .logoTitle img{width:min(340px,100%);margin:0 auto}
.mmBrand .logoTitle img{width:auto;max-width:min(400px,100%);max-height:clamp(60px,14vh,160px);margin-left:-2%}
.authTabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.authTabs button{clip-path:none;background:transparent;color:var(--bone-dim);font-size:16px;padding:10px 0;border-bottom:3px solid transparent}
.authTabs button[aria-selected="true"]{color:var(--bone);border-bottom-color:var(--blood-hi)}
.authTabs button:hover{background:rgba(255,255,255,.05)}
.authForm{display:flex;flex-direction:column;gap:12px}
.authForm label{display:flex;flex-direction:column;gap:5px;font:600 12px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
.authForm input{font:500 16px var(--f-body);letter-spacing:normal;text-transform:none;color:var(--bone);background:rgba(0,0,0,.45);border:1px solid var(--line);padding:11px 12px;outline:none}
.authForm input:focus{border-color:var(--rust);box-shadow:0 0 0 2px rgba(232,144,46,.25)}
.authForm small{font:500 11px var(--f-body);letter-spacing:.02em;text-transform:none;color:rgba(236,228,207,.45)}
.authForm button[type="submit"]{margin-top:4px}
button.linkBtn{align-self:flex-start;background:none;clip-path:none;padding:2px 0;font:600 13px var(--f-body);color:var(--bone-dim);text-decoration:underline;text-underline-offset:3px}
button.linkBtn:hover{background:none;color:var(--bone)}
#authMsg{margin:0;font:600 14px/1.5 var(--f-body);min-height:1.5em}
#authMsg.err{color:var(--blood-hi)}#authMsg.ok{color:var(--moss)}
.authStatus{margin:0;font:600 14px/1.5 var(--f-body);min-height:1.5em}
.authStatus.err{color:var(--blood-hi)}.authStatus.ok{color:var(--moss)}
.account{display:flex;align-items:center;justify-content:space-between;gap:12px;font:600 13px var(--f-body);color:var(--bone-dim);text-shadow:0 1px 2px #000}
.account b{color:var(--bone)}
.accBtns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 12px}
button.linkBtn.accSave{color:var(--rust)}button.linkBtn.accSave:hover{color:var(--bone)}
button.linkBtn.sure{color:var(--blood-hi)}
/* Gast und Einladungslink */
.authInvite{margin:0;padding:10px 12px;border:1px solid rgba(232,144,46,.5);border-left-width:3px;background:rgba(232,144,46,.1);font:600 14px/1.45 var(--f-body);color:var(--bone)}
.orSep{display:flex;align-items:center;gap:12px;font:600 12px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
.orSep::before,.orSep::after{content:"";flex:1;height:1px;background:var(--line)}
.guestForm button[type="submit"]{margin-top:0}
.guestForm small{flex-basis:100%}
.linkRow input{font-size:13px;color:var(--bone-dim)}
#mpRejoin{z-index:9;background:rgba(4,6,8,.86)}
.rejoinCard{text-align:center;align-items:center}
.rejoinSpin{width:38px;height:38px;border:3px solid var(--line);border-top-color:var(--blood-hi);border-radius:50%;animation:rjSpin 1s linear infinite}
@keyframes rjSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rejoinSpin{animation-duration:3s}}
.member .rdy.away{color:var(--rust)}
#upgrade{z-index:8;background:rgba(4,6,8,.94)}   /* über Hauptmenü und Menüseiten (fast deckend), unter Hinweisen (Toast, Einladung) */

/* ---------- Multiplayer: Lobby, Freunde, Einladung ---------- */
#mp .lbl,#friends .lbl{display:block;font:600 12px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
.pill{font:700 12px var(--f-body);letter-spacing:.08em;padding:5px 10px;border:1px solid var(--line)}
.pill.ok{color:var(--moss);border-color:rgba(156,196,110,.5)}
.pill.bad{color:var(--blood-hi);border-color:rgba(255,58,63,.5)}
.mpGrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:760px){.mpGrid{grid-template-columns:1fr}}
.secHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
button.small{font-size:14px;padding:8px 14px;clip-path:none}
/* Start: zwei große Kacheln „Lobby erstellen“ / „Lobby beitreten“ */
.mpHome{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.mpHome{grid-template-columns:1fr}}
button.mpChoice{display:flex;align-items:center;gap:16px;text-align:left;padding:22px 20px;clip-path:none;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(0,0,0,.45));color:var(--bone);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s,transform .15s}
button.mpChoice:hover{background:linear-gradient(160deg,rgba(179,18,28,.22),rgba(0,0,0,.5));box-shadow:inset 0 0 0 2px var(--blood-hi);transform:translateY(-1px)}
.mpcIcon{flex:none;display:grid;place-items:center;width:58px;height:58px;font:400 30px/1 var(--f-display);color:var(--bone);background:var(--blood);box-shadow:inset 0 -4px 0 rgba(0,0,0,.35)}
.mpcText{display:flex;flex-direction:column;gap:6px;min-width:0}
.mpcText b{font:400 clamp(20px,3vw,26px) var(--f-display);letter-spacing:.02em}
.mpcText small{font:500 13px/1.4 var(--f-body);color:var(--bone-dim)}
.mpSubHead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mpSubHead h2{margin:0;font:400 clamp(20px,3vw,26px) var(--f-display);flex:1;min-width:0}
#mpCreate{width:100%;max-width:460px;margin-inline:auto}   /* „Lobby erstellen“ mittig in der Karte */
.mpMaxRow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mpLbl{font:600 12px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
#mp .seg{display:inline-flex;box-shadow:inset 0 0 0 1px var(--line)}
#mp .seg button{clip-path:none;background:transparent;color:var(--bone-dim);font:400 18px var(--f-display);padding:8px 18px;min-width:52px}
#mp .seg button[aria-checked="true"]{background:var(--blood);color:var(--bone)}
#mp .seg button:hover:not([aria-checked="true"]){background:rgba(255,255,255,.07);color:var(--bone)}

/* Lobby-Liste: Filter-Chips und Tabelle (am Handy Karten) */
.lbFilters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
button.chip{clip-path:none;padding:6px 12px;font:600 13px var(--f-body);letter-spacing:.02em;text-transform:none;background:rgba(0,0,0,.35);color:var(--bone-dim);box-shadow:inset 0 0 0 1px var(--line);border-radius:99px}
button.chip::before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;vertical-align:-1px;border-radius:2px;box-shadow:inset 0 0 0 1.5px currentColor}
button.chip[aria-pressed="true"]{color:var(--bone);background:rgba(179,18,28,.35);box-shadow:inset 0 0 0 1.5px var(--blood-hi)}
button.chip[aria-pressed="true"]::before{background:var(--blood-hi);box-shadow:none}
button.chip:hover{color:var(--bone)}
.lbCount{margin-left:auto;font:600 12px var(--f-body);color:var(--bone-dim)}
.lbSearch{flex:1 1 200px;max-width:280px;min-width:0;font:500 14px var(--f-body);color:var(--bone);background:rgba(0,0,0,.45);border:1px solid var(--line);padding:7px 11px;outline:none}
.lbSearch:focus{border-color:var(--rust)}
/* Lobby-Liste oben ausrichten (statt mittig) und im Fenster scrollen lassen: Filter bleiben sichtbar.
   Die übrigen Multiplayer-Ansichten bleiben mittig (Klasse mpTop setzt js/ui/multiplayer.js renderMp) */
#mp.mpTop{align-items:start}
#mp.mpTop .card{gap:12px}
#mp.mpTop .metaHead .title{font-size:clamp(28px,5vw,44px)}
.mpSubHead{margin-bottom:6px}
.lbTable{display:flex;flex-direction:column;border:1px solid var(--line);background:rgba(0,0,0,.35);max-height:calc(100dvh - 250px);min-height:180px;overflow-y:auto}
.lbHead,.lbRow{display:grid;grid-template-columns:minmax(0,1.6fr) 104px 96px 124px minmax(0,1.5fr) 130px;gap:12px;align-items:center;padding:7px 14px}
.lbHead{position:sticky;top:0;z-index:1;font:600 11px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);border-bottom:1px solid var(--line);background:#0b1013}
.lbRow .lbName b{font-size:15px}
.lbRow button.small{padding:6px 12px}
.lbRow{border-bottom:1px solid rgba(236,228,207,.07);transition:background .12s}
.lbRow:last-child{border-bottom:0}
.lbRow:hover{background:rgba(255,255,255,.035)}
.lbRow.full{opacity:.6}
.lbName{display:flex;flex-direction:column;gap:2px;min-width:0}
.lbName b{font:400 17px var(--f-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbName small{font:500 12px var(--f-body);color:var(--bone-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbTag{display:inline-flex;align-items:center;gap:5px;justify-self:start;font:700 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line);color:var(--bone-dim)}
.lbTag.open{color:var(--moss);box-shadow:inset 0 0 0 1px rgba(156,196,110,.45)}
.lbTag.pw{color:var(--gold);box-shadow:inset 0 0 0 1px rgba(255,225,122,.45)}
.lbTag.wait{color:var(--bone)}
.lbTag.live{color:var(--ink);background:var(--rust);box-shadow:none}
.lbSlots{display:flex;align-items:center;gap:8px;font:400 16px var(--f-display);white-space:nowrap}
.lbSlots i{display:inline-flex;gap:3px}
.lbSlots i span{width:7px;height:14px;background:rgba(236,228,207,.16)}
.lbSlots i span.on{background:var(--bone)}
.lbNames{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.lbNames span{font:600 12px var(--f-body);padding:2px 7px;background:rgba(255,255,255,.06);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbAct{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.lbAct button{white-space:nowrap}
.lbEmpty{padding:28px 16px;text-align:center;color:var(--bone-dim);font:500 14px/1.5 var(--f-body)}
.lbEmpty b{display:block;font:400 18px var(--f-display);color:var(--bone);margin-bottom:4px}
@media (max-width:820px){
  .lbHead{display:none}
  .lbRow{grid-template-columns:1fr auto;grid-template-areas:"name act" "tags act" "names names";row-gap:8px}
  .lbRow .lbName{grid-area:name} .lbRow .lbAct{grid-area:act}
  .lbRow .lbTags{grid-area:tags;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .lbRow .lbNames{grid-area:names}
}
@media (min-width:821px){.lbTags{display:contents}}
.pwIn,.inviteRow input{flex:1;min-width:0;font:500 15px var(--f-body);color:var(--bone);background:rgba(0,0,0,.45);border:1px solid var(--line);padding:9px 11px;outline:none}
.pwIn{flex-basis:100%}.pwIn:focus,.inviteRow input:focus{border-color:var(--rust)}
.inviteRow{flex-wrap:nowrap;gap:8px;margin:8px 0}
.lbTitle{margin:0;font:400 clamp(22px,4vw,30px) var(--f-display);overflow-wrap:anywhere}
.members{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:640px){.members{grid-template-columns:repeat(2,minmax(0,1fr))}}
.member{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px 12px;border:1px solid var(--line);background:rgba(0,0,0,.4);text-align:center;min-width:0}
.member img{width:84px;height:116px;object-fit:contain}
.member b{font:700 15px var(--f-body);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member b em{font-style:normal;font-size:11px;color:var(--gold);letter-spacing:.08em;text-transform:uppercase}
.member small{font:500 12px var(--f-body);color:var(--bone-dim)}
.member .rdy{margin-top:4px;font:700 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim)}
.member .rdy.on{color:var(--moss)}
.member.empty{justify-content:center;min-height:150px;border-style:dashed}
.member .free{font:500 13px var(--f-body);color:rgba(236,228,207,.35)}
.charRow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:640px){.charRow{grid-template-columns:repeat(2,minmax(0,1fr))}}
button.charPick{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 10px;clip-path:none;background:rgba(255,255,255,.04);color:var(--bone);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
button.charPick img{width:60px;height:82px;object-fit:contain}
button.charPick b{font:400 15px var(--f-display)}
button.charPick small{font:500 11px var(--f-body);color:var(--bone-dim)}
button.charPick:hover{background:rgba(255,255,255,.1)}
button.charPick.on{background:rgba(179,18,28,.35);box-shadow:inset 0 0 0 2px var(--blood-hi)}
.lbActions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.friendRow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line)}
.friendRow b{flex:1;min-width:0;font:600 15px var(--f-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friendRow .dot{width:9px;height:9px;border-radius:50%;background:rgba(236,228,207,.25);flex:none}
.friendRow .dot.on{background:var(--moss);box-shadow:0 0 6px var(--moss)}
#friendBadge{display:inline-block;min-width:18px;margin-left:8px;padding:1px 5px;border-radius:9px;background:var(--blood-hi);color:#fff;font:700 12px var(--f-body);text-align:center}
#inviteCard{position:absolute;right:16px;top:16px;z-index:30;width:min(340px,calc(100% - 32px));display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--panel);border:1px solid var(--rust);box-shadow:0 8px 30px rgba(0,0,0,.5)}
#inviteCard p{margin:0;font:500 15px/1.4 var(--f-body)}

/* ---------- Multiplayer im Spiel: Team, am Boden, Zuschauen ---------- */
#team{position:absolute;left:max(22px,env(safe-area-inset-left,0px));top:calc(120px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:6px;width:min(220px,40vw)}
#team .tm{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:6px 9px;background:var(--panel);border-left:3px solid var(--moss)}
#team .tm b{font:700 13px var(--f-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#team .tm span{font:400 13px var(--f-display);color:#ffe17a}
#team .tm i{grid-column:1/-1;display:block;height:3px;background:var(--moss)}
#team .tm em{grid-column:1/-1;font:700 11px var(--f-body);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
#team .tm em.down{color:var(--blood-hi)}
#team .tm em.dead{color:var(--bone-dim)}
#bleed{position:absolute;left:50%;top:30%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:min(420px,calc(100% - 32px));text-align:center}
#bleed b{font:400 clamp(24px,5vw,38px) var(--f-display);color:var(--blood-hi);text-shadow:0 2px 12px #000}
#bleed span{font:600 15px var(--f-body);text-shadow:0 1px 6px #000}
#bleed i{display:block;width:100%;height:6px;background:rgba(0,0,0,.5)}
#bleed u{display:block;height:100%;background:var(--blood-hi);text-decoration:none;transition:width .2s linear}
#spectate{position:absolute;left:50%;top:18%;transform:translateX(-50%);width:min(520px,calc(100% - 32px));padding:10px 14px;text-align:center;font:600 14px/1.45 var(--f-body);background:var(--panel);border:1px solid var(--line)}

/* ---------- Bestenliste ---------- */
.boardTabs{display:flex;flex-wrap:wrap;gap:6px}
button.boardTab{font:600 13px var(--f-body);padding:8px 12px;clip-path:none;background:rgba(255,255,255,.05);color:var(--bone);box-shadow:inset 0 0 0 1px var(--line)}
button.boardTab:hover{background:rgba(255,255,255,.12)}
button.boardTab.on{background:rgba(179,18,28,.35);box-shadow:inset 0 0 0 2px var(--blood-hi)}
.boardWrap{max-height:min(56vh,520px);overflow:auto;border:1px solid var(--line);background:rgba(0,0,0,.4)}
.boardTable{width:100%;border-collapse:collapse;font:500 14px var(--f-body)}
.boardTable th{position:sticky;top:0;background:#12171a;font:700 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim);text-align:right;padding:9px 10px;white-space:nowrap}
.boardTable td{text-align:right;padding:8px 10px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.boardTable .rk{width:44px;text-align:center;color:var(--bone-dim)}
.boardTable .nm{text-align:left;font-weight:700;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.boardTable th.on{color:var(--bone)}
.boardTable td.on{color:#ffe17a;font-weight:700}
.boardTable tr.m1 .rk{color:#ffd23a;font-weight:700}
.boardTable tr.m2 .rk{color:#d8dde2;font-weight:700}
.boardTable tr.m3 .rk{color:#d08a4a;font-weight:700}
.boardTable tr.me td{background:rgba(179,18,28,.22)}
.boardTable tr.gap td{text-align:center;color:var(--bone-dim)}
@media (max-width:640px){.boardTable th:nth-child(n+6):not(.on),.boardTable td:nth-child(n+6):not(.on){display:none}}

/* ---------- Punktetafel (Tab) ---------- */
#scoreboard{position:absolute;z-index:6;left:50%;top:16%;transform:translateX(-50%);width:min(680px,calc(100% - 32px));padding:14px 16px 10px;background:rgba(9,13,15,.96);border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.6)}
#scoreboard .sbHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
#scoreboard .sbHead b{font:400 22px var(--f-display);color:var(--blood-hi)}
#scoreboard .sbHead span{font:600 12px var(--f-body);letter-spacing:.06em;color:var(--bone-dim)}
#sbTable{width:100%;border-collapse:collapse;font:600 15px var(--f-body)}
#sbTable th{font:700 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim);text-align:right;padding:6px 8px;border-bottom:1px solid var(--line)}
#sbTable td{text-align:right;padding:8px;border-bottom:1px solid rgba(236,228,207,.07);font-variant-numeric:tabular-nums;white-space:nowrap}
#sbTable .nm{text-align:left;max-width:200px;overflow:hidden;text-overflow:ellipsis}
#sbTable td:nth-child(2){color:#ffe17a}
#sbTable .st{text-align:right;color:var(--moss);font-size:13px}
#sbTable .st.bad{color:var(--blood-hi)}
#sbTable tr.me td{background:rgba(179,18,28,.2)}
@media (max-width:560px){#sbTable th:nth-child(4),#sbTable td:nth-child(4){display:none}}

/* ---------- Boss-Lebensleiste ---------- */
#bossBar{position:absolute;left:50%;top:calc(16px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(560px,calc(100% - 200px));min-width:240px;display:flex;flex-direction:column;gap:5px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
#bossBar .bbHead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
#bossBar .bbHead b{font:400 18px var(--f-display);color:#ffb070;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bossBar .bbHead span{font:700 13px var(--f-body);color:var(--bone)}
#bossBar .bbTrack{height:14px;background:rgba(0,0,0,.65);border:1px solid rgba(255,176,112,.5);clip-path:polygon(1% 0,100% 0,99% 100%,0 100%)}
#bossBar .bbTrack i{display:block;height:100%;background:linear-gradient(#ff9a4a,#c8401a);transition:width .25s ease-out}
#bossBar.rage .bbHead b{color:var(--blood-hi)}
#bossBar.rage .bbTrack{border-color:rgba(255,58,63,.7)}
#bossBar.rage .bbTrack i{background:linear-gradient(#ff5a50,#9a0c12);animation:bossPulse .6s ease-in-out infinite alternate}
@keyframes bossPulse{from{filter:brightness(1)}to{filter:brightness(1.45)}}
@media (max-width:640px){#bossBar{width:calc(100% - 120px);min-width:0}#bossBar .bbHead b{font-size:14px}}

/* ---------- Pausenmenü mit Karte ---------- */
.pauseOv{background:radial-gradient(ellipse at 30% 40%,rgba(30,10,10,.55),rgba(4,6,8,.92) 70%);backdrop-filter:blur(3px)}
.pauseWrap{width:min(1180px,100%);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:22px;align-items:stretch}
@media (max-width:900px){.pauseWrap{grid-template-columns:1fr}}
.pauseMap{display:flex;flex-direction:column;gap:10px;padding:14px;background:rgba(9,13,15,.82);border:1px solid var(--line);box-shadow:0 16px 50px rgba(0,0,0,.5)}
.pmHead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.pmHead b{font:400 22px var(--f-display);color:var(--bone)}
.pmHead span{font:600 13px var(--f-body);color:var(--rust)}
.pmCanvas{position:relative;background:#0e1214;border:1px solid rgba(236,228,207,.08)}
#pauseMap{display:block;width:100%;height:auto;max-height:62vh}
#pauseMap .pmRoom{stroke:rgba(236,228,207,.06);stroke-width:.15}
#pauseMap .pmRoom.here{stroke:rgba(232,144,46,.8);stroke-width:.35}
#pauseMap .pmWall{stroke:#c9c0aa;stroke-width:.55;stroke-linecap:square}
#pauseMap .pmFence{stroke:#8d806a;stroke-width:.3;stroke-dasharray:.9 .5}
#pauseMap .pmWin{stroke:#7fc7ff;stroke-width:.5;opacity:.8}
#pauseMap .pmDoor line{stroke:#e8902e;stroke-width:.8}
#pauseMap .pmDoor rect{fill:rgba(232,144,46,.35);stroke:#e8902e;stroke-width:.25}
#pauseMap .pmDoor text{font:700 1.7px var(--f-body);fill:#ffc58a;text-anchor:middle;paint-order:stroke;stroke:#0e1214;stroke-width:.35}
#pauseMap .pmStair{fill:none;stroke:rgba(236,228,207,.35);stroke-width:.18;stroke-dasharray:.35 .25}
#pauseMap .pmLabel{font:400 2.1px var(--f-display);fill:rgba(236,228,207,.42);text-anchor:middle;letter-spacing:.08px}
#pauseMap .pmLabel.locked{fill:rgba(236,228,207,.2)}
#pauseMap .pmMark text{font:700 .95px var(--f-body);fill:#fff;text-anchor:middle}
#pauseMap .pmMark .pmUp{font:700 .75px var(--f-body);fill:#ffe17a;text-anchor:start}
#pauseMap .pmMark.perk circle{stroke:#0e1214;stroke-width:.25}
#pauseMap .pmMark.perk.have circle:first-child{stroke:#9cc46e;stroke-width:.35}
#pauseMap .pmMark .ok{fill:#9cc46e;stroke:#0e1214;stroke-width:.15}
#pauseMap .pmMark.pap path{fill:#7a3cff;stroke:#c8a8ff;stroke-width:.2}
#pauseMap .pmMark.box rect{fill:#2a6fb0;stroke:#9fd8ff;stroke-width:.2}
#pauseMap .pmMark.ammo rect{fill:#4f6e2c;stroke:#b8e07a;stroke-width:.18}
#pauseMap .pmMark.ammo path{fill:#e8c44a}
#pauseMap .pmMark.buy rect{fill:#3a3f46;stroke:#aab2b8;stroke-width:.15}
#pauseMap .pmMark.buy path{fill:none;stroke:#ece4cf;stroke-width:.18}
#pauseMap .pmMark.buy.have rect{stroke:#9cc46e}
#pauseMap .pmMate circle{r:1.3px;fill:#7fd0ff;stroke:#0e1214;stroke-width:.2}
#pauseMap .pmMate.down circle{fill:#ff3a3f}
#pauseMap .pmMate text{font:700 1.6px var(--f-body);fill:#cdeaff;text-anchor:middle;paint-order:stroke;stroke:#0e1214;stroke-width:.3}
#pauseMap .pmMe path{fill:#ffcf4a;stroke:#2a1c00;stroke-width:.18}
#pauseMap .pmMe .halo{fill:rgba(255,207,74,.16);stroke:rgba(255,207,74,.5);stroke-width:.12;animation:pmPulse 1.6s ease-in-out infinite}
@keyframes pmPulse{50%{r:2.9px;opacity:.5}}
.pmLegend{display:flex;flex-wrap:wrap;gap:6px 16px;font:600 12px var(--f-body);color:var(--bone-dim)}
.pmLegend span{display:inline-flex;align-items:center;gap:6px}
.pmLegend .lg{display:inline-block;width:12px;height:12px;border-radius:3px;font:700 8px/12px var(--f-body);font-style:normal;text-align:center;color:#ffe17a}
.lg.perk{border-radius:50%;background:#c0262c}.lg.pap{background:#7a3cff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.lg.box{background:#2a6fb0}.lg.ammo{background:#4f6e2c}.lg.buy{background:#3a3f46;box-shadow:inset 0 0 0 1px #aab2b8}
.lg.door{background:#e8902e;height:4px!important}.lg.og{width:auto!important;padding:0 2px;box-shadow:inset 0 0 0 1px #ffe17a}
.pauseSide{display:flex;flex-direction:column;gap:16px;padding:18px 20px;background:rgba(9,13,15,.82);border:1px solid var(--line);box-shadow:0 16px 50px rgba(0,0,0,.5);box-sizing:border-box;max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain}   /* Missionen können länger werden: Spalte scrollt */
.pauseTitle{font-size:clamp(40px,6vw,64px)!important;margin:0;line-height:1}
.pStats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pStats div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:rgba(255,255,255,.04);border-left:3px solid var(--blood)}
.pStats b{font:400 22px var(--f-display);color:var(--bone);font-variant-numeric:tabular-nums}
.pStats span{font:600 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
.pBtns{display:flex;flex-direction:column;gap:8px}
.pBtns button{width:100%;clip-path:none;text-align:left;padding:13px 18px;font-size:17px}
.pBtns #resumeBtn{background:var(--bone);color:var(--ink);box-shadow:inset 4px 0 0 var(--blood)}
.pBtns #resumeBtn:hover{background:#fff}
.pBtns button.ghost:hover{background:rgba(255,255,255,.08)}

/* ---------- Übungsraum: Schadenszahlen und Werte ---------- */
#dmgLayer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.dmgNum{position:absolute;left:0;top:0;font:400 22px var(--f-display);color:#fff;text-shadow:0 2px 0 #000,0 0 8px rgba(0,0,0,.7);white-space:nowrap;will-change:transform,opacity}
.dmgNum.head{color:#ffd23a;font-size:28px}
.dmgNum.head::after{content:" ✦";font-size:.7em}
.dmgNum.knife{color:#9fd8ff}
.dmgNum.nade{color:#ff9a4a}
#trainPanel{position:absolute;right:max(22px,env(safe-area-inset-right,0px));top:calc(40px + env(safe-area-inset-top,0px));width:min(300px,42vw);display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--rust)}
#trainPanel .tpHead{display:flex;flex-direction:column;gap:2px}
#trainPanel .tpHead b{font:400 18px var(--f-display);color:var(--rust)}
#trainPanel .tpHead span{font:600 11px var(--f-body);color:var(--bone-dim)}
#tpWeapon{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--line)}
#tpWeapon b{font:700 15px var(--f-body)}
#tpWeapon small{font:500 12px/1.4 var(--f-body);color:var(--bone-dim)}
#tpGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#tpGrid div{display:flex;flex-direction:column;gap:1px;padding:6px 8px;background:rgba(255,255,255,.04)}
#tpGrid span{font:600 10px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim)}
#tpGrid b{font:400 18px var(--f-display);color:var(--bone);font-variant-numeric:tabular-nums}
#tpGrid .head b{color:#ffd23a}
#sbTable .pg{font-size:13px;color:var(--bone-dim)}
#sbTable td.pg.good{color:#7ad04a}#sbTable td.pg.ok{color:#e8c44a}#sbTable td.pg.bad{color:var(--blood-hi)}
#sbTable .hostTag{font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-left:4px}
#perks .perk{position:relative}
#perks .perk i{position:absolute;right:-5px;bottom:-5px;min-width:13px;height:13px;padding:0 2px;border-radius:7px;background:#0d0f12;border:1px solid currentColor;color:#ffe17a;font:700 9px/11px var(--f-body);font-style:normal;text-align:center}
#pauseMap .pmMark.forge rect{fill:#8a3a14;stroke:#ffb070;stroke-width:.2}
#pauseMap .pmMark.forge text{fill:#ffd23a}
.lg.forge{background:#8a3a14;box-shadow:inset 0 0 0 1px #ffb070}

/* ---------- Waffe ablegen (X halten) ---------- */
#dropHold{position:absolute;left:50%;top:58%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 14px;background:var(--panel);border:1px solid var(--line);font:600 14px var(--f-body);white-space:nowrap}
#dropHold i{display:block;width:180px;height:4px;background:rgba(255,255,255,.15)}
#dropHold i::after{content:"";display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--rust)}
#dropHold.no{color:var(--bone-dim)}#dropHold.no i{display:none}

/* ---------- Mitspieler am Boden: Pfeil am Bildschirmrand ---------- */
#downArrows{position:fixed;inset:0;pointer-events:none;z-index:5}
.downArrow{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px 7px;background:rgba(24,4,6,.85);border:2px solid #ff3a3f;border-radius:10px;text-align:center;animation:downPulse 1s ease-in-out infinite}
.downArrow i{display:block;width:0;height:0;border-left:13px solid #ff3a3f;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-bottom:2px}
.downArrow b{font:700 14px var(--f-body);color:#fff;white-space:nowrap}
.downArrow small{font:700 12px var(--f-body);color:#ffd0c8;white-space:nowrap}
.downArrow.urgent{background:rgba(110,8,12,.92)}
@keyframes downPulse{50%{box-shadow:0 0 18px rgba(255,58,63,.85)}}

/* ---------- Sprachauswahl (Hauptmenü und Anmeldung) ---------- */
.langPick{display:flex;align-items:center;justify-content:space-between;gap:12px;font:600 13px var(--f-body);color:var(--bone-dim);text-shadow:0 1px 2px #000}
.langPick select{font:600 14px var(--f-body);color:var(--bone);background:rgba(5,8,10,.8);border:1px solid rgba(232,226,208,.25);padding:6px 10px;cursor:var(--cur-pointer);min-width:140px}
.langPick select:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
button.musicToggle{font:600 14px var(--f-body);color:var(--bone);background:rgba(5,8,10,.8);border:1px solid rgba(232,226,208,.25);padding:6px 10px;min-width:140px;clip-path:none;text-align:left;box-shadow:none}
button.musicToggle:hover{background:rgba(255,255,255,.1)}
button.musicToggle.off{color:var(--bone-dim)}
button.musicToggle:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
.authCard .langPick{margin-top:14px}
/* Pausenmenü ohne Karte (Übungsraum): mittig */
.pauseWrap.solo{grid-template-columns:minmax(280px,460px);justify-content:center}

/* Bestenliste: Sortieren per Klick auf den Spaltenkopf */
.boardTable th.sortable{padding:0}
.boardTable th.sortable button{all:unset;box-sizing:border-box;display:block;width:100%;padding:9px 10px;text-align:right;cursor:var(--cur-pointer);font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.boardTable th.sortable button:hover{color:var(--bone);background:rgba(255,255,255,.06)}
.boardTable th.sortable button:focus-visible{outline:2px solid var(--bone);outline-offset:-2px}
.boardTable th.sortable.on button::after{content:' ▼';color:var(--blood-hi)}
/* ---------- Missionen (Hauptmenü-Karte und Pausenmenü) ---------- */
.missionCard{padding:10px 12px;background:rgba(5,8,10,.82);backdrop-filter:blur(4px);border:1px solid var(--line)}
.misHead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.misReset{font:600 11px var(--f-body);color:var(--bone-dim)}
.misTabs{display:flex;gap:4px;margin-bottom:8px}
.misTabs button{flex:1;font:700 12px var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;clip-path:none;background:rgba(255,255,255,.05);color:var(--bone-dim);box-shadow:inset 0 -2px 0 transparent;position:relative}
.misTabs button.on{color:var(--bone);background:rgba(255,255,255,.1);box-shadow:inset 0 -2px 0 var(--blood-hi)}
.misTabs small{font-weight:600;opacity:.75}
.misDot{position:absolute;top:4px;right:6px;width:8px;height:8px;border-radius:50%;background:#ffd23a;box-shadow:0 0 6px #ffd23a}
.misList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.misRow{display:grid;grid-template-columns:1fr auto;gap:3px 8px;align-items:center}
.misTxt{font:600 13px/1.25 var(--f-body);color:var(--bone)}
.misRew{font:600 11px var(--f-body);color:#ffe17a;white-space:nowrap}
.misDone{font:700 11px var(--f-body);color:var(--moss);white-space:nowrap}
button.misClaim{padding:4px 10px;font-size:12px;background:#ffd23a;color:#1a1200;animation:pop .4s ease-out}
.misBar{grid-column:1 / -1;position:relative;display:block;height:14px;background:rgba(255,255,255,.08)}
.misBar u{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#8a1a1e,var(--blood-hi))}
.misBar em{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(255,210,58,.75) 0 4px,rgba(255,210,58,.45) 4px 8px)}
.misBar span{position:relative;display:block;font:700 10px/14px var(--f-body);text-align:center;color:#fff;text-shadow:0 1px 2px #000}
.misBar small{font-weight:600;color:#ffe17a}
.misRow.ready .misBar u,.misRow.claimed .misBar u{background:linear-gradient(90deg,#4a7a2a,var(--moss))}
.misRow.claimed .misTxt{color:var(--bone-dim);text-decoration:line-through}
.misEmpty{font:600 12px var(--f-body);color:var(--bone-dim)}
.pauseMissions{display:flex;flex-direction:column;gap:8px}
.pauseMissions .misGroup b{display:flex;justify-content:space-between;font:700 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--bone);margin-bottom:4px}
.pauseMissions .misGroup b small{font-weight:600;text-transform:none;letter-spacing:0;color:var(--bone-dim)}
.pauseMissions .misList{gap:5px}
.pauseMissions .misTxt{font-size:12px}
/* ---------- Ankündigung, Wartungshinweis, Menü-Banner (aus dem Adminpanel) ---------- */
#announce{position:absolute;left:50%;top:calc(18px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:40;width:min(560px,calc(100% - 32px));
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:start;padding:12px 14px 12px 18px;background:rgba(9,13,15,.96);border:1px solid var(--rust);border-left:4px solid var(--rust);
  box-shadow:0 10px 30px rgba(0,0,0,.55);animation:annIn .3s ease-out;pointer-events:auto}
#announce .anTag{grid-column:1;font:700 12px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--rust)}
#announce p{grid-column:1;margin:0;font:600 16px/1.4 var(--f-body);color:var(--bone);overflow-wrap:anywhere}
#announce .anClose{grid-column:2;grid-row:1 / span 2;background:none;border:0;color:var(--bone-dim);font-size:18px;padding:2px 6px;cursor:var(--cur-pointer)}
#announce .anClose:hover{color:var(--bone)}
@keyframes annIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.maintNote{margin:0 0 14px;padding:10px 14px;border:1px solid var(--rust);border-left-width:4px;background:rgba(232,144,46,.1);color:var(--bone);font:600 14px/1.4 var(--f-body)}
.newsBanner{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:12px 14px;background:rgba(5,8,10,.82);backdrop-filter:blur(4px);
  border:1px solid var(--line);border-left:4px solid var(--bone-dim)}
.newsBanner.event{border-left-color:var(--rust)}
.newsBanner.warn{border-left-color:var(--blood-hi)}
.newsBanner .nbTag{grid-column:1;font:700 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
.newsBanner.event .nbTag{color:var(--rust)}
.newsBanner.warn .nbTag{color:var(--blood-hi)}
.newsBanner .nbText{grid-column:1;margin:0;font:600 15px/1.35 var(--f-body);color:var(--bone);overflow-wrap:anywhere}
.newsBanner .nbLink{grid-column:2;grid-row:1 / span 2;font:700 13px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--bone);padding:8px 12px;text-decoration:none;white-space:nowrap}
.newsBanner .nbLink:hover{background:#fff}
.newsBanner .nbLink:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
/* Bonus-Events als Slider: alle Folien liegen übereinander (gleiche Zelle) – die Karte ist so hoch wie die längste,
   beim Weiterblättern springt nichts */
.eventCard{padding:12px 14px 10px;background:linear-gradient(135deg,rgba(232,144,46,.22),rgba(5,8,10,.85) 60%);backdrop-filter:blur(4px);border:1px solid var(--rust);box-shadow:0 0 22px rgba(232,144,46,.18);transition:background .4s,border-color .4s,box-shadow .4s}
.eventCard.soon{background:rgba(5,8,10,.82);border-color:var(--line);box-shadow:none}
.evSlides{display:grid}
.evSlide{grid-area:1 / 1;display:flex;flex-direction:column;gap:5px;min-width:0;opacity:0;visibility:hidden;transform:translateX(10px);transition:opacity .35s,transform .35s,visibility 0s .35s}
.evSlide.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .35s}
.evHead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.eventCard .evTag{font:700 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--rust)}
.evSlide.soon .evTag{color:var(--bone-dim)}
.evHead small{font:600 12px var(--f-body);color:var(--bone-dim);white-space:nowrap}
.evName{font:400 18px/1.15 var(--f-display);letter-spacing:.02em;color:var(--bone);overflow-wrap:anywhere}
.evInfo{margin:0;font:600 13px/1.4 var(--f-body);color:var(--bone);opacity:.88;overflow-wrap:anywhere}
.evFx{font:700 13px var(--f-body);color:#ffcf8a}
.evSlide.soon .evFx{color:#e9c48f}
.evNav{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
button.evArrow{width:30px;height:26px;padding:0;display:grid;place-items:center;font:700 20px/1 var(--f-body);clip-path:none;background:rgba(255,255,255,.08);color:var(--bone);box-shadow:none}
button.evArrow:hover{background:rgba(255,255,255,.18)}
.evDots{flex:1;display:flex;justify-content:center;gap:6px}
button.evDot{width:8px;height:8px;padding:0;border-radius:50%;clip-path:none;background:rgba(236,228,207,.3);box-shadow:none;transition:background .2s,transform .2s}
button.evDot.on{background:var(--rust);transform:scale(1.25)}
.eventCard.soon button.evDot.on{background:var(--bone)}
.evCount{font:600 11px var(--f-body);color:var(--bone-dim);font-variant-numeric:tabular-nums;min-width:28px;text-align:right}
@media (prefers-reduced-motion:reduce){.evSlide,.evSlide.on{transition:none;transform:none}}
@media (prefers-reduced-motion:reduce){#announce{animation:none}}
/* ---------- Discord-Karte im Hauptmenü ---------- */
/* Knopf in eigener Zeile unter Logo + Text – sonst drückt ein langer Knopftext (z. B. „Discord beitreten“) den Text zusammen */
.discordCard{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 12px;padding:12px 14px;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,rgba(88,101,242,.92),rgba(64,74,190,.92));border:1px solid rgba(160,170,255,.45);
  box-shadow:0 10px 30px rgba(40,46,140,.45),inset 0 1px 0 rgba(255,255,255,.18);overflow:hidden;transition:transform .15s,box-shadow .15s}
.discordCard::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 48%,transparent 66%);transform:translateX(-120%);animation:dcShine 4.5s ease-in-out infinite}
@keyframes dcShine{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
.discordCard:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(60,70,200,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.discordCard:focus-visible{outline:2px solid #fff;outline-offset:3px}
.dcLogo{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.14);color:#fff}
.dcText{display:flex;flex-direction:column;gap:2px;min-width:0}
.dcText b{font:400 15px var(--f-display);letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.dcText small{font:600 12px/1.3 var(--f-body);color:rgba(255,255,255,.85)}
.dcBtn{grid-column:1 / -1;text-align:center;font:700 13px var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;background:#fff;color:#4752c4;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.discordCard:hover .dcBtn{background:#eef0ff}
@media (prefers-reduced-motion:reduce){.discordCard::before{animation:none;display:none}.discordCard{transition:none}}
/* Pausenkarte: Stromkasten (gelb = aus, grün = an) */
#pauseMap .pmMark.power rect{fill:#3a3420;stroke:#ffd23a;stroke-width:.2}
#pauseMap .pmMark.power path{fill:#ffd23a}
#pauseMap .pmMark.power.on rect{fill:#1e3a24;stroke:#5aff7a}
#pauseMap .pmMark.power.on path{fill:#5aff7a}
.pmLegend .lg.power{background:#ffd23a}
/* ---------- Shop: Symbole, Wirkung, zu teuer ---------- */
.sHead{display:flex;align-items:center;gap:8px}
.sHead .pips{margin-left:auto}
.sIcon{flex:none;width:34px;height:34px;display:grid;place-items:center;font-size:20px;line-height:1;background:rgba(255,255,255,.05);filter:saturate(.85)}
.sItem p.sFx{font:600 12px/1.4 var(--f-body);color:#9fd8a0}
.sItem.poor{opacity:.55}
.sItem.poor button.buy{background:#5a5040;color:#c8bfa8}
.stRow p.stTotal{color:#9fd8a0;font-weight:600}
/* ---------- Ergebnisbildschirm: neuer Rekord, gleitender Stufen-Balken ---------- */
.recordBanner{align-self:flex-start;display:inline-flex;gap:8px;align-items:center;padding:8px 14px;font:400 16px var(--f-display);letter-spacing:.04em;color:#241800;
  background:linear-gradient(90deg,#ffd23a,#ffb020);box-shadow:0 0 24px rgba(255,190,40,.45);animation:recPop .6s cubic-bezier(.2,1.6,.4,1) both, recGlow 1.8s ease-in-out .6s infinite}
.recordBanner b{font:700 14px var(--f-body);text-transform:uppercase}
@keyframes recPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes recGlow{50%{box-shadow:0 0 38px rgba(255,190,40,.75)}}
#oXpBar{transition:width .9s cubic-bezier(.25,.8,.3,1)}
#oXpBar.reset{transition:none}
@media (prefers-reduced-motion:reduce){.recordBanner{animation:none}#oXpBar{transition:none}}
/* ---------- Einstellungen: Werte neben den Reglern, Sprache ---------- */
label.sens:has(.sVal){display:grid;grid-template-columns:1fr auto;align-items:baseline}
label.sens:has(.sVal) input{grid-column:1/-1}
label.sens .sVal{font:700 12px var(--f-body);letter-spacing:0;color:var(--bone);font-variant-numeric:tabular-nums}
.setLang{justify-content:flex-start;gap:14px}
/* ---------- Freunde: Status, Rückfrage ---------- */
.friendRow:has(.frSt) b{flex:0 1 auto}
.friendRow .frSt{flex:1;font:600 12px var(--f-body);color:var(--bone-dim)}
.friendRow .frSt.on{color:#9fd8a0}
.friendRow .dot.game{background:#ffcf4a;box-shadow:0 0 6px rgba(255,207,74,.7)}
.friendRow .frQ{font:700 12px var(--f-body);color:#ffb0a0}
/* ---------- Lobby: Stufe, Entfernen, Einladen im freien Platz ---------- */
.member{position:relative}
.member .lvlTag{position:absolute;left:8px;top:8px;font:700 11px var(--f-body);letter-spacing:.06em;padding:2px 6px;background:rgba(0,0,0,.55);border:1px solid var(--line);color:#ffe17a}
.member button.kick{position:absolute;right:6px;top:6px;padding:3px 8px;font:700 12px var(--f-body);clip-path:none;background:rgba(0,0,0,.55);color:var(--bone-dim);box-shadow:inset 0 0 0 1px var(--line)}
.member button.kick:hover{color:#fff;background:rgba(179,18,28,.6)}
.member button.kick.sure{background:var(--blood);color:#fff}
.member.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.slotPick{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:0 8px}
.slotPick small{font:600 12px var(--f-body);color:var(--bone-dim);text-align:center}
/* ---------- Ohne Verbindung: neu verbinden ---------- */
.reconnect{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.reconnect .rcInfo{margin:0;font:600 12px var(--f-body);color:var(--bone-dim);min-height:1em}
/* ---------- Spielfiguren: gesperrt ---------- */
button.charPick.locked{opacity:.55;cursor:var(--cur-blocked)}
button.charPick.locked img{filter:grayscale(1) brightness(.45)}
button.charPick.locked small{color:#c8a070}
/* ---------- Erfolge ---------- */
.achTabs{margin-top:-6px}
.achTabs button.boardTab small{font-weight:600;color:var(--bone-dim);margin-left:2px}
.achTabs button.boardTab.on small{color:var(--bone)}
#achList .achNote{grid-column:1/-1;margin:0}
#boxOdds li.locked{opacity:.6}
#boxOdds li.locked b{font-size:11px;color:#c8a070}
.achSummary{display:flex;flex-direction:column;gap:8px}
.achSummary b{color:#ffe17a}
.achBar{display:block;height:8px;background:rgba(255,255,255,.08)}
.achBar u{display:block;height:100%;background:linear-gradient(90deg,#c8901e,#ffd23a)}
#achList{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.achItem{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);background:rgba(0,0,0,.4)}
.achItem .aIcon{font-size:26px;line-height:1;width:34px;text-align:center;filter:grayscale(1) opacity(.45)}
.achItem.done{border-color:rgba(255,207,74,.45);background:linear-gradient(135deg,rgba(255,190,40,.12),rgba(0,0,0,.4))}
.achItem.done .aIcon{filter:none}
.achItem .aBody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.achItem b{font:400 15px var(--f-display);color:var(--bone)}
.achItem p{margin:0;font:500 12px/1.4 var(--f-body);color:var(--bone-dim)}
.achItem p.aReward{color:#9fd8a0;font-weight:600}
.achItem p.aDone{color:#ffd23a;font-weight:700}
.aProg{position:relative;display:block;height:16px;background:rgba(255,255,255,.07)}
.aProg u{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--blood),var(--blood-hi))}
.aProg span{position:relative;display:block;text-align:center;font:700 11px/16px var(--f-body);color:var(--bone)}
/* ---------- Spind: Lackierungen ---------- */
.camoGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
/* ---------- Titel (Spind, Lobby, Freundesliste) ---------- */
.titleGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-bottom:6px}
button.titleItem{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;clip-path:none;text-align:left;background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px var(--line);border-left:3px solid var(--tc,var(--line))}
button.titleItem b{font:700 13px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--tc,var(--bone))}
button.titleItem small{font:600 11px var(--f-body);color:var(--bone-dim)}
button.titleItem.on{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px var(--tc,var(--bone))}
button.titleItem.locked{opacity:.55}
button.titleItem.locked small{color:#c8a070}
button.titleItem.glow b,.pTitle.glow{text-shadow:0 0 8px var(--tc)}
.pTitle{font:700 10px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--tc);white-space:nowrap}
/* höchster Titel (mythic in js/data/titles.js): schimmernder Verlauf Blutrot → Gold */
button.titleItem.mythic b,.pTitle.mythic{background:linear-gradient(90deg,#ff3a2a,#ffd36a,#ff3a2a,#ffd36a,#ff3a2a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 6px rgba(255,74,50,.6));animation:mythicShine 3s linear infinite}
button.titleItem.mythic.locked b{animation:none}
@keyframes mythicShine{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){button.titleItem.mythic b,.pTitle.mythic{animation:none}}
.friendRow .pTitle{margin-left:-4px}
button.camoItem{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px;clip-path:none;background:rgba(255,255,255,.04);color:var(--bone);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
button.camoItem img{width:100%;max-width:200px;height:auto;aspect-ratio:240/96;object-fit:contain}
button.camoItem b{font:400 15px var(--f-display)}
button.camoItem small{font:500 11px var(--f-body);color:var(--bone-dim);text-align:center}
button.camoItem:hover{background:rgba(255,255,255,.1)}
button.camoItem.on{background:rgba(179,18,28,.35);box-shadow:inset 0 0 0 2px var(--blood-hi)}
button.camoItem.locked{opacity:.55;cursor:var(--cur-blocked)}
button.camoItem.locked img{filter:grayscale(1) brightness(.4)}
button.camoItem.locked small{color:#c8a070}
#lockerGrid.charRow{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
/* ---------- Meldung „Erfolg freigeschaltet“ ---------- */
#achToast{position:fixed;left:50%;top:18px;z-index:60;display:flex;gap:12px;align-items:center;min-width:280px;max-width:min(440px,92vw);padding:12px 16px;
  background:linear-gradient(135deg,rgba(40,28,6,.95),rgba(12,10,8,.95));border:1px solid rgba(255,207,74,.6);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 24px rgba(255,190,40,.25);
  transform:translate(-50%,-140%);opacity:0;transition:transform .45s cubic-bezier(.2,1.3,.4,1),opacity .3s;pointer-events:none}
#achToast.show{transform:translate(-50%,0);opacity:1}
#achToast .atIcon{font-size:30px;line-height:1}
#achToast .atText{display:flex;flex-direction:column;gap:2px;min-width:0}
#achToast small{font:700 11px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#ffd23a}
#achToast b{font:400 17px var(--f-display);color:#fff}
#achToast em{font:600 12px var(--f-body);font-style:normal;color:#9fd8a0}
@media (prefers-reduced-motion:reduce){#achToast{transition:opacity .2s}}
/* ---------- Tooltips im Spieldesign (js/ui/tooltip.js) ---------- */
#tip{position:fixed;z-index:9999;left:0;top:0;box-sizing:border-box;width:max-content;max-width:min(300px,calc(100vw - 16px));padding:8px 11px 9px;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,16,16,.97),rgba(9,13,15,.97));color:var(--bone);border:1px solid var(--line);border-top:2px solid var(--blood);
  box-shadow:0 8px 22px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.5);font:500 13px/1.4 var(--f-body);white-space:pre-line;text-align:left;
  opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;visibility:hidden}
#tip.show{opacity:1;transform:none;visibility:visible}
#tip.below{border-top:1px solid var(--line);border-bottom:2px solid var(--blood);transform:translateY(-4px)}
#tip.below.show{transform:none}
#tip b{display:block;margin-bottom:3px;font:400 13px var(--f-display);letter-spacing:.03em;color:var(--bone)}
#tip.lock b{color:#e8b070}
#tip::after{content:'';position:absolute;left:var(--ax,50%);bottom:-7px;width:10px;height:10px;margin-left:-5px;background:rgba(9,13,15,.97);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
#tip.below::after{bottom:auto;top:-6px;transform:rotate(225deg)}
@media (prefers-reduced-motion:reduce){#tip{transition:none}}
/* Einstellungen: Reiter-Abschnitte; gesperrte Spind-Einträge mit Tooltip */
.crList{display:grid;grid-template-columns:max-content 1fr;gap:10px 18px;margin:0;font:500 14px/1.45 var(--f-body)}
.crList dt{font:600 12px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim);padding-top:2px}
.crList dd{margin:0;color:var(--bone)}
.crList a{color:var(--gold)}
@media (max-width:520px){.crList{grid-template-columns:1fr;gap:2px}.crList dd{margin-bottom:10px}}
.setPane{display:flex;flex-direction:column;gap:16px;min-height:260px}
button.locked[aria-disabled="true"][data-tip],[aria-disabled="true"][data-tip]{cursor:var(--cur-locked)}
button.titleItem.locked b{opacity:.8}