/* =====================================================================
   bee.css — the look of sky/bee.js: the bee in the front garden, and
   its menu (talking to it).
   ===================================================================== */

/* where it lives: over the roses by the steps (shares of the 1600 x 900 garden picture), and from there all over the lawn
   (11 Oct: bee.js wander() sets --bee-wx, --bee-wy where it's flying to, --bee-wd how far back that is, --bee-wt how long it takes).
   smaller out here than up close (11 Oct: 4.2% of the garden, it was 6.2%; talking it's as big as ever) */
.front .bee-home {
    --bee-y: #f2c230;
    --lift: 0;
    --tilt: 0;
    --mouth: 0;
    --face: var(--bee-wface, 1);                                  /* (the way it's flying: bee.js wander(); talking, the rules below) */
    position: absolute;
    left: var(--bee-wx, 63.5%);
    top: var(--bee-wy, 67%);
    width: calc(4.2% * var(--bee-wd, 1));
    aspect-ratio: 120 / 100;
    z-index: 2;
    pointer-events: none;
    transition: left var(--bee-wt, 1.2s) cubic-bezier(.45, .05, .3, 1), top var(--bee-wt, 1.2s) cubic-bezier(.45, .05, .3, 1), width var(--bee-wt, 1.2s) cubic-bezier(.45, .05, .3, 1);
}
body.bee-talking .bee-home {
    transition-duration: 1.2s;
}
/* talking: it flies up closer (and turns to face the menu) */
body.bee-talking .front .bee-home {
    left: 58%;
    top: 46%;
    width: 9.5%;
    --face: -1;
}
@media (max-width: 620px) {
    .front .bee-home { left: var(--bee-wx, 56.5%); top: var(--bee-wy, 68%); }
    body.bee-talking .front .bee-home { left: 46%; top: 17%; width: 8%; --face: 1; }
}
@media (max-height: 500px) and (min-width: 621px) {
    body.bee-talking .front .bee-home { left: 70%; top: 36%; width: 8%; }
}

/* seen from the porch (bee.js perch): out over the yard past the railing, left of the steps (where its roses are, seen
   from this side), between the streetlight and the traveller, and from there all over the yard (bee.js wander(), as in the
   garden; smaller than up close: 11 Oct, it was clamp(58px, 5.6vw, 110px)). the same bee, so everything else below applies */
.porch .bee-home {
    --bee-y: #f2c230;
    --lift: 0;
    --tilt: 0;
    --mouth: 0;
    --face: var(--bee-wface, 1);                                  /* (the way it's flying: bee.js wander(); talking, the rules below) */
    position: absolute;
    left: var(--bee-wx, 32%);
    top: var(--bee-wy, 54%);
    width: calc(clamp(48px, 3.8vw, 76px) * var(--bee-wd, 1));
    aspect-ratio: 120 / 100;
    z-index: 1;
    pointer-events: none;
    transition: left var(--bee-wt, 1.2s) cubic-bezier(.45, .05, .3, 1), top var(--bee-wt, 1.2s) cubic-bezier(.45, .05, .3, 1), width var(--bee-wt, 1.2s) cubic-bezier(.45, .05, .3, 1);
}
/* dimmed with the porch as night falls (porch.css darkens each of its pieces by --pd; in the garden the whole stage is
   dimmed, the bee with it) */
.porch .bee-home,
.porch .bee-trail { filter: brightness(var(--pd, 1)); }
/* talking: up close, over the porch roof's shadow, facing the menu */
body.bee-talking .porch .bee-home { left: 36%; top: 28%; width: clamp(76px, 8vw, 150px); --face: -1; }
@media (max-width: 620px) {
    /* (the porch is 2½ screens wide on an upright phone and you look along it, porch.css: the bee's in the view the
       traveller stands in, and talking it comes to wherever you're looking, --porch-pan) */
    .porch .bee-home { left: var(--bee-wx, 30%); top: var(--bee-wy, 54%); }
    body.bee-talking .porch .bee-home { left: calc(var(--porch-pan, 0) * 1px + 38vw); top: 24%; --face: 1; }
}
@media (max-height: 500px) and (min-width: 621px) {
    .porch .bee-home { left: var(--bee-wx, 33%); top: var(--bee-wy, 47%); }
    body.bee-talking .porch .bee-home { left: 64%; top: 22%; }
}

.bee-home .bee {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}
.bee-home .bee:focus-visible {
    outline: 2px dashed rgba(243, 230, 194, .8);
    outline-offset: 6px;
    border-radius: 50%;
}
.bee-home .bee:hover .kh-hint,
.bee-home .bee:focus-visible .kh-hint {
    opacity: 1;
}
body.bee-talking .bee-home .bee .kh-hint {
    opacity: 0;
}

