:root {
  --bg: #0f0f11;
  --bg-header: #141416;
  --block: #17181c;
  --panel: #1e1f23;
  --card: #26272c;
  --line: rgba(255, 255, 255, .1);
  --soft: rgba(255, 255, 255, .05);
  --text: #fff;
  --muted: #a7a7a7;
  --y: #fedb1e;
  --y2: #e0bf12;
  --on-y: #0b0b0c;
  --win: #23d70c;
  --lose: #df4125;
  --font-d: Tektur, 'Exo 2', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.35 'Exo 2', system-ui, sans-serif; min-height: 100vh;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, select { font: inherit; color: var(--text); }
svg { flex-shrink: 0; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; }
.cur { color: var(--y); font-weight: 800; }
/* ---------- кнопки ---------- */
.btn-y {
  background: linear-gradient(93deg, var(--y2) 0%, #fbe36b 50%, var(--y2) 100%);
  color: var(--on-y); font-weight: 700; border-radius: 10px; padding: 10px 16px;
  transition: filter .2s, transform .1s;
}
@media (hover: hover) and (pointer: fine) {
.btn-y:hover:not(:disabled) { filter: brightness(1.08); }
}
.btn-y:active:not(:disabled) { transform: scale(.97); }
.btn-y:disabled { opacity: .6; cursor: default; filter: grayscale(.4); }
.ghost {
  background: var(--soft); border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600;
  transition: background .2s;
}
@media (hover: hover) and (pointer: fine) {
.ghost:hover:not(:disabled) { background: rgba(255,255,255,.1); }
}
.ghost:disabled { opacity: .4; cursor: default; }
.link { color: var(--y); font-size: 12px; }
/* ---------- шапка ---------- */
.top {
  position: sticky; top: 0; z-index: 30; height: 64px;
  display: flex; align-items: center; gap: 28px; padding: 0 20px;
  background: var(--bg-header); border-bottom: 1px solid #1c1c1f;
}
.brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font: 700 22px/1 var(--font-d); }
.brand-ico { width: 30px; height: 30px; color: var(--y); }
.hstats { display: flex; gap: 22px; }
.hstat { display: flex; align-items: center; gap: 8px; }
.hstat svg { width: 16px; height: 16px; color: var(--y); }
.hstat .cur { font-size: 15px; }
.hstat small { display: block; color: var(--muted); font-size: 12px; }
.hstat b { font-size: 14px; }
.nav { display: flex; gap: 6px; height: 100%; }
.nav a {
  display: flex; align-items: center; padding: 0 12px; text-decoration: none; color: #85858d;
  font: 700 13px var(--font-d); letter-spacing: .02em; position: relative;
}
.nav a.active { color: var(--y); }
.nav a.active::after { content: ''; position: absolute; left: 10px; right: 10px; top: 0; height: 3px; background: var(--y); border-radius: 0 0 3px 3px; }
.prices-status { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.prices-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #555; }
.prices-status.ok .dot { background: var(--win); box-shadow: 0 0 8px var(--win); }
.wallet { display: flex; align-items: center; gap: 12px; }
.balance { text-align: right; line-height: 1.1; }
.balance small { display: block; color: var(--muted); font-size: 11px; }
.balance strong { font: 700 17px var(--font-d); }
/* ---------- раскладка ---------- */
.layout { display: grid; grid-template-columns: 196px 1fr; min-height: calc(100vh - 64px); }
main { padding: 0 24px 24px; min-width: 0; max-width: 1360px; width: 100%; margin: 0 auto; }
/* ---------- лента дропов ---------- */
.feed {
  position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; scrollbar-width: none;
  background: var(--bg-header); border-right: 1px solid #1c1c1f; padding: 8px 4px; display: flex; flex-direction: column; gap: 4px;
}
.feed::-webkit-scrollbar { display: none; }
.feed-title {
  font: 700 17px/1 var(--font-d); padding: 14px 10px; border-radius: 8px; border: 1px solid #3a3420;
  background: linear-gradient(135deg, #1f1d14, #121212);
}
.feed-title span { color: var(--y); }
.best { position: relative; }
/* лучший дроп: заливка и свечение сзади — цвет редкости скина */
.best .fd { background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 55%, #17181c) 0%, color-mix(in srgb, var(--rc) 16%, #17181c) 100%); }
.best .fd .fd-w { color: rgba(255, 255, 255, .7); }
.best-label { font-size: 10px; color: var(--y); padding: 2px 6px; display: flex; align-items: center; gap: 4px; }
.feed-list { display: flex; flex-direction: column; gap: 4px; }
.fd {
  position: relative; height: 60px; border-radius: 6px; overflow: hidden; padding: 8px 8px; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 35%, #17181c) 0%, #17181c 75%);
  animation: feedIn .45s ease;
}
.fd::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rc); }
.fd > img { position: absolute; right: -4px; top: 2px; width: 92px; height: 44px; object-fit: contain; }
.fd .fd-n { position: relative; font: 700 10px/1.1 var(--font-d); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd .fd-w { position: relative; font-size: 9px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd.lost { filter: grayscale(1); opacity: .45; }
.fd.lost::before { background: var(--lose); }
.feed-empty { color: #85858d; font-size: 11px; padding: 10px; text-align: center; }
/* офлайн-плашка ленты: нет интернета — лента показывает сохранённое; без сдвигов текста, только появление по прозрачности */
.feed-offline {
  display: flex; flex-direction: column; justify-content: center; gap: 3px; flex-shrink: 0;
  padding: 9px 10px; margin-bottom: 4px; border-radius: 8px;
  background: color-mix(in srgb, var(--lose) 14%, #17181c);
  box-shadow: inset 3px 0 0 var(--lose);
  animation: feedNoticeIn 200ms ease-out;
}
.feed-offline b { font: 700 12px/1.2 var(--font-d); color: #fff; }
.feed-offline small { color: var(--muted); font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
@keyframes feedNoticeIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .feed-offline { animation: none; } }
@keyframes feedIn { from { transform: translateY(-20px); opacity: 0; } }
/* ---------- игра ---------- */
.logo-big {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 28px 0 18px;
  font: 700 24px/1 var(--font-d);
}
.logo-big svg { width: 32px; height: 32px; color: var(--y); }
.logo-big b { color: var(--y); font-weight: 700; }
.toolbar { display: flex; align-items: center; gap: 10px; padding: 0 4px 6px; }
.tool { width: 18px; height: 18px; color: var(--muted); transition: color .2s; }
.tool svg { width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) {
.tool:hover { color: #fff; }
}
.tool.on { color: var(--y); }
.demo { margin-left: auto; font-size: 11px; color: #85858d; }
.game-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 348px minmax(0, 1fr); gap: 16px 20px; align-items: center;
}
.card {
  position: relative; aspect-ratio: 23.19 / 21.5; border-radius: 12px; background: var(--block);
  box-shadow: 0 0 10px rgba(0,0,0,.25); overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 18px;
  transition: box-shadow .4s;
}
.card-hint { position: relative; z-index: 2; text-align: center; }
.card-hint b { display: block; font-size: 13px; }
.card-hint span { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }
.ph { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; pointer-events: none; }
.ph .gun { width: 82%; height: 50%; color: #1d1e22; position: absolute; top: 34%; }
.ph .chev { width: 64px; height: 64px; color: var(--y); position: relative; top: 8%; filter: drop-shadow(0 0 20px rgba(254, 219, 30, .35)); }
.card-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc, #555) 45%, transparent) 0%, transparent 60%); pointer-events: none; }
/* ставка */
.bet-items { position: relative; z-index: 2; flex: 1; width: 100%; display: grid; gap: 6px; align-content: center; }
.bet-items.n1 { grid-template-columns: 1fr; }
.bet-items.n2, .bet-items.n4 { grid-template-columns: 1fr 1fr; }
.bet-items.n3, .bet-items.n5, .bet-items.n6 { grid-template-columns: repeat(3, 1fr); }
.bi { position: relative; border-radius: 8px; background: rgba(255,255,255,.03); padding: 6px; cursor: pointer; text-align: center; border-bottom: 2px solid var(--rc); }
.bi img { width: 100%; height: 64px; object-fit: contain; }
.bet-items.n1 .bi { background: none; border: 0; }
.bet-items.n1 .bi img { height: 170px; filter: drop-shadow(0 10px 25px rgba(0,0,0,.6)); }
.bi .bp { font-size: 11px; font-weight: 700; }
.bet-items.n1 .bi .bp { font-size: 13px; }
@media (hover: hover) and (pointer: fine) {
.bi:hover::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,15,17,.75); color: var(--lose); font-size: 20px; border-radius: 8px; }
}
.card-foot { position: relative; z-index: 2; width: 100%; display: flex; justify-content: space-between; align-items: end; gap: 8px; }
.card-foot small { color: var(--muted); font-size: 11px; display: block; }
.card-foot b { font: 700 18px var(--font-d); }
.bal-chip { font-size: 11px; background: rgba(254, 219, 30,.12); color: var(--y); border-radius: 6px; padding: 3px 7px; }
/* цель */
.t-img { position: relative; z-index: 2; flex: 1; width: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 12px 30px rgba(0,0,0,.65)); transition: filter .4s; }
.t-top { position: relative; z-index: 2; width: 100%; display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.t-x { color: var(--y); font: 700 14px var(--font-d); }
.t-name { position: relative; z-index: 2; text-align: center; }
.t-name small { color: var(--muted); font-size: 11px; display: block; }
.t-name b { font-size: 14px; }
.t-price { position: relative; z-index: 2; font: 700 20px var(--font-d); margin-top: 4px; }
.res-badge {
  position: absolute; z-index: 3; top: 42%; left: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0;
  font: 800 22px var(--font-d); letter-spacing: .04em; padding: 8px 18px; border-radius: 10px; white-space: nowrap;
  transition: transform 250ms var(--ease-out), opacity 200ms ease;
}
.card.win { box-shadow: 0 0 0 2px var(--win), 0 0 50px rgba(35, 215, 12, .35); }
.card.win .res-badge { background: var(--win); color: #062; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.card.lose .res-badge { background: var(--lose); color: #fff; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.card.lose .t-img { filter: grayscale(1) brightness(.5); }
.card.lose { box-shadow: 0 0 0 2px var(--lose), 0 0 40px rgba(223, 65, 37, .3); }
/* проигрыш: скин ставки не исчезает, а сереет */
.card.burn .bet-items { filter: grayscale(1) brightness(.6); animation: toGray 400ms ease; }
@keyframes toGray { from { filter: none; } }
@media (hover: hover) and (pointer: fine) {
.card.burn .bet-items .bi:hover::after { display: none; }
}
/* колесо */
.wheel-cell { display: flex; justify-content: center; }
.wheel { position: relative; width: 348px; height: 348px; }
.wheel-svg { width: 100%; height: 100%; display: block; }
.w-arc { transition: stroke-dasharray .5s ease-in-out, stroke-dashoffset .5s ease-in-out, stroke .3s; }
.wheel.win .w-arc { stroke: var(--win); filter: drop-shadow(0 0 10px rgba(35,215,12,.7)); }
.wheel.lose .w-arc { stroke: #3a3a3e; }
.wtick { stroke: #2a2a2e; stroke-width: 2; }
.wtick.big { stroke: #3c3c42; }
.w-pointer { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; transform: rotate(180deg); }
.w-pointer.ease { transition: transform .3s; }
.ptr { position: absolute; width: 36px; height: 54px; left: -18px; top: -171px; filter: drop-shadow(0 0 6px rgba(255, 170, 0, .8)); }
.w-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; pointer-events: none; }
.w-center .wc-logo { width: 96px; height: 96px; color: var(--y); filter: drop-shadow(0 0 24px rgba(254, 219, 30, .35)); }
.wc-pct { font: 700 44px/1 var(--font-d); letter-spacing: -.01em; }
.wc-lbl { color: var(--muted); font-size: 12px; margin-top: 4px; }
.wc-roll { font: 600 13px var(--font-d); margin-top: 6px; min-height: 16px; }
.wheel.win .wc-roll { color: var(--win); }
.wheel.lose .wc-roll { color: var(--lose); }
.under { align-self: start; }
.bal-input {
  display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0 6px 0 12px; height: 44px;
}
.bal-input input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; }
.mini { background: var(--soft); border-radius: 6px; padding: 5px 9px; font-size: 12px; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
.mini:hover { background: rgba(255,255,255,.12); }
}
.btn-row { display: flex; justify-content: center; }
.btn-up {
  width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px;
  background: linear-gradient(93deg, var(--y2) 0%, #fbe36b 50%, var(--y2) 100%); color: var(--on-y);
  font: 600 17px var(--font-d); transition: filter .2s, transform .1s, opacity .2s;
  box-shadow: 0 8px 30px rgba(254, 219, 30, .18);
}
.btn-up svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
.btn-up:hover:not(:disabled) { filter: brightness(1.08); }
}
.btn-up:active:not(:disabled) { transform: scale(.98); }
.btn-up:disabled { opacity: .55; cursor: default; box-shadow: none; }
.mult-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.mult-row button {
  height: 44px; min-width: 0; border-radius: 10px; background: var(--panel); border: 1px solid var(--line);
  font: 600 13px var(--font-d); color: var(--muted); transition: color .2s, border-color .2s;
}
@media (hover: hover) and (pointer: fine) {
.mult-row button:hover { color: var(--y); border-color: var(--y); }
}
/* ---------- списки ---------- */
.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 34px; align-items: start; }
.panel { background: var(--panel); border-radius: 12px; padding: 12px; box-shadow: 0 2px 20px rgba(0,0,0,.2); min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 38px; margin-bottom: 10px; flex-wrap: wrap; }
.tabs { display: flex; align-items: center; gap: 6px; }
.tab { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--soft); color: var(--muted); }
.tab.active { background: var(--y); color: var(--on-y); }
.tab svg { width: 16px; height: 16px; }
.ttl-ico { width: 16px; height: 16px; color: var(--y); }
.ptitle { font-size: 16px; font-weight: 600; margin-left: 4px; }
.ptitle em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 400; }
.head-actions { display: flex; gap: 6px; }
.filters { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: nowrap; }
.fbtn { width: 38px; height: 38px; border-radius: 8px; background: var(--soft); display: grid; place-items: center; color: var(--muted); transition: background .2s; }
.fbtn svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
.fbtn:hover { background: rgba(255,255,255,.1); }
}
.fbtn.asc svg { transform: scaleY(-1); color: var(--y); }
.fbtn.desc svg { color: var(--y); }
.fsel { flex: 0 1 132px; min-width: 0; height: 38px; background: var(--soft); border: 0; border-radius: 10px; padding: 0 10px; color: var(--text); font-size: 13px; outline: 0; }
.fsel option { background: #1e1f23; }
.range { display: flex; flex: 0 0 auto; height: 38px; max-width: 250px; background: var(--soft); border-radius: 10px; overflow: hidden; transition: max-width 240ms var(--ease-out), opacity 180ms ease; }
.range label { display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 10px; font-size: 13px; }
.range label + label { border-left: 1px solid rgba(255, 255, 255, .08); }
/* поле цены: без стрелочек счётчика; ₽ и цифры — одна высота строки, поэтому стоят на одной линии */
.range input { width: 60px; height: 18px; padding: 0; margin: 0; line-height: 18px; background: none; border: 0; outline: 0; font-size: 13px; -moz-appearance: textfield; appearance: textfield; }
.range input::-webkit-outer-spin-button, .range input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.range .cur { line-height: 18px; }
.st-toggle { display: flex; align-items: center; height: 38px; cursor: pointer; }
.st-toggle input { display: none; }
.st-toggle span { padding: 0 10px; height: 100%; display: grid; place-items: center; border-radius: 8px; background: var(--soft); font-size: 12px; font-weight: 700; color: var(--muted); }
.st-toggle input:checked + span { background: rgba(207, 106, 50, .2); color: #ff8a3d; }
.fsearch { flex: 1 1 140px; display: flex; align-items: center; gap: 8px; height: 38px; background: var(--soft); border-radius: 10px; padding: 0 12px; color: var(--muted); min-width: 0; cursor: text; }
.fsearch svg { width: 15px; height: 15px; }
.fsearch input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 12px; }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-content: start; }
.inv-grid { max-height: 600px; overflow-y: auto; min-height: 280px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.cat-grid { min-height: 280px; }
/* карточка предмета */
.item {
  position: relative; aspect-ratio: 1 / 1.22; border-radius: 8px; cursor: pointer; overflow: hidden; container-type: inline-size;
  background: linear-gradient(180deg, #232428 0%, color-mix(in srgb, var(--rc) 22%, #1d1e22) 100%);
  border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
  display: flex; flex-direction: column; padding: 5px 6px 6px; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.item::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rc); }
@media (hover: hover) and (pointer: fine) {
.item:hover { border-color: var(--rc); }
}
.item.sel { border-color: var(--y); box-shadow: 0 0 0 1px var(--y) inset, 0 0 16px rgba(254, 219, 30, .25); }
.item.sel .i-check { opacity: 1; }
.item.dis { opacity: .3; cursor: not-allowed; transform: none; }
.i-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 4px; font-size: 10px; }
/* цена не обрезается: на узкой карточке шрифт цены уменьшается по её ширине (cqi) */
.i-price { font-weight: 700; white-space: nowrap; font-size: min(10px, calc(100cqi / 7.4)); display: flex; align-items: center; gap: 3px; }
.coin { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--y) 45%, #fff), var(--y) 50%, color-mix(in srgb, var(--y) 55%, #000)); display: inline-grid; place-items: center; font-size: 8px; color: var(--on-y); font-weight: 900; flex-shrink: 0; }
.i-wear { color: var(--muted); font-weight: 600; }
.i-img { flex: 1; min-height: 0; width: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.i-w { font-size: 9px; color: var(--muted); text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.i-w .stt { color: #ff8a3d; }
.i-s { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.i-ch { position: absolute; top: 20px; right: 5px; font-size: 9px; font-weight: 700; color: var(--y); background: rgba(0,0,0,.55); border-radius: 4px; padding: 1px 4px; }
.i-check { position: absolute; top: 20px; left: 5px; width: 16px; height: 16px; border-radius: 4px; background: var(--y); color: var(--on-y); font-size: 11px; font-weight: 900; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.item.new { animation: pop .6s ease; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 60px 0; }
.empty b { display: block; color: #fff; font-size: 18px; margin-bottom: 6px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.pg { width: 36px; height: 36px; border-radius: 8px; background: var(--soft); font-size: 20px; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
.pg:hover:not(:disabled) { background: rgba(255,255,255,.12); }
}
.pg:disabled { opacity: .3; cursor: default; }
/* ---------- история ---------- */
.history { margin-top: 12px; }
.stats { display: flex; gap: 16px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.stats b { color: #fff; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--muted); font-weight: 500; padding: 8px; border-bottom: 1px solid var(--line); }
td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.04); white-space: nowrap; }
td.w { color: var(--win); font-weight: 700; }
td.l { color: var(--lose); font-weight: 700; }
td .ti { display: inline-flex; align-items: center; gap: 6px; }
td .ti img { width: 40px; height: 28px; object-fit: contain; }
/* ---------- диалог / тост ---------- */
dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: #fff; width: min(640px, calc(100vw - 32px)); padding: 0; }
dialog::backdrop { background: rgba(0,0,0,.7); }
.dlg { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.dlg h2 { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 20px var(--font-d); }
.dlg h2 svg { width: 22px; height: 22px; color: var(--y); }
.dlg h3 { margin: 8px 0 0; font-size: 14px; }
.dlg p { margin: 0; font-size: 13px; }
.dlg label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
.dlg input { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: 12px ui-monospace, Consolas, monospace; color: #fff; }
.dlg-row { display: flex; gap: 8px; }
.dlg-row.end { justify-content: flex-end; }
.revealed { font: 11px ui-monospace, Consolas, monospace; color: var(--muted); max-height: 120px; overflow-y: auto; word-break: break-all; }
.verify { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.verify input { flex: 1 1 140px; }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: #26272c; border: 1px solid rgba(254, 219, 30, .35); border-radius: 10px; padding: 10px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: feedIn .2s;
}
/* ---------- адаптив ---------- */
@media (max-width: 1280px) {.grid { grid-template-columns: repeat(4, 1fr); }
.hstats { display: none; }}
@media (max-width: 1200px) {.game-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wheel-cell { grid-column: 1 / -1; order: -1; }
.btn-row { grid-column: 1 / -1; order: 1; }
.card { aspect-ratio: 1 / .9; padding: 12px; }
.mult-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mult-row button { height: 36px; }
.bal-input { height: 36px; }}
@media (max-width: 1100px) {.lists { grid-template-columns: 1fr; }
.prices-status { display: none; }}
@media (max-width: 900px) {.layout { grid-template-columns: 1fr; }
.feed { position: static; height: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #1c1c1f; }
.feed-title { writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 6px; font-size: 12px; }
.feed-list { flex-direction: row; }
.fd, .best .fd { width: 140px; flex-shrink: 0; }
.best-label { display: none; }}
@media (max-width: 600px) {.top { gap: 10px; padding: 0 12px; }
.nav { display: none; }
.brand span { display: none; }
.wallet { margin-left: auto; }
main { padding: 0 12px 16px; }
.wheel { width: 300px; height: 300px; }
.ptr { width: 30px; height: 46px; left: -15px; top: -148px; }
.wc-pct { font-size: 36px; }
.bet-items.n1 .bi img { height: 100px; }
.res-badge { font-size: 15px; padding: 6px 12px; }
.bal-input input::placeholder { font-size: 11px; }
.grid { grid-template-columns: repeat(3, 1fr); }
.range input { width: 48px; }}
/* ---------- пользователь ---------- */
.user-chip { position: relative; display: block; text-decoration: none; }
.ava {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; overflow: hidden;
  font: 700 17px var(--font-d); color: #000; background: var(--ava, linear-gradient(135deg, #fedb1e, #b8950f));
  box-shadow: 0 0 0 2px #26272c; flex-shrink: 0;
}
.ava img { width: 100%; height: 100%; object-fit: cover; }
.ava.big { width: 112px; height: 112px; border-radius: 22px; font-size: 46px; box-shadow: 0 0 0 3px var(--y), 0 10px 40px rgba(254, 219, 30, .2); }
.lvl-badge {
  position: absolute; right: -6px; bottom: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
  background: var(--y); color: var(--on-y); font: 700 11px/20px var(--font-d); text-align: center; box-shadow: 0 0 0 2px var(--bg-header);
}
.lvl-badge.big { position: static; display: inline-block; height: 26px; line-height: 26px; font-size: 14px; padding: 0 9px; box-shadow: none; }
/* ---------- таблетки-вкладки ---------- */
.pills { display: flex; flex: 0 0 auto; background: rgba(255,255,255,.04); border-radius: 100px; padding: 3px; gap: 0; }
.pill {
  display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 100px;
  color: var(--muted); font-size: 13px; font-weight: 600; transition: background .2s, color .2s;
}
.pill svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
.pill:hover { color: #fff; }
}
.pill.active { background: var(--y); color: var(--on-y); }
.fmeta { flex: 0 0 auto; max-width: 140px; overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; transition: max-width 240ms var(--ease-out), opacity 180ms ease; }
/* ---------- магазин ---------- */
.item.incart { border-color: var(--win); box-shadow: 0 0 0 1px var(--win) inset, 0 0 16px rgba(35, 215, 12, .25); }
.item.incart .i-check { opacity: 1; background: var(--win); }
.item.cant { opacity: .35; }
.cart-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 12px;
  border-radius: 10px; background: #17181c; border: 1px solid var(--line);
}
.cart-bar .cb-info { font-size: 13px; color: var(--muted); }
.cart-bar .cb-info b { color: #fff; font: 700 16px var(--font-d); }
.cart-bar .btn-y { display: flex; align-items: center; gap: 8px; }
.cart-bar .btn-y svg { width: 16px; height: 16px; }
/* ---------- профиль ---------- */
.page { animation: feedIn .25s ease; }
.profile-card {
  margin-top: 28px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
  padding: 28px; border-radius: 16px; position: relative; overflow: hidden;
  background: radial-gradient(600px 220px at 0% 0%, rgba(254, 219, 30, .12), transparent 70%), var(--panel);
}
.pc-ava-wrap { position: relative; }
.ava-edit {
  position: absolute; right: -8px; bottom: -8px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: #26272c; color: var(--y); box-shadow: 0 0 0 3px var(--panel);
}
.ava-edit svg { width: 16px; height: 16px; }
.pc-main { min-width: 0; }
.pc-name-row { display: flex; align-items: center; gap: 10px; }
.pc-name-row h2 { margin: 0; font: 700 28px var(--font-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-name-row input { font: 700 24px var(--font-d); background: var(--bg); border: 1px solid var(--y); border-radius: 8px; padding: 2px 10px; outline: 0; width: min(320px, 100%); }
.pc-sub { display: flex; gap: 18px; color: var(--muted); font-size: 13px; margin: 6px 0 14px; flex-wrap: wrap; }
.pc-sub b { color: #fff; font-weight: 600; }
.xp { max-width: 460px; }
.xp-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.xp-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; margin-bottom: 6px; }
.xp-bar i { display: block; width: 100%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--y2), #fbe77a); transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--ease-out); }
.xp small { font-size: 11px; }
.pc-balance { display: flex; flex-direction: column; gap: 14px; text-align: right; }
.pc-balance small { display: block; color: var(--muted); font-size: 12px; }
.pc-balance b { font: 700 24px var(--font-d); }
.pc-balance div:first-child b { color: var(--y); }
.ava-picker { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; margin-top: 10px; background: var(--panel); border-radius: 12px; align-items: center; }
.ava-picker .ava { cursor: pointer; width: 48px; height: 48px; }
.ava-picker .ava.cur { box-shadow: 0 0 0 2px var(--y); }
.ava-picker .ghost { margin-left: auto; }
.pstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.ps {
  background: var(--panel); border-radius: 12px; padding: 14px 16px; position: relative; overflow: hidden; min-height: 82px;
}
.ps small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.ps b { font: 700 20px var(--font-d); }
.ps b.pos { color: var(--win); }
.ps b.neg { color: var(--lose); }
.ps.drop { background: linear-gradient(120deg, color-mix(in srgb, var(--rc) 30%, #1e1f23), #1e1f23 70%); }
.ps.drop img { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 110px; height: 70px; object-fit: contain; }
.ps.drop .pn { font-size: 12px; color: #fff; position: relative; max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid.wide { grid-template-columns: repeat(8, 1fr); }
td.plus { color: var(--win); text-align: right; font-weight: 700; }
td.minus { color: var(--lose); text-align: right; font-weight: 700; }
@media (max-width: 1280px) {.grid.wide { grid-template-columns: repeat(6, 1fr); }}
@media (max-width: 1100px) {.pstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (max-width: 800px) {.profile-card { grid-template-columns: auto 1fr; padding: 18px; gap: 18px; }
.pc-balance { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; text-align: left; }
.ava.big { width: 80px; height: 80px; font-size: 32px; }
.pc-name-row h2 { font-size: 22px; }
.grid.wide { grid-template-columns: repeat(4, 1fr); }}
@media (max-width: 600px) {.user-chip .ava { width: 34px; height: 34px; }
.bonus-hide { display: none; }
.grid.wide { grid-template-columns: repeat(3, 1fr); }
.profile-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.pc-name-row, .pc-sub { justify-content: center; }
.xp { width: 100%; }}
.i-sell {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 3; height: 26px; border-radius: 6px;
  background: var(--y); color: var(--on-y); font-size: 11px; font-weight: 700; opacity: 0; transform: translateY(4px);
  transition: opacity .15s, transform .15s;
}
@media (hover: hover) and (pointer: fine) {
.item:hover .i-sell { opacity: 1; transform: none; }
}
/* без наведения (телефон): в профиле кнопка видна сразу, там нет выбора скинов для апгрейда */
@media (hover: none) {#pStockGrid .i-sell { opacity: 1; transform: none; }}
/* =================================================================
   v4: колесо, панель управления и профиль в стиле оригинала
   ================================================================= */
/* ---------- колесо ---------- */
.wheel { width: 360px; height: 360px; }
.game-grid { grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr); }
.wtick { stroke: #2c2c31; stroke-width: 1.2; }
.wtick.big { stroke: #4a4a52; stroke-width: 1.6; }
.w-lbl { fill: #77777f; font: 600 8px 'Exo 2', sans-serif; text-anchor: middle; pointer-events: none; }
.w-water { color: #25252a; }
.w-arc { transition: stroke-dasharray .5s ease-in-out, stroke-dashoffset .5s ease-in-out, stroke .3s, opacity .3s; }
.wheel.idle .w-arc { opacity: .85; }
.wheel.win #wArcOuter { stroke: var(--win); }
.wheel.lose #wArcOuter { stroke: #3a3a3e; }
.ptr { width: 24px; height: 66px; left: -12px; top: -176px; filter: drop-shadow(0 0 5px rgba(255, 190, 0, .9)); }
.wc-pct {
  font: 700 46px/1 var(--font-d); letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--c1, #b6e32a), var(--c2, #e9d21a));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wc-lbl { color: var(--c1, #a6d62a); font-size: 13px; margin-top: 6px; opacity: .9; }
.w-center .wc-logo { display: none; }
/* ---------- заглушки карточек ---------- */
.ph .gun { width: 86%; height: 52%; top: 30%; color: #1b1b1f; }
.ph .chev3 { position: relative; top: 9%; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 0 22px rgba(254, 219, 30, .35)); }
.ph .chev3 svg { width: 62px; height: 40px; color: var(--y); margin-top: -16px; }
.ph .chev3 svg:first-child { margin-top: 0; }
.ph .chev3 .f1 { opacity: .55; }
.ph .chev3 .f2 { opacity: 1; }
.ph .chev3 .f3 { opacity: .55; }
.ph::before { content: ''; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(254, 219, 30, .12), transparent 65%); top: 22%; }
/* ---------- ползунок баланса ---------- */
.bal-slider { background: #17181c; border-radius: 10px; padding: 10px 12px 12px; }
.bs-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 8px; gap: 8px; }
.bs-val { display: flex; align-items: center; gap: 4px; }
.bs-val b { color: var(--y); font-weight: 700; }
.bs-val small { color: #8a8a92; margin-left: 4px; }
#balanceBet {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 5px; outline: 0; cursor: pointer;
  background: linear-gradient(var(--y), var(--y)) no-repeat, rgba(255,255,255,.1); background-size: var(--fill, 0%) 100%;
}
#balanceBet::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--y); border: 3px solid #17181c; box-shadow: 0 0 0 1px var(--y); }
#balanceBet::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--y); border: 3px solid #17181c; }
#balanceBet:disabled { opacity: .4; cursor: default; }
/* ---------- множители и шансы ---------- */
.mult-row { display: flex !important; gap: 6px; position: relative; align-items: center; }
.mults { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.mults button {
  height: 46px; border-radius: 8px; background: #17181c; border: 1px solid #26272c; min-width: 0;
  font: 600 15px var(--font-d); color: #9a9aa2; transition: color .2s, border-color .2s, background .2s;
}
@media (hover: hover) and (pointer: fine) {
.mults button:hover { color: #fff; border-color: #44444c; }
}
.mults .chb { border-color: color-mix(in srgb, var(--cc) 55%, transparent); color: #d8d8de; }
@media (hover: hover) and (pointer: fine) {
.mults .chb:hover { background: color-mix(in srgb, var(--cc) 12%, #17181c); border-color: var(--cc); }
}
.mset { width: 38px; height: 46px; display: grid; place-items: center; color: #9a9aa2; }
.mset svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
.mset:hover { color: var(--y); }
}
.mpop {
  position: absolute; right: 0; top: 54px; z-index: 10; width: 240px; padding: 14px; border-radius: 12px;
  background: #1e1f23; border: 1px solid var(--line); box-shadow: 0 20px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 10px;
}
.mpop label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.mpop input { width: 90px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; outline: 0; }
.mpop input:focus { border-color: var(--y); }
/* ---------- переключатель ---------- */
.switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; cursor: pointer; }
.switch input { display: none; }
.switch i { position: absolute; inset: 0; border-radius: 22px; background: #3a3b40; transition: background .2s; }
.switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #a7a7a7; transition: transform .2s, background .2s; }
.switch input:checked + i { background: var(--y); }
.switch input:checked + i::after { transform: translateX(16px); background: #000; }
/* ---------- профиль ---------- */
.prof-grid {
  margin-top: 28px; padding: 16px; border-radius: 20px; background: #232428; box-shadow: 0 0 0 1px #2c2d32 inset, 0 20px 50px rgba(0,0,0,.35);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
}
.pcard { background: #1a1b1e; border-radius: 14px; padding: 16px; position: relative; overflow: hidden; }
.pu { display: flex; flex-direction: column; gap: 12px; }
.pu-top { display: flex; gap: 14px; align-items: flex-start; }
.pu .ava.big { width: 92px; height: 92px; border-radius: 14px; font-size: 38px; box-shadow: 0 0 0 2px #2f3036; }
.pu-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.pu-name { font-size: 16px; font-weight: 600; color: #d6d6dc; overflow-wrap: anywhere; }
.pu-id { display: flex; align-items: center; gap: 8px; }
.id-chip { border: 1px solid #3a3b40; border-radius: 8px; padding: 3px 9px; font-size: 13px; color: var(--muted); }
.id-chip b { color: #d6d6dc; font-weight: 600; }
.pu-btn { width: 22px; height: 22px; color: #e6e6ea; display: grid; place-items: center; }
.pu-btn svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
.pu-btn:hover { color: var(--y); }
}
.pu-lvl { display: flex; align-items: center; gap: 8px; }
.pu-lvl .xp-bar { flex: 1; margin: 0; height: 6px; }
.pu-lvl .lvl-badge.big { height: 22px; line-height: 22px; font-size: 12px; padding: 0 7px; }
#pXpText { font-size: 11px; }
.pu-row { display: flex; align-items: center; gap: 12px; background: #26272b; border-radius: 12px; padding: 12px; }
.pu-ico { width: 40px; height: 40px; border-radius: 10px; background: #34353a; display: grid; place-items: center; color: #b9b9c0; flex-shrink: 0; }
.pu-ico svg { width: 20px; height: 20px; }
.pu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pu-txt b { font-size: 15px; }
.pu-txt small { color: var(--muted); font-size: 13px; }
.pu-manage {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 12px; background: #26272b;
  font-weight: 700; transition: background .2s;
}
.pu-manage svg { width: 16px; height: 16px; color: #b9b9c0; }
@media (hover: hover) and (pointer: fine) {
.pu-manage:hover { background: #2f3035; }
}
.pb { display: flex; flex-direction: column; gap: 14px; }
.pb-head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 700; }
.pb-head svg { width: 20px; height: 20px; color: #6e6e76; }
.pb-amount { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.pb-amount b { font: 700 34px var(--font-d); }
.coin.big { width: 26px; height: 26px; font-size: 14px; }
.promo { display: flex; align-items: center; gap: 8px; border: 1px dashed #3a3b40; border-radius: 12px; padding: 6px; margin-top: auto; }
.promo-ico { width: 40px; height: 40px; border-radius: 9px; background: linear-gradient(135deg, var(--y), #8aa82e); display: grid; place-items: center; color: #0b0b0c; flex-shrink: 0; }
.promo-ico svg { width: 22px; height: 22px; }
.promo input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 15px; color: #fff; }
.promo input::placeholder { color: #8e8e96; }
.promo button { background: #3a3b40; border-radius: 8px; padding: 10px 14px; font-weight: 700; font-size: 14px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
.promo button:hover { background: #46474d; }
}
.pb-top { height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; }
.pb-top svg { width: 18px; height: 18px; }
.pr { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pbest {
  min-height: 150px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between;
  /* как лучший дроп в ленте: заливка цветом редкости и мягкое свечение вокруг карточки */
  background: linear-gradient(135deg, color-mix(in srgb, var(--rc, #8b8b94) 55%, #17181c) 0%, color-mix(in srgb, var(--rc, #8b8b94) 16%, #17181c) 100%);
  box-shadow: 0 0 22px 1px color-mix(in srgb, var(--rc, #8b8b94) 50%, transparent);
}
.pbest .pb-water { position: absolute; right: 30px; top: 10px; width: 120px; height: 120px; color: color-mix(in srgb, var(--rc, #8b8b94) 55%, transparent); }
.pbest .pbe-title { color: #b9bdd8; font-size: 14px; position: relative; }
.pbest .pbe-w { font-size: 10px; color: #c9cce0; text-transform: uppercase; position: relative; }
.pbest .pbe-s { font-size: 15px; font-weight: 800; position: relative; }
.pbest .pbe-wear { font-size: 10px; color: #9ea2c0; position: relative; }
.pbest .pbe-price { display: flex; align-items: center; gap: 5px; color: var(--y); font-weight: 700; font-size: 14px; position: relative; margin-top: 8px; }
.pbest img { position: absolute; right: 18px; top: 50%; transform: translateY(-50%) rotate(-6deg); width: 55%; max-height: 120px; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,.6)); }
.pbest .pbe-ch {
  position: absolute; top: 6px; right: 12px; height: 24px; padding: 0 9px;
  font-size: 13px; font-weight: 700; line-height: 1; display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.pbest .pbe-ch svg { width: 11px; height: 11px; color: var(--y); flex-shrink: 0; }
.pbest .pbe-empty { color: #b9bdd8; position: relative; font-size: 13px; }
.pr-small { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; }
.psm { display: flex; flex-direction: column; gap: 6px; }
.psm-head { display: flex; justify-content: space-between; align-items: center; }
.psm-head b { font-size: 16px; }
.psm-ico { width: 32px; height: 32px; border-radius: 8px; background: #2c2d32; display: grid; place-items: center; color: #b9b9c0; }
.psm-ico svg { width: 18px; height: 18px; }
.psm-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.psm-val { display: flex; align-items: center; gap: 5px; margin-top: auto; }
.psm-val b { color: var(--y); font-weight: 700; font-size: 15px; }
.psm-val.big b { font: 700 22px var(--font-d); }
.psm-val .up-y { width: 22px; height: 22px; color: var(--y); }
.pmail { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.mail-act { display: flex; gap: 8px; align-items: center; }
.mail-act input { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; outline: 0; width: 240px; }
.mail-act input:focus { border-color: var(--y); }
.btn-dark { background: #34353a; border-radius: 10px; padding: 11px 16px; font-weight: 700; font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
.btn-dark:hover { background: #404147; }
}
.psettings { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; background: var(--panel); }
.ps-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ps-l { color: var(--muted); font-size: 13px; min-width: 70px; }
.ps-row input:not([type=checkbox]) { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; outline: 0; width: 220px; }
.psettings .ava-picker { padding: 0; margin: 0; background: none; }
.topup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.topup-grid button {
  height: 64px; border-radius: 12px; background: #26272b; border: 1px solid var(--line); font: 700 18px var(--font-d);
  display: flex; align-items: center; justify-content: center; gap: 6px; transition: border-color .2s, background .2s;
}
@media (hover: hover) and (pointer: fine) {
.topup-grid button:hover { border-color: var(--y); background: #2d2e33; }
}
.dlg p { line-height: 1.5; }
@media (max-width: 1200px) {.game-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mults { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mults button { height: 36px; font-size: 13px; }
.mset { height: 36px; }}
@media (max-width: 1100px) {.prof-grid { grid-template-columns: 1fr 1fr; }
.pr { grid-column: 1 / -1; }}
@media (max-width: 700px) {.prof-grid { grid-template-columns: 1fr; padding: 10px; }
.pmail { flex-wrap: wrap; }
.mail-act { width: 100%; }
.mail-act input { flex: 1; width: auto; }}
@media (max-width: 600px) {.wheel { width: 300px; height: 300px; }
.ptr { width: 20px; height: 55px; left: -10px; top: -147px; }
.wc-pct { font-size: 38px; }
.bal-row, .mult-row { grid-column: 1 / -1; }
.mpop { right: 0; left: 0; width: auto; }}
/* =================================================================
   v5: колесо без полос на заливке, стрелка-пламя, свечение, анимации
   ================================================================= */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
/* ---------- колесо ---------- */
.wheel-svg { position: relative; z-index: 1; }
.wtick { stroke: #303036; stroke-width: 1.1; stroke-linecap: round; }
.wtick.big { stroke: #55555e; stroke-width: 1.6; }
.w-arc { transition: stroke-dasharray 300ms var(--ease-in-out), stroke-dashoffset 300ms var(--ease-in-out), stroke 300ms ease, opacity 300ms ease; }
.ptr { width: 36px; height: 54px; left: -18px; top: -158px; filter: drop-shadow(0 0 6px rgba(255, 170, 0, .85)); }
.w-pointer { z-index: 4; }
/* свечение за колесом: цвет = цвет шанса */
.w-glow {
  position: absolute; inset: 14%; border-radius: 50%; z-index: 0; pointer-events: none;
  background-color: var(--wg, #f2d20c); filter: blur(56px); opacity: .16;
  transition: background-color 400ms ease, opacity 400ms ease, transform 400ms var(--ease-out);
}
.wheel.spinning .w-glow { opacity: .3; transform: scale(1.06); }
.wheel.win .w-glow { background-color: #23d70c; opacity: .42; transform: scale(1.12); }
.wheel.lose .w-glow { background-color: #df4125; opacity: .14; }
/* ---------- свечение за предметами в карточках ---------- */
.card-glow {
  background:
    radial-gradient(closest-side at 50% 54%, color-mix(in srgb, var(--rc, #555) 60%, transparent) 0%, transparent 100%) center / 70% 70% no-repeat,
    radial-gradient(closest-side at 50% 54%, color-mix(in srgb, var(--rc, #555) 22%, transparent) 0%, transparent 100%) center / 130% 130% no-repeat;
  filter: blur(14px);

}
@keyframes glowIn { from { opacity: 0; } }
.ph::before {
  width: 62%; top: 20%;
  background: radial-gradient(closest-side, rgba(254, 219, 30, .2), rgba(254, 219, 30, .06) 55%, transparent);
  filter: blur(10px);
}
.ph .chev3 { filter: drop-shadow(0 0 14px rgba(254, 219, 30, .55)); }
/* ---------- появление скинов в карточках (только новых) ---------- */
.bi { transition: transform 150ms var(--ease-out), opacity 150ms ease; }
.bi.in { animation: itemIn 220ms var(--ease-out) both; }
@keyframes itemIn { from { opacity: 0; transform: translateY(6px) scale(.95); } }
.t-img.in { animation: itemIn 260ms var(--ease-out) both; }
/* ---------- результат ---------- */
.res-badge { transform: translate(-50%, -50%) scale(.9); transition: transform 250ms var(--ease-out), opacity 200ms ease; }
.card.win, .card.lose { box-shadow: none; }
.card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity 300ms ease;
}
.card.win::after { opacity: 1; box-shadow: inset 0 0 0 2px var(--win), inset 0 0 60px rgba(35, 215, 12, .25); }
.card.lose::after { opacity: 1; box-shadow: inset 0 0 0 2px var(--lose), inset 0 0 40px rgba(223, 65, 37, .18); }
.t-img, .bet-items.tgt { transition: filter 300ms ease; }
.card.lose .bet-items.tgt { filter: grayscale(1) brightness(.5); }
.target-card.multi .bet-items { flex: 1; }
.target-card .bi { cursor: pointer; }
.target-card.win .bi, .target-card.lose .bi { cursor: default; }
@media (hover: hover) and (pointer: fine) {
.target-card.win .bi:hover::after, .target-card.lose .bi:hover::after { display: none; }
}
/* искры при выигрыше */
.burst { position: fixed; width: 0; height: 0; z-index: 70; pointer-events: none; }
.burst i { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 2px; transform: translate(-50%, -50%); }
/* ---------- предметы в сетках ---------- */
.item { transition: transform 150ms var(--ease-out), border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease; }
@media (hover: hover) and (pointer: fine) {
.item:hover { transform: none; }
}
@media (hover: hover) and (pointer: fine) {.item:hover { border-color: var(--rc); }}
.item:active:not(.dis) { transform: scale(.97); }
.fd.in { animation: feedIn 300ms var(--ease-out); }
.fd { animation: none; }
/* ---------- кнопки ---------- */
.btn-up { transition: filter 150ms ease, transform 150ms var(--ease-out), opacity 200ms ease, box-shadow 200ms ease; }
.btn-up:active:not(:disabled) { transform: scale(.97); }
.mults button:active, .pill:active, .ghost:active, .btn-y:active:not(:disabled) { transform: scale(.97); }
.mults button, .pill, .ghost { transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 120ms var(--ease-out); }
/* ---------- тосты: переходы вместо keyframes (можно вызвать часто) ---------- */
.toast {
  display: block; animation: none; opacity: 0; pointer-events: none;
  transform: translate(-50%, 8px); transition: opacity 200ms ease, transform 200ms var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.page { animation: pageIn 220ms var(--ease-out); }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } }
/* ---------- всплывающее окно подбора и диалоги ---------- */
.mpop { transform-origin: top right; animation: popIn 160ms var(--ease-out); }
@keyframes popIn { from { opacity: 0; transform: scale(.96); } }
dialog[open] { animation: dlgIn 220ms var(--ease-out); }
@keyframes dlgIn { from { opacity: 0; transform: scale(.96); } }
@media (max-width: 600px) {.ptr { width: 30px; height: 45px; left: -15px; top: -132px; }}
/* ---------- меньше движения ---------- */
@media (prefers-reduced-motion: reduce) {.bi.in, .t-img.in, .fd.in, .page, .mpop, dialog[open] { animation: fadeOnly 200ms ease; }
.item:active:not(.dis), .btn-up:active:not(:disabled) { transform: none; }
@media (hover: hover) and (pointer: fine) {
.item:hover { transform: none; }
}
.wheel.spinning .w-glow, .wheel.win .w-glow { transform: none; }
.toast { transform: translate(-50%, 0); }}
@keyframes fadeOnly { from { opacity: 0; } }
/* =================================================================
   v6: LED-свечение за скинами, плашка результата над скином, корзина сверху
   ================================================================= */
.card { background: #17181c; }
.card .pg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; image-rendering: pixelated; pointer-events: none; }
/* затемнение у краёв, чтобы текст сверху и цена снизу читались */
.card .pg-shade {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 62% at 50% 56%, transparent 55%, rgba(23, 24, 28, .4) 100%),
    linear-gradient(180deg, rgba(23, 24, 28, .7) 0%, rgba(23, 24, 28, 0) 22%, rgba(23, 24, 28, 0) 76%, rgba(23, 24, 28, .65) 100%);
}
.card-body { position: relative; z-index: 1; flex: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.card-glow, .ph::before { display: none; }
.ph .gun { color: rgba(10, 10, 12, .72); }
/* плашка результата — сверху карточки, скин не перекрывает */
.res-badge { top: 0; transform: translate(-50%, -4px) scale(.96); font-size: 15px; padding: 6px 16px; letter-spacing: .06em; }
.card.win .res-badge, .card.lose .res-badge { transform: translate(-50%, 0) scale(1); }
.card.win .t-top, .card.lose .t-top { visibility: hidden; min-height: 40px; }
/* корзина магазина — над сеткой */
.cart-bar { margin: 0 0 10px; }
@media (prefers-reduced-motion: reduce) {.res-badge, .card.win .res-badge, .card.lose .res-badge { transform: translate(-50%, 0); }}
/* =================================================================
   v7: мягкое свечение без сетки, стрелка в пределах кольца
   ================================================================= */
.card .pg { image-rendering: auto; filter: blur(16px) saturate(1.1); transform: scale(1.12); }
.card .pg-shade {
  background:
    radial-gradient(ellipse 72% 64% at 50% 56%, transparent 60%, rgba(23, 24, 28, .3) 100%),
    linear-gradient(180deg, rgba(23, 24, 28, .55) 0%, rgba(23, 24, 28, 0) 22%, rgba(23, 24, 28, 0) 78%, rgba(23, 24, 28, .5) 100%);
}
/* кольцо в колесе 360 px: r 116–152 px; стрелка целиком внутри заливки */
.ptr { width: 22px; height: 32px; left: -11px; top: -150px; filter: drop-shadow(0 0 4px rgba(255, 170, 0, .8)); }
@media (max-width: 600px) {/* колесо 300 px: r 97–127 px */
.ptr { width: 18px; height: 26px; left: -9px; top: -125px; }}
/* =================================================================
   v8: количество в корзине, мини-статистика профиля
   ================================================================= */
.item.incart .i-check { opacity: 0; }
.qty {
  position: absolute; left: 5px; right: 5px; bottom: 5px; z-index: 3; height: 28px; border-radius: 7px;
  display: flex; align-items: center; gap: 2px; padding: 2px; background: rgba(15, 15, 17, .88);
  box-shadow: 0 0 0 1px rgba(35, 215, 12, .45) inset;
}
.qty button {
  width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; flex-shrink: 0;
  font: 700 15px/1 'Exo 2', sans-serif; color: #fff; background: rgba(255, 255, 255, .08);
  transition: background-color 150ms ease, transform 120ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.qty button:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
}
.qty button:active:not(:disabled) { transform: scale(.92); }
.qty button:disabled { opacity: .3; cursor: default; }
.qty b { flex: 1; text-align: center; font: 700 13px var(--font-d); color: var(--win); min-width: 0; }
.qty .qx { margin-left: 2px; color: var(--lose); }
.item.incart .i-w, .item.incart .i-s { visibility: hidden; }
.item.incart { cursor: default; }
.pu-stats { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pu-stats > div { background: #26272b; border-radius: 12px; padding: 10px 12px; min-width: 0; }
.pu-stats small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.pu-stats b { font: 700 16px var(--font-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pu-stats b span { color: var(--muted); font: 500 12px 'Exo 2', sans-serif; }
.pu-btn svg, .tool svg, .mset svg { display: block; }
/* =================================================================
   v9: без галочки, зелёные текст и стрелка после выигрыша, серое свечение после проигрыша
   ================================================================= */
.i-check { display: none; }
.wheel.win .ptr-body { fill: url(#gPtrWin); }
.wheel.win .ptr { filter: drop-shadow(0 0 6px rgba(35, 215, 12, .9)); }
.wheel.lose .w-glow { background-color: #8b8b94; opacity: .12; }
/* выделенная карточка: рамка не уезжает и не меняет цвет при наведении */
.item.sel { border-color: var(--y); }
@media (hover: hover) and (pointer: fine) {
.item.sel:hover { border-color: var(--y); }
}
.item.incart { border-color: var(--win); }
@media (hover: hover) and (pointer: fine) {
.item.incart:hover { border-color: var(--win); }
}
/* подписи 50% / 100% — по центру дорожки кольца (r = 112) */
.w-lbl { dominant-baseline: central; font-size: 8.5px; fill: #8a8a92; }
.w-water { color: #1f1f23; }
/* пояснение, когда введённая сумма больше доступной */
.f-note {
  margin: -2px 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 12px; color: #e9d98a;
  background: rgba(254, 219, 30, .08); box-shadow: inset 0 0 0 1px rgba(254, 219, 30, .2);
}
/* силуэты в пустых карточках: Glock (ставка) и AK-47 (цель) */
.ph .gun.ak { width: 88%; height: 46%; top: 33%; }
.ph .gun.glock { width: 56%; height: 46%; top: 32%; }
/* =================================================================
   v10: количество в магазине — жёлтые круглые −/+ как у оригинала
   ================================================================= */
.item.incart {
  border-color: var(--y);
  background: linear-gradient(180deg, color-mix(in srgb, var(--y) 26%, #17181c) 0%, color-mix(in srgb, var(--y) 42%, #17181c) 100%);
  box-shadow: 0 0 0 1px var(--y) inset, 0 0 18px rgba(254, 219, 30, .22);
}
@media (hover: hover) and (pointer: fine) {
.item.incart:hover {
  border-color: var(--y);
  background: linear-gradient(180deg, color-mix(in srgb, var(--y) 26%, #17181c) 0%, color-mix(in srgb, var(--y) 42%, #17181c) 100%);
  box-shadow: 0 0 0 1px var(--y) inset, 0 0 18px rgba(254, 219, 30, .22);
}
}
.item.incart::after { background: var(--y); }
.item.incart .i-price { color: var(--y); }
.item.incart .i-wear { visibility: hidden; }
.qty {
  left: 6px; right: 6px; bottom: 6px; height: 34px; padding: 4px; gap: 0; border-radius: 10px;
  background: #141416; box-shadow: none; justify-content: space-between;
}
.qty button {
  width: 26px; height: 26px; border-radius: 50%; background: var(--y); color: var(--on-y);
  display: grid; place-items: center;
}
.qty button svg { width: 14px; height: 14px; display: block; }
@media (hover: hover) and (pointer: fine) {
.qty button:hover:not(:disabled) { background: #fbe36b; }
}
.qty button:disabled { background: #4a4a50; color: #2a2a2e; opacity: 1; }
.qty b { color: #fff; font: 700 15px var(--font-d); }
.qx {
  position: absolute; top: 5px; right: 5px; z-index: 4; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(15, 15, 17, .85); color: #fff; font: 700 14px/1 'Exo 2', sans-serif;
  display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset;
  transition: background-color 150ms ease, color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
.qx:hover { background: var(--lose); }
}
.qty .qx { display: none; }
/* крестики (карточка в корзине, поиск, промокод): иконка SVG строго по центру кнопки, а не текст «×», который садится ниже */
.qx svg, .fclear svg, #promoCancel svg { width: 10px; height: 10px; display: block; }
/* телефон: лента — горизонтальная полоса, плашка такой же высоты, как карточки; вторая фраза скрыта, чтобы текст не выходил из 60 px */
@media (max-width: 900px) {
  .feed-offline { width: 200px; height: 60px; margin: 0 6px 0 0; padding: 6px 9px; justify-content: center; }
  .feed-offline .fo-more { display: none; }
}
/* =================================================================
   v11: шапка — Telegram, баланс с «Пополнить», круглый аватар; новые шевроны
   ================================================================= */
.wallet { gap: 10px; }
.tg-btn {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #c9c9cf;
  background: #222327; transition: background-color 150ms ease, color 150ms ease, transform 120ms var(--ease-out);
}
.tg-btn svg { width: 19px; height: 19px; margin-left: -2px; }
@media (hover: hover) and (pointer: fine) {
.tg-btn:hover { background: #2c2d32; color: #fff; }
}
.tg-btn:active { transform: scale(.95); }
.bal-pill {
  position: relative; display: flex; align-items: center; height: 44px; padding: 0 4px 0 0; border-radius: 12px;
  background: #17181b; box-shadow: inset 0 0 0 1px #2c2d32;
}
.bal-main { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 12px 0 14px; color: #fff; }
.bal-main .coin { width: 20px; height: 20px; font-size: 11px; }
.bal-main strong { font: 700 16px var(--font-d); white-space: nowrap; }
.bal-main .chev { width: 16px; height: 16px; color: var(--y); transition: transform 200ms var(--ease-out); }
.bal-main[aria-expanded="true"] .chev { transform: rotate(180deg); }
.bal-top {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 10px;
  background: linear-gradient(93deg, var(--y2) 0%, #fbe36b 50%, var(--y2) 100%); color: var(--on-y); font-weight: 600; font-size: 15px;
  transition: filter 150ms ease, transform 120ms var(--ease-out);
}
.bal-top svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
.bal-top:hover { filter: brightness(1.06); }
}
.bal-top:active { transform: scale(.97); }
.bal-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; z-index: 40; padding: 10px; border-radius: 12px;
  background: #1e1f23; box-shadow: 0 0 0 1px var(--line), 0 20px 40px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 4px; transform-origin: top left; animation: popIn 160ms var(--ease-out);
}
.bm-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 8px; font-size: 13px; color: var(--muted); }
.bm-row b { color: #fff; font-weight: 700; }
.user-chip .ava { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 2px #2c2d32; }
/* шевроны в пустых карточках */
.ph .chev3 { filter: drop-shadow(0 0 16px rgba(254, 219, 30, .45)); }
.ph .chev3 svg { width: 64px; height: 78px; margin: 0; display: block; }
.ph .chev3 .c-main { fill: var(--y); }
.ph .chev3 .c-dim { fill: color-mix(in srgb, var(--y) 42%, #17181c); }
@media (max-width: 600px) {.tg-btn { width: 36px; height: 36px; }
.bal-top span { display: none; }
.bal-top { padding: 0 10px; }
.bal-main { padding: 0 8px 0 10px; }
.bal-main strong { font-size: 14px; }
.user-chip .ava { width: 36px; height: 36px; }
.bal-menu { left: auto; right: 0; }}
/* текст в колесе — как у upgrader.best: Exo 2, без угловатого Tektur */
.wc-pct { font: 700 50px/1 'Exo 2', sans-serif; letter-spacing: -.01em; }
.wc-lbl { font: 500 15px/1.2 'Exo 2', sans-serif; margin-top: 4px; opacity: 1; }
.w-lbl { font: 600 9px 'Exo 2', sans-serif; fill: #9a9aa2; }
@media (max-width: 600px) {.wc-pct { font-size: 40px; }
.wc-lbl { font-size: 13px; }}
/* шапка: слева логотип, разделы и Telegram; справа баланс и аватар */
.top { gap: 22px; }
.top .tg-btn { margin-left: -6px; }
.top .hstats { order: 5; }
.wallet { margin-left: auto; order: 6; }
/* шевроны крупнее, с тенью под ними и мягким жёлтым свечением */
.ph .chev3 {
  top: 6%;
  filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .75)) drop-shadow(0 4px 3px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(254, 219, 30, .38));
}
.ph .chev3 svg { width: 96px; height: 117px; }
@media (max-width: 600px) {.ph .chev3 svg { width: 64px; height: 78px; }}
/* =================================================================
   v12: текст в колесе мельче, тень под стрелкой, окно настроек
   ================================================================= */
.wc-pct { font-size: 40px; }
.wc-lbl { font-size: 13px; margin-top: 3px; }
@media (max-width: 600px) {.wc-pct { font-size: 33px; }
.wc-lbl { font-size: 12px; }}
/* тень за стрелкой + свечение */
.ptr { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .85)) drop-shadow(0 0 6px rgba(0, 0, 0, .6)) drop-shadow(0 0 5px rgba(255, 170, 0, .75)); }
.wheel.win .ptr { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .85)) drop-shadow(0 0 6px rgba(0, 0, 0, .6)) drop-shadow(0 0 6px rgba(35, 215, 12, .9)); }
/* окно настроек */
.set-dlg { width: min(580px, calc(100vw - 32px)); background: #1b1c20; border-color: #2a2b30; border-radius: 18px; }
.set-dlg .dlg { padding: 0 22px 22px; gap: 10px; }
.sd-head {
  display: flex; align-items: center; justify-content: space-between; margin: 0 -22px 10px; padding: 18px 22px;
  background: #222327; border-bottom: 1px solid #2a2b30;
}
.sd-head h2 { font: 700 19px 'Exo 2', sans-serif; }
.sd-head h2 svg { width: 18px; height: 18px; color: #fff; }
.sd-x { width: 32px; height: 32px; border-radius: 8px; font-size: 26px; line-height: 1; color: #8a8a92; display: grid; place-items: center; }
@media (hover: hover) and (pointer: fine) {
.sd-x:hover { color: #fff; background: rgba(255, 255, 255, .06); }
}
.sd-sec { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.sd-sec h3, .sd-h { margin: 0; font: 700 17px 'Exo 2', sans-serif; }
.sd-h { margin-top: 14px; }
.sd-sec .link { font-size: 14px; font-weight: 600; }
.sd-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sd-box { background: #232428; border-radius: 12px; padding: 14px; }
.sd-box p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sd-inputs { display: flex; align-items: center; gap: 6px; }
.sd-in {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; height: 42px; padding: 0 10px; border-radius: 9px;
  background: #1a1b1e; box-shadow: inset 0 0 0 1px #34353b; color: #6f6f78; font: 600 15px 'Exo 2', sans-serif; cursor: text;
}
.sd-in:focus-within { box-shadow: inset 0 0 0 1px var(--y); }
.sd-in input {
  width: 100%; min-width: 0; background: none; border: 0; outline: 0; padding: 0; color: #fff;
  font: 700 16px 'Exo 2', sans-serif; -moz-appearance: textfield;
}
.sd-in.pct input { text-align: right; }
.sd-in input::-webkit-outer-spin-button, .sd-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sd-reset { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; color: var(--y); border-radius: 8px; transition: transform 300ms var(--ease-out), background-color 150ms ease; }
.sd-reset svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
.sd-reset:hover { background: rgba(254, 219, 30, .08); }
}
.sd-reset:active { transform: rotate(-90deg); }
.sd-radio { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; cursor: pointer; flex-direction: row !important; }
.sd-radio input { display: none; }
.sd-radio i {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; box-shadow: inset 0 0 0 2px #8a8a92;
  transition: box-shadow 150ms ease;
}
.sd-radio input:checked + i { box-shadow: inset 0 0 0 2px var(--y), inset 0 0 0 5px #1b1c20, inset 0 0 0 10px var(--y); }
.sd-radio b { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; }
.sd-radio small { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
.dlg-row.center { justify-content: center; margin-top: 10px; }
.sd-save { padding: 13px 22px; font-size: 16px; }
#openFair { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }
#openFair svg { width: 15px; height: 15px; color: var(--y); }
@media (max-width: 600px) {.sd-quick { grid-template-columns: 1fr; }}
/* мягкие тени: больше размытия, меньше плотности */
.ptr { filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .45)) drop-shadow(0 0 6px rgba(254, 219, 30, .8)); }
.wheel.win .ptr { filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .45)) drop-shadow(0 0 6px rgba(35, 215, 12, .85)); }
.ph .chev3 { filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .45)) drop-shadow(0 0 22px rgba(254, 219, 30, .35)); }
/* поля в настройках: «x» и «%» в одной строке с числом (перебиваем общий стиль .dlg label/input) */
.dlg .sd-in { flex-direction: row; align-items: center; gap: 2px; font: 600 15px 'Exo 2', sans-serif; color: #6f6f78; }
.dlg .sd-in input { background: none; border: 0; border-radius: 0; padding: 0; font: 700 16px 'Exo 2', sans-serif; color: #fff; }
.dlg .sd-radio { flex-direction: row; color: inherit; font-size: inherit; }
/* фраза после проигрыша — в центре колеса, под процентом */
.wc-lbl.wc-lose { max-width: 170px; text-align: center; color: #ff7a66; font: 600 14px/1.3 'Exo 2', sans-serif; margin-top: 6px; text-wrap: balance; }
/* проигрыш: вместо процента и «шанс» — только фраза */
.wc-msg {
  max-width: 180px; text-align: center; text-wrap: balance; color: #ff7a66;
  font: 700 22px/1.2 'Exo 2', sans-serif; animation: pageIn 250ms var(--ease-out);
}
@media (max-width: 600px) {.wc-msg { max-width: 150px; font-size: 18px; }}
/* =================================================================
   v13: выравнивание (impeccable layout/polish)
   ================================================================= */
/* шапка: элементы не сжимаются */
.brand, .tg-btn, .user-chip, .bal-pill { flex-shrink: 0; }
.brand { white-space: nowrap; }
/* ряд под колесом: ползунок, «Прокачать» и кнопки подбора одной высоты */
.game-grid > .under { align-self: stretch; }
.bal-row { display: flex; }
.bal-slider { flex: 1; min-height: 56px; display: flex; flex-direction: column; justify-content: center; padding: 8px 14px; }
.bs-top { margin-bottom: 9px; }
.btn-up { height: 56px; }
.mult-row { height: 100%; }
.mults button, .mset { height: 56px; }
@media (max-width: 1200px) {.mults button, .mset { height: 36px; }
.mult-row { align-items: stretch; }
.mset { height: auto; }}
/* панели «Мои скины» и «Выберите скин» — одной высоты, сетка инвентаря занимает остаток */
.lists { align-items: stretch; }
.lists > .panel { display: flex; flex-direction: column; }
#invBlock, #shopBlock { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#invBlock[hidden], #shopBlock[hidden] { display: none; }
.inv-grid { flex: 1; max-height: 640px; }
/* телефон: пустые карточки без наложения шевронов на текст */
@media (max-width: 600px) {.card-hint span { display: none; }
.card-hint b { font-size: 12px; line-height: 1.3; }
.ph .chev3 { top: 16%; }
.ph .chev3 svg { width: 40px; height: 49px; }
.ph .gun.ak { width: 80%; height: 34%; top: 46%; }
.ph .gun.glock { width: 52%; height: 36%; top: 44%; }}
/* стрелка шире (той же высоты — по-прежнему внутри кольца) */
.ptr { width: 30px; left: -15px; }
@media (max-width: 600px) {.ptr { width: 24px; left: -12px; }}
/* проигрыш: крупная фраза вместо процента, мелкая подпись вместо «шанс» */
.wc-again { color: #ff9a8a; font-size: 14px; margin-top: 6px; }
/* шапка на средних экранах: всё влезает без горизонтальной прокрутки */
@media (max-width: 900px) {.top { gap: 12px; padding: 0 14px; }
.nav a { padding: 0 8px; }
.bal-top span { display: none; }
.bal-top { padding: 0 11px; }}
/* 320–360 px: шапка с балансом и аватаром влезает в ширину без горизонтальной прокрутки; число в балансе подгоняет fitBalance() в app.js */
@media (max-width: 360px) {.top { gap: 8px; padding: 0 10px; }
.top .tg-btn { width: 34px; height: 34px; }
.wallet { gap: 6px; }
.bal-pill { padding-right: 3px; }
.bal-main { gap: 6px; padding: 0 6px 0 8px; }
.bal-main .chev { width: 14px; height: 14px; }
.bal-top { padding: 0 9px; }
.user-chip .ava { width: 32px; height: 32px; }}
/* =================================================================
   v14: выбранный скин крупно — оружие, название, картинка, цена, ×
   ================================================================= */
.sv-head { position: relative; z-index: 2; width: 100%; text-align: center; padding: 0 34px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sv-head small { color: #a7a7a7; font: 600 13px 'Exo 2', sans-serif; }
.sv-head .sv-st { color: #ff8a3d; }
.sv-head b {
  font: 800 23px/1.15 'Exo 2', sans-serif; color: #fff; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-img { flex: 1; min-height: 0; width: 100%; margin: 6px 0; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); }
.sv-price { position: relative; z-index: 2; display: flex; align-items: center; gap: 7px; font: 800 23px 'Exo 2', sans-serif; color: var(--y); }
.sv-price .coin { width: 20px; height: 20px; font-size: 11px; }
.sv-x {
  position: absolute; top: -6px; right: -6px; z-index: 4; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font: 400 24px/1 'Exo 2', sans-serif; color: #b9b9c0;
  background: rgba(40, 41, 46, .85); transition: background-color 150ms ease, color 150ms ease, transform 120ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.sv-x:hover { background: #3a3b41; color: #fff; }
}
.sv-x:active { transform: scale(.92); }
.sv-mult { position: absolute; top: -4px; left: -4px; z-index: 3; padding: 4px 9px; border-radius: 8px; background: rgba(254, 219, 30, .12); color: var(--y); font: 700 13px 'Exo 2', sans-serif; }
.res-pill { padding: 5px 16px; border-radius: 9px; font: 800 14px 'Exo 2', sans-serif; letter-spacing: .06em; animation: popIn 220ms var(--ease-out); }
.card.win .res-pill { background: var(--win); color: #062; }
.card.lose .res-pill { background: var(--lose); color: #fff; }
.card.burn .t-img { filter: grayscale(1) brightness(.6) drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); animation: toGray 400ms ease; }
.card.lose .sv-img { filter: grayscale(1) brightness(.5); }
@media (max-width: 600px) {.sv-head { padding: 0 22px; gap: 2px; }
.sv-head small { font-size: 10px; }
.sv-head b { font-size: 13px; }
.sv-price { font-size: 14px; gap: 4px; }
.sv-price .coin { width: 14px; height: 14px; font-size: 8px; }
.sv-x { width: 26px; height: 26px; font-size: 18px; top: -4px; right: -4px; }
.sv-mult { font-size: 10px; padding: 2px 6px; }}
/* выигрыш: крупная зелёная фраза и зелёная подпись вместо процента и «шанс» */
.wc-msg.win { color: #4dff2e; text-shadow: 0 0 18px rgba(35, 215, 12, .45); }
.wc-again.win { color: #8dff76; }
/* курс ЦБ убран; Telegram — слева, сразу после логотипа */
.top .tg-btn { margin-left: 0; order: 0; }
/* дропы на узкой ширине: карточки по центру полосы */
@media (max-width: 900px) {.feed { align-items: center; justify-content: center; height: auto; min-height: 84px; padding: 10px 8px; }
.feed-list { align-items: center; }
.feed-title { align-self: center; }
.best { display: flex; align-items: center; }
.fd, .best .fd { height: 64px; align-self: center; }}
/* полоса дропов: от левого края (center в прокручиваемой полосе обрезает начало) */
@media (max-width: 900px) {.feed { justify-content: flex-start; }
.feed-list, .best { margin-left: 0; }}
/* настройки быстрого подбора: число по центру поля, «x» и «%» на одинаковом расстоянии */
.dlg .sd-in { justify-content: center; gap: 4px; padding: 0 10px; }
.dlg .sd-in input { flex: 0 0 auto; width: 2.4em; text-align: center; }
/* обводка выбранного скина в сетке: ровная, снаружи, по скруглению; полоса редкости внутри, не на краю */
.item::after { left: 6px; right: 6px; bottom: 5px; height: 2px; border-radius: 2px; }
.item.sel { border-color: var(--y); box-shadow: 0 0 0 2px var(--y), 0 0 16px rgba(254, 219, 30, .25); }
@media (hover: hover) and (pointer: fine) {
.item.sel:hover { border-color: var(--y); box-shadow: 0 0 0 2px var(--y), 0 0 16px rgba(254, 219, 30, .25); }
}
.item.incart { border-color: var(--y); box-shadow: 0 0 0 2px var(--y), 0 0 18px rgba(254, 219, 30, .22); }
@media (hover: hover) and (pointer: fine) {
.item.incart:hover { border-color: var(--y); box-shadow: 0 0 0 2px var(--y), 0 0 18px rgba(254, 219, 30, .22); }
}
/* сетка инвентаря и каталога: карточки не сжимаются и не налезают друг на друга (возвращено блочное расположение панелей) */
.lists > .panel { display: block; }
#invBlock, #shopBlock { display: block; flex: none; min-height: 0; }
.inv-grid { flex: none; max-height: 640px; overflow-y: auto; align-content: start; grid-auto-rows: max-content; }
.cat-grid { align-content: start; grid-auto-rows: max-content; }
/* полоска редкости под скином: во всю ширину, у нижнего края, по скруглению карточки */
.item::after { left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0; }
/* сетки предметов: отступ внутри прокрутки, чтобы обводка выбранного скина не обрезалась; внешний минус возвращает сетку на место */
.inv-grid, .cat-grid { padding: 4px; margin: -4px; }
/* строка корзины: плавное появление и уход (grid-template-rows, transform и opacity; без пружин) */
.cart-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ease-out), margin 240ms var(--ease-out); margin-bottom: 0; }
.cart-wrap.open { grid-template-rows: 1fr; margin-bottom: 10px; }
.cart-wrap > .cart-bar { min-height: 0; overflow: hidden; margin: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; transform: translateY(6px);
  transition: opacity 180ms ease-out, transform 240ms var(--ease-out), padding 240ms var(--ease-out), border-width 240ms var(--ease-out); }
.cart-wrap.open > .cart-bar { opacity: 1; transform: none; padding-top: 10px; padding-bottom: 10px; border-width: 1px; }
@media (prefers-reduced-motion: reduce) {.cart-wrap, .cart-wrap > .cart-bar { transition: none; }
.cart-wrap > .cart-bar { transform: none; }}
/* окно настроек: без горизонтальной прокрутки — шапка во всю ширину окна, остальное с отступами внутри */
.set-dlg { overflow-x: hidden; }
.set-dlg .dlg { padding: 0 0 22px; }
.set-dlg .dlg > :not(.sd-head) { margin-left: 22px; margin-right: 22px; }
.set-dlg .sd-head { margin: 0; }
/* две колонки быстрого подбора делят ширину поровну и не выходят за окно */
.set-dlg .sd-quick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.set-dlg .sd-box, .set-dlg .sd-inputs { min-width: 0; }
@media (max-width: 600px) {.set-dlg .sd-quick { grid-template-columns: minmax(0, 1fr); }}
/* значения быстрого подбора: «x» и «%» на одинаковом отступе от числа и от краёв поля */
.set-dlg .sd-in { justify-content: center; gap: 6px; padding: 0 14px; }
.set-dlg .sd-in input { width: 3ch; min-width: 0; flex: 0 0 auto; text-align: center; padding: 0; }
.set-dlg .sd-in span { flex: 0 0 auto; line-height: 1; }
/* значения быстрого подбора: компактная группа в центре поля, отступы от краёв одинаковые и заметные */
.set-dlg .sd-in { gap: 4px; padding: 0 6px; }
.set-dlg .sd-in input { width: 2.2ch; font-size: 15px; }
/* значения быстрого подбора: «x», число и «%» на одной базовой линии, группа по центру поля */
.set-dlg .sd-in { display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; }
.set-dlg .sd-in > * { align-self: baseline; }
.set-dlg .sd-reset { align-self: center; }
/* громкость: панель с ползунком над кнопкой звука */
.vol-wrap { position: relative; display: inline-flex; }
.vol-pop {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 40;
  width: 178px; padding: 14px 16px; border-radius: 12px; background: #1e1f23;
  box-shadow: 0 0 0 1px var(--line), 0 16px 36px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 12px;
  /* выезд сверху вниз при открытии и обратно вверх при закрытии */
  opacity: 0; visibility: hidden; transform: translate(-50%, -10px);
  transition: opacity 160ms ease-out, transform 220ms var(--ease-out), visibility 0s linear 220ms;
}
.vol-pop.open {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity 160ms ease-out, transform 220ms var(--ease-out), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {.vol-pop, .vol-pop.open { transition: opacity 120ms ease-out, visibility 0s; transform: translate(-50%, 0); }}
.vol-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); }
.vol-head b { color: #fff; font: 700 14px 'Exo 2', sans-serif; }
#volRange {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px; margin: 0; border-radius: 5px; outline: 0; cursor: pointer;
  background: linear-gradient(var(--y), var(--y)) no-repeat, rgba(255, 255, 255, .1); background-size: var(--fill, 100%) 100%;
}
#volRange::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--y); border: 3px solid #1e1f23; box-shadow: 0 0 0 1px var(--y); }
#volRange::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--y); border: 3px solid #1e1f23; }
/* кнопки быстрого подбора и шестерёнка — ниже, чем большая кнопка «Прокачать» */
.mult-row .mults button, .mult-row .mset { height: 40px; }
@media (max-width: 1200px) {.mult-row .mults button, .mult-row .mset { height: 36px; }}
/* карточка игрока: содержимое по центру по высоте, на всю ширину ячейки */
.pcard.pu { justify-content: center; height: 100%; box-sizing: border-box; }
/* профиль: без внешней серой рамки — карточки стоят по краям, как остальные блоки */
.prof-grid { background: none; padding: 0; box-shadow: none; border-radius: 0; }
/* карточка игрока: высота по её данным, стоит вверху вровень с соседними карточками */
.prof-grid { align-items: start; }
.pcard.pu { height: auto; justify-content: flex-start; }
/* промокод: отдельная карточка под карточкой игрока */
.promo-card { grid-column: 1; grid-row: 2; height: auto; align-self: start; display: flex; flex-direction: column; justify-content: center; }
.promo-card .promo { margin-top: 0; }
/* профиль: левая колонка (игрок + промокод) по высоте равна карточке «Баланс»; верх и низ совпадают */
.prof-grid { align-items: stretch; }
.prof-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.prof-left .pcard.pu { height: auto; }
.promo-card { grid-column: auto; grid-row: auto; height: auto; flex: 1; align-self: auto; }
.pcard.pb { justify-content: space-between; }
.pr { grid-column: 1 / -1; }
/* лента дропов: новый дроп плавно выезжает сверху; при наведении за карточкой свечение её цвета редкости */
.feed { padding-left: 14px; padding-right: 14px; }
.fd { transition: box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
.fd:hover { box-shadow: 0 0 14px 1px color-mix(in srgb, var(--rc) 65%, transparent); }
}
.fd.in { animation: feedIn 480ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {.fd.in { animation: fadeOnly 200ms ease both; }}
/* свечение дропа при наведении: плавное раскрытие от прозрачного, без рывка */
.fd {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--rc) 0%, transparent);
  transition: box-shadow 480ms cubic-bezier(.23, 1, .32, 1);
}
@media (hover: hover) and (pointer: fine) {
.fd:hover { box-shadow: 0 0 18px 2px color-mix(in srgb, var(--rc) 60%, transparent); }
}
/* свечение дропа при наведении: чуть темнее, крупнее и мягче */
@media (hover: hover) and (pointer: fine) {
.fd:hover { box-shadow: 0 0 26px 2px color-mix(in srgb, var(--rc) 45%, transparent); }
}
/* панель с иконками — над карточкой «Ставка», в одной колонке с ней */
.bet-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bet-col .toolbar { padding: 0 2px; }
/* карточки «Ставка» и «Цель» — верхние края на одной высоте (над «Ставкой» панель иконок) */
.game-grid { align-items: start; }
.target-card { margin-top: 28px; }
/* высота панели иконок 18 px + зазор 10 px; на телефоне верх тот же */
@media (min-width: 601px) {.wheel-cell { align-self: center; }}
/* подпись под режимами: режим прокрутки не влияет на шансы */
.sd-note { margin: 6px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
/* профиль: лучший дроп — в правой колонке рядом с «Балансом» (на широких экранах); «Продано» и «Апгрейдов» — под ними на всю ширину */
.pr { display: contents; }
@media (min-width: 1101px) {.prof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pbest { grid-column: 3; grid-row: 1; height: 100%; box-sizing: border-box; }
.pr-small { grid-column: 1 / -1; }}
@media (max-width: 1100px) {.pbest, .pr-small { grid-column: 1 / -1; }}
/* выбранный скин: фон прежний, жёлтая обводка и полупрозрачная жёлтая заливка поверх карточки, галочка по центру */
.item.sel {
  background: linear-gradient(180deg, #232428 0%, color-mix(in srgb, var(--rc) 22%, #1d1e22) 100%);
  border-color: var(--y);
  box-shadow: 0 0 0 1px var(--y) inset, 0 0 16px rgba(254, 219, 30, .25);
}
.item.sel::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: color-mix(in srgb, var(--y) 22%, transparent);
}
.item.sel .i-check { background: var(--y); color: var(--on-y); box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
/* галочка выбранного скина: жёлтый кружок с чёрной галочкой по центру картинки */
.i-check {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--y); color: var(--on-y); font: 900 18px/1 'Exo 2', sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4); opacity: 0; transition: opacity 150ms ease-out; z-index: 3; pointer-events: none;
}
.item.sel .i-check { opacity: 1; }
.item.incart .i-check { opacity: 0; }
/* лучший дроп: карточка как на скриншоте — золотой градиент сзади, отступ отделяет её от остальных дропов */
.best:empty { display: none; }
.best { margin: -4px 0 16px; padding: 0; }
.best .best-label { color: var(--y); }
.best .fd { background: linear-gradient(105deg, #1d1d20 30%, color-mix(in srgb, var(--y) 70%, #1d1d20) 100%); box-shadow: 0 0 22px 1px color-mix(in srgb, var(--y) 45%, transparent); }
.best .fd-rg { background: linear-gradient(270deg, rgba(29, 29, 32, .15) 25%, color-mix(in srgb, var(--y) 35%, transparent) 100%); }
@media (max-width: 900px) {.best { margin: 0 14px 0 0; }}
@media (hover: hover) and (pointer: fine) {
.best .fd:hover { box-shadow: 0 0 22px 1px color-mix(in srgb, var(--y) 45%, transparent); }
}
/* галочка и крестик в кружке: рисованные штрихи, при наведении на выбранный скин галочка сменяется крестиком */
.i-check svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: opacity 150ms ease-out, transform 150ms var(--ease-out); }
.i-check .ck-x { opacity: 0; transform: scale(.8); }
@media (hover: hover) and (pointer: fine) {
.item.sel:hover .i-check .ck-tick { opacity: 0; transform: scale(.8); }
}
@media (hover: hover) and (pointer: fine) {
.item.sel:hover .i-check .ck-x { opacity: 1; transform: scale(1); }
}
/* поиск открыт: цена и счётчик уходят, поиск занимает всю строку кроме типа и сортировки */
.filters.is-searching .range { max-width: 0; opacity: 0; pointer-events: none; }
.filters.is-searching .fmeta { max-width: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) {.range, .fmeta { transition: none; }}
/* телефон: фильтры в две строки — тип, сортировка и цена сверху, поиск со счётчиком снизу */
@media (max-width: 600px) {.filters { flex-wrap: wrap; row-gap: 8px; }
.fsel { flex: 1 1 110px; }
.range { flex: 1 1 150px; max-width: none; }}
/* ---------- телефон: нативные штрихи (касание, зум, экран целиком, вырез) ---------- */
html {
  -webkit-tap-highlight-color: transparent; /* без серой вспышки на нажатии */
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;             /* без pull-to-refresh поверх приложения */
}
/* высота экрана без адресной строки: dvh, а старый vh остаётся запасным */
body { min-height: 100dvh; }
.layout { min-height: calc(100dvh - 64px); }
/* шапка и лента уважают вырез и нижнюю полоску */
.top { height: calc(64px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; }
@media (min-width: 901px) { .feed { height: calc(100dvh - 64px); top: calc(64px + env(safe-area-inset-top, 0px)); } }
.toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
/* кнопки — не выделяют текст при долгом нажатии и не ждут двойного тапа */
button, [role="button"] {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
@media (pointer: coarse) {
  /* ввод 16px и выше: iOS не увеличивает страницу при фокусе */
  input, select, textarea, .fsel, .fsearch input, .range input, .promo input, .set-dlg .sd-in input { font-size: 16px; }
  /* цели для пальца: не меньше 40px */
  .fbtn { width: 40px; height: 40px; }
  .fsel, .fsearch, .range label { height: 40px; }
  .ptab { min-height: 44px; }
}

/* вкладки «Мои предметы» / «Желаемые предметы»: когда панели идут друг под другом (телефон, планшет) */
.ptabs { display: none; }
@media (max-width: 1100px) {
  .lists { gap: 0; }
  .ptabs { display: flex; background: #141416; border-radius: 12px 12px 0 0; overflow: hidden; }
  .ptab {
    flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px 6px;
    color: var(--muted); font: 600 14px var(--font-d); white-space: nowrap; background: transparent;
    transition: color 180ms ease, background-color 180ms ease;
  }
  .ptab.active { color: #fff; background: var(--panel); }
  .lists > .panel { border-radius: 0 0 12px 12px; }
  .lists:not(.show-want) #wantPanel, .lists.show-want #itemsPanel { display: none; }
  #wantPanel > .panel-head { display: none; } /* заголовок «Выберите скин» заменяет вкладка */
}
@media (max-width: 360px) { .ptab { font-size: 13px; padding: 13px 4px; } }

/* активный промокод: висит в профиле, крестик отменяет */
.promo-chip {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 8px 8px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--y) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--y) 40%, transparent);
  font-size: 12px; animation: popIn 200ms var(--ease-out);
}
.promo-chip b { flex: 1; color: var(--y); font: 700 13px var(--font-d); letter-spacing: .04em; }
.promo-chip small { flex: 1; color: var(--muted); min-width: 0; }
.promo-chip button {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 17px; line-height: 1;
  display: grid; place-items: center; flex-shrink: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, transform 120ms var(--ease-out);
}
.promo-chip button:active { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) { .promo-chip button:hover { background: rgba(255, 255, 255, .18); } }

/* лента дропов как на upgrader.best: карточка с градиентом редкости, скин справа,
   на наведении название уезжает и появляется аватар с ником */
.feed { padding-left: 6px; padding-right: 6px; }
.feed-list { gap: 6px; }
.fd {
  position: relative; display: block; width: 100%; height: 80px; padding: 0; border: 0; border-radius: 8px; overflow: hidden;
  background: #232325; color: #fff; text-align: left; cursor: pointer; font: inherit; isolation: isolate;
  transition: transform 160ms ease-out, box-shadow 240ms ease-out;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.fd::before { display: none; }
.fd-rg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(270deg, rgba(35, 35, 37, .2) 25%, color-mix(in srgb, var(--rc) 30%, transparent) 100%);
}
.fd-img {
  position: absolute; z-index: 1; top: 50%; left: 0; width: 100%; height: 100%; transform: translateY(-50%);
  object-fit: contain; object-position: 72% 50%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); transition: transform 400ms var(--ease-out);
}
.fd-ch {
  position: absolute; top: 0; left: 0; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 7px;
  background: rgba(15, 15, 17, .72); border-radius: 0 0 8px 0; font: 700 11px var(--font-d);
}
.fd-ch svg { width: 10px; height: 10px; color: var(--y); }
.fd-name {
  position: absolute; left: 8px; bottom: 8px; z-index: 3; display: flex; flex-direction: column; gap: 1px; max-width: 62%;
  transition: transform 400ms var(--ease-out), opacity 300ms ease-out;
}
.fd-name b { font: 700 11px/1.1 var(--font-d); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.fd-name small { font-size: 10px; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.fd-who {
  position: absolute; left: 8px; bottom: 8px; z-index: 3; display: flex; align-items: center; gap: 6px; max-width: 80%;
  opacity: 0; transform: translateY(50%); transition: transform 400ms var(--ease-out), opacity 300ms ease-out;
}
.fd-ava {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--ava);
  display: grid; place-items: center; font: 700 11px var(--font-d); color: #fff;
}
.fd-ava img { width: 100%; height: 100%; object-fit: cover; }
.fd-nick { font: 600 12px var(--font-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.7); min-width: 0; }
.fd-mk { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 3px; background: var(--rc); }
@media (hover: hover) and (pointer: fine) {
  .fd:hover { transform: translateX(2px); }
  .fd:hover .fd-img { transform: translateY(-50%) scale(1.06); }
  .fd:hover .fd-name { transform: translateY(-120%); opacity: 0; }
  .fd:hover .fd-who { transform: translateY(0); opacity: 1; }
}
.fd:active { transform: scale(.98); }
/* лучший дроп — такая же карточка, чуть выше подписью */
.best .fd { height: 80px; }
/* телефон: горизонтальная лента, только картинки — как на сайте */
@media (max-width: 900px) {
  .feed-list { gap: 6px; }
  .fd, .best .fd { width: 105px; height: 60px; flex-shrink: 0; }
  .fd-ch, .fd-name, .fd-who { display: none; }
  .fd-img { object-position: 50% 50%; }
}
@media (prefers-reduced-motion: reduce) { .fd, .fd-img, .fd-name, .fd-who { transition: none; } }


/* при наведении справа появляется логотип ZVYAGA (шевроны), под скином */
.fd-logo { position: absolute; right: 6px; top: 50%; z-index: 0; width: 64px; height: 64px; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity 300ms ease-out, transform 400ms var(--ease-out); }
.fd-logo svg { width: 100%; height: 100%; color: var(--y); }
@media (hover: hover) and (pointer: fine) {
  .fd:hover .fd-logo { opacity: .9; transform: translateY(-50%) translateX(-4px); }
}
@media (max-width: 900px) { .fd-logo { display: none; } }
@media (prefers-reduced-motion: reduce) { .fd-logo { transition: none; } }

/* скин: перекрываем старое правило .fd img, иначе картинка съезжала вверх и обрезалась */
.fd .fd-img { position: absolute; top: 50%; right: auto; left: 0; width: 100%; height: 100%; transform: translateY(-50%); }
@media (max-width: 900px) { .fd .fd-img { object-fit: contain; object-position: 50% 50%; } }


/* крестик в поиске: виден, когда в строке есть текст */
.fsearch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.fclear {
  display: none; width: 22px; height: 22px; flex-shrink: 0; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff; font: 600 16px/1 var(--font-d); touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.fsearch.has-text .fclear { display: grid; }
.fclear:active { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) { .fclear:hover { background: rgba(255, 255, 255, .2); } }

/* профиль другого игрока: без баланса, платежей, почты и своих настроек */
#pageProfile.other .promo-card,
#pageProfile.other .pb,
#pageProfile.other .pmail,
#pageProfile.other .pu-lvl,
#pageProfile.other #pXpText,
#pageProfile.other #profSettings,
#pageProfile.other #logoutBtn,
#pageProfile.other [data-prof="stock"],
#pageProfile.other #pTabStock,
#pageProfile.other #profSellAll,
#pageProfile.other #pTabHist,
#pageProfile.other .pr-small > .psm:first-child { display: none !important; }

/* профиль другого игрока: аккуратная сетка — игрок и лучший дроп в ряд, «Апгрейдов» на всю ширину */
#pageProfile.other .prof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
#pageProfile.other .prof-left, #pageProfile.other .pr { display: contents; }
#pageProfile.other .pu { grid-column: 1; grid-row: 1; height: auto; }
#pageProfile.other #pBest { grid-column: 2; grid-row: 1; height: 100%; box-sizing: border-box; min-height: 150px; }
#pageProfile.other .pr-small { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 700px) {
  #pageProfile.other .prof-grid { grid-template-columns: minmax(0, 1fr); }
  #pageProfile.other .pu, #pageProfile.other #pBest, #pageProfile.other .pr-small { grid-column: 1; grid-row: auto; }
}

/* история апгрейдов: выигрыш — зелёная рамка, проигрыш — приглушённая карточка */
.item.hist .i-wear { visibility: hidden; }
.item.hist.won { box-shadow: 0 0 0 1px var(--win) inset; }
.item.hist.lost { opacity: .55; filter: grayscale(.6); }
.hc-res {
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap;
  font: 700 9px/1 var(--font-d); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px;
  background: rgba(15, 15, 17, .85);
}
.item.hist.won .hc-res { color: var(--win); }
.item.hist.lost .hc-res { color: #ff6b6b; }
.hc-ch {
  position: absolute; top: 6px; right: 6px; z-index: 3; font: 700 10px/1 var(--font-d); color: rgba(255, 255, 255, .85);
  background: rgba(15, 15, 17, .75); padding: 3px 6px; border-radius: 6px;
}

/* отступ между карточками профиля и панелью ниже — тот же ритм, что и между самими карточками (14 px) */
#pageProfile .prof-grid { margin-bottom: 14px; }

/* профиль: вкладка «Инвентарь» — скины из апгрейда, «Продать всё» в шапке вкладки */
.stock-meta { min-width: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.stock-head { margin-bottom: 12px; }
/* «Продать всё» — в ряду вкладок, справа, на одной оси с ними; видна только на вкладке «Инвентарь» */
#profSellAll { flex-shrink: 0; margin-left: auto; }
/* телефон: три вкладки делят ряд поровну, текст без переноса; «Продать всё» — на всю ширину под ними */
@media (max-width: 600px) {
  .prof-tabs .pills { flex: 1 1 auto; width: 100%; }
  .prof-tabs .pill { flex: 1 1 0; min-width: 0; justify-content: center; padding: 7px 6px; font-size: 12px; white-space: nowrap; }
  #profSellAll { width: 100%; }
}
/* «Показать ещё»: на всю ширину под сеткой, как строка списка */
.stock-more { display: block; width: 100%; margin-top: 10px; padding: 10px 12px; text-align: center; font-size: 13px; }
/* цели для пальца: не меньше 40px */
@media (pointer: coarse) {
  .prof-tabs .pill, #profSellAll, .stock-more { min-height: 40px; }
  #profSellAll { padding: 0 14px; }
}

/* =================================================================
   Первый вход: обязательный ник, аватар по желанию, сайт за окном в размытии
   ================================================================= */
.welcome-dlg { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  border-color: rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .03) inset; }
.welcome-dlg::backdrop { background: rgba(10, 10, 12, .55); -webkit-backdrop-filter: blur(14px) saturate(.8); backdrop-filter: blur(14px) saturate(.8); }
html.welcome-lock { overflow: hidden; }
.welcome-dlg .dlg { gap: 18px; padding: 24px; }
.w-head { display: flex; align-items: center; gap: 16px; }
.w-ava { width: 64px; height: 64px; border-radius: 16px; font-size: 28px; box-shadow: 0 0 0 2px var(--y), 0 8px 28px rgba(254, 219, 30, .18); }
.w-titles { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.welcome-dlg h2 { font: 700 20px/1.2 var(--font-d); }
.welcome-dlg .w-titles p { font-size: 13px; line-height: 1.4; }
.w-field { display: flex; flex-direction: column; gap: 8px; }
.welcome-dlg .w-field { color: var(--text); font-size: 13px; }
.w-l { font-weight: 600; font-size: 13px; }
.w-opt { color: var(--muted); font-weight: 400; }
/* 16px — иначе iOS зумит страницу при фокусе */
.welcome-dlg #wNick { font: 600 16px var(--font-d); padding: 12px 14px; border-radius: 10px; outline: 0; width: 100%; transition: border-color 150ms ease; }
.welcome-dlg #wNick:focus { border-color: var(--y); }
.w-hint { color: var(--muted); font-size: 12px; line-height: 1.4; transition: color 150ms ease; }
.w-hint.bad { color: var(--lose); }
.w-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.w-picker .ava { width: 48px; height: 48px; border-radius: 12px; font-size: 20px; cursor: pointer; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; transition: box-shadow 150ms ease, transform 120ms var(--ease-out); }
.w-picker .ava.cur { box-shadow: 0 0 0 2px var(--y); }
.w-picker .ava:active { transform: scale(.94); }
.w-picker .w-up { height: 48px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; border-radius: 12px;
  box-shadow: 0 0 0 1px var(--line) inset; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.w-up svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.w-go { padding: 14px 16px; font: 700 16px var(--font-d); border-radius: 12px; }
@media (max-width: 420px) {
.welcome-dlg .dlg { padding: 20px 16px; gap: 16px; }
.w-head { gap: 12px; }
.w-ava { width: 52px; height: 52px; font-size: 22px; border-radius: 14px; }
.welcome-dlg h2 { font-size: 18px; }
}