/* Approved lobby/room presentation; scoped away from live play and replay. */
.lobby-design{--page:#f7f7f3;--panel:#fff;--ink:#20241e;--muted:#697062;--line:#d5d9ce;--pale:#edf2e8;--green:#405a3d;--gold:#a08c3b;--gold-light:#f9f2d7;--red:#b0342e;--soft:#fafbf8}
.lobby-design *{box-sizing:border-box}
.lobby-design button,.lobby-design input,.lobby-design a{touch-action:manipulation}
.lobby-design button,.lobby-design input{font:inherit;color:inherit}
.lobby-design button,.lobby-design a{ -webkit-tap-highlight-color:transparent}
.lobby-design button{cursor:pointer}
.lobby-design button:disabled{cursor:default;opacity:.6}
.lobby-design a{color:inherit;text-decoration:none}
.lobby-design button:focus-visible,.lobby-design a:focus-visible,.lobby-design input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.lobby-design button{min-height:44px;border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:9px 16px}
.lobby-design button:hover:not(:disabled),.lobby-design a.button:hover{border-color:var(--gold);background:var(--gold-light)}
.lobby-design .avatar{width:54px;height:54px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pale);font:21px Arial,sans-serif;flex-shrink:0;color:var(--ink)}
.lobby-design .avatar.small{width:39px;height:39px;font-size:17px}
.lobby-design .avatar.empty{background:transparent;border-style:dashed;font-size:27px;color:var(--muted)}
.lobby-design .avatar.sand{background:#f1ece0}
.lobby-design .avatar.rose{background:#f5e6e1}
.lobby-design .avatar.blue{background:#e8eff1}
.lobby-design .avatar.lilac{background:#eeebf3}
.lobby-design .avatar.you{border:2px solid var(--gold);background:var(--gold-light)}
.lobby-design .columns{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
.lobby-design .heading h1{font:500 40px/1.12 Georgia,serif;letter-spacing:-.5px;margin:0 0 9px}
.lobby-design .heading p{font:17px/1.5 Arial,sans-serif;color:var(--muted);margin:0}
.lobby-design .heading{margin-bottom:22px}
.lobby-design .filters{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:3px;gap:3px;margin-bottom:20px}
.lobby-design .filters button{border:0;min-width:150px;background:none;color:var(--muted);border-radius:4px}
.lobby-design .filters button[aria-selected=true]{background:var(--green);color:white}
.lobby-design .panel{border:1px solid var(--line);border-radius:9px;background:var(--panel);overflow:hidden}
.lobby-design .section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 20px 14px}
.lobby-design .section-head h2{font:500 24px Georgia,serif;margin:0}
.lobby-design .count{font-size:13px;color:var(--muted);white-space:nowrap}
.lobby-design .waiting{border-color:#c2b278;margin-bottom:18px}
.lobby-design .rows{padding:0 12px 12px}
.lobby-design .wait-row{display:grid;grid-template-columns:minmax(0,1fr) 225px;align-items:center;gap:18px;border:1px solid var(--line);border-radius:6px;padding:13px 16px;margin-bottom:8px;min-height:109px}
.lobby-design .wait-row:last-child{margin-bottom:0}
.lobby-design .wait-row.starter{background:var(--soft)}
.lobby-design .wait-row.own{border-color:#c3b16b}
.lobby-design .places{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:10px}
.lobby-design .place{border:0;background:transparent;display:flex;align-items:center;flex-direction:column;gap:7px;min-width:0;padding:0 2px;line-height:1.2;font-size:14px;min-height:78px;text-align:center;border-radius:6px}
.lobby-design .place:hover:not(:disabled){background:transparent}
.lobby-design .place:hover:not(:disabled) .avatar{border-color:var(--gold);background:var(--gold-light)}
.lobby-design .place.static{cursor:default}
.lobby-design .place .name{overflow-wrap:anywhere;max-width:100%}
.lobby-design .place.you .name{font-weight:bold}
.lobby-design .policy{border-left:1px solid var(--line);padding-left:20px;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:6px;font-size:15px}
.lobby-design .policy small{color:var(--muted);font-size:12px;line-height:1.4}
.lobby-design .policy strong{font-weight:500}
.lobby-design .micro-actions{display:flex;align-items:center;gap:12px;font-size:13px}
.lobby-design .micro-actions button,.lobby-design .text-button{min-height:32px;padding:4px 0;border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;color:var(--muted)}
.lobby-design .micro-actions button:hover{background:transparent;color:var(--ink)}
.lobby-design .own-mark{color:var(--green);font-size:12px}
.lobby-design .waiting-hint{margin:9px 7px 0;color:var(--muted);font-size:12px;line-height:1.5}
.lobby-design .live-head,.lobby-design .live-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 88px;align-items:center;gap:14px;padding:12px 16px}
.lobby-design .live-head{font-size:12px;color:var(--muted);padding-top:0;padding-bottom:8px}
.lobby-design .live-row{border-top:1px solid var(--line);min-height:83px}
.lobby-design .live-people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lobby-design .live-person{min-width:0;display:flex;align-items:center;gap:7px}
.lobby-design .live-person .avatar{width:30px;height:30px;font-size:12px}
.lobby-design .person-score{font-size:12px;min-width:0;line-height:1.55}
.lobby-design .person-score .person-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lobby-design .person-score b{display:block;font-size:14px;font-variant-numeric:tabular-nums}
.lobby-design .positive{color:var(--green)}
.lobby-design .negative{color:#823d34}
.lobby-design .game-meta{font-size:13px;line-height:1.5}
.lobby-design .game-meta span{display:block;color:var(--muted);font-size:12px}
.lobby-design .watch{font-size:13px;padding:7px 10px;min-height:38px}
.lobby-design .chat{display:flex;flex-direction:column;min-height:580px;max-height:650px}
.lobby-design .chat .section-head{border-bottom:1px solid var(--line);padding:19px 18px}
.lobby-design .chat .section-head h2{font-size:26px}
.lobby-design .presence{font-size:12px;color:var(--muted)}
.lobby-design .presence::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#598459;margin-right:6px}
.lobby-design .messages{overflow-y:auto;flex:1;padding:6px 18px;min-height:200px;max-height:470px}
.lobby-design .message{font:14px/1.55 Arial,sans-serif;padding:13px 0;border-bottom:1px solid #eceee7;overflow-wrap:anywhere}
.lobby-design .message time{font-size:11px;color:#92958a;white-space:nowrap;margin-left:6px}
.lobby-design .message.system{color:var(--red);font-size:13px}
.lobby-design .message:last-child{border:0}
.lobby-design .message b{font-weight:600}
.lobby-design .chat-form{display:flex;gap:8px;padding:16px 14px;border-top:1px solid var(--line)}
.lobby-design .chat-form input{width:100%;min-width:0;border:1px solid var(--line);border-radius:5px;background:var(--panel);padding:10px 11px;font-size:14px}
.lobby-design .gold{border:1px solid var(--gold);background:var(--gold-light)}
.lobby-design .chat-form button{font-size:14px;padding:9px 14px}
.lobby-design .room-heading{display:flex;align-items:start;justify-content:space-between;gap:15px;margin-bottom:22px}
.lobby-design .room-heading .heading{margin:0}
.lobby-design .back{font-size:13px;display:inline-flex;align-items:center;min-height:32px;color:var(--muted);margin:-9px 0 9px}
.lobby-design .room-heading h1{font-size:36px}
.lobby-design .room-heading p{font-size:15px}
.lobby-design .room-actions{display:flex;gap:8px;align-self:end;padding-bottom:3px}
.lobby-design .room-actions button{font-size:14px;min-height:40px}
.lobby-design .room-status{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--green)}
.lobby-design .dot{width:7px;height:7px;border-radius:50%;background:#6d8c62}
.lobby-design .room-places{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:28px 24px 24px;align-items:start}
.lobby-design .room-person{display:flex;align-items:center;flex-direction:column;text-align:center;gap:10px;min-width:0}
.lobby-design .room-person .avatar{width:72px;height:72px;font-size:28px}
.lobby-design .room-person .name{font-size:16px}
.lobby-design .avatar.reserved{border:2px dashed var(--gold);background:var(--gold-light);color:var(--ink)}
.lobby-design .reserved-place small{font-size:11px;color:var(--muted)}
.lobby-design .room-person .reserve-place{font-size:12px;min-height:36px;padding:5px 12px}
.reservation-results{display:grid;gap:6px;max-height:280px;overflow:auto}
.reservation-results button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;text-align:left}
.reservation-results button span{font-size:12px;color:var(--muted)}
#reservationSearch{width:100%;min-height:44px;margin-top:8px}
.lobby-design .room-person small{color:var(--muted);font-size:12px;min-height:16px}
.lobby-design .vote-tag{font-size:12px;color:var(--green);padding:5px 8px;background:var(--pale);border-radius:4px}
.lobby-design .vote-tag.waiting{color:var(--muted);background:#f2f3ee}
.lobby-design .room-policy{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding:14px 20px;background:var(--soft);font-size:14px}
.lobby-design .room-policy small{color:var(--muted);font-size:12px}
.lobby-design .room-note{text-align:center;color:var(--muted);font-size:12px;margin:0 16px 22px;line-height:1.5}
.lobby-design .vote-panel{margin-top:18px;padding:23px 24px}
.lobby-design .vote-panel h2{font:500 25px Georgia,serif;margin:0 0 9px}
.lobby-design .vote-panel p{font:15px/1.5 Arial,sans-serif;color:var(--muted);margin:0}
.lobby-design .vote-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:21px}
.lobby-design .vote-buttons{display:flex;gap:9px}
.lobby-design .vote-buttons button{min-width:125px}
.lobby-design .vote-buttons .chosen{background:var(--pale);border-color:var(--green);color:var(--green)}
.lobby-design .vote-count{font-size:13px;color:var(--muted);white-space:nowrap}
.lobby-design .votes{display:flex;gap:5px;margin-bottom:7px;justify-content:flex-end}
.lobby-design .votes i{display:block;width:22px;height:4px;background:var(--line);border-radius:4px}
.lobby-design .votes i.yes{background:var(--green)}
.lobby-design .room-summary{margin-top:18px;font-size:13px;line-height:1.6;color:var(--muted)}
.lobby-design .setup-panel{padding:24px}
.lobby-design .setup-panel h2{font:500 25px Georgia,serif;margin:0 0 8px}
.lobby-design .setup-panel p{font-size:14px;line-height:1.5;color:var(--muted);margin:0}
.lobby-design .options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:21px 0}
.lobby-design .policy-option{display:flex;align-items:start;gap:10px;padding:17px 14px;border:1px solid var(--line);border-radius:6px;cursor:pointer}
.lobby-design .policy-option:has(input:checked){border-color:var(--gold);background:var(--gold-light)}
.lobby-design .policy-option input{accent-color:var(--green);margin:3px 0 0;width:17px;height:17px;flex-shrink:0}
.lobby-design .policy-option strong{display:block;font-size:16px;font-weight:500;margin-bottom:7px}
.lobby-design .policy-option span small{font-size:13px;color:var(--muted);line-height:1.55;display:block}
.lobby-design .setup-actions{display:flex;align-items:center;justify-content:space-between;gap:15px}
.lobby-design .setup-actions small{font-size:12px;color:var(--muted)}
.lobby-design .empty-state{padding:24px;text-align:center;color:var(--muted);font-size:14px}
.lobby-design .banner{background:var(--gold-light);border:1px solid #d8c990;border-radius:6px;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 14px;margin:0 0 16px;font-size:13px}
.lobby-design .banner button{font-size:13px;min-height:34px}
.lobby-design .countdown{color:var(--green);border-color:var(--green)}
body.dark-mode .lobby-design {--page:#20231f;--panel:#292d27;--ink:#eceee7;--muted:#b3bbac;--line:#48503f;--pale:#343d2e;--green:#8bac78;--gold-light:#484128;--soft:#252a22}
body.dark-mode .lobby-design .avatar{color:#20241e}
body.dark-mode .lobby-design .avatar.empty{color:var(--muted)}
body.dark-mode .lobby-design .message{border-color:var(--line)}
@media(min-width:1400px){
.lobby-design .columns{grid-template-columns:minmax(0,1fr) 350px;gap:28px}
.lobby-design .wait-row{grid-template-columns:minmax(0,1fr) 265px}
.lobby-design .live-row,.lobby-design .live-head{grid-template-columns:minmax(0,1fr) 120px 102px}
.lobby-design .live-person .avatar{width:34px;height:34px}
.lobby-design .person-score{font-size:13px}
.lobby-design .chat{min-height:600px}
}
@media(max-width:1100px){
.lobby-design .columns{grid-template-columns:minmax(0,1fr) 285px;gap:18px}
.lobby-design .wait-row{grid-template-columns:minmax(0,1fr) 165px;gap:10px;padding:13px 8px}
.lobby-design .policy{padding-left:12px;font-size:14px}
.lobby-design .places{gap:5px}
.lobby-design .place{font-size:12px}
.lobby-design .avatar{width:46px;height:46px}
.lobby-design .live-person .avatar{display:none}
.lobby-design .live-row,.lobby-design .live-head{grid-template-columns:minmax(0,1fr) 98px 74px;gap:10px}
.lobby-design .room-actions{flex-wrap:wrap}
.lobby-design .room-person .avatar{width:58px;height:58px}
.lobby-design .room-person .name{font-size:14px}
.lobby-design .vote-bottom{align-items:start;flex-wrap:wrap}
}
@media(max-width:880px){
.lobby-design .columns{grid-template-columns:minmax(0,1fr)}
.lobby-design .chat{min-height:310px;max-height:360px}
.lobby-design .messages{max-height:235px}
.lobby-design .chat .section-head{padding:15px 18px}
.lobby-design .chat .section-head h2{font-size:24px}
.lobby-design .wait-row{grid-template-columns:minmax(0,1fr) 220px;padding:13px 16px}
.lobby-design .avatar{width:54px;height:54px}
.lobby-design .place{font-size:14px}
.lobby-design .live-person .avatar{display:flex}
.lobby-design .room-actions{align-self:start}
.lobby-design .room-person .avatar{width:66px;height:66px}
}
@media(max-width:560px){
.lobby-design .heading h1{font-size:34px}
.lobby-design .heading p{font-size:15px;max-width:310px}
.lobby-design .heading{margin-bottom:17px}
.lobby-design .filters{display:flex;margin-bottom:15px}
.lobby-design .filters button{min-width:0;flex:1;font-size:15px}
.lobby-design .section-head{padding:15px 13px 12px}
.lobby-design .section-head h2{font-size:22px}
.lobby-design .count{font-size:12px}
.lobby-design .rows{padding:0 8px 9px}
.lobby-design .wait-row{grid-template-columns:minmax(0,1fr);gap:11px;padding:12px 8px;min-height:0}
.lobby-design .places{gap:5px}
.lobby-design .avatar{width:46px;height:46px;font-size:20px}
.lobby-design .place{font-size:12px;gap:6px;min-height:67px}
.lobby-design .policy{border-left:0;border-top:1px solid var(--line);padding:10px 3px 0;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;font-size:13px;flex-wrap:wrap}
.lobby-design .policy small{font-size:11px}
.lobby-design .policy .micro-actions{margin-left:auto}
.lobby-design .starter .policy{display:block}
.lobby-design .starter .policy small{display:block;margin-top:4px}
.lobby-design .waiting-hint{font-size:11px}
.lobby-design .live-head{display:none}
.lobby-design .live-row{grid-template-columns:minmax(0,1fr) auto;padding:12px;gap:10px}
.lobby-design .live-people{grid-column:1/-1;gap:6px}
.lobby-design .live-person{gap:5px}
.lobby-design .live-person .avatar{width:26px;height:26px;font-size:11px}
.lobby-design .person-score{font-size:11px}
.lobby-design .person-score b{font-size:13px}
.lobby-design .game-meta{display:flex;gap:10px;align-items:center}
.lobby-design .game-meta span{font-size:12px}
.lobby-design .watch{min-width:80px;min-height:40px}
.lobby-design .room-heading{flex-wrap:wrap;gap:13px}
.lobby-design .room-heading .heading{width:100%}
.lobby-design .room-heading h1{font-size:32px}
.lobby-design .room-actions{width:100%;justify-content:flex-start}
.lobby-design .room-actions button{min-height:40px}
.lobby-design .room-places{padding:23px 10px 20px;gap:6px}
.lobby-design .room-person .avatar{width:52px;height:52px;font-size:22px}
.lobby-design .room-person .name{font-size:13px}
.lobby-design .room-person small{font-size:10px}
.lobby-design .vote-tag{font-size:10px;padding:5px}
.lobby-design .room-policy{padding:12px;align-items:start;flex-direction:column;gap:5px;font-size:13px}
.lobby-design .room-note{font-size:11px;margin:0 10px 18px}
.lobby-design .vote-panel{padding:20px 16px}
.lobby-design .vote-panel h2{font-size:23px}
.lobby-design .vote-panel p{font-size:14px}
.lobby-design .vote-bottom{margin-top:16px}
.lobby-design .vote-buttons{width:100%}
.lobby-design .vote-buttons button{min-width:0;flex:1;font-size:14px}
.lobby-design .vote-count{display:flex;align-items:center;gap:10px}
.lobby-design .votes{margin:0}
.lobby-design .setup-panel{padding:20px 16px}
.lobby-design .options{grid-template-columns:1fr}
.lobby-design .setup-actions{align-items:start;flex-direction:column}
.lobby-design .setup-actions button{width:100%}
.lobby-design .chat{min-height:330px}
.lobby-design .chat-form input{font-size:16px}
}
.lobby-design .room-places{padding-top:18px;padding-bottom:17px}
.lobby-design .room-person{gap:7px}
.lobby-design .room-person .avatar{width:58px;height:58px;font-size:24px}
.lobby-design .room-person small{min-height:0}
.lobby-design .room-note{margin-bottom:15px}
.lobby-design .room-person .name{font-size:15px}
.lobby-design .room-heading~.columns>.chat{min-height:490px;max-height:550px}
@media(max-width:560px){
.lobby-design .room-person .name{font-size:12px}
.lobby-design .room-person .avatar{width:48px;height:48px;font-size:21px}
.lobby-design .room-heading~.columns>.chat{min-height:330px;max-height:360px}
}
.lobby-open #onlineLobby{padding:30px 36px 26px}
.lobby-design{font:16px Arial,sans-serif;color:var(--ink)}
.lobby-design .panel{padding:0}
.lobby-design .vote-panel,.lobby-design .setup-panel{padding:23px 24px;margin-top:18px}
.lobby-design .room-chat{min-width:0}
.lobby-design .room-chat #chatPanel{display:flex;flex-direction:column;width:100%;padding:0;min-height:490px;margin:0;border:0;border-radius:9px;background:var(--panel)}
.lobby-design .room-chat #chatPanel>b{font:500 26px Georgia,serif;padding:20px 18px;border-bottom:1px solid var(--line)}
.lobby-design .room-chat #chatMessages{flex:1;max-height:400px;min-height:250px;height:300px;padding:7px 18px}
.lobby-design #chatMessages p{font:14px/1.55 Arial,sans-serif;padding:10px 0;margin:0;border-bottom:1px solid var(--line)}
.lobby-design #chatMessages time,.table-chat time{font:11px Arial,sans-serif;color:var(--muted);white-space:nowrap;margin-left:6px}
.lobby-design .room-chat #chatForm{padding:15px 14px;border-top:1px solid var(--line);display:flex;gap:8px}
.lobby-design .room-chat #chatForm input{min-width:0;flex:1;font:14px Arial,sans-serif}
.lobby-design .room-chat #chatNotice{padding:0 14px 12px;margin:0;font-size:11px}
.lobby-design .chat-help{padding:0 14px 12px;margin:0;font-size:11px;color:var(--muted)}
.lobby-design .rating-note{font-size:12px;color:var(--muted);margin:-8px 0 18px}
.lobby-design .waiting-hint{margin:0 19px 14px}
.lobby-design .current-table{margin-bottom:18px}
.lobby-design .setup-actions small{max-width:60%}
.lobby-design .live-row .watch{padding:7px;overflow-wrap:anywhere}
.lobby-design .invitation-entry{display:flex;gap:10px;align-items:center;margin-top:20px}
.lobby-design .invitation-entry input{width:130px}
.lobby-design .start-countdown:empty{display:none}
.lobby-design .start-countdown{margin-bottom:0}
@media(max-width:880px){.lobby-design .room-chat #chatPanel{min-height:310px}.lobby-design .room-chat #chatMessages{height:200px;min-height:180px;max-height:250px}}
@media(max-width:560px){.lobby-open #onlineLobby{padding:23px 14px}.lobby-design .vote-panel,.lobby-design .setup-panel{padding:20px 16px}.lobby-design .setup-actions small{max-width:none}.lobby-design .room-chat #chatForm input{font-size:16px}.lobby-design .invitation-entry{flex-wrap:wrap}.lobby-design .current-table{flex-wrap:wrap}}
/* Approved navy/slate lobby palette; game/replay colors remain separately scoped. */
body.lobby-open.dark-mode{--felt:#15212b;--page:#111c25;--panel:#1a2630;--ink:#f3f4f5;--muted:#b8c3cd;--line:#43515c;--control:#1b2935;--hover:#283b48;--active:#293d36;--gold:#e6be64;--positive:#77b688;background:#111c25}
body.lobby-open.dark-mode #app{background:radial-gradient(ellipse at top left,#1a2936 0,#111c25 65%);border-color:#33424e}
body.lobby-open.dark-mode #lobbyHeader{background:#15212b}
body.lobby-open.dark-mode .online-bar{background:#223241;color:#c5ced5}

body.lobby-open.dark-mode #lobbyHeader nav a.current{color:#fff3cf;text-decoration-color:#e6be64}
body.dark-mode .lobby-design{--page:#111c25;--panel:#1a2630;--ink:#f3f4f5;--muted:#b8c3cd;--line:#43515c;--pale:#cbdcb7;--green:#4e8059;--gold:#e6be64;--gold-light:#303c34;--soft:#22313c}
body.dark-mode .lobby-design .panel{background:linear-gradient(125deg,#19252f,#1a2630)}
body.dark-mode .lobby-design .wait-row,body.dark-mode .lobby-design .live-row{background:#22303b;border-color:#394955}
body.dark-mode .lobby-design .starter{background:#233037;border-color:#51616a}
body.dark-mode .lobby-design .avatar{color:#14232d;border-color:transparent;background:#ccdfb8}
body.dark-mode .lobby-design .avatar.sand{background:#e6d8b0}
body.dark-mode .lobby-design .avatar.rose{background:#ebc6c1}
body.dark-mode .lobby-design .avatar.blue{background:#b9d8eb}
body.dark-mode .lobby-design .avatar.empty{background:transparent;border:1px dashed #82909a;color:#f3f4f5}
body.dark-mode .lobby-design .avatar.you{background:#ccdfb8;border-color:#e6be64}
body.dark-mode .lobby-design .filters{padding:0;gap:0;overflow:hidden}
body.dark-mode .lobby-design .filters button[aria-selected=true],body.dark-mode .lobby-design .chat-form button,body.dark-mode .lobby-design #chatSend{background:#4e7655;color:#fff;border-color:#5a7e60}
body.dark-mode .lobby-design .gold{background:#334a3a;border-color:#79906b;color:#f7f8f3}
body.dark-mode .lobby-design input{background:#121f29;color:#f3f4f5;border-color:#51616d}
body.dark-mode .lobby-design .message b{color:#e6be64}
body.dark-mode .lobby-design .message:nth-child(3n+2) b{color:#b9d8eb}
body.dark-mode .lobby-design .message.system,body.dark-mode .chat-system{color:#ff8a85}
body.dark-mode .lobby-design .message time{color:#9caab5}
body.dark-mode .lobby-design .vote-tag.waiting{background:#24333e;color:#c5ced5}
body.dark-mode .lobby-design .vote-buttons .chosen{background:#304c3c;color:#e8f4e9}
body.dark-mode .lobby-design .policy-option:has(input:checked){background:#293c33}
body.dark-mode .lobby-design .danger,body.dark-mode .lobby-design #leaveRoom{color:#ff928a;border-color:#b65b5b}
.vacancy-label{color:var(--negative);font-size:12px}
.kick-player{font-size:11px;min-height:30px;margin-left:8px}

/* Compact global lobby chat; table chat keeps its existing presentation. */
.lobby-design .lobby-global-chat{min-height:420px;max-height:560px}
.lobby-design .lobby-global-chat .section-head{padding:12px 14px}
.lobby-design .lobby-global-chat .section-head h2{font-size:24px}
.lobby-design .lobby-global-chat .messages{padding:4px 14px;max-height:420px}
.lobby-design .lobby-global-chat .message{margin:0;padding:5px 0;font-size:14px;line-height:1.4}
.lobby-design .lobby-global-chat .message.system{font-size:13px}
.lobby-design .lobby-global-chat .message time{font-size:11px}
.lobby-design .lobby-global-chat .chat-form{padding:10px;gap:7px}
.lobby-design .lobby-global-chat .chat-delete{min-height:28px;padding:3px 5px;font-size:11px}
@media(pointer:coarse){.lobby-design .lobby-global-chat .chat-delete{min-height:44px}}
.admin-bots {max-width:680px;margin:auto}
.admin-bots fieldset {margin:18px 0;padding:14px;border:1px solid var(--line,#bdc8c3);border-radius:10px;min-width:0}
.admin-bots legend {font-weight:700;padding:0 6px}
.admin-bots label {display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:8px 0}
.admin-bots .account-choice {justify-content:flex-start}
.admin-bots select,.admin-bots input:not([type=checkbox]) {font:inherit;min-height:38px;max-width:100%;padding:6px 8px;border:1px solid var(--line,#bdc8c3);border-radius:6px;color:inherit;background:var(--panel,#fff)}
.bot-counts {border-collapse:collapse;width:100%;text-align:center}
.bot-counts th,.bot-counts td {padding:8px;border-bottom:1px solid var(--line,#bdc8c3)}
.bot-counts th:first-child {text-align:left;overflow-wrap:anywhere}
.bot-counts small {display:block;font-weight:400;opacity:.7}
.bot-counts select {min-width:58px}
.bot-settings-error {color:#b63726;font-weight:600}
body.dark-mode .bot-settings-error {color:#ff9a89}
@media(max-width:480px){.admin-bots fieldset{padding:10px}.bot-counts th,.bot-counts td{padding:6px 3px}.bot-names label{align-items:stretch}.bot-names input{width:100%}}

.bot-random-mode{margin:12px 0}.bot-random-pool{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:6px 12px;margin:10px 0}.bot-random-pool label{display:flex;align-items:center;gap:6px;font-size:13px}.bot-random-pool input{width:auto}
.admin-bots .bot-random-pool label{justify-content:flex-start;flex-wrap:nowrap;gap:6px}.admin-bots .bot-random-mode>.account-choice{display:grid;grid-template-columns:auto 1fr;align-items:start}

/* Revision 21: compact table rows and an independently sized chat. */
body.site-redesign .lobby-design .lobby-global-chat{min-height:0;height:420px;max-height:420px;align-self:start}
body.site-redesign .lobby-design .messages{min-height:0;max-height:none}
body.site-redesign .lobby-design .message{padding:8px 0}
body.site-redesign .lobby-design .message time{display:inline;float:none;position:static;margin-left:6px;white-space:nowrap}
body.site-redesign .lobby-design .watch{min-height:44px;min-width:0}
body.site-redesign .lobby-design .live-row{min-height:78px;grid-template-columns:minmax(0,1fr) 94px 76px;gap:10px}
body.site-redesign .lobby-design .live-people{grid-column:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
body.site-redesign .lobby-design .live-person{flex-direction:column;gap:3px;text-align:center}
body.site-redesign .lobby-design .live-person .avatar{width:28px;height:28px}
body.site-redesign .lobby-design .person-score{width:100%;line-height:1.25}
body.site-redesign .lobby-design .person-score b{font-size:12px}
body.site-redesign .lobby-design .game-meta{display:block;font-size:12px}
@media(max-width:600px){body.site-redesign .lobby-design .live-row{grid-template-columns:minmax(0,1fr) 68px;padding:12px 8px;gap:8px}body.site-redesign .lobby-design .live-people{grid-column:1;grid-row:1 / span 2}body.site-redesign .lobby-design .game-meta{grid-column:2;grid-row:1}body.site-redesign .lobby-design .watch{grid-column:2;grid-row:2;width:100%;padding:4px}body.site-redesign .lobby-design .lobby-global-chat{height:360px;max-height:360px}}
body.site-redesign.lobby-open #onlineLobby{max-width:1200px;margin:auto;padding:30px 22px}
body.site-redesign .lobby-design>.heading{margin-bottom:24px}
body.site-redesign .lobby-design>.columns{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:16px}
body.site-redesign .lobby-design .waiting{border-color:var(--line)}
body.site-redesign .lobby-design .waiting .filters{margin:0 18px 18px}
body.site-redesign .lobby-design .waiting .rating-note{margin:0 18px 16px}
body.site-redesign .lobby-design .wait-row{min-height:76px;padding:12px 6px;border:0;border-bottom:1px solid var(--line);border-radius:0;grid-template-columns:minmax(0,1fr) 146px;gap:12px;background:transparent}
body.site-redesign .lobby-design .wait-row .avatar{width:34px;height:34px;font-size:15px}
body.site-redesign .lobby-design .wait-row .place{min-height:54px;gap:4px;font-size:12px}
body.site-redesign .lobby-design .wait-row .policy{font-size:12px;padding-left:12px}
body.site-redesign .lobby-design .wait-row .policy small{font-size:11px}
@media(max-width:880px){body.site-redesign .lobby-design>.columns{grid-template-columns:1fr}}
@media(max-width:600px){body.site-redesign.lobby-open #onlineLobby{padding:24px 14px}body.site-redesign .lobby-design .wait-row{grid-template-columns:minmax(0,1fr)}body.site-redesign .lobby-design .wait-row .policy{padding:8px 0 0}body.site-redesign .lobby-design .filters button{min-width:0}}

/* Waiting tables stay in the lobby until play begins. */
body.site-redesign .lobby-design .wait-row.own{background:var(--site-tint);border:1px solid var(--site-gold);border-radius:8px;padding:12px}
.lobby-design .lobby-table-controls{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px;min-width:0}
.lobby-design .lobby-table-controls p{font-size:13px;color:var(--muted);line-height:1.5;margin:6px 0}
.lobby-design .wait-row .room-person{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.lobby-design .wait-row .room-person .name{font-size:12px;max-width:100%;overflow-wrap:anywhere}
.lobby-design .wait-row .room-person small,.lobby-design .wait-row .vote-tag{font-size:10px;line-height:1.3}
.lobby-design .wait-row .room-person button{font-size:11px;padding:4px 6px;min-height:30px}
.lobby-table-options .options{display:grid;gap:12px;margin:18px 0}
.lobby-table-options .policy-option{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid var(--site-line);border-radius:8px;cursor:pointer}
.lobby-table-options .policy-option input{margin-top:4px}
.lobby-table-options .policy-option span{display:grid;gap:6px}
.lobby-table-options .policy-option small{color:var(--site-muted);line-height:1.5}
.lobby-table-options h2{font:26px/1.2 Georgia,serif;margin:0 0 12px}
@media(max-width:600px){.lobby-design .lobby-table-controls .vote-bottom{align-items:flex-start;flex-direction:column;gap:8px}}
.table-readiness{font-weight:650}.table-policy-help{font-size:12px;line-height:1.5}.kick-cooldown{display:inline-block;margin-inline-start:8px}.vacancy-vote-details{font-size:11px;text-align:left;max-width:260px;position:relative}.vacancy-vote-details summary{cursor:pointer}.vacancy-vote-details[open]{z-index:30;background:var(--site-panel,#fff);border:1px solid var(--site-line,#ccc);border-radius:8px;padding:8px;box-shadow:0 6px 16px #0002}.vacancy-vote-details p{margin:6px 0}.vacancy-vote-details small{display:block;line-height:1.4}.vacancy-vote-details button{font-size:11px;padding:4px 8px}#inviteLinkFallback{width:100%;margin-block:10px}

/* Spectator access stays visible at the lobby entrance and beside every game. */
.lobby-design .kibitz-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.lobby-design .kibitz-shortcut{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 16px;border:1px solid var(--site-action);border-radius:6px;color:var(--site-action);background:var(--panel);font:600 14px Arial,sans-serif}
.lobby-design #lobby-kibitz-games{scroll-margin-top:24px}
.lobby-design .kibitz-help{font-size:13px;line-height:1.5;color:var(--muted);margin:0 18px 12px}
#onlineLobby .kibitz-action{border-color:var(--site-action);color:var(--site-action);min-height:44px}
.lobby-design .live-category{font-size:12px;color:var(--muted)}

.kibitz-hand-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}
.kibitz-hand-choices button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:48px;text-align:left;overflow-wrap:anywhere}
.kibitz-hand-choices button span{font-size:12px;color:var(--muted)}

/* Small view buttons sit on the felt directly beneath the contract. */
#kibitzControls.kibitz-compact-controls{position:relative;display:flex;align-items:center;gap:3px;flex-wrap:wrap;width:max-content;max-width:100%;margin:6px 0 0;padding:0;border:0;background:none;font:11px/1.2 Arial,sans-serif;overflow:visible}
.online-kibitzing .table:has(.kibitz-hand)>.top-left #kibitzControls{flex-basis:100%}
#kibitzControls .kibitz-view-buttons{display:flex;gap:2px;max-width:100%}
#kibitzControls .kibitz-view-buttons button{min-width:24px;min-height:24px;margin:0;padding:3px 5px;border:1px solid var(--line);border-radius:4px;background:var(--control);color:var(--ink);font:700 11px/1.2 Arial,sans-serif}
#kibitzControls .kibitz-view-buttons button[aria-pressed=true]{color:var(--ink);background:var(--active);border:2px solid var(--gold);padding:2px 4px;box-shadow:inset 0 -1px 0 var(--gold)}
#kibitzControls .kibitz-table-options{position:static;max-width:100%}
#kibitzControls .kibitz-table-options>summary{display:grid;place-content:center;cursor:pointer;list-style:none;min-width:24px;min-height:24px;padding:0;border:1px solid var(--line);border-radius:4px;background:var(--control);color:var(--muted);font:700 14px/1 Arial,sans-serif}
#kibitzControls .kibitz-table-options>summary::-webkit-details-marker{display:none}
#kibitzControls .kibitz-table-options>div{position:absolute;z-index:60;top:calc(100% + 5px);left:0;display:grid;gap:7px;min-width:160px;max-width:min(240px,calc(100vw - 24px));padding:9px;border:1px solid var(--line);border-radius:7px;background:var(--panel);box-shadow:var(--shadow)}
#kibitzControls .kibitz-table-options select{max-width:100%;min-width:0;font:inherit;background:var(--control);color:var(--ink)}
#kibitzControls .kibitz-table-options button{font-size:12px;min-height:34px;padding:6px 8px;text-align:left}
.lobby-open #kibitzControls.kibitz-compact-controls{display:none}
@media(pointer:coarse){#kibitzControls .kibitz-view-buttons button,#kibitzControls .kibitz-table-options>summary{min-height:32px;min-width:28px}}
#kibitzControls .kibitz-controls-label{color:var(--muted);font:700 11px/1.2 Arial,sans-serif;margin-right:2px}
/* Leave a short row above compact single/no-hand boards, clear of players. */
.online-kibitzing.mobile-landscape:not(.mobile-kibitz) .table:not(:has(.kibitz-hand)){--kibitz-row-space:34px;margin-top:var(--kibitz-row-space);height:calc(100dvh - 43px - var(--kibitz-row-space) - var(--safe-top) - var(--safe-bottom))}
.online-kibitzing.mobile-landscape:not(.mobile-kibitz) .table:not(:has(.kibitz-hand))>.top-left{display:contents}
.online-kibitzing.mobile-landscape:not(.mobile-kibitz) .table:not(:has(.kibitz-hand))>.top-left>:not(#kibitzControls){display:none}
.online-kibitzing.mobile-landscape:not(.mobile-kibitz) .table:not(:has(.kibitz-hand)) #kibitzControls.kibitz-compact-controls{position:absolute;top:calc(6px - var(--kibitz-row-space));left:4px;z-index:5;width:max-content;max-width:calc(100% - 8px);margin:0}
@media(pointer:coarse){.online-kibitzing.mobile-landscape:not(.mobile-kibitz) .table:not(:has(.kibitz-hand)){--kibitz-row-space:42px}}

/* Live phone spectators share one fitted field in All, one-hand and Hide views. */
#kibitzControls .kibitz-mobile-contract{display:none}
.mobile-kibitz.online-kibitzing .table>.top-left #kibitzControls.kibitz-compact-controls{width:100%;max-width:100%;margin:0;flex-basis:auto;gap:3px 5px}
.mobile-kibitz #kibitzControls .kibitz-mobile-contract{display:block;flex:0 0 100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12px/1.25 Arial,sans-serif;color:var(--ink)}
.mobile-kibitz #kibitzControls .kibitz-view-buttons{flex:none;gap:2px}
.mobile-kibitz #kibitzControls .kibitz-view-buttons button{min-width:28px;min-height:32px;padding:3px 4px;font-size:11px}
.mobile-kibitz #kibitzControls .kibitz-view-buttons button[aria-pressed=true]{padding:2px 3px}
.mobile-kibitz #kibitzControls .kibitz-controls-label{font-size:10px;margin:0}
.mobile-kibitz #kibitzControls .kibitz-table-options>summary{min-width:28px;min-height:32px}
.mobile-kibitz #mobileMenu #lastTrickBtn{display:block}
.mobile-kibitz #mobileActionsSlot>#lastTrickDock:not(.hidden){position:relative;inset:auto;display:block;width:100%;height:auto;max-width:none;min-height:0;margin-top:10px;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.mobile-kibitz #mobileActionsSlot>#lastTrickDock.hidden{display:none!important}
.mobile-kibitz #mobileActionsSlot>#lastTrickDock .panel-heading{display:flex;flex-wrap:wrap;gap:5px}
@media(min-width:600px) and (orientation:landscape){.mobile-kibitz #kibitzControls .kibitz-mobile-contract{flex:0 1 auto;max-width:45%;margin-inline-end:8px;font-size:13px}}

/* Substitute actions sit at the affected seat, beside the bot-vote area. */
.seat-substitute{display:inline-flex;align-items:center;min-height:24px;padding:3px 5px;margin-inline-start:4px;border:1px solid var(--gold);border-radius:4px;background:var(--control);color:var(--ink);font:700 11px/1.2 Arial,sans-serif;white-space:nowrap}
@media(pointer:coarse){.seat-substitute{min-height:32px}}
.mobile-kibitz .seat-substitute{font-size:10px;padding:2px 4px;min-height:24px}