:root{
  --bg:#000; --fg:#fff; --muted:#b9bdce; --line:rgba(255,255,255,.14);
  --accent:#1d9e75; --accent-ink:#04342c; --pink:#ed4d6e; --violet:#7c5cff;
  --chat-bg:rgba(8,8,14,.55);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  overscroll-behavior:none}
.hidden{display:none!important}
button{font-family:inherit}

.live-app{position:fixed;inset:0;display:flex;flex-direction:column;background:#000}

/* ---- horní lišta ---- */
.topbar{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}
.topbar > *{pointer-events:auto}
.leave-btn{background:rgba(0,0,0,.42);color:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 14px;font-size:14px;font-weight:700;backdrop-filter:blur(8px)}
.brand{font-weight:900;letter-spacing:.02em;font-size:16px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.brand span{color:var(--pink)}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:rgba(0,0,0,.42);color:#fff;font-size:18px;backdrop-filter:blur(8px)}

/* ---- feed: vertikální swipe, jedna roomka = jedna stránka ---- */
.feed{flex:1;min-height:0;overflow-y:auto;scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain;scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}

.room{position:relative;height:100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;
  background:#05050a;overflow:hidden}
.room-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.room-poster{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.5) saturate(1.1)}
.room-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 26%,rgba(0,0,0,0) 56%,rgba(0,0,0,.78))}

/* živě + diváci */
.room-badges{position:absolute;top:calc(env(safe-area-inset-top,0px) + 64px);left:12px;right:12px;
  display:flex;align-items:center;gap:8px;z-index:6}
