/* Platfound main.css — extracted from inline <style> blocks (P4 quick-wins 2026-04-27) */
/* Source: 22 blocks, total ~62 KB */

/* ── inline block #1 ── */
:root {
    --bg: #0a0e1a;
    --bg-2: #0f1424;
    --surface: #13172a;
    --surface-2: #1b2140;
    --border: #272e4d;
    --border-bright: #3a4368;
    --gold: #fbbf24;
    --gold-light: #fcd34d;
    --gold-dark: #d97706;
    --gold-bronze: #b45309;
    --red: #ef4444;
    --red-dark: #b91c1c;
    --green: #10b981;
    --green-light: #34d399;
    --text: #e2e8f0;
    --text-dim: #94a3b8;
    --text-mute: #64748b;
    /* MY local-flavor tokens (added 2026-05-08 launch — pre-launch micro-rebrand) */
    --my-red: #cc0001;
    --my-red-deep: #a30001;
    --my-yellow: #ffcc00;
    --my-green: #006633;
    --my-blue: #010066;
    --tiger-orange: #f97316;
    --tiger-stripe: #1a0e00;
  }
  * { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
  html, body { background: var(--bg); color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; }
  body { padding-bottom: 72px; background-image:
    radial-gradient(circle at 10% 5%, rgba(251, 191, 36, 0.06), transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(239, 68, 68, 0.05), transparent 40%); }

  .display { font-family: "Oswald", sans-serif; letter-spacing: 0.5px; }
  .bs-container { max-width: 500px; margin: 0 auto; position: relative; background: linear-gradient(180deg, rgba(19,23,42,0.4), transparent 200px); }

  /* APK top banner */
  .apk-banner {
    background: linear-gradient(90deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
    padding: 8px 12px; display: flex; align-items: center; gap: 10px; font-size: 12px;
    border-bottom: 1px solid rgba(251, 191, 36, 0.15);
  }
  .apk-icon { width: 32px; height: 32px; border-radius: 8px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; color: #000; font-size: 14px; font-family: "Oswald", sans-serif;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
  }
  .apk-title { font-weight: 700; color: #fff; font-size: 12px; line-height: 1.2; }
  .apk-sub { color: #c7d2fe; font-size: 10px; line-height: 1.2; margin-top: 1px; }
  .apk-btn {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #000; font-weight: 800; padding: 5px 12px; border-radius: 999px; font-size: 11px;
    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.4);
  }
  .apk-close { color: #94a3b8; padding: 4px 6px; font-size: 14px; }

  /* Marquee */
  .marquee {
    background: linear-gradient(90deg, #000, #1a1a2e, #000);
    border-bottom: 1px solid var(--border);
    overflow: hidden; white-space: nowrap; padding: 6px 0;
  }
  .marquee-track { display: inline-block; animation: marquee 30s linear infinite; padding-left: 100%; }
  .marquee-text { color: var(--gold-light); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; }
  @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

  /* Top nav */
  .top-nav {
    background: linear-gradient(180deg, #000 0%, #0a0e1a 100%);
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    position: sticky; top: 0; z-index: 35;
  }
  .hamburger { width: 40px; height: 36px; border-radius: 8px;
    background: linear-gradient(135deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border-bright); display: flex; align-items: center; justify-content: center;
    color: var(--gold); }
  .brand-text {
    font-family: "Oswald", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 1.5px;
    background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 40%, var(--gold-bronze) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }
  .partnership-btn {
    background: linear-gradient(135deg, #1b2140, #0f1424);
    border: 1px solid var(--gold-dark);
    color: var(--gold); padding: 6px 10px; border-radius: 6px; font-size: 10px; font-weight: 800;
    letter-spacing: 0.5px; display: flex; align-items: center; gap: 4px;
  }
  .partnership-btn:before { content: "👑"; filter: sepia(1) saturate(4) hue-rotate(5deg); font-size: 11px; }

  /* Lang pill */
  .lang-pill { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
  .lang-btn { padding: 3px 8px; font-size: 10px; border-radius: 999px; color: var(--text-dim); font-weight: 700; }
  .lang-btn.active { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #000; }

  /* Hero carousel */
  .hero-wrap { padding: 12px 14px 0; position: relative; }
  .hero {
    aspect-ratio: 16/9; border-radius: 14px; overflow: hidden;
    position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    border: 1px solid var(--border-bright);
  }
  .hero-slide {
    position: absolute; inset: 0; padding: 20px;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #1e3a8a 100%);
    display: flex; flex-direction: column; justify-content: center;
    opacity: 0; transition: opacity .6s;
  }
  .hero-slide.active { opacity: 1; }
  .hero-slide::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image:
      radial-gradient(circle at 80% 50%, rgba(251, 191, 36, 0.4), transparent 50%),
      radial-gradient(circle at 20% 70%, rgba(239, 68, 68, 0.3), transparent 45%);
  }
  .hero-slide::after {
    content: ""; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(45deg, transparent 0, transparent 20px, rgba(255,255,255,0.02) 20px, rgba(255,255,255,0.02) 22px);
  }
  .hero-slide > * { position: relative; z-index: 2; }
  .hero-eyebrow {
    display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    margin-bottom: 6px;
  }
  .hero-amount {
    font-family: "Oswald", sans-serif; font-weight: 700; font-size: 52px; line-height: 0.9;
    background: linear-gradient(180deg, #fff 0%, var(--gold-light) 40%, var(--gold-dark) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 2px 10px rgba(251, 191, 36, 0.5);
    letter-spacing: -1px;
  }
  .hero-subtxt { font-size: 12px; color: #e9d5ff; margin-top: 4px; font-weight: 500; }
  .hero-cta { margin-top: 12px; display: inline-block; }

  .hero-slide-2 { background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 50%, #dc2626 100%); }
  .hero-slide-3 { background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #10b981 100%); }

  .hero-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 0; }
  .hero-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-bright); transition: all .2s; }
  .hero-dot.active { background: var(--gold); width: 18px; border-radius: 999px; }

  /* CTA buttons */
  .btn-gold {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-dark) 100%);
    color: #000; font-weight: 900; padding: 10px 20px; border-radius: 999px; font-size: 13px;
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.4), inset 0 1px 0 rgba(255,255,255,0.4);
    letter-spacing: 0.5px;
    transition: transform .15s;
  }
  .btn-gold:hover { transform: translateY(-1px); }
  .btn-ghost {
    background: rgba(255,255,255,0.05); border: 1px solid var(--border-bright);
    color: var(--text); padding: 10px 20px; border-radius: 999px; font-size: 13px; font-weight: 700;
  }

  /* Live Transaction table */
  .livetx-card {
    margin: 16px 14px 0;
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border-bright); border-radius: 12px; overflow: hidden;
  }
  .livetx-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px; background: linear-gradient(90deg, #1a1f3a, #131729);
    border-bottom: 1px solid var(--border);
  }
  .livetx-title { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 1px; }
  .livetx-live {
    color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: 1px;
    display: flex; align-items: center; gap: 4px;
  }
  .livetx-live .dot {
    width: 6px; height: 6px; background: var(--red); border-radius: 50%;
    animation: pulse 1.2s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

  .livetx-subhead { display: grid; grid-template-columns: 1fr 1fr; background: #0a0e1a; }
  .livetx-subhead > div { padding: 6px 14px; font-size: 10px; font-weight: 800; color: var(--text-dim); letter-spacing: 1px; border-bottom: 1px solid var(--border); }
  .livetx-subhead > div:first-child { border-right: 1px solid var(--border); color: var(--green); }
  .livetx-subhead > div:last-child { color: var(--red); }

  /* 2026-05-09 Mz fix: 2-col aligned with subheader; stack phone+amt vertically */
  .livetx-row { display: grid; grid-template-columns: 1fr 1fr; font-size: 10.5px; border-bottom: 1px solid rgba(39,46,77,0.5); min-height: 40px; }
  .livetx-row .livetx-side { padding: 6px 12px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
  .livetx-row .livetx-side.topup { border-right: 1px solid rgba(39,46,77,0.4); }
  .livetx-row .phone { color: var(--text-dim); font-weight: 500; font-size: 10px; }
  .livetx-row .amt-in { color: var(--gold-light); font-weight: 800; }
  .livetx-row .amt-out { color: var(--red); font-weight: 800; }
  .livetx-row .game-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .livetx-row .game { color: var(--text); font-weight: 700; font-size: 9px; letter-spacing: 0.5px; background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 4px; }

  /* Section */
  .section { padding: 18px 14px; }
  .section-title {
    font-size: 14px; font-weight: 900; margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px; letter-spacing: 0.5px; text-transform: uppercase;
  }
  .section-title::before {
    content: ""; width: 4px; height: 16px; border-radius: 2px;
    background: linear-gradient(180deg, var(--gold-light), var(--gold-dark));
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
  }
  .section-title span { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* Auth card */
  .auth-card {
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border-bright); border-radius: 14px; padding: 16px;
    position: relative; overflow: hidden;
  }
  .auth-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }
  .auth-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 14px; gap: 4px; }
  .auth-tab {
    flex: 1; text-align: center; padding: 10px 0; font-size: 13px; font-weight: 800; letter-spacing: 0.5px;
    color: var(--text-mute); border-bottom: 2px solid transparent; cursor: pointer;
  }
  .auth-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

  .bs-input {
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: 10px; padding: 11px 14px; width: 100%; font-size: 14px; font-family: inherit;
  }
  .bs-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15); }
  .bs-field { margin-bottom: 10px; }
  .bs-hint { font-size: 10px; color: var(--text-mute); margin-top: 3px; }
  .bs-hint.warn { color: var(--gold); font-weight: 600; }

  /* Balance banner */
  .bal-card {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
    border: 1px solid var(--gold-dark); border-radius: 14px; padding: 16px;
    position: relative; overflow: hidden;
  }
  .bal-card::before {
    content: ""; position: absolute; top: -40px; right: -40px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(251,191,36,0.2), transparent 60%);
  }
  .bal-row { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
  .bal-label { font-size: 11px; color: #c7d2fe; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
  .bal-amount {
    font-family: "Oswald", sans-serif; font-weight: 700; font-size: 30px;
    background: linear-gradient(180deg, #fff, var(--gold-light));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    line-height: 1;
  }
  .bal-actions { display: flex; gap: 8px; margin-top: 12px; position: relative; z-index: 2; }
  .bal-btn {
    flex: 1; padding: 9px; border-radius: 10px; font-size: 12px; font-weight: 800;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .bal-btn.primary { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); border-color: var(--gold); color: #000; }

  /* Promo cards */
  .promo-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .promo-card {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border); border-radius: 12px; padding: 12px;
    display: flex; gap: 12px; align-items: center; position: relative; overflow: hidden;
    transition: border-color .15s;
  }
  .promo-card:hover { border-color: var(--gold); }
  .promo-card::after {
    content: ""; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(251,191,36,0.1), transparent 60%); pointer-events: none;
  }
  .promo-icon {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 4px 12px rgba(251,191,36,0.3);
  }
  .promo-card.red .promo-icon { background: linear-gradient(135deg, var(--red), var(--red-dark)); box-shadow: 0 4px 12px rgba(239,68,68,0.3); }
  .promo-card.green .promo-icon { background: linear-gradient(135deg, var(--green), #047857); box-shadow: 0 4px 12px rgba(16,185,129,0.3); }
  .promo-text { flex: 1; min-width: 0; }
  .promo-title { font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 2px; letter-spacing: 0.3px; }
  .promo-sub { font-size: 10px; color: var(--text-dim); line-height: 1.4; }
  .promo-claim {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    color: #000; font-weight: 900; font-size: 10px; padding: 6px 12px; border-radius: 999px; flex-shrink: 0;
    letter-spacing: 0.5px; box-shadow: 0 2px 6px rgba(251,191,36,0.4);
  }

  /* Games - category tabs */
  .cat-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 10px; scrollbar-width: none; }
  .cat-row::-webkit-scrollbar { display: none; }
  .cat-btn {
    flex-shrink: 0; padding: 7px 14px; border-radius: 999px; font-size: 11px; font-weight: 700;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap;
  }
  .cat-btn.active { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); border-color: var(--gold); color: #000; }

  /* Game tile */
  .games-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  @media (min-width: 480px) { .games-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } }
  @media (min-width: 700px) { .games-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; } }
  .game-tile {
    aspect-ratio: 1/1; border-radius: 10px;
    position: relative; overflow: hidden; cursor: pointer; border: 1px solid var(--border);
    transition: all .2s;
    background: linear-gradient(135deg, #1e1b4b, #0f172a);
  }
  .game-tile:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(251,191,36,0.2); }
  .game-bg {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: "Oswald", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.5px;
    color: rgba(255,255,255,0.92); text-align: center; padding: 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  }
  .game-tile.pgsoft .game-bg { background: linear-gradient(135deg, #7c2d12, #f97316, #7c2d12); }
  .game-tile.k918 .game-bg   { background: linear-gradient(135deg, #881337, #dc2626, #881337); }
  .game-tile.pragmatic .game-bg { background: linear-gradient(135deg, #1e3a8a, #2563eb, #1e3a8a); }
  .game-tile.jili .game-bg    { background: linear-gradient(135deg, #365314, #84cc16, #365314); }
  .game-tile.mega .game-bg    { background: linear-gradient(135deg, #581c87, #9333ea, #581c87); }
  .game-tile.pussy .game-bg   { background: linear-gradient(135deg, #831843, #be185d, #831843); }
  .game-tile.spade .game-bg   { background: linear-gradient(135deg, #0c4a6e, #0284c7, #0c4a6e); }
  .game-tile.epicwin .game-bg { background: linear-gradient(135deg, #422006, #a16207, #422006); }
  .game-tile.mega888 .game-bg { background: linear-gradient(135deg, #4c1d95, #7c3aed, #4c1d95); }
  .game-badge {
    position: absolute; top: 6px; right: 6px;
    padding: 2px 6px; border-radius: 4px; font-size: 8px; font-weight: 900; letter-spacing: 0.5px; z-index: 2;
  }
  .game-badge.hot { background: var(--red); color: #fff; }
  .game-badge.new { background: var(--green); color: #000; }
  .game-badge.top { background: var(--gold); color: #000; }
  .game-overlay {
    position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.85) 100%);
    padding-bottom: 8px;
  }
  .game-play-lbl { font-size: 10px; color: var(--gold); font-weight: 800; letter-spacing: 1px; }

  /* Feature grid (SVG icons) */
  .feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .feat-tile {
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border); border-radius: 10px; padding: 12px 6px;
    display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  }
  .feat-tile:hover { border-color: var(--gold); }
  .feat-ico-wrap {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(251,191,36,0.03));
    border: 1px solid rgba(251,191,36,0.25);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
  }
  .feat-lbl { font-size: 10px; color: var(--text); font-weight: 600; text-align: center; line-height: 1.2; }

  /* VIP tiers */
  .vip-strip {
    background: linear-gradient(180deg, var(--surface), var(--bg-2));
    border: 1px solid var(--border-bright); border-radius: 14px; padding: 14px;
  }
  .vip-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
  .vip-tier {
    text-align: center; padding: 10px 2px; border-radius: 8px; position: relative;
    background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  }
  .vip-tier.bronze  { border-color: #92400e; background: linear-gradient(180deg, rgba(146,64,14,0.15), rgba(146,64,14,0.03)); }
  .vip-tier.silver  { border-color: #64748b; background: linear-gradient(180deg, rgba(148,163,184,0.15), rgba(148,163,184,0.03)); }
  .vip-tier.gold    { border-color: var(--gold-dark); background: linear-gradient(180deg, rgba(251,191,36,0.15), rgba(251,191,36,0.03)); }
  .vip-tier.platinum{ border-color: #a1a1aa; background: linear-gradient(180deg, rgba(228,228,231,0.15), rgba(228,228,231,0.03)); }
  .vip-tier.diamond { border-color: #06b6d4; background: linear-gradient(180deg, rgba(6,182,212,0.15), rgba(6,182,212,0.03)); }
  .vip-tier-ico { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 14px; }
  .vip-tier-lbl { font-size: 8px; font-weight: 700; color: var(--text-dim); margin-top: 2px; letter-spacing: 0.5px; text-transform: uppercase; }
  .vip-tier.bronze .vip-tier-ico   { color: #d97706; }
  .vip-tier.silver .vip-tier-ico   { color: #cbd5e1; }
  .vip-tier.gold .vip-tier-ico     { color: var(--gold); }
  .vip-tier.platinum .vip-tier-ico { color: #e4e4e7; }
  .vip-tier.diamond .vip-tier-ico  { color: #22d3ee; }
  .vip-bar-wrap { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; margin-top: 4px; }
  .vip-bar {
    height: 100%; width: 28%;
    background: linear-gradient(90deg, var(--gold-light), var(--gold-dark));
    border-radius: 999px; box-shadow: 0 0 10px rgba(251,191,36,0.5);
  }
  .vip-info { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); margin-top: 6px; }

  /* Payment / Provider logos — REDESIGNED 2026-04-30
     Replaces old garish solid cells with fintech-style dark cards. */

  /* Category headers */
  .pay-cat-head {
    display: flex; align-items: center; gap: 8px;
    margin: 14px 0 8px; font-size: 11px; font-weight: 700;
    color: var(--text-dim); letter-spacing: 0.04em; text-transform: uppercase;
  }
  .pay-cat-head:first-of-type { margin-top: 4px; }
  .pay-cat-ico { font-size: 14px; }
  .pay-cat-lbl { color: var(--text); }

  /* Grid — responsive 3/4/6 columns */
  .pay-grid {
    display: grid; gap: 8px;
    grid-template-columns: repeat(3, 1fr);
  }
  @media (min-width: 480px) { .pay-grid { grid-template-columns: repeat(4, 1fr); } }
  @media (min-width: 768px) { .pay-grid { grid-template-columns: repeat(6, 1fr); } }

  /* Card */
  .pay-cell {
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 8px 10px;
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    border-radius: 10px;
    position: relative; overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    cursor: default;
    --brand: var(--gold);
    --brand-glow: rgba(251,191,36,0.4);
  }
  .pay-cell::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--brand); opacity: 0.85;
  }
  .pay-cell::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at top, var(--brand-glow), transparent 60%);
    opacity: 0; transition: opacity .25s; pointer-events: none;
  }
  .pay-cell:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
    box-shadow: 0 8px 22px -8px var(--brand-glow);
  }
  .pay-cell:hover::after { opacity: 0.12; }

  .pay-mono {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 11px; line-height: 1;
    color: #fff; background: var(--brand);
    margin-bottom: 7px;
    box-shadow: 0 2px 8px -2px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.2);
    letter-spacing: -0.3px;
    position: relative; z-index: 1;
  }
  .pay-name {
    font-size: 11px; font-weight: 700; color: var(--text);
    margin-bottom: 2px; line-height: 1.15; text-align: center;
    position: relative; z-index: 1;
  }
  .pay-tag {
    font-size: 9px; color: var(--text-mute); font-weight: 600;
    letter-spacing: 0.3px; text-transform: uppercase;
    position: relative; z-index: 1;
  }

  /* Per-brand colour tokens */
  .pay-maybank { --brand: #facc15; --brand-glow: rgba(250,204,21,0.45); }
  .pay-maybank .pay-mono { color: #1f2937; }
  .pay-cimb    { --brand: #dc2626; --brand-glow: rgba(220,38,38,0.45); }
  .pay-public  { --brand: #ef4444; --brand-glow: rgba(239,68,68,0.45); }
  .pay-hl      { --brand: #0369a1; --brand-glow: rgba(3,105,161,0.45); }
  .pay-rhb     { --brand: #14532d; --brand-glow: rgba(20,83,45,0.45); }
  .pay-amb     { --brand: #be185d; --brand-glow: rgba(190,24,93,0.45); }
  .pay-duitnow { --brand: #ed1c24; --brand-glow: rgba(237,28,36,0.45); }
  .pay-fpx     { --brand: #1e40af; --brand-glow: rgba(30,64,175,0.45); }
  .pay-tng     { --brand: #0284c7; --brand-glow: rgba(2,132,199,0.45); }
  .pay-grab    { --brand: #00b14f; --brand-glow: rgba(0,177,79,0.45); }
  .pay-boost   { --brand: #f37021; --brand-glow: rgba(243,112,33,0.45); }
  .pay-shopee  { --brand: #ee4d2d; --brand-glow: rgba(238,77,45,0.45); }

  /* Testimonials */
  .test-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px;
    margin-bottom: 8px; position: relative;
  }
  .test-stars { color: var(--gold); font-size: 12px; letter-spacing: 2px; }
  .test-text { font-size: 12px; color: var(--text); margin: 6px 0; line-height: 1.5; font-style: italic; }
  .test-author { font-size: 11px; color: var(--text-dim); font-weight: 600; }

  /* FAQ */
  .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; overflow: hidden; }
  .faq-q {
    padding: 12px 14px; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
  }
  .faq-q::after { content: "+"; color: var(--gold); font-size: 20px; font-weight: 700; transition: transform .2s; flex-shrink: 0; }
  .faq-item.open .faq-q::after { transform: rotate(45deg); }
  .faq-a { padding: 0 14px 12px; font-size: 12px; color: var(--text-dim); line-height: 1.5; display: none; }
  .faq-item.open .faq-a { display: block; }

  /* Trust */
  .trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
  .trust-badge {
    background: linear-gradient(180deg, rgba(251,191,36,0.08), rgba(251,191,36,0.02));
    border: 1px solid rgba(251,191,36,0.25); border-radius: 8px;
    padding: 10px 4px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
  }
  .trust-ico { color: var(--gold); }
  .trust-lbl { font-size: 9px; color: var(--gold-light); font-weight: 700; letter-spacing: 0.5px; }

  /* Footer */
  .footer-main {
    background: linear-gradient(180deg, #000 0%, var(--bg) 100%);
    padding: 20px 14px 12px; border-top: 1px solid var(--border);
  }
  .footer-copy { text-align: center; font-size: 10px; color: var(--text-mute); padding: 10px 14px; }
  .footer-copy p { margin-bottom: 2px; }

  /* Bottom nav */
  .bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: linear-gradient(180deg, #0a0e1a 0%, #000 100%);
    border-top: 1px solid var(--border-bright);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  }
  .bnav-inner { max-width: 500px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }
  .bnav-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: var(--text-mute); font-size: 9px; padding: 4px 0; cursor: pointer;
    position: relative; font-weight: 600; letter-spacing: 0.3px;
  }
  .bnav-item.active { color: var(--gold); }
  .bnav-ico { width: 24px; height: 24px; }
  .bnav-badge {
    position: absolute; top: 0; right: 20%;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--red); color: #fff; font-size: 9px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid #000;
  }
  .bnav-center {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    margin-top: -20px; box-shadow: 0 4px 14px rgba(251,191,36,0.4);
    display: flex; align-items: center; justify-content: center;
    color: #000;
  }

  /* Float livechat — 大尺寸 pill 加 pulse + 标签，最易点 */
  .float-stack { position: fixed; right: 14px; bottom: 92px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
  .float-btn {
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center; color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55); cursor: pointer;
    border: none; padding: 0;
  }
  .float-btn.live {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    color: #000; position: relative;
    height: 56px; min-width: 56px; padding: 0 18px 0 14px;
    gap: 8px; font-weight: 900; font-size: 14px;
    box-shadow: 0 8px 26px rgba(251,191,36,0.55), 0 2px 6px rgba(0,0,0,0.4);
    transition: transform .15s ease;
  }
  .float-btn.live:hover { transform: translateY(-2px) scale(1.03); }
  .float-btn.live:active { transform: scale(0.97); }
  .float-btn.live .online-dot {
    position: absolute; top: 6px; right: 8px;
    width: 10px; height: 10px; background: #22c55e; border-radius: 50%;
    border: 2px solid #000; box-shadow: 0 0 6px rgba(34,197,94,.9);
  }
  .float-btn.live .live-pulse {
    position: absolute; inset: 0; border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(251,191,36,0.7);
    animation: bs-livepulse 2.2s cubic-bezier(0.4,0,0.6,1) infinite;
    pointer-events: none;
  }
  .float-live-label { white-space: nowrap; letter-spacing: 0.2px; }
  @keyframes bs-livepulse {
    0%   { box-shadow: 0 0 0 0 rgba(251,191,36,0.65); }
    70%  { box-shadow: 0 0 0 16px rgba(251,191,36,0); }
    100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
  }

  /* Side partnership */
  .side-partnership {
    position: fixed; left: 0; top: 40%; transform: rotate(-90deg) translate(-50%, 0); transform-origin: left top;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #000; padding: 6px 14px; font-size: 10px; font-weight: 900; letter-spacing: 1px;
    border-radius: 0 0 8px 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    z-index: 25;
  }

  /* Modal */
  .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
  .modal-backdrop.show { display: flex; }
  .modal { width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; }

  /* Toast */
  .toast {
    position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
    background: var(--surface); border: 1px solid var(--gold); padding: 10px 16px;
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.7); z-index: 100;
    display: none; font-size: 13px; max-width: min(360px, 90vw);
    word-break: break-word; overflow-wrap: anywhere;
  }
  .toast.show { display: block; animation: slideDown .25s ease-out; }
  .toast.error { border-color: var(--red); }
  @keyframes slideDown { from { transform: translate(-50%, -16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

  /* Drawer */
  .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 45; display: none; }
  .drawer-overlay.show { display: block; }
  .drawer {
    position: fixed; top: 0; right: -320px; bottom: 0; width: 280px;
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
    border-left: 1px solid var(--gold-dark); padding: 20px 16px;
    z-index: 50; overflow-y: auto; transition: right .25s ease;
  }
  .drawer.show { right: 0; }
  .drawer-section { margin-bottom: 18px; }
  .drawer-title { font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; font-weight: 700; }
  .drawer-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 8px;
    color: var(--text); font-size: 13px; cursor: pointer;
  }
  .drawer-item:hover { background: var(--surface-2); color: var(--gold); }
  .drawer-item svg { flex-shrink: 0; color: var(--gold); }

  /* Notification popup (bottom sheet) */
  .notify-sheet {
    position: fixed; left: 0; right: 0; bottom: 72px;
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
    border-top: 2px solid var(--gold); padding: 14px 16px;
    z-index: 55; display: none;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.6);
  }
  .notify-sheet.show { display: block; animation: slideUp .3s ease-out; }
  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .notify-inner { max-width: 500px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
  .notify-icon {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    display: flex; align-items: center; justify-content: center; color: #000;
  }
  .notify-text { flex: 1; }
  .notify-title-txt { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 2px; }
  .notify-desc { font-size: 11px; color: var(--text-dim); }
  .notify-btns { display: flex; gap: 6px; flex-shrink: 0; }
  .notify-btns button { padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; }
  .notify-btns .agree { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); color: #000; }
  .notify-btns .cancel { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }

  /* Latest news modal */
  .news-modal {
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
    border: 1px solid var(--gold); border-radius: 14px; padding: 16px;
  }
  .news-title {
    font-family: "Oswald", sans-serif; font-size: 18px; letter-spacing: 1px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-align: center; margin-bottom: 10px;
  }
  .news-img {
    aspect-ratio: 1/1; border-radius: 12px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #7f1d1d, #ea580c, #7f1d1d);
    display: flex; align-items: center; justify-content: center;
  }
  .news-img-text {
    font-family: "Oswald", sans-serif; font-size: 40px; font-weight: 700;
    background: linear-gradient(180deg, var(--gold-light), var(--gold-dark));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-align: center; line-height: 0.9; letter-spacing: -1px;
  }
  .news-caption { text-align: center; font-size: 11px; color: var(--gold-light); font-weight: 700; margin-top: 10px; letter-spacing: 2px; }
  .news-close { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
  .news-close label { font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; cursor: pointer; }
  .news-close button { color: var(--gold); font-weight: 700; font-size: 12px; padding: 4px 10px; }

  /* Download apps sticky footer-banner (mobile ref pattern) */
  .apps-sticky {
    position: fixed; left: 0; right: 0; bottom: 72px; z-index: 20;
    background: linear-gradient(90deg, #78350f 0%, var(--gold-dark) 50%, #78350f 100%);
    padding: 8px 12px; display: none; align-items: center; gap: 10px; border-top: 1px solid var(--gold);
  }
  .apps-sticky.show { display: flex; }
  .apps-sticky-inner { max-width: 500px; margin: 0 auto; display: flex; gap: 10px; align-items: center; width: 100%; }
  .apps-sticky-txt { flex: 1; font-size: 11px; font-weight: 800; color: #000; letter-spacing: 0.5px; }
  .apps-sticky button { color: #000; font-size: 14px; padding: 0 8px; }

  .hidden { display: none !important; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Mobile hero shrink (P4 2026-04-27) */
@media (max-width: 480px) {
  .hero-wrap { padding: 8px 10px 0 !important; }
  .hero { min-height: 160px !important; padding: 18px 16px !important; }
  .hero-amount.display { font-size: 28px !important; line-height: 1.1 !important; }
  .hero-eyebrow { font-size: 11px !important; letter-spacing: 0.5px !important; }
  .hero-subtxt { font-size: 12px !important; }
  .hero-cta { margin-top: 8px !important; }
  .hero-cta button { padding: 7px 18px !important; font-size: 12px !important; }
  .hero::before, .hero::after { font-size: 36px !important; opacity: 0.12 !important; }
  .hero-dots { padding: 6px 0 0 !important; }
  .hero-dot { width: 5px !important; height: 5px !important; }
  /* Welcome banner also tighter on mobile */
  #bs-welcome-banner { padding: 8px 10px !important; margin: 6px 8px 0 !important; }
}

/* ── inline block #2 ── */
.topnav-btn-login, .topnav-btn-register {
  font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--gold); transition: all .15s; line-height: 1;
}
.topnav-btn-login { background: transparent; color: var(--gold); }
.topnav-btn-login:hover { background: rgba(251,191,36,0.15); }
.topnav-btn-register { background: var(--gold); color: var(--bg); }
.topnav-btn-register:hover { background: var(--gold-light, #fcd34d); }
.topnav-balance {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  background: rgba(251,191,36,0.12); color: var(--gold);
  padding: 5px 10px; border-radius: 14px; border: 1px solid rgba(251,191,36,0.3); cursor: pointer;
}
.topnav-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--border);
}
.topnav-avatar:hover { background: var(--gold); color: var(--bg); }
.drawer-auth-pills { display: flex; gap: 8px; margin-bottom: 14px; }
.drawer-auth-pills > button { flex: 1; padding: 12px; font-weight: 700; font-size: 14px; border-radius: 8px; cursor: pointer; }
.drawer-btn-login { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.drawer-btn-register { background: var(--gold); color: var(--bg); border: 1px solid var(--gold); }
@media (max-width: 480px) {
  .topnav-btn-login, .topnav-btn-register { font-size: 11px; padding: 5px 9px; }
  .topnav-balance { font-size: 11px; padding: 4px 8px; }
  .topnav-avatar { width: 26px; height: 26px; }
}

/* ── inline block #3 ── */
.topnav-bell {
  position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--border);
}
.topnav-bell:hover { background: var(--gold); color: var(--bg); }
.topnav-bell-badge {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--red, #ef4444); color: #fff; font-size: 9px; font-weight: 700;
  border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 480px) { .topnav-bell { width: 26px; height: 26px; } }

/* ── inline block #4 ── */
/* PARTNERSHIP-HIDE */
.side-partnership { display: none !important; }

/* ── inline block #5 ── */
@keyframes bs-cta-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(251,191,36,0.4); }
  50% { transform: scale(1.04); box-shadow: 0 6px 22px rgba(251,191,36,0.7); }
}
.btn-gold.btn-pulse { animation: bs-cta-pulse 1.8s ease-in-out infinite; }
.topnav-btn-register {
  animation: bs-cta-pulse 2s ease-in-out infinite;
}
.fab-floating-cta {
  position:fixed; bottom:140px; left:14px; z-index:50;
  background:linear-gradient(90deg,#ef4444,#fbbf24); color:#fff; border:none;
  padding:10px 16px; border-radius:24px; font-weight:900; font-size:13px;
  box-shadow:0 4px 14px rgba(239,68,68,0.5); cursor:pointer;
  animation: bs-cta-pulse 1.6s ease-in-out infinite;
  display:none;
}
.fab-floating-cta.visible { display:flex; align-items:center; gap:6px; }
@media (min-width: 769px) { .fab-floating-cta { display: none !important; } }

/* ── inline block #6 ── */
/* HORIZ-OVERFLOW-FIX */
body { overflow-x: hidden !important; }
.bs-container, section, main { max-width: 100vw; }
img, video, table { max-width: 100%; }
@media (max-width: 480px) {
  .topnav-btn-login, .topnav-btn-register { font-size: 10px; padding: 4px 8px; }
  .lang-btn { font-size: 9px; padding: 2px 5px; }
  .topnav-balance { font-size: 10px; padding: 3px 7px; }
  .topnav-bell, .topnav-avatar { width: 24px; height: 24px; }
}

/* ── inline block #7 ── */
@keyframes bs-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.bs-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: bs-skeleton-shimmer 1.5s infinite;
  border-radius: 8px;
}
.skel-game-card {
  aspect-ratio: 1; border-radius: 12px;
}

/* ── inline block #8 ── */
.hero-slide { position: relative; }
.hero-slide.active { animation: bs-fade-in 0.6s ease; }
@keyframes bs-fade-in { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
.hero-dot { transition: all .3s; }
.hero-dot.active { width: 24px; border-radius: 4px; }
.hero-cta button { animation: bs-cta-pulse 2s ease-in-out infinite; }

/* ── inline block #9 ── */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "🎰"; position:absolute; top:8%; right:8%; font-size:42px; opacity:0.18;
  animation: bs-float 6s ease-in-out infinite;
}
.hero::after {
  content: "💰"; position:absolute; bottom:12%; right:14%; font-size:36px; opacity:0.18;
  animation: bs-float 5s ease-in-out infinite reverse;
}
@keyframes bs-float {
  0%,100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-12px) rotate(8deg); }
}
.hero-amount.display {
  background: linear-gradient(180deg,#fef3c7 0%,#fbbf24 50%,#d97706 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 12px rgba(251,191,36,0.6));
  text-shadow: 0 0 30px rgba(251,191,36,0.4);
}
.hero-eyebrow {
  display: inline-block; padding: 3px 10px; border-radius: 14px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(251,191,36,0.4);
  letter-spacing: 1.5px; font-size: 10px; font-weight: 800;
}

/* ── inline block #10 ── */
.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
  padding: 12px 18px; background: rgba(13,17,23,0.95); border: 1px solid var(--gold);
  color: #fff; font-weight: 700; font-size: 13px; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transition: all .3s cubic-bezier(.2,.8,.2,1);
  z-index: 9999;
  width: max-content; max-width: min(360px, 90vw);
  display: flex; align-items: center; gap: 10px;
  word-break: break-word; overflow-wrap: anywhere;
  max-height: 60px; overflow: hidden;
  white-space: normal; line-height: 1.35;
}
.toast::before {
  content: "ℹ"; font-size: 18px; color: var(--gold);
}
.toast.success { border-color: #10b981; }
.toast.success::before { content: "✓"; color: #10b981; }
.toast.error { border-color: #ef4444; }
.toast.error::before { content: "✕"; color: #ef4444; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ── inline block #11 ── */
.bnav-item.bnav-center .bnav-center {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #fbbf24, #ef4444);
  border: 4px solid var(--bg);
  box-shadow: 0 6px 20px rgba(251,191,36,0.5);
  transform: translateY(-12px);
  animation: bs-cta-pulse 2.5s ease-in-out infinite;
}
.bnav-item.active .bnav-ico,
.bnav-item.active span:not(.bnav-badge) { color: var(--gold); }
.bnav-item:not(.active) .bnav-ico,
.bnav-item:not(.active) span:not(.bnav-badge) { color: var(--text-dim); transition: color .15s; }
.bnav-item:hover .bnav-ico, .bnav-item:hover span:not(.bnav-badge) { color: var(--gold); }

/* ── inline block #12 ── */
/* ============================================ */
/*  DESKTOP RESPONSIVE (≥ 769px)                 */
/* ============================================ */
@media (min-width: 769px) {
  /* Container: center + max-width */
  .bs-container, body > section, body > div.bs-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
  }

  /* Top nav: bigger logo + horizontal menu */
  .top-nav {
    padding: 12px 24px !important;
    max-width: 1200px;
    margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
  }
  .top-nav .brand-text { font-size: 26px !important; }
  .hamburger { display: none !important; }   /* hide mobile menu burger */

  .top-nav-extra { display: flex !important; }
  /* Add desktop horizontal nav bar */
  .top-nav-extra {
    display: flex; gap: 24px; flex: 1; justify-content: center; margin: 0 24px;
  }
  .top-nav-extra a {
    font-size: 13px; font-weight: 700; color: var(--text); padding: 8px 12px;
    border-radius: 6px; transition: all .15s; text-decoration: none; cursor: pointer;
  }
  .top-nav-extra a:hover { background: rgba(251,191,36,0.1); color: var(--gold); }
  .top-nav-extra a.active { color: var(--gold); border-bottom: 2px solid var(--gold); }

  /* Hero: bigger, side-by-side layout */
  .hero-wrap { padding: 30px; }
  .hero { min-height: 320px !important; padding: 50px 60px !important; }
  .hero-amount.display { font-size: 90px !important; }
  .hero-eyebrow { font-size: 14px !important; }
  .hero-subtxt { font-size: 18px !important; }
  .hero-cta button { padding: 14px 32px !important; font-size: 16px !important; }
  .hero::before { font-size: 80px !important; top: 12% !important; right: 8% !important; }
  .hero::after { font-size: 70px !important; bottom: 15% !important; right: 18% !important; }

  /* 2-column main layout (content + sidebar) */
  .desktop-2col {
    display: grid; grid-template-columns: 1fr 320px; gap: 24px;
    max-width: 1200px; margin: 0 auto; padding: 0 16px;
  }

  /* Live transactions: smaller / sidebar on desktop */
  .livetx-card { font-size: 12px; }

  /* Game grids: more columns */
  .game-tiles, [class*="game-tiles"] { grid-template-columns: repeat(6, 1fr) !important; }

  /* Hot Promotions: 3-column row */
  .promo-list { grid-template-columns: repeat(3, 1fr); display: grid; gap: 16px; }

  /* Bottom nav: HIDE on desktop */
  .bottom-nav { display: none !important; }
  body { padding-bottom: 0 !important; }

  /* Floating fabs: hide game-related (use top nav instead), keep livechat */
  .float-stack { bottom: 24px !important; right: 24px !important; }
  #fab-918kiss { display: flex !important; }

  /* Modals: larger on desktop */
  .modal-backdrop .modal { max-width: 600px !important; }
  #modal-kiss-lobby .modal { max-width: 1000px !important; }
  #modal-profile .modal { max-width: 720px !important; }
  #modal-wallet .modal { max-width: 560px !important; }

  /* Footer better spacing */
  .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 32px; }

  /* Trust strip: less squished */
  #bs-trust-strip { padding: 8px 24px !important; }
  #bs-trust-strip > div { gap: 32px !important; font-size: 12px !important; }

  /* Welcome banner: wider */
  #bs-welcome-banner { max-width: 1200px; margin: 16px auto 0 !important; padding: 16px 20px !important; }
  #bs-welcome-name { font-size: 18px !important; }

  /* Online widget: align right */
  #bs-live-now { max-width: 1200px; margin: 8px auto 0 !important; }

  /* APK banner: smaller */
  #apk-banner { max-width: 1200px; margin: 0 auto !important; }

  /* Cards (Hot Promo / Features): elevated on desktop */
  .promo-card, .feature-tile, .game-tile, .more-game-tile {
    transition: all .2s;
  }
  .promo-card:hover, .feature-tile:hover, .game-tile:hover, .more-game-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.3);
  }
}

/* Wide desktop ≥ 1280px */
@media (min-width: 1280px) {
  .hero-amount.display { font-size: 110px !important; }
  .hero { min-height: 380px !important; }
}

/* ── inline block #13 ── */
/* ===== VISUAL-FIX 2026-04-27 ===== */

/* Hero carousel — proper absolute slides, fixed height, no white space */
.hero-wrap { position: relative; padding: 16px; }
.hero {
  position: relative;
  min-height: 280px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #1e3a8a 100%);
  display: flex; align-items: center; justify-content: center;
}
.hero::before, .hero::after {
  z-index: 1; pointer-events: none;
}
.hero-slide {
  position: absolute !important;
  inset: 0;
  display: flex !important; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 30px;
  text-align: center;
  opacity: 0; transition: opacity 0.6s ease;
  z-index: 2;
}
.hero-slide.active { opacity: 1; }
.hero-slide-2 {
  background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 45%, #ea580c 100%) !important;
}
.hero-slide-3 {
  background: linear-gradient(135deg, #064e3b 0%, #047857 45%, #10b981 100%) !important;
}
.hero-eyebrow {
  font-size: 12px; padding: 4px 14px; border-radius: 16px;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.3);
  color: #fff !important; letter-spacing: 2px; font-weight: 800;
  margin-bottom: 14px; backdrop-filter: blur(4px);
}
.hero-amount.display {
  font-size: 72px !important; line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(180deg,#fef3c7 0%,#fbbf24 50%,#d97706 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(251,191,36,0.6);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5));
}
.hero-subtxt {
  font-size: 15px; color: rgba(255,255,255,0.95); margin-bottom: 20px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6); font-weight: 600;
}
.hero-cta button {
  padding: 14px 38px !important; font-size: 16px !important; font-weight: 900 !important;
  letter-spacing: 1.5px; border-radius: 28px;
  box-shadow: 0 6px 24px rgba(251,191,36,0.5);
  animation: bs-cta-pulse 2s ease-in-out infinite;
}
.hero-dots { z-index: 3; bottom: 14px; }
.hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.4); transition: all .25s; cursor: pointer;
}
.hero-dot.active { width: 24px; border-radius: 4px; background: #fbbf24; }

/* Sticky top-nav — keep nav visible when scrolling */
.top-nav {
  position: sticky !important; top: 0; z-index: 100;
  background: rgba(10,14,26,0.95); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(251,191,36,0.15);
}

/* Hot Promotions: 3-column grid on desktop, dense layout */
@media (min-width: 769px) {
  /* Force any promo cards container to 3 cols */
  .bs-section:has(.promo-card),
  div[class*="promo"]:not(.promo-card) {
    /* nothing */
  }
}
[data-section="promotions"], #hot-promotions, section:has(> :is(.promo-card, [class*="promo-row"])) {
  /* */
}
/* Universal: promo card rows turn into responsive grid */
.bs-section .promo-card,
section .promo-card { transition: transform .2s; }
.bs-section .promo-card:hover { transform: translateY(-3px); }

/* Make HOT PROMOTIONS section 3-col on desktop using flexbox + flex-basis */
@media (min-width: 769px) {
  .bs-section > .promo-card,
  section > .promo-card {
    display: inline-block; width: calc(33.33% - 12px); margin: 6px;
  }
  /* If wrapped in a div, target that div */
  div[id*="promo"] > .promo-card { display: inline-block; width: calc(33.33% - 12px); margin: 6px; vertical-align: top; }
}

/* Live Transactions: tighter rows + bigger important text on desktop */
@media (min-width: 769px) {
  .livetx-card { padding: 16px 20px; }
  .livetx-row { padding: 8px 4px; font-size: 13px; }
  .livetx-row > div { padding: 0 4px; }
  .livetx-header { padding-bottom: 10px; }
  .livetx-title { font-size: 16px; }
  .amt-in { color: #10b981 !important; font-weight: 800 !important; }
  .amt-out { color: #ef4444 !important; font-weight: 800 !important; }
  .game { color: var(--gold) !important; font-weight: 700 !important; }
}

/* Section titles uppercase + gold accent line */
.section-title-text, h2[class*="section"], h3[class*="section"] {
  position: relative; padding-left: 12px;
}
.section-title-text::before, h2[class*="section"]::before, h3[class*="section"]::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  background: linear-gradient(180deg, #fbbf24, #ef4444); border-radius: 2px;
}

/* Hero floating decorations: bigger, more dramatic on desktop */
@media (min-width: 769px) {
  .hero::before { font-size: 100px !important; top: 14% !important; right: 10% !important; opacity: 0.18; }
  .hero::after { font-size: 90px !important; bottom: 14% !important; right: 22% !important; opacity: 0.18; }
  .hero { min-height: 360px !important; }
  .hero-amount.display { font-size: 110px !important; }
  .hero-eyebrow { font-size: 14px !important; }
  .hero-subtxt { font-size: 18px !important; }
}

/* APK banner: subtle gold instead of harsh purple */
#apk-banner {
  background: linear-gradient(90deg, rgba(251,191,36,0.1) 0%, rgba(239,68,68,0.06) 100%) !important;
  border-bottom: 1px solid rgba(251,191,36,0.2);
}

/* Marquee improve */
[class*="marquee"] {
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(251,191,36,0.1);
  border-bottom: 1px solid rgba(251,191,36,0.1);
}

/* Game tile hover lift on desktop */
@media (min-width: 769px) {
  .game-tile, [class*="game-tile"] { transition: all .25s; }
  .game-tile:hover, [class*="game-tile"]:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(251,191,36,0.5);
  }
}

/* Buttons polish: subtle gradient + 3D depth */
.btn-gold {
  background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 50%, #d97706 100%) !important;
  color: #0a0e1a !important;
  box-shadow: 0 4px 0 #92400e, 0 6px 14px rgba(0,0,0,0.3);
  transition: all .15s;
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #92400e, 0 8px 18px rgba(0,0,0,0.4); }
.btn-gold:active { transform: translateY(2px); box-shadow: 0 2px 0 #92400e; }

/* Section spacing uniform */
.bs-section { margin-top: 24px; padding: 0 12px; }
@media (min-width: 769px) {
  .bs-section { margin-top: 32px; padding: 0; }
}

/* ── inline block #14 ── */
@media (min-width: 769px) {
  .promo-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .promo-card { padding: 16px !important; }
  .promo-card .promo-icon { width: 56px !important; height: 56px !important; flex-shrink: 0; }
  .promo-card .promo-title { font-size: 15px !important; }
  .promo-card .promo-sub { font-size: 11px !important; }
}
@media (min-width: 769px) {
  .promo-card.red, .promo-card.green {}
  /* dramatic gradient promo cards */
  .promo-card { background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(251,191,36,0.04)) !important; border: 1px solid rgba(251,191,36,0.3) !important; }
  .promo-card.red { background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(239,68,68,0.05)) !important; border-color: rgba(239,68,68,0.3) !important; }
  .promo-card.green { background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(16,185,129,0.05)) !important; border-color: rgba(16,185,129,0.3) !important; }
  .promo-claim { padding: 10px 18px !important; font-size: 12px !important; }
}

/* ── inline block #15 ── */
/* ===== POLISH 2026-04-27 ===== */

/* Promo card urgency badges */
.promo-card { position: relative; overflow: hidden; }
.promo-card .urgency-badge {
  position: absolute; top: 8px; right: 8px;
  background: linear-gradient(90deg, #ef4444, #f97316);
  color: #fff; font-size: 9px; font-weight: 900;
  padding: 3px 8px; border-radius: 10px;
  letter-spacing: 0.5px; text-transform: uppercase;
  animation: bs-urgency-pulse 1.5s ease-in-out infinite;
  z-index: 5;
}
@keyframes bs-urgency-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.promo-card .countdown-badge {
  position: absolute; bottom: 6px; right: 8px;
  background: rgba(0,0,0,0.65); color: #fbbf24; font-size: 9px;
  padding: 2px 7px; border-radius: 8px; font-weight: 700;
  font-family: 'Courier New', monospace;
}
.promo-card .quota-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: rgba(255,255,255,0.06);
}
.promo-card .quota-fill {
  height: 100%; background: linear-gradient(90deg, #10b981, #fbbf24, #ef4444);
  transition: width 1s ease-out;
}

/* Game tile shimmer skeleton */
.kiss-game-skel {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: bs-skeleton-shimmer 1.4s infinite;
  border-radius: 12px; aspect-ratio: 1;
}

/* Scroll-reveal fade-in-up */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.show { opacity: 1; transform: translateY(0); }

/* Live now widget mini-chart */
#bs-live-chart {
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 14px; margin-left: 6px;
}
#bs-live-chart .bar {
  width: 3px; background: linear-gradient(180deg, #10b981, #059669);
  border-radius: 1px; transition: height .5s ease;
  min-height: 3px;
}

/* Splash refinement: smoother fade out */
#bs-splash { transition: opacity 0.6s ease, transform 0.6s ease; }
#bs-splash.fade-out { opacity: 0; transform: scale(1.05); }

/* CTA pulse on important buttons (non-intrusive) */
.btn-do-mlogin, .btn-do-mregister, #btn-hero-cta {
  position: relative; overflow: hidden;
}
.btn-do-mlogin::before, .btn-do-mregister::before, #btn-hero-cta::before {
  content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: bs-shine 2.5s infinite;
}
@keyframes bs-shine { 0% { left: -100%; } 60%, 100% { left: 100%; } }

/* Toast position better on desktop */
@media (min-width: 769px) {
  .toast { bottom: 24px !important; }
}

/* Game card image loading state */
.kiss-game-card img:not([src]),
.kiss-game-card img[src=""] {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: bs-skeleton-shimmer 1.4s infinite;
}

/* Float livechat — mobile：保持 pill 形状不强制方形 */
@media (max-width: 480px) {
  .float-btn.live { height: 52px; font-size: 13px; padding: 0 16px 0 12px; }
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Better focus states for accessibility */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Disable text selection on game cards */
.kiss-game-card, .promo-card, .game-tile { user-select: none; }

/* Reduce motion for users who prefer */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── inline block #16 ── */
@keyframes splash-spin { 0% { transform:rotate(-180deg) scale(0.4); opacity:0; } 100% { transform:rotate(0) scale(1); opacity:1; } }
@keyframes splash-glow { 0%,100% { transform:scale(1); opacity:0.4; } 50% { transform:scale(1.3); opacity:0.7; } }
@keyframes splash-text { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }

/* ── inline block #17 ── */
@keyframes bs-pulse-dot { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
@keyframes bs-ping { 0% { transform:scale(1); opacity:0.6; } 100% { transform:scale(2.5); opacity:0; } }

/* ── inline block #18 ── */
.more-game-tile:hover { transform:translateY(-3px); border-color:var(--gold); box-shadow:0 8px 24px rgba(0,0,0,0.5); }

/* ── inline block #19 ── */
.profile-tab { padding:8px 12px; background:transparent; border:none; color:var(--text-dim); font-size:13px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; }
.profile-tab.active { color:var(--gold); border-bottom-color:var(--gold); }
.profile-tab:hover { color:var(--text); }
.bs-input-group { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.bs-input-label { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; }
.bank-row, .ewallet-row { display:flex; align-items:center; justify-content:space-between; padding:10px; border:1px solid var(--border); border-radius:6px; margin-bottom:8px; background:var(--surface-2); }
.bank-row .info, .ewallet-row .info { flex:1; min-width:0; }
.bank-name { font-weight:700; color:var(--gold); font-size:13px; }
.bank-no { font-family:monospace; font-size:12px; color:var(--text-dim); margin-top:2px; }
.notif-item { padding:12px; border-bottom:1px solid var(--border); cursor:pointer; }
.notif-item.unread { background:rgba(251,191,36,0.05); }
.notif-item:hover { background:var(--surface-2); }
.notif-title { font-weight:700; font-size:13px; }
.notif-body { font-size:12px; color:var(--text-dim); margin-top:4px; }
.notif-time { font-size:10px; color:var(--text-dim); margin-top:6px; }

/* ── inline block #20 ── */
.lb-tab { padding:6px 12px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); font-size:12px; font-weight:600; border-radius:6px; cursor:pointer; }
.lb-tab.active { background:var(--gold); color:var(--bg); border-color:var(--gold); }
.promo-card { padding:12px; border:1px solid var(--border); border-radius:8px; margin-bottom:10px; background:var(--surface-2); }
.promo-card .ptitle { font-weight:700; color:var(--gold); font-size:14px; }
.promo-card .pbody { font-size:12px; color:var(--text-dim); margin:6px 0; }
.promo-card .pcta { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.checkin-day { padding:10px 4px; border:1px solid var(--border); border-radius:6px; text-align:center; font-size:11px; }
.checkin-day.claimed { background:var(--green); color:var(--bg); border-color:var(--green); font-weight:700; }
.checkin-day.today { background:var(--gold); color:var(--bg); border-color:var(--gold); font-weight:700; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.7;} }
.vip-tier { padding:10px; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
.vip-tier.current { background:linear-gradient(90deg,rgba(251,191,36,0.2),transparent); border-color:var(--gold); }
.vip-tier .lvl-name { font-weight:800; }
.lucky-wheel { width:200px; height:200px; border-radius:50%; background:conic-gradient(#fbbf24 0 12.5%,#10b981 12.5% 25%,#ef4444 25% 37.5%,#3b82f6 37.5% 50%,#fbbf24 50% 62.5%,#10b981 62.5% 75%,#ef4444 75% 87.5%,#3b82f6 87.5% 100%); margin:20px auto; transition:transform 3s cubic-bezier(.2,.8,.2,1); position:relative; }
.lucky-wheel::after { content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%); border:10px solid transparent; border-top-color:var(--gold); }
.lb-row { display:flex; justify-content:space-between; align-items:center; padding:8px 4px; border-bottom:1px solid var(--border); }
.lb-row .rank { width:30px; font-weight:800; color:var(--gold); }
.lb-row .name { flex:1; min-width:0; }
.lb-row .value { font-weight:700; color:var(--green); }

/* ── inline block #21 ── */
@keyframes bs-gold-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes bs-glow-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(251,191,36,0.3); } 50% { box-shadow: 0 0 16px rgba(251,191,36,0.6); } }

.kiss-fav-btn {
  position:absolute; top:5px; left:5px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,0.5);
  border:none; color:#fff; cursor:pointer; font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center;
  z-index:3; transition:all .15s;
}
.kiss-fav-btn:hover { background:rgba(239,68,68,0.8); transform:scale(1.15); }
.kiss-fav-btn.active { background:rgba(239,68,68,0.9); color:#fff; }
.kiss-fav-btn.active::before { content:'❤'; }
.kiss-fav-btn:not(.active)::before { content:'♡'; }

@keyframes bs-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.kiss-cat-tab {
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  color:var(--text-dim); font-size:12px; font-weight:700; border-radius:20px; cursor:pointer; transition:all .2s;
}
.kiss-cat-tab .cat-ico { font-size:14px; }
.kiss-cat-tab .cat-count {
  display:inline-block; font-size:9px; padding:1px 6px; background:rgba(255,255,255,0.1); border-radius:8px; min-width:18px; text-align:center;
}
.kiss-cat-tab:hover { border-color: var(--gold); color: var(--text); transform: translateY(-1px); }
.kiss-cat-tab.active {
  background: linear-gradient(90deg,#ef4444 0%,#fbbf24 100%);
  color:#fff; border-color:transparent;
  box-shadow: 0 4px 12px rgba(251,191,36,0.4);
}
.kiss-cat-tab.active .cat-count { background:rgba(0,0,0,0.3); color:#fff; }

.kiss-game-card {
  position:relative; background:linear-gradient(160deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.01) 100%);
  border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:8px 6px 10px; cursor:pointer; transition:all .25s; text-align:center; overflow:hidden;
}
.kiss-game-card.cat-slot { background:linear-gradient(160deg,rgba(251,191,36,0.12) 0%,rgba(239,68,68,0.06) 100%); }
.kiss-game-card.cat-fish { background:linear-gradient(160deg,rgba(6,182,212,0.12) 0%,rgba(59,130,246,0.06) 100%); }
.kiss-game-card.cat-table { background:linear-gradient(160deg,rgba(34,197,94,0.12) 0%,rgba(22,163,74,0.06) 100%); }
.kiss-game-card.cat-arcade { background:linear-gradient(160deg,rgba(168,85,247,0.12) 0%,rgba(139,92,246,0.06) 100%); }
.kiss-game-card:hover {
  border-color: var(--gold); transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 24px rgba(251,191,36,0.35), 0 0 0 1px rgba(251,191,36,0.4) inset;
}
.kiss-game-card .badge {
  position:absolute; top:5px; right:5px; padding:2px 6px; font-size:8px; font-weight:900;
  border-radius:4px; letter-spacing:0.5px; z-index:2; text-transform:uppercase;
}
.kiss-game-card .badge.hot { background:linear-gradient(90deg,#ef4444,#f97316); color:#fff; }
.kiss-game-card .badge.new { background:linear-gradient(90deg,#10b981,#06b6d4); color:#fff; }
.kiss-game-card .badge.fav { background:rgba(251,191,36,0.9); color:#000; }
.kiss-game-card .icon-wrap {
  width:100%; aspect-ratio:1; margin:0 auto 8px; border-radius:10px; overflow:hidden; position:relative;
  background:linear-gradient(135deg,rgba(251,191,36,0.18) 0%,rgba(239,68,68,0.12) 100%);
  display:flex; align-items:center; justify-content:center;
}
.kiss-game-card img { width:100%; height:100%; object-fit:cover; }
.kiss-game-card .icon-fallback {
  font-size:42px; font-weight:900; color:var(--gold); font-family:'Oswald','Impact',sans-serif;
}
.kiss-game-card .game-name {
  font-size:11px; font-weight:700; color:var(--text); line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; min-height:26px;
}
.kiss-game-card .play-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,0.7); display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s; gap:6px; backdrop-filter:blur(2px);
}
.kiss-game-card:hover .play-overlay { opacity:1; }
.kiss-game-card .play-icon {
  width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#fbbf24,#ef4444);
  display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; font-weight:900;
  box-shadow:0 4px 12px rgba(251,191,36,0.6);
  animation: bs-glow-pulse 1.5s ease-in-out infinite;
}
.kiss-game-card .play-text {
  font-size:10px; font-weight:900; color:var(--gold); letter-spacing:1.5px;
}

/* Featured cards larger */
.kiss-featured-card {
  position:relative; min-height:140px; background:linear-gradient(135deg,rgba(239,68,68,0.18) 0%,rgba(251,191,36,0.12) 100%);
  border:1px solid rgba(251,191,36,0.4); border-radius:12px; padding:12px; cursor:pointer; transition:all .25s; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.kiss-featured-card::before {
  content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.15) 50%,transparent 70%);
  transform:translateX(-100%);
}
.kiss-featured-card:hover {
  border-color: var(--gold); transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(251,191,36,0.5);
}
.kiss-featured-card:hover::before { animation: bs-shimmer 1s ease; }
.kiss-featured-card .icon-wrap { width:70px; height:70px; margin-bottom:6px; }
.kiss-featured-card .game-name { font-size:12px; font-weight:800; color:var(--text); text-align:center; }

@media (max-width: 480px) {
  #kiss-lobby-grid { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap:8px; }
  #kiss-featured-row { grid-template-columns: repeat(2, 1fr); }
  .kiss-game-card .icon-fallback { font-size:32px; }
  .kiss-cat-tab { padding:6px 10px; font-size:11px; }
  .kiss-cat-tab .cat-name { display:none; }
}

/* ── inline block #22 ── */
.kiss-tab { padding:6px 12px; background:transparent; border:none; color:var(--text-dim); font-weight:600; font-size:13px; cursor:pointer; border-bottom:2px solid transparent; }
.kiss-tab.active { color:var(--gold); border-bottom-color:var(--gold); }



/* ===== Chat widget v2 (惊喜感 redesign 2026-05-04) ===== */
.chat-modal-v2 {
  width: 92%; max-width: 440px;
  padding: 0 !important; overflow: hidden;
  border-radius: 22px !important;
  background: #0d1014 !important;
  border: 1px solid rgba(251,191,36,0.18) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 60px rgba(251,191,36,0.08);
  display: flex; flex-direction: column;
  max-height: 88vh;
}

/* Header */
.chat-header { position: relative; overflow: hidden; flex-shrink: 0; }
.chat-header-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(251,191,36,0.45), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(239,68,68,0.4), transparent 60%),
    linear-gradient(135deg, #1a0f06 0%, #2a1408 60%, #4a1a0a 100%);
}
.chat-header-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.5;
}
.chat-header-inner {
  position: relative; padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
}
.chat-avatar {
  position: relative; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #ef4444);
  padding: 2px;
  box-shadow: 0 4px 14px rgba(251,191,36,0.4);
}
.chat-avatar img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; background: #0d1014;
  display: block;
}
.chat-avatar-dot {
  position: absolute; bottom: 0; right: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: #22c55e; border: 2px solid #1a0f06;
  box-shadow: 0 0 8px rgba(34,197,94,0.9);
  animation: bs-chat-dot 2s ease-in-out infinite;
}
@keyframes bs-chat-dot {
  0%, 100% { box-shadow: 0 0 8px rgba(34,197,94,0.9); }
  50% { box-shadow: 0 0 14px rgba(34,197,94,1); }
}
.chat-header-text { flex: 1; min-width: 0; }
.chat-header-name {
  font-weight: 800; font-size: 17px; color: #fff;
  display: flex; align-items: center; gap: 6px;
  letter-spacing: 0.2px;
}
.chat-header-verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: #fff; font-size: 10px; font-weight: 900;
  box-shadow: 0 2px 6px rgba(59,130,246,0.5);
}
.chat-header-status {
  margin-top: 2px; font-size: 12px; color: rgba(255,255,255,0.85);
  display: flex; align-items: center; gap: 6px;
}
.chat-status-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
  animation: bs-chat-statusdot 1.6s ease-in-out infinite;
}
@keyframes bs-chat-statusdot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.chat-close-x {
  background: rgba(0,0,0,0.35); border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  color: #fff; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.chat-close-x:hover { background: rgba(0,0,0,0.6); }

/* Escalation */
.chat-escalate {
  margin: 10px 14px 0; padding: 10px 12px;
  display: flex; gap: 8px; align-items: center;
  background: linear-gradient(90deg, rgba(6,182,212,0.18), rgba(6,182,212,0.08));
  border: 1px solid rgba(6,182,212,0.5);
  border-radius: 10px; font-size: 12px; color: #67e8f9;
}

/* Welcome hero */
.chat-welcome {
  text-align: center; padding: 20px 18px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.chat-welcome.hidden { display: none; }
.chat-welcome-mascot {
  width: 88px; height: 88px; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(251,191,36,0.35));
  animation: bs-chat-bob 3s ease-in-out infinite;
}
@keyframes bs-chat-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.chat-welcome-title {
  font-size: 20px; font-weight: 900;
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: bs-chat-shimmer 4s linear infinite;
}
@keyframes bs-chat-shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.chat-welcome-sub {
  font-size: 13px; color: #9ca3af; line-height: 1.5;
  max-width: 320px;
}

/* Messages list */
.chat-messages-v2 {
  flex: 1 1 auto; min-height: 120px;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 8px;
  scroll-behavior: smooth;
}
.chat-messages-v2::-webkit-scrollbar { width: 4px; }
.chat-messages-v2::-webkit-scrollbar-thumb { background: rgba(251,191,36,0.3); border-radius: 2px; }

.chat-msg {
  padding: 10px 14px; border-radius: 16px;
  font-size: 13.5px; line-height: 1.5;
  max-width: 82%; word-wrap: break-word;
  animation: bs-chat-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
@keyframes bs-chat-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-msg.player {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a0f06; align-self: flex-end;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 8px rgba(251,191,36,0.3);
  font-weight: 600;
}
.chat-msg.ai {
  background: linear-gradient(180deg, #1f2937, #1a2230);
  color: #e5e7eb; align-self: flex-start;
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(255,255,255,0.06);
}
.chat-msg.human {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #fff; align-self: flex-start;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(6,182,212,0.35);
}
.chat-msg-meta { font-size: 9px; opacity: 0.7; margin-top: 3px; letter-spacing: 0.5px; text-transform: uppercase; }

/* Typing indicator: 3 bouncing dots */
.chat-msg.chat-typing-msg { padding: 12px 16px; }
.chat-typing { display: inline-flex; gap: 4px; align-items: center; }
.chat-typing::after { content: none; }
.chat-typing-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fbbf24; opacity: 0.6;
  animation: bs-chat-bounce 1.2s ease-in-out infinite;
}
.chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes bs-chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* Quick reply chips — wrap to multiple rows so all visible on narrow modal */
.chat-chips {
  flex-shrink: 0;
  padding: 10px 14px 6px;
  display: flex; gap: 6px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.chat-chip {
  flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(239,68,68,0.08));
  border: 1px solid rgba(251,191,36,0.3);
  color: #fbbf24; font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
  transition: all .15s ease;
}
.chat-chip:hover {
  background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(239,68,68,0.18));
  border-color: rgba(251,191,36,0.6);
  transform: translateY(-1px);
}
.chat-chip:active { transform: scale(0.96); }
.chat-chips.hidden { display: none; }

/* Input bar */
.chat-inputbar {
  flex-shrink: 0;
  padding: 10px 14px 4px;
  display: flex; gap: 8px; align-items: center;
}
.chat-input-pill {
  flex: 1;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e5e7eb; font-size: 14px;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.chat-input-pill:focus {
  border-color: rgba(251,191,36,0.5);
  background: rgba(255,255,255,0.06);
}
.chat-input-pill::placeholder { color: #6b7280; }
.chat-send-circle {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #1a0f06;
  box-shadow: 0 4px 14px rgba(251,191,36,0.5);
  transition: transform .15s ease;
}
.chat-send-circle:hover { transform: scale(1.06) rotate(-8deg); }
.chat-send-circle:active { transform: scale(0.94); }
.chat-send-circle svg { transition: transform .2s ease; }
.chat-send-circle:hover svg { transform: translateX(2px); }

.chat-foot {
  flex-shrink: 0;
  text-align: center; padding: 6px 14px 10px;
  font-size: 10px; color: #6b7280;
}

/* Mobile */
@media (max-width: 480px) {
  .chat-modal-v2 { max-height: 92vh; border-radius: 18px !important; }
  .chat-welcome-mascot { width: 72px; height: 72px; }
  .chat-welcome-title { font-size: 18px; }
  .chat-msg { font-size: 13px; max-width: 86%; }
}

/* A3.2 (2026-04-28) Register progress bar */
.reg-progress { margin: 0 0 14px 0; padding: 8px 12px; background: rgba(212, 160, 23, 0.08);
  border: 1px solid rgba(212, 160, 23, 0.25); border-radius: 8px; }
.reg-progress-text { font-size: 12px; color: var(--text-dim, #aaa); margin-bottom: 6px;
  display: flex; justify-content: space-between; }
.reg-progress-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.reg-progress-fill { height: 100%; background: linear-gradient(90deg, #b8860b, #d4a017);
  transition: width 250ms ease-out; }

/* E1 (2026-04-28) topnav dropdown */
.topnav-avatar-wrap { position: relative; display: inline-block; }
.topnav-dropdown-item:hover { background: #2a2f3d !important; }
.topnav-dd-logout:hover { background: rgba(239, 68, 68, 0.1) !important; }

.btn-logout-danger:hover { background: #b91c1c !important; }

/* E2 (2026-04-28) deposit card UI — gk9my style */
.deposit-card-list { display: flex; flex-direction: column; gap: 10px; }
.deposit-card {
  position: relative; padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(135deg, #064e3b, #022c22); border: 2px solid #10b981;
  cursor: pointer; transition: transform 120ms, box-shadow 120ms;
}
.deposit-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,185,129,0.25); }
.deposit-card.dc-active { border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,0.3); }
.deposit-card-badges { display: flex; gap: 4px; margin-bottom: 8px; }
.dc-badge {
  font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 10px;
  letter-spacing: 0.5px;
}
.dc-recommend { background: #fbbf24; color: #064e3b; }
.dc-instant { background: #3b82f6; color: #fff; }
.dc-fast { background: #ef4444; color: #fff; }
.deposit-card-logos { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.dc-logo {
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.12); color: #d1fae5;
}
.deposit-card-title {
  font-size: 18px; font-weight: 900; color: #fbbf24; letter-spacing: 1px;
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.dc-min {
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 14px;
  background: #fff; color: #064e3b; letter-spacing: 0.5px;
}
.deposit-card-sub { font-size: 11px; color: #a7f3d0; line-height: 1.4; }
.dep-quick-amt {
  padding: 4px 10px; font-size: 12px; background: rgba(251,191,36,0.15);
  color: #fbbf24; border: 1px solid #fbbf24; border-radius: 6px; cursor: pointer;
}
.dep-quick-amt:hover { background: rgba(251,191,36,0.3); }


/* ── Deposit amount block polish (2026-04-29) ── */
.dep-amount-label {
  font-size: 13px; font-weight: 600; color: var(--gold);
  margin-bottom: 8px; letter-spacing: 0.3px;
}
.dep-amount-input {
  font-size: 18px !important; font-weight: 700; text-align: center;
  letter-spacing: 1px; padding: 12px 14px !important;
}
.dep-amount-input::placeholder {
  font-size: 13px; font-weight: 400; letter-spacing: 0;
}
.dep-quick-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  margin-top: 10px;
}
.dep-quick-row .dep-quick-amt {
  padding: 8px 4px; font-size: 12px; font-weight: 600;
  border-radius: 8px;
}
@media (max-width: 380px) {
  .dep-quick-row { grid-template-columns: repeat(3, 1fr); }
}
.dep-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px;
}
.dep-submit-btn { min-width: 130px; }

/* ==========================================================
   Background v2 — BK8-inspired premium navy + LED accents
   (2026-04-30, replaces ugly v1)
   Survey reference: BK8 cinematic studio scene with deep
   navy + electric blue LED beams + gold corner glow.
   ========================================================== */

:root {
  --bg-deep: #07121f;
}

html { background: var(--bg-deep); }
body {
  background-color: var(--bg-deep) !important;
  background-image:
    /* Top-center electric blue spotlight (BK8 LED canopy feel) */
    radial-gradient(ellipse 95% 55% at 50% 0%, rgba(56, 132, 255, 0.16), transparent 60%),
    /* Bottom warm gold pool (Platfound brand colour subtle hint) */
    radial-gradient(ellipse 70% 35% at 50% 100%, rgba(251, 191, 36, 0.07), transparent 65%),
    /* Left-edge LED column */
    linear-gradient(90deg, rgba(56, 132, 255, 0.07) 0%, transparent 7%),
    /* Right-edge LED column */
    linear-gradient(270deg, rgba(56, 132, 255, 0.07) 0%, transparent 7%),
    /* Top horizontal LED light strip */
    linear-gradient(180deg, rgba(125, 197, 255, 0.10) 0%, transparent 4%),
    /* Centre vignette darkening for cinematic depth */
    radial-gradient(ellipse 60% 50% at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.18) 100%) !important;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed !important;
  background-repeat: no-repeat !important;
}

/* Subtle dot grid — feels like LED panel reflection (not confetti, very faint) */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(125, 197, 255, 0.05) 1px, transparent 1.5px);
  background-size: 90px 90px;
  opacity: 0.6;
}

/* Two corner gold light flares — premium accent */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* Top-left gold flare */
    radial-gradient(ellipse 30% 25% at 0% 5%, rgba(251, 191, 36, 0.10), transparent 60%),
    /* Bottom-right gold flare */
    radial-gradient(ellipse 30% 25% at 100% 95%, rgba(251, 191, 36, 0.08), transparent 60%);
}

/* Container framing — subtle depth shadow + edge glow like BK8 studio frame */
.bs-container {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15, 30, 54, 0.45) 0%, transparent 280px) !important;
  box-shadow:
    0 0 80px rgba(56, 132, 255, 0.10),
    0 0 160px rgba(0, 0, 0, 0.45);
}

/* Section title — gold LED accent bar */
.section-title {
  position: relative;
  padding-left: 14px;
}
.section-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 20px;
  background: linear-gradient(180deg, #fcd34d, #f59e0b);
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.55);
}

/* Desktop-only side ambient (since bs-container is mobile-first 500px) */
@media (min-width: 768px) {
  body::after {
    background-image:
      radial-gradient(ellipse 30% 25% at 0% 5%, rgba(251, 191, 36, 0.10), transparent 60%),
      radial-gradient(ellipse 30% 25% at 100% 95%, rgba(251, 191, 36, 0.08), transparent 60%),
      /* Far-left vertical column with deeper blue tint */
      linear-gradient(90deg, rgba(56, 132, 255, 0.04) 0%, transparent 12%),
      /* Far-right vertical column */
      linear-gradient(270deg, rgba(56, 132, 255, 0.04) 0%, transparent 12%);
  }
}

/* === Brand logos (auto-added 2026-04-30) === */
.game-bg-logo { display:flex; align-items:center; justify-content:center; padding:8px; }
.game-bg-logo img { max-width:80%; max-height:60%; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.pay-mono-logo { display:flex; align-items:center; justify-content:center; height:32px; padding:2px 0; }
.pay-mono-logo img { max-height:28px; max-width:90%; object-fit:contain; }

/* Wallet UX (auto-added 2026-04-30) */
@keyframes mw-btn-pulse-anim {
  0%,100% { box-shadow: 0 4px 14px rgba(251,191,36,0.45); transform: scale(1); }
  50% { box-shadow: 0 6px 22px rgba(251,191,36,0.85); transform: scale(1.02); }
}
.mw-btn-pulse { animation: mw-btn-pulse-anim 1.6s ease-in-out infinite; }
.mw-back-btn:hover { background: rgba(251,191,36,0.22) !important; transform: translateX(-2px); }
.mw-back-btn { transition: all .15s; }
.promo-card-v2 { transition: transform .15s, box-shadow .15s; }
.promo-card-v2:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }

/* === VIP modal v2 — fintech gold (2026-05-01) === */
.vip-banner { position:relative; padding:18px 16px 16px; border-radius:14px; margin-bottom:14px; overflow:hidden; background:radial-gradient(ellipse at top right,rgba(251,191,36,0.28),transparent 60%),linear-gradient(135deg,#1a0e2a 0%,#0a0e1a 55%,#1a1408 100%); border:1px solid rgba(251,191,36,0.35); box-shadow:0 8px 32px rgba(0,0,0,0.5),inset 0 1px 0 rgba(251,191,36,0.15); }
.vip-banner::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(251,191,36,0.10) 50%,transparent 70%); background-size:200% 100%; animation:vip-shimmer 4s linear infinite; pointer-events:none; }
@keyframes vip-shimmer { 0%{background-position:200% 0;} 100%{background-position:-100% 0;} }
.vip-banner-row { display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.vip-crown { font-size:38px; filter:drop-shadow(0 2px 8px rgba(251,191,36,0.55)); animation:vip-float 3s ease-in-out infinite; flex-shrink:0; }
@keyframes vip-float { 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-4px) rotate(2deg);} }
.vip-banner-lbl { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:4px; font-weight:600; }
.vip-banner-amt { font-size:30px; font-weight:900; line-height:1; background:linear-gradient(90deg,#f59e0b,#fde68a 50%,#f59e0b); background-size:200% auto; animation:bs-gold-flow 3s linear infinite; -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-0.5px; }
.vip-banner-tier { font-size:14px; font-weight:800; margin-top:8px; }
.vip-progress-wrap { margin-top:14px; position:relative; z-index:1; }
.vip-progress-track { height:10px; background:rgba(0,0,0,0.5); border-radius:999px; overflow:hidden; border:1px solid rgba(251,191,36,0.25); }
.vip-progress-fill { height:100%; background:linear-gradient(90deg,#f59e0b,#fbbf24,#fde68a); border-radius:999px; box-shadow:0 0 12px rgba(251,191,36,0.7); transition:width .8s cubic-bezier(.2,.8,.2,1); position:relative; overflow:hidden; }
.vip-progress-fill::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.45),transparent); animation:vip-progress-shine 2.2s linear infinite; }
@keyframes vip-progress-shine { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }
.vip-progress-hint { display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); margin-top:7px; }
.vip-progress-hint .vh-amount { color:var(--gold); font-weight:800; }
.vip-section-title { display:flex; align-items:center; gap:8px; font-weight:800; font-size:13px; margin:14px 0 10px; letter-spacing:0.5px; text-transform:uppercase; }
.vip-section-title::before { content:""; width:3px; height:14px; background:linear-gradient(180deg,#fbbf24,#f59e0b); border-radius:2px; }

.vip-card { position:relative; border-radius:12px; padding:12px 14px; margin-bottom:10px; border:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; gap:12px; overflow:hidden; transition:transform .2s ease, border-color .2s ease; }
.vip-card.locked { opacity:0.5; }
.vip-card.locked::after { content:"🔒"; position:absolute; top:50%; right:14px; transform:translateY(-50%); font-size:14px; opacity:0.7; }
.vip-card.current { border-color:rgba(251,191,36,0.6); animation:vip-pulse 2.5s ease-in-out infinite; }
@keyframes vip-pulse { 0%,100%{box-shadow:0 0 0 1px rgba(251,191,36,0.3),0 0 24px rgba(251,191,36,0.12);} 50%{box-shadow:0 0 0 1px rgba(251,191,36,0.55),0 0 32px rgba(251,191,36,0.28);} }
.vip-card-bronze   { background:linear-gradient(135deg,rgba(217,119,6,0.32),rgba(120,53,15,0.06)); }
.vip-card-silver   { background:linear-gradient(135deg,rgba(203,213,225,0.28),rgba(100,116,139,0.06)); }
.vip-card-gold     { background:linear-gradient(135deg,rgba(251,191,36,0.32),rgba(245,158,11,0.06)); }
.vip-card-platinum { background:linear-gradient(135deg,rgba(228,228,231,0.28),rgba(161,161,170,0.06)); }
.vip-card-diamond  { background:linear-gradient(135deg,rgba(34,211,238,0.30),rgba(6,182,212,0.06)); }
.vip-card-crown    { background:linear-gradient(135deg,rgba(192,132,252,0.32),rgba(217,70,239,0.10) 60%,rgba(251,191,36,0.14)); }
.vip-badge { width:48px; height:48px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:26px; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.08); }
.vip-card-bronze   .vip-badge { box-shadow:inset 0 1px 0 rgba(217,119,6,0.5),0 0 14px rgba(146,64,14,0.5); }
.vip-card-silver   .vip-badge { box-shadow:inset 0 1px 0 rgba(203,213,225,0.6),0 0 14px rgba(148,163,184,0.45); }
.vip-card-gold     .vip-badge { box-shadow:inset 0 1px 0 rgba(251,191,36,0.6),0 0 16px rgba(251,191,36,0.55); }
.vip-card-platinum .vip-badge { box-shadow:inset 0 1px 0 rgba(228,228,231,0.6),0 0 16px rgba(228,228,231,0.45); }
.vip-card-diamond  .vip-badge { box-shadow:inset 0 1px 0 rgba(34,211,238,0.6),0 0 18px rgba(6,182,212,0.55); }
.vip-card-crown    .vip-badge { box-shadow:inset 0 1px 0 rgba(192,132,252,0.6),0 0 20px rgba(168,85,247,0.6); }
.vip-card-body { flex:1; min-width:0; }
.vip-card-name { font-weight:800; font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vip-card-name .vip-lvl-badge { font-size:9px; font-weight:800; letter-spacing:0.5px; padding:2px 6px; border-radius:4px; background:rgba(255,255,255,0.08); color:var(--text-dim); }
.vip-now-pill { font-size:9px; font-weight:900; letter-spacing:1px; padding:2px 7px; border-radius:4px; color:#1a0e00; background:linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow:0 0 10px rgba(251,191,36,0.5); }
.vip-card-chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.vip-chip { font-size:10px; padding:3px 8px; border-radius:999px; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.06); color:#cbd5e1; display:inline-flex; align-items:center; gap:3px; font-weight:600; }
.vip-chip.gold { color:#fde68a; border-color:rgba(251,191,36,0.35); background:rgba(251,191,36,0.08); }

/* === Hot Promo strip v2 — premium fintech 2026-05-04 === */
.hot-promo-strip { margin: 22px 0 8px; padding: 0; position: relative; }
.hot-promo-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 6px 14px; gap: 12px;
}
.hot-promo-title {
  font-size: 13px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase;
  background: linear-gradient(90deg, #fbbf24 0%, #ef4444 50%, #fbbf24 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: bs-gold-flow 4s linear infinite;
  display: inline-flex; align-items: center; gap: 6px;
  position: relative;
}
.hot-promo-title::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 28px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #fbbf24, transparent);
}
.hot-promo-more {
  font-size: 11px; font-weight: 800; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(239,68,68,0.10));
  border: 1px solid rgba(251,191,36,0.4);
  color: #fbbf24;
  transition: all .2s ease;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.hot-promo-more:hover {
  background: linear-gradient(135deg, rgba(251,191,36,0.28), rgba(239,68,68,0.18));
  border-color: rgba(251,191,36,0.7);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(251,191,36,0.25);
}

/* Desktop: 4-column grid */
.hot-promo-track {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  padding: 4px 4px 8px;
}

/* Tablet: 2-col */
@media (max-width: 1023px) {
  .hot-promo-track { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: horizontal snap-scroll carousel */
@media (max-width: 600px) {
  .hot-promo-track {
    display: flex; gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .hot-promo-track::-webkit-scrollbar { display: none; }
  .hot-promo-card {
    flex: 0 0 78%; min-width: 240px; max-width: 300px;
    scroll-snap-align: start;
  }
}

.hot-promo-card {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px; border-radius: 18px;
  cursor: pointer; position: relative; overflow: hidden;
  min-height: 78px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, transparent) 0%, rgba(10,14,26,0.92) 70%),
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--c) 30%, transparent), transparent 60%);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow:
    0 6px 24px rgba(0,0,0,0.4),
    inset 0 1px 0 color-mix(in srgb, var(--c) 30%, transparent),
    0 0 0 1px rgba(255,255,255,0.02);
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow .25s ease,
              border-color .25s ease;
}
.hot-promo-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    color-mix(in srgb, var(--c) 18%, transparent) 50%,
    transparent 70%);
  background-size: 200% 100%;
  animation: hpc-shimmer 4s linear infinite;
  pointer-events: none;
}
.hot-promo-card::after {
  content: ""; position: absolute; right: -20px; top: -20px;
  width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--c) 22%, transparent) 0%,
    transparent 70%);
  pointer-events: none;
}
@keyframes hpc-shimmer { 0%{background-position:200% 0;} 100%{background-position:-100% 0;} }
.hot-promo-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c) 70%, transparent);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.55),
    0 0 24px color-mix(in srgb, var(--c) 25%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--c) 40%, transparent);
}
.hot-promo-card:active { transform: scale(0.98) translateY(-1px); }

.hpc-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0; position: relative; z-index: 1;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000));
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--c) 50%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.25);
  animation: hpc-icon-bob 3.5s ease-in-out infinite;
}
@keyframes hpc-icon-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.hot-promo-card:hover .hpc-icon { animation-duration: 1.5s; }

.hpc-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.hpc-title {
  font-size: 14px; font-weight: 900; color: #fff; line-height: 1.25;
  letter-spacing: 0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.hpc-sub {
  font-size: 11px; font-weight: 700;
  color: color-mix(in srgb, var(--c) 80%, #fff);
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; gap: 4px;
}
.hpc-sub::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 6px var(--c);
  flex-shrink: 0;
}
.hpc-cta {
  width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 25%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--c); font-weight: 900; font-size: 16px;
  flex-shrink: 0; position: relative; z-index: 1;
  transition: all .25s ease;
}
.hot-promo-card:hover .hpc-cta {
  background: var(--c); color: #0a0e1a;
  transform: translateX(4px) rotate(-8deg);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c) 60%, transparent);
}

/* Provider gate (Launch 2026-05-11) — Coming Soon overlay only, no grayscale */
.game-tile.coming-soon, [data-disabled="1"] {
  cursor: not-allowed !important;
  position: relative;
}
.game-tile.coming-soon:hover {
  transform: none !important;
  border-color: rgba(251,191,36,0.3) !important;
  box-shadow: none !important;
}
.coming-soon-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1a0f00;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,255,255,0.15);
  white-space: nowrap;
  animation: comingSoonPulse 2.5s ease-in-out infinite;
}
@keyframes comingSoonPulse {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) rotate(-8deg) scale(1.04); }
}


/* ============================================================
   P1 POLISH (2026-05-09) — modal animation + tap feedback + skeletons
   ============================================================ */

/* Modal scale-in animation (≤ 180ms, native feel) */
.modal-backdrop.show .modal {
  animation: bsModalIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bsModalIn {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Universal tap feedback on buttons + cards */
button:not(:disabled):active,
.btn-gold:not(:disabled):active,
.btn-ghost:not(:disabled):active,
.deposit-card:active,
.dep-quick-amt:active,
.action-card:active,
[role="button"]:not(:disabled):active {
  transform: scale(0.97);
  transition: transform 0.05s ease;
}

/* Smooth focus rings */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
  transition: outline-offset 0.1s;
}

/* Skeleton loader animation */
.bs-skeleton {
  background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
  background-size: 200% 100%;
  animation: bsSkeletonShimmer 1.5s infinite;
  border-radius: 6px;
}
@keyframes bsSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mobile tap highlight removal — replaced by our :active scale */
button, a, [role="button"], .deposit-card {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Smoother hover for desktop */
@media (hover: hover) {
  .deposit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .btn-gold:hover {
    filter: brightness(1.1);
  }
}

/* Hero banner punch-up */
.hero-cta-pulse {
  animation: bsHeroPulse 2s infinite;
}
@keyframes bsHeroPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); }
  50%      { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(251, 191, 36, 0); }
}

/* P1 — reduce intentional setTimeout delays in modals (we kept JS at 400ms after register/login reload, that's fine) */


/* ============================================================
   P2 (2026-05-09) — Floating winner ticker
   ============================================================ */
#winner-ticker .wt-card {
  background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(30,41,59,0.95));
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-left: 4px solid #fbbf24;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: #e2e8f0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 16px rgba(251,191,36,0.15);
  backdrop-filter: blur(8px);
  animation: wtSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#winner-ticker.wt-leaving .wt-card {
  animation: wtSlideOut 0.3s ease-in forwards;
}
@keyframes wtSlideIn {
  from { transform: translateX(-110%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes wtSlideOut {
  to { transform: translateX(-110%); opacity: 0; }
}
.wt-line1 { display:flex; align-items:center; gap:6px; }
.wt-trophy { font-size:18px; }
.wt-name { font-weight:700; color:#fbbf24; }
.wt-amount { color:#10b981; font-weight:900; font-size:15px; }
.wt-game { color:#94a3b8; font-size:10px; margin-top:2px; }
.wt-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#10b981; animation:wtPulse 1.5s infinite; margin-right:4px; }
@keyframes wtPulse { 0%,100% { opacity:1 } 50% { opacity:0.3 } }

@media (max-width: 640px) {
  #winner-ticker { left: 8px; right: auto; bottom: 90px; max-width: 240px; }
  #winner-ticker .wt-card { padding:8px 10px; font-size:11px; }
}


/* ============================================================
   P2 wave 2 (2026-05-09) — bell shake + achievements + confetti
   ============================================================ */

/* Bell with unread shakes attention every 4s */
.topnav-bell-badge:not([style*="display: none"]) ~ .topnav-bell-icon,
.topnav-bell.has-unread .topnav-bell-icon,
.topnav-bell:has(.topnav-bell-badge:not([style*="display: none"])) {
  animation: bsBellShake 0.9s cubic-bezier(.36,.07,.19,.97) infinite;
  animation-delay: 4s;
  transform-origin: top center;
}
@keyframes bsBellShake {
  0%, 90%, 100% { transform: rotate(0); }
  10%, 30%, 50%, 70% { transform: rotate(-12deg); }
  20%, 40%, 60%, 80% { transform: rotate(12deg); }
}

/* Achievement badge grid (used in profile) */
.bs-achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.bs-ach-card {
  background: rgba(30,41,59,0.5);
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bs-ach-card.unlocked {
  background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(245,158,11,0.05));
  border: 1px solid rgba(251,191,36,0.5);
}
.bs-ach-card.unlocked:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(251,191,36,0.25);
}
.bs-ach-icon { font-size: 32px; margin-bottom: 4px; }
.bs-ach-card.locked .bs-ach-icon { filter: grayscale(1); opacity: 0.4; }
.bs-ach-name { font-size: 11px; font-weight: 700; color: #fbbf24; margin-bottom: 2px; }
.bs-ach-card.locked .bs-ach-name { color: #64748b; }
.bs-ach-desc { font-size: 9px; color: #94a3b8; line-height: 1.3; }

/* Confetti (used post first-deposit) */
.bs-confetti-piece {
  position: fixed;
  width: 10px; height: 16px;
  pointer-events: none;
  z-index: 10000;
}

/* Mini VIP progress in topnav (small chip showing % to next) */
.topnav-vip-chip {
  display: none;
  align-items: center;
  gap: 4px;
  background: linear-gradient(90deg, rgba(251,191,36,0.18), rgba(245,158,11,0.08));
  border: 1px solid rgba(251,191,36,0.4);
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fbbf24;
  cursor: pointer;
}
.topnav-vip-chip-bar {
  width: 30px; height: 4px;
  background: rgba(251,191,36,0.2);
  border-radius: 2px;
  overflow: hidden;
}
.topnav-vip-chip-bar-fill {
  height: 100%;
  background: #fbbf24;
  transition: width .4s ease;
}


/* ============================================================
   P4 (2026-05-09) — Mobile polish + notification popup tighter
   ============================================================ */

/* Make notify sheet more polished — corners + softer slide */
.notify-sheet.show {
  animation: bsNotifySlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bsNotifySlide {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Prevent overflow on small screens */
@media (max-width: 480px) {
  /* Brand strip: scroll horizontally instead of clip */
  .topnav-brands, .brand-strip {
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .topnav-brands::-webkit-scrollbar, .brand-strip::-webkit-scrollbar { display: none; }

  /* VIP tier names: shorter spacing + smaller font */
  .vip-tier-name { font-size: 10px !important; }

  /* Hero CTA: bigger tap target */
  .hero-cta button { min-height: 44px; padding: 10px 18px !important; }

  /* Game tile padding compaction */
  .game-tile { padding: 6px !important; }
  .game-tile-name { font-size: 11px !important; }

  /* Modal padding tighter on mobile */
  .modal { padding: 16px !important; }
  .modal h3 { font-size: 16px !important; }

  /* Bottom nav safe-area for iOS notch */
  .bottom-nav, [class*=bottom-nav] {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}

/* Smooth scroll feel */
html { scroll-behavior: smooth; }

/* Reduced motion users — respect settings */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   P4 wave 2 (2026-05-09) — ripple, toast position, mobile modals
   ============================================================ */

/* Material-style ripple effect on .btn-gold + .btn-ghost */
.btn-gold, .btn-ghost, button.btn, .deposit-card, .dep-quick-amt {
  position: relative;
  overflow: hidden;
}
.bs-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: bsRippleAnim 0.6s linear;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
@keyframes bsRippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* Toast position: above bottom nav on mobile so not hidden */
@media (max-width: 768px) {
  .bs-toast, [class*=toast-container] {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
}

/* Mobile: modals near full-screen for native app feel */
@media (max-width: 480px) {
  .modal-backdrop .modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    align-self: flex-end !important;
  }
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  /* Slide-up animation feels native */
  .modal-backdrop.show .modal {
    animation: bsModalSlideUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes bsModalSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* Drag handle hint on top of modal */
  .modal-backdrop .modal::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
  }
}

/* Smoother focus on mobile inputs */
input:focus, select:focus, textarea:focus {
  scroll-margin-top: 80px;
}

/* Better tap target for nav links */
@media (max-width: 768px) {
  a, button, [role="button"] {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Don't break inline links */
  p a, span a, .text-inline a { min-height: auto; display: inline; }
}


/* P4 wave 3 (2026-05-09) — Page fade-in on load */
body { animation: bsBodyFadeIn 0.4s ease; }
@keyframes bsBodyFadeIn {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}