/* =====================================================================
   Aura Gift — минималистичная тема
   Один акцент (оранжевый), плоские поверхности, много воздуха.
   ===================================================================== */
/* 🎨 токены (цвета, шрифты, размеры, отступы, радиусы, тени, слои, движение) — frontend/tokens.css */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); color: var(--text); min-height: 100%; overscroll-behavior: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; font-size: 15px; }
body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 20px); }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.center { text-align: center; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.45; }
.small { font-size: 11px; }
.glass, .card { background: var(--surface); border-radius: var(--radius); }
.card { padding: 16px; }

/* ===== ВЕРХНЯЯ ПАНЕЛЬ ===== */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 16px; background: var(--bar-bg); }
.lvl { display: flex; align-items: center; gap: 6px; width: 84px; }
.balance { display: flex; align-items: center; gap: 5px; padding: 6px 6px 6px 12px; border-radius: var(--r-pill); background: var(--surface); font-weight: 700; }
.balance b { transition: transform .2s; display: inline-block; }
.balance b.bump { transform: scale(1.15); }
.balance .plus { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #111; font-weight: 800; }
.icon-btn { width: 84px; text-align: right; font-size: 18px; opacity: .8; }

/* ===== СТРАНИЦЫ ===== */
main { padding: 8px 16px 0; max-width: 560px; margin: 0 auto; }
.page { display: none; animation: fade .2s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-title { font-size: 26px; font-weight: 800; letter-spacing: -.3px; margin: 12px 0 16px; }
.page-head { display: flex; align-items: center; justify-content: space-between; }
.sub-title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 24px 2px 10px; }
.back { color: var(--muted); font-size: 14px; padding: 8px 0 0; }
.hint { color: var(--muted); font-size: 13px; text-align: center; margin: 12px 0 0; min-height: 18px; }
.big-emoji { font-size: 56px; margin: 4px 0; }

/* ===== ГЛАВНАЯ ===== */
.hello { margin: 14px 2px 18px; }
.hello h1 { font-size: 26px; font-weight: 800; letter-spacing: -.3px; }
.hello p { color: var(--muted); margin-top: 4px; }

.promo { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px;
  border-radius: var(--radius); background: var(--accent-soft); text-align: left; }
.promo-art { width: 44px; height: 40px; display: grid; place-items: center; font-size: 26px; flex: none; }
.promo-text b { display: block; font-size: 15px; }
.promo-text small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.chev { margin-left: auto; color: var(--muted); font-size: 22px; line-height: 1; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px;
  border-radius: var(--radius); background: var(--surface); text-align: left; min-height: 124px; }
.tile-top { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; }
.tile-ico { font-size: 26px; }
.tile b { font-size: 15px; margin-top: 10px; }
.tile small { color: var(--muted); font-size: 12px; }
.pill { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); white-space: nowrap; }
.pill:empty { display: none; }
.pill-accent { background: var(--accent); color: #111; }
.pill-accent:disabled { background: var(--surface-2); color: var(--muted); }
.dots { display: flex; gap: 5px; margin-top: 8px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-2); }
.dots i.done { background: var(--accent); }
.dots i.next { box-shadow: 0 0 0 2px var(--accent) inset; }

.list { margin-top: 12px; border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; text-align: left; }
.list .row + .row { border-top: 1px solid var(--line); }
.row-ico { width: 28px; font-size: 20px; text-align: center; }
.row-text { font-weight: 600; }
.row-text small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px; }
.row-end { margin-left: auto; color: var(--accent); font-weight: 800; }
.row-link { margin-top: 12px; border-radius: var(--radius); background: var(--surface); }

/* ===== КЕЙСЫ ===== */
.live { display: flex; align-items: center; gap: 10px; height: 32px; margin: -4px 0 12px; overflow: hidden; }
.live-track { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.live-inner { display: inline-flex; gap: 18px; white-space: nowrap; font-size: 12px; color: var(--muted); animation: marquee 40s linear infinite; }
.live-inner b { color: var(--text); font-weight: 600; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink { 50% { opacity: .3; } }

/* страница кейса */
.link { color: var(--accent); font-size: 13px; font-weight: 600; }

.roulettes { display: flex; flex-direction: column; gap: 8px; align-items: center; }
/* 🎰 рулетка: квадратные плитки с подарком на цветном (по редкости) фоне, линия-указатель с точкой */
.roulette { position: relative; width: 100%; max-width: 360px; height: 116px; overflow: hidden; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line); }
.roulette::before, .roulette::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 2; pointer-events: none; }
.roulette::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.roulette::after { right: 0; background: linear-gradient(-90deg, var(--surface), transparent); }
.marker { position: absolute; left: 50%; transform: translateX(-50%); z-index: 4; border: 9px solid transparent; }
.marker-top { top: -1px; border-top: 11px solid var(--accent); }
.marker-bottom { bottom: -1px; border-bottom: 11px solid var(--accent); }
.roulette .needle { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; z-index: 3; pointer-events: none;
  background: var(--accent); box-shadow: 0 0 10px var(--accent); border-radius: 2px; }
.roulette-track { display: flex; gap: 8px; padding: 14px 0; height: 100%; will-change: transform; align-items: center; }
.rcard { position: relative; flex: 0 0 104px; height: 104px; border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; --tile: var(--rc, var(--r-common));
  background: radial-gradient(80% 75% at 50% 38%, color-mix(in srgb, var(--tile) 85%, #fff 15%), transparent 75%),
              linear-gradient(160deg, color-mix(in srgb, var(--tile) 75%, #fff 10%), color-mix(in srgb, var(--tile) 55%, #000 20%)); }
.rcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .25); }
.rcard.r-common { --tile: #7c8aa5; } .rcard.r-uncommon { --tile: #4fd18b; } .rcard.r-rare { --tile: #4aa3ff; }
.rcard.r-epic { --tile: #b26bff; } .rcard.r-legendary { --tile: #ffc24a; } .rcard.r-none { --tile: #5d6678; } .rcard.is-nft { --tile: #f59e0b; }
/* шоу-лента: дорогие плитки чуть «светятся» в пролёте (визуал ≠ шансы) */
.rcard.r-epic { box-shadow: 0 0 18px -4px rgba(178, 107, 255, .55); }
.rcard.r-legendary { box-shadow: 0 0 22px -2px rgba(255, 194, 74, .65); }
.rcard.is-nft { box-shadow: 0 0 24px -2px rgba(251, 191, 36, .7); }
.rcard .emoji { font-size: 52px; line-height: 1; }
.rcard .emoji img.ico { width: 76px; height: 76px; display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
/* 🪙 монета: один вид на тип, а не на положение — свой тёплый фон, монета строго по центру, сумма одной строкой на одной линии */
.rcard.is-coin { --tile: var(--r-coin); padding-bottom: 24px; }
.rcard.is-coin .emoji { font-size: 56px; }
.rcard.is-coin .emoji .tg-star, .item.is-coin .emoji .tg-star { width: 1em; height: 1em; filter: none; }
.rcard .amt { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 800 14px/1 var(--display); font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.rcard.r-none .emoji { opacity: .9; font-size: 44px; }
.rcard.is-nft { background: radial-gradient(80% 75% at 50% 38%, #ffe7a3, transparent 75%), linear-gradient(160deg, #fbbf24, #b45309 90%); }
.rcard.is-nft::after { box-shadow: inset 0 0 0 1.5px rgba(255, 236, 170, .75), inset 0 1px 0 rgba(255, 255, 255, .45); }
.rcard.win { animation: rcWin .7s var(--ease-spring) both; z-index: 2; }
.rcard.win::before { content: ""; position: absolute; inset: -40%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tile, #fff) 70%, transparent), transparent 65%); animation: rcBurst 1.2s ease-out both; }
.rcard.jackpot { animation: jackpotGlow 1.2s ease-in-out 3; box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgba(251, 191, 36, .55); }
@keyframes rcWin { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1.08); } }
@keyframes rcBurst { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: .55; transform: scale(1.2); } }
.roulettes.compact .roulette { height: 88px; }
.roulettes.compact .roulette-track { padding: 10px 0; gap: 6px; }
.roulettes.compact .rcard { flex-basis: 64px; height: 64px; border-radius: var(--r-sm); }
.roulettes.compact .rcard .emoji { font-size: 30px; }
.roulettes.compact .rcard .emoji img.ico { width: 48px; height: 48px; }
.roulettes.compact .rcard.is-coin { padding-bottom: 17px; }
.roulettes.compact .rcard.is-coin .emoji { font-size: 34px; }
.roulettes.compact .rcard .amt { font-size: 10px; bottom: 5px; }
.roulettes.compact 
.multi { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.multi:empty { display: none; }
.multi button, .mults button, .quick button { padding: 7px 14px; border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font-weight: 700; font-size: 13px; }
.multi button.active { background: var(--text); color: #111; }
.spin-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; max-width: 330px; margin: 14px auto 0; }
.case-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ===== ПРЕДМЕТЫ ===== */
.items-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.items-grid.small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.item { position: relative; padding: 12px 6px 10px; text-align: center; border-radius: var(--r-md); background: var(--surface);
  cursor: pointer; transition: transform .12s, box-shadow .12s; }
.item::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 2px; border-radius: 2px; background: var(--rc, var(--r-common)); }
.item.is-loot .name { font-size: 11px; letter-spacing: -.2px; }
.item.is-coin { --rc: var(--r-coin); background: color-mix(in srgb, var(--r-coin) 16%, var(--surface)); }
.item:active { transform: scale(.96); }
.item.selected { box-shadow: 0 0 0 2px var(--accent); }
.item.locked { opacity: .35; }
.item .emoji { font-size: 30px; line-height: 1.2; }
.items-grid.small .item .emoji { font-size: 24px; }
.item .name { font-size: 13px; font-weight: 700; letter-spacing: -.1px; margin-top: 6px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .price { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.item .act { margin-top: 8px; width: 100%; font-size: 11px; padding: 6px 0; font-weight: 700; border-radius: 8px; background: var(--surface-2); }
.item .act.buy { background: var(--accent); color: #111; }
.item .act + .act { margin-top: 4px; }
.item .tg, .nft-tag { font-size: 9px; font-weight: 800; color: var(--accent); margin-top: 3px; letter-spacing: .4px; }
.r-none { --rc: var(--r-none); } .r-common { --rc: var(--r-common); } .r-uncommon { --rc: var(--r-uncommon); }
.r-rare { --rc: var(--r-rare); } .r-epic { --rc: var(--r-epic); } .r-legendary { --rc: var(--r-legendary); } .r-nft { --rc: var(--r-nft); }
.item.r-nft { box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .35); }
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 28px 0; font-size: 14px; }
.summary { display: flex; justify-content: space-around; padding: 14px; margin-bottom: 12px; border-radius: var(--radius); background: var(--surface); font-size: 12px; color: var(--muted); text-align: center; }
.summary b { display: block; font-size: 17px; color: var(--text); margin-top: 3px; }

/* ===== КНОПКИ ===== */
.btn { border-radius: var(--r-md); padding: 14px 18px; font-weight: 700; font-size: 15px; transition: transform .1s, opacity .2s; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .35; pointer-events: none; }
.btn-accent, .btn-primary, .btn-gold, .btn-success, .btn-tg { background: var(--accent); color: #111; }
.btn-ghost { background: var(--surface); color: var(--text); }
.btn-text { color: var(--muted); }
.btn-sm { padding: 8px 12px; font-size: 13px; }
.btn-wide { width: 100%; margin-top: 12px; }
.input { flex: 1; min-width: 0; padding: 13px 14px; border-radius: var(--r-md); background: var(--surface); color: var(--text); border: 1px solid transparent; font-size: 15px; outline: none; }
.input:focus { border-color: var(--accent); }
.ref-row { display: flex; gap: 8px; margin-top: 12px; }

/* ===== НИЖНЕЕ МЕНЮ ===== */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar); display: flex; justify-content: center;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--bar-bg); border-top: 1px solid var(--line); }
.tab { position: relative; flex: 1; max-width: 90px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 10px; font-weight: 600; color: var(--muted); }
.tab span { font-size: 19px; filter: grayscale(1); opacity: .6; transition: .2s; }
.tab.active { color: var(--text); }
.tab.active span { filter: none; opacity: 1; }
.tab.active::after { content: ""; position: absolute; bottom: 0; width: 18px; height: 3px; border-radius: 3px; background: var(--accent); }
.tab-dot { position: absolute; top: 6px; right: 26%; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ===== АПГРЕЙД / КРАФТ ===== */
.up-slots { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.slot { min-height: 128px; border-radius: var(--r-md); border: 1.5px dashed rgba(255, 255, 255, .14); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; transition: .15s; }
.slot:active { transform: scale(.98); }
.slot .plus, .cslot .plus { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 400;
  background: var(--surface-2); color: var(--muted); }
.slot small { color: var(--muted); font-size: 12px; }
.slot.filled { border-style: solid; border-color: transparent; background: var(--surface-2); }
.slot-item { text-align: center; }
.slot-item .emoji { font-size: 40px; }
.slot-item .name { font-size: 12px; font-weight: 600; margin-top: 4px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-item .price { font-size: 12px; color: var(--muted); margin-top: 2px; }
.up-x { color: var(--accent); font-weight: 800; font-size: 15px; min-width: 32px; text-align: center; }
.mults { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.mults button { padding: 6px 12px; background: var(--surface-2); }

.chance { margin-top: 18px; }
.bar { position: relative; height: 14px; border-radius: var(--r-pill); background: var(--surface-2); overflow: visible; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--r-pill); background: var(--accent); transition: width .35s ease; }
.bar .marker { position: absolute; top: -6px; bottom: -6px; left: 0; width: 3px; margin-left: -1.5px; border: 0; border-radius: 2px; background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .8); transform: none; opacity: 0; transition: opacity .2s; }
.bar.spinning .marker, .bar.win .marker, .bar.lose .marker { opacity: 1; }
.bar.win > i { background: var(--win); }
.bar.lose .marker { background: var(--lose); box-shadow: 0 0 8px var(--lose); }

.craft-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cslot { aspect-ratio: 1.15; border-radius: var(--r-md); border: 1.5px dashed rgba(255, 255, 255, .14); display: grid; place-items: center; font-size: 30px; }
.cslot.filled { border: 0; background: var(--surface-2); position: relative; }
.cslot.filled::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 2px; border-radius: 2px; background: var(--rc, var(--r-common)); }

/* ===== ЗАДАНИЯ ===== */
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--surface); }
.task-emoji { font-size: 24px; width: 32px; text-align: center; }
.task-body { flex: 1; min-width: 0; }
.task-title { font-weight: 600; font-size: 14px; }
.task-reward { color: var(--accent); font-size: 13px; font-weight: 700; margin-top: 2px; }
.progress { height: 4px; border-radius: var(--r-pill); background: var(--surface-2); margin-top: 8px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); }
.task .btn { padding: 9px 14px; font-size: 13px; white-space: nowrap; }
.task.done { opacity: .5; }

/* ===== ТУРНИР / ПРОФИЛЬ ===== */
.stat-row { display: flex; justify-content: space-around; margin: 8px 0 12px; }
.stat-row small { display: block; color: var(--muted); font-size: 12px; }
.stat-row b { font-size: 20px; font-weight: 800; }
.tour-me { margin-top: 10px; text-align: center; font-size: 14px; line-height: 1.6; }
.tour-me b { color: var(--accent); }
.leader { list-style: none; padding: 4px 14px; }
.leader li { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 14px; }
.leader li + li { border-top: 1px solid var(--line); }
.leader .pl { width: 24px; text-align: center; font-weight: 800; }
.leader .nm { flex: 1; }
.leader .xp { color: var(--muted); font-size: 12px; }
.leader .pz { color: var(--accent); font-weight: 800; }
.leader li.me .nm { color: var(--accent); }

.profile { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; }
.profile > :not(.avatar) { min-width: 0; } /* текст сжимается, аватар — нет */
/* flex:none — иначе в .profile (flex-row) аватар сжимается (было ~50×56), круг становится овалом и svg.cos-fr с inset % уезжает вверх */
.avatar { position: relative; flex: none; width: 56px; height: 56px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 800; background: var(--surface-2); overflow: visible; }
.p-name { font-size: 20px; font-weight: 800; }
.p-sub { color: var(--muted); font-size: 13px; }
.p-level { color: var(--accent); font-size: 12px; font-weight: 600; margin-top: 3px; }
.money-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.stat { padding: 14px; border-radius: var(--r-md); background: var(--surface); }
.stat .v { font-size: 19px; font-weight: 800; }
.stat .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ach-count { color: var(--accent); }
.ach-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ach { text-align: center; padding: 12px 4px; border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.ach .e { font-size: 24px; }
.ach .t { font-size: 10px; margin-top: 4px; line-height: 1.2; min-height: 24px; }
.ach .p { height: 3px; border-radius: 9px; background: var(--surface-2); margin: 6px 8px 0; overflow: hidden; }
.ach .p i { display: block; height: 100%; background: var(--accent); }
.ach.locked .e { filter: grayscale(1); opacity: .35; }
.ach.locked .t { color: var(--muted); }
.ach.unlocked { box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .45); }
.top-list { padding: 4px 14px 4px 34px; font-size: 14px; }
.top-list li { padding: 9px 0; }
.top-list li + li { border-top: 1px solid var(--line); }
.top-list li span { float: right; color: var(--muted); font-weight: 700; }
.history { list-style: none; font-size: 13px; max-height: 340px; overflow-y: auto; }
.history.card { padding: 4px 14px; }
.history li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; }
.history li + li { border-top: 1px solid var(--line); }
.history .when { color: var(--muted); font-size: 11px; margin-top: 2px; }
.history .plus { color: var(--win); } .history .minus { color: var(--muted); }
.st-pending, .st-error { color: var(--gold); } .st-sent { color: var(--win); } .st-rejected { color: var(--lose); }

/* ===== ОКНА ===== */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; background: rgba(0, 0, 0, .6); align-items: flex-end; justify-content: center; }
.modal.open { display: flex; animation: fade .18s; }
.center-modal { align-items: center; padding: 20px; }
#resultModal { z-index: var(--z-modal-top); }
.sheet { position: relative; width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto; padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0; background: var(--surface); animation: up .22s ease; }
@keyframes up { from { transform: translateY(24px); } to { transform: none; } }
.sheet-grip { width: 36px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); margin: 0 auto 10px; }
.sheet .item { background: var(--surface-2); }
.modal-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 13px; }
.modal-title { text-align: center; font-size: 18px; font-weight: 800; margin: 4px 0 12px; }
#pickerSub { margin: -6px 0 12px; }
.result-card { width: 100%; max-width: 340px; padding: 24px 20px 20px; border-radius: 22px; background: var(--surface); text-align: center; animation: pop .3s var(--ease-spring); }
.result-card .emoji { font-size: 60px; margin: 2px 0 6px; }
.result-card .title { font-size: 20px; font-weight: 800; }
.result-card .desc, .sub-text { color: var(--muted); font-size: 14px; margin: 8px 0 4px; line-height: 1.45; }
.result-card .item { background: var(--surface-2); }
.result-actions { display: flex; gap: 8px; margin-top: 16px; }
.result-actions .btn { flex: 1; padding: 12px; }
.result-actions .btn-ghost { background: var(--surface-2); }
.res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 0 6px; }
.res-grid .item { cursor: default; padding: 10px 4px 8px; }
.res-grid .item .emoji { font-size: 24px; }
.res-total { font-size: 13px; color: var(--muted); }
.res-total b { color: var(--text); }
.levelup { margin-top: 10px; padding: 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; }
#subChannels { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
#subChannels a { color: var(--accent); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

.note-accent { text-align: center; padding: 10px; border-radius: var(--r-sm); margin-bottom: 12px; background: var(--accent-soft); color: var(--accent); font-size: 14px; }
.dep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dep-pack { position: relative; padding: 16px 6px 12px; border-radius: var(--r-md); background: var(--surface-2); text-align: center; }
.dep-pack .a { font-size: 18px; font-weight: 800; }
.dep-pack .b { font-size: 11px; color: var(--accent); margin-top: 3px; min-height: 14px; font-weight: 700; }
.dep-pack .hot { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: var(--r-pill); background: var(--accent); color: #111; white-space: nowrap; }
.dep-pack:active { transform: scale(.97); }

.wd-lock { padding: 14px; border-radius: var(--r-md); background: var(--surface-2); margin-bottom: 12px; font-size: 13px; line-height: 1.6; }
.wd-lock b { color: var(--accent); }
.wd-lock .progress { margin: 4px 0 8px; }
.wd-lock small { color: var(--muted); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r-sm); background: var(--surface-2); margin-bottom: 12px; }
.seg button { padding: 9px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--muted); }
.seg button.active { background: var(--surface); color: var(--text); }
.quick { display: flex; gap: 6px; margin: 10px 0 0; flex-wrap: wrap; }
.quick button { flex: 1; background: var(--surface-2); }

.ach-pop { position: fixed; top: -120px; left: 50%; transform: translateX(-50%); z-index: var(--z-pop); width: min(92vw, 380px); display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(var(--aura2-rgb), .4); transition: top .45s var(--ease-spring); }
.ach-pop.show { top: 12px; }
.ach-pop .e { font-size: 30px; }
.ach-pop b { display: block; font-size: 14px; }
.ach-pop small { color: var(--muted); font-size: 12px; }

.maintenance { position: fixed; inset: 0; z-index: var(--z-maint); background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-particles); }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 30px); z-index: var(--z-toast); transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 11px 16px; border-radius: var(--r-sm); font-size: 14px; max-width: 90vw; text-align: center; background: #26262f; transition: all .22s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { box-shadow: inset 3px 0 0 var(--lose); }
.toast.success { box-shadow: inset 3px 0 0 var(--win); }

@media (min-width: 520px) {
  .cases-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .items-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .items-grid.small { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ===== ЗАСТАВКА ===== */
.splash { position: fixed; inset: 0; z-index: var(--z-splash); background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: opacity .35s; }
.splash.gone { opacity: 0; pointer-events: none; }
.splash-box { font-size: 64px; animation: bob 1.6s ease-in-out infinite; }
.splash-name { font-size: 22px; font-weight: 800; letter-spacing: 2px; }
.splash-msg { color: var(--muted); font-size: 13px; min-height: 22px; text-align: center; padding: 0 24px; }
.spinner { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--surface-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#depNeed { margin-bottom: 8px; }

/* ===== 🐷 КОПИЛКА ===== */
.piggy { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px; border-radius: var(--radius); background: var(--surface); text-align: left; }
.pig { font-size: 30px; transition: transform .3s; }
.piggy.full .pig { animation: wobble 1.2s ease-in-out infinite; }
@keyframes wobble { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.pg-bar { display: block; height: 5px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.pg-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .6s ease; }
.pg-bar-lg { height: 8px; margin: 10px 0 16px; }
.pig-big { font-size: 72px; margin: 4px 0 -4px; }
.pig-big.shake { animation: wobble .5s ease-in-out 3; }
.pig-amount { font-size: 14px; color: var(--muted); }
.pig-amount b { font-size: 28px; color: var(--text); }
.pig-rules { list-style: none; text-align: left; font-size: 14px; }
.pig-rules li { display: flex; gap: 10px; align-items: center; padding: 9px 2px; }
.pig-rules li + li { border-top: 1px solid var(--line); }
.pig-rules li > span:first-child { width: 22px; text-align: center; }
.pig-rules b { color: var(--accent); }
.piggy-drop { margin-top: 10px; padding: 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; }

/* ===== ОНЛАЙН + ТОП-ДРОПЫ ===== */
.hello { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.page-title-row { display: flex; align-items: center; justify-content: space-between; }
.online { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--surface);
  font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; flex: none; }
.online b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.online i { width: 7px; height: 7px; border-radius: 50%; background: var(--win); box-shadow: 0 0 0 0 color-mix(in srgb, var(--win) 60%, transparent); animation: pulseOn 2s infinite; }
@keyframes pulseOn { 70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--win) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--win) 0%, transparent); } }
.drops { margin-top: 14px; }
.drops-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 8px; }
.drops-head b { font-size: 15px; }
.drops-head small { color: var(--muted); font-size: 12px; }
.drops-track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; scrollbar-width: none; }
.drops-track::-webkit-scrollbar { display: none; }
.drop { flex: none; width: 84px; scroll-snap-align: start; padding: 10px 6px 8px; border-radius: var(--r-md); background: var(--surface);
  text-align: center; border-bottom: 2px solid var(--rc, var(--line)); }
.drop .de { font-size: 30px; line-height: 1.1; }
.drop .dp { display: block; margin-top: 4px; font-size: 13px; font-weight: 800; color: var(--accent); }
.drop .du, .drop .dt { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drop .du { color: var(--text); opacity: .8; }
.drop.nft { background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%); }
.drop.new { animation: dropIn .6s var(--ease-spring); }
@keyframes dropIn { from { transform: scale(.6); opacity: 0; } }
.drop.r-rare { --rc: #4aa3ff; } .drop.r-epic { --rc: #a66bff; } .drop.r-legendary { --rc: var(--accent); }

/* ===== ГЛАВНАЯ: минимум ===== */
#page-home .hello { margin-bottom: 14px; }
#page-home .list small { display: none; }
#page-home .list .row-end { font-size: 14px; }
#piggyCard.full .pig { animation: wobble 1.2s ease-in-out infinite; display: inline-block; }
#page-cases .promo { margin-bottom: 10px; }
#page-cases .drops { margin: 0 0 14px; }

/* ===== КОЛЕСО АПГРЕЙДА ===== */
.wheel { position: relative; width: min(72vw, 260px); aspect-ratio: 1; margin: 22px auto 6px; }
.wheel svg { width: 100%; height: 100%; display: block; }
.w-track { fill: none; stroke: var(--surface-2); stroke-width: 16; }
.w-arc { fill: none; stroke: var(--accent); stroke-width: 16; stroke-linecap: butt; transition: stroke-dasharray .45s ease, stroke .3s; }
.w-ticks line { stroke: rgba(255, 255, 255, .10); stroke-width: 1.5; }
.w-needle { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.w-needle i { position: absolute; left: 50%; top: 2px; width: 0; height: 0; transform: translateX(-50%);
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid #fff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.w-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.w-center b { font-size: 38px; font-weight: 800; letter-spacing: -1px; color: var(--accent); font-variant-numeric: tabular-nums; }
.w-center small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.wheel.win .w-arc { stroke: var(--win); }
.wheel.win .w-center b { color: var(--win); }
.wheel.lose .w-needle i { border-top-color: var(--lose); }
.wheel.lose .w-center b { color: var(--lose); }
.dep-alt { margin: 12px 0 4px; }
.dep-alt .row-text small { display: block; }

/* ===== ТАЙМЕР ЕЖЕДНЕВНОГО КЕЙСА ===== */
.btn-timer { margin: 14px 0 2px; font-size: 26px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--text); opacity: 1 !important; }

/* ===== УСЛОВИЯ ВЫВОДА (только по нажатию) ===== */
.gate { text-align: left; margin: 14px 0 4px; display: grid; gap: 12px; }
.gate-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 6px; }
.gate-top b { color: var(--accent); white-space: nowrap; }
.gate-step.done .gate-top b { color: var(--win); }
.gate-step.done .progress i { background: var(--win); }

/* крестик в окне результата + кнопки переносятся, если их три */
.result-card { position: relative; }
.res-x { position: absolute; top: 10px; right: 10px; }
.result-actions { flex-wrap: wrap; }
.result-actions .btn { min-width: 40%; }

.case-card.pulse { animation: cardPulse 1.4s ease 2; }
@keyframes cardPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--aura2-rgb), 0); } 40% { box-shadow: 0 0 0 3px var(--accent); } }

