:root {
  --bg-1: #0f3d2e;
  --bg-2: #1c5c4a;
  --accent-gold: #f6d06f;
  --accent-red: #f45b69;
  --accent-leaf: #6bdc9c;
  --text: #f2f7f4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), transparent 40%),
              radial-gradient(circle at 70% 80%, rgba(255,255,255,0.06), transparent 50%),
              linear-gradient(135deg, var(--bg-1), var(--bg-2));
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
}

.ui {
  position: fixed;
  top: 16px;
  left: 16px;
  max-width: 380px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15, 61, 46, 0.7);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 26px;
  letter-spacing: 0.4px;
}

.subtitle {
  margin-top: 4px;
  font-size: 14px;
  color: rgba(242, 247, 244, 0.82);
}

.instructions {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(242, 247, 244, 0.72);
}

.scoreboard {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
}

canvas#game {
  width: 100vw;
  height: 100vh;
  display: block;
}

/* Lesson Modal Styles */
.lesson-backdrop { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); z-index: 50; }
.lesson-backdrop.show { display: flex; }
.lesson-card { max-width: min(680px, 95vw); background: linear-gradient(180deg, rgba(20, 35, 28, 0.97), rgba(14, 26, 21, 0.97)); border-radius: 18px; border: 1px solid rgba(255,255,255,0.14); color: var(--text); box-shadow: 0 28px 72px rgba(0,0,0,0.5); }
.lesson-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.lesson-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 28px; letter-spacing: 0.2px; }
.lesson-close { background: transparent; border: none; color: var(--text); font-size: 32px; cursor: pointer; opacity: 0.85; }
.lesson-close:hover { opacity: 1; }
.lesson-body { padding: 18px 20px; }
.lesson-ref { font-weight: 700; opacity: 0.92; margin-bottom: 10px; font-size: 18px; }
.lesson-scripture { margin: 0 0 14px; font-style: italic; color: rgba(242,247,244,0.95); font-size: 22px; line-height: 1.5; }
.lesson-question { font-weight: 700; font-size: 22px; }