:root{--bg:#0b1622;--panel:#0f1a26;--line:#203247;--text:#cfe0f1;--muted:#8aa4bd;--brand:#90b8ff;--primary:#3b82f6;--chip:#132235;--app-width:480px;--tg-height:100vh}


*{box-sizing:border-box}
/* ═══════════════════════════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════════════════════════ */
#app-shell {
  position: relative;
  z-index: 1;
  width: var(--app-width);
  min-width: var(--app-width);
  max-width: var(--app-width);
  height: var(--tg-height);
  background: linear-gradient(135deg, #0f0020, #2a0040, #280008, #1a0035, #200005, #0a0025, #300030, #100008);
  background-size: 600% 600%;
  animation: casinoBg 10s ease infinite;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Боковая тень — создаёт ощущение отдельного приложения */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 100px rgba(0,0,0,0.8);
}

/* На мобиле — никаких боков, полный экран */
@media (max-width: 480px) {
  body { background: var(--bg); }
  body::before { display: none; }
  #app-shell { box-shadow: none; max-width: 100%; width: 100%; }
}


html,body{height:100%;}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--text);display:flex;justify-content:center;height:100%;position:relative;}
/* Красивый фон по бокам на ПК */
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 60% 80% at 20% 50%,rgba(59,130,246,0.06) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 50%,rgba(139,92,246,0.06) 0%,transparent 60%);pointer-events:none;z-index:0}
button{font:inherit;appearance:none;background:none;border:none;color:inherit;cursor:pointer}
.hidden{display:none!important}

