/* Darklabs: the little robots (loaded only when they are switched on, or on the Word Lab where they are shown). Calm mode (html.calm) stops every movement. */


/* ---- the robots ---- */
.bot { position: relative; display: block; width: 52px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.bot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 8px; }
.botsvg { width: 100%; height: 100%; overflow: visible; }
.botsvg .b-arm-l, .botsvg .b-arm-r { transform-box: fill-box; transform-origin: 50% 8%; }
.botsvg .b-eye { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
.botsvg .b-bulb { animation: bulb 2.4s ease-in-out infinite; }
.botsvg .b-wheel { animation: none; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes bulb { 50% { opacity: .35; } }
@keyframes wheel { to { transform: rotate(360deg); } }
@keyframes hammer { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-80deg); } }
@keyframes nap { 50% { transform: translateY(2px) rotate(1.5deg); } }
@keyframes botglitch { 0% { transform: translate(0); filter: drop-shadow(3px 0 #ff2f6d) drop-shadow(-3px 0 #3cdcff); } 50% { transform: translate(2px, -1px) skewX(8deg); } 100% { transform: translate(0); filter: none; } }
.bot.glitch .botsvg { animation: botglitch .38s steps(3) 1; }
.bot.rolling .b-wheel { animation: wheel .45s linear infinite; }
.bot.fast .b-wheel { animation-duration: .18s; }
.bot.working .b-arm-r { animation: hammer .42s steps(3) infinite; }
.bot.nap .botsvg { animation: nap 3.2s ease-in-out infinite; }
.bot.nap .b-eye { animation: none; transform: scaleY(.15); }
.companion-wrap { position: fixed; left: 8px; bottom: 6px; z-index: 55; display: flex; flex-direction: column; align-items: center; pointer-events: none; transition: transform .25s linear; }
.companion-wrap > * { pointer-events: auto; }
.bot-name { margin-top: -2px; font: 700 .62rem/1 ui-monospace, Consolas, monospace; letter-spacing: .1em; color: #e8434f; text-shadow: 0 0 6px rgba(209, 18, 43, .7); background: rgba(8, 3, 4, .8); padding: 2px 5px; border-radius: 3px; }
#bot-say { position: fixed; z-index: 90; width: 260px; padding: 10px 12px 12px; border-radius: 6px; background: #0c0507; border: 1px solid rgba(209, 18, 43, .75); box-shadow: 0 14px 40px rgba(0, 0, 0, .8), 0 0 28px rgba(209, 18, 43, .3); color: #eadede; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .18s, transform .18s; font-size: .9rem; line-height: 1.45; }
#bot-say.on { opacity: 1; pointer-events: auto; transform: none; }
#bot-say b { display: block; font: 700 .72rem ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: #e8434f; margin-bottom: 4px; }
#bot-say p { margin: 0 0 6px; }
#bot-say a { color: #ff9aa5; font-weight: 600; }
.bot-credit { margin-top: .6rem; font-size: .82rem; color: #9c8a8a; }
.linklike { font: inherit; color: var(--red-soft, #e8434f); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.linklike:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 600px) { .companion-wrap { bottom: 2px; } .bot { width: 44px; height: 54px; } }
html.calm .companion-wrap { transform: none !important; }
html.calm .botsvg .b-eye { animation: none; }
@media print { .companion-wrap, #bot-say { display: none !important; } }