/* ============================================================
   Телевизор — нарисован целиком, без растровых картинок.

   Что делает его похожим на настоящий (по физике реального CRT):
   1. Пластик       — текстура генерируется feTurbulence +
                      feDiffuseLighting, а не имитируется градиентом.
                      Отсюда «апельсиновая корка» литого ABS.
   2. Апертурная    — кинескоп даёт непрерывные вертикальные RGB-полосы;
      решётка         именно они, а не строчки, читаются как «трубка».
   3. Стекло        — тонировано: настоящее стекло CRT пропускает ~50%,
                      поэтому чёрный выглядит чёрным, а не серым.
   4. Halation      — свечение люминофора выходит за край экрана и
                      подсвечивает рамку. Без него экран «наклеен».
   5. Геометрия     — завал яркости к углам (кривизна колбы) и лёгкое
                      расхождение лучей по краям.

   Пропорции корпуса (в долях ширины):
     стенки 5.5 · верх 5 · трубка 89×66.75 (4:3) · зазор 1.5
     подбородок 12 · низ 3.5  →  высота 88.75  →  aspect 100/88.75
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --room:   #08080a;
  --room-2: #131318;
  --glow:   rgba(236, 168, 56, .10);

  /* состаренный ABS */
  --case:      #b3ab97;
  --case-hi:   #ddd6c2;
  --case-lo:   #8d8676;
  --case-deep: #4f4a41;
  --case-warm: #c6bda6;

  --ink:    #6f6c60;
  --ink-hi: #cfcbb6;
  --font:   'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body { height: 100%; }

body {
  background:
    radial-gradient(ellipse 55% 40% at 50% 44%, var(--glow) 0%, transparent 64%),
    radial-gradient(ellipse 96% 84% at 50% 50%, var(--room-2) 0%, var(--room) 78%);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.room {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: clamp(.6rem, 2.2vw, 2rem);
  min-height: 0;
}

.tv {
  position: relative;
  width: min(100%, 1020px, calc((100dvh - 6rem) * 100 / 88.75));
}

/* ── корпус ───────────────────────────────────────────── */
.tv__shell {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 88.75;
  display: grid;
  grid-template-columns: 5.5% 1fr 5.5%;
  grid-template-rows: 5.634% 75.211% 1.690% 13.521% 3.944%;

  border-radius: 3.4% / 3.8%;
  background:
    /* тёплое пятно света сверху-слева + общий объём */
    radial-gradient(ellipse 65% 45% at 22% 8%, var(--case-hi) 0%, transparent 62%),
    radial-gradient(ellipse 80% 60% at 80% 100%, var(--case-deep) 0%, transparent 58%),
    linear-gradient(163deg, var(--case-warm) 0%, var(--case) 38%, var(--case-lo) 100%);
  box-shadow:
    inset 0 .14rem .32rem rgba(255, 255, 255, .55),
    inset .1rem 0 .3rem rgba(255, 255, 255, .22),
    inset -.12rem -.3rem .6rem rgba(0, 0, 0, .4),
    0 2rem 3.6rem rgba(0, 0, 0, .78),
    0 .4rem 1rem rgba(0, 0, 0, .55);
}

/* текстура литого пластика — SVG-фильтр поверх корпуса */
.tv__tex {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  opacity: .34;
  mix-blend-mode: soft-light;
  z-index: 1;
}
.tv__tex svg { width: 100%; height: 100%; display: block; }

/* линия разъёма половин корпуса */
.tv__seam {
  position: absolute;
  left: 0; right: 0;
  top: 62%;
  height: 2px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, rgba(255,255,255,.28) 1px 2px);
  opacity: .5;
}

/* вентиляция по бокам */
.tv__vent-side {
  grid-row: 2;
  align-self: center;
  height: 46%;
  margin: 0 22%;
  border-radius: 999px;
  z-index: 2;
  background: repeating-linear-gradient(180deg,
    rgba(0,0,0,.3) 0 2px,
    rgba(255,255,255,.22) 2px 3px,
    transparent 3px 9px);
  opacity: .55;
}
.tv__vent-side--l { grid-column: 1; }
.tv__vent-side--r { grid-column: 3; }

/* ── утопленная рамка вокруг трубки ─────────────────────── */
.tv__bezel {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 3;
  border-radius: 2% / 2.6%;
  padding: 1.5%;
  background: linear-gradient(162deg, #4a463d 0%, #6b6559 48%, #928b7a 100%);
  box-shadow:
    inset 0 .2rem .5rem rgba(0, 0, 0, .7),
    inset 0 -.1rem .2rem rgba(255, 255, 255, .2),
    0 .07rem 0 rgba(255, 255, 255, .4);
}

/* ── трубка ─────────────────────────────────────────────── */
.tv__tube {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1.4% / 1.9%;
  background: #070605;
  box-shadow:
    inset 0 0 4rem rgba(0, 0, 0, .95),
    inset 0 0 .6rem rgba(0, 0, 0, 1);
}
.tv__tube iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* слои стекла — общий каркас */
.tv__tube > .lay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* 1 · апертурная решётка: непрерывные RGB-полосы */
.lay--grille {
  z-index: 4;
  opacity: .3;
  mix-blend-mode: multiply;
  /* шаг 4px, а не 3: на 3px субпиксельное сглаживание съедало полосы
     и решётка переставала читаться как вертикальная */
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 46, 46, 1) 0px,
    rgba(46, 255, 70, 1) 1px,
    rgba(56, 78, 255, 1) 2px,
    rgba(0, 0, 0, 1) 3px,
    rgba(0, 0, 0, 1) 4px);
  background-size: 4px 100%;
}

