:root{
  --bg:#fbfbfc;
  --card:#ffffff;
  --muted:#8b95a1;
  --accent:#7cc0ff;
  --accent-2:#ffd6a5;
  --glass: rgba(124,192,255,0.06);
  --soft-shadow: 0 6px 20px rgba(48,63,84,0.06);
  --radius:14px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#f7fbff 0%, #fbfbfc 100%);
  color:#22303f;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:80px;
}
.centered{max-width:540px;margin:64px auto;padding:28px;background:var(--card);border-radius:var(--radius);text-align:center;box-shadow:var(--soft-shadow)}
.hidden{display:none}
.stream-header{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 22px;gap:12px}
.stream-header h1{margin:0;font-size:20px;font-weight:600;color:#142029}
.stream-header .meta-right{display:flex;gap:12px;align-items:center}
.left-meta{flex:1}
.progress-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.progress-bar{flex:1;background:linear-gradient(90deg,#eef6ff,#fff7ef);height:10px;border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6)}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 600ms cubic-bezier(.2,.9,.2,1)}
.time-left{font-size:13px;color:var(--muted);min-width:84px;text-align:right}
.participants{font-size:14px;color:#374957;background:linear-gradient(90deg,#fff,#f6fbff);padding:8px 10px;border-radius:10px;box-shadow:var(--soft-shadow)}
#participants-count{color:#d32f2f;font-weight:700}
.video-container{flex:1;background:var(--glass);border-radius:12px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9}
.video-container iframe{width:100%;height:100%;border:0}
.player-area{display:flex;flex-direction:column;gap:18px;padding:18px}
.loading{padding:24px;color:var(--muted)}
.toggle-btn{
  background:linear-gradient(90deg,#fff,#f6fbff);
  border:1px solid rgba(34,48,63,0.06);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  color:#1f3a49;
  box-shadow:var(--soft-shadow);
}
@media(max-width:920px){
  .stream-header{padding:14px 16px;flex-wrap:wrap;margin-bottom:36px}
  .stream-header h1{font-size:18px}
  .participants{font-size:13px;padding:6px 8px}
  .player-area{padding:12px;margin-top:36px}
}
.react-btn{
  background:linear-gradient(90deg,#fff9fb,#fff1f6);
  border:1px solid rgba(179,43,74,0.08);
  padding:14px 16px;
  border-radius:14px;
  color:#b32b4a;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(179,43,74,0.06);
  font-size:20px;
  font-weight:600;
  min-width:56px;
  transition:transform 150ms ease, box-shadow 150ms ease;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.react-btn:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 14px 34px rgba(179,43,74,0.09)}
.react-btn:active{transform:scale(0.95)}
.reactions{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
@media(max-width:920px){
  .react-btn{
    padding:16px 18px;
    font-size:22px;
    min-width:64px;
  }
  .reactions{
    gap:8px;
  }
}
.emoji-float{position:absolute;font-size:20px;pointer-events:none;animation:floatUp 2000ms ease-out forwards;filter:drop-shadow(0 8px 22px rgba(34,48,63,0.08))}
@keyframes floatUp{
  0%{transform:translateY(0) scale(1);opacity:1}
  40%{transform:translateY(-40px) scale(1.1);opacity:1}
  100%{transform:translateY(-140px) scale(1.25);opacity:0}
}
.time-left.small{font-size:12px}
.participants.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{
  0%{transform:scale(1);box-shadow:0 6px 18px rgba(124,192,255,0.06)}
  50%{transform:scale(1.02);box-shadow:0 10px 30px rgba(124,192,255,0.08)}
  100%{transform:scale(1);box-shadow:0 6px 18px rgba(124,192,255,0.06)}
}
.time-left{white-space:nowrap}
.rating-thanks{font-size:13px;color:#2f4f68;margin-left:8px}
.hidden{display:none}