: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 infinite 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); } }

/* 🤖 TOP ASK BOX — the zero-effort shortcut.
   A real input, not a link styled like one: it posts straight to
   discover.html?q=, so it's tap → type → answer with no intermediate page.
   Kept deliberately compact and centred so it reads as an invitation rather
   than a form to fill in. */
.top-ask-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px;
                padding: 0 12px; margin-bottom: 12px; }
.top-ask { display: flex; align-items: center; gap: 9px; width: 100%; max-width: 520px;
           background: linear-gradient(100deg, rgba(216,156,72,0.42), rgba(30,20,55,0.72), rgba(216,156,72,0.42));
           background-size: 220% 100%;
           border: 1px solid rgba(229,193,88,0.5); border-radius: 999px;
           padding: 6px 6px 6px 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.45);
           animation: askGlow 6s ease-in-out infinite; transition: border-color 0.25s, box-shadow 0.25s; }
.top-ask:focus-within { border-color: var(--gold); box-shadow: 0 4px 24px rgba(229,193,88,0.3); animation: none; }
.top-ask-icon { font-size: 15px; flex-shrink: 0; line-height: 1; }
/* 16px on the input is deliberate and must not be reduced: anything smaller
   makes iOS Safari auto-zoom the whole page the moment it's focused, which
   for a box this prominent would feel like the page broke. */
.top-ask input { flex: 1; min-width: 0; background: none; border: none; outline: none;
                 color: #fff; font-family: inherit; font-size: 16px; padding: 8px 0; }
.top-ask input::placeholder { color: #a99cc4; font-size: 13.5px; }
.top-ask-go { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none;
              background: linear-gradient(135deg, #FFD700, #FFA500); color: #14131A;
              font-size: 16px; font-weight: 900; cursor: pointer; line-height: 1;
              display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.top-ask-go:hover { transform: scale(1.08); }
.top-ask-alt { color: #a99cc4; font-size: 11.5px; text-decoration: none; font-weight: 600;
               letter-spacing: 0.2px; transition: color 0.2s; }
.top-ask-alt:hover { color: var(--gold-glow); }
/* Slow gold sweep — enough to draw the eye once, not enough to nag. */
@keyframes askGlow {
    0%, 100% { background-position: 0% 50%; box-shadow: 0 4px 18px rgba(0,0,0,0.45); }
    50%      { background-position: 100% 50%; box-shadow: 0 4px 22px rgba(168,108,36,0.39); }
}
@media (prefers-reduced-motion: reduce) { .top-ask { animation: none; } }
@media (max-width: 480px) {
    .top-ask { padding: 5px 5px 5px 13px; gap: 7px; }
    .top-ask input::placeholder { font-size: 12.5px; }
    .top-ask-go { width: 31px; height: 31px; font-size: 15px; }
    .top-ask-alt { font-size: 11px; }
}

/* 📲 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; }
}