/* styles.css */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  /* default to forest while JS loads */
  background: linear-gradient(155deg, #1C2B1A 0%, #2D5130 35%, #4A7A50 65%, #85AC78 100%);
  transition: background 0.7s ease;
  -webkit-tap-highlight-color: transparent;
}

main {
  padding: 2rem 3rem;
  text-align: center;
  width: 100%;
}

/* ─── Quote ───────────────────────────────────────────────── */

.quote {
  display: block;
  font-size: clamp(2.8rem, 7.5vw, 7rem);
  line-height: 1.2;
  max-width: 90vw;
  margin: 0 auto;
  opacity: 1;
  transition: opacity 0.35s ease;
  user-select: none;
  -webkit-user-select: none;
  /* default color; overridden per theme below */
  color: #EDF3E8;
  text-shadow: 0 2px 18px rgba(10, 25, 10, 0.55);
}

.quote.fading {
  opacity: 0;
}

/* ─── Hint ────────────────────────────────────────────────── */

.hint {
  display: block;
  margin-top: 3rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(237, 243, 232, 0.45);
  opacity: 1;
  transition: opacity 1.5s ease;
  user-select: none;
  -webkit-user-select: none;
}

.hint.hidden {
  opacity: 0;
}

/* ─── Themes ──────────────────────────────────────────────── */

/* Sunset — coral embers fading to gold */
.theme-sunset {
  background: linear-gradient(155deg, #B83500 0%, #D96B0A 35%, #F0A830 65%, #F5CB55 100%);
}
.theme-sunset .quote {
  color: #FEF4E0;
  text-shadow: 0 2px 18px rgba(90, 20, 0, 0.5);
}
.theme-sunset .hint { color: rgba(254, 244, 224, 0.45); }

/* Forest — bark and moss rising to sage */
.theme-forest {
  background: linear-gradient(155deg, #1C2B1A 0%, #2D5130 35%, #4A7A50 65%, #85AC78 100%);
}
.theme-forest .quote {
  color: #EDF3E8;
  text-shadow: 0 2px 18px rgba(10, 25, 10, 0.55);
}
.theme-forest .hint { color: rgba(237, 243, 232, 0.45); }

/* Ocean — deep navy rising to open water */
.theme-ocean {
  background: linear-gradient(155deg, #0A1F35 0%, #0E4D6B 35%, #1A7A8A 65%, #4AACB0 100%);
}
.theme-ocean .quote {
  color: #E0F2F5;
  text-shadow: 0 2px 18px rgba(5, 15, 30, 0.55);
}
.theme-ocean .hint { color: rgba(224, 242, 245, 0.45); }

/* Dawn — soft lavender through blush to warm peach */
.theme-dawn {
  background: linear-gradient(155deg, #C5A8D8 0%, #DFA0B5 35%, #EDBB98 65%, #F5D8B5 100%);
}
.theme-dawn .quote {
  color: #2A1245;
  text-shadow: 0 1px 14px rgba(197, 168, 216, 0.8);
}
.theme-dawn .hint { color: rgba(42, 18, 69, 0.4); }

/* Autumn — deep burgundy smouldering to amber */
.theme-autumn {
  background: linear-gradient(155deg, #4A1010 0%, #8B2E15 35%, #C4571E 65%, #D98530 100%);
}
.theme-autumn .quote {
  color: #FAF0DC;
  text-shadow: 0 2px 18px rgba(40, 10, 5, 0.55);
}
.theme-autumn .hint { color: rgba(250, 240, 220, 0.45); }

/* ─── Fonts ───────────────────────────────────────────────── */

/* Elegant editorial serif */
.font-playfair {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
}

/* Friendly, rounded — warm and approachable */
.font-pacifico {
  font-family: 'Pacifico', 'Brush Script MT', cursive;
}

/* Heavy display — bold and unapologetic */
.font-abril {
  font-family: 'Abril Fatface', Georgia, serif;
}

/* Delicate italic serif — refined and quiet */
.font-cormorant {
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-weight: 600;
  font-style: italic;
}

/* Flowing handwritten script — personal and warm */
.font-dancing {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
}

/* Classical Roman inscription — timeless and still */
.font-cinzel {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Geometric thin sans — open and airy */
.font-raleway {
  font-family: 'Raleway', Arial, sans-serif;
  font-weight: 200;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}