:root {
    --radius: 1.25rem;
}

body {
    font-family: Nunito, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
}

.brand-title {
    font-family: Fredoka, Nunito, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1;
    /* keep baseline tight so text centers nicely */
    color: #111827;
    /* near-black for good contrast */
}

.card-soft {
    border: 1px solid rgba(13, 110, 253, 0.15);
    /* faint primary */
    border-radius: 1rem;
    transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    will-change: box-shadow, border-color, transform;
}

/* Hover glow */
.card-soft:hover,
.card-soft:focus-within {
    border-color: #0d6efd;
    box-shadow:
        0 0 0 2px rgba(13, 110, 253, .15),
        /* subtle outline */
        0 8px 26px rgba(13, 110, 253, .20),
        /* blue glow */
        0 12px 28px rgba(0, 0, 0, .10);
    /* depth */
    transform: translateY(-5px);
    /* tiny lift */
}

/* Extra: stronger/softer variants if needed */
.card-glow-strong:hover {
    box-shadow:
        0 0 0 3px rgba(13, 110, 253, .25),
        0 14px 40px rgba(13, 110, 253, .28),
        0 16px 36px rgba(0, 0, 0, .12);
}

.card-glow-soft:hover {
    box-shadow:
        0 0 0 1px rgba(13, 110, 253, .15),
        0 8px 20px rgba(13, 110, 253, .18),
        0 10px 24px rgba(0, 0, 0, .08);
}

.ad-box {
    background: #f3f4f6;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    color: #6b7280;
}

/* Game wrapper fills the viewport under sticky header */
#game-wrapper {
    height: calc(100dvh - var(--header-h) - 24px);
    background: #000;
    border-radius: 1rem;
    overflow: hidden;
}

#game-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

/* Responsive 7-col grid for the games */
.games-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* xs */
    gap: 1rem;
    /* = g-3 */
}

@media (min-width: 576px) {
    .games-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* sm */
@media (min-width: 768px) {
    .games-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* md */
@media (min-width: 992px) {
    .games-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* lg */
@media (min-width: 1200px) {
    .games-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* xl */
@media (min-width: 1400px) {
    .games-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    .card-soft {
        transition: none;
    }
}

.card {
    @apply rounded-2xl shadow-md hover:shadow-lg transition;
}

.btn {
    @apply inline-flex items-center justify-center rounded-2xl px-4 py-2 font-semibold;
}

.btn-primary {
    @apply bg-brand-600 text-white hover:bg-brand-700;
}

.badge {
    @apply inline-block rounded-xl px-2 py-0.5 text-xs font-bold bg-brand-100 text-brand-700;
}

/* Responsive ad slot that never exceeds the card */
.ad-slot {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    border-radius: .75rem;
    overflow: hidden;
    background: #f3f4f6;
    display: grid;
    place-items: center;
    aspect-ratio: 6/5;
}

/* If you place an IMG ad */
.ad-slot img {
    width: 100%;
    height: auto;
    display: block;
}

/* If your ad provider uses an IFRAME with fixed size */
.ad-slot .ad-embed-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.ad-slot .ad-embed-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Optional: allow 336×280 on wider screens */
@media (min-width: 1200px) {
    .ad-slot {
        max-width: 336px;
        aspect-ratio: 336 / 280;
    }
}

.brand-mark {
    width: 42px;
    /* same width/height for a perfect squircle */
    height: 42px;
    border-radius: 14px;
    /* gentle rounded-square like your screenshot */
    background: linear-gradient(180deg, #2b8cff 0%, #1f7cf4 100%);
    display: grid;
    place-items: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .12);
}

.brand-icon {
    width: 22px;
    height: 22px;
    /* ensures no crop */
    display: inline-block;
    object-fit: contain;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .15));
}

/* If using the emoji instead of an image */
.brand-emoji {
    font-size: 20px;
    line-height: 1;
    display: block;
}

/* Navbar polish */
#site-header .navbar {
    padding-top: .4rem;
    padding-bottom: .4rem;
}

#site-header .navbar-brand {
    padding: 0;
}

/* Motto style + safe truncation */
.motto {
    min-width: 0;
}

.motto-pill {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: #eef5ff;
    border: 1px solid #d6e7ff;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    color: #0b3b85;
}

/* optional: hide on very small screens (already hidden < md by d-none d-md-flex) */
@media (max-width: 375px) {
    .motto-pill {
        display: none;
    }
}


/* remove extra vertical padding */

.game-card-full {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    /* keeps rounded corners */
    aspect-ratio: 3 / 4;
    /* consistent card size; tweak if you like */
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}

.game-card-full img.game-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* image fills card */
    display: block;
}

/* Body overlay sits on top of the image */
.game-card-full .game-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .85rem 1rem;
    background: rgba(255, 255, 255, .3);
    /* ≈70% transparent over the image */
    backdrop-filter: blur(3px);
    /* softens the image under text (nice!) */
}

/* Title & meta tweaks */
.game-card-title {
    font-family: Fredoka, Nunito, system-ui, sans-serif;
    font-weight: 800;
    margin: 0 0 .25rem 0;
    line-height: 1.15;
    color: #0f172a;
    font-size: 1.1rem;
    /* adjust to taste */
}

.game-card-meta {
    font-size: .875rem;
    color: #6b7280;
}

/* Auto width based on longest item, but with sensible limits */
.sidebar-fit {
    width: max-content;
    /* grow to fit the longest label */
    min-width: 14rem;
    /* never too narrow */
    max-width: 22rem;
    /* don’t steal the whole row */
}

/* Ensure links don't get truncated */
.category-link {
    white-space: nowrap;
    /* keep on one line */
    overflow: visible;
    /* no clipping */
}

/* (You already have) sticky + scroll control */
.sidebar-sticky {
    position: sticky;
    top: calc(var(--header-h, 64px) + 12px);
    max-height: calc(100dvh - var(--header-h, 64px) - 24px);
    overflow: auto;
    padding-right: 2px;
}

.policy-container {
    max-width: 900px;
}

.consent-banner {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1080;
}

.consent-shadow {
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
}

.game-placeholder {
    border: 1px dashed #ced4da;
    border-radius: .5rem;
    padding: 1rem;
    text-align: center;
}