:root {
    /* ===== BRAND PALETTE — sampled directly from the MatchApp logo ===== */
    /* Logo charcoal backdrop, royal purple orb, polished gold ring + play mark */
    --ink:          #14131A;   /* deepest charcoal (logo backdrop) */
    --ink-2:        #1A191F;   /* 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          */

    --bg-dark: #14131A; --bg-card: rgba(26, 25, 31, 0.88);
    --border: rgba(229, 193, 88, 0.38);
    --text-main: #FFFFFF; --text-muted: #B3AEC4;
    --netflix-red: #E50914; --prime-blue: #00A8E1; --max-purple: #9A5CFF; --disney-blue: #113CCF;
    --spotify-green: #1DB954; --globoplay-orange: #FF5A00;
}

* { 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(107, 63, 160, 0.55), transparent 58%), radial-gradient(circle at 82% 72%, rgba(64, 37, 98, 0.68), transparent 60%), radial-gradient(circle at 50% 108%, rgba(229, 193, 88, 0.13), 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(229, 193, 88, 0.22); top: 5%; left: -10%; }
.orb-2 { width: 350px; height: 350px; background: rgba(107, 63, 160, 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(107,63,160,0.42), rgba(30,20,55,0.72), rgba(107,63,160,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(229,193,88,0.22); }
}
@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); }
.install-bubble::after { content: ""; position: absolute; top: -7px; right: 26px;
                  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;
    }
    .install-bubble::after { right: 30px; }
}

/* ===== 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(229,193,88,0.12); 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(229,193,88,0.22); 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(229,193,88,0.12); 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 */
}