.badge-live{background:linear-gradient(135deg,var(--pink),#ff8a5b);color:#fff;font-weight:900;
  font-size:12px;letter-spacing:.04em;padding:5px 11px;border-radius:999px;display:flex;align-items:center;gap:6px}
.badge-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.badge-count{background:rgba(0,0,0,.45);color:#fff;font-weight:700;font-size:12px;padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px)}

/* hostitel info vlevo dole */
.room-host{position:absolute;left:12px;right:96px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:6;display:flex;align-items:center;gap:10px}
.room-host img,.room-host .ava{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.8);background:var(--violet);display:grid;place-items:center;font-weight:900;font-size:18px}
.room-host .who b{display:block;font-size:16px;text-shadow:0 2px 6px #000}
.room-host .who span{display:block;font-size:13px;color:#dfe2f0;text-shadow:0 2px 6px #000}

/* boční akce (like) */
.room-actions{position:absolute;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 96px);z-index:6;display:flex;flex-direction:column;gap:18px;align-items:center}
.act{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;color:#fff}
.act .ic{width:50px;height:50px;border-radius:50%;background:rgba(0,0,0,.42);display:grid;place-items:center;font-size:24px;backdrop-filter:blur(6px)}
.act b{font-size:12px;font-weight:700;text-shadow:0 2px 5px #000}
.act.liked .ic{background:rgba(237,77,110,.9)}

/* ---- náhled: výzva ke vstupu (žádná interakce dokud nevstoupíš) ---- */
.enter-hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 168px);z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.enter-cta{pointer-events:auto;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-weight:800;font-size:15px;padding:12px 22px;border-radius:999px;backdrop-filter:blur(8px);
  animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.enter-sub{pointer-events:none;font-size:12px;color:#cfd2e6;text-shadow:0 2px 5px #000}
.tap-layer{position:absolute;inset:0;z-index:5}

/* zvuk povolit (když autoplay se zvukem selže) */
.sound-nudge{position:absolute;top:calc(env(safe-area-inset-top,0px) + 110px);left:50%;transform:translateX(-50%);
  z-index:8;background:rgba(0,0,0,.55);border:1px solid var(--line);color:#fff;border-radius:999px;
  padding:8px 14px;font-size:13px;font-weight:700;backdrop-filter:blur(8px)}

/* ---- vstoupeno: chat ---- */
.room.entered .enter-hint{display:none}
.room.entered .tap-layer{display:none}
.chat-wrap{position:absolute;left:0;right:0;bottom:0;z-index:9;display:none;flex-direction:column;
  max-height:54%;padding:0 10px calc(env(safe-area-inset-bottom,0px) + 10px)}
.room.entered .chat-wrap{display:flex}
.joined-pill{align-self:flex-start;margin:0 0 6px;background:rgba(29,158,117,.9);color:#fff;font-weight:800;
  font-size:12px;padding:5px 11px;border-radius:999px}
.chat-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;
  padding:6px 0;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0),#000 14%)}
.chat-list::-webkit-scrollbar{display:none}
.msg{align-self:flex-start;max-width:88%;background:var(--chat-bg);border-radius:14px;padding:6px 10px;
  backdrop-filter:blur(6px);font-size:14px;line-height:1.3}
.msg b{color:#8ec5ff;margin-right:6px;font-size:13px}
.msg.me b{color:#9fe1cb}
.chat-input{display:flex;gap:8px;align-items:center;margin-top:6px;background:rgba(0,0,0,.4);
  border:1px solid var(--line);border-radius:16px;padding:6px;backdrop-filter:blur(10px)}
.chat-input input{flex:1;min-width:0;height:44px;background:transparent;border:0;color:#fff;font-size:16px;padding:0 8px}
.chat-input input::placeholder{color:#9aa0bb}
.chat-input input:focus{outline:none}
.send-btn{height:44px;padding:0 16px;border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-weight:900;font-size:15px}
.send-btn:disabled{opacity:.5}
.login-note{background:rgba(0,0,0,.5);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;font-size:14px;color:#e7e9f5}
.login-note a{color:#8ec5ff;font-weight:800}

/* ---- stavové obrazovky ---- */
.state-screen{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#05050a;text-align:center;padding:24px}
.state-screen .big{font-size:54px}
.state-screen p{margin:0;color:var(--muted);font-size:16px}
.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:12px;padding:12px 20px;font-weight:900;font-size:15px}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid rgba(255,255,255,.18);border-top-color:#fff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* desktop: vycentruj na portrétový sloupec */
@media (min-width:821px){
  .room{max-width:min(460px,100%);margin:0 auto}
  .feed{background:#0a0a0f}
}

/* tlačítko Spustit vlastní live (vede do PWA na založení) */
/* tlačítko Spustit vlastní live (vede do PWA na založení) */
.golive-btn{background:linear-gradient(135deg,var(--pink),#ff7a59);color:#fff;border:0;border-radius:999px;
  padding:9px 14px;font-size:14px;font-weight:800;box-shadow:0 6px 18px rgba(237,77,110,.4);white-space:nowrap}
.topbar{position:absolute;top:0;left:0;right:0}
.topbar .brand{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;white-space:nowrap}
.topbar-right{display:flex;align-items:center;gap:8px}
@media (max-width:600px){
  .topbar .brand{display:none}
  .golive-btn{padding:9px 12px;font-size:13px}
  .leave-btn{padding:9px 11px;font-size:13px}
  .topbar-right{gap:6px}
}
.vid-status.is-error::before{display:none}
.vid-status.is-error{color:#ffb3b3}

/* v1.0.5 – oprava live kliků, dárků, host oken a žádostí */
.room-actions{z-index:14;pointer-events:auto}
.act{cursor:pointer;touch-action:manipulation}
.chat-wrap{pointer-events:none}
.chat-wrap .joined-pill,
.chat-wrap .chat-list,
.chat-wrap .chat-input,
.chat-wrap .login-note,
.chat-wrap .guest-request-panel,
.chat-wrap .host-request-strip{pointer-events:auto}
.guest-windows{position:absolute;right:10px;top:calc(env(safe-area-inset-top,0px) + 112px);z-index:7;display:flex;flex-direction:column;gap:8px;width:118px;pointer-events:none}
.guest-window{height:134px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.24);background:rgba(0,0,0,.42);box-shadow:0 16px 36px rgba(0,0,0,.45);backdrop-filter:blur(8px);position:relative}
.guest-window video{width:100%;height:100%;object-fit:cover;background:#000;display:block}
.guest-head{position:absolute;left:6px;right:6px;top:6px;z-index:2;display:flex;flex-direction:column;gap:1px;text-shadow:0 2px 6px #000;font-size:11px;line-height:1.1}
.guest-head b{font-size:12px}.guest-head span{color:#e8ebff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guest-fallback{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px;text-align:center;color:#e9ecff;font-size:11px}
.guest-fallback img,.guest-initial{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.65);background:var(--violet);display:grid;place-items:center;font-weight:900;font-size:20px}
.guest-plus{font-size:26px;line-height:1}.guest-window.empty{opacity:.88;border-style:dashed}
.guest-request-panel,.host-request-strip{margin:0 0 8px;background:rgba(5,5,12,.72);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:9px 10px;backdrop-filter:blur(10px);display:flex;align-items:flex-start;gap:7px;flex-wrap:wrap;font-size:13px;line-height:1.25;box-shadow:0 8px 22px rgba(0,0,0,.32)}
.guest-request-panel b,.host-request-strip>b{width:100%;font-size:13px}.guest-request-panel span{color:#dfe2f0}.guest-request-panel.ok{background:rgba(29,158,117,.72);font-weight:800}.guest-request-panel a{color:#8ec5ff;font-weight:800}.guest-request-panel button,.host-request-strip button{border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:900;padding:7px 10px}.host-request-strip.empty{opacity:.84}.host-request-item{display:flex;align-items:center;gap:6px;width:100%;background:rgba(255,255,255,.07);border-radius:12px;padding:6px}.host-request-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.host-request-item button:last-child{background:#65222d;color:#ffd9df}
.float-heart{position:absolute;right:26px;bottom:calc(env(safe-area-inset-bottom,0px) + 142px);z-index:20;color:#ff5d7d;font-size:38px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));animation:floatLike .85s ease-out forwards;pointer-events:none}
@keyframes floatLike{0%{transform:translateY(0) scale(.75);opacity:0}18%{opacity:1}100%{transform:translateY(-88px) scale(1.35);opacity:0}}
@media (max-width:600px){.guest-windows{width:104px;top:calc(env(safe-area-inset-top,0px) + 92px)}.guest-window{height:118px;border-radius:16px}.guest-fallback img,.guest-initial{width:40px;height:40px}.guest-request-panel,.host-request-strip{font-size:12px;padding:8px}.room-actions{bottom:calc(env(safe-area-inset-bottom,0px) + 88px)}}


/* v1.0.5 – dárek v live webu + robustnější srdíčka */
.room-actions{z-index:24!important;pointer-events:auto!important}.act{pointer-events:auto!important;touch-action:manipulation!important;cursor:pointer}.act .ic{box-shadow:0 8px 18px rgba(0,0,0,.34)}
.gift-panel{position:absolute;inset:0;z-index:28;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.35);padding:12px;backdrop-filter:blur(2px)}
.gift-card{width:min(440px,100%);max-height:68%;overflow:auto;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:#10111b;box-shadow:0 -20px 60px rgba(0,0,0,.62);padding:12px;color:#fff}
.gift-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.gift-head b{font-size:16px}.gift-head button{border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:7px 10px;font-weight:900}
.gift-targets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px}.gift-target{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;border-radius:13px;padding:8px 6px;font-weight:900}.gift-target small{display:block;color:#bfc5db;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gift-target.active{background:linear-gradient(135deg,#1d9e75,#4bd6a8);color:#042f29;border-color:transparent}.gift-target.active small{color:#063f35}
.gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.gift-grid button{border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(255,255,255,.07);color:#fff;padding:9px 6px;display:flex;flex-direction:column;align-items:center;gap:3px}.gift-grid button span{font-size:24px}.gift-grid button b{font-size:12px}.gift-grid button small{font-size:11px;color:#c9cde0}.gift-grid button:disabled{opacity:.55}.gift-status{min-height:20px;color:#9fe1cb;font-weight:800;margin-top:9px;font-size:13px;text-align:center}
@media(max-width:600px){.gift-card{max-height:72%;border-radius:20px}.gift-targets{grid-template-columns:1fr}.gift-grid{grid-template-columns:repeat(3,1fr)}.room-actions{bottom:calc(env(safe-area-inset-bottom,0px) + 82px)!important}}

/* v3.4 / 1.0.6 – live web: TTS, guest audio a schování host oken při médiích */
.room.hide-guests-during-media .guest-windows{display:none!important}
.room.media-host-active.hide-guests-during-media .room-video{object-fit:contain;background:#000}
.chat-tts-toggle{align-self:flex-start;margin:0 0 7px;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 12px;font-weight:900;font-size:12px;backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(0,0,0,.28)}
.chat-tts-toggle.active{background:linear-gradient(135deg,#1d9e75,#4bd6a8);color:#04342c;border-color:transparent}
.guest-video{background:#000}
@media(max-width:600px){.chat-tts-toggle{font-size:12px;padding:7px 10px}}