/* NACRE — brand skin. Colors come from campaign.js as --c-* variables. */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../../shared/fonts/cormorant-garamond-var.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('../../shared/fonts/cormorant-garamond-var-italic.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../../shared/fonts/jost-var.woff2') format('woff2'); }

:root {
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', sans-serif;
  --hair: 0.28cqw;
  --goldline: linear-gradient(120deg, #B9826A, #F0D2BD 40%, #C6937A 60%, #E8C4AC);
}

body {
  font-family: var(--sans);
  background: radial-gradient(70vw 70vh at 20% 10%, #FBF1EA, transparent 70%), radial-gradient(60vw 60vh at 90% 90%, #EBD3CB, transparent 70%), var(--c-page);
}

.backdrop { font: 300 14px/1.6 var(--sans); color: color-mix(in srgb, var(--c-text) 75%, transparent); }
.backdrop .wordmark { display: block; font-size: 22px; margin-bottom: 12px; }
.backdrop p { margin: 0; }
.backdrop a { color: var(--c-gold); text-decoration: none; border-bottom: 1px solid currentColor; }
@media (min-width: 700px) and (min-height: 480px) {
  body:not(.is-embed) .stage { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-gold) 45%, transparent), 0 0 0 10px var(--c-pearl), 0 40px 90px rgba(120, 70, 60, 0.28); }
}

.stage { color: var(--c-text); }
#fx { z-index: 4; pointer-events: none; }

.wordmark { font: 500 5.2cqw/1 var(--serif); letter-spacing: 0.46em; margin-right: -0.46em; text-transform: uppercase; color: var(--c-text); }

