/* =========================================================
HARITHA'S BOREDOM LAB
GAMES LIBRARY
========================================================= */

/* =========================================================
GAMES HERO
========================================================= */

.games-hero {
position: relative;

min-height: 88vh;

display: flex;
align-items: center;

overflow: hidden;

background:
radial-gradient(
circle at 72% 48%,
rgba(55, 115, 255, 0.16),
transparent 32%
),
radial-gradient(
circle at 25% 80%,
rgba(30, 75, 180, 0.08),
transparent 35%
),
#05070d;
}

/* Hero grid */

.games-hero .hero-grid {
opacity: 0.13;
}

/* Hero glow */

.games-hero .hero-orb {
width: 650px;
height: 650px;

right: -150px;
top: 5%;

background:
rgba(50, 110, 255, 0.07);

filter: blur(120px);
}

/* Hero content */

.games-hero-content {
position: relative;

z-index: 5;

width: 100%;

max-width: 1440px;

margin: 0 auto;

padding:
150px
10vw
100px;
}

/* Hero title */

.games-page-title {
margin: 28px 0 0;

font-size:
clamp(
5rem,
13vw,
12rem
);

line-height: 0.78;

letter-spacing: -0.095em;

font-weight: 300;
}

.games-page-title span,
.games-page-title strong {
display: block;
}

.games-page-title strong {
font-weight: 800;
}

.games-page-title .outline {
color: transparent;

-webkit-text-stroke:
1px
rgba(255, 255, 255, 0.42);
}

/* Hero description */

.games-hero-description {
display: flex;

gap: 20px;

margin-top: 65px;
}

.games-hero-description p {
margin: 0;

max-width: 390px;

font-size:
clamp(
1rem,
2vw,
1.35rem
);

line-height: 1.5;

font-weight: 500;
}

.games-hero-description small {
display: block;

margin-top: 12px;

font-family: monospace;

font-size: 8px;

letter-spacing: 0.1em;

line-height: 1.7;

color:
rgba(255, 255, 255, 0.38);
}

/* Games count */

.games-count {
position: absolute;

right: 10vw;
bottom: 18%;

display: flex;

align-items: flex-end;

gap: 12px;
}

.games-count strong {
font-size:
clamp(
5rem,
10vw,
9rem
);

line-height: 0.7;

letter-spacing: -0.08em;

font-weight: 800;

color: transparent;

-webkit-text-stroke:
1px
rgba(255, 255, 255, 0.2);
}

.games-count span {
font-family: monospace;

font-size: 7px;

line-height: 1.5;

letter-spacing: 0.14em;

color:
rgba(255, 255, 255, 0.3);
}

/* Hero bottom */

.games-hero-bottom {
position: absolute;

z-index: 10;

left: 5vw;
right: 5vw;
bottom: 25px;

display: flex;

justify-content: space-between;

align-items: center;

font-family: monospace;

font-size: 8px;

letter-spacing: 0.18em;

color:
rgba(255, 255, 255, 0.35);
}

.games-hero-bottom span:last-child {
color: var(--blue);

font-size: 16px;
}

/* =========================================================
FEATURED GAME
========================================================= */

.featured-game {
max-width: 1440px;

margin: 0 auto;

padding:
150px
10vw;

border-top:
1px solid
var(--border);
}

/* Featured container */

.featured-game-container {
min-height: 600px;

display: grid;

grid-template-columns:
1.15fr
0.85fr;

gap: 80px;

align-items: stretch;
}

/* Visual */

.featured-game-visual {
position: relative;

min-height: 600px;

display: grid;

place-items: center;

overflow: hidden;

background:
radial-gradient(
circle at center,
rgba(55, 110, 240, 0.14),
transparent 45%
);

border:
1px solid
var(--border);
}

/* Visual grid */

.featured-game-visual::before {
content: "";

position: absolute;

inset: 0;

background-image:
linear-gradient(
rgba(255, 255, 255, 0.05) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.05) 1px,
transparent 1px
);

background-size: 55px 55px;

opacity: 0.5;
}

/* Target */

.featured-target {
position: relative;

z-index: 2;

width: 125px;
height: 125px;

border-radius: 50%;

background:
radial-gradient(
circle at 35% 30%,
#75a9ff,
#286be0 45%,
#123e8e 100%
);

box-shadow:
0 0 30px
rgba(65, 135, 255, 0.65),

```
0 0 90px
rgba(65, 135, 255, 0.25),

0 0 180px
rgba(65, 135, 255, 0.12);
```

}

/* Target rings */

.featured-target::before,
.featured-target::after {
content: "";

position: absolute;

inset: -30px;

border:
1px solid
rgba(75, 141, 255, 0.3);

border-radius: 50%;
}

.featured-target::after {
inset: -60px;

border-color:
rgba(75, 141, 255, 0.14);
}

/* Visual label */

