/* «Свет в окне»: петербургский двор-колодец в тумане. Серые от графита до неба, серебро — только у активной кромки. */

@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/ysabeau-office-cyrillic-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/ysabeau-office-latin-normal.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;
}

:root {
  color-scheme: dark;
  --ink: #0e1013;
  --night: #14171b;
  --stone: #23282e;
  --line: #646c75;
  --fog: #868e97;
  --mist: #9ea6ae;
  --pale: #c9cfd5;
  --silver: #e8ebee;
  --glow: #dfe7ee;
  --danger: #ebb8b0;
  --scrim: 12, 14, 17;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --radius: 4px;
  --gutter: clamp(20px, 5.5vw, 88px);
  --font: 'Ysabeau Office', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}


* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--night);
  color: var(--pale);
  font: 400 1.0625rem/1.5 var(--font);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
::selection { background: color-mix(in srgb, var(--fog) 45%, var(--night)); color: var(--silver); }
input { caret-color: var(--silver); }
:focus-visible { outline: 2px solid var(--silver); outline-offset: 3px; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sprite { position: absolute; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- двор ---------- */
.scene { position: fixed; inset: 0; overflow: hidden; background: var(--night); }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fog { position: absolute; inset: -25%; pointer-events: none; will-change: transform; }
.fog-a {
  background:
    radial-gradient(34% 26% at 64% 30%, color-mix(in srgb, var(--pale) 17%, transparent), transparent 70%),
    radial-gradient(26% 20% at 36% 58%, color-mix(in srgb, var(--mist) 9%, transparent), transparent 70%);
  animation: drift-a 80s ease-in-out infinite alternate;
}
.fog-b {
  background:
    radial-gradient(30% 22% at 48% 40%, color-mix(in srgb, var(--pale) 11%, transparent), transparent 70%),
    radial-gradient(40% 30% at 74% 66%, color-mix(in srgb, var(--fog) 8%, transparent), transparent 70%);
  animation: drift-b 110s ease-in-out infinite alternate;
}
@keyframes drift-a { from { transform: translate3d(-4%, 1.5%, 0); } to { transform: translate3d(5%, -2.5%, 0); } }
@keyframes drift-b { from { transform: translate3d(4%, -1%, 0) scale(1.05); } to { transform: translate3d(-5%, 2%, 0) scale(1); } }
/* тёмная стена снизу слева, на ней текст */
.scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(115% 80% at 0% 100%, rgba(var(--scrim), 0.9) 0%, rgba(var(--scrim), 0.55) 38%, transparent 66%);
}
.who-label {
  position: absolute;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(var(--scrim), 0.72);
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--pale);
  white-space: nowrap;
  transition: color 600ms ease, opacity 600ms ease;
}
.who-label.off { color: var(--mist); }

/* ---------- общие элементы ---------- */
.wordmark { margin: 0; font-weight: 300; color: var(--silver); letter-spacing: -0.025em; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius);
  background: var(--silver);
  color: var(--night);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { background: var(--stone); color: var(--mist); cursor: default; transform: none; }
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--mist);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 160ms ease;
}
.link svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover { background: #f5f6f8; }
  .link:hover { color: var(--silver); }
}
.icon { width: 24px; height: 24px; fill: currentColor; flex: none; }

/* ---------- вход ---------- */
.entry {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) var(--gutter) max(8vh, calc(env(safe-area-inset-bottom) + 24px));
}
.entry .wordmark { font-size: clamp(2.875rem, 7.2vw, 5.25rem); line-height: 1; margin-bottom: 18px; }
.lead span { display: block; }
.lead { margin: 0 0 34px; max-width: 34ch; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.4; color: var(--pale); }
.login { display: grid; gap: 18px; width: 100%; max-width: 360px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 0.9375rem; color: var(--mist); }
.input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16, 19, 22, 0.78);
  color: var(--silver);
  font: inherit;
  font-size: 1.0625rem;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.input:focus { outline: none; border-color: var(--silver); background: rgba(16, 19, 22, 0.92); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.pass { position: relative; }
.pass .input { padding-right: 52px; }
.reveal {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--mist);
  cursor: pointer;
}
.reveal .icon { width: 22px; height: 22px; }
.reveal[aria-pressed="true"] { color: var(--silver); }
.error { margin: -4px 0 0; color: var(--danger); font-size: 0.9375rem; line-height: 1.4; }
.login .btn { margin-top: 6px; }
.hint { margin: 2px 0 0; max-width: 36ch; color: var(--mist); font-size: 0.875rem; line-height: 1.45; }

