/* Společný základ Vesmírné výpravy a Autoškoly: barvy, tlačítka, lišta, Tik-Tak s bublinou.
   Každá hra je jeden svět (vesmír vždy noc, město vždy den), proto bez tmavé varianty. */
:root {
  /* vesmír (Colors.swift z Vesmírných hodin) */
  --cosmos: #1B1F4D; --cosmos-2: #2A3580; --star-blue: #7B8FFF; --sun: #FFD972;
  --coral: #F18F8F; --mint: #A8E6A1; --off: #F4F1FF; --panel: #FFFFFF; --panel-soft: #EEF2FF;
  /* město */
  --ink: #1F2A4D; --soft: #50607F; --gold: #FFC93C;
  --meadow: #DCEFCB; --grass: #9BD27A; --asphalt: #4E5563; --asphalt-dark: #2E333D;
  --curb: #E6E1D3; --paint: #F7F5EC; --dash-soft: #F1F4EC; --license: #F4C6D4; --eu-blue: #1F4FA8;
  /* stavy */
  --ok: #43B86C; --bad: #F26D6D;
  --font: "Nunito", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { font: 500 18px/1.35 var(--font); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }
h1, h2, p { margin: 0; }
h1, h2 { text-wrap: balance; }

.screen {
  min-height: 100vh; min-height: 100dvh; max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

/* ===== Tlačítka ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 24px; border: 0; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); transition: transform .15s;
}
.btn:active { transform: scale(.95); }
.btn.sun { background: var(--sun); color: var(--ink); }
.btn.blue { background: var(--star-blue); color: var(--ink); }
.btn.green { background: var(--ok); color: #fff; }
.btn.plain { background: var(--dash-soft); color: var(--ink); }
.btn.ghost { background: rgba(255, 255, 255, .16); color: inherit; box-shadow: none; }
.btn.big { min-height: 72px; padding: 0 38px; font-size: 28px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ===== Lišta ===== */
.bar { display: flex; align-items: center; gap: 12px; }
.bar h1 { flex: 1; min-width: 0; font-size: clamp(22px, 3.4vw, 30px); font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.stars { border-radius: 999px; padding: 8px 16px; font-weight: 700; background: var(--sun); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stars.bump { animation: bump .5s; }
@keyframes bump { 40% { transform: scale(1.25); } }

/* ===== Tik-Tak a bublina ===== */
.mascot { width: 84px; height: auto; flex: none; cursor: pointer; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); animation: float 3.2s ease-in-out infinite; }
.mascot.big { width: min(220px, 50vw); }
@keyframes float { 50% { transform: translateY(-8px); } }
body.talking .mascot { animation: talk .36s ease-in-out infinite alternate; }
@keyframes talk { from { transform: rotate(-3deg); } to { transform: rotate(3deg) scale(1.04); } }
.talk { display: flex; align-items: center; gap: 14px; }
.bubble {
  position: relative; flex: 1; min-width: 0; min-height: 58px; padding: 12px 18px; border-radius: 22px;
  background: var(--bubble, var(--panel)); color: var(--ink); font-size: clamp(17px, 2.3vw, 22px); font-weight: 500;
}
.bubble::before { content: ""; position: absolute; left: -9px; top: 22px; border: 9px solid transparent; border-left: 0; border-right-color: var(--bubble, var(--panel)); }
.icon-btn { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--sun); color: var(--ink); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.icon-btn svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Zpětná vazba ===== */
.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.hint { animation: glow 1s ease-in-out infinite alternate; }
@keyframes glow { from { box-shadow: 0 0 0 4px var(--sun); } to { box-shadow: 0 0 0 10px var(--sun), 0 0 30px var(--sun); } }

@media (prefers-reduced-motion: reduce) {
  .mascot { animation: none !important; }
}