/* ===== БАЗА: структурные токены, reset, сцена, атмосфера, переходные эффекты ===== */
:root{
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --chrome-t:env(safe-area-inset-top,0px);   /* уровень chrome-ряда Telegram (JS уточняет в фуллскрине) */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* запрет выделения/копирования текста пользователями (поля ввода и админка — исключение) */
body{-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable],.adm-overlay,.adm-overlay *{-webkit-user-select:text;-ms-user-select:text;user-select:text;-webkit-touch-callout:default}
html,body{height:100%}
body{background:var(--bg);font-family:'Manrope',sans-serif;color:var(--bone);
  overflow:hidden;overscroll-behavior:none;touch-action:manipulation;user-select:none}

.stage{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden}

/* фон */
.bg{position:absolute;inset:0;z-index:0;transition:background .35s ease;
  background:
    radial-gradient(ellipse 90% 60% at 60% 30%, var(--glow-1) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 20% 90%, var(--glow-2) 0%, transparent 55%),
    linear-gradient(180deg,#0b0a0c,#070608)}
.grid{position:absolute;inset:0;z-index:0;opacity:.08;
  background-image:linear-gradient(var(--neon-soft) 1px,transparent 1px),linear-gradient(90deg,var(--neon-soft) 1px,transparent 1px);
  background-size:40px 40px;mask-image:radial-gradient(ellipse 85% 70% at 50% 40%,#000 25%,transparent 75%)}
.scan{position:absolute;inset:0;pointer-events:none;opacity:.25;z-index:40;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 3px)}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:41;box-shadow:inset 0 0 160px 30px rgba(0,0,0,.85)}
.corner{position:absolute;width:20px;height:20px;border:1.5px solid var(--neon-soft);opacity:.45;z-index:42;transition:border-color .35s ease}
.corner.tl{top:calc(12px + var(--safe-t));left:12px;border-right:0;border-bottom:0}
.corner.tr{top:calc(12px + var(--safe-t));right:12px;border-left:0;border-bottom:0}
.corner.bl{bottom:calc(12px + var(--safe-b));left:12px;border-right:0;border-top:0}
.corner.br{bottom:calc(12px + var(--safe-b));right:12px;border-left:0;border-top:0}

/* ===== ЕДИНАЯ СЦЕНА ПЕРСОНАЖА (всегда на экране, сквозная) ===== */
.char-stage{position:absolute;inset:0;z-index:1;overflow:hidden;background:#070608}
.char-stage #charStatic,
.char-stage #charIdle,
.char-stage #transVid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
  transition:opacity .35s ease;will-change:opacity}
/* стек (низ→верх): #charPh(z0) · #charStatic(z1, PNG-база) · #charIdle(z2, idle-петля) · #transVid(z3, переход) */
.char-stage #charStatic{z-index:1;opacity:1;filter:drop-shadow(0 0 50px color-mix(in srgb, var(--neon) 18%, transparent))}
.char-stage #charIdle{z-index:2;opacity:0;background:transparent;filter:drop-shadow(0 0 50px color-mix(in srgb, var(--neon) 18%, transparent))}
.char-stage #transVid{z-index:3;opacity:0;background:#070608}
/* запасной плейсхолдер, если png не загрузился */
.char-ph{position:absolute;inset:0;z-index:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 70% 60% at 50% 42%,color-mix(in srgb, var(--bordeaux) 18%, transparent),transparent 70%);
  animation:float 6s ease-in-out infinite}
.char-ph.on{display:flex}
.char-ph .ghost{font-family:'Cormorant Garamond',serif;font-size:120px;color:color-mix(in srgb, var(--neon) 12%, transparent);font-weight:600}
.char-ph .note{margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.18em;color:var(--muted);text-align:center;line-height:1.8}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* читаемость текста поверх full-bleed персонажа */
.scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.55) 0%,transparent 22%,transparent 42%,rgba(8,8,10,.85) 76%,#08080a 100%)}

/* неон-вспышка перехода */
.flash{position:absolute;inset:0;z-index:35;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--neon) 35%, transparent),transparent)}
.flash.go{animation:sweep .55s ease}
@keyframes sweep{0%{opacity:0;transform:translateX(-60%)}40%{opacity:1}100%{opacity:0;transform:translateX(60%)}}

.toast{position:absolute;left:50%;bottom:calc(60px + var(--safe-b));transform:translateX(-50%) translateY(16px);opacity:0;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;color:var(--bone);
  background:color-mix(in srgb, var(--bordeaux) 90%, transparent);border:1px solid var(--neon);padding:10px 18px;z-index:50;transition:.3s;pointer-events:none;max-width:80%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:opacity .2s!important}
}