@import url("/adult-page-compact.css?v=20260929-1&fastart=20261020-1");
:root {
    /* ===== BRAND PALETTE — sampled directly from the MatchApp logo ===== */
    /* Logo charcoal backdrop, royal purple orb, polished gold ring + play mark */
    --ink:          #0A0A0A;   /* deepest charcoal (logo backdrop) */
    --ink-2:        #181818;   /* logo card charcoal               */
    --royal-deep:   #130734;   /* darkest purple in the orb        */
    --royal:        #402562;   /* core royal purple                */
    --royal-lift:   #6B3FA0;   /* raised purple for gradients      */
    --royal-glow:   #A376B6;   /* light purple highlight           */
    --gold:         #E5C158;   /* logo gold                        */
    --gold-deep:    #B8912F;   /* gold shadow side                 */
    --gold-glow:    #FFF3A3;   /* brightest gold specular          */

    /* ===== SEMANTIC LAYER — derived from the actual logo =====
       Sampled from the logo directly: 83% near-black field, 8.7% gold,
       and ZERO purple or cyan pixels. An earlier pass moved decorative
       surfaces to purple to fix "too much gold", which was the right
       diagnosis and the wrong cure — purple is not in this brand at all.

       The real fix is that the logo's gold is not one colour. It runs a
       five-stop range from deep bronze in the shadowed strokes up to a
       near-white specular on the star. That range IS the hierarchy: quiet
       structural work sits at the bronze end, primary actions at the bright
       end. Same hue family throughout, so nothing looks imported, but an
       edge and a CTA are no longer the same value competing for attention. */

    /* Gold tonal scale, sampled pixel values from the logo. */
    --gold-bronze:  #A86C24;   /* deepest shadowed stroke  */
    --gold-dim:     #C0843C;   /* mid shadow               */
    --gold-mid:     #D89C48;   /* body of the mark         */
    --gold-core:    #E4C06C;   /* the brand gold           */
    --gold-bright:  #F0D878;   /* specular highlight       */

    /* Near-black field, also sampled. Warm-neutral, not blue-black. */
    --space-0:      #080808;   /* deepest                  */
    --space-1:      #101010;   /* page field               */
    --space-2:      #181818;   /* raised surface           */
    --space-3:      #1F1E1C;   /* card                     */

    /* Structure — bronze end of the scale. Present, not shouting. */
    --edge:         rgba(168, 108, 36, 0.34);   /* default card/input border */
    --edge-strong:  rgba(216, 156, 72, 0.52);   /* hover / focus-within      */
    --edge-subtle:  rgba(255, 255, 255, 0.07);  /* dividers                  */

    /* Reserved: primary actions, VIP, the brand mark. Bright end. */
    --accent:       var(--gold-core);
    --accent-edge:  rgba(240, 216, 120, 0.62);
    --accent-soft:  rgba(228, 192, 108, 0.13);

    /* Interactive default — mid scale, below a CTA but above an edge. */
    --brand:        var(--gold-mid);
    --brand-edge:   rgba(216, 156, 72, 0.45);
    --brand-soft:   rgba(216, 156, 72, 0.15);

    /* Motion scale. One set of durations so timings stop being ad hoc. */
    --t-micro: 160ms;   /* taps, hovers, toggles       */
    --t-base:  240ms;   /* reveals, expands            */
    --t-slow:  420ms;   /* section transitions         */
    --ease:    cubic-bezier(0.22, 1, 0.36, 1);

    --bg-dark: #101010; --bg-card: rgba(31, 30, 28, 0.90);
    /* Was gold at 38% opacity, which is what put a gold outline on every
       card, input and panel on the page. Purple-tinted by default now. */
    --border: var(--edge);
    --text-main: #FFFFFF; --text-muted: #B3AEC4;
    --netflix-red: #E50914; --prime-blue: #00A8E1; --max-purple: #9A5CFF; --disney-blue: #113CCF;
    --spotify-green: #1DB954; --globoplay-orange: #FF5A00;
}
/* ===== TYPOGRAPHY =====
   Two families, each doing the job it was designed for.

   --font-display (Outfit): headings and buttons. Geometric with softened
   terminals, which is what makes it read as warm rather than corporate.
   --font-body (Inter): everything read in quantity. Designed for screen UI,
   with the open apertures and tall x-height that keep 15px legible on a
   phone at arm's length.

   The old stack was "Segoe UI, Roboto, Helvetica, Arial" — a different font
   on every OS, none of them chosen, and Arial as the floor. That is the
   source of the harshness: Arial and Helvetica have closed apertures and a
   small x-height, so at small sizes on a near-black field the counters fill
   in and the eye works harder than it should.

   Sizes use clamp() so they scale with the viewport instead of jumping at
   breakpoints. Line heights are deliberately generous — 1.65 on body copy
   rather than the 1.4 that looks tight in a mockup and reads badly at
   length, especially in light-on-dark where glyphs bloom slightly. */
