/* Snooker Online — DNA seragam Gemecheh Zombie + Catur Master — v4 header & animated bg */
:root {
    --bg: #070b18;
    --surface: rgba(17, 24, 48, 0.72);
    --surface-solid: #111830;
    --surface-2: rgba(30, 41, 78, 0.85);
    --border: rgba(126, 146, 205, 0.16);
    --border-strong: rgba(126, 146, 205, 0.32);
    --text: #eef1fb;
    --muted: #93a0c4;
    --accent: #18b26b;
    --accent-strong: #0e8a4f;
    --cyan: #22d3ee;
    --purple: #a78bfa;
    --danger: #ff5470;
    --warning: #ffd166;
    --radius: 16px;
    --radius-sm: 11px;
    --shadow: 0 18px 44px rgba(2, 6, 20, 0.55);
    --glow-accent: 0 0 22px rgba(24, 178, 107, 0.35);
    --font-display: "Segoe UI", "Trebuchet MS", system-ui, -apple-system, Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.d-none { display: none !important; }
html, body { margin: 0; padding: 0; }
::selection { background: rgba(24,178,107,0.28); color: var(--text); }

/* ===== Animated background — upgraded ===== */
.bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
.bg-fx::before {
    content:"";
    position:absolute; inset:-20%;
    background:
        radial-gradient(900px 600px at 78% -8%, rgba(24,178,107,0.16), transparent 58%),
        radial-gradient(700px 540px at -8% 108%, rgba(120,80,220,0.14), transparent 62%),
        radial-gradient(800px 600px at 50% 38%, rgba(34,211,238,0.07), transparent 68%),
        radial-gradient(600px 500px at 30% 20%, rgba(16,185,129,0.06), transparent 65%);
    animation: bg-pulse 14s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
.bg-beam {
    position:absolute; inset:0;
    background: linear-gradient(115deg, transparent 30%, rgba(24,178,107,0.08) 48%, rgba(34,211,238,0.06) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: beam-sweep 9s ease-in-out infinite;
    opacity: 0.9;
}
.bg-grid {
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(148,163,214,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,214,0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 92% 80% at 50% 42%, black 28%, transparent 78%);
    mask-image: radial-gradient(ellipse 92% 80% at 50% 42%, black 28%, transparent 78%);
    animation: grid-pan 22s linear infinite;
}
.bg-vignette {
    position:absolute; inset:0;
    background: radial-gradient(120% 120% at 50% 50%, transparent 42%, rgba(7,11,24,0.55) 88%);
}
.orb { position:absolute; border-radius:50%; filter:blur(72px); opacity:0.55; will-change:transform; mix-blend-mode: screen; }
.orb-a { width:580px; height:580px; background: radial-gradient(circle at 30% 30%, rgba(24,178,107,0.9), rgba(14,138,79,0.0) 70%), rgba(24,178,107,0.18); top:-180px; right:-140px; animation: orb-drift-a 18s ease-in-out infinite alternate; }
.orb-b { width:520px; height:520px; background: radial-gradient(circle at 70% 30%, rgba(139,92,246,0.85), transparent 65%), rgba(120,80,220,0.16); bottom:-190px; left:-140px; animation: orb-drift-b 22s ease-in-out infinite alternate; }
.orb-c { width:380px; height:380px; background: radial-gradient(circle at 50% 50%, rgba(34,211,238,0.55), transparent 68%), rgba(30,200,90,0.14); top:42%; left:58%; animation: orb-drift-c 26s ease-in-out infinite alternate; }
.orb-d { width:420px; height:420px; background: radial-gradient(circle at 30% 70%, rgba(16,185,129,0.5), transparent 70%), rgba(16,185,129,0.10); top:10%; left:18%; animation: orb-drift-d 28s ease-in-out infinite alternate; opacity:0.38; }

/* floating dust / chalk particles */
.bg-particles { position:absolute; inset:0; overflow:hidden; }
.bg-particles span {
    position:absolute; width:3px; height:3px; background: rgba(255,255,255,0.9); border-radius:50%;
    box-shadow: 0 0 8px rgba(24,178,107,0.6), 0 0 14px rgba(34,211,238,0.28);
    opacity:0; animation: particle-float 14s linear infinite;
}
.bg-particles span:nth-child(1){ left:8%; top:22%; animation-delay:0s; animation-duration:13s; width:2px; height:2px; }
.bg-particles span:nth-child(2){ left:18%; top:78%; animation-delay:1.2s; animation-duration:16s; }
.bg-particles span:nth-child(3){ left:34%; top:14%; animation-delay:2.4s; animation-duration:18s; width:4px; height:4px; opacity:0.7; }
.bg-particles span:nth-child(4){ left:48%; top:88%; animation-delay:0.8s; animation-duration:15s; }
.bg-particles span:nth-child(5){ left:62%; top:28%; animation-delay:3.1s; animation-duration:17s; width:2.5px; height:2.5px; }
.bg-particles span:nth-child(6){ left:74%; top:62%; animation-delay:1.8s; animation-duration:14s; }
.bg-particles span:nth-child(7){ left:88%; top:42%; animation-delay:2.9s; animation-duration:19s; width:3.5px; height:3.5px; }
.bg-particles span:nth-child(8){ left:26%; top:52%; animation-delay:4.2s; animation-duration:20s; width:2px; height:2px; }
.bg-particles span:nth-child(9){ left:56%; top:10%; animation-delay:0.4s; animation-duration:13.5s; }
.bg-particles span:nth-child(10){ left:82%; top:82%; animation-delay:3.6s; animation-duration:16.5s; width:2px; height:2px; }
.bg-particles span:nth-child(11){ left:42%; top:68%; animation-delay:5.1s; animation-duration:18.5s; }
.bg-particles span:nth-child(12){ left:12%; top:58%; animation-delay:2s; animation-duration:15.5s; width:4px; height:4px; }

@keyframes bg-pulse { 0%{ transform:scale(1) rotate(0deg); opacity:1;} 100%{ transform:scale(1.06) rotate(0.6deg); opacity:1; } }
@keyframes beam-sweep { 0%{ background-position:-120% 0; opacity:0.0; } 12%{ opacity:0.9;} 48%{ background-position:120% 0; opacity:0.0;} 100%{ background-position:120% 0; opacity:0;} }
@keyframes grid-pan { from{ transform:translate(0,0);} to{ transform:translate(46px,46px);} }
@keyframes orb-drift-a { from{ transform:translate(0,0) scale(1) rotate(0deg);} to{ transform:translate(-90px,70px) scale(1.14) rotate(1deg);} }
@keyframes orb-drift-b { from{ transform:translate(0,0) scale(1);} to{ transform:translate(80px,-60px) scale(1.12);} }
@keyframes orb-drift-c { from{ transform:translate(-50%,-50%) scale(1);} to{ transform:translate(calc(-50% - 70px), calc(-50% - 50px)) scale(0.88);} }
@keyframes orb-drift-d { from{ transform:translate(0,0) scale(1);} to{ transform:translate(60px,40px) scale(1.08);} }
@keyframes particle-float {
    0%{ transform:translateY(0) translateX(0) scale(1); opacity:0; }
    8%{ opacity:0.85; }
    50%{ transform:translateY(-42px) translateX(14px) scale(1.15); opacity:0.55; }
    85%{ opacity:0.25; }
    100%{ transform:translateY(-92px) translateX(-10px) scale(0.7); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
    .bg-fx::before, .bg-beam, .bg-grid, .orb, .bg-particles span{ animation:none !important; }
}

/* ===== Body ===== */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
}

/* ===== Header — premium upgraded ===== */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.78rem clamp(1rem, 4vw, 2.2rem);
    border-bottom: 1px solid rgba(126,146,205,0.14);
    background: linear-gradient(180deg, rgba(13,18,40,0.88) 0%, rgba(7,11,24,0.74) 100%);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 8px 32px rgba(2,6,20,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
.site-header::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background: linear-gradient(90deg, transparent 0%, rgba(24,178,107,0.0) 12%, rgba(24,178,107,0.85) 50%, rgba(34,211,238,0.65) 62%, transparent 92%);
    background-size: 200% 100%;
    animation: header-line 4.2s linear infinite;
    opacity:0.9;
}
.site-header::before{
    content:"";
    position:absolute; inset:0 0 auto 0; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    pointer-events:none;
}
@keyframes header-line { 0%{ background-position:-140% 0;} 100%{ background-position:140% 0;} }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.78rem;
    text-decoration: none;
    min-width: 0;
    position:relative;
}
.brand-mark{
    position:relative;
    width:44px; height:44px;
    display:grid; place-items:center;
    flex:0 0 auto;
    border-radius:14px;
    background: linear-gradient(135deg, rgba(24,178,107,0.18) 0%, rgba(30,41,78,0.65) 100%);
    border:1px solid rgba(24,178,107,0.28);
    box-shadow: 0 4px 18px rgba(24,178,107,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
    overflow:hidden;
    isolation:isolate;
}
.brand-mark::before{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(120px 80px at 30% 20%, rgba(255,255,255,0.10), transparent 60%);
    pointer-events:none;
}
.brand-glow{
    position:absolute; inset:-18px;
    background: radial-gradient(circle at 50% 50%, rgba(24,178,107,0.28), transparent 62%);
    filter:blur(14px);
    opacity:0.9;
    z-index:-1;
    animation: brand-glow 3.2s ease-in-out infinite alternate;
}
@keyframes brand-glow{ from{ transform:scale(0.92); opacity:0.7;} to{ transform:scale(1.08); opacity:1;} }
.brand-icon{
    font-size:1.55rem;
    line-height:1;
    filter: drop-shadow(0 0 12px rgba(24,178,107,0.65)) drop-shadow(0 2px 6px rgba(0,0,0,0.5));
    animation: brand-wiggle 5.2s ease-in-out infinite, brand-float 3.5s ease-in-out infinite;
    position:relative; z-index:1;
}
@keyframes brand-wiggle{
    0%,84%,100%{ transform:rotate(0deg) scale(1);}
    88%{ transform:rotate(-13deg) scale(1.06);}
    92%{ transform:rotate(11deg) scale(1.06);}
    96%{ transform:rotate(-5deg) scale(1.03);}
}
@keyframes brand-float{ 0%,100%{ translate:0 0;} 50%{ translate:0 -1px;} }
.brand-text{ display:flex; flex-direction:column; line-height:1; min-width:0; }
.brand-title{
    font-size:1.18rem; font-weight:900; letter-spacing:0.02em; line-height:1.05;
    background: linear-gradient(90deg, #fff 18%, #e6fff3 52%, #b7f7d8 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-sub{
    display:inline-flex; align-items:center; gap:0.38rem;
    font-size:0.68rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
    color: var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dot-live{
    width:7px; height:7px; border-radius:50%; background:#18b26b;
    box-shadow: 0 0 0 0 rgba(24,178,107,0.7);
    animation: dot-pulse 1.8s infinite;
    display:inline-block; flex:0 0 auto;
}
.live-hint{ color: var(--accent); font-weight:900; letter-spacing:0.09em; font-size:0.68rem; }
@keyframes dot-pulse{
    0%{ box-shadow:0 0 0 0 rgba(24,178,107,0.75); transform:scale(1);}
    70%{ box-shadow:0 0 0 7px rgba(24,178,107,0); transform:scale(1.05);}
    100%{ box-shadow:0 0 0 0 rgba(24,178,107,0); transform:scale(1);}
}
.nav-actions{
    display:flex; align-items:center; gap:0.42rem; flex-wrap:wrap; justify-content:flex-end;
}
.nav-user{
    font-size:0.84rem; font-weight:750; color:var(--text);
    background: rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    padding:0.34rem 0.72rem; border-radius:999px;
    max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width: 640px){
    .brand-title{ font-size:1.02rem; }
    .brand-sub{ font-size:0.62rem; }
    .brand-sub .live-hint{ display:none; }
    .brand-mark{ width:40px; height:40px; border-radius:12px; }
    .site-header{ padding:0.65rem 1rem; }
}
@media (max-width: 420px){
    .brand-sub{ display:none; }
    .nav-user{ display:none; }
}

/* ===== Buttons ===== */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    overflow: hidden;
    color: var(--muted);
    background: var(--surface);
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}
.btn::after {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    transform: skewX(-22deg);
    transition: left 0.45s ease;
    pointer-events: none;
}
.btn:hover::after { left: 120%; }
.btn:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-2);
    transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn:disabled:hover { transform: none; }

.btn-accent {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
    color: #fff;
    border-color: rgba(24,178,107,0.45);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(24,178,107,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-accent:hover {
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 6px 22px rgba(24,178,107,0.38), inset 0 1px 0 rgba(255,255,255,0.2);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
}

.btn-ghost {
    background: rgba(148, 163, 214, 0.06);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.38rem 0.85rem;
}
.btn-ghost:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: rgba(148, 163, 214, 0.10);
}

.btn-small { padding: 0.38rem 0.85rem; font-size: 0.85rem; }

.btn.opt {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.82rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-sm);
}
.btn.opt:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-2);
}
.btn.opt.active {
    border-color: var(--accent);
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    box-shadow: 0 4px 14px rgba(24,178,107,0.28);
}

.btn-danger {
    background: rgba(255,84,112,0.12);
    border-color: rgba(255,84,112,0.3);
    color: #ff8da3;
}
.btn-danger:hover {
    background: rgba(255,84,112,0.22);
    border-color: rgba(255,84,112,0.5);
    color: #ffb3c4;
}

/* ===== Layout helpers ===== */
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.w-100 { width: 100% !important; }
.text-center { text-align: center !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.muted { color: var(--muted); }

/* ===== Glass card ===== */
.gz-card, .snk-card {
    position: relative;
    background: linear-gradient(180deg, rgba(23, 31, 60, 0.82) 0%, rgba(15, 21, 42, 0.86) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.gz-card:hover, .snk-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* ===== Main ===== */
.container-xxl, main {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* ===== Footer ===== */
.site-footer {
    text-align: center;
    padding: 1.3rem;
    font-size: 0.85rem;
    border-top: 1px solid var(--border);
    background: rgba(7, 11, 24, 0.5);
    backdrop-filter: blur(8px);
    color: var(--muted);
    margin-top: auto;
}
.brand-credit {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-shadow: 0 0 12px rgba(24,178,107,0.35);
}

/* ===== Form inputs ===== */
label, .form-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin-bottom: 0.3rem;
    margin-top: 0.85rem;
}
label:first-child, .form-label:first-child { margin-top: 0; }
input[type="text"], input[type="password"], .form-control {
    width: 100%;
    font: inherit;
    font-size: 0.92rem;
    color: var(--text);
    background: rgba(7, 11, 24, 0.72);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.62rem 0.85rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input::placeholder, .form-control::placeholder { color: rgba(147,160,196,0.55); }
input:focus, .form-control:focus {
    border-color: rgba(24,178,107,0.55);
    box-shadow: 0 0 0 3px rgba(24,178,107,0.16);
    background: rgba(7,11,24,0.85);
}

/* ===== Alerts ===== */
.alert, .snk-alert {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-bottom: 0.9rem;
    line-height: 1.35;
}
.alert-danger, .snk-alert-danger {
    background: rgba(255,84,112,0.11);
    border-color: rgba(255,84,112,0.28);
    color: #ff8da3;
}
.alert-success, .snk-alert-success {
    background: rgba(24,178,107,0.11);
    border-color: rgba(24,178,107,0.28);
    color: #7ee8b5;
}
.snk-link { color: var(--accent); text-decoration: none; font-weight: 700; }
.snk-link:hover { text-decoration: underline; color: #2ee89a; }

/* ===== Auth pages ===== */
.snk-auth-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
    padding: 1.5rem 1rem;
}
.snk-auth-card {
    width: min(92%, 420px);
    background: linear-gradient(180deg, rgba(23,31,60,0.82) 0%, rgba(15,21,42,0.86) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.snk-auth-card:hover { border-color: var(--border-strong); }
.snk-auth-head {
    padding: 1.4rem 1.5rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: rgba(30,41,78,0.35);
}
.snk-auth-icon {
    width: 56px; height: 56px;
    margin: 0 auto 0.6rem;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 8px 22px rgba(24,178,107,0.35);
}
.snk-auth-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0 0 0.15rem;
    color: var(--text);
}
.snk-auth-sub { font-size: 0.82rem; color: var(--muted); margin: 0; }
.snk-auth-body { padding: 1.25rem 1.4rem 1.4rem; }
.snk-auth-foot {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--muted);
}
.snk-auth-divider {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.9rem 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.snk-auth-divider::before, .snk-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ===== Lobby ===== */
.snk-lobby {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
    padding: 1.5rem 1rem;
}
.snk-lobby-card {
    width: min(92%, 420px);
    text-align: center;
    animation: card-enter 0.6s cubic-bezier(0.16,1,0.3,1);
}
@keyframes card-enter{ from{ opacity:0; transform:translateY(14px) scale(0.98);} to{ opacity:1; transform:translateY(0) scale(1);} }
.snk-lobby-card .card-header {
    background: linear-gradient(135deg, rgba(24,178,107,0.12), rgba(30,41,78,0.55));
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 1.05rem 1.2rem;
    font-weight: 800;
    font-size: 1.28rem;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position:relative; overflow:hidden;
}
.snk-lobby-card .card-header::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transform:translateX(-100%); animation: shimmer 3.8s ease-in-out infinite;
}
@keyframes shimmer{ 60%{ transform:translateX(-100%);} 100%{ transform:translateX(100%);} }
.snk-lobby-card .card-body {
    padding: 1.3rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.snk-lobby-card .opt-group { margin-bottom: 0.3rem; }
.snk-lobby-card .opt-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.35rem;
    text-align: start;
}
.snk-lobby-card .opt-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ===== Stage ===== */
.gz-stage, .snk-stage {
    position: relative;
    width: 100%;
    max-width: 800px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin: 0 auto;
}
.snk-canvas-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1.1;
    background: #0d1220;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.snk-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

/* ===== Scoreboard ===== */
.snk-scoreboard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
.snk-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.5rem 1.2rem;
    background: linear-gradient(180deg, rgba(23,31,60,0.82), rgba(15,21,42,0.86));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 130px;
    box-shadow: var(--shadow);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.snk-player-active {
    border-color: rgba(24,178,107,0.55);
    box-shadow: 0 0 18px rgba(24,178,107,0.28), var(--shadow);
    transform: translateY(-1px);
}
.snk-player-name { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.snk-player-score { font-size: 1.65rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.snk-frame-info { text-align: center; }
.snk-frame-label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.snk-ball-on-label { display: block; font-size: 0.9rem; font-weight: 800; margin-top: 0.15rem; color: var(--text); }

/* ===== Instructions ===== */
.snk-howto {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,10,22,0.92);
    backdrop-filter: blur(4px);
}
.snk-howto-card {
    background: linear-gradient(180deg, rgba(23,31,60,0.95), rgba(15,21,42,0.98));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.8rem;
    width: min(90%, 380px);
    text-align: center;
    box-shadow: var(--shadow);
}
.snk-howto-card h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 0.8rem; letter-spacing: 0.02em; }
.snk-howto-steps { text-align: start; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--muted); line-height: 1.7; }
.snk-howto-steps li { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.35rem; }
.snk-howto-steps .step-icon {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(24,178,107,0.18); border: 1px solid rgba(24,178,107,0.3);
    display: grid; place-items: center; font-size: 0.72rem; color: var(--accent); font-weight: 800;
}

/* ===== Controls ===== */
.snk-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0.35rem 0;
}
.snk-controls-info { margin-left: auto; font-size: 0.85rem; color: var(--muted); }
.snk-controls-info strong { color: var(--text); }

/* ===== HUD ===== */
.snk-game-hud {
    position: absolute;
    top: 0.5rem; left: 50%; transform: translateX(-50%);
    background: rgba(7,11,24,0.82);
    border: 1px solid var(--border);
    color: var(--warning);
    font-size: 0.82rem; font-weight: 700;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    pointer-events: none;
    z-index: 5;
    backdrop-filter: blur(8px);
    white-space: nowrap;
    animation: snk-fade-in 0.2s ease;
}
@keyframes snk-fade-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ===== Overlays ===== */
.gz-overlay, .snk-overlay {
    position: absolute; inset: 0; z-index: 8;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(420px 300px at 50% 38%, rgba(24,178,107,0.07), transparent 70%), rgba(6, 10, 22, 0.88);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    border-radius: var(--radius-sm);
}
.gz-hud, .snk-hud-top, .gz-hud-bottom, .snk-hud-bottom{ display:none; }

/* ===== Leaderboard ===== */
.snk-lb-wrap { max-width: 800px; margin: 0 auto; }
.snk-page-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 1.2rem; letter-spacing: 0.02em; }
.snk-lb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .snk-lb-grid { grid-template-columns: 1fr; } }
.snk-lb-card {
    background: linear-gradient(180deg, rgba(23,31,60,0.82), rgba(15,21,42,0.86));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem;
    box-shadow: var(--shadow);
}
.snk-lb-title { font-size: 1rem; font-weight: 800; margin-bottom: 0.75rem; }
.snk-lb-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.snk-lb-table th, .snk-lb-table td { padding: 0.45rem 0.5rem; text-align: left; border-bottom: 1px solid var(--border); }
.snk-lb-table th { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.snk-lb-val { font-weight: 800; color: var(--accent); text-align: right; }
.snk-lb-table tbody tr:last-child td { border-bottom: 0; }

/* ===== Fullscreen ===== */
.snk-fullscreen {
    position: fixed !important; inset: 0 !important; z-index: 9999 !important;
    max-width: none !important; width: 100vw !important; height: 100vh !important;
    border-radius: 0 !important; border: none !important; background: #070b18;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
}
.snk-fullscreen .snk-scoreboard { flex-shrink: 0; padding: 0.5rem 1rem; background: rgba(7, 11, 24, 0.9); border-bottom: 1px solid var(--border); width: 100%; max-width: 1200px; }
.snk-fullscreen .snk-stage { flex: 1; max-width: 1200px !important; width: 100% !important; border-radius: 0 !important; overflow: hidden; display: flex !important; align-items: center !important; justify-content: center !important; }
.snk-fullscreen .snk-canvas-wrap { width: 100% !important; height: 100% !important; max-width: 1200px !important; aspect-ratio: unset !important; border-radius: 0 !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #0d1220; }
.snk-fullscreen .snk-canvas-wrap canvas { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; }
.snk-fullscreen .snk-controls { flex-shrink: 0; padding: 0.5rem 1rem; background: rgba(7, 11, 24, 0.9); border-top: 1px solid var(--border); width: 100%; max-width: 1200px; }
.snk-fullscreen .snk-howto { border-radius: 0; }

@media (max-width: 576px) {
    .site-header { padding: 0.7rem 1rem; }
    .snk-scoreboard { gap: 0.5rem; }
    .snk-player { min-width: 102px; padding: 0.45rem 0.7rem; }
    .snk-howto-card { padding: 1.2rem; }
}