.btn/.crt/.fx/.dot 这些
     arcade.css 已经有的一律复用 —— 共享文件不改，改了会波及线上四个页面。 */
  body { height:100vh; overflow:hidden; }

  .topbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:12px 20px; border-bottom:1px solid var(--edge); background:var(--void-2); flex-wrap:wrap; }
  .game-title { font-size:16px; font-weight:700; }
  .game-title-en { font-family:var(--mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--dim); }
  .net { font-family:var(--mono); font-size:12px; }
  .net.p2p { color:var(--live); } .net.relay { color:var(--neon-c); } .net.connecting { color:var(--dim); }

  
  
  
  .btn-icon { width:30px; height:30px; padding:0; display:inline-flex;
    align-items:center; justify-content:center; font-size:16px; line-height:1; }
  .pop-wrap { position:relative; display:flex; align-items:center; gap:6px; }
  .netpop { position:absolute; top:calc(100% + 6px); right:0; z-index:95;
    width:min(268px, calc(100vw - 24px));
    padding:10px 12px; background:var(--void-2); border:1px solid var(--edge);
    display:flex; flex-direction:column; gap:1px;
    box-shadow:0 10px 30px rgba(0,0,0,.5); }
  .netpop[hidden] { display:none; }
  
  
  .netpop-row { display:flex; align-items:baseline; justify-content:space-between;
    gap:10px; font-size:12px; color:var(--dim); padding:4px 0;
    border-bottom:1px solid var(--edge); }
  .netpop-row:last-child { border-bottom:none; }
  .netpop-row > b { font-family:var(--mono); font-size:12px; color:var(--ink);
    text-align:right; }
  
  .netpop-row > b.netpop-bad { color:var(--neon-c); }
  .netpop-sect { font-size:11px; letter-spacing:.16em; color:var(--dim);
    font-family:var(--mono); margin-top:9px; padding-bottom:2px; }
  .netpop-sect:first-child { margin-top:0; }
  
  #s-peers { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--dim); }
  
  
  .share-panel-v2 { gap:0; }
  .share-link-field { position:relative; border:1px solid var(--edge); background:var(--void); }
  #share-link { width:100%; box-sizing:border-box; border:none; background:none; outline:none;
    padding:8px 32px 8px 8px; font-family:var(--mono); font-size:11px; color:var(--ink); }
  .share-copy-btn { position:absolute; right:2px; top:2px; bottom:2px; width:26px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; color:var(--dim); cursor:pointer; padding:0;
    transition:color .16s ease, background .16s ease; }
  .share-copy-btn:hover { color:var(--neon-b); background:var(--panel); }
  .share-copy-btn svg { width:14px; height:14px; }
  
  .share-divider { height:1px; background:var(--edge); margin:10px -12px; }
  .share-sect-label { font-family:var(--mono); font-size:11px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
  #share-actions { flex-wrap:wrap; align-items:center; gap:10px; }
  
  .icon-ring { width:38px; height:38px; border-radius:50%; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    border:1.5px solid var(--edge); color:var(--dim); background:none; padding:0; cursor:pointer;
    font-family:var(--mono); font-weight:700; font-size:12px;
    transition:border-color .16s ease, color .16s ease; }
  .icon-ring svg { width:19px; height:19px; }
  .icon-ring.wa:hover { border-color:var(--neon-c); color:var(--neon-c); }
  .icon-ring.tg:hover { border-color:var(--neon-b); color:var(--neon-b); }
  .icon-ring.qq { letter-spacing:-.02em; }
  .icon-ring.qq:hover { border-color:var(--neon-a); color:var(--neon-a); }
  .icon-ring.more:hover { border-color:var(--dim); color:var(--ink); }
  .icon-ring.more svg { width:17px; height:17px; }
  
  #s-peers b { font-family:var(--mono); }
  #s-sync { font-size:12px; }
  
  .voice-btns { display:flex; gap:8px; flex-wrap:wrap; }
  .voice-status-line { font-size:12px; color:var(--dim); margin-top:8px; }

  
  .layout { display:grid; grid-template-columns:280px 1fr 280px; flex:1; min-height:0;
    transition:grid-template-columns .18s ease; }
  .layout.dynax-offline { grid-template-columns:1fr; }
  .layout.dynax-offline .roomlist, .layout.dynax-offline .sidebar { display:none; }
  .layout.roomlist-collapsed { grid-template-columns:34px 1fr 280px; }
  
  .layout.playing { grid-template-columns:1fr 280px; }
  .layout.playing.sidebar-collapsed { grid-template-columns:1fr 34px; }
  .layout.playing > .roomlist { display:none; }
  
  .layout.playing.showing-moves { grid-template-columns:280px 1fr 280px; }
  .layout.playing.showing-moves.sidebar-collapsed { grid-template-columns:280px 1fr 34px; }
  .layout.playing.showing-moves > .roomlist { display:flex; }
  .layout.sidebar-collapsed   { grid-template-columns:280px 1fr 34px; }
  .layout.roomlist-collapsed.sidebar-collapsed { grid-template-columns:34px 1fr 34px; }

  
  .roomlist { border-right:1px solid var(--edge); background:var(--void-2);
    display:flex; flex-direction:column; min-height:0; overflow-y:auto; position:relative; }
  .roomlist.collapsed { overflow:hidden; border-right:1px solid var(--edge); }
  .roomlist.collapsed > *:not(.roomlist-hd) { display:none; }
  .roomlist.collapsed .roomlist-hd > span { display:none; }
  
  .roomlist-hd { padding:10px 10px 8px 14px; font-family:var(--cjk); font-size:12px;
    letter-spacing:normal; color:var(--dim); display:flex; align-items:center;
    justify-content:space-between; gap:8px; flex:none; border-bottom:1px solid var(--edge); }
  .panel-collapse-btn { font-family:var(--mono); font-size:16px; color:var(--neon-b); cursor:pointer;
    background:none; border:none; padding:4px 6px; line-height:1; flex:none; }
  .panel-collapse-btn:hover { color:var(--neon-a); }
  .room-item { padding:10px 14px; border-bottom:1px solid var(--edge); cursor:pointer;
    border-left:2px solid transparent; }
  .room-item:hover { background:var(--panel); }
  .room-item.on { border-left-color:var(--neon-b); background:var(--panel); }
  .room-item.new { border-left-color:var(--neon-c); }
  .room-item-t { font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .room-item-s { font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:3px; }
  .rl-empty { padding:18px 14px; font-size:12px; color:var(--dim); line-height:1.8; }

  
  .stage-wrap { display:flex; align-items:center; justify-content:center; padding:22px; background:#000;
    min-width:0; min-height:0; position:relative; }
  .stage-wrap:fullscreen, .stage-wrap.pseudo-fullscreen { padding:0; }
  
  .stage-wrap.pseudo-fullscreen { position:fixed; inset:0; z-index:200; width:100vw; height:100vh;
    height:100dvh; min-width:0; min-height:0; }
  
  .stage-wrap:fullscreen > .friend-float, .stage-wrap.pseudo-fullscreen > .friend-float { z-index:110; }
  
  .fs-chat { position:absolute; right:14px; bottom:14px; z-index:6;
    width:min(300px, 34vw); max-height:32vh; display:none; flex-direction:column;
    gap:3px; overflow:hidden; pointer-events:none;
    
    text-shadow:0 1px 3px #000, 0 0 8px #000; }
  .stage-wrap:fullscreen .fs-chat.on, .stage-wrap.pseudo-fullscreen .fs-chat.on { display:flex; }
  .fs-chat .msg { font-size:12px; line-height:1.45; color:var(--ink); opacity:.92;
    word-break:break-word; }
  .fs-chat .msg.sys { color:var(--neon-c); }
  .fs-chat .msg .who { color:var(--neon-b); margin-right:6px; }
  
  .fs-chat-btn { right:14px; bottom:14px; display:none; }
  
  .fs-set-btn { top:12px; right:12px; display:none; }
  .stage-wrap:fullscreen .fs-set-btn, .stage-wrap.pseudo-fullscreen .fs-set-btn { display:block; }
  
  .stage-wrap:fullscreen .crt-tune, .stage-wrap.pseudo-fullscreen .crt-tune { position:absolute; top:52px; right:12px;
    left:auto; width:min(272px, calc(100vw - 24px)); z-index:95; }
  .stage-wrap:fullscreen .fs-chat-btn, .stage-wrap.pseudo-fullscreen .fs-chat-btn { display:block; }
  .fs-chat-btn:hover { color:var(--ink); border-color:var(--neon-b); }
  
  .fs-chat-btn.up { bottom:calc(32vh + 20px); }
  
  .reg-nudge { position:absolute; left:50%; transform:translateX(-50%); top:14px; z-index:8;
    width:min(420px, calc(100% - 28px)); padding:12px 14px;
    background:var(--void-2); border:1px solid var(--neon-b);
    box-shadow:0 10px 30px rgba(0,0,0,.55);
    display:flex; flex-direction:column; gap:8px; }
  .reg-nudge[hidden] { display:none; }
  .reg-nudge .t { font-size:12px; color:var(--ink); line-height:1.6; }
  .reg-nudge .b { display:flex; gap:8px; justify-content:flex-end; }
  .reg-nudge .b .btn { padding:5px 12px; font-size:12px; }
  
  .stage-wrap:fullscreen::before, .stage-wrap.pseudo-fullscreen::before {
    content:""; position:absolute; inset:0; z-index:90; pointer-events:none;
    
    background-image:var(--crt-scanlines);
    background-position:0 var(--crt-scan-phase);
    mix-blend-mode:multiply;
  }
  .stage-wrap:fullscreen::after, .stage-wrap.pseudo-fullscreen::after {
    content:""; position:absolute; inset:0; z-index:91; pointer-events:none;
    background:var(--crt-vignette);
  }
  
  .stage-wrap:fullscreen .screen, .stage-wrap.pseudo-fullscreen .screen {
    height:100%; width:auto; max-width:100%; max-height:100%; object-fit:fill; }
  
  .stage-wrap:fullscreen.fit-fill .screen, .stage-wrap.pseudo-fullscreen.fit-fill .screen {
    width:100%; height:100%; max-width:none; object-fit:fill; }
  
  .stage-wrap:fullscreen .screen.vert, .stage-wrap.pseudo-fullscreen .screen.vert { width:auto; height:100%; }
  
  .screen { width:100%; max-width:900px; max-height:100%; aspect-ratio:4/3;
    box-shadow:0 0 0 1px var(--edge), 0 0 60px rgba(0,0,0,.6);
    image-rendering:pixelated; display:block; background:#000; }
  
  .screen[hidden] { display:none; }
  
  #screen-gl { image-rendering:auto; }
  
  #screen-flycast { image-rendering:auto; }
  
  
  #crtmode, #fitmode { width:100%; accent-color:var(--neon-b); }
  #crt-gear { padding:6px 12px; font-size:12px; }
  
  
  .set-sect { font-size:0; line-height:0; height:0; overflow:hidden;
    border-top:1px solid var(--edge); margin:9px 0 2px; }
  .set-sect:first-child { border-top:none; margin-top:0; }
  .crt-wrap { position:relative; display:flex; align-items:center; gap:6px; }
  
  
  .crt-tune { position:absolute; top:calc(100% + 6px); right:0; z-index:95;
    width:min(272px, calc(100vw - 24px));
    padding:12px 14px; background:var(--void-2); border:1px solid var(--edge);
    display:flex; flex-direction:column; gap:10px; box-shadow:0 10px 30px rgba(0,0,0,.5); }
  .crt-tune[hidden] { display:none; }
  .crt-tune label { display:grid; grid-template-columns:64px 1fr 34px; align-items:center;
    gap:8px; font-size:12px; color:var(--dim); }
  .crt-tune input[type=range] { width:100%; accent-color:var(--neon-b); }
  .crt-tune b { font-family:var(--mono); font-size:11px; color:var(--ink); text-align:right; }
  .crt-tune-foot { display:flex; align-items:center; justify-content:space-between; gap:8px;
    border-top:1px solid var(--edge); padding-top:9px; }
  #crt-tune-note { font-size:11px; color:var(--dim); line-height:1.4; }
  #crt-reset { padding:4px 9px; font-size:12px; }
  
  .crt-tune label.off { opacity:.35; pointer-events:none; }
  
  .crt-tune label.hushed { opacity:.35; }
  
  .crt-tune label[hidden], #pad-dz-live[hidden] { display:none; }
  
  #pad-dz-live { font-family:var(--mono); font-size:11px; color:var(--dim);
    margin-top:-6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #pad-dz-live.over { color:var(--neon-b); }
  
  .screen.vert { width:auto; height:100%; max-width:100%; max-height:100%; }
  
  .overlay {
    --ink: oklch(0.93 0.02 295);
    --dim: oklch(0.80 0.03 295);
    --edge: oklch(0.43 0.055 295);
    --panel: oklch(0.32 0.05 295);
    --neon-a: oklch(0.72 0.25 350);
    --neon-b: oklch(0.72 0.25 195);
    --neon-c: oklch(0.72 0.25 95);
    
    color:var(--ink);
    position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:14px; background:rgba(0,0,0,.86); text-align:center; padding:24px; }
  .overlay h2 { font-size:22px; margin:0; }
  .pause-overlay { z-index:120; }
  .pause-overlay[hidden] { display:none; }
  #pause-remaining { color:var(--neon-c); font:700 30px var(--mono); margin:0; }
  #pause-limit-notice { max-width:30ch; color:var(--dim); margin:0; }
  .overlay p { color:var(--dim); font-size:12px; margin:0; max-width:46ch; line-height:1.8; }
  
  #ov-cancel { margin-top:2px; }
  #ov-cancel[hidden] { display:none; }
  .prog { width:min(420px,80%); display:none; flex-direction:column; gap:8px; }
  .prog-bar { height:6px; background:var(--panel); border:1px solid var(--edge); overflow:hidden; }
  .prog-fill { height:100%; width:0; background:var(--neon-b); transition:width .18s linear; }
  .prog-txt { display:flex; justify-content:space-between; font-family:var(--mono);
    font-size:11px; letter-spacing:.08em; color:var(--dim); }

  
  .challenge-pop, .stage-hint {
    --ink: oklch(0.93 0.02 295);
    --dim: oklch(0.70 0.035 295);
    --neon-a: oklch(0.72 0.25 350);
    --neon-b: oklch(0.72 0.25 195);
    --neon-c: oklch(0.72 0.25 95);
  }
  
  .stage-hint { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:55;
    display:flex; align-items:center; gap:14px; padding:11px 18px; max-width:88%; cursor:pointer;
    background:oklch(0.21 0.035 295 / .92); border:1px solid var(--neon-c);
    box-shadow:0 0 18px oklch(0.72 0.25 95 / .28); text-align:left; }
  .stage-hint[hidden] { display:none; }
  
  @media (pointer: coarse) {
    .stage-hint { top:10px; bottom:auto; max-width:92%;
      
      pointer-events:none; }
    .stage-hint-x { pointer-events:auto; }
  }
  .stage-hint.blocked { border-color:var(--neon-a); box-shadow:0 0 18px oklch(0.72 0.25 350 / .25); cursor:default; }
  .stage-hint-txt { font-size:16px; color:var(--ink); line-height:1.5; }
  .stage-hint-txt em { font-style:normal; color:var(--neon-c); font-weight:700; }
  .stage-hint.blocked .stage-hint-txt em { color:var(--neon-a); }
  .stage-hint-sub { font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:4px; }
  .stage-hint-x { font-family:var(--mono); font-size:16px; color:var(--dim); margin-left:6px; }
  .stage-hint.dynax-stage-hint { pointer-events:none; cursor:default; border-color:var(--neon-b);
    box-shadow:0 0 18px oklch(0.72 0.25 195 / .25); max-width:min(94%,980px); }
  .dynax-stage-hint .stage-hint-txt { font-size:13px; }
  .dynax-stage-hint .stage-hint-x { display:none; }

  
  .challenge-pop { position:absolute; right:14px; bottom:14px; z-index:58;
    width:min(280px, calc(100% - 28px)); padding:12px 14px;
    background:oklch(0.21 0.035 295 / .95); border:1px solid var(--neon-c);
    box-shadow:0 10px 30px rgba(0,0,0,.55);
    display:flex; flex-direction:column; gap:8px; }
  .challenge-pop[hidden] { display:none; }
  .chal-t { font-size:14px; color:var(--ink); font-weight:700; line-height:1.5; }
  .chal-s { font-family:var(--mono); font-size:11px; color:var(--dim); line-height:1.6; }
  .chal-btns { display:flex; gap:8px; justify-content:flex-end; margin-top:2px; }
  .chal-btns .btn { padding:5px 12px; font-size:12px; }

  
  
  .fs-hint, .tp-toggle, .fs-chat-btn, .fs-set-btn {
    position:absolute; z-index:45; align-items:center; gap:8px;
    padding:7px 12px; border-radius:20px; background:rgba(0,0,0,.5);
    border:1px solid rgba(255,255,255,.22); color:#fff;
    font:600 11.5px/1 var(--cjk); letter-spacing:normal; cursor:pointer; }

  
  .tp-toggle { top:12px; right:12px; display:flex; }
  .tp-toggle[hidden] { display:none; }

  
  .fs-hint { top:12px; left:12px; display:none; }
  
  @media (pointer: coarse) { .fs-hint { display:flex; } }
  

  
  @media (pointer: coarse) {
    
    .stage-wrap:fullscreen .fs-chat-btn,
    .stage-wrap.pseudo-fullscreen .fs-chat-btn,
    .stage-wrap:fullscreen .fs-chat.on,
    .stage-wrap.pseudo-fullscreen .fs-chat.on { display:none; }
  }
  

  
  .sidebar { border-left:1px solid var(--edge); background:var(--void-2);
    display:flex; flex-direction:column; min-height:0; }
  .sidebar.collapsed { overflow:hidden; }
  .sidebar.collapsed > *:not(.sidebar-hd) { display:none; }
  .sidebar.collapsed .sidebar-hd > span { display:none; }
  
  .sidebar-hd { padding:10px 10px 8px 14px; font-family:var(--cjk); font-size:12px;
    letter-spacing:normal; color:var(--dim); display:flex; align-items:center;
    justify-content:space-between; gap:8px; flex:none; border-bottom:1px solid var(--edge); }
  .side-pane { display:flex; flex-direction:column; min-height:0; flex:1; }
  .side-pane[hidden] { display:none; }

  .create-form { padding:16px; display:flex; flex-direction:column; gap:14px; flex:1; overflow-y:auto; }
  
  .field-t { font-family:var(--cjk); font-size:12px; letter-spacing:normal;
    color:var(--ink); margin-bottom:6px; }
  .create-form input[type=text], .create-form input[type=password] { width:100%; font-family:var(--cjk);
    font-size:12px; color:var(--ink); background:var(--panel); border:1px solid var(--edge);
    padding:9px 11px; outline:none; }
  .create-form input:focus { border-color:var(--neon-b); }
  
  .create-row { display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:8px 0; border-bottom:1px solid var(--edge); font-size:12px; }
  
  .create-row[hidden] { display:none; }
  .field-hint { font-family:var(--mono); font-size:11px; color:var(--dim); line-height:1.7; }
  
  .coin-rule { font-family:var(--cjk); font-size:12px; color:var(--ink); line-height:1.7;
    border-left:2px solid var(--neon-c); padding-left:9px; }
  .coin-rule b { color:var(--neon-c); }
  .room-coin-actions { margin:0 14px 8px; display:flex; align-items:center; gap:8px; min-height:28px; }
  .room-coin-actions[hidden] { display:none; }
  .room-coin-hint { border-left:0; padding-left:0; flex:1; }
  .pause-status { font:11px/1.4 var(--cjk); color:var(--dim); white-space:nowrap; }
  #pause-btn { padding:4px 10px; font-size:12px; margin-left:auto; }
  .toggle { width:36px; height:20px; border:1px solid var(--edge); position:relative; cursor:pointer; flex:none; }
  .toggle::after { content:""; position:absolute; top:1px; left:1px; width:15px; height:15px;
    background:var(--dim); transition:transform .15s ease, background .15s ease; }
  .toggle.on { border-color:var(--neon-b); }
  .toggle.on::after { transform:translateX(16px); background:var(--neon-b); }
  
  .create-row select { font-family:var(--mono); font-size:12px; color:var(--ink);
    background:var(--panel); border:1px solid var(--edge); padding:4px 6px; outline:none; }
  .create-row select:focus { border-color:var(--neon-b); }

  
  .spectate-note { padding:9px 14px; font-family:var(--mono); font-size:12px; color:var(--dim);
    border-bottom:1px solid var(--edge); display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:none; }
  .room-status { padding:8px 14px; border-bottom:1px solid var(--edge);
    display:flex; flex-direction:column; gap:4px; flex:none; }
  #console-save-panel { margin:12px 14px 0; border:1px solid var(--edge); padding:10px;
    display:flex; flex-direction:column; gap:7px; font-size:11px; }
  #console-save-panel[hidden] { display:none; }
  .console-save-head { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--ink); }
  .console-save-head a { color:var(--neon-b); }
  .console-save-quota, .console-save-status { color:var(--dim); line-height:1.4; }
  .console-save-slot { display:grid; grid-template-columns:28px minmax(0, 1fr) auto; align-items:center;
    gap:6px; border-top:1px solid var(--edge); padding-top:7px; }
  .console-save-slot b { font-family:var(--mono); color:var(--ink); }
  .console-save-slot > span:nth-child(2) { color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .console-save-slot > span:last-child { display:flex; gap:3px; }
  .console-save-slot .btn { padding:3px 5px; font-size:11px; }
  .console-save-slot.unavailable { opacity:.45; }
  .rs-row { display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-family:var(--mono); font-size:12px; color:var(--dim); }
  .rs-row b { color:var(--ink); font-weight:500; }
  .rs-row b.live-txt { color:var(--live); }
  .rs-row b.warn-txt { color:var(--neon-c); }
  
  .rs-edit { cursor:pointer; border-bottom:1px dashed var(--edge); }
  .rs-edit:hover { border-bottom-color:currentColor; }
  .rs-panel { padding:10px 14px 12px; border-bottom:1px solid var(--edge); }
  
  .rs-panel input[type=text] { width:100%; font-family:var(--cjk); font-size:12px;
    color:var(--ink); background:var(--panel); border:1px solid var(--edge);
    padding:9px 11px; outline:none; }
  .rs-panel input[type=text]:focus { border-color:var(--neon-b); }
  .rs-pass-bar { display:flex; align-items:center; gap:10px; margin-top:8px; }
  .rs-pass-bar .btn { padding:6px 12px; font-size:12px; }
  
  .rs-note { font-family:var(--mono); font-size:11px; color:var(--dim);
    line-height:1.7; margin-top:8px; }

  .side-sec { padding:12px 14px; border-bottom:1px solid var(--edge); }
  .players-sec { display:flex; flex-direction:column; max-height:38%; min-height:0; flex:none; }
  .prow-list { overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:2px; }
  
  #chal-btn { flex:none; width:100%; margin-top:8px; padding:7px 10px; font-size:12px; }
  .prow { display:flex; align-items:center; justify-content:space-between; font-size:12px; gap:8px; padding:4px 0; }
  .prow-name { cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .prow-name:hover { color:var(--neon-b); }
  .prow-name.nostat { cursor:default; }
  .prow-name.nostat:hover { color:inherit; }
  .plevel { font-family:var(--mono); font-size:11px; padding:1px 6px; border:1px solid var(--neon-c);
    color:var(--neon-c); margin-left:6px; }
  
  
  .local-seats { display:flex; align-items:center; gap:18px; flex:none;
    padding:8px 24px 0 12px; background:var(--void-2); white-space:nowrap; }
  .local-seats .local-note { color:var(--dim); font-size:11px; }
  .local-row { display:flex; align-items:center; gap:7px; padding:2px 0; font-size:12px;
    color:var(--dim); }
  .local-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto;
    border:1px solid var(--edge); background:transparent; transition:background .06s linear; }
  .local-dot.on { background:var(--live); border-color:var(--live);
    box-shadow:0 0 6px var(--live); }
  .local-row b { color:var(--ink); font-family:var(--mono); }
  
  .pad-ic { display:inline-flex; align-items:center; flex-shrink:0; cursor:default;
    color:var(--ink); }
  
  .prow-act { font-family:var(--mono); font-size:11px; padding:2px 6px; border:1px solid var(--edge);
    color:var(--dim); white-space:nowrap; flex-shrink:0; cursor:pointer; }
  .prow-act:hover { border-color:var(--neon-b); color:var(--neon-b); }
  .prow-act.on { border-color:var(--neon-a); color:var(--neon-a); }
  
  .prow-name.muted { color:var(--dim); text-decoration:line-through; }
  .tag { font-family:var(--cjk); font-size:11px; padding:2px 6px; border:1px solid var(--edge);
    color:var(--dim); white-space:nowrap; flex-shrink:0; }
  
  .tag.p1 { border-color:var(--neon-a); color:var(--neon-a); }
  .tag.p2 { border-color:var(--neon-b); color:var(--neon-b); }
  .tag.p3 { border-color:oklch(0.78 0.19 145); color:oklch(0.78 0.19 145); }
  .tag.p4 { border-color:oklch(0.80 0.17 85);  color:oklch(0.80 0.17 85); }
  .tag.me { font-weight:700; }

  
  .pdetail { position:fixed; z-index:80; width:250px; background:var(--panel);
    border:1px solid var(--edge); padding:12px 14px; }
  .pdetail[hidden] { display:none; }
  .pdetail-name { font-size:12px; font-weight:700; margin-bottom:8px; }
  .pdetail-row { display:flex; align-items:center; justify-content:space-between;
    font-family:var(--mono); font-size:12px; color:var(--dim); padding:3px 0; gap:10px; }
  .pdetail-row b { color:var(--ink); font-weight:500; white-space:nowrap; }
  
  .pdetail-sub { font-family:var(--mono); font-size:11px; letter-spacing:.1em;
    color:var(--dim); margin-top:10px; padding-top:8px; border-top:1px solid var(--edge); }

  
  .chat-log { flex:1; min-height:80px; overflow-y:auto; padding:12px 14px;
    display:flex; flex-direction:column; gap:8px; }
  .chat-log[hidden] { display:none; }
  .msg { font-size:12px; line-height:1.5; word-break:break-word; }
  .msg .who { font-family:var(--mono); font-size:11px; color:var(--dim); margin-right:6px; }
  .msg.sys { color:var(--dim); font-style:italic; }
  .chat-input { display:flex; border-top:1px solid var(--edge); flex:none; }
  .chat-input input { flex:1; background:transparent; border:none; padding:11px 14px; color:var(--ink);
    font-family:var(--cjk); font-size:12px; outline:none; }
  .chat-input input::placeholder { color:var(--dim); }

  
  .net-slow-bar { border-top:1px solid var(--neon-a);
    background:color-mix(in srgb, var(--void-2) 92%, transparent);
    color:var(--ink); font-family:var(--cjk); font-size:12px; line-height:1.5;
    padding:8px 20px; text-align:center; flex:none; }
  .net-slow-bar[hidden] { display:none; }

  
  
  
  .keypanel-bar { display:flex; align-items:flex-start; border-top:1px solid var(--edge);
    background:var(--void-2); flex:none; position:relative; }
  .keypanel-bar > #keypanel { flex:1; min-width:0; }
  .keypanel-bar .kp { border-top:none; }
  .hint-mini { font-family:var(--cjk); font-size:12px; color:var(--neon-c); cursor:pointer;
    border:1px solid var(--neon-c); background:none; padding:4px 10px; white-space:nowrap;
    margin:8px 20px 0 12px; flex:none; }
  .hint-mini[hidden] { display:none; }
  .hint-mini.blocked { color:var(--neon-a); border-color:var(--neon-a); }

  
  
  .page { height:100vh; display:flex; flex-direction:column; }

  
  @media (max-width: 860px) {
    body { height:auto; overflow:auto; }
    .page { height:auto; min-height:100vh; }
    .topbar { padding:10px 14px; gap:10px; }
    .game-title { font-size:16px; }
    
    .game-title-en { display:none; }
    
    .lang-pick { font-size:12px; }
    
    .topbar > div { flex-wrap:wrap; }
    .layout, .layout.roomlist-collapsed, .layout.sidebar-collapsed,
    .layout.roomlist-collapsed.sidebar-collapsed,
    .layout.playing, .layout.playing.sidebar-collapsed { grid-template-columns:1fr; }
    
    .topbar { position:relative; }
    .pop-wrap, .crt-wrap { position:static; }
    .netpop, .crt-tune { top:calc(100% + 6px); left:12px; right:12px;
      width:auto; max-width:none; }

    
    .roomlist { order:2; border-right:none; border-top:1px solid var(--edge);
      flex-direction:column; overflow:visible; padding:0; }
    #rl-items { display:block; }
    .roomlist.collapsed { padding-top:0; }
    .roomlist.collapsed > * { display:block; }
    .roomlist-collapse-inline { display:none; }
    
    .room-item { border-bottom:1px solid var(--edge); border-right:none;
      border-left:2px solid transparent; border-top:none; }
    .room-item.on  { border-left-color:var(--neon-b); }
    .room-item.new { border-left-color:var(--neon-c); }

    .stage-wrap { order:1; padding:12px; }
    .screen { max-width:100%; }
    .stage-hint { padding:10px 14px; max-width:94%; }
    .stage-hint-txt { font-size:12px; }

    .sidebar { order:3; border-left:none; border-top:1px solid var(--edge); }
    .sidebar.collapsed { padding-top:0; }
    .side-sec.players-sec { max-height:200px; }
    .chat-log { min-height:160px; max-height:260px; }
    
    .keypanel-hd { padding:0 14px; gap:8px; }
    .hint-mini { font-size:11px; padding:3px 8px; }
    
    .btn { padding:8px 12px; min-height:38px; display:inline-flex; align-items:center; }
    .btn[hidden], .keypanel-bar { display:none; }
    .prow-act, .tag { padding:4px 8px; }
  }