:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; }
[hidden] { display: none !important; }

.theme-black-gold {
  --page: #08090b;
  --page-glow: rgba(158, 112, 48, .16);
  --card: #11100f;
  --card-edge: rgba(209, 164, 88, .35);
  --text: #f3ede2;
  --muted: #c4b7a3;
  --accent: #d5ab67;
  --accent-strong: #f3d49b;
  --gold-gradient: linear-gradient(135deg, #9d7237 4%, #f8dfac 32%, #c49553 62%, #f5d89e 88%);
  --halo: rgba(216, 163, 82, .26);
  --toolbar: #181613;
  --shadow: 0 32px 80px rgba(0, 0, 0, .32);
  background: var(--page);
  color: var(--text);
}

.theme-champagne-gold {
  color-scheme: light;
  --page: #f5efe5;
  --page-glow: rgba(222, 185, 127, .22);
  --card: #fffaf2;
  --card-edge: rgba(171, 127, 65, .36);
  --text: #4d3c2c;
  --muted: #796b5d;
  --accent: #a77a42;
  --accent-strong: #805929;
  --gold-gradient: linear-gradient(135deg, #a37339 4%, #dbb87a 32%, #9e7038 66%, #d2ac71 92%);
  --halo: rgba(196, 145, 73, .25);
  --toolbar: #fffaf2;
  --shadow: 0 28px 70px rgba(107, 74, 37, .13);
  background: var(--page);
  color: var(--text);
}

.page-shell {
  min-height: 100svh;
  padding: 20px 16px calc(32px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse 95% 33% at 50% 0%, var(--page-glow), transparent 80%), var(--page);
  transition: background-color .4s ease, color .4s ease;
}

.greeting {
  position: relative;
  isolation: isolate;
  width: min(100%, 680px);
  margin: 0 auto;
  padding: 1px;
  background: linear-gradient(150deg, var(--card-edge), transparent 31%, transparent 67%, var(--card-edge));
  box-shadow: var(--shadow);
}

.greeting::before {
  position: absolute;
  inset: 8px;
  border: 1px solid var(--card-edge);
  pointer-events: none;
  content: "";
}

.greeting__inner {
  position: relative;
  min-height: 760px;
  padding: 50px clamp(28px, 7vw, 76px) 38px;
  background: var(--card);
  text-align: center;
}

.hero { position: relative; }
.eyebrow,
.hero__caption {
  margin: 0;
  color: var(--accent);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .27em;
  line-height: 1.5;
  text-transform: uppercase;
}

.hero__caption { margin-top: -12px; }
.hero__number-wrap {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(202px, 57vw, 270px);
  overflow: hidden;
}

.hero__number {
  position: relative;
  z-index: 1;
  background: var(--gold-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(10.5rem, 47vw, 15rem);
  font-weight: 400;
  letter-spacing: -.105em;
  line-height: 1;
  padding-right: .12em;
  filter: drop-shadow(0 0 22px var(--halo));
}

.hero__halo {
  position: absolute;
  width: min(74%, 310px);
  aspect-ratio: 1;
  border: 1px solid var(--card-edge);
  border-radius: 50%;
  box-shadow: 0 0 65px 4px var(--halo), inset 0 0 50px var(--halo);
}

.hero__spark {
  position: absolute;
  z-index: 2;
  color: var(--accent-strong);
  font-size: 1.35rem;
  text-shadow: 0 0 16px var(--accent);
}
.hero__spark--one { top: 15%; right: 17%; }
.hero__spark--two { bottom: 21%; left: 13%; font-size: 1rem; }
.hero__spark--three { bottom: 20%; right: 12%; font-size: .68rem; }

.ornament {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(100%, 230px);
  margin: 36px auto 34px;
  color: var(--accent);
  font-size: .75rem;
}
.ornament::before,
.ornament::after { flex: 1; height: 1px; background: var(--card-edge); content: ""; }

.letter__salutation {
  margin: 0 0 28px;
  color: var(--accent-strong);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.05rem, 7vw, 2.8rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.22;
}
.letter__body p {
  margin: 0 auto 21px;
  max-width: 480px;
  color: var(--text);
  font-size: clamp(1rem, 3.6vw, 1.08rem);
  line-height: 1.72;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.letter__body p:last-child { margin-bottom: 0; }
.letter__wish {
  margin: 31px 0 0;
  color: var(--accent-strong);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 6vw, 2rem);
  line-height: 1.3;
}
.letter__signature {
  margin-top: 35px;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.55;
}
.letter__signature p { margin: 0; }
.letter__signature p:first-child { margin-bottom: 6px; font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.letter__signature p:last-child { color: var(--text); font-weight: 600; }
.ornament--footer { margin: 37px auto 23px; }

.replay-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .78rem;
  letter-spacing: .04em;
}
.replay-button:hover { color: var(--accent-strong); }
.replay-button:focus-visible,
.variant-button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

/* Náhledové ovládání je samostatný blok mimo přání; lze jej celé odstranit. */
.preview-controls {
  display: grid;
  gap: 10px;
  justify-items: center;
  width: min(100%, 680px);
  margin: 22px auto 0;
  padding: 15px 12px;
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  background: var(--toolbar);
}
.preview-controls__label {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.preview-controls__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.variant-button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--card-edge);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
}
.variant-button span { margin-left: 4px; font-weight: 400; }
.variant-button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--card); }

/* Průběh úvodu: 0–9,3 s. Bez třídy is-playing zůstává vše čitelné. */
.is-playing [data-reveal] { opacity: 0; }
.animation-classic.is-playing [data-reveal="intro"] { animation: reveal-up .9s ease-out .2s both; }
.animation-classic.is-playing [data-reveal="number"] { animation: number-in 1.7s cubic-bezier(.2,.8,.2,1) 1.1s both; }
.animation-classic.is-playing .hero__halo { animation: halo-in 2.1s ease-in-out 2.2s both; }
.animation-classic.is-playing .hero__spark { animation: spark-in 1.4s ease-in-out 2.7s both; }
.animation-classic.is-playing [data-reveal="salutation"] { animation: reveal-up .9s ease-out 3.8s both; }
.animation-classic.is-playing [data-reveal="paragraph-1"] { animation: reveal-up .9s ease-out 4.7s both; }
.animation-classic.is-playing [data-reveal="paragraph-2"] { animation: reveal-up .9s ease-out 5.6s both; }
.animation-classic.is-playing [data-reveal="paragraph-3"] { animation: reveal-up .9s ease-out 6.5s both; }
.animation-classic.is-playing [data-reveal="wish"] { animation: reveal-up .9s ease-out 7.4s both; }
.animation-classic.is-playing [data-reveal="signature"] { animation: reveal-up .9s ease-out 8.2s both; }

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes number-in {
  from { opacity: 0; transform: scale(.85); filter: blur(8px); }
  to { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 22px var(--halo)); }
}
@keyframes halo-in {
  from { opacity: 0; transform: scale(.8); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes spark-in {
  from { opacity: 0; transform: scale(.45) rotate(-35deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@media (max-width: 360px) {
  .page-shell { padding: 10px 8px calc(20px + env(safe-area-inset-bottom)); }
  .greeting__inner { padding: 39px 26px 28px; }
  .hero__number-wrap { height: 190px; }
  .hero__number { font-size: min(9.8rem, 49vw); }
  .ornament { margin-top: 25px; margin-bottom: 26px; }
  .letter__body p { line-height: 1.62; }
}

@media (min-width: 700px) and (orientation: landscape) {
  .page-shell { padding-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .is-playing [data-reveal] { opacity: 1; }
}