/* Daily core loop persistent garden-and-envelope home. Every page-owned selector is scoped. */

/* Each dynamic viewport height follows a 100vh fallback: an engine without dynamic viewport units drops the dvh line,
   and without the fallback the root loses its height and the 100%-tall board collapses to 0 (SD-119). */
body[data-daily-core-loop-home-active] {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  background: #d8c488;
}

body[data-daily-core-loop-home-active]::after {
  display: none;
}

[data-daily-core-loop-home-root] {
  --daily-core-loop-navy: #130c94;
  --daily-core-loop-plum-deep: #1a0b61;
  --daily-core-loop-plum-line: #3b24a5;
  --daily-core-loop-veil-rgb: 89 71 54;
  --daily-core-loop-envelope-scale: 1;
  --daily-core-loop-utility-top: 667px;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 480px;
  font-family: 'ET Sans', system-ui, sans-serif;
  color: #0f0f0f;
}

[data-daily-core-loop-home-root][hidden] {
  display: none;
}

[data-daily-core-loop-home-root],
[data-daily-core-loop-home-root] *,
[data-daily-core-loop-home-root] *::before,
[data-daily-core-loop-home-root] *::after {
  box-sizing: border-box;
}

/* Replay and Card Close briefly add this class around their phase swap and forced layout.
   Map the prototype's signed transition guard only onto the production surfaces it names. */
[data-daily-core-loop-home-root].daily-core-loop-phase-snap [data-daily-core-loop-veil],
[data-daily-core-loop-home-root].daily-core-loop-phase-snap .daily-core-loop-envelope-flip,
[data-daily-core-loop-home-root].daily-core-loop-phase-snap .daily-core-loop-envelope-anchor,
[data-daily-core-loop-home-root].daily-core-loop-phase-snap .daily-core-loop-folder-lift-scrim {
  transition: none !important;
}

[data-daily-core-loop-board] {
  position: relative;
  width: 100%;
  height: 100%;
  /* Garden resize spec: a held garden and the spare garden reach past the board. 'clip' cuts them off
     without making the board something that can scroll; 'hidden' stays for a browser without 'clip',
     where the garden does not glide. */
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  /* The garden's grass tone, shown only for the instant before the garden first paints, so it is
     never seen as a flash (garden spec §4). */
  background: #d8c488;
}

/* The garden is a hand-inked illustration drawn at the screen's own density: smooth, never blown
   up in blocks. While a window edge is dragged the home pins it at the size its picture was drawn
   for and moves it with the envelope from its top left (garden resize spec). */
[data-daily-core-loop-garden-canvas] {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  transform-origin: 0 0;
}

/* Garden resize spec: the spare garden lies under the garden (before it, at z 0) and reaches past
   the board, which clips it; the held picture's copy lies over the garden (after it, at z 0) while
   the new picture fades in. The fade is an opacity beat, not motion: it keeps its time under reduced
   motion, beating the loop's clamp on specificity, as the card flip's beat does. */
[data-daily-core-loop-garden-spare] {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

[data-daily-core-loop-home-root] [data-daily-core-loop-garden-fade] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  transform-origin: 0 0;
  transition: opacity 350ms ease-out !important;
}

/* The garden's own leaf canvas (daily-core-loop-garden.js appends it to the board): above the plane (z 4) so a
   leaf can fall past or lie on the envelope, below the transition pair (z 6). It takes no clicks. */
[data-daily-core-loop-garden-leaves] {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: 0 0;
}

[data-daily-core-loop-veil] {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle farthest-corner at 50% 50%,
    rgb(var(--daily-core-loop-veil-rgb) / 45%) 25%,
    rgb(var(--daily-core-loop-veil-rgb) / 85%) 100%
  );
  transition: opacity 1.2s ease;
}

[data-daily-core-loop-home-root][data-daily-core-loop-veil-visible='true'] [data-daily-core-loop-veil] {
  opacity: 1;
}

[data-daily-core-loop-home-root] [data-shared-game-bar-host] {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: 33px;
}

[data-daily-core-loop-home-root] [data-shared-game-bar-host] .shared-game-bar {
  margin-bottom: 0;
}

