/* Independent room and ranking views; dynamic updates retain the container preference. */
.panel-view-toggle{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;min-height:32px;margin-left:auto;padding:0;border:1px solid #ddcde9;border-radius:9px;background:#f5effb;color:#705496;box-shadow:none;font:22px/1 system-ui,sans-serif;cursor:pointer}
.panel-view-toggle:hover:enabled{background:#eae0f5;transform:none}
.panel-view-toggle:focus-visible{outline:2px solid #a487d0;outline-offset:3px}
.panel-view-toggle span{display:block;line-height:1}
.ranking-head-actions{display:flex;align-items:center;gap:4px;flex:none}
.ranking-head-actions .panel-badge{display:none}
.rooms-section>.section-head,.weekly-ranking>.section-head{gap:8px;align-items:center;margin-bottom:8px}
.rooms-section>.section-head h2,.weekly-ranking>.section-head h2{margin-bottom:0;min-width:0;flex-wrap:nowrap}
body:not(.in-game) #roomList[data-view="list"]{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:6px;align-content:start}
body:not(.in-game) #roomList[data-view="list"] .room-card:nth-child(n){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:2px 10px;min-height:56px;padding:7px 10px;border-radius:12px;border-top-width:1px;border-left:3px solid #baa4dd;box-shadow:none}
body:not(.in-game) #roomList[data-view="list"] .room-art,body:not(.in-game) #roomList[data-view="list"] .room-seats{display:none}
body:not(.in-game) #roomList[data-view="list"] .room-card-top{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;font-size:10px}
body:not(.in-game) #roomList[data-view="list"] h3{grid-column:1;grid-row:1;margin:0;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
body:not(.in-game) #roomList[data-view="list"] .room-card>p{display:none}
body:not(.in-game) #roomList[data-view="list"] .room-card-bottom{grid-column:2;grid-row:1/3;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:7px;margin:0;min-width:0}
body:not(.in-game) #roomList[data-view="list"] .room-occupancy{justify-content:center;font-size:10px!important;padding:4px 6px}
body:not(.in-game) #roomList[data-view="list"] .room-card-bottom button{width:auto;min-height:30px;padding:6px 10px;font-size:11px}
body:not(.in-game) #weeklyRankingList[data-view="cards"]{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;gap:9px;align-content:start;padding:2px 3px 6px;overflow:auto}
body:not(.in-game) #weeklyRankingList[data-view="cards"] li.ranking-player{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;justify-items:center;gap:6px;min-height:135px;margin:0;padding:14px 12px;border:1px solid #dfd2ed;border-radius:14px;background-color:#fbf7ff;text-align:center}
body:not(.in-game) #weeklyRankingList[data-view="cards"] .rank-number{position:absolute;top:10px;left:10px;grid-column:auto;grid-row:auto;width:22px;height:22px;font-size:11px}
body:not(.in-game) #weeklyRankingList[data-view="cards"] .ranking-avatar{grid-column:1;grid-row:1;width:48px;height:48px;font-size:26px}
body:not(.in-game) #weeklyRankingList[data-view="cards"] strong{grid-column:1;grid-row:2;align-self:center;max-width:100%;font-size:13px;overflow-wrap:anywhere}
body:not(.in-game) #weeklyRankingList[data-view="cards"] .rank-score{grid-column:1;grid-row:3;text-align:center;align-self:center;font-size:14px}
body:not(.in-game) #weeklyRankingList[data-view="cards"] .ranking-empty{grid-column:1/-1}
@media(max-width:760px){body:not(.in-game) #weeklyRankingList[data-view="cards"]{grid-template-columns:repeat(2,minmax(0,1fr));max-height:390px;overflow:auto}.ranking-head-actions .panel-badge{display:none}}


body:not(.in-game) #weeklyRankingList[data-view="list"]{display:block;margin:6px 0 0;padding:0 2px;overflow:auto}
body:not(.in-game) #weeklyRankingList[data-view="list"] li.ranking-player{display:grid;grid-template-columns:18px 30px minmax(0,1fr);grid-template-rows:auto auto;gap:0 6px;min-height:46px;margin:0 0 5px;padding:5px 7px;border-radius:10px}
body:not(.in-game) #weeklyRankingList[data-view="list"] .rank-number{grid-column:1;grid-row:1/3;position:static;width:18px;height:18px;font-size:10px;align-self:center}
body:not(.in-game) #weeklyRankingList[data-view="list"] .ranking-avatar{grid-column:2;grid-row:1/3;width:30px;height:30px;font-size:18px;align-self:center}
body:not(.in-game) #weeklyRankingList[data-view="list"] strong{grid-column:3;grid-row:1;align-self:end;font-size:12px;line-height:1.35}
body:not(.in-game) #weeklyRankingList[data-view="list"] .rank-score{grid-column:3;grid-row:2;align-self:start;text-align:left;font-size:11px;line-height:1.3}
body:not(.in-game) #weeklyRankingList[data-view="list"] .rank-score small{font-size:9px;margin-left:3px}
@media(max-width:480px){body:not(.in-game) #roomList[data-view="list"] .room-card-bottom{flex-direction:column;gap:3px}body:not(.in-game) #roomList[data-view="list"] .room-occupancy{background:transparent;padding:0}body:not(.in-game) #roomList[data-view="list"] .room-card:nth-child(n){min-height:58px}.rooms-section>.section-head h2,.weekly-ranking>.section-head h2{font-size:16px}}

/* v0.7.31: header controls in normal flow and bounded desktop panels. */
.room-head-actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.room-head-actions .panel-view-toggle{margin-left:0}
.room-head-actions .code-join{position:static;z-index:auto;margin:0}
.room-head-actions .code-join>summary{display:flex;align-items:center;min-height:32px;white-space:nowrap;font-size:11px}
.room-head-actions .code-join[open] .code-form{position:absolute;top:54px;right:14px;z-index:8;display:flex;flex-direction:column;align-items:stretch;width:min(280px,calc(100% - 28px));margin:0;padding:12px;background:#fffdf8;box-shadow:0 8px 24px #45345a26}
.room-head-actions .code-form>div{width:100%;min-width:0}
body:not(.in-game) #roomList[data-view="list"] .room-card:nth-child(n){grid-template-columns:minmax(0,1fr) minmax(0,.9fr) auto;grid-template-rows:auto;min-height:42px;padding:6px 9px;gap:8px;align-items:center}
body:not(.in-game) #roomList[data-view="list"] h3{grid-column:1;grid-row:1;min-width:0;font-size:12px;line-height:1.35}
body:not(.in-game) #roomList[data-view="list"] .room-card-top{grid-column:2;grid-row:1;gap:3px 5px;min-width:0;align-items:center;font-size:9px}
body:not(.in-game) #roomList[data-view="list"] .room-phase{font-size:9px;padding:3px 4px}
body:not(.in-game) #roomList[data-view="list"] .room-card-bottom{grid-column:3;grid-row:1;gap:6px}
body:not(.in-game) #roomList[data-view="list"] .room-occupancy{font-size:9px!important;padding:3px 4px}
body:not(.in-game) #roomList[data-view="list"] .room-card-bottom button{min-height:28px;padding:5px 8px;font-size:10px}
body:not(.in-game) #weeklyRankingList[data-view="list"] li.ranking-player{min-height:32px;padding:3px 5px;margin-bottom:3px;grid-template-columns:16px 24px minmax(0,1fr);gap:0 5px}
body:not(.in-game) #weeklyRankingList[data-view="list"] .ranking-avatar{width:24px;height:24px;font-size:15px}
body:not(.in-game) #weeklyRankingList[data-view="list"] .rank-number{width:16px;height:16px;font-size:9px}
body:not(.in-game) #weeklyRankingList[data-view="list"] strong{font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
body:not(.in-game) #weeklyRankingList[data-view="list"] .rank-score{font-size:10px;line-height:1.2}
@media(min-width:761px){body:not(.in-game) .ranking-footnote{margin:4px 0 0;font-size:10px;line-height:1.2}body:not(.in-game) #weeklyRankingList[data-view="cards"]{gap:3px;margin:6px 0 0}body:not(.in-game) #weeklyRankingList[data-view="cards"] li.ranking-player{grid-template-columns:16px 24px minmax(0,1fr);grid-template-rows:auto auto;justify-items:stretch;align-items:center;gap:0 5px;min-height:32px;padding:3px 5px;text-align:left}body:not(.in-game) #weeklyRankingList[data-view="cards"] .rank-number{position:static;grid-column:1;grid-row:1/3;width:16px;height:16px;font-size:9px}body:not(.in-game) #weeklyRankingList[data-view="cards"] .ranking-avatar{grid-column:2;grid-row:1/3;width:24px;height:24px;font-size:15px}body:not(.in-game) #weeklyRankingList[data-view="cards"] strong{grid-column:3;grid-row:1;font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}body:not(.in-game) #weeklyRankingList[data-view="cards"] .rank-score{grid-column:3;grid-row:2;font-size:10px;line-height:1.2;text-align:left}body:not(.in-game) #weeklyRankingList[data-view="cards"] .rank-score small{font-size:9px;margin-left:3px}}
@media(min-width:1200px){body:not(.in-game) main{height:min(850px,calc(100dvh - 120px));min-height:0;grid-template-rows:256px minmax(0,1fr)}.promotion-column{height:100%;min-height:0;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}.promotion-column .promo-card,.promotion-column .promotion-information{flex:none}}
@media(max-width:480px){.room-head-actions{gap:7px}.room-head-actions .code-join>summary{font-size:10px}body:not(.in-game) #roomList[data-view="list"] .room-card:nth-child(n){min-height:44px;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) auto;gap:6px}body:not(.in-game) #roomList[data-view="list"] .room-card-bottom{gap:2px}}

/* Room colors and separators aligned to equal column boundaries. */
body:not(.in-game) #roomList .room-card[data-availability="open"]{background:#effaf1;border-color:#9bd5ac;border-left-color:#54aa70}
body:not(.in-game) #roomList .room-card[data-availability="full"]{background:#fff0f0;border-color:#e7a2a2;border-left-color:#d65d5d}
body:not(.in-game) #roomList .room-card[data-availability="full"] .room-occupancy{background:#fbdada;color:#a63232}
body:not(.in-game) #roomList[data-view="list"] .room-card:nth-child(n){grid-template-columns:repeat(3,minmax(0,1fr))}
body:not(.in-game) #roomList[data-view="list"] h3,body:not(.in-game) #roomList[data-view="list"] .room-card-top{position:relative;padding-right:12px}
body:not(.in-game) #roomList[data-view="list"] h3::after,body:not(.in-game) #roomList[data-view="list"] .room-card-top::after{content:"";position:absolute;right:0;top:50%;height:14px;border-right:1px solid #9daaa0;transform:translateY(-50%)}
body:not(.in-game) #roomList[data-view="list"] .room-card-bottom{justify-content:flex-end;min-width:0}