.game-library {
    --game-blue: #145ec7;
    --game-ink: #142942;
    --game-muted: #5c718c;
    width: min(1180px, 100%);
    margin: 0 auto;
    color: var(--game-ink);
}

.game-library__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: end;
    overflow: hidden;
    margin-bottom: 34px;
    padding: clamp(24px, 5vw, 48px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(69,211,255,.28), transparent 34%),
        linear-gradient(135deg, #09224a 0%, #0a4ca8 55%, #1679df 100%);
    box-shadow: 0 18px 40px rgba(17,65,130,.22);
}

.game-library__hero::after {
    position: absolute;
    right: -70px;
    bottom: -120px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(255,255,255,.05), 0 0 0 78px rgba(255,255,255,.035);
    content: "";
}

.game-library__hero > * { position: relative; z-index: 1; }
.game-library__eyebrow { color: #88e8ff; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.game-library__hero h1 { max-width: 760px; margin: 8px 0 12px; color: #fff; font-size: clamp(2rem, 5vw, 3.7rem); line-height: .98; letter-spacing: -.04em; }
.game-library__hero p { max-width: 760px; margin: 0; color: #d9eaff; font-size: clamp(.94rem, 2vw, 1.08rem); line-height: 1.65; }
.game-library__count { display: grid; min-width: 116px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: rgba(4,24,56,.35); backdrop-filter: blur(10px); font-size: .72rem; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.game-library__count span { font-size: 2rem; line-height: 1; letter-spacing: normal; }

.game-category { margin-top: 38px; }
.game-category__header { display: flex; gap: 18px; align-items: center; justify-content: space-between; margin-bottom: 17px; padding-bottom: 14px; border-bottom: 1px solid #cbd9e9; }
.game-category__header > div { display: flex; gap: 13px; align-items: center; min-width: 0; }
.game-category__number { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #3998ef, #145fc7); box-shadow: 0 7px 16px rgba(20,95,199,.24); font-size: .72rem; font-weight: 800; }
.game-category__header h2 { margin: 0; color: #143e79; font-size: clamp(1.12rem, 3vw, 1.55rem); line-height: 1.2; }
.game-category__header p { margin: 3px 0 0; color: var(--game-muted); font-size: .86rem; }
.game-category__header > span { flex: 0 0 auto; padding: 6px 10px; border: 1px solid #b8cce5; border-radius: 999px; color: #49627f; background: #f7fbff; font-size: .72rem; font-weight: 750; }

.game-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.game-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; border: 1px solid #bfd0e4; border-radius: 17px; background: #fff; box-shadow: 0 10px 26px rgba(30,67,112,.1); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.game-card:hover { border-color: #6fa9e8; box-shadow: 0 17px 35px rgba(24,77,143,.18); transform: translateY(-3px); }
.game-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 460 / 215; background: #0b1a2d; }
.game-card__media::after { position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(5,16,31,.67)); content: ""; }
.game-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.game-card:hover .game-card__media img { transform: scale(1.025); }
.game-card__media > span { position: absolute; z-index: 1; right: 12px; bottom: 11px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff; background: rgba(6,25,50,.76); backdrop-filter: blur(8px); font-size: .68rem; font-weight: 800; letter-spacing: .04em; }
.game-card__body { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 18px; }
.game-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.game-card__tags span { padding: 4px 8px; border-radius: 7px; color: #1456a7; background: #eaf4ff; font-size: .67rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.game-card h3 { margin: 0; color: #132f55; font-size: 1.16rem; line-height: 1.25; }
.game-card p { margin: 0; color: var(--game-muted); font-size: .87rem; line-height: 1.55; }
.game-card__action { display: inline-flex; width: fit-content; align-items: center; gap: 8px; margin-top: 3px; padding: 9px 12px; border: 1px solid #1768ca; border-radius: 9px; color: #fff !important; background: linear-gradient(#2d8cec, #0d5bb9); box-shadow: 0 4px 10px rgba(16,88,180,.2); font-size: .8rem; font-weight: 800; text-decoration: none !important; }
.game-card__action:hover { background: linear-gradient(#3a99f7, #1266c9); }
.game-card__action:focus-visible, .game-card__media:focus-visible { outline: 3px solid #ffbb24; outline-offset: 3px; }
.game-library__notice { margin: 28px 0 0; padding: 12px 14px; border-left: 4px solid #6c96c7; border-radius: 7px; color: #536c89; background: #eef5fc; font-size: .78rem; line-height: 1.5; }

@media (max-width: 760px) {
    .game-library__hero { grid-template-columns: 1fr; align-items: start; }
    .game-library__count { width: fit-content; min-width: 100px; }
    .game-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .game-library__hero { padding: 23px 19px; border-radius: 16px; }
    .game-category { margin-top: 30px; }
    .game-category__header { align-items: flex-start; }
    .game-category__header > span { display: none; }
    .game-category__number { width: 36px; height: 36px; border-radius: 10px; }
    .game-card { border-radius: 14px; }
    .game-card__body { padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .game-card, .game-card__media img { transition: none; }
    .game-card:hover, .game-card:hover .game-card__media img { transform: none; }
}