#floating{position:fixed;width:min(96vw,440px);height:280px;top:160px;left:2vw;background:var(--bg);border-radius:12px;overflow:hidden;z-index:10;touch-action:none;box-shadow:0 6px 25px color-mix(in srgb,var(--bg) 33%,transparent);color:var(--ink)}#floating video{width:100%;height:100%;object-fit:contain}#floating .control{position:absolute;left:0;right:0;top:0;padding:7px;background:linear-gradient(color-mix(in srgb,var(--bg) 60%,transparent),transparent);display:flex;align-items:center;gap:8px}#floating button{background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--ink);padding:7px;font-size:12px}#floating .tools{top:auto;bottom:0;justify-content:space-around;background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 73%,transparent))}#floating.hidecontrols .control{display:none}#message{position:absolute;top:46%;left:10%;width:80%;text-align:center;font-size:12px;pointer-events:none}#menu{z-index:8;position:absolute;bottom:42px;left:50%;transform:translateX(-50%);background:var(--surface);color:var(--ink);width:min(80%,240px);border-radius:12px;padding:6px}#menu button{color:var(--ink);background:var(--control);font-size:10px;padding:6px;margin:2px}#dock{position:fixed;top:220px;width:23px;padding:15px 0;background:color-mix(in srgb,var(--bg) 85%,transparent);color:var(--ink);z-index:11;border-radius:7px}.demo{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--bg)}.demo[hidden]{display:none}.demo>div{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--bg),var(--bg));font-size:15px}.pk{position:absolute;top:38px;left:0;right:0;background:color-mix(in srgb,var(--bg) 47%,transparent);text-align:center;font-size:11px;padding:6px}.pk[hidden]{display:none}.tiletag{position:absolute;bottom:4px;font-size:9px;background:color-mix(in srgb,var(--bg) 53%,transparent);padding:3px;cursor:pointer;text-align:center}
#videoHost{width:100%;height:100%;overflow:hidden}#videoHost video{object-fit:contain}
#floating{z-index:80}#dock{z-index:81}
#liveTiles{position:absolute;inset:0;pointer-events:none;z-index:3}.realTile{position:absolute;pointer-events:auto;background:color-mix(in srgb,var(--bg) 53%,transparent);color:var(--ink);white-space:pre-line;text-align:left;font-size:10px;line-height:12px;height:30px;overflow:hidden;border-radius:4px;padding:2px 3px}.realTile.red{border:1px solid var(--danger)}.realTile.blue{border:1px solid var(--accent)}#livePeople{position:absolute;inset:35px 8px 45px;background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink);border-radius:10px;padding:8px;z-index:7;overflow:auto}#livePeople>button{display:block;width:100%;text-align:left;border-bottom:1px solid var(--ink);color:var(--ink);font-size:12px}#livePeople small{display:block;font-size:9px}.pk{max-width:90%;font-size:10px;pointer-events:auto;cursor:pointer}
#menu div{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}#menu button.active{background:var(--blue);color:var(--surface)}#menu [data-line]{font-size:10px;padding:6px 5px}#floating .control{z-index:5}#message{z-index:6}#message:has(button){pointer-events:auto}#message button{border-radius:50%;width:42px;height:42px}#liveTiles .realTile{font-size:10px;padding:2px 4px;white-space:pre-line;line-height:13px;height:32px;background:color-mix(in srgb,var(--bg) 72%,transparent);text-shadow:0 1px 2px var(--bg)}#liveTiles .realTile.red{border-left:3px solid var(--danger)}#liveTiles .realTile.blue{border-left:3px solid var(--accent)}
#liveTiles .tileTop{display:flex;align-items:center;gap:3px;line-height:13px;white-space:nowrap}#liveTiles .tileNickname{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis}#liveTiles .tileRole{font-size:8px;line-height:11px;padding:0 2px;background:color-mix(in srgb,var(--surface) 14%,transparent);border-radius:2px;flex-shrink:0}#liveTiles .tileScore{display:block;white-space:nowrap;line-height:13px}

