/* Touch Grass UI overlay.
   One visual world: frosted, softly luminous glass over the living scene. Theme tokens (--ink, --glass, ...) are
   rewritten by ui.js as the scene moves between day and night; the values below are the daytime defaults.
   Mobile first; everything animates with transform/opacity. #ui itself never takes pointer events. */

#ui {
  --font-display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system,
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-ui: 'Figtree', 'Avenir Next', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-wordmark: 'Outfit', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial,
    sans-serif;

  /* theme tokens (day defaults; ui.js mixes toward night) */
  --ink: rgba(14, 30, 23, 1);
  --ink-soft: rgba(14, 30, 23, 0.7);
  --ink-faint: rgba(14, 30, 23, 0.46);
  --glass: rgba(250, 252, 246, 0.5);
  --glass-strong: rgba(248, 251, 245, 0.8);
  --glass-hi: rgba(255, 255, 255, 0.85);
  --glass-rim: rgba(255, 255, 255, 0.42);
  --glass-edge: rgba(18, 40, 28, 0.1);
  --shadow: rgba(22, 44, 30, 0.2);
  --fill: rgba(14, 30, 23, 0.06);
  --fill-strong: rgba(14, 30, 23, 0.13);
  --paper: rgba(250, 252, 246, 1);
  --on: rgba(39, 112, 74, 1);
  --focus: rgba(17, 58, 40, 0.95);
  --scene-glow: rgba(255, 252, 238, 0);
  --accent: #9fdc6a;
  --bliss-warm: #ffd36e;
  --bliss-glow: rgba(255, 214, 120, 0.85);
  --night: 0;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --gutter: 12px;
  --blur: 20px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.75, 0.2);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Inside X's in-app browser its floating controls cover the bottom ~52px: keep the dock and hints above them. */
#ui.tg-xapp {
  --safe-b: calc(env(safe-area-inset-bottom, 0px) + 52px);
}

/* The pages load this stylesheet without blocking their first paint and keep #ui transparent until it has arrived
   (index.html, play/index.html: #ui { opacity: 0 }), so the overlay never flashes unstyled. The pages add .tg-css two
   frames after it applies: until then nothing in the overlay transitions (closed sheets and chips would otherwise
   slide across the loading picture from their unstyled positions), and the overlay stays hidden. */
html.tg-css #ui {
  opacity: 1;
}

html:not(.tg-css) #ui *,
html:not(.tg-css) #ui *::before,
html:not(.tg-css) #ui *::after {
  transition: none !important;
}

#ui *,
#ui *::before,
#ui *::after {
  box-sizing: border-box;
}

#ui [hidden] {
  display: none !important;
}

/* Resets use :where() so they carry no ID specificity and every component class below wins. */
:where(#ui) button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

:where(#ui) :is(h1, h2, h3, p, dl, dd) {
  margin: 0;
}

:where(#ui) :focus {
  outline: none;
}

:where(#ui) :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.tg-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tg-ic {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
}

.tg-ic svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---- glass ------------------------------------------------------------------------------------------------- */

.tg-glass,
.tg-glass-strong {
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7);
  backdrop-filter: blur(var(--blur)) saturate(1.7);
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    inset 0 0 0 1px var(--glass-rim),
    0 0 0 1px var(--glass-edge),
    0 18px 44px -20px var(--shadow),
    0 3px 10px -4px var(--shadow);
  transition:
    background-color 0.6s ease,
    color 0.6s ease,
    box-shadow 0.6s ease;
}

.tg-glass {
  background-color: var(--glass);
}

.tg-glass-strong {
  background-color: var(--glass-strong);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tg-glass {
    background-color: var(--glass-strong);
  }
}

/* Backdrop blur re-filters the live canvas under every glass piece each frame. Phones get a lighter recipe (smaller
   radius, no saturate pass); the low tier drops it and leans on a denser glass instead. */
@media (pointer: coarse) {
  #ui {
    --blur: 12px;
  }

  .tg-glass,
  .tg-glass-strong {
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
  }

  .tg-curtain {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

#ui.tg-lowfx .tg-glass,
#ui.tg-lowfx .tg-glass-strong,
#ui.tg-lowfx .tg-tile-lock,
#ui.tg-lowfx .tg-welcome {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#ui.tg-lowfx .tg-glass {
  background-color: var(--glass-strong);
}

#ui.tg-lowfx .tg-curtain {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: radial-gradient(130% 95% at 50% 42%, rgba(12, 22, 19, 0.82), rgba(5, 11, 10, 0.97));
}

/* Locked postcards keep their dimmed colours but skip the frosting. */
#ui.tg-lowfx .tg-tile.has-photo .tg-tile-photo {
  filter: none;
}

/* At night the glass catches a faint moonlit rim. */
#ui.tg-night .tg-glass,
#ui.tg-night .tg-glass-strong {
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    inset 0 0 0 1px var(--glass-rim),
    0 0 0 1px var(--glass-edge),
    0 0 28px -8px var(--scene-glow),
    0 18px 44px -20px var(--shadow);
}

/* ---- layers ------------------------------------------------------------------------------------------------- */

.tg-floaters {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.tg-bliss {
  z-index: 2;
}

.tg-curtain {
  z-index: 3;
}

.tg-curtain-name {
  z-index: 4;
}

.tg-hud {
  z-index: 5;
}

.tg-dock-wrap,
.tg-restore {
  z-index: 6;
}

.tg-toasts {
  z-index: 7;
}

.tg-scrim {
  z-index: 8;
}

.tg-sheet {
  z-index: 9;
}

.tg-start {
  z-index: 10;
}

/* HUD + dock appear after Begin and hide in zen mode. The wrappers only flip visibility (which also keeps hidden
   controls out of the tab order); the glass pieces fade themselves, because an ancestor with opacity < 1 becomes a
   backdrop root and would switch the frosted blur off mid-fade. Children use visibility: inherit when "on". */
.tg-hud,
.tg-dock-wrap {
  visibility: hidden;
  transition: visibility 0s linear 0.7s;
}

.tg-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#ui.tg-begun:not(.tg-zen) .tg-hud,
#ui.tg-begun:not(.tg-zen) .tg-dock-wrap {
  visibility: visible;
  transition: visibility 0s;
}

.tg-meter,
.tg-dock {
  opacity: 0;
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.7s var(--ease-out),
    background-color 0.6s ease,
    box-shadow 0.6s ease;
}

.tg-meter {
  transform: translateY(-10px);
}

.tg-dock {
  transform: translateY(16px);
}

#ui.tg-begun:not(.tg-zen) .tg-meter,
#ui.tg-begun:not(.tg-zen) .tg-dock {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.8s var(--ease-out),
    background-color 0.6s ease,
    box-shadow 0.6s ease;
}

/* First reveal after Begin: slower and staggered (ui.js adds tg-settled once the entrance is done). */
#ui.tg-begun:not(.tg-settled) .tg-meter,
#ui.tg-begun:not(.tg-settled) .tg-dock {
  transition-duration: 1s, 1.1s, 0.6s, 0.6s;
  transition-delay: 0.1s, 0.1s, 0s, 0s;
}

#ui.tg-begun:not(.tg-settled) .tg-dock {
  transition-delay: 0.28s, 0.28s, 0s, 0s;
}

/* While the hand is down (and ~1.5 s after, see ui.js) the dock steps back so the hand and the near shoreline stay
   visible. It stays fully clickable, and wakes up on hover or keyboard focus. */
#ui.tg-begun.tg-touching:not(.tg-zen):not(.tg-tray-open) .tg-dock {
  opacity: 0.25;
  transform: translateY(8px);
  transition:
    opacity 0.35s ease,
    transform 0.5s var(--ease-out),
    background-color 0.6s ease,
    box-shadow 0.6s ease;
}

@media (hover: hover) {
  #ui.tg-begun.tg-touching:not(.tg-zen) .tg-dock:hover {
    opacity: 1;
    transform: none;
  }
}

#ui.tg-begun.tg-touching:not(.tg-zen) .tg-dock:focus-within {
  opacity: 1;
  transform: none;
}

#ui.tg-zen .tg-floaters,
#ui.tg-zen .tg-toast:not(.tg-toast-unlock) {
  display: none;
}

/* ---- HUD: calm + bliss ------------------------------------------------------------------------------------- */

.tg-meter {
  position: absolute;
  top: calc(var(--safe-t) + var(--gutter));
  left: calc(var(--safe-l) + var(--gutter));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 18px 5px 5px;
  border-radius: 999px;
}

.tg-ring {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
}

.tg-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tg-ring-stop-a {
  stop-color: var(--accent);
}

.tg-ring-stop-b {
  stop-color: var(--bliss-warm);
}

