:root {
    --fu-bg: #090916;
    --fu-panel: rgba(255,255,255,.08);
    --fu-panel-2: rgba(255,255,255,.12);
    --fu-border: rgba(255,255,255,.16);
    --fu-text: #f8f7ff;
    --fu-muted: rgba(248,247,255,.72);
    --fu-hot: #ff4fd8;
    --fu-sun: #ffd166;
    --fu-blue: #5ee7ff;
    --fu-green: #80ff72;
    --fu-purple: #8a5cff;
    --fu-danger: #ff5d73;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    min-height: 100vh;
    background: var(--fu-bg);
    color: var(--fu-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

.app-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,79,216,.34), transparent 31%),
        radial-gradient(circle at 80% 10%, rgba(94,231,255,.25), transparent 28%),
        radial-gradient(circle at 58% 70%, rgba(138,92,255,.23), transparent 37%),
        linear-gradient(135deg, #090916 0%, #12122b 45%, #070710 100%);
}

.glass-nav {
    background: rgba(6,6,18,.78);
    border-bottom: 1px solid var(--fu-border);
    backdrop-filter: blur(18px);
}

.navbar-toggler { border-color: rgba(255,255,255,.25); }
.navbar-toggler-icon { filter: invert(1); }
.logo-mark {
    color: #fff !important;
    font-weight: 900;
    letter-spacing: -0.04em;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.logo-mark span {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--fu-hot), var(--fu-sun));
    box-shadow: 0 12px 30px rgba(255,79,216,.25);
}
.nav-pills-modern .nav-link {
    color: var(--fu-muted);
    border-radius: 999px;
    padding: .45rem .8rem;
    font-weight: 700;
}
.nav-pills-modern .nav-link:hover,
.nav-pills-modern .nav-link.active {
    color: #111;
    background: linear-gradient(135deg, var(--fu-blue), var(--fu-green));
}

.app-shell { position: relative; }
.hero-card,
.fu-card,
.game-card,
.admin-card {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
    border: 1px solid var(--fu-border);
    border-radius: 28px;
    box-shadow: 0 20px 80px rgba(0,0,0,.35);
    backdrop-filter: blur(20px);
}
.hero-card { overflow: hidden; position: relative; }
.hero-card::before {
    content: "";
    position: absolute;
    inset: -60% -30% auto auto;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255,209,102,.34), transparent 62%);
    pointer-events: none;
}
.hero-title {
    font-size: clamp(2.3rem, 8vw, 6.2rem);
    line-height: .88;
    letter-spacing: -.075em;
    font-weight: 950;
}
.text-gradient {
    background: linear-gradient(135deg, var(--fu-blue), var(--fu-green), var(--fu-sun), var(--fu-hot));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.fu-muted { color: var(--fu-muted); }
.fu-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid var(--fu-border);
    border-radius: 999px;
    padding: .42rem .78rem;
    color: var(--fu-muted);
    background: rgba(255,255,255,.08);
    font-weight: 750;
    font-size: .88rem;
}
.btn-laugh {
    border: 0;
    color: #111 !important;
    background: linear-gradient(135deg, var(--fu-sun), var(--fu-hot));
    font-weight: 900;
    border-radius: 999px;
    box-shadow: 0 14px 32px rgba(255,79,216,.22);
}
.btn-laugh:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn-soft {
    color: #fff !important;
    background: rgba(255,255,255,.11);
    border: 1px solid var(--fu-border);
    border-radius: 999px;
    font-weight: 800;
}
.btn-hot {
    color: #fff;
    background: linear-gradient(135deg, var(--fu-hot), var(--fu-purple));
    border: 0;
    border-radius: 999px;
    font-weight: 900;
}
.btn-blue {
    color: #111;
    background: linear-gradient(135deg, var(--fu-blue), var(--fu-green));
    border: 0;
    border-radius: 999px;
    font-weight: 900;
}

.laugh-stat {
    padding: 1rem;
    border-radius: 22px;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--fu-border);
}
.laugh-stat strong { display: block; font-size: 1.55rem; line-height: 1; }
.laugh-stat span { color: var(--fu-muted); font-size: .86rem; }