:root {
    --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
    --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

    /* --font-scale is set by the accessibility slider in Profile > Settings
       (see settings.js). Multiplying the clamp result rather than swapping
       the sizes keeps every ratio intact: headings stay proportionally
       larger than body at any scale, and the fluid vw term still works.
       Default 1 means an untouched install renders exactly as before. */
    --font-scale: 1;

    --fs-hero:  calc(clamp(30px, 6vw,   52px)   * var(--font-scale));
    --fs-h1:    calc(clamp(26px, 4.6vw, 40px)   * var(--font-scale));
    --fs-h2:    calc(clamp(20px, 3vw,   27px)   * var(--font-scale));
    --fs-h3:    calc(clamp(17px, 2.2vw, 20px)   * var(--font-scale));
    --fs-body:  calc(clamp(15px, 1.7vw, 16.5px) * var(--font-scale));
    --fs-small: calc(clamp(13px, 1.4vw, 14px)   * var(--font-scale));
    --fs-micro: calc(12px * var(--font-scale));

    --lh-tight: 1.18;   /* display only — long lines at this height are unreadable */
    --lh-snug:  1.4;
    --lh-body:  1.65;

    /* Large display text needs negative tracking or it looks loose; small
       text needs slightly positive or it looks cramped. */
    --ls-display: -0.02em;
    --ls-body:     0;
    --ls-caps:     0.06em;
}

body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
       letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

h1, h2, h3, h4, h5,
.gold-btn, .install-btn, .share-cta, .seo-cta, .w2w-cta, .crit-toggle-label {
    font-family: var(--font-display); letter-spacing: var(--ls-display);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 800; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug);  font-weight: 700; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug);  font-weight: 700; }
p  { line-height: var(--lh-body); }

/* Uppercase labels need tracking or the caps collide. */
.seo-footer-sub, .crit-toggle-label, .w2w-kind { letter-spacing: var(--ls-caps); }



@media (prefers-reduced-motion: reduce) {
    :root { --t-micro: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}

* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; margin: 0; padding: 0; }
body { font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-dark); color: var(--text-main); min-height: 100vh; padding: 50px 12px 30px 12px; }

body.ad-free-mode .ad-placement, body.ad-free-mode .sidebar-ad { display: none !important; }

/* 🕒 CLOCK */
.real-time-clock { position: fixed; top: 10px; right: 12px; background: rgba(26, 21, 38, 0.9); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 20px; padding: 6px 14px; font-size: 11px; color: var(--gold-glow); font-weight: 700; z-index: 10000; backdrop-filter: blur(15px); box-shadow: 0 4px 20px rgba(0,0,0,0.8); }

/* 🌍 BACKGROUND */
.luxury-bg { position: fixed; inset: 0; background: radial-gradient(circle at 18% 28%, rgba(216,156,72,0.45), transparent 58%), radial-gradient(circle at 82% 72%, rgba(64, 37, 98, 0.68), transparent 60%), radial-gradient(circle at 50% 108%, rgba(168,108,36,0.30), transparent 55%), linear-gradient(160deg, #14131A 0%, #1A1526 55%, #14131A 100%); z-index: -2; pointer-events: none; }
.floating-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.65; animation: float 10s 2 alternate cubic-bezier(0.4, 0, 0.2, 1); }
.orb-1 { width: 300px; height: 300px; background: rgba(168,108,36,0.39); top: 5%; left: -10%; }
.orb-2 { width: 350px; height: 350px; background: rgba(216,156,72,0.38); bottom: -10%; right: -10%; animation-delay: -5s; }
@keyframes float { 0% { transform: translateY(0px) scale(1); } 100% { transform: translateY(50px) scale(1.15); } }

/* 🎬 STREAMING FLAGS */
.stream-flags { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0.8; }
.sf-item { position: absolute; font-family: "Arial Black", sans-serif; font-size: clamp(32px, 5vw, 60px); font-weight: 900; white-space: nowrap; opacity: 0; letter-spacing: 4px; }
.brand-netflix { color: var(--netflix-red); text-shadow: 0 0 25px var(--netflix-red); }
.brand-prime { color: var(--prime-blue); text-shadow: 0 0 25px var(--prime-blue); }
.brand-max { color: var(--max-purple); text-shadow: 0 0 25px var(--max-purple); }
.brand-disney { color: var(--disney-blue); text-shadow: 0 0 25px var(--disney-blue); }
@keyframes flyPath1 { 0% { transform: translateY(110vh) translateX(-10vw) rotate(-20deg) scale(0.7); opacity: 0; } 10% { opacity: 0.5; } 80% { opacity: 0.5; } 100% { transform: translateY(-20vh) translateX(30vw) rotate(20deg) scale(1.3); opacity: 0; } }
@keyframes flyPath2 { 0% { transform: translateY(110vh) translateX(10vw) rotate(20deg) scale(0.7); opacity: 0; } 10% { opacity: 0.5; } 80% { opacity: 0.5; } 100% { transform: translateY(-20vh) translateX(-30vw) rotate(-20deg) scale(1.3); opacity: 0; } }

/* 🚀 DUAL AD LAYOUT ENGINE */
.page-wrapper { display: flex; justify-content: center; align-items: flex-start; gap: 20px; width: 100%; max-width: 1200px; margin: 0 auto; position: relative; }
.container { flex: 1; width: 100%; max-width: 720px; position: relative; z-index: 1; }

.sidebar-ad { display: none; width: 160px; min-width: 160px; height: 600px; position: sticky; top: 60px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 10px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); overflow: hidden; }
@media (min-width: 1100px) { .sidebar-ad { display: block; } }