.tg-ring-track {
  fill: none;
  stroke: var(--fill-strong);
  stroke-width: 3;
}

.tg-ring-fill {
  fill: none;
  stroke: url(#tg-bliss-grad);
  stroke-width: 3.4;
  stroke-linecap: round;
  transition: stroke-width 0.4s ease;
}

.tg-ring-ic {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  color: var(--ink);
}

.tg-ring-glint {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 68%, rgba(255, 250, 222, 0.95) 78%, transparent 88%);
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 59%, #000 73%, transparent 75%);
  mask: radial-gradient(circle, transparent 57%, #000 59%, #000 73%, transparent 75%);
  transition: opacity 0.6s ease;
}

/* Near full: the ring breathes and a glint orbits it. */
.tg-ring.is-near .tg-ring-fill {
  stroke-width: 4;
  animation: tg-ring-breathe 1.5s ease-in-out infinite;
}

.tg-ring.is-near .tg-ring-glint {
  opacity: 1;
  animation: tg-spin 2.2s linear infinite;
}

.tg-ring.is-full .tg-ring-fill {
  stroke-width: 4.6;
  filter: drop-shadow(0 0 9px var(--bliss-glow));
}

.tg-ring.is-full .tg-ring-ic {
  color: #b77a12;
}

@keyframes tg-ring-breathe {
  0%,
  100% {
    filter: drop-shadow(0 0 1px var(--bliss-glow));
  }
  50% {
    filter: drop-shadow(0 0 7px var(--bliss-glow));
  }
}

@keyframes tg-spin {
  to {
    transform: rotate(360deg);
  }
}

.tg-points {
  display: flex;
  flex-direction: column;
  min-width: 4.5ch;
  line-height: 1;
}

.tg-points-num {
  font-family: var(--font-ui);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.tg-points-label {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- HUD: flow (combo) ------------------------------------------------------------------------------------- */

.tg-combo {
  --cx: 0px;
  position: absolute;
  top: calc(var(--safe-t) + var(--gutter));
  right: calc(var(--safe-r) + var(--gutter));
  display: flex;
  align-items: center;
  gap: 6px;
  height: 54px;
  padding: 0 16px 0 18px;
  border-radius: 999px;
  overflow: hidden;
  opacity: 0;
  transform: translate(var(--cx), -8px) scale(0.92);
  transform-origin: 100% 0;
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.tg-combo.is-on {
  opacity: 1;
  transform: translate(var(--cx), 0) scale(1);
}

.tg-combo-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tg-combo-x {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-soft);
  margin-left: 2px;
}

.tg-combo-step {
  display: inline-block;
  min-width: 1.4ch;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transform-origin: 30% 60%;
}

.tg-combo-mult {
  display: inline-block;
  max-width: 0;
  padding: 4px 0;
  margin-left: 0;
  border-radius: 999px;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  color: #10241a;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.6);
  transition:
    max-width 0.5s var(--ease-out),
    padding 0.5s var(--ease-out),
    margin 0.5s var(--ease-out),
    opacity 0.4s ease,
    transform 0.5s var(--ease-spring);
}

.tg-combo-mult.is-on {
  max-width: 96px;
  padding: 5px 9px;
  margin-left: 6px;
  opacity: 1;
  transform: none;
}

/* Multiplier level-up: one bright sweep across the pill. */
.tg-combo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 240, 0.75) 50%, transparent 70%);
  transform: translateX(-120%);
  opacity: 0;
}

.tg-combo.is-level::after {
  animation: tg-sweep 1.1s var(--ease-out);
}

@keyframes tg-sweep {
  0% {
    transform: translateX(-120%);
    opacity: 1;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

/* ---- floating +N -------------------------------------------------------------------------------------------- */

.tg-float {
  --fc: #efffd2;
  --fg: rgba(170, 240, 110, 0.75);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  white-space: nowrap;
  will-change: transform, opacity;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fc);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.38),
    0 0 18px var(--fg);
}

.tg-float[data-kind='water'] {
  --fc: #dff8ff;
  --fg: rgba(110, 215, 255, 0.8);
}

.tg-float[data-kind='ground'] {
  --fc: #fff0d8;
  --fg: rgba(255, 196, 120, 0.65);
}

.tg-float[data-kind='collect'] {
  --fc: #fff6c4;
  --fg: rgba(255, 210, 80, 0.95);
}

.tg-float[data-kind='bonus'] {
  --fc: #ffffff;
  --fg: rgba(255, 186, 110, 1);
}

.tg-float-mult {
  margin-left: 0.22em;
  font-family: var(--font-ui);
  font-size: 0.55em;
  font-weight: 800;
  opacity: 0.85;
  vertical-align: 0.3em;
}

/* ---- bliss moment ------------------------------------------------------------------------------------------ */

.tg-bliss {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}

.tg-bliss-light {
  position: absolute;
  inset: -25%;
  opacity: 0;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(255, 246, 220, 0.78), rgba(255, 216, 150, 0.4) 36%, rgba(255, 190, 120, 0.14) 62%, transparent 82%);
  mix-blend-mode: screen;
}

.tg-bliss-word {
  position: relative;
  margin-top: -10vh;
  padding-left: 0.22em; /* balances the trailing letter-spacing */
  opacity: 0;
  font-family: var(--font-display);
  font-size: clamp(56px, 15vw, 136px);
  font-weight: 300;
  letter-spacing: 0.22em;
  color: #fffaf0;
  text-shadow:
    0 0 28px rgba(255, 222, 160, 0.95),
    0 0 90px rgba(255, 186, 110, 0.65);
}

/* ---- curtain ------------------------------------------------------------------------------------------------ */

.tg-curtain {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(130% 95% at 50% 42%, rgba(12, 22, 19, 0.5), rgba(5, 11, 10, 0.9));
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  backdrop-filter: blur(24px) saturate(1.25);
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}

.tg-curtain.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.45s ease,
    visibility 0s;
}

/* Place-switch dissolve (ui.curtain with a snap): the last frame as a still, softening and drifting while the next
   place builds underneath, then fading straight into it. Opacity and transform only, so it stays smooth on the
   compositor while the main thread rebuilds the scene. */
.tg-snap {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.tg-snap > canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 46%;
  transition: transform 1.8s var(--ease-out);
}

.tg-snap-soft {
  opacity: 0;
  transition:
    opacity 0.36s ease,
    transform 1.8s var(--ease-out) !important;
}

.tg-snap-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 95% at 50% 42%, rgba(12, 22, 19, 0.1), rgba(5, 11, 10, 0.5));
  opacity: 0;
  transition: opacity 0.36s ease;
}

.tg-snap.is-on > canvas {
  transform: scale(1.045);
}

.tg-snap.is-on .tg-snap-soft,
.tg-snap.is-on .tg-snap-veil {
  opacity: 1;
}

.tg-snap.is-out {
  opacity: 0;
}

#ui.tg-reduce .tg-snap > canvas,
#ui.tg-reduce .tg-snap.is-on > canvas {
  transform: none;
}

#ui.tg-reduce .tg-snap {
  transition-duration: 0.25s;
}

.tg-curtain-name {
  position: absolute;
  left: 50%;
  top: 41%;
  width: min(calc(100% - 40px), 640px);
  text-align: center;
  color: #f6f8ef;
  opacity: 0;
  filter: blur(8px);
  transform: translate(-50%, -50%) translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.7s ease,
    filter 0.7s ease,
    transform 1.2s var(--ease-out);
}

.tg-curtain-name.is-on {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%);
  transition-delay: 0.12s;
}

