/* ==========================================================================
   X.com.ly — screens.css
   App shell layout + per-screen layouts.
   ========================================================================== */

/* ---- App shell --------------------------------------------------------- */
.app {
  position: relative;
  min-height: 100dvh;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom));
}
.app[data-screen="boot"] { padding-bottom: 0; }

.screen {
  display: none;
  padding: var(--sp-4);
  padding-top: calc(var(--supportbar-h) + var(--header-h) + var(--safe-top) + var(--sp-3));
  animation: screen-in var(--dur-slow) var(--ease);
}
.screen[data-active="true"] { display: block; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; }

/* ---- Boot splash ------------------------------------------------------- */
.boot {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  background: var(--c-bg);
  z-index: var(--z-overlay);
}
.boot__logo { animation: boot-pop 900ms var(--ease-bounce); }
.boot__logo svg { filter: drop-shadow(0 8px 20px rgba(88, 204, 2, 0.35)); }
.boot__text { color: var(--c-text-muted); font-weight: var(--fw-bold); }
.boot__bar {
  width: 160px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  overflow: hidden;
}
.boot__bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  animation: boot-slide 1.1s var(--ease) infinite;
}
@keyframes boot-pop {
  from { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes boot-slide {
  0% { transform: translateX(120%); }
  100% { transform: translateX(-260%); }
}

/* ---- Header ------------------------------------------------------------ */
.app-header {
  position: fixed;
  top: var(--supportbar-h);
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: calc(var(--header-h) + var(--safe-top));
  padding: var(--safe-top) var(--sp-4) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: var(--container-wide);
  margin: 0 auto;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
}
.app-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-black);
  font-size: var(--fs-lg);
  color: var(--c-text-strong);
}
.app-header__brand .logo-x {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
}
.app-header__stats {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-inline-start: auto;
}

/* ---- Bottom navigation ------------------------------------------------- */
.app-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: calc(var(--bottomnav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  max-width: var(--container-wide);
  margin: 0 auto;
  background: var(--c-surface);
  border-top: 2px solid var(--c-border);
}
.app-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--c-text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  transition: color var(--dur-fast) var(--ease);
}
.app-nav__item[aria-current="page"] { color: var(--c-primary-dark); }
.app-nav__item .nav-ico { font-family: var(--font-emoji); font-size: var(--fs-xl); line-height: 1; }

/* ---- Landing / welcome ------------------------------------------------- */
.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  min-height: 100dvh;
  padding: var(--sp-6);
  text-align: center;
}
.landing__mascot { animation: float 3.5s var(--ease) infinite; }
.landing__title { font-size: var(--fs-4xl); font-weight: var(--fw-black); }
.landing__title .x-mark { color: var(--c-primary); }
.landing__subtitle { color: var(--c-text-muted); font-size: var(--fs-lg); max-width: 34ch; }
.landing__actions { display: flex; flex-direction: column; gap: var(--sp-3); width: min(100%, 360px); }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---- Home / levels ----------------------------------------------------- */
.home-hero {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
  color: var(--c-text-invert);
  border-radius: var(--r-2xl);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
  box-shadow: var(--sh-2);
}
.home-hero__title { color: var(--c-text-invert); font-size: var(--fs-2xl); }
.home-hero__sub { opacity: 0.92; margin-top: var(--sp-1); }

.tier-grid { display: grid; gap: var(--sp-3); }
.tier-card { display: flex; align-items: center; gap: var(--sp-4); }
.tier-card__icon {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  font-family: var(--font-emoji);
  font-size: 28px;
  border-radius: var(--r-lg);
  background: var(--c-primary-soft);
}
.tier-card__body { flex: 1; min-width: 0; }
.tier-card__title { font-size: var(--fs-lg); }
.tier-card__meta { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* ---- Session (game) ---------------------------------------------------- */
.session-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.session-timer {
  font-weight: var(--fw-black);
  color: var(--c-text-strong);
  font-variant-numeric: tabular-nums;
}

.prompt {
  text-align: center;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  color: var(--c-text-strong);
  margin: var(--sp-5) 0;
}

.visual-stage {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  min-height: 200px;
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: var(--r-2xl);
  margin-bottom: var(--sp-5);
}
.visual-stage__emoji { font-family: var(--font-emoji); font-size: 84px; line-height: 1; }
.visual-stage__word {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  color: var(--c-text-strong);
  direction: ltr;
}
.visual-stage__phonetic { color: var(--c-text-muted); font-size: var(--fs-md); direction: ltr; }

.btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 420px) { .btn-grid { grid-template-columns: 1fr; } }

