/* ============================================================
   SlotOK Casino — style.css
   All styles combined from index.html
   ============================================================ */

:root {
      --bg: #06050c; --text: #f0e8ff; --box: #110f1c; --border: #252035;
      --accent: #d4af37; --input: #1a1730; --green: #3dd68c; --red: #f04060;
      --accent2: #ffdb6a; --sub: #8878aa; --glow: rgba(212,175,55,.15);
      --r-sm: 13px; --r-md: 20px; --r-lg: 26px;
      --bevel: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.4);
      --elev-1: 0 10px 24px -10px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.35);
      --elev-2: 0 18px 44px -14px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.4);
      --ease-tactile: cubic-bezier(.22,.9,.32,1.24);
      --ease-premium: cubic-bezier(.16,1,.3,1);
      --glow-accent-soft: 0 0 40px -10px rgba(212,175,55,.35);
      --glow-accent-strong: 0 0 70px -14px rgba(212,175,55,.6);
    }
    body { font-family: 'Rajdhani', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding-bottom: 90px; user-select: none; }
    body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
      background: radial-gradient(ellipse 70% 40% at 50% 100%, rgba(180,120,0,.09), transparent),
                  radial-gradient(ellipse 50% 30% at 10% 10%, rgba(80,40,160,.08), transparent),
                  radial-gradient(ellipse 60% 35% at 100% 0%, rgba(212,175,55,.05), transparent); }
    .container { position:relative; z-index:1; }

    .header { padding: 12px 16px; background: rgba(6,5,12,.92); border-bottom: 1px solid rgba(212,175,55,.12); position: sticky; top: 0; z-index: 900; display:flex; justify-content:space-between; align-items:center; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(212,175,55,.16), 0 14px 30px -16px rgba(0,0,0,.8); }
    .header h1 { margin: 0; font-size: 22px; font-family:'Orbitron',monospace; font-weight:900; font-style: normal; background: linear-gradient(135deg,var(--accent),var(--accent2),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:2px; filter: drop-shadow(0 2px 8px rgba(212,175,55,.25)); }

    .container { padding: 15px; }
    .hidden { display: none !important; }
    .box { background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,0) 45%), var(--box); border-radius: var(--r-md); padding: 16px; border: 1px solid var(--border); margin-bottom: 15px; box-shadow: var(--bevel), var(--elev-1); }

    button { padding: 14px; width: 100%; border: none; border-radius: var(--r-sm); font-weight: 700; font-size: 14px; cursor: pointer; background: rgba(255,255,255,.07); color: var(--text); margin-bottom: 8px; transition: transform .14s var(--ease-tactile), box-shadow .14s ease, filter .15s ease; font-family:'Rajdhani',sans-serif; letter-spacing:.3px; box-shadow: var(--bevel), 0 6px 16px -8px rgba(0,0,0,.6); }
    button:active { transform: translateY(2px) scale(0.98); filter:brightness(.88); box-shadow: var(--bevel), 0 2px 6px -3px rgba(0,0,0,.5); }
    button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .btn-gold { background: linear-gradient(155deg, #f4d78a, var(--accent) 45%, #a9791c); color: #241800; font-weight:800; text-shadow: 0 1px 0 rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.25), 0 10px 26px -8px rgba(212,175,55,.5); }
    .btn-gold:active { box-shadow: inset 0 3px 8px rgba(0,0,0,.4), 0 4px 12px -6px rgba(212,175,55,.4); }
    .btn-red { background: linear-gradient(155deg,#ff8a9c,var(--red) 45%,#8a1030); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.25), 0 10px 24px -8px rgba(240,64,96,.4); }
    .btn-red:active { box-shadow: inset 0 3px 8px rgba(0,0,0,.4), 0 4px 10px -6px rgba(240,64,96,.35); }
    .btn-green { background: linear-gradient(155deg,#8af0c4,var(--green) 45%,#0f6b45); color: #062015; font-weight:800; text-shadow: 0 1px 0 rgba(255,255,255,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.22), 0 10px 24px -8px rgba(61,214,140,.4); }
    .btn-green:active { box-shadow: inset 0 3px 8px rgba(0,0,0,.35), 0 4px 10px -6px rgba(61,214,140,.35); }
    .btn-outline { background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--sub); box-shadow: var(--bevel), var(--elev-1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    .btn-outline:hover { box-shadow: var(--bevel), var(--elev-1), var(--glow-accent-soft); }
    .btn-tg { background: linear-gradient(155deg, #6fc3ec, #0e76a8 45%, #0a4f70); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 6px rgba(0,0,0,.25), 0 10px 24px -8px rgba(34,158,217,.4); }

    input, textarea { width: 100%; padding: 15px 16px; margin-bottom: 12px; background: var(--input); border: 1.5px solid var(--border); color: var(--text); border-radius: var(--r-sm); font-size: 16px; box-sizing: border-box; text-align: center; font-weight: 600; font-family:'Rajdhani',sans-serif; transition: border .2s, box-shadow .2s; outline:none; min-height:48px; box-shadow: inset 0 2px 8px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.03); }
    input:focus, textarea:focus { border-color: rgba(212,175,55,.4); box-shadow: inset 0 2px 8px rgba(0,0,0,.4), 0 0 0 3px rgba(212,175,55,.08); }
    textarea { text-align:left; font-weight:500; line-height:1.4; min-height:70px; resize:vertical; }
    input[type="checkbox"], input[type="radio"], input[type="range"], input[type="color"], input[type="file"] { width:auto; min-height:0; padding:0; margin-bottom:0; }

    .hero-banner { width: 100%; min-height: 130px; background: linear-gradient(135deg, #110a00, #1e1200, #0d0900); border-radius: 18px; margin-bottom: 16px; border: 1px solid rgba(212,175,55,.2); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; position:relative; overflow:hidden; box-shadow: 0 8px 32px rgba(212,175,55,.06); }
    .hero-title { font-size: 24px; font-weight: 900; color: var(--accent); margin-bottom: 5px; font-family:'Orbitron',monospace; letter-spacing:1px; }
    
    .games-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .games-scroll::-webkit-scrollbar { display:none; }
    .game-thumb { min-width: 82px; height: 90px; background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,0) 45%), var(--box); border: 1px solid var(--border); border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; gap: 5px; transition: transform .14s var(--ease-tactile), box-shadow .14s, filter .15s; -webkit-tap-highlight-color:transparent; box-shadow: var(--bevel), var(--elev-1); }
    .game-thumb:active { transform: scale(.92) translateY(1px); filter:brightness(.8); box-shadow: var(--bevel), 0 4px 10px -6px rgba(0,0,0,.5); }
    .game-thumb:hover, .game-card:hover { border-color: rgba(212,175,55,.35); box-shadow: var(--bevel), var(--elev-1), var(--glow-accent-soft); }
    .game-thumb span.icon { font-size: 30px; line-height:1; }
    .game-thumb span.label { font-size: 10px; color: var(--sub); font-weight:700; }

    .game-card { background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,0) 45%), var(--box); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; margin-bottom: 10px; display:flex; align-items:center; gap:15px; cursor: pointer; transition: transform .14s var(--ease-tactile), box-shadow .14s, filter .15s; box-shadow: var(--bevel), var(--elev-1); }
    .game-card:active { transform:scale(.98) translateY(1px); filter:brightness(.85); box-shadow: var(--bevel), 0 4px 10px -6px rgba(0,0,0,.5); }
    .game-icon { font-size: 36px; } .game-title { font-size: 15px; font-weight: 700; } .game-desc { font-size: 11px; color: var(--sub); margin-top:2px; }

    /* ІГРИ */
    .reels-container { background: #000; border: 1px solid var(--accent); border-radius: var(--r-md); padding: 15px; display: flex; justify-content: center; gap: 5px; margin-bottom: 15px; box-shadow: inset 0 4px 14px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.03); }
    .reel { font-size: 45px; width: 70px; height: 90px; line-height: 90px; background: #fff; color: #000; border-radius: var(--r-sm); text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 4px rgba(0,0,0,.08), 0 6px 14px -6px rgba(0,0,0,.5); }

    .bet-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-bottom: 15px; }
    .bet-btn { padding: 10px; border-radius: var(--r-sm); background: #222; color: #888; font-size: 11px; text-align: center; border: 1px solid #333; cursor: pointer; box-shadow: var(--bevel), var(--elev-1); transition: transform .14s var(--ease-tactile), box-shadow .14s, filter .15s; }
    .bet-btn:active { transform: translateY(1px) scale(.97); filter:brightness(.85); box-shadow: var(--bevel), 0 4px 10px -6px rgba(0,0,0,.5); }
    .bet-btn.selected { border-color: var(--accent); color: #fff; background: #333; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.25), 0 8px 22px -8px rgba(212,175,55,.45); }

    .chests-grid { display: grid; gap: 8px; margin-bottom: 15px; grid-template-columns: repeat(3, 1fr); }
    .chest-item { background: #222; border-radius: var(--r-sm); height: 70px; display: flex; align-items: center; justify-content: center; font-size: 35px; border:1px solid #333; cursor:pointer; box-shadow: var(--bevel), var(--elev-1); transition: transform .14s var(--ease-tactile), box-shadow .14s, filter .15s;}
    .chest-item:active { transform: translateY(1px) scale(.96); filter:brightness(.85); box-shadow: var(--bevel), 0 4px 10px -6px rgba(0,0,0,.5); }

    .mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 15px; }
    .mine-cell { aspect-ratio: 1; background: #222; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 20px; border: 1px solid #333; cursor:pointer; box-shadow: var(--bevel), var(--elev-1); transition: transform .14s var(--ease-tactile), box-shadow .14s, filter .15s;}
    .mine-cell:active { transform: translateY(1px) scale(.94); filter:brightness(.85); box-shadow: var(--bevel), 0 4px 10px -6px rgba(0,0,0,.5); }
    .mine-cell.revealed { background: #111; border-color: #000; box-shadow: inset 0 4px 10px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.02); }

    .plinko-board { position: relative; width: 100%; height: 250px; background: #111; border-radius: var(--r-md); margin-bottom: 10px; border: 1px solid #333; overflow: hidden; box-shadow: inset 0 4px 14px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.03); }
    .plinko-ball { position: absolute; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; display: none; box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 10px rgba(212,175,55,.5); }
    .plinko-buckets { display: flex; justify-content: space-between; } .bucket { font-size: 10px; background: #222; width: 14%; text-align: center; border-top: 2px solid #444; padding: 3px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.3); }

    .crash-screen { background: #111; height: 200px; border-radius: var(--r-md); border: 1px solid #333; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; overflow: hidden; box-shadow: inset 0 4px 14px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.03); }
    .crash-rocket { font-size: 40px; position: absolute; bottom: 20px; left: 20px; transition: 0.1s linear; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
    .crash-multiplier { font-size: 40px; font-weight: bold; color: #fff; z-index: 10; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
    .crash-graph { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; }

    /* ПОКЕР */
    .poker-table { background: radial-gradient(ellipse at center, #1a5c2a 0%, #0d3318 100%); border-radius: 12px; border: 3px solid #8B6914; padding: 15px; margin-bottom: 15px; min-height: 200px; box-shadow: inset 0 4px 20px rgba(0,0,0,.5), 0 12px 30px -12px rgba(0,0,0,.6); }
    .poker-cards { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
    .card { width: 50px; height: 75px; background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: bold; border: 1px solid #ddd; color: #000; flex-direction: column; line-height: 1.1; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 16px -6px rgba(0,0,0,.5); cursor: pointer; transition: transform 0.2s, box-shadow .2s, filter .15s; }
    .card.red-card { color: #cc0000; }
    .card.selected { transform: translateY(-8px); border-color: var(--accent); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 22px -8px rgba(212,175,55,.55), 0 4px 12px rgba(212,175,55,0.35); }
    .card.face-down { background: linear-gradient(135deg, #1a3a6b 0%, #0d1f3d 100%); color: transparent; }
    .card.face-down::after { content: "🂠"; font-size: 30px; color: rgba(255,255,255,0.3); }
    .poker-info { text-align: center; padding: 8px; background: rgba(0,0,0,0.4); border-radius: var(--r-sm); margin: 8px 0; color: #fff; font-size: 14px; box-shadow: inset 0 2px 8px rgba(0,0,0,.4); }
    .poker-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

    /* АДМІНКА & ТОП */
    .admin-user-card { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #1a1a1a; margin-bottom: 8px; border-radius: var(--r-sm); border: 1px solid #333; color: #fff; cursor: pointer; box-shadow: var(--bevel), var(--elev-1); transition: transform .12s, box-shadow .14s; }
    .admin-user-card:active { transform: scale(.98); }
    .rank { color: var(--accent); font-weight: bold; width: 30px; text-align:center; text-shadow: 0 1px 3px rgba(212,175,55,.3); }
    table { width: 100%; border-collapse: collapse; } td { padding: 12px 5px; border-bottom: 1px solid #333; font-size: 14px; } tr:hover td { box-shadow: inset 0 -1px 0 rgba(255,255,255,.03); background: rgba(255,255,255,.02); }

    /* NAV & MODALS */
    .bottom-nav { position: fixed; bottom: 0; width: 100%; background: rgba(6,5,12,.95); border-top: 1px solid rgba(255,255,255,.06); display: flex; justify-content: space-around; align-items: center; z-index: 1000; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 -10px 26px -12px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.04); }
    .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--sub); font-size: 9px; font-weight:700; letter-spacing:.5px; width: 16%; height: 54px; cursor: pointer; border-radius: var(--r-sm); transition: color .18s, background .18s, box-shadow .18s, transform .18s var(--ease-tactile); -webkit-tap-highlight-color: transparent; }
    .nav-item span.icon { font-size: 20px; margin-bottom: 3px; line-height:1; }
    .nav-item.active { color: var(--accent); background: linear-gradient(160deg, rgba(212,175,55,.2), rgba(212,175,55,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 16px -8px rgba(212,175,55,.4); transform: translateY(-2px); }
    
    #loading-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: #000; z-index:9999; display:flex; justify-content:center; align-items:center; color:var(--accent); font-size:24px; flex-direction: column; transition: opacity 0.5s; }
    #auth-screen, .full-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,175,55,.05), transparent), #000; z-index: 5000; padding: 20px; box-sizing: border-box; overflow-y: auto; }

    /* Повноекранний чат ПП — position:fixed, а не звичайний блок у потоці сторінки,
       щоб поле вводу завжди було приклеєне до низу видимої області екрана (а не
       ховалось нижче через 100vh на мобільних, чи "їхало" разом зі скролом body). */
    .pm-thread-fullscreen { position: fixed; inset: 0; z-index: 1200; background: #050505; display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
    .screen.screen-enter { animation: cascadeIn .32s cubic-bezier(.22,1,.36,1) both; }
    #toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 6000; width: 90%; max-width: 400px; pointer-events: none; }
    .toast { background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,0) 45%), rgba(17,15,28,.85); color: var(--text); padding: 13px 16px; margin-bottom: 10px; border-radius: var(--r-md); display: flex; align-items: center; border-left: 4px solid var(--accent); box-shadow: var(--bevel), var(--elev-2); font-size: 14px; font-weight: 600; animation: slideIn 0.3s ease; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-family:'Rajdhani',sans-serif; }
    .toast.success { border-left-color: var(--green); }
    .toast.error { border-left-color: var(--red); }
    @keyframes slideIn { from { opacity:0; transform: translateY(-10px); } to { opacity:1; transform: translateY(0); } }
    
    .contact-row { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #1a1a1a; border-radius: var(--r-sm); margin-bottom: 8px; border: 1px solid #333; box-shadow: var(--bevel), var(--elev-1); transition: transform .12s, box-shadow .14s; }
    .contact-row:active { transform: scale(.98); }
    .profile-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
    .avatar-large { width: 72px; height: 72px; background: linear-gradient(135deg,#2a1a00,#4a2e00); border-radius: 50%; border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 30px; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 18px -6px rgba(0,0,0,.5), 0 0 20px rgba(212,175,55,.2); }
    .avatar-large img { width: 100%; height: 100%; object-fit: cover; }
 

    .pay-btn.selected { border-color: var(--accent); color: var(--accent); background: rgba(212, 175, 55, 0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.2), 0 8px 22px -8px rgba(212,175,55,.4); }

    /* TELEGRAM ДЕПОЗИТ */

    .amount-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 15px; }
    .amount-btn { background: #222; border: 1px solid #333; border-radius: var(--r-sm); padding: 10px 5px; text-align: center; font-size: 13px; color: #ccc; cursor: pointer; font-weight: bold; box-shadow: var(--bevel), var(--elev-1); }
    .amount-btn.selected { border-color: #229ED9; color: #229ED9; background: rgba(34, 158, 217, 0.1); }

    /* ВИВІД */
    .withdraw-method { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
    .wm-btn { background: #222; border: 1px solid #333; border-radius: var(--r-sm); padding: 8px 12px; font-size: 12px; color: #aaa; cursor: pointer; box-shadow: var(--bevel), var(--elev-1); }
    .wm-btn.selected { border-color: var(--green); color: var(--green); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.2), 0 8px 22px -8px rgba(61,214,140,.4); }
    /* Withdraw-panel-specific method chips (scoped so the shared deposit-panel .wm-btn base rule stays untouched) */
    .withdraw-method .wm-btn { flex: 1; text-align: center; transition: transform .14s var(--ease-tactile), box-shadow .14s ease, background .15s ease, color .15s ease, border-color .15s ease; }
    .withdraw-method .wm-btn:active { transform: scale(.94); }
    .withdraw-method .wm-btn.selected { background: linear-gradient(155deg,#8af0c4,var(--green) 45%,#0f6b45); border-color: transparent; color: #062015; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.22), 0 10px 24px -8px rgba(61,214,140,.5); }
    .pending-withdraw { background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,0) 45%), #1a1a1a; border: 1px solid #333; border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; box-shadow: var(--bevel), var(--elev-1); }
    .pw-status { font-size: 11px; padding: 4px 10px; border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 6px rgba(0,0,0,.25); font-weight:700; white-space:nowrap; }
    .pw-pending { background: rgba(212,175,55,0.16); color: var(--accent); border: 1px solid rgba(212,175,55,.3); }
    .pw-done { background: rgba(76,217,100,0.16); color: var(--green); border: 1px solid rgba(76,217,100,.3); }
    .pw-rejected { background: rgba(240,64,96,0.16); color: #f04060; border: 1px solid rgba(240,64,96,.3); }

    /* ЩОДЕННИЙ БОНУС */
    .daily-bonus-modal-content { padding: 20px; text-align: center; }
    .bonus-icon { font-size: 60px; animation: bounce 0.5s ease infinite alternate; filter: drop-shadow(0 6px 14px rgba(212,175,55,.35)); }
    @keyframes bounce { from { transform: scale(1); } to { transform: scale(1.1); } }
    .bonus-amount { font-size: 36px; font-weight: 900; color: var(--accent); margin: 10px 0; text-shadow: 0 2px 10px rgba(212,175,55,.35); }
    .streak-dots { display: flex; justify-content: center; gap: 8px; margin: 15px 0; }
    .streak-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #333; display: flex; align-items: center; justify-content: center; font-size: 12px; box-shadow: var(--bevel); }
    .streak-dot.done { background: var(--accent); border-color: var(--accent); color: #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.2), 0 4px 14px -6px rgba(212,175,55,.5); }
    .streak-dot.today { background: var(--green); border-color: var(--green); color: #000; animation: pulse 1s ease infinite; }
    @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(76,217,100,0.4); } 50% { box-shadow: 0 0 0 8px rgba(76,217,100,0); } }

    /* СТАТУС ЗАЯВКИ */
    .request-card { background: #1a1a1a; border-radius: var(--r-sm); border: 1px solid #333; padding: 12px; margin-bottom: 8px; box-shadow: var(--bevel), var(--elev-1); }
    .section-header { color: var(--sub); font-size: 11px; font-weight: 700; margin: 16px 0 10px; text-transform: uppercase; letter-spacing: 1.5px; border-left: 3px solid var(--accent); padding-left: 10px; }

    /* БЛЕКДЖЕК */
    .bj-table { background: radial-gradient(ellipse, #0d3318 0%, #071a0d 100%); border-radius: 12px; border: 3px solid #8B6914; padding: 15px; margin-bottom: 15px; box-shadow: inset 0 4px 20px rgba(0,0,0,.5), 0 12px 30px -12px rgba(0,0,0,.6); }
    .bj-area { text-align: center; margin-bottom: 10px; }
    .bj-label { color: #aaa; font-size: 12px; margin-bottom: 5px; }
    .bj-cards { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; min-height: 75px; }
    .bj-card { width: 46px; height: 68px; background: #fff; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; border: 1px solid #ddd; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 16px -6px rgba(0,0,0,.5); }
    .bj-card.red { color: #cc0000; }
    .bj-score { font-size: 18px; font-weight: bold; color: var(--accent); margin-top: 5px; }
    .bj-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

    /* КЕНО */
    .keno-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-bottom: 15px; }
    .keno-num { aspect-ratio: 1; background: #222; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; border: 1px solid #333; cursor: pointer; color: #aaa; box-shadow: var(--bevel), var(--elev-1); transition: transform .14s var(--ease-tactile), box-shadow .14s, filter .15s; }
    .keno-num:active { transform: translateY(1px) scale(.94); filter:brightness(.85); box-shadow: var(--bevel), 0 4px 10px -6px rgba(0,0,0,.5); }
    .keno-num.picked { background: #1a3a6b; border-color: #4a7ac0; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 6px rgba(0,0,0,.25), 0 8px 22px -8px rgba(74,122,192,.5); }
    .keno-num.hit { background: var(--green); border-color: var(--green); color: #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 6px rgba(0,0,0,.2), 0 8px 24px -8px rgba(61,214,140,.4); }
    .keno-num.miss { background: #333; color: #555; box-shadow: inset 0 3px 8px rgba(0,0,0,.5); }

    /* СКРЕТЧ */
    .scratch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 15px; }
    .scratch-cell { height: 80px; background: linear-gradient(135deg, #888, #555); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 28px; cursor: pointer; border: 2px solid #999; position: relative; overflow: hidden; box-shadow: var(--bevel), var(--elev-1); transition: transform .14s var(--ease-tactile), box-shadow .14s, filter .15s; }
    .scratch-cell:active { transform: translateY(1px) scale(.97); filter:brightness(.85); box-shadow: var(--bevel), 0 4px 10px -6px rgba(0,0,0,.5); }
    .scratch-cell.scratched { background: #111; border-color: #333; box-shadow: inset 0 4px 10px rgba(0,0,0,.6); }
    .scratch-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, #888, #555); display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 12px; font-weight: bold; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }

    /* КОЛЕСО ФОРТУНИ */
    .fortune-wheel-wrap { position: relative; width: 260px; height: 260px; margin: 0 auto 15px; }
    .fortune-wheel { width: 100%; height: 100%; border-radius: 50%; border: 6px solid #8B6914; transition: 4s cubic-bezier(0.17,0.67,0.12,0.99); position: relative; box-shadow: var(--bevel), var(--elev-2); }
    .wheel-arrow { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 28px; z-index: 10; filter: drop-shadow(0 2px 4px #000) drop-shadow(0 0 6px rgba(212,175,55,.4)); }
    .wheel-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; background: #8B6914; border-radius: 50%; border: 3px solid #ffdb4d; z-index: 5; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: var(--bevel), var(--elev-1); }

    /* ЧАТ ЛОБІ */
    /* old chat-box replaced below */

    /* ===== SUB-TAB BUTTONS (турніри) ===== */
    /* Каса має власний сегментований перемикач (.ks-seg) — рейл із золотим
       слайдером прибрано разом із редизайном. Ці кнопки лишились у турнірах,
       тому активний стан тепер має власний колір, а не колір під слайдером. */
    .cashier-tab-btn { position:relative; z-index:1; flex:1; padding:10px 2px; background:none; border:none; color:#777; font-size:11px; font-weight:bold; cursor:pointer; border-radius:13px; transition:transform .14s var(--ease-tactile), color .2s; display:flex; flex-direction:column; align-items:center; gap:2px; }
    .cashier-tab-btn span { font-size:9px; letter-spacing:.2px; }
    .cashier-tab-btn:active { transform:scale(.94); }
    .cashier-tab-btn.active { color:var(--accent); }
    .chart-period-btn { padding:4px 10px;background:var(--input);border:1px solid var(--border);color:#777;border-radius:var(--r-sm);font-size:11px;cursor:pointer;box-shadow: var(--bevel);transition:transform .14s var(--ease-tactile), box-shadow .14s, background .15s, border-color .15s, color .15s; }
    .chart-period-btn:active { transform:scale(.94); }
    .chart-period-btn.active { background:var(--accent);color:#000;border-color:var(--accent);box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.2), 0 6px 16px -8px rgba(212,175,55,.4); }

    /* ===== SPORT BETTING v2 — REAL ===== */
    .match-card { background:var(--box);border:1px solid var(--border);border-radius:18px;padding:14px;margin-bottom:10px;transition:border-color 0.2s; }
    .match-card:hover { border-color:rgba(255,255,255,.1); }
    .match-card.live { border-color:#e74c3c;box-shadow: var(--bevel), var(--elev-1), 0 0 16px rgba(231,76,60,.16); }
    .match-odds-row { display:flex;gap:6px;margin-top:10px; }
    .odds-btn { flex:1;background:var(--input);border:1.5px solid var(--border);border-radius:12px;padding:10px 4px;text-align:center;cursor:pointer;transition:all 0.15s; }
    .odds-btn:hover:not(.disabled) { border-color:rgba(212,175,55,.5);background:rgba(212,175,55,.08); }
    .odds-btn.selected { border-color:var(--green);background:rgba(61,214,140,.1); }
    .odds-btn.disabled { opacity:0.4;cursor:not-allowed;box-shadow: var(--bevel); }
    .odds-label { font-size:10px;color:var(--sub);margin-bottom:4px; }
    .odds-val { font-size:16px;font-weight:900;color:var(--accent); }

        /* ===== SPORT BETTING ===== */
    .sport-tab-btn { padding:7px 14px;background:var(--input);border:1px solid var(--border);color:#777;border-radius:20px;font-size:11px;font-weight:bold;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:transform .14s var(--ease-tactile), box-shadow .14s, filter .15s, background .15s, border-color .15s, color .15s;-webkit-tap-highlight-color:transparent;box-shadow: var(--bevel), 0 6px 14px -8px rgba(0,0,0,.5); }
    .sport-tab-btn:active { transform: translateY(1px) scale(.96); }
    .sport-tab-btn.active { background:var(--accent);color:#000;border-color:var(--accent);box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.22), 0 8px 22px -8px rgba(212,175,55,.45); }
    .sport-tab-btn:hover { border-color:#555;color:#ccc; }
    #sportTabsRow::-webkit-scrollbar { display:none; }
    #sportTabsRow { -ms-overflow-style:none; }
    .match-card { background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,0) 45%), var(--box);border:1px solid var(--border);border-radius:var(--r-md);padding:12px;margin-bottom:10px;cursor:pointer;box-shadow: var(--bevel), var(--elev-1);transition: border-color .2s, box-shadow .2s, transform .14s var(--ease-tactile); }
    .match-card:hover { border-color:#555; }
    .match-odds-row { display:flex;gap:6px;margin-top:10px; }
    .odds-btn { flex:1;padding:10px 4px;background:var(--input);border:1px solid var(--border);border-radius:var(--r-sm);text-align:center;cursor:pointer;transition: transform .14s var(--ease-tactile), box-shadow .14s, filter .15s, background .15s, border-color .15s;box-shadow: var(--bevel), var(--elev-1); }
    .odds-btn:active:not(.disabled) { transform: translateY(1px) scale(.97); box-shadow: var(--bevel); }
    .odds-btn:hover { border-color:var(--green);background:rgba(39,174,96,0.1); }
    .odds-btn.selected { border-color:var(--green);background:rgba(39,174,96,0.2);box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.2), 0 8px 24px -8px rgba(61,214,140,.4); }
    .odds-val { font-size:16px;font-weight:900;color:var(--green); }
    .odds-label { font-size:10px;color:#555;margin-top:2px; }

    .bet-status-won { color:var(--green);font-weight:bold; }
    .bet-status-lost { color:var(--red);font-weight:bold; }
    .bet-status-pending { color:var(--accent);font-weight:bold; }

    /* ===== TOWER GAME ===== */
    .tower-cell { flex:1;height:44px;background:var(--input);border:1px solid var(--border);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all 0.15s;position:relative; box-shadow: var(--bevel), var(--elev-1); }
    .tower-cell:hover { border-color:#aaa;transform:scale(1.05); }
    .tower-cell.safe { background:#0d2a0d;border-color:var(--green); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 6px rgba(0,0,0,.2), 0 8px 22px -8px rgba(61,214,140,.4); }
    .tower-cell.mine { background:#2a0d0d;border-color:var(--red); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.25), 0 8px 22px -8px rgba(240,64,96,.4); }
    .tower-cell.disabled { cursor:default;opacity:0.5; }
    .tower-row { display:flex;gap:6px; }

    /* ===== HILO GAME ===== */
    .hilo-card { width:80px;height:110px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;box-shadow: var(--bevel), var(--elev-1); }

    /* ===== DICE ===== */
    .dice-result-dot { width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:bold;color:#fff; box-shadow: 0 2px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15); }

    /* ===== RATE TICKER ===== */
    @keyframes tickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
    #rateTicker:hover #rateTickerInner { animation-play-state:paused; }

    /* ===== CURRENCY SYSTEM ===== */
    .currency-btn { padding:12px 8px;background:var(--input);border:2px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:transform .14s var(--ease-tactile), box-shadow .14s, filter .15s, background .15s, border-color .15s;text-align:center;box-shadow: var(--bevel), var(--elev-1); }
    .currency-btn:active { transform: translateY(1px) scale(.97); box-shadow: var(--bevel); }
    .currency-btn:hover { border-color:#555; }
    .currency-btn.active { border-color:var(--accent);background:rgba(212,175,55,0.12);box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.22), 0 8px 24px -8px rgba(212,175,55,.4); }
    #currencyPickerModal .currency-btn { display:flex;flex-direction:column;align-items:center; }
    .rate-ticker { font-size:9px;color:#444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .header-bal { font-size: 14px; background: rgba(212,175,55,.1); padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(212,175,55,.25); font-weight: 700; color: var(--green); cursor: pointer; white-space: nowrap; font-family:'Rajdhani',sans-serif; box-shadow: var(--bevel), 0 6px 14px -8px rgba(212,175,55,.3); transition: transform .14s var(--ease-tactile), box-shadow .14s, filter .15s; }
    .header-bal:active { transform: translateY(1px) scale(.97); }

    /* ===== HOME SUB-TABS ===== */
    .home-tabs { display:flex; gap:0; background:#111; border-radius:var(--r-sm); padding:4px; margin-bottom:15px; border:1px solid #222; box-shadow: var(--bevel), var(--elev-1); }
    .home-tab-btn { flex:1; padding:10px 6px; border-radius:8px; font-size:12px; font-weight:bold; cursor:pointer; text-align:center; color:#666; transition:all 0.2s; position:relative; }
    .home-tab-btn:active { transform: scale(.95); }
    .home-tab-btn.active { background:var(--box); color:#fff; box-shadow: var(--bevel), 0 4px 12px -4px rgba(0,0,0,.5); }
    .home-tab-btn .htbadge { position:absolute; top:4px; right:6px; background:var(--red); color:#fff; border-radius:8px; font-size:8px; padding:1px 4px; font-weight:bold; }
    .home-panel { display:none; }
    .home-panel.active { display:block; }

    /* ═══════════════════════════════════════════════════════
       HOME DASHBOARD — PREMIUM CASINO-LUX SYSTEM (lux-* / v74)
    ═══════════════════════════════════════════════════════ */
    #hp-main { --lux-gold:var(--accent); --lux-gold-soft:rgba(212,175,55,.7); --lux-dim:#8a7440; }

    /* Ornate section divider — flanking hairlines around a small gold label */
    #hp-main .lux-divider { display:flex; align-items:center; gap:10px; margin:22px 0 12px; }
    #hp-main .lux-divider::before, #hp-main .lux-divider::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(212,175,55,.32), transparent); }
    #hp-main .lux-divider:first-child::before { background:linear-gradient(90deg, transparent, rgba(212,175,55,.15), transparent); }
    #hp-main .lux-divider-label { font-family:'Orbitron',monospace; font-size:10px; letter-spacing:2.5px; color:var(--lux-gold); text-transform:uppercase; white-space:nowrap; display:flex; align-items:center; gap:7px; }
    #hp-main .lux-divider-action { font-size:10px; color:var(--lux-dim); cursor:pointer; font-weight:700; letter-spacing:.4px; white-space:nowrap; }

    /* Hero — balance, VIP crest, streak/bets/wins strip */
    .lux-hero { position:relative; background: radial-gradient(120% 160% at 12% 0%, rgba(212,175,55,.11), transparent 55%), linear-gradient(160deg, rgba(255,255,255,.03), rgba(0,0,0,0) 50%), #090807; border:1px solid rgba(212,175,55,.22); border-radius:22px; padding:18px 18px 16px; margin-bottom:14px; box-shadow: var(--bevel), var(--elev-2), 0 0 44px -24px rgba(212,175,55,.4); overflow:hidden; will-change:transform; }
    .lux-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(212,175,55,.75),transparent); }
    .lux-hero-top { display:flex; align-items:flex-start; justify-content:space-between; cursor:pointer; }
    .lux-hero-greet { font-size:10px; color:var(--lux-dim); letter-spacing:1.6px; text-transform:uppercase; margin-bottom:6px; }
    .lux-hero-balance { font-family:'Orbitron',monospace; font-size:30px; font-weight:900; line-height:1.05; background:linear-gradient(135deg,#f5dc8a,var(--accent) 55%,#a67c1a); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:.3px; }
    .lux-hero-vip { flex-shrink:0; text-align:center; cursor:pointer; padding:8px 14px; border-radius:14px; background:rgba(212,175,55,.06); border:1px solid rgba(212,175,55,.22); }
    .lux-hero-vip-crest { font-size:19px; }
    .lux-hero-vip-tier { font-family:'Orbitron',monospace; font-size:11px; font-weight:800; color:var(--lux-gold); margin-top:3px; }
    .lux-hero-vip-lbl { font-size:8px; color:var(--lux-dim); text-transform:uppercase; letter-spacing:1px; margin-top:1px; }
    .lux-hero-strip { display:grid; grid-template-columns:1fr 1fr 1fr; margin-top:16px; padding-top:14px; border-top:1px solid rgba(212,175,55,.12); }
    .lux-hero-cell { text-align:center; cursor:pointer; }
    .lux-hero-cell + .lux-hero-cell { border-left:1px solid rgba(255,255,255,.06); }
    .lux-hero-cell-val { font-family:'Orbitron',monospace; font-size:14px; font-weight:800; color:#eee; }
    .lux-hero-cell-lbl { font-size:8px; color:var(--lux-dim); margin-top:4px; text-transform:uppercase; letter-spacing:.7px; }

    /* Generic luxe panel — replaces plain widget cards */
    .lux-panel { position:relative; background: linear-gradient(160deg, rgba(255,255,255,.022), rgba(0,0,0,0) 50%), #0a0908; border:1px solid rgba(212,175,55,.13); border-radius:18px; padding:14px 16px; margin-bottom:12px; box-shadow: var(--bevel), var(--elev-1); }
    .lux-panel.clickable { cursor:pointer; transition: border-color .15s, transform .14s var(--ease-tactile); }
    .lux-panel.clickable:active { transform: scale(.98); }
    .lux-panel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
    .lux-panel-label { font-size:10px; font-weight:800; color:var(--lux-gold); text-transform:uppercase; letter-spacing:1.6px; display:flex; align-items:center; gap:7px; }
    .lux-panel-action { font-size:10px; color:var(--lux-dim); }

    .lux-mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .lux-mini-item { text-align:center; }
    .lux-mini-val { font-family:'Orbitron',monospace; font-size:15px; font-weight:900; }
    .lux-mini-lbl { font-size:8px; color:var(--lux-dim); margin-top:3px; text-transform:uppercase; letter-spacing:.6px; }

    /* VIP + Battle Pass progress */
    .lux-progress-card { background: linear-gradient(160deg, rgba(212,175,55,.05), rgba(0,0,0,0) 50%), #0a0908; border:1px solid rgba(212,175,55,.18); border-radius:18px; padding:16px; margin-bottom:14px; box-shadow: var(--bevel), var(--elev-1); }
    .lux-progress-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
    .lux-progress-row span { font-size:10px; color:var(--lux-dim); text-transform:uppercase; letter-spacing:.7px; }
    .lux-progress-row b { color:var(--lux-gold); }
    .lux-progress-track { height:6px; background: rgba(255,255,255,.05); border-radius:6px; overflow:hidden; margin-bottom:14px; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
    .lux-progress-track:last-of-type { margin-bottom:0; }
    .lux-progress-fill { height:100%; border-radius:6px; background: linear-gradient(90deg,#a67c1a,#f5dc8a); transition:width .8s cubic-bezier(.22,1,.36,1); }

    /* Live win ticker */
    .lux-live-ticker { background: linear-gradient(90deg,rgba(0,0,0,0),rgba(212,175,55,.04) 40%,rgba(0,0,0,0)), #0a0908; border:1px solid rgba(212,175,55,.14); border-radius:12px; padding:9px 12px; margin-bottom:14px; overflow:hidden; display:flex; align-items:center; gap:9px; box-shadow: var(--bevel), var(--elev-1); }
    .lux-live-badge { background:#e74c3c; color:#fff; font-size:9px; font-weight:800; padding:2px 7px; border-radius:10px; flex-shrink:0; animation:heartbeat 2s infinite; letter-spacing:.5px; }
    .lux-live-text { font-size:12px; color:#ccc; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }

    /* Quick action tiles — minimal dark glass with a thin accent top-edge */
    .lux-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }
    .lux-action-tile { position:relative; background: linear-gradient(160deg, rgba(255,255,255,.022), rgba(0,0,0,0) 50%), #0a0908; border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:15px 14px; cursor:pointer; overflow:hidden; box-shadow: var(--bevel), var(--elev-1); transition: transform .15s var(--ease-tactile), border-color .15s, box-shadow .15s; }
    .lux-action-tile::before { content:''; position:absolute; top:0; left:14px; right:14px; height:2px; border-radius:0 0 3px 3px; background: var(--ac, var(--lux-gold)); opacity:.75; }
    .lux-action-tile:active { transform: scale(.96); }
    .lux-action-tile:hover { border-color: var(--ac, var(--lux-gold)); box-shadow: var(--bevel), var(--elev-1), 0 0 22px -10px var(--ac, rgba(212,175,55,.5)); }
    .lux-action-icon-badge { width:34px; height:34px; border-radius:10px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:10px; }
    .lux-action-title { font-size:13px; font-weight:800; color:#eee; letter-spacing:.2px; }
    .lux-action-sub { font-size:10px; color:var(--lux-dim); margin-top:2px; }

    /* Battle Pass promo — jewel-tone purple with a gold hairline frame */
    .lux-promo-card { background: linear-gradient(135deg,#0a0020,#1a0040,#0a0020); border:1px solid rgba(212,175,55,.22); border-radius:20px; padding:16px; margin-bottom:12px; cursor:pointer; position:relative; overflow:hidden; box-shadow: var(--bevel), var(--elev-1); }
    .lux-promo-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg,transparent,rgba(212,175,55,.7),transparent); }
    .lux-promo-deco { position:absolute; right:-10px; top:-10px; font-size:80px; opacity:.08; }
    .lux-promo-body { display:flex; align-items:center; gap:12px; }
    .lux-promo-icon { font-size:34px; animation: float 3s ease-in-out infinite; }
    .lux-promo-title { font-weight:900; font-size:15px; color:#c9a0ff; font-family:'Orbitron',monospace; letter-spacing:1px; }
    .lux-promo-sub { font-size:12px; color:#888; margin-top:2px; }
    .lux-promo-pills { display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; }
    .lux-promo-pill { border-radius:6px; padding:2px 8px; font-size:10px; }

    .lux-cta-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }

    /* ===== НОВИНИ ===== */
    .news-card { background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,0) 45%), var(--box); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; margin-bottom:14px; box-shadow: var(--bevel), var(--elev-1); }
    .news-header { padding:14px 14px 10px; }
    .news-author { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .news-avatar { width:38px; height:38px; border-radius:50%; background:#222; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; overflow:hidden; box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 18px -6px rgba(0,0,0,.5); }
    .news-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    .news-name { font-size:13px; font-weight:bold; }
    .news-time { font-size:10px; color:#555; }
    .news-admin-badge { background:linear-gradient(45deg,#ff4444,#cc0000); color:#fff; font-size:9px; padding:1px 6px; border-radius:8px; margin-left:4px; font-weight:bold; }
    .news-title { font-size:16px; font-weight:900; color:#fff; margin-bottom:6px; line-height:1.3; }
    .news-body  { font-size:13px; color:#aaa; line-height:1.5; margin-bottom:10px; }
    .news-image { width:100%; max-height:200px; object-fit:cover; background:#111; }
    .news-reactions { display:flex; gap:8px; padding:10px 14px; border-top:1px solid #1a1a1a; flex-wrap:wrap; }
    .reaction-btn { display:flex; align-items:center; gap:4px; padding:5px 10px; background:#1a1a1a; border-radius:20px; cursor:pointer; font-size:13px; border:1px solid transparent; transition:all 0.15s; }
    .reaction-btn.reacted { border-color:var(--accent); background:rgba(212,175,55,0.1); }
    .reaction-count { font-size:11px; color:#777; }
    .news-comments-toggle { padding:8px 14px; color:#777; font-size:12px; cursor:pointer; border-top:1px solid #111; display:flex; align-items:center; gap:5px; }
    .news-comments-toggle:hover { color:#aaa; }
    .news-comments-box { display:none; border-top:1px solid #1a1a1a; padding:10px 14px; }
    .news-comments-box.open { display:block; }
    .comment-item { display:flex; gap:8px; padding:7px 0; border-bottom:1px solid #111; }
    .comment-avatar { width:28px; height:28px; border-radius:50%; background:#222; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; overflow:hidden; }
    .comment-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    .comment-nick { font-size:12px; font-weight:bold; color:var(--accent); cursor:pointer; }
    .comment-text { font-size:12px; color:#ccc; margin-top:2px; line-height:1.4; }
    .comment-time { font-size:10px; color:#444; margin-top:2px; }
    .comment-input-row { display:flex; gap:8px; margin-top:8px; }

    /* ===== БОТИ ===== */
    .bot-card { display:flex; align-items:center; gap:10px; padding:10px 12px; background:#111; border:1px solid #222; border-radius:var(--r-sm); margin-bottom:6px; box-shadow: var(--bevel), var(--elev-1); }
    .bot-avatar { width:36px; height:36px; border-radius:50%; background:#1a1a1a; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; overflow:hidden; }
    .bot-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    .bot-status { font-size:9px; padding:2px 7px; border-radius:8px; font-weight:bold; }
    .bot-status.active   { background:rgba(76,217,100,0.2); color:var(--green); }
    .bot-status.inactive { background:rgba(100,100,100,0.2); color:#666; }

    /* ===== CHAT IMPROVEMENTS ===== */
    .chat-box { height: 300px; overflow-y: auto; background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 16px; padding: 10px; margin-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    .chat-msg { margin-bottom: 10px; padding: 9px 12px; background: rgba(255,255,255,.03); border-radius: 12px; border-left: 2px solid rgba(255,255,255,.07); }
    .chat-msg.mine { border-left-color: var(--accent); background: rgba(212,175,55,.05); }
    .chat-msg.admin-msg { border-left-color: var(--red); background: rgba(240,64,96,.04); }
    .chat-msg.bot-msg { border-left-color: #9b59b6; background: rgba(155,89,182,.05); }
    .chat-avatar-sm { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; vertical-align:middle; margin-right:5px; overflow:hidden; flex-shrink:0; }
    .chat-avatar-sm img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    .chat-header-line { display:flex; align-items:center; gap:4px; margin-bottom:4px; }
    .chat-body-text { font-size:13px; color:#ccc; line-height:1.4; word-break:break-word; }
    .chat-emoji-pick { display:flex; gap:6px; padding:6px; background:#111; border-radius:8px; margin-bottom:8px; }
    .chat-emoji-btn { font-size:20px; cursor:pointer; padding:4px; border-radius:6px; transition:transform 0.1s; }
    .chat-emoji-btn:active { transform:scale(1.3); }
    .online-pill { display:inline-flex; align-items:center; gap:5px; background:#0d1a0d; border:1px solid #1a2a1a; border-radius:20px; padding:4px 10px; font-size:12px; color:var(--green); }

    .chat-nick { font-weight: bold; cursor: pointer; }
    .chat-nick:hover { text-decoration: underline; }
    .chat-time { color: #555; font-size: 10px; margin-left: 5px; }
    .chat-input-row { display: flex; gap: 8px; }
    .chat-system { color: #555; font-style: italic; font-size: 12px; text-align: center; padding: 4px 0; }
    .online-badge { display: inline-block; width: 8px; height: 8px; background: var(--green); border-radius: 50%; margin-right: 4px; }

    /* ДУЕЛІ */
    .duel-card { background: #1a1a1a; border: 1px solid #333; border-radius: 10px; padding: 12px; margin-bottom: 8px; }

    .ds-waiting { background: rgba(212,175,55,0.2); color: var(--accent); }
    .ds-active { background: rgba(76,217,100,0.2); color: var(--green); }

    /* ═══════════════════════════════════════
       CASINO LOBBY v2
    ═══════════════════════════════════════ */
    .casino-hero-banner { background: linear-gradient(135deg,#1a0800,#0d0500,#1a1000); border:1px solid rgba(212,175,55,0.3); border-radius:14px; padding:18px; margin-bottom:14px; position:relative; overflow:hidden; display:flex; align-items:center; }
    .casino-hero-content { position:relative; z-index:1; }
    .casino-hero-label { font-size:10px; color:var(--accent); font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:5px; }
    .casino-hero-title { font-size:26px; font-weight:900; color:#fff; line-height:1.1; margin-bottom:6px; }
    .casino-hero-title span { color:var(--accent); }
    .casino-hero-sub { font-size:11px; color:#aaa; margin-bottom:12px; }
    .casino-hero-btn { background:linear-gradient(45deg,var(--accent),#ffdb4d); color:#000; border:none; border-radius:8px; padding:9px 20px; font-size:12px; font-weight:800; cursor:pointer; }

    .casino-cats { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-bottom:12px; padding-bottom:2px; }
    .casino-cats::-webkit-scrollbar { display:none; }
    .casino-cat-btn { flex-shrink:0; background:#1a1a1a; border:1px solid #333; border-radius:20px; padding:6px 13px; font-size:11px; font-weight:700; color:#888; cursor:pointer; white-space:nowrap; transition:all 0.2s; }
    .casino-cat-btn.active { background:rgba(212,175,55,0.15); border-color:var(--accent); color:var(--accent); }

    .jackpot-strip { background:linear-gradient(90deg,#1a0800,#120500,#1a0800); border:1px solid rgba(212,175,55,0.4); border-radius:12px; padding:12px 16px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
    .jackpot-num { font-size:28px; font-weight:900; color:#fff; letter-spacing:1px; }
    .jackpot-num span { color:var(--accent); }
    .jackpot-play-btn { background:var(--accent); color:#000; border:none; border-radius:8px; padding:8px 14px; font-size:12px; font-weight:800; cursor:pointer; }

    .casino-featured { border-radius:12px; overflow:hidden; position:relative; margin-bottom:12px; border:1px solid #2a2a2a; cursor:pointer; }
    .casino-featured:active { transform:scale(0.99); }
    .casino-featured-img { height:150px; display:flex; align-items:center; justify-content:center; font-size:70px; position:relative; }
    .casino-featured-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,0.8) 100%); }
    .casino-featured-info { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:#141414; }
    .casino-featured-name { font-size:15px; font-weight:800; }
    .casino-featured-rtp { background:rgba(76,217,100,0.15); border:1px solid rgba(76,217,100,0.3); border-radius:6px; padding:3px 9px; font-size:10px; font-weight:700; color:var(--green); }
    .casino-featured-badge { position:absolute; top:8px; left:8px; background:var(--accent); color:#000; font-size:9px; font-weight:800; padding:3px 9px; border-radius:4px; letter-spacing:1px; z-index:1; }

    .casino-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px; }
    .casino-game-card { background:var(--box); border:1px solid var(--border); border-radius:14px; overflow:hidden; cursor:pointer; position:relative; transition:.15s; }
    .casino-game-card:active { transform:scale(.93); filter:brightness(.8); }
    .casino-game-card:hover { border-color:rgba(212,175,55,.25); }
    .casino-game-card-img { height:80px; display:flex; align-items:center; justify-content:center; font-size:38px; }
    .casino-game-card-info { padding:6px 8px 8px; }
    .casino-game-card-name { font-size:10px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .casino-game-card-prov { font-size:9px; color:#555; margin-top:1px; }
    .casino-badge-hot { position:absolute; top:5px; right:5px; background:var(--red); color:#fff; font-size:8px; font-weight:800; padding:2px 5px; border-radius:3px; }
    .casino-badge-new { position:absolute; top:5px; right:5px; background:var(--green); color:#000; font-size:8px; font-weight:800; padding:2px 5px; border-radius:3px; }

    .providers-scroll { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-bottom:12px; }
    .providers-scroll::-webkit-scrollbar { display:none; }
    .provider-pill { flex-shrink:0; background:#1a1a1a; border:1px solid #222; border-radius:8px; padding:7px 12px; font-size:10px; font-weight:700; color:#888; cursor:pointer; white-space:nowrap; transition:all 0.2s; }
    .provider-pill:hover { border-color:rgba(212,175,55,0.3); color:var(--accent); }

    .wins-feed { background:#141414; border:1px solid #222; border-radius:12px; overflow:hidden; margin-bottom:12px; }
    .win-feed-row { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-bottom:1px solid #1a1a1a; animation:wfSlide 0.4s ease; }
    .win-feed-row:last-child { border-bottom:none; }
    @keyframes wfSlide { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
    .win-feed-avatar { width:30px; height:30px; border-radius:50%; background:#222; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
    .win-feed-user { font-size:11px; font-weight:700; }
    .win-feed-game { font-size:9px; color:#555; margin-top:1px; }
    .win-feed-amount { font-size:13px; font-weight:900; color:var(--green); }

    /* GAME MODAL */
    .game-open-modal { position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:8500; display:flex; flex-direction:column; }
    .game-open-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:#141414; border-bottom:1px solid #222; }
    .game-open-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; }
    .game-open-emoji { font-size:88px; animation:goFloat 2s ease-in-out infinite alternate; }
    @keyframes goFloat { from{transform:translateY(0)} to{transform:translateY(-12px)} }
    .game-open-name { font-size:26px; font-weight:900; color:var(--accent); letter-spacing:1px; }
    .game-open-meta { font-size:12px; color:#777; }
    .game-open-play { background:linear-gradient(45deg,var(--accent),#ffdb4d); color:#000; border:none; border-radius:10px; padding:14px; width:100%; font-size:15px; font-weight:800; cursor:pointer; }
    .game-open-demo { background:transparent; border:1px solid #333; border-radius:10px; padding:12px; width:100%; font-size:13px; font-weight:700; color:#888; cursor:pointer; }

    /* STREAM FALLBACK FIX */
    .stream-fallback-ui { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:30px; background:linear-gradient(135deg,#0d0d0d,#1a0a00); width:100%; height:100%; }
    .stream-fallback-ui .retry-btn { background:var(--accent); color:#000; border:none; border-radius:8px; padding:10px 24px; font-size:13px; font-weight:700; cursor:pointer; }
    .stream-fallback-ui .open-ext-btn { background:transparent; border:1px solid #444; border-radius:8px; padding:8px 20px; font-size:12px; color:#aaa; cursor:pointer; }

    /* ТУРНІРИ */
    .tournament-card { background: linear-gradient(135deg, #1a1a00, #0d0d00); border: 1px solid var(--accent); border-radius: 12px; padding: 15px; margin-bottom: 12px; }
    .t-prize { font-size: 24px; font-weight: 900; color: var(--accent); }
    .t-info { color: #777; font-size: 12px; margin-top: 5px; }
    .t-leaderboard { margin-top: 10px; }
    .t-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #1a1a00; font-size: 13px; }

    /* РЕФЕРАЛИ */
    .ref-link-box { background: #111; border: 1px solid #333; border-radius: 8px; padding: 12px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; word-break: break-all; font-size: 12px; color: #aaa; }
    .ref-stat { text-align: center; flex: 1; }
    .ref-stat-num { font-size: 24px; font-weight: bold; color: var(--accent); }
    .ref-stat-label { font-size: 11px; color: #777; }

    /* ПУБЛІЧНИЙ ПРОФІЛЬ */
    .pub-profile { background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,0) 45%), var(--box); border-radius: var(--r-md); padding: 20px; box-shadow: var(--bevel), var(--elev-1); }
    .pub-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
    .pub-stat { background: #111; border-radius: var(--r-sm); padding: 12px; text-align: center; border: 1px solid #222; box-shadow: var(--bevel), var(--elev-1); }
    .pub-stat-val { font-size: 20px; font-weight: bold; color: var(--accent); }
    .pub-stat-label { font-size: 11px; color: #777; margin-top: 3px; }
    .pub-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
    .badge { background: #222; border: 1px solid #444; border-radius: 20px; padding: 4px 10px; font-size: 11px; color: #aaa; box-shadow: var(--bevel); }
    .badge.gold { border-color: var(--accent); color: var(--accent); background: rgba(212,175,55,0.1); }

    /* АДМІН РОЗШИРЕНИЙ — premium casino-lux treatment (v74) */
    .admin-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
    /* Admin panel tabs */
    .adm-tab-btn { background:linear-gradient(160deg, rgba(255,255,255,.03), rgba(0,0,0,0) 55%), #0a0908;border:1px solid rgba(212,175,55,.15);color:#8a7440;border-radius:10px;padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s;box-shadow:var(--bevel); }
    .adm-tab-btn:hover { border-color:rgba(212,175,55,.4); color:var(--accent); box-shadow:var(--bevel), var(--glow-accent-soft); }
    .adm-tab-btn.active { background:linear-gradient(135deg,#f5dc8a,var(--accent) 60%,#a67c1a);color:#1a0d00;border-color:#f5dc8a;box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 5px rgba(0,0,0,.2), 0 6px 16px -8px rgba(212,175,55,.5); }
    .adm-panel { display:none !important; }
    .adm-panel.active, .adm-panel[style*="display: block"], .adm-panel[style*="display:block"] { display:block !important; }

    /* ── Керування адмінами та анти-чітом ── */
    .adm-admin-card { background:#0d0d12;border:1px solid #23202e;border-radius:12px;padding:11px;margin-bottom:8px; }
    .adm-admin-head { display:flex;align-items:flex-start;justify-content:space-between;gap:10px; }
    .adm-admin-nick { font-size:13px;font-weight:800;color:#e8ddc0;word-break:break-all; }
    .adm-admin-sub { font-size:10px;color:#666;margin-top:2px; }
    .adm-owner-tag { background:rgba(212,175,55,.18);color:var(--accent);border-radius:5px;padding:1px 5px;font-size:8px;font-weight:900;margin-left:5px;vertical-align:middle; }
    .adm-mini-btn { background:rgba(255,255,255,.05);border:1px solid #333;border-radius:8px;color:#aaa;font-size:11px;font-weight:700;padding:6px 10px;cursor:pointer;white-space:nowrap;width:auto;margin:0; }
    .adm-mini-btn.danger { border-color:rgba(231,76,60,.35);color:#e74c3c; }
    .adm-perm-chips { display:flex;flex-wrap:wrap;gap:4px;margin-top:8px; }
    .adm-perm-chip { font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid #2a2635;color:#5d5870; }
    .adm-perm-chip.on { background:rgba(61,214,140,.12);border-color:rgba(61,214,140,.3);color:#3dd68c; }
    .adm-perm-chip.legacy { background:rgba(255,159,67,.1);border-color:rgba(255,159,67,.3);color:#ff9f43; }
    .adm-perm-chip.off { background:rgba(231,76,60,.08);border-color:rgba(231,76,60,.25);color:#e74c3c; }
    .adm-perm-toggles { margin-top:10px;padding-top:10px;border-top:1px solid #1e1b28; }
    .adm-perm-row, .adm-switch-row { display:flex;align-items:flex-start;gap:9px;padding:7px 0;font-size:12px;color:#ccc;cursor:pointer;line-height:1.35; }
    .adm-perm-row input, .adm-switch-row input { width:17px;height:17px;flex-shrink:0;margin:1px 0 0;accent-color:var(--accent); }
    .adm-switch-row { border-bottom:1px solid #1a1722; }
    .adm-switch-row:last-of-type { border-bottom:none; }
    .adm-hint { color:#666;font-size:10px; }
    .adm-num-row { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;font-size:11.5px;color:#999; }
    .adm-num-row input { width:110px;flex-shrink:0;margin:0;padding:8px 10px;font-size:13px;min-height:auto;text-align:center; }
    .req-card { background:var(--box);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;margin-bottom:8px;position:relative;overflow:hidden; box-shadow: var(--bevel), var(--elev-1); }
    .req-card.deposit { border-left:3px solid #3dd68c; }
    .req-card.withdraw { border-left:3px solid #ff9f43; }
    .req-card-user { font-weight:bold;font-size:14px; }
    .req-card-amount { font-size:18px;font-weight:900; }
    .req-card-meta { font-size:11px;color:#555;margin:3px 0; }
    .req-card-time { font-size:10px;color:#444; }
    .req-actions { display:flex;gap:6px;margin-top:10px; }
    .req-actions button { flex:1;padding:10px;font-size:13px;font-weight:700;border-radius:10px;cursor:pointer;border:none; }
    .req-approve { background:linear-gradient(135deg,#27ae60,#1a7a3c);color:#fff; }
    .req-reject  { background:linear-gradient(135deg,#c0392b,#7a1c10);color:#fff; }
    .req-empty { text-align:center;padding:24px;color:#555;font-size:13px; }
    /* v62 new styles */
    .dragon-diff.active { border-color: var(--accent) !important; color: var(--accent) !important; background: rgba(212,175,55,.08); }
    .arch-risk.active   { border-color: var(--accent) !important; color: var(--accent) !important; background: rgba(212,175,55,.08); }
    .sicbo-type.active  { border-color: var(--accent) !important; color: var(--accent) !important; background: rgba(212,175,55,.08); }
    .accent-dot.active  { border: 2px solid #fff !important; box-shadow: 0 0 8px rgba(255,255,255,.5); }
    .penalty-zone:hover { background: rgba(39,174,96,.3) !important; transform: scale(1.05); }
    #jackpotTicker:hover { background: linear-gradient(90deg,#2d1500,#3d2000,#2d1500) !important; }
    @keyframes duckFly { from{transform:translateX(-40px) scaleX(-1)} to{transform:translateX(260px) scaleX(-1)} }
    .admin-stat { background: linear-gradient(160deg, rgba(212,175,55,.05), rgba(0,0,0,0) 55%), #0a0908; border: 1px solid rgba(212,175,55,.16); border-radius: var(--r-sm); padding: 12px; text-align: center; box-shadow: var(--bevel), var(--elev-1); }
    .admin-stat-val { font-size: 22px; font-weight: bold; font-family: 'Orbitron', monospace; background:linear-gradient(135deg,#f5dc8a,var(--accent) 55%,#a67c1a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
    .admin-stat-label { font-size: 11px; color: #8a7440; text-transform: uppercase; letter-spacing: .5px; }
    .promo-row { display: flex; justify-content: space-between; align-items: center; background: #111; border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 6px; border: 1px solid #222; box-shadow: var(--bevel), var(--elev-1); }

    .support-thread { background: #111; border-radius: var(--r-sm); padding: 10px; margin-bottom: 8px; border: 1px solid #222; cursor: pointer; box-shadow: var(--bevel), var(--elev-1); transition: transform .12s, box-shadow .14s; }
    .support-thread:active { transform: scale(.98); }
    .support-thread:hover { border-color: #444; }
    .support-unread { background: var(--accent); color: #000; font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 10px; }

    /* ===== VIP СИСТЕМА ===== */
    :root {
      --bronze: #cd7f32; --silver-c: #aaa; --gold-c: var(--accent); --plat: #e5e4e2;
    }
    .vip-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; }
    .vip-bronze { background: rgba(205,127,50,0.2); border: 1px solid var(--bronze); color: var(--bronze); }
    .vip-silver { background: rgba(170,170,170,0.15); border: 1px solid var(--silver-c); color: var(--silver-c); }
    .vip-gold { background: rgba(212,175,55,0.2); border: 1px solid var(--gold-c); color: var(--gold-c); }
    .vip-platinum { background: rgba(229,228,226,0.15); border: 1px solid var(--plat); color: var(--plat); box-shadow: 0 0 10px rgba(229,228,226,0.2); }
    .vip-progress-bar { height: 6px; background: #222; border-radius: 3px; overflow: hidden; margin: 6px 0 3px; }
    .vip-progress-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
    .vip-card { border-radius: var(--r-md); padding: 18px; margin-bottom: 12px; position: relative; overflow: hidden; box-shadow: var(--bevel), var(--elev-1); }
    .vip-card::before { content:''; position:absolute; top:-40px; right:-40px; width:120px; height:120px; border-radius:50%; opacity:0.08; }
    .vip-card.bronze { background: linear-gradient(135deg, #1a0f05, #2d1a08); border: 1px solid var(--bronze); }
    .vip-card.bronze::before { background: var(--bronze); }
    .vip-card.silver { background: linear-gradient(135deg, #111, #1a1a1a); border: 1px solid var(--silver-c); }
    .vip-card.gold { background: linear-gradient(135deg, #1a1500, #2d2400); border: 1px solid var(--gold-c); }
    .vip-card.platinum { background: linear-gradient(135deg, #0d0d12, #1a1a22); border: 1px solid var(--plat); }
    /* The hero "current tier" card breathes a glow in its own tier color —
       the tier list below stays calm so this one reads as the focal point. */
    #vipCurrentCard.bronze   { animation: vipGlowBronze 4s ease-in-out infinite; }
    #vipCurrentCard.silver   { animation: vipGlowSilver 4s ease-in-out infinite; }
    #vipCurrentCard.gold     { animation: vipGlowGold 4s ease-in-out infinite; }
    #vipCurrentCard.platinum { animation: vipGlowPlat 4s ease-in-out infinite; }
    @keyframes vipGlowBronze { 0%,100% { box-shadow: var(--bevel), var(--elev-1), 0 0 30px -14px var(--bronze); } 50% { box-shadow: var(--bevel), var(--elev-1), 0 0 55px -12px var(--bronze); } }
    @keyframes vipGlowSilver { 0%,100% { box-shadow: var(--bevel), var(--elev-1), 0 0 30px -14px var(--silver-c); } 50% { box-shadow: var(--bevel), var(--elev-1), 0 0 55px -12px var(--silver-c); } }
    @keyframes vipGlowGold   { 0%,100% { box-shadow: var(--bevel), var(--elev-1), 0 0 30px -14px var(--gold-c); } 50% { box-shadow: var(--bevel), var(--elev-1), 0 0 55px -12px var(--gold-c); } }
    @keyframes vipGlowPlat   { 0%,100% { box-shadow: var(--bevel), var(--elev-1), 0 0 30px -14px var(--plat); } 50% { box-shadow: var(--bevel), var(--elev-1), 0 0 55px -12px var(--plat); } }
    @media (prefers-reduced-motion: reduce) {
      #vipCurrentCard.bronze, #vipCurrentCard.silver, #vipCurrentCard.gold, #vipCurrentCard.platinum { animation: none; }
    }
    .vip-perk { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; }
    .vip-perk-icon { font-size: 18px; min-width: 25px; }

    /* ===== ЛУТБОКСИ ===== */
    .lootbox-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 15px; }
    .lootbox-card { border-radius: 14px; padding: 15px; text-align: center; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; border: 1px solid; position: relative; overflow: hidden; }
    .lootbox-card:active { transform: scale(0.96); }
    .lootbox-card.common { background: linear-gradient(135deg, #1a1a1a, #222); border-color: #555; }
    .lootbox-card.rare { background: linear-gradient(135deg, #0d1a3a, #1a2a5a); border-color: #4a7ac0; }
    .lootbox-card.epic { background: linear-gradient(135deg, #2a0d3a, #3a1a5a); border-color: #9b59b6; }
    .lootbox-icon { font-size: 40px; margin-bottom: 5px; }
    .lootbox-name { font-size: 11px; font-weight: bold; margin-bottom: 3px; }
    .lootbox-price { font-size: 14px; font-weight: 900; }
    .lootbox-common-color { color: #aaa; }
    .lootbox-rare-color { color: #4a9eff; }
    .lootbox-epic-color { color: #b57bee; }
    /* Full-screen reveal overlay — the case-opening moment gets its own
       stage instead of competing with the still-visible grid behind it. */
    #lootboxResultScreen:not(.hidden) { position: fixed; inset: 0; z-index: 9600; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
    .lootbox-reward-screen { text-align: center; padding: 30px 20px; }
    .lootbox-open-anim { font-size: 80px; animation: lbPop 0.5s ease; }
    @keyframes lbPop { 0% { transform: scale(0); opacity:0; } 60% { transform: scale(1.3); } 100% { transform: scale(1); opacity:1; } }
    .lootbox-win-amount { font-size: 48px; font-weight: 900; color: var(--accent); margin: 15px 0 5px; animation: lbPop 0.4s ease 0.2s both; }
    .lootbox-win-type { font-size: 12px; color: #777; margin-bottom: 20px; }
    #lbCaseCanvas { width: 220px; height: 220px; margin: 0 auto; display: block; touch-action: none; }

    /* ===== ПОГОДИННИЙ БОНУС ===== */
    .hourly-ring { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #333; display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto 15px; position: relative; cursor: pointer; transition: border-color 0.3s; }
    .hourly-ring.ready { border-color: var(--green); box-shadow: 0 0 20px rgba(76,217,100,0.3); animation: pulse 1.5s ease infinite; }
    .hourly-cooldown-text { font-size: 30px; font-weight: 900; color: var(--accent); text-align: center; }
    /* 14 рівнів не влазять у рядок — горизонтальний скрол замість стискання */
    .hourly-vip-perks { display: flex; margin-top: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .hourly-vip-perks::-webkit-scrollbar { display: none; }
    .hourly-vip-tier { text-align: center; flex: 0 0 auto; min-width: 74px; padding: 8px 6px; border-radius: 8px; font-size: 11px; background: #111; border: 1px solid #222; margin: 0 3px; white-space: nowrap; }
    .hourly-vip-tier.active { border-color: var(--accent); background: rgba(212,175,55,0.08); }
    .hourly-vip-amount { font-size: 16px; font-weight: bold; margin-bottom: 2px; }

    /* ===== КВЕСТИ ===== */
    .quest-card { background: #111; border: 1px solid #222; border-radius: var(--r-md); padding: 14px; margin-bottom: 10px; box-shadow: var(--bevel), var(--elev-1); }
    .quest-card.done { border-color: var(--green); background: rgba(76,217,100,0.05); }
    .quest-card.claimed { border-color: #333; opacity: 0.5; }
    .quest-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .quest-icon { font-size: 24px; }
    .quest-title { font-size: 14px; font-weight: bold; flex: 1; }
    .quest-reward { font-size: 13px; color: var(--accent); font-weight: bold; }
    .quest-prog-bar { height: 6px; background: #222; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
    .quest-prog-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #ffdb4d); border-radius: 3px; transition: width 0.4s ease; }
    .quest-prog-text { font-size: 11px; color: #777; }
    .quest-claim-btn { background: linear-gradient(45deg, var(--accent), #ffdb4d); color: #000; border: none; border-radius: 8px; padding: 8px 16px; font-weight: bold; font-size: 12px; cursor: pointer; width: 100%; margin-top: 8px; }
    .quest-timer { font-size: 11px; color: #555; text-align: right; }
    .tab-badge { display: inline-block; background: var(--red); color: #fff; border-radius: 10px; font-size: 9px; font-weight: bold; padding: 1px 5px; margin-left: 3px; vertical-align: middle; animation: pulse 1s ease infinite; }

    /* ===== КЛАНИ ===== */
    .clan-banner { border-radius: var(--r-md); padding: 18px; margin-bottom: 15px; position: relative; overflow: hidden; box-shadow: var(--bevel), var(--elev-1); }
    .clan-banner.none   { background: linear-gradient(135deg,#111,#1a1a1a); border: 1px dashed #444; }
    .clan-banner.member { background: linear-gradient(135deg,#0d1a0d,#1a2d1a); border: 1px solid var(--green); animation: clanGlowBreathe 5s ease-in-out infinite; }
    @keyframes clanGlowBreathe {
      0%,100% { box-shadow: var(--bevel), var(--elev-1), 0 0 28px -16px var(--green); }
      50%     { box-shadow: var(--bevel), var(--elev-1), 0 0 50px -14px var(--green); }
    }
    @media (prefers-reduced-motion: reduce) { .clan-banner.member { animation: none; } }
    .clan-name   { font-size: 22px; font-weight: 900; }
    .clan-tag    { font-size: 11px; color: #777; margin-top: 3px; }
    .clan-stats  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 12px 0; }
    .clan-stat   { background: rgba(0,0,0,0.3); border-radius: 8px; padding: 10px 6px; text-align: center; box-shadow: inset 0 2px 6px rgba(0,0,0,.35); }
    .clan-stat-v { font-size: 18px; font-weight: bold; color: var(--accent); }
    .clan-stat-l { font-size: 10px; color: #777; margin-top: 2px; }
    .clan-member-row { display: flex; align-items: center; gap: 10px; padding: 10px; background: #111; border-radius: var(--r-sm); margin-bottom: 6px; border: 1px solid #222; box-shadow: var(--bevel), var(--elev-1); transition: box-shadow .15s, border-color .15s; }
    .clan-member-row:hover { border-color: rgba(212,175,55,.25); box-shadow: var(--bevel), var(--elev-1), var(--glow-accent-soft); }
    .clan-member-avatar { width: 36px; height: 36px; border-radius: 50%; background: #222; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
    .clan-role   { font-size: 10px; padding: 2px 7px; border-radius: 8px; margin-left: auto; }
    .clan-role.leader  { background: rgba(212,175,55,0.2); color: var(--accent); }
    .clan-role.member  { background: rgba(76,217,100,0.15); color: var(--green); }
    .clan-task   { background: #111; border: 1px solid #222; border-radius: var(--r-sm); padding: 12px; margin-bottom: 8px; box-shadow: var(--bevel), var(--elev-1); transition: border-color .15s, box-shadow .15s; }
    .clan-task.done { border-color: var(--green); box-shadow: var(--bevel), var(--elev-1), 0 0 24px -16px var(--green); }
    /* ═════════ ЛІДЕРБОРД / РЕЙТИНГИ ═════════ */
    #tab-leaderboard { padding: 0; }

    /* Шапка */
    .lb-hero { position: relative; overflow: hidden; padding: 16px 16px 20px;
      background: radial-gradient(ellipse 80% 90% at 50% -10%, rgba(212,175,55,.16), transparent 70%), linear-gradient(170deg,#12102a,#0a0818 60%,#07060f); }
    .lb-hero::after { content:'🏆'; position:absolute; right:-24px; top:-30px; font-size:150px; opacity:.05; pointer-events:none; }
    .lb-hero-top { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
    .lb-back { width:42px; height:42px; flex-shrink:0; padding:0; margin:0; display:flex; align-items:center; justify-content:center;
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; color:var(--sub); font-size:16px; }
    .lb-title { margin:0; font-family:'Orbitron',monospace; font-size:19px; font-weight:900; letter-spacing:2px; line-height:1;
      background:linear-gradient(135deg,var(--accent2),var(--accent),#a9791c); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
    .lb-sub { font-size:11px; color:var(--sub); margin-top:4px; }

    /* Таймер скидання */
    .lb-timer { display:inline-flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0;
      background:rgba(212,175,55,.08); border:1px solid rgba(212,175,55,.22); border-radius:12px; padding:7px 11px; }
    .lb-timer-lbl { font-size:9px; color:var(--sub); text-transform:uppercase; letter-spacing:.5px; }
    .lb-timer-val { font-size:13px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.1; }

    /* Призи періоду */
    .lb-prizes { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; position:relative; }
    .lb-prize { border-radius:16px; padding:11px 6px; text-align:center; box-shadow:var(--bevel); }
    .lb-prize-medal { font-size:19px; line-height:1; }
    .lb-prize-val { font-size:12px; font-weight:800; margin-top:4px; font-variant-numeric:tabular-nums; }
    .lb-prize-lbl { font-size:9px; color:var(--sub); margin-top:1px; }
    .lb-prize.g1 { background:linear-gradient(160deg,rgba(255,215,0,.16),rgba(255,215,0,.03)); border:1px solid rgba(255,215,0,.3); }
    .lb-prize.g1 .lb-prize-val { color:#ffd700; }
    .lb-prize.g2 { background:linear-gradient(160deg,rgba(200,200,215,.12),rgba(200,200,215,.02)); border:1px solid rgba(200,200,215,.22); }
    .lb-prize.g2 .lb-prize-val { color:#d3d3de; }
    .lb-prize.g3 { background:linear-gradient(160deg,rgba(205,127,50,.13),rgba(205,127,50,.02)); border:1px solid rgba(205,127,50,.24); }
    .lb-prize.g3 .lb-prize-val { color:#e08a45; }
    .lb-prizes.no-prize { display:none; }   /* «Всі часи» — призів немає, не тримаємо порожні плитки */

    /* Перемикачі */
    .lb-body { padding:14px 14px 110px; }
    .lb-seg { display:flex; gap:3px; background:var(--box); border:1px solid var(--border); border-radius:15px; padding:4px; margin-bottom:10px; box-shadow:var(--bevel); }
    .lb-seg-btn { flex:1; text-align:center; padding:9px 4px; border-radius:11px; font-size:12px; font-weight:700; color:var(--sub);
      cursor:pointer; white-space:nowrap; transition:background .18s var(--ease-premium), color .18s, box-shadow .18s; -webkit-tap-highlight-color:transparent; }
    .lb-seg-btn.active { background:linear-gradient(160deg,rgba(212,175,55,.22),rgba(212,175,55,.08)); color:var(--accent);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px -10px rgba(212,175,55,.6); }
    .lb-chips { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-bottom:14px; padding-bottom:2px; }
    .lb-chips::-webkit-scrollbar { display:none; }
    .lb-chip { flex-shrink:0; padding:7px 13px; border-radius:20px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
      background:var(--box); border:1px solid var(--border); color:var(--sub); transition:.16s var(--ease-premium); -webkit-tap-highlight-color:transparent; }
    .lb-chip:active { transform:scale(.95); }
    .lb-chip.active { background:linear-gradient(160deg,rgba(212,175,55,.2),rgba(212,175,55,.06)); border-color:rgba(212,175,55,.45); color:var(--accent);
      box-shadow:0 6px 18px -10px rgba(212,175,55,.7); }

    /* Подіум */
    .lb-podium { display:grid; grid-template-columns:1fr 1.18fr 1fr; gap:7px; align-items:end; margin-bottom:16px; }
    .lb-pod { position:relative; border-radius:18px 18px 12px 12px; padding:12px 6px 0; text-align:center; cursor:pointer; overflow:hidden;
      animation:lbPodIn .45s var(--ease-premium) backwards; -webkit-tap-highlight-color:transparent; transition:transform .14s var(--ease-tactile); }
    .lb-pod:active { transform:translateY(2px) scale(.98); }
    @keyframes lbPodIn { from { opacity:0; transform:translateY(16px); } }
    .lb-pod.r1 { background:linear-gradient(170deg,rgba(255,215,0,.18),rgba(255,215,0,.03)); border:1px solid rgba(255,215,0,.35);
      box-shadow:var(--bevel), 0 0 46px -18px rgba(255,215,0,.85); animation-delay:.05s; }
    .lb-pod.r2 { background:linear-gradient(170deg,rgba(200,200,215,.13),rgba(200,200,215,.02)); border:1px solid rgba(200,200,215,.25); box-shadow:var(--bevel); }
    .lb-pod.r3 { background:linear-gradient(170deg,rgba(205,127,50,.13),rgba(205,127,50,.02)); border:1px solid rgba(205,127,50,.26);
      box-shadow:var(--bevel); animation-delay:.1s; }
    .lb-pod.me { outline:2px solid var(--accent); outline-offset:-2px; }
    .lb-crown { position:absolute; top:-2px; left:50%; transform:translateX(-50%); font-size:17px; animation:lbFloat 2.6s ease-in-out infinite; }
    @keyframes lbFloat { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,-3px); } }
    .lb-pod-av { width:46px; height:46px; margin:6px auto 7px; border-radius:50%; object-fit:cover; display:flex; align-items:center; justify-content:center;
      font-size:17px; font-weight:800; color:#1a1400; background:linear-gradient(140deg,var(--accent2),#a9791c); }
    .lb-pod.r1 .lb-pod-av { width:54px; height:54px; font-size:20px; border:2px solid #ffd700; box-shadow:0 0 22px -6px rgba(255,215,0,.8); }
    .lb-pod.r2 .lb-pod-av { border:2px solid #c8c8d7; background:linear-gradient(140deg,#e6e6ef,#8a8a9c); color:#15131f; }
    .lb-pod.r3 .lb-pod-av { border:2px solid #cd7f32; background:linear-gradient(140deg,#e9a86a,#9a5a1e); color:#1d1005; }
    .lb-pod-name { font-size:11.5px; font-weight:700; padding:0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .lb-pod-val { font-size:13px; font-weight:900; color:#fff; margin-top:2px; font-variant-numeric:tabular-nums; }
    .lb-pod-base { margin-top:9px; font-family:'Orbitron',monospace; font-size:15px; font-weight:900; color:rgba(255,255,255,.22);
      background:rgba(0,0,0,.28); border-top:1px solid rgba(255,255,255,.06); }
    .lb-pod.r1 .lb-pod-base { height:40px; line-height:40px; color:rgba(255,215,0,.5); }
    .lb-pod.r2 .lb-pod-base { height:28px; line-height:28px; }
    .lb-pod.r3 .lb-pod-base { height:21px; line-height:21px; }

    /* Рядки 4+ */
    .lb-row { display:flex; align-items:center; gap:11px; padding:10px 12px; margin-bottom:6px; border-radius:15px;
      background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,0) 60%), var(--box); border:1px solid var(--border);
      cursor:pointer; box-shadow:var(--bevel); animation:lbRowIn .3s var(--ease-premium) backwards;
      transition:transform .13s var(--ease-tactile), border-color .15s; -webkit-tap-highlight-color:transparent; }
    @keyframes lbRowIn { from { opacity:0; transform:translateX(-8px); } }
    .lb-row:active { transform:scale(.985); }
    .lb-row.me { border-color:rgba(212,175,55,.45); background:linear-gradient(160deg,rgba(212,175,55,.12),rgba(212,175,55,.02)); }
    .lb-rank { min-width:24px; text-align:center; font-family:'Orbitron',monospace; font-size:13px; font-weight:900; color:var(--sub); font-variant-numeric:tabular-nums; }
    .lb-row.me .lb-rank { color:var(--accent); }
    .lb-av { width:34px; height:34px; flex-shrink:0; border-radius:50%; object-fit:cover; display:flex; align-items:center; justify-content:center;
      font-size:13px; font-weight:800; color:#1a1400; background:linear-gradient(140deg,var(--accent2),#a9791c); border:1px solid rgba(255,255,255,.12); }
    .lb-row-main { flex:1; min-width:0; }
    .lb-row-name { font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .lb-row-tag { font-size:9.5px; color:var(--accent); font-weight:700; margin-left:4px; }
    .lb-bar { height:3px; margin-top:5px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden; }
    .lb-bar-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .6s var(--ease-premium); }
    .lb-row-val { font-size:13.5px; font-weight:900; color:var(--accent); flex-shrink:0; font-variant-numeric:tabular-nums; }

    /* Моя позиція (прилипає знизу) */
    .lb-me-card { position:sticky; bottom:96px; z-index:5; display:flex; align-items:center; gap:11px; margin-top:12px; padding:11px 13px; border-radius:16px;
      background:linear-gradient(160deg,rgba(212,175,55,.18),rgba(20,16,10,.96)); border:1px solid rgba(212,175,55,.4);
      box-shadow:var(--bevel), var(--elev-2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
    .lb-me-rank { font-family:'Orbitron',monospace; font-size:17px; font-weight:900; color:var(--accent); font-variant-numeric:tabular-nums; }
    .lb-me-lbl { font-size:10px; color:var(--sub); text-transform:uppercase; letter-spacing:.5px; }
    .lb-me-val { font-size:14px; font-weight:900; color:#fff; font-variant-numeric:tabular-nums; }
    .lb-me-gap { font-size:10.5px; color:var(--sub); margin-top:2px; }
    .lb-me-gap b { color:var(--accent); }

    /* Порожньо / завантаження */
    .lb-empty { text-align:center; padding:34px 20px; color:var(--sub); font-size:13px; line-height:1.6; }
    .lb-empty-icon { font-size:40px; opacity:.35; margin-bottom:10px; }
    .lb-skel { height:56px; margin-bottom:6px; border-radius:15px; border:1px solid var(--border);
      background:linear-gradient(100deg, var(--box) 30%, rgba(255,255,255,.045) 50%, var(--box) 70%); background-size:240% 100%; animation:lbShimmer 1.25s linear infinite; }
    @keyframes lbShimmer { from { background-position:150% 0; } to { background-position:-50% 0; } }

    /* ===== МОНОПОЛІЯ ===== */
    .mono-board-wrap { position: relative; width: 100%; max-width: 420px; margin: 0 auto 10px; aspect-ratio: 1; background: #e8f4e8; border: 3px solid #2d5a2d; border-radius: 4px; overflow: hidden; }
    .mono-board { display: grid; grid-template-columns: 56px repeat(9,1fr) 56px; grid-template-rows: 56px repeat(9,1fr) 56px; width: 100%; height: 100%; }
    .mono-cell { border: 0.5px solid #bbb; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 7px; text-align: center; cursor: pointer; position: relative; overflow: hidden; line-height: 1.1; padding: 1px; background: #f5f5f5; }
    .mono-cell.corner { font-size: 9px; background: #d4edda; font-weight: bold; }
    .mono-cell.prop-top    { border-bottom: 4px solid; }
    .mono-cell.prop-bottom { border-top: 4px solid; }
    .mono-cell.prop-left   { border-right: 4px solid; }
    .mono-cell.prop-right  { border-left: 4px solid; }
    .mono-cell.owned-me    { box-shadow: inset 0 0 0 2px #4cd964; }
    .mono-cell.owned-ai    { box-shadow: inset 0 0 0 2px #ff3b30; }
    .mono-cell .cell-price { font-size: 6px; color: #666; }
    .mono-player { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #fff; font-size: 8px; z-index: 5; transition: all 0.5s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.5); pointer-events: none; }
    .mono-center { grid-column: 2/11; grid-row: 2/11; background: #d4edda; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: #2d5a2d; letter-spacing: 2px; text-align: center; }
    .mono-info-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
    .mono-info-card { background: #111; border-radius: 10px; padding: 12px; border: 1px solid #222; text-align: center; }
    .mono-info-val { font-size: 20px; font-weight: bold; }
    .mono-info-lbl { font-size: 10px; color: #777; margin-top: 2px; }
    .mono-dice { display: flex; justify-content: center; gap: 12px; margin: 8px 0; }
    .mono-die  { width: 44px; height: 44px; background: #fff; border-radius: 8px; border: 2px solid #333; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); transition: transform 0.3s; }
    .mono-die.rolling { animation: diceRoll 0.5s ease; }
    @keyframes diceRoll { 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(-25deg)scale(1.1)} 75%{transform:rotate(25deg)scale(1.1)} }
    .mono-log  { height: 120px; overflow-y: auto; background: #0a0a0a; border: 1px solid #222; border-radius: 8px; padding: 8px; font-size: 12px; scrollbar-width: none; }
    .mono-log-item { padding: 3px 0; border-bottom: 1px solid #0d0d0d; color: #ccc; }
    .mono-log-item.good  { color: var(--green); }
    .mono-log-item.bad   { color: var(--red); }
    .mono-log-item.info  { color: var(--accent); font-weight: bold; }
    .mono-action-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

    /* ===== NAV DOT ===== */
    .nav-notif-dot { position:absolute; top:8px; right:12px; width:8px; height:8px; background:var(--red); border-radius:50%; border:1.5px solid #080808; }

    /* ===== СПОВІЩЕННЯ ===== */
    /* Сповіщення — мова «Ledger» */
    .notif-item { display:flex; align-items:flex-start; gap:12px; padding:13px 14px; background:var(--ks-surface); border:1px solid var(--ks-line); border-left:3px solid transparent; border-radius:var(--ks-r); margin-bottom:8px; cursor:pointer; transition:background .15s, border-color .15s; }
    .notif-item:hover { background:var(--ks-surface-2); }
    .notif-item.unread { border-left-color:var(--ks-acc); background:var(--ks-acc-dim); }
    .notif-item.unread.green-notif { border-left-color:var(--ks-pos); background:rgba(49,196,141,.08); }
    .notif-item.unread.red-notif   { border-left-color:var(--ks-neg); background:rgba(240,85,107,.08); }
    .notif-icon { font-size:22px; flex-shrink:0; margin-top:1px; line-height:1; }
    .notif-body { flex:1; min-width:0; }
    .notif-title { font-size:14px; font-weight:650; color:var(--ks-fg); margin-bottom:2px; }
    .notif-text  { font-size:13px; color:var(--ks-fg-2); line-height:1.45; }
    .notif-time  { font-size:11px; color:var(--ks-fg-3); margin-top:5px; }
    .notif-filter { display:flex; gap:6px; margin-bottom:14px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
    .notif-filter::-webkit-scrollbar { display:none; }
    .notif-filter-btn { padding:8px 14px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; background:var(--ks-surface-2); border:1px solid var(--ks-line); color:var(--ks-fg-3); white-space:nowrap; flex-shrink:0; transition:background .15s, border-color .15s, color .15s; }
    .notif-filter-btn:hover { background:var(--ks-surface-3); color:var(--ks-fg-2); }
    .notif-filter-btn.active { background:var(--ks-acc-dim); border-color:var(--ks-acc); color:#b3bcff; }

    /* ===== НАЛАШТУВАННЯ ===== */
    /* Налаштування — мова «Ledger» (класи використовуються лише тут) */
    .settings-section { background:var(--ks-surface); border:1px solid var(--ks-line); border-radius:var(--ks-r-lg); overflow:hidden; margin-bottom:14px; box-shadow:none; }
    .settings-row { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--ks-line); }
    .settings-row:last-child { border-bottom:none; }
    .settings-icon { font-size:19px; min-width:26px; text-align:center; }
    .settings-label { flex:1; font-size:14px; font-weight:600; color:var(--ks-fg); font-family:var(--ks-sans); }
    .settings-sub   { font-size:12px; color:var(--ks-fg-3); margin-top:2px; font-family:var(--ks-sans); }
    .toggle-switch  { position:relative; width:46px; height:26px; flex-shrink:0; }
    .toggle-switch input { opacity:0; width:0; height:0; }
    .toggle-slider  { position:absolute; inset:0; background:#333; border-radius:26px; cursor:pointer; transition:.3s; }
    .toggle-slider::before { content:''; position:absolute; width:20px; height:20px; left:3px; bottom:3px; background:#888; border-radius:50%; transition:.3s; }
    .toggle-switch input:checked + .toggle-slider { background:rgba(76,217,100,0.3); }
    .toggle-switch input:checked + .toggle-slider::before { background:var(--green); transform:translateX(20px); }
    .settings-select { background:#222; border:1px solid #444; color:#fff; border-radius:8px; padding:10px 12px; font-size:15px; }
    .theme-preview { display:flex; gap:8px; flex-wrap:wrap; }
    .theme-dot { width:32px; height:32px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
    .theme-dot.active { border-color:#fff; }

    .lang-btn.active { border-color:var(--accent); color:var(--accent); background:rgba(212,175,55,0.08); }

    /* ===== МУЛЬТИПЛЕЄР МОНОПОЛІЯ ===== */
    .mp-room-card { background:#111; border:1px solid #222; border-radius:12px; padding:14px; margin-bottom:8px; }
    .mp-room-card.waiting { border-color:var(--accent); }
    .mp-room-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
    .mp-players { display:flex; gap:6px; margin-top:6px; }
    .mp-player-slot { flex:1; background:#1a1a1a; border:1px solid #333; border-radius:8px; padding:8px; text-align:center; font-size:12px; }
    .mp-player-slot.filled { border-color:var(--green); background:rgba(76,217,100,0.05); }
    .mp-player-slot.empty  { border-style:dashed; color:#555; }
    .mp-status-badge { font-size:10px; padding:3px 8px; border-radius:10px; font-weight:bold; }
    .mp-waiting { background:rgba(212,175,55,0.2); color:var(--accent); }
    .mp-playing  { background:rgba(76,217,100,0.2); color:var(--green); }

    /* ===== СЛОТІКИ ===== */
    #tab-slotiky .section-header { color:#c9a0ff; }

    /* ===== СТРІМ VIEWER ===== */
    #streamViewerModal { backdrop-filter: blur(4px); }

    /* ===== ТУРНІР V2 ===== */
    .tournament-card { background:linear-gradient(135deg,#1a1200,#0d0800);border:1px solid #3a2800;border-radius:var(--r-md);padding:14px;margin-bottom:10px; box-shadow: var(--bevel), var(--elev-1); }
    .t-prize { font-size:22px;font-weight:900;color:var(--accent);margin:6px 0; }
    .t-info  { font-size:11px;color:#555; }
    .t-row   { display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px solid #111; }
    .t-row:last-child { border-bottom:none; }

    /* ===== КЕШБЕК у касі ===== */
    #cashierCashbackPanel .btn-green { width:100%;padding:12px;font-size:14px;font-weight:bold;border:none;border-radius:12px;background:linear-gradient(135deg,var(--green),#1a5a20);color:#000;cursor:pointer; }
    #cashierCashbackPanel .btn-green:disabled { background:#1a1a1a;color:#555; }

    /* ===== ESPORTS BADGE ===== */
    .esport-badge { background:linear-gradient(135deg,#1a0a2e,#2d1060);border:1px solid #5a20c0;color:#c9a0ff;font-size:9px;font-weight:bold;padding:2px 6px;border-radius:8px;display:inline-block;margin-left:4px; }

    /* ===== LIVE MATCH TRACKER ===== */
    .tracker-container {
      background: linear-gradient(180deg, #0a0f0a 0%, #111811 100%);
      border: 1px solid #1a2a1a;
      border-radius: 16px;
      overflow: hidden;
      margin: 10px 0;
    }
    .tracker-header {
      background: linear-gradient(90deg, #0077b6, #00b4d8);
      padding: 8px 14px;
      font-size: 12px;
      font-weight: bold;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .tracker-header .live-dot {
      width: 8px; height: 8px; background: #fff;
      border-radius: 50%; animation: pulse2 1s infinite;
    }
    .pitch-area {
      position: relative;
      width: 100%;
      height: 220px;
      overflow: hidden;
    }
    .pitch-canvas { width: 100%; height: 100%; display: block; }
    .event-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(4px);
      border-radius: 20px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      font-size: 13px;
      font-weight: bold;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
      min-width: 160px;
    }
    .event-overlay.show { opacity: 1; }
    .event-overlay .ev-icon {
      width: 28px; height: 28px;
      background: linear-gradient(135deg, #0077b6, #00b4d8);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; flex-shrink: 0;
    }
    .tracker-events {
      padding: 10px 14px;
      max-height: 120px;
      overflow-y: auto;
      scrollbar-width: none;
      border-top: 1px solid #1a2a1a;
    }
    .tracker-event-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 5px 0;
      border-bottom: 1px solid #0d150d;
      font-size: 12px;
    }
    .tracker-event-row:last-child { border-bottom: none; }
    .ev-min { color: #f4a261; font-weight: bold; min-width: 34px; font-size: 11px; }
    .ev-score { color: var(--accent); font-weight: 900; min-width: 34px; text-align: center; }
    .ev-text { color: #ccc; }
    .ev-side-home { text-align: left; }
    .ev-side-away { text-align: right; margin-left: auto; }
    .tracker-score-bar {
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #1a2a1a;
      background: #080f08;
    }
    .tracker-team { font-size: 12px; font-weight: bold; max-width: 100px; text-align: center; }
    .tracker-score { font-size: 28px; font-weight: 900; color: #fff; }
    .tracker-minute { font-size: 11px; color: #f4a261; text-align: center; }
    @keyframes pulse2 { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
    @keyframes ballMove {
      0% { transform: translate(var(--bx0), var(--by0)); }
      100% { transform: translate(var(--bx1), var(--by1)); }
    }

    /* ============================================
       VIRTUAL BANK CARD
    ============================================ */
    .vcard-wrap { perspective: 1000px; width: 100%; max-width: 360px; margin: 0 auto 20px; height: 200px; }
    .vcard { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4,0,0.2,1); cursor: pointer; }
    .vcard.flipped { transform: rotateY(180deg); }
    .vcard-front, .vcard-back {
      position: absolute; width: 100%; height: 100%; border-radius: 18px;
      backface-visibility: hidden; -webkit-backface-visibility: hidden;
      padding: 20px 24px; box-sizing: border-box;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
      overflow: hidden;
    }
    .vcard-back { transform: rotateY(180deg); }

    /* SKIN: default gold */
    .vcard-skin-gold .vcard-front { background: linear-gradient(135deg, #1a0d00 0%, #3d2200 40%, #6b3d00 70%, var(--accent) 100%); }
    .vcard-skin-gold .vcard-back  { background: linear-gradient(135deg, var(--accent) 0%, #6b3d00 40%, #3d2200 100%); }
    .vcard-skin-galaxy .vcard-front  { background: linear-gradient(135deg, #000010 0%, #0a004a 30%, #300080 60%, #7000b0 100%); }
    .vcard-skin-galaxy .vcard-back   { background: linear-gradient(135deg, #7000b0 0%, #300080 50%, #0a004a 100%); }

    /* Card front elements — реалістичний EMV-чип: сітка контактів, а не хрест */
    /* Чип, безконтактна іконка та платіжне лого лежать у потоці:
       раніше вони були absolute і накладались на бейдж та термін дії */
    .vcard-chip {
      width: 42px; height: 32px; flex-shrink: 0;
      background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0, rgba(0,0,0,.22) 1px, transparent 1px, transparent 14px),
        repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 1px, transparent 1px, transparent 10px),
        linear-gradient(135deg, #f4d78a, var(--accent) 40%, #ffdb4d 60%, #a0820c);
      border-radius: 6px; position: relative;
      box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,0.3);
    }
    .vcard-chip-row { display:flex; justify-content:space-between; align-items:center; margin:15px 0 14px; }
    .vcard-contactless { opacity:.5; color:rgba(255,255,255,.9); }
    .vcard-contactless svg { width:20px; height:20px; }
    /* Тиснений друк, як на справжній картці, але приглушений: акцент на
       читабельності номера, а не на блиску */
    .vcard-number { font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; font-size: 19px; font-weight:500; letter-spacing: 2.2px; color: rgba(255,255,255,.96); text-shadow: 0 1px 0 rgba(255,255,255,.16), 0 -1px 1px rgba(0,0,0,.5); margin-bottom: 16px; }
    .vcard-holder-row { display:flex; justify-content:space-between; align-items:flex-end; }
    .vcard-label { font-size: 8px; color: rgba(255,255,255,0.42); text-transform:uppercase; letter-spacing: .14em; font-weight:600; }
    .vcard-value { font-size: 12px; font-weight:600; color: rgba(255,255,255,0.92); letter-spacing:.06em; text-shadow: 0 1px 0 rgba(255,255,255,.12), 0 -1px 1px rgba(0,0,0,.45); margin-top:3px; }
    .vcard-logo { display:flex; align-items:center; flex-shrink:0; }
    .vcard-logo .c1, .vcard-logo .c2 { width:26px; height:26px; border-radius:50%; opacity:0.85; }
    .vcard-logo .c1 { background:#eb001b; }
    .vcard-logo .c2 { background:#f79e1b; margin-left:-9px; }
    .vcard-bank-name { font-size:11px; font-weight:700; color:rgba(255,255,255,0.88); letter-spacing:.16em; text-transform:uppercase; }
    
    /* Card back elements */
    .vcard-stripe { height: 44px; background: rgba(0,0,0,0.7); margin: -22px -24px 14px; }
    .vcard-cvv-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
    .vcard-cvv-tape { flex:1; background:rgba(255,255,255,0.85); height:36px; border-radius:4px; display:flex; align-items:center; padding: 0 10px; }
    .vcard-cvv-value { font-family:'Courier New',monospace; font-size:16px; font-weight:bold; color:#000; letter-spacing:4px; }
    .vcard-cvv-label { font-size:10px; color:rgba(255,255,255,0.6); white-space:nowrap; }
    .vcard-signature { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:4px; padding:6px 12px; font-size:10px; color:rgba(255,255,255,0.6); font-style:italic; }
    .vcard-back-logo { text-align:right; margin-top:8px; }

    /* CARD SKINS SHOP */
    .skin-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
    .skin-item { border-radius:14px; overflow:hidden; cursor:pointer; border:2px solid transparent; transition:0.2s; position:relative; }
    .skin-item.active { border-color:var(--accent); }
    .skin-item.locked { opacity:0.5; cursor:default; }
    .skin-preview { height:70px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:bold; color:rgba(255,255,255,0.8); }
    .skin-info { background:rgba(0,0,0,0.4); padding:6px 10px; display:flex; justify-content:space-between; align-items:center; }
    .skin-locked-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; font-size:18px; }

    /* CARD ONBOARDING MODAL */
    .card-onboard-modal { position:fixed; inset:0; background:rgba(4,5,8,.84); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:9900; display:flex; align-items:center; justify-content:center; padding:18px; }
    .card-onboard-box { background:#12141a; border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:24px 22px; max-width:400px; width:100%; max-height:88vh; overflow-y:auto; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#eceff5; }
    .card-onboard-box::-webkit-scrollbar { width:0; }
    .card-onboard-box input { text-align:center; background:#191c24; border:1px solid rgba(255,255,255,.07); border-radius:12px; box-shadow:none; color:#eceff5; }
    .card-onboard-box input:focus { border-color:#7c8cff; box-shadow:none; }
    .card-onboard-box button { box-shadow:none; letter-spacing:0; }
    
    /* BANK TAB */
    .bank-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }

    .bank-action-btn .ba-icon { font-size:26px; margin-bottom:6px; }
    .bank-action-btn .ba-label { font-size:12px; font-weight:bold; color:#aaa; }

    .bank-tx-amount.plus  { color:var(--green); }

    /* Shimmer animation for card */
    @keyframes cardShimmer {
      0%   { background-position: -300% center; }
      100% { background-position: 300% center; }
    }
    .vcard-skin-galaxy .vcard-front {
      background-size: 200% auto;
      animation: cardShimmer 4s linear infinite;
    }

    /* ─── WIN EFFECTS ─── */
    .confetti-piece{position:absolute;border-radius:2px;animation:cfall 2.5s linear forwards;}
    @keyframes cfall{0%{opacity:1;transform:translateY(-20px) rotate(0deg);}100%{opacity:0;transform:translateY(110vh) rotate(720deg);}}
    .coin-fly{position:absolute;font-size:26px;pointer-events:none;animation:coinup 1.8s ease-out forwards;}
    @keyframes coinup{0%{opacity:1;transform:translateY(0) scale(1);}60%{opacity:1;transform:translateY(-90px) scale(1.3);}100%{opacity:0;transform:translateY(-160px) scale(0.5);}}
    #winEffectOverlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:99999;overflow:hidden;}
    .big-win-glow{position:fixed;inset:0;background:radial-gradient(circle at 50% 50%,rgba(212,175,55,.22),transparent 70%);z-index:99997;animation:glowpop .8s ease-out forwards;pointer-events:none;}
    @keyframes glowpop{0%{opacity:1;}100%{opacity:0;}}

    /* ─── EXTRA THEMES ─── */
    [data-theme="neon"]   {--bg:#010110;--box:#07071e;--border:#1a0050;--input:#0a0a25;--text:#e0d0ff;--accent:#b347ff;--green:#00ff88;--red:#ff2060;}
    [data-theme="matrix"] {--bg:#000a00;--box:#001000;--border:#003300;--input:#001500;--text:#00ff41;--accent:#00ff41;--green:#00ff41;--red:#ff3030;}
    [data-theme="sakura"] {--bg:#110008;--box:#1e0012;--border:#4a0030;--input:#180010;--text:#ffddee;--accent:#ff69b4;--green:#ff9fc8;--red:#ff3070;}

    /* ─── BACCARAT ─── */
    .bac-table{background:linear-gradient(135deg,#0a200a,#051205);border:1px solid #1a4a1a;border-radius:16px;padding:14px;margin-bottom:12px;}
    .bac-cards{display:flex;gap:6px;min-height:72px;align-items:center;flex-wrap:wrap;}
    .bac-card{width:46px;height:65px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#000;box-shadow:0 3px 8px rgba(0,0,0,.5);}
    .bac-card.red{color:#e74c3c;}
    .bac-bet-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px;}
    .bac-btn{padding:14px 6px;border:none;border-radius:12px;font-weight:900;font-size:12px;cursor:pointer;transition:.15s;}
    .bac-btn:active{transform:scale(.97);}
    .bac-btn.player{background:linear-gradient(135deg,#1a3a6b,#2a5ab8);color:#fff;}
    .bac-btn.banker{background:linear-gradient(135deg,#6b1a1a,#b82a2a);color:#fff;}
    .bac-btn.tie{background:linear-gradient(135deg,#1a5a1a,#2a8a2a);color:#fff;}

    /* ─── VIDEO POKER ─── */
    .vp-hand{display:flex;gap:7px;justify-content:center;margin:14px 0;}
    .vp-card{width:56px;height:82px;background:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#000;cursor:pointer;border:3px solid transparent;box-shadow:0 4px 12px rgba(0,0,0,.4);transition:.15s;position:relative;user-select:none;}
    .vp-card.red{color:#e74c3c;}
    .vp-card.held{border-color:#4cd964;background:#f0fff4;transform:translateY(-10px);}
    .vp-card.held::after{content:'HOLD';position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:9px;color:#4cd964;font-weight:900;}
    .vp-paytable{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:11px;color:#777;margin-bottom:12px;}
    .vp-paytable .highlight{color:var(--accent);font-weight:bold;}

    /* ─── PRIVATE MESSAGES ─── */
    .pm-thread{display:flex;align-items:center;gap:12px;padding:12px;background:var(--box);border:1px solid var(--border);border-radius:12px;margin-bottom:6px;cursor:pointer;}
    .pm-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ffdb4d);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:#000;flex-shrink:0;cursor:pointer;}
    .pm-bubble{max-width:80%;padding:9px 13px;border-radius:16px;font-size:13px;line-height:1.5;word-break:break-word;margin-bottom:6px;}
    .pm-bubble.mine{background:linear-gradient(135deg,#1a3a1a,#1a4a1a);border-bottom-right-radius:4px;align-self:flex-end;margin-left:auto;}

    /* ─── ACTIVITY FEED ─── */
    .feed-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(255,255,255,.03);border-radius:var(--r-sm);margin-bottom:5px;font-size:12px;animation:fadeIn .4s ease;box-shadow: var(--bevel);}
    @keyframes fadeIn{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:none;}}

    /* ═══════════════════════════════════════════
       v63 — UI OVERHAUL
    ═══════════════════════════════════════════ */

    /* GAME CARDS — glow + shimmer */
    .casino-game-card {
      background: linear-gradient(160deg, #1c1c1c, #111);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: var(--r-md);
      overflow: hidden;
      cursor: pointer;
      position: relative;
      transition: transform .18s, box-shadow .18s, border-color .18s;
      box-shadow: var(--bevel), var(--elev-1);
    }
    .casino-game-card:hover {
      transform: translateY(-3px);
      border-color: rgba(212,175,55,.4);
      box-shadow: var(--bevel), 0 8px 24px rgba(0,0,0,.5), var(--glow-accent-soft);
    }
    .casino-game-card:active { transform: scale(.92); filter:brightness(.75); }
    .casino-game-card-img {
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 44px;
      position: relative;
      overflow: hidden;
    }
    .casino-game-card-img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.65) 100%);
    }
    .casino-game-card-info { padding: 7px 9px 9px; }
    .casino-game-card-name { font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .2px; }
    .casino-game-card-prov { font-size: 9px; color: #555; margin-top: 1px; }
    .casino-badge-hot { position:absolute; top:5px; right:5px; background:linear-gradient(135deg,#e74c3c,#c0392b); color:#fff; font-size:8px; font-weight:800; padding:2px 6px; border-radius:4px; z-index:2; letter-spacing:.5px; box-shadow:0 2px 6px rgba(231,76,60,.4); }
    .casino-badge-new { position:absolute; top:5px; right:5px; background:linear-gradient(135deg,#2ecc71,#27ae60); color:#000; font-size:8px; font-weight:800; padding:2px 6px; border-radius:4px; z-index:2; letter-spacing:.5px; }

    /* HERO */
    .casino-hero-banner {
      background: linear-gradient(135deg,#1c0c00,#0d0600,#1a1200);
      border: 1px solid rgba(212,175,55,.35);
      border-radius: 18px;
      padding: 20px 18px;
      margin-bottom: 14px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--bevel), var(--elev-2), var(--glow-accent-soft);
      animation: heroGlowBreathe 5s ease-in-out infinite;
    }
    .casino-hero-banner::after {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212,175,55,.5), transparent);
    }
    @keyframes heroGlowBreathe {
      0%, 100% { box-shadow: var(--bevel), var(--elev-2), var(--glow-accent-soft); }
      50%      { box-shadow: var(--bevel), var(--elev-2), var(--glow-accent-strong); }
    }
    /* Parallax decoration layers — moved by JS pointer-tracking on desktop only;
       stay put (no motion cost) on touch/reduced-motion, per hero-parallax gating. */
    .hero-parallax-layer {
      position: absolute; pointer-events: none;
      transition: transform .5s var(--ease-premium);
      will-change: transform;
    }
    .hero-parallax-glow {
      inset: -30%; right: -10%;
      background: radial-gradient(circle at 70% 40%, rgba(212,175,55,.25), transparent 60%);
    }
    .hero-parallax-icon {
      right: -8px; top: 0; bottom: 0;
      display: flex; align-items: center;
      font-size: 100px; opacity: .1; line-height: 1;
    }

    /* JACKPOT STRIP */
    .jackpot-strip {
      background: linear-gradient(90deg,#1a0500 0%,#120300 50%,#1a0500 100%);
      border: 1px solid rgba(212,175,55,.5);
      border-radius: 14px;
      padding: 13px 16px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 0 20px rgba(212,175,55,.08);
      position: relative;
      overflow: hidden;
    }
    .jackpot-strip::before {
      content: '';
      position: absolute; inset: 0;
      background: repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(212,175,55,.02) 40px, rgba(212,175,55,.02) 41px);
    }
    .jackpot-num { font-family:'Orbitron',monospace; font-size: 22px; font-weight: 900; color: var(--accent); letter-spacing: 1px; }
    .jackpot-play-btn {
      background: linear-gradient(135deg,var(--accent),#b8961e);
      border: none;
      border-radius: 10px;
      color: #000;
      font-weight: 800;
      font-size: 12px;
      padding: 10px 18px;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(212,175,55,.3);
      transition: .15s;
    }
    .jackpot-play-btn:active { transform: scale(.95); }

    /* CATEGORY TABS */
    .casino-cat-btn {
      flex-shrink: 0;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 20px;
      padding: 7px 14px;
      font-size: 11px;
      font-weight: 700;
      color: #777;
      cursor: pointer;
      white-space: nowrap;
      transition: all .2s;
    }
    .casino-cat-btn.active {
      background: rgba(212,175,55,.15);
      border-color: var(--accent);
      color: var(--accent);
      box-shadow: 0 0 10px rgba(212,175,55,.15);
    }

    /* WINS FEED */
    .wins-feed { background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; margin-bottom:12px; }
    .win-feed-row { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.04); animation:wfSlide .4s ease; }
    .win-feed-row:last-child { border-bottom:none; }

    /* NAV BOTTOM — glow on active */
    .nav-item.active { color:var(--accent); }
    .nav-item.active .nav-icon { filter: drop-shadow(0 0 6px var(--accent)); }

    /* STREAK BANNER */
    .streak-banner {
      background: linear-gradient(135deg, #1a0a00, #2d1500);
      border: 1px solid rgba(255,159,67,.4);
      border-radius: 14px;
      padding: 12px 14px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      animation: streakPulse 2s ease-in-out infinite;
    }
    @keyframes streakPulse { 0%,100%{box-shadow:0 0 0 rgba(255,159,67,0)} 50%{box-shadow:0 0 14px rgba(255,159,67,.2)} }

    /* BALLOON GAME */
    .balloon-arena {
      background: linear-gradient(180deg, #050520, #0a0a0a);
      border: 1px solid rgba(74,158,255,.2);
      border-radius: 16px;
      height: 300px;
      position: relative;
      overflow: hidden;
      margin-bottom: 10px;
    }
    .balloon {
      position: absolute;
      font-size: 52px;
      cursor: pointer;
      animation: balloonFloat 0s linear;
      transition: transform .1s;
      user-select: none;
      filter: drop-shadow(0 0 8px rgba(74,158,255,.5));
    }
    .balloon:active { transform: scale(1.3); }
    @keyframes balloonFloat { from{bottom:-60px} to{bottom:110%} }

    /* РУЛЕТКА РИЗИКУ */
    .rr-revolver {
      width: 140px; height: 140px;
      border-radius: 50%;
      background: conic-gradient(#1a1a1a 0deg 60deg, #111 60deg 120deg, #1a1a1a 120deg 180deg, #111 180deg 240deg, #1a1a1a 240deg 300deg, #111 300deg 360deg);
      border: 3px solid #333;
      display: flex; align-items:center; justify-content:center;
      margin: 0 auto 16px;
      position: relative;
      transition: transform .8s cubic-bezier(.36,.07,.19,.97);
    }
    .rr-chamber { position:absolute; width:18px; height:18px; border-radius:50%; background:#222; border:2px solid #444; }

    /* QUIZ BATTLE */
    .quiz-option {
      background: rgba(255,255,255,.05);
      border: 2px solid rgba(255,255,255,.1);
      border-radius: 12px;
      padding: 13px 16px;
      font-size: 13px;
      cursor: pointer;
      transition: all .2s;
      text-align: left;
      width: 100%;
      color: #fff;
      margin-bottom: 8px;
    }
    .quiz-option:hover { border-color: var(--accent); background: rgba(212,175,55,.08); }
    .quiz-option.correct { border-color: #3dd68c; background: rgba(61,214,140,.15); }
    .quiz-option.wrong { border-color: #ff6b6b; background: rgba(255,107,107,.12); }

    /* SESSION STATS BAR */
    .session-bar {
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      gap: 14px;
      margin-bottom: 10px;
      font-size: 10px;
      color: #555;
    }
    .session-stat { display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; }
    .session-stat-val { font-size: 13px; font-weight: 800; color: var(--accent); }

    /* DEPOSIT PACKAGES */
    .dep-package {
      background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,0) 45%), linear-gradient(150deg, #14130c, #0c0c0c);
      border: 1.5px solid rgba(255,255,255,.09);
      border-radius: var(--r-md);
      padding: 14px 12px;
      text-align: center;
      cursor: pointer;
      transition: transform .16s var(--ease-tactile), box-shadow .16s ease, border-color .16s ease;
      position: relative;
      overflow: hidden;
      box-shadow: var(--bevel), var(--elev-1);
    }
    .dep-package:active { transform: scale(.96) translateY(1px); filter: brightness(.92); }
    .dep-package.popular {
      border-color: rgba(212,175,55,.55);
      box-shadow: var(--bevel), var(--elev-1), 0 0 24px -6px rgba(212,175,55,.4);
    }
    .dep-package.popular::before {
      content:'★ Популярний'; position:absolute; top:0; right:0;
      background: linear-gradient(155deg,#f4d78a,var(--accent) 45%,#a9791c);
      color:#241800; font-size:8px; font-weight:800; letter-spacing:.3px;
      padding:3px 9px 3px 11px; border-radius:0 0 0 10px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
    }
    .dep-package-icon { font-size:19px; margin-bottom:4px; opacity:.9; }
    .dep-package-amount { font-size:23px; font-weight:900; color:#fff; font-family:'Orbitron',monospace; letter-spacing:.3px; }
    .dep-package-bonus { font-size:11px; color:#3dd68c; font-weight:800; margin-top:5px; background:rgba(61,214,140,.12); border-radius:7px; padding:2px 7px; display:inline-block; }
    .dep-package-bonus.none { color:#555; background:none; padding:0; font-weight:600; }
    .dep-package-total { font-size:10px; color:#666; margin-top:6px; }
    .dep-package-label { font-size:9px; color:#777; margin-top:3px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; }

    /* LIVE WALLPAPER */
    .live-wallpaper-btn {
      display: flex; align-items:center; gap:8px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 12px;
      padding: 10px 14px;
      cursor: pointer;
      transition: .2s;
      color: #aaa; font-size:12px;
    }
    .live-wallpaper-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(212,175,55,.08); }

    /* ANIMATED CANVAS BG */
    #liveBgCanvas { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .5s; }
    #liveBgCanvas.active { opacity:.4; }

    /* RETURN BONUS */
    @keyframes returnBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

    /* SMART AUTOBET */
    .autobet-condition {
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
    }

    /* PWA install btn */
    #pwaInstallBtn {
      background: linear-gradient(135deg,#4a9eff,#2d7dd6);
      border: none;
      border-radius: 12px;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      padding: 12px 20px;
      cursor: pointer;
      display: none;
      width: 100%;
      margin-bottom: 10px;
    }
    #pwaInstallBtn.visible { display:flex; align-items:center; justify-content:center; gap:8px; }

    /* ═══ 50 NEW FEATURES — CSS ═══ */

    /* Quick bet buttons */
    .quick-bet-row { display:flex; gap:5px; margin-bottom:6px; }
    .quick-bet-btn {
      flex:1; padding:7px 4px; background:rgba(212,175,55,.08);
      border:1px solid rgba(212,175,55,.2); border-radius:8px;
      font-size:11px; font-weight:700; color:var(--accent); cursor:pointer;
      transition:.15s;
    }
    .quick-bet-btn:active { background:rgba(212,175,55,.2); }

    /* Game search bar */
    .game-search-wrap { position:relative; margin-bottom:10px; }
    .game-search-input {
      width:100%; padding:13px 14px 13px 38px;
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
      border-radius:12px; color:#fff; font-size:15px;
      box-sizing:border-box; outline:none;
      transition: border-color .2s;
    }
    .game-search-input:focus { border-color:rgba(212,175,55,.4); }
    .game-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:14px; pointer-events:none; }

    /* Favorite games */
    .fav-btn { position:absolute; bottom:5px; right:5px; font-size:14px; cursor:pointer; z-index:3; opacity:.5; transition:.2s; }
    .fav-btn.active { opacity:1; filter:drop-shadow(0 0 4px gold); }

    /* Game sort tabs */
    .game-sort-row { display:flex; gap:6px; margin-bottom:8px; overflow-x:auto; scrollbar-width:none; }
    .game-sort-btn { flex-shrink:0; padding:5px 12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:8px; font-size:10px; font-weight:700; color:#666; cursor:pointer; white-space:nowrap; }
    .game-sort-btn.active { color:var(--accent); border-color:var(--accent); background:rgba(212,175,55,.08); }

    /* Responsible gambling */
    .rg-section { background:rgba(255,107,107,.05); border:1px solid rgba(255,107,107,.15); border-radius:14px; padding:14px; margin-bottom:10px; }
    .rg-title { font-size:12px; font-weight:700; color:#ff6b6b; margin-bottom:8px; }
    .rg-limit-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }

    /* Sound control */
    .sound-row { display:flex; align-items:center; gap:10px; }
    .volume-slider { flex:1; accent-color:var(--accent); cursor:pointer; }

    /* Chat */
    .chat-wrap { display:flex; flex-direction:column; height:320px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; }
    .chat-messages { flex:1; overflow-y:auto; padding:10px; scrollbar-width:thin; }
    .chat-msg { display:flex; gap:8px; margin-bottom:8px; animation:fadeIn .3s ease; }
    .chat-msg-avatar { width:26px; height:26px; border-radius:50%; background:#222; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
    .chat-msg-body { background:rgba(255,255,255,.04); border-radius:10px; padding:6px 10px; flex:1; }
    .chat-msg-user { font-size:10px; font-weight:700; color:var(--accent); margin-bottom:2px; }
    .chat-msg-text { font-size:12px; color:#ccc; word-break:break-word; }
    .chat-input-row { display:flex; gap:6px; padding:8px; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.2); }
    .chat-input { flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:11px 14px; color:#fff; font-size:15px; outline:none; }

    /* Horse racing */
    .horse-track { background:linear-gradient(180deg,#0a1a0a,#051005); border:1px solid rgba(61,214,140,.2); border-radius:14px; padding:12px; margin-bottom:10px; }
    .horse-lane { display:flex; align-items:center; gap:8px; margin-bottom:8px; background:rgba(255,255,255,.03); border-radius:8px; padding:6px 10px; cursor:pointer; transition:.2s; }
    .horse-lane.selected { border:1px solid var(--accent); background:rgba(212,175,55,.08); }
    .horse-emoji { font-size:22px; }
    .horse-bar-wrap { flex:1; height:6px; background:#1a1a1a; border-radius:3px; overflow:hidden; }
    .horse-bar { height:100%; border-radius:3px; transition:width .5s ease; }
    .horse-odds { font-size:12px; font-weight:800; color:var(--accent); min-width:35px; text-align:right; }

    /* Color prediction */
    .color-bet-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:10px; }
    .color-bet-btn { padding:18px 8px; border-radius:14px; border:3px solid transparent; cursor:pointer; font-size:22px; font-weight:900; text-align:center; transition:.2s; }
    .color-bet-btn:hover { transform:scale(1.05); }
    .color-bet-btn.selected { border-color:#fff; transform:scale(1.08); }

    /* Virtual slots reel */
    .slot-reel-wrap { display:flex; gap:6px; justify-content:center; margin-bottom:12px; }
    .slot-reel { width:68px; height:90px; background:#0a0a0a; border:2px solid #222; border-radius:10px; overflow:hidden; position:relative; }
    .slot-reel-inner { position:absolute; top:0; left:0; width:100%; transition:top .6s cubic-bezier(.22,1,.36,1); }
    .slot-reel-symbol { height:90px; display:flex; align-items:center; justify-content:center; font-size:40px; }

    /* Turbo mode */
    .turbo-indicator { display:flex; align-items:center; gap:6px; background:rgba(255,159,67,.08); border:1px solid rgba(255,159,67,.2); border-radius:8px; padding:5px 10px; font-size:11px; color:#ff9f43; }

    /* Rakeback */
    .rakeback-bar-wrap { background:#111; border-radius:8px; overflow:hidden; height:8px; margin:6px 0; }
    .rakeback-bar { height:100%; background:linear-gradient(90deg,var(--accent),#ff9f43); border-radius:8px; transition:width .5s; }

    /* Recently played */
    .recent-games-scroll { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin-bottom:12px; padding-bottom:4px; }
    .recent-game-chip { flex-shrink:0; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px 12px; font-size:11px; cursor:pointer; display:flex; align-items:center; gap:6px; }
    .recent-game-chip:active { background:rgba(212,175,55,.1); }

    /* Loss limit warning */
    .loss-limit-warn { background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.3); border-radius:12px; padding:12px; text-align:center; margin-bottom:10px; animation:warnPulse 1.5s ease-in-out infinite; display:none; }
    @keyframes warnPulse { 0%,100%{opacity:1} 50%{opacity:.7} }

    /* Реферали (колишній Афілейт) */
    .aff-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
    .aff-stat-card { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:12px; text-align:center; }
    .aff-stat-val { font-size:20px; font-weight:900; color:var(--accent); }
    .aff-stat-lbl { font-size:9px; color:#555; margin-top:2px; }

    /* Font size control */
    .font-size-row { display:flex; gap:6px; }
    .font-size-btn { flex:1; padding:8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:8px; font-size:11px; color:#777; cursor:pointer; text-align:center; }
    .font-size-btn.active { color:var(--accent); border-color:var(--accent); }

    /* VIP progress */
    .vip-progress-wrap { background:#111; border-radius:10px; height:10px; overflow:hidden; margin:8px 0; }
    .vip-progress-bar { height:100%; background:linear-gradient(90deg,#c9a0ff,#8e44ad); border-radius:10px; transition:width 1s ease; }

    /* Turbo bet (double/half) */
    .bet-adjust-row { display:flex; gap:4px; margin-top:4px; }
    .bet-adj-btn { flex:1; padding:6px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:7px; font-size:11px; color:#888; cursor:pointer; text-align:center; transition:.15s; }
    .bet-adj-btn:active { background:rgba(212,175,55,.1); color:var(--accent); }

    /* Leaderboard sparkline */
    .lb-spark { width:50px; height:16px; }

    /* Hot/cold badge */
    .hot-badge { background:rgba(231,76,60,.15); color:#e74c3c; border:1px solid rgba(231,76,60,.3); border-radius:4px; font-size:8px; padding:1px 5px; font-weight:800; }

    /* Autobet strategies */
    .strategy-card { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:12px; margin-bottom:6px; cursor:pointer; transition:.2s; }
    .strategy-card.selected { border-color:var(--accent); background:rgba(212,175,55,.06); }

    /* Real-time deposit approve animation */
    @keyframes reqFlash { 0%,100%{background:rgba(61,214,140,0)} 50%{background:rgba(61,214,140,.08)} }
    .req-card.new-req { animation:reqFlash 1s ease 2; }
  

    /* ══════════════════════════════════════════════════
       ГЛОБАЛЬНІ АНІМАЦІЇ v69
    ══════════════════════════════════════════════════ */

    /* Coin flip burst */
    @keyframes coinBurst {
      0%   { transform:scale(0) rotate(-180deg); opacity:0; }
      60%  { transform:scale(1.2) rotate(10deg);  opacity:1; }
      100% { transform:scale(1)   rotate(0deg);   opacity:1; }
    }
    /* Floating coins rain */
    @keyframes coinRain {
      0%  { transform:translateY(-20px) rotate(0deg); opacity:1; }
      100%{ transform:translateY(120vh) rotate(720deg); opacity:0; }
    }
    /* Win shimmer */
    @keyframes winShimmer {
      0%,100%{ background-position:0% 50%; }
      50%    { background-position:100% 50%; }
    }
    /* Pulse glow */
    @keyframes pulseGlow {
      0%,100%{ box-shadow:0 0 8px rgba(212,175,55,.3); }
      50%    { box-shadow:0 0 28px rgba(212,175,55,.9), 0 0 60px rgba(212,175,55,.3); }
    }
    /* Battle Pass track: current-level glow, milestone shimmer, claim-button pulse */
    @keyframes bpGlow {
      0%,100%{ box-shadow:0 0 6px rgba(201,160,255,.4); }
      50%    { box-shadow:0 0 22px rgba(201,160,255,.9), 0 0 44px rgba(201,160,255,.35); }
    }
    @keyframes bpClaimPulse {
      0%,100%{ transform:scale(1); }
      50%    { transform:scale(1.08); }
    }
    .bp-node-current   { animation: bpGlow 1.8s ease-in-out infinite; }
    .bp-node-milestone { box-shadow: 0 0 14px rgba(201,160,255,.25); }
    .bp-claim-pulse     { animation: bpClaimPulse 1.1s ease-in-out infinite; }
    /* Slide up entry */
    @keyframes slideUp {
      from{ transform:translateY(30px); opacity:0; }
      to  { transform:translateY(0);    opacity:1; }
    }
    /* Pop in */
    @keyframes popIn {
      0%  { transform:scale(0.5); opacity:0; }
      80% { transform:scale(1.08); }
      100%{ transform:scale(1);   opacity:1; }
    }
    /* Jackpot number roll */
    @keyframes numRoll {
      from{ transform:translateY(-100%); }
      to  { transform:translateY(0); }
    }
    /* Reel spin */
    @keyframes reelSpin {
      0%  { transform:translateY(0); filter:blur(0); }
      50% { transform:translateY(-8px); filter:blur(3px); }
      100%{ transform:translateY(0); filter:blur(0); }
    }
    /* Notification slide */
    @keyframes notifIn  { from{transform:translateX(110%)} to{transform:translateX(0)} }
    @keyframes notifOut { from{transform:translateX(0)} to{transform:translateX(110%)} }
    /* Gold spark */
    @keyframes spark {
      0%,100%{ transform:scale(1); }
      50%    { transform:scale(1.5) rotate(180deg); }
    }
    /* Floating */
    @keyframes float {
      0%,100%{ transform:translateY(0); }
      50%    { transform:translateY(-8px); }
    }
    /* Heartbeat */
    @keyframes heartbeat {
      0%,100%{ transform:scale(1); }
      30%    { transform:scale(1.12); }
      50%    { transform:scale(0.97); }
      70%    { transform:scale(1.08); }
    }

    /* Winning jackpot banner */
    .jackpot-win-banner {
      position:fixed; top:0; left:0; right:0;
      background:linear-gradient(135deg,#1a1000,var(--accent),#1a1000);
      background-size:200% 200%;
      animation:winShimmer 1.5s ease infinite;
      padding:14px; text-align:center;
      z-index:9999; font-family:'Orbitron',monospace;
      font-size:18px; font-weight:900; color:#000;
      box-shadow:0 4px 30px rgba(212,175,55,.7);
    }

    /* Premium slot machine */
    .slot-machine-premium {
      background:linear-gradient(135deg,#0a0500,#1a0d00,#0a0500);
      border:2px solid rgba(212,175,55,.5);
      border-radius:24px;
      padding:20px;
      box-shadow:0 0 40px rgba(212,175,55,.15), inset 0 1px 0 rgba(255,255,255,.05);
      animation:pulseGlow 3s ease-in-out infinite;
    }
    .slot-reel-premium {
      background:linear-gradient(180deg,#000,#111,#000);
      border:2px solid rgba(212,175,55,.3);
      border-radius:16px;
      min-width:68px; height:90px;
      display:flex; align-items:center; justify-content:center;
      font-size:44px;
      box-shadow:inset 0 4px 12px rgba(0,0,0,.8), 0 0 12px rgba(212,175,55,.1);
      transition:.15s;
      position:relative; overflow:hidden;
    }
    .slot-reel-premium::before {
      content:'';
      position:absolute; top:0; left:0; right:0; height:30%;
      background:linear-gradient(180deg,rgba(0,0,0,.7),transparent);
      z-index:1; pointer-events:none;
    }
    .slot-reel-premium::after {
      content:'';
      position:absolute; bottom:0; left:0; right:0; height:30%;
      background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);
      z-index:1; pointer-events:none;
    }
    .slot-reel-premium-row { perspective:400px; }
    .slot-reel-premium.spinning { animation:reelSpin .1s linear infinite; }
    .slot-reel-premium.flip-tick { animation:reelFlip .18s cubic-bezier(.4,0,.2,1); }
    .slot-reel-premium.landed { animation:reelLand .4s cubic-bezier(.34,1.56,.64,1); }
    .slot-reel-premium.winner {
      border-color:var(--accent);
      box-shadow:0 0 24px rgba(212,175,55,.6), inset 0 0 16px rgba(212,175,55,.1);
      animation:heartbeat .5s ease 3;
    }
    @keyframes reelFlip {
      0%   { transform:rotateX(0deg); }
      45%  { transform:rotateX(92deg); filter:brightness(.5); }
      55%  { transform:rotateX(-92deg); filter:brightness(.5); }
      100% { transform:rotateX(0deg); }
    }
    @keyframes reelLand {
      0%   { transform:translateY(-6px) scale(1.04); }
      55%  { transform:translateY(3px) scale(.98); }
      100% { transform:translateY(0) scale(1); }
    }
    .jackpot-flash {
      position:fixed; inset:0; z-index:9990; pointer-events:none;
      background:radial-gradient(ellipse 60% 40% at 50% 40%, rgba(212,175,55,.35), transparent 70%);
      animation:jackpotFlash .9s ease-out forwards;
    }
    @keyframes jackpotFlash {
      0%   { opacity:0; }
      15%  { opacity:1; }
      100% { opacity:0; }
    }
    .btn-spin-premium {
      width:100%; padding:18px;
      background:linear-gradient(135deg,var(--accent),#f0c040,#b8961e);
      background-size:200% 200%;
      border:none; border-radius:16px;
      color:#000; font-size:18px; font-weight:900;
      font-family:'Orbitron',monospace; letter-spacing:2px;
      cursor:pointer;
      box-shadow:0 6px 24px rgba(212,175,55,.5), inset 0 1px 0 rgba(255,255,255,.3);
      transition:.15s;
      animation:winShimmer 3s ease infinite;
    }
    .btn-spin-premium:active { transform:scale(.96); }
    .btn-spin-premium:disabled {
      opacity:.5; animation:none;
      background:linear-gradient(135deg,#555,#333);
    }

    /* Chat image preview */
    .chat-img-msg {
      max-width:220px; max-height:200px;
      border-radius:12px; cursor:pointer;
      border:1px solid rgba(255,255,255,.1);
      transition:.15s;
    }
    .chat-img-msg:hover { transform:scale(1.03); }
    .chat-msg-avatar-img {
      width:32px; height:32px; border-radius:50%;
      object-fit:cover; flex-shrink:0;
      border:1.5px solid rgba(212,175,55,.3);
    }
    .chat-msg-avatar-emoji {
      width:32px; height:32px; border-radius:50%;
      background:rgba(255,255,255,.07);
      display:flex; align-items:center; justify-content:center;
      font-size:17px; flex-shrink:0;
    }
    .chat-upload-btn {
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      border-radius:10px;
      padding:8px 12px; cursor:pointer;
      font-size:18px; line-height:1;
      transition:.15s;
      width:auto; flex-shrink:0;
    }
    .chat-upload-btn:active { transform:scale(.92); }

    /* Profile stats — прибрано разом із редизайном профілю в мову «Ledger».
       Сітка статистики тепер збирається з .ks-stat (див. .ks-statgrid нижче). */

    /* Auth screen redesign */
    .auth-floating-coin {
      position:absolute;
      font-size:20px;
      animation:coinRain linear infinite;
      pointer-events:none; z-index:0;
      opacity:.6;
    }
    .auth-logo-icon {
      animation:authSpin 6s ease-in-out infinite, authPulse 2s ease-in-out infinite alternate;
    }
    .auth-card {
      animation:slideUp .6s ease !important;
    }
    .auth-btn-main {
      position:relative; overflow:hidden;
    }
    .auth-btn-main::after {
      content:'';
      position:absolute; top:0; left:-100%;
      width:60%; height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
      animation:btnShine 2.5s ease infinite;
    }
    @keyframes btnShine {
      0%  { left:-100%; }
      50%,100%{ left:150%; }
    }

    /* Win fly-out coins */
    .win-coin {
      position:fixed;
      font-size:24px;
      pointer-events:none;
      z-index:9998;
      animation:coinFly 1.2s ease forwards;
    }
    @keyframes coinFly {
      0%  { transform:translate(0,0) scale(1) rotate(0deg); opacity:1; }
      100%{ transform:translate(var(--tx),var(--ty)) scale(.2) rotate(var(--tr)); opacity:0; }
    }

    /* Notification improved */
    .notif-toast {
      animation:notifIn .3s cubic-bezier(.34,1.56,.64,1) both;
    }
    .notif-toast.out {
      animation:notifOut .3s ease forwards;
    }

    /* Tab icons animate on select */
    .nav-btn.active .nav-icon {
      animation:heartbeat .5s ease;
    }

    /* Lobby hero jackpot counter */
    .hero-jackpot-counter {
      font-family:'Orbitron',monospace;
      font-size:28px; font-weight:900;
      background:linear-gradient(90deg,var(--accent),#ffdb6a,var(--accent));
      background-size:200% 100%;
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text;
      animation:winShimmer 2s ease infinite;
    }

    /* Amount buttons premium */
    .amount-btn {
      transition:all .15s cubic-bezier(.34,1.56,.64,1) !important;
    }
    .amount-btn:active { transform:scale(.88) !important; }
    .amount-btn.selected {
      animation:popIn .25s ease !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.2), 0 8px 24px -8px rgba(212,175,55,.5) !important;
    }

    /* Method buttons */
    .wm-btn {
      transition:all .15s cubic-bezier(.34,1.56,.64,1) !important;
    }
    .wm-btn:active { transform:scale(.92) !important; }

    /* Каса має власну мову чипів (див. блок «КАСА v80») — золоті/зелені
       градієнтні перебивки тут прибрані, щоб не протікали в новий дизайн. */

    /* Game tab back button */
    .game-back-btn {
      display:inline-flex; align-items:center; gap:6px;
      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
      border-radius:12px; padding:8px 14px;
      color:#888; font-size:13px; cursor:pointer;
      transition:.15s;
    }
    .game-back-btn:active { transform:scale(.94); }

    /* Slotiky premium */
    .slotiky-pkg {
      background:linear-gradient(135deg,#1a0a2e,#2d1060);
      border:2px solid #5a20c0; border-radius:16px;
      padding:16px; text-align:center; cursor:pointer;
      position:relative; overflow:hidden;
      transition:.2s; animation:slideUp .4s ease both;
    }

    /* Screen entry animation - only for non-auth screens */
    .screen:not(.hidden):not(#auth-screen) {
      animation:slideUp .25s ease;
    }

    /* Req card animation */
    .req-card { animation:slideUp .3s ease both; }
  

    /* ══ UNIVERSAL MODAL SYSTEM ══ */
    .slotok-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9500;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;animation:fadeInOverlay .2s ease;overflow-y:auto;}
    .slotok-fullscreen-modal{position:fixed;inset:0;background:#050505;z-index:9490;overflow-y:auto;padding:16px;padding-bottom:80px;animation:slideUp .25s ease;}
    @keyframes fadeInOverlay{from{opacity:0}to{opacity:1}}
    .slotok-modal-box{background:#111;border-radius:20px;padding:22px;max-width:380px;width:100%;max-height:90vh;overflow-y:auto;animation:slideUp .25s ease;position:relative;}
    .slotok-modal-close{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.06);border:1px solid #333;border-radius:8px;color:#777;cursor:pointer;width:30px;height:30px;font-size:14px;display:flex;align-items:center;justify-content:center;transition:.15s;}
    .slotok-modal-close:active{transform:scale(.9);}
  

    /* ═══ AUTH SCREEN ═══ */
    #auth-screen {
      background: #000 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      padding: 0 !important;
      /* showAuthScreen() перемикає це на display:flex через JS (лише display,
         без flex-direction) — без цього правила воно за замовчуванням стає
         РЯДКОВИМ флексом, і єдина дитина (.auth-wrapper) розтягується/стискається
         по висоті замість природного росту з вмістом. Це раніше стискало
         майже все на екрані (плашки, бейдж бонусу і т.д.) непомітно, тому й
         виглядало "тісно". flex-direction:column тут узгоджує розтягування
         по ширині (як і треба для одного повноширинного блоку), а не по висоті. */
      display: flex;
      flex-direction: column;
    }
    .auth-canvas { position:fixed;inset:0;z-index:0;pointer-events:none; }
    .auth-wrapper {
      position: relative; z-index:1;
      min-height: 100vh;
      display: flex; flex-direction:column; align-items:center;
      justify-content:flex-start;
      padding: 24px 20px 50px;
      box-sizing: border-box;
    }
    .auth-logo-block { text-align:center; margin-bottom:28px; }
    .auth-logo-icon {
      font-size: 64px;
      display: block;
      animation: authSpin 6s linear infinite, authPulse 2s ease-in-out infinite alternate;
      filter: drop-shadow(0 0 20px rgba(212,175,55,.6));
      margin-bottom: 8px;
    }
    @keyframes authSpin { 0%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} 100%{transform:rotate(-3deg)} }
    @keyframes authPulse { from{filter:drop-shadow(0 0 12px rgba(212,175,55,.4))} to{filter:drop-shadow(0 0 28px rgba(212,175,55,.9))} }
    .auth-logo-name {
      font-family: 'Orbitron', monospace;
      font-size: 36px; font-weight: 900; letter-spacing: 6px;
      background: linear-gradient(135deg,var(--accent),#ffdb6a,var(--accent));
      background-size: 200% 100%;
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: winShimmer 3s ease infinite;
    }
    .auth-logo-sub { font-size:11px; color:#555; letter-spacing:2px; margin-top:4px; }

    /* Live win ticker — той самий принцип, що й #rateTicker (стрічка курсів на головній) */
    .auth-win-ticker {
      background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
      border-radius: 10px; overflow:hidden; height:26px; margin-bottom:16px;
      max-width: 380px; width:100%; position:relative;
      /* showAuthScreen() перемикає #auth-screen на display:flex через JS без
         flex-direction, тож воно за замовчуванням стає row-флексом і стискає
         .auth-wrapper по висоті — а той, своєю чергою, стискає власних дітей.
         Елементи з overflow:hidden і без "живого" вмісту (як ця стрічка) мають
         "автоматичний мінімальний розмір" 0 і стискаються першими. flex-shrink:0
         прибирає це для стрічки, не займаючи чужий (уже усталений) код. */
      flex-shrink: 0;
    }
    .auth-win-ticker-inner {
      display:flex; gap:0; position:absolute; white-space:nowrap;
      animation: tickerScroll 22s linear infinite;
      align-items:center; height:26px;
    }
    .auth-win-ticker-item {
      display:inline-flex; align-items:center; gap:6px;
      padding: 0 16px; font-size:11px; color:#888;
      border-right: 1px solid rgba(255,255,255,.06);
    }
    .auth-win-ticker-item b { color: var(--green); font-weight:800; }
    .auth-win-ticker-item .awt-user { color: var(--accent); font-weight:700; }

    /* Feature pills */
    .auth-features {
      display: flex; gap:6px; flex-wrap:wrap; justify-content:center;
      margin-bottom: 24px;
    }
    .auth-feature-pill {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 20px; padding: 5px 12px;
      font-size: 11px; color: #888;
      animation: authFadeIn .5s ease both;
    }
    .auth-feature-pill span { color:var(--accent); }
    @keyframes authFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

    /* Form card */
    .auth-card {
      position: relative;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(212,175,55,.2);
      border-radius: 20px;
      padding: 24px 20px;
      width: 100%; max-width: 380px;
      backdrop-filter: blur(12px);
      box-shadow: 0 20px 60px rgba(0,0,0,.8), 0 0 40px rgba(212,175,55,.05);
    }
    /* Повільна "жива" рамка, що обертається навколо картки — суто CSS,
       через conic-gradient обрізаний до тонкого кільця маскою */
    .auth-card::before {
      content:''; position:absolute; inset:-1.5px; border-radius:21px; padding:1.5px;
      background: conic-gradient(from 0deg, transparent 0%, rgba(212,175,55,.9) 12%, transparent 24%, transparent 76%, rgba(255,219,106,.7) 88%, transparent 100%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      animation: authBorderSpin 5s linear infinite;
      pointer-events: none;
    }
    @keyframes authBorderSpin { to { transform: rotate(360deg); } }
    .auth-tabs {
      position: relative;
      display: flex; background:#111; border-radius:12px; padding:3px; margin-bottom:20px; gap:3px;
    }
    /* Слайдер-індикатор під активною вкладкою — рухається transform'ом
       замість перемальовування фону кожної кнопки окремо */
    .auth-tabs::before {
      content:''; position:absolute; top:3px; left:3px; bottom:3px;
      width: calc(50% - 4.5px);
      background: linear-gradient(135deg,rgba(212,175,55,.22),rgba(212,175,55,.08));
      border: 1px solid rgba(212,175,55,.35); border-radius:9px;
      transition: transform .3s cubic-bezier(.34,1.56,.64,1);
      z-index: 0;
    }
    .auth-tabs.reg-active::before { transform: translateX(calc(100% + 3px)); }
    .auth-tab-btn {
      position: relative; z-index: 1;
      flex:1; padding:10px; border:none; border-radius:9px;
      font-size:13px; font-weight:700; cursor:pointer;
      transition: color .2s; color:#666; background:transparent;
    }
    .auth-tab-btn.active { color: var(--accent); }
    .auth-input-group { margin-bottom:12px; position:relative; }
    .auth-pass-toggle {
      position:absolute; right:14px; top:50%; transform:translateY(-50%);
      font-size:15px; cursor:pointer; opacity:.5; transition:opacity .15s; user-select:none;
    }
    .auth-pass-toggle:active { opacity:1; }
    .auth-input-icon {
      position:absolute; left:14px; top:50%; transform:translateY(-50%);
      font-size:16px; pointer-events:none;
    }
    .auth-input {
      width:100%; padding:15px 14px 15px 42px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 12px; color:#fff; font-size:16px;
      box-sizing:border-box;
      transition: border-color .2s, box-shadow .2s;
      outline:none;
    }
    .auth-input:focus {
      border-color: rgba(212,175,55,.5);
      box-shadow: 0 0 0 3px rgba(212,175,55,.08);
    }
    .auth-input::placeholder { color:#444; }
    .auth-btn-main {
      width:100%; padding:15px;
      background: linear-gradient(135deg,var(--accent),#b8961e);
      border:none; border-radius:12px;
      color:#000; font-size:15px; font-weight:900;
      letter-spacing:1px; cursor:pointer;
      font-family:'Orbitron',monospace;
      box-shadow: 0 4px 20px rgba(212,175,55,.35);
      transition: .2s; margin-top:4px;
    }
    .auth-btn-main:active { transform:scale(.97); }
    .auth-btn-secondary {
      width:100%; padding:13px;
      background: rgba(61,214,140,.1);
      border: 1px solid rgba(61,214,140,.3);
      border-radius:12px; color:#3dd68c;
      font-size:14px; font-weight:700; cursor:pointer;
      transition:.2s; margin-top:4px;
    }
    .auth-divider { display:flex;align-items:center;gap:10px;margin:14px 0;color:#333;font-size:11px; }
    .auth-divider::before,.auth-divider::after { content:'';flex:1;height:1px;background:#222; }
    .auth-error { background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3);border-radius:10px;padding:10px 14px;font-size:12px;color:#ff6b6b;margin-bottom:10px;display:none; }
    .auth-promo-row { margin-top:10px; }
    .auth-promo-input { padding-left:42px !important; border-style:dashed !important; }
    .auth-bonus-badge {
      background: linear-gradient(135deg,rgba(61,214,140,.15),rgba(61,214,140,.05));
      border:1px solid rgba(61,214,140,.3); border-radius:12px;
      padding:10px 14px; text-align:center; margin-bottom:14px;
      font-size:12px; color:#3dd68c;
    }
    /* Stats row at bottom of auth */
    .auth-stats-row {
      display:flex; gap:16px; justify-content:center;
      margin-top:20px;
    }
    .auth-stat { text-align:center; }
    .auth-stat-val { font-size:18px;font-weight:900;color:var(--accent);font-family:'Orbitron',monospace; }
    .auth-stat-lbl { font-size:9px;color:#444;letter-spacing:1px; }
  

@keyframes blink{0%,100%{opacity:0.2}50%{opacity:1}}

/* ═══════════════════════════════════════════════════════
   КАСА — 3D КАРТКА
═══════════════════════════════════════════════════════ */

/* 3D Card Container */
.vcard-scene {
  width: 100%;
  perspective: 1400px;
  margin-bottom: 16px;
  position: relative;
}
/* Під карткою — нейтральна тінь-подушка, а не золотий казиновий ореол:
   картка має читатись як предмет, що лежить на площині */
.vcard-scene::before {
  content: '';
  position: absolute; left: 50%; bottom: 4px;
  width: 76%; max-width: 300px; height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,0,0,.75), transparent 72%);
  filter: blur(14px);
  z-index: -1;
  pointer-events: none;
}
/* Ледь помітна амбієнтна смуга блиску — основний реалізм несе
   інтерактивне світло нижче, це лише фоновий "живий" штрих */
.vcard-front::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(112deg, transparent 34%, rgba(255,255,255,.03) 46%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.03) 54%, transparent 66%);
  background-size: 280% 280%;
  animation: shimmerSweep 14s ease-in-out infinite;
  mix-blend-mode: overlay;
}
/* Інтерактивне "дзеркальне" світло — позиція задається JS через --lx/--ly
   залежно від нахилу картки (тач-драг або рух миші), як справжній відблиск
   на пластику/металі, а не по колу заскриптована анімація */
.vcard-front::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(circle 160px at var(--lx, 28%) var(--ly, 18%), rgba(255,255,255,.5), rgba(255,255,255,.08) 45%, transparent 70%);
  opacity: var(--light-op, .55);
  mix-blend-mode: overlay;
}
/* Дрібне зерно поверх картки — прибирає "векторний" вигляд, додає
   відчуття реального матеріалу (ледь помітне, не заважає читанню) */
.vcard-front, .vcard-back {
  position: relative;
}
.vcard-front::-webkit-scrollbar { display: none; }
.vcard-grain { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; opacity: .05; mix-blend-mode: overlay;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size: 3px 3px;
}
.vcard-wrap {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  height: 210px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22,1,.36,1);
  cursor: pointer;
  border-radius: 16px;
  touch-action: pan-y;
}
.vcard-wrap.flipped { transform: rotateY(180deg); }
/* Ребро картки — тонкий темний "зріз" збоку, щоб картка читалась як
   товстий фізичний об'єкт, а не пласка наклейка */
.vcard-wrap::before {
  content: '';
  position: absolute; inset: 0; border-radius: 16px;
  transform: translateZ(-3px) translate(3px, 4px);
  background: rgba(0,0,0,.55);
  filter: blur(1px);
  z-index: -1;
}
.vcard-front, .vcard-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  padding: 22px 24px;
  box-sizing: border-box;
}
.vcard-back { transform: rotateY(180deg); }

/* Holographic shimmer */
@keyframes hologram {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.vcard.vcard-skin-gold .vcard-front {
  background: linear-gradient(135deg, #1a0d00, #2a1800, #3a2200, #1a0d00);
  background-size: 300% 300%;
  animation: hologram 6s ease infinite;
  border: 1px solid rgba(212,175,55,.4);
  box-shadow: 0 0 30px rgba(212,175,55,.15), inset 0 1px 0 rgba(212,175,55,.2);
}

/* ═══════════════════════════════════════════════════════════════════
   КАСА v80 — «Ledger»
   Свідомо НЕ казинова мова: без золота, без глоу, без Orbitron.
   Графітові площини, волоскові межі, один індиговий акцент,
   табличні цифри, штрихові SVG-іконки замість емодзі.
   Усе заскоуплено в #tab-cashier — решта застосунку лишається
   у своїй золотій мові й нічого не ламається.
═══════════════════════════════════════════════════════════════════ */
/* Токени живуть на :root, а не на #tab-cashier: модалки Каси портуються
   в <body>, тож у вкладці вони б їх не бачили й лишались безбарвними. */
:root {
  --ks-surface:   #12141a;
  --ks-surface-2: #191c24;
  --ks-surface-3: #222630;
  --ks-line:      rgba(255,255,255,.07);
  --ks-line-2:    rgba(255,255,255,.14);
  --ks-fg:        #eceff5;
  --ks-fg-2:      #98a0af;
  --ks-fg-3:      #5e6675;
  --ks-acc:       #7c8cff;
  --ks-acc-dim:   rgba(124,140,255,.12);
  --ks-pos:       #31c48d;
  --ks-neg:       #f0556b;
  --ks-warn:      #e8b339;
  --ks-r:         12px;
  --ks-r-lg:      18px;
  --ks-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ks-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}
#tab-cashier, .ledger {
  font-family: var(--ks-sans);
  color: var(--ks-fg);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.45;
}
/* Скидаємо глобальні казинові дефолти (width:100%, bevel, центрований input).
   Обгортка :where() навколо #tab-cashier обнуляє вагу ідентифікатора — інакше
   цей скид перебивав би власні класи Каси (.ks-btn.is-block тощо) і кнопки
   лишались би вузькими. */
:where(#tab-cashier, .ledger) button,
:where(#tab-cashier, .ledger) input,
:where(#tab-cashier, .ledger) textarea,
:where(#tab-cashier, .ledger) select {
  font-family: var(--ks-sans);
}
:where(#tab-cashier, .ledger) button {
  width: auto; margin: 0; padding: 0; border-radius: var(--ks-r);
  background: none; box-shadow: none; color: inherit;
  font-weight: 600; letter-spacing: 0;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
:where(#tab-cashier, .ledger) button:active { transform: none; filter: none; box-shadow: none; }
:where(#tab-cashier, .ledger) input,
:where(#tab-cashier, .ledger) textarea {
  text-align: left; font-weight: 500; font-size: 15px;
  background: var(--ks-surface-2); border: 1px solid var(--ks-line);
  border-radius: var(--ks-r); box-shadow: none; color: var(--ks-fg);
  padding: 13px 14px; margin: 0; min-height: 0;
  transition: border-color .15s, background .15s;
}
:where(#tab-cashier, .ledger) input::placeholder { color: var(--ks-fg-3); }
:where(#tab-cashier, .ledger) input:focus,
:where(#tab-cashier, .ledger) textarea:focus {
  border-color: var(--ks-acc); background: var(--ks-surface-3); box-shadow: none;
}
:where(#tab-cashier, .ledger) .ks-num { font-variant-numeric: tabular-nums; }
:where(#tab-cashier, .ledger) .ks-mono { font-family: var(--ks-mono); font-variant-numeric: tabular-nums; }
:where(#tab-cashier, .ledger) svg { display: block; flex-shrink: 0; }

/* ── Сегментований перемикач розділів ───────────────────────────── */
.ks-seg {
  display: flex; gap: 2px;
  background: var(--ks-surface); border: 1px solid var(--ks-line);
  border-radius: 14px; padding: 3px; margin-bottom: 18px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ks-seg::-webkit-scrollbar { display: none; }
.ks-seg-btn {
  flex: 1 0 auto; min-width: 62px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 10px 8px; border-radius: 11px;
  color: var(--ks-fg-3); font-size: 11px; font-weight: 600;
  cursor: pointer; white-space: nowrap; border: 1px solid transparent;
}
.ks-seg-btn svg { width: 17px; height: 17px; opacity: .85; }
.ks-seg-btn:hover { color: var(--ks-fg-2); }
.ks-seg-btn.is-active {
  background: var(--ks-surface-3); border-color: var(--ks-line-2); color: var(--ks-fg);
}
.ks-seg-btn.is-active svg { opacity: 1; color: var(--ks-acc); }

/* ── Площина / секція ───────────────────────────────────────────── */
.ks-panel {
  background: var(--ks-surface); border: 1px solid var(--ks-line);
  border-radius: var(--ks-r-lg); margin-bottom: 14px; overflow: hidden;
}
.ks-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--ks-line);
}
.ks-panel-title {
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ks-fg-2);
}
.ks-panel-body { padding: 16px; }
.ks-panel-body.is-flush { padding: 0; }
.ks-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--ks-acc); cursor: pointer;
  background: none; border: none;
}
.ks-link:hover { color: #9aa6ff; }
.ks-hint { font-size: 12px; color: var(--ks-fg-3); line-height: 1.55; }
.ks-hint b { color: var(--ks-fg-2); font-weight: 600; }
.ks-label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ks-fg-3); margin-bottom: 7px;
}
.ks-field { margin-bottom: 14px; }
.ks-field input { width: 100%; box-sizing: border-box; }

/* ── Кнопки ─────────────────────────────────────────────────────── */
.ks-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border-radius: var(--ks-r);
  border: 1px solid var(--ks-line-2); background: var(--ks-surface-2);
  color: var(--ks-fg); font-size: 14px; font-weight: 600; cursor: pointer;
}
.ks-btn svg { width: 17px; height: 17px; }
.ks-btn:hover { background: var(--ks-surface-3); }
.ks-btn:active { opacity: .82; }
.ks-btn.is-block { width: 100%; }
.ks-btn.is-primary { background: var(--ks-acc); border-color: var(--ks-acc); color: #0b0d18; font-weight: 700; }
.ks-btn.is-primary:hover { background: #8c9bff; }
.ks-btn.is-pos { background: var(--ks-pos); border-color: var(--ks-pos); color: #04160e; font-weight: 700; }
.ks-btn.is-pos:hover { background: #3ed69b; }
.ks-btn.is-quiet { background: transparent; border-color: var(--ks-line); color: var(--ks-fg-2); }
.ks-btn.is-quiet:hover { background: var(--ks-surface-2); color: var(--ks-fg); }
.ks-btn.is-sm { padding: 9px 13px; font-size: 13px; }
.ks-btn:disabled, .ks-btn[disabled] { opacity: .38; cursor: not-allowed; }
.ks-btn-row { display: flex; gap: 8px; }
.ks-btn-row > .ks-btn { flex: 1; }

/* ── Швидкі дії під карткою ─────────────────────────────────────── */
.ks-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.ks-quick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 4px 11px; border-radius: var(--ks-r);
  background: var(--ks-surface); border: 1px solid var(--ks-line);
  color: var(--ks-fg-2); cursor: pointer;
}
.ks-quick-btn svg { width: 19px; height: 19px; color: var(--ks-fg); }
.ks-quick-btn span { font-size: 11px; font-weight: 600; }
.ks-quick-btn:hover { background: var(--ks-surface-2); border-color: var(--ks-line-2); }
.ks-quick-btn:active { opacity: .8; }
.ks-quick-btn:disabled { opacity: .3; cursor: not-allowed; }
.ks-quick-btn:disabled:hover { background: var(--ks-surface); border-color: var(--ks-line); }

/* ── Баланс ─────────────────────────────────────────────────────── */
.ks-balance {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: 18px 16px; margin-bottom: 14px;
  background: var(--ks-surface); border: 1px solid var(--ks-line);
  border-radius: var(--ks-r-lg);
}
.ks-balance-amount {
  font-size: 34px; font-weight: 650; line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ks-fg);
}
.ks-balance-amount .ks-cur { font-size: 20px; font-weight: 500; color: var(--ks-fg-3); margin-right: 4px; }
.ks-delta {
  display: inline-block; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 7px; margin-left: 8px; vertical-align: 6px;
}
.ks-delta.up   { background: rgba(49,196,141,.14); color: var(--ks-pos); }
.ks-delta.down { background: rgba(240,85,107,.14); color: var(--ks-neg); }
.ks-flow { display: flex; flex-direction: column; gap: 6px; text-align: right; }
.ks-flow-item {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ks-fg-2);
}
.ks-flow-item svg { width: 13px; height: 13px; }
.ks-flow-item.in  svg { color: var(--ks-pos); }
.ks-flow-item.out svg { color: var(--ks-neg); }

/* ── Рядок списку (операції, картки, курси, заявки) ─────────────── */
.ks-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--ks-line);
}
.ks-row:last-child { border-bottom: none; }
.ks-row.is-tappable { cursor: pointer; }
.ks-row.is-tappable:hover { background: var(--ks-surface-2); }
.ks-icn {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ks-surface-3); color: var(--ks-fg-2);
}
.ks-icn svg { width: 17px; height: 17px; }
.ks-icn.is-pos { background: rgba(49,196,141,.11); color: var(--ks-pos); }
.ks-icn.is-neg { background: rgba(240,85,107,.11); color: var(--ks-neg); }
.ks-icn.is-acc { background: var(--ks-acc-dim);    color: var(--ks-acc); }
.ks-row-main { flex: 1; min-width: 0; }
.ks-row-title {
  font-size: 14px; font-weight: 600; color: var(--ks-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ks-row-sub { font-size: 12px; color: var(--ks-fg-3); margin-top: 1px; }
.ks-row-value {
  font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums;
  flex-shrink: 0; text-align: right;
}
.ks-row-value.is-pos { color: var(--ks-pos); }
.ks-row-value.is-neg { color: var(--ks-neg); }
.ks-row-value small { display: block; font-size: 11px; font-weight: 500; color: var(--ks-fg-3); }

/* ── Порожній / заблокований стан ───────────────────────────────── */
.ks-empty { padding: 26px 20px; text-align: center; }
.ks-empty-icn {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ks-surface-3); color: var(--ks-fg-2);
}
.ks-empty-icn svg { width: 22px; height: 22px; }
.ks-empty-title { font-size: 15px; font-weight: 650; color: var(--ks-fg); margin-bottom: 6px; }
.ks-empty-text { font-size: 13px; color: var(--ks-fg-3); line-height: 1.6; margin-bottom: 18px; }
.ks-empty-text b { color: var(--ks-fg-2); font-weight: 600; }
.ks-muted { padding: 22px 16px; text-align: center; font-size: 13px; color: var(--ks-fg-3); }

/* ── Бейджі / статуси ───────────────────────────────────────────── */
.ks-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 650;
  padding: 3px 9px; border-radius: 7px; white-space: nowrap;
  background: var(--ks-surface-3); color: var(--ks-fg-2);
}
.ks-badge.is-pos  { background: rgba(49,196,141,.13); color: var(--ks-pos); }
.ks-badge.is-neg  { background: rgba(240,85,107,.13); color: var(--ks-neg); }
.ks-badge.is-warn { background: rgba(232,179,57,.13); color: var(--ks-warn); }
.ks-badge.is-acc  { background: var(--ks-acc-dim);    color: var(--ks-acc); }

/* ── Сума: чипи ─────────────────────────────────────────────────── */
#tab-cashier .amount-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 12px; }
#tab-cashier .amount-btn {
  padding: 11px 4px; border-radius: 10px; text-align: center;
  background: var(--ks-surface-2); border: 1px solid var(--ks-line);
  color: var(--ks-fg-2); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: none;
  transition: background .15s, border-color .15s, color .15s;
}
#tab-cashier .amount-btn:hover { background: var(--ks-surface-3); color: var(--ks-fg); }
#tab-cashier .amount-btn:active { transform: none; }
#tab-cashier .amount-btn.selected {
  background: var(--ks-acc-dim); border-color: var(--ks-acc); color: #b3bcff;
  transform: none; filter: none;
  /* !important гасить глобальне золоте glow/popIn з мобільного медіа-блоку */
  box-shadow: none !important; animation: none !important;
}

/* ── Спосіб оплати: рядки з радіо ───────────────────────────────── */
.ks-methods { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
#tab-cashier .wm-btn {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-radius: var(--ks-r);
  background: var(--ks-surface-2); border: 1px solid var(--ks-line);
  color: var(--ks-fg-2); font-size: 14px; font-weight: 600;
  cursor: pointer; box-shadow: none; text-align: left;
  transition: background .15s, border-color .15s, color .15s;
}
#tab-cashier .wm-btn::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--ks-line-2); transition: border-color .15s, box-shadow .15s;
}
#tab-cashier .wm-btn:hover { background: var(--ks-surface-3); color: var(--ks-fg); }
#tab-cashier .wm-btn:active { transform: none; }
#tab-cashier .wm-btn.selected {
  background: var(--ks-acc-dim); border-color: var(--ks-acc); color: var(--ks-fg);
  transform: none; filter: none; font-weight: 650; box-shadow: none;
}
#tab-cashier .wm-btn.selected::before {
  border-color: var(--ks-acc); box-shadow: inset 0 0 0 4px var(--ks-acc);
}
#tab-cashier .wm-btn .ks-bank {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; letter-spacing: -.02em;
}
#tab-cashier .wm-btn .ks-m-name { flex: 1; min-width: 0; }
#tab-cashier .wm-btn .ks-m-note { font-size: 11px; font-weight: 500; color: var(--ks-fg-3); }

/* ── Реквізити для копіювання ───────────────────────────────────── */
.ks-copy {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--ks-r);
  background: var(--ks-surface-2); border: 1px solid var(--ks-line);
  margin-bottom: 14px;
}
.ks-copy-main { flex: 1; min-width: 0; }
.ks-copy-val {
  font-family: var(--ks-mono); font-size: 14px; font-weight: 600; color: var(--ks-fg);
  word-break: break-all;
}
.ks-copy-btn {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ks-surface-3); border: 1px solid var(--ks-line);
  color: var(--ks-fg-2); cursor: pointer;
}
.ks-copy-btn svg { width: 15px; height: 15px; }
.ks-copy-btn:hover { color: var(--ks-fg); border-color: var(--ks-line-2); }

/* ── Статистика 3-в-ряд ─────────────────────────────────────────── */
.ks-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ks-line); }
.ks-stat { background: var(--ks-surface); padding: 14px 12px; text-align: center; }
.ks-stat-lbl { font-size: 11px; color: var(--ks-fg-3); margin-bottom: 4px; }
.ks-stat-val { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ks-fg); }
.ks-stat-val.is-pos { color: var(--ks-pos); }
.ks-stat-val.is-acc { color: var(--ks-acc); }
/* Сітка статистики профілю: 2 колонки, волоскові роздільники між плитками */
.ks-statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ks-line); }
.ks-statgrid .ks-stat { text-align: left; }
.ks-statgrid .ks-stat-val { font-size: 19px; margin-top: 2px; }

/* ── Прогрес ────────────────────────────────────────────────────── */
.ks-meter { height: 6px; border-radius: 3px; background: var(--ks-surface-3); overflow: hidden; }
.ks-meter-fill { height: 100%; border-radius: 3px; background: var(--ks-acc); transition: width .6s cubic-bezier(.16,1,.3,1); }
.ks-meter-fill.is-pos { background: var(--ks-pos); }

/* ── Тариф / VIP-шапка кешбеку ──────────────────────────────────── */
.ks-tier {
  display: flex; align-items: center; gap: 13px;
  padding: 16px; border-radius: var(--ks-r-lg); margin-bottom: 14px;
  background: linear-gradient(120deg, #1b1f2b, #14171f);
  border: 1px solid var(--ks-line-2);
}
.ks-tier-mark {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1;
  background: var(--ks-surface-3); border: 1px solid var(--ks-line);
}
.ks-tier-name { font-size: 16px; font-weight: 650; color: var(--ks-fg); }
.ks-tier-note { font-size: 12px; color: var(--ks-fg-2); margin-top: 1px; }

/* ── Графік та курси ────────────────────────────────────────────── */
#tab-cashier .chart-period-btn {
  padding: 5px 11px; border-radius: 8px; font-size: 12px; font-weight: 600;
  background: var(--ks-surface-2); border: 1px solid var(--ks-line);
  color: var(--ks-fg-3); cursor: pointer; box-shadow: none;
}
#tab-cashier .chart-period-btn.active {
  background: var(--ks-acc-dim); border-color: var(--ks-acc); color: #b3bcff; box-shadow: none;
}
#tab-cashier .currency-btn {
  padding: 10px 6px; border-radius: 10px; text-align: center; cursor: pointer;
  background: var(--ks-surface-2); border: 1px solid var(--ks-line); box-shadow: none;
  transition: background .15s, border-color .15s;
}
#tab-cashier .currency-btn:hover { background: var(--ks-surface-3); border-color: var(--ks-line-2); }
#tab-cashier .currency-btn:active { transform: none; }
#tab-cashier .currency-btn.active { background: var(--ks-acc-dim); border-color: var(--ks-acc); box-shadow: none; }
.ks-chart-canvas {
  width: 100%; height: 200px; border-radius: var(--ks-r);
  background: var(--ks-surface-2); border: 1px solid var(--ks-line); box-shadow: none;
}

/* ── Заявки (депозит / вивід) ───────────────────────────────────── */
#tab-cashier .pending-withdraw {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin: 0; border: none; border-radius: 0;
  border-bottom: 1px solid var(--ks-line);
  background: transparent; box-shadow: none;
}
#tab-cashier .pending-withdraw:last-child { border-bottom: none; }
#tab-cashier .pw-status {
  font-size: 11px; font-weight: 650; padding: 3px 9px; border-radius: 7px;
  border: none; box-shadow: none; white-space: nowrap;
}
#tab-cashier .pw-pending  { background: rgba(232,179,57,.13); color: var(--ks-warn); }
#tab-cashier .pw-done     { background: rgba(49,196,141,.13); color: var(--ks-pos); }
#tab-cashier .pw-rejected { background: rgba(240,85,107,.13); color: var(--ks-neg); }

/* ── Пакети поповнення ──────────────────────────────────────────── */
#tab-cashier .dep-package {
  padding: 14px 12px; border-radius: var(--ks-r); text-align: center; cursor: pointer;
  background: var(--ks-surface); border: 1px solid var(--ks-line); box-shadow: none;
  transition: background .15s, border-color .15s;
}
#tab-cashier .dep-package::before { content: none; }
#tab-cashier .dep-package:hover { background: var(--ks-surface-2); border-color: var(--ks-line-2); }
#tab-cashier .dep-package:active { transform: none; filter: none; }
#tab-cashier .dep-package.popular,
#tab-cashier .dep-package.is-selected { border-color: var(--ks-acc); background: var(--ks-acc-dim); }
#tab-cashier .dep-package-icon { display: none; }
#tab-cashier .dep-package-amount {
  font-family: var(--ks-sans); font-size: 21px; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ks-fg);
}
#tab-cashier .dep-package-bonus {
  display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 7px;
  font-size: 11px; font-weight: 650; color: var(--ks-pos); background: rgba(49,196,141,.12);
}
#tab-cashier .dep-package-bonus.none { background: none; padding: 0; color: var(--ks-fg-3); font-weight: 500; }
#tab-cashier .dep-package-total { font-size: 11px; color: var(--ks-fg-3); margin-top: 6px; }
#tab-cashier .dep-package-label {
  font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ks-fg-3); margin-top: 4px;
}

/* ── Telegram-блок ──────────────────────────────────────────────── */
.ks-tg {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--ks-r-lg); margin-bottom: 14px;
  background: var(--ks-surface); border: 1px solid var(--ks-line);
}
.ks-tg-mark {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34,158,217,.14); color: #4ab3e8;
}
.ks-tg-mark svg { width: 19px; height: 19px; }

/* ── Модалка каси (додати картку / всі операції) ────────────────── */
.ks-modal {
  position: fixed; inset: 0; z-index: 9950;
  background: rgba(4,5,8,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: fadeIn .18s ease;
}
.ks-modal-box {
  width: 100%; max-width: 400px; max-height: 86vh; overflow-y: auto;
  background: var(--ks-surface); border: 1px solid var(--ks-line-2);
  border-radius: 20px; padding: 22px;
  font-family: var(--ks-sans); color: var(--ks-fg);
  animation: slideUp .22s cubic-bezier(.16,1,.3,1);
}
.ks-modal-box::-webkit-scrollbar { width: 0; }
:where(.ks-modal-box) button { width: auto; margin: 0; padding: 0; background: none; box-shadow: none; color: inherit; font-weight: 600; letter-spacing: 0; }
:where(.ks-modal-box) button:active { transform: none; filter: none; box-shadow: none; }
:where(.ks-modal-box) input {
  width: 100%; box-sizing: border-box; text-align: left; font-weight: 500; font-size: 15px;
  padding: 13px 14px; margin: 0; min-height: 0; border-radius: 12px; box-shadow: none;
  background: var(--ks-surface-2); border: 1px solid var(--ks-line); color: var(--ks-fg);
  font-family: var(--ks-sans);
}
:where(.ks-modal-box) input::placeholder { color: var(--ks-fg-3); }
:where(.ks-modal-box) input:focus { border-color: var(--ks-acc); background: var(--ks-surface-3); box-shadow: none; }
.ks-modal-box .ks-label { text-align: left; }
.ks-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 18px;
}
.ks-modal-title { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.ks-modal-x {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ks-surface-3); border: none; color: var(--ks-fg-2); cursor: pointer; box-shadow: none;
}
.ks-modal-x svg { width: 15px; height: 15px; }
.ks-modal-x:hover { color: var(--ks-fg); }

/* Порожній пластик не має вдавати справжню картку */
.vcard-unlinked .vcard-logo,
.vcard-unlinked .vcard-contactless { visibility: hidden; }

/* ── Накладка "картку не підключено" поверх візуалу картки ──────── */
.ks-card-locked {
  position: absolute; inset: 0; border-radius: 16px; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  background: rgba(8,9,13,.74); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  color: rgba(255,255,255,.6);
}
.ks-card-locked svg { width: 22px; height: 22px; }
.ks-card-locked span {
  font-family: var(--ks-sans);
  font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════
   КАРТКА — 14 РІЗНОМАНІТНИХ СКІНІВ З ТЕКСТУРАМИ
═══════════════════════════════════════════════════════ */

/* 1. Gold — класика (default) */
.vcard-skin-gold .vcard-front {
  background: linear-gradient(135deg, #1a0d00, #2a1800, #3a2200, #1a0d00);
  background-size: 300% 300%;
  animation: hologram 6s ease infinite;
  border: 1px solid rgba(212,175,55,.4);
  box-shadow: 0 0 30px rgba(212,175,55,.15), inset 0 1px 0 rgba(212,175,55,.2);
}

/* 2. Onyx — глибокий чорний з блиском */
.vcard-skin-onyx .vcard-front {
  background: linear-gradient(135deg, #000, #0d0d0d, #000);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 0 30px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.1);
}

/* 3. Sapphire — сапфірово-синій */
.vcard-skin-sapphire .vcard-front {
  background: linear-gradient(135deg, #000d1a, #002a55, #001a33, #000d1a);
  background-size: 300% 300%;
  animation: hologram 5s ease infinite;
  border: 1px solid rgba(74,158,255,.4);
  box-shadow: 0 0 30px rgba(74,158,255,.15);
}

/* 4. Emerald — смарагдовий */
.vcard-skin-emerald .vcard-front {
  background: linear-gradient(135deg, #001a0f, #003d24, #001a0f);
  background-size: 300% 300%;
  animation: hologram 5.5s ease infinite;
  border: 1px solid rgba(61,214,140,.4);
  box-shadow: 0 0 30px rgba(61,214,140,.15);
}

/* 5. Neon Cyber — кіберпанк сітка */
.vcard-skin-cyber .vcard-front {
  background:
    linear-gradient(90deg, rgba(0,255,220,.08) 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(0deg,  rgba(0,255,220,.08) 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(135deg, #000814, #001d3d, #000814);
  border: 1px solid rgba(0,255,220,.4);
  box-shadow: 0 0 30px rgba(0,255,220,.2), inset 0 0 20px rgba(0,255,220,.05);
}

/* 6. Carbon — карбонове волокно */
.vcard-skin-carbon .vcard-front {
  background:
    repeating-linear-gradient(45deg, #0a0a0a 0, #0a0a0a 4px, #151515 4px, #151515 8px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.4) 0, rgba(0,0,0,.4) 4px, transparent 4px, transparent 8px);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 0 24px rgba(0,0,0,.5);
}

/* 7. Marble — мармур */
.vcard-skin-marble .vcard-front {
  background:
    linear-gradient(35deg, transparent 46%, rgba(255,255,255,.18) 49%, rgba(255,255,255,.05) 51%, transparent 54%),
    linear-gradient(-20deg, transparent 62%, rgba(255,255,255,.12) 65%, transparent 68%),
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,.1) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(255,255,255,.07) 0%, transparent 45%),
    linear-gradient(160deg, #1a1a22, #26262e, #1a1a22);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 0 24px rgba(255,255,255,.05);
}

/* 8. Sunset — рожево-помаранчевий градієнт */
.vcard-skin-sunset .vcard-front {
  background: linear-gradient(135deg, #2a0a1a, #4a1428, #3a1a08, #2a0a1a);
  background-size: 300% 300%;
  animation: hologram 6s ease infinite;
  border: 1px solid rgba(255,105,140,.35);
  box-shadow: 0 0 30px rgba(255,105,140,.15);
}

/* 9. Holographic — веселкове голо-сяйво */
.vcard-skin-holo .vcard-front {
  background: linear-gradient(120deg, #ff2ecc, #ffd12e, #2effc7, #2e6bff, #ff2ecc);
  background-size: 400% 400%;
  animation: hologram 4s linear infinite;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 0 30px rgba(255,255,255,.2);
}
.vcard-skin-holo .vcard-bank-name,
.vcard-skin-holo .vcard-number,
.vcard-skin-holo .vcard-value,
.vcard-skin-holo .vcard-label { text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* 10. Galaxy — космос зі "зірками" */
.vcard-skin-galaxy .vcard-front {
  background:
    radial-gradient(2px 2px at 20px 30px, #fff, transparent),
    radial-gradient(2px 2px at 60px 70px, #fff, transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 130px 90px, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 160px 20px, #fff, transparent),
    radial-gradient(2px 2px at 200px 60px, rgba(255,255,255,.7), transparent),
    linear-gradient(160deg, #0a0020, #1a0040, #0d0028, #0a0020);
  background-size: 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 300% 300%;
  animation: hologram 8s ease infinite;
  border: 1px solid rgba(180,140,255,.4);
  box-shadow: 0 0 30px rgba(150,100,255,.2);
}

/* 11. Fire — вогняний */
.vcard-skin-fire .vcard-front {
  background: linear-gradient(160deg, #1a0000, #4a1000, #2a0500, #1a0000);
  background-size: 300% 300%;
  animation: hologram 4s ease infinite;
  border: 1px solid rgba(255,100,0,.45);
  box-shadow: 0 0 34px rgba(255,80,0,.25);
}

/* 12. Ice — крижаний з тріщинами */
.vcard-skin-ice .vcard-front {
  background:
    linear-gradient(35deg, transparent 48%, rgba(180,230,255,.12) 49%, rgba(180,230,255,.12) 50%, transparent 51%),
    linear-gradient(-35deg, transparent 48%, rgba(180,230,255,.08) 49%, rgba(180,230,255,.08) 50%, transparent 51%),
    linear-gradient(150deg, #001a2a, #003350, #001a2a);
  border: 1px solid rgba(150,220,255,.4);
  box-shadow: 0 0 30px rgba(150,220,255,.2);
}

/* 13. Rose Gold — розове золото */
.vcard-skin-rosegold .vcard-front {
  background: linear-gradient(135deg, #2a1015, #4a2a28, #3a1a1a, #2a1015);
  background-size: 300% 300%;
  animation: hologram 6s ease infinite;
  border: 1px solid rgba(230,170,160,.4);
  box-shadow: 0 0 30px rgba(230,170,160,.18);
}

/* 14. Snake — зміїна шкіра */
.vcard-skin-snake .vcard-front {
  background:
    radial-gradient(circle at 10px 10px, rgba(255,255,255,.05) 3px, transparent 3px) 0 0/20px 20px,
    radial-gradient(circle at 20px 20px, rgba(0,0,0,.2) 3px, transparent 3px) 0 0/20px 20px,
    linear-gradient(150deg, #0d1a0d, #1a2e1a, #0d1a0d);
  border: 1px solid rgba(120,200,120,.35);
  box-shadow: 0 0 24px rgba(80,180,80,.15);
}

/* Skin picker swatch previews (used in the modal) */
.skin-swatch {
  border-radius: 12px;
  padding: 14px 4px 8px;
  text-align: center;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
  border: 2px solid rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
  min-height: 58px;
}
.skin-swatch:active { transform: scale(.92); }
.skin-swatch.active { box-shadow: 0 0 0 1px currentColor; }
.skin-swatch-check {
  position: absolute; top: 4px; right: 4px;
  font-size: 11px; font-weight: 900;
}

/* ═══════════════════════════════════════════════════════
   BANNER CAROUSEL — ротаційні банери на головній
═══════════════════════════════════════════════════════ */
.banner-carousel {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 12px;
  animation: slideUp .4s ease;
  box-shadow: var(--bevel), var(--elev-2), 0 0 40px -26px rgba(212,175,55,.5);
  border: 1px solid rgba(212,175,55,.18);
}
.banner-dot.active { box-shadow: 0 0 8px rgba(212,175,55,.7); }

/* Головна — фонові плаваючі "орби" за героєм, чисто CSS, без JS */
#tab-home { position: relative; }
#tab-home::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 480px;
  pointer-events: none; z-index: 0; overflow: hidden;
  background:
    radial-gradient(circle 140px at 15% 20%, rgba(212,175,55,.10), transparent 70%),
    radial-gradient(circle 180px at 85% 10%, rgba(138,43,226,.09), transparent 70%),
    radial-gradient(circle 120px at 60% 35%, rgba(61,214,140,.06), transparent 70%);
  animation: homeOrbDrift 14s ease-in-out infinite alternate;
}
#tab-home > * { position: relative; z-index: 1; }
@keyframes homeOrbDrift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-14px,18px) scale(1.06); }
}
.progress-fill-shimmer { position: relative; overflow: hidden; }
.progress-fill-shimmer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
  background-size: 200% 100%;
  animation: shimmerSweep 2.4s ease-in-out infinite;
}
.banner-track {
  display: flex;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  touch-action: pan-y;
}
.banner-slide {
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;
  padding: 18px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  transition: transform .15s cubic-bezier(.4,0,.2,1), filter .15s;
  -webkit-tap-highlight-color: transparent;
}
.banner-slide:active { transform: scale(.98); filter: brightness(.92); }
.banner-deco {
  position: absolute; top: -20px; right: -20px;
  font-size: 110px; opacity: .06; pointer-events: none;
  transition: transform .5s var(--ease-premium);
  will-change: transform;
}
.banner-slide::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}
.banner-slide::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%);
  background-size: 200% 100%;
  animation: shimmerSweep 4.5s ease-in-out infinite;
}
.banner-inner {
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative; z-index: 1;
}
.banner-title {
  font-family: 'Orbitron', monospace;
  font-size: 21px; font-weight: 900; letter-spacing: 1.5px;
}
.banner-sub { font-size: 13px; font-weight: 700; margin-top: 4px; }
.banner-desc { color: #666; font-size: 11px; margin-top: 3px; max-width: 220px; }
.banner-pills { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.banner-pill {
  border: 1px solid; border-radius: 20px;
  padding: 4px 10px; font-size: 10px;
}
.banner-stat-box {
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.4) 55%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid; border-radius: 14px;
  padding: 10px 14px; text-align: center;
  flex-shrink: 0; min-width: 72px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px -8px rgba(0,0,0,.6);
}
.banner-stat-lbl { font-size: 9px; color: #666; }
.banner-stat-val { font-size: 17px; font-weight: 900; font-family: 'Orbitron', monospace; }
.banner-stat-sub { font-size: 9px; margin-top: 4px; }

.banner-dots {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 10px;
}
.banner-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  cursor: pointer; transition: all .25s ease;
}
.banner-dot.active {
  width: 18px; border-radius: 4px;
  background: var(--accent, #d4af37);
}

/* ═══════════════════════════════════════════════════════
   ЩЕ 12 СКІНІВ — на різний смак, вкус і цвєт
═══════════════════════════════════════════════════════ */

/* 15. Pastel Dream — м'які пастельні тони */
.vcard-skin-pastel .vcard-front {
  background: linear-gradient(135deg, #2a1f2e, #3a2a40, #2a1f2e);
  border: 1px solid rgba(255,200,230,.35);
  box-shadow: 0 0 26px rgba(255,200,230,.15);
}

/* 16. Mint — свіжий м'ятний */
.vcard-skin-mint .vcard-front {
  background: linear-gradient(135deg, #001a15, #003328, #001a15);
  background-size: 300% 300%;
  animation: hologram 6s ease infinite;
  border: 1px solid rgba(100,255,210,.4);
  box-shadow: 0 0 28px rgba(100,255,210,.15);
}

/* 17. Platinum — платина, холодний метал */
.vcard-skin-platinum .vcard-front {
  background: linear-gradient(135deg, #1a1a1d, #2c2c30, #1a1a1d);
  border: 1px solid rgba(220,220,230,.4);
  box-shadow: 0 0 26px rgba(220,220,230,.12);
}

/* 18. Copper — мідь / бронза */
.vcard-skin-copper .vcard-front {
  background: linear-gradient(135deg, #1f0d00, #4a2200, #2a1200, #1f0d00);
  background-size: 300% 300%;
  animation: hologram 6.5s ease infinite;
  border: 1px solid rgba(220,130,60,.4);
  box-shadow: 0 0 28px rgba(220,130,60,.18);
}

/* 19. Amethyst Dark — темний аметист з блиском */
.vcard-skin-amethyst .vcard-front {
  background: linear-gradient(135deg, #1a0025, #33004d, #1a0025);
  background-size: 300% 300%;
  animation: hologram 5s ease infinite;
  border: 1px solid rgba(180,80,255,.4);
  box-shadow: 0 0 30px rgba(180,80,255,.18);
}

/* 20. Denim — джинсова текстура */
.vcard-skin-denim .vcard-front {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 3px),
    linear-gradient(160deg, #0a1a2e, #14304f, #0a1a2e);
  border: 1px solid rgba(100,150,220,.35);
  box-shadow: 0 0 24px rgba(70,120,200,.15);
}

/* 21. Leopard — леопардовий принт */
.vcard-skin-leopard .vcard-front {
  background:
    radial-gradient(ellipse 18px 14px at 15% 20%, transparent 55%, rgba(20,10,0,.85) 58%, transparent 72%),
    radial-gradient(ellipse 16px 12px at 45% 50%, transparent 55%, rgba(20,10,0,.85) 58%, transparent 72%),
    radial-gradient(ellipse 14px 18px at 78% 22%, transparent 55%, rgba(20,10,0,.85) 58%, transparent 72%),
    radial-gradient(ellipse 17px 13px at 22% 75%, transparent 55%, rgba(20,10,0,.85) 58%, transparent 72%),
    radial-gradient(ellipse 15px 15px at 85% 68%, transparent 55%, rgba(20,10,0,.85) 58%, transparent 72%),
    radial-gradient(ellipse 16px 12px at 58% 88%, transparent 55%, rgba(20,10,0,.85) 58%, transparent 72%),
    radial-gradient(ellipse 12px 10px at 62% 38%, transparent 55%, rgba(20,10,0,.8) 58%, transparent 72%),
    radial-gradient(ellipse 13px 11px at 8% 55%, transparent 55%, rgba(20,10,0,.8) 58%, transparent 72%),
    linear-gradient(150deg, #a86a2c, #c88838, #a86a2c);
  border: 1px solid rgba(200,150,80,.4);
  box-shadow: 0 0 24px rgba(150,100,40,.18);
}

/* 22. Christmas — новорічний */
.vcard-skin-xmas .vcard-front {
  background: linear-gradient(135deg, #0a1a0a, #1a0505, #0a1a0a);
  background-size: 300% 300%;
  animation: hologram 5s ease infinite;
  border: 1px solid rgba(255,215,0,.4);
  box-shadow: 0 0 30px rgba(200,30,30,.2);
}

/* 23. Ukraine — синьо-жовтий патріотичний */
.vcard-skin-ukraine .vcard-front {
  background: linear-gradient(180deg, #0057b7 0%, #0057b7 50%, #ffd700 50%, #ffd700 100%);
  border: 1px solid rgba(255,215,0,.5);
  box-shadow: 0 0 30px rgba(0,87,183,.25);
}
.vcard-skin-ukraine .vcard-bank-name,
.vcard-skin-ukraine .vcard-number,
.vcard-skin-ukraine .vcard-value,
.vcard-skin-ukraine .vcard-label { text-shadow: 0 1px 4px rgba(0,0,0,.7); }

/* 24. Midnight Storm — грозове небо */
.vcard-skin-storm .vcard-front {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.06) 0%, transparent 30%),
    linear-gradient(160deg, #05050a, #14141f, #05050a);
  background-size: 100% 100%, 300% 300%;
  animation: hologram 7s ease infinite;
  border: 1px solid rgba(150,150,200,.3);
  box-shadow: 0 0 26px rgba(100,100,180,.15);
}

/* 25. Coral Reef — кораловий риф */
.vcard-skin-coral .vcard-front {
  background: linear-gradient(135deg, #1a0510, #330a1f, #1a0a05, #1a0510);
  background-size: 300% 300%;
  animation: hologram 6s ease infinite;
  border: 1px solid rgba(255,127,110,.4);
  box-shadow: 0 0 28px rgba(255,127,110,.18);
}

/* 26. Minimal White — мінімалізм, світлий */
.vcard-skin-minimal .vcard-front {
  background: linear-gradient(160deg, #e8e8e8, #f5f5f5, #e8e8e8);
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 0 20px rgba(255,255,255,.1);
}
.vcard-skin-minimal .vcard-bank-name,
.vcard-skin-minimal .vcard-number,
.vcard-skin-minimal .vcard-value,
.vcard-skin-minimal .vcard-label,
.vcard-skin-minimal .vcard-holder-row { color: #1a1a1a !important; text-shadow: none; }
.vcard-skin-minimal .vcard-chip { filter: brightness(.7); }

/* ═══════════════════════════════════════════════════════
   МЕМИ — картинки тягнуться напряму з i.imgflip.com (перевірені
   робочі посилання), затемнення зверху тримає текст картки
   читабельним поверх будь-якого зображення. Плюс "своє фото" —
   рендериться окремо через applyCardSkin()/style.backgroundImage,
   бо це унікальні дані користувача, а не спільний CSS-клас.
═══════════════════════════════════════════════════════ */
.vcard-skin-meme-drake .vcard-front            { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/30b1gx.jpg') center/cover; }
.vcard-skin-meme-distracted .vcard-front       { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/1ur9b0.jpg') center/cover; }
.vcard-skin-meme-womancat .vcard-front         { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/345v97.jpg') center/cover; }
.vcard-skin-meme-twobuttons .vcard-front       { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/1g8my4.jpg') center/cover; }
.vcard-skin-meme-changemymind .vcard-front     { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/24y43o.jpg') center/cover; }
.vcard-skin-meme-successkid .vcard-front       { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/1bhk.jpg') center/cover; }
.vcard-skin-meme-doge .vcard-front             { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/4t0m5.jpg') center/cover; }
.vcard-skin-meme-thisisfine .vcard-front       { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/wxica.jpg') center/cover; }
.vcard-skin-meme-stonks .vcard-front           { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/3si4.jpg') center/cover; }
.vcard-skin-meme-rollsafe .vcard-front         { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/1h7in3.jpg') center/cover; }
.vcard-skin-meme-pikachu .vcard-front          { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/2kbn1e.jpg') center/cover; }
.vcard-skin-meme-disastergirl .vcard-front     { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/23ls.jpg') center/cover; }
.vcard-skin-meme-grumpycat .vcard-front        { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/8p0a.jpg') center/cover; }
.vcard-skin-meme-expandingbrain .vcard-front   { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/1jwhww.jpg') center/cover; }
.vcard-skin-meme-onedoesnotsimply .vcard-front { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/1bij.jpg') center/cover; }
.vcard-skin-meme-ancientaliens .vcard-front    { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/26am.jpg') center/cover; }
.vcard-skin-meme-dicaprio .vcard-front         { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/39t1o.jpg') center/cover; }
.vcard-skin-meme-pigeon .vcard-front           { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/1o00in.jpg') center/cover; }
.vcard-skin-meme-batman .vcard-front           { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/9ehk.jpg') center/cover; }
.vcard-skin-meme-spongebob .vcard-front        { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/1otk96.jpg') center/cover; }
.vcard-skin-meme-sadpablo .vcard-front         { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/1c1uej.jpg') center/cover; }
.vcard-skin-meme-hidethepain .vcard-front      { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/gk5el.jpg') center/cover; }
/* Свіжі меми — "молодіжний" тренд-набір */
.vcard-skin-meme-67kid .vcard-front       { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/4/a9fxer.jpg') center/cover; }
.vcard-skin-meme-skibidi .vcard-front     { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/4/7mzkd0.jpg') center/cover; }
.vcard-skin-meme-tralalero .vcard-front   { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/4/9p82jm.jpg') center/cover; }
.vcard-skin-meme-bombardiro .vcard-front  { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/4/9q3kcu.jpg') center/cover; }
.vcard-skin-meme-tungtung .vcard-front    { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/4/9r9m7h.jpg') center/cover; }
.vcard-skin-meme-chimpanzini .vcard-front { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/4/9r9mu1.jpg') center/cover; }
.vcard-skin-meme-gigachad .vcard-front    { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/2/6x0oo0.jpg') center/cover; }
.vcard-skin-meme-sigma .vcard-front       { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/4/5imrkq.jpg') center/cover; }
.vcard-skin-meme-chillguy .vcard-front    { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/4/9au02y.jpg') center/cover; }
.vcard-skin-meme-ohio .vcard-front        { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/4/46e43q.jpg') center/cover; }
.vcard-skin-meme-npc .vcard-front         { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/4/2k0qad.jpg') center/cover; }
.vcard-skin-meme-rizzler .vcard-front     { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), url('https://i.imgflip.com/4/93etli.jpg') center/cover; }
.vcard-skin-meme-drake .vcard-front, .vcard-skin-meme-distracted .vcard-front, .vcard-skin-meme-womancat .vcard-front,
.vcard-skin-meme-twobuttons .vcard-front, .vcard-skin-meme-changemymind .vcard-front, .vcard-skin-meme-successkid .vcard-front,
.vcard-skin-meme-doge .vcard-front, .vcard-skin-meme-thisisfine .vcard-front, .vcard-skin-meme-stonks .vcard-front,
.vcard-skin-meme-rollsafe .vcard-front, .vcard-skin-meme-pikachu .vcard-front, .vcard-skin-meme-disastergirl .vcard-front,
.vcard-skin-meme-grumpycat .vcard-front, .vcard-skin-meme-expandingbrain .vcard-front, .vcard-skin-meme-onedoesnotsimply .vcard-front,
.vcard-skin-meme-ancientaliens .vcard-front, .vcard-skin-meme-dicaprio .vcard-front, .vcard-skin-meme-pigeon .vcard-front,
.vcard-skin-meme-batman .vcard-front, .vcard-skin-meme-spongebob .vcard-front, .vcard-skin-meme-sadpablo .vcard-front,
.vcard-skin-meme-hidethepain .vcard-front, .vcard-skin-meme-67kid .vcard-front, .vcard-skin-meme-skibidi .vcard-front,
.vcard-skin-meme-tralalero .vcard-front, .vcard-skin-meme-bombardiro .vcard-front, .vcard-skin-meme-tungtung .vcard-front,
.vcard-skin-meme-chimpanzini .vcard-front, .vcard-skin-meme-gigachad .vcard-front, .vcard-skin-meme-sigma .vcard-front,
.vcard-skin-meme-chillguy .vcard-front, .vcard-skin-meme-ohio .vcard-front, .vcard-skin-meme-npc .vcard-front,
.vcard-skin-meme-rizzler .vcard-front, .vcard-skin-custom-photo .vcard-front {
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 0 22px rgba(255,255,255,.1);
}
.vcard-skin-custom-photo .vcard-front { background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)), #1a1a1a center/cover; background-blend-mode: normal; }

/* ═══════════════════════════════════════════════════════
   40 НОВИХ СКІНІВ КАРТКИ (27-66) — по категоріях, той самий
   паттерн: 4-стопний градієнт, що зациклюється, легка hologram-
   анімація зсуву, тематична обвідка/світіння.
═══════════════════════════════════════════════════════ */

/* ── Класика (+7) ── */
.vcard-skin-silver .vcard-front { background: linear-gradient(135deg,#1a1a1c,#3a3a3e,#232326,#1a1a1c); background-size:300% 300%; animation:hologram 6.2s ease infinite; border:1px solid rgba(200,200,210,.4); box-shadow:0 0 22px rgba(200,200,210,.12); }
.vcard-skin-bronze .vcard-front { background: linear-gradient(135deg,#1f1206,#4a2e12,#2a1a08,#1f1206); background-size:300% 300%; animation:hologram 6.6s ease infinite; border:1px solid rgba(205,127,50,.4); box-shadow:0 0 22px rgba(205,127,50,.14); }
.vcard-skin-obsidian .vcard-front { background: linear-gradient(150deg,#050208,#180a2a,#0a0512,#050208); background-size:300% 300%; animation:hologram 7s ease infinite; border:1px solid rgba(120,60,200,.3); box-shadow:0 0 24px rgba(90,30,160,.16); }
.vcard-skin-steel .vcard-front { background: linear-gradient(135deg,#0d1218,#2a3642,#161c22,#0d1218); background-size:300% 300%; animation:hologram 6.3s ease infinite; border:1px solid rgba(140,170,200,.35); box-shadow:0 0 20px rgba(140,170,200,.1); }
.vcard-skin-ivory .vcard-front { background: linear-gradient(160deg,#efe9dd,#f8f4ea,#efe9dd); border:1px solid rgba(0,0,0,.12); box-shadow:0 0 18px rgba(255,250,235,.12); }
.vcard-skin-ivory .vcard-bank-name, .vcard-skin-ivory .vcard-number, .vcard-skin-ivory .vcard-value, .vcard-skin-ivory .vcard-label, .vcard-skin-ivory .vcard-holder-row { color:#2a2418 !important; text-shadow:none; }
.vcard-skin-charcoal .vcard-front { background: linear-gradient(135deg,#0a0a0a,#232323,#141414,#0a0a0a); background-size:300% 300%; animation:hologram 6.4s ease infinite; border:1px solid rgba(255,255,255,.1); box-shadow:0 0 18px rgba(0,0,0,.4); }
.vcard-skin-chrome .vcard-front { background: linear-gradient(120deg,#2c2c30,#dcdce6,#5a5a62,#dcdce6,#2c2c30); background-size:300% 300%; animation:hologram 5.5s ease infinite; border:1px solid rgba(220,220,230,.5); box-shadow:0 0 24px rgba(220,220,230,.18); }

/* ── Самоцвіти (+7) ── */
.vcard-skin-ruby .vcard-front { background: linear-gradient(135deg,#1a0004,#4a0012,#2a0008,#1a0004); background-size:300% 300%; animation:hologram 6.1s ease infinite; border:1px solid rgba(220,20,60,.4); box-shadow:0 0 24px rgba(220,20,60,.16); }
.vcard-skin-topaz .vcard-front { background: linear-gradient(135deg,#1f1600,#4a3800,#2a2200,#1f1600); background-size:300% 300%; animation:hologram 6.7s ease infinite; border:1px solid rgba(255,196,64,.4); box-shadow:0 0 22px rgba(255,196,64,.16); }
.vcard-skin-opal .vcard-front { background: linear-gradient(120deg,#1a1a2a,#dcc8ff,#c8f0ff,#ffd8ec,#1a1a2a); background-size:300% 300%; animation:hologram 8s ease infinite; border:1px solid rgba(230,220,255,.4); box-shadow:0 0 24px rgba(230,220,255,.18); }
.vcard-skin-garnet .vcard-front { background: linear-gradient(135deg,#1a0505,#3a0a10,#26080a,#1a0505); background-size:300% 300%; animation:hologram 6.9s ease infinite; border:1px solid rgba(140,30,45,.4); box-shadow:0 0 20px rgba(140,30,45,.14); }
.vcard-skin-turquoise .vcard-front { background: linear-gradient(135deg,#001a1a,#003d3d,#002626,#001a1a); background-size:300% 300%; animation:hologram 6.3s ease infinite; border:1px solid rgba(64,224,208,.4); box-shadow:0 0 22px rgba(64,224,208,.16); }
.vcard-skin-citrine .vcard-front { background: linear-gradient(135deg,#1a1200,#4a3200,#2a2000,#1a1200); background-size:300% 300%; animation:hologram 6.5s ease infinite; border:1px solid rgba(255,165,40,.4); box-shadow:0 0 20px rgba(255,165,40,.14); }
.vcard-skin-peridot .vcard-front { background: linear-gradient(135deg,#0f1a00,#2a3d00,#1a2600,#0f1a00); background-size:300% 300%; animation:hologram 6.6s ease infinite; border:1px solid rgba(180,220,60,.4); box-shadow:0 0 20px rgba(180,220,60,.14); }

/* ── Стихії (+7) ── */
.vcard-skin-thunder .vcard-front { background: linear-gradient(135deg,#050510,#1a1a4a,#0a0a26,#050510); background-size:300% 300%; animation:hologram 5.8s ease infinite; border:1px solid rgba(140,140,255,.4); box-shadow:0 0 24px rgba(140,140,255,.18); }
.vcard-skin-earth .vcard-front { background: linear-gradient(135deg,#0f1005,#2a2a10,#1a1a0a,#0f1005); background-size:300% 300%; animation:hologram 6.8s ease infinite; border:1px solid rgba(150,170,80,.35); box-shadow:0 0 18px rgba(150,170,80,.12); }
.vcard-skin-volcano .vcard-front { background: linear-gradient(160deg,#0a0000,#4a0a00,#1a0500,#0a0000); background-size:300% 300%; animation:hologram 6.2s ease infinite; border:1px solid rgba(255,80,0,.4); box-shadow:0 0 26px rgba(255,80,0,.2); }
.vcard-skin-blizzard .vcard-front { background: linear-gradient(150deg,#0a1420,#2a4a6a,#153048,#0a1420); background-size:300% 300%; animation:hologram 6.4s ease infinite; border:1px solid rgba(200,230,255,.4); box-shadow:0 0 22px rgba(200,230,255,.16); }
.vcard-skin-tsunami .vcard-front { background: linear-gradient(150deg,#00080f,#003250,#001a30,#00080f); background-size:300% 300%; animation:hologram 6.9s ease infinite; border:1px solid rgba(60,150,220,.4); box-shadow:0 0 22px rgba(60,150,220,.16); }
.vcard-skin-solar .vcard-front { background: linear-gradient(135deg,#1a0e00,#4a2800,#2a1600,#1a0e00); background-size:300% 300%; animation:hologram 5.6s ease infinite; border:1px solid rgba(255,180,40,.45); box-shadow:0 0 26px rgba(255,180,40,.2); }
.vcard-skin-void .vcard-front { background: linear-gradient(150deg,#000,#150022,#080012,#000); background-size:300% 300%; animation:hologram 7.4s ease infinite; border:1px solid rgba(80,20,140,.35); box-shadow:0 0 24px rgba(80,20,140,.16); }

/* ── Космос і футуризм (+6) ── */
.vcard-skin-nebula .vcard-front { background: linear-gradient(135deg,#0a0018,#3a0050,#1a0030,#0a0018); background-size:300% 300%; animation:hologram 6.5s ease infinite; border:1px solid rgba(200,80,255,.4); box-shadow:0 0 26px rgba(200,80,255,.2); }
.vcard-skin-matrix .vcard-front { background: linear-gradient(160deg,#000800,#003300,#001a00,#000800); background-size:300% 300%; animation:hologram 5.4s ease infinite; border:1px solid rgba(0,255,80,.45); box-shadow:0 0 24px rgba(0,255,80,.2); }
.vcard-skin-synthwave .vcard-front { background: linear-gradient(120deg,#1a0028,#ff2ea6,#2e2eff,#1a0028); background-size:300% 300%; animation:hologram 6s ease infinite; border:1px solid rgba(255,46,166,.4); box-shadow:0 0 26px rgba(255,46,166,.2); }
.vcard-skin-aurora .vcard-front { background: linear-gradient(120deg,#001a12,#00ff9c,#0050ff,#001a12); background-size:300% 300%; animation:hologram 7.2s ease infinite; border:1px solid rgba(0,255,156,.4); box-shadow:0 0 26px rgba(0,255,156,.18); }
.vcard-skin-plasma .vcard-front { background: linear-gradient(120deg,#1a0018,#ff2ecc,#6a2eff,#1a0018); background-size:300% 300%; animation:hologram 5.7s ease infinite; border:1px solid rgba(255,46,204,.4); box-shadow:0 0 26px rgba(255,46,204,.2); }
.vcard-skin-quantum .vcard-front { background: linear-gradient(135deg,#000a1a,#0050a0,#002a5a,#000a1a); background-size:300% 300%; animation:hologram 6.6s ease infinite; border:1px solid rgba(80,180,255,.4); box-shadow:0 0 26px rgba(80,180,255,.2); }

/* ── Текстури (+6) ── */
.vcard-skin-wood .vcard-front {
  background:
    repeating-linear-gradient(95deg, rgba(0,0,0,.14) 0, rgba(0,0,0,.14) 2px, transparent 2px, transparent 9px),
    repeating-linear-gradient(95deg, rgba(255,200,140,.05) 0, rgba(255,200,140,.05) 1px, transparent 1px, transparent 14px),
    linear-gradient(100deg,#1f1206,#3a2410,#2a1a0a,#1f1206,#3a2410);
  background-size: 100% 100%, 100% 100%, 300% 300%;
  animation: hologram 6.8s ease infinite;
  border: 1px solid rgba(160,110,60,.4); box-shadow: 0 0 18px rgba(160,110,60,.12);
}
.vcard-skin-concrete .vcard-front {
  background:
    radial-gradient(circle at 12% 22%, rgba(0,0,0,.25) 1.5px, transparent 1.6px),
    radial-gradient(circle at 62% 14%, rgba(255,255,255,.08) 1px, transparent 1.1px),
    radial-gradient(circle at 38% 68%, rgba(0,0,0,.22) 1.5px, transparent 1.6px),
    radial-gradient(circle at 84% 58%, rgba(255,255,255,.07) 1px, transparent 1.1px),
    radial-gradient(circle at 22% 88%, rgba(0,0,0,.2) 1.5px, transparent 1.6px),
    radial-gradient(circle at 72% 82%, rgba(255,255,255,.06) 1px, transparent 1.1px),
    linear-gradient(135deg,#141414,#2e2e2e,#1c1c1c,#141414);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 300% 300%;
  animation: hologram 6.7s ease infinite;
  border: 1px solid rgba(160,160,160,.3); box-shadow: 0 0 16px rgba(160,160,160,.1);
}
.vcard-skin-velvet .vcard-front { background: linear-gradient(135deg,#12000f,#3a0028,#20001a,#12000f); background-size:300% 300%; animation:hologram 7s ease infinite; border:1px solid rgba(160,20,120,.4); box-shadow:0 0 22px rgba(160,20,120,.16); }
.vcard-skin-silk .vcard-front { background: linear-gradient(120deg,#1e1a24,#3a3244,#241f2c,#1e1a24); background-size:300% 300%; animation:hologram 6.3s ease infinite; border:1px solid rgba(200,190,220,.3); box-shadow:0 0 18px rgba(200,190,220,.12); }
.vcard-skin-brushedmetal .vcard-front { background: linear-gradient(95deg,#26262a,#3e3e44,#2a2a2e,#3e3e44,#26262a); background-size:300% 300%; animation:hologram 6.1s ease infinite; border:1px solid rgba(210,210,220,.35); box-shadow:0 0 18px rgba(210,210,220,.12); }
.vcard-skin-camo .vcard-front {
  background:
    radial-gradient(ellipse 34px 22px at 18% 28%, rgba(10,20,5,.55) 55%, transparent 60%),
    radial-gradient(ellipse 26px 30px at 55% 15%, rgba(60,70,30,.5) 55%, transparent 60%),
    radial-gradient(ellipse 30px 20px at 78% 45%, rgba(10,20,5,.5) 55%, transparent 60%),
    radial-gradient(ellipse 22px 26px at 30% 70%, rgba(60,70,30,.45) 55%, transparent 60%),
    radial-gradient(ellipse 28px 24px at 68% 82%, rgba(10,20,5,.5) 55%, transparent 60%),
    linear-gradient(120deg,#0f1a0a,#2a3318,#141f10,#0f1a0a);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 300% 300%;
  animation: hologram 6.9s ease infinite;
  border: 1px solid rgba(120,140,80,.35); box-shadow: 0 0 16px rgba(120,140,80,.1);
}

/* ── Особливі (+7) ── */
.vcard-skin-halloween .vcard-front { background: linear-gradient(135deg,#0a0000,#3a1500,#150800,#0a0000); background-size:300% 300%; animation:hologram 6.4s ease infinite; border:1px solid rgba(255,130,0,.4); box-shadow:0 0 24px rgba(255,130,0,.18); }
.vcard-skin-valentine .vcard-front { background: linear-gradient(135deg,#1a0008,#4a001a,#2a000f,#1a0008); background-size:300% 300%; animation:hologram 6.2s ease infinite; border:1px solid rgba(255,60,110,.4); box-shadow:0 0 24px rgba(255,60,110,.18); }
.vcard-skin-easter .vcard-front { background: linear-gradient(120deg,#1a1420,#ffd8e8,#d8f0ff,#e8ffd8,#1a1420); background-size:300% 300%; animation:hologram 7.6s ease infinite; border:1px solid rgba(255,216,232,.4); box-shadow:0 0 20px rgba(255,216,232,.16); }
.vcard-skin-autumn .vcard-front { background: linear-gradient(135deg,#1a0d00,#4a2400,#2a1500,#1a0d00); background-size:300% 300%; animation:hologram 6.7s ease infinite; border:1px solid rgba(255,140,40,.4); box-shadow:0 0 22px rgba(255,140,40,.16); }
.vcard-skin-spring .vcard-front { background: linear-gradient(135deg,#001a08,#0d3d1a,#062610,#001a08); background-size:300% 300%; animation:hologram 6.5s ease infinite; border:1px solid rgba(255,150,200,.35); box-shadow:0 0 20px rgba(120,220,150,.16); }
.vcard-skin-diamondelite .vcard-front { background: linear-gradient(115deg,#0a0a0f,#e8e8f5,#4a4a5a,#e8e8f5,#0a0a0f); background-size:300% 300%; animation:hologram 5.2s ease infinite; border:1.5px solid rgba(232,232,245,.55); box-shadow:0 0 30px rgba(232,232,245,.22); }
.vcard-skin-midnight .vcard-front { background: linear-gradient(160deg,#000005,#050518,#02020c,#000005); background-size:300% 300%; animation:hologram 7.8s ease infinite; border:1px solid rgba(60,60,120,.35); box-shadow:0 0 20px rgba(40,40,100,.16); }

/* ═══════════════════════════════════════════════════════
   ШАХИ
═══════════════════════════════════════════════════════ */
.chess-board-wrap {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(212,175,55,.3);
  box-shadow: 0 0 30px rgba(0,0,0,.4);
}
.chess-board-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  height: 100%;
}
.chess-sq {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background .15s;
}
.chess-move-dot {
  position: absolute;
  width: 26%; height: 26%;
  border-radius: 50%;
  background: rgba(61,214,140,.55);
  pointer-events: none;
}
.chess-capture-ring {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 3px solid rgba(231,76,60,.65);
  pointer-events: none;
}
.chess-mode-btn {
  background: #111;
  border: 1.5px solid #333;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.chess-mode-btn:active { transform: scale(.95); }
.chess-mode-btn.selected {
  border-color: var(--accent);
  background: rgba(212,175,55,.08);
}
.chess-captured-row {
  min-height: 22px;
  font-size: 16px;
  letter-spacing: 2px;
  opacity: .8;
}

/* ═══════════════════════════════════════════════════════
   ВИМКНЕНІ ІГРИ — kill-switch адміна
═══════════════════════════════════════════════════════ */
.game-card-disabled {
  filter: grayscale(85%) brightness(.5);
  pointer-events: none;
  position: relative;
}
.game-card-disabled-admin {
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(231,76,60,.5);
}
.game-card-disabled-admin .game-disabled-badge {
  inset: auto;
  top: 4px; left: 4px; right: 4px; bottom: auto;
  background: rgba(231,76,60,.85);
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 8px;
}
.game-disabled-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  color: #ff8888;
  font-size: 10px;
  font-weight: 800;
  border-radius: inherit;
  z-index: 5;
  text-align: center;
  padding: 4px;
}

/* ═══════════════════════════════════════════════════════
   ЗАМОРОЖЕНА КАРТКА — видима накладка прямо на картці
═══════════════════════════════════════════════════════ */
.vcard-frozen-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,12,22,.76);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 6;
  animation: fadeInOverlay .3s ease;
}
.vcard-frozen-icon svg { width: 24px; height: 24px; }
.vcard-frozen-icon {
  font-size: 40px;
  filter: drop-shadow(0 0 12px rgba(150,220,255,.5));
  animation: float 3s ease-in-out infinite;
}
.vcard-frozen-text {
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #96dcff;
  text-shadow: 0 0 8px rgba(150,220,255,.6);
}

/* ═══════════════════════════════════════════════════════
   СВЯТКУВАННЯ ВИГРАШУ v2 — BIG WIN / MEGA WIN
═══════════════════════════════════════════════════════ */
@keyframes screenShake {
  0%, 100% { transform: translate(0,0); }
  10% { transform: translate(-8px,-4px); }
  20% { transform: translate(8px,4px); }
  30% { transform: translate(-6px,3px); }
  40% { transform: translate(6px,-3px); }
  50% { transform: translate(-4px,2px); }
  60% { transform: translate(4px,-2px); }
  70% { transform: translate(-2px,1px); }
  80% { transform: translate(2px,-1px); }
  90% { transform: translate(-1px,0); }
}
.screen-shake { animation: screenShake .5s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes bigWinFlash {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  100% { opacity: 0; }
}
.bigwin-flash {
  position: fixed; inset: 0; z-index: 9985;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(255,220,120,.55), transparent 70%);
  animation: bigWinFlash 1.1s ease-out forwards;
}

@keyframes bigWinBannerIn {
  0%   { transform: translate(-50%,-50%) scale(.3) rotate(-8deg); opacity: 0; }
  55%  { transform: translate(-50%,-50%) scale(1.15) rotate(2deg); opacity: 1; }
  75%  { transform: translate(-50%,-50%) scale(.96) rotate(-1deg); }
  100% { transform: translate(-50%,-50%) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes bigWinBannerOut {
  to { transform: translate(-50%,-50%) scale(.7); opacity: 0; }
}
.bigwin-banner {
  position: fixed; top: 40%; left: 50%;
  z-index: 9990;
  text-align: center;
  animation: bigWinBannerIn .6s cubic-bezier(.34,1.56,.64,1) both;
  pointer-events: none;
}
.bigwin-banner.out { animation: bigWinBannerOut .35s ease forwards; }
.bigwin-banner-title {
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  letter-spacing: 3px;
  text-shadow: 0 0 20px currentColor, 0 4px 12px rgba(0,0,0,.6);
  white-space: nowrap;
}
.bigwin-banner-title.tier-big {
  font-size: 34px;
  color: #ffd94d;
  background: linear-gradient(90deg,#ffd94d,#fff6c9,#ffd94d);
  background-size: 200% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: winShimmer 1.3s ease infinite;
}
.bigwin-banner-title.tier-mega {
  font-size: 42px;
  color: #ff5fd4;
  background: linear-gradient(90deg,#ff5fd4,#7ef9ff,#ffd94d,#ff5fd4);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: winShimmer 1s ease infinite;
}
.bigwin-banner-amount {
  font-family: 'Orbitron', monospace;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  margin-top: 6px;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

/* Гущі конфеті-дощ для великих виграшів */
.confetti-rain-piece {
  position: fixed; top: -20px;
  z-index: 9980;
  pointer-events: none;
  animation: confettiRainFall linear forwards;
}
@keyframes confettiRainFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(115vh) rotate(var(--spin,540deg)); opacity: .2; }
}

/* Анімоване число виграшу — рахує вгору */
.win-number-countup {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════
   ОНБОРДИНГ — підсвітка + тултіп
═══════════════════════════════════════════════════════ */
.onboard-overlay {
  position: fixed; inset: 0; z-index: 9970;
  background: rgba(0,0,0,.78);
  animation: fadeInOverlay .3s ease;
}
.onboard-spotlight {
  position: fixed; z-index: 9971;
  border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.78);
  transition: all .4s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.onboard-tooltip {
  position: fixed; z-index: 9972;
  background: linear-gradient(135deg,#1a1200,#241a00);
  border: 1.5px solid rgba(212,175,55,.5);
  border-radius: 16px;
  padding: 16px;
  max-width: 280px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  animation: popIn .3s cubic-bezier(.34,1.56,.64,1);
}

/* ═══════════════════════════════════════════════════════
   ЗАГАЛЬНІ МІКРО-АНІМАЦІЇ — більше "живого" по всьому сайту
═══════════════════════════════════════════════════════ */
@keyframes softBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.anim-bob { animation: softBob 2.4s ease-in-out infinite; }

@keyframes ringPing {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,.5); }
  100% { box-shadow: 0 0 0 12px rgba(212,175,55,0); }
}
.anim-ping { animation: ringPing 1.8s ease-out infinite; }

@keyframes shimmerSweep {
  0%   { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}
.anim-shimmer {
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.12) 45%, transparent 60%);
  background-size: 200% 100%;
  animation: shimmerSweep 2.8s ease-in-out infinite;
}

/* Кнопки — легкий тактильний відгук на будь-якому елементі з цим класом */
.anim-press { transition: transform .12s cubic-bezier(.4,0,.2,1), box-shadow .15s; }
.anim-press:active { transform: scale(.93); }
/* A touch of 3D on tap for the premium tiles — pure CSS, no gesture capture,
   so it can never fight scrolling or the banner carousel's swipe. */
.lux-action-tile.anim-press:active { transform: perspective(400px) scale(.94) rotateX(6deg); }
.lux-hero-cell { transition: transform .12s cubic-bezier(.4,0,.2,1); cursor:pointer; }
.lux-hero-cell:active { transform: perspective(400px) scale(.93) rotateX(8deg); }
#tab-home .anim-press:hover { box-shadow: var(--bevel), var(--elev-1), var(--glow-accent-soft); }

/* Картки — плавна поява каскадом */
@keyframes cascadeIn {
  from { opacity:0; transform: translateY(14px) scale(.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.anim-cascade { animation: cascadeIn .35s cubic-bezier(.22,1,.36,1) both; }

/* ═══════════════════════════════════════════════════════
   MYSTERY BOX & WELCOME BACK
═══════════════════════════════════════════════════════ */
.mystery-box-card {
  background: linear-gradient(135deg,#1a0035,#2d0060,#1a0035);
  background-size: 200% 200%;
  animation: hologram 4s ease infinite;
  border: 2px solid rgba(180,80,255,.5);
  border-radius: var(--r-md);
  padding: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--bevel), var(--elev-1);
  transition: transform .14s var(--ease-tactile);
}
.mystery-box-card:active { transform: scale(.98); }
.mystery-box-icon {
  font-size: 52px;
  animation: float 2.5s ease-in-out infinite, spark 3s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(180,80,255,.6));
}
@keyframes welcomeBackGlow {
  0%,100% { box-shadow: var(--bevel), var(--elev-1), 0 0 30px rgba(74,158,255,.25); }
  50%     { box-shadow: var(--bevel), var(--elev-1), 0 0 50px rgba(74,158,255,.5); }
}
.welcome-back-card {
  border-radius: var(--r-md);
  animation: welcomeBackGlow 2.5s ease-in-out infinite;
}

/* Friends feed */
.friend-feed-item {
  animation: cascadeIn .3s ease both;
}

/* ═══════════════════════════════════════════════════════
   ФІНАЛЬНИЙ ПАКЕТ ПОЛІРУВАННЯ — тактильний відгук
   на елементах де його ще не було
═══════════════════════════════════════════════════════ */
.nav-item {
  transition: transform .15s cubic-bezier(.4,0,.2,1), opacity .15s;
}
.nav-item:active { transform: scale(.88); opacity: .7; }

.settings-row {
  transition: background-color .15s;
}
.settings-row:active { background-color: var(--ks-surface-2); }

.pm-thread {
  transition: transform .12s, background-color .15s;
}
.pm-thread:active { transform: scale(.98); background-color: rgba(255,255,255,.03); }

.theme-dot, .lang-btn, .font-size-btn {
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.theme-dot:active, .lang-btn:active, .font-size-btn:active { transform: scale(.85); }

/* Каскадна поява карток лобі при вході на вкладку */
.casino-game-card, .game-thumb {
  animation: cascadeIn .3s ease both;
}
.casino-game-card:nth-child(1), .game-thumb:nth-child(1) { animation-delay: .02s; }
.casino-game-card:nth-child(2), .game-thumb:nth-child(2) { animation-delay: .05s; }
.casino-game-card:nth-child(3), .game-thumb:nth-child(3) { animation-delay: .08s; }
.casino-game-card:nth-child(4), .game-thumb:nth-child(4) { animation-delay: .11s; }
.casino-game-card:nth-child(5), .game-thumb:nth-child(5) { animation-delay: .14s; }
.casino-game-card:nth-child(6), .game-thumb:nth-child(6) { animation-delay: .17s; }
.casino-game-card:nth-child(n+7), .game-thumb:nth-child(n+7) { animation-delay: .2s; }

/* Іконка на вкладці навігації "дихає" коли активна */
.nav-item.active .icon {
  animation: softBob 2s ease-in-out infinite;
}

/* Банер-стат числа плавно з'являються */
.banner-stat-val { animation: cascadeIn .4s ease both; }

/* Прев'ю скіну картки — легкий 3D-тілт при наведенні (десктоп) */
.skin-swatch { transition: transform .2s, box-shadow .2s; }
@media (hover: hover) {
  .skin-swatch:hover { transform: translateY(-3px) scale(1.03); }
}

/* ═══════════════════════════════════════════════════════
   ДОСТУПНІСТЬ — клавіатурний фокус і зменшений рух
═══════════════════════════════════════════════════════ */
input:focus-visible, textarea:focus-visible, .nav-item:focus-visible,
.game-card:focus-visible, .game-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════
   АДАПТАЦІЯ ПІД ПРИСТРІЙ ТА РОЗМІР ЕКРАНА
   Сайт побудований як мобільний застосунок (без жодного
   @media під ширину екрана) — на планшеті чи десктопі весь
   інтерфейс розтягувався на всю ширину вікна: гігантські
   кнопки, розтягнуті сітки ігор, поле вводу ПП "тікало"
   вбік. Нижче — центрована "телефонна" колонка на широких
   екранах (як у більшості мобільних вебзастосунків) плюс
   дрібні правки для дуже вузьких і низьких екранів.
═══════════════════════════════════════════════════════ */

/* Планшети/десктоп (≥641px) — центруємо весь застосунок у колонку
   фіксованої ширини замість розтягування на всю ширину вікна. */
@media (min-width: 641px) {
  body { display: flex; flex-direction: column; align-items: center; }
  /* .screen тут не випадково: екрани вкладок лежать у розмітці поза .container,
     тож обмеження ширини на них не поширювалось. Більшість виглядали
     центрованими лише завдяки align-items у body, а «Ще» розтягувалась на всю
     ширину вікна. */
  .header, .container, .screen { max-width: 560px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; }
  .bottom-nav, .full-modal, #auth-screen, .slotok-fullscreen-modal, .pm-thread-fullscreen {
    left: 50%; right: auto; width: 100%; max-width: 560px; transform: translateX(-50%);
  }
  /* Легка рамка навколо "телефону", щоб було видно межу застосунку на широкому фоні */
  .header { box-shadow: 0 1px 0 rgba(212,175,55,.16), 0 14px 30px -16px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04); }
}

/* ПК (≥900px) — бокова навігація замість нижньої панелі: мишею природніше
   тягнутись убік, ніж у самий низ великого екрана. Контент трохи ширший за
   "телефонну" колонку, щоб лишалось менше порожнього місця обабіч. Той самий
   .nav-item/switchTab() — тут лише інша розкладка тих самих елементів. */
@media (min-width: 900px) {
  body { padding-left: 220px; box-sizing: border-box; }
  .header, .container, .screen { max-width: 680px; }

  /* .screen тут — не той самий .screen, що вже поза .container вище: ці
     повноекранні шари лежать fixed, тож центруються самі, не через body.
     left:220px + right:0 + margin:auto — центрування в зоні ПРАВОРУЧ від
     бічної панелі, а не по всій ширині вікна (інакше домашня вкладка проглядає
     з-під вузького екрана входу/модалок справа). */
  .full-modal, #auth-screen, .slotok-fullscreen-modal, .pm-thread-fullscreen {
    left: 220px; right: 0; width: auto; max-width: 680px;
    margin-left: auto; margin-right: auto; transform: none;
  }

  .bottom-nav {
    left: 0; right: auto; top: 0; bottom: 0; transform: none;
    width: 220px; max-width: none; height: 100vh;
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    padding: 28px 10px calc(28px + env(safe-area-inset-bottom));
    gap: 4px; border-top: none; border-right: 1px solid rgba(255,255,255,.06);
  }
  .nav-item {
    width: auto; height: 46px; flex-direction: row; justify-content: flex-start;
    gap: 12px; padding: 0 14px; font-size: 13px;
  }
  .nav-item span.icon { font-size: 19px; margin-bottom: 0; }
  .nav-item.active { transform: none; }
  @media (hover: hover) {
    .nav-item:hover { background: rgba(255,255,255,.05); }
  }
}

/* Дуже вузькі екрани (старі/малі телефони, ≤360px) — трохи стискаємо
   відступи й типографіку, щоб нічого не вилазило за межі екрана. */
@media (max-width: 360px) {
  .container { padding: 10px; }
  .header { padding: 10px 12px; }
  .header h1 { font-size: 19px; }
  .hero-title { font-size: 20px; }
  button { padding: 12px; font-size: 13px; }
  .casino-grid-3 { gap: 6px; }
}

/* Низькі екрани в альбомній орієнтації (телефон повернутий боком) —
   fixed-елементи на всю висоту (100dvh) інакше з'їдають майже весь
   екран під клавіатурою/шапкою браузера. */
@media (max-height: 480px) and (orientation: landscape) {
  .pm-thread-fullscreen { height: 100vh; }
}

/* dvh не підтримується — деякі старі WebView. Явний фолбек через vh
   уже стоїть першим у .pm-thread-fullscreen, тож додаткового @supports
   не потрібно (dvh просто ігнорується непідтримуваними рушіями). */

/* Обведення фокуса лишалось глобально золотим і билось із новою мовою.
   Доступність не прибираємо — лише перефарбовуємо в акцент Каси. */
:where(#tab-cashier, .ledger, .ks-modal-box) :is(button, input, textarea):focus-visible {
  outline: 2px solid var(--ks-acc);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   МІСТ ЗІ СТАРОЇ КАЗИНОВОЇ МОВИ В МОВУ КАСИ
   У застосунку співіснують три мови: ks-* (Каса, Профіль, Сповіщення,
   Налаштування), lux-* (Головна) і стара казинова (лоббі, ігри, «Ще»,
   повноекранні модалки). Найбільше різало око саме те, що стара модалка
   спливала поверх уже переведеного екрана.
   Переписувати 166 .btn-outline і 17 модалок вручну сенсу немає — замість
   цього старі примітиви вдягаються в ks-токени там, де опиняються в новій
   мові. Щоб перевести будь-який екран, досить додати йому class="ledger";
   .full-modal підхоплює міст без жодних правок розмітки.
   #auth-screen теж має клас .full-modal, але свідомо лишається в золотій
   брендовій мові — це не модалка, а обличчя застосунку, тож він виключений
   через :where(:not(...)), щоб виключення не піднімало специфічність.
   Специфічність навмисне 0,2,0 — у базових .btn-outline/.btn-green вона
   0,1,0, і без другого класу вони перебили б міст.
   ═══════════════════════════════════════════════════════════════════ */

/* Полотно модалки: замість чорного аркуша з золотим серпанком — спокійна
   поверхня Каси й колонка обмеженої ширини, щоб на десктопі текст не тягнувся
   через увесь екран. */
.full-modal:where(:not(#auth-screen)) {
  background: #0a0b0f;
  padding: 20px 16px calc(96px + env(safe-area-inset-bottom, 0px));
  font-family: var(--ks-sans);
  color: var(--ks-fg);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.45;
}

.full-modal:where(:not(#auth-screen)) h2,
.ledger h2 {
  font-size: 20px; font-weight: 650; letter-spacing: -.01em;
  color: var(--ks-fg); text-shadow: none; margin: 0 0 16px;
}
.full-modal:where(:not(#auth-screen)) h3,
.ledger h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ks-fg-2); text-shadow: none; margin: 18px 0 8px;
}

/* ── Кнопки ─────────────────────────────────────────────────────── */
.full-modal:where(:not(#auth-screen)) :is(.btn-outline, .btn-gold, .btn-green, .btn-red, .btn-tg, .btn-primary),
.ledger     :is(.btn-outline, .btn-gold, .btn-green, .btn-red, .btn-tg, .btn-primary) {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 16px; border-radius: var(--ks-r);
  font-family: var(--ks-sans); font-size: 14px; font-weight: 600; letter-spacing: 0;
  border: 1px solid var(--ks-line-2); background: var(--ks-surface-2); color: var(--ks-fg);
  text-shadow: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.full-modal:where(:not(#auth-screen)) :is(.btn-outline, .btn-gold, .btn-green, .btn-red, .btn-tg, .btn-primary):active,
.ledger     :is(.btn-outline, .btn-gold, .btn-green, .btn-red, .btn-tg, .btn-primary):active {
  transform: none; filter: none; opacity: .82;
}
.full-modal:where(:not(#auth-screen)) .btn-outline,
.ledger     .btn-outline {
  background: transparent; border-color: var(--ks-line); color: var(--ks-fg-2);
}
.full-modal:where(:not(#auth-screen)) .btn-outline:hover,
.ledger     .btn-outline:hover { background: var(--ks-surface-2); color: var(--ks-fg); }

.full-modal:where(:not(#auth-screen)) :is(.btn-gold, .btn-primary, .btn-tg),
.ledger     :is(.btn-gold, .btn-primary, .btn-tg) {
  background: var(--ks-acc); border-color: var(--ks-acc); color: #0b0d18; font-weight: 700;
}
.full-modal:where(:not(#auth-screen)) :is(.btn-gold, .btn-primary, .btn-tg):hover,
.ledger     :is(.btn-gold, .btn-primary, .btn-tg):hover { background: #8c9bff; }

.full-modal:where(:not(#auth-screen)) .btn-green,
.ledger     .btn-green {
  background: var(--ks-pos); border-color: var(--ks-pos); color: #04160e; font-weight: 700;
}
.full-modal:where(:not(#auth-screen)) .btn-green:hover,
.ledger     .btn-green:hover { background: #3ed69b; }

.full-modal:where(:not(#auth-screen)) .btn-red,
.ledger     .btn-red {
  background: transparent; border-color: rgba(240,85,107,.4); color: var(--ks-neg); font-weight: 650;
}
.full-modal:where(:not(#auth-screen)) .btn-red:hover,
.ledger     .btn-red:hover { background: rgba(240,85,107,.1); }

.full-modal:where(:not(#auth-screen)) :is(.btn-outline, .btn-gold, .btn-green, .btn-red, .btn-tg, .btn-primary):disabled,
.ledger     :is(.btn-outline, .btn-gold, .btn-green, .btn-red, .btn-tg, .btn-primary):disabled {
  opacity: .38; cursor: not-allowed;
}

/* Кнопки в модалках стоять у розмітці як блоки на всю ширину — лишаємо це,
   але тільки коли вони справді самостійні, а не в ряду. */
.full-modal:where(:not(#auth-screen)) > :is(.btn-outline, .btn-gold, .btn-green, .btn-red, .btn-tg, .btn-primary) {
  display: flex; width: 100%; margin-bottom: 8px;
}

/* Списки-меню (вкладка «Ще») складені з кнопок у панелі: у новій мові це
   рядки на всю ширину з текстом ліворуч, а не центровані «таблетки». */
.ledger .ks-panel :is(.btn-outline, .btn-gold, .btn-green, .btn-red, .btn-primary) {
  display: flex; width: 100%; justify-content: flex-start; text-align: left;
  margin: 0 0 6px; padding: 13px 14px;
}
/* Пункт меню — основний текст екрана, а не другорядна кнопка: приглушений
   --ks-fg-2 робив увесь список блідим. */
.ledger .ks-panel .btn-outline { color: var(--ks-fg); }
.ledger .ks-panel :is(.btn-outline, .btn-gold, .btn-green, .btn-red, .btn-primary):last-child {
  margin-bottom: 0;
}

/* ── Поля вводу ─────────────────────────────────────────────────── */
.full-modal:where(:not(#auth-screen)) :is(input, textarea, select) {
  width: 100%; box-sizing: border-box;
  text-align: left; font-family: var(--ks-sans); font-weight: 500; font-size: 15px;
  padding: 13px 14px; margin: 0 0 10px; min-height: 0;
  border-radius: var(--ks-r); box-shadow: none;
  background: var(--ks-surface-2); border: 1px solid var(--ks-line); color: var(--ks-fg);
  transition: border-color .15s, background .15s;
}
.full-modal:where(:not(#auth-screen)) :is(input, textarea)::placeholder { color: var(--ks-fg-3); }
.full-modal:where(:not(#auth-screen)) :is(input, textarea):focus {
  border-color: var(--ks-acc); background: var(--ks-surface-3); box-shadow: none; outline: none;
}

/* ── Чипи сум і методів ─────────────────────────────────────────── */
.full-modal:where(:not(#auth-screen)) :is(.amount-btn, .wm-btn),
.ledger     :is(.amount-btn, .wm-btn) {
  background: var(--ks-surface-2); border: 1px solid var(--ks-line);
  border-radius: var(--ks-r); padding: 11px 12px;
  font-family: var(--ks-sans); font-size: 13px; font-weight: 600;
  color: var(--ks-fg-2); box-shadow: none; text-shadow: none;
  transition: background .15s, border-color .15s, color .15s;
}
.full-modal:where(:not(#auth-screen)) :is(.amount-btn, .wm-btn):hover,
.ledger     :is(.amount-btn, .wm-btn):hover { background: var(--ks-surface-3); color: var(--ks-fg); }
.full-modal:where(:not(#auth-screen)) :is(.amount-btn, .wm-btn).selected,
.ledger     :is(.amount-btn, .wm-btn).selected {
  background: var(--ks-acc-dim); border-color: var(--ks-acc); color: #b3bcff;
}


/* ── <img> без джерела ───────────────────────────────────────────────
   Прев'ю чату/підтримки/фону та аватарки без URL інакше малюють системну
   іконку "зламане зображення". Биті (404) картинки підміняє глобальний
   перехоплювач error в app.js (IMG_FALLBACK). */
img:not([src]),
img[src=""] { visibility: hidden; }