/* MFM shared desktop layout foundation.
   4:3 remains a maximum content ratio. Page-specific layouts consume these
   continuous sizing tokens instead of targeting individual monitor resolutions. */

html[data-display-profile="desktop"]{
  --mfm-frame-width:var(--layout-viewport-width,100vw);
  --mfm-frame-height:var(--layout-viewport-height,100dvh);
  --mfm-frame-pad:clamp(8px,calc(var(--mfm-frame-width) * .0095),14px);
  --mfm-frame-gap:clamp(8px,calc(var(--mfm-frame-width) * .0095),14px);
  --mfm-header-height:clamp(54px,calc(var(--mfm-frame-height) * .0625),72px);
  --mfm-side-width:clamp(220px,calc(var(--mfm-frame-width) * .225),320px);
  --mfm-dock-height:clamp(96px,calc(var(--mfm-frame-height) * .132),132px);
  --mfm-panel-pad:clamp(12px,calc(var(--mfm-frame-width) * .0125),20px);
  --mfm-control-height:clamp(38px,calc(var(--mfm-frame-height) * .05),48px);
  --mfm-content-font:clamp(12px,calc(var(--mfm-frame-width) * .0125),16px);
}

/* Lobby-family pages and the game use their actual post-ratio content
   frame as the shared responsive container for the desktop-only interface. */
html[data-display-profile="desktop"] .shell,
html[data-display-profile="desktop"] .app{
  box-sizing:border-box;
  width:var(--mfm-frame-width);
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}

html[data-display-profile="desktop"] .shell{
  container-type:inline-size;
  container-name:mfm-desktop-frame;
  padding:var(--mfm-frame-pad);
  gap:var(--mfm-frame-gap);
}

html[data-display-profile="desktop"] .app{
  padding:var(--mfm-frame-pad);
  gap:var(--mfm-frame-gap);
}

/* Shared desktop masthead geometry. Lobby / Room are the visual reference;
   Game and Color Lab consume the same height, padding, logo scale, and 1:1
   compression instead of owning page-specific header variants. */
html[data-display-profile="desktop"] .topbar,
html[data-display-profile="desktop"] .app>header{
  height:var(--mfm-header-height);
  min-height:var(--mfm-header-height);
  padding:7px 7px 7px 14px;
  align-items:center;
}

html[data-display-profile="desktop"] .hex-logo,
html[data-display-profile="desktop"] .logo-mark{
  height:40px;
  zoom:1;
  transform:none;
  transform-origin:left center;
  margin-right:0;
}

html[data-display-profile="desktop"][data-screen-ratio="1:1"] .hex-logo,
html[data-display-profile="desktop"][data-screen-ratio="1:1"] .logo-mark{
  transform:scale(.91);
  margin-right:-73.35px;
}

html[data-display-profile="desktop"][data-screen-ratio="1:1"] .online-link-label,
html[data-display-profile="desktop"][data-screen-ratio="1:1"] .online-link-subtitle{
  height:36.4px;
}

/* Shared minimum interaction target. Individual components may be taller,
   but desktop compression should not shrink primary controls below this. */
html[data-display-profile="desktop"] .pix-btn,
html[data-display-profile="desktop"] button.pixel-select-trigger{
  min-height:var(--mfm-control-height);
}

/* -------------------------------------------------------------------------
   ACCOUNT / LOGIN
   Keep one stable two-column composition across normal desktop sizes. The
   information column yields space continuously, while the terminal remains
   readable and does not jump between monitor-specific layouts.
   ------------------------------------------------------------------------- */
html[data-display-profile="desktop"] body:has(#identityScreen:not([hidden])) .shell{
  height:var(--mfm-frame-height);
  min-height:0;
  overflow:hidden;
}

html[data-display-profile="desktop"] #identityScreen{
  height:100%;
  min-height:0;
  grid-template-columns:minmax(0,1fr) minmax(330px,44%);
  align-items:center;
  gap:clamp(24px,4cqw,58px);
  padding-block:clamp(22px,5.2cqw,70px);
  padding-inline:clamp(24px,6cqw,82px);
  overflow:auto;
  scrollbar-gutter:stable;
}

