/* My Favourite Four, /@handle/four (api/four.js): the app's sheet for another player, as a page.
   Every size here is the app's own (1.0.6), so the page and the sheet look the same:
   - the header and buttons: FavouriteFourSheet.swift (CartridgeTheme spacing and colours);
   - the grid: FavouriteFourSheetLayout.swift, the same sums in CSS;
   - the cartridges: the share sheet's pre-rendered Ridgeback still (RidgebackStill.json), with
     the game's label behind its window, as LibraryDeckStillCartridge draws it. */

@property --fav4-sheet-w { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --fav4-h { syntax: "<length>"; inherits: true; initial-value: 0px; }

.fav4-page {
  --fav4-vh: 100vh;
  /* The site's header, kept small on a phone so the cartridges get the room. */
  --fav4-site-head: 48px;
  --fav4-margin-top: 0px;
  --fav4-margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
@supports (height: 100svh) {
  .fav4-page { --fav4-vh: 100svh; }
}

.fav4-page .site-header {
  flex: none;
  width: 100%;
  height: var(--fav4-site-head);
  padding: 0 24px;
}
.fav4-page .brand { gap: 8px; }
.fav4-page .brand svg { width: 26px; height: 26px; }
.fav4-page .brand-word { font-size: 17px; }

.fav4 {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: var(--fav4-margin-top) 0 var(--fav4-margin-bottom);
  container-type: inline-size;
}

/* ── The sheet ─────────────────────────────────────────────────────────────── */

.fav4-sheet {
  /* Above the grid: 14, the 4-point grabber, 16, the title's line (28 × 1.2), 4, the handle's
     line (15 × 1.2). Under it: 8, the 48-point pill, 12. */
  --fav4-head-h: 89.6px;
  --fav4-foot-h: 68px;
  --fav4-sheet-w: min(100cqw, 440px);
  /* FavouriteFourSheetLayout.height(width:space:captionHeight:), with 18-point titles: the tallest
     shell (62:81) whose two columns fit the width (16 each side, 4 between, each shell with its
     float margins, 3 + 0.03h a side) and whose two rows fit the space between the header and the
     buttons (10 under the header, 6 over the buttons, 4 between rows, each row 10 + 0.025h above
     the shell, 6 + 0.045h under it to its floor shadow, 6, the title), and at most 240. Never
     under 96: a window shorter than a phone (landscape) scrolls rather than shrink the cartridges
     to nothing. */
  --fav4-h: max(96px, min(
    calc((var(--fav4-sheet-w) / 2 - 24px) / 0.825432),
    calc((var(--fav4-vh) - var(--fav4-site-head) - var(--fav4-margin-top) - var(--fav4-margin-bottom)
      - var(--fav4-head-h) - var(--fav4-foot-h) - 16px - 4px) / 2.14 - 40px / 1.07),
    240px));
  display: flex;
  flex-direction: column;
  width: var(--fav4-sheet-w);
  /* The sheet's corners (CartridgeTheme.Radius.sheet): 28, measured on the app's screenshots too. */
  border-radius: 28px 28px 0 0;
  background: var(--surface);
}
/* The line under an empty four: 20 high, 12 over the pill. */
.fav4-sheet.is-empty { --fav4-foot-h: 100px; }

.fav4-head {
  flex: none;
  padding: 14px 24px 0;
}
.fav4-grabber {
  display: block;
  width: 38px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 2px;
  background: var(--border);
}
.fav4-headrow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.fav4-names {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Always one line (owner, 30 Sep 2026): 28 points, shrinking with the sheet's width (all of it
   but the padding, the close button and the gap: 96) so it always fits, down to 40%. It never
   wraps and is never cut. The script's check covers a fallback font. */
.fav4-title {
  margin: 0;
  font-size: clamp(11.2px, calc((var(--fav4-sheet-w) - 96px) * 0.1273), 28px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.0214em;
  white-space: nowrap;
  color: var(--text);
}
.fav4-handle {
  margin: 0;
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fav4-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
}
/* SF Symbols' xmark at 15 points, semibold: 11.4 across, as measured on the app's screenshot. */
.fav4-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
}

/* ── The grid ──────────────────────────────────────────────────────────────── */

.fav4-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 6px;
}
.fav4-grid {
  /* The shell's width, its float margins, and the floor shadow's height. */
  --sw: calc(var(--fav4-h) * 0.765432);
  --side: calc(3px + var(--fav4-h) * 0.03);
  --top: calc(10px + var(--fav4-h) * 0.025);
  --bottom: calc(6px + var(--fav4-h) * 0.045);
  --shadow: max(6px, calc(var(--fav4-h) * 0.04));
  display: grid;
  grid-template-columns: repeat(2, calc(var(--sw) + 2 * var(--side)));
  grid-auto-rows: calc(var(--top) + var(--fav4-h) + var(--bottom) + 6px + 18px);
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fav4-slot { position: relative; }

/* The design's elliptical floor shadow: 84% of the shell's width, at the foot of its margin. */
.fav4-shadow {
  position: absolute;
  left: calc(var(--side) + var(--sw) * 0.082);
  top: calc(var(--top) + var(--fav4-h) + var(--bottom) - var(--shadow));
  width: calc(var(--sw) * 0.836);
  height: var(--shadow);
  background: radial-gradient(closest-side, rgba(138, 143, 153, .22), rgba(138, 143, 153, 0));
}

/* The still's 200 × 261 point frame, scaled so its 250-point shell is the slot's shell, the
   shell's centre (100, 131) on the slot shell's centre (RidgebackStillManifest.frame(for:)). */
.fav4-frame {
  position: absolute;
  left: calc(var(--side) + var(--sw) / 2 - var(--fav4-h) * 0.4);
  top: calc(var(--top) - var(--fav4-h) * 0.024);
  width: calc(var(--fav4-h) * 0.8);
  height: calc(var(--fav4-h) * 1.044);
}
.fav4-still {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
}
/* The still's label window, (9.545, 46.621)–(190.455, 246.118), reached 0.5 further under its
   edge (LibraryDeckStill.labelBleed). Empty, it is the bare #16181D window. */
.fav4-window {
  position: absolute;
  left: 4.522574%;
  top: 17.670891%;
  width: 90.954856%;
  height: 76.818743%;
  overflow: hidden;
  background: #16181D;
}
/* The label: RidgebackArtwork's 520 × 580 canvas, stretched to the window as the app stretches it,
   on the label's matte, with the whole cover fitted in it. The app draws it untoned. */
.fav4-label {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 520 / 580;
  transform: translateX(-50%) scaleX(1.011982);
  background: #111317;
}
.fav4-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: contain;
}
/* No cover: the controller and the title on the matte, where RidgebackArtwork draws them. */
.fav4-plain { display: none; }
.fav4-label.is-missing .fav4-plain { display: block; }
.fav4-label.is-missing .fav4-cover { display: none; }
.fav4-pad {
  position: absolute;
  left: 38.461538%;
  top: 35.344828%;
  width: 23.076923%;
  height: 13.793103%;
  fill: rgba(255, 255, 255, .35);
}
.fav4-plain-title {
  position: absolute;
  left: 6.153846%;
  top: 56.034483%;
  width: 87.692308%;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: calc(var(--fav4-h) * 0.047013);
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255, 255, 255, .7);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The game's title: 6 under the floor shadow, 18 high, as wide as the column; 13 bold, one line,
   shrinking to 80% before it is cut. */
.fav4-caption {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--top) + var(--fav4-h) + var(--bottom) + 6px);
  height: 18px;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fav4-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── The buttons ───────────────────────────────────────────────────────────── */

.fav4-foot {
  flex: none;
  padding: 8px 24px 12px;
}
/* One line, like the sheet's other lines: a long handle shrinks it rather than wrap it. */
.fav4-empty {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
/* Where the app has Share: the same accent pill, 48 high, the icon 8 from its label. */
.fav4-get {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.fav4-get svg { flex: none; width: 18px; height: 18px; }
.fav4-get:hover,
.fav4-get:focus-visible {
  color: var(--accent-ink);
  background: #86e5f7;
}

/* ── Wider screens: the sheet as a centred card under the site's usual header ── */

@media (min-width: 480px) {
  .fav4-page {
    --fav4-site-head: 78px;
    --fav4-margin-top: 8px;
    --fav4-margin-bottom: 48px;
  }
  .fav4-page .site-header {
    max-width: var(--wrap);
    padding: 0 32px;
  }
  .fav4-page .brand { gap: 10px; }
  .fav4-page .brand svg { width: 34px; height: 34px; }
  .fav4-page .brand-word { font-size: 22px; }
  .fav4 { align-items: flex-start; }
  .fav4-sheet { border-radius: 28px; }
}