/* MFM canonical Lobby / Room desktop layout -------------------------------

   Phase 6B owns the final desktop cascade directly. Historical intermediate

   selectors and declarations that were dead or fully overridden are removed;

   accepted computed layout remains unchanged. */



/* === FOUNDATION ============================================================ */
/* ACCOUNT: lock the account composition to the actual display frame instead of
   leaving a floating padded card inside it. */
html[data-display-profile="desktop"] body:has(#identityScreen:not([hidden])) .shell{
  width:var(--mfm-frame-width)!important;
  max-width:100%;
  height:auto!important;
  padding:0!important;
  gap:0!important;
}
html[data-display-profile="desktop"] body:has(#identityScreen:not([hidden])) .topbar{
  width:100%!important;
  margin:0!important;
  border-left:0!important;
  border-right:0!important;
  border-top:0!important;
}
html[data-display-profile="desktop"] #identityScreen{
  box-sizing:border-box!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
}

/* LOBBY --------------------------------------------------------------------- */
html[data-display-profile="desktop"] #lobbyScreen{
  --mfm-side-width:clamp(284px,23.5cqw,300px)!important;
  --mfm-online-width:clamp(280px,24cqw,320px)!important;
  grid-template-columns:var(--mfm-side-width) minmax(0,1fr) var(--mfm-online-width)!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  align-content:stretch!important;
}
html[data-display-profile="desktop"] #lobbyScreen>.player-rail{
  grid-column:1!important;
  grid-row:1 / 3!important;
  grid-template-rows:auto auto minmax(0,1fr);
  height:100%!important;
}
/* SUPPORT now lives in the right rail, so the left rail's freed height belongs
   to SEASON TOP. PLAYER ID and RANKED keep their intrinsic panel heights. */
html[data-display-profile="desktop"] #lobbyScreen>.room-browser{
  grid-column:2!important;
  grid-row:1 / 3!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
}
html[data-display-profile="desktop"] #lobbyScreen>.online-player-panel{
  grid-column:3!important;
  grid-row:1!important;
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
}
html[data-display-profile="desktop"] #lobbyScreen>.support-desktop{
  grid-column:3!important;
  grid-row:2!important;
  min-width:0!important;
  width:100%!important;
  align-self:end!important;
}

.room-launch-buttons{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:8px 0 10px;
}
.room-launch-buttons .pix-btn{width:100%;min-width:0}
.room-browser .room-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  scrollbar-gutter:stable;
}

/* Right-side online player window. Narrow on purpose; status wraps instead of
   stealing width from ROOM LIST. The list and its empty state share the same
   final grid track so status text stays centered in the actual list viewport. */
