/* Little Games — shared styles
   Designed for a 3–5 year old on an iPad: big targets, bright colours,
   no tiny text, nothing that can be accidentally dragged or scrolled. */

:root {
  --pink:   #ff6b9d;
  --orange: #ffa552;
  --yellow: #ffd23f;
  --green:  #5ed27a;
  --blue:   #4dabf7;
  --purple: #9775fa;
  --ink:    #2b2440;
  --radius: 28px;
  --tap: 0 6px 0 rgba(0,0,0,0.15);
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;                 /* no scrolling for little fingers */
  overscroll-behavior: none;
  touch-action: manipulation;       /* no double-tap zoom */
  -webkit-user-select: none;
  user-select: none;
  font-family: ui-rounded, "SF Pro Rounded", "Baloo 2", "Comic Sans MS",
               system-ui, -apple-system, sans-serif;
  color: var(--ink);
}

body {
  /* viewport-fit=cover safe areas so it looks right fullscreen on iPad */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: linear-gradient(160deg, #fff6fb 0%, #eef6ff 60%, #f3fff0 100%);
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vh, 40px);
}

/* ---- Home button (top-left, deliberately small so it isn't pressed by accident) ---- */
.home-btn {
  position: fixed;
  /* sit clear of the iPad status-bar clock (top-left) */
  top: max(48px, calc(env(safe-area-inset-top) + 18px));
  left: max(16px, calc(env(safe-area-inset-left) + 8px));
  width: 60px; height: 60px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  font-size: 32px;
  line-height: 1;
  z-index: 200;   /* above the celebration overlay (100) so it's always tappable */
  cursor: pointer;
}
.home-btn:active { transform: scale(0.92); }

/* ---- The big spoken prompt at the top of each game ---- */
.prompt {
  font-size: clamp(28px, 6vh, 56px);
  font-weight: 800;
  text-align: center;
  padding: 0 20px;
  text-shadow: 0 2px 0 #ffffffaa;
}
.prompt .word { color: var(--purple); }

/* speaker button to repeat the prompt */
.say-btn {
  border: none;
  background: #ffffffcc;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: clamp(18px, 3vh, 24px);
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  cursor: pointer;
}
.say-btn:active { transform: scale(0.95); }

/* ---- Choice grid (used by colours / shapes / numbers / letters) ---- */
.choices {
  display: grid;
  gap: clamp(12px, 2.4vh, 24px);
  padding: 0 clamp(14px, 4vw, 50px);
  width: min(90vw, 560px);          /* narrower = smaller tiles on a big iPad */
}
.choices.n2 { grid-template-columns: repeat(2, 1fr); }
.choices.n3 { grid-template-columns: repeat(3, 1fr); }
.choices.n4 { grid-template-columns: repeat(2, 1fr); }
.choices.n5, .choices.n6 { grid-template-columns: repeat(3, 1fr); width: min(94vw, 660px); }

.tile {
  appearance: none;
  border: none;
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(40px, 9vh, 88px);
  font-weight: 900;
  color: #fff;
  background: #fff;
  /* subtle inner ring so even a white tile has a visible edge */
  box-shadow: var(--tap), inset 0 0 0 2px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform .08s ease;
  position: relative;
  overflow: hidden;
}
/* Only shape tiles become size containers, so shape glyphs can size themselves
   against the tile (cqmin) from one shared scale. Scoped with :has() so it can't
   affect letter/number/colour tile sizing. */
.tile:has(> .shape) { container-type: size; }
.tile:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,0.15); }
.tile.glyph { color: var(--ink); background: #fff; }
.tile.correct { animation: pop .5s ease; }
.tile.wrong   { animation: shake .4s ease; }

@keyframes pop   { 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-10px)} 75%{transform:translateX(10px)} }

/* shape glyphs drawn with CSS for the shapes game.
   They are flex children of a square tile. flex-shrink:0 stops the flexbox from
   squeezing them horizontally (which turned circles into ellipses and squares
   into rectangles). Every shape is sized in cqmin (a % of the tile's own size,
   via container-type:size on .tile) from one shared scale so they all render at
   a consistent, balanced size — solid shapes a touch smaller than open ones
   (triangle/star/heart) so their visual mass matches. */
/* Every shape is a filled box (background:currentColor) shaped with border-radius
   or clip-path — NOT a CSS border (triangle) or a text glyph (heart), which used
   to size completely differently. With one shared sizing scheme they read as the
   same size. Solid/compact shapes are a touch smaller than pointy/concave ones to
   balance how big each looks to the eye. */
.shape { background: currentColor; flex: 0 0 auto; }
.shape.circle, .shape.square { width: 58cqmin; height: 58cqmin; }
.shape.circle   { border-radius: 50%; }
.shape.square   { border-radius: 16%; }
.shape.triangle { width: 62cqmin; height: 62cqmin; clip-path: polygon(50% 6%, 96% 94%, 4% 94%); }
.shape.star { width: 66cqmin; height: 66cqmin;
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.shape.heart { width: 64cqmin; height: 64cqmin;
  clip-path: polygon(50% 98%, 8% 48%, 6% 22%, 20% 8%, 36% 9%, 50% 24%, 64% 9%, 80% 8%, 94% 22%, 92% 48%); }

/* ---- Star reward strip ---- */
.stars {
  display: flex;
  gap: 10px;
  font-size: clamp(30px, 6vh, 52px);
}
.stars .s { opacity: .25; transition: opacity .3s, transform .3s; }
.stars .s.on { opacity: 1; transform: scale(1.15); }

/* ---- Celebration overlay ---- */
.celebrate {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 24px;
  background: radial-gradient(circle at 50% 40%, #fffbe6 0%, #ffe9f3 70%);
}
.celebrate.show { display: flex; animation: fade .4s ease; }
.celebrate h1 { font-size: clamp(44px, 10vh, 96px); margin: 0; color: var(--pink); }
.celebrate .big-stars { font-size: clamp(60px, 14vh, 150px); }
.celebrate .again {
  border: none; border-radius: 999px;
  background: var(--green); color: #fff;
  font-size: clamp(22px,4vh,34px); font-weight: 800;
  padding: 18px 40px; box-shadow: 0 6px 0 #3fae5c; cursor: pointer;
}
.celebrate .again:active { transform: translateY(4px); box-shadow: 0 2px 0 #3fae5c; }
@keyframes fade { from{opacity:0} to{opacity:1} }

/* confetti pieces */
.confetti { position: fixed; top: -20px; width: 14px; height: 22px; z-index: 90;
  border-radius: 3px; will-change: transform; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* "Tap to play" start screen — one clean gesture that wakes the sound */
.start-splash { position: fixed; inset: 0; z-index: 9999; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: rgba(255,255,255,0.94); transition: opacity .25s ease; }
.start-splash.hide { opacity: 0; }
.start-splash .ss-btn { width: clamp(120px,30vw,170px); height: clamp(120px,30vw,170px);
  border-radius: 50%; background: var(--green); color: #fff;
  font-size: clamp(56px,14vw,84px); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 0 #3fae5c; animation: bob 1.4s ease-in-out infinite; }
.start-splash .ss-txt { font-size: clamp(24px,5vh,40px); font-weight: 900; color: var(--ink); }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }