/* =====================================================================
   MasterQol / Master AI — Design & Motion layer (v2)
   Loaded after the base styles. It only refines visuals and motion;
   layout, IDs and behaviour of the original page stay untouched.
   ===================================================================== */

@property --mq-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --mq-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mq-gold-grad: linear-gradient(135deg, #fff4b8 0%, #f3d06a 30%, #d4af37 58%, #a77d1a 100%);
  --mq-gold-text: linear-gradient(100deg, #fff7d1 0%, #f6d77a 22%, #d4af37 45%, #fff2b3 62%, #c99a24 82%, #fff7d1 100%);
  --mq-ease-out: cubic-bezier(.16, 1, .3, 1);
  --mq-ease-spring: cubic-bezier(.34, 1.45, .64, 1);
  --mq-radius: 16px;
  --mq-hairline: rgba(255, 255, 255, .07);
  --mq-glass: rgba(13, 20, 36, .62);
  --mq-shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, .75), 0 8px 24px -12px rgba(0, 0, 0, .5);
  --mq-glow-gold: 0 0 0 1px rgba(212, 175, 55, .35), 0 10px 36px -8px rgba(212, 175, 55, .35);
}

/* ---------- Typography & base ---------- */
* { font-family: var(--mq-font); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: -.005em; }
::selection { background: rgba(212, 175, 55, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--gold, #d4af37); outline-offset: 3px; }
button:focus:not(:focus-visible) { outline: none; }

* { scrollbar-width: thin; scrollbar-color: rgba(212, 175, 55, .45) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(243, 208, 106, .55), rgba(167, 125, 26, .55)); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(212, 175, 55, .8); }

/* ---------- Scroll progress ---------- */
#mq-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2147483000; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #a77d1a, #f3d06a, #fff4b8); box-shadow: 0 0 10px rgba(243, 208, 106, .7); transition: opacity .3s ease; }

/* ---------- Loader ---------- */
#auth-loader { background: radial-gradient(ellipse at 50% 40%, #13213b 0%, #070d19 55%, #03060c 100%); }
#auth-loader .loader-ball { position: relative; animation: mqBall 1.6s var(--mq-ease-out) infinite; }
#auth-loader .loader-ball::after { content: ""; position: absolute; left: 50%; bottom: -22px; width: 54px; height: 10px; margin-left: -27px; border-radius: 50%; background: radial-gradient(closest-side, rgba(212, 175, 55, .55), transparent); animation: mqBallShadow 1.6s var(--mq-ease-out) infinite; }
#auth-loader::before { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; margin-top: -40px; border: 2px solid transparent; border-top-color: #f3d06a; border-right-color: rgba(212, 175, 55, .35); animation: mqSpin 1.1s linear infinite; filter: drop-shadow(0 0 8px rgba(243, 208, 106, .6)); }
#auth-loader h2 { background: var(--mq-gold-text); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: mqShimmerText 2.4s linear infinite; letter-spacing: 3px !important; margin-top: 18px; }

/* ---------- Landing ---------- */
/* The landing is its own scroll container, so the sticky header and progress bar follow it. */
#landing-page { background: #050a14; isolation: isolate; height: 100vh; height: 100dvh; overscroll-behavior: contain; }
#landing-page::before { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 18% 22%, rgba(212, 175, 55, .20), transparent 70%),
    radial-gradient(34% 30% at 82% 18%, rgba(124, 58, 237, .20), transparent 70%),
    radial-gradient(40% 36% at 70% 82%, rgba(14, 165, 233, .14), transparent 70%),
    radial-gradient(30% 26% at 25% 85%, rgba(16, 185, 129, .10), transparent 70%);
  filter: blur(10px); animation: mqAurora 26s ease-in-out infinite alternate; }
#landing-page::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); }

.landing-header { position: sticky; top: 0; z-index: 20; background: rgba(5, 10, 20, .55); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid rgba(212, 175, 55, .14); transition: background .35s ease, box-shadow .35s ease, padding .35s var(--mq-ease-out); animation: mqDrop .8s var(--mq-ease-out) backwards; }
#landing-page.mq-scrolled .landing-header { background: rgba(5, 10, 20, .82); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .8); }
.landing-logo, .sidebar .logo { background: var(--mq-gold-text); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: mqShimmerText 7s linear infinite; text-shadow: none; }
.landing-logo::before, .logo::before { -webkit-text-fill-color: initial; display: inline-block; animation: mqRoll 9s var(--mq-ease-out) infinite; }

