/* v5 — real layered backdrop glass, cinematic rose, conservative mobile rendering. */
:root {
  --bg:#0c0913; --txt:#f9f2fa; --muted:#c0b4ca; --rose:#fac7d8;
  --violet:#c3b0f3; --line:rgba(249,219,249,.17);
  --premium-outline:rgba(255,233,249,.21);
  --premium-glass:rgba(36,25,46,.46);
  --premium-shadow:0 20px 42px rgba(5,3,11,.30),inset 0 1px 0 rgba(255,255,255,.105);
}
html { background:#0c0913; }
body {
  background: radial-gradient(ellipse at 54% 7%,#1c1125 0%,transparent 53%),#0c0913;
  color:var(--txt); isolation:isolate;
  -webkit-font-smoothing:antialiased;
}
/* Static light sources give the blur something to refract without costly animated filters. */
.ambient-stage{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none;contain:strict}
.ambient-glow{position:absolute;display:block;transform:translateZ(0);border-radius:50%;opacity:.9}
.glow-rose{width:82vw;max-width:680px;height:550px;top:-185px;right:-37vw;background:radial-gradient(ellipse at center,rgba(232,112,169,.33) 0%,rgba(177,74,127,.17) 33%,transparent 72%)}
.glow-violet{width:110vw;max-width:850px;height:630px;top:32vh;left:-53vw;background:radial-gradient(ellipse at center,rgba(115,91,208,.30),rgba(88,60,141,.13) 40%,transparent 74%)}
.glow-champagne{width:105vw;max-width:850px;height:570px;top:90vh;right:-45vw;background:radial-gradient(ellipse at center,rgba(200,119,148,.15),transparent 73%)}
.ambient-arc{position:absolute;width:800px;height:800px;top:-535px;left:calc(50% - 400px);border-radius:50%;border:1px solid rgba(255,211,232,.095);box-shadow:0 0 0 70px rgba(255,215,248,.008),0 0 0 160px rgba(255,215,248,.006)}
body::before{display:none}
.page{position:relative;z-index:1;max-width:1030px;padding-top:15px}
.top{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;
  background:linear-gradient(130deg,rgba(81,53,79,.31),rgba(28,24,42,.46) 65%,rgba(51,36,66,.31));
  border:1px solid var(--premium-outline);border-radius:22px;
  box-shadow:var(--premium-shadow);padding:12px 15px;margin-bottom:24px;
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
}
.top:after{position:absolute;content:"";pointer-events:none;inset:0 10% auto;height:1px;background:linear-gradient(90deg,transparent,#fce8fc66,transparent)}
.brand{flex:1;min-width:0}.brand h1{font-size:20px;letter-spacing:-.35px;font-weight:760;line-height:1.4}.brand p{color:#d9c6d6;font-size:11px;letter-spacing:.05px}
.logo{width:48px;height:48px;border-radius:16px;background:linear-gradient(150deg,rgba(245,185,221,.28),rgba(116,86,152,.56));border:1px solid #ffe4fa4f;box-shadow:inset 0 1px 0 #fffc,0 9px 26px #d58bcb25}
.logo span{color:#ffe4af}
.badge{flex-shrink:0;max-width:126px;min-width:0;font-size:11px;line-height:1.25;border:1px solid #f0cce337;border-radius:999px;background:rgba(43,33,54,.50);color:#e1cfdd;padding:8px 11px;box-shadow:inset 0 1px 0 #fff2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.badge:before{content:"";display:inline-block;width:6px;height:6px;margin-left:5px;vertical-align:middle;border-radius:50%;background:#d9bbd2;box-shadow:0 0 0 3px #ebcde521,0 0 10px #e4bfe54f}
.badge .connection-dot{display:none}
.intro{position:relative;max-width:680px;margin:5px auto 21px;text-align:center}
.eyebrow{font-weight:750;font-size:10px;letter-spacing:3.1px;color:#e1b8ce;margin-bottom:12px}
.intro h2{font-size:clamp(24px,4.2vw,33px);line-height:1.55;margin-bottom:6px;text-wrap:balance;color:#fff7ff;text-shadow:0 2px 18px #f7b3c018}
.intro h2 .heart{color:#f4b7d6}
.intro .muted{font-size:13px;color:#d1bfd2;margin:0}
.feature-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;margin:15px 0 0}
.feature-strip span{border:1px solid rgba(246,206,241,.2);border-radius:50px;background:rgba(78,54,91,.24);color:#ebd9eb;font-size:11px;padding:7px 11px;box-shadow:inset 0 1px 0 #fff1;-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px)}
.two{gap:15px;align-items:stretch}
.card{
  overflow:hidden;position:relative;
  border:1px solid rgba(253,225,247,.19);border-radius:24px;
  background:linear-gradient(155deg,rgba(83,60,94,.29),rgba(37,27,49,.61) 38%,rgba(24,19,35,.62));
  -webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);
  box-shadow:var(--premium-shadow);padding:21px;
}
.card:before{content:"";position:absolute;z-index:0;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent 8%,#fff5 42%,transparent 82%);pointer-events:none}
.card:after{content:"";position:absolute;width:180px;height:160px;border-radius:50%;top:-120px;left:-90px;pointer-events:none;background:radial-gradient(ellipse,#f3c5f414,transparent 70%)}
.card > *{position:relative;z-index:1}
.card h2{font-size:18px;line-height:1.45;font-weight:780;letter-spacing:-.28px;margin:0 0 6px}
.card p.muted{font-size:12px;color:#cfc1d3;line-height:1.65}
.card-kicker{display:flex;align-items:center;gap:7px;margin:0 0 11px;color:#d9b7cf;font-size:11px;letter-spacing:.15px}
.step-number{display:inline-grid;place-items:center;min-width:28px;height:24px;padding:0 4px;border:1px solid #ffd9e54d;border-radius:8px;background:rgba(250,198,224,.11);color:#ffd6ea;font:700 10px system-ui}
.entry-card{display:flex;flex-direction:column;min-height:267px}
.entry-card label{margin-top:auto;padding-top:10px;color:#e8d9e5}
.field,.quality{
  color:#fbf5ff;background:rgba(12,10,22,.50);
  border:1px solid rgba(255,230,253,.22);border-radius:14px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 #fff1;min-height:47px;
}
.field::placeholder{color:#aaa0b6}
.field:focus,.quality:focus{border-color:#f5b7df97;box-shadow:0 0 0 3px #f6bad91c,inset 0 1px 0 #fff1}
.btn{border-color:#f9d6ed31;background:rgba(255,255,255,.065);box-shadow:inset 0 1px 0 #fff2;border-radius:13px;color:#faf0fc}
.btn.primary{background:linear-gradient(117deg,#f7bdcf,#eab3d6 55%,#bcaafa);border:1px solid #ffe6f277;color:#302039;box-shadow:0 7px 20px #d192ba21,inset 0 1px 0 #fff8;font-weight:800}
.btn.soft{background:linear-gradient(130deg,rgba(246,186,213,.16),rgba(169,133,204,.12));border-color:#f5c1e340}
.btn.ghost{color:#eeddea}
.btn:disabled{box-shadow:none;opacity:.55}
@media(hover:hover){.btn:hover:not(:disabled){background:rgba(253,221,244,.16);border-color:#fff7}}
.btn.primary:hover:not(:disabled){background:linear-gradient(117deg,#ffd0df,#f0bee0 55%,#c7b7ff)}
.btn.wide{margin-top:12px;min-height:46px}
.notice{display:flex;align-items:flex-start;gap:11px;margin-top:14px;padding:12px 14px;font-size:12px;line-height:1.7;border-radius:15px;border-color:#eec7e22b;background:rgba(58,41,71,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#d8ccdc}
.notice-icon{font-size:18px;color:#f2bfda;line-height:1.25;flex-shrink:0}
/* Room metadata stays compact so the player is visible quickly on Android. */
.theater-card{padding:17px}
.roomtop{align-items:center;margin-bottom:9px;gap:12px}
.room-identity{display:flex;flex-direction:column;gap:3px;min-width:0}
.room-eyebrow{font-size:11px;color:#ebbadb;letter-spacing:.2px}
.room-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.room-title .muted{font-size:12px;color:#e4d3e1}
.roomcode{font-size:15px;color:#f6c5df;letter-spacing:1.45px;background:rgba(253,194,223,.095);border:1px solid #efbddb44;border-radius:9px;padding:5px 8px;direction:ltr;user-select:all}
.roomtop .row{gap:6px}.roomtop .btn{min-height:36px;padding:7px 11px}
.people{gap:7px;margin:12px 0 13px}
.person{background:rgba(92,65,98,.26);border:1px solid #efc7e343;padding:8px 11px;border-radius:11px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#eadce9;font-size:11px}
.dot.good{background:#88e4b4;box-shadow:0 0 0 3px #88e4b419}
.player-shell{border-radius:17px;border:1px solid #efd9f92d;background:#050407;box-shadow:0 8px 28px #05040b69;isolation:isolate}
.controls{padding-top:15px}
.timeline{gap:12px}
.timeline span{font-size:12px;font-weight:550;color:#e2d3e0}
.seek{height:5px;background:#49394e}
.seek::-webkit-slider-thumb{background:#f9c1d6;box-shadow:0 0 0 4px #ffc6e91c,0 2px 6px #0004}
.actions{margin-top:13px;gap:9px}
.play{border-radius:14px}
.quality{border-radius:12px;min-height:41px}
.voice-bar{padding:10px 12px;gap:7px;border-radius:16px;background:rgba(89,61,96,.22);border-color:#f6cfe043;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #fff1}
.voice-actions .btn{min-height:35px}
.voice-status{color:#e8dbe8;font-size:12px}
.voice-explainer{color:#bcb0c5;font-size:11px;line-height:1.65}
#status{font-size:12px;margin:11px 1px 2px;line-height:1.6;color:#c9b7cb}
.turn-setup{margin-top:10px;background:rgba(41,29,54,.20);border-color:#e5beda30;border-radius:13px}
.source-card h2{margin-bottom:7px}
.sourcehint{line-height:1.7}
.advanced{margin-top:10px}
.advanced summary{border:1px solid #f5d9eb21;background:rgba(255,255,255,.027);border-radius:9px;padding:9px 11px}
.footnote{color:#b49fae;margin:23px 0 0}.footnote small{color:#8f8399}
#toast{background:rgba(42,31,52,.87);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid #fbe2f156}
/* Video itself remains sharp and unblurred. Fullscreen overlays are lightweight. */
#fullScreenZone.immersive{background:#000;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#fullScreenZone.immersive:after{display:none}
#fullScreenZone.immersive .player-shell{box-shadow:none;border:none}
#fullScreenZone.immersive .controls{background:linear-gradient(0deg,rgba(3,2,7,.91),rgba(5,3,9,.6) 58%,transparent);padding-top:36px;-webkit-backdrop-filter:none;backdrop-filter:none}
#fullScreenZone.immersive .voice-bar{background:rgba(28,20,35,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#fullScreenZone.immersive .fullscreen-top-actions .btn{background:rgba(29,20,36,.75);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
#fullScreenZone.immersive.controls-idle .controls,#fullScreenZone.immersive.controls-idle .fullscreen-top-actions,#fullScreenZone.immersive.controls-idle .voice-bar{opacity:0!important;visibility:hidden;pointer-events:none!important}
/* Do not rely on backdrop blur for readability or functioning controls. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .top{background:rgba(34,24,42,.97)}
  .card{background:linear-gradient(145deg,rgba(45,32,57,.97),rgba(24,20,35,.98))}
  .badge,.field,.quality,.person,.feature-strip span,.voice-bar{background:rgba(35,25,46,.94)}
}
@media(max-width:650px){
  .page{padding:11px 12px 30px}
  .top{padding:10px 12px;border-radius:20px;margin-bottom:20px}
  .brand h1{font-size:16px}.brand p{font-size:10px}
  .logo{width:41px;height:41px;border-radius:14px}
  .badge{font-size:10px;max-width:114px;padding:7px 8px}
  .intro{margin:4px auto 17px}.intro h2{font-size:23px}.intro .muted{font-size:12px}
  .feature-strip{gap:6px;margin-top:13px}.feature-strip span{font-size:10px;padding:6px 9px}
  .two{gap:11px}
  .card{padding:16px;border-radius:21px;-webkit-backdrop-filter:blur(15px) saturate(1.2);backdrop-filter:blur(15px) saturate(1.2)}
  .entry-card{min-height:auto}.entry-card label{margin-top:4px;padding-top:4px}
  .theater-card{padding:13px}.roomtop{gap:8px}.roomtop .btn{padding:6px 9px}
  .room-identity{gap:3px}.people{margin:10px 0 12px}
  .player-shell{margin:0;border-radius:14px}
  .actions{gap:8px}.actions .cluster{gap:5px}
  .play{min-width:118px}
  .source-card{padding:16px}
  .voice-bar{padding:9px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  #fullScreenZone.immersive{padding:0}.ambient-glow{opacity:.8}
}
@media(max-width:370px){
  .brand h1{font-size:14px}.brand p{font-size:9px}.logo{width:38px;height:38px}
  .badge{max-width:104px;font-size:9px}.feature-strip span{padding:5px 8px}
  .roomtop .row{flex-wrap:wrap}.roomcode{font-size:13px}
  .actions .cluster{gap:4px}.quality{width:97px}
}
@media(max-height:460px) and (orientation:landscape){
  #fullScreenZone.immersive .controls{padding-top:22px}
  #fullScreenZone.immersive .voice-bar{max-width:69%}
}
@media(prefers-reduced-motion:reduce){
  .btn,.controls,.voice-bar,.fullscreen-top-actions{transition:none!important}
}
/* Keep room controls and invitation code visible above the fold. */
@media (min-width:361px){
  .roomtop{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:10px}
  .roomtop .room-title{flex-direction:column;align-items:flex-start;gap:3px}
  .roomtop .row{flex-wrap:nowrap;gap:5px;margin-bottom:1px}
  .roomtop .row .btn{white-space:nowrap;font-size:11px;padding:6px 8px}
}

/* v6: fullscreen is a true edge-to-edge viewport; never crop the film unless opted in. */
#fullScreenZone.immersive,#fullScreenZone.immersive:fullscreen,#fullScreenZone.immersive:-webkit-full-screen {
  display:block!important;position:relative;box-sizing:border-box;width:100%!important;
  height:100%!important;min-height:0!important;max-height:none!important;
  border:0!important;padding:0!important;margin:0!important;overflow:hidden!important;border-radius:0!important;
}
#fullScreenZone.immersive.pseudo-fullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;z-index:500}
#fullScreenZone.immersive .player-shell{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  aspect-ratio:auto!important;margin:0!important;padding:0!important;overflow:hidden!important;
  border:0!important;border-radius:0!important;display:block!important;background:black!important;
}
#fullScreenZone.immersive .player-shell>video {
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;min-width:0!important;min-height:0!important;
  display:block!important;object-fit:contain!important;object-position:50% 50%!important;
  transform:none!important;aspect-ratio:auto!important;background:black!important;
}
#fullScreenZone.immersive.video-cover .player-shell>video{object-fit:cover!important}
/* Outside immersive mode the mode picker sits right above the transport. */
.watch-modes{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 0 2px;
  border-top:1px solid rgba(247,214,240,.1);margin-top:11px}
.watch-modes label{margin:0;font-size:11px;color:#e9cddf;white-space:nowrap}
.watch-modes select{min-width:0;max-width:100%;min-height:38px;flex:1 1 158px;
  border-radius:12px;padding:6px 10px;background:rgba(29,20,39,.75);
  color:#ffe7f6;border:1px solid #eec3e43f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.watch-modes #watchModeHint{width:100%;font-size:11px;color:#c9b5ce;line-height:1.5}
#fullScreenZone.immersive .watch-modes{display:none!important}
@media(max-width:400px){.watch-modes{gap:7px}.watch-modes label{font-size:10px}}