html[data-display-profile="desktop"] #identityScreen .auth-copy{
  min-width:0;
  align-self:center;
}

html[data-display-profile="desktop"] #identityScreen .auth-copy p{
  max-width:42ch;
  margin-bottom:0;
  line-height:1.6;
}

html[data-display-profile="desktop"] #identityScreen .auth-terminal{
  width:100%;
  min-width:0;
  max-width:500px;
  justify-self:end;
  align-self:center;
}

html[data-display-profile="desktop"] #identityScreen .terminal-form{
  padding:clamp(15px,1.7cqw,22px);
  gap:clamp(10px,1.1cqw,14px);
}

@container mfm-desktop-frame (max-width:1100px){
  #identityScreen{
    grid-template-columns:minmax(250px,.9fr) minmax(330px,1.1fr)!important;
    gap:clamp(20px,3cqw,34px)!important;
    padding-inline:clamp(22px,4cqw,44px)!important;
    padding-block:clamp(18px,3cqw,34px)!important;
  }
  #identityScreen .screen-copy p{font-size:11pt;line-height:1.55}
}

@container mfm-desktop-frame (max-width:940px){
  #identityScreen{
    grid-template-columns:minmax(220px,.78fr) minmax(320px,1.22fr)!important;
    gap:18px!important;
    padding-inline:20px!important;
  }
  #identityScreen .auth-copy h2{font-size:20px}
  #identityScreen .screen-copy p{font-size:10.5pt;line-height:1.45}
}

/* -------------------------------------------------------------------------
   LOBBY
   One desktop composition from 960-wide 4:3 content through large screens:
   PLAYER / SEASON rail on the left, room creation and room browser on the
   right. Only dimensions compress; the information architecture stays put.
   ------------------------------------------------------------------------- */
html[data-display-profile="desktop"] body:has(#lobbyScreen:not([hidden])) .shell{
  height:var(--mfm-frame-height);
  min-height:0;
  overflow:hidden;
}

html[data-display-profile="desktop"] #lobbyScreen{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:var(--mfm-side-width) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:var(--mfm-frame-gap);
  align-content:stretch;
  overflow:hidden;
}

html[data-display-profile="desktop"] #lobbyScreen>.player-rail{
  grid-column:1;
  grid-row:1 / span 2;
  height:100%;
  min-height:0;
  gap:var(--mfm-frame-gap);
  overflow:hidden;
}

html[data-display-profile="desktop"] #lobbyScreen>.room-actions{
  grid-column:2;
  grid-row:1;
  min-height:0;
  gap:var(--mfm-frame-gap);
  align-items:stretch;
}

html[data-display-profile="desktop"] #lobbyScreen>.room-browser{
  grid-column:2;
  grid-row:2;
  min-height:0;
  padding:var(--mfm-panel-pad);
  overflow:hidden;
}

html[data-display-profile="desktop"] #lobbyScreen>.lobby-error{
  grid-column:2;
  grid-row:3;
}

html[data-display-profile="desktop"] #lobbyScreen .identity-card,
html[data-display-profile="desktop"] #lobbyScreen .matchmaking-card,
html[data-display-profile="desktop"] #lobbyScreen .leaderboard-card,
html[data-display-profile="desktop"] #lobbyScreen .support-desktop{
  padding:clamp(10px,1.35cqw,18px);
}

html[data-display-profile="desktop"] #lobbyScreen .room-card{
  padding:clamp(14px,1.65cqw,22px);
  gap:clamp(9px,1cqw,13px);
}

html[data-display-profile="desktop"] #lobbyScreen .room-browser-head{
  gap:clamp(8px,1cqw,14px);
}

html[data-display-profile="desktop"] #lobbyScreen .room-entry{
  gap:clamp(8px,1cqw,12px);
}

@container mfm-desktop-frame (max-width:1100px){
  #lobbyScreen{--mfm-side-width:220px}
  #lobbyScreen .lobby-screen{font-size:12pt}
  #lobbyScreen .room-card{padding:14px}
  #lobbyScreen .room-browser{padding:14px}
  #lobbyScreen .identity-card strong{font-size:26px}
  #lobbyScreen .matchmaking-card{padding:18px 12px 16px}
  #lobbyScreen .matchmaking-card h2{font-size:23px}
  #lobbyScreen .leaderboard-card li{font-size:10pt}
  #lobbyScreen .room-entry-code strong{font-size:20px}
  #lobbyScreen .room-entry-meta span{padding:4px 6px;font-size:10pt}
}