[data-daily-core-loop-plane] {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 4;
  width: 1440px;
  height: 817px;
  margin-left: -720px;
  pointer-events: none;
}

.daily-core-loop-envelope-anchor {
  position: absolute;
  top: calc(220px + var(--daily-core-loop-envelope-offset, 0px));
  left: 438px;
  z-index: 5;
  width: 564px;
  height: 389.7px;
  perspective: 2000px;
  transform: scale(var(--daily-core-loop-envelope-scale));
  transform-origin: 50% -210.04px;
  pointer-events: auto;
}

.daily-core-loop-envelope-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* REQ-1846 (spec §6). Inside the 3D context above Chrome draws the face as a bitmap and scales it,
   so the date, PLAY, the stamp and the paper go soft. The home controller adds this class while the
   flip is face-up and still, and takes it off before the first frame of any turn or flight. */
.daily-core-loop-envelope-anchor.daily-core-loop-envelope-flat {
  perspective: none;
}

.daily-core-loop-envelope-flat .daily-core-loop-envelope-flip {
  transform-style: flat;
}

/* WebKit can paint the rotated back over the front after this 3D context is flattened. */
.daily-core-loop-envelope-flat .daily-core-loop-envelope-face--back {
  visibility: hidden;
}

.daily-core-loop-envelope-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.daily-core-loop-envelope-face--back {
  transform: rotateY(180deg);
}

.daily-core-loop-envelope-face--front .daily-core-loop-envelope {
  transform: scale(1.6443);
  transform-origin: 0 0;
}

.daily-core-loop-envelope-face--back .daily-core-loop-envelope {
  transform: scale(1.9448);
  transform-origin: 0 0;
}

.daily-core-loop-envelope {
  --daily-core-loop-envelope-paper-line: #fff3e5;
  --daily-core-loop-envelope-paper-bg: #fffbf7;
  --daily-core-loop-envelope-paper-ink: 1.1111px;
  --daily-core-loop-envelope-paper-period: 3.7037px;
  --daily-core-loop-envelope-paper-angle: 137deg;
  --daily-core-loop-envelope-shade-a: rgb(235 231 225 / 38%);
  --daily-core-loop-envelope-shade-b: rgb(220 213 206 / 38%);
  --daily-core-loop-envelope-front-shade: rgb(255 248 240 / 38%);
  --daily-core-loop-envelope-ink: #000;
  position: relative;
  width: 290px;
  height: 200px;
}

.daily-core-loop-envelope--front {
  width: 343px;
  height: 237px;
}

.daily-core-loop-envelope-paper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 7px;
  background-color: var(--daily-core-loop-envelope-paper-bg);
  background-image:
    linear-gradient(180deg, var(--daily-core-loop-envelope-shade-a) 31.25%, var(--daily-core-loop-envelope-shade-b)),
    repeating-linear-gradient(
      var(--daily-core-loop-envelope-paper-angle),
      var(--daily-core-loop-envelope-paper-line) 0 var(--daily-core-loop-envelope-paper-ink),
      var(--daily-core-loop-envelope-paper-bg) var(--daily-core-loop-envelope-paper-ink) var(--daily-core-loop-envelope-paper-period)
    );
  box-shadow: -2px 4px 4px rgb(0 0 0 / 25%);
}

.daily-core-loop-envelope-paper--front {
  border-radius: 8.3px;
  background-image:
    linear-gradient(180deg, var(--daily-core-loop-envelope-front-shade) 31.25%, var(--daily-core-loop-envelope-shade-b)),
    repeating-linear-gradient(
      calc(var(--daily-core-loop-envelope-paper-angle) + 90deg),
      var(--daily-core-loop-envelope-paper-line) 0 var(--daily-core-loop-envelope-paper-ink),
      var(--daily-core-loop-envelope-paper-bg) var(--daily-core-loop-envelope-paper-ink) var(--daily-core-loop-envelope-paper-period)
    );
}

.daily-core-loop-envelope-outline {
  position: absolute;
  inset: 0;
  border: 1px solid var(--daily-core-loop-envelope-ink);
  border-radius: 7px;
  pointer-events: none;
}