.featured-game-visual > span {
position: absolute;

bottom: 30px;

left: 30px;

font-family: monospace;

font-size: 7px;

letter-spacing: 0.18em;

color:
rgba(255, 255, 255, 0.35);
}

/* Featured content */

.featured-game-content {
display: flex;

flex-direction: column;

justify-content: center;
}

/* Featured title */

.featured-game-content h2 {
margin:
30px
0
25px;

font-size:
clamp(
4rem,
7vw,
7.5rem
);

line-height: 0.78;

letter-spacing: -0.08em;

font-weight: 800;
}

.featured-game-content h2 em {
color: transparent;

-webkit-text-stroke:
1px
rgba(255, 255, 255, 0.42);

font-weight: 300;
}

/* Description */

.featured-game-content > p {
max-width: 420px;

margin: 0;

font-size: 13px;

line-height: 1.8;

color:
rgba(255, 255, 255, 0.45);
}

/* Stats */

.featured-game-stats {
display: grid;

grid-template-columns:
repeat(3, 1fr);

gap: 15px;

margin-top: 45px;

padding-top: 18px;

border-top:
1px solid
var(--border);
}

.featured-game-stats div {
display: flex;

flex-direction: column;

gap: 7px;
}

.featured-game-stats small {
font-family: monospace;

font-size: 7px;

letter-spacing: 0.14em;

color:
rgba(255, 255, 255, 0.3);
}

.featured-game-stats strong {
font-size: 10px;

font-weight: 600;

letter-spacing: 0.08em;
}

/* Play button */

.game-play-button {
width: fit-content;

display: inline-flex;

align-items: center;

gap: 20px;

margin-top: 45px;

padding:
16px
24px;

border:
1px solid
rgba(255, 255, 255, 0.25);

color: #ffffff;

text-decoration: none;

font-family: monospace;

font-size: 8px;

letter-spacing: 0.15em;

transition:
background 0.3s ease,
border-color 0.3s ease,
transform 0.3s ease;
}

.game-play-button span {
color: var(--blue);

font-size: 16px;
}

.game-play-button:hover {
background: var(--blue);

border-color: var(--blue);

transform: translateX(5px);
}

.game-play-button:hover span {
color: #ffffff;
}

/* =========================================================
GAME FILTERS
========================================================= */

.all-games {
max-width: 1440px;

margin: 0 auto;

padding:
150px
10vw;

border-top:
1px solid
var(--border);
}

/* Total */

.games-total {
font-family: monospace;

font-size: 8px;

letter-spacing: 0.15em;

color:
rgba(255, 255, 255, 0.3);
}

/* Filter bar */

.game-filters {
display: flex;

flex-wrap: wrap;

gap: 8px;

margin-bottom: 55px;
}

.game-filter {
appearance: none;

min-height: 42px;

padding:
0
18px;

border:
1px solid
rgba(255, 255, 255, 0.12);

background: transparent;

color:
rgba(255, 255, 255, 0.42);

cursor: pointer;

font-family: monospace;

font-size: 8px;

letter-spacing: 0.15em;

transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}

.game-filter:hover,
.game-filter.active {
background: var(--blue);

color: #ffffff;

border-color: var(--blue);
}

.game-filter:focus-visible {
outline:
2px solid
var(--blue);

outline-offset: 3px;
}

/* =========================================================
GAME LIBRARY
========================================================= */

.game-library-grid {
display: grid;

grid-template-columns:
repeat(3, 1fr);

gap: 15px;
}

/* Game card */

.library-game {
min-width: 0;

overflow: hidden;

background: var(--surface);

border:
1px solid
var(--border);

transition:
transform 0.35s ease,
border-color 0.35s ease;
}

.library-game:hover {
transform: translateY(-6px);

border-color:
rgba(75, 141, 255, 0.4);
}

.library-game-link {
display: block;

height: 100%;

color: inherit;

text-decoration: none;
}

/* Game visual */

.library-game-visual {
position: relative;

height: 280px;

display: grid;

place-items: center;

overflow: hidden;

background:
radial-gradient(
circle at center,
rgba(40, 90, 190, 0.12),
transparent 60%
);
}

/* Visual grid */

.library-game-visual::before {
content: "";

position: absolute;

inset: 0;

background-image:
linear-gradient(
rgba(255, 255, 255, 0.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.04) 1px,
transparent 1px
);

background-size: 45px 45px;
}

/* Reaction visual */

.library-target {
position: relative;

z-index: 2;

width: 70px;
height: 70px;

border-radius: 50%;

background: var(--blue);

box-shadow:
0 0 30px
rgba(75, 141, 255, 0.55);
}

/* Number visual */

.number-visual {
background:
radial-gradient(
circle at center,
rgba(75, 141, 255, 0.15),
transparent 55%
);
}

.number-visual span {
position: relative;

z-index: 2;

font-size: 150px;

line-height: 1;

font-weight: 800;

color: transparent;

-webkit-text-stroke:
1px
rgba(255, 255, 255, 0.35);
}

