/* ------------------------------------------------------------------
   中秋灯谜 · Mid-Autumn Riddles
   Tokens first, then the sky, then the paper slip and its parts.
   Design notes live in design/notes.md.
   ------------------------------------------------------------------ */

:root {
  --night: #12204a;        /* midnight indigo, the page base */
  --night-deep: #0a1230;   /* bottom of the sky */
  --night-glow: #24397a;   /* glow around the moon */
  --moon: #f6e6b3;         /* moon cream, text on the night */
  --gold: #e6b84a;         /* gold ink, the title and focus rings */
  --gold-deep: #a97d14;    /* gold that reads on paper */
  --lantern: #c8102e;      /* lantern red, the primary action */
  --lantern-deep: #9b0d24;
  --paper: #fbf4e6;        /* the riddle slip */
  --paper-top: #fdf8ec;
  --ink: #2a1f17;          /* text on paper */
  --ink-soft: #6b5a4c;     /* muted text on paper */
  --amber: #9a4b0f;        /* messages that ask for a correction */

  --font-display: "Fraunces", "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  --font-brush: "Ma Shan Zheng", "Songti SC", "STKaiti", "KaiTi", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, "Noto Sans SC", "Microsoft YaHei", sans-serif;

  --radius-paper: 6px;
  --radius-field: 10px;
  --shadow-slip: 0 26px 50px -14px rgba(4, 9, 33, 0.7);
}

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

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 640px) {
  html {
    font-size: 18px;
  }
}

body {
  position: relative;
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: var(--font-ui);
  line-height: 1.5;
  color: var(--moon);
  background-color: var(--night);
  background-image:
    radial-gradient(60rem 30rem at 50% -8rem, var(--night-glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);
}

/* Stars: two dot layers with different tile sizes, so no grid shows. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 8%, rgba(255, 255, 255, 0.65) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 85% 42%, rgba(246, 230, 179, 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 66%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 52% 88%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 44%, rgba(246, 230, 179, 0.6) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 92% 76%, rgba(255, 255, 255, 0.7) 50%, transparent 51%);
  background-size:
    230px 260px,
    230px 260px,
    230px 260px,
    310px 290px,
    310px 290px,
    310px 290px,
    310px 290px;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

/* ---------- Sky: lanterns and the moon ---------- */

.sky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24rem;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.lantern {
  position: absolute;
  top: -0.25rem;
  width: 4.6rem;
  height: auto;
  transform-origin: 50% 0;
  filter: drop-shadow(0 10px 18px rgba(200, 16, 46, 0.35));
  animation: sway 5.5s ease-in-out infinite alternate;
}

.lantern-left {
  left: max(3%, calc(50% - 17rem));
}

.lantern-right {
  right: max(3%, calc(50% - 17rem));
  top: 1.2rem;
  animation-duration: 6.5s;
  animation-delay: -2.8s;
}

@media (min-width: 640px) {
  .lantern {
    width: 6.2rem;
  }
}

@keyframes sway {
  from {
    transform: rotate(-2.6deg);
  }
  to {
    transform: rotate(2.6deg);
  }
}

.page {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  margin: 0 auto;
  padding: 0 1rem 1rem;
}

.hero {
  text-align: center;
  padding-top: max(1.5rem, env(safe-area-inset-top));
}

.moon {
  width: 8.5rem;
  height: 8.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background-image:
    radial-gradient(circle at 64% 60%, rgba(196, 160, 92, 0.28) 0 7%, transparent 8%),
    radial-gradient(circle at 36% 68%, rgba(196, 160, 92, 0.22) 0 5%, transparent 6%),
    radial-gradient(circle at 58% 30%, rgba(196, 160, 92, 0.18) 0 4%, transparent 5%),
    radial-gradient(circle at 38% 34%, #fff8dc 0%, #f6e6b3 48%, #e6cd86 100%);
  box-shadow:
    0 0 34px 10px rgba(246, 230, 179, 0.32),
    0 0 110px 44px rgba(246, 230, 179, 0.12);
  animation: rise 1.4s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.title {
  margin: 0;
  font-weight: 400;
}

.title-zh {
  display: block;
  font-family: var(--font-brush);
  font-size: 3rem;
  line-height: 1.15;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-shadow: 0 2px 18px rgba(230, 184, 74, 0.35);
}

.title-en {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--moon);
}

/* The cord from the lanterns down to the slip, with a knot at the end. */
.cord {
  position: relative;
  width: 2px;
  height: 2.4rem;
  margin: 0.6rem auto 0;
  background: var(--lantern);
}

.cord::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--lantern);
  transform: translateX(-50%);
}

