/* ════════════════════════════════════════════════════════════
   THE ONE — Atelier design system
   Ivory porcelain · embossed florals · rose-gold metal · blush light
   ════════════════════════════════════════════════════════════ */

:root {
  /* palette aligned to promisetheone.com (Lumière layer) */
  --ivory-0: #fdfbf7;
  --ivory-1: #f8f2ea;
  --ivory-2: #f1e7dd;
  --blush-0: #fae7e9;
  --blush-1: #f6d9dc;
  --rose: #dc93a0;
  --rose-deep: #b76e79;
  --rose-soft: #cb8f98;
  --wine: #7C4A55;
  --ink: #2b2125;
  --ink-soft: #6E5A5C;
  --taupe: #A78B82;
  --line: #eddfd6;
  --line-strong: #e2cfc4;
  --glow: #f4b8bf;
  --rose-rgb: 220 147 160;
  --blush-rgb: 244 184 191;
  --rosegold-rgb: 183 110 121;
  --metal-1: #8E4F5C;
  --metal-2: #C98E92;
  --metal-3: #F4D9CE;
  --metal-4: #93545F;

  --grad-metal: linear-gradient(160deg, var(--metal-1) 0%, var(--metal-2) 28%, var(--metal-3) 50%, var(--metal-2) 72%, var(--metal-4) 100%);
  --grad-rose: linear-gradient(135deg, #ecaab3 0%, #d88e9c 55%, #c77e8e 100%);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Avenir Next', system-ui, sans-serif;
  --trajan: 'Cinzel', 'Cormorant Garamond', serif;

  --shadow-soft: 0 1px 2px rgb(43 33 37 / .04), 0 10px 26px -14px rgb(var(--rosegold-rgb) / .3);
  --shadow-card: 0 1px 2px rgb(43 33 37 / .05), 0 18px 44px -18px rgb(var(--rosegold-rgb) / .36), 0 0 38px -6px rgb(var(--blush-rgb) / .34);
  --shadow-float: 0 24px 70px -28px rgb(var(--rosegold-rgb) / .5), 0 0 52px -4px rgb(var(--blush-rgb) / .5);
  --glow-line: linear-gradient(90deg, transparent 1%, rgb(var(--rosegold-rgb) / 0) 9%, rgb(var(--rosegold-rgb) / .45) 28%, #f2c4ca 50%, rgb(var(--rosegold-rgb) / .45) 72%, rgb(var(--rosegold-rgb) / 0) 91%, transparent 99%);
  --glow-bloom: 0 0 18px 2px rgb(var(--blush-rgb) / .75), 0 2px 34px 4px rgb(var(--blush-rgb) / .42);

  /* white-on-white embossed floral tile */
  --floral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='0 0 440 440'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23DCC8BE' stroke-opacity='.5' stroke-width='2' transform='translate(0,1.4)'%3E%3Cpath d='M18 128 C52 64 118 38 178 56 C150 70 132 92 128 120 C112 96 84 86 58 96 C76 108 88 126 90 148 C62 132 34 130 18 128 Z'/%3E%3Cpath d='M178 56 C210 70 228 96 230 128'/%3E%3Cpath d='M310 96 c14 -26 48 -28 60 -6 c12 -22 46 -18 54 6 c8 22 -10 40 -28 46 c16 8 22 30 8 44 c-14 14 -36 8 -44 -6 c-6 16 -28 22 -42 10 c-14 -12 -10 -34 4 -42 c-18 -4 -26 -34 -12 -52 Z'/%3E%3Ccircle cx='366' cy='128' r='9'/%3E%3Cpath d='M52 330 C84 296 134 290 168 312 C146 318 130 334 124 354 C108 336 84 330 52 330 Z'/%3E%3Cpath d='M168 312 C196 330 206 356 200 386'/%3E%3Cpath d='M300 280 q40 24 36 72 q-34 -10 -36 -72 Z'/%3E%3Cpath d='M336 352 q44 -16 76 12 q-38 22 -76 -12 Z'/%3E%3Cpath d='M232 196 q10 -22 34 -22 q-4 24 -34 22 Z'/%3E%3Cpath d='M404 220 q-26 2 -34 26 q26 4 34 -26 Z'/%3E%3Ccircle cx='258' cy='248' r='3'/%3E%3Ccircle cx='86' cy='222' r='3'/%3E%3Ccircle cx='388' cy='52' r='3'/%3E%3Ccircle cx='198' cy='420' r='3'/%3E%3C/g%3E%3Cg stroke='%23FFFFFF' stroke-opacity='.95' stroke-width='2'%3E%3Cpath d='M18 128 C52 64 118 38 178 56 C150 70 132 92 128 120 C112 96 84 86 58 96 C76 108 88 126 90 148 C62 132 34 130 18 128 Z'/%3E%3Cpath d='M178 56 C210 70 228 96 230 128'/%3E%3Cpath d='M310 96 c14 -26 48 -28 60 -6 c12 -22 46 -18 54 6 c8 22 -10 40 -28 46 c16 8 22 30 8 44 c-14 14 -36 8 -44 -6 c-6 16 -28 22 -42 10 c-14 -12 -10 -34 4 -42 c-18 -4 -26 -34 -12 -52 Z'/%3E%3Ccircle cx='366' cy='128' r='9'/%3E%3Cpath d='M52 330 C84 296 134 290 168 312 C146 318 130 334 124 354 C108 336 84 330 52 330 Z'/%3E%3Cpath d='M168 312 C196 330 206 356 200 386'/%3E%3Cpath d='M300 280 q40 24 36 72 q-34 -10 -36 -72 Z'/%3E%3Cpath d='M336 352 q44 -16 76 12 q-38 22 -76 -12 Z'/%3E%3Cpath d='M232 196 q10 -22 34 -22 q-4 24 -34 22 Z'/%3E%3Cpath d='M404 220 q-26 2 -34 26 q26 4 34 -26 Z'/%3E%3Ccircle cx='258' cy='248' r='3'/%3E%3Ccircle cx='86' cy='222' r='3'/%3E%3Ccircle cx='388' cy='52' r='3'/%3E%3Ccircle cx='198' cy='420' r='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--ivory-1);
  color: var(--ink);
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
/* Whisper of paper grain so flat fills feel printed, not painted (as on promisetheone.com) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* ───────── Shell: centered phone canvas on embossed backdrop ───────── */
.stage {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background:
    radial-gradient(1100px 520px at 50% -160px, rgba(246,175,166,.16), transparent 65%),
    var(--floral),
    linear-gradient(180deg, var(--ivory-1), var(--ivory-0));
  background-size: auto, 300px 300px, auto;
}
.canvas {
  position: relative;
  width: 100%;
  max-width: 432px;
  height: 100dvh;
  background:
    var(--floral),
    linear-gradient(180deg, #FDFAF8 0%, #FBF5F1 100%);
  background-size: 300px 300px, auto;
  background-attachment: local, scroll;
  box-shadow: 0 0 120px -30px rgba(183,110,121,.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 480px) {
  .canvas { border-left: 1px solid rgba(224,206,197,.6); border-right: 1px solid rgba(224,206,197,.6); }
}

#screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 110px;
  scroll-behavior: smooth;
}

/* ───────── Typography ───────── */
.metal {
  font-family: var(--trajan);
  background: var(--grad-metal);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.8)) drop-shadow(0 -0.5px 0.5px rgba(142,79,92,.35));
}
.metal.shimmer { animation: shimmer 7s ease-in-out infinite; }
@keyframes shimmer {
  0%, 100% { background-position: 0% 30%; }
  50% { background-position: 100% 70%; }
}
.eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--taupe);
}
.eyebrow.rose { color: var(--rose-deep); }
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 31px;
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--ink);
}
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.small { font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; }

.hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); border: 0; }
.flourish { display: flex; align-items: center; justify-content: center; gap: 12px; }
.flourish::before, .flourish::after { content: ""; height: 1px; width: 52px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.flourish::after { background: linear-gradient(90deg, var(--line-strong), transparent); }
.flourish svg { flex-shrink: 0; }

/* ───────── Door entrance ───────── */
.door {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: stretch; justify-content: center;
  background: var(--ivory-1);
  cursor: pointer;
  overflow: hidden;
}
.door-panel {
  position: relative;
  width: 50%;
  background:
    var(--floral),
    linear-gradient(180deg, #FCF8F5, #F6EDE7);
  background-size: 300px 300px, auto;
  display: flex; align-items: center;
  transition: transform 2s cubic-bezier(.76,.02,.22,1);
  will-change: transform;
  z-index: 2;
}
.door-panel.left { justify-content: flex-end; padding-right: 16%; box-shadow: inset -40px 0 60px -40px rgba(183,110,121,.18); }
.door-panel.right { justify-content: flex-start; padding-left: 16%; box-shadow: inset 40px 0 60px -40px rgba(183,110,121,.18); }
.door-word {
  font-family: var(--trajan);
  font-size: clamp(30px, 9vw, 44px);
  font-weight: 500;
  letter-spacing: .3em;
  white-space: nowrap;
}
.door-seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 6px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #F3A99F, #FBC9BC 16%, #FFE9DE 50%, #FBC9BC 84%, #F3A99F);
  box-shadow:
    0 0 22px 6px rgba(244,160,150,.95),
    0 0 70px 26px rgba(244,160,150,.6),
    0 0 170px 70px rgba(244,160,150,.4);
  z-index: 1;
  animation: seam-breathe 3s ease-in-out infinite;
}
.door-seam::after {
  content: "";
  position: absolute; left: 50%; top: 38%; width: 60px; height: 24%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,237,228,.95), rgba(246,175,166,.35), transparent);
  filter: blur(6px);
}
@keyframes seam-breathe {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}
.door-hint {
  position: absolute; bottom: 7%; left: 0; right: 0;
  text-align: center; z-index: 3;
  animation: hint-fade 2.6s ease-in-out infinite;
}
@keyframes hint-fade { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.door.open .door-panel.left { transform: translateX(-104%); }
.door.open .door-panel.right { transform: translateX(104%); }
.door.open .door-seam { animation: seam-flare 1.9s ease forwards; }
@keyframes seam-flare {
  0% { opacity: 1; }
  35% { opacity: 1; box-shadow: 0 0 60px 20px rgba(246,175,166,.95), 0 0 160px 70px rgba(246,175,166,.55); }
  100% { opacity: 0; box-shadow: none; }
}
.door.open { pointer-events: none; }
.door.gone { display: none; }
.door-fade { transition: opacity .8s ease 1.4s; }
.door.open.door-fade { opacity: 0; }

/* ───────── Top bar ───────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 12px;
  background: linear-gradient(180deg, rgb(253 251 247 / .96) 70%, rgb(253 251 247 / 0));
  backdrop-filter: blur(8px);
}
/* seam of light under the header — as on promisetheone.com */
.topbar::after {
  content: "";
  position: absolute; left: 10px; right: 10px; bottom: 4px;
  height: 1.5px;
  background: var(--glow-line);
  box-shadow: var(--glow-bloom);
  pointer-events: none;
}
.topbar .wordmark { font-size: 15px; letter-spacing: .34em; font-weight: 600; }
.chips { display: flex; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  background: #fffefc;
  border: 1px solid rgb(var(--rosegold-rgb) / .2);
  border-radius: 999px;
  font-size: 11px; font-weight: 400; letter-spacing: .06em;
  color: var(--rose-deep);
  box-shadow: var(--shadow-soft);
}

/* ───────── Cards ───────── */
.pad { padding: 0 20px; }
.card {
  position: relative;
  background: #fffefc;
  border: 1px solid rgb(var(--rosegold-rgb) / .14);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: var(--shadow-soft);
}
.card.flat { box-shadow: var(--shadow-soft); }
.card.blush { background: linear-gradient(160deg, #FBEFEB, #F7E3DC); border-color: rgba(203,143,152,.25); }

.certificate {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(var(--blush-rgb) / .22), transparent 60%),
    #fffefc;
  border: 1px solid rgb(var(--rosegold-rgb) / .3);
  border-radius: 20px;
  padding: 30px 22px 26px;
  text-align: center;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.certificate::before {
  content: "";
  position: absolute; inset: 7px;
  border: 1px solid rgb(var(--rosegold-rgb) / .22);
  border-radius: 14px;
  pointer-events: none;
}
.corner { position: absolute; width: 34px; height: 34px; opacity: .8; pointer-events: none; }
.corner.tl { top: 12px; left: 12px; }
.corner.tr { top: 12px; right: 12px; transform: scaleX(-1); }
.corner.bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.corner.br { bottom: 12px; right: 12px; transform: scale(-1); }

/* ───────── Buttons ───────── */
/* Lumière capsule — buttons NEVER move; feedback is light only,
   with the fine white keyline floating just inside the curve */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 17px 26px;
  border-radius: 999px;
  background: var(--grad-rose);
  color: #fffdfb;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgb(151 79 94 / .35);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .35),
    0 4px 18px -6px rgb(var(--rosegold-rgb) / .6),
    0 0 24px -2px rgb(var(--blush-rgb) / .45);
  transition: box-shadow .3s ease, filter .3s ease, opacity .2s ease;
  position: relative;
  animation: btn-breathe 4.5s ease-in-out infinite;
}
.btn::before {
  content: "";
  position: absolute; inset: 4px;
  border: 1px solid rgb(255 255 255 / .8);
  border-radius: 999px;
  pointer-events: none;
}
@keyframes btn-breathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 4px 18px -6px rgb(var(--rosegold-rgb) / .6), 0 0 24px -2px rgb(var(--blush-rgb) / .45); }
  50% { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 4px 18px -6px rgb(var(--rosegold-rgb) / .6), 0 0 36px 0 rgb(var(--blush-rgb) / .62); }
}
.btn:hover, .btn:active { filter: brightness(1.04) saturate(1.08); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.ghost {
  background: rgb(255 255 255 / .8);
  color: var(--ink);
  border: 1px solid rgb(var(--rosegold-rgb) / .55);
  box-shadow: none;
  text-shadow: none;
  animation: none;
}
.btn.ghost::before { display: none; }
.btn.ghost:hover, .btn.ghost:active {
  background: rgb(var(--blush-rgb) / .18);
  box-shadow: 0 0 22px -2px rgb(var(--blush-rgb) / .5);
  filter: none;
}
.btn.quiet {
  background: transparent; box-shadow: none; color: var(--taupe);
  font-size: 10px; letter-spacing: .34em; padding: 12px;
  animation: none; text-shadow: none;
}
.btn.quiet::before { display: none; }
.btn.small { width: auto; padding: 11px 22px; font-size: 10px; }

/* ───────── Inputs ───────── */
.field { margin-top: 18px; text-align: left; }
.field label { display: block; margin-bottom: 7px; }
.input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 9px 2px;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  transition: border-color .25s;
}
.input:focus { border-bottom-color: var(--rose); box-shadow: 0 10px 20px -14px rgb(var(--blush-rgb) / .8); }
.input::placeholder { color: #C9B4AC; font-style: italic; font-weight: 300; }
textarea.input { resize: none; line-height: 1.5; }
input[type="date"].input { font-size: 16px; min-height: 40px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.select-chip {
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  font-size: 12px; letter-spacing: .08em; font-weight: 400;
  color: var(--ink-soft);
  transition: all .2s;
}
.select-chip.on {
  background: var(--grad-rose); color: #fff; border-color: transparent;
  box-shadow: 0 8px 20px -10px rgba(183,110,121,.6);
}

/* ───────── Bottom nav ───────── */
.nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 432px; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 10px 8px calc(14px + env(safe-area-inset-bottom));
  background: rgb(253 251 247 / .92);
  backdrop-filter: blur(14px);
  border-top: 1px solid transparent;
}
/* seam of light above the menu — mirrors the site's footer seam */
.nav::before {
  content: "";
  position: absolute; left: 10px; right: 10px; top: -1px;
  height: 1.5px;
  background: var(--glow-line);
  box-shadow: var(--glow-bloom);
  pointer-events: none;
}
.nav button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 2px;
  color: #B9A29A;
  font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 400;
  transition: color .2s, transform .2s;
}
.nav button svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.nav button.on { color: var(--rose-deep); }
.nav button.on svg { filter: drop-shadow(0 3px 6px rgb(var(--blush-rgb) / .65)); }
.nav button:active svg { filter: drop-shadow(0 0 8px rgb(var(--blush-rgb) / .9)); }

