*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --gold:#c9a84c;--gold-dim:#7a622a;--blood:#8b1a1a;--blood-dim:#5c1111;
      --mid:#0c0a14;--mid2:#161220;--surf:#1e1830;--raise:#252040;
      --iron:#4a4540;--ash:#7a6e60;--mist:#b8a98a;--parch:#f4ead5;
      --tf:#2a5a9a;--out:#2a7a3a;--evil:#8b1a1a;--dead-col:#6a6a6a;
    }
    html,body{height:100%;overflow:hidden}
    body{background:var(--mid);color:var(--parch);font-family:'Crimson Text',Georgia,serif;font-size:17px;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}

    /* Modals */
    .modal-bg{display:none;position:fixed;inset:0;background:rgba(10,8,18,.87);z-index:80;align-items:center;justify-content:center}
    .modal-bg.vis{display:flex}
    .modal-box{background:var(--mid2);border:1px solid var(--gold-dim);border-radius:6px;padding:20px 24px;display:flex;flex-direction:column;gap:10px;min-width:300px;max-width:560px;width:90vw;max-height:85vh;overflow-y:auto}
    .modal-title{font-family:'Cinzel',serif;font-size:14px;color:var(--gold);letter-spacing:.07em;border-bottom:1px solid var(--iron);padding-bottom:7px}
    .modal-input{font-family:'Crimson Text',serif;font-size:16px;background:var(--surf);border:1px solid var(--iron);color:var(--parch);padding:6px 10px;border-radius:3px;width:100%}
    .modal-input:focus{outline:none;border-color:var(--gold-dim)}
    select.modal-input{cursor:pointer}
    textarea.modal-input{resize:vertical;min-height:72px;line-height:1.5}
    .modal-actions{display:flex;gap:7px;justify-content:flex-end;padding-top:4px;border-top:1px solid var(--iron)}
    .modal-label{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.06em;color:var(--ash);text-transform:uppercase;margin-bottom:2px}

    /* End overlay */
    #end-overlay{display:none;position:fixed;inset:0;background:rgba(10,8,18,.94);z-index:100;align-items:center;justify-content:center;flex-direction:column;gap:18px}
    #end-overlay.vis{display:flex}
    #end-title{font-family:'Cinzel',serif;font-size:32px;font-weight:600;color:var(--gold);letter-spacing:.1em;text-align:center}
    #end-victor{font-family:'Crimson Text',serif;font-size:22px;font-style:italic;color:var(--parch);text-align:center;max-width:500px;line-height:1.5}
    #end-bar{width:220px;height:2px;background:var(--iron);position:relative;overflow:hidden}
    #end-bar::after{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;animation:cdbar 5s linear forwards}
    @keyframes cdbar{to{transform:scaleX(1)}}

    /* Announcement banner */
    #ann-banner{display:none;position:fixed;top:50px;left:50%;transform:translateX(-50%);background:#1a1206;border:1px solid var(--gold-dim);border-radius:5px;padding:9px 18px;font-family:'Cinzel',serif;font-size:14px;color:var(--gold);z-index:90;text-align:center;max-width:480px;box-shadow:0 4px 20px rgba(0,0,0,.5)}
    #kick-banner{display:none;position:fixed;inset:0;background:rgba(10,8,18,.9);z-index:100;align-items:center;justify-content:center;flex-direction:column;gap:12px}
    #kick-banner.vis{display:flex}
    #kick-msg{font-family:'Cinzel',serif;font-size:20px;color:var(--blood);letter-spacing:.06em;text-align:center}

    /* Top bar */
    .topbar{background:var(--mid2);border-bottom:1px solid var(--iron);padding:0 12px;display:flex;align-items:center;gap:8px;height:44px;flex-shrink:0;overflow:hidden}
    .topbar-title{font-family:'Cinzel',serif;font-size:15px;font-weight:600;color:var(--gold);letter-spacing:.06em;white-space:nowrap}
    .sep{width:1px;height:20px;background:var(--iron);flex-shrink:0}

    .phase-badge{font-family:'Cinzel',serif;font-size:13px;font-weight:600;letter-spacing:.07em;padding:3px 10px;border-radius:20px;border:1px solid;white-space:nowrap;flex-shrink:0}
    .ph-lobby{border-color:var(--iron);color:var(--ash)}
    .ph-morning{border-color:#5a7a30;color:#b0d870;background:#0e1a06}
    .ph-day{border-color:#8a6a20;color:var(--gold);background:#1e1808}
    .ph-evening{border-color:#2a6a40;color:#70d090;background:#0a2010}
    .ph-night{border-color:#3a3480;color:#9090e0;background:#10102a}
    .ph-vote_lock{border-color:var(--blood-dim);color:#e08080;background:#1e0808}
    .ph-ended{border-color:var(--iron);color:var(--ash)}

    #st-controls{display:flex;gap:5px;align-items:center}
    #st-controls.hidden{display:none}
    .btn{font-family:'Cinzel',serif;font-size:12px;font-weight:500;letter-spacing:.04em;padding:4px 9px;border-radius:3px;border:1px solid var(--iron);background:var(--surf);color:var(--mist);cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}
    .btn:hover{background:var(--raise);border-color:var(--gold-dim);color:var(--gold)}
    .btn.danger{border-color:var(--blood-dim);color:#d48888}
    .btn.danger:hover{background:#2a0e0e;border-color:var(--blood);color:#ffaaaa}
    .btn.primary{border-color:var(--gold-dim);color:var(--gold)}
    .btn.primary:hover{background:#2a2010;border-color:var(--gold)}
    select.psel{font-family:'Cinzel',serif;font-size:12px;background:var(--surf);border:1px solid var(--iron);color:var(--mist);padding:4px 6px;border-radius:3px;cursor:pointer}
    select.psel option{background:var(--mid2)}

    .join-row{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
    .join-row input[type=text]{font-family:'Crimson Text',serif;font-size:15px;background:var(--surf);border:1px solid var(--iron);color:var(--parch);padding:4px 8px;border-radius:3px;width:110px}
    .join-row input[type=text]:focus{outline:none;border-color:var(--gold-dim)}
    .join-row label{font-size:13px;color:var(--ash);display:flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}

    /* Main layout */
    .main{display:flex;flex:1 1 0;overflow:hidden;position:relative;min-height:0}

    /* Chat */
    .chat-area{flex:1;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--iron)}
    .chat-panes{flex:1;min-height:0;display:flex;overflow:hidden}
    .chat-pane{display:flex;flex-direction:column;min-height:0;overflow:hidden}
    .chat-pane.room-chat{flex:1;border-right:1px solid var(--iron)}
    /* ST log panel — sits behind grimoire when grimoire is open */
    .chat-pane.st-log{flex:0 0 280px}
    #st-log-pane{display:none}

    .pane-hdr{font-family:'Cinzel',serif;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--gold);padding:6px 10px;border-bottom:1px solid var(--iron);background:var(--mid2);display:flex;align-items:center;gap:6px;flex-shrink:0}
    .loc-lbl{font-size:12px;color:var(--ash);font-weight:400;font-family:'Crimson Text',serif;font-style:italic;letter-spacing:0}
    .pane-ct{margin-left:auto;font-size:12px;color:var(--ash);font-family:'JetBrains Mono',monospace}

    /* min-height:0 is required: without it a flex item refuses to shrink
       below its content height, so when the game tray claims vertical
       space the chat pane overflows and its input row (last child) gets
       clipped away by .chat-pane's overflow:hidden. */
    .msg-list{flex:1;min-height:0;overflow-y:auto;padding:5px 0;scroll-behavior:smooth}
    .msg-list::-webkit-scrollbar{width:4px}
    .msg-list::-webkit-scrollbar-thumb{background:var(--iron);border-radius:2px}

    .msg{padding:2px 10px;line-height:1.5;display:flex;gap:6px;align-items:baseline}
    .msg-ts{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--iron);flex-shrink:0;margin-left:auto;padding-left:8px;user-select:none}
    .msg:hover .msg-ts{color:var(--ash)}
    .msg:hover{background:rgba(255,255,255,.023)}
    .msg-name{font-family:'Cinzel',serif;font-size:12px;font-weight:500;flex-shrink:0;min-width:65px}
    .n-sys{color:var(--gold);font-style:italic}
    .n-st{color:#9090e0}
    .n-player{color:var(--gold)}
    .n-dead-player{color:var(--dead-col);text-decoration:line-through}
    .n-whisper{color:#c0a0e0;font-style:italic}
    .msg-text{color:var(--parch);font-size:16px;flex:1}
    .msg-text.sys{color:var(--mist);font-style:italic;font-size:15px}
    .msg-text.announce{color:var(--gold);font-size:15px}
    .msg-text.whisper{color:#d0b0f0;font-style:italic;font-size:15px}
    .chat-notice{padding:3px 10px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:.05em;color:var(--iron);text-align:center;text-transform:uppercase;border-top:1px solid #1e1a28;border-bottom:1px solid #1e1a28;margin:2px 0}

    /* ST log entries */
    .log-entry{border-bottom:1px solid rgba(255,255,255,.03)}
    .log-hdr{display:flex;align-items:center;gap:4px;padding:4px 7px;cursor:pointer;user-select:none}
    .log-hdr:hover{background:rgba(255,255,255,.03)}
    .log-chev{font-size:10px;color:var(--ash);transition:transform .12s;flex-shrink:0}
    .log-entry.open .log-chev{transform:rotate(90deg)}
    .log-sum{flex:1;min-width:0}
    .log-line{display:flex;align-items:center;gap:3px}
    .log-badge{font-family:'JetBrains Mono',monospace;font-size:10px;padding:1px 4px;border-radius:2px;border:1px solid;flex-shrink:0;text-transform:uppercase}
    .lb-player{border-color:#4a6a3a;color:#90c870;background:#0e1a0a}
    .lb-system{border-color:#7a6a20;color:var(--gold);background:#1a1406}
    .lb-whisper{border-color:#5a3a7a;color:#c0a0e0;background:#140e1e}
    .lb-vote{border-color:var(--blood-dim);color:#e08080;background:#1a0808}
    .lb-error{border-color:#8b1a1a;color:#ff8888;background:#1a0606}
    .lb-announce{border-color:#6a4a10;color:#e0a050;background:#1a1006}
    .log-area{font-family:'Cinzel',serif;font-size:10px;color:var(--ash);flex-shrink:0}
    .log-who{font-family:'Cinzel',serif;font-size:11px;color:var(--gold);flex-shrink:0}
    .log-ts{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--iron);margin-left:auto;flex-shrink:0}
    .log-prev{font-size:12px;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .log-body{display:none;padding:4px 7px 6px 18px;background:rgba(0,0,0,.18);border-top:1px solid rgba(255,255,255,.03)}
    .log-entry.open .log-body{display:block}
    .log-body-text{font-size:14px;color:var(--parch);white-space:pre-wrap;word-break:break-word;line-height:1.5}
    .log-body-meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ash);margin-top:3px}

    .chat-input-row{display:flex;border-top:1px solid var(--iron);flex-shrink:0;background:var(--mid2)}
    .chat-input{flex:1;background:transparent;border:none;color:var(--parch);font-family:'Crimson Text',serif;font-size:17px;padding:8px 10px;outline:none}
    .chat-input::placeholder{color:var(--ash);font-style:italic}
    .send-btn{font-family:'Cinzel',serif;font-size:12px;font-weight:600;letter-spacing:.06em;padding:0 12px;border:none;border-left:1px solid var(--iron);background:transparent;color:var(--gold);cursor:pointer}
    .send-btn:hover{background:var(--raise)}

    /* Town panel — always rightmost */
    .town-panel{width:240px;flex-shrink:0;display:flex;flex-direction:column;background:var(--mid2);overflow:hidden;border-left:1px solid var(--iron)}
    .town-hdr{font-family:'Cinzel',serif;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--gold);padding:6px 10px;border-bottom:1px solid var(--iron);flex-shrink:0}
    .town-scroll{flex:1;overflow-y:auto;padding:4px 0}
    .town-scroll::-webkit-scrollbar{width:3px}
    .town-scroll::-webkit-scrollbar-thumb{background:var(--iron)}
    .area-section{font-family:'Cinzel',serif;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--iron);padding:6px 11px 2px}
    .area-divider{height:1px;background:var(--surf);margin:3px 6px}
    .area-block{margin-bottom:1px}
    .area-row{display:flex;align-items:center;gap:5px;padding:4px 7px;cursor:pointer;border-radius:3px;margin:0 3px;border:1px solid transparent;transition:background .1s}
    .area-row:hover{background:var(--raise)}
    .area-row.is-me{background:#1e1a08;border-color:var(--gold-dim)}
    .area-row.drop-target{background:#12180a;border:1px dashed #6a8a30}
    .a-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
    .d-pub{background:var(--gold-dim)}.d-cot{background:#4a4080}.d-lock{background:var(--iron)}
    .a-name{font-family:'Cinzel',serif;font-size:12px;color:var(--mist);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .area-row.is-me .a-name{color:var(--gold)}
    .a-cap{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ash)}
    .area-chips{padding:0 7px 1px 20px}
    .p-chip{display:flex;align-items:center;gap:4px;padding:2px 4px;border-radius:3px;margin-bottom:1px;cursor:pointer;position:relative}
    .p-chip[draggable=true]{cursor:grab}
    .p-chip:hover{background:var(--raise)}
    .p-chip.dragging{opacity:.3}
    .p-chip .chip-tip{display:none;position:absolute;right:100%;top:0;margin-right:5px;background:var(--mid2);border:1px solid var(--iron);border-radius:4px;padding:5px 9px;font-size:13px;color:var(--mist);white-space:nowrap;z-index:50;min-width:150px;pointer-events:none;line-height:1.5}
    .p-chip:hover .chip-tip{display:block}
    .c-key{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ash);min-width:12px;text-align:right}
    .c-name{font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .c-alive{color:var(--parch)}.c-dead{color:var(--dead-col);text-decoration:line-through}
    .c-st{color:#9090e0;font-style:italic}.c-obs{color:var(--ash);font-style:italic}
    .c-tf{color:var(--tf)}.c-out{color:var(--out)}.c-evil{color:var(--evil)}
    /* ST dead with team color still shows team but strikethrough */
    .c-dead-tf{color:var(--tf);text-decoration:line-through;opacity:.7}
    .c-dead-out{color:var(--out);text-decoration:line-through;opacity:.7}
    .c-dead-evil{color:var(--evil);text-decoration:line-through;opacity:.7}
    .c-icon{font-size:11px}

    /* Grimoire — slides in from LEFT of town panel, overlapping ST log */
    #grim-panel{display:none;position:absolute;right:240px;top:0;bottom:0;width:340px;background:var(--mid2);border-left:1px solid var(--iron);border-right:1px solid var(--iron);z-index:40;overflow-y:auto;flex-direction:column}
    #grim-panel.vis{display:flex;flex-direction:column}
    .grim-hdr{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--iron);flex-shrink:0;background:var(--mid2);position:sticky;top:0;z-index:1}
    .grim-title{font-family:'Cinzel',serif;font-size:14px;font-weight:600;color:var(--gold);letter-spacing:.06em;flex:1}
    .grim-body{padding:10px 12px;display:flex;flex-direction:column;gap:9px}
    .grim-section{font-family:'Cinzel',serif;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);padding-top:4px}
    .grim-field{display:flex;flex-direction:column;gap:3px}
    .grim-label{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.05em;color:var(--ash);text-transform:uppercase}
    .grim-input{font-family:'Crimson Text',serif;font-size:15px;background:var(--surf);border:1px solid var(--iron);color:var(--parch);padding:4px 8px;border-radius:3px;width:100%}
    .grim-input:focus{outline:none;border-color:var(--gold-dim)}
    .grim-divider{height:1px;background:var(--iron);margin:1px 0}
    .grim-check{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--mist);cursor:pointer;padding:1px 0}
    .grim-check input{cursor:pointer;accent-color:var(--gold)}
    .grim-bluff{display:flex;align-items:center;gap:5px;margin-bottom:4px}
    .grim-bluff-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ash);min-width:38px}
    .kill-row{display:flex;gap:5px;flex-wrap:wrap}

    /* Status bar */
    .statusbar{background:var(--mid2);border-top:1px solid var(--iron);display:flex;align-items:stretch;flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0)}
    .sb-item{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ash);padding:5px 12px;border-right:1px solid var(--iron);white-space:nowrap;display:flex;align-items:center}
    .sb-item span{color:var(--mist);margin-left:4px}
    .sb-item.wide{flex:1}


    /* Seating panel */
    #seating-outer{flex-shrink:0;border-bottom:1px solid var(--iron);background:var(--mid2);user-select:none;overflow:hidden;height:193px;display:flex;flex-direction:column}
    #seating-hdr{display:flex;align-items:center;padding:4px 10px;gap:6px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04)}
    #seating-hdr:hover{background:rgba(255,255,255,.03)}
    #seating-hdr-title{font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--ash);text-transform:uppercase;flex:1}
    #seating-hdr-controls{display:flex;gap:5px;align-items:center}
    .seating-ctrl-btn{font-family:'JetBrains Mono',monospace;font-size:12px;padding:1px 7px;border:1px solid var(--iron);border-radius:2px;background:var(--surf);color:var(--ash);cursor:pointer;line-height:1.4}
    .seating-ctrl-btn:hover{border-color:var(--gold-dim);color:var(--gold)}
    #seating-chev{font-size:11px;color:var(--ash);transition:transform .15s}
    #seating-outer.collapsed{height:auto !important}#seating-outer.collapsed #seating-chev{transform:rotate(-90deg)}
    #seating-outer.collapsed #seating-body{display:none}
    #seating-body{overflow:hidden;position:relative;display:flex;flex-direction:column;flex:1;min-height:0}
    #seating-viewport{position:relative;overflow:hidden;cursor:grab;flex:1;display:flex;align-items:center;justify-content:center;min-height:40px;min-width:0}
    #seating-viewport:active{cursor:grabbing}
    #seating-canvas{position:relative;transform-origin:center center}
    #seating-resize{height:5px;background:transparent;cursor:ns-resize;border-top:1px solid var(--iron);flex-shrink:0}
    #seating-resize:hover{background:rgba(201,168,76,.15)}
    .seating-circle-wrap{position:relative;flex-shrink:0}
    .seating-line-wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;padding:8px}
    #st-badge-outer{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
    .seat{position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:1}
    .seat:hover{z-index:3}
    .seat-inner{display:flex;flex-direction:column;align-items:center;gap:2px}
    .seat-avatar{width:30px;height:30px;border-radius:50%;border:2px solid var(--iron);background:var(--surf);display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:11px;transition:border-color .15s;box-shadow:0 1px 4px rgba(0,0,0,.4)}
    .seat-avatar:hover{filter:brightness(1.15)}
    .seat-avatar.tf-seat{border-color:var(--tf)}.seat-avatar.out-seat{border-color:var(--out)}.seat-avatar.evil-seat{border-color:var(--evil)}
    .seat-avatar.dead-seat{border-color:var(--dead-col);opacity:.55}
    .seat-avatar.seat-st{border-color:#9090e0;border-style:dashed}
    .seat-key{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ash);line-height:1;text-align:center}
    .seat-name{font-family:'Cinzel',serif;font-size:10px;color:var(--mist);max-width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1;text-align:center}
    .seat-line{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
    .seat-line .seat-avatar{width:26px;height:26px}
    /* Typing indicator */
    #typing-indicator{padding:3px 10px;font-family:'Crimson Text',serif;font-size:14px;color:var(--ash);font-style:italic;min-height:20px;flex-shrink:0;border-top:1px solid rgba(255,255,255,.03)}
    /* Role tag in chat */
    .role-tag{color:#6699cc;font-weight:600;cursor:pointer;border-bottom:1px dotted #6699cc;position:relative;display:inline}
    .role-tag:hover .role-tooltip{display:block}
    .role-tooltip{display:none;position:absolute;bottom:120%;left:0;background:var(--mid2);border:1px solid var(--gold-dim);border-radius:4px;padding:7px 10px;font-size:14px;color:var(--mist);width:220px;z-index:50;font-weight:400;font-style:normal;line-height:1.5;white-space:normal;pointer-events:none}
    .role-tooltip-name{font-family:'Cinzel',serif;font-size:13px;color:var(--gold);margin-bottom:3px}
    /* Spy gamestate modal */
    #spy-modal .modal-box{max-width:520px}
    #spy-text{font-family:'JetBrains Mono',monospace;font-size:13px;background:var(--mid);border:1px solid var(--iron);border-radius:3px;padding:10px;white-space:pre-wrap;color:var(--mist);max-height:400px;overflow-y:auto;line-height:1.6;user-select:all;cursor:text}
    /* Fix: ST Script button */
    
    /* Audio panel */
    #audio-panel{flex-shrink:0;background:var(--mid2);border-bottom:1px solid var(--iron);padding:5px 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:36px}
    #audio-panel.hidden{display:none}
    .audio-btn{font-family:'Cinzel',serif;font-size:10px;padding:3px 9px;border-radius:3px;border:1px solid var(--iron);background:var(--surf);color:var(--mist);cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}
    .audio-btn:hover{background:var(--raise);border-color:var(--gold-dim);color:var(--gold)}
    .audio-btn.active{border-color:var(--gold);color:var(--gold);background:#1e1808}
    .audio-btn.muted{border-color:var(--blood-dim);color:#d48888;background:#1a0808}
    .audio-btn.ptt-held{border-color:#3a6a30;color:#70d060;background:#0a1808}
    .audio-sep{width:1px;height:20px;background:var(--iron);flex-shrink:0}
    .audio-label{font-family:'Cinzel',serif;font-size:9px;letter-spacing:.06em;color:var(--ash);text-transform:uppercase}
    /* Peer volume mixer */
    #volume-mixer{display:none;background:var(--mid2);border-top:1px solid var(--iron);padding:8px 10px;max-height:220px;overflow-y:auto;flex-shrink:0}
    #volume-mixer.vis{display:block}
    .vol-row{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04)}
    .vol-row:last-child{border-bottom:none}
    .vol-name{font-family:'Cinzel',serif;font-size:11px;color:var(--mist);min-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .vol-slider{flex:1;accent-color:var(--gold);height:3px}
    .vol-pct{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ash);min-width:36px;text-align:right}
    .mic-indicator{width:8px;height:8px;border-radius:50%;background:var(--iron);flex-shrink:0;transition:background .2s}
    .mic-indicator.live{background:#44cc44;box-shadow:0 0 4px #44cc44}
    .mic-indicator.muted{background:var(--blood)}
    /* Suspicion + volume player panel */
    #player-panel{display:none;position:fixed;z-index:75;background:var(--mid2);border:1px solid var(--gold-dim);border-radius:5px;min-width:180px;box-shadow:0 4px 20px rgba(0,0,0,.6);padding:0;overflow:hidden}
    #player-panel.vis{display:block}
    .pp-header{font-family:'Cinzel',serif;font-size:11px;color:var(--gold);padding:7px 11px;border-bottom:1px solid var(--iron);display:flex;align-items:center;justify-content:space-between}
    .pp-close{font-size:12px;cursor:pointer;color:var(--ash);padding:0 3px}
    .pp-close:hover{color:var(--gold)}
    .pp-section{font-family:'Cinzel',serif;font-size:8px;letter-spacing:.07em;text-transform:uppercase;color:var(--iron);padding:6px 11px 2px}
    .pp-opt{font-family:'Cinzel',serif;font-size:11px;padding:5px 11px;cursor:pointer;color:var(--mist);display:flex;align-items:center;gap:7px}
    .pp-opt:hover{background:var(--raise);color:var(--gold)}
    .pp-opt.active{color:var(--gold)}
    .susp-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
    .pp-vol-row{display:flex;align-items:center;gap:7px;padding:5px 11px 7px}
    .pp-vol-slider{flex:1;accent-color:var(--gold);height:3px}
    .pp-vol-pct{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ash);min-width:32px;text-align:right}
    /* Night games */
    #game-launcher{display:none;background:var(--mid2);border-bottom:1px solid var(--iron);padding:4px 10px;align-items:center;gap:7px;flex-shrink:0;flex-wrap:wrap}
    #game-launcher.vis{display:flex}
    /* Game frame sits BELOW the chat area entirely — in a separate collapsible at the bottom */
    /* Game tray — flex child of page column, pushes .main up when resized */
    #game-tray{display:none;flex-direction:column;flex-shrink:0;background:#0c0a14;border-top:2px solid var(--iron)}
    #game-tray.vis{display:flex}
    #game-tray.collapsed{height:auto !important}
    #game-tray-hdr{display:flex;align-items:center;padding:4px 10px;background:var(--mid2);border-bottom:1px solid var(--iron);gap:6px;flex-shrink:0}
    #game-tray-title{font-family:'Cinzel',serif;font-size:11px;color:var(--gold);letter-spacing:.06em;flex:1;cursor:pointer}
    #game-tray-chev{font-size:9px;color:var(--ash);transition:transform .15s;cursor:pointer}
    #game-tray.collapsed #game-tray-chev{transform:rotate(-90deg)}
    #game-tray.collapsed #game-content{display:none}
    #game-tray.collapsed #game-resize{display:none}
    /* Content area — scrollable, shows full iframe */
    #game-content{flex:1;overflow:auto;min-height:0;display:flex;align-items:flex-start;justify-content:flex-start}
    #game-content::-webkit-scrollbar{width:4px;height:4px}
    #game-content::-webkit-scrollbar-thumb{background:var(--iron);border-radius:2px}
    #game-frame{border:none;display:block;flex-shrink:0}
    /* Resize handle — drag to change tray height and push .main */
    #game-resize{height:6px;background:transparent;cursor:ns-resize;border-top:2px solid var(--iron);flex-shrink:0}
    #game-resize:hover,#game-resize:active{background:rgba(201,168,76,.2);border-top-color:var(--gold-dim)}
    .game-zoom-btn{font-family:'JetBrains Mono',monospace;font-size:11px;padding:1px 6px;border:1px solid var(--iron);border-radius:2px;background:var(--surf);color:var(--ash);cursor:pointer}
    .game-zoom-btn:hover{border-color:var(--gold-dim);color:var(--gold)}
    #game-zoom-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ash);min-width:32px;text-align:center}
    .game-label{font-family:'Cinzel',serif;font-size:10px;color:var(--ash);letter-spacing:.06em}
    /* Player pixel art icon */
    .seat-avatar img.pixel-icon{width:100%;height:100%;object-fit:cover;border-radius:50%;image-rendering:pixelated}
    .icon-toggle{font-family:'Cinzel',serif;font-size:8px;padding:1px 4px;border:1px solid var(--iron);border-radius:2px;background:var(--surf);color:var(--ash);cursor:pointer;white-space:nowrap}
    .icon-toggle:hover{border-color:var(--gold-dim);color:var(--gold)}
    /* Floating notes window */
    #notes-window{display:none;position:fixed;left:60px;top:80px;width:360px;height:340px;min-width:240px;min-height:200px;background:var(--mid2);border:1px solid var(--gold-dim);border-radius:5px;z-index:80;flex-direction:column;box-shadow:0 6px 28px rgba(0,0,0,.6);resize:both;overflow:hidden}
    #notes-window.vis{display:flex}
    #notes-win-hdr{display:flex;align-items:center;gap:8px;padding:6px 11px;background:var(--surf);border-bottom:1px solid var(--iron);cursor:move;font-family:'Cinzel',serif;font-size:11px;color:var(--gold);letter-spacing:.06em;user-select:none;flex-shrink:0}
    .notes-win-btn{cursor:pointer;color:var(--ash);padding:0 5px;font-size:14px}
    .notes-win-btn:hover{color:var(--gold)}
    #notes-win-body{flex:1;display:flex;flex-direction:column;padding:9px 11px;overflow:hidden;min-height:0}
    #notes-win-body textarea{flex:1;min-height:50px;resize:none}
    /* Voice activity */
    .speaking .seat-avatar, .p-chip.speaking{box-shadow:0 0 0 2px #3ac860, 0 0 8px rgba(58,200,96,.5) !important;border-radius:50%}
    .p-chip.speaking{border-radius:4px}
    .mic-badge{display:none;position:absolute;bottom:-3px;right:-3px;font-size:9px;line-height:1;filter:drop-shadow(0 0 2px #000)}
    .exec-badge{position:absolute;top:-5px;right:-5px;font-size:11px;line-height:1;filter:drop-shadow(0 0 3px #000)}
    .ghost-seat{opacity:.38;filter:grayscale(.85)}
    .ghost-badge{position:absolute;top:-5px;left:-5px;font-size:10px;line-height:1;filter:drop-shadow(0 0 3px #000)}
    .role-card-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:120;background:var(--mid2);border:2px solid var(--gold-dim);border-radius:6px;padding:18px 22px;max-width:340px;width:calc(100vw - 40px);box-shadow:0 10px 40px rgba(0,0,0,.75)}
    .speaking .mic-badge{display:block}
    .seat-avatar{position:relative}
    /* Town panel divider */
    #town-divider{width:5px;cursor:ew-resize;background:transparent;border-left:1px solid var(--iron);flex-shrink:0}
    #town-divider:hover,#town-divider:active{background:rgba(201,168,76,.2);border-left-color:var(--gold-dim)}
    *{scrollbar-width:thin;scrollbar-color:var(--iron) transparent}
  
    /* ── Mobile (≤640px) ─────────────────────────────────────────── */
    #town-mob-toggle{display:none}
    @media (max-width: 640px) {
      /* Town map becomes a slide-over drawer */
      #town-divider{display:none}
      .town-panel{position:fixed;top:0;right:0;bottom:0;width:min(310px,86vw);z-index:95;
        transform:translateX(105%);transition:transform .22s ease;box-shadow:-6px 0 24px rgba(0,0,0,.55);
        border-left:1px solid var(--gold-dim)}
      .town-panel.mob-open{transform:translateX(0)}
      #town-mob-toggle{display:block;margin-left:auto;padding:3px 12px;font-size:12px;
        background:var(--surf);color:var(--gold);border:1px solid var(--gold-dim);
        border-radius:3px;cursor:pointer;align-self:center;margin-right:4px}

      /* Topbar: wrap instead of clip — the Join button must ALWAYS be reachable */
      .topbar{height:auto;min-height:44px;flex-wrap:wrap;overflow:visible;padding:6px 8px;row-gap:6px}
      .topbar-title{font-size:13px}
      .join-row{margin-left:0;flex-wrap:wrap;width:100%;row-gap:6px}
      #join-name{flex:1 1 130px;min-width:0}
      #st-controls{display:flex;flex-wrap:wrap;gap:5px;row-gap:6px;width:100%}
      #st-controls.hidden{display:none}
      .psel{max-width:46vw}
      .sep{display:none}

      /* Bigger touch targets, no iOS zoom-on-focus (needs ≥16px inputs) */
      .btn{padding:8px 12px;font-size:14px}
      input,select,textarea{font-size:16px !important}

      /* Panels and popups fit the screen */
      .modal-box{max-width:94vw !important;width:94vw;max-height:88vh;overflow-y:auto}
      #grim-panel{width:94vw !important;max-width:94vw;left:3vw !important;right:3vw}
      #notes-window{max-width:94vw;max-height:70vh}
      .role-card-popup{max-width:94vw}

      /* Status + vote rows wrap instead of overflowing */
      .statusbar{flex-wrap:wrap}
      .sb-item{padding:3px 8px;font-size:11px}
      /* Keep the bar to one slim row: hide the less-critical readouts */
      .sb-item:nth-child(3),.sb-item:nth-child(5){display:none}
      #evening-vote-row,#votelock-row{flex-wrap:wrap;gap:6px;padding:8px}

      /* Button rows wrap rather than clip */
      #seating-hdr-controls{flex-wrap:wrap;row-gap:4px}
      .kill-row{flex-wrap:wrap;row-gap:5px}
      .grim-field,.grim-check{max-width:100%}

      /* Seating ring gets a sane default height share */
      #seating-outer{max-height:34vh}
      /* Audio + chat headers tighten */
      .pane-hdr{padding:4px 8px}
    }
    /* Landscape phones: shorter seating so chat stays usable */
    @media (max-width: 940px) and (max-height: 480px) {
      #seating-outer{max-height:45vh}
    }


/* ── Information hierarchy / ST workflow ─────────────────────────────── */
#game-status-header{display:flex;align-items:stretch;gap:0;min-height:64px;flex-shrink:0;background:linear-gradient(90deg,var(--mid2),var(--surf));border-bottom:1px solid var(--iron);box-shadow:0 2px 10px rgba(0,0,0,.22)}
.gsh-phase{min-width:150px;padding:9px 16px;border-right:1px solid var(--iron);display:flex;flex-direction:column;justify-content:center}
.gsh-kicker{font-family:'Cinzel',serif;font-size:8px;letter-spacing:.14em;color:var(--ash);text-transform:uppercase;margin-bottom:2px}
#gsh-phase{font-family:'Cinzel',serif;font-size:21px;font-weight:600;color:var(--gold);letter-spacing:.05em}
.gsh-context{flex:1;min-width:0;padding:9px 16px;display:flex;flex-direction:column;justify-content:center}
#gsh-context{font-family:'Cinzel',serif;font-size:14px;color:var(--parch);letter-spacing:.04em}
.gsh-sub{font-family:'Crimson Text',serif;font-size:14px;color:var(--ash);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsh-stats{display:flex;align-items:stretch;border-left:1px solid var(--iron)}
.gsh-stats>div{min-width:68px;padding:7px 9px;border-right:1px solid var(--iron);display:flex;flex-direction:column;align-items:center;justify-content:center}
.gsh-stats strong{font-family:'JetBrains Mono',monospace;font-size:17px;color:var(--parch);font-weight:500;line-height:1.1}
.gsh-stats span{font-family:'Cinzel',serif;font-size:7px;letter-spacing:.1em;color:var(--ash);margin-top:3px}
.gsh-connection{min-width:100px;padding:0 11px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ash);text-transform:uppercase}
#gsh-connection-dot{width:7px;height:7px;border-radius:50%;background:var(--blood);box-shadow:0 0 0 2px rgba(139,26,26,.15)}
#gsh-connection-dot.online{background:#4d9b57;box-shadow:0 0 0 2px rgba(77,155,87,.16)}

/* Storyteller controls become a dedicated command strip rather than an undifferentiated button pile. */
#st-controls{flex:1 1 100%;order:20;padding:6px 0 7px;border-top:1px solid var(--iron);display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.st-toolbar-label{font-family:'Cinzel',serif;font-size:8px;letter-spacing:.12em;color:var(--gold-dim);margin-right:2px}
.st-toolbar-divider{width:1px;height:18px;background:var(--iron);margin:0 2px}
.topbar:has(#st-controls:not(.hidden)){height:auto;min-height:44px;flex-wrap:wrap;overflow:visible;padding-top:6px}
.topbar:has(#st-controls:not(.hidden)) .join-row{margin-left:auto}

/* Grimoire: visually reads as a separate Storyteller instrument. */
#grim-panel{background:#18131d;border-left:2px solid var(--gold-dim);box-shadow:-10px 0 28px rgba(0,0,0,.42)}
.grim-hdr{background:linear-gradient(90deg,#1e1722,#15111a);padding:11px 13px;border-bottom:1px solid var(--gold-dim)}
.grim-title{font-size:15px}
.grim-body{padding:12px 13px;gap:10px}
.grim-section{color:var(--gold-dim);border-left:2px solid var(--gold-dim);padding:3px 0 3px 7px}
.grim-field{background:rgba(0,0,0,.12);padding:6px;border:1px solid rgba(74,69,64,.45);border-radius:3px}
.grim-label{color:var(--mist)}
.grim-input{background:#211a29;border-color:#5b5149}
.kill-row{padding:6px;background:rgba(139,26,26,.05);border:1px solid rgba(139,26,26,.2);border-radius:3px}

/* Seats: stronger game-state semantics. */
.seat-avatar{width:38px;height:38px;border-width:2px;background:#171321}
.seat-name{font-size:10px;color:var(--parch);max-width:68px}
.seat-key{color:var(--gold);font-size:9px}
.seat-avatar.tf-seat{box-shadow:inset 0 0 0 1px rgba(42,90,154,.28)}
.seat-avatar.out-seat{box-shadow:inset 0 0 0 1px rgba(42,122,58,.28)}
.seat-avatar.evil-seat{box-shadow:inset 0 0 0 1px rgba(139,26,26,.28)}
.dead-seat{filter:grayscale(1)}

/* Post-game reveal */
#end-overlay{padding:24px 18px;overflow:auto}
#end-victor{font-size:24px;color:var(--gold);font-style:normal}
#end-summary{width:min(820px,94vw);max-height:58vh;overflow:auto;background:rgba(22,18,32,.92);border:1px solid var(--gold-dim);border-radius:5px;padding:8px}
.end-stats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.end-stats span{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--mist);padding:4px 7px;border:1px solid var(--iron);background:var(--surf);border-radius:2px}
.end-role-head,.end-role-row{display:grid;grid-template-columns:42px minmax(110px,1.4fr) minmax(110px,1.2fr) 90px 55px;gap:7px;align-items:center}
.end-role-head{padding:5px 7px;font-family:'Cinzel',serif;font-size:8px;letter-spacing:.1em;color:var(--ash);border-bottom:1px solid var(--iron)}
.end-role-row{padding:5px 7px;border-bottom:1px solid rgba(255,255,255,.035);font-size:13px}
.end-key{font-family:'JetBrains Mono',monospace;color:var(--gold)}
.end-player,.end-role{font-family:'Cinzel',serif;color:var(--parch)}
.end-team{font-size:12px;color:var(--ash);text-transform:capitalize}
.end-life{font-family:'JetBrains Mono',monospace;font-size:9px;text-align:right}.end-life.alive{color:#78b879}.end-life.dead{color:#9b7777}
.end-empty{padding:18px;text-align:center;color:var(--ash);font-style:italic}

/* Cottage extras are deliberately subordinate to the game. */
#game-launcher{background:#14101c;padding:5px 10px;border-bottom:1px solid var(--iron)}
#game-launcher .game-label{color:var(--gold-dim)}

@media (max-width:640px){
  #game-status-header{min-height:54px}
  .gsh-phase{min-width:104px;padding:7px 9px}
  #gsh-phase{font-size:16px}
  .gsh-context{padding:7px 9px}
  #gsh-context{font-size:12px}.gsh-sub{font-size:12px}
  .gsh-stats>div{min-width:48px;padding:5px 4px}.gsh-stats strong{font-size:13px}.gsh-stats span{font-size:6px}
  .gsh-stats>div:nth-child(4){display:none}.gsh-connection{min-width:32px;padding:0 7px}.gsh-connection span:last-child{display:none}
  .topbar:has(#st-controls:not(.hidden)){padding-bottom:5px}
  #st-controls{padding-top:7px}
  .st-toolbar-divider{display:none}
  .st-toolbar-label{width:100%}
  #end-summary{max-height:52vh;padding:5px}
  .end-role-head,.end-role-row{grid-template-columns:28px minmax(80px,1fr) minmax(85px,1fr) 60px 45px;gap:4px}
  .end-role-row{font-size:11px}.end-team{font-size:10px}
}


#mobile-nav,#mobile-more-panel{display:none}
@media (max-width:640px){
  #mobile-nav{display:flex;position:relative;z-index:96;height:46px;flex-shrink:0;background:#12101a;border-top:1px solid var(--iron);padding:4px 5px;gap:4px}
  #mobile-nav button{flex:1;border:1px solid transparent;background:transparent;color:var(--ash);font-family:'Cinzel',serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;border-radius:3px}
  #mobile-nav button.active,#mobile-nav button:active{border-color:var(--gold-dim);background:var(--surf);color:var(--gold)}
  #mobile-more-panel{position:fixed;display:none;left:8px;right:8px;bottom:51px;z-index:97;background:var(--mid2);border:1px solid var(--gold-dim);border-radius:5px;padding:7px;box-shadow:0 8px 24px rgba(0,0,0,.6);grid-template-columns:1fr 1fr;gap:5px}
  #mobile-more-panel.vis{display:grid}
  #mobile-more-panel .btn{padding:9px 8px}
  .main{min-height:0}
  .town-panel{bottom:46px}
  .town-panel.mob-open{box-shadow:-8px 0 30px rgba(0,0,0,.7)}
  .statusbar{padding-bottom:4px}
}

.history-game{border:1px solid var(--iron);background:var(--surf);border-radius:4px;margin-bottom:8px;overflow:hidden}.history-game:last-child{margin-bottom:0}.history-game-head{display:flex;justify-content:space-between;gap:8px;padding:7px 9px;border-bottom:1px solid var(--iron);font-family:'Cinzel',serif;color:var(--gold)}.history-game-head span{font-family:'Crimson Text',serif;color:var(--mist);font-size:13px}.history-grid{padding:3px 7px}.history-row{display:grid;grid-template-columns:24px 1.2fr 1fr 90px 45px;gap:7px;padding:4px 2px;border-bottom:1px solid rgba(255,255,255,.035);font-size:12px}.history-row:last-child{border-bottom:0}.history-row strong{font-family:'Cinzel',serif;font-weight:500;color:var(--parch)}.history-row span{color:var(--ash)}.history-alive{color:#78b879!important}.history-dead{color:#9b7777!important}
@media(max-width:640px){.history-game-head{display:block}.history-game-head span{display:block;margin-top:2px}.history-row{grid-template-columns:20px 1fr 1fr 60px 35px;font-size:10px;gap:4px}}