/* Tiny Taps. Soft, bright, big. The html background is a solid colour on purpose:
   iOS Safari tints its bars from the canvas colour and a gradient alone reads as white. */
:root {
  --sky: #cfeefd;
  --sky2: #fff6d8;
  --ink: #2b3550;
  --muted: #6b7591;
  --card: #ffffff;
  --accent: #ff7a59;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-t-px: env(safe-area-inset-top, 0px);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, sans-serif;
  color: var(--ink);
}
html { background-color: var(--sky); height: 100%; }
body {
  margin: 0; height: 100%; overflow: hidden;
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky2) 100%);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: none; overscroll-behavior: none;
}
[hidden] { display: none !important; }
.screen { position: fixed; inset: 0; }

/* ---- home: one big picture per game ---- */
#home { display: grid; place-items: center; padding: calc(var(--safe-t) + 72px) calc(var(--safe-r) + 24px) calc(var(--safe-b) + 40px) calc(var(--safe-l) + 24px); box-sizing: border-box; }
.tiles { display: flex; gap: 4vmin; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%; }
.tile {
  appearance: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  width: min(40vw, 62vh, 420px); aspect-ratio: 1; border-radius: 22%;
  background: var(--card); box-shadow: 0 1.4vmin 0 rgba(43,53,80,.12), 0 3vmin 6vmin rgba(43,53,80,.12);
  display: grid; place-items: center; overflow: hidden;
  transition: transform .18s cubic-bezier(.3,1.6,.5,1);
  animation: bob 3.2s ease-in-out infinite;
}
.tile:nth-child(2) { animation-delay: -1.6s; }
.tile:nth-child(3) { animation-delay: -.8s; }
.tile svg { width: 100%; height: 100%; display: block; }
.tile.press { transform: scale(.92); }
@media (orientation: portrait) { .tile { width: min(62vw, 34vh, 420px); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2vmin; } }
@media (prefers-reduced-motion: reduce) { .tile { animation: none; } }

/* ---- play ---- */
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- hold buttons: small and faint, so the child mostly ignores them ---- */
.hold {
  position: fixed; z-index: 5; width: 56px; height: 56px; border-radius: 50%;
  border: 0; padding: 12px; box-sizing: border-box; cursor: pointer;
  background: rgba(255,255,255,.55); color: rgba(43,53,80,.45);
  --p: 0;
  box-shadow: inset 0 0 0 4px rgba(43,53,80,.08);
}
.hold::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 23px, #000 24px); mask: radial-gradient(circle, transparent 23px, #000 24px);
}
.hold svg { width: 100%; height: 100%; fill: currentColor; }
#parentHold { top: calc(var(--safe-t) + 12px); right: calc(var(--safe-r) + 12px); }
#homeHold { top: calc(var(--safe-t) + 12px); left: calc(var(--safe-l) + 12px); }

/* ---- all done ---- */
#done { background: linear-gradient(180deg, #1d2547 0%, #3b3f7a 100%); }
#done .moon { position: absolute; left: 50%; top: 42%; width: 28vmin; height: 28vmin; translate: -50% -50%; border-radius: 50%; box-shadow: -5vmin 2vmin 0 0 #ffe8a3; rotate: -20deg; animation: glow 4s ease-in-out infinite; }
#done .stars i { position: absolute; width: 1.6vmin; height: 1.6vmin; border-radius: 50%; background: #fff6cf; animation: twinkle 2.8s ease-in-out infinite; }
#done .stars i:nth-child(1) { left: 18%; top: 20%; }
#done .stars i:nth-child(2) { left: 74%; top: 16%; animation-delay: -.6s; }
#done .stars i:nth-child(3) { left: 84%; top: 52%; animation-delay: -1.2s; }
#done .stars i:nth-child(4) { left: 12%; top: 62%; animation-delay: -1.8s; }
#done .stars i:nth-child(5) { left: 34%; top: 80%; animation-delay: -.3s; }
#done .stars i:nth-child(6) { left: 64%; top: 78%; animation-delay: -2.2s; }
#done .stars i:nth-child(7) { left: 46%; top: 12%; animation-delay: -1.5s; }
@keyframes twinkle { 0%, 100% { opacity: .25; scale: .7; } 50% { opacity: 1; scale: 1.15; } }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 2vmin rgba(255,232,163,.4)); } 50% { filter: drop-shadow(0 0 5vmin rgba(255,232,163,.7)); } }

/* ---- grown-up sheets ---- */
.sheet { position: fixed; inset: 0; z-index: 10; background: rgba(29,37,71,.45); display: grid; place-items: center; padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px); box-sizing: border-box; touch-action: pan-y; -webkit-user-select: text; user-select: text; }
.card { background: var(--card); border-radius: 24px; padding: 24px 24px 20px; width: min(560px, 100%); max-height: 100%; overflow: auto; box-sizing: border-box; box-shadow: 0 20px 60px rgba(29,37,71,.3); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.card h1 { margin: 0 0 6px; font-size: 26px; }
.card h2 { margin: 20px 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card p, .card li { font-size: 16px; line-height: 1.45; }
.card ul { padding-left: 20px; margin: 0; }
.card li + li { margin-top: 8px; }
.lede { margin: 0; color: var(--muted); }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cardhead h1 { margin: 0; }
.big { display: block; width: 100%; margin-top: 22px; padding: 16px; border: 0; border-radius: 16px; font: inherit; font-size: 19px; font-weight: 700; background: var(--accent); color: #fff; cursor: pointer; }
.x { border: 0; background: #eef1f8; color: var(--ink); font: inherit; font-weight: 700; font-size: 16px; padding: 10px 16px; border-radius: 12px; cursor: pointer; }
.rows { background: #f5f7fc; border-radius: 16px; overflow: hidden; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; min-height: 52px; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--ink); width: 100%; border: 0; background: none; text-align: left; text-decoration: none; }
.row + .row { border-top: 1px solid #e3e7f1; }
.row.link { color: #2f6fdc; cursor: pointer; }
.row input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--accent); flex: none; }
.row input[type=range] { width: 46%; accent-color: var(--accent); }
.row select { font: inherit; font-size: 16px; padding: 6px 8px; border-radius: 10px; border: 1px solid #d5dbe8; background: #fff; color: var(--ink); max-width: 46%; }
.toggle-game { display: flex; align-items: center; gap: 12px; }
.toggle-game svg { width: 36px; height: 36px; flex: none; }
.fine { font-size: 13px !important; color: var(--muted); margin: 18px 2px 0; }