.daily-core-loop-envelope-outline--front {
  border-width: 1.2px;
  border-radius: 8.3px;
}

.daily-core-loop-envelope-magnifier {
  position: absolute;
  top: 11.5px;
  left: 14.2px;
  width: 31.7px;
  height: 31.7px;
}

.daily-core-loop-envelope-return {
  position: absolute;
  top: 20px;
  left: 18px;
  font-family: 'ET Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 11px;
  color: #4c4c4c;
}

.daily-core-loop-envelope-return strong {
  font-weight: 700;
}

.daily-core-loop-envelope-stamp {
  position: absolute;
  top: 13px;
  left: 284px;
  width: 45px;
}

.daily-core-loop-envelope-postmark {
  position: absolute;
  color: var(--daily-core-loop-navy);
}

.daily-core-loop-envelope-postmark img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.daily-core-loop-envelope-postmark svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.daily-core-loop-envelope-postmark text {
  font-family: 'ET Text', serif;
  font-size: 11.6px;
  font-style: italic;
  font-weight: 700;
  fill: var(--daily-core-loop-navy);
  stroke: var(--daily-core-loop-navy);
  stroke-width: 0.036em;
  stroke-linejoin: round;
  text-anchor: middle;
}

.daily-core-loop-envelope-postmark--front {
  top: 14.6px;
  left: 255.5px;
  width: 37.1px;
  height: 37.1px;
}

.daily-core-loop-envelope-postmark--front img {
  top: -1.9px;
  left: -2.7px;
  width: 39.8px;
  height: 39.8px;
}

.daily-core-loop-envelope-postmark--front text {
  font-size: 9.7px;
}

/* Spec §4.2: no clip on this box. The pencil rises above the capitals and wiggles higher still; the
   widest real date ("September 20, 2026") uses a third of the width. */
