@font-face { font-family: "Golos Text"; src: url(fonts/golos-text-cyrillic-wght-normal.woff2) format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Golos Text"; src: url(fonts/golos-text-latin-wght-normal.woff2) format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF,U+2000-206F; }
@font-face { font-family: Oswald; src: url(fonts/oswald-cyrillic-wght-normal.woff2) format("woff2"); font-weight: 200 700; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Oswald; src: url(fonts/oswald-latin-wght-normal.woff2) format("woff2"); font-weight: 200 700; font-display: swap; unicode-range: U+0000-00FF,U+2000-206F; }

:root {
  --deep: #0A86EE; --navy: #0B2A6F; --yellow: #FFE11A; --white: #fff; --berry: #E6127F;
  --mute: #4A5F86; --line: #B9CCDF; --out: cubic-bezier(.16,1,.3,1);
  --gut: max(16px, env(safe-area-inset-left));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--deep); color: var(--navy);
  font: 400 17px/1.35 "Golos Text", system-ui, sans-serif; overscroll-behavior: none; }
[hidden] { display: none !important; }
button, input, a { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }

.brand { position: fixed; z-index: 3; top: max(14px, env(safe-area-inset-top)); left: var(--gut); display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--white); font: 600 18px/1.1 Oswald, system-ui, sans-serif; letter-spacing: .01em; text-shadow: 0 1px 0 var(--navy), 0 0 6px rgba(11,42,111,.55); min-height: 44px; }
.brand img { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--yellow); display: block; object-fit: cover; }
.sound { position: fixed; z-index: 3; top: max(18px, env(safe-area-inset-top)); right: var(--gut); width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; }
.sound .fillp { fill: currentColor; stroke: none; }
.sound .off { display: none; }
.sound[aria-pressed="false"] .wave { display: none; }
.sound[aria-pressed="false"] .off { display: block; }
.sound:focus-visible, .hud button:focus-visible { outline-color: var(--yellow); }

.hero { position: fixed; z-index: 2; left: 0; right: 0; top: max(72px, calc(env(safe-area-inset-top) + 66px)); text-align: center; pointer-events: none; padding: 0 var(--gut); }
.title br { display: none; }
.title { margin: 0; white-space: nowrap; font: 700 clamp(34px, 11.2vw, 104px)/1.05 Oswald, system-ui, sans-serif; color: var(--white);
  -webkit-text-stroke: .13em var(--navy); paint-order: stroke fill; letter-spacing: .005em; }
.plate { display: inline-flex; gap: .32em; margin: 8px 0 0; padding: 6px 22px 7px; background: var(--yellow); color: var(--navy); font: 700 clamp(22px, 6vw, 38px)/1.1 Oswald, system-ui, sans-serif; letter-spacing: .02em;
  clip-path: polygon(2% 12%, 7% 3%, 24% 7%, 44% 1%, 67% 6%, 88% 1%, 98% 8%, 96% 28%, 100% 52%, 97% 76%, 99% 94%, 82% 97%, 60% 93%, 38% 99%, 15% 94%, 3% 98%, 4% 72%, 0 46%, 3% 28%); }
.slot { position: relative; display: inline-block; overflow: hidden; height: 1.15em; text-align: left; }
.slot b { display: block; font-weight: 700; white-space: nowrap; }

/* Талон: форма и карточка - одна и та же вещь */
.talon { position: fixed; z-index: 4; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); width: min(calc(100vw - 32px), 460px); margin-left: calc(min(calc(100vw - 32px), 460px) / -2);
  background: var(--white); border-radius: 16px; box-shadow: 0 24px 70px rgba(11,42,111,.32); will-change: transform; }