/* ---------- лобби ---------- */
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 28px;
  background: linear-gradient(to bottom, rgba(var(--scrim), 0.6), rgba(var(--scrim), 0));
}
.top .wordmark { font-size: 1.1875rem; font-weight: 400; letter-spacing: -0.005em; }
.lobby {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  max-width: calc(500px + var(--gutter));
  max-height: 100dvh;
  overflow-y: auto;
  padding: 88px var(--gutter) max(7vh, calc(env(safe-area-inset-bottom) + 24px));
  scrollbar-width: none;
}
.film { margin: 0 0 14px; font-size: clamp(1.875rem, 3.6vw, 2.625rem); font-weight: 400; line-height: 1.08; color: var(--silver); letter-spacing: -0.015em; text-wrap: balance; }
.state { margin: 0 0 6px; color: var(--pale); font-size: 1.0625rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.together { margin: 0 0 26px; color: var(--mist); font-size: 0.9375rem; line-height: 1.45; }
.notes { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; max-width: 40ch; color: var(--mist); font-size: 0.875rem; line-height: 1.45; }
.pick { display: grid; gap: 8px; margin-top: 22px; max-width: 360px; font-size: 0.9375rem; color: var(--mist); }
.select {
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16, 19, 22, 0.8);
  color: var(--silver);
  font: inherit;
  font-size: 1.0625rem;
}
.select:focus { outline: none; border-color: var(--silver); }

/* ---------- плеер ---------- */
.stage { position: fixed; inset: 0; z-index: 5; background: var(--ink); visibility: hidden; overflow: hidden; touch-action: manipulation; }
body[data-view="player"] .stage { visibility: visible; }
body[data-view="player"] .lobby,
body[data-view="player"] .top { display: none; }
body.scene-off .scene { display: none; }
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.stage video::cue {
  font-family: var(--font);
  font-size: clamp(1.125rem, 2.6vw, 1.875rem);
  line-height: 1.3;
  color: var(--silver);
  background: rgba(10, 12, 14, 0.72);
}
.stage-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(70% 70% at 50% 45%, var(--glow), var(--mist) 70%, var(--fog)); }

.chrome { position: absolute; inset: 0; pointer-events: none; transition: opacity 150ms ease; }
.chrome > * { pointer-events: auto; }
.stage.idle .chrome { opacity: 0; transition-duration: 450ms; }
.stage.idle .chrome > * { pointer-events: none; }
.stage.idle { cursor: none; }
.stage.flying .chrome, .stage.flying .prestart, .stage.flying .subs, .stage.flying .toast { opacity: 0; transition: none; }
.prestart { transition: opacity 300ms ease; }

