/* Страница короткого домена tvcode.ru — вид по концепции B (D-05; макет sto-k-odnomu/design-archive/2026-11-12/
   tvcode-landing/concept-b). ТВ и компьютер: кадр 1600×900, масштаб --scale (short.js); узкий экран (≤ 600 px) —
   колонка. Табло: текст не мельче 22 px в кадре, главное от 36 px; телефон — не мельче 14 px. Порог Chrome 79: без
   inset, gap во flex, :is/:where/:has, :focus-visible, aspect-ratio, dvh (tools/tv-compat.mjs). Автор: AlmazNurmukhametov */
/* Golos — переменный шрифт (400–900): без диапазона font-weight старый Chromium (80, браузер ТВ) брал его как 400 и
   рисовал жирное обычным; диапазоны знаков — как в web/fonts/fonts.css */
@font-face { font-family: Golos; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/golos-text-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Golos; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/golos-text-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Russo; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/russo-one-normal-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Russo; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/russo-one-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

* { box-sizing: border-box; }
html, body { margin: 0; background: #0b0b10; }
body { color: #f5f2ec; font: 24px/1.4 Golos, Arial, sans-serif; overflow: hidden; }
h1, h2, p { margin: 0; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus, a:focus, input:focus { outline: 4px solid #ffc84a; outline-offset: 5px; }
button::-moz-focus-inner { border: 0; }

.stage { position: absolute; width: 1600px; height: 900px; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--scale, 1));
  overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #26212f 0%, #0b0b10 65%); }
.header { position: absolute; left: 64px; right: 64px; top: 38px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; font-family: Russo, Arial, sans-serif; font-size: 30px; letter-spacing: -.5px; }
.brand img { width: 48px; height: 48px; margin-right: 14px; }
.domain { font-size: 24px; color: #c2bccb; letter-spacing: 1px; }

.main { position: absolute; top: 128px; left: 320px; width: 960px; text-align: center; }
h1 { font: 62px/1.1 Russo, Arial, sans-serif; letter-spacing: -1px; }
.intro { font-size: 28px; color: #c8c2ce; line-height: 1.45; margin-top: 20px; }
.entry { margin-top: 26px; }
.input-part { width: 460px; margin: 0 auto; }
.field-label { display: block; font-size: 24px; margin-bottom: 12px; }
.code { background: #17151d; border: 2px solid #655e6f; border-radius: 12px; height: 102px; font-size: 64px; letter-spacing: 15px;
  padding: 8px 28px 8px 43px; color: #f5f2ec; width: 100%; text-transform: uppercase; font-weight: 700; text-align: center; }
.code::placeholder { color: #9891a2; opacity: 1; }
.code[aria-invalid="true"] { border-color: #ff8a7a; }
.hint { font-size: 22px; color: #bbb4c6; margin-top: 12px; min-height: 31px; }
.hint.bad { color: #ff9d8f; }

.choices { display: flex; margin: 24px -12px 0; }
.choice { width: 50%; margin: 0 12px; min-height: 156px; border: 1px solid #696070; border-radius: 18px; padding: 22px 28px;
  background: #17151d; color: #f5f2ec; text-align: left; display: flex; align-items: center; }
.choice.is-main { background: #f5f2ec; color: #17151d; border-color: #f5f2ec; }
.choice svg { margin-right: 24px; flex: none; width: 60px; height: 60px; display: block; }
.choice small { display: block; font-size: 22px; margin-bottom: 8px; }
.choice strong { display: block; font-size: 36px; line-height: 1.2; }
.entry[aria-busy="true"] .choice { opacity: .7; cursor: progress; }

.how { position: absolute; left: 100px; right: 100px; top: 702px; }
.how h2 { display: none; }
.steps { display: flex; margin: 0; padding: 25px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .15); }
.steps li { display: flex; flex: 1; padding-right: 28px; }
.step-no { display: block; flex: none; width: 42px; height: 42px; border: 1px solid #655b6d; border-radius: 50%; text-align: center;
  line-height: 40px; color: #ffc84a; margin-right: 16px; font-size: 22px; }
.steps b { display: block; font-size: 24px; font-weight: 650; }
.steps p { font-size: 22px; color: #b8b2c0; margin-top: 5px; }
.phone-step { display: none; }

.footer { position: absolute; bottom: 30px; left: 64px; right: 64px; display: flex; justify-content: space-between; font-size: 22px; color: #c3bdcb; }
.footer a { text-decoration: underline; }

/* tv-compat: телефон */
@media (max-width: 600px) {
  body { font-size: 16px; overflow: auto; }
  .stage { position: relative; left: 0; top: 0; transform: none; width: 100%; height: auto; min-height: 100vh; overflow: hidden; padding: 0 24px 20px; }
  .header { position: relative; left: auto; right: auto; top: auto; height: 72px; }
  .brand { font-size: 20px; letter-spacing: -.3px; }
  .brand img { width: 30px; height: 30px; margin-right: 8px; }
  .domain { font-size: 14px; letter-spacing: 0; white-space: nowrap; flex: none; margin-left: 12px; }
  .main { position: relative; left: auto; top: auto; width: auto; padding-top: 14px; }
  h1 { font-size: 34px; line-height: 1.12; letter-spacing: -.4px; }
  .intro { font-size: 16px; line-height: 1.4; margin-top: 12px; }
  .entry { margin-top: 20px; }
  .input-part { width: 100%; }
  .field-label { font-size: 16px; margin-bottom: 9px; }
  .code { height: 76px; font-size: 44px; letter-spacing: 12px; border-radius: 10px; padding: 8px 20px 8px 32px; }
  .hint { font-size: 14px; margin-top: 12px; min-height: 20px; }
  .choices { margin: 20px -6px 0; }
  .choice { margin: 0 6px; min-height: 138px; width: 50%; padding: 14px 10px; display: block; text-align: center; border-radius: 14px; }
  .choice svg { width: 36px; height: 36px; margin: 0 auto 7px; }
  .choice small { font-size: 14px; margin-bottom: 6px; }
  .choice strong { font-size: 19px; line-height: 1.15; }
  .how { position: relative; left: auto; right: auto; top: auto; margin-top: 22px; }
  .how h2 { display: block; font-size: 17px; margin-bottom: 13px; }
  .steps { display: block; padding-top: 0; border: 0; }
  .steps li { padding: 0; margin-bottom: 10px; }
  .step-no { width: 29px; height: 29px; font-size: 14px; line-height: 27px; margin-right: 12px; }
  .steps b { font-size: 15px; }
  .steps p { display: none; }
  .tv-step { display: none; }
  .phone-step { display: inline; }
  .footer { position: relative; left: auto; right: auto; bottom: auto; font-size: 14px; display: block; margin-top: 18px; line-height: 1.6; }
  .footer a { display: inline-block; }
  .footer a + a { margin-top: 5px; }
  button:focus, a:focus, input:focus { outline-width: 3px; outline-offset: 3px; }
}
/* tv-compat: табло */