:root {
  --paper: #f7f1e3;
  --paper-edge: #efe6cf;
  --ink: #26221b;
  --ink-soft: #6b6354;
  --gold: #a98f57;
  --gold-soft: #c7b483;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: "EB Garamond", Georgia, serif;
  background: radial-gradient(120% 90% at 50% 16%, var(--paper) 0%, var(--paper-edge) 70%, #e7dcc1 100%);
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 6vw;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

.stage {
  perspective: 1500px;
  width: 100%;
  max-width: 420px;
}

.card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  min-height: 520px;
  cursor: pointer;
  outline: none;
}

.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(.2, .7, .2, 1);
}

.card.flipped .card-inner { transform: rotateY(180deg); }

/* Respect the OS "reduce motion" preference: swap faces instantly, no spin.
   app.js mirrors this (FLIP_SWAP_MS -> 0) so "draw another" doesn't sit on a
   blank face while waiting for a transition that no longer runs. */
@media (prefers-reduced-motion: reduce) {
  .card-inner { transition: none; }
}

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 46px 36px;
  border: 1px solid var(--gold-soft);
  background: linear-gradient(180deg, #fffdf7, #f7f1e3);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 22px 55px -30px rgba(60, 48, 20, 0.5);
}

/* faint inner hairline frame on both faces */
.face::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(169, 143, 87, 0.28);
  pointer-events: none;
}

.face--up { transform: rotateY(180deg); }

/* ---- face-down (the back) ---- */
.back-mark { font-size: 64px; line-height: 1; color: var(--gold); }

/* iOS Safari ignores backface-visibility under preserve-3d, so the back face
   used to bleed through mirrored. The real fix is the OPAQUE .face background
   above — an opaque front face fully covers the back on every engine, so nothing
   shows through. The two rules below are belt-and-suspenders (soften the mark,
   hide the hint when flipped) in case a future translucent tweak reopens the gap. */
.card.flipped .back-mark { color: var(--gold-soft); opacity: 0.5; }
.card.flipped .back-hint { visibility: hidden; }
.back-hint {
  margin-top: 28px;
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  letter-spacing: 0.36em;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
  padding-left: 0.36em;
}

/* ---- face-up (the card) ---- */
.eyebrow {
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  letter-spacing: 0.38em;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 30px;
  padding-left: 0.38em;
}

.saying {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 22ch;
}

.divider {
  margin: 30px auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold);
}
.divider .rule { height: 1px; width: 46px; background: linear-gradient(90deg, transparent, var(--gold-soft)); }
.divider .rule.right { background: linear-gradient(90deg, var(--gold-soft), transparent); }
.divider .mark { font-size: 16px; line-height: 1; }

.accent {
  font-family: "Great Vibes", cursive;
  font-size: 28px;
  line-height: 1.1;
  color: var(--gold);
}

.meaning {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 30ch;
  margin-top: 22px;
}

.another {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  color: var(--ink);
  padding: 8px 10px;
  padding-left: calc(0.22em + 10px);
  opacity: 1;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.another:hover { opacity: 0.65; }

@media (max-width: 480px) {
  .stage { max-width: 340px; }
  .card { min-height: 460px; }
  .saying { font-size: 26px; max-width: 20ch; }
  .face { padding: 40px 26px; }
  .back-mark { font-size: 56px; }
}