/* ===========================================================
   PRAY Crazy 8 – PRAY-Stil
   =========================================================== */
:root{
  --bg:#09060f;--bg2:#0e0918;--card:#130d1f;--card2:#1a1229;--border:#2a1f42;
  --text:#f4eefc;--muted:#a597c0;
  --p:#ff2bd6;--v:#8b5cf6;--c:#22d3ee;--g:#1ed760;--r:#ff4d6d;--y:#facc15;
  --cr:#ff3d5e;--cy:#ffc21a;--cg:#16d16a;--cb:#2f7bff;
  --glass:rgba(19,13,31,.72);--glass2:rgba(26,18,41,.6);
  --radius:18px;--shadow:0 10px 40px rgba(0,0,0,.45);
  --cw:clamp(58px,8.4vw,94px);
  --grid:rgba(139,92,246,.35);
}
:root[data-theme="light"]{
  --bg:#f6f1ff;--bg2:#efe7ff;--card:#ffffff;--card2:#f5efff;--border:#ddd0f5;
  --text:#1b1230;--muted:#6b5c8a;--glass:rgba(255,255,255,.78);--glass2:rgba(245,239,255,.75);
  --shadow:0 10px 40px rgba(80,40,140,.18);--grid:rgba(139,92,246,.22);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:Outfit,system-ui,sans-serif;overflow-x:hidden;transition:background .4s,color .4s}
button{font:inherit;color:inherit;cursor:pointer}
input,select{font:inherit;color:inherit}
.bebas{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.06em}
.hidden{display:none!important}

