/* ============================================================
   KIDS LAST GAME — Base (reset, variáveis, layout, topo)
   ============================================================ */
:root {
  --azul:    #38bdf8;
  --azul-d:  #0284c7;
  --verde:   #34d399;
  --verde-d: #059669;
  --amarelo: #fbbf24;
  --laranja: #fb923c;
  --rosa:    #f472b6;
  --roxo:    #a78bfa;
  --branco:  #ffffff;
  --tinta:   #0f3d54;
  --ceu1:    #bae6fd;
  --ceu2:    #e0f2fe;
  --sombra:  0 10px 30px rgba(2, 132, 199, .18);
  --raio:    24px;
  --fonte:   'Baloo 2', 'Comic Sans MS', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--fonte);
  color: var(--tinta);
  background: linear-gradient(180deg, var(--ceu2) 0%, #f0fdf4 100%);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  min-height: 100%;
}

img, svg { max-width: 100%; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

:focus-visible { outline: 4px solid var(--azul-d); outline-offset: 3px; border-radius: 8px; }

/* ---------- Splash ---------- */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--azul), var(--verde));
  transition: opacity .5s ease;
}
#splash.hide { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; color: #fff; }
.splash-logo { font-size: clamp(64px, 18vw, 140px); animation: bob 1.4s ease-in-out infinite; }
.splash-name { font-size: clamp(22px, 6vw, 40px); font-weight: 800; letter-spacing: 1px; margin-top: 10px; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }

/* ---------- App shell ---------- */
.app { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Topbar ---------- */
#topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px clamp(12px, 3vw, 28px);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(2,132,199,.12);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { font-size: 34px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; text-align: left; }
.brand-text b { font-size: 20px; color: var(--azul-d); letter-spacing: 1px; }
.brand-text i { font-size: 11px; font-style: normal; color: var(--verde-d); font-weight: 700; }

.topnav { display: flex; gap: 6px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.navbtn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 12px; border-radius: 16px; font-weight: 700; font-size: 13px;
  color: var(--tinta); transition: transform .12s, background .2s;
}
.navbtn-emoji { font-size: 22px; }
.navbtn:hover { transform: translateY(-2px); }
.navbtn.active { background: var(--azul); color: #fff; box-shadow: var(--sombra); }

.topbar-tools { display: flex; gap: 8px; }
.icon-btn {
  width: 48px; height: 48px; border-radius: 50%; font-size: 24px;
  background: #fff; box-shadow: var(--sombra); display: grid; place-items: center;
  transition: transform .12s;
}
.icon-btn:hover { transform: scale(1.08); }
.icon-btn.muted { opacity: .6; }

/* ---------- Área principal ---------- */
#screen { flex: 1; padding: clamp(14px, 3vw, 32px); outline: none; }

.page-head { text-align: center; margin-bottom: 18px; }
.page-title { font-size: clamp(26px, 6vw, 40px); color: var(--azul-d); }
.page-sub { font-size: clamp(14px, 3vw, 18px); color: var(--verde-d); font-weight: 600; margin-top: 4px; }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative; text-align: center; padding: 28px 16px 34px;
  background: linear-gradient(180deg, var(--ceu1), transparent);
  border-radius: var(--raio); margin-bottom: 22px; overflow: hidden;
}
.hero-title { font-size: clamp(28px, 7vw, 52px); color: var(--azul-d); text-shadow: 0 3px 0 #fff; }
.hero-sub { font-size: clamp(15px, 3.5vw, 22px); color: var(--verde-d); font-weight: 700; margin-top: 8px; }
.hero-sun { position: absolute; top: 12px; right: 18px; font-size: 48px; animation: spin 16s linear infinite; }
.hero-cloud { position: absolute; font-size: 44px; opacity: .8; animation: float 9s ease-in-out infinite; }
.hero-cloud.c1 { top: 18px; left: 8%; }
.hero-cloud.c2 { top: 64px; left: 70%; animation-delay: -3s; }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes float { 0%,100% { transform: translateX(0) } 50% { transform: translateX(24px) } }

/* ---------- Botões grandes ---------- */
.btn-big {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; font-size: 20px; font-weight: 800; color: #fff;
  border-radius: 18px; box-shadow: var(--sombra); transition: transform .12s, filter .2s;
  min-height: 56px;
}
.btn-big:hover { transform: translateY(-3px); }
.btn-big:active { transform: translateY(0) scale(.97); }
.btn-azul { background: var(--azul); } .btn-verde { background: var(--verde); }
.btn-amarelo { background: var(--amarelo); color: var(--tinta); }
.btn-laranja { background: var(--laranja); } .btn-rosa { background: var(--rosa); }

.btn-round {
  width: 52px; height: 52px; border-radius: 50%; font-size: 24px;
  background: #fff; box-shadow: var(--sombra); display: inline-grid; place-items: center;
  transition: transform .12s;
}
.btn-round:hover { transform: scale(1.08); }

/* ---------- Rodapé ---------- */
.rodape { text-align: center; padding: 20px 16px 28px; color: var(--verde-d); font-weight: 600; font-size: 13px; opacity: .85; }

.empty-state { text-align: center; padding: 50px 20px; }
.empty-emoji { font-size: 80px; margin-bottom: 12px; }
.empty-state p { font-size: 20px; font-weight: 700; color: var(--verde-d); margin-bottom: 18px; }

/* ---------- Acessibilidade: reduzir movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Alto contraste ---------- */
@media (prefers-contrast: more) {
  body { background: #fff; }
  .navbtn, .page-sub, .hero-sub { color: #003049; }
  .btn-big { outline: 2px solid #003049; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 720px) {
  .navbtn-label { display: none; }
  .navbtn { padding: 6px 10px; }
  .brand-text { display: none; }
  #topbar { gap: 6px; }
}
@media (max-width: 420px) {
  .navbtn-emoji { font-size: 24px; }
  .icon-btn { width: 44px; height: 44px; }
}