/* =========================================================
   PUDDLE — UI kit (kimi.page style guide)
   Navy surface ladder · green = primary CTA only · ice = links / focus / live
   Inter (UI) · Space Grotesk (logo) · tabular figures on every amount
   Loaded after style.css: re-maps the old tokens and restyles every shared component.
   ========================================================= */

:root {
    --bg-0: #0F212E; --bg-1: #1A2C38; --bg-2: #2F4553; --bg-3: #3E5568;
    --text-0: #FFFFFF; --text-1: #B1BAD3; --text-2: #557086;
    --green: #00E701; --green-hover: #1FFF20; --ice: #64D2FF;
    --ice-bg: rgba(100, 210, 255, .12); --ice-border: rgba(100, 210, 255, .35);
    --red: #ED4163; --gold: #FFC800;
    --r-sm: 4px; --r-md: 8px; --r-pill: 999px;
    --shadow-1: 0 4px 12px rgba(0, 0, 0, .35);

    /* old tokens → new ladder */
    --void: var(--bg-0); --surface: var(--bg-1); --raised: var(--bg-2); --white: #fff;
    --muted: var(--text-1); --faint: var(--text-2);
    --win: var(--green); --loss: var(--red);
    --bg: var(--bg-0); --bg-soft: var(--bg-1);
    --panel: var(--bg-1); --panel-hover: var(--bg-2);
    --text: #fff; --text-muted: var(--text-1); --text-faint: var(--text-2);
    --accent: var(--ice); --accent-2: var(--ice);
    --line: var(--bg-2); --line-strong: var(--bg-3);
    --font-main: "Inter", system-ui, sans-serif; --font-display: "Space Grotesk", "Inter", sans-serif; --font-mono: "Inter", system-ui, sans-serif;
    --radius-sm: 8px; --radius-md: 8px; --radius-lg: 8px;
    --shadow: var(--shadow-1); --glass-hi: none;
    --sidebar-w: 240px; --sidebar-collapsed: 68px; --tb-h: 60px; --content-max: 1240px;
    --speed: .15s;
}

html { scroll-behavior: auto; }
body { background: var(--bg-0); color: #fff; font-family: var(--font-main); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; overflow-x: hidden; }
* { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.num, .t-num { font-variant-numeric: tabular-nums; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-3); }
::selection { background: rgba(100, 210, 255, .3); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }

/* ---------- type: no mono, no tracking-heavy labels ---------- */
.chip span, .stat-ico, .feature-number, .account-val, .visual-label,
.nav-section-label, .section-kicker, .eyebrow, .game-tag, .sidebar-note, .hero-note, .field label, .account-key, .nav-badge { font-family: var(--font-main); }
.mono { font-family: var(--font-main); font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { font-family: var(--font-main); letter-spacing: 0; }
.section-kicker, .sec-label { font-size: 12px; font-weight: 600; color: var(--ice); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.section-title, .page-head h1 { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: 0; color: #fff; }
.section-copy { color: var(--text-1); font-size: 13px; line-height: 1.55; max-width: 560px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--bg-2); }

/* =========================================================
   APP CHROME — topbar 60 + sidebar 240
   ========================================================= */
.topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--tb-h); background: var(--bg-1); border-bottom: 1px solid var(--bg-2); display: flex; align-items: center; gap: 16px; padding: 0 16px; z-index: 130; }
.icon-btn { width: 36px; height: 36px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; color: var(--text-1); cursor: pointer; background: none; border: none; position: relative; flex: none; transition: background .15s, color .15s; }
.icon-btn:hover, .icon-btn.active { background: var(--bg-2); color: #fff; }
.tb-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: #fff; }
.tb-logo .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ice); }
.tb-logo .tb-bet { color: var(--text-1); font-weight: 600; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.tb-wallet { display: none; align-items: center; gap: 10px; }
html.is-authed .tb-wallet { display: flex; }
.tb-guest { display: flex; gap: 8px; }
html.is-authed .tb-guest { display: none; }
.tb-icons { display: flex; align-items: center; gap: 2px; }
.tb-icons .auth-only { display: none; }
html.is-authed .tb-icons .auth-only { display: inline-flex !important; }
.wallet-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-2); border: 0; border-radius: var(--r-pill); padding: 8px 14px; font-family: inherit; font-weight: 700; font-size: 14px; color: #fff; cursor: pointer; transition: background .15s; height: 36px; }
.wallet-pill:hover { background: var(--bg-3); }
.wallet-pill svg { color: var(--text-1); }
.wc-usd { display: inline-flex; align-items: center; gap: 8px; }
.coin-chip.usd-chip, .usd-chip { background: var(--green); color: var(--bg-0); }
.wallet-pill .coin-chip { width: 18px; height: 18px; font-size: 11px; font-weight: 700; }
.wallet-vip { width: 36px; height: 36px; }
.tb-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg-1); }

