/* ============ Tube TV ============ */
:root {
  color-scheme: dark;
  --xfade: 2600ms;
  --u: 1px;                         /* 1 пиксель исходной картинки в CSS-пикселях (ставит main.js) */
  --screen-radius: 10% / 13%;
  --scene: url("assets/room-day.webp");
  --grain-opacity: .07;
  --vig: .55;
  --warm: 255, 196, 120;
  --ink: #fbe9cf;
  --panel: rgba(28, 17, 10, .78);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: #120c08;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
  font-family: "Neucha", "Comic Sans MS", system-ui, sans-serif;
  color: var(--ink);
}
#app { position: fixed; inset: 0; overflow: hidden; }

/* ---------- подложка для узких экранов ---------- */
.backdrop { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.bd {
  position: absolute; inset: -6%;
  background: center / cover no-repeat;
  filter: blur(28px) brightness(.42) saturate(1.15);
  transform: translateZ(0);
}

/* ---------- сцена ---------- */
#stage {
  position: absolute; left: 0; top: 0; z-index: 1;
  transform-origin: 0 0;
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
}
#stage.moving { transition: transform var(--seat-ms, 1500ms) cubic-bezier(.6, .02, .2, 1); }
/* Если сцена меньше экрана — мягкий переход в размытую подложку */
#stage.letterbox-y { -webkit-mask-image: linear-gradient(transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(transparent, #000 5%, #000 95%, transparent); }
#stage.letterbox-x { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.layer, .bg-layer { position: absolute; inset: 0; }
#bg { isolation: isolate; }
.bg-layer { will-change: opacity; }
.bg-layer img, .bg-layer video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; display: block;
  -webkit-user-drag: none; pointer-events: none;
}
.bg-layer.is-hidden { visibility: hidden; }
.sway { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.room-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.room-gl.on { opacity: 1; }
#bg.gl .bg-layer { visibility: hidden; }
/* крупный план: проявляется, когда камера уже почти «села» */
.close-wrap { position: absolute; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  /* края крупного плана растворяются в комнате — на узких экранах он не закрывает всё, и шва не видно */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
          mask-composite: intersect; }
body.seated .close-wrap { opacity: 1; transition: opacity .9s ease .6s; }
.close-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--xfade, 2600ms) ease; }
.close-wrap img.on.loaded { opacity: 1; }
body.seated .puppets, body.seated .hot.egg, body.seated .hot.lamp, body.seated .hot.window, body.seated .hot.drape, body.seated .hot.sega { visibility: hidden; }
.bg-layer video.window-video {
  inset: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%); mask-image: linear-gradient(90deg, transparent, #000 10%);
}
.rain { position: absolute; pointer-events: none; opacity: .55; mix-blend-mode: overlay; }

/* ---------- экран ---------- */
.tv-screen {
  position: absolute;
  border-radius: var(--screen-radius);
  overflow: hidden;
  mix-blend-mode: screen;          /* чёрный = прозрачный: свет ложится на стекло кинескопа */
  opacity: 0;
  pointer-events: none;
}
.tv-screen.live { opacity: 1; }
.tv-screen canvas { width: 100%; height: 100%; display: block; }