.tg-curtain-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.tg-curtain-title {
  margin: 8px 0 6px;
  font-family: var(--font-display);
  font-size: clamp(38px, 9vw, 72px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

.tg-curtain-blurb {
  font-size: 15.5px;
  opacity: 0.86;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

/* ---- dock ---------------------------------------------------------------------------------------------------- */

.tg-dock-wrap {
  position: absolute;
  left: calc(var(--safe-l) + var(--gutter));
  right: calc(var(--safe-r) + var(--gutter));
  bottom: calc(var(--safe-b) + var(--gutter));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.tg-dock {
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 5px;
  border-radius: 999px;
  pointer-events: auto;
}

.tg-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  min-width: 44px;
  padding: 0 6px;
  border-radius: 999px;
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    transform 0.2s ease;
}

@media (hover: hover) {
  .tg-chip:hover,
  .tg-icon-btn:hover {
    background-color: var(--fill);
  }
}

.tg-chip:active,
.tg-icon-btn:active {
  transform: scale(0.95);
}

.tg-chip[aria-expanded='true'],
.tg-icon-btn[aria-expanded='true'] {
  background-color: var(--fill-strong);
}

.tg-orb {
  --orb-a: #d9efc4;
  --orb-b: #4d8a4a;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(165deg, var(--orb-a), var(--orb-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 2px 7px -2px rgba(0, 0, 0, 0.35);
}

.tg-chip-text {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.tg-chip-place-name {
  display: none;
  max-width: 13ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tg-chip-caret {
  display: none;
  width: 16px;
  height: 16px;
  margin-left: -2px;
  color: var(--ink-soft);
  transition: transform 0.35s var(--ease-out);
}

.tg-chip[aria-expanded='true'] .tg-chip-caret {
  transform: rotate(180deg);
}

.tg-chip-dot {
  position: absolute;
  top: 6px;
  left: 31px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--paper);
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.3s ease,
    transform 0.4s var(--ease-spring);
}

.tg-chip-dot.is-on {
  opacity: 1;
  transform: none;
  animation: tg-pulse 2.4s ease-in-out infinite;
}

.tg-chip-time {
  gap: 6px;
  padding: 0 12px 0 10px;
}

.tg-chip-time-ic {
  color: var(--ink);
}

.tg-chip-time-text {
  min-width: 6.3ch;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.tg-chip-sub {
  display: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.tg-dock-sep {
  width: 1px;
  height: 22px;
  margin: 0 3px;
  background: var(--fill-strong);
  flex: none;
}

.tg-icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  transition:
    background-color 0.25s ease,
    transform 0.2s ease,
    opacity 0.25s ease;
}

.tg-sound-btn.is-muted .tg-ic {
  opacity: 0.6;
}

/* Tiny dot under the sound icon hints at the long-press tray. */
.tg-sound-more {
  position: absolute;
  bottom: 7px;
  left: 50%;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}

.tg-fs-btn {
  display: none;
}

/* Desktop tooltips (pointer devices only). */
@media (hover: hover) and (pointer: fine) {
  .tg-dock [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    padding: 6px 10px;
    border-radius: 9px;
    background: var(--ink);
    color: var(--paper);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition:
      opacity 0.18s ease,
      transform 0.25s var(--ease-out);
  }

  .tg-dock [data-tip]:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 0.5s;
  }

  #ui.tg-tray-open .tg-dock [data-tip]::after {
    display: none;
  }
}

/* ---- hints above the dock --------------------------------------------------------------------------------- */

.tg-hints {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  pointer-events: none;
}

#ui.tg-tray-open .tg-hints {
  visibility: hidden;
}

.tg-whisper,
.tg-coach {
  max-width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transition:
    opacity 0.4s ease,
    transform 0.55s var(--ease-out),
    visibility 0s linear 0.55s;
}

.tg-whisper.is-on,
.tg-coach.is-on {
  opacity: 1;
  visibility: inherit;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.55s var(--ease-out),
    visibility 0s;
}

.tg-whisper {
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.tg-coach {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 650;
}

.tg-coach-ic {
  width: 32px;
  height: 32px;
  padding: 5px;
  border-radius: 50%;
  background: var(--fill);
}

.tg-tap-ring {
  transform-box: view-box;
  transform-origin: 12px 12px;
  animation: tg-tap 1.9s ease-out infinite;
}

.tg-tap-ring-2 {
  animation-delay: 0.35s;
}

@keyframes tg-tap {
  0% {
    transform: scale(0.55);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* ---- trays (places, time, sound) --------------------------------------------------------------------------- */

.tg-trays {
  position: relative;
  width: 100%;
  height: 0;
}

.tg-tray {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100%, 420px);
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 150px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border-radius: 26px;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 14px) scale(0.97);
  transform-origin: 50% 100%;
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.5s var(--ease-out),
    visibility 0s linear 0.5s;
}

.tg-tray.is-open {
  opacity: 1;
  visibility: inherit;
  transform: translate(-50%, 0) scale(1);
  transition:
    opacity 0.35s var(--ease-out),
    transform 0.55s var(--ease-out),
    visibility 0s;
}

.tg-tray-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 10px;
}

.tg-tray-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.tg-tray-title .tg-ic {
  width: 20px;
  height: 20px;
  color: var(--ink-soft);
}

.tg-tray-sub {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

.tg-tray-sub.is-hint {
  color: var(--ink);
  animation: tg-fade-up 0.35s var(--ease-out);
}

/* Grab handle, shown only when trays are bottom sheets (phones, portrait). */
.tg-tray-grip {
  display: none;
}

/* Places */

.tg-tray-places {
  width: min(100%, 1000px);
  padding: 14px 0 10px;
  overflow: hidden;
}

.tg-tray-places .tg-tray-head {
  padding: 0 18px 8px;
}

.tg-tiles {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 6px 16px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tg-tiles::-webkit-scrollbar {
  display: none;
}

.tg-tile {
  position: relative;
  flex: 0 0 auto;
  width: 134px;
  height: 102px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
  text-align: left;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 20px -12px rgba(0, 0, 0, 0.55);
  transition:
    transform 0.4s var(--ease-spring),
    box-shadow 0.3s ease;
}

.tg-tile-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(172deg, var(--sw-a), var(--sw-b));
  transition:
    filter 0.4s ease,
    transform 0.6s var(--ease-out);
}

.tg-tile-scene svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The place's photo (ui.js _makeTile) lies over its drawing and fades in once loaded. While it is on its way the
   drawing's motifs step aside and the gradient, in the photo's own colours, stands in for it. */
.tg-tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition:
    opacity 0.5s ease,
    filter 0.6s ease,
    transform 0.6s var(--ease-out);
}

.tg-tile.is-photo-ready .tg-tile-photo {
  opacity: 1;
}

.tg-tile.has-photo .tg-tile-scene svg {
  display: none;
}

/* Bottom scrim keeps white text legible on light swatches. */
.tg-tile::after {
  content: '';
  position: absolute;
  inset: 38% 0 0;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.46));
  pointer-events: none;
}

/* Photos are busier than the drawings: a deeper, eased scrim under the text, and a light shade under the number. */
.tg-tile.has-photo::after {
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.22), transparent 30%),
    linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.16) 56%, rgba(0, 0, 0, 0.4) 76%, rgba(0, 0, 0, 0.6));
}

@media (hover: hover) {
  .tg-tile:hover {
    transform: translateY(-3px);
  }

  .tg-tile:hover .tg-tile-scene {
    transform: scale(1.05);
  }
}

.tg-tile:active {
  transform: translateY(0) scale(0.97);
}

.tg-tile.is-current {
  box-shadow:
    0 0 0 2px var(--paper),
    0 0 0 4px var(--tile-accent),
    0 12px 22px -12px rgba(0, 0, 0, 0.6);
}

.tg-tile.is-locked .tg-tile-scene {
  filter: saturate(0.35) brightness(0.72);
}

/* A locked place's photo is a frosted glimpse: its colours, none of its details. The next one to open is clearer. */
.tg-tile.has-photo.is-locked .tg-tile-scene {
  filter: saturate(0.8) brightness(0.8);
}

.tg-tile.has-photo.is-locked .tg-tile-photo {
  filter: blur(2.5px);
  transform: scale(1.08); /* the blur's soft edge stays outside the tile */
}

.tg-tile-num {
  position: absolute;
  top: 9px;
  left: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.82;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.tg-tile-lock {
  position: absolute;
  top: 7px;
  right: 7px;
  display: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.tg-tile-lock .tg-ic {
  width: 15px;
  height: 15px;
}

.tg-tile.is-locked .tg-tile-lock {
  display: grid;
}

.tg-tile-new {
  position: absolute;
  top: 7px;
  right: 7px;
  display: none;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #13261c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tg-tile.is-new .tg-tile-new {
  display: block;
  animation: tg-pulse 2.2s ease-in-out infinite;
}

.tg-tile-body {
  position: absolute;
  left: 12px;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tg-tile.is-locked .tg-tile-body {
  bottom: 19px;
}

.tg-tile-name {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.tg-tile-meta {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

.tg-tile.is-current .tg-tile-meta::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--tile-accent);
  box-shadow: 0 0 8px var(--tile-accent);
}

.tg-tile-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 9px;
  display: none;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.25);
}

.tg-tile.is-locked .tg-tile-bar {
  display: block;
}

.tg-tile-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.9);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--ease-out);
}

/* The next place to open: livelier postcard, bar in its own accent, a small "next" tag. */
.tg-tile.is-next .tg-tile-scene {
  filter: saturate(0.7) brightness(0.86);
}

.tg-tile.has-photo.is-next .tg-tile-scene {
  filter: saturate(0.85) brightness(0.86);
}

.tg-tile.has-photo.is-next .tg-tile-photo {
  filter: blur(1.2px);
}