.p-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 40px max(18px, env(safe-area-inset-left));
  background: linear-gradient(to bottom, rgba(var(--scrim), 0.78), rgba(var(--scrim), 0));
}
.p-title { margin: 0; padding-top: 2px; color: var(--pale); font-size: 0.9375rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-side { display: flex; align-items: center; gap: 16px; flex: none; }
.presence { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; margin: 0; padding: 0; list-style: none; color: var(--pale); font-size: 0.875rem; }
.presence li { display: flex; align-items: center; gap: 7px; white-space: nowrap; transition: color 400ms ease; }
.presence li.off { color: var(--fog); }
.presence .note { color: var(--mist); }
.pane { width: 14px; height: 20px; flex: none; overflow: visible; }
.pane .frame { fill: none; stroke: currentColor; stroke-width: 1.2; }
.pane .sill { stroke: currentColor; stroke-width: 1.4; }
.pane .mull { fill: none; stroke: currentColor; stroke-width: 1; transition: stroke 600ms var(--ease-out); }
.pane .glass { fill: var(--glow); opacity: 0; transition: opacity 600ms var(--ease-out); }
.presence li.on .glass { opacity: 1; }
.presence li.on .mull { stroke: var(--ink); }
.presence li.on .pane { filter: drop-shadow(0 0 5px rgba(223, 231, 238, 0.55)); }
.p-select { height: 36px; font-size: 0.875rem; max-width: 220px; }

.controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 56px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: linear-gradient(to top, rgba(var(--scrim), 0.9) 0%, rgba(var(--scrim), 0.62) 45%, rgba(var(--scrim), 0));
}
.timeline { position: relative; height: 28px; display: flex; align-items: center; margin: 0 6px; }
.track { position: absolute; left: 0; right: 0; height: 5px; border-radius: 3px; background: rgba(232, 235, 238, 0.2); overflow: hidden; transform: scaleY(0.6); transition: transform 140ms var(--ease-out); }
.timeline:hover .track, .timeline.scrub .track, .timeline:focus-within .track { transform: scaleY(1); }
.buffered, .played { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); }
.buffered { background: rgba(232, 235, 238, 0.3); }
.played { background: var(--silver); }
.seek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.seek::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.seek::-moz-range-track { height: 100%; background: transparent; }
.seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--silver);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 140ms ease;
}
.seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--silver); opacity: 0; transition: opacity 140ms ease; }
.timeline:hover .seek::-webkit-slider-thumb, .timeline.scrub .seek::-webkit-slider-thumb, .seek:focus-visible::-webkit-slider-thumb { opacity: 1; }
.timeline:hover .seek::-moz-range-thumb, .timeline.scrub .seek::-moz-range-thumb, .seek:focus-visible::-moz-range-thumb { opacity: 1; }
.seek:focus-visible { outline: none; }
.timeline:has(.seek:focus-visible) .track { outline: 2px solid var(--silver); outline-offset: 4px; }
.tip {
  position: absolute;
  bottom: 30px;
  left: 0;
  padding: 4px 8px;
  border-radius: var(--radius);
  background: rgba(16, 19, 22, 0.92);
  color: var(--silver);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 120ms ease;
}
.timeline:hover .tip, .timeline.scrub .tip { opacity: 1; }

.bar { display: flex; align-items: center; gap: 2px; }
.ibtn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--pale);
  cursor: pointer;
  transition: transform 140ms var(--ease-out), color 160ms ease, background-color 160ms ease;
}
.ibtn:active { transform: scale(0.94); }
.ibtn[aria-pressed="true"] { color: var(--silver); background: rgba(232, 235, 238, 0.1); }
@media (hover: hover) and (pointer: fine) {
  .ibtn:hover { color: var(--silver); background: rgba(232, 235, 238, 0.08); }
}
.time { margin: 0 10px; color: var(--pale); font-size: 0.9375rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.time .of { color: var(--mist); }
.spacer { flex: 1; }
.vol { width: 88px; height: 28px; margin: 0 8px 0 2px; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.vol::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--pale) var(--v, 100%), rgba(232, 235, 238, 0.22) var(--v, 100%)); }
.vol::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(232, 235, 238, 0.22); }
.vol::-moz-range-progress { height: 3px; background: var(--pale); }
.vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: var(--silver); border: 0; }
.vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--silver); border: 0; }

.big-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 24px 0 20px;
  border: 1px solid rgba(232, 235, 238, 0.24);
  border-radius: var(--radius);
  background: rgba(var(--scrim), 0.88);
  color: var(--silver);
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 140ms var(--ease-out), background-color 160ms ease;
}
.big-play .icon { width: 28px; height: 28px; }
.big-play:active { transform: translate(-50%, -50%) scale(0.96); }