.sidebar { position: fixed; top: var(--tb-h); bottom: 0; left: 0; width: var(--sidebar-w); background: var(--bg-1); border-right: 1px solid var(--bg-2); padding: 12px; z-index: 120; display: flex; flex-direction: column; overflow-y: auto; transition: width .2s ease, transform .2s ease; }
.nav-list { display: flex; flex-direction: column; gap: 2px; }
.nav-section-label { font-size: 11px; font-weight: 600; color: var(--text-2); letter-spacing: .08em; text-transform: uppercase; padding: 0; margin: 14px 8px 6px; }
.nav-section-label:first-child { margin-top: 4px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-md); color: var(--text-1); font-weight: 500; font-size: 14px; position: relative; border: 0; background: none; width: 100%; font-family: inherit; text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.nav-item:hover { background: var(--bg-2); color: #fff; }
.nav-item.active { background: var(--bg-2); color: #fff; box-shadow: none; border: 0; }
.nav-item.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; height: auto; transform: none; border-radius: 3px; background: var(--ice); }
.nav-ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.is-soon { opacity: .55; }
.nav-badge, .nav-badge.soon { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--bg-2); color: var(--text-1); border: 0; }
.sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bg-2); display: none; flex-direction: column; gap: 10px; }
html.is-authed .sidebar-footer { display: flex; }
.sidebar-note { font-size: 11px; color: var(--text-2); text-align: center; letter-spacing: 0; }
.sidebar-head, .menu-toggle, .collapse-btn, .wallet-topbar { display: none !important; }

.main { margin-left: var(--sidebar-w); padding-top: var(--tb-h); min-height: 100vh; background: var(--bg-0); transition: margin-left .2s ease; }
.main-inner { width: min(94%, var(--content-max)); margin: 0 auto; padding: 28px 0 80px; }
html.is-authed .main-inner { padding-top: 28px; }

html.nav-collapsed .sidebar { width: var(--sidebar-collapsed); padding: 12px 10px; }
html.nav-collapsed .main { margin-left: var(--sidebar-collapsed); }
html.nav-collapsed .nav-label, html.nav-collapsed .nav-badge, html.nav-collapsed .sidebar-note { display: none; }
html.nav-collapsed .nav-section-label { font-size: 0; margin: 10px 0; border-top: 1px solid var(--bg-2); height: 0; }
html.nav-collapsed .nav-section-label:first-child { border: 0; margin: 0; }
html.nav-collapsed .nav-item { justify-content: center; padding: 10px 0; }
html.nav-collapsed .nav-item.active::before { left: -10px; }
html.nav-collapsed .logout-btn { padding: 0; }
html.nav-collapsed .logout-btn .nav-label { display: none; }