/* ------------------------------------------------------------------ HUD */
.hud { padding: max(5.5cqw, env(safe-area-inset-top)) 6cqw 0; text-align: center; }
.hud .wordmark { display: block; font-size: 4.4cqw; }
.hud-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 4.5cqw; }
.hud-label { display: block; font: 400 2.5cqw/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: color-mix(in srgb, var(--c-text) 62%, transparent); margin-bottom: 1.8cqw; text-align: left; }
.hud-time .hud-label { text-align: right; margin-right: -0.32em; }
.hud-time b { display: block; font: 400 6.4cqw/0.85 var(--serif); font-variant-numeric: tabular-nums lining-nums; text-align: right; transition: color 0.3s; }
.hud-time.is-low b { color: #C2566A; }
.pearls { display: flex; gap: 1.7cqw; }
.pearls i {
  width: 3.7cqw; height: 3.7cqw; border-radius: 50%;
  box-shadow: inset 0 0 0 var(--hair) color-mix(in srgb, var(--c-gold) 70%, transparent);
  transition: transform 0.6s cubic-bezier(0.2, 1.8, 0.4, 1), background 0.4s, box-shadow 0.4s;
}
.pearls i.is-on {
  background: radial-gradient(circle at 32% 28%, #fff 0 18%, #FBE7DF 40%, #E2B7A6 78%, #C99380);
  box-shadow: 0 0.6cqw 1.6cqw rgba(160, 100, 80, 0.4);
  transform: scale(1.18);
}
.hud-line { height: var(--hair); margin-top: 3.4cqw; background: color-mix(in srgb, var(--c-gold) 22%, transparent); }
.hud-line i { display: block; height: 100%; background: var(--c-gold); transform-origin: left; }

/* ---------------------------------------------------------------- board */
.board {
  position: absolute; left: 5.5cqw; right: 5.5cqw; top: 37cqw; bottom: max(7cqw, env(safe-area-inset-bottom));
  height: min(100cqh - 45cqw, 166cqw); margin-block: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 2.8cqw;
  perspective: 240cqw; z-index: 3;
  opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s;
}
.stage[data-state='countdown'] .board, .stage[data-state='playing'] .board { opacity: 1; visibility: visible; }

.card {
  position: relative; border-radius: 3.4cqw; transform-style: preserve-3d; cursor: pointer;
  animation: deal 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards; animation-delay: calc(var(--n) * 45ms);
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
@keyframes deal { from { opacity: 0; transform: translateY(14cqw) scale(0.7) rotate(calc((var(--n) - 5.5) * 3deg)); } }
.card:active { transform: scale(0.95); }
@media (hover: hover) { .card:not(.is-open):not(.is-matched):hover { transform: translateY(-1cqw); } }

.card-inner { position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d; transition: transform 0.62s cubic-bezier(0.3, 0.9, 0.3, 1); }
.card.is-open .card-inner, .card.is-matched .card-inner { transform: rotateY(180deg); }

.card-face {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 1.4cqw 3.4cqw rgba(140, 90, 75, 0.2), 0 0.2cqw 0.6cqw rgba(140, 90, 75, 0.18);
}

/* back: pearl card with monogram */
.card-back { background: linear-gradient(150deg, #FFFDFB 0%, #FAEBE4 55%, #F1D5CC 100%); display: grid; place-items: center; }
.card-back::before { content: ''; position: absolute; inset: 1.7cqw; border-radius: 2.2cqw; border: var(--hair) solid color-mix(in srgb, var(--c-gold) 65%, transparent); }
.card-back::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.85) 45%, rgba(228, 216, 246, 0.55) 50%, rgba(220, 239, 230, 0.4) 54%, transparent 64%);
  background-size: 300% 100%; animation: sheen 5.5s ease-in-out infinite; animation-delay: calc(var(--n) * 160ms);
}
@keyframes sheen { 0%, 60% { background-position: 120% 0; } 100% { background-position: -60% 0; } }
.mono { font: italic 400 13cqw/1 var(--serif); color: var(--c-gold); }
.mono::after { content: ''; display: block; width: 1.3cqw; height: 1.3cqw; margin: 1.2cqw auto 0; border-radius: 50%; background: var(--c-rose); }

/* front: product */
.card-front { transform: rotateY(180deg); background: radial-gradient(120% 90% at 50% 30%, #FFFFFF 0%, #FDF5EF 60%, #F7E4DB 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.4cqw 1cqw 2.2cqw; }
.card-front img { flex: 1; min-height: 0; width: 88%; object-fit: contain; transform: scale(1.12); }
.card-front em { margin-top: 1.4cqw; font: 400 2.35cqw/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--c-text) 78%, transparent); }
.card-front::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0.5cqw transparent; transition: box-shadow 0.4s; }

.card.is-matched { animation: matched 0.7s cubic-bezier(0.2, 0.9, 0.3, 1); cursor: default; }
.card.is-matched .card-front::after { box-shadow: inset 0 0 0 0.5cqw var(--c-rose); }
.card.is-matched .card-front { box-shadow: 0 0 5cqw rgba(216, 165, 149, 0.75), 0 1.4cqw 3.4cqw rgba(140, 90, 75, 0.2); }
.card.is-matched .card-front::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.95) 50%, transparent 65%);
  background-size: 300% 100%; animation: sweep 0.9s 0.1s ease-out both;
}
@keyframes sweep { from { background-position: 130% 0; } to { background-position: -70% 0; } }
@keyframes matched { 0% { transform: scale(1); } 35% { transform: scale(1.1); } 100% { transform: scale(1); } }
.card.is-wrong { animation: wrong 0.45s ease-in-out; }
@keyframes wrong { 20% { transform: translateX(-1.4cqw) rotate(-1.5deg); } 45% { transform: translateX(1.2cqw) rotate(1.2deg); } 70% { transform: translateX(-0.7cqw); } }
.board.is-celebrating .card { animation: celebrate 0.8s cubic-bezier(0.3, 0.9, 0.3, 1) both; animation-delay: calc(var(--n) * 50ms); }
@keyframes celebrate { 40% { transform: translateY(-3cqw) scale(1.05); } }