/* hovering about its flowers, a lap at a time (quicker when it's worked up, slower when it's sleepy) */
.bee-home .bee-fly {
    position: absolute;
    inset: 0;
    animation: bee-hover var(--hover, 5s) ease-in-out infinite;
}
@keyframes bee-hover {
    0%   { transform: translate(0, 0) rotate(0deg); }
    20%  { transform: translate(22%, -16%) rotate(4deg); }
    45%  { transform: translate(-6%, -26%) rotate(-3deg); }
    70%  { transform: translate(-24%, -8%) rotate(-5deg); }
    85%  { transform: translate(-10%, 6%) rotate(2deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
body.bee-talking .bee-home .bee-fly {
    animation-name: bee-hover-close;
}
@keyframes bee-hover-close {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(0, -9%); }
}
.bee-home[data-mood=scared] .bee-fly {
    animation-name: bee-hover-jitter;
}
@keyframes bee-hover-jitter {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(-6%, -4%); }
    50%      { transform: translate(5%, -9%); }
    75%      { transform: translate(-3%, -2%); }
}

/* the bee as it says each word: up for a high buzz, down for a low one, leaning into a slide, squashed on every buzz */
.bee-home .bee-pose {
    position: absolute;
    inset: 0;
    transform: translateY(calc(var(--lift) * -1%)) rotate(calc(var(--tilt) * 1deg));
    transition: transform .14s ease-out;
}
.bee-home .bee-pose.squash .bee-art {
    animation: bee-squash .22s ease-out;
}
@keyframes bee-squash {
    0%   { scale: 1 1; }
    35%  { scale: 1.12 .86; }
    70%  { scale: .96 1.06; }
    100% { scale: 1 1; }
}
.bee-home .bee-art {
    position: absolute;
    inset: 0;
    transform: scaleX(var(--face));
    transition: transform .5s;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}
.bee-home .bee-art > svg,
.bee-home .bee-art > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* the artist's bee faces left (mine faces right), so his is turned the other way round */
.bee-home .bee-art.has-art {
    transform: scaleX(calc(var(--face) * -1));
}
/* his pieces, one on the other: the body, its face, and the face's mouth-open twin (on each buzz, if he's drawn one) */
.bee-home .bee-art > img {
    position: absolute;
    inset: 0;
}
/* where the faces sit on the body: every face moved together, in shares of the bee's width / height (in his picture's own
   left and right: more = further right, into the head). 0 0 = exactly where they're drawn on the canvas */
.bee-home .bee-art > img.face,
.bee-home .bee-art > img.face-talk {
    translate: calc(var(--bee-face-x, 3) * 1%) calc(var(--bee-face-y, 0) * 1%);
}
/* where the faces sit on the body: every face moved together, in shares of the bee's width / height (in his picture's own
   left and right: more x = further right, into the head; more y = lower). 0 0 = exactly where they're drawn on the canvas */
.bee-home .bee-art > img.face,
.bee-home .bee-art > img.face-talk {
    translate: calc(var(--bee-face-x, 3) * 1%) calc(var(--bee-face-y, 3) * 1%);
}
.bee-home .bee-art > img.face-talk,
.bee-home.mouth-open .bee-art.has-talk > img.face {
    visibility: hidden;
}
.bee-home.mouth-open .bee-art.has-talk > img.face-talk {
    visibility: visible;
}
.bee-home .bee-art.has-art > svg,
.bee-home .bee-art:not(.has-art) > img,
.bee-home .bee-art > img[hidden] {
    display: none;
}
.bee-home[data-mood=scared] .bee-art {
    animation: bee-tremble .09s linear infinite;
}
@keyframes bee-tremble {
    0%, 100% { translate: 0 0; }
    50%      { translate: 1.5% -1%; }
}
/* how it feels, in colour: redder when furious, duller when sad, pale with fright */
.bee-home[data-mood=excited] { --bee-y: #ffd02a; }
.bee-home[data-mood=loving]  { --bee-y: #f7c34c; }
.bee-home[data-mood=angry]   { --bee-y: #f08a3a; }
.bee-home[data-mood=sad]     { --bee-y: #d6bf6f; }
.bee-home[data-mood=scared]  { --bee-y: #f6df8c; }
.bee-home[data-mood=sleepy]  { --bee-y: #e2c25c; }
.bee-home[data-mood=angry] .bee-art { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)) drop-shadow(0 0 6px rgba(220, 70, 30, .55)); }
.bee-home[data-mood=sad] .bee-art.has-art img { filter: saturate(.7) brightness(.92); }
.bee-home[data-mood=angry] .bee-art.has-art img { filter: sepia(.35) saturate(1.6) hue-rotate(-18deg); }

/* the drawn bee's parts */
.bee-drawn * {
    transform-box: fill-box;
}
.bee-drawn .b-wing {
    transform-origin: 50% 95%;
    animation: bee-flap var(--flap, .1s) linear infinite alternate;
}
.bee-drawn .w-back {
    animation-delay: calc(var(--flap, .1s) * -.5);
}
@keyframes bee-flap {
    from { transform: scaleY(1) rotate(0deg); }
    to   { transform: scaleY(.32) rotate(-10deg); }
}
.bee-home.buzzing .bee-drawn .b-wing {
    animation-duration: calc(var(--flap, .1s) * .55);
}
.bee-drawn .b-ant {
    transform-origin: 40% 100%;
    animation: bee-ant 2.6s ease-in-out infinite;
}
@keyframes bee-ant {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-7deg); }
}
.bee-home[data-mood=curious] .b-ant,
.bee-home[data-mood=excited] .b-ant { animation-duration: .9s; }
.bee-home[data-mood=sleepy] .b-ant,
.bee-home[data-mood=sad] .b-ant { animation: none; transform: rotate(14deg); transform-origin: 40% 100%; }

/* its eyes: wide open, smiling (^), shut, or hearts */
.bee-drawn .e-happy,
.bee-drawn .e-shut,
.bee-drawn .e-heart { display: none; }
.bee-home[data-mood=happy] .e-open,
.bee-home[data-mood=loving] .e-open,
.bee-home[data-mood=sleepy] .e-open { display: none; }
.bee-home[data-mood=happy] .e-happy,
.bee-home[data-mood=sleepy] .e-shut,
.bee-home[data-mood=loving] .e-heart { display: inline; }
.bee-drawn .b-pupil { transform-origin: 50% 50%; transition: transform .3s; }
.bee-home[data-mood=excited] .b-pupil { transform: scale(1.18); }
.bee-home[data-mood=scared] .b-pupil  { transform: scale(.6); }
.bee-home[data-mood=curious] .b-pupil { transform: translate(-1px, -1.5px); }
.bee-home[data-mood=loving] .e-heart  { transform-origin: 50% 50%; animation: bee-beat 1.1s ease-in-out infinite; }
@keyframes bee-beat {
    0%, 100% { transform: scale(1); }
    30%      { transform: scale(1.18); }
}
/* its brow: down at the front when furious, up when sad or frightened, raised when it wonders */
.bee-drawn .b-brow { transform-origin: 50% 50%; transition: transform .3s; }
.bee-home[data-mood=angry] .b-brow   { transform: translate(-1px, 3px) rotate(17deg); }
.bee-home[data-mood=sad] .b-brow     { transform: translateY(1px) rotate(-16deg); }
.bee-home[data-mood=scared] .b-brow  { transform: translateY(-3px) rotate(-8deg); }
.bee-home[data-mood=curious] .b-brow { transform: translateY(-4px) rotate(-9deg); }
.bee-home[data-mood=excited] .b-brow { transform: translateY(-3px); }
.bee-home[data-mood=sleepy] .b-brow  { transform: translateY(2px); }
/* its cheeks */
.bee-drawn .b-cheek { opacity: .35; transition: opacity .3s; }
.bee-home[data-mood=happy] .b-cheek,
.bee-home[data-mood=excited] .b-cheek { opacity: .6; }
.bee-home[data-mood=loving] .b-cheek  { opacity: .95; }
/* its mouth: a smile (a frown when sad or cross), open with each buzz */
.bee-drawn .b-mouth {
    transform-origin: 50% 50%;
    opacity: calc(1 - var(--mouth) * 4);
}
.bee-home[data-mood=sad] .b-mouth,
.bee-home[data-mood=angry] .b-mouth,
.bee-home[data-mood=scared] .b-mouth { transform: scaleY(-1); }
.bee-drawn .b-mouth-open {
    transform-origin: 50% 0;
    transform: scaleY(calc(.35 + var(--mouth) * .9));
    opacity: calc(var(--mouth) * 4);
    transition: transform .06s;
}
/* a tear when it's sad, a bead of sweat when it's frightened */
.bee-drawn .b-tear,
.bee-drawn .b-sweat { opacity: 0; }
.bee-home[data-mood=sad] .b-tear {
    opacity: 1;
    animation: bee-drip 2.4s ease-in infinite;
}
.bee-home[data-mood=scared] .b-sweat {
    opacity: 1;
    animation: bee-drip 1.6s ease-in infinite;
}
@keyframes bee-drip {
    0%   { transform: translateY(0); opacity: 0; }
    15%  { opacity: 1; }
    80%  { transform: translateY(70%); opacity: 1; }
    100% { transform: translateY(90%); opacity: 0; }
}

/* the little puffs it lets off: hearts, tears, steam, sweat, zZz, sparks, ?, a zap */
/* its little marks come out of its face: a box centred on the face (at the front, whichever way it's facing), the marks
   placed round it like in a cartoon. --fx-x / --fx-y: where the face is, from the middle of the bee (shares of its size) */
.bee-home .bee-fx {
    --fx-x: 27%;
    --fx-y: 0%;
    position: absolute;
    left: calc(50% + var(--face) * var(--fx-x));
    top: calc(50% + var(--fx-y));
    width: 36%;
    aspect-ratio: 1;
    translate: -50% -50%;
    pointer-events: none;
}
/* the artist's bee: its face is further forward, a little lower (bee-face's own spot, nudged like the faces) */
.bee-home .bee-art.has-art ~ .bee-fx {
    --fx-x: 38%;
    --fx-y: 3%;
}
/* one mark: where it starts (--x0 forwards, --y0 down, shares of the face's box; turned round with the bee), how big */
.bee-home .bee-p {
    --x0: 25%;
    --y0: -95%;
    position: absolute;
    left: calc(50% + var(--face) * var(--x0) + var(--jx, 0%));
    top: calc(50% + var(--y0) + var(--jy, 0%));
    width: 62%;
    aspect-ratio: 1;
    translate: -50% -50%;
    opacity: 0;
    animation: bee-float 1.9s ease-out forwards;
}
.bee-home .bee-p > svg,
.bee-home .bee-p > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* hearts, notes, Zzz: float up and forwards, swaying */
@keyframes bee-float {
    0%   { transform: translate(0, 0) scale(.3) rotate(0deg); opacity: 0; }
    15%  { opacity: 1; transform: translate(calc(var(--face) * var(--dx) * .15), calc(var(--dy) * .15)) scale(1.1) rotate(calc(var(--r) * .3)); }
    25%  { transform: translate(calc(var(--face) * var(--dx) * .25), calc(var(--dy) * .25)) scale(1) rotate(calc(var(--r) * .4)); }
    60%  { opacity: 1; transform: translate(calc(var(--face) * var(--dx) * .6 + 8%), calc(var(--dy) * .6)) scale(.95) rotate(calc(var(--r) * -.4)); }
    100% { transform: translate(calc(var(--face) * var(--dx)), var(--dy)) scale(.85) rotate(var(--r)); opacity: 0; }
}
.bee-home .bee-p.fx-heart { --x0: 30%; --y0: -80%; }
.bee-home .bee-p.fx-note  { --x0: 40%; --y0: -90%; }
.bee-home .bee-p.fx-zzz   { --x0: 10%; --y0: -105%; width: 50%; animation-duration: 2.4s; animation-timing-function: ease-in-out; }

/* the cross vein: pops on its forehead and throbs, staying put */
.bee-home .bee-p.fx-vein {
    --x0: -5%;
    --y0: -78%;
    width: 58%;
    animation: bee-pop-throb 1.8s ease-out forwards;
}
@keyframes bee-pop-throb {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    12%  { transform: scale(1.35) rotate(6deg); opacity: 1; }
    22%  { transform: scale(.9) rotate(0deg); }
    34%  { transform: scale(1.15); }
    46%  { transform: scale(.95); }
    58%  { transform: scale(1.12); }
    72%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(.9); opacity: 0; }
}
/* the question mark: pops up over its head with a little bounce and tilt */
.bee-home .bee-p.fx-question {
    --x0: 15%;
    --y0: -110%;
    animation: bee-pop-tilt 1.9s ease-out forwards;
}
@keyframes bee-pop-tilt {
    0%   { transform: translateY(30%) scale(0); opacity: 0; }
    14%  { transform: translateY(-12%) scale(1.25) rotate(calc(var(--r) * .6)); opacity: 1; }
    26%  { transform: translateY(0) scale(1) rotate(var(--r)); }
    75%  { transform: translateY(-6%) scale(1) rotate(calc(var(--r) * -.4)); opacity: 1; }
    100% { transform: translateY(-16%) scale(.9); opacity: 0; }
}
/* sparkles: twinkle round its face, turning */
.bee-home .bee-p.fx-spark {
    --x0: 35%;
    --y0: -55%;
    width: 50%;
    animation: bee-twinkle 1.3s ease-in-out forwards;
}
@keyframes bee-twinkle {
    0%   { transform: scale(0) rotate(0deg); opacity: 0; }
    25%  { transform: scale(1.2) rotate(45deg); opacity: 1; }
    45%  { transform: scale(.6) rotate(90deg); }
    65%  { transform: scale(1.05) rotate(135deg); opacity: 1; }
    100% { transform: translate(calc(var(--face) * var(--dx) * .3), calc(var(--dy) * .3)) scale(0) rotate(200deg); opacity: 0; }
}
/* the big sweat drop: appears on the side of its head and slides slowly down */
.bee-home .bee-p.fx-sweat {
    --x0: -30%;
    --y0: -62%;
    width: 46%;
    animation: bee-slide 1.9s ease-in forwards;
}
@keyframes bee-slide {
    0%   { transform: scale(.2); opacity: 0; }
    14%  { transform: scale(1.1); opacity: 1; }
    24%  { transform: scale(1); }
    80%  { transform: translateY(40%) scale(1); opacity: 1; }
    100% { transform: translateY(55%) scale(.95); opacity: 0; }
}
/* a tear: wells at its eye and falls */
.bee-home .bee-p.fx-tear {
    --x0: 5%;
    --y0: 5%;
    width: 36%;
    animation: bee-fall 1.6s ease-in forwards;
}
@keyframes bee-fall {
    0%   { transform: scale(.3); opacity: 0; }
    25%  { transform: scale(1); opacity: 1; }
    100% { transform: translate(calc(var(--face) * var(--dx) * .2), 220%) scale(.8); opacity: 0; }
}
/* a huff of steam: blown out in front of its face, swelling as it goes */
.bee-home .bee-p.fx-steam {
    --x0: 60%;
    --y0: 15%;
    width: 52%;
    animation: bee-huff 1.1s ease-out forwards;
}
@keyframes bee-huff {
    0%   { transform: scale(.2); opacity: 0; }
    20%  { transform: translate(calc(var(--face) * 40%), 0) scale(.9); opacity: 1; }
    100% { transform: translate(calc(var(--face) * 130%), -30%) scale(1.5); opacity: 0; }
}
/* the jolt of a sting: a flash, right at its front */
.bee-home .bee-p.fx-zap {
    --x0: 70%;
    --y0: 20%;
    width: 80%;
    animation: bee-flash .9s ease-out forwards;
}
@keyframes bee-flash {
    0%   { transform: scale(.2) rotate(0deg); opacity: 0; }
    20%  { transform: scale(1.3) rotate(20deg); opacity: 1; }
    50%  { transform: scale(.9) rotate(30deg); opacity: 1; }
    100% { transform: scale(1.4) rotate(45deg); opacity: 0; }
}

/* its shadow on the ground (bee.js shade): a soft dark oval under it, smaller, blurrier and fainter the higher it flies
   (--sh, --sh-blur), and fainter still at night. just before the trail, so behind everything of the bee's */
.bee-shadow {
    position: absolute;
    aspect-ratio: 4 / 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(20, 14, 10, .85), rgba(20, 14, 10, .5) 55%, rgba(20, 14, 10, 0));
    filter: blur(var(--sh-blur, 2px));
    opacity: calc(var(--sh, .4) * (1 - .55 * var(--dusk, 0)));
    pointer-events: none;
}
.bee-shadow.has-art {
    background: none;
    border-radius: 0;
    aspect-ratio: auto;
}
.bee-shadow > img {
    display: block;
    width: 100%;
    height: auto;
}
.front .bee-shadow { z-index: 2; }
.porch .bee-shadow { z-index: 1; }

/* the dotted trail it leaves as it flies (bee.js fly/drop): dots dropped behind its tail, each fading as it shrinks.
   the layer sits just before the bee, so the dots are behind it (slot: assets/living/bee-trail, one dot) */
.bee-trail {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.front .bee-trail { z-index: 2; }
.porch .bee-trail { z-index: 1; }
.bee-trail .bee-dot {
    position: absolute;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: #fff4d6;
    box-shadow: 0 0 0 1.5px rgba(42, 29, 20, .45), 0 0 5px rgba(255, 236, 170, .6);
    animation: bee-dot 2.8s ease-out forwards;
}
.bee-trail .bee-dot:has(img) {
    background: none;
    box-shadow: none;
    border-radius: 0;
}
.bee-trail .bee-dot > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@keyframes bee-dot {
    0%   { opacity: .9; scale: 1; }
    100% { opacity: 0; scale: .35; }
}

/* what it's saying, over its head */
.bee-home .bee-bubble {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translate(-50%, 6px);
    max-width: 34vw;
    padding: 3px 11px 4px;
    border-radius: 12px;
    background: #f6ecd2;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
    color: #5b3a12;
    font: italic clamp(.85rem, 1.2vw, 1.1rem) "IM Fell English", Georgia, serif;
    white-space: nowrap;
    overflow: hidden;
    direction: rtl;                       /* (the newest words stay in view; the oldest slip off the left) */
    opacity: 0;
    transition: opacity .3s, transform .3s;
    pointer-events: none;
}
.bee-home .bee-bubble span {
    direction: ltr;
    unicode-bidi: plaintext;
}
.bee-home.saying .bee-bubble:not(:empty) {
    opacity: 1;
    transform: translate(-50%, 0);
}
.bee-home .bee-bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #f6ecd2;
}

@media (prefers-reduced-motion: reduce) {
    .bee-home .bee-fly,
    .bee-drawn .b-wing,
    .bee-drawn .b-ant,
    .bee-home .bee-art { animation: none !important; }
}

/* =====================================================================
   talking to it: its menu (a page torn from the notebook)
   ===================================================================== */
.bee-talk {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 8;
    display: flex;
    flex-direction: column;
    width: min(400px, calc(100vw - 40px));
    max-height: min(76vh, 640px);
    padding: 12px 14px 10px;
    border-radius: 6px;
    background: #efe3c6 radial-gradient(ellipse at 40% 25%, #f7eed8, transparent 70%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 22px rgba(120, 80, 30, .22);
    color: #3a2716;
    font-family: "IM Fell English", Georgia, serif;
    visibility: hidden;
    opacity: 0;
    transform: translateY(16px) rotate(-.6deg);
    transition: opacity .35s, transform .35s, visibility 0s .35s;
}
.bee-talk.on {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) rotate(-.6deg);
    transition: opacity .35s, transform .35s;
}
.bee-talk .bt-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(110, 82, 54, .3);
}
.bee-talk .bt-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.bee-talk .bt-title b {
    font: normal 1.35rem "IM Fell English SC", Georgia, serif;
}
.bee-talk .bt-mood {
    color: #6e5236;
    font-size: .95rem;
}
.bee-talk .bt-modes {
    display: flex;
    padding: 3px;
    border-radius: 999px;
    background: #e2d2ac;
    box-shadow: inset 0 0 8px rgba(120, 80, 30, .25);
}
.bee-talk .bt-modes button,
.bee-talk .bt-x,
.bee-talk .bt-row button {
    border: 0;
    background: none;
    color: #6e5236;
    cursor: pointer;
    font: italic 1rem "IM Fell English", Georgia, serif;
}
/* the sing switch: a music note (yours, assets/living/bee-sing, or the drawn one) */
.bee-talk .bt-modes .bt-sing-ic {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -.25em;
}
.bee-talk .bt-modes .bt-sing-ic > svg,
.bee-talk .bt-modes .bt-sing-ic > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bee-talk .bt-modes button[data-mode=sing] {
    padding-left: 10px;
    padding-right: 10px;
}
.bee-talk .bt-modes button {
    padding: 3px 12px;
    border-radius: 999px;
}
.bee-talk .bt-modes button[aria-pressed=true] {
    background: #3a2716;
    color: #f3e6c2;
}
.bee-talk .bt-x {
    padding: 4px 6px;
    font-style: normal;
}
.bee-talk .bt-x:hover,
.bee-talk .bt-modes button:hover:not([aria-pressed=true]) {
    color: #3a2716;
}
.bee-talk .bt-log {
    flex: 1;
    min-height: 120px;
    margin: 8px 0;
    padding: 4px 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 6px;
    -webkit-user-select: text;
    user-select: text;
}
.bee-talk .bt-log p {
    margin: 0;
    max-width: 86%;
    padding: 4px 11px 5px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.bee-talk .bt-you {
    align-self: flex-end;
    border-radius: 12px 12px 3px 12px;
    background: rgba(110, 82, 54, .13);
}
.bee-talk .bt-bee {
    align-self: flex-start;
    border-radius: 12px 12px 12px 3px;
    background: #f6dd8a;
    color: #5b3a12;
    font-style: italic;
    letter-spacing: .02em;
    min-height: 1.35em;
    min-width: 2.2em;
}
.bee-talk .bt-bee.sung::before { content: "♪ "; }
.bee-talk .bt-bee.dread { background: #3a1712 !important; color: #f2c7a8 !important; }
.bee-talk .bt-bee[data-mood=excited] { background: #ffd968; }
.bee-talk .bt-bee[data-mood=loving]  { background: #f6c6cf; }
.bee-talk .bt-bee[data-mood=angry]   { background: #f2ac85; color: #5a1d0e; }
.bee-talk .bt-bee[data-mood=sad]     { background: #d5dde6; color: #2f3c4a; }
.bee-talk .bt-bee[data-mood=scared]  { background: #e6efc4; }
.bee-talk .bt-bee[data-mood=sleepy]  { background: #e3d9f0; color: #3e3354; }
.bee-talk .bt-bee[data-mood=curious] { background: #d6ecdc; color: #23422e; }
.bee-talk .bt-bee[data-mood=calm]    { background: #efe0b4; }
.bee-talk .bt-note,
.bee-talk .bt-poke {
    align-self: center;
    color: #8a6a48;
    font-size: .9rem;
    font-style: italic;
}
.bee-talk .bt-say {
    display: flex;
    gap: 8px;
}
.bee-talk .bt-say input {
    flex: 1;
    min-width: 0;
    padding: 6px 4px;
    border: 0;
    border-bottom: 1.5px solid rgba(58, 39, 22, .55);
    background: transparent;
    color: #3a2716;
    font: 1.05rem "IM Fell English", Georgia, serif;
    outline: none;
}
.bee-talk .bt-say input::placeholder {
    color: #9a7e5c;
    font-style: italic;
}
.bee-talk .bt-say input:focus {
    border-bottom-color: #9a3b1f;
}
.bee-talk .bt-say button {
    padding: 5px 16px;
    border: 0;
    border-radius: 999px;
    background: #3a2716;
    color: #f3e6c2;
    cursor: pointer;
    font: italic 1rem "IM Fell English", Georgia, serif;
}
.bee-talk .bt-say button:hover {
    background: #9a3b1f;
}
.bee-talk .bt-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}
.bee-talk:not(.singing) .bt-row:has(.bt-hush[hidden]) {
    display: none;
}
.bee-talk .bt-sing {
    display: none;
}
.bee-talk.singing .bt-sing {
    display: inline-block;
}
.bee-talk .bt-row button {
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(110, 82, 54, .12);
}
.bee-talk .bt-row button:hover {
    background: rgba(110, 82, 54, .22);
    color: #3a2716;
}
.bee-talk .bt-hush {
    margin-left: auto;
}
.bee-talk .bt-foot {
    margin: 8px 0 0;
    color: #8a6a48;
    font-size: .78rem;
    font-style: italic;
    line-height: 1.3;
}

/* while it's talking, the hotbar stays out of the way */
body.bee-talking .hotbar {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 620px) {
    .bee-talk {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        max-height: 52vh;
        padding: 10px 12px 8px;
    }
    .bee-talk .bt-log { min-height: 80px; }
    .bee-talk .bt-foot { font-size: .72rem; }
    .bee-home .bee-bubble { max-width: 70vw; }
}
@media (max-height: 500px) and (min-width: 621px) {
    .bee-talk {
        left: 8px;
        top: 8px;
        bottom: 8px;
        width: 46vw;
        max-height: none;
        padding: 8px 12px;
    }
    .bee-talk .bt-log { min-height: 60px; }
    .bee-talk .bt-foot { display: none; }
}

/* ---------------- the revolver (bee.js): it won't be shot ---------------- */
/* weaving out of the gun's sights (bee.js sets --dodge-x/y every frame while you aim) */
.bee-home .bee,
.bee-home .bee-bubble {
    translate: var(--dodge-x, 0px) var(--dodge-y, 0px);
}
/* coming straight at you, to sting */
.bee-home.diving .bee {
    animation: bee-dive .8s cubic-bezier(.3, 0, .3, 1);
}
@keyframes bee-dive {
    0%   { scale: 1; }
    30%  { scale: 2.6; }
    50%  { scale: 2.6; }
    100% { scale: 1; }
}
/* flying at the traveller to sting them (reset 1, bee.js strike): back a little, straight at them (--strike-x/y), a jab,
   and home again */
.bee-home.striking .bee {
    animation: bee-strike 1.5s cubic-bezier(.45, 0, .3, 1);
}
@keyframes bee-strike {
    0%   { translate: 0 0; scale: 1; }
    22%  { translate: calc(var(--strike-x) * -.12) calc(var(--strike-y) * -.12 - 6%); scale: 1.08; }
    41%  { translate: var(--strike-x) var(--strike-y); scale: 1.35; }
    47%  { translate: calc(var(--strike-x) * .94) calc(var(--strike-y) * .94); scale: 1.2; }
    53%  { translate: var(--strike-x) var(--strike-y); scale: 1.3; }
    70%  { translate: calc(var(--strike-x) * .8) calc(var(--strike-y) * .8 - 8%); scale: 1.1; }
    100% { translate: 0 0; scale: 1; }
}
/* firing it (reset 1, bee.js stingToDeath): the gun kicks, and the shot (bee.js muzzleFlash, laid over the whole screen):
   a starburst at the muzzle flaring towards the traveller (--ang), a streak of light across to them (--len), the screen lit */
.bee-shot {
    position: fixed;
    inset: 0;
    z-index: 2147470000;
    pointer-events: none;
}
.bee-shot .bs-screen {
    position: absolute;
    inset: 0;
    background: #fff4d0;
    opacity: 0;
    animation: bs-screen .4s ease-out;
}
@keyframes bs-screen {
    0%   { opacity: .5; }
    100% { opacity: 0; }
}
.bee-shot .bs-streak {
    position: absolute;
    left: var(--mx);
    top: var(--my);
    width: var(--len);
    height: 5px;
    border-radius: 3px;
    transform-origin: 0 50%;
    translate: 0 -50%;
    rotate: calc(var(--ang) * 1rad);
    background: linear-gradient(90deg, #fff 0%, #ffe680 40%, rgba(255, 190, 60, .2));
    box-shadow: 0 0 8px 2px rgba(255, 220, 120, .8);
    opacity: 0;
    animation: bs-streak .32s ease-out;
}
@keyframes bs-streak {
    0%   { opacity: 1; scale: .1 1; }
    35%  { opacity: 1; scale: 1 1; }
    100% { opacity: 0; scale: 1 .4; }
}
.bee-shot .bs-burst {
    position: absolute;
    left: var(--mx);
    top: var(--my);
    width: var(--fs);
    aspect-ratio: 1;
    transform-origin: 30% 50%;
    translate: -30% -50%;
    rotate: calc(var(--ang) * 1rad);
    filter: drop-shadow(0 0 10px rgba(255, 200, 80, .9));
    opacity: 0;
    animation: bs-burst .38s ease-out;
}
.bee-shot .bs-burst > svg,
.bee-shot .bs-burst > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@keyframes bs-burst {
    0%   { opacity: 1; scale: .35; }
    25%  { opacity: 1; scale: 1.15; }
    100% { opacity: 0; scale: 1.45; }
}
.bee-home.firing .bee-gun > * {
    animation: bee-kick .3s ease-out;
}
@keyframes bee-kick {
    0%   { translate: 0 0; }
    30%  { translate: 0 -14%; }
    100% { translate: 0 0; }
}
/* your gun, in its hands, the muzzle on you (slot assets/living/bee-gun), turning to follow you, shaking with rage */
.bee-home .bee-gun {
    position: absolute;
    left: calc(34% - (1 - var(--face)) * 10%);
    top: 36%;
    width: 56%;
    aspect-ratio: 60 / 66;
    display: none;
    pointer-events: none;
    transform: scaleX(var(--face));                 /* (11 Oct: it turns round with the bee, as the bee turns to fly the other way) */
    transition: left .5s, transform .5s;
}
.bee-home.armed .bee-gun {
    display: block;
    animation: bee-gun-shake .18s steps(2) infinite;
}
.bee-home .bee-gun > svg,
.bee-home .bee-gun > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: perspective(140px) rotateY(calc(var(--aim-x, 0) * var(--face) * 22deg)) rotateX(calc(var(--aim-y, 0) * -22deg));   /* (× face: still at you, turned round) */
    transition: transform .25s ease-out;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4));
}
@keyframes bee-gun-shake {
    0%   { translate: 0 0; }
    100% { translate: 1px -1px; }
}
/* the gun's spot (the wall, the roof) stays empty while the bee's got it, or once it's broken it */
.pickup.with-bee {
    display: none !important;
}
/* bits of gun, falling */
.bee-scrap {
    position: fixed;
    z-index: 9000;
    width: 9px;
    height: 6px;
    background: #8d8f96;
    border: 1px solid #2a1d14;
    border-radius: 1px;
    pointer-events: none;
}

/* the hand over it (11 Oct): a poking finger over its body, a patting hand over its head (bee.js onHead sets
   .on-head; the hands are sky.js's cursor-poke and cursor-pat, with the click squeeze every cursor has) */
html body:not(.inv-holding) .bee-home .bee,
html body:not(.inv-holding) .bee-home .bee * {
    cursor: var(--cursor-poke, pointer) !important;
}
html body:not(.inv-holding) .bee-home.on-head .bee,
html body:not(.inv-holding) .bee-home.on-head .bee * {
    cursor: var(--cursor-pat, pointer) !important;
}
/* patted: it dips under your hand, squashes, and bobs back up */
.bee-home .bee-pose.patted .bee-art {
    animation: bee-patted .5s ease-out;
}
@keyframes bee-patted {
    0%   { translate: 0 0;   scale: 1 1; }
    30%  { translate: 0 7%;  scale: 1.1 .86; }
    62%  { translate: 0 -3%; scale: .97 1.05; }
    100% { translate: 0 0;   scale: 1 1; }
}