/* While a riddle is open the moon steps back, so the slip gets more of a phone screen. */
.moon,
.title-zh,
.title-en,
.cord {
  transition:
    width 0.5s ease,
    height 0.5s ease,
    margin 0.5s ease,
    font-size 0.5s ease;
}

body.riddle-open .moon {
  width: 6rem;
  height: 6rem;
  margin-bottom: 0.6rem;
}

body.riddle-open .title-zh {
  font-size: 2.3rem;
}

body.riddle-open .title-en {
  font-size: 1rem;
}

body.riddle-open .cord {
  height: 1.6rem;
}

/* ---------- The paper slip ---------- */

.slip {
  position: relative;
  padding: 1.6rem 1.35rem 1.5rem;
  border-radius: var(--radius-paper);
  background: linear-gradient(180deg, var(--paper-top) 0%, var(--paper) 100%);
  color: var(--ink);
  text-align: center;
  box-shadow: var(--shadow-slip);
  outline: 1px solid rgba(200, 16, 46, 0.28); /* the thin red frame of a riddle slip */
  outline-offset: -8px;
}

/* Bilingual text: Chinese first, English below. */
.bi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  margin: 0;
}

.bi .zh {
  font-weight: 600;
}

.bi .en {
  font-size: 0.92em;
  color: var(--ink-soft);
}

.heading {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  line-height: 1.45;
}

.heading .en {
  font-weight: 400;
}

.field {
  display: block;
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 1.15rem;
  text-align: center;
  color: var(--ink);
  background: #fff;
  border: 2px solid rgba(42, 31, 23, 0.25);
  border-radius: var(--radius-field);
  transition: border-color 0.2s;
}

.field:focus-visible {
  border-color: var(--gold-deep);
  outline-color: var(--gold);
}

.code-field {
  padding: 0.4rem 0.6rem 0.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.code-field::placeholder {
  color: rgba(42, 31, 23, 0.28);
}

.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--amber);
}

.message .zh {
  font-weight: 600;
}

.message .en {
  color: var(--amber);
  opacity: 0.85;
}

.shake {
  animation: shake 0.4s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  50% {
    transform: translateX(6px);
  }
  75% {
    transform: translateX(-3px);
  }
}

/* Buttons are pills: the one round shape on the page, like the lanterns. */
.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  width: 100%;
  min-height: 3.4rem;
  margin-top: 0.9rem;
  padding: 0.6rem 1rem;
  font: inherit;
  line-height: 1.3;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
}

.btn .zh {
  font-size: 1.05rem;
  font-weight: 600;
}

.btn .en {
  font-size: 0.82rem;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  color: #fff;
  background: var(--lantern);
  box-shadow: 0 8px 18px -8px rgba(200, 16, 46, 0.7);
}

.btn-primary .en {
  color: rgba(255, 255, 255, 0.85);
}

.btn-primary:hover {
  background: var(--lantern-deep);
}

.btn-ghost {
  color: var(--ink);
  background: transparent;
  border: 1.5px solid rgba(42, 31, 23, 0.35);
}

.btn-ghost .en {
  color: var(--ink-soft);
}

