/* baby.css: the 3D parenting game (retro-baby.js). Every rule lives under .tt-baby-. The stage is a size container, so the
   layout follows the size of the game itself, in the page, pinned over it or on the whole screen alike.
   The script reads the height of the strip at the top (.tt-baby-hud) and the top of the words at the bottom (.tt-baby-foot)
   and keeps everything it pins to the picture between the two: place those two with top and bottom, never with a vertical transform. */
.tt-baby-lead { margin: 0 0 .8rem; }
.tt-baby-help { margin: .7rem 0 0; font-size: .86rem; color: #5b5568; }
.tt-baby-stage {
  --ink: #35261f; --paper: #fffaf0; --sun: #ffd23f; --coral: #ff7a59; --mint: #37c871; --sky: #5bb8ff;
  position: relative; container: tt-baby / size; width: min(100%, 64rem); aspect-ratio: 9 / 17; max-height: 88vh; overflow: hidden;
  border-radius: 18px; background: #bfe3ff; color: var(--ink); line-height: 1.3; font-weight: 700;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
@media (min-width: 720px) { .tt-baby-stage { aspect-ratio: 16 / 10; } }
@media (orientation: landscape) and (max-height: 520px) { .tt-baby-stage { aspect-ratio: auto; height: 88vh; } }
.tt-baby-stage[data-phase="play"] { touch-action: none; }
.tt-baby-stage.tt-baby-fill { position: fixed; inset: 0; z-index: 9999; width: auto; height: auto; max-height: none; aspect-ratio: auto; border-radius: 0; }
.tt-baby-stage:fullscreen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; }
.tt-baby-stage:-webkit-full-screen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; }
html.tt-baby-lock, html.tt-baby-lock body { overflow: hidden; overscroll-behavior: none; }
.tt-baby-stage .tt-baby-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 0; outline: none; }
.tt-baby-stage p, .tt-baby-stage h3, .tt-baby-stage ol, .tt-baby-stage dl, .tt-baby-stage dd { margin: 0; padding: 0; }
.tt-baby-stage i, .tt-baby-stage u, .tt-baby-stage kbd { font-style: normal; text-decoration: none; font-family: inherit; }
.tt-baby-stage button { margin: 0; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; touch-action: manipulation; }
.tt-baby-stage button:focus-visible, .tt-baby-stage input:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.tt-baby-stage .tt-baby-sorry { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; background: #2c2440; color: #fff; }

/* Words pinned to things in the picture. The script moves each with a transform; `translate` hangs it by the right corner. */
.tt-baby-layer, .tt-baby-pad { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tt-baby-layer > * { position: absolute; left: 0; top: 0; will-change: translate, transform; }
.tt-baby-tag { translate: -50% -100%; padding: 1px 9px; border-radius: 999px; background: rgba(255, 255, 255, .86); font-size: .76rem; font-weight: 800; white-space: nowrap; }
/* A need of the baby: what it is (the picture), how much patience is left (the ring). Two may sit side by side. */
.tt-baby-bubble { --p: 1; --c: var(--mint); translate: -50% -100%; margin-top: -11px; display: grid; place-items: center; width: 50px; height: 50px; border: 3px solid var(--ink); border-radius: 50%; background: #fff; box-shadow: 0 4px 0 rgba(53, 38, 31, .35); }
.tt-baby-bubble::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 12px; height: 12px; border: solid var(--ink); border-width: 0 3px 3px 0; background: inherit; transform: translateX(-50%) rotate(45deg); }
.tt-baby-bubble > i { position: absolute; inset: -10px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 360deg), rgba(53, 38, 31, .26) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); }
.tt-baby-bubble > span { position: relative; z-index: 1; display: grid; place-items: center; }
.tt-baby-bubble svg { display: block; width: 24px; height: 30px; }
.tt-baby-bubble[data-kind="milk"] { background: #eaf6ff; }
.tt-baby-bubble[data-kind="diaper"] { background: #f2f7d6; }
.tt-baby-bubble[data-kind="sleep"] { background: #efeaff; }
.tt-baby-bubble[data-kind="play"] { background: #ffeaf1; }
.tt-baby-bubble[data-state="mid"] { --c: #ffb020; }
.tt-baby-bubble[data-state="low"] { --c: #ff4d4d; border-color: #c81e1e; animation: tt-baby-shiver .28s linear infinite; }
.tt-baby-bubble[data-state="calm"] { --c: var(--sky); }
.tt-baby-bubble[data-state="calm"] > i { opacity: .55; }
.tt-baby-bubble[data-now="yes"] { z-index: 1; scale: 1.14; transform-origin: 50% 100%; }
.tt-baby-bubble[data-now="no"] { opacity: .92; }
.tt-baby-bubble[data-off="yes"]::after { display: none; }
/* How near to sleep the baby in the arms is */
.tt-baby-lull { translate: -50% 0; display: flex; align-items: center; gap: 5px; padding: 2px 9px 2px 5px; border: 2.5px solid var(--ink); border-radius: 999px; background: #2c2440; box-shadow: 0 3px 0 rgba(53, 38, 31, .4); }
.tt-baby-lull svg { display: block; width: 15px; height: 19px; }
.tt-baby-lull i { display: block; width: 56px; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .24); }
.tt-baby-lull u { display: block; height: 100%; border-radius: 999px; background: #ffd866; transform-origin: 0 50%; transform: scaleX(0); }
.tt-baby-chip { translate: -50% -100%; display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); font-size: .92rem; font-weight: 800; white-space: nowrap; animation: tt-baby-pop-in .16s ease-out; }
.tt-baby-chip kbd { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 7px; background: var(--sun); box-shadow: inset 0 -3px 0 rgba(53, 38, 31, .25); font-size: .8rem; font-weight: 900; }
.tt-baby-stage[data-input="touch"] .tt-baby-chip { padding-left: 12px; }
.tt-baby-stage[data-input="touch"] .tt-baby-chip kbd { display: none; }
.tt-baby-point { translate: -50% -50%; display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid var(--ink); border-radius: 50%; background: var(--sun); box-shadow: 0 3px 0 var(--ink); animation: tt-baby-beat 1s ease-in-out infinite; }
.tt-baby-point i { width: 26px; height: 22px; background: var(--ink); clip-path: polygon(0 32%, 50% 32%, 50% 0, 100% 50%, 50% 100%, 50% 68%, 0 68%); }
.tt-baby-pop { color: #fff; font-size: 1.2rem; font-weight: 900; line-height: 1; white-space: nowrap; letter-spacing: -.01em;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 4px 0 var(--ink); }
.tt-baby-pop[data-kind="good"] { color: #8dffb5; }
.tt-baby-pop[data-kind="bad"] { color: #ffa199; }
.tt-baby-pop[data-kind="heart"] { color: #ff9cc0; font-size: 1.12rem; }
.tt-baby-pop[data-kind="big"] { color: var(--sun); font-size: 2.7rem; }
/* A small thing gone wrong: the edge of the screen goes off like a siren. */
.tt-baby-stage[data-alarm] .tt-baby-layer::before { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 7px #ff3b3b, inset 0 0 80px 22px rgba(255, 40, 40, .62); animation: tt-baby-siren .44s steps(2, jump-none) infinite; }
.tt-baby-stage[data-flash]::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 220, 120, .1) 25%, rgba(255, 110, 40, .5)); pointer-events: none; animation: tt-baby-fade .12s ease-out; }

/* The strip at the top: one row (the day, the hearts, the stamina, the three buttons), then what to do now, then the small print */
.tt-baby-hud { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: auto auto minmax(40px, 64px) minmax(0, 1fr) auto; grid-template-areas: "clock hearts stamina . tools" "goal goal goal goal goal" "tiny tiny tiny tiny tiny"; align-items: center; gap: 0 4px; --pad: 8px;
  padding: max(var(--pad), env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left)); pointer-events: none; }
.tt-baby-clock, .tt-baby-hearts, .tt-baby-stamina { box-sizing: border-box; height: 44px; border: 2.5px solid var(--ink); border-radius: 13px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.tt-baby-clock { grid-area: clock; position: relative; display: grid; align-content: center; padding: 0 7px 4px; overflow: hidden; }
.tt-baby-clock small { font-size: .6rem; font-weight: 800; line-height: 1.15; color: #8a6fb3; }
.tt-baby-clock b { font-size: .76rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tt-baby-clock i { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(53, 38, 31, .14); }
.tt-baby-clock u { display: block; height: 100%; background: var(--coral); transform-origin: 0 50%; transform: scaleX(0); }
.tt-baby-hearts { grid-area: hearts; display: flex; align-items: center; gap: 4px; padding: 0 8px; font-size: .95rem; animation: tt-baby-bump .32s ease-out; }
.tt-baby-hearts span { color: #ff4d7d; font-size: 1.05rem; }
.tt-baby-hearts b { min-width: 1.1em; text-align: center; font-variant-numeric: tabular-nums; }
.tt-baby-stamina { grid-area: stamina; display: grid; align-content: center; gap: 3px; width: 100%; min-width: 0; padding: 0 7px; }
.tt-baby-stamina span { font-size: .6rem; font-weight: 800; line-height: 1.15; color: #6a5a52; }
.tt-baby-stamina i { display: block; height: 9px; overflow: hidden; border-radius: 999px; background: rgba(53, 38, 31, .16); }
.tt-baby-stamina u { display: block; height: 100%; border-radius: 999px; background: var(--mint); transform-origin: 0 50%; }
.tt-baby-stamina[data-state="low"] u { background: #ffb020; }
.tt-baby-stamina[data-state="out"] u { background: #ff4d4d; }
.tt-baby-stamina[data-state="out"] { animation: tt-baby-blink .5s steps(2) infinite; }
.tt-baby-hud .tt-baby-tools { grid-area: tools; display: flex; align-items: center; gap: 3px; }
.tt-baby-stage .tt-baby-tools button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: 0 3px 0 var(--ink); pointer-events: auto; }
.tt-baby-stage .tt-baby-tools button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.tt-baby-tools .tt-baby-mute, .tt-baby-tools [aria-pressed="false"] .tt-baby-wave, .tt-baby-tools .tt-baby-shut, .tt-baby-tools [aria-pressed="true"] .tt-baby-open { display: none; }
.tt-baby-tools [aria-pressed="false"] .tt-baby-mute, .tt-baby-tools [aria-pressed="true"] .tt-baby-shut { display: inline; }
.tt-baby-stage:not([data-phase="play"]) .tt-baby-hud > :not(.tt-baby-tools), .tt-baby-stage:not([data-phase="play"]) [data-pause] { display: none; }
/* What to do now, and for which need (the dot) */
.tt-baby-goal { grid-area: goal; justify-self: center; display: flex; align-items: center; gap: 7px; box-sizing: border-box; max-width: 100%; margin-top: 7px; padding: 5px 14px 5px 10px; border-radius: 999px; background: rgba(53, 38, 31, .86); color: #fff; font-size: .9rem; font-weight: 700; line-height: 1.25; text-align: left; word-break: keep-all; }
.tt-baby-goal i { flex: none; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: var(--sun); }
.tt-baby-goal[data-kind=""] i { display: none; }
.tt-baby-goal[data-kind=""] { padding-left: 14px; }
.tt-baby-goal[data-kind="milk"] i { background: #5bb8ff; }
.tt-baby-goal[data-kind="diaper"] i { background: #a9c24a; }
.tt-baby-goal[data-kind="sleep"] i { background: #9d8cf0; }
.tt-baby-goal[data-kind="play"] i { background: #ff8fb3; }
.tt-baby-tiny { grid-area: tiny; justify-self: end; max-width: 78%; margin-top: 3px; color: rgba(53, 38, 31, .8); font-size: .68rem; font-weight: 600; line-height: 1.2; text-align: right; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; animation: tt-baby-fade .4s ease-out; }

/* The one loud line of a moment, stamped across the picture */
.tt-baby-alert { position: absolute; left: 0; right: 0; top: max(132px, 24%); padding: 0 10px; color: #fff; font-size: 2.3rem; font-weight: 900; line-height: 1.1; letter-spacing: -.03em; text-align: center; word-break: keep-all; pointer-events: none; animation: tt-baby-stamp .24s cubic-bezier(.2, 1.5, .4, 1);
  text-shadow: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 7px 0 var(--ink), 3px 7px 0 var(--ink), -3px 7px 0 var(--ink); }
.tt-baby-alert[data-kind="alarm"] { color: #ffe14a; animation: tt-baby-stamp .24s cubic-bezier(.2, 1.5, .4, 1), tt-baby-quake .11s linear .24s infinite; }
.tt-baby-alert[data-kind="hush"] { color: #cfe4ff; font-size: 1.7rem; letter-spacing: .14em; animation: tt-baby-fade .5s ease-out; }
.tt-baby-alert[data-kind="good"] { color: #8dffb5; }
.tt-baby-alert[data-kind="bad"] { color: #ffa199; }

/* The words at the bottom: the narrator and the baby's thoughts, and the panel of a mini game. They stack and never sit on each other. */
.tt-baby-foot { position: absolute; left: 10px; right: 10px; bottom: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.tt-baby-says { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.tt-baby-narr { box-sizing: border-box; max-width: 100%; padding: 6px 13px; border-left: 5px solid var(--sun); background: rgba(24, 18, 32, .84); color: #fff; font-size: .9rem; font-weight: 600; letter-spacing: -.01em; text-align: center; word-break: keep-all; animation: tt-baby-fade .22s ease-out; }
.tt-baby-thought { box-sizing: border-box; display: grid; gap: 1px; max-width: min(100%, 30rem); padding: 6px 15px 7px; border: 2.5px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 0 4px 0 var(--ink); animation: tt-baby-fade .18s ease-out; }
.tt-baby-thought b { font-size: .7rem; font-weight: 800; color: #8a6fb3; }
.tt-baby-thought span { min-height: 1.3em; font-family: ui-serif, 'Nanum Myeongjo', 'AppleMyungjo', Batang, serif; font-size: 1rem; font-weight: 700; word-break: keep-all; }
.tt-baby-stage[data-input="keys"] .tt-baby-foot { left: 50%; right: auto; width: min(calc(100% - 24px), 40rem); transform: translateX(-50%); }
/* Touch: over the stick and the buttons; in a mini game the stick is gone, so the panel takes its place beside the big button. */
.tt-baby-stage[data-input="touch"] .tt-baby-foot { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: calc(160px + env(safe-area-inset-bottom)); }
.tt-baby-stage[data-input="touch"][data-mini] .tt-baby-foot { bottom: max(14px, env(safe-area-inset-bottom)); }
.tt-baby-stage[data-input="touch"][data-mini] .tt-baby-mini { align-self: flex-start; width: calc(100% - 106px); min-height: 118px; align-content: center; }

/* The small panel of a mini game. Each kind shows its own instrument. */
.tt-baby-mini { box-sizing: border-box; display: grid; justify-items: center; gap: 6px; width: min(100%, 21rem); padding: 9px 14px 10px; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 5px 0 var(--ink); text-align: center; animation: tt-baby-pop-in .2s ease-out; }
.tt-baby-mini strong { font-size: 1rem; font-weight: 900; }
.tt-baby-mini small { font-size: .78rem; font-weight: 700; color: #6a5a52; word-break: keep-all; }
.tt-baby-gauge, .tt-baby-beat, .tt-baby-sweep, .tt-baby-sensor, .tt-baby-peek, .tt-baby-marks, .tt-baby-bar { display: none; }
.tt-baby-mini[data-kind="shake"] .tt-baby-gauge { display: flex; }
.tt-baby-mini[data-kind="burp"] .tt-baby-beat, .tt-baby-mini[data-kind="lay"] .tt-baby-sensor, .tt-baby-mini[data-kind="peek"] .tt-baby-peek { display: grid; }
.tt-baby-mini[data-kind="defuse"] .tt-baby-sweep { display: block; }
.tt-baby-mini[data-kind="burp"] .tt-baby-marks, .tt-baby-mini[data-kind="defuse"] .tt-baby-marks, .tt-baby-mini[data-kind="peek"] .tt-baby-marks { display: flex; }
.tt-baby-mini[data-kind="shake"] .tt-baby-bar, .tt-baby-mini[data-kind="feed"] .tt-baby-bar, .tt-baby-mini[data-kind="defuse"] .tt-baby-bar { display: block; }
/* Shaking the bottle: a needle to keep in the green */
.tt-baby-gauge { position: relative; box-sizing: border-box; width: 100%; height: 30px; margin: 6px 0 2px; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; }
.tt-baby-gauge i { display: grid; place-items: center; height: 100%; color: rgba(53, 38, 31, .75); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.tt-baby-gauge .tt-baby-low { flex: 42; border-radius: 7px 0 0 7px; background: #ffd9a8; }
.tt-baby-gauge .tt-baby-ok { flex: 32; background: #8be3a8; color: var(--ink); }
.tt-baby-gauge .tt-baby-high { flex: 26; border-radius: 0 7px 7px 0; background: #bfe6ff; }
.tt-baby-gauge b, .tt-baby-sweep b { position: absolute; top: -8px; bottom: -8px; left: 30%; width: 7px; margin-left: -3.5px; border: 2px solid #fff; border-radius: 4px; background: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.tt-baby-mini[data-where="zone"] .tt-baby-gauge { box-shadow: 0 0 0 4px rgba(55, 200, 113, .5); }
/* Burping: a ring that closes on a circle */
.tt-baby-beat { position: relative; place-items: center; width: 92px; height: 92px; }
.tt-baby-beat i { grid-area: 1 / 1; width: 40px; height: 40px; border-radius: 50%; }
.tt-baby-beat-goal { border: 5px solid var(--sun); background: #fff; box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 2.5px var(--ink); }
.tt-baby-beat-ring { --s: 2.4; border: 3px solid var(--coral); transform: scale(var(--s)); }
.tt-baby-beat b { grid-area: 1 / 1; z-index: 1; font-size: 1.1rem; font-weight: 900; }
.tt-baby-mini[data-hit="perfect"] .tt-baby-beat-goal { background: var(--sun); }
.tt-baby-mini[data-hit="good"] .tt-baby-beat-goal { background: #8be3a8; }
.tt-baby-mini[data-hit="miss"] .tt-baby-beat-goal { background: #ffb3ad; }
.tt-baby-mini[data-hit] .tt-baby-beat-ring { visibility: hidden; }
/* The diaper: a hand sweeping over hazard stripes, a green slot to stop in, and a fuse burning down under it */
.tt-baby-sweep { position: relative; box-sizing: border-box; width: 100%; height: 30px; margin: 6px 0 2px; border: 2.5px solid var(--ink); border-radius: 10px; background: repeating-linear-gradient(-45deg, #ffe08a 0 10px, #4a3a33 10px 20px); }
.tt-baby-sweep i { position: absolute; top: 0; bottom: 0; left: 40%; width: 20%; border: solid var(--ink); border-width: 0 2.5px; background: #8be3a8; }
.tt-baby-sweep b { left: 0; }
.tt-baby-mini[data-kind="defuse"][data-hit="perfect"] .tt-baby-sweep i { background: var(--sun); }
.tt-baby-mini[data-kind="defuse"][data-hit="miss"] .tt-baby-sweep { animation: tt-baby-jolt .12s linear 3; }
.tt-baby-mini[data-kind="defuse"][data-hit="miss"] .tt-baby-sweep i { background: #ffb3ad; }
.tt-baby-mini[data-kind="defuse"] .tt-baby-bar { height: 7px; }
.tt-baby-mini[data-kind="defuse"] .tt-baby-bar u { background: #ff4d4d; }
/* Laying down: how far down, and how awake the sensor in the back is */
.tt-baby-sensor { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px 8px; box-sizing: border-box; width: 100%; margin: 4px 0 2px; padding: 7px 9px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; transition: background .12s; }
.tt-baby-sensor span { font-size: .74rem; font-weight: 800; text-align: left; white-space: nowrap; }
.tt-baby-sensor i { display: block; height: 12px; overflow: hidden; border: 2px solid var(--ink); border-radius: 999px; background: rgba(53, 38, 31, .1); }
.tt-baby-sensor u { display: block; height: 100%; background: var(--mint); transform-origin: 0 50%; transform: scaleX(0); }
.tt-baby-sensor .tt-baby-alarm u { background: #ffb020; }
.tt-baby-sensor[data-state="warn"] { background: #ffe9a8; animation: tt-baby-jolt .1s linear infinite; }
.tt-baby-sensor[data-state="live"] { background: #ffd0cb; }
.tt-baby-sensor[data-state="live"] .tt-baby-alarm u, .tt-baby-sensor[data-state="hot"] .tt-baby-alarm u { background: #ff4d4d; }
.tt-baby-sensor[data-state="hot"] .tt-baby-alarm { animation: tt-baby-blink .3s steps(2) infinite; }
/* Peekaboo: hush, hush, now! */
.tt-baby-peek { place-items: center; box-sizing: border-box; width: 100%; height: 50px; margin: 4px 0 2px; border: 2.5px solid var(--ink); border-radius: 12px; background: #2c2440; color: #cdbfff; transition: background .08s; }
.tt-baby-peek b { font-size: 1.25rem; font-weight: 900; letter-spacing: .04em; }
.tt-baby-mini[data-state="cue"] .tt-baby-peek { background: var(--sun); color: var(--ink); animation: tt-baby-beat .3s ease-in-out infinite; }
.tt-baby-mini[data-state="cue"] .tt-baby-peek b { font-size: 1.7rem; }
.tt-baby-mini[data-state="show"] .tt-baby-peek { background: #ffb3c7; color: var(--ink); }
.tt-baby-mini[data-state="show"][data-hit="miss"] .tt-baby-peek { background: #e4dcd4; color: #6a5a52; }
.tt-baby-marks { gap: 7px; }
.tt-baby-marks i { display: grid; place-items: center; width: 22px; height: 22px; border: 2.5px solid var(--ink); border-radius: 50%; background: #fff; font-size: .72rem; font-weight: 900; line-height: 1; }
.tt-baby-marks i[data-state="perfect"] { background: var(--sun); }
.tt-baby-marks i[data-state="perfect"]::before { content: '★'; }
.tt-baby-marks i[data-state="good"] { background: #8be3a8; }
.tt-baby-marks i[data-state="good"]::before { content: '●'; font-size: .5rem; }
.tt-baby-marks i[data-state="miss"] { background: #ffb3ad; }
.tt-baby-marks i[data-state="miss"]::before { content: '×'; }
.tt-baby-bar { width: 100%; height: 9px; overflow: hidden; border-radius: 999px; background: rgba(53, 38, 31, .16); }
.tt-baby-bar u { display: block; height: 100%; border-radius: 999px; background: var(--coral); transform-origin: 0 50%; }

/* Touch: the stick under the left thumb, the big button and the run button under the right */
.tt-baby-pad { display: none; }
.tt-baby-stage[data-input="touch"][data-phase="play"] .tt-baby-pad { display: block; }
.tt-baby-stick { position: absolute; left: 82px; top: calc(100% - 92px - env(safe-area-inset-bottom)); width: 112px; height: 112px; margin: -56px 0 0 -56px; border: 3px solid rgba(255, 255, 255, .7); border-radius: 50%; background: rgba(53, 38, 31, .22); }
.tt-baby-stick i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 3px solid var(--ink); border-radius: 50%; background: rgba(255, 250, 240, .92); box-shadow: 0 3px 0 rgba(53, 38, 31, .5); }
.tt-baby-stage[data-stick] .tt-baby-stick { background: rgba(53, 38, 31, .34); }
.tt-baby-stage[data-mini] .tt-baby-stick, .tt-baby-stage[data-mini] .tt-baby-run { display: none; }
.tt-baby-stage .tt-baby-act, .tt-baby-stage .tt-baby-run { position: absolute; display: grid; place-items: center; padding: 6px; border: 3px solid var(--ink); border-radius: 50%; pointer-events: auto; touch-action: none; word-break: keep-all; line-height: 1.12; text-align: center; }
.tt-baby-stage .tt-baby-act { right: max(14px, env(safe-area-inset-right)); bottom: calc(30px + env(safe-area-inset-bottom)); width: 96px; height: 96px; background: rgba(255, 250, 240, .86); box-shadow: 0 5px 0 var(--ink); font-size: .98rem; font-weight: 900; }
.tt-baby-stage .tt-baby-act[data-ready="yes"] { background: var(--sun); animation: tt-baby-beat .9s ease-in-out infinite; }
.tt-baby-stage .tt-baby-act[data-down], .tt-baby-stage .tt-baby-act:active { transform: translateY(4px) scale(.96); box-shadow: 0 1px 0 var(--ink); animation: none; }
.tt-baby-stage .tt-baby-run { right: calc(max(14px, env(safe-area-inset-right)) + 104px); bottom: calc(16px + env(safe-area-inset-bottom)); width: 62px; height: 62px; background: rgba(255, 250, 240, .86); box-shadow: 0 4px 0 var(--ink); font-size: .78rem; }
.tt-baby-stage .tt-baby-run[aria-pressed="true"] { background: #8be3a8; transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

/* Cards: the title, the pause and the end of the day */
.tt-baby-title, .tt-baby-pause, .tt-baby-over { position: absolute; inset: 0; display: grid; place-items: end center; padding: 58px 12px max(14px, env(safe-area-inset-bottom)); overflow-y: auto; }
.tt-baby-pause, .tt-baby-over { place-items: center; background: rgba(36, 26, 52, .46); }
.tt-baby-card { display: grid; gap: 9px; width: min(100%, 21rem); padding: 16px 18px 14px; border: 3px solid var(--ink); border-radius: 22px; background: var(--paper); box-shadow: 0 7px 0 var(--ink); text-align: center; animation: tt-baby-pop-in .22s ease-out; }
.tt-baby-brand { display: grid; gap: 2px; }
.tt-baby-kicker { font-size: .78rem; font-weight: 800; color: #8a6fb3; }
.tt-baby-card h3 { font-size: 1.35rem; font-weight: 900; }
.tt-baby-card .tt-baby-logo { display: flex; justify-content: center; align-items: baseline; gap: .12em; margin: 2px 0 5px; font-size: 2.6rem; line-height: 1.1; letter-spacing: -.02em; color: #fff;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 -3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 6px 0 var(--ink), 2px 6px 0 var(--ink), -2px 6px 0 var(--ink); }
.tt-baby-logo span:first-child { color: var(--sun); transform: rotate(-5deg); }
.tt-baby-logo span:last-child { color: #ffb3c7; transform: rotate(2deg) translateY(2px); }
.tt-baby-sub { font-size: .86rem; font-weight: 700; color: #6a5a52; word-break: keep-all; }
.tt-baby-sub:empty { display: none; }
.tt-baby-pick, .tt-baby-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tt-baby-stage .tt-baby-card button { min-height: 46px; padding: 0 12px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--ink); font-size: .95rem; }
.tt-baby-stage .tt-baby-card button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.tt-baby-stage .tt-baby-pick button[aria-pressed="true"] { background: var(--sun); }
.tt-baby-stage .tt-baby-pick button[aria-pressed="true"]::before { content: '✓ '; }
.tt-baby-name { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; text-align: left; }
.tt-baby-name label { display: grid; gap: 2px; min-width: 0; }
.tt-baby-name span { font-size: .76rem; font-weight: 800; color: #6a5a52; }
.tt-baby-stage .tt-baby-name input { box-sizing: border-box; width: 100%; height: 46px; padding: 0 12px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; font-size: 1rem; font-weight: 800; -webkit-user-select: text; user-select: text; }
.tt-baby-name input::placeholder { color: #b3a79f; font-weight: 600; font-size: .86rem; }
.tt-baby-stage .tt-baby-card .tt-baby-go { min-height: 54px; background: var(--coral); color: #fff; font-size: 1.15rem; font-weight: 900; text-shadow: 0 2px 0 rgba(53, 38, 31, .45); }
.tt-baby-keys { font-size: .74rem; font-weight: 700; color: #6a5a52; line-height: 1.9; word-break: keep-all; }
.tt-baby-keys kbd { margin: 0 3px 0 5px; padding: 2px 6px; border: 1.5px solid var(--ink); border-radius: 6px; background: #fff; box-shadow: 0 2px 0 var(--ink); font-size: .7rem; font-weight: 800; }
.tt-baby-for-touch, .tt-baby-stage[data-input="touch"] .tt-baby-for-keys { display: none; }
.tt-baby-stage[data-input="touch"] .tt-baby-for-touch { display: block; }
.tt-baby-note { font-size: .7rem; font-weight: 600; color: #9a8d85; }
/* The diary of the day: the hearts, the four cares, the tears */
.tt-baby-tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tt-baby-tally div { display: grid; padding: 5px 4px; border-radius: 12px; background: #f3ead9; }
.tt-baby-tally dt { font-size: .72rem; font-weight: 800; color: #6a5a52; }
.tt-baby-tally dd { font-size: 1.2rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-baby-tally div:first-child { background: #ffe1ea; }
.tt-baby-tally div:first-child dd { color: #ff4d7d; }
.tt-baby-rank { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 7px; font-size: .86rem; color: #6a5a52; }
.tt-baby-rank b { padding: 2px 12px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--sun); color: var(--ink); font-size: 1.05rem; font-weight: 900; transform: rotate(-2deg); }
.tt-baby-rank i { padding: 2px 10px; border: 2px dashed var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-size: .78rem; font-weight: 800; transform: rotate(2deg); }

/* A wide stage: everything at the top in one row, the card of the title on the left, the family beside it */
@container tt-baby (min-width: 700px) {
  .tt-baby-hud { --pad: 12px; grid-template-columns: auto auto 112px minmax(0, 1fr) auto; grid-template-areas: "clock hearts stamina goal tools" ". . . tiny tiny"; gap: 0 6px; }
  .tt-baby-clock { padding: 0 10px 4px; }
  .tt-baby-clock b { font-size: .86rem; }
  .tt-baby-goal { margin-top: 0; font-size: .95rem; }
  .tt-baby-tiny { max-width: 100%; margin-top: 5px; }
  .tt-baby-alert { font-size: 3.4rem; }
  .tt-baby-alert[data-kind="hush"] { font-size: 2.2rem; }
  .tt-baby-narr { font-size: 1rem; }
  /* With keys the panel of a mini game keeps the middle and the words step to its left. */
  .tt-baby-stage[data-input="keys"][data-mini] .tt-baby-foot { display: grid; grid-template-columns: minmax(0, 1fr) 21rem minmax(0, 1fr); align-items: end; gap: 14px; width: min(calc(100% - 24px), 62rem); }
  .tt-baby-stage[data-input="keys"][data-mini] .tt-baby-says { grid-column: 1; align-items: flex-end; }
  .tt-baby-stage[data-input="keys"][data-mini] .tt-baby-mini { grid-column: 2; }
  .tt-baby-stage[data-input="keys"][data-mini] .tt-baby-narr { text-align: left; }
  .tt-baby-title { place-items: center start; padding: 16px 16px 16px 6%; }
  .tt-baby-card .tt-baby-logo { font-size: 3.1rem; }
  .tt-baby-pop { font-size: 1.4rem; }
  .tt-baby-pop[data-kind="big"] { font-size: 3.15rem; }
}
/* A low stage (a phone on its side): everything gets shorter, and the words at the bottom go between the thumbs */
@container tt-baby (max-height: 440px) {
  .tt-baby-alert { top: 62px; font-size: 2.1rem; }
  .tt-baby-alert[data-kind="hush"] { font-size: 1.5rem; }
  .tt-baby-narr { padding: 5px 12px; font-size: .86rem; }
  .tt-baby-thought { padding: 4px 12px 5px; }
  .tt-baby-stage[data-input="touch"] .tt-baby-foot { left: 150px; right: 190px; bottom: max(10px, env(safe-area-inset-bottom)); }
  .tt-baby-stage[data-input="touch"][data-mini] .tt-baby-foot { left: max(10px, env(safe-area-inset-left)); right: calc(max(14px, env(safe-area-inset-right)) + 108px); flex-direction: row; align-items: flex-end; gap: 10px; }
  .tt-baby-stage[data-input="touch"][data-mini] .tt-baby-mini { order: -1; flex: 0 0 min(21rem, 48%); align-self: auto; width: auto; min-height: 0; gap: 4px; padding: 7px 12px 8px; }
  .tt-baby-stage[data-input="touch"][data-mini] .tt-baby-says { flex: 1 1 0; align-items: flex-start; }
  .tt-baby-stage[data-input="touch"][data-mini] .tt-baby-narr { text-align: left; }
  .tt-baby-beat { width: 76px; height: 76px; }
  .tt-baby-title, .tt-baby-pause, .tt-baby-over { place-items: center; padding: 8px 12px; }
  .tt-baby-title { place-items: center start; padding-left: max(4%, env(safe-area-inset-left)); }
  .tt-baby-card { gap: 6px; padding: 10px 16px; }
  .tt-baby-title .tt-baby-card { grid-template-columns: auto minmax(0, 15rem); align-items: center; column-gap: 18px; width: auto; max-width: 100%; }
  .tt-baby-title .tt-baby-card > * { grid-column: 2; }
  .tt-baby-title .tt-baby-brand { grid-column: 1; grid-row: 1 / span 4; }
  .tt-baby-card .tt-baby-logo { flex-direction: column; align-items: center; gap: 0; font-size: 2.5rem; }
  .tt-baby-card .tt-baby-keys, .tt-baby-over .tt-baby-kicker, .tt-baby-over .tt-baby-note { display: none; }
  .tt-baby-stage .tt-baby-card button, .tt-baby-stage .tt-baby-name input { min-height: 44px; height: 44px; }
  .tt-baby-tally { grid-template-columns: repeat(6, 1fr); }
  .tt-baby-tally dd { font-size: 1.05rem; }
  .tt-baby-over .tt-baby-card { width: min(100%, 30rem); }
  .tt-baby-over .tt-baby-card h3 { font-size: 1.1rem; }
}

@keyframes tt-baby-pop-in { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes tt-baby-stamp { from { opacity: 0; scale: 2.3; } to { opacity: 1; scale: 1; } }
@keyframes tt-baby-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tt-baby-bump { 0% { scale: 1; } 40% { scale: 1.22; } 100% { scale: 1; } }
@keyframes tt-baby-beat { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
@keyframes tt-baby-blink { 50% { opacity: .55; } }
@keyframes tt-baby-siren { 50% { opacity: .2; } }
@keyframes tt-baby-jolt { 0%, 100% { translate: -2px 0; } 50% { translate: 2px 0; } }
@keyframes tt-baby-shiver { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes tt-baby-quake { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
@media (prefers-reduced-motion: reduce) {
  .tt-baby-stage *, .tt-baby-stage *::before, .tt-baby-stage::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}