:root{--pink:#ff8fb8;--pink2:#ffd1e3;--lav:#b9a7ff;--lav2:#e9e3ff;--ink:#5b4a6b;--muted:#9a8aa8;--card:#ffffffcc;--shadow:0 10px 30px rgba(180,120,200,.22);--r:22px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;font-family:"Nunito","Quicksand",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink)}
body{background:linear-gradient(160deg,#ffe6f1 0%,#f1e9ff 55%,#e6f0ff 100%) fixed;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(#ffffff 1.2px,transparent 1.6px),radial-gradient(#ffc6dc 1px,transparent 1.4px);background-size:38px 38px,56px 56px;background-position:0 0,20px 30px;z-index:0}
button,input{font:inherit;color:inherit}
.btn{border:0;border-radius:999px;padding:11px 18px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,var(--pink),var(--lav));color:#fff;box-shadow:0 6px 16px rgba(255,120,170,.35);transition:transform .12s,filter .12s;white-space:nowrap}
.btn:active{transform:scale(.96)}.btn:hover{filter:brightness(1.05)}
.btn.soft{background:#fff;color:var(--ink);box-shadow:0 4px 12px rgba(160,120,200,.18)}
.btn.small{padding:7px 12px;font-size:14px}
.btn:disabled{opacity:.5;cursor:default}
.input{width:100%;border:2px solid var(--lav2);background:#fff;border-radius:999px;padding:11px 16px;outline:none;transition:border .15s}
.input:focus{border-color:var(--pink)}
.card{background:var(--card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--r);box-shadow:var(--shadow);border:1px solid #fff}
.muted{color:var(--muted)}
.hidden{display:none!important}
/* login */
.login-wrap{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login{width:100%;max-width:360px;padding:30px 26px;text-align:center}
.logo{font-size:44px;line-height:1;margin-bottom:6px;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.login h1{margin:4px 0 4px;font-size:26px}
.login p{margin:0 0 20px}
.login form{display:flex;flex-direction:column;gap:12px}
.err{color:#e05587;font-weight:700;min-height:20px;font-size:14px}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
/* app v2 */
.app{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:6px 10px 20px}
.top{display:flex;align-items:center;gap:6px;padding:2px 2px 6px;min-width:0}
.brand{font-weight:900;font-size:17px;display:flex;align-items:center;gap:5px;white-space:nowrap}
.brand .h{color:var(--pink)}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:5px 10px;font-size:13px;font-weight:700;box-shadow:0 3px 10px rgba(160,120,200,.15);white-space:nowrap}
#partnerPill{min-width:0;max-width:40vw;overflow:hidden}
#ptext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .btn.small{padding:6px 10px}
.dot{width:9px;height:9px;border-radius:50%;background:#d3c8dc;flex:none}
.dot.on{background:#5fd39a;box-shadow:0 0 0 3px #5fd39a33}
.together{color:#ff5b95;animation:beat 1.2s infinite;display:inline-block}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.15)}}
.code{font-weight:900;letter-spacing:.5px;color:#ff5b95}
/* home / admin */
.home{max-width:440px;margin:6vh auto 0;padding:24px;text-align:center}
.home h2{margin:6px 0 4px}
.row{display:flex;gap:8px;margin-top:12px}
.or{margin:14px 0 8px;font-size:13px}
.namein{margin-top:12px}
.soon{margin-top:12px;background:linear-gradient(135deg,#ffe3ef,#ece4ff);border-radius:16px;padding:12px;font-weight:800;animation:pop .35s}
@keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
.adminlink{display:inline-block;margin-top:16px;font-size:13px;color:var(--muted);text-decoration:none;font-weight:700}
.adminbox{max-width:760px;margin:3vh auto 0;padding:20px}
.adminhead{display:flex;align-items:center;gap:8px}.adminhead h2{margin:0}
.newroom{margin-top:12px;background:linear-gradient(135deg,#ffe3ef,#ece4ff);border-radius:16px;padding:12px;font-weight:800;animation:pop .35s}
.linkrow{display:flex;gap:6px;margin-top:8px}.linkrow .input{flex:1;min-width:0;font-size:13px}
.roomlist{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.ritem{display:flex;align-items:center;gap:8px;background:#fff;border-radius:16px;padding:10px 12px;box-shadow:0 3px 10px rgba(160,120,200,.12);flex-wrap:wrap}
.ritem .info{flex:1;min-width:150px}
.ritem .lnk{font-size:12px;color:var(--muted);word-break:break-all}
.cnt{font-weight:900;font-size:13px;padding:4px 9px;border-radius:999px;background:#f1ecff}
.cnt.c1{background:#fff1c9}.cnt.c2{background:#d6f7e5}
.btn.danger{background:#fff;color:#e05587;box-shadow:0 3px 10px rgba(224,85,135,.18)}
.full{max-width:420px;margin:10vh auto 0;padding:30px;text-align:center}
.full .big{font-size:54px}
/* room */
.bar{display:flex;gap:6px;margin-bottom:6px}
.bar .input{flex:1;min-width:0;padding:9px 14px}
.notice{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ffe3ef,#ece4ff);border-radius:14px;padding:9px 12px;margin-bottom:6px;font-weight:800;font-size:14px;animation:pop .3s}
.notice span{flex:1}.notice .x{border:0;background:#fff;border-radius:50%;width:26px;height:26px;cursor:pointer;flex:none}
.stage{position:relative;width:100%;height:min(calc((100vw - 20px) * 9 / 16), calc(100vh - 175px));min-height:200px;background:#1d1726;border-radius:14px;overflow:hidden}
.stage.web{height:calc(100vh - 175px)}
@supports (height:100svh){.stage{height:min(calc((100vw - 20px) * 9 / 16), calc(100svh - 175px))}.stage.web{height:calc(100svh - 175px)}}
.stage:fullscreen,.stage:-webkit-full-screen{border-radius:0;height:100%!important;width:100%}
.stage.pseudo{position:fixed;inset:0;z-index:999;border-radius:0;height:100%!important}
.stage .layer{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.stage iframe.layer{background:#fff}
.stage video.layer{object-fit:contain}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f5e9ff;text-align:center;padding:20px;gap:6px;background:linear-gradient(135deg,#3b2c4a,#2a2140)}
.empty span{font-size:14px;opacity:.8}
.empty .big{font-size:42px;animation:bob 2.4s ease-in-out infinite}
.strip{margin-top:6px}
.ctlrow,.callrow{display:flex;align-items:center;gap:6px}
.callrow{margin-top:6px}
.ctl{width:42px;height:42px;flex:none;border-radius:50%;border:0;background:#fff;font-size:18px;cursor:pointer;box-shadow:0 4px 12px rgba(160,120,200,.2);position:relative;display:inline-flex;align-items:center;justify-content:center}
.ctl.off::after{content:"";position:absolute;width:24px;height:2.5px;background:#ff5b95;border-radius:2px;transform:rotate(-45deg)}
.ctl.on{background:linear-gradient(135deg,#ffd1e3,#e3d9ff)}
.seek{flex:1;min-width:60px;accent-color:var(--pink)}
.time{font-size:12px;font-weight:800;min-width:74px;text-align:center}
.tapjoin{display:block;width:100%;margin-top:6px}
.nowtitle{font-weight:800;font-size:14px;margin:6px 4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nowtitle:empty{display:none}
.tile{position:relative;width:84px;height:63px;flex:none;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#ffc2da,#c9b8ff);box-shadow:0 4px 12px rgba(160,120,200,.25);border:2px solid #fff}
@media (min-width:700px){.tile{width:120px;height:90px}}
.tile video{width:100%;height:100%;object-fit:cover;display:block}
.tile .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px}
.tile .lbl{position:absolute;left:4px;bottom:3px;background:#0007;color:#fff;font-size:10px;font-weight:800;padding:1px 6px;border-radius:999px}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:10px;max-height:520px;overflow:auto;padding:2px}
.results:empty{display:none}
.res{background:#fff;border-radius:16px;overflow:hidden;cursor:pointer;box-shadow:0 4px 12px rgba(160,120,200,.15);transition:transform .12s;border:0;padding:0;text-align:left}
.res:active{transform:scale(.97)}
.res img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#eee}
.res .t{font-size:13px;font-weight:800;padding:7px 9px 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.res .c{font-size:11px;color:var(--muted);padding:0 9px 8px}
.chat{padding:10px;display:flex;flex-direction:column;height:300px;margin-top:10px}
.msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:2px}
.msg{max-width:85%;padding:7px 12px;border-radius:16px;background:#fff;font-size:14px;word-wrap:break-word;align-self:flex-start;box-shadow:0 2px 6px rgba(160,120,200,.12)}
.msg.mine{align-self:flex-end;background:linear-gradient(135deg,#ffd1e3,#e3d9ff)}
.msg .n{font-size:10px;font-weight:800;color:var(--muted)}
.sys{align-self:center;font-size:12px;color:var(--muted)}
.reacts{display:flex;gap:4px;margin:8px 0}
.reacts button{border:0;background:#fff;border-radius:12px;font-size:20px;padding:4px 8px;cursor:pointer;box-shadow:0 2px 6px rgba(160,120,200,.15)}
.chatrow{display:flex;gap:6px}.chatrow .input{flex:1;min-width:0}
.burst{position:fixed;pointer-events:none;z-index:9999;font-size:28px;animation:floatup 2.2s ease-out forwards}
@keyframes floatup{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-60vh) scale(1.3) rotate(20deg)}}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#fff;padding:10px 18px;border-radius:999px;box-shadow:var(--shadow);font-weight:800;z-index:10000;font-size:14px}
@media (max-width:600px){
 .app{padding:4px 0 16px}
 .top,.bar,.notice,.strip,.results,.chat{margin-left:8px;margin-right:8px}
 .top{padding:2px 0 4px}
 .brand{font-size:15px}
 .stage{border-radius:0;height:min(calc(100vw * 9 / 16), calc(100svh - 230px))}
 .stage.web{height:calc(100svh - 230px)}
 .ctl{width:38px;height:38px;font-size:16px}
 .time{min-width:64px;font-size:11px}
 .results{grid-template-columns:repeat(2,1fr);gap:8px}
}
@media (max-width:600px){.brand .bt{display:none}#partnerPill{max-width:34vw}}
@media (max-width:600px){.home,.adminbox,.full{margin-left:8px;margin-right:8px}.top{margin-left:8px;margin-right:8px}}

/* control mode */
.ctlbar{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.ctllbl{font-size:12px;font-weight:900;color:var(--muted)}
.seg{display:inline-flex;background:#fff;border-radius:999px;padding:3px;box-shadow:0 3px 10px rgba(160,120,200,.15)}
.seg button{border:0;background:transparent;border-radius:999px;padding:5px 11px;font-weight:800;font-size:13px;cursor:pointer;color:var(--ink);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg button.active{background:linear-gradient(135deg,var(--pink),var(--lav));color:#fff}
.seg button:disabled{cursor:default;opacity:.55}.seg button.active:disabled{opacity:.85}
.drivenote{font-size:13px;font-weight:800;background:linear-gradient(135deg,#fff1c9,#ffe3ef);padding:5px 10px;border-radius:999px}
.askbox{display:flex;align-items:center;gap:6px;margin-top:6px;background:linear-gradient(135deg,#ffe3ef,#ece4ff);border-radius:14px;padding:8px 10px;font-weight:800;font-size:14px;animation:pop .3s}
.askbox span{flex:1}
.ctl:disabled,.seek:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}
.bar .input:disabled{opacity:.6}
.stage.locked #ytWrap,.stage.locked iframe,.stage.locked video{pointer-events:none}
.results.locked .res{opacity:.5;pointer-events:none}

/* ---------- browse together (Android app) ---------- */
.browsebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.browsebar:empty{display:none}
.browsenote{font-size:12px;color:#9a7a9f}.browsenote a{color:#d0558f;font-weight:600}
#browseBtn.on{background:linear-gradient(135deg,#b99bff,#ff8fbf)}
.browseinfo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff0f7;border:1px dashed #f3a6c8;border-radius:12px;padding:8px 10px;margin:0 0 6px;font-size:13px;color:#7a4a72}
.browseinfo .burl{flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,monospace;font-size:12px;color:#5a3a60}
.stage.browsing{height:max(58vh, calc((100vw - 20px) * 9 / 16))}
.stage .browselayer{display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(135deg,#fff0f7,#f1eaff);color:#7a4a72}
.stage .browselayer.hidden{display:none}
.stage .browselayer .big{font-size:40px}.stage .browselayer span{display:block;font-size:12px;opacity:.7;margin-top:4px}
@media (max-width:640px){.stage.browsing{height:max(58svh, 56.25vw)}}