@container mfm-desktop-frame (max-width:980px){
  #lobbyScreen{--mfm-side-width:210px}
  #lobbyScreen .room-actions{gap:8px}
  #lobbyScreen .room-card{padding:12px;gap:8px}
  #lobbyScreen .room-card label,
  #lobbyScreen .room-card input,
  #lobbyScreen .room-card .pixel-select-trigger,
  #lobbyScreen .room-card .pix-btn{font-size:11pt}
  #lobbyScreen .room-browser{padding:12px}
  #lobbyScreen .room-browser-head h2{font-size:22px}
  #lobbyScreen .room-entry{grid-template-columns:minmax(90px,.65fr) minmax(0,1.35fr) auto;min-height:68px}
  #lobbyScreen .room-entry-actions .pix-btn{min-width:72px;padding-inline:7px;font-size:10pt}
}

/* -------------------------------------------------------------------------
   ROOM
   Keep the same left-main / right-information / bottom-control grammar that
   the game page will use. The right column is permanent on desktop.
   ------------------------------------------------------------------------- */
html[data-display-profile="desktop"] body:has(#roomScreen:not([hidden])) .shell{
  height:var(--mfm-frame-height);
  min-height:0;
  overflow:hidden;
}

html[data-display-profile="desktop"] #roomScreen{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--mfm-side-width);
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:var(--mfm-frame-gap);
  overflow:hidden;
}

html[data-display-profile="desktop"] #roomScreen>.room-roster-snap{display:contents}

html[data-display-profile="desktop"] #roomScreen .room-head{
  grid-column:1 / -1;
  grid-row:1;
  min-height:0;
  padding:clamp(10px,1.25cqw,16px);
}

html[data-display-profile="desktop"] #roomScreen .members-panel{
  grid-column:1;
  grid-row:2;
  min-height:0;
  padding:var(--mfm-panel-pad);
  overflow:hidden;
}

html[data-display-profile="desktop"] #roomScreen .invite-panel{
  grid-column:2;
  grid-row:2;
  min-height:0;
  padding:var(--mfm-panel-pad);
  overflow:hidden;
}

html[data-display-profile="desktop"] #roomScreen .room-footer{
  grid-column:1 / -1;
  grid-row:3;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(270px,32%);
  gap:var(--mfm-frame-gap);
}

html[data-display-profile="desktop"] #roomScreen .room-config,
html[data-display-profile="desktop"] #roomScreen .room-controls{
  min-height:0;
  padding:clamp(8px,1cqw,12px);
}

html[data-display-profile="desktop"] #roomScreen .room-controls{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

html[data-display-profile="desktop"] #roomScreen .member-list{
  min-height:0;
  padding-right:10px;
  overflow-y:auto;
  scrollbar-gutter:stable;
}

html[data-display-profile="desktop"] #roomScreen .qr-shell canvas{
  width:min(224px,calc(var(--mfm-side-width) - 52px));
  height:min(224px,calc(var(--mfm-side-width) - 52px));
}

@container mfm-desktop-frame (max-width:1100px){
  #roomScreen{--mfm-side-width:220px}
  #roomScreen .room-head h2{font-size:26px}
  #roomScreen .room-badges{gap:5px}
  #roomScreen .room-badges span{padding:5px 7px;font-size:10pt}
  #roomScreen .members-panel{padding:13px}
  #roomScreen .member{min-height:46px;padding:7px 8px}
  #roomScreen .invite-panel{padding:12px}
  #roomScreen .invite-panel p{font-size:9pt}
  #roomScreen .room-footer{grid-template-columns:minmax(0,1fr) minmax(250px,31%)}
  #roomScreen .room-config{grid-template-columns:minmax(88px,.38fr) minmax(220px,1fr) minmax(150px,175px)}
}

