/* town-dusk.css (TW8; town DESIGN §2.11, §2.12, §2.2, §8): the night card over the night island, the 9-10 sun's golden-hour
   glow and the grown-up video key on Town's films shelf, on the core tokens. Every selector names a tw- class.
   The night card: the night tableau holds alone for 3 s (dusk.js), then three round buttons in a row fade in, all 96 px with
   the same neutral felt styling (none coral, none pulsing): Watch again, Morning, Films; a 68 px naming button beside them
   (on a phone held upright, on its own line above them) when the credits hold an unnamed friend. 6-8 sees no words; 9-10
   a small label under each. The row sits low (a thumb's
   reach), above the system bar's 24 px and every safe area; the grown-ups key (the core header, above this layer) stays
   free. The press is the HUD's: a scale to .94 in one frame (.is-down) and back on the token spring. */

.tw-night { position: fixed; inset: 0; z-index: var(--z-view); pointer-events: none; }
.tw-night-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(36, 30, 51, 0) 0%, rgba(36, 30, 51, 0) 58%, rgba(36, 30, 51, .28) 100%); }
.tw-night-row { position: absolute; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; align-items: flex-end; gap: 22px; padding: 0 calc(16px + env(safe-area-inset-right, 0px)) 0 calc(16px + env(safe-area-inset-left, 0px));
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 420ms ease, transform 420ms var(--spring), visibility 0s linear 420ms; }
.tw-night-row.tw-night-on { opacity: 1; visibility: visible; transform: none; transition: opacity 420ms ease, transform 420ms var(--spring), visibility 0s; }

.tw-night .tw-night-btn { position: relative; flex: none; width: 96px; height: 96px; padding: 0; margin: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 0 4px rgba(255, 251, 243, .35), var(--shadow-lift), var(--press); touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform var(--t-micro) var(--spring), box-shadow var(--t-micro) ease; }
.tw-night .tw-night-btn.is-down { transform: scale(.94); transition-duration: 0ms; }
.tw-night .tw-night-btn:focus-visible { outline: 3px solid var(--card); outline-offset: 4px; }
.tw-night .tw-night-ico { display: grid; place-items: center; width: 100%; height: 100%; pointer-events: none; }
.tw-night .tw-night-ico .ico { width: 44%; height: 44%; stroke-width: 2.3; }
.tw-night .tw-night-btn.tw-night-name { width: 68px; height: 68px; align-self: center; }
.tw-night .tw-night-word { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 3px 10px; border-radius: 999px; background: var(--overlay-bg); color: var(--overlay-ink); font-size: 15px; font-weight: 750; line-height: 1.2; }
.tw-night.tw-night-words .tw-night-row { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
/* a phone held upright has no room for four in a row (3 × 96 + 68 and the gaps pass 358 px): the naming button takes its
   own line above the three, centred (its side margins fill the line), and 9-10's words get room between the lines */
@media (max-width: 480px) {
  .tw-night-row { flex-wrap: wrap; row-gap: 16px; }
  .tw-night .tw-night-btn.tw-night-name { order: -1; margin: 0 calc(50% - 34px); }
  .tw-night.tw-night-words .tw-night-row { row-gap: 46px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .tw-night-row { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); gap: 28px; }
  .tw-night.tw-night-words .tw-night-row { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 700px) and (min-height: 700px) {
  .tw-night .tw-night-btn { width: 110px; height: 110px; }
  .tw-night .tw-night-btn.tw-night-name { width: 78px; height: 78px; }
  .tw-night-row { gap: 30px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* 9-10: the sun has shown since 2 min of play; in golden hour it glows (a static warm ring, no pulse) */
.tw-hud .tw-btn.tw-sun.tw-sun-golden { box-shadow: 0 0 0 5px rgba(255, 214, 160, .9), 0 0 22px 6px rgba(255, 196, 120, .55), var(--shadow-lift), var(--press); }

/* Town's films shelf: the grown-up video key beside each recap card (outside the card's button) */
.tw-films .tw-film-cell { position: relative; display: grid; min-width: 0; }
.tw-films .tw-film-cell > .film-card { width: 100%; }
.tw-films .tw-film-video { position: absolute; right: 10px; bottom: 10px; width: 60px; height: 60px; padding: 0; margin: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--overlay-bg); color: var(--ink); cursor: pointer; box-shadow: var(--shadow); touch-action: manipulation;
  transition: transform var(--t-micro) var(--spring); }
.tw-films .tw-film-video:active { transform: scale(.94); }
.tw-films .tw-film-video .ico { width: 26px; height: 26px; }

@media (prefers-reduced-motion: reduce) {
  .tw-night-row, .tw-night-row.tw-night-on { transform: none; transition: opacity 200ms ease, visibility 0s; }
}