/* Button visual */

.button-visual {
background:
radial-gradient(
circle at center,
rgba(255, 255, 255, 0.05),
transparent 50%
);
}

.library-button {
position: relative;

z-index: 2;

width: 110px;
height: 110px;

display: grid;

place-items: center;

border:
1px solid
rgba(255, 255, 255, 0.25);

border-radius: 50%;

background:
radial-gradient(
circle at 35% 25%,
#202938,
#080b12
);

box-shadow:
0 20px 50px
rgba(0, 0, 0, 0.6);

font-family: monospace;

font-size: 8px;

letter-spacing: 0.15em;
}

/* Game information */

.library-game-info {
padding: 22px;
}

/* Meta */

.library-game-meta {
display: flex;

justify-content: space-between;

gap: 10px;

font-family: monospace;

font-size: 7px;

letter-spacing: 0.14em;

color:
rgba(255, 255, 255, 0.3);
}

/* Title */

.library-game-info h3 {
margin:
25px
0
15px;

font-size:
clamp(
2.2rem,
4vw,
3.5rem
);

line-height: 0.82;

letter-spacing: -0.07em;
}

.library-game-info h3 em {
color: transparent;

-webkit-text-stroke:
1px
rgba(255, 255, 255, 0.38);

font-weight: 300;
}

/* Description */

.library-game-info p {
margin: 0;

font-size: 11px;

line-height: 1.7;

color:
rgba(255, 255, 255, 0.42);
}

/* Footer */

.library-game-footer {
display: flex;

justify-content: space-between;

align-items: center;

margin-top: 25px;

padding-top: 15px;

border-top:
1px solid
var(--border);

font-family: monospace;

font-size: 7px;

letter-spacing: 0.16em;

color:
rgba(255, 255, 255, 0.38);
}

.library-game-footer span:last-child {
color: var(--blue);

font-size: 15px;
}

/* =========================================================
COMING SOON
========================================================= */

.coming-soon {
max-width: 1440px;

margin: 0 auto;

padding:
150px
10vw;

border-top:
1px solid
var(--border);
}

.coming-soon-content > span {
font-family: monospace;

font-size: 8px;

letter-spacing: 0.17em;

color: var(--blue);
}

.coming-soon h2 {
margin:
25px
0;

font-size:
clamp(
4rem,
8vw,
8rem
);

line-height: 0.8;

letter-spacing: -0.08em;
}

.coming-soon h2 em {
color: transparent;

-webkit-text-stroke:
1px
rgba(255, 255, 255, 0.4);

font-weight: 300;
}

.coming-soon p {
max-width: 400px;

font-size: 12px;

line-height: 1.8;

color:
rgba(255, 255, 255, 0.4);
}

/* Loading */

.loading-display {
max-width: 650px;

margin-top: 60px;
}

.loading-bar {
width: 100%;

height: 2px;

overflow: hidden;

background:
rgba(255, 255, 255, 0.1);
}

.loading-bar span {
display: block;

width: 3%;

height: 100%;

background: var(--blue);

box-shadow:
0 0 12px
rgba(75, 141, 255, 0.7);
}

.loading-meta {
display: flex;

justify-content: space-between;

margin-top: 12px;

font-family: monospace;

font-size: 7px;

letter-spacing: 0.14em;

color:
rgba(255, 255, 255, 0.28);
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

.games-count {
right: 7vw;
}

.featured-game-container {
grid-template-columns: 1fr;
}

.featured-game-visual {
min-height: 500px;
}

.game-library-grid {
grid-template-columns:
repeat(2, 1fr);
}

}

@media (max-width: 750px) {

.games-hero-content {
padding:
130px
7vw
100px;
}

.games-page-title {
font-size:
clamp(
4rem,
17vw,
8rem
);
}

.games-hero-description {
margin-top: 45px;
}

.games-count {
position: relative;

```
right: auto;
bottom: auto;

margin-top: 50px;
```

}

.games-hero {
min-height: 90vh;
}

.featured-game,
.all-games,
.coming-soon {
padding:
100px
7vw;
}

.featured-game-container {
gap: 45px;
}

.featured-game-visual {
min-height: 400px;
}

.game-library-grid {
grid-template-columns: 1fr;
}

}

@media (max-width: 480px) {

.games-hero-content {
padding:
120px
20px
90px;
}

.games-page-title {
font-size:
clamp(
3.5rem,
19vw,
6rem
);
}

.games-hero-description p {
font-size: 15px;
}

.games-count strong {
font-size: 6rem;
}

.featured-game,
.all-games,
.coming-soon {
padding:
85px
20px;
}

.featured-game-visual {
min-height: 330px;
}

.featured-game-content h2 {
font-size: 4rem;
}

.featured-game-stats {
grid-template-columns: 1fr;
gap: 20px;
}

.library-game-visual {
height: 240px;
}

}