/* ------------------------------------------------------ caption / callout */
.caption {
  position: absolute; left: 0; right: 0; top: 30cqw; z-index: 5; text-align: center; pointer-events: none;
  font: italic 400 4.6cqw/1 var(--serif); color: var(--c-gold); opacity: 0; transition: opacity 0.5s;
}
.caption.is-on { opacity: 1; }
.callout { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.callout span {
  font: italic 400 13cqw/1 var(--serif); color: var(--c-text); text-align: center; padding: 8cqw 10cqw;
  background: radial-gradient(closest-side, rgba(255, 253, 251, 0.96) 55%, rgba(255, 253, 251, 0));
}
.callout.is-on { animation: callout 1.6s ease forwards; }
@keyframes callout { 0% { opacity: 0; transform: scale(0.9); } 18% { opacity: 1; transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(1.04); } }

/* -------------------------------------------------------------- loading */
.screen--loading { align-items: center; justify-content: center; gap: 7cqw; background: var(--c-bg); z-index: 9; }
.screen--loading .wordmark { font-size: 8cqw; }
.loader { width: 22cqw; height: var(--hair); background: color-mix(in srgb, var(--c-gold) 25%, transparent); overflow: hidden; }
.loader i { display: block; width: 40%; height: 100%; background: var(--c-gold); animation: load 1.1s ease-in-out infinite; }
@keyframes load { from { transform: translateX(-110%); } to { transform: translateX(260%); } }

/* ---------------------------------------------------------------- intro */
.screen--intro { padding: max(7cqw, env(safe-area-inset-top)) 8cqw max(6cqw, env(safe-area-inset-bottom)); text-align: center; }
.intro-top { display: grid; gap: 2.6cqw; justify-items: center; }
.intro-top .wordmark { font-size: 7.4cqw; }
.tagline { font: 300 2.7cqw/1 var(--sans); letter-spacing: 0.36em; margin-right: -0.36em; text-transform: uppercase; color: color-mix(in srgb, var(--c-text) 70%, transparent); }

.hero { flex: 1; min-height: 0; display: grid; place-items: center; padding: 5cqw 0 3cqw; }
.arch {
  position: relative; height: 100%; max-height: 92cqw; aspect-ratio: 0.72; border-radius: 99cqw 99cqw 2cqw 2cqw;
  background: linear-gradient(180deg, #FFFDFB 0%, #F9E4DC 55%, #EFC9BE 100%);
  box-shadow: 0 0 0 var(--hair) color-mix(in srgb, var(--c-gold) 60%, transparent), 0 0 0 1.8cqw rgba(255, 253, 251, 0.75), 0 0 0 calc(1.8cqw + var(--hair)) color-mix(in srgb, var(--c-gold) 38%, transparent), 0 6cqw 14cqw rgba(160, 100, 85, 0.22);
  transform: scale(0.92); opacity: 0;
}
.stage[data-state='intro'] .arch { animation: arch 1s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes arch { to { transform: none; opacity: 1; } }
.hero-main { position: absolute; left: 50%; bottom: 7%; height: 74%; width: auto; max-width: none; transform: translateX(-50%); animation: bob 5s ease-in-out infinite; filter: drop-shadow(0 3cqw 5cqw rgba(150, 90, 80, 0.3)); }
.hero-side { position: absolute; bottom: 7%; height: 46%; width: auto; max-width: none; opacity: 0.96; }
.hero-side--l { left: -13%; animation: bob 6s -2s ease-in-out infinite; }
.hero-side--r { right: -13%; height: 52%; animation: bob 5.6s -3.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6cqw; } }
.orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0 14%, #FCEBE4 38%, #E6BFB0 76%, #CC9986); box-shadow: 0 1.6cqw 4cqw rgba(160, 100, 80, 0.3); animation: bob 7s ease-in-out infinite; }
.orb--a { width: 9cqw; height: 9cqw; left: 14%; top: 22%; }
.orb--b { width: 5cqw; height: 5cqw; right: 16%; top: 14%; animation-delay: -2.4s; }
.orb--c { width: 3.4cqw; height: 3.4cqw; right: 26%; top: 34%; animation-delay: -4.2s; }

.title { margin: 3cqw 0 0; font: 300 14.5cqw/0.92 var(--serif); letter-spacing: -0.01em; }
.title em, .end-title em { font-style: italic; font-weight: 400; color: var(--c-gold); }
.body { margin: 3.4cqw auto 5.5cqw; max-width: 66cqw; font: 300 3.9cqw/1.45 var(--sans); color: color-mix(in srgb, var(--c-text) 82%, transparent); }
.demo-note { margin: 3.6cqw 0 0; font: 400 2.2cqw/1 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: color-mix(in srgb, var(--c-text) 45%, transparent); }

/* -------------------------------------------------------------- buttons */
.btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; text-transform: uppercase; transition: transform 0.2s, box-shadow 0.3s, background 0.3s; }
.btn--primary {
  height: 14.5cqw; border-radius: 99cqw; background: var(--c-text); color: var(--c-pearl);
  font: 400 3.5cqw/1 var(--sans); letter-spacing: 0.42em; padding-left: 0.42em; overflow: hidden;
  box-shadow: 0 3cqw 7cqw rgba(59, 42, 42, 0.28), inset 0 0 0 var(--hair) rgba(255, 255, 255, 0.18);
}
.btn--primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 38%, rgba(240, 210, 190, 0.5) 50%, transparent 62%); background-size: 280% 100%; animation: sweep 3.4s ease-in-out infinite; }
.btn--primary:hover { box-shadow: 0 4cqw 9cqw rgba(59, 42, 42, 0.34), inset 0 0 0 var(--hair) rgba(255, 255, 255, 0.3); }
.btn:active { transform: scale(0.97); }
.btn--ghost { height: 10cqw; margin-top: 1.4cqw; font: 400 2.9cqw/1 var(--sans); letter-spacing: 0.36em; color: color-mix(in srgb, var(--c-text) 72%, transparent); }

