/* Ranked party layout: complete desktop grid, mobile rail, rank below, larger crew. */
#room-screen .crew-bottom>span,#room-screen #room-hint{display:none}
#room-screen .crew-bottom{justify-content:flex-end}
#room-screen.ranked-party #room-character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;overflow:visible;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#5898c2 #cfe8fc;scroll-padding-inline:8px;padding:8px;min-width:0}
#room-screen.ranked-party #room-character-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:0 0 48px;min-width:48px;min-height:70px;padding:4px 2px}
#room-screen.ranked-party #room-character-grid button img{width:42px;height:43px;object-fit:contain}
#room-screen.ranked-party #room-character-grid button .creature-name{font-size:11px;line-height:14px}
#room-screen.ranked-party #room-character-grid button:focus-visible{outline:3px solid #147487;outline-offset:-3px}
#room-screen.ranked-party .character-panel>.room-current-rank{display:flex;align-items:center;gap:0;margin:0;border-width:1px 0;border-color:#a3cce7;border-radius:0;box-shadow:none;min-width:0;background:linear-gradient(110deg,#f5fbff,#d4ebf9)}
#room-screen.ranked-party .character-panel>.room-current-rank>.panel-heading{display:none}
#room-screen.ranked-party .character-panel>.room-current-rank .room-map-copy{display:flex;align-items:center;flex:1;gap:10px;min-height:70px;padding:5px 12px;min-width:0}
#room-screen.ranked-party .character-panel>.room-current-rank .room-map-copy>span{padding:0}
#room-screen.ranked-party .character-panel>.room-current-rank #room-map-name{font-size:17px;line-height:21px;white-space:nowrap}
#room-screen.ranked-party .character-panel>.room-current-rank #room-map-terrain{display:block;font-size:11px;line-height:15px;margin-top:3px}
#room-screen.ranked-party .room-reveal-rule{display:none!important}
#room-screen.ranked-party .crew-panel{display:flex;flex-direction:column;min-height:460px}
#room-screen.ranked-party .room-left{grid-template-rows:minmax(460px,auto) minmax(170px,1fr)}
#room-screen.ranked-party #room-roster{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}
.arcade-room #room-screen.ranked-party #room-roster .room-slot{height:100%;min-height:0}
#room-screen.ranked-party .chat-panel{min-height:170px}
#room-screen.ranked-party .room-chat-log{min-height:75px;height:100px}

@media(max-height:520px) and (min-width:650px){
 .arcade-room #room-screen.ranked-party .room-body{grid-template-columns:minmax(0,1.35fr) minmax(244px,1fr);grid-template-rows:minmax(0,1fr) minmax(70px,auto);gap:6px 8px}
 #room-screen.ranked-party .room-left{display:contents;overflow:visible}
 #room-screen.ranked-party .crew-panel{grid-column:1;grid-row:1;min-height:0}
 #room-screen.ranked-party .crew-panel>.panel-heading{min-height:26px}
 #room-screen.ranked-party .crew-panel>.panel-heading h2{font-size:17px;line-height:20px}
 #room-screen.ranked-party .character-panel{grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:36px 60px minmax(52px,1fr) 20px;column-gap:10px}
 #room-screen.ranked-party .selected-character{height:36px;min-width:0;padding:1px 6px}
 #room-screen.ranked-party .selected-character>span{min-width:0}
 #room-screen.ranked-party .selected-character>img{flex:0 0 28px;width:28px;height:30px;transform:none}
 #room-screen.ranked-party .room-kit-disclosure{padding:0 6px 0 0}
 #room-screen.ranked-party #room-kit-toggle{width:100%;height:32px;margin:0;padding:3px 6px;gap:3px}
 #room-screen.ranked-party #room-kit-detail:not(.hidden){top:36px}
 #room-screen.ranked-party #room-character-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;grid-column:1/-1;grid-row:2;gap:4px;padding:4px 5px;min-height:0}
 #room-screen.ranked-party #room-character-grid button{flex-basis:46px;min-width:46px;min-height:48px;height:48px;padding:1px 2px;gap:0;border-radius:7px}
 #room-screen.ranked-party #room-character-grid button img{width:31px;height:32px}
 #room-screen.ranked-party #room-character-grid button .creature-name{font-size:10px;line-height:12px}
 #room-screen.ranked-party .character-panel>.room-current-rank{grid-column:1/-1;grid-row:3;min-height:52px;align-self:stretch}
 #room-screen.ranked-party .character-panel>.room-current-rank .room-map-copy{min-height:50px;padding:2px 8px;gap:8px}
 #room-screen.ranked-party .character-panel>.room-current-rank #room-map-name{font-size:15px;line-height:18px}
 #room-screen.ranked-party .character-panel>.room-current-rank #room-map-terrain{font-size:10px;line-height:13px;margin-top:1px}
 #room-screen.ranked-party .room-team-status{grid-row:4}
 .arcade-room #room-screen.ranked-party #room-roster .slot-character{height:70px;min-height:32px}
 .arcade-room #room-screen.ranked-party #room-roster .room-slot.empty>strong{white-space:normal;font-size:10px;line-height:11px;min-height:22px;flex-basis:22px}
 #room-screen.ranked-party .chat-panel{grid-column:1;grid-row:2;display:grid;grid-template-rows:minmax(22px,1fr) 36px auto;min-height:70px;margin:0;border-radius:10px}
 #room-screen.ranked-party .chat-panel>.panel-heading{display:none}
 #room-screen.ranked-party .room-chat-log{min-height:0;height:auto;padding:2px 7px;overflow-y:auto;scrollbar-width:none}
 #room-screen.ranked-party .room-chat-log::-webkit-scrollbar{display:none}
 #room-screen.ranked-party .chat-welcome{font-size:11px;line-height:18px;padding:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #room-screen.ranked-party .chat-message{font-size:11px;line-height:16px;padding:1px 0;gap:5px}
 #room-screen.ranked-party .chat-message time{font-size:9px}
 #room-screen.ranked-party #room-chat-form{height:36px;padding:3px 6px;gap:5px}
 #room-screen.ranked-party #room-chat-input{height:28px;min-height:28px;padding:4px 7px;font-size:12px}
 #room-screen.ranked-party #room-chat-form button{width:32px;min-height:28px;padding:3px}
 #room-screen.ranked-party #room-chat-status:not(:empty){padding:2px 6px;font-size:10px;line-height:12px}
 .arcade-room #room-screen.ranked-party .room-start{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:2px;padding:3px 7px;min-height:70px}
 .arcade-room #room-screen.ranked-party .room-start #room-hint{font-size:10px;line-height:12px;text-align:center}
 .arcade-room #room-screen.ranked-party .room-start .start-battle{grid-column:1;grid-row:1;align-self:center;width:100%;height:40px;min-height:40px}
 .arcade-room #room-screen.ranked-party .room-start #room-status{grid-column:1;grid-row:2}
}