/* The Ad (public/js/popup-ad.js). Every design is its own thing — a receipt,
   a FaceTime call, a WANTED poster — and they are loud, cheap and hard to
   close on purpose. Above the answer screen, under the game-paused overlay
   (200). Each design's styles are scoped to .pad--<id>; the shared pieces
   (face, CTA, close slot, the three closing tricks) come first. */

.popup-ad {
  position: fixed; inset: 0; z-index: 190; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(8, 6, 18, 0.74); backdrop-filter: blur(3px);
}
/* The frame: about 80% of a phone's screen (a tall box, never wider than a portrait
   ad would be). It wears the ad's own background, copied from the card by
   popup-ad.js; the card goes see-through and is zoomed to fill it. Designs are
   drawn at 340px wide and scaled from there. */
.popup-ad__frame {
  position: relative; width: min(94vw, 62vh); height: 85vh; height: 85dvh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 22px; background: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  animation: padIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.popup-ad__frame > .pad { width: 340px; max-height: none; box-shadow: none; border-radius: 0; animation: none; }
.popup-ad__frame.is-dressed > .pad { background: transparent !important; }
.popup-ad__frame--full > .pad { width: 100%; height: 100%; }

.pad {
  position: relative; width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  overflow: hidden; border-radius: 18px; text-align: center; color: #201e2e; background: #fff;
  font-family: var(--font-body); font-size: 14px; line-height: 1.35;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  animation: padIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.pad *, .pad *::before, .pad *::after { box-sizing: border-box; }
.pad h3, .pad p, .pad ul, .pad ol { margin: 0; }
.pad button { font: inherit; cursor: pointer; }
@keyframes padIn { from { transform: scale(0.6) rotate(-6deg); opacity: 0; } }

/* The sender: their photo, or their initial in their colour. */
.pad-face { display: block; object-fit: cover; border-radius: 50%; background: #3a3452; flex-shrink: 0; }
.pad-face--init { display: grid; place-items: center; background: var(--pad-c); color: #fff; font-family: var(--font-heading); font-weight: 900; container-type: size; }
.pad-face--init span { font-size: 56cqmin; line-height: 1; }

.pad-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 12px; border-radius: 12px; border: 0;
  font-family: var(--font-heading) !important; font-weight: 900; font-size: 1.02rem; letter-spacing: 0.03em;
  background: #201e2e; color: #fff;
}
.pad-cta.is-nope, [data-nope].is-nope { animation: padNope 0.35s ease; }
@keyframes padNope { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* Where the ✕ lives: a countdown first, then the tiny ✕. */
.pad-close { position: absolute; z-index: 6; top: 8px; right: 8px; width: 22px; height: 22px; display: grid; place-items: center; }
.pad-close[data-corner="tl"] { top: 8px; left: 8px; right: auto; bottom: auto; }
.pad-close[data-corner="bl"] { bottom: 8px; left: 8px; top: auto; right: auto; }
.pad-close[data-corner="br"] { bottom: 8px; right: 8px; top: auto; left: auto; }
.pad-close.is-dodged { animation: padDodge 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes padDodge { from { transform: scale(0.2) rotate(-120deg); } }
.pad-count {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--pad-x, rgba(32, 30, 46, 0.35)); color: var(--pad-x, rgba(32, 30, 46, 0.5));
  font: 800 10px/1 var(--font-body);
}
/* The ✕ itself: small and dim, like every real one. The tap target is a
   little kinder than it looks, or nobody on a phone could ever hit it. */
.pad-x {
  position: relative; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--pad-x, rgba(32, 30, 46, 0.5));
  font-size: 16px; line-height: 20px; font-weight: 400; animation: padXIn 0.25s ease backwards;
}
.pad-x::after { content: ''; position: absolute; inset: -7px; }
@keyframes padXIn { from { opacity: 0; transform: scale(0.4); } }

/* ── the closing tricks ─────────────────────────────────────────────────── */
.pad-modal { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.45); }

.pcap {
  width: min(310px, calc(100vw - 32px)); background: #fff; border: 1px solid #d6d6d6; border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); padding: 7px; font-family: Roboto, Arial, sans-serif; color: #222; position: relative;
  animation: padIn 0.3s ease backwards;
}
.pcap-head { background: #1a73e8; color: #fff; padding: 18px 16px; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.pcap-head small { font-size: 13px; }
.pcap-head b { font-size: 22px; line-height: 1.15; font-weight: 700; }
.pcap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 7px 0; }
.pcap-tile {
  position: relative; aspect-ratio: 1; border: 0; padding: 0; background-color: #ddd; background-size: 300% 300%;
  transition: transform 0.15s ease;
}
.pcap-tile--init { display: grid; place-items: center; background: var(--pad-c); color: #fff; font: 900 34px/1 var(--font-heading); }
.pcap-tile--init span { transform: rotate(var(--r)); }
.pcap-tile.is-on { transform: scale(0.84); }
.pcap-tile.is-on::after {
  content: '✓'; position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; border-radius: 50%;
  background: #1a73e8; color: #fff; font: 700 14px/22px Arial, sans-serif;
}
.pcap-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e0e0e0; padding: 8px 2px 0; color: #777; }
.pcap-foot span { display: flex; gap: 12px; }
.pcap-verify { background: #1a73e8; color: #fff; border: 0; border-radius: 2px; padding: 10px 22px; font: 700 14px Roboto, Arial, sans-serif; }
.pcap-busy { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); font-weight: 600; }
.pcap-busy[hidden] { display: none; }
.pcap-busy i { width: 36px; height: 36px; border-radius: 50%; border: 4px solid #d2e3fc; border-top-color: #1a73e8; animation: padSpin 0.7s linear infinite; }
@keyframes padSpin { to { transform: rotate(360deg); } }

.pleave {
  width: min(300px, calc(100vw - 40px)); background: #fff; color: #202124; border-radius: 12px; padding: 22px 20px 16px;
  text-align: left; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); font-family: var(--font-body); animation: padIn 0.3s ease backwards;
}
.pleave-q { display: block; font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.pleave p { font-size: 14px; color: #5f6368; margin: 0 0 18px; }
.pleave-btns { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
/* The swap: Stay is the big bright one your thumb goes to. */
.pleave-stay { background: #1a73e8; color: #fff; border: 0; border-radius: 20px; padding: 10px 26px; font-weight: 700; font-size: 15px; }
.pleave-leave { background: none; color: #9aa0a6; border: 0; padding: 8px 6px; font-size: 12px; }

/* ── mild ───────────────────────────────────────────────────────────────── */

/* Extended warranty — a voicemail from "Scam Likely" */
.pad--warranty { background: #0f1724; color: #e8edf6; padding: 14px 16px 16px; --pad-x: rgba(232, 237, 246, 0.55); }
.pw-bar { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #93a0b8; padding-right: 26px; }
.pw-bar em { margin-left: auto; font-style: normal; font-weight: 800; color: #fff; background: #d93025; border-radius: 999px; padding: 2px 9px; font-size: 11px; }
.pw-from { text-align: left; font-size: 12px; color: #6f7c94; margin: 4px 0 8px; }
.pw-wave { display: flex; align-items: center; gap: 3px; height: 38px; margin-bottom: 10px; }
.pw-wave i { flex: 1; height: var(--h); background: #4c8dff; border-radius: 2px; animation: pwWave 0.9s ease-in-out var(--d) infinite alternate; }
@keyframes pwWave { to { transform: scaleY(0.35); } }
.pad--warranty h3 { font: 800 1.15rem/1.2 var(--font-heading); margin-bottom: 6px; }
.pw-trans { font-size: 13px; color: #b4c0d6; font-style: italic; margin-bottom: 12px; }
.pw-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 22px; padding: 0 20px; }
.pw-key { height: 42px; border-radius: 50%; border: 0; background: #1f2a3d; color: #e8edf6; font: 600 20px/1 var(--font-body); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.pw-key--1 { background: #34c759; color: #0f1724; box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.3); animation: pwPulse 1s ease-in-out infinite; }
.pw-key--1 small { font-size: 7px; font-weight: 900; letter-spacing: 0.05em; margin-top: -8px; }
@keyframes pwPulse { 50% { box-shadow: 0 0 0 10px rgba(52, 199, 89, 0); } }

/* The receipt */
.pad--receipt { background: #cfc8b8; padding: 14px 16px 16px; }
.pr-head { font: 700 14px/1.3 var(--font-heading); margin: 0 18px 10px; }
.pr-paper {
  background: #fffdf6; padding: 14px 16px 22px; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; color: #2a2a2a;
  text-align: left; margin-bottom: 12px; transform: rotate(-1.2deg);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
}
.pr-shop { text-align: center; font-weight: 800; letter-spacing: 0.08em; }
.pr-shop small { display: block; font-weight: 400; letter-spacing: 0; font-size: 10px; color: #777; }
.pr-dash { border-top: 1px dashed #999; margin: 7px 0; }
.pr-row { display: flex; justify-content: space-between; gap: 10px; }
.pr-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-total { font-weight: 800; font-size: 14px; }
.pr-up { text-transform: uppercase; }
.pr-msg { margin-top: 8px; font-size: 11px; }
.pr-barcode { height: 30px; margin: 10px 8px 4px; background: repeating-linear-gradient(90deg, #222 0 2px, transparent 2px 4px, #222 4px 5px, transparent 5px 8px, #222 8px 11px, transparent 11px 12px); }
.pr-thanks { text-align: center; font-size: 10px; }
.pad--receipt .pad-cta { background: #2a2a2a; }

/* The petition */
.pad--petition { padding: 14px 18px 16px; }
.ppt-brand { text-align: left; font: 800 18px var(--font-heading); color: #eb2d2d; margin-bottom: 10px; }
.ppt-brand b { color: #201e2e; }
.ppt-by { display: flex; align-items: center; gap: 10px; text-align: left; font-size: 12.5px; color: #555; margin-bottom: 10px; }
.ppt-face { width: 42px; height: 42px; }
.pad--petition h3 { font: 900 1.4rem/1.15 var(--font-heading); text-align: left; margin-bottom: 10px; }
.ppt-bar { height: 10px; border-radius: 99px; background: #f0e6e6; overflow: hidden; }
.ppt-bar i { display: block; width: 2%; height: 100%; background: #eb2d2d; }
.ppt-count { text-align: left; font-size: 12.5px; margin: 6px 0 10px; }
.ppt-why { text-align: left; background: #f7f7f7; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 12px; }
.ppt-why p { margin-top: 4px; }
.ppt-why i { color: #888; }
.pad--petition .pad-cta { background: #eb2d2d; }

/* Losing Premium — an app-store subscription sheet */
.pad--subscription { background: #f2f2f7; padding: 8px 18px 14px; border-radius: 22px; }
.psub-grab { width: 38px; height: 5px; border-radius: 3px; background: #c7c7cc; margin: 0 auto 14px; }
.psub-icon { width: 76px; height: 76px; margin: 0 auto 8px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #6d5dfc, #e65498); box-shadow: 0 6px 16px rgba(109, 93, 252, 0.35); }
.psub-app { font: 800 18px var(--font-heading); }
.psub-dev { font-size: 12px; color: #8e8e93; margin-bottom: 12px; }
.pad--subscription h3 { font: 700 15px/1.3 var(--font-body); margin-bottom: 12px; }
.psub-rows { background: #fff; border-radius: 12px; text-align: left; margin-bottom: 14px; }
.psub-rows div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e5e5ea; font-size: 13.5px; }
.psub-rows div:last-child { border: 0; }
.psub-rows span { color: #8e8e93; }
.psub-red { color: #ff3b30; }
.pad--subscription .pad-cta { background: #007aff; border-radius: 14px; }
.psub-fine { display: block; margin-top: 8px; font-size: 11px; color: #8e8e93; }

/* Versus — a fighting-game select screen */
.pad--versus { background: #0b0616; color: #fff; padding: 12px 16px 16px; --pad-x: rgba(255, 255, 255, 0.55); }
.pvs-hud { display: flex; align-items: center; gap: 8px; margin-right: 26px; }
.pvs-hud b { font: 900 16px var(--font-heading); color: #ffd23f; }
.pvs-hp { flex: 1; height: 12px; background: #3a1020; border: 2px solid #fff; transform: skewX(-20deg); overflow: hidden; }
.pvs-hp i { display: block; height: 100%; background: linear-gradient(#ffe066, #ff9f1c); }
.pvs-hp--r { display: flex; justify-content: flex-end; }
.pvs-hp--r i { background: linear-gradient(#ff6b6b, #c0122b); }
.pvs-arena { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 14px -16px 12px; padding: 18px 16px; background: linear-gradient(115deg, #d7263d 0 49.6%, #fff 49.6% 50.4%, #1b4bd6 50.4%); }
.pvs-p { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 110px; font: 800 12px var(--font-heading); text-transform: uppercase; }
.pvs-p span:last-child { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvs-face { width: 86px; height: 86px; border-radius: 12px; border: 3px solid #fff; transform: rotate(-4deg); }
.pvs-you { width: 86px; height: 86px; border-radius: 12px; border: 3px solid #fff; display: grid; place-items: center; font: 900 40px var(--font-heading); background: #0d2a8a; transform: rotate(4deg); filter: grayscale(0.4); }
.pvs-vs { font: 900 italic 44px var(--font-heading); color: #ffd23f; -webkit-text-stroke: 2px #201e2e; text-shadow: 0 0 18px #ff9f1c; animation: pvsThrob 0.8s ease-in-out infinite; }
@keyframes pvsThrob { 50% { transform: scale(1.15) rotate(-6deg); } }
.pad--versus h3 { font: 900 1.2rem/1.2 var(--font-heading); }
.pad--versus p { color: #ff9f1c; font-weight: 800; margin: 4px 0 12px; }
.pad--versus .pad-cta { background: #ffd23f; color: #201e2e; transform: skewX(-8deg); }

/* Aura check */
.pad--aura { background: radial-gradient(circle at 50% 22%, #5b21b6, #12081f 65%); color: #fff; padding: 16px 18px; --pad-x: rgba(255, 255, 255, 0.55); }
.pau-tag { display: inline-flex; align-items: center; gap: 6px; font: 800 11px var(--font-heading); letter-spacing: 0.2em; color: #c4b5fd; }
.pau-num { font: 900 3.2rem/1 var(--font-heading); margin: 8px 0; color: #ff4d6d; text-shadow: 3px 0 #00f3ff, -3px 0 #ff00c8; animation: pauGlitch 1.4s steps(2) infinite; }
@keyframes pauGlitch { 50% { text-shadow: -3px 0 #00f3ff, 3px 0 #ff00c8; transform: translateX(2px); } }
.pau-meter { position: relative; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); margin: 6px 10px 12px; }
.pau-meter i { position: absolute; right: 50%; top: 0; bottom: 0; width: 48%; border-radius: 99px 0 0 99px; background: linear-gradient(90deg, #ff4d6d, #7c1d3a); }
.pau-meter span { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font-size: 10px; color: #a78bfa; }
.pad--aura h3 { font: 800 1.1rem var(--font-heading); margin-top: 16px; }
.pau-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0; }
.pau-stats div { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(196, 181, 253, 0.3); border-radius: 10px; padding: 6px 4px; }
.pau-stats span { display: block; font-size: 10px; color: #c4b5fd; }
.pau-stats b { font: 800 13px var(--font-heading); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad--aura p { font-size: 13px; color: #ddd6fe; margin-bottom: 12px; }
.pad--aura .pad-cta { background: linear-gradient(90deg, #a855f7, #ec4899); box-shadow: 0 0 20px rgba(168, 85, 247, 0.6); }

/* Doctors hate them — a native ad */
.pad--doctors { padding: 10px 14px 14px; text-align: left; }
.pdr-spon { font-size: 11px; color: #999; margin: 0 26px 8px 0; }
.pdr-hero { position: relative; height: 170px; margin-bottom: 10px; border-radius: 8px; overflow: hidden; background: #eee; }
.pdr-face { width: 100%; height: 100%; border-radius: 0; }
.pdr-face.pad-face--init span { font-size: 60cqmin; }
.pdr-ring { position: absolute; left: 50%; top: 42%; width: 120px; height: 120px; border: 5px solid #ff2020; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #fff; }
.pdr-arrow { position: absolute; left: 6px; bottom: 6px; width: 70px; height: 70px; fill: none; stroke: #ff2020; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px #fff); }
.pad--doctors h3 { font: 900 1.35rem/1.1 Georgia, 'Times New Roman', serif; }
.pad--doctors > p { font-size: 13px; color: #444; margin: 6px 0 10px; }
.pad--doctors .pad-cta { background: #0a7cff; border-radius: 6px; }
.pdr-more { margin-top: 10px; font-size: 11px; color: #777; }
.pdr-more > div { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.pdr-more small { font-size: 11.5px; color: #222; font-weight: 600; }
.pdr-thumb { width: 54px; height: 38px; border-radius: 4px; flex-shrink: 0; }
.pdr-thumb--1 { background: radial-gradient(circle at 40% 40%, #f7c59f, #c2410c); }
.pdr-thumb--2 { background: radial-gradient(circle at 60% 40%, #bef264, #3f6212); }

/* The thumbnail — a video page */
.pad--youtube { background: #0f0f0f; color: #f1f1f1; padding: 0 0 14px; text-align: left; --pad-x: rgba(255, 255, 255, 0.7); }
.pyt-thumb { position: relative; aspect-ratio: 16 / 10; background: #ffe600; overflow: hidden; }
.pyt-face { position: absolute; right: -10px; bottom: -20px; width: 60%; height: auto; aspect-ratio: 1; border: 6px solid #fff; box-shadow: 0 0 0 4px #201e2e; }
.pyt-circle { position: absolute; right: 12%; top: 26%; width: 74px; height: 74px; border: 5px solid #ff0000; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.pyt-arrow { position: absolute; left: 38%; top: 34%; width: 70px; height: 70px; fill: none; stroke: #ff0000; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px #fff); }
.pyt-big { position: absolute; left: 10px; bottom: 12px; font: 900 1.55rem/0.95 var(--font-heading); color: #fff; -webkit-text-stroke: 1.5px #000; text-shadow: 3px 3px 0 #000; transform: rotate(-4deg); }
.pyt-dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0, 0, 0, 0.85); font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.pyt-meta { display: flex; gap: 10px; padding: 10px 12px; }
.pyt-ch { width: 36px; height: 36px; }
.pyt-meta b { display: block; font-size: 13.5px; line-height: 1.3; }
.pyt-meta small { display: flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 11.5px; color: #aaa; }
.pad--youtube .pad-cta { width: calc(100% - 24px); margin: 0 12px; background: #ff0000; border-radius: 20px; }

/* The course — a hustle guru */
.pad--guru { background: #0b0b0b; color: #f5f0e1; padding: 12px 18px 16px; border: 2px solid #d4af37; --pad-x: rgba(212, 175, 55, 0.7); }
.pgu-top { display: flex; align-items: center; justify-content: center; gap: 6px; font: 800 10px var(--font-heading); letter-spacing: 0.18em; color: #d4af37; margin-bottom: 10px; }
.pgu-hero { position: relative; width: 120px; margin: 0 auto 10px; }
.pgu-face { width: 120px; height: 120px; border: 3px solid #d4af37; box-shadow: 0 0 24px rgba(212, 175, 55, 0.45); }
.pgu-car { position: absolute; right: -58px; bottom: 0; display: flex; flex-direction: column; align-items: center; color: #ff3b3b; }
.pgu-car small { font-size: 10px; color: #999; font-style: italic; }
.pad--guru h3 { font: 900 1.25rem/1.15 var(--font-heading); }
.pad--guru > p { font-size: 13px; color: #cfc6a8; margin: 4px 0 10px; }
.pgu-price { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.pgu-price s { color: #888; }
.pgu-price > b { font: 900 1.6rem var(--font-heading); color: #d4af37; }
.pgu-price span { font-size: 11px; background: #ff3b3b; color: #fff; padding: 2px 8px; border-radius: 99px; }
.pgu-rev { font-size: 11.5px; color: #d4af37; margin-bottom: 12px; }
.pad--guru .pad-cta { background: linear-gradient(90deg, #d4af37, #f7e7a1, #d4af37); color: #0b0b0b; }

/* Mewing tutorial */
.pad--mewing { background: #f4f6f8; padding: 14px 18px 16px; }
.pmw-step { font: 800 11px var(--font-heading); letter-spacing: 0.16em; color: #64748b; margin-bottom: 12px; }
.pmw-diagram { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.pmw-col { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 120px; }
.pmw-col small { font-size: 11.5px; color: #475569; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmw-you { width: 84px; height: 96px; border-radius: 45% 45% 50% 50% / 40% 40% 60% 60%; background: #cbd5e1; display: grid; place-items: center; font: 900 32px var(--font-heading); color: #64748b; }
.pmw-arrow { color: #94a3b8; margin-bottom: 40px; }
.pmw-wrap { position: relative; width: 110px; height: 110px; }
.pmw-face { width: 110px; height: 110px; }
.pmw-jaw { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); fill: none; stroke: #00e5ff; stroke-width: 3.5; stroke-linejoin: miter; filter: drop-shadow(0 0 4px #00e5ff); animation: pmwDraw 1.6s ease-in-out infinite alternate; stroke-dasharray: 220; }
@keyframes pmwDraw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
.pad--mewing h3 { font: 900 1.3rem var(--font-heading); }
.pad--mewing p { color: #475569; margin: 4px 0 12px; }
.pad--mewing .pad-cta { background: #0f172a; }

/* This is your sign */
.pad--sign { padding: 0; }
.psg-sky { position: relative; height: 330px; background: linear-gradient(#ffd6e7, #c6e2ff 70%); overflow: hidden; }
.psg-script { position: relative; z-index: 2; padding: 18px 20px 0; font: italic 700 22px/1.2 'Brush Script MT', 'Snell Roundhand', Georgia, cursive; color: #7a3b69; }
.psg-sign { position: absolute; left: 50%; top: 108px; width: 150px; height: 150px; margin-left: -75px; background: #ffd23f; border: 6px solid #201e2e; border-radius: 12px; transform: rotate(45deg); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15); z-index: 2; display: grid; place-items: center; animation: psgSway 3s ease-in-out infinite; }
.psg-sign span { transform: rotate(-45deg); font: 900 20px/1.05 var(--font-heading); letter-spacing: 0.04em; }
@keyframes psgSway { 50% { transform: rotate(48deg); } }
.psg-pole { position: absolute; left: 50%; top: 250px; bottom: 0; width: 12px; margin-left: -6px; background: #8a8f98; z-index: 1; }
.psg-grass { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: #7ccf6b; border-top: 4px solid #5aa84a; }
.psg-foot { padding: 12px 16px 16px; }
.psg-foot small { display: block; font-size: 11.5px; color: #888; margin-bottom: 8px; }
.pad--sign .pad-cta { background: #7a3b69; }

/* Join our cult — a flyer on a corkboard */
.pad--cultFlyer { padding: 14px 16px 16px; background: #b07a47 radial-gradient(#8e5c30 1.2px, transparent 1.6px) 0 0 / 9px 9px; --pad-x: rgba(255, 255, 255, 0.8); }
.pcf-board { padding: 8px 6px 4px; margin-bottom: 12px; }
.pcf-flyer { position: relative; background: #fffbe8; padding: 22px 16px 0; transform: rotate(-2deg); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }
.pcf-pin { position: absolute; left: 50%; top: -6px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a8a, #c1121f); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); }
.pcf-flyer h3 { font: 900 2rem/0.95 'Impact', 'Arial Black', var(--font-heading); letter-spacing: 0.02em; color: #7b2cbf; transform: rotate(-3deg); margin-bottom: 10px; }
.pcf-flyer ul { list-style: none; padding: 0; font: 700 15px 'Marker Felt', 'Comic Sans MS', cursive; text-align: left; display: inline-block; }
.pcf-flyer > small { display: block; font-size: 10px; color: #999; margin: 4px 0 10px; }
.pcf-tabs { display: flex; margin: 0 -16px; border-top: 1px dashed #aaa; }
.pcf-tabs span { flex: 1; height: 74px; border-right: 1px dashed #aaa; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 8px; line-height: 1.3; font-weight: 700; padding: 4px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pcf-tabs span.is-gone { visibility: hidden; }
.pad--cultFlyer .pad-cta { background: #7b2cbf; }

/* Cult leader */
.pad--cultLeader { background: #140a26; color: #f3e8ff; padding: 0 0 16px; --pad-x: rgba(243, 232, 255, 0.6); }
.pcl-stage { position: relative; height: 230px; overflow: hidden; background: radial-gradient(circle at 50% 38%, #6d28d9, #140a26 70%); }
.pcl-rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255, 214, 102, 0.18) 0 8deg, transparent 8deg 20deg); animation: padSpin 30s linear infinite; }
.pcl-halo { position: absolute; left: 50%; top: 22px; width: 150px; height: 150px; margin-left: -75px; border-radius: 50%; box-shadow: 0 0 0 6px #ffd666, 0 0 40px 10px rgba(255, 214, 102, 0.7); }
.pcl-figure { position: absolute; left: 50%; bottom: 0; width: 200px; height: 190px; margin-left: -100px; }
.pcl-robe { position: absolute; inset: 20px 0 0; width: 100%; height: 170px; }
.pcl-robe path { fill: #2d1b4e; stroke: #ffd666; stroke-width: 2; }
.pcl-robe .pcl-cord { fill: none; stroke: #ffd666; stroke-width: 3; }
.pcl-face { position: absolute; left: 50%; top: 42px; width: 92px; height: 92px; margin-left: -46px; box-shadow: 0 0 0 4px #1a0d33; }
.pcl-text { padding: 12px 18px; }
.pcl-text small { font: 800 10px var(--font-heading); letter-spacing: 0.24em; color: #ffd666; text-transform: uppercase; }
.pcl-text h3 { font: 700 1.2rem/1.2 Georgia, 'Times New Roman', serif; margin: 6px 0; }
.pcl-text p { font-size: 12.5px; color: #c4b5fd; }
.pad--cultLeader .pad-cta { width: calc(100% - 36px); background: #ffd666; color: #140a26; }

/* $QUIZ to the moon — a trading app */
.pad--stonks { background: #0b0e11; color: #eaecef; padding: 14px 16px 14px; text-align: left; --pad-x: rgba(234, 236, 239, 0.6); }
.pst-top { display: flex; align-items: baseline; gap: 8px; }
.pst-top b { font: 900 1.2rem var(--font-heading); color: #f0b90b; }
.pst-top span { font-size: 11px; color: #848e9c; }
.pst-price { font: 800 1.6rem var(--font-heading); margin: 2px 0 8px; }
.pst-price em { font-style: normal; font-size: 13px; color: #0ecb81; margin-left: 6px; }
.pst-chart { position: relative; height: 120px; margin-bottom: 10px; background: linear-gradient(transparent 49%, rgba(255, 255, 255, 0.05) 50%, transparent 51%) 0 0 / 100% 30px; }
.pst-chart svg { width: 100%; height: 100%; }
.pst-chart .up { fill: #0ecb81; stroke: #0ecb81; }
.pst-chart .dn { fill: #f6465d; stroke: #f6465d; }
.pst-rocket { position: absolute; right: 2px; top: -10px; color: #f0b90b; animation: pstFly 1.2s ease-in-out infinite alternate; }
@keyframes pstFly { to { transform: translate(4px, -8px) rotate(8deg); } }
.pad--stonks h3 { font: 800 1.1rem var(--font-heading); }
.pad--stonks p { font-size: 12.5px; color: #b7bdc6; margin: 4px 0 12px; }
.pst-btns { display: flex; gap: 8px; }
.pad--stonks .pad-cta { flex: 2; background: #0ecb81; color: #0b0e11; border-radius: 8px; }
.pst-sell { flex: 1; border: 0; border-radius: 8px; background: #2b3139; color: #5e6673; font: 800 1rem var(--font-heading); }
.pst-fine { display: block; margin-top: 8px; font-size: 11px; color: #848e9c; }

/* Sender coin */
.pad--coin { background: #111827; color: #fff; padding: 0 0 16px; --pad-x: rgba(255, 255, 255, 0.6); }
.pcn-stage { position: relative; height: 210px; overflow: hidden; background: linear-gradient(transparent 49%, rgba(255, 255, 255, 0.05) 50%, transparent 51%) 0 0 / 100% 35px; }
.pcn-line { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #22c55e; stroke-width: 4; stroke-linejoin: round; filter: drop-shadow(0 0 6px #22c55e); }
.pcn-coin { position: absolute; left: 50%; top: 26px; width: 146px; height: 146px; margin-left: -73px; animation: pcnSpin 3s ease-in-out infinite; }
@keyframes pcnSpin { 0%, 100% { transform: rotateY(0); } 50% { transform: rotateY(28deg) scale(1.03); } }
.pcn-rim { width: 100%; height: 100%; border-radius: 50%; padding: 12px; background: repeating-conic-gradient(#b8860b 0 4deg, #ffd700 4deg 8deg); box-shadow: 0 0 30px rgba(255, 215, 0, 0.5); }
.pcn-face { width: 100%; height: 100%; border: 4px solid #8b6508; filter: sepia(1) saturate(3.5) hue-rotate(-12deg) contrast(1.1); }
.pcn-tick { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font: 900 14px var(--font-heading); background: #22c55e; color: #052e16; padding: 2px 10px; border-radius: 99px; }
.pad--coin h3 { font: 900 1.25rem var(--font-heading); margin-top: 12px; }
.pad--coin p { font-size: 13px; color: #9ca3af; margin: 4px 0 10px; }
.pcn-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 12px; }
.pcn-stats div { background: #1f2937; border-radius: 10px; padding: 6px; }
.pcn-stats span { display: block; font-size: 10px; color: #9ca3af; }
.pcn-stats b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad--coin .pad-cta { width: calc(100% - 32px); background: #ffd700; color: #111827; }

/* A distant royal — a letter with a wax seal */
.pad--royal { background: #3b2a1a; padding: 14px 14px 16px; --pad-x: rgba(255, 240, 210, 0.7); }
.prl-paper { position: relative; background: linear-gradient(#f5e6c4, #ecd9ae); padding: 14px 18px 20px; margin-bottom: 12px; font: 13.5px/1.45 Georgia, 'Times New Roman', serif; color: #3b2a1a; text-align: left; border-radius: 3px; box-shadow: inset 0 0 30px rgba(139, 94, 52, 0.35); }
.prl-crest { text-align: center; color: #9a7b2f; }
.prl-cameo { width: 70px; height: 86px; margin: 4px auto 10px; border-radius: 50%; padding: 4px; background: linear-gradient(135deg, #b8860b, #ffe08a, #b8860b); }
.prl-face { width: 100%; height: 100%; border-radius: 50%; filter: sepia(0.5); }
.prl-dear { font-style: italic; }
.prl-paper p { margin-bottom: 6px; }
.prl-sign { margin-top: 8px; }
.prl-seal { position: absolute; right: 14px; bottom: -14px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 35%, #d62828, #7a0c0c); color: #ffcdb2; font: 900 20px Georgia, serif; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); }
.pad--royal .pad-cta { background: #9a7b2f; margin-top: 8px; }

/* You won a phone from 2009 */
.pad--oldPhone { background: #1a0033; color: #fff; padding: 0 0 14px; --pad-x: rgba(255, 255, 255, 0.7); }
.pop-top { display: flex; flex-direction: column; background: repeating-linear-gradient(45deg, #ff0080 0 12px, #ff4da6 12px 24px); padding: 8px 30px; font: 900 13px var(--font-heading); }
.pop-blink { color: #ffd23f; animation: popBlink 0.6s steps(2, start) infinite; }
@keyframes popBlink { 50% { color: #fff; } }
.pop-stage { position: relative; height: 200px; overflow: hidden; }
.pop-conf { position: absolute; top: -12px; width: 7px; height: 12px; background: var(--c); animation: popFall 2.4s linear var(--d) infinite; }
@keyframes popFall { to { transform: translateY(230px) rotate(540deg); } }
.pop-phone { position: absolute; left: 50%; top: 14px; width: 104px; margin-left: -52px; padding: 10px 9px 12px; background: linear-gradient(#c0c0c0, #7a7a7a); border-radius: 16px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); transform: rotate(-8deg); animation: popWiggle 1s ease-in-out infinite; }
@keyframes popWiggle { 50% { transform: rotate(6deg); } }
.pop-screen { position: relative; height: 84px; background: #9bbc0f; border: 3px solid #333; border-radius: 4px; display: grid; place-items: center; overflow: hidden; }
.pop-face { width: 60px; height: 60px; border-radius: 4px; filter: grayscale(1) contrast(1.5) sepia(0.8) hue-rotate(40deg) saturate(1.5); mix-blend-mode: multiply; }
.pop-bars { position: absolute; left: 3px; top: 1px; font-size: 8px; color: #0f380f; }
.pop-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.pop-keys i { height: 9px; border-radius: 4px; background: #333; }
.pad--oldPhone h3 { font: 900 1.25rem var(--font-heading); color: #ffd23f; padding: 0 12px; }
.pad--oldPhone > p { font-size: 13px; margin: 4px 12px 10px; }
.pad--oldPhone .pad-cta { width: calc(100% - 28px); background: #00e600; color: #1a0033; font-size: 1.3rem; animation: popBlinkBg 0.8s steps(2, start) infinite; }
@keyframes popBlinkBg { 50% { background: #ffd23f; } }
.pop-fine { display: block; margin-top: 8px; font-size: 10.5px; color: #b69cd6; padding: 0 12px; }

/* 94% haunted — fake antivirus */
.pad--haunted { background: #f3f3f3; padding: 0; border: 2px solid #b00020; --pad-x: rgba(255, 255, 255, 0.85); }
.phn-bar { display: flex; align-items: center; gap: 6px; padding: 8px 34px 8px 12px; background: #b00020; color: #fff; font: 700 12px var(--font-body); }
.phn-body { position: relative; z-index: 1; padding: 12px 16px 16px; }
.phn-scan { display: flex; align-items: flex-start; justify-content: center; font-family: var(--font-heading); color: #b00020; }
.phn-scan b { font-size: 3.4rem; line-height: 1; font-weight: 900; }
.phn-scan span { font-size: 1.6rem; font-weight: 900; text-align: left; line-height: 1; margin-top: 6px; }
.phn-scan small { display: block; font-size: 12px; font-weight: 700; color: #333; }
.phn-prog { height: 12px; border: 1px solid #999; background: #fff; margin: 8px 0 10px; }
.phn-prog i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #b00020 0 10px, #d9333f 10px 12px); transition: width 0.3s; }
.phn-list { list-style: none; padding: 0; text-align: left; font: 12px ui-monospace, Menlo, monospace; margin-bottom: 10px; }
.phn-list li { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid #ddd; }
.phn-list em { margin-left: auto; color: #b00020; font-style: normal; font-weight: 700; }
.pad--haunted h3 { font: 800 1.1rem var(--font-heading); }
.pad--haunted p { font-size: 12.5px; color: #555; margin: 3px 0 10px; }
.pad--haunted .pad-cta { background: #b00020; }
.phn-ghost { position: absolute; z-index: 2; color: rgba(90, 90, 120, 0.35); pointer-events: none; animation: phnFloat 3s ease-in-out infinite alternate; }
.phn-ghost--1 { right: 16px; top: 60px; }
.phn-ghost--2 { left: 14px; top: 150px; animation-delay: 1s; }
.phn-ghost--new { color: rgba(176, 0, 32, 0.4); animation: phnPop 0.4s ease backwards, phnFloat 3s ease-in-out 0.4s infinite alternate; }
@keyframes phnFloat { to { transform: translate(6px, -10px); } }
@keyframes phnPop { from { transform: scale(0); } }

/* Mum called */
.pad--mum { background: linear-gradient(#1c1c1e, #2c2c2e); color: #fff; padding: 8px 16px 16px; --pad-x: rgba(255, 255, 255, 0.6); }
.pmm-status { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; padding: 0 28px 10px 4px; }
.pmm-status span:last-child { display: flex; gap: 4px; }
.pmm-contact { display: flex; flex-direction: column; align-items: center; }
.pmm-avatar { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#fda4af, #e11d48); margin-bottom: 6px; }
.pmm-contact b { font: 700 1.4rem var(--font-heading); }
.pmm-contact small { color: #ff453a; font-weight: 600; }
.pmm-calls { background: #3a3a3c; border-radius: 12px; margin: 12px 0 10px; text-align: left; }
.pmm-calls div { display: flex; align-items: center; gap: 8px; padding: 7px 12px; color: #ff453a; font-size: 13px; border-bottom: 1px solid #48484a; }
.pmm-calls div:last-child { border: 0; }
.pmm-calls small { margin-left: auto; color: #8e8e93; }
.pmm-vm { background: #3a3a3c; border-radius: 12px; padding: 10px 12px; text-align: left; font-size: 12.5px; margin-bottom: 12px; }
.pmm-vm div { display: flex; align-items: center; gap: 6px; color: #8e8e93; font-size: 11px; margin-bottom: 4px; }
.pad--mum .pad-cta { background: #34c759; border-radius: 99px; }

/* Rate your experience */
.pad--rating { padding: 14px 18px 16px; background: #fff; }
.prt-top { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: #888; margin-bottom: 10px; }
.pad--rating h3 { font: 800 1.15rem/1.25 var(--font-heading); margin-bottom: 10px; }
.prt-stars { display: flex; justify-content: center; gap: 4px; }
.prt-stars button { border: 0; background: none; font-size: 38px; line-height: 1; color: #ddd; padding: 0 2px; transition: color 0.15s, transform 0.15s; }
.prt-stars button.is-on { color: #ffb400; transform: scale(1.12); }
.prt-note { font-size: 12px; color: #888; min-height: 18px; margin: 4px 0 8px; }
.prt-faces { display: flex; justify-content: center; gap: 22px; color: #bbb; margin-bottom: 10px; }
.prt-box { border: 1px solid #ddd; border-radius: 8px; height: 56px; padding: 8px 10px; text-align: left; font-size: 12.5px; color: #aaa; margin-bottom: 12px; }
.pad--rating .pad-cta { background: #5b5bd6; }
.prt-fine { display: block; margin-top: 8px; font-size: 11px; color: #999; }

/* Incoming FaceTime — the whole screen */
.pad--facetime { color: #fff; background: #111; display: flex; flex-direction: column; justify-content: space-between; padding: 54px 26px 40px; }
.pft-bg { position: absolute; inset: 0; overflow: hidden; }
.pft-bgface { width: 100%; height: 100%; border-radius: 0; filter: blur(26px) brightness(0.55) saturate(1.3); transform: scale(1.3); }
.pft-top, .pft-mid, .pft-row, .pft-toast { position: relative; z-index: 1; }
.pft-top { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pft-rings { position: relative; width: 116px; height: 116px; margin-bottom: 14px; }
.pft-rings::before, .pft-rings::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); animation: pftRing 1.6s ease-out infinite; }
.pft-rings::after { animation-delay: 0.8s; }
@keyframes pftRing { to { transform: scale(1.7); opacity: 0; } }
.pft-face { width: 116px; height: 116px; }
.pft-top b { font: 700 1.9rem var(--font-heading); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pft-top small { font-size: 15px; color: rgba(255, 255, 255, 0.75); }
.pft-mid { display: flex; justify-content: space-between; padding: 0 16px; margin-top: auto; margin-bottom: 26px; }
.pft-mid span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
.pft-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 16px; }
.pft-row.is-swapped { flex-direction: row-reverse; }
.pft-slot { width: 72px; height: 94px; display: flex; justify-content: center; }
.pft-slot .pad-count { width: 68px; height: 68px; border: 2px dashed rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.6); font-size: 22px; }
.pft-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: #fff; padding: 0; animation: padXIn 0.3s ease backwards; }
.pft-btn > span { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; }
.pft-btn small { font-size: 13px; }
.pft-decline > span { background: #ff3b30; }
.pft-accept > span { background: #34c759; animation: pftBounce 1.2s ease-in-out infinite; }
@keyframes pftBounce { 50% { transform: translateY(-6px); } }
.pft-toast { position: absolute; left: 20px; right: 20px; top: 45%; background: rgba(0, 0, 0, 0.75); border-radius: 14px; padding: 12px; font-weight: 600; }
.pft-toast[hidden] { display: none; }

/* WANTED */
.pad--wanted { background: #5b3a1e; padding: 14px 14px 16px; --pad-x: rgba(255, 240, 210, 0.75); }
.pwt-paper { position: relative; background: radial-gradient(circle at 20% 20%, rgba(120, 72, 28, 0.25), transparent 40%), radial-gradient(circle at 80% 90%, rgba(120, 72, 28, 0.3), transparent 45%), #e9d3a6; padding: 14px 16px 16px; margin-bottom: 12px; color: #3b2412; font-family: Georgia, 'Times New Roman', serif; clip-path: polygon(0 2%, 6% 0, 50% 1%, 94% 0, 100% 3%, 99% 50%, 100% 97%, 93% 100%, 50% 99%, 5% 100%, 0 97%, 1% 50%); }
.pwt-hole { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(#1a0f06 40%, #6b4423 60%, transparent 70%); }
.pwt-wanted { font: 900 2.8rem/1 'Rockwell', 'Georgia', serif; letter-spacing: 0.08em; }
.pwt-sub { display: block; font-size: 10px; letter-spacing: 0.14em; font-weight: 700; margin: 2px 0 10px; }
.pwt-frame { width: 150px; height: 150px; margin: 0 auto 8px; border: 4px solid #3b2412; padding: 4px; background: #d8bd8a; }
.pwt-face { width: 100%; height: 100%; border-radius: 0; filter: sepia(1) contrast(1.2) brightness(0.9); }
.pwt-name { font: 900 1.6rem Georgia, serif; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwt-paper p { font-style: italic; margin: 2px 0 8px; }
.pwt-reward { font-weight: 700; letter-spacing: 0.06em; border-top: 2px solid #3b2412; border-bottom: 2px solid #3b2412; padding: 4px 0; }
.pad--wanted .pad-cta { background: #3b2412; color: #e9d3a6; }

/* Notification pile-up — a lock screen */
.pad--notifs { height: 480px; background: linear-gradient(160deg, #3a1c71, #d76d77 60%, #ffaf7b); color: #fff; padding: 22px 12px 12px; display: flex; flex-direction: column; --pad-x: rgba(255, 255, 255, 0.85); }
.pnt-lock { display: flex; flex-direction: column; align-items: center; }
.pnt-time { font: 700 3.4rem/1 var(--font-heading); margin-top: 2px; }
.pnt-lock small { font-size: 13px; opacity: 0.85; }
.pnt-stack { position: relative; flex: 1; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.pnt-n { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.28); backdrop-filter: blur(12px); text-align: left; color: #fff; animation: pntIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; transform: scale(calc(1 - var(--k, 0) * 0.02)); opacity: calc(1 - var(--k, 0) * 0.09); transition: transform 0.2s, opacity 0.25s; cursor: pointer; flex-shrink: 0; }
.pnt-n.is-gone { transform: translateX(110%); opacity: 0; }
@keyframes pntIn { from { transform: translateY(-30px) scale(0.9); opacity: 0; } }
.pnt-face { width: 34px; height: 34px; }
.pnt-n div { flex: 1; min-width: 0; }
.pnt-n b { display: block; font-size: 13px; }
.pnt-n span { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnt-n small { font-size: 11px; opacity: 0.75; align-self: flex-start; }
.pnt-foot { display: flex; justify-content: space-between; padding: 8px 20px 0; }
.pnt-foot span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.3); }

/* ── spicy (18+) ────────────────────────────────────────────────────────── */

/* Hot singles — a radar map */
.pad--singles { background: #12001f; color: #fff; padding: 0 0 16px; --pad-x: rgba(255, 255, 255, 0.7); }
.psi-map { position: relative; height: 230px; overflow: hidden; background: linear-gradient(rgba(255, 64, 160, 0.14) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(255, 64, 160, 0.14) 1px, transparent 1px) 0 0 / 24px 24px, #1c0433; }
.psi-radar { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 64, 160, 0.45), transparent 25%); animation: padSpin 3s linear infinite; }
.psi-pin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.psi-pin--blur { width: 38px; height: 38px; border-radius: 50%; background: #ff40a0; display: grid; place-items: center; filter: blur(2px); animation: psiPing 1.8s ease-in-out var(--d) infinite; }
@keyframes psiPing { 50% { box-shadow: 0 0 0 10px rgba(255, 64, 160, 0.25); } }
.psi-pin--them { z-index: 2; }
.psi-face { width: 62px; height: 62px; border: 3px solid #ff40a0; box-shadow: 0 0 18px #ff40a0; }
.psi-pin--them small { margin-top: 4px; background: #ff40a0; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.psi-me { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font: 900 11px var(--font-heading); background: #fff; color: #12001f; padding: 2px 8px; border-radius: 99px; }
.pad--singles h3 { font: 900 1.3rem var(--font-heading); margin-top: 12px; color: #ff6ec7; }
.pad--singles p { margin: 4px 0 12px; color: #e0c3ff; }
.pad--singles .pad-cta { width: calc(100% - 32px); background: #ff40a0; }

/* u up? — a 2:47 am text */
.pad--ex { background: #000; color: #fff; padding: 0 0 12px; text-align: left; --pad-x: rgba(255, 255, 255, 0.6); }
.pex-head { display: flex; align-items: center; gap: 8px; padding: 12px 34px 10px 10px; border-bottom: 1px solid #222; background: #111; color: #0a84ff; }
.pex-av { width: 34px; height: 34px; border-radius: 50%; background: #3a3a3c; display: grid; place-items: center; color: #ff453a; }
.pex-head b { display: flex; align-items: center; gap: 2px; color: #fff; font-size: 15px; }
.pex-head b i, .pex-head b svg { color: #ff453a; fill: #ff453a; }
.pex-head small { display: block; font-size: 11px; color: #8e8e93; }
.pex-thread { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.pex-thread > small { align-self: center; font-size: 11px; color: #8e8e93; margin-bottom: 4px; }
.pex-in { align-self: flex-start; background: #262629; padding: 8px 12px; border-radius: 18px 18px 18px 4px; max-width: 80%; font-size: 15px; }
.pex-typing { align-self: flex-start; background: #262629; border-radius: 18px; padding: 12px 14px; display: flex; gap: 4px; }
.pex-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: pexDot 1s ease-in-out infinite; }
.pex-typing i:nth-child(2) { animation-delay: 0.15s; }
.pex-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes pexDot { 50% { transform: translateY(-4px); background: #fff; } }
.pex-warn { text-align: center; font: 800 13px var(--font-heading); color: #ff453a; margin: 6px 12px 10px; }
.pex-input { display: flex; align-items: center; gap: 8px; margin: 0 12px; padding: 6px 6px 6px 14px; border: 1px solid #3a3a3c; border-radius: 99px; }
.pex-input span { flex: 1; font-size: 14px; }
.pad--ex .pad-cta { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: #0a84ff; }

/* Therapists hate it — a booking page */
.pad--therapist { background: #f4f1ea; padding: 14px 16px 16px; }
.pth-top { display: flex; align-items: center; gap: 10px; text-align: left; margin-bottom: 12px; padding-right: 20px; }
.pth-logo { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #8aa78b; color: #fff; }
.pth-top small { display: block; font-size: 11.5px; color: #7c7568; }
.pad--therapist h3 { font: 700 1.25rem/1.2 Georgia, 'Times New Roman', serif; color: #3d4a3d; }
.pad--therapist > p { color: #6b6457; margin: 4px 0 10px; font-size: 13px; }
.pth-cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 10px; }
.pth-cal b { font-size: 10px; color: #7c7568; }
.pth-cal span { font-size: 9.5px; padding: 6px 0; border-radius: 6px; background: #e4ded2; color: #a39b8b; text-decoration: line-through; }
.pth-cal .pth-now { background: #8aa78b; color: #fff; font-weight: 800; text-decoration: none; animation: pwPulse 1.2s ease-in-out infinite; }
.pth-notes { text-align: left; font: italic 12.5px/1.4 Georgia, serif; background: #fff; border-left: 4px solid #8aa78b; padding: 8px 10px; margin-bottom: 12px; }
.pad--therapist .pad-cta { background: #3d4a3d; border-radius: 99px; }

/* 0.4 km away — a dating profile */
.pad--nearby { background: #000; color: #fff; padding: 0 0 14px; text-align: left; --pad-x: rgba(255, 255, 255, 0.85); }
.pnb-photo { position: relative; height: 250px; overflow: hidden; }
.pnb-face { width: 100%; height: 100%; border-radius: 0; }
.pnb-photo::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, #000); }
.pnb-online { position: absolute; left: 12px; top: 12px; z-index: 1; display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.6); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.pnb-online i { width: 8px; height: 8px; border-radius: 50%; background: #3cff6b; box-shadow: 0 0 8px #3cff6b; }
.pnb-dist { position: absolute; right: 12px; bottom: 12px; z-index: 1; display: flex; align-items: center; gap: 4px; color: #ffcc00; font-weight: 800; font-size: 13px; }
.pnb-info { padding: 8px 14px 12px; }
.pnb-info h3 { font: 900 1.6rem var(--font-heading); }
.pnb-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
.pnb-tags span { border: 1px solid #ffcc00; color: #ffcc00; border-radius: 99px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; }
.pnb-info p { font-size: 13.5px; color: #ddd; }
.pad--nearby .pad-cta { width: calc(100% - 28px); margin: 0 14px; background: #ffcc00; color: #000; border-radius: 99px; }

/* Spicy pic — tap to reveal */
.pad--spicyPic { background: #0b141a; color: #e9edef; padding: 0 0 12px; text-align: left; --pad-x: rgba(233, 237, 239, 0.7); }
.psp-head { display: flex; align-items: center; gap: 8px; padding: 10px 36px 10px 10px; background: #202c33; }
.psp-head > div { flex: 1; min-width: 0; }
.psp-av { width: 36px; height: 36px; }
.psp-head b { display: block; font-size: 15px; }
.psp-head small { font-size: 11.5px; color: #8696a0; }
.psp-thread { padding: 12px; display: flex; flex-direction: column; gap: 6px; background: #0b141a; }
.psp-in { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; background: #202c33; border-radius: 0 12px 12px 12px; padding: 7px 11px; font-size: 14px; }
.psp-in[hidden] { display: none; }
.psp-in svg { color: #ff7a00; }
.psp-pic { position: relative; align-self: flex-start; width: 210px; height: 230px; border: 4px solid #202c33; border-radius: 12px; padding: 0; overflow: hidden; background: #202c33; }
.psp-face { width: 100%; height: 100%; border-radius: 0; filter: blur(18px) saturate(1.6); transform: scale(1.2); transition: filter 0.5s ease, transform 0.5s ease; }
.psp-veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; background: rgba(0, 0, 0, 0.25); transition: opacity 0.3s; }
.psp-veil b { font-size: 15px; }
.psp-veil small { font-size: 11px; opacity: 0.8; }
.psp-pic.is-revealed .psp-face { filter: none; transform: scale(1.05) rotate(-2deg); }
.psp-pic.is-revealed .psp-veil { opacity: 0; }
.psp-bar { display: flex; align-items: center; justify-content: space-between; margin: 0 12px; padding: 9px 14px; border-radius: 99px; background: #202c33; color: #8696a0; font-size: 14px; }

/* OnlyAnswers — a creator page */
.pad--onlyAnswers { background: #fff; padding: 0 0 14px; text-align: left; }
.poa-banner { height: 76px; background: linear-gradient(120deg, #00aff0, #0066ff); display: flex; align-items: flex-start; padding: 10px 14px; }
.poa-brand { font: 800 16px var(--font-heading); color: #fff; }
.poa-brand b { font-weight: 900; }
.poa-profile { display: flex; align-items: flex-end; gap: 10px; padding: 0 14px; margin-top: -30px; }
.poa-face { width: 76px; height: 76px; border: 4px solid #fff; }
.poa-profile b { display: flex; align-items: center; gap: 4px; font-size: 17px; color: #111; }
.poa-profile b svg { color: #00aff0; }
.poa-profile small { color: #8a96a3; font-size: 12px; }
.poa-stats { display: flex; gap: 14px; padding: 10px 14px 6px; font-size: 12.5px; color: #8a96a3; }
.poa-stats b { color: #111; }
.pad--onlyAnswers > p { padding: 0 14px; font-size: 13.5px; margin-bottom: 10px; }
.poa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-bottom: 12px; }
.poa-lock { position: relative; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; background: #dfe7ee; color: #fff; }
.poa-blur { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; filter: blur(10px) brightness(0.8); transform: scale(1.3); }
.poa-lock svg, .poa-lock i { position: relative; }
.pad--onlyAnswers .pad-cta { width: calc(100% - 28px); margin: 0 14px; background: #00aff0; border-radius: 99px; }

/* It's a match */
.pad--match { background: linear-gradient(160deg, #fd267a, #ff6036); color: #fff; padding: 20px 18px 18px; --pad-x: rgba(255, 255, 255, 0.85); }
.pmt-title { font: italic 900 2.4rem/1 'Brush Script MT', 'Snell Roundhand', var(--font-heading); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); margin-bottom: 18px !important; }
.pmt-pair { position: relative; display: flex; justify-content: center; margin-bottom: 18px; }
.pmt-face, .pmt-you { width: 116px; height: 116px; border: 4px solid #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.pmt-face { transform: rotate(-8deg); margin-right: -18px; z-index: 1; }
.pmt-you { display: grid; place-items: center; border-radius: 50%; background: #2b2b2b; font: 900 44px var(--font-heading); transform: rotate(8deg); }
.pmt-heart { position: absolute; left: 50%; bottom: -12px; z-index: 2; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: #fff; color: #fd267a; display: grid; place-items: center; animation: pvsThrob 0.9s ease-in-out infinite; }
.pmt-heart svg { fill: #fd267a; }
.pad--match p { font-weight: 700; font-size: 15px; margin-bottom: 16px; }
.pmt-btns { display: flex; flex-direction: column; gap: 8px; }
.pad--match .pad-cta { background: #fff; color: #fd267a; border-radius: 99px; }
.pad--match .pmt-ghost { background: transparent; color: #fff; border: 2px solid #fff; }

/* Went live — a stream */
.pad--live { background: #18181b; color: #efeff1; padding: 0 0 14px; --pad-x: rgba(255, 255, 255, 0.8); }
.plv-video { position: relative; height: 190px; overflow: hidden; background: #000; }
.plv-face { width: 100%; height: 100%; border-radius: 0; animation: plvZoom 6s ease-in-out infinite alternate; }
@keyframes plvZoom { to { transform: scale(1.12) translate(-3%, 2%); } }
.plv-live { position: absolute; left: 10px; top: 10px; background: #eb0400; font: 800 11px var(--font-body); padding: 2px 6px; border-radius: 4px; }
.plv-viewers { position: absolute; left: 52px; top: 10px; display: flex; align-items: center; gap: 4px; background: rgba(0, 0, 0, 0.6); font-size: 11px; padding: 2px 6px; border-radius: 4px; }
.plv-title { position: absolute; left: 10px; bottom: 8px; font-size: 12px; font-weight: 700; background: rgba(0, 0, 0, 0.6); padding: 2px 6px; border-radius: 4px; }
.plv-chat { height: 112px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 6px 12px; text-align: left; font-size: 12.5px; background: #1f1f23; border-bottom: 1px solid #2f2f35; }
.plv-line { animation: pntIn 0.25s ease backwards; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad--live h3 { font: 800 1.15rem var(--font-heading); margin: 10px 12px; }
.pad--live .pad-cta { width: calc(100% - 28px); background: #9147ff; }

/* Thirst trap */
.pad--thirst { background: linear-gradient(#ffe4f1, #fff); padding: 16px 18px; }
.ptt-photo { position: relative; width: 170px; height: 170px; margin: 0 auto 12px; }
.ptt-light { position: absolute; inset: -12px; border-radius: 50%; border: 10px solid #fff; box-shadow: 0 0 30px 8px #fff, inset 0 0 20px #ffd1e8; }
.ptt-face { position: relative; width: 170px; height: 170px; filter: saturate(1.4) brightness(1.08) contrast(1.05); }
.ptt-spark { position: absolute; z-index: 2; color: #ff4fa3; font-size: 22px; animation: pttTwinkle 1.2s ease-in-out var(--d, 0s) infinite; }
@keyframes pttTwinkle { 50% { transform: scale(0.4) rotate(45deg); opacity: 0.3; } }
.pad--thirst h3 { font: 900 1.25rem/1.2 var(--font-heading); color: #b0126a; }
.ptt-range { width: 100%; margin: 12px 0 4px; accent-color: #ff4fa3; }
.ptt-val { font: 800 15px var(--font-heading); margin-bottom: 12px; }
.ptt-val b { font-size: 24px; color: #ff4fa3; }
.ptt-val small { color: #999; font-weight: 600; }
.ptt-val.is-snap { animation: padNope 0.35s ease; }
.pad--thirst .pad-cta { background: #ff4fa3; }

/* Sugar daddy */
.pad--sugar { background: #0a0a0a; color: #f5e6b8; padding: 16px 18px; border: 2px solid #c9a227; --pad-x: rgba(201, 162, 39, 0.8); }
.psd-rain { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.psd-rain span { position: absolute; top: -24px; color: #3cb371; opacity: 0.8; transform: rotate(var(--r)); animation: psdFall 3s linear var(--d) infinite; }
@keyframes psdFall { to { transform: translateY(560px) rotate(calc(var(--r) + 360deg)); } }
.psd-frame { position: relative; width: 132px; height: 132px; margin: 0 auto 8px; border-radius: 50%; padding: 5px; background: conic-gradient(#c9a227, #fff3b0, #c9a227, #8a6d12, #c9a227); }
.psd-face { width: 100%; height: 100%; }
.psd-kicker { position: relative; font: 800 11px var(--font-heading); letter-spacing: 0.3em; color: #c9a227; }
.pad--sugar h3 { position: relative; font: 700 1.3rem/1.2 Georgia, 'Times New Roman', serif; margin: 4px 0 10px; }
.psd-offer { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.psd-offer div { border: 1px solid rgba(201, 162, 39, 0.5); border-radius: 10px; padding: 6px; background: rgba(10, 10, 10, 0.9); }
.psd-offer b { display: block; font: 900 1.3rem var(--font-heading); color: #c9a227; }
.psd-offer span { font-size: 11px; color: #a89868; }
.pad--sugar p { position: relative; font-size: 13px; color: #cdbd8f; margin-bottom: 12px; }
.pad--sugar .pad-cta { position: relative; background: linear-gradient(90deg, #8a6d12, #f5d76e, #8a6d12); color: #0a0a0a; }

/* Liked your photo from 2014 */
.pad--liked2014 { background: #fff; padding: 12px 14px 14px; }
.plk-notif { display: flex; align-items: center; gap: 10px; text-align: left; padding-right: 20px; margin-bottom: 10px; }
.plk-av { width: 40px; height: 40px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #dd2a7b; }
.plk-notif p { flex: 1; font-size: 13px; }
.plk-notif small { color: #8e8e8e; }
.plk-heart { color: #ed4956; }
.plk-heart svg { fill: #ed4956; }
.plk-photo { position: relative; height: 230px; border-radius: 4px; overflow: hidden; background: linear-gradient(135deg, #f6d365, #fda085 50%, #d4a373); filter: sepia(0.35) saturate(1.3); margin-bottom: 10px; }
.plk-date { position: absolute; right: 8px; bottom: 6px; font: 700 12px ui-monospace, monospace; color: #ff7b00; text-shadow: 0 0 3px #000; }
.plk-you { position: absolute; left: 50%; top: 40px; width: 120px; height: 150px; margin-left: -60px; border-radius: 50% 50% 40% 40%; background: #e8b98f; display: grid; place-items: center; font: 900 40px var(--font-heading); color: rgba(0, 0, 0, 0.25); overflow: hidden; }
.plk-fringe { position: absolute; left: -10px; top: -14px; width: 150px; height: 70px; background: #2b1b10; border-radius: 0 0 80% 10%; transform: rotate(-8deg); }
.plk-cap { position: absolute; left: 8px; top: 8px; font-size: 11px; color: #fff; background: rgba(0, 0, 0, 0.35); padding: 2px 6px; border-radius: 4px; }
.plk-lens { position: absolute; width: 70px; height: 70px; border-radius: 50%; border: 4px solid #fff; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(0) contrast(1.4) saturate(1.4); display: grid; place-items: center; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); animation: plkScan 3.5s ease-in-out infinite; }
@keyframes plkScan { 0% { left: 10%; top: 20%; } 50% { left: 55%; top: 45%; } 100% { left: 10%; top: 20%; } }
.pad--liked2014 h3 { font: 900 1.3rem var(--font-heading); margin-bottom: 10px; }
.pad--liked2014 .pad-cta { background: linear-gradient(90deg, #f58529, #dd2a7b, #8134af); }

/* Private show — a neon marquee */
.pad--privateShow { background: #0a0010; color: #fff; padding: 32px 14px 16px; --pad-x: rgba(255, 255, 255, 0.8); }
.pps-marquee { position: relative; padding: 16px 12px 14px; margin-bottom: 12px; border-radius: 12px; background: #1a0020; border: 6px dotted #ffd23f; animation: ppsBulbs 0.5s steps(2) infinite; }
@keyframes ppsBulbs { 50% { border-color: #ff6ec7; } }
.pps-marquee small { font: 800 11px var(--font-heading); letter-spacing: 0.3em; color: #ffd23f; }
.pps-neon { font: 900 2rem/1 var(--font-heading); color: #fff; text-shadow: 0 0 6px #ff2bd6, 0 0 16px #ff2bd6, 0 0 30px #ff2bd6; margin: 4px 0 10px; animation: ppsFlicker 3s linear infinite; }
@keyframes ppsFlicker { 0%, 18%, 22%, 100% { opacity: 1; } 20% { opacity: 0.4; } }
.pps-spot { position: relative; width: 120px; height: 120px; margin: 0 auto 8px; }
.pps-spot::before { content: ''; position: absolute; left: 50%; top: -60px; width: 180px; height: 200px; margin-left: -90px; background: radial-gradient(ellipse at top, rgba(255, 255, 220, 0.35), transparent 70%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); }
.pps-face { position: relative; width: 120px; height: 120px; border: 3px solid #ff2bd6; }
.pps-name { font: 900 1.4rem var(--font-heading); letter-spacing: 0.06em; text-transform: uppercase; color: #ffd23f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pps-marquee p { font-size: 13px; margin-top: 4px; color: #ffc2f0; }
.pad--privateShow .pps-ticket { background: #ffd23f; color: #0a0010; border-radius: 6px; -webkit-mask: radial-gradient(circle 8px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 8px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; }

/* Naughty list — Santa's scroll */
.pad--naughty { background: #7f1d1d; padding: 30px 14px 16px; --pad-x: rgba(255, 235, 235, 0.8); }
.pnl-scroll { background: #fbf1d7; padding: 0 16px; margin-bottom: 12px; font-family: Georgia, 'Times New Roman', serif; color: #3b2412; }
.pnl-rod { height: 14px; margin: 0 -22px; border-radius: 7px; background: linear-gradient(#9a6b3f, #5c3b1c); }
.pnl-title { font: 900 1.7rem Georgia, serif; color: #b91c1c; margin: 10px 0 6px; letter-spacing: 0.06em; }
.pnl-scroll ol { text-align: left; padding-left: 22px; margin-bottom: 8px; }
.pnl-scroll li { padding: 3px 0; border-bottom: 1px solid rgba(59, 36, 18, 0.15); }
.pnl-blur { color: rgba(59, 36, 18, 0.35); letter-spacing: -1px; }
.pnl-hit { font-weight: 700; font-size: 1.1rem; background: rgba(255, 230, 0, 0.5); }
.pnl-hit span { float: right; color: #b91c1c; font-weight: 900; }
.pnl-scroll p { font-size: 13px; margin-bottom: 6px; }
.pnl-why { font-style: italic; font-weight: 700; color: #b91c1c; margin-bottom: 6px; animation: padXIn 0.25s ease; }
.pnl-why[hidden] { display: none; }
.pnl-signed { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font: italic 12px Georgia, serif; padding-bottom: 10px; }
.pnl-face { width: 30px; height: 30px; }
.pad--naughty .pad-cta { background: #166534; }

/* Mature quizzers — leopard print */
.pad--mature { padding: 14px 16px 16px; background-color: #d9a441;
  background-image:
    radial-gradient(ellipse 9px 7px at 22% 30%, #b8741a 40%, #2b1a0c 45% 70%, transparent 75%),
    radial-gradient(ellipse 8px 10px at 70% 62%, #b8741a 38%, #2b1a0c 44% 70%, transparent 75%),
    radial-gradient(ellipse 7px 6px at 42% 86%, #2b1a0c 60%, transparent 66%),
    radial-gradient(ellipse 10px 8px at 88% 18%, #b8741a 40%, #2b1a0c 46% 70%, transparent 75%);
  background-size: 52px 52px; --pad-x: rgba(59, 36, 18, 0.85); }
.pma-top { font: italic 900 1.25rem 'Brush Script MT', Georgia, cursive; color: #fff; background: #8b1d4a; border-radius: 99px; padding: 4px 12px; margin: 0 16px 12px; }
.pma-card { background: #fff5f8; border-radius: 16px; padding: 14px 12px 12px; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.pma-portrait { position: relative; width: 130px; height: 150px; margin: 0 auto 8px; }
.pma-face { position: absolute; left: 5px; top: 20px; width: 120px; height: 120px; border: 4px solid #e8a1c0; }
.pma-curlers { position: absolute; left: 0; top: 0; width: 130px; height: 44px; z-index: 2; }
.pma-curlers rect { fill: #ff8fc7; stroke: #b0336b; stroke-width: 2; }
.pma-pearls { position: absolute; left: 5px; bottom: -6px; width: 120px; height: 30px; z-index: 2; }
.pma-pearls circle { fill: #fffdf5; stroke: #cfc6b0; stroke-width: 1; }
.pma-card b { display: block; font: 800 1.15rem var(--font-heading); color: #8b1d4a; }
.pma-card small { display: flex; align-items: center; justify-content: center; gap: 4px; color: #888; font-size: 12px; }
.pma-card p { font: italic 14px Georgia, serif; margin-top: 6px; }
.pad--mature .pad-cta { background: #8b1d4a; }

/* Enlarge your score — spam e-mail */
.pad--enlarge { background: #fffde0; padding: 12px 14px 16px; font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive; }
.pen-mail { text-align: left; font: 11px/1.4 Arial, sans-serif; color: #555; border-bottom: 1px solid #ccc; padding: 0 20px 6px 0; margin-bottom: 8px; }
.pen-wordart { font: 900 2.1rem/0.95 'Impact', 'Arial Black', sans-serif; background: linear-gradient(90deg, #ff0000, #ff9900, #33cc33, #0066ff, #cc33ff); -webkit-background-clip: text; background-clip: text; color: transparent; transform: perspective(200px) rotateX(18deg) skewX(-6deg); filter: drop-shadow(2px 2px 0 #000); margin: 4px 0 8px; }
.pad--enlarge > p { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.pen-chart { display: flex; justify-content: center; align-items: flex-end; gap: 36px; height: 150px; margin-bottom: 10px; }
.pen-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: 80px; }
.pen-col i { width: 46px; max-height: calc(100% - 34px); background: linear-gradient(#ff3cac, #784ba0); border: 2px solid #000; border-radius: 4px 4px 0 0; }
.pen-col:last-child i { animation: penGrow 1.2s ease-in-out infinite alternate; transform-origin: bottom; }
@keyframes penGrow { from { transform: scaleY(0.85); } }
.pen-col small { font-size: 11px; line-height: 1.2; margin-top: 4px; max-width: 80px; overflow: hidden; }
.pen-burst { position: absolute; right: 12px; top: 176px; width: 72px; height: 72px; display: grid; place-items: center; font: 900 11px/1.1 Arial, sans-serif; color: #fff; background: #e60000; clip-path: polygon(50% 0, 61% 18%, 82% 10%, 79% 32%, 100% 38%, 84% 54%, 96% 74%, 74% 76%, 70% 98%, 52% 84%, 32% 98%, 28% 76%, 6% 74%, 18% 54%, 0 38%, 21% 32%, 18% 10%, 39% 18%); transform: rotate(12deg); animation: pvsThrob 0.9s ease-in-out infinite; }
.pad--enlarge .pad-cta { background: #00b300; font-family: 'Comic Sans MS', 'Chalkboard SE', cursive !important; font-size: 1.3rem; border: 3px solid #000; }

/* Size doesn't matter */
.pad--size { background: #111; color: #fff; padding: 12px 18px 16px; --pad-x: rgba(255, 255, 255, 0.7); }
.psz-quote { font: 900 5rem/0.7 Georgia, serif; color: #e65498; height: 44px; }
.pad--size h3 { font: italic 700 1.6rem/1.1 Georgia, 'Times New Roman', serif; }
.pad--size > p { color: #aaa; font-size: 13px; margin: 6px 0 12px; }
.psz-board { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; text-align: left; }
.psz-board > div { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: #1f1f1f; font-size: 13px; overflow: hidden; }
.psz-board span { width: 16px; color: #888; font-weight: 800; }
.psz-board b { position: relative; z-index: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psz-board i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: rgba(128, 253, 119, 0.15); }
.psz-last { background: #3a0f1d !important; }
.psz-last i { background: rgba(255, 60, 60, 0.5) !important; }
.psz-face { position: relative; z-index: 1; width: 26px; height: 26px; }
.psz-last em { position: relative; z-index: 1; font-style: normal; font-weight: 900; font-size: 11px; background: #ff3c3c; padding: 1px 6px; border-radius: 4px; }
.pad--size .pad-cta { background: #e65498; }

/* Performance anxiety — telehealth */
.pad--anxiety { background: #eef6fb; padding: 12px 18px 16px; }
.pax-top { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700; color: #0e7490; margin-bottom: 10px; }
.pad--anxiety h3 { font: 800 1.45rem var(--font-heading); color: #0c4a6e; }
.pad--anxiety > p { color: #334155; margin: 4px 0 12px; font-weight: 600; }
.pax-eyes { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
.pax-eyes span { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #0c4a6e; box-shadow: 0 2px 6px rgba(12, 74, 110, 0.15); animation: paxLook 2s ease-in-out infinite; }
.pax-eyes span:nth-child(2n) { animation-delay: 0.4s; }
@keyframes paxLook { 50% { transform: translateX(3px); } }
.pax-face { width: 64px; height: 64px; border: 3px solid #0e7490; }
.pad--anxiety ul { list-style: none; padding: 0; text-align: left; font-size: 13px; color: #334155; margin: 0 8px 12px; }
.pad--anxiety li { padding: 2px 0; }
.pad--anxiety .pad-cta { background: #0e7490; border-radius: 99px; }

/* Little blue pill — packaging */
.pad--bluePill { background: #fff; padding: 30px 16px 16px; }
.pbp-box { border-radius: 10px; overflow: hidden; border: 1px solid #cfd8e3; margin-bottom: 12px; }
.pbp-brand { background: linear-gradient(120deg, #1d4ed8, #60a5fa); color: #fff; padding: 10px; font: italic 900 1.7rem/1 var(--font-heading); }
.pbp-brand sup { font-size: 0.5em; }
.pbp-brand small { display: block; font: 600 11px var(--font-body); font-style: normal; margin-top: 4px; opacity: 0.9; }
.pbp-blister { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; background: linear-gradient(135deg, #e5e7eb, #f9fafb, #d1d5db); }
.pbp-blister span { height: 34px; border-radius: 17px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); display: grid; place-items: center; }
.pbp-blister i { width: 36px; height: 22px; border-radius: 11px; background: linear-gradient(#60a5fa, #1d4ed8); transform: rotate(-20deg); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
.pbp-blister .is-popped { background: rgba(0, 0, 0, 0.08); }
.pbp-blister .is-popped i { display: none; }
.pad--bluePill h3 { font: 800 1.25rem var(--font-heading); color: #1d4ed8; }
.pad--bluePill > p { margin: 4px 0 10px; font-weight: 600; }
.pbp-warn { display: flex; gap: 8px; text-align: left; font-size: 11.5px; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; color: #78350f; }
.pbp-warn svg { flex-shrink: 0; color: #d97706; }
.pad--bluePill .pad-cta { background: #1d4ed8; }

/* Safe word? */
.pad--safeWord { background: radial-gradient(circle at 50% 0, #3a0a0a, #0a0a0a 70%); color: #fff; padding: 18px 18px 16px; border: 2px dashed #b3001b; outline: 4px solid #0a0a0a; --pad-x: rgba(255, 255, 255, 0.55); }
.psw-lock { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: #b3001b; box-shadow: 0 0 24px rgba(179, 0, 27, 0.8); }
.pad--safeWord h3 { font: 900 2.2rem/1 Georgia, 'Times New Roman', serif; color: #ff2d4a; letter-spacing: 0.02em; }
.pad--safeWord > p { color: #ddd; margin: 8px 0 14px; font-size: 14px; }
.psw-dom { display: flex; align-items: center; gap: 12px; justify-content: center; text-align: left; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 45, 74, 0.4); border-radius: 12px; padding: 10px; margin-bottom: 14px; }
.psw-face { width: 54px; height: 54px; border: 2px solid #ff2d4a; filter: contrast(1.1) saturate(0.8); }
.psw-dom small { display: block; font-size: 11px; color: #ff8a9b; }
.psw-dom b { font-size: 1.1rem; }
.pad--safeWord .pad-cta { background: #b3001b; letter-spacing: 0.2em; }

/* Browser history */
.pad--history { background: #fff; padding: 0 0 14px; text-align: left; }
.phs-bar { display: flex; align-items: center; gap: 6px; padding: 10px 34px 10px 12px; background: #f1f3f4; font-weight: 700; font-size: 14px; }
.phs-shared { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 11px; color: #d93025; background: #fce8e6; padding: 2px 8px; border-radius: 99px; }
.phs-list { list-style: none; padding: 4px 12px; }
.phs-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f1f3f4; font-size: 13px; color: #202124; }
.phs-list time { width: 30px; font-size: 11px; color: #80868b; }
.phs-list svg { color: #80868b; flex-shrink: 0; }
.phs-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phs-who { display: flex; align-items: center; gap: 10px; margin: 8px 12px 12px; background: #fce8e6; border-radius: 10px; padding: 10px; font-size: 13px; }
.phs-face { width: 46px; height: 46px; border: 2px solid #d93025; }
.pad--history .pad-cta { width: calc(100% - 24px); margin: 0 12px; background: #d93025; }

/* Horny for points — a Viking */
.pad--horny { background: linear-gradient(#1e293b, #0f172a); color: #e2e8f0; padding: 12px 18px 16px; --pad-x: rgba(226, 232, 240, 0.7); }
.phr-stage { display: flex; justify-content: center; margin-bottom: 6px; }
.phr-wrap { position: relative; width: 200px; height: 200px; }
.phr-face { position: absolute; left: 50%; top: 66px; width: 124px; height: 124px; margin-left: -62px; border: 4px solid #94a3b8; }
.phr-helmet { position: absolute; left: 0; top: 0; width: 200px; height: 120px; z-index: 2; }
.phr-horn { fill: #f5f0e1; stroke: #6b5b3e; stroke-width: 3; }
.phr-cap { fill: #9ca3af; stroke: #374151; stroke-width: 3; }
.phr-band { fill: #b45309; stroke: #78350f; stroke-width: 3; }
.phr-rivet { stroke: #374151; stroke-width: 4; }
.pad--horny h3 { font: 900 1.5rem var(--font-heading); color: #fbbf24; }
.pad--horny > p { margin: 4px 0 6px; }
.phr-runes { font-size: 18px; letter-spacing: 0.3em; color: #64748b; margin-bottom: 12px; }
.pad--horny .pad-cta { background: #b45309; }

/* ── the cheeky five (spicy): custom animated art, both players' faces ───── */

/* The fruit bowl — a greengrocer's */
.pad--fruitBowl { background: #fff8ec; padding: 0 0 16px; }
.pad--fruitBowl .pad-close { background: rgba(255, 255, 255, 0.9); border-radius: 50%; }
.pfb-awning { height: 30px; background: repeating-linear-gradient(90deg, #2e9e5b 0 24px, #fff 24px 48px); -webkit-mask: radial-gradient(circle 12px at 50% 100%, #0000 96%, #000) 0 0 / 24px 100%; mask: radial-gradient(circle 12px at 50% 100%, #0000 96%, #000) 0 0 / 24px 100%; }
.pfb-stage { position: relative; height: 200px; overflow: hidden; background: linear-gradient(#fff8ec 70%, #f3e2c4); }
.pfb-van { position: absolute; left: 10px; top: 16px; width: 128px; animation: pfbDrive 1s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards, pfbBump 0.45s ease-in-out 1s infinite alternate; }
@keyframes pfbDrive { from { transform: translateX(-170px); } }
@keyframes pfbBump { to { transform: translateY(-2px); } }
.pfb-van__body { position: relative; height: 66px; background: #ff8a3d; border: 4px solid #201e2e; border-radius: 12px 26px 8px 8px; }
.pfb-van__name { position: absolute; left: 7px; top: 10px; max-width: 60px; overflow: hidden; font: 900 9px/1.15 var(--font-heading); color: #fff; text-align: left; text-shadow: 1px 1px 0 #201e2e; }
.pfb-van__win { position: absolute; right: 8px; top: 7px; width: 42px; height: 38px; background: #bde7ff; border: 3px solid #201e2e; border-radius: 4px 14px 4px 4px; overflow: hidden; display: grid; place-items: end center; }
.pfb-driver { width: 34px; height: 34px; margin-bottom: -3px; }
.pfb-wheel { position: absolute; bottom: -14px; width: 26px; height: 26px; border-radius: 50%; background: #201e2e; border: 5px solid #6b7280; }
.pfb-wheel--a { left: 14px; } .pfb-wheel--b { right: 14px; }
.pfb-crate { position: absolute; left: 136px; right: 10px; bottom: 10px; height: 36px; z-index: 2; background: repeating-linear-gradient(#c68642 0 14px, #a86b30 14px 17px); border: 3px solid #201e2e; border-radius: 4px; }
.pfb-fruit { position: absolute; bottom: 30px; z-index: 1; border: 0; background: none; padding: 0; }
.pfb-fruit svg { display: block; width: 100%; height: auto; overflow: visible; }
.pfb-peach { left: 140px; width: 100px; transform-origin: 50% 92%; }
.pfb-peach svg { transform-origin: 50% 92%; animation: pfbJiggleIdle 1.6s ease-in-out infinite; }
.pfb-aub { left: 234px; width: 82px; transform-origin: 50% 95%; }
.pfb-aub svg { transform-origin: 50% 95%; animation: pfbWiggleIdle 2.2s ease-in-out infinite; }
@keyframes pfbJiggleIdle { 50% { transform: scale(1.04, 0.96); } }
@keyframes pfbWiggleIdle { 50% { transform: rotate(-5deg); } }
.pfb-peach.is-tapped { animation: pfbJiggle 0.7s ease; }
@keyframes pfbJiggle { 15% { transform: scale(1.2, 0.8); } 35% { transform: scale(0.86, 1.16); } 55% { transform: scale(1.08, 0.93); } 75% { transform: scale(0.97, 1.03); } }
.pfb-aub.is-tapped { animation: pfbWiggle 0.8s ease; }
@keyframes pfbWiggle { 15% { transform: rotate(-20deg); } 35% { transform: rotate(16deg); } 55% { transform: rotate(-10deg); } 75% { transform: rotate(5deg); } }
.pfb-peach-body { fill: #ffa07a; stroke: #201e2e; stroke-width: 5; stroke-linejoin: round; }
.pfb-crease { fill: none; stroke: #e0645f; stroke-width: 4; stroke-linecap: round; }
.pfb-leaf { fill: #5cc16a; stroke: #201e2e; stroke-width: 4; stroke-linejoin: round; }
.pfb-shine { fill: #fff; opacity: 0.55; }
.pfb-aub-body { fill: #7b3fb0; stroke: #201e2e; stroke-width: 5; stroke-linejoin: round; }
.pfb-cap { fill: #4caf50; stroke: #201e2e; stroke-width: 4; stroke-linejoin: round; }
.pfb-stem { fill: none; stroke: #2e7d32; stroke-width: 7; stroke-linecap: round; }
.pfb-tag { position: absolute; top: 4px; right: -6px; background: #fff; border: 2px solid #201e2e; border-radius: 4px; padding: 1px 5px; font: 800 10px var(--font-heading); color: #201e2e; transform: rotate(8deg); }
.pfb-heart { position: absolute; left: var(--x); top: 70px; z-index: 3; color: #ff4d8d; animation: pfbHeart 1.8s ease-in var(--d) infinite; }
.pfb-heart svg { fill: #ff4d8d; }
@keyframes pfbHeart { from { transform: translateY(20px) scale(0.5); opacity: 0; } 25% { opacity: 1; } to { transform: translateY(-40px) scale(1.15); opacity: 0; } }
.pad--fruitBowl h3 { font: 900 1.2rem/1.2 var(--font-heading); color: #c2410c; margin: 10px 16px 8px; }
.pfb-note { display: flex; align-items: center; gap: 10px; margin: 0 16px 12px; padding: 8px 10px; text-align: left; background: #fff; border: 2px dashed #c68642; border-radius: 10px; transform: rotate(-1deg); }
.pfb-you { width: 44px; height: 44px; border: 2px solid #201e2e; }
.pfb-note small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: #a86b30; }
.pfb-note b { display: block; font-size: 15px; }
.pfb-note span { font-size: 12px; color: #666; }
.pad--fruitBowl .pad-cta { width: calc(100% - 32px); background: #ff8a3d; }

/* Do Not Disturb — a hotel corridor at 2 am */
.pad--dnd { background: #2a0f1e; color: #fff; padding: 0 0 16px; --pad-x: rgba(255, 255, 255, 0.75); }
.pdn-hall { position: relative; height: 250px; overflow: hidden; background: repeating-linear-gradient(90deg, #5a1a36 0 18px, #4a1530 18px 36px); }
.pdn-carpet { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: repeating-linear-gradient(45deg, #8b1538 0 10px, #7a0f30 10px 20px); border-top: 4px solid #c9a227; }
.pdn-door { position: absolute; left: 50%; bottom: 40px; width: 118px; height: 190px; margin-left: -59px; background: linear-gradient(90deg, #6b3a1f, #8a4f2a 50%, #6b3a1f); border: 5px solid #201e2e; border-bottom: 0; border-radius: 6px 6px 0 0; transform-origin: 50% 100%; animation: pdnRattle 2.4s ease-in-out infinite; }
.pdn-door::before, .pdn-door::after { content: ''; position: absolute; left: 14px; right: 14px; border: 3px solid rgba(0, 0, 0, 0.28); border-radius: 4px; }
.pdn-door::before { top: 44px; height: 42px; }
.pdn-door::after { top: 118px; height: 54px; }
@keyframes pdnRattle { 0%, 58%, 100% { transform: none; } 62% { transform: translateX(-3px) rotate(-1deg); } 66% { transform: translateX(3px) rotate(1deg); } 70% { transform: translateX(-2px); } 74% { transform: translateX(2px); } 78% { transform: none; } }
.pdn-door.is-knocked { animation: pdnKnock 0.5s ease; }
@keyframes pdnKnock { 20% { transform: translateX(-6px) rotate(-2deg); } 40% { transform: translateX(6px) rotate(2deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.pdn-plaque { position: absolute; left: 50%; top: 6px; z-index: 1; transform: translateX(-50%); background: #c9a227; color: #201e2e; border: 2px solid #201e2e; border-radius: 4px; padding: 1px 8px; font: 900 12px var(--font-heading); }
.pdn-peep { position: absolute; left: 50%; top: 28px; z-index: 1; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #111; border: 2px solid #c9a227; }
.pdn-knob { position: absolute; right: 12px; top: 94px; z-index: 4; width: 14px; height: 14px; border-radius: 50%; background: #c9a227; border: 2px solid #201e2e; }
.pdn-hanger { position: absolute; right: 0; top: 92px; z-index: 3; width: 58px; padding: 18px 3px 6px; display: flex; flex-direction: column; align-items: center; background: #e11d48; border: 3px solid #201e2e; border-radius: 8px; font: 900 9.5px/1.15 var(--font-heading); color: #fff; transform-origin: 38px 10px; animation: pdnSwing 1.5s ease-in-out infinite alternate; }
.pdn-hanger::before { content: ''; position: absolute; left: 28px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #2a0f1e; border: 2px solid #201e2e; }
.pdn-hanger small { font-size: 7.5px; font-weight: 700; opacity: 0.85; margin-top: 2px; }
@keyframes pdnSwing { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
.pdn-glow { position: absolute; left: 4px; right: 4px; bottom: -6px; height: 6px; background: #ff5fa2; box-shadow: 0 0 18px 6px rgba(255, 95, 162, 0.75); animation: pdnGlow 1.1s steps(2) infinite; }
@keyframes pdnGlow { 50% { opacity: 0.45; } }
.pdn-word { position: absolute; z-index: 3; font: italic 900 15px 'Comic Sans MS', 'Chalkboard SE', cursive; color: #ffd23f; -webkit-text-stroke: 0.5px #201e2e; opacity: 0; animation: pdnWord 2.4s ease-out infinite; }
.pdn-word--1 { left: 88px; top: 62px; --r: -14deg; animation-delay: 1.45s; }
.pdn-word--2 { right: 84px; top: 34px; --r: 12deg; animation-delay: 1.55s; }
.pdn-word--3 { left: 92px; top: 150px; --r: -6deg; animation-delay: 1.7s; }
@keyframes pdnWord { 0% { opacity: 0; transform: scale(0.5) rotate(var(--r)); } 8% { opacity: 1; transform: scale(1.15) rotate(var(--r)); } 25% { opacity: 1; transform: scale(1) rotate(var(--r)); } 40%, 100% { opacity: 0; transform: translateY(-10px) rotate(var(--r)); } }
.pdn-key { position: absolute; left: 10px; top: 18px; z-index: 2; width: 84px; padding: 16px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: linear-gradient(135deg, #1f2937, #111827); border: 2px solid #c9a227; border-radius: 10px; transform: rotate(-8deg); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); }
.pdn-key__stripe { position: absolute; left: 0; right: 0; top: 6px; height: 6px; background: #c9a227; }
.pdn-guest { width: 42px; height: 42px; border: 2px solid #c9a227; margin: 4px 0 2px; }
.pdn-key small { font-size: 7.5px; font-weight: 800; letter-spacing: 0.12em; color: #c9a227; }
.pdn-key b { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.pdn-you { position: absolute; right: 4px; bottom: 46px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pdn-youface { width: 52px; height: 52px; border: 3px solid #fff; filter: saturate(0.75); }
.pdn-you small { max-width: 80px; overflow: hidden; font-size: 9.5px; line-height: 1.2; text-align: center; }
.pdn-you i { color: #ff9fb6; }
.pdn-bubble { position: absolute; left: 50%; top: 30px; z-index: 4; transform: translateX(-50%); background: #fff; color: #e11d48; border: 3px solid #201e2e; border-radius: 12px; padding: 6px 12px; font: 900 16px var(--font-heading); }
.pdn-bubble[hidden] { display: none; }
.pdn-bubble.is-on { animation: padXIn 0.25s ease; }
.pad--dnd h3 { font: 900 1.25rem/1.2 var(--font-heading); margin: 12px 16px 2px; }
.pad--dnd > p { font-size: 13px; color: #f9a8d4; margin: 0 16px 12px; }
.pad--dnd .pad-cta { width: calc(100% - 32px); background: #e11d48; }

/* Steamy windows — a car park at night */
.pad--steamy { background: #0b1026; color: #e6ecff; padding: 0 0 16px; --pad-x: rgba(230, 236, 255, 0.75); }
.psm-night { position: relative; height: 250px; overflow: hidden; background: linear-gradient(#0b1026, #1b2250 72%, #2a2f45 72%); }
.psm-night::after { content: ''; position: absolute; left: 0; right: 0; bottom: 26px; height: 3px; background: repeating-linear-gradient(90deg, #f5f5f5 0 30px, transparent 30px 60px); opacity: 0.5; }
.psm-moon { position: absolute; left: 140px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: #fff6c9; box-shadow: 0 0 22px #fff6c9; }
.psm-lamp { position: absolute; left: 22px; top: 26px; width: 6px; height: 158px; background: #4b5563; }
.psm-lamp::before { content: ''; position: absolute; left: -4px; top: -6px; width: 26px; height: 10px; border-radius: 6px; background: #6b7280; }
.psm-cone { position: absolute; left: 0; top: 34px; width: 150px; height: 150px; background: radial-gradient(ellipse at 38px 0, rgba(255, 230, 150, 0.3), transparent 70%); clip-path: polygon(22% 0, 32% 0, 100% 100%, 0 100%); }
.psm-sign { position: absolute; left: 40px; top: 38px; z-index: 1; width: 78px; padding: 4px; display: flex; flex-direction: column; align-items: center; background: #1d4ed8; border: 3px solid #fff; border-radius: 8px; }
.psm-sign b { font: 900 24px/1 var(--font-heading); }
.psm-sign span { font: 800 10px var(--font-heading); }
.psm-sign small { max-width: 70px; overflow: hidden; font-size: 7.5px; line-height: 1.15; font-weight: 700; text-align: center; }
.psm-car { position: absolute; left: 50%; bottom: 18px; z-index: 2; width: 260px; height: 120px; margin-left: -130px; transform-origin: 50% 100%; transform: scale(1.14); animation: psmRock 0.85s ease-in-out infinite alternate; }
@keyframes psmRock { from { transform: scale(1.14) rotate(-1.6deg); } to { transform: scale(1.14) rotate(1.6deg) translateY(-1px); } }
.psm-car.is-jolted { animation: psmJolt 0.5s ease; }
@keyframes psmJolt { 0%, 100% { transform: scale(1.14); } 30% { transform: scale(1.14) translateY(-12px) rotate(-3deg); } 60% { transform: scale(1.14) rotate(2deg); } }
.psm-body { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.psm-paint { fill: #c2185b; stroke: #201e2e; stroke-width: 5; stroke-linejoin: round; }
.psm-glass { fill: rgba(225, 232, 250, 0.92); animation: psmSteamUp 2.6s ease-in-out infinite alternate; stroke: #201e2e; stroke-width: 4; stroke-linejoin: round; }
@keyframes psmSteamUp { from { fill: rgba(210, 220, 245, 0.8); } to { fill: rgba(245, 248, 255, 0.97); } }
.psm-trim { fill: none; stroke: #201e2e; stroke-width: 4; }
.psm-wheel { fill: #1a1a1a; stroke: #201e2e; stroke-width: 4; }
.psm-hub { fill: #9ca3af; }
.psm-light { fill: #ffd23f; }
.psm-peek { position: absolute; left: 105px; top: 24px; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.psm-face { width: 100%; height: 100%; }
.psm-fog { position: absolute; inset: 0; background: radial-gradient(circle, transparent 40%, rgba(232, 238, 255, 0.92) 72%); animation: psmFog 3s ease-in-out infinite alternate; }
@keyframes psmFog { to { background-size: 70% 70%; background-position: center; opacity: 0.8; } }
.psm-hand { position: absolute; left: 168px; top: 20px; width: 24px; height: 43px; overflow: visible; animation: psmSlide 3.4s ease-in infinite; }
.psm-hand ellipse, .psm-hand rect { fill: rgba(30, 40, 80, 0.5); }
.psm-streak { fill: none; stroke: rgba(30, 40, 80, 0.35); stroke-width: 3; stroke-linecap: round; }
@keyframes psmSlide { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 80% { transform: translateY(12px); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
.psm-steam { position: absolute; left: var(--x); top: 0; color: #ff8fc7; animation: psmSteam 2.4s ease-out var(--d) infinite; }
.psm-steam svg { fill: #ff8fc7; }
@keyframes psmSteam { from { transform: translateY(8px) scale(0.6); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-46px) scale(1.2); opacity: 0; } }
.psm-ticket { position: absolute; right: 10px; top: 34px; z-index: 3; max-width: 152px; display: flex; align-items: center; gap: 6px; padding: 6px 8px; text-align: left; color: #201e2e; background: #fef08a; border: 2px solid #201e2e; border-radius: 6px; transform: rotate(4deg); }
.psm-you { width: 36px; height: 36px; border: 2px solid #201e2e; }
.psm-ticket b { display: block; font: 900 10px var(--font-heading); letter-spacing: 0.12em; }
.psm-ticket small { display: block; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; }
.psm-ticket i { font-size: 10.5px; }
.pad--steamy h3 { font: 900 1.3rem var(--font-heading); color: #ff8fc7; margin: 12px 16px 2px; }
.pad--steamy > p { font-size: 13px; color: #aab4de; margin: 0 16px 12px; }
.pad--steamy .pad-cta { width: calc(100% - 32px); background: #c2185b; }

/* Fluffy handcuffs */
.pad--cuffs { background: linear-gradient(#2b0a2a, #4a0f3d); color: #fff; padding: 0 0 16px; --pad-x: rgba(255, 255, 255, 0.85); }
.pcu-stage { position: relative; height: 250px; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(255, 122, 198, 0.25), transparent 60%); }
.pcu-cuffs { position: absolute; left: 50%; top: 26px; width: 240px; height: 130px; margin-left: -120px; transform-origin: 50% 45%; animation: pcuRattle 1.4s ease-in-out infinite; }
.pcu-cuffs svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
@keyframes pcuRattle { 0%, 45%, 100% { transform: rotate(0); } 10% { transform: rotate(-5deg); } 20% { transform: rotate(4deg); } 30% { transform: rotate(-2deg); } }
.pcu-cuffs.is-rattled { animation: pcuShake 0.6s ease; }
@keyframes pcuShake { 15% { transform: rotate(-10deg) translateX(-6px); } 35% { transform: rotate(9deg) translateX(6px); } 55% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
.pcu-fur { fill: none; stroke: #ff7ac6; stroke-width: 22; filter: drop-shadow(0 3px 0 #201e2e); }
.pcu-fuzz { fill: none; stroke: #ffc2e5; stroke-width: 26; stroke-linecap: round; stroke-dasharray: 0.1 8; opacity: 0.9; }
.pcu-steel { fill: none; stroke: #c0c7d1; stroke-width: 6; }
.pcu-chain ellipse { fill: none; stroke: #c0c7d1; stroke-width: 5; }
.pcu-locked { position: absolute; left: 34px; top: 38px; width: 48px; height: 48px; }
.pcu-you { width: 48px; height: 48px; border: 2px solid #fff; }
.pcu-score { position: absolute; left: 58px; top: 108px; transform: translateX(-50%); padding: 1px 6px; border-radius: 99px; background: #201e2e; color: #ffc2e5; font: 800 9px var(--font-heading); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.pcu-feather { position: absolute; left: -40px; top: 150px; z-index: 3; width: 28px; height: 56px; animation: pcuFly 5s ease-in-out infinite; }
@keyframes pcuFly { 0% { transform: translate(0, 0) rotate(20deg); } 25% { transform: translate(120px, -70px) rotate(-30deg); } 50% { transform: translate(230px, -30px) rotate(28deg); } 75% { transform: translate(320px, -90px) rotate(-22deg); } 100% { transform: translate(420px, -40px) rotate(12deg); } }
.pcu-vane { fill: #fff; stroke: #e6a8cf; stroke-width: 2; }
.pcu-quill { fill: none; stroke: #c084a8; stroke-width: 2.5; }
.pcu-barbs { stroke: #f3c9e1; stroke-width: 1.5; }
/* The ✕, chained to the right cuff (the Runaway swaps it to the left one). */
.pcu-tagline { position: absolute; left: calc(50% + 55px); top: 122px; z-index: 2; display: flex; flex-direction: column; align-items: center; transition: left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pcu-stage.is-swapped .pcu-tagline { left: calc(50% - 69px); }
.pcu-links { width: 14px; height: 40px; }
.pcu-links ellipse { fill: none; stroke: #c0c7d1; stroke-width: 3; }
.pcu-tag { width: 30px; height: 30px; margin-top: -3px; display: grid; place-items: center; border-radius: 50%; background: #201e2e; border: 2px solid #c0c7d1; animation: pdnSwing 1.2s ease-in-out infinite alternate; transform-origin: 50% -30px; }
.pcu-key { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; white-space: nowrap; font-size: 12.5px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 194, 229, 0.4); border-radius: 99px; }
.pcu-keyface { width: 30px; height: 30px; }
.pcu-key span { display: inline-flex; align-items: center; gap: 4px; }
.pad--cuffs h3 { font: 900 1.7rem var(--font-heading); color: #ff7ac6; margin: 10px 16px 0; }
.pad--cuffs > p { font-size: 14px; margin: 2px 16px 12px; }
.pad--cuffs .pad-cta { width: calc(100% - 32px); background: #ff4fa3; }

/* Bedroom eyes — lipstick everywhere */
.pad--bedroomEyes { background: linear-gradient(160deg, #3b0a1e, #6d0f33); color: #fff; padding: 14px 16px 16px; --pad-x: rgba(255, 220, 230, 0.9); }
.pbe-top { display: flex; align-items: center; gap: 10px; padding-right: 26px; text-align: left; }
.pbe-heart { width: 56px; height: 52px; flex-shrink: 0; background: #ff2d6f; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 90 C20 66 0 48 0 26 C0 10 12 0 27 0 C38 0 46 6 50 14 C54 6 62 0 73 0 C88 0 100 10 100 26 C100 48 80 66 50 90 Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 90 C20 66 0 48 0 26 C0 10 12 0 27 0 C38 0 46 6 50 14 C54 6 62 0 73 0 C88 0 100 10 100 26 C100 48 80 66 50 90 Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pbe-face { width: 100%; height: 100%; border-radius: 0; }
.pbe-top small { display: block; font-size: 11px; color: #ffb3c7; }
.pbe-top b { font: 900 1.05rem var(--font-heading); }
.pbe-lips { position: relative; width: 180px; height: 108px; margin: 8px auto 4px; transform-origin: 50% 60%; animation: pbeKiss 2.4s ease-in-out infinite; }
.pbe-lips svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
@keyframes pbeKiss { 0%, 40%, 100% { transform: scale(1); } 55% { transform: scale(0.72, 1.12); } 70% { transform: scale(0.75, 1.1); } }
.plp-up { fill: #d6124f; stroke: #201e2e; stroke-width: 4; stroke-linejoin: round; }
.plp-lo { fill: #ff2d6f; stroke: #201e2e; stroke-width: 4; stroke-linejoin: round; }
.plp-line { fill: none; stroke: #201e2e; stroke-width: 4; stroke-linecap: round; }
.plp-shine { fill: #fff; opacity: 0.55; }
.pbe-blown { position: absolute; left: 50%; top: 40%; color: #ff6fa0; opacity: 0; animation: pbeBlow 2.4s ease-out infinite; }
.pbe-blown svg { fill: #ff6fa0; }
@keyframes pbeBlow { 0%, 60% { opacity: 0; transform: translate(-50%, 0) scale(0.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(40px, -70px) scale(1.4) rotate(20deg); } }
.pad--bedroomEyes h3 { font: 900 1.35rem var(--font-heading); }
.pad--bedroomEyes > p { color: #ffb3c7; margin: 2px 0 10px; }
.pbe-polaroid { position: relative; width: 120px; margin: 0 auto 12px; padding: 7px 7px 22px; background: #fff; transform: rotate(-5deg); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); }
.pbe-you { width: 100%; height: 106px; border-radius: 0; }
.pbe-polaroid small { position: absolute; left: 0; right: 0; bottom: 4px; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; font: 700 11px 'Marker Felt', 'Comic Sans MS', cursive; }
.pbe-marks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pbe-mark { position: absolute; width: 46px; height: 28px; transform: rotate(var(--r, 0deg)); animation: pbeStamp 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) backwards; pointer-events: none; }
.pbe-mark svg { width: 100%; height: 100%; }
.pbe-mark svg path { fill: #d6124f; opacity: 0.88; }
.pbe-mark .pbe-crease { fill: none; stroke: #8a0a33; stroke-width: 1.2; opacity: 0.6; }
.pbe-mark--photo { left: 52px; top: 50px; --r: -14deg; animation-delay: 1.2s; }
@keyframes pbeStamp { from { transform: scale(2.3) rotate(var(--r, 0deg)); opacity: 0; } }
.pad--bedroomEyes .pad-cta { background: #ff2d6f; }

@media (prefers-reduced-motion: reduce) {
  .pad, .pad *, .pcap, .pleave, .popup-ad__frame { animation: none !important; }
}