.home-online-link { border-color:#9eaea7; background:#e9f0e8; }
.home-online-link > span { color:#426c59 !important; }
#screen-online,#screen-online-admin { width:100%; margin:auto; }
html:has(body:is([data-screen="online"],[data-screen="online-admin"])) { scrollbar-gutter:auto; }
body:is([data-screen="online"],[data-screen="online-admin"]) .wrap { max-width:900px; height:min(100dvh,var(--toy-viewport-height,100dvh)); min-height:0; padding:0 max(10px,var(--safe-right)) 0 max(10px,var(--safe-left)); }
body[data-screen="online-admin"] .wrap { max-width:760px; }
#screen-online.active,#screen-online-admin.active { height:100%; min-height:0; overflow:hidden; padding:max(6px,var(--safe-top)) 0 max(6px,var(--safe-bottom)); }
#screen-online .game-head,#screen-online-admin .game-head { flex-shrink:0; min-height:44px; margin-bottom:4px; }
#screen-online .online-shell { flex:1; min-height:0; overflow:auto; padding:12px; }
#screen-online .online-shell:has(#online-room:not([hidden])) { display:flex; flex-direction:column; overflow:hidden; }
#online-room { display:flex; flex-direction:column; flex:1; min-height:0; }
.online-room-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding-right:3px; }
.online-room-body::-webkit-scrollbar { width:10px; }
.online-room-body::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:10px; background:#a1b49a; background-clip:padding-box; }
.online-room-body::-webkit-scrollbar-button { display:none; }
body:is([data-screen="online"],[data-screen="online-admin"]) .btn-bgm { display:none; }
#screen-online [hidden],#screen-online-admin [hidden] { display:none !important; }
.home-admin-entry { border:0; background:transparent; color:var(--ink-soft); font:inherit; font-size:11px; min-height:44px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.online-connection { font-size:10px; color:var(--ink-soft); white-space:nowrap; }
.online-shell { padding:24px; border:1px solid #bdc9bd; border-radius:18px; background:linear-gradient(145deg,#fcfaf3f2,#f2f4ebeb); box-shadow:0 16px 40px #2a395014,inset 0 1px #fff; }
.online-shell h2 { font-size:clamp(22px,5vw,30px); font-weight:500; line-height:1.4; margin:8px 0 16px; }
.online-shell h3 { font-weight:500; font-size:17px; }
.online-identity { display:flex; align-items:center; gap:12px; margin:20px 0; padding:14px; border:1px solid #b8cabd; border-radius:12px; background:#eff4eccc; }
.online-identity > div { flex:1; min-width:0; }
.online-identity strong { display:block; font-size:14px; overflow-wrap:anywhere; }
.online-identity small { display:block; margin-top:5px; font-size:11px; color:var(--ink-soft); line-height:1.6; }
.online-identity .btn { min-height:44px; padding:8px 12px; font-size:12px; }
#online-lobby > h2 { margin:0 0 12px; font-size:22px; }
#online-lobby .online-identity { flex-wrap:nowrap; margin:12px 0; padding:10px; gap:8px; }
#online-lobby .online-identity .btn { width:auto; flex-shrink:0; padding:7px; font-size:11px; }
#online-lobby .online-avatar { width:32px; height:32px; flex-basis:32px; }
#online-lobby .online-identity small { font-size:10px; }
.online-avatar { position:relative; display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border-radius:50%; overflow:hidden; color:#507667; background:#dfe9dc; font-size:20px; }
.online-avatar img { position:absolute; width:100%; height:100%; object-fit:cover; inset:0; }
.online-room-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-shrink:0; padding:4px 0 10px; margin-bottom:8px; border-bottom:1px solid #bdc9bd; }
.online-room-head > div:first-child { min-width:0; padding-left:9px; border-left:3px solid #628875; }
.online-room-head h2 { margin:0; font-size:18px; white-space:nowrap; letter-spacing:.04em; }
.online-room-head .online-eyebrow { font-size:10px; letter-spacing:0; margin:3px 0 0; }
.online-status:empty { display:none; }
.online-room-head .online-code { gap:5px; padding:0 4px 0 8px; flex-wrap:nowrap; border-style:solid; border-color:#cad8c8; background:#eef4e9; }
.online-room-head .online-code strong { font-size:16px; letter-spacing:.08em; user-select:all; }
.online-room-head .online-code button { min-width:44px; min-height:44px; padding:6px; }
.online-duel-seats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.online-seat { display:flex; align-items:center; gap:8px; min-width:0; padding:10px 8px; border:1px solid #c8d1c4; border-radius:12px; background:linear-gradient(135deg,#fffdf8,#eaf0e7); transition:border-color .3s,background .3s,box-shadow .3s; }
.online-seat .online-avatar { width:32px; height:32px; flex-basis:32px; font-size:16px; }
.online-seat > div,.online-member > div { min-width:0; }
.online-seat strong,.online-member strong { display:block; overflow-wrap:anywhere; font-weight:500; font-size:12px; line-height:1.5; }
.online-seat strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.online-seat small,.online-member small { display:block; margin-top:3px; color:var(--ink-soft); font-size:10px; line-height:1.5; }
.online-seat small::before { content:''; display:inline-block; width:5px; height:5px; margin-right:4px; border-radius:50%; background:#b1b8ac; transition:background .25s,box-shadow .25s; }
.online-seat[data-ready="true"] small::before,.online-seat[data-done="true"] small::before { background:#628875; box-shadow:0 0 0 2px #62887522; }
.online-seat[data-connected="false"]:not(.empty) { border-style:dashed; }
.online-seat[data-ready="true"] { border-color:#68957a; box-shadow:inset 0 3px #729981; background:#ecf4e7; }
.online-seat[data-self="true"] strong::after { content:" · 你"; font-size:10px; color:#648673; }
.online-seat.empty { border-style:dashed; background:#f7f6ed90; }
.online-room-notice { margin:5px 0; padding:5px 8px; background:#eceee4; border-radius:7px; color:#66705d; font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.online-ready-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0; }
.online-ready-actions .btn { flex:1; min-width:0; min-height:44px; padding:10px; font-size:13px; }
#btn-online-ready[aria-pressed="true"] { background:#e1eade; color:#496e54; border-color:#849b81; }
.online-room-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex-shrink:0; gap:8px; padding-top:6px; border-top:1px solid var(--line); }
.online-room-tools .btn { min-width:0; min-height:44px; padding:7px 2px; font-size:12px; letter-spacing:.03em; border-radius:12px; background:#fff9; transition:background .2s,border-color .2s,scale .16s; }
#btn-online-memes { color:#3c6952; border-color:#adc3aa; background:#e6eedf; }
.online-room-tools .btn:active { scale:.98; }
#online-waiting { margin-top:10px; padding:12px; border:1px solid #d5dccd; border-radius:12px; background:#fff9; }
.online-room-log ol { list-style:none; padding:0; font-size:12px; line-height:1.8; color:var(--ink-soft); overflow-wrap:anywhere; }
.online-event-banner { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:#f5f3e7; background:linear-gradient(125deg,#3c6156,#658471); }
.online-event-banner span { display:block; font-size:11px; opacity:.8; }
.online-event-banner strong { display:block; font:500 17px/1.5 ui-monospace,monospace; margin-top:2px; }
.online-event-banner b { display:block; font-size:21px; font-weight:500; }
.online-event-meta { display:flex; flex-wrap:wrap; gap:3px 10px; margin:5px 0 0; font-size:10px; color:var(--ink-soft); }
.online-players .online-member { justify-content:flex-start; gap:10px; }
.online-member .online-avatar { width:32px; height:32px; flex-basis:32px; font-size:15px; }
#online-room:not([data-phase="finished"]) .online-self { display:none; }
#online-room[data-phase="playing"] :is(.online-event-banner,#online-event-rules) { display:none; }
#online-room[data-phase="playing"] #online-duel-rules { display:none; }
#online-room .online-note { margin:5px 0; font-size:10px; }
#online-waiting > h3 { margin:0 0 6px; font-size:15px; }
#online-waiting .online-ready-actions { margin:12px 0 0; }
:is(#online-duel-rules,#online-event-rules) { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.online-eyebrow { color:#597d6b; font-size:11px; letter-spacing:.16em; }
.online-shell > h2 { margin:9px 0 8px; font-size:clamp(23px,6vw,30px); font-weight:500; line-height:1.55; }
.online-status { flex-shrink:0; margin:0 0 6px; font-size:11px; line-height:1.5; color:var(--ink-soft); }
.online-status[data-tone="error"] { color:var(--ng); }
.online-stage:not(#online-playing):not([hidden]) { animation:online-reveal .34s cubic-bezier(.2,.7,.25,1) both; }
@keyframes online-reveal { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
.online-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:14px; padding:4px; border:1px solid var(--line); border-radius:10px; background:#ebeae3; }
.online-tabs button { min-height:44px; border:0; border-radius:7px; color:var(--ink-soft); background:transparent; font:inherit; font-size:13px; line-height:1.4; cursor:pointer; transition:background .22s,color .22s,box-shadow .22s; }
.online-tabs button.active { color:var(--ink); background:#fffcf5; box-shadow:0 2px 8px #222a3e14; }
.online-note { margin:10px 0 15px; color:var(--ink-soft); font-size:11px; line-height:1.7; }
.online-field { display:grid; gap:6px; font-size:11px; color:var(--ink-soft); }
.online-field input,.online-field select,.online-join-row input,.online-admin-grid select { width:100%; min-height:44px; padding:9px 11px; border:1px solid #c8ccc8; border-radius:7px; outline:none; color:var(--ink); background:#fffdf7; font:inherit; font-size:14px; }
.online-field input:focus,.online-field select:focus,.online-join-row input:focus,.online-admin-grid select:focus { border-color:var(--accent); box-shadow:0 0 0 2px #4d5d8c20; }
.online-join-row .btn { min-height:44px; padding:8px 12px; font-size:12px; white-space:nowrap; }
.online-divider { display:flex; align-items:center; gap:10px; margin:18px 0 10px; color:var(--ink-soft); font-size:10px; }
.online-divider::before,.online-divider::after { content:""; height:1px; flex:1; background:var(--line); }
.online-join-row { display:grid; grid-template-columns:1fr 86px; gap:8px; }
.online-join-row input { text-transform:uppercase; letter-spacing:.14em; }
.online-shell button:disabled { opacity:.5; cursor:not-allowed; }
.online-code { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:15px; border:1px dashed #86a497; border-radius:9px; background:#f2f7f0; }
.online-code span { color:var(--ink-soft); font-size:11px; }
.online-code strong { font:600 24px/1.2 ui-monospace,Consolas,monospace; letter-spacing:.16em; color:#31594d; }
.online-code .btn { margin-left:auto; padding:8px 10px; font-size:11px; }
.online-players { list-style:none; display:grid; gap:8px; margin:16px 0; padding:0; }
.online-players li { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:8px 12px; border:1px solid var(--line); border-radius:7px; background:#fffcf5; font-size:12px; }
.online-players small { color:var(--ink-soft); }
.online-progress { display:flex; justify-content:space-between; gap:8px; margin:8px 0; font-size:12px; color:var(--ink-soft); }
.online-progress strong { color:#456f59; font-weight:500; }
.online-audio-controls { display:flex; align-items:center; gap:12px; margin:8px 0; }
.online-play { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; font:20px/1 sans-serif; }
.online-play::after { display:none; }
.online-timer { display:grid; flex:1; min-width:0; gap:7px; color:var(--ink-soft); font-size:11px; }
.online-audio-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:3px 10px; }
#online-time-text { margin-left:auto; text-align:right; overflow-wrap:anywhere; }
.online-timer > div { height:5px; overflow:hidden; border-radius:8px; background:#dddcd3; }
.online-timer i { display:block; width:100%; height:100%; background:#648676; transition:width .1s linear; }
.online-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.online-options .option { width:100%; min-width:0; min-height:72px; padding:9px; font-family:inherit; color:var(--ink); overflow-wrap:anywhere; }
.online-options .option:hover { transform:none; }
.online-options .option.has-cover { padding-right:47px; }
.online-options .opt-cover { width:32px; height:32px; right:8px; }
.online-options .option .opt-ja { font-size:13px; line-height:1.35; letter-spacing:0; }
.online-options .option .opt-zh { font-size:10px; line-height:1.35; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.online-options .option:disabled { opacity:1; }
.online-feedback img { flex:0 0 28px; width:28px; height:28px; border-radius:4px; object-fit:cover; }
.online-feedback p { min-width:0; overflow-wrap:anywhere; }
.online-options .option.selected:not(.correct):not(.wrong) { border-color:var(--accent); box-shadow:inset 3px 0 var(--accent); }
.online-feedback { display:flex; align-items:center; gap:7px; margin-top:6px; min-height:40px; padding:6px; border-radius:8px; background:#eaf1e5; color:#325e43; font-size:11px; line-height:1.5; }
.online-feedback[data-correct="false"] { background:#f5e8e5; color:#8a4541; }
.online-result-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:16px 0; border-radius:14px; background:linear-gradient(125deg,#3c6156,#658471); color:#fffdf0; text-align:center; box-shadow:inset 0 1px #ffffff30; }
.online-result-stats > div + div,.online-admin-overview > div + div { border-left:1px solid #ffffff30; }
.online-result-stats dt { font-size:11px; color:#e1eade; }
.online-result-stats dd { margin:8px 0 0; font:500 clamp(18px,4.5vw,28px)/1.3 ui-monospace,monospace; }
.online-result-list { list-style:none; display:grid; gap:6px; margin:8px 0; padding:0; }
.online-result-list li { display:grid; grid-template-columns:28px 32px minmax(0,1fr) auto; gap:10px; align-items:center; min-height:58px; padding:10px; border:1px solid var(--line); border-radius:9px; background:#fffdf7; font-size:12px; }
.online-result-list li[data-self="true"] { border-color:#7e9c86; background:#eaf0e5; }
.online-result-list .online-avatar { width:32px; height:32px; font-size:14px; }
.online-self strong,.online-result-list li > span:not(.online-avatar) { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.online-result-list b { color:#577568; font-size:15px; }
.online-result-list small { color:var(--ink-soft); font-size:10px; }
#btn-online-result-home { width:100%; min-height:44px; margin:0; font-size:12px; }
#online-room[data-phase="finished"] .online-self { border:0; padding:8px 0; margin:0; }
#online-room[data-phase="finished"] .online-self .online-avatar { width:36px; height:36px; flex-basis:36px; }
#online-room[data-phase="finished"] :is(.online-room-head .online-code,#online-round-state) { display:none; }
.online-admin { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; margin-top:0; padding:14px; }
.online-admin-intro { flex-shrink:0; border-left:3px solid #628875; padding-left:10px; margin-bottom:10px; }
.online-admin-intro .online-eyebrow { margin:0; }
.online-admin-intro h2 { margin:3px 0; font-size:22px; }
.online-admin-intro .online-note { margin:0; }
.online-admin h3 { margin:0; font-size:14px; font-weight:500; }
#online-admin-login { overflow:auto; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fffcf7; }
#btn-online-admin-login { width:100%; margin-top:12px; }
#online-admin-controls { flex:1; min-height:0; display:flex; flex-direction:column; }
.online-admin-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); flex-shrink:0; margin:0 0 12px; padding:10px 0; border-radius:12px; background:linear-gradient(125deg,#3c6156,#658471); color:#fffdf0; text-align:center; }
.online-admin-overview dt { font-size:10px; opacity:.85; }
.online-admin-overview dd { margin:5px 0 0; font:500 24px/1.2 ui-monospace,monospace; }
.online-admin-toolbar { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.online-admin-toolbar h3 { flex:1; }
.online-admin-filters { display:grid; grid-template-columns:1fr 130px; align-items:center; gap:8px; flex-shrink:0; margin-top:8px; }
#online-admin-filter { grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:3px; }
#online-admin-filter button { min-height:44px; font-size:11px; }
#online-admin-search { width:100%; min-width:0; min-height:44px; padding:8px; font-size:16px; text-transform:uppercase; }
#online-admin-room-count { flex-shrink:0; margin:6px 0; font-size:10px; }
.online-admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.online-admin-grid label { display:grid; gap:5px; color:var(--ink-soft); font-size:10px; }
.online-admin-check { display:flex !important; align-items:center; gap:8px !important; }
.online-admin-check input { width:18px; height:18px; }
.online-admin .btn { min-height:44px; padding:8px 12px; font-size:11px; }
#btn-online-admin-create { width:100%; margin:0; }
.online-admin-rooms-head { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.online-admin-rooms { flex:1; min-height:0; display:grid; align-content:start; gap:8px; overflow:auto; overscroll-behavior:contain; padding:2px 4px 2px 0; scrollbar-gutter:stable; }
.online-admin-room { min-width:0; padding:10px; border:1px solid #c8d1c4; border-radius:12px; background:#fffcf7; font-size:11px; }
.online-admin-room[data-fresh="true"] { border-color:#668b70; }
.online-admin-room header { display:flex; align-items:center; gap:6px; }
.online-admin-code { font:600 16px/1.5 ui-monospace,monospace; letter-spacing:.08em; }
.online-admin-kind { color:var(--ink-soft); font-size:10px; }
.online-admin-badge { margin-left:auto; border-radius:6px; padding:4px 6px; color:#5d705f; background:#eaf0e5; font-size:10px; }
.online-admin-room[data-phase="playing"] .online-admin-badge { color:#fff; background:#557b65; }
.online-admin-room-info { display:flex; flex-wrap:wrap; gap:4px 12px; margin:7px 0; color:var(--ink-soft); }
.online-admin-room-info small { font-size:10px; }
.online-admin-room-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.online-admin-room-actions button:first-child { border-color:#a8bea9; background:#eef3e8; color:#426c59; }
.online-admin-room-actions button:last-child { color:var(--ng); }
.online-admin-empty { display:grid; gap:8px; justify-items:center; padding:30px 10px; color:var(--ink-soft); text-align:center; border:1px dashed #bdc9bd; border-radius:12px; }
.online-admin-empty strong { font-size:14px; font-weight:500; }
.online-admin-empty small { font-size:11px; line-height:1.6; }
@media(max-width:760px) {
  .online-shell { padding:16px; }
  .online-identity { flex-wrap:wrap; padding:12px; gap:10px; }
  .online-identity .btn { width:100%; }
  .online-result-list li { grid-template-columns:24px 32px minmax(0,1fr); gap:4px 8px; }
  .online-result-list b,.online-result-list .online-avatar { grid-row:1 / 3; }
  .online-result-list small { grid-column:3; }
}
@media(max-width:360px) {
  .online-shell { padding:12px; }
  .online-code strong { font-size:19px; }
}
@media(min-width:761px) {
  :where(html:not(.toy-compact)) .online-options .option { min-height:90px; padding:12px; }
  :where(html:not(.toy-compact)) .online-options .option .opt-ja { font-size:16px; }
  :where(html:not(.toy-compact)) .online-options .option .opt-zh { font-size:12px; }
  :where(html:not(.toy-compact)) .online-progress,:where(html:not(.toy-compact)) .online-seat strong { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
  .online-stage:not([hidden]),.online-options button { animation:none; transition:none; }
}

.online-self { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); margin-bottom:12px; }
.online-self > div { min-width:0; flex:1; }
.online-self strong { font-size:14px; }
.online-self small,.online-self > span:last-child { font-size:11px; color:var(--ink-soft); }
.online-self small { display:block; margin-top:4px; }
.online-self > span:last-child { max-width:42%; text-align:right; }
.online-member[data-self="true"] { border-left:2px solid var(--accent); }
.online-confirm { width:min(420px,calc(var(--dialog-width) - 32px)); max-height:min(80dvh,var(--dialog-height)); overflow:auto; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--paper,#f5f1e8); color:var(--ink); box-shadow:0 12px 60px #18223b40; }
.online-confirm[open] { animation:online-reveal .2s ease; }
.online-confirm::backdrop { background:#18223b66; backdrop-filter:blur(3px); }
.online-confirm h3 { font-size:19px; font-weight:500; }
.online-confirm p { margin:16px 0; font-size:14px; line-height:1.8; }
.online-confirm > div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.online-confirm .btn { min-width:0; min-height:44px; padding:10px; font-size:12px; }
.online-admin-dialog { width:min(640px,calc(var(--dialog-width) - 24px)); padding:14px; max-height:min(94dvh,var(--dialog-height)); overflow:hidden; }
.online-admin-dialog[open] { display:flex; flex-direction:column; }
.online-admin-dialog header { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-shrink:0; padding-bottom:8px; border-bottom:1px solid var(--line); }
.online-admin-dialog h3 { margin:0; font-size:18px; }
.online-admin-dialog :is(header,footer) .btn { flex-shrink:0; }
.online-admin-dialog p { margin:6px 0; font-size:11px; line-height:1.6; }
.online-admin-dialog > .online-admin-setup-body { display:block; flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding-right:4px; scrollbar-gutter:stable; }
.online-admin-section { padding:10px 0; }
.online-admin-section + .online-admin-section { border-top:1px solid var(--line); }
.online-admin-section .online-type-picker { margin:8px 0; }
.online-admin-dialog .online-admin-grid label,.online-admin-dialog .online-admin-check { font-size:11px; }
.online-admin-dialog footer { flex-shrink:0; border-top:1px solid var(--line); padding-top:8px; }
.online-admin-dialog footer .online-setup-preview { margin:0 0 6px; }
.online-admin-watch { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.online-admin-watch .online-eyebrow { font-size:10px; margin:0 0 3px; }
.online-watch-banner { flex-shrink:0; margin:4px 0; padding:6px 10px; border-radius:10px; background:linear-gradient(125deg,#3c6156,#658471); color:#fffdf0; }
#online-watch-progress { font-size:12px; }
#online-watch-summary { opacity:.85; font-size:10px; }
.online-watch-banner p { margin:2px 0; }
#online-watch-meter { height:4px; overflow:hidden; background:#ffffff40; border-radius:4px; margin:4px 0; }
#online-watch-meter i { display:block; height:100%; background:#d9e8bc; width:0; transition:width .3s ease; }
.online-watch-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding-right:4px; scrollbar-gutter:stable; }
.online-watch-options { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:6px 0 12px; padding:0; }
.online-watch-options:empty { display:none; }
.online-watch-options li { display:flex; align-items:center; gap:7px; min-width:0; padding:6px; border:1px solid var(--line); border-radius:8px; background:#fff8; font-size:11px; }
.online-watch-options img { flex-shrink:0; width:30px; height:30px; border-radius:4px; object-fit:cover; }
.online-watch-options span { overflow-wrap:anywhere; line-height:1.5; }
.online-watch-players { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0; padding:0; }
.online-watch-players li { display:flex; align-items:center; gap:8px; min-width:0; font-size:11px; padding:8px; border:1px solid var(--line); background:#fff8; border-radius:10px; transition:background .25s,border-color .25s; }
.online-watch-players .online-avatar { width:30px; height:30px; flex-basis:30px; font-size:14px; }
.online-watch-players li > div { flex:1; min-width:0; }
.online-watch-players strong { display:block; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.online-watch-players small { display:block; margin-top:4px; font-size:9px; color:var(--ink-soft); }
.online-watch-player-state { flex:0 0 54px; font-size:10px; text-align:right; line-height:1.5; color:#5c7567; }
.online-watch-players li[data-submitted="true"] { border-color:#799a7d; background:#e8f0e1; }
.online-admin-watch footer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:4px; }
#btn-online-watch-close-room { color:var(--ng); }
@media(max-width:600px) { .online-watch-players { grid-template-columns:1fr; } .online-admin-filters { grid-template-columns:1fr 106px; } }
@media(max-height:600px) { .online-admin-intro .online-note { display:none; } .online-admin-intro { margin-bottom:6px; } .online-admin-intro h2 { font-size:18px; } .online-admin-overview { padding:6px 0; margin-bottom:7px; } .online-admin-overview dd { font-size:19px; margin-top:2px; } }
.online-meme-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; min-height:0; overflow:auto; padding:3px; }
.online-meme-picker button { display:grid; grid-template-rows:52px auto; gap:4px; min-width:0; min-height:76px; border:1px solid var(--line); border-radius:11px; background:#fffcf7; color:var(--ink-soft); font:inherit; padding:7px 3px; cursor:pointer; transition:scale .16s,background .2s,border-color .2s,box-shadow .2s; }
.online-meme-picker img { width:100%; height:52px; object-fit:contain; }
.online-meme-picker button > span { font-size:10px; line-height:1.4; }
.online-meme-picker button[aria-pressed="true"] { border-color:#628875; background:#e5eedf; color:#355e49; box-shadow:inset 0 0 0 1px #628875; }
.online-meme-picker button:active { scale:.96; }
#online-memes:not([hidden]) { display:flex; flex-direction:column; overflow:hidden; }
#online-memes > .online-note,.online-meme-compose { flex-shrink:0; }
.online-meme-compose { display:flex; align-items:center; gap:10px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
.online-meme-preview { display:flex; align-items:center; gap:8px; flex:1; min-width:0; min-height:44px; font-size:11px; color:var(--ink-soft); }
.online-meme-preview img { width:40px; height:40px; object-fit:contain; }
.online-meme-preview span { overflow-wrap:anywhere; }
#btn-online-meme-send { flex-shrink:0; }
.online-reaction-space { position:relative; flex:0 0 0; min-height:0; display:flex; align-items:center; }
.online-reaction-placeholder { margin:0; width:100%; color:#8c9a88; font-size:10px; letter-spacing:.08em; text-align:center; }
.online-reaction-space:has(.online-reaction) .online-reaction-placeholder { visibility:hidden; }
.online-reactions { position:absolute; inset:5px 0; display:flex; align-items:stretch; gap:8px; pointer-events:none; }
.online-reaction { display:flex; align-items:center; gap:7px; flex:0 1 230px; min-width:0; padding:5px 8px; border:1px solid #cad8c3; border-radius:14px 14px 14px 4px; background:#fafcf5; box-shadow:0 3px 10px #2a39500a; animation:online-sticker .28s cubic-bezier(.2,.8,.25,1) both; transition:opacity .4s,translate .4s; }
.online-reaction-meme { flex:0 0 48px; width:48px; height:48px; object-fit:contain; }
.online-reaction > div { min-width:0; }
.online-reaction-byline { display:flex; align-items:center; gap:4px; min-width:0; }
.online-reaction-byline .online-avatar { flex-basis:18px; width:18px; height:18px; font-size:10px; }
.online-reaction strong,.online-reaction small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.online-reaction strong { font-weight:500; }
.online-reaction small { margin-top:4px; color:#6f8768; font-size:9px; }
.online-reaction.leaving { animation:none; opacity:0; translate:0 4px; }
@keyframes online-sticker { from { opacity:0; transform:translateY(7px) scale(.95); } to { opacity:1; transform:none; } }
@media(max-width:600px) { .online-reaction { flex:1; padding:5px; gap:5px; } }
@media(max-height:600px) {
  .online-reaction-space { flex-basis:0; }
  .online-reactions { inset:3px 0; }
  .online-reaction { border-radius:8px; padding:2px 5px; gap:5px; }
  .online-reaction-meme { flex-basis:28px; width:28px; height:28px; }
  .online-reaction small { display:none; }
  .online-meme-picker button { grid-template-rows:40px auto; min-height:64px; }
  .online-meme-picker img { height:40px; }
  .online-room-head { margin-bottom:4px; padding-top:0; padding-bottom:4px; }
  .online-seat { padding:5px 6px; }
  #online-waiting { margin-top:5px; padding:8px; }
}
@media(prefers-reduced-motion:reduce) { .online-confirm[open],.online-reaction,.online-admin-watch { animation:none; } .online-meme-picker button,.online-reaction,.online-room-tools .btn,.online-seat,.online-seat small::before { transition:none; } }

.online-directory { margin:18px 0; }
.online-discovery { display:grid; gap:8px; max-height:280px; overflow:auto; }
.online-discovery-room { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff8; }
.online-discovery-room > div { flex:1; min-width:0; }
.online-discovery-room strong,.online-discovery-room small { display:block; overflow-wrap:anywhere; font-size:12px; }
.online-discovery-room small { font-size:11px; color:var(--ink-soft); margin-top:6px; line-height:1.6; }
.online-discovery-room .btn { flex-shrink:0; min-height:44px; padding:8px; font-size:12px; }
.online-album-picker { margin:12px 0; border:1px solid var(--line); border-radius:10px; padding:0 12px; }
.online-album-picker summary { padding:14px 0; min-height:44px; cursor:pointer; font-size:12px; }
.online-albums { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; max-height:250px; overflow:auto; margin-bottom:12px; }
.online-albums label { display:flex; align-items:center; gap:8px; min-height:52px; padding:6px; background:#fff8; border:1px solid var(--line); border-radius:7px; font-size:11px; overflow-wrap:anywhere; cursor:pointer; }
.online-albums label:has(:checked) { border-color:#648676; background:#e4eee0; }
.online-albums input { flex-shrink:0; width:18px; height:18px; accent-color:#557b65; }
.online-albums img { flex:0 0 32px; width:32px; height:32px; object-fit:cover; border-radius:4px; }
.online-presence { display:flex; align-items:center; gap:5px; min-width:0; }
.online-live-players { display:flex; flex:1; min-width:0; gap:6px; overflow:hidden; padding:5px 3px; }
.online-live-player { position:relative; border-radius:8px; padding:4px; background:#eff2e8; flex:0 0 36px; display:grid; justify-items:center; align-items:center; gap:3px; text-align:center; font-size:9px; }
.online-live-player small { display:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.online-live-player:not([data-self="true"]) > span:last-child { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.online-live-player[data-submitted="true"]:not([data-self="true"])::after { content:'✓'; color:#fff; background:#3e7a5e; position:absolute; right:0; bottom:0; width:12px; height:12px; border-radius:50%; font:10px/12px sans-serif; }
.online-live-player[data-self="true"] { flex:1 1 96px; min-width:70px; max-width:130px; grid-template-columns:32px minmax(0,1fr); gap:2px 6px; justify-items:start; text-align:left; font-size:10px; background:#e4ecde; box-shadow:inset 0 0 0 1px #a3b69a; }
.online-live-player[data-self="true"] small { display:block; width:100%; font-weight:600; color:#426c59; }
.online-live-player[data-self="true"] .online-avatar { grid-row:1 / 3; }
.online-presence-more { flex:0 0 48px; min-height:44px !important; padding:4px !important; font-size:10px !important; line-height:1.4; }
.online-presence-more :is(span,b) { display:block; font-weight:500; }
@media(max-width:420px) { .online-live-player:nth-child(n+5) { display:none; } }
.online-live-player .online-avatar { width:32px; height:32px; flex-basis:32px; font-size:16px; opacity:.55; filter:grayscale(.8); transition:filter .25s,opacity .25s,box-shadow .25s; }
.online-live-player[data-submitted="true"] .online-avatar { opacity:1; filter:none; box-shadow:0 0 0 3px #73957b,0 0 14px #73957b66; }
.online-live-player[data-submitted="true"] > span:last-child { color:#35664c; font-weight:600; }
.online-live-player[data-state="观战"] .online-avatar { filter:grayscale(1); opacity:.4; }
.online-history-dialog { width:min(620px,calc(var(--dialog-width) - 24px)); }
.online-history-dialog[open] { display:flex; flex-direction:column; max-height:min(90dvh,var(--dialog-height)); overflow:hidden; }
.online-history-dialog > header,.online-history-dialog > p { flex-shrink:0; }
.online-history-dialog p { font-size:12px; margin:10px 0; line-height:1.6; }
#online-record-detail { display:flex; flex-direction:column; min-height:0; }
#online-record-detail > :not(.online-record-answers) { flex-shrink:0; }
#online-record-warning:empty { display:none; }
.online-record-answers,.online-history-dialog > .online-record-list { min-height:0; }
.online-history-dialog [hidden] { display:none !important; }
.online-history-dialog > .online-record-list { display:grid; grid-template-columns:1fr; max-height:50dvh; overflow:auto; gap:8px; }
.online-record { width:100%; min-height:62px; text-align:left; padding:12px; border:1px solid var(--line); border-radius:9px; background:#fff8; color:var(--ink); font:inherit; cursor:pointer; }
.online-record strong,.online-record small,.online-record-answers strong,.online-record-answers small { display:block; overflow-wrap:anywhere; font-size:12px; line-height:1.7; }
.online-record small,.online-record-answers small { font-size:11px; color:var(--ink-soft); }
.online-record-answers { list-style:none; padding:0; max-height:40dvh; overflow:auto; }
.online-record-answers li { display:flex; gap:10px; align-items:center; padding:10px; margin:7px 0; border-left:3px solid #b99d79; background:#fff8; border-radius:6px; }
.online-record-answers li[data-correct="true"] { border-color:#648676; }
.online-record-answers img { width:40px; height:40px; border-radius:5px; }
@media(max-width:480px) { .online-albums { grid-template-columns:1fr; } .online-history-dialog { padding:16px; } }
@media(prefers-reduced-motion:reduce) { .online-live-player .online-avatar { transition:none; } }
.online-room-panel { padding:14px; width:min(540px,calc(var(--dialog-width) - 24px)); }
.online-room-panel[open] { display:flex; flex-direction:column; max-height:min(65dvh,var(--dialog-height)); overflow:hidden; }
.online-room-panel [hidden] { display:none !important; }
.online-room-panel > header { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-shrink:0; }
.online-room-panel > header h3 { flex:1; min-width:0; font-size:16px; }
.online-menu-links,.online-lobby-actions { display:grid; gap:10px; margin:14px 0; }
:is(.online-menu-links,.online-lobby-actions) .btn { min-height:62px; padding:10px 12px; text-align:left; font-size:14px; letter-spacing:0; }
:is(.online-menu-links,.online-lobby-actions) span { display:block; margin-top:5px; font-size:11px; opacity:.8; }
#online-create-box .btn { width:100%; margin:2px 0 0; }
#online-lobby-panel[open] { max-height:min(85dvh,var(--dialog-height)); }
#btn-online-leave { color:var(--ng); }
.online-room-panel > section { overflow:auto; min-height:0; overscroll-behavior:contain; }
.online-room-panel > section:not([hidden]) { animation:online-reveal .2s ease; }
.online-confirm .btn { touch-action:manipulation; transition:background-color .18s,border-color .18s,scale .16s; }
.online-confirm .btn:not(:disabled):active { scale:.975; }
.online-confirm :is(button,input,select,summary):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.online-room-panel p { margin:8px 0; font-size:12px; }
#online-rules-albums { padding-left:20px; font-size:12px; line-height:1.8; }
#online-copy-value { width:100%; padding:12px; font:20px ui-monospace,monospace; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px; margin-bottom:10px; }
@media(max-height:560px) { .online-options .option { min-height:60px; padding:5px; } .online-audio-controls { margin:4px 0; } .online-progress { margin:4px 0; } .online-live-players { padding:0; } .online-live-player { padding:2px; } }
@media(max-height:520px) { .online-audio-controls,.online-progress { margin:2px 0; } .online-event-meta { margin-top:1px; } .online-reactions { inset:2px 0; } .online-reaction-meme { flex-basis:22px; width:22px; height:22px; } }
.online-reaction-space:has(.online-reaction) { flex-basis:64px; }
body:is([data-screen="online"],[data-screen="online-admin"]) { font-family:system-ui,-apple-system,"PingFang SC","Hiragino Sans","Microsoft YaHei",sans-serif; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
#screen-online,#screen-online-admin,.online-confirm { touch-action:pan-y; }
body:is([data-screen="online"],[data-screen="online-admin"]) :is(button,input,select) { font-family:inherit; letter-spacing:normal; }
.online-confirm :is(input,select),#screen-online :is(input,select),#screen-online-admin :is(input,select) { font-size:16px; }
.online-ranking-rule { line-height:1.7; overflow-wrap:anywhere; padding-bottom:12px; }
.online-admin-review { padding:6px 0; border-block:1px solid var(--line); }
.online-admin-review label { min-width:0; flex:1; display:grid; gap:4px; font-size:12px; }
.online-admin-review select,.online-admin-review input { width:100%; min-height:44px; }
#online-review-answer { display:flex; align-items:center; gap:8px; padding:10px 0; font-size:13px; }
#online-review-page { font-size:11px; align-self:center; white-space:nowrap; }
.online-ready-actions:has(#online-review-page) { display:flex; }
#online-rematch { margin-top:8px; }
@media(max-height:600px) { .online-reaction-space:has(.online-reaction) { flex-basis:40px; } }
@media(max-height:520px) { #screen-online .online-shell:has(#online-room:not([hidden])) { padding:8px; } .online-room-head { margin-bottom:2px; } .online-options .option { padding:4px; } }
@media(prefers-reduced-motion:reduce) { .online-room-panel > section:not([hidden]),.online-confirm .btn { animation:none; transition:none; } }

/* Creation: one scroll area and a persistent confirmation, never a wall of controls. */
#online-create-pane:not([hidden]) { display:flex; flex-direction:column; overflow:hidden; }
.online-setup-body { min-height:0; overflow:auto; overscroll-behavior:contain; padding:0 3px 0 0; }
.online-step { color:#527460; font:600 10px/1.5 sans-serif; letter-spacing:.08em; margin:16px 0 10px !important; }
.online-type-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; border:0; padding:0; margin:0; min-width:0; }
.online-type-picker legend { font-size:11px; color:var(--ink-soft); margin-bottom:7px; }
.online-type-picker label { position:relative; min-width:0; cursor:pointer; }
.online-type-picker input { position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.online-type-picker span { display:grid; place-items:center; min-height:44px; padding:6px 2px; border:1px solid var(--line); border-radius:8px; background:#fff9; font-size:12px; transition:background .2s,box-shadow .2s,color .2s; }
.online-type-picker :checked + span { color:#315c47; border-color:#648676; background:#e3edde; box-shadow:inset 0 -2px #648676; }
.online-type-picker :focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.online-related { min-height:44px; font-size:12px; color:var(--ink-soft); }
.online-albums [data-empty="true"] { opacity:.65; }
.online-setup-preview { font-size:11px !important; line-height:1.5 !important; color:#416b50; margin:8px 0 !important; }
.online-setup-preview[data-empty="true"] { color:var(--ng); }
.online-create-footer { flex-shrink:0; padding-top:4px; border-top:1px solid var(--line); background:var(--paper,#f5f1e8); }
.online-setup { margin:12px 0 20px; border:1px solid #bfcebf; padding:0 12px 12px; border-radius:12px; background:#f7f9f1aa; }
.online-setup > summary { font-size:15px; color:var(--ink); padding:15px 0 3px; }
.online-setup summary small { display:block; margin:6px 0 8px; font-size:11px; color:var(--ink-soft); }
.online-admin-grid label { min-width:0; }
#online-lobby .online-lobby-actions .btn { border-radius:12px; min-height:76px; }
#online-lobby .online-lobby-actions span { line-height:1.6; font-size:12px; }
#online-lobby .online-tabs { margin-top:20px; }
@media(prefers-reduced-motion:reduce) { .online-type-picker span { transition:none; } }
.online-observer-page { container-type:inline-size; display:flex; flex:1; min-height:0; width:100%; max-height:none; padding:12px; }
.online-observer-page .btn { min-width:0; min-height:44px; padding:7px; font-size:12px; letter-spacing:0; }
.online-observer-page h4 { margin:8px 0; }
#online-watch-tabs { flex-shrink:0; margin:0 0 4px; padding:0; }
#online-watch-options [data-correct="true"],#btn-online-review-follow[aria-pressed="true"] { background:#e4eee0; border-color:#648676; color:#315c47; }
@container(min-width:330px) { .online-observer-page footer { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.toy-compact .online-watch-players { grid-template-columns:1fr; }
.toy-compact .online-albums { grid-template-columns:1fr; }
.toy-small .online-observer-page .online-eyebrow,.toy-small .online-admin-intro .online-note { display:none; }
.toy-small .online-admin-intro h2 { font-size:18px; }
@media(max-height:600px) { .online-observer-page .online-eyebrow { display:none; } }