.ad-label { font-size: 9px; color: #888; display: block; margin-bottom: 5px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; text-align: center; }
.ad-placement { background: rgba(0,0,0,0.4); border-radius: 16px; padding: 12px; margin: 15px 0; width: 100%; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }

/* 💎 HEADER & UI */
.chrome-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: linear-gradient(135deg, rgba(17,60,207,0.9), rgba(43,90,245,0.95)); border: 1px solid rgba(255,255,255,0.25); border-radius: 20px; padding: 10px 16px; margin-bottom: 20px; backdrop-filter: blur(15px); }
.chrome-text { font-size: 13px; color: #fff; font-weight: 600; flex: 1; }
.chrome-btn { background: #fff; color: #113ccf; font-weight: 900; font-size: 12px; padding: 8px 14px; border-radius: 20px; border: none; cursor: pointer; }

.app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; background: rgba(26, 21, 38, 0.9); border: 1px solid var(--border); padding: 16px 20px; border-radius: 24px; backdrop-filter: blur(35px); box-shadow: 0 15px 40px rgba(0,0,0,0.8); flex-wrap: wrap; }
.header-brand-area { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo { height: 52px; width: auto; border-radius: 12px; box-shadow: 0 4px 20px rgba(212,175,55,0.4); }
.brand-text-container { display: flex; flex-direction: column; }
.app-title-main { font-size: clamp(26px, 5vw, 36px); font-weight: 900; margin: 0; line-height: 1; background: linear-gradient(90deg, #FFFFFF, #D4AF37, #FFFFFF, #D4AF37); background-size: 300% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: goldShimmer 3s linear infinite; }
.app-title-sub { font-size: 10px; font-weight: 700; color: #A0A0B5; margin-top: 3px; text-transform: uppercase; letter-spacing: 1px; }
.app-author { font-size: 9px; font-weight: 900; color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; }
@keyframes goldShimmer { to { background-position: 300% center; } }

.info-panel { background: rgba(38, 28, 60, 0.72); border-left: 4px solid var(--gold); border-radius: 16px; padding: 18px 20px; margin-bottom: 20px; backdrop-filter: blur(15px); }
.info-title { color: var(--gold-glow); font-size: 16px; font-weight: 900; margin: 0 0 8px 0; text-transform: uppercase; }
.info-text { color: #ddd; font-size: 13px; line-height: 1.5; margin: 0; }

.premium-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.9); backdrop-filter: blur(30px); padding: 24px 18px; margin-bottom: 20px; position: relative; text-align: center; width: 100%; }

/* 🖼️ MEDIA DISPLAY */
.poster-preview-card { width: 100%; max-height: 380px; background: rgba(0, 0, 0, 0.7); border-radius: 18px; margin-bottom: 18px; display: flex; justify-content: center; align-items: center; padding: 12px; border: 1px solid rgba(212,175,55,0.3); box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
.poster-preview-card img { max-width: 100%; max-height: 350px; object-fit: contain; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.9); }

.platform-badge { display: inline-block; padding: 6px 14px; border-radius: 20px; font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
.video-container { position: relative; width: 100%; padding-top: 56.25%; border-radius: 16px; overflow: hidden; margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.2); }
.video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.spotify-container { width: 100%; margin-bottom: 20px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(29, 185, 84, 0.4); }
.spotify-container iframe { width: 100%; height: 152px; border: none; }

/* ✨ BUTTONS & INPUTS */
.gold-btn { background: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C); color: #000; border: none; padding: 16px; border-radius: 14px; font-weight: 900; font-size: 15px; cursor: pointer; width: 100%; transition: all 0.25s ease; box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4); text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; text-decoration: none; }
.gold-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(212, 175, 55, 0.7); }
.secondary-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 14px; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 13px; transition: all 0.25s ease; width: 100%; }
.secondary-btn:hover:not([disabled]) { background: rgba(255,255,255,0.15); border-color: var(--gold); color: var(--gold-glow); }
.google-btn { background: #ffffff; color: #3c4043; border: 1px solid #dadce0; padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }

.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 15px; }
.input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 14px;}
.input-group { text-align: left; }
label { display: block; font-size: 11px; text-transform: uppercase; color: var(--gold); font-weight: 900; margin-bottom: 6px; }
input, select { background: rgba(0, 0, 0, 0.85); border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 14px; border-radius: 12px; font-size: 15px; width: 100%; box-sizing: border-box; }
input:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 20px rgba(212, 175, 55, 0.4); }

