:root{
    --bg:#000000;
    --bg-1:#0a0a0a;
    --bg-2:#131313;
    --bg-3:#1c1c1c;
    --bg-4:#252525;
    --line:rgba(255,255,255,0.06);
    --line-2:rgba(255,255,255,0.1);
    --line-3:rgba(255,255,255,0.16);
    --text:#f5f5f5;
    --text-2:#c8c8c8;
    --text-dim:#7a7a7a;
    --text-dim-2:#505050;
    --green:#a6ff5e;
    --green-2:#7cff2e;
    --green-dark:#4ba825;
    --green-soft:rgba(166,255,94,0.08);
    --red:#ff5e7a;
    --gold:#ffc85e;
    --blue:#5eb5ff;
    --purple:#b85eff;
    --pink:#ff7eb0;
    --sidebar-w:264px;
    --chat-w:320px;
    --header-h:68px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    background:var(--bg);color:var(--text);
    font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;
    overflow-x:hidden;-webkit-overflow-scrolling:touch;
  }
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  input{font-family:inherit}
  /* Perfect SVG alignment — all inline SVGs behave as icons */
  svg{display:block;flex-shrink:0}
  button,.side-link,.cat,.live-tab,.tile-badge,.row-title h2,.slide-tag,.wallet-bal,.wallet-dep{line-height:1}

  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:4px}
  ::-webkit-scrollbar-thumb:hover{background:var(--bg-4)}

  /* Hide scrollbar on horizontal rows */
  .no-scrollbar::-webkit-scrollbar{display:none}
  .no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

  /* ========== APP LAYOUT ========== */
  .app{
    display:grid;
    grid-template-columns:var(--sidebar-w) 1fr var(--chat-w);
    min-height:100vh;
  }
  /* When chat is hidden (anon, or logged toggling on subpages), give 2 columns */
  .app.chat-hidden{
    grid-template-columns:var(--sidebar-w) 1fr !important;
  }

  /* ========== SIDEBAR ========== */
  .sidebar{
    background:var(--bg-1);
    border-right:1px solid var(--line);
    position:sticky;top:0;height:100vh;
    display:flex;flex-direction:column;
    z-index:30;
  }
  .sidebar-head{
    padding:20px 20px 18px;border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;
    height:var(--header-h);
  }
  .logo{display:flex;align-items:center;font-family:'Unbounded',sans-serif;font-weight:800;font-size:24px;letter-spacing:-0.055em;line-height:1}
  .logo .brand{
    color:var(--green);
    letter-spacing:-0.05em;
  }
  .sidebar-close{display:none;width:32px;height:32px;border-radius:8px;color:var(--text-dim)}
  .sidebar-close svg{width:18px;height:18px}

  .sidebar-scroll{flex:1;overflow-y:auto;padding:18px 14px 40px}

  .side-toggle{
    display:flex;background:var(--bg-2);border-radius:10px;padding:4px;margin-bottom:22px;
    border:1px solid var(--line);
  }
  .side-toggle button{
    flex:1;padding:10px 8px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text-dim);
    display:flex;align-items:center;justify-content:center;gap:7px;transition:.2s;
  }
  .side-toggle button svg{width:15px;height:15px}
  .side-toggle button.active{background:var(--bg-4);color:var(--text);box-shadow:0 1px 0 rgba(255,255,255,0.05)}

  .side-section{margin-bottom:22px}
  .side-label{
    font-size:10.5px;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim-2);
    font-weight:700;padding:0 12px;margin-bottom:6px;
  }
  .side-link{
    display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;
    font-size:13.5px;font-weight:500;color:var(--text-dim);transition:.15s;cursor:pointer;
    position:relative;line-height:1;
  }
  .side-link svg{width:18px;height:18px;flex-shrink:0;transition:.15s}
  .side-link .count{
    margin-left:auto;font-size:10.5px;color:var(--text-dim-2);
    font-family:'JetBrains Mono',monospace;font-weight:600;line-height:1;
    padding:3px 7px;border-radius:5px;background:var(--bg-2);
  }
  .side-link:hover{background:var(--bg-2);color:var(--text)}
  .side-link:hover svg{color:var(--green)}
  .side-link.active{background:var(--bg-2);color:var(--text)}
  .side-link.active svg{color:var(--green)}
  .side-link.active::before{
    content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
    width:3px;height:20px;background:var(--green);border-radius:0 3px 3px 0;
  }
  .side-link.active .count{color:var(--green)}

  .side-promo{
    background:linear-gradient(155deg,rgba(166,255,94,0.14),rgba(166,255,94,0.02) 60%);
    border:1px solid rgba(166,255,94,0.22);border-radius:14px;padding:18px;margin:16px 2px 4px;
    position:relative;overflow:hidden;
  }
  .side-promo::after{
    content:"";position:absolute;top:-30px;right:-30px;width:100px;height:100px;
    background:radial-gradient(circle,var(--green),transparent 60%);opacity:.25;filter:blur(20px);
  }
  .side-promo .ico{
    width:36px;height:36px;border-radius:9px;background:var(--green);color:#000;
    display:grid;place-items:center;margin-bottom:12px;position:relative;
  }
  .side-promo .ico svg{width:19px;height:19px}
  .side-promo h4{font-size:13.5px;font-weight:800;margin-bottom:4px;position:relative}
  .side-promo p{font-size:11.5px;color:var(--text-dim);line-height:1.55;margin-bottom:12px;position:relative}
  .side-promo button{
    background:var(--green);color:#000;font-size:11px;font-weight:800;padding:9px 14px;border-radius:8px;
    width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
    letter-spacing:0.04em;position:relative;transition:.2s;
  }
  .side-promo button:hover{background:#fff}
  .side-promo button svg{width:12px;height:12px}

  /* ========== MAIN ========== */
  .main{min-width:0;display:flex;flex-direction:column}

  .header{
    position:sticky;top:0;z-index:25;
    background:rgba(0,0,0,0.88);backdrop-filter:blur(24px);
    border-bottom:1px solid var(--line);
    height:var(--header-h);
    padding:0 28px;display:flex;align-items:center;gap:14px;
  }
  .menu-btn{display:none;width:40px;height:40px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);color:var(--text);align-items:center;justify-content:center;flex-shrink:0}
  .menu-btn svg{width:18px;height:18px}
  .search{flex:1;max-width:440px;position:relative;height:40px}
  .search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-dim);pointer-events:none}
  .search input{
    width:100%;height:40px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
    padding:0 16px 0 42px;color:var(--text);font-size:13.5px;outline:none;transition:.2s;line-height:1;
  }
  .search input::placeholder{color:var(--text-dim)}
  .search input:focus{border-color:var(--line-3)}

  .header-right{display:flex;align-items:center;gap:10px;margin-left:auto}
  .wallet{
    display:flex;align-items:center;gap:8px;position:relative;height:40px;
  }
  .wallet-bal{
    display:inline-flex;align-items:center;gap:9px;padding:0 13px;
    font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;cursor:pointer;
    transition:background .15s, border-color .15s;letter-spacing:-0.01em;line-height:1;
    background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);
    height:40px;border-radius:10px;
  }
  .wallet-bal:hover{border-color:var(--line-3)}
  .coin-img{
    width:19px;height:19px;border-radius:50%;flex-shrink:0;object-fit:contain;
    background:transparent;
  }
  .coin-amount{display:inline-block;min-width:42px;text-align:left;white-space:nowrap}
  .wallet-bal .chev{
    width:11px;height:11px;color:var(--text-dim);flex-shrink:0;margin-left:1px;
    transition:transform .25s cubic-bezier(.4,0,.2,1);
  }
  .wallet-bal.open .chev{transform:rotate(180deg);color:var(--green)}
  .wallet-dep{
    background:linear-gradient(135deg,var(--green),var(--green-2));
    color:#000;padding:0 16px;font-size:13px;font-weight:800;
    display:inline-flex;align-items:center;gap:7px;transition:transform .2s, filter .2s;letter-spacing:0.02em;
    position:relative;line-height:1;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);
    height:40px;border-radius:10px;white-space:nowrap;
  }
  .wallet-dep:hover{transform:translateY(-1px);filter:brightness(1.08)}
  .wallet-dep:active{transform:translateY(0)}
  .wallet-dep svg{width:14px;height:14px;stroke-width:3;flex-shrink:0}

  /* Wallet dropdown */
  .wallet-drop{
    position:absolute;top:calc(100% + 10px);left:0;right:auto;min-width:340px;
    background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;
    padding:10px;box-shadow:0 24px 60px -12px rgba(0,0,0,0.9),0 0 0 1px rgba(255,255,255,0.02);
    opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);
    transform-origin:top left;transition:.22s cubic-bezier(.4,0,.2,1);
    z-index:60;
  }
  .wallet.open .wallet-drop{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
  .wd-title{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);
    font-weight:700;padding:10px 6px 10px 10px;line-height:1;
  }
  .wd-title > span{flex-shrink:0;white-space:nowrap}
  .wd-list{display:flex;flex-direction:column;gap:2px;max-height:360px;overflow-y:auto}
  .wd-row{
    display:flex;align-items:center;gap:12px;padding:11px 10px;
    border-radius:9px;cursor:pointer;transition:.15s;
    background:none;border:none;color:inherit;width:100%;text-align:left;
  }
  .wd-row:hover{background:var(--bg-3)}
  .wd-row img{width:28px;height:28px;border-radius:50%;object-fit:contain;flex-shrink:0}
  .wd-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .wd-sym{font-size:13px;font-weight:800;line-height:1;letter-spacing:-0.01em}
  .wd-name{font-size:10.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;line-height:1}
  .wd-amt{text-align:right;display:flex;flex-direction:column;gap:3px}
  .wd-val{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;line-height:1;letter-spacing:-0.01em}
  .wd-usd{font-size:10.5px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;line-height:1}
  .wd-row.active{background:var(--bg-3);box-shadow:inset 0 0 0 1px rgba(166,255,94,0.25)}
  .wd-row.active .wd-val{color:var(--green)}

  .icon-btn{
    width:40px;height:40px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);
    display:inline-flex;align-items:center;justify-content:center;color:var(--text-dim);
    transition:.2s;position:relative;flex-shrink:0;
  }
  .icon-btn:hover{color:var(--text);border-color:var(--line-2);background:var(--bg-3)}
  .icon-btn svg{width:17px;height:17px;display:block}
  .icon-btn .dot-badge{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px var(--bg-2)}
  .avatar{
    width:40px;height:40px;border-radius:10px;
    background:linear-gradient(135deg,var(--green),var(--green-2));
    display:grid;place-items:center;color:#000;font-weight:800;font-size:14px;
    font-family:'Unbounded',sans-serif;cursor:pointer;flex-shrink:0;line-height:1;
    letter-spacing:-0.02em;
  }

  /* ========== CONTENT ========== */
  .content{padding:26px 32px 40px;max-width:1560px;width:100%;margin:0 auto}
  /* When chat is hidden, content fills the full main column (no centering) */
  .app.chat-hidden .content{max-width:none}

  /* ===== STATIC BANNER ===== */
  .banner{margin-bottom:32px}
  .slide{
    min-width:100%;position:relative;padding:44px 52px;min-height:320px;
    display:flex;align-items:center;justify-content:space-between;gap:32px;
    border:1px solid var(--line-2);background:var(--bg-1);
    border-radius:20px;overflow:hidden;
  }
  .slide-1{background:radial-gradient(ellipse 80% 100% at 85% 50%,rgba(166,255,94,0.22),transparent 55%),linear-gradient(135deg,#0d1608,var(--bg-1))}
  .slide-raffle{
    background:
      radial-gradient(ellipse 90% 110% at 80% 50%,rgba(166,255,94,0.28),transparent 55%),
      radial-gradient(ellipse 60% 80% at 20% 50%,rgba(166,255,94,0.08),transparent 60%),
      linear-gradient(135deg,#0f1c08,#050a03);
  }
  .slide-raffle .slide-tag{color:var(--green)}.slide-raffle .slide-tag .dot{background:var(--green);box-shadow:0 0 10px var(--green)}
  .slide-raffle h1 .accent{
    color:var(--green);
    background:linear-gradient(180deg,#d8ffa0,var(--green) 60%,var(--green-2));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    font-size:1.15em;
  }
  .slide-2{background:radial-gradient(ellipse 80% 100% at 85% 50%,rgba(255,200,94,0.18),transparent 55%),linear-gradient(135deg,#161108,var(--bg-1))}
  .slide-3{background:radial-gradient(ellipse 80% 100% at 85% 50%,rgba(94,181,255,0.18),transparent 55%),linear-gradient(135deg,#081016,var(--bg-1))}
  .slide-content{position:relative;z-index:2;max-width:560px;flex-shrink:1;min-width:0}
  .slide-tag{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 13px;background:rgba(0,0,0,0.55);border:1px solid var(--line-3);
    border-radius:100px;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:0.08em;margin-bottom:18px;
  }
  .slide-tag .dot{width:6px;height:6px;border-radius:50%;animation:pulse 1.8s infinite}
  .slide-1 .slide-tag{color:var(--green)}.slide-1 .slide-tag .dot{background:var(--green);box-shadow:0 0 8px var(--green)}
  .slide-2 .slide-tag{color:var(--gold)}.slide-2 .slide-tag .dot{background:var(--gold);box-shadow:0 0 8px var(--gold)}
  .slide-3 .slide-tag{color:var(--blue)}.slide-3 .slide-tag .dot{background:var(--blue);box-shadow:0 0 8px var(--blue)}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

  .slide h1{
    font-family:'Unbounded',sans-serif;font-weight:800;font-size:44px;
    line-height:1.15;letter-spacing:-0.035em;margin-bottom:14px;
  }
  .slide-1 h1 .accent{color:var(--green)}
  .slide-2 h1 .accent{color:var(--gold)}
  .slide-3 h1 .accent{color:var(--blue)}
  .slide p{color:var(--text-2);font-size:14px;line-height:1.55;max-width:480px;margin-bottom:22px;font-weight:400}
  .slide p b{color:var(--text);font-weight:700}

  .slide-cta{display:flex;gap:10px;flex-wrap:wrap}
  .btn-prim{
    background:var(--green);color:#000;padding:14px 24px;border-radius:10px;
    font-weight:800;font-size:13px;display:inline-flex;align-items:center;gap:8px;
    transition:.2s;letter-spacing:0.02em;
  }
  .btn-prim:hover{background:#fff;transform:translateY(-1px)}
  .btn-prim svg{width:14px;height:14px}
  .slide-2 .btn-prim{background:var(--gold)}.slide-2 .btn-prim:hover{background:#fff}
  .slide-3 .btn-prim{background:var(--blue)}.slide-3 .btn-prim:hover{background:#fff}
  .btn-sec{
    background:rgba(0,0,0,0.4);color:var(--text);padding:14px 24px;border-radius:10px;
    font-weight:700;font-size:13px;border:1px solid var(--line-3);
    display:inline-flex;align-items:center;gap:8px;transition:.2s;
  }
  .btn-sec:hover{border-color:var(--line-3);background:rgba(0,0,0,0.6)}
  .btn-sec svg{width:14px;height:14px}

  /* Slide art — flex child, properly centered */
  .slide-art{
    position:relative;flex-shrink:0;
    width:320px;height:280px;opacity:1;pointer-events:none;
    display:flex;align-items:center;justify-content:center;
  }
  .slide-art svg{width:100%;height:100%;display:block}
  .slide-art img{
    width:100%;height:100%;object-fit:contain;display:block;
    filter:drop-shadow(0 20px 40px rgba(166,255,94,0.25)) drop-shadow(0 0 30px rgba(166,255,94,0.15));
  }

  /* Countdown timer */
  .banner-countdown{
    display:flex;align-items:flex-end;gap:7px;margin-bottom:22px;flex-wrap:wrap;
  }
  .cd-box{
    width:64px;padding:11px 8px;
    background:rgba(0,0,0,0.5);border:1px solid rgba(166,255,94,0.2);
    border-radius:10px;text-align:center;
    backdrop-filter:blur(10px);
    box-sizing:border-box;
  }
  .cd-num{
    font-family:'JetBrains Mono',monospace;font-weight:700;font-size:20px;
    color:var(--green);letter-spacing:-0.02em;line-height:1;
  }
  .cd-lbl{
    font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.1em;
    font-weight:700;margin-top:5px;
  }
  .cd-sep{
    font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;
    color:var(--green);opacity:.4;line-height:1;padding-bottom:12px;
  }

  /* ===== CATEGORY PILLS ===== */
  .cats-wrap{margin-bottom:32px;position:relative}
  .cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth}
  .cat{
    display:flex;align-items:center;gap:8px;padding:11px 17px;border-radius:10px;
    background:var(--bg-2);border:1px solid var(--line);font-size:12.5px;font-weight:600;
    color:var(--text-dim);white-space:nowrap;transition:.2s;cursor:pointer;flex-shrink:0;
  }
  .cat svg{width:14px;height:14px;transition:.2s}
  .cat:hover{color:var(--text);border-color:var(--line-2);background:var(--bg-3)}
  .cat:hover svg{color:var(--green)}
  .cat.active{background:var(--green);color:#000;border-color:var(--green)}
  .cat.active svg{color:#000}

  /* ===== GAME ROWS ===== */
  .row{margin-bottom:38px}
  .row-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:16px}
  .row-title{display:flex;align-items:center;gap:12px;min-width:0}
  .row-title .ico{
    width:34px;height:34px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line-2);
    display:grid;place-items:center;color:var(--green);flex-shrink:0;
  }
  .row-title .ico svg{width:16px;height:16px}
  .row-title h2{font-family:'Unbounded',sans-serif;font-size:17px;font-weight:700;letter-spacing:-0.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}
  .row-title .count{font-size:11.5px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-weight:600;flex-shrink:0;padding:4px 8px;background:var(--bg-2);border-radius:5px;line-height:1}
  .row-actions{display:flex;gap:6px;align-items:center}
  .row-all{font-size:12px;font-weight:600;color:var(--text-dim);padding:8px 12px;border-radius:8px;transition:.2s;white-space:nowrap}
  .row-all:hover{color:var(--green)}
  .row-nav-btn{
    width:32px;height:32px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);
    color:var(--text-dim);display:grid;place-items:center;transition:.2s;
  }
  .row-nav-btn:hover{color:var(--green);border-color:var(--line-2);background:var(--bg-3)}
  .row-nav-btn svg{width:13px;height:13px}
  .row-nav-btn:disabled{opacity:.35;cursor:not-allowed}

  /* Horizontal scroll row of tiles */
  .row-scroll{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding:2px 0 8px;scroll-snap-type:x mandatory}

  /* Originals grid — square tiles */
  .originals-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;
  }
  .originals-grid .tile{width:auto;aspect-ratio:1/1}
  @media (max-width:1280px){
    .originals-grid{grid-template-columns:repeat(4,1fr)}
  }
  @media (max-width:860px){
    .originals-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  }
  @media (max-width:560px){
    .originals-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  }
  .tile{
    position:relative;flex:0 0 auto;width:170px;aspect-ratio:3/4;border-radius:13px;overflow:hidden;
    cursor:pointer;border:none;
    scroll-snap-align:start;
    -webkit-tap-highlight-color:transparent;
  }
  .tile,.tile *{outline:none !important}
  .tile:hover,.tile:focus,.tile:focus-visible,.tile:active{outline:none;border:none}
  .tile-bg{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
  .tile-bg svg{width:58%;height:58%;opacity:.95}
  .tile-bg video{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  }
  .tile-play{display:none}
  .tile-overlay{
    position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,0.92) 55%);z-index:2;
  }
  .tile-name{font-size:12.5px;font-weight:700;color:#fff;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tile-meta{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;color:rgba(255,255,255,0.55);font-weight:500}
  .tile-meta .players{display:flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-weight:600;color:rgba(255,255,255,0.7)}
  .tile-meta .players .dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 2s infinite}
  .tile-badge{display:none}
  .tile-video .tile-overlay{
    background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,0.55) 55%,rgba(0,0,0,0.95));
  }

  /* Tile backgrounds with subtle patterns */
  .bg-a{background:radial-gradient(circle at 30% 30%,#2a1145,#0a0515);color:#c78aff}
  .bg-b{background:radial-gradient(circle at 30% 30%,#4a1018,#15050a);color:#ff8aa3}
  .bg-c{background:radial-gradient(circle at 30% 30%,#0f3a1e,#05150a);color:#8aff9f}
  .bg-d{background:radial-gradient(circle at 30% 30%,#4a3a08,#15100a);color:#ffd68a}
  .bg-e{background:radial-gradient(circle at 30% 30%,#0a2045,#050f1f);color:#8ac5ff}
  .bg-f{background:radial-gradient(circle at 30% 30%,#3a0a26,#150510);color:#ff9fcc}
  .bg-g{background:radial-gradient(circle at 30% 30%,#453a0a,#15120a);color:#fff08a}
  .bg-h{background:radial-gradient(circle at 30% 30%,#0a3a3a,#051515);color:#8af0ff}

  /* ===== LIVE BETS ===== */
  .live-bets{margin-top:16px;margin-bottom:40px}
  .live-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:16px;flex-wrap:wrap}
  .live-title{display:flex;align-items:center;gap:12px}
  .live-title .ico{
    width:34px;height:34px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line-2);
    display:grid;place-items:center;color:var(--green);
  }
  .live-title .ico svg{width:16px;height:16px}
  .live-title h2{font-family:'Unbounded',sans-serif;font-size:17px;font-weight:700;letter-spacing:-0.015em}
  .live-tabs{display:flex;gap:6px;background:var(--bg-2);padding:4px;border-radius:10px;border:1px solid var(--line)}
  .live-tab{
    padding:9px 16px;border-radius:7px;font-size:12px;font-weight:600;color:var(--text-dim);
    display:flex;align-items:center;gap:7px;transition:.2s;
  }
  .live-tab svg{width:13px;height:13px}
  .live-tab:hover{color:var(--text)}
  .live-tab.active{background:var(--bg-4);color:var(--text)}
  .live-tab .live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite}

  .bets-table{background:var(--bg-1);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .bets-head,.bets-row{
    display:grid;grid-template-columns:2fr 1.4fr 1.1fr 1.1fr 1.1fr 0.9fr;
    padding:14px 22px;align-items:center;font-size:13px;
  }
  .bets-head{background:var(--bg-2);color:var(--text-dim);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em}
  .bets-row{border-top:1px solid var(--line);transition:.15s}
  .bets-row:hover{background:var(--bg-2)}
  .bets-row .game{display:flex;align-items:center;gap:11px;font-weight:600}
  .bets-row .game .mini{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;flex-shrink:0}
  .bets-row .game .mini svg{width:15px;height:15px}
  .bets-row .user{color:var(--text-2);font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500}
  .bets-row .amt,.bets-row .mult,.bets-row .payout{font-family:'JetBrains Mono',monospace;font-weight:600}
  .bets-row .mult.win{color:var(--green)}
  .bets-row .mult.loss{color:var(--red)}
  .bets-row .payout.win{color:var(--green)}
  .bets-row .payout.loss{color:var(--text-dim)}
  .bets-row .time{color:var(--text-dim-2);font-family:'JetBrains Mono',monospace;font-size:11px}

  /* ========== FOOTER ========== */
  .footer-mini{
    border-top:1px solid var(--line);padding:28px;margin-top:20px;
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
    color:var(--text-dim);font-size:12px;
  }
  .footer-mini .providers{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
  .footer-mini .providers span{font-weight:700;letter-spacing:0.03em;color:var(--text-dim)}

  /* ========== CHAT ========== */
  /* Safety fallback: if the chat element somehow escapes .app, hide it
     when body.chat-hidden is set (covers any future structural mistakes) */
  body.chat-hidden .chat:not(.force-show){
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:380px;max-width:100vw;height:100vh;height:100dvh;z-index:55;
    transform:translateX(100%);display:flex;border-left:1px solid var(--line);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .chat{
    background:var(--bg-1);border-left:1px solid var(--line);
    position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:20;
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    overflow:hidden;
  }
  .chat-head{flex-shrink:0}
  .chat-online{flex-shrink:0}
  .chat-msgs{flex:1;min-height:0;overflow-y:auto}
  .chat-input{flex-shrink:0}
  .app.chat-hidden .chat{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:380px;max-width:100vw;height:100vh;height:100dvh;z-index:55;
    transform:translateX(100%);display:flex;border-left:1px solid var(--line);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .app:not(.chat-hidden) .chat{
    /* desktop default: 3rd grid column visible */
  }
  /* When chat is hidden but we want to show it as a drawer overlay */
  body.chat-overlay::before{
    content:"";position:fixed;inset:0;background:rgba(0,0,0,0.6);
    z-index:54;backdrop-filter:blur(2px);animation:fadeIn .2s ease;
  }
  body.chat-overlay .chat{
    position:fixed !important;top:0 !important;right:0 !important;bottom:0 !important;left:auto !important;
    width:380px;max-width:100vw;height:100vh;height:100dvh;z-index:60;
    display:flex !important;transform:translateX(0) !important;
    border-left:1px solid var(--line);
    box-shadow:-20px 0 60px -10px rgba(0,0,0,0.8);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  #chatToggleBtn.active{color:var(--green);border-color:rgba(166,255,94,0.3);background:rgba(166,255,94,0.06)}

  .chat-head{
    padding:0 18px;border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:10px;
  }
  .chat-head .title{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;line-height:1;letter-spacing:-0.01em}
  .chat-head .title svg{width:16px;height:16px;color:var(--green);flex-shrink:0}
  .chat-head .room{
    font-family:'Manrope',sans-serif;font-size:10.5px;font-weight:700;
    color:var(--text-dim);padding:4px 8px;border-radius:5px;
    letter-spacing:0.1em;border:1px solid var(--line-2);
    text-transform:uppercase;line-height:1;background:var(--bg-2);
  }
  .chat-head .actions{display:flex;align-items:center;gap:6px}
  .chat-close{
    width:30px;height:30px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);
    color:var(--text-dim);display:inline-flex;align-items:center;justify-content:center;
    transition:.2s;flex-shrink:0;
  }
  .chat-close:hover{color:var(--text);border-color:var(--line-2);background:var(--bg-3)}
  .chat-close svg{width:13px;height:13px}
  .chat-online{
    padding:12px 18px;border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--text-dim);
    font-family:'JetBrains Mono',monospace;font-weight:600;line-height:1;
  }
  .chat-online .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2s infinite;flex-shrink:0}
  .chat-msgs{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:16px}
  .msg{display:flex;gap:11px;animation:msgIn .3s ease}
  @keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  .msg-ava{
    width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
    font-size:12px;font-weight:800;color:#000;flex-shrink:0;font-family:'Unbounded',sans-serif;
    letter-spacing:-0.02em;line-height:1;
  }
  .msg-body{flex:1;min-width:0;padding-top:1px}
  .msg-name{
    font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:6px;
    margin-bottom:4px;color:var(--text);line-height:1;
  }
  .msg-name .vip{
    font-size:8.5px;padding:3px 6px;border-radius:4px;background:var(--gold);
    color:#000;font-weight:800;letter-spacing:0.06em;line-height:1;
  }
  .msg-name .mod{
    font-size:8.5px;padding:3px 6px;border-radius:4px;background:var(--green);
    color:#000;font-weight:800;letter-spacing:0.06em;line-height:1;
  }
  .msg-text{font-size:13px;color:var(--text-2);line-height:1.5;word-break:break-word}
  .msg-text .mention{color:var(--green);font-weight:600}
  .chat-input{padding:14px 18px;border-top:1px solid var(--line)}
  .chat-field{
    display:flex;align-items:center;
    background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
    padding:5px 5px 5px 14px;gap:8px;transition:.2s;
  }
  .chat-field:focus-within{border-color:rgba(166,255,94,0.3);background:var(--bg-3)}
  .chat-field input{
    flex:1;background:none;border:none;outline:none;color:var(--text);
    font-size:13px;padding:8px 0;min-width:0;line-height:1;
  }
  .chat-field input::placeholder{color:var(--text-dim)}
  .chat-send{
    width:34px;height:34px;border-radius:9px;
    background:linear-gradient(135deg,var(--green),var(--green-2));
    color:#000;display:inline-flex;align-items:center;justify-content:center;
    flex-shrink:0;transition:.2s;position:relative;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);
  }
  .chat-send:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08),0 6px 16px -4px rgba(166,255,94,0.45)}
  .chat-send:active{transform:translateY(0)}
  .chat-send svg{width:15px;height:15px;stroke-width:3}
  .chat-foot{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:9px;font-size:10px;color:var(--text-dim-2);line-height:1;padding:0 2px;
  }
  .chat-foot .rules{display:flex;align-items:center;gap:5px}
  .chat-foot .rules svg{width:11px;height:11px;color:var(--text-dim-2)}

  /* ========== MOBILE BOTTOM NAV ========== */
  .bottom-nav{
    display:none;position:fixed;bottom:0;left:0;right:0;z-index:40;
    background:rgba(0,0,0,0.96);backdrop-filter:blur(20px);
    border-top:1px solid var(--line);
    padding:10px 8px calc(10px + env(safe-area-inset-bottom));
  }
  .bottom-nav-inner{
    display:flex;justify-content:space-around;align-items:flex-end;
    max-width:500px;margin:0 auto;gap:4px;
  }
  .bn-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    gap:4px;padding:4px 8px;border-radius:8px;color:var(--text-dim);
    font-size:10px;font-weight:600;line-height:1;min-width:54px;
  }
  .bn-btn svg{width:20px;height:20px;display:block}
  .bn-btn.active{color:var(--green)}
  .bn-btn.center{
    width:54px;height:54px;border-radius:50%;
    background:linear-gradient(135deg,var(--green),var(--green-2));
    color:#000;margin-top:-22px;margin-bottom:4px;padding:0;min-width:54px;
    box-shadow:0 8px 20px -4px rgba(166,255,94,0.45),0 0 0 4px var(--bg);
    display:inline-flex;align-items:center;justify-content:center;gap:0;
  }
  .bn-btn.center svg{width:24px;height:24px;stroke-width:3}

  /* Sidebar backdrop (mobile) */
  .backdrop{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:29;
    opacity:0;transition:.25s;pointer-events:none;
  }
  .backdrop.show{opacity:1;pointer-events:auto}

  /* ========== RESPONSIVE ========== */
  @media (max-width:1440px){
    :root{--sidebar-w:240px;--chat-w:300px}
    .content{padding:22px 24px 40px}
    .slide{padding:40px 44px;min-height:300px}
    .slide h1{font-size:40px;line-height:1.15}
    .slide-art{width:360px;height:260px}
  }

  @media (max-width:1280px){
    .app{grid-template-columns:var(--sidebar-w) 1fr}
    /* Chat becomes fullscreen overlay */
    .chat{
      position:fixed;top:0;right:0;bottom:0;left:auto;
      width:380px;max-width:100vw;height:100vh;height:100dvh;z-index:55;
      transform:translateX(100%);display:flex;border-left:1px solid var(--line);
      transition:transform .3s cubic-bezier(.4,0,.2,1);
    }
    .app:not(.chat-hidden) .chat{transform:translateX(0)}
    .app.chat-hidden .chat{transform:translateX(100%);display:flex}
    .slide{padding:36px 40px;min-height:280px}
    .slide-content{max-width:500px}
    .slide-art{width:320px;height:240px}
    .slide h1{font-size:36px;line-height:1.15}
  }

  @media (max-width:1024px){
    .app{grid-template-columns:1fr}
    .app.chat-hidden{grid-template-columns:1fr}
    .sidebar{
      position:fixed;left:0;top:0;bottom:0;
      transform:translateX(-100%);transition:transform .3s ease;
      width:280px;
    }
    .sidebar.open{transform:translateX(0)}
    .sidebar-close{display:inline-flex;align-items:center;justify-content:center}
    .menu-btn{display:inline-flex}
    .bets-head,.bets-row{grid-template-columns:1.8fr 1.2fr 1fr 1fr;padding:13px 18px}
    .bets-head .c-mult,.bets-head .c-time,.bets-row .mult,.bets-row .time{display:none}
    .slide{padding:34px 36px;min-height:260px;gap:24px}
    .slide-art{width:280px;height:220px}
    .slide h1{font-size:34px;line-height:1.15}
    .slide p{max-width:100%}
  }

  /* Tablet portrait — keep banner horizontal but compact */
  @media (max-width:860px){
    .slide{padding:22px 24px;min-height:auto;gap:16px;align-items:center}
    .slide-content{max-width:none;flex:1;min-width:0}
    .slide-art{
      width:130px;height:130px;flex-shrink:0;align-self:center;
    }
    .slide h1{font-size:22px;line-height:1.18;margin-bottom:8px}
    .slide p{font-size:12px;max-width:100%;margin-bottom:12px;line-height:1.5}
    .slide-tag{font-size:9.5px;padding:5px 10px;margin-bottom:10px}
    .cd-box{width:48px;padding:8px 4px}
    .cd-num{font-size:14px}
    .cd-lbl{font-size:7.5px;margin-top:3px}
    .cd-sep{font-size:14px;padding-bottom:8px}
    .banner-countdown{gap:3px;margin-bottom:12px}
    .btn-prim,.btn-sec{padding:9px 13px;font-size:11px}
    .btn-prim svg,.btn-sec svg{width:12px;height:12px}
    .slide-cta{gap:6px}
  }

  /* Mobile */
  @media (max-width:768px){
    :root{--header-h:58px}
    .content{padding:14px 12px 18px}
    .main{padding-bottom:0}
    .footer-mini{margin-bottom:80px}

    /* ===== PERF: kill expensive effects on mobile ===== */
    .header,.bottom-nav,.chat-head{backdrop-filter:none;-webkit-backdrop-filter:none}
    .header{background:#000}
    .bottom-nav{background:#000}
    .cd-box{backdrop-filter:none;-webkit-backdrop-filter:none}
    /* Disable constant pulse animations that trigger repaint during scroll */
    .tile-meta .players .dot,
    .chat-online .dot,
    .slide-tag .dot,
    .live-tab .live-dot,
    .chat-head .dot{animation:none}
    /* Smooth momentum scrolling for iOS */
    .chat-msgs,.row-scroll,.cats,body,.sidebar-scroll{-webkit-overflow-scrolling:touch}

    /* Header restructure */
    .header{padding:0 12px;gap:8px;height:var(--header-h);justify-content:flex-start}
    .menu-btn{width:38px;height:38px;flex-shrink:0}
    .menu-btn svg{width:17px;height:17px}
    /* Hide search bar on mobile to save space */
    .search{display:none}
    .header-right{gap:6px;flex-shrink:0;margin-left:auto}

    /* Wallet compact but readable */
    .wallet{height:38px;flex-shrink:0;gap:6px}
    .wallet-bal{padding:0 11px;font-size:12.5px;gap:7px;height:38px}
    .coin-img{width:17px;height:17px}
    .coin-amount{min-width:auto}
    .wallet-bal .chev{width:10px;height:10px}
    /* Square deposit button on mobile */
    .wallet-dep{width:38px;height:38px;padding:0;justify-content:center;border-radius:10px}
    .wallet-dep span{display:none}
    .wallet-dep svg{width:16px;height:16px;stroke-width:3.2}

    /* Hide all header icon buttons including chat toggle on mobile */
    .header-right .icon-btn{display:none}
    #chatToggleBtn{display:none}
    .avatar{display:none}

    /* Banner — horizontal compact on mobile */
    .slide{padding:18px 16px;min-height:auto;border-radius:14px;gap:12px;flex-direction:row;align-items:center}
    .slide-content{max-width:none;flex:1;min-width:0}
    .slide h1{font-size:18px;margin-bottom:6px;line-height:1.18}
    .slide p{font-size:11px;margin-bottom:10px;line-height:1.5}
    .slide-tag{font-size:9px;padding:4px 9px;margin-bottom:8px}
    .slide-art{width:100px;height:100px;max-width:100px;align-self:center;flex-shrink:0}
    .btn-prim,.btn-sec{padding:9px 12px;font-size:10.5px}
    .btn-prim svg,.btn-sec svg{width:11px;height:11px}
    .slide-cta{gap:5px;flex-wrap:wrap}

    /* Countdown more compact */
    .cd-box{width:42px;padding:7px 4px}
    .cd-num{font-size:13px}
    .cd-lbl{font-size:7px;margin-top:3px}
    .cd-sep{font-size:13px;padding-bottom:8px}
    .banner-countdown{gap:2px;margin-bottom:10px}
    .banner{margin-bottom:18px}

    /* Game tiles */
    .tile{width:134px;border-radius:11px}
    .row{margin-bottom:28px}
    .row-head{margin-bottom:14px}
    .row-title{gap:9px}
    .row-title h2{font-size:15px}
    .row-title .ico{width:30px;height:30px}
    .row-title .ico svg{width:14px;height:14px}
    .row-title .count{display:none}
    .row-all{display:none}

    /* Live bets */
    .live-head{flex-direction:column;align-items:flex-start;gap:12px}
    .live-tabs{overflow-x:auto;max-width:100%;padding:3px;width:100%}
    .live-tab{padding:8px 12px;font-size:11.5px;white-space:nowrap;flex-shrink:0}
    .bets-head,.bets-row{grid-template-columns:1.6fr 1fr 1fr;padding:11px 13px;font-size:11.5px;gap:6px}
    .bets-head .c-user,.bets-row .user{display:none}
    .bets-row .game{gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .bets-row .game .mini{width:24px;height:24px}
    .bets-row .game .mini svg{width:12px;height:12px}

    /* Footer */
    .footer-mini{padding:18px 14px;flex-direction:column;text-align:center;gap:12px;font-size:11px}
    .footer-mini .providers{gap:14px;justify-content:center}
    .bottom-nav{display:block}

    /* Chat — full screen on mobile */
    .app.chat-hidden .chat,
    body.chat-overlay .chat{
      width:100vw;max-width:100vw;height:100vh;height:100dvh;
      left:0;right:0;top:0;bottom:0;border-left:none;
    }
    /* Hide bottom-nav when chat is open as overlay */
    body.chat-overlay .bottom-nav{display:none}

    /* Categories pills */
    .cats{padding:0 0 4px;gap:6px;margin-bottom:24px}
    .cat{padding:9px 13px;font-size:12px}
    .cats-wrap{margin-bottom:24px}

    /* Wallet dropdown mobile — align right, narrower */
    .wallet-drop{left:auto;right:0;min-width:260px;max-width:calc(100vw - 24px)}
    .wd-row img{width:26px;height:26px}
    .wd-sym{font-size:12px}
    .wd-name{font-size:10px}
    .wd-val{font-size:11.5px}
    .wd-usd{font-size:9.5px}
  }

  /* Small mobile */
  @media (max-width:560px){
    .content{padding:12px 10px 18px}
    .header{padding:0 10px;gap:6px}
    .menu-btn{width:36px;height:36px}
    .wallet{height:36px;gap:5px}
    .wallet-bal{padding:0 10px;font-size:12px;gap:6px;height:36px}
    .coin-img{width:16px;height:16px}
    .wallet-dep{width:36px;height:36px}
    .wallet-dep svg{width:15px;height:15px;stroke-width:3.2}

    .slide{padding:14px 13px;gap:10px}
    .slide h1{font-size:16px;line-height:1.18;margin-bottom:5px}
    .slide p{font-size:10.5px;margin-bottom:9px}
    .slide-art{width:86px;height:86px;max-width:86px}
    .slide-tag{margin-bottom:7px;font-size:8.5px;padding:4px 8px}
    .cd-box{width:38px;padding:6px 3px}
    .cd-num{font-size:11.5px}
    .cd-lbl{font-size:6.5px;margin-top:2px}
    .cd-sep{font-size:11.5px;padding-bottom:7px}
    .banner-countdown{gap:2px;margin-bottom:9px}
    .btn-prim,.btn-sec{padding:8px 11px;font-size:10px}

    .row-title h2{font-size:14px}
    .live-title h2{font-size:14px}
  }

  /* Extra small */
  @media (max-width:380px){
    .header{padding:0 8px;gap:5px}
    .menu-btn{width:34px;height:34px}
    .wallet{height:34px;gap:4px}
    .wallet-bal{padding:0 9px;font-size:11.5px;gap:5px;height:34px}
    .coin-img{width:15px;height:15px}
    .coin-amount{max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .wallet-bal .chev{width:9px;height:9px;margin-left:1px}
    .wallet-dep{width:34px;height:34px}
    .wallet-dep svg{width:14px;height:14px}

    .slide{padding:12px 11px;gap:8px}
    .slide h1{font-size:14px;line-height:1.18}
    .slide-art{width:72px;height:72px;max-width:72px}
    .slide p{font-size:10px;margin-bottom:8px}
    .cd-box{width:34px;padding:5px 3px}
    .cd-num{font-size:10px}
    .cd-lbl{font-size:6px}
    .cd-sep{font-size:10px;padding-bottom:6px}
  }

/* ========== EMPTY STATES ========== */
.msg-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;text-align:center;color:var(--text-dim);gap:4px;
  height:100%;min-height:200px;
}
.msg-empty svg{color:var(--text-dim-2);margin-bottom:8px}
.msg-empty p{font-size:14px;font-weight:700;color:var(--text-2)}
.msg-empty span{font-size:12px;color:var(--text-dim-2)}

.bets-empty{
  padding:48px 20px;text-align:center;color:var(--text-dim);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.bets-empty svg{color:var(--text-dim-2);margin-bottom:10px}
.bets-empty p{font-size:14px;font-weight:700;color:var(--text-2)}
.bets-empty span{font-size:12px;color:var(--text-dim-2)}

/* Page content wrapper for non-lobby pages */
.page{padding:28px 32px 40px;max-width:1200px;margin:0 auto}
.page-header{margin-bottom:32px}
.page-header .tag{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
  background:rgba(166,255,94,0.08);border:1px solid rgba(166,255,94,0.2);
  color:var(--green);border-radius:100px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px;
}
.page-header h1{
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:38px;
  letter-spacing:-0.035em;line-height:1.15;margin-bottom:10px;
}
.page-header h1 .accent{color:var(--green)}
.page-header p{color:var(--text-2);font-size:14px;line-height:1.6;max-width:640px}

.page-section{margin-bottom:40px}
.page-section h2{
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:20px;
  letter-spacing:-0.02em;margin-bottom:18px;
}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.info-card{
  background:var(--bg-1);border:1px solid var(--line);border-radius:14px;
  padding:22px 22px 20px;transition:border-color .2s;
}
.info-card:hover{border-color:var(--line-2)}
.info-card .ico{
  width:42px;height:42px;border-radius:11px;background:var(--bg-3);
  border:1px solid var(--line-2);display:grid;place-items:center;
  color:var(--green);margin-bottom:14px;
}
.info-card .ico svg{width:20px;height:20px}
.info-card h3{font-size:15px;font-weight:700;margin-bottom:6px;letter-spacing:-0.01em}
.info-card p{font-size:13px;color:var(--text-dim);line-height:1.55}
.info-card .cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  color:var(--green);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
}
.info-card .cta svg{width:12px;height:12px}

/* VIP tier cards */
.tier-row{
  display:grid;grid-template-columns:60px 1fr auto;gap:16px;align-items:center;
  padding:18px 20px;background:var(--bg-1);border:1px solid var(--line);
  border-radius:12px;margin-bottom:10px;transition:.2s;
}
.tier-row:hover{border-color:var(--line-2)}
.tier-row .tier-badge{
  width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:16px;
}
.tier-row .t-info h3{font-size:15px;font-weight:800;margin-bottom:4px}
.tier-row .t-info p{font-size:12px;color:var(--text-dim)}
.tier-row .t-req{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-dim);
  padding:6px 11px;background:var(--bg-3);border:1px solid var(--line);border-radius:7px;
}

/* FAQ / support */
.faq-item{
  background:var(--bg-1);border:1px solid var(--line);border-radius:11px;
  margin-bottom:10px;overflow:hidden;
}
.faq-item summary{
  padding:16px 20px;cursor:pointer;font-weight:700;font-size:14px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-family:'JetBrains Mono',monospace;color:var(--green);
  font-size:18px;transition:transform .2s;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 20px 18px;color:var(--text-2);font-size:13px;line-height:1.6}

@media (max-width:768px){
  .page{padding:18px 14px 40px}
  .page-header h1{font-size:26px}
  .page-header p{font-size:13px}
  .page-section h2{font-size:17px}
  .card-grid{grid-template-columns:1fr;gap:12px}
  .tier-row{grid-template-columns:48px 1fr;padding:14px 16px}
  .tier-row .t-req{grid-column:2;justify-self:start}
}


/* ========================================================== */
/* REAL INTERACTIONS: notifications, settings, profile, search */
/* ========================================================== */

/* Shared backdrop for modals */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);
  z-index:200;display:none;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .2s ease;
}
.modal-backdrop.open{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ===== Notifications Panel ===== */
.notif-panel{
  position:fixed;top:68px;right:24px;width:360px;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 100px);background:var(--bg-1);border:1px solid var(--line-2);
  border-radius:14px;box-shadow:0 24px 60px -12px rgba(0,0,0,0.9);
  z-index:150;display:none;flex-direction:column;overflow:hidden;
  animation:slideUp .22s cubic-bezier(.4,0,.2,1);
}
.notif-panel.open{display:flex}
.notif-head{
  padding:16px 18px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
}
.notif-title{font-size:15px;font-weight:800;letter-spacing:-0.01em}
.notif-clear{
  font-size:11px;color:var(--green);font-weight:700;text-transform:uppercase;
  letter-spacing:0.06em;background:none;border:none;cursor:pointer;
}
.notif-clear:hover{text-decoration:underline}
.notif-list{flex:1;overflow-y:auto;max-height:440px}
.notif-item{
  padding:14px 18px;display:flex;gap:12px;align-items:flex-start;
  border-bottom:1px solid var(--line);transition:background .15s;cursor:pointer;
  position:relative;
}
.notif-item:hover{background:var(--bg-2)}
.notif-item.unread::before{
  content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--green);
}
.notif-item.unread{padding-left:22px}
.notif-icon{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  flex-shrink:0;color:#000;
}
.notif-icon svg{width:16px;height:16px;stroke-width:2.2}
.notif-body{flex:1;min-width:0}
.notif-msg{font-size:13px;line-height:1.45;color:var(--text);margin-bottom:4px}
.notif-time{font-size:11px;color:var(--text-dim);font-family:'JetBrains Mono',monospace}
.notif-empty{padding:48px 20px;text-align:center;color:var(--text-dim)}
.notif-foot{padding:12px 18px;border-top:1px solid var(--line);text-align:center}
.notif-foot button{
  width:100%;background:none;border:none;color:var(--text-dim);
  font-size:12px;font-weight:700;cursor:pointer;padding:6px;
  text-transform:uppercase;letter-spacing:0.06em;
}
.notif-foot button:hover{color:var(--green)}

/* ===== Profile Menu ===== */
.profile-menu{
  position:fixed;top:68px;right:24px;width:280px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,0.9);z-index:150;
  display:none;flex-direction:column;overflow:hidden;
  animation:slideUp .22s cubic-bezier(.4,0,.2,1);
}
.profile-menu.open{display:flex}
.profile-head{
  padding:18px;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--line);
}
.profile-ava{
  width:44px;height:44px;border-radius:11px;
  background:linear-gradient(135deg,var(--green),var(--green-2));
  color:#000;display:grid;place-items:center;font-weight:800;font-size:18px;
  font-family:'Unbounded',sans-serif;letter-spacing:-0.02em;flex-shrink:0;
}
.profile-name{font-size:14px;font-weight:800;margin-bottom:3px;line-height:1}
.profile-level{font-size:11px;color:var(--text-dim);font-family:'JetBrains Mono',monospace}
.profile-progress{padding:14px 18px 16px;border-bottom:1px solid var(--line)}
.progress-label{font-size:10.5px;color:var(--text-dim);margin-bottom:6px;font-weight:600}
.progress-bar{height:6px;background:var(--bg-3);border-radius:100px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--green-2));border-radius:100px;transition:width .3s}
.profile-links{padding:8px 0;display:flex;flex-direction:column}
.profile-links button,.profile-links a{
  padding:11px 18px;background:none;border:none;color:var(--text-2);
  font-size:13px;font-weight:600;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:12px;text-decoration:none;
  transition:background .15s;
}
.profile-links button:hover,.profile-links a:hover{background:var(--bg-2);color:var(--text)}
.profile-links svg{width:16px;height:16px;color:var(--text-dim);flex-shrink:0}
.profile-links button.danger{color:#ff5e7a}
.profile-links button.danger svg{color:#ff5e7a}
.profile-links hr{border:none;border-top:1px solid var(--line);margin:6px 0}

/* ===== Settings Modal ===== */
.modal{
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:16px;
  max-width:680px;width:100%;max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;overflow:hidden;
  animation:slideUp .22s cubic-bezier(.4,0,.2,1);
}
.modal-head{
  padding:20px 24px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;flex-shrink:0;
}
.modal-title{font-family:'Unbounded',sans-serif;font-size:18px;font-weight:800;letter-spacing:-0.02em}
.modal-close{
  width:34px;height:34px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line);
  color:var(--text-dim);display:grid;place-items:center;cursor:pointer;transition:.15s;
}
.modal-close:hover{color:var(--text);background:var(--bg-3)}
.modal-close svg{width:14px;height:14px}
.modal-tabs{
  display:flex;padding:0 24px;gap:4px;border-bottom:1px solid var(--line);flex-shrink:0;
  overflow-x:auto;scrollbar-width:none;
}
.modal-tabs::-webkit-scrollbar{display:none}
.mtab{
  padding:14px 4px;background:none;border:none;color:var(--text-dim);
  font-size:13px;font-weight:700;cursor:pointer;margin-right:20px;
  border-bottom:2px solid transparent;white-space:nowrap;transition:.15s;
}
.mtab:hover{color:var(--text)}
.mtab.active{color:var(--green);border-bottom-color:var(--green)}
.modal-body{padding:20px 24px;overflow-y:auto;flex:1}
.mtab-pane{display:none}
.mtab-pane.active{display:block}
.setting-row{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.setting-row:last-child{border-bottom:none}
.setting-label{font-size:13.5px;font-weight:700;margin-bottom:3px;line-height:1.3}
.setting-sub{font-size:11.5px;color:var(--text-dim);line-height:1.4}
.setting-select{
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;
  padding:8px 12px;color:var(--text);font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:inherit;outline:none;
}
.setting-select:focus{border-color:var(--line-3)}
.setting-btn{
  padding:8px 14px;background:var(--bg-2);border:1px solid var(--line-2);
  color:var(--text);font-size:11.5px;font-weight:700;border-radius:8px;
  cursor:pointer;text-transform:uppercase;letter-spacing:0.05em;transition:.15s;
}
.setting-btn:hover{background:var(--bg-3);border-color:var(--line-3)}
.setting-btn.danger{color:#ff5e7a;border-color:rgba(255,94,122,0.3)}
.setting-btn.danger:hover{background:rgba(255,94,122,0.08)}
.danger-row{border-top:1px solid var(--line);margin-top:8px;padding-top:20px}

/* ===== Toggle Switch ===== */
.toggle{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle span{
  position:absolute;cursor:pointer;inset:0;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:100px;transition:.2s;
}
.toggle span::before{
  content:"";position:absolute;height:14px;width:14px;left:3px;top:50%;
  transform:translateY(-50%);background:var(--text-dim);border-radius:50%;transition:.2s;
}
.toggle input:checked+span{background:var(--green);border-color:var(--green)}
.toggle input:checked+span::before{transform:translate(18px,-50%);background:#000}

/* ===== Search Overlay ===== */
.search-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.88);backdrop-filter:blur(8px);
  z-index:200;display:none;flex-direction:column;padding:20px;
  animation:fadeIn .2s ease;
}
.search-overlay.open{display:flex}
.search-overlay-head{max-width:680px;width:100%;margin:60px auto 20px}
.search-field{
  position:relative;display:flex;align-items:center;gap:12px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:12px;
  padding:0 14px 0 16px;height:52px;
}
.search-field svg{width:18px;height:18px;color:var(--text-dim);flex-shrink:0}
.search-field input{
  flex:1;background:none;border:none;outline:none;color:var(--text);
  font-size:15px;font-weight:500;min-width:0;font-family:inherit;
}
.search-field input::placeholder{color:var(--text-dim)}
.search-close{
  width:34px;height:34px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line);
  color:var(--text-dim);display:grid;place-items:center;cursor:pointer;transition:.15s;flex-shrink:0;
}
.search-close:hover{color:var(--text)}
.search-close svg{width:14px;height:14px}
.search-overlay-body{max-width:680px;width:100%;margin:0 auto;overflow-y:auto}
.search-section{margin-bottom:26px}
.search-section-title{
  font-size:10.5px;text-transform:uppercase;letter-spacing:0.12em;
  color:var(--text-dim);font-weight:700;margin-bottom:10px;
}
.search-tags{display:flex;flex-wrap:wrap;gap:8px}
.search-tags button{
  padding:8px 14px;background:var(--bg-1);border:1px solid var(--line);
  color:var(--text-2);font-size:12px;font-weight:600;border-radius:100px;
  cursor:pointer;transition:.15s;
}
.search-tags button:hover{border-color:var(--line-3);color:var(--text)}
.search-results{display:flex;flex-direction:column;gap:6px}
.search-result{
  display:flex;align-items:center;gap:14px;padding:12px 14px;
  background:var(--bg-1);border:1px solid var(--line);border-radius:11px;
  text-decoration:none;color:inherit;transition:.15s;
}
.search-result:hover{border-color:var(--line-3);background:var(--bg-2)}
.sr-icon{
  width:44px;height:44px;border-radius:10px;background:var(--bg-3);
  display:grid;place-items:center;color:var(--green);flex-shrink:0;
}
.sr-icon svg{width:20px;height:20px}
.sr-name{font-size:13.5px;font-weight:700;margin-bottom:2px}
.sr-sub{font-size:11px;color:var(--text-dim);font-family:'JetBrains Mono',monospace}

/* ===== Toast ===== */
.toast-host{
  position:fixed;top:80px;right:24px;z-index:300;display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
}
.toast{
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:11px;
  padding:12px 16px;min-width:240px;max-width:340px;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,0.6);
  animation:toastIn .3s cubic-bezier(.4,0,.2,1);pointer-events:auto;
}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{to{transform:translateX(100%);opacity:0}}
.toast.out{animation:toastOut .25s forwards}
.toast svg{width:16px;height:16px;color:var(--green);flex-shrink:0}
.toast-msg{font-size:12.5px;font-weight:600;line-height:1.4}

/* Mobile adjustments */
@media (max-width:768px){
  .notif-panel{top:66px;right:12px;left:12px;width:auto;max-width:none}
  .profile-menu{top:66px;right:12px;left:12px;width:auto}
  .modal-backdrop{padding:12px}
  .modal{max-height:calc(100vh - 24px);border-radius:14px}
  .modal-head{padding:16px 18px}
  .modal-title{font-size:16px}
  .modal-tabs{padding:0 18px}
  .modal-body{padding:16px 18px}
  .mtab{margin-right:16px;font-size:12px}
  .setting-row{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 0}
  .setting-row > *:last-child{align-self:flex-end}
  .search-overlay{padding:14px}
  .search-overlay-head{margin:40px auto 18px}
  .search-field{height:48px}
  .search-field input{font-size:14px}
  .toast-host{top:auto;bottom:80px;right:12px;left:12px}
  .toast{min-width:0;max-width:none}
}


/* ========== SETTINGS & NOTIFICATIONS PAGES ========== */
.settings-card{
  background:var(--bg-1);border:1px solid var(--line);border-radius:14px;
  padding:6px 22px;
}
.settings-card .setting-row{padding:18px 0;border-bottom:1px solid var(--line)}
.settings-card .setting-row:last-child{border-bottom:none}

.notif-page-list{display:flex;flex-direction:column;gap:10px}
.notif-page-item{
  display:flex;gap:14px;align-items:flex-start;padding:18px 20px;
  background:var(--bg-1);border:1px solid var(--line);border-radius:13px;
  transition:.15s;cursor:pointer;position:relative;
}
.notif-page-item:hover{border-color:var(--line-2);background:var(--bg-2)}
.notif-page-item.unread::before{
  content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);
}
.notif-page-item.unread{padding-left:26px}
.notif-page-item .notif-icon{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  flex-shrink:0;color:#000;
}
.notif-page-item .notif-icon svg{width:18px;height:18px;stroke-width:2.2}
.notif-page-item .notif-body{flex:1;min-width:0}
.notif-page-item .notif-msg{font-size:13.5px;line-height:1.5;color:var(--text);margin-bottom:5px}
.notif-page-item .notif-msg strong{font-weight:800;color:#fff}
.notif-page-item .notif-time{font-size:11.5px;color:var(--text-dim);font-family:'JetBrains Mono',monospace}

@media (max-width:768px){
  .settings-card{padding:4px 16px}
  .settings-card .setting-row{padding:14px 0}
  .notif-page-item{padding:14px 16px;gap:12px}
  .notif-page-item.unread{padding-left:22px}
  .notif-page-item .notif-icon{width:38px;height:38px}
  .notif-page-item .notif-msg{font-size:12.5px}
}


/* ========== AUTH BUTTONS (anon header) ========== */
.auth-buttons{display:flex;align-items:center;gap:8px}
.btn-signin{
  background:transparent;color:var(--text);
  border:none;padding:10px 18px;border-radius:8px;
  font-weight:700;font-size:13px;cursor:pointer;transition:.15s;
  font-family:inherit;
}
.btn-signin:hover{background:var(--bg-2);color:#fff}
.btn-register{
  background:var(--green);color:#000;
  border:none;padding:10px 20px;border-radius:8px;
  font-weight:800;font-size:13px;cursor:pointer;transition:.15s;
  font-family:inherit;letter-spacing:-0.01em;
}
.btn-register:hover{background:var(--green-2);transform:translateY(-1px)}
@media (max-width:560px){
  .btn-signin{padding:8px 12px;font-size:12px}
  .btn-register{padding:8px 14px;font-size:12px}
}

/* ========== AUTH MODAL ========== */
.auth-modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);
  z-index:300;display:none;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .2s ease;
}
.auth-modal-backdrop.open{display:flex}
.auth-modal{
  background:linear-gradient(180deg, #0f0f0f 0%, #0a0a0a 100%);
  border:1px solid var(--line-2);border-radius:18px;
  width:100%;max-width:420px;
  box-shadow:0 30px 80px -10px rgba(0,0,0,0.95), 0 0 0 1px rgba(166,255,94,0.06);
  position:relative;overflow:hidden;
  animation:authPop .3s cubic-bezier(.16,1,.3,1);
}
@keyframes authPop{
  from{transform:translateY(20px) scale(.96);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}
.auth-modal-close{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,0.04);border:1px solid var(--line);color:var(--text-2);
  display:grid;place-items:center;cursor:pointer;transition:.15s;z-index:2;
}
.auth-modal-close:hover{background:rgba(255,255,255,0.08);color:#fff}
.auth-modal-close svg{width:16px;height:16px}

.auth-tabs{
  display:flex;border-bottom:1px solid var(--line);
  padding:0 24px;padding-top:24px;gap:24px;
}
.auth-tab{
  background:none;border:none;color:var(--text-dim);
  padding:14px 0;font-size:14px;font-weight:700;cursor:pointer;
  font-family:inherit;letter-spacing:-0.01em;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:.2s;
}
.auth-tab:hover{color:var(--text-2)}
.auth-tab.active{color:#fff;border-bottom-color:var(--green)}

.auth-body{padding:28px 32px 24px}
.auth-title{
  font-family:'Unbounded',sans-serif;font-size:22px;font-weight:800;
  letter-spacing:-0.02em;margin:0 0 6px;color:#fff;
}
.auth-sub{font-size:13px;color:var(--text-dim);margin:0 0 24px}

.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-field{display:flex;flex-direction:column;gap:6px}
.auth-field label{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--text-dim);
}
.auth-field input{
  background:var(--bg-2);border:1px solid var(--line);
  padding:13px 14px;border-radius:10px;color:#fff;
  font-size:14px;font-family:inherit;transition:.15s;
}
.auth-field input::placeholder{color:var(--text-dim-2)}
.auth-field input:focus{
  outline:none;border-color:var(--green);
  background:var(--bg-1);
  box-shadow:0 0 0 3px rgba(166,255,94,0.1);
}

.auth-error{
  font-size:12.5px;color:var(--red);
  background:rgba(255,94,122,0.06);border:1px solid rgba(255,94,122,0.18);
  padding:9px 12px;border-radius:8px;
  display:none;
}
.auth-error.show{display:block}

.auth-submit{
  background:var(--green);color:#000;
  border:none;padding:14px;border-radius:10px;
  font-weight:800;font-size:14px;cursor:pointer;transition:.15s;
  font-family:inherit;letter-spacing:-0.01em;
  margin-top:6px;
}
.auth-submit:hover:not(:disabled){background:var(--green-2);transform:translateY(-1px)}
.auth-submit:disabled{opacity:.6;cursor:not-allowed}

.auth-foot{
  font-size:11px;color:var(--text-dim);
  text-align:center;margin-top:18px;line-height:1.6;
}

@media (max-width:480px){
  .auth-modal{max-width:100%;border-radius:14px}
  .auth-body{padding:24px 22px 20px}
  .auth-title{font-size:20px}
  .auth-tabs{padding:20px 22px 0}
}


/* ========== EMPTY NOTIF STATES ========== */
.notif-empty{
  padding:40px 20px;text-align:center;color:var(--text-dim);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.notif-empty svg{color:var(--text-dim-2);opacity:.7}
.notif-empty p{font-size:13.5px;font-weight:700;color:var(--text-2);margin:0}
.notif-empty span{font-size:12px;color:var(--text-dim);margin:0}

.notif-empty-big{
  padding:60px 30px;text-align:center;color:var(--text-dim);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  background:var(--bg-1);border:1px solid var(--line);border-radius:14px;
}
.notif-empty-big svg{color:var(--text-dim-2);opacity:.6}
.notif-empty-big h3{font-size:18px;font-weight:800;color:#fff;margin:6px 0 0;letter-spacing:-0.01em}
.notif-empty-big p{font-size:13px;color:var(--text-dim);margin:0;max-width:380px;line-height:1.6}


/* ========== LIMBO GAME ========== */
.game-locked{
  background:var(--bg-1);border:1px solid var(--line);border-radius:18px;
  padding:60px 30px;text-align:center;max-width:480px;margin:30px auto;
}
.game-locked .lock-icon{color:var(--text-dim-2);margin-bottom:18px;display:flex;justify-content:center}
.game-locked h2{font-family:'Unbounded',sans-serif;font-size:24px;margin:0 0 10px;letter-spacing:-0.02em}
.game-locked p{color:var(--text-dim);font-size:13.5px;margin:0 0 18px;line-height:1.6}

.limbo-game{
  display:grid;grid-template-columns:1.6fr 1fr;gap:18px;
  background:var(--bg-1);border:1px solid var(--line);border-radius:18px;
  padding:24px;margin-top:8px;
}
@media (max-width:900px){.limbo-game{grid-template-columns:1fr}}

.limbo-display{
  background:linear-gradient(180deg,#0a0a0a 0%,#070707 100%);
  border:1px solid var(--line);border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:340px;position:relative;overflow:hidden;
}
.limbo-display::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(166,255,94,0.04) 0%, transparent 70%);
  pointer-events:none;
}
.limbo-multiplier{
  font-family:'JetBrains Mono',monospace;font-size:84px;font-weight:800;
  color:var(--text);letter-spacing:-0.04em;line-height:1;
  text-shadow:0 0 60px rgba(166,255,94,0.05);
  transition:.2s;position:relative;
}
.limbo-multiplier .x{font-size:48px;color:var(--text-dim);margin-left:4px;font-weight:600}
.limbo-multiplier.win{color:var(--green);text-shadow:0 0 40px rgba(166,255,94,0.4)}
.limbo-multiplier.loss{color:var(--red);text-shadow:0 0 40px rgba(255,94,122,0.3)}
.limbo-multiplier.rolling{animation:pulse .4s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.6}to{opacity:1}}
.limbo-status{
  margin-top:18px;font-size:13px;color:var(--text-dim);
  font-weight:600;letter-spacing:0.02em;text-transform:uppercase;position:relative;
}
.limbo-status.win{color:var(--green)}
.limbo-status.loss{color:var(--red)}

.limbo-controls{display:flex;flex-direction:column;gap:14px}
.control-row{display:flex;flex-direction:column;gap:6px}
.control-row label{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--text-dim);
}
.bet-input-wrap{
  display:flex;align-items:center;gap:6px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:4px 6px 4px 14px;
}
.bet-input-wrap input{
  flex:1;background:none;border:none;color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;
  padding:10px 0;outline:none;min-width:0;
}
.bet-input-wrap input::-webkit-outer-spin-button,
.bet-input-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bet-input-wrap input{-moz-appearance:textfield}
.bet-currency{font-size:11.5px;color:var(--text-dim);font-weight:700;padding-right:6px}
.bet-half,.bet-double{
  background:var(--bg-3);border:1px solid var(--line);
  color:var(--text-2);padding:8px 12px;border-radius:7px;
  font-size:11px;font-weight:700;cursor:pointer;
  font-family:'JetBrains Mono',monospace;transition:.15s;
}
.bet-half:hover,.bet-double:hover{background:var(--bg-4);color:#fff}

.stats-row{flex-direction:row;gap:8px}
.stat{
  flex:1;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;
}
.stat-lbl{font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:3px}
.stat-val{font-size:14px;font-weight:800;color:#fff;font-family:'JetBrains Mono',monospace}

.limbo-bet-btn{
  background:var(--green);color:#000;border:none;padding:16px;
  border-radius:11px;font-weight:800;font-size:15px;cursor:pointer;
  font-family:inherit;letter-spacing:-0.01em;transition:.15s;margin-top:4px;
}
.limbo-bet-btn:hover:not(:disabled){background:var(--green-2);transform:translateY(-1px)}
.limbo-bet-btn:disabled{opacity:.5;cursor:not-allowed}

.limbo-balance{
  text-align:center;font-size:12.5px;color:var(--text-dim);margin-top:6px;
}
.limbo-balance strong{
  color:#fff;font-family:'JetBrains Mono',monospace;font-weight:800;
}

.limbo-history{
  margin-top:20px;background:var(--bg-1);border:1px solid var(--line);
  border-radius:14px;padding:18px 20px;
}
.limbo-history h3{
  font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--text-dim);margin:0 0 12px;
}
.history-list{display:flex;flex-direction:column;gap:6px}
.history-empty{color:var(--text-dim);font-size:13px;padding:14px;text-align:center}
.history-row{
  display:grid;grid-template-columns:1fr 1fr 1.4fr 1fr;gap:10px;
  padding:10px 14px;background:var(--bg-2);border-radius:8px;
  font-size:12.5px;font-family:'JetBrains Mono',monospace;font-weight:700;
}
.history-row.win{border-left:3px solid var(--green)}
.history-row.loss{border-left:3px solid var(--red)}
.hist-mult{color:#fff}
.history-row.win .hist-mult{color:var(--green)}
.history-row.loss .hist-mult{color:var(--red)}
.hist-target{color:var(--text-dim)}
.hist-bet{color:var(--text-2)}
.hist-payout{text-align:right}
.history-row.win .hist-payout{color:var(--green)}
.history-row.loss .hist-payout{color:var(--red)}

@media (max-width:600px){
  .limbo-multiplier{font-size:64px}
  .limbo-multiplier .x{font-size:36px}
  .limbo-display{min-height:260px}
  .limbo-game{padding:16px;gap:14px}
  .history-row{grid-template-columns:1fr 1fr 1fr;font-size:11px;padding:9px 11px}
  .hist-target{display:none}
}


/* ========== BETS EMPTY STATE ========== */
.bets-empty{
  padding:50px 20px;text-align:center;color:var(--text-dim);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.bets-empty svg{color:var(--text-dim-2);opacity:.5}
.bets-empty p{font-size:13px;color:var(--text-dim);margin:0}


/* ========== DICE GAME ========== */
.dice-game{
  display:grid;grid-template-columns:1.6fr 1fr;gap:18px;
  background:var(--bg-1);border:1px solid var(--line);border-radius:18px;
  padding:24px;margin-top:8px;
}
@media (max-width:900px){.dice-game{grid-template-columns:1fr}}

.dice-display{
  background:linear-gradient(180deg,#0a0a0a 0%,#070707 100%);
  border:1px solid var(--line);border-radius:14px;
  padding:36px 30px;display:flex;flex-direction:column;align-items:center;
  min-height:340px;justify-content:center;gap:30px;
}
.dice-roll{
  font-family:'JetBrains Mono',monospace;font-size:84px;font-weight:800;
  color:var(--text);letter-spacing:-0.04em;line-height:1;transition:.2s;
}
.dice-roll.win{color:var(--green);text-shadow:0 0 40px rgba(166,255,94,0.4)}
.dice-roll.loss{color:var(--red);text-shadow:0 0 40px rgba(255,94,122,0.3)}
.dice-status{font-size:13px;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:0.02em;margin-top:-18px}
.dice-status.win{color:var(--green)}
.dice-status.loss{color:var(--red)}

.dice-bar{
  position:relative;width:100%;max-width:380px;height:14px;
}
.dice-bar-bg{
  position:absolute;inset:0;background:var(--bg-3);border-radius:7px;border:1px solid var(--line);
}
.dice-bar-loss{
  position:absolute;top:0;bottom:0;background:rgba(255,94,122,0.4);border-radius:7px 0 0 7px;
  transition:.2s;
}
.dice-bar-win{
  position:absolute;top:0;bottom:0;background:rgba(166,255,94,0.45);border-radius:0 7px 7px 0;
  transition:.2s;
}
.dice-bar-marker{
  position:absolute;top:-3px;bottom:-3px;width:3px;background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,0.6);transition:.2s;
}
.dice-bar-pin{
  position:absolute;top:-12px;width:14px;height:14px;border-radius:50%;
  background:var(--green);border:2px solid #000;
  transform:translateX(-50%);transition:left .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 12px rgba(166,255,94,0.6);display:none;
}
.dice-bar-pin.show{display:block}
.dice-bar-labels{
  display:flex;justify-content:space-between;width:100%;max-width:380px;
  margin-top:8px;font-size:10.5px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;
}

.dice-mode-toggle{
  display:flex;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px;
}
.dice-mode{
  flex:1;padding:10px;background:none;border:none;color:var(--text-dim);
  font-size:12.5px;font-weight:700;cursor:pointer;border-radius:7px;
  font-family:inherit;transition:.15s;
}
.dice-mode.active{background:var(--bg-3);color:#fff}
.dice-mode:hover:not(.active){color:var(--text-2)}

@media (max-width:600px){
  .dice-roll{font-size:60px}
  .dice-game{padding:16px;gap:14px}
}

/* ========== CHAT (live) ========== */
.chat-msgs{padding:0 16px}
.chat-msgs .chat-msg{
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.03);
  font-size:13px;line-height:1.45;
  animation:fadeInMsg .25s ease-out;
}
.chat-msgs .chat-msg:last-child{border-bottom:none}
.chat-msgs .chat-msg .cm-user{font-weight:700;color:var(--green);margin-right:6px;font-size:12px}
.chat-msgs .chat-msg .cm-text{color:var(--text-2);word-wrap:break-word;overflow-wrap:break-word}
@keyframes fadeInMsg{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.chat input:disabled{opacity:.6;cursor:not-allowed}


/* ========== WALLET DISPLAY TOGGLE ========== */
.wd-display-toggle{
  display:flex;background:var(--bg-3);border:1px solid var(--line);
  border-radius:7px;padding:2px;gap:2px;
}
.wd-toggle-btn{
  background:none;border:none;color:var(--text-dim);
  padding:5px 10px;font-size:10.5px;font-weight:700;cursor:pointer;
  border-radius:5px;font-family:inherit;text-transform:uppercase;
  letter-spacing:0.04em;transition:.15s;
}
.wd-toggle-btn.active{background:var(--green);color:#000}
.wd-toggle-btn:hover:not(.active){color:var(--text-2)}

/* When fiat mode active on body, swap displays everywhere */
body.fiat-display .wd-row .wd-val{display:none}
body.fiat-display .wd-row .wd-usd{
  font-size:14px;font-weight:800;color:#fff;
  font-family:'JetBrains Mono',monospace;
}
body:not(.fiat-display) .wd-usd{
  font-size:11px;color:var(--text-dim);font-weight:600;margin-top:2px;
}


/* ========================================================== */
/* STAKE-STYLE GAME LAYOUT (Limbo + Dice)                    */
/* ========================================================== */
.game-page{max-width:1280px}
.stake-game{
  display:grid;grid-template-columns:340px 1fr;gap:0;
  background:var(--bg-1);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;
  min-height:620px;
  box-shadow:0 4px 24px rgba(0,0,0,0.4);
}
@media (max-width:960px){
  .stake-game{grid-template-columns:1fr;min-height:0}
}

/* Left bet panel */
.bet-panel{
  background:var(--bg-2);padding:22px 20px;
  display:flex;flex-direction:column;gap:14px;
  border-right:1px solid var(--line);
}
@media (max-width:960px){
  .bet-panel{border-right:none;border-bottom:1px solid var(--line)}
}

.bet-tabs{
  display:flex;background:var(--bg-3);border-radius:10px;padding:4px;gap:4px;
  margin-bottom:6px;
}
.bet-tab{
  flex:1;background:none;border:none;color:var(--text-dim);
  padding:11px;font-weight:700;font-size:13px;cursor:pointer;
  border-radius:7px;font-family:inherit;transition:.15s;
}
.bet-tab.active{background:var(--bg-1);color:var(--green)}
.bet-tab:hover:not(.active){color:var(--text-2)}

.bet-field{display:flex;flex-direction:column;gap:7px}
.bet-label{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--text-dim);
}
.bet-input-row{display:flex;gap:6px;align-items:stretch}

.bet-input-coin{
  flex:1;display:flex;align-items:center;gap:9px;
  background:var(--bg-3);border:1px solid var(--line);
  border-radius:8px;padding:0 12px;min-width:0;
  transition:border-color .15s;
}
.bet-input-coin:focus-within{border-color:var(--green)}
.bet-input-coin img{
  width:18px;height:18px;flex-shrink:0;object-fit:contain;
}
.bet-input-coin input{
  flex:1;background:none;border:none;color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;
  padding:11px 0;outline:none;min-width:0;
}
.bet-input-coin input[readonly]{color:var(--text-2);cursor:default}
.bet-input-coin input::-webkit-outer-spin-button,
.bet-input-coin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bet-input-coin input{-moz-appearance:textfield}
.bet-suffix{
  font-family:'JetBrains Mono',monospace;font-size:13px;
  color:var(--text-dim);font-weight:700;flex-shrink:0;
}

.bet-quick{
  background:var(--bg-3);border:1px solid var(--line);
  color:var(--text-2);padding:0 14px;border-radius:8px;
  font-size:12px;font-weight:700;cursor:pointer;
  font-family:'JetBrains Mono',monospace;transition:.15s;
  min-width:42px;
}
.bet-quick:hover{background:var(--bg-4);color:#fff;border-color:var(--line-2)}

.place-bet-btn{
  background:var(--green);color:#000;border:none;
  padding:18px;border-radius:10px;font-weight:800;font-size:15px;
  cursor:pointer;font-family:inherit;letter-spacing:0.01em;
  transition:.15s;margin-top:auto;text-transform:uppercase;
}
.place-bet-btn:hover:not(:disabled){background:var(--green-2);transform:translateY(-1px)}
.place-bet-btn:disabled{opacity:.5;cursor:not-allowed}

/* Right display area */
.game-display{
  background:var(--bg-1);
  display:flex;align-items:center;justify-content:center;
  padding:40px 30px;position:relative;min-height:520px;
}

/* ===== LIMBO display ===== */
.limbo-display-card{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:16px;padding:90px 100px;min-width:380px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 20px 60px -20px rgba(0,0,0,0.6);
}
.limbo-mult-big{
  font-family:'JetBrains Mono',monospace;
  font-size:88px;font-weight:800;color:#fff;
  letter-spacing:-0.04em;line-height:1;transition:.2s;
}
.limbo-mult-big .x{font-size:56px;color:var(--text-dim);font-weight:600;margin-left:2px}
.limbo-mult-big.win{color:var(--green);text-shadow:0 0 50px rgba(166,255,94,0.5)}
.limbo-mult-big.loss{color:var(--red);text-shadow:0 0 40px rgba(255,94,122,0.4)}
.limbo-mult-big.rolling{animation:limbo-pulse .35s ease-in-out infinite alternate}
@keyframes limbo-pulse{from{opacity:.7}to{opacity:1}}

/* ===== DICE display ===== */
.dice-display-card{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  width:100%;max-width:560px;padding:10px 0;
}
.dice-img{
  width:160px;height:160px;object-fit:contain;
  filter:drop-shadow(0 18px 36px rgba(255,255,255,0.08));
  user-select:none;-webkit-user-drag:none;
  transition:transform .35s;
}
.dice-img.rolling{animation:dice-spin .6s linear}
@keyframes dice-spin{
  from{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(180deg) scale(.92)}
  to{transform:rotate(360deg) scale(1)}
}

.dice-digits{
  display:flex;gap:6px;align-items:center;
  font-family:'JetBrains Mono',monospace;
}
.dd{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:7px;padding:11px 13px;
  font-size:22px;font-weight:800;color:#fff;min-width:38px;
  text-align:center;line-height:1;
}
.dd-dot{font-size:22px;font-weight:800;color:#fff;padding:0 2px}

.dice-status{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--text-dim);min-height:14px;
}
.dice-status.win{color:var(--green)}
.dice-status.loss{color:var(--red)}

.dice-slider-wrap{
  width:100%;max-width:480px;position:relative;padding-top:50px;
}
.dice-slider-tooltip{
  position:absolute;top:8px;
  background:var(--bg-3);border:1px solid var(--line);
  border-radius:6px;padding:5px 11px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;
  color:#fff;transform:translateX(-50%);pointer-events:none;
  transition:left .15s;
}
.dice-slider-tooltip::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--bg-3);
}
.dice-slider{
  position:relative;height:14px;width:100%;
  background:var(--bg-3);border:1px solid var(--line);border-radius:7px;
  cursor:pointer;
}
.ds-loss{
  position:absolute;top:0;bottom:0;background:#ff4d6d;
  border-radius:6px 0 0 6px;transition:.15s;
}
.ds-win{
  position:absolute;top:0;bottom:0;background:var(--green);
  border-radius:0 6px 6px 0;transition:.15s;
}
.ds-handle{
  position:absolute;top:50%;width:30px;height:38px;
  background:#fff;border-radius:5px;
  transform:translate(-50%,-50%);cursor:grab;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
  transition:left .15s;z-index:3;
}
.ds-handle:active{cursor:grabbing}
.ds-handle-icon{color:#666;display:flex}
.ds-pin{
  position:absolute;top:-22px;width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:10px solid var(--green);
  transform:translateX(-50%);
  display:none;filter:drop-shadow(0 0 6px rgba(166,255,94,0.6));
}
.ds-pin.show{display:block}

.dice-mode-row{
  display:flex;align-items:center;gap:18px;margin-top:6px;
}
.dice-mode-label{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--text-dim);
}
.dice-mode-toggle{
  display:flex;gap:6px;background:var(--bg-2);border:1px solid var(--line);
  padding:4px;border-radius:9px;
}
.dice-mode-btn{
  background:none;border:none;color:var(--text-dim);
  width:36px;height:32px;border-radius:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.dice-mode-btn.active{background:var(--green);color:#000}
.dice-mode-btn:hover:not(.active){color:#fff}

@media (max-width:600px){
  .limbo-mult-big{font-size:54px}
  .limbo-mult-big .x{font-size:36px}
  .limbo-display-card{padding:40px 30px;min-width:0}
  .dice-img{width:100px;height:100px}
  .dd{font-size:18px;padding:9px 11px;min-width:32px}
  .game-display{padding:20px 14px}
}


/* ========== SEARCH DROPDOWN ========== */
.search{position:relative}
.search-dropdown{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,0.9),0 0 0 1px rgba(255,255,255,0.02);
  padding:6px;z-index:80;
  max-height:400px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:.18s cubic-bezier(.4,0,.2,1);
}
.search-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.search-result{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-radius:8px;text-decoration:none;
  color:var(--text);transition:.12s;cursor:pointer;
}
.search-result:hover{background:var(--bg-3)}
.sr-name{font-size:13px;font-weight:700;color:#fff}
.sr-tag{
  font-size:10px;color:var(--green);font-weight:700;
  text-transform:uppercase;letter-spacing:0.05em;
  background:rgba(166,255,94,0.08);border:1px solid rgba(166,255,94,0.2);
  padding:3px 8px;border-radius:100px;
}
.search-empty{padding:18px;text-align:center;color:var(--text-dim);font-size:12.5px}


/* ========== AUTO MODE PANEL ========== */
.auto-only{display:none}
.bet-panel.is-auto .manual-only{display:none}
.bet-panel.is-auto .auto-only{display:flex}
.bet-panel.is-auto .auto-only.bet-field{display:flex;flex-direction:column}

.auto-running-info{
  background:var(--bg-3);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;
  font-size:11.5px;color:var(--text-dim);font-weight:600;
  display:none;text-align:center;font-family:'JetBrains Mono',monospace;
}
.auto-running-info.active{display:block}
.auto-running-info strong{color:#fff;font-weight:800}


/* ========== BLACKJACK TABLE ========== */
.bj-rules{
  background:var(--bg-3);border:1px solid var(--line);
  border-radius:9px;padding:11px 14px;
  display:flex;flex-direction:column;gap:5px;
  font-size:11.5px;color:var(--text-dim);
}
.bj-rule{display:flex;justify-content:space-between;align-items:center}
.bj-rule strong{color:var(--green);font-weight:800;font-family:'JetBrains Mono',monospace}

.bj-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
}
.bj-act-btn{
  background:var(--bg-3);border:1px solid var(--line);
  color:#fff;padding:13px;border-radius:9px;
  font-weight:800;font-size:12.5px;cursor:pointer;
  font-family:inherit;text-transform:uppercase;letter-spacing:0.04em;
  transition:.15s;
}
.bj-act-btn:hover:not(:disabled){background:var(--bg-4);border-color:var(--green)}
.bj-act-btn:disabled{opacity:.35;cursor:not-allowed}
.bj-act-btn.primary{background:var(--green);color:#000;border-color:var(--green)}

.bj-table{
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:560px;gap:24px;padding:14px 0;
}
.bj-side-label{
  font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--text-dim);
  display:flex;align-items:center;gap:10px;justify-content:center;
}
.bj-side-total{
  background:var(--bg-3);border:1px solid var(--line);
  padding:3px 10px;border-radius:100px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  font-weight:800;color:#fff;min-width:24px;text-align:center;
}
.bj-side-total.bust{color:var(--red);border-color:var(--red)}
.bj-side-total.win{color:var(--green);border-color:var(--green)}
.bj-side-total.bj{color:#ffc85e;border-color:#ffc85e}
.bj-side-total:empty{display:none}

.bj-cards{
  display:flex;gap:8px;align-items:flex-end;justify-content:center;
  min-height:120px;flex-wrap:wrap;margin-top:10px;
}
.bj-cards.split-hands{gap:24px}

.bj-card{
  width:74px;height:104px;background:#fff;border-radius:8px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:8px 9px;font-family:'Manrope',sans-serif;
  box-shadow:0 6px 16px rgba(0,0,0,0.6),0 1px 0 rgba(255,255,255,0.1) inset;
  position:relative;
  animation:bj-deal .4s cubic-bezier(.4,0,.2,1) backwards;
}
@keyframes bj-deal{
  from{transform:translateY(-30px) rotate(-8deg);opacity:0}
  to{transform:translateY(0) rotate(0);opacity:1}
}
.bj-card.red{color:#d92d4a}
.bj-card.black{color:#1a1a1a}
.bj-card .bj-r{font-size:18px;font-weight:900;line-height:1;letter-spacing:-0.04em}
.bj-card .bj-s{font-size:22px;line-height:1;text-align:right;align-self:flex-end}
.bj-card.back{
  background:linear-gradient(135deg,#0a3a14 0%,#062208 50%,#0a3a14 100%);
  border:1px solid rgba(166,255,94,0.3);
  position:relative;overflow:hidden;
}
.bj-card.back::before{
  content:"";position:absolute;inset:6px;border-radius:5px;
  background:repeating-linear-gradient(45deg, rgba(166,255,94,0.08) 0 4px, transparent 4px 8px);
}

.bj-divider{
  width:140px;height:1px;background:linear-gradient(90deg, transparent, var(--line) 50%, transparent);
}

.bj-player{display:flex;flex-direction:column;align-items:center;width:100%}
.bj-dealer{display:flex;flex-direction:column;align-items:center;width:100%}

.bj-split-wrap{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}
.bj-split-hand{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:10px;border-radius:10px;border:1px dashed transparent;
  transition:.15s;
}
.bj-split-hand.active{border-color:var(--green);background:rgba(166,255,94,0.04)}
.bj-split-label{
  font-size:9.5px;font-weight:800;text-transform:uppercase;color:var(--text-dim);
  display:flex;gap:8px;align-items:center;
}
.bj-split-label .bj-side-total{font-size:10px;padding:2px 7px}

.bj-message{
  margin-top:10px;font-size:13px;font-weight:700;color:var(--text-2);
  text-align:center;min-height:18px;
}
.bj-message.win{color:var(--green)}
.bj-message.loss{color:var(--red)}
.bj-message.push{color:#ffc85e}

@media (max-width:600px){
  .bj-card{width:62px;height:88px;padding:6px 7px}
  .bj-card .bj-r{font-size:15px}
  .bj-card .bj-s{font-size:18px}
}