:root{
  --bg:#26272b; --bg2:#1b1d21; --panel:#303339; --panel2:#383c44;
  --line:#4c515b; --txt:#eef0f4; --mut:#a7adb9;
  --good:#34d399; --bad:#f87171; --gold:#fbbf24;
  --r1:#ff5d5d; --r2:#ff9f1c; --r3:#ffd60a; --r4:#2ec4b6; --r5:#4f8cff; --r6:#9b5de5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;min-height:100vh}
/* RGB-Aurora im Hintergrund */
.aurora{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.aurora i{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(120px);opacity:.16;animation:drift 26s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:var(--r1);top:-20vmax;left:-15vmax}
.aurora i:nth-child(2){background:var(--r5);bottom:-25vmax;right:-10vmax;animation-delay:-9s}
.aurora i:nth-child(3){background:var(--r6);top:30%;left:55%;animation-delay:-17s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(6vmax,-4vmax) scale(1.15)}}
main,header{position:relative;z-index:1}
/* RGB-Text */
.rgb-text{background:linear-gradient(90deg,var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6),var(--r1));
  background-size:400% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rgbflow 8s linear infinite}
@keyframes rgbflow{to{background-position:400% 0}}
#topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  padding:10px 18px;background:rgba(27,29,33,.92);backdrop-filter:blur(8px);
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6)) 1}
.logo{font-weight:900;letter-spacing:1px;font-size:18px;white-space:nowrap}
.logo span{background:linear-gradient(90deg,var(--r5),var(--r6),var(--r2));-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:6px;font-weight:600}
#tabs{display:flex;gap:6px;flex-wrap:wrap;flex:1}
#tabs button{background:transparent;border:1px solid transparent;color:var(--mut);
  padding:7px 12px;border-radius:9px;cursor:pointer;font-weight:600;transition:all .15s}
#tabs button.active,#tabs button:hover{color:var(--txt);background:var(--panel2);border-color:var(--line);box-shadow:0 0 12px #4f8cff33}
.badge{background:var(--bad);color:#fff;border-radius:99px;font-size:11px;padding:1px 7px;margin-left:4px}
.hidden{display:none!important}
.me{display:flex;align-items:center;gap:8px}
#coins-pill{background:linear-gradient(var(--panel),var(--panel)) padding-box,
  linear-gradient(135deg,var(--r2),var(--r3),var(--r4)) border-box;
  border:2px solid transparent;border-radius:99px;padding:4px 13px;font-weight:800;white-space:nowrap}