/* MODALS */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 10000; justify-content: center; align-items: center; padding: 15px; backdrop-filter: blur(25px); }
.modal-content { width: 100%; max-width: 480px; text-align: center; position: relative; max-height: 90vh; overflow-y: auto; scrollbar-width: none; }
.modal-content::-webkit-scrollbar { display: none; }
.close-x { position: absolute; top: 12px; right: 16px; font-size: 26px; color: #fff; font-weight: bold; cursor: pointer; z-index: 10; }
.profile-pic-container { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--gold); overflow: hidden; cursor: pointer; display: none; flex-shrink: 0; }
.profile-pic-container img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 600px) {
    body { padding-top: 40px; }
    .action-grid { grid-template-columns: 1fr; gap: 8px; }
    .app-header { padding: 14px 12px; }
}

.fade-in { animation: fadeIn 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }
@keyframes fadeIn { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } }

/* MATCHAPP AI LAUNCH — a single branded action, not a mini form.
   The conversation belongs on /discover.html; the home page only needs a
   confident doorway into it. The Orbit glyph is a MatchApp-owned SVG asset,
   so this control stays visually ours on every platform. */
.top-ask-wrap { display:flex; flex-direction:column; align-items:center; gap:9px; padding:0 12px; margin-bottom:12px; }
.top-ai-launch { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
                 gap:14px; width:min(100%,620px); min-height:76px; box-sizing:border-box; padding:10px 14px 10px 11px;
                 border-radius:24px; text-decoration:none; color:#fff; overflow:hidden;
                 border:1px solid rgba(229,193,88,.64);
                 background:linear-gradient(115deg,rgba(87,43,135,.88),rgba(23,13,48,.96) 46%,rgba(42,25,72,.94));
                 box-shadow:0 12px 34px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06);
                 transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .24s,box-shadow .24s; isolation:isolate; }
.top-ai-launch::before { content:""; position:absolute; inset:-90% -20%; z-index:-1;
                         background:conic-gradient(from 90deg,transparent 0 18%,rgba(229,193,88,.18) 27%,transparent 36% 64%,rgba(163,118,182,.2) 73%,transparent 82%);
                         animation:aiLaunchOrbit 8s linear infinite; }
.top-ai-launch::after { content:""; position:absolute; inset:1px; border-radius:22px; z-index:-1;
                        background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 40% 62%,rgba(229,193,88,.055)); }
.top-ai-launch:hover { transform:translateY(-3px) scale(1.008); border-color:var(--gold);
                       box-shadow:0 18px 42px rgba(0,0,0,.56),0 0 28px rgba(229,193,88,.18); }
.top-ai-launch:focus-visible { outline:3px solid var(--gold-glow); outline-offset:4px; }
.top-ask-icon { width:56px; height:56px; display:grid; place-items:center; border-radius:18px; flex-shrink:0;
                background:rgba(31,14,55,.88); border:1px solid rgba(229,193,88,.42);
                box-shadow:inset 0 0 24px rgba(107,63,160,.2),0 8px 20px rgba(0,0,0,.28),0 0 16px rgba(229,193,88,.12); }
.top-ask-icon img { width:55px; height:55px; display:block; border-radius:50%;
                    filter:drop-shadow(0 0 8px rgba(255,214,86,.72)); }
