/* Экран проектора (/projector): оболочка (pj-shell) и содержимое (pj) — заставка, экран квеста, слайды.
   Стиль хаба: тёмный, сглаженный, символы на фоне (rain.js), изумрудный акцент. Размеры — от экрана (vmin, vh),
   чтобы одинаково читалось и на проекторе 1024×768, и на большом экране. */
.hidden { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a0e14; }

/* ---------- оболочка: только окно с содержимым ---------- */
.pj-shell-frame { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #0a0e14; }

/* ---------- содержимое ---------- */
.pj { --bg: #0a0e14; --text: #e6edf3; --dim: #94a3b8; --accent: #34d399; --accent-2: #10b981; --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
  color: var(--text); font: 400 16px/1.5 Inter, system-ui, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; user-select: none;
  background: radial-gradient(70vw 50vh at 15% -10%, rgba(52, 211, 153, .09), transparent 60%), radial-gradient(60vw 45vh at 100% 110%, rgba(96, 165, 250, .07), transparent 60%), var(--bg); }
.pj *, .pj *::before, .pj *::after { box-sizing: border-box; }
.pj.pj-still, .pj.pj-still * { cursor: none !important; }
#rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .14; pointer-events: none; transition: opacity .6s; }
.pj.rain-pause #rain { opacity: 0; }

/* заставка */
.pj-idle { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; padding: 4vh 4vw; cursor: pointer; animation: pj-fade .5s ease-out; }
.pj-card { display: flex; flex-direction: column; align-items: center; gap: 1.2vh; min-width: min(64vw, 900px); padding: 5vh 6vw 4.5vh; text-align: center;
  border: 1px solid var(--line); border-radius: clamp(16px, 2.4vmin, 28px); background: rgba(17, 22, 31, .72); box-shadow: 0 3vh 8vh rgba(0, 0, 0, .45);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.pj-logo .kh-logo { font-size: clamp(26px, 6.2vmin, 72px); gap: .35em; }
.pj-logo .kh-cursor { margin-left: -.25em; }
.pj-hub { margin: 0; color: var(--dim); font-size: clamp(15px, 2.6vmin, 30px); font-weight: 500; letter-spacing: .02em; }
.pj-clock { margin: 2.4vh 0 0; font: 700 clamp(56px, 19vmin, 230px)/1 "JetBrains Mono", ui-monospace, Consolas, monospace; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 0 4vmin rgba(52, 211, 153, .18); }
.pj-date { margin: 0 0 2.2vh; color: var(--dim); font-size: clamp(15px, 2.8vmin, 32px); }
.pj-date::first-letter { text-transform: uppercase; }
.pj-wait { display: inline-flex; align-items: center; gap: .7em; margin: 0; padding: .55em 1.1em; border-radius: 99px; background: rgba(52, 211, 153, .1); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .28);
  color: #c9f7e2; font-size: clamp(14px, 2.5vmin, 28px); font-weight: 600; }
.pj-dot { width: .55em; height: .55em; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 1em var(--accent); animation: pj-pulse 1.6s ease-in-out infinite; }
.pj-addr { margin: 1.4vh 0 0; font: 600 clamp(14px, 2.4vmin, 28px)/1.2 "JetBrains Mono", ui-monospace, Consolas, monospace; color: var(--accent); letter-spacing: .03em; }
.pj-addr:empty { display: none; }
.pj-foot { display: flex; flex-direction: column; align-items: center; gap: 1vh; }
.pj-full-btn { padding: .75em 1.6em; border: 1px solid transparent; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #03150d;
  font: 700 clamp(15px, 2.4vmin, 26px)/1.2 Inter, system-ui, sans-serif; cursor: pointer; box-shadow: 0 1vh 3vh rgba(16, 185, 129, .3); transition: filter .15s, transform .12s; }
.pj-full-btn:hover { filter: brightness(1.07); }
.pj-full-btn:active { transform: translateY(1px); }
.pj-hint { margin: 0; color: var(--dim); font-size: clamp(12px, 1.7vmin, 18px); }
.pj.pj-full .pj-foot { display: none; }

/* экран квеста — во весь экран; появляется, когда загрузился */
.pj-frame { position: fixed; inset: 0; z-index: 2; background: var(--bg); }
.pj-frame iframe { width: 100%; height: 100%; border: 0; display: block; opacity: 0; transition: opacity .35s ease-out; }
.pj-frame.ready iframe { opacity: 1; }
.pj.pj-still .pj-frame iframe { pointer-events: none; }

/* слайды презентации — поверх всего, на чёрном */
.pj-slides { position: fixed; inset: 0; z-index: 3; background: #000; animation: pj-fade .3s ease-out; }
.pj-stage { width: 100%; height: 100%; container-type: size; display: grid; place-items: center; }
.pj-stage > .pz-slide { width: min(100cqw, 100cqh * 16 / 9); border-radius: 0; box-shadow: none; }

/* поверх квеста и слайдов: «во весь экран», пока экран не во весь экран; прячется вместе с курсором */
.pj-corner { position: fixed; right: 16px; bottom: 16px; z-index: 10; display: none; padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(10, 14, 20, .82); color: var(--text); font: 600 14px/1.2 Inter, system-ui, sans-serif; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: opacity .3s; }
.pj-corner:hover { border-color: var(--accent); color: var(--accent); }
.pj:not(.pj-full):not([data-mode="idle"]) .pj-corner { display: block; }
.pj.pj-still .pj-corner { opacity: 0; pointer-events: none; }
/* связь с сервером пропала */
.pj-status { position: fixed; left: 50%; bottom: 18px; z-index: 11; transform: translateX(-50%); padding: 8px 16px; border-radius: 99px; background: rgba(127, 29, 29, .85);
  color: #fee2e2; font: 600 14px/1.3 Inter, system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }

@keyframes pj-fade { from { opacity: 0; } }
@keyframes pj-pulse { 50% { opacity: .35; transform: scale(.85); } }
@media (prefers-reduced-motion: reduce) { .pj-dot, .pj-idle, .pj-slides { animation: none; } }

/* показ видео: ролик во весь экран поверх всего */
.pj-video { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; background: #000; }
.pj-video.hidden { display: none !important; }
.pj-video video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.pj-sound { position: absolute; bottom: 6vh; left: 50%; transform: translateX(-50%); padding: 14px 26px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 14px; background: rgba(0, 0, 0, .7); color: #fff; font: 600 20px/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.pj-sound.hidden { display: none !important; }