/* NOVARUSH — dark gaming UI. Mobile-first. */
:root {
  --bg: #080a10; --bg2: #0d111b; --bg3: #131826;
  --surface: rgba(255,255,255,.045); --surface2: rgba(255,255,255,.08); --line: rgba(255,255,255,.09);
  --text: #eef1f7; --muted: #8b94aa; --faint: #5d667c;
  --accent: #c6ff3d; --accent-rgb: 198,255,61; --accent-ink: #0b1200;
  --cyan: #35e0ff; --pink: #ff3d8b; --amber: #ffb53d; --violet: #8b6cff;
  --win: #38e08c; --lose: #ff4d67;
  --r: 14px; --r-lg: 20px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Chakra Petch', 'Inter', system-ui, sans-serif;
  --nav-h: 64px; --top-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
[data-accent=cyan] { --accent: #35e0ff; --accent-rgb: 53,224,255; --accent-ink: #00141a; }
[data-accent=pink] { --accent: #ff4d9a; --accent-rgb: 255,77,154; --accent-ink: #1a0010; }
[data-accent=amber] { --accent: #ffb53d; --accent-rgb: 255,181,61; --accent-ink: #1a0f00; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.45; overflow-x: clip; }
body {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(var(--accent-rgb), .10), transparent 60%),
    radial-gradient(700px 500px at -10% 20%, rgba(139,108,255,.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body::before { /* тонкая сетка */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: linear-gradient(to bottom, #000 0, transparent 70%);
}
h1, h2, h3, h4 { font-family: var(--display); margin: 0; letter-spacing: .01em; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }
svg { display: block; }
.hide { display: none !important; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.mono { font-variant-numeric: tabular-nums; }
.win { color: var(--win); } .lose { color: var(--lose); } .accent { color: var(--accent); }
.row { display: flex; align-items: center; gap: 10px; } .row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.between { justify-content: space-between; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- shell ---------- */
#app { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(8,10,16,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding-top: var(--safe-t); }
.topbar-in { max-width: 1280px; margin: 0 auto; height: var(--top-h); padding: 0 16px; display: flex; align-items: center; gap: 14px; }
.logo { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .06em; flex: none; }
.logo b { color: var(--accent); font-weight: 700; }
.logo svg { width: 30px; height: 30px; filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .5)); }
.nav-d { display: none; gap: 4px; margin-left: 18px; }
.nav-d a { padding: 8px 14px; border-radius: 10px; color: var(--muted); font-weight: 600; transition: .15s; }
.nav-d a:hover { color: var(--text); background: var(--surface); }
.nav-d a.active { color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.spacer { flex: 1; }
.wallet { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 6px 5px 12px; font-weight: 700; font-family: var(--display); min-width: 0; }
.wallet .coin { width: 18px; height: 18px; flex: none; }
.wallet .amt { font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wallet .amt.up { animation: pop-up .7s; } .wallet .amt.down { animation: pop-down .7s; }
.wallet-add { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 18px; line-height: 1; display: grid; place-items: center; flex: none; }
.topbar .btn-topup { display: none; }
.user-chip { display: none; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.user-chip:hover { background: var(--surface2); }
.view { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 16px 16px 16px; animation: view-in .35s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(10,13,21,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); padding-bottom: var(--safe-b); }
.bottomnav-in { display: grid; grid-template-columns: repeat(5, 1fr); height: var(--nav-h); max-width: 560px; margin: 0 auto; }
.bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 600; transition: color .15s; position: relative; min-width: 0; }
.bottomnav a svg { width: 24px; height: 24px; }
.bottomnav a.active { color: var(--accent); }
.bottomnav a.active::before { content: ''; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.offline { background: var(--lose); color: #fff; text-align: center; padding: 6px 12px; font-weight: 600; font-size: 13px; }
.footer { text-align: center; color: var(--faint); font-size: 13px; letter-spacing: .12em; padding: 8px 16px calc(var(--nav-h) + var(--safe-b) + 20px); }

@media (min-width: 900px) {
  .nav-d { display: flex; } .bottomnav { display: none; }
  .topbar .btn-topup { display: inline-flex; } .user-chip { display: flex; }
  .view { padding-bottom: 24px; padding-top: 24px; } .footer { padding-bottom: 24px; }
  .topbar-in { padding: 0 24px; } .view { padding-left: 24px; padding-right: 24px; }
}

/* ---------- primitives ---------- */
.card { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; min-width: 0; }
.card.flat { padding: 12px; border-radius: var(--r); }
.card h3 { font-size: 16px; margin-bottom: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface2); font-weight: 700; transition: transform .1s, background .15s, box-shadow .2s, opacity .15s; user-select: none; -webkit-user-select: none; touch-action: manipulation; white-space: nowrap; }
.btn:hover { background: rgba(255,255,255,.12); }
.btn:active { transform: scale(.97); }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .0), 0 8px 24px -8px rgba(var(--accent-rgb), .6); }
.btn.primary:hover { background: var(--accent); filter: brightness(1.08); box-shadow: 0 10px 30px -6px rgba(var(--accent-rgb), .7); }
.btn.danger { background: var(--lose); color: #fff; border-color: transparent; }
.btn.win { background: var(--win); color: #03140b; border-color: transparent; animation: pulse-win 1.2s infinite; }
.btn.ghost { background: transparent; }
.btn.lg { min-height: 54px; font-size: 17px; border-radius: 14px; width: 100%; }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn.block { width: 100%; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; transition: .15s; white-space: nowrap; min-height: 34px; }
.chip:hover { color: var(--text); }
.chip.active { background: rgba(var(--accent-rgb), .14); color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid var(--line); font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.input:focus { border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.input.err { border-color: var(--lose); }
.err-text { color: var(--lose); font-size: 12px; min-height: 16px; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.divider { height: 1px; background: var(--line); margin: 12px 0; }
.progress { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), #fff 220%); box-shadow: 0 0 12px rgba(var(--accent-rgb), .6); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; background: rgba(var(--accent-rgb), .15); color: var(--accent); letter-spacing: .04em; }
.badge.demo { background: rgba(255,255,255,.08); color: var(--muted); }
.badge.win { background: rgba(56,224,140,.15); color: var(--win); animation: none; } .badge.lose { background: rgba(255,77,103,.15); color: var(--lose); }
.page-title { font-size: 26px; margin-bottom: 4px; } .page-sub { color: var(--muted); margin-bottom: 16px; }
.grid { display: grid; gap: 12px; }
.empty { text-align: center; color: var(--muted); padding: 28px 12px; }
.kbd-hint { font-size: 12px; color: var(--faint); }

/* ---------- avatar ---------- */
.avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.2); }
.avatar svg { width: 100%; height: 100%; }
.avatar.xl { width: 84px; height: 84px; border-width: 2px; }
.avatar.sm { width: 24px; height: 24px; }

/* ---------- toast ---------- */
.toasts { position: fixed; z-index: 100; top: calc(var(--top-h) + var(--safe-t) + 10px); left: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; align-items: center; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(18,22,34,.96); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0,0,0,.5); max-width: 420px; width: 100%; font-weight: 600; animation: toast-in .3s cubic-bezier(.2,.9,.3,1.2) both; }
.toast.out { animation: toast-out .25s ease both; }
.toast.win { border-color: rgba(56,224,140,.5); box-shadow: 0 12px 40px rgba(56,224,140,.18); }
.toast.lose { border-color: rgba(255,77,103,.45); }
.toast.bonus { border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 12px 40px rgba(var(--accent-rgb), .15); }
.toast.warn { border-color: rgba(255,181,61,.5); }
.toast .ic { font-size: 20px; flex: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px); } }
@media (min-width: 900px) { .toasts { left: auto; right: 24px; align-items: flex-end; } }

/* ---------- modal ---------- */
.modal-back { position: fixed; inset: 0; z-index: 90; background: rgba(2,4,8,.7); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s both; }
.modal { width: 100%; max-width: 560px; max-height: 92dvh; overflow: auto; background: var(--bg3); border: 1px solid var(--line); border-radius: 22px 22px 0 0; padding: 20px 16px calc(20px + var(--safe-b)); animation: sheet .3s cubic-bezier(.2,.9,.3,1) both; }
.modal h3 { font-size: 20px; margin-bottom: 12px; }
@media (min-width: 700px) { .modal-back { align-items: center; padding: 20px; } .modal { border-radius: 22px; } }
@keyframes fade { from { opacity: 0; } } @keyframes sheet { from { transform: translateY(40px); opacity: 0; } }

/* ---------- hero / home ---------- */
.hero { position: relative; overflow: hidden; border-radius: 26px; padding: 28px 20px; border: 1px solid var(--line);
  background: radial-gradient(600px 300px at 90% 0%, rgba(var(--accent-rgb), .22), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(139,108,255,.25), transparent 60%), linear-gradient(135deg, #10152a, #0b0e18); }
.hero h1 { font-size: clamp(34px, 9vw, 64px); font-weight: 700; line-height: 1.02; text-transform: uppercase; }
.hero h1 span { color: var(--accent); text-shadow: 0 0 28px rgba(var(--accent-rgb), .55); }
.hero p { color: var(--muted); max-width: 520px; margin: 12px 0 18px; font-size: 16px; }
.hero .art { position: absolute; right: -40px; top: -30px; width: 280px; opacity: .16; pointer-events: none; }
@media (min-width: 900px) { .hero { padding: 48px 44px; } .hero .art { width: 460px; right: 20px; top: 10px; opacity: .3; } .hero p { font-size: 18px; } }
.stats-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; max-width: 520px; }
.stat { background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.stat b { display: block; font-family: var(--display); font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.section-h { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 12px; }
.section-h h2 { font-size: 21px; }
.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .game-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1100px) { .game-grid { grid-template-columns: repeat(4, 1fr); } }
.gcard { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); padding: 14px; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .2s, box-shadow .25s, border-color .2s; isolation: isolate; cursor: pointer; }
.gcard::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--g); }
.gcard::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(5,7,12,.85)); }
.gcard .gart { position: absolute; right: -6px; top: -4px; width: 78%; max-width: 150px; z-index: -1; opacity: .95; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.gcard:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 16px 40px -12px rgba(var(--accent-rgb), .45); }
.gcard:hover .gart { transform: scale(1.1) rotate(-4deg); }
.gcard:active { transform: scale(.98); }
.gcard h3 { font-size: 19px; text-transform: uppercase; letter-spacing: .04em; }
.gcard small { color: rgba(255,255,255,.7); font-size: 12px; }
.gcard .tag { position: absolute; top: 10px; left: 10px; }
@media (min-width: 700px) { .gcard { min-height: 190px; padding: 18px; } .gcard h3 { font-size: 22px; } }
.feed { display: flex; flex-direction: column; gap: 6px; }
.feed-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface); border-radius: 12px; font-size: 13px; animation: view-in .4s both; min-width: 0; }
.feed-row .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row .g { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
.promo-banner { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; border: 1px solid rgba(var(--accent-rgb), .35); background: linear-gradient(120deg, rgba(var(--accent-rgb), .14), rgba(139,108,255,.1)); }
.two-col { display: grid; gap: 14px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.4fr 1fr; } }

/* ---------- game layout ---------- */
.game-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.game-head h1 { font-size: 24px; text-transform: uppercase; letter-spacing: .04em; }
.back { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); flex: none; }
.game-layout { display: grid; gap: 14px; }
@media (min-width: 1000px) { .game-layout { grid-template-columns: 340px 1fr; align-items: start; } .game-layout.wide-right { grid-template-columns: 1fr 340px; } }
.panel { display: flex; flex-direction: column; gap: 12px; }
.bet-box { display: flex; flex-direction: column; gap: 8px; }
.bet-row { display: flex; gap: 6px; }
.bet-row .input { flex: 1; font-family: var(--display); font-weight: 700; font-size: 18px; }
.quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.quick button { min-height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 13px; }
.quick button:active { transform: scale(.95); }
.quick button:hover { background: var(--surface2); }
.stage { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(500px 300px at 50% 0%, rgba(var(--accent-rgb), .08), transparent 70%), rgba(5,7,12,.6); min-width: 0; }
.big-result { font-family: var(--display); font-weight: 700; text-align: center; }
.result-banner { padding: 10px 14px; border-radius: 12px; font-weight: 700; text-align: center; animation: pop-in .4s cubic-bezier(.2,1.4,.4,1) both; }
.result-banner.win { background: rgba(56,224,140,.14); color: var(--win); border: 1px solid rgba(56,224,140,.4); }
.result-banner.lose { background: rgba(255,77,103,.12); color: var(--lose); border: 1px solid rgba(255,77,103,.35); }
.recent { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.recent::-webkit-scrollbar { display: none; }
.pill { flex: none; padding: 5px 10px; border-radius: 99px; font-weight: 700; font-size: 13px; font-family: var(--display); background: var(--surface2); }
.pill.hi { background: rgba(56,224,140,.16); color: var(--win); } .pill.lo { background: rgba(255,77,103,.16); color: var(--lose); } .pill.mid { background: rgba(53,224,255,.14); color: var(--cyan); } .pill.epic { background: rgba(255,181,61,.16); color: var(--amber); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kv > div { background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; min-width: 0; }
.kv span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: block; }
.kv b { font-family: var(--display); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.fair-line { font-size: 11px; color: var(--faint); word-break: break-all; }
.fair-line a { color: var(--muted); text-decoration: underline; }

/* ---------- crash ---------- */
.crash-stage { height: 300px; }
@media (min-width: 700px) { .crash-stage { height: 400px; } }
.crash-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.crash-mult { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.crash-mult .m { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 15vw, 96px); line-height: 1; text-shadow: 0 0 40px rgba(var(--accent-rgb), .45); font-variant-numeric: tabular-nums; }
.crash-mult .s { color: var(--muted); font-weight: 600; margin-top: 6px; }
.crash-mult.crashed .m { color: var(--lose); text-shadow: 0 0 40px rgba(255,77,103,.6); animation: shake .5s; }
.crash-mult.won .m { color: var(--win); }
.players { max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.prow { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--surface); font-size: 13px; }
.prow .n { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; } .prow .n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow.me { outline: 1px solid rgba(var(--accent-rgb), .5); }
.prow.cashed { background: rgba(56,224,140,.1); } .prow.cashed .x { color: var(--win); font-weight: 700; }
.prow.busted { background: rgba(255,77,103,.07); } .prow.busted .x { color: var(--lose); }

/* ---------- roulette ---------- */
.wheel-wrap { position: relative; width: min(100%, 320px); aspect-ratio: 1; margin: 6px auto; }
.wheel-wrap svg.wheel { width: 100%; height: 100%; will-change: transform; }
.wheel-wrap { border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.wheel-ptr { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 22px; height: 28px; z-index: 2; filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .8)); }
.wheel-center { position: absolute; inset: 31%; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #1b2236, #0a0d16); border: 2px solid var(--line); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 38px; z-index: 1; }
.rbd { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.rcell { position: relative; min-height: 38px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; font-weight: 700; font-family: var(--display); font-size: 14px; cursor: pointer; transition: transform .1s, filter .15s; padding: 0; color: #fff; }
.rcell:hover { filter: brightness(1.3); } .rcell:active { transform: scale(.94); }
.rcell.red { background: #b4233b; } .rcell.black { background: #1a1f30; } .rcell.green { background: #12805a; }
.rcell.sel { outline: 2px solid var(--accent); }
.rcell .chipamt { position: absolute; right: -3px; top: -6px; background: var(--accent); color: var(--accent-ink); font-size: 10px; border-radius: 99px; padding: 1px 5px; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.rcell.win-cell { animation: pulse-win 0.8s 3; outline: 2px solid var(--win); }
.rbtn-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.rbtn-row .rcell { min-height: 44px; font-size: 14px; }
.chips-sel { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.chip-coin { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.55); display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff; cursor: pointer; transition: transform .15s; font-family: var(--display); }
.chip-coin.sel { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 3px var(--accent), 0 8px 20px rgba(0,0,0,.5); }

/* ---------- dice ---------- */
.dice-stage { padding: 20px 14px; display: flex; flex-direction: column; gap: 18px; }
.dice-num { font-family: var(--display); font-weight: 700; font-size: clamp(54px, 16vw, 92px); text-align: center; line-height: 1; font-variant-numeric: tabular-nums; transition: color .2s; }
.dice-num.win { color: var(--win); text-shadow: 0 0 36px rgba(56,224,140,.55); } .dice-num.lose { color: var(--lose); text-shadow: 0 0 36px rgba(255,77,103,.5); }
.dice-bar { position: relative; height: 22px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: visible; margin: 14px 4px 24px; }
.dice-bar .zone { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, var(--win), #8bffc2); box-shadow: 0 0 18px rgba(56,224,140,.45); transition: left .15s, width .15s; }
.dice-bar .lose-zone { position: absolute; top: 0; bottom: 0; background: rgba(255,77,103,.55); border-radius: 99px; transition: left .15s, width .15s; }
.dice-bar .marker { position: absolute; top: -10px; width: 4px; height: 42px; margin-left: -2px; background: #fff; border-radius: 3px; box-shadow: 0 0 14px #fff; transition: left .9s cubic-bezier(.2,.9,.2,1); }
.dice-bar .marker::after { content: attr(data-v); position: absolute; top: 44px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; font-family: var(--display); }
.dice-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin: -14px 4px 0; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; touch-action: pan-y; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); margin-top: -10px; box-shadow: 0 0 14px rgba(var(--accent-rgb), .7); border: 3px solid #0b0e18; }
input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid #0b0e18; box-shadow: 0 0 14px rgba(var(--accent-rgb), .7); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 700; }
.seg button.active { background: var(--accent); color: var(--accent-ink); }

/* ---------- mines ---------- */
.mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 12px; max-width: 520px; margin: 0 auto; }
.mcell { position: relative; aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, #1a2036, #0f1322); display: grid; place-items: center; padding: 0; transition: transform .12s, background .2s, border-color .2s; perspective: 600px; overflow: hidden; }
.mcell:not(:disabled):hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .6); background: linear-gradient(160deg, #222a46, #141a2e); }
.mcell:not(:disabled):active { transform: scale(.94); }
.mcell svg { width: 56%; height: 56%; animation: pop-in .35s cubic-bezier(.2,1.5,.4,1) both; }
.mcell.safe { background: linear-gradient(160deg, rgba(56,224,140,.28), rgba(56,224,140,.08)); border-color: rgba(56,224,140,.6); }
.mcell.mine { background: linear-gradient(160deg, rgba(255,77,103,.4), rgba(255,77,103,.1)); border-color: rgba(255,77,103,.7); animation: shake .45s; }
.mcell.ghost { opacity: .55; } .mcell.ghost.safe { opacity: .45; }
.mcell:disabled { cursor: default; }

/* ---------- cases ---------- */
.case-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.case-card { border: 1px solid var(--line); border-radius: 16px; padding: 10px 6px; text-align: center; background: var(--surface); transition: .15s; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.case-card.active { border-color: var(--accent); background: rgba(var(--accent-rgb), .1); box-shadow: 0 0 24px -6px rgba(var(--accent-rgb), .5); }
.case-card svg { width: 54px; height: 54px; }
.case-card b { font-family: var(--display); font-size: 14px; } .case-card small { color: var(--muted); font-size: 12px; }
.reel-wrap { position: relative; height: 128px; overflow: hidden; contain: layout paint; }
.reel-wrap::before, .reel-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 18%; z-index: 2; pointer-events: none; }
.reel-wrap::before { left: 0; background: linear-gradient(90deg, #070a10, transparent); } .reel-wrap::after { right: 0; background: linear-gradient(270deg, #070a10, transparent); }
.reel-ptr { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--accent); z-index: 3; box-shadow: 0 0 14px var(--accent); }
.reel { display: flex; gap: 8px; padding: 10px 0; will-change: transform; backface-visibility: hidden; position: absolute; left: 0; top: 0; }
.ritem { flex: none; width: 104px; height: 108px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 22%, transparent), rgba(255,255,255,.02)); border-bottom: 3px solid var(--rc); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; text-align: center; }
.ritem svg { width: 42px; height: 42px; } .ritem b { font-size: 11px; line-height: 1.15; } .ritem small { font-size: 11px; color: var(--muted); font-weight: 700; }
.r-common { --rc: #8b94aa; } .r-uncommon { --rc: #35e0ff; } .r-rare { --rc: #4d8bff; } .r-epic { --rc: #b06cff; } .r-legendary { --rc: #ffb53d; }
.prize { text-align: center; padding: 14px; animation: pop-in .5s cubic-bezier(.2,1.4,.4,1) both; }
.prize .ritem { margin: 0 auto 8px; width: 140px; height: 140px; } .prize .ritem svg { width: 64px; height: 64px; } .prize .ritem b { font-size: 14px; }
.items-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.items-list .it { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: var(--surface); border-left: 3px solid var(--rc); font-size: 12px; min-width: 0; }
.items-list .it svg { width: 26px; height: 26px; flex: none; }
.items-list .it div { min-width: 0; } .items-list .it b, .items-list .it small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 700px) { .items-list { grid-template-columns: repeat(3, 1fr); } }

/* ---------- coinflip ---------- */
.coin-stage { display: grid; place-items: center; padding: 28px 12px; perspective: 900px; min-height: 260px; }
.coin3d { width: 150px; height: 150px; position: relative; transform-style: preserve-3d; will-change: transform; }
.coin3d .f { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 30px; border: 6px solid rgba(255,255,255,.25); }
.coin3d .heads { background: radial-gradient(circle at 35% 30%, #fff6b0, #f1b52e 55%, #9a6a0c); color: #5a3a00; }
.coin3d .tails { background: radial-gradient(circle at 35% 30%, #e8f7ff, #5fc2e8 55%, #1d6b8c); color: #043347; transform: rotateY(180deg); }

/* ---------- hilo ---------- */
.hilo-cards { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 22px 12px; min-height: 230px; flex-wrap: nowrap; overflow: hidden; }
.pcard { width: 108px; height: 154px; border-radius: 14px; background: #f4f6fb; color: #121626; display: flex; flex-direction: column; justify-content: space-between; padding: 8px 10px; font-family: var(--display); font-weight: 700; font-size: 26px; box-shadow: 0 12px 30px rgba(0,0,0,.5); animation: card-in .45s cubic-bezier(.2,1,.3,1) both; flex: none; }
.pcard.red { color: #d3213f; } .pcard .c { align-self: center; font-size: 50px; line-height: 1; } .pcard .b { align-self: flex-end; transform: rotate(180deg); }
.pcard.old { width: 62px; height: 90px; font-size: 16px; opacity: .55; padding: 5px 6px; } .pcard.old .c { font-size: 26px; }
.pcard.back { background: repeating-linear-gradient(45deg, #1a2036, #1a2036 8px, #222a46 8px, #222a46 16px); border: 3px solid #f4f6fb; }
@keyframes card-in { from { transform: translateY(-30px) rotateY(90deg); opacity: 0; } }
@media (max-width: 420px) { .pcard.old:nth-last-child(n+5) { display: none; } .pcard { width: 96px; height: 138px; } }

/* ---------- jackpot ---------- */
.jp-bar { position: relative; height: 54px; border-radius: 14px; overflow: hidden; display: flex; background: rgba(255,255,255,.06); }
.jp-bar .seg-j { height: 100%; transition: flex-grow .4s; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: rgba(0,0,0,.7); overflow: hidden; white-space: nowrap; min-width: 0; }
.jp-ptr { position: absolute; top: -6px; bottom: -6px; width: 4px; background: #fff; border-radius: 3px; box-shadow: 0 0 16px #fff; left: 0; transition: left 5s cubic-bezier(.15,.8,.15,1); z-index: 2; margin-left: -2px; }
.jp-pool { font-family: var(--display); font-size: clamp(34px, 10vw, 60px); font-weight: 700; text-align: center; color: var(--amber); text-shadow: 0 0 30px rgba(255,181,61,.45); }
.jp-timer { font-family: var(--display); text-align: center; font-size: 18px; color: var(--muted); }

/* ---------- tables & lists ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.table td { padding: 11px 10px; border-bottom: 1px solid rgba(255,255,255,.05); }
.table tr.click { cursor: pointer; } .table tr.click:hover td { background: var(--surface); }
.table .r { text-align: right; }
.hist-cards { display: flex; flex-direction: column; gap: 8px; }
.hcard { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; text-align: left; width: 100%; }
.hcard .g { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; } .hcard small { color: var(--muted); }
.d-only { display: none; } .m-only { display: block; }
@media (min-width: 800px) { .d-only { display: table; } .m-only { display: none; } }
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: end; margin-bottom: 14px; }
.pod { text-align: center; padding: 14px 6px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.pod .medal { font-size: 28px; } .pod b { display: block; font-family: var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod.p1 { padding-top: 24px; padding-bottom: 20px; border-color: rgba(255,181,61,.6); background: linear-gradient(180deg, rgba(255,181,61,.16), rgba(255,255,255,.02)); box-shadow: 0 0 40px -12px rgba(255,181,61,.5); }
.pod.p2 { border-color: rgba(200,210,230,.4); } .pod.p3 { border-color: rgba(205,127,50,.5); }
.pod .avatar { margin: 6px auto; width: 48px; height: 48px; }
.lbrow { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--surface); }
.lbrow.me { outline: 1px solid rgba(var(--accent-rgb), .6); }
.lbrow .rk { font-family: var(--display); font-weight: 700; color: var(--muted); text-align: center; }

/* ---------- bonuses ---------- */
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
@media (max-width: 480px) { .days { grid-template-columns: repeat(4, 1fr); } }
.day { border-radius: 14px; border: 1px solid var(--line); background: var(--surface); padding: 10px 4px; text-align: center; position: relative; min-width: 0; }
.day small { color: var(--muted); font-size: 11px; display: block; } .day b { font-family: var(--display); font-size: 16px; }
.day.done { background: rgba(56,224,140,.12); border-color: rgba(56,224,140,.5); } .day.done::after { content: '✓'; position: absolute; top: 2px; right: 6px; color: var(--win); font-weight: 800; font-size: 12px; }
.day.next { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); box-shadow: 0 0 20px -6px rgba(var(--accent-rgb), .6); animation: pulse-border 1.6s infinite; }
.day.big { grid-column: span 1; background: linear-gradient(180deg, rgba(255,181,61,.2), transparent); }
.task { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.task .progress { grid-column: 1 / -1; height: 8px; }
.task.claimed { opacity: .55; }

/* ---------- profile ---------- */
.prof-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 700px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.avatars button { padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; aspect-ratio: 1; overflow: hidden; }
.avatars button.sel { border-color: var(--accent); box-shadow: 0 0 16px rgba(var(--accent-rgb), .6); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tgl { position: relative; width: 52px; height: 30px; flex: none; }
.tgl input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.tgl i { position: absolute; inset: 0; border-radius: 99px; background: rgba(255,255,255,.14); transition: .2s; }
.tgl i::after { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: .2s; }
.tgl input:checked + i { background: var(--accent); } .tgl input:checked + i::after { transform: translateX(22px); background: var(--accent-ink); }
.accents { display: flex; gap: 10px; }
.accents button { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; }
.accents button.sel { border-color: #fff; }

/* ---------- auth ---------- */
.auth { max-width: 440px; margin: 20px auto; }
.auth .card { padding: 22px 18px; }
.test-box { border: 1px dashed rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .06); border-radius: 14px; padding: 12px; font-size: 13px; }
.test-box code { background: rgba(0,0,0,.4); padding: 1px 6px; border-radius: 6px; user-select: all; }
.prose p { color: var(--muted); margin: 0 0 10px; } .prose code, .mono-box { background: rgba(0,0,0,.4); border: 1px solid var(--line); padding: 2px 6px; border-radius: 6px; font-size: 12px; word-break: break-all; }
.mono-box { display: block; padding: 8px 10px; margin: 4px 0; }

/* ---------- effects ---------- */
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop-up { 0% { color: var(--win); transform: scale(1.12); } 100% { color: inherit; transform: none; } }
@keyframes pop-down { 0% { color: var(--lose); transform: scale(.94); } 100% { color: inherit; transform: none; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes pulse-win { 0%, 100% { box-shadow: 0 0 0 0 rgba(56,224,140,.55); } 50% { box-shadow: 0 0 0 10px rgba(56,224,140,0); } }
@keyframes pulse-border { 0%, 100% { box-shadow: 0 0 20px -6px rgba(var(--accent-rgb), .6); } 50% { box-shadow: 0 0 28px 0 rgba(var(--accent-rgb), .5); } }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--accent); animation: spin .7s linear infinite; }
.loading { display: grid; place-items: center; padding: 60px 0; }
.float-win { position: fixed; pointer-events: none; z-index: 95; font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--win); text-shadow: 0 0 18px rgba(56,224,140,.7); animation: float-up 1.4s ease-out forwards; }
@keyframes float-up { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-70px); opacity: 0; } }
html.no-anim *, html.no-anim *::before, html.no-anim *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
/* Анимации отключаются только настройкой «Анимации» в профиле (html.no-anim): системная настройка Windows не должна ломать игры */
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
@media (max-width: 360px) {
  .view { padding-left: 12px; padding-right: 12px; } .topbar-in { padding: 0 10px; gap: 8px; } .logo span { display: none; }
  .rbd { gap: 3px; } .rcell { font-size: 12px; min-height: 34px; } .mines-grid { gap: 5px; padding: 8px; }
  .wallet .amt { font-size: 13px; } .quick button { font-size: 12px; } .hero { padding: 22px 14px; }
}

/* --- дополнения --- */
@media (min-width: 1000px) { .game-layout > .panel { order: -1; } .game-layout.panel-right > .panel { order: 2; } }
.ritem svg, .items-list .it svg, .prize svg { color: var(--rc); }
.rbd { grid-template-columns: repeat(6, 1fr); } @media (min-width: 700px) { .rbd { grid-template-columns: repeat(12, 1fr); } }
.rcell.zero { grid-column: 1 / -1; min-height: 40px; }
.board-total { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hilo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hilo-btns .btn { flex-direction: column; min-height: 64px; gap: 2px; } .hilo-btns small { font-weight: 600; opacity: .8; }
.flip-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.flip-pick button { min-height: 52px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; font-size: 16px; }
.flip-pick button.active { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.mode-note { font-size: 12px; color: var(--muted); }

/* --- устранение переполнений --- */
.game-layout > *, .two-col > *, .col > *, .grid > * { min-width: 0; }
.col { min-width: 0; max-width: 100%; }
.recent { max-width: 100%; }
.hilo-btns .btn { white-space: normal; text-align: center; padding: 6px 8px; }
.mono-box, .fair-line, .prose code { overflow-wrap: anywhere; word-break: break-all; max-width: 100%; }
.topbar .user-chip b { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1199px) { .topbar .btn-topup { display: none; } .user-chip b { display: none; } .user-chip { padding: 4px; } .nav-d { margin-left: 8px; } .nav-d a { padding: 8px 10px; } }

/* ======================= v3: раскладка игр, телефон, инвентарь, админка ======================= */
[hidden] { display: none !important; }
.btn { white-space: normal; text-align: center; line-height: 1.2; }
.btn.lg { padding-top: 8px; padding-bottom: 8px; }
h1, h2, h3, p, .page-sub, .mode-note, .muted { overflow-wrap: anywhere; }
.hero h1, .hero p { overflow-wrap: break-word; }

/* --- единая раскладка игры --- */
.gl { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.gl > * { min-width: 0; }
.gl-status, .gl-below { display: contents; }
.gl-status > :empty { display: none; }
.gl-below > * { min-width: 0; }
.gl-stage.sticky { position: sticky; top: calc(var(--top-h) + var(--safe-t) - 1px); z-index: 20; background: linear-gradient(var(--bg) 90%, transparent); padding: 6px 0 8px; margin-top: -6px; }
.actionbar { display: flex; flex-direction: column; gap: 8px; }
.actionbar:empty { display: none; }
@media (max-width: 999px) {
  .actionbar { position: sticky; bottom: calc(var(--nav-h) + var(--safe-b) + 6px); z-index: 25; padding: 14px 0 4px; margin: 0 -4px; background: linear-gradient(to top, #0d111b 72%, transparent); }
  /* компактная «игровая» зона, чтобы под ней помещалась ставка */
  .gl-stage.sticky .crash-stage { height: 190px; } .gl-stage.sticky .crash-mult .m { font-size: clamp(34px, 11vw, 54px); }
  .gl-stage.sticky .wheel-wrap { width: 168px; margin: 0 auto; } .gl-stage.sticky .wheel-center { font-size: 22px; }
  .gl-stage.sticky .coin-stage { min-height: 150px; padding: 10px; } .gl-stage.sticky .coin3d { width: 104px; height: 104px; } .gl-stage.sticky .coin3d .f { font-size: 19px; border-width: 4px; }
  .gl-stage.sticky .dice-stage { padding: 10px 12px; gap: 10px; } .gl-stage.sticky .dice-num { font-size: clamp(38px, 12vw, 54px); }
  .gl-stage.sticky .hilo-cards { min-height: 138px; padding: 8px; } .gl-stage.sticky .pcard { width: 72px; height: 104px; font-size: 18px; padding: 5px 6px; } .gl-stage.sticky .pcard .c { font-size: 32px; } .gl-stage.sticky .pcard.old { width: 48px; height: 70px; font-size: 13px; } .gl-stage.sticky .pcard.old .c { font-size: 20px; }
  .gl-stage.sticky .jp-pool { font-size: clamp(28px, 9vw, 44px); }
  .gl-stage.sticky .reel-wrap { height: 118px; } 
}
@media (max-width: 999px) and (max-height: 640px) { .gl-stage.sticky { position: static; background: none; padding: 0; margin: 0; } }
@media (min-width: 1000px) {
  .gl { grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "panel stage" "panel status" "panel below"; grid-template-rows: auto auto 1fr; align-items: start; }
  .gl.gl-right { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "stage panel" "status panel" "below panel"; grid-template-rows: auto auto 1fr; }
  .gl-stage { grid-area: stage; } .gl-panel { grid-area: panel; }
  .gl-status { grid-area: status; display: flex; flex-direction: column; gap: 12px; }
  .gl-below { grid-area: below; display: flex; flex-direction: column; gap: 12px; }
  .gl-stage.sticky { position: static; background: none; padding: 0; margin: 0; }
  .actionbar { position: static; }
}

/* --- фишки рулетки: ничего не обрезается --- */
.chips-sel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; overflow: visible; padding: 12px 6px 10px; }
.chip-coin.sel { transform: translateY(-3px) scale(1.06); }
.rcell .chipamt.dim { background: rgba(255,255,255,.85); color: #111; }
.rcell.placed { outline: 2px dashed rgba(var(--accent-rgb), .7); }

/* --- live-рулетка --- */
.live-status { text-align: center; font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 6px; }
.live-bar { height: 5px; margin: 8px 12px 2px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; }
.live-bar > i { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .7); }

/* --- кейсы --- */
.case-pick { display: flex; gap: 8px; overflow-x: auto; padding: 8px 4px 12px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.case-card { flex: none; width: 112px; scroll-snap-align: center; border-color: color-mix(in srgb, var(--cc, #fff) 30%, transparent); }
.case-card.active { border-color: var(--cc, var(--accent)); background: color-mix(in srgb, var(--cc, #fff) 14%, transparent); box-shadow: 0 0 22px -6px var(--cc, var(--accent)); }
.case-card b { font-size: 13px; overflow-wrap: anywhere; }
@media (min-width: 1000px) { .case-pick { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; padding: 4px 0; max-height: 440px; overflow-y: auto; } .case-card { width: auto; } }
.prize .btn { min-height: 44px; }

/* --- инвентарь --- */
.inv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .inv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .inv-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.inv-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 10px; border-radius: 16px; text-align: center; border: 1px solid var(--line); border-bottom: 3px solid var(--rc); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 20%, transparent), rgba(255,255,255,.02)); transition: transform .12s, box-shadow .2s; min-width: 0; }
.inv-card svg { width: 46px; height: 46px; color: var(--rc); }
.inv-card b { font-size: 13px; overflow-wrap: anywhere; line-height: 1.15; } .inv-card small { color: var(--muted); font-weight: 700; font-size: 12px; }
.inv-card .inv-rar { font-style: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--rc); }
.inv-card:hover { transform: translateY(-2px); }
.inv-card.sel { outline: 2px solid var(--accent); box-shadow: 0 0 22px -6px var(--accent); }
.inv-card.sel::after { content: '✓'; position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 12px; display: grid; place-items: center; }

/* --- админка --- */
.admin-link { display: none; }
@media (min-width: 900px) { .admin-link { display: inline-flex; } }
.adm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (min-width: 760px) { .adm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.adm-kpi b { font-size: 20px; } .adm-kpi small { display: block; font-size: 11px; margin-top: 2px; overflow-wrap: anywhere; }
.adm-cols { display: grid; gap: 12px; margin-bottom: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .adm-cols { grid-template-columns: 1fr 1fr; } }
.adm-chart svg { width: 100%; height: 130px; display: block; }
.adm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.adm-table-wrap .table { min-width: 520px; } .adm-table-wrap .table td, .adm-table-wrap .table th { white-space: nowrap; }
.card .table { font-size: 13px; }

.actionbar-row { display: flex; gap: 8px; } .actionbar-row .btn { flex: 1; min-width: 0; }
.actionbar-row .btn.hide { display: none; }
@media (max-width: 999px) { .actionbar .hilo-btns .btn { min-height: 52px; padding: 4px 6px; font-size: 14px; } .actionbar-row .btn { min-height: 46px; font-size: 15px; } }

/* ================= v4 ================= */
[data-accent=violet] { --accent: #9b7bff; --accent-rgb: 155,123,255; --accent-ink: #0e0626; }
[data-accent=red] { --accent: #ff5a5f; --accent-rgb: 255,90,95; --accent-ink: #1f0204; }
[data-accent=blue] { --accent: #4d8dff; --accent-rgb: 77,141,255; --accent-ink: #00112e; }

/* футер: соцсети + язык */
.footer { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.footer .by { letter-spacing: .12em; }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.soc { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); transition: transform .2s, color .2s, border-color .2s, box-shadow .2s; }
.soc svg { width: 21px; height: 21px; }
.soc:hover, .soc:focus-visible { color: var(--accent); border-color: rgba(var(--accent-rgb), .6); transform: translateY(-2px); box-shadow: 0 8px 22px -10px rgba(var(--accent-rgb), .8); }
.langsw { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.langsw button { padding: 6px 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.langsw button.on { background: var(--accent); color: var(--accent-ink); }
.langbtn { display: none; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--muted); }
@media (min-width: 640px) { .langbtn { display: inline-block; } }

/* главный баннер */
.banner { position: relative; overflow: hidden; border-radius: 26px; border: 1px solid var(--line); }
.bn-track { display: flex; transition: transform .6s cubic-bezier(.3,.8,.2,1); will-change: transform; }
.bn-slide { position: relative; flex: 0 0 100%; min-width: 0; min-height: 230px; padding: 26px 22px 46px; display: flex; align-items: center; overflow: hidden; color: #fff;
  background: radial-gradient(500px 260px at 85% 20%, color-mix(in srgb, var(--bb) 55%, transparent), transparent 70%), linear-gradient(120deg, color-mix(in srgb, var(--ba) 70%, #05070c), color-mix(in srgb, var(--bb) 45%, #05070c)); }
.bn-txt { position: relative; z-index: 2; max-width: 560px; }
.bn-txt h2 { font-size: clamp(26px, 7vw, 50px); font-weight: 700; line-height: 1.05; text-transform: uppercase; overflow-wrap: break-word; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.bn-txt p { margin: 10px 0 16px; color: rgba(255,255,255,.82); font-size: 15px; max-width: 460px; }
.bn-cta { background: #fff; color: #0b0e18; border-color: transparent; font-weight: 700; }
.bn-art { position: absolute; right: -10px; bottom: -14px; width: 46%; max-width: 330px; opacity: .9; pointer-events: none; display: grid; place-items: center; }
.bn-art svg { width: 100%; height: auto; max-height: 280px; filter: drop-shadow(0 10px 30px rgba(0,0,0,.4)); }
.bn-art.soc { color: #fff; opacity: .95; } .bn-art.soc svg { width: 70%; stroke-width: 1.3; }
.bn-art.emoji { font-size: clamp(90px, 22vw, 190px); line-height: 1; opacity: .85; }
.bn-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; z-index: 3; }
.bn-dots button { width: 9px; height: 9px; border-radius: 99px; background: rgba(255,255,255,.55) !important; border: 0 !important; box-shadow: 0 0 0 1px rgba(0,0,0,.25); transition: width .3s, background .3s; padding: 0; min-height: 0; }
.bn-dots button.on { width: 26px; background: #fff !important; }
.bn-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(5,7,12,.5); color: #fff; font-size: 26px; line-height: 1; z-index: 3; display: none; }
.bn-arrow.l { left: 10px; } .bn-arrow.r { right: 10px; }
@media (min-width: 900px) { .bn-slide { min-height: 320px; padding: 44px 64px 54px; } .bn-txt p { font-size: 18px; } .bn-arrow { display: block; } .bn-art { width: 40%; right: 50px; } }

/* игры: карточки занимают всё место, последний ряд растягивается */
.game-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.game-grid .gcard { flex: 1 1 calc(50% - 10px); min-width: 0; }
@media (min-width: 700px) { .game-grid { gap: 14px; } .game-grid .gcard { flex-basis: calc(33.333% - 14px); min-height: 210px; } }
@media (min-width: 1100px) { .game-grid .gcard { min-height: 240px; padding: 22px; } .gcard h3 { font-size: 26px; } .gcard small { font-size: 14px; } .gcard .gart { max-width: 190px; } }

/* страница игры: хэш + итог */
.game-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -6px 0 12px; }
.fairbadge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .08); font-size: 12px; color: var(--muted); min-height: 0; max-width: 100%; }
.fairbadge:hover { border-color: var(--accent); color: var(--text); }
.fairbadge .fb-hash { color: var(--accent); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fair-row { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .fair-row span { color: var(--muted); font-size: 12px; }
.fair-row b { overflow-wrap: anywhere; font-weight: 600; cursor: pointer; }
.fair-res { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; color: var(--accent); }
.rstrip { flex: 1 1 260px; min-width: 0; padding: 7px 14px; border-radius: 12px; font-size: 13px; border: 1px solid var(--line); background: var(--surface); }
.rstrip.win { border-color: rgba(56,224,140,.5); background: rgba(56,224,140,.1); color: #5ff0a8; }
.rstrip.lose { border-color: rgba(255,90,100,.4); background: rgba(255,90,100,.08); color: #ff8088; }
.rstrip.pop { animation: pop-in .45s cubic-bezier(.2,1.4,.4,1); }
.rstrip.hide { display: none; }
.session-chip { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; padding: 4px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.session-chip small { font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; } .session-chip b { font-family: var(--display); font-size: 16px; }
.session-chip.win b { color: #5ff0a8; } .session-chip.lose b { color: #ff8088; }
.result-banner { overflow-wrap: anywhere; }

/* ссылки на игроков */
.ulink { color: inherit; font-weight: inherit; } .ulink:hover { color: var(--accent); text-decoration: underline; }
.back-link { display: inline-block; margin-bottom: 12px; color: var(--muted); } .back-link:hover { color: var(--accent); }
.online-dot { font-size: 13px; color: #5ff0a8; } .online-dot::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #38e08c; margin-right: 6px; box-shadow: 0 0 8px #38e08c; }

/* магазин */
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (min-width: 700px) { .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.theme-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-align: center; }
.theme-card.active { border-color: var(--tc); box-shadow: 0 0 26px -8px var(--tc); }
.swatch { width: 44px; height: 44px; border-radius: 50%; display: inline-block; box-shadow: 0 0 18px -2px currentColor; border: 3px solid rgba(255,255,255,.25); } .swatch.lg { width: 54px; height: 54px; flex: none; }

/* задания */
.task-h { font-family: var(--display); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tier { margin-left: 8px; font-size: 10px; padding: 2px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--line); color: var(--muted); }
.tier.mid { color: #ffb53d; border-color: rgba(255,181,61,.5); } .tier.hard { color: #ff6b7a; border-color: rgba(255,107,122,.5); } .tier.easy { color: #5ff0a8; border-color: rgba(56,224,140,.5); }

/* блэкджек */
.bj-table { padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 340px; }
.bj-side { display: flex; flex-direction: column; gap: 8px; align-items: center; min-width: 0; }
.bj-label { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.bj-val { display: inline-block; min-width: 28px; padding: 2px 10px; border-radius: 99px; background: rgba(255,255,255,.1); color: var(--text); font-weight: 700; font-size: 13px; letter-spacing: 0; text-align: center; }
.bj-mid { text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); padding: 5px 0; }
.bj-cards { display: flex; justify-content: center; min-height: 112px; padding: 0 12px; flex-wrap: nowrap; max-width: 100%; }
.bj-cards .bjc { width: 72px; height: 104px; font-size: 18px; padding: 5px 7px; margin-left: -26px; flex: none; box-shadow: -4px 4px 14px rgba(0,0,0,.4); }
.bj-cards .bjc:first-child { margin-left: 0; } .bj-cards .bjc .c { font-size: 32px; }
.bj-cards .bjc.deal { animation: bj-deal .45s cubic-bezier(.2,.9,.3,1) both; }
@keyframes bj-deal { from { transform: translate(60px,-80px) rotate(14deg) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.bj-hands { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; width: 100%; }
.bj-hand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 16px; border: 2px solid transparent; min-width: 0; max-width: 100%; }
.bj-hand.active { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); }
.bj-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; font-size: 13px; }
.bj-bet { color: var(--muted); } .bj-bet b { color: var(--text); }
.bj-flag { padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.1); }
.bj-flag.win { background: rgba(56,224,140,.18); color: #5ff0a8; } .bj-flag.lose { background: rgba(255,90,100,.16); color: #ff8088; }
.bj-empty { padding: 36px 0; text-align: center; }
.bj-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .bj-btns.two { grid-template-columns: 1fr 1fr; }
.bj-btns .btn { min-width: 0; padding: 4px 6px; min-height: 48px; font-size: 14px; }
.bj-btns.hide { display: none; }
@media (max-width: 999px) { .gl-stage.sticky .bj-table { min-height: 0; padding: 8px; gap: 4px; } .gl-stage.sticky .bj-cards { min-height: 84px; } .gl-stage.sticky .bj-cards .bjc { width: 56px; height: 80px; font-size: 14px; margin-left: -22px; padding: 4px 5px; } .gl-stage.sticky .bj-cards .bjc .c { font-size: 24px; } .gl-stage.sticky .bj-mid { display: none; } .gl-stage.sticky .bj-side { gap: 4px; } }
@media (max-width: 420px) { .bj-btns .btn { font-size: 13px; } }
@media (min-width: 1000px) { .bj-cards .bjc { width: 96px; height: 136px; font-size: 22px; margin-left: -26px; } .bj-cards .bjc .c { font-size: 42px; } .bj-cards { min-height: 140px; } .bj-table { min-height: 460px; justify-content: space-around; } }

/* кейсы: крупное окно открытия на ПК */
@media (min-width: 1000px) {
  .reel-wrap { height: 210px; }
  .ritem { width: 150px; height: 186px; gap: 6px; } .ritem svg { width: 70px; height: 70px; } .ritem b { font-size: 13px; } .ritem small { font-size: 13px; }
  .reel { padding: 12px 0; gap: 10px; }
}
.reel.idle { gap: 8px; }

/* админка v2 */
.banner.small .bn-slide { min-height: 150px; padding: 16px 16px 20px; } .banner.small .bn-txt h2 { font-size: clamp(18px, 4vw, 26px); } .banner.small .bn-txt p { font-size: 13px; margin: 6px 0 10px; } .banner.small .bn-art { max-width: 160px; }
.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; } .chip-check { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; cursor: pointer; }
.soc-row { flex-wrap: nowrap; } .soc.sm { width: 34px; height: 34px; flex: none; } .soc.sm svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .soc-row { flex-wrap: wrap; } .soc-row .input { max-width: none !important; flex: 1 1 100%; } }
.langsw button { background: transparent; border: 0; min-height: 0; } .langsw button.on { background: var(--accent); }
.theme-grid { display: flex; flex-wrap: wrap; } .theme-card { flex: 1 1 calc(50% - 10px); min-width: 0; }
@media (min-width: 700px) { .theme-card { flex-basis: calc(25% - 10px); } }

/* ================= косметика ================= */
.avw { position: relative; display: inline-grid; flex: none; border-radius: 50%; }
.avw::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; z-index: 1; border: 3px solid transparent; }
.avw.sm::before { inset: -2px; border-width: 2px; } .avw.xl::before { inset: -6px; border-width: 4px; }
.fr-neon::before { border-color: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .8), inset 0 0 8px rgba(var(--accent-rgb), .5); }
.fr-gold::before { border-color: #ffd86b; box-shadow: 0 0 12px rgba(255,200,60,.7); border-image: none; background: none; }
.fr-ice::before { border-color: #9fe3ff; box-shadow: 0 0 14px rgba(120,210,255,.8), inset 0 0 8px rgba(160,230,255,.6); }
.fr-fire::before { border-color: #ff8a3d; box-shadow: 0 0 14px rgba(255,100,40,.85), 0 -4px 12px rgba(255,200,60,.5); }
.fr-pulse::before { border-color: var(--accent); animation: fr-pulse 1.6s ease-in-out infinite; }
@keyframes fr-pulse { 0%,100% { box-shadow: 0 0 4px rgba(var(--accent-rgb), .4); transform: scale(1); } 50% { box-shadow: 0 0 18px rgba(var(--accent-rgb), .95); transform: scale(1.06); } }
.fr-aurora::before { border-color: transparent; background: conic-gradient(from 0deg, #35e0ff, #9b7bff, #ff4d9a, #ffb53d, #38e08c, #35e0ff) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 0; animation: fr-spin 4s linear infinite; }
@keyframes fr-spin { to { transform: rotate(360deg); } }
.an-float { animation: an-float 3s ease-in-out infinite; } @keyframes an-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.an-glow .avatar { animation: an-glow 2.4s ease-in-out infinite; } @keyframes an-glow { 0%,100% { box-shadow: 0 0 0 rgba(var(--accent-rgb), 0); } 50% { box-shadow: 0 0 18px rgba(var(--accent-rgb), .9); } }
.an-shine .avatar { position: relative; } .an-shine .avatar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); animation: an-shine 3s ease-in-out infinite; }
@keyframes an-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.an-orbit::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); top: 50%; left: 50%; margin: -4px; animation: an-orbit 2.6s linear infinite; z-index: 2; }
@keyframes an-orbit { from { transform: rotate(0) translateX(calc(var(--orb, 22px))) ; } to { transform: rotate(360deg) translateX(calc(var(--orb, 22px))); } }
.avw.sm { --orb: 15px; } .avw.xl { --orb: 52px; }

/* звания */
.ttl { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; border: 1px solid rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .12); color: var(--accent); }

/* монеты Coinflip */
[data-coin=silver] .coin3d .heads { background: radial-gradient(circle at 35% 30%, #fff, #c9d2dd 55%, #6c7785); color: #2b3440; }
[data-coin=neon] .coin3d .heads { background: radial-gradient(circle at 35% 30%, #d8ffe9, #2bffa0 55%, #04784a); color: #013a24; box-shadow: 0 0 26px rgba(43,255,160,.6); }
[data-coin=ruby] .coin3d .heads { background: radial-gradient(circle at 35% 30%, #ffd0d8, #ff3d63 55%, #7a0b22); color: #3d0010; }
[data-coin=dark] .coin3d .heads { background: radial-gradient(circle at 35% 30%, #5a5f78, #1a1d2c 55%, #07080f); color: #9aa3c7; box-shadow: 0 0 0 3px #9aa3c7 inset; }
[data-coin=silver] .coin3d .tails { background: radial-gradient(circle at 35% 30%, #f1f4f8, #aab4c1 55%, #556070); color: #222a35; }
[data-coin=neon] .coin3d .tails { background: radial-gradient(circle at 35% 30%, #f1d8ff, #c05bff 55%, #4a0f78); color: #25003d; box-shadow: 0 0 26px rgba(192,91,255,.6); }
[data-coin=ruby] .coin3d .tails { background: radial-gradient(circle at 35% 30%, #fff0d0, #ffb23d 55%, #7a4a0b); color: #3d2300; }
[data-coin=dark] .coin3d .tails { background: radial-gradient(circle at 35% 30%, #44506e, #131827 55%, #05060c); color: #7f8ab0; box-shadow: 0 0 0 3px #7f8ab0 inset; }
/* колесо рулетки */
[data-wheel=neon] .wheel-wrap svg.wheel { filter: hue-rotate(200deg) saturate(1.5); }
[data-wheel=gold] .wheel-wrap svg.wheel { filter: sepia(.9) saturate(2.2) hue-rotate(-12deg); }
[data-wheel=ice] .wheel-wrap svg.wheel { filter: hue-rotate(150deg) saturate(.9) brightness(1.1); }
[data-wheel=toxic] .wheel-wrap svg.wheel { filter: hue-rotate(75deg) saturate(1.8); }
[data-wheel=neon] .wheel-wrap { box-shadow: 0 0 40px rgba(180,80,255,.45); } [data-wheel=gold] .wheel-wrap { box-shadow: 0 0 40px rgba(255,190,60,.4); } [data-wheel=ice] .wheel-wrap { box-shadow: 0 0 40px rgba(120,210,255,.4); } [data-wheel=toxic] .wheel-wrap { box-shadow: 0 0 40px rgba(120,255,60,.4); }
/* окно кейсов */
[data-casefx=frost] .reel-wrap { background: linear-gradient(180deg, rgba(150,220,255,.14), rgba(5,10,20,.6)); border-radius: 16px; box-shadow: inset 0 0 40px rgba(140,220,255,.25), 0 0 26px rgba(120,210,255,.25); } [data-casefx=frost] .reel-ptr { background: #9fe3ff; box-shadow: 0 0 16px #9fe3ff; }
[data-casefx=gold] .reel-wrap { background: linear-gradient(180deg, rgba(255,200,70,.16), rgba(20,12,0,.6)); border-radius: 16px; box-shadow: inset 0 0 40px rgba(255,190,60,.25), 0 0 26px rgba(255,190,60,.25); } [data-casefx=gold] .reel-ptr { background: #ffd86b; box-shadow: 0 0 16px #ffd86b; }
[data-casefx=neon] .reel-wrap { background: linear-gradient(180deg, rgba(255,60,180,.14), rgba(10,0,20,.6)); border-radius: 16px; box-shadow: inset 0 0 40px rgba(255,60,180,.25), 0 0 26px rgba(80,200,255,.3); } [data-casefx=neon] .reel-ptr { background: #ff4dc8; box-shadow: 0 0 16px #ff4dc8; }
/* обложки профиля */
.cover { background-size: cover; }
.cv-aurora { background: radial-gradient(600px 200px at 20% 0%, rgba(56,224,140,.55), transparent 70%), radial-gradient(500px 220px at 80% 20%, rgba(155,123,255,.55), transparent 70%), linear-gradient(120deg, #07131f, #0c1030); }
.cv-sunset { background: radial-gradient(500px 220px at 80% 100%, rgba(255,120,60,.6), transparent 70%), linear-gradient(160deg, #2a0f3d, #5a1a45 55%, #a8402f); }
.cv-matrix { background: repeating-linear-gradient(90deg, rgba(56,224,140,.14) 0 2px, transparent 2px 14px), linear-gradient(180deg, #02100a, #03221a); }
.cv-nebula { background: radial-gradient(300px 160px at 30% 40%, rgba(255,77,154,.5), transparent 70%), radial-gradient(360px 180px at 75% 60%, rgba(77,141,255,.5), transparent 70%), radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 60% 70%, #fff, transparent), radial-gradient(1px 1px at 85% 25%, #fff, transparent), #070818; }
.prof-card { position: relative; overflow: hidden; }
.prof-card.has-cover { padding-top: 0; }
.prof-card .cover-strip { height: 110px; margin: 0 -16px 0; }
@media (min-width: 700px) { .prof-card .cover-strip { height: 150px; } }
.prof-card.has-cover .prof-head { margin-top: -42px; position: relative; }

/* магазин: разделы */
.shop-sec { margin-top: 14px; } .shop-sec h3 { margin: 0 0 4px; } .shop-sec .sec-d { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.sh-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.sh-card { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-align: center; }
@media (min-width: 700px) { .sh-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } } @media (min-width: 1100px) { .sh-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.sh-card.active { border-color: var(--accent); box-shadow: 0 0 22px -8px var(--accent); }
.sh-card b { font-size: 14px; } .sh-card small { color: var(--muted); font-size: 12px; min-height: 16px; }
.sh-prev { height: 84px; display: grid; place-items: center; width: 100%; }
.sh-prev .cvp { width: 100%; height: 56px; border-radius: 10px; border: 1px solid var(--line); }
.sh-prev .coinp { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; border: 4px solid rgba(255,255,255,.3); }
.sh-prev .wheelp { width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(#d9304f 0 25%, #1a1f33 0 50%, #d9304f 0 75%, #1a1f33 0); border: 3px solid #394063; }
.sh-prev .casep { width: 100%; height: 52px; border-radius: 12px; border: 1px solid var(--line); background: rgba(5,7,12,.6); position: relative; } .sh-prev .casep::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--accent); }
.sh-prev .emo { font-size: 38px; }
.ach { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); flex: 1 1 calc(50% - 10px); min-width: 0; } .ach.on { border-color: rgba(var(--accent-rgb), .5); }
.ach .ai { font-size: 26px; flex: none; } .ach .progress { margin-top: 6px; }

/* эффекты выигрыша */
.fxcanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 95; }
.fxflash { position: fixed; inset: 0; pointer-events: none; z-index: 94; box-shadow: inset 0 0 120px 30px rgba(var(--accent-rgb), .85); animation: fxflash .9s ease-out forwards; }
@keyframes fxflash { from { opacity: 1; } to { opacity: 0; } }
.bigwin { position: fixed; left: 50%; top: 28%; transform: translate(-50%, -50%); z-index: 96; pointer-events: none; text-align: center; font-family: var(--display); animation: bigwin 2.4s cubic-bezier(.2,1.3,.3,1) forwards; }
.bigwin b { display: block; font-size: clamp(34px, 9vw, 68px); color: #ffd86b; text-shadow: 0 0 30px rgba(255,190,60,.9), 0 4px 0 #8a5a00; letter-spacing: .05em; } .bigwin span { font-size: clamp(18px, 4vw, 28px); color: #fff; }
@keyframes bigwin { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }

/* единая плашка результата: компактная, не перекрывает игру */
.rstrip { position: fixed; top: calc(var(--top-h) + var(--safe-t) + 8px); left: 50%; transform: translateX(-50%); z-index: 60; flex: none; width: auto; max-width: min(92vw, 560px); padding: 7px 16px; border-radius: 99px; font-size: 13px; text-align: center; pointer-events: none; backdrop-filter: none; background: rgba(13,17,27,.96); box-shadow: 0 8px 28px rgba(0,0,0,.5); }
.rstrip.win { background: #0e2a1d; } .rstrip.lose { background: #2a1015; }
.rstrip.pop { animation: rs-pop .4s cubic-bezier(.2,1.4,.4,1); } @keyframes rs-pop { from { transform: translateX(-50%) scale(.85); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.bj-hand.won { border-color: rgba(56,224,140,.6); background: rgba(56,224,140,.08); animation: pop-in .4s ease; } .bj-hand.lost { opacity: .7; }

/* кейсы: список окон и страница кейса */
.case-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.case-tile { flex: 1 1 calc(50% - 12px); min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px 14px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--cc) 35%, var(--line)); background: radial-gradient(260px 180px at 50% 0%, color-mix(in srgb, var(--cc) 22%, transparent), transparent 70%), var(--surface); transition: transform .25s, box-shadow .25s; text-align: center; }
.case-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px var(--cc); }
.ct-art { width: 100%; max-width: 130px; } .ct-art svg { width: 100%; height: auto; filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--cc) 55%, transparent)); }
.ct-name { font-family: var(--display); font-size: 17px; text-transform: uppercase; letter-spacing: .04em; } .ct-price { color: var(--accent); font-weight: 700; font-size: 14px; }
.ct-top { display: flex; align-items: center; gap: 6px; color: var(--muted); } .ct-top svg { width: 22px; height: 22px; } .ct-btn { margin-top: 6px; width: 100%; }
@media (min-width: 700px) { .case-tile { flex-basis: calc(33.333% - 12px); } .ct-art { max-width: 150px; } }
@media (min-width: 1100px) { .case-tile { flex-basis: calc(25% - 12px); padding: 22px 16px 18px; } }
.case-open-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .case-open-head h2 { font-size: 24px; text-transform: uppercase; } .coh-art { width: 56px; } .coh-art svg { width: 100%; height: auto; }
.drop-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.drop-card { flex: 1 1 calc(50% - 10px); min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 8px 10px; border-radius: 16px; border: 1px solid var(--line); border-bottom: 3px solid var(--rc); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 16%, transparent), var(--surface)); text-align: center; }
.drop-card svg { width: 54px; height: 54px; color: var(--rc); } .drop-card b { font-size: 13px; line-height: 1.15; overflow-wrap: anywhere; } .drop-card small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--rc); }
.drop-card .dv { font-weight: 700; } .drop-card .dc { color: var(--muted); font-size: 12px; }
@media (min-width: 700px) { .drop-card { flex-basis: calc(25% - 10px); } } @media (min-width: 1100px) { .drop-card { flex-basis: calc(16.666% - 10px); } .drop-card svg { width: 64px; height: 64px; } }

/* ================= v5: шапка, баннеры, подсказки ================= */
.starbg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.topbar { background: rgba(8,11,18,.82); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-d { margin-left: 10px; gap: 2px; }
.nav-d a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; font-size: 14px; border-radius: 12px; }
.nav-d a svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.nav-d a.active { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .35); }
@media (min-width: 900px) and (max-width: 1179px) { .nav-d a:not(.active) span { display: none; } .nav-d a { padding: 8px 10px; } }
@media (min-width: 1180px) { .nav-d { margin-left: 18px; } .nav-d a { padding: 8px 14px; } }

/* подсказки компактнее */
.page-sub { font-size: 12.5px; margin: 2px 0 12px; } .page-title { margin-bottom: 2px; }
.mode-note { font-size: 11.5px; line-height: 1.35; color: var(--faint); }
.card h3 { font-size: 16px; }
.card .muted { font-size: 12.5px; }
.sec-d, .shop-sec .sec-d { font-size: 11.5px !important; }

/* баннер: арт в круглом свечении, ничего не обрезается */
.bn-slide { min-height: 210px; padding: 22px 20px 44px; }
.bn-art { right: 18px; bottom: auto; top: 50%; transform: translateY(-50%); width: clamp(104px, 30vw, 150px); aspect-ratio: 1; max-width: none; opacity: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.28), rgba(255,255,255,.06) 70%); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 20px 50px -10px rgba(0,0,0,.45); padding: 22px; }
.bn-art svg { width: 100%; height: 100%; max-height: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.bn-art.soc { padding: 26px; } .bn-art.soc svg { width: 100%; stroke-width: 1.5; }
.bn-art.emoji { font-size: clamp(50px, 14vw, 80px); padding: 0; }
.bn-txt { max-width: calc(100% - clamp(104px, 30vw, 150px) - 24px); }
.bn-txt h2 { font-size: clamp(20px, 5.4vw, 40px); }
.bn-txt p { font-size: 13px; margin: 8px 0 12px; }
@media (min-width: 900px) { .bn-slide { min-height: 300px; padding: 40px 72px 52px; } .bn-art { width: 230px; right: 90px; padding: 34px; } .bn-txt { max-width: 56%; } .bn-txt h2 { font-size: clamp(30px, 3.6vw, 48px); } .bn-txt p { font-size: 16px; } .bn-art.emoji { font-size: 110px; } }
.gcard .gart { right: 8px; top: 8px; width: 58%; max-width: 150px; } .gcard::after { background: linear-gradient(180deg, transparent 40%, rgba(5,7,12,.82)); }
@media (min-width: 1100px) { .gcard .gart { max-width: 170px; } }
.bn-art { display: block; box-sizing: border-box; } .bn-art svg { display: block; width: 100%; height: 100%; }
.bn-art.emoji { display: grid; place-items: center; } .bn-art.soc svg { width: 100%; height: 100%; }
.recent { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }

.sh-prev .avw.xl { transform: scale(.85); }
.sh-card b { margin-top: 4px; }
.prof-card.has-cover .prof-head { margin-top: -30px; align-items: flex-end; }
.prof-card.has-cover .prof-head h1, .prof-card.has-cover .prof-head .nm { text-shadow: 0 2px 8px rgba(0,0,0,.7); }

/* арт баннера: фиксированный размер на любых экранах */
.banner .bn-slide .bn-art { width: clamp(110px, 30vw, 150px); height: auto; max-width: none; right: 18px; }
@media (min-width: 900px) { .banner .bn-slide .bn-art { width: 210px; right: 70px; } .banner .bn-slide .bn-art.emoji { width: 210px; font-size: 100px; display: grid; } }
.banner.small .bn-slide .bn-art { width: 96px; right: 14px; }
.banner .bn-slide .bn-art { padding: 22px; } .banner .bn-slide .bn-art.emoji { padding: 0; } .banner.small .bn-slide .bn-art { padding: 16px; }

/* шапка: ничего не наезжает друг на друга */
.topbar .wallet, .topbar .user-chip, .topbar .admin-link { flex: none; }
.topbar .user-chip { gap: 8px; padding-right: 12px; margin-left: 4px; }
.user-chip .avw { margin: 3px 6px 3px 7px; }
.user-chip .avw.sm::before { inset: -3px; }
.topbar .wallet { margin-right: 4px; }
@media (min-width: 900px) and (max-width: 1299px) { .admin-link .al-t { display: none; } .nav-d a { padding: 8px 8px; font-size: 13.5px; gap: 5px; } .user-chip b { display: none; } }
.ttl.mini { font-size: 10px; padding: 1px 6px; margin-left: 2px; vertical-align: middle; white-space: nowrap; }
.pname { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pname .avw { margin: 0 3px; }
.pname .avw.sm::before, .prow .avw.sm::before { inset: -3px; border-width: 2.5px; }

/* пригласить друга */
.invite-link { display: flex; gap: 8px; } .invite-link .input { min-width: 0; flex: 1; font-size: 12.5px; }
.invite-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.invite-stats > div { background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.invite-stats b { font-family: var(--display); font-size: 18px; } .invite-stats small { color: var(--muted); font-size: 11px; }

/* ===== round: tiles, gear, badge, settings, profile fix, podium, own bet, animated covers ===== */
.quick-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.qt { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); min-width: 0; transition: transform .15s, border-color .15s; }
.qt:active { transform: scale(.98); } .qt:hover { border-color: rgba(var(--accent-rgb), .5); }
.qt.shop { background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), var(--surface)); }
.qt.bon { background: linear-gradient(135deg, rgba(255,181,61,.16), var(--surface)); }
.qi { font-size: 28px; flex: none; } .qtx { min-width: 0; display: grid; }
.qtx b { font-family: var(--display); } .qtx small { color: var(--muted, #8b93a7); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: #ff3b4e; box-shadow: 0 0 0 2px var(--bg, #0b0d14), 0 0 10px rgba(255,59,78,.8); animation: nbp 1.8s infinite; }
.nb[hidden] { display: none; }
@keyframes nbp { 50% { transform: scale(1.25); } }
.nav a, .tabbar a, .bottom-tabs a, .tab { position: relative; }
.nav a .nb, .tabbar a .nb { top: 6px; right: 6px; }
.gearbtn { flex: none; width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: inherit; padding: 0; cursor: pointer; }
.gearbtn svg { width: 20px; height: 20px; } .gearbtn:hover { border-color: rgba(var(--accent-rgb), .6); }
.gearbtn[hidden] { display: none; }
.set-box { display: grid; gap: 8px; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.set-ico { font-size: 22px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(var(--accent-rgb), .14); flex: none; }
.set-tx { flex: 1; min-width: 0; display: grid; } .set-tx small { color: var(--muted, #8b93a7); font-size: 12px; }
.set-acc { padding: 12px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.set-accents { margin-top: 10px; }

/* profile on phones */
.prof-head .grow { min-width: 0; }
.prof-head .pmail, .prof-head h1 { overflow-wrap: anywhere; }
@media (max-width: 699px) {
  .prof-head { flex-direction: column; align-items: flex-start !important; gap: 14px; }
  .prof-head .grow { width: 100%; flex: none; }
  .prof-head .stat { width: 100%; min-width: 0 !important; }
  .prof-card.has-cover .prof-head { margin-top: -34px; }
}

/* podium frame */
.pod .avw { display: grid; width: 48px; height: 48px; margin: 10px auto; }
.pod .avw .avatar { margin: 0; width: 100%; height: 100%; }
.pod.p1 .avw { width: 56px; height: 56px; }
.avw > * { aspect-ratio: 1; }

/* own bet */
.prow.me { outline: 2px solid var(--accent); background: linear-gradient(90deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .06)); box-shadow: 0 0 22px -4px rgba(var(--accent-rgb), .55); font-weight: 700; position: relative; }
.prow.me b { color: var(--accent); font-size: 1.12em; } .prow.me .n { color: #fff; }

/* animated covers */
.cover-strip, .sh-prev .cvp { position: relative; overflow: hidden; }
.cover-strip::before, .cover-strip::after, .sh-prev .cvp::before, .sh-prev .cvp::after { content: ''; position: absolute; pointer-events: none; }
.cv-aurora { background-size: 100% 100%, 100% 100%, 100% 100%; }
.cv-aurora::before { inset: -40% -20%; background: linear-gradient(100deg, transparent 30%, rgba(56,224,140,.35) 45%, rgba(155,123,255,.35) 55%, transparent 70%); filter: blur(18px); animation: cvAur 9s ease-in-out infinite alternate; }
@keyframes cvAur { from { transform: translateX(-30%); } to { transform: translateX(30%); } }
.cv-sunset::before { left: 50%; bottom: -60%; width: 90%; aspect-ratio: 1; margin-left: -45%; border-radius: 50%; background: radial-gradient(circle, rgba(255,190,90,.85), rgba(255,100,60,.35) 45%, transparent 70%); animation: cvSun 7s ease-in-out infinite alternate; }
@keyframes cvSun { from { transform: translateY(18%); opacity: .6; } to { transform: translateY(-14%); opacity: 1; } }
.cv-matrix::before { inset: 0; background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(120,255,190,.55) 11px 13px, transparent 13px 26px); -webkit-mask: linear-gradient(180deg, transparent, #000 40%, transparent 80%); mask: linear-gradient(180deg, transparent, #000 40%, transparent 80%); background-size: 26px 200%; animation: cvMat 3.2s linear infinite; }
.cv-matrix::after { inset: 0; background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(56,224,140,.5) 5px 6px, transparent 6px 19px); -webkit-mask: linear-gradient(180deg, transparent, #000 30%, transparent 70%); mask: linear-gradient(180deg, transparent, #000 30%, transparent 70%); background-size: 19px 160%; animation: cvMat 5s linear infinite; opacity: .6; }
@keyframes cvMat { from { background-position: 0 -100%; } to { background-position: 0 100%; } }
.cv-nebula::before { inset: 0; background: radial-gradient(2px 2px at 12% 30%, #fff, transparent), radial-gradient(2px 2px at 40% 70%, #fff, transparent), radial-gradient(2px 2px at 68% 25%, #fff, transparent), radial-gradient(2px 2px at 90% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 52% 45%, #fff, transparent); animation: cvTw 3s ease-in-out infinite alternate; }
.cv-nebula::after { inset: -20%; background: radial-gradient(300px 140px at 30% 50%, rgba(255,77,154,.28), transparent 70%); animation: cvDrift 12s ease-in-out infinite alternate; }
@keyframes cvTw { from { opacity: .2; } to { opacity: 1; } }
@keyframes cvDrift { to { transform: translateX(35%) scale(1.2); } }
.cv-waves { background: linear-gradient(180deg, #062a44, #0a5a86); }
.cv-waves::before { left: 0; bottom: -10%; width: 200%; height: 70%; background: radial-gradient(60px 22px at 50% 0, rgba(120,220,255,.55) 98%, transparent 100%) 0 0 / 120px 40px repeat-x; animation: cvWave 6s linear infinite; opacity: .7; }
.cv-waves::after { left: 0; bottom: -20%; width: 200%; height: 60%; background: radial-gradient(80px 28px at 50% 0, rgba(30,140,200,.7) 98%, transparent 100%) 0 0 / 160px 50px repeat-x; animation: cvWave 10s linear infinite reverse; }
@keyframes cvWave { to { transform: translateX(-50%); } }
.cv-embers { background: radial-gradient(500px 160px at 50% 120%, rgba(255,90,20,.6), transparent 70%), linear-gradient(180deg, #140706, #2b0e08); }
.cv-embers::before { inset: 0; background: radial-gradient(2.5px 2.5px at 15% 90%, #ffb347, transparent), radial-gradient(2px 2px at 35% 80%, #ff7a3c, transparent), radial-gradient(2.5px 2.5px at 55% 95%, #ffd27a, transparent), radial-gradient(2px 2px at 75% 85%, #ff6a2a, transparent), radial-gradient(2px 2px at 92% 92%, #ffb347, transparent); background-size: 100% 100%; animation: cvEmb 4s linear infinite; }
.cv-embers::after { inset: 0; background: radial-gradient(2px 2px at 25% 100%, #ffc266, transparent), radial-gradient(2.5px 2.5px at 47% 90%, #ff7a3c, transparent), radial-gradient(2px 2px at 66% 100%, #ffd27a, transparent), radial-gradient(2px 2px at 84% 95%, #ff6a2a, transparent); animation: cvEmb 6s linear infinite 1.5s; }
@keyframes cvEmb { from { transform: translateY(40%); opacity: 1; } to { transform: translateY(-80%); opacity: 0; } }
.no-anim .cover-strip::before, .no-anim .cover-strip::after, .no-anim .cvp::before, .no-anim .cvp::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .cover-strip::before, .cover-strip::after, .cvp::before, .cvp::after { animation: none !important; } }
.bottomnav a, .bottomnav-in a, header a, .topnav a { position: relative; }
.bottomnav a .nb { top: 8px; right: calc(50% - 22px); }

/* ===== звания и значки: карточка не сжимается ===== */
.sh-grid > .ach, .ach { flex-wrap: wrap; align-items: flex-start; }
.sh-grid .ach { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: start; }
.sh-grid .ach .ai { grid-row: 1 / span 2; font-size: 30px; }
.sh-grid .ach .grow { grid-column: 2; min-width: 0; }
.sh-grid .ach .grow b { display: block; overflow-wrap: anywhere; }
.sh-grid .ach .grow .muted { overflow-wrap: break-word; word-break: normal; hyphens: auto; line-height: 1.3; }
.sh-grid .ach > small { grid-column: 1 / -1; text-align: right; font-weight: 700; }
.sh-grid .ach > .btn { grid-column: 1 / -1; width: 100%; }
@media (max-width: 699px) { .sh-grid:has(.ach) { grid-template-columns: 1fr; } }

/* ===== бесплатный кейс и быстрый режим ===== */
.free-case { margin-bottom: 14px; border-color: rgba(255,181,61,.45); background: linear-gradient(135deg, rgba(255,181,61,.14), var(--surface)); }
.fc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fc-art { font-size: 40px; filter: drop-shadow(0 4px 14px rgba(255,181,61,.6)); animation: fcFloat 3s ease-in-out infinite; }
@keyframes fcFloat { 50% { transform: translateY(-4px) rotate(-4deg); } }
.fc-title { font-family: var(--display); font-size: 20px; }
.fc-timer { font-family: var(--display); font-weight: 800; font-size: 22px; padding: 6px 12px; border-radius: 12px; background: rgba(255,255,255,.06); }
.fc-timer.ready { color: #1a1200; background: #ffb53d; }
.fc-actions { margin-top: 12px; } .fc-btn { width: 100%; }
.fc-stage:not(:empty) { margin-top: 12px; }
.fc-res:not(:empty) { margin-top: 12px; text-align: center; }
.fc-win { display: inline-grid; padding: 10px 22px; border-radius: 16px; background: rgba(56,224,140,.14); border: 1px solid rgba(56,224,140,.5); animation: pop .4s; }
.fc-win b { font-family: var(--display); font-size: 26px; color: var(--accent); }
.fc-tile .fc-coin { font-size: 26px; }
.fast-sw { margin-top: 12px; border-bottom: 0; padding: 8px 2px 0; }
.panel .fast-sw { padding: 10px 2px; }

/* ===== Plinko ===== */
.pl-stage { padding: 8px 8px 10px; }
.pl-canvas { display: block; width: 100%; height: 300px; }
.pl-bins { display: flex; gap: 3px; margin: 4px auto 0; }
.pl-bin { flex: 1; min-width: 0; text-align: center; font-size: clamp(7px, 2.2vw, 12px); font-weight: 800; padding: 6px 0; letter-spacing: -.03em; border-radius: 6px; background: color-mix(in srgb, var(--bc) 30%, #0b0e18); border-bottom: 3px solid var(--bc); overflow: hidden; }
.pl-bin.hit { background: var(--bc); color: #0b0e18; transform: translateY(2px) scale(1.08); box-shadow: 0 0 18px var(--bc); }

/* ===== Колесо ===== */
.wh-stage { position: relative; display: grid; place-items: center; padding: 22px 12px 14px; }
.wh-svg { width: min(100%, 360px); height: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.wh-svg g { transform-origin: 0 0; transform-box: view-box; }
.wh-ptr { position: absolute; top: 8px; left: 50%; margin-left: -12px; border: 12px solid transparent; border-top: 22px solid #ff4d6e; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); z-index: 2; }
.wh-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.wh-chip { padding: 3px 9px; border-radius: 99px; font-weight: 800; font-size: 12px; background: color-mix(in srgb, var(--c) 28%, #0b0e18); border: 1px solid var(--c); }
.wh-chip small { opacity: .7; font-weight: 600; }

/* ===== Башня ===== */
.tw-stage { padding: 12px; }
.tw-tower { display: grid; gap: 6px; max-width: 460px; margin: 0 auto; }
.tw-row { display: flex; gap: 6px; align-items: stretch; padding: 4px; border-radius: 14px; border: 1px solid transparent; }
.tw-row.cur { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); box-shadow: 0 0 18px -6px var(--accent); }
.tw-row.passed { opacity: .85; }
.tw-m { flex: none; width: 58px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.tw-row.cur .tw-m { color: var(--accent); }
.tw-tile { flex: 1; min-width: 0; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.07); font-size: 20px; padding: 0; transition: transform .12s, background .12s; }
.tw-tile:not(:disabled):hover { background: rgba(var(--accent-rgb), .22); transform: translateY(-1px); }
.tw-tile:disabled { opacity: 1; cursor: default; }
.tw-tile.safe { background: rgba(56,224,140,.3); border-color: #38e08c; } .tw-tile.bomb { background: rgba(255,77,110,.35); border-color: #ff4d6e; }
.tw-tile.ghost-bomb { opacity: .55; } .tw-tile.ghost { opacity: .45; }
.tw-row:not(.cur):not(.passed) .tw-tile { opacity: .5; }

/* ===== Upgrade ===== */
.up-stage { display: grid; place-items: center; padding: 20px; }
.up-gauge { position: relative; width: min(70vw, 260px); aspect-ratio: 1; }
.up-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#38e08c calc(var(--p) * 1%), #2a3047 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); }
.up-needle { position: absolute; inset: 0; }
.up-needle::before { content: ''; position: absolute; left: 50%; top: -4px; width: 6px; height: 22%; margin-left: -3px; border-radius: 3px; background: #fff; box-shadow: 0 0 10px #fff; }
.up-rt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.up-rt b { font-family: var(--display); font-size: 34px; } .up-rt small { color: var(--muted); }
.up-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.up-it { padding: 0; border: 2px solid transparent; border-radius: 14px; background: none; position: relative; }
.up-it .ritem { width: 100%; margin: 0; }
.up-it.on { border-color: var(--accent); box-shadow: 0 0 16px -2px var(--accent); }
.up-it.on::after { content: '✓'; position: absolute; top: 4px; right: 6px; font-weight: 900; color: var(--accent); }

/* ===== Колесо x2/x3/x5/x50 (кольцо) ===== */
.wh-wrap { position: relative; width: min(100%, 380px); margin: 0 auto; aspect-ratio: 1; }
.wh-ring { width: 100%; height: 100%; display: block; }
.wh-ring g { transform-box: view-box; }
.wh-ptr { position: absolute; top: -6px; left: 50%; margin-left: -11px; width: 0; height: 0; border: 11px solid transparent; border-top: 20px solid var(--accent); border-bottom: 0; z-index: 2; filter: drop-shadow(0 0 8px var(--accent)); }
.wh-center { position: absolute; inset: 17%; display: grid; align-content: center; justify-items: center; gap: 6px; text-align: center; }
.wh-lbl { color: var(--muted); font-size: 12px; } .wh-big { font-family: var(--display); font-size: 34px; font-weight: 800; line-height: 1; }
.wh-hist { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 100%; min-height: 4px; }
.wh-hist span { padding: 2px 7px; border-radius: 99px; font-size: 11px; font-weight: 800; background: color-mix(in srgb, var(--c) 22%, #0b0e18); border: 1px solid var(--c); opacity: .75; } .wh-hist span.w { opacity: 1; box-shadow: 0 0 10px -2px var(--c); }
.wh-rep { font-size: 12px; padding: 5px 10px; border-radius: 12px; background: rgba(255,255,255,.06); }
.wh-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wh-tile { display: grid; gap: 2px; padding: 12px 4px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 10%, #0b0e18); color: var(--c); }
.wh-tile b { font-family: var(--display); font-size: 20px; } .wh-tile small { opacity: .8; font-size: 11px; }
.wh-tile.on { background: var(--c); color: #0b0e18; box-shadow: 0 0 20px -4px var(--c); }
.wh-tile:disabled { opacity: .7; }
.up-chv { font-family: var(--display); font-size: 16px; }

/* ===== Общий чат ===== */
.cht-root[hidden], .cht-panel[hidden], .cht-bubble[hidden], .cht-badge[hidden], .cht-emojis[hidden], .cht-note[hidden] { display: none !important; }
.cht-root { position: fixed; z-index: 70; right: 12px; bottom: calc(var(--nav-h) + var(--safe-b) + 12px); }
.cht-bubble { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--accent); color: #04110a; font-size: 24px; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px -4px rgba(var(--accent-rgb), .7); }
.cht-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; padding: 2px 5px; border-radius: 99px; background: #ff3b4e; color: #fff; font: 800 10px/14px var(--font, inherit); font-style: normal; text-align: center; }
.cht-panel { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b)); height: min(62dvh, 520px); display: flex; flex-direction: column; background: #0f1220; border: 1px solid var(--line); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.6); }
.cht-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cht-head b { font-family: var(--display); }
.cht-online { color: var(--muted); }
.cht-x { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: var(--text, #fff); font-size: 16px; cursor: pointer; }
.cht-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.cht-msg { display: flex; gap: 8px; align-items: flex-start; }
.cht-msg .avatar { width: 32px; height: 32px; }
.cht-av { padding: 0; border: 0; background: none; cursor: pointer; flex: none; }
.cht-body { min-width: 0; flex: 1; }
.cht-nm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: 13px; }
.cht-name { padding: 0; border: 0; background: none; color: var(--text, #fff); font: 700 13px/1.2 inherit; cursor: pointer; }
.cht-msg.me .cht-name { color: var(--accent); }
.cht-nm em { font-style: normal; color: var(--muted); font-size: 11px; }
.cht-lv { color: var(--accent); font-size: 10px; font-weight: 800; }
.cht-nm time { margin-left: auto; color: var(--faint, #6b7390); font-size: 10px; }
.cht-adm-tag { font-size: 11px; }
.cht-tx { font-size: 14px; line-height: 1.35; margin-top: 1px; word-break: break-word; overflow-wrap: anywhere; }
.cht-tx.big { font-size: 32px; line-height: 1.15; }
.cht-giftline { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; padding: 6px 10px; border-radius: 12px; font-size: 13px; background: linear-gradient(135deg, rgba(255,181,61,.2), rgba(255,77,154,.15)); border: 1px solid rgba(255,181,61,.5); }
.cht-giftline .cht-name { color: var(--accent); }
.cht-note { padding: 8px 12px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); background: rgba(255,255,255,.03); }
.cht-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; border-top: 1px solid var(--line); max-height: 132px; overflow-y: auto; }
.cht-emojis button { border: 0; background: none; font-size: 22px; padding: 4px 0; border-radius: 8px; cursor: pointer; }
.cht-emojis button:active { background: rgba(255,255,255,.1); }
.cht-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.cht-input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 14px; border: 0; background: rgba(255,255,255,.07); color: var(--text, #fff); font-size: 16px; }
.cht-emo, .cht-send { flex: none; width: 42px; border: 0; border-radius: 14px; font-size: 18px; cursor: pointer; }
.cht-emo { background: rgba(255,255,255,.1); }
.cht-send { background: var(--accent); color: #04110a; font-weight: 900; }
.cht-form button:disabled, .cht-input:disabled { opacity: .5; }
.cht-pop-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cht-adm { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.avatar.lg { width: 52px; height: 52px; }
@media (min-width: 900px) {
  .cht-root { bottom: 16px; right: 16px; }
  .cht-panel { left: auto; right: 16px; bottom: 16px; width: 360px; height: 480px; border-radius: 20px; }
}

/* ===== Подарки ===== */
.gf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .gf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .gf-grid { grid-template-columns: repeat(4, 1fr); } }
.gf-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 14px 10px 12px; border-radius: 22px; overflow: hidden; color: var(--text, #fff); border: 1px solid var(--gc); font: inherit;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--gc) 35%, transparent), #0d1020 70%); box-shadow: 0 0 28px -10px var(--gc); }
button.gf-card { cursor: pointer; }
.gf-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%); transform: translateX(-70%); animation: gfShine 5s ease-in-out infinite; }
.gf-card.gk-exclusive { border-width: 2px; box-shadow: 0 0 36px -6px var(--gc), inset 0 0 22px -8px var(--gc); }
.gf-card.gk-exclusive::after { content: ''; position: absolute; inset: -40%; pointer-events: none; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--gc) 30%, transparent), transparent 30%); animation: gfSpin 7s linear infinite; opacity: .6; }
.gf-card > * { position: relative; z-index: 1; }
@keyframes gfShine { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }
@keyframes gfSpin { to { transform: rotate(360deg); } }
@keyframes gfFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.gf-art { font-size: 64px; line-height: 1.1; margin: 8px 0 2px; filter: drop-shadow(0 6px 14px var(--gc)); animation: gfFloat 4s ease-in-out infinite; }
.gf-tile .gf-art { font-size: 46px; }
.gf-name { font-family: var(--display); font-size: 15px; }
.gf-ed { font-size: 11px; font-weight: 800; color: var(--gc); margin-top: 2px; }
.gf-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.gf-bar { align-self: stretch; height: 5px; border-radius: 9px; background: rgba(255,255,255,.12); margin: 8px 6px 4px; overflow: hidden; }
.gf-bar i { display: block; height: 100%; background: var(--gc); }
.gf-card small { color: var(--muted); font-size: 11px; }
.gf-from { margin-top: 2px; }
.gf-buy { align-self: stretch; margin-top: 8px; padding: 10px 8px; border: 0; border-radius: 12px; background: var(--gc); color: #10121c; font-weight: 800; font-size: 13px; cursor: pointer; }
.gf-buy:disabled { opacity: .45; cursor: default; filter: grayscale(.6); }
.gf-tag { position: absolute !important; top: 8px; left: 8px; z-index: 2; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: rgba(0,0,0,.55); border: 1px solid var(--gc); color: var(--gc); }
.gf-new { position: absolute !important; top: 8px; right: 8px; z-index: 2; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 99px; background: #ff3b4e; color: #fff; }
.gf-card.listed { opacity: .75; }
.gf-grid.sm { grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 700px) { .gf-grid.sm { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .gf-grid.sm { grid-template-columns: repeat(5, 1fr); } }
.gf-grid.sm .gf-name { font-size: 13px; }
.gf-big { font-size: 84px; line-height: 1.1; text-align: center; filter: drop-shadow(0 8px 22px var(--gc)); animation: gfFloat 4s ease-in-out infinite; }
.gf-serial { display: inline-block; align-self: center; padding: 3px 12px; border-radius: 99px; font-weight: 800; font-size: 13px; color: var(--gc); border: 1px solid var(--gc); background: color-mix(in srgb, var(--gc) 14%, transparent); }
.gf-reveal .gf-big { animation: gfPop .7s cubic-bezier(.2,1.4,.3,1) both, gfFloat 4s 0.7s ease-in-out infinite; }
@keyframes gfPop { from { transform: scale(.2) rotate(-25deg); opacity: 0; } }
.gf-sheet { gap: 10px; }
.gf-act { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--text, #fff); font: inherit; text-align: left; cursor: pointer; }
.gf-act b { font-weight: 700; }
.gf-act small { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 12px; }
.gf-act.off { opacity: .55; }
.gf-act:active { background: rgba(255,255,255,.12); }
.gf-listed { text-align: center; padding: 8px; border-radius: 12px; background: rgba(255,181,61,.12); border: 1px solid rgba(255,181,61,.4); font-weight: 700; }
.no-anim .gf-card::before, .no-anim .gf-card::after, .no-anim .gf-art, .no-anim .gf-big { animation: none !important; }

/* ===== Донат ===== */
.don-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border: 0; border-radius: 99px; font: 800 14px/1 inherit; color: #2a0a14; background: linear-gradient(135deg, #ff8fb1, #ffb86b); box-shadow: 0 8px 24px -6px rgba(255,120,150,.6); position: relative; overflow: hidden; cursor: pointer; text-decoration: none; }
.don-btn[hidden], .don-card[hidden] { display: none !important; }
.don-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%); transform: translateX(-70%); animation: gfShine 4s infinite; }
.don-h { display: inline-block; animation: donBeat 1.4s infinite; }
@keyframes donBeat { 50% { transform: scale(1.25); } }
.don-big { font-size: 56px; filter: drop-shadow(0 8px 20px rgba(255,120,150,.6)); }
.don-card { display: flex; gap: 12px; align-items: center; width: 100%; padding: 14px; border-radius: 18px; text-align: left; color: var(--text, #fff); font: inherit; cursor: pointer; background: linear-gradient(135deg, rgba(255,143,177,.16), rgba(255,184,107,.1)); border: 1px solid rgba(255,143,177,.4); }
.don-e { font-size: 34px; } .don-t { display: grid; min-width: 0; } .don-t b { font-family: var(--display); } .don-t small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.don-go { margin-left: auto; padding: 9px 14px; border-radius: 12px; background: #ff8fb1; color: #2a0a14; font-weight: 800; font-size: 13px; white-space: nowrap; }
.no-anim .don-btn::before, .no-anim .don-h { animation: none; }

/* ===== Рассылка (админка) ===== */
.bc-aud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bc-aud button { padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text, #fff); font: 700 13px/1.2 inherit; text-align: left; cursor: pointer; }
.bc-aud button small { display: block; color: var(--muted); font-weight: 600; font-size: 11px; margin-top: 2px; }
.bc-aud button.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.bc-drop { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1.5px dashed rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .05); color: var(--text, #fff); font: inherit; text-align: left; width: 100%; }
.bc-empty { cursor: pointer; }
.bc-thumb { position: relative; width: 74px; height: 74px; flex: none; }
.bc-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.bc-thumb i { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #ff3b4e; color: #fff; font-size: 11px; display: grid; place-items: center; font-style: normal; cursor: pointer; }
.bc-tg { background: #0e1621; border-radius: 18px; padding: 14px; display: grid; gap: 8px; border: 1px solid var(--line); }
.bc-hd { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; }
.bc-hd i { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: #04110a; font-style: normal; font-weight: 900; }
.bc-bub { background: #182533; border-radius: 14px 14px 14px 4px; overflow: hidden; max-width: 320px; color: #fff; font-size: 14px; line-height: 1.4; }
.bc-img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.bc-tx { padding: 10px 12px; word-break: break-word; } .bc-tm { text-align: right; font-size: 11px; color: #6d7f8f; padding: 0 10px 6px; }
.bc-ib { max-width: 320px; padding: 9px; border-radius: 10px; background: rgba(80,120,170,.35); color: #fff; text-align: center; font-weight: 700; font-size: 14px; }
.bc-ib[hidden] { display: none; }
textarea.input { padding: 12px 14px; font-family: inherit; font-size: 15px; line-height: 1.45; min-height: 120px; resize: vertical; color: var(--text, #fff); background: rgba(255,255,255,.06); }