.tg-tile.is-next .tg-tile-bar {
  overflow: visible;
}

.tg-tile.is-next .tg-tile-bar-fill {
  background: linear-gradient(90deg, var(--tile-accent), #fffdf0);
  box-shadow: 0 0 8px var(--tile-accent);
}

.tg-tile.is-next .tg-tile-meta {
  font-weight: 750;
  opacity: 1;
}

.tg-tile.is-next .tg-tile-num::after {
  content: ' · next';
  letter-spacing: 0.08em;
}

@keyframes tg-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

/* Time of day */

.tg-tray-time {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tg-time-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px;
}

.tg-time-clock {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.tg-time-phase {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tg-dial {
  position: relative;
  flex: none;
  height: 112px;
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
  cursor: grab;
  touch-action: none;
  /* A day of sky from left (midnight) to right (midnight). */
  background: linear-gradient(
    90deg,
    #0b1532 0%,
    #17204a 16%,
    #4e4a86 22.5%,
    #ee9f88 26.5%,
    #a9cdec 31%,
    #6fb1ec 50%,
    #8fc1e6 64%,
    #f4bd62 71%,
    #ea8462 76.5%,
    #6c4f8e 81%,
    #1d2550 88%,
    #0b1532 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 8px 20px -14px rgba(0, 0, 0, 0.6);
}

.tg-dial.is-dragging {
  cursor: grabbing;
}

/* The ground below the horizon (horizon sits at y = 58px). */
.tg-dial-ground {
  position: absolute;
  left: 0;
  right: 0;
  top: 58px;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(6, 14, 22, 0.42), rgba(6, 14, 22, 0.28));
  pointer-events: none;
}

.tg-dial-svg {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  overflow: visible;
}

.tg-dial-stars circle {
  fill: #fff;
  opacity: 0.75;
}

.tg-dial-horizon {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1;
}

.tg-dial-ticks path {
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.tg-dial-labels text {
  fill: rgba(255, 255, 255, 0.72);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
}

.tg-dial-path {
  fill: none;
  stroke-linecap: round;
}

.tg-dial-path-day {
  stroke: rgba(255, 252, 235, 0.75);
  stroke-width: 1.6;
  stroke-dasharray: 2 5;
}

.tg-dial-path-night {
  stroke: rgba(200, 215, 255, 0.4);
  stroke-width: 1.4;
  stroke-dasharray: 1.5 6;
}

.tg-dial-knob {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  transition:
    background 0.5s ease,
    box-shadow 0.5s ease;
}

.tg-dial-knob.is-sun {
  background: radial-gradient(circle at 38% 34%, #fffdf0, #ffe39a 48%, #f6b04f);
  box-shadow:
    0 0 0 5px rgba(255, 226, 150, 0.22),
    0 0 26px 8px rgba(255, 196, 100, 0.55);
}

.tg-dial-knob.is-moon {
  background: radial-gradient(circle at 38% 34%, #ffffff, #e2e9f8 55%, #b6c3e0);
  box-shadow:
    inset -9px -3px 0 0 rgba(26, 34, 70, 0.55),
    0 0 0 5px rgba(200, 215, 255, 0.14),
    0 0 24px 6px rgba(170, 195, 255, 0.4);
}

.tg-dial.is-dragging .tg-dial-knob,
.tg-dial:focus-visible .tg-dial-knob {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

.tg-presets {
  display: flex;
  gap: 6px;
}

.tg-preset {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 14px;
  background: var(--fill);
  font-size: 13px;
  font-weight: 650;
  transition:
    background-color 0.25s ease,
    transform 0.2s ease;
}

@media (hover: hover) {
  .tg-preset:hover {
    background: var(--fill-strong);
  }
}

.tg-preset:active {
  transform: scale(0.95);
}

.tg-preset.is-active {
  background: var(--ink);
  color: var(--paper);
}

.tg-preset-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

/* Sound */

.tg-tray-sound {
  width: min(100%, 340px);
  padding: 14px 8px 8px;
}

.tg-tray-sound .tg-tray-head {
  padding: 0 10px 6px;
}

/* Share */

.tg-tray-share {
  width: min(100%, 340px);
  padding: 14px 8px 8px;
}

.tg-tray-share .tg-tray-head {
  padding: 0 10px 8px;
}

.tg-share-quote {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 6px 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--fill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

/* The link can always be selected by hand (the overlay is otherwise unselectable). */
.tg-share-host {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

.tg-share-row .tg-row-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tg-share-go {
  width: 18px;
  height: 18px;
  color: var(--ink-faint);
}

.tg-share-row.is-done .tg-row-ic,
.tg-share-row.is-done .tg-row-label {
  color: var(--on);
}

/* ---- shared rows & controls ---------------------------------------------------------------------------- */

.tg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 14px;
  text-align: left;
  transition: background-color 0.2s ease;
}

@media (hover: hover) {
  .tg-row:hover {
    background-color: var(--fill);
  }
}

.tg-row-ic {
  color: var(--ink-soft);
}

.tg-row-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.tg-row-label {
  font-size: 15px;
  font-weight: 650;
}

.tg-row-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.3;
}

.tg-switch {
  position: relative;
  width: 44px;
  height: 26px;
  flex: none;
  border-radius: 999px;
  background: var(--fill-strong);
  transition: background-color 0.3s ease;
}

.tg-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.28),
    0 0 0 0.5px rgba(0, 0, 0, 0.06);
  transition: transform 0.4s var(--ease-spring);
}

[aria-checked='true'] > .tg-switch {
  background: var(--on);
}

[aria-checked='true'] > .tg-switch::after {
  transform: translateX(18px);
}

.tg-range-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 4px 10px;
}

.tg-range-label {
  font-size: 15px;
  font-weight: 650;
  flex: none;
}

.tg-range-val {
  min-width: 4ch;
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.tg-range {
  --val: 80%;
  flex: 1;
  min-width: 0;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}

.tg-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--on) var(--val), var(--fill-strong) var(--val));
}

.tg-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.3),
    0 0 0 0.5px rgba(0, 0, 0, 0.08);
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.25s var(--ease-spring);
}

.tg-range:active::-webkit-slider-thumb {
  transform: scale(1.15);
}

.tg-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--fill-strong);
}

.tg-range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--on);
}

.tg-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.tg-range:focus-visible {
  outline-offset: 0;
  border-radius: 10px;
}

/* ---- settings sheet ------------------------------------------------------------------------------------------ */

.tg-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 8, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
  transition:
    opacity 0.35s ease,
    visibility 0s linear 0.35s;
}

#ui.tg-sheet-open .tg-scrim {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.35s ease,
    visibility 0s;
}

.tg-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  max-height: min(86dvh, 760px);
  padding-bottom: var(--safe-b);
  border-radius: 28px 28px 0 0;
  pointer-events: auto;
  visibility: hidden;
  transform: translateY(105%);
  transition:
    transform 0.5s var(--ease-out),
    visibility 0s linear 0.5s;
}

#ui.tg-sheet-open .tg-sheet {
  visibility: visible;
  transform: none;
  transition:
    transform 0.55s var(--ease-out),
    visibility 0s;
}

.tg-sheet-grip {
  display: block;
  width: 40px;
  height: 5px;
  margin: 8px auto 0;
  border-radius: 3px;
  background: var(--fill-strong);
}

.tg-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
}

.tg-tabs {
  display: flex;
  flex: 1;
  gap: 3px;
  max-width: 280px;
  padding: 3px;
  border-radius: 999px;
  background: var(--fill);
}

.tg-tab {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink-soft);
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.tg-tab .tg-ic {
  width: 18px;
  height: 18px;
}

.tg-tab[aria-selected='true'] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.tg-sheet-close {
  margin-left: auto;
}

.tg-sheet-body {
  flex: 1;
  min-height: 0;
  padding: 0 12px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.tg-sec {
  padding: 8px 0 6px;
}

.tg-sec + .tg-sec {
  border-top: 1px solid var(--fill-strong);
}

.tg-sec-title {
  margin: 8px 10px 6px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tg-sec-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.tg-sec-count {
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.tg-field {
  padding: 2px 0 6px;
}

.tg-field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px 6px;
  font-size: 15px;
  font-weight: 650;
}

.tg-field-hint {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
}

.tg-skins {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 6px 4px;
}

.tg-skin {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

.tg-skin::before {
  content: '';
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c);
  box-shadow:
    inset 0 -4px 7px rgba(0, 0, 0, 0.18),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s var(--ease-spring);
}

@media (hover: hover) {
  .tg-skin:hover::before {
    transform: scale(1.08);
  }
}

.tg-skin::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ink);
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.25s ease,
    transform 0.35s var(--ease-spring);
}

