/* Uno: a flat circle with two eyes. Layers: rig (moves) > lean (attitude) > body (stretch)
   > squash (breathing) > face (where he looks) > eyes (blinks). */
.uno-host { display: block; -webkit-tap-highlight-color: transparent; }
.uno-host[role="button"] { cursor: pointer; border-radius: 50%; outline: none; }
.uno-host[role="button"]:focus-visible { box-shadow: 0 0 0 3px var(--paper, #fff), 0 0 0 6px var(--accent, #000); }
.uno { --lx: 0px; --ly: 0px; display: block; width: 100%; height: 100%; overflow: visible; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.uno * { transform-box: view-box; }
.uno-rig, .uno-lean, .uno-body, .uno-squash { transform-origin: 60px 110px; }
.uno-lean { transition: transform 0.4s cubic-bezier(0.25, 1, 0.35, 1); }
.uno-body { transition: transform 0.35s cubic-bezier(0.25, 1, 0.35, 1); }

/* A colour that would vanish into the page gets a thin ink ring */
.uno-disc { stroke: var(--uno-ring, none); stroke-width: 2.5; }
:root:not([data-theme="dark"]) .uno.ring-on-light { --uno-ring: var(--ink, #000); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .uno.ring-on-light { --uno-ring: none; }
  :root:not([data-theme="light"]) .uno.ring-on-dark { --uno-ring: var(--ink, #fff); }
}
:root[data-theme="dark"] .uno.ring-on-dark { --uno-ring: var(--ink, #fff); }
.scanner .uno.ring-on-dark { --uno-ring: #fff; }
.scanner .uno.ring-on-light { --uno-ring: none; }

/* Eyes follow your finger; blinks squeeze them shut */
.uno-face { transform: translate(var(--lx), var(--ly)); transition: transform 0.18s ease-out; }
.uno-eyes { transform-origin: 60px 56px; transition: transform 0.07s ease-in; }
.uno-blink .uno-eyes { transform: scaleY(0.08); }
.uno-snap .uno-lean, .uno-snap .uno-body { transition: none; }

/* Attitudes that change the body */
.uno-stretch .uno-body { transform: scale(0.96, 1.05); }
.uno-squashed .uno-body { transform: scale(1.06, 0.92); }

/* Breathing */
.uno-idle .uno-squash { animation: uno-breathe 3.6s ease-in-out infinite; }
.uno-squashed.uno-idle .uno-squash { animation-duration: 5s; }
@keyframes uno-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.015, 0.985); } }

/* Pressed */
.uno-rig { transition: transform 0.2s ease-out; }
.uno-pressed .uno-rig { transform: scale(1.06, 0.92); transition-duration: 0.1s; }
.uno-tappable { cursor: pointer; }

/* Typing: a tiny nod per key */
.uno-typing .uno-rig { animation: uno-nod-small 0.25s ease; }
@keyframes uno-nod-small { 50% { transform: translateY(1.5px) rotate(-1.5deg); } }

/* ---------------- one-shot moves ---------------- */
.uno-do-jump .uno-rig, .uno-do-celebrate .uno-rig { animation: uno-jump 0.6s cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes uno-jump { 18% { transform: scale(1.08, 0.9); } 48% { transform: translateY(-18px) scale(0.95, 1.06); } 78% { transform: scale(1.05, 0.95); } }
.uno-do-hop .uno-rig { animation: uno-hop 0.38s cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes uno-hop { 40% { transform: translateY(-8px) scale(0.97, 1.03); } 80% { transform: scale(1.04, 0.96); } }
.uno-do-bounce .uno-rig { animation: uno-bounce 1s ease-out; }
@keyframes uno-bounce { 15% { transform: translateY(-14px); } 30% { transform: scale(1.08, 0.92); } 45% { transform: translateY(-7px); } 60% { transform: scale(1.04, 0.96); } 75% { transform: translateY(-3px); } }
.uno-do-nod .uno-rig { animation: uno-nod 0.56s ease; transform-origin: 60px 90px; }
@keyframes uno-nod { 30% { transform: rotate(5deg) translateY(3px); } 65% { transform: rotate(-2deg); } }
.uno-do-shake .uno-rig { animation: uno-shake 0.52s ease; }
@keyframes uno-shake { 20% { transform: translateX(-5px) rotate(-4deg); } 40% { transform: translateX(5px) rotate(4deg); } 60% { transform: translateX(-3px) rotate(-2deg); } 80% { transform: translateX(2px); } }
.uno-do-tilt .uno-rig { animation: uno-tilt 0.68s ease; }
@keyframes uno-tilt { 40% { transform: rotate(-9deg); } 70% { transform: rotate(3deg); } }
.uno-do-wiggle .uno-rig { animation: uno-wiggle 0.6s ease; }
@keyframes uno-wiggle { 25% { transform: rotate(7deg); } 50% { transform: rotate(-7deg); } 75% { transform: rotate(3deg); } }
.uno-do-spin .uno-rig, .uno-do-flip .uno-rig { animation: uno-spin 0.7s cubic-bezier(0.4, 0.1, 0.3, 1); transform-origin: 60px 60px; }
@keyframes uno-spin { 50% { transform: translateY(-10px) rotate(180deg) scale(0.92); } 100% { transform: rotate(360deg); } }
.uno-do-pop .uno-rig { animation: uno-pop 0.38s ease-out; }
@keyframes uno-pop { 0% { transform: scale(0.85); } 70% { transform: scale(1.03); } }
.uno-do-sad .uno-rig { animation: uno-sad 0.72s ease; }
@keyframes uno-sad { 40%, 70% { transform: translateY(4px) rotate(-4deg) scale(1.03, 0.95); } }
.uno-do-squish .uno-rig { animation: uno-squish 0.56s ease-out; }
@keyframes uno-squish { 25% { transform: scale(1.16, 0.8); } 55% { transform: scale(0.94, 1.07); } 80% { transform: scale(1.02, 0.98); } }
.uno-do-stretch .uno-rig { animation: uno-stretchy 0.58s ease; }
@keyframes uno-stretchy { 40% { transform: scale(0.88, 1.15); } 75% { transform: scale(1.03, 0.97); } }
.uno-do-dance .uno-rig { animation: uno-dance 1.6s ease-in-out; }
@keyframes uno-dance { 12.5%, 62.5% { transform: translate(-6px, -5px) rotate(-8deg); } 25%, 50%, 75% { transform: scale(1.05, 0.95); } 37.5%, 87.5% { transform: translate(6px, -5px) rotate(8deg); } }
.uno-do-shiver .uno-rig { animation: uno-shiver 0.075s linear 8; }
@keyframes uno-shiver { 50% { transform: translateX(1.5px); } }
.uno-do-wobble .uno-rig { animation: uno-wobble 0.76s ease-out; }
@keyframes uno-wobble { 15% { transform: skewX(11deg); } 32% { transform: skewX(-8deg); } 50% { transform: skewX(5deg); } 68% { transform: skewX(-2deg); } }
.uno-do-roll .uno-rig { animation: uno-roll 0.86s ease-in-out; transform-origin: 60px 60px; }
@keyframes uno-roll { 50% { transform: translateX(24px) rotate(200deg); } 100% { transform: rotate(360deg); } }
/* A turn: his eyes slide round the back and come out the other side */
.uno-do-turn .uno-face { animation: uno-face-turn 0.86s ease-in-out; }
@keyframes uno-face-turn { 30% { transform: translateX(26px) scaleX(0.3); opacity: 0; } 31% { transform: translateX(-26px) scaleX(0.3); opacity: 0; } 70% { transform: none; opacity: 1; } }
.uno-do-land .uno-rig { animation: uno-land 0.4s ease-out; }
@keyframes uno-land { 0% { transform: scale(1.14, 0.84); } 55% { transform: scale(0.96, 1.04); } }
.uno-do-peek .uno-rig { animation: uno-peek 0.86s ease-in-out; }
@keyframes uno-peek { 30%, 55% { transform: translateY(14px) scale(1.1, 0.75); } 80% { transform: translateY(-5px); } }
.uno-do-float .uno-rig { animation: uno-float 1.5s ease-in-out; }
@keyframes uno-float { 25%, 75% { transform: translateY(-7px); } 50% { transform: translateY(-3px); } }
.uno-do-hug .uno-rig { animation: uno-hug 0.64s ease; }
@keyframes uno-hug { 30% { transform: scale(1.08, 0.93); } 60% { transform: scale(0.97, 1.03) rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .uno *, .uno-host * { animation: none !important; transition: none !important; }
}