@font-face { font-family: "Optika"; src: url("assets/fonts/Optika-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Accord Alternate"; src: url("assets/fonts/AccordAlternate-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --purple-900: #1C0838;
  --purple-800: #2A0E52;
  --purple-600: #4B1D8C;
  --purple-400: #7B4CC9;
  --orange: #E8590C;
  --orange-soft: #FF8A3D;
  --gold: #FFD08A;
  --text: #FFFFFF;
  --muted: rgba(255, 255, 255, .7);
  --gap: clamp(4px, 1.4vmin, 10px);
  --radius: clamp(8px, 1.6vmin, 14px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
:root { color-scheme: dark; }
[hidden] { display: none !important; }
body {
  background: radial-gradient(120% 90% at 50% 0%, var(--purple-600) 0%, var(--purple-800) 45%, var(--purple-900) 100%);
  color: var(--text);
  font-family: "Accord Alternate", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

.vpm {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  gap: 10px;
  overflow: hidden;
}

/* Header */
.vpm-head { width: min(100%, 640px); display: grid; gap: 10px; }
.vpm-brand { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vpm-logo { height: clamp(22px, 5vw, 30px); width: auto; display: block; }
.vpm-brand h1 { margin: 0; font-family: "Optika", sans-serif; font-weight: 700; font-size: clamp(18px, 4.6vw, 26px); }

.vpm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vpm-stat {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 6px 10px;
  display: flex; flex-direction: column; align-items: center;
}
.vpm-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.vpm-stat strong { font-family: "Optika", sans-serif; font-size: clamp(16px, 4vw, 22px); font-variant-numeric: tabular-nums; }

.vpm-shuffle { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.vpm-shuffle-bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.vpm-shuffle-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--orange), var(--gold)); transform-origin: left; }
.vpm-shuffle.is-soon { color: var(--gold); }
.vpm-shuffle.is-soon .vpm-shuffle-bar i { animation: vpm-pulse .5s ease-in-out infinite alternate; }
#vpm-shuffle-label { min-width: 104px; text-align: right; font-variant-numeric: tabular-nums; }

/* Board: game.js picks the column count that gives the biggest tiles for the
   space, sets --tile and the board width; a short last row is centred. */
.vpm-board-wrap { flex: 1; width: 100%; min-height: 0; container-type: size; display: grid; place-items: start center; }
@media (min-aspect-ratio: 3/4) { .vpm-board-wrap { place-items: center; } }
.vpm-board {
  --tile: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: var(--gap);
}

.vpm-tile {
  position: relative;
  flex: none;
  width: var(--tile);
  height: var(--tile);
  border: 0; padding: 0; margin: 0;
  background: none;
  cursor: pointer;
  perspective: 700px;
  touch-action: manipulation;
  border-radius: var(--radius);
  outline: none;
}
.vpm-tile:focus-visible { box-shadow: 0 0 0 3px var(--gold); }
.vpm-tile { transition: transform .12s ease-out; }
.vpm-tile:not(.is-up):active { transform: scale(.95); }
.vpm-flip {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .2s cubic-bezier(.3, .7, .3, 1);
}
.vpm-tile.is-up .vpm-flip { transform: rotateY(180deg); }

.vpm-face {
  position: absolute; inset: 0;
  border-radius: var(--radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.vpm-back {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .22), transparent 55%),
    linear-gradient(145deg, var(--purple-400), var(--purple-600) 60%, var(--purple-800));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3), inset 0 -3px 0 rgba(0, 0, 0, .2);
  display: grid; place-items: center;
}
.vpm-back img { width: 46%; height: auto; opacity: .95; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.vpm-front {
  transform: rotateY(180deg);
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.vpm-front img { width: 88%; height: 88%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.vpm-tile.is-joker .vpm-front { background: radial-gradient(circle, #fff 30%, #FFF1DC 100%); }
.vpm-tile.is-joker .vpm-front img { width: 94%; height: 94%; }

.vpm-tile.is-matched { cursor: default; }
.vpm-tile.is-matched .vpm-front { box-shadow: 0 0 0 3px var(--orange), 0 0 18px rgba(232, 89, 12, .55); animation: vpm-pop .45s ease-out; }
.vpm-tile.is-matched.is-settled .vpm-front { box-shadow: 0 0 0 2px rgba(232, 89, 12, .7); opacity: .82; animation: none; }
.vpm-tile.is-wrong .vpm-front { animation: vpm-shake .4s ease-in-out; }

.vpm-hint { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }

.vpm-fs {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: 500 13px "Accord Alternate", sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.vpm-fs[hidden] { display: none; }
.vpm-fs svg { width: 16px; height: 16px; }
.vpm-fs span { display: none; }

/* Faint oversized plus marks behind everything */
.vpm::before, .vpm::after {
  content: "";
  position: absolute;
  background: url("assets/plus-white.png") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}
.vpm::before { width: 60vmax; height: 60vmax; left: -18vmax; bottom: -22vmax; transform: rotate(-8deg); }
.vpm::after { width: 38vmax; height: 38vmax; right: -12vmax; top: -10vmax; transform: rotate(12deg); }
.vpm > * { position: relative; z-index: 1; }
.vpm > .vpm-overlay { position: absolute; z-index: 10; }


/* Overlays */
.vpm-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(20, 6, 40, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10;
  overflow-y: auto;
}
.vpm-intro { background: rgba(20, 6, 40, .88); }
.vpm-overlay[hidden] { display: none; }
.vpm-card {
  width: min(100%, 400px);
  background: linear-gradient(160deg, var(--purple-600), var(--purple-800));
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 20px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}
.vpm-card h2 { font-family: "Optika", sans-serif; margin: 6px 0 12px; font-size: 24px; }
.vpm-card ul { text-align: left; padding-left: 20px; margin: 0 0 18px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.vpm-card p { color: rgba(255, 255, 255, .88); line-height: 1.5; }
.vpm-card-logo { width: min(70%, 240px); height: auto; display: block; margin: 4px auto 14px; }
.vpm-steps { list-style: none; padding: 0; margin: 0 0 18px; text-align: left; display: grid; gap: 12px; }
.vpm-steps li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; line-height: 1.4; color: rgba(255, 255, 255, .9); }
.vpm-step-icon { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; }
.vpm-step-plus { background: linear-gradient(145deg, var(--purple-400), var(--purple-600)); border: 1px solid rgba(255, 255, 255, .18); }
.vpm-step-plus img { width: 50%; }
.vpm-step-badge img { width: 100%; height: 100%; object-fit: contain; }
.vpm-step-time { background: rgba(232, 89, 12, .18); border: 1px solid var(--orange); font: 700 16px "Optika", sans-serif; color: var(--gold); }

/* Big pre-game countdown */
.vpm-countdown { background: rgba(20, 6, 40, .55); }
.vpm-count {
  font: 700 clamp(120px, 38vmin, 60vh)/1 "Optika", sans-serif;
  color: #fff;
  text-shadow: 0 0 40px rgba(232, 89, 12, .7), 0 8px 0 rgba(0, 0, 0, .25);
}
.vpm-count.is-go { color: var(--gold); font-size: clamp(90px, 28vmin, 240px); }
.vpm-count.is-tick { animation: vpm-count .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vpm-count {
  0% { transform: scale(1.8); opacity: 0; }
  25% { transform: scale(1); opacity: 1; }
  80% { transform: scale(.92); opacity: 1; }
  100% { transform: scale(.7); opacity: 0; }
}
.vpm-btn {
  display: block; width: 100%;
  margin-top: 10px;
  padding: 14px 18px;
  border: 0; border-radius: 12px;
  background: linear-gradient(90deg, var(--orange), var(--orange-soft));
  color: #fff;
  font: 700 16px "Optika", sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.vpm-btn:active { transform: scale(.98); }
.vpm-btn-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .35); }

@keyframes vpm-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes vpm-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes vpm-pulse { from { opacity: 1; } to { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  .vpm-flip { transition-duration: .01s; }
  .vpm-tile.is-matched .vpm-front, .vpm-tile.is-wrong .vpm-front, .vpm-shuffle.is-soon .vpm-shuffle-bar i, .vpm-count.is-tick,
  .vpm-callout-card.is-on, .vpm-board.is-golden, .vpm-heart.is-gained, .vpm-bonus.is-on, .vpm-attract-banner strong,
  .vpm-box, .vpm-box.is-shaking, .vpm-mystery-prize.is-on { animation: none; }
}

/* Tries left */
.vpm-hearts { letter-spacing: .08em; white-space: nowrap; }
.vpm-heart { font-style: normal; color: var(--orange-soft); display: inline-block; transition: opacity .3s, transform .3s; }
.vpm-heart.is-lost { opacity: .18; transform: scale(.8); }
.vpm-stat-tries.is-last { border-color: var(--orange); background: rgba(232, 89, 12, .2); }
.vpm-stat-tries.is-last .vpm-heart:not(.is-lost) { animation: vpm-pulse .5s ease-in-out infinite alternate; }
.vpm-step-time.vpm-hearts { font-size: 13px; letter-spacing: 0; color: var(--orange-soft); }

/* Big mid-game callouts ("Shuffle!", "Time's up!") */
.vpm > .vpm-flash {
  position: absolute; inset: 0; z-index: 9;
  display: grid; place-items: center;
  pointer-events: none;
  font: 700 clamp(56px, 16vmin, 22vh)/1 "Optika", sans-serif;
  color: #fff;
  text-shadow: 0 0 40px rgba(232, 89, 12, .8), 0 6px 0 rgba(0, 0, 0, .3);
}
.vpm > .vpm-flash[hidden] { display: none; }
.vpm-flash.is-on { animation: vpm-flash 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vpm-flash {
  0% { transform: scale(.4) rotate(-6deg); opacity: 0; }
  20% { transform: scale(1.08) rotate(0); opacity: 1; }
  75% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

.vpm-step-gift { background: rgba(255, 208, 138, .14); border: 1px solid var(--gold); font-size: 26px; }

/* End-of-round form */
.vpm-card-form { text-align: left; position: relative; }
.vpm-close {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
  touch-action: manipulation;
}
.vpm-close svg { width: 18px; height: 18px; }
.vpm-card-form h2 { padding-inline: 44px; }
.vpm-close:active { transform: scale(.92); }
.vpm-close:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.vpm-card-form h2, .vpm-score { text-align: center; }
.vpm-score { font-size: 18px; margin: 0 0 14px; }
.vpm-score b { color: var(--gold); }
.vpm-form-intro { margin: 0 0 12px; text-align: center; }
.vpm-field { display: block; margin-bottom: 12px; }
.vpm-field > span { display: block; font-size: 13px; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.vpm-field input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: 500 17px "Accord Alternate", system-ui, sans-serif;
  -webkit-user-select: text; user-select: text;
}
.vpm-field input::placeholder { color: rgba(255, 255, 255, .4); }
.vpm-field input:focus { outline: none; border-color: var(--orange-soft); box-shadow: 0 0 0 3px rgba(232, 89, 12, .3); }
.vpm-consent { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; margin: 6px 0 4px; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .85); cursor: pointer; }
.vpm-consent input { width: 22px; height: 22px; margin: 0; accent-color: var(--orange); }
.vpm-err { display: none; margin-top: 6px; font-style: normal; font-size: 13px; color: #FFB199; }
.vpm-err.is-shown { display: block; }
.vpm-thanks-badge { width: 120px; height: 120px; }

/* Header tools: sound + full screen */
.vpm-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.vpm-snd .vpm-snd-off, .vpm-snd.is-off .vpm-snd-on { display: none; }
.vpm-snd.is-off .vpm-snd-off { display: inline; }
.vpm-snd.is-off { opacity: .7; }

/* Streak bonus: regained heart and floating +1 */
.vpm-stat-tries { position: relative; }
.vpm-heart.is-gained { animation: vpm-heart-in .7s cubic-bezier(.2, 1.6, .4, 1) both; color: var(--gold); }
@keyframes vpm-heart-in { 0% { transform: scale(0); } 60% { transform: scale(1.7); } 100% { transform: scale(1); } }
.vpm-bonus {
  position: absolute; right: 10px; top: -6px;
  font: 700 18px "Optika", sans-serif; color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 208, 138, .8);
  pointer-events: none;
}
.vpm-bonus[hidden] { display: none; }
.vpm-bonus.is-on { animation: vpm-float 1.3s ease-out both; }
@keyframes vpm-float { 0% { transform: translateY(10px) scale(.6); opacity: 0; } 20% { opacity: 1; transform: translateY(0) scale(1.2); } 100% { transform: translateY(-40px) scale(1); opacity: 0; } }

/* Match callout over the board */
.vpm-board-wrap { position: relative; }
.vpm-callout { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 5; }
.vpm-callout[hidden] { display: none; }
.vpm-callout-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px 12px 12px;
  border-radius: 18px;
  background: rgba(28, 8, 56, .88);
  border: 2px solid var(--gold);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 30px rgba(232, 89, 12, .35);
}
.vpm-callout-card img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 12px; padding: 4px; }
.vpm-callout-card strong { display: block; font: 700 22px "Optika", sans-serif; color: #fff; }
.vpm-callout-card em { display: block; font-style: normal; font-size: 15px; color: var(--gold); margin-top: 2px; }
.vpm-callout-card em[hidden] { display: none; }
.vpm-callout-card.is-on { animation: vpm-callout 1.3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vpm-callout {
  0% { transform: scale(.5) translateY(20px); opacity: 0; }
  18% { transform: scale(1.06); opacity: 1; }
  30%, 78% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.9) translateY(-20px); opacity: 0; }
}

/* Joker: gold flash text and a glow over the board */
.vpm-flash.is-gold { color: var(--gold); text-shadow: 0 0 50px rgba(255, 181, 71, .95), 0 6px 0 rgba(120, 50, 0, .35); }
.vpm-board.is-golden { animation: vpm-golden 1.4s ease-out; }
@keyframes vpm-golden {
  0% { filter: drop-shadow(0 0 0 rgba(255, 208, 138, 0)); }
  30% { filter: drop-shadow(0 0 3vh rgba(255, 208, 138, .95)); }
  100% { filter: drop-shadow(0 0 0 rgba(255, 208, 138, 0)); }
}

/* Confetti layer sits above everything, including overlays */
.vpm > .vpm-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

/* Start screen: instructions + today's leaderboard */
.vpm-intro { place-items: unset; }
.vpm-intro-grid { margin: auto; width: min(100%, 400px); display: grid; gap: 14px; }
.vpm-intro-grid > .vpm-card { width: 100%; }
.vpm-leaders-card h2 { margin-bottom: 10px; }
.vpm-leaders { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.vpm-leaders li {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .06);
}
.vpm-rank {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 13px "Optika", sans-serif;
  background: rgba(255, 255, 255, .14);
}
.vpm-leaders li:nth-child(1) .vpm-rank { background: linear-gradient(145deg, #FFE3A3, #E0A21B); color: #3A1470; }
.vpm-leaders li:nth-child(2) .vpm-rank { background: linear-gradient(145deg, #F2F2F2, #A8A8B8); color: #3A1470; }
.vpm-leaders li:nth-child(3) .vpm-rank { background: linear-gradient(145deg, #F4C29A, #B86B32); color: #2A0E52; }
.vpm-leaders li:nth-child(1) { background: rgba(255, 208, 138, .14); }
.vpm-lname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpm-lscore { font-family: "Optika", sans-serif; color: var(--gold); }
.vpm-leaders-empty { margin: 4px 0 0; color: var(--muted); }
.vpm-leaders-empty[hidden] { display: none; }
@media (max-width: 899px) { .vpm-leaders li:nth-child(n+6) { display: none; } }

/* Thank-you rank line */
.vpm-thanks-rank { font: 700 20px "Optika", sans-serif; color: var(--gold) !important; }
.vpm-thanks-rank[hidden] { display: none; }

/* Attract mode */
.vpm-attract {
  background: radial-gradient(circle at 50% 50%, rgba(20, 6, 40, .25), rgba(20, 6, 40, .6));
  backdrop-filter: none; -webkit-backdrop-filter: none;
  cursor: pointer;
}
.vpm-attract-banner {
  display: grid; justify-items: center; gap: 10px;
  padding: 28px 36px;
  border-radius: 24px;
  background: rgba(28, 8, 56, .85);
  border: 2px solid var(--gold);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 60px rgba(232, 89, 12, .3);
  text-align: center;
}
.vpm-attract-banner img { width: 220px; height: auto; }
.vpm-attract-banner strong { font: 700 48px/1 "Optika", sans-serif; color: #fff; animation: vpm-beat 1.4s ease-in-out infinite; }
.vpm-attract-banner span { font-size: 18px; color: rgba(255, 255, 255, .9); }
.vpm-attract-banner em { font-style: normal; font-size: 16px; color: var(--gold); }
.vpm-attract-banner em[hidden] { display: none; }
@keyframes vpm-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); text-shadow: 0 0 30px rgba(232, 89, 12, .9); } }

/* "T&Cs apply" notes and inline links */
.vpm-tc-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.vpm-link {
  border: 0; padding: 0; background: none;
  color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.vpm-consent .vpm-link { color: var(--gold); }

/* Prize shown at the top of the details form */
.vpm-prize-line {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px; padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 208, 138, .12);
  border: 1px solid rgba(255, 208, 138, .5);
}
.vpm-prize-line[hidden] { display: none; }
.vpm-prize-line img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 10px; padding: 3px; flex: none; }
.vpm-prize-line span { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vpm-prize-line strong { display: block; font: 700 18px "Optika", sans-serif; color: var(--gold); }

/* Mystery box */
.vpm-mystery-card { display: grid; justify-items: center; gap: 10px; }
.vpm-mystery-card h2 { margin: 0; }
.vpm-mystery-card p { margin: 0; }
.vpm-box {
  position: relative;
  width: 180px; height: 170px;
  margin: 18px 0 8px;
  border: 0; padding: 0; background: none;
  cursor: pointer;
  touch-action: manipulation;
  animation: vpm-box-bob 1.6s ease-in-out infinite;
}
.vpm-box[hidden] { display: none; }
.vpm-box-body {
  position: absolute; left: 10%; right: 10%; bottom: 0; height: 64%;
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 43%, var(--gold) 43% 57%, transparent 57%),
    linear-gradient(160deg, var(--orange-soft), var(--orange) 55%, #B83A00);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .4), inset 0 -6px 0 rgba(0, 0, 0, .15);
  display: grid; place-items: center;
}
.vpm-box-body b {
  font: 700 52px/1 "Optika", sans-serif; color: #fff;
  text-shadow: 0 3px 0 rgba(120, 40, 0, .5);
  transform: translateY(6px);
}
.vpm-box-lid {
  position: absolute; left: 4%; right: 4%; top: 18%; height: 22%;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 43%, #FFE3A3 43% 57%, transparent 57%),
    linear-gradient(160deg, #FFA45C, var(--orange));
  box-shadow: 0 6px 12px rgba(0, 0, 0, .25);
  transform-origin: 15% 100%;
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .45s;
}
.vpm-box-lid::before, .vpm-box-lid::after {
  content: ""; position: absolute; top: -26px; width: 34px; height: 30px;
  border: 7px solid var(--gold); border-radius: 50% 50% 0 50%;
}
.vpm-box-lid::before { left: calc(50% - 38px); transform: rotate(-20deg); }
.vpm-box-lid::after { left: calc(50% + 4px); transform: scaleX(-1) rotate(-20deg); }
.vpm-box:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: 12px; }
.vpm-box.is-shaking { animation: vpm-box-shake .9s ease-in-out; }
.vpm-box.is-open { animation: none; }
.vpm-box.is-open .vpm-box-lid { transform: translate(-30%, -90%) rotate(-35deg); opacity: 0; }
@keyframes vpm-box-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes vpm-box-shake {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-8deg) scale(1.03); } 30% { transform: rotate(8deg) scale(1.05); }
  45% { transform: rotate(-10deg) scale(1.07); } 60% { transform: rotate(10deg) scale(1.09); }
  75% { transform: rotate(-6deg) scale(1.1); }
}
.vpm-mystery-prize { display: grid; justify-items: center; gap: 10px; margin: 8px 0; }
.vpm-mystery-prize[hidden] { display: none; }
.vpm-mystery-prize img { width: 170px; height: 170px; object-fit: contain; background: #fff; border-radius: 18px; padding: 8px; box-shadow: 0 0 0 3px var(--gold), 0 0 40px rgba(255, 208, 138, .55); }
.vpm-mystery-prize strong { font: 700 26px "Optika", sans-serif; color: var(--gold); }
.vpm-mystery-prize.is-on { animation: vpm-pop-in .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes vpm-pop-in { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.vpm-mystery .vpm-btn { max-width: 320px; }

/* Terms & Conditions page sits above every other screen */
.vpm > .vpm-terms { z-index: 25; background: rgba(20, 6, 40, .9); }
.vpm-terms-card { width: min(100%, 640px); text-align: left; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.vpm-terms-card h2 { text-align: center; }
.vpm-terms-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; line-height: 1.5; color: rgba(255, 255, 255, .9); font-size: 15px; }
.vpm-terms-body h3 { font: 700 16px "Optika", sans-serif; color: var(--gold); margin: 16px 0 6px; }
.vpm-terms-body ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.vpm-terms-body p { margin: 0 0 6px; }

/* Desktop, laptop and large landscape touchscreens (e.g. 75" 4K panel):
   side panel + board that fills the screen height. Sizes are in vh so a 4K
   screen at 100% scaling looks the same as a 1080p laptop, just bigger. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .vpm {
    display: grid;
    grid-template-columns: clamp(250px, 34vh, 46vw) 1fr;
    grid-template-rows: 1fr auto;
    gap: 2vh 4vh;
    padding: 3vh 4vh;
    align-items: center;
  }
  .vpm-head { grid-column: 1; grid-row: 1; width: 100%; gap: 3vh; align-self: center; }
  .vpm-brand { flex-direction: column; align-items: flex-start; gap: 1.8vh; }
  .vpm-logo { height: 6.5vh; min-height: 34px; }
  .vpm-brand h1 { font-size: max(26px, 4.4vh); line-height: 1.08; }
  .vpm-fs { font-size: max(13px, 1.6vh); padding: .8vh 1.2vh; border-radius: 1.2vh; gap: .8vh; }
  .vpm-fs svg { width: max(16px, 2vh); height: max(16px, 2vh); }
  .vpm-fs span { display: inline; }
  .vpm-stats { grid-template-columns: 1fr; gap: 1.5vh; }
  .vpm-stat { flex-direction: row; justify-content: space-between; align-items: center; padding: 1.8vh 2.2vh; border-radius: 1.8vh; }
  .vpm-stat span { font-size: max(12px, 1.7vh); }
  .vpm-stat strong { font-size: max(24px, 5vh); }
  .vpm-shuffle { flex-wrap: wrap; font-size: max(13px, 2vh); gap: 1.2vh; }
  .vpm-shuffle-bar { flex-basis: 100%; height: max(6px, 1.2vh); order: 2; }
  #vpm-shuffle-label { text-align: left; min-width: 0; }
  .vpm-board-wrap { grid-column: 2; grid-row: 1 / span 2; height: 100%; place-items: center; }
  .vpm-board { --gap: 1.6vh; --radius: 2.2vh; gap: var(--gap); }
  .vpm-tile, .vpm-face { border-radius: var(--radius); }
  .vpm-tile.is-matched .vpm-front { box-shadow: 0 0 0 .4vh var(--orange), 0 0 2.4vh rgba(232, 89, 12, .55); }
  .vpm-tile.is-matched.is-settled .vpm-front { box-shadow: 0 0 0 .3vh rgba(232, 89, 12, .7); }
  .vpm-hint { grid-column: 1; grid-row: 2; text-align: left; font-size: max(13px, 1.9vh); align-self: end; }

  .vpm-card { width: min(92vw, 64vh); padding: 4.5vh 4vh; border-radius: 3vh; }
  .vpm-card-logo { width: 60%; margin-bottom: 2.4vh; }
  .vpm-card h2 { font-size: max(24px, 4.4vh); margin-bottom: 2.4vh; }
  .vpm-card p { font-size: max(15px, 2.4vh); }
  .vpm-steps { gap: 2.2vh; margin-bottom: 3vh; }
  .vpm-steps li { font-size: max(15px, 2.4vh); grid-template-columns: 8vh 1fr; gap: 2vh; }
  .vpm-step-icon { width: 8vh; height: 8vh; border-radius: 1.8vh; }
  .vpm-step-time { font-size: max(16px, 2.6vh); }
  .vpm-step-time.vpm-hearts { font-size: max(13px, 2vh); }
  .vpm-btn { font-size: max(16px, 2.8vh); padding: 2.4vh 2vh; border-radius: 1.8vh; margin-top: 1.6vh; }
  .vpm-count { font-size: 60vh; }
  .vpm-count.is-go { font-size: 40vh; }

  /* Keep the form high so an on-screen keyboard doesn't cover it */
  #vpm-end { place-items: start center; padding-top: 5vh; }
  .vpm-score { font-size: max(18px, 3vh); margin-bottom: 2vh; }
  .vpm-form-intro { font-size: max(15px, 2.2vh); margin-bottom: 2vh; }
  .vpm-field { margin-bottom: 1.8vh; }
  .vpm-field > span { font-size: max(13px, 1.8vh); margin-bottom: .8vh; }
  .vpm-field input { font-size: max(17px, 2.6vh); padding: 1.8vh 2vh; border-radius: 1.6vh; }
  .vpm-consent { font-size: max(14px, 1.9vh); grid-template-columns: 3.4vh 1fr; gap: 1.4vh; }
  .vpm-consent input { width: max(22px, 3vh); height: max(22px, 3vh); }
  .vpm-err { font-size: max(13px, 1.8vh); }
  .vpm-step-gift { font-size: 4vh; }
  .vpm-thanks-badge { width: 18vh; height: 18vh; }
}

/* Large-screen sizes for the social features */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .vpm-tools { gap: 1vh; }
  .vpm-bonus { font-size: max(18px, 4vh); right: 2vh; top: -1vh; }
  .vpm-callout-card { gap: 2.2vh; padding: 1.8vh 3.6vh 1.8vh 1.8vh; border-radius: 3vh; border-width: .3vh; }
  .vpm-callout-card img { width: 12vh; height: 12vh; border-radius: 2vh; padding: .6vh; }
  .vpm-callout-card strong { font-size: max(22px, 5.4vh); }
  .vpm-callout-card em { font-size: max(15px, 2.8vh); }
  .vpm-intro-grid { width: auto; grid-template-columns: min(46vw, 64vh) min(40vw, 54vh); gap: 3vh; align-items: stretch; }
  .vpm-intro-grid > .vpm-card { width: 100%; }
  .vpm-leaders { gap: 1vh; }
  .vpm-leaders li { grid-template-columns: 4.6vh 1fr auto; gap: 1.6vh; padding: 1.1vh 1.8vh; border-radius: 1.4vh; font-size: max(15px, 2.4vh); }
  .vpm-rank { width: 4vh; height: 4vh; font-size: max(13px, 1.9vh); }
  .vpm-leaders-empty { font-size: max(15px, 2.4vh); }
  .vpm-thanks-rank { font-size: max(20px, 3.4vh); }
  .vpm-attract-banner { gap: 2vh; padding: 5vh 8vh; border-radius: 4vh; border-width: .3vh; }
  .vpm-attract-banner img { width: 38vh; }
  .vpm-attract-banner strong { font-size: 12vh; }
  .vpm-attract-banner span { font-size: max(18px, 3.4vh); }
  .vpm-attract-banner em { font-size: max(16px, 2.8vh); }
  /* Six hearts: label above, hearts in one row underneath */
  .vpm-stat-tries { flex-direction: column; align-items: flex-start; gap: .8vh; }
  .vpm-stat-tries strong { font-size: max(20px, 3.8vh); }
  .vpm-close { top: 1.6vh; right: 1.6vh; width: max(40px, 5vh); height: max(40px, 5vh); }
  .vpm-close svg { width: max(18px, 2.4vh); height: max(18px, 2.4vh); }
  .vpm-tc-note { font-size: max(12px, 1.6vh); margin-top: 1.4vh; }
  .vpm-prize-line { gap: 1.6vh; padding: 1.4vh 1.8vh; border-radius: 1.6vh; margin-bottom: 1.8vh; }
  .vpm-prize-line img { width: 8vh; height: 8vh; border-radius: 1.4vh; }
  .vpm-prize-line span { font-size: max(12px, 1.6vh); }
  .vpm-prize-line strong { font-size: max(18px, 3vh); }
  .vpm-mystery-card { gap: 1.6vh; }
  .vpm-box { width: 28vh; height: 26vh; margin: 3vh 0 1.4vh; }
  .vpm-box-body b { font-size: 9vh; }
  .vpm-box-lid::before, .vpm-box-lid::after { top: -4vh; width: 5.4vh; height: 4.6vh; border-width: 1.1vh; }
  .vpm-box-lid::before { left: calc(50% - 6vh); }
  .vpm-box-lid::after { left: calc(50% + .6vh); }
  .vpm-mystery-prize img { width: 26vh; height: 26vh; border-radius: 2.6vh; padding: 1.2vh; }
  .vpm-mystery-prize strong { font-size: max(26px, 4.4vh); }
  .vpm-mystery .vpm-btn { max-width: 46vh; }
  .vpm-terms-card { width: min(92vw, 90vh); }
  .vpm-terms-body { font-size: max(15px, 2.1vh); }
  .vpm-terms-body h3 { font-size: max(16px, 2.4vh); }
  /* The details form (with the prize line) must fit a 1080p screen without scrolling */
  #vpm-end { padding-top: 3vh; }
  #vpm-end .vpm-card { padding: 3vh 4vh 2.6vh; }
  #vpm-end h2 { font-size: max(22px, 3.8vh); margin: .4vh 0 .8vh; }
  #vpm-end .vpm-score { font-size: max(16px, 2.4vh); margin-bottom: 1.4vh; }
  #vpm-end .vpm-prize-line { padding: 1vh 1.6vh; margin-bottom: 1.2vh; }
  #vpm-end .vpm-prize-line img { width: 6.4vh; height: 6.4vh; }
  #vpm-end .vpm-form-intro { margin-bottom: 1.4vh; }
  #vpm-end .vpm-field { margin-bottom: 1.3vh; }
  #vpm-end .vpm-field > span { margin-bottom: .5vh; }
  #vpm-end .vpm-field input { padding: 1.3vh 1.8vh; font-size: max(16px, 2.3vh); }
  #vpm-end .vpm-btn { padding: 1.9vh 2vh; }
  #vpm-end .vpm-tc-note { margin-top: 1vh; }
}