/* Fredoka (SIL Open Font License), bundled so it works offline. */
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --font: "Fredoka", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --pink: #ff6fa8;
  --pink-dark: #e04f8b;
  --ink: #4a2c3d;
  --gap-top: max(14px, env(safe-area-inset-top));
  --gap-side: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: #ffd9ef;
  font-family: var(--font);
  color: var(--ink);
  position: fixed;
  inset: 0;
}

canvas#game {
  position: absolute;
  inset: 0;
  display: block;
  touch-action: none;
}

[hidden] { display: none !important; }

button {
  font-family: var(--font);
  touch-action: manipulation;
  cursor: pointer;
}

/* ---- Screen overlays: only the buttons catch touches, the canvas gets the rest ---- */
.ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ui > * { pointer-events: auto; }

.heading {
  position: absolute;
  top: var(--gap-top);
  left: 50%;
  transform: translateX(-50%);
  min-height: 60px;
  padding: 8px 30px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 4px 14px rgba(80, 40, 90, 0.15);
  font-size: clamp(22px, 3.4vw, 38px);
  font-weight: 700;
  color: var(--pink-dark);
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.top-right {
  position: absolute;
  top: var(--gap-top);
  right: var(--gap-side);
  display: flex;
  gap: 14px;
}
.top-left {
  position: absolute;
  top: var(--gap-top);
  left: var(--gap-side);
}

.round-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: var(--pink);
  box-shadow: 0 6px 0 var(--pink-dark), 0 8px 18px rgba(80, 40, 90, 0.2);
  display: grid;
  place-items: center;
  padding: 0;
}
.round-btn svg { width: 40px; height: 40px; }
.round-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--pink-dark); }

/* Shelf button on the map: bigger, yellow and wiggling now and then, so it's easy to notice. */
#map-buttons { align-items: center; }
.shelf-btn {
  width: 108px;
  height: 108px;
  border-width: 5px;
  background: radial-gradient(circle at 35% 30%, #fff6c9, #ffd45c);
  box-shadow: 0 7px 0 #e0a92c, 0 10px 22px rgba(80, 40, 90, 0.25);
  animation: shelf-wiggle 5s ease-in-out 2s infinite;
}
.shelf-btn svg { width: 86px; height: 86px; }
.shelf-btn:active { box-shadow: 0 2px 0 #e0a92c; animation: none; }
.shelf-btn.got-one { animation: shelf-got-one 0.7s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes shelf-got-one {
  0% { transform: scale(1); }
  40% { transform: scale(1.3) rotate(-6deg); }
  100% { transform: scale(1); }
}
@keyframes shelf-wiggle {
  0%, 84%, 100% { transform: rotate(0) scale(1); }
  87% { transform: rotate(-9deg) scale(1.08); }
  90% { transform: rotate(8deg) scale(1.08); }
  93% { transform: rotate(-5deg) scale(1.04); }
  96% { transform: rotate(3deg) scale(1.02); }
}

.big-btn {
  min-width: 240px;
  min-height: 96px;
  padding: 0 48px;
  font-size: 44px;
  font-weight: 700;
  color: #fff;
  background: var(--pink);
  border: 5px solid #fff;
  border-radius: 60px;
  box-shadow: 0 8px 0 var(--pink-dark), 0 12px 24px rgba(80, 40, 90, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.big-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--pink-dark); }
.big-btn svg { width: 44px; height: 44px; }

/* Hidden long-press: a thin bar fills underneath while holding, so grown-ups know it works. */
.long-press::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 4px;
  height: 4px;
  border-radius: 2px;
  background: rgba(224, 79, 139, 0.5);
  transform: scaleX(0);
  transform-origin: left;
}
.long-press.holding::after { transform: scaleX(1); transition: transform var(--hold-ms, 3s) linear; }

/* ---- Start ---- */
#ui-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap-top) 16px max(28px, env(safe-area-inset-bottom));
}
#start-title {
  position: relative;
  width: min(88vw, 900px);
  height: 34vh;
}

/* ---- Fluffy glittery title ---- */
.fluffy-title {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: var(--font);
  font-weight: 700;
}
.fluffy-title text { paint-order: stroke; stroke-linejoin: round; stroke-linecap: round; }
.fluffy-title .ft-shadow { fill: #e0619e; stroke: #e0619e; stroke-width: 44px; opacity: 0.55; }
.fluffy-title .ft-fur { fill: #fff; stroke: #fff; stroke-width: 40px; }
.fluffy-title .ft-innerfur { fill: #ffe0f0; stroke: #ffd0e8; stroke-width: 16px; }
.fluffy-title .ft-star { fill: #fff6b8; stroke: #fff; stroke-width: 3px; animation: ft-twinkle 2.4s ease-in-out infinite; }
@keyframes ft-twinkle {
  0%, 100% { transform: scale(0.35) rotate(0deg); opacity: 0.3; }
  50% { transform: scale(1) rotate(20deg); opacity: 1; }
}

/* ---- Arrival ---- */
.play-btn, .pop-btn {
  position: absolute;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translate(-50%, 30px) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.3s;
}
.play-btn.show { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; animation: play-pulse 1.6s ease-in-out 0.6s infinite; }
.play-btn.show:active { transform: translate(-50%, 6px) scale(1); }
.pop-btn { left: auto; right: var(--gap-side); bottom: max(20px, env(safe-area-inset-bottom)); transform: translateY(30px) scale(0.6); font-size: 34px; min-height: 84px; }
.pop-btn.show { transform: none; opacity: 1; pointer-events: auto; }
.pop-btn.show:active { transform: translateY(6px); }
@keyframes play-pulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.06; }
}

/* ---- Mini-game placeholder ---- */
.soon-card {
  position: absolute;
  left: 50%;
  bottom: 10vh;
  transform: translateX(-50%);
  width: min(640px, 90vw);
  padding: 22px 28px 28px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 30px rgba(80, 40, 90, 0.2);
  text-align: center;
}
.soon-card p { margin: 0 0 20px; font-size: clamp(22px, 3vw, 32px); font-weight: 600; }

/* ---- Narration subtitle ---- */
#subtitle {
  position: absolute;
  left: 50%;
  bottom: max(140px, 18vh);
  transform: translate(-50%, 20px);
  width: max-content;
  max-width: min(760px, 86vw);
  padding: 14px 26px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(80, 40, 90, 0.2);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
#subtitle.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- Fade between screens ---- */
#fade {
  position: absolute;
  inset: 0;
  background: #fff4fa;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
}
#fade.on { opacity: 1; pointer-events: auto; }

/* ---- Please turn your iPad (portrait on touch devices only) ---- */
#rotate {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(#ffd9ef, #e3dcff);
  text-align: center;
  padding: 24px;
}
#rotate canvas { width: min(70vw, 420px); aspect-ratio: 1; }
#rotate p { margin: 0; font-size: clamp(26px, 6vw, 44px); font-weight: 700; color: var(--pink-dark); }
#rotate .rotate-arrow { width: 72px; height: 72px; animation: rotate-hint 2s ease-in-out infinite; }
@keyframes rotate-hint {
  0%, 30% { transform: rotate(0deg); }
  70%, 100% { transform: rotate(90deg); }
}
@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: flex; }
}