@container mfm-desktop-frame (max-width:980px){
  #roomScreen{--mfm-side-width:210px}
  #roomScreen .room-head{padding:9px 11px}
  #roomScreen .room-head h2{font-size:23px}
  #roomScreen .room-code-line{font-size:9pt}
  #roomScreen .members-panel{padding:11px}
  #roomScreen .member-list{gap:5px}
  #roomScreen .member{min-height:43px;padding:6px 7px;font-size:11pt}
  #roomScreen .invite-panel{padding:10px}
  #roomScreen .qr-shell{margin:7px 0 6px;padding:6px}
  #roomScreen .room-footer{grid-template-columns:minmax(0,1fr) minmax(235px,30%)}
  #roomScreen .room-config{grid-template-columns:minmax(82px,.34fr) minmax(205px,1fr) minmax(138px,160px);gap:6px}
  #roomScreen .room-controls{gap:6px}
  #roomScreen .room-controls>.pix-btn{font-size:10.5pt}
}

/* The animation-sync hold uses a DOM clone with IDs stripped so it cannot
   interfere with the live game. Recreate the ID-scoped GAME LOG styling on
   that temporary clone so the held frame is visually identical instead of
   briefly falling back to a browser-numbered OL. */
html[data-display-profile="desktop"] body[data-online="true"] .mfm-sequence-freeze-overlay.log-card>ol{
  flex:1;
  min-height:0;
  margin:0;
  padding:0 8px 0 0;
  list-style:none;
  overflow:hidden;
  scrollbar-gutter:stable;
  font-size:var(--game-type-hud);
  line-height:1.45;
  color:#c5c2ae;
}
html[data-display-profile="desktop"] body[data-online="true"] .mfm-sequence-freeze-overlay.log-card>ol>li{
  position:relative;
  padding:6px 0 7px;
  border-bottom:1px dashed #343a47;
}
html[data-display-profile="desktop"] body[data-online="true"] .mfm-sequence-freeze-overlay.log-card>ol>li::marker{content:""}
html[data-display-profile="desktop"] body[data-online="true"] .mfm-sequence-freeze-overlay.log-card>ol>li.inspectable{
  padding-left:12px;
}
html[data-display-profile="desktop"] body[data-online="true"] .mfm-sequence-freeze-overlay.log-card>ol>li.inspectable::before{
  content:">";
  position:absolute;
  left:1px;
  color:#777b6d;
}
html[data-display-profile="desktop"] body[data-online="true"] .mfm-sequence-freeze-overlay.log-card>ol>li.turn-break{
  margin-bottom:10px;
  border-bottom:2px solid #686858;
}
html[data-display-profile="desktop"] body[data-online="true"] .mfm-sequence-freeze-overlay.log-card>ol>li.turn-break::after{
  content:attr(data-turn-label);
  position:absolute;
  right:0;
  bottom:-9px;
  padding-left:7px;
  background:#000;
  color:var(--gold);
  font-size:var(--game-type-meta);
  line-height:1;
}
html[data-display-profile="desktop"] body[data-online="true"] .mfm-sequence-freeze-overlay.log-card>ol>li.round-break{
  margin-bottom:13px;
  border-bottom:3px solid var(--gold);
}
html[data-display-profile="desktop"] body[data-online="true"] .mfm-sequence-freeze-overlay.log-card>ol>li.round-break::after{
  content:attr(data-round-label);
  position:absolute;
  right:0;
  bottom:-10px;
  padding-left:8px;
  background:#000;
  color:var(--gold);
  font-size:var(--game-type-meta);
  line-height:1;
  letter-spacing:.08em;
}
html[data-display-profile="desktop"] body[data-online="true"] .mfm-sequence-freeze-overlay.log-card>ol b{color:#fff}
html[data-display-profile="desktop"] body[data-online="true"] .mfm-sequence-freeze-overlay.log-card>ol .log-player{
  color:var(--log-color);
  text-shadow:0 0 2px color-mix(in srgb,var(--log-color) 45%,transparent);
}

/* Shared masthead actions align glyphs consistently, including tournament leave. */
html[data-display-profile="desktop"] :is(.lobby-header-actions,.header-actions)>.pix-btn{display:inline-flex;align-items:center;justify-content:center;line-height:1}