/* ExFunCity head styles — moved out of index.php (2026-10-21) so browsers cache them. Edit HERE, then bump ?v= in index.php. */
/* ── index.php line 247 ── */
  /* Open Sauce One (self-referenced via fontsource/jsDelivr) for homepage titles */
  @font-face{font-family:'Open Sauce One';font-style:normal;font-weight:400;font-display:swap;src:url(https://cdn.jsdelivr.net/fontsource/fonts/open-sauce-one@latest/latin-400-normal.woff2) format('woff2')}
  @font-face{font-family:'Open Sauce One';font-style:normal;font-weight:600;font-display:swap;src:url(https://cdn.jsdelivr.net/fontsource/fonts/open-sauce-one@latest/latin-600-normal.woff2) format('woff2')}
  @font-face{font-family:'Open Sauce One';font-style:normal;font-weight:700;font-display:swap;src:url(https://cdn.jsdelivr.net/fontsource/fonts/open-sauce-one@latest/latin-700-normal.woff2) format('woff2')}
  @font-face{font-family:'Open Sauce One';font-style:normal;font-weight:800;font-display:swap;src:url(https://cdn.jsdelivr.net/fontsource/fonts/open-sauce-one@latest/latin-800-normal.woff2) format('woff2')}
  /* Homepage titles → Open Sauce (clean sans) per user; CJK uses the device's own Chinese font (PingFang / YaHei / Noto CJK) */
  .hpx .sec-t, .hpx .card .tt, .hpx .card.big .tt, .hpx .slide h2, .hpx .fanbox h2{ font-family:'Open Sauce One','Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif !important; }
/* ── index.php line 256 ── */
  /* ── SKELETON SHIMMER (prevents CLS while data loads) ── */
  @keyframes heroShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  @media (max-width: 767px) {
    .hero-skeleton.hero-main { min-height: 300px !important; }
    .hero-skeleton.hero-side { display: none !important; }
    .hero-ssr-placeholder img { height: 300px !important; }
  }
  @media (max-width: 600px) {
    .hero-skeleton.hero-main { min-height: 240px !important; }
    .hero-ssr-placeholder img { height: 240px !important; }
  }

  :root {
    --purple: #171717;
    --purple-dark: #000000;
    --purple-light: #171717;
    --purple-glow: rgba(0,0,0,0.05);
    --purple-faint: #f4f3f0;
    --black: #F5F4FA;
    --dark: #ffffff;
    --dark2: #ffffff;
    --dark3: #f4f3f0;
    --border: #e8e6e1;
    --text: #1c1c1c;
    --text-muted: #78766f;
    --white: #1c1c1c;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* Always reserve the vertical scrollbar's space so the sticky navbar and all centred
     content keep the SAME width whether a page scrolls or not — stops the header from
     shifting/"jumping" when you switch between short and tall pages. */
  html { scroll-behavior: smooth; scrollbar-gutter: stable; }

  body {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    background: var(--black);
    color: var(--text);
    overflow-x: clip;
    line-height: 1.6;
  }

  /* ─── SCROLLBAR ─── */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--dark); }
  ::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 3px; }

  /* ─── NAVBAR ─── */
  .navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }
  .navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(20px);
    z-index: -1;
  }
  /* ── Mobile: keep the top header pinned. position:sticky can silently break on iOS
     Safari when an ancestor uses overflow:clip, so on phones we switch the header to
     position:fixed (immune to ancestor overflow) and pad the body by the bar height. ── */
  @media (max-width: 860px) {
    .navbar { position: fixed !important; left: 0; right: 0; }
    body { padding-top: 53px; }
  }
  /* ── Mobile: "Events This Week" / "Sport Prediction" headers — keep the title on
     one line and drop the "All times in GMT+8" note to its own small line below. ── */
  @media (max-width: 640px) {
    .event-page-header, .sports-hero-header { flex-wrap: wrap; }
    .event-page-title { white-space: nowrap; }
    .event-page-sub { margin-left: 30px !important; flex-basis: 100%; margin-top: 3px; }
    .sports-hero-sub { flex-basis: 100%; margin-left: 0; margin-top: 3px; text-align: center; }
  }

  .nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .logo {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: .5px;
    color: var(--white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .logo-icon {
    height: 36px;
    width: auto;
    display: block;
    flex-shrink: 0;
  }
  .logo-text {
    display: flex;
    align-items: baseline;
    line-height: 1;
  }
  .logo-exfuncity {
    color: var(--white);
  }
  .logo-gossip { display:none; /* removed */ 
    color: var(--purple-light);
    margin-left: 7px;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--purple-glow); }
    50% { box-shadow: 0 0 0 8px transparent; }
  }

  .nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .search-bar {
    display: flex;
    align-items: center;
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 6px 16px;
    gap: 8px;
    transition: border-color 0.2s;
  }
  .search-bar:focus-within { border-color: var(--purple); }
  .search-bar input {
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 13px;
    width: 180px;
  }
  .search-bar input::placeholder { color: var(--text-muted); }
  .search-bar svg { color: var(--text-muted); flex-shrink: 0; }

  .btn-login {
    background: var(--purple);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .btn-login:hover {
    background: var(--purple-light);
    box-shadow: 0 0 20px var(--purple-glow);
  }

  /* ─── NAV CATEGORIES ─── */
  .nav-cats {
    border-top: 1px solid var(--border);
    background: var(--dark);
    overflow: visible;
  }
  .nav-cats-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  .nav-cats-inner::-webkit-scrollbar { display: none; }

  .nav-cat {
    position: relative;
    white-space: nowrap;
    touch-action: pan-x;
  }
  /* 4D nav dropdown (desktop hover) */
  .nav-dd-wrap > a .nav-icon-wrap::after{ content:'▾'; font-size:10px; margin-left:4px; opacity:.7; }
  .nav-dd{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px); min-width:212px; background:#fff; border:1px solid var(--border,#ece9f6); border-radius:13px; box-shadow:0 14px 34px rgba(40,20,80,.18); padding:7px; opacity:0; visibility:hidden; transition:opacity .16s, transform .16s, visibility .16s; z-index:1200; text-align:left; }
  .nav-dd-wrap:hover .nav-dd, .nav-dd-wrap:focus-within .nav-dd{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .nav-dd a{ display:block; padding:9px 13px; border-radius:9px; font-size:13px; font-weight:700; color:#1c1c1c; text-decoration:none; white-space:nowrap; transition:background .14s, color .14s; }
  .nav-dd a small{ display:block; font-size:11px; font-weight:600; color:#8a8794; margin-top:1px; }
  .nav-dd a:hover{ background:#f4effc; color:var(--purple,#3E357E); }
  @media(max-width:900px){ .nav-dd{ display:none; } .nav-dd-wrap > a .nav-icon-wrap::after{ display:none; } }
  @media(max-width:768px){
    /* the drawer is a vertical list: the "scroll sideways" arrow + right fade looked like a Casino sub-menu arrow */
    .nav-cats-scroll-hint{ display:none !important; }
    .nav-cats::after{ display:none !important; }
  }

  .nav-cat > a, .nav-cat > .cat-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  }
  /* Default icon stroke — bold to match font weight */
  .nav-cat > a svg, .nav-cat > .cat-trigger svg { stroke-width: 2.5; opacity: 1; color: #E39B00; stroke: #E39B00; transition: opacity 0.2s, stroke 0.2s; }
  .nav-cat > a:hover, .nav-cat > .cat-trigger:hover,
  .nav-cat.active > a, .nav-cat.active > .cat-trigger {
    color: var(--purple-light);
  }
  .nav-cat.active > a::after, .nav-cat.active > .cat-trigger::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--purple);
  }
  /* Bolder icon stroke on hover/active — switch to purple */
  .nav-cat > a:hover svg, .nav-cat > .cat-trigger:hover svg,
  .nav-cat.active > a svg, .nav-cat.active > .cat-trigger svg {
    stroke-width: 3;
    opacity: 1;
    color: var(--purple-light);
    stroke: var(--purple-light);
  }

  /* ─── LIFESTYLE DROPDOWN LINKS ─── */
  .dropdown-link {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
    gap: 8px;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  }
  .dropdown-link svg { transition: stroke-width 0.2s, opacity 0.2s; opacity: 0.75; stroke-width: 2.5; }
  .dropdown-link:hover {
    color: var(--purple-light);
    background: var(--purple-faint);
  }
  .dropdown-link:hover svg { opacity: 1; stroke-width: 3; }
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 175px;
    padding: 6px 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: all 0.2s;
    z-index: 2000;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  }
  .nav-cat:hover .dropdown,
  .nav-cat.dropdown-open .dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
  }
  .dropdown a {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
    gap: 8px;
  }
  .dropdown a svg { transition: stroke-width 0.2s, opacity 0.2s; opacity: 0.7; }
  .dropdown a:hover {
    color: var(--purple-light);
    background: var(--purple-faint);
  }
  .dropdown a:hover svg {
    opacity: 1;
    stroke-width: 2.5;
  }

  /* ─── AURORA BACKGROUND ─── */
  /* ─── HERO / FEATURED ─── */
  .hero {
    max-width: 1400px;
    margin: 32px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
  }

  .hero-main {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    group: true;
  }
  .hero-main img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    transition: transform 0.5s;
    display: block;
  }
  .hero-main:hover img { transform: scale(1.03); }
  .hero-main-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  }
  .hero-main-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px;
  }
  .hero-cat-badge {
    display: inline-block;
    background: var(--purple);
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .hero-main-title {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: white;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  @media (min-width: 768px) {
    .hero-main-title { font-size: 26px; -webkit-line-clamp: 4; }
  }
  .hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
  }
  .hero-meta span { display: flex; align-items: center; gap: 4px; }

  .hero-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .hero-side-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--purple-light);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .hero-side-card {
    display: flex;
    gap: 12px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
  }
  .hero-side-card:hover { background: var(--purple-faint); }
  .hero-side-img {
    width: 90px;
    height: 65px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .hero-side-info { flex: 1; }
  .hero-side-cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--purple-light);
    margin-bottom: 4px;
  }
  .hero-side-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
  }
  .hero-side-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
  }

  /* ─── TICKER ─── */
  .ticker-wrap {
    background: var(--purple);
    overflow: hidden;
    height: 36px;
    display: flex;
    align-items: center;
  }
  .ticker-label {
    background: linear-gradient(135deg,#e11d2b,#ff4133);
    padding: 0 20px;
    height: 36px;
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: white;
    white-space: nowrap;
    z-index: 1;
    flex-shrink: 0;
    box-shadow: 4px 0 14px rgba(225,29,43,.4);
  }
  .ticker-track {
    display: flex;
    animation: ticker 40s linear infinite;
    white-space: nowrap;
  }
  .ticker-item {
    padding: 0 40px;
    font-size: 13px;
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .ticker-item::before {
    content: '●';
    font-size: 6px;
    opacity: 0.6;
  }
  @keyframes ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ─── SECTION HEADERS ─── */
  .section {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 24px;
  }
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .section-title {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;
    font-size: 24px;
    letter-spacing: 2px;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .section-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--purple);
    border-radius: 2px;
    display: inline-block;
  }
  .see-all {
    font-size: 12px;
    font-weight: 600;
    color: var(--purple-light);
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s;
  }
  .see-all:hover { color: var(--white); }

  /* ─── CARD GRID ─── */
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  /* Category filtered view has a 300px sidebar — use 3 cols on desktop so cards match home card size */
  @media (min-width: 901px) {
    #filteredView .cards-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .cards-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

  .card {
    background: var(--dark2);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(255,255,255,0.04);
    display: flex;
    flex-direction: column;
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px var(--border);
  }
  .card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
  }
  .card:hover .card-img { transform: scale(1.05); }
  .card-img-wrap { overflow: hidden; position: relative; }
  .card-cat-badge {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--purple);
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 4px;
  }
  .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    font-weight: 500;
  }
  .card-date { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,0.65); font-weight: 500; }
  .card-actions { display: flex; align-items: center; gap: 7px; }

  /* ─── CARD BODY — flex column so share row always at bottom ─── */
  .card-body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
  }

  /* ─── CARD ACTION BUTTONS (like + bookmark) ─── */
  .card-action-btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.18);
    cursor: pointer;
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    padding: 5px 12px;
    border-radius: 20px;
    transition: all 0.18s;
  }
  .card-action-btn svg { flex-shrink: 0; transition: transform 0.18s; }
  .card-action-btn:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.13);
    transform: translateY(-1px);
  }
  .card-action-btn:hover svg { transform: scale(1.15); }
  .card-action-btn.liked {
    color: #f87171;
    border-color: #ef4444;
    background: rgba(239,68,68,0.15);
  }
  .card-action-btn.liked svg {
    fill: #f87171;
    stroke: #f87171;
    transform: scale(1.1);
  }
  .card-action-btn.bookmarked {
    color: var(--purple-light);
    border-color: var(--purple);
    background: rgba(23,23,23,0.18);
  }
  .card-action-btn.bookmarked svg {
    fill: var(--purple-light);
    stroke: var(--purple-light);
    transform: scale(1.1);
  }

  /* ─── NAV ICON WRAP ─── */
  .nav-icon-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .nav-icon-wrap svg {
    flex-shrink: 0;
    opacity: 1;
    color: #E39B00;
    stroke: #E39B00;
    transition: color 0.2s, stroke 0.2s;
  }
  .nav-cat.active .nav-icon-wrap svg,
  .nav-cat:hover .nav-icon-wrap svg,
  .nav-cat .cat-trigger:hover .nav-icon-wrap svg {
    opacity: 1;
    color: var(--purple-light);
    stroke: var(--purple-light);
  }

  /* ─── PROFILE TABS ─── */
  .profile-tab {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--dark4);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s, color 0.2s;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  }
  .profile-tab svg {
    stroke: #E39B00;
    flex-shrink: 0;
    transition: stroke 0.2s;
  }
  .profile-tab.active-tab {
    background: var(--purple);
    color: white;
  }
  .profile-tab.active-tab svg {
    stroke: #E39B00;
  }

  /* ─── ADULT NAV SPECIAL STYLING ─── */
  @keyframes adult-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(62,53,126,0.45), inset 0 0 0 0 rgba(62,53,126,0); }
    50%       { box-shadow: 0 0 0 5px rgba(62,53,126,0), inset 0 0 8px rgba(62,53,126,0.15); }
  }
  .nav-cat.nav-adult > a {
    color: #ffffff !important;
    font-weight: 800;
    padding: 5px 13px !important;
    background: linear-gradient(135deg,#3E357E,#5B4FA0);
    border-radius: 20px;
    border: 1.5px solid #6A5FB0;
    animation: adult-pulse 2.2s ease-in-out infinite;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    letter-spacing: 0.8px;
  }
  .nav-cat.nav-adult > a:hover {
    background: linear-gradient(135deg,#3E357E,#6A5FB0) !important;
    border-color: #B4ADD8 !important;
    color: #ffffff !important;
    transform: scale(1.05);
  }
  .nav-cat.nav-adult.active > a {
    background: linear-gradient(135deg,#3E357E,#6A5FB0) !important;
    border-color: #6A5FB0 !important;
    color: #ffffff !important;
  }
  .nav-cat.nav-adult > a svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
    filter: none;
  }
  .nav-cat.nav-adult > a:hover svg,
  .nav-cat.nav-adult.active > a svg {
    stroke: #ffffff !important;
    filter: none;
  }
  .nav-cat.nav-adult.active > a::after {
    background: #3E357E !important;
    bottom: -8px;
  }
  /* Superscript 18+ tag on adult pill */
  .adult-pill-badge {
    font-size: 8px;
    font-weight: 900;
    background: #ffffff;
    color: #dc2626;
    border-radius: 3px;
    padding: 1px 3px;
    margin-left: 3px;
    letter-spacing: 0;
    vertical-align: super;
    line-height: 1;
  }

  /* 18+ Adult badge icon colour */
  .nav-adult-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 14px;
    border: 1.5px solid #E39B00;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
    color: #E39B00;
    transition: color 0.2s, border-color 0.2s;
  }
  .nav-cat.active .nav-adult-badge,
  .nav-cat:hover .nav-adult-badge {
    color: var(--purple-light);
    border-color: var(--purple-light);
  }
  .breaking-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255,255,255,.9);
    animation: pulse-dot 1.5s infinite;
    flex-shrink: 0;
  }
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
  }

  /* ─── META ICON HELPERS ─── */
  .meta-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 12px;
  }
  .meta-icon svg { flex-shrink: 0; opacity: 0.7; }

  /* ─── SHARE BUTTONS — logo only circles ─── */
  .share-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  .share-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-right: 4px;
    white-space: nowrap;
  }
  .share-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all 0.2s;
    color: white;
    flex-shrink: 0;
  }
  .share-btn:hover { opacity: 0.85; transform: scale(1.12); }
  .share-btn.whatsapp { background: #25D366; }
  .share-btn.facebook { background: #1877F2; }
  .share-btn.telegram { background: #2AABEE; }

  /* ─── CATEGORY FILTER ─── */
  .filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 22px;   /* breathing room below the BREAKING ticker */
    margin-bottom: 24px;
  }
  .filter-btn {
    background: var(--dark2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    letter-spacing: 0.3px;
  }
  .filter-btn:hover, .filter-btn.active {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
  }

  /* ─── NEWSLETTER ─── */
  .newsletter {
    background: linear-gradient(135deg, var(--dark2) 0%, rgba(23,23,23,0.15) 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    margin: 40px 24px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
  }
  .newsletter::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, var(--purple-glow) 0%, transparent 70%);
    pointer-events: none;
  }
  .newsletter-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--purple-light);
    margin-bottom: 8px;
  }
  .newsletter-title {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;
    font-size: 36px;
    letter-spacing: 2px;
    color: var(--white);
    margin-bottom: 8px;
  }
  .newsletter-sub {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 24px;
  }
  .newsletter-form {
    display: flex;
    gap: 10px;
    max-width: 440px;
    margin: 0 auto;
  }
  .newsletter-input {
    flex: 1;
    background: var(--dark3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--text);
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
  }
  .newsletter-input:focus { border-color: var(--purple); }
  .newsletter-input::placeholder { color: var(--text-muted); }
  .newsletter-btn {
    background: var(--purple);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .newsletter-btn:hover {
    background: var(--purple-light);
    box-shadow: 0 0 20px var(--purple-glow);
  }

  /* ─── TRENDING SIDEBAR ─── */
  .content-with-sidebar {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
  }
  #homeSidebar { align-self: start; position: sticky; top: 80px; }
  .sidebar-section {
    background: var(--dark2);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border);
    margin-bottom: 24px;
  }
  .sidebar-title {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--white);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sidebar-title::before {
    content: '';
    width: 3px;
    height: 18px;
    background: var(--purple);
    border-radius: 2px;
    display: inline-block;
  }
  .trending-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: transform 0.2s;
  }
  .trending-item:last-child { border-bottom: none; }
  .trending-item:hover { transform: translateX(4px); }
  .trending-num {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;
    font-size: 18px;
    color: var(--purple);
    min-width: 22px;
    line-height: 1;
    flex-shrink: 0;
  }
  .trending-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--dark3);
  }
  .trending-info { flex: 1; min-width: 0; }
  .trending-cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--purple-light);
    margin-bottom: 3px;
  }
  .trending-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ─── LOGIN MODAL ─── */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .modal-overlay.open {
    opacity: 1;
    pointer-events: all;
  }
  .modal {
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px;
    width: 400px;
    max-width: calc(100vw - 40px);
    transform: translateY(20px);
    transition: transform 0.3s;
    position: relative;
  }
  .modal-overlay.open .modal { transform: translateY(0); }
  .modal-close {
    position: absolute;
    top: 16px; right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 20px;
    padding: 4px;
    transition: color 0.2s;
  }
  .modal-close:hover { color: var(--white); }
  .modal-logo {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--white);
    text-align: center;
    margin-bottom: 4px;
  }
  .modal-logo span { color: var(--purple-light); }
  .modal-subtitle {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 28px;
  }
  .login-divider {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .login-divider::before, .login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }
  .social-login-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
  }
  .social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--dark3);
    color: var(--text);
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
  }
  .social-btn:hover { border-color: var(--purple); background: var(--purple-faint); }
  .social-btn.telegram-btn { color: #2AABEE; border-color: rgba(42,171,238,0.3); }
  .social-btn.telegram-btn:hover { background: rgba(42,171,238,0.1); }
  .social-btn.google-btn { color: #EA4335; border-color: rgba(234,67,53,0.3); }
  .social-btn.google-btn:hover { background: rgba(234,67,53,0.1); }
  .social-btn.facebook-btn { color: #1877F2; border-color: rgba(24,119,242,0.3); }
  .social-btn.facebook-btn:hover { background: rgba(24,119,242,0.1); }

  .form-group { margin-bottom: 14px; }
  .form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
  }
  .form-group input {
    width: 100%;
    background: var(--dark3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 11px 14px;
    color: var(--text);
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
  }
  .form-group input:focus { border-color: var(--purple); }
  .form-submit {
    width: 100%;
    background: var(--purple);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 13px;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 4px;
  }
  .form-submit:hover {
    background: var(--purple-light);
    box-shadow: 0 0 20px var(--purple-glow);
  }
  .modal-switch {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 16px;
  }
  .modal-switch a {
    color: var(--purple-light);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
  }

  /* ─── ARTICLE PAGE ─── */
  .article-page {
    display: none;
  }
  .article-hero-img {
    width: 100%;
    max-width: 1280px;
    height: auto;
    aspect-ratio: auto 16 / 9;   /* hold a 16:9 box until the image arrives (covers are 16:9) — no jump when the hero src is swapped */
    max-height: 680px;
    object-fit: contain;
    background: #0c0b16;
    margin: 0 auto;
    display: block;
  }
  .article-content-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    margin-top: 32px;
  }
  /* grid item: without min-width:0 a wide table sets the column to its own width and pushes the article past a phone screen */
  .article-body { min-width: 0; }
  .article-cat {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2px;
    margin-bottom: 14px;
    color: var(--text-muted, #8a8a99);
  }
  .article-cat a { color: var(--purple); text-decoration: none; }
  .article-cat a:hover { text-decoration: underline; }
  .article-cat .crumb-sep { margin: 0 8px; color: var(--text-muted, #b6b6c2); font-weight: 400; }
  /* Persistent back button on every article */
  .article-back-btn{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:7px 14px; color:var(--text-muted,#b6b6c2); cursor:pointer; font-size:12.5px; font-weight:700; font-family:inherit; margin-bottom:16px; transition:background .15s,color .15s; }
  .article-back-btn:hover{ background:rgba(255,255,255,0.12); color:var(--white); }
  /* Casino review mode: drop blog chrome so the review feels part of the Casino section */
  #article-page.crv-mode .article-content-wrap{ grid-template-columns:1fr; max-width:940px; }
  #article-page.crv-mode .article-content-wrap > aside{ display:none !important; }
  #article-page.crv-mode .article-share-bar{ display:none !important; }
  #article-page.crv-mode #articleLikes{ display:none !important; }
  /* Review mode: drop the generic blog hero image — the review panel carries the logo/score */
  #article-page.crv-mode .article-hero-img{ display:none !important; }
  /* In-page casino review detail (master/detail on /casino) */
  .crv-back{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); color:var(--white,#fff); font-weight:800; font-size:13px; padding:9px 16px; border-radius:999px; cursor:pointer; font-family:inherit; margin-bottom:20px; transition:background .15s; }
  .crv-back:hover{ background:rgba(255,255,255,0.12); }
  #casinoReviewDetail .crv-title{ font-size:26px; font-weight:900; color:var(--white,#fff); letter-spacing:-.4px; margin:2px 0 18px; line-height:1.2; }
  #casinoReviewDetailBody .article-text{ color:var(--text,#c9c7d2); }
  /* Casino Guides & Tips — blog cards */
  .guides-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .guide-card{ display:flex; flex-direction:column; background:#fff; border:1px solid #ece9f6; border-radius:14px; overflow:hidden; text-decoration:none; box-shadow:0 6px 20px rgba(70,45,140,.06); transition:transform .16s, box-shadow .16s; }
  .guide-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(70,45,140,.12); }
  .guide-img{ display:block; width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; background-color:#f4effc; }
  .guide-tx{ display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; }
  .guide-t{ font-size:15px; font-weight:800; color:#1a1626; line-height:1.35; }
  .guide-d{ font-size:12.5px; color:#6b6a76; line-height:1.5; }
  @media(max-width:900px){ .guides-grid{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:600px){ .guides-grid{ grid-template-columns:1fr; } }
  /* Casino review panel (injected atop review articles) */
  .crv-panel{ border:1px solid rgba(255,255,255,.09); border-radius:18px; background:#fff; box-shadow:0 14px 40px rgba(0,0,0,.28); padding:22px; margin:0 0 26px; color:#181521; }
  .crv-head{ display:flex; align-items:center; gap:16px; }
  .crv-logo{ width:92px!important; max-width:92px!important; height:58px!important; object-fit:contain!important; border-radius:11px; background:#faf8fe; padding:6px 10px; flex:0 0 auto; }
  .crv-hmain{ flex:1 1 auto; min-width:0; }
  .crv-name{ font-size:23px; font-weight:900; color:#161320; letter-spacing:-.3px; line-height:1.1; }
  .crv-stars{ font-size:18px; color:#f5a623; letter-spacing:3px; margin-top:3px; }
  .crv-score{ flex:0 0 auto; text-align:center; background:linear-gradient(135deg,#4A3F8A,#5B4FA0); color:#fff; border-radius:13px; padding:9px 15px; box-shadow:0 6px 16px rgba(124,58,237,.35); }
  .crv-score b{ font-size:27px; font-weight:900; display:block; line-height:1; }
  .crv-score span{ font-size:11px; opacity:.85; }
  .crv-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0; }
  .crv-fact{ background:#f8f6fd; border:1px solid #efeafa; border-radius:12px; padding:10px 12px; }
  .crv-fact span{ display:block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:#928fa0; margin-bottom:3px; }
  .crv-fact b{ font-size:14px; font-weight:800; color:#161320; line-height:1.35; }
  .crv-bonus{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:linear-gradient(120deg,#241405,#3f2a08); border-radius:15px; padding:15px 20px; margin-bottom:20px; }
  .crv-bonus-tx{ flex:1 1 220px; }
  .crv-bonus-tx span{ display:block; font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:#eccf8f; }
  .crv-bonus-tx b{ display:block; font-size:18px; font-weight:900; color:#fff; line-height:1.25; margin-top:3px; }
  .crv-cta{ flex:0 0 auto; background:linear-gradient(135deg,#ffb300,#ff8a1f); color:#241400!important; font-size:15px; font-weight:900; padding:13px 28px; border-radius:999px; text-decoration:none!important; box-shadow:0 8px 20px rgba(255,150,20,.42); white-space:nowrap; }
  .crv-cta:hover{ filter:brightness(1.05); }
  .crv-cols{ display:grid; grid-template-columns:1.5fr 1fr; gap:22px; }
  .crv-pros h4{ font-size:14.5px; font-weight:900; color:#161320; margin:0 0 9px; }
  .crv-pros ul{ margin:0; padding:0; list-style:none; }
  .crv-pros li{ position:relative; padding:5px 0 5px 25px; font-size:13.5px; color:#463f57; line-height:1.5; }
  .crv-pros li::before{ content:"✓"; position:absolute; left:0; top:5px; color:#16a34a; font-weight:900; }
  .crv-block{ margin-bottom:14px; }
  .crv-lbl{ display:block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:#928fa0; margin-bottom:7px; }
  .crv-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .crv-tag{ font-size:11.5px; font-weight:700; color:#4A3F8A; background:#f3eefc; border:1px solid #eae2fa; border-radius:999px; padding:4px 11px; }
  .crv-fine{ font-size:11px; color:#8f8c9c; line-height:1.6; margin-top:18px; border-top:1px solid #f0ecf8; padding-top:13px; }
  @media(max-width:640px){ .crv-facts{ grid-template-columns:repeat(2,1fr); } .crv-cols{ grid-template-columns:1fr; } .crv-name{ font-size:19px; } .crv-logo{ width:74px!important; max-width:74px!important; height:48px!important; } }
  .article-title {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--white);
    margin-bottom: 16px;
  }
  .article-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
  }
  .article-share-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 28px;
  }
  .article-share-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .article-share-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .article-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    color: white;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    font-family: inherit;
  }
  .article-share-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
  .article-share-btn:active { transform: translateY(0); }
  .article-share-btn.whatsapp { background: #25D366; }
  .article-share-btn.facebook { background: #1877F2; }
  .article-share-btn.telegram { background: #2AABEE; }
  /* Save button */
  .article-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 22px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
    color: var(--white);
    transition: all 0.2s; font-family: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  }
  .article-action-btn:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); transform: translateY(-1px); }
  .article-action-btn.saved { background: rgba(23,23,23,0.2); border-color: var(--purple); color: var(--purple-light); }
  .article-action-btn.liked { background: rgba(239,68,68,0.15); border-color: #ef4444; color: #f87171; }
  @media (min-width: 768px) {
    .article-actions-row { justify-content: flex-end !important; }
  }
  .article-text {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text);
  }
  .article-text p { margin-bottom: 18px; }
  .article-text a { color: var(--purple-light); text-decoration: underline; }
  /* ── Tables inside article content ── */
  .article-text table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
    font-size: 14px;
  }
  .article-text .ql-table-wrap,
  .article-text [data-table-id] {
    overflow-x: auto;
    margin: 20px 0;
  }
  .article-text table th {
    background: rgba(62,53,126,0.09) !important;
    color: #3E357E !important;
    font-weight: 800;
    padding: 10px 14px;
    border: 1px solid rgba(62,53,126,0.18) !important;
  }
  .article-text table td {
    background: transparent !important;
    color: var(--text) !important;
    padding: 9px 14px;
    border: 1px solid rgba(62,53,126,0.12) !important;
    vertical-align: top;
  }
  .article-text table tr:nth-child(even) td {
    background: rgba(62,53,126,0.035) !important;
  }
  .article-text table td *,
  .article-text table th * {
    background: transparent !important;
  }
  .article-text h2 {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
    margin: 28px 0 14px;
  }
  @media (min-width: 768px) {
    .article-title { font-size: 32px; }
    .article-text h2 { font-size: 22px; }
  }
  /* ── Images inside article content — always fit screen width ── */
  .article-text img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 16px 0;
    display: block;
  }
  .article-text .img-grid img {
    width: 100%;
    margin: 0;
    border-radius: 8px;
    aspect-ratio: 1/1;
    object-fit: cover;
  }
  .article-text .img-slideshow img {
    width: 100%;
    margin: 0;
    border-radius: 0;
    aspect-ratio: 16/9;
    object-fit: cover;
  }

  /* ─── COMMENTS ─── */
  .comments-section {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
  }
  .comments-title {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--white);
    margin-bottom: 20px;
  }
  .comment-login-prompt {
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
  }
  .comment-login-prompt p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
  }
  .comment-card {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
  }
  .comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--purple);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: white;
  }
  .comment-body {
    background: var(--dark2);
    border-radius: 12px;
    padding: 12px 16px;
    flex: 1;
  }
  .comment-author {
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
  }
  .comment-text { font-size: 14px; color: var(--text); line-height: 1.6; }
  .comment-time { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

  /* ─── FOOTER ─── */
  footer {
    background: var(--dark);
    border-top: 1px solid var(--border);
    margin-top: 60px;
    padding: 60px 24px 32px;
  }
  .footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--border);
  }
  .footer-brand .logo { margin-bottom: 16px; font-size: 24px; }
  .footer-desc {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 24px;
  }
  .footer-socials { display: flex; gap: 12px; }
  .footer-social-btn {
    width: 42px; height: 42px;
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: var(--text-muted);
  }
  .footer-social-btn svg { width: 18px; height: 18px; }
  .footer-social-btn:hover {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
  }
  .footer-col-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 20px;
  }
  .footer-links { list-style: none; }
  .footer-links li { margin-bottom: 14px; }
  .footer-links a {
    font-size: 15px;
    color: var(--white);
    text-decoration: none;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .footer-links a:hover { color: var(--purple-light); }
  .footer-links a svg { opacity: 1; stroke-width: 2.5; transition: opacity 0.2s; }
  .footer-links a:hover svg { opacity: 1; }
  /* Adult footer link — red icon + red text */
  .footer-links .footer-adult-link { color: var(--purple); }
  .footer-links .footer-adult-link:hover { color: var(--purple-light, var(--purple)); }
  .footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text-muted);
  }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 1100px) {
    .cards-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero-side { display: none; }
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
    .content-with-sidebar { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    #homeSidebar { display: none; }
    #homeMobileSidebar { display: block !important; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .article-content-wrap { grid-template-columns: 1fr; }
    .article-title { font-size: 28px; }
  }
  @media (max-width: 600px) {
    .cards-grid { grid-template-columns: 1fr; }
    .hero-main img { height: 300px; }
    .newsletter { padding: 28px 20px; }
    .newsletter-form { flex-direction: column; }
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-inner > .footer-brand { grid-column: 1 / -1; }
    .footer-inner > div:last-child { grid-column: 1 / -1; }
    .nav-actions .search-bar { display: none; }
    /* Navbar top row — tighten on mobile */
    .nav-top { padding: 0 14px; height: 52px; }
    .logo { font-size: 20px; }
    .logo-icon { height: 28px; }
    .btn-login { padding: 7px 14px; font-size: 12px; }
    /* Category bar — smaller text on mobile */
    .nav-cat > a, .nav-cat > .cat-trigger { padding: 10px 10px; font-size: 11px; }
    /* Article title smaller on mobile */
    .article-title { font-size: 24px; }
    .article-text { font-size: 15px; }
  }

  /* ─── HOMEPAGE CATEGORY SECTIONS ─── */
  .cat-section {
    max-width: 100%;
    margin: 0 auto 48px;
    padding: 0;
  }
  .cat-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .cat-section-title {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cat-section-title::before {
    content: '';
    width: 4px;
    height: 22px;
    background: var(--purple);
    border-radius: 2px;
    display: inline-block;
  }
  .cat-section-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--purple-light);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
    cursor: pointer;
    background: none;
    border: none;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    padding: 0;
  }
  .cat-section-link:hover { color: var(--white); }

  /* Category Hero Banner */
  .cat-hero-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    height: 340px;
    margin-bottom: 4px;
  }
  .cat-hero-wrap:hover .cat-hero-img { transform: scale(1.03); }
  .cat-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }
  .cat-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.3) 55%, transparent 100%);
  }
  .cat-hero-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--purple);
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 5px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(23,23,23,0.4);
  }
  .cat-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 22px 22px 20px;
  }
  .cat-hero-title {
    font-size: clamp(16px, 2.5vw, 22px);
    font-weight: 700;
    color: white;
    line-height: 1.3;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cat-hero-meta {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 6px;
  }
  .cat-hero-excerpt {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  @media (max-width: 600px) {
    .cat-hero-wrap { height: 240px; }
    .cat-hero-title { font-size: 15px; }
  }

  /* Big + small layout: first post big, rest small */
  .cat-layout-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
  .cat-layout-featured .card-big {
    grid-row: 1 / 3;
  }
  .card-big .card-img { height: 320px; }

  /* Standard 4-col grid for other sections */
  .cat-layout-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .cat-layout-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  /* Lifestyle: 3 side by side */
  .cat-layout-lifestyle {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .lifestyle-sub-col {}
  .lifestyle-sub-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--purple-light);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .lifestyle-cards-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .list-card {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: transform 0.2s;
  }
  .list-card:last-child { border-bottom: none; }
  .list-card:hover { transform: translateX(3px); }
  .list-card-img {
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
  }
  .list-card-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .list-card-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
  }

  /* Divider between sections */
  .section-divider {
    max-width: 1400px;
    margin: 0 auto 48px;
    padding: 0 24px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border), transparent);
  }

  @media (max-width: 900px) {
    .cat-layout-featured { grid-template-columns: 1fr; }
    .card-big { grid-row: auto; }
    .card-big .card-img { height: 220px; }
    .cat-layout-grid { grid-template-columns: repeat(2, 1fr); }
    .cat-layout-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .cat-layout-lifestyle { gap: 20px; }
    .lifestyle-cards-row { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .cat-layout-grid { grid-template-columns: 1fr; }
    .cat-layout-grid-3 { grid-template-columns: 1fr; }
    .lifestyle-cards-row { grid-template-columns: repeat(2, 1fr); }
  }

  /* ─── ANIMATIONS ─── */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .fade-in { animation: fadeInUp 0.5s ease forwards; }

  /* page views */
  .page { display: block; }
  /* pages hidden/shown via JS inline style */
  #home-page { display: block; }

  /* ─── LOGIN TOAST NOTIFICATION ─── */
  #loginToast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    background: var(--dark2);
    border: 1px solid var(--purple);
    border-radius: 20px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    box-shadow: 0 16px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--purple);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 280px;
    max-width: 82vw;
  }
  #loginToast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
  }
  .toast-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(23,23,23,0.12);
    border: 1px solid rgba(23,23,23,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--purple-light);
    flex-shrink: 0;
    margin-bottom: 4px;
  }
  .toast-msg {
    font-size: 16px;
    color: var(--white);
    font-weight: 700;
  }
  .toast-msg span {
    color: var(--text-muted);
    font-size: 13px;
    display: block;
    font-weight: 400;
    margin-top: 4px;
  }
  .toast-login-btn {
    background: var(--purple);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 11px 0;
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    transition: background 0.2s;
    margin-top: 8px;
  }
  .toast-login-btn:hover { background: var(--purple-light); }
  .toast-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
  }

  /* ─── SPORTS HERO ─── */
  .sports-hero-wrap {
    background: linear-gradient(135deg, #F5F4FA 0%, #efece6 50%, #F5F4FA 100%);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px 36px;
    margin-bottom: 24px;
  }
  .sports-hero-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;
    font-size: 18px;
    letter-spacing: 1.5px;
    color: var(--white);
    margin-bottom: 16px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
  .sports-hero-header svg { color: var(--purple-light); flex-shrink: 0; }
  .sports-hero-sub {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0;
    margin-left: 6px;
  }
  .sports-matches-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    max-width: 1400px;
    margin: 0 auto;
  }
  .sports-matches-track::-webkit-scrollbar { display: none; }
  .match-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 22px;
    min-width: 300px;
    max-width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s, transform 0.2s;
    cursor: default;
  }
  .match-card:hover { border-color: rgba(23,23,23,0.5); transform: translateY(-2px); }
  .match-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .match-league {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--purple-light);
  }
  .match-status-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
  }
  @media (max-width: 480px) {
    .match-status-badge { font-size: 9px; padding: 2px 7px; letter-spacing: 0; }
  }
  .match-status-live { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
  .match-status-upcoming { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
  .match-status-ft { background: rgba(34,197,94,0.12); color: #22c55e; border: 1px solid rgba(34,197,94,0.25); }
  .match-live-dot {
    display: inline-block; width: 6px; height: 6px;
    background: #ef4444; border-radius: 50%; margin-right: 4px;
    animation: livePulse 1.2s ease-in-out infinite;
  }
  @keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.3)} }
  .match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .match-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }
  .match-team-logo {
    width: 48px; height: 48px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    padding: 4px;
  }
  .match-team-logo-placeholder {
    width: 48px; height: 48px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
  }
  .match-team-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  .match-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
  }
  .match-score {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;
    font-size: 28px;
    color: var(--white);
    letter-spacing: 2px;
    line-height: 1;
  }
  .match-vs-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
  }
  .match-time-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
  }
  .match-countdown {
    font-size: 11px;
    font-weight: 700;
    color: var(--purple-light);
  }
  .match-cta {
    display: block;
    width: 100%;
    padding: 9px 0;
    background: var(--purple);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
  }
  .match-cta:hover { background: var(--purple-light); box-shadow: 0 0 16px var(--purple-glow); }
  .match-cta-disabled {
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
    cursor: default;
  }
  .match-cta-disabled:hover { background: rgba(255,255,255,0.06); box-shadow: none; }
  @media (max-width: 600px) {
    .sports-hero-wrap { padding: 16px 12px 20px; }
    .match-card { min-width: 260px; padding: 14px 16px; }
  }

  /* ─── EVENT PAGE ─── */
  .event-page-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 20px 48px;
  }
  .event-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  .event-page-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.5px;
  }
  .event-page-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
  }
  .event-week-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    row-gap: 28px;
    align-items: start;
  }
  .event-week-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    border: 1px dashed #d8d5cd;
    border-radius: 14px;
    background: rgba(0,0,0,0.015);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
  }
  .event-day-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .event-day-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    padding: 6px 0 8px;
    border-bottom: 2px solid #e5e3dd;
    white-space: nowrap;
  }
  .event-day-label.today {
    color: var(--purple-light);
    border-color: var(--purple);
  }
  .event-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    height: 100%;
  }
  .event-day-col { height: 100%; }
  .event-card:hover {
    border-color: rgba(23,23,23,0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(23,23,23,0.15);
  }
  .event-card.ev-live {
    border-color: rgba(239,68,68,0.5);
    box-shadow: 0 0 16px rgba(239,68,68,0.12);
  }
  .event-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
  }
  .event-card-img-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, rgba(23,23,23,0.2), rgba(23,23,23,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
  }
  .event-card-body {
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }
  .event-card-spacer { flex: 1; }
  .event-card-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 20px;
    align-self: flex-start;
    text-transform: uppercase;
  }
  .ev-status-upcoming { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
  .ev-status-live     { background: rgba(34,197,94,0.15);  color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
  .ev-status-ended    { background: rgba(107,114,128,0.15);color: #9ca3af; border: 1px solid rgba(107,114,128,0.25); }
  .event-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.3;
  }
  .event-card-meta {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .event-card-meta span { display: flex; align-items: center; gap: 4px; }
  .event-card-countdown {
    font-size: 11px;
    font-weight: 700;
    color: var(--purple-light);
    text-align: center;
    padding: 4px 6px;
    background: rgba(23,23,23,0.1);
    border-radius: 6px;
  }
  .event-card-cta {
    display: block;
    width: 100%;
    padding: 7px 0;
    background: var(--purple);
    color: white;
    border: none;
    border-radius: 7px;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    margin-top: auto;
  }
  .event-card-cta:hover { background: var(--purple-light); box-shadow: 0 0 12px var(--purple-glow); }
  .event-day-empty {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    padding: 16px 0;
    opacity: 0.5;
  }
  @media (max-width: 1100px) { .event-week-grid { grid-template-columns: repeat(4, 1fr) !important; } }
  @media (max-width: 700px)  { .event-week-grid { grid-template-columns: repeat(2, 1fr) !important; } }
  @media (max-width: 420px)  { .event-week-grid { grid-template-columns: 1fr !important; } }

  /* ─── PAGE TAB CARDS (Entertainment & Casino) ─── */
  .page-tab-card {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; font-size: 13px; font-weight: 600;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 10px; color: var(--text-muted); cursor: pointer;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif; transition: all 0.2s; white-space: nowrap;
  }
  .page-tab-card:hover { border-color: rgba(23,23,23,0.4); color: var(--text); }
  .page-tab-card.active {
    background: rgba(23,23,23,0.15); border-color: var(--purple);
    color: var(--purple-light);
  }
  .page-tab-card svg { opacity: 0.7; transition: opacity 0.2s; }
  .page-tab-card.active svg, .page-tab-card:hover svg { opacity: 1; }

  /* ─── CASINO REVIEWS ─── */
  .casino-filter-btn {
    padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
    border: 1px solid var(--border); background: rgba(255,255,255,0.04);
    color: var(--text-muted); cursor: pointer; font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    transition: all 0.2s;
  }
  .casino-filter-btn:hover { border-color: rgba(23,23,23,0.4); color: var(--purple-light); }
  .casino-filter-btn.active { background: var(--purple); border-color: var(--purple); color: #fff; }

  .casino-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 13px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column;
  }
  .casino-card:hover { border-color: rgba(23,23,23,0.3); box-shadow: 0 4px 20px rgba(23,23,23,0.08); }

  /* Rank-colored accent bar at top */
  .casino-rank-bar { height: 3px; width: 100%; flex-shrink: 0; }

  /* Main row — left + mid + right */
  .casino-main-row { display: flex; align-items: stretch; overflow: hidden; }
  /* Hide mobile groups on desktop */
  .casino-mobile-left-group,
  .casino-mobile-mid-group,
  .casino-mobile-right-group,
  .casino-mobile-bar { display: none; }

  /* Left — rank + logo + stars */
  .casino-left {
    width: 130px; min-width: 130px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; padding: 16px 12px; text-align: center;
    border-right: 1px solid var(--border);
    background: rgba(255,255,255,0.015);
  }
  .casino-rank-num { font-size: 13px; font-weight: 800; letter-spacing: 1px; }
  .casino-logo { max-width: 100px; max-height: 54px; object-fit: contain; display: block; }
  .casino-logo-ph {
    width: 90px; height: 48px; background: rgba(23,23,23,0.1); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
  }
  .casino-stars { display: flex; gap: 1px; justify-content: center; font-size: 12px; }
  .casino-trust-num { font-size: 20px; font-weight: 900; color: var(--white); line-height: 1; }
  .casino-trust-lbl { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

  /* Middle — name, tags, stats, highlights, payments */
  .casino-mid {
    flex: 1; min-width: 0;
    padding: 14px 16px;
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
  }
  .casino-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .casino-name { font-size: 16px; font-weight: 800; color: var(--white); }
  .casino-tag {
    padding: 2px 9px; border-radius: 8px; font-size: 10px; font-weight: 700;
    background: rgba(23,23,23,0.12); color: var(--purple-light); border: 1px solid rgba(23,23,23,0.22);
  }
  .casino-stats {
    display: flex; gap: 0; flex-shrink: 0;
    background: rgba(255,255,255,0.025); border: 1px solid var(--border);
    border-radius: 7px; overflow: hidden; align-self: flex-start; width: 100%;
  }
  .casino-stat { flex: 1; padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border); align-items: center; text-align: center; }
  .casino-stat:last-child { border-right: none; }
  .casino-stat-lbl { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
  .casino-stat-val { font-size: 13px; font-weight: 700; color: var(--white); white-space: nowrap; }
  .casino-stat-val.fast { color: #22c55e; }
  /* Highlights — always visible on desktop, collapsible on mobile */
  .casino-highlights-wrap { display: flex; flex-direction: column; gap: 4px; }
  .casino-highlights-wrap button { display: none; } /* hide toggle on desktop */
  .casino-highlights-body { display: flex; flex-direction: column; gap: 3px; }
  .casino-highlights-line {
    font-size: 13px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.6;
  }
  .casino-bottom-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
  .casino-license { font-size: 10px; color: var(--muted); padding: 3px 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 5px; display: inline-flex; align-items: center; gap: 4px; }
  .casino-payments { display: flex; gap: 5px; flex-wrap: wrap; }
  .casino-payment { padding: 3px 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 4px; font-size: 10px; font-weight: 600; color: var(--text-muted); }

  /* Right — CTA column */
  .casino-right {
    width: 200px; min-width: 200px;
    border-left: 1px solid var(--border);
    background: rgba(23,23,23,0.025);
    display: flex; flex-direction: column;
    align-items: stretch; justify-content: center;
    gap: 6px; padding: 14px 16px;
  }
  .casino-editor-badge {
    font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 8px;
    text-transform: uppercase; letter-spacing: 0.5px; text-align: center;
  }
  .casino-rating-row { display: flex; align-items: baseline; justify-content: space-between; }
  .casino-score-num { font-size: 28px; font-weight: 900; line-height: 1; }
  .casino-score-bar-wrap { width: 100%; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
  .casino-score-bar { height: 100%; border-radius: 2px; transition: width .6s; }
  .casino-divider { width: 100%; height: 1px; background: rgba(255,255,255,0.06); }
  .casino-bonus-lbl { font-size: 8px; font-weight: 700; color: var(--purple-light); text-transform: uppercase; letter-spacing: 1px; }
  .casino-bonus-txt { font-size: 11px; font-weight: 700; color: var(--white); line-height: 1.3; }
  .casino-visit-btn {
    display: block; width: 100%; padding: 8px 0; background: var(--purple); color: white;
    border: none; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif; text-decoration: none; text-align: center;
    transition: background 0.2s;
  }
  .casino-visit-btn:hover { background: var(--purple-light); }
  .casino-review-btn {
    display: block; width: 100%; padding: 7px 0; background: rgba(62,53,126,0.06); color: var(--purple);
    border: 1.5px solid var(--purple); border-radius: 7px; font-size: 11.5px; font-weight: 800;
    cursor: pointer; font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif; text-decoration: none; text-align: center;
    transition: background 0.2s, color 0.2s; letter-spacing: .2px;
  }
  .casino-review-btn:hover { background: var(--purple); color: #fff; }
  /* Mobile: make Read Review a distinctive purple outline button (key action on a review site) */
  .casino-mobile-review-btn {
    display: block; text-align: center; text-decoration: none; margin-top: 4px;
    font-size: 11px; font-weight: 800; letter-spacing: .2px;
    color: var(--purple); background: rgba(62,53,126,0.06);
    border: 1.5px solid var(--purple); border-radius: 999px; padding: 6px 14px; white-space: nowrap;
  }
  .casino-mobile-review-btn:hover { background: var(--purple); color: #fff; }
  .casino-fine-print { font-size: 8px; color: var(--muted); line-height: 1.5; text-align: center; }

  /* ── MOBILE ── */
  @media (max-width: 600px) {
    /* Thicker border on mobile */
    .casino-card { border: 2px solid rgba(23,23,23,0.4); }

    .casino-left { width: 110px; min-width: 110px; padding: 14px 10px; gap: 6px; }
    .casino-logo { max-width: 88px; max-height: 48px; }
    .casino-trust-num { font-size: 16px; }
    .casino-mid { padding: 10px 10px; gap: 6px; }
    .casino-name { font-size: 14px; }
    .casino-stat { padding: 4px 6px; }
    .casino-stat-lbl { font-size: 8px; }
    .casino-stat-val { font-size: 11px; white-space: normal; }
    .casino-highlights-line { white-space: normal; font-size: 11px; }
    .casino-tag { font-size: 9px; padding: 2px 6px; }
    .casino-payment { font-size: 9px; padding: 2px 6px; white-space: normal; }
    .casino-license { font-size: 9px; white-space: normal; }
    .casino-stats { display: flex; width: 100%; }
    .casino-stat { flex: 1; padding: 4px 6px; }
    .casino-bottom-row { flex-wrap: wrap; }

    /* Highlights dropdown on mobile */
    .casino-highlights-wrap button { display: flex !important; }
    .casino-highlights-body { display: none; margin-top: 4px; }
    .casino-highlights-wrap.open .casino-highlights-body { display: flex !important; }
    .casino-highlights-wrap.open .casino-highlights-arrow { transform: rotate(180deg); }
    .casino-highlights-line { white-space: normal; font-size: 11px; }

    /* Hide desktop right col, show mobile bar */
    .casino-right { display: none !important; }
    .casino-mobile-bar {
      display: flex !important; width: 100%;
      flex-direction: row; align-items: center;
      justify-content: space-between; gap: 8px;
      padding: 10px 14px;
      border-top: 2px solid rgba(23,23,23,0.4);
    }
    .casino-mobile-left-group { display: flex !important; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; flex-shrink: 0; }
    .casino-mobile-mid-group  { display: flex !important; flex: 1; min-width: 0; flex-direction: column; gap: 2px; justify-content: center; padding-left: 10px; }
    .casino-mobile-right-group { display: flex !important; flex-shrink: 0; flex-direction: column; gap: 4px; align-items: center; }
    /* Smaller Visit Site button on mobile */
    .casino-mobile-visit-btn {
      padding: 8px 12px; background: var(--purple); color: white;
      border: none; border-radius: 8px; font-size: 12px; font-weight: 700;
      cursor: pointer; font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
      text-decoration: none; text-align: center; white-space: nowrap; display: block;
    }
  }

  /* ─── Casino review card: clean vertical layout on mobile (values never break) ─── */
  @media (max-width: 600px) {
    #casinoReviewsPage .casino-main-row { flex-direction: column !important; }
    #casinoReviewsPage .casino-left {
      width: 100% !important; min-width: 0 !important;
      flex-direction: row !important; justify-content: flex-start !important;
      align-items: center !important; gap: 12px !important;
      border-right: none !important; border-bottom: 1px solid var(--border) !important;
      padding: 12px 14px !important; text-align: left !important;
    }
    #casinoReviewsPage .casino-left .casino-rank-num { flex-shrink: 0; font-size: 14px !important; }
    #casinoReviewsPage .casino-left .casino-logo { max-width: 84px !important; max-height: 40px !important; }
    #casinoReviewsPage .casino-left .casino-stars { font-size: 13px !important; }
    #casinoReviewsPage .casino-left > div:last-child { margin-left: auto !important; text-align: right !important; }
    #casinoReviewsPage .casino-left .casino-trust-num { font-size: 18px !important; }
    #casinoReviewsPage .casino-mid { padding: 12px 14px !important; gap: 11px !important; }
    #casinoReviewsPage .casino-name-row { gap: 6px !important; }
    #casinoReviewsPage .casino-stats { flex-direction: column !important; align-self: stretch !important; }
    #casinoReviewsPage .casino-stat {
      flex-direction: row !important; justify-content: space-between !important;
      align-items: center !important; text-align: left !important; gap: 12px !important;
      border-right: none !important; border-bottom: 1px solid var(--border) !important;
      padding: 9px 12px !important;
    }
    #casinoReviewsPage .casino-stat:last-child { border-bottom: none !important; }
    #casinoReviewsPage .casino-stat-lbl { font-size: 10px !important; flex-shrink: 0 !important; white-space: nowrap !important; }
    #casinoReviewsPage .casino-stat-val { font-size: 13px !important; white-space: normal !important; text-align: right !important; min-width: 0 !important; line-height: 1.35 !important; }
  }

/* ─── POINT MALL ─── */
  .mall-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 4px;
  }
  .mall-prize-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, transform 0.2s;
  }
  .mall-prize-card:hover { border-color: rgba(23,23,23,0.4); transform: translateY(-1px); }
  .mall-prize-img {
    width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  }
  .mall-prize-img-placeholder {
    width: 100%; aspect-ratio: 16/9;
    background: linear-gradient(135deg,rgba(23,23,23,0.2),rgba(23,23,23,0.08));
    display: flex; align-items: center; justify-content: center; font-size: 28px;
  }
  .mall-prize-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
  .mall-prize-cat {
    font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--purple-light); opacity: 0.8;
  }
  .mall-prize-name { font-size: 12px; font-weight: 700; color: var(--white); line-height: 1.3; }
  .mall-prize-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
  .mall-prize-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
  .mall-prize-cost {
    font-size: 13px; font-weight: 800; color: var(--purple-light);
    display: flex; align-items: center; gap: 3px;
  }
  .mall-qty-badge {
    font-size: 10px; padding: 2px 7px; border-radius: 20px;
    background: rgba(255,255,255,0.06); color: var(--text-muted); font-weight: 600;
  }
  .mall-claim-btn {
    width: 100%; padding: 7px 0; margin-top: 6px;
    background: var(--purple); color: white; border: none; border-radius: 7px;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif; font-size: 11px; font-weight: 700;
    cursor: pointer; transition: background 0.2s, box-shadow 0.2s;
  }
  .mall-claim-btn:hover { background: var(--purple-light); box-shadow: 0 0 12px var(--purple-glow); }
  .mall-claim-btn:disabled { background: rgba(255,255,255,0.08); color: var(--muted); cursor: not-allowed; }
  .mall-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
  .mall-filter-btn {
    font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--border);
    color: var(--text-muted); cursor: pointer; transition: all 0.15s;
  }
  .mall-filter-btn.active, .mall-filter-btn:hover {
    background: rgba(23,23,23,0.2); border-color: rgba(23,23,23,0.4); color: var(--purple-light);
  }
  /* Claim popup */
  .mall-claim-popup {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 10002;
    display: flex; align-items: center; justify-content: center; padding: 16px;
  }
  .mall-claim-popup-box {
    background: var(--dark2); border: 1px solid var(--border-s); border-radius: 18px;
    padding: 28px 24px; max-width: 360px; width: 100%; text-align: center;
  }
  /* ═══════════════════════════════════════
     MOBILE LAYOUT FIXES
  ═══════════════════════════════════════ */

  /* Fix missing .dropdown selector */
  .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 175px;
    padding: 6px 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: all 0.2s;
    z-index: 2000;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  }

  @media (max-width: 600px) {
    /* Sports page on mobile: hide the hero/featured post, show match schedule first */
    body.sports-active .cat-hero-wrap,
    body.sports-active .cat-layout-featured,
    body.sports-active #filteredView .card-big {
      display: none !important;
    }
    /* Hero section: JS sets style="display:grid" directly, override with !important */
    #heroSection {
      display: flex !important;
      flex-direction: column !important;
      padding: 0 14px !important;
      margin: 16px auto !important;
      gap: 16px;
    }
    /* Sports/Events/Reviews pages: hide hero on mobile */
    body.sports-active #heroSection,
    body.sports-active #heroSection *,
    body.events-active #heroSection,
    body.events-active #heroSection *,
    body.reviews-active #heroSection,
    body.reviews-active #heroSection * {
      display: none !important;
    }
    .content-with-sidebar {
      padding: 0 14px !important;
      grid-template-columns: 1fr !important;
    }
    #homeCategorySections { padding: 0; width: 100%; }
    .cat-layout-featured { grid-template-columns: 1fr !important; }
    .cat-layout-featured .card-big { grid-row: auto !important; }
    .card-big .card-img { height: 200px !important; }
    .cat-layout-grid,
    .cat-layout-grid-3,
    .cards-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .lifestyle-cards-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .cat-section-title { font-size: 18px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .section-divider { margin: 0 0 32px !important; padding: 0 !important; }
    .cat-section { padding: 0 !important; margin-bottom: 36px !important; }
    #filteredView .content-with-sidebar { padding: 0 14px !important; }
    .article-content-wrap { padding: 0 14px !important; grid-template-columns: 1fr !important; gap: 24px !important; margin-top: 20px !important; }
    /* Compact icon-only share + action buttons on mobile — one tidy row */
    .article-share-label { display: none !important; }
    .article-share-row { flex-wrap: nowrap !important; gap: 8px !important; }
    .article-share-row > div { gap: 8px !important; flex-wrap: nowrap !important; min-width: 0 !important; }
    .article-share-btn, .article-action-btn { gap: 0 !important; padding: 0 !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; justify-content: center !important; font-size: 0 !important; flex-shrink: 0 !important; }
    .article-share-btn svg, .article-action-btn svg { width: 18px !important; height: 18px !important; }
    .newsletter { margin: 24px 14px !important; padding: 24px 16px !important; }
    footer { padding: 40px 14px 24px !important; }
    .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 20px !important; padding-bottom: 32px !important; }
    .footer-inner > .footer-brand { grid-column: 1 / -1 !important; }
    .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; font-size: 12px !important; }
    section[aria-label="About ExFunCity Malaysia"] { padding: 32px 14px !important; }
    .sports-hero-wrap { padding: 14px 14px 20px !important; }
    #homeSidebar, #filteredView aside { display: none !important; }
    .card-body { padding: 12px !important; }
    .share-row { padding: 8px 12px !important; gap: 6px !important; flex-wrap: wrap; }
    .card-footer { flex-wrap: nowrap !important; gap: 6px !important; }
    .card-actions { flex-shrink: 0; }
    .ticker-label { padding: 0 12px !important; font-size: 10px !important; }
    .ticker-item { font-size: 12px !important; padding: 0 24px !important; }
    .hero-main img { height: 240px !important; }
    .hero-main-content { padding: 20px 16px !important; }
    .modal { padding: 28px 20px !important; }
    body, #home-page, #article-page { overflow-x: clip !important; max-width: 100vw !important; }
    #sportsHero, .sports-hero-wrap { overflow: visible !important; }
    .sports-matches-track { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-x !important; }
    .article-text img { max-width: 100% !important; height: auto !important; }
    .article-text table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  }

  @media (min-width: 601px) and (max-width: 900px) {
    .hero { grid-template-columns: 1fr !important; padding: 0 18px !important; }
    .hero-side { display: none !important; }
    .content-with-sidebar { padding: 0 18px !important; grid-template-columns: 1fr !important; }
    .cat-layout-grid, .cat-layout-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .article-content-wrap { padding: 0 18px !important; grid-template-columns: 1fr !important; }
    .footer-inner { grid-template-columns: 1fr 1fr !important; }
    .footer-inner > .footer-brand { grid-column: 1 / -1 !important; }
  }

  /* ═══════════════════════════════════════
     NAV SCROLL HINT + FASTER TICKER
  ═══════════════════════════════════════ */

  /* Faster ticker */
  .ticker-track {
    animation: ticker 18s linear infinite !important;
  }
  @media (max-width: 600px) {
    .ticker-track {
      animation: ticker 14s linear infinite !important;
    }
  }

  /* Nav scroll hint — gradient fade on right edge */
  .nav-cats {
    position: relative;
  }
  .nav-cats-scroll-hint {
    display: none;
  }

  @media (max-width: 900px) {
    /* Right fade gradient */
    .nav-cats::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 56px;
      height: 100%;
      background: linear-gradient(to right, transparent, var(--dark));
      pointer-events: none;
      z-index: 10;
      transition: opacity 0.3s;
    }
    .nav-cats.scrolled::after {
      opacity: 0;
    }

    /* Bouncing chevron arrow */
    .nav-cats-scroll-hint {
      display: flex;
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 11;
      pointer-events: none;
      align-items: center;
      justify-content: center;
      animation: hintBounce 1.4s ease-in-out infinite;
    }
    .nav-cats.scrolled .nav-cats-scroll-hint {
      display: none;
    }
    .nav-cats-scroll-hint svg {
      color: var(--white);
      opacity: 0.9;
      filter: drop-shadow(0 0 4px rgba(0,0,0,0.7));
    }
  }

  @keyframes hintBounce {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%       { transform: translateY(-50%) translateX(5px); }
  }

  /* ─── ANIMATIONS ─── */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .fade-in { animation: fadeInUp 0.5s ease forwards; }

  /* page views */
  .page { display: block; }
  /* pages hidden/shown via JS inline style */
  #home-page { display: block; }

  /* ─── LOGIN TOAST NOTIFICATION ─── */
  #loginToast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    background: var(--dark2);
    border: 1px solid var(--purple);
    border-radius: 20px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    box-shadow: 0 16px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--purple);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 280px;
    max-width: 82vw;
  }
  #loginToast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
  }
  .toast-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(23,23,23,0.12);
    border: 1px solid rgba(23,23,23,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--purple-light);
    flex-shrink: 0;
    margin-bottom: 4px;
  }
  .toast-msg {
    font-size: 16px;
    color: var(--white);
    font-weight: 700;
  }
  .toast-msg span {
    color: var(--text-muted);
    font-size: 13px;
    display: block;
    font-weight: 400;
    margin-top: 4px;
  }
  .toast-login-btn {
    background: var(--purple);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 11px 0;
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    transition: background 0.2s;
    margin-top: 8px;
  }
  .toast-login-btn:hover { background: var(--purple-light); }
  .toast-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
  }

  /* ─── SPORTS HERO ─── */
  .sports-hero-wrap {
    background: linear-gradient(135deg, #F5F4FA 0%, #efece6 50%, #F5F4FA 100%);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px 36px;
    margin-bottom: 24px;
  }
  .sports-hero-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;
    font-size: 18px;
    letter-spacing: 1.5px;
    color: var(--white);
    margin-bottom: 16px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
  .sports-hero-header svg { color: var(--purple-light); flex-shrink: 0; }
  .sports-hero-sub {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0;
    margin-left: 6px;
  }
  .sports-matches-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    max-width: 1400px;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .sports-matches-track::-webkit-scrollbar { display: none; }
  .match-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 22px;
    min-width: 300px;
    max-width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s, transform 0.2s;
    cursor: default;
  }
  .match-card:hover { border-color: rgba(23,23,23,0.5); transform: translateY(-2px); }
  .match-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .match-league {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--purple-light);
  }
  .match-status-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
  }
  @media (max-width: 480px) {
    .match-status-badge { font-size: 9px; padding: 2px 7px; letter-spacing: 0; }
  }
  .match-status-live { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
  .match-status-upcoming { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
  .match-status-ft { background: rgba(34,197,94,0.12); color: #22c55e; border: 1px solid rgba(34,197,94,0.25); }
  .match-live-dot {
    display: inline-block; width: 6px; height: 6px;
    background: #ef4444; border-radius: 50%; margin-right: 4px;
    animation: livePulse 1.2s ease-in-out infinite;
  }
  @keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.3)} }
  .match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .match-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }
  .match-team-logo {
    width: 48px; height: 48px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    padding: 4px;
  }
  .match-team-logo-placeholder {
    width: 48px; height: 48px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
  }
  .match-team-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  .match-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
  }
  .match-score {
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;
    font-size: 28px;
    color: var(--white);
    letter-spacing: 2px;
    line-height: 1;
  }
  .match-vs-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
  }
  .match-time-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
  }
  .match-countdown {
    font-size: 11px;
    font-weight: 700;
    color: var(--purple-light);
  }
  .match-cta {
    display: block;
    width: 100%;
    padding: 9px 0;
    background: var(--purple);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
  }
  .match-cta:hover { background: var(--purple-light); box-shadow: 0 0 16px var(--purple-glow); }
  .match-cta-disabled {
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
    cursor: default;
  }
  .match-cta-disabled:hover { background: rgba(255,255,255,0.06); box-shadow: none; }
  @media (max-width: 600px) {
    .sports-hero-wrap { padding: 16px 12px 20px; }
    .match-card { min-width: 260px; padding: 14px 16px; }
  }

  /* ─── EVENT PAGE ─── */
  .event-page-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 20px 48px;
  }
  .event-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  .event-page-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.5px;
  }
  .event-page-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
  }
  .event-week-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    row-gap: 28px;
    align-items: start;
  }
  .event-week-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    border: 1px dashed #d8d5cd;
    border-radius: 14px;
    background: rgba(0,0,0,0.015);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
  }
  .event-day-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .event-day-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    padding: 6px 0 8px;
    border-bottom: 2px solid #e5e3dd;
    white-space: nowrap;
  }
  .event-day-label.today {
    color: var(--purple-light);
    border-color: var(--purple);
  }
  .event-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    height: 100%;
  }
  .event-day-col { height: 100%; }
  .event-card:hover {
    border-color: rgba(23,23,23,0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(23,23,23,0.15);
  }
  .event-card.ev-live {
    border-color: rgba(239,68,68,0.5);
    box-shadow: 0 0 16px rgba(239,68,68,0.12);
  }
  .event-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
  }
  .event-card-img-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, rgba(23,23,23,0.2), rgba(23,23,23,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
  }
  .event-card-body {
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }
  .event-card-spacer { flex: 1; }
  .event-card-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 20px;
    align-self: flex-start;
    text-transform: uppercase;
  }
  .ev-status-upcoming { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
  .ev-status-live     { background: rgba(34,197,94,0.15);  color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
  .ev-status-ended    { background: rgba(107,114,128,0.15);color: #9ca3af; border: 1px solid rgba(107,114,128,0.25); }
  .event-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.3;
  }
  .event-card-meta {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .event-card-meta span { display: flex; align-items: center; gap: 4px; }
  .event-card-countdown {
    font-size: 11px;
    font-weight: 700;
    color: var(--purple-light);
    text-align: center;
    padding: 4px 6px;
    background: rgba(23,23,23,0.1);
    border-radius: 6px;
  }
  .event-card-cta {
    display: block;
    width: 100%;
    padding: 7px 0;
    background: var(--purple);
    color: white;
    border: none;
    border-radius: 7px;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    margin-top: auto;
  }
  .event-card-cta:hover { background: var(--purple-light); box-shadow: 0 0 12px var(--purple-glow); }
  .event-day-empty {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    padding: 16px 0;
    opacity: 0.5;
  }
  @media (max-width: 1100px) { .event-week-grid { grid-template-columns: repeat(4, 1fr) !important; } }
  @media (max-width: 700px)  { .event-week-grid { grid-template-columns: repeat(2, 1fr) !important; } }
  @media (max-width: 420px)  { .event-week-grid { grid-template-columns: 1fr !important; } }

  /* ─── CASINO REVIEWS ─── */
  .casino-filter-btn {
    padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
    border: 1px solid var(--border); background: rgba(255,255,255,0.04);
    color: var(--text-muted); cursor: pointer; font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    transition: all 0.2s;
  }
  .casino-filter-btn:hover { border-color: rgba(23,23,23,0.4); color: var(--purple-light); }
  .casino-filter-btn.active { background: var(--purple); border-color: var(--purple); color: #fff; }

  .casino-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 13px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column;
  }
  .casino-card:hover { border-color: rgba(23,23,23,0.3); box-shadow: 0 4px 20px rgba(23,23,23,0.08); }

  /* Rank-colored accent bar at top */
  .casino-rank-bar { height: 3px; width: 100%; flex-shrink: 0; }

  /* Main row — left + mid + right */
  .casino-main-row { display: flex; align-items: stretch; overflow: hidden; }
  /* Hide mobile groups on desktop */
  .casino-mobile-left-group,
  .casino-mobile-mid-group,
  .casino-mobile-right-group,
  .casino-mobile-bar { display: none; }

  /* Left — rank + logo + stars */
  .casino-left {
    width: 130px; min-width: 130px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; padding: 16px 12px; text-align: center;
    border-right: 1px solid var(--border);
    background: rgba(255,255,255,0.015);
  }
  .casino-rank-num { font-size: 13px; font-weight: 800; letter-spacing: 1px; }
  .casino-logo { max-width: 100px; max-height: 54px; object-fit: contain; display: block; }
  .casino-logo-ph {
    width: 90px; height: 48px; background: rgba(23,23,23,0.1); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
  }
  .casino-stars { display: flex; gap: 1px; justify-content: center; font-size: 12px; }
  .casino-trust-num { font-size: 20px; font-weight: 900; color: var(--white); line-height: 1; }
  .casino-trust-lbl { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

  /* Middle — name, tags, stats, highlights, payments */
  .casino-mid {
    flex: 1; min-width: 0;
    padding: 14px 16px;
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
  }
  .casino-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .casino-name { font-size: 16px; font-weight: 800; color: var(--white); }
  .casino-tag {
    padding: 2px 9px; border-radius: 8px; font-size: 10px; font-weight: 700;
    background: rgba(23,23,23,0.12); color: var(--purple-light); border: 1px solid rgba(23,23,23,0.22);
  }
  .casino-stats {
    display: flex; gap: 0; flex-shrink: 0;
    background: rgba(255,255,255,0.025); border: 1px solid var(--border);
    border-radius: 7px; overflow: hidden; align-self: flex-start; width: 100%;
  }
  .casino-stat { flex: 1; padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border); align-items: center; text-align: center; }
  .casino-stat:last-child { border-right: none; }
  .casino-stat-lbl { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
  .casino-stat-val { font-size: 13px; font-weight: 700; color: var(--white); white-space: nowrap; }
  .casino-stat-val.fast { color: #22c55e; }
  /* Highlights — always visible on desktop, collapsible on mobile */
  .casino-highlights-wrap { display: flex; flex-direction: column; gap: 4px; }
  .casino-highlights-wrap button { display: none; } /* hide toggle on desktop */
  .casino-highlights-body { display: flex; flex-direction: column; gap: 3px; }
  .casino-highlights-line {
    font-size: 13px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.6;
  }
  .casino-bottom-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
  .casino-license { font-size: 10px; color: var(--muted); padding: 3px 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 5px; display: inline-flex; align-items: center; gap: 4px; }
  .casino-payments { display: flex; gap: 5px; flex-wrap: wrap; }
  .casino-payment { padding: 3px 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 4px; font-size: 10px; font-weight: 600; color: var(--text-muted); }

  /* Right — CTA column */
  .casino-right {
    width: 200px; min-width: 200px;
    border-left: 1px solid var(--border);
    background: rgba(23,23,23,0.025);
    display: flex; flex-direction: column;
    align-items: stretch; justify-content: center;
    gap: 6px; padding: 14px 16px;
  }
  .casino-editor-badge {
    font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 8px;
    text-transform: uppercase; letter-spacing: 0.5px; text-align: center;
  }
  .casino-rating-row { display: flex; align-items: baseline; justify-content: space-between; }
  .casino-score-num { font-size: 28px; font-weight: 900; line-height: 1; }
  .casino-score-bar-wrap { width: 100%; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
  .casino-score-bar { height: 100%; border-radius: 2px; transition: width .6s; }
  .casino-divider { width: 100%; height: 1px; background: rgba(255,255,255,0.06); }
  .casino-bonus-lbl { font-size: 8px; font-weight: 700; color: var(--purple-light); text-transform: uppercase; letter-spacing: 1px; }
  .casino-bonus-txt { font-size: 11px; font-weight: 700; color: var(--white); line-height: 1.3; }
  .casino-visit-btn {
    display: block; width: 100%; padding: 8px 0; background: var(--purple); color: white;
    border: none; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif; text-decoration: none; text-align: center;
    transition: background 0.2s;
  }
  .casino-visit-btn:hover { background: var(--purple-light); }
  .casino-review-btn {
    display: block; width: 100%; padding: 7px 0; background: rgba(62,53,126,0.06); color: var(--purple);
    border: 1.5px solid var(--purple); border-radius: 7px; font-size: 11.5px; font-weight: 800;
    cursor: pointer; font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif; text-decoration: none; text-align: center;
    transition: background 0.2s, color 0.2s; letter-spacing: .2px;
  }
  .casino-review-btn:hover { background: var(--purple); color: #fff; }
  /* Mobile: make Read Review a distinctive purple outline button (key action on a review site) */
  .casino-mobile-review-btn {
    display: block; text-align: center; text-decoration: none; margin-top: 4px;
    font-size: 11px; font-weight: 800; letter-spacing: .2px;
    color: var(--purple); background: rgba(62,53,126,0.06);
    border: 1.5px solid var(--purple); border-radius: 999px; padding: 6px 14px; white-space: nowrap;
  }
  .casino-mobile-review-btn:hover { background: var(--purple); color: #fff; }
  .casino-fine-print { font-size: 8px; color: var(--muted); line-height: 1.5; text-align: center; }

  /* ── MOBILE ── */
  @media (max-width: 600px) {
    /* Thicker border on mobile */
    .casino-card { border: 2px solid rgba(23,23,23,0.4); }

    .casino-left { width: 110px; min-width: 110px; padding: 14px 10px; gap: 6px; }
    .casino-logo { max-width: 88px; max-height: 48px; }
    .casino-trust-num { font-size: 16px; }
    .casino-mid { padding: 10px 10px; gap: 6px; }
    .casino-name { font-size: 14px; }
    .casino-stat { padding: 4px 6px; }
    .casino-stat-lbl { font-size: 8px; }
    .casino-stat-val { font-size: 11px; white-space: normal; }
    .casino-highlights-line { white-space: normal; font-size: 11px; }
    .casino-tag { font-size: 9px; padding: 2px 6px; }
    .casino-payment { font-size: 9px; padding: 2px 6px; white-space: normal; }
    .casino-license { font-size: 9px; white-space: normal; }
    .casino-stats { display: flex; width: 100%; }
    .casino-stat { flex: 1; padding: 4px 6px; }
    .casino-bottom-row { flex-wrap: wrap; }

    /* Highlights dropdown on mobile */
    .casino-highlights-wrap button { display: flex !important; }
    .casino-highlights-body { display: none; margin-top: 4px; }
    .casino-highlights-wrap.open .casino-highlights-body { display: flex !important; }
    .casino-highlights-wrap.open .casino-highlights-arrow { transform: rotate(180deg); }
    .casino-highlights-line { white-space: normal; font-size: 11px; }

    /* Hide desktop right col, show mobile bar */
    .casino-right { display: none !important; }
    .casino-mobile-bar {
      display: flex !important; width: 100%;
      flex-direction: row; align-items: center;
      justify-content: space-between; gap: 8px;
      padding: 10px 14px;
      border-top: 2px solid rgba(23,23,23,0.4);
    }
    .casino-mobile-left-group { display: flex !important; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; flex-shrink: 0; }
    .casino-mobile-mid-group  { display: flex !important; flex: 1; min-width: 0; flex-direction: column; gap: 2px; justify-content: center; padding-left: 10px; }
    .casino-mobile-right-group { display: flex !important; flex-shrink: 0; flex-direction: column; gap: 4px; align-items: center; }
    /* Smaller Visit Site button on mobile */
    .casino-mobile-visit-btn {
      padding: 8px 12px; background: var(--purple); color: white;
      border: none; border-radius: 8px; font-size: 12px; font-weight: 700;
      cursor: pointer; font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
      text-decoration: none; text-align: center; white-space: nowrap; display: block;
    }
  }

  /* ─── Casino review card: clean vertical layout on mobile (values never break) ─── */
  @media (max-width: 600px) {
    #casinoReviewsPage .casino-main-row { flex-direction: column !important; }
    #casinoReviewsPage .casino-left {
      width: 100% !important; min-width: 0 !important;
      flex-direction: row !important; justify-content: flex-start !important;
      align-items: center !important; gap: 12px !important;
      border-right: none !important; border-bottom: 1px solid var(--border) !important;
      padding: 12px 14px !important; text-align: left !important;
    }
    #casinoReviewsPage .casino-left .casino-rank-num { flex-shrink: 0; font-size: 14px !important; }
    #casinoReviewsPage .casino-left .casino-logo { max-width: 84px !important; max-height: 40px !important; }
    #casinoReviewsPage .casino-left .casino-stars { font-size: 13px !important; }
    #casinoReviewsPage .casino-left > div:last-child { margin-left: auto !important; text-align: right !important; }
    #casinoReviewsPage .casino-left .casino-trust-num { font-size: 18px !important; }
    #casinoReviewsPage .casino-mid { padding: 12px 14px !important; gap: 11px !important; }
    #casinoReviewsPage .casino-name-row { gap: 6px !important; }
    #casinoReviewsPage .casino-stats { flex-direction: column !important; align-self: stretch !important; }
    #casinoReviewsPage .casino-stat {
      flex-direction: row !important; justify-content: space-between !important;
      align-items: center !important; text-align: left !important; gap: 12px !important;
      border-right: none !important; border-bottom: 1px solid var(--border) !important;
      padding: 9px 12px !important;
    }
    #casinoReviewsPage .casino-stat:last-child { border-bottom: none !important; }
    #casinoReviewsPage .casino-stat-lbl { font-size: 10px !important; flex-shrink: 0 !important; white-space: nowrap !important; }
    #casinoReviewsPage .casino-stat-val { font-size: 13px !important; white-space: normal !important; text-align: right !important; min-width: 0 !important; line-height: 1.35 !important; }
  }

/* ─── POINT MALL ─── */
  .mall-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 4px;
  }
  .mall-prize-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, transform 0.2s;
  }
  .mall-prize-card:hover { border-color: rgba(23,23,23,0.4); transform: translateY(-1px); }
  .mall-prize-img {
    width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  }
  .mall-prize-img-placeholder {
    width: 100%; aspect-ratio: 16/9;
    background: linear-gradient(135deg,rgba(23,23,23,0.2),rgba(23,23,23,0.08));
    display: flex; align-items: center; justify-content: center; font-size: 28px;
  }
  .mall-prize-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
  .mall-prize-cat {
    font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--purple-light); opacity: 0.8;
  }
  .mall-prize-name { font-size: 12px; font-weight: 700; color: var(--white); line-height: 1.3; }
  .mall-prize-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
  .mall-prize-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
  .mall-prize-cost {
    font-size: 13px; font-weight: 800; color: var(--purple-light);
    display: flex; align-items: center; gap: 3px;
  }
  .mall-qty-badge {
    font-size: 10px; padding: 2px 7px; border-radius: 20px;
    background: rgba(255,255,255,0.06); color: var(--text-muted); font-weight: 600;
  }
  .mall-claim-btn {
    width: 100%; padding: 7px 0; margin-top: 6px;
    background: var(--purple); color: white; border: none; border-radius: 7px;
    font-family: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif; font-size: 11px; font-weight: 700;
    cursor: pointer; transition: background 0.2s, box-shadow 0.2s;
  }
  .mall-claim-btn:hover { background: var(--purple-light); box-shadow: 0 0 12px var(--purple-glow); }
  .mall-claim-btn:disabled { background: rgba(255,255,255,0.08); color: var(--muted); cursor: not-allowed; }
  .mall-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
  .mall-filter-btn {
    font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--border);
    color: var(--text-muted); cursor: pointer; transition: all 0.15s;
  }
  .mall-filter-btn.active, .mall-filter-btn:hover {
    background: rgba(23,23,23,0.2); border-color: rgba(23,23,23,0.4); color: var(--purple-light);
  }
  /* Claim popup */
  .mall-claim-popup {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 10002;
    display: flex; align-items: center; justify-content: center; padding: 16px;
  }
  .mall-claim-popup-box {
    background: var(--dark2); border: 1px solid var(--border-s); border-radius: 18px;
    padding: 28px 24px; max-width: 360px; width: 100%; text-align: center;
  }

  /* ═══════════ PREMIUM NEUTRAL RESKIN — preview (2026-09-11) ═══════════
     White, editorial-minimal, monochrome. Sits on top of the flipped palette. */
  body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
  /* elegant serif headlines (Playfair already loaded) */
  .hero-main-title{ font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif !important; font-weight:700 !important; letter-spacing:-.3px; }
  .section-title{ font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif !important; font-weight:700 !important; font-size:23px !important; letter-spacing:-.2px !important; text-transform:none !important; }
  /* crisp white nav with a hairline */
  .navbar{ border-bottom:1px solid #ecebe6 !important; }
  .navbar::before{ background:rgba(255,255,255,.9) !important; backdrop-filter:saturate(180%) blur(14px) !important; }
  /* soft premium cards: hairline border + whisper shadow */
  .card,.list-card,.event-card{ background:#fff !important; border:1px solid #edece7 !important; box-shadow:0 1px 2px rgba(17,17,17,.04),0 8px 24px rgba(17,17,17,.05) !important; border-radius:14px !important; overflow:hidden; transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease !important; }
  .card:hover,.list-card:hover,.event-card:hover{ transform:translateY(-3px); box-shadow:0 6px 14px rgba(17,17,17,.07),0 20px 46px rgba(17,17,17,.10) !important; border-color:#e2e0d9 !important; }
  .card-title{ letter-spacing:-.1px; font-weight:600; }
  /* quiet buttons, no neon glow */
  .btn-login{ border-radius:10px !important; box-shadow:none !important; font-weight:600 !important; }
  .btn-login:hover{ background:#000 !important; box-shadow:none !important; }
  .see-all{ color:#6b6a64 !important; font-weight:600 !important; }
  .see-all:hover{ color:#111 !important; }
  /* refined dark-pill FABs */
  #gachaFab,#gachaInviteFab{ background:#1c1c1c !important; color:#fff !important; border:none !important; box-shadow:0 8px 26px rgba(17,17,17,.20) !important; border-radius:999px !important; }
  #gachaFab *,#gachaInviteFab *{ color:#fff !important; fill:#fff !important; }
  ::selection{ background:#1c1c1c; color:#fff; }
  ::-webkit-scrollbar-thumb{ background:#cfcdc6 !important; }
  /* ═══════════ MACHINES-STYLE LAYOUT v2 — bold sans, airy, clean ═══════════ */
  /* Big bold clean-sans section headers with a period (Apple/machines style) */
  .section-title, .cat-section-title{ font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Segoe UI',sans-serif !important; font-weight:800 !important; font-size:30px !important; letter-spacing:-0.8px !important; color:#111 !important; text-transform:none !important; line-height:1.12 !important; }
  .section-title::after, .cat-section-title::after{ content:'.'; color:#111; }
  .section-title::before, .cat-section-title::before{ display:none !important; }
  @media(max-width:600px){ .section-title, .cat-section-title{ font-size:23px !important; } }
  /* Airy space between sections; drop the underline for a clean Apple header */
  .cat-section-header, .section-header{ margin:60px 0 22px !important; border-bottom:none !important; padding-bottom:0 !important; align-items:baseline !important; }
  .hero-main-title{ font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Segoe UI',sans-serif !important; font-weight:800 !important; letter-spacing:-0.5px !important; }
  /* Ultra-clean image-forward cards */
  .card,.list-card,.event-card{ border:1px solid #eeece7 !important; box-shadow:0 1px 2px rgba(17,17,17,.03),0 10px 30px rgba(17,17,17,.045) !important; border-radius:16px !important; }
  .card:hover,.list-card:hover,.event-card:hover{ box-shadow:0 8px 18px rgba(17,17,17,.06),0 26px 54px rgba(17,17,17,.10) !important; }
  .see-all{ color:#8a8880 !important; font-weight:600 !important; }
  .see-all:hover{ color:#111 !important; }

  /* ═══ FABs → uniform icon-only circles (CSS only, no markup change) ═══ */
  #gachaFab, #gachaInviteFab{ width:56px !important; height:56px !important; min-width:0 !important; padding:0 !important; gap:0 !important; border-radius:50% !important; justify-content:center !important; align-items:center !important; border:none !important; right:20px !important; overflow:hidden; }
  #gachaFab > span:last-child, #gachaInviteFab > span:last-child{ display:none !important; }              /* hide text labels */
  #gachaFab > span:first-child > span, #gachaInviteFab > span:first-child > span{ display:none !important; } /* hide pulse rings */
  #gachaInviteFab{ background:#1c1c1c !important; box-shadow:0 8px 22px rgba(17,17,17,.22) !important; animation:none !important; bottom:20px !important; }
  #gachaInviteFab svg{ animation:none !important; width:26px !important; height:26px !important; filter:none !important; }
  #gachaFab{ background:#1c1c1c !important; border:none !important; box-shadow:0 8px 22px rgba(17,17,17,.22) !important; animation:none !important; bottom:88px !important; }
  #gachaFab > span:first-child{ width:auto !important; height:auto !important; }
  #gachaFab img{ width:30px !important; height:30px !important; box-shadow:none !important; }
  #gachaInviteFab svg{ width:28px !important; height:28px !important; }
  /* ═══════════ MACHINES FULL-WIDTH v3 — kill sidebars, single airy column ═══════════ */
  #homeSidebar, #homeMobileSidebar{ display:none !important; }
  .content-with-sidebar{ display:block !important; grid-template-columns:1fr !important; max-width:1180px !important; margin:0 auto !important; }
  #homeMainView .content-with-sidebar{ padding:0 24px !important; }
  #homeCategorySections{ width:100% !important; }
  /* Hero → full-width big banner (drop the side 'Also Trending') */
  .hero{ display:block; grid-template-columns:1fr !important; max-width:1180px; margin:22px auto 8px !important; padding:0 24px; }
  .hero-side{ display:none !important; }
  .hero-main{ width:100% !important; border-radius:18px !important; }
  .hero-main img{ height:460px !important; }
  @media(max-width:768px){ .hero{ padding:0 16px; } .hero-main img{ height:260px !important; } #homeMainView .content-with-sidebar{ padding:0 16px !important; } }
  /* ═══════════ EVENT STRIP (Free Credit Events) ═══════════ */
  #eventStrip .ex-head{ display:flex; justify-content:space-between; align-items:baseline; margin:58px 0 20px; }
  #eventStrip .evc-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
  @media(max-width:960px){ #eventStrip .evc-row{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:520px){ #eventStrip .evc-row{ grid-template-columns:1fr; } }
  #eventStrip .evc{ display:block; text-decoration:none; background:#fff; border:1px solid #edece7; border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(17,17,17,.03),0 10px 30px rgba(17,17,17,.045); transition:transform .25s,box-shadow .25s; }
  #eventStrip .evc:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(17,17,17,.06),0 22px 48px rgba(17,17,17,.10); }
  #eventStrip .evc-img{ height:118px; background-size:cover; background-position:center; background-color:#f2f0ec; }
  #eventStrip .evc-body{ padding:14px 14px 16px; }
  #eventStrip .evc-spon{ font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#8a8880; }
  #eventStrip .evc-title{ font-size:15px; font-weight:700; color:#161616; margin:4px 0 5px; line-height:1.3; }
  #eventStrip .evc-prize{ font-size:13px; color:#555; margin-bottom:13px; min-height:18px; }
  #eventStrip .evc-cta{ display:inline-block; font-size:12px; font-weight:700; color:#fff; background:#1c1c1c; padding:8px 14px; border-radius:999px; }
  /* ═══════════ SPORTS LIVE + CASINO TOP5 (interspersed) ═══════════ */
  .ex-section{ max-width:1180px; margin:0 auto; padding:0 24px; box-sizing:border-box; }
  .ex-section .ex-head{ display:flex; justify-content:space-between; align-items:baseline; margin:58px 0 20px; }
  @media(max-width:768px){ .ex-section{ padding:0 16px; } }
  /* Sports Live */
  .sl-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  @media(max-width:900px){ .sl-row{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:520px){ .sl-row{ grid-template-columns:1fr; } }
  .sl-card{ background:#fff; border:1px solid #edece7; border-radius:16px; padding:16px; box-shadow:0 1px 2px rgba(17,17,17,.03),0 10px 30px rgba(17,17,17,.045); }
  .sl-league{ font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#8a8880; text-align:center; margin-bottom:12px; }
  .sl-teams{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .sl-team{ flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
  .sl-team img{ width:40px; height:40px; object-fit:contain; }
  .sl-team span{ font-size:12px; font-weight:600; color:#222; line-height:1.2; }
  .sl-vs{ font-size:11px; font-weight:800; color:#bbb; }
  .sl-time{ text-align:center; font-size:12px; color:#666; margin:12px 0 12px; }
  .sl-cta{ display:block; text-align:center; font-size:12px; font-weight:700; color:#fff; background:#1c1c1c; padding:9px; border-radius:10px; text-decoration:none; }
  .sl-live{ background:#e11; }
  /* Casino Top5 */
  .cz-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
  @media(max-width:960px){ .cz-row{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:520px){ .cz-row{ grid-template-columns:1fr; } }
  .cz-card{ background:#fff; border:1px solid #edece7; border-radius:16px; padding:18px 16px; box-shadow:0 1px 2px rgba(17,17,17,.03),0 10px 30px rgba(17,17,17,.045); display:flex; flex-direction:column; align-items:center; text-align:center; }
  .cz-rank{ font-size:11px; font-weight:800; color:#c9c7c0; align-self:flex-start; margin-bottom:2px; }
  .cz-logo{ height:46px; max-width:120px; object-fit:contain; margin:2px 0 10px; }
  .cz-name{ font-size:15px; font-weight:800; color:#161616; }
  .cz-stars{ color:#f5b301; font-size:14px; letter-spacing:1px; margin:5px 0 3px; }
  .cz-trust{ font-size:11px; color:#8a8880; margin-bottom:12px; }
  .cz-cta{ display:block; width:100%; text-align:center; font-size:12px; font-weight:700; color:#fff; background:#1c1c1c; padding:9px; border-radius:10px; text-decoration:none; margin-top:auto; }
  /* ═══════════ UNIFORM WIDTH (all sections + nav align to 1180) ═══════════ */
  .ticker-inner{ max-width:1180px; margin:0 auto; } /* Breaking bar keeps its own width (excluded from 80%) */
  /* ═══════════ EXFUN POINTS INTRO (3-column, machines services style) ═══════════ */
  #exfunIntro{ margin:56px 0; box-sizing:border-box; } /* fills content-with-sidebar flush (80% system) */
  #exfunIntro .xf-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; border-top:1px solid #ecebe6; border-bottom:1px solid #ecebe6; padding:40px 0; }
  @media(max-width:768px){ #exfunIntro .xf-row{ grid-template-columns:1fr; gap:30px; } }
  #exfunIntro .xf-col{ text-align:center; padding:0 12px; }
  #exfunIntro .xf-ic{ display:inline-flex; margin-bottom:14px; color:#1c1c1c; }
  #exfunIntro .xf-h{ font-size:19px; font-weight:800; color:#161616; letter-spacing:-.3px; margin-bottom:8px; }
  #exfunIntro .xf-t{ font-size:13.5px; line-height:1.6; color:#6b6a64; max-width:300px; margin:0 auto 10px; }
  #exfunIntro .xf-l{ font-size:13px; font-weight:700; color:#111; text-decoration:none; }
  #exfunIntro .xf-l:hover{ text-decoration:underline; }
  /* ═══════════ UNIFIED 1280px WIDTH — all sections, edges aligned site-wide (Breaking bar excluded) ═══════════ */
  /* Outer, top-level section containers → fixed 1280px, centered, with a 24px side gutter.
     Matches games.php (/slots) and 4d.php (/4d) which use the same 1280 .wrap. */
  .nav-top, .nav-cats-inner, .hero, #eventStrip, #fdStrip, .content-with-sidebar,
  section[aria-label="About ExFunCity Malaysia"] > div{
    width:100% !important; max-width:1280px !important;
    margin-left:auto !important; margin-right:auto !important;
    padding-left:24px !important; padding-right:24px !important;
    box-sizing:border-box !important; }
  /* nav bar + About section keep their full-bleed background; only inner content is constrained */
  .nav-cats{ max-width:none !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; }
  section[aria-label="About ExFunCity Malaysia"]{ padding-left:0 !important; padding-right:0 !important; }
  /* Everything INSIDE content-with-sidebar fills it flush → identical left/right edges */
  .content-with-sidebar > *, #homeCategorySections, #homeCategorySections > *{
    width:auto !important; max-width:none !important;
    margin-left:0 !important; margin-right:0 !important;
    padding-left:0 !important; padding-right:0 !important;
    box-sizing:border-box !important; }
  /* carousel track flush to the section edge */
  .cx-track{ padding-left:0 !important; padding-right:0 !important; }
  /* Menu bar: all items fit within the 60% width, spread evenly, both ends flush */
  .nav-cats-inner{ justify-content:space-between !important; overflow:visible !important; gap:0 !important; }
  .nav-cat > a, .nav-cat > .cat-trigger{ padding:12px 5px !important; font-size:12px !important; letter-spacing:.2px !important; }
  .nav-cats-inner > .nav-cat:first-child > a, .nav-cats-inner > .nav-cat:first-child > .cat-trigger{ padding-left:0 !important; }
  .nav-cats-inner > .nav-cat:last-child > a, .nav-cats-inner > .nav-cat:last-child > .cat-trigger{ padding-right:0 !important; }
  @media(max-width:768px){
    .nav-top,.nav-cats-inner,.hero,#eventStrip,#fdStrip,.content-with-sidebar,
    section[aria-label="About ExFunCity Malaysia"] > div{ width:92% !important; max-width:92% !important; }
    /* phone: let the menu bar scroll again instead of squishing all items */
    .nav-cats-inner{ justify-content:flex-start !important; overflow-x:auto !important; }
    .nav-cat > a, .nav-cat > .cat-trigger{ padding:12px 10px !important; font-size:11px !important; }
    .nav-cats-inner > .nav-cat:first-child > a{ padding-left:0 !important; } }
  /* ═══════════ BLOG CAROUSEL (uniform cards, drag/scroll + arrows) ═══════════ */
  .cx-carousel{ position:relative; }
  .cx-track{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 10px; scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth; }
  .cx-track::-webkit-scrollbar{ display:none; }
  .cx-track > .card{ flex:0 0 clamp(242px,27.5%,282px) !important; scroll-snap-align:start; margin:0 !important; }
  .cx-arrow{ position:absolute; top:34%; z-index:6; width:40px; height:40px; border-radius:50%; border:1px solid #e7e5df; background:#fff; color:#111; font-size:22px; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(17,17,17,.10); display:flex; align-items:center; justify-content:center; transition:background .2s,color .2s; }
  .cx-arrow:hover{ background:#111; color:#fff; }
  .cx-prev{ left:-13px; } .cx-next{ right:-13px; }
  @media(max-width:768px){ .cx-arrow{ display:none; } .cx-track > .card{ flex:0 0 78% !important; } }
  /* (v6 superseded by the unified 80% block above) */
  /* ═══════════════════ NEUMORPHIC BLOG CARDS (light, soft embossed) — 2026-09-14 ═══════════════════ */
  .card, .cx-track > .card, .content-with-sidebar .card, #eventStrip .evc, .sl-card, .cz-card{
    background:#f3f0ea !important; border:none !important; border-radius:24px !important;
    box-shadow:8px 8px 18px #e0ddd4, -8px -8px 18px #ffffff !important;
    overflow:hidden !important; transition:transform .25s ease, box-shadow .25s ease !important;
  }
  .card:hover, .cx-track > .card:hover, #eventStrip .evc:hover, .sl-card:hover, .cz-card:hover{
    transform:translateY(-4px) !important;
    box-shadow:0 14px 26px rgba(60,50,90,.14) !important;
  }
  .card .card-img, .card .card-img-wrap{ border-radius:24px 24px 0 0 !important; }
  #eventStrip .evc-img{ border-radius:24px 24px 0 0 !important; }
  .card .card-body{ padding:16px 18px 18px !important; }
  /* soft chip for the category badge (matches the reference tag look) */
  .card .card-cat-badge{ border-radius:10px !important; box-shadow:0 4px 10px rgba(0,0,0,.12) !important; }
  /* give carousels vertical room so the soft shadow isn't clipped */
  .cx-track{ padding-top:16px !important; padding-bottom:28px !important; }
  /* ═══ GEO answer block at top of each article (auto from excerpt) ═══ */
  .article-answer{background:var(--purple-faint,rgba(62,53,126,.08));border:1px solid var(--border);border-left:3px solid var(--purple);border-radius:10px;padding:14px 16px;margin:0 0 22px;font-size:16px;line-height:1.7;color:var(--text);}
  .article-answer-label{display:block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--purple);margin-bottom:6px;}
  /* ═══════════════════ WHITE × PURPLE DREAM accent layer — 2026-09-15 ═══════════════════
     Clean white base (from preview.php) + dreamy violet accents & soft glows. */
  :root{
    --purple:#3E357E !important;
    --purple-light:#6A5FB0 !important;
    --purple-glow:rgba(62,53,126,.28) !important;
    --purple-faint:#EDECF6 !important;
  }
  html{ background:#F5F4FA !important; }
  body{
    color:#1c1c1c !important;
    background:
      radial-gradient(1000px 520px at 14% -8%, rgba(62,53,126,.16), transparent 60%),
      radial-gradient(880px 560px at 92% 2%, rgba(232,145,42,.10), transparent 55%),
      radial-gradient(760px 760px at 50% 120%, rgba(62,53,126,.08), transparent 62%),
      #F5F4FA !important;
    background-attachment:fixed !important;
  }
  /* CTAs that were near-black → dreamy purple gradient */
  #eventStrip .evc-cta, .cz-cta, .btn-login, #gachaFab, #gachaInviteFab,
  .sl-card a, .cz-card a, .match-cta{
    background:linear-gradient(135deg,#3E357E,#5B4FA0) !important;
    color:#fff !important;
    box-shadow:0 8px 22px rgba(62,53,126,.32) !important;
  }
  .btn-login:hover{ filter:brightness(1.07); background:linear-gradient(135deg,#3E357E,#5B4FA0) !important; }
  #gachaFab *, #gachaInviteFab *{ color:#fff !important; fill:#fff !important; }
  /* heading period + links */
  .section-title::after, .cat-section-title::after{ color:#6A5FB0 !important; }
  .see-all:hover{ color:#3E357E !important; }
  .cat-section-link:hover{ color:#3E357E !important; }
  /* nav active underline + hover → purple */
  .nav-cat.active > a::after, .nav-cat.active > .cat-trigger::after{ background:linear-gradient(90deg,#3E357E,#6A5FB0) !important; }
  .nav-cat > a:hover, .nav-cat > .cat-trigger:hover, .nav-cat.active > a{ color:#3E357E !important; }
  /* cards: cool-white + dreamy purple-tinted soft neumorphism */
  .card, .cx-track > .card, .content-with-sidebar .card, #eventStrip .evc, .sl-card, .cz-card{
    background:#FCFBFE !important;
    border:1px solid rgba(62,53,126,.09) !important;
    box-shadow:9px 9px 22px rgba(62,53,126,.10), -9px -9px 22px #ffffff !important;
  }
  .card:hover, .cx-track > .card:hover, #eventStrip .evc:hover, .sl-card:hover, .cz-card:hover{
    border-color:rgba(62,53,126,.20) !important;
    box-shadow:0 16px 34px rgba(62,53,126,.20) !important;
  }
  /* carousel arrows */
  .cx-arrow{ border-color:rgba(62,53,126,.22) !important; color:#3E357E !important; }
  .cx-arrow:hover{ background:linear-gradient(135deg,#3E357E,#5B4FA0) !important; color:#fff !important; border-color:transparent !important; }
  /* article answer block */
  .article-answer{ border-left-color:#6A5FB0 !important; background:#EDECF6 !important; }
  .article-answer-label{ color:#3E357E !important; }
  /* exfun points intro icons/links */
  #exfunIntro .xf-ic{ color:#3E357E !important; }
  #exfunIntro .xf-l{ color:#3E357E !important; }
  ::selection{ background:#3E357E; color:#fff; }
  ::-webkit-scrollbar-thumb{ background:#B4ADD8 !important; }
  /* ═══ Refined premium CTAs — ghost buttons that fill on hover (less repetitive, more premium) ═══ */
  #eventStrip .evc-cta, .cz-cta{
    background:transparent !important;
    color:var(--purple) !important;
    border:1.5px solid var(--border) !important;
    box-shadow:none !important;
    font-weight:700 !important;
    transition:background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease !important;
  }
  #eventStrip .evc-cta:hover, .cz-cta:hover{
    background:var(--purple) !important;
    color:#fff !important;
    border-color:var(--purple) !important;
    box-shadow:0 8px 20px var(--purple-glow) !important;
    transform:translateY(-1px);
  }
  /* ═══ Free Credit Events — single unified Join Telegram button ═══ */
  #eventStrip .evc-cta-wrap{ display:flex; justify-content:center; margin-top:28px; }
  #eventStrip .evc-join-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--purple); color:#fff !important; font-size:14px; font-weight:800; letter-spacing:.3px; padding:13px 36px; border-radius:999px; text-decoration:none; box-shadow:0 10px 26px var(--purple-glow); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; }
  #eventStrip .evc-join-btn:hover{ transform:translateY(-2px); filter:brightness(1.07); box-shadow:0 16px 34px var(--purple-glow); }
  /* ═══ Top 5 Casinos — whole card clickable, Visit as subtle sliding link (less repetitive, still per-casino) ═══ */
  .cz-card{ text-decoration:none !important; cursor:pointer; }
  #casinoTop5 .cz-cta, .cz-card .cz-cta{
    background:transparent !important; border:none !important; box-shadow:none !important;
    color:var(--purple) !important; font-weight:800 !important; font-size:13px !important;
    letter-spacing:.4px !important; padding:0 !important; margin-top:auto !important;
    display:inline-flex !important; align-items:center; gap:5px; width:auto !important;
    text-align:center; transition:gap .2s ease, filter .2s ease !important;
  }
  .cz-card:hover .cz-cta{ gap:10px !important; filter:brightness(1.1) !important; }
  /* Newsletter (STAY IN THE LOOP) → match section width (60%), keep inner padding */
  .newsletter{ width:60% !important; max-width:60% !important; margin-left:auto !important; margin-right:auto !important; }
  @media(max-width:768px){ .newsletter{ width:92% !important; max-width:92% !important; } }
  /* Footer → match homepage content width (.hpx = 1280 max) */
  .footer-inner, .footer-bottom{ width:auto !important; max-width:1280px !important; margin-left:auto !important; margin-right:auto !important; }
  @media(max-width:768px){ .footer-inner, .footer-bottom{ width:auto !important; max-width:100% !important; } }
  /* ═══ Bottom-right FABs — bigger + dynamic (float + pulse glow) ═══ */
  #gachaFab, #gachaInviteFab{ width:66px !important; height:66px !important; box-shadow:0 10px 28px var(--purple-glow) !important; animation:fabFloat 3s ease-in-out infinite, fabPulse 2.6s ease-out infinite !important; will-change:transform; }
  #gachaFab{ bottom:96px !important; animation-delay:0s, .3s !important; }
  #gachaInviteFab{ bottom:20px !important; animation-delay:.7s, 1.4s !important; }
  #gachaFab:hover, #gachaInviteFab:hover{ transform:scale(1.14) !important; animation-play-state:paused !important; box-shadow:0 14px 34px var(--purple-glow) !important; }
  #gachaFab img{ width:34px !important; height:34px !important; }
  #gachaInviteFab svg{ width:30px !important; height:30px !important; }
  @keyframes fabFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
  @keyframes fabPulse{ 0%{ box-shadow:0 10px 28px var(--purple-glow), 0 0 0 0 rgba(62,53,126,.45);} 70%{ box-shadow:0 10px 28px var(--purple-glow), 0 0 0 15px rgba(62,53,126,0);} 100%{ box-shadow:0 10px 28px var(--purple-glow), 0 0 0 0 rgba(62,53,126,0);} }
  /* ═══ Sub-pages (sports/events/casino/entertainment/18X) → match 60% section width ═══ */
  .sports-hero-wrap, .event-page-wrap, .adult-hero,
  #casinoReviewsPage > div, #entertainmentPage > div, #adultPage > div:not(.adult-hero){
    max-width:60% !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box; }
  .sports-hero-wrap{ border-radius:16px !important; }
  .adult-hero-inner{ max-width:none !important; }
  @media(max-width:768px){
    .sports-hero-wrap, .event-page-wrap, .adult-hero,
    #casinoReviewsPage > div, #entertainmentPage > div, #adultPage > div:not(.adult-hero){ max-width:92% !important; } }
  /* ═══════════ MOBILE COMPACT OVERHAUL (2026-09-15) ═══════════ */
  @media(max-width:768px){
    /* Hero: show the FULL banner image (no crop) */
    .hero-main img, .hero-main.fade-in img{ height:auto !important; max-height:none !important; object-fit:contain !important; }
    .hero-main, .hero-main.fade-in{ height:auto !important; }
    .hero{ margin:12px auto 6px !important; }
    .hero-main-title{ font-size:16px !important; line-height:1.25 !important; }
    .hero-main-content{ padding:12px 14px !important; }

    /* Menu bar: wrap ALL items into centered rows (no scroll) */
    .nav-cats-inner{ flex-wrap:wrap !important; justify-content:center !important; overflow:visible !important; column-gap:3px !important; row-gap:0 !important; }
    .nav-cat > a, .nav-cat > .cat-trigger{ padding:8px 9px !important; font-size:11px !important; }

    /* Free Credit Events → horizontal swipe (also lifts the CTA up) */
    #eventStrip .evc-row{ display:flex !important; grid-template-columns:none !important; overflow-x:auto !important; gap:12px !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px !important; scrollbar-width:none; }
    #eventStrip .evc-row::-webkit-scrollbar{ display:none; }
    #eventStrip .evc{ flex:0 0 76% !important; scroll-snap-align:start; }
    #eventStrip .evc-img{ height:132px !important; }
    #eventStrip .evc-cta-wrap{ margin-top:16px !important; }

    /* Blog carousels (News/Sports/Food/…): more direct — hide share row, tighten */
    .cx-track > .card .share-row{ display:none !important; }
    .cx-track > .card{ flex:0 0 84% !important; }
    .cx-track > .card .card-body{ padding:12px 14px 14px !important; }

    /* Top 5 Casinos: compact horizontal swipe, drop verbose trust line */
    .cz-row{ display:flex !important; grid-template-columns:none !important; overflow-x:auto !important; gap:12px !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px !important; scrollbar-width:none; }
    .cz-row::-webkit-scrollbar{ display:none; }
    .cz-card{ flex:0 0 44% !important; scroll-snap-align:start; padding:14px 12px !important; }
    .cz-trust{ display:none !important; }

    /* Tighter rhythm — shorter, less verbose page */
    .cat-section-header, .section-header, .ex-head, #eventStrip .ex-head{ margin:28px 0 14px !important; }
    .cat-section{ margin-bottom:18px !important; }
    #exfunIntro{ margin:30px 0 !important; }
    .section-title, .cat-section-title{ font-size:22px !important; }
  }
  /* ═══════════ MOBILE SIZE REFINEMENT — smaller + tidy uniform width (2026-09-15) ═══════════ */
  @media(max-width:768px){
    /* ONE tidy width (90%) for every section, aligned edges */
    .nav-top, .nav-cats-inner, .hero, #eventStrip, #fdStrip, .content-with-sidebar,
    section[aria-label="About ExFunCity Malaysia"] > div, .newsletter,
    .footer-inner, .footer-bottom, .sports-hero-wrap, .event-page-wrap, .adult-hero,
    #casinoReviewsPage > div, #entertainmentPage > div, #adultPage > div:not(.adult-hero){
      width:90% !important; max-width:90% !important; margin-left:auto !important; margin-right:auto !important; }

    /* Hero — full image, smaller overlay */
    .hero{ margin:10px auto 4px !important; }
    .hero-main-title{ font-size:14px !important; line-height:1.25 !important; }
    .hero-main-content{ padding:9px 12px !important; }
    .hero-cat-badge{ font-size:9px !important; padding:2px 8px !important; }

    /* Section titles + rhythm — smaller, tighter */
    .section-title, .cat-section-title{ font-size:18px !important; }
    .cat-section-header, .section-header, .ex-head, #eventStrip .ex-head{ margin:22px 0 11px !important; }
    .cat-section{ margin-bottom:14px !important; }
    .see-all, .cat-section-link{ font-size:11px !important; }
    #exfunIntro{ margin:26px 0 !important; }

    /* Free Credit Events — smaller swipe cards */
    #eventStrip .evc{ flex:0 0 60% !important; }
    #eventStrip .evc-img{ height:104px !important; }
    #eventStrip .evc-body{ padding:10px 12px 12px !important; }
    #eventStrip .evc-title{ font-size:13px !important; }
    #eventStrip .evc-spon{ font-size:10px !important; }
    #eventStrip .evc-prize{ font-size:12px !important; }

    /* Blog carousels — smaller cards + images */
    .cx-track > .card{ flex:0 0 66% !important; }
    .card-img{ height:126px !important; }
    .card-title{ font-size:13px !important; line-height:1.4 !important; }
    .card-body{ padding:11px 13px 12px !important; }

    /* Top 5 Casinos — smaller compact swipe */
    .cz-card{ flex:0 0 40% !important; padding:12px 10px !important; }
    .cz-logo{ max-height:34px !important; }
    .cz-name{ font-size:13px !important; }
    .cz-stars{ font-size:12px !important; }
    .cz-rank{ font-size:10px !important; }

    /* Buttons — smaller */
    #eventStrip .evc-join-btn{ font-size:12px !important; padding:10px 24px !important; }
    .match-cta{ font-size:12px !important; padding:9px 18px !important; }
    .btn-login{ padding:7px 13px !important; font-size:12px !important; }

    /* FABs a touch smaller on phone */
    #gachaFab, #gachaInviteFab{ width:56px !important; height:56px !important; }
    #gachaFab{ bottom:82px !important; }
  }
  /* ═══════════ MOBILE ALIGNMENT + NAV TIDY FIX (2026-09-15) ═══════════ */
  @media(max-width:768px){
    /* Zero all extra side padding so every 90% section shares the exact same L/R edges */
    .hero, #eventStrip, #fdStrip, .content-with-sidebar, #homeMainView .content-with-sidebar,
    #homeCategorySections, #homeCategorySections > *, .cat-section, .ex-section,
    .cx-carousel, .cx-track, #exfunIntro{
      padding-left:0 !important; padding-right:0 !important; }
    /* carousel arrows off on mobile (they overflow the flush edge) */
    .cx-arrow{ display:none !important; }

    /* Menu bar — tidy uniform centered wrap; 18X toned down so rows stay even */
    .nav-cats{ padding:3px 0 !important; }
    .nav-cats-inner{ flex-wrap:wrap !important; justify-content:center !important; align-items:center !important; overflow:visible !important; gap:2px 4px !important; padding:2px 0 !important; }
    .nav-cat{ flex:0 0 auto !important; }
    .nav-cat > a, .nav-cat > .cat-trigger{ padding:6px 9px !important; font-size:11.5px !important; white-space:nowrap; }
    .nav-cat.nav-adult > a{ background:transparent !important; border:none !important; box-shadow:none !important; animation:none !important; color:var(--purple) !important; font-weight:800 !important; padding:6px 9px !important; }
    .nav-cat.nav-adult.active > a{ background:transparent !important; }
    .nav-cat.nav-adult > a:hover{ transform:none !important; background:transparent !important; }
  }
  /* ═══════════ MOBILE HAMBURGER + LEFT DRAWER ═══════════ */
  .nav-hamburger, .nav-drawer-backdrop, .nav-drawer-close{ display:none; }
  @media(max-width:768px){
    .nav-hamburger{ display:inline-flex !important; flex-direction:column; justify-content:center; gap:4px; width:40px; height:40px; border:none; background:transparent; cursor:pointer; padding:9px; margin-right:2px; flex-shrink:0; order:-1; }
    .nav-hamburger span{ display:block; height:2.5px; width:22px; background:var(--text); border-radius:2px; transition:transform .25s, opacity .2s; }
    body.navdrawer-open .nav-hamburger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
    body.navdrawer-open .nav-hamburger span:nth-child(2){ opacity:0; }
    body.navdrawer-open .nav-hamburger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

    .nav-cats{ position:fixed !important; top:0 !important; left:0 !important; bottom:0 !important; width:64% !important; max-width:272px !important; height:100% !important; transform:translateX(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1) !important; z-index:10050 !important; background:var(--dark2) !important; box-shadow:6px 0 34px rgba(0,0,0,.22) !important; overflow-y:auto !important; border-bottom:none !important; padding:0 !important; backdrop-filter:none !important; }
    body.navdrawer-open .nav-cats{ transform:translateX(0) !important; }
    .nav-cats-inner{ flex-direction:column !important; flex-wrap:nowrap !important; align-items:stretch !important; justify-content:flex-start !important; width:100% !important; max-width:none !important; gap:0 !important; padding:56px 0 24px !important; overflow:visible !important; }
    .nav-cat{ width:100% !important; border-bottom:1px solid var(--border) !important; }
    .nav-cat > a, .nav-cat > .cat-trigger{ display:flex !important; align-items:center; gap:10px; width:100% !important; padding:15px 22px !important; font-size:14px !important; justify-content:flex-start !important; letter-spacing:.3px !important; }
    .nav-cat.active > a::after, .nav-cat.nav-adult.active > a::after{ display:none !important; }
    .nav-cat.nav-adult > a{ background:transparent !important; border:none !important; box-shadow:none !important; animation:none !important; color:var(--purple) !important; font-weight:800 !important; }

    .nav-drawer-backdrop{ display:block !important; position:fixed; inset:0; background:rgba(15,10,30,.5); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; z-index:10045; }
    body.navdrawer-open .nav-drawer-backdrop{ opacity:1; visibility:visible; }
    .nav-drawer-close{ display:flex !important; position:absolute; top:12px; right:14px; width:34px; height:34px; align-items:center; justify-content:center; border:none; background:var(--dark3); color:var(--text); border-radius:50%; font-size:15px; cursor:pointer; z-index:2; }
    body.navdrawer-open{ overflow:hidden; }
  }
  /* 18X drawer item: match other items (amber icon + dark label, aligned) — mobile only */
  @media(max-width:768px){
    .nav-cat.nav-adult > a{ color:var(--text) !important; font-weight:700 !important; }
    .nav-cat.nav-adult .nav-icon-wrap::before{ content:''; display:inline-block; width:15px; height:15px; flex:0 0 15px; background:#E39B00; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27black%27 d=%27M12.963 2.286a.75.75 0 0 0-1.071-.136 9.742 9.742 0 0 0-3.539 6.176 7.547 7.547 0 0 1-1.705-1.715.75.75 0 0 0-1.152-.082A9 9 0 1 0 15.68 4.534a7.46 7.46 0 0 1-2.717-2.248z%27/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27black%27 d=%27M12.963 2.286a.75.75 0 0 0-1.071-.136 9.742 9.742 0 0 0-3.539 6.176 7.547 7.547 0 0 1-1.705-1.715.75.75 0 0 0-1.152-.082A9 9 0 1 0 15.68 4.534a7.46 7.46 0 0 1-2.717-2.248z%27/%3E%3C/svg%3E") center/contain no-repeat; }
  }
  /* 18X drawer item: purple label + premium outline flame icon (mobile) */
  @media(max-width:768px){
    .nav-cat.nav-adult > a{ color:var(--purple) !important; font-weight:800 !important; }
    .nav-cat.nav-adult .nav-icon-wrap::before{ content:'' !important; display:inline-block !important; width:16px !important; height:16px !important; flex:0 0 16px !important; background:var(--purple) !important; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z%27/%3E%3C/svg%3E") center/contain no-repeat !important; mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z%27/%3E%3C/svg%3E") center/contain no-repeat !important; }
  }
  /* ═══════════ MOBILE: top bar + hero width + news vertical list ═══════════ */
  @media(max-width:768px){
    /* Top bar less crowded: smaller logo + login */
    .nav-top{ padding:8px 0 !important; gap:6px !important; }
    .logo-icon{ height:28px !important; width:auto !important; }
    .navbar .logo-text{ display:none !important; }
    /* logo sits left, right next to the hamburger (not centred) */
    .navbar .nav-top{ justify-content:flex-start !important; }
    .navbar .logo{ margin:0 !important; }
    .navbar .nav-actions{ margin-left:auto !important; }
    .nav-actions{ gap:6px !important; }
    .btn-login{ padding:6px 11px !important; font-size:11px !important; white-space:nowrap; }
    .nav-hamburger{ width:34px !important; height:34px !important; padding:7px !important; margin-right:0 !important; }

    /* Hero: exact same width as blog sections (90%, flush) */
    .hero{ width:90% !important; max-width:90% !important; margin:10px auto 8px !important; padding:0 !important; }
    .hero-main{ width:100% !important; margin:0 !important; }

    /* News & other blog carousels → vertical list, TITLE only, max 4 each */
    .cx-carousel{ position:static !important; }
    .cx-track{ display:block !important; overflow:visible !important; padding:0 !important; scroll-snap-type:none !important; }
    .cx-track > .card{ display:block !important; width:100% !important; flex:none !important; background:transparent !important; border:none !important; border-bottom:1px solid var(--border) !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important; transform:none !important; }
    .cx-track > .card:nth-child(n+5){ display:none !important; }
    .cx-track > .card .card-img-wrap{ display:none !important; }
    .cx-track > .card .card-body{ padding:13px 2px !important; }
    .cx-track > .card .card-body > *{ display:none !important; }
    .cx-track > .card .card-body > .card-title{ display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px !important; line-height:1.4 !important; margin:0 !important; }
    .cx-track > .card .share-row{ display:none !important; }
    .cx-arrow{ display:none !important; }
  }
  /* ═══ MOBILE: compact ExFun points + hide long SEO block ═══ */
  @media(max-width:768px){
    #exfunIntro{ margin:24px 0 !important; }
    #exfunIntro .xf-row{ gap:16px !important; padding:22px 0 !important; }
    #exfunIntro .xf-col{ padding:0 !important; }
    #exfunIntro .xf-h{ font-size:17px !important; margin-bottom:4px !important; }
    #exfunIntro .xf-t{ font-size:13px !important; margin-bottom:6px !important; max-width:none !important; }
    #exfunIntro .xf-ic{ margin-bottom:8px !important; }
    /* long SEO hub block → off mobile homepage (still in HTML for SEO; full version on /about) */
    section[aria-label="About ExFunCity Malaysia"]{ display:none !important; }
    .cat-section-header, .section-header, .ex-head, #eventStrip .ex-head{ margin:20px 0 10px !important; }
  }
  /* ═══ Telegram FAB position (3-stack) + join popup ═══ */
  #gachaTgFab{ bottom:20px !important; transition:transform .2s, box-shadow .2s; animation:fabFloat 3s ease-in-out infinite; animation-delay:1.1s; }
  #gachaTgFab:hover{ transform:scale(1.12) !important; box-shadow:0 14px 32px rgba(34,158,217,.55) !important; }
  #gachaInviteFab{ bottom:92px !important; }
  #gachaFab{ bottom:164px !important; }
  @media(max-width:768px){
    #gachaTgFab{ width:56px !important; height:56px !important; bottom:18px !important; }
    #gachaInviteFab{ bottom:82px !important; }
    #gachaFab{ bottom:146px !important; }
  }
  .tgpop-overlay{ display:none; position:fixed; inset:0; background:rgba(15,10,30,.6); z-index:10100; align-items:center; justify-content:center; padding:20px; }
  .tgpop-overlay.show{ display:flex; }
  .tgpop-box{ background:var(--dark2); border:1px solid var(--border); border-radius:20px; padding:34px 26px 30px; max-width:360px; width:100%; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.32); position:relative; animation:tgpopIn .3s cubic-bezier(.2,.8,.2,1); }
  @keyframes tgpopIn{ from{ opacity:0; transform:translateY(14px) scale(.97);} to{ opacity:1; transform:none; } }
  .tgpop-close{ position:absolute; top:12px; right:14px; width:32px; height:32px; border:none; background:var(--dark3); color:var(--text); border-radius:50%; cursor:pointer; font-size:15px; }
  .tgpop-icon{ width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,#2AABEE,#229ED9); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; box-shadow:0 8px 22px rgba(34,158,217,.4); }
  .tgpop-title{ font-size:20px; font-weight:800; color:var(--white); margin-bottom:8px; letter-spacing:-.3px; }
  .tgpop-sub{ font-size:14px; color:var(--text-muted); line-height:1.6; margin-bottom:22px; }
  .tgpop-btn{ display:inline-block; background:linear-gradient(135deg,#2AABEE,#229ED9); color:#fff; font-weight:800; padding:13px 30px; border-radius:999px; text-decoration:none; box-shadow:0 8px 22px rgba(34,158,217,.42); }
  .tgpop-snooze{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin-top:16px; }
  .tgpop-snooze button{ background:none; border:none; color:var(--text-muted); font-size:11.5px; cursor:pointer; padding:2px; text-decoration:underline; font-family:inherit; }
  .tgpop-snooze button:hover{ color:var(--white); }
  /* Telegram popup: smaller + one-line button */
  .tgpop-btn{ white-space:nowrap !important; }
  @media(max-width:768px){
    .tgpop-box{ max-width:300px !important; padding:24px 20px 22px !important; border-radius:18px !important; }
    .tgpop-icon{ width:48px !important; height:48px !important; margin-bottom:12px !important; }
    .tgpop-icon svg{ width:24px !important; height:24px !important; }
    .tgpop-title{ font-size:17px !important; margin-bottom:6px !important; }
    .tgpop-sub{ font-size:12.5px !important; line-height:1.5 !important; margin-bottom:16px !important; }
    .tgpop-btn{ font-size:13px !important; padding:11px 22px !important; }
    .tgpop-close{ width:28px !important; height:28px !important; top:10px !important; right:10px !important; }
  }
  /* Blog vertical list WITH cover thumbnail — bolder, cleaner (image left + strong headline + date) */
  @media(max-width:768px){
    .cx-track > .card{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:13px !important; padding:14px 0 !important; }
    .cx-track > .card .card-img-wrap{ display:block !important; flex:0 0 108px !important; width:108px !important; height:78px !important; border-radius:12px !important; overflow:hidden !important; }
    .cx-track > .card .card-img{ display:block !important; width:100% !important; height:78px !important; object-fit:cover !important; border-radius:12px !important; }
    .cx-track > .card .card-cat-badge{ display:none !important; }
    .cx-track > .card .card-body{ display:flex !important; flex-direction:column !important; justify-content:center !important; flex:1 1 auto !important; min-width:0 !important; padding:0 !important; }
    .cx-track > .card .card-body > *{ display:none !important; }
    .cx-track > .card .card-body > .card-title{ display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:15px !important; font-weight:800 !important; color:#161320 !important; letter-spacing:-.2px !important; line-height:1.34 !important; margin:0 !important; }
    .cx-track > .card .card-body > .card-footer{ display:flex !important; margin:5px 0 0 !important; }
    .cx-track > .card .card-body > .card-footer .card-actions{ display:none !important; }
    .cx-track > .card .card-date{ display:flex !important; font-size:11px !important; font-weight:600 !important; color:#9a97a4 !important; }
    .cx-track > .card .share-row{ display:none !important; }
  }
  /* 18X drawer item: identical size/weight to other items, only color = purple */
  @media(max-width:768px){
    .nav-cat.nav-adult > a{ color:var(--purple) !important; font-weight:700 !important; font-size:14px !important; letter-spacing:.3px !important; }
    .nav-cat.nav-adult .nav-icon-wrap::before{ width:14px !important; height:14px !important; flex:0 0 14px !important; background:var(--purple) !important; }
  }
  /* ═══ Drawer items: fully uniform height, icon size, alignment ═══ */
  @media(max-width:768px){
    .nav-cats-inner{ padding:54px 0 20px !important; gap:0 !important; }
    .nav-cat{ width:100% !important; border-bottom:1px solid var(--border) !important; margin:0 !important; }
    .nav-cat > a, .nav-cat > .cat-trigger{ display:flex !important; align-items:center !important; min-height:54px !important; padding:0 22px !important; margin:0 !important; font-size:14px !important; font-weight:700 !important; line-height:1.2 !important; }
    .nav-cat .nav-icon-wrap{ display:inline-flex !important; align-items:center !important; gap:12px !important; }
    .nav-cat .nav-icon-wrap svg{ width:18px !important; height:18px !important; flex:0 0 18px !important; }
    .nav-cat.nav-adult .nav-icon-wrap::before{ width:18px !important; height:18px !important; flex:0 0 18px !important; background:var(--purple) !important; }
    .nav-cat.nav-adult > a{ color:var(--purple) !important; font-weight:700 !important; font-size:14px !important; }
  }
  /* 18X drawer: force same left padding as other items (fix misalignment) */
  @media(max-width:768px){
    .nav-cat.nav-adult > a{ padding:0 22px !important; }
  }
  /* hero flush + exfun dividers + FAB align */
  #gachaTgFab{ right:20px !important; }
  @media(max-width:768px){
    #heroSection{ padding:0 !important; }
    #heroSection .hero-main{ width:100% !important; max-width:100% !important; margin:0 !important; }
    #exfunIntro .xf-col + .xf-col{ border-top:1px solid var(--border) !important; padding-top:20px !important; }
  }
  /* Page tab bars → single horizontal scrollable row (no wrap) */
  #entertainmentTabBar, #casinoTabBar, #adultTabBar{ flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  #entertainmentTabBar::-webkit-scrollbar, #casinoTabBar::-webkit-scrollbar, #adultTabBar::-webkit-scrollbar{ display:none; }
  #entertainmentTabBar .page-tab-card, #casinoTabBar .page-tab-card, #adultTabBar .page-tab-card{ flex:0 0 auto !important; white-space:nowrap !important; }
  /* Casino review card: stop horizontal overflow on mobile (tidy fit) */
  @media(max-width:600px){
    #casinoReviewsPage .casino-card{ width:100% !important; max-width:100% !important; overflow:hidden !important; }
    .casino-main-row{ min-width:0 !important; max-width:100% !important; }
    .casino-mid{ min-width:0 !important; overflow:hidden !important; }
    .casino-name-row{ min-width:0 !important; }
    .casino-stats{ min-width:0 !important; }
    .casino-stat{ min-width:0 !important; overflow:hidden !important; }
    .casino-stat-lbl{ white-space:normal !important; }
    .casino-stat-val{ white-space:normal !important; word-break:break-word !important; font-size:10.5px !important; line-height:1.3 !important; }
    .casino-mobile-bar{ min-width:0 !important; max-width:100% !important; overflow:hidden !important; }
    .casino-mobile-mid-group{ min-width:0 !important; overflow:hidden !important; }
    /* cap game tags to keep it clean */
    .casino-name-row .casino-tag:nth-of-type(n+6){ display:none !important; }
  }
  /* ═══════════════════ FREE CREDIT + BLOG CARDS — flat editorial (metrotimes-style) — 2026-09-17 ═══
     No card box: rounded cover + headline + date sit clean on the page — no grey
     base / border / heavy shadow. Subtle hover: cover zoom + slight lift.
     #eventStrip gets the same 24px side inset as .content-with-sidebar so every
     section shares identical left/right edges. */
  #eventStrip .evc-shell{ position:relative; }
  #eventStrip .evc-row{
    display:flex !important; grid-template-columns:none !important;
    gap:18px !important; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:4px 2px 8px !important; scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth;
  }
  #eventStrip .evc-row::-webkit-scrollbar{ display:none; }
  #eventStrip .evc{
    flex:0 0 clamp(188px,21.5%,220px) !important; scroll-snap-align:start;
    display:flex !important; flex-direction:column;
    background:transparent !important; border:none !important; box-shadow:none !important;
    border-radius:14px !important; overflow:hidden; text-decoration:none;
    transition:transform .28s cubic-bezier(.22,1,.36,1) !important;
  }
  #eventStrip .evc:hover{ transform:translateY(-4px) !important; }
  #eventStrip .evc-img{
    height:140px !important; flex:0 0 140px; border-radius:0 !important;
    background-size:cover; background-position:center; background-color:#efe9fa;
    transition:transform .5s cubic-bezier(.22,1,.36,1);
  }
  #eventStrip .evc:hover .evc-img{ transform:scale(1.06); }
  #eventStrip .evc-body{ padding:10px 1px 2px !important; }
  #eventStrip .evc-title{
    font-size:14.5px !important; font-weight:800; color:#161320; margin:0 0 3px !important;
    line-height:1.3; letter-spacing:-.2px;
    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  #eventStrip .evc-prize{
    font-size:12px !important; color:#8a8794; line-height:1.35; margin:0 !important;
    display:-webkit-box; -webkit-line-clamp:1; line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
  }
  /* hover-reveal scroll arrows */
  #eventStrip .evc-nav{
    position:absolute; top:64px; transform:translateY(-50%); z-index:8;
    width:38px; height:38px; border-radius:50%;
    border:1px solid #e9e5f4; background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
    color:#3a2b5e; font-size:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 16px rgba(70,45,140,.14);
    opacity:0; transition:opacity .28s ease, background .2s ease, transform .2s ease;
  }
  #eventStrip .evc-nav svg{ width:18px; height:18px; }
  #eventStrip .evc-shell:hover .evc-nav{ opacity:1; }
  #eventStrip .evc-nav:hover{ background:#fff; transform:translateY(-50%) scale(1.08); }
  #eventStrip .evc-prev{ left:-4px; }
  #eventStrip .evc-next{ right:-4px; }
  @media(min-width:769px){
    /* align Free Credit to the exact same left/right edges as every blog section */
    #eventStrip{ padding-left:24px !important; padding-right:24px !important; }
    /* Free Credit → one filled row of ALL sponsors (no scroll), edge-to-edge like News */
    #eventStrip .evc-row{
      display:grid !important; grid-template-columns:repeat(var(--evc-cols,5),minmax(0,1fr)) !important;
      gap:22px !important; overflow:visible !important; padding:4px 0 8px !important;
    }
    #eventStrip .evc{ flex:none !important; }
    #eventStrip .evc-nav{ display:none !important; }
  }
  @media(max-width:768px){
    #eventStrip .evc-nav{ display:none; }
    #eventStrip .evc{ flex:0 0 58% !important; }
    #eventStrip .evc-img{ height:120px !important; flex-basis:120px; }
  }
  /* ═══ BLOG CARDS — same flat editorial style as Free Credit (desktop) ═══
     Rounded cover → bold headline → date, clean on the page. No box.
     Mobile keeps its existing thumbnail+title list (untouched). */
  @media(min-width:769px){
    .cx-carousel{ position:relative; }
    /* latest 4, one row that fills the width edge-to-edge (metrotimes style) — no scroll */
    .cx-track{
      display:grid !important; grid-template-columns:repeat(4,1fr) !important;
      gap:22px !important; overflow:visible !important; padding:4px 0 8px !important;
    }
    .cx-arrow{ display:none !important; }
    .cx-track > .card{
      margin:0 !important; min-width:0 !important;
      background:transparent !important; border:none !important; box-shadow:none !important;
      border-radius:14px !important; overflow:hidden;
      transition:transform .28s cubic-bezier(.22,1,.36,1) !important;
    }
    .cx-track > .card:hover{ transform:translateY(-4px) !important; box-shadow:none !important; }
    .cx-track > .card .card-img, .cx-track > .card .card-img-wrap{ border-radius:0 !important; }
    .cx-track > .card .card-img{ height:150px !important; }
    .cx-track > .card:hover .card-img{ transform:scale(1.06); }
    .cx-track > .card .card-cat-badge{ display:none !important; }
    .cx-track > .card .card-body{ padding:11px 1px 2px !important; }
    .cx-track > .card .card-title{
      font-size:15px !important; font-weight:800 !important; color:#161320 !important;
      line-height:1.32 !important; letter-spacing:-.2px !important; margin:0 0 7px !important;
      -webkit-line-clamp:3 !important; flex:0 0 auto !important;
    }
    .cx-track > .card .card-footer{ font-size:12px !important; }
    .cx-track > .card .card-date{ color:#8a8794 !important; font-weight:600 !important; }
  }
/* ── index.php line 4519 ── */
.hpx{
    --p:#3E357E; --pl:#6A5FB0; --pf:#EDECF6; --bg:#F5F4FA; --card:#fff;
    --ink:#1c1c1c; --muted:#78766f; --border:#e8e6e1; --faint:#f4f3f0;
    --gold:#c79a3a; --green:#0b7a3b;
  }
@keyframes hpx-marq{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.hpx /* language switcher (top-right) */
  .lang{position:relative}
.hpx .sec{margin:40px 0 0}
.hpx .sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 18px}
.hpx .sec-t{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;font-weight:800;font-size:24px;letter-spacing:0;color:var(--ink);display:flex;align-items:center;gap:10px}
.hpx .sec-t::before{content:"";width:4px;height:22px;background:linear-gradient(var(--p),var(--pl));border-radius:2px}
.hpx .see{font-size:12px;font-weight:700;color:var(--p);text-transform:uppercase;letter-spacing:.5px}
.hpx .hero{margin-top:26px}
.hpx .caro{position:relative}
.hpx .track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.hpx .track::-webkit-scrollbar{display:none}
.hpx .slide{scroll-snap-align:center;flex:0 0 100%;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--border);box-shadow:0 10px 30px rgba(62,53,126,.08)}
.hpx .slide .imgwrap{position:relative;width:100%;aspect-ratio:16/9;background:#f4f3f7;overflow:hidden}
.hpx .slide .imgwrap .blur{display:none!important}
.hpx .slide .imgwrap img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
/* ── Hero + quad side-by-side (desktop): carousel left, 4 buttons stacked right ── */
.hpx .herowrap{display:flex;gap:18px;align-items:stretch;margin:28px 0 8px}
.hpx .herowrap .hero{flex:1 1 auto;min-width:0;margin:0!important}
.hpx .herowrap .quad{flex:0 0 300px;display:flex!important;flex-direction:column;gap:18px;margin:0!important}
.hpx .herowrap .quad .qb{margin:0;flex:1 1 0;justify-content:center}
.hpx .herowrap .hero{position:relative}
.hpx .herowrap .hero .dots{position:absolute;left:0;right:0;bottom:8px;margin-top:0;z-index:4}
@media(max-width:900px){
  .hpx .herowrap{flex-direction:column;align-items:stretch;gap:0;margin:20px 0 8px}
  .hpx .herowrap .hero{width:auto!important}
  .hpx .herowrap .quad{flex:0 0 auto;display:grid!important;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px!important}
}
.hpx .slide .cap{padding:16px 22px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hpx .slide .cap .meta{flex:1;min-width:220px}
.hpx .tag{display:inline-block;background:var(--pf);color:var(--p);font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:4px 11px;border-radius:6px;margin-bottom:9px}
.hpx .slide h2{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;font-weight:800;font-size:clamp(18px,2.4vw,27px);line-height:1.15;margin:0 0 4px;color:var(--ink)}
.hpx .slide .dt{font-size:12px;color:var(--muted)}
.hpx .slide .rd{display:inline-flex;align-items:center;gap:7px;background:var(--p);color:#fff;font-weight:800;font-size:13px;padding:11px 22px;border-radius:999px;flex-shrink:0}
.hpx .arw{position:absolute;top:34%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(62,53,126,.18);z-index:5;font-size:18px;color:var(--p)}
.hpx .arw.l{left:10px}
.hpx .arw.r{right:10px}
.hpx .dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.hpx .dot{width:8px;height:8px;border-radius:50%;background:var(--border);border:none;cursor:pointer;padding:0;transition:.2s}
.hpx .dot.on{background:var(--p);width:22px;border-radius:5px}
.hpx .quad{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.hpx .qb{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:8px;transition:transform .2s,box-shadow .2s;text-decoration:none}
.hpx .qb .nm,.hpx .qb .sb{text-decoration:none}
.hpx .qb:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(62,53,126,.14)}
.hpx .qb::after{content:"";position:absolute;right:-34px;top:-34px;width:118px;height:118px;border-radius:50%;opacity:.08}
.hpx .qb .qrow{display:flex;align-items:center;gap:12px;z-index:1}
.hpx .qb .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 18px rgba(62,53,126,.22);flex-shrink:0}
.hpx .qb .ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hpx .qb .nm{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:800;font-size:17px;letter-spacing:.2px;color:var(--ink);line-height:1.12}
.hpx .qb .sb{font-size:12px;color:var(--muted);z-index:1;padding-right:22px}
.hpx .qb .go{position:absolute;right:15px;bottom:13px;z-index:1;color:var(--p);opacity:.5}
.hpx .qb .go svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hpx .qb.q4d  .ic{background:linear-gradient(135deg,var(--p),var(--pl))}
.hpx .qb.q4d::after{background:var(--p)}
.hpx .qb.qgold .ic{background:linear-gradient(135deg,#b8862a,#e3bd5e)}
.hpx .qb.qgold::after{background:var(--gold)}
.hpx .qb.qpet  .ic{background:linear-gradient(135deg,#0b6b34,#2ea85c)}
.hpx .qb.qpet::after{background:var(--green)}
.hpx .qb.qnews .ic{background:linear-gradient(135deg,#4a4290,#7a6fc0)}
.hpx .qb.qnews::after{background:var(--pl)}
.hpx .qb .live{position:absolute;top:13px;right:13px;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:#e11d2b;text-transform:uppercase;letter-spacing:.5px;z-index:2}
.hpx .qb .live i{width:7px;height:7px;border-radius:50%;background:#e11d2b;animation:hpx-pulse 1s infinite}
@keyframes hpx-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hpx .today{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.hpx .tcard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:14px}
.hpx .tcard .tl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.hpx .tcard .tv{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:800;font-size:22px;color:var(--p);line-height:1}
.hpx .tcard .ti{width:40px;height:40px;border-radius:10px;background:var(--pf);display:flex;align-items:center;justify-content:center;color:var(--p)}
.hpx .tcard .ti svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.hpx .ev{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hpx .evc{position:relative;display:block;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--border);box-shadow:0 8px 22px rgba(62,53,126,.08);transition:transform .2s,box-shadow .2s}
.hpx .evc:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(62,53,126,.16)}
.hpx .evc img{width:100%;height:auto;display:block}
.hpx .evc .claim{position:absolute;right:10px;bottom:10px;background:#fff;color:var(--p);font-weight:800;font-size:12px;padding:7px 14px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.hpx .colwrap{display:block}
.hpx .dm-main{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hpx .card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.hpx .card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(62,53,126,.1)}
.hpx .card .im{aspect-ratio:16/9;background:#f4f3f7;position:relative;overflow:hidden}
.hpx .card .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hpx .card .im .t{position:absolute;top:10px;left:10px;background:var(--p);color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:5px}
.hpx .card .bd{padding:14px 15px 16px}
.hpx .card .tt{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;font-weight:700;font-size:16px;line-height:1.25;color:var(--ink);margin:0 0 7px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hpx .card .mt{font-size:11.5px;color:var(--muted)}
.hpx .card.big{grid-column:1/-1}
.hpx .card.big .im{aspect-ratio:21/9;max-height:340px}
.hpx .card.big .tt{font-size:22px;-webkit-line-clamp:2;line-clamp:2}
.hpx .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hpx /* Top 5 casinos — one per row */
  .c5{display:flex;flex-direction:column;gap:12px}
.hpx .cc{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 20px;transition:transform .2s,box-shadow .2s}
.hpx .cc:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(62,53,126,.1)}
.hpx .cc .rk{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:800;font-size:26px;color:var(--pl);width:38px;text-align:center;flex-shrink:0}
.hpx .cc .lg{width:64px;height:48px;border-radius:10px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.hpx .cc .lg img{width:100%;height:100%;object-fit:contain;padding:5px}
.hpx .cc .info{flex:1;min-width:0}
.hpx .cc .cn{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:800;font-size:21px;letter-spacing:.5px;line-height:1}
.hpx .cc .st{color:#f0b429;font-size:13px;margin:2px 0}
.hpx .cc .ts{font-size:11px;color:var(--muted)}
.hpx .cc .play{background:var(--p);color:#fff;font-weight:800;font-size:13px;padding:11px 28px;border-radius:999px;flex-shrink:0;white-space:nowrap}
.hpx .earn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.hpx .ecard{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px}
.hpx .ecard h3{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;font-weight:700;font-size:21px;margin:0 0 6px;color:var(--p)}
.hpx .ecard p{margin:0 0 10px;font-size:13.5px;color:var(--muted)}
.hpx .ecard a{font-weight:800;font-size:12px;color:var(--p);text-transform:uppercase;letter-spacing:.5px;text-decoration:none!important}
.hpx .intro{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:26px;margin-top:16px}
.hpx .intro h2{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;font-weight:800;font-size:25px;margin:0 0 14px;color:var(--ink)}
.hpx .intro .ig{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hpx .intro .ig h4{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;font-size:15px;margin:0 0 6px}
.hpx .intro .ig p{font-size:12.5px;color:var(--muted);margin:0}
.hpx /* widgets row */
  .side{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;align-items:stretch}
.hpx .swidget{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.hpx .swidget h4{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.8px;margin:0 0 12px;color:var(--ink);display:flex;align-items:center;gap:8px}
.hpx .swidget h4::before{content:"";width:3px;height:16px;background:linear-gradient(var(--p),var(--pl));border-radius:2px}
.hpx .srow{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--faint);align-items:flex-start}
.hpx .srow:last-child{border-bottom:none}
.hpx .srow .sn{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:800;font-size:20px;color:var(--pl);opacity:.55;line-height:.9}
.hpx .srow .stt{font-size:12.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hpx .chips{display:flex;flex-wrap:wrap;gap:8px}
.hpx .chip{background:var(--pf);color:var(--p);font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px}
.hpx /* Latest 4D widget (replaces leaderboard) */
  .fdw{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--faint)}
.hpx .fdw:last-child{border-bottom:none}
.hpx .fdw .dotc{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.hpx .fdw .op{font-size:12.5px;font-weight:700;color:var(--ink);width:84px;flex-shrink:0}
.hpx .fdw .pr{display:flex;gap:10px;align-items:baseline;margin-left:auto}
.hpx .fdw .pr .p1{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:800;font-size:19px;color:var(--p);letter-spacing:.5px}
.hpx .fdw .pr .p2{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:800;font-size:13px;color:var(--muted);letter-spacing:.5px}
.hpx .fdw .pr{gap:9px;font-variant-numeric:tabular-nums}
.hpx .fdw .pr .p1{display:inline-block;min-width:2.85em;text-align:right;font-variant-numeric:tabular-nums}
.hpx .fdw .pr .p2{display:inline-block;min-width:3em;text-align:right;font-variant-numeric:tabular-nums}
.hpx a.see{text-decoration:none!important}
.hpx .fdhead{display:flex;gap:10px;align-items:baseline;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:0 0 6px}
.hpx .fdhead .op{width:84px;flex-shrink:0}
.hpx .fdhead .pr{display:flex;gap:10px;margin-left:auto}
.hpx .fdhead .pr span:nth-child(1){width:38px;text-align:center}
.hpx .fdhead .pr span:nth-child(2), .hpx .fdhead .pr span:nth-child(3){width:30px;text-align:center}
.hpx footer{margin-top:54px;background:var(--p);color:#e7e4f3;padding:34px 0 26px}
.hpx footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.hpx footer h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.6px;margin:0 0 10px}
.hpx footer a{display:block;color:#cfc9ea;font-size:13px;padding:4px 0}
.hpx .note{background:var(--pf);border:1px solid #d9d4ee;color:var(--p);font-size:12.5px;padding:11px 16px;border-radius:12px;margin:14px 0 0;text-align:center;font-weight:600}
.hpx /* Telegram community card = "squishy card" (owner 2026-10-19, after the 21st.dev squishy-card; same fonts as before) */
  .tgcard{--sq:cubic-bezier(.68,-.6,.32,1.6);position:relative;overflow:hidden;padding:18px 20px 68px;border:none;border-radius:14px;background:linear-gradient(150deg,var(--p),#5a4fa0);color:#fff;text-align:left;transition:transform 1s var(--sq)}
.hpx .tgcard .tg-in{position:relative;z-index:1}
.hpx .tgcard .tg-bd{display:inline-block;margin-bottom:6px;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.3);color:#fff;font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-size:12px;font-weight:500;line-height:1.5}
.hpx .tgcard .tg-n{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:8px;margin:2px 0 8px;font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;font-weight:700;font-size:42px;line-height:1.1;letter-spacing:-.5px;transform:scale(.85);transform-origin:top left;transition:transform 1s var(--sq)}
.hpx .tgcard .tg-m{display:inline;font-size:20px;font-weight:700;letter-spacing:0;color:#fff}
.hpx .tgcard .tg-h{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Arial,sans-serif;font-weight:700;font-size:19px;line-height:1.3}
.hpx .tgcard .tg-p{margin:4px 0 0;font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-size:13px;line-height:1.45;color:#e4e0f6}
.hpx .tgcard .tg-j{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:block;padding:8px 12px;border:2px solid #fff;border-radius:8px;background:#fff;color:var(--p)!important;text-align:center;font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:800;font-size:13px;letter-spacing:.5px;text-transform:uppercase;text-decoration:none!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s ease,color .2s ease}
.hpx .tgcard .tg-j:hover,.hpx .tgcard .tg-j:focus-visible{background:rgba(255,255,255,.3);color:#fff!important}
.hpx .tgcard .tg-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;transition:transform 1s var(--sq)}
.hpx .tgcard .tg-bg circle,.hpx .tgcard .tg-bg ellipse{fill:rgba(0,0,0,.16);transform-box:fill-box;transform-origin:center;transition:transform 1s var(--sq) .2s}
@media(hover:hover){
  .hpx .tgcard:hover{transform:scale(1.05)}
  .hpx .tgcard:hover .tg-n{transform:scale(1)}
  .hpx .tgcard:hover .tg-bg{transform:scale(1.5)}
  .hpx .tgcard:hover .tg-bg circle{transform:translateY(-25px) scaleY(.5)}
  .hpx .tgcard:hover .tg-bg ellipse{transform:translateY(-25px) scaleY(2.25)}
}
@media(prefers-reduced-motion:reduce){.hpx .tgcard,.hpx .tgcard *{transition:none!important}}
.hpx /* floating speed-dial FAB (customer service + join group) */
  #fab{position:fixed;right:20px;bottom:20px;z-index:61;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:12px;pointer-events:none}
/* back to top (left of the FAB) — global (button lives on <body>, not inside .hpx) */
  #toTop{position:fixed;right:20px;bottom:84px;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--p);border:1px solid var(--border);cursor:pointer;box-shadow:0 8px 20px rgba(62,53,126,.28);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:.25s;z-index:10059}
  #toTop.show{opacity:1;visibility:visible;transform:none}
  #toTop:hover{background:var(--p);color:#fff}
  /* closed FAB container is a tall transparent box above its button — let clicks fall through to #toTop */
  #efSpeedDial{pointer-events:none} #efSpeedDial .efsd-toggle, #efSpeedDial.open .efsd-items, #efSpeedDial.open .efsd-item{pointer-events:auto}
  @media(max-width:600px){ #toTop{right:16px;bottom:76px;width:46px;height:46px} }
@media(max-width:900px){
.hpx .quad{grid-template-columns:repeat(2,1fr)}
.hpx .grid4{grid-template-columns:repeat(2,1fr)}
.hpx .today{grid-template-columns:1fr}
.hpx .ev{grid-template-columns:repeat(2,1fr)}
.hpx .side{grid-template-columns:1fr}
.hpx .earn, .hpx .intro .ig{grid-template-columns:1fr}
.hpx footer .cols{grid-template-columns:1fr 1fr}
}
.hpx /* mobile header: compact so lang switcher + Login + Register all fit */
  @media(max-width:640px){
    .hdr{gap:8px}
    .hdr .acc{gap:7px}
    .logo{font-size:23px}
    .lang-cur{padding:7px 10px;font-size:12px}
    .btn{padding:8px 13px;font-size:12px}
    /* nav → left slide-in drawer */
    .burger{display:flex}
    nav.cats{border-bottom:none}
    nav.cats .wrap{position:fixed;top:0;left:0;bottom:0;width:272px;max-width:82vw;background:#fff;flex-direction:column;align-items:stretch;justify-content:flex-start;height:100%;max-height:none;padding:14px 12px;gap:3px;transform:translateX(-100%);transition:transform .25s;z-index:81;box-shadow:0 0 44px rgba(0,0,0,.22);overflow-y:auto}
    nav.cats.open .wrap{transform:none}
    nav.cats a{padding:13px 14px;font-size:15px;border-radius:9px;letter-spacing:.3px}
    .nav-close{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 12px;margin-bottom:6px;border-bottom:1px solid var(--faint)}
    .nav-close .nt{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:800;font-size:20px;color:var(--p)}
    .nav-close button{border:none;background:var(--pf);width:34px;height:34px;border-radius:50%;cursor:pointer;color:var(--p);font-size:18px;display:flex;align-items:center;justify-content:center}
  }
@media(max-width:520px){
.hpx /* small phones: show emblem only, .hpx free up space */
    .lang-cur{padding:7px 9px}
}
@media(max-width:520px){
.hpx .dm-main{grid-template-columns:1fr}
.hpx .grid4{grid-template-columns:1fr 1fr}
.hpx .intro .ig{grid-template-columns:1fr 1fr}
.hpx .cc .play{padding:9px 16px}
.hpx .cc{gap:12px;padding:12px 14px}
}
.hpx /* ── mobile per-section blog layouts ── */
  @media(max-width:640px){
    /* News + Entertainment: horizontal cards (thumb left), 1 per row, show 3 */
    .sec-news .grid4,.sec-ent .grid4{grid-template-columns:1fr;gap:12px}
    .sec-news .card,.sec-ent .card{display:grid;grid-template-columns:120px 1fr;overflow:hidden}
    .sec-news .card .im,.sec-ent .card .im{aspect-ratio:auto;height:100%;min-height:86px}
    .sec-news .card .bd,.sec-ent .card .bd{padding:11px 13px;display:flex;flex-direction:column;justify-content:center}
    .sec-news .card .tt,.sec-ent .card .tt{-webkit-line-clamp:3;line-clamp:3}
    .sec-news .card:nth-child(n+4),.sec-ent .card:nth-child(n+4){display:none}
    /* Travel & Food: cover-forward cards (big image on top), 1 per row, show 3 */
    .sec-travel .grid4{grid-template-columns:1fr;gap:14px}
    .sec-travel .card .im{aspect-ratio:16/9}
    .sec-travel .card:nth-child(n+4){display:none}
    /* Sports: 3 portrait cards in one row */
    .sec-sports .grid4{grid-template-columns:repeat(3,1fr);gap:9px}
    .sec-sports .card .tt{font-size:11.5px;-webkit-line-clamp:3;line-clamp:3}
    .sec-sports .card .im .t{font-size:8px;padding:2px 5px}
    .sec-sports .card:nth-child(n+4){display:none}
    /* Don't Miss: single column on phones */
    .dm-main{grid-template-columns:1fr}
    /* Viral: 2 per row (default) show 4 — leave as grid */
    /* Trending widget: justify the titles */
    .srow .stt{text-align:justify}
  }
#heroSection{display:none!important}
.newsletter{display:none!important}
section[aria-label="About ExFunCity Malaysia"]{display:none!important}
.hpx{max-width:1280px!important;margin:0 auto!important;padding:0 24px!important;box-sizing:border-box}
/* ── MOBILE: whole page at 90% width, no horizontal overflow ── */
@media(max-width:600px){
  html,body{overflow-x:hidden!important;}
  .hpx{width:90%!important;max-width:90%!important;padding-left:0!important;padding-right:0!important;}
  .page div[style*="max-width:1280px"]{width:90%!important;max-width:90%!important;padding-left:0!important;padding-right:0!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important;}
  .footer-inner,.footer-bottom{width:90%!important;max-width:90%!important;margin-left:auto!important;margin-right:auto!important;}
}
.hpx .hero{max-width:none!important;padding:0!important;margin:28px 0 8px!important;display:block!important;width:auto!important}
.hpx .c5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.hpx .c5 .cc{flex-direction:column;text-align:center;gap:6px;padding:16px 12px}
.hpx .c5 .cc .rk{width:auto}
.hpx .c5 .cc .lg{margin:2px auto 6px}
.hpx .c5 .cc .info{min-width:0}
.hpx .c5 .cc .play{width:100%;margin-top:6px}
@media(max-width:600px){.hpx .c5{grid-template-columns:1fr}.hpx .c5 .cc{flex-direction:row;text-align:left}.hpx .c5 .cc .lg{margin:0}.hpx .c5 .cc .play{width:auto}}
/* ── index.php line 4778 ── */
/* ═══ HOME CARDS v3 (2026-10-16) — article cards B · quick cards A (Top 5 podium tried, user reverted to the 5 cards) ═══ */
/* article cards: hairline border, no shadow, category · date line above the title, "Read →" at the foot */
.hpx .grid4 > .card, .hpx .dm-main > .card{background:#fff!important;border:1px solid #e7e4ef!important;border-radius:14px!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;transition:border-color .2s ease,transform .2s ease!important}
.hpx .grid4 > .card:hover, .hpx .dm-main > .card:hover{border-color:var(--pl)!important;transform:translateY(-2px)!important;box-shadow:none!important}
.hpx .grid4 > .card .im, .hpx .dm-main > .card .im{border-radius:0!important}
.hpx .grid4 > .card .bd, .hpx .dm-main > .card .bd{padding:14px 16px 16px!important;display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.hpx .card .ey{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--p);line-height:1.35}
.hpx .card .ey .ed{color:var(--muted);font-weight:600;text-transform:none;letter-spacing:.2px}
.hpx .grid4 > .card .tt, .hpx .dm-main > .card .tt{font-size:15px!important;line-height:1.4!important;font-weight:700!important;margin:0!important}
.hpx .card .rdm{margin-top:auto;padding-top:4px;font-size:12px;font-weight:800;letter-spacing:.4px;color:var(--p)}
@media (prefers-reduced-motion:no-preference){
  .hpx .grid4 > .card .im img, .hpx .dm-main > .card .im img{transition:transform .5s ease}
  .hpx .grid4 > .card:hover .im img, .hpx .dm-main > .card:hover .im img{transform:scale(1.04)}
}
@media(max-width:900px){
  .hpx .grid4 > .card .bd, .hpx .dm-main > .card .bd{padding:11px 12px 13px!important;gap:6px}
  .hpx .grid4 > .card .tt{font-size:13.5px!important}
  .hpx .grid4 > .card .rdm{display:none}
  .hpx .card .ey{font-size:10px;letter-spacing:.5px}
}
/* quick cards: big title as before; today's numbers as plain small lines; date pill top-right */
.hpx .qb::after{display:none!important}
.hpx .qb .qd{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.2px;padding:3px 9px;border-radius:999px;background:var(--pf);color:var(--p);white-space:nowrap;flex-shrink:0;line-height:1.5}
.hpx .qb .qv{font-size:13px;font-weight:400;color:var(--ink);line-height:1.45;z-index:1;font-variant-numeric:tabular-nums;padding-right:22px}
.hpx .qb .qv .qn{color:var(--p)}
.hpx .qb .qv .qs{color:var(--muted)}
.hpx .qb .qv.qt{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:900px){
  .hpx .qb .qrow{flex-wrap:wrap;row-gap:10px;column-gap:8px}
  .hpx .qb .ic{width:38px;height:38px;border-radius:11px}
  .hpx .qb .ic svg{width:20px;height:20px}
  .hpx .qb .qd{font-size:9.5px;padding:2px 7px}
  .hpx .qb .nm{order:3;flex-basis:100%}
  .hpx .qb .qv{padding-right:0;font-size:12.5px}
  .hpx .qb .sb{padding-right:0}
  .hpx .qb .go{display:none}
}
/* ── index.php line 4817 ── */
/* ═══ HOME FEATURED FAN + TOP 5 ROWS (2026-10-19) ═══ */
/* Featured = coverflow (owner, after the 21st.dev card-carousel / Swiper coverflow): landscape 16:9 covers side by side,
   the active one in front, neighbours pushed back (translateZ, no rotation). No white panel. Card = 76% of the column,
   max 560px; stage height is pure CSS (container units) so nothing jumps. On phones the stage bleeds to the screen edges. */
.hpx .fanbox{position:relative;container-type:inline-size}
.hpx .fstage{position:relative;height:240px;height:calc(min(76cqw,640px)*.5625 + 36px);perspective:1200px;overflow:hidden;touch-action:pan-y;outline:none}
/* phones: bleed to the screen edges via % of the 90%-wide column (not 100vw, which counts a desktop scrollbar and let the page pan sideways) */
@media(max-width:600px){.hpx .fstage{margin:0 -5.5556%}}
/* phones: the page never pans sideways (clip where supported; the older overflow-x:hidden rule stays as fallback) */
@media(max-width:600px){html,body{overflow-x:clip!important}}
.hpx .fstage:focus-visible{box-shadow:inset 0 0 0 2px var(--pl);border-radius:14px}
.hpx .fcard{position:absolute;left:50%;top:18px;width:300px;width:min(76cqw,640px);aspect-ratio:16/9;margin-left:-150px;margin-left:calc(min(76cqw,640px)/-2);border-radius:14px;overflow:hidden;background:#efedf5;box-shadow:0 14px 30px rgba(30,24,70,.20);cursor:pointer;transition:transform .6s cubic-bezier(.25,.8,.25,1),opacity .45s ease;will-change:transform;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.hpx .fcard img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.hpx .fanbox .cap{padding:16px 2px 30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;cursor:pointer;transition:opacity .17s ease}
.hpx .fanbox .cap .meta{flex:1;min-width:220px}
.hpx .fanbox h2{font-weight:800;font-size:clamp(18px,2.4vw,27px);line-height:1.15;margin:0 0 4px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.45em}
@media(min-width:1024px){.hpx .fanbox h2{-webkit-line-clamp:2;line-clamp:2;min-height:2.3em}}
.hpx .fanbox .rd .rd-s{display:none}
/* phones (owner): button beside the title in every language, like the 中文 layout — no wrap, smaller button */
@media(max-width:600px){.hpx .fanbox .cap{flex-wrap:nowrap;gap:12px}.hpx .fanbox .cap .meta{min-width:0}.hpx .fanbox h2{font-size:17px}.hpx .fanbox .rd{height:32px;box-sizing:border-box;padding:0 14px;font-size:12.5px;line-height:1;gap:4px}.hpx .fanbox .rd .rd-l{display:none}.hpx .fanbox .rd .rd-s{display:inline}}
.hpx .fanbox .dt{font-size:12px;color:var(--muted)}
.hpx .fanbox .rd{display:inline-flex;align-items:center;gap:7px;background:var(--p);color:#fff;font-weight:800;font-size:13px;padding:11px 22px;border-radius:999px;flex-shrink:0}
@media(prefers-reduced-motion:reduce){.hpx .fcard{transition:opacity .2s ease}}
/* Desktop (owner): the carousel takes the full width; the four quick cards (4D / gold / petrol / news) sit in one row under it.
   Phones keep the 2×2 grid from the ≤900px rule. */
.hpx .herowrap{flex-direction:column;align-items:stretch;gap:0}
.hpx .herowrap .hero{width:auto!important}
.hpx .herowrap .quad{flex:0 0 auto;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:20px!important}
@media(max-width:900px){.hpx .herowrap .quad{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px!important}}
/* Phones (owner: "these 4 can be smaller"): tighter quick cards — smaller icon, title, numbers and padding */
@media(max-width:600px){
  .hpx .herowrap .quad{gap:10px;margin-top:12px!important}
  .hpx .qb{padding:11px 12px 11px;gap:5px;border-radius:14px}
  .hpx .qb .qrow{row-gap:7px}
  .hpx .qb .ic{width:30px;height:30px;border-radius:9px;box-shadow:0 5px 12px rgba(62,53,126,.2)}
  .hpx .qb .ic svg{width:16px;height:16px}
  .hpx .qb .qd{font-size:9px;padding:2px 6px}
  .hpx .qb .nm{font-size:15.5px}
  .hpx .qb .qv{font-size:12px;line-height:1.4}
  .hpx .qb .sb{font-size:11px;line-height:1.35}
}

/* /sports comparison table controls + result (owner, after the 21st.dev comparison-table) */
#sportsPage .sbc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:2px 0 10px}
#sportsPage .sbc-q,#sportsPage .sbc-f{font:inherit;font-size:13.5px;color:var(--text);height:38px;border:1px solid var(--border);border-radius:10px;background:#fff;padding:0 12px}
#sportsPage .sbc-q{flex:1 1 180px;max-width:260px}
#sportsPage .sbc-f{flex:0 1 220px;cursor:pointer}
#sportsPage .sbc-q:focus,#sportsPage .sbc-f:focus{outline:none;border-color:var(--purple-light);box-shadow:0 0 0 3px rgba(106,95,176,.18)}
#sportsPage .sbc-reset{font:inherit;font-size:13px;font-weight:700;height:38px;padding:0 16px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);cursor:pointer}
#sportsPage .sbc-reset:hover{background:#f4effc;color:var(--purple)}
#sportsPage .sbc-hint{flex:1 1 100%;font-size:12.5px;color:var(--text-muted)}
#sportsPage .sb-spec-table tr.sbc-on td{background:#f4effc}
#sportsPage .sb-spec-table tr[hidden]{display:none!important}
#sportsPage .sb-spec-table th.sbc-col{text-align:center}
#sportsPage .sb-spec-table td.sbc-cell{text-align:center;white-space:nowrap}
#sportsPage .sbc-btn{font:inherit;font-size:12.5px;font-weight:700;height:32px;padding:0 14px;border:1px solid rgba(62,53,126,.45);border-radius:8px;background:#fff;color:var(--purple);cursor:pointer;transition:background .15s,color .15s,opacity .15s}
#sportsPage .sbc-btn:hover{background:#f4effc}
#sportsPage .sbc-btn.on{background:#ef4444;border-color:#ef4444;color:#fff}
#sportsPage .sbc-btn:disabled{opacity:.4;cursor:not-allowed}
#sportsPage .sbc-res{border:1px solid var(--border);border-radius:14px;background:#fff;padding:14px 16px;margin:6px 0 10px}
#sportsPage .sbc-rt{font-size:16px;font-weight:800;color:var(--text);margin:0 0 10px}
#sportsPage .sbc-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:0;font-size:13.5px}
#sportsPage .sbc-grid>div{padding:8px 10px;border-top:1px solid var(--border);color:var(--text)}
#sportsPage .sbc-grid>.sbc-h{border-top:0;font-weight:800;font-size:12px;letter-spacing:.3px;text-transform:uppercase;color:var(--text-muted)}
#sportsPage .sbc-grid>.sbc-k{color:var(--text-muted);font-weight:600}
#sportsPage .sbc-grid>.win{color:#16a34a;font-weight:800}
@media(max-width:600px){
  #sportsPage .sbc-q,#sportsPage .sbc-f{flex:1 1 100%;max-width:none}
  #sportsPage .sb-spec-table td.sbc-cell{grid-column:1 / -1}
  #sportsPage .sb-spec-table td.sbc-cell::before{display:none!important}
  #sportsPage .sbc-btn{width:100%;height:38px}
  #sportsPage .sb-spec-table tr.sbc-on{border-color:var(--purple-light)}
  #sportsPage .sb-spec-table tr.sbc-on td{background:transparent}
  #sportsPage .sb-spec-table tr.sbc-on{background:#f4effc}
}
/* /sports provider cards on phones: show the score + Read Review row again (owner: "没有 cta read review") */
@media(max-width:600px){
  #sportsPage .casino-card.sb-prov .casino-right{display:flex!important;padding:12px 14px 14px!important}
  #sportsPage .casino-card.sb-prov .casino-score-bar-wrap{display:none!important}
  #sportsPage .casino-card.sb-prov .casino-right .casino-review-btn{flex:1 1 auto;min-width:0;text-align:center}
  #sportsPage .casino-card.sb-prov .casino-fine-print{width:100%;text-align:center}
}
/* review panels' Bet Now / Visit button: the homepage "Claim Now" shine (owner) */
.crv-cta{position:relative;overflow:hidden;isolation:isolate;--efx:100%;animation:efShine 3.2s cubic-bezier(.35,.1,.25,1) infinite}
.crv-cta .crv-ct{position:relative;z-index:1;-webkit-mask-image:linear-gradient(-75deg,#000 calc(var(--efx) + 20%),rgba(0,0,0,.55) calc(var(--efx) + 30%),#000 calc(var(--efx) + 100%));mask-image:linear-gradient(-75deg,#000 calc(var(--efx) + 20%),rgba(0,0,0,.55) calc(var(--efx) + 30%),#000 calc(var(--efx) + 100%))}
.crv-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(-75deg,transparent calc(var(--efx) + 12%),rgba(255,255,255,.45) calc(var(--efx) + 25%),transparent calc(var(--efx) + 38%));pointer-events:none}
.crv-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(-75deg,rgba(255,255,255,.2) calc(var(--efx) + 20%),rgba(255,255,255,.85) calc(var(--efx) + 25%),rgba(255,255,255,.2) calc(var(--efx) + 100%));-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
@media(prefers-reduced-motion:reduce){.crv-cta{animation:none}}
/* Top 5 = flight cards (owner, after the 21st.dev flight-card): badge row · [logo+name+licence+review] [deposit ── speed ── max] [bonus % + Play] */
.hpx .fcs{display:flex;flex-direction:column;gap:14px}
.hpx .fc{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 22px 20px;box-shadow:0 1px 2px rgba(28,22,64,.05);transition:box-shadow .2s ease}
@media(hover:hover){.hpx .fc:hover{box-shadow:0 10px 26px rgba(62,53,126,.12)}}
.hpx .fcs.fc-anim .fc{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease,box-shadow .2s ease}
.hpx .fcs.fc-anim .fc.in{opacity:1;transform:none}
.hpx .fc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.hpx .fc-bd{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border:1px solid var(--border);border-radius:999px;background:var(--pf);color:var(--p);font:700 12px/1.3 'Inter','PingFang SC','Microsoft YaHei',sans-serif}
.hpx .fc-ts{font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.hpx .fc-g{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:16px 28px;align-items:center}
.hpx .fc-id{display:flex;align-items:center;gap:12px;min-width:0}
.hpx .fc-lg{width:44px;height:44px;border-radius:10px;background:#f3f2ee;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.hpx .fc-lg img{width:100%;height:100%;object-fit:contain;padding:4px;display:block}
.hpx .fc-lg.dk{background:#1c1a2e}
.hpx .fc-nm{min-width:0}
.hpx .fc-n{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;font-weight:800;font-size:17px;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpx .fc-l{font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpx .fc-rv{display:inline-block;margin-top:9px;font-size:13px;font-weight:600;color:var(--p)!important;text-decoration:none!important;white-space:nowrap}
.hpx .fc-rv:hover{text-decoration:underline!important;text-underline-offset:4px}
.hpx .fc-t{display:flex;align-items:center;gap:12px;min-width:0}
.hpx .fc-e{text-align:center;flex-shrink:0}
.hpx .fc-e b{display:block;font-family:'Inter','PingFang SC','Microsoft YaHei',sans-serif;font-weight:800;font-size:17px;line-height:1.2;color:var(--ink);white-space:nowrap}
.hpx .fc-e b em{font-style:normal;font-size:11px;font-weight:600;color:var(--muted)}
.hpx .fc-e small{display:block;margin-top:3px;font-size:11px;color:var(--muted);white-space:nowrap}
.hpx .fc-m{flex:1;min-width:46px;text-align:center}
.hpx .fc-d{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap}
.hpx .fc-ln{position:relative;display:block;height:1px;margin:7px 0;background:var(--border)}
.hpx .fc-ln i{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--p);border:2px solid var(--card)}
.hpx .fc-s{display:block;font-size:11.5px;font-weight:600;color:var(--p);white-space:nowrap}
.hpx .fc-p{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right;min-width:0}
.hpx .fc-pc{font-family:'Inter','PingFang SC','Microsoft YaHei',sans-serif;font-weight:800;font-size:26px;line-height:1.1;color:var(--ink)}
.hpx .fc-o{margin-top:3px;font-size:13px;line-height:1.35;color:#16a34a}
.hpx .fc-by{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:9px;background:var(--p);color:#fff!important;font-weight:700;font-size:14px;text-decoration:none!important;white-space:nowrap;transition:background .2s ease}
.hpx .fc-by svg{width:16px;height:16px;flex-shrink:0}
.hpx .fc-by:hover{background:var(--pl)}
/* phones: stacked like the component — casino row (review link on the right), the deposit/speed/max line, then bonus + Play side by side */
@media(max-width:700px){
  .hpx .fcs{gap:12px}
  .hpx .fc{padding:14px 14px 15px}
  .hpx .fc-top{margin-bottom:11px}
  .hpx .fc-g{grid-template-columns:minmax(0,1fr);gap:13px}
  .hpx .fc-a{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .hpx .fc-lg{width:40px;height:40px}
  .hpx .fc-rv{margin-top:0;font-size:12.5px;flex-shrink:0}
  .hpx .fc-e b{font-size:15.5px}
  .hpx .fc-p{flex-direction:row;align-items:center;justify-content:space-between;text-align:left;padding-top:12px;border-top:1px solid var(--border)}
  .hpx .fc-pv{min-width:0}
  .hpx .fc-pc{font-size:22px}
  .hpx .fc-o{font-size:12.5px}
  .hpx .fc-by{flex-shrink:0;height:38px;padding:0 16px}
}
/* Star rating (owner, after the 21st.dev rating component): 5 stars masked from one SVG tile (16px star + 2px gap),
   yellow fill up to --f (exact partial stars), grey for the rest; optional number after it. Used site-wide (efRate()). */
.efr{display:inline-flex;align-items:center;gap:7px;line-height:1;vertical-align:middle;letter-spacing:0}
.efr i{display:block;flex-shrink:0;width:88px;height:16px;background:linear-gradient(90deg,#facc15 var(--f,0px),rgba(120,118,111,.28) var(--f,0px));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24'%3E%3Cpath d='M12 1.5l3.2 6.6 7.3 1-5.3 5.1 1.3 7.2L12 18l-6.5 3.4 1.3-7.2L1.5 9.1l7.3-1z'/%3E%3C/svg%3E") 0 0/18px 16px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24'%3E%3Cpath d='M12 1.5l3.2 6.6 7.3 1-5.3 5.1 1.3 7.2L12 18l-6.5 3.4 1.3-7.2L1.5 9.1l7.3-1z'/%3E%3C/svg%3E") 0 0/18px 16px repeat-x}
.efr.lg i{width:110px;height:20px;-webkit-mask-size:22.5px 20px;mask-size:22.5px 20px}
.efr b{font-family:'Inter','PingFang SC','Microsoft YaHei',sans-serif;font-size:13px;font-weight:600;font-style:normal;color:#78766f}
/* Login / register popup (owner, after the 21st.dev auth modal): light blurred backdrop, a white 360px card that scales
   in, its rows rising one after another; round close button; one big Telegram button (the site's only sign-in). */
.modal-overlay{z-index:10080;background:rgba(9,9,11,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:16px;box-sizing:border-box}
.modal.am{background:#fff;color:#18181b;border:1px solid #f4f4f5;border-radius:24px;padding:24px;width:100%;max-width:360px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25),0 0 0 1px rgba(9,9,11,.05);transform:scale(.95);opacity:0;transition:transform .3s ease-in-out,opacity .3s ease-in-out}
.modal-overlay.open .modal.am{transform:scale(1);opacity:1}
.modal.am .am-i{opacity:0;transform:translateY(20px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1.15)}
.modal-overlay.open .modal.am .am-i{opacity:1;transform:none}
.modal-overlay.open .modal.am .am-d1{transition-delay:.06s}.modal-overlay.open .modal.am .am-d2{transition-delay:.11s}.modal-overlay.open .modal.am .am-d3{transition-delay:.16s}.modal-overlay.open .modal.am .am-d4{transition-delay:.21s}.modal-overlay.open .modal.am .am-d5{transition-delay:.26s}
.modal.am .am-x{position:absolute;top:14px;right:14px;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;color:#a1a1aa;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s}
.modal.am .am-x:hover{background:#f4f4f5;color:#71717a}
.modal.am .am-x svg{width:16px;height:16px}
.modal.am .am-head{text-align:center;margin:10px 0 26px}
.modal.am .am-title{font:600 24px/1.2 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;letter-spacing:-.02em;color:#18181b;margin:0}
.modal.am .modal-subtitle{margin:8px 0 0;font-size:14px;color:#71717a;text-align:center}
.modal.am .social-login-btns{display:block;margin:0 0 24px}
.modal.am .am-tg{width:100%;height:48px;padding:0 18px;border:0;border-radius:999px;background:#2AABEE;color:#fff;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:0 8px 20px rgba(42,171,238,.28);transition:transform .15s ease,background .15s ease}
.modal.am .am-tg:hover{background:#229ED9;transform:scale(1.02)}
.modal.am .am-tg:active{transform:scale(.97)}
.modal.am .am-or{position:relative;text-align:center;margin:0 0 18px}
.modal.am .am-or::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid #e4e4e7}
.modal.am .am-or span{position:relative;background:#fff;padding:0 10px;font-size:11px;color:#a1a1aa;text-transform:uppercase;letter-spacing:.05em}
.modal.am .am-bonus{background:#f4f4f5;border-radius:999px;padding:11px 14px;text-align:center;font-size:12.5px;color:#52525b;line-height:1.4}
.modal.am .am-bonus strong{color:#3E357E}
.modal.am .am-terms{margin:22px 0 0;text-align:center;font-size:11.5px;color:#a1a1aa;line-height:1.55}
.modal.am .am-terms a{color:inherit;text-decoration:underline}
.modal.am .am-terms a:hover{color:#18181b}
@media(max-width:600px){.modal.am{padding:24px 20px!important}}
@media(prefers-reduced-motion:reduce){.modal.am,.modal.am .am-i{transition:none}}
/* phone menu drawer (owner): each section's sub-pages listed under it, like the shared header on /slots and /4d-results */
@media(max-width:768px){
  .nav-cats-inner .nav-dd{display:block!important;position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;min-width:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0 0 6px 30px!important;margin:-2px 0 0!important}
  .nav-cats-inner .nav-dd a{display:block!important;white-space:normal!important;padding:7px 10px!important;font-size:13.5px!important;font-weight:600!important;color:#3f3d4a!important;border-radius:8px!important;letter-spacing:0!important;text-transform:none!important}
  .nav-cats-inner .nav-dd a small{display:block;font-size:11px!important;font-weight:500!important;color:#8a8794!important;margin-top:1px}
  .nav-cats-inner .nav-dd a:hover{background:#f4effc!important;color:var(--purple,#3E357E)!important}
}

/* News + Travel & Food: the section itself is the card (header inside), rows = full 16:9 cover (136px phone / 200px wide screens) · title · date • category,
   two columns on wide screens; rows rise in one after another when the feed arrives */
.hpx .sec-news,.hpx .sec-travel{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px 16px 10px;box-shadow:0 1px 2px rgba(28,22,64,.04)}
.hpx .sec-news .sec-h,.hpx .sec-travel .sec-h{margin:0 2px 8px;align-items:center}
.hpx .sec-news .sec-t,.hpx .sec-travel .sec-t{font-size:20px!important;line-height:1.2}
.hpx .sec-news .sec-t::before,.hpx .sec-travel .sec-t::before{height:18px}
.hpx .nlist{display:grid;grid-template-columns:1fr;gap:4px}
@media(min-width:760px){.hpx .nlist{grid-template-columns:1fr 1fr;column-gap:16px}}
.hpx .ni{display:flex;align-items:center;gap:12px;padding:9px 6px;border-radius:10px;cursor:pointer;text-decoration:none;color:inherit;transition:background .18s ease;animation:hpxNi .55s cubic-bezier(.2,.9,.3,1.2) both}
.hpx .ni:nth-child(2){animation-delay:.08s}.hpx .ni:nth-child(3){animation-delay:.16s}.hpx .ni:nth-child(4){animation-delay:.24s}
.hpx .ni:hover{background:var(--pf)}
.hpx .ni img{width:136px;height:auto;aspect-ratio:16/9;border-radius:8px;object-fit:cover;flex-shrink:0;background:#efedf5;display:block}
.hpx .ni .nb{flex:1;min-width:0}
.hpx .ni .nh{font-family:'Open Sauce One','Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:600;font-size:15px;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hpx .ni .nm{margin-top:4px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* wide screens: covers big enough to read (owner) — 16:9 thumbs 200px wide, larger title */
@media(min-width:760px){.hpx .ni{gap:16px;padding:10px}.hpx .ni img{width:200px;height:auto;aspect-ratio:16/9;border-radius:10px}.hpx .ni .nh{font-size:16.5px;-webkit-line-clamp:3;line-clamp:3}.hpx .ni .nm{margin-top:6px}}
@keyframes hpxNi{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hpx .ni{animation:none}}

/* Free Credit Events (no backing card, per owner): title + subtitle on the left, outline ‹ › on the right · 3 events visible (2 tablet, 1 + peek phone) */
.hpx .evh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
.hpx .evhl{min-width:0}
.hpx .evsub{margin:0 0 16px 14px;font-size:13px;line-height:18px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpx .evnav{display:flex;gap:8px;flex-shrink:0}
.hpx .evb{width:38px;height:38px;padding:0;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,opacity .15s ease}
.hpx .evb:hover{background:var(--pf)}
.hpx .evb:disabled{opacity:.4;cursor:default;background:var(--card)}
.hpx .evb svg{width:16px;height:16px}
.hpx .evtrack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hpx .evtrack::-webkit-scrollbar{display:none}
.hpx .evi{flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:inherit;text-decoration:none;transition:border-color .2s ease}
.hpx .evi:hover{border-color:var(--pl)}
.hpx .evi[hidden]{display:none}
@media(max-width:900px){.hpx .evi{flex-basis:calc((100% - 16px)/2)}}
/* phones (owner: "too big"): ~1.5 cards in view, tighter card */
@media(max-width:600px){.hpx .evtrack{gap:10px}.hpx .evi{flex-basis:47%;min-width:0;box-sizing:border-box;padding:8px;gap:6px;border-radius:10px}.hpx .evt{font-size:10.5px;gap:4px}.hpx .evt .now{font-size:9.5px;padding:1px 6px}.hpx .evim{border-radius:6px}.hpx .evn{font-size:13px}.hpx .evp{font-size:10.5px;margin-top:-3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hpx .evb{width:32px;height:32px}.hpx .evh{margin-bottom:4px}.hpx .evclaim{height:38px;font-size:12.5px;margin-top:10px}}
.hpx .evt{margin:0;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hpx .evt .now{background:#dcfce7;color:#15803d;font-weight:700;font-size:11px;padding:2px 8px;border-radius:999px}
/* today's events read "Today · 12:00–18:00" (the date would repeat the pill); one line so cards stay the same height */
.hpx .evt .now + .evdate{display:none}
.hpx .evt{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.hpx .evim{aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#efedf5}
.hpx .evim img{width:100%;height:100%;object-fit:cover;display:block}
.hpx .evn{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:700;font-size:16px;line-height:1.2;color:var(--ink)}
.hpx .evp{margin:-6px 0 0;font-size:13px;color:var(--muted)}
.hpx .evall{display:block;width:max-content;margin:14px 0 0 auto;cursor:pointer;text-decoration:none!important}
/* owner: the small "Claim Now" link was easy to miss → full-width button under the events */
.hpx .evclaim{display:flex;align-items:center;justify-content:center;width:100%;height:40px;margin-top:12px;border-radius:999px;background:var(--p);color:#fff!important;font-family:'Inter','PingFang SC','Microsoft YaHei',sans-serif;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none!important;box-shadow:0 6px 16px rgba(62,53,126,.2);transition:transform .15s ease,background .15s ease;cursor:pointer}
.hpx .evclaim:hover{background:var(--pl);transform:translateY(-1px)}
.hpx .evclaim:active{transform:scale(.95)}
/* shiny button (owner, after the 21st.dev shiny-button): a light band sweeps across the label and the 1px rim every ~3s */
@property --efx{syntax:'<percentage>';inherits:true;initial-value:100%}
.hpx .evclaim{position:relative;overflow:hidden;border-radius:12px;--efx:100%;animation:efShine 3.2s cubic-bezier(.35,.1,.25,1) infinite}
@keyframes efShine{0%{--efx:100%}65%,100%{--efx:-100%}}
.hpx .evclaim .evc-t{position:relative;z-index:1;-webkit-mask-image:linear-gradient(-75deg,#000 calc(var(--efx) + 20%),rgba(0,0,0,.5) calc(var(--efx) + 30%),#000 calc(var(--efx) + 100%));mask-image:linear-gradient(-75deg,#000 calc(var(--efx) + 20%),rgba(0,0,0,.5) calc(var(--efx) + 30%),#000 calc(var(--efx) + 100%))}
.hpx .evclaim::before{content:"";position:absolute;inset:0;background:linear-gradient(-75deg,transparent calc(var(--efx) + 12%),rgba(255,255,255,.26) calc(var(--efx) + 25%),transparent calc(var(--efx) + 38%));pointer-events:none}
.hpx .evclaim::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(-75deg,rgba(255,255,255,.14) calc(var(--efx) + 20%),rgba(255,255,255,.75) calc(var(--efx) + 25%),rgba(255,255,255,.14) calc(var(--efx) + 100%));-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
@media(prefers-reduced-motion:reduce){.hpx .evclaim{animation:none}}
@media(max-width:600px){.hpx .evclaim{height:36px;font-size:12.5px;margin-top:10px}}
/* /sports: long intro clamped to 3 lines with a Read more toggle; hero blurb 2 lines on phones (owner) */
#sportsPage .sb-answer{margin-bottom:6px!important}
#sportsPage .sb-answer .sb-aw{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#sportsPage .sb-answer.open .sb-aw{display:inline}
#sportsPage .sb-more{display:inline-flex;align-items:center;gap:4px;margin:0 0 26px;padding:6px 14px;border:1px solid var(--border,#e8e6e1);border-radius:999px;background:var(--card,#fff);color:var(--purple,#3E357E);font-weight:700;font-size:12.5px;cursor:pointer}
#sportsPage .sb-list{margin-bottom:22px}
@media(max-width:600px){#sportsPage .sports-hero-sub2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
/* sidebar 4D: operator logos instead of coloured dots */
.hpx .fdw .fdl{width:28px;height:28px;object-fit:contain;flex-shrink:0;border-radius:6px}
/* ── index.php line 5070 ── */
  /* 2026-10-20 (owner "没有justify，请确保每个页面都有justify" + "我不要有这种贴着旁边画面的情况"): body text is justified,
     and article lists keep their bullets inside the text column instead of touching the card edge. */
  .article-text ul, .article-text ol{ padding-left:1.5em !important; margin:0 0 18px; }
  .article-text li{ margin:0 0 6px; }
  .article-text p, .article-text li, .article-text dd, .crv-pros li, .ef-abox-tx p, .ef-bbox p, #csIntro,
  .sports-hero-sub2, .sb-answer, :where(#sportsTab-sportsbook) > p, :where(#sportsTab-sportsbook) > div > p, .sb-mod > p, li.sb-rv,
  .evx-lead, .evx-p, .evx-steps li, .life-sub, .bgc-ex, .lfx-a{ text-align:justify; }
  /* Sportsbook Pros / Cons → two-column comparison */
  .article-text .efpc{ display:grid; grid-template-columns:1fr 1fr; border:1px solid #ebe6f7; border-radius:16px; overflow:hidden; margin:4px 0 26px; background:#fff; }
  .article-text .efpc-c{ padding:20px 22px 12px; }
  .article-text .efpc-con{ background:#f4f1fb; }
  .article-text .efpc-h{ margin:0 0 14px !important; text-align:center !important; font-size:20px; font-weight:800; letter-spacing:-.4px; line-height:1.3; color:#1c1c1c; }
  .article-text .efpc ul{ list-style:none; margin:0 !important; padding:0 !important; }
  .article-text .efpc li{ position:relative; padding-left:31px; margin:0 0 11px; line-height:1.55; }
  .article-text .efpc li::before{ content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%;
    background:#3E357E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }
  .article-text .efpc-con li::before{ background-color:#a29db6;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6.5 12h11'/%3E%3C/svg%3E"); }
  @media(max-width:560px){
    .article-text .efpc{ grid-template-columns:1fr; }
    .article-text .efpc-c{ padding:16px 16px 8px; }
    .article-text .efpc-h{ font-size:17px; margin-bottom:12px !important; }
  }
  /* Sports mini ad at the end of sportsbook articles (same look as the review panel's bet box) */
  .sb-mini{ margin:28px 0 6px; }
  .sb-mini .crv-bonus{ margin-bottom:6px; }
  .sb-mini-fine{ font-size:11px; color:#8f8c9c; text-align:center; }
/* ── index.php line 5099 ── */
  /* 2026-10-20: card call-to-action buttons breathe and shine to invite the click */
  @keyframes efBreath{0%,100%{transform:scale(1);box-shadow:0 3px 10px rgba(62,53,126,.22)}50%{transform:scale(1.03);box-shadow:0 8px 22px rgba(91,79,160,.45),0 0 0 6px rgba(124,108,214,.22)}}
  @keyframes efSweep{0%,58%{transform:translateX(-160%) skewX(-20deg)}100%{transform:translateX(380%) skewX(-20deg)}}
  .casino-review-btn,.ccx-pri,.sbh-btn{position:relative;overflow:hidden;isolation:isolate;animation:efBreath 2.4s ease-in-out infinite}
  .casino-review-btn::after,.ccx-pri::after,.sbh-btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;z-index:-1;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);transform:translateX(-160%) skewX(-20deg);animation:efSweep 3s ease-in-out infinite}
  .sbh-btn::after{background:linear-gradient(90deg,transparent,rgba(124,108,214,.28),transparent)}
  .casino-review-btn:hover,.ccx-pri:hover,.sbh-btn:hover,.casino-review-btn:hover::after,.ccx-pri:hover::after,.sbh-btn:hover::after{animation-play-state:paused}
  @media(prefers-reduced-motion:reduce){.casino-review-btn,.ccx-pri,.sbh-btn,.casino-review-btn::after,.ccx-pri::after,.sbh-btn::after{animation:none}}
/* ── index.php line 5111 ── */
/* /sports provider cards on desktop (owner 2026-10-20) */
html #sportsPage a.casino-card.sb-prov{color:#1c1c1c}
html #sportsPage .casino-card.sb-prov .casino-stat-lbl{color:#8a8794!important}
@media(min-width:701px){
html #sportsPage .casino-card.sb-prov .casino-right{width:230px!important;min-width:230px!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;padding:24px 22px!important;background:#faf9fe!important;border-left:1px solid #efecf7!important}
html #sportsPage .casino-card.sb-prov .casino-editor-badge{width:auto!important;display:inline-block!important;padding:4px 12px!important;border-radius:999px!important;font-size:11px!important;font-weight:800!important;letter-spacing:.5px;margin:0 0 16px!important;text-align:center}
html #sportsPage .casino-card.sb-prov .casino-right>div:not([class]){width:78px!important;height:78px;border-radius:50%;background:#ecfdf3;box-shadow:inset 0 0 0 2px #bbf7d0;display:flex!important;flex-direction:column;align-items:center;justify-content:center;margin:0 0 18px!important}
html #sportsPage .casino-card.sb-prov .casino-score-num{font-size:26px!important;line-height:1!important;width:auto!important}
html #sportsPage .casino-card.sb-prov .sb-score-lbl{font-size:10px!important;letter-spacing:.6px;margin-top:4px!important;color:#15803d!important;width:auto!important}
html #sportsPage .casino-card.sb-prov .casino-score-bar-wrap{display:none!important}
html #sportsPage .casino-card.sb-prov .casino-review-btn{width:100%!important;display:flex!important;align-items:center;justify-content:center;padding:12px 16px!important;border-radius:999px!important;background:#3E357E!important;color:#fff!important;border:0!important;font-size:14px!important;font-weight:800!important;flex:0 0 auto!important}
html #sportsPage .casino-card.sb-prov .casino-fine-print{margin:10px 0 0!important;font-size:11px!important;color:#9a97a8!important;text-align:center;width:auto!important}
}
/* ── index.php line 5126 ── */
/* Casino + Events at the normal page width (owner 2026-10-20) — was 60% of the screen */
@media(min-width:769px){
  html #casinoReviewsPage > div, html .event-page-wrap{max-width:1280px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important;padding-left:24px!important;padding-right:24px!important;box-sizing:border-box!important}
}
/* ── index.php line 5132 ── */
/* /casino pick-two comparison (owner 2026-10-20) */
.cmp-sub{font-size:13px;color:var(--text-muted);margin:-6px 0 12px}
.cmp{background:#fff;border:1px solid #ece9f6;border-radius:16px;padding:14px;box-shadow:0 1px 2px rgba(28,22,64,.04)}
.cmp-bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.cmp-q{flex:1 1 200px;min-width:0;padding:9px 12px;border:1px solid #e4dcf7;border-radius:10px;font-size:13.5px;background:#fff;color:#1c1c1c;outline:none}
.cmp-q:focus,.cmp-tag:focus{border-color:#6A5FB0}
.cmp-tag{padding:9px 10px;border:1px solid #e4dcf7;border-radius:10px;font-size:13.5px;background:#fff;color:#1c1c1c}
.cmp-reset{padding:9px 14px;border:1px solid #e4dcf7;border-radius:10px;background:#fff;color:#3E357E;font-weight:700;font-size:13px;cursor:pointer}
.cmp-reset:hover{background:#f4f1fb}
.cmp-hint{font-size:12.5px;color:#7a7885;margin:0 0 8px;min-height:1px}
.cmp-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp-t{width:100%;border-collapse:collapse;font-size:13.5px}
.cmp-t th{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#8a8794;text-align:left;padding:8px 10px;border-bottom:1px solid #ece9f6;white-space:nowrap}
.cmp-t td{padding:9px 10px;border-bottom:1px solid #f2eff9;color:#2c2a35;white-space:nowrap;text-align:left}
.cmp-t tr:last-child td{border-bottom:0}
.cmp-t tr.on td{background:#f4f1fb}
.cmp-t td:last-child{text-align:right}
.cmp-nm{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:#1c1c1c}
.cmp-lg{width:28px;height:28px;border-radius:7px;background:#fff;border:1px solid #ece9f6;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 28px}
.cmp-lg.dk{background:#1c1730}
.cmp-lg img{max-width:24px;max-height:24px;object-fit:contain}
.cmp-b{padding:6px 14px;border-radius:999px;border:1px solid #d9d1f0;background:#fff;color:#3E357E;font-weight:800;font-size:12.5px;cursor:pointer}
.cmp-b:hover{background:#f1edfb}
.cmp-b.on{background:#ef4444;border-color:#ef4444;color:#fff}
.cmp-b:disabled{opacity:.4;cursor:not-allowed}
.cmp-none{text-align:center!important;color:#8a8794!important;padding:18px!important}
.cmp-res{margin-top:16px;border-top:1px solid #ece9f6;padding-top:14px}
.cmp-rh{font-size:15px;font-weight:800;color:#1c1c1c;margin:0 0 10px}
.cmp-g{display:grid;grid-template-columns:minmax(90px,.8fr) 1fr 1fr;font-size:13.5px}
.cmp-g>div{padding:9px 8px;border-bottom:1px solid #f2eff9;min-width:0;overflow-wrap:anywhere;text-align:left}
.cmp-k{font-weight:700;color:#7a7885;font-size:12.5px}
.cmp-hd{font-weight:900;color:#1c1c1c;font-size:15px}
.cmp-v{color:#2c2a35}
.cmp-v.win{color:#15803d;font-weight:800}
.cmp-v.win::after{content:" ✓"}
.cmp-a{display:inline-block;margin:2px 6px 2px 0;padding:6px 12px;border-radius:999px;background:#f1edfb;color:#3E357E!important;font-weight:800;font-size:12.5px;text-decoration:none!important}
.cmp-go{background:#3E357E;color:#fff!important}
.cmp-full{display:inline-block;margin-top:12px;font-weight:800;color:#3E357E!important;font-size:13.5px;text-decoration:none!important}
.cmp-pop{font-size:13px;font-weight:800;color:var(--text-muted);margin:18px 0 10px}
@media(max-width:640px){.cmp{padding:12px 10px}.cmp-hm{display:none}.cmp-t{font-size:12.5px;table-layout:auto}.cmp-t td,.cmp-t th{padding:8px 4px}.cmp-t td{white-space:normal}.cmp-t td:first-child{max-width:118px}.cmp-nm{gap:6px;font-size:12.5px}.cmp-lg{width:24px;height:24px;flex-basis:24px}.cmp-lg img{max-width:20px;max-height:20px}.cmp-b{padding:5px 10px;font-size:12px;white-space:nowrap}.cmp-g{grid-template-columns:72px 1fr 1fr;font-size:12.5px}.cmp-hd{font-size:13.5px}}
/* ── index.php line 5174 ── */
/* 21st table template = the /sports comparison table (2026-10-20 final audit) */
.article-text table:not(.cmp-t):not(.sb-spec-table){border-collapse:separate!important;border-spacing:0!important;width:100%!important;border:1px solid #e6e1f3!important;border-radius:14px!important;overflow:hidden;background:#fff!important;font-size:13.5px;box-shadow:none!important;margin:16px 0 22px}
.article-text table:not(.cmp-t):not(.sb-spec-table) th{background:#f1eff7!important;color:#2c2a35!important;font-size:11.5px!important;font-weight:800!important;letter-spacing:.4px;text-transform:uppercase;text-align:left!important;padding:11px 14px!important;border:0!important;vertical-align:middle}
.article-text table:not(.cmp-t):not(.sb-spec-table) td{padding:11px 14px!important;border:0!important;border-top:1px solid #efecf6!important;color:#4a4759!important;background:#fff!important;vertical-align:top;text-align:left}
.article-text table:not(.cmp-t):not(.sb-spec-table) tbody tr:first-child td{border-top:0!important}
.article-text table:not(.cmp-t):not(.sb-spec-table) thead + tbody tr:first-child td{border-top:1px solid #efecf6!important}
.article-text table:not(.cmp-t):not(.sb-spec-table) td:first-child{font-weight:800;color:#1c1c1c!important}
@media(max-width:640px){.article-text table:not(.cmp-t):not(.sb-spec-table){display:block!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;font-size:13px}}
/* ── index.php line 5184 ── */
/* 320px phones: side widgets stay inside the screen (final audit B12) */@media(max-width:700px){.side{grid-template-columns:minmax(0,1fr)!important}.side>.swidget{min-width:0;max-width:100%}}