:root {
  --navy: #1e2866;
  --navy-soft: #4a5488;
  --blue: #3d6fb4;
  --gold: #b8872e;
  --gold-soft: #e7c77a;
  --line: rgba(184, 135, 46, 0.38);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.88);
  --cream: #fbf6ea;
  --live: #d93d43;
  --display: "Cormorant Garamond", Georgia, serif;
  --script: "Pinyon Script", cursive;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(48, 78, 130, 0.18);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: #dcebfa;
  color: var(--navy);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  font-variant-numeric: lining-nums;
}

/* The sky: a fixed layer (iOS ignores background-attachment: fixed). Drawn clouds over Lake
   Managua with Momotombo on the horizon (assets/sky.svg), and a warm glow behind the Virgin. */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 72% 18%, rgba(255, 246, 214, 0.95) 0%, rgba(255, 246, 214, 0) 70%),
    url("assets/sky.svg") center bottom / cover no-repeat,
    linear-gradient(180deg, #b7d4f2 0%, #d6e7f9 38%, #eef2f1 70%, #f8f3e6 100%);
  background-color: #dcebfa;
}

[hidden] { display: none !important; }

/* ---- top bar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px max(16px, calc((100vw - 1240px) / 2));
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.brand-script { font-family: var(--script); font-size: 32px; line-height: 1; color: var(--navy); white-space: nowrap; }
.brand-sub { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 600; white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.viewers { font-size: 14px; color: var(--navy-soft); white-space: nowrap; }
.viewers > span:first-child { color: var(--live); }
.viewers b { color: var(--navy); }
.badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-soon { color: var(--gold); background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line); }
.badge-live { color: #fff; background: var(--live); animation: pulse 2s infinite; }
.badge-live::before { content: "● "; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 61, 67, 0.5); } 70% { box-shadow: 0 0 0 12px rgba(217, 61, 67, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 61, 67, 0); } }

/* ---- hero ---- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; position: relative; }
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 24px;
  padding: 44px 0 24px;
}
.hero > .hero-text, .hero > .hero-art { position: relative; z-index: 1; }

/* Lilies at the four corners of the PAGE (not of the content column), like the invitation's frame.
   Their width is the free margin beside the 1240 px column, so they never cover content; below
   about 1400 px there is no such margin and the top pair is hidden. */
.lily { display: block; height: auto; pointer-events: none; }
.corners-top { position: relative; height: 0; z-index: 0; }
.corners-top .lily { position: absolute; top: 0; width: clamp(0px, calc((100vw - 1240px) / 2 + 4px), 190px); }
.lily-tl { left: 0; }
.lily-tr { right: 0; }
.hero.compact { grid-template-columns: 1fr; padding: 18px 0 14px; }
.hero.compact .hero-art, .hero.compact .countdown, .hero.compact .local-time { display: none !important; }
.hero.compact h1 { font-size: clamp(36px, 5vw, 50px); }
.eyebrow { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(54px, 9vw, 104px);
  line-height: 0.95;
  margin: 0;
  color: var(--navy);
  text-shadow: 0 2px 30px rgba(255, 255, 255, 0.8);
}
.cry { font-family: var(--display); font-size: clamp(21px, 2.6vw, 28px); margin: 10px 0 14px; color: var(--navy); }
.cry em { color: var(--blue); font-weight: 600; }
.when { margin: 0; font-weight: 600; font-size: 17px; }
.tz { font-weight: 400; color: var(--navy-soft); }
.local-time { margin: 2px 0 0; color: var(--navy-soft); font-size: 15px; }
.countdown { display: flex; gap: 10px; margin-top: 22px; }
.countdown div {
  min-width: 78px;
  padding: 10px 8px 8px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--glass);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(48, 78, 130, 0.12);
}
.countdown b { display: block; font-family: var(--display); font-size: 42px; line-height: 1; color: var(--navy); font-variant-numeric: lining-nums tabular-nums; }
.countdown span { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.hero-art {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(184, 135, 46, 0.25));
}

