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

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  /* Primary Colors */
  --deep-navy: #0a1628;
  --gold: #ffd700;
  --gold-dim: #b8860b;

  /* State Colors */
  --teal: #20c997;
  --red: #dc3545;
  --green: #28a745;

  /* Text Colors */
  --white: #ffffff;
  --muted-blue: #a0b3c6;

  /* Glass Effect */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-hover: rgba(255, 255, 255, 0.15);

  /* Gradients */
  --gold-gradient: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  --red-gradient: linear-gradient(135deg, #ff6b6b 0%, var(--red) 100%);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Border Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 50px;

  /* Shadows */
  --shadow-gold: 0 0 30px rgba(255, 215, 0, 0.3);
  --shadow-glow: 0 0 20px rgba(32, 201, 151, 0.3);

  /* Typography */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Quicksand', sans-serif;
}

/* ============================================
   BASE STYLES
   ============================================ */
html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--deep-navy);
  color: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.title-xl {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-lg {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--gold);
}

.title-md {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--gold);
}

.body-lg {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
}

.body-md {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
}

.body-sm {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--muted-blue);
}

.game-text {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 4px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  padding: var(--space-md) var(--space-xl);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary {
  background: var(--gold-gradient);
  color: var(--deep-navy);
  box-shadow: var(--shadow-gold);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 40px rgba(255, 215, 0, 0.4);
}

.btn-primary:active {
  transform: scale(0.95);
}

.btn-secondary {
  background: var(--glass-bg);
  color: var(--white);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: var(--glass-hover);
}

.btn-danger {
  background: var(--red-gradient);
  color: var(--white);
}

.btn-success {
  background: var(--green);
  color: var(--white);
}

.btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  backdrop-filter: blur(10px);
}

.card-message {
  text-align: center;
  padding: var(--space-xl);
  animation: cardReveal 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ============================================
   FORM INPUTS
   ============================================ */
.input {
  font-family: var(--font-body);
  font-size: 18px;
  padding: var(--space-md);
  background: var(--glass-bg);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--white);
  width: 100%;
  text-align: center;
  transition: border-color 0.3s ease;
}

.input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.input::placeholder {
  color: var(--muted-blue);
}

/* ============================================
   TIMER BAR
   ============================================ */
.timer-container {
  width: 100%;
  height: 8px;
  background: var(--glass-bg);
  border-radius: 4px;
  overflow: hidden;
}

.timer-bar {
  height: 100%;
  background: var(--teal);
  border-radius: 4px;
  transition: width 0.1s linear, background-color 0.3s ease;
  width: 100%;
}

.timer-bar.warning {
  background: var(--red);
  animation: timerPulse 0.5s ease infinite;
}

/* ============================================
   LIVES DISPLAY
   ============================================ */
.lives-container { display: flex; gap: var(--space-xs); }
.life { font-size: 24px; transition: all 0.3s ease; }
.life.lost { filter: grayscale(1); opacity: 0.3; transform: scale(0.8); }
.life.losing { animation: lifeLost 0.5s ease forwards; }

/* ============================================
   PROGRESS DOTS
   ============================================ */
.progress-dots { display: flex; justify-content: center; gap: var(--space-sm); }
.progress-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--glass-bg); border: 2px solid var(--glass-border); transition: all 0.4s ease; }
.progress-dot.active { background: var(--gold); border-color: var(--gold); transform: scale(1.3); box-shadow: var(--shadow-gold); }
.progress-dot.completed { background: var(--green); border-color: var(--green); }

/* ============================================
   BACKGROUND EFFECTS
   ============================================ */
.aurora { position: fixed; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:-1; background: var(--deep-navy); }
.aurora::before,
.aurora::after { content:''; position:absolute; width:150%; height:150%; border-radius:50%; animation: auroraMove 20s ease-in-out infinite; }
.aurora::before { background: radial-gradient(circle, rgba(32, 201, 151, 0.3) 0%, transparent 70%); top:-50%; left:-25%; }
.aurora::after { background: radial-gradient(circle, rgba(220, 53, 69, 0.2) 0%, transparent 70%); bottom:-50%; right:-25%; animation-delay:-10s; }
.aurora-gold { position:absolute; width:100%; height:100%; background: radial-gradient(circle at 50% 80%, rgba(255, 215, 0, 0.15) 0%, transparent 50%); animation: auroraMove 25s ease-in-out infinite; animation-delay:-5s; }
.snowfall { position: fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:hidden; }
.snowflake { position:absolute; color: var(--white); opacity:0.8; pointer-events:none; animation: snowfall linear infinite; }

