/* TYGO GAMBLES — SHELL (left sidebar layout) */
:root{
    --green:#1fff87; --purple:#8126ff; --purple-glow:#a044ff; --purple-soft:#c9a3ff;
    --bg-black:#07030a; --panel:#0e0a18; --panel-line:#241a3a;
    --border:rgba(160,68,255,.18); --border-green:rgba(31,255,135,.25);
    --ink:#f4f4f8; --muted:#8f8aac; --gold:#ffca28; --red:#ff4d4d;
    --sb-w:272px; --sb-rail:76px; --tb-h:68px;
}
*{margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg-black);color:var(--ink);font-family:'Inter',sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--purple-soft);outline-offset:2px}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,255,135,.7)}70%{box-shadow:0 0 0 9px rgba(31,255,135,0)}100%{box-shadow:0 0 0 0 rgba(31,255,135,0)}}
@keyframes flow{from{background-position:0 0}to{background-position:200% 0}}
@keyframes wiggle{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-8deg)}93%{transform:rotate(7deg)}97%{transform:rotate(-4deg)}}

/* ── APP FRAME ── */
.app{display:flex;height:100%;height:100dvh;width:100%}
.stage{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
main{flex:1;min-height:0;background:#000}
iframe{width:100%;height:100%;border:none;display:block}

/* ── SIDEBAR ── */
.sidebar{
    position:relative;z-index:10001;flex-shrink:0;width:var(--sb-w);height:100%;
    display:flex;flex-direction:column;
    background:linear-gradient(180deg,#0d0818,#09050f);
    border-right:1px solid var(--border);
    transition:width .28s cubic-bezier(.3,.9,.3,1),transform .3s cubic-bezier(.3,.9,.3,1);
}
.sidebar::after{
    content:"";position:absolute;top:0;bottom:0;right:-1px;width:2px;pointer-events:none;
    background:linear-gradient(180deg,transparent,var(--purple) 20%,var(--green) 50%,var(--purple) 80%,transparent);
    background-size:100% 200%;animation:flowv 6s linear infinite;opacity:.5;
}
@keyframes flowv{from{background-position:0 0}to{background-position:0 200%}}

.sb-head .brand{flex:1}
.sb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 14px 14px 16px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand img{height:42px;width:42px;flex-shrink:0;border-radius:13px;object-fit:contain;background:#0c0816;border:1px solid var(--border-green);box-shadow:0 0 18px rgba(31,255,135,.14);transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.brand:hover img{transform:rotate(-6deg) scale(1.06);box-shadow:0 0 26px rgba(31,255,135,.3)}
.brand-name{font-family:'Rajdhani',sans-serif;font-weight:800;font-size:1.08rem;letter-spacing:1.1px;overflow:hidden;color:#fff;line-height:1;white-space:nowrap}
.brand-name b{font-weight:800;background:linear-gradient(90deg,var(--purple-glow),var(--green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.sb-toggle{
    display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:10px;
    background:var(--panel);border:1px solid var(--panel-line);color:var(--muted);transition:color .2s,border-color .2s,background .2s;
}
.sb-toggle:hover{color:#fff;border-color:rgba(160,68,255,.5);background:rgba(129,38,255,.15)}
.sb-toggle svg{width:17px;height:17px}
.sb-toggle .ico-close{display:none}
.sb-toggle .ico-collapse{transition:transform .28s}

.sb-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 10px 10px;scrollbar-width:thin;scrollbar-color:#2a1d45 transparent}
.sb-scroll::-webkit-scrollbar{width:6px}
.sb-scroll::-webkit-scrollbar-thumb{background:#2a1d45;border-radius:6px}

.sb-list{list-style:none;display:flex;flex-direction:column;gap:3px}
.sb-label{padding:14px 12px 6px;font:800 .66rem 'Rajdhani',sans-serif;letter-spacing:2px;text-transform:uppercase;color:#6f6990;white-space:nowrap}
.sb-cat{list-style:none;padding:16px 12px 6px;font:800 .66rem 'Rajdhani',sans-serif;letter-spacing:2.2px;text-transform:uppercase;color:#6f6990;white-space:nowrap}
.sb-list>.sb-cat:first-child{padding-top:8px}
.sb-sep{height:1px;margin:12px 6px 4px;background:var(--panel-line)}

.nav-link{
    position:relative;display:flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap;
    padding:11px 13px;border-radius:12px;color:var(--muted);
    font-weight:700;font-size:.84rem;letter-spacing:.2px;
    border:1px solid transparent;transition:color .2s,background .2s,border-color .2s;
}
.nav-link svg{width:18px;height:18px;flex-shrink:0;transition:transform .3s}
.nav-link:hover{color:#fff;background:rgba(129,38,255,.1)}
.nav-link:hover svg{transform:scale(1.12)}
.nav-link.active{color:#fff;background:linear-gradient(135deg,rgba(129,38,255,.32),rgba(31,255,135,.12));border-color:rgba(160,68,255,.45);box-shadow:0 0 20px rgba(129,38,255,.18)}
.nav-link.active svg{stroke:var(--green)}
.nav-link.active::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--green);box-shadow:0 0 10px var(--green)}
.nav-hot svg{stroke:var(--gold)}
.nav-hot:hover svg,.nav-hot.active svg{animation:wiggle 2.4s ease-in-out infinite}
.nav-admin svg{stroke:var(--purple-soft)}
.new-tag{font-style:normal;font-size:.56rem;font-weight:900;letter-spacing:.6px;text-transform:uppercase;background:var(--gold);color:#1a1200;padding:2px 5px;border-radius:4px;line-height:1;margin-left:auto}
.nav-link:has(.tk-b-user) .nt-new{display:none}   /* unread count replaces the New tag on Support */

/* admin tools block (admins only) */
.sb-admin{margin-top:10px;border-radius:14px;border:1px solid rgba(160,68,255,.28);background:rgba(129,38,255,.06);padding:4px}
.sb-admin-head{
    display:flex;align-items:center;gap:11px;width:100%;padding:10px 11px;border:0;background:transparent;border-radius:10px;
    color:var(--purple-soft);font:800 .78rem 'Rajdhani',sans-serif;letter-spacing:1.6px;text-transform:uppercase;text-align:left;
}
.sb-admin-head:hover{color:#fff;background:rgba(129,38,255,.14)}
.sb-admin-head svg{width:18px;height:18px;flex-shrink:0}
.sb-admin-head .chev{margin-left:auto;width:15px;height:15px;transition:transform .25s}
.sb-admin.collapsed .chev{transform:rotate(-90deg)}
.sb-admin-body{padding:2px 0 4px}
.sb-admin.collapsed .sb-admin-body{display:none}
.sb-admin .sb-label{padding:10px 11px 4px}
.sb-admin .nav-link{padding:9px 11px;font-size:.8rem}
.sb-admin .nav-link svg{width:16px;height:16px}
.sb-admin .nav-link.active::before{left:-5px}

/* ── TOP BAR (page name · points · account · live) ── */
.topbar{
    position:relative;z-index:9000;flex-shrink:0;display:flex;align-items:center;gap:14px;
    height:calc(var(--tb-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 22px 0;
    background:linear-gradient(180deg,#0d0818,#09050f);border-bottom:1px solid var(--border);
}
.topbar::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--purple) 20%,var(--green) 50%,var(--purple) 80%,transparent);
    background-size:200% 100%;animation:flow 6s linear infinite;opacity:.5;
}
.mbar-btn{display:none;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--panel);border:1px solid var(--panel-line);color:#fff;flex-shrink:0}
.mbar-btn svg{width:20px;height:20px}
.tb-page{display:flex;align-items:center;gap:13px;min-width:0;flex:1}
.tb-icon{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:12px;background:rgba(129,38,255,.16);border:1px solid rgba(160,68,255,.4);color:var(--green)}
.tb-icon:empty{display:none}
.tb-icon svg{width:19px;height:19px}
.tb-text{min-width:0}
.tb-text small{display:block;font:800 .6rem 'Rajdhani',sans-serif;letter-spacing:2.4px;color:#6f6990;line-height:1;margin-bottom:4px}
.tb-text h1{font:800 1.45rem/1 'Rajdhani',sans-serif;letter-spacing:1px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-right{display:flex;align-items:center;gap:10px;flex-shrink:0}

.pts-chip{display:none;align-items:center;gap:7px;height:42px;padding:0 14px;border-radius:12px;background:rgba(31,255,135,.09);border:1px solid rgba(31,255,135,.3);color:var(--green);font:800 .9rem 'Rajdhani',sans-serif;letter-spacing:1px;text-decoration:none;white-space:nowrap;transition:background .2s}
.pts-chip.on{display:flex}
.pts-chip:hover{background:rgba(31,255,135,.16)}
.acct-btn{display:flex;align-items:center;gap:10px;height:42px;text-decoration:none;padding:0 15px;border-radius:12px;background:#5865f2;border:1px solid rgba(255,255,255,.12);color:#fff;transition:background .2s,box-shadow .2s;min-width:0}
.acct-btn:hover{background:#4752c4;box-shadow:0 6px 20px rgba(88,101,242,.35)}
.acct-btn svg{width:18px;height:18px;flex-shrink:0;fill:currentColor;stroke:none}
.acct-btn img{width:30px;height:30px;border-radius:50%;flex-shrink:0;object-fit:cover}
.acct-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--purple),var(--purple-glow));color:#fff;font:800 .85rem 'Rajdhani',sans-serif}
.acct-text{font-family:'Rajdhani',sans-serif;font-weight:800;font-size:.86rem;letter-spacing:1.3px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.acct-btn.logged-in{background:rgba(129,38,255,.14);border-color:rgba(160,68,255,.4);padding:0 15px 0 6px}
.acct-btn.logged-in:hover{background:rgba(129,38,255,.26);box-shadow:0 0 20px rgba(129,38,255,.25)}

.status-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0}
.status-chip{
    display:flex;align-items:center;gap:10px;height:42px;text-decoration:none;padding:0 14px;border-radius:12px;
    background:rgba(255,77,77,.07);border:1px solid rgba(255,77,77,.28);
    transition:background .25s,border-color .25s,box-shadow .25s;
}
.status-chip:hover{background:rgba(255,77,77,.13)}
.status-text{font-family:'Rajdhani',sans-serif;font-weight:800;font-size:.8rem;letter-spacing:1.4px;color:#ff7a7a;white-space:nowrap}
.status-chip.is-live{background:rgba(31,255,135,.08);border-color:var(--border-green)}
.status-chip.is-live:hover{background:rgba(31,255,135,.14);box-shadow:0 0 22px rgba(31,255,135,.2)}
.status-chip.is-live .status-dot,.live-pop .status-dot,.live-chip .status-dot{background:var(--green);animation:pulse 2s infinite}
.status-chip.is-live .status-text{color:var(--green)}

@media (min-width:851px) and (max-height:860px){
    .nav-link{padding:8px 12px}
    .sb-list{gap:2px}
    .sb-admin .nav-link{padding:7px 11px}
    .sb-label{padding-top:10px}
}

/* ── DESKTOP: collapsed = slim icon rail ── */
@media (min-width:851px){
    .sb-collapsed .sidebar{width:var(--sb-rail)}
    .sb-collapsed .sb-head{flex-direction:column;justify-content:center;gap:10px;padding:14px 0 10px}
    .sb-collapsed .brand-name,.sb-collapsed .nav-link span,.sb-collapsed .sb-label,
    .sb-collapsed .new-tag,.sb-collapsed .sb-admin-head span,.sb-collapsed .sb-admin-head .chev{display:none}
    .sb-collapsed .sb-toggle .ico-collapse{transform:rotate(180deg)}
    .sb-collapsed .sb-scroll{padding:4px 10px 10px}
    .sb-collapsed .nav-link,.sb-collapsed .sb-admin-head{justify-content:center;padding:12px 0}
    .sb-collapsed .nav-link.active::before{left:-10px}
    .sb-collapsed .sb-admin{padding:2px}
    .sb-collapsed .sb-admin.collapsed .sb-admin-body{display:block}   /* in the rail the icons always show */
    .sb-collapsed .sb-cat{font-size:0;height:1px;padding:0;margin:10px 10px;background:var(--panel-line)}
    .sb-collapsed .sb-list>.sb-cat:first-child{display:none}
    .sb-backdrop{display:none!important}
}

/* ── MOBILE: slim top bar + slide-in drawer ── */
.mbar{display:none}
.sb-backdrop{display:none}
@media (max-width:850px){
    .sidebar{
        position:fixed;left:0;top:0;bottom:0;height:auto;width:min(310px,86vw);
        transform:translateX(-105%);box-shadow:none;
        padding-top:env(safe-area-inset-top,0px);
    }
    .sidebar::after{display:none}
    .sb-open .sidebar{transform:none;box-shadow:0 0 60px rgba(0,0,0,.8)}
    .sb-toggle .ico-collapse{display:none}
    .sb-toggle .ico-close{display:block}
    .sb-toggle{width:40px;height:40px}
    .nav-link{padding:13px 14px;font-size:.9rem}
    .sb-admin .nav-link{padding:12px 12px;font-size:.86rem}

    .sb-backdrop{display:block;position:fixed;inset:0;z-index:10000;background:rgba(3,1,8,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
    .sb-open .sb-backdrop{opacity:1;pointer-events:auto}

    .mbar-btn{display:grid}
    .topbar{gap:10px;padding:env(safe-area-inset-top,0px) 12px 0}
    .topbar::after{display:none}
    .tb-page{gap:10px}
    .tb-icon{width:36px;height:36px;border-radius:11px}
    .tb-text small{display:none}
    .tb-text h1{font-size:1.2rem;letter-spacing:.8px}
    .tb-right{gap:7px}
    .pts-chip{height:38px;padding:0 10px;font-size:.82rem;border-radius:11px}
    .pts-chip .pts-word{display:none}
    .acct-btn,.acct-btn.logged-in{height:38px;width:38px;padding:0;justify-content:center;border-radius:50%}
    .acct-btn .acct-text{display:none}
    .acct-btn img,.acct-av{width:32px;height:32px}
    .status-chip{height:38px;width:38px;padding:0;justify-content:center;border-radius:50%}
    .status-text{display:none}

    .live-pop{left:12px!important;right:auto!important;width:min(270px,66vw)!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important}
    .live-chip{right:12px!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;padding:9px 14px!important}
}
@media (max-width:430px){ .tb-icon{display:none} }

/* ── LIVE POP-UP ── */
.live-pop{
    position:fixed;right:22px;bottom:22px;z-index:20000;width:340px;
    background:#0b0715;border:1px solid var(--border-green);border-radius:16px;overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,.65),0 0 34px rgba(31,255,135,.14);
    opacity:0;transform:translateY(24px) scale(.94);
    transition:opacity .3s,transform .4s cubic-bezier(.3,1.4,.5,1);
}
.live-pop.in{opacity:1;transform:none}
.live-pop[hidden],.live-chip[hidden]{display:none}
.pop-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 13px}
.pop-live{display:flex;align-items:center;gap:8px;font-family:'Rajdhani',sans-serif;font-weight:800;font-size:.82rem;letter-spacing:1.5px;color:var(--green)}
.pop-btns{display:flex;gap:2px}
.pop-btns button,.pop-btns a{width:28px;height:28px;border-radius:8px;border:none;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:.2s}
.pop-btns button:hover,.pop-btns a:hover{background:rgba(160,68,255,.18);color:#fff}
.pop-btns svg{width:15px;height:15px}
.pop-video{aspect-ratio:16/9;background:#000}
.pop-video iframe{width:100%;height:100%}
.live-chip{
    position:fixed;right:22px;bottom:22px;z-index:20000;display:flex;align-items:center;gap:9px;
    padding:11px 18px;border-radius:50px;border:1px solid var(--border-green);
    background:#0b0715;color:var(--green);font-family:'Rajdhani',sans-serif;font-weight:800;font-size:.85rem;letter-spacing:1.3px;text-transform:uppercase;
    box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 24px rgba(31,255,135,.15);transition:transform .2s,background .2s;
}
.live-chip:hover{transform:translateY(-2px);background:#10201a}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}