/* ---- welcome (code) ---- */
.gate { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 8px 0 48px; }
.gate-card {
  width: 100%;
  max-width: 480px;
  text-align: center;
  padding: 26px 24px 28px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--glass-strong);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.gate-card h2 { margin: 0 0 6px; font-family: var(--display); font-size: 36px; font-weight: 600; color: var(--navy); }
.gate-card label { display: block; font-weight: 600; }
.gate-card label span { display: block; font-weight: 400; font-size: 14px; color: var(--navy-soft); }
.code-row { display: flex; gap: 8px; margin-top: 14px; }
.code-row input { flex: 1; min-width: 0; font: inherit; font-size: 20px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--navy); }
.code-row input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.code-row button { font: inherit; font-weight: 700; padding: 11px 20px; border: 0; border-radius: 12px; background: var(--navy); color: #fff; cursor: pointer; }
.code-row button:hover, .code-row button:focus-visible { background: var(--blue); outline: none; }
.code-error { color: #a1262b; margin: 10px 0 0; font-weight: 600; }

/* ---- stage: player + chat ---- */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
  padding-bottom: 28px;
}
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0d1230;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow), 0 0 0 1px var(--line);
}
.player video { width: 100%; height: 100%; display: block; background: #0d1230; }
.play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 34px 16px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  font-family: var(--ui);
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--gold-soft), 0 20px 50px rgba(0, 0, 0, 0.35);
}
.play:hover, .play:focus-visible { outline: none; background: #fff; box-shadow: 0 0 0 3px var(--gold), 0 20px 50px rgba(0, 0, 0, 0.35); }
.play-icon { width: 0; height: 0; border-left: 30px solid var(--navy); border-top: 18px solid transparent; border-bottom: 18px solid transparent; margin: 2px 0 6px 8px; }
.play-es { font-size: 22px; font-weight: 700; }
.play-en { font-size: 14px; color: var(--navy-soft); }

.floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.float { position: absolute; bottom: -40px; width: 38px; height: 38px; animation: rise 3.4s ease-out forwards; }
@keyframes rise {
  0% { transform: translate(0, 0) scale(0.7); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--dx), -78%) scale(1.15); opacity: 0; }
}

.under {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px;
  padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow);
}
.status p { margin: 0; }
#status-es { font-family: var(--display); font-size: 23px; font-weight: 600; }
#status-en { font-size: 14px; color: var(--navy-soft); }
.reactions { display: flex; flex-wrap: wrap; gap: 6px; }
.reactions button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--glass-strong);
  box-shadow: 0 4px 12px rgba(48, 78, 130, 0.12);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.reactions button img { width: 26px; height: 26px; }
