:root{
  --bg:#0b1022;--bg2:#121a36;--card:rgba(24,32,62,.72);--card2:rgba(255,255,255,.06);--line:rgba(255,255,255,.1);
  --txt:#f2f4fb;--muted:#9aa4c4;--acc:#ff3d57;--acc2:#ff8a3d;--gold:#ffc83d;--ok:#3ddc84;
  --red:#e3242b;--red2:#a80f15;--yellow:#ffd21f;--yellow2:#d99a00;--green:#2fa84f;--green2:#146b2c;--blue:#1767d1;--blue2:#0a3a8a;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;font-family:Nunito,system-ui,sans-serif;color:var(--txt);background:var(--bg);overscroll-behavior:none}
body{background:radial-gradient(1200px 700px at 80% -10%,#2b1f5c 0%,transparent 60%),radial-gradient(900px 600px at -10% 110%,#0f3b5c 0%,transparent 60%),var(--bg)}
.hidden{display:none!important}
.screen{position:fixed;inset:0;overflow:hidden;height:100dvh}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;background:rgba(255,255,255,.06);border:1.5px solid var(--line);color:var(--txt);border-radius:12px;padding:11px 13px;width:100%;outline:none;transition:border-color .2s,background .2s}
input:focus,select:focus,textarea:focus{border-color:#7c8cff;background:rgba(255,255,255,.09)}
select option{color:#000}
a{color:#8fb3ff;text-decoration:none}
.grow{flex:1}
.muted{color:var(--muted)}.small{font-size:13px}
.err{color:#ff8a8a;min-height:1.1em;margin:4px 0;font-size:14px;font-weight:700}
.glass{background:var(--card);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 20px 60px rgba(0,0,0,.45)}
.btn{font:800 15px Nunito,sans-serif;border:0;border-radius:14px;padding:11px 18px;cursor:pointer;color:#fff;background:#2c3561;box-shadow:0 4px 0 #1a2042,0 8px 20px rgba(0,0,0,.25);transition:transform .12s var(--ease),filter .15s,box-shadow .12s;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;user-select:none}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #1a2042}
.btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 4px 0 #9b1830,0 10px 24px rgba(255,61,87,.35)}
.btn.primary:active{box-shadow:0 1px 0 #9b1830}
.btn.green{background:linear-gradient(135deg,#21c96b,#139a4e);box-shadow:0 4px 0 #0b6332}
.btn.gold{background:linear-gradient(135deg,#ffd75e,#f0a20c);color:#3a2500;box-shadow:0 4px 0 #a86e00}
.btn.danger{background:#5b2033;box-shadow:0 4px 0 #3a1220}
.btn.ghost{background:rgba(255,255,255,.07);box-shadow:none}
.btn.small{padding:7px 12px;font-size:13px;border-radius:11px}
.btn.big{padding:14px 20px;font-size:17px;width:100%}
.btn:disabled{opacity:.4;pointer-events:none}
.icon-btn{border:0;background:rgba(255,255,255,.07);width:40px;height:40px;border-radius:12px;cursor:pointer;font-size:18px;display:grid;place-items:center;transition:background .2s}
.icon-btn:hover{background:rgba(255,255,255,.14)}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--acc);color:#fff;font:900 11px/18px Nunito;font-style:normal;text-align:center;display:none}
.badge.on{display:inline-block;animation:pop .3s var(--ease)}

/* ---------- Avatare ---------- */
.av{--s:40px;width:var(--s);height:var(--s);border-radius:50%;position:relative;flex:none;display:grid;place-items:center;font:900 calc(var(--s)*.42) Nunito;color:#fff;background:var(--avc,#556);box-shadow:0 2px 8px rgba(0,0,0,.35)}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.av::after{content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none}
.av.frame_gold::after{inset:-4px;border:3px solid #ffd54a;box-shadow:0 0 10px #ffbf00,inset 0 0 6px #ffbf00}
.av.frame_fire::after{inset:-5px;background:conic-gradient(#ff2d00,#ffb300,#ff5e00,#ff2d00);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));animation:spin 2s linear infinite;filter:drop-shadow(0 0 6px #ff5e00)}
.av.frame_ice::after{inset:-4px;border:3px solid #9ee7ff;box-shadow:0 0 12px #6fd3ff,inset 0 0 8px #bdf1ff}
.av.frame_rainbow::after{inset:-5px;background:conic-gradient(red,orange,yellow,lime,cyan,blue,magenta,red);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));animation:spin 3s linear infinite}
.av .dot{position:absolute;right:-1px;bottom:-1px;width:28%;height:28%;border-radius:50%;background:var(--ok);border:2px solid var(--bg);z-index:2}
.nm{font-weight:800}.nm .guest{color:var(--muted);font-weight:700}
.nm .adm{font-size:.8em}

/* ---------- Login ---------- */
#auth{overflow:auto;display:flex}
.auth-bg{position:fixed;inset:0;overflow:hidden;perspective:900px;pointer-events:none}
.auth-bg .fcard{position:absolute;width:70px;height:105px;border-radius:9px;opacity:.55;animation:drift linear infinite;box-shadow:0 10px 30px rgba(0,0,0,.4)}
@keyframes drift{from{transform:translate3d(0,110vh,0) rotateX(20deg) rotateY(0) rotateZ(0)}to{transform:translate3d(var(--dx),-30vh,-200px) rotateX(200deg) rotateY(320deg) rotateZ(90deg)}}
.auth-wrap{position:relative;z-index:1;margin:auto;padding:30px 16px calc(30px + var(--safe-b));width:min(430px,100%);display:flex;flex-direction:column;gap:22px;align-items:center}
.brand{text-align:center;animation:rise .8s var(--ease)}
.brand h1{font:400 50px/1 'Lilita One';margin:14px 0 6px;letter-spacing:.5px;text-shadow:0 6px 30px rgba(255,61,87,.4)}
.brand h1 b{font-weight:400;background:linear-gradient(90deg,var(--acc),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand p{margin:0;color:var(--muted);font-weight:700}
.brand-icon{width:74px;height:74px;margin:auto;position:relative;transform:rotate(-8deg)}
.brand-icon span{position:absolute;width:44%;height:62%;border-radius:7px;border:3px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.4);transform-origin:50% 100%;animation:fanin 1s var(--ease) both}
.brand-icon span:nth-child(1){background:var(--red);left:28%;top:14%;--r:-30deg}
.brand-icon span:nth-child(2){background:var(--yellow);left:28%;top:14%;--r:-10deg;animation-delay:.08s}
.brand-icon span:nth-child(3){background:var(--green);left:28%;top:14%;--r:10deg;animation-delay:.16s}
.brand-icon span:nth-child(4){background:var(--blue);left:28%;top:14%;--r:30deg;animation-delay:.24s}
@keyframes fanin{from{transform:rotate(0) translateY(20px);opacity:0}to{transform:rotate(var(--r))}}
.brand-icon.sm{width:34px;height:34px;transform:rotate(-8deg)}
.brand-icon.sm span{border-width:2px;border-radius:4px}
.auth-card{width:100%;border-radius:24px;padding:22px;animation:rise .8s .1s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(30px) scale(.97)}}
.tabs{display:flex;background:rgba(0,0,0,.25);border-radius:14px;padding:4px;margin-bottom:18px;position:relative}
.tabs button{flex:1;border:0;background:none;padding:10px 4px;border-radius:11px;font-weight:800;cursor:pointer;color:var(--muted);transition:all .25s var(--ease);font-size:14px}
.tabs button.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;box-shadow:0 4px 14px rgba(255,61,87,.4)}
.field{position:relative;margin-bottom:12px}
.field input,.field textarea{padding:20px 14px 8px;resize:none}
.field label{position:absolute;left:15px;top:15px;color:var(--muted);pointer-events:none;transition:all .2s var(--ease);font-weight:700}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{top:6px;font-size:11px;color:#a9b6ff}
.field .eye{position:absolute;right:8px;top:9px;border:0;background:none;font-size:18px;cursor:pointer;opacity:.6}
.hint{color:var(--muted);font-size:14px;margin:0 0 12px;line-height:1.4}
.link{display:block;text-align:center;margin-top:14px;font-weight:700;font-size:14px}
#forgotForm h3{margin:0 0 6px;font:400 24px 'Lilita One'}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* ---------- Hub-Layout ---------- */
#app{display:flex;height:100dvh}
.sidenav{width:230px;flex:none;padding:18px 12px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line);background:rgba(8,12,28,.5);backdrop-filter:blur(10px)}
.nav-brand{display:flex;align-items:center;gap:12px;padding:6px 10px 20px;font:400 22px 'Lilita One'}
.sidenav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;color:var(--muted);font-weight:800;transition:all .2s var(--ease);position:relative}
.sidenav a i{font-style:normal;font-size:20px;width:26px;text-align:center;transition:transform .3s var(--ease)}
.sidenav a:hover{background:rgba(255,255,255,.05);color:var(--txt)}
.sidenav a.on{background:linear-gradient(135deg,rgba(255,61,87,.18),rgba(255,138,61,.12));color:#fff}
.sidenav a.on i{transform:scale(1.15)}
.sidenav a.on::before{content:"";position:absolute;left:-12px;top:20%;bottom:20%;width:4px;border-radius:4px;background:var(--acc)}
.sidenav .badge{margin-left:auto}
.main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.topbar{display:flex;align-items:center;gap:10px;padding:calc(12px + var(--safe-t)) 20px 12px;border-bottom:1px solid var(--line)}
.tb-title{font:400 26px 'Lilita One'}
.coins{display:flex;align-items:center;gap:7px;background:rgba(255,200,61,.12);border:1px solid rgba(255,200,61,.3);padding:6px 12px 6px 8px;border-radius:99px;font-weight:900;color:var(--gold)}
.coins.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.25)}}
.coin{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#ffc83d 45%,#c98a00);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2),0 0 10px rgba(255,200,61,.5);display:inline-block;flex:none}
.tb-me{display:flex}
.view{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y}
.view>*{animation:viewIn .45s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px}
.panel h2,.h2{font:400 22px 'Lilita One';margin:0 0 12px;letter-spacing:.3px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stack{display:flex;flex-direction:column;gap:16px}
.chip{background:rgba(255,255,255,.08);padding:4px 10px;border-radius:99px;font-size:12px;font-weight:800;white-space:nowrap}
.chip.ok{background:rgba(61,220,132,.15);color:var(--ok)}
.chip.warn{background:rgba(255,200,61,.15);color:var(--gold)}
.chip.red{background:rgba(255,61,87,.18);color:#ff8095}
.empty{padding:30px;text-align:center;color:var(--muted)}

/* Home */
.hello{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.hello h2{font:400 30px 'Lilita One';margin:0}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-bottom:24px}
.gcard{position:relative;border-radius:24px;overflow:hidden;cursor:pointer;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;transition:transform .35s var(--ease),box-shadow .35s;box-shadow:0 14px 40px rgba(0,0,0,.4);transform-style:preserve-3d;isolation:isolate}
.gcard:hover{transform:translateY(-6px) rotateX(4deg);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.gcard:active{transform:scale(.98)}
.gcard h3{font:400 30px 'Lilita One';margin:0;text-shadow:0 3px 10px rgba(0,0,0,.4)}
.gcard p{margin:4px 0 0;font-weight:700;opacity:.9;font-size:14px}
.gcard .art{position:absolute;inset:0;z-index:-1}
.gcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.18) 45%,transparent 70%);pointer-events:none}
.gcard h3,.gcard p{position:relative}
.gcard .live{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.4);padding:4px 10px;border-radius:99px;font-size:12px;font-weight:800;backdrop-filter:blur(6px)}
.gcard .live b{color:var(--ok)}
.g-uno .art{background:radial-gradient(circle at 70% 30%,#ff5a3d,#c4122c 60%,#6d0717)}
.g-uno .art .mc{position:absolute;width:74px;height:110px;border-radius:9px;border:4px solid #fff;top:22px;right:40px;box-shadow:0 10px 20px rgba(0,0,0,.4);transition:transform .5s var(--ease)}
.g-uno .art .mc::after{content:"";position:absolute;inset:14% 8%;border-radius:50%;background:#fff;transform:rotate(30deg)}
.g-uno .art .mc:nth-child(1){background:var(--blue);transform:rotate(-24deg) translate(-40px,10px)}
.g-uno .art .mc:nth-child(2){background:var(--green);transform:rotate(-8deg) translate(-14px,0)}
.g-uno .art .mc:nth-child(3){background:var(--yellow);transform:rotate(8deg) translate(12px,0)}
.g-uno .art .mc:nth-child(4){background:#111;transform:rotate(24deg) translate(38px,10px)}
.g-uno:hover .mc:nth-child(1){transform:rotate(-34deg) translate(-56px,12px)}
.g-uno:hover .mc:nth-child(4){transform:rotate(34deg) translate(54px,12px)}
.g-c4 .art{background:radial-gradient(circle at 30% 20%,#3d7bff,#1b3fb0 60%,#0c1d5c)}
.g-c4 .art .board{position:absolute;right:20px;top:20px;display:grid;grid-template-columns:repeat(5,22px);gap:5px;padding:9px;background:#1a49d6;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.g-c4 .art .board i{width:22px;height:22px;border-radius:50%;background:#0c1d5c;box-shadow:inset 0 2px 3px rgba(0,0,0,.5)}
.g-c4 .art .board i.r{background:radial-gradient(circle at 35% 30%,#ff7a7a,#e3242b)}
.g-c4 .art .board i.y{background:radial-gradient(circle at 35% 30%,#fff09a,#ffc400)}
.g-2048 .art{background:radial-gradient(circle at 70% 20%,#ffb74d,#f57c00 60%,#8a3a00)}
.g-2048 .art .tiles{position:absolute;right:22px;top:22px;display:grid;grid-template-columns:repeat(3,40px);gap:6px;transform:rotate(-6deg)}
.g-2048 .art .tiles i{height:40px;border-radius:8px;background:rgba(255,255,255,.25);font:900 15px/40px Nunito;text-align:center;font-style:normal;color:#5a3000}
.g-2048 .art .tiles i.a{background:#fff3d6}.g-2048 .art .tiles i.b{background:#ffd27a}.g-2048 .art .tiles i.c{background:#fff;color:#f57c00;box-shadow:0 0 18px #fff}
.online-strip{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px}
.online-strip .u{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:800;min-width:60px;cursor:pointer;text-align:center}

/* Spiel-Lobby */
.ghead{border-radius:24px;padding:22px;margin-bottom:18px;position:relative;overflow:hidden;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.ghead .art{position:absolute;inset:0;z-index:-1}
.ghead h2{font:400 34px 'Lilita One';margin:0}
.ghead .row{margin-top:12px}
.rooms{display:flex;flex-direction:column;gap:10px}
.roomc{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--card2);border:1px solid var(--line);animation:pop .35s var(--ease)}
.roomc .info{flex:1;min-width:0}
.roomc .info b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roomc .avs{display:flex}
.roomc .avs .av{margin-left:-8px;border:2px solid var(--bg2)}
.roomc .avs .av:first-child{margin-left:0}

/* Chat / PN */
.chatbox{display:flex;flex-direction:column;height:100%;min-height:0}
.msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:6px 2px 10px;min-height:0}
.msg{display:flex;gap:9px;align-items:flex-end;max-width:85%;animation:msgIn .3s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
.msg .bubble{background:rgba(255,255,255,.08);padding:8px 12px;border-radius:16px 16px 16px 4px;word-wrap:break-word;overflow-wrap:anywhere;line-height:1.35}
.msg .bubble .who{font-size:12px;font-weight:900;color:#ffc35e;display:block;margin-bottom:1px}
.msg .bubble time{font-size:10px;color:var(--muted);margin-left:8px}
.msg.mine{align-self:flex-end;flex-direction:row-reverse}
.msg.mine .bubble{background:linear-gradient(135deg,#ff3d57,#ff6a3d);border-radius:16px 16px 4px 16px}
.msg.mine .bubble time{color:rgba(255,255,255,.75)}
.msg.sys{align-self:center;max-width:95%}
.msg.sys .bubble{background:none;color:var(--muted);font-style:italic;font-size:13px;padding:2px}
.sendbar{display:flex;gap:8px;padding-top:8px}
.sendbar input{border-radius:99px;padding:12px 18px}
.sendbar .btn{border-radius:99px;width:48px;height:48px;padding:0;flex:none;font-size:20px}
.view.full{display:flex;flex-direction:column;padding-bottom:12px}
.pm-layout{display:grid;grid-template-columns:280px 1fr;gap:16px;height:100%;min-height:0}
.ulist{display:flex;flex-direction:column;gap:4px;overflow:auto}
.uitem{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;cursor:pointer;transition:background .2s}
.uitem:hover,.uitem.on{background:rgba(255,255,255,.07)}
.uitem .info{flex:1;min-width:0}
.uitem .last{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv{display:flex;flex-direction:column;min-height:0}
.conv-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}

/* Shop */
.shop-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px}
.shop-tabs button{border:0;background:rgba(255,255,255,.07);padding:9px 16px;border-radius:99px;font-weight:800;cursor:pointer;white-space:nowrap}
.shop-tabs button.on{background:#fff;color:#111}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.item{border-radius:18px;background:var(--card2);border:1.5px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;transition:transform .3s var(--ease),border-color .3s;animation:pop .4s var(--ease) both}
.item:hover{transform:translateY(-4px)}
.item.eq{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok),0 0 24px rgba(61,220,132,.2)}
.item .prev{height:120px;display:grid;place-items:center;width:100%;border-radius:12px;background:rgba(0,0,0,.2);overflow:hidden}
.item b{font-size:15px}
.price{display:flex;align-items:center;gap:6px;font-weight:900;color:var(--gold)}
.price .coin{width:16px;height:16px}

/* Bestenliste */
.podium{display:flex;justify-content:center;align-items:flex-end;gap:12px;margin:10px 0 24px}
.pod{display:flex;flex-direction:column;align-items:center;gap:8px;width:110px;text-align:center}
.pod .block{width:100%;border-radius:14px 14px 4px 4px;display:grid;place-items:center;font:400 34px 'Lilita One';color:rgba(255,255,255,.9);animation:grow .8s var(--ease) both}
@keyframes grow{from{transform:scaleY(0);transform-origin:bottom}}
.pod.p1 .block{height:120px;background:linear-gradient(#ffd75e,#c98a00)}
.pod.p2 .block{height:90px;background:linear-gradient(#e2e8f0,#8a96a8);animation-delay:.1s}
.pod.p3 .block{height:70px;background:linear-gradient(#f0a46a,#9a5420);animation-delay:.2s}
.pod .val{font-size:12px;color:var(--muted);font-weight:800}
table.rank{width:100%;border-collapse:collapse}
table.rank td,table.rank th{padding:10px 8px;text-align:left;border-bottom:1px solid var(--line)}
table.rank th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
table.rank tr.me td{background:rgba(255,61,87,.1)}
table.rank tr{animation:pop .35s var(--ease) both}
table.rank .pos{font:400 18px 'Lilita One';width:38px;color:var(--muted)}
.rank-u{display:flex;align-items:center;gap:10px}
.flash-row{animation:rowflash 1.2s!important}
@keyframes rowflash{0%{background:rgba(255,200,61,.35)}}

/* Profil */
.profile-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.stat{background:var(--card2);border-radius:14px;padding:12px;text-align:center}
.stat b{display:block;font:400 26px 'Lilita One'}
.stat span{font-size:12px;color:var(--muted);font-weight:800}

/* Warteraum */
#room{overflow:auto}
.room-wrap{max-width:1100px;margin:auto;padding:calc(14px + var(--safe-t)) 16px calc(20px + var(--safe-b))}
.room-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.room-head h1{font:400 28px 'Lilita One';margin:0}
.room-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.plist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.plist li{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--card2);animation:pop .35s var(--ease)}
.plist li.free{opacity:.5;border:1.5px dashed var(--line);background:none}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.mode{border-radius:16px;padding:14px;cursor:pointer;border:2px solid var(--line);background:var(--card2);transition:all .25s var(--ease);text-align:left}
.mode.on{border-color:var(--acc);background:rgba(255,61,87,.12);box-shadow:0 0 0 3px rgba(255,61,87,.15)}
.mode b{font:400 20px 'Lilita One';display:block}
.mode small{color:var(--muted);font-size:12px;line-height:1.35;display:block;margin-top:4px}
.mode[disabled]{pointer-events:none}
label.lbl{display:block;font-size:13px;color:var(--muted);font-weight:800;margin:10px 0 5px}
.invite{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.qr{width:150px;height:150px;background:#fff;border-radius:14px;padding:8px;flex:none;animation:pop .4s var(--ease)}
.qr svg{width:100%;height:100%;display:block}
.room-chat{height:280px}

/* Overlays */
.overlay{position:fixed;inset:0;background:rgba(5,8,20,.6);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:300;animation:fade .25s;padding:16px}
.modal{border-radius:24px;padding:22px;width:min(460px,100%);max-height:90vh;overflow:auto;animation:modalIn .4s var(--ease)}
.modal h2{font:400 26px 'Lilita One';margin:0 0 12px}
.modal .row[style*="flex-end"]{position:sticky;bottom:-22px;margin:16px -22px -22px!important;padding:12px 22px calc(14px + var(--safe-b));background:linear-gradient(to top,rgba(18,22,46,.98) 70%,transparent);z-index:2}
@supports (height:1dvh){.modal{max-height:90dvh}}
@keyframes modalIn{from{opacity:0;transform:translateY(30px) scale(.95)}}
#toasts{position:fixed;top:calc(12px + var(--safe-t));left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center;width:min(92vw,420px);pointer-events:none}
.toast{background:rgba(30,38,72,.95);padding:11px 16px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:toastIn .4s var(--ease);font-weight:800;font-size:14px;border:1px solid var(--line);pointer-events:auto;backdrop-filter:blur(10px);display:flex;gap:10px;align-items:center}
.toast.out{animation:toastOut .3s forwards}
.toast.error{border-color:rgba(255,61,87,.5)}
.toast.coins{border-color:rgba(255,200,61,.5);color:var(--gold)}
.toast.win{border-color:rgba(61,220,132,.5)}
.toast.broadcast{background:linear-gradient(135deg,#5b2bd6,#c4127c)}
@keyframes toastIn{from{opacity:0;transform:translateY(-20px) scale(.9)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-14px) scale(.95)}}
.banner{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%) scale(0);font:400 min(110px,22vw) 'Lilita One';color:var(--gold);-webkit-text-stroke:min(5px,1.2vw) #000;paint-order:stroke fill;text-shadow:0 8px 0 #000,0 0 40px rgba(0,0,0,.5);z-index:250;pointer-events:none;white-space:nowrap}
.banner.show{animation:banner 1.4s var(--ease) forwards}
@keyframes banner{0%{transform:translate(-50%,-50%) scale(0) rotate(-25deg);opacity:0}20%{transform:translate(-50%,-50%) scale(1.2) rotate(-6deg);opacity:1}35%{transform:translate(-50%,-50%) scale(1) rotate(-8deg)}80%{transform:translate(-50%,-50%) scale(1.05) rotate(-8deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1.5) rotate(-8deg);opacity:0}}
.flash{position:fixed;inset:0;pointer-events:none;z-index:240;opacity:0}
.flash.red{animation:redflash .9s ease-out}
.flash.gold{animation:goldflash .9s ease-out}
@keyframes redflash{0%{opacity:1;background:radial-gradient(ellipse at center,rgba(255,0,30,.15) 30%,rgba(255,0,30,.75) 100%)}100%{opacity:0;background:radial-gradient(ellipse at center,rgba(255,0,30,.15) 30%,rgba(255,0,30,.75) 100%)}}
@keyframes goldflash{0%{opacity:1;background:radial-gradient(ellipse at center,rgba(255,220,80,.1) 30%,rgba(255,200,60,.5) 100%)}100%{opacity:0;background:radial-gradient(ellipse at center,rgba(255,220,80,.1) 30%,rgba(255,200,60,.5) 100%)}}
.screen-shake{animation:sshake .5s}
@keyframes sshake{10%,50%,90%{transform:translate(-6px,2px)}30%,70%{transform:translate(6px,-2px)}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:200;perspective:1200px}
.confetti{position:fixed;width:10px;height:16px;top:-20px;z-index:260;pointer-events:none}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{transform:scale(.85);opacity:0}}
@keyframes fade{from{opacity:0}}
@keyframes pulse{50%{opacity:.55}}

/* ---------- Smartphone ---------- */
@media (max-width:820px){
  #app{flex-direction:column-reverse}
  .sidenav{width:100%;flex-direction:row;padding:6px 6px calc(6px + var(--safe-b));border-right:0;border-top:1px solid var(--line);gap:0;justify-content:space-around;background:rgba(8,12,28,.92)}
  .nav-brand,.nav-desktop{display:none!important}
  .sidenav a{flex-direction:column;gap:2px;padding:6px 4px;font-size:10.5px;flex:1;border-radius:12px}
  .sidenav a i{font-size:22px}
  .sidenav a.on::before{left:30%;right:30%;top:-6px;bottom:auto;width:auto;height:3px}
  .sidenav .badge{position:absolute;top:2px;right:calc(50% - 22px)}
  .topbar{padding:calc(10px + var(--safe-t)) 14px 10px}
  .tb-title{font-size:22px}
  .view{padding:14px}
  .grid2,.room-grid,.pm-layout{grid-template-columns:1fr}
  .pm-layout.conv-open .ulist{display:none}
  .pm-layout:not(.conv-open) .conv{display:none}
  .games{grid-template-columns:1fr;gap:14px}
  .hello{gap:12px;margin-bottom:16px}
  .hello h2{font-size:24px}
  .hello .muted{font-size:13px;line-height:1.4}
  .hello #regHint{display:inline;padding:0;text-decoration:underline}
  .gcard{min-height:176px;padding:16px}
  .ghead .art{opacity:.55}
  .gcard h3{font-size:28px}
  .gcard p{font-size:13px;max-width:58%;line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.5)}
  .brand h1{font-size:42px}
  .modes{grid-template-columns:1fr 1fr}
  .podium .pod{width:92px}
}

/* ---------- Emotes ---------- */
.emo-picker{position:fixed;z-index:320;width:min(380px,calc(100vw - 20px));max-height:min(420px,70vh);overflow:auto;background:rgba(16,20,44,.97);border:1px solid var(--line);border-radius:22px;padding:12px;box-shadow:0 20px 60px rgba(0,0,0,.6);backdrop-filter:blur(14px);animation:modalIn .3s var(--ease)}
@media (max-width:640px){.emo-picker{left:10px;right:10px;bottom:calc(10px + var(--safe-b));width:auto}}
.emo-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 10px}
.emo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.emo-btn{position:relative;aspect-ratio:1;border:0;border-radius:16px;background:rgba(255,255,255,.06);cursor:pointer;display:grid;place-items:center;transition:transform .15s var(--ease),background .2s;overflow:hidden}
.emo-btn:hover{background:rgba(255,255,255,.14);transform:scale(1.08)}
.emo-btn:active{transform:scale(.92)}
.emo-btn img{width:76%;height:auto;pointer-events:none}
.emo-btn.locked img{filter:grayscale(1) brightness(.5)}
.emo-btn .lock{position:absolute;bottom:3px;left:0;right:0;font-size:10px;font-weight:900;color:var(--gold)}
.emo-btn .snd,.emo-prev .snd{position:absolute;top:2px;right:4px;font-size:12px}
.emo-btn .cd{position:absolute;inset:0;background:conic-gradient(rgba(0,0,0,.65) var(--p,0%),transparent 0);pointer-events:none}
.emo-btn.cooling{cursor:not-allowed}
.emo-prev{position:relative;cursor:pointer}
.emo-img{display:block}
.emo-pop{position:fixed;z-index:220;pointer-events:none;width:0;height:0}
.emo-pop .bubble{position:absolute;left:0;top:0;width:calc(var(--sz)*1.12);height:calc(var(--sz)*1.12);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#eef2ff 60%,#c9d3ff);box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 -6px 0 rgba(0,0,0,.08),0 0 0 4px rgba(255,255,255,.9);display:grid;place-items:center;animation:emoIn .7s cubic-bezier(.2,1.7,.35,1) both,emoBob 1.1s .7s ease-in-out infinite alternate}
.emo-pop .bubble::after{content:"";position:absolute;left:50%;bottom:-14px;width:28px;height:28px;background:#dfe5ff;transform:translateX(-50%) rotate(45deg);border-radius:4px;z-index:-1;box-shadow:4px 4px 10px rgba(0,0,0,.2)}
.emo-pop.below .bubble::after{bottom:auto;top:-14px}
.emo-pop .bubble img{width:82%;height:82%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));animation:emoWiggle .5s .45s ease-in-out 3}
.emo-pop .ring{position:absolute;left:0;top:0;width:calc(var(--sz)*1.2);height:calc(var(--sz)*1.2);transform:translate(-50%,-50%);border-radius:50%;border:5px solid #fff;animation:emoRing .7s ease-out forwards}
.emo-pop .rays{position:absolute;left:0;top:0;width:calc(var(--sz)*2.2);height:calc(var(--sz)*2.2);transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(rgba(255,230,120,.55) 0 8deg,transparent 8deg 24deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);animation:emoRays 2.6s linear forwards;opacity:0}
.emo-pop.loud .rays{background:repeating-conic-gradient(rgba(255,120,60,.6) 0 8deg,transparent 8deg 20deg)}
.emo-pop .emo-label{position:absolute;left:0;top:calc(var(--sz)*.62);transform:translateX(-50%) rotate(-6deg);font:400 30px 'Lilita One';color:var(--gold);-webkit-text-stroke:4px #000;paint-order:stroke fill;text-shadow:0 4px 0 #000;white-space:nowrap;animation:emoLabel .5s .35s cubic-bezier(.2,1.8,.4,1) both}
.emo-pop .emo-who{position:absolute;left:0;top:calc(var(--sz)*-.72);transform:translateX(-50%);background:rgba(0,0,0,.7);color:#fff;font-weight:900;font-size:12px;padding:3px 10px;border-radius:99px;white-space:nowrap;animation:fade .3s .3s both}
.emo-pop.below .emo-who{top:calc(var(--sz)*.66)}
.emo-pop.below .emo-label{top:calc(var(--sz)*.9)}
.emo-pop.out{animation:emoOut .45s ease-in forwards}
.emo-spark{position:fixed;width:10px;height:10px;border-radius:50%;z-index:219;pointer-events:none;box-shadow:0 0 8px currentColor}
.emo-spark.star{width:14px;height:14px;border-radius:0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes emoIn{0%{transform:translate(-50%,-50%) scale(0) rotate(-35deg)}60%{transform:translate(-50%,-50%) scale(1.18) rotate(6deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(0)}}
@keyframes emoBob{to{transform:translate(-50%,-56%) scale(1.04) rotate(-2deg)}}
@keyframes emoWiggle{25%{transform:rotate(-14deg) scale(1.08)}75%{transform:rotate(14deg) scale(1.08)}}
@keyframes emoRing{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}100%{transform:translate(-50%,-50%) scale(1.9);opacity:0;border-width:1px}}
@keyframes emoRays{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.5)}15%{opacity:1;transform:translate(-50%,-50%) rotate(20deg) scale(1)}80%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) rotate(110deg) scale(1.1)}}
@keyframes emoLabel{from{transform:translateX(-50%) scale(2.6) rotate(-14deg);opacity:0}}
@keyframes emoOut{to{transform:translateY(-40px) scale(.4);opacity:0}}
.emo-btn:hover img{animation:emoWiggle .5s ease-in-out infinite}
.emo-takeover{position:fixed;inset:0;z-index:330;pointer-events:none;display:grid;place-items:center}
.emo-takeover .tk-bg{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(90,0,0,.7),rgba(10,0,0,.95));animation:fade .25s}
.tk-face{position:relative;width:min(300px,62vmin);height:min(300px,62vmin);animation:tkIn .55s cubic-bezier(.2,1.4,.4,1) both,tkShake .09s .55s linear 14}
.tk-face img{width:100%;height:100%;border-radius:28px;border:7px solid #fff;box-shadow:0 0 0 6px #e3242b,0 0 80px rgba(255,0,0,.8)}
@keyframes tkIn{from{transform:translate(var(--fx),var(--fy)) scale(.15) rotate(-40deg)}}
@keyframes tkShake{0%{transform:translate(-8px,4px) rotate(-3deg)}50%{transform:translate(8px,-4px) rotate(3deg)}100%{transform:translate(-8px,4px) rotate(-3deg)}}
.tk-anger{position:absolute;font-size:min(90px,18vmin);animation:anger .5s ease-in-out infinite alternate;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.tk-anger.a1{top:-8%;right:-10%}.tk-anger.a2{top:30%;left:-22%;animation-delay:.15s}.tk-anger.a3{bottom:-6%;right:-14%;animation-delay:.3s}
@keyframes anger{from{transform:scale(.7) rotate(-10deg)}to{transform:scale(1.15) rotate(10deg)}}
.tk-text{display:none;position:absolute;z-index:3;bottom:14%;font:400 min(96px,15vw) 'Lilita One';color:#ff2a2a;-webkit-text-stroke:min(6px,1.2vw) #fff;paint-order:stroke fill;text-shadow:0 8px 0 #000,0 0 40px #f00;animation:tkText .5s .35s cubic-bezier(.2,1.6,.4,1) both;white-space:nowrap}
@keyframes tkText{from{transform:scale(3) rotate(-12deg);opacity:0}to{transform:scale(1) rotate(-6deg)}}
.tk-from{position:absolute;z-index:3;bottom:10%;font-size:20px;font-weight:900;color:#fff;opacity:.8}
.emo-takeover.out{animation:fade .5s reverse forwards}

.crop{position:relative;width:min(300px,76vw);aspect-ratio:1;margin:auto;overflow:hidden;border-radius:18px;background:#000;touch-action:none;cursor:grab;user-select:none}
.crop img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none}
.crop-mask{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 400px rgba(0,0,0,.55);border:3px solid #fff;pointer-events:none}

/* Touch: alle Tippflächen mindestens 40px */
@media (pointer:coarse){
  .btn.small{min-height:40px;padding:8px 14px}
  .icon-btn{width:44px;height:44px}
  .link,#regHint{display:inline-block;padding:8px 4px}
  .tabs button{min-height:44px}
  .sidenav a{min-height:48px}
  select,input,textarea{font-size:16px} /* verhindert Zoom-Sprung auf iOS */
}

.room-actions{margin-top:14px}
.plist li.more{justify-content:center;padding:6px;font-size:13px}
@media (max-width:820px){
  .room-actions{position:sticky;bottom:0;z-index:5;margin:14px -18px -18px;padding:12px 18px calc(12px + var(--safe-b));background:linear-gradient(to top,rgba(14,19,44,.98) 70%,rgba(14,19,44,0));border-radius:0 0 20px 20px}
  .room-actions{flex-wrap:nowrap;gap:8px}.room-actions .grow{display:none}
  .room-actions .btn{flex:1 1 0;min-height:48px;padding-left:10px;padding-right:10px;white-space:nowrap}
  .room-actions #rmStart{flex:1.6 1 0}
  #rmInfo{margin:10px 0 4px}
  .room-wrap{padding-bottom:calc(30px + var(--safe-b))}
  .room-head h1{font-size:22px}
  .qr{width:132px;height:132px}
}

.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.lv{border:2px solid var(--line);background:var(--card2);border-radius:14px;padding:10px 6px;cursor:pointer;color:var(--txt);display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .25s var(--ease);text-align:center}
.lv i{font-style:normal;font-size:22px}.lv b{font:400 15px 'Lilita One'}.lv small{font-size:10.5px;color:var(--muted);line-height:1.25}
.lv.on{border-color:var(--acc);background:rgba(255,61,87,.14);box-shadow:0 0 0 3px rgba(255,61,87,.15);transform:translateY(-2px)}

.inv-banner{width:100%;border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:3px;text-align:left;animation:rise .6s var(--ease) both;border:1px solid var(--line);backdrop-filter:blur(12px)}
.inv-banner b{font:400 18px 'Lilita One'}.inv-banner span{font-size:13px;color:var(--muted);line-height:1.35}
.inv-banner.ok{background:linear-gradient(135deg,rgba(61,220,132,.2),rgba(30,120,90,.2));border-color:rgba(61,220,132,.45)}
.inv-banner.warn{background:rgba(255,200,61,.14);border-color:rgba(255,200,61,.4)}
.inv-banner.bad{background:rgba(255,61,87,.15);border-color:rgba(255,61,87,.45)}
.joinfail-ic{font-size:64px;animation:pop .5s var(--ease)}
.joinfail-room{margin-top:12px;padding:10px 14px;border-radius:14px;background:var(--card2);border:1px solid var(--line)}

#netOverlay{position:fixed;inset:0;z-index:900;display:grid;place-items:center;background:rgba(6,9,24,.82);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .35s}
#netOverlay.on{opacity:1;pointer-events:auto}
.net-box{text-align:center;max-width:340px;padding:28px;animation:modalIn .5s var(--ease)}
.net-box h2{font:400 28px 'Lilita One';margin:16px 0 8px}.net-box p{color:var(--muted);line-height:1.45;margin:0}
.net-spin{width:56px;height:56px;margin:auto;border-radius:50%;border:5px solid rgba(255,255,255,.15);border-top-color:var(--acc);animation:spin 1s linear infinite}

/* ---------- Update-Bildschirm ---------- */
#netOverlay{background:radial-gradient(circle at 50% 40%,rgba(40,24,90,.92),rgba(6,9,24,.96))}
.upd-glow{position:absolute;inset:-20%;background:conic-gradient(from 0deg,rgba(255,61,87,.18),rgba(255,210,31,.14),rgba(61,220,132,.16),rgba(77,151,255,.18),rgba(255,61,87,.18));filter:blur(60px);animation:spin 14s linear infinite;pointer-events:none}
.net-box.upd{position:relative;max-width:360px}
.upd-deck{position:relative;width:120px;height:150px;margin:0 auto 18px;perspective:600px}
.upd-deck i{position:absolute;left:50%;top:50%;width:70px;height:104px;margin:-52px 0 0 -35px;border-radius:12px;border:4px solid #fff;box-shadow:0 10px 26px rgba(0,0,0,.45);transform-origin:50% 120%;animation:updFan 2.4s cubic-bezier(.6,0,.3,1) infinite}
.upd-deck .c1{background:#e8383d;animation-delay:0s}.upd-deck .c2{background:#f4c20d;animation-delay:.12s}.upd-deck .c3{background:#2aa44f;animation-delay:.24s}.upd-deck .c4{background:#2f6fe0;animation-delay:.36s}
.upd-deck b{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));animation:updBob 1.2s ease-in-out infinite alternate}
@keyframes updFan{0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(calc((var(--k,0) + 1) * 0deg)) rotateY(180deg) translateY(-8px)}60%{transform:rotate(-34deg) translateY(-6px)}80%{transform:rotate(34deg)}}
.upd-deck .c2{--k:1}.upd-deck .c3{--k:2}.upd-deck .c4{--k:3}
@keyframes updBob{to{transform:translateY(-6px) scale(1.08)}}
.net-box.upd p{transition:opacity .22s,transform .22s;min-height:2.6em}.net-box.upd p.sw{opacity:0;transform:translateY(6px)}
.upd-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden;margin:18px auto 0;max-width:240px}
.upd-bar i{display:block;height:100%;width:40%;border-radius:6px;background:linear-gradient(90deg,#ff3d57,#ffd21f,#3ddc84,#4d97ff);animation:updBar 1.5s ease-in-out infinite}
@keyframes updBar{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
.net-spin.sm{display:inline-block;width:16px;height:16px;border-width:3px;vertical-align:-3px;margin:0 6px 0 0}
.upd-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.upd-notes{margin:8px 0 12px;padding-left:20px;line-height:1.5}.upd-notes li{margin:3px 0}
.upd-sched{background:rgba(255,210,31,.1);border:1px solid rgba(255,210,31,.3);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.upd-opts{display:flex;flex-direction:column;gap:8px}.upd-opts input{min-height:44px}
.upd-wait{padding:10px 0;color:var(--muted)}