.hero-section { position: relative; padding-top: 80px; padding-bottom: 70px; }
.hero-text > * { animation: mqRise .95s var(--mq-ease-out) backwards; }
.hero-text > *:nth-child(1) { animation-delay: .08s; }
.hero-text > *:nth-child(2) { animation-delay: .2s; }
.hero-text > *:nth-child(3) { animation-delay: .32s; }
.hero-text h1 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; background: var(--mq-gold-text); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: mqRise .95s var(--mq-ease-out) .08s backwards, mqShimmerText 9s linear 1s infinite; }
.hero-text p { font-size: 17px; color: #b9c4d6; max-width: 520px; }
.hero-card-preview { position: relative; border: 1px solid transparent; border-radius: 20px; padding: 32px;
  background: linear-gradient(160deg, rgba(17, 26, 46, .92), rgba(9, 14, 27, .92)) padding-box,
              conic-gradient(from var(--mq-angle), rgba(212, 175, 55, .12) 0%, rgba(255, 236, 160, .95) 12%, rgba(212, 175, 55, .12) 26%, rgba(124, 58, 237, .55) 52%, rgba(212, 175, 55, .12) 70%) border-box;
  box-shadow: var(--mq-shadow-lg), 0 0 60px -20px rgba(212, 175, 55, .35);
  animation: mqRise 1s var(--mq-ease-out) .4s backwards, mqAngle 7s linear infinite;
  transform: perspective(1000px) rotateX(var(--mq-rx, 0deg)) rotateY(var(--mq-ry, 0deg)); transition: transform .5s var(--mq-ease-out), box-shadow .4s ease; will-change: transform; }
.hero-card-preview:hover { transform: perspective(1000px) rotateX(var(--mq-rx, 0deg)) rotateY(var(--mq-ry, 0deg)) translateY(-4px); box-shadow: var(--mq-shadow-lg), 0 0 80px -16px rgba(212, 175, 55, .5); }
.hero-card-preview::before { content: "● LIVE"; position: absolute; top: -12px; right: 22px; padding: 4px 11px; border-radius: 99px; font: 800 10px/1.4 var(--mq-font); letter-spacing: 1.4px; color: #062c1f; background: linear-gradient(90deg, #34d399, #a7f3d0); box-shadow: 0 6px 18px -6px rgba(52, 211, 153, .8); animation: mqLivePulse 2.2s ease-in-out infinite; }
.preview-stat { align-items: center; transition: transform .35s var(--mq-ease-out); }
.preview-stat:hover { transform: translateX(4px); }
.preview-stat strong { font-variant-numeric: tabular-nums; font-size: 22px !important; letter-spacing: -.01em; }

.features-grid { gap: 22px; }
.feature-box { position: relative; overflow: hidden; text-align: left; padding: 28px; border-radius: var(--mq-radius); background: linear-gradient(160deg, rgba(20, 30, 52, .72), rgba(10, 16, 30, .72)); border: 1px solid var(--mq-hairline); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .45s var(--mq-ease-out), box-shadow .45s ease, border-color .3s ease; }
.feature-box::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(380px circle at var(--mx, -400px) var(--my, -400px), rgba(212, 175, 55, .14), transparent 45%); transition: opacity .3s ease; }
.feature-box::after { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 2px; background: var(--mq-gold-grad); transform: scaleX(.18); transform-origin: left; transition: transform .6s var(--mq-ease-out); border-radius: 2px; }
.feature-box:hover { transform: translateY(-6px); border-color: rgba(212, 175, 55, .32); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .8), 0 0 32px -10px rgba(212, 175, 55, .25); }
.feature-box:hover::after { transform: scaleX(1); }
.feature-box h3 { font-size: 19px; letter-spacing: -.01em; }
.info-detail-section { border-radius: 20px; border: 1px solid rgba(212, 175, 55, .16); margin-top: 10px; }
.info-detail-section.active { animation: mqRise .7s var(--mq-ease-out) backwards; }
.landing-footer { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45)); }
.footer-18-badge { border-radius: 8px; box-shadow: 0 6px 16px -6px rgba(220, 38, 38, .8); }

/* ---------- Buttons ---------- */
.btn-primary, .landing-nav-btn, .auth-submit, .spin-btn, .contest-primary-btn, .dh-unlock-btn {
  position: relative; overflow: hidden; isolation: isolate; background: var(--mq-gold-grad); background-size: 140% 140%; color: #1b1405;
  box-shadow: 0 10px 26px -10px rgba(212, 175, 55, .75), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(120, 85, 10, .35);
  transition: transform .35s var(--mq-ease-spring), box-shadow .35s ease, background-position .6s ease; }