.reactions button:hover { background: #fff; }
.reactions button:active { transform: scale(0.88); }
.reactions button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.chat {
  display: flex;
  flex-direction: column;
  height: min(78vh, 640px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.chat-head { padding: 16px 18px 10px; border-bottom: 1px solid var(--line); }
.chat-head h2 { margin: 0; font-family: var(--display); font-size: 30px; font-weight: 600; color: var(--navy); }
.chat-head p { margin: 0; font-size: 14px; color: var(--navy-soft); }
.messages { list-style: none; margin: 0; padding: 12px 14px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.messages li { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 8px rgba(48, 78, 130, 0.08); animation: pop 0.25s ease-out; }
.messages li.mine { background: #fff6dd; }
.messages .who { display: block; font-size: 14px; font-weight: 700; color: var(--gold); }
.messages .from { font-weight: 400; color: var(--navy-soft); }
.messages .txt { display: block; overflow-wrap: anywhere; }
.messages .empty { background: none; box-shadow: none; color: var(--navy-soft); font-style: italic; text-align: center; padding-top: 24px; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.chat-state { margin: 0; padding: 4px 14px; font-size: 13px; color: var(--navy-soft); }
.composer { padding: 10px 14px 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; background: rgba(255, 255, 255, 0.5); }
.composer input {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
}
.composer input::placeholder { color: #8a90ad; }
.composer input:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; }
.who-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.who-line { margin: 0; font-size: 14px; color: var(--navy-soft); }
.who-line b { color: var(--navy); }
.link { background: none; border: 0; padding: 0; color: var(--blue); text-decoration: underline; cursor: pointer; font: inherit; }
.send-row { display: flex; gap: 8px; }
.send { font: inherit; font-weight: 700; padding: 10px 16px; border: 0; border-radius: 12px; background: var(--navy); color: #fff; cursor: pointer; }
.send:hover, .send:focus-visible { background: var(--blue); outline: none; }
.chat-error { margin: 0; font-size: 14px; color: #a1262b; }
.emoji-toggle { flex: none; width: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; display: grid; place-items: center; }
.emoji-toggle img { width: 24px; height: 24px; }
.emoji-toggle[aria-expanded="true"] { background: #fff6dd; }
.emoji-tray { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.emoji-tray button { width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; cursor: pointer; display: grid; place-items: center; }
.emoji-tray button:hover, .emoji-tray button:focus-visible { background: #fff6dd; outline: none; }
.emoji-tray img { width: 26px; height: 26px; }
.emo { width: 1.25em; height: 1.25em; vertical-align: -0.25em; margin: 0 0.05em; }

.griteria-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  border-radius: 14px;
  border: 1px solid #c79a3e;
  background: linear-gradient(180deg, #fffaf0, #f6e7c1);
  color: var(--navy);
  font-family: var(--display);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(184, 135, 46, 0.25);
}
.griteria-btn:hover, .griteria-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--gold-soft), 0 4px 14px rgba(184, 135, 46, 0.3); }
.griteria-btn:active { transform: scale(0.97); }
.gb-es { font-size: 20px; font-weight: 700; font-style: italic; line-height: 1.1; }
.gb-en { font-family: var(--ui); font-size: 12px; color: var(--navy-soft); }

/* ---- footer ---- */
.foot { position: relative; display: grid; place-items: center; min-height: 250px; padding: 24px 16px 32px; text-align: center; color: var(--navy-soft); }
.foot p { margin: 0; position: relative; z-index: 1; }
.foot-inner { display: inline-block; padding: 8px 26px 10px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.foot-script { font-family: var(--script); font-size: 38px; color: var(--navy); }
.foot-small { font-size: 12px; }
.foot .lily { position: absolute; bottom: 0; width: 180px; }
.lily-bl { left: 0; }
.lily-br { right: 0; }
.signout { font-size: 13px; color: var(--navy-soft); }

/* ---- smaller screens ---- */
@media (max-width: 1400px) {
  .corners-top { display: none; }
}
@media (max-width: 960px) {
  .stage { grid-template-columns: 1fr; }
  .chat { height: 70vh; min-height: 420px; }
}
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; padding-top: 18px; text-align: center; }
  .hero-art { order: -1; width: min(360px, 90%); margin: 0 auto; }
  .countdown { justify-content: center; }
  .countdown div { min-width: 64px; }
  .countdown b { font-size: 34px; }
  .brand-sub, .viewers-label { display: none; }
  .brand-script { font-size: 28px; }
  .under { justify-content: center; text-align: center; }
  .hero-text { padding: 14px 12px 16px; border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); }
  .under { padding: 10px 8px; }
  .griteria-btn { width: 100%; }
  .reactions { justify-content: center; gap: 4px; flex-wrap: nowrap; }
  .reactions button { width: 32px; height: 32px; }
  .reactions button img { width: 20px; height: 20px; }
  .who-fields { grid-template-columns: 1fr; }
  .foot { min-height: 150px; }
  .foot .lily { width: 104px; }
  .foot-inner { border-radius: 20px; padding: 8px 16px 10px; }
  .foot-script { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .float { animation: fade 1.6s ease-out forwards; bottom: 30%; }
  @keyframes fade { from { opacity: 1; } to { opacity: 0; } }
  .badge-live { animation: none; }
  .messages li { animation: none; }
}