.nav-backdrop { position: fixed; inset: 0; background: rgba(15, 33, 46, .75); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 115; }
body.has-maint-bar .topbar { top: 28px; } body.has-maint-bar .sidebar { top: calc(var(--tb-h) + 28px); } body.has-maint-bar .main { padding-top: calc(var(--tb-h) + 28px); }
body.has-maint-bar .menu-toggle, body.has-maint-bar .wallet-topbar { margin-top: 0; }
@media (max-width: 860px) {
    .sidebar { transform: translateX(-100%); width: 260px; box-shadow: var(--shadow-1); }
    body.nav-open .sidebar { transform: none; }
    body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
    .main, html.nav-collapsed .main { margin-left: 0; }
    html.nav-collapsed .sidebar { width: 260px; padding: 12px; }
    html.nav-collapsed .nav-label, html.nav-collapsed .nav-badge, html.nav-collapsed .sidebar-note { display: initial; }
    html.nav-collapsed .nav-item { justify-content: flex-start; padding: 9px 10px; }
    html.nav-collapsed .nav-section-label { font-size: 11px; margin: 14px 8px 6px; border: 0; height: auto; }
    .topbar { gap: 8px; padding: 0 10px; }
    .tb-right { gap: 6px; }
    .wallet-cta, .tb-search, .tb-user, .wallet-vip { display: none !important; }
    .main-inner { padding-top: 20px; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-height: 0; padding: 0 20px; border: 0; border-radius: var(--r-md); font-family: inherit; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; text-decoration: none; transition: background .15s ease-out, border-color .15s, color .15s; line-height: 1; }
.btn.sm { height: 36px; font-size: 13px; padding: 0 16px; }
.btn.lg, .roll-btn { height: 52px; font-size: 15px; }
.btn-primary, .btn.primary { background: var(--green); color: var(--bg-0); border: 0; }
.btn-primary:hover, .btn.primary:hover { background: var(--green-hover); border: 0; }
.btn-secondary, .btn.secondary { background: var(--bg-2); color: #fff; border: 0; }
.btn-secondary:hover, .btn.secondary:hover { background: var(--bg-3); border: 0; }
.btn-ghost, .btn.ghost { background: transparent; border: 1px solid var(--bg-3); color: var(--text-1); }
.btn-ghost:hover, .btn.ghost:hover { color: #fff; border-color: var(--text-2); }
.btn-danger, .btn.danger { background: transparent; border: 1px solid rgba(237, 65, 99, .5); color: var(--red); }
.btn-danger:hover, .btn.danger:hover { border-color: var(--red); background: transparent; }
.btn:disabled, .btn.disabled, .btn[disabled] { opacity: .5; pointer-events: none; cursor: not-allowed; }
.btn-block, .btn.block { width: 100%; }
.btn-ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.is-cash, .roll-btn.is-cash { background: var(--green); color: var(--bg-0); }

/* =========================================================
   INPUTS
   ========================================================= */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-family: inherit; }
.bet-input input, .g-field input, .kv input, .field input, .field select, .wd-actions input, .aff-link-row input, .gate-card input,
.input-max input, .support-input input[type="text"], .chat-input input, .home-search input, .g-select, .kv select {
    background: var(--bg-2); border: 2px solid transparent; border-radius: var(--r-sm); color: #fff; font-family: inherit; font-size: 14px; font-weight: 500;
    font-variant-numeric: tabular-nums; outline: none; transition: border-color .15s; height: 44px; box-shadow: none;
}
.bet-input input:focus, .g-field input:focus, .kv input:focus, .field input:focus, .field select:focus, .wd-actions input:focus, .aff-link-row input:focus, .gate-card input:focus,
.input-max input:focus, .support-input input[type="text"]:focus, .chat-input input:focus, .home-search input:focus, .g-select:focus { border-color: var(--ice); }
.bet-input input::placeholder, .g-field input::placeholder, .kv input::placeholder, .field input::placeholder, .home-search input::placeholder { color: var(--text-2); }
.bet-input input, .g-field input { font-size: 15px; font-weight: 600; }
.bet-input .qb button, .input-max button, .qbtn { background: var(--bg-3); border: 0; color: var(--text-1); font-size: 11px; font-weight: 600; border-radius: var(--r-sm); cursor: pointer; font-family: inherit; }
.bet-input .qb button:hover, .input-max button:hover, .qbtn:hover { color: #fff; background: var(--bg-3); border: 0; }
.bet-input .qb { top: 6px; right: 6px; } .bet-input .qb button { height: 32px; min-width: 38px; }
.bet-input span.cur { color: var(--text-1); font-family: inherit; font-weight: 600; }
.wlabel, .field label, .kv label, .dep-field label, .field-label { font-family: var(--font-main); font-size: 12px; font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.dice-err, .field-err, .g-err { color: var(--red); font-size: 12px; font-weight: 500; }
.checkbox input, .lcr-check input { accent-color: var(--green); }
input[type=range].rng { background: var(--bg-2); }
input[type=range].rng::-webkit-slider-thumb { background: #fff; border: 4px solid var(--bg-0); box-shadow: 0 0 0 1px var(--bg-3); }
.home-search input { height: 44px; border-radius: var(--r-sm); font-size: 14px; }

/* =========================================================
   TABS  (segmented control)
   ========================================================= */
.tabs, .acc-tabs, .wtabs, .admin-tabs-bar { display: inline-flex; background: var(--bg-1); border-radius: var(--r-md); padding: 4px; gap: 4px; border: 0; }
.tab, .acc-tab, .wtab { height: 40px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; font-weight: 600; font-size: 13px; color: var(--text-1); cursor: pointer; border: 0; background: none; font-family: inherit; transition: background .15s, color .15s; }
.tab:hover:not(.active), .acc-tab:hover:not(.active), .wtab:hover:not(.active) { color: #fff; background: none; }
.tab.active, .acc-tab.active, .wtab.active { background: var(--bg-3); color: #fff; box-shadow: none; border: 0; }
.panel .tabs, .feed-panel .tabs { background: var(--bg-0); }

/* =========================================================
   SURFACES — cards / panels / modals
   ========================================================= */
.panel, .dice-panel, .dice-stage, .stat-card, .acc-card, .card, .chart-card, .faq, .promo-card, .vip-card, .account-card, .legal-card, .gate-card { background: var(--bg-1); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.panel { padding: 24px; }
.rail-title { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 14px; }
.rail-title h3 { font-size: 16px; font-weight: 700; }
.see-all { font-size: 13px; color: var(--ice); font-weight: 500; cursor: pointer; background: none; border: 0; font-family: inherit; }
.see-all:hover { text-decoration: underline; }

.modal-overlay { background: rgba(15, 33, 46, .75); }
.modal { background: var(--bg-1); border: 0; border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.modal h3, .modal h2 { font-size: 18px; font-weight: 700; }

/* ---------- chips / badges ---------- */
.chip { display: inline-block; padding: 4px 8px; border-radius: var(--r-sm); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip.neutral { background: var(--bg-2); color: var(--text-1); }
.chip.ice { background: var(--ice-bg); color: var(--ice); }
.chip.green { background: rgba(0, 231, 1, .12); color: var(--green); }
.chip.gold { background: rgba(255, 200, 0, .12); color: var(--gold); }
.chip.live { background: transparent; border: 1px solid var(--ice-border); color: var(--ice); display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }
.chip.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ice); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------- toasts ---------- */
.toast-stack { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 32px)); z-index: 900; pointer-events: none; }
.toast { background: var(--bg-1); border-radius: var(--r-md); padding: 14px 16px; font-size: 13px; font-weight: 500; color: var(--text-1); box-shadow: var(--shadow-1); border-left: 3px solid var(--green); line-height: 1.45; }
.toast.err { border-left-color: var(--red); } .toast.info { border-left-color: var(--ice); }
.toast-stack .toast { pointer-events: auto; cursor: pointer; opacity: 0; transform: translateX(16px); transition: opacity .2s ease-out, transform .2s ease-out; }
.toast-stack .toast.show { opacity: 1; transform: none; }

/* ---------- notification panel ---------- */
.notif-panel { position: fixed; top: 66px; right: 16px; width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 90px)); background: var(--bg-1); border: 1px solid var(--bg-2); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); z-index: 600; display: none; flex-direction: column; overflow: hidden; }
.notif-panel.open { display: flex; }
body.has-maint-bar .notif-panel { top: 94px; }
.np-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--bg-2); }
.np-head h4 { font-size: 16px; font-weight: 700; }
.np-list { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.np-item { background: var(--bg-2); padding: 12px 14px; }
.np-item .np-text { color: var(--text-1); }
.np-item.unread .np-text { color: #fff; }
.np-time { margin-top: 4px; font-size: 11px; color: var(--text-2); font-weight: 500; }
.np-empty { padding: 28px 12px; text-align: center; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.search-pop { position: fixed; top: 66px; right: 16px; width: min(360px, calc(100vw - 24px)); background: var(--bg-1); border: 1px solid var(--bg-2); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); z-index: 600; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.search-pop .input-box { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 2px solid transparent; border-radius: var(--r-sm); height: 44px; padding: 0 12px; color: var(--text-1); transition: border-color .15s; }
.search-pop .input-box:focus-within { border-color: var(--ice); }
.search-pop input { background: none; border: 0; outline: 0; color: #fff; font: inherit; font-weight: 500; width: 100%; }
.sp-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.sp-item { padding: 9px 10px; border-radius: var(--r-md); color: var(--text-1); font-weight: 500; }
.sp-item:hover { background: var(--bg-2); color: #fff; }

/* =========================================================
   BETS FEED  (tabs + live table)
   ========================================================= */
.feed-panel { padding: 20px; }
.feed-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.feed-note { font-size: 12px; color: var(--text-2); margin: -4px 0 12px; }
.feed-scroll { overflow-x: auto; }
.bet-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bet-table th { text-align: left; color: var(--text-2); font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--bg-2); white-space: nowrap; }
.bet-table td { padding: 10px 12px; height: 44px; color: var(--text-1); font-weight: 500; white-space: nowrap; }
.bet-table .r { text-align: right; }
.bet-table tbody tr { transition: background .15s; }
.bet-table tbody tr:hover { background: var(--bg-1); }
.feed-panel .bet-table tbody tr:hover { background: var(--bg-2); }
.bet-table .t-num { font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }
.bet-table .win { color: var(--green); } .bet-table .loss { color: var(--text-2); }
.bet-table td.empty { text-align: center; color: var(--text-2); padding: 28px 0; }
.bet-table .fg { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.bet-table .fg svg { color: var(--text-2); }
.bet-table tr.me .fu { color: var(--ice); font-weight: 600; }
.bet-table tr.fresh { animation: feedIn .5s ease-out; }
@keyframes feedIn { from { background: var(--ice-bg); transform: translateY(-4px); opacity: .4; } to { background: transparent; transform: none; opacity: 1; } }
@media (max-width: 640px) { .feed-panel { padding: 14px; } .bet-table .ft { display: none; } }

/* =========================================================
   ORIGINALS cards (home)
   ========================================================= */
.lobby { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.orig, .game-card { background: var(--bg-1); border-radius: var(--r-md); padding: 18px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: background .15s; box-shadow: var(--shadow-1); border: 0; }
.orig:hover, .game-card:hover { background: var(--bg-2); transform: none; }
.orig-glyph { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--bg-2); display: flex; align-items: center; justify-content: center; color: var(--ice); }
.orig:hover .orig-glyph { color: #fff; background: var(--bg-3); }
.orig-name { font-weight: 700; font-size: 14px; }
.orig-stat { font-size: 12px; color: var(--text-2); }
.game-card.hide { display: none; }

/* ---------- legacy hero chip reset (old floating chips are gone) ---------- */
.chip { position: static; left: auto; right: auto; top: auto; bottom: auto; width: auto; height: auto; animation: none; box-shadow: none; display: inline-block; border: 0; background: none; line-height: 1.3; }
.chip.live { border: 1px solid var(--ice-border); display: inline-flex; }
.chip.neutral { background: var(--bg-2); } .chip.ice { background: var(--ice-bg); } .chip.green { background: rgba(0, 231, 1, .12); } .chip.gold { background: rgba(255, 200, 0, .12); }

.feed { margin-top: 24px; }
.home-top + section .feed, section > .feed { margin-top: 0; }
.chips { gap: 6px; margin-top: 18px; }
.chips span { font-family: inherit; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: var(--r-sm); border: 0; background: var(--bg-2); color: var(--text-1); font-variant-numeric: tabular-nums; }
.chips span.w { background: rgba(0, 231, 1, .12); color: var(--green); }
.chips span.l { background: rgba(237, 65, 99, .12); color: var(--red); }

/* =========================================================
   SHARED COMPONENT RESTYLE (account, affiliate, modals, footer, chat, game stages)
   ========================================================= */
.stat-card { border: 0; background: var(--bg-1); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 18px 20px; }
.stat-card::before { display: none; }
.stat-card .sc-label { font-family: inherit; font-size: 12px; font-weight: 500; color: var(--text-2); letter-spacing: .06em; }
.stat-card .sc-value { font-family: inherit; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.account-box { border: 0; background: var(--bg-1); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.account-row { border-bottom: 1px solid var(--bg-2); }
.account-key { font-size: 12px; font-weight: 500; color: var(--text-2); letter-spacing: .06em; }
.account-val { font-weight: 600; }
.acc-tabs { margin-bottom: 20px; flex-wrap: wrap; }

.modal { padding: 24px; width: min(100%, 420px); }
.modal-close, .modal .x { color: var(--text-1); }
.modal-close:hover { color: #fff; }
.site-footer { border-top: 1px solid var(--bg-2); }
.sf-col h5 { font-family: inherit; font-size: 11px; font-weight: 600; color: var(--text-2); letter-spacing: .08em; text-transform: uppercase; }
.sf-col a, .sf-col button { color: var(--text-1); font-weight: 500; }
.sf-col a:hover, .sf-col button:hover { color: #fff; }
.sf-bottom, .sf-brand p { color: var(--text-2); }
.wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
.wm-dot { color: var(--ice); }
.tb-name { display: inline-block; }

.cookie-note { background: var(--bg-1); border: 1px solid var(--bg-2); border-left: 3px solid var(--ice); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.welcome-block .welcome-hi { font-size: 20px; font-weight: 700; }
.welcome-name { color: var(--ice); }
.vip-bubble { background: var(--bg-1); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-1); max-width: 420px; }
.vip-track { background: var(--bg-2); border-radius: 999px; }
.vip-fill { background: var(--ice); }
.guest-card { background: var(--bg-1); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.guest-card h2 { font-size: 20px; font-weight: 700; }
.guest-card p { color: var(--text-1); font-size: 13px; }
.home-top { padding: 0 0 24px; }

/* game stages */
.dice-wrap { gap: 16px; }
.dice-panel { padding: 20px; gap: 16px; }
.dice-stage { padding: 20px; }
.stage-top { font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: .06em; text-transform: uppercase; }
.stage-top a { color: var(--ice); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 13px; }
.stage-top a:hover { text-decoration: underline; }
.stage-note.win, .big-mult.win, .roll-num.win, .cr-sub.win { color: var(--green); }
.stage-note.loss, .big-mult.loss, .roll-num.loss, .cr-sub.loss { color: var(--red); }
.stage-note { font-weight: 500; }
.mode-switch, .seg { background: var(--bg-0); border-radius: var(--r-md); padding: 4px; border: 0; }
.mode-switch button, .seg button { border-radius: 6px; font-weight: 600; font-size: 13px; color: var(--text-1); }
.mode-switch button.active, .seg button.active { background: var(--bg-3); color: #fff; }
.sbox, .mini-stat, .pbox { background: var(--bg-2); border-radius: var(--r-sm); border: 0; }
.track { background: var(--bg-2); } .track .zone { background: var(--ice); }
.track .mark { background: #fff; }
.roll-btn { width: 100%; }
.sfx-btn { background: none; border: 0; color: var(--text-1); border-radius: var(--r-md); }
.sfx-btn:hover { background: var(--bg-2); color: #fff; }
.fine { color: var(--text-2); font-size: 12px; }
.fine a { color: var(--ice); }

/* mines */
.mine-tile { background: var(--bg-2); border: 0; border-radius: var(--r-md); transition: background .15s, transform .1s; box-shadow: none; }
.mine-tile:not(:disabled):hover { background: var(--bg-3); transform: none; }
.mine-tile.gem, .mine-tile.open { background: var(--bg-0); box-shadow: inset 0 0 0 2px var(--green); color: var(--green); }
.mine-tile.bomb { background: rgba(237, 65, 99, .15); box-shadow: inset 0 0 0 2px var(--red); color: var(--red); }
.mine-tile.ghost { background: var(--bg-0); opacity: .6; }

/* crash */
.cr-chart, .cr-chart .crash-canvas { background: var(--bg-0); }
.cr-chart { border: 1px solid var(--bg-2); border-radius: var(--r-md); }
.cr-players { background: rgba(26, 44, 56, .94); border: 1px solid var(--bg-2); border-radius: var(--r-md); }
.cr-players:empty::before { font-family: inherit; font-weight: 500; letter-spacing: .04em; color: var(--text-2); }
.cr-p { background: var(--bg-2); border-radius: var(--r-sm); }
.cr-p.me { border: 1px solid var(--ice); }
.cr-p .av { background: var(--bg-0); border: 0; }
.cr-p .am { font-family: inherit; }
.cr-p .st { font-family: inherit; font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-bar { background: var(--bg-2); } .cr-bar i { background: var(--ice); }
.cr-status.live .dot { background: var(--green); }
.cr-center .big-mult { font-weight: 700; font-family: inherit; }
.cr-sub { font-family: inherit; font-weight: 600; letter-spacing: .08em; }

/* blackjack */
.bj-felt { background: var(--bg-0); border: 1px solid var(--bg-2); border-radius: var(--r-md); }
.dealer-svg [fill="#1C1C21"] { fill: var(--bg-2); }
.dealer-svg [stroke="#2c2c33"] { stroke: var(--bg-3); }
.dealer-svg [fill="#0C0C0E"] { fill: var(--bg-0); }
.dealer-svg [stroke="#0C0C0E"] { stroke: var(--bg-0); }
.dealer-svg [fill="#d7d7dc"], .dealer-svg [fill="#e6e6ea"] { fill: #c9d2e6; }
.dealer-svg [stroke="#3a3a42"] { stroke: var(--bg-3); }
.pcard { background: #fff; color: #0F212E; border-radius: var(--r-md); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); font-family: inherit; }
.pcard.back { background-color: var(--bg-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .4), 0 0 0 1px var(--bg-3); }
.bj-total { background: var(--bg-2); border: 0; font-family: inherit; font-weight: 700; }
.bj-total.good { background: rgba(0, 231, 1, .15); color: var(--green); }
.bj-total.bust { background: rgba(237, 65, 99, .15); color: var(--red); }
.bj-label { font-family: inherit; font-weight: 600; letter-spacing: .06em; color: var(--text-2); }
.bj-banner span { background: var(--bg-1); border-radius: var(--r-md); font-family: inherit; font-weight: 700; border: 0; border-left: 3px solid var(--bg-3); }
.bj-banner .win { color: var(--green); border-left-color: var(--green); } .bj-banner .loss { color: var(--red); border-left-color: var(--red); } .bj-banner .push { color: var(--text-1); }
.bj-chip { background: var(--bg-2); border: 2px dashed var(--ice); font-weight: 700; }
.bj-shoe i { background: var(--bg-2); border-color: var(--bg-3); }
.bj-rules { color: var(--text-1); border-top: 1px solid var(--bg-2); }
.arc-text { font-family: inherit; fill: rgba(177, 186, 211, .22); }
kbd { background: var(--bg-3); border: 0; color: var(--text-1); border-radius: 4px; font-family: inherit; font-weight: 700; }

/* splash + maintenance on the navy ladder */
.splash { background: var(--bg-0); }
.maint-body, .maint-body .maint { background: var(--bg-0); }
.maint-card { background: var(--bg-1); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.maint-bar { background: var(--ice); color: var(--bg-0); }

/* wallet popup tabs */
.wallet-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--bg-0); border: 0; border-radius: var(--r-md); }
.wtab { height: 40px; border-radius: 6px; border: 0; background: none; color: var(--text-1); font-weight: 600; }
.wtab.active { background: var(--bg-3); color: #fff; border: 0; }
.wtab.active::before { display: none; }
.wtab:hover:not(.active) { background: none; color: #fff; }
.dd-btn, .dd-menu { background: var(--bg-2); border: 2px solid transparent; border-radius: var(--r-sm); }
.dd-btn:hover, .dd.open .dd-btn { border-color: var(--ice); }
.dd-menu { border-color: var(--bg-3); box-shadow: var(--shadow-1); }
.dd-opt:hover { background: var(--bg-3); }

@media (max-width: 700px) {
    .page-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .lobby { grid-template-columns: repeat(2, 1fr); }
    .orig, .game-card { padding: 14px; }
    .dice-panel, .dice-stage { padding: 16px; }
    .toast-stack { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

.main-inner > section { margin-top: 32px; }
.main-inner > section.home-top, .main-inner > section:first-child { margin-top: 0; }
.home-search { max-width: 520px; display: block; position: relative; }
.home-search svg { color: var(--text-2); }

/* =========================================================
   v3 — logo, squarish balance, chat dock, mobile topbar
   ========================================================= */
.tb-logo { display: inline-flex; align-items: center; gap: 10px; height: 36px; line-height: 1; flex: none; }
.tb-logo .tb-mark { display: block; flex: none; border-radius: 8px; }
.tb-logo .tb-name { display: inline-block; line-height: 1; font-size: 19px; font-weight: 700; letter-spacing: -.01em; padding-top: 1px; }
.tb-logo .tb-bet { margin-left: 1px; color: var(--ice); font-weight: 700; }
.tb-logo:hover .tb-mark { box-shadow: 0 0 0 2px var(--ice-border); }

.wallet-pill { border-radius: 8px; background: var(--bg-0); border: 1px solid var(--bg-2); padding: 0 10px 0 6px; gap: 10px; height: 38px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.wallet-pill:hover { background: var(--bg-0); border-color: var(--bg-3); }
.wallet-pill .coin-chip, .wallet-pill .usd-chip { width: 24px; height: 24px; border-radius: 6px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.wallet-pill .wc-amt { font-weight: 700; font-size: 14px; line-height: 1; }
.wallet-pill .wc-usd { gap: 9px; }
.tb-wallet { display: flex; align-items: center; gap: 8px; }
.btn.sm.wallet-cta { height: 38px; border-radius: 8px; }

/* chat docked on the side — topbar content slides to the middle of what remains */
@media (min-width: 1000px) {
    body.chat-open .topbar { right: var(--chat-w); }
    body.chat-open .main { margin-right: var(--chat-w); }
}
.livechat { background: var(--bg-1); border-left: 1px solid var(--bg-2); box-shadow: none; }
.lc-head { background: var(--bg-1); border-bottom: 1px solid var(--bg-2); min-height: var(--tb-h); padding: 0 14px 0 16px; align-items: center; }
.lc-title { font-family: var(--font-main); font-weight: 700; font-size: 15px; }
.lc-input { border-top: 1px solid var(--bg-2); background: var(--bg-1); align-items: center; }
.lc-input input { border-radius: 8px; background: var(--bg-0); border: 1px solid var(--bg-2); height: 40px; }
.lc-input button { border-radius: 8px; background: var(--green); color: var(--bg-0); display: inline-flex; align-items: center; justify-content: center; }
.livechat-fab { border-radius: 12px; width: 48px; height: 48px; background: var(--bg-1); border: 1px solid var(--bg-2); }
.lc-rules { text-align: center; }
@media (max-width: 999px) { .livechat { width: min(100vw, 360px); } }
@media (max-width: 480px) { .livechat { width: 100vw; } }

@media (max-width: 860px) {
    .tb-logo .tb-name { display: none; }
    .tb-logo { gap: 0; }
    html.is-authed .topbar .tb-wallet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
    html.is-authed .tb-right { margin-left: auto; }
    .wallet-pill { height: 38px; max-width: calc(100vw - 190px); }
    .wallet-pill .wc-amt { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 380px) { .wallet-pill .wc-amt { font-size: 13px; } .wallet-pill { padding-right: 8px; gap: 6px; } }

/* ---- text/alignment polish ---- */
.acc-cta { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.stat-card .sc-label { min-height: 2.6em; display: flex; align-items: flex-start; line-height: 1.3; }
.page-head > div { min-width: 0; }
.btn, .tab, .chip, .nav-item, .pill { white-space: nowrap; }
.btn { text-align: center; line-height: 1; }
h1, h2, h3, p, li, td, th { overflow-wrap: anywhere; }
.promo-card ul li, .promo-list li { display: block; text-align: left; }
@media (max-width: 700px) {
    .acc-hero { flex-wrap: wrap; }
    .acc-cta { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .acc-cta .btn { width: 100%; }
    .acc-tabs { display: flex; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .acc-tabs::-webkit-scrollbar { display: none; }
    .acc-tabs > * { flex: none; }
    .stat-card .sc-label { min-height: 0; }
    .livechat-fab { right: 14px; bottom: 14px; }
}
.promo li { display: block; position: relative; padding-left: 16px; text-align: left; line-height: 1.5; }
.promo li::before { position: absolute; left: 0; top: 8px; margin: 0; }
.promo li strong { color: #fff; font-weight: 600; }
.btn.btn-danger.armed, .btn.danger.armed { background: var(--red); color: #fff; border-color: var(--red); }
.user-row .ur-actions { flex-wrap: wrap; }

/* VIP ladder + hero */
.vip-step { border: 0; background: var(--bg-1); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 16px 12px; align-items: center; text-align: center; gap: 4px; }
.vip-step .vs-top { flex-direction: column; gap: 6px; }
.vip-step .vs-lvl, .vip-step .vs-req { font-family: var(--font-main); letter-spacing: .06em; font-size: 11px; color: var(--text-2); }
.vip-step .vs-name { font-family: var(--font-main); font-weight: 700; font-size: 15px; margin-top: 2px; }
.vip-step .vs-req { text-transform: none; letter-spacing: 0; color: var(--text-1); }
.vip-step .vs-rew { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--green); background: rgba(0,231,1,.08); padding: 3px 8px; border-radius: 4px; }
.vip-step.locked { opacity: .7; }
.vip-step.current { box-shadow: 0 0 0 1px var(--ice), var(--shadow-1); }
.vip-step.current::after { top: 10px; right: 10px; font-family: var(--font-main); font-weight: 700; }
.vip-hero { background: var(--bg-1); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.vip-hero .vh-ico { border-radius: 12px; border: 0; background: var(--bg-0); }
.vip-hero h3 { font-family: var(--font-main); font-weight: 700; }

/* ---- partner games ---- */
button.pg-card { font-family: inherit; color: inherit; text-align: left; width: 100%; }
.pg-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.pg-title { font-weight: 700; font-size: 18px; flex: 1; min-width: 0; }
.pg-bal { color: var(--text-1); font-size: 13px; background: var(--bg-1); border-radius: 8px; padding: 8px 12px; }
.pg-bal b { color: #fff; margin-left: 6px; }
.pg-frame { position: relative; background: var(--bg-1); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); height: min(82vh, 780px); min-height: 520px; }
.pg-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg-0); }
.pg-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--text-1); z-index: 1; pointer-events: none; }
.pg-loading[hidden] { display: none; }
@media (max-width: 700px) { .pg-frame { height: calc(100vh - 150px); min-height: 480px; border-radius: 0; margin: 0 -12px; } }

/* ---- slots ---- */
.sl-tools { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sl-search { flex: 1; min-width: 220px; }
.sl-tools .g-select { min-width: 180px; height: 44px; }
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sl-card { background: var(--bg-1); border: 0; border-radius: var(--r-md); padding: 8px 8px 12px; text-align: left; cursor: pointer; color: inherit; font-family: inherit; box-shadow: var(--shadow-1); transition: background .15s; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sl-card:hover { background: var(--bg-2); }
.sl-thumb { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--bg-0); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.sl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-ph { font-size: 28px; font-weight: 700; color: var(--text-2); }
.sl-name { font-weight: 600; font-size: 13px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-prov { font-size: 12px; color: var(--text-2); padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; }
@media (max-width: 700px) { .sl-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .sl-tools .g-select { width: 100%; } }
.sl-tools { align-items: center; }
.sl-tools .home-search { margin: 0; flex: 1; max-width: 520px; }
.sl-tools .g-select { width: auto; min-width: 200px; flex: none; }

/* slots: image-first tiles (portrait art, "N playing" underneath) */
.sl-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 18px 14px; }
a.sl-card, .sl-card { background: none; box-shadow: none; padding: 0; gap: 8px; text-decoration: none; }
.sl-card:hover { background: none; }
.sl-thumb { aspect-ratio: 1 / 1.08; border-radius: 10px; margin: 0; background: var(--bg-1); position: relative; transition: transform .15s ease, box-shadow .15s ease; }
.sl-card:hover .sl-thumb { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.sl-thumb .sl-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 8px; font-size: 12px; font-weight: 700; text-align: center; background: linear-gradient(transparent, rgba(15,33,46,.92)); }
.sl-live { display: flex; align-items: center; gap: 6px; padding: 0 2px; font-size: 12px; font-weight: 600; color: var(--text-1); min-width: 0; }
.sl-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.sl-live.idle { color: var(--text-2); font-weight: 500; }
.sl-live.idle i { display: none; }
.sl-live span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-name, .sl-prov { display: none; }
.sp-slot { display: flex; align-items: center; gap: 10px; }
.sp-slot img, .sp-slot .sp-ph { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; background: var(--bg-0); flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-2); }
.sp-slot span { min-width: 0; display: flex; flex-direction: column; }
.sp-slot b { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-slot small { color: var(--text-2); font-size: 12px; }
.sp-head { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
#slotRes { margin-top: 22px; }
#slotRes h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
@media (max-width: 700px) { .sl-grid { gap: 14px 10px; } }

.maint-bar.site-announce.warn { background: #ffb84d; } .maint-bar.site-announce.success { background: var(--win, #30d158); }


/* ---- game pictures (gameicons/<game>.png) — shown instead of the line icon when the file exists ---- */
.orig-glyph .gi { display: none; }
.orig-glyph.has-img { width: 100%; height: auto; aspect-ratio: 1 / 1; background: transparent; padding: 0; overflow: hidden; border-radius: var(--r-md); }
.orig-glyph.has-img .gi { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }
.orig-glyph.has-img svg { display: none; }
.orig.has-gi, .game-card.has-gi { padding: 10px 10px 14px; }
#lobby .game-card { align-self: start; }

/* fullscreen game frame (native fullscreen, or a fixed overlay where the browser has none, e.g. iPhone) */
.pg-frame:fullscreen { height: 100vh; width: 100vw; border-radius: 0; margin: 0; }
.pg-frame:-webkit-full-screen { height: 100vh; width: 100vw; border-radius: 0; margin: 0; }
.pg-frame.pg-full { position: fixed; inset: 0; z-index: 9999; height: 100dvh; min-height: 0; width: 100vw; border-radius: 0; margin: 0; }
html.pg-lock, html.pg-lock body { overflow: hidden; }
.pg-x { display: none; position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.pg-frame.pg-full .pg-x { display: block; }

/* ---- generic skeleton / shimmer placeholder (.skel) ---- */
.skel { position: relative; overflow: hidden; background: var(--bg-2, #2f4553); border-radius: 8px; color: transparent !important; pointer-events: none; user-select: none; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent); animation: skelShimmer 1.3s ease-in-out infinite; }
.skel.skel-line { display: block; height: 12px; border-radius: 6px; }
@keyframes skelShimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; opacity: .5; transform: none; } }