/* Stable seat numbers, grouped visually by the two team colors. */
.seat-move-button{border:1px solid #98b5ca;border-radius:7px;background:#f5fcff;color:#245e89;padding:5px 8px;font:900 10px/1.2 system-ui;cursor:pointer;white-space:nowrap}
.seat-move-button:hover{background:#d1f0ff;border-color:#3789bb}.seat-move-button:focus-visible{outline:3px solid #25679b;outline-offset:2px}.seat-move-button:disabled{opacity:.55;cursor:default}
.seat-request-status{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:0 0 12px;padding:9px 12px;border-radius:10px;background:#d5efff;color:#245e89;font-size:12px;font-weight:800}
.seat-request-status button{padding:7px 12px;border:1px solid #7da9c6;border-radius:7px;background:white;color:#245e89;font:800 11px system-ui;cursor:pointer}
.seat-change-notice{margin:0 0 10px;color:#226b59;background:#d6f7e5;padding:9px 12px;border-radius:8px;font-size:12px;font-weight:800}
.seat-swap-dialog{width:min(470px,calc(100vw - 40px));padding:30px;border:2px solid #9ad7ef;border-radius:24px;background:linear-gradient(145deg,#f9fdff,#e2f2ff);color:#255277;box-shadow:0 20px 80px #071c4870}
.seat-swap-dialog::backdrop{background:#071f47b8;backdrop-filter:blur(4px)}
.seat-swap-dialog h2{margin:8px 0 12px;font-size:28px;color:#235783}.seat-swap-dialog p{font-size:14px;line-height:1.5;margin:10px 0}
.seat-swap-destination{padding:16px;border-radius:12px;margin:18px 0 12px;font-weight:900;font-size:17px;background:#d4efff;color:#236d98;border:1px solid #90ccea}
.seat-swap-destination[data-team=red]{background:#ffe5e3;color:#8f3941;border-color:#eaa1a6}
.seat-swap-dialog .seat-swap-hint{font-size:12px;color:#42698a}.seat-swap-expiry{display:block;color:#5d7896;font-size:11px;margin-top:10px}
.seat-swap-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.seat-swap-actions button{min-height:44px;cursor:pointer}
@media(max-height:520px){.seat-swap-dialog{padding:20px 26px;max-height:calc(100dvh - 24px)}.seat-swap-dialog h2{font-size:24px;margin:4px 0}.seat-swap-dialog p{margin:7px 0}.seat-swap-destination{padding:12px;margin:12px 0 8px}.seat-swap-actions{margin-top:14px}.seat-move-button{padding:4px 6px;font-size:9px}.seat-request-status{font-size:11px;margin-bottom:8px;padding:7px 10px}}
.room-roster[data-capacity="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.room-roster[data-capacity="6"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.room-roster[data-capacity="6"] .room-slot{height:206px}
.room-roster[data-capacity="6"] .slot-character{height:123px;max-width:88%}
.room-roster[data-capacity="6"] .empty-seat{height:118px}
.room-slot.team-red{border-color:#ed969d;background:linear-gradient(155deg,#fffafa,#ffe7e8 72%,#f7c8cd);box-shadow:0 3px 0 #ce7882}.room-slot.team-blue{border-color:#7fbae6;background:linear-gradient(155deg,#f8fdff,#ddecff 72%,#badbf5);box-shadow:0 3px 0 #5e97c5}
.room-slot.is-ready{border-color:#41af95;background:linear-gradient(155deg,#f7fff7,#d8f8ef 70%,#acdedd)}
.room-slot .ready-badge{font-size:9px;letter-spacing:.35px}.room-slot.is-ready .ready-badge{color:#217764}
.room-slot .slot-team{font-weight:900}.team-red .slot-team{color:#953c48}.team-blue .slot-team{color:#216397}
.kick-player{position:absolute;top:35px;right:7px;width:25px;height:25px;border-radius:50%;border:1px solid #d99e98;background:#fff5f0ed;color:#a64d44;font:bold 19px/1 sans-serif;cursor:pointer;z-index:1}
.kick-player:hover{background:#ffe1d7}.kick-player:focus-visible{outline:3px solid #fff;box-shadow:0 0 0 5px #2863a3}
.room-team-status .team-seat.red{background:#ffc0c5;color:#872f3b}.room-team-status .team-seat.blue{background:#9fd0fa;color:#205a8c}
.start-battle.guest-ready-action{background:linear-gradient(#91f2d2,#55cbae);border-color:#b8fff0;color:#155e55;box-shadow:0 5px 0 #218b85}
.start-battle.guest-ready-action.consent-given{background:linear-gradient(#e5f3fa,#b8dae9);border-color:#f4fcff;color:#386a85;box-shadow:0 5px 0 #719db7}
.arcade-room #room-screen[data-host=false] .room-start{grid-template-columns:minmax(0,1fr) 180px}
.arcade-room #room-screen[data-host=false] .room-start .guest-ready-action{display:flex}
.browser-settings .mode-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.browser-settings .mode-picker legend{grid-column:1/-1}
.browser-settings .mode-picker span{white-space:nowrap}
.is-playing #player-strip[data-count="6"]{grid-template-columns:repeat(6,minmax(0,1fr))}
.is-playing #player-strip[data-count="6"] .player-card{padding:10px;gap:7px}
.is-playing #player-strip[data-count="6"] .player-number{width:30px;height:36px;flex:0 0 30px;font-size:18px}
.is-playing #player-strip[data-count="6"] .player-name{font-size:10px}
.is-playing #player-strip[data-count="6"] .player-stats{font-size:10px;gap:4px}
.arcade-room #room-roster .room-slot{justify-content:flex-start;padding-bottom:8px}
.arcade-room #room-roster .slot-header{flex:0 0 31px}
.arcade-room #room-roster .slot-character{flex:1 1 auto;min-height:0;margin:0;object-fit:contain}
.arcade-room #room-roster .room-slot>strong{flex:0 0 19px;line-height:19px;min-height:19px;margin:0;max-width:94%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arcade-room #room-roster .room-slot>small{flex:0 0 17px;min-height:17px;line-height:17px;margin:0}
.arcade-room #room-roster .empty-seat{flex:0 0 52px;min-height:52px;height:52px;width:52px;margin:auto 0;border-radius:50%;line-height:52px}
.arcade-room #room-roster .kick-player{top:37px;right:8px;width:auto;height:25px;padding:0 9px;border-radius:7px;font:800 10px/1 system-ui}
.arcade-room .room-start{position:sticky;bottom:12px;margin-top:0;z-index:5;border-radius:14px;background:#16517af5;padding:9px;box-shadow:0 3px 12px #113a6b44}
.arcade-room .room-start #room-hint{margin:0 0 7px;min-height:0;color:#e3f5ff}
@media(max-height:520px) and (min-width:650px){
 .arcade-room #room-screen{padding-bottom:92px}
 .arcade-room .room-start{position:fixed;bottom:8px;left:16px;right:16px;padding:7px 11px}
 .arcade-room .room-start #room-hint{margin:0}
 .arcade-room #room-roster .room-slot>strong{font-size:11px}
 .arcade-room #room-roster .room-slot>small{font-size:9px}
}
@media(max-height:520px) and (min-width:650px){
 .room-roster[data-capacity="6"]{gap:7px}.room-roster[data-capacity="6"] .room-slot{height:187px}.room-roster[data-capacity="6"] .slot-character{height:104px}.room-slot .ready-badge{font-size:8px}
 .arcade-room #room-screen .room-body{height:calc(100dvh - 208px);min-height:160px;overflow-y:auto;align-items:start;scroll-padding:10px;overscroll-behavior:contain;padding-bottom:16px}
 .arcade-room #room-roster .room-slot{height:143px}
 .arcade-room #room-roster .slot-character{height:54px}
 .arcade-room #room-roster .empty-seat{flex-basis:38px;min-height:38px;height:38px;width:38px;line-height:38px;font-size:28px}
 .arcade-room #room-roster .slot-header{flex-basis:25px}
 .arcade-room #room-roster .kick-player{top:28px}
}

/* Team membership stays tied to its original seat, including empty seats and swaps. */
.room-roster[data-team-rows="true"]{grid-template-columns:repeat(var(--team-columns),minmax(0,1fr))}
.room-roster[data-team-rows="true"] .room-slot{height:206px}
.room-slot.team-red.is-ready{border-color:#ed969d;background:linear-gradient(155deg,#fffafa,#ffe7e8 72%,#f7c8cd)}
.room-slot.team-blue.is-ready{border-color:#7fbae6;background:linear-gradient(155deg,#f8fdff,#ddecff 72%,#badbf5)}
.room-slot.team-red.you,.room-slot.team-blue.you{outline:2px solid white;outline-offset:-5px;box-shadow:0 3px 0 var(--seat-color)}
.team-red .slot-header>b,.team-red .seat-move-button{background:#ffdadd;color:#8c3340;border-color:#dc8d97}
.team-blue .slot-header>b,.team-blue .seat-move-button{background:#c8e5ff;color:#205e90;border-color:#87b6da}
.room-team-status .team-seat.red+.team-seat.blue{margin-left:5px}
@media(max-height:520px) and (min-width:650px){.arcade-room .room-roster[data-team-rows="true"] .room-slot{height:143px}}

/* Room controls share their own header, leaving faces clear at narrow widths. */
.arcade-room #room-roster .slot-header{gap:4px}
.arcade-room #room-roster .slot-header .kick-player{position:static;flex:0 0 auto;max-width:100%;height:22px;width:auto;padding:0 6px;font:800 9px/1 system-ui;border-radius:6px}
.arcade-room #room-roster .slot-header .ready-badge{margin-left:auto;font-size:8px;letter-spacing:0}
@media(max-width:760px){.arcade-room #room-roster .slot-header{gap:2px}.arcade-room #room-roster .slot-header .kick-player{padding:0 4px;font-size:8px}.arcade-room #room-roster .slot-header .ready-badge{font-size:7px}.arcade-room #room-roster .slot-header .seat-move-button{padding:4px;font-size:8px}}

/* V30: Casual 4 vs 4 (eight seats, eight HUD cards). Ranked keeps 1, 2 and 3 vs. */
#entry-dialog[data-queue=ranked] .mode-picker{grid-template-columns:repeat(3,1fr)}
#entry-dialog[data-queue=ranked] .mode-picker label:has(input[value="4v4"]){display:none}
@media(max-width:600px){.browser-settings .mode-picker{grid-template-columns:repeat(2,1fr)}}
.room-roster[data-capacity="8"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.room-roster[data-capacity="8"] .room-slot{height:187px}
.room-roster[data-capacity="8"] .slot-character{height:104px;max-width:88%}
.room-roster[data-capacity="8"] .empty-seat{height:100px}
.room-roster[data-capacity="8"] .slot-name{font-size:12px}
@media(max-width:760px){.room-roster[data-capacity="8"]{gap:5px}.room-roster[data-capacity="8"] .room-slot{height:160px}.room-roster[data-capacity="8"] .slot-character{height:80px}.room-roster[data-capacity="8"] .empty-seat{height:76px}}
.is-playing #player-strip[data-count="8"]{grid-template-columns:repeat(8,minmax(0,1fr))}
.is-playing #player-strip[data-count="8"] .player-card{padding:7px;gap:5px}
.is-playing #player-strip[data-count="8"] .player-number{width:24px;height:30px;flex:0 0 24px;font-size:15px}
.is-playing #player-strip[data-count="8"] .player-name{font-size:9px}
.is-playing #player-strip[data-count="8"] .player-stats{font-size:9px;gap:3px}