.top-ai-copy { min-width:0; display:flex; flex-direction:column; gap:3px; text-align:left; }
.top-ai-kicker { color:var(--gold); font-size:10.5px; letter-spacing:1.7px; font-weight:900; text-transform:uppercase; }
.top-ai-title { font-size:clamp(17px,2vw,21px); font-weight:900; line-height:1.1; }
.top-ai-sub { color:#c9bfdc; font-size:12.5px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-ai-arrow { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#17111f;
                background:linear-gradient(135deg,#FFF3A3,#E5C158); font-size:20px; font-weight:900;
                box-shadow:0 0 20px rgba(229,193,88,.22); transition:transform .24s; }
.top-ai-launch:hover .top-ai-arrow { transform:translateX(4px) rotate(-4deg); }
.top-ask-alt { color:#a99cc4; font-size:11.5px; text-decoration:none; font-weight:700; letter-spacing:.2px; transition:color .2s; }
.top-ask-alt:hover { color:var(--gold-glow); }
@keyframes aiLaunchOrbit { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .top-ai-launch::before { animation:none; } .top-ai-launch,.top-ai-arrow { transition:none; } }
@media (max-width:480px) {
    .top-ai-launch { min-height:68px; gap:10px; padding:8px 10px 8px 8px; border-radius:20px; }
    .top-ask-icon { width:50px; height:50px; border-radius:16px; }
    .top-ask-icon img { width:43px; height:43px; }
    .top-ai-sub { font-size:11.5px; }
    .top-ai-arrow { width:34px; height:34px; }
}

/* 📲 INSTALL & 🔊 SOUND TOGGLE — header buttons */

/* Positioning context for the attention bubble. */
.install-wrap { position: relative; display: inline-flex; }

/* Solid gold fill rather than the previous faint 14%-opacity wash. At that
   opacity it read as another disabled-looking utility icon sitting next to the
   sound toggle, which is exactly why nobody noticed it. This is the only
   gold-filled control in the header, so it reads as the one thing to press. */
.install-btn { background: linear-gradient(135deg, #E5C158, #C9A227); border: none; color: #1a1526;
               padding: 9px 16px; border-radius: 12px; font-weight: 800; font-size: 12.5px; cursor: pointer;
               transition: transform .18s, box-shadow .18s; display: none; align-items: center; gap: 7px;
               font-family: inherit; text-decoration: none; white-space: nowrap;
               box-shadow: 0 3px 14px rgba(229,193,88,0.35); }
.install-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(229,193,88,0.5); }
.install-btn:focus-visible { outline: 2px solid var(--gold-glow); outline-offset: 3px; }

/* The arrow-into-tray glyph every app store uses for install/download. An
   emoji was there before, which renders as a different picture on every OS
   (and as a blank box on some TV browsers) and never matched the button's
   weight. An inline SVG inherits currentColor, so it stays legible against
   the gold fill on every platform. */
.install-icon { flex-shrink: 0; transition: transform .18s; }
.install-btn:hover .install-icon { transform: translateY(2px); }

/* ATTENTION BUBBLE — 20 seconds, once per visitor, dismissible.
   Anchored under the button with a pointer arrow so there is no question
   about what it refers to. position:absolute keeps it out of the header's
   flex flow entirely, so showing or hiding it never reflows the nav. */
.install-bubble { position: absolute; top: calc(100% + 12px); right: 0; z-index: 120;
                  width: max-content; max-width: 250px; padding: 12px 34px 12px 14px;
                  background: linear-gradient(145deg, #2A1B4D, #1B1230);
                  border: 1px solid rgba(229,193,88,0.55); border-radius: 13px;
                  box-shadow: 0 14px 36px rgba(0,0,0,0.6);
                  color: #F0E9FF; font-size: 12.8px; line-height: 1.5; text-align: left;
                  animation: bubbleIn .45s cubic-bezier(0.22,1,0.36,1); }
/* The arrow is positioned from --arrow-x, which JS sets to the install
   button's actual horizontal centre. It cannot be hardcoded: the button is
   the FIRST child of a justify-content:flex-end nav, which makes it the
   leftmost item of the right-aligned group — not the rightmost — and its
   exact position shifts with the language switcher's width, whether the
   quota badge is showing, and whether the avatar is signed in. A fixed
   offset pointed at the avatar instead of the button. */
.install-bubble::after { content: ""; position: absolute; top: -7px;
                  left: var(--arrow-x, 50%); margin-left: -6px;
                  width: 12px; height: 12px; background: #2A1B4D;
                  border-left: 1px solid rgba(229,193,88,0.55);
                  border-top: 1px solid rgba(229,193,88,0.55);
                  transform: rotate(45deg); }
.install-bubble-x { position: absolute; top: 5px; right: 7px; width: 24px; height: 24px;
                  background: none; border: none; color: #9d95b0; font-size: 20px; line-height: 1;
                  cursor: pointer; border-radius: 6px; padding: 0; font-family: inherit; }
.install-bubble-x:hover { color: #fff; background: rgba(255,255,255,0.1); }
.install-bubble-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.install-bubble.is-leaving { animation: bubbleOut .3s ease-in forwards; }

@keyframes bubbleIn  { from { opacity: 0; transform: translateY(-8px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes bubbleOut { to   { opacity: 0; transform: translateY(-6px) scale(0.96); } }

/* A gentle pulse draws the eye to the button itself while the bubble is up,
   then stops — a permanently animating header control is just noise. */
.install-btn.is-hinting { animation: installPulse 2.1s ease-in-out infinite; }
@keyframes installPulse {
    0%, 100% { box-shadow: 0 3px 14px rgba(229,193,88,0.35); }
    50%      { box-shadow: 0 3px 22px rgba(229,193,88,0.75); }
}

@media (prefers-reduced-motion: reduce) {
    .install-bubble, .install-bubble.is-leaving { animation: none; }
    .install-btn.is-hinting { animation: none; }
    .install-btn { transition: none; }
    .install-btn:hover { transform: none; }
    .install-icon { transition: none; }
    .install-btn:hover .install-icon { transform: none; }
}

/* NARROW SCREENS — the bubble cannot be anchored to the button here.
   html/body carries overflow-x:hidden, and the install button sits hard
   against the right edge of a sticky header, so an absolutely-positioned
   bubble hanging off it gets clipped by the viewport — which is exactly the
   "only half shows" symptom. Switching to position:fixed takes it out of the
   header's coordinate space entirely and pins it to the viewport with equal
   margins, so it is always fully visible regardless of where the button is.
   The arrow is repositioned to keep pointing at the button's corner. */
@media (max-width: 560px) {
    .install-bubble {
        position: fixed;
        top: auto;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
        font-size: 13px;
        padding: 13px 38px 13px 15px;
    }
}

/* ===== AVATAR ===== */
.nav-avatar-link { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
                   color: var(--gold-glow); font-weight: bold; font-size: 13.5px;
                   background: rgba(168,108,36,0.29); border: 1px solid rgba(229,193,88,0.45);
                   padding: 5px 14px 5px 5px; border-radius: 999px; transition: 0.2s; }
.nav-avatar-link:hover { background: rgba(168,108,36,0.39); border-color: var(--gold); }
.avatar-ring { position: relative; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
               display: inline-flex; align-items: center; justify-content: center; overflow: visible;
               background: rgba(0,0,0,0.45); border: 1.5px solid var(--gold); }
.avatar-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar-empty { display: flex; align-items: center; justify-content: center;
                width: 100%; height: 100%; border-radius: 50%; color: rgba(229,193,88,0.75); }
/* Online dot — only rendered while actually signed in, so it never claims a
   presence that isn't real. */
.avatar-online-dot { position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px;
                     border-radius: 50%; background: #25D366; border: 2px solid var(--ink);
                     box-shadow: 0 0 6px rgba(37,211,102,0.7); }
@media (max-width: 480px) {
    .nav-avatar-link { padding: 4px; gap: 0; }
    .nav-avatar-link #nav-profile-text { display: none; }
}

/* ===== SHARED ICON BUTTON =====
   One circular shape for every icon-only control in the header, so Home,
   sound and anything added later line up exactly instead of each carrying
   its own padding and font-size. The old Home button was a text+emoji pill
   with different padding on every page (8px here, 11px there, 12px on
   profile) sitting among round icon buttons — which is why it looked out of
   place. The house is a drawn SVG rather than 🏠 for the same reason the mic
   icon is: emoji render as whatever glyph the device ships, so they can't be
   colour-matched to the brand and look different on every OS. */
.icon-btn { display: inline-flex; align-items: center; justify-content: center;
            width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; padding: 0;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22);
            color: #ddd; cursor: pointer; text-decoration: none; transition: 0.2s; }
.icon-btn:hover { border-color: var(--gold); color: var(--gold-glow);
                  background: rgba(168,108,36,0.29); transform: translateY(-1px); }
.home-btn { color: var(--gold-glow); border-color: rgba(229,193,88,0.42); }

.sound-toggle-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22); color: #ddd;
                    width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 15px;
                    display: inline-flex; align-items: center; justify-content: center; transition: 0.2s;
                    flex-shrink: 0; padding: 0; }
.sound-toggle-btn:hover { border-color: var(--gold); color: var(--gold-glow); }
@media (max-width: 480px) {
    .install-btn span.install-label { display: none; } /* icon-only on very small screens */
}


/* ===== USER PREFERENCE OVERRIDES (Profile > Settings) ===== */

/* A user-level reduce-motion switch. The OS-level @media query already
   exists; this adds an in-app equivalent for people whose device setting is
   on for everything else but who still want MatchApp calm — or the reverse,
   someone on a shared machine who cannot change system settings. */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* Denser result cards for people who would rather see more at once than
   have things breathe. Spacing only — nothing is hidden. */
html.compact-cards .premium-card { padding: 16px 14px; margin-bottom: 12px; }
html.compact-cards .seo-item,
html.compact-cards .discover-card { padding: 11px 13px; }
html.compact-cards .marquee-wrapper { padding: 10px 0; }

/* ===== SETTINGS PANEL (Profile) ===== */
.settings-summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer;
    list-style: none; padding: 4px 0; font-family: var(--font-display); font-weight: 700;
    font-size: var(--fs-h3); color: var(--gold-core); }
.settings-summary::-webkit-details-marker { display: none; }
.settings-chevron { transition: transform var(--t-base) var(--ease); color: #8f8877; font-size: 18px; }
details[open] .settings-chevron { transform: rotate(180deg); }
.settings-body { padding-top: 18px; text-align: left; }

.settings-group { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--gold-mid);
    margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--edge-subtle); }
.settings-group:first-child { margin-top: 0; }

.setting-row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.setting-row > label { flex: 0 0 auto; min-width: 116px; font-size: var(--fs-small);
    font-weight: 600; color: #ddd6c4; }
.setting-control { flex: 1; min-width: 150px; display: flex; align-items: center; gap: 10px; }
.setting-value { flex: 0 0 auto; min-width: 48px; text-align: right; font-variant-numeric: tabular-nums;
    font-size: var(--fs-small); font-weight: 700; color: var(--gold-core); }
.setting-note { margin: 0 0 16px 0; font-size: var(--fs-micro); color: #8f8877; line-height: 1.55; }

/* Range inputs need explicit cross-browser styling or they render as the
   OS default, which on a dark field is often a near-invisible grey. */
.setting-control input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none;
    height: 5px; border-radius: 999px; background: rgba(255,255,255,0.14); outline: none; }
.setting-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
    background: linear-gradient(135deg, #E4C06C, #C0843C); border: 2px solid #101010;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.setting-control input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%;
    cursor: pointer; background: linear-gradient(135deg, #E4C06C, #C0843C); border: 2px solid #101010; }
.setting-control input[type="range"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* The A/A size hints deliberately ignore --font-scale: they are a fixed
   reference for what the slider does, so they must not grow with it. */
.scale-hint { color: #8f8877; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.scale-hint-lg { font-size: 21px; }

.setting-row-toggle { justify-content: space-between; margin-bottom: 6px; }
.setting-switch { -webkit-appearance: none; appearance: none; width: 46px; height: 26px; flex-shrink: 0;
    border-radius: 999px; background: rgba(255,255,255,0.16); position: relative; cursor: pointer;
    transition: background var(--t-micro); border: none; }
.setting-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: #fff; transition: transform var(--t-micro) var(--ease); }
.setting-switch:checked { background: linear-gradient(135deg, #E4C06C, #C0843C); }
.setting-switch:checked::after { transform: translateX(20px); }
.setting-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.setting-select { flex: 1; min-width: 160px; padding: 11px 13px; border-radius: 11px;
    background: rgba(0,0,0,0.45); border: 1px solid var(--edge); color: #fff;
    font-family: inherit; font-size: var(--fs-small); }
.setting-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.settings-test, .settings-reset { width: auto !important; margin-top: 12px; padding: 11px 20px !important;
    font-size: var(--fs-small) !important; }
.settings-reset { margin-top: 26px; opacity: 0.75; }

@media (max-width: 480px) {
    .setting-row > label { min-width: 0; flex: 1 1 100%; margin-bottom: 2px; }
    .setting-control { min-width: 0; }
}

/* ===== REMOVE-FROM-LIST BUTTON =====
   Sits on the poster-cell, not inside the <a>, so tapping it can never open
   the streaming link by accident — nesting a button inside an anchor is also
   invalid HTML and behaves unpredictably across browsers.

   Always visible rather than hover-only: hover does not exist on touch, and
   these grids are used mostly on phones. */
.poster-cell { position: relative; }

.poster-del {
    position: absolute; top: 7px; right: 7px; z-index: 4;
    width: 30px; height: 30px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px; cursor: pointer;
    background: rgba(12, 6, 6, 0.82);
    border: 1px solid rgba(239, 68, 68, 0.55);
    color: #EF4444;
    backdrop-filter: blur(4px);
    transition: background var(--t-micro), border-color var(--t-micro),
                color var(--t-micro), transform var(--t-micro);
}
.poster-del:hover { background: #EF4444; border-color: #EF4444; color: #fff; transform: scale(1.08); }
.poster-del:active { transform: scale(0.94); }
.poster-del:focus-visible { outline: 2px solid #EF4444; outline-offset: 2px; }

/* The platform badge also sits top-right; shift it clear of the button. */
.poster-card > div[style*="top:8px"][style*="right:8px"] { right: 44px !important; }

/* Removal animation. The cell collapses rather than just fading, so the grid
   closes the gap smoothly instead of leaving a hole until the repaint. */
.poster-cell.is-removing {
    animation: posterRemove 220ms var(--ease) forwards;
    pointer-events: none;
}
@keyframes posterRemove {
    to { opacity: 0; transform: scale(0.9); }
}

@media (max-width: 480px) {
    /* Bigger tap target on touch, where precision is lower. */
    .poster-del { width: 32px; height: 32px; top: 6px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .poster-del { transition: none; }
    .poster-del:hover, .poster-del:active { transform: none; }
    .poster-cell.is-removing { animation-duration: 1ms; }
}

/* ===== ACTIVITY LOG ===== */
.activity-toolbar { display: flex; gap: 10px; margin: 14px 0 14px; flex-wrap: wrap; align-items: center; }
.activity-toolbar .setting-select { flex: 1; min-width: 150px; }
.activity-clear { width: auto !important; padding: 10px 16px !important; font-size: var(--fs-micro) !important; opacity: 0.8; }
.activity-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--edge-strong) transparent; }
.activity-row { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.035); border: 1px solid var(--edge-subtle); }
.activity-icon { flex-shrink: 0; font-size: 15px; width: 22px; text-align: center; }
.activity-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.activity-label { font-size: var(--fs-micro); font-weight: 700; color: var(--gold-mid);
    text-transform: uppercase; letter-spacing: 0.5px; }
.activity-detail { font-size: var(--fs-small); color: #ddd6c4; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.activity-time { flex-shrink: 0; font-size: var(--fs-micro); color: #8f8877; font-variant-numeric: tabular-nums; }
.activity-del { flex-shrink: 0; width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px;
    background: none; color: #6f6960; font-size: 18px; line-height: 1; cursor: pointer;
    transition: color var(--t-micro), background var(--t-micro); }
.activity-del:hover { color: #EF4444; background: rgba(239,68,68,0.12); }
.activity-del:focus-visible { outline: 2px solid #EF4444; outline-offset: 1px; }
.activity-empty { color: #8f8877; font-size: var(--fs-small); font-style: italic; padding: 18px 0; text-align: center; }
.settings-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; align-items: center; }
.settings-save { width: auto !important; padding: 13px 24px !important; font-size: var(--fs-small) !important; }
@media (max-width: 480px) {
    .settings-actions { flex-direction: column; align-items: stretch; }
    .settings-save, .settings-reset { width: 100% !important; }
    .activity-detail { white-space: normal; }
}

/* ===== INSTALL PROGRESS BAR =====
   Sits under the header logo, where an app store puts it and where the user
   is already looking after pressing Install. Hidden until there is genuine
   progress to report — an always-present empty bar is noise. */
.install-progress {
    display: none;
    width: 100%; max-width: 260px;
    margin: 6px auto 0;
    padding: 0 2px;
}
.install-progress.is-active { display: block; animation: ipFade .25s ease-out; }
@keyframes ipFade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.install-progress-track {
    height: 4px; border-radius: 999px; overflow: hidden;
    background: rgba(255,255,255,.12);
}
.install-progress-fill {
    height: 100%; width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #C0843C, #E4C06C, #F0D878);
    /* Eased rather than linear: the bar decelerates as it approaches its
       ceiling, so a slow install reads as "still working" instead of frozen. */
    transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.install-progress-label {
    display: block; margin-top: 4px;
    font-size: 11px; font-weight: 600; text-align: center;
    color: var(--gold-core, #E4C06C); letter-spacing: .2px;
}

/* Settled state: the button stops being a call to action and becomes a
   status. Green because that is the near-universal "done" signal, but the
   label changes too — colour is never the only cue. */
.install-btn.is-installed {
    background: linear-gradient(135deg, #22C55E, #16A34A) !important;
    box-shadow: 0 3px 14px rgba(34,197,94,.32) !important;
    cursor: default;
    opacity: 1 !important;
}
.install-btn.is-installed:hover { transform: none; }
.install-btn.is-installed .install-icon { display: none; }
.install-btn.is-installed::before {
    content: '✓';
    font-weight: 900; font-size: 14px; line-height: 1;
    margin-right: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .install-progress.is-active { animation: none; }
    .install-progress-fill { transition: none; }
}

/* 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-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 */