.tg-skin[aria-checked='true']::after {
  opacity: 1;
  transform: none;
}

.tg-seg {
  display: flex;
  gap: 3px;
  margin: 0 6px 6px;
  padding: 3px;
  border-radius: 15px;
  background: var(--fill);
}

.tg-seg-btn {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink-soft);
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.tg-seg-btn[aria-checked='true'] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.tg-confirm {
  padding: 1px 0;
}

.tg-confirm-btn.is-danger .tg-row-label {
  color: #b2443a;
}

#ui.tg-night .tg-confirm-btn.is-danger .tg-row-label {
  color: #ff9d8f;
}

.tg-confirm-ask {
  display: none;
  margin: 4px 0;
  padding: 12px 12px 12px;
  border-radius: 16px;
  background: var(--fill);
}

.tg-confirm.is-asking .tg-confirm-btn {
  display: none;
}

.tg-confirm.is-asking .tg-confirm-ask {
  display: block;
  animation: tg-fade-up 0.35s var(--ease-out);
}

.tg-confirm-text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.4;
}

.tg-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tg-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--fill-strong);
  font-size: 14px;
  font-weight: 700;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

@media (hover: hover) {
  .tg-btn:hover {
    filter: brightness(1.06);
  }
}

.tg-btn:active {
  transform: scale(0.96);
}

.tg-btn-primary {
  background: var(--ink);
  color: var(--paper);
}

.tg-btn-danger {
  background: #b9473a;
  color: #fff;
}

.tg-keys {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
  padding: 2px 10px 8px;
  font-size: 14px;
}

.tg-keys dt {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tg-keys dd {
  margin: 0;
  color: var(--ink-soft);
}

.tg-keys-to {
  font-size: 12px;
  color: var(--ink-faint);
}

.tg-keys kbd {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 7px;
  background: var(--paper);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 750;
  box-shadow:
    inset 0 -2px 0 var(--fill-strong),
    0 0 0 1px var(--fill-strong);
}

@media (hover: none) and (pointer: coarse) {
  .tg-sec-keys {
    display: none;
  }
}

.tg-sheet-foot {
  padding: 16px 10px 4px;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
}

.tg-sheet-foot a,
.tg-sheet-credits a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.tg-sheet-foot a:hover,
.tg-sheet-credits a:hover {
  text-decoration: underline;
}

.tg-sheet-credits {
  padding: 2px 10px 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-faint);
  opacity: 0.8;
  text-align: center;
}

/* Journal */

.tg-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 2px 4px 8px;
}

.tg-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 11px 10px 10px;
  border-radius: 14px;
  background: var(--fill);
}

.tg-stat-val {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.tg-stat-label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-soft);
}

.tg-finds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 6px 8px;
}

.tg-find {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 7px;
  border-radius: 999px;
  background: var(--fill);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tg-find .tg-ic {
  width: 19px;
  height: 19px;
}

/* Surfaces felt: a swatch dot, the material and how many presses. */
.tg-surface {
  gap: 7px;
  padding: 0 12px 0 10px;
  font-weight: 650;
}

.tg-surface-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--dot);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.14),
    0 1px 3px rgba(0, 0, 0, 0.18);
}

.tg-surface-n {
  font-weight: 800;
  opacity: 0.72;
}

.tg-empty {
  padding: 2px 10px 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.tg-achs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0 2px;
  list-style: none;
}

.tg-ach {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 8px;
  border-radius: 14px;
}

.tg-ach-seal {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink-faint);
}

.tg-ach-seal .tg-ic {
  width: 19px;
  height: 19px;
}

.tg-ach.is-earned .tg-ach-seal {
  background: radial-gradient(circle at 35% 30%, #fff7d6, #f3c96b 58%, #d79a3c);
  color: #5a3a10;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 4px 14px -5px rgba(240, 180, 80, 0.8);
}

.tg-ach-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding-top: 1px;
}

.tg-ach-title {
  font-size: 14.5px;
  font-weight: 700;
}

.tg-ach-desc {
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-soft);
}

.tg-ach:not(.is-earned) .tg-ach-title {
  color: var(--ink-soft);
}

.tg-ach:not(.is-earned) .tg-ach-desc {
  color: var(--ink-faint);
}

.tg-ach-date {
  flex: none;
  padding-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ---- toasts ----------------------------------------------------------------------------------------------- */

.tg-toasts {
  position: absolute;
  top: calc(var(--safe-t) + 72px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(calc(100% - 24px), 400px);
  transform: translateX(-50%);
  pointer-events: none;
}

.tg-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px 12px 10px 10px;
  overflow: hidden;
  border-radius: 22px;
  pointer-events: auto;
  cursor: default;
}

.tg-toast-seal {
  --seal: radial-gradient(circle at 35% 30%, #ffffff, var(--accent) 72%);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--seal);
  color: #12261c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 12px -5px rgba(0, 0, 0, 0.4);
}

.tg-toast-achievement .tg-toast-seal {
  background: radial-gradient(circle at 35% 30%, #fff7d6, #f3c96b 58%, #d79a3c);
  color: #5a3a10;
}

.tg-toast-streak .tg-toast-seal {
  background: radial-gradient(circle at 35% 30%, #fff1dc, #f8b98a 55%, #e27d56);
  color: #5a2410;
}

.tg-toast-unlock .tg-toast-seal {
  background: var(--seal);
  color: #fff;
}

.tg-toast-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.tg-toast-kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tg-toast-title {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.tg-toast-inline {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.tg-toast-desc {
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-soft);
}

.tg-toast-compact {
  align-self: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
}

.tg-toast-compact .tg-toast-seal {
  width: 34px;
  height: 34px;
}

.tg-toast-compact .tg-toast-seal .tg-ic {
  width: 20px;
  height: 20px;
}

.tg-toast-compact .tg-toast-title {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tg-toast-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  flex: none;
  padding: 0 14px 0 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13.5px;
  font-weight: 750;
  transition: transform 0.2s ease;
}

.tg-toast-action:active {
  transform: scale(0.95);
}

.tg-toast-action-ic {
  width: 17px;
  height: 17px;
}

/* An unlock gets one celebratory light sweep. */
.tg-toast-unlock {
  position: relative;
}

.tg-toast-unlock::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 245, 0.6) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: tg-sweep 1.4s var(--ease-out) 0.35s;
}

/* ---- zen restore ------------------------------------------------------------------------------------------- */

.tg-restore {
  position: absolute;
  right: calc(var(--safe-r) + 8px);
  bottom: calc(var(--safe-b) + 8px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
}

#ui.tg-begun.tg-zen .tg-restore {
  opacity: 0.4;
  visibility: visible;
  transition:
    opacity 0.6s ease 0.3s,
    visibility 0s;
}

#ui.tg-begun.tg-zen .tg-restore:focus-visible,
#ui.tg-begun.tg-zen .tg-restore.is-hinting {
  opacity: 1;
}

@media (hover: hover) {
  #ui.tg-begun.tg-zen .tg-restore:hover {
    opacity: 1;
  }
}

.tg-restore > .tg-ic {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.tg-restore-hint {
  position: absolute;
  right: calc(100% + 4px);
  top: 50%;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: var(--glass-strong);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  opacity: 0;
  transform: translate(8px, -50%);
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.5s var(--ease-out);
}

.tg-restore.is-hinting .tg-restore-hint {
  opacity: 1;
  transform: translate(0, -50%);
}

/* ---- start screen ------------------------------------------------------------------------------------------ */

.tg-start {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fbfaf2;
  pointer-events: none;
}

.tg-start-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(6, 14, 10, 0.06), rgba(6, 14, 10, 0.46) 72%, rgba(6, 14, 10, 0.7)),
    linear-gradient(to bottom, rgba(6, 14, 10, 0) 55%, rgba(6, 14, 10, 0.38));
  opacity: 0;
  transition: opacity 0.9s ease;
}

.tg-start.is-in .tg-start-veil {
  opacity: 1;
}

.tg-start-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin-top: -3vh;
  padding: calc(var(--safe-t) + 24px) calc(var(--safe-r) + 24px) calc(var(--safe-b) + 24px) calc(var(--safe-l) + 24px);
  text-align: center;
}

/* The mark (a window onto a meadow) rises into view from its sill as the screen appears. */
.tg-mark {
  height: clamp(66px, 15vw, 132px);
  aspect-ratio: 4 / 5;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.25));
}

.tg-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  clip-path: inset(100% -40% -20% -40%);
}

.tg-start.is-in .tg-mark svg {
  animation: tg-mark-grow 1.1s var(--ease-out) forwards;
}

