.mascot-section{max-width:1280px;margin:70px auto;padding:28px}.mascot-section h2{margin:12px 0}.mascot-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.mascot-options button{border:1px solid #e5dfd5;border-radius:20px;background:#fff;padding:12px;color:#173f4b;font:inherit;cursor:pointer}.mascot-options button[aria-pressed=true]{border:2px solid #bd6044;background:#fff4ee}.mascot-portrait{display:block;aspect-ratio:1;background-image:url('/assets/mascots.png');background-size:300% 200%;background-position:var(--mx) var(--my);background-repeat:no-repeat;width:100%}.mascot-options strong{display:block;font-size:14px;margin-top:10px}.mascot-note{font-size:13px;color:#6b7f84}.mascot-widget{position:fixed;right:24px;bottom:0;z-index:30;width:220px;color:#173f4b}.mascot-greeting{position:relative;background:#fff;border:1px solid #e5dfd5;border-radius:20px;padding:22px 16px 14px;box-shadow:0 8px 32px #173f4b18;font-size:14px}.mascot-greeting p{font-size:13px;margin:8px 0}.mascot-greeting a{display:block;font-size:12px;margin-top:10px;color:#173f4b;text-decoration:underline}.mascot-close{position:absolute;right:5px;top:2px;background:none;border:0;font-size:22px;padding:4px 8px;cursor:pointer}.mascot-search{border:0;border-radius:18px;background:#bd6044;color:white;padding:10px 14px;cursor:pointer;font:inherit;font-size:13px}.mascot-welcome{width:190px;margin-left:auto;transform-origin:bottom center;animation:mascot-hello 1.4s ease-out 1}.mascot-launch{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #e5dfd5;border-radius:30px;box-shadow:0 4px 20px #173f4b18;padding:4px 14px 4px 4px;margin:0 0 16px auto;color:#173f4b;cursor:pointer}.mascot-launch .mascot-portrait{width:46px}.mascot-launch span:last-child{font-size:12px}body:has(dialog[open]) .mascot-widget{visibility:hidden}@keyframes mascot-hello{0%{transform:translateY(100%)}55%{transform:translateY(0) rotate(-4deg)}75%{transform:rotate(3deg)}100%{transform:rotate(0)}}@media(max-width:700px){.mascot-options{grid-template-columns:repeat(3,minmax(0,1fr))}.mascot-widget{right:12px;width:190px}.mascot-welcome{width:120px}.mascot-greeting{padding:22px 12px 12px}.mascot-section{padding:20px}}@media(prefers-reduced-motion:reduce){.mascot-welcome{animation:none}}
.mascot-widget{background:transparent;border:0;box-shadow:none;border-radius:0}

/* Separate the raised forearm from the still torso for a short welcome wave. */
.mascot-welcome.mascot-waving{position:relative;animation:mascot-arrive .5s ease-out both}
.mascot-waving>.mascot-portrait{clip-path:polygon(32% 0,100% 0,100% 100%,0 100%,0 58%,25% 58%,32% 40%)}
.mascot-wave-hand{position:absolute;inset:0;transform-origin:20% 57%;animation:mascot-hand-wave 2.4s ease-in-out .5s 1 both;pointer-events:none}
.mascot-wave-hand>.mascot-portrait{clip-path:polygon(0 0,32% 0,32% 40%,25% 59%,0 59%)}
@keyframes mascot-arrive{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes mascot-hand-wave{0%,100%{transform:rotate(0)}15%,45%,75%{transform:rotate(-13deg)}30%,60%,90%{transform:rotate(9deg)}}
@media(prefers-reduced-motion:reduce){.mascot-welcome.mascot-waving,.mascot-wave-hand{animation:none}}

button.mascot-welcome{display:block;padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation}
button.mascot-welcome:focus-visible{outline:3px solid #bd6044;outline-offset:3px;border-radius:20px}

/* Let the torso continue below the viewport, without moving the closed launcher. */
button.mascot-welcome{margin:0 0 -24px auto}
@media(max-width:700px){button.mascot-welcome{margin-bottom:-16px}}
/* Exclude the neighbouring sprite’s fingers from the harbour captain tile. */
.mascot-portrait-5{clip-path:inset(0 0 0 4%)}

.mascot-role{display:block;margin-top:5px;font-size:11px;line-height:1.4;color:#6b7f84}.mascot-options button{display:flex;flex-direction:column;align-items:center}.mascot-options strong{min-height:1.4em}