@font-face { font-family: Fredoka; src: url('menu-font-0205bfa077cd.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }
:root { color-scheme: light; --ink: #233e49; --paper: #faf6eb; --teal: #16796e; --coral: #ed86b5; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: var(--paper); }
body { overflow: hidden; color: var(--ink); font-family: system-ui, sans-serif; touch-action: none; }
#canvas { display: block; border: 0; margin: 0; padding: 0; outline: none; }
#status { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; padding: max(24px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 16% 73%, #e4efdc 0, transparent 53%), var(--paper); overflow-y: auto; touch-action: pan-y; transition: opacity 240ms ease; }
#status.leaving { opacity: 0; pointer-events: none; }
.loader-header, .loader-footer { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; gap: 24px; }
.language-picker { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 650; }
.language-picker select { min-height: 48px; padding: 10px 14px; border: 2px solid #d7e2d8; border-radius: 14px; color: var(--ink); background: #f8faf4; font: inherit; touch-action: manipulation; }
.language-picker select:focus-visible { outline: 3px solid #7864bf; outline-offset: 3px; }
.wordmark { display: flex; align-items: center; gap: 14px; font: 600 25px/.96 Fredoka, system-ui, sans-serif; letter-spacing: .15px; }
.brand-star { display: grid; place-items: center; background: #f7c65c; border-radius: 17px; width: 57px; height: 58px; font: 38px/1 system-ui, sans-serif; transform: rotate(-6deg); }
.motion-toggle, .retry-button { color: var(--ink); font: 650 15px/1.3 system-ui, sans-serif; border: 0; border-radius: 14px; padding: 14px 19px; min-height: 48px; background: #e7eee4; cursor: pointer; }
button:focus-visible, summary:focus-visible { outline: 3px solid #7864bf; outline-offset: 4px; }
.loader-main { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: clamp(16px, 3vw, 52px); width: min(1240px, 100%); margin: auto; padding: 22px 0 28px; }
.adventure-art { display: grid; grid-template-columns: 1fr; align-items: center; gap: 20px; min-width: 0; }
.island-caption { display: block; margin-top: 16px; color: var(--teal); font-size: 11px; letter-spacing: .8px; font-weight: 750; text-align: center; }
.island-art { min-width: 0; position: relative; }
.island-art::before { content: ''; position: absolute; inset: 5% 3% 8%; z-index: -1; border-radius: 50%; background: #e8efdb; }
.island-art img { width: 100%; height: auto; display: block; animation: island-float 4.5s ease-in-out infinite; }
.loading-copy { padding: 20px 0; min-width: 0; }
.eyebrow { font-size: 12px; letter-spacing: 1.7px; font-weight: 800; color: var(--teal); margin: 0 0 17px; }
h1 { font: 600 clamp(36px, 4.5vw, 61px)/1.02 Fredoka, system-ui, sans-serif; letter-spacing: -.8px; margin: 0; }
h1 em { color: #ad407c; font-style: normal; }
#loader-joke { color: #617578; font-size: 16px; line-height: 1.5; margin: 20px 0 30px; min-height: 48px; max-width: 370px; }
#load-meter { max-width: 420px; }
.progress-caption { display: flex; justify-content: space-between; gap: 18px; font-size: 14px; font-weight: 650; color: var(--teal); margin: 0 0 12px; min-height: 21px; }
#load-percent { font-variant-numeric: tabular-nums; }
progress { width: 100%; height: 14px; display: block; border: 0; border-radius: 12px; overflow: hidden; background: #dde7d9; appearance: none; }
progress::-webkit-progress-bar { background: #dde7d9; border-radius: 12px; }
progress::-webkit-progress-value { border-radius: 12px; background: linear-gradient(90deg, #ed86b5, #43c6cf); transition: width 180ms ease; }
progress::-moz-progress-bar { border-radius: 12px; background: linear-gradient(90deg, #ed86b5, #43c6cf); }
progress:indeterminate { background: linear-gradient(90deg, #dde7d9 15%, #ed86b5 50%, #dde7d9 85%); background-size: 240% 100%; animation: loading 2.4s linear infinite; }
progress:indeterminate::-webkit-progress-bar { background: transparent; }
.loader-note { font-size: 12px; line-height: 1.5; color: #71817b; margin-top: 14px; max-width: 340px; }
.loader-footer { color: #617578; font-size: 11px; letter-spacing: 1px; }
.loader-footer span:first-child { font-weight: 750; color: var(--teal); }
#status-notice { font-size: 16px; line-height: 1.5; color: #617578; }
.retry-button { background: var(--coral); min-width: 240px; margin: 12px 0; }
#loader-details { font-size: 13px; line-height: 1.5; color: #617578; max-width: 420px; margin-top: 16px; }
#loader-error-detail { overflow-wrap: anywhere; }
summary { cursor: pointer; padding: 9px 0; }
[hidden] { display: none !important; }
@keyframes island-float { 0%,100% { transform: translateY(0) rotate(-.3deg); } 50% { transform: translateY(-8px) rotate(.3deg); } }
@keyframes loading { to { background-position: -240% 0; } }
html[data-calm=true] *, html[data-calm=true] *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .island-art img, progress { animation: none; } #status, progress::-webkit-progress-value { transition: none; } }
@media (max-aspect-ratio: 7/6) {
  .loader-main { grid-template-columns: 1fr; justify-items: center; gap: 0; padding: 10px 0; }
  .adventure-art { width: min(620px, 100%); gap: 18px; }
  .island-art { width: 100%; max-height: 38dvh; }
  .island-art img { max-height: 38dvh; object-fit: contain; }
  .loading-copy { text-align: center; padding: 4px 0 26px; width: min(480px, 100%); }
  h1 { font-size: clamp(32px, 6vw, 54px); }
  #loader-joke, #load-meter, .loader-note, #loader-details { margin-left: auto; margin-right: auto; }
  #loader-joke { margin-top: 16px; margin-bottom: 20px; min-height: 24px; }
}
@media (max-width: 600px), (max-height: 480px) {
  .loader-header { flex-wrap: wrap; gap: 12px; }
  .language-picker { gap: 6px; }
  #status { padding: 18px; }
  .wordmark { font-size: 18px; gap: 10px; }
  .brand-star { width: 44px; height: 44px; font-size: 29px; border-radius: 13px; }
  .motion-toggle { padding: 10px 13px; font-size: 13px; }
  .loader-footer { gap: 10px; font-size: 9px; }
}