@keyframes tg-mark-grow {
  to {
    clip-path: inset(-20% -40% -20% -40%);
  }
}

.tg-wordmark {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.24em;
  font-family: var(--font-wordmark);
  font-size: clamp(56px, 15vw, 136px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.28);
}

.tg-wm-word {
  display: inline-flex;
  white-space: nowrap;
}

/* The padding holds the ink that spills past each letter's tight box (the g's tail below line-height 0.92, right
   edges past the negative letter-spacing). WebKit clips a filtered element to its box plus the blur's reach, so as the
   blur faded in, iPhones sliced the g's tail flat. The negative margins keep every letter where it was. */
.tg-wm-l {
  display: inline-block;
  padding: 0 0.06em 0.25em;
  margin: 0 -0.06em -0.25em;
  opacity: 0;
  transform: translateY(0.32em);
  filter: blur(10px);
}

.tg-rise {
  opacity: 0;
  transform: translateY(14px);
}

.tg-start.is-in .tg-wm-l {
  animation: tg-letter-in 0.8s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 34ms + 40ms);
}

.tg-start.is-in .tg-rise {
  animation: tg-rise-in 0.75s var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes tg-letter-in {
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes tg-rise-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.tg-invite {
  margin-top: 20px;
  font-size: clamp(16px, 2.3vw, 20px);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}

.tg-welcome {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 245, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 245, 0.22);
  font-size: 13.5px;
  font-weight: 650;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.tg-welcome .tg-ic {
  width: 18px;
  height: 18px;
}

.tg-begin {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  margin-top: 30px;
  padding: 0 32px 0 24px;
  border-radius: 999px;
  pointer-events: auto;
  background: rgba(252, 252, 244, 0.94);
  color: #10221a;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.005em;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 -3px 0 rgba(16, 34, 26, 0.06),
    0 14px 40px -12px rgba(0, 0, 0, 0.55),
    0 0 40px -6px rgba(255, 250, 220, 0.35);
}

.tg-begin::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 1.5px solid rgba(255, 255, 240, 0.6);
  opacity: 0;
  pointer-events: none;
}

.tg-start.is-in:not(.is-leaving) .tg-begin::before {
  animation: tg-halo 2.8s ease-out 1.2s infinite;
}

@keyframes tg-halo {
  0% {
    opacity: 0.75;
    transform: scale(0.96);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

.tg-start.is-in .tg-begin {
  transition:
    transform 0.4s var(--ease-spring),
    box-shadow 0.4s ease;
}

@media (hover: hover) {
  .tg-start.is-in:not(.is-leaving) .tg-begin:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.7),
      0 18px 44px -12px rgba(0, 0, 0, 0.55),
      0 0 56px -4px rgba(255, 250, 220, 0.55);
  }
}

.tg-start.is-in:not(.is-leaving) .tg-begin:active {
  transform: scale(0.97);
}

.tg-begin:focus-visible {
  outline: 2px solid #fffdf2;
  outline-offset: 5px;
}

.tg-begin-ic {
  color: #3f8a4d;
}

.tg-sound-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* The dimming sits on the contents: the element's own opacity belongs to its .tg-rise entrance (an opacity here
   would override .tg-rise's hidden start and show the hint before the start screen arrives). */
.tg-sound-hint > * {
  opacity: 0.8;
}

.tg-sound-hint .tg-ic {
  width: 18px;
  height: 18px;
}

/* Dissolve: letters lift and blur away in a wave, the rest fades, then the veil lifts off the scene. */
.tg-start.is-leaving .tg-wm-l {
  animation: tg-letter-out 0.8s var(--ease-in) forwards;
  animation-delay: calc(var(--i) * 32ms);
}

.tg-start.is-leaving .tg-rise {
  animation: tg-rise-out 0.6s ease forwards;
  animation-delay: 0ms;
}

.tg-start.is-leaving .tg-begin {
  animation: tg-begin-out 0.55s var(--ease-out) forwards;
}

.tg-start.is-leaving .tg-start-veil {
  opacity: 0;
  transition-delay: 0.25s;
}

@keyframes tg-letter-out {
  from {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-0.28em);
    filter: blur(12px);
  }
}

@keyframes tg-rise-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes tg-begin-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: scale(0.92);
  }
}

@keyframes tg-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- responsive --------------------------------------------------------------------------------------------- */

/* Narrow or short windows: a slimmer dock that sits lower. Visuals shrink to 40px but an invisible ::before keeps
   every hit area at 44px. */
@media (max-width: 520px), (max-height: 720px) {
  .tg-dock-wrap {
    bottom: calc(var(--safe-b) + 8px);
    gap: 8px;
  }

  .tg-dock {
    gap: 0;
    padding: 3px;
  }

  .tg-chip,
  .tg-icon-btn {
    height: 40px;
  }

  .tg-chip {
    min-width: 40px;
  }

  .tg-icon-btn {
    width: 40px;
  }

  .tg-chip::before,
  .tg-icon-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
  }

  .tg-dock .tg-ic:not(.tg-chip-caret) {
    width: 20px;
    height: 20px;
  }

  .tg-orb {
    width: 28px;
    height: 28px;
  }

  .tg-chip-dot {
    top: 4px;
    left: 27px;
  }

  .tg-chip-text {
    font-size: 13.5px;
  }

  .tg-dock-sep {
    height: 18px;
    margin: 0 2px;
  }

  .tg-sound-more {
    bottom: 5px;
  }
}

@media (max-width: 379px) {
  .tg-preset-dot {
    display: none;
  }

  .tg-preset {
    font-size: 12.5px;
  }

  .tg-chip-time {
    padding: 0 10px 0 8px;
  }
}

/* Phones keep the place chip icon-first (just the orb); the name joins it once there is room. */
@media (min-width: 600px) {
  .tg-chip-place {
    padding: 0 12px 0 6px;
  }

  .tg-chip-place-name,
  .tg-chip-caret {
    display: block;
  }
}

@media (min-width: 480px) {
  .tg-fs-btn {
    display: grid;
  }
}

@media (min-width: 720px) {
  #ui {
    --gutter: 16px;
  }

  .tg-combo {
    --cx: -50%;
    left: 50%;
    right: auto;
    transform-origin: 50% 0;
  }

  .tg-chip-sub {
    display: inline;
  }

  .tg-tile {
    width: 164px;
    height: 116px;
  }

  .tg-tile-name {
    font-size: 17px;
  }

  .tg-toasts {
    left: auto;
    right: calc(var(--safe-r) + var(--gutter));
    top: calc(var(--safe-t) + var(--gutter));
    width: 350px;
    transform: none;
    align-items: stretch;
  }

  .tg-toast-compact {
    align-self: flex-end;
  }

  /* Floating side panel instead of a bottom sheet. */
  .tg-sheet {
    left: auto;
    right: calc(var(--safe-r) + var(--gutter));
    top: calc(var(--safe-t) + var(--gutter));
    bottom: calc(var(--safe-b) + var(--gutter));
    width: 410px;
    max-height: none;
    padding-bottom: 0;
    border-radius: 28px;
    transform: translateX(calc(100% + 40px));
  }

  .tg-sheet-grip {
    display: none;
  }

  .tg-sheet-head {
    padding: 14px 12px 10px 16px;
  }

  .tg-tray-time {
    width: min(100%, 440px);
  }
}

/* Wide screens: the places tray grows and every postcard shares one row (--tiles = number of places, set by ui.js),
   so all eight fit without scrolling. Below ~118px a tile would cramp its name, so the row scrolls instead. */
