@import url("/patches/adult-screen-fit-20261015.css?v=consistency2&auth=20261016-1");
@import url("/patches/signature-ui-20261015.css?v=orbit3");
@import url("/adult-page-compact.css?v=20260929-1");
@import url("/premium-unified-20261010.css?v=20261010-luxe1");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");
@import url("/patches/premium-type-20261014.css?v=type3");
@import url("/patches/premium-touch-motion-20261014.css?v=touch1");
/* MatchApp brand system — crisp from phones through 8K. */
.matchapp-wordmark{display:block!important;width:clamp(14rem,26vw,22rem)!important;max-width:100%!important;height:auto!important;aspect-ratio:600/104;object-fit:contain!important;border:0!important;border-radius:0!important;box-shadow:none!important;flex:none;transform-origin:left center;filter:drop-shadow(0 5px 15px rgba(0,0,0,.3)) drop-shadow(0 0 9px rgba(229,193,88,.08));animation:brandReveal .7s cubic-bezier(.2,.8,.2,1) both;transition:transform .25s ease,filter .25s ease!important}
.matchapp-brand-link:hover .matchapp-wordmark,.matchapp-brand-link:focus-visible .matchapp-wordmark{transform:translateY(-2px) scale(1.025);filter:drop-shadow(0 7px 18px rgba(0,0,0,.32)) drop-shadow(0 0 13px rgba(229,193,88,.14))}
@keyframes brandReveal{from{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.matchapp-wordmark{animation:none!important;transition:none!important}}
.reduce-motion .matchapp-wordmark{animation:none!important;transition:none!important}
.matchapp-brand-link{display:inline-flex;align-items:center;gap:.7rem;min-width:0;text-decoration:none;color:var(--theme-accent,#ead8ff)}
.matchapp-brand-bar{position:relative;z-index:2;max-width:80rem;margin:1rem auto;padding:.65rem 1.25rem;box-sizing:border-box}
body>header:has(>.matchapp-brand-link):not(.app-header){flex-wrap:wrap;gap:1rem}

/* The animated SVG is the canonical wordmark. If an older experience layer
   injected its previous text-built wordmark, keep that fallback out of view
   and restore the real SVG instead. This also removes several redundant CSS
   animations from the header. */
html .app-title-main .matchapp-wordmark-source{display:block!important}
html .app-title-main .matchapp-live-wordmark{display:none!important}

/* The logo asset is a square JPEG, but the actual mark is circular. Never show
   the square backing card: clip every shared brand-logo instance to the mark. */
.matchapp-brand-link picture{display:inline-grid;place-items:center;flex:none;background:transparent!important;border:0!important;border-radius:50%!important;box-shadow:none!important;overflow:visible!important}
.matchapp-brand-link>img:not(.matchapp-wordmark),.matchapp-brand-link picture>img,.brand-logo,.matchapp-circle-logo{flex-shrink:0;object-fit:cover!important;object-position:center!important;border:0!important;border-radius:50%!important;clip-path:circle(49% at 50% 50%)!important;background:transparent!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--theme-accent,#dcc0ff) 26%,transparent),0 6px 18px #0004!important}

.app-title-main:has(.matchapp-wordmark){display:block!important;background:none!important;animation:none!important;line-height:1!important;letter-spacing:normal!important;text-transform:none!important}
html .app-header{box-sizing:border-box;position:relative!important;z-index:20;width:calc(100% - 2rem);max-width:92rem;margin:1.25rem auto 1rem!important;padding:1rem 1.3rem!important;min-height:6.15rem;border:1px solid color-mix(in srgb,var(--theme-accent,#dcc0ff) 25%,transparent)!important;border-radius:2rem 1.3rem 2rem 1.3rem!important;background:linear-gradient(125deg,color-mix(in srgb,var(--theme-surface,#241636) 96%,transparent),color-mix(in srgb,var(--theme-panel,#302043) 90%,transparent))!important;box-shadow:0 12px 32px #0003,inset 0 1px 0 #ffffff15!important;backdrop-filter:none!important;overflow:visible!important;gap:1rem!important;animation:headerArrive .55s ease-out both}
html .app-header .header-brand-area{display:flex;align-items:center;gap:.75rem!important;min-width:0;flex-shrink:1}
html .app-header .brand-logo{width:3.25rem!important;height:3.25rem!important;transition:transform .25s}
html .app-header .header-brand-area:hover .brand-logo{transform:rotate(-4deg) scale(1.03)}
html .app-header nav{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-end!important;gap:.45rem!important;min-width:0}
html .app-header :is(button,select,.quota-badge,.nav-avatar-link,.icon-btn){box-sizing:border-box;min-height:44px!important;border-radius:999px!important;padding:.6rem .8rem!important;border-width:1px!important;font-size:.85rem!important;white-space:nowrap!important;transition:transform .18s,box-shadow .18s!important}
html .app-header :is(button,.nav-avatar-link,.icon-btn):hover{transform:translateY(-2px);box-shadow:0 5px 14px #0002}
html .app-header :is(button,select,a):focus-visible{outline:3px solid var(--theme-second,#87eee0)!important;outline-offset:4px}
html .app-header .sound-toggle-btn{width:44px!important;height:44px!important;min-width:44px!important;flex:none;padding:.55rem!important}
html .app-header #nav-reg-btn{flex:none!important;padding:.7rem 1rem!important;box-shadow:0 3px 12px color-mix(in srgb,var(--theme-accent,#dcc0ff) 16%,transparent)}
html .app-header .install-wrap:has(.install-btn[style*="display: none"]){display:none}
html .app-header .install-wrap:has(.has-app-update),html .app-header .install-wrap:has(.is-app-installed){display:block}
html .app-header .has-app-update{border-color:var(--theme-second,#87eee0)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-second,#87eee0) 14%,transparent)!important}
html .app-header .has-app-update::before{content:'↻';font-size:1.2em;margin-inline-end:.35em}
.app-release-notice[hidden]{display:none!important}.app-release-notice [aria-busy="true"]{cursor:progress}
.kids-brand-copy:has(.matchapp-wordmark){min-width:0}.kids-brand-copy .matchapp-wordmark{width:clamp(11.5rem,20vw,16.5rem)!important}.kids-header-inner{min-width:0}.kids-brand{min-width:0}
[data-theme="sunrise"] .matchapp-wordmark{filter:brightness(.56) saturate(1.22) drop-shadow(0 3px 10px #fff5)}
@keyframes headerArrive{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){html .app-header{flex-wrap:wrap!important;max-width:42rem}html .app-header .header-brand-area{width:auto!important;flex:1 1 100%}html .app-header nav{justify-content:center!important;flex:1 1 100%;padding-top:.6rem;border-top:1px solid color-mix(in srgb,var(--theme-accent,#dcc0ff) 16%,transparent)}html .app-header #lang-switcher-host{margin:0!important}html .app-header .quota-badge{order:5}html .app-header .install-wrap{order:4}html .app-header .nav-avatar-link{margin-inline-start:0}}
@media(max-width:480px){html .app-header{width:calc(100% - 1rem);margin:.65rem auto .9rem!important;padding:.82rem .86rem!important;border-radius:1.55rem 1rem 1.55rem 1rem!important;gap:.45rem!important;min-height:5.5rem}html .app-header .matchapp-wordmark{width:min(72vw,17.25rem)!important}html .app-header nav{gap:.4rem!important}html .app-header :is(button,select,.quota-badge,.nav-avatar-link,.icon-btn){font-size:.8rem!important;padding:.55rem .65rem!important}html .app-header #nav-reg-btn{padding:.65rem .75rem!important}.kids-brand-copy .matchapp-wordmark{width:11rem!important}.kids-header-inner{flex-wrap:wrap}.matchapp-brand-bar{padding-inline:.8rem}}
@media(min-width:1600px){.matchapp-wordmark{width:22.5rem!important}html .app-header .brand-logo{width:3.65rem!important;height:3.65rem!important}}
@media(min-width:2560px){html .app-header{max-width:110rem;padding:1.25rem 2rem!important}.matchapp-wordmark{width:24rem!important}html .app-header :is(button,select,.quota-badge,.nav-avatar-link,.icon-btn){font-size:1rem!important;min-height:3rem!important}}
@media(prefers-reduced-motion:reduce){html .app-header,html .app-header *{animation:none!important;transition:none!important}}
.reduce-motion .app-header,.reduce-motion .app-header *{animation:none!important;transition:none!important}
@media(max-width:480px){.home-h1,.home-sub{color:var(--theme-text,#faf5ff)!important;text-shadow:0 2px 6px var(--theme-bg,#100a23),0 0 18px var(--theme-bg,#100a23)}}

/* 2026-09-17 interaction polish — visual only. Keep cards lively without changing layout or behavior. */
.matchapp-brand-link{position:relative;isolation:isolate}
.app-header .matchapp-brand-link::before,.matchapp-brand-bar .matchapp-brand-link::before{content:"";position:absolute;z-index:-1;inset:8% -5%;border-radius:999px;background:radial-gradient(ellipse at 42% 50%,color-mix(in srgb,var(--theme-accent,#e5c158) 18%,transparent),transparent 68%);filter:blur(12px);opacity:.72;pointer-events:none;transition:opacity .28s ease,transform .28s ease}
.app-header .matchapp-brand-link:hover::before,.matchapp-brand-bar .matchapp-brand-link:hover::before{opacity:1;transform:scale(1.05)}

:where(.premium-card,.discover-card,.trending-card,.global-event,.event-card,.news-card,.weekly-pick-card,.kids-card,.match-card,.spotlight-card){transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,border-color .24s ease,filter .24s ease}
@media(hover:hover) and (pointer:fine){:where(.premium-card,.discover-card,.trending-card,.global-event,.event-card,.news-card,.weekly-pick-card,.match-card,.spotlight-card):hover{transform:translateY(-5px) scale(1.008);box-shadow:0 16px 36px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--theme-accent,#e5c158) 20%,transparent);filter:saturate(1.035)}}
:where(button,.btn,.cta-btn,.primary-btn,.secondary-btn,.pill,.chip,.filter-chip,.top-ask-submit,.match-btn){transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,filter .18s ease}
@media(hover:hover) and (pointer:fine){:where(button,.btn,.cta-btn,.primary-btn,.secondary-btn,.pill,.chip,.filter-chip,.top-ask-submit,.match-btn):not(:disabled):hover{transform:translateY(-2px) scale(1.012);filter:brightness(1.045)}}
:where(button,.btn,.cta-btn,.primary-btn,.secondary-btn,.pill,.chip,.filter-chip,.top-ask-submit,.match-btn):not(:disabled):active{transform:translateY(0) scale(.985)}

@keyframes maInteractiveIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes maSoftGlow{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--theme-accent,#e5c158) 32%,transparent))}}
main :where(.premium-card,.discover-card,.global-event,.weekly-pick-card,.spotlight-card){animation:maInteractiveIn .48s cubic-bezier(.2,.8,.2,1) both}
main :where(.premium-card,.discover-card,.global-event,.weekly-pick-card,.spotlight-card):nth-child(2n){animation-delay:.035s}
main :where(.premium-card,.discover-card,.global-event,.weekly-pick-card,.spotlight-card):nth-child(3n){animation-delay:.07s}

/* Kids Mode deliberately gets the more playful motion language. */
html[data-kids-mode] :where(.kids-panel,.kids-card,.kids-hero,.kids-section){animation:maKidsPop .55s cubic-bezier(.16,1,.3,1) both}
html[data-kids-mode] .kids-card:nth-child(3n+1){animation-delay:.03s}
html[data-kids-mode] .kids-card:nth-child(3n+2){animation-delay:.07s}
html[data-kids-mode] .kids-card:nth-child(3n){animation-delay:.11s}
html[data-kids-mode] :where(.kids-concierge-icon,.kids-sparkle,.kids-star){animation:maKidsTwinkle 2.4s ease-in-out infinite}
html[data-kids-mode] :where(.kids-card,.kids-panel){box-shadow:0 12px 28px rgba(0,0,0,.2),0 0 0 1px color-mix(in srgb,var(--theme-accent,#e5c158) 12%,transparent)}
@media(hover:hover) and (pointer:fine){html[data-kids-mode] .kids-card:hover{transform:translateY(-8px) rotate(.6deg) scale(1.025);box-shadow:0 18px 38px rgba(0,0,0,.25),0 0 22px color-mix(in srgb,var(--theme-second,#87eee0) 18%,transparent)}html[data-kids-mode] :where(button,.kids-btn,.kids-chip):not(:disabled):hover{transform:translateY(-3px) scale(1.035) rotate(-.3deg)}}
html[data-kids-mode] :where(button,.kids-btn,.kids-chip):not(:disabled):active{transform:scale(.96)}
@keyframes maKidsPop{0%{opacity:0;transform:translateY(14px) scale(.96)}68%{opacity:1;transform:translateY(-2px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes maKidsTwinkle{0%,100%{transform:rotate(-4deg) scale(.94);opacity:.76}50%{transform:rotate(5deg) scale(1.12);opacity:1}}

@media(max-width:560px){.matchapp-brand-bar .matchapp-wordmark{width:min(84vw,18rem)!important}.app-header .matchapp-brand-link::before,.matchapp-brand-bar .matchapp-brand-link::before{inset:10% -2%;filter:blur(9px)}}
@media(prefers-reduced-motion:reduce){:where(.premium-card,.discover-card,.trending-card,.global-event,.event-card,.news-card,.weekly-pick-card,.kids-card,.match-card,.spotlight-card),main :where(.premium-card,.discover-card,.global-event,.weekly-pick-card,.spotlight-card),html[data-kids-mode] :where(.kids-panel,.kids-card,.kids-hero,.kids-section,.kids-concierge-icon,.kids-sparkle,.kids-star){animation:none!important;transition:none!important;transform:none!important}.app-header .matchapp-brand-link::before,.matchapp-brand-bar .matchapp-brand-link::before{transition:none!important}}
.reduce-motion :where(.premium-card,.discover-card,.trending-card,.global-event,.event-card,.news-card,.weekly-pick-card,.kids-card,.match-card,.spotlight-card),.reduce-motion main :where(.premium-card,.discover-card,.global-event,.weekly-pick-card,.spotlight-card),.reduce-motion html[data-kids-mode] :where(.kids-panel,.kids-card,.kids-hero,.kids-section,.kids-concierge-icon,.kids-sparkle,.kids-star){animation:none!important;transition:none!important;transform:none!important}


/* 2026-09-18 canonical non-Kids logo. Animated AVIF keeps the user's exact
   circle/play/stars animation; circular clipping removes the square dark field
   so the existing header/brand-bar surface is the only surrounding background. */
html:not(.kids-mode) .matchapp-brand-link>img:not(.matchapp-wordmark):not([src^="/kids/"]):not([src*="/kids/"]),
html:not(.kids-mode) .matchapp-brand-link picture>img:not([src^="/kids/"]):not([src*="/kids/"]),
html:not(.kids-mode) .brand-logo:not(.kids-mascot):not([src*="/kids/"]){
  content:url("/assets/brand/matchapp-icon-approved.png?v=20261013-approved1")!important;
  object-fit:cover!important;object-position:center!important;
  border:0!important;border-radius:50%!important;clip-path:circle(49.2% at 50% 50%)!important;
  background:transparent!important;box-shadow:none!important;
}
html:not(.kids-mode) .brand-logo-placeholder{
  background:transparent url("/assets/brand/matchapp-icon-approved.png?v=20261013-approved1") center/cover no-repeat!important;
  border:0!important;border-radius:50%!important;clip-path:circle(49.2% at 50% 50%)!important;
  box-shadow:none!important;
}

/* MA-DEPTH-3D:START
   MatchApp 3D depth system. This exact block lives at the end of both
   style.css and brand.css (together they cover every page); keep the two
   copies identical — tests/depth-3d.test.cjs checks it.
   - Static light + shadow only: no animations, no filters, no JS.
   - Motion only on hover (mouse devices) and press, transform/box-shadow,
     180 ms, and none under prefers-reduced-motion.
   - Lives in a cascade layer so it can win over old !important patch rules
     without escalating specificity. Inline styles still win, so script-set
     display/visibility is never overridden. Opt out with .no-depth. */
@layer ma-depth {
  :root {
    --d3-hi: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 24px 28px -24px rgba(255, 255, 255, .16);
    --d3-lo: inset 0 -2px 0 rgba(0, 0, 0, .3), inset 0 -18px 24px -18px rgba(0, 0, 0, .55);
    --d3-raise-1: 0 1px 1px rgba(0, 0, 0, .35), 0 5px 12px -4px rgba(0, 0, 0, .55);
    --d3-raise-2: 0 2px 3px rgba(0, 0, 0, .35), 0 14px 26px -10px rgba(0, 0, 0, .75), 0 22px 40px -22px rgba(118, 58, 214, .5);
    --d3-raise-3: 0 4px 8px rgba(0, 0, 0, .35), 0 22px 38px -12px rgba(0, 0, 0, .78), 0 34px 60px -28px rgba(118, 58, 214, .6);
    --d3-well: inset 0 2px 5px rgba(0, 0, 0, .5), inset 0 -1px 0 rgba(255, 255, 255, .07);
    --d3-glow: 0 0 0 1px rgba(229, 193, 88, .6), 0 0 16px rgba(229, 193, 88, .3);
    --d3-gold-rest: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(122, 72, 4, .35), 0 4px 0 #8a5a12, 0 7px 14px -3px rgba(0, 0, 0, .6), 0 0 18px rgba(229, 193, 88, .2);
    --d3-gold-hover: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(122, 72, 4, .35), 0 5px 0 #8a5a12, 0 10px 20px -4px rgba(0, 0, 0, .62), 0 0 24px rgba(229, 193, 88, .32);
    --d3-gold-press: inset 0 2px 4px rgba(122, 72, 4, .45), 0 1px 0 #8a5a12, 0 3px 8px -3px rgba(0, 0, 0, .6);
    --d3-key-rest: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 rgba(0, 0, 0, .32), 0 7px 14px -3px rgba(0, 0, 0, .5);
    --d3-key-press: inset 0 2px 4px rgba(0, 0, 0, .3), 0 1px 0 rgba(0, 0, 0, .32);
    --d3-t: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
  }

  /* Raised panels and cards */
  :where(.app-header, .premium-card, .marquee-wrapper, .ma-concierge, .daily-checkin, .awareness-card,
    .global-events-fold, .seo-footer, .profile-hub-row, .purchase-pack, .credit-pack, .ma-plan,
    .ma-secondary-product, .purchase-hub, .w2w-region, .w2w-note, .seo-item, .kids-shell, .kids-match,
    .kids-age-wrap, .friend-panel, .passkey-box, .portfolio-panel, .matchapp-exclusion-box,
    .matchapp-exclusion-group, .ai-usage-card, .composer, .ma-cookie, .ma-av-entry):where(:not(.no-depth)) {
    box-shadow: var(--d3-hi), var(--d3-lo), var(--d3-raise-2) !important;
  }

  /* Light from above: brighter top edge, darker bottom edge (only where a border exists) */
  :where(.app-header, .premium-card, .marquee-wrapper, .ma-concierge, .daily-checkin, .awareness-card,
    .global-events-fold, .seo-footer, .profile-hub-row, .purchase-pack, .credit-pack, .ma-plan,
    .ma-secondary-product, .purchase-hub, .w2w-region, .w2w-note, .seo-item, .kids-shell, .kids-match,
    .kids-age-wrap, .friend-panel, .passkey-box, .portfolio-panel, .matchapp-exclusion-box,
    .matchapp-exclusion-group, .ai-usage-card, .composer, .ma-av-entry, .marquee-item, .spotlight-poster, .kids-card):where(:not(.no-depth)) {
    border-top-color: rgba(255, 240, 190, .6) !important;
    border-bottom-color: rgba(0, 0, 0, .6) !important;
  }

  /* Clickable cards: lift, and tilt toward the viewer on mouse hover */
  :where(.profile-hub-row, .purchase-pack, .credit-pack, .ma-plan, .ma-secondary-product, .seo-item, .w2w-region):where(:not(.no-depth)) {
    transition: var(--d3-t) !important;
  }

  /* Posters: deep shadow + 3D tilt on hover */
  :where(.marquee-item, .spotlight-poster, .kids-card):where(:not(.no-depth)) {
    box-shadow: var(--d3-hi), var(--d3-lo), var(--d3-raise-2) !important;
    transition: var(--d3-t) !important;
  }

  /* Neutral buttons and header tiles: raised, press in */
  :where(.secondary-btn, .ma-plan-cta, .credit-pack-btn, .dc-action, .spotlight-ask, .ai-new-chat,
    .kids-secondary, .kids-pill, .kids-watch, .social-btn, .awareness-cta, .tg-entry, .mh-home-btn,
    .ma-how-button, .ma-menu-button, .sound-toggle-btn, .matchapp-notification-button, .ma-cookie .ok, .ma-cookie .no,
    .mh-deck > #nav-reg-btn, .mh-deck > #nav-logout-btn):where(:not(.no-depth, .gold-btn, #avatar-maker-dialog *)) {
    box-shadow: var(--d3-hi), var(--d3-lo), var(--d3-raise-1) !important;
    transition: var(--d3-t) !important;
  }

  /* Gold primary buttons: pressable 3D keycap */
  :where(.gold-btn, .ma-av-entry-btn):where(:not(.no-depth, #avatar-maker-dialog *)) {
    box-shadow: var(--d3-gold-rest) !important;
    transition: var(--d3-t) !important;
  }
  /* Kids primary: same keycap, neutral edge so the candy colours stay */
  :where(.kids-primary):where(:not(.no-depth)) {
    box-shadow: var(--d3-key-rest) !important;
    transition: var(--d3-t) !important;
  }

  /* Chips and tabs */
  :where(.ma-chip, .kids-chip, .matchapp-exclusion-chip, .theme-choice):where(:not(.no-depth)) {
    box-shadow: var(--d3-hi), 0 2px 0 rgba(0, 0, 0, .45), 0 5px 10px -4px rgba(0, 0, 0, .55) !important;
    transition: var(--d3-t) !important;
  }
  :where(.ma-tabs, .purchase-tabs):where(:not(.no-depth)) {
    box-shadow: var(--d3-well) !important;
  }
  :where(.ma-tab, .purchase-tab, .portfolio-tab):where(:not(.no-depth)) {
    transition: var(--d3-t) !important;
  }

  /* Text fields sit into the surface */
  :where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="number"], input[type="url"], textarea, select):where(:not(.no-depth, #avatar-maker-dialog *)) {
    box-shadow: var(--d3-well) !important;
  }
  :where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="number"], input[type="url"], textarea, select):where(:not(.no-depth, #avatar-maker-dialog *)):focus-visible {
    box-shadow: var(--d3-well), 0 0 0 2px rgba(229, 193, 88, .55) !important;
  }

  /* Dialogs float highest */
  :where(dialog:not(#avatar-maker-dialog), .modal-content):where(:not(.no-depth)) {
    box-shadow: var(--d3-hi), var(--d3-lo), var(--d3-raise-3) !important;
  }

  /* ---- selected / active states (after the bases so they win) ---- */
  :where(.ma-chip, .kids-chip, .matchapp-exclusion-chip, .theme-choice):where(:not(.no-depth)):is(.active, .is-active, .selected, .is-selected, [aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]) {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .32), var(--d3-glow) !important;
  }
  :where(.ma-tab, .purchase-tab, .portfolio-tab):where(:not(.no-depth)):is(.active, .is-active, .selected, [aria-selected="true"]) {
    box-shadow: var(--d3-hi), var(--d3-raise-1) !important;
  }

  /* ---- motion: mouse hover only ---- */
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    :where(.profile-hub-row, .purchase-pack, .credit-pack, .ma-plan, .ma-secondary-product, .seo-item, .w2w-region):where(:not(.no-depth)):hover {
      transform: perspective(900px) rotateX(3deg) translateY(-3px) !important;
      box-shadow: var(--d3-hi), var(--d3-lo), var(--d3-raise-3) !important;
    }
    :where(.marquee-item, .spotlight-poster, .kids-card):where(:not(.no-depth)):hover {
      transform: perspective(700px) rotateY(-6deg) rotateX(3deg) translateY(-4px) !important;
      box-shadow: var(--d3-hi), var(--d3-lo), -12px 24px 36px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(229, 193, 88, .45), 0 0 26px rgba(229, 193, 88, .22) !important;
    }
    :where(.secondary-btn, .ma-plan-cta, .credit-pack-btn, .dc-action, .spotlight-ask, .ai-new-chat,
      .kids-secondary, .kids-pill, .kids-watch, .social-btn, .awareness-cta, .tg-entry, .mh-home-btn,
      .ma-how-button, .ma-menu-button, .sound-toggle-btn, .matchapp-notification-button, .ma-cookie .ok, .ma-cookie .no,
      .mh-deck > #nav-reg-btn, .mh-deck > #nav-logout-btn, .ma-chip, .kids-chip, .matchapp-exclusion-chip, .theme-choice):where(:not(.no-depth, .gold-btn, #avatar-maker-dialog *)):hover {
      transform: translateY(-1px) !important;
    }
    :where(.gold-btn, .ma-av-entry-btn):where(:not(.no-depth, #avatar-maker-dialog *)):hover {
      transform: translateY(-1px) !important;
      box-shadow: var(--d3-gold-hover) !important;
    }
  }

  /* ---- press (touch and mouse) ---- */
  @media (prefers-reduced-motion: no-preference) {
    :where(.gold-btn, .ma-av-entry-btn):where(:not(.no-depth, #avatar-maker-dialog *)):active {
      transform: translateY(3px) !important;
      box-shadow: var(--d3-gold-press) !important;
    }
    :where(.kids-primary):where(:not(.no-depth)):active {
      transform: translateY(3px) !important;
      box-shadow: var(--d3-key-press) !important;
    }
    :where(.secondary-btn, .ma-plan-cta, .credit-pack-btn, .dc-action, .spotlight-ask, .ai-new-chat,
      .kids-secondary, .kids-pill, .kids-watch, .social-btn, .awareness-cta, .tg-entry, .mh-home-btn,
      .ma-how-button, .ma-menu-button, .sound-toggle-btn, .matchapp-notification-button, .ma-cookie .ok, .ma-cookie .no,
      .mh-deck > #nav-reg-btn, .mh-deck > #nav-logout-btn, .ma-chip, .kids-chip, .matchapp-exclusion-chip, .theme-choice):where(:not(.no-depth, .gold-btn, #avatar-maker-dialog *)):active {
      transform: translateY(1px) !important;
      box-shadow: var(--d3-well) !important;
    }
  }
}
/* MA-DEPTH-3D:END */

/* MA-POSTER-INTEGRITY:START
   Global title-cover integrity. Title artwork must never stretch, squash,
   crop, or be cut off on any viewport. Adult covers use the premium gold
   frame; Kids covers use the thicker playful frame. Keep this surgical:
   brand marks, avatars, news thumbnails and other non-title imagery are not
   targeted here. */
:where(
  .marquee-item>img,
  .spotlight-poster>img,
  .discover-poster:is(img),
  .discover-poster img,
  .discover-event-card>img,
  .global-event>img,
  .event-card>img,
  .poster-card>img,
  .poster-card picture>img,
  .profile-history-poster,
  #res-poster-img,
  #poster-zoom-img,
  .poster-wall-tile>img,
  .kids-card img,
  .kids-card-poster img,
  .kids-feature img,
  .kids-result-art img,
  [data-kids-title]>img
){
  object-fit:contain!important;
  object-position:center center!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Detail-guide art has no fixed poster frame, so let the source artwork
   choose its own natural ratio instead of forcing 2:3. */
[data-kids-title]>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:min(72vh,760px)!important;
  aspect-ratio:auto!important;
}

/* Adult title artwork: MatchApp gold frame with a restrained shimmer that is
   triggered by interaction rather than continuously repainting every card. */
:where(
  .marquee-item>img,
  .spotlight-poster>img,
  .discover-poster:is(img),
  .discover-poster img,
  .discover-event-card>img,
  .global-event>img,
  .event-card>img,
  .poster-card>img,
  .poster-card picture>img,
  .profile-history-poster,
  #res-poster-img,
  #poster-zoom-img,
  .poster-wall-tile>img
){
  border:2px solid #E5C158!important;
  background:#120a24!important;
  box-shadow:0 0 0 1px rgba(255,239,177,.16),0 0 14px rgba(229,193,88,.22)!important;
  transition:border-color .22s ease,box-shadow .22s ease!important;
}
@media(hover:hover) and (pointer:fine){
  :where(
    .marquee-item,
    .spotlight-poster,
    .discover-poster,
    .discover-event-card,
    .global-event,
    .event-card,
    .poster-card,
    .poster-stage,
    .poster-wall-tile
  ):hover img{
    border-color:#f7dc83!important;
    box-shadow:0 0 0 1px rgba(255,248,207,.32),0 0 22px rgba(229,193,88,.48)!important;
  }
}

/* Kids artwork: thick multi-colour frame. Only the single hero cover runs a
   slow border-colour animation; grid cards animate on interaction. This keeps
   the playful look without putting dozens of perpetual repaint animations on
   mobile devices. */
:where(.kids-card img,.kids-card-poster img,.kids-feature img,.kids-result-art img,[data-kids-title]>img){
  border:4px solid #ff72c7!important;
  background:#1a0c34!important;
  box-shadow:0 0 0 2px #ffd45f,0 0 0 4px #68e4ff,0 8px 24px rgba(0,0,0,.32)!important;
  border-radius:clamp(14px,2vw,24px)!important;
  transition:border-color .28s ease,box-shadow .28s ease!important;
}
[data-kids-title]>img{
  animation:maKidsCoverFrame 6s ease-in-out infinite!important;
}
@keyframes maKidsCoverFrame{
  0%,100%{border-color:#ff72c7;box-shadow:0 0 0 2px #ffd45f,0 0 0 4px #68e4ff,0 8px 24px rgba(0,0,0,.32)}
  33%{border-color:#68e4ff;box-shadow:0 0 0 2px #9cff8b,0 0 0 4px #ffd45f,0 8px 24px rgba(0,0,0,.32)}
  66%{border-color:#ffd45f;box-shadow:0 0 0 2px #ff72c7,0 0 0 4px #9cff8b,0 8px 24px rgba(0,0,0,.32)}
}
:where(.kids-card,.kids-result-art):is(:hover,:focus-within) img{
  border-color:#68e4ff!important;
  box-shadow:0 0 0 2px #9cff8b,0 0 0 4px #ffd45f,0 10px 28px rgba(0,0,0,.36)!important;
}
@media(prefers-reduced-motion:reduce){
  [data-kids-title]>img{animation:none!important}
}
.reduce-motion [data-kids-title]>img{animation:none!important}

/* Runtime-injected legacy rules can load after this stylesheet. These higher-
   specificity guards keep title art contained even when those old rules use
   !important. */
html body.page-home:not(.kids-body) .poster-wall .poster-wall-tile>img{
  object-fit:contain!important;object-position:center center!important;
}
html body.page-home #spotlight-ahs13 .spotlight-poster>img#spotlight-poster-img{
  object-fit:contain!important;object-position:center center!important;
}
/* MA-POSTER-INTEGRITY:END */

/* MA-PILL-SYNC:START — owner-requested cross-page control consistency, 2026-10-01. */
html:not(.kids-mode):not([data-kids-mode]) body:not(.page-kids):not(.kids-body) :where(
  .gold-btn,.secondary-btn,.ma-primary,.ma-plan-cta,.credit-pack-btn,.dc-action,.spotlight-ask,.ai-new-chat,
  .composer-send,.tg-btn-gold,.settings-save,.settings-reset,.ma-back-button,.mh-home-btn,.ma-how-button,
  .ma-menu-button,.social-btn,.awareness-cta,.tg-entry,.top-ai-launch,.top-ask-go,.install-btn,.reg-join,.reg-home
){border-radius:999px!important}
:where(body.page-kids,body.kids-body,html.kids-mode body,html[data-kids-mode] body) :where(
  .kids-primary,.kids-secondary,.kids-pill,.kids-tool,.kids-wallet-buy,.kids-quest-choice,.kids-watch,
  .kids-voice-toggle,.kids-fx-toggle,.kids-quest-reveal
){border-radius:999px!important}
/* MA-PILL-SYNC:END */

/* MA-KIDS-GUIDE-SYNC:START — keep generated Kids guides in the same visual family as Kids Mode. */
body.kids-guide-page,
body:has([data-kids-title]),
body:has(.list article[data-ages]){
  background:
    radial-gradient(circle at 8% 5%,rgba(104,228,255,.14),transparent 26rem),
    radial-gradient(circle at 92% 12%,rgba(255,114,199,.13),transparent 28rem),
    linear-gradient(180deg,#21113e 0%,#160d31 100%)!important;
  color:#fcf7ff!important;
}
:is(body.kids-guide-page,body:has([data-kids-title]),body:has(.list article[data-ages]))>header{
  width:min(1050px,calc(100% - 24px))!important;
  margin:14px auto 18px!important;padding:14px 16px!important;
  border:1px solid rgba(255,255,255,.16)!important;border-radius:28px!important;
  background:linear-gradient(135deg,rgba(49,24,83,.95),rgba(19,56,87,.9))!important;
  box-shadow:0 14px 34px rgba(5,2,18,.3),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
:is(body.kids-guide-page,body:has([data-kids-title]),body:has(.list article[data-ages]))>header nav{
  display:flex!important;flex-wrap:wrap!important;gap:8px!important;align-items:center!important;
}
:is(body.kids-guide-page,body:has([data-kids-title]),body:has(.list article[data-ages]))>header nav>a,
:is(body.kids-guide-page,body:has([data-kids-title]),body:has(.list article[data-ages])) :is(.watch,.matcher-link){
  border-radius:999px!important;
}
:is(body.kids-guide-page,body:has([data-kids-title]),body:has(.list article[data-ages]))>header nav>a{
  display:inline-flex!important;align-items:center!important;min-height:40px!important;padding:8px 14px!important;
  border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.07)!important;
  color:#fff0bd!important;text-decoration:none!important;font-weight:850!important;
}
:is(body.kids-guide-page,body:has([data-kids-title]),body:has(.list article[data-ages])) main>section,
:is(body.kids-guide-page,body:has([data-kids-title]),body:has(.list article[data-ages])) .list>article{
  border:1px solid rgba(255,255,255,.13)!important;
  background:linear-gradient(145deg,rgba(54,32,82,.88),rgba(24,18,58,.9))!important;
  box-shadow:0 12px 28px rgba(6,2,20,.22)!important;
}
:is(body.kids-guide-page,body:has([data-kids-title]),body:has(.list article[data-ages])) main>section{
  border-radius:28px!important;padding:clamp(16px,3vw,28px)!important;
}
:is(body.kids-guide-page,body:has([data-kids-title]),body:has(.list article[data-ages])) .list>article{
  border-radius:22px!important;
}
:is(body.kids-guide-page,body:has([data-kids-title]),body:has(.list article[data-ages])) :is(.watch,.matcher-link){
  min-height:44px!important;padding:11px 17px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  font-weight:900!important;text-decoration:none!important;
}
:is(body.kids-guide-page,body:has([data-kids-title]),body:has(.list article[data-ages])) .watch{
  border:1px solid #fff3b2!important;background:linear-gradient(135deg,#ffcf72,#ff9fbc)!important;
  color:#28133f!important;box-shadow:0 4px 0 #9b5775,0 10px 24px rgba(10,3,22,.18)!important;
}
:is(body.kids-guide-page,body:has([data-kids-title]),body:has(.list article[data-ages])) .matcher-link{
  border:1px solid rgba(104,228,255,.36)!important;background:rgba(104,228,255,.09)!important;color:#dffbff!important;
}
@media(max-width:640px){
  :is(body.kids-guide-page,body:has([data-kids-title]),body:has(.list article[data-ages]))>header{
    align-items:flex-start!important;flex-direction:column!important;border-radius:22px!important;
  }
  :is(body.kids-guide-page,body:has([data-kids-title]),body:has(.list article[data-ages]))>header nav{width:100%!important}
}
/* MA-KIDS-GUIDE-SYNC:END */

/* MA-PILL-FINAL:START — final cascade guard for owner-requested pill controls. */
html:not(.kids-mode):not([data-kids-mode]) body:not(.page-kids):not(.kids-body) :is(
  .gold-btn,.secondary-btn,.ma-primary,.ma-plan-cta,.credit-pack-btn,.dc-action,.spotlight-ask,.ai-new-chat,
  .composer-send,.tg-btn-gold,.settings-save,.settings-reset,.ma-back-button,.mh-home-btn,.ma-how-button,
  .ma-menu-button,.social-btn,.awareness-cta,.tg-entry,.top-ai-launch,.top-ask-go,.install-btn,.reg-join,.reg-home,
  .matchapp-notification-button,.ma-kids-mode-entry,.nav-avatar-link
){border-radius:999px!important}
html body.page-home #mh-topbox.app-header.ma-home-header nav.ma-header-actions :is(
  button,a.mh-home-btn,a.ma-kids-mode-entry,a.nav-avatar-link
){border-radius:999px!important}
html body.page-shell header.app-header.mh-topbox nav.mh-deck :is(
  button,a.mh-home-btn,a.ma-back-button,a.nav-avatar-link,a.icon-btn
){border-radius:999px!important}
:where(body.page-kids,body.kids-body,html.kids-mode body,html[data-kids-mode] body) :is(
  .kids-primary,.kids-secondary,.kids-pill,.kids-tool,.kids-wallet-buy,.kids-quest-choice,.kids-watch,
  .kids-voice-toggle,.kids-fx-toggle,.kids-quest-reveal,
  .kids-result-actions button,.kids-result-sharing button,.kids-social-grid button,#kids-share-confirm,
  .kids-dialog-actions button,.kids-gate button,.kids-timeup button,.kids-time-settings button
){border-radius:999px!important}
/* Artwork/card buttons are deliberately excluded so posters keep their natural card shape. */
/* MA-PILL-FINAL:END */



/* Canonical Kids brand: Kids never reuses the adult wordmark artwork. */
.kids-mode .kids-brand-copy .kids-wordmark,
html[data-kids-mode] .kids-brand-copy .kids-wordmark,
.kids-guide-page .kids-wordmark{
  display:inline-flex!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  aspect-ratio:auto!important;
  align-items:center;
  color:#fff4b8!important;
  font:900 clamp(1.05rem,3.4vw,1.55rem)/1.05 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  letter-spacing:.01em!important;
  text-shadow:0 2px 0 #6f3d8f,0 0 14px #83e7ff66!important;
  white-space:nowrap;
}

/* Owner-approved 2026-10-13 mark: one source on every adult brand surface. */
html body:not(.page-kids):not(.kids-body) .matchapp-brand-link:not(:has(.ma-brand-orb,.ma-brand-orb-stage))::before {
 content:""!important;position:relative!important;inset:auto!important;flex:0 0 48px!important;width:48px!important;height:48px!important;
 background: url('/assets/brand/matchapp-icon-approved.png?v=20261013-approved1') center 47% / 165% auto no-repeat!important;
 border-radius:12px!important;filter:none!important;transform:none!important;animation:none!important;opacity:1!important;z-index:auto!important;
}
html body:not(.page-kids):not(.kids-body) .matchapp-brand-link>img:not(.matchapp-wordmark):not(.ma-brand-orb):not([src*='/kids/']){display:none!important}
html body:not(.page-kids):not(.kids-body) .ma-brand-orb-stage {overflow:hidden!important;border-radius:16px!important}
html body:not(.page-kids):not(.kids-body) .ma-brand-orb {content:normal!important;object-fit:cover!important;object-position:center 47%!important;border-radius:12px!important;clip-path:none!important}
html body.page-home header#mh-topbox#mh-topbox#mh-topbox#mh-topbox .ma-brand-orb {transform:scale(1.65)!important}
html body:not(.page-kids):not(.kids-body) .hub-brand img {object-fit:cover;object-position:center 47%;border-radius:12px}

/* MATCHAPP PERIMETER FINISH | 2026-10-14
 * One architectural frame, shared by adult destinations, Android WebView and
 * Kids. CSS-only: fixed to the viewport, no hit testing, scrolling or JS.
 * The verification file intentionally has no product styling.
 * Protected advertising inventory is NOT selected here. */
html {
  --ma-screen-frame-width:3px;
  --ma-screen-frame-gold:#e1bb70;
  --ma-internal-stroke:1px;
}
html::after {
  content:"";
  position:fixed;
  inset:0;
  box-sizing:border-box;
  z-index:2147483646;
  pointer-events:none!important;
  border:var(--ma-screen-frame-width) solid var(--ma-screen-frame-gold);
  border-radius:clamp(3px,.5vw,7px);
  box-shadow:
    inset 0 0 0 1px rgba(255,236,188,.36),
    inset 0 0 12px rgba(210,157,69,.075);
  background:transparent;
  opacity:1;
  transform:none;
  animation:none!important;
  transition:none!important;
}
@media (min-width:700px) {
  html { --ma-screen-frame-width:4px; }
}
@media (forced-colors:active) {
  html::after {border-color:CanvasText;box-shadow:none}
}
@media print {
  html::after {display:none}
}
/* Interior frames are deliberately lighter than the perimeter. These known
 * UI surfaces are separate from AdSense and AdMob placements. Keep source
 * colors, elevations, radii and all functional geometry unchanged. */
html body:not(.page-kids):not(.kids-body) :is(
  #mh-topbox.app-header,
  #trending-rail,
  #questionnaire-box,
  #result-box,
  #loading-box,
  .ma-luxe-shortcut,
  .hub-header,
  .explore-card,
  .hub-links a,
  .page-panel,
  .hub-action
) {
  border-width:var(--ma-internal-stroke)!important;
}
/* Kids retains its existing cheerful colors while keeping its card edges
 * lighter than the outer perimeter. Do not touch Kids matching or controls. */
html.kids-mode body.page-kids :is(
 .kids-card,.kids-panel,.kids-feature,.kids-source-card
) {border-width:2px!important}

/* PERMANENT DISPLAY INVARIANT: The viewport's gold frame is the final normal
 * paint layer. No page component, card, video, Jonas panel, animation or ad may
 * visually paint over this perimeter. Never lower the frame's stacking level.
 * UI remains inside its inner edge; the frame never consumes pointer events. */
html::after {
 z-index:2147483647!important;
 pointer-events:none!important;
}
/* Real modal top-layer content can appear above normal paint layers. Constrain
 * native dialogs to leave an uninterrupted perimeter; do not restyle ads. */
html dialog:modal {
 box-sizing:border-box;
 max-inline-size:calc(100vw - 2 * var(--ma-screen-frame-width));
 max-block-size:calc(100dvh - 2 * var(--ma-screen-frame-width));
}

/* A native <dialog>.showModal() belongs to the top layer. Its backdrop must
   not tint/occlude the four edges while the modal content is active. */
html dialog:modal::backdrop {
 clip-path:inset(var(--ma-screen-frame-width))!important;
}

/* Jonas stays completely inside the gold frame while moving. A touch release
 * against any edge eases his original (single) bubble inward, never past it. */
html body #ma-jonas-home.is-floating.ma-jonas-rebound:not(.is-chat-stage) {
 transition:left .24s cubic-bezier(.22,1.35,.44,1),top .24s cubic-bezier(.22,1.35,.44,1)!important;
}
@media(prefers-reduced-motion:reduce){
 html body #ma-jonas-home.is-floating.ma-jonas-rebound:not(.is-chat-stage){
  transition:none!important;
 }
}

/* Full-screen chats occupy the space INSIDE the gold perimeter, not underneath
 * it. The actual visible viewport follows keyboard resizing via existing
 * --ja-view-* values; no extra viewport listener or duplicate chat is added. */
html body #ma-jonas-home#ma-jonas-home.is-chat-stage,
html body #ma-ambient-panel#ma-ambient-panel:not([hidden]){
 box-sizing:border-box!important;
 position:fixed!important;
 left:calc(var(--ja-view-left,0px) + var(--ma-screen-frame-width))!important;
 top:calc(var(--ja-view-top,0px) + var(--ma-screen-frame-width))!important;
 right:auto!important;bottom:auto!important;
 width:calc(var(--ja-view-width,100vw) - 2 * var(--ma-screen-frame-width))!important;
 height:calc(var(--ja-view-height,100dvh) - 2 * var(--ma-screen-frame-width))!important;
 max-width:none!important;max-height:none!important;
 overflow:hidden!important;
}

/* Permanent asset containment: discard the approved image's opaque outer
 * canvas, preserving the actual rounded violet/gold mark and source pixels.
 * Specificity covers native/header overrides without changing box geometry. */
html body:not(.page-kids):not(.kids-body) :is(
 .ma-brand-orb,.auth-brand-orb,.hub-brand img[src*="matchapp-icon-approved"],
 img.brand-logo[src*="matchapp-icon-approved"]
) {
 -webkit-mask-image:url('/assets/brand/matchapp-icon-approved-mask.svg?v=20261014-1')!important;
 mask-image:url('/assets/brand/matchapp-icon-approved-mask.svg?v=20261014-1')!important;
 -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
 -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
 background:transparent!important;
}

/* Brand links are wordmark lockups, not filled button cards. Keep generic
 * depth/button gradients from introducing a rectangular matte behind them. */
@layer ma-depth {
 html body .ma-brand-home-link.ma-brand-home-link {
  background:transparent!important;box-shadow:none!important;
 }
}
html body:not(.page-kids):not(.kids-body) .matchapp-brand-link:not(:has(.ma-brand-orb,.ma-brand-orb-stage))::before {
 -webkit-mask-image:url('/assets/brand/matchapp-icon-approved-mask.svg?v=20261014-1')!important;
 mask-image:url('/assets/brand/matchapp-icon-approved-mask.svg?v=20261014-1')!important;
 -webkit-mask-size:165% auto!important;mask-size:165% auto!important;
 -webkit-mask-position:center 47%!important;mask-position:center 47%!important;
 -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
}