/* ============================================================
   LUCKROOM · shell — рамка приложения, топбар, таббар, экраны
   ============================================================ */

/* ---------- сцена и «телефон» ---------- */
.stage{
  min-height:var(--tg-vh,100dvh); display:grid; place-items:center;
  padding:0;
}
.app{
  /* в полном экране Telegram рисует свои кнопки поверх — отступаем на их высоту */
  padding-top:var(--tg-safe-top,0px);
  position:relative; display:flex; flex-direction:column;
  width:min(430px,100vw); height:var(--tg-vh,100dvh); max-height:932px;
  background:var(--bg-2);
  border-radius:32px; overflow:hidden;
  box-shadow:0 40px 120px rgba(13,28,38,.75), 0 0 0 1px rgba(255,255,255,.05);
  isolation:isolate;
}
@media (max-width:520px), (max-height:700px){
  .app{ width:100vw; height:var(--tg-vh,100dvh); max-height:none; border-radius:0; box-shadow:none; }
}

/* велюровый фон: два тёплых пятна + сукно снизу + зерно */
.app::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(90% 55% at 50% -8%, rgba(63,199,240,.30), transparent 64%),
    radial-gradient(70% 45% at 100% 106%, rgba(87,208,106,.26), transparent 62%),
    radial-gradient(60% 40% at 0% 92%, rgba(23,162,184,.28), transparent 64%),
    linear-gradient(180deg, #076396 0%, #054d7a 55%, #05345a 100%);
}
.app::after{ /* зерно */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.035'/></svg>");
}

/* ---------- топбар ---------- */
.topbar{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  height:60px; padding:0 16px; flex:0 0 auto;
}
.brand{ display:flex; align-items:center; gap:7px; }
.brand__mark{ width:26px; height:26px; display:block; filter:drop-shadow(0 2px 6px rgba(245,196,81,.35)); }
.brand__word{
  /* Двухстрочный логотип: «HAMSTER» крупно, «GAMES» под ним мелкой разрядкой.
     В одну строку «THE HAMSTER GAMES» в шапку не влезает ни на одном телефоне. */
  font-family:var(--font-disp); font-weight:600; text-transform:uppercase;
  display:flex; flex-direction:column; gap:2px; line-height:1; color:var(--text);
}
.brand__word b{ color:var(--gold); font-weight:700; font-size:clamp(11.5px,3.4vw,16px); letter-spacing:.05em; }
.brand__word i{
  font-style:normal; font-weight:500; color:var(--text-dim);
  font-size:clamp(7.5px,2.2vw,9.5px); letter-spacing:.34em; padding-left:1px;
}

.wallet{ display:flex; align-items:center; gap:8px; }
.wallet__pocket{
  display:flex; align-items:center; gap:8px; height:38px; padding:0 12px 0 6px;
  border-radius:999px; background:linear-gradient(180deg, rgba(21,45,62,.95), rgba(13,28,38,.95));
  border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.wallet__coin{ width:24px; height:24px;  filter:drop-shadow(0 0 8px rgba(245,196,81,.45)); }
.wallet__sum{ font-family:var(--font-disp); font-size:18px; font-weight:600; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.wallet__add{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-disp); font-size:24px; font-weight:400; color:#0e3b59;
  background:linear-gradient(180deg,#37ff9c,#00cb6f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(13,28,38,.2), 0 6px 16px rgba(22,199,118,.35);
}
.wallet__add{ position:relative; }
.wallet__add:active{ transform:scale(.96); }

/* индикатор доступных бонусов пополнения: цифра — сколько готово забрать */
.wallet__dot{
  position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px;
  border-radius:99px; display:grid; place-items:center;
  font-family:var(--font-body); font-size:11px; font-weight:700; line-height:1; letter-spacing:0;
  color:#104265; background:linear-gradient(180deg,#FF7A93,#FF2D55);
  border:1.5px solid #0a79d0; box-shadow:0 2px 8px rgba(255,45,85,.55);
}
.wallet__add.is-nudge{ animation:walletNudge 2.4s ease-in-out 3; }
@keyframes walletNudge{
  0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(13,28,38,.2), 0 6px 16px rgba(22,199,118,.35); }
  40%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(13,28,38,.2), 0 0 0 4px rgba(255,45,85,.28), 0 6px 16px rgba(22,199,118,.35); }
}

