/* ============================================================
   09 · Bento Aurora — asymmetric tile grid + drifting aurora
   Layout differs from 01-08: CSS Grid named-area bento.
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: linear-gradient(180deg, #faf5ff 0%, #fce7f3 30%, #cffafe 65%, #ddd6fe 100%);
    color: #1e293b;
    min-height: 100vh;
    padding-bottom: 96px;
    position: relative;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; cursor: pointer; }
button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ico { width: 1em; height: 1em; vertical-align: -0.15em; }

/* ── Drifting aurora background ── */
.aurora-bg {
    position: fixed; inset: -20%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 50% 40% at 20% 30%, rgba(217,70,239,.45), transparent 70%),
        radial-gradient(ellipse 45% 35% at 80% 25%, rgba(56,189,248,.45), transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 80%, rgba(167,139,250,.45), transparent 70%),
        radial-gradient(ellipse 40% 30% at 90% 70%, rgba(244,114,182,.4), transparent 70%);
    filter: blur(60px);
    animation: aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(3%,-4%) scale(1.05); }
    100% { transform: translate(-2%,3%) scale(1.02); }
}

.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, #d946ef, #f472b6, #38bdf8, #a78bfa, #d946ef);
    background-size: 200% 100%;
    z-index: 9000;
    transition: width .12s ease-out;
    box-shadow: 0 0 14px rgba(217,70,239,.5);
    animation: prog-shine 4s linear infinite;
}
@keyframes prog-shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ── Glass header ── */
.g-header {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(28px) saturate(1.4);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    border-bottom: 1px solid rgba(255,255,255,.7);
}
.g-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.g-logo {
    position: relative;
    width: 42px; height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #d946ef 0%, #38bdf8 100%);
    color: #fff; font-weight: 800; font-size: 1.4rem;
    display: grid; place-items: center;
    box-shadow: 0 8px 22px rgba(217,70,239,.32);
    flex-shrink: 0;
}
.g-logo-glow {
    position: absolute; inset: -2px; border-radius: 16px;
    background: conic-gradient(from var(--ang,0deg), #d946ef, #38bdf8, #34d399, #fbbf24, #d946ef);
    z-index: -1; filter: blur(8px); opacity: .55;
    animation: foil-rot 8s linear infinite;
}
@keyframes foil-rot { 0% { --ang: 0deg; } 100% { --ang: 360deg; } }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.g-text { min-width: 0; }
.g-name { font-size: 1.02rem; font-weight: 700; color: #1e293b; line-height: 1.2; }
.g-tag  { font-size: 0.72rem; color: #64748b; margin-top: 1px; }
.g-domain {
    background: linear-gradient(135deg, #d946ef, #38bdf8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.g-kefu {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(167,139,250,.45);
    padding: 8px 14px;
    border-radius: 999px;
    color: #7c3aed;
    font-weight: 600; font-size: 0.84rem;
    backdrop-filter: blur(10px);
    transition: box-shadow .15s, transform .15s;
    flex-shrink: 0;
}
.g-kefu:active { transform: scale(.96); }
.g-kefu:hover  { box-shadow: 0 4px 18px rgba(217,70,239,.25); }
.g-kefu .ico   { font-size: 14px; }

/* ── Hero card ── */
.hero { padding: 22px 16px 14px; }
.hero-card {
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.8);
    backdrop-filter: blur(28px) saturate(1.4);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    border-radius: 26px;
    padding: 28px 24px;
    box-shadow: 0 20px 48px rgba(217,70,239,.10);
}
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 2px;
    color: #d946ef;
    padding: 5px 12px;
    background: rgba(217,70,239,.10);
    border-radius: 999px;
    margin-bottom: 14px;
}
.hero-eyebrow .ico { font-size: 11px; }
.hero-title {
    font-size: 2rem; font-weight: 800; line-height: 1.15;
    color: #1e293b;
    letter-spacing: -1px;
    margin-bottom: 10px;
}
.hero-em {
    background: linear-gradient(135deg, #d946ef 0%, #f472b6 50%, #38bdf8 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub {
    font-size: 0.88rem; color: #475569; line-height: 1.5;
    margin-bottom: 18px;
}
.hero-meta { display: flex; align-items: center; gap: 14px; }
.hm-item   { display: flex; flex-direction: column; }
.hm-item strong { font-size: 1.15rem; font-weight: 800; color: #1e293b; line-height: 1; }
.hm-item strong sup { font-size: 0.6em; vertical-align: super; opacity: .85; color: #d946ef; }
.hm-item strong em  { font-style: normal; font-size: 0.78em; margin-left: 1px; color: #d946ef; }
.hm-item span   { font-size: 0.66rem; color: #94a3b8; letter-spacing: 1.2px; text-transform: uppercase; margin-top: 4px; }
.hm-sep    { width: 1px; height: 28px; background: linear-gradient(180deg, transparent, rgba(217,70,239,.35), transparent); }

/* ── Bento grid ── */
.bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 78px;
    grid-auto-flow: dense;
    gap: 12px;
    padding: 4px 16px 28px;
}
.bt {
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.75);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 8px 28px rgba(167,139,250,.08);
    position: relative;
    overflow: hidden;
    transition: transform .22s, box-shadow .22s, border-color .22s;
    display: flex; flex-direction: column;
    color: inherit;
}
.bt:hover {
    transform: translateY(-2px);
    border-color: rgba(217,70,239,.35);
    box-shadow: 0 16px 40px rgba(217,70,239,.18);
}

/* Featured (2 cols × 4 rows) */
.bt.feature {
    grid-column: span 2; grid-row: span 4;
    background: linear-gradient(160deg, rgba(217,70,239,.92), rgba(244,114,182,.85), rgba(56,189,248,.92));
    color: #fff;
    padding: 22px;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.4);
}
.bt-foil {
    position: absolute; inset: -50%;
    background: conic-gradient(from var(--ang,0deg), #d946ef, #38bdf8, #34d399, #fbbf24, #f472b6, #d946ef);
    filter: blur(40px) opacity(.45);
    pointer-events: none;
    animation: foil-rot 10s linear infinite;
    z-index: 0;
}
.bt.feature > * { position: relative; z-index: 1; }
.bt-tags { display: flex; gap: 6px; }
.bt-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.65rem; font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
    color: #fff;
    backdrop-filter: blur(8px);
    letter-spacing: 0.4px;
}
.bt-tag .ico { font-size: 10px; }
.bt-tag.tag-hot { background: rgba(255,255,255,.4); }
.bt-tag.tag-vip {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
}
.bt-feature-body {}
.bt-feature-name { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.5px; margin-top: 10px; }
.bt-feature-tag { font-size: 0.85rem; opacity: 0.94; line-height: 1.45; margin-top: 6px; }
.bt-feature-foot { display: flex; flex-direction: column; gap: 10px; }
.bt-feature-stats { display: flex; gap: 16px; font-size: 0.72rem; opacity: 0.88; }
.bt-feature-stats strong { font-size: 0.95rem; font-weight: 800; margin-right: 4px; }
.bt-feature-cta {
    background: rgba(255,255,255,.96);
    color: #1e293b;
    font-weight: 700;
    padding: 11px 16px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

/* Promo (2×2) */
.bt.promo {
    grid-column: span 2; grid-row: span 2;
    background: linear-gradient(135deg, #f472b6, #fbbf24 90%);
    color: #fff;
    justify-content: center;
    align-items: flex-start;
    border-color: rgba(255,255,255,.5);
}
.bt-promo-eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: 0.92; }
.bt-promo-amt {
    font-size: 2.4rem; font-weight: 900;
    letter-spacing: -1.5px;
    line-height: 1;
    margin: 4px 0;
    text-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.bt-promo-sub { font-size: 0.78rem; opacity: 0.88; }
.bt-promo-cta {
    background: rgba(255,255,255,.95);
    color: #d946ef;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    margin-top: 10px;
}

/* Stat (1×1) */
.bt.stat {
    grid-column: span 1; grid-row: span 1;
    justify-content: center; align-items: center;
    text-align: center;
    padding: 12px 8px;
}
.bt.stat strong {
    font-size: 1.18rem; font-weight: 800;
    background: linear-gradient(135deg, #d946ef, #38bdf8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
    line-height: 1;
}
.bt.stat strong sup { font-size: 0.65em; vertical-align: super; }
.bt.stat span {
    font-size: 0.65rem; color: #64748b;
    letter-spacing: 1px;
    margin-top: 6px;
    text-transform: uppercase;
}

/* Ticker (2×4) */
.bt.ticker {
    grid-column: span 2; grid-row: span 4;
    padding: 16px 18px;
}
.bt-h {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.84rem; font-weight: 700; color: #1e293b;
    margin-bottom: 12px;
}
.bt-h::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: #ef4444;
    animation: pulse-dot 1.6s infinite;
}
.bt-h .ico { color: #d946ef; font-size: 14px; }
@keyframes pulse-dot {
    0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
    50%     { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}
.bt-tk { list-style: none; font-size: 0.78rem; display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.bt-tk li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px; align-items: center;
    padding: 7px 0;
    border-bottom: 1px dashed rgba(217,70,239,.18);
}
.bt-tk li:last-child { border-bottom: 0; }
.bt-tk .u { color: #475569; font-weight: 600; }
.bt-tk .p { color: #94a3b8; font-size: 0.7rem; text-align: right; }
.bt-tk .a {
    background: linear-gradient(135deg, #d946ef, #38bdf8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Notice strip (4×1) */
.bt.notice {
    grid-column: span 4; grid-row: span 1;
    flex-direction: row; align-items: center;
    gap: 12px;
    padding: 10px 16px;
}
.bt-notice-icon {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #d946ef, #f472b6);
    border-radius: 50%;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(217,70,239,.35);
}
.bt-notice-icon .ico { font-size: 14px; }
.bt.notice p {
    color: #475569; font-size: 0.82rem; flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Platform card (2×2) */
.bt.card {
    grid-column: span 2; grid-row: span 2;
    justify-content: space-between;
}
.bt-card-tag {
    display: inline-block;
    font-size: 0.65rem; font-weight: 700;
    padding: 4px 10px; border-radius: 999px;
    background: linear-gradient(135deg, rgba(217,70,239,.15), rgba(56,189,248,.15));
    color: #7c3aed;
    letter-spacing: 0.4px;
    align-self: flex-start;
}
.bt-card-name { font-size: 1.1rem; font-weight: 800; color: #1e293b; margin-top: 8px; }
.bt-card-tagline { font-size: 0.78rem; color: #64748b; margin-top: 4px; line-height: 1.4; }
.bt-card-cta {
    background: linear-gradient(135deg, #d946ef 0%, #38bdf8 100%);
    color: #fff;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.8rem;
    margin-top: 10px;
    box-shadow: 0 6px 16px rgba(217,70,239,.32);
}

/* Partners (4×1) */
.bt.partners {
    grid-column: span 4; grid-row: span 1;
    flex-direction: row; align-items: center; gap: 12px;
    padding: 10px 16px;
}
.bt-partners-h {
    font-size: 0.66rem; font-weight: 700; color: #d946ef;
    letter-spacing: 1.5px;
    flex-shrink: 0;
    text-transform: uppercase;
}
.bt-partners-row {
    font-size: 0.7rem; color: #64748b;
    letter-spacing: 0.6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1;
}

/* Footer */
.g-footer { text-align: center; font-size: 0.7rem; color: #94a3b8; padding: 16px 16px 4px; }

/* FAB */
.fab-top {
    position: fixed; bottom: 88px; right: 14px;
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #d946ef, #38bdf8);
    color: #fff;
    border-radius: 14px;
    display: grid; place-items: center;
    font-size: 1.1rem;
    box-shadow: 0 12px 30px rgba(217,70,239,.4);
    z-index: 80;
    opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .15s;
}
.fab-top.visible { opacity: 1; pointer-events: auto; }
.fab-top:active  { transform: scale(.92); }
.fab-top .ico    { font-size: 18px; }

/* Bottom nav (locked) */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex; justify-content: space-around; align-items: center;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(28px) saturate(1.4);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    border-top: 1px solid rgba(255,255,255,.8);
    padding: 6px 12px calc(8px + env(safe-area-inset-bottom));
    z-index: 100;
    gap: 8px;
}
.nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 14px;
    color: #94a3b8;
    font-size: 0.66rem;
    transition: color .15s, transform .15s;
    flex: 1;
    min-width: 0;
}
.nav-item:active { transform: scale(.94); }
.nav-item.active { color: #d946ef; }
.nav-item.primary {
    background: linear-gradient(135deg, #d946ef, #38bdf8);
    color: #fff !important;
    border-radius: 16px;
    padding: 9px 12px;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(217,70,239,.42);
    flex: 0 1 auto;
}
.nav-item .ico { font-size: 18px; }

/* ── Mobile-first responsive (default 4-col, expands on wider) ── */
@media (max-width: 720px) {
    .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 64px; gap: 10px; padding: 4px 12px 24px; }
    .bt { padding: 13px; border-radius: 18px; }
    .bt.feature { grid-column: span 4; grid-row: span 4; }
    .bt.promo   { grid-column: span 2; grid-row: span 2; }
    .bt.stat    { grid-column: span 2; grid-row: span 1; flex-direction: row; gap: 10px; }
    .bt.stat strong { font-size: 1.1rem; }
    .bt.stat span   { margin-top: 0; }
    .bt.ticker  { grid-column: span 4; grid-row: span 5; }
    .bt.notice  { grid-column: span 4; }
    .bt.card    { grid-column: span 2; grid-row: span 2; }
    .bt.partners{ grid-column: span 4; }

    .hero { padding: 18px 14px 10px; }
    .hero-card { padding: 22px 18px; border-radius: 22px; }
    .hero-title { font-size: 1.7rem; }
    .hero-meta  { gap: 10px; }
    .hm-item strong { font-size: 1rem; }
    .bt-feature-name { font-size: 1.4rem; }
    .bt-promo-amt    { font-size: 2rem; }
}

/* ── Wider screens — show more bento richness ── */
@media (min-width: 900px) {
    .bento { max-width: 980px; margin: 0 auto; grid-auto-rows: 90px; gap: 16px; }
    .hero-card { max-width: 980px; margin: 0 auto; }
    .games { max-width: 980px; margin: 0 auto; }
}

/* ============================================================
   v2 polish: noise grain, floating decorations, 3D tilt,
   game thumbnail strip, scroll-triggered tile entrances
   ============================================================ */

/* Noise grain overlay */
.grain {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    opacity: .35;
    background-image:
        radial-gradient(circle 1px at 13% 27%, rgba(255,255,255,.5), transparent),
        radial-gradient(circle 1px at 67% 14%, rgba(255,255,255,.4), transparent),
        radial-gradient(circle 1px at 89% 73%, rgba(255,255,255,.45), transparent),
        radial-gradient(circle 1px at 23% 88%, rgba(255,255,255,.4), transparent),
        radial-gradient(circle 1px at 51% 51%, rgba(255,255,255,.35), transparent),
        radial-gradient(circle 1px at 7% 65%, rgba(255,255,255,.4), transparent),
        radial-gradient(circle 1px at 95% 32%, rgba(255,255,255,.35), transparent);
    background-size: 4px 4px;
    mix-blend-mode: overlay;
}

/* Floating decorations — chip, star, coin, dice */
.floaters {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    overflow: hidden;
}
.floaters .float {
    position: absolute;
    filter: drop-shadow(0 14px 32px rgba(217,70,239,.25)) drop-shadow(0 0 24px rgba(56,189,248,.18));
    opacity: .85;
}
.f-1 { top: 12%; left: -6%;  width: 86px; height: 86px; animation: fl-bob 9s ease-in-out infinite alternate, fl-spin 18s linear infinite; }
.f-2 { top: 32%; right: -4%; width: 72px; height: 72px; animation: fl-bob 11s ease-in-out -2s infinite alternate, fl-spin 24s linear reverse infinite; }
.f-3 { top: 64%; left:  4%;  width: 64px; height: 64px; animation: fl-bob 8s ease-in-out -4s infinite alternate; }
.f-4 { top: 48%; right:  8%; width: 76px; height: 76px; animation: fl-bob 10s ease-in-out -1s infinite alternate, fl-spin 28s linear infinite; }
@keyframes fl-bob {
    0%   { transform: translateY(0) rotate(0); }
    100% { transform: translateY(-20px) rotate(8deg); }
}
@keyframes fl-spin {
    0%   { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

/* Game thumbnail strip section */
.games {
    padding: 8px 16px 14px;
    position: relative; z-index: 2;
}
.games-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}
.games-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 2px;
    color: #d946ef;
    padding: 4px 10px;
    background: rgba(217,70,239,.10);
    border-radius: 999px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.games-eyebrow .ico { font-size: 11px; }
.games-title {
    font-size: 1.1rem; font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.games-all {
    font-size: 0.78rem; font-weight: 700;
    background: linear-gradient(135deg, #d946ef, #38bdf8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    flex-shrink: 0;
    padding-bottom: 4px;
}
.games-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 4px 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.games-strip::-webkit-scrollbar { display: none; }
.game {
    position: relative;
    flex: 0 0 92px;
    scroll-snap-align: start;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 6px 18px rgba(217,70,239,.10);
    transition: transform .25s, box-shadow .25s;
    text-decoration: none;
    aspect-ratio: 3 / 4;
}
.game:active   { transform: scale(.97); }
.game:hover    { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(217,70,239,.25); }
.game img {
    display: block;
    width: 100%; height: 78%;
    object-fit: cover;
    object-position: center;
}
.game .g-name {
    display: block;
    padding: 4px 6px 6px;
    font-size: 0.65rem; font-weight: 700;
    color: #1e293b;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.game .g-tag {
    position: absolute;
    top: 6px; left: 6px;
    font-size: 0.55rem; font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    background: linear-gradient(135deg, #d946ef, #f472b6);
    color: #fff;
    letter-spacing: 0.4px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(217,70,239,.4);
}
.game .g-tag.hot {
    background: linear-gradient(135deg, #ef4444, #fbbf24);
    animation: g-pulse 1.6s ease-in-out infinite;
}
@keyframes g-pulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.08); }
}
/* mobile: smaller game cards */
@media (max-width: 720px) {
    .game { flex-basis: 80px; border-radius: 14px; }
    .game .g-name { font-size: 0.62rem; padding: 3px 4px 5px; }
}

/* 3D tilt on hover for bento tiles (desktop only) */
@media (hover: hover) and (pointer: fine) {
    .bt {
        transform-style: preserve-3d;
        transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
    }
    .bt:hover {
        transform: translateY(-4px) perspective(800px) rotateX(2deg) rotateY(-2deg);
    }
    .bt.feature:hover {
        transform: translateY(-4px) perspective(800px) rotateX(3deg) rotateY(-3deg) scale(1.005);
    }
}

/* Scroll-triggered tile entrance */
.bt, .game, .hero-card {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
}
.bt.in, .game.in, .hero-card.in {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger via nth-child */
.bento .bt:nth-child(1) { transition-delay: .05s; }
.bento .bt:nth-child(2) { transition-delay: .10s; }
.bento .bt:nth-child(3) { transition-delay: .15s; }
.bento .bt:nth-child(4) { transition-delay: .20s; }
.bento .bt:nth-child(5) { transition-delay: .25s; }
.bento .bt:nth-child(6) { transition-delay: .30s; }
.bento .bt:nth-child(n+7) { transition-delay: .35s; }
.games-strip .game:nth-child(1) { transition-delay: .05s; }
.games-strip .game:nth-child(2) { transition-delay: .08s; }
.games-strip .game:nth-child(3) { transition-delay: .11s; }
.games-strip .game:nth-child(4) { transition-delay: .14s; }
.games-strip .game:nth-child(n+5) { transition-delay: .17s; }

/* Sheen sweep on featured CTA */
.bt-feature-cta {
    position: relative;
    overflow: hidden;
}
.bt-feature-cta::after {
    content: "";
    position: absolute; top: 0; bottom: 0;
    left: -60%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    transform: skewX(-25deg);
    animation: sheen 3.6s ease-in-out infinite;
}
@keyframes sheen {
    0%   { left: -60%; }
    50%  { left: 110%; }
    100% { left: 110%; }
}

/* ============================================================
   v3 paike-tier upgrades:
   category quick-nav, rich platform cards (avatar + rating +
   reviews + tag chips), feature avatar block, gift FAB,
   festive edge, expanded 5-tab bottom nav
   ============================================================ */

/* Category quick-action nav row */
.cats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 6px 16px 14px;
    position: relative; z-index: 2;
}
.cat {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 4px;
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(255,255,255,.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(167,139,250,.08);
    transition: transform .18s, box-shadow .18s;
    overflow: hidden;
    position: relative;
}
.cat:active { transform: scale(.95); }
.cat:hover  { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(217,70,239,.18); }
.cat-ico {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 12px;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 6px 16px rgba(0,0,0,.18) inset, 0 6px 14px rgba(0,0,0,.06);
}
.cat-l { font-size: 0.66rem; font-weight: 700; color: #1e293b; letter-spacing: 0.3px; }
/* Per-category gradient backgrounds for icon */
.c-hot   .cat-ico { background: linear-gradient(135deg, #ef4444, #fbbf24); }
.c-tools .cat-ico { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.c-coin  .cat-ico { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.c-vpn   .cat-ico { background: linear-gradient(135deg, #34d399, #06b6d4); }
.c-gift  .cat-ico { background: linear-gradient(135deg, #d946ef, #f472b6); animation: cat-pulse 2.4s ease-in-out infinite; }
@keyframes cat-pulse {
    0%,100% { transform: scale(1); box-shadow: 0 6px 16px rgba(0,0,0,.18) inset, 0 6px 14px rgba(0,0,0,.06); }
    50%     { transform: scale(1.06); box-shadow: 0 6px 16px rgba(0,0,0,.18) inset, 0 8px 22px rgba(217,70,239,.45); }
}

/* Rich platform card structure (replaces simple .bt-card-name etc.) */
.bt.card { padding: 14px; }
.bt.card { grid-column: span 2; grid-row: span 3; }
.card-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px;
}
.card-avatar {
    width: 50px; height: 50px;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(167,139,250,.25);
    position: relative;
}
.card-avatar svg { width: 100%; height: 100%; display: block; }
.card-avatar::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(140deg, rgba(255,255,255,.35) 0%, transparent 40%);
    pointer-events: none;
}
.card-meta { flex: 1; min-width: 0; }
.card-name { font-size: 1.02rem; font-weight: 800; color: #1e293b; line-height: 1.1; letter-spacing: -0.3px; }
.card-rating {
    display: flex; align-items: center; gap: 5px;
    margin-top: 3px;
    font-size: 0.78rem;
}
.card-rating strong {
    background: linear-gradient(135deg, #d946ef, #38bdf8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.card-rating .stars { color: #fbbf24; font-size: 0.78rem; letter-spacing: 0.5px; }
.card-rev { font-size: 0.66rem; color: #94a3b8; margin-top: 2px; letter-spacing: 0.3px; }
.card-rev sup { font-size: 0.7em; vertical-align: super; opacity: 0.85; }
.card-tags {
    display: flex; gap: 5px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.tg {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(167,139,250,.12);
    color: #7c3aed;
    border: 1px solid rgba(167,139,250,.22);
    letter-spacing: 0.4px;
}
.tg.vip { background: linear-gradient(135deg, rgba(251,191,36,.2), rgba(245,158,11,.2)); color: #b45309; border-color: rgba(251,191,36,.4); }
.tg.new { background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(124,58,237,.18)); color: #38bdf8; border-color: rgba(56,189,248,.35); }
.tg.hot { background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(251,191,36,.2)); color: #ef4444; border-color: rgba(239,68,68,.4); animation: tg-flash 1.8s ease-in-out infinite; }
@keyframes tg-flash {
    0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
    50%     { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}
.card-cta {
    background: linear-gradient(135deg, #d946ef 0%, #38bdf8 100%);
    color: #fff;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.8rem;
    margin-top: auto;
    box-shadow: 0 8px 20px rgba(217,70,239,.4);
    letter-spacing: 0.3px;
}

/* Feature tile avatar (top of feature card) */
.feat-head {
    display: flex; align-items: center; gap: 12px;
    margin-top: 8px;
    margin-bottom: 4px;
}
.feat-avatar {
    width: 56px; height: 56px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
    border: 2px solid rgba(255,255,255,.4);
}
.feat-avatar svg { width: 100%; height: 100%; display: block; }
.feat-meta { flex: 1; min-width: 0; }
.bt.feature .bt-feature-name { margin: 0 !important; font-size: 1.6rem !important; }
.feat-rating {
    display: flex; align-items: center; gap: 6px;
    margin-top: 3px;
    font-size: 0.74rem;
    flex-wrap: wrap;
}
.feat-rating .stars { color: #fbbf24; letter-spacing: 0.6px; }
.feat-rating strong {
    background: rgba(255,255,255,.95);
    color: #1e293b;
    padding: 1px 7px;
    border-radius: 4px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
}
.feat-rating .rev { opacity: 0.85; }
.bt-feature-stats span {
    display: inline-flex; align-items: center; gap: 4px;
}
.bt-feature-stats .ico { font-size: 11px; opacity: 0.75; }

/* Override .bt.card sizing on mobile to match new richer card */
@media (max-width: 720px) {
    .bt.card { grid-column: span 2; grid-row: span 3; padding: 12px; }
    .card-avatar { width: 44px; height: 44px; border-radius: 12px; }
    .card-name { font-size: 0.95rem; }
    .feat-avatar { width: 48px; height: 48px; }
    .cats { grid-template-columns: repeat(5, 1fr); padding: 6px 12px 12px; gap: 6px; }
    .cat { padding: 8px 2px; border-radius: 13px; }
    .cat-ico { width: 32px; height: 32px; border-radius: 10px; font-size: 16px; }
    .cat-l { font-size: 0.58rem; }
}

/* Floating gift FAB (bottom-right, above bottom nav) */
.gift-fab {
    position: fixed;
    right: 14px; bottom: 92px;
    width: 54px; height: 54px;
    background: linear-gradient(135deg, #ef4444, #fbbf24);
    color: #fff;
    border-radius: 18px;
    display: grid; place-items: center;
    box-shadow: 0 12px 30px rgba(239,68,68,.5), 0 0 24px rgba(251,191,36,.35);
    z-index: 90;
    text-decoration: none;
    transition: transform .15s;
    animation: gift-float 3s ease-in-out infinite alternate;
}
.gift-fab:active { transform: scale(.92); }
.gift-fab .ico { font-size: 22px; }
@keyframes gift-float {
    from { transform: translateY(0); }
    to   { transform: translateY(-6px); }
}
.gift-pulse {
    position: absolute; inset: 0;
    border-radius: 18px;
    background: rgba(251,191,36,.45);
    animation: gift-pulse-ring 1.8s ease-out infinite;
    pointer-events: none;
}
@keyframes gift-pulse-ring {
    0%   { transform: scale(1);   opacity: .65; }
    100% { transform: scale(1.5); opacity: 0; }
}
.gift-badge {
    position: absolute;
    top: -5px; right: -7px;
    background: #ef4444;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    border: 2px solid #fff;
    letter-spacing: 0.4px;
    box-shadow: 0 4px 10px rgba(239,68,68,.5);
}
/* Hide FAB top button on this template since gift FAB takes that role */
.fab-top { display: none !important; }

/* Festive edge above bottom nav — fireworks burst confetti */
.festive-edge {
    position: fixed;
    bottom: calc(64px + env(safe-area-inset-bottom));
    left: 0; right: 0;
    height: 28px;
    pointer-events: none;
    z-index: 99;
    overflow: hidden;
}
.festive-edge .fw {
    position: absolute;
    bottom: -2px;
    width: 4px; height: 4px;
    border-radius: 50%;
}
.festive-edge .fw::before, .festive-edge .fw::after {
    content: "";
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
}
.fw.f1 { left:  10%; background: #d946ef; box-shadow: -8px -10px 0 -1px #fbbf24, 6px -14px 0 -1px #38bdf8, -3px -18px 0 -1px #34d399, 10px -8px 0 -1px #ef4444, -12px -4px 0 -1px #fbbf24; animation: fw-rise 4s ease-out infinite; }
.fw.f2 { left:  30%; background: #38bdf8; box-shadow: 9px -7px 0 -1px #ef4444, -4px -16px 0 -1px #fbbf24, 8px -20px 0 -1px #d946ef, -10px -10px 0 -1px #34d399; animation: fw-rise 5s ease-out infinite -1.6s; }
.fw.f3 { left:  50%; background: #fbbf24; box-shadow: -7px -14px 0 -1px #d946ef, 8px -10px 0 -1px #38bdf8, -3px -22px 0 -1px #ef4444, 12px -6px 0 -1px #34d399, -10px -2px 0 -1px #d946ef; animation: fw-rise 4.5s ease-out infinite -3s; }
.fw.f4 { left:  70%; background: #34d399; box-shadow: 7px -12px 0 -1px #fbbf24, -8px -8px 0 -1px #ef4444, 4px -20px 0 -1px #d946ef, -10px -16px 0 -1px #38bdf8; animation: fw-rise 5.5s ease-out infinite -2.2s; }
.fw.f5 { left:  88%; background: #ef4444; box-shadow: -6px -10px 0 -1px #38bdf8, 8px -16px 0 -1px #fbbf24, -10px -22px 0 -1px #d946ef, 4px -6px 0 -1px #34d399, 12px -2px 0 -1px #fbbf24; animation: fw-rise 4.2s ease-out infinite -0.8s; }
@keyframes fw-rise {
    0%   { transform: translateY(20px) scale(0.4); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translateY(-30px) scale(1.2); opacity: 0; }
}

/* 5-tab bottom nav with primary center button */
.bottom-nav { padding: 4px 8px calc(8px + env(safe-area-inset-bottom)) !important; }
.nav-item {
    flex: 1 0 auto !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
}
.nav-item.primary {
    transform: translateY(-12px);
    flex: 0 1 auto !important;
    padding: 12px 18px !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 30px rgba(217,70,239,.5), 0 0 0 4px rgba(255,255,255,.92) !important;
    position: relative;
}
.nav-item.primary::before {
    content: "";
    position: absolute; inset: -4px;
    border-radius: 26px;
    background: conic-gradient(from var(--ang,0deg), #d946ef, #38bdf8, #34d399, #fbbf24, #d946ef);
    z-index: -1;
    filter: blur(8px); opacity: .6;
    animation: foil-rot 6s linear infinite;
}
.nav-item.primary span { font-size: 0.62rem !important; font-weight: 800 !important; }
.nav-item.primary .ico { font-size: 22px !important; }