.online-player-panel{
  box-sizing:border-box;
  container:online-player-panel / inline-size;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto minmax(0,1fr);
  gap:8px;
  padding:clamp(11px,1.1cqw,15px)!important;
  overflow:hidden;
}
.online-player-head{
  display:flex;
  align-items:center;
  justify-content:flex-start!important;
  gap:8px;
  padding-bottom:7px;
}
.online-player-count{
  display:none!important;
  min-width:26px;
  text-align:right;
  color:#c8a951;
  font-weight:700;
}
.online-player-search-label{
  color:#777d75;
  font-size:9pt!important;
  letter-spacing:.08em;
}
.online-player-search{
  box-sizing:border-box;
  width:calc(100% - var(--mfm-scroll-content-gutter-wide));
  min-width:0;
  height:40px!important;
  padding:8px 9px!important;
  border:var(--mfm-pixel-border-2,2px) solid #55584f;
  border-radius:0;
  outline:0;
  background:#000;
  color:#e9e6d6;
  font:inherit;
  font-size:10pt!important;
  text-transform:uppercase;
}
.online-player-search:focus{border-color:#6cbebc}
.online-player-search-shell{position:relative;width:100%;min-width:0;padding-bottom:9px}
.online-player-search-shell .online-player-search{display:block}
.online-player-search-shell::after{
  content:"";
  position:absolute;
  left:0;
  right:var(--mfm-scroll-content-gutter-wide);
  bottom:0;
  border-bottom:var(--mfm-pixel-border-1,1px) solid var(--gold);
  pointer-events:none;
}
.online-player-list{
  grid-column:1;
  grid-row:4;
  width:100%!important;
  min-width:0!important;
  min-height:0;
  margin:0;
  padding-block:0;
  padding-left:0!important;
  list-style:none;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable!important;
}
.lobby-online-player-row{
  min-height:43px!important;
  display:grid!important;
  grid-template-columns:minmax(12ch,1fr) max-content!important;
  grid-template-areas:"id status"!important;
  align-items:center!important;
  column-gap:6px!important;
  row-gap:0!important;
  padding:9px 11px!important;
  border-bottom:1px solid #272a27;
  cursor:pointer;
}
.lobby-online-player-row.online-player-selected,
.lobby-online-player-row:focus-visible{
  outline:1px solid #676b5f;
  outline-offset:-1px;
  background:#171a18;
}
.lobby-online-player-row strong{
  grid-area:id!important;
  min-width:0;
  overflow:hidden;
  color:#e8e5d5;
  font-size:10pt!important;
  letter-spacing:normal!important;
  line-height:1.15!important;
  align-self:center!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lobby-online-player-row span{
  grid-area:status!important;
  min-width:0;
  overflow:visible;
  max-width:8ch!important;
  color:#6cbebc!important;
  font-size:9pt!important;
  line-height:1.15!important;
  text-align:right!important;
  text-overflow:clip;
  white-space:nowrap!important;
  align-self:center!important;
}
.lobby-online-player-row small{display:none!important}
.online-player-empty{
  grid-column:1;
  grid-row:4;
  align-self:center;
  box-sizing:border-box;
  width:100%;
  padding-right:var(--mfm-scroll-content-gutter-wide);
  margin:0;
  color:#676b65;
  pointer-events:none;
}

/* Room list state stays on the CODE line; access remains a separate badge. */
.room-entry-code .room-entry-state{white-space:nowrap}

/* CREATE / JOIN modal shells. Background deliberately uses the same large dark
   result-screen grammar: central luminous field, hard vignette and CRT bands,
   without adding any bitmap asset. */
.mfm-room-action-dialog{
  box-sizing:border-box;
  width:min(520px,calc(100vw - 28px));
  max-width:520px;
  max-height:min(760px,calc(100dvh - 28px));
  padding:0!important;
  border-color:#777b72!important;
  border-radius:0!important;
  overflow:auto;
  background:
    radial-gradient(ellipse 80% 54% at 50% 26%,rgba(108,190,188,.13),transparent 68%),
    radial-gradient(ellipse 100% 90% at 50% 50%,transparent 54%,rgba(0,0,0,.74) 100%),
    repeating-linear-gradient(180deg,rgba(255,255,255,.015) 0 1px,transparent 1px 4px),
    #050605!important;
  color:#e9e6d6;
  box-shadow:var(--mfm-frame-shadow),inset 0 0 42px rgba(108,190,188,.035)!important;
}
.mfm-room-action-dialog::backdrop{
  background:
    radial-gradient(ellipse at 50% 42%,rgba(108,190,188,.08),transparent 48%),
    rgba(0,0,0,.82);
}
.mfm-room-action-form{
  box-sizing:border-box;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.mfm-room-dialog-close{margin-top:2px}

/* CREATE / JOIN use the same focus language for mouse and keyboard. */
.mfm-room-action-dialog .pix-btn:focus-visible{
  outline:0!important;
  border-color:#e2e5d9!important;
  filter:brightness(1.5)!important;
  box-shadow:3px 3px #303228,0 0 9px rgba(235,238,226,.42)!important;
}
.mfm-room-action-dialog input:focus-visible,
.mfm-room-action-dialog .pixel-select-trigger:focus-visible{
  outline:0!important;
  border-color:#fff!important;
  box-shadow:0 0 0 1px #000,0 0 9px rgba(255,255,255,.45)!important;
}
.mfm-room-action-dialog .role-switch input:focus-visible+span{
  border-color:#e2e5d9!important;
  color:#fff!important;
  filter:brightness(1.4)!important;
  box-shadow:0 0 8px rgba(235,238,226,.34)!important;
}

/* ROOM ---------------------------------------------------------------------- */
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned{
  grid-template-columns:minmax(0,1fr) clamp(230px,26cqw,300px)!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden!important;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned>.room-roster-snap{display:contents!important}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .room-head{
  grid-column:1 / -1!important;
  grid-row:1!important;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .members-panel{
  grid-column:1!important;
  grid-row:2 / 4!important;
  /* Pack the shared PLAYERS / COLOR track in whole swatch pitches. The
     existing half-width budget prevents COLOR from consuming WATCH; rounding
     down gives all unused space to WATCH without a second JS layout owner. */
  --mfm-room-panel-pad:14px;
  --mfm-room-column-gap:12px;
  --mfm-color-size:72px;
  --mfm-color-gap:8px;
  --mfm-color-pitch:calc(var(--mfm-color-size) + var(--mfm-color-gap));
  /* Pixel borders become fractional at scaled desktop sizes. Round their
     combined panel chrome up before packing complete swatch pitches; otherwise
     the nested auto-fill grid can lose a full track to subpixel rounding. */
  --mfm-color-chrome:round(up,calc(2 * var(--mfm-room-panel-pad) + 2 * var(--mfm-pixel-border-3,3px) + var(--mfm-scroll-content-gutter)),1px);
  --mfm-watch-min:calc(12ch + 2 * var(--mfm-room-panel-pad) + 2 * var(--mfm-pixel-border-3,3px) + var(--mfm-scroll-content-gutter));
  --mfm-color-budget:min((100% - var(--mfm-room-column-gap)) / 2,100% - var(--mfm-room-column-gap) - var(--mfm-watch-min));
  --mfm-color-column:calc(round(down,var(--mfm-color-budget) - var(--mfm-color-chrome) + var(--mfm-color-gap),var(--mfm-color-pitch)) + var(--mfm-color-chrome) - var(--mfm-color-gap));
  display:grid!important;
  grid-template-columns:max(calc(var(--mfm-color-size) + var(--mfm-color-chrome)),var(--mfm-color-column)) minmax(0,1fr)!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  gap:var(--mfm-room-column-gap)!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  min-width:0!important;
  min-height:0!important;
  overflow:visible!important;
  align-content:start!important;
  align-items:stretch!important;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .member-list:not(.compact){
  flex:1 1 auto;
  min-height:120px;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .member-list.compact{
  flex:0 1 auto;
  max-height:27%;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .invite-panel{
  grid-column:2!important;
  grid-row:2!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned>.mfm-side-room-controls{
  grid-column:2!important;
  grid-row:3!important;
  min-width:0!important;
}

html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .qr-shell{
  flex:0 0 auto;
  align-self:center;
}
@container mfm-desktop-frame (max-width:1040px){
  #lobbyScreen{--mfm-online-width:250px!important;--mfm-side-width:208px}
  #lobbyScreen .lobby-online-player-row strong{font-size:10pt!important}
  #lobbyScreen .lobby-online-player-row span{font-size:9pt!important;max-width:78px!important}
  #roomScreen.mfm-room-replanned{grid-template-columns:minmax(0,1fr) 225px!important}
}
@container online-player-panel (max-width:220px){
  #lobbyScreen .online-player-panel .lobby-online-player-row{
    grid-template-columns:minmax(12ch,1fr)!important;
    grid-template-areas:"id" "status"!important;
    row-gap:3px!important;
    padding-right:7px!important;
  }
  #lobbyScreen .online-player-panel .lobby-online-player-row strong{font-size:9pt!important}
  #lobbyScreen .online-player-panel .lobby-online-player-row span{font-size:9pt!important;max-width:100%!important}
}
@container online-player-panel (max-width:155px){
  #lobbyScreen .online-player-panel .lobby-online-player-row{padding-left:9px!important}
  #lobbyScreen .online-player-panel .lobby-online-player-row strong{font-size:9pt!important}
}


/* Guest desktop rail: keep SEASON TOP and SUPPORT visible while hiding account/ranked controls. */
html[data-display-profile="desktop"] #lobbyScreen.guest-mode{
  grid-template-columns:var(--mfm-side-width) minmax(0,1fr) var(--mfm-online-width)!important;
}
html[data-display-profile="desktop"] #lobbyScreen.guest-mode>.player-rail{
  display:grid!important;grid-column:1!important;grid-row:1 / 3!important;height:100%!important;
  grid-template-rows:minmax(0,1fr) auto!important;overflow:hidden!important;
}
html[data-display-profile="desktop"] #lobbyScreen.guest-mode .player-overview-page{display:contents!important}
html[data-display-profile="desktop"] #lobbyScreen.guest-mode .identity-card,
html[data-display-profile="desktop"] #lobbyScreen.guest-mode .matchmaking-card{display:none!important}
html[data-display-profile="desktop"] #lobbyScreen.guest-mode .leaderboard-card{grid-row:1!important;min-height:0!important}
html[data-display-profile="desktop"] #lobbyScreen.guest-mode>.room-browser{grid-column:2!important;grid-row:1 / 3!important}
html[data-display-profile="desktop"] #lobbyScreen.guest-mode>.online-player-panel{grid-column:3!important;grid-row:1!important}
html[data-display-profile="desktop"] #lobbyScreen.guest-mode>.support-desktop{grid-column:3!important;grid-row:2!important}

/* === LOBBY REFINEMENTS ============================================================ */
/* -------------------------------------------------------------------------
   ROOM — player roster does not stretch with the panel. Keep the four-player
   area at the familiar fixed visual height and let that area scroll if needed.
   ------------------------------------------------------------------------- */
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned #playerList{
  flex:0 0 232px!important;
  width:100%!important;
  height:232px!important;
  min-height:232px!important;
  max-height:232px!important;
  align-content:start!important;
  overflow-y:hidden!important;
  overflow-x:hidden!important;
  scrollbar-gutter:auto!important;
  scrollbar-width:none!important;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned #playerList::-webkit-scrollbar{display:none!important}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned #watchList{
  flex:0 1 auto!important;
  align-content:start!important;
  overflow-y:auto!important;
  scrollbar-gutter:stable!important;
}

/* -------------------------------------------------------------------------
   Right room rail — QR remains above. The four interactive rows are anchored
   to the bottom in the requested order: TIMER, WATCH, LEAVE, READY/START.
   Every interactive row is 48px high. The timer label sits above its row and
   is not allowed to change the control height/alignment.
   ------------------------------------------------------------------------- */
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .invite-panel{
  padding:10px!important;
  overflow:hidden!important;
  align-items:stretch!important;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .invite-panel>.step{align-self:flex-start!important}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .invite-panel>.qr-shell{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:8px 0 9px!important;
  align-self:stretch!important;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .invite-panel>.qr-shell canvas{
  width:100%!important;
  height:auto!important;
  aspect-ratio:1!important;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .invite-panel>#copyInvite{width:100%!important}
.mfm-side-room-controls{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:14px 10px 10px!important;
  gap:8px!important;
  align-content:start!important;
  align-items:stretch!important;
  justify-items:stretch!important;
}

.mfm-side-room-controls>#moveSelf{order:1!important}
.mfm-side-room-controls>#readyBtn,
.mfm-side-room-controls>#startBtn{order:3!important}
.mfm-side-room-controls>#moveSelf,
.mfm-side-room-controls>#readyBtn,
.mfm-side-room-controls>#startBtn{
  grid-column:1!important;
  grid-row:auto!important;
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  align-self:end!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.mfm-side-room-controls>#readyBtn[hidden],
.mfm-side-room-controls>#startBtn[hidden]{display:none!important}

@container mfm-desktop-frame (max-width:1040px){
  #lobbyScreen{--mfm-online-width:250px!important}
  #roomScreen.mfm-room-replanned #playerList{
    flex-basis:220px!important;
    height:220px!important;
    min-height:220px!important;
    max-height:220px!important;
  }
}

/* Match the same hover/selected distinction in the enlarged room picker. */
.mfm-player-color-panel .color-choice:hover:not(:disabled):not(.selected){
  border-color:#fff;
  box-shadow:2px 2px #000;
  transform:none;
  filter:none;
}
.mfm-player-color-panel .color-choice.selected{
  border-color:#fff;
  outline:0;
  outline-offset:0;
  box-shadow:0 0 8px var(--choice);
}

/* -------------------------------------------------------------------------
   ROOM LIST action divider: the separator belongs below CREATE / JOIN, not
   between ROOM LIST heading and the two action buttons. */
#lobbyScreen .room-browser-head{
  border-bottom:0!important;
  padding-bottom:7px!important;
}
#lobbyScreen .room-launch-buttons{
  margin-top:4px!important;
  margin-bottom:10px!important;
  padding-bottom:10px!important;
  border-top:0!important;
  border-bottom:var(--mfm-pixel-border-2,2px) solid #3d3d36!important;
}

/* Narrow desktop ROOM LIST rows always begin directly under CREATE / JOIN. */
html[data-display-profile="desktop"] #lobbyScreen .room-browser .room-list{
  align-content:start!important;
  grid-auto-rows:max-content!important;
}
html[data-display-profile="desktop"] #lobbyScreen .room-browser .room-entry{
  align-self:start!important;
}

/* Empty SEASON TOP is a status message, not a ranking row. */
#lobbyScreen .leaderboard-card .leaderboard-empty{
  border-bottom:0!important;
}

/* SEASON TOP is the compact Ranked summary: rank + ID + RTG.
   Rating is server-owned and determines the order; the Lobby does not keep
   separate WINS or WIN RATE ranking columns. */
#lobbyScreen .leaderboard-card li:not(.leaderboard-empty){
  grid-template-columns:26px minmax(12ch,1fr) minmax(5ch,max-content)!important;
  align-items:center!important;
  column-gap:7px!important;
  font-size:10pt!important;
}
#lobbyScreen .leaderboard-card .leaderboard-self li,
#lobbyScreen .leaderboard-card #leaderboardList li:not(.leaderboard-empty){
  margin-right:11px!important;
}
#lobbyScreen .leaderboard-card li:not(.leaderboard-empty)>i{
  white-space:nowrap;
  text-align:left;
}
#lobbyScreen .leaderboard-card li:not(.leaderboard-empty)>b{
  min-width:12ch;
  overflow:visible;
  font-size:10pt;
  text-overflow:clip;
  white-space:nowrap;
  text-align:left;
}
#lobbyScreen .leaderboard-card .leaderboard-rating{
  min-width:0;
  justify-self:end;
  color:var(--gold);
  font-size:9.5pt;
  line-height:1;
  text-align:right;
  white-space:nowrap;
}