.talon::before, .talon::after { content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--deep); left: 72%; }
.talon::after { top: auto; bottom: -9px; }
.talon-main { position: relative; padding: 18px 18px 16px; }
.talon label { display: block; font-weight: 600; margin-bottom: 8px; }
.row { display: flex; gap: 10px; align-items: center; }
input { flex: 1; min-width: 0; height: 54px; padding: 0 14px; font-weight: 500; font-size: 19px; color: var(--navy); background: #EEF5FB; border: 2px solid transparent; border-radius: 10px; }
input::placeholder { color: var(--mute); }
input:focus { outline: 0; border-color: var(--navy); background: var(--white); }
input[aria-invalid="true"] { border-color: var(--berry); }
.go { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 22px; background: var(--yellow); color: var(--navy); border-radius: 10px; font-weight: 700; font-size: 18px; text-decoration: none; text-align: center; transition: transform .16s var(--out), background .16s; }
.go:hover { background: #FFEA5C; } .go:active { transform: scale(.97); }
.go:disabled { opacity: .5; cursor: default; }
.sec { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 14px; background: #EEF5FB; color: var(--navy); border-radius: 10px; font-weight: 600; font-size: 16px; text-decoration: none; text-align: center; transition: background .16s; }
.sec:hover { background: #DCEAF6; }
.wide { display: flex; width: 100%; }
.err { margin: 8px 0 0; color: #B80D66; font-size: 16px; font-weight: 500; }
.sub { justify-content: space-between; margin-top: 10px; }
.count { font-size: 16px; color: var(--mute); } .count b { color: var(--navy); font-variant-numeric: tabular-nums; }
.link { min-height: 44px; font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--mute); border-radius: 50%; }
.x:hover { color: var(--navy); background: #EEF5FB; }
.who { margin: 0 44px 8px 0; font-weight: 700; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.note { margin: 0 0 10px; font-weight: 500; color: #B80D66; }
.fields { display: grid; grid-template-columns: 1fr 1fr 66px; gap: 10px; margin: 0 0 14px; }
.fields .near { grid-column: 1 / -1; }
.fields dt { font-size: 16px; color: var(--mute); } .fields dd { margin: 0; font-weight: 600; font-size: 17px; line-height: 1.2; }
.seat { border-left: 2px dashed var(--line); padding-left: 10px; } .seat dd { font: 700 32px/1 Oswald, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; } .acts > * { flex: 1 1 auto; }
.hint { margin: 0 0 10px; color: var(--mute); font-size: 16px; }
.hint.light { color: var(--white); text-align: center; margin: 10px 0; }

.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.tabs button { min-height: 46px; padding: 2px; border-radius: 10px; background: #EEF5FB; font-size: 16px; font-weight: 600; line-height: 1.15; transition: background .16s, color .16s; }
.tabs button:disabled { opacity: .45; cursor: default; }
.tabs button small { display: block; font-size: 16px; font-weight: 500; color: var(--mute); font-variant-numeric: tabular-nums; }
.tabs button[aria-selected="true"] { background: var(--navy); color: var(--white); } .tabs button[aria-selected="true"] small { color: #C8DAF2; }
.lens { display: flex; gap: 8px; margin: 0 -18px 8px; padding: 4px 18px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; }
.lens::-webkit-scrollbar { display: none; }
.lens button { flex: 0 0 88px; padding: 6px 4px 8px; border-radius: 10px; background: #EEF5FB; border: 2px solid transparent; font-size: 16px; font-weight: 600; line-height: 1.15; transition: border-color .16s, transform .2s var(--out); }
.lens button canvas { display: block; width: 100%; height: 50px; object-fit: contain; }
.lens button[aria-pressed="true"] { border-color: var(--navy); background: var(--white); transform: translateY(-3px); }
.colors { display: flex; justify-content: space-between; gap: 2px; margin-bottom: 8px; }
.colors button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 2px solid transparent; }
.colors button[aria-pressed="true"] { border-color: var(--navy); }
.colors i { display: block; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); }
.near-line { min-height: 22px; font-weight: 500; }
/* Над панелью всегда остаётся кусок карты с домом; vh - для браузеров без dvh */
.claim .talon-main, .card .talon-main { max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); overflow-y: auto; overscroll-behavior: contain; }
.steps { margin: 0 0 10px; padding-left: 22px; font-weight: 500; } .steps li { margin-bottom: 4px; }
.request { margin: 0 0 8px; padding: 10px 12px; background: #FFF9C4; border-radius: 8px; font-weight: 600; user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
#bClaim, #bOpenIg { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -10px 14px 2px var(--white); } /* главная кнопка всегда видна, остальное прокручивается над ней */
#step2 { display: flex; flex-direction: column; gap: 10px; }
#step2 > * { margin-top: 0; margin-bottom: 0; }

.hud { position: fixed; z-index: 3; right: var(--gut); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.pill { min-height: 48px; padding: 0 18px; border-radius: 24px; background: var(--yellow); color: var(--navy); font-weight: 700; }
.tools { display: flex; flex-direction: column; gap: 8px; }
.tools button { width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; }

.story { position: fixed; z-index: 6; inset: 0; background: rgba(8,28,80,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.story img { max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); max-width: 100%; border-radius: 10px; display: block; }
.story .acts { width: min(100%, 420px); }

/* Низкий экран: браузер Instagram съедает верх и низ, карте нужно больше места */
@media (max-width: 859px) and (max-height: 720px) {
  .talon-main { padding: 14px 16px 12px; }
  .go { min-height: 48px; }
  .sec { min-height: 44px; }
  #step2 { gap: 8px; }
  #step2 .acts { gap: 8px; }
  .steps li { margin-bottom: 2px; }
  .request { padding: 8px 12px; }
  .lens { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

@media (min-width: 860px) {
  .talon { left: 40px; margin-left: 0; bottom: 36px; width: 440px; }
  .hero { left: 40px; right: auto; width: 440px; text-align: left; padding: 0; top: 104px; }
  .title { font-size: 100px; } .title br { display: inline; }
  .brand { left: 40px; top: 24px; } .sound { right: 32px; top: 28px; }
  .hud { right: 32px; bottom: 36px; }
}
/* Телефон лёжа: заголовок не наезжает на форму */
@media (max-width: 859px) and (max-height: 500px) {
  .hero { top: 10px; } .title { font-size: 40px; } .plate { font-size: 20px; margin-top: 2px; padding: 3px 18px 4px; }
}
@media (min-width: 860px) and (max-height: 640px) {
  .hero { top: 76px; } .title { font-size: 56px; } .title br { display: none; } .plate { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }