/* Geometry of the selectable overlay layouts.
   The design canvas is a fixed 1920x1080 surface, so every cell is an absolute
   rectangle in design pixels — exact, and free of the constraint that CSS grid
   rows must share their column tracks (the mirrored layouts do not).
   Outer margin 20px, gaps 16px. Column layouts are NOT described here; they
   keep the grid in overlay.css. */

#stage[data-layout-mode="flat"] #canvas {
  display: block;
  padding: 0;
  gap: 0;
}

#stage[data-layout-mode="flat"] #canvas > [data-cell] {
  position: absolute;
}

/* one wide bar carrying the global widgets, side by side */
.header-bar {
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.header-bar .header-box { flex: 1 1 0; min-width: 0; }
.header-bar .header-box:empty { display: none; }

/* ===== team forms (used by several layouts) ===== */

/* 1x6 vertical column */
#stage[data-layout-mode="flat"] .team-bar[data-form="column"] {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, 1fr);
  grid-auto-flow: row;
  gap: 6px;
}
/* 2x3 block */
#stage[data-layout-mode="flat"] .team-bar[data-form="grid"] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;
}
/* 1x6 horizontal bar */
#stage[data-layout-mode="flat"] .team-bar[data-form="row"] {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
/* 2x3 block, upright — for narrow, tall team cells (the Switch layouts) */
#stage[data-layout-mode="flat"] .team-bar[data-form="grid-tall"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
}

/* ===== solo: 1 player =====
   header 1880x160 | game 1152x864 | team column 130x864 | cam + DS 566x424

   The 160px banner is a consequence, not a choice: cam and DS stacked fill
   exactly the game's height, which fixes the right column's width and with it
   the 130px left for the team. A lower banner would need cam and DS to stop
   being equally tall — tried in the Switch branch, reverted on 2026-08-06
   because the resulting portrait camera does not suit a 16:9 webcam. Do not
   lower it again without solving the camera side first. */

#stage[data-layout="solo"] [data-cell="header"] { left: 20px;   top: 20px;  width: 1880px; height: 160px; }
#stage[data-layout="solo"] [data-cell="game"]   { left: 20px;   top: 196px; width: 1152px; height: 864px; }
#stage[data-layout="solo"] [data-cell="team"]   { left: 1188px; top: 196px; width: 130px;  height: 864px; }
#stage[data-layout="solo"] [data-cell="cam"]    { left: 1334px; top: 196px; width: 566px;  height: 424px; }
#stage[data-layout="solo"] [data-cell="ds"]     { left: 1334px; top: 636px; width: 566px;  height: 424px; }

/* a single player needs no name plate */
#stage[data-layout-mode="flat"][data-layout="solo"] .player-name,
#stage[data-layout-mode="flat"][data-layout="switch-solo"] .player-name { display: none; }

/* ===== switch-solo: 1 player, 16:9, no DS screen =====
   The banner runs over the GAME only, not the full width — that is what lets
   the right column reach all the way to the top and carry cam + team.
   The game is 16:9, so its width fixes its height: 1456x819 is exactly 16:9
   (16*91 / 9*91), and 408x544 is exactly 3:4 (both integer multiples), so
   neither window needs letterboxing inside its cell.
   That leaves 897px of the left column for a 819px game. The banner does NOT
   take all of it — at 205px it dwarfed the widgets. It takes 143px (70%), and
   the freed 78px sit as equal breathing room above and below the game
   (39 each). Change the banner height and you must re-split that remainder,
   or the column stops adding up to 1060. */

#stage[data-layout="switch-solo"] [data-cell="header"] { left: 20px;   top: 20px;  width: 1456px; height: 143px; }
#stage[data-layout="switch-solo"] [data-cell="game"]   { left: 20px;   top: 202px; width: 1456px; height: 819px; }
#stage[data-layout="switch-solo"] [data-cell="cam"]    { left: 1492px; top: 20px;  width: 408px;  height: 544px; }
#stage[data-layout="switch-solo"] [data-cell="team"]   { left: 1492px; top: 580px; width: 408px;  height: 480px; }

/* ===== switch-duo: 2 players, 16:9, no DS screen =====
   Nothing here is freely chosen: splitting the width in half fixes the game
   cells at 932x524 (rounded — exactly 16:9 would be 932x524.25), and the
   384px left below them are the bottom row.
   Mirrored around x = 968 like the duo-mirror-* layouts — cams outside,
   teams in the middle. Cams are 683x384, nearly 16:9 (exactly would be
   683x384.19). Both roundings stay under a pixel, which fitOne() absorbs
   without skewing the alpha hole. */

#stage[data-layout="switch-duo"] [data-cell="header"] { left: 20px; top: 20px; width: 1880px; height: 100px; }

#stage[data-layout="switch-duo"] [data-cell="game"][data-player="0"] { left: 20px;  top: 136px; width: 932px; height: 524px; }
#stage[data-layout="switch-duo"] [data-cell="game"][data-player="1"] { left: 968px; top: 136px; width: 932px; height: 524px; }

#stage[data-layout="switch-duo"] [data-cell="cam"][data-player="0"]  { left: 20px;   top: 676px; width: 683px; height: 384px; }
#stage[data-layout="switch-duo"] [data-cell="team"][data-player="0"] { left: 719px;  top: 676px; width: 233px; height: 384px; }
#stage[data-layout="switch-duo"] [data-cell="team"][data-player="1"] { left: 968px;  top: 676px; width: 233px; height: 384px; }
#stage[data-layout="switch-duo"] [data-cell="cam"][data-player="1"]  { left: 1217px; top: 676px; width: 683px; height: 384px; }

/* ===== duo-mirror-43: 2 players, cams 4:3 =====
   header 1880x100
   top row  (y 136, h 564): game 752 | team 164 | team 164 | game 752
   bottom   (y 716, h 344): cam 458 | ds 458 | ds 458 | cam 458 */

#stage[data-layout="duo-mirror-43"] [data-cell="header"] { left: 20px; top: 20px; width: 1880px; height: 100px; }

#stage[data-layout="duo-mirror-43"] [data-cell="game"][data-player="0"] { left: 20px;   top: 136px; width: 752px; height: 564px; }
#stage[data-layout="duo-mirror-43"] [data-cell="team"][data-player="0"] { left: 788px;  top: 136px; width: 164px; height: 564px; }
#stage[data-layout="duo-mirror-43"] [data-cell="team"][data-player="1"] { left: 968px;  top: 136px; width: 164px; height: 564px; }
#stage[data-layout="duo-mirror-43"] [data-cell="game"][data-player="1"] { left: 1148px; top: 136px; width: 752px; height: 564px; }

#stage[data-layout="duo-mirror-43"] [data-cell="cam"][data-player="0"] { left: 20px;   top: 716px; width: 458px; height: 344px; }
#stage[data-layout="duo-mirror-43"] [data-cell="ds"][data-player="0"]  { left: 494px;  top: 716px; width: 458px; height: 344px; }
#stage[data-layout="duo-mirror-43"] [data-cell="ds"][data-player="1"]  { left: 968px;  top: 716px; width: 458px; height: 344px; }
#stage[data-layout="duo-mirror-43"] [data-cell="cam"][data-player="1"] { left: 1442px; top: 716px; width: 458px; height: 344px; }

/* ===== duo-mirror-169: 2 players, cams 16:9 =====
   top row  (y 136, h 614): game 819 | team 97 | team 97 | game 819
   bottom   (y 766, h 294): cam 523 | ds 392 | ds 392 | cam 523 */

#stage[data-layout="duo-mirror-169"] [data-cell="header"] { left: 20px; top: 20px; width: 1880px; height: 100px; }

#stage[data-layout="duo-mirror-169"] [data-cell="game"][data-player="0"] { left: 20px;   top: 136px; width: 819px; height: 614px; }
#stage[data-layout="duo-mirror-169"] [data-cell="team"][data-player="0"] { left: 855px;  top: 136px; width: 97px;  height: 614px; }
#stage[data-layout="duo-mirror-169"] [data-cell="team"][data-player="1"] { left: 968px;  top: 136px; width: 97px;  height: 614px; }
#stage[data-layout="duo-mirror-169"] [data-cell="game"][data-player="1"] { left: 1081px; top: 136px; width: 819px; height: 614px; }

#stage[data-layout="duo-mirror-169"] [data-cell="cam"][data-player="0"] { left: 20px;   top: 766px; width: 523px; height: 294px; }
#stage[data-layout="duo-mirror-169"] [data-cell="ds"][data-player="0"]  { left: 560px;  top: 766px; width: 392px; height: 294px; }
#stage[data-layout="duo-mirror-169"] [data-cell="ds"][data-player="1"]  { left: 968px;  top: 766px; width: 392px; height: 294px; }
#stage[data-layout="duo-mirror-169"] [data-cell="cam"][data-player="1"] { left: 1377px; top: 766px; width: 523px; height: 294px; }

