/* Daily core loop Home → Opening → Playing → renderer-backed Card transition shell. */

[data-daily-core-loop-home-root] {
  --daily-core-loop-pair-left: 60px;
  --daily-core-loop-pair-top: 104px;
  --daily-core-loop-photo-width: 484px;
  --daily-core-loop-photo-height: 363px;
  /* Board-space lefts: the transition pair is a full-board overlay, so a photograph's `left` is its
     position on the board, not an offset inside a pair-sized box. These two are the design's 1440
     frame; writeLoopGeometry overwrites them on mount and on every resize. */
  --daily-core-loop-photo-original-top: 104px;
  --daily-core-loop-photo-modified-top: 104px;
  --daily-core-loop-whole-photo-height: 355px;
  --daily-core-loop-photo-rest-top: 0px;
  --daily-core-loop-whole-photo-width: 476px;
  --daily-core-loop-photo-rest-left: 0px;
  --daily-core-loop-photo-original-left: 60px;
  --daily-core-loop-photo-modified-left: 552px;
  --daily-core-loop-original-deal-x: 0px;
  --daily-core-loop-original-deal-y: 0px;
  --daily-core-loop-original-peak-x: 0px;
  --daily-core-loop-original-peak-y: 0px;
  --daily-core-loop-modified-deal-x: 0px;
  --daily-core-loop-modified-deal-y: 0px;
  --daily-core-loop-modified-peak-x: 0px;
  --daily-core-loop-modified-peak-y: 0px;
  --daily-core-loop-original-merge-x: 0px;
  --daily-core-loop-original-merge-y: 0px;
  --daily-core-loop-modified-merge-x: 0px;
  --daily-core-loop-modified-merge-y: 0px;
  --daily-core-loop-merge-scale-x: .756;
  --daily-core-loop-merge-scale-y: 1.427;
  --daily-core-loop-collected-x: 0px;
  --daily-core-loop-collected-y: 0px;
  --daily-core-loop-mouth-inset: 0px;
  --daily-core-loop-quit-original-x: var(--daily-core-loop-original-deal-x);
  --daily-core-loop-quit-original-y: var(--daily-core-loop-original-deal-y);
  --daily-core-loop-quit-modified-x: var(--daily-core-loop-modified-deal-x);
  --daily-core-loop-quit-modified-y: var(--daily-core-loop-modified-deal-y);
}

.daily-core-loop-run-date {
  position: absolute;
  top: calc(var(--daily-core-loop-pair-top) - 43px);
  right: 0;
  left: 0;
  color: #fff;
  font: 400 16px/1 'ET Title Slab', Georgia, serif;
  letter-spacing: 1.12px;
  text-align: center;
}

.daily-core-loop-puzzle:has(.image-panel.is-zoomed) .daily-core-loop-run-date {
  opacity: 0;
}

/* The daily core loop controller adapts the existing shared bar only on the integrated loop. The host becomes
   the full-width positioning context while the row keeps the shared component's centred field. */
[data-daily-core-loop-home-root] .shared-game-bar.daily-core-loop-game-bar-adapted {
  width: 100%;
  margin: 0;
  pointer-events: none;
}

[data-daily-core-loop-home-root] .daily-core-loop-game-bar-adapted .shared-game-bar-row {
  width: min(var(--game-bar-field-max-width), calc(100% - var(--game-bar-page-side-padding) * 2));
  margin-inline: auto;
}

[data-daily-core-loop-home-root] .shared-game-bar.daily-core-loop-game-bar-adapted .shared-game-bar-earned,
[data-daily-core-loop-home-root] .shared-game-bar.daily-core-loop-game-bar-adapted .shared-game-bar-tools {
  display: none;
}

[data-daily-core-loop-home-root] .daily-core-loop-game-bar-adapted .shared-game-bar-title {
  position: relative;
  margin: 0;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}

[data-daily-core-loop-home-root] .game-sound-tab {
  position: absolute;
  top: 0;
  right: calc((100% - min(var(--game-bar-field-max-width), 100% - var(--game-bar-page-side-padding) * 2)) / 2 + 10px);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 33px;
  padding: 0 16px;
  border: 0;
  border-radius: 0 0 0 4px;
  background: var(--game-bar-texture-chrome-black);
  color: #fff;
  font: 400 16px/21px var(--game-bar-font-title-slab);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}
[data-daily-core-loop-home-root] .game-sound-tab svg {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
}
[data-daily-core-loop-home-root] .game-sound-tab:active > * { transform: translateY(1px); }
[data-daily-core-loop-home-root] .game-sound-tab .game-sound-icon--off,
[data-daily-core-loop-home-root] .game-sound-tab.muted .game-sound-icon--on { display: none; }
[data-daily-core-loop-home-root] .game-sound-tab.muted .game-sound-icon--off { display: block; }
[data-daily-core-loop-home-root] .game-sound-tab-label { display: grid; }
[data-daily-core-loop-home-root] .game-sound-tab-label > span { grid-area: 1 / 1; }
[data-daily-core-loop-home-root] .game-sound-tab-word--off,
[data-daily-core-loop-home-root] .game-sound-tab.muted .game-sound-tab-word--on { visibility: hidden; }
[data-daily-core-loop-home-root] .game-sound-tab.muted .game-sound-tab-word--off { visibility: visible; }
@media (max-width: 599px) {
  [data-daily-core-loop-home-root] .daily-core-loop-game-bar-adapted .shared-game-bar-row {
    width: calc(100% - 16px);
    padding-left: 0;
  }
  [data-daily-core-loop-home-root] .game-sound-tab { right: 8px; }
}
@media (max-width: 359px) {
  [data-daily-core-loop-home-root] .game-sound-tab { padding: 0 12px; }
  [data-daily-core-loop-home-root] .game-sound-tab-label { display: none; }
}

/* Navigation has its own top-right row, leaving the menu and Sound tabs reachable on phones. */
[data-daily-core-loop-home-root] .game-open-full-page {
  position: absolute;
  top: 41px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: var(--game-bar-texture-chrome-black);
  color: #fff;
  font: 400 14px/20px var(--game-bar-font-title-slab);
  cursor: pointer;
  pointer-events: auto;
}
[data-daily-core-loop-home-root] .game-open-full-page:hover {
  background: #343b35;
}
[data-daily-core-loop-home-root] .game-open-full-page:focus-visible {
  outline: 3px solid #f2d56b;
  outline-offset: 3px;
}

[data-daily-core-loop-home-root] .game-fullscreen {
  position: absolute;
  top: 41px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: var(--game-bar-texture-chrome-black);
  color: #fff;
  font: 400 14px/20px var(--game-bar-font-title-slab);
  cursor: pointer;
  pointer-events: auto;
}
[data-daily-core-loop-home-root] .game-fullscreen:hover { background: #343b35; }
[data-daily-core-loop-home-root] .game-fullscreen:focus-visible {
  outline: 3px solid #f2d56b;
  outline-offset: 3px;
}
[data-daily-core-loop-home-root] .game-fullscreen:disabled {
  opacity: .6;
  cursor: default;
}
/* CARD SIZE ON IPHONE: a touch screen shows one corner button (daily-core-loop-controls.js); the buttons'
   own display would otherwise outrank their hidden attribute. */
[data-daily-core-loop-home-root] :is(.game-fullscreen, .game-open-full-page)[hidden] { display: none; }
/* Corner controls have no animated properties; visibility follows its owner in the same task. */
[data-daily-core-loop-home-root] .game-fullscreen,
[data-daily-core-loop-home-root] .game-open-full-page {
  transition-property: none;
}
[data-daily-core-loop-home-root]:fullscreen .game-fullscreen { position: fixed; }
[data-daily-core-loop-home-root].daily-core-loop-short-playing .game-fullscreen {
  top: 93px;
  right: 8px;
  left: auto;
  max-width: calc(100% - 140px);
  font-size: 12px;
  line-height: 12px;
}
@media (min-width: 600px) {
  [data-daily-core-loop-home-root].daily-core-loop-short-playing .game-fullscreen {
    top: 41px;
    right: auto;
    left: 88px;
    max-width: none;
    font-size: 14px;
    line-height: 20px;
  }
}
@media (min-width: 1160px) {
  /* CARD SIZE ON IPHONE: only a shown Open full page moves Quit; a touch screen hides it where fullscreen works. */
  [data-daily-core-loop-home-root][data-daily-core-loop-state='Playing']:not(.daily-core-loop-short-playing):has(.game-open-full-page:not([hidden])) .daily-core-loop-quit {
    top: 41px;
    right: 240px;
  }
}
@media (max-width: 350px) {
  [data-daily-core-loop-home-root] .game-fullscreen,
  [data-daily-core-loop-home-root] .game-open-full-page {
    padding-inline: 8px;
    font-size: 12px;
  }
}
@media (max-width: 599px) {
  /* Localized actions can wrap while preserving the two readable, separate header controls. */
  [data-daily-core-loop-home-root]:not(.daily-core-loop-short-playing) .game-fullscreen,
  [data-daily-core-loop-home-root]:not(.daily-core-loop-short-playing) .game-open-full-page {
    max-width: calc(50% - 16px);
    font-size: 12px;
    line-height: 12px;
  }
}
/* Only Home's envelope transforms ease across the actual change. Photos and hit geometry update together. */
[data-daily-core-loop-home-root].daily-core-loop-fullscreen-motion .daily-core-loop-envelope-anchor {
  transition: transform .3s ease-in-out;
}
/* Measured layout selection owns this glide; the later phone photo/card owners use the same
   retained nodes. The figure owns each width and the grid owns the second photo's position;
   animating only their wrapper leaves the photographs jumping inside a moving box.
   These rules do not mount a card or replace the engine's photo-space transform. */
.daily-core-loop-mode-morph [data-daily-core-loop-transition-photo],
.daily-core-loop-mode-morph .daily-core-loop-puzzle .detective-images,
.daily-core-loop-mode-morph .daily-core-loop-puzzle .image-figure,
.daily-core-loop-mode-morph .daily-core-loop-puzzle .image-panel {
  transition: left .45s cubic-bezier(.4,.2,.2,1), top .45s cubic-bezier(.4,.2,.2,1),
    width .45s cubic-bezier(.4,.2,.2,1), height .45s cubic-bezier(.4,.2,.2,1),
    border-radius .45s ease, box-shadow .45s ease,
    grid-template-columns .45s cubic-bezier(.4,.2,.2,1);
}

.daily-core-loop-mode-morph [data-daily-core-loop-transition-photo] img {
  transition: transform .45s cubic-bezier(.4,.2,.2,1);
}

.daily-core-loop-mode-morph .daily-core-loop-quit {
  transition: top .45s cubic-bezier(.4,.2,.2,1);
}

.daily-core-loop-mode-morph .daily-core-loop-player-hud > *,
.daily-core-loop-mode-morph .shared-game-bar-earned > *,
.daily-core-loop-mode-morph .shared-game-bar-tools > * {
  opacity: 0 !important;
  transition: opacity .12s ease !important;
}

.daily-core-loop-phone-layout [data-daily-core-loop-card-host],
.daily-core-loop-mode-morph [data-daily-core-loop-card-host] {
  transition: left .45s cubic-bezier(.4,.2,.2,1), width .45s cubic-bezier(.4,.2,.2,1),
    height .45s cubic-bezier(.4,.2,.2,1);
}

.daily-core-loop-phone-layout [data-daily-core-loop-card-content],
.daily-core-loop-mode-morph [data-daily-core-loop-card-content] {
  transition: transform .45s cubic-bezier(.4,.2,.2,1);
}

.daily-core-loop-mode-morph.daily-core-loop-phone-layout[data-daily-core-loop-state='Playing'] [data-daily-core-loop-card-host]:not([hidden]) {
  animation: daily-core-loop-phone-card-in .45s ease both;
}

.daily-core-loop-mode-morph.daily-core-loop-from-phone[data-daily-core-loop-state='Playing'] [data-daily-core-loop-card-host]:not([hidden]) {
  animation: daily-core-loop-phone-card-out .25s ease both;
}

@keyframes daily-core-loop-phone-card-in {
  from { opacity: 0; transform: scale(.96); }
}

@keyframes daily-core-loop-phone-card-out {
  to { opacity: 0; transform: scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  [data-daily-core-loop-home-root].daily-core-loop-fullscreen-motion .daily-core-loop-envelope-anchor {
    transition: none;
  }
}

[data-daily-core-loop-home-root][data-daily-core-loop-veil-visible='true'] .shared-game-bar {
  --game-bar-colour-body-ink: #fff;
  --game-bar-colour-streak-day-done: #9be08a;
}

/* Garden spec §12. At night the garden is dark before any veil comes down, so the bar takes the
   veil's two inks then too (daily-core-loop-garden.js sets daily-core-loop-garden-night). With the veil down the ink keeps
   the veil's timing, white at once; otherwise it turns over 2 s, at dusk and dawn and after every
   Quit and Close. The narrow bar has two tabs over the garden; only the host stacking rule follows. */
@media (min-width: 1160px) {
  [data-daily-core-loop-home-root].daily-core-loop-garden-night .shared-game-bar {
    --game-bar-colour-body-ink: #fff;
    --game-bar-colour-streak-day-done: #9be08a;
  }
  [data-daily-core-loop-home-root]:not([data-daily-core-loop-veil-visible='true']) .shared-game-bar,
  [data-daily-core-loop-home-root]:not([data-daily-core-loop-veil-visible='true']) .shared-game-bar * {
    transition: color 2s ease, border-color 2s ease;
  }
}

@media (max-width: 1159px) {
  [data-daily-core-loop-home-root] [data-shared-game-bar-host] { z-index: 40; }
}

/* A full-board overlay, the same box as the design's `.pair { position: absolute; inset: 0 }`. The
   box has to be the board because the deal's cut is measured from the BOARD's bottom edge —
   `--daily-core-loop-mouth-inset` is `boardHeight − envelopeTop` (SPEC §6.1) — so `inset(0 0 <mouth> 0)` lands
   the visible edge exactly on the envelope's top edge, and the clip's own top edge stays clear of
   the arc's peak (which is held to 8px below the top of the board, well above the pair's row). On a
   box only as tall as the photographs the same number cut a window in mid-air and took the top off
   the flight — ticket 1 §4. Each photograph carries its own board position instead. */
[data-daily-core-loop-transition-pair] {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
}

[data-daily-core-loop-transition-pair][hidden],
[data-daily-core-loop-card-host][hidden],
[data-daily-core-loop-quit][hidden] {
  display: none;
}

[data-daily-core-loop-transition-photo] {
  position: absolute;
  top: var(--daily-core-loop-photo-original-top);
  left: var(--daily-core-loop-photo-original-left);
  width: var(--daily-core-loop-photo-width);
  height: var(--daily-core-loop-photo-height);
  margin: 0;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / 55%);
  will-change: transform, opacity;
}

[data-daily-core-loop-transition-photo='modified'] {
  top: var(--daily-core-loop-photo-modified-top);
  left: var(--daily-core-loop-photo-modified-left);
}

[data-daily-core-loop-transition-photo] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

/* The win's whiten (SPEC §12). The prototype reaches its cover over the photograph's frame with
   inset -4px; here the frame is already #fff and the photo clips to its padding box, so inset 0
   paints the same pixels. */
[data-daily-core-loop-transition-photo]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

/* The found rings are mirrored out of the game host at the win (game-core.js owns the originals, and
   the host is hidden one frame after the tenth find). They sit ABOVE the white cover and dissolve on
   their own fade, so the rings go with the photograph instead of surviving it and being stretched
   into the card's shape. */
.daily-core-loop-transition-marks {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 1;
  pointer-events: none;
  transition: opacity 500ms ease;
}


/* Phone frames hold screen-pixel border room; their two paints stay above the whole image/rings.
   TOUCH PLAY: a touch round on a desktop board (a tablet held sideways) uses the phone's frames. */
:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play)[data-daily-core-loop-home-root] [data-daily-core-loop-transition-photo],
:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play) .daily-core-loop-puzzle .image-panel,
:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play) .daily-core-loop-puzzle .image-panel:hover {
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  clip-path: inset(0);
}

:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play) [data-daily-core-loop-transition-photo]::before,
:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play) [data-daily-core-loop-transition-photo]::after,
:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play) .daily-core-loop-puzzle .image-panel::before,
:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play) .daily-core-loop-puzzle .image-panel::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: none;
  pointer-events: none;
  transition: none;
  animation: none !important;
}

:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play) [data-daily-core-loop-transition-photo]::before,
:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play) .daily-core-loop-puzzle .image-panel::before {
  border: 2px solid #fff;
  z-index: 2;
}

:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play) [data-daily-core-loop-transition-photo]::after,
:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play) .daily-core-loop-puzzle .image-panel::after {
  border: .75px solid #000;
  opacity: 0;
  z-index: 3;
}

:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play) [data-daily-core-loop-transition-photo] img,
:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play) .daily-core-loop-transition-marks {
  position: absolute;
  left: var(--daily-core-loop-photo-rest-left);
  top: var(--daily-core-loop-photo-rest-top);
  width: var(--daily-core-loop-whole-photo-width);
  height: var(--daily-core-loop-whole-photo-height);
}

:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play) .daily-core-loop-transition-marks { z-index: 1; }
:is(.daily-core-loop-phone-layout, .daily-core-loop-touch-play) .daily-core-loop-puzzle .ghost-cursor { display: none; }


.daily-core-loop-phase-flip .daily-core-loop-envelope-flip {
  transform: rotateY(180deg);
  transition: transform 750ms cubic-bezier(.4, .2, .2, 1);
}

.daily-core-loop-phase-flip [data-daily-core-loop-utilities],
.daily-core-loop-phase-flip .daily-core-loop-play-button {
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}

/* DESKTOP NARROW WINDOW: a narrow window with a mouse also plays in the phone layout, and keeps its twin pointer
   there. The engine shows the twin only for a mouse or pen, so a finger still never gets one. */
@media (pointer: fine) {
  .daily-core-loop-phone-layout .daily-core-loop-puzzle .ghost-cursor { display: block; }
}

/* REQ-1743 — a Collected replay enters Playing straight out of the lifted card, so it never runs the
   flip → open → deal sequence that sinks the Home shell for an ordinary entry, and the envelope and the
   Collected/Unopened buttons stayed visible behind the board (score contrast suffered over the envelope).
   This rule is that sequence's END STATE and nothing else. Deliberately NOT `daily-core-loop-phase-flip` +
   `daily-core-loop-phase-deal`: those carry the entrance animations — the envelope turn and the two photo deal
   keyframes — and on a replay the pair flies out of the card instead (daily-core-loop-phase-replay/-unmerge), so
   re-running the deal would fight it. `transition: none` for the same reason the review poses use it:
   the shell was never on screen during this run, so there is nothing to animate away. */
