/* Вертикальный оверлей TikTok LIVE (1080×1920). Прозрачный фон для OBS.
   Композиция idle занимает центральные ~72% высоты, печенька — главный объект
   примерно на 47% высоты. Всё масштабируется от viewport. */
:root{
  --gold:#f0cf6a; --gold2:#c8922e; --gold-deep:#7c4e12; --gold-light:#fff3c8;
  --ink:#2a2212; --cream:#fffaf0;
  --glow:rgba(255,206,110,.55);
}
*{margin:0;padding:0;box-sizing:border-box}

html,body{width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
body{background:transparent;color:#fff;
  font-family:'Trebuchet MS','Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
/* тёмный фон-предпросмотр только при ?preview=1; в OBS фон остаётся прозрачным */
body.preview{background:radial-gradient(120% 82% at 50% 40%,#140d09 0%,#0a0810 55%,#06070b 100%)}
/* ?bg=scene — нейтральный фон для скриншотов: имитирует композитинг поверх видео в OBS */
body.scene{background:linear-gradient(150deg,#4a4a52 0%,#2f2f36 60%,#3a343a 100%)}

/* ---------- атмосфера (полупрозрачные слои, прозрачны для OBS) ----------
   Гладкие радиальные градиенты без filter:blur (blur над нулевой альфой даёт кольца-банды).
   Над видео в OBS слои складываются в тёплую кинематографичную дымку. */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* глубина: мягкий тёплый радиал за печенькой */
.bg-base{position:absolute;inset:0;
  background:radial-gradient(105% 62% at 50% 46%,
    rgba(70,44,14,.34) 0%,rgba(44,28,10,.20) 34%,rgba(16,10,6,.10) 62%,transparent 82%)}

/* вертикальная подсветка центральной колонны */
.bg-column{position:absolute;left:50%;top:0;width:64vw;height:100%;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,196,100,.10) 30%,rgba(255,210,120,.13) 50%,rgba(255,196,100,.10) 70%,transparent);
  mix-blend-mode:screen;opacity:.7}

/* центральный золотой ореол — связывает заголовок, печеньку, карточку; дышит */
.bg-glow{position:absolute;left:50%;top:47%;width:96vw;height:60vh;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
    rgba(255,206,110,.46) 0%,rgba(255,176,70,.24) 38%,rgba(230,140,50,.10) 60%,transparent 78%);
  mix-blend-mode:screen;animation:breathe 7s ease-in-out infinite}

/* туманная дымка вокруг центра */
.bg-haze{position:absolute;left:50%;top:48%;width:130vw;height:78vh;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,190,110,.12),rgba(255,170,80,.05) 50%,transparent 74%);
  mix-blend-mode:screen;animation:breathe 11s ease-in-out infinite reverse}

/* размытые световые круги (гладкие радиалки, медленно плывут) */
.bg-blur-1,.bg-blur-2,.bg-blur-3{position:absolute;border-radius:50%;mix-blend-mode:screen}
.bg-blur-1{width:58vw;height:58vw;left:-16vw;top:8vh;
  background:radial-gradient(circle,rgba(255,184,80,.30),rgba(255,160,60,.08) 46%,transparent 66%);
  animation:drift1 21s ease-in-out infinite}
.bg-blur-2{width:52vw;height:52vw;right:-18vw;top:40vh;
  background:radial-gradient(circle,rgba(232,132,52,.26),rgba(210,110,44,.07) 46%,transparent 66%);
  animation:drift2 26s ease-in-out infinite}
.bg-blur-3{width:44vw;height:44vw;left:20vw;bottom:-12vh;
  background:radial-gradient(circle,rgba(255,150,64,.22),rgba(230,120,40,.06) 46%,transparent 66%);
  animation:drift1 31s ease-in-out infinite reverse}

/* виньетка по краям */
.bg-vignette{position:absolute;inset:0;
  background:radial-gradient(128% 96% at 50% 45%,transparent 54%,rgba(6,4,10,.30) 82%,rgba(4,3,8,.5) 100%)}

/* частицы/искры */
.bg-particles{position:absolute;inset:0}
.particle-dot{position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(255,232,173,.95),rgba(255,210,120,0));
  opacity:.55;animation:floatUp linear infinite}

/* в preview слои чуть заметнее */
body.preview .bg-glow{animation-duration:7s}
body.preview .bg-base{background:radial-gradient(105% 62% at 50% 46%,
  rgba(74,46,16,.55) 0%,rgba(40,26,10,.34) 36%,rgba(12,8,6,.16) 64%,transparent 84%)}

/* ---------- сетка ---------- */
.overlay-root{position:relative;z-index:2;width:100%;height:100%;
  display:grid;
  grid-template-rows: 5fr 26fr 33fr 6fr 9fr 16fr; /* status / header / cookie / темы / продолжение / footer */
  padding: 1.6vh 5vw;
}
.zone{min-width:0;min-height:0;display:flex;overflow:visible}

