/* "Pin" mascot (js/mascot.js). Also embedded into css/mascot.svg by scripts/mascot_svg.js. */
.tm { display: block; width: 100%; height: 100%; overflow: visible; }
.tm * { transform-box: view-box; }
.tm .tm-skin { fill: #f76707; }
.tm .tm-dark { fill: #c2410c; }
.tm .tm-shine { fill: #ffa94d; }
.tm .tm-ribbon { fill: #f03e3e; }
.tm .tm-arm { fill: none; stroke: #f76707; stroke-width: 7; stroke-linecap: round; }
.tm .tm-gloss { fill: none; stroke: #ffc078; stroke-width: 4; stroke-linecap: round; opacity: .8; }
.tm .tm-face { fill: #fff8f0; }
.tm .tm-eye { fill: #2b1d14; }
.tm .tm-glint { fill: #fff; }
.tm .tm-blush { fill: #ff8fa3; opacity: .65; }
.tm .tm-mouth { fill: none; stroke: #2b1d14; stroke-width: 3; stroke-linecap: round; }
.tm .tm-o { fill: #2b1d14; stroke: none; }
.tm .tm-glass circle { fill: rgba(165, 216, 255, .45); stroke: #495057; stroke-width: 3.5; }
.tm .tm-glass path { stroke: #495057; stroke-width: 5; stroke-linecap: round; }
.tm .tm-q { font: 700 26px system-ui, sans-serif; fill: #e8590c; }
.tm .tm-spark { fill: #fab005; }
.tm .tm-shadow { fill: rgba(0, 0, 0, .14); transform-origin: 60px 136px; }

/* Parts that only some poses show */
.tm .tm-o, .tm .tm-frown, .tm .tm-glass, .tm .tm-q, .tm .tm-spark { display: none; }

/* Origins: arms swing from the shoulder, the body bends from the tip, eyes blink in place */
.tm .tm-arm-l { transform-origin: 24px 72px; }
.tm .tm-arm-r { transform-origin: 96px 72px; }
.tm .tm-body { transform-origin: 60px 130px; }
.tm .tm-eyes { transform-origin: 60px 55px; animation: tm-blink 4.2s infinite; }
.tm .tm-knot { transform-origin: 60px 22px; }

/* idle: breathe + blink, topknot wobbles */
.tm[data-pose="idle"] .tm-body { animation: tm-bob 2.8s ease-in-out infinite; }
.tm[data-pose="idle"] .tm-knot { animation: tm-wobble 2.8s ease-in-out infinite; }

/* wave: hello! */
.tm[data-pose="wave"] .tm-body { animation: tm-bob 2.8s ease-in-out infinite; }
.tm[data-pose="wave"] .tm-arm-r { animation: tm-wave 1.1s ease-in-out infinite; }
.tm[data-pose="wave"] .tm-knot { animation: tm-wobble 1.1s ease-in-out infinite; }

/* hop: loading, hops while looking for events */
.tm[data-pose="hop"] .tm-body { animation: tm-hop .9s cubic-bezier(.3, 0, .4, 1) infinite; }
.tm[data-pose="hop"] .tm-shadow { animation: tm-shadow .9s cubic-bezier(.3, 0, .4, 1) infinite; }
.tm[data-pose="hop"] .tm-arm-l { animation: tm-flap-l .9s ease-in-out infinite; }
.tm[data-pose="hop"] .tm-arm-r { animation: tm-flap-r .9s ease-in-out infinite; }
.tm[data-pose="hop"] .tm-knot { animation: tm-wobble .45s ease-in-out infinite; }

/* lost: nothing found / 404, magnifier out, looks around */
.tm[data-pose="lost"] .tm-smile { display: none; }
.tm[data-pose="lost"] .tm-o, .tm[data-pose="lost"] .tm-glass, .tm[data-pose="lost"] .tm-q { display: inline; }
.tm[data-pose="lost"] .tm-body { animation: tm-sway 3.2s ease-in-out infinite; }
.tm[data-pose="lost"] .tm-eye { animation: tm-look 3.2s ease-in-out infinite; }
.tm[data-pose="lost"] .tm-q { animation: tm-float 1.6s ease-in-out infinite; }

/* sad: load error */
.tm[data-pose="sad"] .tm-smile { display: none; }
.tm[data-pose="sad"] .tm-frown { display: inline; }
.tm[data-pose="sad"] .tm-body { transform: rotate(-6deg) translateY(3px); }
.tm[data-pose="sad"] .tm-knot { transform: rotate(-25deg); }
.tm[data-pose="sad"] .tm-arm-l { transform: rotate(20deg); }
.tm[data-pose="sad"] .tm-arm-r { transform: rotate(-20deg); }

/* happy: jump with sparkles */
.tm[data-pose="happy"] .tm-spark { display: inline; animation: tm-twinkle 1s ease-in-out infinite; }
.tm[data-pose="happy"] .tm-body { animation: tm-hop 1s cubic-bezier(.3, 0, .4, 1) infinite; }
.tm[data-pose="happy"] .tm-shadow { animation: tm-shadow 1s cubic-bezier(.3, 0, .4, 1) infinite; }
.tm[data-pose="happy"] .tm-arm-l { transform: rotate(95deg); }
.tm[data-pose="happy"] .tm-arm-r { transform: rotate(-95deg); }

@keyframes tm-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes tm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes tm-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes tm-wave { 0%, 100% { transform: rotate(-80deg); } 50% { transform: rotate(-112deg); } }
@keyframes tm-hop {
  0%, 100% { transform: translateY(0) scale(1.06, .92); }
  15% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-18px) scale(.97, 1.04); }
  85% { transform: translateY(0) scale(1); }
}
@keyframes tm-shadow { 0%, 100% { transform: scaleX(1.1); opacity: 1; } 50% { transform: scaleX(.6); opacity: .5; } }
@keyframes tm-flap-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(70deg); } }
@keyframes tm-flap-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-70deg); } }
@keyframes tm-sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes tm-look { 0%, 20%, 100% { transform: translateX(0); } 35%, 50% { transform: translateX(-3px); } 65%, 80% { transform: translateX(3px); } }
@keyframes tm-float { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-5px); opacity: .6; } }
@keyframes tm-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.85); } }
@media (prefers-reduced-motion: reduce) { .tm, .tm * { animation: none !important; } }

/* ---------- Placements ---------- */
/* Header logo (every page): static animated copy, so no script is needed */
.brand-mark, .tp-brand .brand-mark {
  display: inline-block; width: 32px; height: 38px; flex-shrink: 0;
  background: url(/css/mascot.svg) center / contain no-repeat;
  font-size: 0; color: transparent; overflow: hidden;
}
/* A mascot with a speech line: loading, empty list, error, 404 */
.mascot-state { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--muted, #6c757d); padding: 32px 16px; list-style: none; }
.mascot-state .tuk-mascot, .mascot-state > .tm { width: 96px; height: 112px; display: block; }
.mascot-state .bubble {
  position: relative; background: var(--panel, #fff); color: var(--text, #212529); border: 1px solid var(--line, #e9ecef);
  border-radius: 14px; padding: 8px 14px; max-width: 30ch; box-shadow: var(--shadow, none); font-size: 14px;
}
.mascot-state .bubble::before {
  content: ''; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
  background: inherit; border-left: 1px solid var(--line, #e9ecef); border-top: 1px solid var(--line, #e9ecef); transform: rotate(45deg);
}
.mascot-state .btn { margin-top: 4px; text-decoration: none; }
.mascot-state.big .tuk-mascot { width: 150px; height: 176px; }
.mascot-state h1 { color: var(--text, #212529); }
.mascot-state .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 0; }

/* Toast: TukMascot.say() */
.tm-toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 3000;
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(420px, calc(100vw - 32px));
  padding: 8px 16px 8px 8px; border-radius: 16px; background: var(--panel, #fff); color: var(--text, #212529);
  border: 1px solid var(--line, #e9ecef); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); font-size: 14px; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .2s, transform .2s;
}
.tm-toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.tm-toast > .tm { width: 44px; height: 52px; flex-shrink: 0; }
@media (min-width: 861px) { .tm-toast { bottom: 24px; } }