/* ====== NeonChat - Cyberpunk Dark UI ====== */
:root{
  --bg:#06060f;
  --bg-2:#0c0c1c;
  --panel:#101024;
  --panel-2:#15152e;
  --line:#23234a;
  --text:#e8eaff;
  --muted:#8c8db0;
  --cyan:#00ffe0;
  --pink:#ff006e;
  --violet:#8338ec;
  --yellow:#ffbe0b;
  --green:#00f5a0;
  --red:#ff3366;
  --radius:14px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --font-display:'Chakra Petch',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-display);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  letter-spacing:.2px;
}
.bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(0,255,224,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,0,110,.04) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 70%);
}
.bg-glow{position:fixed;width:600px;height:600px;border-radius:50%;filter:blur(140px);pointer-events:none;z-index:0;opacity:.45}
.glow-1{background:var(--violet);top:-120px;left:-180px}
.glow-2{background:var(--cyan);bottom:-200px;right:-220px}

a{color:var(--cyan);text-decoration:none}
a:hover{color:#fff}
code{font-family:var(--font-mono);background:#0008;padding:2px 6px;border-radius:6px;color:var(--cyan)}
.muted{color:var(--muted)}
.small{font-size:.85em}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
  background:rgba(8,8,20,.7);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:20px;color:#fff}
.logo-mark{color:var(--cyan);text-shadow:0 0 12px var(--cyan);font-size:22px}
.logo-text{background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.site-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav-link{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;color:var(--text);font-size:14px;
  border:1px solid transparent;transition:border-color .2s,background .2s,transform .2s}
.nav-link:hover{border-color:var(--line);background:#ffffff08;transform:translateY(-1px)}
.nav-link.cta{background:linear-gradient(90deg,var(--cyan),var(--pink));color:#06060f;font-weight:700;border:none}
.nav-link.admin{color:var(--pink)}
.nav-link.danger{color:var(--red)}
.avatar-mini{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;font-family:var(--font-mono);font-size:11px;font-weight:700;color:#06060f}

/* ===== Main / Sections ===== */
.site-main{position:relative;z-index:1;padding:40px 24px 100px;max-width:1280px;margin:0 auto}

/* ===== Hero (Index) ===== */
.hero{padding:60px 0 30px}
.hero-tag{font-family:var(--font-mono);color:var(--cyan);letter-spacing:3px;font-size:12px;margin-bottom:14px;text-transform:uppercase}
.hero-title{font-size:clamp(40px,8vw,84px);line-height:1;margin:0 0 18px;font-weight:700}
.hero-title .grad{background:linear-gradient(90deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title .grad.pink{background:linear-gradient(90deg,var(--pink),var(--yellow));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{max-width:620px;color:var(--muted);font-size:18px;line-height:1.6;margin:0 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:28px;margin-top:60px;flex-wrap:wrap}
.hero-stats > div{display:flex;flex-direction:column;border-left:2px solid var(--cyan);padding-left:16px}
.hero-stats b{font-size:32px;font-family:var(--font-mono)}
.hero-stats span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:2px}

/* ===== Features ===== */
.features{margin-top:80px}
.sec-title{font-size:28px;margin:0 0 22px;display:flex;align-items:center;gap:10px}
.sec-title.sm{font-size:20px}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.feat{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,#10102488,#0a0a18cc);transition:transform .25s,border-color .25s}
.feat:hover{transform:translateY(-4px);border-color:var(--cyan)}
.feat i{font-size:26px;color:var(--cyan);margin-bottom:10px;display:block}
.feat h3{margin:6px 0;font-size:18px}
.feat p{margin:0;color:var(--muted);font-size:14px}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:14px;text-decoration:none;transition:transform .15s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(90deg,var(--cyan),var(--pink));color:#06060f;border:none;box-shadow:0 8px 30px rgba(255,0,110,.25)}
.btn-primary:hover{box-shadow:0 8px 40px rgba(0,255,224,.35)}
.btn-ghost{border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--cyan)}
.btn-danger{background:transparent;color:var(--red);border:1px solid var(--red)}
.btn-danger:hover{background:var(--red);color:#fff}
.btn.block{display:flex;width:100%;justify-content:center}
.btn.sm{padding:6px 12px;font-size:12px}

/* ===== Alerts ===== */
.alert{padding:12px 16px;border-radius:10px;margin-bottom:14px;font-size:14px;display:flex;align-items:center;gap:10px}
.alert.err{background:#ff336622;color:#ff86a4;border:1px solid #ff336644}
.alert.ok{background:#00f5a022;color:#7dffce;border:1px solid #00f5a044}

/* ===== Auth ===== */
.auth-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:30px 0}
.auth-card{background:linear-gradient(180deg,#13132c,#0a0a18);border:1px solid var(--line);border-radius:18px;padding:34px;width:100%;max-width:420px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.auth-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 0% 0%,var(--cyan)22,transparent 40%),radial-gradient(circle at 100% 100%,var(--pink)22,transparent 40%);pointer-events:none}
.auth-head{text-align:center;margin-bottom:24px;position:relative}
.auth-mark{font-size:28px;color:var(--cyan);text-shadow:0 0 12px var(--cyan)}
.auth-head h1{margin:8px 0 4px;font-size:28px}
.auth-head p{margin:0;color:var(--muted)}
.auth-form{display:flex;flex-direction:column;gap:14px;position:relative}
.auth-form.compact{gap:10px}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-family:var(--font-mono)}
.auth-form input,.auth-form textarea,.auth-form select,.row-form input,.row-form select{
  background:#06061588;border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text);font-family:var(--font-display);font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s
}
.auth-form input:focus,.auth-form textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,255,224,.12)}
.auth-form .row{display:flex;gap:10px}
.auth-form .row label{flex:1}
.auth-form input[type=color]{padding:4px;height:42px;cursor:pointer}
.auth-foot{margin-top:18px;text-align:center;color:var(--muted);font-size:14px}

/* ===== Dashboard ===== */
.dash-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.dash-hero h1{font-size:48px;margin:6px 0 4px}
.dash-side{display:flex;gap:12px}
.card-mini{display:flex;align-items:center;gap:12px;background:#10102499;border:1px solid var(--line);padding:12px 16px;border-radius:14px}
.card-mini i{color:var(--cyan);font-size:18px}
.card-mini b{font-size:20px;font-family:var(--font-mono);display:block}
.card-mini span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}

.channel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-bottom:40px}
.channel-grid.compact{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:28px}
.channel-grid.compact .channel-tile{min-height:140px;border-radius:14px}
.channel-grid.compact .channel-tile:hover{transform:translateY(-3px) scale(1.01)}
.channel-grid.compact .tile-content{padding:14px;min-height:140px}
.channel-grid.compact .tile-hash{font-size:22px}
.channel-grid.compact .tile-content h3{font-size:16px;margin:6px 0 2px}
.channel-grid.compact .tile-content p{font-size:11px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.channel-grid.compact .tile-foot{font-size:10px;gap:6px}
.channel-grid.compact .tile-foot .enter{padding:4px 8px;font-size:10px}
.channel-grid.compact .tile-foot span:not(.enter){display:none}
.channel-grid.compact .tile-foot .enter{margin-left:auto}
.channel-tile{position:relative;border-radius:18px;min-height:200px;overflow:hidden;cursor:pointer;border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.channel-tile:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 24px 60px #00000080}
.tile-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#00000020 0%,#00000099 100%)}
.tile-content{position:relative;padding:22px;display:flex;flex-direction:column;height:100%;min-height:200px;color:#fff}
.tile-top{display:flex;justify-content:space-between;align-items:center}
.tile-hash{font-size:34px;font-family:var(--font-mono);font-weight:700;color:#fff;text-shadow:0 0 16px #fff8}
.tile-content h3{margin:12px 0 4px;font-size:22px;text-shadow:0 2px 12px #000a}
.tile-content p{margin:0;color:#ffffffcc;font-size:13px;text-shadow:0 1px 6px #000a}
.tile-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-family:var(--font-mono);color:#ffffffd0}
.tile-foot .enter{background:#0c0c1ce6;color:var(--cyan);padding:6px 12px;border-radius:999px;display:flex;align-items:center;gap:6px}

/* ===== Members ===== */
.member-strip{margin-top:30px}

/* ===== Online Users Strip (Dashboard) ===== */
.online-users-strip{margin:8px 0 28px}
.ous-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.ous-head .online-icon{color:var(--green,#00f5a0)}
.ous-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:880px){.ous-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}
.ous-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 10px;background:#10102499;border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .25s}
.ous-card:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 14px 32px #00000080}
.ous-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--cyan);box-shadow:0 0 0 3px #00ffe022}
.ous-letter{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:24px;color:#0c0c1c}
.ous-status-dot{position:absolute;top:12px;right:12px;width:10px;height:10px;border-radius:50%;background:var(--green,#00f5a0);box-shadow:0 0 8px var(--green,#00f5a0)}
.ous-meta{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.ous-meta b{font-family:var(--font-display);font-size:14px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.member-list{display:flex;flex-wrap:wrap;gap:8px}
.member-chip{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#10102499;border:1px solid var(--line);border-radius:999px;color:var(--text);cursor:pointer;font-family:var(--font-display);font-size:14px;transition:border-color .2s,transform .15s}
.member-chip:hover{border-color:var(--cyan);transform:translateY(-1px)}
.member-chip.slim{padding:6px 10px;font-size:13px;width:100%;justify-content:flex-start}
.m-rank{font-size:11px;text-transform:uppercase;letter-spacing:1px;font-family:var(--font-mono)}
.tag{font-size:10px;padding:2px 8px;border-radius:999px;font-family:var(--font-mono);letter-spacing:1px}
.tag.staff{background:#ffbe0b22;color:var(--yellow);border:1px solid #ffbe0b44}
.tag.banned{background:#ff336622;color:var(--red);border:1px solid #ff336644}
.tag.banned.big{font-size:12px;padding:4px 10px}
.tag.ok{background:#00f5a022;color:var(--green);border:1px solid #00f5a044}

/* ===== Footer ===== */
.site-footer{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);flex-wrap:wrap;gap:12px}
.dot{margin:0 6px;color:var(--cyan)}
.foot-right{display:flex;gap:14px}
.foot-right a{color:var(--muted)}
.foot-right a:hover{color:var(--cyan)}

/* ===== Popup Pages ===== */
.popup{padding:0;margin:0;background:var(--bg);min-height:100vh}
.popup-shell{max-width:520px;margin:0 auto;padding:0}
.popup-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:#0a0a18cc;backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}
.popup-bar .x{background:transparent;border:1px solid var(--line);color:var(--text);width:32px;height:32px;border-radius:8px;cursor:pointer}
.popup-bar .x:hover{border-color:var(--red);color:var(--red)}

/* Profile popup */
.profile-head{text-align:center;padding:40px 24px 28px;position:relative}
.avatar-big{width:96px;height:96px;border-radius:24px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:36px;font-weight:700;color:#06060f;box-shadow:0 10px 40px #00000066}
.profile-head h2{margin:0 0 8px;font-size:26px}
.rank-pill{display:inline-block;padding:4px 14px;border-radius:999px;font-size:12px;letter-spacing:1px;font-family:var(--font-mono);border:1px solid;text-transform:uppercase}
.profile-body{padding:20px 24px 40px}
.profile-body h4{margin:14px 0 6px;font-size:14px;text-transform:uppercase;letter-spacing:2px;color:var(--cyan);font-family:var(--font-mono)}
.profile-body .bio{background:#0a0a1899;padding:14px;border-radius:10px;border:1px solid var(--line);color:#dcdef3}
.profile-body hr{border:none;border-top:1px solid var(--line);margin:20px 0}

/* ===== Channel popup ===== */
.popup-channel{padding:0}
.chan-wrap{display:flex;flex-direction:column;height:100vh;position:relative;isolation:isolate}
.chan-wrap::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--chan-bg, #06060f);
  background-size:cover;background-position:center;background-attachment:fixed;
}
.chan-wrap::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(6,6,15,0.15) 0%, rgba(6,6,15,0.28) 100%);
}
.chan-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:#fff;position:relative;overflow:hidden}
.chan-head-bg{position:absolute;inset:0;background:var(--chan-side-color, rgba(10,10,24,0.92));backdrop-filter:blur(10px);z-index:0}
.chan-head::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#00000055 0%,#00000022 60%,#00000044 100%);pointer-events:none;z-index:1}
.chan-info{display:flex;align-items:center;gap:14px;position:relative;z-index:2}
.chan-info .hash{font-family:var(--font-mono);font-size:36px;color:var(--cyan);text-shadow:0 0 12px var(--cyan)}
.chan-info h2{margin:0;font-size:20px}
.chan-info p{margin:0;font-size:13px;color:#fffd}
.chan-tools{display:flex;gap:8px;position:relative;z-index:2;flex-wrap:wrap}
.tool{background:#0c0c1ccc;border:1px solid #ffffff22;color:#fff;padding:8px 14px;border-radius:10px;cursor:pointer;font-family:var(--font-display);font-size:13px}
.tool:hover{border-color:var(--cyan);color:var(--cyan)}

.chan-body{flex:1;display:grid;grid-template-columns:1fr 260px;gap:0;min-height:0;position:relative}
.chan-stream{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:transparent;position:relative}
.messages{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.messages::-webkit-scrollbar{width:8px}
.messages::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

.msg{display:flex;gap:10px;align-items:flex-start;animation:fadeUp .25s ease;background:rgba(6,6,15,0.45);padding:8px 12px;border-radius:10px;backdrop-filter:blur(4px)}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg .avatar-mini{width:32px;height:32px;font-size:13px;flex-shrink:0;cursor:pointer}
.msg-inner{flex:1;min-width:0}
.msg-meta{display:flex;align-items:baseline;gap:8px;font-size:13px}
.msg-meta .name{font-weight:700;cursor:pointer}
.msg-meta .rank{font-size:10px;text-transform:uppercase;font-family:var(--font-mono);letter-spacing:1px}
.msg-meta .time{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.msg-text{margin-top:2px;color:#dcdef3;font-size:14px;word-break:break-word;line-height:1.5}
.msg.system .msg-text{color:var(--yellow);font-style:italic;font-family:var(--font-mono);font-size:13px}

.msg-form{display:flex;gap:8px;padding:14px;border-top:1px solid var(--line);background:rgba(8,8,22,0.92);backdrop-filter:blur(8px)}
.msg-form input{flex:1;background:#06061588;border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text);outline:none;font-family:var(--font-display);font-size:14px}
.msg-form input:focus{border-color:var(--cyan)}

.chan-side{padding:14px 12px;background:var(--chan-side-color, rgba(10,10,24,0.78));backdrop-filter:blur(10px);overflow-y:auto;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.chan-side h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--cyan);font-family:var(--font-mono);display:flex;align-items:center;justify-content:space-between;gap:8px}
.side-users{display:flex;flex-direction:column;gap:4px}

/* === Online userlist rows (clear vertical stacking) === */
.side-users .member-chip{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  width:100%;padding:8px 10px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);border-radius:10px;border-radius:10px;
  color:var(--text);cursor:pointer;text-align:left;
  font-family:var(--font-display);font-size:13px;
  transition:all .2s;justify-content:flex-start
}
.side-users .member-chip:hover{background:rgba(0,255,224,0.08);border-color:var(--cyan);transform:translateX(2px)}
.side-users .member-chip.is-online{border-left:3px solid var(--green)}
.side-users .member-chip .avatar-mini,
.side-users .member-chip .avatar-mini-img{width:30px;height:30px;flex-shrink:0;border-radius:8px;object-fit:cover}
.side-users .member-chip .m-name{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-users .member-chip .m-pts{font-family:var(--font-mono);font-size:11px;color:var(--yellow);display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
.side-users .member-chip .m-pts i{color:var(--yellow)}
.side-users .member-chip .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.side-users .member-chip .dot.online{background:var(--green);box-shadow:0 0 6px var(--green)}
.side-users .member-chip .dot.offline{background:var(--muted)}

/* Games overlay */
.games-overlay{position:fixed;inset:0;background:#000c;backdrop-filter:blur(8px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.games-overlay.hidden{display:none}
.games-panel{width:100%;max-width:640px;max-height:90vh;background:linear-gradient(180deg,#13132c,#0a0a18);border:1px solid var(--cyan);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 80px #00ffe033}
.games-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.games-bar h3{margin:0;font-size:18px}
.games-bar .x{background:transparent;border:1px solid var(--line);color:var(--text);width:32px;height:32px;border-radius:8px;cursor:pointer}
.games-tabs{display:flex;border-bottom:1px solid var(--line)}
.gtab{flex:1;background:transparent;border:none;color:var(--muted);padding:12px;cursor:pointer;font-family:var(--font-display);font-size:14px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.gtab:hover{color:var(--text)}
.gtab.active{color:var(--cyan);border-bottom-color:var(--cyan)}
.game-area{padding:20px;overflow:auto;flex:1}

/* Connect 4 */
.c4-board{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:#0a0a30;padding:10px;border-radius:12px;max-width:420px;margin:14px auto}
.c4-cell{aspect-ratio:1;background:#15152e;border-radius:50%;cursor:pointer;transition:background .15s,transform .1s}
.c4-cell:hover{background:#23234a}
.c4-cell.p1{background:radial-gradient(circle at 30% 30%,#ff86a4,#ff006e);box-shadow:inset 0 -4px 12px #00000080}
.c4-cell.p2{background:radial-gradient(circle at 30% 30%,#86fff5,#00ffe0);box-shadow:inset 0 -4px 12px #00000080}
.c4-info{text-align:center;color:var(--muted);margin-bottom:8px;font-family:var(--font-mono);font-size:13px}
.c4-info b{color:var(--cyan)}
.c4-controls{display:flex;justify-content:center;gap:10px;margin-top:14px}

/* Dice */
.dice-wrap{text-align:center}
.dice-form{display:flex;gap:10px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.dice-form input{width:80px;background:#06061588;border:1px solid var(--line);border-radius:8px;padding:10px;color:var(--text);text-align:center}
.dice-result{display:flex;justify-content:center;gap:10px;margin:20px 0;flex-wrap:wrap}
.die{width:64px;height:64px;background:linear-gradient(135deg,#fff,#d0d0e0);color:#06060f;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:28px;box-shadow:0 8px 20px #00000060;animation:roll .4s}
@keyframes roll{from{transform:rotate(-180deg) scale(.5);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}
.dice-log{margin-top:18px;text-align:left;font-family:var(--font-mono);font-size:12px;color:var(--muted);max-height:180px;overflow-y:auto}
.dice-log div{padding:4px 0;border-bottom:1px solid var(--line)}

/* Hangman */
.hang-wrap{text-align:center}
.hang-word{font-family:var(--font-mono);font-size:32px;letter-spacing:8px;margin:20px 0;color:var(--cyan)}
.hang-miss{color:var(--red);font-family:var(--font-mono);margin:10px 0}
.hang-keys{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin:18px auto;max-width:520px}
.hang-key{background:#15152e;border:1px solid var(--line);color:var(--text);padding:10px;border-radius:6px;cursor:pointer;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;transition:background .15s}
.hang-key:hover:not(:disabled){background:var(--cyan);color:#06060f}
.hang-key:disabled{opacity:.3;cursor:not-allowed}
.hang-key.hit{background:#00f5a022;color:var(--green);border-color:#00f5a044}
.hang-key.miss{background:#ff336622;color:var(--red);border-color:#ff336644}
.hang-status{font-size:16px;margin-top:14px;font-family:var(--font-mono)}
.hangman-svg{margin:0 auto;display:block}

/* Empty chat state */
.empty-chat{margin:auto;text-align:center;padding:40px 20px;color:var(--muted);animation:fadeUp .4s ease}
.empty-mark{font-size:48px;color:var(--cyan);text-shadow:0 0 24px var(--cyan);margin-bottom:14px;letter-spacing:-4px}
.empty-chat h3{margin:0 0 6px;color:var(--text);font-size:20px}
.empty-chat p{margin:0;font-size:14px;max-width:320px;margin:0 auto;line-height:1.5}
.messages{justify-content:center}
.messages:has(.msg){justify-content:flex-start}

/* Popup foot */
.popup-foot{padding:16px 24px 28px;border-top:1px solid var(--line);background:#08081299}
.admin-wrap h1{font-size:36px;margin:0 0 18px}
.admin-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:1100px){.admin-grid{grid-template-columns:1fr 1fr}}
.panel{background:linear-gradient(180deg,#10102499,#0a0a18cc);border:1px solid var(--line);border-radius:16px;padding:22px}
.panel h2{margin:0 0 16px;font-size:20px}
.row-form{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:center}
.row-form input,.row-form select{flex:1 1 140px;min-width:120px;padding:10px 12px}
.row-form input[type=file]{flex:1 1 160px}
.row-form .check{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap}
.row-form button{flex:0 0 auto}
@media(max-width:780px){.row-form input,.row-form select,.row-form button{flex:1 1 100%}}
.adm-table{width:100%;border-collapse:collapse;font-size:14px}
.adm-table th{text-align:left;padding:10px;border-bottom:1px solid var(--line);color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:1px}
.adm-table td{padding:10px;border-bottom:1px solid #ffffff0a;vertical-align:middle}
.adm-table select{background:#06061588;border:1px solid var(--line);color:var(--text);padding:6px 10px;border-radius:8px;font-family:var(--font-display)}
.adm-table .actions{display:flex;gap:6px}
.inline{display:inline-block;margin:0}

/* ===== New: Online, Photos, Friends, Tombola, Edit ===== */

/* status dots */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--muted);vertical-align:middle}
.dot.online{background:var(--green);box-shadow:0 0 8px var(--green)}
.dot.offline{background:#444;opacity:.6}
.online-icon{color:var(--green);text-shadow:0 0 8px var(--green)}

/* avatar-img variants */
.avatar-mini-img{width:26px;height:26px;border-radius:8px;object-fit:cover;flex-shrink:0;display:inline-block;vertical-align:middle}
.avatar-mini-img.clickable,.avatar-mini.clickable{cursor:pointer}
.msg .avatar-mini-img{width:32px;height:32px}

/* profile photo */
.avatar-big-wrap{position:relative;width:96px;height:96px;margin:0 auto 14px}
.avatar-big-photo{width:96px;height:96px;border-radius:24px;object-fit:cover;box-shadow:0 10px 40px #00000066}
.status-dot{position:absolute;bottom:4px;right:4px;width:18px;height:18px;border-radius:50%;border:3px solid var(--bg);background:#444}
.status-dot.online{background:var(--green);box-shadow:0 0 12px var(--green)}
.status-dot.offline{background:#555}
.status-line{margin:8px 0 0;color:var(--muted);font-style:italic;font-size:14px}

/* profile stats */
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 24px 16px;border-bottom:1px solid var(--line)}
.profile-stats > div{text-align:center;padding:10px 6px;background:#0a0a18aa;border-radius:10px}
.profile-stats i{color:var(--cyan);font-size:16px;display:block;margin-bottom:4px}
.profile-stats b{display:block;font-family:var(--font-mono);font-size:16px;color:#fff}
.profile-stats span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.info-row{padding:8px 0;color:var(--muted);font-size:14px}
.info-row i{color:var(--cyan);margin-right:8px}
.friend-actions{margin:14px 0}
.photo-form{display:flex;gap:8px;align-items:center;margin:8px 0 18px}
.photo-form input[type=file]{flex:1;background:#06061588;border:1px solid var(--line);border-radius:8px;padding:8px;color:var(--text);font-size:13px}

/* online member chips */
.member-chip.dim{opacity:.55}
.member-chip.dim:hover{opacity:1}
.member-chip.is-online{border-color:var(--green)}
.m-pts{font-size:11px;color:var(--yellow);font-family:var(--font-mono)}
.m-pts i{font-size:10px}

/* unread badge */
.tile-badges{display:flex;gap:6px;align-items:center}
.unread-badge{background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;font-family:var(--font-mono);min-width:22px;text-align:center;box-shadow:0 0 12px var(--red)}
.unread-badge.hidden{display:none}

/* points display in channel head */
.my-points{display:inline-flex;align-items:center;gap:6px;background:#0c0c1ccc;border:1px solid var(--yellow);color:var(--yellow);padding:6px 12px;border-radius:999px;font-family:var(--font-mono);font-size:13px}
.my-points b{color:#fff}

/* side sections */
.side-sec{margin-bottom:18px}
.side-sec h4{margin:0 0 10px;display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--cyan);font-family:var(--font-mono)}
.side-count{background:#15152e;color:var(--cyan);font-size:11px;padding:2px 8px;border-radius:999px}
.req-row{display:flex;align-items:center;gap:8px;padding:6px;background:#15152e;border-radius:8px;margin-bottom:6px;font-size:13px}
.req-row .m-name{flex:1}

/* tombola widget (top-right corner of chat-stream) */
.chan-stream{position:relative}
.game-widget,.tombola-widget{position:absolute;top:14px;width:260px;background:linear-gradient(180deg,#1a0033,#0a0a18);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);z-index:20;font-size:13px;animation:fadeUp .3s ease}
.tombola-widget{right:14px;border:2px solid var(--yellow);box-shadow:0 20px 60px rgba(255,190,11,.25)}
.pig-widget{left:14px;border:2px solid var(--pink);box-shadow:0 20px 60px rgba(255,0,110,.3)}
.game-widget.hidden,.tombola-widget.hidden{display:none}
.pig-head{background:#ff006e22 !important;border-bottom:1px solid var(--pink) !important;color:var(--pink) !important}
.pig-head .x{border-color:#ff006e66 !important;color:var(--pink) !important}
.pw-pot{text-align:center;font-family:var(--font-mono);color:var(--yellow);font-size:18px;padding:8px;background:#0008;border-radius:8px;margin-bottom:8px}
.pw-pot b{font-size:22px;color:#fff;text-shadow:0 0 12px var(--yellow)}
.pw-pig{text-align:center;padding:6px 0}
.pw-win{text-align:center;color:var(--green);font-weight:700;font-size:14px;padding:8px;background:#00f5a022;border-radius:8px;margin-bottom:8px;animation:fadeUp .3s}
.pw-last{text-align:center;color:var(--muted);font-size:12px;margin-bottom:8px;font-family:var(--font-mono)}
.pw-last b{color:#fff}
.pw-hint{text-align:center;color:var(--muted);font-size:12px;margin-bottom:8px}
.pw-dice{display:flex;gap:4px;justify-content:center;margin-bottom:10px;min-height:30px}
.die-mini{width:28px;height:28px;background:#fff;color:#06060f;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:14px;border:2px solid #444}
.tombola-widget.hidden{display:none}
.tw-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#ffbe0b22;border-bottom:1px solid var(--yellow);color:var(--yellow);font-family:var(--font-mono);text-transform:uppercase;font-size:12px;letter-spacing:1px}
.tw-head .x{background:transparent;border:1px solid #ffbe0b66;color:var(--yellow);width:24px;height:24px;border-radius:6px;cursor:pointer}
.tw-body{padding:12px 14px}
.tw-countdown{font-family:var(--font-mono);font-size:32px;text-align:center;color:var(--yellow);text-shadow:0 0 16px var(--yellow);margin:6px 0 12px;font-weight:700}
.tw-row{display:flex;justify-content:space-between;padding:4px 0;color:var(--muted);font-size:12px}
.tw-row b{color:#fff;font-family:var(--font-mono)}
.tw-buy{display:flex;gap:6px;margin-top:10px}
.tw-buy input{width:60px;background:#06061588;border:1px solid var(--line);color:#fff;padding:8px;border-radius:8px;text-align:center;font-family:var(--font-mono)}
.tw-buy .btn{flex:1;padding:8px 10px;font-size:12px;justify-content:center}
.tw-recent{margin-top:10px;padding:8px 10px;background:rgba(255,190,11,.06);border:1px solid rgba(255,190,11,.25);border-radius:10px}
.tw-recent-title{font-size:11px;color:var(--yellow);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.tw-recent-list{display:flex;flex-direction:column;gap:3px;max-height:96px;overflow:auto}
.tw-recent-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:2px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.tw-recent-row:last-child{border-bottom:0}
.tw-recent-name{font-weight:600}
.tw-recent-count{color:#fff;font-family:var(--font-mono);font-size:11px;opacity:.85}
.tw-recent-confirm{margin-top:6px;padding:6px 8px;border-radius:8px;background:rgba(40,255,140,.12);border:1px solid rgba(40,255,140,.35);color:#9cffc7;font-size:12px;text-align:center;animation:fadeUp .25s ease}
.tw-recent-confirm.hidden{display:none}
.tw-history{margin-top:14px;font-size:11px;color:var(--muted)}
.tw-history h5{margin:0 0 6px;color:var(--cyan);text-transform:uppercase;letter-spacing:1px;font-size:11px;font-family:var(--font-mono)}
.hist-row{padding:4px 0;border-bottom:1px solid #ffffff10;font-family:var(--font-mono);word-break:break-word}
.hist-row b{color:var(--yellow);margin-right:6px}

/* tombola progress bar (oben in der Box) */
.tw-progress-wrap{position:relative;height:22px;margin:0 14px 4px;border:1px solid #ffbe0b66;background:#06061588;border-radius:8px;overflow:hidden}
.tw-progress{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#ffbe0b,#ff006e);box-shadow:0 0 14px rgba(255,190,11,.5);transition:width 1s linear;width:0%}
.tw-progress-label{position:relative;font-family:var(--font-mono);font-size:12px;color:#fff;text-align:center;line-height:22px;text-shadow:0 0 6px #000,0 1px 2px #000;letter-spacing:1px;font-weight:700}

/* tombola wheel (Drehrad) */
.tw-wheel-stage{padding:10px 14px 4px;text-align:center}
.tw-wheel-stage.hidden{display:none}
.tw-wheel{position:relative;width:140px;height:140px;margin:0 auto 8px;border-radius:50%;background:conic-gradient(from 0deg,#ffbe0b,#ff006e,#8338ec,#3a86ff,#06d6a0,#ffbe0b,#ff006e,#8338ec,#3a86ff,#06d6a0,#ffbe0b);box-shadow:0 0 30px rgba(255,190,11,.55),inset 0 0 18px rgba(0,0,0,.6);border:3px solid #ffbe0b}
.tw-wheel.spinning{animation:twSpin 0.55s linear infinite}
@keyframes twSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.tw-wheel-inner{position:absolute;inset:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1a0033,#06060f);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-mono);font-weight:700;font-size:14px;text-shadow:0 0 10px var(--yellow);padding:6px;text-align:center;word-break:break-word;line-height:1.15}
.tw-wheel.spinning .tw-wheel-inner{animation:twSpinBack 0.55s linear infinite}
@keyframes twSpinBack{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
.tw-wheel-pointer{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:14px solid #fff;filter:drop-shadow(0 0 6px #fff)}
.tw-wheel-title{color:var(--yellow);font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.tw-wheel-list{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:6px}
.tw-chip{padding:2px 8px;border-radius:999px;border:1px solid var(--yellow);font-size:11px;font-family:var(--font-mono);background:#0008}

/* admin edit form */
.edit-form{background:#0a0a18;padding:16px;border-radius:12px;border:1px solid var(--cyan);margin-bottom:16px;display:flex;flex-direction:column;gap:10px}
.edit-form h3{margin:0 0 6px;color:var(--cyan);font-size:16px}
.edit-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-family:var(--font-mono)}
.edit-form input[type=text],.edit-form input:not([type]),.edit-form input[type=file]{background:#06061588;border:1px solid var(--line);color:var(--text);padding:8px 10px;border-radius:8px}
.edit-form .row-actions{display:flex;gap:8px;margin-top:8px}
.edit-form .check{flex-direction:row;align-items:center;gap:6px}
.thumb img{width:160px;border-radius:8px;border:1px solid var(--line);margin-top:4px}
.thumb-mini{width:48px;height:32px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}

/* admin points form */
.pts-form{display:flex;align-items:center;gap:6px}
.pts-cur{color:var(--yellow);font-family:var(--font-mono);font-weight:700;min-width:30px}
.pts-inp{width:50px;background:#06061588;border:1px solid var(--line);color:var(--text);padding:4px 6px;border-radius:6px;font-family:var(--font-mono);text-align:center}

.empty-state{padding:18px;text-align:center;color:var(--muted);font-style:italic;font-size:14px;width:100%}

/* ===== Smiley Box ===== */
.smiley-btn{background:transparent;border:1px solid var(--line);color:var(--cyan);font-size:18px;padding:0 12px;border-radius:10px;cursor:pointer;transition:all .15s}
.smiley-btn:hover{border-color:var(--cyan);background:#00ffe014}
.smiley-box{position:absolute;bottom:70px;left:14px;right:14px;background:linear-gradient(180deg,#13132c,#0a0a18);border:1px solid var(--cyan);border-radius:14px;padding:12px;box-shadow:0 -10px 30px rgba(0,255,224,.18);z-index:15;animation:fadeUp .25s ease;max-height:240px;overflow:auto}
.smiley-box.hidden{display:none}
.sb-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--cyan)}
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}
.smiley-pick{background:#15152e;border:1px solid var(--line);color:#fff;font-size:22px;padding:8px;border-radius:8px;cursor:pointer;transition:all .15s}
.smiley-pick:hover{border-color:var(--cyan);background:#00ffe014;transform:scale(1.1)}

/* ===== Shop popup ===== */
.popup-shop .popup-shell{max-width:560px}
.shop-head{padding:16px 24px;border-bottom:1px solid var(--line);text-align:center}
.shop-points{font-family:var(--font-mono);color:var(--yellow);font-size:22px;margin-bottom:6px}
.shop-points b{color:#fff;text-shadow:0 0 12px var(--yellow)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:20px}
.shop-item{background:linear-gradient(180deg,#13132c,#0a0a18);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;transition:border-color .25s,transform .2s}
.shop-item:hover{border-color:var(--cyan);transform:translateY(-2px)}
.shop-item.owned{border-color:var(--green);background:linear-gradient(180deg,#13132c,#0a0a18 70%,#00f5a015)}
.si-emoji{font-size:36px;margin-bottom:8px;line-height:1}
.si-emoji.big{font-size:32px}
.si-name{color:#fff;font-weight:600;margin-bottom:8px;font-size:14px}
.si-price .btn{width:100%;justify-content:center}
.owned-tag{background:#00f5a022;color:var(--green);border:1px solid #00f5a066;font-size:11px;padding:4px 10px;border-radius:999px;font-family:var(--font-mono);display:inline-block}
.shop-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:12px}
.shop-admin-item{display:flex;align-items:center;gap:10px;padding:10px;background:#0a0a18;border:1px solid var(--line);border-radius:10px}
.shop-admin-item > div{flex:1}
.shop-admin-item b{display:block;color:#fff;font-size:14px}


/* ===== PM Toast (channel) ===== */
.pm-toast{position:fixed;bottom:24px;right:24px;width:340px;background:linear-gradient(135deg,#1a0033,#0a0a18);border:2px solid var(--pink);border-radius:14px;padding:14px;box-shadow:0 12px 40px rgba(255,0,110,.4);z-index:1000;animation:fadeUp .3s ease}
.pm-toast-body{font-size:14px;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.pm-toast-body i{color:var(--pink);font-size:20px;flex-shrink:0}
.pm-toast-body b{color:#fff}
.pm-toast-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.pm-toast-actions .x{background:transparent;border:1px solid var(--line);color:var(--muted);width:30px;height:30px;border-radius:8px;cursor:pointer}
.pm-toast-actions .x:hover{color:var(--red);border-color:var(--red)}

/* ===== PM Popup ===== */
.popup-pm{display:flex;flex-direction:column;min-height:100vh;height:100vh;margin:0}
.pm-wrap{display:flex;flex-direction:column;height:100vh}
.pm-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);position:relative}
.pm-head::before{content:"";position:absolute;inset:0;background:#000a;z-index:0}
.pm-with{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.pm-head .x{background:transparent;border:1px solid var(--line);color:var(--text);width:32px;height:32px;border-radius:8px;cursor:pointer;position:relative;z-index:1}
.pm-head .x:hover{border-color:var(--red);color:var(--red)}
.pm-stream{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.pm-row{display:flex}
.pm-row.mine{justify-content:flex-end}
.pm-row.theirs{justify-content:flex-start}
.pm-bubble{max-width:75%;padding:10px 14px;border-radius:14px;font-size:14px}
.pm-row.mine .pm-bubble{background:linear-gradient(135deg,#00ffe022,#8338ec22);border:1px solid var(--cyan);border-bottom-right-radius:4px;color:#fff}
.pm-row.theirs .pm-bubble{background:#15152e;border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--text)}
.pm-text{word-break:break-word;line-height:1.5}
.pm-time{font-family:var(--font-mono);font-size:10px;color:var(--muted);margin-top:4px;text-align:right}
.pm-form{display:flex;gap:8px;padding:14px;border-top:1px solid var(--line);background:#0a0a18}
.pm-form input[name=text]{flex:1;background:#06061588;border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text);outline:none;font-family:var(--font-display);font-size:14px}
.pm-form input[name=text]:focus{border-color:var(--cyan)}

@media (max-width:780px){
  .pm-toast{left:10px;right:10px;width:auto;bottom:10px}
  .profile-stats{grid-template-columns:repeat(2,1fr)}
}

/* User channels */
.user-channels-sec{margin-top:30px}
.uc-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.channel-tile.small{min-height:160px}
.channel-tile.small .tile-content{min-height:160px;padding:18px}
.channel-tile.small h3{font-size:18px}

/* Team display in profile */
.team-row{display:flex;align-items:center;gap:10px;padding:10px 24px;border-bottom:1px solid var(--line);justify-content:center}
.team-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid;font-family:var(--font-display);font-weight:600;font-size:13px;cursor:pointer;transition:transform .15s}
.team-pill:hover{transform:translateY(-1px)}
.team-mark{font-size:42px;text-align:center;margin-bottom:8px;letter-spacing:-6px}
.team-head{padding:30px 24px 20px;text-align:center;border-bottom:1px solid var(--line)}
.team-head h2{margin:0 0 4px;font-size:24px}
.team-members{display:flex;flex-direction:column;gap:6px}
.team-swatch{display:inline-block;width:24px;height:24px;border-radius:6px;border:1px solid #ffffff22}

/* Smiley info popup */
.smi-head{padding:30px 20px 20px;text-align:center;border-bottom:1px solid var(--line)}
.smi-big{font-size:72px;line-height:1;margin-bottom:10px;filter:drop-shadow(0 6px 20px #ff006e40)}
.smi-head h2{margin:0 0 8px;color:#fff;font-size:22px}
.smi-price{font-family:var(--font-mono);color:var(--yellow);margin-bottom:14px;font-size:16px}
.smi-price b{color:#fff;text-shadow:0 0 12px var(--yellow)}
.owned-tag.big{font-size:13px;padding:6px 14px}

/* Smiley clickable in chat */
.smiley-link{cursor:pointer;display:inline-block;transition:transform .12s;padding:0 1px}
.smiley-link:hover{transform:scale(1.4);text-shadow:0 0 12px var(--cyan)}

/* msg-form needs relative positioning for smiley-box */
.chan-stream{position:relative}
.msg-form{position:relative}

/* Floating Tauschbörse button (bottom-right of chat-stream) */
.floating-actions{position:absolute;bottom:80px;right:14px;display:flex;flex-direction:row;gap:8px;z-index:18;align-items:center}
.market-btn{background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;border:none;padding:10px 14px;border-radius:999px;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:12px;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(131,56,236,.5);transition:transform .15s,box-shadow .25s}
.market-btn.photomeet{background:linear-gradient(135deg,#00bbf9,#00f5d4);color:#06060f;box-shadow:0 8px 24px rgba(0,245,212,.4)}
.market-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,0,110,.5)}
.market-btn i{font-size:14px}

/* Sidebar Toolbox */
.side-tools{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.tool-btn{background:#15152e;border:1px solid var(--line);color:var(--text);padding:10px 6px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--font-display);font-size:10px;position:relative;transition:all .15s}
.tool-btn:hover{border-color:var(--cyan);background:#00ffe014}
.tool-btn i{font-size:18px;color:var(--cyan)}
.tool-btn span{font-size:11px;color:var(--text)}
.tool-btn.alert{border-color:#ff336644}
.tool-btn.alert i{color:var(--red)}
.tool-btn.alert:hover{background:#ff336622;border-color:var(--red)}
.tool-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:999px;font-family:var(--font-mono);min-width:18px;text-align:center}
.channel-switch{display:flex;gap:6px}
.channel-switch select{flex:1;background:#06061588;border:1px solid var(--line);color:var(--text);padding:8px;border-radius:8px;font-family:var(--font-display);font-size:12px}
.channel-switch .btn{padding:8px 14px;font-size:12px}

/* Photomeet */
.popup-photomeet .popup-shell{max-width:560px}
.pm-grid{padding:14px 20px;display:flex;flex-direction:column;gap:8px}
.pm-card{display:flex;align-items:center;gap:12px;background:#10102488;border:1px solid var(--line);border-radius:12px;padding:10px;transition:border-color .2s}
.pm-card:hover{border-color:var(--cyan)}
.pm-img{width:60px;height:60px;border-radius:10px;object-fit:cover;flex-shrink:0;border:1px solid var(--line)}
.pm-info{flex:1;min-width:0}
.pm-info b{font-size:15px;display:block;margin-bottom:2px}
.pm-actions{padding:0 20px 14px;display:flex;gap:8px;justify-content:space-between}

/* Market popup — modern */
.popup-market .popup-shell{max-width:680px}
.market-shell{box-shadow:0 30px 100px #00ffe022,0 0 0 1px #00ffe022 inset}
.market-tab{min-height:320px;animation:fadeUp .28s ease}
.market-listings{padding:14px 20px;display:flex;flex-direction:column;gap:10px}
.market-row{display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:linear-gradient(135deg,#10102488,#0a0a18cc);
  border:1px solid var(--line);border-radius:14px;
  transition:transform .2s, border-color .2s, box-shadow .2s;
  animation:rowIn .35s cubic-bezier(.2,.8,.2,1) both;position:relative;overflow:hidden}
.market-row::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#00ffe008,transparent);transform:translateX(-100%);transition:transform .6s}
.market-row:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 10px 26px #00ffe022}
.market-row:hover::before{transform:translateX(100%)}
.mr-emoji{font-size:32px;line-height:1;flex-shrink:0;filter:drop-shadow(0 4px 10px #0008);transition:transform .3s}
.market-row:hover .mr-emoji{transform:scale(1.15) rotate(-6deg)}
.mr-info{flex:1;min-width:0}
.mr-info strong{color:#fff;display:block;font-size:14px}
.mr-seller{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px}
.mr-price{font-family:var(--font-mono);color:var(--yellow,#ffd54a);font-weight:700;font-size:16px;white-space:nowrap;
  text-shadow:0 0 12px #ffd54a55}
.mr-actions{flex-shrink:0}
.pulse-btn{animation:pulseGlow 2.4s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 8px 30px rgba(255,0,110,.25)}50%{box-shadow:0 8px 40px rgba(0,255,224,.55)}}
@keyframes rowIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

.sell-form{padding:0 20px 16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sell-form select,.sell-form input{background:#06061588;border:1px solid var(--line);color:var(--text);padding:10px 12px;border-radius:10px;font-family:var(--font-display);font-size:14px;transition:border-color .15s,box-shadow .15s}
.sell-form select:focus,.sell-form input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,255,224,.15);outline:none}
.sell-form select{flex:1 1 200px;min-width:160px}
.sell-form input[type=number]{width:120px}
.sec-h{padding:14px 20px 4px;color:var(--cyan);text-transform:uppercase;letter-spacing:2px;font-size:12px;font-family:var(--font-mono);margin:0;display:flex;align-items:center;gap:8px}

/* Hero / eigener Rang */
.market-hero{display:grid;grid-template-columns:1fr 1.4fr;gap:14px;padding:16px 20px;
  background:radial-gradient(circle at 0% 0%, #00ffe014, transparent 50%),
             radial-gradient(circle at 100% 100%, #ff61d214, transparent 50%);
  border-bottom:1px solid var(--line)}
.mh-left{display:flex;flex-direction:column;justify-content:center;gap:6px}
.mh-points{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:22px;color:#fff}
.mh-points i{color:var(--yellow,#ffd54a);text-shadow:0 0 12px #ffd54a88}
.mh-sub{margin:0}
.mh-rank{display:flex;gap:12px;align-items:center;padding:12px;background:#06061566;border:1px solid var(--line);border-radius:14px;position:relative;overflow:hidden}
.mh-rank-badge{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:28px;flex-shrink:0;
  box-shadow:0 6px 20px #0008, inset 0 0 0 1px #ffffff22;animation:badgeFloat 3s ease-in-out infinite}
@keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.mh-rank-info{flex:1;min-width:0}
.mh-rank-name{font-family:var(--font-display);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:1px}
.mh-rank-stats{font-family:var(--font-mono);font-size:12px;color:#cfd2dd;margin-top:2px}
.mh-rank-stats i{color:var(--cyan);margin-right:2px}
.mh-progress{margin-top:8px;height:6px;border-radius:999px;background:#0008;overflow:hidden}
.mh-progress-bar{height:100%;width:0%;border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 12px currentColor}
.mh-next{margin-top:4px;font-size:11px}

/* Rank pill (auf Listings + Top) */
.rank-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;
  color:#06060f;font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.5px;
  box-shadow:0 4px 14px #0006, inset 0 0 0 1px #ffffff33}
.rank-pill .rp-ico{font-size:12px;line-height:1;filter:drop-shadow(0 1px 2px #0006)}
.rank-pill .rp-name{text-transform:uppercase}

/* Top-Liste */
.top-row{background:linear-gradient(135deg,#15152e,#0a0a18)}
.top-row.pos-1{border-color:#ffd54a;box-shadow:0 8px 30px #ffd54a22}
.top-row.pos-2{border-color:#c0c0c0;box-shadow:0 8px 30px #c0c0c022}
.top-row.pos-3{border-color:#cd7f32;box-shadow:0 8px 30px #cd7f3222}
.top-pos{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:#0008;font-family:var(--font-mono);color:var(--cyan);flex-shrink:0}

/* Rangsystem-Legende */
.rank-legend{padding:0 20px 16px}
.rl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:8px 0}
.rl-item{display:flex;align-items:center;gap:10px;padding:10px;background:#06061566;border:1px solid var(--line);border-radius:12px;transition:transform .15s,border-color .15s}
.rl-item:hover{transform:translateY(-2px);border-color:var(--cyan)}
.rl-ico{font-size:24px}
.rl-item b{display:block;font-size:13px;color:#fff}

/* Toasts + Konfetti */
.toast-wrap{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);z-index:9999;pointer-events:none;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:linear-gradient(135deg,#13132c,#0a0a18);border:1px solid var(--cyan);color:#fff;
  padding:12px 18px;border-radius:12px;font-family:var(--font-display);font-size:14px;
  box-shadow:0 14px 40px #00ffe033;animation:toastIn .3s cubic-bezier(.2,.8,.2,1);display:flex;align-items:center;gap:8px;pointer-events:auto}
.toast i{color:var(--cyan)}
.toast.toast-err{border-color:#ff4467;box-shadow:0 14px 40px #ff446733}
.toast.toast-err i{color:#ff4467}
.toast.out{animation:toastOut .45s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.95)}}
.confetti{position:fixed;left:50%;bottom:140px;width:8px;height:14px;border-radius:2px;
  animation:confettiFly 1.2s cubic-bezier(.2,.7,.3,1) forwards;pointer-events:none;z-index:9998}
@keyframes confettiFly{from{opacity:1;transform:translate(0,0) rotate(0)}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}

.empty-mkt{animation:fadeUp .4s ease}

@media (max-width:780px){
  .market-btn{padding:8px 10px;font-size:11px;bottom:72px}
  .sell-form select,.sell-form input,.sell-form .btn{flex:1 1 100%}
  .market-hero{grid-template-columns:1fr}
  .popup-market .popup-shell{max-width:100%}
}



/* ===== Mobile ===== */
@media (max-width:780px){
  .site-nav{gap:4px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .site-nav::-webkit-scrollbar{display:none}
  .nav-link{padding:7px 10px;font-size:12px;white-space:nowrap}
  .nav-link.user .avatar-mini{display:none}
  .logo-text{font-size:17px}
  .site-main{padding:24px 14px 80px}
  .hero{padding:30px 0 10px}
  .hero-stats{gap:18px}
  .chan-body{grid-template-columns:1fr}
  .chan-side{display:none}
  .dash-hero h1{font-size:32px}
  .hang-keys{grid-template-columns:repeat(7,1fr)}
  .messages{padding:12px}
  .games-panel{max-height:96vh}
  .adm-table{font-size:12px}
  .adm-table td,.adm-table th{padding:6px}
  .chan-head{padding:14px}
  .chan-info h2{font-size:17px}
  .chan-info p{font-size:12px}
  .chan-info .hash{font-size:28px}
  .tool{padding:6px 10px;font-size:12px}
  .tombola-widget{position:absolute;top:8px;right:8px;left:8px;width:auto}
  .pig-widget{position:absolute;top:auto;bottom:auto;width:auto;left:8px;right:8px}
  .pig-widget.hidden{display:none}
  .pig-widget:not(.hidden) ~ .tombola-widget:not(.hidden){display:none}
  .profile-stats{grid-template-columns:1fr 1fr 1fr;gap:4px;padding:0 14px 12px}
  .profile-stats > div{padding:8px 4px}
  .my-points{font-size:11px;padding:4px 8px}
  .chan-side{display:none}
  .row-form{grid-template-columns:1fr}
}
tify-content:center;margin-top:10px}
.die.mini{position:relative;width:50px;height:50px;background:linear-gradient(135deg,#fff,#d0d0e0);color:#06060f;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:22px;border:2px solid #444;box-shadow:0 4px 12px #00000060}
.die.mini .dr-user{position:absolute;bottom:-18px;left:0;right:0;font-size:10px;color:var(--muted);font-family:var(--font-display);font-weight:400}

/* cmd popup */
.popup-cmd .cmd-body{padding:20px 24px}
.cmd-title{margin:0 0 16px;font-size:24px;color:#fff;border-bottom:1px solid var(--line);padding-bottom:10px}
.cmd-content{color:#dcdef3;line-height:1.6}
.cmd-content h2{color:var(--cyan);margin:20px 0 8px;font-size:18px}
.cmd-content h3{color:var(--cyan);margin:14px 0 6px;font-size:15px}
.cmd-content p{margin:8px 0}
.cmd-content b{color:var(--yellow)}
.cmd-content ul,.cmd-content ol{padding-left:20px}
.cmd-content code{background:#0008;color:var(--cyan);padding:2px 6px;border-radius:6px;font-family:var(--font-mono);font-size:13px}

/* ===== Mobile ===== */
@media (max-width:780px){
  .site-nav{gap:4px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .site-nav::-webkit-scrollbar{display:none}
  .nav-link{padding:7px 10px;font-size:12px;white-space:nowrap}
  .nav-link.user .avatar-mini{display:none}
  .logo-text{font-size:17px}
  .site-main{padding:24px 14px 80px}
  .hero{padding:30px 0 10px}
  .hero-stats{gap:18px}
  .chan-body{grid-template-columns:1fr}
  .chan-side{display:none}
  .dash-hero h1{font-size:32px}
  .hang-keys{grid-template-columns:repeat(7,1fr)}
  .messages{padding:12px}
  .games-panel{max-height:96vh}
  .adm-table{font-size:12px}
  .adm-table td,.adm-table th{padding:6px}
  .chan-head{padding:14px}
  .chan-info h2{font-size:17px}
  .chan-info p{font-size:12px}
  .chan-info .hash{font-size:28px}
  .tool{padding:6px 10px;font-size:12px}
  .tombola-widget{top:auto;bottom:80px;right:10px;left:10px;width:auto}
  .profile-stats{grid-template-columns:1fr 1fr 1fr;gap:4px;padding:0 14px 12px}
  .profile-stats > div{padding:8px 4px}
  .my-points{font-size:11px;padding:4px 8px}
  .chan-side{display:none}
  .row-form{grid-template-columns:1fr}
}

/* ====== Themes (data-theme on body) ====== */
body[data-theme="synthwave"]{
  --bg:#1a0033; --bg-2:#22043f; --panel:#2a0a4d; --panel-2:#3a0e63;
  --line:#5b2480; --cyan:#ff6ec7; --pink:#ff61d2; --violet:#b14aed;
  --yellow:#ffd166; --green:#06d6a0; --red:#ff4d6d; --text:#fff0fb; --muted:#c9aede;
}
body[data-theme="matrix"]{
  --bg:#000a04; --bg-2:#001a0a; --panel:#001a0e; --panel-2:#002414;
  --line:#0a3a1a; --cyan:#39ff14; --pink:#88ff44; --violet:#00ff66;
  --yellow:#aaff33; --green:#00ff88; --red:#ff3a3a; --text:#caffd5; --muted:#5fa66d;
}
body[data-theme="crimson"]{
  --bg:#0a0204; --bg-2:#15060b; --panel:#1d0810; --panel-2:#2a0b16;
  --line:#4a1024; --cyan:#ff5577; --pink:#ff1744; --violet:#b71c4d;
  --yellow:#ffcc66; --green:#88ddaa; --red:#ff4365; --text:#ffe9ee; --muted:#c98695;
}
/* Theme swatches (settings) */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:10px}
.theme-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:14px;background:#ffffff05;border:1px solid var(--line);border-radius:12px;
  cursor:pointer;color:var(--text);text-align:left;transition:all .2s}
.theme-card:hover{transform:translateY(-2px);border-color:var(--cyan)}
.theme-card.active{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan), 0 0 24px #00ffe055 inset}
.tc-swatch{display:block;width:100%;height:48px;border-radius:8px;border:1px solid var(--line)}
.tc-cyberpunk{background:linear-gradient(135deg,#0f0c29,#00ffe0 50%,#ff006e)}
.tc-synthwave{background:linear-gradient(135deg,#1a0033,#ff6ec7 50%,#b14aed)}
.tc-matrix{background:linear-gradient(135deg,#000a04,#39ff14 50%,#001a0e)}
.tc-crimson{background:linear-gradient(135deg,#0a0204,#ff1744 50%,#4a1024)}

/* ====== Photomeet sidebar strip ====== */
.side-photomeet h4{display:flex;align-items:center;justify-content:space-between;gap:8px}
.side-mini-btn{margin-left:auto;background:transparent;border:1px solid var(--line);color:var(--muted);
  width:24px;height:24px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:11px;transition:all .2s}
.side-mini-btn:hover{color:var(--cyan);border-color:var(--cyan)}
.photomeet-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px}
.pms-card{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px;background:#ffffff05;border:1px solid var(--line);border-radius:10px;cursor:pointer;
  color:var(--text);transition:all .2s;position:relative;text-decoration:none}
.pms-card:hover{transform:scale(1.05);border-color:var(--pink);box-shadow:0 0 16px var(--pink)33}
.pms-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.pms-name{font-size:10px;font-weight:600;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.pms-card .dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;border:2px solid var(--bg);box-shadow:0 0 6px currentColor}
.pms-card .dot.online{background:var(--green);color:var(--green)}
.pms-card .dot.offline{background:var(--muted);color:var(--muted)}

/* ====== Image upload in chat ====== */
.img-preview{position:absolute;left:14px;right:14px;bottom:74px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:14px;
  box-shadow:var(--shadow);z-index:9}
.img-preview img{max-width:160px;max-height:160px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
.img-preview .ip-form{flex:1;display:flex;flex-direction:column;gap:8px}
.img-preview input{background:#06061588;border:1px solid var(--line);color:var(--text);padding:8px 10px;border-radius:8px;font-family:var(--font-mono)}
.img-preview .ip-actions{display:flex;gap:8px}
.msg-image-wrap{display:block;margin-top:6px}
.msg-image{max-width:320px;max-height:280px;border-radius:10px;border:1px solid var(--line);cursor:zoom-in;transition:transform .2s}
.msg-image:hover{transform:scale(1.02);box-shadow:0 0 24px var(--cyan)44}

/* ====== Channel edit popup ====== */
.popup-channeledit .popup-shell{max-width:600px}
.ce-pick{padding:20px}
.ce-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:14px}
.ce-pick-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 16px;
  background:#ffffff05;border:1px solid var(--line);border-radius:12px;color:var(--text);text-decoration:none;
  transition:all .2s;overflow:hidden;min-height:96px}
.ce-pick-card:hover{transform:translateY(-2px);border-color:var(--cyan)}
.ce-pick-card .ce-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;z-index:0}
.ce-pick-card .ce-name,.ce-pick-card .ce-desc,.ce-pick-card .tag{position:relative;z-index:1}
.ce-pick-card .ce-name{font-weight:700;font-size:16px;color:var(--cyan)}
.ce-pick-card .tag{position:absolute;top:8px;right:8px}
.ce-form{padding:20px;display:flex;flex-direction:column;gap:14px}
.ce-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ce-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-family:var(--font-mono)}
.ce-form input[type="text"],.ce-form input[type="password"],.ce-form input:not([type]){background:#06061588;border:1px solid var(--line);color:var(--text);padding:10px;border-radius:8px;font-family:var(--font-mono)}
.ce-form input[type="file"]{padding:6px;color:var(--text)}
.ce-form input:disabled{opacity:.5}
.ce-form .check{flex-direction:row;align-items:center;cursor:pointer}
.ce-section{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.ce-section h4{margin:0;color:var(--cyan);font-size:13px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:2px}
.ce-thumb img{max-width:200px;max-height:120px;border-radius:8px;border:1px solid var(--line)}
.ce-actions{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}

/* ====== Settings popup ====== */
.popup-settings .popup-shell{max-width:540px}
.set-section{padding:18px 20px;border-bottom:1px solid var(--line)}
.set-section h3{margin:0 0 4px;font-size:14px;color:var(--cyan);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:2px}
.big-check{display:flex;align-items:center;gap:8px;font-size:15px;margin:10px 0;cursor:pointer}
.big-check input{width:18px;height:18px;accent-color:var(--cyan)}

/* ====== Stats popup ====== */
.popup-shell.wide{max-width:820px}
.stat-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:18px;border-bottom:1px solid var(--line)}
.stat-card{display:flex;align-items:center;gap:10px;background:#ffffff05;border:1px solid var(--line);border-radius:10px;padding:12px}
.stat-card i{font-size:22px;color:var(--cyan)}
.stat-card b{font-size:20px;display:block;font-family:var(--font-mono)}
.stat-card span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}
.stat-grid .panel{background:#ffffff05;border:1px solid var(--line);border-radius:12px;padding:14px}
.stat-grid h3{margin:0 0 10px;font-size:13px;color:var(--cyan);text-transform:uppercase;letter-spacing:2px;font-family:var(--font-mono)}
.rank-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.rank-row{display:flex;align-items:center;gap:10px;padding:6px;border-radius:8px;background:#0006}
.rk-pos{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-family:var(--font-mono);font-size:12px;font-weight:700;background:var(--panel);color:var(--muted)}
.rk-1{background:linear-gradient(135deg,var(--yellow),#fff066);color:#000}
.rk-2{background:linear-gradient(135deg,#c0c0c0,#fff);color:#000}
.rk-3{background:linear-gradient(135deg,#cd7f32,#ffaa66);color:#000}
.rank-row .m-name{flex:1;background:transparent;border:none;color:var(--text);cursor:pointer;text-align:left;font-weight:600;padding:0}
.rank-row .m-name:hover{text-decoration:underline}
.rk-val{font-family:var(--font-mono);color:var(--cyan)}
.bar-list{display:flex;flex-direction:column;gap:6px}
.bar-row{display:grid;grid-template-columns:140px 1fr 60px;align-items:center;gap:8px}
.bar-label{font-family:var(--font-mono);font-size:12px;color:var(--cyan)}
.bar-track{background:#0008;border:1px solid var(--line);border-radius:6px;height:14px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--pink));box-shadow:0 0 12px var(--cyan)55}
.bar-val{font-family:var(--font-mono);text-align:right;color:var(--text)}

/* ====== Tic Tac Toe ====== */
.ttt-info{text-align:center;padding:10px;font-family:var(--font-mono);color:var(--muted)}
.ttt-board{display:grid;grid-template-columns:repeat(3,80px);grid-template-rows:repeat(3,80px);gap:6px;justify-content:center;margin:14px auto}
.ttt-cell{width:80px;height:80px;background:#ffffff08;border:1px solid var(--line);border-radius:8px;
  font-size:42px;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s}
.ttt-cell:hover{background:#ffffff10;border-color:var(--cyan)}
.ttt-cell.ttt-win{background:var(--cyan)22;border-color:var(--cyan);box-shadow:0 0 18px var(--cyan)66}

@media (max-width:760px){
  .ce-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr}
  .bar-row{grid-template-columns:110px 1fr 50px}
  .ttt-board{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px)}
  .ttt-cell{width:64px;height:64px;font-size:32px}
  .img-preview{flex-direction:column}
  .img-preview img{max-width:100%;max-height:120px}
}

/* Force chan-side visible on desktop even when overridden earlier */
@media (min-width:761px){
  .popup-channel .chan-side{display:flex}
}

/* ====== Channel topic + friends-here bar ====== */
.chan-topic{margin:10px 14px 0;padding:10px 14px;background:linear-gradient(90deg,#ffbe0b22,#ff006e22);
  border:1px solid #ffbe0b66;border-radius:10px;color:var(--text);display:flex;align-items:center;gap:10px;font-size:14px}
.chan-topic i{color:var(--yellow)}
.chan-topic b{color:var(--yellow);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:1.5px;font-size:11px}

/* ====== Channel-Notify (in-stream notification banners for PM + friend req) ====== */
.chan-notify{margin:10px 14px 0;display:flex;flex-direction:column;gap:6px}
.chan-notify:empty{display:none}
.cn-row{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:11px;font-size:13px;animation:cnSlide .25s ease}
.cn-row.pm{background:linear-gradient(90deg,#ff006e22,#8338ec22);border:1px solid #ff006e88;box-shadow:0 0 18px rgba(255,0,110,.18)}
.cn-row.fr{background:linear-gradient(90deg,#00ffe022,#06d6a022);border:1px solid #00ffe088;box-shadow:0 0 18px rgba(0,255,224,.18)}
.cn-row i.lead{font-size:18px;flex-shrink:0}
.cn-row.pm i.lead{color:#ff66a4}
.cn-row.fr i.lead{color:#00ffe0}
.cn-row .cn-text{flex:1;line-height:1.35;color:var(--text)}
.cn-row .cn-text b{color:#fff}
.cn-row .cn-actions{display:flex;gap:6px;flex-shrink:0}
.cn-row .cn-btn{font-family:inherit;font-weight:700;font-size:12px;letter-spacing:.5px;padding:6px 11px;border-radius:8px;cursor:pointer;border:none;transition:all .15s}
.cn-row.pm .cn-btn.go{background:linear-gradient(135deg,#ff006e,#8338ec);color:#fff}
.cn-row.fr .cn-btn.accept{background:linear-gradient(135deg,#00ffe0,#06d6a0);color:#06060f}
.cn-row .cn-btn.decline{background:transparent;border:1px solid #ff336666;color:#ff3366}
.cn-row .cn-btn:hover{transform:translateY(-1px);filter:brightness(1.1)}
.cn-row .cn-x{background:transparent;border:none;color:#aab;cursor:pointer;font-size:14px;padding:4px 6px;border-radius:6px}
.cn-row .cn-x:hover{color:#fff;background:rgba(255,255,255,.08)}
@keyframes cnSlide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:640px){.cn-row{flex-wrap:wrap}.cn-row .cn-actions{width:100%;justify-content:flex-end}}
.friends-here{margin:10px 14px 0;padding:8px 12px;background:var(--cyan)11;border:1px solid var(--cyan)55;
  border-radius:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.friends-here.hidden{display:none}
.fh-label{font-family:var(--font-mono);font-size:11px;color:var(--cyan);text-transform:uppercase;letter-spacing:2px;display:flex;align-items:center;gap:6px}
.fh-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:#0006;border:1px solid var(--line);
  border-radius:999px;cursor:pointer;color:var(--text);font-size:13px;font-weight:600;transition:all .2s}
.fh-chip:hover{transform:translateY(-1px);border-color:var(--cyan);box-shadow:0 0 12px var(--cyan)55}
.fh-chip img,.fh-chip .avatar-mini{width:22px;height:22px;border-radius:50%;object-fit:cover;font-size:10px}

/* ====== Friends popup ====== */
.popup-friends .popup-shell{max-width:540px}
.fr-tabs{display:flex;border-bottom:1px solid var(--line);background:#0008}
.fr-tab{flex:1;background:transparent;border:none;color:var(--muted);padding:14px;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;
  border-bottom:2px solid transparent;transition:all .2s}
.fr-tab:hover{color:var(--text)}
.fr-tab.active{color:var(--cyan);border-bottom-color:var(--cyan)}
.fr-cnt{display:inline-flex;min-width:22px;height:22px;align-items:center;justify-content:center;padding:0 6px;
  background:var(--panel);border-radius:11px;font-size:11px;font-family:var(--font-mono);color:var(--muted)}
.fr-cnt.warn{background:var(--pink);color:#fff}
.fr-pane{padding:8px}
.fr-list{display:flex;flex-direction:column;gap:6px;max-height:520px;overflow-y:auto}
.fr-row{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;
  padding:10px;background:#ffffff05;border:1px solid var(--line);border-radius:10px;transition:all .2s}
.fr-row.is-online{border-color:var(--green)44}
.fr-row:hover{background:#ffffff08;border-color:var(--cyan)}
.fr-img{width:48px;height:48px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
.fr-img.fr-letter{display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-mono);color:#06060f;font-size:18px}
.fr-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.fr-info b{font-size:15px}
.fr-loc{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--cyan);font-family:var(--font-mono)}
.fr-loc.off{color:var(--muted)}
.fr-loc.on{color:var(--green)}
.fr-loc .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.fr-loc .dot.online{background:var(--green)}
.fr-loc .dot.offline{background:var(--muted)}
.fr-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.fr-actions .btn.sm{padding:6px 8px;min-width:32px}

/* ====== Photomeet (Tinder-Style swipe) ====== */
.popup-photomeet.swipe .popup-shell{max-width:480px}
.pm-top{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line)}
.pm-points{font-family:var(--font-mono);color:var(--yellow);font-size:16px}
.pm-stats{display:flex;gap:14px;font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.pm-stats b{color:var(--text);font-size:15px}
.pm-stats span i.fa-heart{color:var(--pink)}
.pm-stats span i.fa-forward{color:var(--cyan)}

.pm-card-wrap{position:relative;height:520px;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}
.pm-card-swipe{position:relative;width:100%;max-width:380px;height:480px;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .3s, opacity .3s;display:flex;flex-direction:column}
.pm-photo{width:100%;flex:1;object-fit:cover;background:#000}
.pm-card-info{padding:14px 16px;background:linear-gradient(180deg,#000a,var(--panel));display:flex;flex-direction:column;gap:6px}
.pm-card-head{display:flex;align-items:center;gap:10px}
.pm-card-head .dot{width:10px;height:10px;border-radius:50%}
.pm-card-head .dot.online{background:var(--green);box-shadow:0 0 8px var(--green)}
.pm-card-head .dot.offline{background:var(--muted)}
.pm-card-meta{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:13px;color:var(--cyan)}
.pm-view-profile{align-self:flex-start;margin-top:6px}
.pm-card-swipe.fly-right{transform:translateX(180%) rotate(20deg);opacity:0}
.pm-card-swipe.fly-left{transform:translateX(-180%) rotate(-20deg);opacity:0}
.pm-overlay{position:absolute;top:30px;font-size:28px;font-weight:900;padding:8px 18px;border:4px solid;border-radius:12px;
  font-family:var(--font-display);opacity:0;pointer-events:none;letter-spacing:2px;text-shadow:0 0 12px currentColor;transition:opacity .2s}
.pm-overlay-match{right:30px;color:var(--green);border-color:var(--green);transform:rotate(15deg)}
.pm-overlay-skip{left:30px;color:var(--red);border-color:var(--red);transform:rotate(-15deg)}
.pm-card-swipe.fly-right .pm-overlay-match{opacity:1}
.pm-card-swipe.fly-left .pm-overlay-skip{opacity:1}

.pm-swipe-actions{display:flex;justify-content:center;gap:40px;padding:6px 0 20px}
.pm-btn{display:flex;flex-direction:column;align-items:center;gap:6px;width:88px;height:88px;border-radius:50%;
  border:3px solid;background:var(--panel);cursor:pointer;font-family:var(--font-display);font-weight:700;
  font-size:14px;transition:all .2s}
.pm-btn i{font-size:30px}
.pm-btn-skip{color:var(--red);border-color:var(--red);box-shadow:0 0 20px var(--red)33}
.pm-btn-skip:hover{transform:scale(1.08);box-shadow:0 0 32px var(--red)66}
.pm-btn-match{color:var(--green);border-color:var(--green);box-shadow:0 0 20px var(--green)33}
.pm-btn-match:hover{transform:scale(1.08);box-shadow:0 0 32px var(--green)66}

.pm-empty{text-align:center;padding:40px 20px}
.pm-empty-icon{font-size:64px;color:var(--green);margin-bottom:14px}
.pm-empty h3{margin:0 0 6px}

@media (max-width:600px){
  .pm-card-wrap{height:440px}
  .pm-card-swipe{height:400px}
  .pm-btn{width:72px;height:72px}
  .pm-btn i{font-size:24px}
  .pm-swipe-actions{gap:24px}
  .fr-row{grid-template-columns:42px 1fr;gap:8px}
  .fr-row .fr-actions{grid-column:1/-1;justify-content:flex-end}
}

/* Friend request toast variant uses .pm-toast style; just slight offset for stacking */
.fr-toast.pm-toast{border-color:#ff61d266}

/* ====== Bot tag in online list ====== */
.member-chip.is-bot{border-color:var(--cyan)66;background:rgba(0,255,224,0.06)!important}
.member-chip.is-bot:hover{border-color:var(--cyan)}
.bot-tag{display:inline-block;background:var(--cyan);color:#000;font-family:var(--font-mono);font-size:9px;font-weight:900;padding:1px 5px;border-radius:4px;margin-left:4px;letter-spacing:1px;vertical-align:middle}
.cm-tag{display:inline-block;background:linear-gradient(135deg,#ffbe0b,#fb5607);color:#06060f;font-family:var(--font-mono);font-size:9px;font-weight:900;padding:1px 5px;border-radius:4px;margin-left:4px;letter-spacing:1px;vertical-align:middle;box-shadow:0 0 6px rgba(255,190,11,0.55)}
.smiley-img{display:inline-block;width:22px;height:22px;vertical-align:-5px;cursor:pointer;border-radius:4px;transition:transform .12s;object-fit:contain}
.smiley-img:hover{transform:scale(1.4)}

/* ====== Profile-edit popup ====== */
.popup-profile-edit .popup-shell{max-width:520px}
.pe-form{padding:20px;display:flex;flex-direction:column;gap:14px}
.pe-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-family:var(--font-mono)}
.pe-form input,.pe-form select{background:#06061588;border:1px solid var(--line);color:var(--text);padding:10px;border-radius:8px;font-family:var(--font-mono);font-size:14px}
.pe-form input:disabled{opacity:.5}
.pe-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pe-actions{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}
@media (max-width:600px){.pe-grid{grid-template-columns:1fr}}

/* ====== Profile personal info ====== */
.profile-personal{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 12px}
.pp-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:10px;font-size:13px}
.pp-row i{color:var(--cyan);width:18px;text-align:center}
.pp-row span{color:var(--muted);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:1px}
.pp-row b{margin-left:auto;color:var(--text);font-family:var(--font-display)}
.fav-chan-btn{margin-left:auto;background:var(--pink)22;border:1px solid var(--pink)66;color:var(--pink);
  padding:4px 10px;border-radius:999px;font-family:var(--font-display);cursor:pointer;font-weight:600}
.fav-chan-btn:hover{background:var(--pink)44}
@media (max-width:600px){.profile-personal{grid-template-columns:1fr}}

/* ====== Admin info section in profile ====== */
.admin-info{margin:14px;padding:14px;border:1px dashed var(--red)66;border-radius:12px;background:rgba(255,51,102,0.05)}
.admin-info h4{margin:0 0 10px;color:var(--red);font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:2px;display:flex;align-items:center;gap:8px}
.admin-info h5{margin:14px 0 8px;color:var(--cyan);font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:2px}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.ai-row{display:flex;align-items:center;gap:8px;padding:8px;background:#0006;border:1px solid var(--line);border-radius:8px;font-size:12px}
.ai-label{color:var(--muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:1px;font-size:10px;display:flex;align-items:center;gap:6px;flex:1}
.ai-val{font-family:var(--font-mono);color:var(--cyan);font-size:12px;text-align:right}
.admin-comments{display:flex;flex-direction:column;gap:6px;margin-top:6px;max-height:240px;overflow-y:auto}
.ac-row{padding:8px;background:#0008;border:1px solid var(--line);border-radius:8px}
.ac-meta{display:flex;align-items:center;gap:10px;margin-bottom:4px;font-size:11px;font-family:var(--font-mono)}
.ac-text{margin:0;font-size:13px;line-height:1.5;color:var(--text);word-break:break-word}
.btn-x{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:4px}
.btn-x:hover{color:var(--red)}
.ac-form{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:stretch}
.ac-form textarea{flex:1;min-width:200px;background:#06061588;border:1px solid var(--line);color:var(--text);padding:8px;border-radius:8px;font-family:var(--font-display);font-size:13px;resize:vertical}
@media (max-width:600px){.ai-grid{grid-template-columns:1fr}}

/* ===== Smaller smiley box (compact mode) ===== */
.smiley-box.compact{padding:8px 10px;max-height:200px}
.smiley-box.compact .sb-head{padding:0 0 6px 0;font-size:12px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:1px;color:var(--cyan);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);margin-bottom:6px}
.smiley-box.compact .sb-grid{grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:4px;max-height:130px;overflow-y:auto}
.smiley-box.compact .sb-grid > div,
.smiley-box.compact .sb-grid > button{padding:4px;font-size:18px;border-radius:6px}
.btn.xs{padding:4px 8px;font-size:11px;border-radius:6px;gap:4px;display:inline-flex;align-items:center}
.btn.xs i{font-size:11px}

/* ===== Quick-whois hover popup ===== */
.quick-whois{position:fixed;z-index:99999;width:280px;pointer-events:auto;animation:qwFadeIn .15s ease}
.quick-whois.hidden{display:none}
@keyframes qwFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.qw-card{background:var(--panel);border:1px solid var(--cyan)55;border-radius:14px;
  box-shadow:0 12px 36px #000a, 0 0 24px var(--cyan)33;
  overflow:hidden}
.qw-loading{padding:18px;text-align:center;color:var(--muted);font-family:var(--font-mono);font-size:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.qw-head{display:flex;gap:12px;padding:12px}
.qw-photo{width:80px;height:80px;border-radius:10px;object-fit:cover;flex-shrink:0;border:1px solid var(--line)}
.qw-photo.qw-letter{display:flex;align-items:center;justify-content:center;font-weight:700;color:#06060f;font-family:var(--font-mono)}
.qw-info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.qw-info b{font-size:15px;line-height:1.2;display:block;word-break:break-word}
.qw-meta{display:flex;align-items:center;gap:6px;font-size:12px;font-family:var(--font-mono);color:var(--muted)}
.qw-meta i{color:var(--cyan);width:13px;text-align:center}
.qw-status{font-style:italic;font-size:12px;color:var(--yellow);margin-top:2px}
.qw-self{padding:10px 14px;text-align:center;border-top:1px solid var(--line)}
.qw-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:8px;border-top:1px solid var(--line);background:#00000044}
.qw-actions.qw-actions-4{grid-template-columns:repeat(4,1fr)}
.qw-onlinemins{display:inline-flex;align-items:center;gap:5px;background:rgba(0,255,224,0.12);color:#00ffe0;padding:2px 8px;border-radius:99px;font-family:var(--font-mono,monospace);font-size:11px;margin-top:2px;align-self:flex-start}
.qw-onlinemins strong{color:#fff;font-weight:700}
.qw-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px;
  background:rgba(255,255,255,0.05);border:1px solid var(--line);border-radius:8px;
  color:var(--text);cursor:pointer;font-size:10px;font-family:var(--font-mono);font-weight:600;
  text-transform:uppercase;letter-spacing:0.5px;transition:all .15s}
.qw-btn:hover{transform:translateY(-1px);border-color:var(--cyan);background:var(--cyan)11}
.qw-btn i{font-size:14px;color:var(--cyan)}
.qw-btn.pink{} .qw-btn.pink i{color:var(--pink)}
.qw-btn.pink:hover{border-color:var(--pink);background:var(--pink)11}
.qw-btn.cyan{} .qw-btn.cyan i{color:#00b8ff}
.qw-btn.cyan:hover{border-color:#00b8ff}
.qw-btn:disabled{opacity:0.5;cursor:not-allowed}
.qw-btn.is-friend{border-color:var(--green)66;color:var(--green)}
.qw-btn.is-friend i{color:var(--green)}

/* ===== Mini-toast (top center, brief) ===== */
.mini-toast{position:fixed;left:50%;top:80px;transform:translateX(-50%) translateY(-12px);
  background:var(--panel);color:var(--text);padding:10px 18px;border:1px solid var(--cyan)55;border-radius:10px;
  font-family:var(--font-display);font-size:14px;z-index:100000;
  box-shadow:0 8px 24px #000a, 0 0 16px var(--cyan)44;
  opacity:0;transition:opacity .25s, transform .25s;pointer-events:none}
.mini-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:760px){
  .quick-whois{width:240px}
  .qw-photo{width:60px;height:60px}
}

/* ===== Even smaller smileybox ===== */
.smiley-box.compact{padding:6px 8px;max-height:160px}
.smiley-box.compact .sb-head{padding:0 0 4px 0;font-size:11px;margin-bottom:4px}
.smiley-box.compact .sb-grid{grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:3px;max-height:100px;overflow-y:auto}
.smiley-box.compact .sb-grid > div,
.smiley-box.compact .sb-grid > button{padding:2px;font-size:16px;border-radius:5px;min-width:0}

/* ===== James (privat) system message prefix ===== */
.msg.system .sys-prefix{
  color:var(--cyan);font-weight:700;font-style:normal;font-family:var(--font-display);
  text-shadow:0 0 8px var(--cyan)66;margin-right:4px
}
.msg.system .msg-text{color:#c8e9ff;font-style:italic;font-family:var(--font-display);font-size:13px}

/* ===== Friends-only Channel-Join Hinweis (dezent, lila-rosa) ===== */
.msg.friends-only{
  background:linear-gradient(90deg, rgba(186,110,255,0.10), rgba(255,128,200,0.06) 60%, transparent);
  border-left:2px solid #c084fc;
  padding-left:14px;
  position:relative;
}
.msg.friends-only .msg-text{color:#e9d5ff;font-style:normal;font-size:13px;opacity:0.95}
.msg.friends-only .friends-only-prefix{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10px;letter-spacing:1.2px;text-transform:uppercase;
  color:#c084fc;font-weight:700;font-family:var(--font-mono);
  background:rgba(192,132,252,0.12);
  border:1px solid rgba(192,132,252,0.35);
  border-radius:999px;padding:2px 8px;margin-right:8px;
  text-shadow:none;
}
.msg.friends-only .friends-only-prefix i{font-size:10px}

/* ===== Admin quick action bar ===== */
.admin-quick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:12px;
  background:rgba(0,255,224,0.04);border:1px dashed var(--cyan)55;border-radius:10px}

/* ===== Tile-hash icon override (no more #) ===== */
.tile-hash{font-family:inherit !important}
.tile-hash i{font-size:inherit;color:var(--cyan)}
.chan-info .hash{font-size:30px}
.chan-info .hash i{font-size:30px}

/* ===== Foto-Contest Hall of Fame bar (top of channel) ===== */
.pc-winners{display:flex;align-items:center;gap:8px;padding:8px 12px;margin:8px 14px 0;
  background:linear-gradient(90deg,#ffd16622,#ff66c422);border:1px solid #ffd16677;border-radius:10px;
  flex-wrap:wrap;overflow-x:auto}
.pc-winners.hidden{display:none}
.pcw-label{font-family:var(--font-mono);font-size:11px;color:var(--yellow);text-transform:uppercase;letter-spacing:1.5px}
.pcw-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:#0006;
  border:1px solid #ffd16655;border-radius:999px;cursor:pointer;color:var(--text);
  font-size:12px;transition:all .2s}
.pcw-chip:hover{transform:translateY(-1px);border-color:var(--yellow);box-shadow:0 0 12px var(--yellow)55}
.pcw-rank{font-family:var(--font-mono);font-size:10px;color:var(--yellow);font-weight:700}
.pcw-photo{width:22px;height:22px;border-radius:50%;object-fit:cover}
.pcw-photo.pcw-letter{display:flex;align-items:center;justify-content:center;font-weight:700;color:#000;font-size:11px}
.pcw-name{font-weight:600;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcw-wins{font-size:10px;color:var(--yellow);font-family:var(--font-mono)}

/* ===== Foto-Contest voting overlay box ===== */
.pc-box{position:absolute;top:60px;right:14px;width:340px;max-height:75vh;overflow-y:auto;z-index:20;
  background:var(--panel);border:1px solid var(--cyan)88;border-radius:14px;
  box-shadow:0 12px 36px #000c, 0 0 32px var(--cyan)44;
  animation:fadeUp .25s ease}
.pc-box.hidden{display:none}
.pc-head{display:flex;align-items:center;gap:8px;padding:12px 14px;
  background:linear-gradient(135deg,var(--cyan),var(--pink));color:#06060f;font-family:var(--font-display);font-size:14px}
.pc-head.r1{background:linear-gradient(135deg,#ff006e,#8338ec);color:#fff}
.pc-head.r2{background:linear-gradient(135deg,#00f5d4,#00bbf9);color:#06060f}
.pc-head.done{background:linear-gradient(135deg,#ffd166,#ff66c4);color:#06060f}
.pc-head i{font-size:18px}
.pc-timer{margin-left:auto;font-family:var(--font-mono);font-weight:700;background:#000a;color:#fff;padding:2px 10px;border-radius:999px;font-size:13px}
.pc-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.pc-cands{display:flex;flex-wrap:wrap;gap:6px}
.pc-cand-mini{display:flex;align-items:center;gap:6px;padding:4px 8px;background:#ffffff08;border:1px solid var(--line);border-radius:999px;font-size:12px}
.pc-cand-mini img,.pc-cand-mini .pc-letter{width:20px;height:20px;border-radius:50%;object-fit:cover}
.pc-letter{display:flex;align-items:center;justify-content:center;background:var(--violet);color:#fff;font-weight:700;font-family:var(--font-mono);font-size:11px}
.pc-grid{display:grid;gap:10px}
.pc-grid.r1-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.pc-grid.r2-grid{grid-template-columns:1fr}
.pc-cand-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;
  background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:10px;text-align:center}
.pc-cand-card.is-me{border-color:var(--yellow)66;background:rgba(255,209,102,0.06)}
.pc-cand-card.votable{flex-direction:row;align-items:center;text-align:left;gap:10px}
.pc-cand-card .pc-photo{width:54px;height:54px;border-radius:10px;object-fit:cover;flex-shrink:0}
.pc-cand-card .pc-photo.pc-letter{font-size:24px;display:flex;align-items:center;justify-content:center}
.pc-cand-card b{font-size:13px}
.pc-caption{font-size:11px;font-family:var(--font-mono)}
.pc-caption.none{color:var(--muted);font-style:italic}
.pc-caption.has{color:var(--text)}
.pc-vote-row{display:flex;flex-direction:column;gap:4px;flex:1}
.pc-cand-card.votable .pc-vote-row{flex:1}
.pc-cand-card.votable b{flex:0 0 auto;width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-cand-card.votable{display:grid;grid-template-columns:54px 1fr;align-items:start}
.pc-cand-card.votable > .pc-photo{grid-row:span 2}
.pc-cand-card.votable > b,.pc-cand-card.votable > .pc-caption,.pc-cand-card.votable > .pc-vote-row{grid-column:2}
.pc-bar{position:relative;height:14px;background:#0008;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.pc-bar-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--cyan),var(--pink));transition:width .4s ease;box-shadow:0 0 8px var(--cyan)66}
.pc-bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10px;font-weight:700;color:#fff;text-shadow:0 0 4px #000}
.pc-statements{margin-top:6px;font-size:12px}
.pc-statements summary{cursor:pointer;color:var(--cyan);font-family:var(--font-mono);font-size:11px}
.pc-statements ul{margin:6px 0 0;padding-left:14px;color:var(--text)}
.pc-statements li{margin:2px 0}

.pc-winner-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;position:relative}
.pc-winner-card .crown{font-size:34px;animation:bounce 1.2s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.pc-winner-photo{width:120px;height:120px;border-radius:16px;object-fit:cover;border:3px solid var(--yellow);box-shadow:0 0 24px var(--yellow)88}
.pc-winner-name{font-size:18px}
.pc-winner-pts{background:var(--yellow);color:#000;font-family:var(--font-mono);font-weight:700;padding:3px 10px;border-radius:999px;font-size:12px}

@media (max-width:760px){
  .pc-box{position:fixed;top:auto;bottom:80px;right:8px;left:8px;width:auto;max-height:60vh}
  .pc-winners{margin:6px 8px 0;padding:6px 8px}
}

/* ===== Blitz toolbar (bottom of channel) ===== */
.blitz-bar{position:absolute;left:14px;right:14px;bottom:74px;z-index:19;
  background:linear-gradient(135deg,#fb5607aa,#ffbe0baa);backdrop-filter:blur(8px);
  border:1px solid #ffbe0b88;border-radius:14px;padding:10px 14px;
  box-shadow:0 8px 28px #000a, 0 0 24px #ffbe0b55;
  display:flex;flex-direction:column;gap:8px;animation:fadeUp .25s ease}
.blitz-bar.hidden{display:none}
.bl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bl-title{font-family:var(--font-display);font-size:14px;color:#06060f;font-weight:700;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.bl-title b{color:#06060f}
.bl-timer{font-family:var(--font-mono);background:#000a;color:#ffbe0b;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;margin-left:auto}
.bl-head .btn{flex-shrink:0;min-width:120px}
.bl-players{display:flex;gap:8px;flex-wrap:wrap;max-height:100px;overflow-y:auto;padding-top:4px;border-top:1px solid #00000033}
.bl-player{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#0008;border:1px solid #ffffff22;border-radius:999px;
  font-size:12px;color:var(--text);transition:all .2s}
.bl-player.is-out{opacity:.45;filter:grayscale(.6)}
.bl-player.is-final{border-color:var(--yellow);box-shadow:0 0 12px var(--yellow)66}
.bl-player img,.bl-player .bl-letter{width:22px;height:22px;border-radius:50%;object-fit:cover}
.bl-letter{display:flex;align-items:center;justify-content:center;color:#000;font-family:var(--font-mono);font-weight:700;font-size:10px}
.bl-sc{font-family:var(--font-mono);color:var(--cyan);font-size:11px}
.bl-tot{font-family:var(--font-mono);font-weight:700;font-size:11px;color:#06060f;background:var(--yellow);padding:1px 8px;border-radius:999px;margin-left:auto}
.bl-winner{font-weight:700;color:#06060f;font-family:var(--font-display);padding:4px 12px;background:#fff;border-radius:999px}

@media (max-width:760px){
  .blitz-bar{left:6px;right:6px;bottom:70px;padding:8px}
  .bl-head{gap:6px}
  .bl-timer{font-size:11px;padding:2px 8px}
}

/* ===== High or Low ===== */
.hilo-leader{display:flex;align-items:center;gap:10px;margin:8px 14px 0;padding:8px 12px;
  background:linear-gradient(90deg,#06d6a022,#118ab222);border:1px solid #06d6a077;border-radius:10px;
  flex-wrap:wrap;font-size:13px}
.hilo-leader.hidden{display:none}
.hilo-leader-label{font-family:var(--font-mono);font-size:11px;color:#06d6a0;text-transform:uppercase;letter-spacing:1.5px}
.hilo-leader b{color:var(--text)}
.hilo-rounds{background:#06d6a0;color:#000;padding:2px 10px;border-radius:999px;font-family:var(--font-mono);font-size:12px;font-weight:700}
.hilo-leader .btn.xs{margin-left:auto}
.hilo-box{position:absolute;left:14px;right:14px;bottom:74px;z-index:19;
  background:linear-gradient(135deg,#118ab2dd,#06d6a0dd);backdrop-filter:blur(8px);
  border:1px solid #06d6a088;border-radius:14px;padding:12px;
  box-shadow:0 8px 28px #000a, 0 0 24px #06d6a055;
  animation:fadeUp .25s ease}
.hilo-box.hidden{display:none}
.hilo-card{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:12px}
.hilo-num{font-family:var(--font-display);font-size:64px;font-weight:900;color:#fff;text-align:center;
  text-shadow:0 0 16px #00ffe0,0 0 32px #00ffe0;line-height:1}
.hilo-q{color:#fff;font-size:14px;font-weight:600}
.hilo-score{color:#fff;font-family:var(--font-mono);font-size:13px;margin-top:4px}
.hilo-score b{color:#ffe066;font-size:18px}
.hilo-actions{display:flex;flex-direction:column;gap:6px}
.hilo-actions .btn{min-width:110px}
@media (max-width:760px){
  .hilo-card{grid-template-columns:60px 1fr;gap:8px}
  .hilo-num{font-size:42px}
  .hilo-actions{grid-column:1/-1;flex-direction:row}
  .hilo-actions .btn{flex:1;min-width:0}
}

/* ===== Top-Listen popup tabs ===== */
.top-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:10px;border-bottom:1px solid var(--line);background:#0008}
.top-tab{padding:8px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:10px;
  color:var(--muted);text-decoration:none;font-family:var(--font-display);font-size:12px;transition:all .15s}
.top-tab:hover{color:var(--text);border-color:var(--cyan)}
.top-tab.active{background:var(--cyan);color:#06060f;border-color:var(--cyan);font-weight:700}
.top-pane{padding:18px}
.top-pane h3{margin:0 0 14px;font-family:var(--font-display);color:var(--cyan)}

/* ===== Channel Categories (Dashboard) ===== */
.cat-section{margin:18px 0 6px;display:flex;align-items:center;gap:12px;padding:0 4px}
.cat-section .cat-title{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:14px;text-transform:uppercase;letter-spacing:3px;color:var(--cyan);margin:0}
.cat-section .cat-title i{color:var(--pink);text-shadow:0 0 8px var(--pink)}
.cat-section .cat-line{flex:1;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}
.cat-section .cat-count{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.cat-section.cat-spiele .cat-title{color:var(--yellow)}
.cat-section.cat-spiele .cat-title i{color:var(--orange,#fb5607);text-shadow:0 0 8px #fb5607}
.cat-section.cat-spiele .cat-line{background:linear-gradient(90deg,var(--yellow),transparent)}

/* ===== Start-Game Button (game channels only) ===== */
.market-btn.start-game{background:linear-gradient(135deg,#fb5607,#ffbe0b);color:#06060f;box-shadow:0 8px 24px rgba(251,86,7,.5);font-weight:700;animation:pulseStart 2.4s ease-in-out infinite}
.market-btn.start-game:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,190,11,.6)}
@keyframes pulseStart{
  0%,100%{box-shadow:0 8px 24px rgba(251,86,7,.5)}
  50%{box-shadow:0 8px 32px rgba(255,190,11,.85)}
}

/* ===== Friends Online Sidebar (per-channel polling) ===== */
.friends-online-list{display:flex;flex-direction:column;gap:6px}
.fo-row{display:flex;align-items:center;gap:9px;padding:7px 9px;background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:all .18s}
.fo-row:hover{background:rgba(0,245,212,0.08);border-color:var(--cyan);transform:translateX(2px)}
.fo-avatar{width:28px;height:28px;border-radius:8px;object-fit:cover;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;color:#06060f;font-size:13px}
.fo-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.25}
.fo-meta b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fo-here{font-family:var(--font-mono);font-size:10px;color:var(--green);text-transform:uppercase;letter-spacing:1px}
.fo-elsewhere{font-family:var(--font-mono);font-size:10px;color:var(--cyan)}
.fo-elsewhere b{color:var(--yellow);font-weight:700}
.fo-switch{flex-shrink:0;background:transparent;border:1px solid var(--line);color:var(--cyan);width:28px;height:28px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s}
.fo-switch:hover{background:var(--cyan);color:#06060f;border-color:var(--cyan)}

/* ============================================================
   New Login (Knuddels-style: wide layout, compact form on left,
   prominent channel grid on right)
   ============================================================ */
.auth-wrap.auth-wide{max-width:1920px;width:calc(100vw - 32px);margin:24px auto;padding:0 16px}
.auth-card.auth-2col{
  display:grid;grid-template-columns:minmax(320px,360px) 1fr;
  gap:0;background:rgba(10,10,24,0.78);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;backdrop-filter:blur(8px);
}
.auth-card.auth-2col .auth-head.full,
.auth-card.auth-2col .alert.full{grid-column:1 / -1;border-bottom:1px solid var(--line)}
.auth-card.auth-2col .auth-head.full{padding:18px 28px 14px}
.auth-card.auth-2col .auth-head h1{margin:6px 0 4px;font-size:24px}
.auth-form-left{padding:20px 24px;display:flex;flex-direction:column;gap:11px;border-right:1px solid var(--line)}
.auth-form-left label{display:flex;flex-direction:column;gap:5px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--cyan)}
.auth-form-left input[type="text"],
.auth-form-left input[type="password"],
.auth-form-left input:not([type]),
.auth-form-left select{
  background:#06061588;border:1px solid var(--line);color:var(--text);
  padding:10px 12px;border-radius:9px;font-family:var(--font-display);
  font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s
}
.auth-form-left input:focus,
.auth-form-left select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,255,224,.16)}
.auth-form-left label.check{flex-direction:row;align-items:center;gap:10px;color:var(--text);text-transform:none;letter-spacing:0;font-family:var(--font-display);font-size:13px}
.auth-form-left label.check input{width:18px;height:18px;accent-color:var(--cyan)}
.auth-actions{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.link-register{
  background:transparent;border:1px dashed var(--violet,#8338ec);
  color:var(--violet,#8338ec);padding:9px 12px;border-radius:10px;
  cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:13px;
  text-align:center;transition:all .18s
}
.link-register:hover{background:rgba(131,56,236,.14);color:#b78bff;border-style:solid}

/* Right column: channels list — knuddels-style grid */
.login-channels{padding:18px 22px;background:rgba(6,6,15,0.45)}
.login-channels h3{
  display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;
  margin:0 0 14px;font-family:var(--font-display);font-size:14px;color:var(--cyan);
  text-transform:uppercase;letter-spacing:3px
}
.login-channels h3 .hint{text-transform:none;letter-spacing:0;font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.login-chan-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
  max-height:calc(100vh - 220px);overflow-y:auto;padding-right:4px
}
.login-chan-grid::-webkit-scrollbar{width:8px}
.login-chan-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.login-chan-item{
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  gap:5px 10px;text-align:left;background:rgba(255,255,255,0.04);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;
  color:var(--text);transition:all .18s;font-family:var(--font-display);min-height:78px
}
.login-chan-item:hover{border-color:var(--cyan);background:rgba(0,255,224,0.06);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,255,224,0.12)}
.login-chan-item.is-selected{border-color:var(--pink,#ff006e);background:rgba(255,0,110,0.08);box-shadow:inset 0 0 0 1px rgba(255,0,110,.4)}
.login-chan-item .lc-name{font-weight:700;font-size:15px;color:#fff;grid-column:1;grid-row:1}
.login-chan-item .lc-cat{
  grid-column:2;grid-row:1;font-family:var(--font-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:1px;padding:2px 8px;border-radius:99px;
  display:inline-flex;align-items:center;gap:5px;align-self:start
}
.lc-cat-spiele{background:rgba(255,190,11,.16);color:var(--yellow)}
.lc-cat-lokalrunde{background:rgba(0,245,212,.14);color:var(--cyan)}
.login-chan-item .lc-desc{grid-column:1 / -1;grid-row:2;font-size:12px;color:var(--muted);line-height:1.35}
.login-chan-item .lc-online{
  grid-column:2;grid-row:2;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:11px;color:var(--green);justify-self:end;align-self:end
}
.login-chan-item .lc-online .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}

@media (max-width: 980px){
  .auth-card.auth-2col{grid-template-columns:1fr}
  .auth-form-left{border-right:none;border-bottom:1px solid var(--line)}
  .login-chan-grid{max-height:420px;grid-template-columns:1fr}
}

/* ============================================================
   Online Popup (right-click channel preview)
   ============================================================ */
.popup-online .popup-shell{margin:30px auto}
.op-head{padding:14px 18px 6px;border-bottom:1px solid var(--line)}
.op-head .op-count{display:flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--font-mono);font-size:13px}
.op-head .op-count b{font-size:18px;color:var(--cyan)}
.op-head .dot.online{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.op-list{padding:12px 14px;display:flex;flex-direction:column;gap:8px;max-height:480px;overflow-y:auto}
.op-empty{text-align:center;padding:24px 12px;color:var(--muted)}
.op-user{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.op-avatar{width:36px;height:36px;border-radius:9px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;object-fit:cover;font-family:var(--font-mono);font-weight:700;color:#06060f;font-size:14px}
.op-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.op-meta b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   MauMau Popup
   ============================================================ */
body.popup-maumau{overflow:hidden}
.mm-shell{
  display:grid;
  grid-template-rows:54px 1fr 200px;
  grid-template-columns:1fr;
  grid-template-areas:
    "bar"
    "table"
    "chat";
  height:100vh;background:linear-gradient(135deg,#0a1d18 0%,#08111a 100%);
  position:relative
}
.mm-side{
  position:absolute;
  left:0; top:54px; bottom:200px; width:200px;
  z-index:5;
  padding:14px 12px;
  background:rgba(6,18,15,0.78);
  border-right:1px solid var(--line);
  backdrop-filter:blur(8px);
  overflow-y:auto;
}
.mm-table-area{grid-area:table;display:flex;flex-direction:column;min-height:0;padding:14px 220px 14px 220px;align-items:center}
.mm-bar{grid-area:bar;display:flex;justify-content:space-between;align-items:center;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(6,18,15,0.92);backdrop-filter:blur(8px)}
.mm-title{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:18px;color:#fff}
.mm-title i{color:#e9c46a;font-size:20px}
.mm-bar-actions{display:flex;align-items:center;gap:10px}
.mm-bar-actions .my-points{background:rgba(255,255,255,0.06);border:1px solid var(--line);padding:6px 12px;border-radius:99px;font-family:var(--font-mono);font-size:12px;color:#fff;display:inline-flex;align-items:center;gap:6px}
.mm-bar-actions .my-points b{color:#e9c46a}

.mm-side h4{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:2px;color:#2a9d8f;display:flex;justify-content:space-between;font-family:var(--font-mono)}
.mm-side .side-count{color:var(--muted)}
.mm-players-list{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.mm-player{display:flex;align-items:center;gap:9px;padding:8px 10px;background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:10px;font-size:13px;position:relative;transition:all .2s}
.mm-player.is-turn{border-color:#e9c46a;box-shadow:0 0 0 1px #e9c46a55,0 0 12px #e9c46a33;background:rgba(233,196,106,.08)}
.mm-player.is-me{border-left:3px solid #2a9d8f}
.mm-avatar{width:32px;height:32px;border-radius:8px;object-fit:cover;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;color:#06060f;font-size:13px}
.mm-avatar.small{width:24px;height:24px;font-size:11px;border-radius:6px}
.mm-letter{}
.mm-player-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mm-player-meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.mm-turn-arrow{color:#e9c46a;animation:mmPulse 1.2s ease-in-out infinite}
@keyframes mmPulse{0%,100%{opacity:.55}50%{opacity:1}}
.mm-invites{margin-top:12px}
.mm-invite-list{display:flex;flex-direction:column;gap:5px;max-height:240px;overflow-y:auto}
.mm-invite-row{display:flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(255,255,255,0.03);border:1px dashed var(--line);border-radius:8px;color:var(--text);cursor:pointer;font-family:var(--font-display);font-size:12px;text-align:left;transition:all .15s}
.mm-invite-row:hover{border-color:#e9c46a;background:rgba(233,196,106,.08);color:#e9c46a}
.mm-invite-row b{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-invite-row i{color:#2a9d8f}

.mm-info{margin-bottom:10px;width:100%;max-width:880px}
.mm-info-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:rgba(255,255,255,0.04);border:1px solid var(--line);padding:10px 14px;border-radius:12px;font-family:var(--font-display);font-size:13px;color:#fff}
.mm-info-row .badge{background:rgba(0,245,212,.14);color:var(--cyan);padding:3px 9px;border-radius:99px;font-family:var(--font-mono);font-size:11px}
.mm-info-row .badge.warn{background:rgba(255,86,7,.16);color:#fb5607}
.mm-info-row .badge.ok{background:rgba(0,245,160,.14);color:#00f5a0}
.mm-info-row .mm-timer{font-family:var(--font-mono);color:#e9c46a;margin-left:auto}
.mm-info-row .red{color:#ff5566}
.mm-info-row.mm-done{background:rgba(233,196,106,.12);border-color:#e9c46a}

.mm-table{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:50px 40px}
.mm-table-felt{
  position:relative;width:min(640px,86%);aspect-ratio:1.45 / 1;border-radius:50%;
  background:radial-gradient(ellipse at center,#1d6655 0%,#0d3a2f 60%,#08231c 100%);
  box-shadow:inset 0 0 80px #000c, 0 30px 80px #000a, 0 0 0 8px #5a3a1e88, 0 0 0 12px #2b1a0d
}
.mm-seats{position:absolute;inset:0}
.mm-seat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-family:var(--font-display);font-size:13px;text-shadow:0 1px 6px #000;min-width:100px;z-index:3}
.seat-avatar-btn{background:transparent;border:none;padding:0;cursor:pointer;border-radius:50%}
.seat-avatar-btn:hover .seat-avatar{transform:scale(1.06);box-shadow:0 0 18px #e9c46aaa}
.mm-seat .seat-avatar{width:62px;height:62px;border-radius:50%;border:3px solid #fff5;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;color:#06060f;font-size:22px;transition:transform .18s, box-shadow .18s;background:#222}
.mm-seat.seat-turn .seat-avatar{border-color:#e9c46a;box-shadow:0 0 18px #e9c46a, 0 0 0 4px #e9c46a33}
.mm-seat.seat-me .seat-avatar{outline:3px solid #2a9d8f;outline-offset:3px}
.mm-seat .seat-name{font-weight:700;font-size:13px;text-decoration:none;background:#0007;padding:2px 9px;border-radius:99px;backdrop-filter:blur(4px)}
.mm-seat a.seat-name:hover{text-decoration:underline}
.mm-seat .seat-hand{font-family:var(--font-mono);font-size:11px;background:#0009;padding:2px 8px;border-radius:99px;letter-spacing:1px}
.mm-seat-bottom{bottom:-46px;left:50%;transform:translateX(-50%)}
.mm-seat-top{top:-46px;left:50%;transform:translateX(-50%)}
.mm-seat-left{left:-60px;top:50%;transform:translateY(-50%)}
.mm-seat-right{right:-60px;top:50%;transform:translateY(-50%)}

/* Empty seat with + button */
.mm-seat-empty .seat-plus{
  width:62px;height:62px;border-radius:50%;background:rgba(233,196,106,0.12);
  border:3px dashed #e9c46a;color:#e9c46a;font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;animation:seatPulse 2s ease-in-out infinite
}
.mm-seat-empty .seat-plus:hover{background:#e9c46a;color:#1d1d1d;transform:scale(1.12);box-shadow:0 0 24px #e9c46a}
@keyframes seatPulse{0%,100%{box-shadow:0 0 0 0 rgba(233,196,106,0.6)}50%{box-shadow:0 0 0 14px rgba(233,196,106,0)}}
.mm-seat-empty .seat-empty-circle{width:62px;height:62px;border-radius:50%;border:3px dashed #fff3;background:rgba(255,255,255,0.04);color:#fff5;font-size:30px;display:flex;align-items:center;justify-content:center}

.mm-piles{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:18px}
.mm-pile{display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;border:none;cursor:default;color:#fff}
.mm-pile.draw-pile{cursor:pointer}
.mm-pile .card-back{display:inline-block;width:68px;height:96px;background:linear-gradient(135deg,#1a1f3a,#3a1f5a);border:2px solid #fff5;border-radius:8px;font-size:36px;display:inline-flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 18px #000a}
.mm-pile .card-face{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:68px;height:96px;background:#fff;color:#222;border-radius:8px;font-family:var(--font-display);font-weight:700;box-shadow:0 6px 18px #000a;font-size:14px}
.mm-pile .card-face b{font-size:18px;line-height:1}
.mm-pile .card-face span{font-size:24px;line-height:1;margin-top:4px}
.mm-pile .card-face.red{color:#d62828}
.mm-pile .card-face.black{color:#1d1d1d}
.mm-pile .card-face.muted{color:#888;background:#222}
.mm-pile-label{font-family:var(--font-mono);font-size:11px;color:#fff;text-shadow:0 1px 4px #000}
.mm-pile-label b{color:#e9c46a}
.mm-direction{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;background:#0008;border:1px solid #fff3;color:#e9c46a;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}
.mm-wish{position:absolute;top:18px;left:18px;padding:6px 12px;background:#0009;border:1px solid #e9c46a;border-radius:99px;color:#e9c46a;font-family:var(--font-mono);font-size:12px}

.mm-hand-wrap{margin-top:auto;padding:14px 0 6px;display:flex;flex-direction:column;gap:8px;align-items:center}
.mm-hand{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:100%}
.mm-card{display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;width:56px;height:80px;background:#fff;color:#222;border:2px solid #fff;border-radius:9px;cursor:pointer;font-family:var(--font-display);font-weight:700;padding:8px 4px;transition:transform .15s, box-shadow .15s;box-shadow:0 4px 10px #0007}
.mm-card b{font-size:16px;line-height:1}
.mm-card span{font-size:20px;line-height:1}
.mm-card.red{color:#d62828}
.mm-card.black{color:#1d1d1d}
.mm-card:hover:not(:disabled){transform:translateY(-6px);box-shadow:0 8px 18px #000a;border-color:#e9c46a}
.mm-card:disabled{opacity:.55;cursor:not-allowed;filter:saturate(.6)}
.mm-actions{display:flex;gap:8px}

.mm-chat{grid-area:chat;display:flex;flex-direction:column;border-top:1px solid var(--line);background:rgba(6,18,15,0.85);min-height:0}
.mm-chat-head{padding:6px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;color:#2a9d8f;text-transform:uppercase;letter-spacing:1px}
.mm-msgs{flex:1;overflow-y:auto;padding:8px 16px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.mm-msg{color:#dcdef3;line-height:1.4}
.mm-msg.sys{color:#e9c46a;font-style:italic;font-family:var(--font-mono);font-size:12px}
.mm-msg-user{font-weight:700;margin-right:5px}
.mm-msg-form{display:flex;gap:8px;padding:8px 14px;border-top:1px solid var(--line)}
.mm-msg-form input{flex:1;background:#06061588;border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:var(--text);outline:none;font-family:var(--font-display);font-size:13px}
.mm-msg-form input:focus{border-color:#2a9d8f}

.mm-wish-overlay{position:fixed;inset:0;background:#000c;backdrop-filter:blur(8px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.mm-wish-overlay.hidden{display:none}
.mm-wish.hidden{display:none}
.mm-wish-card{background:linear-gradient(135deg,#0d3a2f,#08231c);border:1px solid #e9c46a;border-radius:18px;padding:24px;max-width:340px;text-align:center;color:#fff;box-shadow:0 16px 48px #000c}
.mm-wish-card h3{margin:0 0 16px;color:#e9c46a;font-family:var(--font-display)}
.mm-wish-suits{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mm-wish-btn{background:#fff;color:#1d1d1d;border:2px solid #fff;border-radius:12px;font-size:42px;line-height:1;padding:18px;cursor:pointer;transition:transform .15s, box-shadow .15s}
.mm-wish-btn.red{color:#d62828}
.mm-wish-btn:hover{transform:scale(1.06);box-shadow:0 8px 18px #000a}

/* Responsive */
@media (max-width: 760px){
  .mm-shell{grid-template-rows:54px 1fr 180px;grid-template-columns:1fr;grid-template-areas:"bar" "table" "chat"}
  .mm-side{position:relative;left:auto;top:auto;bottom:auto;width:100%;max-height:140px;border-right:none;border-bottom:1px solid var(--line)}
  .mm-table-area{padding:14px}
  .mm-invites{display:none}
  .mm-table-felt{width:96%}
  .mm-seat-left,.mm-seat-right{position:static;transform:none;flex-direction:row}
}

/* ============================================================
   KnuFFels rebranding (logo + landing hero accents)
   ============================================================ */
.logo-mark{color:#ff006e;text-shadow:0 0 12px #ff006e88;font-size:22px}
.logo-text{font-weight:700;letter-spacing:0.5px}
.logo-text .logo-accent{color:#ff006e;text-shadow:0 0 8px #ff006e66}

.hero-knuffels{padding-top:48px}
.hero-knuffels .hero-title{line-height:1.05}
.hero-knuffels .hero-sub{max-width:580px}
.hero-knuffels .hero-stats div b{color:#ff006e}

.features-knuffels .feat{transition:transform .18s,border-color .18s}
.features-knuffels .feat:hover{transform:translateY(-3px);border-color:#ff006e44}
.features-knuffels .feat i{color:#ff006e}

/* ====== Nick-Effects (/code +flame / +neon, ab Stammi) ====== */
.fx-flame .nick-text {
  background: linear-gradient(0deg, #ff3300 0%, #ff9900 35%, #ffff00 65%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 4px rgba(255, 110, 0, 0.7), 0 0 10px rgba(255, 60, 0, 0.4);
  font-weight: 700;
  animation: fx-flame-flicker 1.3s ease-in-out infinite alternate;
}
.fx-flame .flame-emoji {
  display: inline-block;
  margin-right: 3px;
  filter: drop-shadow(0 0 4px rgba(255, 90, 0, 0.8));
  animation: fx-flame-wiggle 0.45s ease-in-out infinite alternate;
}
@keyframes fx-flame-flicker {
  0%   { text-shadow: 0 0 4px #ff6e00, 0 0 10px #ff3300, 0 0 18px #ffaa00; }
  50%  { text-shadow: 0 0 6px #ffaa00, 0 0 14px #ff5500, 0 0 22px #ffdd00; }
  100% { text-shadow: 0 0 3px #ffcc00, 0 0 8px  #ff3300, 0 0 16px #ff8800; }
}
@keyframes fx-flame-wiggle {
  0%   { transform: translateY(0) rotate(-3deg) scale(1);   }
  100% { transform: translateY(-1px) rotate(4deg) scale(1.08); }
}

.fx-neon .nick-text {
  text-shadow:
    0 0 4px #00ffe0,
    0 0 8px #00ffe0,
    0 0 14px #00ffe0,
    0 0 22px #00d4ff,
    0 0 32px rgba(0, 212, 255, 0.55);
  animation: fx-neon-pulse 1.8s ease-in-out infinite alternate;
}
@keyframes fx-neon-pulse {
  0%   { text-shadow: 0 0 3px #00ffe0, 0 0 7px #00ffe0, 0 0 12px #00d4ff, 0 0 18px rgba(0,212,255,0.4); }
  100% { text-shadow: 0 0 6px #00ffe0, 0 0 12px #00ffe0, 0 0 22px #00d4ff, 0 0 36px rgba(0,212,255,0.7); }
}

/* combined (flame wins coloring, neon adds outer glow) */
.fx-flame.fx-neon .nick-text {
  text-shadow:
    0 0 4px #ff6e00,
    0 0 10px #ff3300,
    0 0 18px #00d4ff,
    0 0 28px rgba(0, 212, 255, 0.6);
}

/* ====== /code +wolke — schwebende Wolke über dem Username ====== */
.fx-wolke {
  position: relative;
  /* Reserve vertical space so the floating cloud is visible above the name */
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  overflow: visible !important;
}
/* Make sure the userlist chip & ellipsis container don't clip the cloud */
.member-chip { overflow: visible; }
.side-users .member-chip .m-name.fx-wolke {
  overflow: visible;
  text-overflow: clip;
}
.fx-wolke .cloud-overlay {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  animation: fx-wolke-float 3.2s ease-in-out infinite;
  white-space: nowrap;
  z-index: 2;
}
@keyframes fx-wolke-float {
  0%   { transform: translate(-110%, 0)   rotate(-2deg); opacity: 0.0; }
  10%  { opacity: 0.9; }
  50%  { transform: translate(-50%, -2px) rotate( 2deg); opacity: 1.0; }
  90%  { opacity: 0.9; }
  100% { transform: translate(  10%, 0)   rotate(-1deg); opacity: 0.0; }
}

/* ====== /code +rainbow — Nick wackelt in Regenbogenfarben ====== */
.fx-rainbow .nick-text {
  background: linear-gradient(
      90deg,
      #ff004d 0%,
      #ff7a00 14%,
      #ffd000 28%,
      #2bd66a 42%,
      #00c2ff 57%,
      #6a5cff 72%,
      #c44bff 86%,
      #ff004d 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
  display: inline-block;
  animation:
    fx-rainbow-shift 2.8s linear infinite,
    fx-rainbow-wiggle 0.5s ease-in-out infinite alternate;
  transform-origin: 50% 60%;
}
@keyframes fx-rainbow-shift {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes fx-rainbow-wiggle {
  0%   { transform: translateY(0)     rotate(-2.5deg) skewX(-1deg); }
  50%  { transform: translateY(-0.5px) rotate( 0deg)   skewX( 0deg); }
  100% { transform: translateY(0)     rotate( 2.5deg) skewX( 1deg); }
}
/* Rainbow + Neon combo: keep the rainbow gradient but add a soft outer glow */
.fx-rainbow.fx-neon .nick-text {
  filter: drop-shadow(0 0 4px rgba(0, 255, 224, 0.55))
          drop-shadow(0 0 10px rgba(0, 212, 255, 0.35));
}
/* Rainbow + Flame combo: rainbow wins coloring, flame keeps the leading 🔥 */
.fx-rainbow.fx-flame .nick-text {
  text-shadow: 0 0 6px rgba(255, 140, 0, 0.5);
}

/* ===== fx-wave: Nick dreht alle 10 Sekunden eine volle Umdrehung ===== */
.fx-wave .nick-text {
  display: inline-block;
  transform-origin: 50% 50%;
  animation: fx-wave-spin 10s linear infinite;
}
@keyframes fx-wave-spin {
  0%   { transform: rotate(0deg); }
  85%  { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== fx-monster: grüner tropfender Schleim hinter dem Nick ===== */
.fx-monster .nick-text {
  position: relative;
  display: inline-block;
  padding: 2px 10px 4px;
  color: #1a3a1a !important;
  font-weight: 800;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(0,0,0,.25), transparent 60%),
    linear-gradient(180deg, #7cff5a 0%, #2bb31b 70%, #1a8a0a 100%);
  border-radius: 999px;
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,.25),
    inset 0 2px 4px rgba(255,255,255,.35),
    0 0 14px rgba(124,255,90,.55);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.fx-monster .nick-text::before,
.fx-monster .nick-text::after {
  content: "";
  position: absolute;
  bottom: -7px;
  width: 6px;
  height: 10px;
  background: linear-gradient(180deg, #7cff5a 0%, #2bb31b 90%);
  border-radius: 0 0 50% 50% / 0 0 70% 70%;
  box-shadow: 0 0 6px rgba(124,255,90,.7);
  animation: fx-monster-drip 2.4s ease-in infinite;
}
.fx-monster .nick-text::before { left: 22%;  animation-delay: 0s; }
.fx-monster .nick-text::after  { left: 68%;  animation-delay: 1.1s; }
@keyframes fx-monster-drip {
  0%   { transform: translateY(-2px) scaleY(0.6); opacity: .0; }
  20%  { transform: translateY(0)    scaleY(1);   opacity: 1; }
  70%  { transform: translateY(10px) scaleY(1.4); opacity: 1; }
  100% { transform: translateY(20px) scaleY(0.4); opacity: 0; }
}


/* MCM (My-Channel-Moderator) badge */
.mcm-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 99px;
  background: rgba(6, 214, 160, 0.18);
  border: 1px solid #06d6a0aa;
  color: #06d6a0;
  vertical-align: middle;
}
.mcm-tag.owner {
  background: linear-gradient(135deg, #06d6a0, #118ab2);
  color: #06060f;
  border-color: transparent;
  box-shadow: 0 0 8px rgba(6, 214, 160, 0.4);
}

/* ============================================================
   LOGIN V2 — Glassmorphism + animated orbs (centered card)
   ============================================================ */
body.page-auth .bg-grid,body.page-auth .bg-glow{display:none}
body.page-auth{background:#04040c}
.login-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 20% 10%,#1a0a2e 0%,transparent 55%),radial-gradient(ellipse at 80% 90%,#0a1a2e 0%,transparent 55%),var(--bg)}
.login-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:orbFloat 18s ease-in-out infinite}
.login-orb.orb-1{width:520px;height:520px;background:var(--violet);top:-160px;left:-140px}
.login-orb.orb-2{width:460px;height:460px;background:var(--cyan);bottom:-180px;right:-140px;animation-delay:-6s}
.login-orb.orb-3{width:360px;height:360px;background:var(--pink);top:40%;left:50%;transform:translate(-50%,-50%);opacity:.35;animation-delay:-12s}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-30px) scale(1.08)}
  66%{transform:translate(-30px,40px) scale(.95)}
}
.login-orb.orb-3{animation-name:orbFloat3}
@keyframes orbFloat3{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-48%,-52%) scale(1.12)}
}
.login-noise{position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.login-v2-wrap{position:relative;z-index:2;min-height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center;padding:40px 20px}
.login-v2-card{
  width:100%;max-width:440px;
  background:linear-gradient(145deg,rgba(20,20,40,.55),rgba(10,10,25,.65));
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:36px 32px 28px;
  box-shadow:0 30px 80px #00000099,inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
  animation:lvCardIn .55s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes lvCardIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.login-v2-card::before{
  content:"";position:absolute;inset:0;border-radius:24px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,255,224,.45),transparent 40%,rgba(131,56,236,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

.login-v2-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.login-v2-brand .brand-glyph{font-family:var(--font-mono);font-size:20px;color:var(--cyan);text-shadow:0 0 14px var(--cyan)}
.login-v2-brand .brand-name{font-family:var(--font-display);font-weight:700;letter-spacing:2px;font-size:14px;text-transform:uppercase;color:#fff}

.login-v2-head h1{margin:0 0 6px;font-size:30px;font-weight:700;letter-spacing:.5px;background:linear-gradient(120deg,#fff 30%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.login-v2-head p{margin:0 0 22px;color:var(--muted);font-size:14px}

.login-v2-alert{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:rgba(255,51,102,.10);border:1px solid rgba(255,51,102,.35);color:#ffb1c2;font-size:13px;margin-bottom:16px}

.login-v2-form{display:flex;flex-direction:column;gap:14px}
.lv-field{position:relative;display:flex;flex-direction:column;gap:6px}
.lv-label{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-family:var(--font-mono)}
.lv-label i{color:var(--cyan);font-size:11px}
.lv-field input{
  width:100%;padding:14px 14px;font-family:var(--font-display);font-size:15px;color:#fff;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:12px;
  outline:none;transition:border-color .2s,background .2s,box-shadow .2s;
}
.lv-field input::placeholder{color:#6a6c8a}
.lv-field input:focus{border-color:var(--cyan);background:rgba(0,255,224,.05);box-shadow:0 0 0 3px rgba(0,255,224,.12)}
.lv-eye{position:absolute;right:8px;top:32px;background:transparent;border:0;color:var(--muted);width:36px;height:36px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s}
.lv-eye:hover{color:var(--cyan);background:rgba(0,255,224,.08)}

.lv-row{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.lv-check{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text);user-select:none}
.lv-check input{position:absolute;opacity:0;pointer-events:none}
.lv-check-box{width:18px;height:18px;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);position:relative;transition:all .2s;flex-shrink:0}
.lv-check input:checked + .lv-check-box{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px rgba(0,255,224,.5)}
.lv-check input:checked + .lv-check-box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #0c0c1c;border-width:0 2px 2px 0;transform:rotate(45deg)}
.lv-forgot{color:var(--muted);transition:color .2s}
.lv-forgot:hover{color:var(--cyan)}

.lv-submit{
  margin-top:6px;display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:14px 18px;border:0;border-radius:12px;cursor:pointer;
  font-family:var(--font-display);font-weight:700;letter-spacing:1.2px;font-size:14px;text-transform:uppercase;
  color:#0c0c1c;background:linear-gradient(120deg,var(--cyan),#7ef0ff);
  box-shadow:0 14px 30px rgba(0,255,224,.25),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .15s,box-shadow .2s,filter .2s;
}
.lv-submit:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,255,224,.4);filter:brightness(1.05)}
.lv-submit:active{transform:translateY(0)}
.lv-submit i{transition:transform .2s}
.lv-submit:hover i{transform:translateX(4px)}

.lv-divider{display:flex;align-items:center;gap:12px;margin:18px 0 4px;color:var(--muted);font-size:11px;letter-spacing:2px;text-transform:uppercase;font-family:var(--font-mono)}
.lv-divider::before,.lv-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}

.lv-register{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:13px 18px;border-radius:12px;cursor:pointer;
  font-family:var(--font-display);font-weight:600;letter-spacing:.5px;font-size:14px;
  color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  transition:all .2s;
}
.lv-register:hover{background:rgba(131,56,236,.12);border-color:var(--violet);color:#fff;box-shadow:0 0 24px rgba(131,56,236,.25)}
.lv-register i{color:var(--violet)}

.lv-demo{text-align:center;margin-top:10px;font-size:11px}
.lv-demo code{background:rgba(0,255,224,.08);color:var(--cyan);padding:1px 6px;border-radius:5px;font-size:11px}

.login-v2-stats{display:flex;justify-content:space-between;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06)}
.lv-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--font-mono);color:var(--muted);font-size:10px;letter-spacing:1.2px;text-transform:uppercase}
.lv-stat b{font-size:20px;color:#fff;font-family:var(--font-mono);font-weight:700;display:flex;align-items:center;gap:6px}
.lv-stat i{color:var(--cyan);font-size:11px;margin-bottom:2px}
.lv-stat-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);margin-bottom:4px;animation:lvPulse 1.8s ease-in-out infinite}

/* Gender + Age tag in user list (appended to nickname) */
.ga-tag{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-family:var(--font-mono);font-size:10px;font-weight:600;vertical-align:middle;line-height:1.4}
.ga-tag i{font-size:10px}
.ga-tag .ga-female{color:#ff7ab8}
.ga-tag .ga-male{color:#5cb8ff}
.ga-tag .ga-diverse{color:#c8a7ff}
.ga-age{color:var(--text);opacity:.85}

@keyframes lvPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.9)}}

@media (max-width:520px){
  .login-v2-card{padding:28px 22px 22px;border-radius:20px}
  .login-v2-head h1{font-size:24px}
  .login-v2-stats{flex-wrap:wrap}
}

/* Register-specific */
.register-card{max-width:480px}
.lv-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lv-color{padding:6px !important;height:48px;cursor:pointer}
.lv-color::-webkit-color-swatch-wrapper{padding:0}
.lv-color::-webkit-color-swatch{border-radius:8px;border:0}

.lv-gender{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lv-gender-opt{position:relative;cursor:pointer}
.lv-gender-opt input{position:absolute;opacity:0;pointer-events:none}
.lv-gender-opt span{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 8px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  color:var(--muted);font-size:13px;font-family:var(--font-display);
  transition:all .2s;
}
.lv-gender-opt span i{font-size:14px}
.lv-gender-opt:hover span{border-color:rgba(0,255,224,.35);color:#fff}
.lv-gender-opt input:checked + span{
  background:rgba(0,255,224,.10);border-color:var(--cyan);color:#fff;
  box-shadow:0 0 0 3px rgba(0,255,224,.12),inset 0 0 18px rgba(0,255,224,.08);
}
.lv-gender-opt input:checked + span i{color:var(--cyan)}

@media (max-width:520px){
  .lv-gender{grid-template-columns:1fr}
  .lv-grid-2{grid-template-columns:1fr}
}

/* Popup variant — smaller paddings */
.popup-register .login-v2-wrap.popup-wrap{min-height:100vh;padding:18px}
.popup-register .login-v2-card{padding:22px 22px 18px}
.popup-register .popup-bar .x{background:transparent;border:0;color:var(--muted);font-size:18px;cursor:pointer}
.popup-register .popup-bar .x:hover{color:var(--pink)}
.popup-register .popup-bar{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:13px;color:#fff}



/* ============================================================
   INDEX V2 — Modern landing page
   ============================================================ */
body.page-home .bg-grid,body.page-home .bg-glow{display:none}
body.page-home{background:#04040c}

.idx-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.idx-orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5;animation:idxOrb 22s ease-in-out infinite}
.idx-orb-1{width:540px;height:540px;background:var(--violet);top:-180px;left:-160px}
.idx-orb-2{width:520px;height:520px;background:var(--cyan);bottom:-220px;right:-180px;animation-delay:-7s}
.idx-orb-3{width:360px;height:360px;background:var(--pink);top:45%;left:55%;opacity:.28;animation-delay:-14s}
@keyframes idxOrb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-40px) scale(1.08)}66%{transform:translate(-50px,30px) scale(.94)}}
.idx-noise{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* Hero */
.idx-hero{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;max-width:1240px;margin:60px auto 80px;padding:0 28px}
.idx-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(0,255,224,.08);border:1px solid rgba(0,255,224,.25);font-family:var(--font-mono);font-size:12px;color:#caffea;margin-bottom:22px}
.idx-badge .idx-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:idxPulse 1.6s ease-in-out infinite}
.idx-badge b{color:var(--cyan)}
@keyframes idxPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}

.idx-headline{font-family:var(--font-display);font-weight:700;letter-spacing:-.5px;line-height:1.05;margin:0 0 22px;font-size:clamp(36px,5vw,64px);color:#fff}
.idx-grad{background:linear-gradient(120deg,var(--cyan) 10%,var(--violet) 55%,var(--pink) 95%);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.idx-sub{font-size:17px;line-height:1.55;color:#b9bcd8;max-width:540px;margin:0 0 28px}
.idx-sub b{color:#fff}

.idx-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.idx-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:12px;font-family:var(--font-display);font-weight:600;letter-spacing:.4px;font-size:15px;cursor:pointer;border:0;transition:transform .15s,box-shadow .2s,filter .2s;text-decoration:none}
.idx-btn .arr{transition:transform .2s}
.idx-btn:hover .arr{transform:translateX(4px)}
.idx-btn-primary{color:#0c0c1c;background:linear-gradient(120deg,var(--cyan),#7ef0ff);box-shadow:0 14px 30px rgba(0,255,224,.25),inset 0 1px 0 rgba(255,255,255,.4)}
.idx-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(0,255,224,.4);filter:brightness(1.05);color:#0c0c1c}
.idx-btn-ghost{color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14)}
.idx-btn-ghost:hover{background:rgba(131,56,236,.14);border-color:var(--violet);color:#fff;box-shadow:0 0 24px rgba(131,56,236,.25)}

.idx-livebar{display:flex;align-items:center;gap:14px}
.idx-avlist{display:flex;align-items:center}
.idx-av{width:36px;height:36px;border-radius:50%;border:2px solid #0c0c1c;margin-left:-10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:13px;color:#0c0c1c;object-fit:cover}
.idx-av:first-child{margin-left:0}
.idx-av-letter{color:#0c0c1c}
.idx-av-more{background:#1a1a3a;color:var(--cyan);font-size:11px}
.idx-livetext{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.idx-pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:idxPulse 1.6s ease-in-out infinite}

/* Hero mock-up cards */
.idx-hero-right{position:relative;height:480px}
.idx-mock{position:absolute;background:linear-gradient(145deg,rgba(20,20,40,.7),rgba(10,10,25,.85));border:1px solid rgba(255,255,255,.10);border-radius:18px;backdrop-filter:blur(20px);box-shadow:0 30px 70px #00000090;animation:idxFloat 6s ease-in-out infinite}
@keyframes idxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.idx-mock-1{top:20px;left:0;width:340px;padding:14px;animation-delay:-1s}
.idx-mock-bar{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:10px;font-family:var(--font-mono);font-size:12px;color:#caffea}
.dotg{width:9px;height:9px;border-radius:50%}.dotg.r{background:#ff5f56}.dotg.y{background:#ffbd2e}.dotg.g{background:#27c93f}
.idx-mock-bar b{margin-left:6px}
.idx-msg{display:flex;gap:8px;padding:8px 0;align-items:flex-start}
.idx-msg.me{flex-direction:row-reverse}
.idx-msg.me div{text-align:right}
.idx-msg-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:11px;color:#0c0c1c;flex-shrink:0}
.idx-msg b{font-size:12px;font-family:var(--font-display)}
.idx-msg p{margin:2px 0 0;color:#d4d6f0;font-size:13px;line-height:1.3}
.idx-mock-2{top:140px;right:0;padding:14px 18px;animation-delay:-3s}
.idx-mock-stat{display:flex;align-items:center;gap:12px}
.idx-mock-stat i{font-size:22px;color:#ffbe0b}
.idx-mock-stat b{display:block;color:#fff;font-family:var(--font-mono);font-size:14px}
.idx-mock-stat span{font-size:11px;color:var(--muted);font-family:var(--font-mono);letter-spacing:1px;text-transform:uppercase}
.idx-mock-3{bottom:30px;left:60px;padding:14px 18px;display:flex;gap:14px;animation-delay:-5s}
.idx-game-emoji{font-size:30px}

/* Stats row */
.idx-stats-row{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1100px;margin:0 auto 90px;padding:0 28px}
.idx-stat-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 14px;background:linear-gradient(145deg,rgba(20,20,40,.55),rgba(10,10,25,.65));border:1px solid rgba(255,255,255,.08);border-radius:18px;backdrop-filter:blur(16px);font-family:var(--font-mono);color:var(--muted);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;transition:transform .2s,border-color .2s}
.idx-stat-card:hover{transform:translateY(-4px);border-color:rgba(0,255,224,.35)}
.idx-stat-card i{color:var(--cyan);font-size:18px;margin-bottom:4px}
.idx-stat-card b{font-size:28px;color:#fff;font-family:var(--font-mono);font-weight:700}
.idx-stat-card.live .idx-stat-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);margin-bottom:6px;animation:idxPulse 1.6s ease-in-out infinite}

/* Section heads */
.idx-sec-head{text-align:center;margin-bottom:32px;position:relative;z-index:2}
.idx-eyebrow{display:inline-block;font-family:var(--font-mono);font-size:12px;color:var(--cyan);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.idx-sec-head h2{font-size:clamp(28px,3.5vw,42px);font-weight:700;letter-spacing:-.3px;margin:0;color:#fff}

/* Features */
.idx-features{position:relative;z-index:2;max-width:1240px;margin:0 auto 90px;padding:0 28px}
.idx-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.idx-feat{padding:26px 24px;background:linear-gradient(145deg,rgba(20,20,40,.55),rgba(10,10,25,.65));border:1px solid rgba(255,255,255,.08);border-radius:20px;backdrop-filter:blur(16px);transition:transform .2s,border-color .2s,box-shadow .25s;position:relative;overflow:hidden}
.idx-feat:hover{transform:translateY(-4px);border-color:rgba(0,255,224,.3);box-shadow:0 24px 50px #00000080}
.idx-feat.wide{grid-column:span 2}
.idx-feat-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(0,255,224,.18),rgba(131,56,236,.18));color:var(--cyan);font-size:18px;margin-bottom:16px;border:1px solid rgba(0,255,224,.2)}
.idx-feat.f2 .idx-feat-icon{background:linear-gradient(135deg,rgba(255,190,11,.18),rgba(255,0,110,.18));color:var(--yellow);border-color:rgba(255,190,11,.25)}
.idx-feat.f3 .idx-feat-icon{background:linear-gradient(135deg,rgba(255,0,110,.18),rgba(131,56,236,.18));color:var(--pink);border-color:rgba(255,0,110,.25)}
.idx-feat.f4 .idx-feat-icon{background:linear-gradient(135deg,rgba(255,190,11,.18),rgba(0,245,160,.18));color:var(--yellow);border-color:rgba(255,190,11,.25)}
.idx-feat.f5 .idx-feat-icon{background:linear-gradient(135deg,rgba(131,56,236,.18),rgba(0,255,224,.18));color:var(--violet);border-color:rgba(131,56,236,.25)}
.idx-feat.f6 .idx-feat-icon{background:linear-gradient(135deg,rgba(0,245,160,.18),rgba(0,255,224,.18));color:var(--green);border-color:rgba(0,245,160,.25)}
.idx-feat h3{margin:0 0 6px;font-size:18px;color:#fff;font-weight:600}
.idx-feat p{margin:0;color:#b9bcd8;font-size:14px;line-height:1.5}
.idx-feat code{background:rgba(0,255,224,.08);color:var(--cyan);padding:1px 6px;border-radius:5px;font-size:12px}
.idx-game-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.idx-game-row span{padding:6px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;font-size:12px;font-family:var(--font-mono);color:#caffea}

/* Channel preview */
.idx-chan-preview{position:relative;z-index:2;max-width:1240px;margin:0 auto 90px;padding:0 28px}
.idx-chan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.idx-chan{position:relative;height:200px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.1);transition:transform .2s,box-shadow .25s;text-decoration:none;display:block}
.idx-chan:hover{transform:translateY(-4px);box-shadow:0 24px 50px #00000099}
.idx-chan-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.85) 100%)}
.idx-chan-body{position:relative;z-index:1;padding:18px;height:100%;display:flex;flex-direction:column;color:#fff}
.idx-chan-cat{align-self:flex-start;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#caffea;backdrop-filter:blur(4px)}
.idx-chan-body h3{margin:auto 0 4px;font-size:20px;color:#fff;font-weight:700}
.idx-chan-body p{margin:0 0 10px;color:#ffffffcc;font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.idx-chan-arrow{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(0,0,0,.6);color:var(--cyan);font-family:var(--font-mono);font-size:11px;border-radius:999px;align-self:flex-start;transition:gap .2s}
.idx-chan:hover .idx-chan-arrow{gap:10px}

/* Final CTA */
.idx-final-cta{position:relative;z-index:2;max-width:900px;margin:0 auto 100px;padding:0 28px}
.idx-final-card{padding:48px 32px;text-align:center;background:linear-gradient(145deg,rgba(20,20,40,.65),rgba(10,10,25,.75));border:1px solid rgba(255,255,255,.10);border-radius:24px;backdrop-filter:blur(20px);position:relative;overflow:hidden}
.idx-final-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(0,255,224,.18),transparent 60%);pointer-events:none}
.idx-final-card h2{font-size:clamp(26px,3vw,38px);margin:0 0 8px;color:#fff;position:relative}
.idx-final-card p{margin:0 0 24px;position:relative;font-size:15px}
.idx-final-card .idx-cta{justify-content:center;margin-bottom:0;position:relative}

/* Responsive */
@media (max-width:960px){
  .idx-hero{grid-template-columns:1fr;gap:60px;margin:40px auto 60px}
  .idx-hero-right{height:380px;order:-1;display:none}
  .idx-stats-row{grid-template-columns:repeat(2,1fr)}
  .idx-feat-grid{grid-template-columns:1fr 1fr}
  .idx-feat.wide{grid-column:span 2}
  .idx-chan-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .idx-stats-row{grid-template-columns:1fr 1fr;gap:10px}
  .idx-feat-grid{grid-template-columns:1fr}
  .idx-feat.wide{grid-column:span 1}
  .idx-chan-grid{grid-template-columns:1fr}
  .idx-final-card{padding:32px 22px}
}


/* ===== /candy — Bombons im Chat ============================== */
.msg.msg-candy .msg-text{display:none}
.candy-block{
  margin-top:6px;
  padding:12px 14px;
  background:linear-gradient(135deg,rgba(255,102,164,0.10),rgba(255,190,11,0.08));
  border:1px solid rgba(255,102,164,0.35);
  border-radius:14px;
  display:flex;flex-direction:column;gap:10px;
}
.candy-block .candy-head{
  font-size:13px;line-height:1.4;color:#ffd1e2
}
.candy-block .candy-foot{
  font-size:11px;letter-spacing:1px;color:#ffd1e2;opacity:.7;font-family:'JetBrains Mono',monospace
}
.candy-row{display:flex;flex-wrap:wrap;gap:8px}
.candy-btn{
  appearance:none;cursor:pointer;
  background:radial-gradient(circle at 30% 30%,#ff8ec5,#d6336c);
  border:1px solid #ff66a4;color:#fff;
  padding:8px 10px;border-radius:99px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;
  box-shadow:0 6px 14px rgba(255,102,164,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.candy-btn:hover:not(:disabled){transform:translateY(-2px) rotate(-3deg);box-shadow:0 10px 20px rgba(255,102,164,0.55)}
.candy-btn:active:not(:disabled){transform:translateY(0) scale(.97)}
.candy-btn .c-emoji{font-size:18px;line-height:1}
.candy-btn .c-claimer{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.5px}
.candy-btn.candy-claimed{
  background:rgba(255,255,255,0.05);
  border:1px dashed rgba(255,255,255,0.25);
  color:#aaa;
  cursor:default;
  box-shadow:none;
  filter:grayscale(.4);
}
.candy-btn.candy-claimed.candy-mine{
  border-color:#ffbe0b;color:#ffbe0b;filter:none;
  box-shadow:0 0 0 1px rgba(255,190,11,0.4) inset
}

/* ===== Profil-Sektion: Bombon-Überraschungen ============== */
.candy-surprises{display:flex;flex-direction:column;gap:8px}
.candy-surprise-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  background:rgba(255,102,164,0.07);
  border:1px solid rgba(255,102,164,0.25);
  border-radius:10px;
  font-size:13px;
}
.candy-surprise-row .cs-icon{font-size:22px;line-height:1}
.candy-surprise-row .cs-badge{font-weight:700;color:#ff8ec5}
.candy-surprise-row .cs-status{color:#cfd}
.candy-surprise-row .cs-time{
  margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:#9bb;opacity:.85
}
.candy-empty{opacity:.6;font-size:13px;font-style:italic}

/* ===== /away — Status-Badge hinter Nickname ===== */
.away-badge{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:6px;padding:1px 6px;border-radius:999px;
  background:rgba(192,132,252,0.14);border:1px solid rgba(192,132,252,0.45);
  font-size:12px;line-height:1.2;vertical-align:middle;
  box-shadow:0 0 8px rgba(192,132,252,0.25);
  cursor:help;
  animation:awayPulse 2.6s ease-in-out infinite;
}
@keyframes awayPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(192,132,252,0.30)}
  50%{box-shadow:0 0 0 6px rgba(192,132,252,0)}
}
.member-chip.is-away{opacity:.72;filter:saturate(0.85)}
.member-chip.is-away .nick-text{font-style:italic}
.member-chip.is-away .avatar-mini,
.member-chip.is-away .avatar-mini-img{filter:grayscale(0.4) brightness(0.92)}

/* ====== /code +fotorahmen / +feuer / +snow — Foto-Effekte im Profil ====== */
.av-wrap.pf-fx-fotorahmen,
.av-wrap.pf-fx-feuer,
.av-wrap.pf-fx-snow {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  isolation: isolate;
}

/* Funkelnder goldener Rahmen */
.av-wrap.pf-fx-fotorahmen {
  padding: 6px;
  background: conic-gradient(from 0deg,
    #fff7cf, #ffd700, #ffae00, #fff7cf,
    #ffd700, #b8860b, #ffec8b, #ffd700);
  box-shadow:
    0 0 12px 2px rgba(255,215,0,.85),
    0 0 28px 6px rgba(255,180,0,.55),
    inset 0 0 8px rgba(255,255,200,.6);
  animation: pf-fx-gold-spin 6s linear infinite,
             pf-fx-gold-pulse 1.8s ease-in-out infinite;
}
.av-wrap.pf-fx-fotorahmen::before,
.av-wrap.pf-fx-fotorahmen::after {
  content: "✨";
  position: absolute;
  font-size: 18px;
  pointer-events: none;
  filter: drop-shadow(0 0 4px #ffd700);
  animation: pf-fx-sparkle 1.6s ease-in-out infinite;
}
.av-wrap.pf-fx-fotorahmen::before { top: -6px; left: -6px; }
.av-wrap.pf-fx-fotorahmen::after  { bottom: -6px; right: -6px; animation-delay: .8s; }
.av-wrap.pf-fx-fotorahmen > img,
.av-wrap.pf-fx-fotorahmen > .avBig {
  border-radius: 50%;
  display: block;
  background: #0a1224;
}
@keyframes pf-fx-gold-spin   { to { filter: hue-rotate(360deg); } }
@keyframes pf-fx-gold-pulse  { 0%,100% { box-shadow: 0 0 12px 2px rgba(255,215,0,.85), 0 0 28px 6px rgba(255,180,0,.55); } 50% { box-shadow: 0 0 18px 4px rgba(255,235,120,1), 0 0 40px 10px rgba(255,200,0,.85); } }
@keyframes pf-fx-sparkle     { 0%,100% { opacity: .3; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(180deg); } }

/* Feuer-Effekt */
.av-wrap.pf-fx-feuer {
  box-shadow: 0 0 22px 6px rgba(255,90,0,.75), 0 0 44px 12px rgba(255,30,0,.45);
  border-radius: 50%;
}
.pf-fx-feuer-layer {
  position: absolute; inset: -10px;
  pointer-events: none;
  z-index: 2;
}
.pf-fx-feuer-layer span {
  position: absolute;
  bottom: -4px;
  font-size: 22px;
  filter: drop-shadow(0 0 6px #ff5a00);
  animation: pf-fx-fire-rise 1.4s ease-in infinite;
}
.pf-fx-feuer-layer span:nth-child(1) { left: 8%;  animation-delay: 0s;   }
.pf-fx-feuer-layer span:nth-child(2) { left: 28%; animation-delay: .3s; font-size: 26px; }
.pf-fx-feuer-layer span:nth-child(3) { left: 48%; animation-delay: .6s; font-size: 28px; }
.pf-fx-feuer-layer span:nth-child(4) { left: 68%; animation-delay: .2s; font-size: 24px; }
.pf-fx-feuer-layer span:nth-child(5) { left: 84%; animation-delay: .5s; }
@keyframes pf-fx-fire-rise {
  0%   { transform: translateY(0)    scale(.8); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-46px) scale(1.3); opacity: 0; }
}

/* Schnee-Effekt */
.av-wrap.pf-fx-snow {
  box-shadow: 0 0 18px 4px rgba(180,220,255,.75), inset 0 0 12px rgba(220,240,255,.5);
  border-radius: 50%;
}
.pf-fx-snow-layer {
  position: absolute; inset: -14px -6px -2px -6px;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.pf-fx-snow-layer span {
  position: absolute;
  top: -10px;
  color: #e8f4ff;
  font-size: 14px;
  text-shadow: 0 0 6px #bfe2ff;
  animation: pf-fx-snow-fall linear infinite;
}
.pf-fx-snow-layer span:nth-child(1) { left:  5%; animation-duration: 3.2s; animation-delay: 0s;    }
.pf-fx-snow-layer span:nth-child(2) { left: 20%; animation-duration: 4.1s; animation-delay: .4s; font-size: 18px; }
.pf-fx-snow-layer span:nth-child(3) { left: 35%; animation-duration: 2.8s; animation-delay: .9s; }
.pf-fx-snow-layer span:nth-child(4) { left: 50%; animation-duration: 3.7s; animation-delay: .2s; font-size: 16px; }
.pf-fx-snow-layer span:nth-child(5) { left: 65%; animation-duration: 3.4s; animation-delay: 1.1s; }
.pf-fx-snow-layer span:nth-child(6) { left: 80%; animation-duration: 4.3s; animation-delay: .6s; font-size: 18px; }
.pf-fx-snow-layer span:nth-child(7) { left: 92%; animation-duration: 3.0s; animation-delay: 1.4s; }
@keyframes pf-fx-snow-fall {
  0%   { transform: translateY(0)    rotate(0);    opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(120px) rotate(360deg); opacity: 0; }
}

/* ===== Tombola v2 — single Tombola-style window (top-right) ===== */
.tombola-widget{width:300px;background:linear-gradient(180deg,#1a0033 0%,#2a0040 40%,#0a0a18 100%);border:2px solid var(--yellow);border-radius:18px;overflow:hidden}
.tombola-widget .tw-head{background:linear-gradient(90deg,#ffbe0b33,#ff006e22);border-bottom:1px solid #ffbe0b66}
.tombola-widget .tw-progress-wrap{margin:8px 12px 6px;height:14px;border-radius:7px}
.tw-drum-stage{padding:6px 12px 2px;text-align:center}
.tw-drum{position:relative;width:140px;height:140px;margin:0 auto 6px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#ffbe0b 0 36deg,#ff006e 36deg 72deg,#8338ec 72deg 108deg,#3a86ff 108deg 144deg,#06d6a0 144deg 180deg);
  box-shadow:0 0 26px rgba(255,190,11,.5), inset 0 0 18px rgba(0,0,0,.55);
  border:4px solid #ffbe0b}
.tw-drum.spinning{animation:twDrumSpin .5s linear infinite}
@keyframes twDrumSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.tw-drum-rim{position:absolute;inset:-6px;border-radius:50%;border:2px dashed #ffbe0b88;pointer-events:none;opacity:.6}
.tw-drum-inner{position:absolute;inset:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1a0033,#06060f);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-mono);font-weight:700;font-size:13px;text-align:center;line-height:1.2;padding:4px;text-shadow:0 0 10px var(--yellow)}
.tw-drum.spinning .tw-drum-inner{animation:twDrumSpinBack .5s linear infinite}
@keyframes twDrumSpinBack{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
.tw-drum-pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:16px solid #fff;filter:drop-shadow(0 0 6px #fff)}
.tw-drum-winners{margin-top:4px}
.tw-drum-title{color:var(--yellow);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.tw-drum-list{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}

/* Meta row: Pot | Lose */
.tw-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 8px}
.tw-meta-cell{background:#06061588;border:1px solid #ffbe0b55;border-radius:10px;padding:6px 8px;text-align:center}
.tw-meta-cell span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#ffbe0bcc;font-family:var(--font-mono)}
.tw-meta-cell b{display:block;font-size:18px;color:#fff;font-family:var(--font-mono);text-shadow:0 0 10px var(--yellow)}
.tw-meta-cell.tw-level b small{font-size:11px;color:#ffbe0b99;font-weight:400;margin-left:2px}

/* Buy row */
.tw-buy-row{display:flex;gap:6px;align-items:stretch}
.tw-qty{display:flex;align-items:stretch;background:#06061588;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tw-qty-btn{background:transparent;border:0;color:var(--yellow);font-size:18px;width:28px;cursor:pointer;font-weight:700}
.tw-qty-btn:hover{background:#ffbe0b22}
.tw-qty input{width:34px;background:transparent;border:0;color:#fff;text-align:center;font-family:var(--font-mono);font-weight:700;font-size:14px;padding:0}
.tw-qty input::-webkit-outer-spin-button,.tw-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tw-buy-btn{flex:1;justify-content:center;font-size:12px;padding:8px 6px}
.tw-mine{margin-top:8px;font-size:11px;color:var(--muted);text-align:center;font-family:var(--font-mono)}
.tw-mine b{color:#fff}

/* === /modcode Sprechblase === */
@keyframes mc-pop {
  0%   { transform: scale(.4) rotate(-6deg); opacity: 0; }
  55%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
  80%  { transform: scale(.96) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes mc-wiggle {
  0%,100% { transform: rotate(-2deg); }
  50%     { transform: rotate(2deg); }
}
@keyframes mc-bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes mc-float {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-4px) rotate(2deg); }
}