.soundControl{display:flex;align-items:center;gap:6px}.volumeControl{display:none}
@media (hover:hover) and (pointer:fine){#floating{border-radius:16px}#floating .control{padding:12px;gap:10px}#floating button{font-size:14px;padding:8px 12px}#floating .tools{justify-content:space-between;flex-wrap:wrap;gap:6px}#liveTitle{font-size:14px}#menu{bottom:58px;width:min(60%,360px)}#menu button,#menu [data-line]{font-size:12px;padding:7px 9px}.volumeControl{display:flex;align-items:center;gap:7px;font-size:12px}.volumeControl input{width:100px;accent-color:var(--accent);cursor:pointer}#liveTiles .realTile{height:38px;line-height:16px}#liveTiles .tileTop,#liveTiles .tileScore{line-height:16px}#liveTiles .tileNickname{font-size:12px}#liveTiles .tileRole{font-size:10px}.pk{font-size:13px;padding:8px;top:50px}}

@media (hover:hover) and (pointer:fine) and (max-width:600px){#floating .control{padding:8px}#floating button{font-size:12px;padding:6px 8px}.volumeControl span{display:none}.volumeControl input{width:65px}#menu{bottom:48px;width:min(86%,300px)}}

#livePeople{border:2px solid var(--accent,var(--accent));box-shadow:0 12px 40px color-mix(in srgb,var(--bg) 47%,transparent);border-radius:14px;background:var(--surface,var(--surface))}#livePeople>.row{background:color-mix(in srgb,var(--accent) 10%,transparent);padding:8px;border-bottom:1px solid color-mix(in srgb,var(--accent) 33%,transparent)}#livePeople .livePersonActions{display:flex;justify-content:flex-end;gap:8px;padding:0 8px 6px;border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}#livePeople .livePersonActions button{border:1px solid color-mix(in srgb,var(--accent) 33%,transparent);border-radius:7px;padding:6px 12px}

#livePeople .livePerson{display:flex;align-items:center;gap:4px;border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}#livePeople .livePersonIdentity{flex:1;min-width:0;text-align:left;font-size:12px}#livePeople .livePersonActions{flex-shrink:0;gap:4px;padding:4px;border:0}#livePeople .livePersonActions button{padding:7px 8px;font-size:11px;white-space:nowrap}#livePeople small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#livePeople{background:var(--surface,var(--surface));color:var(--ink,var(--ink))}
@media(max-width:767px){
  #floating{background:var(--video-bg);color:var(--button-white);border-radius:12px}#floating video{background:var(--video-bg)}#floating .control{height:44px;padding:0 8px;background:linear-gradient(color-mix(in srgb,var(--video-bg) 55%,transparent),transparent);color:var(--button-white)}#floating #liveTitle{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#floating button{color:var(--button-white);background:transparent;padding:0;font-size:10px}#close{width:44px;height:44px;flex:0 0 44px}#floating .tools{height:44px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:linear-gradient(transparent,color-mix(in srgb,var(--video-bg) 65%,transparent))}.soundControl{display:flex;justify-content:center}#floating .tools button{width:100%;height:44px;display:grid;place-items:center}#floating .live-control-label{display:none}#floating .volumeControl{display:none}#floating .pk{color:var(--button-white);background:color-mix(in srgb,var(--video-bg) 50%,transparent)}
  #dock{width:44px;height:64px;padding:0;background:transparent;border-radius:0;color:var(--button-white);font-size:14px;text-align:left;padding-left:2px}#dock[data-side=right]{padding-left:34px}#dock::before{content:'';position:absolute;top:8px;left:0;width:12px;height:48px;border-radius:6px;background:color-mix(in srgb,var(--video-bg) 63%,transparent);z-index:-1}#dock[data-side=right]::before{left:32px}#dock.audible::after{content:'';position:absolute;top:46px;left:4px;width:4px;height:4px;background:var(--green);border-radius:50%}#dock[data-side=right].audible::after{left:36px}#message{font-size:11px;color:var(--button-white);padding:8px;border-radius:8px;background:color-mix(in srgb,var(--video-bg) 55%,transparent)}#message:empty{display:none}
  #liveTiles .realTile{color:var(--button-white);background:color-mix(in srgb,var(--video-bg) 52%,transparent);font-size:10px;line-height:12px;text-align:center;border-left:0}#livePeople{color:var(--ink)}
}
@media(max-width:767px){#floating #liveTitle{order:0;flex:1}#floating #close{order:1}}

@media(max-width:767px){#floating{container-type:inline-size}#floating .tools button{display:flex;justify-content:center;gap:3px}#mute .live-control-label,#official .live-control-label{display:inline;font-size:9px;font-weight:400}@container(max-width:240px){#mute .live-control-label,#official .live-control-label{display:none}}}

@media(max-width:767px){#floating #menu{bottom:0;left:0;transform:none;width:100%;height:98px;padding:4px;border:.5px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink)}#floating #menu .live-menu-head{display:grid;grid-template-columns:repeat(3,1fr);height:44px;gap:0}#floating #menu .live-menu-choices{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0;overflow-x:auto;height:44px}#floating #menu button{height:44px;min-width:44px;margin:0;padding:4px;font-size:11px;font-weight:400;white-space:nowrap;color:var(--muted);background:transparent}#floating #menu .live-menu-choices>button{flex:1}#floating #menu #renew{flex:0 0 44px}#floating #menu .live-menu-choices>button.active{border-radius:11px;color:var(--accent);background:var(--control);font-weight:600}#floating #menu .live-menu-head>button[aria-pressed=true]{color:var(--accent);font-weight:600}}

@media(max-width:767px){#message>button[aria-label="恢复预览"]{display:block;margin:8px auto 0;width:auto;min-width:88px;height:36px;border-radius:7px;background:var(--control);color:var(--accent);font-size:12px;padding:6px 12px}}

@media(max-width:767px){#floating #livePeople button{color:var(--ink)}}

/* P11：直播顶部及名单按原生预览内部控件布局。 */
@media(max-width:767px){#floating .pk{top:6px;left:46px;right:46px;width:auto;max-width:none;height:30px;padding:2px 4px;border-radius:7px;font-size:10px;line-height:13px;display:flex;align-items:center;justify-content:center}#floating .pk[hidden]{display:none}}
#floating #livePeople{position:fixed;inset:auto;transform:none;max-height:min(340px,calc(100dvh - 16px));height:auto;padding:0;border-radius:12px;border-width:1.5px;overflow:hidden;z-index:20}
#livePeople .peopleHeader{display:flex;align-items:center;min-height:44px;padding:0 12px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));gap:8px}
#livePeople .peopleHeader b{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#floating #livePeople [data-close]{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;font-size:20px;padding:0}
#livePeople .peopleRows{max-height:286px;overflow:auto}#livePeople .peopleNotice{font-size:10px;margin:4px 12px;color:var(--muted)}
#livePeople .livePerson{padding:7px 12px;gap:8px;min-height:47px;border-color:var(--line)}
#floating #livePeople .livePersonIdentity{display:flex;align-items:center;gap:8px;padding:0;min-width:0;overflow:hidden}
#livePeople .personAvatar{flex:0 0 32px}#livePeople .personFacts{min-width:0;flex:1}#livePeople .personName{display:flex;align-items:center;gap:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:600}#livePeople .personName .badge{width:24px;height:11px}
#livePeople .livePersonActions{padding:0;gap:8px}#floating #livePeople .livePersonActions button{font-size:10px;padding:0;min-height:32px;border:0;color:var(--accent)}#livePeople small{font-size:10px;color:var(--muted);margin-top:3px}

/* 用户最终指定：分格右侧仅有切房/查榜两枚小按钮。 */
#floating #livePeople[data-mode=tile]{display:flex;gap:4px;align-items:center;width:88px;height:32px;border:.5px solid var(--line);border-radius:7px;padding:1px;background:var(--surface)}
#floating #livePeople[data-mode=tile][hidden]{display:none}
#floating #livePeople[data-mode=tile] .tileSwitch,#floating #livePeople[data-mode=tile] .tileRank{display:block;margin:0;width:40px;height:28px;border:0;border-radius:5px;background:var(--control);color:var(--accent);font-size:11px;font-weight:400;padding:0;text-align:center}
@media(max-width:767px){#floating:has(.pk:not([hidden])) #liveTitle{visibility:hidden}}
/* 无 MSE 的旧 iPhone 使用同一预览窗口内的 WebGL 画布。 */
#videoHost .live-software{width:100%;height:100%;position:relative;overflow:hidden}
#videoHost .live-software canvas{display:block;width:auto;height:auto;max-width:none;max-height:none}
#floating .live-license{display:block;text-align:center;font-size:10px;line-height:22px;color:var(--accent)}
@media(max-width:767px){#floating #menu:has(.live-license){height:120px}}

/* S6：不把长数字缩成微字；完整房号和票数保留于名单与可访问名称。 */
#liveTiles .tileTop, #liveTiles .tileScore { line-height: 14px; }
#liveTiles .tileNickname, #liveTiles .tileScore, #liveTiles .tileRole { font-size: 12px; }
#liveTiles .tileScore { overflow: hidden; text-overflow: ellipsis; }
#liveTiles .realTile { height: 36px; }
#floating #livePeople small { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
@media (hover:hover) and (pointer:fine) {
  #liveTiles .realTile { height: 38px; }
}
@media (max-width:767px) {
  #floating #mute .live-control-label, #floating #official .live-control-label { font-size: 12px; }
}

/* 红框修复：名单不跟随放大的视频铺满，关闭与线路控件保持清晰。 */
#floating { --live-header-height: 58px; }
#floating #liveTitle { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#floating .pk { z-index: 6; }
@media (hover:hover) and (pointer:fine) { #floating { --live-header-height: 68px; } }
@media (max-width:767px) { #floating { --live-header-height: 44px; } #floating .pk { right: 60px; } }
@media (min-width:768px) { #floating .pk { top: calc(var(--live-header-height) + 4px); } }
#floating #close { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; display: grid; place-items: center; }
#floating #livePeople[data-mode=roster] { display: flex; flex-direction: column; max-height: min(360px,calc(100dvh - 16px)); }
#floating #livePeople[data-mode=roster][hidden] { display: none; }
#livePeople .peopleHeader, #livePeople .peopleStatus { flex-shrink: 0; }
#livePeople .peopleRows { min-height: 0; max-height: none; overflow: auto; }
#floating #livePeople .livePerson { min-height: 56px; }
#floating #livePeople .livePersonIdentity { background: transparent; }
#livePeople .personName { font-size: 14px; }
#floating #livePeople .livePersonActions button { min-width: 44px; min-height: 36px; padding: 0 8px; font-size: 12px; background: var(--control); border-radius: 7px; }
@media (min-width:768px) {
  #floating #menu { width: min(360px,calc(100% - 24px)); max-height: calc(100% - 72px); overflow: auto; padding: 8px; }
  #floating #menu .live-menu-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 44px; gap: 4px; position: sticky; top: -8px; background: var(--surface); z-index: 1; padding: 4px 0; }
  #floating #menu .live-menu-choices { display: grid; grid-template-columns: minmax(0,1fr); gap: 4px; margin-top: 4px; }
  #floating #menu button { margin: 0; min-height: 40px; padding: 8px 12px; font-size: 14px; border-radius: 8px; }
  #floating #menu #menux { width: 44px; min-height: 44px; padding: 0; }
  #floating #menu [data-line] { text-align: left; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
  #floating #menu #renew { justify-self: end; min-width: 44px; }
  #floating #menu.detached-menu { position: fixed; bottom: auto; transform: none; max-height: calc(100dvh - 16px); }
  #floating.compact-controls .tools { display: grid; grid-template-columns: minmax(0,1fr) 44px 44px; height: 44px; padding: 0; gap: 0; }
  #floating.compact-controls .tools .live-control-label, #floating.compact-controls .volumeControl span { display: none; }
  #floating.compact-controls .tools button { width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; }
  #floating.compact-controls .soundControl { min-width: 0; justify-content: flex-start; }
  #floating.compact-controls .soundControl #mute { flex: 0 0 44px; }
  #floating.compact-controls .volumeControl { min-width: 0; flex: 1; }
  #floating.compact-controls .volumeControl input { width: 100%; min-width: 0; }
}
@media (max-width:767px), (pointer:coarse) {
  #floating #livePeople .livePersonIdentity { min-height: 44px; }
  #floating #livePeople .livePersonActions button { min-height: 44px; }
  #floating #menu button { min-height: 44px; }
}

/* 用户指定：PK状态条与各分格主播信息分别居中。 */
#floating .pk { left: 5%; right: 5%; width: auto; max-width: none; text-align: center; }
#liveTiles .realTile { text-align: center; }
#liveTiles .tileTop { justify-content: center; }
#liveTiles .tileNickname { flex: 0 1 auto; }
@media (max-width:767px) { #floating .pk { left: 60px; right: 60px; } }

/* 67候选：身份与房号一行，名次与完整票数一行。 */
#floating #liveTiles .realTile{height:auto;min-height:44px;box-sizing:border-box;padding:3px 4px;background:rgba(0,0,0,.76);color:#fff;text-shadow:none;border-left:0;white-space:normal}
#liveTiles .tileTop{display:flex;justify-content:space-between;gap:4px;line-height:17px;min-width:0}
#liveTiles .tileNickname{flex:1;min-width:0;font-weight:500;text-align:left}
#liveTiles .tileRoom{flex:0 0 auto;font-weight:400;white-space:nowrap;opacity:.88}
#liveTiles .tileBottom{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;line-height:20px}
#liveTiles .tileRole{flex:0 0 auto;font-size:10px;line-height:15px;padding:0 2px;background:rgba(255,255,255,.16)}
#liveTiles .tileScore{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:visible;text-overflow:clip;line-height:20px;font-variant-numeric:tabular-nums;font-weight:650}
#liveTiles .wrapScore .tileScore{white-space:normal;overflow-wrap:anywhere}
#liveTiles .realTile:focus-visible{outline:2px solid #fff;outline-offset:-2px}

#liveTiles .compactTile .tileTop{flex-wrap:wrap;gap:0;justify-content:center;line-height:14px}
#liveTiles .compactTile .tileNickname{flex:1;min-width:0;text-align:left}
#liveTiles .compactTile .tileRoom{flex-basis:100%;text-align:center;line-height:14px}

/* 手机Web连麦卡：45%黑底，文字本身保持不透明，细描边适配亮画面。 */
@media(max-width:767px),(max-width:1024px) and (hover:none) and (pointer:coarse){
  #floating #liveTiles .realTile{background:rgba(0,0,0,.45);text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 1px #000;-webkit-text-stroke:.35px rgba(0,0,0,.85);paint-order:stroke fill}
  #floating #liveTiles .tileRoom{opacity:1}
  #floating #liveTiles .tileRole{background:rgba(0,0,0,.12)}
}