/* ===== ИКОНКИ ПОДАРКОВ ===== */
img.ico { width: 1em; height: 1em; object-fit: contain; vertical-align: middle; }
.item .emoji img.ico, .slot-item .emoji img.ico { width: 44px; height: 44px; border-radius: 10px; }
.item.r-nft .emoji, .slot-item.r-nft .emoji { position: relative; }
.item.r-nft .name::before { content: "NFT "; color: var(--accent); font-weight: 800; font-size: 10px; }



/* ===== СТАВКА ЗВЁЗДАМИ (апгрейд, крафт) ===== */
.stake-row, .rk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.stake-ctl { display: flex; align-items: center; background: var(--surface-2); border-radius: var(--r-sm); overflow: hidden; }
.stake-ctl button { width: 38px; height: 38px; font-size: 18px; font-weight: 700; color: var(--text); }
.stake-ctl input { width: 76px; height: 38px; background: transparent; border: 0; color: var(--text); text-align: center; font-weight: 800; font-size: 15px; outline: none; }
.up-stake { text-align: center; margin-top: 8px; }
.mults button.active { background: var(--accent); color: #111; }

/* ===== КРАФТ-КОНТРАКТ ===== */
.craft-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cslot { aspect-ratio: 1; font-size: 24px; }
.cslot img.ico { width: 30px; height: 30px; }
.craft-range { margin-top: 6px; text-align: center; padding: 10px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px; }
.pool { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pool::-webkit-scrollbar { display: none; }
.pool .pz { flex: none; width: 66px; padding: 8px 4px; border-radius: var(--r-sm); background: var(--surface); text-align: center; border-bottom: 2px solid var(--rc, var(--line)); }
.pool .pz .e { font-size: 24px; } .pool .pz .e img.ico { width: 28px; height: 28px; }
.pool .pz b { display: block; font-size: 11px; margin-top: 4px; color: var(--accent); }
.pz.r-rare { --rc: #4aa3ff; } .pz.r-epic { --rc: #a66bff; } .pz.r-legendary, .pz.r-nft { --rc: var(--accent); }

/* ===== РАКЕТКА ===== */
.rk-hist { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; scrollbar-width: none; min-height: 26px; }
.rk-hist span { flex: none; padding: 4px 9px; border-radius: var(--r-pill); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--muted); }
.rk-hist span.hi { color: var(--win); } .rk-hist span.mid { color: #4aa3ff; }
.rk-stage { position: relative; height: 270px; border-radius: var(--radius); background: #1c2447; overflow: hidden; }
.rk-stage.shake { animation: rkShake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes rkShake { 15% { transform: translate(-6px, 3px); } 30% { transform: translate(5px, -4px); } 45% { transform: translate(-4px, -2px); }
  60% { transform: translate(3px, 3px); } 80% { transform: translate(-2px, 1px); } }
.rk-pop { position: absolute; z-index: 3; transform: translate(-50%, 0); font-weight: 900; font-size: 20px; color: #fff; pointer-events: none;
  text-shadow: 0 2px 10px rgba(var(--aura2-rgb), .9); animation: rkPop 1.1s ease-out forwards; white-space: nowrap; }
@keyframes rkPop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } }
.rk-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rk-rocket { position: absolute; left: 10px; bottom: 10px; font-size: 32px; line-height: 36px; width: 32px; text-align: center; transform-origin: 50% 50%;
  transition: opacity .2s; will-change: transform, left, top; filter: drop-shadow(0 0 8px rgba(255, 160, 60, .6)); z-index: 2; }
.rk-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.rk-center { z-index: 3; }
.rk-center b { font-size: 52px; font-weight: 900; letter-spacing: -1px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
  transition: color .3s; }
.rk-center small { text-shadow: 0 1px 6px rgba(0, 0, 0, .6); color: rgba(255, 255, 255, .75) !important; }
.rk-center small { color: var(--muted); margin-top: 2px; }
.rk-stage.flying .rk-center b { color: var(--accent); }
.rk-stage.won .rk-center b { color: var(--win); }
.rk-stage.ready .rk-center b { color: var(--muted, #8a8f98); }
@keyframes rkReady { from { transform: translate(0, 0); } to { transform: translate(1px, -1px); } }
.rk-stage.boom .rk-center b { color: var(--lose); }
.rk-stage.boom .rk-rocket { opacity: 0; }
.rk-stage.misfire .rk-rocket { animation: rkMisfire 1.6s cubic-bezier(.3,.1,.3,1) forwards; filter: none; }
@keyframes rkMisfire { 0%, 30% { translate: 0 0; } 8%, 16%, 24% { translate: 2px -1px; } 12%, 20%, 28% { translate: -2px 1px; }
  55% { rotate: 25deg; translate: 2px 2px; } 75% { rotate: 80deg; translate: 6px 10px; } 100% { rotate: 95deg; translate: 8px 14px; opacity: .55; } }
.rk-btn { margin-top: 12px; font-size: 17px; }
.rk-btn.cash { background: var(--win); color: #06210f; }

/* ===== ЗАДАНИЯ ПО ПЕРИОДАМ ===== */
.q-head { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 2px 8px; }
.q-head b { font-size: 16px; } .q-head small { color: var(--muted); font-size: 12px; }
.q-head.excl b { color: var(--accent); }
.task.excl { background: linear-gradient(135deg, var(--accent-soft), var(--surface) 60%); border: 1px solid rgba(var(--aura2-rgb), .35); }
.task-left { font-size: 11px; color: var(--accent); font-weight: 700; margin-top: 2px; }
.task-reward img.ico { width: 16px; height: 16px; }

/* ===== 3 ВКЛАДКИ + РАЗДЕЛ «ИГРЫ» ===== */
.tab { max-width: 130px; font-size: 11px; }
.tab span { font-size: 21px; }
.row-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: auto; margin-right: 6px; }
.games { display: grid; gap: 12px; }
.game { display: flex; align-items: center; gap: 14px; padding: 18px 16px; border-radius: var(--radius); text-align: left; background: var(--surface); position: relative; overflow: hidden; }
.game::before { content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none; }
.g-rocket::before { background: radial-gradient(120% 140% at 0% 100%, var(--aura2), transparent 60%); }
.g-up::before { background: radial-gradient(120% 140% at 0% 100%, #a66bff, transparent 60%); }
.g-craft::before { background: radial-gradient(120% 140% at 0% 100%, #4aa3ff, transparent 60%); }
.g-ico { width: 56px; height: 56px; flex: none; display: grid; place-items: center; font-size: 30px; border-radius: var(--r-lg); background: var(--surface-2); }
.g-text { flex: 1; min-width: 0; }
.g-text b { display: block; font-size: 17px; }
.g-text small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }

/* топ-дропы — компактной полосой под кейсами */
.drops-mini { margin-top: 18px; }
.drops-mini .drop { width: 64px; padding: 6px 4px; }
.drops-mini .drop .de { font-size: 22px; }
.drops-mini .drop .dp { font-size: 11px; }
.drops-mini .drop .du, .drops-mini .drop .dt { font-size: 10px; }
#rkBtn { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#rkBtn span { pointer-events: none; }
.tab { max-width: 110px; }

/* ===== ⚒ СЛИЯНИЕ (крафт) ===== */
.fuse { position: fixed; inset: 0; z-index: var(--z-fuse); background: radial-gradient(circle at 50% 45%, rgba(20, 16, 30, .92), rgba(6, 6, 10, .97)); display: flex; align-items: center; justify-content: center; }
.fuse.hidden { display: none; }
#fuseFx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fuse-flier { position: fixed; z-index: calc(var(--z-fuse) + 1); width: 56px; height: 56px; display: grid; place-items: center; font-size: 34px; border-radius: var(--r-lg);
  background: var(--surface-2); box-shadow: 0 0 18px rgba(var(--aura2-rgb), .35); pointer-events: none; will-change: transform, opacity; }
.fuse-flier img.ico { width: 40px; height: 40px; }
.fuse-orb { position: relative; width: 150px; height: 150px; transform: scale(.3); opacity: 0; transition: transform .5s var(--ease-spring), opacity .3s; }
.fuse-orb.on { transform: scale(var(--s, .6)); opacity: 1; }
.fuse-core { position: absolute; inset: 22px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, #fff6e0, #ffd36b 35%, #e2a52f 65%, #5a2f99);
  box-shadow: 0 0 40px 10px rgba(var(--aura2-rgb), .55), inset 0 0 20px rgba(255, 255, 255, .5); color: #2a1200; }
.fuse-core b { font-size: 30px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.fuse-core small { font-size: 14px; }
.fuse-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; }
.fuse-ring.r1 { border-top-color: #ffd36b; border-right-color: rgba(255, 211, 107, .3); animation: fspin 1.1s linear infinite; }
.fuse-ring.r2 { inset: 8px; border-bottom-color: #a66bff; border-left-color: rgba(166, 107, 255, .3); animation: fspin 1.6s linear infinite reverse; }
@keyframes fspin { to { transform: rotate(360deg); } }
.fuse-orb.charge { animation: fshake .08s linear infinite; }
.fuse-orb.charge .fuse-ring.r1 { animation-duration: .35s; } .fuse-orb.charge .fuse-ring.r2 { animation-duration: .5s; }
@keyframes fshake { 0% { translate: 1px 0; } 25% { translate: -1px 1px; } 50% { translate: 1px -1px; } 75% { translate: -1px 0; } }
.fuse-orb.boom { transform: scale(2.4) !important; opacity: 0 !important; transition: transform .35s ease-out, opacity .35s ease-out; }
.fuse-flash { position: fixed; inset: 0; z-index: calc(var(--z-fuse) + 2); background: #fff; opacity: 0; pointer-events: none; }
.fuse-prize { position: absolute; left: 50%; top: 50%; width: min(86vw, 340px); transform: translate(-50%, -50%); text-align: center; animation: fpIn .6s var(--ease-spring); }
.fuse-prize.hidden { display: none; }
@keyframes fpIn { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }
.fp-rays { position: absolute; left: 50%; top: 70px; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 211, 107, .22) 0 10deg, transparent 10deg 24deg); animation: fspin 12s linear infinite;
  mask-image: radial-gradient(circle, #000 20%, transparent 68%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%); }
.fp-ico { font-size: 88px; line-height: 1; height: 120px; display: grid; place-items: center; filter: drop-shadow(0 0 24px var(--rc, rgba(255, 211, 107, .7))); }
.fp-ico img.ico { width: 110px; height: 110px; border-radius: 22px; }
.fp-name { font-size: 24px; font-weight: 800; margin-top: 10px; }
.fp-price { font-size: 18px; font-weight: 800; color: var(--accent); margin-top: 4px; }
.fp-desc { color: var(--muted); font-size: 14px; margin: 10px 0 18px; }
.fuse-prize.r-rare { --rc: rgba(74, 163, 255, .8); } .fuse-prize.r-epic { --rc: rgba(166, 107, 255, .85); }
.fuse-prize.r-legendary, .fuse-prize.r-nft { --rc: rgba(255, 211, 107, .95); }

/* ===== ⚔️ PvP ===== */
.g-pvp::before { background: radial-gradient(120% 140% at 0% 100%, #f43f5e, transparent 60%); }
.pvp-round { font-size: 12px; color: var(--muted); font-weight: 600; }
.pvp-hist { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-height: 26px; margin-bottom: 6px; }
.pvp-hist span { flex: none; padding: 4px 9px; border-radius: var(--r-pill); background: var(--surface); font-size: 12px; color: var(--muted); white-space: nowrap; }
.pvp-hist span b { color: var(--text); } .pvp-hist span.me b { color: var(--win); }
.pvp-stage { display: flex; justify-content: center; margin: 6px 0 8px; }
.pvp-wheel { position: relative; width: min(70vw, 250px); aspect-ratio: 1; }
.pvp-wheel svg { width: 100%; height: 100%; display: block; }
.pvp-needle { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.pvp-needle i { position: absolute; left: 50%; top: -2px; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 18px solid #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.pvp-center { position: absolute; inset: 22%; border-radius: 50%; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pvp-center b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pvp-center small { color: var(--muted); font-size: 11px; margin-top: 2px; padding: 0 6px; }
.pvp-win { text-align: center; padding: 12px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); font-weight: 800; margin-bottom: 10px; animation: fpIn .5s; }
.pvp-win.me { background: rgba(34, 197, 94, .15); color: var(--win); }
.pvp-players { display: grid; gap: 6px; margin-bottom: 12px; }
.pvp-pl { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); }
.pvp-pl.me { outline: 1px solid rgba(var(--aura2-rgb), .5); }
.pvp-pl .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pvp-pl .nm { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; }
.pvp-pl .nm small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvp-pl .vl { text-align: right; font-weight: 800; font-size: 14px; }
.pvp-pl .vl small { display: block; color: var(--muted); font-weight: 600; font-size: 12px; }
.pvp-pl.win { background: rgba(34, 197, 94, .14); }
.pvp-bet-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.pvp-bet-row .btn { flex: 1; }
.pvp-sum { text-align: center; margin: 10px 0; }
#pvpLeaveBtn { margin-top: 8px; }

/* лента крупных выигрышей — тонкая, приглушённая, под заголовком */
.gone { display: none !important; }
#page-cases .live { height: 30px; margin: -6px 0 12px; gap: 8px; }
.live-lbl { font-size: 13px; opacity: .8; flex: none; }
.live-inner { gap: 8px; animation-duration: 60s; }
.live-inner .lv { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface); font-size: 12px; color: var(--muted); }
.live-inner .lv b { color: var(--text); font-weight: 700; }
.live-inner .lv i { font-style: normal; opacity: .7; }
.live-inner .lv img.ico { width: 14px; height: 14px; }
.live-inner .lv.r-epic b { color: var(--aura1); } .live-inner .lv.r-legendary b, .live-inner .lv.r-nft b { color: var(--accent); }

/* без стрелочек у числовых полей — только наши − и + */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.stake-ctl button { width: 44px; height: 44px; font-size: 22px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.stake-ctl button:active { background: rgba(255, 255, 255, .08); }
.stake-ctl input { height: 44px; }
/* шаг для − / + (общий для всех игр, запоминается) */
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.steps button { padding: 8px 0; border-radius: 10px; background: var(--surface-2); color: var(--text); font-weight: 800; font-size: 13px; }
.steps button:active { background: var(--accent); color: #111; }

/* «Продолжить» — одно касание до последней игры */
.continue { margin: 12px 0 0; background: linear-gradient(90deg, var(--accent-soft), var(--surface) 70%); }
.continue small { display: block !important; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px; }

/* главная без приветствия — сразу к делу */
#page-home { padding-top: 0; }
#page-home > .duo:first-of-type { margin-top: 4px; }
/* профиль в инвентаре */
.me-card { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 6px 0 14px; border-radius: var(--radius); background: var(--surface); text-align: left; }
.me-ava { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #111; font-weight: 800; font-size: 18px; overflow: visible; }
.me-text { flex: 1; min-width: 0; }
.me-text b { display: block; font-size: 16px; }
.me-text small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.me-bal { font-weight: 800; color: var(--accent); white-space: nowrap; }

/* крафт: в ядре — подарок, без чисел */
.fuse-core b#fuseVal { font-size: 54px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.fuse-orb.charge .fuse-core b#fuseVal { animation: giftShake .12s linear infinite; }
@keyframes giftShake { 0% { transform: rotate(-6deg) scale(1.05); } 50% { transform: rotate(6deg) scale(1.12); } 100% { transform: rotate(-6deg) scale(1.05); } }
.pool .pz b { color: var(--muted); font-weight: 600; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== верхняя панель: аватар с кольцом уровня · баланс · пополнить ===== */
.topbar { gap: 10px; }
.top-ava { position: relative; width: 44px; height: 44px; flex: none; overflow: visible; isolation: isolate; }
/* слои top-ava: кольцо XP → фото+рамка → бейдж уровня сверху */
.ava-ring { position: absolute; inset: 0; z-index: 0; transform: rotate(-90deg); }
.ava-ring circle { fill: none; stroke-width: 3; }
.ava-ring .ring-bg { stroke: var(--surface-2); }
.ava-ring .ring-fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 125.66; stroke-dashoffset: 125.66; transition: stroke-dashoffset .6s; }
.ava-img { position: absolute; inset: 5px; z-index: 1; border-radius: 50%; overflow: visible; display: grid; place-items: center;
  background: var(--surface-2); font-weight: 800; font-size: 15px; }
/* с рамкой — чуть меньше фото (современные браузеры). Старые WebView: класс .top-ava.has-fr ниже, без :has */
.ava-img:has(> .cos-fr) { inset: 8px; }
/* круг фото отдельно от svg-рамки: клип только на лице, рамка рисуется снаружи */
.ava-face { position: absolute; inset: 0; z-index: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); }
/* бейдж поверх рамки (не под каплями melt) */
.top-ava .lvl-badge { z-index: 4; }
.ava-face img, .ava-img > img, .me-ava > img, .avatar > img, #pAvatar > img,
.me-ava .ava-face img, .avatar .ava-face img, #pAvatar .ava-face img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.lvl-badge { position: absolute; right: -3px; bottom: -3px; z-index: 3; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 10px; font-weight: 800; background: var(--accent); color: #111; border: 2px solid var(--bg); }
.top-bal { flex: 1; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
.top-bal small { font-size: 11px; color: var(--muted); font-weight: 600; }
.top-bal b { font-size: 19px; font-weight: 800; }
.top-bal b span { display: inline-block; transition: transform .2s; }
.top-bal b span.bump { transform: scale(1.15); }
.top-dep { flex: none; padding: 10px 14px; border-radius: var(--r-sm); background: var(--accent); color: #111; font-weight: 800; font-size: 14px; }
.top-dep:active { transform: scale(.97); }
.prof-top { display: flex; align-items: center; justify-content: space-between; }
.prof-top .icon-btn { width: auto; font-size: 18px; padding: 4px 6px; }

/* ===== друзья ===== */
.ref-hero { display: flex; gap: 14px; align-items: center; padding: 18px 16px; }
.ref-ico { flex: none; width: 54px; height: 54px; border-radius: var(--r-lg); display: grid; place-items: center; font-size: 26px; background: var(--accent-soft); }
.ref-copy h2 { font-size: 20px; font-weight: 800; line-height: 1.2; }
.ref-copy .acc { color: var(--accent); }
.ref-copy p { margin-top: 6px; }
.ref-actions { display: grid; gap: 8px; margin: 12px 0; }
.ref-stats { display: grid; gap: 0; padding: 4px 16px; }
.ref-stats > div { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; }
.ref-stats > div + div { border-top: 1px solid var(--line); }
.ref-stats span { color: var(--muted); }
.ref-stats b { color: var(--accent); font-weight: 800; }
.ref-case { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ref-list { padding: 4px 12px; }
.ref-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.ref-item + .ref-item { border-top: 1px solid var(--line); }
.ref-ava { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 800; }
.ref-name { flex: 1; display: flex; flex-direction: column; }
.ref-name small { color: var(--muted); font-size: 12px; }
.ref-earn { font-weight: 800; color: var(--win); }
.ref-earn.zero { color: var(--muted); font-weight: 600; }

/* ===== пустой инвентарь ===== */
.inv-empty { grid-column: 1 / -1; text-align: center; padding: 22px 18px; display: grid; gap: 10px; justify-items: center; }
.inv-empty-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: var(--surface-2); }
.inv-empty h3 { font-size: 20px; font-weight: 800; }
.inv-empty .btn { width: 100%; }
.or { width: 100%; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ===== пополнение: вкладки ===== */
.seg3 { margin-bottom: 12px; }
.dep-howto { text-align: center; display: grid; gap: 10px; padding: 8px 4px 4px; }
.dep-howto .big-emoji { font-size: 44px; }
.seg3 { grid-template-columns: 1fr 1fr 1fr; }

/* настоящие подарки Telegram: чуть объёма и тени, чтобы смотрелись предметом */
img.ico[src^="gifts/"] { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.ico-anim { display: inline-block; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .4)); }
.ico-anim svg { width: 100% !important; height: 100% !important; }

/* ===== крупный выигрыш: напряжение и вспышка ===== */
.roulettes.suspense .roulette { box-shadow: 0 0 0 1px rgba(251, 191, 36, .35), 0 0 28px rgba(251, 191, 36, .18); transition: box-shadow .6s; }
@keyframes jackpotGlow { 50% { transform: scale(1.06); box-shadow: 0 0 0 2px var(--gold), 0 0 40px rgba(251, 191, 36, .8); } }

/* ===== всплывашка: реальный крупный выигрыш другого игрока ===== */
.win-toast { position: fixed; left: 50%; top: 70px; z-index: var(--z-modal-top); transform: translate(-50%, -20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: var(--r-md); max-width: calc(100% - 32px);
  background: rgba(25, 18, 51, .96); box-shadow: 0 8px 24px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(251, 191, 36, .35);
  font-size: 13px; transition: opacity .3s, transform .3s; }
.win-toast.show { opacity: 1; transform: translate(-50%, 0); }
.win-toast .wt-ico { width: 34px; height: 34px; display: grid; place-items: center; font-size: 24px; }
.win-toast .wt-ico .ico { width: 34px; height: 34px; object-fit: contain; }
.win-toast small { display: block; color: var(--gold); font-weight: 700; font-size: 11px; }

/* множители апгрейда с настоящим шансом */
.mults button small { display: block; font-size: 10px; font-weight: 600; opacity: .75; margin-top: 1px; }

/* ===== свои иконки ===== */
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.tab span { filter: none !important; opacity: 1 !important; display: grid; place-items: center; height: 24px; }
.tab { color: var(--muted); }
.tab.active { color: var(--accent); }
.tab.active .ic { stroke-width: 2.1; }
.row-ico.ri { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--text); flex: none; }
.row-ico.ri .ic { width: 20px; height: 20px; }
.row-ico.ri.pig { background: rgba(236, 72, 153, .14); color: #f472b6; }
.row-ico.ri.gold { background: rgba(251, 191, 36, .14); color: var(--gold); }
.row-ico.ri.green { background: rgba(34, 197, 94, .14); color: var(--win); }
.row-ico.ri.blue { background: rgba(59, 130, 246, .14); color: #60a5fa; }

/* ===== поделиться выигрышем ===== */
.share-row { display: flex; gap: 8px; justify-content: center; margin: 4px 0 2px; }
.share-btn { padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 13px; }
.share-btn:active { transform: scale(.97); }
.fuse-prize .share-btn { margin-top: 10px; }

/* ===== знакомство ===== */
.coach { position: fixed; inset: 0; z-index: var(--z-coach); }
.coach-hole { position: absolute; border-radius: var(--r-lg); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .74), 0 0 0 2px var(--accent); transition: all .25s; pointer-events: none; }
.coach-tip { position: absolute; left: 16px; right: 16px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: coachIn .25s ease; }
.coach-tip b { font-size: 16px; }
.coach-tip p { color: var(--muted); margin: 4px 0 10px; font-size: 14px; line-height: 1.4; }
.coach-foot { display: flex; align-items: center; gap: 8px; }
.coach-foot span { flex: 1; color: var(--muted); font-size: 12px; }
.coach-skip { color: var(--muted); font-weight: 600; font-size: 13px; padding: 8px; }
.coach-next { background: var(--accent); color: #111; font-weight: 800; padding: 8px 16px; border-radius: 10px; }
@keyframes coachIn { from { opacity: 0; transform: translateY(6px); } }

/* ===== инвентарь: сортировка и выбор ===== */
.inv-head-btns { display: flex; gap: 6px; }
.inv-tools { margin: 10px 0 12px; display: grid; gap: 8px; }
.inv-sort, .inv-quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.inv-sort button, .inv-quick button { padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font-weight: 700; font-size: 12px; }
.inv-sort button.active { background: var(--accent-soft); color: var(--accent); }
.inv-quick span { color: var(--muted); font-size: 12px; }
.item.selectable { cursor: pointer; position: relative; transition: transform .1s; }
.item.selectable:active { transform: scale(.97); }
.item.picked { box-shadow: inset 0 0 0 2px var(--accent); }
.sel-mark { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; background: var(--surface-2); color: #111; box-shadow: inset 0 0 0 2px var(--line); }
.item.picked .sel-mark { background: var(--accent); box-shadow: none; }
.sel-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-select);
  display: flex; gap: 8px; padding: 10px 16px; background: var(--bar-bg);
  border-top: 1px solid var(--line); }
.sel-bar .btn-success { flex: 1; }
body.selecting #page-inventory { padding-bottom: 76px; }

/* результат: длинное окно (×5, много уровней) прокручивается, кнопки всегда видны */
.result-card { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.result-card .result-actions { position: sticky; bottom: -20px; margin: 16px -20px -20px; padding: 12px 20px 20px;
  background: linear-gradient(transparent, var(--surface) 22%); }
.result-card .res-grid { gap: 6px; }
/* крафт: убрать подарок из слота — тап по нему */
.cslot .rm { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 0, 0, .55);
  color: #fff; font-size: 9px; font-style: normal; display: grid; place-items: center; line-height: 1; }
/* сколько кейсов открыть — сегменты */
.multi { flex-direction: column; align-items: stretch; gap: 6px; max-width: 360px; margin: 14px auto 0; }
.multi-label { font-size: 12px; color: var(--muted); text-align: center; }
.multi-seg { display: flex; background: var(--surface); border-radius: var(--r-sm); padding: 3px; gap: 3px; }
.multi-seg button { flex: 1; padding: 8px 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 800; font-size: 14px; }
.multi-seg button.active { background: var(--accent); color: #1a0f00; }

.rk-gifts { padding: 8px 14px; border-radius: var(--r-sm); background: var(--surface-2); font-weight: 700; font-size: 14px; color: var(--text); }
.rk-gift-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rk-gift-chips:empty { display: none; }
.rk-gift-chips span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--r-pill); background: var(--surface-2); font-size: 12px; font-weight: 700; }
.rk-gift-chips img.ico { width: 18px; height: 18px; }

.item .chance { font-size: 10px; color: var(--muted); margin-top: 2px; }
.boost-note { grid-column: 1 / -1; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(74, 222, 128, .12); color: #86efac; font-size: 13px; font-weight: 700; text-align: center; }

/* 🥊 битва кейсов */
.g-battle::before { background: radial-gradient(120% 140% at 0% 100%, #a855f7, transparent 60%); }
.bt-label { font-size: 12px; color: var(--muted); margin: 4px 0 6px; }
.bt-cases { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: none; }
.bt-case { flex: none; width: 84px; padding: 8px 4px; border-radius: var(--r-md); background: var(--surface-2); display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1.5px solid transparent; }
.bt-case span { font-size: 24px; } .bt-case b { font-size: 11px; } .bt-case small { font-size: 11px; color: var(--muted); }
.bt-case.active { border-color: var(--accent); background: rgba(var(--aura2-rgb), .12); }
#btCreateBtn { margin-top: 12px; }
.bt-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.bt-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); }
.bt-row.mine { border: 1px solid rgba(var(--aura2-rgb), .4); }
.bt-ico { font-size: 26px; width: 34px; text-align: center; }
.bt-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bt-info b { font-size: 14px; } .bt-info small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-row .btn { padding: 8px 14px; font-size: 13px; flex: none; }
.bt-arena { margin-bottom: 14px; padding: 12px; border-radius: var(--radius); background: var(--surface); }
.bt-vs { display: flex; gap: 8px; align-items: flex-start; }
.bt-mid { align-self: center; font-weight: 900; color: var(--accent); font-size: 18px; }
.bt-col { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--r-md); border: 1.5px solid transparent; transition: border-color .3s, box-shadow .3s; }
.bt-col.win { border-color: var(--win); box-shadow: 0 0 18px rgba(34, 197, 94, .35); }
.bt-name { font-weight: 800; text-align: center; font-size: 14px; }
.bt-total { text-align: center; font-weight: 900; font-size: 20px; color: var(--accent); }
@keyframes btShake { 50% { transform: translateY(-2px); } }
.bt-result { text-align: center; margin-top: 10px; font-size: 15px; }
.section-title { font-size: 15px; font-weight: 800; margin: 6px 2px 10px; color: var(--muted); }

/* 🥊 битва: вертикальная рулетка */
.bt-round { text-align: center; font-size: 13px; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
.bt-reel { position: relative; height: 212px; overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
.bt-reel::before, .bt-reel::after { content: ""; position: absolute; left: 0; right: 0; height: 46px; z-index: 2; pointer-events: none; }
.bt-reel::before { top: 0; background: linear-gradient(var(--surface-2), transparent); }
.bt-reel::after { bottom: 0; background: linear-gradient(transparent, var(--surface-2)); }
.bt-pointer { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; z-index: 3; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.bt-pointer::before, .bt-pointer::after { content: ""; position: absolute; top: -7px; border: 8px solid transparent; }
.bt-pointer::before { left: -2px; border-left: 10px solid var(--accent); }
.bt-pointer::after { right: -2px; border-right: 10px solid var(--accent); }
.bt-track { display: flex; flex-direction: column; gap: 6px; padding: 0 8px; will-change: transform; }
.bt-tile { position: relative; flex: none; height: 84px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 36px;
  --tile: var(--rc, var(--r-common)); background: var(--surface);
  background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--tile) 80%, #fff 10%), transparent 75%),
              linear-gradient(160deg, color-mix(in srgb, var(--tile) 70%, #fff 8%), color-mix(in srgb, var(--tile) 50%, #000 25%)); }
.bt-tile.r-common { --tile: #7c8aa5; } .bt-tile.r-none { --tile: #5d6678; } .bt-tile.r-none span { opacity: .9; }
.bt-tile img.ico { width: 56px; height: 56px; } .bt-tile .tg-star { width: 40px; height: 40px; }
.bt-tile small { position: absolute; bottom: 4px; font-size: 11px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.bt-tile.hit { animation: winGlow .8s ease-in-out 2; box-shadow: 0 0 0 2px #fff inset; }
.bt-got { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-height: 30px; }
.bt-got span { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 18px; background: color-mix(in srgb, var(--rc, #7c8aa5) 40%, var(--surface-2)); }
.bt-got img.ico { width: 22px; height: 22px; }
.bt-col.lead .bt-total { color: var(--win); }

/* выбранный подарок подсвечивается всегда — и NFT тоже (их собственная рамка раньше перекрывала подсветку) */
.item.selected, .item.r-nft.selected { box-shadow: 0 0 0 2px var(--accent), 0 0 16px rgba(var(--aura2-rgb), .45); }
.item.selected::after { content: "✓"; position: absolute; top: 6px; right: 6px; left: auto; bottom: auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #111; font-size: 12px; font-weight: 800; display: grid; place-items: center; }

/* 📜 согласие с условиями при первом входе — компактная плашка снизу, полный текст по ссылке */
.terms-gate { position: fixed; inset: 0; z-index: var(--z-terms); background: rgba(8, 8, 12, .7); display: flex; align-items: flex-end; justify-content: center; }
.terms-box { width: 100%; max-width: 480px; max-height: 85vh; display: flex; flex-direction: column; gap: 12px; background: var(--surface);
  border-radius: 20px 20px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
.terms-hi { font-weight: 800; font-size: 17px; }
.terms-text { overflow-y: auto; font-size: 12.5px; line-height: 1.45; max-height: 45vh; color: var(--muted); }
.terms-text p { margin: 0 0 8px; }
.terms-lead { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.terms-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.35; }
.terms-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.terms-check a { color: var(--accent); }

/* ⬆️ апгрейд: свечение колеса во время прокрута, «заряд» ставки, вспышка цели при победе, сгорание ставки при проигрыше */
.wheel.spinning { animation: wheelGlow 1.1s ease-in-out infinite; border-radius: 50%; }
.wheel.spinning .w-arc { animation: arcPulse .9s ease-in-out infinite; }
.wheel.win { animation: wheelWin .9s ease-out; border-radius: 50%; }
.wheel.lose { animation: wheelLose .5s ease-out; }
.wheel .w-center b { transition: transform .25s; }
.wheel.win .w-center b, .wheel.lose .w-center b { font-size: 46px; animation: popIn .45s var(--ease-spring); }
.slot.charging { animation: charge .45s ease-in-out infinite alternate; }
.slot.won { animation: slotWon .9s ease-out; }
.slot.burn { animation: slotBurn .9s ease-in forwards; }
@keyframes wheelGlow { 0%, 100% { box-shadow: 0 0 18px rgba(var(--aura2-rgb), .25); } 50% { box-shadow: 0 0 46px rgba(var(--aura2-rgb), .6); } }
@keyframes arcPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes wheelWin { 0% { box-shadow: 0 0 0 rgba(46, 204, 113, 0); } 40% { box-shadow: 0 0 70px rgba(46, 204, 113, .75); } 100% { box-shadow: 0 0 0 rgba(46, 204, 113, 0); } }
@keyframes wheelLose { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@keyframes popIn { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
@keyframes charge { from { transform: scale(1); box-shadow: 0 0 0 rgba(var(--aura2-rgb), 0); } to { transform: scale(1.04); box-shadow: 0 0 22px rgba(var(--aura2-rgb), .5); } }
@keyframes slotWon { 0% { transform: scale(1); } 35% { transform: scale(1.14); box-shadow: 0 0 40px rgba(46, 204, 113, .8); } 100% { transform: scale(1); } }
@keyframes slotBurn { 0% { transform: scale(1); filter: none; opacity: 1; } 60% { transform: scale(.92) rotate(-4deg); filter: grayscale(1) brightness(.6); } 100% { transform: scale(.85); opacity: .35; filter: grayscale(1) brightness(.4); } }
.result-actions .btn { white-space: nowrap; }

/* 🎰 апгрейд — игровой вид */
.up-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.up-streak { padding: 5px 11px; border-radius: var(--r-pill); font-weight: 800; font-size: 13px; color: #111;
  background: linear-gradient(135deg, #ffd27a, var(--aura2)); box-shadow: 0 0 18px rgba(var(--aura2-rgb), .5); }
.up-streak.bump { animation: popIn .45s var(--ease-spring); }
.up-x { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.up-arrows { color: var(--accent); letter-spacing: -2px; font-size: 18px; font-weight: 900; animation: arrows 1.2s linear infinite; }
@keyframes arrows { 0% { opacity: .2; transform: translateX(-4px); } 50% { opacity: 1; } 100% { opacity: .2; transform: translateX(4px); } }
#upTarget.filled { box-shadow: 0 0 0 1.5px rgba(var(--aura2-rgb), .45), 0 0 22px rgba(var(--aura2-rgb), .18); animation: tgtGlow 2.4s ease-in-out infinite; }
@keyframes tgtGlow { 50% { box-shadow: 0 0 0 1.5px rgba(var(--aura2-rgb), .8), 0 0 32px rgba(var(--aura2-rgb), .35); } }
.mults button { transition: transform .12s, background .2s; }
.mults button.active { box-shadow: 0 0 16px rgba(var(--aura2-rgb), .55); transform: translateY(-2px); }

.wheel { transition: transform .6s var(--ease-out); }
.wheel .w-aura { position: absolute; inset: -14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--aura2-rgb), .16), transparent 68%); opacity: .6; transition: opacity .4s; }
.w-track { stroke: #1d1b26; stroke-width: 18; }
.w-arc { stroke: url(#upGrad); stroke-width: 18; }
.w-arc-glow { fill: none; stroke: var(--aura2); stroke-width: 26; opacity: .35; filter: blur(6px); }
.w-needle i { border-top-color: #fff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)) drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.wheel.count .w-center b { animation: countPop .33s ease-out; }
@keyframes countPop { 0% { transform: scale(1.8); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); } }
.wheel.spinning .w-aura { opacity: 1; animation: auraSpin 1s ease-in-out infinite; }
@keyframes auraSpin { 50% { transform: scale(1.06); } }
.wheel.slowmo { transform: scale(1.07); }
#page-upgrade.up-live::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 0; pointer-events: none; animation: fadeIn .4s; }
#page-upgrade.up-live .wheel { position: relative; z-index: 1; }
@keyframes fadeIn { from { opacity: 0; } }
.wheel.win .w-arc, .wheel.win .w-arc-glow { stroke: #2ecc71; }
.wheel.win .w-center b { color: #2ecc71; text-shadow: 0 0 24px rgba(46, 204, 113, .8); letter-spacing: 1px; }
.w-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.w-burst i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; opacity: 0; }
.w-burst.win i { background: #2ecc71; box-shadow: 0 0 10px #2ecc71; animation: burst .9s ease-out forwards; }
.w-burst.lose i { background: #ff4d6d; width: 6px; height: 6px; animation: burst .7s ease-out forwards; }
@keyframes burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1.2); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.4); } }
.odds-toggle { grid-column: 1 / -1; justify-self: end; padding: 5px 12px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700; }

/* 🧹 обнуление аккаунта */
.reset-link { display: block; margin: 22px auto 6px; background: none; border: 0; color: var(--muted, #8a8f9c); font-size: 13px; opacity: .75; text-decoration: underline; cursor: pointer; }
.reset-warn { background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .35); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 12px; font-size: 14px; line-height: 1.45; }
.reset-warn ul { margin: 6px 0 8px; padding-left: 18px; }
.btn-danger { background: var(--lose); color: #fff; }
.btn-danger:disabled { opacity: .4; }

/* 👑 VIP: рамка у аватара */
.vip-ring { box-shadow: 0 0 0 2px var(--vip), 0 0 12px -2px var(--vip); }
.vip-card { margin: 0 0 14px; }
.vip-card:empty { display: none; }
.vip-inner { width: 100%; text-align: left; display: block; padding: 14px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--vip) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--vip) 16%, var(--surface)), var(--surface)); color: var(--text); cursor: pointer; }
.vip-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vip-badge { font-weight: 800; color: var(--vip); white-space: nowrap; }
.vip-bar { height: 6px; border-radius: var(--r-xs); background: var(--surface-2); overflow: hidden; margin: 10px 0 4px; }
.vip-bar i { display: block; height: 100%; border-radius: var(--r-xs); }
.vip-cb { margin-top: 8px; font-size: 13px; line-height: 1.4; }
.vip-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); margin-bottom: 8px; border: 1px solid transparent; }
.vip-row.cur { border-color: var(--vip); }
.vip-row .vip-badge { min-width: 104px; }
.vip-perks { font-size: 13px; line-height: 1.35; }
.vip-perks small { color: var(--muted); }

/* 👥 друзья */
.fr-hint { margin: -4px 0 8px; }
.fr-item { width: 100%; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.fr-item .ref-ava { position: relative; }
.fr-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid var(--surface); }
.fr-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.fr-ava { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 800; font-size: 22px; flex: none; }
.fr-name { font-size: 18px; font-weight: 800; }
.fr-stats { margin-bottom: 12px; }
.fr-stats .v { font-size: 15px; }
.fr-h2h { text-align: center; margin: 4px 0 12px; font-size: 14px; }

/* ⚔️ вызовы на битву */
.bt-friend { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(var(--aura2-rgb), .12); border: 1px solid rgba(var(--aura2-rgb), .35); font-size: 13px; margin-bottom: 4px; }
.bt-friend .icon-btn { flex: none; }
.bt-row.for-me { border: 1px solid rgba(34, 197, 94, .5); background: color-mix(in srgb, #22c55e 8%, var(--surface)); }
.bt-btns { display: flex; gap: 6px; flex: none; }
.bt-invite { border: 1px solid rgba(34, 197, 94, .5); margin-bottom: 14px; }
.bt-inv-title { font-size: 16px; margin-bottom: 6px; }
.bt-inv-sub { margin-bottom: 12px; line-height: 1.45; }
#btWho { margin-bottom: 4px; }

/* 🎃 сезонные плашки */
.promo-soon { cursor: default; }


/* 💎 NFT в рулетке: золотая плитка с лентой «NFT» — не путается с обычным подарком той же картинки */
.bt-tile.is-nft { --tile: #f59e0b;
  background: radial-gradient(80% 75% at 50% 38%, #ffe7a3, transparent 75%), linear-gradient(160deg, #fbbf24, #b45309 90%); }
.bt-tile.is-nft::after { box-shadow: inset 0 0 0 1.5px rgba(255, 236, 170, .75), inset 0 1px 0 rgba(255, 255, 255, .45); }
.nft-rib { position: absolute; top: 9px; right: -20px; z-index: 2; width: 70px; transform: rotate(45deg); text-align: center;
  font-size: 9px; font-weight: 900; letter-spacing: .08em; color: #fff; background: #16a34a; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); padding: 1px 0; }
.roulettes.compact .nft-rib { top: 6px; right: -22px; font-size: 7.5px; }
.bt-tile .nft-rib { top: 7px; right: -22px; font-size: 7.5px; }
.bt-tile.is-nft { overflow: hidden; }
/* кнопки в окнах: текст не вылезает за край */
.result-actions .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 10px; padding-right: 10px; min-width: 0; }
.gate-top span { min-width: 0; }
.result-actions .btn.full { flex-basis: 100%; }

.rk-cap { font-size: 11px; color: var(--muted); line-height: 1.35; padding: 2px 2px 0; }
.tg-star { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; }
.emoji > .tg-star, .wt-ico > .tg-star, .rc-ico > .tg-star { width: 1.1em; height: 1.1em; }

/* =====================================================================
   ✨ AURA — игровая тема поверх базовой: фон-аврора, свечение карточек, золото на действиях,
   док-навигация с «орбом» Ауры в центре. Цвета — только через --aura1 / --aura2 (см. :root).
   ===================================================================== */
html, body { background: var(--bg); }
body { position: relative; }

/* фон-аврора: три мягких световых пятна за всем интерфейсом (медленно дышат; без движения — если так настроено в системе) */
.aurora { position: fixed; inset: -20vh -20vw; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(60% 40% at 50% -5%, rgba(var(--aura1-rgb), .30), transparent 70%), var(--bg); }
/* ⚡ этап 9: мягкие пятна — радиальным градиентом вместо размытия фильтром (оно перерисовывалось каждый кадр: 27 → 60 кадров/с) */
.aurora { will-change: transform; transform: translateZ(0); contain: strict; }   /* один слой на всё сияние: анимации поверх его не перерисовывают */
.aurora i { position: absolute; border-radius: 50%; opacity: .55; background: radial-gradient(closest-side, var(--c), transparent); }
.aurora i:nth-child(1) { width: 100vw; height: 66vh; left: -15vw; top: -6vh; --c: rgba(var(--aura1-rgb), .55); animation: auroraA 26s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 80vw; height: 52vh; right: -8vw; top: 22vh; --c: rgba(88, 212, 255, .22); animation: auroraB 32s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 86vw; height: 50vh; left: 8vw; bottom: -2vh; --c: rgba(var(--aura2-rgb), .20); animation: auroraA 38s ease-in-out infinite alternate-reverse; }
/* 🎚 минимум и средние эффекты: сияние — готовая картинка 1 КБ (перерисовка не нужна; 25 → 55–60 кадров/с при замедлении ×4) */
html[data-fxq="0"] .aurora, html[data-fxq="1"] .aurora, html.saver .aurora { display: none; }
html[data-fxq="0"] body, html[data-fxq="1"] body, html.saver body { background: var(--bg) url(aurora.webp) center top / 100% 100vh no-repeat; }
html[data-fxq="0"][data-theme="halloween"] body, html[data-fxq="1"][data-theme="halloween"] body { background-image: url(aurora_halloween.webp); }
html[data-fxq="0"][data-theme="newyear"] body, html[data-fxq="1"][data-theme="newyear"] body { background-image: url(aurora_newyear.webp); }
@keyframes auroraA { to { transform: translate(14vw, 6vh) scale(1.15) rotate(8deg); } }
@keyframes auroraB { to { transform: translate(-16vw, -8vh) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } .farm-orb, .farm-orb.full { animation: none !important; } }

/* шрифт игры: Unbounded — заголовки, цифры баланса и ауры */
.page-title, .splash-name, .top-bal b, .farm-core b, .modal-title, .result-card .title, .w-center b, .rk-center b,
.ac-end b, .wd-daily-top b, .tile b { font-family: var(--display); letter-spacing: -.01em; }
.page-title { font-weight: 800; font-size: 24px; }
.sub-title { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--muted); }

/* верхняя панель: стекло поверх авроры */
.topbar { background: var(--bar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top-bal b { display: inline-flex; align-items: center; gap: 6px; }
.bal-coin .tg-star { width: 20px; height: 20px; vertical-align: 0; }

/* карточки светятся по краю фиолетовым */
.card, .tile, .list, .task, .row-link, .game, .glass, .farm-up, .aura-card, .wd-daily {
  border: 1px solid rgba(var(--aura1-rgb), .16); box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .04); }
.tile, .list, .task, .card { background: linear-gradient(180deg, rgba(var(--aura1-rgb), .07), transparent 60%), var(--surface); }

/* кнопки: золото — главное действие, фиолет — второе */
.btn-accent, .btn-success, .btn-gold, .pill-accent, .coach-next, .mults button.active, .item .act.buy, .top-dep {
  background: linear-gradient(180deg, #ffe49a, var(--aura2) 55%, #d99a2b); color: #2a1700;
  box-shadow: 0 8px 22px -10px rgba(var(--aura2-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn-primary, .btn-tg { background: linear-gradient(180deg, #b48aff, var(--aura1) 60%, #6d32e0); color: #fff;
  box-shadow: 0 8px 22px -10px rgba(var(--aura1-rgb), .95), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-ghost { background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(var(--aura1-rgb), .2); }
.btn:focus-visible, .tab:focus-visible, .row:focus-visible, .aura-card:focus-visible { outline: 2px solid var(--aura2); outline-offset: 2px; }
.pill-accent:disabled { background: var(--surface-2); color: var(--muted); box-shadow: none; }

/* окна */
.sheet, .result-card { background: linear-gradient(180deg, rgba(var(--aura1-rgb), .12), transparent 40%), var(--surface); border: 1px solid rgba(var(--aura1-rgb), .22); }
.modal { background: rgba(6, 3, 18, .7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* заставка: монета-кольцо */
.splash { background: radial-gradient(60% 45% at 50% 40%, rgba(var(--aura1-rgb), .35), transparent 70%), var(--bg); }
.splash-aura { width: 84px; height: 84px; border-radius: 50%; font-size: 0;
  background: radial-gradient(circle, #3b2373 52%, transparent 53%), conic-gradient(from 0deg, var(--aura2), #fff3c4, var(--aura1), var(--aura2));
  box-shadow: 0 0 40px rgba(var(--aura1-rgb), .8), 0 0 80px rgba(var(--aura2-rgb), .25); }

/* ===== док-навигация: 6 разделов, Аура — светящийся орб в центре ===== */
.tabbar { left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 6px; border-radius: 24px;
  background: var(--bar-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--aura1-rgb), .25); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8), 0 0 30px -12px rgba(var(--aura1-rgb), .7); }
.tab { font-size: 10px; max-width: 88px; height: 54px; gap: 2px; }
.tab.active { color: var(--aura2); }
.tab.active::after { background: var(--aura2); box-shadow: 0 0 10px var(--aura2); bottom: 2px; }
.toast { bottom: calc(var(--tabbar-h) + 34px); }
.sel-bar { bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px)); left: 10px; right: 10px; border-radius: var(--radius); border: 1px solid var(--line); }

/* ===== главная: хранилище ауры ===== */
.aura-card { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: var(--radius); text-align: left;
  background: radial-gradient(120% 140% at 0% 50%, rgba(var(--aura1-rgb), .30), transparent 60%), var(--surface); }
.ac-ring { width: 44px; height: 44px; flex: none; transform: rotate(-90deg); }
.ac-track { fill: none; stroke: rgba(var(--aura1-rgb), .25); stroke-width: 5; }
.ac-fill { fill: none; stroke: var(--aura2); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset .8s ease; filter: drop-shadow(0 0 4px rgba(var(--aura2-rgb), .8)); }
.ac-text { flex: 1; min-width: 0; }
.ac-text b { display: block; font-size: 15px; }
.ac-text small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.ac-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ac-end b { font-size: 12px; color: var(--aura2); white-space: nowrap; }
.aura-card:not(.ready) .pill-accent { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.aura-card.ready { box-shadow: 0 0 0 1px rgba(var(--aura2-rgb), .45), 0 0 26px -6px rgba(var(--aura2-rgb), .55); }

/* 🎁 до первого вывода */
.wd-daily { width: 100%; display: block; margin-top: 10px; padding: 12px 14px; border-radius: var(--radius); text-align: left; background: var(--surface); }
.wd-daily-top { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.wd-daily-top b { color: var(--aura2); font-size: 15px; }
.wd-daily-dots { display: flex; gap: 6px; margin: 9px 0 7px; }
.wd-daily-dots i { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--surface-2); }
.wd-daily-dots i.done { background: linear-gradient(90deg, var(--aura1), var(--aura2)); box-shadow: 0 0 8px rgba(var(--aura2-rgb), .5); }
.wd-daily-dots i.next { box-shadow: inset 0 0 0 1.5px rgba(var(--aura2-rgb), .8); }
.wd-daily small { color: var(--muted); font-size: 12px; }

/* ===== ✨ страница «Аура» ===== */
.farm-orb { position: relative; width: min(72vw, 260px); aspect-ratio: 1; margin: 6px auto 0; display: grid; place-items: center;
  border-radius: 50%; animation: orbIdle 4s ease-in-out infinite; }
.farm-orb > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.farm-track { fill: none; stroke: rgba(var(--aura1-rgb), .22); stroke-width: 12; }
.farm-ring { fill: none; stroke: url(#farmGold); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset .9s ease; filter: drop-shadow(0 0 8px rgba(var(--aura2-rgb), .75)); }
.farm-core { position: relative; text-align: center; }
.farm-core b { display: block; font-size: 44px; font-weight: 800; color: #fff6d6; text-shadow: 0 0 24px rgba(var(--aura2-rgb), .6); font-variant-numeric: tabular-nums; }
.farm-core small { color: var(--muted); font-size: 13px; }
@keyframes orbIdle { 50% { box-shadow: 0 0 60px -6px rgba(var(--aura1-rgb), .55); } }
.farm-orb.full { animation: orbFull 1.6s ease-in-out infinite; }
@keyframes orbFull { 50% { box-shadow: 0 0 70px 0 rgba(var(--aura2-rgb), .55); } }
.farm-orb.burst { animation: orbBurst .7s ease-out; }
@keyframes orbBurst { 0% { transform: scale(1); } 30% { transform: scale(1.06); box-shadow: 0 0 90px 10px rgba(var(--aura2-rgb), .8); } 100% { transform: scale(1); } }
.farm-when { text-align: center; color: var(--muted); margin: 12px 0 0; font-size: 14px; }
.farm-claim { font-size: 17px; padding: 16px; }
.farm-ups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.farm-up { padding: 14px; border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.fu-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.fu-lvl { display: flex; gap: 3px; }
.fu-lvl i { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(var(--aura1-rgb), .4); }
.fu-lvl i.on { background: var(--aura2); box-shadow: 0 0 6px rgba(var(--aura2-rgb), .8); }
.fu-val { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.fu-val b { color: var(--text); }
.fu-arrow { color: var(--aura2); }
.fu-btn { padding: 10px 8px; font-size: 13px; margin-top: auto; }
.farm-up small { font-size: 11px; }
@media (max-width: 340px) { .farm-ups { grid-template-columns: 1fr; } }

/* задания: тип партнёра подписью */
.task-type { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); font-size: 10px; font-weight: 600;
  color: var(--muted); background: var(--surface-2); vertical-align: 1px; }
.task.t-channel { box-shadow: var(--glow), inset 3px 0 0 var(--aura2); }

/* монета Ауры в тексте и на обложках */
.aura-coin { filter: drop-shadow(0 0 3px rgba(var(--aura1-rgb), .6)); }
body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 40px); }
.btn-accent:disabled, .btn-primary:disabled { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px rgba(var(--aura1-rgb), .2); opacity: 1; }
.fu-btn { white-space: nowrap; font-size: 12px; padding: 10px 6px; }
.farm-ring.empty, .ac-fill.empty { stroke-opacity: 0; }
/* 🪙 монета Ауры: золотое сияние вместо фиолетового */
.aura-coin { filter: drop-shadow(0 0 2px rgba(var(--aura2-rgb), .55)); }
.splash-aura { background: none; box-shadow: none; width: 96px; height: 96px; animation: coinSpin 2.4s ease-in-out infinite; }
.splash-aura .tg-star { width: 96px; height: 96px; filter: drop-shadow(0 0 22px rgba(var(--aura2-rgb), .7)); }
@keyframes coinSpin { 50% { transform: rotateY(180deg) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .splash-aura { animation: none; } }

/* ===== econ_v5 / правки: монета, нижнее меню ===== */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.coin-i { display: inline-flex; vertical-align: -.16em; width: 1.05em; height: 1.05em; }
.coin-i .tg-star { width: 100%; height: 100%; vertical-align: 0; }
.tg-star use { pointer-events: none; }

/* нижнее меню — прижато к самому низу экрана, без зазора; под ним ничего не видно */
.tabbar { left: 0; right: 0; bottom: 0; border-radius: 22px 22px 0 0; border: 0; border-top: 1px solid rgba(var(--aura1-rgb), .28);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(14, 9, 34, .97);
  box-shadow: 0 -12px 30px -12px rgba(var(--aura1-rgb), .55); }
:root { --tabbar-h: 66px; }
body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px); }
.sel-bar { left: 0; right: 0; border-radius: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
.toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); }

/* 📣 задание «Выложи пост» */
.share-task { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.share-task .btn { padding: 8px 12px; font-size: 13px; }

/* ===== 👆 тапалка ===== */
.tap-box { padding: 14px 14px 10px; border-radius: var(--radius); background: var(--surface); margin-bottom: 6px;
  box-shadow: inset 0 0 0 1px rgba(var(--aura1-rgb), .18); }
.tap-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.tap-top b { color: var(--text); font-size: 18px; font-variant-numeric: tabular-nums; }
.tap-top small { font-size: 12px; margin-left: 2px; }
.tap-bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); margin: 8px 0 4px; overflow: hidden; }
.tap-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--aura1), var(--aura2));
  transition: width .25s ease; }
.tap-stage { position: relative; display: grid; place-items: center; padding: 10px 0 4px; }
.tap-coin { width: min(58vw, 210px); aspect-ratio: 1; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  filter: drop-shadow(0 0 26px rgba(var(--aura2-rgb), .45)); transition: transform .08s ease, filter .2s; }
.tap-coin svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.tap-coin.press { transform: scale(.94); }
.tap-coin.off { filter: grayscale(.85) brightness(.6); cursor: default; }
.tap-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tap-fx span { position: absolute; font-weight: 800; font-size: 20px; color: #fff3c4; text-shadow: 0 0 10px rgba(var(--aura2-rgb), .9);
  animation: tapUp .8s ease-out forwards; transform: translate(-50%, -50%); }
@keyframes tapUp { to { opacity: 0; transform: translate(-50%, -150%); } }
.tap-hint { text-align: center; color: var(--muted); font-size: 13px; margin: 6px 0 0; min-height: 18px; }
.tap-check { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--radius); background: rgba(12, 9, 32, .92); backdrop-filter: blur(4px); text-align: center; padding: 10px; }
.tap-check b { font-size: 16px; }
.tap-check b span { font-size: 22px; }
.tap-check small { color: var(--muted); font-size: 12px; }
.tap-check-grid { display: grid; grid-template-columns: repeat(2, 64px); gap: 10px; }
.tap-check-grid button { width: 64px; height: 64px; border-radius: var(--r-lg); border: 0; font-size: 30px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(var(--aura1-rgb), .35); cursor: pointer; }
.tap-check-grid button:active { transform: scale(.94); }
#page-farm .farm-orb { width: min(52vw, 190px); }
#page-farm .farm-core b { font-size: 34px; }

/* ===== ⬆️ апгрейд v2: колесо сверху, ставка под ним, кнопка всегда под рукой ===== */
#page-upgrade .wheel { width: min(64vw, 236px); margin: 8px auto 14px; }
.wheel .w-center { display: flex; flex-direction: column; align-items: center; }
.wheel .w-win { font-style: normal; font-size: 12px; color: var(--aura2); margin-top: 4px; font-weight: 700; min-height: 15px;
  font-variant-numeric: tabular-nums; }
.wheel #upChance { font-variant-numeric: tabular-nums; }
.up-card { padding-top: 12px; }
.up-card .up-slots { margin-bottom: 10px; }
.up-cta { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px); z-index: 5; margin-top: 12px;
  padding: 10px; border-radius: var(--radius); background: rgba(12, 9, 32, .88); backdrop-filter: blur(10px);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(var(--aura1-rgb), .2); }
.up-sum { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); margin: 0 4px 8px; }
.up-sum b { color: var(--text); font-variant-numeric: tabular-nums; }
.up-sum .gain { color: var(--aura2); }
.up-cta .btn { margin: 0; }
#page-upgrade .mults button.active { box-shadow: inset 0 0 0 1.5px var(--aura2), 0 0 12px rgba(var(--aura2-rgb), .35); }
.spin-actions:has(#demoBtn:not(.hidden)) { grid-template-columns: .95fr 1fr 1.5fr; max-width: 360px; }
#demoBtn { padding-left: 6px; padding-right: 6px; white-space: nowrap; }

/* ===== общий каркас «банк + таймер» (лига крепостей; розыгрыш дня закрыт на этапе 13) ===== */
.rf-hero { text-align: center; padding: 20px 14px 16px; border-radius: var(--radius); margin-bottom: 10px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(var(--aura2-rgb), .28), transparent 60%), var(--surface);
  box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .25); }
.rf-pool { display: block; font-size: 40px; font-weight: 800; color: #fff3c4; text-shadow: 0 0 24px rgba(var(--aura2-rgb), .55);
  font-variant-numeric: tabular-nums; margin: 2px 0 10px; }
.rf-hero > small { color: var(--muted); }
.rf-timer { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 14px; border-radius: var(--r-pill); background: var(--surface-2); }
.rf-timer span { color: var(--muted); font-size: 12px; }
.rf-timer b { font-variant-numeric: tabular-nums; font-size: 18px; }
.rf-stats { display: flex; justify-content: center; gap: 18px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.rf-stats b { color: var(--text); }
.rf-stats i { font-style: normal; }

/* ===== 🏰 крепость ауры ===== */
.ft-bar { padding: 12px 14px; border-radius: var(--radius); background: var(--surface); margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.ft-res { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.ft-res b { font-variant-numeric: tabular-nums; font-size: 18px; }
.ft-res small { color: var(--muted); font-size: 12px; }
.ft-meter { display: block; height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.ft-meter > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6ad7ff, var(--aura1)); border-radius: inherit; transition: width .4s; }
.ft-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ft-chip { padding: 5px 10px; border-radius: var(--r-pill); background: var(--surface-2); font-size: 13px; }
.ft-chip small { color: var(--muted); margin-left: 4px; font-size: 11px; }
.ft-map { position: relative; display: grid; grid-template-columns: 1fr 1.25fr 1fr; grid-template-areas: "tower core mine" "vault core wall";
  gap: 10px; padding: 18px 14px; border-radius: 22px; margin-bottom: 10px;
  background: radial-gradient(60% 70% at 50% 50%, rgba(var(--aura1-rgb), .35), transparent 70%),
              repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.03) 0 2px, transparent 2px 22px), #120b2b;
  box-shadow: inset 0 0 0 2px rgba(var(--aura2-rgb), .18), inset 0 0 40px rgba(0,0,0,.5); }
.ft-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 104px;
  padding: 10px 4px; border: 0; border-radius: var(--radius); color: var(--text); cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ft-tile .e { font-size: 38px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.ft-tile b { font-size: 13px; }
.ft-tile .lv { position: absolute; top: 6px; right: 6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--r-pill); display: grid; place-items: center;
  font-size: 12px; font-weight: 800; background: linear-gradient(135deg, #fff0b8, #f5c451); color: #2a1a00; }
.ft-tile small { color: var(--muted); font-size: 11px; text-align: center; }
.ft-tile.core { grid-area: core; min-height: 218px; background: radial-gradient(circle at 50% 40%, rgba(var(--aura2-rgb), .25), rgba(255,255,255,.03) 70%);
  box-shadow: inset 0 0 0 1.5px rgba(var(--aura2-rgb), .45), 0 0 30px -6px rgba(var(--aura2-rgb), .45); }
.ft-tile.core .e { font-size: 64px; animation: orbIdle 4s ease-in-out infinite; border-radius: 50%; } .ft-tile.mine { grid-area: mine; }
.ft-tile.up::after { content: "⬆"; position: absolute; top: 6px; left: 8px; color: #6ff0a0; font-weight: 900; animation: rfPulse 1.2s infinite; }
.ft-tile.building { box-shadow: inset 0 0 0 2px #6ad7ff; }
.ft-tile.building .e { animation: ftHammer .6s ease-in-out infinite alternate; }
@keyframes ftHammer { to { transform: rotate(-8deg) translateY(-2px); } }
.ft-build { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: rgba(106, 215, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(106, 215, 255, .35); margin-bottom: 10px; }
.ft-build .t { flex: 1; font-size: 14px; }
.ft-build .t small { display: block; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ft-build .btn { padding: 9px 10px; font-size: 13px; white-space: nowrap; }
.ft-stats { display: flex; justify-content: space-around; color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.ft-stats b { color: var(--text); }
.ft-log, .ft-list { display: flex; flex-direction: column; gap: 6px; }
.ft-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); font-size: 13px; }
.ft-row .grow { flex: 1; min-width: 0; }
.ft-row .grow small { display: block; color: var(--muted); font-size: 11px; }
.ft-row .pos { color: #6ff0a0; font-weight: 700; } .ft-row .neg { color: #ff7a8a; font-weight: 700; }
.ft-row.me { box-shadow: inset 0 0 0 1.5px var(--aura2); }
.ft-target { padding: 12px; border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.ft-target.revenge { box-shadow: inset 0 0 0 1.5px #ff7a8a; }
.ft-tg-top { display: flex; align-items: center; gap: 10px; }
.ft-tg-top .e { font-size: 30px; }
.ft-tg-top .grow { flex: 1; }
.ft-tg-top small { color: var(--muted); font-size: 12px; display: block; }
.ft-chance { height: 8px; border-radius: var(--r-pill); background: rgba(255, 122, 138, .3); overflow: hidden; }
.ft-chance i { display: block; height: 100%; background: linear-gradient(90deg, #6ff0a0, #3ccf7c); }
.ft-tg-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.ft-tg-meta b { color: var(--text); }
.ft-battle { text-align: center; padding: 6px 0 4px; }
.ft-sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 10px 0 14px; }
.ft-side .e { font-size: 44px; }
.ft-side b { display: block; font-size: 14px; }
.ft-side small { color: var(--muted); font-size: 12px; }
.ft-vs { font-weight: 900; color: var(--aura2); font-size: 20px; }
.ft-clash { height: 14px; border-radius: var(--r-pill); background: rgba(255, 122, 138, .35); overflow: hidden; position: relative; }
.ft-clash i { position: absolute; inset: 0 auto 0 0; width: 50%; background: linear-gradient(90deg, #6ff0a0, #3ccf7c); transition: width .25s ease; }
.ft-stars { font-size: 34px; letter-spacing: 4px; margin: 12px 0 4px; }
.ft-stars .off { opacity: .2; filter: grayscale(1); }
.ft-side.shake { animation: ftShake .3s linear infinite; }
@keyframes ftShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.ft-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius); background: var(--surface); }
.ft-form input { width: 100%; }
.ft-emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-emojis button { width: 40px; height: 40px; border-radius: 10px; border: 0; font-size: 22px; background: var(--surface-2); }
.ft-emojis button.active { box-shadow: inset 0 0 0 2px var(--aura2); }
.ft-clan-head { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); margin-bottom: 10px;
  background: linear-gradient(120deg, rgba(var(--aura1-rgb), .3), transparent), var(--surface); }
.ft-clan-head .e { font-size: 40px; }
.ft-clan-head .grow { flex: 1; }
.ft-clan-head small { display: block; color: var(--muted); font-size: 12px; }
.ft-bmodal { text-align: center; }
.ft-bmodal .e { font-size: 64px; }
.ft-bmodal .eff { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 14px 0; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: 13px; }
.ft-bmodal .eff b { display: block; font-size: 14px; }
.ft-bmodal .cost { color: var(--muted); font-size: 13px; margin-bottom: 10px; }

/* ===== ⚔️ АРЕНА ===== */
.tab-arena span { position: relative; }
.tab-arena .ic { color: var(--aura2); filter: drop-shadow(0 0 6px rgba(var(--aura2-rgb), .7)); }
.tab-arena { color: var(--aura2) !important; font-weight: 700; }
.tab-arena.active .ic { animation: arTabPulse 1.8s ease-in-out infinite; }
@keyframes arTabPulse { 50% { transform: scale(1.15) rotate(-6deg); } }

/* герой на главной */
.home-arena { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 16px; margin-bottom: 12px;
  border: 0; border-radius: 22px; overflow: hidden; color: #fff; text-align: left; cursor: pointer; isolation: isolate;
  background: linear-gradient(135deg, #3b1d8f 0%, #6a2bd1 45%, #d9822b 120%);
  box-shadow: 0 14px 34px -14px rgba(var(--aura1-rgb), .9), inset 0 0 0 1.5px rgba(var(--aura2-rgb), .55); }
.ha-bg { position: absolute; inset: 0; z-index: -1; opacity: .55;
  background: radial-gradient(120px 120px at 85% 20%, rgba(255, 220, 120, .55), transparent 70%),
              repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px); }
.home-arena::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); animation: haShine 3.6s ease-in-out infinite; }
@keyframes haShine { 0%, 40% { left: -60%; } 100% { left: 130%; } }
.ha-top { display: flex; align-items: center; gap: 12px; }
.ha-emblem { font-size: 40px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.ha-text { flex: 1; display: flex; flex-direction: column; }
.ha-text b { font-size: 22px; letter-spacing: .5px; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.ha-text small { opacity: .85; font-size: 12px; }
.ha-tr { padding: 6px 10px; border-radius: var(--r-pill); background: rgba(0,0,0,.28); font-size: 14px; }
.ha-chests { display: flex; gap: 6px; min-height: 0; }
.ha-chests span { padding: 3px 8px; border-radius: var(--r-pill); background: rgba(0,0,0,.25); font-size: 12px; }
.ha-btn { align-self: stretch; text-align: center; padding: 13px; border-radius: var(--r-md); font-weight: 900; font-size: 18px; letter-spacing: 1px;
  color: #2a1700; background: linear-gradient(180deg, #ffe58a, #f5b73b); box-shadow: 0 5px 0 #b97a12, 0 10px 20px -6px rgba(245, 183, 59, .8); }

/* шапка арены */
.ar-hero { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px; align-items: center; padding: 12px 14px; margin-bottom: 8px;
  border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(140% 120% at 0% 0%, #4b23a8, #1b0f45 70%); box-shadow: inset 0 0 0 1.5px rgba(var(--aura2-rgb), .35); }
.ar-hero-bg { position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: radial-gradient(160px 90px at 90% 0%, rgba(245, 196, 81, .45), transparent 70%),
              repeating-radial-gradient(circle at 20% 120%, rgba(255,255,255,.05) 0 2px, transparent 2px 18px); }
.ar-emblem { font-size: 36px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); border-radius: 50%; }
.ar-tr { display: flex; align-items: center; gap: 4px; font-size: 15px; }
.ar-tr b { font-variant-numeric: tabular-nums; color: #ffe08a; }
.ar-prog { grid-column: 1 / -1; height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); overflow: hidden; }
.ar-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--aura1), var(--aura2)); transition: width .5s; }
.seg5 { grid-template-columns: repeat(5, 1fr); }
.seg5 button { padding: 9px 0; font-size: 12px; }

/* лобби */
/* overflow:hidden только у glow-слоя — иначе длинные «УРОК N ИЗ M» / подписи обрезались (P2 audit cut) */
.ar-fight { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 14px 16px 12px; border: 0;
  border-radius: 20px; cursor: pointer; overflow: visible; color: #2a1700;
  background: linear-gradient(180deg, #ffe58a 0%, #f5b73b 60%, #e0901a 100%); box-shadow: 0 6px 0 #a96a0d, 0 16px 30px -10px rgba(245, 183, 59, .85); }
.ar-fight b, .ar-fight small { position: relative; z-index: 1; max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.ar-fight b { font-size: clamp(16px, 5.2vw, 22px); font-weight: 900; letter-spacing: .04em; line-height: 1.15; }
.ar-fight small { font-size: 12px; font-weight: 600; opacity: .75; line-height: 1.25; padding: 0 2px; }
.ar-fight:active { transform: translateY(4px); box-shadow: 0 2px 0 #a96a0d; }
.ar-fight-glow { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.ar-fight-glow::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.35), transparent 30%);
  animation: arSpin 4s linear infinite; }
@keyframes arSpin { to { transform: rotate(360deg); } }
.ar-duel, .ar-week { margin-top: 6px; min-height: 44px; background: var(--surface); }
.ar-row2 { display: flex; gap: 8px; } .ar-row2 > .btn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ar-row2 > .hidden { display: none; }
.ar-chests { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 10px; }
.ar-chest { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; gap: 4px; min-height: 84px; padding: 8px 4px;
  border-radius: var(--r-lg); border: 0; color: var(--text); cursor: pointer; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ar-chest .e { font-size: 32px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.ar-chest small { text-align: center; line-height: 1.2; font-size: 12px; font-weight: 700; color: var(--text); }
.ar-chest.ar-empty { background: transparent; border: 1.5px dashed rgba(255,255,255,.14); cursor: default; }
.ar-chest.unlocking { box-shadow: inset 0 0 0 1.5px #6ad7ff; }
.ar-chest.ready { box-shadow: inset 0 0 0 2px var(--aura2), 0 0 18px -4px rgba(var(--aura2-rgb), .8); }
.ar-chest.ready .e { animation: arBounce .9s ease-in-out infinite; }
@keyframes arBounce { 50% { transform: translateY(-5px) rotate(-6deg); } }

/* карты */
.ar-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 8px; border-radius: var(--r-lg); border: 0;
  color: #fff; cursor: pointer; min-height: 128px; overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 8px 16px -8px rgba(0,0,0,.6); }
.ar-card.power { background: linear-gradient(160deg, #ff8a5c, #c2352b); }
.ar-card.agile { background: linear-gradient(160deg, #4fe3a8, #13856b); }
.ar-card.magic { background: linear-gradient(160deg, #a88bff, #5130c9); }
.ar-card .e { font-size: 40px; line-height: 1.1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.ar-card .nm { font-size: 12px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.4); text-align: center; }
.ar-card .pw { font-size: 13px; font-weight: 900; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(0,0,0,.28); }
.ar-card .lv { position: absolute; top: 6px; left: 6px; font-size: 10px; font-weight: 900; padding: 2px 6px; border-radius: var(--r-pill); background: rgba(0,0,0,.35); }
.ar-card .cl { position: absolute; top: 5px; right: 6px; font-size: 13px; }
.ar-card.locked { filter: grayscale(1) brightness(.5); cursor: default; }

/* экран боя */
.ar-screen { position: fixed; inset: 0; z-index: var(--z-modal-top); display: grid; grid-template-rows: auto 1fr auto auto; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 12px); color: #fff; background: #0e0826; }
.ar-field { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(200, 60, 80, .25), transparent 35%, transparent 65%, rgba(60, 120, 255, .28)),
              radial-gradient(60% 40% at 50% 50%, rgba(var(--aura1-rgb), .35), transparent 70%),
              repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px), #120a30; }
.ar-field::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: linear-gradient(90deg, transparent, rgba(106, 215, 255, .6), transparent); }
.ar-side { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-lg); background: rgba(0,0,0,.35); }
.ar-side .av { width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 24px; background: rgba(255,255,255,.1); }
.ar-side .grow { flex: 1; min-width: 0; }
.ar-side .grow b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-side .grow small { color: rgba(255,255,255,.65); font-size: 12px; }
.ar-crowns { font-size: 20px; letter-spacing: 2px; }
.ar-crowns .off { opacity: .2; filter: grayscale(1); }
.ar-side.op { box-shadow: inset 0 0 0 1.5px rgba(255, 110, 130, .5); }
.ar-side.me { box-shadow: inset 0 0 0 1.5px rgba(106, 215, 255, .5); }
.ar-mid { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.ar-round { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ar-timer { position: relative; width: 74px; height: 74px; }
.ar-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ar-timer circle { fill: none; stroke-width: 6; }
.ar-timer .tk { stroke: rgba(255,255,255,.12); }
.ar-timer .tv { stroke: var(--aura2); stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset 1s linear; }
.ar-timer b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; font-weight: 900; }
.ar-timer.hurry .tv { stroke: #ff6b7d; } .ar-timer.hurry b { color: #ff6b7d; animation: rfPulse .5s infinite; }
.ar-board { display: flex; align-items: center; gap: 14px; }
.ar-slot { width: 96px; min-height: 128px; border-radius: var(--r-lg); border: 2px dashed rgba(255,255,255,.18); display: grid; place-items: center;
  color: rgba(255,255,255,.5); font-size: 12px; text-align: center; padding: 6px; }
.ar-slot .ar-card { width: 100%; cursor: default; }
.ar-vs { font-weight: 900; font-size: 22px; color: var(--aura2); text-shadow: 0 0 14px rgba(var(--aura2-rgb), .8); }
.ar-slot.win .ar-card { box-shadow: 0 0 0 3px #ffe08a, 0 0 30px rgba(255, 224, 138, .8); transform: scale(1.06); }
.ar-slot.lose .ar-card { filter: grayscale(.7) brightness(.6); transform: scale(.94); }
.ar-slot .ar-card { transition: transform .35s, filter .35s, box-shadow .35s; }
@keyframes arDrop { from { transform: translateY(40px) scale(.6); opacity: 0; } }
.ar-msg { min-height: 20px; font-size: 14px; color: rgba(255,255,255,.85); text-align: center; }
.ar-hand { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ar-hand .ar-card:active { transform: scale(.95); }
.ar-hand.done .ar-card { opacity: .45; pointer-events: none; }
.ar-hand .ar-card .hint-x { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 9px; opacity: .9; }
.ar-over { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px;
  text-align: center; background: rgba(8, 4, 24, .9); backdrop-filter: blur(6px); }
.ar-over h2 { font-size: 40px; font-weight: 900; letter-spacing: 2px; margin: 0; }
.ar-over.win h2 { color: #ffe08a; text-shadow: 0 0 30px rgba(255, 224, 138, .8); }
.ar-over.lose h2 { color: #ff8a9a; }
.ar-over .big { font-size: 64px; animation: arBounce 1s ease-in-out infinite; }
.ar-over p { margin: 0; color: rgba(255,255,255,.8); }
.ar-over .btn { width: 100%; max-width: 320px; }
/* 📡 радар поиска (этап 12.9): узел живёт всё ожидание — луч идёт плавным непрерывным оборотом (без перезапуска), за ним мягкий шлейф,
   кольца сетки неподвижны, две «волны» расходятся по очереди. Только transform / opacity */
.ar-radar { width: 156px; height: 156px; border-radius: 50%; position: relative; isolation: isolate; display: grid; place-items: center; font-size: 46px;
  background: radial-gradient(circle, rgba(var(--aura1-rgb), .22) 0, rgba(var(--aura1-rgb), .08) 55%, transparent 71%),
    repeating-radial-gradient(circle, transparent 0 25px, rgba(255, 255, 255, .07) 25px 26px);
  box-shadow: inset 0 0 0 1.5px rgba(var(--aura2-rgb), .28), 0 0 40px -12px rgba(var(--aura1-rgb), .8); }
.ar-radar .rr-sweep { position: absolute; inset: 0; border-radius: 50%; z-index: -1; will-change: transform;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(var(--aura2-rgb), 0) 250deg, rgba(var(--aura2-rgb), .10) 300deg, rgba(var(--aura2-rgb), .42) 356deg, rgba(var(--aura2-rgb), .9) 359.5deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, #000 69%, transparent 70%); mask: radial-gradient(circle, #000 69%, transparent 70%);
  animation: arSweep 2.8s linear infinite; }
.ar-radar .rr-ping { position: absolute; inset: 22%; border-radius: 50%; z-index: -1; box-shadow: 0 0 0 1.5px rgba(var(--aura2-rgb), .55);
  opacity: 0; animation: arPing 2.8s cubic-bezier(.2, .6, .3, 1) infinite; }
.ar-radar .rr-ping.d2 { animation-delay: 1.4s; }
.ar-radar span { position: relative; filter: drop-shadow(0 4px 12px rgba(var(--aura1-rgb), .6)); }
@keyframes arSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes arPing { 0% { transform: scale(.55); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ar-radar .rr-sweep { animation-duration: 8s; } .ar-radar .rr-ping { animation: none; } }
.ar-wait-h { margin: 10px 0 0; }
.ar-wait-t { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.ar-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.ar-wait p { margin: 0; text-align: center; }
body.no-scroll { overflow: hidden; }

/* ===== 🎯 Мой подарок ===== */
.top-goal { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  color: var(--text); background: linear-gradient(120deg, rgba(var(--aura2-rgb), .22), rgba(var(--aura1-rgb), .18));
  box-shadow: inset 0 0 0 1.5px rgba(var(--aura2-rgb), .55), 0 0 18px -6px rgba(var(--aura2-rgb), .7); }
.top-goal .tg-ring { position: absolute; left: 2px; top: 50%; width: 38px; height: 38px; transform: translateY(-50%) rotate(-90deg); }
.top-goal .tg-bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 3; }
.top-goal .tg-fg { fill: none; stroke: var(--aura2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .6s; }
.top-goal .tg-e { width: 38px; height: 38px; display: grid; place-items: center; font-size: 20px; }
.top-goal .tg-e img { width: 26px; height: 26px; object-fit: contain; }
.top-goal .tg-t { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.top-goal small { font-size: 10px; color: var(--muted); }
.top-goal b { font-size: 14px; color: #ffe08a; font-variant-numeric: tabular-nums; }
.top-goal.ready { animation: arBounce 1.2s ease-in-out infinite; }
.goal-flash { position: fixed; top: calc(env(safe-area-inset-top) + 62px); right: 12px; z-index: var(--z-flash); max-width: 70vw; padding: 8px 12px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 700; color: #2a1700; background: linear-gradient(180deg, #ffe58a, #f5b73b); box-shadow: 0 8px 20px -6px rgba(0,0,0,.6);
  animation: gfIn .3s ease-out; }
@keyframes gfIn { from { opacity: 0; transform: translateY(-8px); } }
.gl-hero { text-align: center; }
.gl-hero .e { font-size: 72px; line-height: 1; }
.gl-hero .e img { width: 96px; height: 96px; object-fit: contain; }
.gl-hero h3 { margin: 6px 0 2px; }
.gl-bar { height: 12px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; margin: 12px 0 6px; }
.gl-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--aura1), var(--aura2)); }
.gl-conds { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; text-align: left; }
.gl-cond { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; border: 0; color: var(--text); }
.gl-cond .grow { flex: 1; }
.gl-cond .grow small { display: block; color: var(--muted); font-size: 11px; }
.gl-cond.done { opacity: .6; }
.gl-cond .mini { width: 54px; height: 5px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); overflow: hidden; }
.gl-cond .mini i { display: block; height: 100%; background: var(--aura2); }
.gl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.gl-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: var(--r-md); border: 0; color: var(--text); cursor: pointer;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.gl-opt .e { font-size: 34px; } .gl-opt .e img { width: 44px; height: 44px; object-fit: contain; }
.gl-opt b { font-size: 12px; } .gl-opt small { font-size: 11px; color: var(--muted); }
.gl-opt.active { box-shadow: inset 0 0 0 2px var(--aura2); }

/* ===== 🎁 главная: цель, витрина, выдачи ===== */
.hg-bar { display: block; height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); overflow: hidden; margin: 4px 0 2px; }
.hg-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--aura1), var(--aura2)); transition: width .6s; }
.showcase, .payouts { margin: 12px 0; }
.sc-head, .po-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 8px; }
.sc-head small, .po-head small { color: var(--muted); font-size: 11px; }
.sc-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sc-row::-webkit-scrollbar { display: none; }
.sc-item { flex: none; width: 92px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px;
  border-radius: var(--r-lg); border: 0; color: var(--text); cursor: pointer; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.sc-item .e { font-size: 34px; } .sc-item .e img { width: 46px; height: 46px; object-fit: contain; }
.sc-item b { font-size: 12px; } .sc-item small { font-size: 11px; color: var(--muted); }
.sc-item .bar { width: 100%; height: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); overflow: hidden; }
.sc-item .bar i { display: block; height: 100%; background: var(--aura2); }
.sc-item.goal { box-shadow: inset 0 0 0 2px var(--aura2); }
.po-list { display: flex; flex-direction: column; gap: 6px; }
.po-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--surface); font-size: 13px; }
.po-row .e { font-size: 22px; } .po-row .e img { width: 28px; height: 28px; object-fit: contain; }
.po-row .grow { flex: 1; } .po-row small { color: var(--muted); font-size: 11px; }

/* путь к первому подарку */
.fg-card { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 12px 14px; margin-bottom: 12px; border: 0; border-radius: var(--radius); text-align: left;
  color: var(--text); cursor: pointer; background: var(--surface); box-shadow: inset 0 0 0 1.5px rgba(106, 215, 255, .35); }
.fg-top { display: flex; justify-content: space-between; align-items: baseline; }
.fg-top small, .fg-next { color: var(--muted); font-size: 12px; }
.fg-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fg-dots i { height: 30px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-size: 14px; background: var(--surface-2); }
.fg-dots i.done { background: linear-gradient(135deg, var(--aura1), var(--aura2)); }
.fg-dots i.ready { box-shadow: inset 0 0 0 2px #6ff0a0; animation: rfPulse 1.2s infinite; }
.fg-dots i.lock { opacity: .4; }
.fg-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; }
.fg-step .grow { flex: 1; } .fg-step small { display: block; color: var(--muted); font-size: 11px; }
.fg-step.lock { opacity: .5; }
/* дорога кубков */
.ar-road { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.ar-road::-webkit-scrollbar { display: none; }
.rd-step { flex: none; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--r-md); border: 0;
  color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); font-size: 12px; }
.rd-step .e { position: relative; font-size: 26px; line-height: 1; } .rd-step small { color: var(--win); font-size: 12px; font-weight: 800; }
.rd-step.gift { background: linear-gradient(160deg, rgba(var(--aura2-rgb), .3), var(--surface)); box-shadow: inset 0 0 0 1.5px rgba(var(--aura2-rgb), .6); }
.rd-step.ready { box-shadow: inset 0 0 0 2px #6ff0a0; cursor: pointer; animation: arBounce 1.2s infinite; }
.rd-step.claimed { opacity: .45; }
.ar-chest .gift-tag { position: absolute; top: 3px; right: 3px; font-size: 12px; font-style: normal; }

/* ===== ⚡ Сейчас ===== */
.now { margin: 0 0 12px; }
.now-list { display: flex; flex-direction: column; gap: 8px; }
.now-it { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--r-lg); text-align: left; cursor: pointer;
  color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.now-it:first-child { background: linear-gradient(120deg, rgba(var(--aura2-rgb), .25), rgba(var(--aura1-rgb), .2)), var(--surface);
  box-shadow: inset 0 0 0 1.5px rgba(var(--aura2-rgb), .6), 0 10px 22px -12px rgba(var(--aura2-rgb), .8); }
.now-it .e { font-size: 28px; width: 36px; text-align: center; }
.now-it .grow { flex: 1; min-width: 0; }
.now-it b { display: block; font-size: 15px; }
.now-it small { color: var(--muted); font-size: 12px; }
.now-it .go { font-size: 13px; font-weight: 800; padding: 7px 12px; border-radius: var(--r-pill); color: #2a1700; background: linear-gradient(180deg, #ffe58a, #f5b73b); }
.games-more { margin-top: 12px; }
.games-more summary { cursor: pointer; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); color: var(--muted); font-weight: 700; list-style: none; }
.games-more summary::-webkit-details-marker { display: none; }
.games-more[open] summary { margin-bottom: 10px; }

/* ===== 🎓 обучающий бой ===== */
.ar-hand .ar-card.hint { box-shadow: 0 0 0 3px #6ff0a0, 0 0 24px rgba(111, 240, 160, .8); animation: arHintGlow 1s ease-in-out infinite; }
@keyframes arHintGlow { 50% { box-shadow: 0 0 0 3px #6ff0a0, 0 0 6px rgba(111, 240, 160, .3); } }
.ar-hand .ar-card .hint-x { position: absolute; bottom: auto; top: -2px; left: 0; right: 0; font-size: 10px; font-weight: 900; color: #0b3; background: #c9ffe0;
  border-radius: var(--r-pill); width: max-content; margin: 0 auto; padding: 1px 6px; }
.ar-tip { font-size: 13px; text-align: center; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(111, 240, 160, .12); color: #c9ffe0; }

/* ===== 🚀 знакомство (онбординг) ===== */
  color: #fff; text-align: center; background: radial-gradient(120% 80% at 50% 0%, #4b23a8, #120a30 70%); overflow-y: auto; }

/* ===== 🎬 Этап 3: сочность (только transform/opacity — дёшево для GPU) ===== */
.fly-num { position: fixed; z-index: var(--z-juice); transform: translate(-50%, 0); pointer-events: none; font: 800 15px/1 Unbounded, system-ui, sans-serif;
  color: var(--aura2); text-shadow: 0 2px 10px rgba(0,0,0,.6), 0 0 14px rgba(var(--aura2-rgb), .6); animation: flyNum 1.2s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes flyNum { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, 12px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, 46px) scale(1); } }
.top-goal.pulse { animation: goalPulse .9s var(--ease-spring); }
.top-goal.pulse .tg-fg { filter: drop-shadow(0 0 6px rgba(var(--aura2-rgb), .9)); }
@keyframes goalPulse { 30% { transform: scale(1.12); box-shadow: 0 0 0 2px rgba(var(--aura2-rgb), .7), 0 0 26px rgba(var(--aura2-rgb), .6); } }

/* бой: карты влетают сверху и снизу, удар, тряска, вспышка победителя, корона */
.ar-slot.fly-top .ar-card { animation: arFlyTop .5s cubic-bezier(.3, 1.3, .5, 1) both; }
.ar-slot.fly-bot .ar-card { animation: arFlyBot .5s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes arFlyTop { from { transform: translate(40px, -170px) rotate(-18deg) scale(.6); opacity: 0; } 70% { transform: translate(0, 8px) rotate(2deg) scale(1.04); opacity: 1; } }
@keyframes arFlyBot { from { transform: translate(-40px, 190px) rotate(16deg) scale(.6); opacity: 0; } 70% { transform: translate(0, -8px) rotate(-2deg) scale(1.04); opacity: 1; } }
.ar-board.clash { animation: arShake .32s .46s linear both; }
@keyframes arShake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
.ar-vs.boom { animation: arBoom .5s .42s var(--ease-spring) both; }
@keyframes arBoom { 0% { transform: scale(1); } 40% { transform: scale(2.1); color: #fff; text-shadow: 0 0 24px #fff, 0 0 40px var(--aura2); } 100% { transform: scale(1); } }
.ar-board.clash .ar-slot.win .ar-card, .ar-board.clash .ar-slot.lose .ar-card { transition-delay: .55s; }
.ar-board.clash .ar-slot.win::after { content: ""; position: absolute; inset: -14px; border-radius: 24px; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--aura2-rgb), .55), transparent 70%); animation: arWinFlash .8s .55s ease-out both; }
.ar-slot { position: relative; }
@keyframes arWinFlash { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.ar-crowns .got { display: inline-block; animation: arCrown .7s .5s var(--ease-spring) both; }
@keyframes arCrown { 0% { transform: translateY(40px) scale(0) rotate(-30deg); opacity: 0; } 60% { transform: translateY(-4px) scale(1.6) rotate(8deg); opacity: 1; filter: drop-shadow(0 0 10px #ffe08a); } }

/* сундук: тряска → крышка → награды по одной */
.chest-open { position: fixed; inset: 0; z-index: var(--z-moment); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px 18px calc(env(safe-area-inset-bottom) + 24px); background: radial-gradient(circle at 50% 36%, rgba(var(--aura1-rgb), .55), transparent 58%), rgba(10, 7, 24, .97);
  animation: fadeIn .25s ease both; overflow: hidden; }
.co-rays { position: absolute; left: 50%; top: 34%; width: 560px; height: 560px; margin: -280px 0 0 -280px; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(rgba(var(--aura2-rgb), .22) 0 8deg, transparent 8deg 22deg); border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); will-change: transform; }
.chest-open:has(.co-box.open) .co-rays { animation: coRays 8s linear infinite, fadeIn .4s ease forwards; }
@keyframes coRays { to { transform: rotate(360deg); } }
.co-box { position: relative; font-size: 112px; line-height: 1; filter: drop-shadow(0 12px 30px rgba(0,0,0,.6)); will-change: transform; }
.co-box.shake { animation: coShake .38s ease-in-out 3; }
@keyframes coShake { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-9deg) scale(1.04); } 75% { transform: rotate(9deg) scale(1.08); } }
.co-box.open { animation: coPop .55s var(--ease-spring) both; }
.co-box.open::after { content: ""; position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(var(--aura2-rgb), .6) 30%, transparent 65%);
  animation: coFlash .6s ease-out both; pointer-events: none; }
@keyframes coPop { 0% { transform: scale(1); } 35% { transform: scale(1.35) translateY(-10px); } 100% { transform: scale(.82) translateY(-6px); } }
@keyframes coFlash { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
.co-title { font: 800 20px/1.2 Unbounded, system-ui, sans-serif; color: #fff; text-align: center; }
.chest-open.k-gold .co-title, .chest-open.k-magic .co-title { color: var(--aura2); }
.co-loot { display: flex; flex-direction: column; gap: 10px; width: min(100%, 320px); min-height: 60px; }
.co-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-lg); background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); animation: coItem .45s var(--ease-spring) both; }
.co-item .i { font-size: 34px; width: 44px; text-align: center; }
.co-item .i img { width: 40px; height: 40px; object-fit: contain; }
.co-item .t { display: flex; flex-direction: column; }
.co-item b { font: 800 22px/1.1 Unbounded, system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.co-item small { color: rgba(255,255,255,.6); }
.co-item.coin b { color: var(--aura2); }
.co-item.ess b { color: #8fd8ff; }
.co-item.gift { background: linear-gradient(135deg, rgba(var(--aura2-rgb), .3), rgba(var(--aura1-rgb), .3)); box-shadow: 0 0 0 2px var(--aura2), 0 0 30px rgba(var(--aura2-rgb), .5); }
.co-item.gift b { font-size: 16px; }
@keyframes coItem { from { opacity: 0; transform: translateY(-70px) scale(.4); } }
.co-foot { width: min(100%, 320px); min-height: 52px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.co-tap { color: rgba(255,255,255,.45); font-size: 13px; }
.co-goal { color: rgba(255,255,255,.7); font-size: 13px; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .co-box.shake, .co-box.open, .co-item, .co-rays, .ar-board.clash, .ar-vs.boom, .ar-slot .ar-card, .ar-crowns .got, .top-goal.pulse { animation: none !important; }
}

/* ===== 🎟 Пропуск сезона ===== */
.ss-card { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 12px; border: 0; border-radius: var(--radius); cursor: pointer; text-align: left; color: #fff;
  background: linear-gradient(120deg, rgba(var(--aura1-rgb), .35), rgba(var(--aura2-rgb), .18)); box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .35); }
.ss-card .grow { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ss-card b { font-size: 15px; }
.ss-card small { color: rgba(255,255,255,.7); font-size: 12px; }
.ss-final { width: 48px; height: 48px; display: grid; place-items: center; font-size: 34px; border-radius: var(--r-md); background: rgba(0,0,0,.25); flex: none; }
.ss-final img, .ss-fin img { width: 80%; height: 80%; object-fit: contain; }
.ss-bar { position: relative; display: block; height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); overflow: hidden; }
.ss-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--aura1), var(--aura2)); transition: width .6s; }
.ss-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.ss-head h2 { margin: 0; font-size: 20px; }
.ss-fin { width: 72px; height: 72px; flex: none; display: grid; place-items: center; font-size: 50px; border-radius: 20px;
  background: radial-gradient(circle, rgba(var(--aura2-rgb), .35), rgba(var(--aura1-rgb), .2)); box-shadow: 0 0 24px rgba(var(--aura2-rgb), .35); }
.ss-prog { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.ss-prog small { color: rgba(255,255,255,.6); }
.ss-warn { padding: 10px 12px; border-radius: var(--r-sm); background: rgba(255, 120, 80, .15); color: #ffb79c; font-size: 13px; margin: 8px 0; }
.ss-src { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ss-src > div { display: grid; grid-template-columns: 1fr auto; padding: 8px 10px; border-radius: var(--r-sm); background: rgba(255,255,255,.05); font-size: 12px; }
.ss-src > div b { color: var(--aura2); }
.ss-src > div small { grid-column: 1 / -1; color: rgba(255,255,255,.5); }
.ss-src > div.done { opacity: .5; }
.ss-track { display: flex; flex-direction: column; gap: 6px; }
.ss-lv { display: grid; grid-template-columns: 40px 1fr auto; grid-template-areas: "n r st" "n note st"; align-items: center; gap: 2px 10px;
  padding: 8px 12px; border-radius: var(--r-md); background: rgba(255,255,255,.04); opacity: .7; }
.ss-lv .n { grid-area: n; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); font-weight: 800; }
.ss-lv .r { grid-area: r; display: flex; gap: 10px; align-items: center; }
.ss-lv .note { grid-area: note; color: rgba(255,255,255,.55); font-size: 11px; }
.ss-lv .st { grid-area: st; font-size: 13px; font-weight: 700; }
.ss-lv.big { background: linear-gradient(120deg, rgba(var(--aura2-rgb), .16), rgba(var(--aura1-rgb), .16)); box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .4); }
.ss-lv.ready { opacity: 1; cursor: pointer; box-shadow: inset 0 0 0 2px var(--aura2); animation: ssReady 1.4s ease-in-out infinite; }
.ss-lv.ready .st { color: #1a0f00; background: var(--aura2); padding: 6px 12px; border-radius: var(--r-pill); }
.ss-lv.ready .n { background: var(--aura2); color: #1a0f00; }
.ss-lv.done { opacity: .45; }
.ss-lv.done .n { background: rgba(111, 240, 160, .25); }
.ss-lv.gate .st { color: rgba(255,255,255,.6); }
.ss-lv.busy { pointer-events: none; opacity: .5; }
@keyframes ssReady { 50% { box-shadow: inset 0 0 0 2px var(--aura2), 0 0 18px rgba(var(--aura2-rgb), .45); } }
.rw { display: inline-flex; align-items: center; gap: 4px; font-size: 22px; }
.rw small { font-size: 13px; color: rgba(255,255,255,.85); font-weight: 700; }
.rw img { width: 30px; height: 30px; object-fit: contain; }
.rw.gift img { width: 40px; height: 40px; }
.rw.gift small { color: var(--aura2); }

/* ===== 👥 Лестница друзей ===== */
.rl-card { margin: 12px 0; padding: 14px; }
.rl-card:empty { display: none; }
.rl-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.rl-head small { color: rgba(255,255,255,.65); }
.rl-bar { position: relative; height: 8px; margin: 6px 12px 22px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); }
.rl-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--aura1), var(--aura2)); }
.rl-bar span { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; background: #2a2140; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
.rl-bar span.on { background: var(--aura2); color: #1a0f00; }
.rl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rl-step { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: var(--r-sm); background: rgba(255,255,255,.05); text-align: center; }
.rl-step small { color: rgba(255,255,255,.6); font-size: 11px; }
.rl-step .r { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; min-height: 34px; align-items: center; }
.rl-step em { font-style: normal; font-size: 12px; font-weight: 700; }
.rl-step.ready { cursor: pointer; box-shadow: inset 0 0 0 2px var(--aura2); }
.rl-step.ready em { color: var(--aura2); }
.rl-step.done { opacity: .45; }
.ss-all { float: right; padding: 6px 12px; font-size: 13px; min-height: 0; }
.ad-l { display: block; margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.3; }
.cg-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(var(--aura1-rgb), .25), rgba(var(--aura2-rgb), .12)); box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .3); }
.cg-card.done { box-shadow: inset 0 0 0 2px var(--aura2); }
.cg-top { display: flex; justify-content: space-between; align-items: baseline; }
.cg-card .rw { font-size: 16px; }

/* =====================================================================================================
   ✨ AURA UI v2 — единая система движения и состояний (последний слой: перекрывает старые правила)
   Принципы: одна кривая на появление, одна «пружина» на отклик; анимируем только transform/opacity;
   яркость тратим на награды, всё остальное — спокойнее.
   ===================================================================================================== */
:root {
  --ease-out: var(--ease-out);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 380ms;
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px;
}

/* — отклик на нажатие: всё, что нажимается, чуть «проседает» — */
button, .tile, .game, .now-it, .ss-card, .home-goal, .gl-opt, .ar-chest, .case-card, [data-case] {
  -webkit-tap-highlight-color: transparent; transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2);
}
button:active:not(:disabled), .tile:active, .game:active, .now-it:active, .ss-card:active, .home-goal:active, [data-case]:active { transform: scale(.97); }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn-accent, .btn-primary { box-shadow: 0 6px 18px -6px rgba(var(--aura2-rgb), .55), inset 0 1px 0 rgba(255,255,255,.45); }
:focus-visible { outline: 2px solid var(--aura2); outline-offset: 2px; }

/* — переходы между страницами: вперёд по вкладкам — справа, назад — слева, вглубь — снизу — */
.page.active { animation: pageIn var(--dur-2) var(--ease-out) both; }
body[data-nav="fwd"] .page.active { animation-name: pageInR; }
body[data-nav="back"] .page.active { animation-name: pageInL; }
body[data-nav="deep"] .page.active { animation-name: pageInUp; }
@keyframes pageIn { from { opacity: 0; } }
@keyframes pageInR { from { opacity: 0; transform: translateX(18px); } }
@keyframes pageInL { from { opacity: 0; transform: translateX(-18px); } }
@keyframes pageInUp { from { opacity: 0; transform: translateY(14px); } }

/* — нижнее меню: 5 вкладок, Арена — по центру, приподнята — */
.tabbar { align-items: flex-end; padding-top: 6px;
  background: linear-gradient(180deg, rgba(14, 9, 30, .82), rgba(10, 6, 22, .97)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.06); }
.tab { max-width: none; height: 50px; gap: 3px; font-size: 10.5px; letter-spacing: .1px; color: rgba(255,255,255,.5); }
.tab span { position: relative; display: grid; place-items: center; width: 44px; height: 28px; border-radius: var(--r-md); filter: none; opacity: 1;
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring); }
.tab .ic { width: 22px; height: 22px; }
.tab.active { color: #fff; }
.tab.active span { background: rgba(var(--aura1-rgb), .28); transform: translateY(-1px); }
.tab.active::after { display: none; }
.tab-arena { color: var(--aura2) !important; }
.tab-arena span { width: 58px; height: 58px; margin-top: -24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe6a3, var(--aura2) 45%, #c98a1c);
  box-shadow: 0 8px 22px -4px rgba(var(--aura2-rgb), .7), 0 0 0 4px rgba(10, 6, 22, .97), inset 0 -3px 0 rgba(0,0,0,.18); }
.tab-arena .ic { color: #2a1700; filter: none; width: 28px; height: 28px; }
.tab-arena.active span { background: radial-gradient(circle at 35% 30%, #fff1c8, #ffd36b 45%, #d9971f); transform: translateY(-2px) scale(1.04); }
.tab-arena.active .ic { animation: none; }
.tab-arena .tab-dot { top: -20px; right: 22%; }

/* — скелетоны вместо пустоты — */
.skel { position: relative; overflow: hidden; border-radius: var(--r-md); background: rgba(255,255,255,.05); }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); animation: skel 1.2s ease-in-out infinite; }
.skel-row { height: 62px; margin-bottom: 8px; }
@keyframes skel { to { transform: translateX(100%); } }

/* — тост: снизу, мягко, с «пружиной» — */
.toast { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring); border-radius: var(--r-md);
  background: rgba(30, 22, 54, .96); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.toast.hide { opacity: 0; transform: translate(-50%, 10px) scale(.98); }

/* — главная: подарок-цель — главный экран, «Сейчас» — компактнее — */
.home-goal { padding: 16px; border-radius: var(--r-lg); }
.hg-pic { width: 72px; height: 72px; border-radius: 20px; }
.hg-pic img { width: 60px; height: 60px; animation: hgFloat 4s ease-in-out infinite; }
@keyframes hgFloat { 50% { transform: translateY(-3px) rotate(-2deg); } }
.hg-bar i { transition: width .9s var(--ease-out); }
.now-head { margin: 14px 2px 8px; }
.now-it { border-radius: var(--r-md); }
.now-it:first-child { background: linear-gradient(120deg, rgba(var(--aura2-rgb), .2), rgba(var(--aura1-rgb), .14)); box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .45); }
.now-it:not(:first-child) { padding-top: 10px; padding-bottom: 10px; }
.now-it:not(:first-child) .e { font-size: 22px; }
.now-it:not(:first-child) b { font-size: 14px; }

/* — Игры: Аура первой строкой — */
.g-aura::before { background: radial-gradient(120% 140% at 0% 100%, var(--aura2), transparent 60%); }

/* =====================================================================================================
   🎰 СЦЕНА ОТКРЫТИЯ КЕЙСА — главный «вау»-момент
   ===================================================================================================== */
.case-head { transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out), margin var(--dur-3) var(--ease-out); transform-origin: 50% 0; }
body.case-stage .case-head { transform: scale(.82) translateY(-6px); opacity: .55; margin-bottom: -20px; }
body.case-stage .spin-actions, body.case-stage #multiRow, body.case-stage .case-note { opacity: .35; pointer-events: none; transition: opacity var(--dur-3); }
.roulettes { position: relative; }
.roulette { max-width: none; height: 132px; border-radius: 24px; background: radial-gradient(60% 120% at 50% 50%, rgba(var(--aura1-rgb), .22), transparent 70%), rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.roulette::before { width: 36px; background: linear-gradient(90deg, rgba(14, 9, 30, 1), transparent); }
.roulette::after { width: 36px; background: linear-gradient(-90deg, rgba(14, 9, 30, 1), transparent); }
.roulette .needle { width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, var(--aura2) 20%, #fff 50%, var(--aura2) 80%, transparent);
  box-shadow: 0 0 10px rgba(var(--aura2-rgb), .9), 0 0 24px rgba(var(--aura2-rgb), .5); }
.roulette-track { gap: 10px; padding: 14px 0; }
body.case-stage .roulette { box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .25), 0 18px 50px -20px rgba(var(--aura1-rgb), .8); }
/* победитель: подскок + вспышка цвета редкости + лучи за карточкой */

/* — окно выигрыша: цвет редкости, лучи, предмет «вылетает» и парит — */
#resultModal { background: radial-gradient(70% 55% at 50% 42%, rgba(var(--aura1-rgb), .35), rgba(4, 2, 12, .86)); }
#resultModal.open { animation: fadeIn var(--dur-2) var(--ease-out); }
.result-card { --rc: var(--aura1); overflow: hidden; padding-top: 28px; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 22%, transparent), transparent 55%), var(--surface);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--rc) 70%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--rc) 40%, transparent);
  animation: rcIn .45s var(--ease-spring) both; }
.result-card.r-common { --rc: #8b98b8; } .result-card.r-uncommon { --rc: #4fd18b; } .result-card.r-rare { --rc: #4aa3ff; }
.result-card.r-epic { --rc: #b26bff; } .result-card.r-legendary, .result-card.r-nft { --rc: #ffc24a; } .result-card.r-none { --rc: #5d6678; }
.result-card::before { content: ""; position: absolute; left: 50%; top: 70px; width: 420px; height: 420px; margin: -210px 0 0 -210px; pointer-events: none; opacity: .0;
  background: repeating-conic-gradient(color-mix(in srgb, var(--rc) 40%, transparent) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 62%); mask: radial-gradient(circle, #000 15%, transparent 62%); animation: coRays 14s linear infinite; }
.result-card.r-rare::before, .result-card.r-epic::before, .result-card.r-legendary::before, .result-card.r-nft::before { opacity: .9; }
.result-card > *:not(.modal-close) { position: relative; }
.result-card .emoji { animation: rcItem .7s .08s var(--ease-spring) both, hgFloat 3.6s 1s ease-in-out infinite; filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--rc) 55%, transparent)); }
.result-card .emoji img.ico { width: 96px; height: 96px; }
.result-card.still .emoji { animation: none; filter: none; }
.result-card .title { font-family: Unbounded, system-ui, sans-serif; font-size: 22px; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.result-card .result-actions { animation: fadeUp .35s .35s var(--ease-out) both; }
@keyframes rcIn { from { opacity: 0; transform: translateY(24px) scale(.94); } }
@keyframes rcItem { 0% { opacity: 0; transform: translateY(26px) scale(.4) rotate(-12deg); } 60% { opacity: 1; transform: translateY(-6px) scale(1.12) rotate(4deg); } 100% { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .page.active, .result-card, .result-card .emoji, .result-card::before, .rcard.win, .rcard.win::before, .hg-pic img, .skel::after, .result-card .result-actions { animation: none !important; }
  button:active, .tile:active, .game:active { transform: none !important; }
}
/* производительность: размытие под меню дорого на слабых Android — только там, где GPU справится */
@media (max-resolution: 2dppx) { .tabbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(12, 8, 26); } }

/* =====================================================================================================
   🎯 ГЛАВНАЯ v2: герой (подарок + следующий шаг) → строка значков → только важное ниже
   ===================================================================================================== */
.i { width: 24px; height: 24px; display: inline-block; vertical-align: middle; flex: none; }
.chest-ic { width: 32px; height: 32px; }
.hero { position: relative; margin: 2px 0 14px; padding: 18px 16px 14px; border-radius: 26px; overflow: hidden;
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--aura1-rgb), .45), transparent 60%), radial-gradient(90% 80% at 100% 100%, rgba(var(--aura2-rgb), .16), transparent 60%), #1a1036;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px -28px rgba(var(--aura1-rgb), .9); }
.hero-goal { width: 100%; display: flex; align-items: center; gap: 16px; padding: 0; background: none; border: 0; text-align: left; color: inherit; }
.hero-ring { position: relative; flex: none; width: 104px; height: 104px; }
.hero-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.hr-bg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 7; }
.hr-fg { fill: none; stroke: url(#acRim); stroke: var(--aura2); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.1s var(--ease-out); filter: drop-shadow(0 0 6px rgba(var(--aura2-rgb), .6)); }
.hero-pic { position: absolute; inset: 14px; display: grid; place-items: center; font-size: 46px; border-radius: 50%; background: rgba(0,0,0,.22); }
.hero-pic img { width: 64px; height: 64px; object-fit: contain; animation: hgFloat 4s ease-in-out infinite; }
.hero-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hero-kicker { color: rgba(255,255,255,.55); font-size: 12px; }
.hero-txt b { font-size: 16px; line-height: 1.25; }
.hero-pct { font-family: Unbounded, system-ui, sans-serif; font-weight: 800; font-size: 34px; line-height: 1.05; color: var(--aura2); letter-spacing: -1px;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(var(--aura2-rgb), .45); }
.hero-pct:empty { display: none; }
.hero-txt > small:last-child { color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.35; }
.hero-goal.ready .hero-pct { font-size: 20px; }
.hero-next { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 10px 10px 12px; border-radius: var(--radius); background: rgba(0,0,0,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.hn-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: var(--aura2); background: rgba(var(--aura2-rgb), .14); }
.hn-ico .chest-ic { width: 34px; height: 34px; }
.hn-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hn-txt small { color: rgba(255,255,255,.5); font-size: 11px; }
.hn-txt b { font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hn-btn { flex: none; padding: 12px 18px; border-radius: var(--r-md); font-size: 14px; }

.quick { display: grid; grid-auto-flow: column; grid-auto-columns: 72px; gap: 8px; overflow-x: auto; margin: 0 0 14px; padding: 4px 2px 6px;
  scrollbar-width: none; scroll-snap-type: x proximity; }
.quick::-webkit-scrollbar { display: none; }
.q-it { scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 2px 8px; border-radius: 18px !important; width: 72px; min-width: 0;
  background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); color: #fff; }
.q-ico { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); color: #c9b8ff; background: rgba(var(--aura1-rgb), .18); margin-bottom: 4px; }
.q-it.has .q-ico { color: #2a1700; background: linear-gradient(180deg, #ffe08a, var(--aura2)); box-shadow: 0 6px 16px -6px rgba(var(--aura2-rgb), .8); }
.q-badge { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: #ff4d6d; color: #fff;
  font-style: normal; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px #120a26; }
.q-badge:empty { min-width: 10px; width: 10px; height: 10px; padding: 0; top: -2px; right: -2px; }
.q-it b { font-size: 11.5px; font-weight: 700; }
.q-it small { font-size: 10.5px; color: rgba(255,255,255,.5); white-space: nowrap; max-width: 70px; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.skel-q { width: 74px; height: 88px; border-radius: var(--radius); }
.now-more:empty, .now-more .now-list:empty { display: none; }
.now-more .now-it .e { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: #c9b8ff; background: rgba(var(--aura1-rgb), .18); }
.now-more .now-it:first-child { background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
@media (prefers-reduced-motion: reduce) { .hero-pic img, .hr-fg { animation: none !important; transition: none !important; } }

/* =====================================================================================================
   🎮 ИГРЫ v2: плитки 2×N с живыми значениями, розыгрыш — широкой строкой
   ===================================================================================================== */
.games-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gt, .gw { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 22px; text-align: left; color: #fff;
  background: var(--g-bg, #1c1238); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); min-height: 150px; }
.gt::after, .gw::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--g-glow, rgba(var(--aura1-rgb), .35)); filter: blur(30px); opacity: .7; pointer-events: none; }
.gt > *, .gw > * { position: relative; z-index: 1; }
.gt-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: rgba(255,255,255,.1); color: var(--g-ic, #fff); margin-bottom: auto; }
.gt-ico .i { width: 26px; height: 26px; }
.gt b, .gw b { font-family: Unbounded, system-ui, sans-serif; font-size: 16px; margin-top: 10px; }
.gt small, .gw small { color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.3; }
.gt-chip { position: absolute; top: 14px; right: 12px; padding: 4px 9px; border-radius: var(--r-pill); background: rgba(0,0,0,.3); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gt-chip.hot { background: linear-gradient(180deg, #ffe08a, var(--aura2)); color: #2a1700; }
.gw { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; min-height: 0; }
.gw .gt-ico { margin: 0; }
.gw-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gw-txt b { margin-top: 0; }
.gw-chip { position: static; }
.gt-aura { --g-bg: linear-gradient(160deg, #3a2a0e, #1c1238 70%); --g-glow: rgba(var(--aura2-rgb), .5); --g-ic: var(--aura2); }
.gt-arena { --g-bg: linear-gradient(160deg, #3b1c66, #1c1238 70%); --g-glow: rgba(155, 92, 255, .55); --g-ic: #d9c6ff; }
.gt-rocket { --g-bg: linear-gradient(160deg, #3a1520, #1c1238 70%); --g-glow: rgba(255, 110, 80, .45); --g-ic: #ffb19c; }
.gt-up { --g-bg: linear-gradient(160deg, #13304a, #1c1238 70%); --g-glow: rgba(74, 163, 255, .45); --g-ic: #a7d3ff; }
.g-ico .i { width: 28px; height: 28px; color: #d9c6ff; }
.ar-chest .e .chest-ic { width: 40px; height: 40px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.ar-chest.ready .e .chest-ic { animation: chestReady 1.6s ease-in-out infinite; }
@keyframes chestReady { 0%, 100% { transform: rotate(0); } 8% { transform: rotate(-8deg); } 16% { transform: rotate(7deg); } 24% { transform: rotate(0); } }
.co-e .chest-ic { width: 132px; height: 132px; }
.ha-chests .chest-ic.sm { width: 18px; height: 18px; vertical-align: -4px; }
.rw .chest-ic { width: 30px; height: 30px; }
.rw-ess .i, .co-item.ess .i { color: #8fd8ff; filter: drop-shadow(0 0 6px rgba(143, 216, 255, .5)); }
.co-item .i { width: 34px; height: 34px; }

/* =====================================================================================================
   🎒 ИНВЕНТАРЬ v2: карточки с рамкой редкости, «вход» лесенкой, продажа — карточка улетает
   ===================================================================================================== */
#invSummary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 12px 6px; border-radius: var(--radius); background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
#invSummary > div { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; color: rgba(255,255,255,.55); }
#invSummary > div + div { border-left: 1px solid rgba(255,255,255,.07); }
#invSummary b { font-family: Unbounded, system-ui, sans-serif; font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
#invGrid .item { --rc: #8b98b8; position: relative; border-radius: 20px; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--rc) 26%, transparent), transparent 70%), #1a1132;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 38%, transparent); transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2); }
#invGrid .item.r-uncommon { --rc: #4fd18b; } #invGrid .item.r-rare { --rc: #4aa3ff; } #invGrid .item.r-epic { --rc: #b26bff; }
#invGrid .item.r-legendary, #invGrid .item.r-nft { --rc: #ffc24a; }
#invGrid .item .emoji img.ico { filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--rc) 45%, transparent)); }
#invGrid .item .act { border-radius: var(--r-sm); }
#invGrid .item .act.buy { background: linear-gradient(180deg, #ffe08a, var(--aura2)); color: #2a1700; font-weight: 800; }
#invGrid.enter .item { animation: itemIn .4s var(--ease-spring) both; }
#invGrid.enter .item:nth-child(2) { animation-delay: .04s; } #invGrid.enter .item:nth-child(3) { animation-delay: .08s; }
#invGrid.enter .item:nth-child(4) { animation-delay: .12s; } #invGrid.enter .item:nth-child(5) { animation-delay: .16s; }
#invGrid.enter .item:nth-child(6) { animation-delay: .2s; } #invGrid.enter .item:nth-child(n+7) { animation-delay: .24s; }
@keyframes itemIn { from { opacity: 0; transform: translateY(14px) scale(.94); } }
#invGrid .item.sold { opacity: 0; transform: translateY(-28px) scale(.8); pointer-events: none; }
.inv-empty.v2 { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px 18px 18px; border-radius: 24px;
  background: radial-gradient(80% 60% at 50% 0%, rgba(var(--aura1-rgb), .3), transparent 70%), #1a1132; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.inv-empty.v2 .inv-empty-ico { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 24px; color: #d9c6ff; background: rgba(var(--aura1-rgb), .22); margin-bottom: 6px; }
.inv-empty.v2 .inv-empty-ico .i { width: 38px; height: 38px; }
.inv-empty.v2 h3 { font-family: Unbounded, system-ui, sans-serif; font-size: 18px; margin: 0; }
.inv-empty.v2 .btn-wide { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { #invGrid.enter .item, .ar-chest.ready .e .chest-ic { animation: none !important; } }
/* производительность: пока поверх открыт бой или сундук, фоновые «вечные» анимации страницы стоят — кадры уходят на сцену */
body.no-scroll .page.active :not(.ar-screen, .ar-screen *) { animation-play-state: paused !important; }

/* =====================================================================================================
   ✅ ЗАДАНИЯ v2: карточка дня (сегменты = задания), «забрать» — наверх, близкие к цели — следом
   ===================================================================================================== */
.q-day { margin: 4px 0 14px; padding: 16px; border-radius: 22px; background: radial-gradient(100% 90% at 0% 0%, rgba(var(--aura1-rgb), .4), transparent 60%), #1a1132;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.q-day.all { background: radial-gradient(100% 90% at 0% 0%, rgba(var(--aura2-rgb), .3), transparent 60%), #1f1530; box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .45); }
.qd-top { display: flex; justify-content: space-between; align-items: flex-start; }
.qd-top > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.qd-top b { font-family: Unbounded, system-ui, sans-serif; font-size: 17px; }
.qd-top small { color: rgba(255,255,255,.55); font-size: 12px; }
.qd-num { font-family: Unbounded, system-ui, sans-serif; color: rgba(255,255,255,.5); font-size: 16px; }
.qd-num b { color: var(--aura2); font-size: 26px; }
.qd-seg { display: flex; gap: 4px; margin: 12px 0 10px; }
.qd-seg i { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); transition: background-color .4s; }
.qd-seg i.on { background: linear-gradient(90deg, var(--aura1), var(--aura2)); }
.qd-seg i.ready { background: rgba(var(--aura2-rgb), .45); animation: segPulse 1.2s ease-in-out infinite; }
@keyframes segPulse { 50% { opacity: .5; } }
.qd-sub { color: rgba(255,255,255,.7); font-size: 13px; }
.qd-sub b { color: var(--aura2); }
.task.ready { box-shadow: inset 0 0 0 1.5px rgba(var(--aura2-rgb), .65), 0 8px 24px -14px rgba(var(--aura2-rgb), .8); }
.task.done { opacity: .5; }
.progress.near i { background: linear-gradient(90deg, var(--aura1), var(--aura2)); }
.task .task-emoji { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md); background: rgba(255,255,255,.06); }
@media (prefers-reduced-motion: reduce) { .qd-seg i.ready { animation: none; } }
.boost-note.dn { text-align: left; font-weight: 600; font-size: 12.5px; line-height: 1.4; }


/* =====================================================================================================
   👤 ПРОФИЛЬ v2: полоса уровня, карточка «до подарка в Telegram», ачивки — незаконченные первыми
   ===================================================================================================== */
.p-lvbar { height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; max-width: 220px; }
.p-lvbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--aura1), var(--aura2)); transition: width .9s var(--ease-out); }
.pw-card { width: 100%; display: flex; flex-direction: column; gap: 10px; margin: 12px 0; padding: 14px 16px; border-radius: 20px; text-align: left; color: #fff;
  background: radial-gradient(100% 90% at 100% 0%, rgba(var(--aura2-rgb), .22), transparent 60%), #1a1132; box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .3); }
.pw-card:empty { display: none; }
.pw-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pw-top b { font-size: 15px; }
.pw-top > span { font-family: Unbounded, system-ui, sans-serif; color: var(--aura2); font-weight: 800; }
.pw-seg { display: flex; gap: 4px; }
.pw-seg i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); }
.pw-seg i.on { background: var(--aura2); }
.pw-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12px; color: rgba(255,255,255,.6); }
.pw-list .ok { color: #6be3a1; }
.ach.locked .p i { background: linear-gradient(90deg, var(--aura1), var(--aura2)); }

/* ⚔️ Арена: заставка VS и «что дальше» в итоге боя */
.ar-intro { position: absolute; inset: 0; z-index: var(--z-sticky); display: grid; grid-template-rows: 1fr auto 1fr; align-items: center; justify-items: center; pointer-events: none;
  background: radial-gradient(60% 40% at 50% 50%, rgba(var(--aura1-rgb), .55), rgba(6, 3, 16, .92)); animation: aiFade 1.5s var(--ease-out) both; }
.ai-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ai-side b { font-family: Unbounded, system-ui, sans-serif; font-size: 24px; color: #fff; }
.ai-side small { color: rgba(255,255,255,.6); }
.ai-op { align-self: end; animation: aiTop .5s var(--ease-spring) both; }
.ai-me { align-self: start; animation: aiBot .5s var(--ease-spring) both; }
.ai-vs { font-family: Unbounded, system-ui, sans-serif; font-weight: 800; font-size: 64px; color: var(--aura2); margin: 18px 0;
  text-shadow: 0 0 30px rgba(var(--aura2-rgb), .9); animation: aiVs .6s .35s var(--ease-spring) both; }
@keyframes aiFade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aiTop { from { opacity: 0; transform: translateY(-80px); } }
@keyframes aiBot { from { opacity: 0; transform: translateY(80px); } }
@keyframes aiVs { 0% { opacity: 0; transform: scale(3); } 60% { opacity: 1; transform: scale(.9); } 100% { transform: scale(1); } }
.result-actions { flex-wrap: wrap; }
.result-actions .next-step { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: 8px; animation: fadeUp .35s var(--ease-out) both; }
.result-actions .next-step .i { width: 20px; height: 20px; }
.result-actions .next-step span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 🎁 подарок новичку: 7 точек-дней, последняя — сам подарок */
.hero-days { display: flex; gap: 5px; margin: 6px 0 4px; }
.hero-days i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; font-style: normal; font-size: 11px; }
.hero-days i.on { background: linear-gradient(180deg, #ffe08a, var(--aura2)); box-shadow: 0 0 8px rgba(var(--aura2-rgb), .6); }
.hero-days i.gift { width: 24px; height: 24px; margin-top: -3px; background: rgba(var(--aura2-rgb), .2); box-shadow: inset 0 0 0 1.5px var(--aura2); font-size: 14px; }
.hero-days i.gift.on { animation: giftBeat 1.4s ease-in-out infinite; }
@keyframes giftBeat { 50% { transform: scale(1.18); } }
/* 🪜 закрытые до N-го дня игры: видны (предвкушение), но приглушены */
.g-locked { filter: saturate(.25) brightness(.75); }
.g-locked .gt-chip { display: none; }
.g-lock { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 4px 9px; border-radius: var(--r-pill); background: rgba(0,0,0,.45); color: #fff;
  font-size: 11.5px; font-weight: 700; filter: none; }
.game.g-locked .g-lock { position: static; margin-left: auto; }

/* ===== 📈 РОСТ: интересы, промокоды, реклама, событие ===== */
.int-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.int-opt { padding: 12px 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.2; text-align: left; transition: transform .15s, background .15s, border-color .15s; }
.int-opt:active { transform: scale(.97); }
.int-opt.on { background: var(--accent-soft); border-color: var(--accent); }
.promo-tk { position: relative; display: grid; gap: 4px; margin: 12px 0 4px; padding: 12px 14px; text-align: left; border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(var(--aura2-rgb), .16), rgba(var(--aura1-rgb), .12)); border: 1px dashed rgba(var(--aura2-rgb), .55); }
.promo-tk .pt-l { font-size: 11px; color: var(--muted); font-weight: 600; }
.promo-tk b { font-size: 15px; }
.promo-tk .pt-code { font: 800 18px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 1px; color: var(--accent); }
.promo-tk .pt-btns { display: flex; gap: 8px; margin-top: 4px; }
.promo-tk small { color: var(--muted); font-size: 11px; }
.promo-box { margin: 4px 0 12px; }
.for-you { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: var(--r-pill); font-size: 10px; font-weight: 700; vertical-align: 1px;
  background: var(--accent-soft); color: var(--accent); }
.for-you.excl { background: rgba(255, 196, 0, .18); color: #ffc400; }
.task.t-excl { box-shadow: inset 0 0 0 1.5px rgba(255, 196, 0, .55); }
.ads-task .task-emoji { filter: saturate(1.2); }
/* 🎃 событие: тёплый оранжевый оттенок героя и значка — только пока событие идёт */
body.ev-on .q-it[data-nowkey="event"] .q-ico { color: #ff9a3c; background: rgba(255, 154, 60, .16); }
.ev-hero .e { filter: drop-shadow(0 8px 22px rgba(255, 154, 60, .55)); }
.ev-how { font-size: 12px; margin-top: 10px; }

/* ===== ⚔️ АРЕНА 2.0: карты с ценой и способностью, энергия, очки, правило дня, испытание, эмоции ===== */
/* карта: рамка-«оправа», блик сверху, кристалл цены, способность лентой снизу */
.ar-card { isolation: isolate; }
.ar-card::before { content: ""; position: absolute; inset: 3px; border-radius: 13px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 38%), radial-gradient(80% 50% at 50% 30%, rgba(255,255,255,.18), transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.ar-card .cost { position: absolute; top: 4px; left: 4px; width: 22px; height: 24px; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #08243a;
  background: linear-gradient(160deg, #bff3ff, #3fb7ff); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.ar-card .pw::before { content: "⚔ "; font-size: 10px; opacity: .8; }
.ar-card .ab { margin-top: 3px; max-width: 100%; padding: 2px 6px; border-radius: var(--r-xs); font-size: 9px; font-weight: 800; line-height: 1.15;
  background: rgba(0,0,0,.32); color: #fff3c4; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-card .lvs { font-size: 9px; font-weight: 700; opacity: .75; }
.ar-hand .ar-card { min-height: 148px; padding-top: 14px; }
.ar-hand .ar-card.tired { filter: saturate(.45) brightness(.8); }
.ar-hand .ar-card .tired-x { position: absolute; top: 30px; left: 4px; right: 4px; z-index: 2; font-size: 9px; font-weight: 900; text-align: center;
  padding: 2px 0; border-radius: var(--r-xs); background: rgba(10, 20, 40, .78); color: #9fe3ff; }

/* энергия: кристаллы */
.ar-en { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; }
.ar-en i { width: 9px; height: 12px; background: rgba(255,255,255,.12); clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%); transition: background .3s; }
.ar-en i.on { background: linear-gradient(160deg, #c9f6ff, #34b4ff); filter: drop-shadow(0 0 3px rgba(80, 190, 255, .9)); }
.ar-en b { margin-left: 4px; font-size: 12px; color: #9fe3ff; font-variant-numeric: tabular-nums; }
.ar-en.sm i { width: 6px; height: 8px; } .ar-en.sm b { font-size: 10px; }

/* очки до победы */
.ar-pips { display: flex; gap: 5px; }
.ar-pips i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); }
.ar-pips i.on { background: radial-gradient(circle at 35% 30%, #fff6c9, #f5c451 55%, #b8801a); box-shadow: 0 0 10px rgba(245, 196, 81, .8); animation: arPip .5s var(--ease-spring) both; }
@keyframes arPip { from { transform: scale(.2); } }

/* правило дня, предвидение, сработавшие способности */
.ar-mod { padding: 5px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; background: rgba(var(--aura1-rgb), .25); box-shadow: inset 0 0 0 1px rgba(var(--aura1-rgb), .5); }
.ar-seer { padding: 6px 12px; border-radius: var(--r-sm); font-size: 13px; background: rgba(120, 90, 255, .22); box-shadow: inset 0 0 0 1px rgba(160, 130, 255, .5); }
.ar-abs { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ar-ab { padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; animation: arAb .6s var(--ease-spring) both .5s; }
.ar-ab.me { background: rgba(80, 190, 255, .25); box-shadow: inset 0 0 0 1px rgba(110, 210, 255, .6); }
.ar-ab.op { background: rgba(255, 100, 120, .22); box-shadow: inset 0 0 0 1px rgba(255, 130, 150, .55); }
@keyframes arAb { from { opacity: 0; transform: translateY(8px) scale(.8); } }
.ai-mod { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; font-weight: 800; font-size: 15px; animation: arAb .5s both .4s; }

/* эмоции */
.ar-side { position: relative; }
.ar-side .av { position: relative; }
.ar-bubble { position: absolute; z-index: 4; font-size: 26px; padding: 4px 8px; border-radius: var(--r-md); background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.35);
  animation: arBubble 3.2s ease forwards; pointer-events: none; }
.ar-bubble.op { top: 34px; left: 22px; } .ar-bubble.me { bottom: 34px; left: 22px; }
@keyframes arBubble { 0% { opacity: 0; transform: scale(.3); } 10% { opacity: 1; transform: scale(1.1); } 18% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.ar-emo-btn { width: 36px; height: 36px; border-radius: var(--r-sm); font-size: 18px; background: rgba(255,255,255,.1); }
.ar-emo-pop { position: absolute; right: 8px; bottom: calc(100% + 6px); z-index: 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px;
  border-radius: var(--r-lg); background: rgba(20, 14, 48, .96); box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.12); animation: arAb .25s both; }
.ar-emo-pop button { font-size: 24px; width: 46px; height: 42px; border-radius: 10px; }
.ar-emo-pop button:active { background: rgba(255,255,255,.12); }
.ar-side.boss { box-shadow: inset 0 0 0 1.5px rgba(255, 170, 60, .7), 0 0 24px -8px rgba(255, 140, 40, .8); }

/* лобби: правило дня и испытание */
.ar-today { display: grid; gap: 8px; margin-bottom: 10px; }
.ar-modcard, .ar-boss { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); text-align: left; color: inherit; width: 100%; }
.ar-modcard { background: linear-gradient(120deg, rgba(var(--aura1-rgb), .28), rgba(var(--aura1-rgb), .08)); box-shadow: inset 0 0 0 1px rgba(var(--aura1-rgb), .4); }
.ar-modcard .e, .ar-boss .e { font-size: 34px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.ar-modcard .grow, .ar-boss .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ar-modcard small, .ar-boss small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.ar-modcard b, .ar-boss b { font-size: 16px; }
.ar-boss { background: linear-gradient(120deg, rgba(255, 140, 40, .26), rgba(200, 40, 60, .16)); box-shadow: inset 0 0 0 1px rgba(255, 160, 70, .5); }
.ar-boss .e { animation: orbIdle 3s ease-in-out infinite; }
.ar-boss .ar-boss-rw { color: #ffd59a; }
.ar-boss .go { display: grid; place-items: center; min-width: 58px; padding: 8px 10px; border-radius: var(--r-sm); font-weight: 900; background: #ffb347; color: #3a1800; }
.ar-boss .go small { color: #5a2c00; font-size: 10px; }
.ar-boss.off { opacity: .6; } .ar-boss.off .go { background: rgba(255,255,255,.12); color: var(--muted); }

/* колода: правила и способности */
@media (prefers-reduced-motion: reduce) { .ar-pips i.on, .ar-ab, .ar-bubble, .ai-mod, .ar-boss .e { animation: none !important; } }

/* ===== 👥 рекорды друзей · 📖 альбом · 📢 лента каналов ===== */
.fr-board { display: grid; gap: 6px; margin-bottom: 14px; }
.fb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); }
.fb-row.me { box-shadow: inset 0 0 0 1.5px var(--accent); }
.fb-place { width: 24px; text-align: center; font-weight: 900; font-size: 15px; }
.fb-ava { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(var(--aura1-rgb), .35); }
.fb-row .grow { flex: 1; min-width: 0; } .fb-row .grow b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-row .grow small { color: var(--muted); font-size: 11px; }
.fb-w { display: grid; text-align: center; line-height: 1.05; } .fb-w b { font-size: 17px; color: var(--accent); } .fb-w small { font-size: 9px; color: var(--muted); }
.album-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin: 4px 0 10px; border-radius: var(--radius); text-align: left; color: inherit;
  background: linear-gradient(120deg, rgba(var(--aura2-rgb), .18), rgba(var(--aura1-rgb), .14)); box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .35); }
.album-card .e { font-size: 30px; } .album-card .grow { flex: 1; min-width: 0; display: grid; } .album-card small { color: var(--muted); font-size: 12px; }
.album-card.ready { box-shadow: inset 0 0 0 2px var(--accent), var(--glow); }
.al-set { padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r-lg); background: var(--surface-2); }
.al-set.done { box-shadow: inset 0 0 0 1.5px var(--accent); }
.al-top { display: flex; align-items: center; gap: 10px; } .al-top .e { font-size: 26px; } .al-top .grow { flex: 1; min-width: 0; display: grid; }
.al-top small { color: var(--muted); font-size: 12px; }
.al-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.al-slot { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 22px; background: rgba(255,255,255,.05);
  filter: grayscale(1) brightness(.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.al-slot img { width: 30px; height: 30px; object-fit: contain; }
.al-slot.have { filter: none; background: rgba(var(--aura2-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .45); }
.feed-it.done { opacity: .7; }

/* 🔁 кнопка ждёт ответа сервера (защита от двойного нажатия) */
button.is-busy, .btn.is-busy { opacity: .6; pointer-events: none; }

/* ===== 🧭 Мой путь · рейд · мини-игра · витрина (этап 6) ===== */
.path-card { display: flex; align-items: center; gap: 12px; width: 100%; margin: 10px 0; padding: 12px 14px; border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: var(--r-lg); background: var(--surface); color: inherit; text-align: left; font: inherit; }
.path-card .e, .pt-it .e, .pw-today .e, .rd-top .e { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.path-card small { display: block; color: var(--muted); font-size: 11px; }
.path-card b { display: block; font-size: 14px; margin: 1px 0 6px; }
.path-card .grow, .pt-it .grow, .pw-today .grow, .rd-top .grow { flex: 1; min-width: 0; }
.pt-bar { display: block; height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.pt-bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); transition: width .4s ease; }
.pt-bar.ok > i { background: var(--win); }
.pt-bar.hp > i { background: linear-gradient(90deg, #ff4d6d, #ff9f43); }
.path-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 2px 10px; }
.path-head h2 { margin: 0; font-size: 22px; }
.path-head small { color: var(--muted); }
.pw-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.pw-d { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 10px; background: var(--surface); font-size: 11px; color: var(--muted); }
.pw-d b { font-weight: 600; }
.pw-d i { font-style: normal; font-size: 14px; min-height: 18px; }
.pw-d.now { outline: 2px solid var(--accent); color: var(--text, #fff); }
.pw-today { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r-md); background: var(--surface); }
.pw-today small, .pt-it small { display: block; color: var(--muted); font-size: 12px; margin: 2px 0 6px; overflow-wrap: anywhere; }
.pt-it { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 8px; padding: 10px 12px; border: 0; border-radius: var(--r-md); background: var(--surface);
  color: inherit; text-align: left; font: inherit; }
.pt-it b { display: block; font-size: 14px; }
.pt-it.big { padding: 14px; }
.pt-it.ready { box-shadow: inset 0 0 0 1.5px var(--win); }
.pt-it.done { opacity: .6; }
.pt-it.lock { opacity: .5; }
.pt-it .go { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--accent); }
.pt-it.ready .go { color: var(--win); }
.pr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.pr-b { padding: 8px; border-radius: var(--r-md); background: var(--surface); min-width: 0; }
.pr-b.full { box-shadow: inset 0 0 0 1.5px var(--win); }
.pr-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.pr-h b { font-size: 12px; } .pr-h small { color: var(--muted); font-size: 11px; }
.pr-it { display: flex; gap: 4px; align-items: flex-start; width: 100%; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit;
  font-size: 11.5px; line-height: 1.25; text-align: left; overflow-wrap: anywhere; }
.pr-it i { font-style: normal; flex: 0 0 12px; color: var(--muted); }
.pr-it.done { color: var(--muted); } .pr-it.done i { color: var(--win); }
.pt-locks { display: flex; flex-direction: column; gap: 4px; margin: 6px 2px 14px; font-size: 12px; color: var(--muted); }
.rd-card { padding: 12px 14px; margin: 4px 0 10px; border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(255,77,109,.16), rgba(155,92,255,.12)), var(--surface); }
.rd-card.off { display: flex; gap: 10px; align-items: center; }
.rd-card.off small { display: block; color: var(--muted); font-size: 12px; }
.rd-card.win { box-shadow: inset 0 0 0 1.5px var(--win); }
.rd-top { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.rd-top small { display: block; color: var(--muted); font-size: 11px; }
.rd-hp small { display: block; margin: 4px 0 6px; color: var(--muted); font-size: 12px; }
.rd-me { font-size: 13px; margin-bottom: 4px; }
.rd-rw { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; flex-wrap: wrap; }
.mg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.mg-grid.off { opacity: .45; pointer-events: none; }
.mg-c { aspect-ratio: 1; border: 0; border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted); font-size: 26px; transition: transform .25s ease, background .2s; }
.mg-c.up { background: var(--surface); color: inherit; transform: rotateY(180deg); }
.mg-c.up span { display: inline-block; transform: rotateY(180deg); }
.mg-c.ok { box-shadow: inset 0 0 0 2px var(--win); }
.mg-foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.card-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 10px 0; border-radius: var(--r-lg); background: var(--surface); }
.card-row .e { font-size: 24px; } .card-row .grow { flex: 1; min-width: 0; }
.card-row small { display: block; color: var(--muted); font-size: 12px; }
.row-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.pc-league { text-align: center; margin: 4px 0 8px; }
.pc-titles { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; }
.pc-titles .chip { padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-2); font-size: 12px; }
.pc-gifts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.pc-g { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: var(--r-sm); background: var(--surface); font-size: 12px; }
.pc-g img, .pc-g .ico { width: 48px; height: 48px; }
.pc-sets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pc-sets span { padding: 4px 8px; border-radius: 10px; background: var(--surface); font-size: 12px; opacity: .55; }
.pc-sets span.done { opacity: 1; box-shadow: inset 0 0 0 1px var(--win); }
@media (prefers-reduced-motion: reduce) { .mg-c { transition: none; } .pt-bar > i { transition: none; } }
.pr-soon { display: block; color: var(--muted); font-size: 11px; line-height: 1.3; }

/* ===== ⚔️ Арена 3.0: сезон, Кубок, реплей, война кланов (этап 6.2) ===== */
.as-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 8px 0; border-radius: var(--r-lg); background: var(--surface); }
.as-card.cup { background: linear-gradient(135deg, rgba(240,185,58,.16), rgba(155,92,255,.10)), var(--surface); }
.as-card .e { font-size: 26px; flex: 0 0 auto; } .as-card .grow { flex: 1; min-width: 0; }
.as-card small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; } .as-card b { display: block; font-size: 14px; margin: 1px 0; }
.tb-round { margin-bottom: 10px; }
.tb-m { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.tb-m i { font-style: normal; color: var(--muted); font-size: 11px; }
.tb-p { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 10px; background: var(--surface); font-size: 13px; overflow-wrap: anywhere; }
.tb-p small { display: block; color: var(--muted); font-size: 11px; }
.tb-p.me { box-shadow: inset 0 0 0 1.5px var(--accent); } .tb-p.w { box-shadow: inset 0 0 0 1.5px var(--win); } .tb-p.l { opacity: .5; } .tb-p.tbd { color: var(--muted); }
.rp-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; margin: 6px 0 10px; font-size: 13px; }
.rp-head b { font-size: 22px; }
.rp-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.rp-r { padding: 8px; border-radius: var(--r-sm); background: var(--surface); animation: rpIn .35s ease both; }
.rp-r > small { color: var(--muted); font-size: 11px; }
.rp-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.rp-c { display: flex; flex-direction: column; align-items: center; padding: 6px; border-radius: 10px; background: var(--surface-2); font-size: 12px; }
.rp-c b { font-size: 24px; font-weight: 400; } .rp-c i { font-style: normal; color: var(--muted); } .rp-c.w { box-shadow: inset 0 0 0 1.5px var(--win); }
.rp-s { text-align: center; font-weight: 700; } .rp-s small { display: block; color: var(--accent); font-size: 11px; }
.rp-ev { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--accent); }
@keyframes rpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cw-card { padding: 12px 14px; margin-bottom: 10px; border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(255,77,109,.14), rgba(80,140,255,.12)), var(--surface); }
.cw-card.off { background: var(--surface); } .cw-card.off small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.cw-card.win { box-shadow: inset 0 0 0 1.5px var(--win); }
.cw-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cw-top b { font-size: 14px; overflow-wrap: anywhere; } .cw-top small { color: var(--muted); font-size: 12px; }
.cw-score { display: flex; justify-content: center; gap: 10px; align-items: baseline; margin: 6px 0; } .cw-score b { font-size: 26px; }
.cw-card > small { display: block; margin: 6px 0; }
.cw-link { margin-bottom: 10px; } .cw-link .ft-form { display: flex; gap: 6px; margin-top: 6px; } .cw-link .input { flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .rp-r { animation: none; } }
.ar-card.r-rare { box-shadow: 0 0 0 1.5px #5aa9ff inset; } .ar-card.r-epic { box-shadow: 0 0 0 1.5px #c07bff inset, 0 0 12px rgba(192,123,255,.25); }
.ar-card { position: relative; }

/* ===== 🤝 этап 7: помощь друга, серия вдвоём, таблица недели ===== */
.sc-card { display: grid; gap: 8px; margin-bottom: 14px; }
.sc-card p { margin: 0; }
.hp-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.hp-stats b { color: var(--text); }
.hp-who { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-gift { display: grid; justify-items: center; gap: 2px; margin: 6px 0 10px; }
.hp-gift .e { font-size: 44px; line-height: 1; }
.hp-gift small { color: var(--muted); }
.duo-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); flex-wrap: wrap; }
.duo-row .grow { flex: 1; min-width: 160px; }
.duo-row .grow b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duo-row .grow small { display: block; color: var(--muted); font-size: 11px; }
.duo-fire { display: grid; place-items: center; min-width: 44px; height: 44px; border-radius: var(--r-md); background: rgba(255, 140, 50, .14); font-size: 18px; line-height: 1; }
.duo-fire b { font-size: 13px; }
.duo-fire.off { filter: grayscale(1); opacity: .6; }
.duo-act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.duo-act .btn-sm { min-height: 36px; }
.duo-x { min-width: 36px; }
.wb-tabs { display: flex; gap: 6px; }
.wb-tabs button { flex: 1; min-height: 36px; border-radius: var(--r-sm); border: 0; background: var(--surface-2); color: var(--muted); font: inherit; font-weight: 600; }
.wb-tabs button.active { background: var(--accent); color: #1a1200; }
.wb-me { font-size: 13px; padding: 6px 2px; }
#wkBoard > small { color: var(--muted); font-size: 11px; }

/* ===== 📣 этап 8: предложения партнёров, кейс бренда, бренд-оформление, спонсор события ===== */
.pt-box { display: grid; gap: 8px; margin-top: 14px; }
.pt-box:empty { display: none; }
.pt-card { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-lg); background: var(--surface-2); text-align: left; color: inherit; border: 0; font: inherit; width: 100%; }
.pt-top { display: flex; align-items: center; gap: 10px; }
.pt-top .e { font-size: 24px; }
.pt-top .grow { flex: 1; min-width: 0; }
.pt-top .grow b { display: block; }
.pt-top .grow small { display: block; color: var(--muted); font-size: 12px; }
.pt-top .go { color: var(--muted); font-size: 18px; }
.pt-row { display: flex; gap: 6px; align-items: center; }
.pt-row .input { flex: 1; min-width: 0; text-transform: uppercase; min-height: 40px; }
.pt-row .btn { min-height: 40px; }
.pt-done { font-size: 13px; color: var(--win); }
.qz-q { display: grid; gap: 6px; margin: 10px 0; }
.qz-o { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--surface-2); background: var(--surface-2); color: inherit; font: inherit; text-align: left; }
.qz-o.ok { border-color: var(--win); box-shadow: inset 0 0 0 1px var(--win); }
.qz-o.bad { border-color: #ff4d6d; opacity: .8; }
.bc-card .ad-l { margin-top: 2px; }
.bc-prizes { display: grid; gap: 6px; margin: 10px 0; }
.bc-p { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); }
.bc-p .grow { flex: 1; } .bc-p .grow small { display: block; color: var(--muted); font-size: 11px; }
.bc-code { font-size: 18px; letter-spacing: 1px; user-select: all; }
.brand-skin { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bc, #9b5cff) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc, #9b5cff) 50%, transparent); }
.brand-skin .e { font-size: 22px; } .brand-skin .grow { flex: 1; min-width: 0; }
.ev-sponsor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; }
.ev-sponsor .ad-l { flex-basis: 100%; }
.pt-box, .pt-card { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.pt-row { flex-wrap: wrap; }
.pt-row .input { flex: 1 1 120px; width: auto; }
.pt-top .btn { flex-shrink: 0; }

/* ===================== ✨ ЭТАП 9: движение, микровзаимодействия, сцены, доступность ===================== */
/* отклик на нажатие ≤ 100 мс */
button, .btn, [data-act] { transition: transform var(--dur-press) var(--ease-out), filter var(--dur-press); }
button:active:not(:disabled), .btn:active:not(:disabled) { transform: scale(.97); filter: brightness(1.08); }
/* зона нажатия ≥ 44 px без изменения вида: невидимое поле вокруг маленьких кнопок */
:where(.btn, .icon-btn, .duo-x, .top-bal, .back, .reset-link, .pr-it, .faq-q, .faq-link, .seg button, .wb-tabs button, .steps button, button[data-mult], .rk-gifts) { position: relative; }   /* :where — не перебивает чужое позиционирование */
:where(.btn, .icon-btn, .modal-close, .duo-x, .top-bal, .back, .reset-link, .pr-it, .faq-q, .faq-link, .seg button, .wb-tabs button, .steps button, button[data-mult], .rk-gifts)::after { content: ""; position: absolute; inset: 50% auto auto 50%;
  width: max(100%, var(--tap)); height: max(100%, var(--tap)); transform: translate(-50%, -50%); }
/* баланс подпрыгивает, когда долетели монеты */
.top-bal.bump { animation: balBump .45s var(--ease-spring); }
@keyframes balBump { 40% { transform: scale(1.12); } }
/* скелетоны на загрузке — общий .skel (.skel-row) из основного стиля */
/* ⚙️ «Звук и эффекты» */
.fx-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.fx-row.col { flex-direction: column; align-items: stretch; }
.fx-row b { display: block; } .fx-row small { color: var(--muted); font-size: var(--fs-xs); }
.fx-row .grow { flex: 1; min-width: 0; }
.fx-row input[type=range] { width: 140px; accent-color: var(--accent); min-height: var(--tap); }
.sw { width: 52px; height: 32px; border-radius: var(--r-pill); background: var(--surface-2); position: relative; flex-shrink: 0; transition: background var(--dur-fast); }
.sw i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform var(--dur-fast) var(--ease-out); }
.sw.on { background: var(--win); } .sw.on i { transform: translateX(20px); }
.fx-seg { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: var(--r-sm); margin-top: var(--s2); }
.fx-seg button { flex: 1; min-height: 40px; border-radius: 9px; font-size: var(--fs-sm); color: var(--muted); }
.fx-seg button.on { background: var(--accent); color: #1a1200; font-weight: 700; }
/* 🏅 церемонии: эмблема с лучами, ячейки набора по очереди */
.result-card.cer .emoji { position: relative; animation: cerIn var(--dur-peak) var(--ease-spring) both; }
.result-card.cer .emoji::before { content: ""; position: absolute; inset: -60%; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(var(--aura2-rgb), .28) 0 10deg, transparent 10deg 30deg); animation: cerRays 6s linear infinite;
  mask: radial-gradient(circle, #000 35%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); }
@keyframes cerIn { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.15) rotate(4deg); opacity: 1; } 100% { transform: none; } }
@keyframes cerRays { to { transform: rotate(1turn); } }
.al-cer { justify-content: center; margin: var(--s3) 0; perspective: 600px; }
.al-cer .al-slot { animation: alLight .5s var(--ease-spring) both; animation-delay: calc(.25s + var(--i, 0) * .14s); }
@keyframes alLight { 0% { transform: rotateY(90deg) scale(.6); filter: grayscale(1) brightness(.5); } 60% { transform: rotateY(0) scale(1.12); box-shadow: 0 0 24px rgba(var(--aura2-rgb), .8); } 100% { transform: none; } }
/* ⚔️ Арена: карта соперника переворачивается, решающий раунд — замедленно, вспышки способностей */
.ar-slot.fly-top { perspective: 700px; }
.ar-slot.fly-top .ar-card { animation: arFlyTop .5s cubic-bezier(.3, 1.3, .5, 1) both, arFlip .55s .05s var(--ease-out) both; backface-visibility: hidden; }
@keyframes arFlip { 0% { transform: rotateY(180deg); } 100% { transform: rotateY(0); } }
.ar-board.clash.decisive { animation-duration: .5s; animation-delay: .8s; }
.ar-board.decisive .ar-slot .ar-card { animation-duration: .9s; }
.ar-board.decisive .ar-vs.boom { animation-delay: .75s; }
.ar-round.decisive { color: var(--accent); font-weight: 800; letter-spacing: .3px; }
.ar-board.ab-guard .ar-slot.lose::after, .ar-board.ab-golem .ar-slot.lose::after { content: ""; position: absolute; inset: -8px; border-radius: 20px;
  box-shadow: 0 0 0 3px #58d4ff, 0 0 28px #58d4ff; animation: abFlash .6s .5s both; pointer-events: none; }
.ar-board.ab-dragon .ar-vs, .ar-board.ab-bomber .ar-vs { text-shadow: 0 0 14px #ff8a5c, 0 0 28px #ff4d4d; }
@keyframes abFlash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.ar-slot.fly-bot.lose .ar-card { animation: arFlyBot .5s cubic-bezier(.3, 1.3, .5, 1) both, arHit .35s .55s both; }
.ar-slot.fly-top.lose .ar-card { animation: arFlyTop .5s cubic-bezier(.3, 1.3, .5, 1) both, arFlip .55s .05s var(--ease-out) both, arHit .35s .6s both; }
@keyframes arHit { 25% { translate: -5px 0; } 50% { translate: 4px 0; } 75% { translate: -2px 0; } }
/* 🎚 качество эффектов: на минимуме и в экономии трафика убираем тяжёлые фоновые анимации */
html.saver .co-rays, html.saver .result-card.cer .emoji::before { animation-iteration-count: 1 !important; }
html[data-fxq="0"] .result-card.cer .emoji::before, html[data-fxq="0"] .co-rays { display: none; }
@media (prefers-reduced-motion: reduce) {
  .result-card.cer .emoji, .al-cer .al-slot, .ar-slot.fly-top .ar-card, .ar-slot.fly-bot.lose .ar-card, .ar-slot.fly-top.lose .ar-card, .top-bal.bump { animation: none !important; }
  .result-card.cer .emoji::before { display: none; }
  button:active, .btn:active { transform: none; }
}
.fu-btn { white-space: normal; padding-left: 8px; padding-right: 8px; overflow-wrap: anywhere; }   /* крупный шрифт: цена переносится, а не вылезает */

/* ===================== 📱 ЭТАП 10: полноэкранный режим, ярлык, параллакс ===================== */
/* в полноэкранном режиме Telegram отдаёт безопасные зоны CSS-переменными (Bot API 8.0) */
html.tg-full .topbar { padding-top: calc(10px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }
html.tg-full .tabbar { padding-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + 6px); }
html.tg-full .ar-screen, html.tg-full .chest-open { padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }
#homeShortcut { margin: 8px 0 12px; }
.result-card .emoji { translate: var(--tx, 0) var(--ty, 0); transition: translate .2s var(--ease-out); }

/* 🤝 econ_v11: сила друзей на Арене */
.ally-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3, 12px); margin: var(--s2, 8px) 0; display: grid; gap: 8px; }
.ally-top { display: flex; gap: 10px; align-items: center; }
.ally-top .e { font-size: 28px; }
.ally-top small { display: block; color: var(--muted); font-size: 12px; }
.ally-cta { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.ally-fresh { color: var(--aura2); font-size: 12px; }
.ally-chip { font-weight: 600; color: var(--aura2); font-size: 11px; }

/* 🛟 этап 11: помощь, обращения, жалобы */
.row-gap { display: inline-flex; gap: 6px; }
/* P2 audit: было 22×22 (tiny); видимый размер ≥28, зона ::after уже тянется до --tap */
.faq-q { display: inline-grid; place-items: center; width: 28px; height: 28px; min-width: 28px; min-height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 700; vertical-align: middle; margin-left: 4px; cursor: pointer; flex: none; }
.faq-link { background: none; border: 0; color: var(--muted); font-size: 12px; text-decoration: underline; padding: 6px 0; cursor: pointer; display: block; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); padding: 8px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.faq-item p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.sup-actions { display: grid; gap: 8px; margin-top: 12px; }
.sup-t { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; margin-bottom: 10px; display: grid; gap: 6px; }
.sup-h { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.sup-m { font-size: 13px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); overflow-wrap: anywhere; white-space: pre-wrap; }
.sup-m small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 2px; }
.sup-m.adm { border-left: 3px solid var(--aura2); }
.sup-rate { display: flex; gap: 4px; }
.sup-rate button { font-size: 22px; background: none; border: 0; cursor: pointer; filter: grayscale(.6); }
.sup-rate button:hover, .sup-rate button:focus-visible { filter: none; }
.sup-re { display: flex; gap: 6px; }
#supBody select.input, #supBody textarea.input { width: 100%; margin: 4px 0 10px; }
.card-row.fx-open { width: 100%; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.card-row.fx-open .chev { color: var(--muted); font-size: 20px; }

/* ===== 🏁 Гонка за приз (этап 12) ===== */
.race-card { display: flex; flex-direction: column; gap: var(--s2); padding: 12px 14px; margin: 0 0 12px; border-radius: var(--radius); color: var(--text);
  background: linear-gradient(120deg, rgba(var(--aura2-rgb), .22), rgba(var(--aura1-rgb), .18)); box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .4); }
.race-head { display: flex; flex-direction: column; gap: 4px; }
.race-head b { font-size: var(--fs-md); }
.race-head small, .race-meta, .race-note { color: var(--muted); font-size: var(--fs-sm); line-height: 1.35; }
.race-scale { display: flex; gap: var(--s2); flex-wrap: wrap; }
.race-day { padding: 6px 10px; border-radius: var(--r-pill); background: rgba(0,0,0,.25); font-size: var(--fs-sm); white-space: nowrap; }
.race-day.done { background: rgba(52, 211, 153, .22); }
.race-day.today { box-shadow: inset 0 0 0 1px var(--accent); }
.race-meta { display: flex; flex-direction: column; gap: 2px; }
.race-note.ok { color: var(--win); }
.race-act { display: flex; gap: var(--s2); }
.race-act .btn { flex: 1; min-height: 44px; }

/* 🎨 этап 12: свои иконки Арены (спрайт icons/arena.svg), рамки редкости — рамкой карты, а не цветом иконки */
.aic { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; flex: none; }
.ar-card .e { display: grid; place-items: center; font-size: 40px; color: #fff; }
.ar-card .e .aic { width: 44px; height: 44px; filter: none; }
.ar-card .cl .aic.cls { width: 16px; height: 16px; color: #fff; }
.ar-card.r-common { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.ar-card.r-rare { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(255, 255, 255, .4); }
.ar-card.r-epic { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(255, 255, 255, .45), 0 0 14px rgba(255, 255, 255, .32); }
.aic.cls.power { color: var(--cls-power); } .aic.cls.magic { color: var(--cls-magic); } .aic.cls.agile { color: var(--cls-agile); }

/* 🤝 этап 12: награда за друга */
.ally-top .e { display: grid; place-items: center; width: 40px; height: 40px; font-size: 28px; border-radius: var(--r-md, 12px); background: var(--surface-2); }
.ally-top .e .aic { width: 30px; height: 30px; color: var(--cls-power); }
.ally-top .acc { color: var(--aura2); }
.ally-wait { display: flex; font-size: 12.5px; color: var(--muted); padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-2); }
.p-squad { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .p-squad b { color: var(--text); }

/* 🎨 цветные иконки: светлая подложка-медальон, чтобы рисунок не терялся на цвете класса */
.ar-card .e { width: 58px; height: 58px; margin: 2px auto 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 70%); }
.ar-card .e .aic { width: 50px; height: 50px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.ally-top .e .aic { color: inherit; }

/* 📅 этап 12: главный экран — не больше 4 блоков сверху: гонка/мой подарок → «Сегодня» → Арена → «Лига друзей»; остальное ниже */
#page-home.active { display: flex; flex-direction: column; }
#page-home > * { order: 200; }
#page-home > #appealRow, #page-home > #homeShortcut, #page-home > .onb-bar { order: 0; }
.today-card { display: flex; flex-direction: column; gap: var(--s2); padding: 12px 14px; margin: 0 0 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.td-head { display: flex; justify-content: space-between; align-items: baseline; } .td-head b { font-size: var(--fs-md); } .td-head small { color: var(--muted); }
.td-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.td-step { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border: 0; border-radius: var(--r-md, 12px); background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 700; min-height: 44px; }
.td-step.now { box-shadow: inset 0 0 0 1.5px var(--aura2); } .td-step.done { opacity: .75; } .td-ic { font-size: 20px; }
.td-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); } .td-note.ok { color: var(--win); }
.lg-rows { display: grid; gap: 4px; } .lg-row { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--r-sm); font-size: 13px; }
.lg-row.me { background: var(--surface-2); font-weight: 800; } .lg-pl { width: 18px; color: var(--muted); } .lg-row small { color: var(--muted); }

/* 🚀 этап 12: знакомство без заслонок — узкая строка и пульс на нужной кнопке */
.onb-bar { order: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; margin: 0 0 10px; border-radius: var(--radius); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--aura2); font-size: var(--fs-sm); font-weight: 700; }
.onb-n { color: var(--aura2); font-weight: 900; } .onb-bar .grow { flex: 1; min-width: 0; }
.onb-x { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--muted); font-size: 16px; }
.onb-pulse { animation: onbRing 1.5s var(--ease-out) infinite; }
@keyframes onbRing { 0% { box-shadow: 0 0 0 0 rgba(var(--aura2-rgb), .65); } 100% { box-shadow: 0 0 0 10px rgba(var(--aura2-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .onb-pulse { animation: none; box-shadow: 0 0 0 3px rgba(var(--aura2-rgb), .5); } }

/* 🏁 приз гонки: крупная картинка NFT-подарка, без цифр */
.race-prize { display: flex; align-items: center; gap: 14px; margin: 10px 0; padding: 10px 14px; border-radius: var(--radius); background: radial-gradient(120% 140% at 0% 50%, rgba(var(--aura2-rgb), .28), rgba(var(--aura1-rgb), .12) 60%, transparent); box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .45); }
.rp-art { display: flex; flex: none; filter: drop-shadow(0 6px 14px rgba(var(--aura2-rgb), .55)); }
.rp-art img, .rp-e { width: 96px; height: 96px; object-fit: contain; font-size: 70px; line-height: 96px; text-align: center; animation: rpFloat 3.2s ease-in-out infinite; }
.rp-art > * + * { margin-left: -22px; }
.rp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rp-txt small { color: var(--muted); font-size: var(--fs-sm); } .rp-txt b { font-size: 18px; color: var(--aura2); } .rp-txt em { font-style: normal; font-size: var(--fs-sm); opacity: .85; }
@keyframes rpFloat { 50% { transform: translateY(-4px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .rp-art img, .rp-e { animation: none; } }

/* ===== 🎁 Кейсы v3 (этап 12.8): одна система обложек, плитки одной высоты, три размера текста (24 · 15 · 12), цвета — токены ===== */
@keyframes bob { 50% { transform: translateY(-5px); } }
.cases-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.case-card { --ca: var(--aura1); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 168px; padding: 12px 10px;
  border-radius: var(--radius); cursor: pointer; overflow: hidden; border: 0;
  background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--ca) 20%, transparent), transparent 75%), var(--surface);
  box-shadow: inset 0 0 0 1px var(--line); transition: transform .12s, opacity .2s; }
.case-card.dim { opacity: .55; }
.case-art { display: grid; place-items: center; height: 80px; }
.cv { display: block; overflow: visible; filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--ca) 38%, transparent)); }
.case-name { max-width: 100%; font-size: 15px; font-weight: 700; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-price { font-size: 12px; font-weight: 700; line-height: 16px; padding: 4px 10px; border-radius: var(--r-pill); color: var(--text); background: color-mix(in srgb, var(--ca) 22%, transparent); }
.case-badge { position: absolute; top: 8px; right: 8px; font-size: 12px; font-weight: 700; line-height: 16px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); }
#page-cases .page-title { font-size: 24px; }
#page-cases .promo-art { font-size: 24px; }
#page-cases .chev { font-size: 24px; }
#page-cases .sub-title { font-size: 15px; }
#page-cases .ad-l, #page-cases .live-lbl { font-size: 12px; }
.promo[data-season] { --ca: var(--aura1); background: color-mix(in srgb, var(--ca) 16%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ca) 45%, transparent); }
.promo-art .cv { filter: none; }

/* страница кейса: обложка 128 → название → одна строка «главное внутри» → ≤ 3 главных приза → цена и «Что внутри?» */
.case-head { --ca: var(--aura1); text-align: center; margin: 4px 0 16px; border-radius: 20px;
  background: radial-gradient(60% 70% at 50% 30%, color-mix(in srgb, var(--ca) 18%, transparent), transparent 75%); }
.case-hero { display: grid; place-items: center; height: 132px; }
.case-head h2 { font-size: 24px; font-weight: 800; margin-top: 4px; }
.case-line { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--muted); }
.case-line:empty { display: none; }
.jackpots { margin-top: 12px; }
.jp-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.jp-row { display: flex; gap: 8px; justify-content: center; }
.jp { flex: 1; max-width: 110px; padding: 8px 6px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.jp.main { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ca) 55%, transparent); background: radial-gradient(90% 80% at 50% 20%, color-mix(in srgb, var(--ca) 18%, transparent), transparent 75%), var(--surface); }
.jp-ico { height: 40px; display: grid; place-items: center; font-size: 30px; }
.jp-ico .ico { width: 40px; height: 40px; object-fit: contain; }
.jp-name { font-size: 12px; font-weight: 700; line-height: 16px; height: 32px; margin-top: 4px; overflow: hidden; overflow-wrap: anywhere; }
.case-meta { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 8px; }
#page-case .back { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; }
#whatInside { min-height: 44px; padding: 0 12px; font-size: 15px; }
#page-case .multi-seg button { min-height: 44px; }
#caseDrops .items-grid.small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* «Что внутри» (13.2): группы по редкости, шанс у каждой позиции всегда виден */
.dg { margin-top: 14px; --dg: var(--r-common); } .dg.r-nft { --dg: var(--r-nft); } .dg.r-uncommon { --dg: var(--r-uncommon); } .dg.r-rare { --dg: var(--r-rare); } .dg.r-epic { --dg: var(--r-epic); } .dg.r-legendary { --dg: var(--r-legendary); } .dg.r-none { --dg: var(--r-none); }
.dg-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 6px; padding-left: 8px; border-left: 3px solid var(--dg); font-size: 13px; font-weight: 800; }
.dg-h b { color: var(--muted); font-weight: 700; }
#caseDrops .item .chance { font-size: 12px; font-weight: 700; color: var(--text); }
.pity-note { text-align: left; font-weight: 600; line-height: 1.4; margin-bottom: 4px; } .pity-note small { display: block; margin-top: 4px; font-weight: 500; opacity: .85; font-size: 12px; }
#caseDrops .boost-note { margin-bottom: 6px; padding: 8px 10px; text-align: left; font-size: 12.5px; line-height: 1.35; font-weight: 600; }
/* 🛡 гарантия на странице кейса: слово, шкала и счётчик «сколько открытий уже без редкого» */
.case-pity { display: flex; align-items: center; gap: 8px; margin: 12px auto 0; max-width: 360px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 700; text-align: left; }
.case-pity .cp-t { flex: 1; min-width: 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .case-pity .cp-c { color: var(--muted); font-weight: 700; }
.case-pity .cp-n { flex: 0 0 56px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; } .case-pity .cp-n i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
#caseDrops .item .name { white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#caseDrops .item .price { white-space: nowrap; }

/* ===== 🧪 Демо-версия и ⚔️ вызов на дуэль (этап 12.9) ===== */
.demo-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  min-height: 30px; padding: 5px 16px; border: 0; color: var(--text); font-size: 12px; line-height: 1.2; text-align: center;
  background: linear-gradient(90deg, rgba(var(--aura1-rgb), .28), rgba(var(--aura2-rgb), .18)); border-bottom: 1px solid var(--line); }
.demo-bar b { color: var(--aura2); font-weight: 800; }
.demo-bar span { color: var(--muted); }
.duel-inv-m { align-items: center; padding: 16px; }
.duel-inv { position: relative; width: 100%; max-width: 360px; padding: 22px 18px 18px; border-radius: var(--radius); text-align: center;
  background: radial-gradient(120% 80% at 50% 0, rgba(var(--aura1-rgb), .35), transparent 60%), var(--surface);
  box-shadow: inset 0 0 0 1.5px rgba(var(--aura2-rgb), .45), var(--shadow-2); animation: duelIn .26s cubic-bezier(.2, .9, .3, 1.2); }
.duel-inv .di-ico { font-size: 44px; line-height: 1; filter: drop-shadow(0 6px 16px rgba(var(--aura2-rgb), .5)); }
.duel-inv h3 { margin: 10px 0 2px; font-size: 18px; }
.duel-inv p { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.duel-inv .di-bar { height: 4px; margin: 0 0 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); overflow: hidden; }
.duel-inv .di-bar i { display: block; height: 100%; background: var(--aura2); transform-origin: left; animation: diBar var(--t, 30s) linear forwards; }
.duel-inv .di-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.duel-inv .btn { min-height: 48px; }
@keyframes duelIn { from { transform: translateY(14px) scale(.96); opacity: 0; } }
@keyframes diBar { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .duel-inv { animation: none; } }
.demo-ico { font-size: 44px; text-align: center; line-height: 1.1; }
.demo-t { text-align: center; }
.demo-list { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 12px; }
.demo-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.35; text-align: left; }
.demo-list .e { flex: none; font-size: 20px; }

/* 🎨 оформление на витрине (13.2) */
.pc-hero.has-bg { padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 70%, transparent), color-mix(in srgb, var(--c2) 70%, transparent)); }
.pc-ava { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; overflow: visible; }
/* 🎨 рамка на аватаре: кольцо в спрайте ~r=24…27 / viewBox 64 → 130% (−15%) — отверстие = круг .ava-face.
   Явные left/top/width/height (не inset+auto): иначе на неквадратном хосте центр уезжает вверх.
   filter:none — .cos-f drop-shadow(0 3px …) из cards.css визуально сдвигает рамку вниз и перекрывает lvl-badge.
   Без translate(%%) в Telegram WebView. Не .cos-f {42px} — cards.css :not(.cos-fr). */
svg.cosv.cos-fr {
  position: absolute; left: -15%; top: -15%; width: 130%; height: 130%; right: auto; bottom: auto;
  margin: 0; padding: 0; border: 0; transform: none; filter: none; pointer-events: none; overflow: visible; z-index: 1; display: block;
}
.me-ava, .avatar, .pc-ava, .hl-ava { position: relative; }
.me-ava .ava-face, .avatar .ava-face { background: inherit; }
.chip.cos-ti { background: color-mix(in srgb, var(--aura2) 30%, transparent); font-weight: 800; }
.rd-cos { position: absolute; right: -4px; bottom: -4px; display: grid; } .rd-cos .cosv { width: 18px; height: 18px; } .rd-cos .cos-b { width: 14px; height: 18px; } .rd-cos .cos-w { width: 20px; height: 14px; } .rd-cos .cos-t { font-size: 0; padding: 4px 6px; } .rd-cos .cos-e { font-size: 15px; }
.rw-cos .cosv { width: 28px; height: 28px; } .rw-cos .cos-b { width: 22px; height: 28px; } .rw-cos .cos-w { width: 30px; height: 22px; } .rw-cos .cos-e { font-size: 24px; }

/* 🏆 engage_v1: витрина «Призы недели» (главная, самый верх) и Зал славы. Цен и звёзд нет — только картинки подарков */
.ws-card { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: 14px; margin: 0 0 12px; border-radius: var(--radius); overflow: hidden; color: var(--text);
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--aura1-rgb), .38), transparent 60%), radial-gradient(90% 80% at 100% 100%, rgba(var(--aura2-rgb), .22), transparent 65%), var(--surface);
  box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .35), var(--glow); }
.ws-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.ws-head b { font-family: var(--display); font-size: var(--fs-md); letter-spacing: .02em; }
.ws-timer { font-size: var(--fs-sm); color: var(--aura2); font-weight: 700; white-space: nowrap; }
.ws-main { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--r-lg); background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .5); }
.ws-art { display: flex; flex: none; filter: drop-shadow(0 6px 16px rgba(var(--aura2-rgb), .6)); }
.ws-art img, .ws-art .ws-e { width: 88px; height: 88px; object-fit: contain; font-size: 64px; line-height: 88px; text-align: center; }
.ws-art > * + * { margin-left: -22px; }
.ws-mt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ws-mt small { color: var(--aura2); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ws-mt b { font-size: var(--fs-md); line-height: 1.2; overflow-wrap: anywhere; }
.ws-mt em { font-style: normal; color: var(--muted); font-size: var(--fs-sm); line-height: 1.3; }
.ws-days { display: flex; gap: 6px; margin-top: 2px; }
.ws-dot { width: 22px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .16); }
.ws-dot.done { background: var(--win); } .ws-dot.today { background: var(--aura2); }
.ws-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.ws-pr { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: var(--r-md); background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.ws-pr.p1 { box-shadow: inset 0 0 0 1.5px rgba(var(--aura2-rgb), .7); background: linear-gradient(180deg, rgba(var(--aura2-rgb), .18), rgba(0, 0, 0, .22)); }
.ws-pr img, .ws-pr .ws-e { width: 56px; height: 56px; object-fit: contain; font-size: 42px; line-height: 56px; text-align: center; }
.ws-pr small { font-size: var(--fs-xs); color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-medal { position: absolute; top: 4px; left: 6px; font-size: 16px; }
.ws-me { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.35; } .ws-me.ok { color: var(--win); }
.ws-act { display: flex; gap: var(--s2); } .ws-act .btn { flex: 1; min-height: 44px; }
.ws-n { color: var(--muted); font-size: var(--fs-xs); }
#page-home.has-show .race-prize { display: none; }
.hl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); max-height: 60vh; overflow-y: auto; }
.hl-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); }
.hl-row.mine { box-shadow: inset 0 0 0 1.5px var(--aura2); }
.hl-ava { position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; font-size: 20px; border-radius: 50%; background: rgba(var(--aura1-rgb), .25); overflow: visible; }
.hl-t { display: flex; flex-direction: column; min-width: 0; flex: 1; } .hl-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hl-t small { color: var(--muted); font-size: var(--fs-xs); }
.hl-prize { display: flex; flex-direction: column; align-items: center; flex: none; max-width: 76px; }
.hl-prize img, .hl-prize .ws-e { width: 40px; height: 40px; object-fit: contain; font-size: 30px; line-height: 40px; }
.hl-prize small { font-size: 10px; color: var(--muted); max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-hide { display: flex; align-items: center; gap: 8px; margin-top: var(--s3); font-size: var(--fs-sm); min-height: 44px; }

/* ✨ engage_v1: «Аура подарка» и «Витрина подарков» */
.ga-sum { margin: 0 0 var(--s3); padding: 8px 12px; border-radius: var(--r-md); background: linear-gradient(90deg, rgba(var(--aura1-rgb), .28), rgba(var(--aura2-rgb), .14)); font-size: var(--fs-sm); line-height: 1.35; box-shadow: inset 0 0 0 1px rgba(var(--aura2-rgb), .3); }
.ga-sum b { color: var(--aura2); } .ga-sum small { display: block; color: var(--muted); margin-top: 2px; }
.ga-line { display: block; margin: 2px 0 4px; font-size: var(--fs-xs); color: var(--aura2); line-height: 1.25; }
.gs { display: inline-flex; align-items: center; } .gs-i { width: 26px; height: 26px; object-fit: contain; font-size: 20px; line-height: 26px; text-align: center; margin-right: -4px; }
.gs.sm .gs-i { width: 22px; height: 22px; font-size: 17px; line-height: 22px; } .gs.xs .gs-i { width: 18px; height: 18px; font-size: 14px; line-height: 18px; }
.gs.big { gap: 4px; margin: 6px 0; } .gs.big .gs-i { width: 48px; height: 48px; font-size: 38px; line-height: 48px; margin-right: 0; }
.gs-card { display: flex; flex-direction: column; gap: var(--s2); padding: 12px 14px; margin: 0 0 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.gs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .gs-aura { color: var(--aura2); font-size: var(--fs-sm); font-weight: 700; }

/* 🌌 «Час Ауры» + 🏁 Финал недели (engage_v1, фаза 6) */
.ah-slot { margin: 0 0 12px; flex: 0 0 auto; }
.ah-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(120, 80, 255, .16), rgba(40, 160, 255, .10)), var(--surface); }
.ah-card.ah-on { border-color: #8f6bff; box-shadow: 0 0 0 1px rgba(143, 107, 255, .5), 0 0 18px rgba(143, 107, 255, .35); animation: ahPulse 2.4s ease-in-out infinite; }
@keyframes ahPulse { 50% { box-shadow: 0 0 0 1px rgba(143, 107, 255, .8), 0 0 26px rgba(143, 107, 255, .55); } }
@media (prefers-reduced-motion: reduce) { .ah-card.ah-on { animation: none; } }
.ah-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ah-timer { font-variant-numeric: tabular-nums; font-weight: 700; }
.ah-note { color: var(--muted); }
.ah-boss { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.ah-e { font-size: 28px; }
.ah-bt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ah-bar { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ah-bar u { display: block; height: 100%; background: linear-gradient(90deg, #ff5d73, #ffb347); text-decoration: none; }
.ah-ok { font-size: 20px; }
.ws-final { margin: 8px 0; padding: 8px 10px; border-radius: 12px; background: rgba(255, 200, 60, .10); border: 1px solid rgba(255, 200, 60, .35); }
.ws-final ol { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ws-final li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.ws-final li span { width: 1.6em; color: var(--muted); }
.ws-final li i { flex: 1; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-final li.mine { font-weight: 700; color: var(--accent, #ffd34d); }

/* 🔥 growth_v1: «В Ауру» — переплавка подарка */
.item .act.melt-btn { background: linear-gradient(180deg, #ffb169, #d9561e); color: #2a0d00; font-weight: 800; }

/* 🔎 growth_v1: «Находка дня» */
.fd-card .fd-list { display: grid; gap: 6px; margin: 8px 0; }
.fd-card .fd-it { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); color: inherit; border: 1px solid rgba(255,255,255,.1); }
.fd-card .fd-it i { font-style: normal; opacity: .7; }

/* 👻 Дух Ауры (growth_v1, фаза 9) */
.sp-row { display: flex; align-items: center; gap: 12px; } .sp-row b { display: block; } .sp-row small { color: var(--muted); display: block; }
.spirit-ic { width: 40px; height: 40px; flex: none; } .spirit-ic.sp-big { width: 56px; height: 56px; } .spirit-ic.sp-opp { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; }
.spirit-ic.sleep { filter: grayscale(.7) brightness(.8); opacity: .75; } .p-spirit { margin-top: 6px; } .p-spirit .spirit-ic { width: 32px; height: 32px; }
.spirit-ic .sp-body { animation: spBob 3.2s ease-in-out infinite; transform-origin: 32px 40px; } .spirit-ic.sleep .sp-body { animation: none; }
.spirit-ic .sp-twinkle { animation: spTw 2.4s ease-in-out infinite; } .spirit-ic .sp-orbit { animation: spOrb 14s linear infinite; transform-origin: 32px 34px; }
@keyframes spBob { 50% { transform: translateY(-1.5px) scale(1.03); } } @keyframes spTw { 50% { opacity: .25; } } @keyframes spOrb { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spirit-ic .sp-body, .spirit-ic .sp-twinkle, .spirit-ic .sp-orbit { animation: none; } }


/* ===== 🏠 ГЛАВНАЯ v3: одна главная кнопка, один язык карточек ===== */
/* порядок (шаг 10): служебные 0 → герой → значки → «Сегодня» → события → Арена → прогресс → остальное */
#page-home > #hero { order: 10; } #page-home > #quickRow { order: 20; } #page-home > #todayCard { order: 30; }
#page-home > #ahHome { order: 40; } #page-home > #weekShow { order: 50; } #page-home > #raceCard { order: 60; }
#page-home > .home-arena { order: 70; } #page-home > #spiritCard { order: 80; } #page-home > #leagueCard { order: 90; } #page-home > #findCard { order: 100; }

/* герой: кнопка на всю ширину под строкой «Следующий шаг» */
.hero-next { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px 12px; padding: 0; background: none; box-shadow: none; }
.hero-next .hn-btn { grid-column: 1 / -1; width: 100%; min-height: 52px; padding: 0 16px; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-note { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--muted); margin-top: -2px; }
.hn-note.gone { display: none; }
@media (max-width: 360px) { .hero { padding: 16px 14px 14px; } .hero-ring { width: 88px; height: 88px; } .hero-pct { font-size: 28px; } .hero-goal { gap: 12px; } }

/* значки: 4 целых + край пятого */
.quick { grid-auto-columns: calc((100% - 24px) / 4.3); margin: 0 0 12px; }
.q-it { width: 100%; }
.q-it b { font-size: 11.5px; white-space: nowrap; }
.q-it small { max-width: 100%; }

/* демо-полоса: одна строка */
.demo-bar { flex-wrap: nowrap; }
.demo-bar .db-t { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* единый язык карточек: плоский фон, тонкая рамка, цвет события — только полоска слева */
.today-card, .race-card, .ws-card, #ahHome .ah-card, .home-arena, .fg-card, .aura-card, .showcase, .payouts, .now-it {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 14px 17px; margin: 0 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: none; animation: none; color: var(--text); }
.today-card::before, .race-card::before, .ws-card::before, #ahHome .ah-card::before, .home-arena::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--stripe, var(--aura1)); z-index: 1; }
#ahHome .ah-card { --stripe: var(--aura3); } #ahHome .ah-card.ah-on { border-color: var(--line); }
.ws-card, .race-card { --stripe: var(--aura2); } .home-arena { --stripe: var(--aura1); } #spiritCard { --stripe: var(--aura1); }
#todayCard { --stripe: var(--aura2); } #leagueCard { --stripe: var(--aura1); } #findCard { --stripe: var(--muted); }
.ah-slot { margin: 0; }
/* Арена: свой фон внутри общей рамки */
.home-arena { background: linear-gradient(135deg, rgba(var(--aura1-rgb), .30), rgba(var(--aura1-rgb), .10)), var(--surface); }
.home-arena::after { display: none; }
.ha-text b { font-size: 18px; letter-spacing: 0; }
/* заголовки карточек одинаковые */
.td-head b, .race-head > b, .ws-head b { font-size: 15px; font-weight: 700; }
.td-head small, .race-head > small, .ws-head small { font-size: 12px; color: var(--muted); }
.td-note, .race-note { font-size: 13px; color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.td-note.ok, .race-note.ok { color: var(--win); }

/* «Сегодня»: плитки одной высоты */
.td-steps { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.td-step { height: 64px; min-height: 64px; padding: 6px 4px; align-content: center; gap: 4px; }
.td-ic { font-size: 22px; line-height: 1; }
.td-step span:last-child { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.td-skel { height: 142px; border-radius: var(--r-md); }

/* кнопки: золотая только у героя, остальные — спокойные */
#page-home :is(.today-card, .race-card, .home-arena, .ws-card, .fd-card) :is(.btn-accent, .ha-btn),
#page-home .ha-btn { min-height: 44px; padding: 0 14px; border-radius: var(--r-md); font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--text);
  background: rgba(255,255,255,.06); border: 1px solid var(--line); box-shadow: none; text-shadow: none; }
#page-home .btn { min-height: 44px; }
.now-it { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; background: var(--surface); }
.now-it:first-child { background: var(--surface); box-shadow: none; }
#page-home #hero .hn-btn { min-height: 52px; height: 52px; }

/* ===== 🏆 ГЛАВНЫЙ ПРИЗ — первой строкой главной (race-top) ===== */
#page-home > #raceTop { order: 5; }
.race-top { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; margin: 0 0 12px; padding: 8px 12px;
  border: 1px solid rgba(var(--aura2-rgb), .55); border-radius: var(--radius); background-color: rgba(var(--aura2-rgb), .10); color: var(--text); text-align: left;
  box-shadow: 0 0 22px -8px rgba(var(--aura2-rgb), .6); }
.race-top.skel { border-color: var(--line); box-shadow: none; }
.rt-art { flex: none; width: 52px; height: 52px; display: grid; place-items: center; font-size: 38px; filter: drop-shadow(0 4px 10px rgba(var(--aura2-rgb), .5)); }
.rt-art img { width: 52px; height: 52px; object-fit: contain; }
.rt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rt-txt small { font-size: 11.5px; font-weight: 700; color: var(--aura2); letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-txt b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-txt em { font-style: normal; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-go { flex: none; font-size: 22px; color: var(--muted); }
.race-card.flash { animation: rcFlash 1.2s ease-out; }
@keyframes rcFlash { 0%, 40% { box-shadow: 0 0 0 2px var(--aura2); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .race-card.flash { animation: none; } }

/* 🎯 выбор тем при первом входе и в «Интересах»: тема + подпись */
.int-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 56px; }
.int-opt b { font-size: 14px; font-weight: 700; }
.int-opt small { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.int-grid.gate { max-height: 52vh; overflow-y: auto; }
.int-grid .int-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.own-bar { height: 6px; margin: -2px 0 10px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.own-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--aura1), var(--aura2)); border-radius: 3px; }

/* ===== 🤝 «Позови друга» (inv-card): главная, кейсы, профиль; строка после кейса дня ===== */
#page-home > #invHome { order: 35; }
.inv-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 14px 17px; margin: 0 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.inv-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--aura1); }
.inv-top { display: flex; align-items: center; gap: 12px; }
.inv-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 24px; border-radius: 12px; background: rgba(var(--aura1-rgb), .18); }
.inv-top b { display: block; font-size: 15px; font-weight: 700; } .inv-top small { display: block; font-size: 12px; color: var(--muted); }
.inv-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.inv-perks li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; line-height: 1.3; }
.inv-perks li span { flex: none; width: 22px; text-align: center; }
.inv-act { display: flex; gap: 8px; }
.inv-btn { flex: 1; min-height: 44px; border: 0; border-radius: var(--r-md); background-color: var(--aura1); color: #fff; font-size: 15px; font-weight: 800; }
.inv-my { flex: none; min-height: 44px; }
.inv-mini { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 10px; border-radius: var(--r-md); background: rgba(var(--aura1-rgb), .14);
  border: 1px solid rgba(var(--aura1-rgb), .35); font-size: 13px; text-align: left; }
.inv-mini .inv-btn { flex: none; min-height: 36px; padding: 0 14px; font-size: 13px; }
#page-cases .inv-card, #page-profile .inv-card { margin-top: 4px; }

/* 🔒 окно подписки: своя кнопка на каждый канал */
#subChannels { display: grid; gap: 8px; margin: 12px 0 8px; }
#subChannels .sub-go { display: flex; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; min-height: 48px;
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin: 0; padding: 0 14px; }
#subChannels { min-width: 0; width: 100%; }
#subChannels .sub-go { min-height: 54px; }
#subChannels .sub-n { flex: none; font-size: 16px; font-weight: 800; }
#subChannels .sub-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
#subChannels .sub-t small { font-size: 11.5px; font-weight: 700; opacity: .75; }
#subChannels .sub-t b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#subChannels .sub-x { flex: none; font-size: 20px; opacity: .7; }
#subChannels .sub-go.done .sub-x::before { content: "✓ "; }
#subChannels .ad-l { margin-top: -4px; }

/* 🎨 аватар с рамкой — без inset/:has (старые WebView iPhone их не понимают → рамка и фото разъезжались): явные размеры в px */
.top-ava .ava-ring { left: 0; top: 0; width: 44px; height: 44px; transform-origin: 22px 22px; }
.top-ava .ava-img { left: 5px; top: 5px; right: auto; bottom: auto; width: 34px; height: 34px; }
.top-ava.has-fr .ava-img { left: 8px; top: 8px; width: 28px; height: 28px; }
.ava-face { left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: 100%; }
.ava-face img { left: 0; top: 0; width: 100%; height: 100%; }