/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --amber:     #F4A261;
  --terracotta:#E76F51;
  --gold:      #E9C46A;
  --teal:      #2A9D8F;
  --beige:     #F5E6C8;
  --brown:     #3D2B1F;
  --brown-light: #6B4A2A;
  --white:     #FFFDF7;
  --shadow:    rgba(61,43,31,0.18);
  --radius:    12px;
  --radius-lg: 20px;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--beige);
  font-family: 'Nunito', sans-serif;
  color: var(--brown);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ===== SCREENS ===== */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--beige);
  will-change: transform;
}
.screen.active {
  transform: translateX(0);
}
.screen.slide-out {
  transform: translateX(-40%);
}