/* Společné styly pro všechny hry – velké dotykové plochy, žádné vybírání textu, žádné zoomování. */
:root {
  --sky: #8fd3ff;
  --sky2: #d6f0ff;
  --grass: #7cc957;
  --grass2: #5aa83a;
  --road: #4a4f57;
  --red: #e53935;
  --blue: #1e88e5;
  --yellow: #fdd835;
  --green: #43a047;
  --orange: #fb8c00;
  --purple: #8e24aa;
  --ink: #263238;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--sky);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
svg { display: block; }

/* Tlačítko domů */
.home {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 50;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 0 #0002, 0 8px 18px #0002;
  display: grid; place-items: center;
  font-size: 40px;
  text-decoration: none;
}
.home:active { transform: translateY(3px); box-shadow: 0 2px 0 #0002; }

/* Úvodní obrazovka s velkým tlačítkem „hrát“ (nutné kvůli zvuku a hlasu na iPadu) */
.start {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #fff8 0, #0000 60%), linear-gradient(var(--sky), var(--sky2));
}
.start-btn {
  display: grid; justify-items: center; gap: 18px;
  animation: breathe 1.8s ease-in-out infinite;
}
.start-icon { width: min(46vw, 340px); }
.start-icon svg { width: 100%; height: auto; }
.play {
  width: 150px; height: 150px; border-radius: 50%;
  background: var(--green);
  color: #fff; font-size: 76px; line-height: 150px; text-align: center;
  padding-left: 12px;
  box-shadow: 0 10px 0 #2e7d32, 0 16px 30px #0003;
}
.start-btn:active .play { transform: translateY(6px); box-shadow: 0 4px 0 #2e7d32; }

@keyframes breathe { 50% { transform: scale(1.05); } }

/* Hvězdičky postupu */
.stars {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 30;
  display: flex; gap: 6px;
  font-size: 40px;
  filter: drop-shadow(0 3px 0 #0002);
}
.stars span { opacity: .25; transition: transform .3s, opacity .3s; }
.stars span.on { opacity: 1; transform: scale(1.15); }

.confetti {
  position: fixed; z-index: 60;
  width: 14px; height: 18px; border-radius: 3px;
  pointer-events: none;
}

.wiggle { animation: wiggle .5s; }
@keyframes wiggle {
  20% { transform: rotate(-6deg); }
  40% { transform: rotate(6deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(3deg); }
}

.bounce { animation: bounce .45s; }
@keyframes bounce { 40% { transform: scale(1.18); } 70% { transform: scale(.95); } }