/* ───────── Home pieces ───────── */
.counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.counter {
  background: #fffefc;
  border: 1px solid rgb(var(--rosegold-rgb) / .14);
  border-radius: 16px;
  padding: 16px 6px 13px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.counter .num { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; color: var(--ink); }
.counter .lbl { margin-top: 7px; font-size: 8px; letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); font-weight: 400; }

.tilegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  position: relative;
  background: #fffefc;
  border: 1px solid rgb(var(--rosegold-rgb) / .14);
  border-radius: 16px;
  padding: 17px 16px 15px;
  text-align: left;
  box-shadow: var(--shadow-soft);
  transition: box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.tile:active { border-color: rgb(var(--rosegold-rgb) / .4); box-shadow: 0 0 22px -2px rgb(var(--blush-rgb) / .55); }
.tile .t-title { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink); }
.tile .t-hint { margin-top: 4px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); font-weight: 400; }
.tile .t-pts {
  position: absolute; top: 12px; right: 12px;
  font-size: 9.5px; color: var(--rose-deep); font-weight: 400; letter-spacing: .08em;
  background: var(--blush-0); border: 1px solid rgba(203,143,152,.25);
  padding: 3px 8px; border-radius: 999px;
}
.tile.done { background: linear-gradient(160deg, #FBF1ED, #F6E2DA); }
.tile.wide { grid-column: 1 / -1; }

/* progress ring */
.ringwrap { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.ringwrap svg { transform: rotate(-90deg); }
.ringwrap .ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* ───────── Game UI ───────── */
.option {
  display: block; width: 100%; text-align: left;
  background: #fffefc;
  border: 1px solid rgb(var(--rosegold-rgb) / .18);
  border-radius: 14px;
  padding: 15px 17px;
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.option:active { border-color: rgb(var(--rosegold-rgb) / .45); box-shadow: 0 0 18px -2px rgb(var(--blush-rgb) / .5); }
.option.on { border-color: var(--rose); background: var(--blush-0); box-shadow: 0 10px 26px -14px rgba(183,110,121,.45); }
.option.correct { border-color: #8FAE9B; background: #EFF5F0; }
.option.wrong { border-color: #D49A9A; background: #FAEDED; opacity: .75; }

.pass-screen {
  position: fixed; inset: 0; z-index: 60;
  background:
    radial-gradient(700px 420px at 50% 18%, rgba(246,175,166,.3), transparent 60%),
    var(--floral),
    linear-gradient(180deg, #FBF4F0, #F7EAE3);
  background-size: auto, 300px 300px, auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 36px;
}

.tot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.tot-opt {
  padding: 26px 12px;
  border-radius: 16px;
  background: #fffefc;
  border: 1px solid rgb(var(--rosegold-rgb) / .18);
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.tot-opt.on { border-color: var(--rose); background: var(--blush-0); box-shadow: 0 0 22px -2px rgb(var(--blush-rgb) / .6); }

/* wheel */
.wheelbox { position: relative; width: 290px; height: 290px; margin: 18px auto 6px; }
.wheelbox .pointer {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 3;
  filter: drop-shadow(0 3px 5px rgba(124,74,85,.4));
}
#wheel { transition: transform 4.2s cubic-bezier(.16,.84,.18,1); will-change: transform; }
.wheel-hub {
  position: absolute; inset: 0; margin: auto; width: 74px; height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFF7F3, #F0D7CD);
  border: 1px solid rgba(203,143,152,.45);
  box-shadow: 0 8px 24px -8px rgba(183,110,121,.5), inset 0 1px 0 #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}

/* ───────── Letters ───────── */
.letter {
  position: relative;
  background: #fffefc;
  border: 1px solid rgb(var(--rosegold-rgb) / .16);
  border-radius: 14px;
  padding: 18px 17px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.letter::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(224,206,197,.45); border-radius: 9px; pointer-events: none;
}
.letter.sealed {
  background: linear-gradient(165deg, #FBF1ED, #F5E0D8);
  text-align: center; padding: 24px 17px;
}
.wax {
  width: 46px; height: 46px; margin: 0 auto 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #D98E96, #b76e79 70%, #8E4F5C);
  box-shadow: 0 6px 16px -6px rgba(142,79,92,.6), inset 0 2px 3px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center;
  color: #FBEDE9;
}

/* ───────── Levels ladder ───────── */
.lvl-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 15px;
  background: #fffefc;
  border: 1px solid rgb(var(--rosegold-rgb) / .14);
  border-radius: 15px;
  margin-top: 9px;
  box-shadow: var(--shadow-soft);
}
.lvl-row.locked { opacity: .55; filter: saturate(.6); }
.lvl-row.current { border-color: rgba(203,143,152,.55); background: linear-gradient(150deg, #FFFDFC, #FAEDE8); }
.gem-medal {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, #FFFCFA, var(--ivory-2));
  border: 1px solid rgba(203,143,152,.35);
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px -7px rgba(183,110,121,.4);
}

.bar { height: 5px; border-radius: 999px; background: var(--ivory-2); overflow: hidden; }
.bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--metal-2), var(--rose-deep));
  border-radius: 999px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}

/* ───────── Overlays: level-up, modal, toast ───────── */
.overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(43,35,38,.34);
  backdrop-filter: blur(6px);
  padding: 26px;
  animation: ov-in .3s ease;
}
@keyframes ov-in { from { opacity: 0; } to { opacity: 1; } }
.overlay .sheet {
  width: 100%; max-width: 360px;
  background:
    var(--floral),
    linear-gradient(180deg, #FEFCFB, #FAF1ED);
  background-size: 300px 300px, auto;
  border-radius: 24px;
  border: 1px solid rgba(203,143,152,.35);
  padding: 30px 24px 24px;
  text-align: center;
  box-shadow: var(--shadow-float);
  animation: sheet-in .45s cubic-bezier(.2,.9,.3,1.2);
  position: relative;
  overflow: hidden;
  max-height: 86dvh;
  overflow-y: auto;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }

.levelup-glow {
  position: absolute; top: -70px; left: 50%; transform: translateX(-50%);
  width: 320px; height: 220px;
  background: radial-gradient(closest-side, rgba(246,175,166,.55), transparent);
  pointer-events: none;
}

#toast {
  position: fixed; left: 50%; bottom: 108px; transform: translateX(-50%) translateY(20px);
  z-index: 90;
  background: rgba(43,35,38,.92);
  color: #F8EDE9;
  font-size: 12.5px; letter-spacing: .06em; font-weight: 300;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow-float);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  max-width: 86%;
  text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast b { color: #F6C9BE; font-weight: 500; }

/* petals */
.petal {
  position: fixed; top: -30px; z-index: 85;
  width: 16px; height: 13px;
  background: linear-gradient(140deg, #F6C2BB, #E79DA4);
  border-radius: 65% 35% 60% 40% / 55% 60% 40% 45%;
  opacity: .92;
  pointer-events: none;
  animation: petal-fall linear forwards;
}
@keyframes petal-fall {
  0% { transform: translate(0, -4vh) rotate(0deg); opacity: 0; }
  8% { opacity: .95; }
  100% { transform: translate(var(--sway), 106vh) rotate(var(--spin)); opacity: .55; }
}

/* sparkle burst (points) */
.burst {
  position: fixed; z-index: 86; pointer-events: none;
  font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .12em;
  color: var(--rose-deep);
  text-shadow: 0 1px 0 #fff;
  animation: burst-up 1.1s ease-out forwards;
}
@keyframes burst-up {
  0% { transform: translateY(0) scale(.8); opacity: 0; }
  18% { opacity: 1; transform: translateY(-8px) scale(1.06); }
  100% { transform: translateY(-46px) scale(1); opacity: 0; }
}

/* ───────── Utility ───────── */
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mt20 { margin-top: 20px; } .mt28 { margin-top: 28px; } .mt36 { margin-top: 36px; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 12px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fade-up { animation: fadeup .55s ease both; }
.fade-up.d1 { animation-delay: .07s; } .fade-up.d2 { animation-delay: .14s; }
.fade-up.d3 { animation-delay: .21s; } .fade-up.d4 { animation-delay: .28s; }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, #FBEFEB, #EBCDC4);
  border: 1px solid rgba(203,143,152,.4);
  font-family: var(--serif); font-size: 19px; color: var(--wine);
  box-shadow: inset 0 1px 0 #fff;
}

.acc { border-top: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 2px;
  font-family: var(--serif); font-size: 16.5px; font-weight: 500; color: var(--ink);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; color: var(--rose); font-family: var(--sans); font-weight: 300; font-size: 18px; }
.acc[open] summary::after { content: "–"; }
.acc .acc-body { padding: 0 2px 14px; }

.memory-img { border-radius: 12px; max-height: 270px; object-fit: cover; width: 100%; }

.seg {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(241,232,226,.7);
  border: 1px solid var(--line);
  border-radius: 999px; padding: 4px; gap: 2px;
}
.seg button {
  padding: 9px 4px; border-radius: 999px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 400;
  color: var(--taupe);
  transition: all .2s;
}
.seg button.on { background: #fff; color: var(--rose-deep); box-shadow: var(--shadow-soft); }
.seg.two { grid-template-columns: repeat(2, 1fr); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }
}

/* ── The Love Tree: the couple pet ── */
.pet-stagebox {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  height: clamp(270px, 42dvh, 440px);
  padding-bottom: 7.5%;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(203, 143, 152, .26);
  box-shadow: 0 22px 44px -26px rgba(124, 74, 85, .38);
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
/* soft vignette so the scene reads like a lit diorama, not a flat card */
.pet-stagebox::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  border-radius: 22px;
  background: radial-gradient(ellipse 95% 85% at 50% 42%, transparent 62%, rgba(124, 74, 85, .07));
  box-shadow: inset 0 0 46px rgba(244, 184, 191, .16), inset 0 1px 0 rgba(255, 255, 255, .8);
}
/* layered scene, each plane drifting at its own parallax depth */
.pet-sky {
  position: absolute; inset: -3%;
  background: linear-gradient(180deg, #fffdfb 0%, #fdf4ee 40%, #f9e9e3 70%, #f3dfd8 100%);
  transform: translate(calc(var(--px, 0) * -4px), calc(var(--py, 0) * -3px));
}
.pet-sun {
  position: absolute; top: -14%; left: 50%; width: 360px; height: 300px;
  margin-left: -180px;
  background: radial-gradient(closest-side, rgba(243, 214, 176, .5), rgba(244, 184, 191, .16) 55%, transparent);
  transform: translate(calc(var(--px, 0) * -7px), calc(var(--py, 0) * -4px));
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.pet-hill { position: absolute; border-radius: 50%; filter: blur(15px); pointer-events: none; }
.pet-hill.h1 {
  left: -18%; bottom: 4%; width: 72%; height: 25%;
  background: rgba(228, 185, 179, .38);
  transform: translate(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 2px));
}
.pet-hill.h2 {
  right: -16%; bottom: 3%; width: 66%; height: 21%;
  background: rgba(216, 168, 161, .3);
  transform: translate(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 3px));
}
.pet-ground {
  position: absolute; left: -5%; right: -5%; bottom: -8px; height: 17%;
  background: linear-gradient(180deg, rgba(233, 196, 186, 0), rgba(223, 178, 168, .5) 45%, rgba(201, 150, 140, .55));
  filter: blur(7px);
  transform: translate(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 4px));
}
.pet-glow {
  position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%);
  width: 320px; height: 240px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(244 184 191 / 0.45), transparent);
  transition: opacity 1s ease;
  pointer-events: none;
}
.pet-flash .pet-glow { opacity: 1 !important; }
.pet-mood-missing .pet-sun { opacity: .25; }
/* golden pollen motes rising through the light */
.pet-mote {
  position: absolute; bottom: 12%;
  width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffeccb, #dcb27b);
  box-shadow: 0 0 7px rgba(218, 179, 124, .85);
  opacity: 0; pointer-events: none;
  animation: pet-mote 7.5s linear infinite;
}
.pet-mote.m1 { left: 22%; animation-duration: 8.5s; }
.pet-mote.m2 { left: 37%; width: 3px; height: 3px; animation-duration: 10s; animation-delay: 1.8s; }
.pet-mote.m3 { left: 52%; animation-duration: 7s; animation-delay: 3.4s; }
.pet-mote.m4 { left: 66%; width: 3px; height: 3px; animation-duration: 11s; animation-delay: 2.6s; }
.pet-mote.m5 { left: 78%; animation-duration: 9s; animation-delay: 5.1s; }
.pet-mote.m6 { left: 30%; width: 5px; height: 5px; animation-duration: 12s; animation-delay: 6.3s; }
@keyframes pet-mote {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .75; }
  55% { transform: translate(7px, -110px); opacity: .45; }
  100% { transform: translate(-4px, -210px); opacity: 0; }
}
/* care moments */
.pet-drop {
  position: absolute; top: 5%; z-index: 4;
  width: 5px; height: 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(201, 142, 146, .8));
  border-radius: 50% 50% 55% 55% / 35% 35% 65% 65%;
  opacity: 0; pointer-events: none;
  animation: pet-fall 1.15s ease-in forwards;
}
@keyframes pet-fall {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: .9; }
  82% { opacity: .75; }
  100% { transform: translateY(290px); opacity: 0; }
}
.pet-heartrise {
  position: absolute; bottom: 20%; z-index: 4;
  opacity: 0; pointer-events: none;
  animation: pet-heartrise 2.1s ease-out forwards;
}
@keyframes pet-heartrise {
  0% { transform: translate(0, 0) scale(.55); opacity: 0; }
  16% { opacity: .9; }
  100% { transform: translate(var(--hx, 0), -175px) scale(1.05); opacity: 0; }
}
.pet-img {
  display: block; height: auto;
  /* feather the square render into the ivory canvas */
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 54%, #000 42%, transparent 67%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 54%, #000 42%, transparent 67%);
  mix-blend-mode: multiply;
  transition: width 1.6s cubic-bezier(.4,0,.2,1), filter 1s ease;
  animation: pet-breathe 16s ease-in-out infinite;
}
/* slow wind: the whole tree leans from the base of its trunk */
.pet-body {
  position: relative;
  transform-origin: 50% 92%;
  animation: pet-wind 12s ease-in-out infinite;
  will-change: transform;
}
/* contact shadow rooting the tree to the ground */
.pet-body::after {
  content: ""; position: absolute; left: 19%; right: 19%; bottom: -2.5%;
  height: 14px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 74, 85, .16), transparent);
  filter: blur(3px);
}
.pet-mood-radiant .pet-body { animation-duration: 8s; }
.pet-mood-missing .pet-img { filter: grayscale(0.4) opacity(0.85); }
.pet-mood-missing .pet-body { animation-duration: 20s; }
@keyframes pet-wind {
  0%, 100% { transform: rotate(-0.6deg) translateX(-2px); }
  28% { transform: rotate(0.45deg) translateX(1px); }
  52% { transform: rotate(-0.25deg) translateX(-1px); }
  78% { transform: rotate(0.7deg) translateX(2px); }
}
@keyframes pet-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.014); }
}
.pet-pop .pet-body { animation: pet-pop 0.7s cubic-bezier(.34,1.56,.64,1); }
@keyframes pet-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.05) rotate(-1deg); }
  70% { transform: scale(0.985) rotate(0.8deg); }
  100% { transform: scale(1); }
}
/* blossom petals drifting on the wind (First Bloom and beyond) */
.pet-drift {
  position: absolute; top: 12%;
  width: 9px; height: 8px;
  background: radial-gradient(circle at 35% 35%, #f6cdd2, #eeaab4);
  border-radius: 62% 38% 55% 45%;
  opacity: 0;
  pointer-events: none;
  animation: pet-drift 9s linear infinite;
}
.pet-drift.p1 { left: 34%; --dx: 34px; animation-duration: 8.5s; }
.pet-drift.p2 { left: 48%; --dx: -42px; animation-duration: 11s; animation-delay: 2.2s; }
.pet-drift.p3 { left: 62%; --dx: 26px; animation-duration: 9.5s; animation-delay: 4.6s; }
.pet-drift.p4 { left: 42%; top: 26%; --dx: -30px; width: 7px; height: 6px; animation-duration: 12.5s; animation-delay: 6.4s; }
.pet-drift.p5 { left: 56%; top: 20%; --dx: 46px; width: 7px; height: 6px; animation-duration: 10.5s; animation-delay: 8.1s; }
@keyframes pet-drift {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: .55; }
  70% { opacity: .4; }
  100% { transform: translate(var(--dx, 30px), 240px) rotate(230deg); opacity: 0; }
}
.pet-meter {
  height: 7px; border-radius: 999px; flex: 1;
  background: var(--ivory-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.pet-meter-fill {
  position: relative; overflow: hidden;
  height: 100%; border-radius: 999px;
  background: var(--grad-rose);
  box-shadow: 0 0 8px rgb(var(--blush-rgb) / .8);
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.pet-meter-fill::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46px;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: pet-sheen 3.2s ease-in-out infinite;
}
@keyframes pet-sheen {
  0% { left: -60px; }
  55%, 100% { left: 110%; }
}
.btn:disabled { opacity: .45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .pet-body, .pet-img, .pet-drift, .pet-mote, .pet-meter-fill::after { animation: none; }
}

/* ───────── Certificate wallpaper ───────── */
.cert-wall {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.cert-wall::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(253 251 247 / .74), rgb(253 251 247 / .84));
}
.certificate::before { z-index: 2; }
.certificate .corner { z-index: 2; }
.certificate > *:not(.cert-wall):not(.corner) { position: relative; z-index: 1; }

.wall-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 8.5px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgb(var(--rosegold-rgb) / .78);
  padding: 6px 2px;
  transition: color .3s ease;
}
.wall-btn:hover { color: var(--rose-deep); }