@media (min-width: 1100px) {
  .tg-tray-places {
    width: min(100%, 1240px);
  }

  .tg-tiles {
    display: grid;
    grid-template-columns: repeat(var(--tiles, 8), minmax(118px, 1fr));
  }

  .tg-tile {
    width: auto;
  }

  .tg-tile-name {
    font-size: 16px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .tg-start-inner {
    margin-top: 0;
  }

  .tg-wordmark {
    font-size: clamp(44px, 10vh, 84px);
  }

  .tg-mark {
    display: none;
  }

  .tg-begin {
    margin-top: 18px;
  }
}

/* ---- phones ------------------------------------------------------------------------------------------------ */

/* Long-pressing the scene must never select text or pop the iOS callout / magnifier. */
html,
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Compact HUD on phones (portrait and landscape). */
@media (max-width: 600px), (max-height: 500px) {
  .tg-meter {
    gap: 8px;
    padding: 4px 14px 4px 4px;
  }

  .tg-ring {
    width: 36px;
    height: 36px;
  }

  .tg-ring-ic {
    width: 17px;
    height: 17px;
  }

  .tg-points-num {
    font-size: 18px;
  }

  .tg-points-label {
    margin-top: 3px;
    font-size: 9.5px;
  }

  .tg-combo {
    gap: 5px;
    height: 44px;
    padding: 0 12px 0 14px;
  }

  .tg-combo-label {
    font-size: 11px;
  }

  .tg-combo-x {
    font-size: 16px;
  }

  .tg-combo-step {
    font-size: 23px;
  }

  .tg-combo-mult.is-on {
    padding: 4px 8px;
  }

  /* Toasts sit at the top, just under the notch and the HUD row. */
  .tg-toasts {
    top: calc(var(--safe-t) + var(--gutter) + 52px);
  }

  .tg-toast {
    gap: 10px;
    padding: 8px 10px 8px 8px;
    border-radius: 20px;
  }

  .tg-toast-seal {
    width: 38px;
    height: 38px;
  }

  .tg-toast-title {
    font-size: 15.5px;
  }

  .tg-float {
    font-size: 21px;
  }

  /* Start screen: one big, thumb-sized Begin. */
  .tg-begin {
    justify-content: center;
    min-width: min(248px, calc(100vw - 64px));
    height: 64px;
    padding: 0 30px 0 24px;
    font-size: 18px;
  }

  .tg-sound-hint {
    font-size: 13.5px;
  }
}

/* On touch screens the whole start screen takes the tap (ui.js begins on click). */
#ui.tg-touch .tg-start.is-in:not(.is-leaving) {
  pointer-events: auto;
  cursor: pointer;
}

.tg-sound-hint b {
  font-weight: 750;
}

@media (max-width: 359px) {
  .tg-sound-hint-more {
    display: none;
  }

  /* Six controls on the narrowest phones: slimmer icon buttons (the ::before above keeps the hit area wider). */
  .tg-dock .tg-icon-btn {
    width: 36px;
  }
}

/* Portrait phones: trays are edge-to-edge bottom sheets with a grab handle (swipe down to put them away). They sit
   over the dock; tapping the scene or Esc also closes them. */
@media (max-width: 600px) and (orientation: portrait) {
  .tg-tray {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: auto;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - var(--safe-t) - 24px);
    padding: 0 16px calc(var(--safe-b) + 16px);
    border-radius: 28px 28px 0 0;
    opacity: 1;
    touch-action: none;
    transform: translateY(calc(100% + 24px));
    transform-origin: 50% 100%;
    transition:
      transform 0.42s var(--ease-out),
      visibility 0s linear 0.42s;
  }

  .tg-tray.is-open {
    opacity: 1;
    transform: translateY(var(--drag, 0px));
    transition:
      transform 0.5s var(--ease-out),
      visibility 0s;
  }

  .tg-tray.is-dragging {
    transition: none;
  }

  .tg-tray-grip {
    display: block;
    width: 40px;
    height: 5px;
    margin: 8px auto 10px;
    border-radius: 3px;
    background: var(--fill-strong);
  }

  .tg-tray-places {
    width: auto;
    padding: 0 0 calc(var(--safe-b) + 12px);
    overflow: hidden;
  }

  .tg-tray-places .tg-tray-head {
    padding: 0 20px 6px;
  }

  .tg-tiles {
    gap: 12px;
    padding: 6px 20px 10px;
    scroll-padding: 0 20px;
  }

  .tg-tile {
    width: 158px;
    height: 118px;
    border-radius: 20px;
  }

  .tg-tile-name {
    font-size: 16.5px;
  }

  .tg-tray-time {
    width: auto;
    gap: 14px;
  }

  .tg-tray-time .tg-tray-grip {
    margin-bottom: -4px;
  }

  .tg-tray-sound,
  .tg-tray-share {
    width: auto;
    padding: 0 10px calc(var(--safe-b) + 10px);
  }

  .tg-tray-sound .tg-tray-head,
  .tg-tray-share .tg-tray-head {
    padding: 0 10px 4px;
  }

  /* While a tray covers the dock, the dock bows out entirely (it is under the sheet anyway). */
  #ui.tg-begun.tg-tray-open .tg-dock {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }
}

/* The time dial under a thumb: the sun swells while it's being dragged. */
.tg-dial.is-dragging .tg-dial-knob {
  scale: 1.16;
}

/* Phones: Settings & Journal is a full-height sheet (pull it down by the grip or header; the body scrolls natively
   with momentum). From 720px wide it is the floating side panel instead. */
@media (max-width: 719px) {
  .tg-sheet {
    top: calc(var(--safe-t) + 10px);
    max-height: none;
    transform: translateY(calc(100% + 30px));
  }

  #ui.tg-sheet-open .tg-sheet {
    transform: translateY(var(--drag, 0px));
  }

  .tg-sheet.is-dragging {
    transition: none !important;
  }

  .tg-sheet-grip {
    width: 44px;
    margin-top: 9px;
  }

  .tg-sheet-grip,
  .tg-sheet-head {
    touch-action: none;
  }

  .tg-sheet-body {
    padding-bottom: 28px;
  }

  #ui.tg-sheet-open .tg-scrim {
    background: rgba(4, 10, 8, 0.34);
  }
}

/* Landscape phones: the dock becomes a slim rail on the right edge, where the right thumb rests, so the middle of
   the scene stays free. Trays open beside it, at full height; hints stay centred at the bottom. */
@media (orientation: landscape) and (max-height: 500px) {
  .tg-dock-wrap {
    left: auto;
    top: calc(var(--safe-t) + 8px);
    right: calc(var(--safe-r) + 8px);
    bottom: calc(var(--safe-b) + 8px);
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
  }

  .tg-dock {
    flex-direction: column;
    transform: translateX(16px);
  }

  #ui.tg-begun.tg-touching:not(.tg-zen):not(.tg-tray-open) .tg-dock {
    transform: translateX(8px);
  }

  .tg-dock-sep {
    width: 18px;
    height: 1px;
    margin: 3px 0;
  }

  .tg-chip-place,
  .tg-chip-time {
    justify-content: center;
    width: 40px;
    padding: 0;
  }

  .tg-chip-place-name,
  .tg-chip-caret,
  .tg-chip-time-text,
  .tg-chip-sub {
    display: none;
  }

  .tg-chip-place .tg-chip-place-name,
  .tg-chip-place .tg-chip-caret {
    display: none;
  }

  .tg-chip-dot {
    left: 28px;
  }

  .tg-hints {
    position: fixed;
    left: 50%;
    bottom: calc(var(--safe-b) + 12px);
    width: max-content;
    max-width: calc(100vw - 200px);
    transform: translateX(-50%);
  }

  .tg-trays {
    align-self: stretch;
    width: 0;
    height: auto;
  }

  .tg-tray {
    left: auto;
    right: 0;
    bottom: 0;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 16px);
    transform: translateX(14px) scale(0.97);
    transform-origin: 100% 100%;
  }

  .tg-tray.is-open {
    transform: none;
  }

  .tg-tray-places {
    width: min(calc(100vw - var(--safe-l) - var(--safe-r) - 96px), 760px);
  }

  .tg-tray-time {
    width: min(calc(100vw - var(--safe-l) - var(--safe-r) - 96px), 420px);
  }

  .tg-tray-sound {
    width: min(calc(100vw - var(--safe-l) - var(--safe-r) - 96px), 330px);
  }

  .tg-combo {
    --cx: 0px;
    left: auto;
    right: calc(var(--safe-r) + var(--gutter));
    transform-origin: 100% 0;
  }

  .tg-toasts {
    top: calc(var(--safe-t) + 8px);
    left: 50%;
    right: auto;
    width: min(340px, calc(100vw - 360px));
    transform: translateX(-50%);
    transition:
      opacity 0.25s ease,
      visibility 0s linear 0s;
  }

  /* An open tray fills most of a short screen and reaches up under the toasts: they step aside until it closes
     (their timers keep running) instead of covering the tray's clock and header. */
  #ui.tg-tray-open .tg-toasts {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.2s ease,
      visibility 0s linear 0.2s;
  }

  .tg-toast-compact {
    align-self: center;
  }

  /* Short screens: one line per toast (kicker + title); the detail lives in the journal. */
  .tg-toast-desc {
    display: none;
  }

  .tg-start-inner {
    padding-top: calc(var(--safe-t) + 12px);
    padding-bottom: calc(var(--safe-b) + 12px);
  }

  .tg-invite {
    margin-top: 12px;
  }

  .tg-sound-hint {
    margin-top: 14px;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (hover: hover) and (pointer: fine) {
  .tg-dock [data-tip]::after {
    top: 50%;
    bottom: auto;
    left: auto;
    right: calc(100% + 14px);
    transform: translate(4px, -50%);
  }

  .tg-dock [data-tip]:hover::after {
    transform: translate(0, -50%);
  }
}

/* ---- embed (X Player Card, /play/) ------------------------------------------------------------------------- */
/* A square of ~300–566px or a full-screen portrait page. All controls hug the top edge: on phones X floats its own
   close / address / reload controls over the bottom ~56px of the card. */

.tg-ebar {
  display: none;
}

#ui.tg-embed .tg-hud,
#ui.tg-embed .tg-dock-wrap,
#ui.tg-embed .tg-restore,
#ui.tg-embed .tg-toasts,
#ui.tg-embed .tg-scrim,
#ui.tg-embed .tg-sheet,
#ui.tg-embed .tg-start {
  display: none !important;
}