/* ============================================
   SOUND TOGGLE
   ============================================ */
.sound-toggle { position: fixed; top: var(--space-md); right: var(--space-md); width:44px; height:44px; font-size:24px; background: var(--glass-bg); border:1px solid var(--glass-border); border-radius:50%; cursor:pointer; z-index:100; transition: all 0.3s ease; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color: transparent; }
.sound-toggle:hover { background: var(--glass-hover); transform: scale(1.1); }

/* ============================================
   GAME CONTAINER
   ============================================ */
.game-container { max-width:500px; width:100%; height:100%; margin:0 auto; padding: var(--space-md); padding-left:max(var(--space-md), env(safe-area-inset-left)); padding-right:max(var(--space-md), env(safe-area-inset-right)); padding-bottom:max(var(--space-md), env(safe-area-inset-bottom)); display:flex; flex-direction:column; position:relative; z-index:10; }

/* ============================================
   HEADER BAR
   ============================================ */
.game-header { display:flex; align-items:center; gap: var(--space-md); padding: var(--space-sm) 0; opacity:0; transition: opacity 0.3s ease; }
.game-header.visible { opacity:1; }
.game-header .timer-container { flex:1; }

/* ============================================
   PROGRESS SECTION
   ============================================ */
.progress-section { text-align:center; padding: var(--space-md) 0; opacity:0; transition: opacity 0.3s ease; }
.progress-section.visible { opacity:1; }
.layer-text { margin-top: var(--space-sm); }

/* ============================================
   GAME CONTENT / SCREENS
   ============================================ */
.game-content { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
.screen { display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:100%; height:100%; opacity:0; transform: scale(0.95); transition: opacity 0.4s ease, transform 0.4s ease; }
.screen.active { display:flex; opacity:1; transform: scale(1); }

/* ============================================
   START SCREEN
   ============================================ */
.screen-start .gift-icon { font-size:100px; animation: float 3s ease-in-out infinite; display:block; margin-bottom: var(--space-lg); }
.screen-start .title-xl { margin-bottom: var(--space-md); }
.screen-start .description { max-width:280px; margin-bottom: var(--space-xl); }

/* ============================================
   GAME SCREEN
   ============================================ */
.screen-game { justify-content:flex-start; padding-top: var(--space-md); }
.game-title { margin-bottom: var(--space-sm); }
.game-instruction { margin-bottom: var(--space-lg); max-width: 300px; }
.game-canvas { width:100%; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:none; }

/* ============================================
   MESSAGE SCREEN
   ============================================ */
.screen-message .sparkle-icon { font-size:48px; margin-bottom: var(--space-md); animation: sparkle 1.5s ease-in-out infinite; }
.message-card { max-width:320px; animation: cardReveal 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.message-card.type-greeting { border: 2px solid #2ecc71; }
.message-card.type-riddle { border: 2px solid #f1c40f; }
.message-card.type-brainteaser { border: 2px solid #3498db; }
.message-title { margin-bottom: var(--space-md); }
.message-text { font-size:18px; line-height:1.6; margin-bottom: var(--space-lg); }
.message-from { font-style: italic; color: var(--muted-blue); margin-bottom: var(--space-xl); }
.screen-victory .btn-secondary { margin-top: var(--space-md); }

/* ============================================
   VICTORY SCREEN
   ============================================ */
.screen-victory .victory-icon { font-size:80px; animation: victoryBounce 1s ease infinite; margin-bottom: var(--space-lg); }
.screen-victory .title-xl { margin-bottom: var(--space-md); }
.screen-victory .description { margin-bottom: var(--space-xl); }

/* ============================================
   GAME OVER SCREEN
   ============================================ */
.screen-game-over .sad-icon { font-size:80px; margin-bottom: var(--space-lg); animation: sadShake 2s ease-in-out infinite; }
.screen-game-over .title-xl { color: var(--red); -webkit-text-fill-color: var(--red); margin-bottom: var(--space-md); }
.screen-game-over .description { margin-bottom: var(--space-xl); }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-15px) rotate(2deg); } }
@keyframes auroraMove { 0%,100% { transform: translate(0,0) rotate(0deg); } 33% { transform: translate(30px,-30px) rotate(10deg); } 66% { transform: translate(-20px,20px) rotate(-5deg); } }
@keyframes snowfall { 0% { transform: translateY(-100vh) rotate(0deg); } 100% { transform: translateY(100vh) rotate(360deg); } }
@keyframes timerPulse { 0%,100% { opacity:1; } 50% { opacity:0.7; } }
@keyframes lifeLost { 0% { transform: scale(1); filter:none; opacity:1; } 50% { transform: scale(1.5) rotate(15deg); } 100% { transform: scale(0.8); filter: grayscale(1); opacity:0.3; } }
@keyframes cardReveal { from { opacity:0; transform: scale(0.8) rotateX(-15deg); } to { opacity:1; transform: scale(1) rotateX(0); } }
@keyframes sparkle { 0%,100% { transform: scale(1) rotate(0deg); opacity:1; } 50% { transform: scale(1.2) rotate(10deg); opacity:0.8; } }
@keyframes victoryBounce { 0%,100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.2) rotate(-10deg); } 50% { transform: scale(1) rotate(0deg); } 75% { transform: scale(1.2) rotate(10deg); } }
@keyframes sadShake { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 10%,30%,50%,70%,90% { transform: translateX(-5px); } 20%,40%,60%,80% { transform: translateX(5px); } }
@keyframes successFlash { 0% { background-color: transparent; } 50% { background-color: rgba(40, 167, 69, 0.3); } 100% { background-color: transparent; } }
.shake { animation: shake 0.5s ease; }
.success-flash { animation: successFlash 0.5s ease; }

