/* Daily core loop Month album: the "My collection" folder (SPEC-month-album.html §7-§15, on the 2026-08-19
   folder spec's box, papers, flights and ceremony). */
@font-face {
  font-family: 'ET Sans TV Compressed';
  src: url('cards/fonts/Sans/ET%20Sans%20TV%20Compressed/Web%20Fonts/woff2/ETSansTVCompressed-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: block;
}

/* Spec §8.2 and desktop-home §4: the fit wrapper carries shrinking and growth about its top centre, because the
   folder's own transform belongs to its flights. The script writes --daily-core-loop-folder-fit and the top
   (74px times the scale, increased as needed to clear the shared bar's Close hit target); FOLDER_TOP and the drawn 620px height in daily-core-loop-folder.js match these. */
.daily-core-loop-folder-fit {
  position: absolute;
  top: 74px;
  left: 185px;
  z-index: 30;
  width: 1058px;
  height: var(--daily-core-loop-folder-height, 620px);
  pointer-events: none;
  transform: scale(var(--daily-core-loop-folder-fit, 1));
  transform-origin: 50% 0;
}

.daily-core-loop-folder,
.daily-core-loop-card-neighbour {
  --daily-core-loop-folder-plum-grey: repeating-linear-gradient(135deg, #f9f8ff 0 1.6393px, #e9e4ff 1.6393px 3.2787px);
}

.daily-core-loop-folder {
  --daily-core-loop-folder-chrome: repeating-linear-gradient(135deg, rgb(50 50 50 / 94%) 0 1.4493px, rgb(3 3 3 / 94%) 1.4493px 2.8986px);
  --daily-core-loop-folder-open-duration: 800ms;
  --daily-core-loop-folder-close-duration: 600ms;
  --daily-core-loop-folder-tab-duration: 250ms;
  --daily-core-loop-folder-open-rotate: -2.4deg;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 1058px;
  height: var(--daily-core-loop-folder-height, 620px);
  pointer-events: auto;
  transform-origin: center;
}

.daily-core-loop-folder.is-shown {
  display: block;
}

.daily-core-loop-folder.is-opening {
  animation:
    daily-core-loop-folder-flight var(--daily-core-loop-folder-open-duration) cubic-bezier(.5, .1, .25, 1) both,
    daily-core-loop-folder-fade-in 300ms ease both;
}

.daily-core-loop-folder.is-closing {
  animation:
    daily-core-loop-folder-flight-back var(--daily-core-loop-folder-close-duration) cubic-bezier(.55, .05, .6, 1) both,
    daily-core-loop-folder-fade-out 450ms ease 100ms both;
}

@keyframes daily-core-loop-folder-flight {
  from {
    transform: translate(var(--daily-core-loop-folder-flight-x), var(--daily-core-loop-folder-flight-y))
      scale(var(--daily-core-loop-folder-flight-scale)) rotate(var(--daily-core-loop-folder-open-rotate));
  }
  to { transform: none; }
}

@keyframes daily-core-loop-folder-flight-back {
  from { transform: none; }
  to {
    transform: translate(var(--daily-core-loop-folder-flight-x), var(--daily-core-loop-folder-flight-y))
      scale(var(--daily-core-loop-folder-flight-scale)) rotate(var(--daily-core-loop-folder-open-rotate));
  }
}

@keyframes daily-core-loop-folder-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes daily-core-loop-folder-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

[data-daily-core-loop-home-root].daily-core-loop-folder-open [data-daily-core-loop-utilities] {
  opacity: 0;
  pointer-events: none;
}

[data-daily-core-loop-utilities] {
  transition: opacity 350ms ease;
}

.daily-core-loop-folder-state {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 0s linear var(--daily-core-loop-folder-tab-duration),
    transform 0s linear var(--daily-core-loop-folder-tab-duration);
}

.daily-core-loop-folder-state.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition:
    opacity var(--daily-core-loop-folder-tab-duration) ease,
    transform var(--daily-core-loop-folder-tab-duration) ease;
}

.daily-core-loop-folder.is-settled .daily-core-loop-folder-state {
  will-change: opacity, transform;
}

.daily-core-loop-folder-tab {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 236px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.daily-core-loop-folder-tab:focus-visible {
  outline: 2px solid #130c94;
  outline-offset: 2px;
}

.daily-core-loop-folder-tab-shape,
.daily-core-loop-folder-outline {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.daily-core-loop-folder-tab--close .daily-core-loop-folder-tab-shape {
  background: #030303 var(--daily-core-loop-folder-chrome);
}

.daily-core-loop-folder-tab-label,
.daily-core-loop-folder-active-label {
  position: absolute;
  font-family: 'ET Sans TV Compressed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.38px;
  line-height: normal;
  text-align: center;
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
  white-space: nowrap;
}

.daily-core-loop-folder-tab-label {
  top: 9px;
  left: 0;
  width: 100%;
  color: #fff;
}

/* Spec §8.1: "My collection" in sentence case on the tab at x 96; the capitals' wide tracking
   comes off it. */
.daily-core-loop-folder-active-label {
  top: 14px;
  left: 96px;
  z-index: 2;
  width: 236px;
  font-size: 16px;
  letter-spacing: .4px;
  color: #000;
}

.daily-core-loop-folder-merged,
.daily-core-loop-folder-surface {
  position: absolute;
  inset: 0;
  background-color: var(--daily-core-loop-folder-paper-background);
  background-image: var(--daily-core-loop-folder-paper-texture);
}

.daily-core-loop-folder-merged {
  z-index: 1;
}

.daily-core-loop-folder-surface {
  z-index: 2;
}

.daily-core-loop-folder-state--collected {
  --daily-core-loop-folder-paper-background: #e9e4ff;
  --daily-core-loop-folder-paper-texture: var(--daily-core-loop-folder-plum-grey);
}

.daily-core-loop-folder-tab--close {
  top: 5px;
  left: 904.5px;
  z-index: 3;
  width: 118.952px;
  will-change: transform;
}

/* REQ-2285: a folder scaled below 1 for a narrow board keeps a Close target at least 44 screen pixels
   tall; the invisible hit area grows about the tab's middle as the fit scale shrinks. */
.daily-core-loop-folder-tab--close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: max(100%, calc(44px / var(--daily-core-loop-folder-fit, 1)));
  transform: translateY(-50%);
}

.daily-core-loop-folder-tab--close:active {
  transform: translateY(1px);
}

.daily-core-loop-folder-tab--close .daily-core-loop-folder-tab-label::before {
  content: 'x ';
}

/* Spec §9: the album head, in paper-local pixels. The album box is the folder's own box. */
.daily-core-loop-folder-album {
  position: absolute;
  top: 0;
  left: 0;
  width: 1058px;
  height: var(--daily-core-loop-folder-height, 620px);
}

/* Its faintness is the icon's own stroke-opacity; no opacity is added here. */
.daily-core-loop-folder-album-magnifier {
  position: absolute;
  top: 60px;
  left: 46px;
  width: 54px;
  height: 54px;
  pointer-events: none;
}

.daily-core-loop-folder-album-line {
  position: absolute;
  top: 80px;
  left: 64px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  height: 20px;
}

.daily-core-loop-folder-album-month {
  margin: 0;
  font-family: 'ET Sans TV Compressed', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2.4px;
  color: #000;
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
}

.daily-core-loop-folder-album-divider {
  align-self: center;
  width: 1.5px;
  height: 24px;
  background: rgb(0 0 0 / 55%);
}

.daily-core-loop-folder-album-prompt {
  padding-bottom: 2px;
  font-family: 'ET Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgb(0 0 0 / 78%);
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
}

/* The arrows sit level with the line's middle (y 90); the next arrow ends where the grid ends. */
.daily-core-loop-folder-album-arrow {
  position: absolute;
  top: 75px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #000;
  border-radius: 50%;
  background: #e5e4ec repeating-linear-gradient(135deg, #f5f5f7 0 1.6393px, #e5e4ec 1.6393px 3.2787px);
  cursor: pointer;
}

.daily-core-loop-folder-album-arrow--previous { left: 925px; }
.daily-core-loop-folder-album-arrow--next { left: 963px; }

.daily-core-loop-folder-album-arrow svg {
  width: 14px;
  height: 14px;
}

.daily-core-loop-folder-album-arrow:active:not(:disabled) {
  transform: translateY(1px);
}

.daily-core-loop-folder-album-arrow:disabled {
  opacity: .28;
  cursor: default;
}

.daily-core-loop-folder-album-arrow:focus-visible {
  outline: 2px solid #130c94;
  outline-offset: 2px;
}

.daily-core-loop-folder-album-weekdays {
  position: absolute;
  top: 142px;
  left: 64px;
  display: grid;
  grid-template-columns: repeat(7, 119px);
  column-gap: 16px;
  font-family: 'ET Sans TV Compressed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #000;
  text-align: center;
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
}

.daily-core-loop-folder-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.daily-core-loop-folder-scroll-viewport {
  --daily-core-loop-folder-fade-up: 8px;
  --daily-core-loop-folder-fade-down: 24px;
  --daily-core-loop-folder-rail: 19px;
  --daily-core-loop-folder-fade-top: 0px;
  --daily-core-loop-folder-fade-bottom: 0px;
  position: absolute;
  overflow-y: auto;
  pointer-events: auto;
  scrollbar-color: #848484 transparent;
  scrollbar-width: thin;
  mask-image:
    var(--daily-core-loop-folder-dither-top),
    var(--daily-core-loop-folder-dither-bottom),
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);
  mask-size:
    8px var(--daily-core-loop-folder-fade-up),
    8px var(--daily-core-loop-folder-fade-down),
    calc(100% - var(--daily-core-loop-folder-rail))
      calc(100% - var(--daily-core-loop-folder-fade-top) - var(--daily-core-loop-folder-fade-bottom)),
    var(--daily-core-loop-folder-rail) 100%;
  mask-position:
    0 0,
    0 100%,
    0 var(--daily-core-loop-folder-fade-top),
    100% 0;
  mask-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
  transition: mask-size 150ms ease, mask-position 150ms ease;
}

.daily-core-loop-folder-scroll-viewport.can-scroll-up {
  --daily-core-loop-folder-fade-top: var(--daily-core-loop-folder-fade-up);
}

.daily-core-loop-folder-scroll-viewport.can-scroll-down {
  --daily-core-loop-folder-fade-bottom: var(--daily-core-loop-folder-fade-down);
}

.daily-core-loop-folder-scroll-viewport::-webkit-scrollbar {
  width: 6px;
}

.daily-core-loop-folder-scroll-viewport::-webkit-scrollbar-track {
  margin: 2px 0;
  background: transparent;
}

.daily-core-loop-folder-scroll-viewport::-webkit-scrollbar-thumb {
  border-radius: 42px;
  background: #848484;
}

/* Spec §10.1: the grid window at the paper's top 176 and 14 above its bottom (GRID_TOP and
   GRID_BOTTOM_GAP in daily-core-loop-folder.js); 949 wide, so the 929px month sits inside the dithered fade
   with the scrollbar in the right-hand margin. */
.daily-core-loop-folder-grid-viewport {
  top: 176px;
  bottom: 14px;
  left: 64px;
  width: 949px;
  overscroll-behavior: contain;
}

.daily-core-loop-folder-thumb-grid {
  display: grid;
  grid-template-columns: repeat(7, 119px);
  column-gap: 16px;
  row-gap: 18px;
  padding-top: 4px;
  padding-bottom: 14px;
}

/* Desktop §5.1: the fit writer owns this state using actual board width. */
.daily-core-loop-folder-weeks .daily-core-loop-folder-grid-viewport {
  scroll-snap-type: y mandatory;
}

.daily-core-loop-folder-weeks .daily-core-loop-folder-thumb-grid > * {
  scroll-snap-align: start;
  scroll-margin-top: 4px;
}

/* Spec §10.3: the cell. content-visibility lets the browser skip cells below the fold. */
.daily-core-loop-folder-thumb {
  --daily-core-loop-folder-thumb-shadow: -2px 2px 4px 1px rgb(7 1 106 / 16%);
  position: relative;
  box-sizing: border-box;
  width: 119px;
  height: 162.84px;
  overflow: hidden;
  border: 1px solid #000;
  border-radius: 0 3.65px 0 0;
  box-shadow: var(--daily-core-loop-folder-thumb-shadow);
  cursor: pointer;
  content-visibility: auto;
  contain-intrinsic-size: 119px 162.84px;
}

.daily-core-loop-folder-thumb:focus-visible {
  outline: 2px solid #130c94;
  outline-offset: 2px;
}

.daily-core-loop-folder-thumb--collected {
  color: #000;
  background-color: #fffbf7;
  background-image: repeating-linear-gradient(135deg, #fff3e5 0 1.2821px, #fffbf7 1.2821px 2.5641px);
}

.daily-core-loop-folder-thumb--unplayed {
  color: #575757;
  border-color: #575757;
  background-color: #e9e4ff;
  background-image: var(--daily-core-loop-folder-plum-grey);
}

/* The number only, trimmed to its capitals: no month, no weekday. */
.daily-core-loop-folder-day-number {
  position: absolute;
  top: 16px;
  right: 14px;
  font-family: 'ET Title Slab', serif;
  font-size: 41px;
  font-weight: 700;
  line-height: 41px;
  color: inherit;
  white-space: nowrap;
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
}

/* Today: a navy border and ring, and the number wears PLAY's underline. */
.daily-core-loop-folder-thumb.is-today {
  border-color: #3b3495;
  box-shadow: inset 0 0 0 1px #3b3495, var(--daily-core-loop-folder-thumb-shadow);
}

.daily-core-loop-folder-thumb.is-today .daily-core-loop-folder-day-number {
  padding-bottom: 4px;
  border-bottom: 2px solid #3b3495;
  color: #3b3495;
}

.daily-core-loop-folder-photo-frame {
  position: absolute;
  top: 63px;
  left: 7px;
  box-sizing: border-box;
  width: 104.43px;
  height: 82.57px;
  overflow: hidden;
  border: 0.301px solid #000;
}

.daily-core-loop-folder-photo-frame--empty {
  border: 1px dashed currentcolor;
}

.daily-core-loop-folder-photo-frame--coming-soon,
.daily-core-loop-folder-photo-frame--loading {
  border-style: dashed;
  border-color: #575757;
}

.daily-core-loop-folder-photo-frame--unavailable {
  border-color: #575757;
  background: #e5e4ec;
}

.daily-core-loop-folder-photo-image {
  display: block;
}

.daily-core-loop-folder-photo-image[data-daily-core-loop-folder-crop='native'] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.daily-core-loop-folder-photo-image[data-daily-core-loop-folder-crop='bridge'] {
  position: absolute;
  max-width: none;
}

/* An unplayed day's PLAY, underlined as on the envelope, on hover. */
.daily-core-loop-folder-album-play {
  position: absolute;
  top: 63px;
  left: 7px;
  display: grid;
  place-items: center;
  width: 104.43px;
  height: 82.57px;
  font-family: 'ET Headline', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.daily-core-loop-folder-album-play > span {
  position: relative;
  padding-bottom: 3px;
}

.daily-core-loop-folder-album-play > span::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 46px;
  border-top: 2px solid #3b3495;
  content: '';
  transform: translateX(-50%);
}

.daily-core-loop-folder-thumb--unplayed:hover .daily-core-loop-folder-album-play {
  opacity: 1;
}

/* Blanks before the 1st; faint days (after today, or with no puzzle) show the number only. */
.daily-core-loop-folder-album-blank,
.daily-core-loop-folder-album-faint {
  position: relative;
  box-sizing: border-box;
  width: 119px;
  height: 162.84px;
}

.daily-core-loop-folder-album-faint {
  border: 1px dashed rgb(0 0 0 / 18%);
  border-radius: 0 3.65px 0 0;
  color: rgb(0 0 0 / 30%);
}

/* The lift scrim: one plane-sized depth layer under a lifted card. */
.daily-core-loop-folder-lift-scrim {
  position: absolute;
  z-index: 31;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    circle farthest-corner at 50% 50%,
    rgb(var(--daily-core-loop-veil-rgb, 89 71 54) / 72%) 25%,
    rgb(var(--daily-core-loop-veil-rgb, 89 71 54) / 92%) 100%
  );
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:
    opacity 800ms ease,
    backdrop-filter 800ms ease,
    -webkit-backdrop-filter 800ms ease;
}

.daily-core-loop-folder-card-mode .daily-core-loop-folder-lift-scrim {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.daily-core-loop-folder-card-rising .daily-core-loop-folder-lift-scrim {
  pointer-events: none;
}

.daily-core-loop-folder-card-leaving .daily-core-loop-folder-lift-scrim {
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition-duration: 600ms;
}

.daily-core-loop-folder-card-mode.daily-core-loop-folder-card-leaving.daily-core-loop-folder-ceremony .daily-core-loop-folder-lift-scrim {
  opacity: 1;
  pointer-events: none;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: none;
}

.daily-core-loop-folder-card-leaving.daily-core-loop-folder-ceremony:not(.daily-core-loop-folder-card-mode) .daily-core-loop-folder-lift-scrim {
  transition-duration: 700ms;
}

.daily-core-loop-folder-card-mode .daily-core-loop-folder {
  pointer-events: none;
}

/* Spec §10.3 trap: the hover rise joins the cell's own transition list at the same specificity,
   so the lifted (300ms) and landing (none) transitions below still win. */
.daily-core-loop-folder-thumb {
  transition:
    opacity 450ms ease 150ms,
    border-color 450ms ease 150ms,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.daily-core-loop-folder-thumb:hover {
  box-shadow: -3px 7px 10px 1px rgb(7 1 106 / 20%);
  transform: translateY(-3px);
}

.daily-core-loop-folder-thumb.is-today:hover {
  box-shadow: inset 0 0 0 1px #3b3495, -3px 7px 10px 1px rgb(7 1 106 / 20%);
}

.daily-core-loop-folder-thumb.is-lifted {
  opacity: 0;
  transition: opacity 300ms ease;
}

.daily-core-loop-folder-card-mode [data-daily-core-loop-card-host] {
  z-index: 32;
  opacity: 1;
  pointer-events: auto;
  animation:
    daily-core-loop-folder-card-grow 800ms cubic-bezier(.5, .1, .25, 1) both,
    daily-core-loop-folder-card-fade-in 300ms ease both;
}

.daily-core-loop-folder-card-rising [data-daily-core-loop-card-host] {
  pointer-events: none;
}

.daily-core-loop-folder-card-landing [data-daily-core-loop-card-host] {
  animation: none;
}

.daily-core-loop-folder-card-mode [data-daily-core-loop-card-content] .daily-core-loop-card-whiteout {
  opacity: 0;
  transition: none;
}

.daily-core-loop-folder-card-mode .daily-core-loop-close {
  display: inline-flex;
  z-index: 32;
  pointer-events: auto;
}

.daily-core-loop-folder-card-rising .daily-core-loop-close,
.daily-core-loop-folder-card-leaving .daily-core-loop-close {
  pointer-events: none;
}

.daily-core-loop-folder-card-landing .daily-core-loop-close,
.daily-core-loop-folder-card-leaving .daily-core-loop-close {
  visibility: hidden;
}

.daily-core-loop-folder-card-leaving [data-daily-core-loop-card-host] {
  pointer-events: none;
  animation:
    daily-core-loop-folder-card-shrink 600ms cubic-bezier(.55, .05, .6, 1) both,
    daily-core-loop-folder-card-fade-out 450ms ease 150ms both;
}

@keyframes daily-core-loop-folder-card-grow {
  from {
    transform: translate(var(--daily-core-loop-folder-card-x), var(--daily-core-loop-folder-card-y))
      scale(var(--daily-core-loop-folder-card-scale)) rotate(-2.4deg);
  }
  to { transform: none; }
}

@keyframes daily-core-loop-folder-card-shrink {
  from { transform: none; }
  to {
    transform: translate(var(--daily-core-loop-folder-card-x), var(--daily-core-loop-folder-card-y))
      scale(var(--daily-core-loop-folder-card-scale)) rotate(-2.4deg);
  }
}

@keyframes daily-core-loop-folder-card-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes daily-core-loop-folder-card-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.daily-core-loop-folder-ceremony [data-daily-core-loop-card-host] {
  animation:
    daily-core-loop-folder-card-shrink 600ms cubic-bezier(.55, .05, .6, 1) both,
    daily-core-loop-folder-card-fade-out 350ms ease 200ms both;
}

.daily-core-loop-folder-ceremony [data-daily-core-loop-card-content] .daily-core-loop-card-whiteout {
  opacity: 1;
  transition: opacity 250ms ease;
}

/* Spec §13.1: a first solve lands on a ghost drawn as the unplayed cell. */
.daily-core-loop-folder-slot-ghost {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  color: #575757;
  background-color: #e9e4ff;
  background-image: var(--daily-core-loop-folder-plum-grey);
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms ease 150ms;
}

.daily-core-loop-folder-thumb.is-landing {
  border-color: #575757;
  transition: none;
}

.daily-core-loop-folder-thumb.is-landing .daily-core-loop-folder-slot-ghost {
  opacity: 1;
  transition: none;
}

.daily-core-loop-folder-thumb.is-lit {
  border-color: #e1bf60;
}

.daily-core-loop-folder-thumb.is-today.is-landing,
.daily-core-loop-folder-thumb.is-today.is-lit {
  border-color: #3b3495;
}

.daily-core-loop-folder-thumb.is-lit .daily-core-loop-folder-slot-ghost {
  color: #b58500;
  background-color: #fff8e3;
  background-image: none;
  box-shadow: inset 0 0 20px 5px rgb(255 215 110 / 80%);
  transition: opacity 700ms ease;
}

.daily-core-loop-folder-thumb.is-lit .daily-core-loop-folder-slot-ghost .daily-core-loop-folder-photo-frame--empty {
  border-color: #e1bf60;
  box-shadow: 0 0 10px 2px rgb(255 215 110 / 90%), inset 0 0 12px rgb(255 215 110 / 70%);
}

.daily-core-loop-folder-streak,
.daily-core-loop-folder-bloom,
.daily-core-loop-folder-slot-glow {
  position: absolute;
  z-index: 33;
  pointer-events: none;
}

.daily-core-loop-folder-streak,
.daily-core-loop-folder-bloom {
  mix-blend-mode: screen;
}

.daily-core-loop-folder-streak {
  height: 30px;
  margin-top: -15px;
  animation: daily-core-loop-folder-streak-fly 600ms cubic-bezier(.55, .05, .6, 1) both;
}

.daily-core-loop-folder-streak > i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 68% 50%, #fff 0%, rgb(255 240 190 / 95%) 16%, rgb(255 220 120 / 55%) 42%, rgb(255 205 90 / 0%) 70%);
  animation: daily-core-loop-folder-streak-life 600ms linear both;
}

.daily-core-loop-folder-streak > i::after {
  position: absolute;
  top: 50%;
  left: 62%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px 8px rgb(255 236 170 / 90%);
  content: '';
}

.daily-core-loop-folder-bloom {
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgb(255 236 170 / 85%) 18%, rgb(255 210 100 / 35%) 40%, rgb(255 205 90 / 0%) 65%);
  animation: daily-core-loop-folder-bloom 550ms ease-out both;
}

.daily-core-loop-folder-slot-glow {
  border-radius: 0 3.65px 0 0;
  background: rgb(255 246 214 / 62%);
  box-shadow: 0 0 22px 7px rgb(255 215 110 / 85%);
  animation: daily-core-loop-folder-glow-hold 1050ms ease-out both;
}

@keyframes daily-core-loop-folder-streak-fly {
  from { transform: translate(0, 0) rotate(var(--daily-core-loop-folder-streak-angle)); }
  to {
    transform: translate(var(--daily-core-loop-folder-streak-x), var(--daily-core-loop-folder-streak-y))
      rotate(var(--daily-core-loop-folder-streak-angle));
  }
}

@keyframes daily-core-loop-folder-streak-life {
  0% { opacity: 0; transform: scale(.35, .5); }
  35% { opacity: 1; transform: scale(1, 1); }
  82% { opacity: 1; transform: scale(.9, .9); }
  100% { opacity: 0; transform: scale(.25, .35); }
}

@keyframes daily-core-loop-folder-bloom {
  from { transform: scale(.25); opacity: 1; }
  to { transform: scale(1.5); opacity: 0; }
}

@keyframes daily-core-loop-folder-glow-hold {
  0% { opacity: 0; }
  12%, 45% { opacity: 1; }
  100% { opacity: 0; }
}

/* 28 · PHONE ALBUM. Below 600px the album is drawn for the phone, not scaled down from the desktop.
   The folder hangs 44px from the top, as the game menu's phone folder, with its tab shapes, and stops
   8px above the visible foot. It runs edge to edge: the script makes it 9px wider than the screen on
   each side, so its side lines fall off-screen, and the album box inside starts at the screen's edge.
   The month fills that width in seven columns. The script sets is-phone, the folder's width and height,
   and draws the outline (daily-core-loop-folder.js). */
.daily-core-loop-folder.is-phone {
  --daily-core-loop-folder-phone-gap: 4px;
  --daily-core-loop-folder-phone-margin: 6px;
  /* The folder fills the screen, so a drag on it must not scroll the page under it; a pinch still zooms. */
  touch-action: pinch-zoom;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-active-label {
  top: 14px;
  left: 21px; /* 12 from the screen's edge, plus the folder's 9 off-screen */
  width: 150px;
  font-size: 15px;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-tab--close {
  left: auto;
  right: 21px;
  width: 92px;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-tab--close .daily-core-loop-folder-tab-label {
  letter-spacing: 1.2px;
}

/* The album box is the screen's width: everything in it is measured from the screen's edges. */
.daily-core-loop-folder.is-phone .daily-core-loop-folder-album {
  left: 9px;
  width: calc(100% - 18px);
  height: 100%;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-album-magnifier {
  top: 42px;
  left: 6px;
  width: 40px;
  height: 40px;
}

/* The month, with the prompt under it: the desktop line does not fit a phone's width. */
.daily-core-loop-folder.is-phone .daily-core-loop-folder-album-line {
  top: 54px;
  left: 18px;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  height: auto;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-album-month {
  font-size: 22px;
  letter-spacing: 1.8px;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-album-divider {
  display: none;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-album-prompt {
  padding-bottom: 0;
  font-size: 14px;
}

/* 36px circles, each with a 44px press area: the page sizes boxes border-box, so the ::after is 5px past
   the 34px inside the 1px border. */
.daily-core-loop-folder.is-phone .daily-core-loop-folder-album-arrow {
  top: 52px;
  width: 36px;
  height: 36px;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-album-arrow::after {
  position: absolute;
  inset: -5px;
  content: '';
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-album-arrow svg {
  width: 16px;
  height: 16px;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-album-arrow--previous { left: auto; right: 58px; }
.daily-core-loop-folder.is-phone .daily-core-loop-folder-album-arrow--next { left: auto; right: 14px; }

.daily-core-loop-folder.is-phone .daily-core-loop-folder-album-weekdays {
  top: 102px;
  right: var(--daily-core-loop-folder-phone-margin);
  left: var(--daily-core-loop-folder-phone-margin);
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--daily-core-loop-folder-phone-gap);
  font-size: 12px;
  letter-spacing: .6px;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-grid-viewport {
  --daily-core-loop-folder-rail: 0px;
  top: 118px;
  right: var(--daily-core-loop-folder-phone-margin);
  bottom: 6px;
  left: var(--daily-core-loop-folder-phone-margin);
  width: auto;
  touch-action: pan-y pinch-zoom;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-thumb-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--daily-core-loop-folder-phone-gap);
  row-gap: calc(var(--daily-core-loop-folder-phone-gap) + 2px);
  padding-top: 3px;
  padding-bottom: 8px;
}

/* A day keeps the desktop cell's shape and parts, sized from the column's width. */
.daily-core-loop-folder.is-phone .daily-core-loop-folder-thumb,
.daily-core-loop-folder.is-phone .daily-core-loop-folder-album-blank,
.daily-core-loop-folder.is-phone .daily-core-loop-folder-album-faint {
  width: auto;
  height: auto;
  aspect-ratio: 119 / 162.84;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-day-number {
  top: 6px;
  right: 5px;
  font-size: 17px;
  line-height: 17px;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-thumb.is-today .daily-core-loop-folder-day-number {
  padding-bottom: 2px;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-photo-frame {
  top: auto;
  right: 3px;
  bottom: 3px;
  left: 3px;
  width: auto;
  height: auto;
  aspect-ratio: 104.43 / 82.57;
}

/* No hover on the phone album: a phone keeps the last-tapped spot hovered, which left a day raised (or
   showing PLAY) under the finger after a card landed. At rest a day looks as it does on the desktop. */
.daily-core-loop-folder.is-phone .daily-core-loop-folder-thumb:hover {
  box-shadow: var(--daily-core-loop-folder-thumb-shadow);
  transform: none;
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-thumb.is-today:hover {
  box-shadow: inset 0 0 0 1px #3b3495, var(--daily-core-loop-folder-thumb-shadow);
}

.daily-core-loop-folder.is-phone .daily-core-loop-folder-album-play {
  display: none;
}

/* While the phone album is open the page under it does not scroll (a wheel, a key, a drag on the top bar),
   so the folder stays where it was placed. In fullscreen the home root is the page's scroller. */
html:has([data-daily-core-loop-home-root].daily-core-loop-folder-open .daily-core-loop-folder.is-phone),
[data-daily-core-loop-home-root]:fullscreen.daily-core-loop-folder-open:has(.daily-core-loop-folder.is-phone) {
  overflow: hidden;
}

/* The bar's corner buttons (Enter fullscreen, Open full page) sit at top 41 above the plane. While the
   open album covers their place (always on a phone; on a narrow or short board when the scaled folder
   reaches them, REQ-2285) they step aside; the script sets the class from the geometry it writes. */
[data-daily-core-loop-home-root].daily-core-loop-folder-open:has(.daily-core-loop-folder.daily-core-loop-folder-over-corners) .game-fullscreen,
[data-daily-core-loop-home-root].daily-core-loop-folder-open:has(.daily-core-loop-folder.daily-core-loop-folder-over-corners) .game-open-full-page {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .daily-core-loop-folder-streak,
  .daily-core-loop-folder-bloom,
  .daily-core-loop-folder-slot-glow {
    display: none;
  }

  .daily-core-loop-folder.is-opening,
  .daily-core-loop-folder.is-closing {
    animation-duration: 1ms !important;
  }

  [data-daily-core-loop-utilities],
  .daily-core-loop-folder-state,
  .daily-core-loop-folder-album-play,
  .daily-core-loop-folder-scroll-viewport {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .daily-core-loop-folder-lift-scrim,
  .daily-core-loop-folder-thumb,
  .daily-core-loop-folder-card-mode [data-daily-core-loop-card-host],
  .daily-core-loop-folder-ceremony [data-daily-core-loop-card-host] {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}