#ui.tg-embed .tg-floaters {
  display: block;
}

#ui.tg-embed .tg-ebar {
  position: absolute;
  z-index: 6;
  top: calc(var(--safe-t) + 8px);
  left: calc(var(--safe-l) + 8px);
  right: calc(var(--safe-r) + 8px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#ui.tg-embed.tg-ready .tg-ebar {
  opacity: 1;
}

.tg-ebar-l,
.tg-ebar-r {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tg-echip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  min-width: 40px;
  padding: 0 14px 0 11px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  pointer-events: auto;
  touch-action: manipulation;
}

/* 44px hit area around the 40px glass. */
.tg-echip::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
}

.tg-echip .tg-ic {
  width: 20px;
  height: 20px;
}

.tg-echip:active {
  transform: scale(0.95);
}

.tg-eicon {
  width: 40px;
  padding: 0;
}

.tg-esound {
  min-width: 112px;
  justify-content: flex-start;
  transition:
    background-color 0.6s ease,
    box-shadow 0.6s ease,
    transform 0.2s ease;
}

.tg-esound.is-muted .tg-ic {
  opacity: 0.6;
}

.tg-esound.is-hint {
  min-width: 0;
  animation: tg-pulse 2.2s ease-in-out infinite;
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    inset 0 0 0 1px var(--glass-rim),
    0 0 0 2px var(--accent),
    0 6px 22px -6px var(--shadow);
}

.tg-eopen {
  gap: 3px;
  padding: 0 10px 0 14px;
}

.tg-eopen-ic.tg-ic {
  width: 18px;
  height: 18px;
}

@media (hover: hover) {
  .tg-echip:hover {
    background-color: var(--glass-strong);
  }
}

/* The calm counter, tiny and only where there is room for it beside the sound chip. */
#ui.tg-embed .tg-ebar .tg-meter {
  position: static;
  gap: 6px;
  height: 40px;
  padding: 3px 13px 3px 3px;
  transform: none;
}

#ui.tg-embed.tg-begun .tg-ebar .tg-meter {
  opacity: 1;
}

#ui.tg-embed .tg-ebar .tg-ring {
  width: 34px;
  height: 34px;
}

#ui.tg-embed .tg-ebar .tg-ring-ic {
  width: 16px;
  height: 16px;
}

#ui.tg-embed .tg-ebar .tg-points {
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

#ui.tg-embed .tg-ebar .tg-points-num {
  font-size: 15px;
}

#ui.tg-embed .tg-ebar .tg-points-label {
  margin: 0;
  font-size: 9.5px;
}

@media (max-width: 499px) {
  #ui.tg-embed .tg-ebar .tg-meter {
    display: none;
  }
}

/* Small squares (the 341px phone card): icon-only sound chip unless it is asking for a tap. */
@media (max-width: 379px) {
  .tg-esound:not(.is-hint) {
    width: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
  }

  .tg-esound:not(.is-hint) .tg-echip-text {
    display: none;
  }

  .tg-eopen {
    padding: 0 9px 0 12px;
    font-size: 13px;
  }
}

/* ---- prompt pill (embed start, "Tap to resume", ...) ------------------------------------------------------- */

.tg-prompt {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  max-width: calc(100% - 24px);
  padding: 6px 20px 6px 6px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) translateY(10px) scale(0.96);
  transition:
    opacity 0.45s ease,
    transform 0.6s var(--ease-out),
    visibility 0s linear 0.6s,
    background-color 0.6s ease,
    box-shadow 0.6s ease;
}

.tg-prompt.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.6s ease,
    transform 0.8s var(--ease-out),
    visibility 0s,
    background-color 0.6s ease,
    box-shadow 0.6s ease;
}

/* A slow halo invites the first touch. */
.tg-prompt::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1.5px solid rgba(255, 255, 240, 0.65);
  opacity: 0;
  pointer-events: none;
}

.tg-prompt.is-on::after {
  animation: tg-halo 2.8s ease-out 1.2s infinite;
}

.tg-prompt:active {
  transform: translate(-50%, -50%) scale(0.97);
}

.tg-prompt-ic.tg-ic {
  width: 40px;
  height: 40px;
  padding: 7px;
  border-radius: 50%;
  background: var(--fill);
}

.tg-prompt-words {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
}

.tg-prompt-sub {
  font-weight: 650;
  color: var(--ink-soft);
}

.tg-prompt-sub::before {
  content: ' · ';
  white-space: pre;
}

@media (max-width: 339px) {
  .tg-prompt {
    gap: 8px;
    min-height: 48px;
    padding: 5px 16px 5px 5px;
    font-size: 14px;
  }

  .tg-prompt-ic.tg-ic {
    width: 36px;
    height: 36px;
  }
}

/* ---- reduced motion ---------------------------------------------------------------------------------------- */
/* Fades stay (they're calm); movement, loops and sweeps go. ui.js mirrors the media query + the setting here. */

#ui.tg-reduce *,
#ui.tg-reduce *::before,
#ui.tg-reduce *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0ms !important;
  transition-duration: 0.18s !important;
  transition-delay: 0s !important;
}

#ui.tg-reduce .tg-tap-ring,
#ui.tg-reduce .tg-ring-glint,
#ui.tg-reduce .tg-chip-dot,
#ui.tg-reduce .tg-tile-new {
  animation: none !important;
}

/* The mark stands still and fully grown. */
#ui.tg-reduce .tg-mark svg {
  animation: none !important;
  clip-path: none;
}

#ui.tg-reduce .tg-start.is-leaving {
  opacity: 0;
  transition: opacity 0.25s ease !important;
}

#ui.tg-reduce .tg-meter,
#ui.tg-reduce .tg-dock,
#ui.tg-reduce .tg-whisper,
#ui.tg-reduce .tg-coach {
  transform: none !important;
}

/* These are centred with a translate, so keep that part. */
#ui.tg-reduce .tg-tray {
  transform: translate(-50%, 0) !important;
}

#ui.tg-reduce .tg-combo {
  transform: translate(var(--cx), 0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .tg-tap-ring,
  .tg-ring-glint,
  .tg-begin::before {
    animation: none !important;
  }

  .tg-mark svg {
    animation: none !important;
    clip-path: none;
  }
}

/* Reduced motion with the phone layouts: sheets and rails appear in place (the shared rule above would re-centre
   them with translate(-50%)). */
@media (max-width: 600px) and (orientation: portrait) {
  #ui.tg-reduce .tg-tray {
    opacity: 0;
    transform: translateY(var(--drag, 0px)) !important;
  }

  #ui.tg-reduce .tg-tray.is-open {
    opacity: 1;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  #ui.tg-reduce .tg-tray {
    transform: none !important;
  }
}

#ui.tg-reduce .tg-prompt {
  transform: translate(-50%, -50%) !important;
}

#ui.tg-reduce .tg-esound.is-hint {
  animation: none !important;
}

/* ---- credits ------------------------------------------------------------------------------------------------- */

/* Start screen: a quiet signature at the bottom edge, above the home indicator and X's in-app browser controls. */
.tg-credit {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-b) + 18px);
  translate: -50% 0;
  padding: 6px 10px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(251, 250, 242, 0.72);
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  white-space: nowrap;
}

.tg-credit b {
  font-weight: 700;
  color: rgba(251, 250, 242, 0.92);
}

.tg-credit:hover b,
.tg-credit:focus-visible b {
  text-decoration: underline;
}

.tg-start.is-leaving .tg-credit {
  pointer-events: none;
}

/* Embed: the same signature under the start prompt, only until the first touch. */
.tg-ecredit {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-b) + 12px);
  translate: -50% 0;
  z-index: 6;
  padding: 4px 8px;
  font-size: 11.5px;
  color: rgba(251, 250, 242, 0.7);
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
}

.tg-ecredit b {
  font-weight: 700;
  color: rgba(251, 250, 242, 0.9);
}

.tg-ecredit.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s ease 0.4s,
    visibility 0s;
}

#ui:not(.tg-embed) .tg-ecredit {
  display: none;
}