/* ---------- Hintergrund ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;width:52vmax;height:52vmax;border-radius:50%;filter:blur(90px);opacity:.33;animation:drift 26s ease-in-out infinite alternate}
.blob.b1{background:var(--p);top:-18vmax;left:-14vmax}
.blob.b2{background:var(--c);bottom:-22vmax;right:-16vmax;animation-duration:31s;opacity:.25}
.blob.b3{background:var(--v);top:30%;left:40%;width:40vmax;height:40vmax;animation-duration:37s;opacity:.28}
:root[data-theme="light"] .blob{opacity:.18}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vmax,4vmax) scale(1.08)}100%{transform:translate(-5vmax,7vmax) scale(.95)}}
.floor{position:absolute;left:-50%;right:-50%;bottom:-8vh;height:48vh;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:56px 56px;transform:perspective(420px) rotateX(64deg);transform-origin:bottom;
  mask-image:linear-gradient(to top,#000 10%,transparent 85%);-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);
  animation:floor 6s linear infinite}
@keyframes floor{to{background-position:0 56px,0 0}}

/* ---------- Knöpfe ---------- */
.btn{border:0;border-radius:14px;padding:12px 20px;font-family:'Bebas Neue',sans-serif;font-size:21px;letter-spacing:.08em;color:#fff;
  background:linear-gradient(90deg,var(--p),var(--v));box-shadow:0 0 22px rgba(255,43,214,.38),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s,box-shadow .2s,filter .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(255,43,214,.6)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn:disabled{filter:grayscale(.8) brightness(.7);cursor:not-allowed;transform:none;box-shadow:none}
.btn.alt{background:linear-gradient(90deg,var(--c),var(--v));box-shadow:0 0 22px rgba(34,211,238,.35)}
.btn.calm{background:var(--card2);border:1px solid var(--border);box-shadow:none;color:var(--text)}
.btn.calm:hover{border-color:var(--v);box-shadow:0 0 18px rgba(139,92,246,.3)}
.btn.danger{background:linear-gradient(90deg,var(--r),#b4235a);box-shadow:0 0 22px rgba(255,77,109,.35)}
.btn.gold{background:linear-gradient(90deg,var(--y),#ff8a00);color:#1b1230;box-shadow:0 0 24px rgba(250,204,21,.45)}
.btn.sm{font-size:16px;padding:8px 12px;border-radius:11px}
.btn.wide{width:100%}
.ibtn{width:42px;height:42px;border-radius:13px;border:1px solid var(--border);background:var(--glass);backdrop-filter:blur(10px);
  display:grid;place-items:center;transition:.2s;flex:none}
.ibtn:hover{border-color:var(--p);box-shadow:0 0 16px rgba(255,43,214,.35)}
.ibtn svg{width:20px;height:20px}
.ibtn.off{opacity:.5}

/* ---------- Eingaben ---------- */
.inp{width:100%;padding:12px 14px;border-radius:13px;border:1px solid var(--border);background:var(--bg2);outline:none;transition:.2s}
.inp:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(255,43,214,.18)}
.lbl{font-family:'Bebas Neue';letter-spacing:.12em;color:var(--muted);font-size:15px;margin:12px 0 6px;display:block}
.seg{display:flex;background:var(--bg2);border:1px solid var(--border);border-radius:13px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:none;padding:8px 6px;border-radius:10px;font-family:'Bebas Neue';letter-spacing:.08em;font-size:16px;color:var(--muted);transition:.2s;white-space:nowrap}
.seg button.on{background:linear-gradient(90deg,var(--p),var(--v));color:#fff;box-shadow:0 0 14px rgba(255,43,214,.35)}
.seg button:disabled{cursor:default}
.tog{position:relative;width:46px;height:26px;flex:none;border-radius:20px;background:var(--border);border:0;transition:.25s}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.25s;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.tog.on{background:linear-gradient(90deg,var(--p),var(--v));box-shadow:0 0 12px rgba(255,43,214,.45)}
.tog.on::after{left:23px}
.tog:disabled{opacity:.6;cursor:default}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:var(--card2);font-size:20px}
.stepper b{font-family:'Bebas Neue';font-size:28px;min-width:30px;text-align:center}

/* ---------- Panels ---------- */
.panel{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:20px;backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.panel h3{font-family:'Bebas Neue';letter-spacing:.1em;font-size:26px;margin:0 0 6px;display:flex;align-items:center;gap:10px}
.panel h3 i{font-style:normal;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:16px;background:linear-gradient(135deg,var(--p),var(--v))}
.muted{color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:30px;border:1px solid var(--border);background:var(--glass2);
  font-family:'Bebas Neue';letter-spacing:.08em;font-size:16px;white-space:nowrap}
.chip b{color:var(--c);font-weight:400}

/* ---------- Startseite ---------- */
.topbtns{position:fixed;top:14px;right:14px;display:flex;gap:8px;z-index:30}
#home{min-height:100vh;padding:70px 16px 60px;display:flex;flex-direction:column;align-items:center}
.hero{text-align:center;margin-bottom:26px}
.hero .pre{font-family:'Bebas Neue';color:var(--c);letter-spacing:.5em;font-size:clamp(18px,3vw,26px);margin-left:.5em;text-shadow:0 0 14px rgba(34,211,238,.6)}
.hero h1{font-family:'Bebas Neue';font-weight:400;margin:-6px 0 0;font-size:clamp(76px,17vw,190px);line-height:.9;white-space:nowrap;letter-spacing:.04em;
  background:linear-gradient(100deg,#fff 10%,var(--p) 50%,var(--v) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,43,214,.45))}
:root[data-theme="light"] .hero h1{background:linear-gradient(100deg,#3b1f6b 5%,var(--p) 50%,var(--v) 90%);-webkit-background-clip:text;background-clip:text}
.hero .sub{font-family:'Bebas Neue';letter-spacing:.3em;font-size:clamp(16px,2.6vw,22px);color:var(--muted)}
.hero .fan{display:flex;justify-content:center;margin:0 0 18px;height:84px}
.hero .fan .card{--cw:46px;margin:0 -9px;transform:rotate(var(--rot)) translateY(var(--ty));animation:fanin .7s cubic-bezier(.2,1.4,.4,1) backwards}
@keyframes fanin{from{transform:translateY(60px) rotate(0);opacity:0}}
.homegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;width:min(1120px,100%)}
.announce{width:min(1120px,100%);margin-bottom:16px;padding:12px 16px;border-radius:14px;border:1px solid var(--c);background:rgba(34,211,238,.1);box-shadow:0 0 20px rgba(34,211,238,.2)}
.maint{border-color:var(--r);background:rgba(255,77,109,.1)}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.lobbylist{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-height:230px;overflow:auto}
.lobbyitem{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:13px;background:var(--bg2);border:1px solid var(--border);cursor:pointer;transition:.2s}
.lobbyitem:hover{border-color:var(--c);box-shadow:0 0 14px rgba(34,211,238,.25)}
.lobbyitem .code{font-family:'Bebas Neue';color:var(--c);font-size:20px;letter-spacing:.1em}
.board{width:100%;border-collapse:collapse;font-size:15px}
.board td{padding:7px 6px;border-bottom:1px solid var(--border)}
.board td:first-child{font-family:'Bebas Neue';font-size:20px;width:30px;color:var(--muted)}
.board tr:nth-child(1) td:first-child{color:var(--y)}
.board tr:nth-child(2) td:first-child{color:#cfd6e6}
.board tr:nth-child(3) td:first-child{color:#e19a5b}
.board td.n{text-align:right;font-family:'Bebas Neue';font-size:19px;letter-spacing:.05em}

/* ---------- Kopfleiste ---------- */
.gbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--glass);backdrop-filter:blur(12px);z-index:5;position:relative}
.logo{font-family:'Bebas Neue';font-size:30px;letter-spacing:.08em;background:linear-gradient(90deg,#fff,var(--p),var(--v));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;filter:drop-shadow(0 0 10px rgba(255,43,214,.4))}
:root[data-theme="light"] .logo{background:linear-gradient(90deg,#3b1f6b,var(--p),var(--v));-webkit-background-clip:text;background-clip:text}
.logo span{color:var(--c);-webkit-text-fill-color:var(--c);margin-right:6px}
.gbar .chips{display:flex;gap:6px;overflow:auto;scrollbar-width:none}
.gbar .chips::-webkit-scrollbar{display:none}
.gbar .sp{flex:1}

/* ---------- Lobby ---------- */
#lobby{min-height:100vh;display:flex;flex-direction:column}
.lobbywrap{flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;padding:16px;max-width:1240px;width:100%;margin:0 auto}
.seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.seatcard{position:relative;padding:14px 12px;border-radius:15px;background:var(--bg2);border:1px solid var(--border);text-align:center;min-height:132px;display:flex;flex-direction:column;align-items:center;gap:6px;animation:pop .35s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(.7);opacity:0}}
.seatcard.me{border-color:var(--p);box-shadow:0 0 18px rgba(255,43,214,.3)}
.seatcard .x{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:8px;border:1px solid var(--border);background:var(--card);font-size:14px;line-height:1}
.seatcard.empty{border-style:dashed;justify-content:center;color:var(--muted);cursor:pointer;background:transparent}
.seatcard.empty:hover{border-color:var(--c);color:var(--c)}
.seatcard .nm{font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seatcard select{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:3px 6px;font-size:13px}
.av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:'Bebas Neue';font-size:26px;color:#fff;flex:none;
  background:linear-gradient(135deg,var(--h1),var(--h2));box-shadow:0 0 16px color-mix(in srgb,var(--h1) 50%,transparent);position:relative}
.av.bot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px dashed rgba(255,255,255,.35)}
.tag{font-family:'Bebas Neue';letter-spacing:.08em;font-size:13px;padding:2px 8px;border-radius:20px;background:var(--card2);border:1px solid var(--border);color:var(--muted)}
.tag.host{color:var(--y);border-color:rgba(250,204,21,.5)}
.tag.bot{color:var(--c);border-color:rgba(34,211,238,.4)}
.ruleg{margin-top:14px}
.ruleg h4{font-family:'Bebas Neue';letter-spacing:.14em;font-size:17px;color:var(--c);margin:0 0 6px}
.rule{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
.rule:last-child{border:0}
.rule .t{flex:1;min-width:0}
.rule .t b{display:block;font-weight:600;font-size:15px}
.rule .t small{color:var(--muted);font-size:12.5px;line-height:1.3;display:block}
.rule select{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:6px 8px;max-width:150px}
.rulescroll{max-height:calc(100vh - 230px);overflow:auto;padding-right:4px;margin-top:10px;border-top:1px solid var(--border)}
.codebig{font-family:'Bebas Neue';font-size:48px;letter-spacing:.2em;color:var(--c);text-shadow:0 0 18px rgba(34,211,238,.6);line-height:1}

/* ---------- Spieltisch ---------- */
#game{height:100vh;height:100dvh;display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.gbody{display:grid;grid-template-columns:minmax(0,1fr) 290px;min-height:0}
.gmain{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative}
.opps{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 10px;padding:12px 10px 4px}
.seat{position:relative;display:flex;align-items:center;gap:9px;padding:8px 12px 8px 8px;border-radius:16px;background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(10px);min-width:0;transition:.3s}
.seat .av{width:42px;height:42px;font-size:21px}
.seat .info{min-width:0}
.seat .nm{font-weight:700;font-size:14px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat .meta{font-family:'Bebas Neue';letter-spacing:.06em;font-size:15px;color:var(--muted);display:flex;gap:8px}
.seat .meta b{color:var(--text);font-weight:400}
.seat.turn{border-color:var(--p);box-shadow:0 0 0 1px var(--p),0 0 26px rgba(255,43,214,.5);transform:translateY(-2px)}
.seat.out{opacity:.55}
.seat.off .av{filter:grayscale(1)}
.minifan{display:flex;height:30px;align-items:flex-end;margin-left:2px}
.minifan i{width:16px;height:24px;border-radius:4px;margin-left:-9px;background:linear-gradient(135deg,#2a1450,#120a22);border:1px solid rgba(255,43,214,.6);box-shadow:0 0 6px rgba(255,43,214,.3);transform:rotate(calc(var(--k)*5deg - 10deg))}
.minifan i:first-child{margin-left:0}
.seat .badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-family:'Bebas Neue';font-size:14px;letter-spacing:.1em;padding:1px 9px;border-radius:20px;white-space:nowrap}
.badge.uno{background:linear-gradient(90deg,var(--y),#ff8a00);color:#1b1230;box-shadow:0 0 14px rgba(250,204,21,.6)}
.badge.place{background:linear-gradient(90deg,var(--c),var(--v));color:#fff}
.catchbtn{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);z-index:4;font-size:15px!important;padding:4px 12px!important;animation:catchin .3s cubic-bezier(.2,1.6,.4,1)}
@keyframes catchin{from{transform:translateX(-50%) scale(0)}}
.react{position:absolute;left:50%;top:0;font-size:34px;pointer-events:none;animation:floatup 2.2s ease-out forwards;z-index:9}
.react.txt{font-family:'Bebas Neue';font-size:30px;color:var(--y);text-shadow:0 0 12px rgba(250,204,21,.8)}
@keyframes floatup{0%{transform:translate(-50%,10px) scale(.4);opacity:0}15%{transform:translate(-50%,-10px) scale(1.2);opacity:1}100%{transform:translate(-50%,-90px) scale(1);opacity:0}}

.center{flex:1;min-height:0;display:grid;place-items:center;position:relative}
.tablering{position:relative;width:min(440px,86vw);aspect-ratio:1.55;display:flex;align-items:center;justify-content:center;gap:clamp(18px,5vw,46px);
  border-radius:50%;background:radial-gradient(ellipse at center,rgba(139,92,246,.18),transparent 70%)}
.dirring{position:absolute;inset:-6px;pointer-events:none;opacity:.8}
.dirring svg{width:100%;height:100%;overflow:visible}
.dirring .spin{transform-origin:50% 50%;animation:spin 14s linear infinite}
.dirring.ccw .spin{animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.glowring{position:absolute;inset:6%;border-radius:50%;border:2px solid var(--cur,var(--v));box-shadow:0 0 30px var(--cur,var(--v)),inset 0 0 30px color-mix(in srgb,var(--cur,var(--v)) 35%,transparent);opacity:.55;transition:.5s}
.deck{position:relative;width:var(--cw);aspect-ratio:2/3;cursor:pointer}
.deck .card{position:absolute;inset:0;width:100%}
.deck .card:nth-child(1){transform:translate(-4px,4px)}
.deck .card:nth-child(2){transform:translate(-2px,2px)}
.deck.can .card:last-child{box-shadow:0 0 0 2px var(--c),0 0 26px rgba(34,211,238,.7)}
.deck .cnt{position:absolute;bottom:-26px;left:0;right:0;text-align:center;font-family:'Bebas Neue';color:var(--muted);letter-spacing:.08em}
.pile{position:relative;width:var(--cw);aspect-ratio:2/3}
.pile .card{position:absolute;inset:0;width:100%}
.pendbadge{position:absolute;top:-34px;left:50%;transform:translateX(-50%);font-family:'Bebas Neue';font-size:34px;color:#fff;padding:0 14px;border-radius:14px;
  background:linear-gradient(90deg,var(--r),var(--p));box-shadow:0 0 22px rgba(255,77,109,.7);animation:pop .3s;white-space:nowrap;z-index:3}
.colordot{position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;font-family:'Bebas Neue';letter-spacing:.1em;color:var(--muted)}
.colordot i{width:14px;height:14px;border-radius:50%;background:var(--cur);box-shadow:0 0 10px var(--cur)}

.status{text-align:center;padding:4px 10px 6px;min-height:52px}
.status .big{font-family:'Bebas Neue';font-size:clamp(24px,4vw,34px);letter-spacing:.08em;line-height:1.1}
.status .big.me{background:linear-gradient(90deg,var(--p),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
.timer{height:5px;width:min(320px,70%);margin:6px auto 0;border-radius:4px;background:var(--border);overflow:hidden}
.timer i{display:block;height:100%;background:linear-gradient(90deg,var(--c),var(--p));transform-origin:left;transition:transform .7s linear}
.timer.warn i{background:linear-gradient(90deg,var(--y),var(--r))}

.actions{display:flex;justify-content:center;align-items:center;gap:10px;padding:6px 10px;min-height:58px;flex-wrap:wrap}
.unobtn{width:90px;height:90px;border-radius:50%;border:0;font-family:'Bebas Neue';font-size:25px;letter-spacing:.04em;color:#1b1230;
  background:radial-gradient(circle at 35% 30%,#fff6b0,var(--y) 45%,#ff8a00);box-shadow:0 0 0 4px rgba(250,204,21,.25),0 0 34px rgba(250,204,21,.65);transition:.2s;
  position:absolute;right:16px;bottom:calc(var(--cw)*1.5 + 40px);z-index:6}
.unobtn:hover{transform:scale(1.07) rotate(-4deg)}
.unobtn.armed{background:radial-gradient(circle at 35% 30%,#fff,var(--c) 45%,var(--v));color:#fff;box-shadow:0 0 0 4px rgba(34,211,238,.35),0 0 44px rgba(34,211,238,.9)}
.unobtn small{display:block;font-size:12px;letter-spacing:.1em;margin-top:-6px}

.handwrap{position:relative;padding:22px 12px 14px;border-top:1px solid var(--border);background:linear-gradient(to top,var(--glass),transparent)}
.hand{display:flex;justify-content:center;align-items:flex-end;min-height:calc(var(--cw)*1.5 + 12px)}
.hand .card{flex:none;transition:transform .2s,box-shadow .2s,filter .2s,margin .3s;cursor:pointer;position:relative}
.hand .card.dim{filter:brightness(.55) saturate(.6)}
.hand .card.ok{transform:translateY(-14px);box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 26px var(--glow)}
.hand .card.ok:hover{transform:translateY(-26px) scale(1.05);z-index:5}
.hand .card.jump{transform:translateY(-14px);box-shadow:0 0 0 3px var(--c),0 0 30px var(--c)}
.hand .card.jump::before{content:"JUMP-IN";position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-family:'Bebas Neue';color:var(--c);letter-spacing:.1em;font-size:15px;text-shadow:0 0 8px var(--c)}
.hand .card.new{animation:handin .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes handin{from{transform:translateY(-60px) scale(.6);opacity:0}}
.hand .card .dbl{position:absolute;top:-12px;right:-10px;z-index:3;font-family:'Bebas Neue';font-size:15px;padding:2px 7px;border-radius:9px;border:0;color:#fff;background:linear-gradient(90deg,var(--c),var(--v));box-shadow:0 0 12px var(--c)}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.handinfo{position:absolute;top:2px;left:16px;font-family:'Bebas Neue';letter-spacing:.1em;color:var(--muted)}

/* ---------- Karten ---------- */
.card{--cc:#555;--glow:rgba(255,255,255,.4);width:var(--cw);aspect-ratio:2/3;border-radius:calc(var(--cw)*.13);position:relative;user-select:none;
  background:linear-gradient(150deg,color-mix(in srgb,var(--cc) 92%,#fff),var(--cc) 45%,color-mix(in srgb,var(--cc) 62%,#000));
  box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 0 0 calc(var(--cw)*.045) rgba(255,255,255,.92);color:#fff;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.25) 48%,transparent 58%);pointer-events:none}
.card.c-r{--cc:var(--cr);--glow:rgba(255,61,94,.9)}
.card.c-y{--cc:var(--cy);--glow:rgba(255,194,26,.9)}
.card.c-g{--cc:var(--cg);--glow:rgba(22,209,106,.9)}
.card.c-b{--cc:var(--cb);--glow:rgba(47,123,255,.9)}
.card.c-w{--cc:#17101f;--glow:rgba(255,43,214,.9);background:linear-gradient(150deg,#2a1d3d,#100a18 60%,#07040c)}
.card .mid{position:absolute;left:12%;right:12%;top:50%;transform:translateY(-50%);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.3),rgba(0,0,0,.22));border:calc(var(--cw)*.022) solid rgba(255,255,255,.6);
  box-shadow:0 0 calc(var(--cw)*.12) rgba(255,255,255,.35),inset 0 0 calc(var(--cw)*.1) rgba(0,0,0,.25)}
.card .big{font-family:'Bebas Neue';font-size:calc(var(--cw)*.62);line-height:1;letter-spacing:0;text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 14px var(--glow)}
.card .big.sm{font-size:calc(var(--cw)*.44)}
.card .big svg{width:calc(var(--cw)*.5);height:calc(var(--cw)*.5);filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.card .cor{position:absolute;font-family:'Bebas Neue';font-size:calc(var(--cw)*.2);line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.card .cor svg{width:calc(var(--cw)*.17);height:calc(var(--cw)*.17)}
.card .cor.tl{top:calc(var(--cw)*.09);left:calc(var(--cw)*.1)}
.card .cor.br{bottom:calc(var(--cw)*.09);right:calc(var(--cw)*.1);transform:rotate(180deg)}
.card .lab{position:absolute;bottom:13%;left:0;right:0;text-align:center;font-family:'Bebas Neue';font-size:calc(var(--cw)*.13);letter-spacing:.1em;opacity:.85}
.card.c-w .mid{background:conic-gradient(from 45deg,var(--cr) 0 25%,var(--cy) 0 50%,var(--cg) 0 75%,var(--cb) 0);border-color:rgba(255,255,255,.8)}
.card.c-w.chosen{box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 0 0 calc(var(--cw)*.045) var(--cc2),0 0 22px var(--cc2)}
.card.back{background:radial-gradient(circle at 30% 20%,#3a1d6e,#160b2b 55%,#09050f);box-shadow:0 6px 16px rgba(0,0,0,.5),inset 0 0 0 calc(var(--cw)*.04) rgba(255,43,214,.75),inset 0 0 24px rgba(139,92,246,.6)}
.card.back .bk{position:absolute;inset:0;display:grid;place-items:center}
.card.back .bk span{font-family:'Bebas Neue';font-size:calc(var(--cw)*.36);letter-spacing:.05em;transform:rotate(-58deg);
  background:linear-gradient(90deg,#fff,var(--p),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px rgba(255,43,214,.8))}
.card.back .bk::before{content:"";position:absolute;inset:18% 20%;border-radius:50%;border:2px solid rgba(34,211,238,.45);transform:rotate(-30deg)}
.card.mini{--cw:34px;box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 0 0 2px rgba(255,255,255,.85)}
.card.mini .cor,.card.mini .lab{display:none}
.card.mini .mid{left:8%;right:8%}
.flycard{position:fixed;z-index:60;pointer-events:none;transition:transform .55s cubic-bezier(.3,.9,.3,1),opacity .55s;will-change:transform}

/* ---------- Seitenleiste ---------- */
.side{border-left:1px solid var(--border);background:var(--glass);backdrop-filter:blur(12px);display:flex;flex-direction:column;min-height:0;padding:14px;gap:12px;overflow:auto}
.side h4{font-family:'Bebas Neue';letter-spacing:.14em;color:var(--c);margin:0 0 6px;font-size:17px}
.scores .sc{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:14px}
.scores .sc .bar{height:4px;border-radius:3px;background:linear-gradient(90deg,var(--p),var(--v));margin-top:3px}
.scores .sc .n{font-family:'Bebas Neue';font-size:20px}
.log{font-size:13px;line-height:1.45;color:var(--muted);display:flex;flex-direction:column;gap:3px;overflow:auto;min-height:80px;flex:1}
.log div{animation:fadein .4s}
.log div:last-child{color:var(--text)}
@keyframes fadein{from{opacity:0;transform:translateX(8px)}}
.reacts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.reacts button{border:1px solid var(--border);background:var(--bg2);border-radius:11px;padding:7px 0;font-size:20px;transition:.15s}
.reacts button:hover{border-color:var(--p);transform:scale(1.08)}
.reacts button.txt{font-family:'Bebas Neue';font-size:18px;color:var(--y)}
.rulesmini{display:flex;flex-wrap:wrap;gap:5px}
.rulesmini .tag{font-size:12px}

/* ---------- Overlays ---------- */
.ov{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(5,3,10,.72);backdrop-filter:blur(8px);animation:fadein2 .25s}
@keyframes fadein2{from{opacity:0}}
.ov .box{width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:22px;padding:22px;box-shadow:0 0 60px rgba(139,92,246,.35);animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.ov .box.wide{width:min(760px,100%)}
.ov h2{font-family:'Bebas Neue';font-weight:400;letter-spacing:.08em;font-size:38px;margin:0 0 4px;text-align:center}
.colors{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.colors button{height:96px;border-radius:18px;border:0;font-family:'Bebas Neue';font-size:30px;letter-spacing:.1em;color:#fff;transition:.2s;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.colors button:hover{transform:scale(1.04)}
.colors .r{background:linear-gradient(135deg,#ff6f88,var(--cr));box-shadow:0 0 26px rgba(255,61,94,.55)}
.colors .y{background:linear-gradient(135deg,#ffe066,var(--cy));box-shadow:0 0 26px rgba(255,194,26,.55);color:#2a1a00;text-shadow:none}
.colors .g{background:linear-gradient(135deg,#5df2a0,var(--cg));box-shadow:0 0 26px rgba(22,209,106,.55)}
.colors .b{background:linear-gradient(135deg,#6ea4ff,var(--cb));box-shadow:0 0 26px rgba(47,123,255,.55)}
.targets{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.targets button{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;border:1px solid var(--border);background:var(--bg2);text-align:left;transition:.2s}
.targets button:hover{border-color:var(--p);box-shadow:0 0 16px rgba(255,43,214,.3)}
.targets .av{width:40px;height:40px;font-size:20px}

.gtitle{font-family:'Bebas Neue';font-weight:400;text-align:center;line-height:.95;margin:0;font-size:clamp(56px,12vw,104px);letter-spacing:.04em;
  background:linear-gradient(100deg,#fff 10%,var(--p) 50%,var(--v) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(255,43,214,.5))}
:root[data-theme="light"] .gtitle{background:linear-gradient(100deg,#3b1f6b,var(--p),var(--v));-webkit-background-clip:text;background-clip:text}
.gsub{text-align:center;font-family:'Bebas Neue';letter-spacing:.24em;color:var(--c);font-size:20px;margin-bottom:12px}
.rres{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.rres .rr{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:var(--bg2);border:1px solid var(--border);animation:slidein .45s backwards}
.rres .rr.win{border-color:var(--y);box-shadow:0 0 18px rgba(250,204,21,.3)}
@keyframes slidein{from{transform:translateX(-30px);opacity:0}}
.rres .pl{font-family:'Bebas Neue';font-size:26px;width:28px;text-align:center;color:var(--muted)}
.rres .rr.win .pl{color:var(--y)}
.rres .cards{display:flex;flex-wrap:wrap;gap:3px;flex:1;min-width:0;justify-content:flex-end}
.rres .pts{font-family:'Bebas Neue';font-size:22px;min-width:70px;text-align:right}
.rres .pts small{display:block;font-size:13px;color:var(--muted);letter-spacing:.06em}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.stat{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:10px 6px;text-align:center}
.stat b{display:block;font-family:'Bebas Neue';font-weight:400;font-size:32px;line-height:1;background:linear-gradient(90deg,var(--p),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.podium{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:16px 0 8px}
.podium .pd{display:flex;flex-direction:column;align-items:center;gap:6px;width:110px}
.podium .blk{width:100%;border-radius:12px 12px 4px 4px;display:grid;place-items:center;font-family:'Bebas Neue';font-size:34px;color:#fff;animation:rise .8s cubic-bezier(.2,1.2,.4,1) backwards}
@keyframes rise{from{transform:scaleY(0);transform-origin:bottom}}
.podium .p1 .blk{height:110px;background:linear-gradient(180deg,var(--y),#ff8a00);box-shadow:0 0 26px rgba(250,204,21,.5)}
.podium .p2 .blk{height:80px;background:linear-gradient(180deg,#d6dcef,#8b93ad)}
.podium .p3 .blk{height:60px;background:linear-gradient(180deg,#f0a868,#a85b23)}
.podium .nm{font-weight:700;font-size:14px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.banner{position:fixed;left:50%;top:44%;z-index:70;pointer-events:none;font-family:'Bebas Neue';white-space:nowrap;text-align:center;
  font-size:clamp(56px,13vw,150px);letter-spacing:.04em;line-height:.9;color:#fff;transform:translate(-50%,-50%);
  text-shadow:0 0 30px var(--bc,var(--p)),0 0 60px var(--bc,var(--p)),0 6px 0 rgba(0,0,0,.35);animation:banner 1.35s cubic-bezier(.2,1.2,.3,1) forwards}
.banner small{display:block;font-size:.3em;letter-spacing:.2em;color:var(--bc,var(--c))}
@keyframes banner{0%{transform:translate(-50%,-50%) scale(.2) rotate(-8deg);opacity:0}18%{transform:translate(-50%,-50%) scale(1.12) rotate(2deg);opacity:1}
  30%{transform:translate(-50%,-50%) scale(1) rotate(0)}80%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
.flash{position:fixed;inset:0;z-index:65;pointer-events:none;background:var(--fc);animation:flash .6s ease-out forwards}
@keyframes flash{from{opacity:.42}to{opacity:0}}
.shakescreen{animation:sshake .5s}
@keyframes sshake{10%,50%,90%{transform:translate(-6px,3px)}30%,70%{transform:translate(6px,-3px)}}
#fxcanvas{position:fixed;inset:0;pointer-events:none;z-index:80}
.toasts{position:fixed;top:68px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;width:min(92vw,520px)}
.toast{padding:10px 18px;border-radius:14px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);animation:pop .3s;font-size:15px;text-align:center}
.toast.err{border-color:var(--r);box-shadow:0 0 20px rgba(255,77,109,.35)}
.toast.admin{border-color:var(--y);box-shadow:0 0 30px rgba(250,204,21,.45);font-size:17px}
.toast.admin b{font-family:'Bebas Neue';letter-spacing:.12em;color:var(--y);display:block;font-size:15px}
.reveal{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:12px 0}
.pausebar{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(5,3,10,.55);backdrop-filter:blur(4px)}
.pausebar div{font-family:'Bebas Neue';font-size:60px;letter-spacing:.12em;color:var(--y);text-shadow:0 0 30px rgba(250,204,21,.7)}
.rulesbox h3{font-family:'Bebas Neue';letter-spacing:.1em;color:var(--c);margin:16px 0 6px;font-size:22px}
.rulesbox p,.rulesbox li{color:var(--muted);line-height:1.5;font-size:14.5px}
.rulesbox b{color:var(--text)}
.drawertoggle{display:none}

/* ---------- Mobil ---------- */
@media (max-width:980px){
  .gbody{grid-template-columns:1fr}
  .side{position:fixed;right:0;top:0;bottom:0;width:min(320px,88vw);z-index:40;transform:translateX(105%);transition:transform .3s;box-shadow:-10px 0 40px rgba(0,0,0,.5);background:var(--card)}
  .side.open{transform:none}
  .drawertoggle{display:grid}
  .lobbywrap{grid-template-columns:1fr}
  .rulescroll{max-height:none}
}
@media (max-width:600px){
  :root{--cw:clamp(54px,17vw,70px)}
  .gbar{padding:8px 10px;gap:6px}
  .logo{font-size:24px}
  .gbar .chips .chip.hm{display:none}
  .ibtn{width:38px;height:38px}
  .opps{gap:6px;padding:8px 6px 2px}
  .seat{padding:5px 8px 5px 5px;gap:6px;border-radius:13px}
  .seat .av{width:32px;height:32px;font-size:17px}
  .seat .nm{font-size:12px;max-width:66px}
  .seat .meta{font-size:13px;gap:5px}
  .minifan{display:none}
  .tablering{width:92vw}
  .unobtn{width:70px;height:70px;font-size:24px;right:10px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .colors button{height:76px}
  .handwrap{padding:20px 6px 10px}
  .podium .pd{width:90px}
  .rres .cards .card.mini{--cw:26px}
  .seatcard{min-height:118px;padding:12px 8px}
  .seats{grid-template-columns:repeat(2,1fr)}
  .gbar [data-act=theme]{display:none}
  #lobby .gbar .chips{display:none}
  .rres .rr{flex-wrap:wrap}
  .rres .cards{order:5;flex-basis:100%;justify-content:flex-start;padding-left:38px}
}