/* Брошенка — ночной портовый терминал: асфальт, крашеная сталь, сигнальный жёлтый. */
@font-face { font-family: "Russo One"; src: url(fonts/russo-one-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Russo One"; src: url(fonts/russo-one-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215; font-display: swap; }
@font-face { font-family: "Golos Text"; font-weight: 400; src: url(fonts/golos-text-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Golos Text"; font-weight: 400; src: url(fonts/golos-text-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20BD, U+2212; font-display: swap; }
@font-face { font-family: "Golos Text"; font-weight: 500; src: url(fonts/golos-text-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Golos Text"; font-weight: 500; src: url(fonts/golos-text-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20BD, U+2212; font-display: swap; }
@font-face { font-family: "Golos Text"; font-weight: 600; src: url(fonts/golos-text-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Golos Text"; font-weight: 600; src: url(fonts/golos-text-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20BD, U+2212; font-display: swap; }
@font-face { font-family: "Golos Text"; font-weight: 700; src: url(fonts/golos-text-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Golos Text"; font-weight: 700; src: url(fonts/golos-text-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20BD, U+2212; font-display: swap; }

:root {
  --yard: #1C2127;      /* асфальт двора */
  --steel: #252C34;     /* панель */
  --steel-2: #2F3842;   /* приподнятая панель */
  --line: #3A4450;
  --chalk: #ECE8DF;     /* текст, как разметка мелом */
  --dust: #8E98A3;      /* вторичный текст */
  --hivis: #F5C518;     /* сигнальный жёлтый — только главные действия */
  --hivis-ink: #221D08;
  --bad: #FF6B5E;
  --good: #6FD08C;
  --r-common: #9AA3AD; --r-uncommon: #5CB85C; --r-rare: #3E8EDE;
  --r-epic: #A35BE0; --r-legendary: #F0B429; --r-mythic: #FF4D6D;
  --display: "Russo One", "Arial Black", system-ui, sans-serif;
  --ui: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tab-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; color: var(--chalk); }
html { background: var(--yard); }
body { font: 15px/1.4 var(--ui); overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--hivis); outline-offset: 2px; }
button:disabled { cursor: default; }
h2 { font: 20px/1.15 var(--display); margin: 26px 0 4px; letter-spacing: .01em; }
h3 { font: 600 16px/1.3 var(--ui); margin: 0; }
p { margin: 0; }
.muted { color: var(--dust); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }

#app { max-width: 520px; margin: 0 auto; min-height: 100%; }
.view { padding: 8px 16px calc(var(--tab-h) + var(--safe-b) + 24px); }

/* ---------- HUD ---------- */
.hud { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px;
  align-items: center; padding: 10px 16px; background: color-mix(in srgb, var(--yard) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.hud .lvl { font: 18px/1 var(--display); min-width: 38px; height: 38px; display: grid; place-items: center;
  border: 2px solid var(--hivis); border-radius: 50%; color: var(--hivis); }
.hud .xp { min-width: 0; text-align: left; }
.hud .xp small { overflow: hidden; text-overflow: ellipsis; }
.hud .xp .bar { height: 6px; background: var(--steel-2); border-radius: 3px; overflow: hidden; }
.hud .xp .bar i { display: block; height: 100%; background: var(--hivis); border-radius: 3px; transition: width .5s; }
.hud .xp small { display: block; margin-top: 4px; font-size: 11px; color: var(--dust); white-space: nowrap; }
.hud .luck { display: flex; align-items: center; gap: 4px; font-weight: 600; color: var(--good); }
.hud .luck svg { width: 18px; height: 18px; fill: currentColor; }
.hud .luck.boosted { color: var(--hivis); }
.hud .money { font: 17px/1 var(--display); white-space: nowrap; }

/* ---------- нижнее меню ---------- */
.tabbar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + var(--safe-b));
  padding-bottom: var(--safe-b); display: grid; grid-template-columns: repeat(5, 1fr); background: var(--steel);
  border-top: 1px solid var(--line); max-width: 520px; margin: 0 auto; }
.tabbar button { display: grid; justify-items: center; align-content: center; gap: 3px; color: var(--dust); font-size: 11px; font-weight: 500; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar button.on { color: var(--chalk); }
.tabbar button.on svg { stroke: var(--hivis); }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px;
  border-radius: 10px; background: var(--steel-2); font-weight: 600; transition: transform .08s, filter .15s; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn.primary { background: var(--hivis); color: var(--hivis-ink); }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.btn.danger { color: var(--bad); }
.btn.block { width: 100%; }
.btn:disabled { filter: grayscale(1) brightness(.6); }
.btn .price { font: 15px/1 var(--display); }

/* ---------- чипсы стран и фильтров ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; margin: 0 -16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px;
  background: var(--steel); color: var(--dust); font-weight: 500; font-size: 14px; white-space: nowrap; }
.chip.on { background: var(--chalk); color: var(--yard); }
.chip .n { font-size: 12px; opacity: .7; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; gap: 4px; background: var(--steel);
  border-radius: 12px; margin: 8px 0 4px; }
.seg button { height: 38px; border-radius: 9px; color: var(--dust); font-weight: 600; font-size: 14px; }
.seg button.on { background: var(--steel-2); color: var(--chalk); }

/* ---------- ежедневная поставка ---------- */
.daily { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 14px; border-radius: 14px;
  background: repeating-linear-gradient(-45deg, #2B2610 0 14px, #241F0C 14px 28px); box-shadow: inset 0 0 0 1px #5A4B10; }
.daily .txt { flex: 1; }
.daily h3 { color: var(--hivis); }
.daily.wait { background: var(--steel); box-shadow: none; }
.daily.wait h3 { color: var(--chalk); }

/* ---------- контейнеры: главный визуальный элемент ---------- */
.crates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.crate { position: relative; display: flex; flex-direction: column; text-align: left; border-radius: 14px; overflow: hidden;
  background: var(--steel); }
.crate .door { position: relative; aspect-ratio: 1.35; --paint: #8E3B2E; background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.22)),
    repeating-linear-gradient(90deg, var(--paint) 0 7px, color-mix(in srgb, var(--paint) 70%, #000) 7px 9px,
      color-mix(in srgb, var(--paint) 80%, #fff) 9px 10px, var(--paint) 10px 15px); }
.crate .door::before, .crate .door::after { content: ""; position: absolute; top: 8%; bottom: 8%; width: 4px; border-radius: 2px;
  background: linear-gradient(#C9CDD2, #7D848C); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.crate .door::before { left: 41%; }
.crate .door::after { right: 41%; }
.crate .door .seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,.45); }
.crate .door .code { z-index: 1; position: absolute; left: 9%; top: 10%; font: 11px/1.15 var(--display); color: rgba(255,255,255,.82);
  letter-spacing: .06em; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.crate .door .odds { z-index: 1; position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 6px; font-size: 11px;
  font-weight: 600; background: rgba(0,0,0,.55); }
.crate.wood .door { --paint: #8A6A44; background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.25)),
    repeating-linear-gradient(0deg, var(--paint) 0 16px, color-mix(in srgb, var(--paint) 60%, #000) 16px 18px); }
.crate.wood .door::before, .crate.wood .door::after { top: 0; bottom: 0; width: 10px; background: color-mix(in srgb, var(--paint) 75%, #000); box-shadow: none; }
.crate.wood .door::before { left: 12%; } .crate.wood .door::after { right: 12%; }
.crate.wood .door .seam { display: none; }
.crate .info-b { padding: 10px 12px 12px; display: grid; gap: 2px; flex: 1; }
.crate .info-b h3 { font: 15px/1.2 var(--display); }
.crate .info-b .about { font-size: 12px; color: var(--dust); min-height: 32px; }
.crate .buy { margin-top: 8px; min-height: 40px; }
.crate .pity { font-size: 11px; color: var(--dust); margin-top: 6px; }
.crate .pity b { color: var(--r-rare); font-weight: 600; }
.crate.locked .door { filter: grayscale(.85) brightness(.55); }
.crate.locked .lock { z-index: 2; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.crate.locked .lock span { padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.6); }

/* ---------- карточки предметов ---------- */
.rar { font-weight: 600; font-size: 13px; }
.cond { height: 4px; border-radius: 2px; background: var(--steel-2); overflow: hidden; }
.cond i { display: block; height: 100%; border-radius: 2px; background: var(--chalk); }
.cond.low i { background: var(--bad); } .cond.mid i { background: var(--hivis); } .cond.hi i { background: var(--good); }

.cars { display: grid; gap: 8px; margin-top: 10px; }
.car-row { display: grid; grid-template-columns: 104px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px;
  background: var(--steel); text-align: left; box-shadow: inset 3px 0 0 var(--rc); }
.car-row svg { width: 104px; height: auto; display: block; }
.car-row .nm { font-weight: 600; line-height: 1.2; }
.car-row .sub { font-size: 12px; color: var(--dust); margin: 2px 0 6px; }
.car-row .val { font: 15px/1 var(--display); text-align: right; }

.parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.part { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 12px;
  background: var(--steel); text-align: center; box-shadow: inset 0 -3px 0 var(--rc); }
.part svg { width: 34px; height: 34px; stroke: var(--rc); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.part .sl { font-size: 12px; font-weight: 600; line-height: 1.15; }
.part .meta { font-size: 11px; color: var(--dust); }
.part .flag { position: absolute; left: 7px; top: 5px; font-size: 13px; }
.part.sel { background: var(--steel-2); box-shadow: inset 0 0 0 2px var(--hivis), inset 0 -3px 0 var(--rc); }
.part.sel::after { content: ""; position: absolute; right: 7px; top: 7px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--hivis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5 7 11l5-6' fill='none' stroke='%23221D08' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat; }

.empty { margin-top: 24px; padding: 28px 18px; border-radius: 14px; border: 1px dashed var(--line); text-align: center; color: var(--dust); }
.empty .btn { margin-top: 14px; }

/* нижняя панель действий над меню */
.actionbar { position: fixed; z-index: 19; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b)); max-width: 520px; margin: 0 auto;
  padding: 10px 16px; display: flex; gap: 8px; background: color-mix(in srgb, var(--yard) 94%, transparent); border-top: 1px solid var(--line); }
.actionbar .btn { flex: 1; min-height: 44px; padding: 0 10px; font-size: 14px; white-space: nowrap; }

/* ---------- мастерская ---------- */
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.slot { min-height: 112px; }
.slot.missing { background: transparent; box-shadow: inset 0 0 0 1px dashed var(--line); border: 1px dashed var(--line); }
.slot.missing svg { stroke: var(--line); }
.slot.missing .meta { color: var(--line); }
.preview { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--steel); display: grid; gap: 8px; }
.preview .out { font: 18px/1.2 var(--display); }
.preview .perfect { color: var(--hivis); font-size: 13px; font-weight: 600; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.kv span:first-child { color: var(--dust); }
.chance { font: 34px/1 var(--display); }

/* ---------- прокачка ---------- */
.card { margin-top: 10px; padding: 14px; border-radius: 14px; background: var(--steel); }
.upg { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.upg .pips { display: flex; gap: 4px; margin-top: 6px; }
.upg .pips i { width: 18px; height: 6px; border-radius: 3px; background: var(--steel-2); }
.upg .pips i.on { background: var(--hivis); }
.upg .btn { min-height: 40px; padding: 0 14px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.stat { padding: 12px 14px; border-radius: 12px; background: var(--steel); }
.stat b { display: block; font: 20px/1.1 var(--display); }
.stat span { font-size: 12px; color: var(--dust); }
.star { color: var(--hivis); }

/* ---------- шторка снизу ---------- */
.sheet-bg { position: fixed; inset: 0; z-index: 40; background: rgba(8,10,12,.62); animation: fade .18s ease-out; }
.sheet { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; max-height: 86vh; overflow-y: auto;
  padding: 10px 16px calc(20px + var(--safe-b)); border-radius: 20px 20px 0 0; background: var(--steel); animation: up .24s cubic-bezier(.2,.8,.2,1); }
.sheet .grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 12px; }
.sheet .acts { display: grid; gap: 8px; margin-top: 16px; }
.sheet .hero-car { display: grid; place-items: center; padding: 8px 0 0; position: relative; }
.sheet .hero-car svg { width: 82%; max-width: 330px; position: relative; z-index: 1; }
.sheet .hero-car::before { content: ""; position: absolute; inset: 10% 8% 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 40%, transparent), transparent); }
.sheet .title { font: 22px/1.15 var(--display); margin-top: 6px; }
.list-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.list-row:last-child { border-bottom: 0; }
.plus { color: var(--good); } .minus { color: var(--bad); }

/* ---------- вскрытие ---------- */
.opening { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px calc(24px + var(--safe-b)); background: #0F1215; overflow: hidden; }
.opening::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc, #3a4450) 55%, transparent), transparent 55%);
  opacity: 0; transition: opacity .6s; }
.opening.revealed::before { opacity: 1; }
.opening .status { position: relative; font: 18px/1.2 var(--display); margin-bottom: 18px; min-height: 22px; text-align: center; }
.stage { position: relative; width: min(84vw, 360px); aspect-ratio: 1.15; perspective: 900px; }
.stage .inside { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(#0B0D0F, #1A1F24);
  box-shadow: inset 0 0 40px #000; display: grid; place-items: center; overflow: hidden; }
.leaf { position: absolute; top: 0; bottom: 0; width: 50%; --paint: #8E3B2E; transition: transform .75s cubic-bezier(.5,0,.2,1); backface-visibility: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.28)),
    repeating-linear-gradient(90deg, var(--paint) 0 9px, color-mix(in srgb, var(--paint) 70%, #000) 9px 12px,
      color-mix(in srgb, var(--paint) 80%, #fff) 12px 13px, var(--paint) 13px 20px); }
.leaf.l { left: 0; transform-origin: left center; border-right: 2px solid rgba(0,0,0,.5); }
.leaf.r { right: 0; transform-origin: right center; }
.leaf::before, .leaf::after { content: ""; position: absolute; top: 6%; bottom: 6%; width: 6px; border-radius: 3px; background: linear-gradient(#D5D9DE, #7D848C); }
.leaf::before { left: 58%; } .leaf::after { left: 80%; }
.leaf .code { z-index: 1; position: absolute; left: 10%; top: 9%; font: 13px/1.2 var(--display); color: rgba(255,255,255,.85); letter-spacing: .06em; }
.stage.shake { animation: shake .9s ease-in-out; }
.stage.open .leaf.l { transform: rotateY(-102deg); }
.stage.open .leaf.r { transform: rotateY(102deg); }
.stage.wood .leaf { --paint: #8A6A44; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.28)),
    repeating-linear-gradient(0deg, var(--paint) 0 22px, color-mix(in srgb, var(--paint) 60%, #000) 22px 25px); }
.stage.wood .leaf::before, .stage.wood .leaf::after { display: none; }
.drop { position: relative; width: 100%; max-width: 380px; text-align: center; opacity: 0; transform: translateY(24px) scale(.96);
  transition: opacity .45s .15s, transform .55s .15s cubic-bezier(.2,.9,.25,1.15); }
.opening.revealed .drop { opacity: 1; transform: none; }
.drop .car-art { margin: -8px auto 0; width: 92%; }
.drop .rar-big { font: 15px/1 var(--display); color: var(--rc); letter-spacing: .04em; }
.drop .nm { font: 24px/1.15 var(--display); margin: 8px 0 4px; }
.drop .val { font: 30px/1 var(--display); margin-top: 10px; }
.drop .tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.tag { padding: 4px 9px; border-radius: 7px; background: rgba(255,255,255,.07); font-size: 12px; color: var(--dust); }
.tag.hot { color: var(--hivis); background: rgba(245,197,24,.12); }
.drop .parts { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.drop .part { opacity: 0; transform: translateY(12px); animation: rise .4s forwards; }
.opening .acts { position: relative; display: grid; gap: 8px; width: 100%; max-width: 380px; margin-top: 22px; opacity: 0; transition: opacity .3s .5s; }
.opening.revealed .acts { opacity: 1; }
.opening .skip { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; color: var(--dust); font-size: 14px; padding: 8px; }
.arena { position: relative; display: grid; place-items: center; width: 100%; max-width: 380px; }
.arena > * { grid-area: 1 / 1; }
.opening.revealed .stage { opacity: 0; transform: scale(1.3); pointer-events: none; transition: opacity .4s, transform .5s ease-in; }

.toast { position: fixed; z-index: 60; left: 50%; top: calc(66px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -12px);
  max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 12px; background: var(--chalk); color: var(--yard); font-weight: 600;
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--bad); color: #2A0905; }

.loading { display: grid; place-items: center; min-height: 60vh; color: var(--dust); text-align: center; gap: 14px; }

@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(100%); } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes shake {
  0%, 100% { transform: none; } 15% { transform: translateX(-3px) rotate(-.6deg); } 30% { transform: translateX(4px) rotate(.6deg); }
  45% { transform: translateX(-4px); } 60% { transform: translateX(3px) rotate(.4deg); } 75% { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 360px) {
  .hud { gap: 8px; padding: 8px 12px; }
  .hud .money { font-size: 15px; }
  .car-row { grid-template-columns: 84px 1fr auto; }
  .car-row svg { width: 84px; }
}

/* ===================== версия 2 ===================== */
.center { text-align: center; }
.link { color: var(--hivis); font-weight: 600; font-size: 14px; padding: 6px 0; }
.badge { position: absolute; top: 6px; right: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--bad); color: #fff; font: 700 12px/20px var(--ui); text-align: center; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 0; }

/* клевер в шапке */
.hud .clover { position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--good); }
.hud .clover .ring { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
.hud .clover .ring circle { fill: none; stroke-width: 3; }
.hud .clover .ring .track { stroke: var(--steel-2); }
.hud .clover .ring .fill { stroke: var(--good); stroke-linecap: round; transition: stroke-dashoffset .6s; }
.hud .clover > svg:not(.ring) { width: 16px; height: 16px; fill: currentColor; margin-top: -9px; }
.hud .clover span { position: absolute; bottom: 7px; font: 700 11px/1 var(--ui); color: var(--chalk); }
.hud .clover.boosted .ring .fill { stroke: var(--hivis); }

/* контейнер: кнопки ×1 и ×5, шансы */
.crate .buy-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 8px; }
.crate .buy-row .buy { margin-top: 0; }
.crate .x5 { min-width: 48px; padding: 0 10px; font: 15px/1 var(--display); }
.crate .door .info { position: absolute; z-index: 3; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.55); font: 700 13px/26px Georgia, serif; font-style: italic; text-align: center; }
.odds-list { display: grid; gap: 4px; margin-top: 12px; }
.odds-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.odds-row p { grid-column: 1 / -1; margin-top: 4px; }
button.daily { width: 100%; text-align: left; }

/* рулетка */
.opening.roulette { justify-content: flex-start; padding-top: calc(16px + env(safe-area-inset-top, 0px)); overflow-y: auto; }
.op-top { position: relative; width: 100%; max-width: 480px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.op-top .status { margin: 0; text-align: left; font-size: 17px; }
.opening.roulette .skip { position: static; }
.reels { position: relative; width: calc(100% + 32px); margin: 0 -16px; display: grid; gap: 8px; }
.reel { position: relative; height: 138px; overflow: hidden; background: linear-gradient(90deg, #0F1215 0, transparent 18%, transparent 82%, #0F1215 100%), #161A1F;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.reel::before, .reel::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 18%; pointer-events: none; }
.reel::before { left: 0; background: linear-gradient(90deg, #0F1215, transparent); }
.reel::after { right: 0; background: linear-gradient(-90deg, #0F1215, transparent); }
.reel .strip { position: absolute; left: 0; top: 10px; bottom: 10px; display: flex; gap: 8px; will-change: transform; }
.reel .marker { position: absolute; z-index: 3; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--hivis);
  box-shadow: 0 0 12px rgba(245,197,24,.7); }
.reel .marker::before, .reel .marker::after { content: ""; position: absolute; left: -6px; border: 7.5px solid transparent; }
.reel .marker::before { top: 0; border-top-color: var(--hivis); }
.reel .marker::after { bottom: 0; border-bottom-color: var(--hivis); }
.reel.waiting .strip { inset: 10px 0; background: repeating-linear-gradient(90deg, var(--steel) 0 116px, transparent 116px 124px);
  animation: idle 1s linear infinite; }
@keyframes idle { to { transform: translateX(-124px); } }
.rcard { flex: none; width: 116px; height: 100%; border-radius: 10px; background: linear-gradient(180deg, var(--steel-2), var(--steel));
  box-shadow: inset 0 -4px 0 var(--rc), inset 0 0 0 1px rgba(255,255,255,.04); display: grid; place-items: center; padding: 6px; }
.rcard svg.mini { width: 100%; height: auto; }
.rcard > svg:not(.mini) { width: 44px; height: 44px; stroke: var(--rc); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rcard.win { background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 35%, var(--steel-2)), var(--steel)); box-shadow: inset 0 -4px 0 var(--rc), 0 0 0 2px var(--rc), 0 0 24px color-mix(in srgb, var(--rc) 60%, transparent); }
.reel.stopped .rcard:not(.win) { opacity: .45; transition: opacity .4s; }
.multi .reel { height: 86px; }
.multi .reel .strip { top: 7px; bottom: 7px; }
.multi .rcard { width: 76px; border-radius: 8px; padding: 4px; }
.multi .rcard > svg:not(.mini) { width: 30px; height: 30px; }
.multi .reel.waiting .strip { inset: 7px 0; background: repeating-linear-gradient(90deg, var(--steel) 0 76px, transparent 76px 84px); }
.clover-tag { position: absolute; z-index: 4; left: 8px; top: 6px; padding: 3px 8px; border-radius: 6px; background: var(--good); color: #0B2414; font-size: 11px; font-weight: 700; }
.opening.roulette .results { position: relative; width: 100%; max-width: 420px; margin-top: 14px; opacity: 0; transform: translateY(16px);
  transition: opacity .4s .1s, transform .5s .1s cubic-bezier(.2,.9,.25,1.1); }
.opening.roulette.revealed .results { opacity: 1; transform: none; }
.opening.roulette .drop { opacity: 1; transform: none; transition: none; }
.opening.roulette .acts { opacity: 1; margin-top: 18px; }
.opening.roulette .row2 .btn { padding: 0 10px; }
.res-list { display: grid; gap: 6px; }
.res-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--steel);
  box-shadow: inset 3px 0 0 var(--rc); text-align: left; font-size: 13px; }
.res-row svg { width: 72px; height: auto; }
.res-row b { display: block; font-size: 14px; }
.res-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini-part { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--steel); box-shadow: inset 0 -3px 0 var(--rc); font-size: 12px; }
.mini-part svg { width: 26px; height: 26px; stroke: var(--rc); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mini-part small { color: var(--dust); font-size: 11px; }

/* меню */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.tile { position: relative; display: grid; justify-items: center; gap: 8px; padding: 14px 4px 12px; border-radius: 14px; background: var(--steel); font-size: 12px; font-weight: 600; }
.tile .ico { width: 30px; height: 30px; }
.ico { fill: none; stroke: var(--hivis); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shop-banner { width: 100%; margin-top: 10px; display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 14px; text-align: left;
  background: linear-gradient(100deg, #F5C518, #E9A90C); color: var(--hivis-ink); }
.shop-banner .ico { width: 34px; height: 34px; stroke: var(--hivis-ink); }
.shop-banner b { display: block; font: 18px/1.2 var(--display); }
.shop-banner span { font-size: 13px; opacity: .8; }
.mlist { margin-top: 10px; border-radius: 14px; background: var(--steel); overflow: hidden; }
.mrow { position: relative; width: 100%; display: grid; grid-template-columns: 26px 1fr auto auto 18px; align-items: center; gap: 12px; padding: 14px; text-align: left; border-bottom: 1px solid var(--line); }
.mrow:last-child { border-bottom: 0; }
.mrow .ico { width: 24px; height: 24px; }
.mrow .t { font-weight: 600; }
.mrow .s { color: var(--dust); font-size: 13px; }
.mrow .chev { width: 18px; height: 18px; fill: none; stroke: var(--dust); stroke-width: 2; }
.mrow .badge { position: static; }
.soon { padding: 3px 8px; border-radius: 6px; background: var(--steel-2); color: var(--dust); font-size: 12px; }

.page-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
.page-head .back { width: 40px; height: 40px; border-radius: 50%; background: var(--steel); display: grid; place-items: center; flex: none; }
.page-head .back svg { width: 22px; height: 22px; fill: none; stroke: var(--chalk); stroke-width: 2; }
.page-head h1 { font: 22px/1.1 var(--display); margin: 0; }

/* колесо */
.wheel-wrap { position: relative; width: min(86vw, 340px); margin: 6px auto 18px; }
.wheel-svg { display: block; width: 100%; height: auto; border-radius: 50%; box-shadow: 0 0 0 6px var(--steel-2), 0 0 0 8px var(--line); }
.wheel-svg text { fill: #fff; font: 15px var(--display); paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 3px; }
.wheel-wrap .pointer { position: absolute; z-index: 2; left: 50%; top: -14px; margin-left: -13px; border: 13px solid transparent; border-top: 26px solid var(--hivis);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.prize-list { display: grid; gap: 8px; margin-top: 14px; }

/* задания и достижения */
.qlist { display: grid; gap: 8px; margin-top: 8px; }
.qrow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--steel); }
.qrow.done { opacity: .6; }
.qrow .btn { min-height: 40px; padding: 0 12px; font-size: 14px; }
.qtxt b { display: block; font-weight: 600; margin-bottom: 6px; }
.pbar { height: 6px; border-radius: 3px; background: var(--steel-2); overflow: hidden; margin-bottom: 4px; }
.pbar i { display: block; height: 100%; background: var(--good); border-radius: 3px; }
.qbonus { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }

/* рейтинг */
.rlist { margin-top: 10px; border-radius: 14px; background: var(--steel); overflow: hidden; }
.rrow { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.rrow:last-child { border-bottom: 0; }
.rrow .rk { font: 15px var(--display); color: var(--dust); }
.rrow .rk.top1 { color: #F0B429; } .rrow .rk.top2 { color: #C9CED6; } .rrow .rk.top3 { color: #D08A4E; }
.rrow.me { background: var(--steel-2); }
.rrow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friends .rrow, .rlist .rrow:has(.nm:first-child) { grid-template-columns: 1fr auto; }
.my-rank { position: sticky; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); margin-top: 10px; display: flex; gap: 8px; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 12px; background: var(--chalk); color: var(--yard); font-weight: 600; }

/* коллекция */
.col-head { display: flex; justify-content: space-between; align-items: baseline; }
.col-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 10px; }
.col-car { display: grid; gap: 4px; padding: 8px 6px; border-radius: 10px; background: var(--steel); font-size: 11px; line-height: 1.2; text-align: center; color: var(--dust); }
.col-car svg { width: 100%; height: auto; filter: brightness(0) opacity(.35); }
.col-car.have { color: var(--chalk); box-shadow: inset 0 -3px 0 var(--rc); }
.col-car.have svg { filter: none; }

/* друзья, промокод */
.linkbox { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--yard); font-size: 13px; word-break: break-all; color: var(--dust); }
.promo { display: grid; gap: 10px; }
.promo input { height: 50px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--yard); color: var(--chalk);
  font: 18px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.promo input:focus { outline: 2px solid var(--hivis); border-color: transparent; }

/* апгрейдер */
.upg-car { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--steel); box-shadow: inset 3px 0 0 var(--rc); margin-top: 6px; }
.upg-car svg { width: 110px; height: auto; }
.mults { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.mult { display: grid; gap: 2px; justify-items: center; padding: 10px 4px; border-radius: 10px; background: var(--steel); }
.mult b { font: 16px var(--display); }
.mult small { color: var(--dust); font-size: 12px; }
.mult.on { background: var(--chalk); color: var(--yard); }
.mult.on small { color: var(--yard); opacity: .7; }
.mult:disabled { opacity: .35; }
.gauge { position: relative; height: 18px; border-radius: 9px; background: color-mix(in srgb, var(--bad) 35%, var(--steel-2)); overflow: visible; margin: 8px 0 2px; }
.gauge .zone { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px 0 0 9px; background: var(--good); }
.gauge .needle { position: absolute; top: -6px; bottom: -6px; left: 0; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--chalk); box-shadow: 0 0 8px rgba(0,0,0,.6); }

/* магазин и бонус за вход */
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.shop-item { display: grid; gap: 6px; align-content: space-between; padding: 14px; border-radius: 14px; background: var(--steel); }
.shop-item b { font: 15px/1.2 var(--display); }
.shop-item .btn { min-height: 40px; }
.star-ink { color: var(--hivis-ink); }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.day { display: grid; gap: 4px; align-content: center; justify-items: center; min-height: 74px; padding: 8px 4px; border-radius: 10px; background: var(--steel-2); text-align: center; }
.day small { color: var(--dust); font-size: 11px; }
.day b { font-size: 13px; line-height: 1.15; }
.day.got { opacity: .45; }
.day.now { background: var(--hivis); color: var(--hivis-ink); }
.day.now small { color: var(--hivis-ink); }
.day:last-child { grid-column: span 2; }
.rules p { margin-top: 6px; color: var(--dust); line-height: 1.5; }
.sel-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
@media (max-width: 360px) { .tiles { gap: 6px; } .tile { font-size: 11px; } .mults small { font-size: 11px; } }

/* ===================== версия 3: карточки машин ===================== */
.ccard { position: relative; display: flex; flex-direction: column; text-align: left; border-radius: 14px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--rc) 22%, var(--steel)) 0%, var(--steel) 60%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rc) 70%, transparent); padding: 8px 10px 10px; }
.ccard .cc-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; }
.ccard .cc-rar { color: var(--rc); font-weight: 700; }
.ccard .cc-ex { font-style: normal; margin-left: 4px; padding: 1px 5px; border-radius: 4px; background: var(--hivis); color: var(--hivis-ink); font-size: 10px; }
.ccard .cc-no { color: var(--dust); font-variant-numeric: tabular-nums; }
.ccard .cc-art { position: relative; margin: 6px -4px 2px; }
.ccard .cc-art::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 4%; height: 22%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 45%, transparent), transparent); z-index: -1; }
.ccard .cc-art svg, .ccard .cc-art img { display: block; width: 100%; height: auto; }
.ccard .cc-name small { display: block; color: var(--dust); font-size: 11px; line-height: 1.2; }
.ccard .cc-name b { display: block; font: 15px/1.15 var(--display); }
.ccard .cc-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 4px; margin-top: 8px; font-size: 10px; color: var(--dust); }
.ccard .cc-stats b { color: var(--chalk); font-size: 12px; font-weight: 700; }
.ccard .cc-foot { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; margin-top: 8px; }
.ccard .cc-cond { font-size: 11px; color: var(--dust); }
.ccard .cc-val { font: 14px var(--display); }
.ccard.l { padding: 12px 14px 14px; border-radius: 18px; }
.ccard.l .cc-top { font-size: 13px; }
.ccard.l .cc-name small { font-size: 13px; }
.ccard.l .cc-name b { font-size: 24px; }
.ccard.l .cc-stats { font-size: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
.ccard.l .cc-stats b { font-size: 16px; }
.ccard.l .cc-val { font-size: 22px; }
.ccard.s { padding: 6px 7px 8px; border-radius: 10px; }
.ccard.s .cc-top { font-size: 9px; }
.ccard.s .cc-rar { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ccard.s .cc-name small { font-size: 9px; }
.ccard.s .cc-name b { font-size: 11px; }
.ccard.locked { filter: none; box-shadow: inset 0 0 0 1px var(--line); background: var(--steel); }
.ccard.locked .cc-art svg { filter: brightness(0) opacity(.3); }
.ccard.locked .cc-rar, .ccard.locked .cc-name b { color: var(--dust); }
/* блик у эпических и выше */
.ccard.holo::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.05) 52%, transparent 62%);
  background-size: 250% 100%; background-position: 100% 0; }
.ccard.l.holo::after { animation: sheen 3.2s ease-in-out infinite; }
.r-legendary, .r-mythic { box-shadow: inset 0 0 0 2px var(--rc), 0 0 18px -4px var(--rc); }
@keyframes sheen { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.col-grid.cards { grid-template-columns: repeat(3, 1fr); }
.sort-row { display: flex; gap: 6px; margin-top: 8px; }
.sort-row .chip { height: 30px; font-size: 13px; }

/* удача в шапке */
.hud .money-col { display: grid; justify-items: end; gap: 2px; }
.hud .luck-line { font-size: 11px; font-weight: 700; color: var(--good); white-space: nowrap; }
.hud .luck-line.boost { color: var(--hivis); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.crate .door .odds.boost { background: var(--hivis); color: var(--hivis-ink); }
.luck-tag { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 6px; background: var(--hivis); color: var(--hivis-ink); font: 700 12px var(--ui); vertical-align: 2px; }
.cmp { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px 12px; font-size: 13px; margin-top: 10px; }
.cmp b { text-align: right; } .cmp .h { color: var(--dust); font-size: 11px; text-align: right; }

/* звёздные контейнеры */
.crate.star .door { --paint: #2A2416; background:
    radial-gradient(circle at 50% 45%, rgba(245,197,24,.35), transparent 60%),
    repeating-linear-gradient(90deg, #2A2416 0 7px, #1D190F 7px 9px, #3B3320 9px 10px, #2A2416 10px 15px); }
.crate.star .door .bigstar { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; color: var(--hivis); text-shadow: 0 0 20px rgba(245,197,24,.6); }
.crate.star .buy-row { grid-template-columns: 1fr; }

/* ===================== версия 4: заезды, тюнинг, «похвастаться» ===================== */
.tabbar button span { font-size: 10.5px; }
.league { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 10px; padding: 14px; border-radius: 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--lc) 22%, var(--steel)), var(--steel) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 50%, transparent); }
.lg-badge { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; text-align: center; font: 12px/1.1 var(--display);
  color: #14181D; background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--lc); box-shadow: 0 0 18px -4px var(--lc); }
.lg-main b { font: 18px var(--display); }
.lg-main .pbar { margin: 6px 0 4px; }
.race-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
.fuel, .weekly { padding: 10px 12px; border-radius: 12px; background: var(--steel); display: grid; gap: 4px; text-align: left; }
.fuel .pips { display: flex; gap: 5px; }
.fuel .pips i { width: 22px; height: 10px; border-radius: 3px; background: var(--steel-2); }
.fuel .pips i.on { background: var(--hivis); box-shadow: 0 0 8px rgba(245,197,24,.5); }
.weekly { background: var(--hivis); color: var(--hivis-ink); justify-items: end; }
.weekly small { font-size: 11px; font-weight: 600; } .weekly b { font: 16px var(--display); }
.weekly.done { background: var(--steel); color: var(--chalk); }
.pend { margin-top: 10px; box-shadow: inset 0 0 0 2px var(--hivis); }
.pend .btn { margin-top: 8px; }
.race-cars { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 8px; overflow-x: auto; padding: 4px 16px 6px; margin: 6px -16px 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
.race-cars::-webkit-scrollbar { display: none; }
.rc-wrap { position: relative; scroll-snap-align: start; border-radius: 16px; }
.rc-wrap .ccard { width: 100%; }
.rc-wrap.on .ccard { box-shadow: 0 0 0 3px var(--hivis); }
.rc-et { display: block; margin-top: 6px; text-align: center; font: 14px var(--display); color: var(--chalk); }
.rc-et small { font: 500 11px var(--ui); color: var(--dust); }
.stakes .chip:disabled { opacity: .45; }
.race-find { margin-top: 12px; min-height: 54px; font: 18px var(--display); }
.hrow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.hrow:last-child { border-bottom: 0; }
.hrow > span:first-child { font-weight: 700; width: 86px; }

.race-ov { justify-content: flex-start; padding-top: calc(18px + env(safe-area-inset-top, 0px)); overflow-y: auto; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; width: 100%; max-width: 440px; margin: 8px 0 12px; }
.vs > div { display: grid; gap: 6px; }
.vs .et { font: 20px var(--display); text-align: center; }
.vs-x { font: 22px var(--display); color: var(--hivis); }
.lights-ov { justify-content: center; }
.lights-ov .status { font-size: 20px; }
.tree { display: grid; gap: 14px; padding: 18px 22px; border-radius: 22px; background: #0B0D10; box-shadow: inset 0 0 0 2px #2A3038; margin: 10px 0 14px; }
.tree i { width: 78px; height: 78px; border-radius: 50%; background: #2A1F0A; box-shadow: inset 0 -6px 12px rgba(0,0,0,.6); transition: background .06s, box-shadow .06s; }
.tree i.on { background: #FFB21A; box-shadow: 0 0 28px #FFB21A, inset 0 -6px 12px rgba(0,0,0,.25); }
.tree i.g { background: #0D2A16; }
.tree i.g.on { background: #34E06A; box-shadow: 0 0 36px #34E06A, inset 0 -6px 12px rgba(0,0,0,.2); }
.tap-zone { position: absolute; inset: 0; z-index: 5; background: transparent; touch-action: manipulation; }
.hint { position: relative; }
.track { position: relative; width: calc(100% + 32px); margin: 18px -16px 0; padding: 10px 0; background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.08) 46px 70px) 0 50% / 100% 2px no-repeat, #1A1E23; }
.lane { position: relative; height: 92px; border-bottom: 1px dashed rgba(255,255,255,.12); }
.lane:last-of-type { border-bottom: 0; }
.lane .who { position: absolute; left: 10px; top: 4px; font-size: 11px; color: var(--dust); z-index: 2; }
.runner { position: absolute; left: 6px; top: 14px; width: 92px; }
.runner svg, .runner img { width: 100%; height: auto; display: block; transform: scaleX(1); }
.finish { position: absolute; right: 12px; top: 0; bottom: 0; width: 8px; background: repeating-linear-gradient(0deg, #fff 0 8px, #111 8px 16px); opacity: .85; }
.race-res { text-align: center; padding: 16px; border-radius: 16px; background: var(--steel); margin-top: 14px; }
.race-res h3 { font: 30px var(--display); }
.race-res.win h3 { color: var(--good); } .race-res.lose h3 { color: var(--bad); }
.race-res .times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.race-res .times small { display: block; color: var(--dust); font-size: 12px; }
.race-res .times b { font: 22px var(--display); }
.tune-node { display: grid; gap: 8px; }
.tn-head { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; }
.tn-head svg { width: 30px; height: 30px; stroke: var(--hivis); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tune-node .pips { display: flex; gap: 4px; }
.tune-node .pips i { flex: 1; height: 6px; border-radius: 3px; background: var(--steel-2); }
.tune-node .pips i.on { background: var(--hivis); }
.share-prev { margin-top: 10px; border-radius: 14px; overflow: hidden; background: var(--yard); }
.share-prev img { display: block; width: 100%; height: auto; }
.btn.brag { background: color-mix(in srgb, var(--hivis) 18%, var(--steel-2)); color: var(--hivis); }
.race-ov .acts { opacity: 1; margin-top: 12px; }

/* ================= v5: главный экран ================= */
.yard { display: flex; flex-direction: column; gap: 10px; padding-bottom: 76px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: var(--steel); margin-top: 4px; }
.seg button { height: 38px; border-radius: 10px; font-weight: 700; color: var(--dust); transition: background .2s, color .2s; }
.seg button.on { background: var(--steel-2); color: var(--chalk); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; }
.ybanner { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 14px; text-align: left;
  background: var(--steel); box-shadow: inset 0 0 0 1px var(--line); }
.ybanner .yb-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; flex: none; background: var(--steel-2); }
.ybanner .yb-txt { flex: 1; display: grid; min-width: 0; }
.ybanner .yb-txt b { font-size: 14px; } .ybanner .yb-txt small { font-size: 12px; color: var(--dust); }
.ybanner .yb-go { font-size: 22px; color: var(--dust); }
.ybanner.gold { background: linear-gradient(90deg, rgba(245,197,24,.16), rgba(245,197,24,0) 70%), var(--steel); box-shadow: inset 0 0 0 1px rgba(245,197,24,.45); }
.ybanner.star { background: linear-gradient(90deg, rgba(240,180,41,.10), rgba(240,180,41,0) 70%), var(--steel); }
.ybanner.star .yb-ico { color: var(--hivis); background: #2A2416; }
.ystage { position: relative; display: grid; justify-items: center; text-align: center; padding: 4px 0 0; }
.ystage .box3 { width: min(57vw, 226px); }
.ystage.locked .box3 { filter: grayscale(.8) brightness(.55); }
.yname { font: 21px/1.15 var(--display); margin: 0 0 2px; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.yabout { margin: 0; font-size: 13px; color: #B4BDC7; }
.ymeta { margin: 6px 0 0; font-size: 12px; color: #B4BDC7; }
.ymeta b { color: var(--chalk); font-weight: 600; }
.ymeta .ychance { color: var(--r-rare); font-weight: 700; }
.dotsep { margin: 0 6px; opacity: .6; }
.yinfo { position: absolute; z-index: 3; right: 22px; top: 34px; width: 30px; height: 30px; border-radius: 50%; font: italic 700 15px/1 Georgia, serif;
  background: rgba(0,0,0,.35); color: var(--chalk); box-shadow: inset 0 0 0 1px var(--line); }
.yboost { position: absolute; z-index: 3; left: 22px; top: 36px; padding: 4px 8px; border-radius: 8px; font-size: 12px; font-weight: 700;
  background: var(--hivis); color: var(--hivis-ink); }
.ychips { display: flex; gap: 8px; }
.ychip { flex: 1; min-width: 0; height: 46px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 14px;
  background: var(--steel); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: 14px; }
.ychip .yc-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ychip .yc-p { font: 13px/1 var(--display); color: var(--hivis); white-space: nowrap; }
.ychip .caret { color: var(--dust); font-size: 12px; }
.ychip.flag { flex: 0 1 auto; white-space: nowrap; }
.ychip.x5 { flex: none; width: 58px; justify-content: center; font: 16px/1 var(--display); color: var(--good); }
.ychip.x5.on { background: var(--good); color: #0E2214; box-shadow: 0 0 0 1px var(--good), 0 4px 16px rgba(111,208,140,.35); }
.ychip.x5:disabled { opacity: .35; }
.ycap { text-align: center; margin: -2px 0 0; }
.ycta-bar { position: fixed; z-index: 15; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b) + 10px); max-width: 520px; margin: 0 auto; padding: 0 16px; }
.ycta { width: 100%; min-height: 56px; border-radius: 16px; font: 17px/1 var(--display); box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset; }
.ycta .price { padding: 7px 10px; border-radius: 10px; background: rgba(0,0,0,.14); font-size: 15px; }
.ycta.x5on { background: linear-gradient(90deg, var(--hivis), #FFD84D); }

/* шторки выбора */
.sgroup { margin-top: 12px; border-radius: 14px; background: var(--steel-2); overflow: hidden; }
.sglabel { margin: 16px 0 0; font-size: 12px; font-weight: 700; color: var(--hivis); text-transform: uppercase; letter-spacing: .04em; }
.srow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; text-align: left; border-top: 1px solid var(--line); }
.srow:first-child { border-top: 0; }
.srow .sr-l { flex: 1; display: grid; gap: 1px; min-width: 0; }
.srow .sr-l b { font-size: 15px; } .srow .sr-l small { font-size: 12px; color: var(--dust); }
.srow .sr-l .sr-ch { color: var(--r-rare); font-weight: 600; }
.srow .sr-p { font: 15px/1 var(--display); white-space: nowrap; }
.srow .sr-ok { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.srow.on .sr-ok { background: var(--good); color: #0E2214; }
.srow.on { background: rgba(255,255,255,.04); }
.srow.locked { opacity: .5; }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; padding: 6px; border-radius: 14px; background: var(--steel-2); }
.sgrid button { height: 44px; border-radius: 10px; font-weight: 600; }
.sgrid button.on { background: rgba(255,255,255,.12); }

/* ================= контейнер (рисунок) ================= */
.box3 { position: relative; aspect-ratio: 1.42; perspective: 800px; }
.box3 .b-body { position: absolute; inset: 0; border-radius: 8px; padding: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paint) 60%, #000), color-mix(in srgb, var(--paint) 40%, #000));
  box-shadow: 0 2px 0 rgba(255,255,255,.08) inset, 0 18px 30px rgba(0,0,0,.45); }
.box3 .b-inside { position: absolute; inset: 6px; border-radius: 3px; overflow: hidden; opacity: 0;
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--rc) 85%, #fff) 0, color-mix(in srgb, var(--rc) 45%, #000) 45%, #07090B 100%); }
.box3 .b-rays { position: absolute; inset: -40%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.22) 0 8deg, transparent 8deg 24deg); }
.box3 .b-door { position: absolute; top: 6px; bottom: 6px; width: calc(50% - 7px); backface-visibility: hidden;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--paint) 82%, #fff) 0 3px, var(--paint) 3px 9px, color-mix(in srgb, var(--paint) 70%, #000) 9px 12px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 10px 18px rgba(255,255,255,.06);
  transition: transform .45s cubic-bezier(.3,.7,.3,1); }
.box3 .b-door.l { left: 6px; transform-origin: left center; border-radius: 3px 0 0 3px; }
.box3 .b-door.r { right: 6px; transform-origin: right center; border-radius: 0 3px 3px 0; }
.box3 .rod { position: absolute; top: 4%; bottom: 4%; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #6B7580, #C9D1D9, #6B7580); }
.box3 .b-door.l .rod:nth-child(1) { left: 28%; } .box3 .b-door.l .rod:nth-child(2) { right: 14%; }
.box3 .b-door.r .rod:nth-child(1) { left: 14%; } .box3 .b-door.r .rod:nth-child(2) { right: 28%; }
.box3 .b-code { position: absolute; left: 30%; top: 9%; font: 10px/1.15 var(--display); color: rgba(255,255,255,.78); text-align: left; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.box3 .b-star { position: absolute; right: 0; top: 30%; transform: translate(50%, -50%); font-size: 40px; line-height: 1; color: var(--hivis); text-shadow: 0 0 18px rgba(245,197,24,.6); z-index: 1; }
.box3.k-star .b-door { background: repeating-linear-gradient(90deg, #3A3220 0 3px, #2A2416 3px 9px, #1C1810 9px 12px); box-shadow: inset 0 0 0 1px rgba(245,197,24,.35); }
.box3.k-star .b-body { background: linear-gradient(180deg, #4A3C1A, #241D0E); box-shadow: 0 0 0 1px rgba(245,197,24,.4), 0 18px 30px rgba(0,0,0,.45); }
.box3.k-wood { aspect-ratio: 1.3; }
.box3.k-wood .b-door { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--paint) 88%, #fff) 0 2px, var(--paint) 2px 22%, color-mix(in srgb, var(--paint) 65%, #000) 22% calc(22% + 3px)); }
.box3.k-wood .rod { width: 9%; background: color-mix(in srgb, var(--paint) 70%, #000); }
.box3 .b-lock { position: absolute; z-index: 2; left: 50%; top: 52%; width: 26px; height: 40px; margin-left: -13px; }
.box3 .shackle { position: absolute; left: 4px; top: 0; width: 18px; height: 20px; border: 4px solid #C9D1D9; border-bottom: 0; border-radius: 10px 10px 0 0;
  transition: transform .35s ease-out, opacity .35s; }
.box3 .lbody { position: absolute; left: 0; top: 16px; width: 26px; height: 22px; border-radius: 4px;
  background: linear-gradient(180deg, #E8B84A, #A97B1F); box-shadow: 0 2px 4px rgba(0,0,0,.5);
  transition: transform .5s cubic-bezier(.5,0,.8,.4), opacity .5s; }
.box3 .lbody::after { content: ""; position: absolute; left: 11px; top: 7px; width: 4px; height: 8px; border-radius: 2px; background: #4A3510; }
.box3 .b-shadow { position: absolute; left: 6%; right: 6%; bottom: -14px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); }

/* ================= вскрытие ================= */
.op2 { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; overflow-y: auto;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(16px + var(--safe-b));
  background: radial-gradient(ellipse at 50% 40%, #232A32, #0E1114 75%); animation: fade .2s ease-out; --rc: #9AA3AD; }
.op2-top { width: 100%; max-width: 480px; display: flex; align-items: center; gap: 8px; min-height: 40px; }
.op2-title { flex: 1; margin: 0; font: 16px/1.2 var(--display); }
.op2 .op2-skip { position: absolute; z-index: 6; left: 50%; top: calc(50% + min(80vw, 320px) / 2.6 + 18px); transform: translateX(-50%);
  color: var(--dust); font-size: 14px; padding: 8px 18px; border-radius: 999px; background: rgba(255,255,255,.06); white-space: nowrap; }
.op2.s-reveal .op2-skip { position: fixed; top: auto; bottom: calc(16px + var(--safe-b)); left: 50%; transform: translateX(-50%); }
.op2-stage { position: relative; flex: 1 1 0; width: 100%; max-width: 480px; display: grid; place-items: center; min-height: 300px; }
.op2-stage > * { grid-area: 1 / 1; }
.op2-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 55%, transparent), transparent); opacity: 0; transform: scale(.4);
  transition: opacity .6s, transform .8s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.op2-stage::after { content: ""; position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 30%, transparent) 0 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent); mask: radial-gradient(closest-side, #000 20%, transparent);
  opacity: 0; pointer-events: none; transition: opacity .6s; }
.op2-crate { position: relative; width: min(80vw, 320px); transform: scale(.6); opacity: 0; animation: op2in .45s cubic-bezier(.2,1.2,.4,1) forwards; }
.op2-crate .box3 { width: 100%; }
@keyframes op2in { to { transform: none; opacity: 1; } }
.cutter { position: absolute; z-index: 4; width: 50%; left: 50%; top: calc(52% + 8px); margin: -37.2% 0 0 -.97%; height: auto; pointer-events: none;
  transform-origin: 1.94% 84.5%; transform: translate(130%, 70%) rotate(14deg); opacity: 0;
  transition: transform .5s cubic-bezier(.2,.9,.3,1), opacity .25s; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); will-change: transform, opacity; }
.s-cutter .cutter { transform: none; opacity: 1; }
.s-cut .cutter { transform: scale(.9) rotate(-5deg); transition: transform .12s ease-in; animation: shake .17s linear; }
.s-snap .cutter { transform: translate(90%, 60%) rotate(12deg); opacity: 0; transition: transform .45s ease-in .12s, opacity .3s .2s; }
.s-snap .box3 .shackle { transform: translate(-8px, -16px) rotate(-40deg); opacity: 0; }
.s-snap .box3 .lbody { transform: translate(6px, 140px) rotate(35deg); opacity: 0; }
.s-snap .op2-crate { animation: op2in .45s forwards, shake .28s linear; }
@keyframes shake { 0%,100% { translate: 0 0; } 25% { translate: -5px 2px; } 50% { translate: 4px -2px; } 75% { translate: -3px 1px; } }
.sparks { position: absolute; z-index: 5; left: 50%; top: calc(52% + 8px); width: 0; height: 0; }
.sparks i { position: absolute; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #FFE08A; box-shadow: 0 0 6px #FFC93D;
  animation: spark var(--t) ease-out forwards; }
@keyframes spark { from { transform: rotate(var(--a)) translateX(0); opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)) scale(.3); opacity: 0; } }
.s-open .box3 .b-door.l { transform: rotateY(-112deg); }
.s-open .box3 .b-door.r { transform: rotateY(112deg); }
.s-open .box3 .b-inside { opacity: 1; transition: opacity .4s .1s; }
.s-open .op2-stage::before { opacity: .9; transform: none; }
.tier-2.s-open .box3 .b-rays, .tier-3.s-open .box3 .b-rays, .tier-4.s-open .box3 .b-rays, .tier-5.s-open .box3 .b-rays { opacity: 1; transition: opacity .5s .3s; animation: spin 9s linear 1; }
.tier-3.s-reveal .op2-stage::after, .tier-4.s-reveal .op2-stage::after, .tier-5.s-reveal .op2-stage::after { opacity: 1; animation: spin 14s linear 1; }
@keyframes spin { to { rotate: 1turn; } }
.s-reveal .op2-crate { opacity: 0; transform: scale(1.12); transition: opacity .35s, transform .45s; animation: none; }
.op2-item { position: relative; z-index: 2; width: 100%; display: grid; justify-items: center; opacity: 0; transform: translateY(40px) scale(.7); pointer-events: none; }
.s-reveal .op2-item { opacity: 1; transform: none; transition: opacity .3s .1s, transform .55s .1s cubic-bezier(.2,1.25,.4,1); pointer-events: auto; }
.op2-item.multi { position: absolute; inset: 0; display: flex; overflow-y: auto; overscroll-behavior: contain; padding: 6px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.op2-item.multi::-webkit-scrollbar { display: none; }
.op2-item.multi .otiles { margin: auto; }
.op2-item.parts .otiles { max-width: 380px; gap: 6px; }
.op2-item.parts .otile { width: calc(25% - 5px); aspect-ratio: .86; }
.op2-item.parts .ot-face { padding: 3px; gap: 1px; }
.op2-item.parts .ot-face b { font-size: 10px; } .op2-item.parts .ot-face small { font-size: 9px; } .op2-item.parts .ot-face .num { font-size: 9px; }
.op2-item.parts .ot-face .ot-art.part { width: 46%; }
.op2-item .ccard.l { width: min(86vw, 340px); }
.opart { display: grid; justify-items: center; gap: 4px; padding: 22px 26px; min-width: 220px; border-radius: 18px; background: var(--steel);
  box-shadow: 0 0 0 2px var(--rc), 0 0 40px color-mix(in srgb, var(--rc) 40%, transparent); }
.opart .op-ico { width: 96px; height: 96px; color: var(--rc); display: grid; place-items: center; } .opart .op-ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 12px rgba(156,170,184,.3)); }
.opart b { font: 20px/1.2 var(--display); } .opart small { color: var(--dust); }
.otiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 420px; }
.otile { position: relative; width: calc(33.3% - 6px); aspect-ratio: .8; perspective: 600px; opacity: 0; transform: translateY(50px) scale(.6); }
.s-reveal .otile { opacity: 1; transform: none; transition: opacity .3s, transform .45s cubic-bezier(.2,1.2,.4,1); }
.s-reveal .otile:nth-child(2) { transition-delay: .06s; } .s-reveal .otile:nth-child(3) { transition-delay: .12s; }
.s-reveal .otile:nth-child(4) { transition-delay: .18s; } .s-reveal .otile:nth-child(5) { transition-delay: .24s; }
.op2-item.parts .otile:nth-child(n+6) { transition-delay: 0s; }
.ot-back, .ot-face { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; transition: transform .45s cubic-bezier(.3,.7,.3,1); }
.ot-back { background: repeating-linear-gradient(45deg, #2A3038 0 8px, #232930 8px 16px); box-shadow: inset 0 0 0 1px var(--line); }
.ot-back::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font: 28px var(--display); color: var(--dust); }
.ot-face { transform: rotateY(180deg); display: grid; align-content: center; justify-items: center; gap: 2px; padding: 6px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 22%, var(--steel)), var(--steel)); box-shadow: inset 0 0 0 2px var(--rc); }
.otile.flip .ot-back { transform: rotateY(-180deg); }
.otile.flip .ot-face { transform: none; }
.ot-face .ot-art { width: 100%; } .ot-face .ot-art svg, .ot-face .ot-art img { width: 100%; height: auto; display: block; }
.ot-face .ot-art.part { width: 52%; color: var(--rc); display: grid; place-items: center; } .ot-face .ot-art.part svg { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ot-face b { font-size: 12px; line-height: 1.15; } .ot-face small { font-size: 11px; font-weight: 700; } .ot-face .num { font-size: 11px; color: var(--dust); }
.op2-res { width: 100%; max-width: 420px; opacity: 0; transform: translateY(14px); pointer-events: none; }
.s-done .op2-res { opacity: 1; transform: none; transition: opacity .3s, transform .35s; pointer-events: auto; }
.op2-res .tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
.op2-total { text-align: center; font: 22px/1 var(--display); color: var(--hivis); margin-top: 10px; }
.op2-res .acts { display: grid; gap: 8px; margin-top: 14px; }
.op2-res .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.op2-res .row2 .btn { padding: 0 10px; font-size: 14px; }
.op2.skip *, .op2.skip *::before, .op2.skip *::after, .op2.rm *, .op2.rm *::before, .op2.rm *::after { transition-duration: .15s !important; transition-delay: 0s !important; animation: none !important; }
.op2.skip .op2-crate, .op2.rm .op2-crate { opacity: 1; transform: none; }
.op2.skip.s-reveal .op2-crate, .op2.rm.s-reveal .op2-crate { opacity: 0; }

/* ================= v5: заезды ================= */
.rt-main { display: flex; flex-direction: column; gap: 10px; padding-bottom: 76px; }
.rt-top { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; }
.rt-league { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; text-align: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lc) 18%, var(--steel)), var(--steel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 45%, transparent); }
.rt-badge { grid-row: span 2; padding: 6px 10px; border-radius: 10px; font: 13px/1 var(--display); background: var(--lc); color: #15181C; }
.rt-cups { display: grid; font-size: 14px; } .rt-cups small { font-size: 11px; color: var(--dust); }
.rt-bar { height: 4px; border-radius: 2px; background: rgba(0,0,0,.3); overflow: hidden; } .rt-bar i { display: block; height: 100%; background: var(--lc); }
.rt-fuel { display: grid; justify-items: center; align-content: center; gap: 4px; padding: 8px 12px; border-radius: 14px; background: var(--steel); }
.rt-fuel small { font-size: 11px; }
.rt-pips { display: inline-flex; gap: 2px; vertical-align: middle; }
.rt-pips i { width: 6px; height: 10px; border-radius: 2px; background: var(--steel-2); }
.rt-pips i.on { background: var(--hivis); }
.rt-pips.fuel i { width: 9px; height: 14px; } .rt-pips.fuel i.on { background: var(--good); }
.rt-car { display: grid; gap: 8px; justify-items: center; }
.rt-car .ccard.l { width: 100%; max-width: 300px; }
.rt-et { width: 100%; max-width: 360px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.rt-et > span { display: grid; gap: 2px; } .rt-et small { font-size: 11px; color: var(--dust); }
.rt-et b { font: 22px/1 var(--display); color: var(--hivis); }
.rt-et .rt-pips { margin-right: 4px; }
.rt-tune { min-height: 38px; padding: 0 14px; font-size: 14px; }
.rt-pick { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 4px; margin: 0 -16px; scrollbar-width: none; }
.rt-pick::-webkit-scrollbar { display: none; }
.rt-mini { flex: none; width: 96px; display: grid; justify-items: center; gap: 1px; padding: 6px; border-radius: 12px; background: var(--steel);
  box-shadow: inset 0 0 0 1px var(--line); }
.rt-mini.on { box-shadow: inset 0 0 0 2px var(--hivis); }
.rt-mini .rm-art { width: 100%; } .rt-mini .rm-art svg, .rt-mini .rm-art img { width: 100%; height: 38px; object-fit: contain; display: block; }
.rt-mini small { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-mini b { font: 12px/1 var(--display); color: var(--hivis); }
.rt-stakes { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px; margin: 0 -16px; scrollbar-width: none; }
.rt-stakes::-webkit-scrollbar { display: none; }
.rt-leagues { display: grid; gap: 6px; margin-top: 12px; }
.rt-leagues > div { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--steel-2);
  box-shadow: inset 4px 0 0 var(--lc); }
.rt-leagues > div.on { background: color-mix(in srgb, var(--lc) 20%, var(--steel-2)); }
.rt-leagues small { color: var(--dust); }

.rt-ov { justify-content: flex-start; }
.rt-vs { width: 100%; max-width: 440px; display: grid; gap: 4px; margin-top: 8px; }
.rt-side { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who who" "art art" "name et" "name tune"; gap: 2px 8px; padding: 12px 14px;
  border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 16%, var(--steel)), var(--steel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 50%, transparent); }
.rt-who { grid-area: who; color: var(--dust); font-size: 12px; font-weight: 600; }
.rt-tag { font-style: normal; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; margin-left: 4px; }
.rt-tag.real { background: var(--good); color: #0E2214; } .rt-tag.bot { background: var(--steel-2); color: var(--dust); }
.rs-art { grid-area: art; } .rs-art svg, .rs-art img { width: 100%; max-height: 110px; object-fit: contain; display: block; }
.rs-name { grid-area: name; font-size: 13px; color: var(--dust); font-weight: 500; } .rs-name span { display: block; font: 18px/1.1 var(--display); color: var(--chalk); }
.rs-et { grid-area: et; font: 20px/1 var(--display); color: var(--hivis); text-align: right; }
.rs-tune { grid-area: tune; text-align: right; }
.rt-x { display: grid; place-items: center; height: 0; position: relative; z-index: 2; }
.rt-x span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 20px var(--display); color: var(--hivis-ink);
  background: var(--hivis); box-shadow: 0 0 0 6px #14181C, 0 0 30px rgba(245,197,24,.4); }
.rt-chance { position: relative; width: 100%; max-width: 440px; display: flex; justify-content: space-between; margin: 14px 0 6px; padding: 10px 12px;
  border-radius: 12px; background: var(--steel); overflow: hidden; font-size: 14px; }
.rt-chance i { position: absolute; left: 0; bottom: 0; height: 3px; background: currentColor; }
.rt-chance.good { color: var(--good); } .rt-chance.mid { color: var(--hivis); } .rt-chance.bad { color: var(--bad); }
.rt-chance span { color: var(--dust); }

.rt-lights { justify-content: center; }
.rt-lights .op2-top { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; }
.rt-lights .op2-title { text-align: center; font-size: 18px; }
.rt-tree { display: grid; gap: 10px; padding: 16px 22px; border-radius: 26px; background: linear-gradient(180deg, #121519, #0A0C0E); box-shadow: inset 0 0 0 2px #2A3038, 0 20px 40px rgba(0,0,0,.5); }
.rt-row { display: flex; gap: 26px; justify-content: center; }
.rt-row i { width: 52px; height: 52px; border-radius: 50%; background: #2A1F0A; box-shadow: inset 0 -6px 12px rgba(0,0,0,.6); transition: background .05s, box-shadow .05s; }
.rt-row.l-stage i { width: 30px; height: 30px; margin: 0 11px; background: #24241E; }
.rt-row.l-stage.on i { background: #FFF3C2; box-shadow: 0 0 16px #FFF3C2; }
.rt-row.l-amber.on i { background: #FFB21A; box-shadow: 0 0 26px #FFB21A, inset 0 -6px 12px rgba(0,0,0,.25); }
.rt-row.l-green i { background: #0D2A16; }
.rt-row.l-green.on i { background: #34E06A; box-shadow: 0 0 36px #34E06A, inset 0 -6px 12px rgba(0,0,0,.2); }
.rt-lights.foul .rt-row.l-green i { background: #FF3B30; box-shadow: 0 0 36px #FF3B30; }
.rt-lights .hint { margin-top: 16px; }

.rt-run { justify-content: flex-start; }
.rt-controls { width: 100%; max-width: 480px; display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 8px; margin-top: 12px; margin-bottom: 8px; align-items: center; }
.op2-skip { color: var(--dust); font-size: 14px; padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.06); white-space: nowrap; min-height: 44px; min-width: 44px; }
.rt-controls .op2-skip { position: static; transform: none; }
.op2-speed { color: var(--dust); font-size: 14px; padding: 10px 18px; border-radius: 12px; background: var(--steel); white-space: nowrap; min-height: 44px; }
.rt-hud { width: 100%; max-width: 480px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.rt-hud > div { display: grid; justify-items: center; padding: 8px 4px; border-radius: 12px; background: var(--steel); }
.rt-hud small { font-size: 11px; color: var(--dust); } .rt-hud b { font: 24px/1.1 var(--display); } .rt-hud span { font-size: 11px; color: var(--dust); }
.rt-track { position: relative; width: calc(100% + 32px); max-width: 560px; margin: 12px -16px 0; height: 250px; overflow: hidden;
  background: linear-gradient(180deg, #2A2F35 0, #33383E 8%, #2B3036 50%, #33383E 92%, #2A2F35 100%); contain: strict; }
.rt-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 3px dashed rgba(236,232,223,.35); }
.rt-track::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 8px 0 #4B5560, inset 0 -8px 0 #4B5560; pointer-events: none; }
.rt-world { position: absolute; left: 0; top: 0; bottom: 0; will-change: transform;
  background: repeating-linear-gradient(90deg, transparent 0 88px, rgba(255,255,255,.05) 88px 90px); }
.rt-mark { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: rgba(236,232,223,.5); }
.rt-mark b { position: absolute; top: 12px; left: 8px; white-space: nowrap; font: 12px/1 var(--display); color: rgba(236,232,223,.7); }
.rt-mark.st { background: rgba(255,255,255,.8); }
.rt-mark.fin { width: 18px; margin-left: -9px; background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 18px 18px; }
.rt-mark.fin b { color: var(--hivis); }
.rt-lane { position: absolute; left: 0; right: 0; height: 50%; }
.rt-lane.top { top: 0; } .rt-lane.bot { bottom: 0; }
.rt-name { position: absolute; right: 10px; bottom: 8px; font-size: 11px; font-weight: 700; color: rgba(236,232,223,.6); }
.rt-runner { position: absolute; left: 0; top: 50%; width: 132px; margin-top: -30px; will-change: transform; }
.rt-runner svg, .rt-runner img { width: 100%; height: 60px; object-fit: contain; display: block; filter: drop-shadow(0 6px 4px rgba(0,0,0,.45)); }
.rt-runner .smoke { position: absolute; left: -10px; bottom: 2px; width: 70px; height: 34px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(220,224,228,.75), transparent); }
.rt-track.launch .smoke { animation: smoke 1.1s ease-out forwards; }
@keyframes smoke { 0% { opacity: .9; transform: translateX(0) scale(.6); } 100% { opacity: 0; transform: translateX(-90px) scale(2.2); } }
.rt-track.launch { animation: tshake .3s linear; }
@keyframes tshake { 25% { translate: 0 2px; } 50% { translate: 0 -2px; } 75% { translate: 0 1px; } }
.rt-speed { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .4s;
  background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(255,255,255,.07) 22px 23px); }
.rt-track.fast .rt-speed { opacity: 1; animation: slines .25s linear infinite; }
@keyframes slines { to { background-position: 0 23px; } }
.rt-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.rt-track.finished .rt-flash { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .55; } 100% { opacity: 0; } }
.rt-bars { width: 100%; max-width: 480px; display: grid; gap: 6px; margin-top: 10px; }
.rt-bars > div { position: relative; height: 22px; border-radius: 6px; background: var(--steel); overflow: hidden; }
.rt-bars span { position: absolute; z-index: 1; left: 8px; top: 3px; font-size: 11px; font-weight: 700; }
.rt-bars i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); }
.rt-bars .me i { background: color-mix(in srgb, var(--hivis) 55%, transparent); } .rt-bars .op i { background: color-mix(in srgb, var(--dust) 40%, transparent); }
.rt-res { max-width: 480px; }
.rt-verdict { display: grid; justify-items: center; margin-top: 12px; }
.rt-verdict b { font: 34px/1 var(--display); letter-spacing: .02em; } .rt-verdict span { color: var(--dust); font-size: 13px; margin-top: 4px; }
.rt-verdict.win b { color: var(--good); text-shadow: 0 0 24px rgba(111,208,140,.4); } .rt-verdict.lose b { color: var(--bad); }
.rt-splits { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 12px; }
.rt-splits th { font-weight: 500; color: var(--dust); font-size: 11px; padding: 4px 2px; text-align: right; }
.rt-splits td { padding: 6px 2px; text-align: right; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.rt-splits td:first-child { text-align: left; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* живой заезд: тахометр и ручное переключение */
.rt-live { justify-content: flex-start; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.rt-live .rt-track.rt-short { height: 150px; margin-top: 4px; }
.rt-mini-hud { width: 100%; max-width: 480px; display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--dust); }
.rt-mini-hud b { font: 16px/1 var(--display); color: var(--chalk); margin: 0 2px; } .rt-mini-hud i { font-style: normal; }
.rt-mini-hud b.plus { color: var(--good); } .rt-mini-hud b.minus { color: var(--bad); }
.rt-dash { width: 100%; max-width: 360px; display: grid; justify-items: center; gap: 6px; margin-top: 6px; }
.rt-leds { display: flex; gap: 8px; }
.rt-leds i { width: 22px; height: 22px; border-radius: 50%; background: #262B32; box-shadow: inset 0 -3px 5px rgba(0,0,0,.5); }
.rt-leds i.on.g { background: #34E06A; box-shadow: 0 0 10px #34E06A; }
.rt-leds i.on.a { background: #FFB21A; box-shadow: 0 0 10px #FFB21A; }
.rt-leds i.on.r { background: #FF3B30; box-shadow: 0 0 12px #FF3B30; }
.rt-live.go .rt-leds i { background: #5AB0FF; box-shadow: 0 0 12px #5AB0FF; animation: ledgo .14s steps(2) infinite; }
@keyframes ledgo { 50% { opacity: .25; } }
.rt-tach { position: relative; width: min(100%, 360px); aspect-ratio: 300 / 250; }
.rt-tach svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rt-tach path { fill: none; stroke-linecap: butt; }
.rt-tach .t-base { stroke: rgba(236,232,223,.16); } .rt-tach .t-green { stroke: #34E06A; } .rt-tach .t-red { stroke: #FF3B30; }
.rt-tach .tk { stroke: rgba(236,232,223,.55); stroke-width: 2; }
.rt-tach .tl { fill: var(--dust); font: 13px var(--display); text-anchor: middle; }
.rt-tach .needle { fill: var(--hivis); transform-origin: 150px 150px; will-change: transform; }
.rt-tach .needle circle { fill: #15181C; stroke: var(--hivis); stroke-width: 3; }
.rt-gear { position: absolute; left: 50%; top: 67%; transform: translateX(-50%); display: grid; justify-items: center; line-height: 1; }
.rt-gear small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dust); }
.rt-gear b { font: 54px/1 var(--display); color: var(--chalk); }
.rt-gear b.pop { animation: gpop .25s ease-out; }
@keyframes gpop { 0% { transform: scale(1.5); color: var(--hivis); } 100% { transform: scale(1); } }
.rt-kmh { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: baseline; gap: 4px; }
.rt-kmh b { font: 22px/1 var(--display); } .rt-kmh span { font-size: 11px; color: var(--dust); }
.rt-fb { position: absolute; left: 50%; top: 13%; transform: translate(-50%, 8px); opacity: 0; font: 30px/1 var(--display); white-space: nowrap; pointer-events: none; text-shadow: 0 2px 12px rgba(0,0,0,.7); transition: opacity .12s, transform .12s; }
.rt-fb.show { opacity: 1; transform: translate(-50%, 0); }
.fb-perfect { color: #34E06A; } .fb-good { color: var(--hivis); } .fb-early { color: #5AB0FF; } .fb-late { color: #FF5A4D; }
.tag.fb-perfect, .tag.fb-good, .tag.fb-early, .tag.fb-late { background: color-mix(in srgb, currentColor 16%, transparent); }
.rt-tip { margin: 4px 0 0; transition: opacity .3s; } .rt-tip.gone { opacity: 0; }
.rt-shift { width: 100%; max-width: 420px; height: 76px; margin-top: auto; margin-bottom: calc(10px + var(--safe-b, 0px)); flex: none; border-radius: 22px;
  background: var(--steel-2); color: var(--chalk); font: 26px/1 var(--display); letter-spacing: .04em; box-shadow: inset 0 0 0 2px rgba(236,232,223,.14); }
.rt-live.go .rt-shift { background: var(--hivis); color: var(--hivis-ink, #15181C); box-shadow: 0 0 28px rgba(245,197,24,.55); }
.rt-shift.hit { animation: shit .18s ease-out; } .rt-shift:disabled { opacity: .45; }
@keyframes shit { 0% { transform: scale(.95); } 100% { transform: scale(1); } }
.rt-live.lim .rt-tach { animation: limshake .07s linear infinite; }
@keyframes limshake { 50% { transform: translate3d(1px, 0, 0); } }
.rt-live.rt-after .rt-dash, .rt-live.rt-after .rt-shift, .rt-live.rt-after .rt-tip, .rt-live.rt-after .rt-mini-hud { display: none; }
@media (max-height: 700px) { .rt-live .rt-track.rt-short { height: 120px; } .rt-leds i { width: 18px; height: 18px; } .rt-shift { height: 64px; } }
@media (prefers-reduced-motion: reduce) { .rt-track.launch, .rt-track.fast .rt-speed, .rt-track.finished .rt-flash, .rt-track.launch .smoke { animation: none; } }
.upg-buy { display: grid; gap: 6px; justify-items: stretch; }
.btn.star-btn { background: #2A2416; color: var(--hivis); box-shadow: inset 0 0 0 1px rgba(245,197,24,.45); min-height: 40px; }
button.ycap { display: block; width: 100%; font-size: 13px; color: var(--dust); }
button.ycap b { color: var(--hivis); font-weight: 600; }
.btn.star-btn .star-ink { color: var(--hivis); }

/* инвентарь контейнеров */
.yown { position: absolute; z-index: 3; left: 50%; top: 14px; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--good); color: #10231a; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.own-dot { display: inline-block; min-width: 20px; padding: 3px 7px; border-radius: 999px; background: var(--good); color: #10231a; font: 700 12px/1 var(--display); text-align: center; }
.ycta.free { background: var(--good); color: #10231a; }
.gnotice { text-align: center; padding: 6px 0 10px; }
.gnotice .gn-crate .box3 { width: 150px; margin: 0 auto; }
.gnotice p { margin: 8px 0 0; }

/* ===== апгрейдер: список машин и кольцо шанса ===== */
.car-row { grid-template-columns: 96px minmax(0, 1fr) auto; }
.car-row > svg, .car-row > img, .upg-car > svg, .upg-car > img { width: 100%; height: 72px; object-fit: contain; display: block; min-width: 0; }
.car-row > div { min-width: 0; }
.car-row .nm { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.upg-car { grid-template-columns: 96px minmax(0, 1fr) auto; }
.upg-car > div { min-width: 0; }
@media (max-width: 360px) { .car-row { grid-template-columns: 80px minmax(0, 1fr) auto; } .car-row > svg, .car-row > img { height: 60px; } }
.cmp b.good { color: var(--good); } .cmp b.star { color: var(--hivis); }
.upg-wheel { position: relative; width: 210px; height: 210px; margin: 6px auto 4px; border-radius: 50%; }
.upg-wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.upg-wheel circle { fill: none; stroke-width: 18; }
.upg-wheel .uw-bad { stroke: var(--bad); opacity: .75; } .upg-wheel .uw-good { stroke: var(--good); }
.uw-dot { position: absolute; inset: 0; will-change: transform; }
.uw-dot i { position: absolute; left: 50%; top: 10%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--chalk);
  border: 3px solid var(--yard); box-shadow: 0 0 0 2px var(--chalk), 0 2px 8px rgba(0,0,0,.6); }
.uw-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.uw-mid b { font: 38px/1 var(--display); }
.uw-mid .uw-res { color: var(--dust); font-weight: 700; }
.upg-wheel.win { box-shadow: 0 0 28px 4px color-mix(in srgb, var(--good) 55%, transparent); } .upg-wheel.win .uw-res { color: var(--good); font-size: 15px; }
.upg-wheel.lose { box-shadow: 0 0 28px 4px color-mix(in srgb, var(--bad) 55%, transparent); } .upg-wheel.lose .uw-res { color: var(--bad); font-size: 15px; }

/* ---------- массовая продажа ---------- */
.bulk-open { height: 30px; font-size: 13px; color: var(--hivis); }
.sel-row .bulk-open { margin-left: auto; }
.sel-row .link + .bulk-open { margin-left: 8px; }
.bulk-list { display: grid; gap: 6px; margin-top: 12px; }
.bulk-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 10px; text-align: left;
  background: var(--steel-2); box-shadow: inset 3px 0 0 var(--rc, var(--hivis)); font-size: 14px; font-weight: 600; }
.bulk-row .t { flex: 1; min-width: 0; }
.bulk-row .s { flex: none; font-size: 13px; color: var(--chalk); text-align: right; }
.bulk-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rc); flex: none; }
.bulk-row.all { margin-top: 10px; box-shadow: inset 0 0 0 1.5px var(--bad); }
.bulk-note { margin-top: 10px; }
.bulk-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--steel-2); font: 20px/1 var(--display); }
.bulk-sum.heavy { background: color-mix(in srgb, var(--bad) 16%, var(--steel-2)); box-shadow: inset 0 0 0 1.5px var(--bad); }
.bulk-warn { margin-top: 10px; color: var(--bad); }
.btn.bulk-red { background: #D8392B; color: #fff; }
.bulkbar { flex-direction: column; background: var(--yard); }
.sel-row .link, .sel-row .bulk-open { white-space: nowrap; flex: none; }
.sel-row .small { min-width: 0; }
.bulkbar .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ccard[data-sel="1"] { box-shadow: 0 0 0 3px var(--hivis); }
.ccard[data-sel="1"]::after { content: ""; position: absolute; z-index: 3; right: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--hivis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5 7 11l5-6' fill='none' stroke='%23221D08' stroke-width='2'/%3E%3C/svg%3E") center/16px no-repeat; }

/* ---------- рекламный баннер под шапкой ---------- */
.adslot { padding: 8px 16px 0; }
.adslot[hidden] { display: none; }
.ad { position: relative; display: block; width: 100%; aspect-ratio: 6 / 1; min-height: 52px; overflow: hidden; border-radius: 12px;
  background: var(--steel); box-shadow: inset 0 0 0 1px var(--line); }
.ad img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }
.ad-tag { position: absolute; right: 6px; top: 4px; padding: 1px 5px; border-radius: 4px; font-size: 9px; line-height: 12px; letter-spacing: .04em;
  color: rgba(236,232,223,.8); background: rgba(20,24,28,.6); }
.adslot + .view { padding-top: 8px; }

/* ---------- шторка «Продать сразу несколько» ---------- */
.bulk-sub { margin: 4px 0 0; }
.bulk-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border-radius: 12px; text-align: left;
  background: var(--steel-2); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .12s; }
.bulk-opt .bt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bulk-opt .t { font-weight: 600; font-size: 15px; }
.bulk-opt .s { font-size: 13px; color: var(--dust); }
.bulk-opt .chk { flex: none; width: 24px; height: 24px; color: var(--good); }
.bulk-opt .chk svg { display: block; width: 24px; height: 24px; }
.bulk-opt.on { box-shadow: inset 0 0 0 1.5px var(--good); }
.bulk-opt:disabled { opacity: .4; cursor: default; }
.bulk-go.armed { background: transparent; color: var(--bad); box-shadow: inset 0 0 0 2px var(--bad); }
.bulk-go:disabled { filter: grayscale(1) brightness(.6); }
.sheet .acts .bulk-manual { justify-self: center; padding: 8px 12px; }

/* рулетка (легковые) */
.op2.s-roll .op2-skip { position: fixed; top: auto; bottom: calc(16px + var(--safe-b)); left: 50%; transform: translateX(-50%); }
.op2-roul { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 4; display: grid; gap: 6px; padding: 14px 0;
  background: linear-gradient(90deg, transparent, rgba(8,10,12,.82) 12%, rgba(8,10,12,.82) 88%, transparent); overflow: hidden; transition: opacity .25s; }
.op2-roul.out { opacity: 0; }
.rl-row { overflow: hidden; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.rl-strip { display: flex; gap: 6px; will-change: transform; }
.rcard { flex: 0 0 104px; height: 96px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px 8px;
  border-radius: 10px; background: #1C2127; border: 1px solid rgba(255,255,255,.08); overflow: hidden; transition: transform .35s cubic-bezier(.2,1.4,.4,1), box-shadow .35s; }
.rcard .rc-art { width: 100%; height: 52px; display: grid; place-items: center; }
.rcard .rc-art img, .rcard .rc-art svg { width: 100%; height: 52px; object-fit: contain; }
.rcard b { font-size: 11px; line-height: 1.1; text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard .rc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--rc); }
.rcard.win { transform: scale(1.14); z-index: 2; border-color: var(--rc); box-shadow: 0 0 22px var(--rc), inset 0 0 14px color-mix(in srgb, var(--rc) 35%, transparent); }
.op2-roul.multi .rcard { flex-basis: 84px; height: 56px; flex-direction: row; padding: 4px 6px 7px; gap: 4px; justify-content: flex-start; }
.op2-roul.multi .rcard .rc-art { width: 38px; height: 34px; flex: none; } .op2-roul.multi .rcard .rc-art img, .op2-roul.multi .rcard .rc-art svg { height: 34px; }
.op2-roul.multi .rcard b { font-size: 9px; white-space: normal; max-height: 22px; }
.op2-roul.multi .rl-row { padding: 2px 0; }
.rl-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #F0B429; box-shadow: 0 0 8px #F0B429; pointer-events: none; z-index: 3; }
.rl-mark { position: absolute; left: 50%; margin-left: -8px; border: 8px solid transparent; z-index: 3; pointer-events: none; }
.rl-mark.top { top: 0; border-top-color: #F0B429; } .rl-mark.bot { bottom: 0; border-bottom-color: #F0B429; }
.op2.skip .op2-roul, .op2.rm .op2-roul { transition-duration: .15s !important; }

/* ---------- гараж: витрина ---------- */
.gsub { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 10px; }
.gsub button { height: 36px; border-radius: 18px; font-weight: 700; font-size: 14px; color: var(--dust); background: var(--steel); transition: background .2s, color .2s; }
.gsub button.on { background: var(--chalk); color: var(--yard); }
.gshow { position: relative; margin: -2px -16px 0; height: calc(100dvh - var(--tab-h) - var(--safe-b) - 112px); min-height: 380px;
  container-type: size; overflow: hidden; background: #0d1119; isolation: isolate; }
.gstage { --sw: max(100cqw, calc(100cqh * .5581)); position: absolute; width: var(--sw); aspect-ratio: 768 / 1376; container-type: inline-size;
  left: calc((100cqw - var(--sw)) / 2); top: calc((100cqh - var(--sw) * 1.7917) * .3); }
.gbg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
.gneon { mix-blend-mode: screen; filter: brightness(1.6) saturate(1.7) contrast(1.15); opacity: 0; animation: gflick 7s linear infinite; }
.ggrade { position: absolute; inset: 0; pointer-events: none; }
.gshow[data-tod="night"] .gbg:not(.gneon) { filter: saturate(1.3) hue-rotate(-8deg) brightness(.92) contrast(1.06); }
.gshow[data-tod="night"] .ggrade { background: linear-gradient(180deg, rgba(10,24,90,.34), rgba(6,10,40,.5)); mix-blend-mode: multiply; }
.gshow[data-tod="night"] .gneon { --o: .34; }
.gshow[data-tod="morning"] .gbg:not(.gneon) { filter: saturate(.92) brightness(1.08); }
.gshow[data-tod="morning"] .ggrade { background: linear-gradient(180deg, rgba(255,226,180,.3), rgba(255,200,150,.14)); mix-blend-mode: soft-light; }
.gshow[data-tod="morning"] .gneon { --o: .08; }
.gshow[data-tod="day"] .gbg:not(.gneon) { filter: brightness(1.06) contrast(1.02); }
.gshow[data-tod="day"] .gneon { --o: .05; }
.gshow[data-tod="evening"] .gbg:not(.gneon) { filter: saturate(1.15) brightness(.96); }
.gshow[data-tod="evening"] .ggrade { background: linear-gradient(180deg, rgba(255,140,60,.34), rgba(150,60,210,.34)); mix-blend-mode: soft-light; }
.gshow[data-tod="evening"] .gneon { --o: .2; }
.gsweep { position: absolute; z-index: 5; left: -45%; top: 26%; width: 36%; height: 34%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.2) 50%, transparent); transform: translateX(0) skewX(-14deg); animation: gsweep 11s ease-in-out infinite 2s; }
.gcase { position: absolute; z-index: 2; display: block; overflow: hidden; border-radius: 3px; text-align: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 60%, transparent), inset 0 -12px 22px -10px color-mix(in srgb, var(--rc) 55%, transparent); }
.gcase.baked { background: linear-gradient(180deg, rgba(20,24,38,.97), rgba(10,12,22,.98)); }
.gcase.baked::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--rc) 38%, transparent), transparent 70%); }
.gcase::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.10), transparent 32%, transparent 70%, rgba(255,255,255,.06)); }
.gcase:active { filter: brightness(1.25); }
.gc-art { position: absolute; left: 4%; right: 4%; bottom: 17%; display: grid; align-items: end; z-index: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.gc-art svg, .gc-art img, .gpod svg, .gpod img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.gc-plate { position: absolute; z-index: 2; left: 50%; bottom: 3%; transform: translateX(-50%); max-width: 94%; padding: 1px 5px; border-radius: 3px;
  font-size: max(7px, 1.7cqw); line-height: 1.3; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(6,8,14,.72); color: var(--chalk); }
.gc-auto { position: absolute; z-index: 2; top: 4%; left: 5%; font-size: max(7px, 1.6cqw); letter-spacing: .06em; text-transform: uppercase; color: rgba(236,232,223,.55); }
.gc-void { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: max(8px, 2cqw); letter-spacing: .08em; text-transform: uppercase; color: rgba(236,232,223,.4); }
.gcase.empty { box-shadow: inset 0 0 0 1px rgba(236,232,223,.18); }
.gring { position: absolute; z-index: 1; pointer-events: none; }
.gring i { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 1; margin-top: -50%; transform: scaleY(.24); display: block; }
.gring b { position: absolute; inset: 0; border-radius: 50%; display: block; animation: gspin 9s linear infinite;
  background: conic-gradient(from 0deg, transparent 0 45%, color-mix(in srgb, var(--rc) 85%, #fff) 78%, transparent 92%);
  -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 88%, #000 98%, transparent 100%); mask: radial-gradient(closest-side, transparent 86%, #000 88%, #000 98%, transparent 100%); }
.gpod { position: absolute; z-index: 3; display: grid; align-items: end; filter: drop-shadow(0 6px 8px rgba(0,0,0,.55)) drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 55%, transparent)); }
.gpod:active { transform: scale(.98); }
.gcount { position: absolute; z-index: 6; top: 8px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 14px; font-size: 13px; white-space: nowrap;
  background: rgba(10,14,22,.72); color: var(--dust); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.gcount b { color: var(--chalk); font-weight: 700; }
.g-paused .gshow *, .g-paused .gshow *::before, .g-paused .gshow *::after { animation-play-state: paused !important; }
@keyframes gspin { to { transform: rotate(360deg); } }
@keyframes gsweep { 0% { opacity: 0; transform: translateX(0) skewX(-14deg); } 6% { opacity: 1; } 34% { opacity: 1; } 40%, 100% { opacity: 0; transform: translateX(420%) skewX(-14deg); } }
@keyframes gflick { 0%, 100% { opacity: var(--o, .1); } 41% { opacity: var(--o, .1); } 42% { opacity: calc(var(--o, .1) * 2.6); } 43% { opacity: calc(var(--o, .1) * .3); } 44.5% { opacity: calc(var(--o, .1) * 2); } 46% { opacity: var(--o, .1); } 78% { opacity: var(--o, .1); } 79% { opacity: calc(var(--o, .1) * 1.8); } 80% { opacity: var(--o, .1); } }
@media (prefers-reduced-motion: reduce) { .gneon, .gsweep, .gring b { animation: none; } .gneon { opacity: var(--o, .1); } .gsweep { display: none; } }
.gsearch { width: 100%; height: 42px; margin: 10px 0 8px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--steel-2); color: var(--chalk); font: inherit; }
.gpicklist { display: grid; gap: 6px; max-height: 52vh; overflow-y: auto; }
.gpick-row { display: grid; grid-template-columns: 68px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--steel-2); text-align: left; box-shadow: inset 3px 0 0 var(--rc); }
.gpick-row:active { filter: brightness(1.2); }
.gp-art svg, .gp-art img { display: block; width: 100%; height: auto; }
.gp-t { min-width: 0; display: grid; }
.gp-t b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-t small { color: var(--dust); font-size: 12px; }
.gp-v { font-size: 13px; color: var(--hivis); white-space: nowrap; }
.gslots { display: grid; gap: 6px; margin-top: 10px; }
.gslots .btn { justify-content: space-between; }
.gsheet-art { display: grid; place-items: center; padding: 6px 0 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 38%, transparent), transparent); }
.gsheet-art svg, .gsheet-art img { display: block; width: 80%; max-width: 300px; height: auto; }

/* ================= v6: портовый двор (главный экран) ================= */
#app { position: relative; }
#app[data-pt="night"] { --pt-s1: #050816; --pt-s2: #0F1A3E; --pt-s3: #22386C; --pt-glow: #3C5CAA; --pt-glowo: .4; --pt-stars: 1; --pt-moon: 1;
  --pt-tint: rgba(6,10,34,.54); --pt-haze: rgba(34,54,112,.55); --pt-far: #0B1127; --pt-rim: #8FB0FF; --pt-cone: .85; --pt-lamp: #E8F1FF; --pt-lampo: 1;
  --pt-g1: #1B2438; --pt-g2: #090C13; --pt-refl: .8; --pt-mast: #0A0F1E; --pt-win: #FFE9A8; --pt-crane-rim: #9DB8FF; --pt-crane-shade: .5; }
#app[data-pt="evening"] { --pt-s1: #231A4C; --pt-s2: #85407A; --pt-s3: #F5904D; --pt-glow: #FFB066; --pt-glowo: .85; --pt-stars: .12; --pt-moon: 0;
  --pt-tint: rgba(74,24,70,.26); --pt-haze: rgba(244,142,110,.45); --pt-far: #3A1E48; --pt-rim: #FFC27A; --pt-cone: .8; --pt-lamp: #FFE8B0; --pt-lampo: 1;
  --pt-g1: #3A3050; --pt-g2: #12101C; --pt-refl: .65; --pt-mast: #1A1226; --pt-win: #FFE08A; --pt-crane-rim: #FFC98A; --pt-crane-shade: .32; }
#app[data-pt="morning"] { --pt-s1: #5D6EB0; --pt-s2: #E78FA3; --pt-s3: #FFC48C; --pt-glow: #FFD9A6; --pt-glowo: .7; --pt-stars: 0; --pt-moon: 0;
  --pt-tint: rgba(255,170,140,.12); --pt-haze: rgba(255,196,176,.5); --pt-far: #6B5878; --pt-rim: #FFE2BC; --pt-cone: .22; --pt-lamp: #FFF1D0; --pt-lampo: .4;
  --pt-g1: #55506A; --pt-g2: #23222E; --pt-refl: .22; --pt-mast: #3A3248; --pt-win: #FFE9B0; --pt-crane-rim: #FFE6C4; --pt-crane-shade: .18; }
#app[data-pt="day"] { --pt-s1: #4C98E0; --pt-s2: #8CC4F0; --pt-s3: #D2EAF9; --pt-glow: #FFFFFF; --pt-glowo: .25; --pt-stars: 0; --pt-moon: 0;
  --pt-tint: rgba(255,255,255,0); --pt-haze: rgba(205,230,247,.6); --pt-far: #7C93A8; --pt-rim: #FFFFFF; --pt-cone: 0; --pt-lamp: #D8DEE4; --pt-lampo: .5;
  --pt-g1: #646C76; --pt-g2: #30363E; --pt-refl: 0; --pt-mast: #56606C; --pt-win: #BFE3F5; --pt-crane-rim: #FFFFFF; --pt-crane-shade: 0; }
#app:not([data-pt]) { --pt-s1: #1C2127; --pt-s2: #1C2127; --pt-s3: #1C2127; }

.py { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; --qy: 420px; background: var(--pt-g2, #1C2127); }
.py > *, .py-world > *, .py-ground > *, .py-cones > * { position: absolute; display: block; }
.py-sky { left: 0; right: 0; top: 0; height: calc(var(--qy) - 26px + 2px);
  background: linear-gradient(180deg, var(--pt-s1) 0, var(--pt-s2) 36%, var(--pt-s3) 70%); }
.py-stars { left: 0; top: 0; width: 1.4px; height: 1.4px; border-radius: 50%; opacity: var(--pt-stars); }
.py-moon { right: 18%; top: 17%; width: 26px; height: 26px; border-radius: 50%; opacity: var(--pt-moon);
  background: radial-gradient(circle at 36% 36%, #fff, #dfe8ff 60%, #b6c6ee); box-shadow: 0 0 22px 6px rgba(170,196,255,.4); }
.py-glow { left: -20%; right: -20%; top: calc(var(--qy) - 26px - 330px); height: 260px; opacity: var(--pt-glowo);
  background: radial-gradient(ellipse 55% 60% at 62% 85%, var(--pt-glow), transparent 70%); }
.py-world { left: 0; right: 0; height: 0; padding-bottom: 66.667%; bottom: calc(100% - var(--qy) + 26px); }
.py-world svg { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.py-far { fill: var(--pt-far); opacity: .9; }
.py-haze { fill: var(--pt-haze); }
.py-rim { stroke: var(--pt-rim); stroke-opacity: .5; }
.py-mast { fill: var(--pt-mast); }
.py-lamp { fill: var(--pt-lamp); opacity: var(--pt-lampo); }
.py-win { fill: var(--pt-win); }
.py-tint { inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--pt-tint) 55%, transparent), var(--pt-tint)); }
.py-cones { inset: 0; animation: pyflick 7s steps(1, end) infinite; }
.py-cone { top: 28%; width: 74%; height: 150%; margin-left: -37%; opacity: var(--pt-cone);
  clip-path: polygon(46.5% 0, 53.5% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255,236,190,.62), rgba(255,226,160,.22) 55%, rgba(255,220,150,0)); }
.py-ground { left: 0; right: 0; bottom: 0; top: calc(var(--qy) - 26px);
  background: linear-gradient(180deg, var(--pt-g1), var(--pt-g2) 70%); box-shadow: 0 -1px 0 var(--pt-rim) inset; }
.py-ground svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.py-curb { stroke: rgba(255,255,255,.14); stroke-width: 3; fill: none; }
.py-edge { stroke: #E3B21C; stroke-width: 2.2; stroke-opacity: .55; fill: none; }
.py-lane { stroke: #fff; stroke-opacity: .09; stroke-width: 3; fill: none; }
.py-lane.y { stroke: #E3B21C; stroke-opacity: .2; }
.py-refl { top: 6px; width: 150px; height: 120px; margin-left: -75px; opacity: var(--pt-refl); filter: blur(1px);
  background: radial-gradient(ellipse 28% 50% at 50% 30%, rgba(255,232,170,.5), transparent 75%); }
.py-fork { left: 0; top: calc(var(--qy) + 2px); width: 72px; height: 36px; transform: translateX(-120px); will-change: transform; }
.py-fork svg { display: block; width: 100%; height: 100%; }
.py-fork svg path[stroke] { stroke: #6C737D; }
.py.paused * { animation-play-state: paused; }
@keyframes pyflick { 0% { opacity: 1; } 31% { opacity: .9; } 33% { opacity: 1; } 71% { opacity: .94; } 74% { opacity: 1; } 88% { opacity: .88; } 90% { opacity: 1; } }

/* кран и подвешенный контейнер */
.pyzone { position: relative; width: 100%; padding-top: 28px; }
.pycrane { position: absolute; z-index: 0; left: -16px; right: -16px; top: 0; bottom: -34px; pointer-events: none; }
.pybeam { position: absolute; left: 0; right: 0; top: 0; height: 15px;
  background: repeating-linear-gradient(115deg, transparent 0 6px, rgba(0,0,0,.3) 6px 8px), linear-gradient(180deg, #EDB04A, #C6811D 55%, #7C4C12);
  box-shadow: 0 1px 0 var(--pt-crane-rim) inset, 0 8px 14px rgba(0,0,0,.4); }
.pybeam::after { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 3px; background: #2A2E36; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.pyleg { position: absolute; top: 0; bottom: 0; width: 15px;
  background: repeating-linear-gradient(62deg, transparent 0 9px, rgba(0,0,0,.32) 9px 11px), repeating-linear-gradient(-62deg, transparent 0 9px, rgba(0,0,0,.32) 9px 11px),
    linear-gradient(90deg, #E8A93E, #BA7A1B 60%, #7A4A12);
  box-shadow: 1px 0 0 var(--pt-crane-rim) inset, 0 0 14px rgba(0,0,0,.35); }
.pyleg.l { left: 2px; } .pyleg.r { right: 2px; }
.pyleg::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -2px; height: 7px; border-radius: 2px; background: linear-gradient(180deg, #4A4F58, #1D2026); }
.pybeacon { position: absolute; right: 4px; top: -7px; width: 9px; height: 9px; border-radius: 50%; background: #FF3B30;
  box-shadow: 0 0 10px 4px rgba(255,59,48,.65); animation: pyblink 1.9s ease-in-out infinite; }
@keyframes pyblink { 0%, 55%, 100% { opacity: .15; } 12%, 40% { opacity: 1; } }
.pyhang { position: relative; z-index: 1; width: 100%; display: grid; justify-items: center; transform-origin: 50% 0; will-change: transform; }
.pytrolley { display: block; width: 46px; height: 13px; margin-top: -9px; border-radius: 3px; position: relative; z-index: 1;
  background: linear-gradient(180deg, #5A606B, #2A2E36); box-shadow: 0 1px 0 var(--pt-crane-rim) inset, 0 4px 8px rgba(0,0,0,.45); }
.pyrope { display: block; width: min(52vw, 204px); height: 52px; transform-origin: 50% 0; transform: scaleY(.5); will-change: transform; overflow: visible; margin-top: -2px; }
.pyrope path { fill: none; stroke: #1B1E24; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.pyload { position: relative; transform-origin: 50% 100%; transform: translateY(-26px); will-change: transform; }
.pyload.landed { transform: none; }
.pyhang:has(.pyload.landed) .pyrope { transform: none; }
.pyspread { position: absolute; z-index: 2; left: 3%; right: 3%; top: -8px; height: 9px; border-radius: 3px;
  background: linear-gradient(180deg, #6C737D, #2A2E36); box-shadow: 0 1px 0 var(--pt-crane-rim) inset, 0 3px 6px rgba(0,0,0,.5); }
.pyspread::before, .pyspread::after { content: ""; position: absolute; top: 7px; width: 7px; height: 5px; background: #1F2227; border-radius: 0 0 2px 2px; }
.pyspread::before { left: 5px; } .pyspread::after { right: 5px; }
.pydust { position: absolute; left: 0; right: 0; bottom: -3px; height: 0; pointer-events: none; }
.pydust i { position: absolute; bottom: 0; width: 46px; height: 24px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(200,190,175,.7), rgba(200,190,175,0)); }
.pydust i:first-child { left: calc(50% - min(28.5vw, 113px) - 20px); } .pydust i:last-child { right: calc(50% - min(28.5vw, 113px) - 20px); }
.pyquay { display: block; height: 0; }
.ystage .box3 .b-shadow { bottom: -12px; height: 14px; }

/* подложка под текстом контейнера — читаемость на любой сцене */
.yplate { width: 100%; margin-top: 14px; padding: 10px 14px 11px; border-radius: 16px; text-align: center;
  background: rgba(10,13,20,.62); box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset, 0 8px 22px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ystage .yown { position: static; transform: none; display: inline-block; margin: 0 0 6px; padding: 3px 11px; font-size: 12px; box-shadow: none; }
.ystage.locked .yplate { opacity: .92; }
.yard .seg, .yard .ybanner, .yard .ychip { box-shadow: 0 6px 16px rgba(0,0,0,.28), inset 0 0 0 1px var(--line); }
button.ycap { align-self: center; width: auto; padding: 5px 14px; border-radius: 999px; background: rgba(10,13,20,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-height: 760px) { .yplate { margin-top: 10px; padding: 8px 12px 9px; } .yabout { display: none; } .pyzone { padding-top: 24px; } }
@media (prefers-reduced-motion: reduce) { .pybeacon { animation: none; opacity: 1; } .py-cones { animation: none; } }

/* v6.1: больше сцены — стекло вместо плотных панелей */
.yplate { margin-top: 46px; padding: 8px 12px 9px; background: rgba(10,13,20,.34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.yplate .yabout { display: none; }
.yplate .yname { font-size: 19px; margin-bottom: 0; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.yplate .ymeta { margin-top: 3px; color: #D3DAE2; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.yplate .yown { margin-bottom: 4px; }
.yard .seg { background: rgba(37,44,52,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.yard .seg button.on { background: rgba(255,255,255,.14); }
.ybanner, .ybanner.gold, .ybanner.star { background-color: rgba(37,44,52,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ybanner.gold { background-image: linear-gradient(90deg, rgba(245,197,24,.2), rgba(245,197,24,0) 70%); }
.ybanner.star { background-image: linear-gradient(90deg, rgba(240,180,41,.12), rgba(240,180,41,0) 70%); }
.yard .ychip { background: rgba(37,44,52,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.yard .ychip.x5.on { background: var(--good); }
.py-cone { opacity: calc(var(--pt-cone) * 1.15); }
@media (max-height: 760px) { .yplate { margin-top: 36px; } .pyzone { padding-top: 22px; } }
@media (max-height: 760px) { .ystage .box3 { width: min(50vw, 180px); } .yplate { margin-top: 30px; } .pyzone { padding-top: 20px; } .yard { gap: 8px; } .yard .ychip { height: 40px; } .yard .seg button { height: 34px; } .pyrope { width: min(46vw, 166px); } .pydust i:first-child { left: calc(50% - min(25vw, 90px) - 20px); } .pydust i:last-child { right: calc(50% - min(25vw, 90px) - 20px); } }