/* ============================================================
   Комната: пререндеренный фон + интерактивные слои поверх него
   ============================================================ */
html, body { background: var(--room-bg, #010712); }
body { overflow: hidden; cursor: default; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

#world { position: fixed; inset: 0; overflow: hidden; touch-action: none; }   /* жесты приближения обрабатывает сама комната */
#scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#zoomCv { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 5; display: none; pointer-events: none; }
#zoomCv.on { display: block; }
#scene img, #scene canvas, #scene > div { position: absolute; left: 0; top: 0; display: block; user-select: none; -webkit-user-drag: none; }
#scene img[hidden], #scene canvas[hidden] { display: none; }
#layFull { opacity: .92; }
#conFx { image-rendering: pixelated; mix-blend-mode: screen; pointer-events: none; }
#roomStatic { transform-origin: 0 0; opacity: .62; image-rendering: pixelated; border-radius: 7px; }
#roomCard { transform-origin: 0 0; opacity: 0; border-radius: 7px; transition: opacity .6s; }
#roomCard.on { opacity: .9; }
#clockCv, #robotFx, #starCv { pointer-events: none; }
#starCv { mix-blend-mode: screen; }   /* звёздочка за тюлем: светит, а не перекрывает */
#robotFx { image-rendering: pixelated; mix-blend-mode: screen; }
#hl { pointer-events: none; opacity: 0; transition: opacity .18s; mix-blend-mode: screen; }
#hl.on { opacity: 1; }
#world.pointer { cursor: pointer; }

#close { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; visibility: hidden; }
#close.on { opacity: 1; visibility: visible; }
#close img { position: absolute; left: 0; top: 0; display: block; }
#crt640 { position: absolute; left: 0; top: 0; width: 640px; height: 480px; transform-origin: 0 0; }
#crt640 #screen { background: transparent; border-radius: 34px / 30px; cursor: default; }
#crt640 #stage.lit { background: var(--night); }
#screenGlow { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(closest-side, rgba(120, 170, 255, .35), rgba(120, 170, 255, .12) 55%, transparent); mix-blend-mode: screen; }
#screenGlow.on { opacity: 1; }

/* подписи: белая линия от предмета к названию */
#labels { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; overflow: visible; }
#labels path { fill: none; stroke: #f4f8ff; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: drawLine .32s ease-out forwards; filter: drop-shadow(0 0 3px rgba(150, 210, 255, .8)); }
#labels circle { fill: #fff; filter: drop-shadow(0 0 4px rgba(150, 210, 255, .9)); }
#labels .t { font: italic 800 19px/1 'Exo 2', 'ZH Sans', 'HE Sans', sans-serif; fill: #fff; opacity: 0; animation: fadeIn .25s ease-out .28s forwards; paint-order: stroke; stroke: rgba(2, 6, 18, .85); stroke-width: 4px; }
#labels .h { font: 8px/1 'Pixel', 'ZH Pixel', 'HE Pixel', monospace; fill: #9fb4e8; opacity: 0; animation: fadeIn .25s ease-out .38s forwards; paint-order: stroke; stroke: rgba(2, 6, 18, .85); stroke-width: 3px; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* доступность: список вещей для клавиатуры и экранных дикторов */
#objects button { position: fixed; left: -9999px; top: 0; }
#objects button:focus { left: 16px; top: 16px; padding: 8px 12px; border-radius: 8px; background: #0b1535; outline: 2px solid #58f0ff; font: 600 14px/1 'Exo 2', 'ZH Sans', 'HE Sans'; z-index: 30; }

/* панель в правом верхнем углу */
#hud { position: fixed; right: 18px; top: 16px; display: flex; direction: ltr; gap: 10px; z-index: 20; transition: opacity .4s; }
#hud button { height: 30px; padding: 0 10px; border-radius: 8px; background: rgba(10, 20, 55, .6); border: 1px solid rgba(90, 115, 190, .5); font: 8px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #8e9ccc; display: flex; align-items: center; gap: 8px; }
#hud button:hover, #hud button:focus-visible { color: #fff; border-color: #fff; outline: none; }
#langBtn { height: 30px; padding: 0 5px; border-radius: 8px; background: rgba(10, 20, 55, .6); border: 1px solid rgba(90, 115, 190, .5); display: flex; align-items: center; transition: border-color .15s; }
#langBtn:hover, #langBtn:focus-within { border-color: rgba(160, 185, 255, .7); }
#hud #langBtn button { height: 26px; padding: 0 4px; border: 0; border-radius: 6px; background: none; transition: color .15s, background .15s; }   /* один язык — одна кнопка */
#hud #langBtn button:hover, #hud #langBtn button:focus-visible { color: #fff; background: rgba(90, 115, 190, .25); }
#hud [data-l].on { color: #fff; text-shadow: -1px 0 rgba(88,240,255,.8), 1px 1px rgba(255,91,214,.7); }
#soundBtn { font: 14px/1 'Exo 2', 'ZH Sans', 'HE Sans' !important; }
#soundBtn.muted { opacity: .45; text-decoration: line-through; }
#help { position: fixed; left: 20px; bottom: 16px; font: 500 13px/1.4 'Exo 2', 'ZH Sans', 'HE Sans'; color: #5f6d9c; z-index: 20; transition: opacity .4s; }
body.tv #hud, body.tv #help { opacity: 0; pointer-events: none; }
body.zoomed #help { opacity: 0; }   /* в приближенной комнате подсказка не лезет поверх вещей */

/* всплывающее окно вещи */
#popup { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(1, 4, 14, .55); backdrop-filter: blur(2px); }
#popup[hidden] { display: none; }
#popup .pop {
  position: relative; width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 26px; padding: 26px;
  background: linear-gradient(180deg, rgba(20, 34, 86, .97), rgba(8, 15, 44, .97)); border: 2px solid #fff; border-radius: 18px;
  box-shadow: -3px 2px 0 rgba(88,240,255,.75), 3px 3px 0 rgba(255,91,214,.65), 0 20px 60px rgba(0,0,0,.6);
  animation: popIn .28s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes popIn { from { transform: scale(.94); opacity: 0; } }
#popPic { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 12px; background: #030814; box-shadow: inset 0 0 0 1px rgba(90,115,190,.4); align-self: start; }
#popTitle { font: italic 900 28px/1.1 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; text-shadow: -2px 1px 0 rgba(88,240,255,.75), 2px 2px 0 rgba(255,91,214,.65); margin: 6px 0 14px; }
#popBody { font: 400 16.5px/1.6 'Exo 2', 'ZH Sans', 'HE Sans'; color: #d9e1fa; max-width: 60ch; white-space: pre-line; }
#popTabs { display: grid; gap: 8px; margin-top: 16px; }
#popTabs button { text-align: start; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(90, 115, 190, .5); background: rgba(10, 20, 58, .6); font: italic 800 15px/1.2 'Exo 2', 'ZH Sans', 'HE Sans'; color: #b8c4ea; }
#popTabs button.on, #popTabs button:hover { color: #fff; border-color: #fff; }
#popSoon { margin-top: 16px; font: 7px/1.8 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #56639a; }
#popSoon:empty { display: none; }
#popClose { position: absolute; right: 14px; top: 12px; font: 8px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #8e9ccc; padding: 8px; }
#popClose:hover, #popClose:focus-visible { color: #fff; outline: none; }
@media (max-width: 720px) { #popup .pop { grid-template-columns: 1fr; } }

/* вспышка помех при «монтажной склейке» */
#flash { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 35; pointer-events: none; opacity: 0; image-rendering: pixelated; }
#flash.go { animation: flashStatic .42s steps(5) forwards; }
@keyframes flashStatic { 0% { opacity: .95; } 40% { opacity: .75; } 100% { opacity: 0; } }

/* заставка: одинокий домик в сосновом бору (нажми, чтобы войти — это же даёт браузеру разрешение на звук).
   По нажатию «камера» влетает в домик, и открывается комната */
#intro { position: fixed; inset: 0; z-index: 50; background: #05070f; cursor: pointer; overflow: hidden; }
#intro.out { pointer-events: none; }
/* «камера»: её ведёт room.js (flyIn) — дом плавно выходит в центр кадра целиком, растёт равномерно (масштаб по логарифму —
   скорость приближения на глаз постоянная), потом камера «входит» в освещённую дверь, тёплый свет — и комната */
.introCam { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
/* «картина» вписана в экран как cover (размер и место считает room.js: layoutIntro); поверх — тот же домик в 4× разрешении
   (EDSR, intro_house.webp), края растворены маской — при наезде дом остаётся чётким */
.introPlate { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 45.83% 51.76%;
  opacity: 0; transition: opacity 1.4s; animation: introDrift 32s ease-in-out infinite alternate; }
.introPlate.ready { opacity: 1; }
#introBg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#introHouse { position: absolute; left: 33.854%; top: 35.156%; width: 24.740%; height: 31.25%; opacity: 0; transition: opacity .6s;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); }
#introHouse.ready { opacity: 1; }
.introBloom { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), rgba(255, 222, 168, 1) 0, rgba(255, 184, 104, .75) 14%, rgba(214, 120, 52, .3) 34%, rgba(40, 22, 10, 0) 62%); }
@keyframes introDrift { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.introVeil { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 46% 51%, rgba(5, 7, 15, 0) 0 25%, rgba(5, 7, 15, .45) 70%, rgba(5, 7, 15, .8) 100%),
              linear-gradient(to bottom, rgba(5, 7, 15, .15), rgba(5, 7, 15, 0) 35%, rgba(5, 7, 15, 0) 55%, rgba(5, 7, 15, .85)); }
.introIn { position: absolute; left: 16px; right: 16px; bottom: max(7vh, 40px); text-align: center; transition: opacity .4s; }
#intro.out .introIn { opacity: 0; }
#intro h1 { font: 700 clamp(34px, 5.2vw, 56px)/1.05 'Old Standard', 'ZH Serif', 'HE Serif', Georgia, serif; letter-spacing: .03em; margin: 0; color: #f3ead8; text-shadow: 0 2px 22px rgba(0, 0, 0, .7); }
#introSub { font: italic 400 clamp(16px, 1.6vw, 20px)/1.2 'Old Standard', 'ZH Serif', 'HE Serif', Georgia, serif; letter-spacing: .06em; color: #dcc48e; margin: 10px 0 28px; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
#introEnter { font: 600 13px/1 'Exo 2', 'ZH Sans', 'HE Sans', sans-serif; letter-spacing: .32em; padding-left: .32em; text-transform: uppercase; color: #fff; animation: introPulse 2.6s ease-in-out infinite; }
@keyframes introPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
#introSound { font: 400 12px/1 'Exo 2', 'ZH Sans', 'HE Sans', sans-serif; letter-spacing: .14em; color: rgba(220, 226, 242, .55); margin-top: 14px; }
#introLang { margin-top: 26px; display: flex; direction: ltr; gap: 8px; justify-content: center; }
#introLang button { font: 600 13px/1 'Exo 2', 'ZH Sans', 'HE Sans', sans-serif; color: rgba(220, 226, 242, .6); padding: 8px 12px; border-radius: 8px; border: 1px solid transparent; }
#introLang button[data-l="zh"] { font-family: 'Exo 2', 'ZH Label', sans-serif; }   /* «中文» — из крошечного шрифта, чтобы гости на других языках не качали китайский целиком */
#introLang button.on { color: #fff; border-color: rgba(255, 255, 255, .4); }
#intro.loading #introEnter::after { content: ' …'; }
@media (prefers-reduced-motion: reduce) { .introPlate, #introEnter { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  #labels path { animation-duration: .01s; }
}

/* окно приставки: снимок отзывается на клики — для самых настойчивых */
#popPic.jolt1 { animation: popJolt .22s steps(3) 1; }
#popPic.jolt2 { animation: popJolt2 .32s steps(4) 1; filter: contrast(1.15) saturate(.8); }
@keyframes popJolt { 33% { transform: translate(-2px, 1px); } 66% { transform: translate(2px, -1px); } }
@keyframes popJolt2 { 25% { transform: translate(-4px, 2px) skewX(-1deg); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, 0) skewX(1deg); } }

/* системное сообщение «перед экраном» */
#notice { position: fixed; left: 50%; top: 9vh; z-index: 45; width: min(620px, calc(100vw - 32px)); transform: translate(-50%, -30px); opacity: 0; cursor: pointer; }
#notice.in { animation: nIn .45s cubic-bezier(.2, 1.3, .4, 1) forwards; }
#notice.out { animation: nOut .4s ease-in forwards; }
@keyframes nIn { to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes nOut { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -20px); opacity: 0; } }
#notice .nIn { padding: 18px 22px 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(16, 26, 70, .97), rgba(6, 11, 34, .97));
  border: 2px solid #fff; box-shadow: -3px 2px 0 rgba(88,240,255,.75), 3px 3px 0 rgba(255,91,214,.65), 0 24px 70px rgba(0,0,0,.7); }
#notice .nHead { display: flex; align-items: center; gap: 10px; font: 8px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #8e9ccc; letter-spacing: .06em; }
#notice .nHead svg { width: 16px; height: 16px; }
#notice .nHead path { fill: none; stroke: #fff; stroke-width: 14; stroke-linejoin: round; }
#noticeText { margin: 12px 0 10px; font: 500 17px/1.6 'Exo 2', 'ZH Sans', 'HE Sans'; color: #e6ecff; min-height: 3.2em; }
#noticePic { float: left; width: 168px; height: 168px; margin: 8px 18px 4px -6px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(255, 40, 30, .45)); animation: evilIn 1.4s steps(1) both; }
#notice.evil .nIn { border-color: rgba(255, 90, 80, .9); box-shadow: -3px 2px 0 rgba(255, 60, 60, .75), 3px 3px 0 rgba(255, 140, 40, .55), 0 26px 70px rgba(0, 0, 0, .7); }
#notice.evil .nHead path { stroke: #ff6a5a; }
@keyframes evilIn { 0% { opacity: 0; } 8% { opacity: 1; } 12% { opacity: .2; } 18% { opacity: 1; } 22% { opacity: .5; filter: hue-rotate(40deg) drop-shadow(0 0 18px red); } 30%, 100% { opacity: 1; } }
#noticePic[hidden] { display: none; }
#notice .nIn::after { content: ''; display: block; clear: both; }
@media (max-width: 560px) { #noticePic { float: none; display: block; margin: 6px auto 0; width: 140px; height: 140px; } }
#noticeHint { display: block; text-align: end; font: 7px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #56639a; min-height: 7px; }
#toastRoom { position: fixed; right: 22px; bottom: 22px; z-index: 46; display: flex; gap: 12px; align-items: center; padding: 12px 16px 12px 12px;
  border-radius: 12px; background: rgba(10, 18, 52, .96); border: 1px solid rgba(255, 216, 77, .7); box-shadow: 0 0 22px rgba(255, 216, 77, .25);
  transform: translateY(20px); opacity: 0; transition: transform .35s, opacity .35s; }
#toastRoom.in { transform: none; opacity: 1; }
#toastRoom i { width: 30px; height: 30px; border-radius: 8px; background: radial-gradient(circle at 50% 40%, #ffe98a, #d9a520 60%, #7a5a10); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
#toastRoom b { display: block; font: 7px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #ffd84d; margin-bottom: 7px; }
#toastRoom span { font: italic 800 16px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; }
@media (prefers-reduced-motion: reduce) { #notice.in, #notice.out { animation-duration: .01s; } }
#toastRoom[hidden], #notice[hidden] { display: none; }

/* ---------- пасхалка на кнопках программ телевизора (крупный план) ---------- */
#tvPanel { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#tvPanel button { position: absolute; padding: 0; border: 0; border-radius: 3px; background: transparent; cursor: pointer; }
#tvPanel button:focus-visible { outline: 2px solid #58f0ff; outline-offset: 2px; }
#tvPanel button.down { background: rgba(0, 0, 0, .38); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6); transform: translateY(1px); }
#tvPanel .led { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; opacity: 0; pointer-events: none;
  background-repeat: no-repeat; transition: opacity .12s; }
#tvPanel .led::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 90, 30, .55), rgba(255, 60, 20, 0) 65%); mix-blend-mode: screen; }
#tvPanel .led.on { opacity: 1; }
#tvPanel img.resetEn { position: absolute; pointer-events: none; display: none; }
html:not([lang="ru"]) #tvPanel img.resetEn { display: block; }   /* надпись RESET — для всех, кроме русской версии */
#tvPic { position: absolute; inset: 0; width: 640px; height: 480px; object-fit: cover; cursor: pointer; animation: flicker 5s infinite steps(1); }
#tvPic[hidden] { display: none; }
#tvPic.in { animation: tvPicIn .5s steps(6) 1, flicker 5s .5s infinite steps(1); }
@keyframes tvPicIn { 0% { opacity: 0; filter: brightness(3) contrast(.4); } 40% { opacity: .6; filter: brightness(1.8); } 100% { opacity: 1; filter: none; } }
#stage.reduced #tvPic { animation: none; }
/* окно дисков внутри окна приставки: картинка крупнее, по нажатию — лупа */
#popup .pop.discWide { width: min(1120px, calc(100vw - 32px)); grid-template-columns: minmax(0, 640px) 1fr; }
@media (max-width: 720px) { #popup .pop.discWide { grid-template-columns: 1fr; } }

/* иврит (dir="rtl"): ряды языков нарочно не переворачиваем — иначе кнопка «уезжала» бы из-под мыши в момент выбора */
[dir="rtl"] #popClose { right: auto; left: 14px; }
[dir="rtl"] #introEnter { padding-left: 0; padding-right: .32em; }