/* Agnes Drop — чёрный / белый / бежевый */
:root {
  --bg: #080808;
  --bg2: #101010;
  --card: #151515;
  --card2: #1f1d1b;
  --line: rgba(255, 255, 255, .08);
  --text: #f4f1ec;
  --muted: #8d8780;
  --beige: #d8c4ae;
  --beige2: #efe3d4;
  --bronze: #8f7b6e;
  --bronze2: #5c4d45;
  --win: #e9d3b0;
  --lose: #e0705f;
  --radius: 20px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --head: Montserrat, Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: Montserrat, Inter, system-ui, -apple-system, sans-serif;
  font-size: 15px; font-weight: 500;
  min-height: 100vh;
  padding-bottom: calc(84px + var(--safe-b));
  background:
    radial-gradient(520px 320px at 50% -8%, rgba(216, 196, 174, .10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  overscroll-behavior: none;
  user-select: none;
}
img.emj { width: 1.2em; height: 1.2em; vertical-align: -0.22em; display: inline-block; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input { font: inherit; color: inherit; }
h2 { font-family: var(--head); font-weight: 800; font-size: 22px; margin: 22px 0 12px; letter-spacing: -.4px; }
.muted { color: var(--muted); }

/* ── Топбар ── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: rgba(8, 8, 8, .85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; cursor: pointer; }
.logo img { height: 34px; display: block; }
.logo-pill {
  margin: 24px 0 0 -13px; transform: rotate(-8deg); position: relative;
  font-size: 7.5px; font-weight: 700; letter-spacing: .5px; line-height: 1;
  padding: 3px 6px; border-radius: 20px; color: #f1e9e2;
  background: linear-gradient(135deg, #9a877b, #5c4d45); box-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.balance {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 12px; border-radius: 14px; font-weight: 800;
  background: var(--card); border: 1px solid var(--line);
}
.balance .plus {
  width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--beige2), var(--beige)); color: #14110e; font-size: 18px; line-height: 1;
}
.balance.bump { animation: bump .45s; }
@keyframes bump { 40% { transform: scale(1.12); } }

main { padding: 6px 16px 0; max-width: 560px; margin: 0 auto; }

/* ── Таббар ── */
.tabbar {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); z-index: 20;
  max-width: 540px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px;
  background: rgba(21, 21, 21, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 22px;
}
.tabbar button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 0; border-radius: 16px; font-size: 12px; font-weight: 700; color: var(--muted);
}
.tabbar .ti { font-size: 20px; filter: grayscale(1) opacity(.6); }
.tabbar button.active { background: rgba(216, 196, 174, .12); color: var(--beige2); }
.tabbar button.active .ti { filter: none; }
.badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 6px;
  background: var(--beige); color: #14110e;
}

/* ── Баннер ── */
.banner {
  position: relative; overflow: hidden; margin-top: 10px;
  border-radius: 24px; padding: 22px 20px; min-height: 170px; color: #14110e;
  background: linear-gradient(125deg, #f3e9dd 0%, #d9c5af 55%, #b39b85 100%);
}
.banner h1 { font-family: var(--head); font-weight: 800; font-size: 32px; margin: 0; line-height: 1; letter-spacing: -.8px; }
.banner p { margin: 8px 0 18px; font-weight: 700; max-width: 60%; opacity: .8; }
.banner .btn { position: relative; z-index: 1; width: auto; padding: 13px 22px; }
.banner .art { position: absolute; right: -6px; bottom: -8px; font-size: 96px; transform: rotate(-8deg); filter: drop-shadow(0 10px 25px rgba(60, 40, 20, .35)); }
.banner .art2 { position: absolute; right: 86px; top: 14px; font-size: 40px; transform: rotate(14deg); animation: float 3s ease-in-out infinite; }
.banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 82% 72%, rgba(255,255,255,.45), transparent 45%);
}
@keyframes float { 50% { transform: translateY(-8px) rotate(4deg); } }

/* ── Live ── */
.live { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.live-tag {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--muted);
  padding: 6px 3px; border-radius: 8px; background: var(--card); position: relative;
}
.live-tag::after { content: ''; position: absolute; bottom: -2px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--beige); box-shadow: 0 0 8px var(--beige); }
.live-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.live-list::-webkit-scrollbar { display: none; }
.live-item {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
  animation: pop .3s;
}
.live-item .li-icon { font-size: 24px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--card2); }
.live-item .li-name { font-size: 12px; color: var(--muted); font-weight: 600; }
.live-item .li-sum { font-weight: 800; color: var(--win); }
.live-empty { color: var(--muted); font-size: 13px; padding: 12px; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }

