/* layout.css — overall game shell and screen containers (RWD) */

body {
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Desktop background decoration */
@media (min-width: 600px) {
  body {
    background:
      radial-gradient(ellipse at 20% 20%, rgba(162,155,254,0.18) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 80%, rgba(253,121,168,0.15) 0%, transparent 50%),
      var(--color-bg);
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-lg) 0;
  }
}

/* ── Game Shell ──────────────────────────────────────────────── */

#app {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* On wider screens: card appearance with shadow + rounded corners */
@media (min-width: 600px) {
  #app {
    min-height: min(90vh, 860px);
    max-height: 900px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(108,92,231,0.08);
    overflow-y: auto;
  }
}

/* ── Screen System ───────────────────────────────────────────── */

[data-screen] {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: var(--space-md);
  padding-bottom: env(safe-area-inset-bottom, var(--space-md));
}

[data-screen].screen--active {
  display: flex;
}

[data-screen].screen--enter {
  animation: screenEnter var(--transition-normal) both;
}

@keyframes screenEnter {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Larger padding on tablets */
@media (min-width: 480px) {
  [data-screen] {
    padding: var(--space-lg);
    padding-bottom: env(safe-area-inset-bottom, var(--space-lg));
  }
}

/* ── Loading Screen ──────────────────────────────────────────── */

#loading-screen {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  z-index: 999;
  transition: opacity var(--transition-slow);
}

.loading-egg {
  font-size: 6rem;
  animation: eggRock 1s ease-in-out infinite alternate;
}

.loading-text {
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  font-weight: 700;
}

@keyframes eggRock {
  from { transform: rotate(-8deg); }
  to   { transform: rotate(8deg); }
}

/* ── Landscape / short screens ─────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  body { justify-content: center; padding: 0; }

  #app {
    max-width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    overflow-y: auto;
  }

  [data-screen] { padding: var(--space-sm) var(--space-md); }
}

/* ── Utilities ───────────────────────────────────────────────── */

.hidden { display: none !important; }

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-center { text-align: center; }

/* ── Header bar shared across screens ───────────────────────── */

.screen-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.screen-title {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-primary);
  flex: 1;
}