[data-daily-core-loop-home-root].daily-core-loop-phase-home-sunk [data-daily-core-loop-utilities],
[data-daily-core-loop-home-root].daily-core-loop-phase-home-sunk .daily-core-loop-envelope-anchor {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.daily-core-loop-phase-open .daily-core-loop-envelope-seal {
  animation: daily-core-loop-seal-break 300ms ease forwards;
}

.daily-core-loop-phase-open .daily-core-loop-envelope-open-flap {
  opacity: 1;
}

.daily-core-loop-phase-open .daily-core-loop-envelope-top-flap {
  transform-origin: 50% 0;
  animation: daily-core-loop-open-top 500ms cubic-bezier(.55, 0, .85, .55) 180ms both;
}

.daily-core-loop-phase-open .daily-core-loop-envelope-open-flap > div {
  transform-origin: 50% 85.2%;
  animation: daily-core-loop-open-inside 500ms cubic-bezier(.15, .45, .45, 1) 620ms both;
}

/* Review URLs are settled inspection poses, not paused entrance animations. Pin the same production
   end values immediately so a screenshot never catches the flip, flap, veil, or furniture halfway. */
[data-daily-core-loop-home-root][data-daily-core-loop-review-pose='true'][data-daily-core-loop-review-state='Opening'] [data-daily-core-loop-utilities],
[data-daily-core-loop-home-root][data-daily-core-loop-review-pose='true'][data-daily-core-loop-review-state='Playing'] [data-daily-core-loop-utilities],
[data-daily-core-loop-home-root][data-daily-core-loop-review-pose='true'][data-daily-core-loop-review-state='Card'] [data-daily-core-loop-utilities] {
  opacity: 0;
  transition: none;
}

[data-daily-core-loop-home-root][data-daily-core-loop-review-pose='true'][data-daily-core-loop-review-state='Opening'] .daily-core-loop-envelope-flip {
  transform: rotateY(180deg);
  transition: none;
}

[data-daily-core-loop-home-root][data-daily-core-loop-review-pose='true'][data-daily-core-loop-review-state='Opening'] .daily-core-loop-envelope-seal {
  opacity: 0;
  transform: scale(.55);
  animation: none;
}

[data-daily-core-loop-home-root][data-daily-core-loop-review-pose='true'][data-daily-core-loop-review-state='Opening'] .daily-core-loop-envelope-top-flap {
  transform: perspective(700px) rotateX(90deg);
  animation: none;
}

[data-daily-core-loop-home-root][data-daily-core-loop-review-pose='true'][data-daily-core-loop-review-state='Opening'] .daily-core-loop-envelope-open-flap > div {
  transform: perspective(700px) rotateX(0deg);
  animation: none;
}

[data-daily-core-loop-home-root][data-daily-core-loop-review-pose='true'][data-daily-core-loop-review-state='Playing'] .daily-core-loop-envelope-anchor,
[data-daily-core-loop-home-root][data-daily-core-loop-review-pose='true'][data-daily-core-loop-review-state='Card'] .daily-core-loop-envelope-anchor {
  opacity: 0;
  transform: translateY(118px) scale(var(--daily-core-loop-envelope-scale));
  transition: none;
}

[data-daily-core-loop-home-root][data-daily-core-loop-review-pose='true'][data-daily-core-loop-review-state='Opening'] [data-daily-core-loop-veil],
[data-daily-core-loop-home-root][data-daily-core-loop-review-pose='true'][data-daily-core-loop-review-state='Playing'] [data-daily-core-loop-veil],
[data-daily-core-loop-home-root][data-daily-core-loop-review-pose='true'][data-daily-core-loop-review-state='Card'] [data-daily-core-loop-veil] {
  transition: none;
}

/* The Card pose pins BOTH entrances on this screen — the card host's settle and Close's fade-up — so
   a review screenshot never catches either halfway. */
[data-daily-core-loop-home-root][data-daily-core-loop-review-pose='true'][data-daily-core-loop-review-state='Card'] [data-daily-core-loop-card-host],
[data-daily-core-loop-home-root][data-daily-core-loop-review-pose='true'][data-daily-core-loop-review-state='Card'] .daily-core-loop-close {
  animation: none;
}

/* THE DEAL'S CLIP IS WRITTEN FROM JAVASCRIPT, NOT ANIMATED HERE — see startDealClip() in
   daily-core-loop-state.js. It was `animation: daily-core-loop-pair-clip 1170ms linear both`. Chrome is rolling out
   CompositeClipPathAnimation as a server-side field trial, which runs an ANIMATED clip-path on the
   compositor thread, and there it fails to clip the photographs — they are animating themselves, so
   they get their own layers. The clip computes correctly and is simply not painted, so the pair
   appeared in the middle of the envelope's face. A clip-path that is SET is painted correctly.
   Do not bring the keyframes back, and do not reach for a `transition` on clip-path instead: a
   transition takes the same compositor path (SPEC §6.1's trap). */
.daily-core-loop-phase-deal [data-daily-core-loop-transition-pair] {
  opacity: 1;
}

/* ORDER-DEPENDENT — the two rules below must stay ABOVE the `.daily-core-loop-phase-settled` block further down
   this file. REQ-1587 keeps `daily-core-loop-phase-deal` on the root for the whole win beat, so these keyframes
   are still declared and still matching when the win plays; the only thing switching them off is
   `.daily-core-loop-phase-settled [data-daily-core-loop-transition-photo] { animation: none }`, and it wins on SOURCE ORDER
   alone — both selectors are one class plus one attribute selector, specificity (0,2,0). Move the
   settled block above this one and the deal animations restart at time zero over the whitening pair.
   Held by "the settled rules sit after the deal rules" in the daily-core-loop-state geometry unit test (tests/unit/game-ui/) and,
   in Chromium, by qa:daily-core-loop-run's "completion restarted the pair deal animations before glow". */

.daily-core-loop-phase-deal [data-daily-core-loop-transition-photo='original'] {
  animation: daily-core-loop-deal-original 1050ms cubic-bezier(.5, .1, .25, 1) both;
}

.daily-core-loop-phase-deal [data-daily-core-loop-transition-photo='modified'] {
  animation: daily-core-loop-deal-modified 1050ms cubic-bezier(.5, .1, .25, 1) 120ms both;
}

.daily-core-loop-phase-deal .daily-core-loop-envelope-anchor {
  opacity: 0;
  transform: translateY(118px) scale(var(--daily-core-loop-envelope-scale));
  transition:
    transform 550ms cubic-bezier(.5, .1, .6, 1) 400ms,
    opacity 500ms ease 450ms;
}

/* The pair stays visible for the whole win beat. It carried `clip-path: none; animation: none` while
   the deal's clip was a keyframe — a CSS declaration cannot switch off an inline clip-path written
   by script, so the guarantee lives in handleRunComplete's clearDealClip() call instead, where it
   can also stop a running writer.

   ORDER-DEPENDENT — this block must stay BELOW the `.daily-core-loop-phase-deal` photo/pair rules above. Its
   `animation: none` beats theirs only because it comes later at equal specificity (0,2,0), and
   `daily-core-loop-phase-deal` is deliberately never taken off during the win, so their declarations are still
   live at this point. See the matching note at the deal rules for what breaks and what holds it. */
.daily-core-loop-phase-settled [data-daily-core-loop-transition-pair] {
  opacity: 1;
}

.daily-core-loop-phase-settled [data-daily-core-loop-transition-photo] {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Scoped to the home root on purpose (REQ-1472): inside it the game host IS the daily core loop board, so it
   is a full-bleed absolute stage. The legacy/admin route re-parents the very same element to
   document.body, where an unscoped rule turned it into an absolute overlay of the whole page —
   colliding with the sticky admin nav and leaving the document with no scroll range. Out there it
   must lay out in normal flow. */
[data-daily-core-loop-home-root] [data-daily-core-loop-game-host] {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
}

/* Deliberately UNSCOPED, and the sheet's sole copy since REQ-1484 removed the byte-identical
   duplicate from daily-core-loop-home.css. The container ships `hidden` in index.html and the
   current Playing/editor/admin host keeps this rule until its mount clears the flag. Scoping it
   to the home root would leak the container onto the page before activation (REQ-1472 D-01). */
[data-daily-core-loop-game-host][hidden] {
  display: none;
}

.daily-core-loop-action {
  border: 0;
  background: transparent;
  font: 500 14px/20px 'ET Sans', sans-serif;
  color: #fff;
  cursor: pointer;
}

.daily-core-loop-action::after {
  content: '';
  display: block;
  width: 100%;
  border-top: 1px solid currentcolor;
}

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

.daily-core-loop-action:focus-visible {
  outline: 2px solid #fbff81;
  outline-offset: 4px;
}

/* REQ-1591: every ring above is for a player who reached the control with the keyboard. The loop also
   places focus with SCRIPT at each state change — a `?state=…` deep link, the return to Home, the card
   reveal — and Chromium matches `:focus-visible` on any scripted `.focus()`, including one that
   follows a mouse click, so those rings were drawn without a key ever going down. Only the element
   `focusWithoutUnearnedRing()` (daily-core-loop-state.js) is holding carries this mark, and only until the first
   keydown or until it loses focus, so tabbing keeps every ring above and only the unearned ones are
   suppressed. Scoped through the home root so it outranks the per-control rules in daily-core-loop-home.css
   whatever order the two sheets load in. */
[data-daily-core-loop-home-root] [data-daily-core-loop-quiet-focus]:focus-visible {
  outline: none;
}

.daily-core-loop-quit {
  position: absolute;
  top: 60px;
  right: var(--daily-core-loop-pair-left);
  z-index: 7;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 8px;
}

/* REQ-2405: below 1160px the live round's date line sits under the corner controls (state measures
   them for the pair's top); Quit takes that line's right end, where the date sits 43px above the pair. */
@media (max-width: 1159px) {
  .daily-core-loop-quit { top: calc(var(--daily-core-loop-pair-top) - 44px); right: 8px; }
}

/* `hidden` is how the loop retires Quit outside Playing, and an author `display` outranks that
   attribute's UA rule — so the flex box is scoped to the shown state. `.daily-core-loop-close` dodges the
   same trap by keying its own display off `.daily-core-loop-phase-reveal`. */
.daily-core-loop-quit:not([hidden]) {
  display: flex;
}

/* The shared `.daily-core-loop-action::after` underline is a border under the WHOLE button, which with an
   icon in the box would rule under the cross too. Quit turns it off and underlines its label instead,
   exactly as Close does. Sizes are the prototype's `.quit`: a 13px cross at .75, a 6px gap, the label
   underlined from-font. */
.daily-core-loop-quit::after {
  display: none;
}

.daily-core-loop-quit svg {
  width: 13px;
  height: 13px;
  opacity: .75;
}

.daily-core-loop-quit span {
  font-weight: 700;
  text-decoration: underline;
  text-underline-position: from-font;
}

.daily-core-loop-phase-glow [data-daily-core-loop-transition-photo] {
  box-shadow: 0 0 60px 12px rgb(255 255 255 / 85%);
  transition: box-shadow 850ms ease;
}

.daily-core-loop-phase-glow [data-daily-core-loop-transition-photo]::after {
  opacity: 1;
}

.daily-core-loop-phase-glow .daily-core-loop-transition-marks {
  opacity: 0;
}

.daily-core-loop-phase-merge [data-daily-core-loop-transition-photo='original'] {
  animation: daily-core-loop-merge-original 800ms cubic-bezier(.55, .05, .3, 1) both;
}

.daily-core-loop-phase-merge [data-daily-core-loop-transition-photo='modified'] {
  animation: daily-core-loop-merge-modified 800ms cubic-bezier(.55, .05, .3, 1) both;
}

/* The pair is retired by display, not by fading out of the merge: it has to land on the card's box
   white and fully opaque. The guard keys on `daily-core-loop-phase-replay` — the TRANSIENT class settleReplay
   removes — and deliberately not on `daily-core-loop-phase-unmerge`, which nothing removes until the next
   clearPhaseClasses and so is still on the root at every win after the first Replay. Mirrors the
   design's `.p-card .pair { display: none }` / `.p-replay .pair { display: block }` pair. */
.daily-core-loop-phase-card:not(.daily-core-loop-phase-replay) [data-daily-core-loop-transition-pair] {
  display: none;
}

/* The geometry pass fits artwork to the measured footer and visible header. */
[data-daily-core-loop-card-host] {
  --daily-core-loop-completed-card-width: var(--daily-core-loop-fitted-card-width, 366px);
  position: absolute;
  top: var(--daily-core-loop-fitted-card-top, 79px);
  left: calc((100% - var(--daily-core-loop-completed-card-width)) / 2);
  z-index: 8;
  width: var(--daily-core-loop-completed-card-width);
  height: calc(var(--daily-core-loop-completed-card-width) * 518 / 366);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
}

[data-daily-core-loop-card-host].daily-core-loop-card-measuring {
  display: block;
  opacity: 0 !important;
  pointer-events: none;
}

[data-daily-core-loop-card-content] {
  position: absolute;
  inset: 0;
  width: 366px;
  height: 518px;
  /* Safari 16 cannot divide two lengths in calc(). Geometry already supplies the ratio. */
  transform: scale(var(--daily-core-loop-collected-card-scale, 1));
  transform-origin: top left;
  perspective: 1400px;
  box-shadow: 0 18px 48px -18px rgb(0 0 0 / 70%);
}

/* The clip owner stays stationary; only its retained artwork flies. */
[data-daily-core-loop-card-drawing] {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
}
[data-daily-core-loop-card-drawing] > [data-daily-core-loop-card-content] { pointer-events: auto; }

/* The footer's own width does not depend on artwork scale. Its height does when the questions go under the
   card: the geometry pass measures them per card and window size, at their narrowest (320 under, 240
   beside), and writes the height here, so the fit never feeds back on itself. */
.daily-core-loop-card-footer {
  box-sizing: border-box;
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(560px, calc(100vw - 16px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  visibility: hidden;
}
/* The reduced-motion clamp gives every element a 1ms transition, and the initial transition-property
   is `all`, so the footer's hidden-to-visible switch, and the one Close inherits from it, would wait a
   frame. An unavailable Card reveals and focuses Close in the same task, and Chromium refuses focus on
   a still-hidden Close. Nothing in the footer animates, so its visibility switches at once. */
.daily-core-loop-card-footer,
.daily-core-loop-card-footer * { transition-property: none; }
.daily-core-loop-phase-reveal .daily-core-loop-card-footer,
.daily-core-loop-folder-card-mode .daily-core-loop-card-footer { visibility: visible; }
.daily-core-loop-card-footer [hidden] { display: none; }
.daily-core-loop-secondary-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}
/* REQ-2264 (SD-100 card controls §9.2): the desktop footer's rows, top to bottom, are the questions
   14 under the card (on a window too narrow for them beside it), the Next button 8 below (only on a
   window too narrow for the small cards), and Close's row 8 below. Each row brings its own margin, so an
   empty next area adds nothing: the footer is 8 + 44 = 52 without questions and 14 + 112 + 8 + 44 = 178
   with them. The card is fitted to the footer without them, plus their room on a window where they go
   under it, so every card in a window is the same size. The phone keeps its own row. */
[data-daily-core-loop-home-root]:not(.daily-core-loop-phone-layout) .daily-core-loop-card-footer { gap: 0; padding-top: 0; }
[data-daily-core-loop-home-root]:not(.daily-core-loop-phone-layout) .daily-core-loop-card-footer > *,
[data-daily-core-loop-home-root]:not(.daily-core-loop-phone-layout) .daily-core-loop-card-footer .daily-core-loop-next-button { margin-top: 8px; }
[data-daily-core-loop-home-root]:not(.daily-core-loop-phone-layout) .daily-core-loop-card-footer > .daily-core-loop-next-area { margin-top: 0; }
[data-daily-core-loop-home-root]:not(.daily-core-loop-phone-layout) .daily-core-loop-card-footer > .daily-core-loop-card-questions { margin-top: 14px; }
/* The next area's status line hangs under the last row, outside the height the fit measures, so its
   loading and failure lines never refit the card (§6.3). Its 16 px line fits the 16 px foot clearance. */
[data-daily-core-loop-home-root]:not(.daily-core-loop-phone-layout) .daily-core-loop-card-footer .daily-core-loop-next-status {
  position: absolute;
  top: 100%;
  left: 50%;
  width: max-content;
  max-width: 100%;
  margin: 0;
  line-height: 16px;
  transform: translateX(-50%);
}
/* Close waits, unseen and inert (the script sets inert), while the questions are to come; it then
   plays its own entrance when it arrives, with the questions or alone. */
.daily-core-loop-card-footer.daily-core-loop-card-close-waiting .daily-core-loop-secondary-actions { visibility: hidden; }
.daily-core-loop-card-footer.daily-core-loop-card-close-waiting .daily-core-loop-close { animation: none; }
.daily-core-loop-card-footer.daily-core-loop-card-close-late .daily-core-loop-close { animation-delay: 0ms; }
/* When the questions under the card go, their room stays (the card keeps its size) and the rows under
   it slide up by it, 150 ms after the questions start to fade (a script wait, so reduced motion keeps
   it). When they never came, Close is already in place as it arrives. */
[data-daily-core-loop-home-root]:not(.daily-core-loop-phone-layout):not(.daily-core-loop-card-questions-beside) .daily-core-loop-card-questions-gone .daily-core-loop-secondary-actions,
[data-daily-core-loop-home-root]:not(.daily-core-loop-phone-layout):not(.daily-core-loop-card-questions-beside) .daily-core-loop-card-questions-gone .daily-core-loop-next-button,
[data-daily-core-loop-home-root]:not(.daily-core-loop-phone-layout):not(.daily-core-loop-card-questions-beside) .daily-core-loop-card-questions-gone .daily-core-loop-next-status,
[data-daily-core-loop-home-root]:not(.daily-core-loop-phone-layout):not(.daily-core-loop-card-questions-beside) .daily-core-loop-card-questions-gone .challenge-comparison {
  translate: 0 calc(-1 * (14px + var(--daily-core-loop-card-questions-height, 0px)));
  transition: translate .45s cubic-bezier(.4, .2, .2, 1);
}
[data-daily-core-loop-home-root]:not(.daily-core-loop-phone-layout) .daily-core-loop-card-questions-skipped .daily-core-loop-secondary-actions,
[data-daily-core-loop-home-root]:not(.daily-core-loop-phone-layout) .daily-core-loop-card-questions-skipped .daily-core-loop-next-button,
[data-daily-core-loop-home-root]:not(.daily-core-loop-phone-layout) .daily-core-loop-card-questions-skipped .daily-core-loop-next-status,
[data-daily-core-loop-home-root]:not(.daily-core-loop-phone-layout) .daily-core-loop-card-questions-skipped .challenge-comparison {
  transition: none;
}

/* REQ-2263 (SD-100 card controls §8): the two card questions, on the menu folder's plum paper. The
   menu's face rules read --menu-tab-tex and --menu-focus, which exist only inside .game-menu, so the
   group carries the same values on its own root. Its desktop place under the card is REQ-2264's (below);
   the phone strip along the foot is REQ-2265's (with the phone rules). */
.daily-core-loop-card-questions {
  --daily-core-loop-question-paper-texture: repeating-linear-gradient(135deg, #F9F8FF 0 1.6393px, #E9E4FF 1.6393px 3.2787px);
  --daily-core-loop-question-pressed-texture: repeating-linear-gradient(135deg, #3B24A5 0 1.6393px, #1A0B61 1.6393px 3.2787px);
  --daily-core-loop-question-focus: #130C94;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  width: max(320px, var(--daily-core-loop-completed-card-width));
  max-width: 100%;
  padding: 8px 4px 8px 16px;
  border: 2px solid #000;
  border-radius: 7px;
  background: #E9E4FF var(--daily-core-loop-question-paper-texture);
  color: #000;
  font: 400 15px/20px 'ET Sans', sans-serif;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
/* The footer switches transitions off so Close can take focus in the reveal task; the questions'
   own fade and rise are switched back on. The home root's reduced-motion clamp makes them 1 ms. */
.daily-core-loop-card-footer .daily-core-loop-card-question,
.daily-core-loop-card-footer .daily-core-loop-card-question-choices { transition-property: opacity, transform; }
/* REQ-2264 (§9.1, §9.3): under the card the questions keep one height for the card's life, the first
   step's (112 at the card's full width), which the script measures and writes on the footer. From the
   moment the round is won until the card is left the room is there; the group is unseen and inert
   before it arrives and after it goes, never display: none, so the footer and the card never resize.
   Visibility shares the fade's .35 s: visible at once on the way in, hidden at the end on the way out. */
.daily-core-loop-card-footer .daily-core-loop-card-questions {
  flex: none;
  height: var(--daily-core-loop-card-questions-height, auto);
  visibility: hidden;
  transition-property: opacity, transform, visibility;
}
.daily-core-loop-card-footer .daily-core-loop-card-questions.daily-core-loop-card-questions-in { visibility: visible; }
/* The desktop stack: the question and its cross on one line, the answers spread across the next
   (112 / 98 / 57 tall for fun / how hard / thanks); a shorter step sits in the middle of the room. */
.daily-core-loop-card-footer .daily-core-loop-card-questions {
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: center;
  row-gap: 4px;
  padding-top: 12px;
  padding-bottom: 10px;
}
.daily-core-loop-card-footer .daily-core-loop-card-question { flex-basis: calc(100% - 48px); padding-top: 4px; }
.daily-core-loop-card-footer .daily-core-loop-card-questions-dismiss { order: 1; margin-top: -10px; margin-left: auto; }
.daily-core-loop-card-footer .daily-core-loop-card-question-choices { order: 2; flex-basis: 100%; gap: 6px; justify-content: space-around; }
.daily-core-loop-card-footer .daily-core-loop-card-questions-thanks .daily-core-loop-card-question { flex-basis: 100%; padding-bottom: 6px; }
/* One card size per window: where the window has room, the questions peek out from under the card's
   right edge as a slip, 240 wide beyond it (4 more under the card, so no seam shows), out of the
   footer's flow (the footer's top is the card's foot, 518 down a full-size card). The slip's top lines up
   with the photo's, 48.3 down the card, unless that would bring it within 16 of the next day's small card,
   whose picture starts 177.155 down, and never rises above the card's top. It slides out from under the
   card as the small cards do. */
[data-daily-core-loop-home-root].daily-core-loop-card-questions-beside:not(.daily-core-loop-phone-layout) .daily-core-loop-card-footer > .daily-core-loop-card-questions {
  position: absolute;
  top: calc(max(0px, min(var(--daily-core-loop-neighbour-scale, 1) * 48.3px,
    var(--daily-core-loop-neighbour-scale, 1) * 177.155px - 16px - var(--daily-core-loop-card-questions-height, 112px))) -
    var(--daily-core-loop-neighbour-scale, 1) * 518px);
  left: calc(50% + var(--daily-core-loop-completed-card-width) / 2 - 4px);
  width: 244px;
  margin-top: 0;
  padding-left: 20px;
  border-left-width: 0;
  border-radius: 0 7px 7px 0;
  transform: translateX(-244px);
  transition: opacity .2s ease, transform .6s cubic-bezier(.2, .8, .2, 1), visibility .2s;
}
[data-daily-core-loop-home-root].daily-core-loop-card-questions-beside:not(.daily-core-loop-phone-layout) .daily-core-loop-card-footer > .daily-core-loop-card-questions.daily-core-loop-card-questions-in {
  transform: none;
}
/* On a window too short for the slip above the next day's small card, it hangs 16 under its "Next →"
   line (its picture ends 388.845 down the card, the line 36 under that). */
[data-daily-core-loop-home-root].daily-core-loop-card-questions-beside.daily-core-loop-card-questions-below-next.daily-core-loop-wide-neighbours.daily-core-loop-has-later-neighbour:not(.daily-core-loop-phone-layout) .daily-core-loop-card-footer > .daily-core-loop-card-questions {
  top: calc(var(--daily-core-loop-neighbour-scale, 1) * -129.155px + 52px);
}
/* A collected small card pressed while the slip shows: the card's drawing fades as a layer of its own,
   which the slip would show over, so the slip goes at once. */
[data-daily-core-loop-home-root].daily-core-loop-card-questions-beside.daily-core-loop-collected-swap:not(.daily-core-loop-phone-layout) .daily-core-loop-card-footer > .daily-core-loop-card-questions {
  opacity: 0;
  transition: none;
}
.daily-core-loop-card-questions[hidden] { display: none; }
.daily-core-loop-card-questions.daily-core-loop-card-questions-in { opacity: 1; transform: none; pointer-events: auto; }
.daily-core-loop-card-questions * { box-sizing: border-box; }
.daily-core-loop-card-question {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font: 400 17px/21px 'ET Title Slab', Georgia, serif;
  color: #000;
  transition: opacity .18s ease;
}
.daily-core-loop-card-question:focus { outline: none; }
.daily-core-loop-card-question-choices { display: flex; gap: 4px; flex: none; transition: opacity .18s ease; }
.daily-core-loop-card-questions [hidden] { display: none; }
.daily-core-loop-card-questions-swapping .daily-core-loop-card-question,
.daily-core-loop-card-questions-swapping .daily-core-loop-card-question-choices { opacity: 0; }
.daily-core-loop-card-questions-thanks .daily-core-loop-card-question { text-align: center; }
.daily-core-loop-card-question-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: #1A0B61;
  cursor: pointer;
}
.daily-core-loop-card-question-face svg {
  width: 30px;
  height: 30px;
}
/* How hard: words, in the card's Replay outline, with the faces' plum and pressed fill. The ::before
   reaches 6 px above and below the 32 px inside the border, a 44 px press. */
.daily-core-loop-card-question-word {
  position: relative;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #1A0B61;
  border-radius: 4px;
  background: none;
  color: #1A0B61;
  font: 700 13px/1 'ET Sans', sans-serif;
  letter-spacing: .2px;
  white-space: nowrap;
  cursor: pointer;
}
.daily-core-loop-card-question-word::before {
  content: '';
  position: absolute;
  inset: -6px -2px;
}
.daily-core-loop-card-question-face:hover,
.daily-core-loop-card-question-word:hover { background: rgb(26 11 97 / 8%); }
.daily-core-loop-card-question-face:active,
.daily-core-loop-card-question-word:active { transform: translateY(1px); }
.daily-core-loop-card-question-face[aria-pressed='true'] {
  background: #1A0B61 var(--daily-core-loop-question-pressed-texture);
  color: #FFF;
  border-color: #1A0B61;
}
.daily-core-loop-card-question-word[aria-pressed='true'] {
  background: #1A0B61 var(--daily-core-loop-question-pressed-texture);
  color: #FFF;
}
/* Answers are locked with aria-disabled, not disabled, so the keyboard keeps its place. */
.daily-core-loop-card-question-face[aria-disabled='true'],
.daily-core-loop-card-question-word[aria-disabled='true'] { cursor: default; }
.daily-core-loop-card-question-face[aria-disabled='true']:not([aria-pressed='true']),
.daily-core-loop-card-question-word[aria-disabled='true']:not([aria-pressed='true']) { opacity: .4; }
/* The cross: Close's own drawing (14px, 1.6 stroke, at .75) in a 36 x 44 press. */
.daily-core-loop-card-questions-dismiss {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  cursor: pointer;
}
.daily-core-loop-card-questions-dismiss svg {
  width: 14px;
  height: 14px;
  opacity: .75;
}
.daily-core-loop-card-question-face:focus-visible,
.daily-core-loop-card-question-word:focus-visible,
.daily-core-loop-card-questions-dismiss:focus-visible {
  outline: 2px solid var(--daily-core-loop-question-focus);
  outline-offset: 2px;
}

.daily-core-loop-card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(.4, .2, .2, 1);
}

.daily-core-loop-card-flipped .daily-core-loop-card-flip-inner {
  transform: rotateY(180deg);
}

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

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

.daily-core-loop-card-whiteout {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #fff;
  opacity: 1;
  pointer-events: none;
  transition: opacity 700ms ease;
}

/* No opacity fade: the base rule's `opacity: 0` flips straight to 1 with no transition, matching the
   prototype's `display: none -> block`, and .daily-core-loop-card-whiteout's 700ms fade below carries the
   white-to-card hand-off. The scale settle IS the prototype's (`home-and-gameplay.html:786`) and is
   deliberately kept — ticket 1 §1 read it as an invented entrance, but SPEC §0 makes the prototype
   the tie-breaker and the designer ruled for it (REQ-1594). The whiteout sits inside this host, so
   the white square eases down with it. */
.daily-core-loop-phase-card [data-daily-core-loop-card-host] {
  opacity: 1;
  animation: daily-core-loop-card-settle 800ms cubic-bezier(.34, 1.3, .45, 1);
}

.daily-core-loop-phase-reveal [data-daily-core-loop-card-host] {
  pointer-events: auto;
}

.daily-core-loop-phase-reveal .daily-core-loop-card-whiteout {
  opacity: 0;
}

.daily-core-loop-replay {
  display: none;
}

.daily-core-loop-card-replay-control {
  margin: 0;
  cursor: pointer;
  font: inherit;
}

/* A tiny fitted face is narrower than Replay's screen-pixel target. Its background still
   follows the rounded border; allow the transparent button to extend past the face. */
.daily-core-loop-card-rendered-face.card-face-front { overflow: visible; }

/* Grow the target to the right of the fixed artwork, away from the Story control below.
   Growing it leftward put its lower touch samples beside Story on the smallest cards. */
.card-face-front .daily-core-loop-card-replay-control {
  --replay-visual-width: 85px;
  --replay-target: max(var(--daily-core-loop-replay-target-size, 88px), calc(var(--replay-visual-width) + 3px));
  top: calc(436px - var(--replay-target));
  left: calc(332px - var(--replay-visual-width));
  right: auto;
  width: var(--replay-target);
  height: var(--replay-target);
  padding: 0;
  border: 0;
}
/* Keep translated copy on one line without changing the shared renderer's typography. */
.card-face-front .daily-core-loop-card-replay-control:lang(ru) { --replay-visual-width: 112px; }
.daily-core-loop-replay-visual {
  position: absolute;
  left: 0;
  bottom: 12px;
  width: var(--replay-visual-width);
  height: 31px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--card-navy);
  border-radius: 4px;
  white-space: nowrap;
}
.daily-core-loop-card-replay-control:focus-visible { outline: none; }
.daily-core-loop-card-replay-control:focus-visible:not([data-daily-core-loop-quiet-focus]) .daily-core-loop-replay-visual,
[data-daily-core-loop-card-flip-to]:focus-visible {
  /* These rings sit on the cream card, where the board's yellow ring measures 1.03:1; navy clears 3:1. */
  outline: 3px solid var(--card-navy);
  outline-offset: 3px;
}

[data-daily-core-loop-card-flip-to] {
  cursor: pointer;
}

/* REQ-1668: the whole card turns over on a click, so both faces read as pressable. The card's
   own controls carry their own cursor, so they are not caught by this. */
.daily-core-loop-card-rendered-face {
  cursor: pointer;
}

.daily-core-loop-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 18px;
  min-height: 44px;
  white-space: nowrap;
}
.daily-core-loop-close:active { transform: translateY(1px); }
.daily-core-loop-phase-reveal .daily-core-loop-close {
  animation: daily-core-loop-close-in 500ms ease 250ms backwards;
}

.daily-core-loop-close::after {
  display: none;
}

.daily-core-loop-close svg {
  width: 14px;
  height: 14px;
  opacity: .75;
}

.daily-core-loop-close span {
  font-weight: 700;
  text-decoration: underline;
  text-underline-position: from-font;
}

/* The primary action belongs to the completed run, outside the scaled card artwork. */
.daily-core-loop-next-area {
  width: min(366px, 100%);
  text-align: center;
}

.daily-core-loop-next-area[hidden] { display: none; }

.daily-core-loop-next-button {
  width: 100%;
  min-height: 48px;
  padding: 10px 20px;
  border: 2px solid #fbff81;
  border-radius: 5px;
  background: #fbff81;
  color: #010b23;
  font: 700 17px/24px 'ET Sans', sans-serif;
  cursor: pointer;
}

.daily-core-loop-next-button:hover:not(:disabled) { background: #fff; }
.daily-core-loop-next-button:active:not(:disabled) { transform: translateY(1px); }
.daily-core-loop-next-button:disabled { cursor: wait; opacity: .75; }
.daily-core-loop-next-button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.daily-core-loop-next-status {
  margin: 6px 0 0;
  padding: 0 5px;
  border-radius: 4px;
  background: #010b23;
  color: #fff;
  font: 500 13px/18px 'ET Sans', sans-serif;
}

.daily-core-loop-next-status:empty { display: none; }
.daily-core-loop-next-button[hidden] + .daily-core-loop-next-status { padding: 12px; font-size: 16px; }

/* Keep translated Close copy inside its narrow row. */
@media (min-width: 480px) and (max-width: 599px) {
  .daily-core-loop-close { padding-inline: 4px; }
}

.daily-core-loop-phase-replay [data-daily-core-loop-card-host] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 550ms ease;
}

.daily-core-loop-phase-unmerge [data-daily-core-loop-transition-pair] {
  z-index: 9;
  opacity: 1;
}

.daily-core-loop-phase-replay.daily-core-loop-phase-unmerge [data-daily-core-loop-transition-photo='original'] {
  animation: daily-core-loop-unmerge-original 850ms cubic-bezier(.4, .2, .2, 1) both;
}

.daily-core-loop-phase-replay.daily-core-loop-phase-unmerge [data-daily-core-loop-transition-photo='modified'] {
  animation: daily-core-loop-unmerge-modified 850ms cubic-bezier(.4, .2, .2, 1) both;
}

.daily-core-loop-phase-replay.daily-core-loop-phase-unmerge [data-daily-core-loop-transition-photo]::after {
  animation: daily-core-loop-unwhiten 425ms ease 425ms backwards;
}

.daily-core-loop-phase-quit [data-daily-core-loop-transition-pair] {
  z-index: 6;
  opacity: 1;
}

/* Spec §13.2: while the album opens under an album run's Quit, the photographs hold where they
   were, visible and above it (the pair rides over the plane), and the album takes no press. */
.daily-core-loop-folder-quit-hold [data-daily-core-loop-transition-pair] {
  z-index: 6;
  opacity: 1;
}

.daily-core-loop-folder-quit-hold .daily-core-loop-folder {
  pointer-events: none;
}

.daily-core-loop-phase-quit [data-daily-core-loop-transition-photo='original'] {
  animation: daily-core-loop-quit-original 600ms cubic-bezier(.55, .05, .6, 1) forwards;
}

.daily-core-loop-phase-quit [data-daily-core-loop-transition-photo='modified'] {
  animation: daily-core-loop-quit-modified 600ms cubic-bezier(.55, .05, .6, 1) 80ms forwards;
}

.daily-core-loop-phase-quit .daily-core-loop-envelope-anchor,
.daily-core-loop-phase-collect .daily-core-loop-envelope-anchor {
  opacity: 1;
  transform: scale(var(--daily-core-loop-envelope-scale));
  transition: transform 600ms cubic-bezier(.3, .1, .3, 1), opacity 450ms ease 100ms;
}

.daily-core-loop-folder-run-return .daily-core-loop-envelope-anchor {
  opacity: 0;
  transform: translateY(118px) scale(var(--daily-core-loop-envelope-scale));
  pointer-events: none;
  transition: none;
}

.daily-core-loop-phase-quit .daily-core-loop-envelope-flip,
.daily-core-loop-phase-collect .daily-core-loop-envelope-flip {
  transform: rotateY(0deg);
  transition: transform 750ms cubic-bezier(.4, .2, .2, 1) 380ms;
}

.daily-core-loop-phase-collect [data-daily-core-loop-card-host] {
  display: block;
  opacity: 1;
  animation: daily-core-loop-collect-card 850ms cubic-bezier(.4, .2, .2, 1) forwards;
}

.daily-core-loop-phase-collect .daily-core-loop-card-footer,
.daily-core-loop-phase-replay .daily-core-loop-card-footer { visibility: hidden; }

.daily-core-loop-phase-collect [data-daily-core-loop-utilities],
.daily-core-loop-phase-collect .daily-core-loop-play-button {
  opacity: 1;
  transition: opacity 350ms ease;
}

@media (max-width: 350px) {
  .daily-core-loop-quit { top: 200px; }
}

/* Below 500px the three signed HUD groups no longer fit on one line. Keep the photo geometry and
   desktop anchors untouched, then give the tools their own row and place score/clock at opposite
   pair edges on a second row. */
@media (max-width: 500px) {
  .daily-core-loop-score {
    top: calc(var(--daily-core-loop-round-controls-top, calc(var(--daily-core-loop-pair-top) + var(--daily-core-loop-photo-height))) + 76px);
    right: auto;
    left: var(--daily-core-loop-pair-left);
  }

  .daily-core-loop-clock {
    top: calc(var(--daily-core-loop-round-controls-top, calc(var(--daily-core-loop-pair-top) + var(--daily-core-loop-photo-height))) + 74px);
  }
}

@keyframes daily-core-loop-seal-break {
  to { opacity: 0; transform: scale(.55); }
}

@keyframes daily-core-loop-open-top {
  from { transform: perspective(700px) rotateX(0deg); }
  to { transform: perspective(700px) rotateX(90deg); }
}

@keyframes daily-core-loop-open-inside {
  from { transform: perspective(700px) rotateX(-90deg); }
  to { transform: perspective(700px) rotateX(0deg); }
}

@keyframes daily-core-loop-deal-original {
  0% { transform: translate(var(--daily-core-loop-original-deal-x), var(--daily-core-loop-original-deal-y)) rotate(-9deg) scale(.26); }
  40% { transform: translate(var(--daily-core-loop-original-peak-x), var(--daily-core-loop-original-peak-y)) rotate(-4deg) scale(.5); }
  100% { transform: none; }
}

@keyframes daily-core-loop-deal-modified {
  0% { transform: translate(var(--daily-core-loop-modified-deal-x), var(--daily-core-loop-modified-deal-y)) rotate(7deg) scale(.26); }
  40% { transform: translate(var(--daily-core-loop-modified-peak-x), var(--daily-core-loop-modified-peak-y)) rotate(3deg) scale(.5); }
  100% { transform: none; }
}

/* No opacity here on purpose: the pair stays white and opaque all the way onto the card's box, and
   .daily-core-loop-phase-card retires it with display once the card is up. */
@keyframes daily-core-loop-merge-original {
  to { transform: translate(var(--daily-core-loop-original-merge-x), var(--daily-core-loop-original-merge-y)) scale(var(--daily-core-loop-merge-scale-x), var(--daily-core-loop-merge-scale-y)); }
}

@keyframes daily-core-loop-merge-modified {
  to { transform: translate(var(--daily-core-loop-modified-merge-x), var(--daily-core-loop-modified-merge-y)) scale(var(--daily-core-loop-merge-scale-x), var(--daily-core-loop-merge-scale-y)); }
}

@keyframes daily-core-loop-unmerge-original {
  from { transform: translate(var(--daily-core-loop-original-merge-x), var(--daily-core-loop-original-merge-y)) scale(var(--daily-core-loop-merge-scale-x), var(--daily-core-loop-merge-scale-y)); filter: saturate(0); }
  to { transform: none; filter: saturate(1); }
}

@keyframes daily-core-loop-unmerge-modified {
  from { transform: translate(var(--daily-core-loop-modified-merge-x), var(--daily-core-loop-modified-merge-y)) scale(var(--daily-core-loop-merge-scale-x), var(--daily-core-loop-merge-scale-y)); filter: saturate(0); }
  to { transform: none; filter: saturate(1); }
}

@keyframes daily-core-loop-unwhiten {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* The end scale is measured into an album cell's photo frame (spec §13.2); a home Quit back into
   the envelope keeps the drawn .26. */
@keyframes daily-core-loop-quit-original {
  to { transform: translate(var(--daily-core-loop-quit-original-x), var(--daily-core-loop-quit-original-y)) rotate(-9deg) scale(var(--daily-core-loop-quit-original-scale, .26)); opacity: 0; }
}

@keyframes daily-core-loop-quit-modified {
  to { transform: translate(var(--daily-core-loop-quit-modified-x), var(--daily-core-loop-quit-modified-y)) rotate(7deg) scale(var(--daily-core-loop-quit-modified-scale, .26)); opacity: 0; }
}

@keyframes daily-core-loop-collect-card {
  to { transform: translate(var(--daily-core-loop-collected-x), var(--daily-core-loop-collected-y)) scale(.12); opacity: 0; }
}

@keyframes daily-core-loop-card-settle {
  from { transform: scale(1.035); }
  to { transform: scale(1); }
}

/* Close is centred with translateX(-50%), so the design's 6px rise has to carry that through or the
   button starts the fade against the card's left edge. */
@keyframes daily-core-loop-close-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* The reveal's paper sprinkle. The prototype hangs its pieces on the envelope plane; here that plane
   sits below the card host, so the burst gets its own board-level layer: above the card host (8),
   below the shared game bar (20). */
[data-daily-core-loop-confetti] {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
}

[data-daily-core-loop-confetti].daily-core-loop-confetti-over-folder {
  z-index: 33;
  overflow: visible;
}

.daily-core-loop-confetti-piece {
  position: absolute;
  top: var(--daily-core-loop-confetti-origin-y);
  left: var(--daily-core-loop-confetti-origin-x);
  width: 6px;
  height: 10px;
  background: var(--daily-core-loop-confetti-colour);
  animation: daily-core-loop-confetti-flight 1500ms cubic-bezier(.15, .6, .35, 1) forwards;
}

@keyframes daily-core-loop-confetti-flight {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--daily-core-loop-confetti-drift-x), var(--daily-core-loop-confetti-drift-y)) rotate(var(--daily-core-loop-confetti-spin)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-daily-core-loop-home-root] *,
  [data-daily-core-loop-home-root] *::before,
  [data-daily-core-loop-home-root] *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  /* The engine moves the zoom layer itself, frame by frame, with an inline transform. The clamp above
     would turn each pose write into a 1 ms transition, so after HINT's instant return to the whole picture
     the photo stayed painted at its old pose while the view already read whole. */
  [data-daily-core-loop-home-root] .daily-core-loop-puzzle .zoom-layer {
    transition: none;
  }

  /* REQ-1660 / REQ-1687. The blanket clamp above is the right default for large-area movement, but
     applied to the card flip it produces a hard swap: the player clicks and the card is simply on
     its other face, with no feedback that anything happened. `prefers-reduced-motion` asks for the
     vestibular trigger to go, not the beat. Under reduced motion the card therefore stops being a
     3D object and swaps its complete, opaque faces by stacking order. The short opacity beat belongs
     only to each face's direct content children. That keeps the incoming paper/background opaque
     for the whole beat, so the outgoing photograph and text can never bleed through it.

     These rules beat the clamp on SPECIFICITY, not on source order: `[data-daily-core-loop-home-root] *` is
     (0,1,0) and every override below is (0,2,0). Moving this block above the clamp would still
     work — but keep it here anyway, so the substitute reads as a deliberate exception to the rule
     immediately above it rather than as a rule the clamp appears to overwrite. */
  [data-daily-core-loop-home-root] .daily-core-loop-card-flip-inner {
    transform: none !important;
    transform-style: flat !important;
  }

  [data-daily-core-loop-home-root] .daily-core-loop-card-rendered-face {
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    opacity: 1;
    transition: none !important;
    transition-delay: 0ms !important;
  }

  [data-daily-core-loop-home-root] .daily-core-loop-card-rendered-face > * {
    opacity: .84;
    transition: opacity 160ms ease !important;
    transition-delay: 0ms !important;
  }

  [data-daily-core-loop-home-root] .daily-core-loop-card-rendered-face.card-face-front {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
  }

  [data-daily-core-loop-home-root] .daily-core-loop-card-rendered-face.card-face-back {
    transform: none !important;
    z-index: 1;
    opacity: 1;
    pointer-events: none;
  }

  [data-daily-core-loop-home-root] .daily-core-loop-card-rendered-face.card-face-front > *,
  [data-daily-core-loop-home-root] .daily-core-loop-card-flipped .daily-core-loop-card-rendered-face.card-face-back > * {
    opacity: 1;
  }

  [data-daily-core-loop-home-root] .daily-core-loop-card-flipped .daily-core-loop-card-rendered-face.card-face-front > * {
    opacity: .84;
  }

  [data-daily-core-loop-home-root] .daily-core-loop-card-flipped .daily-core-loop-card-rendered-face.card-face-front {
    z-index: 1;
    opacity: 1;
    pointer-events: none;
  }

  [data-daily-core-loop-home-root] .daily-core-loop-card-flipped .daily-core-loop-card-rendered-face.card-face-back {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
  }
}

/* A short Playing viewport shares the second header row between its two independent actions. */
[data-daily-core-loop-home-root].daily-core-loop-short-playing .daily-core-loop-quit {
  top: 41px;
  right: auto;
  left: 8px;
}
[data-daily-core-loop-home-root].daily-core-loop-short-playing .daily-core-loop-run-date {
  top: 96px;
  right: auto;
  left: 8px;
  max-width: calc(100% - 170px);
  font-size: 12px;
  text-align: left;
}

[data-daily-core-loop-home-root].daily-core-loop-short-playing .daily-core-loop-tool-row {
  left: 50%;
  transform: translateX(-50%);
}
[data-daily-core-loop-home-root].daily-core-loop-short-playing .daily-core-loop-score {
  top: calc(var(--daily-core-loop-round-controls-top, calc(var(--daily-core-loop-pair-top) + var(--daily-core-loop-photo-height))) + 76px);
  right: auto;
  left: 8px;
}
[data-daily-core-loop-home-root].daily-core-loop-short-playing .daily-core-loop-clock {
  top: calc(var(--daily-core-loop-round-controls-top, calc(var(--daily-core-loop-pair-top) + var(--daily-core-loop-photo-height))) + 74px);
  right: 8px;
}
/* REQ-2405: from 600px the count and clock share the tool row's line, so the pair keeps that height.
   They keep the board's 8px edges: a short wide board's pair is narrower than the row, so its edges
   would stack the count and clock on the centred tools (1440x280 fullscreen did). */
@media (min-width: 600px) {
  [data-daily-core-loop-home-root].daily-core-loop-short-playing .daily-core-loop-score {
    top: calc(var(--daily-core-loop-round-controls-top, calc(var(--daily-core-loop-pair-top) + var(--daily-core-loop-photo-height))) + 26px);
  }
  [data-daily-core-loop-home-root].daily-core-loop-short-playing .daily-core-loop-clock {
    top: calc(var(--daily-core-loop-round-controls-top, calc(var(--daily-core-loop-pair-top) + var(--daily-core-loop-photo-height))) + 24px);
  }
}

/* Phone gameplay uses the accepted layout's true box; only the shared face scales. */
.daily-core-loop-phone-layout [data-daily-core-loop-card-host] {
  top: var(--daily-core-loop-phone-card-top);
  left: var(--daily-core-loop-phone-card-left);
  width: var(--daily-core-loop-phone-card-width);
  height: var(--daily-core-loop-phone-card-height);
  z-index: 3;
}
.daily-core-loop-phone-layout [data-daily-core-loop-card-content] {
  transform: scale(var(--daily-core-loop-phone-card-scale));
  transform-origin: top left;
}
.daily-core-loop-phone-layout [data-daily-core-loop-transition-photo='original'] {
  transform-origin: var(--daily-core-loop-original-pivot);
}
.daily-core-loop-phone-layout [data-daily-core-loop-transition-photo='modified'] {
  transform-origin: var(--daily-core-loop-modified-pivot);
}
.daily-core-loop-phone-layout[data-daily-core-loop-state='Opening'].daily-core-loop-phase-deal :is([data-daily-core-loop-card-drawing], [data-daily-core-loop-transition-photo]) {
  animation: daily-core-loop-phone-deal 1050ms cubic-bezier(.5, .1, .25, 1) both;
}
.daily-core-loop-phone-layout.daily-core-loop-phase-quit :is([data-daily-core-loop-card-drawing], [data-daily-core-loop-transition-photo]) {
  animation: daily-core-loop-phone-quit 600ms cubic-bezier(.55, .05, .6, 1) forwards,
    daily-core-loop-phone-quit-fade 450ms ease 150ms forwards;
}
.daily-core-loop-phone-layout.daily-core-loop-phase-quit [data-daily-core-loop-card-host] {
  opacity: 1;
  z-index: 32;
}
@keyframes daily-core-loop-phone-deal {
  0% { transform: translate(0, var(--daily-core-loop-phone-flight-start-y)) rotate(-8deg) scale(.26); }
  40% { transform: translate(0, var(--daily-core-loop-phone-flight-peak-y)) rotate(-3deg) scale(.5); }
  100% { transform: none; }
}
@keyframes daily-core-loop-phone-quit {
  to { transform: translate(var(--daily-core-loop-phone-quit-x, 0px), var(--daily-core-loop-phone-quit-y, var(--daily-core-loop-phone-flight-start-y))) rotate(var(--daily-core-loop-phone-quit-angle, -7deg)) scale(var(--daily-core-loop-phone-quit-scale, .24)); }
}
@keyframes daily-core-loop-phone-quit-fade { to { opacity: 0; } }
/* ALBUM QUIT FLIGHT: on a touch screen the phone's pair flies back to the album as a tablet's does, each photograph
   from its own frame into the cell (state writes a vector per photograph), not as a card; inside the frame the
   picture eases from the live view back to rest over the same 600 ms. The home quit keeps the phone's card flight.
   The vector is centre to centre (the tablet's), so each frame scales about its own centre here, not about the
   phone's shared card pivot, which would send the lower photograph past the cell to the top of the screen. */
.daily-core-loop-phone-layout.daily-core-loop-touch-play.daily-core-loop-folder-run-return.daily-core-loop-phase-quit [data-daily-core-loop-transition-photo='original'] {
  animation: daily-core-loop-quit-original 600ms cubic-bezier(.55, .05, .6, 1) forwards;
  transform-origin: 50% 50%;
}
.daily-core-loop-phone-layout.daily-core-loop-touch-play.daily-core-loop-folder-run-return.daily-core-loop-phase-quit [data-daily-core-loop-transition-photo='modified'] {
  animation: daily-core-loop-quit-modified 600ms cubic-bezier(.55, .05, .6, 1) 80ms forwards;
  transform-origin: 50% 50%;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play.daily-core-loop-folder-run-return.daily-core-loop-phase-quit [data-daily-core-loop-transition-photo] img {
  transition: transform 600ms cubic-bezier(.55, .05, .6, 1);
}
@media (prefers-reduced-motion: reduce) {
  .daily-core-loop-phone-layout.daily-core-loop-phase-quit :is([data-daily-core-loop-card-drawing], [data-daily-core-loop-transition-photo]),
  .daily-core-loop-phone-layout[data-daily-core-loop-state='Opening'].daily-core-loop-phase-deal :is([data-daily-core-loop-card-drawing], [data-daily-core-loop-transition-photo]) {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}
.daily-core-loop-phone-layout[data-daily-core-loop-state='Opening'] [data-daily-core-loop-card-host],
.daily-core-loop-phone-layout[data-daily-core-loop-state='Playing'] [data-daily-core-loop-card-host] {
  opacity: 1;
  pointer-events: auto;
  touch-action: none;
}
/* TOUCH PLAY: in a touch round, a finger that lands off the photos scrolls the page (the one-finger rule),
   so the card host behind them lets the page move up and down; pinches stay with the game. */
.daily-core-loop-touch-play[data-daily-core-loop-state='Playing'] [data-daily-core-loop-card-host] { touch-action: pan-y; }
/* The photos too, at any zoom and on tablets: an up or down swipe from a photo already at its edge that way passes
   to the page. The game cancels every move it takes for the photo itself (handlePhoneTouchMove), and the browser's
   own pinch zoom stays off. */
.daily-core-loop-touch-play[data-daily-core-loop-state='Playing'] .daily-core-loop-puzzle .image-panel,
.daily-core-loop-touch-play[data-daily-core-loop-state='Playing'] .daily-core-loop-puzzle .image-panel :is(.zoom-layer, canvas) {
  touch-action: pan-y;
}
/* CARD SIZE ON IPHONE: the card waits inside the envelope until the deal carries it out, as the
   pictures do (the transition pair is unseen until daily-core-loop-phase-deal). Shown earlier, it
   stood at its place behind the envelope for the whole turn and flap. A quit during the deal clears
   the deal phase while the state is still Opening, so its two flights are excepted by name. */
.daily-core-loop-phone-layout[data-daily-core-loop-state='Opening']:not(.daily-core-loop-phase-deal, .daily-core-loop-phase-quit, .daily-core-loop-folder-quit-hold) [data-daily-core-loop-card-host] {
  opacity: 0;
}
/* REQ-2305: in resting play the pictures play on their own sheet, wider than the card. The card stays
   mounted and placed but undrawn, and passes input through, until the finished pictures fly into it.
   Home Quit and Replay retain the card windows; touch album Quit keeps its independent pair. */
.daily-core-loop-phone-layout[data-daily-core-loop-phone-play-column][data-daily-core-loop-state='Playing']:not([data-daily-core-loop-phone-completion='slide'], [data-daily-core-loop-phone-completion='push']) [data-daily-core-loop-card-drawing] {
  opacity: 0;
}
.daily-core-loop-phone-layout[data-daily-core-loop-phone-play-column][data-daily-core-loop-state='Playing'] [data-daily-core-loop-card-host] {
  pointer-events: none;
}
.daily-core-loop-phone-layout [data-daily-core-loop-card-host][data-daily-core-loop-card-interactive='false'] [data-daily-core-loop-card-content] {
  pointer-events: none;
}
.daily-core-loop-phone-layout.daily-core-loop-folder-quit-hold [data-daily-core-loop-card-host],
.daily-core-loop-phone-layout.daily-core-loop-phase-replay [data-daily-core-loop-card-host],
.daily-core-loop-phone-layout.daily-core-loop-folder-card-mode [data-daily-core-loop-card-host] {
  z-index: 32;
}
/* ALBUM QUIT FLIGHT: on a touch screen the round plays with no card behind it, so an album run's Quit must not
   lift the phone's card host over the photographs (the rule above puts it at 32, over the transition pair at 6,
   with the card's face blank there, so a bare cream card covered the whole flight). The host stays out of sight
   and the two pictures fly into the calendar cell as they do on a tablet. The deal, the replay and the card's own
   flights do not carry daily-core-loop-folder-quit-hold and are untouched. */
.daily-core-loop-phone-layout.daily-core-loop-touch-play.daily-core-loop-folder-quit-hold [data-daily-core-loop-card-host] {
  visibility: hidden;
}
.daily-core-loop-phone-layout:not(.daily-core-loop-folder-ceremony) .daily-core-loop-card-whiteout {
  display: none;
}
.daily-core-loop-phone-layout.daily-core-loop-phase-card [data-daily-core-loop-card-host],
.daily-core-loop-phone-layout.daily-core-loop-phase-replay [data-daily-core-loop-card-host] {
  animation: none;
}
.daily-core-loop-phone-layout .card-face-front > :not(.card-front-photo) {
  opacity: 1;
  translate: 0 0;
  transition: opacity .45s ease var(--daily-core-loop-card-word-delay, 0s),
    translate .45s cubic-bezier(.2,.7,.3,1) var(--daily-core-loop-card-word-delay, 0s);
}
.daily-core-loop-phone-layout .card-category-badge { --daily-core-loop-card-word-delay: 0s; }
.daily-core-loop-phone-layout .card-publish-date { --daily-core-loop-card-word-delay: .06s; }
.daily-core-loop-phone-layout .card-credit-line { --daily-core-loop-card-word-delay: .3s; }
.daily-core-loop-phone-layout .card-title-line { --daily-core-loop-card-word-delay: .36s; }
.daily-core-loop-phone-layout .card-caption-text { --daily-core-loop-card-word-delay: .44s; }
.daily-core-loop-phone-layout .card-best-time-row { --daily-core-loop-card-word-delay: .54s; }
.daily-core-loop-phone-layout .card-replay-button { --daily-core-loop-card-word-delay: .6s; }
.daily-core-loop-phone-layout .card-story-button { --daily-core-loop-card-word-delay: .68s; }
.daily-core-loop-phone-layout[data-daily-core-loop-state='Opening'] .card-face-front > :not(.card-front-photo),
.daily-core-loop-phone-layout[data-daily-core-loop-state='Playing'] .card-face-front > :not(.card-front-photo),
.daily-core-loop-phone-layout.daily-core-loop-phase-card:not(.daily-core-loop-phase-reveal) .card-face-front > :not(.card-front-photo),
.daily-core-loop-phone-layout.daily-core-loop-phase-replay .card-face-front > :not(.card-front-photo),
.daily-core-loop-phone-layout.daily-core-loop-phase-quit .card-face-front > :not(.card-front-photo),
.daily-core-loop-phone-layout.daily-core-loop-folder-quit-hold .card-face-front > :not(.card-front-photo) {
  opacity: 0;
  translate: 0 6px;
  transition-duration: .25s;
  transition-delay: 0s;
}
.daily-core-loop-phone-layout .card-face-front > .card-front-photo {
  opacity: 1;
  transition: none;
}
.daily-core-loop-phone-layout[data-daily-core-loop-state='Opening'] .card-face-front > .card-front-photo,
.daily-core-loop-phone-layout[data-daily-core-loop-state='Playing'] .card-face-front > .card-front-photo,
.daily-core-loop-phone-layout.daily-core-loop-phase-quit .card-face-front > .card-front-photo,
.daily-core-loop-phone-layout.daily-core-loop-folder-quit-hold .card-face-front > .card-front-photo {
  opacity: 0;
}
.daily-core-loop-phone-layout.daily-core-loop-folder-card-mode .card-face-front > :not(.card-front-photo) {
  opacity: 1;
  translate: 0 0;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .daily-core-loop-phone-layout .card-face-front > * {
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
}

/* The full-board engine host passes input through where it draws nothing. Its photographs, round
   band and existing controls opt back into pointer events in game.css. */
.daily-core-loop-phone-layout[data-daily-core-loop-state='Playing'] [data-daily-core-loop-game-host] {
  pointer-events: none;
}

/* Phone lines and menu tabs keep the corner controls measurable for the fit. */
[data-daily-core-loop-home-root].daily-core-loop-phone-layout.daily-core-loop-phase-flip :is(.game-fullscreen, .game-open-full-page),
[data-daily-core-loop-home-root].daily-core-loop-phone-layout[data-daily-core-loop-state='Playing'] :is(.game-fullscreen, .game-open-full-page),
[data-daily-core-loop-home-root].daily-core-loop-phone-layout[data-daily-core-loop-state='Card'] :is(.game-fullscreen, .game-open-full-page),
[data-daily-core-loop-home-root].daily-core-loop-phone-layout.daily-core-loop-folder-card-mode :is(.game-fullscreen, .game-open-full-page),
[data-daily-core-loop-home-root].daily-core-loop-menu-phone.menu-open :is(.game-fullscreen, .game-open-full-page) {
  visibility: hidden;
}

/* TOUCH PLAY: the sideways-phone cover, restored as it was before REQ-2405. */
.daily-core-loop-turn-upright { display: none; }
.daily-core-loop-sideways .daily-core-loop-turn-upright {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 400;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgb(var(--daily-core-loop-veil-rgb, 27 23 48) / .96);
  color: #fff;
  text-align: center;
}
.daily-core-loop-sideways .daily-core-loop-turn-upright.daily-core-loop-turn-upright-framed {
  justify-content: flex-start;
  padding-top: 32px;
}
.daily-core-loop-turn-upright svg { width: 56px; height: 56px; }
.daily-core-loop-turn-upright p {
  margin: 0;
  font-family: 'ET Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .2px;
}

/* Visibility survives the production reduced-motion face opacity rules. */
.daily-core-loop-stamp-pending { visibility: hidden; }
.daily-core-loop-stamp-press {
  animation: daily-core-loop-first-day-press 300ms cubic-bezier(.2,.9,.3,1) both;
}
.daily-core-loop-card-rendered-face.daily-core-loop-stamp-thump {
  transform-origin: 50% 50%;
  animation: daily-core-loop-first-day-thump 280ms ease-out 140ms both;
}
@keyframes daily-core-loop-first-day-press {
  0% { transform: scale(1.5) rotate(-12deg); opacity: 0; }
  40% { opacity: 1; }
  70% { transform: scale(.965) rotate(.6deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes daily-core-loop-first-day-thump {
  0%, 100% { transform: rotateY(180deg) scale(1); }
  30% { transform: rotateY(180deg) scale(.982); }
}
@media (prefers-reduced-motion: reduce) {
  .daily-core-loop-stamp-press,
  .daily-core-loop-card-rendered-face.daily-core-loop-stamp-thump { animation: none; }
}

/* The phone's line sits above the retained card, in board rather than artwork pixels. */
[data-daily-core-loop-home-root].daily-core-loop-phone-layout .daily-core-loop-run-date,
[data-daily-core-loop-home-root].daily-core-loop-phone-layout .daily-core-loop-quit {
  translate: 0 -50%;
}
[data-daily-core-loop-home-root].daily-core-loop-phone-layout .daily-core-loop-run-date {
  text-align: left;
  opacity: 1;
  visibility: visible;
  transition-property: none;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
[data-daily-core-loop-home-root].daily-core-loop-phone-layout .daily-core-loop-player-hud:has(.daily-core-loop-whole-photo[aria-hidden='false']) .daily-core-loop-run-date {
  opacity: 0;
  visibility: hidden;
}
[data-daily-core-loop-home-root].daily-core-loop-phone-layout .daily-core-loop-quit {
  font-size: 15px;
  padding: 0;
}
.daily-core-loop-phone-layout .daily-core-loop-quit::before { content: ''; position: absolute; inset: -10px; }
.daily-core-loop-phone-layout .daily-core-loop-quit span { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.daily-core-loop-phone-layout .daily-core-loop-card-footer {
  height: 44px;
  padding-top: 0;
  transform: none;
  translate: 0 -50%;
}
.daily-core-loop-phone-layout .daily-core-loop-close {
  position: absolute;
  right: calc(var(--prow-right, 12px) - 18px);
  top: 0;
  font-size: 15px;
  padding-inline: 18px;
  animation: none;
}
/* REQ-2368: the press box above hangs its 18 px padding past the card's edge, so a ring 4 px outside the
   box ran off a 390 px screen on the right and under the Sound tab at the top. On a phone the keyboard
   ring goes around the words instead: the content box (the base rule's 9 px block padding and the
   18 px inline padding above), 4 px out, as the small cards ring their label. */
.daily-core-loop-phone-layout .daily-core-loop-close:focus-visible {
  outline: none;
}
.daily-core-loop-phone-layout .daily-core-loop-close:focus-visible:not([data-daily-core-loop-quiet-focus])::before {
  content: '';
  position: absolute;
  inset: 9px 18px;
  outline: 2px solid #fbff81;
  outline-offset: 4px;
  pointer-events: none;
}
.daily-core-loop-phone-layout .daily-core-loop-next-area {
  position: absolute;
  left: var(--prow-left, 12px);
  top: 5px;
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
/* REQ-2265 (SD-100 card controls §10.2): while the card makes room, Next or Previous Puzzle and Close
   slide in by half the width it gives up, so they keep to its edges. */
.daily-core-loop-phone-layout .daily-core-loop-next-area {
  translate: var(--daily-core-loop-phone-row-shift, 0px) 0;
  transition: translate .45s cubic-bezier(.4, .2, .2, 1);
}
.daily-core-loop-phone-layout .daily-core-loop-close {
  translate: calc(-1 * var(--daily-core-loop-phone-row-shift, 0px)) 0;
  transition: translate .45s cubic-bezier(.4, .2, .2, 1);
}
.daily-core-loop-phone-layout .daily-core-loop-next-area[hidden] { display: none; }
/* CARD SIZE ON IPHONE: in the phone layout (phones and upright iPads), Next or Previous Puzzle is the
   white underlined label the small cards carry on a wider screen, the same as Close across the line, not
   the yellow button. The box keeps its 34 px, so the words stay centred on the line, and presses 44 tall. */
.daily-core-loop-phone-layout .daily-core-loop-next-button {
  position: relative;
  width: auto;
  min-height: 0;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: 700 15px/20px 'ET Sans', sans-serif;
  text-decoration: underline;
  text-underline-position: from-font;
}
.daily-core-loop-phone-layout .daily-core-loop-next-button::before { content: ''; position: absolute; inset: -5px -10px; }
.daily-core-loop-phone-layout .daily-core-loop-next-button:hover:not(:disabled) { background: transparent; }
.daily-core-loop-phone-layout .daily-core-loop-next-button:focus-visible { outline: 2px solid #fbff81; outline-offset: 4px; }
.daily-core-loop-phone-layout .daily-core-loop-next-status { margin: 0; font-size: 13px; }
/* REQ-2265 (SD-100 card controls §10.1): on a phone the questions run along the foot of the game's
   frame, the board's full width, borderless at the sides with the folder's 2 px line along the top,
   on one line 62 tall: the question 16/20, the three answers (faces 44 with a 28 drawing) and the
   cross. The script writes the visible foot in the footer's coordinates; the site's own bottom bar is
   outside the frame, so the strip never needs to know about it. */
.daily-core-loop-phone-layout .daily-core-loop-card-footer > .daily-core-loop-card-questions {
  position: absolute;
  left: 0;
  bottom: calc(100% - var(--daily-core-loop-phone-strip-foot, 100%));
  width: 100%;
  max-width: none;
  height: 62px;
  flex-wrap: nowrap;
  align-items: center;
  row-gap: 0;
  padding: 8px 4px 8px 14px;
  border-width: 2px 0 0;
  border-radius: 0;
}
.daily-core-loop-phone-layout .daily-core-loop-card-footer .daily-core-loop-card-question {
  flex: 1 1 auto;
  padding: 0;
  font-size: 16px;
  line-height: 20px;
}
.daily-core-loop-phone-layout .daily-core-loop-card-footer .daily-core-loop-card-question-choices {
  order: 0;
  flex: none;
  gap: 4px;
}
.daily-core-loop-phone-layout .daily-core-loop-card-footer .daily-core-loop-card-questions-dismiss { order: 0; margin: 0; }
.daily-core-loop-phone-layout .daily-core-loop-card-question-face { width: 44px; height: 44px; }
.daily-core-loop-phone-layout .daily-core-loop-card-question-face svg { width: 28px; height: 28px; }
/* A phone challenge round asks nothing; its result box, unchanged, takes the strip's place along the
   foot (spec §7.5) once the card has started making room for it. */
.daily-core-loop-phone-layout .daily-core-loop-card-footer > .challenge-comparison {
  position: absolute;
  top: auto;
  left: 50%;
  bottom: calc(100% - var(--daily-core-loop-phone-strip-foot, 100%));
  width: min(300px, calc(100% - 24px));
  margin: 0;
  transform: none;
  translate: -50% 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.daily-core-loop-phone-layout .daily-core-loop-card-footer.daily-core-loop-phone-result-in > .challenge-comparison {
  opacity: 1;
  visibility: visible;
}
/* More specific than the later menu sheet, retaining its night-ink and tab-shape transitions. */
[data-daily-core-loop-home-root].daily-core-loop-phone-layout .shared-game-bar .game-sound-tab {
  transition: color 2s ease, border-color 2s ease, border-radius .16s ease, opacity .3s ease;
}
[data-daily-core-loop-home-root].daily-core-loop-phone-round .game-sound-tab { opacity: 0; pointer-events: none; }
/* Replay exposes the HUD ancestor at activation, while its live photos remain unavailable. */
.daily-core-loop-phone-layout.daily-core-loop-phase-replay [data-daily-core-loop-transition-pair] {
  z-index: 33;
}
.daily-core-loop-phone-layout.daily-core-loop-phase-replay .daily-core-loop-puzzle .image-panel {
  visibility: hidden;
}
.daily-core-loop-phone-layout.daily-core-loop-phase-replay [data-daily-core-loop-card-host] {
  opacity: 1;
  transition: none;
}
.daily-core-loop-phone-layout.daily-core-loop-phase-replay.daily-core-loop-phase-unmerge [data-daily-core-loop-transition-photo]::after {
  animation: none;
}
.daily-core-loop-phone-layout.daily-core-loop-replay-hud-entry [data-daily-core-loop-game-host],
.daily-core-loop-phone-layout.daily-core-loop-replay-hud-entry [data-daily-core-loop-quit],
.daily-core-loop-phone-layout.daily-core-loop-replay-hud-entry [data-daily-core-loop-run-date] {
  animation: daily-core-loop-phone-hud-entry 300ms ease 250ms backwards;
}
@keyframes daily-core-loop-phone-hud-entry { from { opacity: 0; } to { opacity: 1; } }

/* A playable phone neighbour departs before the selected envelope is dealt. */
.daily-core-loop-phone-layout.daily-core-loop-next-departure [data-daily-core-loop-card-drawing] {
  opacity: 0;
  transition: scale .45s cubic-bezier(.4, .2, .2, 1), translate .45s cubic-bezier(.4, .2, .2, 1), opacity 220ms ease;
}

/* Collected continuation retains Card geometry; only its drawing fades. */
[data-daily-core-loop-collected-presentation] [data-daily-core-loop-card-drawing] {
  transition: opacity 220ms ease;
}
.daily-core-loop-collected-swap [data-daily-core-loop-card-drawing] {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  [data-daily-core-loop-collected-presentation] [data-daily-core-loop-card-drawing] {
    transition-duration: 1ms;
  }
}

/* REQ-2265 (SD-100 card controls §10.2): while the questions (or a challenge round's result) run along
   a phone's foot, the card eases smaller about its top, just enough for them, and grows back when
   they go. Scale and translate on the drawing only, never the layout box (left, width, height), so the
   card's own flights compose with it. A collected day's presentation keeps its own opacity fade; no
   other phone pose fades the drawing. The home root's reduced-motion clamp makes it 1 ms; the script's
   waits stay. */
.daily-core-loop-phone-layout [data-daily-core-loop-card-drawing] {
  scale: var(--daily-core-loop-phone-room-scale, 1);
  translate: 0 var(--daily-core-loop-phone-room-lift, 0px);
  transition: scale .45s cubic-bezier(.4, .2, .2, 1), translate .45s cubic-bezier(.4, .2, .2, 1);
}
/* REQ-2305: the undrawn card fades in under the finished pictures as they slide and push into it. */
.daily-core-loop-phone-layout:is([data-daily-core-loop-phone-completion='slide'], [data-daily-core-loop-phone-completion='push']) [data-daily-core-loop-card-drawing] {
  transition: scale .45s cubic-bezier(.4, .2, .2, 1), translate .45s cubic-bezier(.4, .2, .2, 1), opacity .25s ease;
}
.daily-core-loop-phone-layout[data-daily-core-loop-collected-presentation] [data-daily-core-loop-card-drawing] {
  transition: scale .45s cubic-bezier(.4, .2, .2, 1), translate .45s cubic-bezier(.4, .2, .2, 1), opacity 220ms ease;
}

/* Phone completion keeps the engine's finished pencil/rotation and only nods its scale. */
.daily-core-loop-phone-rings-roll .ring-layer > g {
  transform-box: fill-box;
  transform-origin: center;
  animation: daily-core-loop-ring-nod 500ms cubic-bezier(.3,0,.3,1) both;
  animation-delay: var(--daily-core-loop-ring-nod-delay, 0ms);
}
@keyframes daily-core-loop-ring-nod {
  0%, 100% { scale: 1; }
  45% { scale: 1.14; }
}
.daily-core-loop-phone-ring-fade .found-ring-layer,
.daily-core-loop-phone-ring-fade .daily-core-loop-player-hud {
  opacity: 0;
  transition: opacity 300ms ease;
}
.daily-core-loop-phone-layout.daily-core-loop-phase-glow [data-daily-core-loop-transition-photo] {
  box-shadow: none;
}
.daily-core-loop-phone-layout.daily-core-loop-phase-glow [data-daily-core-loop-transition-photo]::after {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .daily-core-loop-phone-rings-roll .ring-layer > g { animation: none; }
  .daily-core-loop-phone-ring-fade .found-ring-layer,
  .daily-core-loop-phone-ring-fade .daily-core-loop-player-hud { transition: none; }
}

/* Static compensation keeps the landed hairline at the mounted artwork scale; only opacity animates. */
.daily-core-loop-phone-layout [data-daily-core-loop-transition-photo]::after {
  border-width: var(--daily-core-loop-completion-frame-y, .75px) var(--daily-core-loop-completion-frame-x, .75px);
}

/* Reward neighbours share the album drawing; only their unscaled outer button is interactive. */
[data-daily-core-loop-card-content] { z-index: 2; }
.daily-core-loop-card-neighbour {
  --neighbour-width: calc(154.7px * var(--daily-core-loop-neighbour-scale, 1));
  --neighbour-height: calc(211.69px * var(--daily-core-loop-neighbour-scale, 1));
  /* Keep the unscaled action clear of Replay/Close when the shared artwork becomes tiny. */
  --neighbour-centre-gap: max(64px, calc(161px * var(--daily-core-loop-neighbour-scale, 1)));
  --neighbour-inward: calc((154.7px - 22px + 12px) * var(--daily-core-loop-neighbour-scale, 1));
  --neighbour-label-x: calc(-11px * var(--daily-core-loop-neighbour-scale, 1));
  --neighbour-tilt: -5deg;
  position: absolute;
  top: calc(50% + 24px * var(--daily-core-loop-neighbour-scale, 1) - var(--neighbour-height) / 2);
  right: calc(50% + var(--neighbour-centre-gap));
  z-index: 1;
  display: none;
  width: max-content;
  min-width: max(44px, var(--neighbour-width));
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transform: translate(var(--neighbour-inward), calc(10px * var(--daily-core-loop-neighbour-scale, 1)));
  transition: transform 600ms cubic-bezier(.2, .8, .2, 1), opacity 200ms ease;
}
.daily-core-loop-card-neighbour[data-daily-core-loop-card-neighbour='later'] {
  --neighbour-inward: calc((154.7px - 22px + 12px) * var(--daily-core-loop-neighbour-scale, 1) * -1);
  --neighbour-label-x: calc(11px * var(--daily-core-loop-neighbour-scale, 1));
  --neighbour-tilt: 5deg;
  right: auto;
  left: calc(50% + var(--neighbour-centre-gap));
}
.daily-core-loop-wide-neighbours .daily-core-loop-card-neighbour { display: block; }
.daily-core-loop-card-neighbour.is-out { opacity: 1; transform: translate(0, 0); pointer-events: auto; }
.daily-core-loop-card-neighbour-art {
  position: relative;
  display: block;
  width: var(--neighbour-width);
  height: var(--neighbour-height);
  margin-inline: auto;
  rotate: 0deg;
  transition: rotate 600ms cubic-bezier(.2, .8, .2, 1), transform 180ms ease;
}
.daily-core-loop-card-neighbour.is-out .daily-core-loop-card-neighbour-art { rotate: var(--neighbour-tilt); }
.daily-core-loop-card-neighbour-art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0 4.75px 0 0;
  pointer-events: none;
  background: rgb(var(--daily-core-loop-veil-rgb) / .55);
  transition: opacity 250ms ease;
}
.daily-core-loop-card-neighbour .daily-core-loop-folder-thumb {
  display: block;
  opacity: 1;
  content-visibility: visible;
  transform: scale(calc(1.3 * var(--daily-core-loop-neighbour-scale, 1)));
  transform-origin: top left;
  transition: none;
  pointer-events: none;
}
.daily-core-loop-card-neighbour:is(:hover, :focus-visible) .daily-core-loop-card-neighbour-art { transform: translateY(-4px); }
.daily-core-loop-card-neighbour:is(:hover, :focus-visible) .daily-core-loop-folder-thumb {
  box-shadow: -3px 7px 10px 1px rgb(7 1 106 / 20%);
}
.daily-core-loop-card-neighbour:is(:hover, :focus-visible) .daily-core-loop-card-neighbour-art::after { opacity: 0; }
.daily-core-loop-card-neighbour:is(:hover, :focus-visible) .daily-core-loop-folder-album-play { opacity: 1; }
.daily-core-loop-card-neighbour-label {
  display: block;
  margin-top: 16px;
  text-align: center;
  white-space: nowrap;
  translate: var(--neighbour-label-x) 0;
  font: 700 15px/20px 'ET Sans', sans-serif;
  color: #fff;
  text-decoration: underline;
  text-underline-position: from-font;
}
.daily-core-loop-card-neighbour:focus-visible { outline: none; }
.daily-core-loop-card-neighbour:focus-visible .daily-core-loop-card-neighbour-label { outline: 2px solid #fbff81; outline-offset: 4px; }
/* With the small cards out there is no Next button, not even to retry: the small cards try again (§6.3),
   and the footer keeps its measured height. */
.daily-core-loop-wide-neighbours.daily-core-loop-has-neighbours [data-daily-core-loop-next] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .daily-core-loop-card-neighbour,
  .daily-core-loop-card-neighbour-art,
  .daily-core-loop-card-neighbour-art::after { transition-duration: 1ms; }
}

/* Activation feedback does not replace a control's transform/opacity choreography. */
[data-daily-core-loop-home-root] [data-game-acknowledged] {
  outline: 3px solid #e8cd54;
  outline-offset: 3px;
}
.game-loading-feedback {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  box-sizing: border-box;
  width: min(360px, calc(100% - 24px));
  padding: 12px 16px;
  border: 2px solid #eee3b4;
  border-radius: 8px;
  background: #24221f;
  color: #fff;
  font: 500 15px/1.4 'ET Sans', sans-serif;
  box-shadow: 0 3px 14px #0006;
}
.game-loading-feedback[hidden], .game-loading-feedback [hidden] { display: none; }
.game-loading-feedback progress { display: block; width: 100%; height: 8px; margin-top: 8px; accent-color: #e8cd54; }
.game-loading-feedback [data-game-loading-detail] { font-variant-numeric: tabular-nums; margin-top: 3px; }
.game-loading-feedback button { min-height: 44px; min-width: 76px; margin-top: 8px; font: inherit; cursor: pointer; }

/* Counter the envelope scale so loading text stays readable and Retry keeps a 44px target. */
.daily-core-loop-home-preparation {
  position: absolute;
  top: 163px;
  left: 18px;
  width: 307px;
  color: #3b3495;
  text-align: center;
  font: 500 calc(14px / var(--daily-core-loop-envelope-scale, 1) / 1.6443)/1.4 'ET Sans', sans-serif;
}
.daily-core-loop-home-preparation p { margin: 0; }
.daily-core-loop-home-preparation button {
  min-height: calc(44px / var(--daily-core-loop-envelope-scale, 1) / 1.6443);
  min-width: calc(76px / var(--daily-core-loop-envelope-scale, 1) / 1.6443);
  margin-top: 5px;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: #fffbf7;
  color: inherit;
  font: 700 calc(14px / var(--daily-core-loop-envelope-scale, 1) / 1.6443)/1.3 'ET Sans', sans-serif;
  cursor: pointer;
}
.daily-core-loop-home-preparation button:focus-visible { outline: 2px solid #3b3495; outline-offset: 2px; }
.daily-core-loop-home-preparation[hidden],
[data-daily-core-loop-home-root]:not([data-daily-core-loop-state='Home']) .daily-core-loop-home-preparation,
.daily-core-loop-folder-open .daily-core-loop-home-preparation { display: none; }

/* TOUCH PLAY: on a phone or tablet the round is two separate photographs, as on a
   desktop, with no card or sheet behind them: they fill the room down to the visible foot and touch, so
   one 2px white seam separates them without frame borders. The full-width banner holds Quit, count,
   HINT, Fit/Zoom and the clock with Pause; the tab line and date are hidden during play. daily-core-loop-touch-play is on from the
   deal through the win (state places the controls in placeTouchPlayControls); the frames are the phone's,
   shared above, also on a desktop board (a tablet held sideways). */
.daily-core-loop-hint-word,
.daily-core-loop-touch-play-hint { display: none; }

/* The banner replaces the play sheet's top; nothing is drawn behind the photographs. */
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-player-hud::before {
  content: '';
  position: absolute;
  left: var(--daily-core-loop-touch-banner-left);
  top: var(--daily-core-loop-touch-banner-top);
  width: var(--daily-core-loop-touch-banner-width);
  height: var(--daily-core-loop-touch-banner-height);
  box-sizing: border-box;
  border: 2px solid #fff;
  border-bottom-width: 0;
  border-radius: 0;
  background: repeating-linear-gradient(135deg, #fff3e5 0 1.111px, #fffbf7 1.111px 3.704px);
  pointer-events: auto;
}
/* The banner and its words come in with play, fading in over the dealt photographs. */
[data-daily-core-loop-home-root].daily-core-loop-touch-play[data-daily-core-loop-state='Playing'] .daily-core-loop-player-hud {
  animation: daily-core-loop-touch-banner-in 500ms ease-out backwards;
}
@keyframes daily-core-loop-touch-banner-in {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-daily-core-loop-home-root].daily-core-loop-touch-play[data-daily-core-loop-state='Playing'] .daily-core-loop-player-hud { animation: none; }
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-puzzle .detective-images::before {
  content: none;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-score,
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-clock {
  translate: 0 -50%;
  color: #111;
  font-size: calc(24px * var(--daily-core-loop-touch-banner-scale, 1));
  line-height: 1;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-score { text-align: left; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-score .of { opacity: .6; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-clock {
  gap: calc(6px * var(--daily-core-loop-touch-banner-scale, 1));
  letter-spacing: .5px;
}
/* Preserve the clock's capped ink after the touch banner sets its resting color. */
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-clock:has(.timer-capped) {
  color: #C2413A;
  animation: none;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-clock svg {
  width: calc(20px * var(--daily-core-loop-touch-banner-scale, 1));
  height: calc(20px * var(--daily-core-loop-touch-banner-scale, 1));
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-tool-row { translate: -50% -50%; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play :is(#daily-core-loop-zoom-in, #daily-core-loop-zoom-out) { display: none; }
/* REQ-2445: the Fit / Zoom pill sits beside HINT and is drawn as HINT is; a fine pointer never shows it. */
#daily-core-loop-fit-zoom { display: none; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play #daily-core-loop-fit-zoom {
  display: flex;
  font: 700 calc(14px * var(--daily-core-loop-touch-banner-scale, 1))/1 'ET Sans', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play :is(#hint-btn, #daily-core-loop-fit-zoom) {
  position: relative;
  width: auto;
  height: calc(30px * var(--daily-core-loop-touch-banner-scale, 1));
  padding: 0 calc(13px * var(--daily-core-loop-touch-banner-scale, 1));
  border: 1px solid var(--card-navy, #010B23);
  border-radius: 15px;
  background: transparent;
  color: #111;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play #hint-btn svg { display: none; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play #hint-btn .daily-core-loop-hint-word {
  display: block;
  font: 700 calc(14px * var(--daily-core-loop-touch-banner-scale, 1))/1 'ET Sans', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play :is(#hint-btn, #daily-core-loop-fit-zoom)::before { content: ''; position: absolute; inset: -7px; }
/* EDGE SHADOW: a soft shade along each frame edge the picture runs past, on touch play (game-core.js
   syncTouchEdgeShade sets each edge's strength and colour). The shade deepens with an easing curve, not a
   straight ramp, so it reads as the picture dimming into the frame rather than as a dark band; along the
   edge it fades out well before the corners, so two shades never stack into a dark square and the seam
   between the two pictures stays one quiet band. Tuning lives in the custom properties on the root. */
.daily-core-loop-touch-play {
  --touch-edge-shade-depth: 56px;  /* how far the shade reaches into the picture */
  --touch-edge-shade-peak: .8;     /* its darkness at the frame's edge, 0 to 1 */
  --touch-edge-shade-ramp: 24px;   /* hidden picture over which it fades in; gone at the boundary */
  --touch-edge-shade-mix: .8;      /* 0 = one neutral dark shade, 1 = the picture's own colour along that edge, darkened */
}
.touch-edge-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.touch-edge-shade i {
  --touch-edge-shade-rgb: 20, 26, 31;
  position: absolute;
  display: block;
  opacity: calc(var(--touch-edge-shade-strength, 0) * var(--touch-edge-shade-peak));
  transition: opacity .18s ease-out;
}
/* EDGE CUES LEARNED: these flags are per round, matching each axis's arrow fade. */
.touch-edge-shade[data-learned-x='true'] :is(.touch-edge-shade-left, .touch-edge-shade-right),
.touch-edge-shade[data-learned-y='true'] :is(.touch-edge-shade-top, .touch-edge-shade-bottom) { opacity: 0; transition: opacity 400ms ease; }
.touch-edge-shade-left, .touch-edge-shade-right {
  top: 0; bottom: 0;
  width: var(--touch-edge-shade-depth);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
}
.touch-edge-shade-top, .touch-edge-shade-bottom {
  left: 0; right: 0;
  height: var(--touch-edge-shade-depth);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
.touch-edge-shade-left { left: 0; background: linear-gradient(90deg, rgba(var(--touch-edge-shade-rgb), 1), rgba(var(--touch-edge-shade-rgb), .64) 18%, rgba(var(--touch-edge-shade-rgb), .38) 36%, rgba(var(--touch-edge-shade-rgb), .18) 55%, rgba(var(--touch-edge-shade-rgb), .05) 76%, rgba(var(--touch-edge-shade-rgb), 0)); }
.touch-edge-shade-right { right: 0; background: linear-gradient(270deg, rgba(var(--touch-edge-shade-rgb), 1), rgba(var(--touch-edge-shade-rgb), .64) 18%, rgba(var(--touch-edge-shade-rgb), .38) 36%, rgba(var(--touch-edge-shade-rgb), .18) 55%, rgba(var(--touch-edge-shade-rgb), .05) 76%, rgba(var(--touch-edge-shade-rgb), 0)); }
.touch-edge-shade-top { top: 0; background: linear-gradient(180deg, rgba(var(--touch-edge-shade-rgb), 1), rgba(var(--touch-edge-shade-rgb), .64) 18%, rgba(var(--touch-edge-shade-rgb), .38) 36%, rgba(var(--touch-edge-shade-rgb), .18) 55%, rgba(var(--touch-edge-shade-rgb), .05) 76%, rgba(var(--touch-edge-shade-rgb), 0)); }
.touch-edge-shade-bottom { bottom: 0; background: linear-gradient(0deg, rgba(var(--touch-edge-shade-rgb), 1), rgba(var(--touch-edge-shade-rgb), .64) 18%, rgba(var(--touch-edge-shade-rgb), .38) 36%, rgba(var(--touch-edge-shade-rgb), .18) 55%, rgba(var(--touch-edge-shade-rgb), .05) 76%, rgba(var(--touch-edge-shade-rgb), 0)); }

/* REQ-2446: the overview thumbnail between the count and HINT, a picture of the original photo with a box over the part
   the frames show. The engine places and sizes it, and shows it only in touch play while picture is hidden. */
.daily-core-loop-touch-overview { display: none; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play[data-daily-core-loop-state='Playing'] .daily-core-loop-touch-overview[data-visible='true'] {
  display: block;
  position: absolute;
  translate: -50% -50%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--card-navy, #010B23);
  border-radius: 3px;
  pointer-events: none;
}
.daily-core-loop-touch-overview canvas { display: block; width: 100%; height: 100%; }
/* The box follows each pan frame by frame, so it never transitions, under the reduced-motion clamp too. */
.daily-core-loop-touch-overview-window {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--card-navy, #010B23), 0 0 0 60px rgb(1 11 35 / 45%);
  transition: none;
}

/* TOUCH PLAY (REQ-2445): the lesson card over the middle of the pair (on the seam when stacked), shown on every fill
   until Skip; the engine places it and the hand. */
[data-daily-core-loop-home-root] .daily-core-loop-touch-lesson {
  position: absolute;
  z-index: 10;
  translate: -50% -50%;
  width: min(320px, calc(100% - 42px));
  box-sizing: border-box;
  padding: 15px 18px;
  border: 1px solid #fff;
  border-radius: 12px;
  background: #fff9ee;
  box-shadow: 0 4px 18px rgb(0 0 0 / 27%);
  color: #202a24;
  font: 400 16px/1.35 'ET Sans', sans-serif;
  text-align: center;
  pointer-events: auto;
}
.daily-core-loop-touch-lesson strong {
  display: block;
  margin-bottom: 5px;
  font: 400 22px/1.2 'ET Title Slab', Georgia, serif;
}
.daily-core-loop-touch-lesson > span { display: block; }
/* LESSON CARD NOTE (PM ticket SD-759 §12.4): a second line under the body, that play tips can be turned off in
   Settings: its own line, smaller than the body and in the body's colour softened, so the card grows a little. */
.daily-core-loop-touch-lesson > small {
  display: block;
  margin-top: 8px;
  color: rgb(32 42 36 / 80%);
  font-size: 14px;
  line-height: 1.3;
}
.daily-core-loop-touch-lesson button {
  display: inline-flex;
  align-items: center;
  gap: 7.5px;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #111;
  font: 700 18px/1.2 'ET Sans', sans-serif;
  cursor: pointer;
}
.daily-core-loop-touch-lesson button svg {
  width: 9px;
  height: 9px;
  stroke-width: 2.2;
  translate: 0 3.5px; /* from the button's middle down onto the baseline of the words, as Quit's cross sits */
}
.daily-core-loop-touch-lesson button span {
  text-decoration: underline;
  text-underline-position: from-font;
}

/* TOUCH PLAY (REQ-2445): edge arrows. Each photograph draws its own inside its own clip, so nothing crosses the
   seam; every zone is 28px deep and stops 28px short of the corners, so the four never meet. An arrow shows while
   its edge hides picture; a tap on it moves both pictures that way. */
.daily-core-loop-edge-cue {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.daily-core-loop-edge-cue[data-visible='true'] { opacity: 1; }
.daily-core-loop-edge-cue:is([data-edge='left'], [data-edge='right']) { top: 28px; bottom: 28px; width: 28px; }
.daily-core-loop-edge-cue:is([data-edge='top'], [data-edge='bottom']) { left: 28px; right: 28px; height: 28px; }
.daily-core-loop-edge-cue[data-edge='left'] { left: 0; }
.daily-core-loop-edge-cue[data-edge='right'] { right: 0; }
.daily-core-loop-edge-cue[data-edge='top'] { top: 0; }
.daily-core-loop-edge-cue[data-edge='bottom'] { bottom: 0; }
.daily-core-loop-edge-cue button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.daily-core-loop-edge-cue:is([data-edge='top'], [data-edge='bottom']) button { width: 44px; height: 100%; }
.daily-core-loop-edge-cue[data-visible='true'] button { pointer-events: auto; }
/* EDGE CUES LEARNED: opacity follows the visible rule at equal specificity; the two-attribute button
   rule releases hits immediately while the learned axis's arrows and shade fade together. */
.daily-core-loop-edge-cue[data-learned='true'] { opacity: 0; transition-duration: 400ms; }
.daily-core-loop-edge-cue[data-learned='true'][data-visible] button { pointer-events: none; }
.daily-core-loop-edge-cue svg {
  opacity: var(--touch-edge-shade-arrows, 1);
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 80%));
}
.daily-core-loop-edge-cue[data-edge='left'] svg { rotate: 180deg; }
.daily-core-loop-edge-cue[data-edge='top'] svg { rotate: -90deg; }
.daily-core-loop-edge-cue[data-edge='bottom'] svg { rotate: 90deg; }
@media (prefers-reduced-motion: reduce) {
  .daily-core-loop-edge-cue { transition: none; }
}

/* FULL WIDTH: on touch play the frames have no border (geometry.js lays them edge to edge with a 2px seam);
   the pair's white background is the one line between the two pictures. */
[data-daily-core-loop-home-root].daily-core-loop-touch-play [data-daily-core-loop-transition-photo],
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-puzzle .image-panel,
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-puzzle .image-panel:hover { border-width: 0; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play [data-daily-core-loop-transition-photo]::before,
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-puzzle .image-panel::before { border: 0; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-puzzle .detective-images { background: #fff; }
/* FULL WIDTH: with no border, the two paints (the white frame, off above, and the .75px hairline that fades in at
   the win and on replay) sit on the picture's own edge, inside its clip, instead of 2px outside it where the clip
   would hide the hairline. */
[data-daily-core-loop-home-root].daily-core-loop-touch-play [data-daily-core-loop-transition-photo]::before,
[data-daily-core-loop-home-root].daily-core-loop-touch-play [data-daily-core-loop-transition-photo]::after,
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-puzzle .image-panel::before,
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-puzzle .image-panel::after { inset: 0; }

/* Touch play omits the date; the banner rules below place Quit and Pause. */
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-run-date { display: none; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-quit {
  translate: 0 -50%;
  padding: 0;
  font-size: 18px;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-quit svg {
  width: 15px;
  height: 15px;
}
/* Sound waits off the tab line while the photographs are out; it comes back with the card. */
[data-daily-core-loop-home-root].daily-core-loop-touch-play:is([data-daily-core-loop-state='Opening'], [data-daily-core-loop-state='Playing']) .game-sound-tab {
  opacity: 0;
  pointer-events: none;
}
/* TOUCH PLAY: the tablet line: "Drag to move" and "Pinch to zoom" in italic, each
   after its icon, sized by the words' capital height (icon 17px and 15px, 10px to the words, 40px
   between the items). The italic is ET Sans's own Regular Italic, not a slanted upright; white on the dark strip
   needs no shadow. Its family is the line's own: in the shared 'ET Sans' family every italic text that falls back
   to ET Sans would download it too, at a tap. */
@font-face {
  font-family: 'ET Sans Touch Play Italic';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('cards/fonts/Sans/ET%20Sans/Web%20Fonts/woff2/ETSans-RegularItalic.woff2') format('woff2');
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play[data-daily-core-loop-state='Playing'] .daily-core-loop-touch-play-hint:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 40px;
  position: absolute;
  z-index: 7;
  margin: 0;
  translate: 0 -50%;
  overflow: hidden;
  color: #fff;
  font: italic 400 16px/1.2 'ET Sans Touch Play Italic', 'ET Sans', sans-serif;
  white-space: nowrap;
  pointer-events: none;
}
.daily-core-loop-touch-play-hint-item {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}
/* ET Sans draws its capitals 1.25px below the middle of its 16px line; lifted, they share the icons' middle, which
   is the strip's. */
.daily-core-loop-touch-play-hint-item > span { translate: 0 -1.25px; }
.daily-core-loop-touch-play-hint svg {
  flex: none;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.33333;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.daily-core-loop-touch-play-hint-item:first-child svg { width: 17.25px; height: 17.65px; }
.daily-core-loop-touch-play-hint-item:last-child svg { width: 14.93px; height: 14.93px; }
/* A tablet's Quit keeps its baseline cross, words and full target height in the banner. */
[data-daily-core-loop-home-root].daily-core-loop-touch-play.daily-core-loop-touch-tablet .daily-core-loop-quit {
  gap: 7.5px;
  padding: 0; /* Banner placement owns the tablet Quit inset. */
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play.daily-core-loop-touch-tablet .daily-core-loop-quit svg {
  width: 9px;
  height: 9px;
  opacity: 1;
  stroke-width: 2.2;
  translate: 0 3.5px; /* from the button's middle down onto the baseline of Quit's 18px words */
}
/* BANNER PAUSE. Quit and Pause join the banner on touch screens, so the tab line has no job
   during play and is away (it returns with the menu, and for the card); the pictures take its height. Quit leads
   the banner and the time ends it, its Pause button inside it: the two are one tap target (state toggles on a tap
   anywhere on the clock). A phone shows rings with a mark (Quit's cross, Pause's bars); a tablet shows the words
   "x Quit" and "Pause" / "Resume". While paused the time turns the envelope's indigo, the bars become a play
   mark, a veil covers both pictures (no find, no pan) and HINT and the pill wait. */
[data-daily-core-loop-home-root].daily-core-loop-touch-play:is([data-daily-core-loop-state='Opening'], [data-daily-core-loop-state='Playing']):not(.menu-open) [data-shared-game-bar-host] {
  visibility: hidden;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-quit {
  translate: 0 -50%;
  color: #111;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-quit span { font-size: 18px; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play:not(.daily-core-loop-touch-tablet) .daily-core-loop-quit {
  width: 44px;
  padding: 0;
  justify-content: center;
  gap: 0;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play:not(.daily-core-loop-touch-tablet) .daily-core-loop-quit span {
  position: absolute; /* the word stays for a screen reader; the ring is the button a phone shows */
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play:not(.daily-core-loop-touch-tablet) .daily-core-loop-quit svg,
[data-daily-core-loop-home-root].daily-core-loop-touch-play:not(.daily-core-loop-touch-tablet) .daily-core-loop-clock .daily-core-loop-touch-pause svg {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 7px;
  border: 1px solid var(--card-navy, #010B23);
  border-radius: 50%;
  opacity: 1;
  stroke-width: 1.8;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-clock {
  padding: 10px 0 10px 10px; /* a 44px-tall tap target around the 24px time */
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-touch-pause {
  display: flex;
  align-items: center;
  gap: 7.5px;
  margin-left: calc(2px * var(--daily-core-loop-touch-banner-scale, 1));
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 700 18px/1 'ET Sans', sans-serif;
  cursor: pointer;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-touch-pause:focus-visible { outline: 2px solid var(--card-navy, #010B23); outline-offset: 2px; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play.daily-core-loop-touch-tablet .daily-core-loop-clock .daily-core-loop-touch-pause svg { width: 14px; height: 14px; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play:not(.daily-core-loop-touch-tablet) .daily-core-loop-touch-pause-word { display: none; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play.daily-core-loop-touch-tablet .daily-core-loop-touch-pause { margin-left: calc(18px * var(--daily-core-loop-touch-banner-scale, 1)); } /* with the clock's 6px gap, 24px from the time, as Quit to the count */
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-clock .daily-core-loop-touch-play-mark,
[data-daily-core-loop-home-root].daily-core-loop-touch-play.daily-core-loop-touch-paused .daily-core-loop-clock .daily-core-loop-touch-pause-mark { display: none; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play.daily-core-loop-touch-paused .daily-core-loop-clock .daily-core-loop-touch-play-mark { display: block; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play.daily-core-loop-touch-paused .daily-core-loop-clock { color: #3b3495; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play.daily-core-loop-touch-paused :is(#hint-btn, #daily-core-loop-fit-zoom) {
  opacity: .4;
  pointer-events: none;
}
.daily-core-loop-touch-pause-veil { display: none; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-touch-pause-veil:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 8;
  box-sizing: border-box;
  padding: 16px;
  background: rgb(1 11 35 / 95%); /* BANNER PAUSE: dark enough that no difference can be spotted through it */
  color: #fff;
  font: 400 22px/1.3 'ET Sans', sans-serif;
  text-align: center;
  pointer-events: auto;
  animation: daily-core-loop-touch-banner-in 200ms ease-out backwards;
}
.daily-core-loop-touch-pause-veil p { margin: 0; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play:is([data-daily-core-loop-state='Opening'], [data-daily-core-loop-state='Playing']) :is(.game-fullscreen, .game-open-full-page) {
  visibility: hidden;
}

/* The title tab: on a touch screen it is as wide as its words, and in play a pause mark stands for the menu's
   squares (the cross still shows while the menu is open). State fades the words out, eases the width, then
   fades the new words in (writeTouchPlayTitle). SETTINGS (PM ticket SD-759 §12.1): the tab reads "Settings" and is as
   wide as its words on every screen, a mouse screen's too (the shared bar gives it a fixed 192px). */
[data-daily-core-loop-home-root] .shared-game-bar.daily-core-loop-game-bar-adapted .shared-game-bar-title { flex: 0 0 auto; }
@media (pointer: coarse) {
  [data-daily-core-loop-home-root] .shared-game-bar.daily-core-loop-game-bar-adapted .shared-game-bar-title {
    transition: color 2s ease, border-color 2s ease, border-radius .16s ease, width .25s ease;
  }
}
[data-daily-core-loop-home-root] .shared-game-bar-title > :is(.shared-game-bar-icon, .shared-game-bar-title-label) { transition: opacity .15s ease; }
[data-daily-core-loop-home-root] .shared-game-bar-title.daily-core-loop-title-swapping > :is(.shared-game-bar-icon, .shared-game-bar-title-label) { opacity: 0; }
[data-daily-core-loop-home-root] .game-menu-icon-pause,
[data-daily-core-loop-home-root] .daily-core-loop-title-pause .game-menu-icon-grid { display: none; }
[data-daily-core-loop-home-root]:not(.menu-open) .daily-core-loop-title-pause .game-menu-icon-pause { display: block; }
@media (prefers-reduced-motion: reduce) {
  [data-daily-core-loop-home-root] .shared-game-bar.daily-core-loop-game-bar-adapted .shared-game-bar-title,
  [data-daily-core-loop-home-root] .shared-game-bar-title > :is(.shared-game-bar-icon, .shared-game-bar-title-label) { transition: none; }
}

/* Game paused (the menu open mid-round) sits on the tab line in the tablet line's place, Quit being away. */
[data-daily-core-loop-home-root].daily-core-loop-touch-play .game-menu-paused[data-game-menu-paused] {
  left: var(--daily-core-loop-touch-paused-left, 0px);
  right: auto;
  top: var(--daily-core-loop-touch-paused-top, 16px);
  bottom: auto;
  width: var(--daily-core-loop-touch-paused-width, 100%);
  translate: 0 -50%;
  overflow: hidden;
  font-size: 16px;
  line-height: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-daily-core-loop-home-root].daily-core-loop-touch-play .game-menu-paused[data-game-menu-paused] span { display: none; }
[data-daily-core-loop-home-root].daily-core-loop-touch-play.daily-core-loop-menu-paused .daily-core-loop-touch-play-hint { visibility: hidden; }

/* A phone deals the two photographs out of its envelope as a desktop does, with no card around them. */
.daily-core-loop-phone-layout.daily-core-loop-touch-play[data-daily-core-loop-state='Opening'].daily-core-loop-phase-deal [data-daily-core-loop-card-drawing] {
  visibility: hidden;
}
.daily-core-loop-phone-layout.daily-core-loop-touch-play[data-daily-core-loop-state='Opening'].daily-core-loop-phase-deal [data-daily-core-loop-transition-photo='original'] {
  transform-origin: 50% 50%;
  animation: daily-core-loop-deal-original 1050ms cubic-bezier(.5, .1, .25, 1) both;
}
.daily-core-loop-phone-layout.daily-core-loop-touch-play[data-daily-core-loop-state='Opening'].daily-core-loop-phase-deal [data-daily-core-loop-transition-photo='modified'] {
  transform-origin: 50% 50%;
  animation: daily-core-loop-deal-modified 1050ms cubic-bezier(.5, .1, .25, 1) 120ms both;
}
@media (prefers-reduced-motion: reduce) {
  /* The reduced-motion clamp would turn the switch to each photo's own centre into a 1 ms transition,
     so the 1 ms deal turned about the card's pivot; the pivot changes at once instead. */
  .daily-core-loop-phone-layout.daily-core-loop-touch-play[data-daily-core-loop-state='Opening'].daily-core-loop-phase-deal [data-daily-core-loop-transition-photo] {
    animation-duration: 1ms;
    animation-delay: 0ms;
    transition: none;
  }
}

/* SD-759: free banner space without hiding the later Pause button’s nested icon. */
[data-daily-core-loop-home-root].daily-core-loop-touch-play .daily-core-loop-clock > svg { display: none; }