/* ── Сетка игр ── */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.game-card {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1.08;
  border-radius: var(--radius); border: 1px solid var(--line);
  text-align: left; padding: 0; transition: transform .15s;
}
.game-card:active { transform: scale(.96); }
.game-card .gc-art { position: absolute; inset: 0; display: grid; place-items: center; font-size: 74px; }
.game-card .gc-art span { filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .55)); animation: float 3.5s ease-in-out infinite; }
.game-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(239, 227, 212, .22), transparent 52%);
}
.game-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent 45%);
}
.game-card .gc-title { position: absolute; z-index: 1; left: 12px; bottom: 10px; font-family: var(--head); font-weight: 800; font-size: 17px; letter-spacing: -.3px; }
.game-card .gc-tag {
  position: absolute; z-index: 1; left: 10px; top: 10px; font-size: 11px; font-weight: 800;
  padding: 4px 8px; border-radius: 9px; background: rgba(0, 0, 0, .55); color: var(--beige2); backdrop-filter: blur(6px);
}
.game-card .gc-tag.r { left: auto; right: 10px; background: var(--beige); color: #14110e; }
.g-rocket { background: linear-gradient(160deg, #2b2724, #0b0b0b 75%); }
.g-coin   { background: linear-gradient(160deg, #6e5b4c, #1a1511 80%); }
.g-cases  { background: linear-gradient(160deg, #d8c4ae, #6b5a4d 55%, #151210 100%); }
.g-mines  { background: linear-gradient(160deg, #3a3633, #0d0d0d 75%); }
.g-tower  { background: linear-gradient(160deg, #4b3d33, #0e0b09 80%); }
.g-soon   { background: linear-gradient(160deg, #1e1e1e, #090909 80%); }

/* ── Общие элементы ── */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-top: 12px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 16px; border-radius: 16px; font-weight: 800; font-size: 16px; color: #14110e;
  background: linear-gradient(135deg, var(--beige2), var(--beige) 60%, #c2a98f);
  box-shadow: 0 8px 24px rgba(216, 196, 174, .18), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .1s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.green { background: #ffffff; color: #0a0a0a; box-shadow: 0 8px 26px rgba(255, 255, 255, .18); }
.btn.ghost { background: var(--card2); color: var(--text); box-shadow: none; }
.btn.light { background: #0e0e0e; color: var(--beige2); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.label { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }

.bet { display: flex; align-items: center; gap: 6px; background: var(--bg2); border-radius: 14px; padding: 5px; border: 1px solid var(--line); }
.bet input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 18px; font-weight: 800; padding: 6px 8px; }
.bet button { padding: 8px 12px; border-radius: 10px; background: var(--card2); font-weight: 800; font-size: 14px; }
.chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.chip { padding: 8px 12px; border-radius: 11px; background: var(--card2); font-weight: 700; font-size: 13px; border: 1px solid transparent; }
.chip.active { border-color: var(--beige); background: rgba(216, 196, 174, .12); color: var(--beige2); }
.chips.stretch .chip { flex: 1; text-align: center; }
input.field { width: 100%; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; font-weight: 700; outline: none; }
input.field:focus, .bet:focus-within { border-color: rgba(216, 196, 174, .45); }

.game-head { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.game-head h2 { margin: 0; }
.back { width: 38px; height: 38px; border-radius: 12px; background: var(--card); font-size: 18px; display: grid; place-items: center; }
.stat { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 10px; }
.stat b { color: var(--text); }

/* ── Ракетка ── */
.rocket-stage {
  position: relative; margin-top: 12px; height: 270px; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(ellipse at 50% 125%, #3a3029, #0b0b0b 70%); border: 1px solid var(--line);
}
.rocket-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rocket-mult {
  position: absolute; left: 0; right: 0; top: 34px; display: flex; justify-content: center; pointer-events: none;
  font-family: var(--head); font-weight: 800; font-size: 54px; letter-spacing: -1px; text-shadow: 0 4px 30px rgba(239, 227, 212, .35);
}
.rocket-mult small { display: block; font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 700; text-align: center; color: var(--muted); text-shadow: none; letter-spacing: 0; }
.rocket-mult.crashed { color: var(--lose); text-shadow: 0 4px 30px rgba(224, 112, 95, .5); }
.rocket-mult.won { color: var(--win); text-shadow: 0 4px 30px rgba(233, 211, 176, .5); }
.rocket-ship { position: absolute; font-size: 40px; transform: translate(-50%, -50%) rotate(45deg); pointer-events: none; transition: opacity .3s; }
.history-chips { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px; scrollbar-width: none; }
.history-chips span { flex: none; padding: 5px 10px; border-radius: 9px; font-size: 12px; font-weight: 800; background: var(--card); }
.history-chips .lo { color: var(--muted); }
.history-chips .hi { color: var(--win); }

/* ── Коинфлип ── */
.coin-stage { height: 230px; display: grid; place-items: center; perspective: 900px; margin-top: 8px; }
.coin { width: 170px; height: 170px; position: relative; transform-style: preserve-3d; transition: transform 2.2s cubic-bezier(.2, .8, .25, 1); }
.coin .face {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; backface-visibility: hidden;
  font-family: var(--head); font-size: 76px; font-weight: 800;
}
.coin .heads { background: radial-gradient(circle at 35% 30%, #fbf4ea, #d8c4ae 55%, #8f7b6e); color: #2a221c; box-shadow: inset 0 0 0 8px rgba(255,255,255,.35), inset 0 -10px 20px rgba(0,0,0,.2), 0 20px 50px rgba(216, 196, 174, .25); }
.coin .tails { background: radial-gradient(circle at 35% 30%, #4a4a4a, #1c1c1c 60%, #050505); color: #f4f1ec; transform: rotateY(180deg); box-shadow: inset 0 0 0 8px rgba(255,255,255,.12), inset 0 -10px 20px rgba(0,0,0,.4), 0 20px 50px rgba(0, 0, 0, .6); }
.side-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.side-pick button { padding: 14px; border-radius: 14px; background: var(--card2); font-weight: 800; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; gap: 8px; }
.side-pick button i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-family: var(--head); font-weight: 800; }
.side-pick .h i { background: var(--beige); color: #2a221c; }
.side-pick .t i { background: #1c1c1c; border: 1px solid #444; }
.side-pick button.active { border-color: var(--beige); background: rgba(216, 196, 174, .1); }
.result-line { text-align: center; font-weight: 800; font-size: 18px; min-height: 26px; margin-top: 4px; }
.result-line.win { color: var(--win); }
.result-line.lose { color: var(--lose); }

/* ── Мины ── */
.mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.tile {
  aspect-ratio: 1; border-radius: 14px; font-size: 28px; display: grid; place-items: center;
  background: linear-gradient(160deg, #222120, #171717); border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.35); transition: transform .12s, background .2s;
}
.tile:not(:disabled):active { transform: scale(.92); }
.tile:disabled { cursor: default; }
.tile.gem { background: linear-gradient(160deg, #f3e9dd, #bba38c); animation: pop .25s; box-shadow: 0 0 18px rgba(216, 196, 174, .35); }
.tile.mine { background: linear-gradient(160deg, #a8483c, #3d1712); animation: shake .35s; }
.tile.dim { opacity: .4; }
.mines-grid.idle .tile { opacity: .6; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ── Особняк ── */
.tower { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 12px; border-radius: var(--radius);
  background: linear-gradient(180deg, #151312, #0c0b0a); border: 1px solid var(--line); }
.floor { display: flex; align-items: center; gap: 6px; }
.floor .doors { flex: 1; display: grid; gap: 6px; }
.floor .fm { width: 58px; text-align: right; font-size: 12px; font-weight: 800; color: var(--muted); }
.door {
  height: 42px; border-radius: 10px 10px 4px 4px; font-size: 20px; display: grid; place-items: center;
  background: linear-gradient(180deg, #4a3e36, #2a231f); border: 1px solid rgba(255,255,255,.07); opacity: .45;
}
.floor.current .door { opacity: 1; box-shadow: 0 0 0 2px rgba(216, 196, 174, .45); animation: glow 1.4s ease-in-out infinite; }
.floor.current .fm { color: var(--beige2); }
.floor.passed .fm { color: var(--win); }
.door.safe { background: linear-gradient(180deg, #efe3d4, #b9a18a); opacity: 1; }
.door.monster { background: linear-gradient(180deg, #a8483c, #4a1c16); opacity: 1; }
.door.reveal { opacity: .5; }
@keyframes glow { 50% { box-shadow: 0 0 0 2px rgba(239, 227, 212, .9), 0 0 14px rgba(216, 196, 174, .35); } }

/* ── Кейсы ── */
.case-card {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: 16px 12px 12px;
  background: var(--card); border: 1px solid var(--line); text-align: center;
}
.case-card .cc-icon { font-size: 60px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.5)); }
.case-card .cc-name { font-weight: 800; margin-top: 6px; }
.case-card .cc-price { margin-top: 8px; padding: 8px; border-radius: 12px; font-weight: 800; background: var(--card2); }
.case-card .cc-glow { position: absolute; inset: -40% -40% auto; height: 120%; opacity: .3; pointer-events: none; }
.case-hero { text-align: center; padding: 10px 0 0; }
.case-hero .cc-icon { font-size: 92px; filter: drop-shadow(0 14px 26px rgba(0,0,0,.6)); }
.roulette { position: relative; overflow: hidden; height: 112px; margin-top: 14px; border-radius: var(--radius); background: var(--bg2); border: 1px solid var(--line); }
.roulette::before, .roulette::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50px; z-index: 2; pointer-events: none; }
.roulette::before { left: 0; background: linear-gradient(90deg, var(--bg2), transparent); }
.roulette::after { right: 0; background: linear-gradient(-90deg, var(--bg2), transparent); }
.roulette .pointer { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--beige2); z-index: 3; box-shadow: 0 0 12px var(--beige); }
.strip { position: absolute; top: 8px; left: 0; display: flex; gap: 6px; will-change: transform; }
.r-item { width: 90px; height: 94px; flex: none; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--card); border-bottom: 3px solid var(--c, #555); }
.r-item .e { font-size: 38px; }
.r-item .v { font-size: 12px; font-weight: 800; margin-top: 4px; }
.items-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.items-grid .r-item { width: auto; }
.items-grid .ch { font-size: 10px; color: var(--muted); font-weight: 700; }

/* ── Профиль ── */
.profile-card { display: flex; align-items: center; gap: 14px; }
.avatar { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-family: var(--head); font-weight: 800; font-size: 22px; color: #14110e; background: linear-gradient(135deg, var(--beige2), var(--bronze)); }
.big-balance { font-family: var(--head); font-weight: 800; font-size: 32px; margin: 4px 0 12px; letter-spacing: -.5px; }
.hist { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid var(--line); font-weight: 600; }
.hist:last-child { border-bottom: 0; }
.hist .hm { font-size: 12px; color: var(--muted); }
.plus-v { color: var(--win); font-weight: 800; }
.minus-v { color: var(--muted); font-weight: 800; }

/* ── Шторка пополнения ── */
.sheet-bg { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.65); animation: fade .2s; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 560px; margin: 0 auto;
  max-height: 92vh; overflow-y: auto;
  padding: 18px 16px calc(18px + var(--safe-b)); border-radius: 26px 26px 0 0;
  background: var(--bg2); border-top: 1px solid var(--line); animation: up .25s ease-out;
}
.sheet h3 { font-family: var(--head); font-weight: 800; margin: 0 0 4px; font-size: 20px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-top: 12px; border-radius: 14px; background: var(--card); }
.seg button { padding: 10px; border-radius: 11px; font-weight: 800; font-size: 14px; color: var(--muted); }
.seg button.active { background: var(--beige); color: #14110e; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.pack { padding: 14px 6px; border-radius: 14px; background: var(--card); border: 2px solid transparent; font-weight: 800; text-align: center; }
.pack small { display: block; color: var(--beige); font-size: 11px; margin-top: 2px; }
.pack.active { border-color: var(--beige); background: rgba(216, 196, 174, .1); }
.methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.method { padding: 12px; border-radius: 14px; background: var(--card); border: 2px solid transparent; font-weight: 800; font-size: 14px; }
.method.active { border-color: var(--beige); background: rgba(216, 196, 174, .1); }
.bonus-note { padding: 10px 12px; border-radius: 12px; background: rgba(216, 196, 174, .1); color: var(--beige2); font-weight: 700; font-size: 13px; margin-top: 10px; }
.pay-wait { text-align: center; padding: 10px 0 4px; }
.pay-wait .spin { width: 42px; height: 42px; margin: 6px auto 12px; border-radius: 50%; border: 3px solid rgba(216,196,174,.2); border-top-color: var(--beige); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }

.toast {
  position: fixed; left: 50%; top: 70px; z-index: 60; transform: translate(-50%, -20px); opacity: 0;
  padding: 12px 18px; border-radius: 14px; background: #1b1918; border: 1px solid rgba(216,196,174,.25);
  font-weight: 700; pointer-events: none; transition: .25s; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { border-color: rgba(224, 112, 95, .5); color: #f3c2b9; }
.toast.ok { border-color: var(--beige); color: var(--beige2); }
.footnote { text-align: center; color: var(--muted); font-size: 12px; margin: 22px 0 6px; }

/* ── NFT-анимации ── */
.nft-anim { background: center / contain no-repeat; }
.nft-anim svg { display: block; }
.nft-img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.banner .art.nft-anim { width: 160px; height: 160px; right: -18px; bottom: -22px; transform: rotate(-6deg); }
.game-card .gc-art .gc-nft { width: 128px; height: 128px; }
.case-card .cc-icon.nft-anim { width: 104px; height: 104px; margin: -6px auto 0; }
.case-hero .hero-nft { width: 170px; height: 170px; margin: 0 auto; filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)); }
.r-item .e { width: 58px; height: 58px; }
.r-item .item-nft { width: 66px; height: 66px; }
.r-item .nm { font-size: 10px; font-weight: 700; color: var(--muted); margin-top: 2px; text-align: center; line-height: 1.1; padding: 0 4px; }
.items-grid .r-item { height: auto; padding: 8px 0 7px; }
.live-item .li-icon .nft-img { width: 32px; height: 32px; }

.win-bg {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px;
  background: rgba(0, 0, 0, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade .2s;
}
.win-bg.out { opacity: 0; transition: opacity .2s; }
.win-card {
  position: relative; width: 100%; max-width: 320px; text-align: center; padding: 22px 18px 18px;
  border-radius: 28px; background: linear-gradient(180deg, #1c1a18, #0f0e0d); border: 1px solid rgba(216, 196, 174, .25);
  overflow: hidden; animation: winPop .45s cubic-bezier(.2, 1.4, .4, 1);
}
.win-rays {
  position: absolute; left: 50%; top: 130px; width: 520px; height: 520px; margin: -260px 0 0 -260px; pointer-events: none; opacity: .35;
  background: repeating-conic-gradient(from 0deg, rgba(216, 196, 174, .5) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 62%); mask: radial-gradient(circle, #000 15%, transparent 62%);
  animation: spin 14s linear infinite;
}
.win-nft { position: relative; width: 220px; height: 220px; margin: 0 auto; border-radius: 30px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); background-color: #1a1a1a; }
.win-name { position: relative; font-family: var(--head); font-weight: 800; font-size: 22px; margin-top: 16px; letter-spacing: -.3px; }
.win-val { position: relative; font-family: var(--head); font-weight: 800; font-size: 30px; color: var(--win); margin-top: 2px; }
.win-card .btn { position: relative; }
@keyframes winPop { from { transform: scale(.6); opacity: 0; } }

/* ── Новые карточки ── */
.game-card.wide { grid-column: span 2; aspect-ratio: 2.25 / 1; }
.game-card.wide .gc-art { justify-items: end; padding-right: 22px; }
.g-arena   { background: linear-gradient(120deg, #0d0d0d 10%, #3a2f28 60%, #8f7b6e 130%); }
.g-upgrade { background: linear-gradient(160deg, #5c4d45, #121010 80%); }
.g-plinko  { background: linear-gradient(160deg, #2e2b29, #0a0a0a 75%); }
.g-wheel   { background: linear-gradient(160deg, #6b5a4d, #15110e 80%); }

/* ── Апгрейд / Арена: кольцо ── */
.up-stage { position: relative; width: 270px; height: 270px; margin: 14px auto 0; }
.up-ring { width: 100%; height: 100%; display: block; }
.up-track { fill: none; stroke: #1d1b1a; stroke-width: 18; }
.up-arc { fill: none; stroke: var(--beige); stroke-width: 18; stroke-linecap: butt; transition: stroke-dasharray .25s; filter: drop-shadow(0 0 8px rgba(216,196,174,.45)); }
.up-arc.bad { stroke: #5c4d45; filter: none; }
.up-ptr { transform-origin: 130px 130px; transition: transform 4.2s cubic-bezier(.12, .8, .2, 1); }
.up-ptr path { fill: #ffffff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.up-center { position: absolute; inset: 40px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, #1b1917, #0b0b0b 70%); }
.up-nft { width: 104px; height: 104px; }
.up-chance { font-family: var(--head); font-weight: 800; font-size: 26px; letter-spacing: -.5px; }
.up-stage.lose .up-arc { stroke: var(--lose); }
.up-gifts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.up-gift { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 14px; background: var(--card); border: 2px solid transparent; font-weight: 800; font-size: 12px; }
.up-gift .nft-img { width: 56px; height: 56px; }
.up-gift.active { border-color: var(--beige); background: rgba(216, 196, 174, .1); }
.up-gift.off { opacity: .35; }
.ar-seg { fill: none; stroke-width: 18; transition: stroke-dasharray .4s, stroke-dashoffset .4s; }
.ar-pot { font-family: var(--head); font-weight: 800; font-size: 26px; }
.ar-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.ar-last { font-size: 13px; color: var(--muted); }
.ar-last b { color: var(--text); }

/* ── Плинко ── */
.plinko-stage { position: relative; height: 330px; margin-top: 12px; border-radius: var(--radius); background: radial-gradient(ellipse at 50% 0%, #2a2421, #0b0b0b 70%); border: 1px solid var(--line); overflow: hidden; }
.plinko-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.plinko-slots { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; margin-top: 6px; }
.pslot { height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 9px; font-weight: 800; background: var(--c); }
.pslot.hit { animation: slotHit .35s; }
@keyframes slotHit { 40% { transform: translateY(5px); filter: brightness(1.4); } }

/* ── Колесо ── */
.wheel-stage { position: relative; width: 300px; height: 300px; margin: 14px auto 0; }
.wheel { width: 100%; height: 100%; transition: transform 5s cubic-bezier(.12, .75, .15, 1); }
.wheel-ptr { position: absolute; left: 50%; top: -6px; z-index: 2; width: 0; height: 0; margin-left: -12px;
  border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 24px solid #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
.wl { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 13px; fill: #f4f1ec; }
.wl.dark { fill: #14110e; }
.wl-center { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 20px; fill: #d8c4ae; }

/* ══════════ Глянец ══════════ */
@keyframes sheen { 0%, 62% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(230%) skewX(-18deg); } }

/* блик-полоса, пробегающая по карточке */
.shine {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16) 45%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .16) 55%, transparent);
  animation: sheen 6.5s ease-in-out infinite;
}
.grid > :nth-child(2n) .shine { animation-delay: 1.1s; }
.grid > :nth-child(3n) .shine { animation-delay: 2.3s; }
.grid > :nth-child(5n) .shine { animation-delay: 3.4s; }

/* стеклянная верхняя кромка и блик на карточках игр */
.game-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .45); }
.game-card::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 40%, rgba(255, 255, 255, 0) 41%),
    radial-gradient(circle at 50% 42%, rgba(239, 227, 212, .22), transparent 52%);
}
.game-card .gc-tag { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }

/* кнопки: глянцевая верхняя половина + блик */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 52%; z-index: -1; pointer-events: none;
  border-radius: inherit; border-bottom-left-radius: 50% 14px; border-bottom-right-radius: 50% 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12));
}
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: sheen 4.5s ease-in-out infinite;
}
.btn.ghost::before, .btn.light::before { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); }
.btn.ghost::after, .btn.light::after { opacity: .35; }
.btn:disabled::after { display: none; }

/* баннер: стекло + блик */
.banner { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 14px 34px rgba(0, 0, 0, .45); }
.banner::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  animation: sheen 5.5s ease-in-out infinite;
}

/* мягкий глянец на панелях и плитках */
.panel, .case-card, .r-item, .pack, .method, .up-gift, .live-item, .balance, .tabbar, .back, .chip, .bet button, .side-pick button, .history-chips span {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 50%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.chip.active, .pack.active, .method.active, .up-gift.active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 16px rgba(216, 196, 174, .18); }
.balance .plus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, var(--beige2), var(--beige)); }
.badge, .seg button.active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); background-image: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%); }

/* плитки мин и двери — выпуклые глянцевые */
.tile { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 48%), linear-gradient(160deg, #262423, #171717); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -4px 0 rgba(0, 0, 0, .35); }
.tile.gem { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 50%), linear-gradient(160deg, #f3e9dd, #bba38c); }
.tile.mine { background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 50%), linear-gradient(160deg, #a8483c, #3d1712); }
.door { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #4a3e36, #2a231f); }
.door.safe { background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #efe3d4, #b9a18a); }
.door.monster { background-image: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #a8483c, #4a1c16); }
.pslot { background-image: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 55%); background-color: var(--c); }

/* монета: зеркальный блик */
.coin .face::after {
  content: ''; position: absolute; inset: 8px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .08) 38%, rgba(255, 255, 255, 0) 40%);
}

/* окно выигрыша и NFT-карточка */
.win-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 30px 60px rgba(0, 0, 0, .6); }
.win-nft::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 42%);
}

/* ══════════ Слайдер, промо, профиль, друзья ══════════ */
.top-right { display: flex; align-items: center; gap: 8px; }
.quick, .dep-btn, .ava { display: none; }
.hero { margin-top: 10px; }
.slider { position: relative; overflow: hidden; border-radius: 24px; }
.slides { display: flex; transition: transform .55s cubic-bezier(.3, .8, .2, 1); touch-action: pan-y; }
.banner.slide { flex: 0 0 100%; margin: 0; border-radius: 0; min-height: 190px; }
.kicker { display: inline-block; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 8px; margin-bottom: 10px; background: rgba(0, 0, 0, .12); }
.s-dark, .s-dark2 { color: var(--text); background: linear-gradient(125deg, #121110 0%, #2b2420 55%, #6b5a4d 120%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.s-dark2 { background: linear-gradient(125deg, #0d0d0d 0%, #33281f 60%, #8f7b6e 130%); }
.s-dark .kicker, .s-dark2 .kicker { background: rgba(216, 196, 174, .15); color: var(--beige2); }
.s-dark p, .s-dark2 p { opacity: .75; }
.banner .art-emoji { font-size: 110px; right: 6px; bottom: 6px; transform: rotate(-8deg); }
.dots { position: absolute; left: 20px; bottom: 12px; display: flex; gap: 6px; z-index: 3; }
.dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(127, 127, 127, .45); cursor: pointer; transition: width .3s, background .3s; }
.dots i.on { width: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.sl-arrow { display: none; }

.promos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.promo {
  position: relative; overflow: hidden; text-align: left; min-height: 86px; padding: 12px 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 50%), linear-gradient(140deg, #1d1a18, #121110);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.promo b { display: block; font-family: var(--head); font-weight: 800; font-size: 14px; position: relative; z-index: 1; max-width: 70%; }
.promo span { display: block; font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 3px; position: relative; z-index: 1; max-width: 62%; }
.promo .p-art { position: absolute; right: -4px; bottom: -6px; width: 64px; height: 64px; }
.promo .p-emoji { font-size: 46px; width: auto; height: auto; right: 8px; bottom: 4px; transform: rotate(-8deg); }
.promo:active { transform: scale(.98); }

.foot { max-width: 1240px; margin: 26px auto 0; padding: 0 16px; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.foot-in button { color: var(--muted); font-weight: 700; }
.foot-logo { height: 22px; }
.age { padding: 3px 7px; border-radius: 7px; border: 1px solid var(--line); font-weight: 800; font-size: 11px; }
.foot-c { margin-left: auto; }

/* профиль */
.prof-grid { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.prof-grid > * { margin-top: 12px; }
.prof-card .avatar { overflow: hidden; }
.avatar img, .ava-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-name { font-family: var(--head); font-weight: 800; font-size: 20px; }
.prof-sub { font-size: 13px; font-weight: 600; }
.copy { color: var(--muted); font-size: 14px; padding: 0 4px; }
.level { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.lv-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.lv-ico { font-size: 22px; }
.lv-left { margin-left: auto; font-size: 12px; color: var(--muted); }
.lv-left b { color: var(--text); }
.lv-bar { height: 6px; border-radius: 4px; background: #222; margin-top: 10px; overflow: hidden; }
.lv-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--bronze), var(--beige2)); }
.st-head { display: flex; align-items: baseline; justify-content: space-between; }
.st-head h2 { margin: 6px 0 0; }
.st-head .muted { font-size: 12px; font-weight: 700; }
.st-best { display: flex; align-items: center; gap: 14px; border-color: rgba(216, 196, 174, .25); }
.st-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: var(--card2); flex: none; }
.st-l { font-size: 12px; font-weight: 700; }
.st-big { font-family: var(--head); font-weight: 800; font-size: 24px; color: var(--win); }
.st-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 0; }
.st-cards .panel { margin-top: 10px; }
.st-cards b { display: block; font-size: 17px; margin-top: 4px; }
.pc-title { display: flex; align-items: center; gap: 10px; font-family: var(--head); font-weight: 800; font-size: 18px; margin-bottom: 12px; }
.pc-ico { font-size: 30px; }
.pc-row { display: flex; gap: 8px; }
.pc-row .btn { width: auto; padding: 12px 18px; font-size: 14px; }
.friends-card { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; }
.friends-card .fr-btn { width: auto; margin-left: auto; padding: 11px 16px; font-size: 14px; }
.links-card { padding: 4px 14px; }
.links-card button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 0; font-weight: 700; border-bottom: 1px solid var(--line); }
.links-card button:last-child { border-bottom: 0; }
.links-card i { margin-left: auto; font-style: normal; color: var(--muted); }

/* друзья */
.fr-grid { display: flex; flex-direction: column; }
.fr-how { position: relative; overflow: hidden; }
.fr-art { position: absolute; right: 12px; top: 10px; font-size: 64px; opacity: .9; }
.fr-step { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 14px; max-width: 78%; }
.fr-step i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; background: var(--beige); color: #14110e; }
.fr-step b { display: block; font-size: 15px; }
.fr-step span { font-size: 12px; color: var(--muted); font-weight: 600; }
.fr-note { font-size: 13px; font-weight: 700; color: var(--beige2); padding: 10px 12px; border-radius: 12px; background: rgba(216, 196, 174, .08); }
.fr-link { display: flex; align-items: center; gap: 8px; }
.fr-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 13px; }
.fr-link .btn { width: auto; padding: 10px 14px; font-size: 13px; }
.fr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fr-stats .panel b { display: block; font-family: var(--head); font-weight: 800; font-size: 22px; }
.fr-stats .panel span { font-size: 12px; font-weight: 700; }
.fr-income { display: flex; align-items: center; gap: 12px; }
.fr-income .btn { width: auto; margin-left: auto; padding: 12px 18px; }
.tag { font-family: Montserrat, sans-serif; font-size: 11px; padding: 3px 7px; border-radius: 7px; background: var(--beige); color: #14110e; vertical-align: 4px; }
.fr-empty { text-align: center; padding: 20px 0; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.fair-card { max-width: 440px; text-align: left; }
.fair-card .win-name, .fair-card > div:first-child { text-align: center; }
.fair-card p { font-size: 13px; line-height: 1.5; position: relative; }
.fair-table { position: relative; margin: 10px 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.fair-table div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--line); background: var(--card); }
.fair-table div:last-child { border-bottom: 0; }
.fair-table b { color: var(--win); white-space: nowrap; }

/* ══════════ ПК ══════════ */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .tabbar { display: none; }
  .topbar { padding: 12px 28px; gap: 18px; }
  .logo img { height: 38px; }
  .quick { display: flex; gap: 6px; flex: 1; }
  .quick button { position: relative; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: transform .15s, border-color .2s; }
  .quick button:hover { transform: translateY(-2px); border-color: rgba(216,196,174,.35); }
  .quick button.active { border-color: var(--beige); background: rgba(216,196,174,.12); }
  .quick .qi { font-size: 22px; width: 28px; height: 28px; display: grid; place-items: center; }
  .quick .qi .nft-img { width: 30px; height: 30px; }
  .quick .badge { top: -7px; }
  .dep-btn { display: inline-flex; width: auto; padding: 11px 20px; font-size: 14px; }
  .ava { display: block; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; border: 2px solid var(--line); }
  .ava-in { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 800; color: #14110e; background: linear-gradient(135deg, var(--beige2), var(--bronze)); }
  main { max-width: 1240px; padding: 8px 28px 0; }
  main.narrow { max-width: 640px; }
  .foot { padding: 0 28px; }

  .hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-top: 16px; }
  .banner.slide { min-height: 330px; padding: 40px 40px; }
  .banner.slide h1 { font-size: 60px; letter-spacing: -1.5px; }
  .banner.slide p { font-size: 16px; max-width: 46%; margin: 12px 0 26px; }
  .banner.slide .art.nft-anim { width: 290px; height: 290px; right: 10px; bottom: -10px; }
  .banner.slide .art2 { right: 300px; top: 30px; font-size: 54px; }
  .banner.slide .art-emoji { font-size: 200px; right: 40px; bottom: 30px; }
  .dots { left: 40px; bottom: 22px; }
  .sl-arrow { display: grid; place-items: center; position: absolute; bottom: 14px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; background: rgba(0, 0, 0, .35); color: #fff; backdrop-filter: blur(6px); }
  .sl-arrow.l { right: 58px; } .sl-arrow.r { right: 16px; }
  .promos { margin-top: 0; gap: 14px; }
  .promo { min-height: 0; padding: 18px; border-radius: 22px; }
  .promo b { font-size: 19px; }
  .promo span { font-size: 12px; }
  .promo .p-art { width: 110px; height: 110px; right: -6px; bottom: -10px; }
  .promo .p-emoji { font-size: 76px; right: 12px; bottom: 8px; }
  .promo:hover { border-color: rgba(216,196,174,.35); }

  .grid { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 14px; }
  .game-card.wide, .game-card.wide-d { grid-column: span 2; aspect-ratio: auto; }
  .game-card.wide-d .gc-art { justify-items: end; padding-right: 26px; }
  .game-card:hover { transform: translateY(-4px); }
  .game-card { transition: transform .2s; }
  h2 { font-size: 26px; margin-top: 28px; }

  .prof-grid { display: grid; grid-template-columns: 380px 1fr; gap: 16px; align-items: start;
    grid-template-areas: "card stats" "promo friends" "links hist"; }
  .prof-grid > * { margin-top: 0; }
  .prof-card { grid-area: card; } .prof-stats { grid-area: stats; } .promo-card { grid-area: promo; }
  .friends-card { grid-area: friends; align-self: stretch; } .hist-card { grid-area: hist; } .links-card { grid-area: links; }
  .st-cards { margin-top: 0; }
  .fr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .fr-right h2 { margin-top: 18px; }
}

/* правки ПК */
.pc-row .field { flex: 1; min-width: 0; }
.pc-row .btn { white-space: nowrap; padding: 12px 14px; font-size: 13px; }
@media (min-width: 900px) {
  .promo b { max-width: 60%; }
  .promo span { max-width: 52%; }
  .promo .p-art { width: 96px; height: 96px; right: 0; bottom: -4px; }
  .promo .p-emoji { font-size: 62px; right: 14px; bottom: 12px; }
  .game-card.wide-d .gc-nft { width: 170px; height: 170px; }
  .game-card.wide .gc-art span { font-size: 96px; }
}

/* ═════════════ ТЕМА «НЕОН» ═════════════ */
body[data-theme="neon"] {
  --bg: #0b0a1f;
  --bg2: #131137;
  --card: #1a1842;
  --card2: #24215a;
  --line: rgba(255, 255, 255, .09);
  --text: #ffffff;
  --muted: #a7a4dc;
  --beige: #a78bfa;
  --beige2: #e9d5ff;
  --bronze: #7c3aed;
  --win: #4ade80;
  --lose: #fb7185;
  --gold: #facc15;
  --grad: linear-gradient(135deg, #8b5cf6 0%, #d946ef 55%, #ec4899 100%);
  --grad-green: linear-gradient(135deg, #22c55e, #10b981);
  --head: Unbounded, Montserrat, system-ui, sans-serif;
}
body[data-theme="neon"] {
  background:
    radial-gradient(700px 420px at 0% -5%, rgba(124, 58, 237, .45), transparent 70%),
    radial-gradient(600px 380px at 105% 0%, rgba(236, 72, 153, .32), transparent 70%),
    radial-gradient(700px 500px at 50% 110%, rgba(34, 211, 238, .14), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
body[data-theme="neon"] .topbar { background: rgba(11, 10, 31, .82); }
body[data-theme="neon"] .logo-pill { background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; }
body[data-theme="neon"] h2 { font-weight: 700; }
body[data-theme="neon"] .btn { color: #fff; background: var(--grad); box-shadow: 0 10px 28px rgba(168, 85, 247, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
body[data-theme="neon"] .btn.green { background: var(--grad-green); color: #fff; box-shadow: 0 10px 28px rgba(34, 197, 94, .4), inset 0 1px 0 rgba(255,255,255,.35); }
body[data-theme="neon"] .btn.ghost { background: var(--card2); color: #fff; }
body[data-theme="neon"] .btn.light { background: #fff; color: #6d28d9; box-shadow: 0 10px 26px rgba(0, 0, 0, .25); }
body[data-theme="neon"] .dep-btn { box-shadow: 0 6px 20px rgba(168, 85, 247, .5); }
body[data-theme="neon"] .balance .plus { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%), var(--grad); color: #fff; }
body[data-theme="neon"] .badge { background: linear-gradient(135deg, #facc15, #f97316); color: #3b1d00; }
body[data-theme="neon"] .game-card .gc-tag { background: rgba(0, 0, 0, .35); color: #fff; }
body[data-theme="neon"] .game-card .gc-tag.r { background: linear-gradient(135deg, #facc15, #f97316); color: #3b1d00; }
body[data-theme="neon"] .chip.active, body[data-theme="neon"] .pack.active, body[data-theme="neon"] .method.active, body[data-theme="neon"] .up-gift.active { border-color: #c084fc; background-color: rgba(168, 85, 247, .22); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(168, 85, 247, .35); }
body[data-theme="neon"] .seg button.active { background: var(--grad); color: #fff; }
body[data-theme="neon"] .tag { background: var(--grad); color: #fff; }
body[data-theme="neon"] .kicker { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }
body[data-theme="neon"] .tabbar { background: rgba(26, 24, 66, .9); }
body[data-theme="neon"] .tabbar button.active { background: linear-gradient(135deg, rgba(139, 92, 246, .35), rgba(236, 72, 153, .3)); color: #fff; }
body[data-theme="neon"] .tabbar .ti { filter: grayscale(.4) opacity(.75); }
body[data-theme="neon"] .live-tag::after { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
body[data-theme="neon"] .live-item .li-sum, body[data-theme="neon"] .plus-v { color: var(--win); }
body[data-theme="neon"] input.field:focus, body[data-theme="neon"] .bet:focus-within { border-color: rgba(192, 132, 252, .6); }
body[data-theme="neon"] .toast.ok { border-color: #4ade80; color: #bbf7d0; background: #10291e; }
body[data-theme="neon"] .toast.err { background: #3a1024; }
body[data-theme="neon"] .avatar, body[data-theme="neon"] .ava-in { background: var(--grad); color: #fff; }
body[data-theme="neon"] .lv-bar i { background: linear-gradient(90deg, #8b5cf6, #ec4899, #facc15); }
body[data-theme="neon"] .fr-step i { background: var(--grad); color: #fff; }
body[data-theme="neon"] .fr-note, body[data-theme="neon"] .bonus-note { background: rgba(250, 204, 21, .12); color: #fde68a; }
body[data-theme="neon"] .st-big { color: var(--gold); }
body[data-theme="neon"] .st-best { border-color: rgba(250, 204, 21, .35); }
body[data-theme="neon"] .st-ico { background: linear-gradient(135deg, rgba(250,204,21,.25), rgba(249,115,22,.2)); }
body[data-theme="neon"] .dots i.on { background: #fff; }
body[data-theme="neon"] .banner { color: #fff; }
body[data-theme="neon"] .banner.slide.s-gift { background: linear-gradient(125deg, #6d28d9 0%, #a21caf 55%, #ec4899 100%); }
body[data-theme="neon"] .banner.slide.s-dark { background: linear-gradient(125deg, #0e7490 0%, #2563eb 55%, #7c3aed 110%); }
body[data-theme="neon"] .banner.slide.s-dark2 { background: linear-gradient(125deg, #be123c 0%, #db2777 45%, #7c3aed 110%); }
body[data-theme="neon"] .banner p { opacity: .9 !important; }
body[data-theme="neon"] .banner.slide::after { background: radial-gradient(circle at 80% 60%, rgba(255,255,255,.35), transparent 45%), repeating-conic-gradient(from 0deg at 78% 60%, rgba(255,255,255,.07) 0 8deg, transparent 8deg 18deg); }
body[data-theme="neon"] .banner .btn { background: #fff; color: #6d28d9; box-shadow: 0 10px 26px rgba(0,0,0,.25); }
body[data-theme="neon"] .promo { border-color: rgba(255,255,255,.12); }
body[data-theme="neon"] .promo span { color: rgba(255,255,255,.8); }
body[data-theme="neon"] .promos > :nth-child(1) { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 50%), linear-gradient(140deg, #16a34a, #0d9488); }
body[data-theme="neon"] .promos > :nth-child(2) { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 50%), linear-gradient(140deg, #2563eb, #7c3aed); }
body[data-theme="neon"] .promos > :nth-child(3) { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 50%), linear-gradient(140deg, #f59e0b, #ea580c); }
body[data-theme="neon"] .promos > :nth-child(4) { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 50%), linear-gradient(140deg, #0891b2, #4f46e5); }
body[data-theme="neon"] .game-card { border-color: rgba(255,255,255,.14); }
body[data-theme="neon"] .game-card .gc-art::before {
  content: ''; position: absolute; inset: -30%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.09) 0 7deg, transparent 7deg 17deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%); mask: radial-gradient(circle, #000 10%, transparent 60%);
  animation: spin 40s linear infinite;
}
body[data-theme="neon"] .game-card::after { background: linear-gradient(to top, rgba(10, 6, 40, .65), transparent 45%); }
body[data-theme="neon"] .game-card .gc-title { text-shadow: 0 2px 10px rgba(0,0,0,.5); }
body[data-theme="neon"] .g-arena { background: linear-gradient(130deg, #f43f5e 0%, #c026d3 50%, #6d28d9 100%); }
body[data-theme="neon"] .g-rocket { background: linear-gradient(160deg, #3b82f6 0%, #6d28d9 70%, #2e1065 100%); }
body[data-theme="neon"] .g-cases { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #db2777 100%); }
body[data-theme="neon"] .g-upgrade { background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 55%, #4338ca 100%); }
body[data-theme="neon"] .g-plinko { background: linear-gradient(160deg, #c026d3 0%, #7c3aed 55%, #3730a3 100%); }
body[data-theme="neon"] .g-wheel { background: linear-gradient(160deg, #fb923c 0%, #f43f5e 60%, #be185d 100%); }
body[data-theme="neon"] .g-mines { background: linear-gradient(160deg, #2563eb 0%, #4f46e5 55%, #1e1b4b 100%); }
body[data-theme="neon"] .g-tower { background: linear-gradient(160deg, #f97316 0%, #9333ea 75%, #3b0764 100%); }
body[data-theme="neon"] .g-coin { background: linear-gradient(160deg, #facc15 0%, #f59e0b 45%, #b45309 100%); }
body[data-theme="neon"] .panel, body[data-theme="neon"] .case-card, body[data-theme="neon"] .r-item, body[data-theme="neon"] .pack, body[data-theme="neon"] .method, body[data-theme="neon"] .up-gift, body[data-theme="neon"] .live-item, body[data-theme="neon"] .balance, body[data-theme="neon"] .back, body[data-theme="neon"] .chip, body[data-theme="neon"] .bet button, body[data-theme="neon"] .side-pick button, body[data-theme="neon"] .history-chips span { background-color: var(--card); }
body[data-theme="neon"] .case-card .cc-glow { opacity: .55; }
body[data-theme="neon"] .case-card .cc-price { background: var(--card2); }
body[data-theme="neon"] .rocket-stage { background: radial-gradient(ellipse at 50% 125%, #7c3aed, #1e1b4b 55%, #0b0a1f 85%); }
body[data-theme="neon"] .rocket-mult { text-shadow: 0 4px 30px rgba(217, 70, 239, .8); }
body[data-theme="neon"] .coin .heads { background: radial-gradient(circle at 35% 30%, #fef08a, #facc15 50%, #b45309); color: #78350f; box-shadow: inset 0 0 0 8px rgba(255,255,255,.3), inset 0 -10px 20px rgba(0,0,0,.2), 0 20px 50px rgba(250, 204, 21, .4); }
body[data-theme="neon"] .coin .tails { background: radial-gradient(circle at 35% 30%, #c4b5fd, #8b5cf6 50%, #4c1d95); color: #fff; box-shadow: inset 0 0 0 8px rgba(255,255,255,.2), inset 0 -10px 20px rgba(0,0,0,.3), 0 20px 50px rgba(139, 92, 246, .5); }
body[data-theme="neon"] .side-pick .h i { background: #facc15; color: #78350f; }
body[data-theme="neon"] .side-pick .t i { background: #8b5cf6; border: 0; }
body[data-theme="neon"] .side-pick button.active { border-color: #c084fc; background-color: rgba(168, 85, 247, .2); }
body[data-theme="neon"] .tile { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 48%), linear-gradient(160deg, #312e81, #1e1b4b); }
body[data-theme="neon"] .tile.gem { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 50%), linear-gradient(160deg, #22d3ee, #6366f1); box-shadow: 0 0 22px rgba(34, 211, 238, .55); }
body[data-theme="neon"] .tile.mine { background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 50%), linear-gradient(160deg, #f43f5e, #9f1239); }
body[data-theme="neon"] .tower { background: linear-gradient(180deg, #2e1065, #1e1b4b); }
body[data-theme="neon"] .door { background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 50%), linear-gradient(180deg, #7c3aed, #4c1d95); }
body[data-theme="neon"] .floor.current .door { box-shadow: 0 0 0 2px rgba(250, 204, 21, .6);  animation-name: glowNeon;}
body[data-theme="neon"] .floor.current .fm { color: var(--gold); }
body[data-theme="neon"] .door.safe { background-image: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 50%), linear-gradient(180deg, #4ade80, #059669); }
body[data-theme="neon"] .door.monster { background-image: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 50%), linear-gradient(180deg, #fb923c, #c2410c); }
@keyframes glowNeon { 50% { box-shadow: 0 0 0 2px #facc15, 0 0 16px rgba(250, 204, 21, .5); } }
body[data-theme="neon"] .roulette .pointer { background: #facc15; box-shadow: 0 0 14px #facc15; }
body[data-theme="neon"] .up-track { stroke: #2a2766; }
body[data-theme="neon"] .up-arc { stroke: url(#upGrad); stroke: #d946ef; filter: drop-shadow(0 0 10px rgba(217, 70, 239, .6)); }
body[data-theme="neon"] .up-arc.bad { stroke: #4c4890; }
body[data-theme="neon"] .up-center { background: radial-gradient(circle, #2a2470, #13113a 70%); }
body[data-theme="neon"] .wheel-ptr { border-top-color: #facc15; }
body[data-theme="neon"] .wl-center { fill: #facc15; }
body[data-theme="neon"] .win-card { background: linear-gradient(180deg, #2a2470, #13113a); border-color: rgba(192, 132, 252, .4); }
body[data-theme="neon"] .win-rays { background: repeating-conic-gradient(from 0deg, rgba(250, 204, 21, .55) 0 8deg, transparent 8deg 22deg); opacity: .45; }
body[data-theme="neon"] .win-val { color: var(--gold); }
body[data-theme="neon"] .plinko-stage { background: radial-gradient(ellipse at 50% 0%, #6d28d9, #1e1b4b 60%, #0b0a1f 95%); }
body[data-theme="neon"] .arena-stage .up-center, body[data-theme="neon"] .up-center { box-shadow: inset 0 0 30px rgba(139, 92, 246, .35); }

/* ═════════════ ТЕМЫ «MIDNIGHT» и «АВРОРА» ═════════════ */

body[data-theme="midnight"] {
  --bg: #08080f; --bg2: #0e0d1a; --card: #15142a; --card2: #201e3d; --line: rgba(255,255,255,.08); --muted: #9b98c6;
  --acc1: #6d28d9; --acc2: #a855f7; --acc-glow: rgba(168,85,247,.45); --acc-soft: rgba(168,85,247,.2); --title2: #d8b4fe;
  --blob1: rgba(109,40,217,.28); --blob2: rgba(219,39,119,.16);
  --glow-gift: rgba(217,70,239,.55); --glow-up: rgba(59,130,246,.55); --glow-arena: rgba(244,63,94,.5);
  --g-arena: rgba(244,63,94,.6); --g-rocket: rgba(99,102,241,.65); --g-cases: rgba(245,158,11,.55); --g-upgrade: rgba(34,211,238,.5);
  --g-plinko: rgba(217,70,239,.55); --g-wheel: rgba(249,115,22,.55); --g-mines: rgba(59,130,246,.6); --g-tower: rgba(234,88,12,.55);
  --g-coin: rgba(250,204,21,.5); --g-storm: rgba(56,189,248,.6);
  --gem1: #67e8f9; --gem2: #6366f1; --gem-glow: rgba(56,189,248,.5);
}
body[data-theme="aurora"] {
  --bg: #05100f; --bg2: #08171a; --card: #0f2226; --card2: #173238; --line: rgba(255,255,255,.08); --muted: #8fb8b3;
  --acc1: #0d9488; --acc2: #22d3ee; --acc-glow: rgba(34,211,238,.4); --acc-soft: rgba(45,212,191,.18); --title2: #99f6e4;
  --blob1: rgba(13,148,136,.3); --blob2: rgba(124,58,237,.2);
  --glow-gift: rgba(45,212,191,.5); --glow-up: rgba(99,102,241,.5); --glow-arena: rgba(168,85,247,.5);
  --g-arena: rgba(168,85,247,.55); --g-rocket: rgba(56,189,248,.55); --g-cases: rgba(52,211,153,.55); --g-upgrade: rgba(129,140,248,.55);
  --g-plinko: rgba(45,212,191,.55); --g-wheel: rgba(250,204,21,.45); --g-mines: rgba(34,211,238,.55); --g-tower: rgba(132,204,22,.45);
  --g-coin: rgba(250,204,21,.45); --g-storm: rgba(167,139,250,.6);
  --gem1: #5eead4; --gem2: #0ea5e9; --gem-glow: rgba(45,212,191,.5);
}
body[data-theme="midnight"], body[data-theme="aurora"] {
  --head: Unbounded, Montserrat, system-ui, sans-serif;
  --text: #ffffff; --win: #4ade80; --lose: #fb7185; --gold: #fbbf24;
  --beige: var(--acc2); --beige2: #ffffff; --bronze: var(--acc1);
}
body[data-theme="midnight"], body[data-theme="aurora"] { background: radial-gradient(800px 460px at 12% -10%, var(--blob1), transparent 70%), radial-gradient(700px 420px at 100% -5%, var(--blob2), transparent 70%), var(--bg); background-attachment: fixed; }
body[data-theme="midnight"] .topbar, body[data-theme="aurora"] .topbar { background: color-mix(in srgb, var(--bg) 82%, transparent); }
body[data-theme="midnight"] .logo-pill, body[data-theme="aurora"] .logo-pill { background: linear-gradient(135deg, var(--acc1), var(--acc2)); color: #fff; }
body[data-theme="midnight"] h2, body[data-theme="aurora"] h2 { font-weight: 700; }
body[data-theme="midnight"] .btn, body[data-theme="aurora"] .btn { color: #fff; background: linear-gradient(135deg, var(--acc1), var(--acc2)); box-shadow: 0 10px 26px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.3); }
body[data-theme="midnight"] .btn.green, body[data-theme="aurora"] .btn.green { background: linear-gradient(135deg, #22c55e, #10b981); box-shadow: 0 10px 26px rgba(34,197,94,.35), inset 0 1px 0 rgba(255,255,255,.3); }
body[data-theme="midnight"] .btn.ghost, body[data-theme="aurora"] .btn.ghost { background: var(--card2); color: #fff; box-shadow: none; }
body[data-theme="midnight"] .btn.light, body[data-theme="midnight"] .banner .btn, body[data-theme="aurora"] .btn.light, body[data-theme="aurora"] .banner .btn { background: #fff; color: #111; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
body[data-theme="midnight"] .balance .plus, body[data-theme="aurora"] .balance .plus { background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%), linear-gradient(135deg, var(--acc1), var(--acc2)); color: #fff; }
body[data-theme="midnight"] .badge, body[data-theme="midnight"] .game-card .gc-tag.r, body[data-theme="aurora"] .badge, body[data-theme="aurora"] .game-card .gc-tag.r { background: linear-gradient(135deg, #fde047, #f59e0b); color: #3b1d00; }
body[data-theme="midnight"] .game-card .gc-tag, body[data-theme="aurora"] .game-card .gc-tag { background: rgba(0,0,0,.45); color: #fff; }
body[data-theme="midnight"] .chip.active, body[data-theme="midnight"] .pack.active, body[data-theme="midnight"] .method.active, body[data-theme="midnight"] .up-gift.active, body[data-theme="aurora"] .chip.active, body[data-theme="aurora"] .pack.active, body[data-theme="aurora"] .method.active, body[data-theme="aurora"] .up-gift.active { border-color: var(--acc2); background-color: var(--acc-soft); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 16px var(--acc-glow); }
body[data-theme="midnight"] .seg button.active, body[data-theme="midnight"] .tag, body[data-theme="midnight"] .fr-step i, body[data-theme="midnight"] .avatar, body[data-theme="midnight"] .ava-in, body[data-theme="aurora"] .seg button.active, body[data-theme="aurora"] .tag, body[data-theme="aurora"] .fr-step i, body[data-theme="aurora"] .avatar, body[data-theme="aurora"] .ava-in { background: linear-gradient(135deg, var(--acc1), var(--acc2)); color: #fff; }
body[data-theme="midnight"] .kicker, body[data-theme="aurora"] .kicker { background: rgba(255,255,255,.1) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.14); }
body[data-theme="midnight"] .tabbar, body[data-theme="aurora"] .tabbar { background: color-mix(in srgb, var(--card) 92%, transparent); }
body[data-theme="midnight"] .tabbar button.active, body[data-theme="aurora"] .tabbar button.active { background: var(--acc-soft); color: #fff; }
body[data-theme="midnight"] .live-tag::after, body[data-theme="aurora"] .live-tag::after { background: var(--win); box-shadow: 0 0 8px var(--win); }
body[data-theme="midnight"] .live-item .li-sum, body[data-theme="midnight"] .plus-v, body[data-theme="aurora"] .live-item .li-sum, body[data-theme="aurora"] .plus-v { color: var(--win); }
body[data-theme="midnight"] input.field:focus, body[data-theme="midnight"] .bet:focus-within, body[data-theme="aurora"] input.field:focus, body[data-theme="aurora"] .bet:focus-within { border-color: var(--acc2); }
body[data-theme="midnight"] .toast.ok, body[data-theme="aurora"] .toast.ok { border-color: var(--win); color: #bbf7d0; }
body[data-theme="midnight"] .lv-bar i, body[data-theme="aurora"] .lv-bar i { background: linear-gradient(90deg, var(--acc1), var(--acc2), var(--gold)); }
body[data-theme="midnight"] .fr-note, body[data-theme="midnight"] .bonus-note, body[data-theme="aurora"] .fr-note, body[data-theme="aurora"] .bonus-note { background: rgba(251,191,36,.1); color: #fde68a; }
body[data-theme="midnight"] .st-big, body[data-theme="midnight"] .win-val, body[data-theme="aurora"] .st-big, body[data-theme="aurora"] .win-val { color: var(--gold); }
body[data-theme="midnight"] .st-best, body[data-theme="aurora"] .st-best { border-color: rgba(251,191,36,.3); }
body[data-theme="midnight"] .dots i.on, body[data-theme="aurora"] .dots i.on { background: #fff; }
body[data-theme="midnight"] .banner.slide, body[data-theme="aurora"] .banner.slide { --c: var(--acc-glow); background: radial-gradient(circle at 76% 58%, var(--c) 0%, transparent 52%), linear-gradient(125deg, var(--card) 0%, var(--bg2) 100%); color: #fff; border: 1px solid rgba(255,255,255,.08); }
body[data-theme="midnight"] .banner.slide.s-gift, body[data-theme="aurora"] .banner.slide.s-gift { --c: var(--glow-gift); }
body[data-theme="midnight"] .banner.slide.s-dark, body[data-theme="aurora"] .banner.slide.s-dark { --c: var(--glow-up); }
body[data-theme="midnight"] .banner.slide.s-dark2, body[data-theme="aurora"] .banner.slide.s-dark2 { --c: var(--glow-arena); }
body[data-theme="midnight"] .banner.slide::after, body[data-theme="aurora"] .banner.slide::after { background: repeating-conic-gradient(from 0deg at 76% 58%, rgba(255,255,255,.035) 0 7deg, transparent 7deg 17deg); }
body[data-theme="midnight"] .banner h1, body[data-theme="aurora"] .banner h1 { background: linear-gradient(100deg, #fff 30%, var(--title2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-theme="midnight"] .banner p, body[data-theme="aurora"] .banner p { opacity: .75 !important; }
body[data-theme="midnight"] .promo, body[data-theme="aurora"] .promo { --c: var(--acc-glow); background: radial-gradient(circle at 85% 80%, var(--c), transparent 55%), linear-gradient(160deg, var(--card), var(--bg2)); border: 1px solid rgba(255,255,255,.08); }
body[data-theme="midnight"] .promos > :nth-child(1), body[data-theme="aurora"] .promos > :nth-child(1) { --c: rgba(34,197,94,.45); }
body[data-theme="midnight"] .promos > :nth-child(2), body[data-theme="aurora"] .promos > :nth-child(2) { --c: rgba(96,165,250,.45); }
body[data-theme="midnight"] .promos > :nth-child(3), body[data-theme="aurora"] .promos > :nth-child(3) { --c: rgba(251,191,36,.45); }
body[data-theme="midnight"] .promos > :nth-child(4), body[data-theme="aurora"] .promos > :nth-child(4) { --c: rgba(244,114,182,.45); }
body[data-theme="midnight"] .promo span, body[data-theme="aurora"] .promo span { color: var(--muted); }
body[data-theme="midnight"] .game-card, body[data-theme="aurora"] .game-card { background: radial-gradient(circle at 50% 42%, var(--c) 0%, transparent 62%), linear-gradient(180deg, var(--card) 0%, var(--bg2) 100%); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 var(--c), 0 12px 26px rgba(0,0,0,.4); }
body[data-theme="midnight"] .game-card:hover, body[data-theme="aurora"] .game-card:hover { border-color: var(--c); }
body[data-theme="midnight"] .game-card::after, body[data-theme="aurora"] .game-card::after { background: linear-gradient(to top, rgba(0,0,0,.55), transparent 45%); }
body[data-theme="midnight"] .game-card .gc-art::before, body[data-theme="aurora"] .game-card .gc-art::before { content: ''; position: absolute; inset: -30%; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.05) 0 7deg, transparent 7deg 17deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 58%); mask: radial-gradient(circle, #000 10%, transparent 58%); animation: spin 50s linear infinite; }
body[data-theme="midnight"] .g-arena, body[data-theme="aurora"] .g-arena { --c: var(--g-arena); }
body[data-theme="midnight"] .g-rocket, body[data-theme="aurora"] .g-rocket { --c: var(--g-rocket); }
body[data-theme="midnight"] .g-cases, body[data-theme="aurora"] .g-cases { --c: var(--g-cases); }
body[data-theme="midnight"] .g-upgrade, body[data-theme="aurora"] .g-upgrade { --c: var(--g-upgrade); }
body[data-theme="midnight"] .g-plinko, body[data-theme="aurora"] .g-plinko { --c: var(--g-plinko); }
body[data-theme="midnight"] .g-wheel, body[data-theme="aurora"] .g-wheel { --c: var(--g-wheel); }
body[data-theme="midnight"] .g-mines, body[data-theme="aurora"] .g-mines { --c: var(--g-mines); }
body[data-theme="midnight"] .g-tower, body[data-theme="aurora"] .g-tower { --c: var(--g-tower); }
body[data-theme="midnight"] .g-coin, body[data-theme="aurora"] .g-coin { --c: var(--g-coin); }
body[data-theme="midnight"] .g-storm, body[data-theme="aurora"] .g-storm { --c: var(--g-storm); }
body[data-theme="midnight"] .panel, body[data-theme="midnight"] .case-card, body[data-theme="midnight"] .r-item, body[data-theme="midnight"] .pack, body[data-theme="midnight"] .method, body[data-theme="midnight"] .up-gift, body[data-theme="midnight"] .live-item, body[data-theme="midnight"] .balance, body[data-theme="midnight"] .back, body[data-theme="midnight"] .chip, body[data-theme="midnight"] .bet button, body[data-theme="midnight"] .side-pick button, body[data-theme="midnight"] .history-chips span, body[data-theme="aurora"] .panel, body[data-theme="aurora"] .case-card, body[data-theme="aurora"] .r-item, body[data-theme="aurora"] .pack, body[data-theme="aurora"] .method, body[data-theme="aurora"] .up-gift, body[data-theme="aurora"] .live-item, body[data-theme="aurora"] .balance, body[data-theme="aurora"] .back, body[data-theme="aurora"] .chip, body[data-theme="aurora"] .bet button, body[data-theme="aurora"] .side-pick button, body[data-theme="aurora"] .history-chips span { background-color: var(--card); }
body[data-theme="midnight"] .case-card .cc-price, body[data-theme="aurora"] .case-card .cc-price { background: var(--card2); }
body[data-theme="midnight"] .case-card .cc-glow, body[data-theme="aurora"] .case-card .cc-glow { opacity: .4; }
body[data-theme="midnight"] .rocket-stage, body[data-theme="aurora"] .rocket-stage { background: radial-gradient(ellipse at 50% 125%, var(--glow-up), var(--bg2) 60%, var(--bg) 90%); }
body[data-theme="midnight"] .rocket-mult, body[data-theme="aurora"] .rocket-mult { text-shadow: 0 4px 30px var(--acc-glow); }
body[data-theme="midnight"] .coin .heads, body[data-theme="aurora"] .coin .heads { background: radial-gradient(circle at 35% 30%, #fef3c7, #fbbf24 50%, #b45309); color: #78350f; }
body[data-theme="midnight"] .coin .tails, body[data-theme="aurora"] .coin .tails { background: radial-gradient(circle at 35% 30%, #e9d5ff, var(--acc2) 50%, var(--acc1)); color: #fff; }
body[data-theme="midnight"] .side-pick .h i, body[data-theme="aurora"] .side-pick .h i { background: #fbbf24; color: #78350f; }
body[data-theme="midnight"] .side-pick .t i, body[data-theme="aurora"] .side-pick .t i { background: var(--acc2); border: 0; }
body[data-theme="midnight"] .side-pick button.active, body[data-theme="aurora"] .side-pick button.active { border-color: var(--acc2); background-color: var(--acc-soft); }
body[data-theme="midnight"] .tile, body[data-theme="aurora"] .tile { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 48%), linear-gradient(160deg, var(--card2), var(--card)); }
body[data-theme="midnight"] .tile.gem, body[data-theme="aurora"] .tile.gem { background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 50%), linear-gradient(160deg, var(--gem1), var(--gem2)); box-shadow: 0 0 20px var(--gem-glow); }
body[data-theme="midnight"] .tile.mine, body[data-theme="aurora"] .tile.mine { background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 50%), linear-gradient(160deg, #f43f5e, #881337); }
body[data-theme="midnight"] .tower, body[data-theme="aurora"] .tower { background: linear-gradient(180deg, var(--card), var(--bg2)); }
body[data-theme="midnight"] .door, body[data-theme="aurora"] .door { background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 50%), linear-gradient(180deg, var(--card2), var(--card)); }
body[data-theme="midnight"] .floor.current .door, body[data-theme="aurora"] .floor.current .door { box-shadow: 0 0 0 2px var(--gold); animation-name: glowGold; }
body[data-theme="midnight"] .floor.current .fm, body[data-theme="aurora"] .floor.current .fm { color: var(--gold); }
body[data-theme="midnight"] .door.safe, body[data-theme="aurora"] .door.safe { background-image: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 50%), linear-gradient(180deg, #4ade80, #059669); }
body[data-theme="midnight"] .door.monster, body[data-theme="aurora"] .door.monster { background-image: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 50%), linear-gradient(180deg, #fb923c, #c2410c); }
body[data-theme="midnight"] .roulette .pointer, body[data-theme="aurora"] .roulette .pointer { background: var(--gold); box-shadow: 0 0 14px var(--gold); }
body[data-theme="midnight"] .up-track, body[data-theme="aurora"] .up-track { stroke: var(--card2); }
body[data-theme="midnight"] .up-arc, body[data-theme="aurora"] .up-arc { stroke: var(--acc2); filter: drop-shadow(0 0 10px var(--acc-glow)); }
body[data-theme="midnight"] .up-arc.bad, body[data-theme="aurora"] .up-arc.bad { stroke: var(--card2); filter: none; }
body[data-theme="midnight"] .up-center, body[data-theme="aurora"] .up-center { background: radial-gradient(circle, var(--card2), var(--bg2) 70%); }
body[data-theme="midnight"] .wheel-ptr, body[data-theme="aurora"] .wheel-ptr { border-top-color: var(--gold); }
body[data-theme="midnight"] .wl-center, body[data-theme="aurora"] .wl-center { fill: var(--gold); }
body[data-theme="midnight"] .plinko-stage, body[data-theme="aurora"] .plinko-stage { background: radial-gradient(ellipse at 50% 0%, var(--glow-up), var(--bg2) 60%, var(--bg) 95%); }
body[data-theme="midnight"] .win-card, body[data-theme="aurora"] .win-card { background: linear-gradient(180deg, var(--card2), var(--bg2)); border-color: var(--acc-soft); }
body[data-theme="midnight"] .win-rays, body[data-theme="aurora"] .win-rays { background: repeating-conic-gradient(from 0deg, rgba(251,191,36,.5) 0 8deg, transparent 8deg 22deg); opacity: .4; }
@keyframes glowGold { 50% { box-shadow: 0 0 0 2px #fbbf24, 0 0 16px rgba(251,191,36,.5); } }
body[data-theme="classic"] { --head: Montserrat, Inter, system-ui, sans-serif; }

/* ═════════════ Шторм ═════════════ */
.storm { margin-top: 12px; }
.st-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.st-winbox { margin-left: auto; padding: 8px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--muted); }
.st-winbox b { color: var(--win); font-size: 15px; }
.st-info { width: 34px; height: 34px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); font-weight: 800; font-family: Georgia, serif; font-style: italic; }
.st-fs { padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; background: linear-gradient(135deg, rgba(56,189,248,.25), rgba(168,85,247,.25)); border: 1px solid rgba(56,189,248,.45); }
.st-fs b { color: #fff; }
.st-board { position: relative; padding: 8px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%), var(--bg2); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 16px 40px rgba(0,0,0,.45); overflow: hidden; }
.storm.fs-on .st-board { border-color: rgba(56,189,248,.6); box-shadow: 0 0 0 1px rgba(56,189,248,.3), 0 0 40px rgba(56,189,248,.35); }
.st-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.sc {
  position: relative; aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 50%), var(--card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  animation: scFall .42s cubic-bezier(.3, 1.35, .5, 1) both;
}
.st-grid.turbo .sc { animation-duration: .2s; }
.sc .nft-img { width: 86%; height: 86%; }
.sc-e { font-size: 30px; line-height: 1; }
.sc.scat { background: radial-gradient(circle, rgba(56,189,248,.35), transparent 70%), var(--card); }
.sc-mult { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.sc-bolt { font-size: 22px; filter: drop-shadow(0 0 6px rgba(250,204,21,.8)); }
.sc-mult b { font-family: var(--head); font-size: 11px; color: #fde047; margin-top: 2px; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.sc.mult { background: radial-gradient(circle, rgba(250,204,21,.3), transparent 70%), var(--card); }
@keyframes scFall { from { transform: translateY(calc(var(--d) * -1 * (100% + 5px))); } to { transform: translateY(0); } }
.sc.win { animation: scWin .55s ease-in-out infinite alternate; z-index: 1; box-shadow: 0 0 0 2px var(--gold, #fbbf24), 0 0 18px rgba(251,191,36,.6); }
@keyframes scWin { to { transform: scale(1.1); } }
.sc.gone { animation: scGone .22s ease-in forwards; }
@keyframes scGone { to { transform: scale(0); opacity: 0; } }
.st-pop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; z-index: 3;
  padding: 10px 18px; border-radius: 16px; font-family: var(--head); font-weight: 800; font-size: 22px; white-space: nowrap;
  background: rgba(0,0,0,.72); color: var(--win); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(6px); transition: .2s; }
.st-pop.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.st-pop.mult { color: #fde047; }
.st-pop.total { color: var(--win); }
.st-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.st-buy { flex-direction: column; gap: 0; font-size: 14px; padding: 10px; }
.st-buy small { font-size: 11px; opacity: .75; }
.st-opts { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.st-intro .st-big { position: relative; text-align: center; padding: 30px 24px; border-radius: 28px; min-width: 280px; overflow: hidden;
  background: linear-gradient(180deg, var(--card2), var(--bg2)); border: 1px solid rgba(255,255,255,.15); animation: winPop .45s cubic-bezier(.2, 1.4, .4, 1); }
.sb-ico { font-size: 64px; }
.sb-t { position: relative; font-family: var(--head); font-weight: 800; font-size: 26px; letter-spacing: .5px; background: linear-gradient(90deg, #fde047, #fb923c, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sb-n { font-family: var(--head); font-weight: 800; font-size: 20px; margin: 6px 0; }
.sb-sum { position: relative; font-family: var(--head); font-weight: 800; font-size: 40px; color: var(--win); margin-top: 10px; }
.sb-x { position: relative; font-weight: 800; color: var(--muted); }
.st-pay div { align-items: center; }
.pt-img { width: 30px; height: 30px; display: inline-block; vertical-align: middle; }
.g-storm { background: linear-gradient(160deg, #0ea5e9, #1e3a8a 70%); }

/* выбор темы */
.theme-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.theme-btn { text-align: left; padding: 8px; border-radius: 16px; background: var(--card2); border: 2px solid transparent; }
.theme-btn.active { border-color: var(--beige); }
.th-prev { position: relative; display: block; height: 62px; border-radius: 11px; margin-bottom: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.th-prev i { position: absolute; left: 10px; bottom: 10px; width: 40px; height: 10px; border-radius: 6px; }
.theme-btn b { display: block; font-size: 14px; }
.theme-btn small { color: var(--muted); font-size: 11px; font-weight: 600; }
.theme-top { display: none; }
@media (min-width: 900px) {
  .theme-top { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 20px; }
  .theme-list { grid-template-columns: repeat(4, 1fr); }
  .sheet .theme-list { grid-template-columns: repeat(2, 1fr); }
  .theme-card { grid-column: 1 / -1; }
  .sc-e { font-size: 40px; } .sc-bolt { font-size: 30px; } .sc-mult b { font-size: 13px; }
}
/* длинные окна прокручиваются */
.win-bg { overflow-y: auto; }
.win-card { max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; }