/* 2 · строчной развёртки здесь НЕТ намеренно: терминал рисует свои
      строчки, зерно и виньетку сам. Второй слой поверх делал картинку
      мутной и съедал яркость люминофора почти втрое. */

/* 3 · тонировка стекла — чёрный остаётся чёрным */
.lay--tint {
  z-index: 6;
  background: rgba(6, 8, 10, .16);
  mix-blend-mode: multiply;
}

/* 4 · завал к углам от кривизны колбы + расхождение лучей */
.lay--geom {
  z-index: 7;
  background:
    radial-gradient(ellipse 92% 92% at 50% 50%, transparent 55%, rgba(0, 0, 0, .2) 84%, rgba(0, 0, 0, .55) 100%),
    linear-gradient(90deg, rgba(90, 130, 255, .1) 0%, transparent 7%, transparent 93%, rgba(255, 90, 90, .1) 100%);
}

/* 5 · отражение окна в стекле */
.lay--spec {
  z-index: 8;
  mix-blend-mode: screen;
  background:
    linear-gradient(107deg,
      rgba(255, 255, 255, .105) 0%,
      rgba(255, 255, 255, .055) 9%,
      rgba(255, 255, 255, .012) 17%,
      transparent 30%),
    radial-gradient(ellipse 34% 20% at 76% 12%, rgba(255, 255, 255, .05) 0%, transparent 70%);
}

/* halation — свечение люминофора выходит за край стекла на рамку */
.tv__halo {
  position: absolute;
  inset: -2.5%;
  z-index: 2;
  pointer-events: none;
  border-radius: 3%;
  background: radial-gradient(ellipse 62% 58% at 50% 48%, var(--glow) 0%, transparent 72%);
  filter: blur(10px);
}

/* ── подбородок ─────────────────────────────────────────── */
.tv__chin {
  grid-column: 2;
  grid-row: 4;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3.4%;
  padding: 0 1%;
}

.tv__brand {
  font-size: clamp(.55rem, 1.25vw, .95rem);
  font-weight: 700;
  letter-spacing: .36em;
  color: #6c6659;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  flex: 0 0 auto;
}

.tv__grille {
  flex: 1 1 auto;
  height: 40%;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(0, 0, 0, .26) 0 1px,
    rgba(255, 255, 255, .32) 1px 2px,
    transparent 2px 6px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
  opacity: .75;
}

.tv__knobs { display: flex; gap: .5rem; flex: 0 0 auto; }
.tv__knobs i {
  display: block;
  width: clamp(.55rem, 1.6vw, 1.2rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 28%, var(--case-hi) 0%, var(--case-lo) 58%, var(--case-deep) 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .55),
    inset 0 -1px 1px rgba(0, 0, 0, .4),
    inset 0 1px 1px rgba(255, 255, 255, .35);
}

.tv__led {
  flex: 0 0 auto;
  width: clamp(.26rem, .7vw, .5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff7a3c;
  box-shadow:
    0 0 .4rem .06rem rgba(255, 122, 60, .9),
    0 0 1.1rem .12rem rgba(255, 122, 60, .35),
    inset 0 0 2px rgba(255, 240, 220, .9);
}

/* ── подставка ──────────────────────────────────────────── */
.tv__stand {
  position: relative;
  width: 44%;
  height: 2.1%;
  margin: -.4% auto 0;
  border-radius: 0 0 40% 40% / 0 0 100% 100%;
  background: linear-gradient(180deg, var(--case-lo) 0%, var(--case-deep) 100%);
  box-shadow: 0 .5rem 1.4rem rgba(0, 0, 0, .6);
}

/* ── подпись ───────────────────────────────────────────── */
.tv-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 2rem;
  flex-wrap: wrap;
  padding: 0 clamp(1rem, 3vw, 2.4rem) clamp(.8rem, 2vw, 1.4rem);
}
.tv-bar span { font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; }
.tv-bar a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 108, 96, .4);
  padding-bottom: .1rem;
  transition: color .2s, border-color .2s;
}
.tv-bar a:hover, .tv-bar a:focus-visible { color: var(--ink-hi); border-bottom-color: var(--ink-hi); }
.tv-bar__sep { opacity: .4; margin: 0 .5rem; }

/* ── мобильный: корпус не нужен, отдаём трубку целиком ──── */
@media (max-width: 720px), (max-height: 560px) {
  .room { padding: 0; }
  .tv { width: 100%; height: 100%; }
  .tv__shell {
    aspect-ratio: auto;
    height: 100%;
    display: block;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .tv__tex, .tv__seam, .tv__vent-side, .tv__chin, .tv__stand, .tv__halo { display: none; }
  .tv__bezel { padding: 0; border-radius: 0; background: none; box-shadow: none; height: 100%; }
  .tv__tube { border-radius: 0; box-shadow: none; }
  .lay--grille { opacity: .3; }
  .tv-bar { padding: .7rem 1rem .9rem; }
}

@media (prefers-reduced-motion: reduce) { .tv-bar a { transition: none; } }