/* Гонка Картежников: ночная трасса, чёрный металл и золото, клетчатый флаг. Подключается поверх /site.css. */
:root {
  --night: #09090b;
  --mud: #121216;
  --mud-2: #1a1a20;
  --line: #2e2d35;
  --sand: #f3ecdc;
  --dust: #a5a091;
  --signal: #f2b936;
  --flare: #ffd772;
  --army: #9db6dd;
  --gold: #f7c84a;
  --ink: #09090b;
  --text-2: #d8d2c3;
  --gold-metal: linear-gradient(180deg, #fff3c9 0%, #f7c84a 42%, #a8730f 56%, #ffd97a 100%);
  --chrome: linear-gradient(180deg, #ffffff 0%, #cfd4db 44%, #6b727d 56%, #eef0f3 100%);
  --checker: repeating-conic-gradient(#f3ecdc 0 25%, #09090b 0 50%);
  --f-display: 'Russo One', 'Arial Black', Impact, sans-serif;
}

/* ---------- шапка ---------- */
.hero {
  background:
    radial-gradient(60% 60% at 76% 42%, rgb(247 200 74 / 0.2), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgb(157 182 221 / 0.1), transparent 70%),
    linear-gradient(180deg, #0f0f12, var(--night));
}
/* полосы скорости */
.speed {
  position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none; opacity: 0.5;
  background:
    repeating-linear-gradient(-12deg, transparent 0 46px, rgb(247 200 74 / 0.07) 46px 47px, transparent 47px 120px),
    repeating-linear-gradient(-12deg, transparent 0 90px, rgb(243 236 220 / 0.05) 90px 91px, transparent 91px 210px);
  background-size: 600px 100%;
  animation: rush 2.4s linear infinite;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
@keyframes rush { to { background-position: -600px 0, -600px 0; } }

.hero-copy { container-type: inline-size; }
.brand-row svg { width: 40px; height: 28px; }
h1 {
  font-size: clamp(36px, 11.8cqi, 104px); line-height: 0.92; letter-spacing: 0.01em;
  transform: skewX(-8deg); transform-origin: left bottom;
}
h1 span:first-child { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 .hot {
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 28px rgb(247 200 74 / 0.35));
}
.lead, .about-copy p.text, .cert-body p, .rule p { color: var(--text-2); }
.cell { background: linear-gradient(180deg, #1e1e24, #131317); }
.btn { background: var(--gold-metal); }
.btn:hover { background: var(--flare); }
.btn.ghost { background: rgb(243 236 220 / 0.08); box-shadow: inset 0 0 0 1px rgb(243 236 220 / 0.25); }
.btn.ghost:hover { background: rgb(243 236 220 / 0.16); }

/* сцена: трасса и банковские карты */
.stage { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; justify-self: end; perspective: 1200px; }
.ph-track { inset: 0 0 16% 12%; clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
.ph-track img { animation: drift 18s ease-in-out infinite alternate; }
.ph-track::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--night), transparent 45%), linear-gradient(90deg, rgb(9 9 11 / 0.55), transparent 50%);
}
.bank {
  position: absolute; width: 58%; aspect-ratio: 1.586; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 6% 7%;
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.25);
  animation: hover-card 7s ease-in-out infinite;
}
.bank::after { /* блик */
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / 0.32) 50%, transparent 58%);
  transform: translateX(-60%); animation: shine 5.5s ease-in-out infinite;
}
.bank-1 {
  --r: -9deg; left: 0; bottom: 4%; z-index: 3; color: #f3ecdc;
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(247 200 74 / 0.22), transparent 60%),
    repeating-linear-gradient(115deg, rgb(255 255 255 / 0.025) 0 2px, transparent 2px 6px),
    linear-gradient(135deg, #2b2b31, #0c0c0f 55%, #1d1d23);
  border: 1px solid rgb(247 200 74 / 0.45);
}
.bank-2 {
  --r: 7deg; right: 2%; top: 26%; z-index: 2; width: 50%; color: #3a2a06;
  background: repeating-linear-gradient(115deg, rgb(255 255 255 / 0.06) 0 2px, transparent 2px 6px), linear-gradient(135deg, #ffe7a0, #e0a92e 45%, #9c6c0c 70%, #f3c95a);
  animation-delay: -2.3s;
}
.bank-3 {
  --r: -4deg; right: 22%; top: 4%; z-index: 1; width: 44%; color: #2e3238; opacity: 0.92;
  background: repeating-linear-gradient(115deg, rgb(255 255 255 / 0.08) 0 2px, transparent 2px 6px), linear-gradient(135deg, #f4f6f8, #aab2bc 50%, #6f7782 75%, #dfe3e8);
  animation-delay: -4.6s;
}
.bank-2::after { animation-delay: 1.6s; }
.bank-3::after { animation-delay: 3.2s; }
@keyframes hover-card {
  0%, 100% { transform: rotate(var(--r)) translateY(0) rotateX(6deg); }
  50% { transform: rotate(calc(var(--r) + 2deg)) translateY(-10px) rotateX(0deg); }
}
@keyframes shine { 0%, 55% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }
.b-chip {
  position: absolute; left: 7%; top: 22%; width: 15%; aspect-ratio: 1.3; border-radius: 5px;
  background:
    linear-gradient(90deg, transparent 32%, rgb(0 0 0 / 0.25) 32% 36%, transparent 36% 64%, rgb(0 0 0 / 0.25) 64% 68%, transparent 68%),
    linear-gradient(0deg, transparent 30%, rgb(0 0 0 / 0.25) 30% 36%, transparent 36% 64%, rgb(0 0 0 / 0.25) 64% 70%, transparent 70%),
    linear-gradient(135deg, #fff1bd, #d9a52c 50%, #f5d27a);
}
.b-nfc { position: absolute; left: 26%; top: 23%; width: 9%; color: rgb(243 236 220 / 0.75); }
.b-num { font: 500 clamp(12px, 2.3vw, 19px)/1 var(--f-head); letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.b-name { font: 400 clamp(10px, 1.6vw, 14px)/1 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.b-date { position: absolute; right: 7%; bottom: 8%; font: 500 clamp(10px, 1.4vw, 13px)/1 var(--f-head); letter-spacing: 0.1em; color: var(--dust); }
.stage .stamp { top: 2%; left: 0; right: auto; z-index: 4; border-color: var(--gold); color: var(--gold); }

/* клетчатая лента */
.tape { background: var(--checker) 0 0 / 22px 22px; border-block: 3px solid var(--night); transform: rotate(-1.2deg); }
.tape-track span { background: var(--gold-metal); color: var(--ink); }

/* ---------- таблица и вкладки ---------- */
.medal::before { background: linear-gradient(90deg, var(--gold) 0 50%, #8a5f0c 50%); }
.empty-state { background: radial-gradient(70% 90% at 50% 0%, rgb(247 200 74 / 0.13), transparent 70%), var(--mud); }
.empty-big { font-size: clamp(30px, 5vw, 48px); }
.pod-base { font-size: 64px; }
.pod-1 .pod-base { font-size: 92px; }
.pcard-big { font-size: 130px; }
.about-ph::after { background: linear-gradient(0deg, rgb(247 200 74 / 0.22), transparent 55%); }
.about-ph img { filter: none; }
.track-bar i { background: var(--checker) 0 0 / 10px 10px; }
.track-bar { border-color: var(--gold); }
.rule { border-left-color: var(--gold); }
.zone-top10 { --z: var(--gold); }

@media (max-width: 900px) {
  .stage { justify-self: center; max-width: 440px; order: -1; aspect-ratio: 5 / 4; }
  .ph-track { inset: 0 0 10% 18%; }
  .bank-1 { width: 52%; bottom: 0; }
  .bank-2 { width: 44%; top: 30%; }
  .bank-3 { width: 38%; }
  .stage .stamp { top: auto; bottom: 34%; left: auto; right: 0; }
}
@media (max-width: 640px) {
  .bank { border-radius: 10px; }
}