/* ── Akimi Islands — foundations ──────────────────────────────────────────
   Colours, typography and the reset. Everything else builds on this.
   Kid-friendly rules: nothing under 16px, nothing smaller than 44px to tap.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fredoka-latin.woff2') format('woff2');
}

:root {
  /* Ink & surfaces */
  --ink:        #1B2A38;
  --ink-soft:   #4A5C6B;
  --cream:      #FDFAF0;
  --white:      #FFFFFF;

  /* Playful accents */
  --gold:       #D9B25F;   /* coins — ties to the PACE brand gold */
  --gold-deep:  #B88F3C;
  --coral:      #FF7A6B;   /* stars */
  --coral-deep: #E0574A;
  --mint:       #4FD1A5;
  --sky:        #4FC3F7;
  --grape:      #8B7BE8;
  --sun:        #FFD166;

  /* Shape language — everything is round */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* Depth — soft, never harsh */
  --shadow-sm: 0 2px 0 rgba(27, 42, 56, .16);
  --shadow-md: 0 4px 0 rgba(27, 42, 56, .18), 0 8px 20px rgba(27, 42, 56, .16);
  --shadow-lg: 0 6px 0 rgba(27, 42, 56, .18), 0 16px 40px rgba(27, 42, 56, .22);

  --tap: 52px;              /* minimum tap target for small hands */
  --ease: cubic-bezier(.34, 1.56, .64, 1);   /* gentle overshoot */
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* The browser hides [hidden] elements with `display: none`, but any rule that
   sets `display` itself — every .btn, every flex row — quietly beats it and
   the element stays on screen. This makes `hidden` mean hidden, always. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: 'Fredoka', 'Segoe UI Variable Display', 'SF Pro Rounded',
               ui-rounded, 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  background: #7FD4F0;
  /* Stop iOS from selecting text or showing the magnifier during play */
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

body { font-size: 17px; line-height: 1.35; }

canvas#stage {
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  touch-action: none;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  min-height: var(--tap);
  padding: 12px 26px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn:hover  { transform: translateY(-2px); filter: brightness(1.04); }
.btn:active { transform: translateY(3px); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: 4px solid var(--grape); outline-offset: 3px; }

.btn--primary { background: var(--mint);  color: #08312A; }
.btn--sun     { background: var(--sun);   color: #4A3300; }
.btn--coral   { background: var(--coral); color: #fff; }
.btn--big     { font-size: 24px; padding: 18px 44px; min-height: 68px; }

/* Round icon button — used for mute, settings, close */
.icon-btn {
  width: var(--tap);
  height: var(--tap);
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-sm);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .18s var(--ease), background .18s;
}
.icon-btn:hover  { transform: scale(1.08); }
.icon-btn:active { transform: scale(.94); }
.icon-btn[aria-pressed="false"] { opacity: .55; }

/* ── Loading screen ───────────────────────────────────────────────────── */

#loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: linear-gradient(180deg, #8FE0F5 0%, #FFE9B8 100%);
  transition: opacity .6s ease, visibility .6s;
}
#loader.hidden { opacity: 0; visibility: hidden; }

.loader-mark { font-size: 68px; animation: bobble 2.2s ease-in-out infinite; }
.loader-name { font-size: 34px; font-weight: 700; letter-spacing: .5px; color: #0E4258; }
.loader-bar  { width: 220px; height: 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.55); overflow: hidden; }
.loader-fill { height: 100%; width: 0; border-radius: var(--r-pill); background: var(--mint); transition: width .4s ease; }
.loader-hint { font-size: 16px; color: #1C5771; opacity: .85; }

@keyframes bobble {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-12px) rotate(4deg); }
}

/* Anything that should not swallow taps meant for the 3D world */
.pass-through { pointer-events: none; }
.pass-through > * { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}