/* Fredoka (SIL Open Font License 1.1, bundled locally: no font service, no requests off this site). */
@font-face { font-family: Fredoka; src: url(fredoka.woff2) format('woff2'); font-weight: 300 700; font-display: block; }
/* Gully's Buoy Mix-Up v002: the canvas fills the screen. #sea catches taps on open water, sky and dock; task buttons
   and toy objects are real buttons laid over it. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #C1E2ED; }
body { font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: #1E3A5F; -webkit-tap-highlight-color: transparent; }
#stage-canvas { position: fixed; left: 0; top: 0; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
#sea { position: fixed; inset: 0; touch-action: none; }
#hot { position: fixed; inset: 0; pointer-events: none; }
#hot .hot { position: absolute; pointer-events: auto; background: transparent; border: 0; border-radius: 28px; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; }
#hot .hot:focus { outline: none; }
#hot .hot:focus-visible { outline: 6px solid #F2C23A; outline-offset: 4px; box-shadow: 0 0 0 10px rgba(30, 58, 95, 0.55); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: #C1E2ED; }
#loading > img { width: min(70vw, 600px); height: auto; }
#loading .row { display: flex; gap: 18px; }
#loading .row img { width: min(9vw, 64px); height: auto; opacity: 0.25; transform: translateY(14px); transition: opacity .3s, transform .4s cubic-bezier(.3,1.6,.5,1); }
#loading .row img.on { opacity: 1; transform: none; }