/* mobile.css — phone & tablet layout of the living room (loaded after style.css). */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* whatever the decorations do, the page never scrolls sideways (clip: not a scroll container) */
@media (max-width: 1100px), (max-height: 540px) { .room { overflow-x: clip; } }

/* ================================================================== phones, portrait (≤ 600 px)
   One band of wall above the set, read left to right like a real top-of-the-telly:
   the sunburst clock on the wall · the rabbit ears · the radio-cassette (compact) · the doll · the calendar.
   The set and the remote below are untouched (style.css), so the teletext keeps every pixel of width. */
@media (max-width: 600px) {
  .room {
    --band: clamp(88px, 25vw, 112px);
    padding: calc(var(--band) + env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  }

  /* on the wall */
  .wall-clock { display: block; }
  .wall-cal { display: flex; }
  .wall-clock {
    top: calc(8px + env(safe-area-inset-top, 0px)); left: max(8px, env(safe-area-inset-left, 0px));
    width: clamp(44px, 13.5vw, 58px);
    filter: drop-shadow(3px 5px 4px rgba(0,0,0,.5));
  }
  .wall-cal {
    top: calc(16px + env(safe-area-inset-top, 0px)); right: max(10px, env(safe-area-inset-right, 0px));
    width: clamp(40px, 12vw, 50px);
    filter: drop-shadow(3px 5px 4px rgba(0,0,0,.5));
  }
  .wall-cal::before { top: -9px; width: 5px; height: 5px; margin-left: -2.5px; }
  .cal-ad { padding: 3px 2px 3px; gap: 0; box-shadow: inset 0 0 0 1px rgba(255, 233, 176, .35); }
  .cal-ad small, .cal-ad i { display: none; }
  .cal-ad b { font-size: clamp(6.5px, 2vw, 8.5px); letter-spacing: 0; }
  .cal-pad { padding: 2px 1px 3px; box-shadow: 0 1px 0 #e3dccb, 0 2px 0 #d8d0bd, 0 3px 0 #c9c0ab, 0 4px 2px rgba(0,0,0,.4); }
  .cal-month { font-size: 4.6px; letter-spacing: .02em; white-space: nowrap; }
  .cal-day { font-size: clamp(19px, 6vw, 25px); margin: 1px 0 0; }
  .cal-wd { font-size: 5px; letter-spacing: .04em; }
  .cal-saint { display: none; }

  /* on top of the set: small, and spread so nothing overlaps the clock or the calendar */
  .flamenca { display: block; width: clamp(30px, 9.4vw, 40px); right: 18.5%; margin-bottom: -2px; }
  .tv .antenna { left: 25%; --ant-scale: .8; }
  .room > .radiocasete { --rc-place: top; --rc-x: .52; width: clamp(100px, 30vw, 128px); }

  /* the set stands on the sideboard again: its feet, the doily and the edge of the wood under it */
  .stage { gap: 30px; }
  .tv-feet { display: flex; padding: 0 19%; }
  .tv-feet span { width: 15%; height: 6px; }
  .doily { display: block; bottom: -26px; width: 78%; opacity: .8; }
  .tv-unit::before {
    content: ''; position: absolute; z-index: -1; left: 50%; width: 100vw; margin-left: -50vw;
    top: calc(100% - 4px); height: 30px;
    background:
      repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 9px, rgba(255,255,255,.025) 9px 10px, transparent 10px 23px),
      linear-gradient(180deg, #6a4426, #4a2d18 45%, #2f1b0d);
    box-shadow: 0 -1px 0 #7a4d2b, 0 8px 14px -6px rgba(0,0,0,.6);
  }
}

/* ================================================================== tablets, portrait (601–900 px)
   Same idea as the phones, with more room: a taller band of wall above the set. The seasonal piece
   (seasons.js) stands on the set too, between the radio and the doll. */
@media (min-width: 600.02px) and (max-width: 900px) and (min-height: 540.02px) {
  .room { padding-top: calc(clamp(136px, 19vw, 168px) + env(safe-area-inset-top, 0px)); }
  .wall-clock { display: block; top: calc(14px + env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); width: clamp(62px, 11.5vw, 100px); }
  .wall-cal { display: flex; top: calc(16px + env(safe-area-inset-top, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); width: clamp(66px, 9vw, 80px); }
  .wall-cal .cal-ad i, .wall-cal .cal-saint { display: none; }   /* shorter, so it clears the set */
  .cal-day { font-size: clamp(28px, 4.2vw, 36px); }
  .tv .antenna { left: 23%; --ant-scale: .78; }
  .room > .radiocasete { --rc-place: top; --rc-x: .48; width: clamp(146px, 25vw, 214px); }
  .flamenca { right: 13%; }
}

/* ================================================================== tablets, landscape / small laptops (901–1100 px)
   The desktop room, a little tighter: clock and calendar small in the top corners, and with no room
   beside the set for the radio-cassette, it stands on top of it, between the rabbit ears and the doll. */
@media (min-width: 900.02px) and (max-width: 1100px) and (min-height: 540.02px) {
  .wall-clock { display: block; top: 14px; left: 16px; width: clamp(76px, 8.8vw, 96px); }
  .wall-cal { display: flex; top: 22px; right: 34px; width: clamp(64px, 6.8vw, 74px); }   /* clear of the blind's strap (daylight.js) */
  .room > .radiocasete { --rc-place: top; --rc-x: .56; width: clamp(150px, 17vw, 184px); }
  /* the seasonal piece beside the set (seasons.js): the remote stands closer here, so it is a little
     smaller and leans against the cabinet instead of the remote */
  .tv-unit > .ssn-side { scale: .8; transform-origin: 0 100%; translate: -1.4em 0; }
  /* the rabbit ears a little further in, clear of the clock when the set is tall (iPad Pro portrait), and
     the doll as tall as the wall above the set allows on short windows (the VCR shelf lifts the set) */
  .tv .antenna { left: 25%; }
  .flamenca { width: clamp(44px, min(6.4vw, 8.6vh), 78px); }
}

/* ================================================================== phones, landscape (≤ 540 px tall)
   The set and the remote side by side, the set as big as the screen is tall (4:3 again: here the height
   is what limits the text). Nothing on top of the set: there is no wall above it. The clock, the
   radio-cassette and the calendar wait on a shelf below, where the page scrolls to the footer. */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1100px) {
  .room {
    --sa-t: max(8px, env(safe-area-inset-top, 0px)); --sa-b: max(10px, env(safe-area-inset-bottom, 0px));
    padding: var(--sa-t) max(12px, env(safe-area-inset-right, 0px)) var(--sa-b) max(12px, env(safe-area-inset-left, 0px));
    flex-flow: row wrap; justify-content: center; align-items: flex-end; align-content: flex-start;
  }
  .room::after { height: 26vh; }
  .stage {
    flex: 0 0 100%; flex-direction: row; align-items: center; justify-content: center; gap: 14px;
    min-height: calc(100vh - var(--sa-t) - var(--sa-b)); min-height: calc(100dvh - var(--sa-t) - var(--sa-b));
  }
  /* the screen gets all the height there is: (viewport − room padding − cabinet, bezel and front) × 4/3 */
  .tv-unit {
    flex: 0 1 auto; margin: 0;
    width: min(calc((100vh - var(--sa-t) - var(--sa-b) - 50px) * 4 / 3 + 22px), calc(100% - 286px));
    width: min(calc((100dvh - var(--sa-t) - var(--sa-b) - 50px) * 4 / 3 + 22px), calc(100% - 286px));
  }
  .tv { border-radius: 18px; padding: 6px 6px 0; }
  .bezel { border-radius: 14px; padding: 5px; }
  .screen { aspect-ratio: 4 / 3; border-radius: 12px / 14px; }
  /* when the remote, not the height, limits the set (small phones), the glass grows taller than 4:3,
     up to the phones' 24:25, so the rows of text keep their height */
  @supports (width: 1cqw) {
    .tv-unit { container-type: inline-size; }
    .screen { aspect-ratio: auto; height: min(calc((100cqw - 22px) * 25 / 24), calc(100vh - var(--sa-t) - var(--sa-b) - 50px)); height: min(calc((100cqw - 22px) * 25 / 24), calc(100dvh - var(--sa-t) - var(--sa-b) - 50px)); }
  }
  .tube #ttx, .tube #glow { inset: 3% 3.4%; width: calc(100% - 6.8%); height: calc(100% - 6%); }
  .tv-front { padding: 4px 6px 5px; gap: 10px; }
  .brand { font-size: 12px; }
  .model, .tv-feet, .doily, .flamenca, .tv .antenna, .tv .ssn-top, .tv-unit .ssn-side, .tv-unit .ssn-floor { display: none; }
  .tv-unit::before { content: none; }
  .grille { height: 10px; }
  .tv-power { height: 18px; width: 30px; font-size: 11px; }

  /* the remote: the same keys, packed for the height */
  .remote {
    flex: 0 0 272px; width: 272px; margin: 0; transform: none;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "head modes" "main main" "colors colors" "ttx ttx";
    gap: 8px 10px; padding: 10px 12px 12px; border-radius: 24px;
  }
  .r-head { grid-area: head; } .r-modes { grid-area: modes; gap: 5px; } .r-colors { grid-area: colors; } .r-ttx { grid-area: ttx; }
  .r-main { grid-area: main; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .r-digits { flex: 1; gap: 6px 7px; }
  .rb { height: 34px; font-size: 16px; }
  .rb.sm { height: 26px; font-size: 10px; }
  .rb.power { height: 26px; width: 34px; }
  .rb.c { height: 24px; }
  .r-dpad { width: 116px; height: 116px; flex: none; }
  .dp.up, .dp.down { width: 42px; margin-left: -21px; height: 32px; }
  .dp.left, .dp.right { width: 32px; height: 42px; margin-top: -21px; }
  .dp.ok { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  .r-brand { display: none; }

  /* the shelf below: the clock and the calendar on the wall, the radio-cassette on its plank */
  .wall-clock, .wall-cal, .room > .radiocasete { position: relative; inset: auto; order: 1; margin: 34px 3vw 6px; }
  .room > .radiocasete { order: 2; } .wall-cal { order: 3; }
  .wall-clock { display: block; width: 92px; align-self: center; }
  .wall-cal { display: flex; width: 78px; align-self: center; }
  .room > .radiocasete { --rc-place: flow; width: 200px; margin-bottom: 18px; }
  .room > .radiocasete::after {   /* the plank it stands on */
    content: ''; position: absolute; z-index: -1; left: -14%; right: -14%; top: calc(100% - 2px); height: 9px; border-radius: 2px;
    background: linear-gradient(180deg, #8a5a33, #5c3820 55%, #3b2212); box-shadow: 0 6px 10px -3px rgba(0,0,0,.55);
  }
  .help { order: 4; flex: 0 0 100%; margin-top: 14px; }
}

/* desktop with the VCR shelf (vcr.js lifts the set a little): keep the doll's fan on screen on shorter
   windows, and slide the TV magazine off the shelf's corner */
@media (min-width: 1101px) and (max-height: 860px) { .room.vcr-on .flamenca { width: clamp(54px, 5.4vw, 70px); } }
.room.vcr-on .dl-revista { margin-left: -40px; margin-top: 4px; }