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

/* ===== Design Tokens ===== */
:root {
  --color-primary: #7C6BBF;
  --color-primary-light: #F0EBFF;
  --color-primary-dark: #6354A4;
  --color-background: #F5F0FF;
  --color-surface: #FFFFFF;
  --color-text: #2D2D2D;
  --color-text-muted: #8B8580;
  --color-text-light: #B5AFA9;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body.game-active {
  overflow: hidden !important;
}

body {
  font-family: 'Nunito', sans-serif;
  min-height: 100vh;
  background: linear-gradient(135deg, #DDD0FF, #C8E8F0, #FFD9C4, #D8CCFF, #C4F0D8, #E0D4FF);
  background-size: 400% 400%;
  background-attachment: fixed;
  animation: gradientDrift 20s ease infinite;
  color: var(--color-text);
  cursor: url("../assets/emoji/cursors/hand-open-32.png") 16 16, auto;
}

@keyframes gradientDrift {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
    background: #F0EBFF;
  }
}

/* ===== Fluent 3D Emoji Images ===== */
.emoji-img {
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
  pointer-events: none;
}

/* Inline emoji next to text (endcards, stats, etc.) */
.inline-emoji {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.15em;
}

/* Emoji inside buttons (share, copy) */
.btn-emoji {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  margin-right: 0.15em;
}

/* Memory card emoji */
.card-emoji {
  width: 70%;
  height: 70%;
  display: block;
  margin: auto;
}

/* Spell-it-out main emoji display */
.spell-emoji-icon {
  width: 100%;
  height: 100%;
}