:root{--red:#c8102e;--ink:#11151c;--panel:rgba(18,22,30,.86);--line:rgba(255,255,255,.12);--txt:#eef1f6;--mut:#a9b2c1}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0d1016;color:var(--txt);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
#view{position:fixed;inset:0;width:100vw;height:100vh;display:block}
.pnl{position:fixed;background:var(--panel);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(6px);box-shadow:0 8px 30px rgba(0,0,0,.35)}
#top{top:10px;left:10px;right:10px;height:44px;display:flex;align-items:center;gap:14px;padding:0 14px;border-radius:12px}
#top .brand{font-weight:700;display:flex;align-items:center;gap:8px;white-space:nowrap}
#top .brand i{width:10px;height:22px;background:var(--red);border-radius:2px;display:inline-block}
#top .chip{background:rgba(255,255,255,.08);border-radius:999px;padding:4px 10px;white-space:nowrap;font-size:13px}
#top .grow{flex:1}
#top .help{color:var(--mut);font-size:12px;white-space:nowrap}
#mini{top:64px;right:10px;padding:6px}
#mini canvas{display:block;border-radius:8px}
#screenP{top:242px;right:10px;padding:6px;display:none}
#screenP canvas{display:block;border-radius:6px;width:300px;height:169px}
#screenP .cap{font-size:11px;color:var(--mut);padding:2px 4px 4px}
#mod{top:64px;left:10px;width:282px;max-height:calc(100vh - 230px);overflow:auto;padding:12px}
#mod h3{margin:0 0 2px;font-size:15px;display:flex;justify-content:space-between;align-items:center}
#mod small{color:var(--mut);font-weight:400}
#mod ol{margin:10px 0;padding:0;list-style:none;counter-reset:a}
#mod li{counter-increment:a;padding:5px 8px;border-radius:8px;cursor:pointer;color:var(--mut);display:flex;gap:8px;font-size:13px}
#mod li::before{content:counter(a);min-width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;font-size:11px}
#mod li:hover{background:rgba(255,255,255,.06)}
#mod li.done{color:#7f8899}
#mod li.cur{background:rgba(200,16,46,.22);color:#fff}
#mod li.cur::before{background:var(--red)}
#mod .body.hide{display:none}
button{font:inherit;color:#fff;background:rgba(255,255,255,.1);border:1px solid var(--line);border-radius:8px;padding:7px 10px;cursor:pointer}
button:hover{background:rgba(255,255,255,.18)}
button.primary{background:var(--red);border-color:var(--red);font-weight:600}
button.primary:hover{filter:brightness(1.1)}
button.pulse{animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.7)}50%{box-shadow:0 0 0 8px rgba(200,16,46,0)}}
.row{display:flex;gap:6px;margin:6px 0;flex-wrap:wrap}
.row>*{flex:1}
#mod input[type=text]{width:100%;font:inherit;color:#fff;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:8px;padding:7px 9px;margin:4px 0}
#mod label{font-size:12px;color:var(--mut);display:flex;gap:6px;align-items:center;margin:6px 0}
#mod .sep{height:1px;background:var(--line);margin:10px 0}
#hear{bottom:10px;left:50%;transform:translateX(-50%);padding:8px;display:flex;gap:8px;min-height:40px;align-items:flex-end}
#hear .empty{color:var(--mut);font-size:12px;padding:4px 10px}
.tile{width:92px;text-align:center;font-size:11px}
.tile canvas{width:92px;height:92px;border-radius:8px;display:block;background:#222}
.tile .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.tile .bar{height:4px;background:rgba(255,255,255,.12);border-radius:2px;margin-top:3px;overflow:hidden}
.tile .bar i{display:block;height:100%;background:#3ddc84}
#hearLbl{position:absolute;top:-20px;left:4px;font-size:11px;color:var(--mut)}
#pip{bottom:10px;right:10px;width:180px;padding:6px;text-align:center}
#pip video,#pip .ph{width:166px;height:124px;border-radius:8px;background:#20252f;display:block;object-fit:cover;transform:scaleX(-1)}
#pip .ph{transform:none;display:flex;align-items:center;justify-content:center;color:var(--mut);font-size:12px;padding:8px}
#pip .cap{font-size:11px;color:var(--mut);margin:4px 0}
#toast{top:64px;left:50%;transform:translateX(-50%);padding:12px 18px;display:none;max-width:560px;font-size:15px;border-color:rgba(200,16,46,.6)}
#toast b{color:#ff8a97}
#sub{bottom:150px;left:50%;transform:translateX(-50%);padding:8px 14px;max-width:640px;display:none;text-align:center;font-size:15px}
#sub small{display:block;color:var(--mut);font-size:11px}
#guide{bottom:150px;left:304px;width:340px;padding:12px 14px;display:none;border-color:rgba(30,138,90,.7)}
#guide b{color:#6fe0a8}
#turn{top:24%;left:50%;transform:translate(-50%,-50%);padding:18px 22px;display:none;text-align:center;border-color:var(--red)}
#turn .big{font-size:22px;font-weight:700;margin-bottom:6px}
#touch{position:fixed;left:14px;bottom:14px;display:none;grid-template-columns:repeat(3,52px);gap:6px}
#touch button{height:52px;font-size:20px}
#start{position:fixed;inset:0;background:rgba(8,10,14,.78);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:50}
#start .card{width:min(680px,92vw);background:#151a23;border:1px solid var(--line);border-radius:16px;padding:28px}
#start h1{margin:0 0 4px;font-size:24px}
#start p{color:var(--mut);margin:8px 0}
#start .roles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 10px}
#start .roles button{padding:14px 10px;text-align:left;border-radius:12px}
#start .roles button b{display:block;font-size:15px;margin-bottom:3px}
#start .roles button span{color:var(--mut);font-size:12px}
#start input{font:inherit;color:#fff;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:8px;padding:9px 11px;width:100%}
#start .opt{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:10px;color:var(--mut);font-size:13px}
#start select{font:inherit;background:#0e1219;color:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 6px}
.kbd{display:inline-block;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 6px;font-size:12px;color:#fff}
@media (max-width:900px){#top .help{display:none}#mod{width:240px}#guide{left:10px;bottom:160px}}
@media (pointer:coarse){#touch{display:grid}}

#ctrl{bottom:10px;left:10px;padding:6px;display:flex;gap:6px}
#ctrl button{min-width:44px;height:40px}
#ctrl button.off{background:#5a1f27;border-color:#a03040}
#screenP.big{top:64px;right:10px;left:10px;bottom:160px;display:flex!important;flex-direction:column;align-items:center;z-index:20}
#screenP.big canvas{width:auto;height:calc(100% - 30px);max-width:100%;aspect-ratio:16/9}
#screenP .cap{display:flex;justify-content:space-between;align-items:center;gap:8px}
#screenP .cap button{padding:2px 8px;font-size:12px}
#join{position:fixed;inset:0;background:rgba(8,10,14,.82);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:50}
#join .card{width:min(620px,92vw);background:#151a23;border:1px solid var(--line);border-radius:16px;padding:26px}
#join h1{margin:0 0 6px;font-size:24px}
#join p{color:var(--mut);margin:8px 0}
#join video,#join .ph{width:100%;aspect-ratio:4/3;max-height:300px;border-radius:12px;background:#20252f;object-fit:cover;transform:scaleX(-1);display:block}
#join .ph{transform:none;display:flex;align-items:center;justify-content:center;color:var(--mut)}
#join .err{color:#ff8a97;font-size:13px;min-height:18px}
#mod select{width:100%;font:inherit;background:rgba(0,0,0,.3);color:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 9px;margin:4px 0}
#invList{font-size:12px;color:var(--mut);margin-top:6px;max-height:140px;overflow:auto}
#invList div{display:flex;gap:6px;align-items:center;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--line)}
.who{font-size:12px;color:var(--mut)}

@media (max-width:700px){
  #top{height:auto;flex-wrap:wrap;gap:6px;padding:6px 10px}#top .help,#people{display:none}
  #mini{display:none}
  #mod{top:auto;bottom:64px;left:10px;right:10px;width:auto;max-height:45vh;padding:10px}
  #mod small{display:none}
  #screenP{top:auto;bottom:auto;top:96px;right:10px;left:10px}#screenP canvas{width:100%;height:auto}
  #pip{display:none}
  #hear{bottom:64px;left:10px;right:10px;transform:none;overflow-x:auto}
  .tile{width:64px}.tile canvas{width:64px;height:64px}
  #touch{bottom:64px;left:auto;right:10px}
  #turn{width:calc(100% - 20px)}
}

#slidesDlg{top:50%;left:50%;transform:translate(-50%,-50%);width:min(520px,94vw);padding:16px;z-index:40}
#slidesDlg input[type=text]{width:100%;font:inherit;color:#fff;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:4px 0}
#slidesDlg input[type=file]{margin:8px 0;color:var(--mut);max-width:100%}
#deckList div{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
#slideNav button{padding:2px 8px;font-size:12px}
#slNum{font-size:12px;color:var(--mut)}
#toast button{margin-top:8px}
#guide{left:50%;transform:translateX(-50%);bottom:160px;width:min(420px,92vw)}
#miniC{cursor:pointer}