/* ---------- бегущая строка выигрышей ---------- */
.ticker{
  position:relative; z-index:5; flex:0 0 auto; height:36px; overflow:hidden;
  border-top:1px solid rgba(245,196,81,.12); border-bottom:1px solid rgba(245,196,81,.12);
  background:linear-gradient(90deg, rgba(18,69,99,.94), rgba(63,199,240,.26), rgba(18,69,99,.94));
  display:flex; align-items:center;
}
.ticker::before,.ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:34px; z-index:2; pointer-events:none;
}
.ticker::before{ left:0; background:linear-gradient(90deg, #0a4463, rgba(10,68,99,.55) 60%, transparent); }
.ticker::after{ right:0; background:linear-gradient(270deg, #054d7a, transparent); }
.ticker__track{ display:flex; gap:22px; white-space:nowrap; animation:ticker 42s linear infinite; padding-left:44px; }
/* чип виртуального игрока: инициалы на цветном круге */
.nick-chip{
  flex:0 0 auto; display:inline-grid; place-items:center; border-radius:50%;
  color:#0669bb; font-family:var(--font-disp); letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px rgba(13,28,38,.45);
}
.ticker__item{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; line-height:1.4; letter-spacing:.02em; color:#F2FAFF; }
.ticker__item b{ color:var(--gold-hi); font-family:var(--font-disp); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.ticker__item i{ font-style:normal; color:#A9CCE0; }
@keyframes ticker{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }

/* ---------- контент ---------- */
.screen{
  position:relative; z-index:4; flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  padding:16px 16px calc(var(--tab-h) + 26px + env(safe-area-inset-bottom, 0px));
  /* без smooth: при смене маршрута scrollTop = 0 иначе «едет» плавно от старого места */
  scroll-behavior:auto;
  overscroll-behavior:contain;
}
.screen--game{ padding-bottom:max(20px, env(safe-area-inset-bottom)); }

/* ---------- фон столов ----------
   Каждый стол красит экран своим акцентом: два мягких пятна света, сукно с косой
   текстурой, мелкая «пыль» и виньетка по краям. Цвет задаётся парой --ga/--gb. */
.screen--game{
  --ga: 43, 227, 139;          /* основной акцент стола */
  --gb: 245, 196, 81;          /* вторая половина пары */
  background:
    radial-gradient(124% 48% at 50% -8%, rgba(var(--ga), .34), transparent 66%),
    radial-gradient(100% 44% at 50% 108%, rgba(var(--gb), .26), transparent 62%),
    repeating-linear-gradient(133deg, rgba(255,255,255,.032) 0 2px, rgba(255,255,255,0) 2px 7px),
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, #104064 0%, #0f3957 52%, #0669bb 100%);
  box-shadow:inset 0 0 150px rgba(13,28,38,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
/* акценты по столам: только два числа, всё остальное общее */
.screen--game[data-game="rocket"]{ --ga:43,227,139; --gb:124,216,255; }
.screen--game[data-game="cases"]{ --ga:245,196,81; --gb:43,227,139; }
.screen--game[data-game="battles"]{ --ga:255,45,85; --gb:245,196,81; }
.screen--game[data-game="mines"]{ --ga:176,107,255; --gb:255,45,85; }
.screen--game[data-game="plinko"]{ --ga:124,216,255; --gb:245,196,81; }
.screen--game[data-game="upgrade"]{ --ga:255,45,85; --gb:176,107,255; }
.screen--game[data-game="wheel"]{ --ga:43,227,139; --gb:255,45,85; }
.screen--game[data-game="scratch"]{ --ga:124,216,255; --gb:176,107,255; }
.screen--game[data-game="roulette"]{ --ga:176,107,255; --gb:245,196,81; }
.screen--game[data-game="storm"]{ --ga:176,107,255; --gb:124,216,255; }
.screen--game[data-game="cow"]{ --ga:43,227,139; --gb:245,196,81; }
.screen--game[data-game="jumper"]{ --ga:255,45,85; --gb:245,196,81; }
.screen--game[data-game="blackjack"]{ --ga:43,227,139; --gb:43,227,139; }
.screen--game[data-game="arena"]{ --ga:255,45,85; --gb:176,107,255; }
.screen--game[data-game="giftpath"]{ --ga:176,107,255; --gb:43,227,139; }

/* приглушённая иллюстрация стола в верхней части экрана */
/* канвасы, которые рисуют только объекты (плинко, колесо, рулетка), получают
   фон от CSS: свечение стола и мягкая сетка вместо пустоты */
.plinko-stage, .wheel-stage{ position:relative; }
.plinko-stage::before, .wheel-stage::before{
  content:""; position:absolute; inset:6px; border-radius:18px; pointer-events:none;
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(var(--ga), .20), transparent 62%),
    radial-gradient(90% 70% at 50% 120%, rgba(var(--gb), .16), transparent 60%);
  box-shadow:inset 0 0 60px rgba(13,28,38,.5);
}

.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:2px 0 16px; }
.page-head__sub{ color:var(--muted); font-size:13px; margin-top:5px; letter-spacing:.02em; }

/* ---------- таббар ---------- */
.tabbar{
  position:absolute; z-index:20; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom));
  height:var(--tab-h); border-radius:22px;
  display:grid; grid-template-columns:repeat(4,1fr); align-items:center;
  background:
    linear-gradient(180deg, rgba(22,86,124,.97), rgba(10,44,68,.98));
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 -8px 40px rgba(13,28,38,.6), inset 0 1px 0 rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.tab{ /* на голубом подписи читаются только светлым */
  position:relative; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:10px 6px; min-width:0; color:#A9CCE0; transition:color .18s ease;
}
.tab svg{ width:22px; height:22px; }
.tab span{
  /* подпись не должна выезжать на края «таблетки»: при увеличенном кегле
     (настройка текста в Telegram, крупный системный шрифт) она упиралась в рамку */
  font-size:clamp(10.5px, 2.7vw, 11.5px); letter-spacing:.03em; font-weight:600;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.15;
}
.tab.is-active{ color:var(--emerald-hi); }
.tab.is-active::before{
  /* раньше таблетка была фиксированной ширины 62px и оказывалась уже подписи —
     текст выступал за её скруглённые края. Теперь она по ширине вкладки. */
  content:""; position:absolute; top:3px; bottom:2px; left:4px; right:4px;
  border-radius:16px; z-index:-1;
  background:radial-gradient(60% 100% at 50% 100%, rgba(76,224,122,.30), transparent 72%);
  border:1px solid rgba(76,224,122,.42);
}
.tab.is-active span{ color:#CFFFE6; }

/* ---------- плитка игры ---------- */
.grid{ display:grid; gap:12px; }
.grid--2{ grid-template-columns:1fr 1fr; }

.tile{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  border-radius:var(--r-lg); min-height:168px;
  background:linear-gradient(165deg, var(--tile-a, #124a71) 0%, var(--tile-b, #103d5f) 78%);
  border:1px solid var(--tile-line, var(--line-soft));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-md);
  transition:transform .16s ease;
}
.tile:active{ transform:scale(.985); }
.tile__glow{
  position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:radial-gradient(50% 50% at 50% 40%, var(--tile-glow, rgba(176,107,255,.35)), transparent 70%);
  pointer-events:none;
}
.tile__art{
  position:relative; height:104px; display:grid; place-items:center; margin-top:10px;
}
.tile__art img{
  height:96px; width:auto; 
  filter:drop-shadow(0 12px 22px rgba(13,28,38,.6));
  transform:translateY(2px);
}
.tile__art svg{ height:74px; width:auto; }

/* иллюстрация стола: баннер сверху карточки, растворяется в её фоне */
.tile__art--char{ height:104px; margin-top:0; display:block; overflow:hidden;
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
.tile__art--char img{
  width:100%; height:104px; object-fit:cover; object-position:50% 46%;
  filter:none; transform:none; display:block;
}
.tile__art--char::after{      /* низ баннера уходит в фон карточки, без резкой кромки */
  content:""; position:absolute; inset:auto 0 0 0; height:52px; pointer-events:none;
  background:linear-gradient(180deg, rgba(13,28,38,0) 0%, rgba(13,28,38,.55) 55%, var(--tile-b, #103d5f) 100%);
}
.tile__badge{
  position:absolute; top:10px; left:10px; z-index:2;
  font-family:var(--font-disp); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 8px; border-radius:6px; color:#0e3b59; background:linear-gradient(180deg,#37ff9c,#00cb6f);
  font-weight:600;
}
.tile__badge--hot{ background:linear-gradient(180deg,#FF5B79,#C41336); color:#fff; }
.tile__badge--soon{ background:rgba(255,255,255,.1); color:#C6BCCC; border:1px solid rgba(255,255,255,.14); }
.tile--locked{ opacity:.72; }
.tile__foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
  padding:0 12px 12px; margin-top:auto;
}
.tile__name{ min-width:0; }
/* иконка раунда: графика стола под множителем — по ней сразу видно, где играли */
.round-ic{
  position:relative; flex:0 0 auto; width:44px; height:44px; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(13,28,38,.35));
  border:1px solid rgba(255,255,255,.08);
  display:grid; place-items:center;
}
.round-ic.is-win{ border-color:rgba(43,227,139,.34); box-shadow:0 0 0 1px rgba(43,227,139,.14) inset; }
.round-ic.is-lose{ border-color:rgba(255,45,85,.28); }
.round-ic.is-even{ border-color:rgba(255,255,255,.14); }
.round-ic__art{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 42%, #000 58%, rgba(13,28,38,0) 100%);
  mask-image:radial-gradient(70% 70% at 50% 42%, #000 58%, rgba(13,28,38,0) 100%);
  opacity:.9;
}
.round-ic__mult{
  position:relative; z-index:1; margin-top:auto; width:100%; text-align:center;
  font-family:var(--font-disp); font-size:11.5px; line-height:1;
  padding:2px 0 3px; color:#fff;
  background:linear-gradient(180deg, rgba(13,28,38,0), rgba(13,28,38,.82));
  text-shadow:0 1px 3px rgba(13,28,38,.9);
}
.round-ic.is-win .round-ic__mult{ color:#B6FFD8; }
.round-ic.is-lose .round-ic__mult{ color:#FFC0CD; }
.round-ic.is-even .round-ic__mult{ color:#D8D0E0; }

.tile__rates{ flex:0 0 auto; }
.tile__name{ font-family:var(--font-disp); font-size:17px; letter-spacing:.09em; text-transform:uppercase; }
.tile__rates{ display:flex; gap:4px; }
.tile__rates span{
  font-size:11px; font-family:var(--font-disp); font-variant-numeric:tabular-nums;
  color:#9FE7C4; background:rgba(43,227,139,.1); border-radius:5px; padding:2px 5px;
}
.tile__rates span:nth-child(2n){ color:var(--gold-hi); background:rgba(245,196,81,.1); }
.tile__live{ position:absolute; top:11px; right:11px; z-index:2; display:flex; align-items:center; gap:5px; font-size:10.5px; color:#8FF7C4; letter-spacing:.08em; }
/* на плитке с иллюстрацией бейдж лежит поверх картинки: подложка держит контраст */
.tile--char .tile__live{ padding:3px 7px 3px 6px; border-radius:99px; background:rgba(13,28,38,.58);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }

/* рейл «горячее» */
.rail{ display:flex; gap:10px; overflow-x:auto; padding:2px 16px 4px; margin:0 -16px; }
.rail__card{
  flex:0 0 132px; border-radius:16px; padding:12px;
  background:linear-gradient(165deg, rgba(23,50,69,.9), rgba(13,28,38,.95));
  border:1px solid rgba(176,107,255,.2);
  display:flex; flex-direction:column; gap:6px;
}
.rail__card b{ font-family:var(--font-disp); font-size:19px; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.rail__card span{ font-size:11.5px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; font-family:var(--font-disp); }
.rail__card em{ font-style:normal; font-size:11px; color:#C6F7DD; }

/* ---------- баннер ---------- */
.banner{
  position:relative; overflow:hidden; border-radius:var(--r-xl); padding:16px;
  min-height:132px; display:flex; align-items:center; gap:12px;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(245,196,81,.22), transparent 58%),
    linear-gradient(150deg, #12466a 0%, #104061 60%, #103d5f 100%);
  border:1px solid rgba(245,196,81,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-md);
}
.banner__art{ width:104px; flex:0 0 104px; }
.banner__art img{  filter:drop-shadow(0 10px 18px rgba(13,28,38,.6)); }
.banner__text{ position:relative; z-index:1; }
.banner__text .h2{ margin-bottom:6px; }

/* ---------- списки/строки ---------- */
.rows{ display:flex; flex-direction:column; gap:8px; }
.row-card{
  /* раскладка только здесь: фон, рамку и тень задаёт base.css («Графика 2.0»).
     Раньше плоский фон отсюда перебивал градиент — карточки выглядели плоскими */
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:14px;
}
.row-card__ic{
  width:40px; height:40px; flex:0 0 40px; border-radius:12px; display:grid; place-items:center;
  background:rgba(43,227,139,.1); border:1px solid rgba(43,227,139,.2); font-size:20px;
}
.row-card__title{ font-size:14.5px; font-weight:600; }
.row-card__sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.row-card__val{ font-family:var(--font-disp); font-size:17px; color:var(--gold); font-variant-numeric:tabular-nums; }

.lb-row{
  display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:10px;
  padding:9px 12px; border-radius:12px; background:rgba(255,255,255,.025);
  border:1px solid transparent;
}
.lb-row.is-me{ background:rgba(43,227,139,.1); border-color:rgba(43,227,139,.3); }
.lb-row__pos{ font-family:var(--font-disp); font-size:14px; color:var(--muted); text-align:center; font-variant-numeric:tabular-nums; }
.lb-row__pos.top{ color:var(--gold); }
.lb-row__name{ font-size:13.5px; font-weight:600; }
.lb-row__val{ font-family:var(--font-disp); font-size:14.5px; color:#CFFFE6; font-variant-numeric:tabular-nums; }

/* ---------- инвентарь ---------- */
.inv{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.inv__cell{
  position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden;
  background:radial-gradient(80% 80% at 50% 30%, rgba(255,255,255,.07), rgba(13,28,38,.25));
  border:1px solid var(--line-soft); display:grid; place-items:center; padding:6px;
}
.inv__cell img{ width:100%;  }
.inv__cell b{
  position:absolute; bottom:3px; right:5px; font-size:10.5px; font-family:var(--font-disp);
  color:var(--gold); font-variant-numeric:tabular-nums;
}
.inv__empty{ grid-column:1/-1; text-align:center; color:var(--muted); font-size:13px; padding:26px 0; }

/* редкость */
.r-common{ --rc:#8a94ac; }
.r-uncommon{ --rc:#7CD8FF; }
.r-rare{ --rc:#B06BFF; }
.r-epic{ --rc:#FF2D55; }
.r-legend{ --rc:#F5C451; }
.is-rarity{ border-color:color-mix(in srgb, var(--rc) 45%, transparent) !important; box-shadow:0 0 0 1px color-mix(in srgb, var(--rc) 22%, transparent), 0 10px 26px -12px var(--rc); }

/* ---------- прогресс ---------- */
.bar{ height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.bar__fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,#00cb6f,#37ff9c); box-shadow:0 0 14px rgba(43,227,139,.5); transition:width .4s ease; }
.bar--gold .bar__fill{ background:linear-gradient(90deg,#B8892A,#FFE7A8); box-shadow:0 0 14px rgba(245,196,81,.45); }

/* ---------- шапка игры (внутренний экран) ---------- */
.gamebar{
  position:relative; z-index:6; display:flex; align-items:center; gap:10px;
  padding:10px 16px; flex:0 0 auto;
  background:linear-gradient(180deg, rgba(13,28,38,.96), rgba(13,28,38,0));
}
.icon-btn{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.05); border:1px solid var(--line-soft); color:var(--text);
}
.icon-btn svg{ width:18px; height:18px; }
/* Tektur шире прошлого шрифта: название стола ужимаем по ширине экрана
   и держим в одну строку — «Блэкджек 21» переносился на две */
.gamebar__title{
  font-family:var(--font-disp); font-size:clamp(12.5px,3.9vw,15px);
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0;
}
/* На узких экранах название стола важнее декоративной картинки: убираем её,
   чтобы «Колесо множителей» и «Кузница хомяка» влезали целиком */
@media (max-width:400px){
  .gamebar__art{ display:none; }
}
/* миниатюра стола в шапке: видно, что это за игра, ещё до раунда */
.gamebar__art{
  flex:0 0 auto; width:74px; height:44px; border-radius:10px; object-fit:cover;
  border:1px solid rgba(var(--ga, 43,227,139), .28);
  box-shadow:0 6px 16px rgba(13,28,38,.45), inset 0 1px 0 rgba(255,255,255,.08);
  opacity:.95;
}
@media (max-width:344px){ .gamebar__art{ width:56px; height:36px; } }

/* ---------- узкие экраны (320–380 px) ---------- */
.wallet__sum{ white-space:nowrap; }
.wallet{ flex:0 0 auto; }
.brand{ flex:0 1 auto; min-width:0; overflow:hidden; margin-right:2px; }
.brand__word{ white-space:nowrap; }
.pill{ white-space:nowrap; }

@media (max-width:380px){
  .topbar{ gap:6px; padding:0 12px; }
  .wallet{ gap:6px; }
  .wallet__pocket{ padding:0 10px 0 5px; gap:6px; }
  .wallet__sum{ font-size:15px; }
  .wallet__add{ width:34px; height:34px; font-size:22px; }
  .brand__word{ font-size:17px; letter-spacing:.06em; }
  .brand__mark{ width:22px; height:22px; }
  /* знак не обрубается буквой, а уходит в прозрачность */
  .brand{
    -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 70%,transparent 100%);
  }
  .page-head__sub{ font-size:12px; }
}

/* совсем узко: логотип-знак остаётся, словесный знак убираем — иначе он лез под баланс */
@media (max-width:344px){
  .brand__word{ display:none; }
  .wallet__sum{ font-size:14px; }
}


/* ---------- ежедневный вход ---------- */
.daily{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.daily__grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.daily__cell{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:8px 2px 7px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid var(--line-soft);
}
.daily__d{ font-family:var(--font-disp); font-size:12px; letter-spacing:.04em; color:var(--text-dim); }
.daily__v{ font-size:17px; line-height:1; }
.daily__cell.is-done{ opacity:.45 }
.daily__cell.is-today{
  border-color:rgba(245,196,81,.65);
  background:linear-gradient(180deg, rgba(245,196,81,.18), rgba(245,196,81,.04));
  box-shadow:0 0 0 1px rgba(245,196,81,.18), 0 8px 22px rgba(245,196,81,.16);
}
.daily__cell.is-gift{ background:rgba(43,227,139,.07); border-color:rgba(43,227,139,.28) }
.daily__cell.is-today.is-gift{ background:linear-gradient(180deg, rgba(43,227,139,.22), rgba(43,227,139,.05)); border-color:rgba(43,227,139,.6) }
.daily__bar{
  position:relative; height:8px; border-radius:99px; background:rgba(255,255,255,.07); overflow:visible;
}
.daily__bar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, #F5C451, #0fff8c);
  transition:width .35s ease;
}
.daily__mark{
  position:absolute; top:50%; width:2px; height:14px; margin-top:-7px; border-radius:2px;
  background:rgba(255,255,255,.18); transform:translateX(-1px);
}
.daily__mark.is-on{ background:rgba(43,227,139,.85) }

/* ---------- бесплатный приз за друзей ---------- */
.prize-card{ padding:14px; display:flex; flex-direction:column; gap:10px; border-color:rgba(245,196,81,.28) }
.prize-dots{ display:flex; align-items:center; gap:6px; }
.prize-dot{
  width:12px; height:12px; border-radius:50%;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  transition:background .25s ease, box-shadow .25s ease;
}
.prize-dot.is-on{
  background:linear-gradient(180deg, #F5C451, #E8A93C);
  border-color:rgba(245,196,81,.9);
  box-shadow:0 0 10px rgba(245,196,81,.55);
}
.prize-dots .small{ margin-left:6px }

/* ---------- пирамида рефералов ---------- */
.ref-level{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid var(--line-soft);
}
.ref-level__n{
  width:34px; height:34px; flex:0 0 34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-disp); font-size:17px; color:#0a79d0;
  background:linear-gradient(180deg, #F5C451, #D9A63A);
  box-shadow:0 6px 18px rgba(245,196,81,.28);
}
.ref-level__title{ font-weight:600; font-size:15px }
.ref-level__due{ font-family:var(--font-disp); font-size:17px; color:var(--gold) }

/* ---------- подсказка первого визита ---------- */
.onboard{ padding:14px; display:flex; flex-direction:column; gap:6px; border-color:rgba(245,196,81,.28) }
.onboard__row{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid var(--line-soft);
  color:inherit; text-decoration:none; font-size:14px;
}
.onboard__row:active{ background:rgba(255,255,255,.07) }
.onboard__n{
  width:22px; height:22px; flex:0 0 22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-disp); font-size:13px; color:#0a79d0;
  background:linear-gradient(180deg, #F5C451, #D9A63A);
}

/* иконки табов: чуть светлее — на тёмной панели они читались «размытыми» */
.tab{ color:#ADA2BC; }
.tab svg{ filter:drop-shadow(0 1px 0 rgba(13,28,38,.55)); }
.tab.is-active svg{ filter:drop-shadow(0 0 8px rgba(43,227,139,.5)); }

/* ============================================================
   Иллюстрации разделов
   Крупная картинка в шапке: прижата вправо, растворяется к тексту
   и к фону, чтобы заголовок оставался читаемым.
   ============================================================ */
/* арт не должен вылезать на соседние блоки: держим его внутри шапки */
.page-head.has-art{ position:relative; min-height:118px; overflow:clip; }
.page-head.has-art > div:first-child{ position:relative; z-index:2; max-width:64%; }
.page-art{
  position:absolute; z-index:1; bottom:-8px; right:-34px;
  width:224px; height:auto; pointer-events:none; user-select:none;
  -webkit-mask-image:
    radial-gradient(112% 104% at 74% 44%, #000 38%, rgba(13,28,38,.8) 54%, transparent 76%),
    linear-gradient(90deg, transparent 16%, #000 46%),
    linear-gradient(180deg, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(112% 104% at 74% 44%, #000 38%, rgba(13,28,38,.8) 54%, transparent 76%),
    linear-gradient(90deg, transparent 16%, #000 46%),
    linear-gradient(180deg, #000 76%, transparent 100%);
  mask-composite: intersect;
  filter:saturate(1.05) contrast(1.03);
  animation:pageArtIn .5s ease-out both;
}
@keyframes pageArtIn{ from{ opacity:0; transform:translateY(-6px) scale(.97) } to{ opacity:1; transform:none } }

/* страницы без шапки (VIP, профиль): иллюстрация отдельной полосой сверху */


/* баннер зала: иллюстрация крупная и уходит под край — как в референсе */
.banner{ min-height:150px; }
.banner__art{
  position:absolute; right:-26px; top:50%; transform:translateY(-50%);
  width:190px; height:190px; flex:none; z-index:0;
  display:grid; place-items:center;
  -webkit-mask-image:radial-gradient(58% 58% at 52% 50%, #000 58%, transparent 88%);
  mask-image:radial-gradient(58% 58% at 52% 50%, #000 58%, transparent 88%);
}
.banner__art img{
  width:100%; height:100%; object-fit:cover;
  filter:drop-shadow(0 14px 26px rgba(13,28,38,.7)) saturate(1.05);
}
.banner__text{ padding-right:155px; }
.promo-slide .banner__art{ width:190px; flex:none; }

/* текст и плашки шапки всегда выше иллюстрации; линия у заголовка не уезжает под арт */
.page-head.has-art > *:not(.page-art){ position:relative; z-index:2; }
.page-head.has-art .eyebrow::after{ max-width:130px; }
.page-head.has-art .pill{
  background:rgba(13,28,38,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(13,28,38,.45);
}

/* узкие экраны: арт уходит в фон под текст, чтобы заголовок не ломался по буквам */
@media (max-width:380px){
  .banner{ min-height:146px; }
  .banner__art{
    width:168px; height:168px; right:-34px; opacity:.55;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 46%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 46%);
  }
  .promo-slide .banner__art{ width:168px; }
  .banner__text{ padding-right:0; position:relative; z-index:1; }
  .banner__text .h2{ font-size:20px; }
}

/* ============================================================
   Громкость звука в профиле
   ============================================================ */
.vol__range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:26px; background:transparent; cursor:pointer;
  touch-action:manipulation;
}
.vol__range::-webkit-slider-runnable-track{
  height:6px; border-radius:99px;
  background:linear-gradient(90deg, var(--emerald-hi) 0%, var(--gold) 100%);
  box-shadow:inset 0 1px 2px rgba(13,28,38,.6), 0 1px 0 rgba(255,255,255,.06);
}
.vol__range::-moz-range-track{
  height:6px; border-radius:99px;
  background:linear-gradient(90deg, var(--emerald-hi) 0%, var(--gold) 100%);
  box-shadow:inset 0 1px 2px rgba(13,28,38,.6);
}
.vol__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; margin-top:-8px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FFF6E0, #F5C451 58%, #B8862B 100%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 3px 8px rgba(13,28,38,.55), inset 0 -2px 3px rgba(30,65,90,.5);
}
.vol__range::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.55);
  background:radial-gradient(circle at 34% 30%, #FFF6E0, #F5C451 58%, #B8862B 100%);
  box-shadow:0 3px 8px rgba(13,28,38,.55), inset 0 -2px 3px rgba(30,65,90,.5);
}
.vol__range:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:99px; }
.vol__val{
  font-family:var(--font-disp); font-size:15px; color:var(--gold);
  min-width:44px; text-align:right; letter-spacing:.02em;
}

/* ============================================================
   «Горячее сейчас»: плитки с иллюстрациями
   ============================================================ */
.rail__card--art{
  position:relative; overflow:hidden; flex:0 0 168px; padding:0;
  min-height:156px; display:block;
  background:#114061;
  border:1px solid rgba(245,196,81,.24);
  box-shadow:0 12px 26px rgba(13,28,38,.45), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.rail__card--art:hover{ transform:translateY(-2px); border-color:rgba(245,196,81,.45); }
.rail__card--art:active{ transform:scale(.985); }
.rail__art{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  transform:scale(1.02);
  transition:transform .5s ease;
}
.rail__card--art:hover .rail__art{ transform:scale(1.07); }
.rail__card--art::after{                 /* затемнение под текст: цифры читаются на любом арте */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(13,28,38,.10) 0%, rgba(13,28,38,.46) 44%, rgba(13,28,38,.93) 100%),
    radial-gradient(120% 80% at 50% 120%, rgba(13,28,38,.88), transparent 62%);
}
.rail__body{
  position:relative; z-index:1; height:100%; min-height:156px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:2px; padding:12px;
}
.rail__card--art span{ color:rgba(255,255,255,.82); text-shadow:0 1px 3px rgba(13,28,38,.9); }
.rail__card--art b{
  font-size:25px; color:#fff;
  background:linear-gradient(180deg, #FFF4D6, #F5C451);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  /* тень — фильтром: text-shadow рисовался бы сквозь прозрачные глифы и грязнил градиент */
  filter:drop-shadow(0 2px 6px rgba(13,28,38,.8));
}
.rail__card--art em{ color:rgba(255,255,255,.82); text-shadow:0 1px 3px rgba(13,28,38,.85); }
@media (max-width:380px){
  .rail__card--art{ flex:0 0 148px; min-height:142px; }
  .rail__body{ min-height:142px; }
}

/* бейдж раунда в списках истории: цвет по исходу, иконка игры или множитель */
.row-card__ic.is-win{ color:#9FE7C4; }
.row-card__ic.is-lose{ color:#FFA9BA; }

/* ---------- prefers-reduced-motion ----------
   Блок обязан идти последним: специфичность у медиазапроса та же, что у обычных правил,
   поэтому ранний блок перебивался анимацией бегущей строки и hover-масштабом карточек. */
@media (prefers-reduced-motion: reduce){
  .wallet__add.is-nudge{ animation:none; }
  .ticker__track{ animation:none !important; transform:none !important; }
  .page-art{ animation:none !important; }
  .rail__card--art:hover .rail__art{ transform:scale(1.02) !important; }
  .btn--go::after, .btn--gold::after{ animation:none !important; }
  .bigwin__rays{ animation:none !important; }
}

/* ---------- кнопка «Мой инвентарь» в шапке ---------- */
.wallet__inv{
  position:relative; display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%; flex:0 0 auto;
  background:linear-gradient(180deg, rgba(21,45,62,.95), rgba(13,28,38,.95));
  border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  color:#E8DFF2;
}
.wallet__inv svg{ filter:drop-shadow(0 1px 0 rgba(13,28,38,.5)); }
.wallet__inv:active{ transform:translateY(1px); }
.wallet__inv-badge{
  position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px;
  display:grid; place-items:center; border-radius:999px;
  font-size:11px; font-weight:700; line-height:1; color:#103d5e;
  background:linear-gradient(180deg, #FFD87A, #E0A63B);
  box-shadow:0 0 0 2px #0669bb, 0 2px 6px rgba(13,28,38,.5);
}

/* ---------- экран инвентаря ---------- */
.inv-head{ display:flex; flex-direction:column; gap:10px; }
.inv-sum{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-radius:16px;
  background:linear-gradient(180deg, rgba(20,43,60,.92), rgba(13,28,38,.92));
  border:1px solid var(--line-soft);
}
.inv-sum__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex:1; }
.inv-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.inv-filters .chip{ padding:7px 12px; border-radius:999px; border:1px solid var(--line-soft); background:rgba(255,255,255,.03); font-size:13.5px; }
.inv-filters .chip.is-on{ border-color:rgba(245,196,81,.55); background:rgba(245,196,81,.14); color:#FFE9AE; }
.inv--full{ grid-template-columns:repeat(4, 1fr); gap:10px; }
.inv--full .inv__cell{ border-radius:14px; }
.inv__price{
  position:absolute; left:6px; right:6px; bottom:5px; text-align:center;
  font-size:11.5px; font-weight:600; color:#FFE6A8; letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(13,28,38,.8);
}
@media (min-width:420px){ .inv--full{ grid-template-columns:repeat(5, 1fr); } }
.inv-top{ display:flex; flex-direction:column; gap:3px; padding:2px 2px 0; }
.inv-top__title{ font-family:var(--font-disp); font-size:24px; font-weight:700; letter-spacing:.02em; }

/* ---------- страница предмета ---------- */
.item-top{ display:flex; align-items:center; gap:10px; }
.item-title{ font-family:var(--font-disp); font-size:21px; font-weight:700; line-height:1.2; margin:0; }
.item-hero{
  position:relative; display:grid; place-items:center; height:230px; border-radius:20px; overflow:hidden;
  background:radial-gradient(70% 70% at 50% 35%, rgba(255,255,255,.06), rgba(13,28,38,.35));
  border:1px solid var(--line-soft);
}
.item-hero__glow{ position:absolute; inset:0; }
.item-hero.r-common .item-hero__glow{ background:radial-gradient(60% 60% at 50% 40%, rgba(150,150,160,.22), transparent 70%); }
.item-hero.r-uncommon .item-hero__glow{ background:radial-gradient(60% 60% at 50% 40%, rgba(90,190,160,.26), transparent 70%); }
.item-hero.r-rare .item-hero__glow{ background:radial-gradient(60% 60% at 50% 40%, rgba(120,140,255,.28), transparent 70%); }
.item-hero.r-epic .item-hero__glow{ background:radial-gradient(60% 60% at 50% 40%, rgba(200,90,220,.28), transparent 70%); }
.item-hero.r-legend .item-hero__glow{ background:radial-gradient(60% 60% at 50% 40%, rgba(245,196,81,.30), transparent 70%); }
.item-hero__art{ position:relative; width:72%; max-width:260px; display:grid; place-items:center;
  filter:drop-shadow(0 18px 26px rgba(13,28,38,.55)); }
.item-hero__art img{ width:100%; object-fit:contain; }
.item-hero__rarity{
  position:absolute; left:12px; top:12px; padding:5px 10px; border-radius:999px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  background:rgba(13,28,38,.7); border:1px solid rgba(255,255,255,.14);
}
.item-facts{ display:flex; flex-direction:column; gap:0; border-radius:16px; overflow:hidden;
  border:1px solid var(--line-soft); background:linear-gradient(180deg, rgba(20,43,60,.9), rgba(13,28,38,.9)); }
.item-fact{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; }
.item-fact + .item-fact{ border-top:1px solid rgba(255,255,255,.05); }
.item-fact__k{ color:var(--text-dim); font-size:14px; }
.item-fact__v{ font-weight:600; font-variant-numeric:tabular-nums; }
.item-fact__v.gold{ color:var(--gold-hi); }
.item-fact__v.muted{ color:var(--text-dim); }
.item-desc{ padding:12px 14px; }
.item-desc__text{ margin:6px 0 0; font-size:14.5px; line-height:1.5; color:#D8CFE2; }
.item-drops{ padding:12px 14px; }
.inv-empty-page{ display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; padding:24px 16px; }

/* ---------- кошелёк: демо-донат и вывод ---------- */
.demo-banner{ padding:12px 14px; border-color:rgba(245,196,81,.32); background:linear-gradient(180deg, rgba(23,50,69,.55), rgba(13,28,38,.55)); }
.demo-banner__title{ color:var(--gold-hi); font-weight:700; font-size:14.5px; }
.wallet-tabs{ display:flex; gap:8px; }
.wallet-tabs__btn{
  flex:1; padding:10px 8px; border-radius:12px; border:1px solid var(--line-soft);
  background:rgba(255,255,255,.03); font-size:14px; font-weight:600; color:var(--text-dim);
}
.wallet-tabs__btn.is-on{ color:#103d5e; background:linear-gradient(180deg,#FFD87A,#E0A63B); border-color:rgba(255,216,122,.7); }

.pack-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pack-card{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:12px 12px 10px; border-radius:14px; text-align:left;
  border:1px solid var(--line-soft); background:linear-gradient(180deg, rgba(20,43,60,.92), rgba(13,28,38,.92));
}
.pack-card.is-on{ border-color:rgba(245,196,81,.65); box-shadow:0 0 0 1px rgba(245,196,81,.35), 0 8px 20px rgba(13,28,38,.35); }
.pack-card__tag{
  position:absolute; top:8px; right:8px; padding:2px 7px; border-radius:999px; font-size:11px; font-weight:700;
  color:#103d5e; background:linear-gradient(180deg,#B6F3C9,#49de83);
}
.pack-card__coins{ font-family:var(--font-disp); font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; }
.pack-card__unit{ font-size:12px; color:var(--text-dim); }
.pack-card__bonus{ font-size:12px; color:#8CF3B8; margin-top:2px; }
.pack-card__price{ margin-top:6px; font-weight:700; color:var(--gold-hi); }

.pay-methods{ display:flex; flex-direction:column; gap:8px; }
.pay-method{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; text-align:left;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.03);
}
.pay-method.is-on{ border-color:rgba(43,227,139,.55); background:rgba(43,227,139,.10); }
.pay-method__ic{ font-size:20px; }
.pay-method__title{ display:block; font-weight:600; font-size:14.5px; }
.pay-method__sub{ display:block; font-size:12px; color:var(--text-dim); }
.pay-method__dot{ width:16px; height:16px; border-radius:50%; border:1px solid var(--line); }
.pay-method.is-on .pay-method__dot{ border-color:var(--emerald); background:radial-gradient(circle at 50% 50%, var(--emerald) 45%, transparent 50%); }

.withdraw-amount{ display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:16px;
  border:1px solid var(--line-soft); background:linear-gradient(180deg, rgba(20,43,60,.9), rgba(13,28,38,.9)); }
.withdraw-amount__row{ display:flex; align-items:center; gap:8px; }
.withdraw-amount__coin{ color:var(--gold-hi); font-size:24px; }
.withdraw-amount__input{
  flex:1; min-width:0; background:transparent; border:none; color:inherit;
  font-family:var(--font-disp); font-size:28px; font-weight:700; font-variant-numeric:tabular-nums;
}
.withdraw-amount__input:focus{
  /* контур убирать нельзя: поле оставалось без видимого фокуса для клавиатуры */
  outline:none; box-shadow:0 0 0 2px rgba(245,196,81,.55), 0 0 18px rgba(245,196,81,.18);
  border-color:rgba(245,196,81,.5); border-radius:14px;
}

.pay-quote{ display:flex; flex-direction:column; gap:0; border-radius:14px; overflow:hidden;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.02); }
.pay-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; }
.pay-line + .pay-line{ border-top:1px solid rgba(255,255,255,.05); }
.pay-line__k{ color:var(--text-dim); font-size:13.5px; }
.pay-line__v{ font-weight:600; font-variant-numeric:tabular-nums; }
.pay-line__v.gold{ color:var(--gold-hi); }

.receipt{ display:flex; flex-direction:column; gap:0; border-radius:14px; overflow:hidden;
  border:1px solid rgba(245,196,81,.28); background:rgba(13,28,38,.8); }

.pay-list{ display:flex; flex-direction:column; gap:8px; }
.pay-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.025); }
.pay-row__ic{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:15px; font-weight:700; }
.pay-row__ic.is-in{ background:rgba(43,227,139,.16); color:var(--emerald-hi); }
.pay-row__ic.is-out{ background:rgba(245,196,81,.16); color:var(--gold-hi); }
.pay-row__title{ font-weight:600; font-size:14.5px; }
.pay-row__sub{ font-size:12px; color:var(--text-dim); margin-top:2px; }
.pay-status{ font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:999px; border:1px solid var(--line); }
.pay-status.is-ok{ color:var(--emerald-hi); border-color:rgba(43,227,139,.45); }
.pay-status.is-pending{ color:var(--gold-hi); border-color:rgba(245,196,81,.45); }
.pay-status.is-bad{ color:#FF8A8A; border-color:rgba(255,138,138,.45); }

/* пустые ячейки инвентаря: держат сетку в несколько рядов, даже когда вещей нет */
.inv__cell--empty{
  background:transparent;
  border:1.5px dashed rgba(255,255,255,.10);
  box-shadow:none;
}
.inv__empty-note{
  grid-column:1 / -1; text-align:center; padding:8px 4px 2px;
  font-size:13.5px; color:var(--text-dim);
}

/* Компактный инвентарь на низких экранах: сетка должна оставаться в 3 ряда,
   а кнопка — на виду без прокрутки */
@media (max-height: 740px){
  .inv-top{ gap:1px; padding-top:0; }
  .inv-top__title{ font-size:20px; }
  .inv-sum{ padding:8px 12px; border-radius:13px; }
  .inv-sum__row .num{ font-size:21px !important; }
  .inv-filters .chip{ padding:5px 10px; font-size:12.5px; }
  .inv__empty-note{ padding:2px 4px 0; font-size:12.5px; }
  .inv--full{ gap:8px; }
  .screen .btn--wide{ height:48px; }
}

/* Совсем короткие экраны: подсказку о пустом инвентаре прячем — сетка и так всё
   объясняет, а кнопка должна быть на виду */
@media (max-height: 660px){
  .inv__empty-note{ display:none; }
  .inv-head{ gap:6px; }
  .inv-sum__row{ gap:8px; }
}

/* плашка «бонус заблокирован» в кошельке */
.bonus-lock{
  display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:13px;
  border:1px solid rgba(245,196,81,.34); background:linear-gradient(180deg, rgba(23,50,69,.45), rgba(13,28,38,.45));
  font-size:13.5px; color:var(--gold-hi);
}

/* Фото аккаунта из Telegram в правом углу шапки.
   Пока фото не пришло (или его нет) — золотой кружок с первой буквой имени. */
.avatar{
  position:relative; flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden; text-decoration:none;
  background:linear-gradient(180deg, rgba(245,196,81,.34), rgba(35,75,104,.34));
  border:1px solid rgba(245,196,81,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px rgba(13,28,38,.35);
}
.avatar__img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar__ico{ color:var(--gold-hi); opacity:.9; }
.avatar.is-photo .avatar__ico{ display:none; }
.avatar.is-photo{ background:#1a9af2; }

/* Интерактив не должен ловить двойной тап: он приближал экран вместо действия */
button, a, input, label, select, [role="button"], .btn, .tab, .chip, .card, .inv__cell{
  touch-action:manipulation;
}

/* Поле «Имя в карточке победы»: раньше это был браузерный белый инпут
   без кнопки сохранения — сохранялось только по потере фокуса. */
.field{ align-items:flex-start; }
.field__row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:stretch; }
.field__input{
  flex:1 1 150px; min-width:0; height:44px; padding:0 14px;
  border-radius:12px; border:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(18,74,108,.96), rgba(11,52,80,.97));
  color:var(--text); font-family:var(--font-body); font-size:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field__input::placeholder{ color:var(--muted); opacity:.75; }
.field__input:focus{
  outline:none; border-color:rgba(245,196,81,.6);
  box-shadow:0 0 0 2px rgba(245,196,81,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.field__save{
  flex:1 0 auto; height:44px; padding:0 16px; border-radius:12px;
  font-size:13px; letter-spacing:.04em; white-space:nowrap;
}
.field__save[disabled]{
  /* неактивная кнопка должна читаться как неактивная, а не как яркая зелёная */
  filter:saturate(.2) brightness(.72); opacity:.75; box-shadow:none;
}
.field__meta{
  display:flex; justify-content:space-between; gap:10px;
  margin-top:7px; font-size:11.5px; color:var(--text-dim);
}
.field__count{ font-family:var(--font-disp); letter-spacing:.04em; }

/* часть плашек — флекс-контейнеры, поэтому атрибут hidden сам по себе их не скрывает */
[hidden]{ display:none !important; }

/* ---------- слайдер механик на главной ----------
   Карточка: слева текст, справа иллюстрация, уходящая под маску. */
.mech{ display:flex; flex-direction:column; gap:10px; }
.mech__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.mech__track{
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin:0 -16px; padding:0 16px 2px;
  /* равные отступы по краям: крайние слайды встают по центру полосы */
  scroll-padding-inline:16px;
}
.mech__track::-webkit-scrollbar{ display:none; }

.mech__slide{
  position:relative; flex:0 0 87%; max-width:360px; height:176px;
  scroll-snap-align:center; border-radius:18px; overflow:hidden;
  background:#054d7a; border:1px solid rgba(245,196,81,.20);
  box-shadow:0 10px 26px rgba(13,28,38,.35), inset 0 1px 0 rgba(255,255,255,.06);
  text-decoration:none; color:inherit;
}
.mech__art{
  position:absolute; right:-10%; top:-8%; width:62%; height:116%;
  object-fit:cover; object-position:50% 45%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 34%, #000 62%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 34%, #000 62%);
}
.mech__grad{
  position:absolute; inset:0;
  background:linear-gradient(90deg, #054d7a 42%, rgba(20,44,61,.99) 54%, rgba(20,44,61,.78) 68%, rgba(20,44,61,.24) 86%, rgba(20,44,61,0) 100%);
}
.mech__text{
  position:relative; z-index:2; height:100%; width:64%;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:12px 14px;
}
.mech__tag{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-hi); font-weight:700;
}
.mech__title{
  font-family:var(--font-disp); font-size:16px; line-height:1.16; color:var(--text);
}
.mech__sub{
  font-size:12.5px; line-height:1.4; color:var(--text-dim);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.mech__dots{ display:flex; justify-content:center; gap:2px; padding-top:0; }
/* точка рисуется псевдоэлементом: сама кнопка не меньше 24 px, иначе палец мажет */
.mech__dot{
  position:relative; width:24px; height:24px; padding:0; border:0; cursor:pointer;
  background:transparent;
}
.mech__dot::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:7px; height:7px; border-radius:99px; background:rgba(255,255,255,.22);
  transition:width .2s ease, background .2s ease;
}
.mech__dot.is-on::before{ width:20px; background:var(--gold); }
@media (max-width:360px){
  /* на узком экране текст занимает больше строк — карточка чуть выше */
  .mech__slide{ height:188px; flex-basis:92%; }
  .mech__title{ font-size:15px; }
  .mech__sub{ font-size:12px; -webkit-line-clamp:4; }
}