/* ROOM identity is one bottom-aligned banner: ROOM · name · CODE · code.
   ROOM and the room name share one title size; compact CODE metadata sits on
   their bottom edge instead of floating on the text baseline. */
#roomScreen .room-head{align-items:center!important}
#roomScreen .room-title-line{
  min-width:0;
  display:flex;
  align-items:flex-end;
  gap:9px;
  padding:0;
  border:0;
  white-space:nowrap;
}
#roomScreen .room-title-line .room-title-label{
  flex:0 0 auto;
  color:var(--accent);
  font-size:16pt;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-decoration:none!important;
  border-bottom:0!important;
}
#roomScreen .room-title-line #roomName{
  min-width:0;
  margin:0;
  overflow:hidden;
  color:#f1eedc;
  font-size:16pt;
  line-height:1;
  text-overflow:ellipsis;
}
#roomScreen .room-title-line .room-code-label{
  flex:0 0 auto;
  color:var(--muted);
  font-size:9pt;
  line-height:1;
  letter-spacing:.08em;
}
#roomScreen .room-title-line #roomCode{
  flex:0 0 auto;
  color:#c8a951;
  font-size:10pt;
  line-height:1;
  letter-spacing:normal;
}

/* === ROOM COLUMNS ============================================================ */
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .mfm-room-column{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  padding:var(--mfm-room-panel-pad)!important;
  display:flex!important;
  flex-direction:column!important;
  border:var(--mfm-pixel-border-3,3px) solid var(--line)!important;
  background:#000!important;
  box-shadow:var(--mfm-frame-shadow)!important;
  overflow:hidden!important;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .mfm-player-column{
  grid-column:1!important;
  grid-row:1!important;
  height:auto!important;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .mfm-watch-column{
  grid-column:2!important;
  grid-row:1 / 3!important;
  height:100%!important;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .mfm-room-column>.section-head{
  flex:0 0 auto!important;
  width:100%!important;
  margin:0!important;
  padding:0 0 9px!important;
  border-left:0!important;
  border-bottom:var(--mfm-pixel-border-2,2px) solid #3d3d36!important;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .mfm-player-column #playerList{
  flex:0 0 232px!important;
  width:100%!important;
  height:232px!important;
  min-height:232px!important;
  max-height:232px!important;
  margin:10px 0 0!important;
  padding:0!important;
  align-content:start!important;
  overflow:hidden!important;
  scrollbar-gutter:auto!important;
  scrollbar-width:none!important;
}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .mfm-player-column #playerList::-webkit-scrollbar{display:none!important}
#roomScreen.mfm-room-replanned .watch-head #watchCount{flex:0 0 auto!important}
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .mfm-watch-column #watchList{
  flex:1 1 auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:10px 0 0!important;
  padding:0 12px 0 0!important;
  border-left:0!important;
  align-content:start!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable!important;
}

/* PLAYER COLOR is a separate Room panel. It no longer
   inherits the legacy .room-config/.color-picker typography or layout. */
html[data-display-profile="desktop"] #roomScreen.mfm-room-replanned .mfm-player-color-panel{
  box-sizing:border-box!important;
  grid-column:1!important;
  grid-row:2!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  padding:var(--mfm-room-panel-pad)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:10px!important;
  overflow:hidden!important;
}
.mfm-player-color-panel>.step{
  flex:0 0 auto!important;
  align-self:flex-start!important;
  white-space:nowrap!important;
}
.mfm-player-color-picker{
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  flex:1 1 auto!important;
  display:block!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable!important;
}
.mfm-player-color-panel #colorChoices{
  position:relative;
  width:100%!important;
  margin:0!important;
  padding:10px 0 4px!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fill,var(--mfm-color-size))!important;
  grid-auto-rows:var(--mfm-color-size)!important;
  justify-content:start!important;
  justify-items:start!important;
  align-content:start!important;
  align-items:start!important;
  column-gap:var(--mfm-color-gap)!important;
  row-gap:10px!important;
}
.mfm-player-color-panel .color-choice,
.mfm-player-color-panel .color-add-placeholder{
  box-sizing:border-box!important;
  width:var(--mfm-color-size)!important;
  height:var(--mfm-color-size)!important;
  min-width:var(--mfm-color-size)!important;
  min-height:var(--mfm-color-size)!important;
  aspect-ratio:1!important;
}
.mfm-player-color-panel .color-choice.custom-style{position:relative;overflow:hidden}
.mfm-player-color-panel .color-choice.custom-style>.custom-style-preview{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.mfm-player-color-panel .color-choice.custom-style::after{content:"";position:absolute;z-index:2;top:0;right:0;width:18px;height:18px;background:var(--custom-marker,#fff);clip-path:polygon(100% 0,100% 100%,0 0);pointer-events:none}
.mfm-player-color-panel .color-choice.custom-style-dragging{z-index:4;translate:var(--custom-style-drag-x,0px) var(--custom-style-drag-y,0px);pointer-events:none}
.custom-style-menu{position:fixed;z-index:90;min-width:174px;padding:6px;display:grid;gap:4px;background:#000}
.custom-style-menu[hidden]{display:none}
.custom-style-menu button{display:flex;align-items:center;min-height:34px;padding:6px 9px;border:1px solid #555;background:#080808;color:var(--context-menu-ink,var(--ink));line-height:1;text-align:left;cursor:pointer}
.custom-style-menu button:hover,.custom-style-menu button:focus-visible{border-color:var(--gold);color:var(--gold);outline:none}
.custom-style-menu #customStyleDelete{--context-menu-ink:#e07770}
.mfm-player-color-panel .color-add-placeholder{
  order:initial!important;
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  font-size:0!important;
  line-height:0!important;
}
.mfm-player-color-panel .color-add-placeholder::before,
.mfm-player-color-panel .color-add-placeholder::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  background:currentColor;
  transform:translate(-50%,-50%);
}
.mfm-player-color-panel .color-add-placeholder::before{width:4px;height:32px}
.mfm-player-color-panel .color-add-placeholder::after{width:32px;height:4px}

/* TURN TIMER is source-owned and deliberately detached from the legacy
   .room-timer-edit grid. Its title uses the same 14px top inset as PLAYER COLOR and the V + START
   glyph share one explicit right-side tail. */
.mfm-side-timer-control{
  order:0!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto 48px auto auto!important;
  grid-template-areas:"title" "select" "custom" "hint"!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  gap:5px!important;
  align-content:start!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  overflow:visible!important;
}
.mfm-side-timer-control>.room-timer-title{
  grid-area:title!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 0 8px!important;
  line-height:1!important;
  display:flex!important;
  align-items:center!important;
  white-space:nowrap!important;
}
.mfm-side-timer-control.is-disabled>.room-timer-title{opacity:.28!important}
.mfm-side-timer-control>.room-timer-select{
  grid-area:select!important;
  width:100%!important;
  min-width:0!important;
  height:48px!important;
}
.mfm-side-timer-control>#roomTimerButton{
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  padding:8px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
.mfm-side-timer-control>#roomTimerButton>#roomTimerLabel{
  min-width:0!important;
  flex:0 1 auto!important;
}
.mfm-side-timer-control .room-timer-tail{
  margin-left:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
}
.mfm-side-timer-control .room-timer-tail>i{
  margin:0!important;
  flex:0 0 auto!important;
  font-style:normal!important;
}
.mfm-side-timer-control>#roomTimerButton:disabled{opacity:.28!important;cursor:not-allowed!important}
.mfm-side-timer-control>.room-timer-custom{
  grid-area:custom!important;
  width:100%!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
}
.mfm-side-timer-control>.room-custom-timer-hint{
  grid-area:hint!important;
  margin:0!important;
  color:var(--muted)!important;
  font-size:9pt!important;
}

/* ADD CPU is now a room action directly above MOVE TO WATCH. */
.mfm-side-room-controls>#addCpuBtn.mfm-side-add-cpu{
  order:1!important;
  grid-column:1!important;
  grid-row:auto!important;
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:9px 13px!important;
  align-self:end!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:inherit!important;
}
.mfm-side-room-controls>#moveSelf{order:2!important}
.mfm-side-room-controls>#readyBtn,
.mfm-side-room-controls>#startBtn{order:3!important}

@container mfm-desktop-frame (max-width:1040px){
  #roomScreen.mfm-room-replanned .members-panel{--mfm-room-column-gap:10px;--mfm-room-panel-pad:12px}
  #roomScreen.mfm-room-replanned .mfm-player-column #playerList{
    flex-basis:220px!important;
    height:220px!important;
    min-height:220px!important;
    max-height:220px!important;
  }
}

#lobbyScreen .room-browser-title{
  display:grid;
  gap:10px;
}
#lobbyScreen .room-browser-title h2{
  margin:0;
}