/* Для игровых секций - используем visibility вместо display */
.muted{color:var(--muted)}
.star{color:#ffd36b}
.tabpane{display:none}
.tabpane.active{display:block}
#game{}
section{}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:0;padding:0 14px;height:56px;border-bottom:1px solid var(--line);position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(var(--app-width),100vw);background:var(--bg);z-index:1100;overflow:visible}
.brand{font-weight:700;font-size:18px}
.wallet{display:flex;align-items:center;gap:0;background:#1a1a2e;border:1px solid rgba(255,255,255,0.08);border-radius:999px;overflow:visible;height:30px}
.wallet .star{display:none}
.wallet-inner{display:flex;align-items:center;gap:6px;padding:0 8px 0 10px;height:100%}
.wallet-inner .star-icon{font-size:16px}
.wallet-plus-btn{width:32px;height:32px;border-radius:50%;background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;margin-right:-1px;transition:all .2s;-webkit-tap-highlight-color:transparent}
.wallet-plus-btn:active{transform:scale(0.92)}
.sound{margin-left:6px;background:#0e1b2a;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--text)}
main{padding:56px 12px 8px;width:100%;flex:1;overflow-y:auto}
.bottombar{display:none}
.tab{flex:1;background:var(--chip);color:var(--text);border:1px solid var(--line);padding:10px 8px;border-radius:12px}
.tab.active{outline:2px solid var(--brand)}
.cases-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.case-tile{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;outline:none;transition:all .3s cubic-bezier(0.4,0,0.2,1);position:relative;cursor:pointer}
.case-tile::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(144,184,255,.15),transparent);transition:left .6s ease;z-index:1;pointer-events:none}
.case-tile:hover::before{left:100%}
.case-tile:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 2px rgba(144,184,255,.3);border-color:rgba(144,184,255,.6)}
.case-tile:active{transform:translateY(0) scale(1)}
.case-tile:focus-visible{box-shadow:0 0 0 3px rgba(144,184,255,.35);border-color:#28405d}
.tile-img{min-height:130px;display:grid;place-items:center;position:relative;z-index:2}
.tile-emoji{font-size:48px;filter:drop-shadow(0 3px 12px rgba(0,0,0,.5));transition:transform .3s ease}
.case-tile:hover .tile-emoji{transform:scale(1.1) rotate(3deg)}
.tile-price{margin:12px;background:rgba(59,130,246,.15);color:#e9f3ff;border:1px solid #2a3952;border-radius:12px;padding:10px 12px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;position:relative;z-index:2;transition:all .3s ease}
.case-tile:hover .tile-price{background:rgba(59,130,246,.25);border-color:rgba(144,184,255,.4)}
.tile-price .star{font-size:16px}
/* ── casePlay fullscreen ── */
#casePlay{
  display:none;
  position:fixed;
  top:56px;left:0;
  width:100%;height:100%;
  z-index:200;
  background:var(--bg,#0e1a23);
  overflow:hidden;
  flex-direction:column;
  box-sizing:border-box;
  padding:0 0 16px;
}
#casePlay:not(.hidden){display:flex!important;}
#casePlay .reelbox{width:100%;}
#casePlay{max-width:100%;width:100%;}
.case-play__hdr{display:flex;align-items:center;justify-content:flex-start;gap:0;margin:0;padding:0;height:36px;}
#casePlay .reelbox{width:100%;max-width:var(--app-width);margin-top:8px;margin-bottom:0;overflow:hidden;}
.back{background:#0e1b2a;border:1px solid var(--line);color:var(--text);padding:6px 10px;border-radius:10px}
#btnBack{padding:0!important;margin:0!important;}
.reelbox{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;height:148px;overflow:hidden;margin:0 auto;display:flex;align-items:center;justify-content:flex-start}
.track{display:flex;gap:12px;height:120px;align-items:center;will-change:transform}
.divider{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#1a2332;transform:translateX(-0.5px);z-index:5;box-shadow:0 0 4px rgba(26,35,50,.4)}
.cell{position:relative;flex:0 0 148px;height:120px;background:#0e1b2a;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px}
.cell .emo{width:70px;height:70px;object-fit:contain;margin-top:auto}
.price-pill{display:flex;align-items:center;gap:6px;border:1px solid #2a3952;background:#0e1b2a;border-radius:999px;padding:4px 10px;font-weight:800;margin-top:auto;margin-bottom:2px;font-size:11px}
.price-pill .star{color:#ffd36b}
.cell.winter-cell{background:transparent;border:none;padding:0;overflow:hidden;margin:0}
.cell.winter-cell .emo{width:148px;height:120px;object-fit:cover;margin:0;border-radius:12px;display:block;image-rendering:crisp-edges}
.cell.gold-cell{background:#0e1b2a;border:1px solid var(--line);border-radius:12px;padding:15px;display:flex;align-items:center;justify-content:center}
.cell.gold-cell .emo{width:110px;height:90px;object-fit:contain}
.cell.fullsize-cell{background:transparent;border:none;padding:0;overflow:hidden;margin:0}
.cell.fullsize-cell .emo{width:140px;height:115px;object-fit:cover;margin:0;border-radius:12px;display:block;image-rendering:crisp-edges}
.cell.gold-case{background:#0f1a26;border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;align-items:center;justify-content:center}
.cell.gold-case .emo{width:100px;height:82px;object-fit:contain;margin:0;border-radius:8px}
.cell.winter-cell .price-pill{display:none}
.spin-btn{display:block;width:100%;margin:12px 0;background:var(--primary);color:#fff;border:none;border-radius:12px;padding:12px 14px;font-weight:700}
.case-subtitle{display:flex;align-items:center;justify-content:center;gap:10px;margin:24px 0 8px;color:#9fb7d1;font-weight:700;letter-spacing:.2px}
.case-subtitle::before,.case-subtitle::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#2b3e57)}
.case-subtitle::after{background:linear-gradient(270deg,transparent,#2b3e57)}
/* pool-row.cards — см. POOL CARDS FINAL */



/* pool-card — см. POOL CARDS FINAL */



.pc-tooltip{display:none;position:absolute;top:50%;right:calc(100% + 8px);transform:translateY(-50%);background:#000;color:#fff;padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600;white-space:nowrap;z-index:9999;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.8)}
.pc-tooltip.show{display:block!important}
.pc-i:hover .pc-tooltip{display:block}




.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;margin:12px 0}
.profile-card{display:flex;gap:12px;align-items:center}
.avatar{width:64px;height:64px;border-radius:50%;border:4px solid #243a62;box-shadow:0 0 18px 2px rgba(144,184,255,.55) inset,0 0 12px rgba(144,184,255,.25)}
.uname{font-weight:800}
.wallet.small{margin:4px 0 6px;display:flex;gap:6px;align-items:center}




.tabs-line{display:flex;gap:8px;padding:8px 0;margin:0 0 4px}
.chip{background:#102132;border:1px solid var(--line);color:var(--text);padding:8px 12px;border-radius:999px}
.chip.active{outline:2px solid var(--brand)}
.pane{display:none}
.pane.active{display:block}
.primary{background:var(--primary);color:#fff;border:none;border-radius:12px;padding:10px 12px;transition:filter .15s ease}
.primary:hover{filter:brightness(1.08)}
.primary.wide{display:block;width:calc(100% - 24px);max-width:460px;margin:12px auto;text-align:center}

/* ✅ НОВОЕ: Обновленные стили для подарков с кнопкой продажи */
.wins .win{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:8px 0;gap:14px;min-height:88px;transition:all .3s cubic-bezier(0.4,0,0.2,1);cursor:pointer;position:relative;overflow:hidden}
.wins .win::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(144,184,255,.1),transparent);transition:left .5s ease}
.wins .win:hover::before{left:100%}
.wins .win:hover{transform:translateY(-3px);border-color:rgba(144,184,255,.6);box-shadow:0 4px 16px rgba(0,0,0,.3),0 0 0 1px rgba(144,184,255,.3)}
.win-content{display:flex;align-items:center;gap:14px;flex:1}
.win-left{display:flex;flex-direction:column;align-items:center;gap:6px}
.win-img{width:60px;height:60px;object-fit:contain;border-radius:8px;flex-shrink:0;transition:transform .3s ease}
.wins .win:hover .win-img{transform:scale(1.08) rotate(2deg)}
.win-date{font-size:11px;color:#64748b;line-height:1.3;text-align:center;font-weight:500}
.win-info{display:flex;flex-direction:column;gap:4px}
.win-rarity{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;line-height:1.2}
.win-rarity.common{color:#9bb3c8}
.win-rarity.rare{color:#59b6ff}
.win-rarity.epic{color:#c88cff}
.win-rarity.legendary{color:#ffd36b}
.win-price{display:flex;align-items:center;gap:3px;font-size:20px;font-weight:800;color:#ffd36b;line-height:1.1}
.win-sell-btn{background:#2ea043;color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;cursor:pointer;transition:all .3s cubic-bezier(0.4,0,0.2,1);flex-shrink:0;white-space:nowrap;position:relative;overflow:hidden}
.win-sell-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.3);transform:translate(-50%,-50%);transition:width .5s,height .5s}
.win-sell-btn:hover::before{width:300px;height:300px}
.win-sell-btn:hover{background:#26a641;transform:translateY(-2px);box-shadow:0 4px 12px rgba(46,160,67,.4)}
.win-sell-btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(46,160,67,.3)}

.scroll-y{max-height:calc(var(--tg-height) - 260px);overflow-y:auto;scrollbar-width:none}
.scroll-y::-webkit-scrollbar{display:none}
#winsList{max-height:none;overflow-y:visible}
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(4px)}
.modal-card{background:linear-gradient(135deg,#1a2942 0%,#0d1821 100%);border:2px solid rgba(144,184,255,.3);border-radius:18px;padding:0;text-align:center;width:240px;box-shadow:0 20px 60px rgba(0,0,0,.6);overflow:hidden;position:relative;display:flex;flex-direction:column;align-items:center}
.modal-card.no-border{border:none;background:#0b1622}
.modal-emo{width:240px;height:240px;object-fit:cover;display:block;margin:0;border-radius:18px 18px 0 0;image-rendering:crisp-edges}
.modal-emo.gold-modal{width:160px;height:160px;object-fit:contain;margin:40px auto 0;border-radius:12px}

/* ✅ НОВОЕ: Full-size изображение */
.modal-emo.full-size{width:min(90vw,400px);height:min(90vw,400px);margin:0;padding:0;object-fit:contain;border-radius:18px 18px 0 0;display:block;image-rendering:auto;image-rendering:crisp-edges;image-rendering:-webkit-optimize-contrast}

.modal-title{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:rgba(11,22,34,.95);backdrop-filter:blur(10px);border:2px solid rgba(255,211,107,.6);border-radius:12px;padding:6px 14px;display:flex;gap:5px;align-items:center;justify-content:center;font-size:16px;font-weight:800;box-shadow:0 4px 20px rgba(255,211,107,.3);z-index:10}
.modal-star{font-size:14px;color:#ffd36b}
#modalPrice{color:#ffd36b}
.modal-card .muted{display:none}
#modal.hidden{display:none}

/* ✅ НОВОЕ: Модалка подтверждения продажи */
.sell-confirm-card{background:linear-gradient(135deg,#1a2942 0%,#0d1821 100%);border:2px solid rgba(144,184,255,.3);border-radius:18px;padding:20px;text-align:center;width:min(90vw,320px);box-shadow:0 20px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:16px;align-items:center}
.sell-header{font-size:18px;font-weight:800;color:var(--text)}
.sell-img{width:240px;height:240px;object-fit:contain;border-radius:12px;margin:0;padding:0}
.sell-info{display:flex;flex-direction:column;gap:8px;width:100%}
.sell-price{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#0e1b2a;border:1px solid var(--line);border-radius:10px}
.sell-price.earn{border-color:#16a34a;background:rgba(22,163,74,.1)}
.sell-price.earn span:last-child{color:#22c55e;font-weight:800}
.sell-buttons{display:flex;gap:10px;width:100%}
.sell-btn{flex:1;padding:10px 16px;border-radius:10px;font-weight:700;transition:filter .15s ease;border:1px solid var(--line)}
.sell-btn.cancel{background:#0e1b2a;color:var(--text)}
.sell-btn.confirm{background:#2ea043;color:#fff;border-color:#2ea043}
.sell-btn:hover{filter:brightness(1.1)}
.sell-btn:active{transform:translateY(1px)}

#fx{position:fixed;inset:0;pointer-events:none;z-index:1}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:10000;background:rgba(14,27,42,.88);color:#e9f3ff;border:1px solid #2a3648;border-radius:12px;padding:10px 14px;box-shadow:0 6px 24px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;max-width:calc(var(--app-width) - 24px);width:max-content;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.foot{padding:18px 12px 90px;text-align:center;color:#8aa4bd;border-top:1px solid var(--line);background:#0b1622;max-width:var(--app-width);margin:0 auto}
/* Модалка приглашения друзей */
.invite-card{background:linear-gradient(135deg,#1a2942 0%,#0d1821 100%);border:2px solid rgba(144,184,255,.3);border-radius:18px;padding:24px;width:min(90vw,360px);box-shadow:0 20px 60px rgba(0,0,0,.6);position:relative}
.modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:20px;cursor:pointer;transition:all .2s;display:grid;place-items:center}
.modal-close:hover{background:rgba(255,255,255,.2);transform:scale(1.1)}
.invite-header{font-size:22px;font-weight:800;color:var(--text);text-align:center;margin-bottom:8px}
.invite-subtitle{font-size:14px;color:#64748b;text-align:center;margin-bottom:20px}
.invite-stats{display:flex;gap:12px;margin-bottom:20px}
.invite-stat{flex:1;background:#0e1b2a;border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.stat-value{font-size:28px;font-weight:800;color:#ffd36b;margin-bottom:4px}
.stat-label{font-size:11px;color:#64748b;font-weight:700;letter-spacing:0.5px}
.invite-rewards{background:#0e1b2a;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:20px;display:flex;flex-direction:column;gap:12px}
.reward-item{display:flex;align-items:center;gap:12px}
.reward-icon{font-size:32px;width:48px;height:48px;display:grid;place-items:center;background:rgba(255,211,107,.1);border-radius:12px}
.reward-info{flex:1}
.reward-text{font-size:12px;color:#64748b;margin-bottom:2px}
.reward-amount{font-size:18px;font-weight:800;color:#22c55e}
.invite-link-block{display:flex;gap:8px;margin-bottom:12px}
.invite-link-input{flex:1;background:#0e1b2a;border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--text);font-size:13px;font-family:monospace}
.invite-copy-btn{background:#0e1b2a;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px 16px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap}
.invite-copy-btn:hover{background:#1a2942;border-color:rgba(144,184,255,.5)}
.invite-share-btn{width:100%;background:#2ea043;color:#fff;border:none;border-radius:10px;padding:14px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.invite-share-btn:hover{background:#26a641;transform:translateY(-2px);box-shadow:0 4px 12px rgba(46,160,67,.4)}
.invite-share-btn:active{transform:translateY(0)}
.tg-icon{font-size:18px}



/* Указатель на барабане - ТОЛЬКО ТОНКАЯ ЛИНИЯ */
.reel-indicator{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:3px;z-index:100;pointer-events:none}
.indicator-line{position:absolute;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#3b82f6 0%,#60a5fa 50%,#3b82f6 100%);box-shadow:0 0 10px rgba(59,130,246,.5),0 0 5px rgba(96,165,250,.7);border-radius:1.5px}

/* ═══════════════════════════════════════════════════════════════
   ПОДТАБЫ ИГР (Кейсы / Орёл и Решка)
   ═══════════════════════════════════════════════════════════════ */
.game-tabs{display:flex;gap:8px;padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.game-chip{background:#0e1b2a;border:1px solid var(--line);color:var(--text);padding:10px 20px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}
.game-chip:hover{background:#1a2942;border-color:rgba(144,184,255,.5)}
.game-chip.active{background:linear-gradient(135deg,#3b82f6,#2563eb);border-color:#3b82f6;color:#fff;box-shadow:0 0 20px rgba(59,130,246,.4)}
.game-section{display:none;padding:0;position:relative}
.game-section.active{display:block!important;width:100%;padding:0}

/* Фон для Mines на ВСЮ страницу БЕЗ обрезов */
#slotsGame {
  position: relative;
  min-height: var(--tg-height);
  width: 100%;
  margin: 0;
  padding: 26px 0 0;
  background: transparent;
}

#slotsGame::before {
  content: '';
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--app-width), 100vw);
  height: 100%;
  background-image: url('/images/mines-bg.png');
  background-size: cover;
  background-position: center -55px;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

#slotsGame > * {
  position: relative;
  z-index: 1;
}
#crashGame.active{display:block!important;width:100%;padding:10px 0 16px;position:relative}

/* ═══════════════════════════════════════════════════════════════
   COINFLIP - ОРЁЛ И РЕШКА - PREMIUM CASINO EDITION
   ═══════════════════════════════════════════════════════════════ */
.coinflip-container{max-width:600px;margin:0 auto;padding:20px;position:relative;overflow:visible}

/* Фоновые частицы */
.coinflip-container::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(212,165,116,.1) 0%,transparent 50%),radial-gradient(circle at 80% 50%,rgba(59,130,246,.1) 0%,transparent 50%);pointer-events:none;z-index:0;animation:pulse 4s infinite}

@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

.coinflip-header{text-align:center;margin-bottom:32px;position:relative;z-index:1}
.coinflip-header h2{font-size:32px;font-weight:900;margin:0 0 12px;background:linear-gradient(135deg,#d4a574 0%,#c49b6a 50%,#d4a574 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s infinite;background-size:200% 100%}

@keyframes shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.coinflip-subtitle{font-size:15px;color:#94a3b8;margin:0;font-weight:500}

/* Выбор стороны - PREMIUM */
.coin-choices{display:flex;gap:16px;margin-bottom:32px;position:relative;z-index:1}

.coin-choice{flex:1;background:transparent;border:none;padding:0;cursor:pointer;transition:all .4s cubic-bezier(0.4,0,0.2,1)}

.choice-card{background:linear-gradient(135deg,rgba(15,26,38,.85),rgba(13,24,33,.9));border:2px solid rgba(59,130,246,.25);border-radius:20px;padding:28px 20px 20px;transition:all .4s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}

.choice-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(59,130,246,.5),transparent);opacity:0;transition:opacity .3s}

.coin-choice:hover .choice-card{transform:translateY(-6px) scale(1.03);border-color:rgba(59,130,246,.5);box-shadow:0 12px 35px rgba(59,130,246,.25),0 0 50px rgba(59,130,246,.15)}

/* ОРЁЛ - красная рамка при наведении */
.coin-choice[data-side="heads"]:hover .choice-card{
  border-color:rgba(239, 68, 68, 0.8);
  box-shadow:0 12px 35px rgba(239, 68, 68, 0.4), 0 0 50px rgba(239, 68, 68, 0.3);
}

/* РЕШКА - зелёная рамка при наведении */
.coin-choice[data-side="tails"]:hover .choice-card{
  border-color:rgba(34, 197, 94, 0.8);
  box-shadow:0 12px 35px rgba(34, 197, 94, 0.4), 0 0 50px rgba(34, 197, 94, 0.3);
}

.coin-choice:hover .choice-card::before{opacity:1}

.coin-choice.selected .choice-card{background:linear-gradient(135deg,rgba(212,165,116,.12),rgba(196,155,106,.15));border-color:#d4a574;border-width:3px;box-shadow:0 0 30px rgba(212,165,116,.35),0 0 60px rgba(212,165,116,.2),inset 0 0 25px rgba(212,165,116,.08);transform:scale(1.06)}

/* ОРЁЛ выбран - КРАСНЫЙ фон */
.coin-choice[data-side="heads"].selected .choice-card{
  background:linear-gradient(135deg,rgba(239, 68, 68, 0.12),rgba(220, 38, 38, 0.15));
  border-color:rgba(239, 68, 68, 0.9);
  box-shadow:0 0 30px rgba(239, 68, 68, 0.4), 0 0 60px rgba(239, 68, 68, 0.3), inset 0 0 25px rgba(239, 68, 68, 0.1);
}

/* РЕШКА выбрана - ЗЕЛЁНЫЙ фон */
.coin-choice[data-side="tails"].selected .choice-card{
  background:linear-gradient(135deg,rgba(34, 197, 94, 0.12),rgba(22, 163, 74, 0.15));
  border-color:rgba(34, 197, 94, 0.9);
  box-shadow:0 0 30px rgba(34, 197, 94, 0.4), 0 0 60px rgba(34, 197, 94, 0.3), inset 0 0 25px rgba(34, 197, 94, 0.1);
}

.coin-choice.selected .choice-card::before{background:linear-gradient(90deg,transparent,rgba(212,165,116,.6),transparent);opacity:1}

.choice-icon{width:80px;height:80px;margin:0 auto 16px;transition:all .4s}

.coin-choice:hover .choice-icon{transform:scale(1.15) rotate(5deg)}

.coin-choice.selected .choice-icon{animation:choiceBounce .6s cubic-bezier(0.4,0,0.2,1)}

@keyframes choiceBounce{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-5deg)}70%{transform:scale(1.1) rotate(3deg)}100%{transform:scale(1)}}

.choice-svg{width:100%;height:100%;color:rgba(148,163,184,.8);transition:all .3s;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}

/* Стили для PNG картинок выбора */
.choice-coin-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all .3s;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
}

.coin-choice:hover .choice-svg{color:rgba(96,165,250,.9)}

.coin-choice:hover .choice-coin-img{
  transform: scale(1.05);
}

/* Убираем цветную подсветку с картинки - она будет только у рамки */
.coin-choice[data-side="heads"]:hover .choice-coin-img{
  transform: scale(1.1);
}

.coin-choice[data-side="tails"]:hover .choice-coin-img{
  transform: scale(1.1);
}

.coin-choice.selected .choice-svg{color:rgba(212,165,116,.95)}

.coin-choice.selected .choice-coin-img{
  filter: drop-shadow(0 8px 20px rgba(212,165,116,.6));
  transform: scale(1.1);
}

.coin-label{font-size:16px;font-weight:900;color:rgba(148,163,184,.9);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;transition:all .3s}

.coin-choice:hover .coin-label{color:rgba(96,165,250,1)}

.coin-choice.selected .coin-label{color:#d4a574;font-size:17px}

.choice-badge{font-size:10px;font-weight:800;color:rgba(100,116,139,.7);text-transform:uppercase;letter-spacing:1.5px;transition:all .3s}

.coin-choice:hover .choice-badge{color:rgba(59,130,246,.8)}

.coin-choice.selected .choice-badge{color:rgba(212,165,116,.8)}

/* 3D монета - UPGRADED */
.coin-display{height:240px;display:flex;align-items:center;justify-content:center;margin-bottom:32px;perspective:1200px;position:relative;z-index:1}

/* ═══════════════════════════════════════════════════════════════
   3D МОНЕТА С ОБЪЁМОМ - ВРАЩЕНИЕ НА МЕСТЕ
   ═══════════════════════════════════════════════════════════════ */

.coin-display {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 230px;
  perspective: 500px;
}

#coinCanvas {
  display: block;
  width: 220px;
  height: 220px;
}

#coinWrap3D {
  width: 160px;
  height: 160px;
  display: block;
}

#coinWrap3D canvas {
  display: block;
  width: 160px !important;
  height: 160px !important;
}

/* Ставка - PREMIUM */
.coin-bet{background:linear-gradient(135deg,rgba(15,26,38,.9),rgba(13,24,33,.95));border:1px solid rgba(59,130,246,.2);border-radius:20px;padding:24px;margin-bottom:20px;box-shadow:0 4px 20px rgba(0,0,0,.3);position:relative;z-index:1}

.coin-bet::before{content:'';position:absolute;inset:0;border-radius:20px;background:linear-gradient(135deg,rgba(59,130,246,.05),rgba(139,92,246,.05));opacity:0;transition:opacity .3s;pointer-events:none;z-index:0}

.coin-bet:hover::before{opacity:1}

.bet-label{display:block;font-size:13px;font-weight:800;color:#94a3b8;margin-bottom:14px;text-transform:uppercase;letter-spacing:1px}

.bet-input-group{display:flex;align-items:center;gap:10px;margin-bottom:14px;max-width:100%;overflow:hidden;position:relative;z-index:2}

.bet-btn{width:46px;height:46px;background:linear-gradient(135deg,#1e3a5f,#0f1a26);border:1px solid rgba(59,130,246,.3);border-radius:12px;color:#3b82f6;font-size:22px;font-weight:900;cursor:pointer;transition:all .3s;flex-shrink:0;position:relative;overflow:hidden}

.bet-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(139,92,246,.2));opacity:0;transition:opacity .2s}

.bet-btn:hover{transform:scale(1.1);box-shadow:0 0 20px rgba(59,130,246,.4);border-color:#3b82f6}
.bet-btn:hover::before{opacity:1}
.bet-btn:active{transform:scale(0.95)}

.bet-input{flex:1;min-width:0;background:linear-gradient(135deg,#0e1b2a,#0a1219);border:2px solid rgba(212,165,116,.3);border-radius:12px;padding:12px 16px;color:#d4a574;font-size:20px;font-weight:900;text-align:center;transition:all .3s;-webkit-appearance:none;-moz-appearance:textfield;user-select:text;-webkit-user-select:text;pointer-events:auto;touch-action:manipulation}

.bet-input::-webkit-inner-spin-button,
.bet-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

.bet-input:focus{outline:none;border-color:#d4a574;box-shadow:0 0 20px rgba(212,165,116,.3)}

.bet-currency{font-size:22px;color:#d4a574;font-weight:900;filter:drop-shadow(0 0 8px rgba(212,165,116,.5))}

.bet-presets{display:flex;gap:10px}
.preset-btn{flex:1;background:linear-gradient(135deg,#1e3a5f,#0f1a26);border:1px solid rgba(59,130,246,.2);color:#60a5fa;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}

.preset-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(139,92,246,.2));opacity:0;transition:opacity .2s}

.preset-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(59,130,246,.3);border-color:#3b82f6}
.preset-btn:hover::before{opacity:1}

/* Множитель - PREMIUM */
.coin-multiplier{text-align:center;margin-bottom:20px;padding:16px 20px;background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(139,92,246,.15));border:2px solid rgba(59,130,246,.3);border-radius:16px;box-shadow:0 0 30px rgba(59,130,246,.2);position:relative;z-index:1}

.multi-label{font-size:13px;color:#94a3b8;margin-right:10px;font-weight:700;text-transform:uppercase}
.multi-value{font-size:32px;font-weight:900;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 12px rgba(59,130,246,.5))}

/* Кнопка подбросить - PREMIUM */
.flip-btn{width:100%;background:linear-gradient(135deg,#d4a574,#c49b6a);color:#0a1219;border:none;border-radius:16px;padding:20px;font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:2px;cursor:pointer;transition:all .4s;box-shadow:0 6px 20px rgba(212,165,116,.35),0 0 40px rgba(212,165,116,.2);margin-bottom:28px;position:relative;overflow:hidden;z-index:1}

.flip-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);transform:translateX(-100%) skewX(-15deg);transition:transform .6s}

.flip-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 10px 30px rgba(212,165,116,.45),0 0 60px rgba(212,165,116,.25)}
.flip-btn:hover::before{transform:translateX(100%) skewX(-15deg)}
.flip-btn:active{transform:translateY(-2px) scale(0.98)}
.flip-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none}

/* Статистика - PREMIUM */
.coin-stats{display:flex;gap:14px;margin-bottom:28px;position:relative;z-index:1}
.stat-item{flex:1;background:linear-gradient(135deg,rgba(15,26,38,.8),rgba(13,24,33,.9));border:1px solid rgba(59,130,246,.2);border-radius:16px;padding:20px 16px;text-align:center;transition:all .3s;position:relative;overflow:hidden}

.stat-item::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(139,92,246,.1));opacity:0;transition:opacity .3s}

.stat-item:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(59,130,246,.3);border-color:rgba(59,130,246,.5)}
.stat-item:hover::before{opacity:1}

.stat-value{font-size:28px;font-weight:900;color:#d4a574;margin-bottom:6px;filter:drop-shadow(0 0 12px rgba(212,165,116,.4))}
.stat-label{font-size:10px;color:#64748b;font-weight:800;text-transform:uppercase;letter-spacing:1px}

/* История - PREMIUM */
.coin-history{background:linear-gradient(135deg,rgba(15,26,38,.8),rgba(13,24,33,.9));border:1px solid rgba(59,130,246,.2);border-radius:20px;padding:20px;position:relative;z-index:1}
.history-header{font-size:13px;font-weight:800;color:var(--text);margin-bottom:14px;text-transform:uppercase;letter-spacing:1px}
.history-list{max-height:220px;overflow-y:auto;padding-right:8px}
.history-list::-webkit-scrollbar{width:6px}
.history-list::-webkit-scrollbar-track{background:rgba(0,0,0,.2);border-radius:3px}
.history-list::-webkit-scrollbar-thumb{background:rgba(59,130,246,.3);border-radius:3px}
.history-list::-webkit-scrollbar-thumb:hover{background:rgba(59,130,246,.5)}

.history-item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:rgba(14,27,42,.6);border:1px solid rgba(59,130,246,.15);border-radius:12px;margin-bottom:10px;transition:all .3s;position:relative;overflow:hidden}

.history-item::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(59,130,246,.05),transparent);opacity:0;transition:opacity .3s}

.history-item:hover{transform:translateX(4px);border-color:rgba(59,130,246,.3)}
.history-item:hover::before{opacity:1}

.history-item.win{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.05)}
.history-item.win::before{background:linear-gradient(90deg,transparent,rgba(34,197,94,.05),transparent)}

.history-item.loss{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.05)}
.history-item.loss::before{background:linear-gradient(90deg,transparent,rgba(239,68,68,.05),transparent)}

.history-result{font-size:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.history-icon{display:inline-block;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#d4a574,#b8935f);color:#fff;font-weight:900;font-size:20px;line-height:36px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 0 10px rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.3)}

/* PNG картинки в истории */
.history-coin-img{
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
  border-radius: 50%;
}
.history-info{flex:1;margin:0 14px}
.history-bet{font-size:11px;color:#64748b;font-weight:600;text-transform:uppercase}
.history-outcome{font-size:16px;font-weight:900}
.history-outcome.win{color:#22c55e;filter:drop-shadow(0 0 8px rgba(34,197,94,.3))}
.history-outcome.loss{color:#ef4444;filter:drop-shadow(0 0 8px rgba(239,68,68,.3))}

/* ═══════════════════════════════════════════════════════════════
   БУРГЕР МЕНЮ
   ═══════════════════════════════════════════════════════════════ */
.menu-burger{background:none;border:none;color:var(--text);font-size:28px;padding:8px;cursor:pointer;line-height:1;transition:transform .2s}
.menu-burger:hover{transform:scale(1.1)}
.menu-burger:active{transform:scale(0.95)}

/* ═══════════════════════════════════════════════════════════════
   БОКОВОЕ МЕНЮ
   ═══════════════════════════════════════════════════════════════ */
.side-menu{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(var(--app-width),100vw);height:var(--tg-height);z-index:9999;pointer-events:none;transition:opacity .3s}
.side-menu:not(.open){opacity:0}
.side-menu.open{pointer-events:all;opacity:1}

/* Затемнение */
.side-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);transition:opacity .3s}
.side-menu:not(.open) .side-overlay{opacity:0}

/* Панель */
.side-panel{position:absolute;top:0;left:0;width:280px;height:100%;background:linear-gradient(180deg,#1a2942 0%,#0d1821 100%);box-shadow:4px 0 30px rgba(0,0,0,0.5);overflow-y:auto;transition:transform .3s cubic-bezier(0.4,0,0.2,1)}
.side-menu:not(.open) .side-panel{transform:translateX(-100%)}

/* Header */
.side-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:inherit;z-index:1}
.side-title{font-size:20px;font-weight:800;color:var(--text)}
.side-close{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.1);border:none;color:var(--text);font-size:20px;cursor:pointer;transition:all .2s;display:grid;place-items:center}
.side-close:hover{background:rgba(255,255,255,0.2);transform:scale(1.1)}

/* Секции */
.side-section{padding:20px 0}
.side-section-title{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:1px;padding:0 20px 12px;border-bottom:1px solid var(--line);margin-bottom:8px}

/* Пункты меню */
.side-item{width:100%;display:flex;align-items:center;gap:12px;padding:14px 20px;background:none;border:none;color:var(--text);font-size:16px;cursor:pointer;transition:all .2s;text-align:left;position:relative}
.side-item:hover{background:rgba(59,130,246,0.1);padding-left:24px}
.side-item.active{background:rgba(59,130,246,0.15);border-left:3px solid #3b82f6;color:#60a5fa;font-weight:700}
.side-item.disabled{opacity:0.5;cursor:not-allowed}
.side-item.disabled:hover{background:none;padding-left:20px}
.side-icon{font-size:24px;width:32px;text-align:center}
.side-label{flex:1;font-weight:600}
.side-badge{background:#3b82f6;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;text-transform:uppercase}

/* Убираем старый bottombar */
.bottombar{display:none}

/* Убираем подтабы игр */
.game-tabs{display:none}

/* ═══════════════════════════════════════════════════════════════
   CRASH GAME - РАКЕТА
   ═══════════════════════════════════════════════════════════════ */
.crash-container{max-width:600px;margin:0 auto;padding:20px;position:relative}

.crash-header{text-align:center;margin-bottom:24px}
.crash-header h2{font-size:32px;font-weight:900;margin:0 0 8px;background:linear-gradient(135deg,#e53e3e,#c53030);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.crash-subtitle{font-size:15px;color:#94a3b8;margin:0;font-weight:500}

/* График */
.crash-display{position:relative;height:350px;background:linear-gradient(135deg,rgba(15,26,38,.9),rgba(13,24,33,.95));border:2px solid rgba(229,62,62,.3);border-radius:20px;margin-bottom:24px;overflow:hidden}

.crash-canvas{width:100%;height:100%;display:block}

.crash-multiplier{
  position:absolute;
  top:12px;
  left:12px;
  font-size:28px;
  font-weight:900;
  color:#fbbf24;
  text-shadow:0 2px 12px rgba(0,0,0,.5), 0 0 24px rgba(251,191,36,.6);
  pointer-events:none;
  z-index:10;
  padding:8px 16px;
  background:rgba(15,23,42,.9);
  border-radius:10px;
  border:2px solid rgba(251,191,36,.3);
  max-width:140px;
  text-align:center;
}

.crash-status{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:16px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:2px;padding:8px 20px;background:rgba(0,0,0,.6);border-radius:12px;backdrop-filter:blur(8px)}

/* Ракета */
.crash-rocket{position:absolute;width:60px;height:60px;transition:all .1s linear;z-index:3;filter:drop-shadow(0 4px 12px rgba(229,62,62,.6))}

.rocket-svg{width:100%;height:100%}

#rocketFlame{animation:flicker .15s infinite}

@keyframes flicker{0%,100%{opacity:1}50%{opacity:0.6}}

/* Управление */
.crash-controls{margin-bottom:24px}

.crash-bet-panel{background:linear-gradient(135deg,rgba(15,26,38,.9),rgba(13,24,33,.95));border:1px solid rgba(59,130,246,.2);border-radius:20px;padding:24px;margin-bottom:16px}

.crash-auto-cashout{background:linear-gradient(135deg,rgba(15,26,38,.8),rgba(13,24,33,.9));border:1px solid rgba(139,92,246,.2);border-radius:16px;padding:20px;margin-bottom:16px}

.auto-cashout-group{display:flex;align-items:center;gap:10px;margin-top:12px}

.auto-input{flex:1;background:linear-gradient(135deg,#0e1b2a,#0a1219);border:2px solid rgba(139,92,246,.3);border-radius:12px;padding:12px 16px;color:#a78bfa;font-size:20px;font-weight:900;text-align:center;transition:all .3s;-webkit-appearance:none;user-select:text;pointer-events:auto}

.auto-input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 20px rgba(139,92,246,.3)}

.auto-label{font-size:22px;color:#a78bfa;font-weight:900}

.crash-btn{width:100%;background:linear-gradient(135deg,#e53e3e,#c53030);color:#fff;border:none;border-radius:16px;padding:20px;font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:2px;cursor:pointer;transition:all .4s;box-shadow:0 6px 20px rgba(229,62,62,.4),0 0 40px rgba(229,62,62,.2);position:relative;overflow:hidden}

.crash-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);transform:translateX(-100%) skewX(-15deg);transition:transform .6s;pointer-events:none}

.crash-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 10px 30px rgba(229,62,62,.5),0 0 60px rgba(229,62,62,.3)}
.crash-btn:hover::before{transform:translateX(100%) skewX(-15deg)}
.crash-btn:active{transform:translateY(-2px) scale(0.98)}
.crash-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none}

.crash-btn.cashout{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 6px 20px rgba(34,197,94,.4),0 0 40px rgba(34,197,94,.2)}

.crash-btn.cashout:hover{box-shadow:0 10px 30px rgba(34,197,94,.5),0 0 60px rgba(34,197,94,.3)}

/* Статистика */
.crash-stats{display:flex;gap:14px;margin-bottom:24px}

/* История */
.crash-history{background:linear-gradient(135deg,rgba(15,26,38,.8),rgba(13,24,33,.9));border:1px solid rgba(59,130,246,.2);border-radius:20px;padding:20px}

.crash-history-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

.crash-history-item{padding:10px 16px;border-radius:10px;font-weight:900;font-size:14px;transition:all .3s;cursor:pointer;border:2px solid}

.crash-history-item.win{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.4);color:#22c55e}
.crash-history-item.loss{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.4);color:#ef4444}

.crash-history-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3)}

.crash-history-item.big-win{background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(245,158,11,.15));border-color:#d4a574;color:#fbbf24;animation:pulse .8s infinite}

/* Активная игровая секция */

/* Изначально все игровые секции скрыты */

/* ═══════════════════════════════════════════════════════════════
   CRASH GAME - РАКЕТА
   ═══════════════════════════════════════════════════════════════ */

.crash-container{
  max-width:600px;
  margin:0 auto;
  padding:20px;
}

.crash-header{
  text-align:center;
  margin-bottom:24px;
}

.crash-header h2{
  font-size:32px;
  font-weight:900;
  margin:0 0 8px;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.crash-subtitle{
  font-size:15px;
  color:#94a3b8;
  margin:0;
  font-weight:500;
}

/* График */
.crash-display{
  position:relative;
  background:linear-gradient(135deg,rgba(30,64,175,.2),rgba(124,58,237,.2));
  border:2px solid var(--line);
  border-radius:20px;
  margin-bottom:24px;
  overflow:hidden;
  min-height:350px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.crash-canvas{
  width:100%;
  height:100%;
  display:block;
}


.crash-status{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(15,23,42,.95);
  color:#94a3b8;
  padding:8px 20px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  border:1px solid var(--line);
}

/* Управление */
.crash-controls{
  margin-bottom:16px;
}

.crash-buttons{
  display:flex;
  gap:12px;
  margin-bottom:24px;
}

.crash-btn{
  flex:1;
  padding:16px;
  border-radius:16px;
  font-size:18px;
  font-weight:900;
  border:none;
  cursor:pointer;
  transition:all .3s;
  text-transform:uppercase;
  letter-spacing:1px;
}

.crash-btn-start{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
  box-shadow:0 4px 20px rgba(59,130,246,.4);
}

.crash-btn-start:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(59,130,246,.6);
}

.crash-btn-start:active{
  transform:translateY(0);
}

.crash-btn-start:disabled{
  background:#1e293b;
  color:#475569;
  cursor:not-allowed;
  box-shadow:none;
}

.crash-btn-cashout{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
  box-shadow:0 4px 20px rgba(34,197,94,.4);
  animation:pulse-glow 1.5s ease-in-out infinite;
}

.crash-btn-cashout:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 30px rgba(34,197,94,.6);
}

@keyframes pulse-glow{
  0%,100%{box-shadow:0 4px 20px rgba(34,197,94,.4)}
  50%{box-shadow:0 4px 30px rgba(34,197,94,.7),0 0 40px rgba(34,197,94,.3)}
}

/* История */
.crash-history{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
}

.crash-history-list{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.crash-history-item{
  background:#0e1b2a;
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 16px;
  font-weight:900;
  font-size:16px;
  min-width:80px;
  text-align:center;
}

.crash-history-item.crash-win{
  background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(22,163,74,.15));
  border-color:rgba(34,197,94,.3);
  color:#22c55e;
}

.crash-history-item.crash-loss{
  background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(220,38,38,.15));
  border-color:rgba(239,68,68,.3);
  color:#ef4444;
}

.crash-history-item.crash-mega{
  background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(245,158,11,.2));
  border-color:rgba(251,191,36,.4);
  color:#fbbf24;
  box-shadow:0 0 20px rgba(251,191,36,.3);
}

/* ======================================
   AVIATOR STYLE CRASH
   ====================================== */

/* ============ AVIATOR GAME STYLES ============ */
#aviator-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 4px 0 0;
}

#aviator-mid-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  position: relative;
}

#aviator-header {
  display: flex;
  width: calc(min(var(--app-width), 100vw));
  margin-left: calc(-1 * min(var(--app-width), 100vw) / 2 + 50%);
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
  position: relative;
  background: transparent;
  padding: 0 10px 0 44px;
  margin-top: -15px;
}

#aviator-last-counters {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow-x: auto;
  gap: 5px;
  flex: 1;
  scrollbar-width: none;
}
#aviator-last-counters::-webkit-scrollbar { display: none; }

#aviator-last-counters p {
  padding: 7px 14px;
  border-radius: 40px;
  border: none;
  font-size: 13px;
  font-weight: 800;
  margin: 0;
  white-space: nowrap;
  letter-spacing: 0.3px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

#aviator-history-btn {
  flex-shrink: 0;
  align-self: stretch;
  padding: 0 16px;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(74,127,232,0.85), rgba(42,82,184,0.85));
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 44px;
  box-shadow: 0 0 10px rgba(74,127,232,0.5);
}

#aviator-history-btn:active { opacity: 0.8; }

#aviator-history-panel {
  display: none;
  width: calc(min(var(--app-width), 100vw));
  margin-left: calc(-1 * min(var(--app-width), 100vw) / 2 + 50%);
  background: linear-gradient(180deg, rgba(14,20,48,0.98) 0%, rgba(8,12,32,0.98) 100%);
  border-top: 1px solid rgba(74,140,255,0.15);
  border-bottom: 1px solid rgba(74,140,255,0.1);
  padding: 12px;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) inset;
  position: relative;
  z-index: 5;
}

#aviator-history-full {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 130px;
  overflow-y: auto;
}

/* ── Капсулы истории (бар сверху) ── */
.aviator-blueBorder {
  background: linear-gradient(135deg, rgba(74,127,232,0.85), rgba(42,82,184,0.85));
  box-shadow: 0 0 10px rgba(74,127,232,0.5);
  border: 1px solid rgba(100,160,255,0.3);
}

.aviator-purpleBorder {
  background: linear-gradient(135deg, rgba(168,85,247,0.85), rgba(124,61,224,0.85));
  box-shadow: 0 0 10px rgba(168,85,247,0.5);
  border: 1px solid rgba(180,100,255,0.3);
}

.aviator-burgundyBorder {
  background: linear-gradient(135deg, rgba(244,63,106,0.85), rgba(194,48,96,0.85));
  box-shadow: 0 0 10px rgba(244,63,106,0.5);
  border: 1px solid rgba(255,80,120,0.3);
}

.aviator-orangeBorder {
  background: linear-gradient(135deg, rgba(245,158,66,0.85), rgba(192,120,48,0.85));
  box-shadow: 0 0 10px rgba(245,158,66,0.5);
  border: 1px solid rgba(255,180,80,0.3);
}

/* Общий стиль для всех капсул */
#aviator-last-counters p,
#aviator-history-full p {
  padding: 6px 13px;
  border-radius: 40px;
  font-size: 13px;
  font-weight: 800;
  margin: 0;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  letter-spacing: 0.3px;
}

/* Всплывающее уведомление (точно как в монетке) */
.aviator-toast {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(26, 29, 41, 0.95);
  border: 1px solid #2a2d3a;
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  color: #e5e7eb;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-out;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  backdrop-filter: blur(10px);
}

.aviator-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.aviator-toast.success,
.aviator-toast.error,
.aviator-toast.warning {
  background: rgba(26, 29, 41, 0.95);
  border: 1px solid #2a2d3a;
  color: #e5e7eb;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

#aviator-counterWrapper {
  position: relative;
  width: calc(min(var(--app-width), 100vw));
  margin-left: calc(-1 * min(var(--app-width), 100vw) / 2 + 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0;
  height: 480px;
  margin-top: 0;
  isolation: isolate;
}

#aviator-bg-image {
  position: absolute;
  width: 300%;
  height: 300%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

#aviator-bg-image::before {
  content: '';
  background: radial-gradient(circle at center, #2d1b4e 0%, #1a0f2e 50%, #0a0612 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: aviator-rotation 8s infinite linear;
  transform-origin: 50% 50%;
}

@keyframes aviator-rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#aviatorCanvas {
  width: 100%;
  max-width: 100%;
  height: 480px;
  border: 1px solid #2a2b2e;
  border-radius: 20px;
  z-index: 5;
  position: relative;
}

#aviator-counter {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 52px;
  font-family: Arial, sans-serif;
  font-weight: 900;
  color: #fff;
  z-index: 10;
  text-shadow:
    0 0 20px rgba(126,207,255,0.8),
    0 0 40px rgba(74,140,255,0.5),
    0 2px 4px rgba(0,0,0,0.8);
  letter-spacing: -1px;
}

#aviator-counter.hidden {
  display: none;
}

.aviator-timer {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.av-timer-seconds {
  font-size: 36px;
  font-family: Arial, sans-serif;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}

.av-timer-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

@keyframes pulse-timer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.aviator-timer.show {
  display: flex;
}

#aviator-bottom-wrapper {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
}

#aviator-input-wrapper {
  position: relative;
  width: 100%;
  min-width: 120px;
}

#aviator-bet-input {
  width: 100%;
  padding: 14px 45px 14px 18px;
  border: 3px solid #fff;
  border-radius: 24px;
  background: transparent;
  font-weight: 900;
  font-size: 18px;
  color: #fff;
  text-transform: uppercase;
}

#aviator-bet-input::-webkit-outer-spin-button,
#aviator-bet-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#aviator-bet-input[type=number] {
  -moz-appearance: textfield;
}

#aviator-bet-button {
  padding: 14px 24px;
  min-width: 120px;
  border-width: 0;
  border-radius: 24px;
  background-color: #fb024c;
  cursor: pointer;
  color: #ffffff;
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  transition: all 0.3s;
  white-space: nowrap;
}

#aviator-bet-button:active {
  transform: scale(0.95);
}

#aviator-bet-button.bet-placed {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 0 30px rgba(34, 197, 94, 0.6);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0%, 100% {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.8);
  }
}

#aviator-message {
  color: #fb024c;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  min-height: 24px;
}

#aviator-message-button {
  display: flex;
  flex-direction: column;
}

@media (max-width: 600px) {
  #aviator-wrapper {
    padding: 15px;
  }
  
  #aviator-counterWrapper,
  #aviatorCanvas {
    height: 220px;
  }
  
  #aviator-counter {
    font-size: 36px;
  }
  
  #aviator-bet-input,
  #aviator-bet-button {
    font-size: 15px;
    padding: 10px 20px;
  }
}
/* ═══════════════════════════════════════════════════════════════
   AUTO BET BUTTON
   ═══════════════════════════════════════════════════════════════ */
.aviator-auto-btn {
  padding: 14px 24px;
  min-width: 140px;
  border-width: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  cursor: pointer;
  color: #ffffff;
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  transition: all 0.3s;
  white-space: nowrap;
}

.aviator-auto-btn:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.aviator-auto-btn:active {
  transform: scale(0.98);
}

.aviator-auto-btn.active {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.6);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0%, 100% {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.8);
  }
}

/* ═══════════════════════════════════════════════════════════════
   AUTO CASHOUT
   ═══════════════════════════════════════════════════════════════ */
.aviator-auto-cashout {
  background: rgba(15, 26, 38, 0.6);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 20px;
  padding: 20px;
  margin-top: 20px;
  transition: all 0.3s;
}

.aviator-auto-cashout.active {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(15, 26, 38, 0.8);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
}

.auto-cashout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.auto-cashout-label {
  font-size: 15px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auto-cashout-value {
  font-size: 18px;
  font-weight: 900;
  color: #64748b;
  transition: all 0.3s;
}

.auto-cashout-value.active {
  color: #3b82f6;
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.auto-cashout-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.auto-cashout-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: rgba(100, 116, 139, 0.2);
  outline: none;
  transition: background 0.3s;
}

.auto-cashout-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
  transition: all 0.3s;
}

.auto-cashout-slider::-webkit-slider-thumb:hover {
  background: #2563eb;
  transform: scale(1.08);
}

.auto-cashout-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.auto-cashout-input {
  width: 100px;
  padding: 10px 14px;
  background: rgba(11, 22, 34, 0.8);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  transition: all 0.3s;
}

.auto-cashout-input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

.auto-cashout-input:disabled {
  opacity: 0.4;
  border-color: rgba(100, 116, 139, 0.2);
}

.auto-cashout-slider:disabled {
  opacity: 0.4;
}

.auto-cashout-slider:disabled::-webkit-slider-thumb {
  background: #64748b;
}

.auto-cashout-slider:disabled::-moz-range-thumb {
  background: #64748b;
}

.auto-cashout-multiplier {
  font-size: 20px;
  font-weight: 900;
  color: #3b82f6;
  margin-left: -6px;
}

.auto-cashout-progress {
  width: 100%;
  height: 4px;
  background: rgba(100, 116, 139, 0.2);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}

.progress-bar.reached {
  background: linear-gradient(90deg, #22c55e, #16a34a);
  animation: pulse-progress 1s infinite;
}

@keyframes pulse-progress {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* ═══════════════════════════════════════════════════════════════
   STOP CONDITIONS
   ═══════════════════════════════════════════════════════════════ */
.aviator-stop-conditions {
  background: rgba(15, 26, 38, 0.6);
  border: 1px solid rgba(32, 50, 71, 0.8);
  border-radius: 20px;
  padding: 20px 20px 0;
  margin-top: 20px;
}

.stop-conditions-title {
  font-size: 15px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.stop-condition-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(32, 50, 71, 0.4);
}

.stop-condition-row:last-child {
  border-bottom: none;
}

.stop-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.stop-toggle input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 50px;
  height: 26px;
  background: rgba(100, 116, 139, 0.3);
  border-radius: 34px;
  transition: background 0.3s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #64748b;
  border-radius: 50%;
  transition: all 0.3s;
}

.stop-toggle input:checked + .toggle-slider {
  background: #3b82f6;
}

.stop-toggle input:checked + .toggle-slider::before {
  transform: translateX(24px);
  background-color: #ffffff;
}

.toggle-label {
  font-size: 15px;
  font-weight: 600;
  color: #cbd5e1;
}

.stop-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stop-input {
  width: 100px;
  padding: 8px 12px;
  background: rgba(11, 22, 34, 0.8);
  border: 2px solid rgba(100, 116, 139, 0.3);
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.stop-input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
}

.stop-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.stop-currency {
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  min-width: 50px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE - MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --app-width: 100vw;
  }
  
  #aviator-wrapper {
    padding: 12px;
  }
  
  #aviator-counterWrapper,
  #aviatorCanvas {
    height: 300px;
  }
  
  #aviator-bottom-wrapper {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  #aviator-bet-button,
  .aviator-auto-btn {
    width: 100%;
    min-width: unset;
  }
  
  .auto-cashout-controls {
    grid-template-columns: 1fr;
  }
  
  .stop-condition-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .stop-input-wrapper {
    width: 100%;
  }
  
  .stop-input {
    flex: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════
   MINES GAME - STABLE & SIMPLE
   ═══════════════════════════════════════════════════════════════ */

.mines-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 15px;
  position: relative;
  gap: 15px;
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */

.mines-header {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.mines-balance,
.mines-multiplier {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}

.mines-header .label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.mines-header .value {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  font-family: 'Arial Black', sans-serif;
}

.mines-multiplier .value {
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   GAME BOARD (5x5)
   ═══════════════════════════════════════════════════════════════ */

.mines-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 8px;
  aspect-ratio: 1;
  max-width: 100%;
  margin: 0 auto;
}

/* CELL */
.mines-cell {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(42, 52, 65, 0.75) 0%, rgba(31, 41, 55, 0.75) 100%);
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  user-select: none;
  backdrop-filter: blur(8px);
}

.mines-cell:hover:not(.revealed):not(.disabled) {
  transform: scale(1.05);
  border-color: rgba(0, 255, 136, 0.5);
  box-shadow: 0 6px 20px rgba(0, 255, 136, 0.3);
}

.mines-cell:active:not(.revealed):not(.disabled) {
  transform: scale(0.95);
}

/* REVEALED STATES */
.mines-cell.revealed {
  cursor: default;
  pointer-events: none;
}

.mines-cell.revealed.safe {
  background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
  border-color: #00ff88;
  animation: revealSafe 0.3s ease-out;
}

.mines-cell.revealed.mine {
  background: linear-gradient(135deg, #ff0055 0%, #cc0044 100%);
  border-color: #ff0055;
  animation: revealMine 0.3s ease-out;
}

.mines-cell.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes revealSafe {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes revealMine {
  0% { transform: scale(0.8) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   CONTROLS
   ═══════════════════════════════════════════════════════════════ */

.mines-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* BET SECTION */
.bet-section,
.mines-section {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
}

.bet-section .label,
.mines-section .label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-align: center;
}

.bet-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.bet-btn {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.bet-btn:hover {
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 0.4);
}

.bet-btn:active {
  transform: scale(0.95);
}

.bet-display {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  font-family: 'Arial Black', sans-serif;
  min-width: 100px;
  text-align: center;
}

/* MINES SELECT */
.mines-select-group {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.mines-btn {
  flex: 1;
  height: 45px;
  background: linear-gradient(135deg, #2a3441 0%, #1f2937 100%);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.mines-btn:hover {
  border-color: rgba(0, 255, 136, 0.5);
}

.mines-btn.active {
  background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
  border-color: #00ff88;
  color: #000;
}

/* ACTION BUTTONS */
.action-btn {
  width: 100%;
  height: 60px;
  border: none;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.action-btn.start {
  background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
  box-shadow: 0 6px 20px rgba(0, 255, 136, 0.4);
}

.action-btn.start:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 255, 136, 0.6);
}

.action-btn.cashout {
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.action-btn.cashout:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 215, 0, 0.6);
}

.action-btn:active {
  transform: scale(0.95);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cashout-amount {
  font-size: 16px;
  font-weight: 700;
}

.hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .mines-container {
    padding: 10px;
    gap: 10px;
  }
  
  .mines-board {
    gap: 6px;
  }
  
  .mines-cell {
    font-size: 32px;
    border-radius: 10px;
  }
  
  .bet-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .action-btn {
    height: 55px;
    font-size: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MINES - CRUSTLAB DESIGN
   ═══════════════════════════════════════════════════════════════ */

.mines-fullscreen-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    padding-top: 68px;
    margin-top: -12px;
}

.mines-crustlab-layout {
    display: flex;
    flex-direction: column !important;
    gap: 15px;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.mines-left-panel { order: 2; }
.mines-right-panel { order: 1; }

.mines-left-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-shrink: 0;
    background: rgba(10, 12, 25, 0.45);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    order: 2;
}

.mines-right-panel {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    order: 1;
}

.mines-stat-box {
    background: rgba(10, 12, 25, 0.4);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.stat-value.multiplier {
    color: #30fe82;
}

.control-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.control-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mines-num {
    color: #30fe82;
    font-size: 16px;
    font-weight: 700;
}

.bet-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.bet-controls .bet-btn {
    width: 50px;
    height: 50px;
    background: rgba(15, 23, 41, 0.8);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.bet-controls .bet-btn:hover:not(:disabled) {
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.2);
    transform: scale(1.05);
}

.bet-controls .bet-display {
    flex: 1;
    background: rgba(15, 23, 41, 0.5);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    backdrop-filter: blur(12px);
}

/* Стили для input */
.bet-controls input.bet-display {
    outline: none;
    transition: all 0.2s;
}

.bet-controls input.bet-display:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    background: rgba(37, 99, 235, 0.1);
}

/* Убираем стрелки у number input */
.bet-controls input.bet-display::-webkit-inner-spin-button,
.bet-controls input.bet-display::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bet-controls input.bet-display[type=number] {
    -moz-appearance: textfield;
}

.mines-slider {
    width: 100%;
    height: 6px;
    background: rgba(15, 23, 41, 0.8);
    border-radius: 10px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.mines-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.6);
    transition: all 0.2s;
}

.mines-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.8);
}

.mines-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.6);
    transition: all 0.2s;
}

.mines-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.8);
}

.slider-marks {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.mines-left-panel .action-btn {
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mines-left-panel .action-btn.start {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
}

.mines-left-panel .action-btn.start:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(37, 99, 235, 0.6);
}

.mines-left-panel .action-btn.cashout {
    background: linear-gradient(135deg, #30fe82 0%, #00d968 100%);
    color: #000;
    box-shadow: 0 4px 20px rgba(48, 254, 130, 0.4);
}

.mines-left-panel .action-btn.cashout:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 30px rgba(48, 254, 130, 0.6);
}

.mines-right-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mines-right-panel .mines-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 25px;
    background: rgba(10, 12, 25, 0.45);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: 100%;
}

.mines-right-panel .mines-cell {
    aspect-ratio: 1;
    width: 100%;
    max-width: 100px;
    background: linear-gradient(135deg, rgba(21, 22, 35, 0.9) 0%, rgba(15, 18, 35, 0.95) 100%);
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    cursor: pointer;
    transition: all 0.2s;
}

.mines-right-panel .mines-cell:not(.revealed):not(:disabled):hover {
    transform: translateY(-4px) scale(1.05);
    border-color: #2563eb;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
}

.mines-right-panel .mines-cell.revealed.safe {
    background: linear-gradient(135deg, rgba(48, 254, 130, 0.15) 0%, rgba(0, 200, 100, 0.25) 100%);
    border: 2px solid #30fe82;
}

.mines-right-panel .mines-cell.revealed.mine {
    background: linear-gradient(135deg, rgba(223, 33, 71, 0.15) 0%, rgba(180, 20, 50, 0.25) 100%);
    border: 2px solid #df2147;
}

    font-size: 16px;
    font-weight: 600;
    color: #fff;
    outline: none;
    transition: all 0.2s;
}

.auto-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

.auto-input::-webkit-inner-spin-button,
.auto-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.auto-input[type=number] {
    -moz-appearance: textfield;
}

.mines-left-panel .action-btn.stop {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
}

.mines-left-panel .action-btn.stop:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(239, 68, 68, 0.6);
}

/* ═══════════════════════════════════════════════════════════════
   MINES - MOBILE OPTIMIZATION (phones)
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   MINES - AUTO PANEL (SWIPE MODE)
   ═══════════════════════════════════════════════════════════════ */

/* Левая панель с свайпом */
.mines-left-panel {
    position: relative;
    overflow: hidden;
}

/* Контейнер для обеих панелей (обычная и авто) */
.mines-panels-container {
    display: flex;
    width: 200%;
    transition: transform 0.3s ease;
}

/* Сдвиг на авто панель */
.mines-panels-container.auto-mode {
    transform: translateX(-50%);
}

/* Обычная панель */
.mines-panel-normal {
    width: 50%;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Авто панель */
.mines-panel-auto {
    width: 50%;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 24px;
}

/* Заголовок авто */
.mines-auto-header {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

/* Статистика авто (компактная) */
.mines-auto-mini-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.mines-auto-mini-stat {
    background: rgba(15, 23, 41, 0.6);
    border-radius: 8px;
    padding: 8px;
    border: 1px solid rgba(124, 58, 237, 0.2);
    text-align: center;
}

.mines-auto-mini-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.mines-auto-mini-value {
    font-size: 14px;
    font-weight: 700;
    color: #a78bfa;
}

/* Компактные кнопки */
.mines-panel-auto .action-btn {
    padding: 12px;
    font-size: 13px;
}

.mines-auto-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mines-auto-actions .action-btn.back {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .mines-panel-normal,
    .mines-panel-auto {
        width: 100%;
        min-width: 100%;
    }
    
    .mines-panel-auto {
        padding-left: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CRASH/AVIATOR - MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .crash-game {
        padding: 10px;
    }
    
    .crash-header {
        padding: 12px;
        gap: 10px;
    }
    
    .crash-balance {
        font-size: 14px;
    }
    
    .crash-controls {
        padding: 16px;
        gap: 12px;
    }
    
    .crash-bet-input {
        padding: 12px;
        font-size: 16px;
    }
    
    .crash-bet-btn {
        padding: 14px 20px;
        font-size: 14px;
    }
    
    .crash-stats {
        gap: 8px;
    }
    
    .crash-stat-box {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .crash-controls {
        padding: 12px;
    }
    
    .crash-bet-input {
        padding: 10px;
        font-size: 14px;
    }
    
    .crash-bet-btn {
        padding: 12px 16px;
        font-size: 13px;
    }
    
    .crash-stat-box {
        padding: 8px;
    }
    
    .crash-stat-label {
        font-size: 10px;
    }
    
    .crash-stat-value {
        font-size: 16px;
    }
}

/* Slider compact for mobile */
@media (max-width: 768px) {
    .mines-slider {
        height: 6px;
    }
    
    .slider-marks {
        font-size: 10px;
        margin-top: 4px;
    }
    
    #mines-count-display {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .mines-slider {
        height: 5px;
    }
    
    .slider-marks {
        font-size: 9px;
        margin-top: 3px;
    }
    
    #mines-count-display {
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MINES - RESPONSIVE (все устройства 320px - 4K)
   ═══════════════════════════════════════════════════════════════ */

/* Tablet Portrait (< 768px) */
@media (max-width: 768px) {
    .mines-container {
        padding: 10px;
    }
    
    .mines-crustlab-layout {
        flex-direction: column;
        gap: 12px;
    }
    
    .mines-left-panel {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        gap: 10px;
        flex-shrink: 0;
    }
    
    .mines-right-panel {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;
    }
    
    .mines-right-panel .mines-board {
        width: 100%;
        padding: 15px;
        gap: 8px;
    }
    
    .mines-right-panel .mines-cell {
        font-size: 36px;
    }
    
    .bet-btn {
        width: 42px;
        height: 42px;
    }
    
    .bet-display {
        padding: 10px;
        font-size: 16px;
    }
    
    .action-btn {
        padding: 12px;
        font-size: 14px;
        min-height: 48px;
    }
    
    .control-label {
        font-size: 11px;
    }
}

/* Mobile (< 480px) */
@media (max-width: 480px) {
    .mines-container {
        padding: 8px;
    }
    

    
    .mines-left-panel {
        padding: 12px;
        gap: 8px;
    }
    
    .mines-right-panel .mines-board {
        padding: 12px;
        gap: 6px;
    }
    
    .mines-right-panel .mines-cell {
        font-size: 32px;
    }
    
    .bet-btn {
        width: 38px;
        height: 38px;
    }
    
    .bet-display {
        font-size: 15px;
    }
    
    .action-btn {
        padding: 10px;
        font-size: 13px;
        min-height: 44px;
    }
}

/* Small Mobile (< 375px) */
@media (max-width: 375px) {
    .mines-container {
        padding: 6px;
    }
    

    
    .mines-left-panel {
        padding: 10px;
        gap: 6px;
    }
    
    .mines-right-panel .mines-board {
        padding: 10px;
        gap: 5px;
    }
    
    .mines-right-panel .mines-cell {
        font-size: 28px;
    }
    
    .bet-btn {
        width: 36px;
        height: 36px;
    }
    
    .action-btn {
        padding: 8px;
        font-size: 12px;
        min-height: 40px;
    }
    
    .control-label {
        font-size: 10px;
    }
    
    .stat-value {
        font-size: 16px;
    }
}/* ═══════════════════════════════════════════════════════════════
   MINES - ПРАВИЛЬНЫЙ СВАЙП БЕЗ ДВОЙНОГО СКРОЛЛА
   ═══════════════════════════════════════════════════════════════ */

/* КОНТЕЙНЕР MINES - БЕЗ СКРОЛЛА */
.mines-container {
    width: 100%;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding: 20px !important;
}



.mines-crustlab-layout {
    display: flex;
    gap: 20px;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    align-items: flex-start !important;
}

/* ЛЕВАЯ ПАНЕЛЬ - HIDDEN overflow для свайпа */
.mines-left-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: rgba(10, 12, 25, 0.45) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* КОНТЕЙНЕР СВАЙПА - БЕЗ overflow-y */
.mines-panels-container {
    display: flex !important;
    width: 200% !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 10px !important;
}

/* Свайп в AUTO */
.mines-panels-container.auto-mode {
    transform: translateX(-50%) !important;
}

/* ПАНЕЛИ - 50% каждая */
.mines-panel-normal,
.mines-panel-auto {
    width: 50% !important;
    min-width: 50% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-right: 4px !important;
}

.mines-panel-auto {
    padding-left: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════
   CONTROL BLOCKS
   ═══════════════════════════════════════════════════════════════ */

.mines-left-panel .control-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.mines-left-panel .control-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.mines-left-panel .mines-num {
    color: #30fe82 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   BET CONTROLS
   ═══════════════════════════════════════════════════════════════ */

.mines-left-panel .bet-controls {
    display: grid !important;
    grid-template-columns: 36px 1fr 36px !important;
    gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
    height: 36px !important;
}

.mines-left-panel .bet-btn {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    background: rgba(15, 23, 41, 0.9) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mines-left-panel .bet-btn:hover:not(:disabled) {
    border-color: #2563eb !important;
    background: rgba(37, 99, 235, 0.25) !important;
    transform: scale(1.05);
}

.mines-left-panel .bet-display {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    background: rgba(15, 23, 41, 0.9) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    width: 100% !important;
    outline: none !important;
    line-height: 36px !important;
}

/* ═══════════════════════════════════════════════════════════════
   SLIDER
   ═══════════════════════════════════════════════════════════════ */

.mines-left-panel .mines-slider {
    width: 100% !important;
    height: 5px !important;
    background: rgba(15, 23, 42, 0.7) !important;
    border-radius: 3px !important;
    outline: none !important;
    -webkit-appearance: none !important;
    margin: 4px 0 !important;
}

.mines-left-panel .mines-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.mines-left-panel .mines-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.5);
}

.mines-left-panel .slider-marks {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 2px !important;
    font-size: 8px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    line-height: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   STAT BOX
   ═══════════════════════════════════════════════════════════════ */

.mines-left-panel .mines-stat-box {
    background: rgba(15, 23, 41, 0.7) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    margin: 0 !important;
}

.mines-left-panel .stat-label {
    font-size: 8px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 3px !important;
    line-height: 1 !important;
}

.mines-left-panel .stat-value {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.2 !important;
}

.mines-left-panel .stat-value.multiplier {
    color: #30fe82 !important;
}

/* ═══════════════════════════════════════════════════════════════
   ACTION BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.mines-left-panel .action-btn {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 14px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.mines-left-panel .action-btn.start {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.4) !important;
}

.mines-left-panel .action-btn.auto {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(124, 58, 237, 0.4) !important;
}

.mines-left-panel .action-btn.cashout {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.4) !important;
}

.mines-left-panel .action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(37, 99, 235, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════
   AUTO PANEL
   ═══════════════════════════════════════════════════════════════ */

.mines-auto-header {
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #a78bfa !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 8px !important;
    background: rgba(124, 58, 237, 0.15) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(124, 58, 237, 0.3) !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
}

.mines-left-panel .auto-input {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    background: rgba(15, 23, 41, 0.9) !important;
    border: 1px solid rgba(124, 58, 237, 0.4) !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
    outline: none !important;
    line-height: 36px !important;
}

.mines-auto-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-top: 4px !important;
}

.mines-auto-actions .action-btn {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    font-size: 10px !important;
}

.mines-auto-actions .action-btn.back {
    grid-column: 1 / -1 !important;
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
}

.mines-auto-actions .action-btn.stop {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .mines-container {
        padding: 10px !important;
    }
    
    .mines-fullscreen-wrapper {
        padding: 0 20px 20px;
    margin-top: -12px;
    }
    
    .mines-crustlab-layout {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    
    .mines-left-panel {
        width: 100% !important;
        max-width: 340px !important;
        min-width: 340px !important;
    }
    
    .mines-right-panel {
        width: 100% !important;
        max-width: 500px !important;
    }
}

@media (max-width: 480px) {
    .mines-left-panel {
        max-width: 300px !important;
        min-width: 300px !important;
    }
    
    .mines-panels-container {
        padding: 8px !important;
    }
    
    .mines-panel-normal,
    .mines-panel-auto {
        gap: 6px !important;
    }
    
    .mines-left-panel .bet-controls {
        grid-template-columns: 32px 1fr 32px !important;
        height: 32px !important;
    }
    
    .mines-left-panel .bet-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    
    .mines-left-panel .bet-display {
        height: 32px !important;
        font-size: 13px !important;
        line-height: 32px !important;
    }
    
    .mines-left-panel .action-btn {
        height: 34px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 360px) {
    .mines-left-panel {
        max-width: 280px !important;
        min-width: 280px !important;
    }
    
    .mines-left-panel .bet-controls {
        grid-template-columns: 30px 1fr 30px !important;
        height: 30px !important;
    }
    
    .mines-left-panel .bet-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }
    
    .mines-left-panel .bet-display {
        height: 30px !important;
        font-size: 12px !important;
        line-height: 30px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   СКРЫТИЕ КНОПКИ ЗАБРАТЬ
   ═══════════════════════════════════════════════════════════════ */

/* Кнопка ЗАБРАТЬ скрыта по умолчанию */
.mines-left-panel .action-btn.cashout.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Общий класс hidden */
.hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   СКРЫТИЕ КНОПКИ ЗАБРАТЬ
   ═══════════════════════════════════════════════════════════════ */

/* Кнопка ЗАБРАТЬ скрыта по умолчанию */
.mines-left-panel .action-btn.cashout.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Общий класс hidden для всех элементов */
.hidden {
    display: none !important;
}

/* Когда игра активна - показываем ЗАБРАТЬ */
.mines-left-panel.game-active .action-btn.cashout {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
}

/* Когда игра активна - прячем НАЧАТЬ и АВТО */
.mines-left-panel.game-active .action-btn.start,
.mines-left-panel.game-active .action-btn.auto {
    display: none !important;
}
/* ═══════════════════════════════════════════════════════════════
   MINES BOARD - ИСПРАВЛЕНИЕ ВЫЛЕЗАНИЯ КЛЕТОК
   ═══════════════════════════════════════════════════════════════ */

/* ПРАВАЯ ПАНЕЛЬ - контейнер доски */
.mines-right-panel {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    overflow: hidden !important;
    padding: 10px;
}

/* ИГРОВАЯ ДОСКА - ограничение размера */
.mines-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 12px;
    padding: 20px;
    background: rgba(10, 12, 25, 0.45);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: 100%;
    aspect-ratio: 1;
    overflow: visible !important;
    position: relative;
}

/* МОБИЛЬНЫЙ — оба блока одинаковой ширины */
@media (max-width: 900px) {
    .mines-crustlab-layout {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px !important;
        gap: 12px !important;
    }
    .mines-left-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        order: 2;
    }
    .mines-right-panel {
        width: 100% !important;
        order: 1;
    }
    .mines-right-panel .mines-board,
    .mines-board {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* КЛЕТКА - БЕЗ SCALE при hover */
.mines-cell {
    aspect-ratio: 1;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: scale(1) !important;
}

/* Hover БЕЗ scale */
.mines-cell:hover:not(.revealed):not(.mine) {
    border-color: #3b82f6 !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3) 0%, rgba(59, 130, 246, 0.2) 100%) !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
    transform: scale(1) !important;
}

/* Active state БЕЗ scale */
.mines-cell:active:not(.revealed):not(.mine) {
    transform: scale(1) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

/* Открытая клетка */
.mines-cell.revealed {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.1) 100%) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    cursor: pointer;
    animation: revealCell 0.3s ease-out;
    transform: scale(1) !important;
}

/* Мина */
.mines-cell.mine {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.2) 100%) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    cursor: default !important;
    animation: explode 0.4s ease-out;
    transform: scale(1) !important;
}

/* Анимация открытия */
@keyframes revealCell {
    0% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}

/* Анимация взрыва */
@keyframes explode {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

/* МОБИЛЬНАЯ АДАПТАЦИЯ */
@media (max-width: 768px) {
    .mines-right-panel {
        padding: 5px;
    }
    
    .mines-board {
        gap: 10px;
        padding: 15px;
        max-width: 450px;
    }
    
    .mines-cell {
        font-size: 36px;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .mines-board {
        gap: 8px;
        padding: 12px;
        max-width: 380px;
    }
    
    .mines-cell {
        font-size: 32px;
        border-radius: 8px;
        border-width: 1px;
    }
}

@media (max-width: 360px) {
    .mines-board {
        gap: 6px;
        padding: 10px;
        max-width: 320px;
    }
    
    .mines-cell {
        font-size: 28px;
        border-radius: 6px;
    }
}
/* ========================================
   VIP MODAL STYLES
   ======================================== */

.vip-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 0;
  overflow: hidden;
}

.vip-modal.hidden {
  display: none;
}

.vip-modal-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  border: none;
  overflow: hidden;
}

.vip-modal-header {
  padding: 12px 15px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vip-menu-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 28px;
  padding: 8px;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.2s;
}

.vip-menu-btn:hover {
  transform: scale(1.1);
}

.vip-menu-btn:active {
  transform: scale(0.95);
}

.vip-close-btn {
  display: none;
}

.vip-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* Current Level */
.vip-current-level {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%);
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 20px;
  border: 2px solid rgba(255, 215, 0, 0.3);
}

.vip-level-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.vip-level-icon {
  font-size: 48px;
}

.vip-level-name {
  font-size: 32px;
  font-weight: bold;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vip-progress {
  width: 100%;
  height: 30px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 2px solid rgba(255, 215, 0, 0.2);
}

.vip-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
  transition: width 0.5s ease;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.vip-progress-text {
  text-align: center;
  color: #ffd700;
  font-size: 16px;
  font-weight: bold;
}

/* Cashback Section */
.vip-cashback-section {
  background: linear-gradient(135deg, rgba(0, 255, 127, 0.1) 0%, rgba(0, 255, 127, 0.05) 100%);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 20px;
  border: 2px solid rgba(0, 255, 127, 0.3);
}

.vip-cashback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.vip-cashback-header h3 {
  margin: 0;
  color: #00ff7f;
  font-size: 20px;
}

.vip-cashback-amount {
  font-size: 36px;
  font-weight: bold;
  color: #00ff7f;
  text-shadow: 0 0 20px rgba(0, 255, 127, 0.5);
}

.vip-claim-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #00ff7f 0%, #00d66c 100%);
  border: none;
  border-radius: 10px;
  color: #1a1a2e;
  font-size: 18px;
  font-weight: bold;
  cursor: default !important;
  transition: box-shadow 0.3s;
  margin-bottom: 15px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.vip-claim-btn:hover {
  box-shadow: 0 6px 24px rgba(0, 255, 127, 0.4);
}

.vip-claim-btn:focus {
  outline: none;
}

.vip-claim-btn:active {
  box-shadow: 0 2px 8px rgba(0, 255, 127, 0.3);
}

.vip-claim-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vip-cashback-info {
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

#vip-cashback-percent {
  color: #00ff7f;
  font-weight: bold;
}

/* Level Cards */
.vip-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.vip-level-card {
  position: relative;
  background: #0d1b2a;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #1e3248;
  transition: all 0.3s;
  overflow: hidden;
}

/* Активный — текущий уровень */
.vip-level-card.active {
  border-color: #ffd700;
  background: linear-gradient(160deg, #151f30, #1a2640);
  box-shadow: 0 0 0 1px #ffd70044, inset 0 1px 0 #ffd70022;
}

/* Полоска сверху на активном */
.vip-level-card.active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffd700, transparent);
}

/* Пройденный */
.vip-level-card.completed {
  background: linear-gradient(160deg, #0a1a10, #0d2016);
  border-color: #1a4a2a;
  opacity: 0.9;
}

.vip-level-card.completed::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
}

/* Заблокированный */
.vip-level-card.locked {
  background: #080f18;
  border-color: #111e2e;
  opacity: 0.45;
}

.vip-level-card.bronze { --tier-color: #cd7f32; }
.vip-level-card.silver { --tier-color: #c0c0c0; }
.vip-level-card.gold   { --tier-color: #ffd700; }
.vip-level-card.diamond { --tier-color: #a8edff; }

.vip-level-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 14px;
}

.vip-level-emoji {
  display: none;
}

.vip-level-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--tier-color, #fff);
  text-transform: uppercase;
}

.vip-level-requirement {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin-bottom: 15px;
}

.vip-level-benefits {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vip-benefit {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  padding: 5px 0;
}

/* Stats */
.vip-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.vip-stat-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vip-stat-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin-bottom: 10px;
}

.vip-stat-value {
  color: #ffd700;
  font-size: 28px;
  font-weight: bold;
}

/* Mobile */
@media (max-width: 768px) {
  .vip-modal-header h2 {
    font-size: 22px;
  }
  
  .vip-levels {
    grid-template-columns: 1fr;
  }
  
  .vip-cashback-amount {
    font-size: 28px;
  }
  
  .vip-level-name {
    font-size: 24px;
  }
}

/* Убираем второй скроллбар */
.vip-modal::-webkit-scrollbar {
  display: none;
}

.vip-modal {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.vip-modal-content::-webkit-scrollbar {
  display: none;
}


/* Оставляем только скроллбар на body */
.vip-modal-body::-webkit-scrollbar {
  width: 8px;
}

.vip-modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.vip-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.3);
  border-radius: 4px;
}

.vip-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 0, 0.5);
}

/* VIP modal в режиме "за меню" */
.vip-modal.behind-menu {
  /* Не блокируем клики, просто затемняем */
  opacity: 0.3;
}

.vip-modal.behind-menu .vip-modal-content {
  /* Контент тоже затемнён */
}

/* VIP как tabpane */
#vip.tabpane {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--app-width), 100vw);
  height: var(--tg-height);
  z-index: 5;
  overflow: hidden;
}

.vip-modal-body {\n  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: transparent;
}

/* VIP Header — скрываем кастомный, используем стандартный topbar */
.vip-header {
  display: none;
}

.vip-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 56px;
}

.vip-burger-btn {
  position: absolute;
  left: 14px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 28px;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  transition: transform 0.2s;
}

.vip-burger-btn:hover {
  transform: scale(1.1);
}

.vip-burger-btn:active {
  transform: scale(0.95);
}

.vip-title {
  margin: 0;
  color: #ffd700;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
/* ═══════════════════════════════════════════════════════════════
   КОЛЕСО ФОРТУНЫ — DUCKY STYLE
   ═══════════════════════════════════════════════════════════════ */

#wheel.tabpane {
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--app-width), 100vw);
  height: var(--tg-height);
  z-index: 5;
  overflow-y: auto;
}
#wheel.tabpane.active {
  display: block;
}

.wheel-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 16px 48px;
  min-height: 100%;
  background: linear-gradient(160deg, #6b21a8 0%, #7c3aed 40%, #a855f7 100%);
  position: relative;
}

.wheel-title-wrap {
  text-align: center;
  margin-bottom: 24px;
  z-index: 1;
}

.wheel-title {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(255,200,0,0.8), 3px 3px 0 #b45309, -1px -1px 0 #92400e;
  -webkit-text-stroke: 1px #f59e0b;
}

.wheel-subtitle {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  margin-top: 4px;
}

.wheel-stars-deco {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
}

.wstar {
  position: absolute;
  color: #fde68a;
  font-size: 20px;
  animation: wstarBlink 2s infinite;
}
.wstar.s1 { top: 14%; left: 8%;  animation-delay: 0s;    font-size: 22px; }
.wstar.s2 { top: 10%; right: 10%; animation-delay: 0.6s; font-size: 18px; }
.wstar.s3 { top: 35%; left: 4%;  animation-delay: 1.1s;  font-size: 14px; }
.wstar.s4 { top: 35%; right: 5%; animation-delay: 1.7s;  font-size: 16px; }

@keyframes wstarBlink {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.7); }
}

.wheel-wrap {
  position: relative;
  width: 310px;
  height: 310px;
  margin-bottom: 28px;
  z-index: 1;
}

.wheel-outer-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 318px;
  height: 318px;
  border-radius: 50%;
  background: conic-gradient(#f97316, #fb923c, #f59e0b, #fbbf24, #f97316, #fb923c, #f59e0b, #fbbf24, #f97316, #fb923c, #f59e0b, #fbbf24);
  box-shadow: 0 0 0 4px #b45309, 0 0 30px rgba(249,115,22,0.6), 0 0 60px rgba(249,115,22,0.3);
  z-index: 0;
}

.wheel-pointer-wrap {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.wheel-pointer-pin {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 28px solid #4c1d95;
  filter: drop-shadow(0 -2px 6px rgba(139,92,246,0.9));
}

#wheelCanvas {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 1;
  display: block;
}

#wheel-spin-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #a78bfa, #5b21b6 60%, #3b0764);
  border: 4px solid #7c3aed;
  box-shadow: 0 0 0 3px #4c1d95, 0 6px 20px rgba(91,33,182,0.8), inset 0 2px 4px rgba(255,255,255,0.2);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s;
}

