/* The TV's own menu (tv-menu.js) — /cast/tv only.

   Sized in vw so a 1280x720 TV browser and a 1920x1080 one lay out the same
   screen (the mockup was drawn at 1920 wide: 1vw = 19.2px there).

   ENGINE FLOOR: Chromium 55, as receiver.css explains. No flex `gap` (margins
   on the children instead), no `inset`, no grid, no clamp()/min()/max(), no
   aspect-ratio — tools/cast_checks.py fails the build on them. Everything
   that moves uses transform, which old TV GPUs animate smoothly.

   Stacking: above #idle and the player's status layer (4), below the loading
   cover (5), good night (6), the network/sound cards (7), pairing (8) and the
   hatch (9). It is never on screen while a video is loaded. */
#menu {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4;
  display: none; overflow: hidden;
  /* Peach, lit by three soft lights (the phone's peach panels, grown into a
     room). Plain gradients: an old TV GPU paints these once; a blur filter
     it would redo on every scroll. */
  background-color: #FFE8DA;
  background-image:
    radial-gradient(circle at 6% 10%, rgba(255, 196, 120, 0.50) 0, rgba(255, 196, 120, 0) 28vw),
    radial-gradient(circle at 94% 6%, rgba(140, 190, 255, 0.34) 0, rgba(140, 190, 255, 0) 26vw),
    radial-gradient(circle at 80% 104%, rgba(255, 160, 200, 0.34) 0, rgba(255, 160, 200, 0) 32vw),
    linear-gradient(180deg, #FFF3EA 0%, #FFE0CD 100%);
  color: #3A2E3F;
  font-family: "Nunito", -apple-system, Roboto, sans-serif;
  /* A row's title dot takes a colour of its own; a card's edge is its
     genre's (the hue classes below, the phones' palette). */
  --tint: #FFA34D; --edge: #E3802E; --accent: #EE7B35;
  --ring: #FFB23F; --shade: rgba(150, 80, 50, 0.16); --panel: #FFF8F2;
}
/* Headings in Rubik: round and chunky like Fredoka, which has no Cyrillic
   (every Russian heading fell back to Nunito). */
.mrtitle, .mtab, .mwhotitle, .msheettitle, .mtile, .mkidname { font-family: "Rubik", "Nunito", sans-serif; }