/* ---- Grown-ups menu ---- */
.parent-menu {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(60, 30, 60, 0.35);
}
.pm-card {
  width: min(480px, 92vw);
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 16px 22px 24px;
  border-radius: 24px;
  background: #fff;
  font-size: 17px;
}
.pm-head { display: flex; justify-content: space-between; align-items: center; }
.pm-card h2 { margin: 0; font-size: 24px; }
.pm-card h3 { margin: 18px 0 6px; font-size: 17px; color: var(--pink-dark); }
.pm-card button:not(.pm-close) {
  display: block; width: 100%; min-height: 60px; margin: 8px 0; border: none; border-radius: 16px;
  background: var(--pink); color: #fff; font-size: 18px; font-weight: 600;
}
.pm-close {
  width: 60px; height: 60px; border: none; border-radius: 50%;
  background: #f3e3ee; font-size: 26px; color: var(--ink);
}
.pm-msg { min-height: 1.3em; margin: 8px 0 0; color: #3d8a4a; font-weight: 600; }
.pm-card input {
  width: 100%; min-height: 56px; padding: 0 14px; margin: 8px 0 0;
  border: 2px solid #f3d3e6; border-radius: 14px; font-family: var(--font); font-size: 20px;
  letter-spacing: 1px; -webkit-user-select: text; user-select: text;
}
.pm-restore { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.pm-restore input { flex: 1; margin: 0; }
.pm-card .pm-restore button { width: auto; padding: 0 22px; margin: 0; }

/* ---- Short screens (phones in landscape): smaller buttons, subtitle at the bottom ---- */
@media (max-height: 520px) {
  .round-btn { width: 62px; height: 62px; border-width: 3px; }
  .round-btn svg { width: 32px; height: 32px; }
  .shelf-btn { width: 84px; height: 84px; border-width: 4px; }
  .shelf-btn svg { width: 68px; height: 68px; }
  .heading { min-height: 50px; padding: 4px 22px; font-size: 22px; }
  .big-btn { min-width: 180px; min-height: 72px; padding: 0 32px; font-size: 32px; }
  .big-btn svg { width: 32px; height: 32px; }
  #start-title { height: 30vh; }
  #subtitle { bottom: 8px; max-width: 62vw; padding: 8px 18px; font-size: 15px; }
  .play-btn { left: auto; right: var(--gap-side); bottom: 12px; transform: translateY(30px) scale(0.6); }
  .play-btn.show { transform: none; }
  .play-btn.show:active { transform: translateY(6px); }
  .pop-btn { font-size: 24px; min-height: 64px; }
  .soon-card { bottom: 12px; padding: 14px 20px 18px; }
  .soon-card p { margin-bottom: 12px; }
}

/* ---- Tuning panel ---- */
.tuning {
  z-index: 45;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: -6px 0 24px rgba(80, 30, 60, 0.2);
  padding: 12px 18px 24px;
  font-size: 16px;
}
.tuning-head { display: flex; justify-content: space-between; align-items: center; }
.tuning h2 { margin: 0; font-size: 22px; }
.tuning h3 { margin: 18px 0 0; font-size: 18px; color: var(--pink-dark); }
.tuning-select {
  width: 100%; min-height: 48px; margin-top: 6px; font-family: var(--font); font-size: 16px;
  border: 2px solid #f3d3e6; border-radius: 12px; background: #fff; color: var(--ink);
}
.tuning-close {
  width: 60px; height: 60px; border: none; border-radius: 50%;
  background: #f3e3ee; font-size: 26px; color: var(--ink);
}
.tuning-row { display: block; margin: 10px 0 2px; }
.tuning-label { display: flex; justify-content: space-between; font-weight: 700; }
.tuning-label b { color: var(--pink-dark); }
.tuning input[type="range"] { width: 100%; height: 36px; touch-action: pan-x; }
.tuning-actions { display: flex; gap: 10px; margin-top: 16px; }
.tuning-actions button {
  flex: 1; min-height: 60px; border: none; border-radius: 16px;
  background: var(--pink); color: #fff; font-size: 17px; font-weight: 700;
}
.tuning-out {
  width: 100%; height: 160px; margin-top: 12px; font-family: monospace; font-size: 13px;
  -webkit-user-select: text; user-select: text;
}