#wheel-spin-btn:hover:not(:disabled) {
  box-shadow: 0 0 0 3px #4c1d95, 0 8px 28px rgba(91,33,182,1), inset 0 2px 4px rgba(255,255,255,0.2);
}
#wheel-spin-btn:focus {
  outline: none;
}
#wheel-spin-btn:active:not(:disabled) {
  transform: translate(-50%, -50%) scale(0.94);
}

#wheel-spin-btn:disabled {
  background: radial-gradient(circle at 35% 35%, #6b7280, #374151 60%, #1f2937);
  border-color: #4b5563;
  box-shadow: 0 0 0 3px #374151;
  cursor: default;
  opacity: 0.7;
}

/* Приз — полноэкранный оверлей */
.wheel-prize-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  animation: overlayIn 0.3s ease;
}
.wheel-prize-overlay.hidden { display: none; }

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.wheel-prize-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: linear-gradient(160deg, #3b0764, #6b21a8, #7c3aed);
  border: 2px solid rgba(253,230,138,0.4);
  border-radius: 28px;
  padding: 48px 40px 36px;
  width: 300px;
  box-shadow: 0 0 60px rgba(139,92,246,0.6), 0 0 0 1px rgba(255,255,255,0.1);
  animation: cardPop 0.5s cubic-bezier(0.34,1.56,0.64,1);
  overflow: hidden;
}

#confettiCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.wheel-prize-glow {
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(253,230,138,0.3), transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 1.5s infinite;
}

@keyframes glowPulse {
  0%,100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.2); }
}

@keyframes cardPop {
  from { transform: scale(0.3) rotate(-8deg); opacity: 0; }
  to   { transform: scale(1)   rotate(0deg);  opacity: 1; }
}

.wheel-prize-emoji {
  font-size: 72px;
  position: relative;
  z-index: 1;
  animation: starSpin 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
  filter: drop-shadow(0 0 20px rgba(253,230,138,0.8));
}

@keyframes starSpin {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);    opacity: 1; }
}

.wheel-prize-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  position: relative; z-index: 1;
  text-align: center;
  width: 100%;
}

.wheel-prize-amount {
  font-size: 42px;
  font-weight: 900;
  color: #fde68a;
  text-shadow: 0 0 30px rgba(253,230,138,0.9), 0 0 60px rgba(253,230,138,0.4);
  position: relative; z-index: 1;
  animation: amountIn 0.4s ease 0.4s both;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

@keyframes amountIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-8px) rotate(-2deg); }
  30%     { transform: translateX(8px)  rotate(2deg); }
  45%     { transform: translateX(-6px) rotate(-1deg); }
  60%     { transform: translateX(6px)  rotate(1deg); }
  75%     { transform: translateX(-3px); }
  90%     { transform: translateX(3px); }
}