.mute { color: var(--c-text); background: rgba(255, 253, 251, 0.7); box-shadow: inset 0 0 0 var(--hair) color-mix(in srgb, var(--c-gold) 50%, transparent); width: 8.4cqw; height: 8.4cqw; bottom: auto; top: max(4.4cqw, env(safe-area-inset-top)); right: auto; left: 5cqw; }

/* ------------------------------------------------------------------ end */
.screen--end { align-items: center; text-align: center; padding: max(7cqw, env(safe-area-inset-top)) 8cqw max(5cqw, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(251, 246, 240, 0.5), rgba(251, 246, 240, 0.8)); -webkit-backdrop-filter: blur(1.5cqw); backdrop-filter: blur(1.5cqw); }
.screen--end > .wordmark { font-size: 5.6cqw; }
.kicker { margin: auto 0 0; font: 400 2.7cqw/1 var(--sans); letter-spacing: 0.4em; margin-right: -0.4em; text-transform: uppercase; color: var(--c-gold); }
.final b { display: block; font: 300 27cqw/0.95 var(--serif); font-variant-numeric: lining-nums; background: var(--goldline); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 2cqw; }
.end-title { margin: 1cqw 0 6cqw; font: 300 9.4cqw/1 var(--serif); }
.shelf { display: flex; justify-content: center; align-items: flex-end; gap: 0; width: 100%; padding: 2cqw 0 0; border-bottom: var(--hair) solid color-mix(in srgb, var(--c-gold) 55%, transparent); margin-bottom: 0; }
.shelf img { flex: 1; min-width: 0; height: auto; opacity: 0.22; filter: grayscale(0.6); transition: opacity 0.6s, filter 0.6s, transform 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); transform: translateY(1.2cqw); transition-delay: calc(var(--n) * 90ms + 500ms); }
.stage[data-state='ended'] .shelf img.is-on { opacity: 1; filter: none; transform: none; }
.reward { width: 100%; padding: 4cqw 5cqw; margin: auto 0 4.5cqw; border-radius: 3cqw; background: rgba(255, 253, 251, 0.85); box-shadow: inset 0 0 0 var(--hair) color-mix(in srgb, var(--c-gold) 60%, transparent); }
.reward-label { display: block; font: 400 2.4cqw/1 var(--sans); letter-spacing: 0.36em; margin-right: -0.36em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 1.8cqw; }
.reward strong { display: block; font: italic 400 5.1cqw/1.18 var(--serif); }
.screen--end .btn--ghost { margin-bottom: 0; }