/* ============================================
   RESPONSIVE STYLES
   ============================================ */
@media (max-width: 374px) { .title-xl { font-size:28px; } .title-lg { font-size:24px; } .game-text { font-size:24px; } .screen-start .gift-icon { font-size:80px; } }
@media (min-width: 375px) { .title-xl { font-size:32px; } .game-text { font-size:28px; } }
@media (min-width: 414px) { .title-xl { font-size:36px; } .game-text { font-size:32px; } }

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============================================
   GAME-SPECIFIC STYLES
   ============================================ */
.options-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); width:100%; max-width:320px; }
.option-btn { padding: var(--space-md); font-size:16px; background: var(--glass-bg); border:2px solid var(--glass-border); border-radius: var(--radius-md); color: var(--white); cursor:pointer; transition: all 0.2s ease; min-height:60px; display:flex; align-items:center; justify-content:center; text-align:center; -webkit-tap-highlight-color: transparent; }
.option-btn:hover { background: var(--glass-hover); border-color: var(--gold); }
.option-btn:active { transform: scale(0.95); }
.option-btn.correct { background: var(--green); border-color: var(--green); }
.option-btn.incorrect { background: var(--red); border-color: var(--red); }
.memory-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); width:100%; max-width:320px; }
.memory-card { aspect-ratio:1; background: var(--glass-bg); border:2px solid var(--glass-border); border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:32px; cursor:pointer; transition: all 0.3s ease; -webkit-tap-highlight-color: transparent; }
.memory-card:hover { border-color: var(--gold); }
.memory-card.flipped { background: var(--glass-hover); border-color: var(--gold); }
.memory-card.matched { background: rgba(40, 167, 69, 0.3); border-color: var(--green); }
.catch-container { position:relative; width:100%; height:300px; overflow:hidden; background: rgba(0,0,0,0.2); border-radius: var(--radius-md); }
.catch-basket { position:absolute; bottom:10px; left:50%; transform: translateX(-50%); font-size:48px; transition:left 0.05s linear; cursor:grab; }
.falling-item { position:absolute; font-size:32px; transition: top 0.05s linear; }
.catch-score { position:absolute; top:10px; left:50%; transform: translateX(-50%); font-size:18px; font-weight:600; }
.shake-container { display:flex; flex-direction:column; align-items:center; gap: var(--space-lg); }
.shake-gift { font-size:120px; cursor:pointer; transition: transform 0.1s ease; -webkit-tap-highlight-color: transparent; }
.shake-gift:active { transform: scale(0.9); }
.shake-gift.shaking { animation: giftShake 0.1s ease; }
@keyframes giftShake { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.shake-meter { width:100%; max-width:280px; height:24px; background: var(--glass-bg); border-radius: var(--radius-pill); overflow:hidden; border:2px solid var(--glass-border); }
.shake-meter-fill { height:100%; background: var(--gold-gradient); border-radius: var(--radius-pill); transition: width 0.1s ease; width:0%; }