#coins-pill b{color:var(--r3)}
#player-chip{background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:4px 12px;font-weight:700;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#btn-switch{border-radius:99px;padding:4px 10px}
.dot{width:9px;height:9px;border-radius:99px;background:#666;display:inline-block}
.dot.on{background:var(--good);box-shadow:0 0 8px var(--good)}
#online-count{color:var(--mut);font-size:13px;white-space:nowrap}
main{max-width:1080px;margin:0 auto;padding:22px 16px 60px}
/* HERO */
.hero{text-align:center;padding:34px 18px 26px;background:linear-gradient(180deg,#33363e,#26282e);
  border:1px solid var(--line);border-radius:18px;margin-bottom:14px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-2px;border-radius:18px;padding:2px;pointer-events:none;
  background:linear-gradient(120deg,var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6),var(--r1));
  background-size:300% 100%;animation:rgbflow 6s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}
.hero h1{font-size:52px;margin:0;letter-spacing:2px;font-weight:900}
.hero p{color:var(--mut);max-width:640px;margin:10px auto}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.chip{background:#1e2025;border:1px solid var(--line);border-radius:99px;padding:4px 14px;font-size:13px}
.chip b{color:var(--r3)}
button.xxl{font-size:19px;padding:13px 38px;border-radius:14px}
/* MODE CARDS */
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
@media(max-width:860px){.mode-grid{grid-template-columns:1fr}}
.mode-card{background:linear-gradient(180deg,var(--panel),#282b31);border:1px solid var(--line);
  border-radius:14px;padding:16px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.mode-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px #00000088,0 0 18px #9b5de544;border-color:var(--r6)}
.mode-card.sel{border-color:var(--r5);box-shadow:0 0 0 1px var(--r5),0 0 22px #4f8cff55}
.mode-card h3{margin:0 0 6px}.mode-card p{margin:0;color:var(--mut);font-size:13px}.mode-card b{color:var(--txt)}
.tab{display:none;animation:fadein .25s}
.tab.active{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--panel),#282b31);
  border:1px solid var(--line);border-radius:14px;padding:18px}
.card h2{margin:0 0 8px;font-size:18px}
.card h3{margin:16px 0 8px;font-size:14px;color:var(--mut);text-transform:uppercase;letter-spacing:.6px}
.card p{color:var(--mut)}
.coins-inline{float:right;color:var(--r3)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.row.center{justify-content:center}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mut);flex:1;min-width:130px}
select,input{background:#1e2025;border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:8px 10px;font-size:14px}
input:focus,select:focus,button:focus{outline:2px solid rgba(79,140,255,.45)}
button{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:8px 13px;cursor:pointer;font-weight:600;transition:filter .12s,transform .06s}
button.primary{background:linear-gradient(135deg,#3b6fe0,#7a4fe0);border:none;color:#fff;box-shadow:0 2px 14px #3b6fe055}
button:hover{filter:brightness(1.15)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.5;cursor:wait}
.hint{font-size:13px;color:var(--mut)}
code{background:#00000055;padding:1px 6px;border-radius:6px;border:1px solid var(--line)}
.keys{padding-left:18px;color:var(--mut)}
.keys b{color:var(--txt)}
.check{flex-direction:row!important;align-items:center;gap:6px;min-width:0}
.list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.lrow{display:flex;align-items:center;gap:10px;background:#1e2025;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.lrow .grow{flex:1}
.pill{font-size:12px;border:1px solid var(--line);border-radius:99px;padding:1px 9px;color:var(--mut)}
.pill.green{color:var(--good);border-color:var(--good)}
.pill.gold{color:var(--gold);border-color:var(--gold)}
.chatbox{background:#1e2025;border:1px solid var(--line);border-radius:10px;height:300px;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px}
.chatbox .msg b{color:var(--r5)}
.chatbox .msg .t{color:#6b7280;font-size:11px;margin-left:6px}
/* CASES */
.case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:10px}
.case-card{background:#1e2025;border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;transition:transform .15s,box-shadow .15s}
.case-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px #00000088,0 0 18px #f9f87133}
.case-art{font-size:64px;filter:drop-shadow(0 0 14px #f9f87166)}
.case-card h3{margin:8px 0 4px}
.case-card .price{font-size:20px;font-weight:900;color:var(--r3)}
.case-drops{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin:8px 0}
.drop{font-size:11px;border-radius:6px;padding:1px 7px;border:1px solid}
/* INVENTAR */
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px;max-height:560px;overflow-y:auto}
.inv-item{background:#1e2025;border-radius:10px;padding:10px;text-align:center;border-top:4px solid var(--mut)}
.inv-item .swatch{height:44px;border-radius:8px;margin-bottom:6px}
.inv-item b{font-size:13px;display:block}
.inv-item small{color:var(--mut);font-size:11px;display:block;margin:2px 0 6px}
.inv-item.equipped{box-shadow:0 0 0 2px var(--good)}
.rar-blue{border-color:#60a5fa!important}.rar-blue .swatch{box-shadow:0 0 10px #60a5fa66}
.rar-purple{border-color:#c084fc!important}.rar-purple .swatch{box-shadow:0 0 10px #c084fc66}
.rar-pink{border-color:#f472b6!important}.rar-pink .swatch{box-shadow:0 0 10px #f472b666}
.rar-red{border-color:#f87171!important}.rar-red .swatch{box-shadow:0 0 10px #f8717166}
.rar-gold{border-color:var(--gold)!important}.rar-gold .swatch{box-shadow:0 0 14px #fbbf2466}
.rar-name-blue{color:#93c5fd}.rar-name-purple{color:#d8b4fe}.rar-name-pink{color:#f9a8d4}.rar-name-red{color:#fca5a5}.rar-name-gold{color:var(--gold)}
.drop.rar-blue{color:#93c5fd;border-color:#60a5fa}.drop.rar-purple{color:#d8b4fe;border-color:#c084fc}
.drop.rar-pink{color:#f9a8d4;border-color:#f472b6}.drop.rar-red{color:#fca5a5;border-color:#f87171}
.drop.rar-gold{color:var(--gold);border-color:var(--gold)}
#loadout-list{display:flex;flex-direction:column;gap:6px}
/* WAFFEN */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:10px}
.wcard{background:#1e2025;border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;transition:transform .12s}
.wcard:hover{transform:translateY(-2px)}
.wcard.sel{border-color:var(--r5);box-shadow:0 0 0 1px var(--r5),0 0 16px #4f8cff44}
.wcard h4{margin:0 0 4px;text-transform:uppercase;letter-spacing:.5px}
.wcard .eqskin{font-size:12px;color:var(--r3);font-weight:700}
.wcard .stat{display:flex;justify-content:space-between;font-size:12px;color:var(--mut)}
.wcard .bar{height:5px;background:#14161a;border-radius:99px;margin:2px 0 6px;overflow:hidden}
.wcard .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--r5),var(--r6),var(--r1))}
.skinrow{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.skin{width:44px;height:44px;border-radius:12px;cursor:pointer;border:2px solid transparent}
.skin.sel{border-color:#fff;box-shadow:0 0 12px #ffffff66}
/* OVERLAYS */
.overlay{position:fixed;inset:0;z-index:100;background:#101114ee;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:linear-gradient(180deg,#33363e,#24262b);border:1px solid var(--line);border-radius:18px;
  padding:28px;max-width:520px;width:100%;text-align:center;position:relative}
.modal.wide{max-width:760px}
.modal::before{content:"";position:absolute;inset:-2px;border-radius:19px;padding:2px;pointer-events:none;
  background:linear-gradient(120deg,var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6),var(--r1));
  background-size:300% 100%;animation:rgbflow 6s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.logo-big{font-weight:900;font-size:26px;letter-spacing:1px}
.logo-big span{background:linear-gradient(90deg,var(--r5),var(--r6),var(--r1));-webkit-background-clip:text;background-clip:text;color:transparent}
.modal .row input{flex:1;min-width:200px;font-size:16px;padding:10px 12px}
#roulette-window{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;
  background:#14161a;height:130px;margin:14px 0}
#roulette-strip{display:flex;gap:8px;position:absolute;top:12px;left:0;will-change:transform;padding:0 10px}
.r-tile{width:96px;flex:0 0 96px;background:#22252b;border-radius:10px;padding:8px 4px;border-top:4px solid var(--mut)}
.r-tile .sw{height:34px;border-radius:6px;margin-bottom:4px}
.r-tile small{font-size:10px;color:var(--mut);display:block;line-height:1.25}
#roulette-needle{position:absolute;left:50%;top:0;bottom:0;width:3px;background:linear-gradient(var(--r2),var(--r5));box-shadow:0 0 12px var(--r5)}
#roulette-result{font-size:17px;min-height:30px;margin:6px 0}
/* GAME */
#game{position:fixed;inset:0;z-index:50;background:#000}
#gl{width:100%;height:100%;display:block}
#hud{position:absolute;inset:0;pointer-events:none}
#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);--sp:0px}
#crosshair span{display:block;width:6px;height:6px;border-radius:99px;background:#fff;box-shadow:0 0 0 2px #00000088,0 0 8px #4f8cff}
#crosshair::before,#crosshair::after{content:"";position:absolute;background:#ffffffcc;transition:all .08s}
#crosshair::before{left:calc(-11px - var(--sp));right:calc(-11px - var(--sp));top:2px;height:2px}
#crosshair::after{top:calc(-11px - var(--sp));bottom:calc(-11px - var(--sp));left:2px;width:2px}
#hs-pop{position:absolute;left:50%;top:42%;transform:translateX(-50%);font-size:22px;font-weight:900;color:var(--r3);
  text-shadow:0 0 14px #ffd60a88;animation:coinfloat 1.1s ease-out}
#flash-overlay{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .3s}
#scope.hidden{display:none}
#scope{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 26%,black 27%)}
#hitmarker{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%) rotate(45deg);opacity:0;transition:opacity .12s}
#hitmarker::before,#hitmarker::after{content:"";position:absolute;background:#fff}
#hitmarker::before{left:11px;top:0;bottom:0;width:4px}
#hitmarker::after{top:11px;left:0;right:0;height:4px}
#hitmarker.show{opacity:1}
#hitmarker.kill::before,#hitmarker.kill::after{background:var(--bad)}
#hitmarker.head::before,#hitmarker.head::after{background:var(--r3);box-shadow:0 0 8px var(--r3)}
#dmg-vignette{position:absolute;inset:0;opacity:0;transition:opacity .2s;background:radial-gradient(ellipse at center,transparent 55%,rgba(255,30,30,.55) 100%)}
#hud-top{position:absolute;top:12px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px}
#match-info{background:#000000aa;border:1px solid var(--line);border-radius:99px;padding:4px 14px;font-size:13px;font-weight:700}
#killfeed{display:flex;flex-direction:column;gap:4px;align-items:flex-end;align-self:flex-end;margin-right:14px}
#killfeed .kf{background:#000000bb;border:1px solid var(--line);border-radius:8px;padding:3px 10px;font-size:13px}
#killfeed .kf b{color:var(--r5)}#killfeed .kf i{color:var(--gold);font-style:normal;font-size:11px;margin:0 6px}
#coin-pop{position:absolute;top:22%;left:50%;transform:translateX(-50%);font-size:30px;font-weight:900;color:var(--r3);
  text-shadow:0 0 18px #f9f87188;animation:coinfloat 1.4s ease-out}
@keyframes coinfloat{from{opacity:0;transform:translate(-50%,14px)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-26px)}}
#hud-bottom{position:absolute;bottom:16px;left:16px;right:16px;display:flex;gap:12px;align-items:flex-end}
#hp-box,#ammo-box,#nade-box,#speed-box{background:#101216d9;border:1px solid var(--line);border-top:2px solid var(--r5);border-radius:12px;padding:8px 14px;min-width:110px;text-align:center;backdrop-filter:blur(4px);box-shadow:0 4px 18px #00000088}
#hp-box b,#ammo-box b,#speed-box b{font-size:26px;display:block}
#hp-box.low b{color:var(--bad);animation:lowhp 0.9s ease-in-out infinite}
@keyframes lowhp{50%{opacity:.45}}
.gtag{font-size:11px;font-weight:800;color:var(--r3);border:1px solid var(--r3);border-radius:5px;padding:0 5px;margin-right:5px;white-space:nowrap}
#match-info b{color:var(--r3)}
#killfeed .kf{border-left:3px solid var(--r5)}
#hp-box span,#ammo-box span,#nade-box span,#speed-box span{font-size:11px;color:var(--mut)}
#nade-box b{font-size:19px;display:block;white-space:nowrap}
#nade-box b span{font-size:17px;color:var(--txt);font-weight:800}
#ammo-box{margin-left:auto}
#ammo-box em{display:block;font-style:normal;font-size:11px;color:var(--r5);font-weight:800;letter-spacing:1px}
#scoreboard{position:absolute;left:50%;top:12%;transform:translateX(-50%);background:#000000dd;border:1px solid var(--line);border-radius:12px;padding:14px 18px;min-width:340px;pointer-events:none}
#scoreboard table{border-collapse:collapse;width:100%}
#scoreboard td,#scoreboard th{padding:4px 10px;text-align:left;font-size:14px}
#scoreboard th{color:var(--mut);font-size:11px;text-transform:uppercase}
#game-chat{position:absolute;left:14px;bottom:110px;width:340px;background:#000000cc;border:1px solid var(--line);border-radius:10px;padding:8px;pointer-events:auto}
#game-chat-log{max-height:150px;overflow-y:auto;font-size:13px;display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
#game-chat-input{width:100%}
#respawn{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);background:#000000dd;border:1px solid var(--bad);padding:18px 30px;border-radius:14px;font-size:18px}
#match-end{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);background:#000000ee;border:1px solid var(--gold);padding:26px 40px;border-radius:16px;text-align:center;pointer-events:auto}
#pause{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);background:#000000ee;border:1px solid var(--line);padding:26px 40px;border-radius:16px;text-align:center;pointer-events:auto}
#pause .row{justify-content:center}
#btn-leave-match{border-color:var(--bad);color:var(--bad)}
#click-to-play{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;background:#00000099;pointer-events:auto;cursor:pointer}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
#toast .t{background:#22252bf2;border:1px solid var(--r5);padding:9px 16px;border-radius:10px;font-size:14px}
#lobby-members{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
#lobby-members .m{background:#1e2025;border:1px solid var(--line);border-radius:99px;padding:3px 11px;font-size:13px}
/* QUESTS */
.qrow{display:flex;align-items:center;gap:12px;background:#1e2025;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.qrow.done{border-color:var(--good)}
.qrow .grow{flex:1}
.qrow small{color:var(--mut)}
.qbar{height:7px;background:#14161a;border-radius:99px;margin-top:5px;overflow:hidden}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--r4),var(--r3));border-radius:99px}
.qreward{font-weight:900;color:var(--r3);white-space:nowrap}