.option {
  min-height: 60px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  border: 2px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: 0 3px 0 var(--c-border);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.option:hover { border-color: var(--c-primary-light); }
.option:active { transform: translateY(2px); box-shadow: none; }
.option[data-state="correct"] {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
  color: var(--c-primary-dark);
}
.option[data-state="wrong"] {
  background: var(--c-danger-soft);
  border-color: var(--c-danger);
  color: var(--c-danger-dark);
}

/* ---- Feedback banner --------------------------------------------------- */
.feedback {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  font-weight: var(--fw-bold);
  display: none;
}
.feedback[data-show="true"] { display: block; animation: screen-in var(--dur) var(--ease); }
.feedback--ok { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.feedback--no { background: var(--c-danger-soft); color: var(--c-danger-dark); }

/* ---- Settings / profile ------------------------------------------------ */
.list-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.list-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: var(--r-lg);
}
.list-row__label { flex: 1; font-weight: var(--fw-bold); }
.list-row__hint { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* ---- Toast/empty helpers ---------------------------------------------- */
.empty-state {
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
  color: var(--c-text-muted);
}
.empty-state__emoji { font-family: var(--font-emoji); font-size: 56px; display: block; margin-bottom: var(--sp-3); }

/* Hide chrome on full-screen screens */
.app[data-screen="landing"] .app-header,
.app[data-screen="landing"] .app-nav { display: none; }

/* Keep the landing screen clear of the thin support bar */
.app[data-screen="landing"] .landing { padding-top: var(--sp-6); }

/* ---- Support screen ---------------------------------------------------- */
.support-hero {
  text-align: center;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
}
.support-hero__emoji {
  display: block;
  font-family: var(--font-emoji);
  font-size: 64px;
  line-height: 1;
  animation: float 3.5s var(--ease) infinite;
  filter: drop-shadow(0 10px 18px rgba(88, 204, 2, 0.22));
}
.support-hero__title { font-size: var(--fs-3xl); margin-top: var(--sp-3); }
.support-hero__sub { color: var(--c-text-muted); margin-top: var(--sp-2); }

.gift-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  border: 2px dashed var(--c-border-strong);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
  margin-bottom: var(--sp-4);
}
.gift-card--ready {
  border-style: solid;
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  animation: gift-glow 2.2s var(--ease) infinite;
}
.gift-card--done { opacity: 0.85; }
.gift-card__emoji {
  flex: none;
  font-family: var(--font-emoji);
  font-size: 40px;
  line-height: 1;
}
.gift-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gift-card__body strong { font-size: var(--fs-md); color: var(--c-text-strong); }
.gift-card__body span { font-size: var(--fs-xs); color: var(--c-text-muted); }
.gift-card .btn { flex: none; }

@keyframes gift-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(88, 204, 2, 0), var(--sh-1); }
  50% { box-shadow: 0 0 0 5px var(--c-primary-soft), var(--sh-1); }
}

.support-card__title { font-size: var(--fs-lg); }
.support-card__text { color: var(--c-text-muted); margin: var(--sp-2) 0 var(--sp-4); }
.support-foot {
  text-align: center;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--sp-5);
}

@media (prefers-reduced-motion: reduce) {
  .gift-card--ready,
  .support-hero__emoji { animation: none; }
}
@media (max-width: 420px) {
  .gift-card { flex-wrap: wrap; }
  .gift-card .btn { width: 100%; }
}