html { margin-top: 0 !important; scroll-behavior: smooth; background: #12150F; height: 100%; }
body { margin-top: 0 !important; }
#wpadminbar { display: none !important; }
:root {
--green: #3DD639; --green-light: #72F56E; --white: #FFFFFF;
--dark: #12150F; --dark2: #181D17; --dark3: #212921;
--card-bg: rgba(13,17,13,0.6); --card-bg-strong: rgba(13,17,13,0.94); --border: rgba(61,214,57,0.18);
--border-strong: rgba(61,214,57,0.35); --text: #E8F0E8; --muted: #E8F0E8;
--radius-card: 16px; --radius-btn: 8px;
}
#profil, #spiele { padding: 60px 5vw 80px; max-width: 1100px; margin: 0 auto; }
.profil-guest { max-width: 460px; margin: 0 auto; text-align: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 40px 28px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 16px 44px rgba(0,0,0,0.4); }
.profil-guest h2 { font-family: var(--font-display), sans-serif; font-size: 1.8rem; letter-spacing: 0.5px; margin-bottom: 10px; }
.profil-guest p { color: var(--muted); opacity: .8; font-size: 0.92rem; margin-bottom: 24px; }
.profil-guest > div { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 300px; margin: 0 auto; }
.profil-guest .nav-login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0; padding: 13px 18px; font-size: 0.95rem; }
.profil-guest .nav-login-btn span { display: inline; }
.profil-guest .nav-login-btn svg { width: 18px; height: 18px; }
.profil-header { display: flex; align-items: center; gap: 20px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; flex-wrap: wrap; margin-bottom: 12px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 16px 44px rgba(0,0,0,0.4); }
.profil-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--green); flex-shrink: 0; }
.profil-avatar-fallback { width: 72px; height: 72px; border-radius: 50%; background: var(--dark2); border: 2px solid var(--green); display: flex; align-items: center; justify-content: center; font-family: var(--font-display), sans-serif; font-size: 28px; color: var(--green); flex-shrink: 0; }
.profil-header h2 { font-family: var(--font-display), sans-serif; font-size: 1.7rem; letter-spacing: 0.5px; margin-bottom: 6px; }
.profil-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; padding: 4px 12px; border-radius: 100px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--muted); opacity: .85; margin: 2px 4px 2px 0; }
.profil-chip.twitch { color: #fff; background: #9146FF; border-color: #9146FF; opacity: 1; }
.profil-chip.kick { color: #08130a; background: #53FC18; border-color: #53FC18; opacity: 1; }
.profil-link-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.profil-link-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; padding: 5px 12px; border-radius: 100px; text-decoration: none; border: 1px solid var(--border); color: var(--muted); background: rgba(255,255,255,0.04); }
.profil-link-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.profil-link-btn.profil-link-kick { color: #53FC18; border-color: rgba(83,252,24,0.4); background: rgba(83,252,24,0.1); }
.profil-link-btn.profil-link-kick:hover { background: rgba(83,252,24,0.2); }
.profil-link-btn.profil-link-twitch { color: #b98bff; border-color: rgba(145,70,255,0.4); background: rgba(145,70,255,0.1); }
.profil-link-btn.profil-link-twitch:hover { background: rgba(145,70,255,0.2); }
.profil-section-title { font-family: var(--font-display), sans-serif; font-size: 1.2rem; letter-spacing: 0.5px; margin: 30px 0 12px; color: var(--green); }
.pf-hero { position:relative; display:grid; grid-template-columns: 1fr minmax(240px, 340px); gap:24px; align-items:center; padding:26px 28px; margin-bottom:14px;
background: radial-gradient(120% 140% at 0% 0%, rgba(61,214,57,.16), transparent 55%), var(--card-bg); border:1px solid var(--border-strong); border-radius: var(--radius-card);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 16px 44px rgba(0,0,0,.45); }
.pf-id { display:flex; align-items:center; gap:18px; min-width:0; }
.pf-id .profil-avatar, .pf-id .profil-avatar-fallback { width:84px; height:84px; box-shadow: 0 0 0 4px rgba(61,214,57,.15), 0 0 26px rgba(61,214,57,.35); }
.pf-id-txt { min-width:0; }
.pf-id h2 { font-family: var(--font-display), sans-serif; font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing:.5px; line-height:1.05; margin:0 0 8px; color: var(--white); overflow-wrap:anywhere; }
.pf-chips { display:flex; flex-wrap:wrap; gap:6px; }
.pf-chips .profil-chip { margin:0; }
.pf-balance { background: rgba(0,0,0,.25); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
.pf-bal-l { font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color: rgba(232,240,232,.6); font-weight:700; }
.pf-bal-v { font-family: var(--font-display), sans-serif; font-weight:800; font-size: 2.3rem; line-height:1.05; color: var(--green); text-shadow: 0 0 22px rgba(61,214,57,.35); }
.pf-bal-none { font-size:.85rem; color: rgba(232,240,232,.75); margin-top:4px; }
.pf-prog { margin-top:10px; }
.pf-prog-bar { height:8px; border-radius:99px; background: rgba(255,255,255,.07); overflow:hidden; }
.pf-prog-bar span { display:block; height:100%; border-radius:99px; background: linear-gradient(90deg, #2fae2c, var(--green-light)); box-shadow: 0 0 12px rgba(61,214,57,.5); }
.pf-prog-txt { font-size:.76rem; color: rgba(232,240,232,.75); margin-top:6px; }
.pf-prog-txt b { color: var(--text); }
.pf-link { color: var(--green); font-weight:700; text-decoration:none; }
.pf-id-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.pf-id-actions .profil-link-btn { margin:0; }
.pf-logout { display:inline-flex; align-items:center; font-size:.74rem; font-weight:700; color: rgba(232,240,232,.65); text-decoration:none; padding:6px 12px; border-radius:99px; border:1px solid var(--border); background: rgba(255,255,255,.03); transition: color .15s, border-color .15s, background .15s; }
.pf-logout:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,.06); }
.pf-chips .profil-chip svg { width:13px; height:13px; flex-shrink:0; }
.pf-logo { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; }
.pf-logo svg { width:17px; height:17px; }
.pf-logo--twitch { background:#9146FF; color:#fff; } .pf-logo--kick { background:#53FC18; color:#08130a; }
.pf-notice { display:block; margin: 0 0 10px; padding: 11px 16px; border-radius:12px; border:1px solid var(--border-strong); background: rgba(61,214,57,.08); color: var(--text); text-decoration:none; font-size:.88rem; }
.pf-notice b { color: var(--green); }
.pf-notice--gold { border-color: rgba(255,193,7,.55); background: linear-gradient(90deg, rgba(255,193,7,.16), rgba(255,193,7,.04)); }
.pf-notice--gold b { color: #ffc107; }
.pf-tabs { display:flex; gap:4px; padding:4px; margin: 6px 0 18px; border:1px solid var(--border); border-radius:999px; background: var(--card-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow-x:auto; scrollbar-width:none; }
.pf-tabs::-webkit-scrollbar { display:none; }
.pf-tab { flex:1 0 auto; border:0; background:transparent; color: rgba(232,240,232,.7); font: inherit; font-size:.86rem; font-weight:700; padding:9px 16px; border-radius:999px; cursor:pointer; white-space:nowrap; transition: background .15s, color .15s; }
.pf-tab:hover { color: var(--text); }
.pf-tab.on { background: var(--green); color:#08130a; }
.pf-tab-n { display:inline-block; min-width:18px; padding:1px 6px; border-radius:99px; background:#ff5a5f; color:#fff; font-size:.68rem; margin-left:4px; }
.pf-tab.on .pf-tab-n { background:#08130a; color: var(--green); }
.pf-panel[hidden] { display:none; }
.pf-panel > .profil-section-title:first-child { margin-top: 0; }
.pf-kpi { text-align:left; font: inherit; color: inherit; cursor:pointer; transition: border-color .15s, transform .15s; }
.pf-kpi:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.pf-kpis .n { font-size: 1.7rem; }
.pf-quick { display:grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin-top:4px; }
.pf-q { display:grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap:12px; align-items:center; text-align:left; padding:14px 16px; border-radius:14px; border:1px solid var(--border); background: var(--card-bg); color: var(--text); text-decoration:none; font: inherit; cursor:pointer; transition: border-color .15s, transform .15s; }
.pf-q:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.pf-q span { grid-row: span 2; font-size:1.6rem; }
.pf-q b { font-size:.92rem; }
.pf-q small { font-size:.72rem; color: rgba(232,240,232,.62); }
.pf-records .hof-chips { margin-top: 2px; }
@media (max-width: 760px) {
.pf-hero { grid-template-columns: 1fr; padding:22px 18px 18px; gap:16px; }
.pf-id .profil-avatar, .pf-id .profil-avatar-fallback { width:64px; height:64px; }
.pf-bal-v { font-size: 2rem; }
.pf-tabs { border-radius:14px; }
.pf-tab { padding:9px 12px; font-size:.8rem; }
}
@media (max-width: 560px) {
.pf-id { flex-direction:column; text-align:center; gap:12px; }
.pf-id-txt { width:100%; }
.pf-chips, .pf-id-actions { justify-content:center; }
.pf-id h2 { font-size:1.6rem; }
.pf-id h2.pf-name-md { font-size:1.35rem; }
.pf-id h2.pf-name-sm { font-size:1.12rem; }
.pf-tabs { display:grid; grid-template-columns: 1fr 1fr; gap:4px; overflow:visible; }
.pf-tab { padding:9px 8px; }
.pf-quick { grid-template-columns: 1fr 1fr; gap:10px; }
.pf-q { grid-template-columns: 1fr; row-gap:2px; padding:12px; }
.pf-q span { grid-row:auto; font-size:1.4rem; margin-bottom:2px; }
.pf-q b { font-size:.86rem; }
.pf-records .hof-chip { padding:10px 12px; }
}
.pf-bx { display: contents; }
.pf-chip-gold { color:#1a1300 !important; background:#ffc107 !important; border-color:#ffc107 !important; opacity:1 !important; font-weight:700; }
.pf-badge-strip { margin: 12px 0 14px; }
.pf-badge-strip-in { display:flex; align-items:center; gap:14px; width:100%; padding:12px 16px; border-radius:14px; border:1px solid var(--border); background: var(--card-bg); color: var(--text); font: inherit; cursor:pointer; text-align:left; transition: border-color .15s; }
.pf-badge-strip-in:hover { border-color: var(--border-strong); }
.pf-bs-l { font-size:.86rem; white-space:nowrap; } .pf-bs-l b { color: var(--green); }
.pf-bs-icons { flex:1; min-width:0; display:flex; gap:6px; font-size:1.3rem; overflow:hidden; }
.pf-bs-icons small { font-size:.78rem; color: rgba(232,240,232,.65); align-self:center; }
.pf-bs-more { font-size:.8rem; font-weight:700; color: var(--green); white-space:nowrap; }
.pf-badge-cat { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: rgba(232,240,232,.6); margin: 18px 0 8px; }
.pf-badge-cat:first-child { margin-top: 0; }
.pf-badge-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap:10px; }
.pf-badge { position:relative; padding:14px; border-radius:14px; border:1px solid var(--border); background: rgba(255,255,255,.02); text-align:center; opacity:.6; }
.pf-badge.on { opacity:1; background: radial-gradient(120% 90% at 50% 0%, rgba(61,214,57,.16), transparent 65%), var(--card-bg); border-color: var(--border-strong); }
.pf-badge.new { border-color:#ffc107; box-shadow: 0 0 0 2px rgba(255,193,7,.25), 0 0 22px rgba(255,193,7,.25); }
.pf-badge-ic { font-size:2rem; line-height:1.1; margin-bottom:6px; filter: grayscale(1); }
.pf-badge.on .pf-badge-ic { filter:none; }
.pf-badge-n { font-weight:800; font-size:.88rem; }
.pf-badge-d { font-size:.72rem; color: rgba(232,240,232,.65); margin-top:3px; line-height:1.35; }
.pf-badge-s { font-size:.7rem; color: var(--green); margin-top:6px; font-weight:700; }
.pf-badge:not(.on) .pf-badge-s { color: rgba(232,240,232,.6); }
.pf-badge-p { height:5px; border-radius:99px; background: rgba(255,255,255,.08); margin-top:8px; overflow:hidden; }
.pf-badge-p span { display:block; height:100%; background: var(--green); border-radius:99px; }
.pf-badge-new { font-size:.6rem; background:#ffc107; color:#1a1300; padding:1px 6px; border-radius:6px; vertical-align:middle; }
.pf-toast { position:fixed; left:50%; bottom:90px; transform: translate(-50%, 20px); opacity:0; z-index:99990; padding:12px 18px; border-radius:14px; background: rgba(13,17,13,.96); border:1px solid #ffc107; color: var(--text); font-size:.9rem; box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: opacity .3s, transform .3s; pointer-events:none; max-width: calc(100vw - 32px); }
.pf-toast.show { opacity:1; transform: translate(-50%, 0); }
.pf-toast b { color:#ffc107; }
.pf-form { padding:18px; display:flex; flex-direction:column; gap:14px; }
.pf-field { display:flex; flex-direction:column; gap:6px; }
.pf-field > span { font-size:.78rem; font-weight:700; letter-spacing:.04em; color: rgba(232,240,232,.75); }
.pf-field input, .pf-field select, .pf-field textarea { background: rgba(0,0,0,.3); border:1px solid var(--border); color: var(--text); border-radius:10px; padding:10px 12px; font: inherit; font-size:.92rem; max-width:420px; }
.pf-field input:focus, .pf-field select:focus, .pf-field textarea:focus { outline:none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(61,214,57,.15); }
.pf-field small { font-size:.74rem; color: rgba(232,240,232,.6); line-height:1.4; max-width:560px; }
.pf-form-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pf-form-msg { font-size:.82rem; } .pf-form-msg.ok { color: var(--green); } .pf-form-msg.bad { color:#ff8f92; }
.pf-linked { padding:4px 0; }
.pf-link-row { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border); }
.pf-link-row:last-child { border-bottom:0; }
.pf-link-ic { font-size:1.2rem; } .pf-link-main { flex:1; display:flex; flex-direction:column; } .pf-link-main small { font-size:.74rem; color: rgba(232,240,232,.6); }
.pf-danger-t { color:#ff8f92 !important; }
.pf-danger { padding:16px 18px; border-color: rgba(229,72,77,.35) !important; }
.pf-danger p { font-size:.84rem; color: rgba(232,240,232,.8); line-height:1.5; margin:0 0 8px; }
.pf-del summary { cursor:pointer; color:#ff8f92; font-weight:700; font-size:.86rem; margin-top:6px; }
.pf-del .pf-form { padding:14px 0 0; }
.pf-btn-danger { background:#e5484d; color:#fff; border:0; border-radius:10px; padding:10px 16px; font: inherit; font-weight:800; font-size:.86rem; cursor:pointer; }
.pf-btn-danger:hover { background:#ff5a5f; }
@media (max-width: 560px) {
.pf-tabs { grid-template-columns: 1fr 1fr 1fr; }
.pf-tab { font-size:.74rem; padding:9px 4px; }
.pf-badge-grid { grid-template-columns: 1fr 1fr; }
.pf-badge-strip-in { flex-wrap:wrap; gap:8px; }
.pf-bs-icons { flex-basis:100%; order:3; }
}
.pf-main { min-width:0; display:flex; flex-direction:column; gap:14px; }
.pf-id { align-items:center; }
.pf-id-txt { flex:1; }
.pf-id h2 { margin:0 0 6px; }
.pf-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; font-size:.8rem; color: rgba(232,240,232,.62); }
.pf-mini { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; }
.pf-mini svg { width:13px; height:13px; }
.pf-since { margin-left:2px; }
.pf-hero .pf-logout { align-self:flex-start; gap:6px; flex-shrink:0; }
.pf-logout-ic { width:14px; height:14px; }
.pf-stats { display:grid; grid-template-columns: repeat(3, 1fr); border:1px solid var(--border); border-radius:14px; background: rgba(0,0,0,.22); overflow:hidden; max-width:520px; }
.pf-stat { padding:10px 12px; text-align:center; min-width:0; }
.pf-stat + .pf-stat { border-left:1px solid var(--border); }
.pf-stat-v { display:flex; align-items:center; justify-content:center; gap:6px; font-family: var(--font-display), sans-serif; font-size:1.25rem; font-weight:800; line-height:1.1; color: var(--text); white-space:nowrap; }
.pf-stat-ic { font-size:1rem; }
.pf-stat[data-k="level"] b { color:#ffc107; }
.pf-stat-l { font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color: rgba(232,240,232,.55); font-weight:700; margin-top:3px; }
.pf-stats.is-loading b { opacity:.35; animation: pfPulse 1.1s ease-in-out infinite; }
.pf-stats.is-empty b { color: rgba(232,240,232,.4) !important; }
@keyframes pfPulse { 50% { opacity:.12; } }
.pf-hero .pf-id-actions { margin-top:0; }
.pf-tab { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.pf-tab-n { margin-left:0; }
@media (max-width: 760px) {
.pf-stats { max-width:none; }
}
@media (max-width: 560px) {
.pf-hero { padding:16px 14px 14px; gap:12px; }
.pf-main { gap:12px; }
.pf-id { flex-direction:row; text-align:left; gap:12px; align-items:center; }
.pf-id .profil-avatar, .pf-id .profil-avatar-fallback { width:56px; height:56px; flex-shrink:0; }
.pf-id h2 { font-size:1.35rem; margin-bottom:4px; }
.pf-id h2.pf-name-md { font-size:1.15rem; }
.pf-id h2.pf-name-sm { font-size:1rem; }
.pf-meta { font-size:.74rem; }
.pf-hero .pf-logout { width:36px; height:36px; padding:0; justify-content:center; align-self:center; }
.pf-hero .pf-logout-t { display:none; }
.pf-logout-ic { width:16px; height:16px; }
.pf-stat { padding:9px 6px; }
.pf-stat-v { font-size:1.08rem; gap:4px; }
.pf-stat-ic { font-size:.85rem; }
.pf-stat-l { font-size:.6rem; letter-spacing:.06em; }
.pf-balance { padding:12px 14px; }
.pf-bal-v { font-size:1.8rem; }
.pf-hero .pf-id-actions { justify-content:flex-start; }
.pf-tabs { grid-template-columns: repeat(3, 1fr); gap:6px; padding:6px; border-radius:16px; }
.pf-tab { position:relative; flex-direction:column; gap:2px; padding:8px 4px; border-radius:12px; font-size:.72rem; }
.pf-tab-ic { font-size:1.15rem; line-height:1; }
.pf-tab-t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.pf-tab-n { position:absolute; top:4px; right:8px; }
}
.hof-kpis.pf-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pf-chev { display:none; }
@media (max-width: 560px) {
.hof-kpis.pf-kpis { display:block; border:1px solid var(--border); border-radius:14px; background: var(--card-bg); overflow:hidden; margin-bottom:12px; }
.pf-kpis .pf-kpi { display:grid; grid-template-columns: 1fr auto auto; grid-template-areas: "l n c" "w n c"; align-items:center; column-gap:10px; width:100%; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; padding:12px 14px; backdrop-filter:none; -webkit-backdrop-filter:none; }
.pf-kpis .pf-kpi:last-child { border-bottom:0; }
.pf-kpis .pf-kpi:hover { transform:none; background: rgba(255,255,255,.03); }
.pf-kpis .pf-kpi .l { grid-area:l; margin:0; font-size:.8rem; text-transform:none; letter-spacing:0; color: var(--text); font-weight:700; }
.pf-kpis .pf-kpi .who { grid-area:w; margin-top:2px; font-size:.72rem; color: rgba(232,240,232,.6); }
.pf-kpis .pf-kpi .n { grid-area:n; font-size:1.25rem; }
.pf-chev { display:block; grid-area:c; font-size:1.3rem; color: rgba(232,240,232,.4); }
.pf-badge-strip { margin: 0 0 12px; }
.pf-badge-strip-in { flex-wrap:nowrap; gap:10px; padding:12px 14px; }
.pf-bs-icons { flex-basis:auto; order:0; font-size:1.1rem; }
.pf-bs-more { font-size:0; } .pf-bs-more::after { content:'›'; font-size:1.3rem; color: rgba(232,240,232,.4); }
.pf-q--dup { display:none; }
.pf-quick { grid-template-columns: 1fr 1fr; gap:8px; }
.pf-q { grid-template-columns: auto 1fr; padding:10px 12px; column-gap:8px; }
.pf-q span { grid-row: span 2; font-size:1.2rem; margin:0; }
.pf-q small { font-size:.66rem; }
.pf-records .hof-chips { display:block; border:1px solid var(--border); border-radius:14px; background: var(--card-bg); overflow:hidden; }
.pf-records .hof-chip { display:flex; justify-content:space-between; align-items:center; gap:10px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; padding:11px 14px; }
.pf-records .hof-chip:last-child { border-bottom:0; }
.pf-records .hof-chip .l { font-size:.82rem; color: var(--text); font-weight:700; }
.pf-records .hof-chip .v { margin:0; font-size:1rem; white-space:nowrap; }
.pf-records .hof-chip small { display:none; }
}
.sup-box { padding: 0; }
.sup-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.sup-head p { margin: 0; font-size: .9rem; opacity: .85; max-width: 520px; line-height: 1.5; }
.sup-head .nav-cta { border: 0; cursor: pointer; font-family: inherit; }
.sup-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 18px; background: none; border: 0; border-top: 1px solid var(--border); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sup-row:first-child { border-top: 0; }
.sup-row:hover { background: rgba(61,214,57,.06); }
.sup-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sup-row-title { font-weight: 700; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-row-meta { font-size: .78rem; opacity: .65; }
.sup-dot-i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5a5f; margin-right: 7px; vertical-align: middle; box-shadow: 0 0 8px rgba(255,90,95,.8); }
.profil-badge.sup-st-closed { background: rgba(232,240,232,.08); color: rgba(232,240,232,.6); }
.sup-new-badge { font-family: var(--font-body, inherit); font-size: .7rem; font-weight: 700; letter-spacing: 0; padding: 3px 9px; border-radius: 12px; background: #ff5a5f; color: #fff; vertical-align: middle; margin-left: 6px; }
.sup-notice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,90,95,.45); background: rgba(255,90,95,.10); color: var(--text); text-decoration: none; font-size: .92rem; }
.sup-notice b { color: var(--green); }
.nav-account-name.sup-dot { position: relative; padding-right: 14px; }
.nav-account-name.sup-dot::after { content: ''; position: absolute; top: 50%; right: 1px; width: 8px; height: 8px; margin-top: -6px; border-radius: 50%; background: #ff5a5f; box-shadow: 0 0 6px rgba(255,90,95,.9); }
html.sup-lock, html.sup-lock body { overflow: hidden; }
.sup-modal { position: fixed; inset: 0; z-index: 2147482500; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,7,4,.78); }
.sup-modal[hidden] { display: none; }
.sup-dialog { position: relative; width: 100%; max-width: 620px; max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; background: var(--card-bg-strong); border: 1px solid var(--border-strong); border-radius: 18px; padding: 22px 20px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.sup-x { position: sticky; top: 0; float: right; width: 38px; height: 38px; margin: -8px -6px 0 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--dark2); color: var(--text); font-size: 1rem; cursor: pointer; z-index: 2; }
.sup-title { margin: 0 0 4px; font-family: var(--font-display), sans-serif; font-size: 1.25rem; color: var(--green); overflow-wrap: anywhere; }
.sup-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.sup-label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 700; opacity: .9; }
.sup-label[hidden] { display: none; }
.sup-form input[type=text], .sup-form select, .sup-form textarea { width: 100%; box-sizing: border-box; background: var(--dark); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 11px 12px; font: inherit; font-size: .95rem; font-weight: 400; }
.sup-form textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.sup-form input:focus, .sup-form select:focus, .sup-form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(61,214,57,.15); }
.sup-file { font-size: .82rem; font-weight: 400; color: var(--text); }
.sup-file::file-selector-button { margin-right: 10px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--dark3); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.sup-file::file-selector-button:hover { border-color: var(--green); }
.sup-prev { display: flex; gap: 8px; flex-wrap: wrap; }
.sup-prev img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.sup-prev:empty { display: none; }
.sup-err { color: #ff8f92; font-size: .86rem; min-height: 0; }
.sup-err:empty { display: none; }
.sup-send { align-self: flex-start; border: 0; cursor: pointer; font-family: inherit; }
.sup-send:disabled { opacity: .6; cursor: default; }
.sup-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sup-close-t { background: none; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-btn); padding: 9px 14px; font: inherit; font-size: .85rem; cursor: pointer; }
.sup-close-t:hover { border-color: #ff8f92; color: #ff8f92; }
.sup-ticket-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-right: 40px; }
.sup-thread { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; max-height: 46vh; overflow: auto; padding: 2px; }
.sup-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.sup-msg.me { align-self: flex-end; background: rgba(61,214,57,.14); border: 1px solid rgba(61,214,57,.35); border-bottom-right-radius: 4px; }
.sup-msg.team { align-self: flex-start; background: var(--dark3); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.sup-msg-meta { font-size: .72rem; opacity: .65; margin-bottom: 4px; }
.sup-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sup-imgs img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.sup-closed-note { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(232,240,232,.06); font-size: .88rem; opacity: .85; }
@media (max-width: 560px) {
.sup-modal { padding: 0; align-items: flex-end; }
.sup-dialog { max-height: 92dvh; border-radius: 18px 18px 0 0; padding: 18px 16px max(16px, env(safe-area-inset-bottom)); }
.sup-head { padding: 14px; } .sup-row { padding: 12px 14px; }
.sup-thread { max-height: 50vh; }
}
.profil-stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px; }
.profil-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 18px; text-align: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.profil-stat-card .num { font-family: var(--font-display), sans-serif; font-size: 1.9rem; color: var(--green); }
.profil-stat-card .label { font-size: 0.78rem; color: var(--muted); opacity: .75; margin-top: 2px; }
.botrix-tier-grid { display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; }
.botrix-tier-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; text-align:center; min-width:140px; flex:1 1 140px; }
.botrix-tier-card .val { font-family: var(--font-display), sans-serif; font-size: 1.3rem; color: var(--green); }
.botrix-tier-card .pts { font-size: 0.78rem; color: var(--muted); margin: 2px 0 10px; }
.botrix-tier-card button { width:100%; padding:9px 10px; border-radius:8px; border:none; background:var(--green); color:#08130a; font-weight:700; font-size:0.85rem; cursor:pointer; }
.botrix-tier-card button:disabled { background:#333; color:#888; cursor:not-allowed; }
.cas-shop { display:flex; flex-direction:column; gap:8px; padding:16px 18px; }
.cas-lbl { font-size:.8rem; color:var(--muted); font-weight:600; margin-top:6px; }
.cas-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
.cas-pick { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:10px; border:1px solid var(--border); background:var(--card-bg); color:var(--text); font-weight:600; font-size:.85rem; cursor:pointer; text-align:left; min-width:0; }
.cas-pick img { width:28px; height:28px; object-fit:contain; border-radius:6px; flex:none; }
.cas-pick span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cas-pick.on, .cas-amt.on { border-color:var(--green); box-shadow:0 0 0 2px rgba(61,214,57,.35); }
.cas-amounts { margin-top:0; }
.cas-amt { cursor:pointer; font:inherit; color:inherit; }
.cas-amt:disabled { opacity:.45; cursor:not-allowed; }
.cas-user { padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--card-bg); color:var(--text); font-size:.9rem; max-width:360px; }
.cas-redeem { align-self:flex-start; padding:10px 18px; border-radius:8px; border:none; background:var(--green); color:#08130a; font-weight:700; cursor:pointer; margin-top:4px; }
.cas-redeem:disabled { background:#333; color:#888; cursor:not-allowed; }
.cas-help { font-size:.75rem; color:var(--muted); margin-top:-2px; }
.cas-crypto { font-family: ui-monospace, Menlo, Consolas, monospace; font-size:.8rem; max-width:520px; }
.shop-wk { margin-top:12px; padding:9px 13px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.03); font-size:.82rem; line-height:1.45; }
.shop-wk.full { border-color:rgba(255,152,0,.5); background:rgba(255,152,0,.08); color:#ffcc80; }
.cas-shop .shop-wk { margin-top:4px; }
.profil-badge.st-fix { background:rgba(255,152,0,.15); color:#ffb74d; border:1px solid rgba(255,152,0,.4); }
.psc-fix { border-left:3px solid #ffb74d; padding-left:10px; color:#ffcc80; }
.cas-fix { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.psc-crypto { word-break:break-all; font-family: ui-monospace, Menlo, Consolas, monospace; font-size:.85em; }
.botrix-delivery { margin-top:12px; padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:rgba(61,214,57,.06); font-size:.82rem; line-height:1.5; color:var(--text); }
.botrix-result { margin-top:14px; font-size:0.9rem; }
.slot-badge { font-family: sans-serif; font-size:0.65rem; letter-spacing:.5px; text-transform:uppercase; background:rgba(255,193,7,.15); color:#ffc107; border:1px solid rgba(255,193,7,.4); border-radius:6px; padding:2px 7px; margin-left:8px; vertical-align:middle; }
.spiele-lobby { max-width:1000px; margin:6px auto 0; }
.spiele-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.spiele-grid > .spiele-tile { flex:0 0 calc((100% - 32px) / 3); width:auto; }
@media (max-width: 900px) { .spiele-grid > .spiele-tile { flex-basis:calc((100% - 16px) / 2); } }
@media (max-width: 520px) { .spiele-grid > .spiele-tile { flex-basis:100%; } }
.spiele-search { display:flex; align-items:center; gap:10px; max-width:420px; margin:0 auto 18px; padding:0 16px; height:48px; border-radius:999px;
background:var(--card-bg); border:1px solid var(--border); transition:border-color .15s; }
.spiele-search:focus-within { border-color:var(--green); }
.spiele-search svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; }
.spiele-search input { flex:1; min-width:0; height:100%; background:transparent; border:0; outline:none; color:var(--text); font:inherit; font-size:.95rem; }
.spiele-search input::placeholder { color:var(--muted); }
.spiele-search:focus-within { box-shadow:0 0 0 3px rgba(61,214,57,.15); }
.spiele-search input, .spiele-search input:focus, .spiele-search input:focus-visible { outline:none !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; -webkit-appearance:none; appearance:none; }
.spiele-search input::-webkit-search-decoration, .spiele-search input::-webkit-search-results-button { -webkit-appearance:none; }
.spiele-search input::-webkit-search-cancel-button { -webkit-appearance:none; width:16px; height:16px; cursor:pointer; opacity:.7;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa7a0' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat; }
.spiele-search input::-webkit-search-cancel-button:hover { opacity:1; }
.spiele-empty { text-align:center; color:var(--muted); margin:18px 0 0; }
.spiele-tile[hidden] { display:none; }
.rf-card { max-width:1000px; margin:26px auto 0; padding:18px; border-radius:18px; border:1px solid rgba(230,184,92,.45); background:radial-gradient(120% 140% at 0% 0%, rgba(230,184,92,.16), rgba(230,184,92,.03) 55%), var(--card-bg, #121811); box-shadow:0 18px 40px rgba(0,0,0,.35); }
.rf-head { display:flex; align-items:center; gap:14px; }
.rf-head > div { flex:1; min-width:0; }
.rf-head small { color:#e6b85c; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.rf-head h3 { margin:2px 0 0; font-size:1.25rem; }
.rf-ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(180deg,#ffe29b,#d29d39); color:#2a1a00; flex:0 0 auto; }
.rf-ic svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rf-pool { text-align:right; } .rf-pool b { display:block; font-family:var(--font-display), sans-serif; font-size:2rem; line-height:1; color:#ffe3a3; } .rf-pool small { color:var(--muted); font-size:.72rem; }
.rf-prizes { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 10px; }
.rf-prize { padding:8px 12px; border-radius:12px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; }
.rf-prize small { color:var(--muted); font-size:.7rem; } .rf-prize b { font-size:1rem; }
.rf-meta { display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:.84rem; }
.rf-note { color:#cfc4a8; font-size:.84rem; margin:10px 0 0; }
.rf-act { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.rf-act > span { color:var(--text); font-size:.9rem; }
.rf-btn { padding:12px 22px; border-radius:12px; border:0; cursor:pointer; font:inherit; font-weight:800; font-size:.95rem; background:linear-gradient(180deg,#ffe29b,#d29d39); color:#2a1a00; box-shadow:0 8px 20px rgba(230,184,92,.3); }
.rf-btn:disabled { opacity:.6; cursor:default; }
.rf-act small { color:#ff8f92; }
.rf-in { display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--green) !important; }
.rf-in svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; }
.rf-done { margin-top:14px; } .rf-done p { color:var(--muted); }
.rf-win { margin:8px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:4px; font-size:.9rem; }
.rf-win span { color:#ffe3a3; font-weight:700; margin-left:6px; }
.rf-last { margin-top:12px; font-size:.84rem; color:var(--muted); } .rf-last summary { cursor:pointer; }
@media (max-width: 520px) { .rf-head h3 { font-size:1.05rem; } .rf-pool b { font-size:1.5rem; } .rf-btn { width:100%; } }
.spiele-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; max-width:1000px; margin:0 auto 14px; }
.spiele-chips { display:flex; gap:6px; flex-wrap:wrap; }
.spiele-chip { padding:8px 14px; border-radius:100px; border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--muted); font:inherit; font-size:.84rem; font-weight:700; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.spiele-chip:hover { color:var(--text); border-color:var(--border-strong); }
.spiele-chip.on { background:rgba(61,214,57,.14); border-color:rgba(61,214,57,.55); color:#fff; }
.spiele-chip[hidden] { display:none; }
.spiele-sort { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--muted); }
.spiele-sort select { background:var(--dark2); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 30px 8px 12px; font:inherit; font-size:.84rem; font-weight:600; }
@media (max-width: 640px) {
.spiele-tools { flex-direction:column; align-items:stretch; gap:8px; }
.spiele-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -4vw; padding:0 4vw 2px; }
.spiele-chips::-webkit-scrollbar { display:none; }
.spiele-chip { flex:0 0 auto; padding:7px 12px; font-size:.8rem; }
.spiele-sort { justify-content:space-between; width:100%; min-width:0; } .spiele-sort select { flex:0 1 220px; min-width:0; width:auto; }
}
.spiele-tile-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.spiele-tile-top .slot-badge { margin-left:0; }
.spiele-tile-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spiele-tile--soon { cursor:default; border-style:dashed; background:rgba(255,255,255,.02); --tile-accent:var(--border); --tile-glow:none; }
.spiele-tile--soon:hover { transform:none; box-shadow:none; border-color:var(--border); }
.spiele-tile--soon .spiele-tile-icon { opacity:.6; }
.spiele-tile--soon .spiele-tile-name { color:var(--muted); }
.spiele-tile-soon { color:var(--muted); font-weight:700; font-size:.85rem; padding:9px 0; }
.spiele-tile { position:relative; display:flex; flex-direction:column; gap:12px; text-align:left; width:100%; min-height:236px; height:100%; padding:20px 20px 18px; color:var(--text); font:inherit; cursor:pointer; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-card, 16px); overflow:hidden; transition:border-color .2s, transform .2s, box-shadow .2s; }
.spiele-tile::before { content:''; position:absolute; inset:0; background:var(--tile-glow); opacity:.9; pointer-events:none; }
.spiele-tile > * { position:relative; }
.spiele-tile:hover, .spiele-tile:focus-visible { border-color:var(--tile-accent); transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.4); outline:none; }
.spiele-tile:focus-visible { box-shadow:0 0 0 3px var(--tile-accent); }
.spiele-tile--slot { --tile-accent:#ffc107; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(255,193,7,.20), transparent 60%); }
.spiele-tile--razor { --tile-accent:#3dd639; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(61,214,57,.20), transparent 60%); }
.spiele-tile--roulette { --tile-accent:#e9c46a; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(233,196,106,.20), transparent 60%); }
.spiele-tile--ruediger { --tile-accent:#5cb8ff; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(92,184,255,.22), transparent 60%); }
.spiele-tile--chicken { --tile-accent:#3dd639; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(61,214,57,.22), transparent 60%); }
.spiele-tile--zentauri { --tile-accent:#e9c46a; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(233,196,106,.22), transparent 60%); }
.spiele-tile--blackjack { --tile-accent:#e6b85c; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(230,184,92,.22), transparent 60%); }
.spiele-tile--poker { --tile-accent:#3dd639; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(61,214,57,.2), transparent 60%); }
.spiele-tile--friedhelm { --tile-accent:#f7cf5a; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(247,207,90,.22), transparent 60%); }
.spiele-tile--ruediger .spiele-tile-name, .spiele-tile--friedhelm .spiele-tile-name { white-space:normal; font-size:1.35rem; }
.spiele-tile-icon svg { display:block; width:1em; height:1em; }
.spiele-tile-icon { font-size:3.2rem; line-height:1; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.spiele-tile-name { font-family:var(--font-display), sans-serif; font-size:1.7rem; letter-spacing:.5px; line-height:1.1; color:var(--white); }
.spiele-tile-meta { font-size:.8rem; line-height:1.5; color:var(--muted); }
.spiele-tile-foot { margin-top:auto; display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.spiele-tile-play { background:var(--tile-accent); color:#08130a; font-weight:800; font-size:.85rem; letter-spacing:.06em; padding:9px 20px; border-radius:999px; }
.spiele-back { display:inline-flex; align-items:center; gap:8px; margin:0 0 4px; padding:9px 16px; background:var(--dark2); color:var(--text); border:1px solid var(--border); border-radius:999px; font-size:.85rem; font-weight:700; cursor:pointer; transition:border-color .15s, color .15s; }
.spiele-back:hover, .spiele-back:focus-visible { border-color:var(--green); color:var(--green-light); outline:none; }
.spiele-view[hidden], .spiele-lobby[hidden] { display:none; }
@media (prefers-reduced-motion: reduce) { .spiele-tile { transition:none; } .spiele-tile:hover { transform:none; } }
.slot-box { position:relative; padding:22px 18px 18px; text-align:center; background: radial-gradient(120% 70% at 50% 0%, rgba(61,214,57,.10), transparent 62%), var(--card-bg); border-color: rgba(61,214,57,.28); box-shadow: 0 18px 44px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); }
.slot-inner { width:100%; max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.slot-topbar { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.slot-stat { background:rgba(0,0,0,.28); border:1px solid var(--border); border-radius:12px; padding:9px 8px 8px; min-width:0; }
.slot-stat-l { display:block; font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.slot-stat-v { display:block; font-family:var(--font-display), sans-serif; font-size:1.25rem; line-height:1.1; letter-spacing:.02em; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot-stat.gold .slot-stat-v { color:#ffc107; }
@keyframes slotBump { 0% { transform:scale(1); } 35% { transform:scale(1.12); } 100% { transform:scale(1); } }
.slot-stat-v.bump { animation: slotBump .5s ease-out; }
.slot-machine { position:relative; width:fit-content; max-width:100%; margin:4px auto 0; padding:0 24px; }
.slot-machine::before, .slot-machine::after { content:''; position:absolute; top:50%; margin-top:-10px; border-top:10px solid transparent; border-bottom:10px solid transparent; filter:drop-shadow(0 0 5px rgba(255,193,7,.7)); }
.slot-machine::before { left:0; border-left:14px solid #ffc107; }
.slot-machine::after { right:0; border-right:14px solid #ffc107; }
.slot-reels { position:relative; display:flex; gap:14px; width:fit-content; max-width:100%; margin:0 auto; padding:16px; border:3px solid transparent; border-radius:22px; background: linear-gradient(180deg,#080b08,#131a13) padding-box, linear-gradient(150deg,#f7dc7a 0%,#a9801c 38%,#2f8f2c 72%,#3dd639 100%) border-box; box-shadow: inset 0 0 26px rgba(0,0,0,.65), 0 0 34px rgba(61,214,57,.12), 0 10px 30px rgba(0,0,0,.45); transition: box-shadow .3s ease; }
.slot-reels::after { content:''; position:absolute; left:6px; right:6px; top:50%; height:2px; margin-top:-1px; background:rgba(255,193,7,.6); box-shadow:0 0 8px rgba(255,193,7,.7); pointer-events:none; z-index:3; }
.slot-reel { --cell:98px; position:relative; width:132px; height:calc(var(--cell) * 3); overflow:hidden; background:linear-gradient(180deg,#0d120d 0%,#1c251c 50%,#0d120d 100%); border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow: inset 0 0 14px rgba(0,0,0,.6); }
.slot-reel::before { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 68%, rgba(0,0,0,.75) 100%); }
.slot-reel::after { content:''; position:absolute; left:0; right:0; top:33.333%; height:33.334%; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(255,193,7,.07), rgba(255,193,7,.03)); border-top:1px solid rgba(255,193,7,.18); border-bottom:1px solid rgba(255,193,7,.18); }
.slot-strip { will-change: transform; transform: translate3d(0,0,0); }
.slot-cell { height:var(--cell); display:flex; align-items:center; justify-content:center; font-size:3.7rem; line-height:1; user-select:none; }
.slot-cell-img { width:calc(var(--cell) * .76); height:calc(var(--cell) * .76); object-fit:contain; pointer-events:none; user-select:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
.slot-reel.spin .slot-cell-img { filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) blur(.3px); }
.slot-reel.win .slot-cell-img { filter:drop-shadow(0 0 9px rgba(61,214,57,.85)); }
.slot-pay-icon { width:1.35em; height:1.35em; object-fit:contain; vertical-align:-.32em; margin:0 1px; }
.slot-cell-img { width:calc(var(--cell) * .76); height:calc(var(--cell) * .76); object-fit:contain; pointer-events:none; user-select:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
.slot-reel.spin .slot-cell-img { filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) blur(.3px); }
.slot-reel.win .slot-cell-img { filter:drop-shadow(0 0 9px rgba(61,214,57,.85)); }
.slot-pay-icon { width:1.35em; height:1.35em; object-fit:contain; vertical-align:-.32em; margin:0 1px; }
.slot-reel.spin .slot-strip { filter: blur(1.6px); }
@keyframes slotThud { 0% { transform: translateY(0); } 40% { transform: translateY(3px); } 100% { transform: translateY(0); } }
.slot-reel.landed { animation: slotThud .18s ease-out; }
@keyframes slotWinPulse { 0%,100% { box-shadow: 0 0 0 rgba(61,214,57,0); } 50% { box-shadow: 0 0 22px rgba(61,214,57,.9), inset 0 0 16px rgba(61,214,57,.45); } }
.slot-reel.win { border-color: var(--green); animation: slotWinPulse .7s ease-in-out 3; }
.slot-box.slot-win .slot-reels { box-shadow: inset 0 0 26px rgba(0,0,0,.65), 0 0 40px rgba(61,214,57,.4), 0 10px 30px rgba(0,0,0,.45); }
.slot-result { min-height:2.8em; display:flex; align-items:center; justify-content:center; padding:0 6px; font-size:1rem; font-weight:700; line-height:1.3; }
.slot-result.win { color:var(--green-light); font-family:var(--font-display), sans-serif; font-size:1.4rem; letter-spacing:.03em; text-shadow:0 0 18px rgba(61,214,57,.55); }
.slot-result.win.big { color:#ffc107; font-size:1.75rem; text-shadow:0 0 22px rgba(255,193,7,.6); animation: slotBump .6s ease-out; }
.slot-result.lose { color: var(--muted); }
.slot-controls { display:flex; flex-direction:column; gap:14px; }
.slot-bet-row { display:flex; flex-direction:column; align-items:center; gap:10px; }
.slot-stepper { display:inline-flex; align-items:stretch; background:var(--dark2); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.slot-step { width:48px; background:transparent; color:var(--text); border:none; font-size:1.35rem; line-height:1; cursor:pointer; transition:background .15s, color .15s; }
.slot-step:hover:not(:disabled) { background:rgba(61,214,57,.14); color:var(--green-light); }
.slot-step:disabled { color:#555; cursor:not-allowed; }
.slot-controls input { width:130px; text-align:center; background:transparent; color:var(--white); border:none; border-left:1px solid var(--border); border-right:1px solid var(--border); border-radius:0; padding:12px 8px; font-family:var(--font-display), sans-serif; font-size:1.35rem; letter-spacing:.03em; -moz-appearance:textfield; appearance:textfield; }
.slot-controls input::-webkit-outer-spin-button, .slot-controls input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.slot-controls input:focus { outline:none; background:rgba(61,214,57,.06); }
.slot-controls input:disabled { opacity:.6; }
.slot-quick { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.slot-quick button { min-width:56px; background:var(--dark2); color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:7px 13px; font-size:.78rem; font-weight:700; cursor:pointer; transition:border-color .15s, color .15s, background .15s; }
.slot-quick button:hover:not(:disabled) { border-color:var(--green); color:var(--text); }
.slot-quick button.on { background:rgba(61,214,57,.16); border-color:var(--green); color:var(--green-light); }
.slot-quick button:disabled { opacity:.55; cursor:not-allowed; }
.slot-actions { display:flex; flex-direction:column; gap:10px; }
.slot-spin-btn { width:100%; background:linear-gradient(180deg,#5cf05a,#2fb82c); color:#08130a; border:none; border-radius:12px; padding:15px 28px; font-weight:800; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; box-shadow:0 6px 20px rgba(61,214,57,.35), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .12s ease, box-shadow .2s ease, filter .2s ease; }
.slot-spin-btn:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 10px 26px rgba(61,214,57,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.slot-spin-btn:active:not(:disabled) { transform:translateY(1px); }
.slot-spin-btn:disabled { background:#2a2f2a; color:#7d857d; box-shadow:none; cursor:not-allowed; }
.slot-tools { display:flex; gap:8px; align-items:stretch; justify-content:center; }
.slot-auto-wrap { display:flex; gap:6px; align-items:stretch; }
.slot-auto-wrap select { width:auto; padding:0 10px; background:var(--dark2); color:inherit; border:1px solid var(--border); border-radius:10px; font-size:.85rem; cursor:pointer; }
.slot-auto-btn { background:var(--dark2); color:inherit; border:1px solid var(--green); border-radius:10px; padding:10px 18px; font-weight:700; font-size:.85rem; cursor:pointer; transition:background .15s; }
.slot-auto-btn:hover:not(:disabled) { background:rgba(61,214,57,.12); }
.slot-auto-btn.on { background:#e05555; border-color:#e05555; color:#fff; animation: slotAutoPulse 1.4s ease-in-out infinite; }
.slot-auto-btn:disabled { border-color:var(--border); color:#777; cursor:not-allowed; }
@keyframes slotAutoPulse { 0%,100% { box-shadow:0 0 0 rgba(224,85,85,0); } 50% { box-shadow:0 0 12px rgba(224,85,85,.7); } }
.slot-sound-btn { background:var(--dark2); color:inherit; border:1px solid var(--border); border-radius:10px; padding:0 14px; font-size:1.05rem; cursor:pointer; line-height:1; transition:border-color .15s; }
.slot-sound-btn:hover { border-color: var(--green); }
.slot-pay-title { font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.slot-paytable { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:6px; text-align:left; }
.slot-paytable > span { display:flex; align-items:center; justify-content:space-between; gap:8px; background:rgba(0,0,0,.25); border:1px solid var(--border); border-radius:10px; padding:7px 10px; font-size:.82rem; color:var(--text); white-space:nowrap; }
.slot-paytable b { color:#ffc107; font-family:var(--font-display), sans-serif; font-size:1rem; letter-spacing:.03em; }
.slot-info { padding-top:12px; border-top:1px solid var(--border); font-size:.72rem; line-height:1.5; color:var(--muted); opacity:.9; }
@media (max-width:480px) {
.slot-box { padding:16px 12px 14px; }
.slot-topbar { gap:6px; }
.slot-stat-v { font-size:1.05rem; }
.slot-machine { padding:0 14px; }
.slot-reel { --cell:56px; width:74px; }
.slot-cell { font-size:2.1rem; }
.slot-reels { gap:8px; padding:9px; }
.slot-result.win { font-size:1.2rem; }
.slot-result.win.big { font-size:1.45rem; }
}
@media (max-width:360px) { .slot-reel { --cell:50px; width:64px; } .slot-cell { font-size:1.8rem; } }
@media (prefers-reduced-motion: reduce) { .slot-result.win.big, .slot-stat-v.bump, .slot-reel.win, .slot-reel.landed, .slot-auto-btn.on { animation:none; } .slot-spin-btn { transition:none; } }
.wheel-box { position:relative; padding:22px 18px 18px; text-align:center; background: radial-gradient(120% 70% at 50% 0%, rgba(255,193,7,.09), transparent 62%), var(--card-bg); border-color: rgba(255,193,7,.28); box-shadow: 0 18px 44px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); }
.wheel-inner { width:100%; max-width:420px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:16px; }
.wheel-wrap { position:relative; width:min(280px, 68vw); height:min(280px, 68vw); margin:6px auto 0; }
.wheel-pointer { position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:22px solid #ffc107; filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)); z-index:3; }
.wheel-circle { position:relative; width:100%; height:100%; border-radius:50%; border:6px solid transparent; background: var(--wheel-gradient, conic-gradient(#3dd639 0 100%)) padding-box, linear-gradient(150deg,#f7dc7a 0%,#a9801c 38%,#2f8f2c 72%,#3dd639 100%) border-box; box-shadow: inset 0 0 22px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.45); transition: transform 4.2s cubic-bezier(.17,.67,.16,1); will-change: transform; }
.wheel-seg-label { position:absolute; top:50%; left:50%; width:50%; height:2px; display:flex; align-items:center; justify-content:flex-end; padding-right:14px; transform-origin:0% 50%; font-family: var(--font-display), sans-serif; font-size:1.05rem; color:#0a0f0a; text-shadow:0 1px 0 rgba(255,255,255,.25); pointer-events:none; }
.wheel-hub { position:absolute; top:50%; left:50%; width:19%; height:19%; transform:translate(-50%,-50%); border-radius:50%; background: radial-gradient(circle at 35% 30%, #fff7d6, #ffc107 55%, #a9801c 100%); box-shadow: 0 3px 10px rgba(0,0,0,.5), inset 0 0 0 3px rgba(0,0,0,.25); z-index:2; }
.wheel-spin-btn { width:100%; max-width:280px; background:linear-gradient(180deg,#ffe37a,#ffc107); color:#241a00; border:none; border-radius:12px; padding:15px 28px; font-weight:800; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; box-shadow:0 6px 20px rgba(255,193,7,.35), inset 0 1px 0 rgba(255,255,255,.45); transition:transform .12s ease, box-shadow .2s ease, filter .2s ease; }
.wheel-spin-btn:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.05); }
.wheel-spin-btn:active:not(:disabled) { transform:translateY(1px); }
.wheel-spin-btn:disabled { background:#2a2f2a; color:#7d857d; box-shadow:none; cursor:not-allowed; }
.wheel-cooldown { font-size:.82rem; color:var(--muted); }
.wheel-cooldown strong { color:var(--text); font-variant-numeric:tabular-nums; }
.wheel-result { min-height:1.6em; font-size:1.05rem; font-weight:700; color:var(--green-light); font-family: var(--font-display), sans-serif; letter-spacing:.03em; }
.wheel-result.zero { color: var(--muted); font-family:inherit; font-weight:600; font-size:.92rem; }
@keyframes wheelWinPulse { 0%,100% { box-shadow: 0 0 0 rgba(255,193,7,0); } 50% { box-shadow: 0 0 26px rgba(255,193,7,.85); } }
.wheel-circle.win { animation: wheelWinPulse .7s ease-in-out 3; }
@media (max-width:480px) { .wheel-wrap { width:min(220px, 62vw); height:min(220px, 62vw); } .wheel-seg-label { font-size:.85rem; padding-right:10px; } }
@media (prefers-reduced-motion: reduce) { .wheel-circle { transition:transform .3s linear; } .wheel-circle.win { animation:none; } }
.lb-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:14px 0; }
.hof, .spiele-lb { --hof-muted: rgba(232,240,232,.62); --hof-gold: #ffc107; max-width: 1000px; margin: 0 auto; }
.hof { margin-top: 40px; }
.spiele-subhead { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; font-family: var(--font-display), sans-serif; font-weight: 800;
font-size: clamp(1.35rem, 3.6vw, 1.75rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; color: var(--white); text-align: center; }
.spiele-subhead::before, .spiele-subhead::after { content: ''; flex: 1; height: 1px; min-width: 24px; background: linear-gradient(90deg, transparent, var(--border-strong)); }
.spiele-subhead::after { background: linear-gradient(270deg, transparent, var(--border-strong)); }
.spiele-subhead > span { white-space: nowrap; }
.spiele-subhead--games { max-width: 1000px; margin: 0 auto 16px; }
.spiele-soon { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 1000px; margin: 14px auto 0; padding: 11px 16px;
border: 1px dashed var(--border); border-radius: 12px; background: rgba(255,255,255,.02); color: rgba(232,240,232,.7); font-size: .84rem; text-align: center; }
.spiele-soon b { color: var(--text); }
.spiele-soon[hidden] { display: none; }
.hof-head { text-align: center; margin-bottom: 18px; }
.hof-pts-m { display: none; }
.hof-title { font-family: var(--font-display), sans-serif; font-weight: 900; font-size: clamp(1.9rem, 5vw, 2.7rem); letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; margin: 0 0 6px; color: var(--white); }
.hof-title span { color: var(--green); }
.hof-sub { color: var(--hof-muted); font-size: .9rem; margin: 0 0 16px; }
.hof-seg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--card-bg); }
.hof-seg button, .hof-tabs button { border: 0; background: transparent; color: var(--hof-muted); font: inherit; font-weight: 700; cursor: pointer; border-radius: 999px; }
.hof-seg button { padding: 7px 16px; font-size: .82rem; }
.hof-seg button.on, .hof-tabs button.on { background: var(--green); color: #08130a; }
.hof-seg button:focus-visible, .hof-tabs button:focus-visible { outline: 2px solid var(--green-light); outline-offset: 2px; }
.hof-body { min-height: 320px; transition: opacity .2s; }
.hof-body.is-loading { opacity: .55; }
.hof-loading, .hof-empty { color: var(--hof-muted); text-align: center; padding: 26px 10px; font-size: .88rem; }
.hof-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.hof-kpi { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-width: 0; }
.hof-kpi .n { font-family: var(--font-display), sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--green); }
.hof-kpi .l { font-size: .7rem; color: var(--hof-muted); margin-top: 7px; text-transform: uppercase; letter-spacing: .08em; }
.hof-kpi .who { font-size: .8rem; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hof-kpi.hl { border-color: rgba(255,193,7,.45); background: linear-gradient(180deg, rgba(255,193,7,.12), var(--card-bg)); }
.hof-kpi.hl .n { color: var(--hof-gold); }
.hof-grid2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
.hof-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-width: 0; }
.hof-card h3 { margin: 0 0 10px; font-size: .95rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hof-card h3 small { color: var(--hof-muted); font-weight: 600; font-size: .75rem; }
.hof-tabs { display: inline-flex; gap: 4px; }
.hof-tabs button { padding: 4px 11px; font-size: .74rem; border: 1px solid var(--border); }
.hof-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.hof-table td { padding: 9px 6px; border-top: 1px solid rgba(61,214,57,.10); vertical-align: middle; }
.hof-table tr:first-child td { border-top: 0; }
.hof-rk { width: 28px; font-weight: 800; color: var(--hof-muted); }
.hof-rk.g1 { color: #ffd54a; } .hof-rk.g2 { color: #cfd8dc; } .hof-rk.g3 { color: #e0915a; }
.hof-pl { font-weight: 700; overflow-wrap: anywhere; }
.hof-gm { font-size: .74rem; color: var(--hof-muted); margin-top: 2px; }
.hof-pts { text-align: right; white-space: nowrap; font-weight: 700; color: var(--green); }
.hof-x { font-family: var(--font-display), sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--hof-gold); text-align: right; white-space: nowrap; }
.hof-me td { background: rgba(61,214,57,.09); }
.hof-gap td { text-align: center; color: var(--hof-muted); padding: 2px; border-top: 0; }
.hof-you { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #08130a; background: var(--green); padding: 2px 7px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.hof-reels { letter-spacing: 1px; }
.hof-num { display: inline-block; min-width: 1.6em; text-align: center; padding: 0 5px; border-radius: 5px; color: #fff; font-weight: 800; font-size: .92em; }
.hof-num--r { background: #c42a36; } .hof-num--b { background: #262a2b; border: 1px solid rgba(255,255,255,.15); } .hof-num--g { background: #1d8a4a; }
.hof-feed { display: flex; flex-direction: column; gap: 8px; }
.hof-fi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(61,214,57,.12); border-radius: 12px; background: rgba(255,255,255,.02); font-size: .82rem; }
.hof-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: rgba(61,214,57,.10); flex-shrink: 0; }
.hof-ic--slot { background: rgba(255,193,7,.13); } .hof-ic--roulette { background: rgba(233,196,106,.14); }
.hof-ft { flex: 1; min-width: 0; }
.hof-ft small { display: block; color: var(--hof-muted); font-size: .72rem; margin-top: 2px; }
.hof-fi .hof-x { font-size: 1rem; }
.hof-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.hof-gcard { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; background: var(--card-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hof-gcard::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--hof-glow); }
.hof-gcard > * { position: relative; }
.hof-gcard--slot { --hof-glow: radial-gradient(120% 90% at 85% 0%, rgba(255,193,7,.16), transparent 60%); }
.hof-gcard--razor { --hof-glow: radial-gradient(120% 90% at 85% 0%, rgba(61,214,57,.18), transparent 60%); }
.hof-gcard--roulette { --hof-glow: radial-gradient(120% 90% at 85% 0%, rgba(233,196,106,.18), transparent 60%); }
.hof-ghd { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1rem; margin-bottom: 8px; }
.hof-ghd span { font-size: 1.6rem; }
.hof-row { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.06); }
.hof-row span { color: var(--hof-muted); }
.hof-row b { text-align: right; overflow-wrap: anywhere; }
.hof-mine { margin-top: 14px; }
.hof-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.hof-chip { flex: 1 1 220px; border: 1px solid var(--border); border-radius: 14px; padding: 11px 14px; background: rgba(61,214,57,.05); }
.hof-chip .l { font-size: .75rem; color: var(--hof-muted); }
.hof-chip .v { font-weight: 800; font-size: 1.1rem; margin-top: 2px; }
.hof-chip .v em { font-style: normal; color: var(--hof-gold); font-size: .85rem; margin-left: 6px; }
.hof-chip .v.hof-none { font-weight: 600; font-size: .85rem; color: var(--hof-muted); }
.hof-chip small { display: block; font-size: .68rem; color: var(--hof-muted); margin-top: 2px; }
.hof-foot { text-align: center; color: var(--hof-muted); font-size: .74rem; margin: 14px 0 0; }
.spiele-lb { margin-top: 46px; }
.spiele-lb .hof-head { margin-bottom: 4px; }
.lb-moved { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: var(--text); text-decoration: none; font-size: .9rem; }
.lb-moved b { margin-left: auto; color: var(--green); white-space: nowrap; }
.lb-moved:hover b, .lb-moved:focus-visible b { color: var(--green-light); }
@media (max-width: 860px) { .hof-kpis { grid-template-columns: repeat(2, 1fr); } .hof-grid2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
.spiele-grid { gap: 10px; }
.spiele-grid > .spiele-tile { flex-basis: 100%; }
.spiele-tile { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon name badge" "icon meta play"; align-items: center;
column-gap: 14px; row-gap: 2px; min-height: 0; height: auto; padding: 14px 14px 14px 16px; }
.spiele-tile-top { display: contents; }
.spiele-tile-icon { grid-area: icon; font-size: 2.4rem; width: 2.9rem; display: flex; justify-content: center; }
.spiele-tile .spiele-tile-top .slot-badge { grid-area: badge; position: static; justify-self: end; align-self: end; margin: 0 0 6px; font-size: .58rem; padding: 1px 6px; white-space: nowrap; }
.spiele-tile-name { grid-area: name; font-size: 1.15rem; letter-spacing: .3px; align-self: end; }
.spiele-tile--ruediger .spiele-tile-name, .spiele-tile--friedhelm .spiele-tile-name { font-size: 1.05rem; }
.spiele-tile-meta { grid-area: meta; font-size: .74rem; line-height: 1.4; align-self: start; }
.spiele-tile-foot { grid-area: play; margin: 0; align-self: start; justify-self: end; }
.spiele-tile-play { padding: 8px 14px; font-size: .78rem; }
.spiele-tile:hover, .spiele-tile:focus-visible { transform: none; }
.spiele-soon { font-size: .78rem; padding: 10px 12px; }
.hof, .spiele-lb { margin-top: 34px; }
.spiele-subhead { font-size: 1.2rem; gap: 10px; }
.spiele-subhead::before, .spiele-subhead::after { min-width: 14px; }
.hof-sub { font-size: .82rem; margin-bottom: 12px; }
.hof-seg { display: flex; width: 100%; }
.hof-seg button { flex: 1; padding: 8px 6px; }
.hof-kpis { gap: 8px; }
.hof-kpi { padding: 12px; }
.hof-kpi .n { font-size: 1.5rem; }
.hof-kpi .l { font-size: .62rem; letter-spacing: .06em; }
.hof-grid2, .hof-games { gap: 10px; }
.hof-card { padding: 14px 12px; }
.hof-card h3 { font-size: .9rem; }
.hof-table { font-size: .82rem; }
.hof-table td { padding: 8px 4px; }
.hof-rk { width: 22px; }
.hof-table td.hof-pts { display: none; }
.hof-pts-m { display: block; font-family: inherit; font-size: .72rem; font-weight: 700; color: var(--green); margin-top: 1px; }
.hof-gname { display: none; }
.hof-x { font-size: 1.05rem; }
.hof-fi { padding: 8px; gap: 8px; font-size: .8rem; }
.hof-ic { width: 30px; height: 30px; font-size: 1rem; }
.hof-gcard { padding: 12px 14px; }
.hof-chip { flex-basis: 100%; }
.lb-bar { margin: 10px 0; }
}
@media (max-width: 420px) { .hof-kpi .n { font-size: 1.55rem; } .hof-card { padding: 14px 12px; } .hof-table td { padding: 8px 4px; } .hof-x { font-size: 1rem; } }
.lb-bar select { cursor:pointer; }
.lb-info { font-size:.78rem; color: var(--hof-muted, rgba(232,240,232,.62)); margin-left:auto; }
.lb-table td.lb-pos { width:56px; font-weight:800; color: rgba(232,240,232,.75); font-variant-numeric: tabular-nums; }
.lb-medal { font-size:1.2rem; }
.lb-table td.lb-name b { font-weight:700; overflow-wrap:anywhere; }
.lb-sub { display:none; }
.lb-lvl-pill { display:inline-block; min-width:34px; text-align:center; padding:2px 8px; border-radius:99px; background: rgba(255,193,7,.14); color:#ffc107; font-weight:800; font-size:.8rem; }
.lb-table td.lb-pts { font-weight:800; color: var(--green); font-variant-numeric: tabular-nums; white-space:nowrap; }
.lb-table td.lb-wt { color: rgba(232,240,232,.75); white-space:nowrap; }
.lb-table tr.lb-top1 td { background: rgba(255,193,7,.07); }
.lb-table tr.lb-top2 td, .lb-table tr.lb-top3 td { background: rgba(255,255,255,.03); }
.lb-table tr.lb-top td:first-child { box-shadow: inset 3px 0 0 rgba(255,193,7,.7); }
.lb-table tr.lb-top2 td:first-child { box-shadow: inset 3px 0 0 rgba(200,210,220,.6); }
.lb-table tr.lb-top3 td:first-child { box-shadow: inset 3px 0 0 rgba(205,127,50,.7); }
.lb-table tr.lb-me td { background: rgba(61,214,57,.12) !important; }
.lb-table tr.lb-gap td { text-align:center; color: rgba(232,240,232,.4); padding:4px; letter-spacing:.3em; }
@media (max-width: 600px) {
.lb-bar { display:grid; grid-template-columns: 1fr auto; gap:8px; }
.lb-bar input { grid-column: 1 / -1; }
.lb-bar button { order:2; } .lb-bar label { order:1; }
.lb-info { grid-column: 1 / -1; margin:0; order:3; }
.lb-table td.lb-pos { width:38px; text-align:center; }
.lb-sub { display:block; font-size:.72rem; font-weight:500; color: rgba(232,240,232,.6); margin-top:2px; }
.lb-table td.lb-pts { text-align:right; }
.lb-table th:nth-child(4) { text-align:right; }
}
.lb-bar input, .lb-bar select { background: var(--dark2); color: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 0.85rem; }
.lb-bar input { flex: 1 1 160px; min-width: 0; }
.lb-bar button { background: var(--green); color: #08130a; border: none; border-radius: 8px; padding: 9px 16px; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.lb-bar label { font-size: 0.8rem; color: var(--muted); display:flex; align-items:center; gap:6px; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.lb-table th, .lb-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.lb-table th { color: var(--muted); font-weight: 600; font-size: 0.78rem; }
.lb-table tr:last-child td { border-bottom: none; }
.lb-table tr.lb-me td { background: rgba(61,214,57,0.10); font-weight: 700; }
.lb-scroll { overflow-x: auto; }
@media (max-width: 600px) { .lb-table th:nth-child(3), .lb-table td:nth-child(3), .lb-table th:nth-child(5), .lb-table td:nth-child(5) { display: none; } .lb-table th, .lb-table td { padding: 10px 8px; } }
.botrix-nolink { color: var(--muted); font-size:0.85rem; margin-top:6px; }
.profil-panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.profil-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 0.88rem; gap: 10px; }
.profil-row:last-child { border-bottom: none; }
.profil-row .name { font-weight: 600; }
.profil-row .meta { color: var(--muted); opacity: .7; font-size: 0.74rem; margin-top: 2px; }
.profil-row .val { font-family: var(--font-display), sans-serif; font-size: 1.05rem; color: var(--green); white-space: nowrap; }
.profil-empty { padding: 26px 20px; text-align: center; color: var(--muted); opacity: .75; font-size: 0.88rem; }
.profil-badge { padding: 4px 12px; border-radius: 20px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.profil-badge.st-offen { background: rgba(255,193,7,0.15); color: #ffc107; }
.profil-badge.st-ok { background: rgba(61,214,57,0.15); color: var(--green); }
.profil-badge.st-no { background: rgba(229,72,77,0.15); color: #ff8f92; }
.psc-order { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.psc-order:last-child { border-bottom: none; }
.psc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.psc-title { font-weight:600; font-size:0.95rem; }
.psc-meta { color: var(--muted); opacity:.75; font-size:0.74rem; margin-top:2px; }
.psc-steps { display:flex; gap:6px; margin:14px 0 4px; font-size:0.7rem; color: var(--muted); }
.psc-step { flex:1; text-align:center; padding-top:8px; border-top:3px solid var(--border); }
.psc-step.done { border-top-color: var(--green); color: var(--green); }
.psc-step.bad { border-top-color:#e5484d; color:#ff8f92; }
.psc-note { margin-top:10px; font-size:0.82rem; color: var(--muted); }
.psc-hint { font-size:0.82rem; color: var(--muted); margin:12px 0 8px; }
.psc-box { position:relative; width:100%; max-width:340px; height:84px; border-radius:12px; overflow:hidden; background:#0a0f0a; border:1px solid var(--green); user-select:none; -webkit-user-select:none; }
.psc-code { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Courier New',monospace; font-size:1.3rem; font-weight:700; letter-spacing:2px; color: var(--green); padding:0 8px; text-align:center; word-break:break-all; }
.psc-box canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; transition:opacity .5s; }
.psc-box canvas.gone { opacity:0; pointer-events:none; }
.psc-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.psc-btn { background: var(--green); color:#08130a; font-weight:700; border:0; border-radius:8px; padding:8px 14px; font-size:0.82rem; cursor:pointer; }
.psc-btn.ghost { background:transparent; color: var(--green); border:1px solid var(--green); }
.psc-err { color:#ff8f92; font-size:0.78rem; margin-top:6px; }
.psc-panel .psc-order { padding: 14px 18px; }
.psc-row { padding: 10px 18px; border-bottom: 1px solid var(--border); }
.psc-panel > :last-child { border-bottom: 0; }
.psc-row-top { display: flex; align-items: center; gap: 10px; }
.psc-row-ic { width: 22px; text-align: center; flex-shrink: 0; font-size: .95rem; }
.psc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.psc-row-main b { font-size: .86rem; font-weight: 600; }
.psc-row-main small { font-size: .72rem; color: var(--muted); opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psc-row .profil-badge { flex-shrink: 0; }
.psc-row--no .psc-row-main b { opacity: .7; }
.psc-btn.sm { padding: 6px 11px; font-size: .74rem; flex-shrink: 0; }
.psc-row .psc-box { margin: 10px 0 0 32px; height: 60px; max-width: 300px; width: calc(100% - 32px); }
.psc-row .psc-actions { margin: 6px 0 0 32px; }
.psc-row .psc-err { margin-left: 32px; }
.psc-row .psc-err:empty { display: none; }
.psc-hist-label { padding: 10px 18px 2px; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); opacity: .6; }
.psc-more-btn { display: block; width: 100%; background: none; border: 0; border-top: 1px solid var(--border); color: var(--green); font: inherit; font-weight: 600; font-size: .8rem; padding: 10px; cursor: pointer; }
.psc-more-btn:hover { background: rgba(61,214,57,.05); }
.psc-row-btn { order: -1; flex-shrink: 0; margin-left: auto; }
.psc-row-main { order: -2; } .psc-row-ic { order: -3; }
@media (max-width: 480px) {
.psc-row { padding: 10px 14px; }
.psc-row-top { flex-wrap: wrap; row-gap: 8px; }
.psc-row-main { flex: 1 1 0; }
.psc-row-main small { white-space: normal; }
.psc-row-btn { order: 5; flex-basis: 100%; margin-left: 0; padding-left: 32px; }
}
.profil-header h2 { overflow-wrap: anywhere; min-width: 0; }
.profil-rejected-list { display: flex; flex-direction: column; gap: 12px; }
.profil-rejected-item { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--card-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.profil-rejected-item .r-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.profil-rejected-item .r-title { font-weight: 600; font-size: 0.88rem; }
.profil-rejected-item .r-meta { color: var(--muted); opacity: .7; font-size: 0.74rem; margin-top: 2px; }
.profil-rejected-item .r-reason { margin-top: 10px; font-size: 0.82rem; background: rgba(229,72,77,0.08); border: 1px solid #e5484d; color: #ff8f92; border-radius: 8px; padding: 10px 12px; }
.profil-rejected-item .r-reason strong { color: #ff8f92; }
.profil-rejected-item .r-noreason { margin-top: 10px; font-size: 0.82rem; color: var(--muted); opacity: .75; }
.btn-resubmit { display: inline-flex; align-items: center; gap: 6px; background: #ffc107; color: #08130a; font-weight: 700; padding: 8px 14px; border-radius: 8px; text-decoration: none; font-size: 0.82rem; margin-top: 10px; }
.btn-resubmit:hover { filter: brightness(0.95); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body), sans-serif; background: var(--dark); color: var(--text); overflow-x: hidden; overflow-y: auto; min-height: 100vh; min-height: 100dvh; height: 100%; display: flex; flex-direction: column; }
.page-main { flex: 1 0 auto; display: block; width: 100%; }
body.agegate-active { overflow: hidden; }
#agegate-overlay { position: fixed !important; inset: 0 !important; z-index: 999999 !important; display: flex; align-items: center; justify-content: center; background: rgba(8,10,8,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 20px; transition: opacity 0.4s ease; }
#agegate-box { background: #181D17; border: 1px solid rgba(61,214,57,0.35); border-radius: 20px; padding: 48px 40px; max-width: 480px; width: 100%; text-align: center; box-shadow: 0 0 60px rgba(61,214,57,0.1), 0 0 120px rgba(61,214,57,0.05); }
#agegate-logo { font-family: var(--font-display), sans-serif; font-size: 2.8rem; letter-spacing: 0.06em; margin-bottom: 20px; line-height: 1; }
#agegate-logo .num { color: #3DD639; } #agegate-logo .word { color: #FFFFFF; }
#agegate-logo img.brand-logo-img { height: 90px; width: auto; display: block; margin: 0 auto; }
#agegate-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(61,214,57,0.1); border: 1px solid rgba(61,214,57,0.3); border-radius: 100px; padding: 6px 18px; font-size: 0.82rem; font-weight: 600; color: #3DD639; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 22px; }
#agegate-title { font-family: var(--font-display), sans-serif; font-size: 2rem; color: #FFFFFF; letter-spacing: 0.04em; margin-bottom: 14px; line-height: 1.1; }
#agegate-sub { color: #A3B5A3; font-size: 0.92rem; line-height: 1.65; margin-bottom: 30px; }
#agegate-confirm { display: block; width: 100%; background: #3DD639; color: #080A08; font-weight: 700; font-size: 1rem; padding: 15px; border-radius: 10px; border: none; cursor: pointer; transition: background .2s, box-shadow .2s; box-shadow: 0 0 28px rgba(61,214,57,0.3); margin-bottom: 14px; font-family: inherit; letter-spacing: 0.02em; }
#agegate-confirm:hover { background: #72F56E; box-shadow: 0 0 44px rgba(61,214,57,0.5); }
#agegate-leave { display: block; color: #A3B5A3; font-size: 0.85rem; text-decoration: none; margin-bottom: 22px; transition: color .2s; }
#agegate-leave:hover { color: #E8F0E8; }
#agegate-legal { color: #93A593; font-size: 0.75rem; line-height: 1.6; border-top: 1px solid rgba(61,214,57,0.1); padding-top: 18px; margin-top: 6px; }
@media (max-width: 640px), (orientation: landscape) and (max-height: 640px) {
.hero-bg {
background-image:
radial-gradient(ellipse 70% 55% at 50% -5%, rgba(61,214,57,0.14) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 85% 85%, rgba(61,214,57,0.07) 0%, transparent 55%),
radial-gradient(ellipse 30% 30% at 10% 70%, rgba(61,214,57,0.05) 0%, transparent 50%),
linear-gradient(180deg, rgba(6,8,6,0.62) 0%, rgba(8,11,8,0.55) 35%, rgba(6,8,6,0.72) 100%),
url("/420jackpot-bg-mobile.jpg?v=1791669000") !important;
background-image:
radial-gradient(ellipse 70% 55% at 50% -5%, rgba(61,214,57,0.14) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 85% 85%, rgba(61,214,57,0.07) 0%, transparent 55%),
radial-gradient(ellipse 30% 30% at 10% 70%, rgba(61,214,57,0.05) 0%, transparent 50%),
linear-gradient(180deg, rgba(6,8,6,0.62) 0%, rgba(8,11,8,0.55) 35%, rgba(6,8,6,0.72) 100%),
image-set(url("/420jackpot-bg-mobile.webp?v=1791669000") type("image/webp"), url("/420jackpot-bg-mobile.jpg?v=1791669000") type("image/jpeg")) !important;
background-size: cover, cover, cover, cover, cover !important;
background-position: center, center, center, center, center top !important;
background-attachment: scroll !important;
}
}
@media (max-width: 480px) { #agegate-box { padding: 32px 22px; } #agegate-logo { font-size: 2.2rem; } #agegate-title { font-size: 1.6rem; } }
.hero-bg {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
filter: saturate(0.75) brightness(0.8) contrast(1.05);
background-image:
radial-gradient(ellipse 70% 55% at 50% -5%, rgba(61,214,57,0.14) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 85% 85%, rgba(61,214,57,0.07) 0%, transparent 55%),
radial-gradient(ellipse 30% 30% at 10% 70%, rgba(61,214,57,0.05) 0%, transparent 50%),
linear-gradient(180deg, rgba(6,8,6,0.70) 0%, rgba(8,11,8,0.65) 35%, rgba(6,8,6,0.78) 100%),
url("/420jackpot-bg.jpg?v=1791669000");
background-image:
radial-gradient(ellipse 70% 55% at 50% -5%, rgba(61,214,57,0.14) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 85% 85%, rgba(61,214,57,0.07) 0%, transparent 55%),
radial-gradient(ellipse 30% 30% at 10% 70%, rgba(61,214,57,0.05) 0%, transparent 50%),
linear-gradient(180deg, rgba(6,8,6,0.70) 0%, rgba(8,11,8,0.65) 35%, rgba(6,8,6,0.78) 100%),
image-set(url("/420jackpot-bg.webp?v=1791669000") type("image/webp"), url("/420jackpot-bg.jpg?v=1791669000") type("image/jpeg"));
background-size: cover, cover, cover, cover, cover;
background-position: center, center, center, center, center 30%;
background-repeat: no-repeat;
background-attachment: fixed;
animation: bgBreathe 10s ease-in-out infinite;
}
.hero-bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; }
@keyframes bgBreathe { 0%, 100% { filter: saturate(0.75) brightness(0.8) contrast(1.05); } 50% { filter: saturate(0.8) brightness(0.84) contrast(1.08); } }
@media (prefers-reduced-motion: reduce) { .hero-bg { animation: none !important; } }
@media (min-width: 641px) {
.hero-bg {
filter: saturate(0.9) brightness(1.05) contrast(1.0) !important;
animation: bgBreatheDesktop 10s ease-in-out infinite !important;
background-image:
radial-gradient(ellipse 70% 55% at 50% -5%, rgba(61,214,57,0.14) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 85% 85%, rgba(61,214,57,0.07) 0%, transparent 55%),
radial-gradient(ellipse 30% 30% at 10% 70%, rgba(61,214,57,0.05) 0%, transparent 50%),
linear-gradient(180deg, rgba(6,8,6,0.45) 0%, rgba(8,11,8,0.35) 35%, rgba(6,8,6,0.55) 100%),
url("/420jackpot-bg.jpg?v=1791669000") !important;
background-image:
radial-gradient(ellipse 70% 55% at 50% -5%, rgba(61,214,57,0.14) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 85% 85%, rgba(61,214,57,0.07) 0%, transparent 55%),
radial-gradient(ellipse 30% 30% at 10% 70%, rgba(61,214,57,0.05) 0%, transparent 50%),
linear-gradient(180deg, rgba(6,8,6,0.45) 0%, rgba(8,11,8,0.35) 35%, rgba(6,8,6,0.55) 100%),
image-set(url("/420jackpot-bg.webp?v=1791669000") type("image/webp"), url("/420jackpot-bg.jpg?v=1791669000") type("image/jpeg")) !important;
}
}
@keyframes bgBreatheDesktop { 0%, 100% { filter: saturate(0.9) brightness(1.05) contrast(1.0); } 50% { filter: saturate(0.95) brightness(1.1) contrast(1.02); } }
#home { position: relative; }
#home::before {
content: '';
position: absolute;
top: -5%; left: 50%; transform: translateX(-50%);
width: min(900px, 92vw); height: 115%;
background: radial-gradient(ellipse 60% 55% at 50% 35%, rgba(6,8,6,0.55) 0%, transparent 72%);
pointer-events: none;
z-index: 0;
}
.hero-deco { position: absolute; z-index: 0; pointer-events: none; opacity: 0.85; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5)); max-width: 220px; height: auto; }
.hero-deco--tl { top: 6%;  left: 2vw;  width: 15vw; }
.hero-deco--tr { top: 4%;  right: 2vw; width: 16vw; }
.hero-deco--bl { bottom: 4%; left: 3vw; width: 13vw; }
.hero-deco--br { bottom: 6%; right: 3vw; width: 14vw; }
@media (max-width: 900px) { .hero-deco { display: none; } }
.sparkle-bg { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.sparkle-dot {
position: absolute;
border-radius: 50%;
will-change: transform, opacity;
animation: sparkleTwinkle ease-in-out infinite;
filter: drop-shadow(0 0 4px currentColor);
}
@keyframes sparkleTwinkle {
0%, 100% { opacity: 0; transform: scale(0.4); }
50%      { opacity: 0.9; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .sparkle-bg { display: none; } }
.smoke-bg { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.smoke-puff {
position: absolute;
border-radius: 50%;
mix-blend-mode: screen;
will-change: transform, opacity;
animation: smokeDrift ease-in-out infinite;
}
@keyframes smokeDrift {
0%   { opacity: 0;    transform: translate(0, 0) scale(0.85); }
15%  { opacity: 0.28; }
50%  { opacity: 0.4;  transform: translate(var(--drift-x), var(--drift-y)) scale(1.15); }
85%  { opacity: 0.22; }
100% { opacity: 0;    transform: translate(calc(var(--drift-x) * 1.6), calc(var(--drift-y) * 1.6)) scale(1.35); }
}
@media (prefers-reduced-motion: reduce) { .smoke-bg { display: none; } }
nav#nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; padding: 0 5vw; height: 68px; background: linear-gradient(180deg, var(--dark2) 0%, var(--dark3) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-strong); box-shadow: 0 4px 28px rgba(0,0,0,0.5), 0 1px 0 rgba(61,214,57,0.1); }
.page-main { padding-top: var(--nav-h, 68px); }
.nav-logo { font-family: var(--font-display), sans-serif; font-size: 2.1rem; letter-spacing: 0.06em; text-decoration: none; user-select: none; justify-self: start; display: inline-flex; align-items: center; }
.nav-logo .num { color: var(--green); } .nav-logo .word { color: var(--white); }
.nav-logo img.brand-logo-img { height: 60px; width: auto; display: block; }
.nav-tabs { display: flex; align-items: center; gap: 2px; list-style: none; justify-self: center; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 100px; padding: 5px; }
.nav-tabs li a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 100px; text-decoration: none; font-size: 0.87rem; font-weight: 600; color: var(--muted); transition: color .2s, background .2s, box-shadow .2s; cursor: pointer; white-space: nowrap; }
.nav-tabs li a svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-tabs li a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.nav-tabs li a.active { color: var(--dark); background: linear-gradient(135deg, var(--green-light), var(--green)); box-shadow: 0 0 18px rgba(61,214,57,0.4); font-weight: 700; }
.nav-tabs li a.active svg { stroke: var(--dark); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: var(--dark); font-weight: 700; padding: 9px 22px 9px 16px; border-radius: var(--radius-btn); font-size: 0.88rem; text-decoration: none; transition: background .2s, transform .15s, box-shadow .2s; white-space: nowrap; box-shadow: 0 0 20px rgba(61,214,57,0.3); }
.nav-cta:hover { background: var(--green-light); transform: translateY(-1px); box-shadow: 0 0 32px rgba(61,214,57,0.5); }
.nav-cta .play-ico { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(8,10,8,0.25); border-radius: 50%; }
.nav-cta .play-ico svg { width: 7px; height: 8px; fill: var(--dark); margin-left: 1px; }
.nav-bell { position: relative; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text, #eef7ee); transition: border-color .2s, background .2s, transform .15s; }
.nav-bell:hover { border-color: rgba(61,214,57,.55); background: rgba(61,214,57,.08); }
.nav-bell:active { transform: scale(.94); }
.nav-bell svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-bell.has-new svg { animation: bellRing 1.6s ease-in-out 1s 2; transform-origin: 50% 10%; color: var(--green, #3dd639); }
@keyframes bellRing { 0%,100% { transform: rotate(0); } 10%,30% { transform: rotate(14deg); } 20%,40% { transform: rotate(-12deg); } 50% { transform: rotate(0); } }
.nav-bell-n { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #ff4d55; color: #fff; font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px var(--dark, #070b07), 0 4px 10px rgba(255,77,85,.45); }
.nb-panel { position: fixed; z-index: 10050; top: calc(var(--nav-h, 68px) + 8px); right: max(12px, 4vw); width: min(380px, calc(100vw - 24px)); max-height: min(70vh, 560px); display: flex; flex-direction: column;
background: linear-gradient(180deg, #111a11, #0a110a); border: 1px solid rgba(61,214,57,.25); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.6); overflow: hidden;
opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; transition: opacity .2s, transform .2s; }
.nb-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.nb-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.nb-head b { font-size: 15px; }
.nb-head small { font-size: 12px; color: var(--muted, #8ea58e); }
.nb-list { overflow-y: auto; padding: 6px; }
.nb-item { display: flex; gap: 12px; padding: 11px 10px; border-radius: 12px; text-decoration: none; color: inherit; position: relative; transition: background .15s; }
a.nb-item:hover { background: rgba(255,255,255,.04); }
.nb-ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; background: rgba(61,214,57,.12); color: var(--green, #3dd639); }
.nb-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nb-ic.casino { background: rgba(230,184,92,.14); color: #e6b85c; }
.nb-ic.event { background: rgba(176,108,255,.14); color: #c49bff; }
.nb-ic.stream { background: rgba(145,70,255,.16); color: #a970ff; }
.nb-ic.update { background: rgba(88,180,255,.14); color: #6ec0ff; }
.nb-tx { min-width: 0; flex: 1; }
.nb-tx b { display: block; font-size: 14px; line-height: 1.3; }
.nb-tx p { margin: 3px 0 0; font-size: 13px; color: #c3d3c3; line-height: 1.4; }
.nb-tx small { display: block; margin-top: 5px; font-size: 11px; color: var(--muted, #8ea58e); }
.nb-item.new::after { content: ""; position: absolute; top: 16px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--green, #3dd639); box-shadow: 0 0 8px rgba(61,214,57,.7); }
.nb-new-tag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #041104; background: var(--green, #3dd639); border-radius: 999px; padding: 1px 6px; vertical-align: 2px; }
.nb-empty { padding: 28px 16px; text-align: center; color: var(--muted, #8ea58e); font-size: 14px; }
@media (max-width: 900px) {
.nav-bell { width: 36px; height: 36px; }
body.has-bell .nav-right { gap: 6px; }
body.has-bell .lang-switch { padding: 2px; }
body.has-bell .lang-switch .lang-btn.active { display: none; }
body.has-bell .lang-switch .lang-btn { padding: 6px 9px; }
}
.lang-switch { display: flex; align-items: center; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 100px; padding: 3px; gap: 2px; flex-shrink: 0; }
.lang-btn { color: var(--muted); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 100px; text-decoration: none; transition: background .2s, color .2s, box-shadow .2s; }
.lang-btn:hover { color: var(--text); }
.lang-btn.active { background: var(--green); color: var(--dark); box-shadow: 0 0 14px rgba(61,214,57,0.4); }
.nav-login-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(61,214,57,0.1); border: 1px solid rgba(61,214,57,0.35); color: var(--text); font-weight: 600; font-size: 0.84rem; padding: 8px 16px; border-radius: var(--radius-btn); text-decoration: none; white-space: nowrap; transition: background .2s, transform .15s; cursor: pointer; font-family: inherit; }
.nav-login-btn:hover { background: rgba(61,214,57,0.18); transform: translateY(-1px); }
.nav-login-btn svg { width: 15px; height: 15px; flex-shrink: 0; fill: var(--green); }
.nav-login-btn.nav-login-twitch { background: rgba(145,70,255,0.12); border-color: rgba(145,70,255,0.4); }
.nav-login-btn.nav-login-twitch:hover { background: rgba(145,70,255,0.22); }
.nav-login-btn.nav-login-twitch svg { fill: #9146FF; }
.nav-login-btn.nav-login-twitch span { transition: color .2s; }
.nav-login-btn.nav-login-twitch:hover span { color: #9146FF; }
.nav-login-btn.nav-login-kick { background: rgba(83,252,24,0.12); border-color: rgba(83,252,24,0.4); }
.nav-login-btn.nav-login-kick:hover { background: rgba(83,252,24,0.22); }
.nav-login-btn.nav-login-kick svg { fill: #53FC18; }
.nav-login-btn.nav-login-kick span { transition: color .2s; }
.nav-login-btn.nav-login-kick:hover span { color: #53FC18; }
#email-auth-overlay { position: fixed; inset: 0; z-index: 999998; display: none; align-items: center; justify-content: center; background: rgba(8,10,8,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 20px; }
#email-auth-overlay.open { display: flex; }
#email-auth-box { background: #181D17; border: 1px solid rgba(61,214,57,0.35); border-radius: 20px; padding: 36px 34px; max-width: 400px; width: 100%; box-shadow: 0 0 60px rgba(61,214,57,0.1), 0 0 120px rgba(61,214,57,0.05); position: relative; }
#email-auth-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--muted); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
#email-auth-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }
#email-auth-tabs { display: flex; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 100px; padding: 3px; gap: 2px; margin-bottom: 24px; }
.email-auth-tab { flex: 1; text-align: center; padding: 8px 10px; border-radius: 100px; font-size: 0.82rem; font-weight: 700; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; user-select: none; }
.email-auth-tab.active { background: var(--green); color: var(--dark); }
#email-auth-title { font-family: var(--font-display), sans-serif; font-size: 1.6rem; color: #fff; letter-spacing: 0.04em; margin-bottom: 18px; text-align: center; }
.email-auth-field { margin-bottom: 14px; }
.email-auth-field label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.email-auth-input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text); font-size: 0.92rem; padding: 11px 14px; border-radius: 8px; font-family: inherit; outline: none; transition: border-color .2s; }
.email-auth-input:focus { border-color: var(--border-strong); }
#email-auth-submit { display: block; width: 100%; background: var(--green); color: var(--dark); font-weight: 700; font-size: 0.96rem; padding: 13px; border-radius: 10px; border: none; cursor: pointer; transition: background .2s, box-shadow .2s; box-shadow: 0 0 24px rgba(61,214,57,0.3); margin-top: 6px; font-family: inherit; }
#email-auth-submit:hover { background: var(--green-light); box-shadow: 0 0 36px rgba(61,214,57,0.5); }
#email-auth-error { color: #ff6b6b; font-size: 0.82rem; margin-top: 10px; text-align: center; display: none; }
#login-choice-overlay { position: fixed; inset: 0; z-index: 999998; display: none; align-items: center; justify-content: center; background: rgba(8,10,8,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 20px; }
#login-choice-overlay.open { display: flex; }
#login-choice-box { background: #181D17; border: 1px solid rgba(61,214,57,0.35); border-radius: 20px; padding: 32px 30px; max-width: 340px; width: 100%; box-shadow: 0 0 60px rgba(61,214,57,0.1), 0 0 120px rgba(61,214,57,0.05); position: relative; }
#login-choice-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--muted); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
#login-choice-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }
#login-choice-title { font-family: var(--font-display), sans-serif; font-size: 1.5rem; color: #fff; letter-spacing: 0.04em; margin-bottom: 18px; text-align: center; }
#login-choice-buttons { display: flex; flex-direction: column; gap: 10px; }
#login-choice-buttons .nav-login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 18px; font-size: 1rem; }
#login-choice-buttons .nav-login-btn span { display: inline; }
#login-choice-buttons .nav-login-btn svg { width: 20px; height: 20px; }
.nav-account { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 100px; padding: 5px 6px 5px 14px; }
.nav-account .nav-account-name { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
@media (min-width: 1200px) { .nav-account .nav-account-name { max-width: 180px; } }
.nav-account .nav-account-name:hover { color: var(--green); }
.nav-account .nav-logout-btn { color: var(--muted); font-size: 0.76rem; font-weight: 700; text-decoration: none; background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 100px; transition: background .2s, color .2s; }
.nav-account .nav-logout-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
@media (max-width: 640px) {
.nav-login-btn { font-size: 0.78rem; padding: 7px 13px; }
.nav-account .nav-account-name { max-width: 80px; }
}
.nav-burger { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px; width: 38px; height: 38px; flex-shrink: 0; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--white); transition: transform .2s ease, opacity .2s ease; }
#mobile-bottombar { display: none; }
@media (max-width: 900px) {
#mobile-bottombar {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; z-index: 200;
justify-content: space-evenly; align-items: center;
padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
background: rgba(13,17,13,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--border); box-shadow: 0 -8px 28px rgba(0,0,0,0.4);
}
body { padding-bottom: 64px; }
}
.bb-item { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1 1 0; min-width: 0; padding: 5px 2px; color: var(--muted); text-decoration: none; cursor: pointer; transition: color .2s; position: relative; }
.bb-item svg { width: 21px; height: 21px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bb-item span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
#mobile-bottombar { overflow: hidden; }
#mobile-bottombar .bb-item svg { width: 23px; height: 23px; }
@media (max-width: 420px) { .bb-item span { font-size: 0.6rem; letter-spacing: 0.01em; } }
@media (max-width: 360px) { .bb-item span { font-size: 0.54rem; letter-spacing: 0; } .bb-item svg { width: 20px; height: 20px; } }
.bb-item.active { color: var(--green); }
.bb-item.active svg { filter: drop-shadow(0 0 6px rgba(61,214,57,0.6)); }
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 900px) {
nav#nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; height: auto; padding: 12px 4vw; position: fixed; gap: 8px; }
.nav-burger { display: flex; order: 1; position: relative; z-index: 1; flex-shrink: 0; }
.nav-logo { order: 2; font-size: 1.5rem; white-space: nowrap; flex-shrink: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nav-logo img.brand-logo-img { height: 46px; }
.nav-right { order: 3; margin-left: 0; position: relative; z-index: 1; flex-shrink: 1; min-width: 0; }
.nav-right .nav-cta { display: none; }
.nav-right .nav-login-btn, .nav-right .nav-account { display: none; }
.nav-tabs {
order: 4; position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
flex-direction: column; gap: 0; justify-self: auto;
background: var(--dark2); border: none; border-bottom: 1px solid var(--border);
border-radius: 0; padding: 0;
box-shadow: 0 16px 28px rgba(0,0,0,0.45);
max-height: 0; overflow: hidden; transition: max-height .25s ease;
}
.nav-tabs li a { border-radius: 0; }
.nav-tabs li a.active { box-shadow: none; }
.nav-tabs.open { max-height: 60vh; overflow-y: auto; }
.nav-tabs li { width: 100%; }
.nav-tabs li a { width: 100%; padding: 15px 5vw; border-radius: 0; font-size: 0.95rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-tabs .nav-cta-item { padding: 14px 5vw 16px; }
.nav-tabs .nav-cta-item a.nav-cta { display: flex; justify-content: center; width: 100%; box-sizing: border-box; padding: 11px 16px; font-size: 0.85rem; }
.nav-tabs .nav-login-item { padding: 14px 5vw; display: flex; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-tabs .nav-login-item .nav-login-btn { width: 100%; justify-content: center; }
.nav-tabs .nav-login-item .nav-login-btn span { display: inline; }
.nav-tabs .nav-login-item .nav-account { width: 100%; justify-content: space-between; }
.nav-tabs .nav-login-item .nav-account-name { max-width: none; }
.nav-tabs .nav-login-item { display: none; }
}
.b4-livebar { position: fixed; left: 20px; bottom: 20px; z-index: 9990; display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 120px)); padding: 8px 8px 8px 14px; border-radius: 16px;
background: linear-gradient(180deg, rgba(36,14,16,.96), rgba(22,10,11,.96)); border: 1px solid rgba(255,77,85,.45); box-shadow: 0 14px 36px rgba(0,0,0,.5), 0 0 24px rgba(255,77,85,.18); color: #fff; animation: b4In .3s ease-out; }
.b4-livebar[hidden] { display: none; }
@keyframes b4In { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.b4-lb-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4d55; flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(255,77,85,.7); animation: b4Pulse 1.6s infinite; }
@keyframes b4Pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,85,.7); } 70% { box-shadow: 0 0 0 8px rgba(255,77,85,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,85,0); } }
.b4-lb-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.b4-lb-txt b { font-size: .86rem; } .b4-lb-txt small { font-size: .74rem; color: #f3c6c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b4-lb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 11px; border: 0; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; background: #ff4d55; color: #fff; white-space: nowrap; }
.b4-lb-btn.b4-lb-pin { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.b4-lb-btn svg, .b4-lb-x svg, .b4-mini-bar svg, .b4-pin-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.b4-lb-btn svg path[d^="M8 5"] { fill: currentColor; stroke: none; }
.b4-lb-x { width: 30px; height: 30px; border-radius: 9px; border: 0; background: none; color: #f3c6c8; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.b4-lb-x:hover { background: rgba(255,255,255,.08); color: #fff; }
.b4-is-live { position: relative; }
.nav-tabs li a.b4-is-live::after, .bb-item.b4-is-live::after { content: ""; position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #ff4d55; box-shadow: 0 0 0 2px var(--dark, #0b0f0a); animation: b4Pulse 1.6s infinite; }
.bb-item.b4-is-live::after { top: 3px; right: calc(50% - 16px); }
.b4-pin-btn { cursor: pointer; font: inherit; }
.b4-mini { position: fixed; z-index: 2147482500; width: 340px; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid rgba(255,77,85,.5); box-shadow: 0 18px 50px rgba(0,0,0,.65); transition: width .2s; touch-action: none; }
.b4-mini[data-size="l"] { width: 520px; }
.b4-mini[data-corner="br"] { right: 16px; bottom: 16px; } .b4-mini[data-corner="bl"] { left: 16px; bottom: 16px; }
.b4-mini[data-corner="tr"] { right: 16px; top: calc(var(--nav-h, 68px) + 10px); } .b4-mini[data-corner="tl"] { left: 16px; top: calc(var(--nav-h, 68px) + 10px); }
.b4-mini.drag { transition: none; opacity: .92; }
.b4-mini-bar { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; background: linear-gradient(180deg, #1d0e10, #120a0b); color: #fff; font-size: .74rem; cursor: grab; user-select: none; -webkit-user-select: none; }
.b4-mini.drag .b4-mini-bar { cursor: grabbing; }
.b4-mini-bar .b4-lb-dot { width: 8px; height: 8px; }
.b4-mini-bar b { color: #ff8f94; letter-spacing: .06em; }
.b4-mini-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f3c6c8; }
.b4-mini-bar button { width: 30px; height: 28px; border-radius: 8px; border: 0; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.b4-mini-bar button:hover { background: rgba(255,255,255,.16); }
.b4-mini-v { position: relative; aspect-ratio: 16 / 9; background: #000; }
.b4-mini-v iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body:has(.b4-mini[data-corner="br"]) .cw-launcher { bottom: calc(28px + var(--b4m, 230px)); }
@media (max-width: 900px) {
.b4-livebar { left: 10px; right: 84px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: none; padding: 7px 6px 7px 12px; gap: 8px; }
.b4-lb-btn span { display: none; } .b4-lb-btn { padding: 9px; }
.b4-mini { width: min(58vw, 300px); }
.b4-mini[data-size="l"] { width: calc(100vw - 20px); }
.b4-mini[data-corner="br"] { right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); } .b4-mini[data-corner="bl"] { left: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); }
.b4-mini[data-corner="tr"] { right: 10px; } .b4-mini[data-corner="tl"] { left: 10px; }
.b4-mini-t { display: none; }
body:has(.b4-mini[data-corner="br"]) .cw-launcher { bottom: calc(88px + var(--b4m, 200px) + env(safe-area-inset-bottom)); }
}
.nav-tabs .nav-mm { display: none; }
#nav-mm-bg { display: none; }
@media (max-width: 900px) {
#nav-mm-bg { display: block; position: fixed; inset: 0; z-index: 98; background: rgba(4,7,4,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .22s; }
body.nav-mm-open #nav-mm-bg { opacity: 1; pointer-events: auto; }
body.nav-mm-open { overflow: hidden; }
nav#nav .nav-tabs { position: fixed; top: calc(var(--nav-h, 63px) + 8px); left: 10px; right: 10px; z-index: 99;
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border-radius: 20px;
background: linear-gradient(180deg, rgba(22,29,21,.98), rgba(13,18,12,.98)); border: 1px solid rgba(61,214,57,.22);
box-shadow: 0 24px 60px rgba(0,0,0,.6); max-height: calc(100dvh - var(--nav-h, 63px) - 96px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
opacity: 0; transform: translateY(-10px) scale(.98); transform-origin: top center; pointer-events: none; visibility: hidden;
transition: opacity .2s ease, transform .22s ease, visibility 0s linear .22s; }
nav#nav .nav-tabs.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; max-height: calc(100dvh - var(--nav-h, 63px) - 96px - env(safe-area-inset-bottom)); transition: opacity .2s ease, transform .22s ease; }
nav#nav .nav-tabs li { width: auto; min-width: 0; }
nav#nav .nav-tabs li a { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); font-size: .92rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
nav#nav .nav-tabs li a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
nav#nav .nav-tabs li a svg { width: 36px; height: 36px; padding: 8px; box-sizing: border-box; border-radius: 11px; background: rgba(61,214,57,.1); stroke: var(--green); flex-shrink: 0; }
nav#nav .nav-tabs li a:active { transform: scale(.98); }
nav#nav .nav-tabs li a.active { background: rgba(61,214,57,.12); border-color: rgba(61,214,57,.55); color: #fff; box-shadow: none; }
nav#nav .nav-tabs li a.active svg { background: var(--green); stroke: var(--dark); }
nav#nav .nav-tabs li a .gm-badge { position: absolute; top: 6px; right: 8px; left: auto; }
nav#nav .nav-tabs .nav-mm { display: block; }
nav#nav .nav-tabs .nav-mm-head { grid-column: 1 / -1; padding: 8px 4px 0; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
nav#nav .nav-tabs .nav-mm-chat { grid-column: 1 / -1; }
nav#nav .nav-tabs .nav-mm-chat a { background: linear-gradient(135deg, rgba(61,214,57,.12), rgba(61,214,57,.03)); border-color: rgba(61,214,57,.28); white-space: normal; }
nav#nav .nav-tabs .nav-mm-chat a span { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
nav#nav .nav-tabs .nav-mm-chat a small { font-size: .7rem; font-weight: 500; color: var(--muted); white-space: normal; }
nav#nav .nav-tabs .nav-mm-foot { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
nav#nav .nav-tabs .nav-mm-foot .nav-mm-acc { flex: 1; min-width: 0; background: none; border-color: transparent; padding: 6px 8px; font-weight: 600; }
nav#nav .nav-tabs .nav-mm-foot .nav-mm-acc svg { width: 32px; height: 32px; padding: 7px; border-radius: 50%; }
nav#nav .nav-tabs .nav-mm-foot .nav-mm-acc.active { background: none; border-color: transparent; }
nav#nav .nav-tabs .nav-mm-foot .nav-mm-out { flex: 0 0 auto; display: inline-flex; align-items: center; width: auto; padding: 8px 16px; border-radius: 100px; font-size: .8rem; font-weight: 700; color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
nav#nav .nav-tabs .nav-mm-foot .nav-mm-out:hover { color: var(--text); }
.nav-burger { width: 42px; height: 42px; border-radius: 12px; gap: 5px; transition: background .2s, border-color .2s; }
.nav-burger span { width: 18px; }
.nav-burger span:nth-child(2) { width: 13px; align-self: center; margin-left: -5px; }
.nav-burger.open { background: rgba(61,214,57,.12); border-color: rgba(61,214,57,.45); }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 360px) { nav#nav .nav-tabs { grid-template-columns: 1fr; } }
@media (min-width: 901px) {
.nav-tabs .nav-cta-item { display: none; }
.nav-tabs .nav-login-item { display: none; }
}
body.hide-twitch .nav-right .nav-login-btn.nav-login-twitch,
body.hide-twitch .nav-tabs .nav-login-item .nav-login-btn.nav-login-twitch,
body.hide-twitch .profil-guest .nav-login-btn.nav-login-twitch { display: none; }
body.hide-kick .nav-right .nav-login-btn.nav-login-kick,
body.hide-kick .nav-tabs .nav-login-item .nav-login-btn.nav-login-kick,
body.hide-kick .profil-guest .nav-login-btn.nav-login-kick { display: none; }
body.hide-twitch.hide-kick .nav-tabs .nav-login-item:not(:has(.email-auth-open-btn)) { display: none; }
body.hide-login #mobile-bottombar .bb-login-btn { display: none; }
@media (max-width: 400px) {
.nav-logo { font-size: 1.1rem; }
.nav-logo img.brand-logo-img { height: 38px; }
.lang-btn { font-size: 0.68rem; padding: 4px 9px; }
.nav-cta { padding: 6px 11px; font-size: 0.72rem; }
.nav-login-btn span { display: none; }
.nav-login-btn { padding: 7px 10px; }
.nav-right .nav-account .nav-account-name { display: none; }
.nav-right .nav-account { padding: 4px 4px 4px 10px; }
.nav-right { gap: 8px; }
}
#home { position: relative; z-index: 1; padding: 76px 5vw 48px; text-align: center; }
.hero-content { position: relative; z-index: 1; }
.hero-kicker { font-family: var(--font-display), sans-serif; font-size: 1.1rem; letter-spacing: 0.1em; margin-bottom: 14px; opacity: 0.75; animation: fadeUp .6s ease both; }
.hero-kicker .num { color: var(--green); } .hero-kicker .word { color: var(--white); }
.hero-kicker img.brand-logo-img { height: 120px; width: auto; display: block; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(61,214,57,0.1); border: 1px solid rgba(61,214,57,0.3); border-radius: 100px; padding: 6px 18px; font-size: 0.82rem; font-weight: 600; color: var(--green); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 18px; animation: fadeUp .6s .05s ease both; }
.hero-title-main { font-family: var(--font-display), sans-serif; font-size: clamp(2.6rem, 6.5vw, 4.6rem); line-height: 1.05; letter-spacing: 0.02em; color: var(--white); margin-bottom: 16px; animation: fadeUp .6s .1s ease both; }
.hero-title-main .accent { color: var(--green); animation: titleGlow 2.6s ease-in-out infinite; }
@keyframes titleGlow { 0%, 100% { text-shadow: 0 0 18px rgba(61,214,57,0.35); } 50% { text-shadow: 0 0 34px rgba(61,214,57,0.75), 0 0 8px rgba(114,245,110,0.5); } }
@media (prefers-reduced-motion: reduce) { .hero-title-main .accent { animation: none; } }
.hero-title { font-family: var(--font-display), sans-serif; font-size: clamp(3.5rem, 10vw, 7.5rem); line-height: 0.93; letter-spacing: 0.02em; margin-bottom: 26px; animation: fadeUp .6s .1s ease both; }
.hero-title .num { color: var(--green); } .hero-title .word { color: var(--white); }
.hero-title-sub { font-size: 0.55em; color: var(--muted); letter-spacing: 0.08em; }
@media (max-width: 900px) { .hero-title-sub { font-size: 0.68em; } }
.hero-sub { font-size: clamp(1rem, 2vw, 1.18rem); color: var(--muted); max-width: 500px; margin: 0 auto 26px; line-height: 1.65; font-weight: 300; animation: fadeUp .6s .2s ease both; }
.hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; animation: fadeUp .6s .3s ease both; }
.btn-primary { background: var(--green); color: var(--dark); font-weight: 700; padding: 14px 32px; border-radius: 10px; font-size: 1rem; text-decoration: none; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 0 32px rgba(61,214,57,0.3); }
.btn-primary:hover { background: var(--green-light); transform: translateY(-2px); box-shadow: 0 0 52px rgba(61,214,57,0.5); }
.btn-ghost { border: 1px solid var(--border); color: var(--text); font-weight: 500; padding: 14px 32px; border-radius: 10px; font-size: 1rem; text-decoration: none; transition: border-color .2s, background .2s; }
.btn-ghost:hover { border-color: var(--green); background: rgba(61,214,57,0.05); color: var(--green); }
.stats-strip { position: relative; z-index: 1; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 0 5vw 56px; animation: fadeUp .6s .4s ease both; }
.stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 22px 36px; text-align: center; backdrop-filter: blur(8px); transition: border-color .25s, box-shadow .25s; }
.stat-card:hover { border-color: var(--border-strong); box-shadow: 0 0 24px rgba(61,214,57,0.1); }
.stat-num { font-family: var(--font-display), sans-serif; font-size: 2.5rem; color: var(--green); line-height: 1; }
.stat-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 5px; }
.section { position: relative; z-index: 1; padding: 80px 5vw 40px; display: none; scroll-margin-top: 90px; }
.section.active { display: block; }
.section-header { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-bottom: 56px; text-align: center; gap: 16px; }
.section-title { font-family: var(--font-display), sans-serif; font-size: clamp(3.2rem, 7vw, 5.6rem); line-height: 0.98; letter-spacing: 0.025em; color: var(--white); text-transform: uppercase; }
.section-title .accent { color: var(--green); }
.section-sub { color: var(--muted); font-size: clamp(0.95rem, 1.4vw, 1.08rem); max-width: 420px; line-height: 1.6; }
.casino-ticker { position: sticky; top: var(--nav-h, 68px); z-index: 60; margin: -80px -5vw 44px; overflow: hidden; background: linear-gradient(180deg, var(--dark2) 0%, var(--dark3) 100%); border-bottom: 1px solid var(--border-strong); padding: 15px 0; box-shadow: 0 4px 20px rgba(0,0,0,0.35); }
.casino-ticker::before, .casino-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none; }
.casino-ticker::before { left: 0; background: linear-gradient(90deg, var(--dark2), transparent); }
.casino-ticker::after { right: 0; background: linear-gradient(270deg, var(--dark3), transparent); }
.casino-ticker-track { display: flex; width: max-content; animation: casinoTickerScroll linear infinite; animation-duration: var(--ct-duration, 45s); }
.casino-ticker-track:hover { animation-play-state: paused; }
.casino-ticker-item { display: flex; align-items: center; gap: 10px; padding: 0 26px; white-space: nowrap; font-size: 0.92rem; border-right: 1px solid var(--border); flex-shrink: 0; }
.casino-ticker-item .ct-name { color: var(--muted); opacity: .8; font-weight: 500; }
.casino-ticker-item .ct-bonus { color: var(--green); font-weight: 700; }
.casino-ticker-item .ct-logo-wrap { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: var(--dark3); border: 1px solid var(--border); border-radius: 9px; flex-shrink: 0; overflow: hidden; }
.casino-ticker-item .ct-logo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9px; }
@media (max-width: 640px) { .casino-ticker-item .ct-logo-wrap { width: 26px; height: 26px; border-radius: 8px; } .casino-ticker-item .ct-logo { border-radius: 8px; } }
@keyframes casinoTickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .casino-ticker { margin: -60px -4vw 32px; padding: 12px 0; } .casino-ticker-item { padding: 0 18px; font-size: 0.84rem; } }
@media (prefers-reduced-motion: reduce) { .casino-ticker-track { animation: none; } }
.cc-hero { position: relative; z-index: 1; text-align: center; margin-bottom: 56px; }
.cc-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(61,214,57,0.1); border: 1px solid rgba(61,214,57,0.3); border-radius: 100px; padding: 6px 18px; font-size: 0.78rem; font-weight: 600; color: var(--green); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 22px; }
.cc-hero-title { font-family: var(--font-display), sans-serif; font-size: clamp(3.2rem, 8vw, 6.2rem); line-height: 1.03; letter-spacing: 0.02em; color: var(--white); margin-bottom: 20px; text-transform: uppercase; }
.cc-hero-title .accent { color: var(--green); }
.cc-hero-sub { font-size: clamp(0.92rem, 1.6vw, 1.02rem); color: var(--muted); max-width: 480px; margin: 0 auto 36px; line-height: 1.6; font-weight: 300; }
.cc-hero-stats { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .cc-hero-stats .stat-card { padding: 16px 22px; } }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.giveaway-campaign{margin-bottom:28px;}
@keyframes gcnSlideIn{from{opacity:0;transform:translateY(-18px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes gcnGlow{0%,100%{box-shadow:0 0 0 rgba(61,214,57,0);}50%{box-shadow:0 0 22px rgba(61,214,57,0.22);}}
@keyframes gcnIconPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.16);}}
.giveaway-campaign .section-title{position:relative;display:inline-block;}
.giveaway-campaign-notice{position:relative;display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,rgba(61,214,57,0.12),rgba(61,214,57,0.03));border:1px solid rgba(61,214,57,0.35);border-radius:var(--radius-card);padding:18px 44px 18px 18px;margin-bottom:22px;animation:gcnSlideIn .6s cubic-bezier(.16,1,.3,1) both, gcnGlow 3.2s ease-in-out .6s infinite;}
.giveaway-campaign-notice .gcn-icon{font-size:1.4rem;line-height:1;flex-shrink:0;animation:gcnIconPulse 2.4s ease-in-out .6s infinite;}
.giveaway-campaign-notice .gcn-body{min-width:0;}
.giveaway-campaign-notice .gcn-title{font-weight:700;color:var(--green);margin-bottom:6px;font-size:1rem;}
.giveaway-campaign-notice .gcn-text{font-size:0.9rem;line-height:1.65;color:var(--text);opacity:.95;}
.giveaway-campaign-notice .gcn-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer;padding:6px;border-radius:8px;transition:color .15s,background .15s;}
.giveaway-campaign-notice .gcn-close:hover{color:var(--text);background:rgba(255,255,255,0.06);}
@media (max-width:480px){ .giveaway-campaign-notice{padding:16px 40px 16px 14px;gap:10px;} }
@keyframes gmbGlow{0%,100%{box-shadow:0 0 0 rgba(255,183,3,0);}50%{box-shadow:0 0 26px rgba(255,183,3,0.28);}}
@keyframes gmbDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.7);}}
.giveaway-multi-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,rgba(255,183,3,0.16),rgba(255,183,3,0.04));border:1px solid rgba(255,183,3,0.5);border-radius:var(--radius-card);padding:16px 20px;margin-bottom:22px;animation:gcnSlideIn .6s cubic-bezier(.16,1,.3,1) both, gmbGlow 2.8s ease-in-out .6s infinite;}
.giveaway-multi-banner .gmb-badge{flex-shrink:0;min-width:58px;height:58px;padding:0 8px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(135deg,#ffd166,#ffb703);color:#1a1200;font-weight:800;font-size:1.45rem;letter-spacing:-.02em;}
.giveaway-multi-banner .gmb-body{min-width:0;}
.giveaway-multi-banner .gmb-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.05rem;color:#ffb703;margin-bottom:4px;}
.giveaway-multi-banner .gmb-dot{width:9px;height:9px;border-radius:50%;background:#ffb703;flex-shrink:0;animation:gmbDot 1.4s ease-in-out infinite;}
.giveaway-multi-banner .gmb-text{font-size:0.92rem;line-height:1.55;color:var(--text);}
.giveaway-multi-banner .gmb-hint{font-size:0.78rem;color:var(--muted);margin-top:3px;}
@media (max-width:480px){ .giveaway-multi-banner{padding:14px;gap:12px;} .giveaway-multi-banner .gmb-badge{min-width:48px;height:48px;font-size:1.2rem;border-radius:13px;} }
.gm-badge{display:inline-flex;align-items:center;justify-content:center;background:#ffb703;color:#1a1200;font-size:0.62rem;font-weight:800;line-height:1;padding:3px 6px;border-radius:999px;letter-spacing:.02em;animation:gmbDot 1.6s ease-in-out infinite;}
.bb-item .gm-badge{position:absolute;top:0;left:calc(50% + 6px);padding:2px 5px;font-size:0.52rem;}
@media (prefers-reduced-motion:reduce){ .giveaway-multi-banner,.giveaway-multi-banner .gmb-dot,.gm-badge{animation:none;} }
.giveaway-campaign-banner{display:block;width:100%;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--border);margin-bottom:22px;}
.giveaway-campaign-banner img{width:100%;height:auto;display:block;transition:transform .3s;}
.giveaway-campaign-banner:hover img{transform:scale(1.015);}
.giveaway-campaign-meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px;}
.giveaway-campaign-tv{position:relative;margin:0 0 26px;padding:18px 18px 30px;background:linear-gradient(155deg,#232323,#0c0c0c);border-radius:24px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 12px 30px rgba(0,0,0,0.45),inset 0 0 0 2px rgba(255,255,255,0.03);}
.giveaway-campaign-tv-cam{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);}
.giveaway-campaign-tv-screen{position:relative;height:230px;overflow:hidden;border-radius:14px;background:radial-gradient(circle at 50% 0%,rgba(61,214,57,0.10),#050505 72%);border:1px solid rgba(61,214,57,0.28);box-shadow:inset 0 0 40px rgba(0,0,0,0.85);}
.giveaway-campaign-tv-screen::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,0.025) 0px,rgba(255,255,255,0.025) 1px,transparent 2px,transparent 3px);pointer-events:none;}
.giveaway-campaign-intro{position:absolute;left:0;right:0;top:100%;margin:0;padding:0 24px;font-size:0.95rem;line-height:1.65;color:var(--text);opacity:.95;animation:gct-crawl var(--gct-speed, 70s) linear infinite;}
@keyframes gct-crawl{from{transform:translateY(0);}to{transform:translateY(-100%);}}
@media (max-width: 640px){
.giveaway-campaign-intro{animation-duration:calc(var(--gct-speed, 70s) * 1.55);}
}
@media (prefers-reduced-motion: reduce){
.giveaway-campaign-tv{background:none;border:none;box-shadow:none;padding:0;}
.giveaway-campaign-tv-cam{display:none;}
.giveaway-campaign-tv-screen{height:auto;overflow:visible;background:none;border:none;box-shadow:none;}
.giveaway-campaign-tv-screen::after{display:none;}
.giveaway-campaign-intro{position:static;animation:none;padding:0;max-width:820px;}
}
.gcm-chip{display:inline-flex;align-items:center;gap:7px;background:var(--card-bg);border:1px solid var(--border);border-radius:100px;padding:9px 16px;font-size:0.85rem;color:var(--text);backdrop-filter:blur(8px);}
.gcm-chip strong{color:var(--green);}
.giveaway-campaign-prizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:22px;}
.gcp-item{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:16px 12px;text-align:center;backdrop-filter:blur(8px);}
.gcp-item.is-first{border-color:var(--green);box-shadow:0 0 22px rgba(61,214,57,0.25);}
.gcp-rank{font-family:var(--font-display),sans-serif;font-size:0.85rem;color:var(--muted);letter-spacing:0.06em;margin-bottom:6px;}
.gcp-item.is-first .gcp-rank{color:var(--green);}
.gcp-prize{font-weight:600;font-size:0.86rem;margin-bottom:4px;color:var(--text);}
.gcp-value{font-family:var(--font-display),sans-serif;font-size:1.35rem;color:var(--green);letter-spacing:0.02em;}
.giveaway-campaign-timer{margin-bottom:26px;}
.gct-live{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;margin:-34px auto 22px;text-align:center;}
.gct-live-txt{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:clamp(0.92rem,1.4vw,1.05rem);}
.gct-live-dot{width:9px;height:9px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 0 0 rgba(255,77,77,.6);animation:gctLivePulse 1.6s ease-out infinite;flex:none;}
@keyframes gctLivePulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.6);}70%{box-shadow:0 0 0 9px rgba(255,77,77,0);}100%{box-shadow:0 0 0 0 rgba(255,77,77,0);}}
.gct-live-btns{display:inline-flex;gap:8px;}
.gct-live-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:100px;font-weight:700;font-size:0.92rem;text-decoration:none;color:#fff;border:1px solid;transition:background .2s,transform .2s;}
.gct-live-btn:hover{transform:translateY(-1px);}
.gct-live-twitch{background:rgba(145,70,255,0.14);border-color:rgba(145,70,255,0.5);} .gct-live-twitch svg{color:#9146FF;} .gct-live-twitch:hover{background:rgba(145,70,255,0.26);}
.gct-live-kick{background:rgba(83,252,24,0.10);border-color:rgba(83,252,24,0.45);} .gct-live-kick svg{color:#53FC18;} .gct-live-kick:hover{background:rgba(83,252,24,0.2);}
@media (prefers-reduced-motion: reduce){ .gct-live-dot{animation:none;} }
.gct-countdown{display:flex;gap:12px;flex-wrap:wrap;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-card);padding:22px;backdrop-filter:blur(8px);}
.gct-cd-item{flex:1;min-width:70px;text-align:center;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:14px;padding:14px 8px;}
.gct-cd-num{font-family:var(--font-display),sans-serif;font-size:clamp(1.8rem,5vw,2.4rem);line-height:1;color:var(--green);text-shadow:0 0 18px rgba(61,214,57,0.4);}
.gct-cd-label{margin-top:6px;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
.giveaway-campaign-gewinne{margin-bottom:22px;}
.gcg-bars{display:flex;align-items:stretch;justify-content:center;gap:clamp(8px,2vw,20px);height:260px;max-width:720px;margin:6px auto 0;padding:6px 2px 0;}
.gcg-bar-col{flex:1;max-width:100px;display:flex;flex-direction:column;align-items:center;min-width:0;}
.gcg-bar-value{font-family:var(--font-display),sans-serif;color:var(--green);font-size:0.85rem;margin-bottom:8px;white-space:nowrap;}
.gcg-bar-area{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;}
.gcg-bar{width:100%;max-width:54px;background:linear-gradient(180deg,var(--green-light),var(--green));border-radius:10px 10px 4px 4px;transform-origin:bottom;animation:gcg-grow .8s cubic-bezier(.22,.9,.3,1) both;box-shadow:0 0 16px rgba(61,214,57,0.3);}
.gcg-bar-col.is-first .gcg-bar{box-shadow:0 0 24px rgba(61,214,57,0.6);}
.gcg-bar-rank{margin-top:10px;font-size:0.7rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.gcg-bar-col.is-first .gcg-bar-rank{color:var(--green);}
.gcg-bar-prize{font-size:0.78rem;font-weight:600;color:var(--text);text-align:center;margin-top:2px;line-height:1.25;}
@keyframes gcg-grow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@media (max-width:640px){
.gcg-bars{height:210px;}
.gcg-bar-value{font-size:0.72rem;}
.gcg-bar-prize{font-size:0.68rem;}
}
@media (prefers-reduced-motion: reduce){
.gcg-bar{animation:none;}
}
.giveaway-campaign-cta{display:flex;width:fit-content;align-items:center;justify-content:center;gap:8px;background:var(--green);color:var(--dark);font-weight:700;padding:13px 26px;border-radius:var(--radius-btn);text-decoration:none;font-size:0.95rem;box-shadow:0 0 20px rgba(61,214,57,0.3);transition:background .2s, transform .15s, box-shadow .2s;margin:0 auto 10px;}
.giveaway-campaign-cta:hover{background:var(--green-light);transform:translateY(-1px);box-shadow:0 0 32px rgba(61,214,57,0.5);}
.giveaway-campaign-note{font-size:0.82rem;color:var(--muted);opacity:.8;margin:0 0 22px;text-align:center;}
.giveaway-campaign-terms{background:transparent;border:none;border-radius:var(--radius-card);padding:26px 0;}
.gct-faq-heading{font-family:var(--font-display),sans-serif;font-size:1.05rem;letter-spacing:0.3px;margin:0 0 16px;color:var(--green);}
.gct-faq-grid.faq-grid{grid-template-columns:1fr 1fr;max-width:none;margin:0;gap:10px;}
@media (max-width:760px){ .gct-faq-grid.faq-grid{grid-template-columns:1fr;} }
.gct-faq-grid .faq-item{padding:16px 18px;}
.gct-faq-grid .faq-q{font-size:0.92rem;}
.gct-faq-grid .faq-a{font-size:0.86rem;}
.giveaway-campaign-profile-link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;padding:12px 22px;color:var(--green);font-weight:700;font-size:0.9rem;text-decoration:none;background:rgba(0,255,0,0.06);border:1px solid rgba(0,255,0,0.25);border-radius:999px;transition:background .2s,border-color .2s,transform .2s;}
.giveaway-campaign-profile-link:hover{background:rgba(0,255,0,0.12);border-color:var(--green);transform:translateY(-1px);}
.giveaway-campaign-profile-link svg{width:15px;height:15px;flex-shrink:0;transition:transform .2s;}
.giveaway-campaign-profile-link:hover svg{transform:translateX(3px);}
@media (max-width:480px){ .giveaway-campaign-terms{padding:20px;} }
.giveaway-terms-box{background:var(--hintergrund2, #181D17);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:22px 26px;margin-top:28px;}
.giveaway-terms-box h3{margin:0 0 12px;font-size:17px;}
.giveaway-terms-box ul{margin:0;padding-left:20px;color:var(--textGedaempft, #E8F0E8);font-size:14px;line-height:1.7;}
.giveaway-tickets-box{background:var(--hintergrund2, #181D17);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:22px 26px;margin-top:28px;}
.giveaway-tickets-box h3{margin:0 0 16px;font-size:17px;color:var(--green);}
.gtt-table-wrap{overflow-x:auto;}
.gtt-table{width:100%;border-collapse:collapse;font-size:0.86rem;}
.gtt-table th{text-align:left;padding:10px 14px;color:var(--muted);font-weight:600;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.3px;border-bottom:1px solid var(--border);white-space:nowrap;}
.gtt-table td{padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap;}
.gtt-table tr:last-child td{border-bottom:none;}
.gtt-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:0.74rem;font-weight:700;}
.gtt-st-offen{background:rgba(255,193,7,0.15);color:#ffc107;}
.gtt-st-ok{background:rgba(61,214,57,0.15);color:var(--green);}
.gtt-st-no{background:rgba(229,72,77,0.15);color:#ff8f92;}
.gtt-empty{color:var(--muted);opacity:.75;font-size:0.88rem;padding:10px 2px;}
.giveaway-embed{margin-top:24px;}
.giveaway-embed h3{margin:0 0 12px;font-size:17px;}
.giveaway-ticket-mount{width:100%;min-height:200px;border:1px solid rgba(255,255,255,0.08);border-radius:16px;background:transparent;padding:20px;box-sizing:border-box;}
.giveaway-ticket-loading{color:var(--muted);text-align:center;padding:40px 0;}
.giveaway-ticket-error{color:var(--muted);text-align:center;padding:40px 0;}
.giveaway-embed-locked{background:var(--hintergrund2, #181D17);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:30px;text-align:center;color:var(--textGedaempft, #E8F0E8);}
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; backdrop-filter: blur(8px); position: relative; }
.card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 24px rgba(61,214,57,0.1); }
.card-thumb { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; font-size: 3.2rem; background: linear-gradient(135deg, var(--dark2), var(--dark3)); border-bottom: 1px solid var(--border); overflow: hidden; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 22px; }
.card-tag { display: inline-block; background: rgba(61,214,57,0.1); color: var(--green); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; margin-bottom: 12px; border: 1px solid rgba(61,214,57,0.2); }
.card-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; line-height: 1.35; color: var(--white); }
.card-desc { color: var(--muted); font-size: 0.88rem; line-height: 1.55; margin-bottom: 18px; }
.card-bonus { font-family: var(--font-display), sans-serif; font-size: 1.9rem; color: var(--green); margin-bottom: 14px; letter-spacing: 0.04em; }
.card-btn { display: block; text-align: center; background: var(--green); color: var(--dark); font-weight: 700; font-size: 0.88rem; padding: 11px; border-radius: var(--radius-btn); text-decoration: none; transition: background .2s, box-shadow .2s; }
.card-btn:hover { background: var(--green-light); }
.ribbon { position: absolute; top: 16px; right: -8px; background: var(--green); color: var(--dark); font-size: 0.7rem; font-weight: 800; padding: 4px 14px 4px 10px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); letter-spacing: 0.06em; text-transform: uppercase; }
.cs-filter-combo { max-width: 900px; margin: 0 auto 32px; background: var(--card-bg-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 16px 44px rgba(0,0,0,0.4); overflow: hidden; transition: border-color .2s; }
.cs-filter-combo:focus-within { border-color: var(--border-strong); }
.casino-filters-bar { display: flex; flex-direction: column; gap: 20px; background: transparent; border: none; border-radius: 0; padding: 20px 28px 24px; box-shadow: none; }
.cf-accordion { margin: 0; }
.cf-accordion-toggle { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; background: transparent; border: none; border-top: 1px solid var(--border); border-radius: 0; padding: 16px 24px; font-family: inherit; font-size: 0.98rem; font-weight: 700; color: var(--text); cursor: pointer; transition: background .2s; }
.cf-accordion-toggle:hover { background: rgba(255,255,255,0.02); }
.cf-accordion-toggle svg { flex-shrink: 0; }
.cf-accordion-toggle > svg:first-child { width: 17px; height: 17px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; }
.cf-chevron { width: 17px; height: 17px; margin-left: auto; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.cf-accordion[open] .cf-chevron { transform: rotate(180deg); }
.cf-accordion-toggle { list-style: none; }
.cf-accordion-toggle::-webkit-details-marker { display: none; }
.cf-accordion-toggle .cf-chevron { transition: transform .2s ease; margin-left: auto; }
.cf-panel-inner { display: flex; flex-direction: column; gap: 20px; }
.cs-search-wrap { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; background: transparent; border: none; border-radius: 0; padding: 16px 24px; margin: 0; }
.cs-search-wrap > svg:first-child { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; }
.cs-search-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 0.98rem; font-weight: 500; }
.cs-search-input::placeholder { color: var(--muted); opacity: .6; font-weight: 400; }
.cs-search-clear { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.06); border: none; cursor: pointer; padding: 0; }
.cs-search-clear svg { width: 11px; height: 11px; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; }
.cs-search-clear:hover { background: rgba(255,255,255,0.12); }
.cs-search-clear.show { display: flex; }
.cf-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cf-group-label { color: var(--muted); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; white-space: nowrap; }
.cf-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--card-bg); border: 1px solid var(--border); color: var(--muted); font-size: 0.82rem; font-weight: 600; padding: 8px 16px; border-radius: 100px; cursor: pointer; transition: all .2s; font-family: inherit; white-space: nowrap; }
.filter-chip:hover { border-color: var(--border-strong); color: var(--text); }
.filter-chip.active { background: rgba(61,214,57,0.14); border-color: rgba(61,214,57,0.45); color: var(--green); }
.filter-chip.active::before { content: '✓'; font-size: 0.78rem; }
.cf-bottom-row { justify-content: space-between; padding-top: 4px; border-top: 1px solid var(--border); }
.cf-reset { display: inline-flex; align-items: center; gap: 7px; background: var(--card-bg); border: 1px solid var(--border-strong); color: var(--text); font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; padding: 8px 16px; border-radius: 100px; transition: all .2s; white-space: nowrap; }
.cf-reset svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.cf-reset:hover:not(:disabled) { color: var(--green); border-color: var(--green); background: rgba(61,214,57,0.12); }
.cf-reset:disabled { opacity: 0.45; cursor: default; }
.cf-results { color: var(--muted); font-size: 0.82rem; }
.cf-results strong { color: var(--green); font-weight: 700; }
@media (max-width: 640px) { .casino-filters-bar { padding: 22px 18px 20px; } .cf-row { gap: 10px; } .cf-group-label { width: 100%; } .cf-bottom-row { flex-direction: column; align-items: flex-start; gap: 12px; } }
.cf-range-row { gap: 28px; align-items: flex-start; }
.cf-range-group { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 8px; }
.cf-range-head { display: flex; align-items: center; justify-content: space-between; }
.cf-range-value { color: var(--green); font-size: 0.84rem; font-weight: 700; }
.cf-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 100px; background: rgba(255,255,255,0.08); outline: none; cursor: pointer; }
.cf-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 2px solid var(--dark); box-shadow: 0 0 10px rgba(61,214,57,0.5); transition: transform .15s; }
.cf-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.cf-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 2px solid var(--dark); box-shadow: 0 0 10px rgba(61,214,57,0.5); cursor: pointer; }
@media (max-width: 640px) { .cf-range-row { flex-direction: column; gap: 16px; } }
.casino-list { display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto; }
.cv-toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; max-width: 900px; margin: 0 auto 16px; }
body.pwa-open .cw-launcher { opacity: 0; pointer-events: none; }
.pwa-bar { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 9999; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px;
background: rgba(18,22,17,.97); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 30px rgba(61,214,57,.12); transform: translateY(140%); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.pwa-bar.in { transform: none; }
.pwa-bar img { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto; }
.pwa-t { flex: 1; min-width: 0; line-height: 1.3; } .pwa-t b { display: block; color: var(--white); font-size: .95rem; } .pwa-t span { font-size: .8rem; color: var(--muted); opacity: .85; }
.pwa-sh { display: inline-block; border: 1px solid var(--border-strong); border-radius: 5px; padding: 0 4px; color: var(--green); }
.pwa-go { background: var(--green); color: #08130a; border: 0; border-radius: 12px; padding: 10px 14px; font: inherit; font-weight: 800; cursor: pointer; flex: 0 0 auto; }
.pwa-x { background: transparent; border: 0; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 6px; flex: 0 0 auto; }
@media (max-width: 900px) { .pwa-bar { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.bcalc { max-width: 900px; margin: 0 auto; }
.bc-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px; backdrop-filter: blur(8px); }
.bc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.bc-grid .bc-full:first-child { grid-column: span 3; } .bc-grid .bc-full:nth-child(2) { grid-column: span 2; }
.bc-grid label { display: flex; flex-direction: column; gap: 6px; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); opacity: .9; }
.bc-grid input, .bc-grid select { background: rgba(0,0,0,.35); border: 1px solid var(--border-strong); color: var(--text); border-radius: 12px; padding: 11px 12px; font: inherit; font-size: .98rem; font-weight: 700; width: 100%; min-width: 0; }
.bc-grid select option { background: #111611; color: #E8F0E8; }
.bc-grid input:focus, .bc-grid select:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.bc-res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.bc-res div { background: rgba(61,214,57,.06); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.bc-res small { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); opacity: .85; }
.bc-res b { font-size: 1.35rem; color: var(--white); } .bc-res .hl { background: rgba(61,214,57,.15); border-color: var(--border-strong); } .bc-res .hl b { color: var(--green); }
.bc-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: .78rem; color: var(--muted); opacity: .85; }
.bc-link { color: var(--green); font-weight: 700; text-decoration: none; } .bc-link:hover { text-decoration: underline; }
@media (max-width: 760px) { .bc-grid { grid-template-columns: 1fr 1fr; } .bc-grid .bc-full:first-child, .bc-grid .bc-full:nth-child(2) { grid-column: 1 / -1; } .bc-res { grid-template-columns: 1fr 1fr; } .bc-card { padding: 16px; } }
.cc-fav { position: absolute; top: 58px; left: 16px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); background: rgba(8,10,8,.55); color: var(--muted); font-size: 1.05rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .2s, border-color .2s, transform .15s; padding: 0; }
.cc-fav:hover { transform: scale(1.08); color: #E6B85C; }
.cc-fav.on { color: #E6B85C; border-color: rgba(230,184,92,.6); background: rgba(230,184,92,.12); }
a.cc-name { text-decoration: none; display: block; } a.cc-name:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.cc-changed { margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: .72rem; font-weight: 800; color: #E6B85C; background: rgba(230,184,92,.12); border: 1px solid rgba(230,184,92,.5); border-radius: 100px; padding: 3px 10px; cursor: pointer; }
.cc-more { display: block; text-align: center; font-size: .8rem; font-weight: 600; color: var(--green); text-decoration: none; padding: 4px 0 0; }
.cc-more:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
.casino-card.cc-open { overflow: clip; }
.casino-card.cc-open .cc-header, .casino-card.cc-open .cc-footer { justify-content: flex-start; align-self: start; position: sticky; top: 96px; }
}
@media (max-width: 600px) {
.casino-card .cc-fav { top: 12px; left: auto; right: 48px; width: 28px; height: 28px; font-size: .9rem; }
.casino-card.cc-cotw .cc-cotw-tag { left: 50%; right: auto; top: 0; transform: translateX(-50%); border-radius: 0 0 12px 12px; white-space: nowrap; padding: 5px 12px 6px; }
.casino-card.cc-cotw .cc-header { padding-top: 46px; }
.casino-card .cc-footer { flex-wrap: wrap; } .casino-card .cc-btn { flex: 1; } .casino-card .cc-more { flex-basis: 100%; padding-top: 2px; }
body .cw-launcher { width: 46px; height: 46px; right: 12px; } body .cw-launcher svg { width: 25px; height: 25px; }
}
.cf-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.cf-sort select { background: var(--card-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: 100px; padding: 8px 32px 8px 14px; font: inherit; font-weight: 700; cursor: pointer; appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233dd639' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.cf-sort option { background: #111611; color: #E8F0E8; }
.cf-sort select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.filter-chip .fc-n { font-size: 0.7rem; font-weight: 800; opacity: .7; background: rgba(255,255,255,.07); border-radius: 100px; padding: 1px 7px; }
.filter-chip.active .fc-n { background: rgba(0,0,0,.18); opacity: 1; }
.cf-active-n { background: var(--green); color: #08130a; font-size: 0.72rem; font-weight: 800; border-radius: 100px; padding: 1px 8px; margin-left: 2px; }
.cf-active-n[hidden] { display: none; }
.cf-hint { display: block; font-size: 0.68rem; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .7; margin-top: 2px; }
.cf-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 44px 20px; border: 1px dashed var(--border-strong); border-radius: 18px; color: var(--muted); }
.cf-empty b { color: var(--text); font-size: 1.05rem; } .cf-empty-ico { font-size: 1.8rem; }
.cf-empty-btn { margin-top: 6px; background: var(--green); color: #08130a; border: 0; border-radius: 100px; padding: 10px 18px; font: inherit; font-weight: 800; cursor: pointer; }
@media (max-width: 520px) { .cf-sort span { display: none; } .cf-sort select { max-width: 210px; } }
.cv-toggle { display: inline-flex; background: var(--card-bg-strong); border: 1px solid var(--border); border-radius: 100px; padding: 4px; gap: 4px; }
.cv-toggle-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 100px; border: none; background: transparent; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; padding: 0; }
.cv-toggle-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cv-toggle-btn:hover { color: var(--text); }
.cv-toggle-btn.active { background: var(--green); color: var(--dark); }
.casino-list.view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); max-width: 1200px; align-items: start; }
.casino-list.view-grid .casino-card { display: flex; flex-direction: column; }
@media (min-width: 900px) {
.casino-list.view-grid .casino-card { grid-template-columns: none; }
.casino-list.view-grid .cc-header { grid-column: auto; grid-row: auto; border-right: none; border-bottom: 1px solid var(--border); }
.casino-list.view-grid .cc-body { grid-column: auto; grid-row: auto; }
.casino-list.view-grid .cc-footer { grid-column: auto; grid-row: auto; border-left: none; border-top: 1px solid var(--border); }
}
.casino-wheel-outer { position: relative; height: min(700px, 78vh); max-width: 900px; margin: 0 auto 20px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, black 8%, black 92%, transparent 100%); }
.wheel-scroll { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wheel-scroll::-webkit-scrollbar { display: none; }
.wheel-spacer { height: 50%; }
.wheel-item { scroll-snap-align: center; margin: 0 auto 24px; transition: transform .15s ease-out, width .15s ease-out, opacity .15s ease-out, border-color .15s; width: 100%; }
.casino-card.wheel-item { display: flex; flex-direction: column; }
@media (min-width: 900px) {
.casino-card.wheel-item { grid-template-columns: none; }
.casino-card.wheel-item .cc-header { grid-column: auto; grid-row: auto; border-right: none; border-bottom: 1px solid var(--border); }
.casino-card.wheel-item .cc-body { grid-column: auto; grid-row: auto; }
.casino-card.wheel-item .cc-footer { grid-column: auto; grid-row: auto; border-left: none; border-top: 1px solid var(--border); }
}
.wheel-hint { text-align: center; color: var(--muted); font-size: 0.82rem; margin: 0 0 40px; }
@media (max-width: 560px) {
.casino-wheel-outer { height: min(640px, 82vh); max-width: 100%; }
}
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1120px; margin: 0 auto; }
.faq-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px 26px; backdrop-filter: blur(8px); transition: border-color .25s, box-shadow .25s; cursor: pointer; }
.faq-item:hover { border-color: var(--border-strong); box-shadow: 0 8px 32px rgba(61,214,57,0.1); }
.faq-q-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.faq-q { font-weight: 700; font-size: 1rem; color: var(--white); line-height: 1.4; }
.faq-toggle { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--green); transition: transform .25s, background .25s; margin-top: 1px; }
.faq-toggle svg { width: 12px; height: 12px; stroke: var(--green); stroke-width: 2.4; fill: none; }
.faq-item.open .faq-toggle { background: rgba(61,214,57,0.12); transform: rotate(45deg); }
.faq-a { color: var(--muted); font-size: 0.9rem; line-height: 1.65; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease; margin-top: 0; }
.faq-item.open .faq-a { max-height: 260px; opacity: 0.88; margin-top: 14px; }
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; } }
#faq .faqp-head { margin-bottom: 18px; }
.faqp-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 1120px; margin: 0 auto 28px; }
.faqp-cat { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); font-size: .86rem; font-weight: 700; text-decoration: none; transition: border-color .2s, color .2s; }
.faqp-cat:hover { border-color: var(--green); color: var(--green); }
.faqp-group { max-width: 1120px; margin: 0 auto 34px; scroll-margin-top: 90px; }
.faqp-gtitle { font-size: 1.15rem; font-weight: 800; margin: 0 0 14px; color: var(--text); }
.faqp-grid { align-items: start; }
#faq .faq-item.open .faq-a { max-height: 1200px; }
#faq .faq-a ul { margin: 8px 0 4px; padding-left: 20px; } #faq .faq-a li { margin: 3px 0; }
#faq .faq-a a { color: var(--green); }
.faqp-more { text-align: center; color: var(--muted); font-size: .92rem; margin: 10px auto 0; max-width: 760px; } .faqp-more a { color: var(--green); }
.casino-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; backdrop-filter: blur(8px); transition: border-color .25s, box-shadow .25s; position: relative; }
.casino-card:hover { border-color: var(--border-strong); box-shadow: 0 8px 32px rgba(61,214,57,0.12); }
.cc-number { position: absolute; top: 16px; left: 16px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: var(--green); border: 1px solid rgba(0,0,0,0.25); color: #08130A; font-size: 0.92rem; font-weight: 800; display: flex; align-items: center; justify-content: center; font-family: var(--font-display), sans-serif; letter-spacing: 0.02em; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.cc-number.gold { background: #FFC832; border-color: rgba(0,0,0,0.25); color: #1A1000; }
.cc-number.silver { background: #D8D8E4; border-color: rgba(0,0,0,0.25); color: #14141C; }
.cc-number.bronze { background: #D9873F; border-color: rgba(0,0,0,0.25); color: #1A0F04; }
.cc-header { display: flex; flex-direction: column; align-items: center; padding: 32px 24px 20px; border-bottom: 1px solid var(--border); background: rgba(61,214,57,0.03); position: relative; }
.cc-icon { width: 80px; height: 80px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; background: var(--dark3); border: 1px solid var(--border); overflow: hidden; margin-bottom: 12px; }
.cc-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.cc-name { font-weight: 700; color: var(--white); font-size: 1.2rem; margin-bottom: 4px; text-align: center; }
.cc-stars-wrap { display: flex; align-items: center; gap: 8px; }
.cc-stars-svg { display: flex; gap: 2px; }
.cc-stars-svg svg { width: 18px; height: 18px; }
.cc-rating-num { color: var(--green); font-weight: 700; font-size: 0.9rem; }
.cc-lbls { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 8px; }
.cc-lbl { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgba(61,214,57,0.14); color: var(--green, #3DD639); border: 1px solid rgba(61,214,57,0.35); }
.cc-excl { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: linear-gradient(90deg, #3DD639, #9bf58f); color: #08130a; font-weight: 800; font-size: 0.9rem; text-align: center; }
.cc-code-badge { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; background: rgba(61,214,57,0.1); border: 1px dashed rgba(61,214,57,0.45); border-radius: 8px; padding: 5px 8px 5px 12px; font-size: 0.82rem; letter-spacing: 0.03em; }
.cc-code-label { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; }
.cc-code-value { color: var(--green-light); font-weight: 800; letter-spacing: 0.05em; }
.cc-code-copy { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; background: rgba(61,214,57,0.14); border: none; cursor: pointer; padding: 0; margin-left: 2px; transition: background .2s, transform .15s; }
.cc-code-copy:hover { background: rgba(61,214,57,0.28); }
.cc-code-copy:active { transform: scale(0.92); }
.cc-code-copy svg { width: 13px; height: 13px; fill: none; stroke: var(--green-light); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.cc-code-copy.copied svg { stroke: var(--green); }
.cc-body { padding: 18px 24px; display: flex; flex-direction: column; gap: 12px; }
.cc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cc-label { color: var(--text); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.cc-bonus-big { font-family: var(--font-display), sans-serif; font-size: 1.6rem; color: var(--green); letter-spacing: 0.03em; line-height: 1; text-shadow: 0 0 20px rgba(61,214,57,0.35); font-variant-numeric: tabular-nums; }
.cc-bonus-big.is-counting { animation: cc-bonus-pulse 1.4s ease-out; }
.b4i { width: 1.12em; height: 1.12em; display: inline-block; vertical-align: -0.2em; flex: 0 0 auto; overflow: visible; }
.b4i-gold { color: #E6B85C; } .b4i-green { color: #3DD639; } .b4i-red { color: #ff6166; } .b4i-orange { color: #ff9f43; } .b4i-cyan { color: #5cc8ff; }
.cc-excl .b4i, .cotw-excl .b4i, .cc-lbl .b4i, .btn .b4i, button .b4i { color: inherit; }
.b4i-silver { color: #c7cfd6; } .b4i-bronze { color: #cd8a4b; } .b4i-yellow { color: #f5d742; }
img.lg-fit { object-fit: contain !important; padding: 9%; box-sizing: border-box; border-radius: 0 !important; }
.ct-logo.lg-fit { padding: 2px; }
.cotw-logo img.lg-fit { padding: 10%; }
.cc-lbls { justify-content: center; gap: 5px; }
.cc-lbl { white-space: nowrap; }
.cc-code-badge { max-width: 100%; box-sizing: border-box; }
.cc-code-badge .cc-code-value { white-space: nowrap; }
.cc-more { white-space: nowrap; font-size: .78rem; }
@media (min-width: 900px) {
.casino-card { min-height: 300px; }
.cc-header .cc-lbl { font-size: .6rem; padding: 3px 7px; letter-spacing: .04em; }
.cc-header .cc-lbls { max-width: 176px; margin-left: auto; margin-right: auto; }
.casino-card { grid-template-columns: 216px 1fr 220px; }
.cc-header .cc-code-badge { width: 100%; justify-content: center; flex-wrap: wrap; gap: 2px 8px; padding: 6px 8px; }
.cc-header .cc-code-label { flex-basis: 100%; text-align: center; font-size: .6rem; letter-spacing: .1em; }
.cc-header .cc-code-value { font-size: .86rem; letter-spacing: .03em; }
}
.cnt-d { display: inline-block; font-style: normal; text-align: center; transition: width .32s cubic-bezier(.2,.8,.2,1); }
.odo { position: relative; display: inline-block; overflow: hidden; height: 1em; line-height: 1; vertical-align: top; }
.odo-w { visibility: hidden; display: inline-block; line-height: 1; }
.odo-r { position: absolute; left: 50%; top: 0; display: flex; flex-direction: column; line-height: 1; transform: translate(-50%, 0); transition: transform 1.35s cubic-bezier(.12,.9,.25,1); will-change: transform; }
.odo-r > span { display: block; height: 1em; line-height: 1; text-align: center; }
.stat-num.is-counting, .cc-bonus-big.is-counting { line-height: 1; }
@keyframes cc-bonus-pulse {
0%   { text-shadow: 0 0 0px rgba(61,214,57,0); }
45%  { text-shadow: 0 0 26px rgba(61,214,57,0.65); }
100% { text-shadow: 0 0 20px rgba(61,214,57,0.35); }
}
.cc-divider { height: 1px; background: rgba(255,255,255,0.05); }
.cc-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-pill { font-size: 0.75rem; padding: 4px 10px 4px 6px; border-radius: 100px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.cc-pill-icon { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.cc-badge-wager { background: rgba(255,255,255,0.05); color: var(--text); font-weight: 500; padding: 5px 14px; border-radius: 100px; font-size: 0.82rem; display: inline-block; }
.cc-badge-empty { color: var(--muted); font-size: 0.82rem; }
.cc-badge-fs { background: rgba(61,214,57,0.08); color: var(--green-light); font-weight: 700; padding: 5px 14px; border-radius: 100px; font-size: 0.82rem; border: 1px solid rgba(61,214,57,0.15); display: inline-block; }
.cc-infobox { background: rgba(255,255,255,0.025); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; display: none; grid-template-columns: 1fr; gap: 16px; }
.casino-card.cc-open .cc-infobox { display: grid; }
.cc-infobox-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cc-infobox-col:not(:first-child) { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 14px; }
.cc-infobox-head { display: flex; align-items: center; gap: 7px; color: var(--green); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.cc-license-name { color: var(--text); font-size: 0.9rem; font-weight: 600; }
.cc-features-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.cc-features-list li { color: var(--text); font-size: 0.82rem; line-height: 1.4; padding-left: 14px; position: relative; }
.cc-features-list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(61,214,57,0.6); }
.cc-toggle-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 0.92rem; padding: 12px; border-radius: var(--radius-btn); cursor: pointer; transition: background .2s, border-color .2s; font-family: inherit; width: 100%; margin-bottom: 10px; }
.cc-toggle-btn:hover { background: rgba(255,255,255,0.09); border-color: var(--border-strong); }
.cc-toggle-arrow { transition: transform .2s; font-size: 0.7rem; display: inline-block; }
.casino-card.cc-open .cc-toggle-arrow { transform: rotate(180deg); }
.cc-footer { padding: 16px 24px; border-top: 1px solid var(--border); }
.cc-btn { display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center; background: var(--green); color: var(--dark); font-weight: 700; font-size: 1rem; padding: 14px; border-radius: var(--radius-btn); text-decoration: none; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 0 20px rgba(61,214,57,0.25); }
.cc-btn:hover { background: var(--green-light); transform: translateY(-1px); box-shadow: 0 0 36px rgba(61,214,57,0.45); }
.cc-btn .play-ico { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(8,10,8,0.25); border-radius: 50%; }
.cc-btn .play-ico svg { width: 8px; height: 9px; fill: var(--dark); margin-left: 1px; }
@media (min-width: 900px) {
.casino-card { display: grid; grid-template-columns: 200px 1fr 220px; }
.cc-header { grid-column: 1; grid-row: 1 / 3; border-bottom: none; border-right: 1px solid var(--border); justify-content: center; padding: 24px 18px; }
.cc-body { grid-column: 2; grid-row: 1 / 3; padding: 20px 24px; }
.cc-footer { grid-column: 3; grid-row: 1 / 3; border-top: none; border-left: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.cc-toggle-btn { margin-bottom: 0; }
}
.tw-stream-wrap { max-width: 1200px; margin: 0 auto; }
.tw-live-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(61,214,57,0.1); border: 1px solid rgba(61,214,57,0.3); border-radius: 100px; padding: 5px 16px; font-size: 0.78rem; font-weight: 700; color: var(--green); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 20px; }
.tw-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; animation: livepulse 1.5s infinite; }
.tw-embed-grid { display: grid; grid-template-columns: 1fr 340px; gap: 0; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border); }
.tw-player-wrap { position: relative; padding-top: 56.25%; background: var(--dark2); }
.tw-player-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.tw-chat-wrap { background: var(--dark2); border-left: 1px solid var(--border); position: relative; min-height: 480px; }
.tw-chat-wrap iframe { width: 100%; height: 100%; min-height: 480px; border: none; display: block; }
.tw-actions { margin-top: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.brand-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--card-bg); border: 1px solid var(--border); color: var(--text); font-weight: 700; font-size: 0.88rem; padding: 10px 22px; border-radius: var(--radius-btn); text-decoration: none; backdrop-filter: blur(8px); transition: transform .25s, border-color .25s, box-shadow .25s, color .25s; }
.brand-pill:hover { transform: translateY(-4px); border-color: var(--brand, var(--border-strong)); color: var(--brand, var(--text)); box-shadow: 0 8px 32px rgba(61,214,57,0.1), 0 0 40px -8px var(--brand, transparent); }
.brand-pill-icon { width: 18px; height: 18px; object-fit: contain; filter: brightness(0) invert(1); flex-shrink: 0; }
.brand-pill-sm { padding: 10px 18px; font-size: 13px; gap: 7px; white-space: nowrap; }
.brand-pill-sm .brand-pill-icon { width: 15px; height: 15px; }
.tw-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #4a4a4a; display: inline-block; flex-shrink: 0; transition: background .3s, box-shadow .3s; }
.tw-status-dot.is-live { background: var(--green); box-shadow: 0 0 6px rgba(61,214,57,0.8); animation: livepulse 1.5s infinite; }
.tw-live-badge.is-live-text { color: var(--green); }
.tw-hint { color: var(--muted); font-size: 0.8rem; }
@keyframes livepulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.tw-facade-label { color: var(--text); font-weight: 700; font-size: 0.95rem; }
.tw-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle at 50% 40%, rgba(61,214,57,0.12), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 14px), linear-gradient(180deg, var(--dark3), var(--dark2)); text-align: center; padding: 24px; }
.tw-loading .spin { display: inline-block; width: 36px; height: 36px; border: 3px solid rgba(61,214,57,0.2); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
@media (max-width: 768px) { .tw-embed-grid { grid-template-columns: 1fr; } .tw-chat-wrap { border-left: none; border-top: 1px solid var(--border); } .tw-chat-wrap iframe { min-height: 620px; } .tw-chat-wrap { min-height: 620px; } }
.bh-section { margin-top: 40px; max-width: 1200px; margin-left: auto; margin-right: auto; }
.bh-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.bh-title-wrap { display: flex; align-items: center; gap: 10px; }
.bh-icon-badge { width: 34px; height: 34px; border-radius: 9px; background: rgba(61,214,57,0.12); border: 1px solid rgba(61,214,57,0.35); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.bh-title { font-family: var(--font-display), sans-serif; font-size: 2.1rem; letter-spacing: 0.03em; color: var(--white); line-height: 1; text-transform: uppercase; }
.bh-title .accent { color: var(--green); }
.bh-live-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(61,214,57,0.1); border: 1px solid rgba(61,214,57,0.3); border-radius: 100px; padding: 5px 14px; font-size: 0.74rem; font-weight: 700; color: var(--green); letter-spacing: 0.06em; text-transform: uppercase; }
.clips-wrap { position: relative; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--dark2); min-height: 280px; }
.clips-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.clips-facade { position: static; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 24px; background: radial-gradient(circle at 50% 35%, rgba(61,214,57,0.10), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 14px), linear-gradient(180deg, var(--dark3), var(--dark2)); text-align: center; }
.clips-facade:hover .clips-play-circle { transform: scale(1.07); box-shadow: 0 0 50px rgba(61,214,57,0.6); }
.clips-play-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 36px rgba(61,214,57,0.45); transition: transform .2s, box-shadow .2s; font-size: 1.6rem; }
.clips-facade-label { color: var(--text); font-weight: 700; font-size: 0.95rem; }
.clips-facade-sub { color: var(--muted); font-size: 0.8rem; max-width: 280px; line-height: 1.5; }
.clips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: center; gap: 18px; padding: 20px; align-items: start; }
.clip-card { position: relative; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--dark2); cursor: pointer; transition: border-color .25s, transform .25s, box-shadow .25s; }
.clip-card:hover { border-color: rgba(61,214,57,0.4); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.clip-thumb-wrap { position: relative; padding-top: 56.25%; background: var(--dark3); overflow: hidden; }
.clip-thumb-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.15); transition: background .2s; }
.clip-card:hover .clip-play-overlay { background: rgba(0,0,0,0.35); }
.clip-play-btn { width: 46px; height: 46px; border-radius: 50%; background: rgba(61,214,57,0.92); display: flex; align-items: center; justify-content: center; color: var(--dark); font-size: 1.05rem; box-shadow: 0 0 24px rgba(61,214,57,0.5); transition: transform .2s; }
.clip-card:hover .clip-play-btn { transform: scale(1.12); }
.clip-duration { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,0.75); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.clip-meta { padding: 12px 14px 14px; }
.clip-title { color: var(--text); font-weight: 700; font-size: 0.85rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.clip-sub { color: var(--muted); font-size: 0.73rem; }
.clip-embed-wrap { position: relative; padding-top: 56.25%; background: #000; }
.clip-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.clips-empty { padding: 40px 24px; text-align: center; color: var(--muted); font-size: 0.88rem; }
.clips-loading-grid { display: flex; align-items: center; justify-content: center; padding: 60px 24px; }
.social-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.social-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 32px 24px; text-align: center; transition: transform .25s, border-color .25s, box-shadow .25s; backdrop-filter: blur(8px); text-decoration: none; color: inherit; display: block; width: 200px; flex-shrink: 0; }
.social-card:hover { transform: translateY(-4px); border-color: var(--brand, var(--border-strong)); box-shadow: 0 8px 32px rgba(61,214,57,0.1), 0 0 40px -8px var(--brand, transparent); }
.social-icon-wrap { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid var(--border); transition: background .3s, box-shadow .3s, border-color .3s; }
.social-card:hover .social-icon-wrap { background: color-mix(in srgb, var(--brand, var(--green)) 18%, transparent); border-color: var(--brand, var(--border-strong)); box-shadow: 0 0 28px 2px var(--brand, transparent); }
.social-icon { width: 28px; height: 28px; display: block; object-fit: contain; filter: brightness(0) invert(1); transition: filter .3s; }
.social-name { font-family: var(--font-display), sans-serif; font-size: 1.5rem; letter-spacing: 0.05em; margin-bottom: 6px; color: var(--white); }
.social-handle { color: var(--green); font-size: 0.88rem; font-weight: 600; margin-bottom: 14px; transition: color .3s; }
.social-card:hover .social-handle { color: var(--brand, var(--green)); }
.social-desc { color: var(--muted); font-size: 0.84rem; line-height: 1.55; }
footer { position: relative; z-index: 1; background: linear-gradient(0deg, var(--dark3) 0%, rgba(13,17,13,0.96) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--border-strong); padding: 20px 5vw 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; box-shadow: 0 -4px 28px rgba(0,0,0,0.35), 0 -1px 0 rgba(61,214,57,0.1); flex-shrink: 0; }
.footer-logo { font-family: var(--font-display), sans-serif; font-size: 1.9rem; letter-spacing: 0.08em; }
.footer-logo .num { color: var(--green); } .footer-logo .word { color: var(--white); }
.footer-logo img.brand-logo-img { height: 80px; width: auto; display: block; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--muted); font-size: 0.84rem; text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--green); }
.footer-legal { color: var(--muted); font-size: 0.75rem; line-height: 1.65; max-width: 560px; margin-top: 8px; }
.footer-copy { color: var(--muted); font-size: 0.74rem; margin-top: 4px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) { .section { padding: 60px 4vw 36px; } .stats-strip { padding: 0 4vw 60px; } .cc-icon { width: 100px; height: 100px; } footer { padding-top: 18px; } }
.bh-stats-wrap { max-width: 1000px; margin: 0 auto; }
.bh-stats-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.bh-stats-kpi-grid.row2 { grid-template-columns: repeat(4, 1fr); }
.bh-kpi { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px 18px; backdrop-filter: blur(8px); transition: border-color .25s, box-shadow .25s; }
.bh-kpi:hover { border-color: var(--border-strong); box-shadow: 0 0 20px rgba(61,214,57,0.1); }
.bh-kpi-label { color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 8px; }
.bh-kpi-val { font-family: var(--font-display), sans-serif; font-size: 1.9rem; color: var(--green); line-height: 1; letter-spacing: 0.02em; }
.bh-kpi-val.red { color: #e05555; }
.bh-kpi-sub { color: var(--muted); font-size: 0.75rem; margin-top: 5px; line-height: 1.4; }
.bh-stats-highlight-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.bh-highlight { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px 22px; backdrop-filter: blur(8px); display: flex; align-items: center; gap: 18px; transition: border-color .25s, box-shadow .25s; }
.bh-highlight:hover { border-color: var(--border-strong); box-shadow: 0 0 20px rgba(61,214,57,0.1); }
.bh-highlight-icon { font-size: 2.2rem; flex-shrink: 0; }
.bh-highlight-label { color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 4px; }
.bh-highlight-title { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: 2px; }
.bh-highlight-val { font-family: var(--font-display), sans-serif; font-size: 1.7rem; color: var(--green); line-height: 1; }
.bh-highlight-sub { color: var(--muted); font-size: 0.76rem; margin-top: 3px; }
.bh-stats-top-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; }
.bh-top-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px 18px; backdrop-filter: blur(8px); }
.bh-top-box-head { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.bh-top-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); gap: 8px; }
.bh-top-item:last-child { border-bottom: none; }
.bh-top-name { color: var(--text); font-size: 0.84rem; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-top-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bh-top-multi { color: var(--green); font-size: 0.8rem; font-weight: 700; }
.bh-top-count { background: rgba(61,214,57,0.1); border: 1px solid rgba(61,214,57,0.2); color: var(--muted); font-size: 0.72rem; padding: 2px 8px; border-radius: 100px; }
.bh-stats-loading { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 0.95rem; }
.bh-stats-loading .spin { display: inline-block; width: 32px; height: 32px; border: 3px solid rgba(61,214,57,0.2); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; margin-bottom: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.bh-stats-err { text-align: center; padding: 40px; color: #e05555; font-size: 0.9rem; background: var(--card-bg); border: 1px solid rgba(224,85,85,0.2); border-radius: var(--radius-card); }
.bh-refresh-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; padding: 6px 14px; border-radius: 100px; cursor: pointer; font-family: inherit; transition: all .2s; margin-top: 12px; }
.bh-refresh-btn:hover { border-color: var(--green); color: var(--green); }
.bh-section-sub { color: var(--muted); font-size: 0.85rem; margin: -8px 0 18px; max-width: 520px; line-height: 1.5; }
.sched-notice { background: rgba(255,193,7,0.1); border: 1px solid rgba(255,193,7,0.45); color: #ffd666; border-radius: var(--radius-card); padding: 12px 16px; margin-bottom: 12px; font-weight: 600; font-size: 0.92rem; }
.sched-badge { display: inline-block; vertical-align: middle; margin-left: 10px; font-family: inherit; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; background: var(--c); color: #0b0f0b; }
.sched-hero.is-off .sched-hero-ttl, .sched-hero.is-off .sched-hero-day { text-decoration: line-through; opacity: 0.55; }
.sched-hero.is-off { border-color: rgba(229,72,77,0.45); box-shadow: none; }
.sched-hero-info { margin-top: 8px; font-size: 0.86rem; color: var(--white); }
.sched-hero-cd.is-off { color: #ff8f92; font-family: inherit; }
.sched-slot-tab.is-off { text-decoration: line-through; opacity: 0.6; }
.sched-day-flag { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); }
.sched-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 16px; }
.sched-day-cell { position: relative; background: var(--dark2); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 6px 12px; text-align: center; overflow: hidden; transition: border-color .2s, background .2s, transform .15s, box-shadow .2s; }
.sched-day-cell.has-stream { cursor: pointer; }
.sched-day-cell.has-stream:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.sched-day-cell.is-today { border-color: rgba(61,214,57,0.45); background: rgba(61,214,57,0.06); }
.sched-day-cell.is-selected { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 8px 24px -8px rgba(61,214,57,0.55); background: rgba(61,214,57,0.09); }
.sched-day-abbr { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 5px; }
.sched-day-num { font-family: var(--font-display), sans-serif; font-size: 1.35rem; color: var(--white); line-height: 1; margin-bottom: 9px; }
.sched-day-cell.is-today .sched-day-num, .sched-day-cell.is-selected .sched-day-num { color: var(--green); }
.sched-day-icon { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px; font-size: 0.9rem; line-height: 1; min-height: 16px; overflow: hidden; max-width: 100%; }
.sched-day-cell:not(.has-stream) .sched-day-abbr, .sched-day-cell:not(.has-stream) .sched-day-num { opacity: 0.32; }
.sched-day-live { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #e05555; animation: schedPulseLive 1.4s ease-in-out infinite; }
.sched-hero { position: relative; overflow: hidden; background: linear-gradient(150deg, rgba(61,214,57,0.09), rgba(13,17,13,0.92) 60%); border: 1px solid rgba(61,214,57,0.4); border-radius: var(--radius-card); padding: 26px 28px; box-shadow: 0 0 44px -12px rgba(61,214,57,0.25); transition: opacity .15s; }
.sched-hero.is-empty { background: linear-gradient(150deg, rgba(255,255,255,0.02), rgba(13,17,13,0.92) 60%); border-color: var(--border); box-shadow: none; }
.sched-hero-glow { position: absolute; top: -70px; right: -60px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(61,214,57,0.22), transparent 70%); pointer-events: none; }
.sched-hero-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.sched-hero-tag { display: inline-flex; align-items: center; gap: 7px; background: rgba(61,214,57,0.15); border: 1px solid rgba(61,214,57,0.4); color: var(--green); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 6px 13px; border-radius: 100px; }
.sched-hero-cd { font-size: 0.85rem; font-weight: 700; color: var(--green-light); font-family: monospace; letter-spacing: 0.02em; }
.sched-hero-cd.is-live { color: #fff; background: #e05555; padding: 5px 13px; border-radius: 100px; font-family: inherit; animation: schedPulseLive 1.4s ease-in-out infinite; }
@keyframes schedPulseLive { 0%, 100% { box-shadow: 0 0 0 rgba(224,85,85,0.55); } 50% { box-shadow: 0 0 18px rgba(224,85,85,0.75); } }
.sched-hero-main { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.sched-hero-icon { flex-shrink: 0; width: 62px; height: 62px; border-radius: 15px; background: rgba(61,214,57,0.12); border: 1px solid rgba(61,214,57,0.35); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; }
.sched-hero-day { color: var(--green); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.sched-hero-title { font-family: var(--font-display), sans-serif; font-size: 1.65rem; color: var(--white); letter-spacing: 0.02em; line-height: 1.15; margin-bottom: 4px; }
.sched-hero-sub { color: var(--muted); font-size: 0.86rem; }
.sched-hero-actions { position: relative; z-index: 1; display: flex; gap: 10px; }
.sched-hero-actions .brand-pill { flex: 1; justify-content: center; }
.sched-slot-tabs { position: relative; z-index: 1; display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.sched-slot-tab { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--muted); font-size: 0.78rem; font-weight: 600; padding: 7px 14px; border-radius: 100px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.sched-slot-tab:hover { border-color: var(--border-strong); }
.sched-slot-tab.is-active { background: rgba(61,214,57,0.14); border-color: var(--green); color: var(--green-light); }
.sched-slot-tab.is-live { border-color: #e05555; color: #fff; background: rgba(224,85,85,0.18); }
@media (max-width: 700px) {
.sched-week-grid { gap: 5px; }
.sched-day-cell { padding: 10px 3px 9px; }
.sched-day-abbr { font-size: 0.56rem; }
.sched-day-num { font-size: 1.05rem; margin-bottom: 6px; }
}
@media (max-width: 560px) {
.sched-hero { padding: 20px; }
.sched-hero-main { flex-direction: column; align-items: flex-start; gap: 14px; }
.sched-hero-actions { flex-direction: column; }
}
@media (max-width: 768px) { .bh-stats-kpi-grid, .bh-stats-kpi-grid.row2 { grid-template-columns: repeat(2, 1fr); } .bh-stats-highlight-row { grid-template-columns: 1fr; } .bh-stats-top-row { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .bh-stats-kpi-grid, .bh-stats-kpi-grid.row2 { grid-template-columns: repeat(2, 1fr); } .bh-kpi-val { font-size: 1.5rem; } }
.cw-launcher { position: fixed; bottom: 24px; right: 24px; z-index: 9998; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(120% 120% at 30% 20%, #7af777 0%, #3dd639 45%, #1f9b1d 100%); box-shadow: 0 10px 28px rgba(61,214,57,.45), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.18) !important; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 30px rgba(61,214,57,0.4); transition: transform .2s, box-shadow .2s, opacity .2s; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 0; padding: 0; }
.cw-launcher:hover { transform: scale(1.07); box-shadow: 0 12px 36px rgba(61,214,57,0.6); }
.cw-launcher svg { width: 32px; height: 32px; fill: none; stroke: none; overflow: visible; transition: transform .25s; }
.cw-launcher .cwl-back { fill: none; stroke: #062306; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cw-launcher .cwl-front { fill: #062306; }
.cw-launcher .cwl-dot { fill: #3dd639; }
.cw-launcher:hover svg { transform: rotate(-6deg) scale(1.04); }
.cw-launcher:hover .cwl-dot { animation: cwlDot 1s ease-in-out infinite; }
.cw-launcher:hover .cwl-dot:nth-of-type(2) { animation-delay: .15s; } .cw-launcher:hover .cwl-dot:nth-of-type(3) { animation-delay: .3s; }
@keyframes cwlDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cw-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; line-height: 20px; text-align: center; background: #ff4d55; color: #fff; font-size: 0.66rem; font-weight: 800; padding: 0 6px; border-radius: 100px; box-shadow: 0 0 0 2px var(--dark, #0b0f0a); }
body.cx-open .cw-launcher { opacity: 0; pointer-events: none; transform: scale(.8); }
.cx { position: fixed; z-index: 9999; top: calc(var(--nav-h, 68px) + 10px); right: 16px; bottom: 16px; width: 440px; max-width: calc(100vw - 32px); display: none; flex-direction: column; background: linear-gradient(180deg, #141b13, #0c110b); border: 1px solid rgba(61,214,57,.28); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.65); overflow: hidden; transition: width .3s; color: var(--text, #E8F0E8); font-family: inherit; isolation: isolate; }
.cx.open { display: flex; animation: cxIn .22s ease-out; }
@keyframes cxIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.cx.wide { width: min(780px, calc(100vw - 32px)); }
.cx button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.cx svg.ci { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.cx-top { display: flex; align-items: center; gap: 8px; padding: 12px 12px 0; }
.cx-tabs { flex: 1; display: flex; gap: 4px; padding: 4px; background: #0a0f0a; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; min-width: 0; }
.cx-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 10px; border-radius: 10px; font-weight: 700; font-size: 14px; color: #a9bba9; position: relative; transition: background .2s, color .2s; min-width: 0; white-space: nowrap; }
.cx-tab:hover { color: #fff; }
.cx-tab.on { background: linear-gradient(180deg, #1f2c1e, #172217); color: #fff; box-shadow: 0 0 0 1px rgba(61,214,57,.35) inset; }
.cx-tab .cx-dot { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ff4d55; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; }
.cx-tab .cx-dot.soft { min-width: 8px; width: 8px; height: 8px; padding: 0; background: var(--green, #3DD639); }
.cx-ib { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #b9c9b9; border: 1px solid rgba(255,255,255,.07) !important; background: #0f150f !important; flex: 0 0 auto; }
.cx-ib:hover { color: #fff; border-color: rgba(61,214,57,.4) !important; }
.cx-pane { display: none; flex-direction: column; flex: 1; min-height: 0; position: relative; }
.cx-pane.on { display: flex; }
.cx-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 12.5px; color: var(--muted, #8ea58e); }
.cx-live { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cx-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green, #3DD639); box-shadow: 0 0 0 3px rgba(61,214,57,.18); flex: 0 0 auto; }
.cx-live b { color: #d8f5d6; }
.cx-avs { display: flex; }
.cx-avs img, .cx-avs span { width: 22px; height: 22px; border-radius: 50%; margin-left: -6px; border: 2px solid #121811; object-fit: cover; background: #1f2b1f; }
.cx-sub a, .cx-sub .cx-link { color: #9fe89c; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cx-pin { margin: 10px 12px 0; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(230,184,92,.14), rgba(230,184,92,.04)); border: 1px solid rgba(230,184,92,.3); font-size: 13px; line-height: 1.45; }
.cx-pin svg { color: #e6b85c; width: 17px !important; height: 17px !important; margin-top: 1px; }
.cx-pin b { color: #ffe3a3; }
.cx-pin > div { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.cx-pin .cx-unpin { color: #9fb1a0; padding: 0 2px; }
.cx-rules { margin: 10px 12px 0; padding: 10px 12px; border-radius: 12px; background: #0f150f; border: 1px solid rgba(255,255,255,.08); font-size: 13px; line-height: 1.5; color: #cfe3cf; white-space: pre-wrap; }
.cx-list { flex: 1; overflow-y: auto; padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cx-list > * { flex-shrink: 0; }
.cx-list::-webkit-scrollbar { width: 8px; } .cx-list::-webkit-scrollbar-thumb { background: #243024; border-radius: 8px; }
.cx-day { align-self: center; margin: 10px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6f866f; background: #0f150f; border: 1px solid rgba(255,255,255,.07); padding: 3px 10px; border-radius: 999px; }
.cx-m { display: flex; gap: 10px; padding: 5px 6px; border-radius: 12px; position: relative; }
.cx-m:hover, .cx-m.acts-on { background: rgba(255,255,255,.025); }
.cx-av { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #081108; background: linear-gradient(135deg, #7ef57a, #1f9d1f); overflow: hidden; position: relative; }
.cx-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-m.cont { padding-top: 0; } .cx-m.cont .cx-av { visibility: hidden; height: 0; }
.cx-bd { min-width: 0; flex: 1; }
.cx-hd { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 2px; flex-wrap: wrap; }
.cx-hd b { font-weight: 700; color: #d8f5d6; }
.cx-hd time { font-size: 11px; color: #6f866f; }
.cx-m.me .cx-hd b { color: #ffd77e; }
.cx-role { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; }
.cx-compose { position: relative; }
.cx-emo { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); z-index: 7; background: #0f150f; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 8px 8px 10px; box-shadow: 0 -12px 34px rgba(0,0,0,.5); max-height: 260px; overflow-y: auto; }
.cx-emo small { display: block; padding: 4px 6px; color: var(--muted, #8ea58e); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cx-emo-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; }
.cx-emo-g button { height: 38px; border-radius: 9px; font-size: 22px !important; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important; }
.cx-emo-g button:hover { background: #1a2219 !important; }
.cx-box .cx-emo-btn { width: 36px; }
.cx-role.mg { background: rgba(88,180,255,.18); color: #8fd0ff; }
.cx a.cx-a { color: #8fe88b; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.cx a.cx-a:hover { color: #b8ffb5; }
.cx-bub.u a.cx-a { color: #fff; }
.cx-pin a.cx-a { color: #ffe3a3; }
.cx-who { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #d8f5d6; margin-bottom: 3px; white-space: nowrap; }
.cx-role.st { background: rgba(169,112,255,.18); color: #c7a3ff; } .cx-role.tm { background: rgba(61,214,57,.16); color: #72F56E; } .cx-role.vip { background: rgba(230,184,92,.18); color: #ffd77e; }
.cx-tx { font-size: 15px; line-height: 1.45; color: #e8f0e8; overflow-wrap: anywhere; white-space: pre-wrap; }
.cx-tx .at { color: #ffd77e; font-weight: 700; background: rgba(230,184,92,.12); padding: 0 4px; border-radius: 5px; }
.cx-m.mention { background: rgba(230,184,92,.07); box-shadow: inset 3px 0 0 #e6b85c; }
.cx-m.pending { opacity: .55; }
.cx-acts { position: absolute; right: 6px; top: -10px; display: none; gap: 2px; background: #0f150f; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 2px; z-index: 2; }
.cx-m:hover .cx-acts, .cx-m.acts-on .cx-acts { display: flex; }
.cx-acts button { width: 30px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: #9fb1a0; }
.cx-acts button:hover { background: #1a2219; color: #fff; }
.cx-acts button.danger:hover { color: #ff8f92; }
.cx-acts svg { width: 15px !important; height: 15px !important; }
.cx-reply { font-size: 12px; color: #8ea58e; border-left: 2px solid #2d3d2d; padding-left: 8px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cx-flash { animation: cxFlash 1.4s ease-out; } @keyframes cxFlash { 0%, 30% { background: rgba(230,184,92,.18); } 100% { background: transparent; } }
.cx-sys { align-self: center; display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 12.5px; color: #cfe3cf; background: rgba(61,214,57,.08); border: 1px solid rgba(61,214,57,.22); padding: 6px 12px; border-radius: 999px; max-width: 94%; text-align: center; line-height: 1.35; }
.cx-sys.cx-win { color: #ffe9a8; background: linear-gradient(90deg, rgba(255,196,0,.14), rgba(255,140,0,.10)); border-color: rgba(255,196,0,.45); font-weight: 600; box-shadow: 0 0 18px rgba(255,196,0,.12); }
.cx-sys.cx-win .ci { color: #ffc400; }
.cx-gif { margin-top: 3px; } .cx-gif img { display: block; max-width: min(220px, 100%); max-height: 200px; min-height: 60px; border-radius: 10px; background: #121a12; }
.cx-box .cx-gif-btn { width: 36px; } .cx-box .cx-gif-btn[hidden] { display: none; } .cx-box .cx-gif-btn .ci { width: 22px; height: 22px; }
.cx-gifp { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); z-index: 7; background: #0f150f; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 8px; box-shadow: 0 -12px 34px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 6px; max-height: 330px; }
.cx-gifp-s { display: flex; align-items: center; gap: 6px; background: #151d15; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 0 6px 0 10px; }
.cx-gifp-s input { flex: 1; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; background: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; color: #fff; font-size: 14px; padding: 9px 0 !important; }
.cx-gifp-s:focus-within { border-color: rgba(61,214,57,.6); }
.cx-gifp-s .ci { width: 16px; height: 16px; color: var(--muted, #8ea58e); flex: none; }
.cx-gifp-x { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.cx-gifp-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 92px; gap: 4px; overflow-y: auto; overflow-x: hidden; min-height: 120px; align-content: start; }
.cx-gifp-g button { position: relative; display: block; width: 100%; height: 92px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0; border-radius: 8px; overflow: hidden; background: #151d15; }
.cx-gifp-g img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; margin: 0; }
.cx-box .cx-gif-btn.locked { opacity: .45; }
.cx-box .cx-gif-btn[hidden] { display: none !important; }
.cx-stkp .cx-gifp-g { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 78px; }
.cx-stkp .cx-gifp-g button { height: 78px !important; background: #121a12; }
.cx-stkp .cx-gifp-g img { object-fit: contain; padding: 6px; }
.cx-stkp-t { flex: 1; padding: 9px 0; font-size: 13px; color: #ffd66b; }
.cx-stk img { display: block; width: 120px; height: 120px; object-fit: contain; }
.cx-stk-gone { font-size: 12px; color: var(--muted, #8ea58e); font-style: italic; }
.cx-role.sub { background: linear-gradient(135deg, #ffc93c, #e89b12); color: #1a1203; }
.cx-m.r-sub .cx-hd b { color: #ffd66b; }
.cx-m.r-sub .cx-av { box-shadow: 0 0 0 2px #ffc93c, 0 0 10px rgba(255,201,60,.35); }
.pf-is-sub .profil-avatar, .pf-is-sub .profil-avatar-fallback { box-shadow: 0 0 0 3px #ffc93c, 0 0 0 6px rgba(255,201,60,.25), 0 0 24px rgba(255,201,60,.35); }
.pf-subchip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: linear-gradient(135deg, #ffc93c, #e89b12); color: #1a1203; margin-right: 6px; }
.sub-card { border: 1px solid rgba(255,201,60,.45); border-radius: 16px; padding: 20px; background: linear-gradient(180deg, rgba(255,201,60,.10), rgba(255,201,60,0) 60%), #111811; margin-bottom: 18px; }
.sub-head { display: flex; gap: 14px; align-items: center; } .sub-head small { color: #ffd66b; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.sub-head h3 { margin: 2px 0; font-size: 22px; } .sub-price { font-size: 20px; font-weight: 900; } .sub-price span { font-size: 13px; color: var(--muted, #8ea58e); font-weight: 600; }
.sub-gem { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #ffc93c, #e89b12); flex: none; }
.sub-gem svg { width: 30px; height: 30px; fill: none; stroke: #1a1203; stroke-width: 2; stroke-linejoin: round; }
.sub-perks { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.sub-perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; } .sub-perks svg { width: 18px; height: 18px; fill: none; stroke: #3dd639; stroke-width: 3; flex: none; margin-top: 1px; }
.sub-act { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sub-btn { background: linear-gradient(135deg, #ffc93c, #e89b12); color: #1a1203; font-weight: 900; border: 0; border-radius: 12px; padding: 13px 20px; font-size: 15px; cursor: pointer; }
.sub-btn--ghost { background: none; color: #ffd66b; border: 1px solid rgba(255,201,60,.5); font-weight: 700; padding: 10px 16px; font-size: 14px; }
.sub-btn:disabled { opacity: .6; cursor: wait; }
.sub-status { display: flex; flex-direction: column; gap: 3px; } .sub-status b { font-size: 16px; color: #ffd66b; } .sub-status span { font-size: 13px; color: #cfe3cf; }
.sub-wall-chk { font-size: 13px; display: flex; gap: 8px; align-items: center; }
.sub-fine { font-size: 12px; color: var(--muted, #8ea58e); line-height: 1.5; margin: 6px 0 0; } .sub-fine a { color: #ffd66b; }
.sub-err { color: #ff8f92; font-size: 13px; }
.sub-note { border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; } .sub-note.ok { border-color: #3dd639; color: #3dd639; }
.sub-wall { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sub-w { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(255,201,60,.08); border: 1px solid rgba(255,201,60,.3); font-size: 13px; font-weight: 600; }
.sub-w img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.cx-gifp-g button:hover { outline: 2px solid var(--accent, #3dd639); }
.cx-gifp-m { grid-column: 1 / -1; text-align: center; color: var(--muted, #8ea58e); font-size: 13px; padding: 24px 0; }
.cx-gifp-by { text-align: right; font-size: 10.5px; color: var(--muted, #8ea58e); letter-spacing: .04em; }
.cx-sys svg { width: 15px !important; height: 15px !important; color: var(--green, #3DD639); }
.cx-drop { align-self: stretch; margin: 8px 2px; padding: 14px; border-radius: 16px; position: relative; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, rgba(230,184,92,.22), rgba(230,184,92,.04) 55%), #121811; border: 1px solid rgba(230,184,92,.45); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.cx-drop.live::after { content: ""; position: absolute; inset: -40% auto auto -30%; width: 60%; height: 180%; background: linear-gradient(90deg, transparent, rgba(255,227,163,.12), transparent); transform: rotate(18deg); animation: cxShine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes cxShine { 0% { left: -40%; } 60%, 100% { left: 120%; } }
.cx-drop-top { display: flex; align-items: center; gap: 12px; }
.cx-drop-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(180deg, #ffe29b, #d29d39); color: #2a1a00; flex: 0 0 auto; box-shadow: 0 6px 18px rgba(230,184,92,.35); }
.cx-drop-ic svg { width: 26px !important; height: 26px !important; }
.cx-drop-t { min-width: 0; flex: 1; }
.cx-drop-t small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #e6b85c; }
.cx-drop-t b { display: block; font-size: 17px; color: #fff; line-height: 1.25; overflow-wrap: anywhere; }
.cx-drop-pts { font-family: var(--font-display, 'Bebas Neue'), Impact, sans-serif; font-size: 30px; line-height: 1; color: #ffe3a3; white-space: nowrap; text-align: right; }
.cx-drop-pts span { display: block; font-family: inherit; font-size: 11px; color: #c9b27a; letter-spacing: .06em; }
.cx-drop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cx-drop-info { font-size: 12.5px; color: #cfc4a8; display: flex; flex-direction: column; gap: 3px; }
.cx-drop-info b { color: #fff; font-variant-numeric: tabular-nums; }
.cx-drop-bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 10px; }
.cx-drop-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffe29b, #d29d39); border-radius: 5px; transition: width .4s; }
.cx-drop-btn { position: relative; z-index: 1; padding: 11px 18px !important; border-radius: 12px !important; font-weight: 800 !important; font-size: 14.5px !important; background: linear-gradient(180deg, #ffe29b, #d29d39) !important; color: #2a1a00 !important; box-shadow: 0 6px 18px rgba(230,184,92,.35); display: inline-flex; align-items: center; gap: 8px; transition: transform .15s, filter .15s; }
.cx-drop-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.cx-drop-btn:disabled { opacity: .6; transform: none; cursor: default; }
.cx-drop-ok { font-weight: 800; color: #72F56E; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.cx-drop-end { font-weight: 700; color: #9fb1a0; font-size: 13.5px; }
.cx-drop:empty { display: none; }
.cx-drop.done { border-color: rgba(255,255,255,.12); background: #121811; }
.cx-drop.done .cx-drop-ic { background: #2a3329; color: #9fb1a0; box-shadow: none; }
.cx-drop.done .cx-drop-pts { color: #9fb1a0; }
.cx-team { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.cx-team-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #7ef57a, #1f9d1f); color: #081108; flex: 0 0 auto; }
.cx-team div { font-size: 13px; line-height: 1.3; min-width: 0; flex: 1; }
.cx-team small { color: var(--muted, #8ea58e); display: flex; align-items: center; gap: 6px; }
.cx-team small i { width: 7px; height: 7px; border-radius: 50%; background: #666; }
.cx-team.online small i { background: var(--green, #3DD639); } .cx-team.offline small i { background: #e05555; }
.cx-offline { display: none; font-size: 12.5px; line-height: 1.45; padding: 9px 14px; background: rgba(224,85,85,0.10); border-bottom: 1px solid rgba(224,85,85,0.3); }
.cx-offline a { color: var(--green, #3DD639); font-weight: 700; }
.cx-pane.is-offline .cx-offline { display: block; }
.cx-bub { max-width: 82%; padding: 10px 13px; border-radius: 16px; font-size: 15px; line-height: 1.45; position: relative; margin: 3px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cx-bub.u { align-self: flex-end; background: linear-gradient(180deg, #2b9a28, #1f7a1d); color: #fff; border-bottom-right-radius: 5px; }
.cx-bub.t { align-self: flex-start; background: #1a2219; border: 1px solid rgba(255,255,255,.07); border-bottom-left-radius: 5px; }
.cx-bub.auto { background: rgba(255,193,7,0.08); border-color: rgba(255,193,7,0.35); font-size: 13.5px; }
.cx-bub small { display: block; font-size: 10.5px; opacity: .7; margin-top: 4px; text-align: right; white-space: nowrap; }
.cx-bub.t small { text-align: left; }
.cx-bub.fail { opacity: .55; }
.cx-img { display: block; margin: 2px 0 6px; border-radius: 12px; overflow: hidden; width: 260px; max-width: 100%; background: #0c110b; border: 1px solid rgba(255,255,255,.18); cursor: zoom-in; padding: 0 !important; }
.cx-img img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; }
.cx-typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 13px; border-radius: 16px; background: #1a2219; border: 1px solid rgba(255,255,255,.07); margin: 3px 0; }
.cx-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9fb1a0; animation: cxTp 1.2s infinite; }
.cx-typing span:nth-child(2) { animation-delay: .2s; } .cx-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes cxTp { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.cx-list.drag { outline: 2px dashed rgba(61,214,57,.6); outline-offset: -8px; background: rgba(61,214,57,.04); }
.cx-compose { border-top: 1px solid rgba(255,255,255,.07); padding: 10px 12px 12px; background: #0e130d; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.cx-replying { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #9fb1a0; padding: 0 4px 8px; }
.cx-replying span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-replying b { color: #d8f5d6; }
.cx-prev { display: flex; gap: 8px; padding: 0 2px 10px; }
.cx-th { position: relative; width: 84px; height: 62px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: #0c110b; }
.cx-th img { width: 100%; height: 100%; object-fit: cover; }
.cx-th button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.7) !important; display: grid; place-items: center; }
.cx-th button svg { width: 12px !important; height: 12px !important; color: #fff; }
.cx-th small { position: absolute; left: 4px; bottom: 3px; font-size: 10px; background: rgba(0,0,0,.6); padding: 0 4px; border-radius: 4px; }
.cx-box { display: flex; align-items: flex-end; gap: 8px; background: #0a0f0a; border: 1px solid rgba(61,214,57,.3); border-radius: 16px; padding: 6px 6px 6px 8px; transition: border-color .2s, box-shadow .2s; }
.cx-box:focus-within { border-color: rgba(61,214,57,.65); box-shadow: 0 0 0 4px rgba(61,214,57,.1); }
.cx-box textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: none; color: var(--text, #E8F0E8); font: inherit; font-size: 16px; line-height: 1.4; padding: 9px 4px; max-height: 140px; min-height: 40px; height: 40px; }
.cx-box textarea::placeholder { color: #6f866f; }
.cx-box .cx-attach { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #9fb1a0; flex: 0 0 auto; }
.cx-box .cx-attach:hover { color: #fff; background: #141b13; }
.cx-send { width: 44px; height: 44px; border-radius: 12px !important; display: grid; place-items: center; background: linear-gradient(180deg, #4be348, #25a325) !important; color: #041104 !important; box-shadow: 0 6px 16px rgba(61,214,57,.3); flex: 0 0 auto; transition: transform .15s; }
.cx-send:active { transform: scale(.94); } .cx-send:disabled { opacity: .5; box-shadow: none; }
.cx-hint { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: #6f866f; padding: 7px 4px 0; }
.cx-hint a, .cx-hint button { color: #9fe89c; text-decoration: none; white-space: nowrap; font-size: 11.5px; display: inline-flex; align-items: center; gap: 4px; }
.cx-hint svg { width: 13px !important; height: 13px !important; }
.cx-err { font-size: 12.5px; color: #ff8f92; padding: 0 4px 8px; }
.cx-err.ok { color: #72F56E; }
.cx-lock { padding: 12px 14px; font-size: 13px; color: #cfe3cf; text-align: center; background: #0e130d; border-top: 1px solid rgba(255,255,255,.07); }
.cx-newpill { position: absolute; left: 50%; transform: translateX(-50%); bottom: 118px; z-index: 3; padding: 7px 14px !important; border-radius: 999px !important; background: #1f2c1e !important; border: 1px solid rgba(61,214,57,.45) !important; color: #d8f5d6 !important; font-size: 12.5px !important; font-weight: 700 !important; box-shadow: 0 8px 20px rgba(0,0,0,.4); display: inline-flex; align-items: center; gap: 6px; }
.cx-empty { margin: auto; text-align: center; color: var(--muted, #8ea58e); font-size: 14px; line-height: 1.5; padding: 20px; }
.cx-guest { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 28px; }
.cx-guest .cx-g-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: rgba(61,214,57,.1); border: 1px solid rgba(61,214,57,.3); color: var(--green, #3DD639); }
.cx-guest .cx-g-ic svg { width: 30px !important; height: 30px !important; }
.cx-guest p { margin: 0; color: var(--text, #E8F0E8); font-size: 15px; line-height: 1.5; max-width: 300px; }
.cx-guest .cx-g-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cw-login-btn { display: inline-block; background: var(--green, #3DD639); color: var(--dark, #0b0f0a); font-weight: 700; font-size: 0.88rem; padding: 11px 22px; border-radius: 100px; border: none; cursor: pointer; text-decoration: none; font-family: inherit; transition: background .2s, box-shadow .2s; box-shadow: 0 0 24px rgba(61,214,57,0.3); }
.cw-login-btn:hover { background: var(--green-light, #72F56E); box-shadow: 0 0 36px rgba(61,214,57,0.5); }
.cx-toast { position: absolute; left: 50%; top: 64px; transform: translateX(-50%) translateY(-8px); z-index: 5; padding: 10px 16px; border-radius: 12px; background: #1f2c1e; border: 1px solid rgba(61,214,57,.5); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 12px 30px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.cx-toast.on { opacity: 1; transform: translateX(-50%); }
.cx-toast.gold { background: linear-gradient(180deg, #ffe29b, #d29d39); color: #2a1a00; border-color: #ffe29b; }
.cx-toast.bad { background: #3a1416; border-color: rgba(255,77,85,.6); }
.cx-menu { position: absolute; z-index: 6; background: #0f150f; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 4px; box-shadow: 0 14px 34px rgba(0,0,0,.55); display: flex; flex-direction: column; min-width: 190px; }
.cx-menu button { text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; }
.cx-menu button:hover { background: #1a2219; }
.cx-menu small { padding: 6px 12px 4px; color: var(--muted, #8ea58e); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cx-lb { position: fixed; inset: 0; z-index: 10060; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.cx-lb.on { display: flex; }
.cx-lb img { max-width: 96vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
[hidden].cx-pane, .cx [hidden] { display: none !important; }
@media (max-width: 900px) {
.cw-launcher { bottom: calc(24px + 64px + env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) {
.cx, .cx.wide { top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: none; border-radius: 0; border: 0; height: 100dvh; }
.cx-top { padding: calc(10px + env(safe-area-inset-top)) 10px 0; }
.cx-wbtn { display: none !important; }
.cx-bub { max-width: 88%; }
.cx-hint .cx-kbd { display: none; }
.cx-tab { font-size: 13.5px; padding: 9px 6px; }
.cx-newpill { bottom: 104px; }
html.cx-lockscroll, html.cx-lockscroll body { overflow: hidden; }
}
@media (max-width: 480px) { .cw-launcher { right: 16px; bottom: calc(16px + 64px + env(safe-area-inset-bottom)); } }
@media (hover: none) { .cx-m:hover .cx-acts { display: none; } .cx-m.acts-on .cx-acts { display: flex; } }
.reveal-el { opacity: 0; }
.reveal-el.in-view { opacity: 1; animation: revealUp .8s cubic-bezier(.16,1,.3,1) backwards; }
.reveal-el.reveal-img.in-view { animation-name: revealZoom; }
@keyframes revealUp   { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes revealZoom { from { opacity: 0; transform: scale(0.94); }      to { opacity: 1; transform: scale(1); } }
.cards-grid > .reveal-el:nth-child(2), .casino-list > .reveal-el:nth-child(2) { animation-delay: .08s; }
.cards-grid > .reveal-el:nth-child(3), .casino-list > .reveal-el:nth-child(3) { animation-delay: .16s; }
.cards-grid > .reveal-el:nth-child(4), .casino-list > .reveal-el:nth-child(4) { animation-delay: .24s; }
.cards-grid > .reveal-el:nth-child(n+5), .casino-list > .reveal-el:nth-child(n+5) { animation-delay: .3s; }
.section.active { animation: sectionFadeIn .45s ease backwards; }
@keyframes sectionFadeIn { from { opacity: 0; } to { opacity: 1; } }
.section-title, .cc-hero-title { position: relative; display: inline-block; transition: text-shadow .4s ease; }
.section-title::after, .cc-hero-title::after {
content: ''; position: absolute; left: 2px; bottom: -10px; height: 3px; width: 0; opacity: 0;
background: linear-gradient(90deg, var(--green), var(--green-light) 65%, rgba(114,245,110,0));
border-radius: 3px; box-shadow: 0 0 12px rgba(61,214,57,0.5);
transition: width .6s cubic-bezier(.16,1,.3,1);
}
.section-title::before, .cc-hero-title::before {
content: ''; position: absolute; left: 2px; bottom: -11.5px; width: 6px; height: 6px; margin-left: -3px;
border-radius: 50%; background: #eaffe8; opacity: 0; pointer-events: none;
box-shadow: 0 0 8px 2px rgba(114,245,110,0.95), 0 0 18px 5px rgba(61,214,57,0.55);
}
.section-title.in-view::after, .cc-hero-title.in-view::after {
width: 72px; opacity: 1; animation: titleLineDraw 1s cubic-bezier(.22,1,.36,1) .3s backwards;
}
.section-title.in-view::before, .cc-hero-title.in-view::before {
animation: titleLineSpark 1s cubic-bezier(.22,1,.36,1) .3s backwards;
}
@keyframes titleLineDraw  { from { width: 0; } to { width: 72px; } }
@keyframes titleLineSpark { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(72px); opacity: 0; } }
@media (hover: hover) {
.section-title.in-view:hover::after, .cc-hero-title.in-view:hover::after { width: 120px; }
}
.section-title:hover, .cc-hero-title:hover { text-shadow: 0 0 26px rgba(61,214,57,0.4); }
.section-title:hover .accent, .cc-hero-title:hover .accent, .hero-title-main:hover .accent { animation: titleGlow 1.4s ease-in-out infinite; }
.bh-title, .card-title { transition: color .3s ease, text-shadow .3s ease; }
.bh-title-wrap:hover .bh-title { text-shadow: 0 0 18px rgba(61,214,57,0.45); }
.card:hover .card-title, .casino-card:hover .card-title { color: var(--green-light); }
.section-title .accent, .cc-hero-title .accent, .hero-title-main .accent {
background-image: linear-gradient(100deg, var(--green) 40%, var(--green-light) 50%, var(--green) 60%);
background-size: 220% 100%; background-position: 0% 0%;
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--green);
transition: background-position .9s ease;
}
.section-title:hover .accent, .cc-hero-title:hover .accent, .hero-title-main:hover .accent { background-position: 100% 0%; }
.card-thumb { position: relative; }
.card-thumb img { transition: transform .6s cubic-bezier(.16,1,.3,1), filter .6s ease; }
.card:hover .card-thumb img { transform: scale(1.08); filter: brightness(1.06) saturate(1.12); }
.card-thumb::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
transform: translateX(-130%); transition: transform .85s ease;
}
.card:hover .card-thumb::after { transform: translateX(130%); }
.card { transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 0 1px var(--border-strong); }
.casino-card { transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s; }
.casino-card:hover { transform: translateY(-4px); }
.ct-logo-wrap, .casino-ticker-item .ct-logo-wrap { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.casino-ticker-item:hover .ct-logo-wrap { transform: scale(1.12) rotate(-2deg); box-shadow: 0 0 16px rgba(61,214,57,0.35); }
.stat-card, .profil-stat-card { transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s; }
.stat-card:hover, .profil-stat-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
.footer-logo, .nav-logo img.brand-logo-img, #agegate-logo img.brand-logo-img { transition: transform .4s cubic-bezier(.16,1,.3,1), filter .4s ease; }
.footer-logo:hover, .nav-logo:hover img.brand-logo-img { transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(61,214,57,0.45)); }
@media (prefers-reduced-motion: reduce) {
.reveal-el, .reveal-el.in-view { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
.section.active { animation: none !important; }
.section-title::after, .cc-hero-title::after { width: 72px !important; opacity: 1 !important; animation: none !important; transition: none !important; }
.section-title::before, .cc-hero-title::before { display: none !important; }
.card:hover, .casino-card:hover, .stat-card:hover, .profil-stat-card:hover,
.card:hover .card-thumb img, .casino-ticker-item:hover .ct-logo-wrap,
.footer-logo:hover, .nav-logo:hover img.brand-logo-img { transform: none !important; }
.section-title .accent, .cc-hero-title .accent, .hero-title-main .accent { transition: none !important; }
}
.page-h1 {
display: table; position: relative; z-index: 2;
margin: 0 auto 22px; padding: 7px 16px 7px 30px;
font-family: var(--font-body, 'Outfit'), system-ui, sans-serif;
font-size: 0.78rem; font-weight: 600; line-height: 1.3;
letter-spacing: 0.16em; text-transform: uppercase; text-align: center;
color: var(--green-light);
background: rgba(61,214,57,0.08);
border: 1px solid var(--border-strong); border-radius: 999px;
box-shadow: 0 0 24px rgba(61,214,57,0.12), inset 0 0 12px rgba(61,214,57,0.06);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.page-h1::before {
content: ''; position: absolute; left: 13px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green);
}
.page-main > .page-h1 { margin-top: 28px; }
@media (max-width: 640px) { .page-h1 { font-size: 0.7rem; letter-spacing: 0.12em; padding: 6px 13px 6px 26px; margin-bottom: 16px; } }
.seo-info { position: relative; z-index: 1; padding: 8px 5vw 72px; }
.seo-info[hidden] { display: none; }
.seo-info-inner {
max-width: 1100px; margin: 0 auto; padding: 36px clamp(20px, 4vw, 44px);
background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card);
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
color: rgba(232,240,232,0.82); font-size: 0.95rem; line-height: 1.7;
}
.seo-info h2 { font-family: var(--font-display), sans-serif; font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: 0.02em; line-height: 1.1; color: var(--white); margin: 0 0 14px; }
.seo-info h3 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin: 0 0 12px; }
.seo-info p { margin: 0 0 14px; max-width: 76ch; }
.seo-info ul, .seo-info ol { margin: 0; padding-left: 1.2em; }
.seo-info li { margin: 0 0 6px; }
.seo-info li::marker { color: var(--green); }
.seo-info strong { color: var(--white); font-weight: 600; }
.seo-info code { font-family: inherit; font-size: 0.85em; font-weight: 700; letter-spacing: 0.04em; color: var(--green-light); background: rgba(61,214,57,0.1); border: 1px dashed var(--border-strong); border-radius: 6px; padding: 1px 7px; }
.seo-info a { color: var(--green-light); text-decoration: underline; text-decoration-color: rgba(114,245,110,0.35); text-underline-offset: 3px; }
.seo-info a:hover { text-decoration-color: currentColor; }
.seo-info-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px 40px; margin: 26px 0 22px; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.seo-info-rg { font-size: 0.82rem; color: rgba(232,240,232,0.6); }
.seo-info-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.seo-info-links span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(232,240,232,0.55); margin-right: 4px; }
.seo-info .seo-info-links a { text-decoration: none; font-size: 0.86rem; font-weight: 600; color: var(--text); padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.02); transition: border-color .2s, color .2s, background .2s; }
.seo-info .seo-info-links a:hover { color: var(--green-light); border-color: var(--border-strong); background: rgba(61,214,57,0.08); }
@media (max-width: 640px) { .seo-info { padding-bottom: 48px; } .seo-info-inner { font-size: 0.9rem; } }
.lang-hint {
position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9000;
display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
padding: 10px 10px 10px 18px; font-size: 0.88rem; color: var(--text);
background: rgba(18,21,15,0.94); border: 1px solid var(--border-strong); border-radius: 999px;
box-shadow: 0 12px 40px rgba(0,0,0,0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.lang-hint-go { white-space: nowrap; font-weight: 700; color: var(--dark); background: var(--green); padding: 7px 14px; border-radius: 999px; text-decoration: none; }
.lang-hint-close { flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.lang-hint-close:hover { background: rgba(255,255,255,0.08); }
@media (max-width: 640px) { .lang-hint { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); font-size: 0.8rem; gap: 8px; } .lang-hint > span { display: none; } }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
outline: 2px solid var(--green-light); outline-offset: 3px; border-radius: 6px;
}
.faq-q-row { cursor: pointer; }
#casinos .section-header .section-title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
#casinos .section-header { margin-bottom: 36px; gap: 10px; }
.cc-toggle-btn { white-space: nowrap; }
@media (min-width: 900px) { .casino-list:not(.view-grid) .cc-toggle-btn { font-size: 0.86rem; padding: 12px 10px; } }
@media (max-width: 640px) {
.cc-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 360px; margin: 0 auto; }
.cc-hero-stats .stat-card { width: auto; min-width: 0; padding: 14px 10px; }
.cc-hero-stats .stat-label { font-size: 0.68rem; letter-spacing: 0.08em; }
}
footer#footer { align-items: stretch; text-align: left; gap: 0; padding: 48px 5vw 28px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 32px 40px; max-width: 1180px; width: 100%; margin: 0 auto; }
.footer-brand .footer-logo { display: inline-block; }
.footer-brand .footer-logo img.brand-logo-img { height: 64px; }
.footer-tagline { color: rgba(232,240,232,0.7); font-size: 0.88rem; line-height: 1.6; margin-top: 12px; max-width: 32ch; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-col-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
.footer-col a { color: rgba(232,240,232,0.78); font-size: 0.9rem; text-decoration: none; transition: color .2s; }
.footer-col a:hover { color: var(--green-light); }
.footer-rg { flex-direction: row; align-items: flex-start; gap: 14px; }
.footer-18 { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #E5484D; color: #FF6B6F; font-weight: 800; font-size: 0.92rem; letter-spacing: -0.02em; }
.footer-rg .footer-legal { margin-top: 0; max-width: none; font-size: 0.78rem; color: rgba(232,240,232,0.62); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; max-width: 1180px; width: 100%; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid var(--border); }
.footer-bottom .footer-copy { margin: 0; color: rgba(232,240,232,0.55); }
.footer-lang { display: flex; gap: 16px; }
.footer-lang a { color: rgba(232,240,232,0.6); font-size: 0.8rem; text-decoration: none; }
.footer-lang a[aria-current="true"], .footer-lang a:hover { color: var(--green-light); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand, .footer-rg { grid-column: 1 / -1; } }
@media (max-width: 640px) {
footer#footer { padding: 36px 6vw calc(96px + env(safe-area-inset-bottom, 0px)); }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
.js-pending #seo-info, .js-pending #footer, .js-pending .page-main > #page-h1 { visibility: hidden; }
.section-title.reveal-el.in-view, .cc-hero-title.reveal-el.in-view {
animation: titleRise .9s cubic-bezier(.19,1,.22,1) backwards;
}
@keyframes titleRise {
from { opacity: 0; transform: translateY(0.45em); clip-path: inset(0 0 100% 0); filter: blur(6px); }
60%  { filter: blur(0); }
to   { opacity: 1; transform: translateY(0); clip-path: inset(-20% -10% -40% -10%); }
}
.section-title .accent, .cc-hero-title .accent, .hero-title-main .accent {
background: none; -webkit-background-clip: border-box; background-clip: border-box;
-webkit-text-fill-color: var(--green); color: var(--green); animation: none; transition: text-shadow .4s ease;
}
.section-title:hover .accent, .cc-hero-title:hover .accent, .hero-title-main:hover .accent { text-shadow: 0 0 24px rgba(61,214,57,0.55); }
.section-title, .cc-hero-title { text-wrap: balance; }
.section-sub { text-wrap: pretty; }
.section-header .section-sub { animation: none; }
.section-title.in-view + .section-sub { animation: subFade .8s ease .35s backwards; }
@keyframes subFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.section-title::after, .cc-hero-title::after { left: 50%; margin-left: -36px; transition: width .5s cubic-bezier(.16,1,.3,1), margin-left .5s cubic-bezier(.16,1,.3,1); }
.section-title::before, .cc-hero-title::before { left: 50%; margin-left: -39px; }
.section-title.in-view::after, .cc-hero-title.in-view::after { animation-delay: .45s; }
.section-title.in-view::before, .cc-hero-title.in-view::before { animation-delay: .45s; }
@media (hover: hover) {
.section-title.in-view:hover::after, .cc-hero-title.in-view:hover::after { width: 120px; margin-left: -60px; }
}
@keyframes revealUp { from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
.reveal-el.in-view { animation-duration: .85s; }
@media (hover: hover) and (pointer: fine) {
.casino-card, .social-card, .stat-card, .card { --mx: 50%; --my: 0%; }
.social-card, .stat-card { position: relative; }
.casino-card::before, .social-card::before, .stat-card::before, .card::before {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
padding: 1px; opacity: 0; transition: opacity .35s ease;
background: radial-gradient(260px circle at var(--mx) var(--my), rgba(114,245,110,0.9), rgba(61,214,57,0.25) 40%, transparent 70%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.casino-card::after, .social-card::after, .stat-card::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
opacity: 0; transition: opacity .35s ease;
background: radial-gradient(420px circle at var(--mx) var(--my), rgba(61,214,57,0.09), transparent 60%);
}
.casino-card:hover::before, .social-card:hover::before, .stat-card:hover::before, .card:hover::before,
.casino-card:hover::after, .social-card:hover::after, .stat-card:hover::after { opacity: 1; }
}
.cc-btn { position: relative; overflow: hidden; isolation: isolate; }
.cc-btn::after {
content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; z-index: 1;
background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
transform: skewX(-18deg); animation: ctaShine 5.5s cubic-bezier(.4,0,.2,1) 2s infinite;
}
.casino-list > .casino-card:nth-child(2) .cc-btn::after { animation-delay: 2.6s; }
.casino-list > .casino-card:nth-child(3) .cc-btn::after { animation-delay: 3.2s; }
@keyframes ctaShine { 0% { transform: translateX(0) skewX(-18deg); } 22%, 100% { transform: translateX(430%) skewX(-18deg); } }
.scroll-progress {
position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 10001; pointer-events: none;
background: linear-gradient(90deg, var(--green), var(--green-light));
box-shadow: 0 0 10px rgba(61,214,57,0.8);
transform-origin: 0 50%; transform: scaleX(0);
}
#agegate-title { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
.section-title.reveal-el.in-view, .cc-hero-title.reveal-el.in-view, .section-title.in-view + .section-sub,
.section-title .accent, .cc-hero-title .accent, .hero-title-main .accent, .cc-btn::after { animation: none !important; }
.scroll-progress { display: none; }
}
:root { --font-display: 'Big Shoulders Display'; --font-body: 'Outfit'; }
#agegate-logo, #agegate-title, #email-auth-title, #login-choice-title, .bh-highlight-val, .bh-kpi-val, .botrix-tier-card .val,
.card-bonus, .cc-bonus-big, .cc-number, .footer-logo, .gcg-bar-value, .gcp-rank, .gcp-value, .gct-cd-num, .gct-faq-heading,
.hero-kicker, .hero-title, .hero-title-main, .nav-logo, .profil-avatar-fallback, .profil-guest h2, .profil-header h2, .profil-row .val,
.profil-section-title, .profil-stat-card .num, .sched-day-num, .sched-hero-title, .slot-paytable b, .slot-result.win, .slot-stat-v,
.social-name, .spiele-tile-name, .stat-num, .wheel-result, .wheel-seg-label, .section-title, .cc-hero-title, .bh-title {
text-transform: uppercase;
}
.section-title, .cc-hero-title, .hero-title-main { letter-spacing: 0.005em; line-height: 1.02; }
.cc-number { font-family: var(--font-body), sans-serif; font-weight: 800; font-size: 0.85rem; letter-spacing: -0.02em; }
.hero-bg, .hero-bg[style] { animation: none !important; }
.hero-bg { filter: saturate(0.85) brightness(0.95) contrast(1.05) !important; }
.hero-bg::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(40,150,45,0.42) 0%, rgba(30,110,35,0.38) 100%);
mix-blend-mode: color;
}
.bg-shade {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(ellipse 110% 85% at 50% 25%, transparent 35%, rgba(6,9,6,0.72) 100%);
}
.bg-shade::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,14,9,0.86), rgba(10,14,9,0.94));
opacity: var(--bg-dim, 0); will-change: opacity;
}
@media (max-width: 900px), (pointer: coarse) {
.hero-bg::after { mix-blend-mode: normal; background: linear-gradient(180deg, rgba(20,70,22,0.22), rgba(10,40,12,0.30)); }
.bg-shade::after { display: none; }
.bg-shade { background: radial-gradient(ellipse 120% 80% at 50% 20%, transparent 30%, rgba(6,9,6,0.78) 100%); }
.scroll-progress { display: none; }
@keyframes revealUpM   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes titleRiseM  { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
.reveal-el.in-view { animation-name: revealUpM; }
.reveal-el.reveal-img.in-view { animation-name: revealZoom; }
.section-title.reveal-el.in-view, .cc-hero-title.reveal-el.in-view { animation-name: titleRiseM; }
.cc-btn::after { animation: none; display: none; }
}
.spiele-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; max-width:1000px; margin:0 auto; }
.spiele-grid > .gtile { flex:none; width:auto; }
.spiele-grid .gtile { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; min-height:0; height:100%; text-align:left; border-radius:16px; overflow:hidden;
background:linear-gradient(180deg, rgba(20,28,20,.92), rgba(10,15,11,.96)); border:1px solid rgba(255,255,255,.08);
box-shadow:0 10px 26px rgba(0,0,0,.35); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.spiele-grid .gtile[hidden] { display:none; }
.spiele-grid .gtile::before { display:none; }
.spiele-grid .gtile:hover, .spiele-grid .gtile:focus-visible { transform:translateY(-4px); border-color:rgba(61,214,57,.55); box-shadow:0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(61,214,57,.25); outline:none; }
.gt-cover { position:relative; display:block; width:100%; aspect-ratio:16/10; overflow:hidden; background:radial-gradient(circle at 50% 40%, #1d3a22, #0a120b 70%); }
.gt-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .3s; }
.gtile:hover .gt-cover img, .gtile:focus-visible .gt-cover img { transform:scale(1.06); filter:brightness(.8); }
.gt-cover::after { content:''; position:absolute; inset:auto 0 0 0; height:45%; background:linear-gradient(180deg, transparent, rgba(8,12,9,.85)); pointer-events:none; }
.gt-fallback { position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-size:4rem; }
.gt-fallback svg { width:1em; height:1em; }
.gt-cover.noimg img { display:none; } .gt-cover.noimg .gt-fallback { display:flex; }
.gt-play { position:absolute; left:50%; top:50%; z-index:2; width:62px; height:62px; margin:-31px 0 0 -31px; border-radius:50%; display:grid; place-items:center;
background:var(--green, #3dd639); color:#08130a; box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 0 6px rgba(61,214,57,.25); opacity:0; transform:scale(.7); transition:opacity .2s, transform .2s; }
.gt-play svg { width:26px; height:26px; margin-left:4px; }
.gtile:hover .gt-play, .gtile:focus-visible .gt-play { opacity:1; transform:scale(1); }
.gt-cat { position:absolute; left:12px; bottom:10px; z-index:1; font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#e8f5e8;
background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.14); padding:4px 9px; border-radius:999px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.gt-body { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:14px 16px 16px; flex:1; min-width:0; }
.spiele-grid .gtile .spiele-tile-name { font-size:1.3rem; line-height:1.15; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:#fff; align-self:auto; }
.gt-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.gt-meta { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.gt-pill { font-size:.72rem; font-weight:600; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); padding:4px 8px; border-radius:7px; white-space:nowrap; }
.gt-pill b { color:#e9f6e9; font-weight:800; }
.gt-btn { flex:0 0 auto; font-size:.8rem; font-weight:800; letter-spacing:.04em; color:#08130a; background:var(--green, #3dd639); padding:8px 16px; border-radius:999px; transition:background .2s; }
.gtile:hover .gt-btn { background:var(--green-light, #5cf05a); }
@media (max-width: 900px) { .spiele-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
.spiele-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.spiele-grid > .gtile { flex-basis:auto; }
.spiele-grid .gtile { display:flex; padding:0; border-radius:14px; }
.spiele-grid .gtile:hover { transform:none; }
.gt-body { padding:10px 11px 12px; gap:7px; }
.spiele-grid .gtile .spiele-tile-name { font-size:.98rem; }
.gt-cat { font-size:.56rem; left:8px; bottom:7px; padding:3px 7px; }
.gt-pill { font-size:.64rem; padding:3px 6px; }
.gt-btn, .gt-play { display:none; }
}
@media (prefers-reduced-motion: reduce) { .spiele-grid .gtile, .gt-cover img { transition:none; } }
.bw-panel { padding: 0 !important; overflow: hidden; }
.bw { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 26px; padding: 26px 28px;
background: radial-gradient(90% 120% at 25% 50%, rgba(61,214,57,.16), transparent 60%), radial-gradient(70% 90% at 100% 0%, rgba(255,193,7,.10), transparent 60%), linear-gradient(180deg, #0f1810, #0a110b); }
.bw-stage { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; margin: 12px auto 0; }
.bw-glow { position: absolute; inset: 6%; border-radius: 50%; box-shadow: 0 0 60px 10px rgba(61,214,57,.25), 0 0 120px 30px rgba(255,193,7,.08); transition: box-shadow .4s; }
.bw.ready .bw-glow { animation: bwPulse 2.2s ease-in-out infinite; }
.bw.won .bw-glow { box-shadow: 0 0 80px 22px rgba(255,193,7,.55); }
@keyframes bwPulse { 50% { box-shadow: 0 0 80px 18px rgba(61,214,57,.42), 0 0 140px 40px rgba(255,193,7,.12); } }
.bw-svg { position: relative; width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.bw-lbl { font-family: var(--font-display), 'Bebas Neue', Impact, sans-serif; font-weight: 900; fill: #fff; letter-spacing: .5px; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 3px; }
.bw-lbl--z { fill: #d8ddd8; }
.bw-hub { font-family: var(--font-display), 'Bebas Neue', Impact, sans-serif; font-weight: 900; font-size: 25px; fill: #3dd639; letter-spacing: .5px; }
.bw-bulb { fill: #fff6c8; filter: drop-shadow(0 0 3px #ffd54a); }
.bw-bulb.b2 { fill: #ffd54a; opacity: .55; }
.bw.ready .bw-bulb, .bw.spinning .bw-bulb { animation: bwBulb .9s steps(1) infinite; }
.bw.ready .bw-bulb.b2, .bw.spinning .bw-bulb.b2 { animation-delay: .45s; }
.bw.spinning .bw-bulb { animation-duration: .25s; } .bw.spinning .bw-bulb.b2 { animation-delay: .125s; }
@keyframes bwBulb { 50% { opacity: .35; } }
.bw-pointer { position: absolute; left: 50%; top: -3%; width: 13%; transform: translateX(-50%); transform-origin: 50% 30%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); z-index: 2; }
.bw-pointer.flick { animation: bwFlick .14s ease-out; }
@keyframes bwFlick { 40% { transform: translateX(-50%) rotate(-14deg); } }
.bw-confetti { position: absolute; inset: -20%; width: 140%; height: 140%; pointer-events: none; z-index: 3; }
.bw-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.bw-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-light, #5cf05a); }
.bw-title { font-family: var(--font-display), sans-serif; font-size: 2.1rem; line-height: 1; color: #fff; text-transform: uppercase; letter-spacing: .5px; }
.bw-sub { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.bw-sub b { color: #ffd54a; }
.bw-btn { position: relative; overflow: hidden; width: 100%; max-width: 320px; border: 0; border-radius: 14px; padding: 16px 24px; cursor: pointer;
font-family: var(--font-display), sans-serif; font-size: 1.35rem; letter-spacing: .08em; text-transform: uppercase; color: #08130a;
background: linear-gradient(180deg, #7dff6e, #3dd639 55%, #22a52a); box-shadow: 0 10px 26px rgba(61,214,57,.35), inset 0 -3px 0 rgba(0,0,0,.2); transition: transform .15s, filter .15s; }
.bw-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: bwShine 2.6s ease-in-out infinite; }
@keyframes bwShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.bw-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.bw-btn:disabled { filter: grayscale(.6) brightness(.7); cursor: default; }
.bw-btn[hidden], .bw-timer[hidden] { display: none; }
.bw-timer { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); min-width: 220px; }
.bw-timer small { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.bw-timer b { font-family: var(--font-display), sans-serif; font-size: 2.1rem; line-height: 1; color: #ffd54a; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.bw-result { min-height: 1.5em; font-family: var(--font-display), sans-serif; font-size: 1.45rem; letter-spacing: .03em; }
.bw-result:empty { display: none; }
.bw-result.win { color: var(--green-light, #5cf05a); animation: bwPop .5s ease-out; }
.bw-result.win.top { color: #ffd54a; font-size: 1.8rem; }
.bw-result.zero { color: var(--muted); font-family: inherit; font-size: .95rem; font-weight: 600; }
.bw-result.err { color: #ff8f92; font-family: inherit; font-size: .88rem; font-weight: 600; }
@keyframes bwPop { from { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); } }
.bw-prizes { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-prizes span { font-size: .72rem; font-weight: 800; color: #dfe9df; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 4px 9px; border-radius: 999px; }
.bw-prizes span.top { color: #241a00; background: linear-gradient(180deg, #ffe37a, #ffc107); border-color: #ffc107; }
.bw-modal { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2,6,3,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.bw-modal.show { opacity: 1; }
.bw-modal-box { position: relative; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 22px; border: 1px solid rgba(61,214,57,.35); box-shadow: 0 30px 80px rgba(0,0,0,.6); transform: translateY(14px) scale(.98); transition: transform .3s; }
.bw-modal.show .bw-modal-box { transform: none; }
.bw-x { position: absolute; top: 10px; right: 12px; z-index: 5; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.45); color: #fff; font-size: 16px; cursor: pointer; }
.bw-later { display: block; width: 100%; border: 0; border-top: 1px solid rgba(255,255,255,.08); background: #0a110b; color: var(--muted); padding: 12px; font: inherit; font-size: .85rem; cursor: pointer; }
.bw-later:hover { color: #fff; }
@media (max-width: 760px) {
.bw { grid-template-columns: 1fr; gap: 16px; padding: 20px 16px; text-align: center; }
.bw-side { align-items: center; }
.bw-stage { max-width: 300px; }
.bw-title { font-size: 1.7rem; }
.bw-btn { max-width: none; }
.bw-timer { align-items: center; width: 100%; }
.bw-prizes { justify-content: center; }
.bw--modal .bw-stage { max-width: min(280px, 72vw); }
}
@media (prefers-reduced-motion: reduce) { .bw-btn::after, .bw.ready .bw-glow, .bw-bulb { animation: none !important; } }
@media (max-width: 900px), (pointer: coarse) {
.hero-bg, .hero-bg[style] { animation: none !important; }
.hero-bg::before { display: none !important; }
.smoke-puff { filter: none !important; mix-blend-mode: normal !important; }
.card, .casino-card, .stat-card, .profil-stat-card, .profil-panel, .profil-rejected-item, .faq-item, .hof-kpi, .hof-card, .hof-gcard,
.gcp-item, .gct-countdown, .bh-kpi, .bh-highlight, .bh-top-box, .pf-tabs, .cs-filter-combo, footer {
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#seo-info, footer#footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }
#agegate-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(8,10,8,0.95) !important; }
}
.gt-maint .gt-cover img { filter: grayscale(.75) brightness(.6); }
.gt-maint .gt-play { display: none; }
.gt-maint-badge { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap; padding:7px 12px; border-radius:999px;
background:rgba(10,14,10,.88); border:1px solid #e9c46a; color:#ffd66b; font-size:.78rem; font-weight:800; letter-spacing:.03em; box-shadow:0 6px 22px rgba(0,0,0,.5); }
.gt-maint-badge small { display:block; margin-top:3px; font-size:.72rem; font-weight:700; color:#fff; letter-spacing:0; text-align:center; }
.gt-maint-badge { max-width:calc(100% - 14px); text-align:center; } .gt-maint-badge small { white-space:normal; }
@media (max-width:560px) { .gt-maint-badge { padding:6px 9px; font-size:.68rem; } .gt-maint-badge small { font-size:.62rem; } }
.spiele-tile.gt-sotd { border-color: rgba(230,184,92,.6); box-shadow: 0 0 0 1px rgba(230,184,92,.35), 0 10px 30px rgba(230,184,92,.12); }
.gt-sotd-badge { position:absolute; left:10px; top:10px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:6px 11px 6px 9px; border-radius:999px;
background:linear-gradient(180deg,#ffe29a,#e6b85c); color:#2a1a00; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 6px 18px rgba(0,0,0,.45); }
.gt-sotd-badge svg { width:14px; height:14px; fill:none; stroke:#2a1a00; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:560px) { .gt-sotd-badge { left:7px; top:7px; padding:4px 8px 4px 7px; font-size:.6rem; } .gt-sotd-badge svg { width:12px; height:12px; } }
.cotw { position:relative; max-width:900px; margin:6px auto 34px; padding:30px 26px 24px; border-radius:22px; isolation:isolate;
background:linear-gradient(160deg, rgba(36,30,16,.92), rgba(16,20,14,.94) 45%, rgba(12,16,12,.96)); border:1px solid rgba(230,184,92,.45);
box-shadow:0 22px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(230,184,92,.08) inset, 0 0 40px rgba(230,184,92,.08); }
.cotw-bg { position:absolute; inset:0; border-radius:inherit; overflow:hidden; z-index:-1; pointer-events:none; }
.cotw-glow { position:absolute; left:-80px; top:-90px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(230,184,92,.28), rgba(230,184,92,0) 65%); }
.cotw-glow::after { content:""; position:absolute; left:520px; top:150px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(61,214,57,.16), rgba(61,214,57,0) 65%); }
.cotw-mark { position:absolute; right:-18px; bottom:-36px; width:190px; height:190px; color:rgba(230,184,92,.07); transform:rotate(-12deg); }
.cotw-mark svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.cotw-shine { position:absolute; top:0; bottom:0; left:-40%; width:30%; background:linear-gradient(100deg, transparent, rgba(255,236,190,.09), transparent); transform:skewX(-18deg); animation:cotwShine 7s ease-in-out 1.5s infinite; }
@keyframes cotwShine { 0%, 60% { left:-40%; } 100% { left:130%; } }
.cotw-ribbon { position:absolute; top:0; left:50%; transform:translate(-50%, -50%); display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
padding:7px 16px; border-radius:100px; background:linear-gradient(90deg, #f3d27a, #e6b85c 50%, #c99a3d); color:#1c1406; font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
box-shadow:0 6px 20px rgba(230,184,92,.35); }
.cotw-ribbon svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cotw-ribbon i { font-style:normal; opacity:.55; }
.cotw-until, .cotw-left { letter-spacing:.04em; text-transform:none; font-weight:700; }
.cotw-main { display:grid; grid-template-columns:auto minmax(0,1fr) 230px; gap:24px; align-items:center; }
.cotw-side { display:flex; flex-direction:column; align-items:center; gap:8px; }
.cotw-logo { width:104px; height:104px; border-radius:22px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:2.2rem; background:#000;
border:2px solid rgba(230,184,92,.75); box-shadow:0 0 0 5px rgba(230,184,92,.12), 0 12px 30px rgba(0,0,0,.5), 0 0 34px rgba(230,184,92,.25); }
.cotw-logo img { width:100%; height:100%; object-fit:cover; }
.cotw-rating .stars, .cotw-rating { font-size:.8rem; }
.cotw-name { display:inline-block; font-size:1.05rem; font-weight:700; color:#fff; text-decoration:none; }
.cotw a.cotw-name { color:#fff !important; text-decoration:none !important; }
@media (hover:hover) { .cotw a.cotw-name:hover { color:#e6b85c !important; text-decoration:underline !important; text-underline-offset:3px; } }
.cotw-bonus { font-family:var(--font-display), sans-serif; font-size:clamp(2rem, 4vw, 2.9rem); line-height:1; letter-spacing:.02em; margin-top:4px; text-transform:uppercase;
background:linear-gradient(90deg, #fff, #fff 40%, #f3d27a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cotw-excl { display:inline-block; margin-top:10px; padding:6px 12px; border-radius:10px; background:rgba(230,184,92,.12); border:1px solid rgba(230,184,92,.4); font-size:.86rem; font-weight:700; color:#f3d27a; }
.cotw-facts { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.cotw-fact { display:inline-flex; align-items:baseline; gap:6px; padding:6px 11px; border-radius:100px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); font-size:.82rem; }
.cotw-fact small { font-size:.72rem; color:rgba(232,240,232,.65); font-weight:600; } .cotw-fact b { color:#fff; font-weight:700; }
.cotw-cta { display:flex; flex-direction:column; gap:9px; }
.cotw-code { display:flex; align-items:center; gap:8px; justify-content:space-between; min-height:44px; padding:0 12px; border-radius:var(--radius-btn); border:1px dashed rgba(230,184,92,.5); background:rgba(0,0,0,.3); color:#fff; font:inherit; cursor:pointer; }
.cotw-code span { font-size:.72rem; color:rgba(232,240,232,.7); } .cotw-code b { letter-spacing:.06em; } .cotw-code em { font-style:normal; font-size:.74rem; font-weight:700; color:#e6b85c; }
.cotw-btn { display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 22px; border-radius:var(--radius-btn); background:var(--green); color:#08130a !important; font-weight:800; font-size:1.02rem; text-decoration:none;
box-shadow:0 10px 28px rgba(61,214,57,.3); transition:transform .15s, background .15s, box-shadow .15s; }
.cotw-btn:hover { background:var(--green-light); transform:translateY(-1px); box-shadow:0 14px 34px rgba(61,214,57,.42); }
.cotw-more { text-align:center; font-size:.8rem; font-weight:600; color:#e6b85c; text-decoration:none; } .cotw-more:hover { text-decoration:underline; text-underline-offset:3px; }
.cotw-legal { text-align:center; font-size:.68rem; color:rgba(232,240,232,.5); }
@media (max-width:860px) {
.cotw { padding:30px 18px 18px; margin-top:10px; }
.cotw-main { grid-template-columns:auto minmax(0,1fr); gap:16px; }
.cotw-logo { width:76px; height:76px; border-radius:16px; }
.cotw-cta { grid-column:1 / -1; }
.cotw-ribbon { font-size:.66rem; padding:6px 12px; letter-spacing:.08em; }
.cotw-facts { gap:6px; } .cotw-fact { padding:4px 9px; font-size:.76rem; gap:4px; } .cotw-fact small { font-size:.66rem; }
.cotw-bonus { font-size:1.9rem; }
}
@media (max-width:420px) { .cotw-ribbon .cotw-until, .cotw-ribbon i:first-of-type { display:none; } .cotw-rating { display:none; } }
@media (prefers-reduced-motion: reduce) { .cotw-shine { animation:none; display:none; } }
.cotw-kicker svg, .cc-cotw-tag svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.casino-card.cc-cotw { border-color:rgba(230,184,92,.6); box-shadow:0 0 0 1px rgba(230,184,92,.3); }
.cc-cotw-tag { position:absolute; right:12px; top:12px; z-index:3; display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
background:linear-gradient(180deg,#ffe29a,#e6b85c); color:#2a1a00; box-shadow:0 4px 14px rgba(0,0,0,.4); }
.profil-guest .maint-when { margin-top:10px; color:#ffd66b; } .profil-guest .maint-note { margin-top:6px; color:var(--muted, #b8c4b8); font-style:italic; }
.gt-maint .gt-btn { background:rgba(233,196,106,.12) !important; color:#ffd66b !important; border-color:rgba(233,196,106,.4) !important; }
.spiele-guest-hint { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:0 0 16px; padding:12px 16px;
border:1px solid var(--border-strong); border-radius:14px; background:rgba(61,214,57,.07); color:var(--text); font-size:.92rem; }
.spiele-guest-hint > div { display:flex; flex-wrap:wrap; gap:8px; }
.spiele-guest-hint a, .spiele-guest-hint button { margin:0 !important; }
@keyframes b420TitleSlide { from { transform: translateY(0.3em); } to { transform: none; } }
@media (max-width: 900px) { .page-main { padding-top: var(--nav-h, 63px); } .casino-ticker { top: var(--nav-h, 63px); } }
.section.active.b420-pre { animation: none; }
.cc-hero[data-pre] .cc-hero-title.reveal-el.in-view { opacity: 1; animation: b420TitleSlide .8s cubic-bezier(.19,1,.22,1) backwards !important; }
.tw-facade { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; height:100%; border:0; padding:20px; margin:0; font:inherit; color:var(--text); text-align:center; cursor:pointer;
background: radial-gradient(circle at 50% 40%, rgba(61,214,57,0.14), transparent 62%), linear-gradient(180deg, var(--dark3), var(--dark2)); overflow:hidden; }
.tw-facade img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:brightness(.62); transition: filter .3s, transform .6s; }
.tw-facade--live:hover img { filter:brightness(.78); transform:scale(1.02); }
.tw-facade > span, .tw-facade > b, .tw-facade > small { position:relative; z-index:1; }
.tw-fc-top { position:absolute !important; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.tw-fc-live { background:#e5484d; color:#fff; font-weight:800; font-size:.78rem; letter-spacing:.06em; padding:5px 10px; border-radius:7px; box-shadow:0 0 18px rgba(229,72,77,.55); }
.tw-fc-view { background:rgba(0,0,0,.6); color:#fff; font-size:.8rem; font-weight:700; padding:5px 10px; border-radius:7px; }
.tw-fc-play { width:78px; height:78px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; box-shadow:0 0 40px rgba(61,214,57,.55); transition:transform .2s; }
.tw-facade--live:hover .tw-fc-play { transform:scale(1.07); }
.tw-fc-play svg { width:36px; height:36px; fill:#08130a; margin-left:4px; }
.tw-fc-bot { position:absolute !important; left:0; right:0; bottom:0; padding:28px 16px 14px; background:linear-gradient(transparent, rgba(0,0,0,.82)); display:flex; flex-direction:column; gap:3px; text-align:left; }
.tw-fc-bot b { font-size:1rem; line-height:1.3; color:#fff; } .tw-fc-bot small { color:rgba(255,255,255,.75); font-size:.82rem; } .tw-fc-bot em { font-style:normal; color:var(--green-light); font-size:.8rem; font-weight:700; }
.tw-facade--off { cursor:default; } .tw-fc-moon { font-size:2.2rem; } .tw-facade--off b { font-size:1.15rem; } .tw-facade--off small { color:var(--muted); max-width:420px; line-height:1.5; }
.tw-fc-btns { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:4px; }
.tw-fc-btn { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 16px; border-radius:var(--radius-btn); background:var(--green); color:#08130a; font:inherit; font-weight:800; font-size:.88rem; text-decoration:none; border:1px solid var(--green); cursor:pointer; }
.tw-fc-ghost { background:transparent; color:var(--text); border-color:var(--border-strong); }
.tw-fc-btn:hover { filter:brightness(1.08); }
.tw-chat-facade { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:20px; text-align:center; color:var(--text); }
.tw-chat-facade span { font-size:1.6rem; } .tw-chat-facade small { color:var(--muted); margin-bottom:6px; }
@media (max-width: 768px) {
.tw-embed-grid:not(.tw-started) .tw-chat-wrap { min-height: 0; }
.tw-embed-grid:not(.tw-started) .tw-chat-facade { position: static; flex-direction: row; flex-wrap: wrap; padding: 14px; gap: 6px 10px; }
.tw-embed-grid:not(.tw-started) .tw-chat-facade small { display: none; }
.tw-fc-play { width: 56px; height: 56px; margin-bottom: 18px; } .tw-fc-play svg { width: 26px; height: 26px; }
.tw-fc-bot { padding: 18px 12px 10px; } .tw-fc-bot small, .tw-fc-bot em { display: none; }
.tw-fc-bot b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-fc-top { top: 10px; left: 10px; right: 10px; }
}
.sched-section.sched-first { margin-top: 0 !important; margin-bottom: 36px; }
@media (max-width: 768px) { .tw-player-wrap.tw-off { padding-top: 0; } .tw-player-wrap.tw-off .tw-facade { position: relative; inset: auto; height: auto; padding: 30px 18px; } }
.casino-card:not(.cc-open) .cc-divider:has(+ .cc-infobox) { display: none; }
.cw-launcher { transition: transform .25s, opacity .25s, box-shadow .2s; }
.cw-launcher.cw-away { transform: translateY(18px) scale(.85); opacity: 0; pointer-events: none; }
@media (max-width: 900px) { .cw-launcher { width: 52px; height: 52px; } .cw-launcher svg { width: 23px; height: 23px; } }
.lang-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; min-width: 40px; }
.footer-col a, .footer-links a { display: inline-block; padding: 6px 0; }
.cc-lbl { font-size: .72rem; }
.cc-code-copy { width: 32px; height: 32px; }
@media (max-width: 760px) { .gt-cat { font-size: .62rem; } .gt-pill { font-size: .7rem; } .cc-hero-stats .stat-label { font-size: .72rem; } }
@media (max-width: 400px) { .lang-btn { font-size: .72rem; padding: 6px 10px; } }
.cc-tg-s { display: none; }
@media (max-width: 600px) {
.casino-card .cc-header { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; row-gap: 3px; align-items: center; justify-items: start; text-align: left; padding: 16px 16px 14px; }
.casino-card .cc-header > * { grid-column: 2; }
.casino-card .cc-header .cc-icon { grid-column: 1; grid-row: 1 / span 4; width: 64px; height: 64px; margin: 0; border-radius: 14px; align-self: center; }
.casino-card .cc-name { text-align: left; font-size: 1.08rem; margin: 0; padding-right: 34px; }
.casino-card .cc-lbls { justify-content: flex-start; margin-top: 3px; }
.casino-card .cc-code-badge { margin-top: 5px; }
.casino-card .cc-number { top: 12px; left: auto; right: 12px; width: 28px; height: 28px; font-size: .8rem; }
.casino-card .cc-body { padding: 14px 16px; gap: 10px; }
.casino-card:not(.cc-open) .cc-sec { display: none; }
.casino-card .cc-footer { display: flex; gap: 8px; padding: 12px 16px 14px; }
.casino-card .cc-toggle-btn { width: auto; margin: 0; padding: 12px 14px; flex-shrink: 0; }
.casino-card .cc-btn { flex: 1; }
.cc-tg-l { display: none; } .cc-tg-s { display: inline; }
}