/* встроенный плеер под «стеклом» */
.tv-embed {
  position: absolute; border-radius: var(--screen-radius); overflow: hidden;
  background: #000; opacity: 0; transform: scale(0); pointer-events: none;
}
/* RuTube: плеер 16:9 крупно, кадр 4:3 внутри заполняет стекло */
.tv-embed iframe.rt {
  position: absolute; left: 50%; top: 50%; display: none;
  width: var(--yt-w, 1280px) !important; height: var(--yt-h, 720px) !important;
  transform: translate(-50%, -50%) scale(var(--yt-k, .2));
  border: 0; pointer-events: none;
}
.tv-embed.rt iframe.rt { display: block; }
/* архив без CORS: обычное видео под стеклом */
.tv-embed .feed-video { position: absolute; left: 50%; top: 50%; width: 106%; height: 106%; transform: translate(-50%, -50%); object-fit: cover; display: none; pointer-events: none; }
.tv-embed.dom .feed-video { display: block; }
/* под стеклом картинка чуть мягче и темнее, как на кинескопе */
.tv-embed.dom .feed-video, .tv-embed.rt iframe.rt { filter: contrast(1.05) saturate(.86) brightness(.9) blur(.35px); }
.tv-embed.dom, .tv-embed.rt { --crt: .26; }
/* пока сигнал не пошёл, стекло закрыто помехами (их рисует кинескоп поверх) */
.tv-embed .cover { position: absolute; inset: 0; background: #060606; opacity: 1; transition: none; pointer-events: none; }
.tv-embed.revealed .cover { opacity: 0; transition: opacity .35s ease; }
.tv-embed i { position: absolute; inset: 0; pointer-events: none; }
/* браузер не дал запуститься — пропускаем клик прямо в плеер YouTube */

.tv-embed .crt-scan { background: repeating-linear-gradient(to bottom, rgba(0,0,0,.34) 0 1px, rgba(0,0,0,0) 1px 3px); opacity: var(--crt, .1); }
.tv-embed .crt-mask { background: repeating-linear-gradient(90deg, rgba(255,70,70,.06) 0 1px, rgba(70,255,70,.06) 1px 2px, rgba(70,70,255,.06) 2px 3px); opacity: var(--crt, .1); }
.tv-embed .crt-vig { background: radial-gradient(ellipse 80% 76% at 50% 50%, rgba(0,0,0,0) 70%, rgba(0,0,0,.4) 100%); box-shadow: inset 0 0 calc(var(--u) * 8) rgba(0,0,0,.6); }
.tv-embed .crt-glass { background-image: var(--scene); background-repeat: no-repeat; mix-blend-mode: screen; opacity: calc(.2 * var(--crt, .1) + .03); }
.tv-embed .crt-flicker { background: rgba(255,255,255,.035); animation: crtflick .12s steps(2) infinite; opacity: var(--crt, .1); }
@keyframes crtflick { 50% { opacity: calc(var(--crt, .1) * .25); } }
body.reduced .tv-embed .crt-flicker { animation: none; opacity: 0; }

/* ---------- свет ---------- */
.glow, .siren, .dust, .dim, .flash { position: absolute; pointer-events: none; }
.glow { mix-blend-mode: screen;
  /* экран светит на комнату, а не на самого себя: над корпусом телевизора свечения нет */
  -webkit-mask-image: radial-gradient(ellipse 20% 17% at 52% 46.5%, transparent 58%, #000 100%);
          mask-image: radial-gradient(ellipse 20% 17% at 52% 46.5%, transparent 58%, #000 100%); }
body.seated .glow { opacity: .7; }
.glow i {
  position: absolute; inset: 0; opacity: 0;
  mix-blend-mode: screen; will-change: opacity, transform;
}
/* Свечение раскладывается на три канала: цвет меняется только через opacity */
.glow .g-r { background:
  radial-gradient(ellipse 17% 15% at 50% 47%, rgba(255,0,0,.75), rgba(255,0,0,0) 100%),
  radial-gradient(ellipse 50% 50% at 50% 47%, rgba(255,0,0,.5), rgba(255,0,0,.16) 42%, rgba(255,0,0,0) 100%); }
.glow .g-g { background:
  radial-gradient(ellipse 17% 15% at 50% 47%, rgba(0,255,0,.75), rgba(0,255,0,0) 100%),
  radial-gradient(ellipse 50% 50% at 50% 47%, rgba(0,255,0,.5), rgba(0,255,0,.16) 42%, rgba(0,255,0,0) 100%); }
.glow .g-b { background:
  radial-gradient(ellipse 17% 15% at 50% 47%, rgba(0,0,255,.75), rgba(0,0,255,0) 100%),
  radial-gradient(ellipse 50% 50% at 50% 47%, rgba(0,0,255,.5), rgba(0,0,255,.16) 42%, rgba(0,0,255,0) 100%); }

/* Мигалка: цветные пятна света → умножаются на узор тюля («гобо») → экраном на сцену.
   Чёрный фон группы нужен, чтобы узор без света не добавлял серого. */
.siren { display: none; mix-blend-mode: screen; overflow: hidden; background: #000; isolation: isolate; }
.siren.on { display: block; }
.siren > i { position: absolute; left: 22%; top: -18%; width: 44%; height: 136%; opacity: 0; will-change: opacity, transform; }
.siren .s-red  { background: radial-gradient(ellipse closest-side, rgba(var(--siren-red, 255,40,40), .95), rgba(var(--siren-red, 255,40,40), .35) 45%, rgba(0,0,0,0) 100%); }
.siren .s-blue { background: radial-gradient(ellipse closest-side, rgba(var(--siren-blue, 40,90,255), .95), rgba(var(--siren-blue, 40,90,255), .38) 45%, rgba(0,0,0,0) 100%); }
.siren .gobo { position: absolute; inset: -10%; mix-blend-mode: multiply; will-change: transform; }
.siren .gobo::before {
  content: ""; position: absolute; inset: 0;
  background: url("assets/lace-gobo.webp") 0 0 / calc(var(--u) * 300) auto repeat;
  transform: skewX(-18deg);
}
.siren .s-win { position: absolute; overflow: hidden; }
.siren .s-win i { position: absolute; left: 0; top: 4%; width: 80%; height: 92%; opacity: 0; will-change: opacity, transform; }
.siren .w-red  { background: radial-gradient(ellipse closest-side, rgba(var(--siren-red, 255,40,40), .8), rgba(0,0,0,0)); }
.siren .w-blue { background: radial-gradient(ellipse closest-side, rgba(var(--siren-blue, 40,90,255), .85), rgba(0,0,0,0)); }

.dust { mix-blend-mode: screen; }
.dim { inset: 0; background: #0b0f16; opacity: 0; }
/* порыв: свет из-под приподнятого тюля ложится полосой на пол и шкаф */
.gust-light { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 30% 48% at 93% 46%, rgba(var(--gust-rgb, 255,236,200), .75), rgba(var(--gust-rgb, 255,236,200), 0) 100%),
    radial-gradient(ellipse 55% 26% at 62% 92%, rgba(var(--gust-rgb, 255,236,200), .55), rgba(var(--gust-rgb, 255,236,200), 0) 100%),
    linear-gradient(200deg, rgba(var(--gust-rgb, 255,236,200), 0) 30%, rgba(var(--gust-rgb, 255,236,200), .22) 55%, rgba(var(--gust-rgb, 255,236,200), 0) 80%); }
.glow, .siren, .dust, .dim, .flash, .gust-light { position: absolute; pointer-events: none; }
.flash { inset: 0; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 70% 90% at 93% 30%, rgba(225,235,255,.95), rgba(200,215,255,.4) 45%, rgba(180,200,255,.12)); }

/* ---------- зоны ---------- */
.zones { position: absolute; inset: 0; }
.hot {
  position: absolute;
  cursor: pointer;
  border: 0; padding: 0; margin: 0; background: none;
  outline: none;
  -webkit-appearance: none; appearance: none;
}
.hot:focus-visible .halo { opacity: .9; }
.hot .halo {
  position: absolute; inset: -40%;
  background: radial-gradient(ellipse closest-side, rgba(var(--warm), .7), rgba(var(--warm), .26) 52%, rgba(var(--warm), 0) 100%);
  opacity: 0; transition: opacity .45s ease;
  mix-blend-mode: screen; pointer-events: none;
}
.hot .crop {
  position: absolute; pointer-events: none;
  background-image: var(--scene);
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 74%, transparent 100%);
          mask-image: radial-gradient(ellipse closest-side, #000 74%, transparent 100%);
  opacity: 0;
  filter: brightness(1.32) saturate(1.12);
  transition: opacity .45s ease;
  will-change: transform, opacity;
}
.hot.egg:hover .crop, .hot.egg.active .crop { opacity: 1; }
.hot:hover .halo, .hot.active .halo { opacity: 1; }
.hot.egg.active.anim .crop { transition: none; }
.hot.knob .crop, .hot.power .crop {
  opacity: 1; filter: none;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 90%, transparent 100%);
          mask-image: radial-gradient(circle closest-side, #000 90%, transparent 100%);
}
.hot.power .crop {
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 82%, transparent 100%);
          mask-image: radial-gradient(ellipse closest-side, #000 82%, transparent 100%);
}
.hot.knob .halo, .hot.power .halo { display: none; }
.hot .crop canvas.kc { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.hot.live-crop .crop { background-image: none !important; }
.hot.live-crop .crop canvas.kc { display: block; }   /* у ручек нет «ореола»: подсказка — подпись и курсор */
.hot.knob:hover .crop, .hot.power:hover .crop { filter: brightness(1.07); }
.hot.knob { cursor: grab; touch-action: none; }
.hot.knob.channel { cursor: pointer; }
.hot.knob.dragging { cursor: grabbing; }
.hot.lamp .halo { inset: -25%; }
.hot.window .halo { display: none; }
.hot.drape .halo { inset: -4% -30%; }
.hot.evening-only { pointer-events: none; }
body.evening .hot.evening-only { pointer-events: auto; }

/* ---------- объёмные пасхалки (v0.2) ---------- */
.puppets { position: absolute; inset: 0; pointer-events: none; }
.puppet { position: absolute; perspective: calc(var(--u) * 300); }
.puppet .plate, .puppet .body, .puppet .tt { position: absolute; inset: 0; width: 100%; height: 100%; }
.puppet .plate { opacity: 0; display: block; }
.puppet.anim .plate { opacity: 1; }
.puppet.gl-hole .plate { opacity: 0 !important; }   /* под предметом рисует сама сцена */
.puppet .body { transform-style: preserve-3d; will-change: transform; }
.puppet .body img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-user-drag: none; }
.puppet .sprite { opacity: 0; }
.puppet.anim .sprite { opacity: 1; }
.puppet .side { opacity: 0; backface-visibility: visible; }
.puppet.anim .side { opacity: 1; }
.puppet.no-sprite .sprite, .puppet.no-sprite .side, .puppet.no-sprite .glow-sprite, .puppet.no-sprite .reel, .puppet.no-sprite .sheen { opacity: 0 !important; transition: none; }
.puppet .glow-sprite {
  opacity: 0; transition: opacity .3s ease;
  filter: brightness(1.05) contrast(1.02);
}
/* наведение: предмет не «светится» — его будто тронули: чуть приподнялся, появилась тень на полке */
.puppet.hover .glow-sprite { opacity: 1; }
.puppet .body { transition: transform .35s cubic-bezier(.3, 1.3, .4, 1); }
.puppet.hover:not(.anim) .body { transform: translateY(-1.5%) rotateZ(-.5deg); }
.puppet.hover:not(.anim) .plate { opacity: 1; }
.puppet.hover:not(.anim) .shadow { opacity: .5; }
.puppet.anim .glow-sprite { opacity: 0; transition: opacity .15s; }
.hot.egg.active .halo { opacity: 0 !important; }
.puppet .sheen {
  position: absolute; inset: 0; overflow: hidden; opacity: 0;
  -webkit-mask-image: var(--cut); -webkit-mask-size: 100% 100%; mask-image: var(--cut); mask-size: 100% 100%;
  mix-blend-mode: screen;
}
.puppet .sheen i {
  position: absolute; top: -30%; bottom: -30%; left: -55%; width: 40%;
  background: linear-gradient(90deg, rgba(255,245,225,0), rgba(255,245,225,.5), rgba(255,245,225,0));
}
.puppet .shadow {
  position: absolute; left: 14%; right: 14%; bottom: 7%; height: 9%;
  background: radial-gradient(ellipse closest-side, rgba(10,6,3,.55), rgba(10,6,3,0));
  opacity: 0;
}
.puppet .lcd { position: absolute; opacity: 0; image-rendering: pixelated; transition: opacity .15s; transform: translateZ(.5px); }
.puppet .lcd.on { opacity: .96; }
.puppet .reel { position: absolute; opacity: 0; transform: translate(-50%, -50%); }
.puppet.anim .reel { opacity: 1; }
.puppet .reel svg { width: 100%; height: 100%; display: block; }
.puppet .tt { pointer-events: none; }
.cube-wrap { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.cube3d { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform; }
.cubie { position: absolute; left: -.5em; top: -.5em; width: 1em; height: 1em; transform-style: preserve-3d; }
.cubie i { position: absolute; inset: 0; background: #17120e; transform-style: preserve-3d; }
.cubie b { position: absolute; inset: 8%; border-radius: 16%; }
.hot.egg .crop { display: none; }
.hot.egg .halo { display: none; }

/* ---------- подпись ---------- */
.caption {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -100%) translateY(-6px) scale(calc(1 / var(--zoom, 1)));
  transform-origin: 50% 100%;
  max-width: min(60vw, 340px);
  padding: .35em .8em .4em;
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font-size: clamp(14px, calc(var(--u) * 17), 20px);
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(255,214,160,.16) inset;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none; z-index: 5;
  white-space: normal; width: max-content;
}
.caption.show { opacity: 1; }
.caption.below { transform: translate(-50%, 0) translateY(8px) scale(calc(1 / var(--zoom, 1))); transform-origin: 50% 0; }

/* ---------- подсказка на кнопке питания ---------- */
.power-hint { position: absolute; pointer-events: none; z-index: 4; transition: opacity .6s ease; }
.power-hint.off { opacity: 0; }
.power-hint .ring {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * 46 / var(--zoom, 1)); height: calc(var(--u) * 46 / var(--zoom, 1));
  margin: calc(var(--u) * -23 / var(--zoom, 1)) 0 0 calc(var(--u) * -23 / var(--zoom, 1));
  border-radius: 50%;
  border: max(1.5px, calc(var(--u) * 2)) solid rgba(255, 224, 170, .95);
  box-shadow: 0 0 calc(var(--u) * 14) rgba(255, 200, 120, .8);
  animation: ring 1.9s ease-out infinite;
}
.power-hint .bubble {
  position: absolute; right: calc(var(--u) * -6 / var(--zoom, 1)); top: calc(100% + var(--u) * 26 / var(--zoom, 1));
  transform: scale(calc(1 / var(--zoom, 1)));
  transform-origin: 100% 0;
  padding: .3em .85em .38em; border-radius: 999px;
  background: var(--panel); color: var(--ink);
  font-size: clamp(15px, calc(var(--u) * 19), 22px);
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255,214,160,.25) inset, 0 6px 22px rgba(0,0,0,.4);
  animation: breathe 1.9s ease-in-out infinite;
}
.power-hint .bubble::before {
  content: ""; position: absolute; right: 14px; top: -6px;
  border: 6px solid transparent; border-top: 0; border-bottom-color: var(--panel);
}
@keyframes ring {
  0%   { transform: scale(.45); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes breathe { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }

/* ---------- эффекты пасхалок ---------- */
.fx { position: absolute; inset: 0; pointer-events: none; }
.fx > * { position: absolute; will-change: transform, opacity; }
.fx .candy-fx { width: calc(var(--u) * 4.4); height: calc(var(--u) * 3.2); border-radius: 50%; margin: calc(var(--u) * -1.6) 0 0 calc(var(--u) * -2.2); box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.fx .bubble-fx {
  width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%;
  border: max(1px, calc(var(--u) * 1)) solid rgba(255, 245, 225, .85);
  background: rgba(255, 220, 160, .15);
}
.fx .note-fx, .fx .heart-fx {
  font-family: "Press Start 2P", monospace;
  font-size: calc(var(--u) * 11);
  color: #ffe36b; text-shadow: 0 0 calc(var(--u) * 4) rgba(255,210,90,.9);
}
.fx .spark-fx {
  width: calc(var(--u) * 7); height: calc(var(--u) * 7);
  background: radial-gradient(circle, #fff 0 18%, rgba(255,230,180,.8) 30%, transparent 70%);
}
.fx .steam-fx {
  width: calc(var(--u) * 16); height: calc(var(--u) * 34);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,245,230,.35), transparent 70%);
  filter: blur(calc(var(--u) * 2));
}
.fx .pet-fx {
  width: calc(var(--u) * 30); height: calc(var(--u) * 30);
  image-rendering: pixelated; image-rendering: crisp-edges;
  filter: drop-shadow(0 0 calc(var(--u) * 5) rgba(255, 220, 130, .8));
}

/* ---------- плёнка и виньетка ---------- */
.grain {
  z-index: 2;
  position: absolute; left: -192px; top: -192px; right: -192px; bottom: -192px;   /* запас ровно в одну плитку: слой вдвое меньше прежнего */
  background-image: var(--grain-img, none);
  background-size: 192px 192px;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: grain .9s steps(6) infinite;
  will-change: transform;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-61px, 37px); }
  33%  { transform: translate(43px, -83px); }
  50%  { transform: translate(-101px, -19px); }
  67%  { transform: translate(79px, 59px); }
  83%  { transform: translate(-23px, 97px); }
  100% { transform: translate(0, 0); }
}
}
.vignette {
  z-index: 2;
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 48%, rgba(0,0,0,0) 55%, rgba(8,4,2,var(--vig)) 100%);
}

/* ---------- интерфейс ---------- */
.ui {
  position: absolute; z-index: 20;
  top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right));
  display: flex; align-items: center; gap: 10px;
}
.mute, .phones {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink);
  background: rgba(24, 14, 8, .55);
  border: 1px solid rgba(255, 220, 180, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.mute:hover, .phones:hover { background: rgba(40, 24, 14, .75); }
.phones { opacity: .55; }
.phones.on { opacity: 1; color: #f2c47e; border-color: rgba(255, 214, 160, .45); }
.phones:focus-visible { outline: 2px solid rgba(255, 214, 160, .8); outline-offset: 2px; }
.mute:active { transform: scale(.94); }
.mute .cross { display: none; }
.mute[aria-pressed="true"] .cross { display: inline; }
.mute[aria-pressed="true"] .wave { display: none; }
.seat {
  height: 44px; padding: 0 16px 0 13px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  font: 18px/1 "Neucha", "Comic Sans MS", system-ui, sans-serif; color: var(--ink);
  background: rgba(24, 14, 8, .55);
  border: 1px solid rgba(255, 220, 180, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; transition: background .2s ease, transform .15s ease;
}
.seat:hover { background: rgba(40, 24, 14, .75); }
.seat:active { transform: scale(.97); }
.seat:focus-visible, .mute:focus-visible { outline: 2px solid rgba(255, 214, 160, .8); outline-offset: 2px; }
.seat[aria-pressed="true"] { background: rgba(120, 78, 32, .6); border-color: rgba(255, 214, 160, .45); }
.seat .short { display: none; }
/* микшер: ТВ и комната (улица, кухня, погода) */
.mixer {
  display: flex; align-items: center; gap: 14px;
  height: 44px; padding: 0 14px; border-radius: 999px;
  background: rgba(24, 14, 8, .55); border: 1px solid rgba(255, 220, 180, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 16px/1 "Neucha", "Comic Sans MS", system-ui, sans-serif; color: var(--ink);
}
.mixer .mx { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.mixer input { width: 84px; accent-color: #e9b46a; cursor: pointer; }
.mixer input:focus-visible { outline: 2px solid rgba(255, 214, 160, .8); outline-offset: 3px; }
@media (max-width: 760px) {
  .ui { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 28px); }
  .mixer { order: 3; height: 38px; gap: 10px; padding: 0 12px; font-size: 14px; }
  .mixer input { width: 58px; }
}
@media (max-width: 420px) { .mixer { gap: 7px; padding: 0 10px; font-size: 13px; } .mixer .mx { gap: 4px; } .mixer input { width: 48px; } }
@media (max-width: 560px) { .seat .long { display: none; } .seat .short { display: inline; } }
.vignette.focus {
  opacity: 0; transition: opacity 1.4s ease;
  background: radial-gradient(ellipse 50% 55% at 50% 50%, rgba(0,0,0,0) 62%, rgba(6,3,1,.62) 100%);
}
body.seated .vignette.focus { opacity: 1; }
body.seated .intro { opacity: 0; }
.ver {
  position: absolute; z-index: 15; left: max(12px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom));
  font: 11px/1 ui-monospace, Menlo, monospace; color: rgba(251, 233, 207, .35); pointer-events: none;
}

.intro, .toast {
  position: absolute; z-index: 15; left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content; max-width: min(92vw, 640px);
  padding: .5em 1.1em .6em; border-radius: 14px;
  background: var(--panel);
  font-size: clamp(16px, 2.1vh, 21px); line-height: 1.25; text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(255,214,160,.14) inset;
  pointer-events: none;
  transition: opacity .8s ease;
}
.intro { opacity: 0; }
.intro.show { opacity: 1; }
.toast { opacity: 0; }
.toast.show { opacity: 1; }

/* ---------- калибровка ---------- */
.calib { position: absolute; inset: 0; z-index: 30; }
.cz {
  position: absolute;
  border: 1.5px dashed var(--c, #7df);
  background: rgba(120, 220, 255, .06);
  cursor: move; touch-action: none;
}
.cz.layerz { --c: #ffcf5a; background: rgba(255, 200, 90, .04); }
.cz.sel { border-style: solid; background: rgba(120, 220, 255, .14); z-index: 2; }
.cz.layerz { pointer-events: none; }                   /* большие слои тянутся за ярлык и уголок */
.cz.layerz span, .cz.layerz .hdl { pointer-events: auto; cursor: move; }
.cz.layerz .hdl { cursor: nwse-resize; }
.cz.layerz.sel { background: rgba(255, 200, 90, .12); z-index: 0; }
.cz span {
  position: absolute; left: 0; top: -17px;
  font: 11px/14px ui-monospace, Menlo, Consolas, monospace;
  color: #111; background: var(--c, #7df); padding: 0 4px; white-space: nowrap;
}
.cz .hdl {
  position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px;
  background: var(--c, #7df); cursor: nwse-resize; border-radius: 2px;
}
.calib-panel {
  position: absolute; z-index: 40; left: 12px; bottom: 12px;
  width: min(360px, calc(100vw - 24px));
  padding: 12px; border-radius: 12px;
  background: rgba(14, 10, 8, .9);
  border: 1px solid rgba(255,255,255,.12);
  font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace;
  color: #e9e2d8;
  -webkit-user-select: text; user-select: text;
}
.calib-panel .cp-head { font-size: 13px; margin-bottom: 4px; }
.calib-panel .cp-sel { color: #7df; }
.calib-panel .cp-hint { color: #a99; margin-bottom: 8px; }
.calib-panel .cp-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.calib-panel button {
  font: inherit; color: #eee; background: #2a2420; border: 1px solid #554a40;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
}
.calib-panel button:hover { background: #3a3029; }
.calib-panel .cp-main { background: #6b4a1c; border-color: #a97b37; }
.calib-panel .cp-next { color: #a99; margin: 2px 0 6px; }
.calib-panel textarea {
  width: 100%; resize: vertical; background: #0b0908; color: #cfe8c8;
  border: 1px solid #333; border-radius: 6px; font: 11px/1.35 ui-monospace, Menlo, monospace; padding: 6px;
}
body.calibrating .zones, body.calibrating .power-hint { pointer-events: none; }

/* ---------- reduced motion ---------- */
body.reduced .grain { display: none; }
@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
  .power-hint .ring { animation-duration: 4s; }
  .power-hint .bubble { animation: none; opacity: 1; }
}

/* ---------- заставка при загрузке: кинескоп «прогревается», потом включается полосой ---------- */
.boot { position: fixed; inset: 0; z-index: 100; background: #050403; display: grid; place-items: center; transition: opacity .7s ease .35s; }
.boot-in { display: grid; gap: 18px; justify-items: center; color: #e9d9bf; opacity: .9; }
.boot-logo { font: 26px/1 "Press Start 2P", ui-monospace, monospace; letter-spacing: 4px; text-shadow: 0 0 12px rgba(255, 190, 110, .55), 0 0 2px #fff; animation: bootGlow 2.4s ease-in-out infinite; }
.boot-txt { font: 15px/1 "Neucha", system-ui, sans-serif; color: rgba(233, 217, 191, .7); letter-spacing: 1px; }
.boot-dots b { font-weight: normal; animation: bootDot 1.2s infinite; opacity: .2; }
.boot-dots b:nth-child(2) { animation-delay: .2s; } .boot-dots b:nth-child(3) { animation-delay: .4s; }
@keyframes bootDot { 40% { opacity: 1; } }
@keyframes bootGlow { 50% { opacity: .75; text-shadow: 0 0 20px rgba(255, 190, 110, .8), 0 0 2px #fff; } }
.boot-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #fff8ec; box-shadow: 0 0 18px 6px rgba(255, 240, 210, .7); transform: scaleX(0); opacity: 0; }
.boot.done .boot-in { opacity: 0; transition: opacity .2s; }
.boot.done .boot-line { animation: bootLine .55s cubic-bezier(.6, 0, .3, 1) forwards; }
.boot.done { opacity: 0; pointer-events: none; }
@keyframes bootLine { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1) scaleY(1); opacity: 1; } 100% { transform: scaleX(1) scaleY(400); opacity: 0; } }
body.reduced .boot.done .boot-line { animation: none; }

/* ============ приставка ============ */
.hot.sega .halo { inset: -8% -5%; }
.hot.sega:hover .halo { opacity: .55; }
/* рамка эмулятора — за кинескопом; кадр рисует шейдер, рамка видна только если кадр отдать нельзя */
.tv-embed iframe.sega {
  position: absolute; left: 50%; top: 50%; display: none;
  width: var(--sega-w, 640px); height: var(--sega-h, 480px);
  transform: translate(-50%, -50%) scale(var(--sega-k, .2));
  border: 0; pointer-events: none; background: #000;
}
.tv-embed.sega iframe.sega { display: block; }
.tv-embed.sega.revealed iframe.sega { filter: contrast(1.05) saturate(.9) brightness(.92); }
.tv-embed.sega.revealed { --crt: .26; }

.sega-menu {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 16px;
  background: rgba(10, 6, 3, .58);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s ease;
}
.sega-menu.show { opacity: 1; }
.sega-menu[hidden] { display: none; }
.sm-box {
  width: min(780px, 100%); max-height: calc(100% - 8px); overflow: auto;
  padding: 18px 20px 16px; border-radius: 16px;
  background: rgba(30, 19, 11, .94); color: var(--ink);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 214, 160, .16) inset;
  transform: translateY(8px) scale(.985); transition: transform .22s cubic-bezier(.2, .9, .3, 1);
  -webkit-user-select: none; user-select: none;
}
.sega-menu.show .sm-box { transform: none; }
.sm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sm-head b { font-size: 27px; font-weight: 400; letter-spacing: .3px; }
.sm-pad { margin-left: auto; font-size: 14px; opacity: .6; padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(255, 214, 160, .16); }
.sm-pad.on { opacity: 1; color: #9dffb7; border-color: rgba(157, 255, 183, .35); }
.sm-x {
  width: 36px; height: 36px; border-radius: 50%; flex: none; cursor: pointer;
  border: 1px solid rgba(255, 214, 160, .2); background: rgba(255, 214, 160, .06); color: var(--ink);
  font: 24px/1 system-ui, sans-serif;
}
.sm-x:hover { background: rgba(255, 214, 160, .14); }
.sm-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 214, 160, .06); }
.sm-now[hidden] { display: none; }
.sm-now-t { flex: 1 1 200px; font-size: 18px; }
.sm-btn {
  font: 17px/1 "Neucha", "Comic Sans MS", system-ui, sans-serif; color: var(--ink); cursor: pointer;
  padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(255, 214, 160, .22); background: rgba(255, 214, 160, .05);
}
.sm-btn:hover { background: rgba(255, 214, 160, .13); }
.sm-btn.main { background: rgba(233, 180, 106, .9); color: #2a170a; border-color: transparent; }
.sm-btn.main:hover { background: rgba(245, 196, 126, 1); }
.sm-carts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sm-cart {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; text-align: left; cursor: pointer;
  padding: 10px 10px 12px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--ink);
  font: inherit; transition: background .15s ease;
}
.sm-cart:hover, .sm-cart:focus-visible { background: rgba(255, 214, 160, .09); border-color: rgba(255, 214, 160, .2); outline: none; }
.sm-cart:focus-visible { box-shadow: 0 0 0 2px rgba(255, 214, 160, .7); }
.sm-name { font-size: 19px; line-height: 1.1; margin-top: 8px; }
.sm-desc { font-size: 14px; line-height: 1.2; opacity: .65; }
.sm-cart.current .cart::after { content: 'в приставке'; position: absolute; right: -6px; top: -9px; padding: 3px 8px; border-radius: 99px;
  font-size: 13px; line-height: 1; color: #10240f; background: #9dffb7; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
/* картридж: тёмный пластик, рёбра сверху, наклейка с титульным экраном */
.cart {
  position: relative; display: block; aspect-ratio: 10 / 9;
  background: linear-gradient(180deg, #2c2b30 0%, #1b1a1e 55%, #121114 100%);
  border-radius: 12% 12% 5% 5% / 10% 10% 5% 5%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -3px 6px rgba(0, 0, 0, .45), 0 8px 16px rgba(0, 0, 0, .45);
  transition: transform .18s ease;
}
.sm-cart:hover .cart, .sm-cart:focus-visible .cart { transform: translateY(-3px); }
.cart .c-top { position: absolute; left: 7%; right: 7%; top: 4%; height: 10%;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 2px, rgba(0, 0, 0, .25) 2px 6px); border-radius: 3px; }
.cart .c-label { position: absolute; left: 9%; right: 9%; top: 19%; bottom: 13%;
  background: #0a0a10 center / cover no-repeat; image-rendering: pixelated; border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.cart .c-grip { position: absolute; left: 30%; right: 30%; bottom: 4%; height: 5%;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 5px); }
.cart.empty { background: none; box-shadow: none; border: 2px dashed rgba(255, 214, 160, .3); }
.cart.empty .c-top, .cart.empty .c-grip { display: none; }
.cart.empty .c-label { background: none; box-shadow: none; display: grid; place-items: center; }
.cart.empty i { font: 400 44px/1 system-ui, sans-serif; font-style: normal; opacity: .55; }
.sm-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.sm-box { position: relative; }
.sm-keys { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 214, 160, .12); font-size: 15px; line-height: 1.7; opacity: .82; }
.sm-keys kbd {
  display: inline-block; min-width: 1.6em; padding: 0 .35em; margin: 0 2px; text-align: center;
  font: 12px/1.6 ui-monospace, Menlo, monospace; color: var(--ink);
  border-radius: 5px; border: 1px solid rgba(255, 214, 160, .3); background: rgba(255, 214, 160, .07);
}
@media (max-width: 680px) {
  .sm-carts { grid-template-columns: repeat(2, 1fr); }
  .sm-head b { font-size: 23px; }
  .sm-pad { display: none; }
}
@media (pointer: coarse) and (hover: none) { .sm-keys { display: none; } }

/* экранный джойстик: только на сенсорных экранах, пока идёт игра */
.sega-pad { display: none; }
@media (pointer: coarse) {
  body.sega-on:not(.sega-menu-open) .sega-pad { display: block; }
  body.sega-on .mixer, body.sega-on #ver { display: none; }
  body.sega-on .toast { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 150px); }
}
.sega-pad { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.sega-pad > * { pointer-events: auto; touch-action: none; -webkit-touch-callout: none; }
.sp-dpad {
  position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom));
  width: 136px; height: 136px; border-radius: 50%;
  background: rgba(18, 12, 8, .45); border: 1px solid rgba(255, 214, 160, .18);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sp-dpad i { position: absolute; background: rgba(255, 235, 210, .16); border-radius: 6px; transition: background .06s; }
.sp-dpad i.u, .sp-dpad i.d { left: 37%; width: 26%; height: 34%; }
.sp-dpad i.u { top: 9%; } .sp-dpad i.d { bottom: 9%; }
.sp-dpad i.l, .sp-dpad i.r { top: 37%; height: 26%; width: 34%; }
.sp-dpad i.l { left: 9%; } .sp-dpad i.r { right: 9%; }
.sp-dpad i.on { background: rgba(255, 214, 160, .62); }
.sp-dpad b { position: absolute; left: 37%; top: 37%; width: 26%; height: 26%; background: rgba(255, 235, 210, .1); }
.sp-abc { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: flex-end; }
.sp-abc button, .sp-start, .sp-menu {
  border: 1px solid rgba(255, 214, 160, .25); color: var(--ink); cursor: pointer;
  background: rgba(18, 12, 8, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font: 700 17px/1 ui-monospace, Menlo, monospace;
}
.sp-abc button { width: 58px; height: 58px; border-radius: 50%; }
.sp-abc button:nth-child(2) { margin-bottom: 18px; }
.sp-abc button:nth-child(3) { margin-bottom: 36px; }
.sp-abc button.down, .sp-start.down { background: rgba(233, 180, 106, .75); color: #2a170a; }
.sp-start { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(26px, env(safe-area-inset-bottom)); padding: 9px 16px; border-radius: 99px; font-size: 12px; letter-spacing: 1px; }
.sp-menu { position: absolute; left: max(14px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); width: 44px; height: 44px; border-radius: 50%; font: 20px/1 system-ui, sans-serif; }
@media (max-width: 520px) {
  .sp-abc button { width: 54px; height: 54px; }
  .sp-abc { gap: 8px; }
  .sp-start { left: auto; right: max(16px, env(safe-area-inset-right)); transform: none; bottom: calc(max(26px, env(safe-area-inset-bottom)) + 112px); }
}
/* на закате свет живой, готовой подложки нет — предмет на наведении остаётся на месте */
body.time-sunset.weather-clear .puppet.hover:not(.anim) .body { transform: none; }
body.time-sunset.weather-clear .puppet.hover:not(.anim) .plate { opacity: 0; }
body.time-sunset.weather-clear .puppet.hover:not(.anim) .shadow { opacity: 0; }

/* переключение комнат */
.seat.room { gap: 7px; }
.seat.room span { font-size: 16px; }
@media (max-width: 560px) { .seat.room span { display: none; } }
/* светящиеся предметы (комната без WebGL) */
.glow-item { position: absolute; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity var(--xfade, 2600ms) ease;
  filter: drop-shadow(0 0 calc(var(--u) * 3) rgba(140, 255, 180, .55)); }

/* библиотека картриджей и геймпады */
.sm-lib { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 214, 160, .12); }
.sm-lib-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sm-lib-head b { font-size: 19px; font-weight: 400; }
.sm-lib-n { opacity: .5; font-size: 14px; margin-right: auto; }
.sm-btn.small { font-size: 15px; padding: 6px 11px; }
.sm-lib-hint { font-size: 14px; line-height: 1.35; opacity: .6; margin-top: 8px; }
.sm-lib-hint[hidden] { display: none; }
.sm-lib-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; margin-top: 8px; max-height: 180px; overflow: auto; }
.sm-lib-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sm-lib-play { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; text-align: left; cursor: pointer;
  padding: 6px 8px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--ink); font: inherit; }
.sm-lib-play:hover, .sm-lib-play:focus-visible { background: rgba(255, 214, 160, .09); border-color: rgba(255, 214, 160, .2); outline: none; }
.sm-lib-play.current { border-color: rgba(157, 255, 183, .5); }
.sm-lib-cart { flex: none; width: 22px; height: 20px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #2c2b30, #121114); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.sm-lib-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.sm-lib-size { flex: none; font-size: 12px; opacity: .45; }
.sm-lib-x { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; background: none; color: var(--ink); opacity: .4; cursor: pointer; font: 18px/1 system-ui, sans-serif; }
.sm-lib-x:hover { opacity: 1; background: rgba(255, 150, 130, .15); }
.sm-pads { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 214, 160, .12); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 15px; }
.sm-pads-t { opacity: .8; }
.sm-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; opacity: .85; }
.sm-check input { accent-color: #e9b46a; }
@media (max-width: 680px) { .sm-lib-list { grid-template-columns: 1fr; } }

/* ссылка на библиотеку Internet Archive */
.sm-archive { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--ink);
  background: rgba(255, 214, 160, .05); border: 1px solid rgba(255, 214, 160, .18); }
.sm-archive:hover, .sm-archive:focus-visible { background: rgba(255, 214, 160, .12); outline: none; box-shadow: 0 0 0 2px rgba(255, 214, 160, .5); }
.sm-archive-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sm-archive-t b { font-weight: 400; font-size: 18px; }
.sm-archive-t span { font-size: 14px; opacity: .65; }
.sm-archive-go { margin-left: auto; font-size: 20px; opacity: .6; }