.daily-core-loop-envelope-date {
  position: absolute;
  top: 84.1px;
  left: 18px;
  width: 307px;
  font-family: 'ET Sans', sans-serif;
  font-size: 9.6px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .67px;
  text-align: center;
  white-space: nowrap;
  color: #000;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* REQ-1847 (spec §4.1, copied from month-album-demo.html). The date is the door to the collection.
   It stays centred where the locked design puts it; the pencil hangs beside it (absolute), so the
   date never shifts sideways when the pencil comes or goes. daily-core-loop-home.js moves the pencil along x
   while it writes and parks it 3.5px after the last letter. */
.daily-core-loop-envelope-date-button { position: relative; cursor: pointer; outline: none; border-radius: 1px; }
.daily-core-loop-envelope-date-button:focus-visible { outline: 1px solid var(--daily-core-loop-navy); outline-offset: 3px; }
.daily-core-loop-envelope-date-ink { position: relative; }
.daily-core-loop-envelope-date-button:hover .daily-core-loop-envelope-date-ink {
  text-decoration: underline dotted rgba(59, 52, 149, .6);
  text-decoration-thickness: .7px;
  text-underline-offset: 2.6px;
}
/* 11 local px square, its lead tip at (0.8, 10.3) of that box; --daily-core-loop-pencil-tip-y puts the tip on
   the date's baseline. */
.daily-core-loop-envelope-pencil {
  --daily-core-loop-pencil-tip-y: 7.4px;
  position: absolute;
  left: 0;
  top: calc(var(--daily-core-loop-pencil-tip-y) - 10.3px);
  width: 11px;
  height: 11px;
  margin-left: -.8px;
  opacity: 0;
  transition: opacity .2s ease;
  will-change: transform;
}
.daily-core-loop-envelope-pencil.is-shown { opacity: 1; }
.daily-core-loop-envelope-pencil.is-parked { transition: opacity .2s ease, transform .28s cubic-bezier(.3, .7, .3, 1); }
.daily-core-loop-envelope-pencil svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 7% 94%;
  transition: transform .18s ease;
}
.daily-core-loop-envelope-pencil svg * {
  stroke: #3b3495;
  stroke-width: .95;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.daily-core-loop-envelope-pencil .daily-core-loop-pencil-body { fill: #feffb5; }
.daily-core-loop-envelope-pencil .daily-core-loop-pencil-wood { fill: #fffbf7; }
.daily-core-loop-envelope-pencil .daily-core-loop-pencil-lead { fill: #3b3495; }
.daily-core-loop-envelope-pencil .daily-core-loop-pencil-band { fill: #e5e4ec; }
.daily-core-loop-envelope-pencil .daily-core-loop-pencil-eraser { fill: #ffe6d4; }
.daily-core-loop-envelope-pencil .daily-core-loop-pencil-facet { fill: none; stroke-opacity: .45; }
.daily-core-loop-envelope-date-button:hover .daily-core-loop-envelope-pencil.is-parked svg { transform: rotate(-12deg); }

/* Spec §5.3: the pencil's wiggle, about its tip, only when parked. */
.daily-core-loop-envelope-pencil.is-nudging svg { animation: daily-core-loop-pencil-nudge 850ms ease-in-out both; }
@keyframes daily-core-loop-pencil-nudge {
  0%, 100% { transform: none; }
  18% { transform: rotate(-18deg); }
  38% { transform: rotate(10deg); }
  58% { transform: rotate(-9deg); }
  78% { transform: rotate(3deg); }
}

.daily-core-loop-play-button {
  position: absolute;
  top: 106.5px;
  left: 18px;
  width: 307px;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: 'ET Headline', Georgia, serif;
  font-size: 35.6px;
  font-weight: 500;
  line-height: normal;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  color: #000;
  cursor: pointer;
  /* Spec §5.2 trap: PLAY on its own drawing layer. Without it the word is re-drawn with different
     smoothing for a frame whenever the pencil beside it moves, which reads as a twitch. */
  will-change: transform;
}

/* Spec §5.2: PLAY's damped wiggle about the word's centre, underline and all. The demo's swings
   (--nudge-deg 4) are written in. It animates the separate scale and rotate properties, not
   transform, so the :active press offset below still works during a wiggle. The pivot is the
   demo's (22.5px from the top); top alignment keeps that pivot on the word's centre. */
.daily-core-loop-play-button.is-nudging {
  transform-origin: 50% 22.5px;
  animation: daily-core-loop-play-nudge 900ms cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes daily-core-loop-play-nudge {
  0% { scale: none; rotate: none; }
  14% { scale: 1.07; rotate: -4deg; }
  30% { scale: 1.07; rotate: 3.4deg; }
  46% { scale: 1.05; rotate: -2.4deg; }
  62% { scale: 1.03; rotate: 1.4deg; }
  78% { scale: 1.01; rotate: -.48deg; }
  100% { scale: none; rotate: none; }
}

.daily-core-loop-play-button::after {
  content: '';
  position: absolute;
  top: 47.2px;
  left: 50%;
  width: 98px;
  border-top: 2px solid #3b3495;
  transform: translateX(-50%);
  transition: width 180ms ease, border-color 180ms ease;
}

.daily-core-loop-play-button:hover::after {
  width: 112px;
  border-top-color: var(--daily-core-loop-navy);
}

.daily-core-loop-play-button:active {
  transform: translateY(1px);
}

.daily-core-loop-play-button:focus-visible {
  outline: 2px solid var(--daily-core-loop-navy);
  outline-offset: 3px;
}

.daily-core-loop-play-button:disabled {
  cursor: wait;
}

.daily-core-loop-play-button:disabled::after {
  width: 98px;
  border-color: #77719d;
}

/* A flap carries no border of its own. Each crease is drawn as a dedicated 1px SVG stroke
   (.daily-core-loop-envelope-crease) laid over the paper, because a clip-path removes a border along with
   everything else outside the triangle — which is why the diagonals used to print no line at all. */
.daily-core-loop-envelope-bottom-flap,
.daily-core-loop-envelope-top-flap-paper {
  position: absolute;
  left: 0;
  width: 100%;
  height: 111px;
  background: repeating-linear-gradient(
    144deg,
    #fff3e5 0 1.7241px,
    #fff 1.7241px 3.4483px
  );
}

.daily-core-loop-envelope-bottom-flap {
  bottom: 0;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

/* The drop shadow belongs to this static wrapper rather than to the swinging element inside it, so
   the shadow is cast by whatever silhouette the swing currently shows instead of turning with it. */
.daily-core-loop-envelope-top-flap-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 111px;
  filter: drop-shadow(0 2px 2.8px rgb(0 0 0 / 25%));
}

/* The swinging element (daily-core-loop-state.css animates this class) is the box that holds the flap's paper
   and its crease ink together, so the drawn line turns with the paper it is drawn on. */
.daily-core-loop-envelope-top-flap {
  position: absolute;
  inset: 0;
}

.daily-core-loop-envelope-top-flap-paper {
  top: 0;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

/* One stroke per flap. The bottom flap's crease is a sibling of the top flap's wrapper and painted
   before it, so the top flap's paper and line cover it the way overlapping paper does. */
.daily-core-loop-envelope-crease {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.daily-core-loop-envelope-crease path {
  fill: none;
  stroke: var(--daily-core-loop-envelope-ink);
  stroke-width: 1;
}

.daily-core-loop-envelope-open-flap {
  position: absolute;
  top: -108px;
  left: 0;
  width: 290px;
  height: 127px;
  opacity: 0;
  filter: drop-shadow(0 2px 2.7px rgb(0 0 0 / 25%));
}

/* The direct child is the swing element daily-core-loop-state.css animates; the drawing sits inside it. */
.daily-core-loop-envelope-open-flap > div {
  position: absolute;
  inset: 0;
}

/* The two base edges run tangent into 7px arcs that match the body's corner radius, so the standing
   flap melts into the envelope outline instead of ending on a square corner. The first background
   layer is the top light falling across the raised paper. */
.daily-core-loop-envelope-open-flap-paper {
  position: absolute;
  inset: 0;
  background-color: #fff;
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 20%), rgb(102 102 102 / 11%)),
    repeating-linear-gradient(144deg, #fff3e5 0 1.7241px, #fff 1.7241px 3.4483px);
  clip-path: path('M 145 0.5 L 287.26 109.44 A 7 7 0 0 1 290 115 L 290 119 L 0 119 L 0 115 A 7 7 0 0 0 2.74 109.44 Z');
}

.daily-core-loop-envelope-open-flap-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.daily-core-loop-envelope-open-flap-stroke path {
  fill: none;
  stroke: var(--daily-core-loop-envelope-ink);
  stroke-width: 1;
}

/* The clip is the fold. Its lower-left edge lies on the bottom flap's crease line, so the ring
   reads as ink that broke where the paper folds instead of as a whole stamp. */
.daily-core-loop-envelope-postmark--back {
  top: 121px;
  left: 216px;
  width: 61px;
  height: 61px;
  clip-path: polygon(0 36.9%, 38% 0, 100% 52.1%, 83.6% 100%);
}

.daily-core-loop-envelope-postmark--back img {
  top: 11.6px;
  left: -.9px;
  width: 53px;
  height: 53px;
}

.daily-core-loop-envelope-seal {
  position: absolute;
  top: 69px;
  left: 114px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border: 2px solid #000;
  border-radius: 50%;
  background: #323232;
}

/* Solid wax first, then the stripe texture as a 20% overlay (SPEC 4.3) — the texture is felt, not
   read. Folded into the background at full strength it made the seal look like grey metal. */
.daily-core-loop-envelope-seal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(138deg, #000 0 2px, #949494 2px 4px);
  opacity: .2;
}

.daily-core-loop-envelope-seal svg {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  transform: translateX(3px);
}

.daily-core-loop-envelope-seal path {
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Spec §7: the one "My collection" button, centred in the row box, so its centre is x 714.5. */
[data-daily-core-loop-utilities] {
  position: absolute;
  top: var(--daily-core-loop-utility-top);
  left: 548px;
  z-index: 6;
  display: flex;
  justify-content: center;
  width: 333px;
  height: 50px;
  pointer-events: auto;
}

.daily-core-loop-utility-button {
  display: flex;
  flex: 0 0 144px;
  align-items: center;
  justify-content: center;
  width: 144px;
  height: 50px;
  gap: 7px;
  border: 0;
  border-radius: 3px;
  font-family: 'ET Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  opacity: 1;
  cursor: pointer;
}

.daily-core-loop-utility-button:active {
  transform: translateY(1px);
}

.daily-core-loop-utility-button:focus-visible {
  outline: 2px solid var(--daily-core-loop-navy);
  outline-offset: 2px;
}

.daily-core-loop-utility-button img {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
}

.daily-core-loop-utility-button--collected {
  background: var(--daily-core-loop-plum-deep) repeating-linear-gradient(
    135deg,
    var(--daily-core-loop-plum-line) 0 1.33px,
    var(--daily-core-loop-plum-deep) 1.33px 2.67px
  );
}

[data-daily-core-loop-status] {
  position: absolute;
  right: 24px;
  bottom: 20px;
  z-index: 30;
  max-width: min(380px, calc(100% - 48px));
  padding: 8px 12px;
  border-radius: 3px;
  background: rgb(18 18 18 / 86%);
  font: 500 13px/18px 'ET Sans', sans-serif;
  color: #fff;
}

[data-daily-core-loop-status][data-daily-core-loop-status-kind='error'] {
  border-left: 3px solid #fbff81;
}

[data-daily-core-loop-status][hidden] {
  display: none;
}

/* Preserve the signed desktop furniture while keeping the 44px+ collection target inside the
   hard 320px acceptance boundary. The 1440px plane is centred, so the left formula resolves to an
   8px viewport inset before the row is proportionally fitted. */
@media (max-width: 348px) {
  [data-daily-core-loop-utilities] {
    left: calc(728px - 50vw);
    transform: scale(calc((100vw - 16px) / 333px));
    transform-origin: top left;
  }
}

@media (max-width: 1159px) {
  /* The narrow layout pins the envelope below the header. Keep its collection/legal row
     inside the clipped board; short windows can scroll the board. */
  [data-daily-core-loop-home-root] { min-height: 640px; }
  .daily-core-loop-play-button { min-height: calc(44px / var(--daily-core-loop-envelope-scale)); }
}

/* Phone Home fits the actual board; the host article keeps its ordinary scroll owner. */
@media (max-width: 599px) {
  [data-daily-core-loop-home-root]:not(:fullscreen) { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-daily-core-loop-home-root] [data-daily-core-loop-veil],
  [data-daily-core-loop-home-root] .daily-core-loop-play-button::after {
    transition: none;
  }

  /* Spec §5.3 trap: daily-core-loop-state.css clamps every home animation to 1ms, which would turn a nudge into
     a flicker. Under reduced motion there is no nudge at all. */
  [data-daily-core-loop-home-root] .daily-core-loop-play-button.is-nudging,
  [data-daily-core-loop-home-root] .daily-core-loop-envelope-pencil.is-nudging svg {
    animation: none;
  }
}

/* Playing uses the browser viewport, including a short landscape frame; Home keeps its paper fit. */
[data-daily-core-loop-home-root][data-daily-core-loop-state='Playing'] {
  min-height: 0;
}

/* The article owns ordinary scrolling in a resolved public embed. Use the frame's actual height
   for Home's existing responsive layout, rather than creating a second document scroll range. */
body:has([data-game-open-full-page]):not(:has(:fullscreen)) [data-daily-core-loop-home-root] {
  min-height: 0;
}

/* Native fullscreen owns the viewport. Short Home keeps its furniture in a scrollable board. */
[data-daily-core-loop-home-root]:fullscreen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  scroll-padding-block: 96px 16px;
}
[data-daily-core-loop-home-root]:fullscreen[data-daily-core-loop-state='Home'] [data-daily-core-loop-board] {
  min-height: 480px;
}
[data-daily-core-loop-home-root]:fullscreen[data-daily-core-loop-state='Card'] [data-daily-core-loop-board] {
  min-height: 640px;
}
@media (max-width: 1159px) {
  [data-daily-core-loop-home-root]:fullscreen[data-daily-core-loop-state='Home'] [data-daily-core-loop-board] {
    min-height: 640px;
  }
}