/* ---------- top bar ---------- */
#menuBar {
  position: absolute; top: 2.5vw; left: 5vw; right: 5vw; height: 4.6vw;
  display: flex; align-items: center; z-index: 2;
}
#menu.who #menuBar { display: none; }
.mwordmark {
  font-family: "Fredoka", "Nunito", sans-serif; font-weight: 700;
  font-size: 3.1vw; line-height: 1; margin-right: 2.9vw;
}
.mwordmark .bo { color: var(--orange); }
.mwordmark .nbon { color: var(--blue); }
#menuTabs { display: flex; align-items: center; }
.mtab {
  height: 3.35vw; line-height: 3.35vw; padding: 0 1.55vw; margin-right: 0.45vw;
  border-radius: 1.7vw; font-size: 1.55vw; font-weight: 600; color: #3A2E3F;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mtab.active {
  background: linear-gradient(180deg, #FF9D5C 0%, #F27A3A 100%); color: #fff;
  box-shadow: 0 0.3vw 0 #D6602A, 0 0.7vw 1.3vw rgba(214, 96, 42, 0.30);
}
.mspacer { flex: 1; }
#menuChips { display: flex; align-items: center; }
.mchip {
  display: flex; align-items: center; height: 3.35vw; padding: 0 1.35vw 0 0.3vw;
  margin-left: 0.85vw; border-radius: 1.7vw; background: var(--panel);
  box-shadow: 0 0.3vw 0 #F0CBB4, 0 0.7vw 1.3vw var(--shade); font-size: 1.45vw; font-weight: 800;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mchipavatar {
  width: 2.7vw; height: 2.7vw; line-height: 2.7vw; border-radius: 50%;
  margin-right: 0.75vw; text-align: center; color: #fff;
  font-family: "Fredoka", "Nunito", sans-serif; font-weight: 600; font-size: 1.55vw;
}
.mlock { width: 3.35vw; padding: 0; justify-content: center; }
/* Today's time left (tv-menu.js refreshToday): read, never pressed. */
.mtime { padding: 0 1.35vw; }
.mlock svg { width: 1.6vw; height: 1.6vw; }

/* Focus, everywhere in the bar: the ring the cards wear, a size smaller. */
.mtab.focused, .mchip.focused, .mbutton.focused {
  box-shadow: 0 0 0 0.26vw #fff, 0 0 0 0.56vw var(--ring), 0 0.8vw 1.6vw rgba(255, 150, 40, 0.35);
  transform: scale(1.07);
}

/* ---------- rows ---------- */
#menuBody {
  position: absolute; top: 9vw; left: 0; right: 0; bottom: 0; overflow: hidden;
}
#menu.who #menuBody { top: 0; }
#menuRows { transition: transform 0.25s ease; }
.mrow { padding: 0 0 0 5vw; }
.mrow:nth-child(6n+2) { --accent: #3F82DA; }
.mrow:nth-child(6n+3) { --accent: #DB5A93; }
.mrow:nth-child(6n+4) { --accent: #3F9E56; }
.mrow:nth-child(6n+5) { --accent: #7B5CD8; }
.mrow:nth-child(6n+6) { --accent: #C99A12; }
/* The phones' candy colours (CardDepthRules.Hue): the lit top of the edge,
   then its shaded bottom. */
.mcard.hue-coral { --tint: #FF8A78; --edge: #E3665C; }
.mcard.hue-tangerine { --tint: #FFA34D; --edge: #E3802E; }
.mcard.hue-sunflower { --tint: #FAC242; --edge: #DB9E1F; }
.mcard.hue-leaf { --tint: #8CCC5C; --edge: #66A83D; }
.mcard.hue-mint { --tint: #54CC9E; --edge: #33A37A; }
.mcard.hue-teal { --tint: #3DBDC7; --edge: #2494A3; }
.mcard.hue-sky { --tint: #5CA3F5; --edge: #3D80D6; }
.mcard.hue-periwinkle { --tint: #808CF2; --edge: #616BD6; }
.mcard.hue-lavender { --tint: #A880EB; --edge: #855CCC; }
.mcard.hue-pink { --tint: #F27DB8; --edge: #D15794; }
/* A favorite, or a video the kid loved: gold, whatever the genre. */
.mcard.gold { --tint: #FFD24D; --edge: #DDA114; }
.mrtitle {
  font-weight: 700; font-size: 2.1vw; line-height: 2.5vw; color: #3A2E3F; margin-bottom: 0.3vw;
}
.mrtitle:before {
  content: ""; display: inline-block; width: 1vw; height: 1vw; border-radius: 50%;
  margin: 0 0.9vw 0.25vw 0; vertical-align: middle; background: var(--accent);
  box-shadow: 0 0 0 0.3vw rgba(255, 255, 255, 0.85);
}
/* A rail slides its cards with transform; the viewport clips them at the
   screen edge. Room all round a focused card for its lift, ring, shadow and
   glow: clipped, they would end in a hard-edged box. */
.mrview { overflow: hidden; margin-left: -3vw; padding: 1.6vw 0 4.2vw 3vw; }
.mtrack { display: flex; white-space: nowrap; transition: transform 0.25s ease; }
/* Room under a grid line for its tiles' 3D edge and shadow: the line above
   a focused one slides off under the bar, and its edge must go with it. */
.mgrid .mtrack { flex-wrap: nowrap; padding-top: 1.6vw; padding-bottom: 2.4vw; }

/* A card is a little sticker: the picture framed in a peach panel with the
   title, standing on a coloured 3D edge (thicker for longer videos, as on
   the phone) over a warm shadow. */
.mcard {
  flex: none; margin-right: 2.1vw; padding: 0.45vw 0.45vw 0.85vw;
  border-radius: 1.65vw; background: var(--panel);
  box-shadow: 0 0.25vw 0 var(--tint), 0 0.55vw 0 var(--edge), 0 1.1vw 1.9vw var(--shade);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mcard.len-s { box-shadow: 0 0.18vw 0 var(--tint), 0 0.38vw 0 var(--edge), 0 0.9vw 1.7vw var(--shade); }
.mcard.len-l { box-shadow: 0 0.35vw 0 var(--tint), 0 0.8vw 0 var(--edge), 0 1.3vw 2.1vw var(--shade); }
/* The gold card's badge: a heart for a favorite, a star for a loved one. */
.mbadge {
  position: absolute; top: 0.7vw; left: 0.7vw; width: 2.3vw; height: 2.3vw; line-height: 2.3vw;
  border-radius: 50%; text-align: center; font-size: 1.35vw; color: #fff;
  background: linear-gradient(180deg, #FFD24D 0%, #F0A91C 100%);
  box-shadow: 0 0 0 0.22vw #fff, 0 0.3vw 0.7vw rgba(150, 90, 20, 0.35);
}
.mcard.normal { margin-right: 1.65vw; }
.mthumb {
  position: relative; overflow: hidden; border-radius: 1.25vw; background: #F6DCCB;
}
.mcard.big .mthumb { width: 26.65vw; height: 15vw; }
.mcard.normal .mthumb { width: 20vw; height: 11.25vw; }
/* hqdefault is 4:3 with black bands above and below the 16:9 picture:
   `cover` in a 16:9 box crops exactly the bands away. */
.mthumb img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.mdur {
  position: absolute; right: 0.75vw; bottom: 0.75vw; padding: 0.2vw 0.7vw;
  border-radius: 1vw; background: rgba(58, 46, 63, 0.82); color: #FFF8EC;
  font-size: 1.15vw; font-weight: 800; line-height: 1.45vw;
}
.mplay {
  position: absolute; top: 50%; left: 50%; width: 4.6vw; height: 4.6vw;
  margin: -2.3vw 0 0 -2.3vw; border-radius: 50%; background: #FFF8EC;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 0.4vw 1vw rgba(58, 52, 66, 0.25);
}
.mplay svg { width: 2vw; height: 2vw; fill: var(--ink); }
.mcard.focused {
  transform: scale(1.06) translateY(-0.35vw);
  box-shadow: 0 0 0 0.3vw #fff, 0 0 0 0.62vw var(--ring), 0 0.3vw 0 var(--tint), 0 0.65vw 0 var(--edge),
              0 1.3vw 2.1vw rgba(150, 80, 50, 0.30), 0 0 1.5vw rgba(255, 170, 60, 0.40);
}
.mcard.focused .mplay { display: flex; }
.mctitle {
  margin-top: 0.7vw; padding: 0 0.6vw; font-size: 1.45vw; line-height: 1.85vw; font-weight: 800;
  color: #3A2E3F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcard.big .mctitle { width: 25.45vw; font-size: 1.55vw; }
.mcard.normal .mctitle { width: 18.8vw; }
.mcmeta {
  width: 25.45vw; margin-top: 0.15vw; padding: 0 0.6vw; font-size: 1.25vw; line-height: 1.6vw;
  font-weight: 700; color: #8A6F66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Genre tiles: a colour and a name, and for a genre tv-menu.js has a
   picture for (GENRE_ART), its 3D character in the bottom-right corner under
   the name. The character's shadow is in the picture: a drop-shadow filter
   is a blur an old TV GPU would redo on every focus move. */
.mtile {
  flex: none; width: 20vw; height: 11.25vw; margin-right: 1.65vw; border-radius: 1.25vw;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 1.5vw; box-sizing: border-box; white-space: normal;
  font-weight: 700; font-size: 1.9vw; color: #3A2E3F;
  border: 0.4vw solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0.5vw 0 rgba(58, 46, 63, 0.14), 0 1.1vw 1.9vw var(--shade);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mtile.art {
  position: relative; align-items: flex-start; justify-content: flex-start; text-align: left;
  padding: 1.1vw 1.4vw; line-height: 1.2;
}
.mtile.art .mtilename { position: relative; }
.mtile.art img { position: absolute; right: 0.2vw; bottom: 0; width: 9.2vw; height: 9.2vw; }
.mtile.focused {
  transform: scale(1.06) translateY(-0.35vw);
  box-shadow: 0 0 0 0.3vw #fff, 0 0 0 0.62vw var(--ring), 0 0.6vw 0 rgba(58, 46, 63, 0.14),
              0 1.3vw 2.1vw rgba(150, 80, 50, 0.30);
}

/* Loading, empty, failed. */
.mmessage { padding-top: 3vw; }
/* The rows' loader: the candy, centred in the space the rows will take. */
.mloading { position: relative; height: 40vh; padding-top: 0; }
.mmsgtext { font-size: 1.9vw; font-weight: 700; color: #6A6376; max-width: 70vw; white-space: normal; }
.mbutton {
  display: inline-block; margin-top: 1.6vw; padding: 1vw 2.2vw; border-radius: 1.7vw;
  background: var(--panel); box-shadow: 0 0.3vw 0 #F0CBB4, 0 0.7vw 1.3vw var(--shade);
  font-size: 1.6vw; font-weight: 800; color: #3A2E3F;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* ---------- who's watching ---------- */
.mwho {
  height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.mwhotitle {
  font-weight: 700; font-size: 4.2vw; line-height: 5vw; color: #3A2E3F; margin-bottom: 4.2vw;
}
.mwhotiles { display: flex; justify-content: center; }
.mkid { margin: 0 2.3vw; display: flex; flex-direction: column; align-items: center; }
.mkidavatar {
  width: 12.5vw; height: 12.5vw; line-height: 12.5vw; border-radius: 50%;
  text-align: center; color: #fff;
  font-family: "Fredoka", "Nunito", sans-serif; font-weight: 600; font-size: 6vw;
  border: 0.5vw solid #fff;
  box-shadow: 0 0.6vw 0 rgba(58, 46, 63, 0.12), 0 1.3vw 2.4vw var(--shade);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mkidname { margin-top: 1.65vw; font-size: 2.3vw; font-weight: 600; color: #3A2E3F; }
.mkid.focused .mkidavatar {
  transform: scale(1.09) translateY(-0.4vw);
  box-shadow: 0 0 0 0.45vw var(--ring), 0 0.7vw 0 rgba(58, 46, 63, 0.12),
              0 1.8vw 3vw rgba(150, 80, 50, 0.34), 0 0 2.6vw rgba(255, 170, 60, 0.5);
}
.mkid.focused .mkidname { font-weight: 800; }
.mwhohint { margin-top: 4.2vw; font-size: 1.45vw; font-weight: 700; color: #6A6376; }
.mbookmarktip { position: absolute; left: 50%; bottom: 3vw; z-index: 6; max-width: 70vw;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  padding: 1vw 2.2vw; border-radius: 2.2vw; background: rgba(58, 46, 63, 0.88); color: #FFF8F2;
  font-size: 1.35vw; font-weight: 700; text-align: center; }

/* ---------- parent sheet ---------- */
#menuSheet {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3;
  display: none; align-items: center; justify-content: center;
  background: rgba(20, 16, 24, 0.55);
}
.msheetbox {
  background: #FFF3EA; border-radius: 1.8vw; padding: 3vw 4vw;
  max-width: 64vw; text-align: center; box-shadow: 0 1.2vw 3.5vw rgba(0, 0, 0, 0.4);
}
.msheettitle { font-weight: 700; font-size: 2.6vw; color: #3A2E3F; }
.msheetadd { margin-top: 1.8vw; color: var(--ink-soft);
  display: flex; flex-direction: row; align-items: center; justify-content: center; }
/* The add code's QR (copied from #addPhone with its line). */
.msheetadd .addqr { flex: 0 0 auto; margin-right: 1.8vw; }
.msheetadd .addqr .qr { width: 12vw; height: 12vw; border-radius: 0.8vw; }
.msheetadd .addqr + .addtext { text-align: left; }
.msheetadd .primary { font-size: 1.55vw; font-weight: 700; }
.msheetadd .secondary { font-size: 1.2vw; font-weight: 600; margin-top: 0.4vw; }
.msheetadd .code {
  display: inline-block; margin: 0 0.3vw; padding: 0.1vw 0.8vw;
  font-family: "Fredoka", "Nunito", sans-serif; font-size: 2.2vw; letter-spacing: 0.12em;
  color: var(--orange); background: #fff; border-radius: 0.7vw;
}
.msheetadd .castglyph { width: 1.1em; height: 1.1em; }
.msheetbuttons { margin-top: 2vw; }
.msheetbuttons .mbutton { margin: 0 0.8vw; vertical-align: top; }
.munpair .msub { font-size: 1.1vw; font-weight: 700; color: var(--ink-soft); margin-top: 0.3vw; }

/* ---------- "ask for more" on the good-night screen ----------
   Built by tv-menu.js inside receiver-core's #goodnight (dusk #1E1B3A), under
   its text. The one thing on that screen OK can do, so it always wears the
   focus ring. The good night's own "a parent can add time" line sits at the
   bottom edge; this stays clear of it. */
.maskmore { margin-top: 4.5vh; display: flex; flex-direction: column; align-items: center; }
.maskbutton {
  padding: 1.1vw 2.6vw; border-radius: 2vw; background: #FFF6E0; color: #1E1B3A;
  font-family: "Fredoka", "Nunito", sans-serif; font-weight: 700; font-size: 2vw;
  box-shadow: 0 0 0 0.3vw #1E1B3A, 0 0 0 0.62vw var(--orange);
}
.maskstate { font-size: 2vw; font-weight: 800; color: #FFE7A8; }
.masksub { margin-top: 1.4vh; font-size: 1.35vw; font-weight: 700; color: rgba(255, 246, 224, 0.75); }

/* ---------- the plan screen (tv-menu.js lockPlan) ----------
   A family without Bonbon Family under the TV test: the paired idle screen
   (receiver-core #idle, receiver.css) in the menu's colours, with this card
   where its "pick a video and tap ⎘" line was. Its add code and unpair hint
   stay: the code's line says to point the phone at its QR, which then opens
   the Bonbon app's TV paywall (renew=1, transport-relay.js), and a second
   parent with the plan still joins with that code, which opens the TV for
   the family. Calm and still: no floating shapes, no breathing wordmark,
   nothing that reads as loading, and nothing to press. It says where the
   plan is — the app sells it — and names no price, store or buy word. */
.mplan { display: none; }
#idle.mplanon {
  background-color: #FFE8DA;
  background-image:
    radial-gradient(circle at 6% 10%, rgba(255, 196, 120, 0.50) 0, rgba(255, 196, 120, 0) 28vw),
    radial-gradient(circle at 94% 6%, rgba(140, 190, 255, 0.34) 0, rgba(140, 190, 255, 0) 26vw),
    radial-gradient(circle at 80% 104%, rgba(255, 160, 200, 0.34) 0, rgba(255, 160, 200, 0) 32vw),
    linear-gradient(180deg, #FFF3EA 0%, #FFE0CD 100%);
}
#idle.mplanon .shape, #idle.mplanon #hint { display: none; }
#idle.mplanon #wordmark { font-size: 4.4vw; animation: none; margin-bottom: 3.2vh; }
/* One card, the icon beside the words: short enough that the idle screen's
   "another phone?" line (with its QR) and the unpair hint under it still fit
   a 16:9 screen. */
#idle.mplanon .mplan {
  display: flex; flex-direction: row; align-items: center; text-align: left;
  max-width: 64vw; padding: 2.3vw 3.4vw 2.5vw 2.6vw; border-radius: 2.2vw; background: #FFF8F2;
  box-shadow: 0 0.45vw 0 #F0CBB4, 0 1.3vw 2.8vw rgba(150, 80, 50, 0.16);
}
.mplanicon {
  flex: none; width: 5.4vw; height: 5.4vw; border-radius: 50%; margin-right: 2.3vw;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(180deg, #FF9D5C 0%, #F27A3A 100%);
  box-shadow: 0 0.3vw 0 #D6602A, 0 0.7vw 1.3vw rgba(214, 96, 42, 0.30);
}
.mplanicon svg { width: 2.9vw; height: 2.9vw; }
.mplantitle {
  font-family: "Rubik", "Nunito", sans-serif; font-weight: 700;
  font-size: 2.5vw; line-height: 1.22; color: #3A2E3F; white-space: pre-line;
}
.mplanline { margin-top: 0.8vw; font-size: 1.75vw; line-height: 1.3; font-weight: 700; color: #6A6376; }
/* The idle screen's own lines, on the menu's peach. */
#idle.mplanon #addPhone { margin-top: 4vh; }