@keyframes skullPop {
  0%   { transform: scale(0) rotate(30deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(-5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.wheel-prize-close {
  margin-top: 8px;
  padding: 14px 40px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  position: relative; z-index: 1;
  box-shadow: 0 4px 20px rgba(245,158,11,0.5);
  transition: transform 0.15s, box-shadow 0.15s;
  animation: amountIn 0.4s ease 0.6s both;
}
.wheel-prize-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(245,158,11,0.7);
}

/* ═══ ДРУЗЬЯ ═══════════════════════════════════════════════════ */
.friends-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.friends-stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}
.friends-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 4px;
}
.friends-stat-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.friends-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.friend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.friend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.friend-info {
  flex: 1;
  min-width: 0;
}
.friend-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.friend-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(46,160,67,0.15);
  color: #2ea043;
  border: 1px solid rgba(46,160,67,0.3);
  white-space: nowrap;
}
.friend-badge.inactive {
  background: rgba(107,114,128,0.15);
  color: var(--muted);
  border-color: rgba(107,114,128,0.3);
}
.friends-empty {
  text-align: center;
  color: var(--muted);
  padding: 32px 16px;
  font-size: 14px;
  line-height: 1.6;
}
.friends-empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.wheel-timer {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  z-index: 1;
  text-align: center;
}

.wheel-timer span {
  color: #fde68a;
  font-weight: 800;
}

/* FREE badge в меню */
.side-badge.wheel-free-badge {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-weight: 800;
  animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}

/* ═══════════════════════════════════════════════════════════════
   ПОДДЕРЖКА
   ═══════════════════════════════════════════════════════════════ */

#support.tabpane {
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--app-width), 100vw);
  height: var(--tg-height);
  z-index: 5;
  overflow-y: auto;
}
#support.tabpane.active {
  display: block;
}

.support-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 16px;
  min-height: 100%;
  background: linear-gradient(160deg, #0f1a2e 0%, #1a1040 60%, #0f1a2e 100%);
}

/* Hero */
.support-hero {
  text-align: center;
  margin-bottom: 32px;
}

.support-hero-icon {
  font-size: 64px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 20px rgba(139,92,246,0.6));
  animation: supportIconFloat 3s ease-in-out infinite;
}

@keyframes supportIconFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.support-title {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: 1px;
}

.support-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

/* Карточки */
.support-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  margin-bottom: 24px;
}

.support-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 16px 14px;
  text-align: center;
  backdrop-filter: blur(10px);
}

.support-card-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.support-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.support-card-text {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}

/* Темы */
.support-topics {
  width: 100%;
  max-width: 380px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 28px;
}

.support-topics-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.support-topic-item {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  line-height: 1.3;
}

.support-topic-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Кнопка */
.support-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 380px;
  padding: 18px;
  background: linear-gradient(135deg, #2AABEE, #1d8fd4);
  border-radius: 16px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  box-shadow: 0 6px 28px rgba(42,171,238,0.45);
  margin-bottom: 16px;
  transition: box-shadow 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
}

.support-btn:active {
  transform: scale(0.97);
  box-shadow: 0 3px 14px rgba(42,171,238,0.3);
}

.support-btn-icon {
  font-size: 22px;
}

.support-note {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   БЛЭКДЖЕК
   ═══════════════════════════════════════════════════════════════ */

#blackjackGame {
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--app-width), 100vw);
  height: var(--tg-height);
  z-index: 5;
  overflow: hidden;
}
#blackjackGame.active { display: flex; flex-direction: column; }

/* Фон — сукно стола */
.bj-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 62px 16px 16px;
  background:
    radial-gradient(ellipse 120% 60% at 50% 100%, rgba(0,0,0,0.5) 0%, transparent 70%),
    radial-gradient(ellipse 80% 80% at 50% 50%, #0d4a20 0%, #082e14 40%, #04180a 100%);
  position: relative;
  overflow: hidden;
  gap: 0;
}

/* Декоративная линия стола */
.bj-page::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 85%;
  border: 2px solid rgba(255,255,255,0.06);
  border-radius: 50%;
  pointer-events: none;
}