.fu-card { padding: 1.35rem; }
.fu-card h3, .fu-card h4, .fu-card h5 { color: #fff; }
.fu-card-link {
    color: inherit;
    text-decoration: none;
    display: block;
    height: 100%;
    transition: .18s ease;
}
.fu-card-link:hover { transform: translateY(-4px); color: inherit; }
.icon-bubble {
    width: 54px;
    height: 54px;
    display: inline-grid;
    place-items: center;
    border-radius: 20px;
    font-size: 1.6rem;
    background: rgba(255,255,255,.12);
    border: 1px solid var(--fu-border);
}

.game-card { overflow: hidden; height: 100%; }
.game-card .media-wrap {
    min-height: 260px;
    background: rgba(0,0,0,.28);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.game-card img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    max-height: 420px;
    object-fit: cover;
}
.game-card .joke-body {
    min-height: 260px;
    display: grid;
    place-items: center;
    padding: 2rem;
    text-align: center;
    font-size: clamp(1.3rem, 4vw, 2.35rem);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: -.05em;
}
.game-card .body { padding: 1.1rem; }
.versus-pill {
    width: 74px;
    height: 74px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fu-sun), var(--fu-hot));
    color: #111;
    font-weight: 950;
    letter-spacing: -.04em;
    box-shadow: 0 18px 46px rgba(255,79,216,.3);
    margin: -18px auto;
    position: relative;
    z-index: 4;
}

.leader-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem;
    border-radius: 18px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.11);
}
.rank-badge {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.12);
    font-weight: 950;
}
.score-chip {
    margin-left: auto;
    border-radius: 999px;
    padding: .35rem .75rem;
    background: rgba(128,255,114,.14);
    border: 1px solid rgba(128,255,114,.25);
    color: #d9ffd4;
    font-weight: 850;
}

.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
    color: #fff;
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.18);
}
.form-control::placeholder { color: rgba(255,255,255,.42); }
.form-label { color: #fff; font-weight: 800; }
.help-text { color: var(--fu-muted); font-size: .9rem; }

.table-modern {
    --bs-table-bg: transparent;
    --bs-table-color: #fff;
    --bs-table-border-color: rgba(255,255,255,.12);
}
.table-modern td, .table-modern th { vertical-align: middle; }
.badge-soft {
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid var(--fu-border);
}

.ad-placeholder {
    min-height: 86px;
    border: 1px dashed rgba(255,255,255,.28);
    border-radius: 24px;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.045);
    text-align: center;
    padding: 1rem;
}

.caption-entry,
.daily-entry {
    border-radius: 22px;
    border: 1px solid var(--fu-border);
    background: rgba(255,255,255,.075);
    padding: 1rem;
}

.mobile-tabbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .25rem;
    padding: .55rem;
    border-radius: 28px;
    background: rgba(6,6,18,.86);
    border: 1px solid var(--fu-border);
    backdrop-filter: blur(18px);
    box-shadow: 0 16px 50px rgba(0,0,0,.4);
}
.mobile-tabbar a {
    color: rgba(255,255,255,.62);
    text-decoration: none;
    display: grid;
    place-items: center;
    gap: .1rem;
    border-radius: 18px;
    padding: .35rem .2rem;
    font-weight: 800;
}
.mobile-tabbar a span { font-size: 1.15rem; line-height: 1; }
.mobile-tabbar a small { font-size: .68rem; }
.mobile-tabbar a.active {
    color: #111;
    background: linear-gradient(135deg, var(--fu-blue), var(--fu-green));
}

.admin-sidebar {
    position: sticky;
    top: 92px;
}
.admin-sidebar a {
    display: block;
    padding: .72rem .9rem;
    border-radius: 16px;
    color: var(--fu-muted);
    text-decoration: none;
    font-weight: 800;
}
.admin-sidebar a.active,
.admin-sidebar a:hover {
    color: #111;
    background: linear-gradient(135deg, var(--fu-sun), var(--fu-hot));
}

@media (max-width: 991px) {
    body { padding-bottom: 88px; }
    .hero-card { border-radius: 24px; }
    .fu-card, .game-card { border-radius: 22px; }
    .game-card .media-wrap,
    .game-card img,
    .game-card .joke-body { min-height: 220px; }
}

@media (prefers-reduced-motion: no-preference) {
    .pop-in { animation: popIn .4s ease both; }
    @keyframes popIn {
        from { opacity: 0; transform: translateY(12px) scale(.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
}


/* Package 02: feed, reactions, comments, achievements, notifications */
.feed-card h2 a,
.feed-joke,
.fu-card a { color: inherit; }
.feed-card h2 a { text-decoration: none; }
.feed-image {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.feed-joke {
    display: block;
    text-decoration: none;
    border-radius: 24px;
    padding: clamp(1.25rem, 5vw, 2.5rem);
    min-height: 220px;
    background: radial-gradient(circle at 20% 10%, rgba(255,228,94,.18), transparent 38%), rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    font-size: clamp(1.45rem, 4vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -.045em;
    font-weight: 950;
}
.detail-joke { display: grid; place-items: center; min-height: 340px; text-align: center; }
.reaction-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
}
.reaction-btn {
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: 999px;
    padding: .42rem .72rem;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    transition: transform .16s ease, background .16s ease;
}
.reaction-btn:hover { transform: translateY(-2px) scale(1.03); background: rgba(255,255,255,.14); }
.reaction-btn span { font-size: .82rem; opacity: .78; margin-left: .12rem; }
.comment-bubble,
.notification-row,
.achievement-card {
    border-radius: 20px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.12);
    padding: 1rem;
}
.notification-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: .75rem;
}
.notification-row.unread {
    background: linear-gradient(135deg, rgba(255,228,94,.16), rgba(255,79,216,.12));
    border-color: rgba(255,228,94,.32);
}
.notification-dot {
    position: absolute;
    top: -9px;
    right: -9px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, var(--fu-sun), var(--fu-hot));
    color: #111;
    font-size: .7rem;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(255,79,216,.28);
}
.achievement-card {
    display: flex;
    gap: .85rem;
    height: 100%;
}
.achievement-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.12);
    font-size: 1.35rem;
    flex: 0 0 auto;
}
@media (max-width: 991.98px) {
    .mobile-tabbar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .feed-image { max-height: 430px; }
}