/* ===== quad-balanced: 4 players, DS stays inside the camera =====
   header 1880x100; quadrant origins (20|136) (968|136) (20|606) (968|606)
   per quadrant: game 477x358 | cam 439x329 right of it | team bar 932x80 below */

#stage[data-layout="quad-balanced"] [data-cell="header"] { left: 20px; top: 20px; width: 1880px; height: 100px; }

#stage[data-layout="quad-balanced"] [data-cell="game"][data-player="0"] { left: 20px;   top: 136px; width: 477px; height: 358px; }
#stage[data-layout="quad-balanced"] [data-cell="cam"][data-player="0"]  { left: 513px;  top: 136px; width: 439px; height: 329px; }
#stage[data-layout="quad-balanced"] [data-cell="team"][data-player="0"] { left: 20px;   top: 510px; width: 932px; height: 80px;  }

#stage[data-layout="quad-balanced"] [data-cell="game"][data-player="1"] { left: 968px;  top: 136px; width: 477px; height: 358px; }
#stage[data-layout="quad-balanced"] [data-cell="cam"][data-player="1"]  { left: 1461px; top: 136px; width: 439px; height: 329px; }
#stage[data-layout="quad-balanced"] [data-cell="team"][data-player="1"] { left: 968px;  top: 510px; width: 932px; height: 80px;  }

#stage[data-layout="quad-balanced"] [data-cell="game"][data-player="2"] { left: 20px;   top: 606px;  width: 477px; height: 358px; }
#stage[data-layout="quad-balanced"] [data-cell="cam"][data-player="2"]  { left: 513px;  top: 606px;  width: 439px; height: 329px; }
#stage[data-layout="quad-balanced"] [data-cell="team"][data-player="2"] { left: 20px;   top: 980px;  width: 932px; height: 80px;  }

#stage[data-layout="quad-balanced"] [data-cell="game"][data-player="3"] { left: 968px;  top: 606px;  width: 477px; height: 358px; }
#stage[data-layout="quad-balanced"] [data-cell="cam"][data-player="3"]  { left: 1461px; top: 606px;  width: 439px; height: 329px; }
#stage[data-layout="quad-balanced"] [data-cell="team"][data-player="3"] { left: 968px;  top: 980px;  width: 932px; height: 80px;  }

/* ===== quad-gamefocus: 4 players, large game windows =====
   per quadrant: game 605x454 | cam 311x233 right of it | team 2x3 311x205 below */

#stage[data-layout="quad-gamefocus"] [data-cell="header"] { left: 20px; top: 20px; width: 1880px; height: 100px; }

#stage[data-layout="quad-gamefocus"] [data-cell="game"][data-player="0"] { left: 20px;   top: 136px; width: 605px; height: 454px; }
#stage[data-layout="quad-gamefocus"] [data-cell="cam"][data-player="0"]  { left: 641px;  top: 136px; width: 311px; height: 233px; }
#stage[data-layout="quad-gamefocus"] [data-cell="team"][data-player="0"] { left: 641px;  top: 385px; width: 311px; height: 205px; }

#stage[data-layout="quad-gamefocus"] [data-cell="game"][data-player="1"] { left: 968px;  top: 136px; width: 605px; height: 454px; }
#stage[data-layout="quad-gamefocus"] [data-cell="cam"][data-player="1"]  { left: 1589px; top: 136px; width: 311px; height: 233px; }
#stage[data-layout="quad-gamefocus"] [data-cell="team"][data-player="1"] { left: 1589px; top: 385px; width: 311px; height: 205px; }

#stage[data-layout="quad-gamefocus"] [data-cell="game"][data-player="2"] { left: 20px;   top: 606px; width: 605px; height: 454px; }
#stage[data-layout="quad-gamefocus"] [data-cell="cam"][data-player="2"]  { left: 641px;  top: 606px; width: 311px; height: 233px; }
#stage[data-layout="quad-gamefocus"] [data-cell="team"][data-player="2"] { left: 641px;  top: 855px; width: 311px; height: 205px; }

#stage[data-layout="quad-gamefocus"] [data-cell="game"][data-player="3"] { left: 968px;  top: 606px; width: 605px; height: 454px; }
#stage[data-layout="quad-gamefocus"] [data-cell="cam"][data-player="3"]  { left: 1589px; top: 606px; width: 311px; height: 233px; }
#stage[data-layout="quad-gamefocus"] [data-cell="team"][data-player="3"] { left: 1589px; top: 855px; width: 311px; height: 205px; }