/* VirusTAP / Lab edition. Static surfaces, motion only in direct feedback. */
:root {
  --bg-void: #090c11;
  --bg-void-deep: #090c11;
  --surface-1: #11161d;
  --surface-2: #171e26;
  --surface-glass: #151c24;
  --hairline: #2a343e;
  --hairline-soft: #202933;
  --hairline-strong: #45505c;
  --brand-300: #e6ff9a;
  --brand-400: #d9ff57;
  --brand-500: #cbed63;
  --brand-600: #a8cc46;
  --ink-000: #f5f7f2;
  --ink-100: #e4e9e5;
  --ink-300: #b7c1c9;
  --ink-400: #9caab6;
  --ink-600: #81909c;
  --radius-lg: 24px;
  --font-display: "Russo One", system-ui, sans-serif;
  --font-body: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: var(--font-body);
}
html { background: var(--bg-void); }
body {
  margin: 0;
  background: radial-gradient(ellipse at 90% 0, #182623 0, transparent 42%), #090c11;
  color: var(--ink-000);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, a, input { -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font-family: var(--font-body); }
button, a { touch-action: manipulation; }
.screen {
  width: min(100%, 540px);
  padding: calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 100px);
  /* A retained transform from rise-in traps position:fixed descendants. */
  animation: none;
  transform: none;
}
.home-screen { display: flex; flex-direction: column; gap: 16px; }
.topline { min-height: 34px; padding: 0; justify-content: space-between; }
.topline .brand-lockup { position: static; transform: none; }
.brand-lockup { font-size: 19px; font-weight: 800; letter-spacing: -.9px; }
.brand-lockup span { color: var(--brand-400); }
.topline .mono { font-size: 10px !important; color: var(--ink-300) !important; border: 1px solid var(--hairline); padding: 6px 9px; border-radius: 20px; }
.balance-card {
  margin: 0;
  padding: 21px 22px 18px;
  border: 0;
  border-radius: 26px;
  background: linear-gradient(115deg, #e0ff83, #c5ed61);
  color: #172112;
  box-shadow: none;
}
.balance-card::before {
  inset: -50px -75px auto auto;
  width: 230px;
  height: 230px;
  border: 1px solid #2436111c;
  border-radius: 50%;
  background: none;
  box-shadow: 0 0 0 26px #24361107, 0 0 0 53px #24361105;
}
.balance-card::after { content: none; }
.balance-card .eyebrow { font-size: 10px; color: #3d522d; letter-spacing: 1.8px; }
.balance-row { position: relative; gap: 9px; margin-top: 8px; min-height: 49px; }
.balance-value { color: #15210d; font-size: clamp(26px, 7.5vw, 38px); line-height: 1.25; text-shadow: none; overflow-wrap: anywhere; min-width: 0; }
.balance-currency { color: #364e22; font-size: 13px; flex-shrink: 0; }
.balance-footer { color: #3e542d; font-size: 10px; gap: 7px; }
.balance-footer strong { color: #1c3010; font-size: 9px; letter-spacing: 1px; }
.stamina-trigger { position: relative; margin-top: 16px; padding: 12px 0 0; border-top: 1px solid #20361326; border-radius: 0; }
.stamina-head { color: #3d522d; font-size: 9px; letter-spacing: 1.2px; }
.stamina-head strong { color: #172a0d; font-size: 12px; }
.stamina-track { height: 5px; background: #243c1b24; box-shadow: none; }
.stamina-track > span { background: #253b1b; box-shadow: none; transition: none; }
.home-screen .action-stack { order: 4; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.wide-action { padding: 14px 12px; border-radius: 19px; min-height: 62px; }
.action-copy { gap: 9px; font-size: 12px; min-width: 0; }
.action-icon { width: 30px; height: 30px; min-width: 30px; background: #d9ff5714; color: var(--brand-400); box-shadow: none; border-radius: 10px; }
.action-arrow { width: 14px; color: var(--ink-400); }
.home-screen .tap-zone {
  order: 3;
  width: 100%; height: clamp(240px, 35svh, 320px); min-height: 240px;
  margin: 6px auto 12px;
  background: radial-gradient(ellipse, #c6ed5912, transparent 66%);
}
.tap-zone::before {
  inset: auto; top: 50%; left: 50%;
  width: min(80%, 285px); height: auto; aspect-ratio: 1;
  border: 1px solid #d9ff5725;
  box-shadow: 0 0 0 17px #d9ff5703, 0 0 0 18px #d9ff570b;
  transform: translate(-50%, -50%); animation: none;
}
.tap-zone::after {
  inset: auto; top: 50%; left: 50%;
  width: min(93%, 330px); height: auto; aspect-ratio: 1;
  border: 1px dashed #8faaa22b; box-shadow: none;
  transform: translate(-50%, -50%); animation: none;
}
.tap-button {
  width: min(78vw, 290px); height: 100%; max-height: 300px;
  background-image: url('/assets/virus-monster.webp') !important;
  filter: none; animation: none; will-change: auto;
  transition: transform 100ms ease-out;
  touch-action: none; user-select: none; -webkit-user-select: none;
  z-index: 1;
}
.tap-button:active { transform: scale(.95) !important; }
.tap-button.tap-pulse { animation: none !important; }
.tap-button.tap-pulse::after { content: none; }
.tap-progress { width: 92%; pointer-events: none; transition: none; }
.home-screen .tap-status {
  order: 5; position: static; min-height: 18px; margin: -7px 0 0;
  text-align: center; font-size: 11px; color: var(--brand-300);
}
.tap-zone .tap-label {
  display: block !important; position: absolute; top: auto; bottom: -17px; left: 50%;
  transform: translateX(-50%); white-space: nowrap; font-size: 0;
  pointer-events: none; background: none; border: none; padding: 0;
}
.tap-label::after { content: "ТАПАЙ · УДЕРЖИВАЙ 12 СЕК. ДЛЯ АВТО"; font: 600 9px var(--font-body); letter-spacing: .8px; color: #a3b0ba; }
.bottom-nav,
:root[data-low-power="true"] .bottom-nav,
:root[data-ios="true"] .bottom-nav {
  position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 12px);
  width: min(calc(100% - 32px), 500px); margin: 0 auto; padding: 6px;
  background: #171e26; border: 1px solid #33404b; border-radius: 22px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 8px 24px #0005;
}
.nav-button { min-height: 53px; color: #a6b3bc; font-size: 9px; border-radius: 16px; gap: 5px; }
.nav-button.active { background: #d9ff57; box-shadow: none; }
.nav-icon { width: 20px; height: 20px; }
.section-card, .case-card, .upgrade-card, .player-row, .voucher-card,
.history-row, .wide-action, .inventory-link, .section-link, .profile-card {
  background: #141b23; box-shadow: none; transition: transform 120ms ease, border-color 120ms ease;
}
.profile-card { padding: 23px 20px; border-radius: 24px; background: linear-gradient(125deg, #202d30, #141b23); }
.profile-card::after, .profile-card::before { content: none; }
.profile-card .avatar { box-shadow: none; border-radius: 18px; background: #d9ff57; color: #1d2b0e; }
.profile-actions { margin-top: 18px; }
.screen:has(> .profile-card) { display: flex; flex-direction: column; gap: 16px; }
.screen:has(> .profile-card) > .topline { order: 0; }
.screen:has(> .profile-card) > .profile-card { order: 1; margin: 0; }
.screen:has(> .profile-card) > .profile-actions { order: 2; margin: 0; }
.screen:has(> .profile-card) > .vt-feature-stack { order: 3; margin: 0; }
.profile-name { overflow-wrap: anywhere; }
.vt-feature-stack { gap: 14px; margin: 16px 0 0; }
.vt-feature-card { background: #141b23; border: 1px solid #2a343e; padding: 20px; border-radius: 22px; }
.vt-feature-card::after { content: none; }
.vt-feature-kicker { font-size: 9px; letter-spacing: 1.4px; color: #bdce79; }
.vt-feature-title { font-size: 19px; letter-spacing: -.5px; }
.vt-feature-description, .vt-empty, .vt-referral-list { color: #aab6bf; line-height: 1.6; }
.vt-stars-stat, .vt-referral-stat { background: #0d131a; border-color: #2b3540; border-radius: 15px; }
.vt-feature-button, .vt-case-buy, .primary-button, .upgrade-buy-button {
  min-height: 44px; border-radius: 13px; box-shadow: none; background: #d9ff57; color: #19230d;
  font-family: inherit; font-weight: 750; filter: none;
}
.vt-feature-button.secondary { background: #202a34; color: #e4eccb; border-color: #3b4853; }
.vt-stars-mode, .vt-referral-badge { background: #d9ff570d; border-color: #d9ff5733; color: #d9ff57; font-size: 10px; }
.vt-referral-head { gap: 12px; flex-wrap: wrap; }
.vt-referral-link { background: #0d131a; border: 1px solid #39454e; color: #bdcd93; }
.page-header { margin-bottom: 22px; }
.page-title { font-size: 30px; letter-spacing: -1.2px; }
.page-subtitle { color: #a8b5bf; }
.back-button { border-radius: 14px; background: #18212a; backdrop-filter: none; -webkit-backdrop-filter: none; min-width: 44px; min-height: 44px; }
.vt-case-wallet { background: #19232a; border: 1px solid #34434b; border-radius: 17px; margin-bottom: 17px; gap: 10px; flex-wrap: wrap; }
.case-grid { gap: 14px; }
.case-card { padding: 22px 18px; border-radius: 22px; overflow: hidden; }
.case-card.locked { opacity: 1; filter: none; }
.case-card:nth-child(2) { background: linear-gradient(125deg, #222b20, #141b23); }
.case-card:nth-child(3) { background: linear-gradient(125deg, #16322f, #141b23); }
.case-card h2 { font-size: 17px; }
.case-icon { box-shadow: none; border-radius: 17px; }
.case-meta { gap: 5px 10px; flex-wrap: wrap; font-size: 11px; color: #aebbac; }
.case-card .primary-button, .vt-case-buy { margin-top: 12px; }
.category-tabs { background: #131b23; padding: 5px; border: 1px solid #2b3640; border-radius: 17px; }
.category-tabs.vt-has-vrs .category-tab { font-size: 11px; min-height: 40px; padding: 0 6px; }
.category-tab.active { background: #d9ff57; color: #1d290e; box-shadow: none; }
.players { gap: 8px; }
.player-row { border-radius: 17px; min-height: 73px; content-visibility: auto; contain-intrinsic-size: auto 73px; }
.player-row:first-child { background: linear-gradient(110deg, #343d20, #172019); border-color: #697b39; }
.player-row:nth-child(2) { border-color: #586672; }
.player-row:nth-child(3) { border-color: #695548; }
.player-value { color: #bfceaf; font-variant-numeric: tabular-nums; }
.modal-backdrop, .vt-modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: #05090dde !important; }
.modal-card, .vt-modal { background: #151e27; border: 1px solid #374450; box-shadow: none; }
/* The bundle centers the × glyph with `display:grid; place-items:center`
   alone, which leaves the glyph's own line-height in the mix — some WebViews
   (reported: real devices, not reproducible in a desktop/emulated browser)
   render the "×" low in its line box, so the grid centers a taller-than-glyph
   line instead of the glyph itself. Flex + line-height:1 removes that degree
   of freedom instead of relying on font metrics to center on their own. */
.modal-close, .vt-modal-close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Flex centers the "×" glyph's line box, not its visual ink — the
   multiplication sign sits with more empty space below the mark than above
   in most fonts, so a perfectly centered line box still reads as the glyph
   sitting low. Hiding the original text node and drawing the glyph via
   ::before instead lets it be nudged on its own, independent of the
   button's own (still correctly centered) box. */
.modal-close, .vt-modal-close {
  font-size: 0;
}
.modal-close::before, .vt-modal-close::before {
  content: "×";
  transform: translateY(-1.5px);
}
.modal-close::before {
  font-size: 16px; /* matches the bundle's own .modal-close (index-2O8B_aPP.css) */
}
.vt-modal-close::before {
  font-size: 19px; /* matches .vt-modal-close above */
}
.form-input { font-size: 16px; }
.vt-tap-feedback { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; contain: layout; }
.vt-tap-feedback .vt-tap-number { position: absolute; opacity: 0; font: 400 28px var(--font-display); color: #e2ff93; text-shadow: 0 2px 5px #000a; }
.vt-tap-feedback .vt-shockwave { position: absolute; opacity: 0; width: 28px; height: 28px; border: 1px solid #d9ff57; border-radius: 50%; }
[data-backgrounded] *, [data-backgrounded] *::before, [data-backgrounded] *::after { animation-play-state: paused !important; }

/* Angular display lettering + a readable Cyrillic interface. Russo One has
   one designed weight: use it directly instead of synthesized bold glyphs. */
.brand-lockup, .page-title, .balance-value, .profile-name,
.vt-feature-title, .case-card h2, .modal-card h2, .vt-modal h2,
.case-opening-heading, .case-opening-result h3, .vt-wallet-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -.02em;
}
.brand-lockup { font-size: 23px; letter-spacing: -.035em; }
.balance-value { font-size: clamp(32px, 9.5vw, 45px); line-height: 1.15; }
.balance-currency { font-family: var(--font-display); font-weight: 400; letter-spacing: .035em; }
.action-copy { font-size: 13px; font-weight: 700; }
.nav-button { font-family: var(--font-body); font-weight: 750; font-size: 10px; letter-spacing: .08em; }
.topline .mono, .mono, .stamina-head strong, .upgrade-level,
.player-place, .player-value, .history-amount, .profile-id {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums lining-nums;
}
.balance-value, .vt-wallet-value, .vt-referral-stat strong {
  font-variant-numeric: tabular-nums lining-nums;
}
.vt-feature-description, .modal-description { font-weight: 450; }
@media (max-width: 359px) {
  .screen { padding-inline: 14px; }
  .balance-card { padding: 18px; }
  .action-copy { font-size: 11px; gap: 6px; }
  .wide-action { padding: 12px 9px; }
  .vt-feature-card { padding: 16px; }
}
@media (max-height: 700px) {
  .home-screen { gap: 10px; padding-top: calc(env(safe-area-inset-top) + 10px); }
  .home-screen .balance-card { padding: 15px 19px; }
  .home-screen .tap-zone { height: 225px; min-height: 225px; margin-top: 0; }
  .home-screen .tap-button { width: 245px; }
  .home-screen .balance-row { min-height: 39px; }
  .home-screen .balance-value { font-size: 28px; }
  .home-screen .stamina-trigger { margin-top: 10px; padding-top: 9px; }
}
@media (max-height: 620px) {
  .home-screen .balance-footer { display: none; }
  .home-screen .tap-zone { height: 190px; min-height: 190px; }
  .home-screen .tap-zone::before { width: 205px; }
  .home-screen .tap-zone::after { width: 235px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Promo window status line (vrs-transfer.js replaces the bundle's check). */
.vt-promo-status {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: #ff8a7a;
}
.vt-promo-status[data-kind="success"] { color: #d9ff57; }
.vt-promo-status[data-kind="pending"] { color: #93a68a; }