/* ============================================================
   layout.css — app shell, screens, fluid grids (no wasted space)
   ============================================================ */

#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Top bar ---------- */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: rgba(255, 248, 232, .72);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid rgba(255,255,255,.74);
  box-shadow: 0 5px 18px rgba(79, 56, 32, .11);
  z-index: 10;
}
.topbar-title {
  flex: 1 1 auto;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--w-primary-d);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- VoVo brand mark (topbar) ---------- */
.brand-mark {
  flex: 0 0 auto;
  user-select: none;
  line-height: 0;
  text-decoration: none;
  border-radius: 8px;
  transition: opacity .15s, transform .15s;
}
.brand-mark:hover { opacity: .75; transform: scale(.96); }
.brand-mini-img {
  height: 42px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Full logo on home hero */
.brand-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
.brand-hero-img {
  height: 110px;
  width: auto;
  display: block;
  object-fit: contain;
}
.brand-hero-sub {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 4px;
  color: #999;
  text-transform: uppercase;
}

/* ---------- Screen container ---------- */
.screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  outline: none;
}

/* A screen section that should fill all available height */
.fill {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Screen header (titles + mascot) ---------- */
.screen-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  margin-bottom: var(--sp-3);
}
.screen-head > div {
  min-width: 0;
}
.screen-head .title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--w-primary-d);
  line-height: 1.05;
  text-shadow: 0 3px 0 rgba(255,255,255,.72), 0 8px 18px rgba(91, 66, 38, .12);
  margin: 0;
}
.screen-head .subtitle {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin: var(--sp-1) 0 0;
}

/* ---------- Card grids that FILL the viewport (no empty bands) ---------- */
.grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: var(--sp-3);
  align-content: stretch;
  grid-auto-rows: 1fr;        /* rows stretch to fill vertical space */
}
/* Home: 3 worlds — one row on wide screens, fills width & height */
.grid--worlds { grid-template-columns: repeat(3, 1fr); }
/* World: 5 units — fluid columns that fill the row, never leaving gaps */
.grid--units  { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* On narrower (still ≥ ~700px) screens, worlds stack to 1 col but stay full-bleed */
@media (max-width: 760px) {
  .grid--worlds { grid-template-columns: 1fr; }
  .screen-head {
    gap: var(--sp-1);
  }
  .screen-head .mascot {
    width: clamp(58px, 18vw, 96px);
    height: clamp(58px, 18vw, 96px);
  }
}