/* 16-Bit Retro Look: begrenzte Palette, harte Kanten, Pixel-Snapping */
:root{
  --bg:#0b0f1e; --panel:#171c33; --panel2:#10142a; --ink:#e8ecff;
  --dim:#8a93b8; --line:#39406b; --accent:#5aa9ff; --accent2:#ffcc33;
  --hp:#ff4d5e; --sh:#5af0ff; --scrap:#ffcc33; --good:#5affa0; --bad:#ff5a7a;
  --rare:#ffcc33; --magic:#5aa9ff; --common:#b8c0cc; --unique:#ff5ad1;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%; overflow:hidden; background:var(--bg); color:var(--ink);
  font-family:"Lucida Console","Courier New",monospace; letter-spacing:.5px;
  -webkit-font-smoothing:none; image-rendering:pixelated; user-select:none}
.hidden{display:none !important}

#game{position:fixed; inset:0; width:100vw; height:100vh; display:block;
  image-rendering:auto; background:#05060f}

/* ---- Overlays / Panels ---- */
.overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(5,7,16,.86); z-index:50; padding:16px}
.panel{background:var(--panel); border:3px solid var(--line);
  box-shadow:0 0 0 3px #000, 6px 6px 0 0 rgba(0,0,0,.5); padding:22px 26px; max-width:96vw}
.panel h1,.panel h2{text-transform:uppercase; letter-spacing:2px}

.logo{font-size:38px; text-align:center; color:var(--accent2); text-shadow:3px 3px 0 #000, 0 0 12px rgba(255,204,51,.4)}
.logo span{color:var(--accent); display:block; font-size:28px}
.tagline{text-align:center; color:var(--dim); margin:6px 0 18px; font-size:12px}
.login-panel{width:360px; text-align:center}
.login-panel label{display:block; text-align:left; font-size:11px; color:var(--dim); margin:10px 0 4px}
input{width:100%; background:var(--panel2); border:2px solid var(--line); color:var(--ink);
  padding:10px; font-family:inherit; font-size:16px; outline:none}
input:focus{border-color:var(--accent)}
button{cursor:pointer; font-family:inherit; text-transform:uppercase; letter-spacing:1px;
  background:var(--accent); color:#06223f; border:2px solid #06223f; padding:10px 14px;
  font-weight:bold; box-shadow:3px 3px 0 #000; transition:transform .05s}
button:hover{filter:brightness(1.1)} button:active{transform:translate(2px,2px); box-shadow:1px 1px 0 #000}
button:disabled{background:#3a4163; color:#7b83a8; cursor:not-allowed; box-shadow:none}
#login-btn{width:100%; margin-top:16px; font-size:16px}
.err{color:var(--bad); min-height:18px; margin-top:10px; font-size:12px}
.hint{color:var(--dim); font-size:11px; margin-top:12px}

/* ---- HUD ---- */
#hud{position:fixed; inset:0; pointer-events:none; z-index:20}
#hud-top{position:absolute; top:10px; left:12px; display:flex; gap:18px; align-items:center;
  background:rgba(11,15,30,.7); border:2px solid var(--line); padding:6px 12px}
.stat{font-size:14px} .stat .lbl{color:var(--dim); font-size:10px; margin-right:4px}
.scrap{color:var(--scrap)}
.idle-ind{color:var(--good); border:2px solid var(--good); padding:1px 6px; font-size:11px; display:none}
.idle-ind.on{display:inline-block; animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}

/* Mitspieler-Liste (oben links, unter den Statuswerten) */
#playerlist{position:absolute; top:48px; left:12px; width:194px; display:flex; flex-direction:column; gap:4px;
  max-height:46vh; overflow-y:auto; z-index:18; pointer-events:none}
.pl-title{font-size:10px; letter-spacing:1px; color:var(--dim); padding:1px 2px}
.form-bonus{background:rgba(11,15,30,.8); border:1px solid var(--accent2); border-radius:6px; padding:4px 7px; font-size:10px; color:var(--ink); line-height:1.5}
.form-bonus .form-title{color:var(--accent2); font-weight:bold; letter-spacing:.5px; margin-bottom:2px}
.pl-row{display:flex; align-items:center; gap:6px; background:rgba(11,15,30,.74); border:1px solid rgba(90,130,200,.28);
  border-radius:6px; padding:3px 5px}
.pl-row.me{border-color:var(--accent); background:rgba(20,40,72,.8)}
.pl-av{width:22px; height:22px; border-radius:4px; object-fit:cover; background:#16203a; flex:0 0 auto; image-rendering:pixelated}
.pl-av-ph{display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:bold; color:#9fc0ff}
.pl-info{flex:1 1 auto; min-width:0; line-height:1.18}
.pl-name{font-size:11px; color:#cfe0ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pl-stat{font-size:9px; color:var(--dim)}
.pl-stat.dead{color:var(--bad)} .pl-stat.inst{color:var(--unique)}
.pl-follow{flex:0 0 auto; pointer-events:auto; cursor:pointer; font-family:inherit; font-size:9px; padding:2px 5px;
  border:1px solid rgba(120,200,255,.4); background:rgba(30,50,90,.6); color:#bfe0ff; border-radius:4px}
.pl-follow.on{background:var(--accent); color:#04121f; border-color:var(--accent)}
.pl-follow:hover{filter:brightness(1.25)}

#hud-bars{position:absolute; top:10px; left:50%; transform:translateX(-50%); width:340px; max-width:60vw}
.bar{position:relative; height:18px; background:var(--panel2); border:2px solid var(--line); margin-bottom:4px; overflow:hidden}
.hpbar #hud-hp-fill{height:100%; width:100%; background:linear-gradient(var(--hp),#a01020); transition:width .12s}
.shbar{height:8px}
.shbar #hud-sh-fill{height:100%; width:0%; background:var(--sh); transition:width .12s}
.bar span{position:absolute; inset:0; text-align:center; font-size:11px; line-height:18px; text-shadow:1px 1px 0 #000}

#boss-bar{margin-top:8px}
.boss-name{color:#ff5a7a; font-size:12px; text-align:center; text-shadow:1px 1px 0 #000; letter-spacing:1px}
.bar.bossbar{height:14px; border-color:#ff5a7a}
.bossbar #boss-hp-fill{height:100%; width:100%; background:linear-gradient(#ff5a7a,#7a0e22); transition:width .15s}
#wave-banner{position:absolute; top:90px; left:50%; transform:translateX(-50%); text-align:center;
  font-size:22px; letter-spacing:3px; color:var(--accent2); text-shadow:2px 2px 0 #000; padding:6px 18px;
  background:rgba(11,15,30,.6); border:2px solid var(--line)}
#wave-banner.boss{color:#ff5a7a; border-color:#ff5a7a; animation:blink 1s steps(2) infinite}

#weapon-cd{position:absolute; bottom:80px; left:50%; transform:translateX(-50%); display:flex; gap:14px; align-items:flex-end}
.wcd{display:flex; flex-direction:column; align-items:center; gap:2px}
.wcd span{font-size:9px; color:var(--dim); letter-spacing:1px; white-space:nowrap; height:11px; line-height:11px}
.wcd-bar{width:96px; height:9px; background:var(--panel2); border:2px solid var(--line); overflow:hidden}
.wcd-bar>div{height:100%; width:0%; background:var(--accent2); transition:width .08s}
.wcd-bar>div.ready{background:var(--good)}

#hud-help{position:absolute; bottom:8px; left:50%; transform:translateX(-50%); font-size:11px;
  color:var(--dim); background:rgba(11,15,30,.6); padding:4px 10px; border:1px solid var(--line);
  transition:transform .25s ease; max-width:94vw; text-align:center}
#hud-help b{color:var(--accent)}
#hud-help.collapsed{transform:translate(-50%, 200%)}
#hud-btnbar{position:absolute; bottom:8px; left:12px; z-index:21; display:flex; gap:8px; pointer-events:none}
#help-toggle, #music-toggle{pointer-events:auto;
  background:var(--panel); color:var(--accent); border:2px solid var(--line); box-shadow:2px 2px 0 #000; padding:4px 10px; font-size:11px; letter-spacing:1px}
#help-toggle:hover, #music-toggle:hover{filter:brightness(1.15)}
#music-toggle.muted{color:var(--dim)}

#dock-hint{position:absolute; bottom:48px; left:50%; transform:translateX(-50%); color:var(--accent2);
  font-size:14px; text-shadow:2px 2px 0 #000; animation:blink 1.2s steps(2) infinite}
#sg-hint{position:absolute; bottom:48px; left:50%; transform:translateX(-50%); color:var(--unique);
  font-size:14px; text-shadow:2px 2px 0 #000; animation:blink 1.2s steps(2) infinite}
#ancient-hint{position:absolute; bottom:48px; left:50%; transform:translateX(-50%); color:var(--good);
  font-size:14px; text-shadow:2px 2px 0 #000; animation:blink 1.2s steps(2) infinite}
#bench-hint{position:absolute; bottom:48px; left:50%; transform:translateX(-50%); color:var(--magic);
  font-size:14px; text-shadow:2px 2px 0 #000; animation:blink 1.2s steps(2) infinite}

/* Instanz-HUD */
#inst-hud{position:absolute; top:120px; left:50%; transform:translateX(-50%); width:300px; max-width:60vw; text-align:center}
#inst-title{color:var(--unique); font-size:13px; letter-spacing:2px; text-shadow:1px 1px 0 #000; margin-bottom:3px}
.bar.instbar{height:12px; border-color:var(--unique)}
.instbar #inst-prog{height:100%; width:0%; background:linear-gradient(var(--unique),#7a1a52); transition:width .2s}
.instbar #inst-prog-txt{position:absolute; inset:0; text-align:center; font-size:9px; line-height:12px; text-shadow:1px 1px 0 #000}
#inst-exit-hint{margin-top:4px; color:var(--accent2); font-size:11px; text-shadow:1px 1px 0 #000; animation:blink 1.2s steps(2) infinite}

/* Sternentor-Menü */
.sg-panel{width:520px; max-width:96vw; text-align:center}
.sg-level{display:flex; align-items:center; justify-content:center; gap:18px; margin:18px 0 12px}
.sg-level button{font-size:24px; width:54px; height:54px; padding:0; line-height:1}
.sg-lvlbox{display:flex; flex-direction:column; align-items:center; min-width:120px;
  background:var(--panel2); border:2px solid var(--unique); padding:8px 14px; box-shadow:3px 3px 0 #000}
.sg-lvlbox .lbl{color:var(--dim); font-size:10px; letter-spacing:1px}
.sg-lvlbox #sg-level{color:var(--unique); font-size:38px; font-weight:bold; text-shadow:2px 2px 0 #000}
.sg-slider{-webkit-appearance:none; appearance:none; width:88%; height:8px; margin:0 0 16px; cursor:pointer;
  background:var(--panel2); border:2px solid var(--line); border-radius:5px; outline:none}
.sg-slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:3px;
  background:var(--unique); border:2px solid #000; box-shadow:2px 2px 0 #000; cursor:pointer}
.sg-slider::-moz-range-thumb{width:20px; height:20px; border-radius:3px; background:var(--unique); border:2px solid #000; cursor:pointer}
.sg-info{background:var(--panel2); border:2px solid var(--line); padding:10px 14px; font-size:12px;
  color:var(--ink); line-height:1.7; margin-bottom:14px}
.sg-info .row{display:flex; justify-content:space-between}
.sg-info .row span:first-child{color:var(--dim)}
.sg-actions{display:flex; gap:10px; justify-content:center}
#sg-go{font-size:15px; padding:12px 22px; background:var(--unique); color:#2a0019}

#respawn{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(5,7,16,.5); pointer-events:auto}
.rs-box{background:var(--panel); border:3px solid var(--bad); padding:24px 32px; text-align:center; box-shadow:6px 6px 0 #000}
.rs-title{color:var(--bad); font-size:24px; letter-spacing:3px; margin-bottom:10px}
#rs-timer{color:var(--dim); margin-bottom:6px}
.rs-cost{color:var(--scrap); font-size:11px; margin-bottom:14px}

#toast-wrap{position:absolute; top:70px; right:14px; display:flex; flex-direction:column; gap:6px; align-items:flex-end}
.toast{background:var(--panel); border:2px solid var(--accent); padding:8px 14px; font-size:13px;
  box-shadow:3px 3px 0 #000; animation:slidein .2s} .toast.bad{border-color:var(--bad)}
.toast.good{border-color:var(--good)}
@keyframes slidein{from{transform:translateX(30px); opacity:0}}

/* ---- Station / Werkstatt ---- */
.station-panel{width:920px; max-width:96vw; height:86vh; display:flex; flex-direction:column; padding:0}
.station-head{display:flex; align-items:center; gap:16px; padding:14px 18px; border-bottom:3px solid var(--line); background:var(--panel2)}
.station-head h2{font-size:18px; color:var(--accent2)}
.station-scrap{margin-left:auto; font-size:14px}
button.x{background:var(--bad); color:#2a0008; box-shadow:2px 2px 0 #000; padding:6px 10px; font-size:11px}
.tabs{display:flex; gap:0; border-bottom:3px solid var(--line); flex-wrap:wrap}
.tab{background:var(--panel2); color:var(--dim); border:none; border-right:2px solid var(--line);
  box-shadow:none; border-radius:0; padding:10px 16px; font-size:12px}
.tab.active{background:var(--accent); color:#06223f}
.tab-body{flex:1; overflow-y:auto; padding:18px; background:var(--panel)}
.tab-page{display:flex; flex-direction:column; gap:14px}

/* Karten / Listen */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.card{background:var(--panel2); border:2px solid var(--line); padding:10px}
.card h4{font-size:13px; margin-bottom:4px}
.card .desc{font-size:11px; color:var(--dim); min-height:30px; margin-bottom:8px}
.card .price{color:var(--scrap); font-size:12px; margin-bottom:8px}
.card button{width:100%; font-size:11px; padding:7px}
.rar-common{color:var(--common)} .rar-magic{color:var(--magic)} .rar-rare{color:var(--rare)} .rar-unique{color:var(--unique)}
.b-common{border-color:#4a5168} .b-magic{border-color:var(--magic)} .b-rare{border-color:var(--rare)} .b-unique{border-color:var(--unique)}

/* Loadout */
.weapon-block{background:var(--panel2); border:2px solid var(--line); padding:12px; margin-bottom:6px}
.weapon-block .wtitle{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.weapon-block .wtitle h4{color:var(--accent); font-size:14px}
.weapon-block .wtitle h4 .mod-sum{font-size:10px; font-weight:normal; color:var(--dim); margin-left:8px}
.weapon-block .wtitle h4 .mod-sum.none{color:#555c82; font-style:italic}
.slots{display:flex; gap:8px; flex-wrap:wrap}
.slot{width:120px; min-height:64px; background:var(--bg); border:2px dashed var(--line); padding:6px; font-size:10px; cursor:pointer; position:relative}
.slot.filled{border-style:solid}
.slot .sname{font-weight:bold; font-size:11px} .slot .sdesc{color:var(--dim); font-size:9px; margin-top:2px}
.slot .empty{color:#555c82; text-align:center; line-height:50px}
.slot .rm{position:absolute; top:2px; right:4px; color:var(--bad); font-size:12px}
.stat-line{font-size:11px; color:var(--dim); margin-top:6px}
.stat-line b{color:var(--ink)}
.asc-toggle{display:flex; align-items:center; gap:10px; justify-content:flex-end; font-size:11px; color:var(--dim); margin-bottom:6px}

/* Skills */
.skill-row{display:flex; align-items:center; gap:12px; background:var(--panel2); border:2px solid var(--line); padding:10px}
.skill-row .info{flex:1}
.skill-row h4{font-size:13px} .skill-row .desc{font-size:11px; color:var(--dim)}
.pips{display:flex; gap:2px; margin-top:4px; flex-wrap:wrap}
.pip{width:10px; height:10px; background:var(--bg); border:1px solid var(--line)}
.pip.on{background:var(--accent)}
.pip.asc{border-color:var(--accent2)}
.pip.asc.on{background:var(--accent2)}
.skill-row .buy{min-width:130px; text-align:right}

/* Gamble */
.gamble-box{text-align:center; padding:20px}
.gamble-box .machine{font-size:60px; margin:10px}
#gamble-result{margin:16px auto; min-height:60px; max-width:340px}
.loot-reveal{border:3px solid; padding:14px; box-shadow:4px 4px 0 #000; animation:pop .3s}
@keyframes pop{from{transform:scale(.7)} 60%{transform:scale(1.08)}}

.empty-note{color:var(--dim); font-size:12px; text-align:center; padding:20px}

/* Marktplatz */
.market-sell{background:var(--panel2); border:2px solid var(--line); padding:12px; margin-bottom:12px}
.market-sellrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.market-select{flex:1; min-width:140px; background:var(--bg); color:var(--ink); border:2px solid var(--line); padding:8px; font-family:inherit; font-size:13px}
.market-price{width:120px; background:var(--bg); border:2px solid var(--line); color:var(--ink); padding:8px; font-family:inherit; font-size:14px}
.market-fee{color:var(--dim); font-size:11px}
.market-seller{color:var(--dim); font-size:10px; margin-bottom:8px}

/* Lootbox-Chancen */
.odds{margin-top:18px; border-top:2px solid var(--line); padding-top:14px}
.odds h4{text-align:center; color:var(--accent2); margin-bottom:10px; letter-spacing:1px}
.odds-head{font-size:11px; color:var(--dim); text-align:center; margin:8px 0}
.odds-sep{font-size:10px; letter-spacing:1px; margin:8px 0 3px; border-bottom:1px solid var(--line); padding-bottom:2px}
.odds-pity{font-size:11px; color:var(--good); text-align:center; margin-bottom:8px}
.odds-row{cursor:help}
#odds-tip{position:fixed; z-index:80; max-width:250px; background:var(--panel); border:2px solid var(--accent);
  box-shadow:3px 3px 0 #000; padding:8px 10px; font-size:12px; color:var(--ink); pointer-events:none; line-height:1.45}
#odds-tip .tip-kind{color:var(--dim); font-size:10px}
.odds-list{max-width:460px; margin:0 auto}
.odds-row{display:flex; align-items:center; gap:10px; background:var(--panel2); border:1px solid var(--line); padding:6px 10px; margin-bottom:4px; font-size:12px}
.odds-row .oname{flex:1; font-weight:bold}
.odds-kind{color:var(--dim); font-size:10px; min-width:54px; text-align:right}
.odds-pct{color:var(--scrap); min-width:54px; text-align:right; font-weight:bold}

/* Profil */
.profile-box{display:flex; flex-direction:column; align-items:center; gap:16px; padding:10px}
.avatar-prev{position:relative; width:128px; height:128px; border:3px solid var(--accent); background:var(--panel2);
  image-rendering:pixelated; box-shadow:4px 4px 0 #000; display:flex; align-items:center; justify-content:center}
.avatar-img{width:128px; height:128px; image-rendering:pixelated; display:none}
.avatar-ph{font-size:48px; color:var(--dim); display:flex; align-items:center; justify-content:center; width:100%; height:100%}
/* Geretteter Androide */
.android-box{flex-direction:row; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap}
.android-portrait{width:96px; height:96px; image-rendering:pixelated; border:3px solid var(--unique); background:var(--panel2); box-shadow:4px 4px 0 #000}
.android-info{display:flex; flex-direction:column; gap:6px; align-items:flex-start; min-width:180px}
.android-name{color:var(--unique); font-weight:bold; font-size:14px}
.android-name.dim{color:var(--dim)}
.android-bonuses{display:flex; flex-direction:column; gap:3px}
.android-bonus{color:var(--good); font-size:12px}
.android-info button.x{margin-top:4px; font-size:11px; padding:4px 8px}

/* Lackierer */
.paint-wrap{display:flex; flex-direction:column; align-items:center; gap:12px}
.paint-parts{display:flex; gap:0}
.part-tab{background:var(--panel2); color:var(--dim); border:2px solid var(--line); border-right:none; box-shadow:none; border-radius:0; padding:8px 16px; font-size:11px}
.part-tab:last-child{border-right:2px solid var(--line)}
.part-tab.sel{background:var(--accent); color:#06223f}
.paint-pal{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:420px}
.swatch{width:34px; height:34px; border:2px solid var(--line); box-shadow:2px 2px 0 #000; cursor:pointer; position:relative}
.swatch.sel{border-color:#fff; box-shadow:0 0 0 2px #fff, 2px 2px 0 #000}
.swatch.locked{opacity:.6; cursor:not-allowed}
.swatch.locked::after{content:''; position:absolute; left:-2px; right:-2px; top:50%; height:2px; background:var(--bad); transform:rotate(-45deg); box-shadow:0 0 0 1px #000}
.color-chip{display:inline-block; width:10px; height:10px; border:1px solid var(--line); vertical-align:middle}
.swatch .lock{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:9px; color:#000; background:rgba(255,255,255,.35); font-weight:bold}
.paint-canvas{width:384px; max-width:84vw; aspect-ratio:1; image-rendering:pixelated; border:3px solid var(--line); box-shadow:4px 4px 0 #000; touch-action:none; cursor:crosshair}
.paint-tools{display:flex; gap:8px}
/* Füllen/Radierer: blau wenn inaktiv (Default), gelb leuchtend wenn aktiv */
.paint-tools button.sel{background:var(--accent2); color:#2a1d00; box-shadow:0 0 10px rgba(255,204,51,.65), 3px 3px 0 #000}

/* Support */
.support-box{text-align:center; max-width:460px; margin:0 auto; padding:14px}
.support-heart{font-size:54px; color:var(--bad); text-shadow:2px 2px 0 #000; animation:blink 1.4s steps(2) infinite}
.support-box h3{margin:8px 0; color:var(--accent2); letter-spacing:1px}
.support-box p{color:var(--ink); font-size:13px; line-height:1.6; margin-bottom:16px}
.kofi-btn{display:inline-block; background:#13C3FF; color:#06223f; text-decoration:none; font-weight:bold;
  padding:12px 20px; border:2px solid #06223f; box-shadow:3px 3px 0 #000; letter-spacing:1px}
.kofi-btn:hover{filter:brightness(1.08)}
.support-url{margin-top:10px; color:var(--dim); font-size:12px}
/* Supporter-Sonderfarbe */
.support-fade{margin-top:18px; border-top:2px solid var(--line); padding-top:14px}
.support-fade h3{color:var(--unique); letter-spacing:1px; margin-bottom:4px}
.fade-row{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin:12px 0}
.fade-row input[type=color]{width:54px; height:40px; padding:0; border:2px solid var(--line); background:none; cursor:pointer}
.fade-lbl{color:var(--dim); font-size:13px; font-weight:bold}
.fade-prev{width:90px; height:40px; border:2px solid #fff; box-shadow:0 0 10px rgba(255,255,255,.3), 2px 2px 0 #000}
.fade-speed{width:240px; max-width:80vw}
.fade-code{width:200px; max-width:60vw}
.support-fade button{margin-top:10px}
.patch-link{margin-top:22px; color:#3a4068; font-size:11px; cursor:pointer; user-select:none}
.patch-link:hover{color:var(--accent)}
.patch-block{margin:10px 0; text-align:left}
.patch-ver{color:var(--accent2); font-weight:bold; letter-spacing:1px}
.patch-date{color:var(--dim); font-size:11px; font-weight:normal}
.patch-items{margin:4px 0 0 18px; font-size:12px; color:var(--ink); line-height:1.5}

/* Feedback-Forum */
.fb-form{background:var(--panel2); border:2px solid var(--line); padding:12px; margin-bottom:14px}
.fb-types{display:flex; gap:8px; margin-bottom:8px}
.fb-type{background:var(--bg); color:var(--dim); border:2px solid var(--line); box-shadow:none; padding:6px 12px; font-size:12px}
.fb-type.sel{background:var(--accent); color:#06223f}
.fb-text{width:100%; min-height:70px; background:var(--bg); border:2px solid var(--line); color:var(--ink); font-family:inherit; font-size:13px; padding:8px; resize:vertical; outline:none}
.fb-text:focus{border-color:var(--accent)}
.fb-form>button{margin-top:8px}
.fb-list{display:flex; flex-direction:column; gap:8px}
.fb-card{background:var(--panel2); border:2px solid var(--line); padding:10px}
.fb-meta{display:flex; align-items:center; gap:8px; font-size:11px; margin-bottom:5px}
.fb-meta b{color:var(--accent)}
.fb-time{color:var(--dim); margin-left:auto}
.fb-badge{font-size:9px; padding:1px 6px; border:1px solid currentColor}
.fb-badge.bug{color:var(--bad)} .fb-badge.feature{color:var(--good)}
.fb-body{font-size:13px; color:var(--ink); white-space:pre-wrap; word-break:break-word}

/* ESC-Menü (Optionen + Highscore) */
.menu-tabs{display:flex; gap:0; border-bottom:3px solid var(--line)}
.menu-tab{background:var(--panel2); color:var(--dim); border:none; border-right:2px solid var(--line); box-shadow:none; border-radius:0; padding:9px 18px; font-size:12px}
.menu-tab.active{background:var(--accent); color:#06223f}
.opt-label{font-size:11px; color:var(--dim); letter-spacing:1px; margin-bottom:6px}
.opt-row{display:flex; align-items:center; gap:10px; margin:6px 0}
.opt-slider{flex:1; min-width:0}
.opt-end{font-size:10px; color:var(--dim)}
.opt-val{color:var(--accent2); font-size:15px; font-weight:bold; text-align:center; margin-top:4px}

/* Tastenbelegung */
.keybind-list{display:flex; flex-direction:column; gap:4px; margin-top:8px}
.keybind-row{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--panel2); border:2px solid var(--line); padding:6px 10px}
.keybind-lbl{font-size:13px; color:var(--ink)}
.keybind-key{min-width:96px; text-align:center; font-size:12px; padding:6px 10px}
.keybind-key.binding{background:var(--accent); color:#06223f; animation:keyblink .8s steps(2,start) infinite}
@keyframes keyblink{50%{opacity:.55}}

/* 10er-Lootbox-Animation */
.gamble10-btn{margin-top:8px}
.lb10-grid{position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.lb10-box{width:84px; height:84px; background:#141c38; border:3px solid #b8c0cc; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 0 14px rgba(184,192,204,.4); position:relative}
.lb10-q{font-size:34px; color:#b8c0cc; font-weight:bold}
.lb10-name{font-size:10px; text-align:center; padding:2px; line-height:1.1; max-width:80px; word-break:break-word}
.lb10-box.wobble{animation:lb10wob .35s ease-in-out infinite}
@keyframes lb10wob{0%,100%{transform:rotate(-5deg) translateY(0)} 50%{transform:rotate(5deg) translateY(-4px)}}
.lb10-box.open{border-color:var(--rc,#fff); box-shadow:0 0 22px var(--rc,#fff); animation:lb10pop .3s ease-out}
@keyframes lb10pop{0%{transform:scale(.6)} 60%{transform:scale(1.15)} 100%{transform:scale(1)}}
.lb10-hint{position:relative; z-index:1; margin-top:20px; color:#cfd6ff; font-size:13px; text-align:center; line-height:1.6}

/* Highscore */
.hs-list{display:flex; flex-direction:column; gap:4px; margin-top:8px}
.hs-row{display:flex; align-items:center; gap:10px; background:var(--panel2); border:2px solid var(--line); padding:8px 10px; font-size:13px}
.hs-row.me{border-color:var(--accent2)}
.hs-rank{min-width:30px; text-align:center; font-weight:bold}
.hs-nick{flex:1; font-weight:bold; color:var(--ink)}
.hs-lvl{color:var(--dim); font-size:11px}
.hs-score{min-width:80px; text-align:right; font-weight:bold}

/* Statistiken (Inventar) */
.stat-summary{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.stat-big{flex:1; min-width:120px; background:var(--panel2); border:2px solid var(--line); padding:10px 12px; display:flex; flex-direction:column; gap:4px; text-align:center}
.stat-big .stat-val{font-size:22px; font-weight:bold; color:var(--ink)}
.stat-big .stat-lbl{font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px}
.kill-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; margin-top:8px}
.kill-card{display:flex; align-items:center; gap:10px; background:var(--panel2); border:2px solid var(--line); padding:6px 10px}
.kill-card canvas{flex:none; image-rendering:pixelated}
.kill-info{display:flex; flex-direction:column; min-width:0}
.kill-name{font-weight:bold; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kill-count{font-size:15px; font-weight:bold; color:var(--ink)}

/* Inventar: Sortierung, Stapel, Verkauf-Schieber */
.inv-sort{display:flex; align-items:center; gap:6px; margin-bottom:8px}
.inv-sort .sort-lbl{font-size:11px; color:var(--dim); margin-right:2px}
.sort-btn{background:var(--panel2); border:2px solid var(--line); color:var(--dim); font-size:11px; padding:4px 10px; cursor:pointer; font-family:inherit}
.sort-btn.active{border-color:var(--accent2); color:var(--ink)}
.stack-badge{font-size:11px; color:var(--accent2); font-weight:bold}
.sell-ctrl{display:flex; align-items:center; gap:8px; margin-top:6px}
.sell-slider{flex:1; min-width:0; accent-color:var(--accent2)}

/* Pixel-Scrollbar */
::-webkit-scrollbar{width:12px} ::-webkit-scrollbar-track{background:var(--panel2)}
::-webkit-scrollbar-thumb{background:var(--line); border:2px solid var(--panel2)}