/* Package 03: games hub, would you rather, fake headline */
.game-play-card h2 { font-size: clamp(1.55rem, 4vw, 2.75rem); letter-spacing: -.045em; }
.game-preview {
    border-radius: 20px;
    padding: 1.15rem;
    background: linear-gradient(135deg, rgba(255,228,94,.14), rgba(116,97,255,.14));
    border: 1px solid rgba(255,255,255,.13);
    font-weight: 900;
    color: #fff;
}
.game-option {
    min-height: 220px;
    border: 1px solid rgba(255,255,255,.16);
    background: radial-gradient(circle at 20% 0%, rgba(255,228,94,.18), transparent 34%), rgba(255,255,255,.075);
    color: #fff;
    border-radius: 26px;
    padding: clamp(1.1rem, 4vw, 1.65rem);
    box-shadow: 0 22px 60px rgba(0,0,0,.2);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
}
.game-option:hover,
.game-option:focus {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(255,228,94,.48);
    background: radial-gradient(circle at 20% 0%, rgba(255,228,94,.24), transparent 36%), rgba(255,255,255,.11);
}
.game-option strong {
    display: block;
    font-size: clamp(1.12rem, 2.4vw, 1.75rem);
    line-height: 1.1;
    letter-spacing: -.035em;
}
.game-option small { color: rgba(255,255,255,.62); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.option-letter {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--fu-sun), var(--fu-hot));
    color: #15151f;
    font-weight: 950;
    box-shadow: 0 14px 30px rgba(255,79,216,.24);
}
.game-result {
    border-radius: 22px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    padding: 1rem;
}
.game-result.picked { border-color: rgba(255,228,94,.42); box-shadow: inset 0 0 0 1px rgba(255,228,94,.1); }
.game-result.correct { background: linear-gradient(135deg, rgba(32, 201, 151, .15), rgba(255,255,255,.06)); }
.result-track {
    height: 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.25);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
}
.result-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--fu-blue), var(--fu-hot), var(--fu-sun));
}
.glass-alert {
    background: rgba(255,255,255,.09);
    color: #fff;
    border-color: rgba(255,255,255,.18);
}
@media (max-width: 991.98px) {
    .mobile-tabbar { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .mobile-tabbar a { padding: .55rem .15rem; }
    .mobile-tabbar span { font-size: 1.05rem; }
    .mobile-tabbar small { font-size: .62rem; }
    .game-option { min-height: 170px; }
}

/* Package 04: daily missions, rewards, and referrals */
.mission-card {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    border-radius: 22px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.13);
    padding: 1rem;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.mission-card:hover { transform: translateY(-2px); border-color: rgba(255,228,94,.28); }
.mission-card.completed { background: linear-gradient(135deg, rgba(128,255,114,.13), rgba(255,255,255,.065)); border-color: rgba(128,255,114,.24); }
.mission-card.claimed { opacity: .78; }
.mission-icon {
    width: 48px;
    height: 48px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-weight: 950;
    font-size: 1.25rem;
    color: #111;
    background: linear-gradient(135deg, var(--fu-blue), var(--fu-green));
    box-shadow: 0 14px 32px rgba(94,231,255,.18);
}
.mission-card:nth-child(odd) .mission-icon { background: linear-gradient(135deg, var(--fu-sun), var(--fu-hot)); }
.copy-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem;
    padding: .55rem;
    border-radius: 22px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.13);
}
.copy-box .form-control { border-radius: 999px; }
.retention-meter {
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0,0,0,.26);
    border: 1px solid rgba(255,255,255,.09);
}
.retention-meter > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--fu-green), var(--fu-blue), var(--fu-hot));
}
@media (max-width: 991.98px) {
    .mobile-tabbar { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .copy-box { grid-template-columns: 1fr; }
}