/* ---------- 1. status ---------- */
.status-zone{align-items:center;justify-content:space-between}
.status{display:flex;align-items:center;gap:1.4vw;font-size:clamp(12px,min(1.9vh,3.2vw),26px);font-weight:700;
  background:rgba(24,18,8,.55);padding:0.8vh 2.2vw;border-radius:40px;backdrop-filter:blur(6px);
  border:1px solid rgba(255,214,120,.28);box-shadow:0 2px 12px rgba(0,0,0,.35);
  max-width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status .dot{width:1.5vh;height:1.5vh;min-width:9px;min-height:9px;border-radius:50%;
  background:#8a8a8a;box-shadow:0 0 10px #8a8a8a;flex:0 0 auto}
.status.connected .dot{background:#5fd06a;box-shadow:0 0 14px #5fd06a}
.status.reconnecting .dot{background:#f0b23c;box-shadow:0 0 14px #f0b23c;animation:blink 1s infinite}
.status.test .dot{background:#5aa8ff;box-shadow:0 0 14px #5aa8ff}
.disclaimer{font-size:clamp(11px,min(1.6vh,2.9vw),22px);font-weight:700;color:#ffe9b0;
  background:rgba(24,18,8,.5);padding:0.7vh 2vw;border-radius:40px;max-width:46%;
  overflow:hidden;text-overflow:ellipsis;
  border:1px solid rgba(255,214,120,.28);white-space:nowrap;backdrop-filter:blur(6px)}

/* ---------- 2. header: заголовок + инструкция ---------- */
.header-zone{flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;gap:1.6vh;
  padding-bottom:0.4vh}
.header-title{font-size:clamp(32px,min(5.2vh,7.6vw),74px);font-weight:900;line-height:1.03;letter-spacing:.5px;
  max-width:92vw;text-wrap:balance;text-transform:uppercase;
  background:linear-gradient(180deg,#fff7de 0%,var(--gold) 62%,var(--gold2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 var(--gold-deep)) drop-shadow(0 8px 26px rgba(0,0,0,.55));
  transition:opacity .5s ease,transform .5s ease}
.header-title.swap{opacity:0;transform:translateY(-8px)}
.header-sub{font-size:clamp(18px,min(2.5vh,4.4vw),34px);font-weight:700;color:#fff;max-width:90vw;text-wrap:balance;
  text-shadow:0 2px 12px rgba(0,0,0,.7);line-height:1.2}
.header-sub b{color:var(--gold)}

/* ---------- 3. cookie ---------- */
.cookie-zone{align-items:center;justify-content:center;position:relative}
.cookie{position:relative;width:min(82vw,620px);height:min(37vh,480px)}
.cookie-whole{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cookie.idle{animation:float 5.2s ease-in-out infinite}
.cookie.wobble{animation:wobble .7s ease-in-out}
.cookie.shake{animation:shake .5s ease-in-out}

.cookie-whole svg{width:100%;height:100%;filter:drop-shadow(0 4vh 5vh rgba(0,0,0,.5))
  drop-shadow(0 0 3vh rgba(255,190,90,.35))}
.cookie.crack .cookie-whole{display:none}
.crackline{transition:opacity .25s ease}
.cookie.charge .crackline{opacity:1}

/* свечение за печенькой */
.glow{position:absolute;width:150%;height:150%;left:-25%;top:-25%;border-radius:50%;
  background:radial-gradient(circle,var(--glow),rgba(255,190,90,.12) 46%,transparent 70%);
  opacity:.5;animation:pulse 5.2s ease-in-out infinite}
.cookie.charge .glow{animation:charge 1s ease}
/* световая волна idle */
.wave{position:absolute;width:70%;height:70%;left:15%;top:15%;border-radius:50%;
  border:2px solid rgba(255,214,130,.6);opacity:0;transform:scale(.6);pointer-events:none}
.wave.go{animation:wave 1.4s ease-out}

/* половинки (только во время подарка) */
.half{position:absolute;top:0;height:100%;width:52%;display:block!important}
.half svg{width:100%;height:100%;filter:drop-shadow(0 1.5vh 2.5vh rgba(0,0,0,.5))}
.cookie:not(.crack) .half{display:none!important}
.left{left:0;transform-origin:right center}
.right{right:0;transform-origin:left center}
.cookie.crack .left{animation:openL .55s ease forwards}
.cookie.crack .right{animation:openR .55s ease forwards}

/* ---------- 4. темы ---------- */
.themes-zone{align-items:center;justify-content:center}
.themes{font-size:clamp(15px,min(2.1vh,3.7vw),28px);font-weight:800;letter-spacing:.4px;color:#ffe6a8;
  text-align:center;max-width:94vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* ---------- 5. продолжение ---------- */
.continuation-zone{align-items:center;justify-content:center}
.continuation{font-size:clamp(16px,1.9vh,26px);color:#ffdf9c;font-style:italic;text-align:center;
  max-width:92vw;text-wrap:balance;line-height:1.25;
  text-shadow:0 2px 8px rgba(0,0,0,.65);opacity:0;transition:opacity .6s ease}
.continuation.shown{opacity:1}

/* ---------- 6. footer ---------- */
.footer-zone{flex-direction:column;justify-content:flex-end;gap:1.4vh;padding-bottom:0.4vh}
.likebar-label{display:flex;justify-content:space-between;align-items:baseline;gap:2vw;flex-wrap:nowrap;
  font-size:clamp(14px,min(1.8vh,3.2vw),24px);font-weight:800;color:#ffe9b0;margin-bottom:0.9vh;
  text-shadow:0 2px 8px rgba(0,0,0,.6)}
.likebar-label #likeLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.likebar-label #likeVal{color:#fff;font-weight:700;flex:0 0 auto}
.likebar-track{width:100%;height:clamp(18px,2.4vh,30px);border-radius:20px;background:rgba(24,18,8,.6);
  overflow:hidden;border:1px solid rgba(255,220,140,.35);box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.likebar-fill{height:100%;width:0%;border-radius:20px;
  background:linear-gradient(90deg,var(--gold2),var(--gold),var(--gold-light));
  box-shadow:0 0 16px var(--glow);transition:width .6s ease}
.queue{display:flex;justify-content:center;align-items:center;gap:1.4vw;
  font-size:clamp(14px,min(1.8vh,3.1vw),24px);font-weight:700;color:#fff;
  background:rgba(24,18,8,.55);padding:1.1vh 3vw;border-radius:18px;
  border:1px solid rgba(255,214,120,.22);text-shadow:0 2px 8px rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.queue span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue .q-sep{color:var(--gold);opacity:.7;flex:0 0 auto}
.q-count{color:var(--gold);flex:0 0 auto}

/* ---------- fortune-card (абсолютный слой над печенькой) ---------- */
.fortune-card{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.85);
  z-index:5;display:none;flex-direction:column;
  width:min(88vw,860px);max-width:88vw;max-height:40vh;
  padding: clamp(16px,2.6vh,36px) clamp(18px,3.6vw,50px);
  background:linear-gradient(180deg,#fffdf6,#f4e9cf);
  border:2px solid rgba(200,146,46,.55);border-radius:clamp(16px,2.2vh,30px);
  box-shadow:0 2vh 6vh rgba(0,0,0,.55), inset 0 0 5vh rgba(255,220,140,.35);
  align-items:center;justify-content:center;text-align:center;opacity:0;overflow:hidden;
}
.fortune-card.shown{display:flex}
.fortune-card.in{animation:cardIn .45s cubic-bezier(.2,1.2,.3,1) forwards}
.fortune-card.out{animation:cardOut .35s ease forwards}
.fortune-text{font-size:clamp(20px,3.2vh,44px);line-height:1.3;color:var(--ink);font-weight:600;
  font-family:'Georgia','Times New Roman',serif;max-width:100%}
.fortune-card.tier-big{background:linear-gradient(180deg,#fff8e6,#ffe9b8);border-color:#e0a83c;
  box-shadow:0 2vh 6vh rgba(180,90,20,.5),inset 0 0 6vh rgba(255,190,90,.5)}
.fortune-card.tier-big .fortune-text{color:#5a2c0c}
.fortune-card.communal{background:linear-gradient(180deg,#f3f0ff,#e3dcff);border-color:#8a7ad0}
.fortune-card.communal .fortune-text{color:#2e2660}

/* конфетти */
.particle{position:fixed;top:-3vh;width:1vw;height:1.6vh;min-width:8px;min-height:12px;border-radius:2px;opacity:.95;z-index:60}

/* пауза анимаций (для скриншотов) */
.frozen *{animation-play-state:paused!important}

/* ---------- keyframes ---------- */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-1.6vh) rotate(1deg)}}
@keyframes wobble{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-.4vh) rotate(-2.5deg)}
  50%{transform:translateY(0) rotate(2.5deg)}75%{transform:translateY(-.3vh) rotate(-1.5deg)}}
@keyframes pulse{0%,100%{opacity:.42;transform:scale(1)}50%{opacity:.66;transform:scale(1.06)}}
@keyframes breathe{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
@keyframes charge{0%{opacity:.45;transform:scale(1)}60%{opacity:.95;transform:scale(1.25)}100%{opacity:.6;transform:scale(1.12)}}
@keyframes wave{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.35)}}
@keyframes shake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-1.2vh) rotate(-3deg)}40%{transform:translateX(1.2vh) rotate(3deg)}60%{transform:translateX(-0.9vh) rotate(-2deg)}80%{transform:translateX(0.9vh) rotate(2deg)}}
@keyframes openL{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(-16%,-6%) rotate(-16deg)}}
@keyframes openR{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(16%,-6%) rotate(16deg)}}
@keyframes cardIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes cardOut{to{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
@keyframes fall{to{transform:translateY(200vh) rotate(720deg);opacity:.5}}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(4vw,3vh)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-5vw,-3vh)}}
@keyframes floatUp{0%{transform:translateY(6vh);opacity:0}15%{opacity:.6}85%{opacity:.5}100%{transform:translateY(-92vh);opacity:0}}