:root{
      --purple:#421F6F;
      --yellow:#FFB907;
      --ink:#1c1330;
      --easy:#16a34a;   /* green */
      --medium:#FFB907; /* yellow */
      --hard:#421F6F;   /* brand purple (alt to red) */
}

/* ==== Section Wrapper ==== */
.games-hero{
    position: relative;
    isolation: isolate; /* ensure overlay + decorations layer correctly */
    /* background: radial-gradient(110% 140% at 100% 0%, rgba(66,31,111,0.25) 0%, rgba(66,31,111,0.06) 60%, rgba(66,31,111,0) 100%),
                linear-gradient(180deg, #ffffff 0%, #faf6ff 100%); */
    overflow: hidden;
}

/* Legibility overlay for busy image backgrounds (extensible) */
.games-hero::before{
    content: "";
    position: absolute; inset: 0; z-index: -1; /* keep behind content */
    /* background: linear-gradient(90deg, rgba(66,31,111,0.20), rgba(66,31,111,0)); */
    pointer-events: none;
}

.lead{
    font-weight: 500;
}

.h6{
    font-weight: 500;
    color: #421F6F;
}

/* Decorative accents (controller/piece/stars) */
.deco{ position:absolute; opacity:.18; filter: drop-shadow(0 2px 4px rgba(0,0,0,.1)); user-select:none; pointer-events:none; }
.deco.star{ opacity:.25; animation: twinkle 3.5s ease-in-out infinite; }
.deco.pulse{ animation: bob 6s ease-in-out infinite; }

@keyframes bob{ 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-8px)} }
@keyframes twinkle{ 0%,100%{ transform: scale(1); opacity:.2 } 50%{ transform: scale(1.15); opacity:.35 } }

/* Heading + copy */
.games-hero h1{
    color: var(--purple);
    font-weight: 500;
    letter-spacing: .3px;
    line-height: 1.1;
}
.games-hero .lead{ color: #3b2b62; line-height: 1.55; }

/* Sparkle chips under H1 */
.stat-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border-radius:2rem; background:#fff; border:1px solid rgba(66,31,111,.15); box-shadow:0 2px 0 rgba(66,31,111,.06); font-weight:500; font-size:1rem }
.stat-chip .dot{ width:.6rem; height:.6rem; border-radius:50%; background: var(--yellow); box-shadow:0 0 0 3px rgba(255,185,7,.22)}

/* Utilities: search + chips + sort */
.util-wrap{ gap:.75rem }
.chip{ --bg:#fff; --bd:rgba(66,31,111,.18); --fg:var(--purple); background:var(--bg); border:1px solid var(--bd); color:var(--fg); border-radius:999px; padding:.45rem .9rem; font-weight:500; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, background .2s; }
.chip:hover, .chip:focus{ transform: translateY(-1px); box-shadow:0 4px 12px rgba(66,31,111,.12) }
.chip.active{ --bg:var(--purple); --bd:var(--purple); --fg:#fff; }

.form-control:focus, .form-select:focus, .btn:focus, .chip:focus{ outline: 3px solid rgba(255,185,7,.55); outline-offset: 2px; box-shadow: none; }

.searchbox{ border-radius: 999px; padding-left: 2.6rem; }
.search-icon{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%); width:1.15rem; height:1.15rem; opacity:.7 }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform: none; }

/* Breadcrumb */
.breadcrumb-link{ color: var(--purple); text-decoration:none; font-weight:500 }
.breadcrumb-link:hover{ text-decoration:underline; }

/* Divider */
.divider-wave{ height: 14px; background: repeating-linear-gradient(90deg, var(--yellow) 0 28px, transparent 28px 56px),
                                    radial-gradient(12px 8px at 12px 6px, var(--purple) 98%, transparent 100%);
    mask: radial-gradient(8px 6px at 12px 8px, #000 98%, transparent 100%);
    opacity:.22; border-radius: 999px; }

/* Responsive alignment */
@media (min-width: 768px){
    .text-md-start{ text-align: left !important; }
}

/* ===== Section Wrapper ===== */
    .games-section{ position:relative; background: linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%); }

    /* Header styles */
    .games-header h2{ color:var(--purple); font-weight:500; letter-spacing:.2px; }
    .games-header .lead{ color:#3b2b62; }

    /* Card styles */
    .game-card{ border:none; border-radius:1rem; overflow:hidden; box-shadow:0 8px 24px rgba(66,31,111,.08); transition: transform .25s ease, box-shadow .25s ease; background:#fff; }
    .game-card:hover{ transform: translateY(-6px); box-shadow:0 12px 28px rgba(66,31,111,.16); }

    .thumb-wrap{ position:relative; overflow:hidden; border-top-left-radius:1rem; border-top-right-radius:1rem; }
    .thumb-wrap img{ display:block; width:100%; height:180px; object-fit:cover; transition: transform .35s ease; }
    .game-card:hover .thumb-wrap img{ transform: scale(1.06); }

    .badge-diff{ font-weight:500; letter-spacing:.2px; border:0; }
    .badge-easy{ background:var(--easy); }
    .badge-medium{ background:var(--medium); color:#ffff; }
    .badge-hard{ background:var(--hard); }

    .btn-play{ background:var(--yellow); color:#ffffff; font-weight:500; font-size: 1rem;border-radius:999px; padding:.6rem 1.1rem; border:2px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.774); }
    .btn-play:hover, .btn-play:focus{ transform: translateY(-1px); box-shadow:0 8px 20px rgba(255,185,7,.4); background:transparent; color:var(--yellow); transform: scale(1.05); border: solid 1px;text-shadow: none;}
    .btn-play:focus{ outline:3px solid rgba(255,185,7,.6); outline-offset:2px; }

    /* Tooltips: rely on Bootstrap JS */

    /* Skeleton loading */
    .skeleton{ border-radius:1rem; overflow:hidden; background: #f3edff; position: relative; min-height: 320px; }
    .skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%); transform: translateX(-100%); animation: shimmer 1.2s infinite; }
    @keyframes shimmer{ 100%{ transform: translateX(100%); } }

    /* Empty state */
    .empty-state{ text-align:center; color:#3b2b62; padding:3rem 1rem; border:2px dashed rgba(66,31,111,.15); border-radius:1rem; }

    /* Error state */
    .error-state{ background:#fff4f4; border:1px solid #ffd7d7; color:#7a1020; padding:1rem; border-radius:.75rem; }

    /* Badges row (optional tags/genres) */
    .tag{ background: rgb(66 31 111 / 10%); color: var(--purple); border-radius: 999px; padding: .2rem .6rem; font-size: 1rem; font-weight:500; }

    /* Responsive image height tweaks */
    @media (min-width: 1200px){ .thumb-wrap img{ height: 200px; } }
    @media (max-width: 575.98px){ .thumb-wrap img{ height: 170px; } }