/* Зоны карт */
.bj-area {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dealer-area { padding-top: 4px; }
.player-area { margin-top: auto; }

.bj-area-label {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bj-score {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0;
}

.bj-cards {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  min-height: 124px;
}

.bj-card {
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.15);
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(-30px) rotate(-8deg);
  transition: opacity 0.35s cubic-bezier(0.34,1.56,0.64,1), transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.bj-card.dealt {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* Статус — по центру */
.bj-status-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  text-align: center;
}

.bj-status {
  font-size: 15px;
  font-weight: 800;
  color: rgba(255,255,255,0.5);
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.3s;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.bj-status.win  { color: #4ade80; font-size: 22px; text-shadow: 0 0 24px rgba(74,222,128,0.8); }
.bj-status.lose { color: #f87171; font-size: 22px; text-shadow: 0 0 24px rgba(248,113,113,0.8); }
.bj-status.push { color: #fbbf24; font-size: 20px; text-shadow: 0 0 24px rgba(251,191,36,0.8); }
.bj-status.bj   { color: #fde68a; font-size: 26px; text-shadow: 0 0 40px rgba(253,230,138,1); letter-spacing: 3px; }

/* Нижняя панель */
.bj-bottom {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
}

/* Секция ставки */
.bj-bet-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.bj-bet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.bj-bet-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

.bj-bet-amount {
  font-size: 22px;
  font-weight: 900;
  color: #fde68a;
  text-shadow: 0 0 12px rgba(253,230,138,0.5);
}

.bj-bet-btns {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

.bj-chip {
  flex: 1;
  padding: 9px 4px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  font-weight: 700;
  cursor: default;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
.bj-chip:active { background: rgba(255,255,255,0.15); transform: scale(0.95); }

.bj-chip-max {
  background: rgba(245,158,11,0.15);
  border-color: rgba(245,158,11,0.3);
  color: #fbbf24;
}

.bj-deal-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 2px;
  cursor: default;
  box-shadow: 0 4px 24px rgba(22,163,74,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: transform 0.1s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.bj-deal-btn:active { transform: scale(0.97); box-shadow: 0 2px 10px rgba(22,163,74,0.3); }
.bj-deal-btn:disabled { opacity: 0.35; box-shadow: none; }

/* Кнопки действий */
.bj-actions {
  display: flex;
  gap: 8px;
  width: 100%;
}

.bj-action-btn {
  flex: 1;
  padding: 15px 6px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: default;
  transition: transform 0.1s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.bj-action-btn:active { transform: scale(0.95); }
.bj-action-btn:disabled { opacity: 0.35; box-shadow: none; }

.bj-hit    { background: linear-gradient(135deg, #2563eb, #1d4ed8); color:#fff; box-shadow: 0 4px 16px rgba(37,99,235,0.5), inset 0 1px 0 rgba(255,255,255,0.15); }
.bj-stand  { background: linear-gradient(135deg, #dc2626, #b91c1c); color:#fff; box-shadow: 0 4px 16px rgba(220,38,38,0.5), inset 0 1px 0 rgba(255,255,255,0.15); }
.bj-double { background: linear-gradient(135deg, #d97706, #b45309); color:#fff; box-shadow: 0 4px 16px rgba(217,119,6,0.5), inset 0 1px 0 rgba(255,255,255,0.15); }

/* Новая игра */
.bj-new-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: default;
  box-shadow: 0 4px 20px rgba(124,58,237,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s;
}
.bj-new-btn:active { transform: scale(0.97); }

/* ═══════════════════════════════════════════════════════════════
   РАРИТЕТНАЯ ПОДСВЕТКА БАРАБАНА
   ═══════════════════════════════════════════════════════════════ */

:root {
  --rarity-common:    #6b7280;
  --rarity-rare:      #3b82f6;
  --rarity-epic:      #a855f7;
  --rarity-legendary: #f59e0b;
}

/* Ячейка с полноразмерным изображением */
.cell.fullsize-cell {
  overflow: hidden;
}
.cell.fullsize-cell .emo {
  position: relative;
  z-index: 1;
  border-radius: 12px;
}

/* Glow — внутри ячейки снизу */
.rarity-glow {
  position: absolute;
  bottom: 2px;
  left: 8%;
  right: 8%;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  filter: blur(7px);
}

.cell.rarity-common .rarity-glow {
  background: var(--rarity-common);
  opacity: 0.5;
  box-shadow: 0 0 10px 4px var(--rarity-common);
}

.cell.rarity-rare .rarity-glow {
  background: var(--rarity-rare);
  opacity: 0.85;
  box-shadow: 0 0 14px 6px var(--rarity-rare);
}

.cell.rarity-epic .rarity-glow {
  background: var(--rarity-epic);
  opacity: 0.9;
  box-shadow: 0 0 18px 8px var(--rarity-epic);
}

.cell.rarity-legendary .rarity-glow {
  background: var(--rarity-legendary);
  opacity: 1;
  box-shadow: 0 0 24px 10px var(--rarity-legendary);
  animation: legendaryPulse 1.8s ease-in-out infinite;
}

@keyframes legendaryPulse {
  0%,100% { opacity: 0.85; filter: blur(6px); }
  50%      { opacity: 1;   filter: blur(9px); }
}

/* ═══════════════════════════════════════════════════════════════
   ПЛИНКО
   ═══════════════════════════════════════════════════════════════ */

#plinkoGame {
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--app-width), 100vw);
  max-width: 100vw;
  height: var(--tg-height);
  z-index: 5;
  overflow: hidden !important;
  background: transparent;
}
#plinkoGame.active { display: flex; flex-direction: column; }

#plinkoGame::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/images/255.png');
  background-size: cover;
  background-position: center -55px;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

.pk-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 0;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: hidden;
}

#plinkoCanvas {
  flex: 1;
  width: 100%;
  display: block;
  touch-action: none;
  position: relative;
  z-index: 1;
}

/* Нижняя панель */
.pk-panel {
  width: 100%;
  padding: 10px 16px calc(140px + env(safe-area-inset-bottom));
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 35vh;
}


.pk-history-wrap { width: 100%; padding: 0 0 4px; }
.pk-history-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.3); letter-spacing: 2px; margin-bottom: 6px; }
.pk-history { display: flex; gap: 6px; flex-wrap: wrap; }
.pk-hist-item { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 800; }
.pk-hist-item.win  { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }
.pk-hist-item.lose { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
.pk-hist-item.big  { background: rgba(245,158,11,0.15);  color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }

.pk-bet-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pk-bet-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  white-space: nowrap;
}

.pk-bet-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.pk-bet-amount {
  font-size: 20px;
  font-weight: 900;
  color: #fde68a;
  text-shadow: 0 0 10px rgba(253,230,138,0.5);
  min-width: 70px;
  text-align: center;
}

.pk-btn-sm {
  padding: 6px 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  font-weight: 700;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}
.pk-btn-sm:active { background: rgba(255,255,255,0.18); }

.pk-bet-presets {
  display: flex;
  gap: 6px;
}

.pk-preset {
  flex: 1;
  padding: 7px 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  font-weight: 700;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
  text-align: center;
}
.pk-preset:active { background: rgba(255,255,255,0.15); }
.pk-preset-max {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.3);
  color: #fbbf24;
}

.pk-drop-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: default;
  box-shadow: 0 4px 20px rgba(124,58,237,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, box-shadow 0.2s;
}
.pk-drop-btn:active:not(:disabled) { transform: scale(0.97); }
.pk-drop-btn:disabled { opacity: 0.4; box-shadow: none; }

.pk-result {
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
  min-height: 28px;
  transition: all 0.3s;
}
.pk-result.win  { color: #4ade80; text-shadow: 0 0 16px rgba(74,222,128,0.7); }
.pk-result.lose { color: #f87171; text-shadow: 0 0 16px rgba(248,113,113,0.7); }
.pk-result.big  { color: #fde68a; text-shadow: 0 0 24px rgba(253,230,138,0.9); font-size: 24px; }

.pk-history-wrap { width: 100%; }
.pk-history-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.3); letter-spacing: 2px; margin-bottom: 8px; }
.pk-history {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pk-hist-item {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
}
.pk-hist-item.win  { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }
.pk-hist-item.lose { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
.pk-hist-item.big  { background: rgba(245,158,11,0.15);  color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
/* ═══ РАЗДЕЛ ДРУЗЬЯ — ДОП СТИЛИ ══════════════════════════════ */
.friends-how {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.friends-how-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.friends-how-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 5px 0;
  color: var(--fg);
  line-height: 1.4;
}
.friends-how-icon {
  font-size: 18px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.friends-link-block {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.friends-share-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  transition: opacity .15s;
}
.friends-share-btn:active { opacity: .8; }

/* ═══ PROFILE LAYOUT — фиксированный хедер + скролл ══════════ */

/* ═══ VIP TIER BADGES ═══════════════════════════════════════ */
/* Бейдж ВЫПОЛНЕНО на пройденных */
.vip-level-card.completed .vip-level-header::after {
  content: 'ВЫПОЛНЕНО';
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #22c55e;
  padding: 2px 8px;
  border: 1px solid #22c55e44;
  border-radius: 4px;
  background: #22c55e11;
}

/* Бейдж ТЕКУЩИЙ на активном */
.vip-level-card.active .vip-level-header::after {
  content: 'ТЕКУЩИЙ';
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffd700;
  padding: 2px 8px;
  border: 1px solid #ffd70044;
  border-radius: 4px;
  background: #ffd70011;
}

/* Бейдж НЕДОСТУПНО на locked */
.vip-level-card.locked .vip-level-header::after {
  content: 'НЕДОСТУПНО';
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #4a6080;
  padding: 2px 8px;
  border: 1px solid #1e3248;
  border-radius: 4px;
}

/* Требования к уровню */
.vip-level-requirement {
  text-align: left;
  color: #4a6a8a;
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

/* Преимущества */
.vip-benefit {
  font-size: 12px;
  color: #7a9ab8;
  padding: 4px 0;
  border-bottom: 1px solid #0f1e2d;
  letter-spacing: 0.3px;
}

.vip-level-card.completed .vip-benefit {
  color: #3a6a4a;
  border-bottom-color: #0a1e10;
  text-decoration: line-through;
  opacity: 0.6;
}

.vip-level-card.active .vip-benefit {
  color: #a0c0d8;
}

/* ═══ НОВЫЙ ДИЗАЙН ═══ */

/* ── TOPBAR RIGHT ─────────────────────────────────────────── */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: transform .15s;
  flex-shrink: 0;
}
.topbar-avatar-btn:active { transform: scale(.9); }
.topbar-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #1e3a54;
  background: #0f1e2e;
  display: block;
}

/* ── BACK TO HOME ─────────────────────────────────────────── */
.back-to-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #7ab4d8;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  margin: 12px 0 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.back-to-home:hover { background: rgba(255,255,255,.1); color: #e9f3ff; }
.back-to-home:active { transform: scale(.97); }

/* ── HOME BANNERS ─────────────────────────────────────────── */
.home-banners { margin-bottom: 14px; }

.banner-main {
  background: linear-gradient(135deg, #0d2137 0%, #1a3a5c 50%, #0a2240 100%);
  border: 1px solid #1e4a7a;
  border-radius: 18px;
  padding: 20px 16px 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  min-height: 100px;
  margin-bottom: 10px;
}
.banner-main-content { z-index: 1; }
.banner-tag {
  font-size: 10px;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 20px;
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.banner-main-title {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.banner-main-sub {
  font-size: 12px;
  color: #7ab4d8;
  margin-top: 4px;
  font-weight: 500;
}
.banner-main-art {
  font-size: 56px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
  flex-shrink: 0;
}

.banner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.banner-card {
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  transition: transform .15s, opacity .15s;
  border: 1px solid rgba(255,255,255,.08);
}
.banner-card:active { transform: scale(.96); opacity: .85; }
.banner-wheel { background: linear-gradient(135deg, #1a1060, #2d1b8a); }
.banner-vip   { background: linear-gradient(135deg, #2d1500, #6b3500); }
.banner-ref   { background: linear-gradient(135deg, #002d1a, #006b3a); }
.banner-games { background: linear-gradient(135deg, #1a0030, #4a0080); }
.banner-card-icon { font-size: 22px; margin-bottom: 4px; }
.banner-card-title {
  font-size: 10px;
  font-weight: 800;
  color: #e9f3ff;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.banner-card-sub {
  font-size: 10px;
  color: rgba(255,255,255,.5);
  margin-top: 2px;
}

/* ── CASES TABS ───────────────────────────────────────────── */
.cases-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.cases-tabs::-webkit-scrollbar { display: none; }
.cases-tab {
  flex: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  color: #7ab4d8;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 6px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cases-tab:hover { background: rgba(255,255,255,.1); color: #e9f3ff; }
.cases-tab.active {
  background: #1e4a7a;
  border-color: #3a7abd;
  color: #fff;
}

/* ── GAMES MENU GRID ──────────────────────────────────────── */
#gamesMenuGame {
  padding: 0 4px;
  position: relative;
  overflow: visible;
}
.games-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 28px 0 16px;
}

/* ── GAME CARD ────────────────────────────────────────────── */
.game-card {
  background: var(--panel);
  border: 1px solid #1e3a54;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.game-card:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  border-color: #3a7abd;
}
.game-card:active { transform: scale(.97); }
.game-card--soon { opacity: .4; pointer-events: none; }

.game-card-img {
  width: 100%;
  height: 115px;
  object-fit: cover;
  border-radius: 15px 15px 0 0;
  display: block;
  flex-shrink: 0;
}
.game-card-info {
  padding: 9px 12px 11px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.game-card-name {
  font-size: 13px;
  font-weight: 800;
  color: #e9f3ff;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.game-card-desc {
  font-size: 11px;
  color: #4a7a9b;
  font-weight: 500;
}
.game-card--soon .gp-soon-icon {
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 0;
}

/* ── FLOAT BACK BTN ───────────────────────────────────────── */
#floatBackBtn, .float-back-btn {
  position: fixed;
  top: 60px;
  left: 12px;
  z-index: 200;
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(15,30,50,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #1e3a54;
  border-radius: 10px;
  color: #7ab4d8;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
  pointer-events: all;
}
#floatBackBtn:hover, .float-back-btn:hover { background: rgba(30,60,100,.9); color: #e9f3ff; }

/* ── ALERT MODAL ──────────────────────────────────────────── */
.alert-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.alert-modal.hidden { display: none; }
.alert-modal-card {
  background: #0f1e2e;
  border: 1px solid #1e3a54;
  border-radius: 20px;
  padding: 28px 24px 20px;
  text-align: center;
  max-width: 320px;
  width: 100%;
}
.alert-modal-icon { font-size: 36px; margin-bottom: 10px; }
.alert-modal-title { font-size: 17px; font-weight: 800; color: #e9f3ff; margin-bottom: 8px; }
.alert-modal-text { font-size: 14px; color: #7ab4d8; line-height: 1.5; margin-bottom: 20px; }
.alert-modal-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: #1e4a7a;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
}
.alert-modal-btn.secondary { background: rgba(255,255,255,.06); color: #7ab4d8; }

/* ── DISPLAY OVERRIDES ────────────────────────────────────── */
#gamesMenuGame.active { display: block !important; }
#casesGame.active     { display: block !important; }
#coinflipGame.active  { display: block !important; position: relative; }
/* ═══════════════════════════════════════════════════════════════
   DICE GAME
   ═══════════════════════════════════════════════════════════════ */

/* Карточка в меню */
.game-preview-dice img {
  width: 100%;
  height: 115px;
  object-fit: cover;
  border-radius: 15px 15px 0 0;
  display: block;
  flex-shrink: 0;
}

/* Страница игры */
.dice-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100%;
  padding: 8px 0 20px;
  background: linear-gradient(180deg, #0f0c29 0%, #1a1040 40%, #0d0d1a 100%);
  overflow-y: auto;
  gap: 16px;
  position: relative;
}

#diceGame.active { display: block; }

/* Кубик */
.dice-cube-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  margin-bottom: 4px;
}

/* 3D сцена */
.dice-scene {
  width: 110px;
  height: 110px;
  perspective: 350px;
  perspective-origin: 50% 50%;
}

.dice-3d {
  width: 110px;
  height: 110px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dice-3d.rolling {
  animation: dice3dRoll 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes dice3dRoll {
  0%   { transform: rotateX(0deg) rotateY(0deg); }
  25%  { transform: rotateX(-180deg) rotateY(120deg) scale(0.85); }
  60%  { transform: rotateX(-360deg) rotateY(300deg) scale(1.08); }
  80%  { transform: rotateX(-400deg) rotateY(360deg) scale(0.97); }
  100% { transform: var(--dice-final-rot); }
}

/* Грани */
.dice-face {
  position: absolute;
  width: 110px;
  height: 110px;
  background: linear-gradient(135deg, #f0ebe0, #faf6ef);
  border: 2px solid rgba(0,0,0,0.12);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 16px rgba(0,0,0,0.08),
    inset 0 2px 4px rgba(255,255,255,0.6);
  box-sizing: border-box;
  padding: 14px;
}

.dice-face--front  { transform: rotateY(0deg)    translateZ(55px); }
.dice-face--back   { transform: rotateY(180deg)   translateZ(55px); }
.dice-face--left   { transform: rotateY(-90deg)   translateZ(55px); }
.dice-face--right  { transform: rotateY(90deg)    translateZ(55px); }
.dice-face--top    { transform: rotateX(90deg)    translateZ(55px); }
.dice-face--bottom { transform: rotateX(-90deg)   translateZ(55px); }

/* Цифра на грани */
.dice-face-num {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: #1a0f3e;
  font-family: system-ui, sans-serif;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.15);
  user-select: none;
}

.dice-face-num.spinning {
  animation: diceNumSpin 0.08s linear;
}

@keyframes diceNumSpin {
  0%   { transform: rotateY(0deg) scale(1.2); opacity: 0.3; }
  50%  { transform: rotateY(90deg) scale(0.8); opacity: 0.1; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

.dice-outcome {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2px;
  min-height: 26px;
  transition: all 0.3s;
  text-align: center;
}
.dice-outcome.win  { color: #4ade80; text-shadow: 0 0 16px rgba(74,222,128,0.8); }
.dice-outcome.lose { color: #f87171; text-shadow: 0 0 16px rgba(248,113,113,0.8); }
.dice-rolled-num {
  font-size: 22px;
  font-weight: 900;
  margin-right: 6px;
  opacity: 0.85;
}


.dice-slider-section {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 16px;
}

.dice-slider-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.dice-label-low, .dice-label-high {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1px;
}
.dice-target-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.dice-target-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: 2px;
}
.dice-target-val {
  font-size: 28px;
  font-weight: 900;
  color: #a78bfa;
  text-shadow: 0 0 16px rgba(167,139,250,0.6);
  line-height: 1;
}

/* Трек слайдера */
.dice-slider-track {
  position: relative;
  width: 100%;
  height: 10px;
  margin-bottom: 16px;
}
.dice-slider-fill {
  position: absolute;
  top: 0; left: 0;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, #4ade80, #22c55e);
  pointer-events: none;
  transition: width 0.1s;
}
.dice-range {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 10px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  outline: none;
  cursor: pointer;
}
.dice-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  border: 3px solid #fff;
  box-shadow: 0 0 12px rgba(124,58,237,0.7);
  cursor: pointer;
  margin-top: -7px;
}
.dice-range::-webkit-slider-runnable-track {
  background: transparent;
  height: 10px;
  border-radius: 10px;
}

/* Статистика */
.dice-stats-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.dice-stat {
  flex: 1;
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.06);
}
.dice-stat-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.dice-stat-val {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
}
.dice-stat-gold  { color: #fde68a; text-shadow: 0 0 8px rgba(253,230,138,0.4); }
.dice-stat-green { color: #4ade80; text-shadow: 0 0 8px rgba(74,222,128,0.4); }

/* Режим меньше/больше */
.dice-mode-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.dice-mode-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: default;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.dice-mode-btn.active {
  background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(91,33,182,0.4));
  border-color: rgba(167,139,250,0.4);
  color: #a78bfa;
  box-shadow: 0 0 16px rgba(124,58,237,0.3);
}

/* Ставка */
.dice-bet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.dice-bet-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(253,230,138,0.25);
  border-radius: 12px;
  padding: 10px 12px;
}
.dice-bet-star {
  font-size: 18px;
  color: #fde68a;
  text-shadow: 0 0 8px rgba(253,230,138,0.5);
}
.dice-bet-input {
  background: none;
  border: none;
  outline: none;
  color: #fde68a;
  font-size: 20px;
  font-weight: 900;
  width: 100%;
  -moz-appearance: textfield;
}
.dice-bet-input::-webkit-inner-spin-button,
.dice-bet-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.dice-bet-half, .dice-bet-double, .dice-bet-max {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 700;
  cursor: default;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
.dice-bet-half:active, .dice-bet-double:active, .dice-bet-max:active {
  background: rgba(255,255,255,0.15);
  transform: scale(0.93);
}
.dice-bet-max {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.25);
  color: #fbbf24;
}

/* Кнопка броска */
.dice-roll-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 2px;
  cursor: default;
  box-shadow: 0 4px 24px rgba(124,58,237,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: transform 0.1s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.dice-roll-btn:active { transform: scale(0.97); box-shadow: 0 2px 10px rgba(124,58,237,0.3); }
.dice-roll-btn:disabled { opacity: 0.4; box-shadow: none; }

/* История */
.dice-history-wrap {
  width: 100%;
}
.dice-history-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.dice-history {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dice-hist-item {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
}
.dice-hist-item.win  { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }
.dice-hist-item.lose { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }

/* ═══════════════════════════════════════════════════════════════
   КУРОЧКА
   ═══════════════════════════════════════════════════════════════ */

.chicken-card-preview {
  height: 115px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  background: linear-gradient(135deg, #1a3a1a, #2d5a2d);
  width: 100%;
}

#chickenCanvas {
  width: 100%;
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
  background: #1a1f35;
}

#chickenCanvas canvas {
  display: block;
  width: 100% !important;
  height: 280px !important;
  border-radius: 16px;
}

.chicken-info-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.chicken-info-box {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}

.chicken-info-label {
  display: block;
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.chicken-info-val {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #f0c040;
}

.chicken-bet-row { margin-bottom: 16px; }

.chicken-btn-row {
  display: flex;
  gap: 12px;
}

.chicken-btn-row .primary-btn,
.chicken-btn-row .secondary-btn {
  flex: 1;
  padding: 16px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform .1s, opacity .1s;
}

.chicken-btn-row .primary-btn {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}

.chicken-btn-row .secondary-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
}

.chicken-btn-row .primary-btn:active,
.chicken-btn-row .secondary-btn:active { transform: scale(0.97); }
.chicken-btn-row .primary-btn:disabled { opacity: 0.4; cursor: default; }
/* ═══ BURGER HIDDEN ═══ */
.menu-burger{display:none!important}
#sideMenu{display:none!important}

/* ═══ BOTTOM NAV ═══ */
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:50;display:flex;align-items:stretch;width:min(var(--app-width),100vw);background:rgba(8,18,28,0.92);border-top:1px solid rgba(144,184,255,0.12);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 24px rgba(0,0,0,0.4)}
.bn-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 4px;border-radius:12px;border:none;background:transparent;color:#4a6a8a;cursor:pointer;transition:all .2s;position:relative;-webkit-tap-highlight-color:transparent}
.bn-tab:active{transform:scale(0.92)}
.bn-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.bn-icon svg{width:22px;height:22px;transition:all .2s}
.bn-label{font-size:10px;font-weight:600;letter-spacing:0.2px;line-height:1;transition:all .2s}
.bn-tab.active{color:#3b82f6}
.bn-tab.active .bn-icon svg{filter:drop-shadow(0 0 5px rgba(59,130,246,0.6));transform:translateY(-1px)}
.bn-tab.active .bn-label{color:#60a5fa;font-weight:700}
.bn-tab.active::before{content:'';position:absolute;inset:0;border-radius:12px;background:rgba(59,130,246,0.12);border:1px solid rgba(59,130,246,0.18)}
main{padding-bottom:16px!important}

/* ═══ PROFILE TABS ═══ */
#profile{padding:0;margin-top:-16px}
.profile-hero-card{display:flex;align-items:center;gap:14px;padding:14px 16px;margin:8px 12px 8px;background:linear-gradient(135deg,#0f1e30,#132235);border:1px solid rgba(144,184,255,0.12);border-radius:18px}
.profile-tabs{display:flex;gap:8px;padding:0 12px 10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.profile-tabs::-webkit-scrollbar{display:none}
.profile-tab{flex-shrink:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;color:#7ab4d8;font-size:12px;font-weight:600;padding:6px 16px;cursor:pointer;transition:all .15s;white-space:nowrap}
.profile-tab:hover{background:rgba(255,255,255,.1);color:#e9f3ff}
.profile-tab.active{background:#1e4a7a;border-color:#3a7abd;color:#fff}
.profile-pane{display:none;padding:4px 12px 16px}
#pane-friends{padding-bottom:70px}
#pane-gifts{padding-bottom:50px}
.profile-pane.active{display:block}

/* ═══ BONUSES PAGE ═══ */
#bonuses{padding:0}
.bonuses-page{padding:0 12px 40px}
.bonuses-header{padding:0 4px 0}
.bonuses-title{font-size:22px;font-weight:800;color:var(--text)}
.bonuses-subtitle{font-size:13px;color:var(--muted);margin-top:2px}
.bonus-card{display:flex;align-items:center;gap:14px;background:#0f1a26;border:1px solid rgba(144,184,255,0.1);border-radius:18px;padding:16px;margin-bottom:12px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.bonus-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:18px 18px 0 0}
.daily-card::before,.wheel-card::before{background:linear-gradient(90deg,#f59e0b,#ef4444)}
.promo-card::before{background:linear-gradient(90deg,#10b981,#3b82f6)}
.ref-card::before{background:linear-gradient(90deg,#8b5cf6,#ec4899)}
.vip-card::before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.bonus-card:active{transform:scale(0.98)}
.bonus-card-icon{font-size:28px;flex-shrink:0}
.bonus-card-body{flex:1;min-width:0}
.bonus-card-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:3px}
.bonus-card-desc{font-size:12px;color:var(--muted);line-height:1.4}
.bonus-free-badge{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-radius:8px;padding:4px 10px;font-size:11px;font-weight:800;flex-shrink:0}
.bonus-arrow{color:var(--muted);font-size:22px;flex-shrink:0}
.bonus-promo-input-row{display:flex;gap:8px;margin-top:8px}
.bonus-promo-input{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(144,184,255,0.1);border-radius:10px;padding:8px 12px;color:var(--text);font-size:13px;outline:none;font-family:inherit}
.bonus-promo-input:focus{border-color:rgba(59,130,246,0.5)}
.bonus-promo-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:10px;padding:8px 16px;font-size:16px;font-weight:700;cursor:pointer;flex-shrink:0}

/* ═══ СКРЫВАЕМ старые vip/support секции ═══ */
section#vip.tabpane, section#support.tabpane{display:none!important}

/* ═══ НЕОН на кейсах ═══ */
.case-tile:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 0 1px rgba(144,184,255,.4),0 0 20px rgba(59,130,246,0.3);border-color:rgba(144,184,255,.6)}
.spin-btn{background:linear-gradient(135deg,#3b82f6,#2563eb)!important;box-shadow:0 0 16px rgba(59,130,246,0.4)}
.pool-card.rare { box-shadow: 0 0 20px rgba(89,182,255,0.6); border: 1px solid rgba(89,182,255,0.5) !important; }
.pool-card.epic { box-shadow: 0 0 20px rgba(200,140,255,0.6); border: 1px solid rgba(200,140,255,0.5) !important; }
.pool-card.legendary { box-shadow: 0 0 24px rgba(255,211,107,0.7); border: 1px solid rgba(255,211,107,0.6) !important; }

/* ═══ VIP В ПРОФИЛЕ — обёртка ═══ */
#pane-vip .vip-container {
  background: linear-gradient(160deg, #0d1b2a, #0a1520);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 18px;
  overflow: hidden;
  margin: 4px 0 12px;
  box-shadow: 0 0 24px rgba(255,215,0,0.06), inset 0 1px 0 rgba(255,215,0,0.08);
}

#pane-vip .vip-modal-body {
  padding: 16px;
}

/* Текущий уровень — чуть компактнее */
#pane-vip .vip-current-level {
  margin-bottom: 14px;
  padding: 16px;
}

/* Карточки уровней — тоньше */
#pane-vip .vip-levels {
  gap: 10px;
  margin-bottom: 14px;
}

#pane-vip .vip-level-card {
  padding: 14px;
}

/* Цветная обводка по типу уровня */
#pane-vip .vip-level-card.bronze { border-color: rgba(205,127,50,0.4); }
#pane-vip .vip-level-card.silver { border-color: rgba(192,192,192,0.4); }
#pane-vip .vip-level-card.gold   { border-color: rgba(255,215,0,0.4); }
#pane-vip .vip-level-card.diamond{ border-color: rgba(168,237,255,0.4); }

#pane-vip .vip-level-card.bronze:not(.locked) { box-shadow: 0 0 12px rgba(205,127,50,0.15); }
#pane-vip .vip-level-card.silver:not(.locked) { box-shadow: 0 0 12px rgba(192,192,192,0.12); }
#pane-vip .vip-level-card.gold:not(.locked)   { box-shadow: 0 0 12px rgba(255,215,0,0.15); }
#pane-vip .vip-level-card.diamond:not(.locked){ box-shadow: 0 0 12px rgba(168,237,255,0.15); }

/* Статистика */
#pane-vip .vip-stats {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  margin: 0 0 8px;
}

/* ═══ VIP PANE — на всю доступную высоту ═══ */
#pane-vip {
  padding: 0 !important;
  /* Растягиваем на всё что осталось после карточки профиля и табов */
  height: calc(var(--tg-height) - 180px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
#pane-vip::-webkit-scrollbar { display: none; }

#pane-vip .vip-container {
  min-height: 100%;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-top: 1px solid rgba(255,215,0,0.15);
}

#pane-vip .vip-modal-body {
  padding: 16px 16px 100px;
}

/* ═══════════════════════════════════════════════════════════════
   VIP 2.0 — PREMIUM DESIGN
   ═══════════════════════════════════════════════════════════════ */
.vip2-page {
  padding: 12px 12px 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Герой текущего уровня ── */
.vip2-hero {
  border-radius: 20px;
  padding: 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: transparent;
}
.vip2-hero::before { display: none; }
.vip2-hero-icon { font-size: 52px; line-height: 1; margin-bottom: 6px; }
.vip2-hero-name {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2px;
}
.vip2-hero-sub { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.vip2-progress-wrap {
  height: 8px;
  background: rgba(0,0,0,0.4);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid rgba(255,215,0,0.1);
}
.vip2-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ffd700, #ffed4e);
  border-radius: 999px;
  transition: width .5s ease;
  box-shadow: 0 0 8px rgba(255,215,0,0.5);
}
.vip2-progress-text { font-size: 12px; color: rgba(255,215,0,0.8); font-weight: 600; }

/* ── Кэшбек ── */
.vip2-cashback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #0a1e14, #0d2a1a);
  border: 1px solid rgba(0,255,127,0.2);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 0 20px rgba(0,255,127,0.05);
}
.vip2-cashback::before {
  content: '';
  position: absolute;
}
.vip2-cashback-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.vip2-cashback-amount { font-size: 26px; font-weight: 900; color: #00ff7f; line-height: 1; }
.vip2-cashback-pct { font-size: 11px; color: rgba(0,255,127,0.6); margin-top: 4px; }
.vip2-cashback-pct span { color: #00ff7f; font-weight: 700; }
.vip2-claim-btn {
  background: linear-gradient(135deg, #00d966, #00b854);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 16px rgba(0,217,102,0.3);
  transition: all .2s;
  flex-shrink: 0;
}
.vip2-claim-btn:active { transform: scale(0.96); }
.vip2-claim-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Статистика ── */
.vip2-stats {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 14px 20px;
}
.vip2-stat { flex: 1; text-align: center; }
.vip2-stat-val { font-size: 18px; font-weight: 800; color: var(--text); }
.vip2-stat-label { font-size: 11px; color: var(--muted); margin-top: 2px; }
.vip2-stat-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.08); }

/* ── Уровни ── */
.vip2-levels-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 2px;
}
.vip2-levels { display: flex; flex-direction: column; gap: 8px; }

.vip2-tier {
  display: block;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: all .2s;
  position: relative;
  overflow: hidden;
  padding: 0;
}
.vip2-tier::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}
.vip2-tier.bronze { border: 2px solid rgba(205,127,50,0.6) !important; box-shadow: 0 0 10px rgba(205,127,50,0.4), inset 0 0 10px rgba(205,127,50,0.1) !important; }
.vip2-tier.silver { border: 2px solid rgba(192,192,192,0.6) !important; box-shadow: 0 0 10px rgba(192,192,192,0.35), inset 0 0 10px rgba(192,192,192,0.08) !important; }
.vip2-tier.gold   { border: 2px solid rgba(255,215,0,0.7) !important; box-shadow: 0 0 12px rgba(255,215,0,0.45), inset 0 0 10px rgba(255,215,0,0.1) !important; }
.vip2-tier.diamond{ border: 2px solid rgba(168,237,255,0.6) !important; box-shadow: 0 0 12px rgba(168,237,255,0.4), inset 0 0 10px rgba(168,237,255,0.08) !important; }

/* Активный тир */
.vip2-tier.active {
  box-shadow: 0 0 16px rgba(255,215,0,0.12);
}
.vip2-tier.bronze.active { border-color: rgba(205,127,50,0.5); box-shadow: 0 0 14px rgba(205,127,50,0.2); }
.vip2-tier.silver.active { border-color: rgba(192,192,192,0.45); }
.vip2-tier.gold.active   { border-color: rgba(255,215,0,0.5); box-shadow: 0 0 14px rgba(255,215,0,0.2); }
.vip2-tier.diamond.active{ border-color: rgba(168,237,255,0.5); box-shadow: 0 0 14px rgba(168,237,255,0.2); }

.vip2-tier-left { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.vip2-tier-icon { font-size: 28px; }
.vip2-tier-icon-img { width: 100%; height: auto; display: block; border-radius: 13px; }
.vip2-tier.bronze .vip2-tier-icon-img { filter: drop-shadow(0 0 6px rgba(205,127,50,0.6)); }
.vip2-tier.silver .vip2-tier-icon-img { filter: drop-shadow(0 0 6px rgba(192,192,192,0.5)); }
.vip2-tier.gold   .vip2-tier-icon-img { filter: drop-shadow(0 0 6px rgba(255,215,0,0.6)); }
.vip2-tier.diamond .vip2-tier-icon-img { filter: drop-shadow(0 0 6px rgba(168,237,255,0.6)); }
.vip2-tier-name { font-size: 15px; font-weight: 700; color: var(--text); }
.vip2-tier-range { font-size: 11px; color: var(--muted); margin-top: 1px; }
.vip2-tier-right { position: relative; z-index: 1; text-align: right; }
.vip2-tier-perk { font-size: 14px; font-weight: 700; color: #60a5fa; }
.vip2-tier-extra { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Значок текущего уровня */
.vip2-tier.active .vip2-tier-name::after {
  content: ' ✓';
  color: #ffd700;
  font-size: 12px;
}

/* ── VIP2 тиры — состояния ── */

/* Пройденные — серые, приглушённые */
.vip2-tier.completed {
  background: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.06) !important;
  opacity: 0.5;
}
.vip2-tier.completed::before { background: #2a3a4a !important; }
.vip2-tier.completed .vip2-tier-name { color: var(--muted); }
.vip2-tier.completed .vip2-tier-perk { color: var(--muted); }
.vip2-tier.completed .vip2-tier-icon { filter: grayscale(1); }
.vip2-tier.completed .vip2-tier-icon-img { filter: grayscale(1); }

/* Заблокированные — тёмные с замком */
.vip2-tier.locked {
  background: rgba(0,0,0,0.2) !important;
  border-color: rgba(255,255,255,0.04) !important;
  opacity: 0.35;
}
.vip2-tier.locked::before { background: #1a2a3a !important; }
.vip2-tier.locked .vip2-tier-icon { filter: grayscale(1) brightness(0.5); }
.vip2-tier.locked .vip2-tier-icon-img { filter: grayscale(1) brightness(0.5); }
.vip2-tier.locked .vip2-tier-name::after { content: ' 🔒'; font-size: 11px; }
.vip2-tier.locked .vip2-tier-perk { color: #2a4060; }

/* Мини прогресс-бар под активным тиром */
.vip2-tier-mini-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}
.vip2-tier-mini-bar {
  height: 100%;
  background: linear-gradient(90deg, #ffd700, #ffed4e);
  border-radius: 0 0 14px 14px;
  transition: width .5s ease;
  box-shadow: 0 0 6px rgba(255,215,0,0.6);
}
/* Для бронзы/серебра/алмаза свои цвета прогресса */
.vip2-tier.bronze .vip2-tier-mini-bar { background: linear-gradient(90deg, #cd7f32, #e8a060); }
.vip2-tier.silver .vip2-tier-mini-bar { background: linear-gradient(90deg, #a0a0a0, #d0d0d0); }
.vip2-tier.gold   .vip2-tier-mini-bar { background: linear-gradient(90deg, #ffd700, #ffed4e); }
.vip2-tier.diamond .vip2-tier-mini-bar{ background: linear-gradient(90deg, #89d4ff, #c8f0ff); }

/* ═══════════════════════════════════════════════════════════════
   SUPPORT PAGE 2.0
   ═══════════════════════════════════════════════════════════════ */
.sup-page {
  padding: 16px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Герой */
.sup-hero {
  text-align: center;
  padding: 28px 20px 22px;
  background: linear-gradient(160deg, #0d1b2a, #111e30);
  border: 1px solid rgba(144,184,255,0.12);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.sup-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
}
.sup-avatar {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 12px rgba(59,130,246,0.4));
}
.sup-hero-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.sup-hero-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}
.sup-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #34d399;
}
.sup-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: supPulse 2s infinite;
}
@keyframes supPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* Главная кнопка */
.sup-main-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: none;
  border-radius: 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 24px rgba(37,99,235,0.4);
  transition: all .2s;
}
.sup-main-btn:active { transform: scale(0.98); box-shadow: 0 0 12px rgba(37,99,235,0.3); }

/* Заголовок секции */
.sup-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 2px;
}

/* FAQ аккордеон */
.sup-faq {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(144,184,255,0.06);
  border: 1px solid rgba(144,184,255,0.1);
  border-radius: 16px;
  overflow: hidden;
}
.sup-faq-item {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background .15s;
}
.sup-faq-item:last-child { border-bottom: none; }
.sup-faq-item:active { background: rgba(59,130,246,0.06); }
.sup-faq-q {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sup-faq-q::after {
  content: '›';
  color: var(--muted);
  font-size: 18px;
  transition: transform .2s;
  flex-shrink: 0;
}
.sup-faq-item.open .sup-faq-q::after { transform: rotate(90deg); color: #3b82f6; }
.sup-faq-a {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, margin-top .3s;
}
.sup-faq-item.open .sup-faq-a {
  max-height: 100px;
  margin-top: 8px;
}

/* Футер */
.sup-note {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.2);
  padding-top: 4px;
}

/* ═══ ЗАЩИТА КНОПОК ОТ ПЕРЕКРЫТИЯ BOTTOMBAR ═══ */
/* Добавляем отступ снизу во всех игровых контейнерах */
.game-section { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
/* Плинко — position:fixed на весь экран, не нужен padding */
#plinkoGame { padding-bottom: 0 !important; }
/* Краш — убираем лишний отступ снизу */
#crashGame { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
.dice-page,
.crash-container,
.coinflip-container,
.mines-fullscreen-wrapper,
.blackjack-container,
.games-menu-grid { padding-bottom: 16px !important; }
.wheel-page { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }


/* ═══ ТОПБАР — профиль слева ═══ */
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }


/* ═══ STAR PNG ЗАМЕНА ═══ */
/* Заменяем .star спан на картинку */
.star {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0 !important;
  width: 1em !important;
  height: 1em !important;
  font-size: inherit !important;
  vertical-align: middle !important;
}
.star::before {
  content: '' !important;
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  background: url('/images/casino items/star.png') center/contain no-repeat !important;
  font-size: inherit !important;
}

/* Кошелёк — звёздочка */
.star-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  background: url('/images/casino items/star.png') center/contain no-repeat;
  font-size: 0;
}

/* Маленькие звёзды в ценах */
.price-pill .star,
.tile-price .star,
.wallet-inner .star,
.win-price .star,
.modal-star,
.sell-earn .star {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
}

/* ═══ STAR PNG IMG ═══ */
img.star-png {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
  margin-right: 2px;
  flex-shrink: 0;
}
img.star-png.modal-star {
  width: 22px;
  height: 22px;
}
.wallet-inner .star-icon {
  width: 16px;
  height: 16px;
  background: url('/images/casino items/star.png') center/contain no-repeat;
  display: inline-block;
  flex-shrink: 0;
}
/* Текстовые ★ которые нельзя заменить — делаем маленькими */
.cases-tab, .bet-currency, .preset-btn, .stop-currency,
.cashout-amount, .bj-bet-amount, .pk-bet-amount,
.dice-stat-val, .dice-bet-star,
.win-amount, .sell-earn {
  font-family: system-ui, sans-serif;
}

/* Аватар — отдельный блок слева */
.topbar-avatar-btn { margin-right: 0; }
/* Кошелёк — отдельный блок справа, без аватара */
.topbar > .topbar-right { flex-direction: row; gap: 8px; }

/* ═══ TOPBAR AVATAR + WHEEL ═══ */
.topbar-left-group {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: visible;
}

/* Светло-синяя обводка аватара */
.topbar-avatar {
  width: 52px !important;
  height: 52px !important;
  border: 2px solid #60a5fa !important;
  box-shadow: 0 0 14px rgba(96,165,250,0.7), 0 0 28px rgba(96,165,250,0.3);
  position: relative;
  z-index: 1;
}

/* Lucky Wheel кнопка */
.topbar-wheel-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar-wheel-btn:active { transform: scale(0.9) rotate(20deg); }
.topbar-wheel-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  filter: none;
  display: block;
  position: relative;
  z-index: 2;
  margin-left: 6px;
}

.topbar-wheel-btn:hover .topbar-wheel-img {
  transform: scale(1.2);
  transition: transform .25s ease;
}
.topbar-wheel-img {
  transition: transform .25s ease;
}


/* ═══ БАННЕРЫ ═══ */
.home-banners { display: flex; flex-direction: column; gap: 8px; width: 100%; box-sizing: border-box; }
.banner-new-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; box-sizing: border-box; }
.banner-slider { position: relative; overflow: hidden; border-radius: 14px; }
.banner-slides { display: flex; transition: transform .4s cubic-bezier(0.4,0,0.2,1); }
.banner-slide { min-width: 100%; width: 100%; cursor: pointer; }
.banner-slide img { width: 100%; height: 160px; object-fit: cover; display: block; border-radius: 14px; }
.banner-png-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.banner-png-col .banner-png { flex: 1; border-radius: 14px; overflow: hidden; cursor: pointer; }
.banner-png-col .banner-png-img { width: 100%; height: 76px; object-fit: cover; display: block; }
.banner-png-games { border-radius: 14px; overflow: hidden; cursor: pointer; }
.banner-png-games .banner-png-img { width: 100%; height: 130px; object-fit: cover; display: block; }
.banner-png { border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .15s; }
.banner-png:active { transform: scale(0.97); }
.banner-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; }
.banner-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: all .3s; }
.banner-dot.active { width: 18px; border-radius: 3px; background: #fff; }

/* ═══ ТАБЫ — свечения ═══ */
.cases-tab[data-filter="all"] { border-color: rgba(150,150,150,0.3); }
.cases-tab[data-filter="all"].active { box-shadow: 0 0 12px rgba(150,150,150,0.4); }
.cases-tab[data-filter="cheap"] { border-color: rgba(138,43,226,0.4); }
.cases-tab[data-filter="cheap"].active { background: rgba(138,43,226,0.25) !important; border-color: rgba(138,43,226,0.7) !important; box-shadow: 0 0 14px rgba(138,43,226,0.5) !important; color: #d8b4fe !important; }
.cases-tab[data-filter="mid"] { border-color: rgba(100,210,255,0.4); }
.cases-tab[data-filter="mid"].active { background: rgba(100,210,255,0.15) !important; border-color: rgba(100,210,255,0.7) !important; box-shadow: 0 0 14px rgba(100,210,255,0.5) !important; color: #a8edff !important; }
.cases-tab[data-filter="premium"] { border-color: rgba(255,215,0,0.4); }
.cases-tab[data-filter="premium"].active { background: rgba(255,215,0,0.15) !important; border-color: rgba(255,215,0,0.7) !important; box-shadow: 0 0 14px rgba(255,215,0,0.5) !important; color: #ffd700 !important; }

/* ═══ БАННЕРЫ — фикс обрезки при растягивании ═══ */
.home-banners { overflow: hidden !important; }
.banner-new-grid { overflow: hidden !important; }
#casesGame { overflow: hidden; }
#casePlay { width: 100%; max-width: var(--app-width); overflow: hidden; }

/* Баннеры — выходят за padding main на всю ширину */
.home-banners {
  margin-left: -12px !important;
  margin-right: -12px !important;
  width: calc(100% + 24px) !important;
}
.home-banners .banner-slide img,
.home-banners .banner-png-games .banner-png-img {
  border-radius: 0 !important;
}
.home-banners .banner-slider { border-radius: 0 !important; }
.home-banners .banner-png-games { border-radius: 0 !important; }
.home-banners .banner-png-col .banner-png { border-radius: 0 !important; }

/* ═══ БАННЕРЫ — contain чтобы не обрезало ═══ */
.home-banners .banner-slide img {
  object-fit: contain !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.home-banners .banner-png-games .banner-png-img {
  object-fit: contain !important;
  height: auto !important;
  background: transparent !important;
}
.home-banners .banner-png-col .banner-png-img {
  object-fit: contain !important;
  height: auto !important;
  min-height: 60px !important;
  background: transparent !important;
}

/* ═══ КНОПКА НАЗАД — PNG ═══ */
.back-png {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-png:active { transform: scale(0.9); }
.back-png img { width: 72px !important; height: 72px !important; }

/* ═══ БАННЕРЫ — фикс скушанных краёв ═══ */
.banner-png-col .banner-png {
  overflow: visible !important;
}
.banner-png-col .banner-png-img {
  border-radius: 14px !important;
}

/* Баннеры — отменяем отрицательный margin */
.home-banners {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* ═══ COINFLIP HEADER PNG ═══ */
.coinflip-header { padding: 0; margin: -72px -16px 4px -16px; background: #0a1520; border-radius: 0 0 12px 12px; }
.coinflip-header-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  object-fit: contain;
}


/* PNG на всю карточку */

/* Редкость */

/* Цена */

/* Кнопка i */


/* ═══ SUPPORT PNG ═══ */
.sup-hero-png {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  object-fit: contain;
}
.sup-hero {
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 12px;
  position: relative;
}
.sup-hero::before { display: none !important; }

/* ═══ КЕЙСЫ — барабан + скролл + карточки ═══ */

/* Карточки пула — квадратные с скроллом */

/* Статус поддержки — таблетка поверх чёрного места в PNG */
.sup-hero .sup-status {
  background: rgba(0,0,0,0.85) !important;
  border: 1px solid rgba(16,185,129,0.3) !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #34d399 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px auto 0 !important;
  align-self: center !important;
}

/* Статус ПОВЕРХ PNG — абсолютно снизу */
.sup-hero {
  position: relative !important;
  display: block !important;
  margin-bottom: 12px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.sup-hero::before { display: none !important; }
.sup-hero-png {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}
.sup-hero .sup-status {
  position: absolute !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(0,0,0,0.75) !important;
  border: 1px solid rgba(16,185,129,0.4) !important;
  border-radius: 999px !important;
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #34d399 !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

.pool-card .pc-price .price-pill {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 11px !important;
  padding: 3px 10px !important;
  background: rgba(0,0,0,0.85) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important;
}


/* ═══ POOL CARDS FINAL ═══ */
.pool-row.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 0 16px;
  overflow-y: auto;
  max-height: calc(var(--tg-height) - 370px);
  scrollbar-width: none;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}
.pool-row.cards::-webkit-scrollbar { display: none; }
.pool-card {
  width: 100%;
  height: 170px;
  background: #0f1a26;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden !important;
  box-sizing: border-box;
  border-radius: 12px !important;
}
.pc-preview {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}
.pc-emoji {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
.pc-pill {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: #9bb3c8;
  z-index: 2;
  white-space: nowrap;
  background: rgba(10,20,30,0.7);
}
.pool-card.rare .pc-pill { color: #59b6ff; }
.pool-card.epic .pc-pill { color: #c88cff; }
.pool-card.legendary .pc-pill { color: #ffd36b; }
.pc-price {
  position: absolute;
  bottom: 26px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 2;
}
.pc-price .price-pill {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; padding: 3px 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
}
.pc-i {
  position: absolute; top: 5px; right: 5px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid #395a86; display: grid; place-items: center;
  color: #9fb7d1; font-size: 10px; cursor: pointer;
  background: rgba(10,20,30,0.8); z-index: 3;
}

/* ═══ КЕЙС — барабан фиксирован, пул скроллится ═══ */


.pool-card .pc-preview { border: none !important; outline: none !important; }
.pool-card .pc-emoji { border: none !important; outline: none !important; }

.pool-card, .pool-card * { outline: none !important; }
.pool-card { -webkit-tap-highlight-color: transparent; }

/* ═══ COINFLIP ИСТОРИЯ — на всю страницу ═══ */
#coinflipGame .coinflip-container {
  padding: 70px 0 0 !important;
  max-width: 100% !important;
}
#coinflipGame .coin-history {
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  padding: 16px 16px calc(72px + env(safe-area-inset-bottom)) !important;
}
#coinflipGame .history-list {
  max-height: none !important;
  overflow-y: visible !important;
}

/* ═══ COINFLIP BET FIXES ═══ */

/* Звезда около ставки — выровнена */
.bet-currency img.star-png {
  width: 24px !important;
  height: 24px !important;
  vertical-align: middle !important;
  transform: none !important;
  display: inline-block !important;
}

/* Пресеты — звёзды выровнены */
.preset-btn img.star-png {
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle !important;
  transform: none !important;
  display: inline-block !important;
  margin: 0 0 0 2px !important;
}

/* preset-btn — выравниваем содержимое */
.preset-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}
/* ═══════════════════════════════════════════════════════════════
   CRASH NEW DESIGN: STAKE/WIN OVERLAY + BET PANEL
   ═══════════════════════════════════════════════════════════════ */



/* NEW BET PANEL */
/* ═══════════════════════════════════════════════════════
   CRASH — NEON REDESIGN 3.0
   ═══════════════════════════════════════════════════════ */

/* ── СТАВКА / ВЫИГРЫШ бар под полем ── */
#crash-stake-bar {
  display: flex;
  align-items: stretch;
  width: calc(min(var(--app-width), 100vw));
  margin-left: calc(-1 * min(var(--app-width), 100vw) / 2 + 50%);
  background: rgba(7, 10, 24, 0.9);
  border-top: 1px solid rgba(74,140,255,0.15);
  border-bottom: 1px solid rgba(74,140,255,0.15);
  border-radius: 0;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.csb-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  gap: 5px;
}

.csb-divider {
  width: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.csb-divider svg {
  width: 44px;
  height: auto;
  overflow: visible;
}

.csb-value {
  font-size: 17px;
  font-weight: 900;
  color: #7ecfff;
  text-shadow: 0 0 14px rgba(126,207,255,0.55);
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.csb-value.green {
  color: #4ade80;
  text-shadow: 0 0 14px rgba(74,222,128,0.55);
}

.csb-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── Панель ставок ── */
.crash-new-panel {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 4px 0 0;
}

/* ── Табы ── */
.crash-tabs {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.07);
  padding: 3px;
}

.crash-tab {
  flex: 1;
  padding: 10px 8px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.35);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s;
}

.crash-tab.active {
  background: rgba(74,140,255,0.15);
  color: #fff;
  box-shadow: 0 0 16px rgba(74,158,255,0.15);
}

/* ── Ввод суммы + кнопка СТАВКИ ── */
.crash-input-bet-row {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.crash-amount-wrap {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 13px;
  padding: 0;
  gap: 8px;
}

/* Капсула вокруг числа внутри wrap */
.crash-amount-wrap .crash-amount-input {
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 40px;
  background: transparent;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  padding: 0 16px;
  height: 48px;
  flex: 1;
  min-width: 0;
  outline: none;
  box-sizing: border-box;
  -moz-appearance: textfield;
}

.crash-amount-wrap .crash-amount-input::-webkit-outer-spin-button,
.crash-amount-wrap .crash-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.crash-pm-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 10px;
  border: none;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.65);
  font-size: 22px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  line-height: 1;
  box-sizing: border-box;
}

.crash-pm-btn:active {
  background: rgba(74,158,255,0.25);
  color: #fff;
}

.crash-amount-input {
  flex: 1;
  text-align: center;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 40px;
  outline: none;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  padding: 0 16px;
  height: 48px;
  min-width: 0;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.crash-amount-input::-webkit-outer-spin-button,
.crash-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Главная кнопка СТАВКИ ── */
.crash-main-btn {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #4a9eff 0%, #1a4fd4 100%);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 4px 22px rgba(74,158,255,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: all 0.22s;
  position: relative;
  overflow: hidden;
}

.crash-main-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, transparent 100%);
  pointer-events: none;
}

.cmb-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.cmb-label {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cmb-amount {
  font-size: 15px;
  font-weight: 900;
  opacity: 0.9;
}

.crash-main-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2px 10px rgba(74,158,255,0.3);
}

.crash-main-btn.bet-placed {
  background: linear-gradient(160deg, #2ecc71 0%, #16a34a 100%);
  box-shadow: 0 4px 20px rgba(46,204,113,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
  animation: pulse-green 2s infinite;
}

/* ── Быстрые кнопки ── */
.crash-quick-row {
  display: flex;
  gap: 6px;
}

.crash-quick-btn {
  flex: 1;
  padding: 10px 4px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
}

.crash-quick-btn:active {
  background: rgba(74,158,255,0.15);
  border-color: rgba(74,158,255,0.35);
  color: #7ecfff;
}

/* ── Авто-вывод ── */
.crash-autocashout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 13px;
  padding: 12px 16px;
  gap: 10px;
}

.crash-ac-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

.crash-ac-input-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  background: rgba(74,158,255,0.12);
  border: 1px solid rgba(74,158,255,0.4);
  border-radius: 10px;
  padding: 7px 16px;
}

.crash-ac-x {
  font-size: 20px;
  font-weight: 900;
  color: #7ecfff;
  text-shadow: 0 0 10px rgba(126,207,255,0.5);
  line-height: 1;
  margin-right: 2px;
}

.crash-ac-val-input {
  width: 60px;
  background: transparent;
  border: none;
  outline: none;
  color: #7ecfff;
  font-size: 20px;
  font-weight: 900;
  text-align: left;
  text-shadow: 0 0 10px rgba(126,207,255,0.5);
  -moz-appearance: textfield;
}

.crash-ac-val-input::-webkit-outer-spin-button,
.crash-ac-val-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Пресеты ── */
.crash-preset-row {
  display: flex;
  gap: 6px;
}

.crash-preset-btn {
  flex: 1;
  padding: 9px 4px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
}

.crash-preset-btn.active {
  background: rgba(74,158,255,0.14);
  border-color: rgba(74,158,255,0.5);
  color: #7ecfff;
  box-shadow: 0 0 12px rgba(74,158,255,0.18);
}

.crash-preset-btn:active {
  opacity: 0.7;
}

/* ── АВТО ИГРА панель ── */
#crash-auto-panel {
  display: none;
  flex-direction: column;
  gap: 9px;
}

.crash-stop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 10px 12px;
}

.crash-stop-label {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
}

.crash-stop-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 5px 8px;
}

.crash-stop-input {
  width: 52px;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  -moz-appearance: textfield;
}
.crash-stop-input::-webkit-outer-spin-button,
.crash-stop-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Toggle switch */
.crash-stop-toggle {
  position: relative;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.crash-stop-toggle input { display: none; }

.cst-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  border-radius: 20px;
  transition: all 0.2s;
}

.cst-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  transition: all 0.2s;
}

.crash-stop-toggle input:checked + .cst-slider {
  background: rgba(74,158,255,0.5);
  border: 1px solid rgba(74,158,255,0.7);
}

.crash-stop-toggle input:checked + .cst-slider::before {
  transform: translateX(14px);
  background: #4a9eff;
}

/* Кнопка АВТО СТАРТ */
.crash-auto-start-btn {
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #9b59f5 0%, #6b21d4 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(155,89,245,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: all 0.22s;
}

.crash-auto-start-btn:active { transform: scale(0.98); }

.crash-auto-start-btn.active {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 4px 20px rgba(239,68,68,0.45);
  animation: pulse-red 2s infinite;
}

/* Кнопка АВТО СТАРТ в ряд с инпутом */
.crash-main-btn--auto {
  flex-shrink: 0;
  width: 100px;
  height: 52px;
  background: linear-gradient(135deg, #9b59f5 0%, #6b21d4 100%);
  box-shadow: 0 4px 20px rgba(155,89,245,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
}
.crash-main-btn--auto.active {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 4px 20px rgba(239,68,68,0.5);
  animation: pulse-red 2s infinite;
}
.crash-main-btn--auto .cmb-inner {
  width: 100%;
  justify-content: center;
}
.crash-main-btn--auto .cmb-label {
  font-size: 11px;
  text-align: center;
}

/* Пресеты авто-панели */
.crash-auto-preset-btn {
  flex: 1;
  padding: 9px 4px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
}
.crash-auto-preset-btn.active {
  background: rgba(155,89,245,0.15);
  border-color: rgba(155,89,245,0.5);
  color: #c084fc;
  box-shadow: 0 0 12px rgba(155,89,245,0.2);
}




/* Авто-инпут — размер шрифта как в ИГРА */
#crash-auto-panel .crash-amount-input {
  font-size: 16px;
}
/* ===== GIFTS EMPTY STATE ===== */
.gifts-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 32px;
  gap: 0;
  text-align: center;
}
.gifts-empty-video-wrap {
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.gifts-empty-video {
  width: 160px;
  height: 160px;
  object-fit: cover;
  mix-blend-mode: lighten;
}
.gifts-empty-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.gifts-empty-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
  margin-bottom: 24px;
}
.gifts-empty-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(99,102,241,0.5), 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
  letter-spacing: 0.01em;
}
.gifts-empty-btn:active {
  transform: scale(0.96);
  box-shadow: 0 0 14px rgba(99,102,241,0.35);
}

/* ===== FAQ BUTTON ===== */
.faq-btn {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 9998;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
}
.faq-btn:hover { opacity: 1; transform: scale(1.1); }
.faq-btn:active { transform: scale(0.93); }
.faq-btn img { width: 34px; height: 34px; object-fit: contain; display: block; }
.faq-btn--plinko {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 9998;
}

/* ===== FAQ MODAL ===== */
.faq-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 72px;
}
.faq-modal-overlay.open { display: flex; animation: faqFadeIn 0.22s ease; }
@keyframes faqFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.faq-modal-card {
  background: linear-gradient(160deg, #1a1f35 0%, #111427 100%);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 20px;
  width: calc(100% - 24px);
  max-width: 420px;
  overflow: hidden;
  animation: faqSlideUp 0.25s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}
@keyframes faqSlideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.faq-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.faq-modal-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(99,102,241,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.faq-modal-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  flex: 1;
  letter-spacing: 0.01em;
}
.faq-modal-close {
  background: rgba(255,255,255,0.07);
  border: none;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.faq-modal-close:hover { background: rgba(255,255,255,0.13); color: #fff; }
.faq-modal-body {
  padding: 14px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.faq-row-num {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(99,102,241,0.25);
  color: #a5b4fc;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.faq-row-text {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
}
.faq-row-text b { color: #fff; font-weight: 700; }
.faq-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 2px 0;
}
.faq-tip {
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: #a5b4fc;
  line-height: 1.5;
}
.faq-tip b { color: #c7d2fe; }

/* ===== PLINKO RISK ===== */
.pk-risk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pk-risk-btns {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}
.pk-risk-btn {
  flex: 1;
  padding: 7px 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.45);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  letter-spacing: 0.01em;
}
.pk-risk-btn:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.7); }
.pk-risk-btn.active[data-risk="low"]    { background: rgba(34,197,94,0.18);  border-color: rgba(34,197,94,0.5);  color: #4ade80; }
.pk-risk-btn.active[data-risk="medium"] { background: rgba(234,179,8,0.18);  border-color: rgba(234,179,8,0.5);  color: #facc15; }
.pk-risk-btn.active[data-risk="high"]   { background: rgba(239,68,68,0.18);  border-color: rgba(239,68,68,0.5);  color: #f87171; }

/* plinko bet input */
.pk-bet-input {
  width: 72px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 4px 6px;
  -moz-appearance: textfield;
}
.pk-bet-input::-webkit-outer-spin-button,
.pk-bet-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pk-bet-input:focus { outline: none; border-color: rgba(99,102,241,0.6); }

/* ===== TOPBAR GAME MODE ===== */
.topbar-game-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
}
.topbar-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.topbar-back-btn:hover { background: rgba(255,255,255,0.14); }
.topbar-back-btn:active { transform: scale(0.9); }
.topbar-game-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== BACK BUTTON BADGE (как у Gifts Battle) ===== */
.game-back-wrap {
  position: sticky;
  top: 56px;
  height: 0;
  z-index: 200;
  pointer-events: none;
}
.game-back-btn {
  position: absolute;
  top: 10px;
  left: 0;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.game-back-btn:hover { background: rgba(255,255,255,0.13); }
.game-back-btn:active { transform: scale(0.9); }

/* ===== BACK BADGE — fixed правый угол ===== */
.game-back-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(20, 30, 48, 0.85);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.game-back-badge:hover { background: rgba(255,255,255,0.12); }
.game-back-badge:active { transform: scale(0.9); }

/* ===== КНОПКА НАЗАД В ИГРЕ ===== */
.back-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(20,30,48,0.8);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.15s, transform 0.1s;
}
.back-badge:active { transform: scale(0.9); }
/* Dice - фон на всю ширину */
#diceGame .dice-page {
  margin: 0 -12px;
  width: calc(100% + 24px);
}
#plinkoGame * { max-width: 100%; box-sizing: border-box; }
@keyframes casinoBg {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 100% 50%; }
  50%  { background-position: 100% 0%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}