/* общие события: одна и та же карточка у обоих */
.toast, .notice {
  position: absolute;
  left: 50%;
  max-width: min(560px, calc(100% - 32px));
  padding: 10px 16px;
  border-radius: var(--radius);
  background: rgba(var(--scrim), 0.86);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  color: var(--silver);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}
.toast {
  top: max(70px, calc(env(safe-area-inset-top) + 56px));
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.notice { bottom: 132px; transform: translateX(-50%); border: 1px solid rgba(232, 235, 238, 0.14); }
.stage.idle .notice { opacity: 1; }
.chrome .notice { pointer-events: none; }

.subs {
  position: absolute;
  left: 50%;
  bottom: max(6vh, calc(env(safe-area-inset-bottom) + 24px));
  display: grid;
  justify-items: center;
  gap: 4px;
  width: min(92%, 960px);
  transform: translateX(-50%);
  pointer-events: none;
  text-align: center;
  transition: bottom 200ms var(--ease-out);
}
.stage:not(.idle) .subs { bottom: max(124px, calc(env(safe-area-inset-bottom) + 112px)); }
.subs span {
  padding: 2px 10px;
  border-radius: 3px;
  background: rgba(10, 12, 14, 0.66);
  color: var(--silver);
  font-size: clamp(1.125rem, 2.5vw, 1.875rem);
  line-height: 1.32;
  white-space: pre-line;
  text-wrap: balance;
}
/* до первого старта: туман зала вместо чёрного кадра */
body.prestart .stage { background: radial-gradient(120% 90% at 62% 30%, color-mix(in srgb, var(--fog) 55%, var(--night)) 0%, var(--stone) 45%, var(--night) 100%); }
.stage video { transition: opacity 600ms ease; }
body.prestart .stage video { opacity: 0; }
.prestart {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: calc(520px + var(--gutter));
  padding: 0 var(--gutter) max(17vh, calc(env(safe-area-inset-bottom) + 132px));
  pointer-events: none; /* под блоком — контролы плеера */
}
.pre-film { margin: 0 0 12px; color: var(--silver); font-size: clamp(1.875rem, 3.6vw, 2.625rem); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.pre-note { margin: 0 0 24px; color: var(--pale); }
.prestart .btn { pointer-events: auto; }
.frame-overlay { position: fixed; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
.frame-overlay .sash { fill: #1b1f24; }
.frame-overlay .mull { fill: none; stroke: #14171b; stroke-linecap: butt; }
.countdown { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: rgba(var(--scrim), 0.5); pointer-events: none; }
.count-num { font-size: clamp(5rem, 15vw, 9rem); font-weight: 200; line-height: 1; color: var(--silver); font-variant-numeric: tabular-nums; }
.count-note { color: var(--pale); font-size: 1.0625rem; }

/* телефон лёжа с блокировкой поворота: поворачиваем сам плеер */
body.rotated .stage { inset: auto; top: 0; left: 0; width: 100dvh; height: 100dvw; transform-origin: 0 0; transform: translateX(100dvw) rotate(90deg); }

@media (max-width: 600px) {
  .time { margin: 0 4px; font-size: 0.875rem; }
  #backBtn, #fwdBtn { display: none; }
  .presence { font-size: 0.8125rem; gap: 4px 12px; }
  .p-title { display: none; }
  .notice { bottom: 120px; }
}
@media (pointer: coarse) {
  .vol { display: none; }
}
/* телефон вертикально: кадр узкой полосой по центру, кнопку — в пустую полосу ниже */
@media (pointer: coarse) and (orientation: portrait) {
  .big-play { top: 70%; }
}

@media (prefers-reduced-motion: reduce) {
  .fog { animation: none; }
  .toast, .toast.show { transition: opacity 160ms ease; transform: translate(-50%, 0); }
  .btn, .ibtn, .big-play { transition: background-color 160ms ease, color 160ms ease; }
  .btn:active, .ibtn:active { transform: none; }
  .big-play:active { transform: translate(-50%, -50%); }
}