/* ---------- the red panda (assets/panda.js) ---------- */
.panda-layer { position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
/* the sprite frame is 145x123; its point (84,121) - under the torso, on the ground - is the spot that panda.js moves around the page */
.panda { position: absolute; left: 0; top: 0; width: 145px; height: 123px; margin: -121px 0 0 -84px; transform-origin: 84px 121px; will-change: transform; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.panda__spr { width: 100%; height: 100%; background-repeat: no-repeat; }
/* the frame being left behind lies on top of the new one and melts away when two poses have nothing between them (the shadow is on .panda, so it is not doubled) */
.panda__spr--fade { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
/* sleep: small "z" letters leave the head one after another, drift up and a little forward, and fade */
.panda-z { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .6s; }
.panda-z i { position: absolute; left: 0; top: 0; font: 700 14px/1 system-ui, sans-serif; font-style: normal; color: var(--cream, #f6e3c4); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); opacity: 0; animation: panda-z 3.6s ease-in-out infinite; }
.panda-z i:nth-child(2) { animation-delay: 1.2s; font-size: 16px; }
.panda-z i:nth-child(3) { animation-delay: 2.4s; font-size: 18px; }
.panda-layer.is-sleeping .panda-z { opacity: 1; }
.panda-layer:not(.is-sleeping) .panda-z i { animation-play-state: paused; }       /* the letters only run while it sleeps */
@keyframes panda-z { 0% { opacity: 0; transform: translate(0, 0) scale(.7); } 14% { opacity: 1; } 62% { opacity: .85; } 100% { opacity: 0; transform: translate(12px, -26px) scale(1.1); } }
.footer .linkbtn { padding: 4px 0; }

/* ---------- the panda can be poked: its body is a (invisible) button, the rest of the layer stays click-through ---------- */
.panda-ui { position: fixed; inset: 0; z-index: 26; pointer-events: none; }
.panda-hit { position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0; border-radius: 14px; background: transparent; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; outline: none; }
.panda-hit:focus-visible { outline: 2px solid var(--red-2, #ff7a3d); outline-offset: 2px; }

/* the speech bubble: above the head, with a tail that points at it; it "pops" in and does not take clicks */
.panda-bubble { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.panda-bubble.is-on { opacity: 1; visibility: visible; transition: opacity .12s; }
.panda-bubble__in { position: relative; transform-origin: var(--tx, 50%) 100%; max-width: 210px; padding: 8px 12px; border-radius: 14px; background: #f6e3c4; color: #2a1208; font: 700 14px/1.25 system-ui, sans-serif; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.panda-bubble.is-on .panda-bubble__in { animation: panda-pop .32s cubic-bezier(.2, 1.5, .4, 1); }
.panda-bubble__in i { position: absolute; left: var(--tx, 50%); bottom: -7px; width: 14px; height: 14px; margin-left: -7px; background: #f6e3c4; transform: rotate(45deg); border-radius: 2px; }
.panda-bubble.is-below .panda-bubble__in { transform-origin: var(--tx, 50%) 0; }
.panda-bubble.is-below .panda-bubble__in i { bottom: auto; top: -7px; }
@keyframes panda-pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

/* the moon in the top bar (before the cart): sends the panda to sleep where it stands, and wakes it. It looks like the neighbours:
 * the search field's height and radius, the same hover / focus / press language (the tokens are style.css's, with fallbacks). */
.panda-sleepbtn {
  flex: none; position: relative; width: 42px; height: 42px; margin: 0; padding: 0; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--line, rgba(255, 255, 255, .09)); background: var(--panel-2, #212126); color: var(--cream, #f6e3c4);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  outline: 2px solid transparent; outline-offset: 0;
  transition: transform var(--dur-hover, 240ms) var(--ease-spring, cubic-bezier(.34, 1.3, .64, 1)), box-shadow var(--dur-hover, 240ms) var(--ease-out, ease),
    background-color var(--dur-hover, 240ms) ease, border-color var(--dur-hover, 240ms) ease, color var(--dur-hover, 240ms) ease,
    outline-color var(--dur-hover, 240ms) ease, outline-offset var(--dur-hover, 240ms) var(--ease-out, ease);
}
.panda-sleepbtn { animation: panda-sleepbtn-in .45s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) backwards; }
.panda-sleepbtn.is-out { opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .28s ease, transform .28s ease; animation: none; }
@keyframes panda-sleepbtn-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panda-sleepbtn { animation: none; } }
.panda-sleepbtn svg { width: 22px; height: 22px; display: block; overflow: visible; }
.panda-sleepbtn__moon { fill: currentColor; }
.panda-sleepbtn__z { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); transform-origin: 17.5px 5.5px;
  transition: opacity .25s ease, transform var(--dur-state, 380ms) var(--ease-pop, cubic-bezier(.34, 1.56, .64, 1)); }
.panda-sleepbtn.is-on { color: var(--red-2, #ff7a3d); border-color: var(--red-2, #ff7a3d); background: #26262c; }
.panda-sleepbtn.is-on .panda-sleepbtn__z { opacity: 1; transform: none; }
.panda-sleepbtn:focus-visible { outline-color: var(--red-2, #ff7a3d); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ring, rgba(255, 122, 61, .25)); }
.panda-sleepbtn:active { transform: scale(.95); transition-duration: var(--dur-press, 110ms); }
@media (hover: hover) and (pointer: fine) {
  .panda-sleepbtn:hover { border-color: rgba(255, 122, 61, .6); color: #fff0d6; }
  .panda-sleepbtn.is-on:hover { border-color: var(--red-2, #ff7a3d); color: #ffa070; }
}
/* very narrow phones: the bar has to leave the search field a usable width */
@media (max-width: 400px) { .panda-sleepbtn { width: 38px; } .topbar__in:has(.panda-sleepbtn) { gap: 10px; } }
@media (max-width: 340px) { .panda-sleepbtn { width: 34px; } .topbar__in:has(.panda-sleepbtn) { gap: 6px; padding-left: 12px; padding-right: 12px; } }