.btn-primary::after, .landing-nav-btn::after, .auth-submit::after, .spin-btn:not(:disabled)::after, .contest-primary-btn::after, .dh-unlock-btn::after, .btn-buy::after, .right-panel .btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); transition: left .75s var(--mq-ease-out); }
.btn-primary:hover::after, .landing-nav-btn:hover::after, .auth-submit:hover::after, .spin-btn:not(:disabled):hover::after, .contest-primary-btn:hover::after, .dh-unlock-btn:hover::after, .btn-buy:hover::after, .right-panel .btn:hover::after { left: 120%; }
.btn-primary:hover, .landing-nav-btn:hover, .auth-submit:hover { transform: translateY(-3px); background-position: 100% 50%; box-shadow: 0 18px 34px -12px rgba(212, 175, 55, .85), inset 0 1px 0 rgba(255, 255, 255, .6); opacity: 1; }
.btn-primary:active, .landing-nav-btn:active, .auth-submit:active, .btn-secondary:active, .landing-outline-btn:active { transform: translateY(1px) scale(.98); transition-duration: .1s; }
.btn-primary { padding: 16px 32px; border-radius: 12px; font-weight: 800; letter-spacing: .2px; }
.btn-secondary, .landing-outline-btn { border-radius: 12px; border: 1px solid rgba(212, 175, 55, .55); background: rgba(212, 175, 55, .05); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .35s var(--mq-ease-spring), background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.btn-secondary:hover, .landing-outline-btn:hover { border-color: #f3d06a; background: rgba(212, 175, 55, .12); box-shadow: 0 10px 28px -12px rgba(212, 175, 55, .5); }
.landing-nav-btn, .landing-outline-btn { border-radius: 11px; }
.btn-buy { position: relative; overflow: hidden; border-radius: 8px; transition: transform .3s var(--mq-ease-spring), box-shadow .3s ease, opacity .2s; }
.btn-buy:hover { transform: translateY(-2px); opacity: 1; box-shadow: 0 10px 22px -10px rgba(14, 165, 233, .8); }
.right-panel .btn { position: relative; overflow: hidden; border-radius: 12px; }

/* ---------- Modals & dialogs ---------- */
.auth-modal, .modal-overlay, .popup-overlay, .custom-alert-overlay, .terms-overlay, .contest-modal.open { animation: mqFade .3s ease backwards; background: rgba(2, 5, 12, .72); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
.auth-box { border-radius: 22px; border: 1px solid rgba(212, 175, 55, .45); background: linear-gradient(165deg, rgba(18, 27, 47, .97), rgba(8, 13, 25, .98)); box-shadow: var(--mq-shadow-lg), 0 0 70px -24px rgba(212, 175, 55, .45); animation: mqPop .55s var(--mq-ease-spring) backwards; }
.auth-box { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.auth-box:hover { transform: none; box-shadow: var(--mq-shadow-lg), 0 0 70px -24px rgba(212, 175, 55, .45); }
.auth-box h2 { font-size: 26px; background: var(--mq-gold-text); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: mqShimmerText 6s linear infinite; }
.auth-input, .input-box, .search-input-wrap input { border-radius: 11px; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.auth-input:focus, .input-box:focus { border-color: rgba(243, 208, 106, .8); box-shadow: 0 0 0 4px rgba(212, 175, 55, .14); background: #0d1628; }
.modal-content { border-radius: 20px; border: 1px solid rgba(212, 175, 55, .18); box-shadow: var(--mq-shadow-lg); animation: mqModalIn .55s var(--mq-ease-out) backwards; }
.custom-alert-card, .popup-card, .terms-box { border-radius: 20px; box-shadow: var(--mq-shadow-lg); animation: mqPop .5s var(--mq-ease-spring) backwards; transform: none; }
.custom-alert-card .icon { animation: mqBounceIn .7s var(--mq-ease-spring) .1s backwards; }
.close-btn { border-radius: 10px; transition: transform .3s var(--mq-ease-spring), background .2s, border-color .2s; }
.close-btn:hover { transform: rotate(90deg); }

/* Analysis modal content cascade */
#analysisModal .ai-box, #analysisModal .master-ai-advice-box { animation: mqRise .6s var(--mq-ease-out) backwards; }
#analysisModal .pred-item, #analysisModal .percent-card { animation: mqRise .6s var(--mq-ease-out) backwards; }
#analysisModal .pred-item:nth-child(2), #analysisModal .percent-card:nth-child(2) { animation-delay: .06s; }
#analysisModal .pred-item:nth-child(3), #analysisModal .percent-card:nth-child(3) { animation-delay: .12s; }
#analysisModal .pred-item:nth-child(4), #analysisModal .percent-card:nth-child(4) { animation-delay: .18s; }
#analysisModal .pred-item:nth-child(n+5), #analysisModal .percent-card:nth-child(n+5) { animation-delay: .24s; }
.bar-fill { animation: mqBarGrow 1.1s var(--mq-ease-out) .25s backwards; }
.score-pred-box { border-radius: 14px; }

/* ---------- App shell ---------- */
.sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--sidebar-bg) 92%, #d4af37 8%) 0%, var(--sidebar-bg) 38%); }
.menu-item { position: relative; border-radius: 12px; transition: background .3s ease, color .25s ease, transform .4s var(--mq-ease-out), box-shadow .3s ease; }
.menu-item::after { content: ""; position: absolute; left: -1px; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--mq-gold-grad); box-shadow: 0 0 12px rgba(243, 208, 106, .8); transform: scaleY(0); transition: transform .45s var(--mq-ease-spring); }
.menu-item.active::after { transform: scaleY(1); }
.menu-item.active { border-left-color: transparent !important; }
.main-content { background-image: radial-gradient(60% 40% at 100% 0%, rgba(212, 175, 55, .06), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(14, 165, 233, .05), transparent 70%); background-attachment: local; }
.page-title { letter-spacing: -.01em; }
.marquee-wrapper { border-radius: 14px; background: linear-gradient(90deg, var(--search-bg), color-mix(in srgb, var(--search-bg) 88%, #d4af37 12%)); border: 1px solid rgba(212, 175, 55, .16); }
.search-container { border-radius: 14px; transition: border-color .3s ease, box-shadow .3s ease; }
.search-container:focus-within { border-color: rgba(212, 175, 55, .55); box-shadow: 0 0 0 4px rgba(212, 175, 55, .1); }

.tab-content.active-tab { animation: mqTabIn .55s var(--mq-ease-out) backwards; }

.card { border-radius: var(--mq-radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); transition: transform .45s var(--mq-ease-out), box-shadow .45s ease, border-color .3s ease; }
.card:hover { border-color: rgba(212, 175, 55, .22); }

/* Match cards: staggered entrance + cursor spotlight */
.match-card { border-radius: 14px; animation: mqRise .6s var(--mq-ease-out) backwards; transition: transform .4s var(--mq-ease-out), border-color .3s ease, box-shadow .4s ease, background-color .3s ease; }
.match-card:nth-child(1) { animation-delay: .02s; } .match-card:nth-child(2) { animation-delay: .06s; } .match-card:nth-child(3) { animation-delay: .1s; }
.match-card:nth-child(4) { animation-delay: .14s; } .match-card:nth-child(5) { animation-delay: .18s; } .match-card:nth-child(6) { animation-delay: .22s; }
.match-card:nth-child(7) { animation-delay: .26s; } .match-card:nth-child(8) { animation-delay: .3s; } .match-card:nth-child(n+9) { animation-delay: .34s; }
/* Only the first screenful animates in; the other ~200 cards appear instantly (no wasted work). */
.match-card:not(.featured-team-card):nth-child(n+13) { animation: none; }
.main-content .match-card:not(.featured-team-card) { background-image: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), rgba(212, 175, 55, .09), transparent 42%); }
.match-card:not(.featured-team-card):hover { transform: translateY(-2px); border-color: rgba(212, 175, 55, .3); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8); }
.time { position: relative; font-variant-numeric: tabular-nums; border-radius: 99px; }
.btn-analyze { position: relative; overflow: hidden; border-radius: 10px; font-weight: 700; isolation: isolate; transition: color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s var(--mq-ease-spring); }
.btn-analyze::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0284c7, #38bdf8); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--mq-ease-out); }
.btn-analyze:hover { color: #fff; box-shadow: 0 10px 24px -10px rgba(14, 165, 233, .85); background: transparent; }
.btn-analyze:hover::before { transform: scaleX(1); }
.team-logo-img { transition: transform .4s var(--mq-ease-spring), filter .3s ease; }

/* Pricing / VIP */
.pricing-card { border-radius: 20px; }
.vip-emsal-card, .dh-match-card { border-radius: 18px; }
.badge { border-radius: 10px; }

/* Floating actions get a softer entrance */
.wheel-float-btn { animation: mqBounceIn .9s var(--mq-ease-spring) 1.2s backwards, pulseBtn 2.4s ease-in-out 2.1s infinite; }
.contest-fab { animation: mqRise .8s var(--mq-ease-out) 1.4s backwards; transition: transform .35s var(--mq-ease-spring), box-shadow .3s ease; }
.contest-fab:hover { transform: translateY(-3px); }

/* ---------- Reveal on scroll (classes added by mq-motion.js) ---------- */
.mq-reveal { opacity: 0; translate: 0 26px; transition: opacity .8s var(--mq-ease-out), translate .8s var(--mq-ease-out); transition-delay: var(--mq-delay, 0s); }
.mq-reveal.mq-in { opacity: 1; translate: 0 0; }

/* ---------- Light mode ---------- */
body.light-mode #landing-page { background: #f6f4ee; }
body.light-mode #landing-page::before { opacity: .55; }
body.light-mode #landing-page::after { opacity: .9; background-image: linear-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .035) 1px, transparent 1px); }
body.light-mode .landing-header { background: rgba(255, 255, 255, .7); border-bottom-color: rgba(153, 116, 4, .2); }
body.light-mode #landing-page.mq-scrolled .landing-header { background: rgba(255, 255, 255, .9); box-shadow: 0 10px 26px -18px rgba(60, 45, 10, .45); }
body.light-mode .hero-text h1, body.light-mode .landing-logo, body.light-mode .sidebar .logo, body.light-mode .auth-box h2 { background-image: linear-gradient(100deg, #7a5a00 0%, #b8890f 30%, #d4af37 50%, #8c6700 75%, #7a5a00 100%); }
body.light-mode .hero-text p { color: #3b3f4a !important; }
body.light-mode .hero-card-preview { background: linear-gradient(160deg, #ffffff, #fbf8ef) padding-box, conic-gradient(from var(--mq-angle), rgba(212, 175, 55, .2) 0%, rgba(184, 137, 15, .95) 12%, rgba(212, 175, 55, .2) 26%, rgba(124, 58, 237, .4) 52%, rgba(212, 175, 55, .2) 70%) border-box; box-shadow: 0 24px 50px -24px rgba(60, 45, 10, .35); }
body.light-mode .feature-box { background: rgba(255, 255, 255, .85); }
body.light-mode .auth-input:focus, body.light-mode .input-box:focus { background: #fff; }
body.light-mode .main-content { background-image: radial-gradient(60% 40% at 100% 0%, rgba(212, 175, 55, .08), transparent 70%); }
body.light-mode .marquee-wrapper { background: #fff; }
body.light-mode .sidebar { background: #fff; }

/* ---------- Keyframes ---------- */
@keyframes mqRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes mqDrop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes mqFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mqPop { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mqModalIn { from { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mqTabIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mqBounceIn { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes mqBarGrow { from { clip-path: inset(0 100% 0 0 round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
@keyframes mqShimmerText { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }
@keyframes mqAurora { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(3%, -2%, 0) rotate(6deg) scale(1.08); } 100% { transform: translate3d(-3%, 2%, 0) rotate(-5deg) scale(1.02); } }
@keyframes mqAngle { to { --mq-angle: 360deg; } }
@keyframes mqSpin { to { transform: rotate(360deg); } }
@keyframes mqRoll { 0%, 70% { transform: rotate(0deg); } 85% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } }
@keyframes mqLivePulse { 0%, 100% { box-shadow: 0 6px 18px -6px rgba(52, 211, 153, .8), 0 0 0 0 rgba(52, 211, 153, .5); } 50% { box-shadow: 0 6px 18px -6px rgba(52, 211, 153, .8), 0 0 0 8px rgba(52, 211, 153, 0); } }
@keyframes mqBall { 0%, 100% { transform: translateY(0) rotate(0deg); } 45% { transform: translateY(-34px) rotate(200deg); } 55% { transform: translateY(-34px) rotate(220deg); } }
@keyframes mqBallShadow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.55); opacity: .35; } }

/* Touch scrolling fix: on phones <body> becomes a (non-scrolling) scroll container because of
   overflow-x:hidden. The original "overscroll-behavior-y: contain" on <body> then stopped every
   swipe from chaining to the page, so the bulletin and all sections could not be scrolled.
   Only the root element may set overscroll behaviour (this still blocks pull-to-refresh). */
html body, html body:not(.admin-host), body.mq-android-scroll-fix { overscroll-behavior: auto !important; overscroll-behavior-y: auto !important; }
html, html.mq-android-scroll-fix { overscroll-behavior-y: none !important; }

/* iOS Safari touch scrolling: the mobile CSS sets overflow-x:hidden on <html> and <body>, which
   turns <body> into a nested scroll container (overflow-y computes to auto). iOS then refuses to
   scroll the page with a finger. "clip" hides horizontal overflow without creating a scroll
   container, so the page scrolls on the root as Safari expects. Android keeps its own fix. */
@media (max-width: 900px), (hover: none) {
  html:not(.mq-android-scroll-fix), html:not(.mq-android-scroll-fix) body { overflow-x: clip !important; overflow-y: visible !important; height: auto !important; }
  @supports not (overflow: clip) {
    html:not(.mq-android-scroll-fix) { overflow-x: hidden !important; overflow-y: visible !important; }
    html:not(.mq-android-scroll-fix) body { overflow: visible !important; }
  }
}

/* Phones: the "orbiting light" on featured cards animates offset-distance, which Chrome on Android
   recalculates on the main thread every frame (measured: ~40 fps -> ~70 fps and an idle CPU once
   removed). Keep the gold/purple featured border, drop the moving dots and pulsing shadows. */
@media (max-width: 900px), (hover: none) {
  .match-card.featured-team-card::before, .match-card.featured-team-card::after,
  #analysisModal.featured-analysis-active .modal-content::after,
  #analysisModal.featured-analysis-active .pred-item::after,
  #analysisModal.featured-analysis-active .percent-card::after,
  #analysisModal.featured-analysis-active .score-pred-box::after { animation: none !important; display: none !important; }
  .match-card.featured-team-card { animation: none !important; box-shadow: inset 0 0 0 1px rgba(255, 222, 111, .14), 0 0 14px rgba(168, 85, 247, .22) !important; }
  .contest-podium-card, .contest-reward-card, #contest-rewards { animation: none !important; }
  .match-card { content-visibility: auto; contain-intrinsic-size: auto 150px; }
  /* Same nested-scroll-container fix as iOS for Android's scroll helper class. */
  /* :not(#mq-x) raises specificity above the page's own later android-fix rules. */
  html.mq-android-scroll-fix:not(#mq-x), html.mq-android-scroll-fix:not(#mq-x) body, body.mq-android-scroll-fix:not(#mq-x) { overflow-x: clip !important; overflow-y: visible !important; height: auto !important; }
  @supports not (overflow: clip) {
    html.mq-android-scroll-fix:not(#mq-x) { overflow-x: hidden !important; overflow-y: auto !important; }
    body.mq-android-scroll-fix:not(#mq-x) { overflow: visible !important; }
  }
}

/* ---------- Featured match analysis: one elegant animated frame instead of scattered dots ---------- */
#analysisModal.featured-analysis-active .modal-content::after,
#analysisModal.featured-analysis-active .pred-item::after,
#analysisModal.featured-analysis-active .percent-card::after,
#analysisModal.featured-analysis-active .score-pred-box::after { content: none !important; display: none !important; animation: none !important; }
#analysisModal.featured-analysis-active .modal-content {
  border: 1.5px solid transparent;
  background:
    linear-gradient(160deg, #130f24, #0b1221 55%, #15101e) padding-box,
    conic-gradient(from var(--mq-angle), rgba(212, 175, 55, .25) 0%, #fff0b0 10%, rgba(212, 175, 55, .25) 22%, rgba(168, 85, 247, .85) 50%, rgba(212, 175, 55, .25) 72%) border-box;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .85), 0 0 60px -18px rgba(168, 85, 247, .55), 0 0 40px -20px rgba(212, 175, 55, .5);
  animation: mqModalIn .55s var(--mq-ease-out) backwards, mqAngle 9s linear infinite;
}
#analysisModal.featured-analysis-active .modal-header { background: linear-gradient(100deg, rgba(48, 24, 80, .9), rgba(15, 18, 34, .92) 60%, rgba(60, 44, 14, .6)); border-bottom: 1px solid rgba(212, 175, 55, .25); }
#analysisModal.featured-analysis-active .modal-header h3 { background: var(--mq-gold-text); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; animation: mqShimmerText 8s linear infinite; }
#analysisModal.featured-analysis-active .ai-box { border: 1px solid rgba(190, 140, 255, .28); border-radius: 18px; background: linear-gradient(160deg, rgba(40, 24, 66, .55), rgba(12, 18, 34, .9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -24px rgba(0, 0, 0, .8); }
#analysisModal.featured-analysis-active .score-pred-box { border: 1px solid rgba(243, 208, 106, .7); border-radius: 16px; background: linear-gradient(160deg, rgba(92, 64, 18, .45), rgba(22, 18, 36, .95)); box-shadow: 0 0 0 4px rgba(212, 175, 55, .06), 0 12px 30px -14px rgba(212, 175, 55, .45); }
#analysisModal.featured-analysis-active .pred-item,
#analysisModal.featured-analysis-active .percent-card {
  position: relative; overflow: hidden; border: 1px solid rgba(190, 140, 255, .3); border-radius: 14px;
  background: linear-gradient(165deg, rgba(42, 28, 66, .75), rgba(13, 19, 36, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px -16px rgba(0, 0, 0, .9);
  transition: transform .35s var(--mq-ease-out), border-color .3s ease, box-shadow .3s ease;
}
#analysisModal.featured-analysis-active .pred-item::before,
#analysisModal.featured-analysis-active .percent-card::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(243, 208, 106, .9), transparent); opacity: .55; transition: opacity .3s ease, left .4s var(--mq-ease-out), right .4s var(--mq-ease-out); pointer-events: none; }
#analysisModal.featured-analysis-active .pred-item:hover,
#analysisModal.featured-analysis-active .percent-card:hover { transform: translateY(-3px); border-color: rgba(243, 208, 106, .6); box-shadow: 0 16px 30px -16px rgba(168, 85, 247, .55), 0 0 0 1px rgba(243, 208, 106, .15); }
#analysisModal.featured-analysis-active .pred-item:hover::before,
#analysisModal.featured-analysis-active .percent-card:hover::before { opacity: 1; left: 6%; right: 6%; }
#analysisModal.featured-analysis-active .pred-btn:not(.c-empty) { border-radius: 10px; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .22); }
/* Markets without a prediction: a quiet dash instead of a dark empty block (all matches). */
#analysisModal .pred-btn.c-empty { position: relative; min-height: 42px; border: 1px dashed rgba(255, 255, 255, .12) !important; background: rgba(255, 255, 255, .02) !important; }
#analysisModal .pred-btn.c-empty::after { content: "--"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(226, 232, 240, .45); font-weight: 700; letter-spacing: 2px; }
@media (max-width: 900px), (hover: none) {
  #analysisModal.featured-analysis-active .modal-content { animation: mqModalIn .55s var(--mq-ease-out) backwards; }
  #analysisModal.featured-analysis-active .modal-header h3 { animation: none; }
}

/* ---------- Mobile drawer brand: ⚽ + gold serif "Master" + "AI" badge ---------- */
.mobile-drawer-heading .mq-secret-mobile-logo { display: inline-flex; align-items: center; gap: 9px; min-width: 0; line-height: 1; }
.mq-logo-ball { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; font-size: 22px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 244, 184, .28), rgba(212, 175, 55, .1) 55%, transparent 72%);
  box-shadow: 0 0 0 1px rgba(243, 208, 106, .45), 0 0 16px rgba(212, 175, 55, .35); animation: mqRoll 9s var(--mq-ease-out) 1s 1 backwards; }
.mq-logo-word { font: 800 25px/1 Georgia, "Times New Roman", serif; letter-spacing: .4px;
  background: linear-gradient(100deg, #fff6c9 0%, #f6d77a 30%, #d4af37 58%, #fff2b3 80%, #c99a24 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(212, 175, 55, .35)); }
.mq-logo-ai { display: inline-flex; align-items: center; padding: 5px 8px 4px; border-radius: 8px; font: 900 12px/1 var(--mq-font); letter-spacing: 1.6px; color: #1b1405;
  background: linear-gradient(135deg, #fff1a6 0%, #e6bf4f 45%, #b98cff 100%); box-shadow: 0 4px 14px -4px rgba(168, 85, 247, .7), inset 0 1px 0 rgba(255, 255, 255, .6); transform: translateY(-1px); }
/* Same brand on desktop: sidebar logo and landing header (replaces the old single-gradient text). */
.landing-logo.mq-brand, .sidebar .logo.mq-brand { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: none; -webkit-text-fill-color: initial; animation: none; text-shadow: none; line-height: 1; }
.landing-logo.mq-brand::before, .sidebar .logo.mq-brand::before { content: none; display: none; }
.sidebar .logo.mq-brand { display: flex; margin-bottom: 10px; }
.landing-logo.mq-brand .mq-logo-ball { width: 46px; height: 46px; flex-basis: 46px; font-size: 27px; }
.landing-logo.mq-brand .mq-logo-word { font-size: 32px; }
.landing-logo.mq-brand .mq-logo-ai { font-size: 14px; padding: 6px 9px 5px; }
.sidebar .logo.mq-brand .mq-logo-ball { width: 40px; height: 40px; flex-basis: 40px; font-size: 23px; }
.sidebar .logo.mq-brand .mq-logo-word { font-size: 27px; }
.mq-brand:hover .mq-logo-ball { transform: rotate(-25deg) scale(1.06); transition: transform .5s var(--mq-ease-spring); }
@media (max-width: 600px) {
  .landing-logo.mq-brand .mq-logo-ball { width: 36px; height: 36px; flex-basis: 36px; font-size: 21px; }
  .landing-logo.mq-brand .mq-logo-word { font-size: 24px; }
  .landing-logo.mq-brand .mq-logo-ai { font-size: 11px; padding: 4px 7px 3px; }
}
body.light-mode .mq-logo-word { background-image: linear-gradient(100deg, #7a5a00 0%, #b8890f 40%, #8c6700 100%); filter: none; }
body.light-mode .mq-logo-ball { box-shadow: 0 0 0 1px rgba(153, 116, 4, .45), 0 0 12px rgba(212, 175, 55, .25); }

/* A closed Poz-Qazan drawer is only translated off-screen; never let it catch touches. */
#mqScratchPanel[aria-hidden="true"] { visibility: hidden; pointer-events: none; transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s; }
#mqScratchPanel[aria-hidden="false"] { visibility: visible; pointer-events: auto; }

/* ---------- Phones & touch devices: keep the look, drop the GPU-heavy continuous effects ---------- */
@media (max-width: 900px), (hover: none) {
  /* iOS Safari can stop touch scrolling when a position:fixed layer lives inside the
     scrolling landing container, so phones get a plain painted background instead. */
  #landing-page::before, #landing-page::after { content: none; display: none; }
  #landing-page { background: radial-gradient(70% 40% at 15% 0%, rgba(212, 175, 55, .16), transparent 70%), radial-gradient(60% 40% at 100% 20%, rgba(124, 58, 237, .16), transparent 70%), #050a14; isolation: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  body.light-mode #landing-page { background: #f6f4ee; }
  .main-content { background-image: none; }
  .hero-card-preview { animation: mqRise 1s var(--mq-ease-out) .4s backwards; transform: none; will-change: auto; }
  .landing-logo, .sidebar .logo, .hero-text h1, .auth-box h2, #auth-loader h2 { animation-iteration-count: 1; }
  .hero-text h1 { animation: mqRise .95s var(--mq-ease-out) .08s backwards; }
  .landing-logo::before, .logo::before { animation: none; }
  .landing-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 10, 20, .94); }
  body.light-mode .landing-header { background: rgba(255, 255, 255, .96); }
  .feature-box, .btn-secondary, .landing-outline-btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .auth-modal, .modal-overlay, .popup-overlay, .custom-alert-overlay, .terms-overlay, .contest-modal.open { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(2, 5, 12, .86); }
  .modal-content { animation-name: mqPop; }
  .match-card:not(.featured-team-card):nth-child(n+7) { animation: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  .hero-section { padding-top: 34px; padding-bottom: 30px; }
  .hero-card-preview { padding: 24px 20px; }
  .landing-header { position: sticky; }
  #landing-page::after { background-size: 40px 40px; }
  .feature-box { padding: 22px; }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .mq-reveal { opacity: 1; translate: none; }
  #landing-page::before { animation: none; }
}

/* =====================================================================
   LIGHT MODE POLISH — only body.light-mode; dark mode is untouched.
   ===================================================================== */
/* Brand: never paint the gold gradient on the whole logo box. */
body.light-mode .landing-logo.mq-brand, body.light-mode .sidebar .logo.mq-brand { background: none !important; -webkit-text-fill-color: initial !important; }
body.light-mode .mq-logo-ai { color: #2a1a00; }

/* Readable text that was tuned for dark backgrounds. */
body.light-mode .marquee-content { color: #334155 !important; }
body.light-mode .marquee-wrapper { border-color: rgba(153, 116, 4, .22); box-shadow: 0 4px 14px -10px rgba(60, 45, 10, .35); }
body.light-mode .theme-toggle-box { color: #475569; border-color: #e2e8f0; }
body.light-mode .theme-toggle-box span { color: #475569 !important; }
body.light-mode .logout { color: #64748b; }
body.light-mode .logout:hover { color: #dc2626; }
body.light-mode .lang span { color: #0369a1; }
body.light-mode .search-container { border: 1px solid #e7e1cf; box-shadow: 0 4px 14px -10px rgba(60, 45, 10, .3); }
body.light-mode .page-title-container { border-bottom-color: #ece6d6; }

/* Gold buttons: dark text on gold (white text was unreadable). */
body.light-mode .btn-primary, body.light-mode .landing-nav-btn, body.light-mode .auth-submit, body.light-mode .contest-primary-btn, body.light-mode .dh-unlock-btn { color: #1b1405 !important; }
body.light-mode .btn-secondary, body.light-mode .landing-outline-btn { color: #8a6500; border-color: rgba(153, 116, 4, .55); background: #fffdf6; }

/* "Günün oyunları" heading. */
body.light-mode .featured-matches-heading { color: #6b4e00 !important; background: linear-gradient(100deg, #f4ebff 0%, #ffffff 45%, #fff3d6 100%) !important; border: 1px solid rgba(212, 175, 55, .55) !important; box-shadow: 0 6px 18px -12px rgba(124, 58, 237, .45) !important; }

/* Featured (well-known clubs) match cards: bright premium card instead of muddy dark glass. */
body.light-mode .match-card.featured-team-card {
  background: linear-gradient(112deg, #faf5ff 0%, #ffffff 46%, #fffaf0 100%) !important;
  border: 1px solid rgba(168, 85, 247, .38) !important;
  box-shadow: 0 10px 24px -14px rgba(124, 58, 237, .45), inset 0 0 0 1px rgba(212, 175, 55, .2) !important;
}
body.light-mode .match-card.featured-team-card:hover { border-color: rgba(184, 137, 15, .75) !important; box-shadow: 0 14px 30px -14px rgba(124, 58, 237, .5), inset 0 0 0 1px rgba(212, 175, 55, .35) !important; }
body.light-mode .featured-team-card .team-home-col, body.light-mode .featured-team-card .team-away-col,
body.light-mode .featured-team-card .team-home-col span, body.light-mode .featured-team-card .team-away-col span { color: #1e1b2e !important; text-shadow: none !important; }
body.light-mode .featured-team-card .league-name-inside { color: #8a6500 !important; text-shadow: none !important; }
body.light-mode .featured-team-card .league-name-inside::before, body.light-mode .featured-team-card .league-name-inside::after { border-bottom-color: rgba(153, 116, 4, .25); }
body.light-mode .featured-team-card .team-logo-img { filter: none; }
body.light-mode .featured-team-card .btn-analyze { color: #7a5a00 !important; border-color: #b8890f !important; background: #fffbea; box-shadow: none; }
body.light-mode .featured-team-card .btn-analyze:hover { color: #fff !important; }
body.light-mode .featured-team-card .btn-analyze::before { background: linear-gradient(90deg, #b8890f, #d4af37); }

/* Locked cards: clearly locked but still readable. */
body.light-mode .match-card.locked { opacity: .78; filter: saturate(.85); }
body.light-mode .lock-overlay { background: #f1f5f9; color: #475569; border-color: #cbd5e1; box-shadow: 0 4px 10px -6px rgba(15, 23, 42, .25); }

/* Regular match cards and time pill. */
body.light-mode .match-card:not(.featured-team-card) { border-color: #ece6d6; box-shadow: 0 6px 16px -12px rgba(60, 45, 10, .35); }
body.light-mode .league-name-inside { color: #2563eb; }
body.light-mode .time { border-color: #10b981; }

/* Featured analysis modal keeps its dark premium look; stop the generic light rules from
   turning its inner cards white. */
body.light-mode #analysisModal.featured-analysis-active :is(.ai-box, .pred-item, .percent-card, .score-pred-box, .master-ai-advice-box) { background: linear-gradient(165deg, rgba(42, 28, 66, .85), rgba(13, 19, 36, .97)) !important; border-color: rgba(190, 140, 255, .32) !important; }
body.light-mode #analysisModal.featured-analysis-active :is(p, label, li, .pred-sub, .percent-sub, .master-ai-advice-text, .modal-league-center, #modal-home, #modal-away) { color: #e9e3f5 !important; }
body.light-mode #analysisModal.featured-analysis-active .score-pred-box { background: linear-gradient(160deg, rgba(92, 64, 18, .55), rgba(22, 18, 36, .97)) !important; border-color: rgba(243, 208, 106, .7) !important; }

/* Light mode: active menu item readable on cream; hide the orbit dots (they read as stray specks on white). */
body.light-mode .menu-item.active, body.light-mode .mobile-drawer-link.active { color: #7a5a00 !important; background: linear-gradient(90deg, rgba(212, 175, 55, .18), rgba(212, 175, 55, .04)) !important; }
body.light-mode .match-card.featured-team-card::before, body.light-mode .match-card.featured-team-card::after { display: none !important; animation: none !important; }