/* Twisted Turf mascot ("Sprout"): one SVG circle with two eyes (assets/js/mascot.js draws it into every <span class="ttm">).
   Built from build-shots/mascot-mockup: the menu logo, every loading spinner and the Help & Chat button (includes/mascot.php). */
.ttm { --ttm-body: #5CDB3A; --ttm-shade: #3FB524; --ttm-eye: #fff; --ttm-pupil: #111111; --ttm-ring: #1E90FF;
  display: inline-block; width: var(--ttm-size, 32px); height: var(--ttm-size, 32px); flex: none; position: relative; }
.ttm svg, .hc-fab .ttm svg { width: 100%; height: 100%; display: block; overflow: visible; stroke: none; } /* .hc-fab: help.css styles the button's own icons */
.ttm .b { fill: var(--ttm-body); }
.ttm .s { fill: var(--ttm-shade); opacity: .55; }
.ttm .e { fill: var(--ttm-eye); transform-box: fill-box; transform-origin: center; transition: transform .09s ease-in; }
.ttm .p { fill: var(--ttm-pupil); transition: transform .28s cubic-bezier(.3, .7, .3, 1); }
.ttm .g { fill: #fff; opacity: .9; }
.ttm.blink .e { transform: scaleY(.08); }
.ttm.blink .p { opacity: 0; transition: opacity .05s; }
.ttm.happy .e { transform: scaleY(.55) translateY(8%); }
.ttm.happy .p { transform: translate(0, -1px) !important; }
/* Chat button: a small hop now and then. */
.ttm-hop { animation: ttm-hop 7s ease-in-out infinite; }
@keyframes ttm-hop { 0%, 88%, 100% { transform: translateY(0); } 92% { transform: translateY(-3px); } 96% { transform: translateY(0) scale(1.04, .96); } }
/* Spinner: a ring runs round the mascot while its eyes chase the dot (<span class="ttm-spin"><span class="ttm" data-chase="1"></span></span>). */
.ttm-spin { position: relative; width: var(--ttm-size, 56px); height: var(--ttm-size, 56px); display: inline-grid; place-items: center; }
.ttm-spin .ttm { --ttm-size: 70%; }
.ttm-spin::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--ttm-ring, #1E90FF) 18%, transparent); border-top-color: var(--ttm-ring, #1E90FF); animation: ttm-turn 1.1s linear infinite; }
@keyframes ttm-turn { to { transform: rotate(1turn); } }
/* On dark backgrounds (sidebar logo): brighter body edge. */
:root[data-theme="dark"] .ttm, .ttm.on-dark { --ttm-shade: #2E8F18; --ttm-pupil: #0B1A2A; }
:root[data-theme="dark"] .ttm .b, .ttm.on-dark .b { stroke: #8CF06F; stroke-width: 1.2; }
/* Still: the phone/computer Reduce Motion setting, or Animated Mascot off (My Help Settings). Still eyes, no hop, the ring pulses instead of turning. */
@media (prefers-reduced-motion: reduce) {
  .ttm .p, .ttm .e { transition: none; }
  .ttm-hop { animation: none; }
  .ttm-spin::before { animation: ttm-pulse 1.6s ease-in-out infinite; border-color: var(--ttm-ring, #1E90FF); }
}
.ttm-still .ttm .p, .ttm-still .ttm .e, .ttm-still.ttm .p, .ttm-still.ttm .e { transition: none; }
.ttm-still .ttm-hop, .ttm-still.ttm-hop { animation: none; }
.ttm-still .ttm-spin::before { animation: ttm-pulse 1.6s ease-in-out infinite; border-color: var(--ttm-ring, #1E90FF); }
@keyframes ttm-pulse { 50% { opacity: .35; } }
/* Menu logo: beside the name, the same line height as before (no taller brand row, no wrapping). */
.ttm.ttm-logo { --ttm-size: 24px; vertical-align: middle; margin: -4px 7px -2px 0; }
.portal-top .ttm.ttm-logo { --ttm-size: 22px; }
/* Inline loading states: the spinner sits before the words (Loading…, Working…). */
.ttm-spin.ttm-inline { vertical-align: middle; margin: -3px 7px -1px 0; }
.ttm-load { display: flex; align-items: center; gap: 8px; }
.ttm-load .ttm-spin { margin: 0; }
/* Photo viewer: the mascot spinner in place of the white ring (style.css .ttv-spin). */
.ttv-spin.ttm-spin { position: absolute; border: 0; animation: none; width: 48px; height: 48px; --ttm-size: 48px; display: none; } /* hidden unless loading: .ttm-spin's own display came later and beat style.css .ttv-spin, so it never went away */
.ttv.is-loading .ttv-spin.ttm-spin { display: inline-grid; }
/* Styles (Settings > Mascot). Green with no cap is the default look above, untouched. */
.ttm.ttm-b-blue { --ttm-body: #1E90FF; --ttm-shade: #1673D1; }
.ttm.ttm-b-mix { --ttm-body2: #1E90FF; --ttm-shade: #163A5F; }
.ttm .b2 { fill: var(--ttm-body2, #1E90FF); }
.ttm .r { fill: none; stroke: #fff; stroke-width: 1.4; }
.ttm.ttm-cap-green { --ttm-cap: #2E8F18; --ttm-brim: #3FB524; }
.ttm.ttm-cap-blue { --ttm-cap: #1E90FF; --ttm-brim: #1673D1; }
.ttm .cap .c1 { fill: var(--ttm-cap); }
.ttm .cap .c4, .ttm .cap .c3 { fill: var(--ttm-brim); }
.ttm .cap .c1, .ttm .cap .c4 { stroke: #fff; stroke-width: .8; paint-order: stroke; }
.ttm .cap .c2 { fill: none; stroke: rgba(0, 0, 0, .2); stroke-width: .6; }
/* Settings > Mascot preview: the logo on the dark menu, the chat button, the spinner. */
.ttm-preview { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 4px 0 14px; position: sticky; top: var(--top-h); z-index: 3; background: var(--card, #fff); padding: 8px 0; } /* pinned at the top of Settings > Sprout so every change shows while you scroll (Oct 19 2026) */
.ttm-pv-logo { display: inline-flex; align-items: center; gap: 7px; background: var(--ink, #111); color: #fff; font-weight: 650; padding: 10px 14px; border-radius: 10px; }
.ttm-pv-logo .twisted { color: var(--blue); }
.ttm-pv-logo span:last-child { color: var(--grass); }
.ttm-pv-fab { width: 52px; height: 52px; border-radius: 50%; background: var(--blue); display: inline-grid; place-items: center; box-shadow: 0 6px 18px rgba(17,17,17,.22); }
.ttm .cap .c5 { fill: rgba(0, 0, 0, .18); }
/* Extras (Settings > Mascot, off by default). */
.ttm.ttm-cap-mix { --ttm-cap: #3FB524; --ttm-brim: #1E90FF; }
.ttm .hat .h1 { fill: #E23B2F; stroke: #fff; stroke-width: .7; paint-order: stroke; }
.ttm .hat .h2 { fill: #fff; }
/* Sunglasses (summer accessory + the visor trick, mascot.js SPECS): right over his eyes; Big Eyes glasses move with the eyes
   (same easing as the eyes, so they never part). */
.ttm .spx { transition: transform .28s cubic-bezier(.3, .7, .3, 1); }
.ttm.dart .spx { transition: transform .08s linear; }
.ttm .spx .sl { fill: #10151C; fill-opacity: .93; stroke: #fff; stroke-width: .7; paint-order: stroke; }
.ttm .spx .sb, .ttm .spx .sa { fill: none; stroke: #10151C; stroke-width: 1.5; stroke-linecap: round; }
.ttm .spx .sx-g { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: .8; stroke-linecap: round; }
.ttm .wh .w1 { fill: #2A1B3D; stroke: #fff; stroke-width: .7; paint-order: stroke; }
.ttm .wh .w2 { fill: #F08A24; }
.ttm .wh .w3 { fill: none; stroke: #FFD43B; stroke-width: .8; }
.ttm.glow .p circle:not(.g) { fill: #FF8A1E; }
.ttm.glow .p { filter: drop-shadow(0 0 1.4px #FF8A1E); }
.ttm.sleepy:not(.blink):not(.happy):not(.hello) .e { transform: scaleY(.45) translateY(18%); }
.ttm.sleepy:not(.blink):not(.happy) .p { opacity: .85; }
.ttm.wink ellipse.e:first-of-type { transform: scaleY(.08); }
.ttm.hello { animation: ttm-hello 1.2s ease both; }
@keyframes ttm-hello { 0%, 100% { transform: none; } 20% { transform: translateY(-5px) rotate(-8deg); } 40% { transform: translateY(0) rotate(6deg); } 60% { transform: translateY(-3px) rotate(-4deg); } 80% { transform: none; } }
/* Background circle of the Help & Chat button (Settings > Mascot > Background Circle; Dodger Blue is the default) and the spinner ring. */
:root[data-ttm-bg="green"] .hc-fab, .ttm-pv-fab[data-bg="green"] { background: #5CDB3A; }
:root[data-ttm-bg="mix"] .hc-fab, .ttm-pv-fab[data-bg="mix"] { background: linear-gradient(135deg, #5CDB3A 50%, #1E90FF 50%); }
:root[data-ttm-bg="green"] .hc-fab:hover, :root[data-ttm-bg="mix"] .hc-fab:hover { filter: brightness(.92); }
:root[data-ttm-bg="green"] .ttm-spin, .ttm-spin[data-bg="green"] { --ttm-ring: #3FB524; }
:root[data-ttm-bg="mix"] .ttm-spin::before, .ttm-spin[data-bg="mix"]::before { border-bottom-color: #5CDB3A; }
@media (prefers-reduced-motion: reduce) { .ttm.hello { animation: none; } }
/* Lively moves (Settings > Mascot > Lively Moves): darting looks, squints, an eye roll and a flip now and then. */
.ttm.dart .p { transition: transform .08s linear; }
.ttm.squint:not(.blink) .e { transform: scaleY(.38) translateY(6%); transition-duration: .12s; }
.ttm.flip .e, .ttm.flip .p { animation: ttm-flip .55s cubic-bezier(.4, 0, .2, 1); }
.ttm.flip .p { transform-box: fill-box; transform-origin: center; }
@keyframes ttm-flip { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(-1); } }
@media (prefers-reduced-motion: reduce) { .ttm.flip .e, .ttm.flip .p { animation: none; } }
.ttm-still .ttm.flip .e, .ttm-still .ttm.flip .p, .ttm.ttm-still.flip .e, .ttm.ttm-still.flip .p { animation: none; }
.ttm-preview .ttm-spin[data-bg="blue"] { --ttm-ring: #1E90FF; }
.ttm-preview .ttm-spin[data-bg="mix"] { --ttm-ring: #1E90FF; }
/* Glow (Settings > Mascot > Glow, off by default): a soft white halo. Off: none. */
:root[data-ttm-glow="1"] .ttm svg { filter: drop-shadow(0 0 1.6px rgba(255, 255, 255, .95)); }
/* Eye Style "Pill" (Settings > Mascot): tall solid dark ovals like a friendly blob; blink, squint and moods squash them. Classic is the default. */
.ttm .pe { fill: var(--ttm-pupil); transform-box: fill-box; transform-origin: center; transform: var(--pe-t, none); transition: transform .28s cubic-bezier(.3, .7, .3, 1); }
.ttm-eye-pill.blink .pe, .ttm-eye-pill.wink .pe { transition-duration: .08s; }
.ttm-eye-pill.blink .p { opacity: 1; }
.ttm-eye-pill.blink .pe { transform: scaleY(.1); }
.ttm-eye-pill.squint:not(.blink) .pe { transform: scale(.8, .72); }
.ttm-eye-pill.happy .pe { transform: scale(.84, .78) translateY(-8%); }
.ttm-eye-pill.sleepy:not(.blink):not(.happy):not(.hello) .pe { transform: scale(.82, .72) translateY(14%); }
.ttm-eye-pill.wink .pe:first-child { transform: scaleY(.1); }
.ttm-eye-pill.glow .pe { fill: #FF8A1E; }
.ttm-eye-pill.flip .p { animation: ttm-roll .6s cubic-bezier(.4, 0, .2, 1); transform-box: fill-box; transform-origin: center; }
@keyframes ttm-roll { to { transform: rotate(360deg); } }
.ttm-still .ttm-eye-pill.flip .p, .ttm-eye-pill.ttm-still.flip .p { animation: none; }
@media (prefers-reduced-motion: reduce) { .ttm-eye-pill.flip .p { animation: none; } }
/* Help & Chat: the mascot thinking while the assistant works on an answer (its eyes roll round). */
.hc-think .ttm { margin-top: 2px; }
/* Mascot tricks (assets/js/app-loader.js MOVES): the loading pill and the Help & Chat button. 1em = the mascot's size;
   --d is the side with room (pill: right, chat button: left). Visual only, never takes a tap. */
.ttl-pill { --d: 1; --lift: -1.25em; }
.hc-fab { --d: -1; --lift: 0em; }
/* In the pill every prop sits on the pill's top edge, so nothing covers Loading… / Done. */
.ttl-pill .ttl-fx { transform: translateY(-1.2em); }
.ttl-trick .ttm { pointer-events: none; }
.ttl-fx { position: absolute; pointer-events: none; overflow: visible; z-index: 2; }
.ttl-fx i { position: absolute; left: 0; top: 0; font-style: normal; line-height: 1; opacity: 0; white-space: nowrap; pointer-events: none; }
.ttl-say { position: fixed; z-index: 2147482500; max-width: min(240px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  padding: 8px 12px; border-radius: 14px; background: #fff; color: #111; font: 650 13px/1.3 "Segoe UI", system-ui, -apple-system, sans-serif;
  box-shadow: 0 6px 20px rgba(17, 17, 17, .25); border: 1px solid rgba(17, 17, 17, .08); pointer-events: none;
  opacity: 0; transform: translateY(6px) scale(.92); transform-origin: 85% 100%; transition: opacity .2s ease, transform .2s ease; }
.ttl-say::after { content: ""; position: absolute; right: 18px; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg);
  border-right: 1px solid rgba(17, 17, 17, .08); border-bottom: 1px solid rgba(17, 17, 17, .08); }
.ttl-say.on { opacity: 1; transform: none; }
.ttl-say .ttl-say-t { display: block; font-variant-numeric: tabular-nums; }
.ttl-say .ttl-bar { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: #E6E8EC; overflow: hidden; }
.ttl-say .ttl-bar b { display: block; height: 100%; width: 0; background: #5CDB3A; transition: width .4s ease; }
/* Classics */
.ttl-mv-wink .ttm { animation: ttl-tilt 1s ease both; }
@keyframes ttl-tilt { 0%, 100% { transform: none; } 25%, 75% { transform: rotate(calc(var(--d) * -12deg)); } }
.ttl-mv-look .ttm .p { animation: ttl-look 1.6s ease-in-out both; }
@keyframes ttl-look { 0%, 100% { transform: none; } 15%, 32% { transform: translate(-3px, 0); } 45%, 62% { transform: translate(3px, 0); } 75%, 90% { transform: translate(0, -3px); } }
.ttl-mv-hop .ttm { animation: ttl-hop 1s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes ttl-hop { 0%, 100% { transform: none; } 15% { transform: scale(1.15, .85) translateY(8%); } 45% { transform: translateY(-.7em) scale(.95, 1.05); } 75% { transform: scale(1.12, .88) translateY(6%); } 88% { transform: none; } }
.ttl-mv-wave .f1 { font-size: .7em; left: calc(50% + var(--d) * .6em - .35em); top: -.25em; transform-origin: 70% 90%; animation: ttl-wave 1.4s ease both; }
@keyframes ttl-wave { 0% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; transform: none; } 25%, 55% { transform: rotate(-20deg); } 40%, 70% { transform: rotate(18deg); } 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ttl-mv-wave .ttm { animation: ttl-tilt 1.4s ease both; }
.ttl-mv-spin .ttm { animation: ttl-spin 1s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes ttl-spin { 0% { transform: none; } 50% { transform: translateY(-.3em) rotate(200deg); } 100% { transform: rotate(360deg); } }
.ttl-mv-dance .ttm { animation: ttl-dance 2s ease-in-out both; }
@keyframes ttl-dance { 0%, 100% { transform: none; } 12.5%, 62.5% { transform: rotate(-14deg) translateY(-.15em); } 25%, 75% { transform: translateY(.05em); } 37.5%, 87.5% { transform: rotate(14deg) translateY(-.15em); } }
.ttl-mv-dance .f1, .ttl-mv-dance .f2 { font-size: .55em; color: #5CDB3A; font-weight: 700; left: calc(50% + var(--d) * .7em); top: 0; animation: ttl-note 1.2s ease-out both; }
.ttl-mv-dance .f2 { color: #1E90FF; animation-delay: .7s; left: calc(50% - var(--d) * .9em); }
@keyframes ttl-note { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(.2em, -1.2em) rotate(15deg); } }
.ttl-mv-sneeze .ttm { animation: ttl-sneeze 1.5s ease both; }
@keyframes ttl-sneeze { 0%, 100% { transform: none; } 20% { transform: rotate(calc(var(--d) * -6deg)) scale(1.03); } 45% { transform: rotate(calc(var(--d) * -12deg)) translateY(-.06em) scale(1.08); } 52% { transform: rotate(calc(var(--d) * 14deg)) translateX(calc(var(--d) * .15em)) scale(.94); } 65% { transform: rotate(calc(var(--d) * 4deg)); } 80% { transform: none; } }
.ttl-mv-sneeze .f1 { font: 800 .42em/1 "Segoe UI", system-ui, sans-serif; color: currentColor; left: calc(50% + var(--d) * .9em - 1em); top: -.6em; animation: ttl-achoo 1.5s ease both; }
@keyframes ttl-achoo { 0%, 48% { opacity: 0; transform: scale(.3); } 55% { opacity: 1; transform: scale(1.15); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-.4em); } }
.ttl-mv-eyeroll .ttm .p { animation: ttl-roll2 1.2s ease-in-out both; }
@keyframes ttl-roll2 { 0%, 100% { transform: none; } 15% { transform: translate(0, -3px); } 35% { transform: translate(3px, -1px); } 50% { transform: translate(2px, 2px); } 65% { transform: translate(-2px, 2px); } 80% { transform: translate(-3px, -1px); } 90% { transform: translate(0, -2px); } }
.ttl-mv-eyeroll .ttm { animation: ttl-tilt 1.2s ease both; }
/* Rabbit out of a top hat (4.4 s): hat drops in, wand taps twice, sparkle, rabbit rises, wiggles, hops away, hat vanishes. */
.ttl-mv-rabbit .f1 { font-size: .9em; left: calc(50% - .5em); top: -.78em; animation: ttl-hat 4.4s ease both; } /* the hat sits on his head at every size */
.ttl-pill.ttl-mv-rabbit .ttl-fx { transform: none; } /* on his head it never covers Loading…, so no lift off the pill */
@keyframes ttl-hat { 0% { opacity: 0; transform: translateY(-1em); } 8% { opacity: 1; transform: translateY(.08em) scale(1.08, .92); } 12%, 84% { opacity: 1; transform: none; } 22%, 30% { transform: scale(1.06, .94); } 26%, 34%, 48%, 60% { transform: none; } 54% { transform: translateY(-.39em); } 100% { opacity: 0; transform: scale(.2); } } /* 54%: rides up with his tada hop */
.ttl-mv-rabbit .f4 { width: .1em; height: .7em; border-radius: .05em; background: linear-gradient(#fff 0 22%, #111 22%); left: calc(50% + var(--d) * .55em); top: -.95em; transform-origin: 50% 100%; animation: ttl-wand 4.4s ease both; }
@keyframes ttl-wand { 0%, 10% { opacity: 0; transform: rotate(calc(var(--d) * 10deg)); } 14% { opacity: 1; } 20%, 28% { transform: rotate(calc(var(--d) * 50deg)); } 24%, 32% { transform: rotate(calc(var(--d) * 20deg)); } 38% { opacity: 1; transform: rotate(calc(var(--d) * 20deg)); } 44%, 100% { opacity: 0; } }
.ttl-mv-rabbit .f3 { font-size: .6em; left: calc(50% + var(--d) * .5em / .6 - .3em); top: -1.6em; animation: ttl-sparkle 4.4s ease both; }
@keyframes ttl-sparkle { 0%, 30% { opacity: 0; transform: scale(.2) rotate(0); } 36% { opacity: 1; transform: scale(1.3) rotate(40deg); } 46% { opacity: 0; transform: scale(.8) rotate(90deg); } 100% { opacity: 0; } }
.ttl-mv-rabbit .f2 { font-size: .8em; left: calc(50% - .5em); top: -.7em; animation: ttl-bun 4.4s ease both; }
@keyframes ttl-bun { 0%, 36% { opacity: 0; transform: translateY(.3em) scale(.5); } 50% { opacity: 1; transform: translateY(-1.1em) scale(1); } 56% { transform: translateY(-1.1em) rotate(-10deg); } 60% { transform: translateY(-1.1em) rotate(10deg); } 64% { transform: translateY(-1.1em); }
  70% { transform: translate(calc(var(--d) * .8em), -1.8em); } 75% { transform: translate(calc(var(--d) * 1.6em), -.6em); } 81% { transform: translate(calc(var(--d) * 2.4em), -1.4em); } 87% { opacity: 1; transform: translate(calc(var(--d) * 3.2em), -.4em); } 94%, 100% { opacity: 0; transform: translate(calc(var(--d) * 3.8em), -.4em); } }
.ttl-mv-rabbit .ttm { animation: ttl-tada 4.4s ease both; }
@keyframes ttl-tada { 0%, 48%, 70%, 100% { transform: none; } 54% { transform: translateY(-.35em) scale(1.08); } 60% { transform: none; } }
/* Burst out of the chat button (idle only): he squeezes, pops out above, says a line, hops back in. */
.ttl-mv-burst .ttm { animation: ttl-burst 4.2s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes ttl-burst { 0% { transform: none; } 6% { transform: scale(1.2, .8); } 9% { transform: scale(.85, 1.2); } 16% { transform: translate(calc(var(--d) * .5em), -2.4em) scale(1.35); } 20% { transform: translate(calc(var(--d) * .5em), -2.1em) scale(1.35, 1.25); }
  24%, 78% { transform: translate(calc(var(--d) * .5em), -2.25em) scale(1.35); } 50% { transform: translate(calc(var(--d) * .5em), -2.4em) scale(1.35); } 86% { transform: translate(calc(var(--d) * .2em), -2.9em) scale(1.2); } 94% { transform: scale(1.1, .9); } 100% { transform: none; } }
.ttl-mv-burst .f1, .ttl-mv-burst .f2, .ttl-mv-burst .f3 { width: .18em; height: .18em; border-radius: 50%; background: #fff; left: 41%; top: 41%; animation: ttl-shard 1.1s ease-out both; }
.ttl-mv-burst .f2 { background: #5CDB3A; --sx: -1.1em; --sy: -.9em; }
.ttl-mv-burst .f1 { --sx: .9em; --sy: -1.1em; }
.ttl-mv-burst .f3 { background: #FFD43B; --sx: -.2em; --sy: -1.5em; }
@keyframes ttl-shard { 0%, 12% { opacity: 0; transform: none; } 16% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.4); } }
/* Screen crack (idle, gag): he bonks the glass, a crack spreads, then fades. */
.ttl-mv-crack .ttm { animation: ttl-bonk 3.6s ease both; }
@keyframes ttl-bonk { 0%, 100% { transform: none; } 12% { transform: translate(calc(var(--d) * .2em), -.2em) scale(1.1); } 18% { transform: translateY(.05em) scale(1.25, .8); } 24%, 80% { transform: scale(1.05); } }
.ttl-mv-crack .f1 { width: 2.6em; height: 2.6em; left: -.8em; top: -.8em; animation: ttl-crack 3.6s ease both;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 50 L30 20 L22 4M50 50 L80 28 L96 22M50 50 L74 78 L82 96M50 50 L24 70 L6 76M30 20 L12 26M80 28 L84 8M24 70 L28 92'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6)); }
@keyframes ttl-crack { 0%, 17% { opacity: 0; transform: scale(.2); } 22% { opacity: 1; transform: scale(1.05); } 26%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* Flag (idle, gag): he hops, plants a little flag beside him, salutes it. */
.ttl-mv-flag .f1 { font-size: .8em; left: calc(50% + var(--d) * 1.2em - .4em); top: -.2em; transform-origin: 20% 100%; animation: ttl-flag 3.6s ease both; }
@keyframes ttl-flag { 0%, 14% { opacity: 0; transform: translateY(-1.2em); } 22% { opacity: 1; transform: translateY(.1em) rotate(-6deg); } 28%, 86% { opacity: 1; transform: none; } 40%, 60% { transform: rotate(-5deg); } 50%, 70% { transform: rotate(4deg); } 100% { opacity: 0; } }
.ttl-mv-flag .ttm { animation: ttl-hop 1s cubic-bezier(.3, .7, .4, 1) .2s both; }
/* Salute (idle, gag) */
.ttl-mv-salute .f1 { font-size: .5em; left: calc(50% + var(--d) * .2em); top: -.15em; transform-origin: 30% 100%; animation: ttl-salute 3.2s ease both; }
@keyframes ttl-salute { 0%, 8% { opacity: 0; transform: rotate(-40deg); } 18%, 80% { opacity: 1; transform: rotate(10deg); } 100% { opacity: 0; transform: rotate(-30deg); } }
.ttl-mv-salute .ttm { animation: ttl-stand 3.2s ease both; }
@keyframes ttl-stand { 0%, 100% { transform: none; } 15%, 80% { transform: scale(.95, 1.08); } }
/* Fake takeover progress (idle, gag): only the bubble moves; he watches it. */
.ttl-mv-progress .ttm .p { animation: ttl-up 4.2s ease both; }
@keyframes ttl-up { 0%, 100% { transform: none; } 8%, 60% { transform: translate(calc(var(--d) * 1px), -3px); } 66%, 92% { transform: translate(0, 1px); } }
/* ---- Batch 2 ---- Travelling tricks (bug, trip, mow): he hops up onto the pill's top edge (--lift; the props are already up there) so the words stay readable. */
/* Bug chase (2.6 s): a ladybug crawls in, he jumps, it scurries off, he chases and comes back. */
.ttl-mv-bug .f1 { font-size: .5em; left: 25%; top: 70%; animation: ttl-bug 2.6s linear both; }
@keyframes ttl-bug { 0% { opacity: 0; transform: translateX(calc(var(--d) * 7em)) scaleX(calc(var(--d) * -1)); } 8% { opacity: 1; } 35% { transform: translateX(calc(var(--d) * 2.2em)) scaleX(calc(var(--d) * -1)); }
  42% { transform: translateX(calc(var(--d) * 2.2em)) scaleX(var(--d)); } 75% { opacity: 1; transform: translateX(calc(var(--d) * 9em)) scaleX(var(--d)); } 82%, 100% { opacity: 0; transform: translateX(calc(var(--d) * 10em)) scaleX(var(--d)); } }
.ttl-mv-bug .ttm { animation: ttl-chase 2.6s ease both; }
@keyframes ttl-chase { 0%, 100% { transform: none; } 36% { transform: translateY(var(--lift)); } 40% { transform: translateY(calc(var(--lift) - .5em)) scale(1.1); } 46% { transform: translateY(var(--lift)); }
  70% { transform: translate(calc(var(--d) * 2.6em), var(--lift)); } 74% { transform: translate(calc(var(--d) * 2.6em), calc(var(--lift) - .15em)) rotate(calc(var(--d) * 10deg)); } 90% { transform: translateY(var(--lift)); } }
.ttl-mv-bug .ttm .p { animation: ttl-follow 2.6s ease both; }
@keyframes ttl-follow { 0%, 100% { transform: none; } 10%, 38% { transform: translate(calc(var(--d) * 3px), 2px); } 46%, 72% { transform: translate(calc(var(--d) * 3px), 0); } 82%, 92% { transform: translate(calc(var(--d) * -3px), 0); } }
/* Trip (2.4 s): walks out, trips, lies there seeing stars, gets up, walks back. */
.ttl-mv-trip .ttm { transform-origin: 50% 100%; animation: ttl-trip 2.4s ease both; }
@keyframes ttl-trip { 0%, 100% { transform: none; } 8% { transform: translate(calc(var(--d) * .3em), var(--lift)); } 22% { transform: translate(calc(var(--d) * 1.4em), calc(var(--lift) - .1em)); } 28% { transform: translate(calc(var(--d) * 1.8em), var(--lift)) rotate(calc(var(--d) * 25deg)); }
  36%, 62% { transform: translate(calc(var(--d) * 2.2em), calc(var(--lift) + .1em)) rotate(calc(var(--d) * 90deg)); } 72% { transform: translate(calc(var(--d) * 2.1em), calc(var(--lift) - .2em)) rotate(calc(var(--d) * -8deg)); } 78% { transform: translate(calc(var(--d) * 2em), var(--lift)); } 92% { transform: translateY(var(--lift)); } }
.ttl-mv-trip .f1 { font-size: .5em; left: calc(25% + var(--d) * 4.4em); top: -.6em; animation: ttl-stars 2.4s ease both; }
@keyframes ttl-stars { 0%, 36% { opacity: 0; transform: scale(.3) rotate(0); } 42%, 60% { opacity: 1; transform: scale(1) rotate(180deg); } 66%, 100% { opacity: 0; transform: rotate(360deg); } }
/* Weed spray (2.6 s): a weed pops up, he sprays it, it wilts away, he's pleased. */
.ttl-mv-spray .f1 { font-size: .6em; left: calc(50% + var(--d) * 1.5em - .3em); top: .35em; transform-origin: 50% 100%; animation: ttl-weed 2.6s ease both; }
@keyframes ttl-weed { 0% { opacity: 0; transform: scale(.2); } 12%, 55% { opacity: 1; transform: none; } 70% { opacity: 1; transform: rotate(calc(var(--d) * 35deg)) scale(.7); } 85%, 100% { opacity: 0; transform: rotate(calc(var(--d) * 80deg)) scale(.2); } }
.ttl-mv-spray .f2 { font-size: .42em; left: calc(50% + var(--d) * 1.6em - .2em); top: .2em; animation: ttl-mist 2.6s ease both; }
@keyframes ttl-mist { 0%, 20% { opacity: 0; transform: translateX(calc(var(--d) * -.8em)) scale(.5); } 26%, 34%, 42%, 50% { opacity: 1; transform: none; } 30%, 38%, 46% { opacity: .5; transform: translateX(calc(var(--d) * -.3em)) scale(.8); } 60%, 100% { opacity: 0; } }
.ttl-mv-spray .f3 { width: .32em; height: .12em; border-radius: .06em; background: #1E90FF; left: calc(50% + var(--d) * .55em - .16em); top: .45em; animation: ttl-nozzle 2.6s ease both; }
@keyframes ttl-nozzle { 0%, 12% { opacity: 0; } 18%, 58% { opacity: 1; } 66%, 100% { opacity: 0; } }
.ttl-mv-spray .ttm { animation: ttl-spray 2.6s ease both; }
@keyframes ttl-spray { 0%, 100% { transform: none; } 20%, 55% { transform: rotate(calc(var(--d) * 8deg)); } 25%, 35%, 45% { transform: rotate(calc(var(--d) * 12deg)) translateX(calc(var(--d) * .04em)); } 80% { transform: translateY(-.3em); } 88% { transform: none; } }
/* Mow (3 s): he hops up and pushes a tiny mower along, cutting a strip of grass, then pops back. */
.ttl-mower { width: .8em; height: .42em; border-radius: .14em .14em .06em .06em; background: #E23B2F; box-shadow: inset 0 -.08em 0 rgba(0, 0, 0, .25); }
.ttl-mower::before { content: ""; position: absolute; width: .07em; height: .6em; background: #333; border-radius: .04em; left: -.15em; bottom: .25em; transform: rotate(-35deg); transform-origin: 50% 100%; }
.ttl-mower::after { content: ""; position: absolute; left: .02em; right: .02em; bottom: -.16em; height: .24em; background: radial-gradient(circle at .12em 50%, #111 .1em, transparent .11em), radial-gradient(circle at calc(100% - .12em) 50%, #111 .1em, transparent .11em); }
.ttl-mv-mow .f1 { left: 50%; top: .55em; animation: ttl-mow1 3s linear both; }
@keyframes ttl-mow1 { 0%, 6% { opacity: 0; transform: translate(calc(var(--d) * .7em), 0) scaleX(var(--d)); } 12% { opacity: 1; transform: translate(calc(var(--d) * .7em), 0) scaleX(var(--d)); }
  80% { opacity: 1; transform: translate(calc(var(--d) * 4.6em), 0) scaleX(var(--d)); } 88%, 100% { opacity: 0; transform: translate(calc(var(--d) * 5em), 0) scaleX(var(--d)); } }
.ttl-mv-mow .f2 { left: 50%; top: .82em; width: 4.4em; height: .2em; transform-origin: 0 50%; transform: scaleX(var(--d));
  background: repeating-linear-gradient(90deg, #3FB524 0 .06em, #5CDB3A .06em .12em, transparent .12em .16em); animation: ttl-grass 3s linear both; }
@keyframes ttl-grass { 0%, 6% { opacity: 0; clip-path: inset(0 0 0 0); } 12% { opacity: 1; clip-path: inset(0 0 0 0); } 80% { opacity: 1; clip-path: inset(0 0 0 100%); } 100% { opacity: 0; clip-path: inset(0 0 0 100%); } }
.ttl-mv-mow .ttm { animation: ttl-mow 3s linear both; }
@keyframes ttl-mow { 0% { transform: none; } 8% { transform: translateY(calc(var(--lift) - .3em)); } 12% { transform: translateY(var(--lift)); } 80% { transform: translate(calc(var(--d) * 3.9em), var(--lift)); } 86% { transform: translate(calc(var(--d) * 3.9em), var(--lift)); opacity: 1; }
  90% { opacity: 0; transform: translate(calc(var(--d) * 3.9em), var(--lift)); } 91% { opacity: 0; transform: none; } 100% { opacity: 1; transform: none; } }
/* Peek (2 s): ducks down out of sight, peeks back with darting eyes, pops up. */
.ttl-mv-peek .ttm { animation: ttl-peek 2s ease both; }
@keyframes ttl-peek { 0%, 100% { transform: none; opacity: 1; } 20% { transform: translateY(.5em) scale(.2); opacity: 0; } 40% { transform: translateY(.5em) scale(.2); opacity: 0; } 52%, 72% { transform: translateY(.35em) scale(.8); opacity: 1; } 84% { transform: translateY(-.25em) scale(1.08); } }
.ttl-mv-peek .ttm .p { animation: ttl-dart 2s ease both; }
@keyframes ttl-dart { 0%, 50%, 100% { transform: none; } 56%, 62% { transform: translate(-3px, 0); } 66%, 72% { transform: translate(3px, 0); } }
/* Yawn (2 s): a big stretch, sleepy eyes, a couple of z's. */
.ttl-mv-yawn .ttm { animation: ttl-yawn 2s ease both; }
@keyframes ttl-yawn { 0%, 100% { transform: none; } 30%, 55% { transform: scale(.94, 1.14) translateY(-.06em); } 65% { transform: scale(1.04, .96); } 80% { transform: none; } }
.ttl-mv-yawn .f1, .ttl-mv-yawn .f2 { font: 800 .45em/1 "Segoe UI", system-ui, sans-serif; color: #8FA3B8; left: calc(50% + var(--d) * .6em); top: -.1em; animation: ttl-z 1.4s ease-out .4s both; }
.ttl-mv-yawn .f2 { font-size: .34em; animation-delay: .8s; }
@keyframes ttl-z { 0% { opacity: 0; transform: none; } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--d) * .6em), -1.4em); } }
/* Watch (2 s): a wristwatch appears, he checks it, taps his foot. */
.ttl-mv-watch .f1 { font-size: .5em; left: calc(50% + var(--d) * .8em - .25em); top: 1em; animation: ttl-watch 2s ease both; }
@keyframes ttl-watch { 0% { opacity: 0; transform: scale(.3); } 12%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.3); } }
.ttl-mv-watch .ttm .p { animation: ttl-checkw 2s ease both; }
@keyframes ttl-checkw { 0%, 100% { transform: none; } 15%, 60% { transform: translate(calc(var(--d) * 2px), 3px); } 70%, 90% { transform: translate(0, -1px); } }
.ttl-mv-watch .ttm { animation: ttl-tap 2s ease both; }
@keyframes ttl-tap { 0%, 60%, 100% { transform: none; } 66%, 78% { transform: translateY(-.08em) rotate(calc(var(--d) * 4deg)); } 72%, 84% { transform: none; } }
/* Bubble pop (2.2 s): blows a soap bubble, it floats up and pops. */
.ttl-mv-bubble .f1 { width: .7em; height: .7em; border-radius: 50%; left: calc(50% + var(--d) * .45em - .35em); top: -.1em;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95) 0 .08em, rgba(173, 216, 255, .35) .1em, rgba(173, 216, 255, .15) 70%); border: .04em solid rgba(255, 255, 255, .8); animation: ttl-bub 2.2s ease-out both; }
@keyframes ttl-bub { 0% { opacity: 0; transform: scale(.1); } 20% { opacity: 1; transform: scale(.6); } 60% { opacity: 1; transform: translate(calc(var(--d) * .5em), -1.2em) scale(1.2); } 66% { opacity: 1; transform: translate(calc(var(--d) * .55em), -1.4em) scale(1.35); } 70%, 100% { opacity: 0; transform: translate(calc(var(--d) * .55em), -1.4em) scale(1.8); } }
.ttl-mv-bubble .f2 { font-size: .5em; left: calc(50% + var(--d) * 1.9em - .25em); top: -3em; animation: ttl-pop 2.2s ease both; }
@keyframes ttl-pop { 0%, 64% { opacity: 0; transform: scale(.2); } 72% { opacity: 1; transform: scale(1.3); } 90%, 100% { opacity: 0; transform: scale(.8); } }
.ttl-mv-bubble .ttm { animation: ttl-blow 2.2s ease both; }
@keyframes ttl-blow { 0%, 100% { transform: none; } 10%, 20% { transform: scale(1.08, .95); } 66% { transform: translateY(-.2em); } 74% { transform: none; } }
/* ACCESS GRANTED (idle gag): a tiny terminal in his bubble. */
.ttl-say.term { background: #0B1A0F; color: #5CDB3A; border-color: #1C3B22; font: 600 12.5px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ttl-say.term::after { background: #0B1A0F; border-color: #1C3B22; }
.ttl-mv-access .ttm { animation: ttl-type 4.2s steps(1) both; }
@keyframes ttl-type { 0%, 100% { transform: none; } 10%, 20%, 30%, 40%, 50% { transform: translateY(.04em); } 15%, 25%, 35%, 45% { transform: none; } }
/* Visor scan (idle gag, 4 s): he puts sunglasses on (drawn in his SVG over his eyes, app-loader.js adds them), a soft red
   line sweeps the screen top to bottom, then he slides them down his nose and peeks over the top (eyes up), a finger pushes
   them back up, and they come off. SVG units: 1px = 1/40 of his face. */
.ttl-specs .sx-in { animation: ttl-specs 4s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes ttl-specs { 0% { opacity: 0; transform: translateY(-6px); } 9%, 57% { opacity: 1; transform: none; }
  63%, 76% { opacity: 1; transform: translateY(8px) rotate(-2deg); } 81%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.ttl-mv-visor .ttm .p { animation: ttl-peek 4s ease both; }
@keyframes ttl-peek { 7%, 58% { transform: translate(0, 0); } 64%, 76% { transform: translate(0, -3.4px); } 81%, 94% { transform: translate(0, 0); } }
.ttl-mv-visor .ttm .ttl-specs { transform: none !important; } /* his eyes are held centre for the trick (ttl-peek), so the pair is too */
.ttl-mv-visor .ttm .sg { opacity: 0; } /* the summer glasses step aside for the trick's pair */
.ttl-pill.ttl-mv-visor .ttl-fx { transform: none; } /* the finger is on his face, not on the pill's top edge */
.ttl-mv-visor .f1 { font-size: .26em; left: calc(50% - .14em); top: .72em; animation: ttl-push 4s ease both; }
@keyframes ttl-push { 0%, 74% { opacity: 0; transform: translateY(.9em); } 78% { opacity: 1; transform: translateY(.2em); } 81% { opacity: 1; transform: translateY(-.15em); } 86%, 100% { opacity: 0; transform: translateY(.9em); } }
.ttl-stage { position: fixed; inset: 0; z-index: 2147481500; pointer-events: none; overflow: hidden; }
.ttl-stage i, .ttl-stage span { position: absolute; font-style: normal; pointer-events: none; }
.ttl-scan { left: 0; right: 0; top: 0; height: 3px; background: rgba(226, 59, 47, .75); box-shadow: 0 0 10px 3px rgba(226, 59, 47, .35); opacity: 0; animation: ttl-scan 4s ease-in-out both; }
@keyframes ttl-scan { 0%, 15% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 55% { opacity: 1; transform: translateY(calc(100vh - 3px)); } 60%, 100% { opacity: 0; transform: translateY(calc(100vh - 3px)); } }
/* Hacking the Refresh button (idle gag): laptop out, the button glows green for a bit, nothing is pressed. */
.ttl-mv-hack .f1 { font-size: .55em; left: calc(50% + var(--d) * .6em - .28em); top: .9em; animation: ttl-watch 4s ease both; }
.ttl-mv-hack .ttm { animation: ttl-type 4s steps(1) both; }
.ttl-hacked { box-shadow: 0 0 0 2px #5CDB3A, 0 0 14px 2px rgba(92, 219, 58, .6) !important; animation: ttl-glitch .5s steps(2) 3; }
@keyframes ttl-glitch { 50% { filter: hue-rotate(90deg) brightness(1.15); } }
/* Clone march (idle gag): four mini mascots march across the bottom of the screen and vanish. */
.ttl-clone { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 100%; animation: ttl-march 3.6s linear both; }
.ttl-clone .ttm { --ttm-size: 22px; animation: ttl-bob .3s ease-in-out infinite alternate; }
.ttl-clone.c2 { animation-delay: .25s; } .ttl-clone.c3 { animation-delay: .5s; } .ttl-clone.c4 { animation-delay: .75s; }
@keyframes ttl-march { 0% { transform: translateX(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(calc(-100vw - 60px)); opacity: 0; } }
@keyframes ttl-bob { to { transform: translateY(-3px) rotate(-6deg); } }
/* Robot mower army (idle gag): five little mowers with antennas roll by. */
.ttl-bot { bottom: calc(26px + env(safe-area-inset-bottom, 0px)); left: 100%; width: 22px; height: 12px; border-radius: 4px 4px 2px 2px; background: #E23B2F; animation: ttl-march 3.8s linear both; }
.ttl-bot::before { content: ""; position: absolute; left: 9px; top: -7px; width: 2px; height: 7px; background: #333; box-shadow: 0 -2px 0 1px #5CDB3A; }
.ttl-bot::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: -5px; height: 6px; background: radial-gradient(circle at 4px 50%, #111 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 4px) 50%, #111 3px, transparent 3.5px); }
.ttl-bot.b2 { animation-delay: .3s; } .ttl-bot.b3 { animation-delay: .6s; } .ttl-bot.b4 { animation-delay: .9s; } .ttl-bot.b5 { animation-delay: 1.2s; }
@media (max-width: 800px) { .ttl-clone, .ttl-bot { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }
/* Reduce Motion / Animated Mascot off: no tricks at all (the script doesn't start them either). */
@media (prefers-reduced-motion: reduce) { .ttl-trick .ttm, .ttl-trick .ttm .p, .ttl-fx i, .ttl-stage *, .ttl-hacked { animation: none !important; } .ttl-fx, .ttl-say, .ttl-stage, .ttl-specs { display: none; } }
.ttm-still .ttl-fx, .ttm-still .ttl-say, .ttm-still .ttl-stage { display: none; }
/* ---- Roaming, Wreck It, Hack the Data, Command Prompt, Joyride (idle; all pictures on top, never take a tap) ---- */
.ttl-say.l { transform-origin: 15% 100%; }
.ttl-say.l::after { right: auto; left: 18px; }
.hc-fab.ttl-out .hc-fab-m { opacity: 0; transition: opacity .15s; }
.ttl-roam { position: fixed; left: 0; top: 0; z-index: 2147481800; width: var(--S, 30px); height: var(--S, 30px); pointer-events: none; display: none; --d: -1; --lift: 0em; }
.ttl-roam.on { display: block; }
.ttl-roam-in { position: relative; display: block; width: 100%; height: 100%; transition: transform .35s ease; }
.ttl-roam .ttm { --ttm-size: var(--S, 30px); filter: drop-shadow(0 2px 3px rgba(17, 17, 17, .25)); }
.ttl-roam.walk .ttm { animation: ttl-walk .32s ease-in-out infinite alternate; }
@keyframes ttl-walk { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-14%) rotate(5deg); } }
.ttl-roam.ride .ttl-roam-in::after { content: ""; position: absolute; left: -15%; right: -15%; bottom: -28%; height: 40%; border-radius: 30% 30% 12% 12%; background: #E23B2F;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.ttl-roam.ride .ttl-roam-in::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -44%; height: 26%; z-index: 1;
  background: radial-gradient(circle at 18% 50%, #111 30%, transparent 33%), radial-gradient(circle at 82% 50%, #111 30%, transparent 33%); }
.ttl-roam.ride.walk .ttm { animation: ttl-vroom .18s linear infinite alternate; }
@keyframes ttl-vroom { from { transform: translateY(-4%); } to { transform: translateY(2%) rotate(calc(var(--d) * -4deg)); } }
.ttl-mv-typing .ttm { animation: ttl-type 1.5s steps(1) both; }
.ttl-mess { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2147481000; pointer-events: none; }
.ttl-hk { position: absolute; display: inline-block; white-space: nowrap; overflow: visible; pointer-events: none; padding: 0 2px; box-sizing: border-box; border-radius: 3px; }
.ttl-hk.glitch { animation: ttl-glitch2 .9s steps(2) infinite; }
@keyframes ttl-glitch2 { 0%, 100% { text-shadow: 1px 0 #E23B2F, -1px 0 #1E90FF; } 50% { text-shadow: -2px 0 #E23B2F, 2px 0 #5CDB3A; transform: translateX(1px); } }
.ttl-hk.spin { color: #1E8F18 !important; font-variant-numeric: tabular-nums; }
.ttl-matrix { padding: 0; overflow: hidden; background: rgba(5, 20, 8, .72); border-radius: 8px; }
.ttl-matrix i { position: absolute; top: 0; font: 600 13px/15px ui-monospace, Menlo, Consolas, monospace; color: #5CDB3A; text-shadow: 0 0 4px #5CDB3A; font-style: normal; animation: ttl-rain 3s linear infinite; }
@keyframes ttl-rain { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
.ttl-crackmark { position: fixed; width: 120px; height: 120px; margin: -60px 0 0 -60px; pointer-events: none; opacity: .9; animation: ttl-crackin .25s ease-out both;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23778' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 50 L30 20 L22 4M50 50 L80 28 L96 22M50 50 L74 78 L82 96M50 50 L24 70 L6 76M30 20 L12 26M80 28 L84 8M24 70 L28 92M50 50 L52 10M50 50 L92 56'/%3E%3Ccircle cx='50' cy='50' r='4' stroke='%23556'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 1px #fff); }
@keyframes ttl-crackin { from { transform: scale(.2); opacity: 0; } }
.ttl-cmd { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); z-index: 2147482400; width: min(380px, calc(100vw - 24px)); transform: translateX(-50%);
  background: #050B06; color: #5CDB3A; border: 1px solid #1C3B22; border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); pointer-events: none; overflow: hidden; animation: ttl-cmdin .2s ease-out both; }
.ttl-cmd.bye { opacity: 0; transition: opacity .3s; }
@keyframes ttl-cmdin { from { opacity: 0; transform: translate(-50%, 10px); } }
.ttl-cmd-bar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; background: #0F1F12; color: #8FBF8F; font: 600 11px/1 ui-monospace, Menlo, Consolas, monospace; }
.ttl-cmd-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E23B2F; }
.ttl-cmd-bar i:nth-child(2) { background: #FFD43B; } .ttl-cmd-bar i:nth-child(3) { background: #5CDB3A; }
.ttl-cmd-bar span { margin-left: 6px; }
.ttl-cmd pre { margin: 0; padding: 10px 12px 12px; min-height: 84px; white-space: pre-wrap; word-break: break-word; font: 600 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace; }
@media (prefers-reduced-motion: reduce) { .ttl-roam, .ttl-mess, .ttl-cmd { display: none !important; } }
.ttm-still .ttl-roam, .ttm-still .ttl-mess, .ttm-still .ttl-cmd { display: none !important; }
/* While he is out roaming, the Help & Chat button shows a chat bubble so it still reads as a button (it stays clickable). */
.hc-fab.ttl-out::after { content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a1.5 1.5 0 0 1 1.5 1.5v9A1.5 1.5 0 0 1 19 17h-8l-4.5 3.5V17H5a1.5 1.5 0 0 1-1.5-1.5v-9A1.5 1.5 0 0 1 5 5z'/%3E%3C/svg%3E"); }
/* Hanging out between tricks (Stay Out Until Active) and the sprint home. Little legs only show while he sits or swings. */
.ttl-leg { position: absolute; bottom: -18%; width: 7%; height: 26%; border-radius: 40%; background: #3FB524; opacity: 0; transform-origin: 50% 0; z-index: 0; }
.ttl-leg.l { left: 34%; } .ttl-leg.r { left: 58%; }
.ttl-roam.pose-sit .ttl-leg, .ttl-roam.pose-swing .ttl-leg { opacity: 1; }
.ttl-roam.pose-sit .ttm { transform: scale(1.04, .94) translateY(4%); }
.ttl-roam.pose-swing .ttl-leg.l { animation: ttl-swing .7s ease-in-out infinite alternate; }
.ttl-roam.pose-swing .ttl-leg.r { animation: ttl-swing .7s ease-in-out -.35s infinite alternate; }
@keyframes ttl-swing { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
.ttl-roam.pose-lean .ttm { transform: rotate(calc(var(--d) * -14deg)) translateX(calc(var(--d) * 6%)); transition: transform .4s ease; }
.ttl-roam.pose-nap .ttm .e { transform: scaleY(.12); }
.ttl-roam.pose-nap .ttm .pe { transform: scaleY(.12); }
.ttl-roam.pose-nap .ttm .p circle { opacity: 0; }
.ttl-roam.pose-nap .ttm { animation: ttl-breathe 2.4s ease-in-out infinite; }
@keyframes ttl-breathe { 50% { transform: scale(1.04, .97); } }
.ttl-zz { position: absolute; right: -20%; top: -25%; font: 800 11px/1 "Segoe UI", system-ui, sans-serif; color: #8FA3B8; font-style: normal; opacity: 0; }
.ttl-roam.pose-nap .ttl-zz { animation: ttl-z 2s ease-out infinite; }
.ttl-roam.pose-look .ttm .p { animation: ttl-look 2.4s ease-in-out infinite; }
.ttl-roam.dash .ttm { animation: ttl-dash .14s linear infinite alternate !important; filter: drop-shadow(calc(var(--d) * -6px) 0 0 rgba(92, 219, 58, .35)) drop-shadow(calc(var(--d) * -12px) 0 0 rgba(92, 219, 58, .18)); }
@keyframes ttl-dash { from { transform: rotate(calc(var(--d) * 18deg)) translateY(-8%); } to { transform: rotate(calc(var(--d) * 10deg)) translateY(4%); } }
/* Stay Out damage that piles up (pictures only; taps pass through): scribbles, stickers, smears. */
.ttl-dmg { position: fixed; pointer-events: none; transform: rotate(var(--r, 0deg)); animation: ttl-dmgin .3s ease-out both; }
.ttl-dmg.scribble { margin: -30px 0 0 -50px; }
.ttl-dmg.scribble path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: ttl-scrib .7s ease-out forwards; opacity: .8; }
.ttl-dmg.sticker { margin: -12px 0 0 -40px; padding: 4px 10px; border-radius: 999px; background: #ffe14d; color: #111; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); font: 800 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; font-style: normal; white-space: nowrap; }
.ttl-dmg.sticker.min { background: #1b2238; color: #8ef5a2; border-color: #3a4566; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ttl-dmg.sticker.min::before { content: "▣ world_domination.exe (minimized)"; }
.ttl-dmg.smear { width: 110px; height: 46px; margin: -23px 0 0 -55px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(70, 160, 70, .5), rgba(70, 160, 70, 0) 70%); filter: blur(1.5px); }
.ttl-ghost { position: fixed; pointer-events: none; border-radius: 8px; border: 2px dashed rgba(120, 120, 120, .45); }
@keyframes ttl-dmgin { from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(.4); } }
@keyframes ttl-scrib { to { stroke-dashoffset: 0; } }
/* World Takeover window: a huge fake browser window over the page, made-up content only. */
.ttl-tk { position: fixed; left: 50%; top: 50%; z-index: 2147482300; width: min(900px, calc(100vw - 24px)); height: min(600px, calc(100vh - 160px)); transform: translate(-50%, -50%); pointer-events: none; border-radius: 12px; overflow: hidden; background: #0d1222; color: #d9e6ff; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); font: 500 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; animation: ttl-tkin .35s cubic-bezier(.3, 1.3, .5, 1) both; }
.ttl-tk.bye { opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .3s, transform .3s; }
.ttl-tk .tk-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #e9ebf0; }
.ttl-tk .tk-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.ttl-tk .tk-bar i:nth-child(2) { background: #febc2e; } .ttl-tk .tk-bar i:nth-child(3) { background: #28c840; }
.ttl-tk .tk-url { flex: 1; margin-left: 8px; padding: 3px 10px; border-radius: 6px; background: #fff; color: #333; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttl-tk .tk-body { padding: 16px 18px; height: calc(100% - 40px); box-sizing: border-box; overflow: hidden; }
.ttl-tk .tk-h { font-weight: 800; letter-spacing: .08em; color: #8ef5a2; margin-bottom: 10px; font-size: 13px; }
.ttl-tk .tk-l { margin: 6px 0; }
.ttl-tk .tk-h2 { font-weight: 800; font-size: 17px; color: #fff; }
.ttl-tk .tk-mono, .ttl-tk .tk-q { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.ttl-tk .tk-ok { color: #8ef5a2; font-weight: 800; }
.ttl-tk .tk-dim { color: #8a96b8; font-style: italic; }
.ttl-tk .tk-warn { color: #ffd166; font-weight: 700; }
.ttl-tk .tk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ttl-tk .tk-grid span { padding: 10px 12px; border-radius: 10px; background: #18213a; }
.ttl-tk .tk-grid small { display: block; color: #8a96b8; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.ttl-tk .tk-grid b { font-size: 22px; color: #fff; }
.ttl-tk .tk-l > b { display: inline-block; min-width: 120px; }
.ttl-tk .tk-pb { display: inline-block; vertical-align: middle; width: min(360px, 40vw); height: 12px; margin: 0 10px; border-radius: 6px; background: #18213a; overflow: hidden; }
.ttl-tk .tk-pb span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2e9d44, #8ef5a2); transition: width .1s linear; }
.ttl-tk .tk-search { padding: 8px 12px; border-radius: 999px; background: #fff; color: #222; }
.ttl-tk .tk-res u { color: #9cc3ff; }
.ttl-tk s { color: #8a96b8; }
@keyframes ttl-tkin { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } }
@media (prefers-reduced-motion: reduce) { .ttl-tk { display: none !important; } }
.ttm-still .ttl-tk { display: none !important; }
/* Eye flip (Big Eyes): down and out of the bottom of the face, wrap, back in from the top. Clipped to the face. */
.ttm .pw { transform-box: view-box; }
.ttm-eye-pill.eflip .pw { animation: ttm-eflip .6s cubic-bezier(.5, 0, .3, 1); }
@keyframes ttm-eflip { 0% { transform: translateY(0); } 45% { transform: translateY(28px); } 45.01% { transform: translateY(-21px); } 100% { transform: translateY(0); } }
.ttm-still .ttm-eye-pill.eflip .pw, .ttm-eye-pill.ttm-still.eflip .pw { animation: none; }
@media (prefers-reduced-motion: reduce) { .ttm-eye-pill.eflip .pw { animation: none; } }
/* The face looks lifted off the page: a soft realistic drop shadow under the circle (user units, so it scales with any size),
   plus the radial shading circle .sh in the SVG. The eyes get only a light touch. */
.ttm svg { overflow: visible; }
.ttm circle.b { filter: drop-shadow(0 1.1px 1px rgba(0, 0, 0, .28)) drop-shadow(0 2.6px 2.8px rgba(0, 0, 0, .18)); }
.ttm .sh { pointer-events: none; }
.ttm .pe { filter: drop-shadow(0 .35px .3px rgba(0, 0, 0, .22)); }
/* Whole-screen explosion: flash, fireball from where Sprout is, black screen, VHS rewind, gone. Picture only, taps pass through. */
.ttl-ex { position: fixed; inset: 0; z-index: 2147482600; pointer-events: none; overflow: hidden; }
.ttl-ex i { position: absolute; display: block; }
.ttl-ex .ex-flash { inset: 0; background: #fff; animation: ttl-exflash .5s ease-out both; }
.ttl-ex .ex-ball { left: var(--x); top: var(--y); width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: radial-gradient(circle, #fff7c2 0, #ffd23f 25%, #ff7a1a 50%, #d7261e 70%, rgba(60, 20, 10, 0) 72%); animation: ttl-exball 1.5s cubic-bezier(.2, .7, .3, 1) both; }
.ttl-ex .ex-ring { left: var(--x); top: var(--y); width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 6px solid rgba(255, 210, 63, .8); animation: ttl-exring .9s ease-out both; }
.ttl-ex .ex-black { inset: 0; background: #000; opacity: 0; display: flex; align-items: center; justify-content: center; transition: opacity .25s; }
.ttl-ex .ex-t { padding: 0 24px; text-align: center; color: #8ef5a2; font: 700 18px/1.3 ui-monospace, Menlo, Consolas, monospace; opacity: 0; transition: opacity .3s .5s; }
.ttl-ex.black .ex-black { opacity: 1; } .ttl-ex.black .ex-t { opacity: 1; }
.ttl-ex .ex-rw { inset: 0; opacity: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 2px, rgba(0, 0, 0, 0) 2px 6px); }
.ttl-ex .ex-rw b { position: absolute; left: 24px; top: calc(24px + env(safe-area-inset-top, 0px)); color: #fff; font: 800 22px/1 ui-monospace, Menlo, Consolas, monospace; text-shadow: 2px 0 #f0f, -2px 0 #0ff; animation: ttl-exblink .5s steps(1) infinite; }
.ttl-ex.rw .ex-rw { opacity: 1; animation: ttl-exroll .25s linear infinite; }
.ttl-ex.rw .ex-black { opacity: 0; transition: opacity 1.5s cubic-bezier(.6, 0, .4, 1); }
.ttl-ex.rw .ex-ball { animation: ttl-exback 1.4s ease-in both; }
.ttl-ex.bye { opacity: 0; transition: opacity .4s; }
/* Screen shake (explosion, twin fight hits): the trick's own layers shake (pictures, explosion, roaming Sprout and twin,
   slime, shave), never the page. Moving <body> made the page scroll sideways and pulled every fixed layer off screen on a
   scrolled page. It uses the `translate` property, so it adds to each layer's own position (transform) instead of
   replacing it, and only ever moves left (nothing pushed past the right edge). */
html.ttl-shake .ttl-ex, html.ttl-shake .ttl-roam, html.ttl-shake .ttl-slime, html.ttl-shake .ttl-shave { animation: ttl-shake .55s linear; }
/* The picture layer sits in the page (absolute): it moves by left/top, because any transform on it would make its fixed
   bits (BOOM bursts at the screen edge) count toward the page width again. */
html.ttl-shake .ttl-mess { animation: ttl-shake-lt .55s linear; }
@keyframes ttl-exflash { from { opacity: .95; } to { opacity: 0; } }
@keyframes ttl-exball { 0% { transform: scale(.2); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(90); opacity: .95; } }
@keyframes ttl-exback { from { transform: scale(60); opacity: .6; } to { transform: scale(0); opacity: 0; } }
@keyframes ttl-exring { from { transform: scale(.5); opacity: 1; } to { transform: scale(30); opacity: 0; } }
@keyframes ttl-exblink { 50% { opacity: .3; } }
@keyframes ttl-exroll { from { background-position: 0 0; } to { background-position: 0 -12px; } }
@keyframes ttl-shake { 0%, 100% { translate: none; } 20% { translate: -11px 3px; } 40% { translate: -1px -4px; } 60% { translate: -9px -2px; } 80% { translate: -2px 3px; } }
@keyframes ttl-shake-lt { 0%, 100% { left: 0; top: 0; } 20% { left: -11px; top: 3px; } 40% { left: -1px; top: -4px; } 60% { left: -9px; top: -2px; } 80% { left: -2px; top: 3px; } }
@media (prefers-reduced-motion: reduce) { .ttl-ex { display: none !important; } html.ttl-shake .ttl-mess, html.ttl-shake .ttl-roam { animation: none; } }
.ttm-still .ttl-ex { display: none !important; }
/* Body Color "Dark face, white pills": a near-black face with bold white Big Eyes (Classic keeps dark pupils in white eyes). */
.ttm.ttm-b-dark { --ttm-body: #17181b; --ttm-shade: #000; }
.ttm.ttm-b-dark.ttm-eye-pill { --ttm-pupil: #fff; }
.ttm.ttm-b-dark .sh { opacity: .8; }
.ttm-eye-pill.ttm-b-dark.glow .pe { fill: #FF8A1E; }
/* Explosions 2-5: button blowup, cartoon boom, chain of pops, scorch blast. Pictures only; taps pass through. */
.ttl-dmg.scorch { width: var(--s, 80px); height: var(--s, 80px); margin: calc(var(--s, 80px) / -2) 0 0 calc(var(--s, 80px) / -2); border-radius: 50%; background: radial-gradient(circle, rgba(20, 12, 6, .78) 0, rgba(40, 24, 10, .55) 35%, rgba(60, 40, 20, .2) 60%, rgba(0, 0, 0, 0) 72%); filter: blur(.6px); }
.ttl-dmg.debris { width: 10px; height: 6px; margin: -3px 0 0 -5px; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); clip-path: polygon(0 0, 100% 20%, 80% 100%, 10% 80%); }
.ttl-dmg.streak { height: 18px; margin-top: -9px; transform-origin: 0 50%; border-radius: 9px; background: linear-gradient(90deg, rgba(25, 15, 8, .75), rgba(40, 25, 12, .45) 70%, rgba(0, 0, 0, 0)); filter: blur(1.5px); animation: none; }
.ttl-mess > i.ttl-bx, .ttl-mess > i.ttl-shard, .ttl-mess > i.ttl-boom, .ttl-mess > i.ttl-puff, .ttl-mess > i.ttl-pop, .ttl-mess > i.ttl-jet { position: fixed; pointer-events: none; display: block; }
.ttl-bx.flash { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle, #fff 0, #ffe066 35%, #ff7a1a 60%, rgba(255, 80, 0, 0) 70%); animation: ttl-bx .5s ease-out both; }
@keyframes ttl-bx { from { transform: scale(.3); opacity: 1; } to { transform: scale(7); opacity: 0; } }
.ttl-shard { width: 12px; height: 8px; margin: -4px 0 0 -6px; border-radius: 2px; clip-path: polygon(0 0, 100% 20%, 80% 100%, 10% 80%); animation: ttl-shard .9s cubic-bezier(.2, .6, .4, 1) both; }
@keyframes ttl-shard { 0% { transform: translate(0, 0) rotate(0); } 55% { transform: translate(calc(var(--dx) * .7), calc(var(--dy) - 90px)) rotate(calc(var(--rot) * .6)); } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
.hc-fab.ttl-blown { animation: ttl-blown 1.4s ease both; }
@keyframes ttl-blown { 0% { transform: none; } 10% { transform: scale(1.3); } 22% { transform: scale(0); opacity: 0; } 75% { transform: scale(0); opacity: 0; } 90% { transform: scale(1.15); opacity: 1; } 100% { transform: none; } }
.ttl-boom { width: 130px; height: 130px; margin: -65px 0 0 -65px; animation: ttl-boom 1.5s cubic-bezier(.3, 1.6, .5, 1) both; }
.ttl-boom svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ttl-boom polygon { fill: #ffd23f; stroke: #e0245e; stroke-width: 4; stroke-linejoin: round; }
.ttl-boom b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #e0245e; font: 900 24px/1 Impact, "Arial Black", system-ui, sans-serif; letter-spacing: .02em; text-shadow: 2px 2px 0 #fff; transform: rotate(-8deg); }
@keyframes ttl-boom { 0% { transform: scale(.1) rotate(-20deg); opacity: 0; } 15% { transform: scale(1.1) rotate(4deg); opacity: 1; } 75% { transform: scale(1) rotate(0); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.ttl-puff { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle, rgba(120, 120, 120, .7), rgba(120, 120, 120, 0) 70%); animation: ttl-puff 1.8s ease-out both; }
@keyframes ttl-puff { from { transform: translate(0, 0) scale(.5); opacity: .9; } to { transform: translate(var(--dx), -70px) scale(2.4); opacity: 0; } }
.ttl-pop { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 3px solid #ffb703; animation: ttl-pop .6s ease-out both; }
.ttl-pop b { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); color: #e0245e; font: 900 13px/1 system-ui, sans-serif; white-space: nowrap; }
@keyframes ttl-pop { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.ttl-jet { height: 26px; margin-top: -13px; transform-origin: 0 50%; border-radius: 13px; background: linear-gradient(90deg, #fff6c2, #ffd23f 15%, #ff7a1a 50%, rgba(215, 38, 30, .7) 80%, rgba(215, 38, 30, 0)); filter: blur(1px); animation: ttl-jet 1.3s ease-out both; }
.ttl-jet::after { content: ""; position: absolute; inset: -6px 0; border-radius: 20px; background: inherit; opacity: .4; filter: blur(6px); }
@keyframes ttl-jet { 0% { clip-path: inset(0 100% 0 0); } 40% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hc-fab.ttl-blown { animation: none; } }
/* Lawn-care chaos tricks and word chaos. Pictures only; taps pass through; any touch clears them. */
.ttl-mess > i.ttl-t { position: fixed; pointer-events: none; display: block; font-style: normal; }
.ttl-dmg.band { left: 0 !important; width: 100vw; margin: 0; transform: none; background: repeating-linear-gradient(90deg, rgba(60, 170, 60, var(--o, .16)) 0 38px, rgba(60, 170, 60, calc(var(--o, .16) / 3)) 38px 76px); animation: ttl-band 1.8s linear both; }
@keyframes ttl-band { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ttl-dmg.hole { width: 26px; height: 10px; margin: -5px 0 0 -13px; border-radius: 50%; background: radial-gradient(ellipse, #3b2a1a 0, #5a3f24 55%, rgba(90, 63, 36, 0) 75%); }
.ttl-dmg.drop { width: var(--s, 16px); height: var(--s, 16px); margin: calc(var(--s, 16px) / -2) 0 0 calc(var(--s, 16px) / -2); border-radius: 50% 50% 46% 54%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .85) 0 12%, rgba(120, 190, 255, .35) 30%, rgba(60, 140, 230, .28) 70%, rgba(60, 140, 230, .1)); box-shadow: inset 0 -2px 3px rgba(30, 90, 170, .25); }
.ttl-dmg.tuft { width: 24px; height: 16px; margin: -16px 0 0 -12px; background: linear-gradient(75deg, transparent 40%, #3fa535 41% 52%, transparent 53%), linear-gradient(105deg, transparent 40%, #2e8f28 41% 52%, transparent 53%), linear-gradient(90deg, transparent 44%, #5cdb3a 45% 55%, transparent 56%); }
.ttl-dmg.fallen { white-space: nowrap; margin: 0; transform: rotate(var(--r)); animation: ttl-fall .8s cubic-bezier(.55, 0, .9, .5) both; text-shadow: 0 1px 1px rgba(0, 0, 0, .15); }
@keyframes ttl-fall { from { transform: translate(var(--fx), var(--fy)) rotate(0); } 85% { transform: translate(0, 0) rotate(var(--r)); } 92% { transform: translate(0, -6px) rotate(var(--r)); } to { transform: rotate(var(--r)); } }
.ttl-win { left: 50% !important; top: calc(64px + env(safe-area-inset-top, 0px)) !important; z-index: 2147482300; width: min(440px, calc(100vw - 24px)); transform: translateX(-50%); border-radius: 12px; overflow: hidden; background: #0d1222; color: #d9e6ff; box-shadow: 0 18px 48px rgba(0, 0, 0, .4); font: 500 13.5px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; animation: ttl-tkin .3s cubic-bezier(.3, 1.3, .5, 1) both; }
.ttl-win.inv { background: #fffdf5; color: #222; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ttl-win.cc .tw-bar { background: #1E90FF; } .ttl-win.cc .tw-bar span { color: #fff; }
.ttl-win .tw-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #e9ebf0; }
.ttl-win .tw-bar s { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; text-decoration: none; }
.ttl-win .tw-bar s:nth-child(2) { background: #febc2e; } .ttl-win .tw-bar s:nth-child(3) { background: #28c840; }
.ttl-win .tw-bar span { margin-left: 6px; color: #333; font-weight: 700; font-size: 12px; }
.ttl-win .tw-body { display: block; padding: 12px 14px 14px; }
.ttl-win .tw-l { display: block; margin: 3px 0; }
.ttl-win .ok { color: #2e9d44; font-style: normal; font-weight: 800; } .ttl-win .warn { color: #e0a800; font-style: normal; font-weight: 800; }
.ttl-win .tk-pb { display: block; width: 100%; height: 10px; margin-top: 6px; border-radius: 5px; background: #18213a; overflow: hidden; }
.ttl-win .tk-pb span { display: block; height: 100%; background: linear-gradient(90deg, #2e9d44, #8ef5a2); }
.ttl-weed { width: 30px; height: 40px; margin: -40px 0 0 -15px; transform-origin: 50% 100%; animation: ttl-weed .9s cubic-bezier(.3, 1.4, .5, 1) both; }
.ttl-weed svg { width: 100%; height: 100%; } .ttl-weed path { fill: none; stroke: #3fa535; stroke-width: 2.6; stroke-linecap: round; }
.ttl-weed.yank { animation: ttl-yank .9s cubic-bezier(.3, 0, .7, 1) both; }
@keyframes ttl-weed { from { transform: scaleY(0); } }
@keyframes ttl-yank { 0% { transform: none; } 25% { transform: translateY(-8px) scaleY(1.2); } 100% { transform: translate(60px, -220px) rotate(260deg); opacity: 0; } }
.ttl-drop2 { width: 7px; height: 9px; margin: -4px 0 0 -3px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: rgba(80, 160, 255, .8); animation: ttl-drop2 1.1s cubic-bezier(.2, .6, .5, 1) both; }
@keyframes ttl-drop2 { 0% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(calc(var(--dx) * .6), calc(var(--dy) * .3 - 80px)); } 100% { transform: translate(var(--dx), var(--dy)); opacity: .2; } }
.ttl-blade { width: 20px; color: #3fbf3a; font: 700 16px/1.05 ui-monospace, Menlo, monospace; text-align: center; text-shadow: 0 0 6px rgba(80, 220, 80, .6); animation: ttl-rain 2.2s linear both; z-index: 2147482300; }
@keyframes ttl-rain { from { transform: translateY(-20vh); opacity: 1; } to { transform: translateY(110vh); opacity: .6; } }
.ttl-tw { width: 46px; height: 46px; margin: -23px 0 0 -23px; animation: ttl-tw 3s linear both; }
.ttl-tw svg { width: 100%; height: 100%; animation: ttl-twspin .6s linear infinite reverse; }
@keyframes ttl-tw { 0% { transform: translate(0, 0); } 25% { transform: translate(calc(var(--dx) * .25), -18px); } 50% { transform: translate(calc(var(--dx) * .5), 0); } 75% { transform: translate(calc(var(--dx) * .75), -12px); } 100% { transform: translate(var(--dx), 0); } }
@keyframes ttl-twspin { to { transform: rotate(360deg); } }
.ttl-mow2 { width: 44px; height: 26px; animation: ttl-mow2 2.6s linear both; z-index: 2147482300; }
.ttl-mow2 svg { width: 100%; height: 100%; }
@keyframes ttl-mow2 { from { transform: translateX(0); } to { transform: translateX(var(--dx)); } }
.ttl-bsod { left: 0 !important; top: 0 !important; width: 100vw; height: 100vh; box-sizing: border-box; padding: calc(12vh + env(safe-area-inset-top, 0px)) 10vw 0; background: #0a3a8a; color: #fff; font: 400 18px/1.45 "Segoe UI", system-ui, sans-serif; z-index: 2147482600; }
.ttl-bsod b { display: block; font: 300 90px/1 "Segoe UI", system-ui, sans-serif; margin-bottom: 24px; }
.ttl-bsod p { max-width: 640px; margin: 0 0 16px; } .ttl-bsod small { opacity: .8; font-size: 13px; }
.ttl-ufo { width: 90px; height: 45px; margin: -22px 0 0 -45px; animation: ttl-ufo 3.4s ease-in-out both; z-index: 2147482300; }
.ttl-ufo svg { width: 100%; height: 100%; }
@keyframes ttl-ufo { 0% { transform: translate(-60vw, -40px); } 25%, 75% { transform: translate(0, 0); } 100% { transform: translate(60vw, -80px); } }
.ttl-beam { width: 70px; margin-left: -35px; background: linear-gradient(rgba(255, 240, 150, .55), rgba(255, 240, 150, .15)); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); animation: ttl-beam 3.2s ease both; }
@keyframes ttl-beam { 0%, 22% { opacity: 0; } 30%, 70% { opacity: 1; } 78%, 100% { opacity: 0; } }
.ttl-abduct { animation: ttl-abduct 1.8s ease-in both; } .ttl-abduct > * { pointer-events: none !important; box-sizing: border-box; }
@keyframes ttl-abduct { from { transform: none; } to { transform: translateY(var(--up)) scale(.1) rotate(25deg); opacity: 0; } }
.ttl-hk.melt { background-clip: padding-box; animation: ttl-melt 2.4s ease-in both; transform-origin: top; filter: blur(.3px); }
@keyframes ttl-melt { to { transform: scaleY(1.9) skewX(4deg); filter: blur(1.2px); opacity: .85; } }
.ttl-hk.slot { font-variant-numeric: tabular-nums; animation: ttl-slot .12s steps(2) 12; }
@keyframes ttl-slot { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ttl-mess { display: none !important; } }
/* Grass fur while he is out: SVG blades inside his own SVG (app-loader.js furIn), so it moves with him; --g is the length
   (fuzz .05 to wild 1), --w how wild the spread is. Face fur sways less (it points out at you); the fringe fades in once it is long. */
.ttl-fur path { fill: #4cc23a; stroke: #2e8f28; stroke-width: .3; transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(calc(var(--a) * var(--w, .2) * 1deg)) scale(calc(.55 + var(--g, .08) * .9), var(--g, .08)); transition: transform 1.6s ease; animation: ttl-sway 1.9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.23s); }
.ttl-fur path.tf2 { fill: #5cdb3a; }
.ttl-fur path.tf3 { fill: #3aa82e; }
.ttl-fur path.tf4 { fill: #7ee85c; stroke: #3aa82e; }
.ttl-fur.fc path { stroke-width: .25; transform: rotate(calc(var(--a) * var(--w, .2) * .4deg)) scale(calc(.6 + var(--g, .08) * .8), calc(.15 + var(--g, .08) * .85)); animation-name: ttl-sway2; animation-duration: 2.3s; }
.ttl-fur.fr { opacity: calc((var(--g, .08) - .3) * 1.6); }
@keyframes ttl-sway { from { transform: rotate(calc(var(--a) * var(--w, .2) * 1deg - 7deg)) scale(calc(.55 + var(--g, .08) * .9), var(--g, .08)); } to { transform: rotate(calc(var(--a) * var(--w, .2) * 1deg + 7deg)) scale(calc(.55 + var(--g, .08) * .9), var(--g, .08)); } }
@keyframes ttl-sway2 { from { transform: rotate(calc(var(--a) * var(--w, .2) * .4deg - 4deg)) scale(calc(.6 + var(--g, .08) * .8), calc(.15 + var(--g, .08) * .85)); } to { transform: rotate(calc(var(--a) * var(--w, .2) * .4deg + 4deg)) scale(calc(.6 + var(--g, .08) * .8), calc(.15 + var(--g, .08) * .85)); } }
.ttl-roam.pose-nap .ttl-fur path { animation-duration: 3.2s; }
.ttl-roam .ttm { z-index: 1; }
.ttl-roam .ttl-leg { z-index: 2; } /* legs poke out of the fur ball */
.ttl-twin .ttl-fur { display: none; }
.ttl-carry { position: fixed; pointer-events: none; display: block; z-index: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.ttl-carry > * { pointer-events: none !important; box-sizing: border-box; }
/* Twin fight */
.ttl-roam.ttl-twin { z-index: 2147481801; }
.ttl-roam.hid { opacity: 0; }
.ttl-boom.sm { width: 80px; height: 80px; margin: -40px 0 0 -40px; animation-duration: 1.1s; }
.ttl-boom.sm b { font-size: 15px; }
.ttl-banner { left: 0 !important; top: 0 !important; width: 100vw; height: 100vh; display: flex !important; align-items: center; justify-content: center; z-index: 2147482500; }
.ttl-banner b { padding: 10px 26px; border-radius: 12px; background: #111; color: #ffd23f; font: 900 clamp(26px, 7vw, 56px)/1 Impact, "Arial Black", system-ui, sans-serif; letter-spacing: .04em; transform: rotate(-4deg); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); animation: ttl-banner 1.3s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes ttl-banner { 0% { transform: scale(3) rotate(-4deg); opacity: 0; } 20% { transform: scale(1) rotate(-4deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.9) rotate(-4deg); opacity: 0; } }
.ttl-brawl { width: 120px; height: 90px; margin: -45px 0 0 -60px; border-radius: 50%; background: radial-gradient(ellipse, rgba(200, 200, 200, .95) 0, rgba(170, 170, 170, .85) 45%, rgba(150, 150, 150, 0) 72%); animation: ttl-brawl .18s linear infinite alternate; }
.ttl-brawl i { position: absolute; font: 900 16px/1 system-ui, sans-serif; font-style: normal; color: #e0245e; animation: ttl-brawlbit .5s linear infinite; }
.ttl-brawl i:nth-child(1) { left: 10%; top: 10%; } .ttl-brawl i:nth-child(2) { left: 30%; top: 40%; color: #111; animation-delay: -.2s; } .ttl-brawl i:nth-child(3) { right: 12%; top: 18%; color: #1E90FF; animation-delay: -.1s; } .ttl-brawl i:nth-child(4) { left: 20%; bottom: 8%; animation-delay: -.3s; } .ttl-brawl i:nth-child(5) { right: 20%; bottom: 14%; color: #ffb703; animation-delay: -.4s; }
@keyframes ttl-brawl { from { transform: translate(-3px, 2px) scale(1); } to { transform: translate(3px, -2px) scale(1.06); } }
@keyframes ttl-brawlbit { 50% { transform: scale(1.4) rotate(20deg); opacity: .5; } }
.ttl-slowmo { left: 0 !important; top: 0 !important; width: 100vw; height: 100vh; z-index: 2147482400; box-shadow: inset 0 11vh 0 #000, inset 0 -11vh 0 #000; animation: ttl-slowmo 2.8s ease both; }
.ttl-slowmo b { position: absolute; right: 18px; bottom: calc(11vh + 10px); color: #fff; font: 800 18px/1 ui-monospace, Menlo, monospace; letter-spacing: .3em; text-shadow: 0 0 8px rgba(0, 0, 0, .8); }
@keyframes ttl-slowmo { 0% { opacity: 0; } 12%, 85% { opacity: 1; } 100% { opacity: 0; } }
.ttl-stars { width: 40px; height: 20px; margin: -10px 0 0 -20px; animation: ttl-stars 1s linear infinite; }
.ttl-stars i { position: absolute; color: #ffd23f; font-style: normal; font-size: 13px; text-shadow: 0 0 2px #000; } .ttl-stars i:nth-child(1) { left: 0; } .ttl-stars i:nth-child(2) { left: 15px; top: -6px; } .ttl-stars i:nth-child(3) { right: 0; }
@keyframes ttl-stars { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* Sprout marker and graffiti (pictures on top only; they stay until any touch) */
.ttl-dmg.ttl-ink { animation: none; transform-origin: 50% 50%; }
.ttl-ink svg { display: block; overflow: visible; }
.ttl-ink path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .88; animation-name: ttl-ink; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.ttl-ink path.f { fill: currentColor; fill-opacity: 0; animation-name: ttl-ink, ttl-inkf; }
.ttl-ink text { fill: currentColor; font-family: "Comic Sans MS", "Marker Felt", "Chalkboard SE", "Segoe Print", "Bradley Hand", cursive; font-weight: 700; opacity: .9; animation-name: ttl-inkt; animation-timing-function: linear; animation-fill-mode: both; }
@keyframes ttl-ink { to { stroke-dashoffset: 0; } }
@keyframes ttl-inkf { 0%, 70% { fill-opacity: 0; } 100% { fill-opacity: .85; } }
@keyframes ttl-inkt { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
.ttl-mess > i.ttl-pen { width: 16px; height: 60px; margin: -60px 0 0 -2px; transform-origin: 50% 100%; animation: ttl-pen .5s ease-in-out infinite alternate; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.ttl-pen svg, .ttl-can svg { display: block; width: 100%; height: 100%; }
@keyframes ttl-pen { 0% { transform: translate(0, 0) rotate(18deg); } 33% { transform: translate(26px, 10px) rotate(24deg); } 66% { transform: translate(8px, 22px) rotate(14deg); } 100% { transform: translate(34px, 4px) rotate(22deg); } }
.ttl-mess > i.ttl-can { width: 24px; height: 48px; margin: -24px 0 0 -12px; animation: ttl-can .14s ease-in-out infinite alternate; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.ttl-can b { position: absolute; left: 26px; top: 6px; white-space: nowrap; font: 800 11px/1 system-ui, sans-serif; color: #333; background: #fff; border-radius: 6px; padding: 2px 5px; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
@keyframes ttl-can { from { transform: translateY(-7px) rotate(-14deg); } to { transform: translateY(7px) rotate(14deg); } }
.ttl-mess > i.ttl-mist { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; filter: blur(7px); opacity: 0; animation: ttl-mist .9s ease-out both; }
@keyframes ttl-mist { 0% { opacity: .75; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.2); } }
.ttl-dmg.ttl-graf { animation: none; transform-origin: 50% 50%; }
.ttl-graf svg { display: block; overflow: visible; font-family: Impact, "Arial Black", "Helvetica Neue", sans-serif; font-weight: 900; }
.ttl-graf text { text-anchor: middle; stroke-linejoin: round; paint-order: stroke; }
.ttl-graf .g0 { fill: currentColor; stroke-width: .2em; transform: translate(.05em, .06em); }
.ttl-graf .g1 { fill: none; stroke-width: .1em; }
.ttl-graf .g2 { stroke: none; }
.ttl-graf .g3 { fill: rgba(255,255,255,.55); stroke: none; transform: translate(-.03em, -.03em) scale(.96); clip-path: inset(0 0 62% 0); }
.ttl-graf.wild text { letter-spacing: -.02em; }
.ttl-graf .gl { animation: ttl-gl .55s ease-out both; }
@keyframes ttl-gl { 0% { opacity: 0; filter: blur(10px); } 40% { opacity: .7; filter: blur(4px); } 100% { opacity: 1; filter: blur(0); } }
.ttl-graf .ga { stroke-width: 3; stroke-linejoin: round; animation: ttl-gl .5s ease-out both; }
.ttl-graf .gd { fill: none; stroke-width: .07em; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: ttl-drip 1.8s cubic-bezier(.4,0,.8,1) both; opacity: .92; }
.ttl-graf .gd2 { opacity: 0; animation: ttl-drip2 .4s ease-out both; }
@keyframes ttl-drip { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 140; } }
@keyframes ttl-drip2 { to { opacity: .92; } }
/* Big canvas (mascot.js ttm-big: roaming Sprout with fur, witch hat): the SVG is 250% of the mascot, centred on it, with a
   viewBox 30 units wider on every side, so the face stays the same size and fur/hat are drawn inside the SVG, never clipped
   (WebKit cuts SVG overflow at the box under a filter). Taps go through the extra canvas. */
.ttm.ttm-big > svg { position: absolute; left: -75%; top: -75%; width: 250%; height: 250%; max-width: none; pointer-events: none; }
/* Speech bubble placement (app-loader.js bubble): JS puts it inside the screen and safe areas from its measured size; it
   wraps (never cut, never one long line off the edge) and the tail points at Sprout: up = above him (tail at the bottom),
   below = under him (tail on top), sr / sl = beside him (tail on the left / right). --tx / --ty = where he is along it. */
.ttl-say { box-sizing: border-box; right: auto; bottom: auto; min-width: min(96px, calc(100vw - 16px)); white-space: normal; overflow-wrap: break-word; word-break: normal; text-align: left; }
.ttl-say::after, .ttl-say.l::after { left: var(--tx, 50%); right: auto; top: auto; bottom: -6px; margin: 0 0 0 -6px; border: 0 solid rgba(17, 17, 17, .08); border-right-width: 1px; border-bottom-width: 1px; }
.ttl-say.below::after { top: -6px; bottom: auto; border-width: 1px 0 0 1px; }
.ttl-say.sr::after { left: -6px; top: var(--ty, 50%); bottom: auto; margin: -6px 0 0 0; border-width: 0 0 1px 1px; }
.ttl-say.sl::after { left: auto; right: -6px; top: var(--ty, 50%); bottom: auto; margin: -6px 0 0 0; border-width: 1px 1px 0 0; }
.ttl-say.term::after { border-color: #1C3B22; }
/* Slime (idle gag, app-loader.js SLIME, about 8 s): two full-screen canvases over everything (the goo and, on top, the flying
   balls, drips, wiper and globs); taps pass through. His button rides above the goo (ttl-over); the roaming Sprout already
   does (z 2147481800); bubbles above both. He winds up, throws (a quick rocking loop), then looks proud or guilty.
   slime-glass: same canvases; during the throw he stays above (ttl-over); after the SPLAT .on-glass lifts the sheet over him
   so it reads as goo on the viewer's glass. */
.ttl-slime { position: fixed; inset: 0; z-index: 2147481700; pointer-events: none; overflow: hidden; contain: strict; }
.ttl-slime.on-glass { z-index: 2147481900; } /* above roam (1800) and fab ttl-over (1850); bubbles still above */
.ttl-slime canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.hc-fab.ttl-over, .ttl-roam.ttl-over { z-index: 2147481850; }
.ttl-slwind .ttm { animation: ttl-slwind .56s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes ttl-slwind { 0% { transform: none; } 60% { transform: translateX(calc(var(--d) * -16%)) rotate(calc(var(--d) * -20deg)) scale(1.06, .94); } 85% { transform: translateX(calc(var(--d) * 12%)) rotate(calc(var(--d) * 14deg)) scale(.96, 1.05); } 100% { transform: none; } }
.ttl-slthrow .ttm { animation: ttl-slthrow .26s ease-in-out infinite; }
@keyframes ttl-slthrow { 0%, 100% { transform: none; } 45% { transform: translateX(calc(var(--d) * 10%)) rotate(calc(var(--d) * 12deg)) scale(.97, 1.03); } }
.ttl-slproud .ttm { animation: ttl-slproud 1s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes ttl-slproud { 0%, 100% { transform: none; } 30% { transform: translateY(-22%) scale(1.04); } 55% { transform: none; } 70% { transform: translateY(-9%); } }
.ttl-slsorry .ttm { animation: ttl-slsorry 1s ease both; }
@keyframes ttl-slsorry { 0%, 100% { transform: none; } 25%, 80% { transform: translateY(6%) rotate(calc(var(--d) * -8deg)) scale(.94); } }
@media (prefers-reduced-motion: reduce) { .ttl-slime { display: none !important; } .ttl-slwind .ttm, .ttl-slthrow .ttm, .ttl-slproud .ttm, .ttl-slsorry .ttm { animation: none !important; } }
/* Shave (idle gag, app-loader.js SHAVE, about 11 s): one full-screen layer (taps pass through) with two canvases (the fur
   pile along the bottom; flying clumps and the FWOOMP fluff), his big stand-in (.shv-a, fur inside his SVG; cut blades
   fade), the chrome clipper, the hand mirror and the comic words. The real Sprout is hidden while it plays. */
.ttl-shave { position: fixed; inset: 0; z-index: 2147481700; pointer-events: none; overflow: hidden; contain: strict; }
.ttl-shave.shk { animation: shv-shake .55s linear; }
@keyframes shv-shake { 0%, 100% { transform: none; } 15% { transform: translate(-9px, 5px) rotate(-.6deg); } 30% { transform: translate(7px, -6px) rotate(.5deg); } 45% { transform: translate(-6px, -3px); } 60% { transform: translate(5px, 4px) rotate(-.4deg); } 80% { transform: translate(-3px, 2px); } }
.ttl-shave canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.ttl-shave .shv-fly { z-index: 3; }
.shv-a { position: absolute; z-index: 2; transform-origin: 50% 50%; will-change: transform; }
.shv-in { position: relative; display: block; width: 100%; height: 100%; }
.shv-a .ttm { --ttm-size: 100%; filter: drop-shadow(0 .03em .05em rgba(17, 17, 17, .3)); }
.shv-a .ttl-fur > g { transition: opacity .12s linear; }
.shv-a .ttl-fur > g.cut { opacity: 0; }
.shv-a.poof .ttl-fur > g { transition: opacity .1s linear; }
.shv-a.poof .ttl-fur path { transition-duration: .28s; }
.shv-a .shv-strip { fill: #F6D5BF; opacity: 0; transition: opacity .2s; }
.shv-a.striped .shv-strip, .shv-a .shv-in.buzzed .shv-strip { opacity: 1; }
.shv-a .shv-hl { fill: #fff; opacity: 0; }
.shv-a.bald .ttm { --ttm-body: #F6D5BF; --ttm-shade: #E7B497; }
.shv-a.bald .ttl-fur, .shv-a.bald .shv-strip, .shv-a.bald .ttm .b2, .shv-a.bald .ttm .r { display: none; }
.shv-a.bald .shv-hl { opacity: .85; }
.shv-a.bald .ttm-eye-pill .pe { transform: scale(.7, .62) translateY(4%) !important; }
.shv-a.bald .ttm-eye-pill .pe + .pe { transform: scale(.95, .88) translateY(-6%) !important; }
.shv-a.huge .ttm-eye-pill .pe, .shv-a.huge .ttm-eye-pill .pe + .pe { transform: scale(1.45, 1.22) !important; }
.shv-a.huge .ttm .e { transform: scale(1.45) !important; }
.shv-a .shv-in.clench .ttm { --ttm-body: #F2A587; }
.shv-glint { position: absolute; left: 24%; top: 14%; width: .17em; height: .17em; margin: -.085em; background: #fff; opacity: 0; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 .02em #fff); }
.shv-a.bald .shv-glint { animation: shv-glint .9s ease-in-out infinite; }
@keyframes shv-glint { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 45% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
.shv-sw { position: absolute; width: .1em; height: .14em; border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; background: #7cc8ff; box-shadow: inset -.01em -.015em 0 rgba(0, 0, 0, .15); opacity: 0; }
.shv-sw.s1 { left: 10%; top: 12%; --sx: -.25em; } .shv-sw.s2 { right: 8%; top: 8%; --sx: .28em; } .shv-sw.s3 { left: 2%; top: 38%; --sx: -.32em; } .shv-sw.s4 { right: 1%; top: 34%; --sx: .3em; }
.shv-a.sweat .shv-sw { animation: shv-sweat .6s ease-in infinite; }
.shv-a.sweat .shv-sw.s2 { animation-delay: -.2s; } .shv-a.sweat .shv-sw.s3 { animation-delay: -.35s; } .shv-a.sweat .shv-sw.s4 { animation-delay: -.5s; }
@keyframes shv-sweat { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--sx), .3em); } }
.shv-in.jolt { animation: shv-jolt .09s linear infinite alternate; }
.shv-in.buzzed { animation: shv-jolt .06s linear infinite alternate; }
@keyframes shv-jolt { from { transform: translate(-1.5%, .8%) rotate(-1.5deg); } to { transform: translate(1.5%, -.8%) rotate(1.5deg); } }
.shv-in.panic { animation: shv-panic .12s linear infinite alternate; }
@keyframes shv-panic { from { transform: translateX(-4%) scale(1.02, .98); } to { transform: translateX(4%) scale(.98, 1.03); } }
.shv-in.clench { animation: shv-clench .07s linear infinite alternate; }
@keyframes shv-clench { from { transform: scale(.9, .82) translate(-2%, 4%); } to { transform: scale(.88, .84) translate(2%, 4%); } }
.shv-razor { position: absolute; z-index: 4; display: block; opacity: 0; transform-origin: 50% 100%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.shv-razor.on { opacity: 1; }
.shv-rz, .shv-rz svg { display: block; width: 100%; height: 100%; }
.shv-razor.buzz .shv-rz { animation: shv-rz .04s linear infinite alternate; }
@keyframes shv-rz { from { transform: translate(-1.5px, 1px) rotate(-2deg); } to { transform: translate(1.5px, -1px) rotate(2deg); } }
.shv-buzz { position: absolute; inset: 0; display: none; }
.shv-razor.buzz .shv-buzz { display: block; }
.shv-buzz i { position: absolute; width: 38%; height: 3px; border-radius: 2px; background: #111; opacity: 0; animation: shv-line .18s linear infinite; }
.shv-buzz i:nth-child(1) { left: -46%; top: 22%; transform: rotate(-18deg); } .shv-buzz i:nth-child(2) { left: -52%; top: 42%; } .shv-buzz i:nth-child(3) { left: -46%; top: 62%; transform: rotate(18deg); animation-delay: -.06s; }
.shv-buzz i:nth-child(4) { right: -46%; top: 22%; transform: rotate(18deg); animation-delay: -.09s; } .shv-buzz i:nth-child(5) { right: -52%; top: 42%; animation-delay: -.03s; } .shv-buzz i:nth-child(6) { right: -46%; top: 62%; transform: rotate(-18deg); animation-delay: -.12s; }
@keyframes shv-line { 0%, 100% { opacity: 0; } 30%, 60% { opacity: .85; } }
.shv-mirror { position: absolute; z-index: 2; display: block; opacity: 0; transform: translateY(40%) rotate(25deg) scale(.6); transition: opacity .25s, transform .4s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.shv-mirror.on { opacity: 1; transform: rotate(-8deg); }
.shv-mirror svg { display: block; width: 100%; height: 100%; }
.shv-word { position: absolute; z-index: 5; white-space: nowrap; color: #ffd23f; font: 900 clamp(22px, 6.5vw, 48px)/1 Impact, "Arial Black", system-ui, sans-serif; letter-spacing: .03em; -webkit-text-stroke: 2px #e0245e; text-shadow: 3px 3px 0 #111; opacity: 0; transform: rotate(-8deg); }
.shv-word.on { animation: shv-word 1s cubic-bezier(.3, 1.6, .5, 1) both, shv-wshake .05s linear 10 alternate; }
.shv-word.big { font-size: clamp(44px, 15vw, 130px); color: #fff; -webkit-text-stroke: 3px #2e8f28; text-shadow: 5px 5px 0 #1a5a14; transform: translate(-50%, -50%) rotate(-6deg); }
.shv-word.big.on { animation: shv-big 1.3s cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes shv-word { 0% { opacity: 0; transform: scale(.3) rotate(-8deg); } 20%, 75% { opacity: 1; transform: scale(1) rotate(-8deg); } 100% { opacity: 0; transform: scale(1.1) rotate(-8deg); } }
@keyframes shv-wshake { from { margin-left: -2px; } to { margin-left: 2px; } }
@keyframes shv-big { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-6deg); } 25%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25) rotate(-6deg); } }
.ttl-say.scream { font: 900 19px/1.1 Impact, "Arial Black", system-ui, sans-serif; letter-spacing: .03em; color: #e0245e; }
/* Reduced motion: only the calm version (a still razor beside him and one line); nothing moves. */
.ttl-shave.calm .shv-razor { opacity: 1; filter: none; }
.shv-note { position: absolute; max-width: min(240px, calc(100vw - 16px)); padding: 8px 12px; border-radius: 12px; background: #fff; color: #111; font: 600 13.5px/1.35 system-ui, sans-serif; box-shadow: 0 4px 14px rgba(17, 17, 17, .18); white-space: normal; }
@media (prefers-reduced-motion: reduce) { .ttl-shave:not(.calm) { display: none !important; } .ttl-shave * { animation: none !important; transition: none !important; } }
/* Tidy Up (Oct 19 2026): a leftover mark wipes away (Nice Sprout sweeps, or it fades on its own after 2 minutes). */
.ttl-mess > .ttl-tidy { transition: opacity .6s ease, transform .6s ease, filter .6s ease; opacity: 0; filter: blur(3px); transform: rotate(var(--r, 0deg)) translateX(40px) scale(.6); }