.btn-ghost:hover {
  background: rgba(42, 31, 23, 0.06);
}

/* ---------- Riddle view ---------- */

.slip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: -0.4rem 0 0.4rem;
}

.btn-back {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0.2rem;
  font: inherit;
  color: var(--lantern-deep);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(155, 13, 36, 0.4);
  text-underline-offset: 0.18em;
}

.btn-back .zh {
  font-size: 0.95rem;
  font-weight: 600;
}

.btn-back .en {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.code-chip {
  flex: none;
  padding: 0.2rem 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--moon);
  background: var(--night);
  border-radius: 999px;
}

.riddle-text {
  margin: 1rem 0 0.3rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.5;
  text-wrap: balance;
}

.riddle-text[lang="zh-Hans"] {
  font-size: 1.75rem;
  line-height: 1.7;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Long English riddles step down one size so the guess field stays close. */
.riddle-text--long {
  font-size: 1.25rem;
  line-height: 1.5;
}

/* A Chinese riddle shows one clause per line, like a paper riddle slip. */
.riddle-text .clause {
  display: block;
}

.riddle-hint {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.riddle-hint::before {
  content: "（";
}

.riddle-hint::after {
  content: "）";
}

.guess {
  margin-top: 1.5rem;
}

.prompt {
  margin-bottom: 0.6rem;
  line-height: 1.45;
}

.prompt .zh {
  font-size: 1.1rem;
}

.prompt .en {
  font-size: 0.92rem;
}

.nudge {
  margin: 1.1rem 0 -0.2rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.nudge .zh {
  font-weight: 500;
}

/* The answer sits under a dashed tear line. */
.answer {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(42, 31, 23, 0.3);
  animation: unfold 0.45s ease-out both;
}

@keyframes unfold {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.answer-label {
  font-size: 1rem;
  color: var(--ink-soft);
}

.answer-label .en {
  font-size: 0.85rem;
}

.answer.is-correct .answer-label .zh {
  font-size: 1.35rem;
  color: var(--gold-deep);
}

.answer.is-correct .answer-label .en {
  color: var(--gold-deep);
}

.answer-text {
  margin: 0.35rem 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.3rem;
  line-height: 1.25;
  color: var(--lantern-deep);
  overflow-wrap: anywhere;
}

.answer-text[lang="zh-Hans"] {
  letter-spacing: 0.1em;
}

.answer-text--long {
  font-size: 1.5rem;
  line-height: 1.4;
}

.your-guess {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.your-guess .zh {
  font-weight: 500;
}

/* ---------- Footer ---------- */

.footer {
  position: relative;
  z-index: 1;
  margin: 2.5rem 0 1.5rem;
  padding: 0 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(246, 230, 179, 0.8);
}

.footer .bi .en,
.footer .credit {
  color: rgba(246, 230, 179, 0.65);
}

.footer .credit {
  margin: 0.5rem 0 0;
}

/* ---------- Celebration ---------- */

.congrats-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 18, 48, 0.86);
  cursor: pointer;
  animation: fade-in 0.4s ease-out both;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.congrats-content {
  text-align: center;
}

.congrats-zh {
  margin: 0;
  font-family: var(--font-brush);
  font-size: 3.4rem;
  line-height: 1.2;
  color: var(--gold);
  text-shadow: 0 0 28px rgba(230, 184, 74, 0.55);
}

.congrats-en {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--moon);
}

.congrats-tap {
  margin-top: 1.8rem;
  font-size: 0.9rem;
  color: rgba(246, 230, 179, 0.7);
}

.congrats-tap .zh {
  font-weight: 500;
}

.congrats-tap .en {
  color: rgba(246, 230, 179, 0.6);
}

.fireworks {
  position: fixed;
  inset: 0;
  z-index: 1001;
  pointer-events: none;
}

.firework {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation: explode 1s ease-out forwards;
}

@keyframes explode {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0);
  }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}