/* ============ browse section — widescreen arcade shelf ============ */

.games-sec {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--cr);
}

/* full-bleed interactive shader background (Three.js canvas mounts here) */
.games-sec-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}

.games-sec > .wrap,
.games-sec > .browse-stage {
position: relative;
z-index: 2;
}

.games-sec .browse-intro .sec-title {
color: var(--ink);
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.55),
0 8px 32px rgba(255, 255, 255, 0.35),
0 4px 24px rgba(17, 18, 26, 0.25);
}
.games-sec .browse-intro .sec-sub {
color: var(--ink);
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.55),
0 4px 24px rgba(255, 255, 255, 0.35);
}
.games-sec .pop-head h3,
.games-sec .pop-sub {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 18px rgba(255, 255, 255, 0.28);
}

.browse-intro {
padding-bottom: 36px;
}

#games .browse-intro .sec-head {
scroll-margin-top: 140px;
}

.browse-stage {
width: 100%;
padding: 0 clamp(16px, 3vw, 40px) clamp(48px, 6vw, 88px);
}

.browse-inner {
max-width: 1680px;
margin: 0 auto;
}

#games .browse-grid {
scroll-margin-top: 120px;
}

.pop-head {
margin: 0 0 16px;
}

/* ---- gold winners frame around most-played podium ---- */

.podium-block {
position: relative;
margin-top: 38px;
padding-top: 14px;
}

.podium-block::before {
content: 'WINNING NOW';
position: absolute;
top: 0;
left: clamp(16px, 3vw, 28px);
z-index: 3;
font-family: 'Space Grotesk', sans-serif;
font-size: 11px;
letter-spacing: 0.14em;
color: var(--ink);
background: linear-gradient(135deg, #ffe98a, var(--y));
border: 2.5px solid #c9920a;
border-radius: 999px;
padding: 4px 12px;
box-shadow: 2px 2px 0 rgba(201, 146, 10, 0.35);
white-space: nowrap;
}

.podium-stack {
position: relative;
max-width: 1120px;
margin: 0 auto;
border: 3px solid #c9920a;
border-radius: 22px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(255, 225, 53, 0.55),
0 10px 36px rgba(201, 146, 10, 0.22);
}

.podium-gold {
padding: clamp(18px, 2.4vw, 28px);
background:
linear-gradient(145deg, rgba(255, 225, 53, 0.22) 0%, rgba(255, 251, 240, 0.55) 42%, rgba(255, 207, 58, 0.14) 100%);
border-bottom: 2px solid rgba(201, 146, 10, 0.35);
}

.podium-gold .pop-head {
margin-bottom: clamp(14px, 2vw, 18px);
}

.podium-gold .pop-head h3 {
color: var(--ink);
}

.podium-gold .pod-slot.first .pod-card {
border-color: #c9920a;
box-shadow: 0 0 0 2px rgba(255, 225, 53, 0.45), var(--shb);
}

/* promo flush under the podium — same outer card */
.podium-stack .hero-promo {
width: 100%;
max-width: none;
margin: 0;
border: none;
border-radius: 0;
box-shadow: none;
}

/* ---- most-played podium (#1 center, #2 left, #3 right) ---- */

.podium {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
align-items: center;
gap: clamp(12px, 1.8vw, 24px);
max-width: 1080px;
margin: 0 auto;
}

.pod-slot { display: flex; min-width: 0; }
.pod-slot.second,
.pod-slot.third { padding-top: clamp(10px, 2vw, 26px); } /* let #1 stand tall */

.pod-card {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
background: var(--wh);
border: var(--bw) solid var(--ink);
border-radius: 18px;
box-shadow: var(--sh);
overflow: hidden;
text-decoration: none;
color: var(--ink);
transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.pod-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shb); }

.pod-thumb {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
border-bottom: var(--bw) solid var(--ink);
background: linear-gradient(135deg, var(--bl), var(--mt));
}
.pod-thumb img,
.pod-thumb video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pod-thumb .gthumb-video-wrap {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
/* match browse-grid crop — trims left/right sides of the Run Infinite preview */
.pod-thumb .gthumb-video-crop {
position: absolute;
top: 0;
left: 50%;
width: 131.58%;
height: 100%;
transform: translateX(-50%);
}
.pod-thumb .gthumb-fallback {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 12px;
text-align: center;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(15px, 2vw, 20px);
color: #fff;
}

.pod-rank {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
color: var(--ink);
background: var(--y);
border: 2.5px solid var(--ink);
border-radius: 999px;
padding: 3px 12px;
box-shadow: 2px 2px 0 var(--ink);
}
.pod-multi {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 700;
color: #fff;
background: var(--ink);
border-radius: 999px;
padding: 3px 9px;
}

.pod-play {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
background: rgba(3, 4, 10, 0.32);
opacity: 0;
transition: opacity 0.18s ease;
}
.pod-play::before {
content: '';
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--pk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 54% center;
background-size: 24px;
border: 3px solid var(--ink);
box-shadow: var(--sh);
}
.pod-card:hover .pod-play { opacity: 1; }

.pod-info {
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
gap: 3px;
}
.pod-cat {
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--el);
}
.pod-info h4 {
margin: 0;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pod-plays {
font-family: 'Space Mono', monospace;
font-size: 11px;
font-weight: 700;
color: var(--soft);
}

/* center winner gets the spotlight */
.pod-slot.first .pod-card { border-radius: 22px; box-shadow: var(--shb); }
.pod-slot.first .pod-rank {
font-size: 16px;
padding: 4px 15px;
background: linear-gradient(135deg, #ffe98a, var(--y));
}
.pod-slot.first .pod-info { padding: 14px 18px 18px; }
.pod-slot.first .pod-info h4 { font-size: clamp(18px, 1.9vw, 24px); }
.pod-slot.first .pod-plays { font-size: 12.5px; }

@media (max-width: 760px) {
.podium {
grid-template-columns: 1fr;
max-width: 460px;
gap: 14px;
}
.pod-slot { padding-top: 0; }
.pod-slot.first { order: 1; }
.pod-slot.second { order: 2; }
.pod-slot.third { order: 3; }
}

/* ---- borderless masonry gallery (Pinterest-style tight columns) ---- */
.games-grid.browse-grid {
--browse-gap: clamp(7px, 0.8vw, 12px);
display: block;
columns: 4;
column-gap: var(--browse-gap);
max-width: none;
}

/* no-results / empty notice spans the full width */
.browse-grid > p {
column-span: all;
}

/* every tile is pure artwork — no border, no card body, edge-to-edge */
.browse-grid .gcard,
.browse-grid .gcard.featured {
display: block;
width: 100%;
margin: 0 0 var(--browse-gap);
grid-column: auto;
break-inside: avoid;
-webkit-column-break-inside: avoid;
border: 0;
border-radius: 12px;
background: #0d0d16;
box-shadow: 0 1px 3px rgba(17, 18, 26, 0.05);
overflow: hidden;
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}

.browse-grid .gcard:hover {
transform: translateY(-4px);
box-shadow: var(--soft2);
}

/* the thumbnail is the whole tile; nth-child gives the masonry its height rhythm */
.browse-grid .gcard .gthumb,
.browse-grid .gcard.featured .gthumb,
.browse-grid .gcard-v2 .gthumb {
aspect-ratio: 4 / 3;
min-height: 0;
border-bottom: none;
border-radius: inherit;
}

.browse-grid .gthumb img {
object-fit: cover;
}

.browse-grid .gcard:nth-child(7n + 1) .gthumb { aspect-ratio: 4 / 5; }
.browse-grid .gcard:nth-child(7n + 2) .gthumb { aspect-ratio: 4 / 3; }
.browse-grid .gcard:nth-child(7n + 3) .gthumb { aspect-ratio: 1 / 1; }
.browse-grid .gcard:nth-child(7n + 4) .gthumb { aspect-ratio: 3 / 4; }
.browse-grid .gcard:nth-child(7n + 5) .gthumb { aspect-ratio: 16 / 11; }
.browse-grid .gcard:nth-child(7n + 6) .gthumb { aspect-ratio: 5 / 6; }
.browse-grid .gcard:nth-child(7n + 7) .gthumb { aspect-ratio: 4 / 3; }

/* the white text/CTA panel is gone — the tile itself is the content now */
.browse-grid .gcard .gbody {
display: none;
}

/* overlaid label (category + title) — always readable over the scrim */
.browse-grid .gcard-v2 .gthumb-meta {
padding: clamp(10px, 1.3vw, 16px) clamp(11px, 1.3vw, 15px) clamp(10px, 1.1vw, 14px);
transition: opacity 0.2s ease;
}

.browse-grid .gcard-v2 .gthumb-meta .gcat {
margin-bottom: 5px;
font-size: 9px;
padding: 2px 8px;
}

.browse-grid .gcard-v2 .gthumb-meta h3 {
font-size: clamp(13px, 1.25vw, 17px);
line-height: 1.12;
}

/* play affordance reveals on hover */
.browse-grid .gplay::before {
width: 46px;
height: 46px;
background-size: 20px;
border-width: 2.5px;
}

.browse-grid .gbadge,
.browse-grid .gmulti {
font-size: 9px;
padding: 3px 8px;
top: 8px;
}

.browse-grid .gmulti {
right: 8px;
}

.browse-grid .gbadge {
left: 8px;
}

/* report tucks bottom-right so it never sits on top of the title */
.browse-grid .greport {
bottom: 8px;
left: auto;
right: 8px;
width: 26px;
height: 26px;
}

.gcard-v2 .gthumb img,
.gcard-v2 .gthumb .gthumb-video-crop {
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.gcard-v2:hover .gthumb img,
.gcard-v2:hover .gthumb .gthumb-video-crop {
transform: scale(1.06);
}

.gcard-v2 .gthumb .gthumb-video-crop {
left: 50%;
width: 131.58%;
height: 100%;
transform: translateX(-50%);
}

.gcard-v2:hover .gthumb .gthumb-video-crop {
transform: translateX(-50%) scale(1.06);
}

.gcard-v2 .gthumb-scrim {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(3, 4, 10, 0.05) 0%, rgba(3, 4, 10, 0) 38%),
linear-gradient(0deg, rgba(3, 4, 10, 0.88) 0%, rgba(3, 4, 10, 0.35) 42%, transparent 68%);
pointer-events: none;
z-index: 1;
}

.gcard-v2 .gthumb-meta {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: clamp(14px, 2vw, 20px) clamp(14px, 2vw, 18px) clamp(12px, 1.6vw, 16px);
pointer-events: none;
}

.gcard-v2 .gthumb-meta .gcat {
margin-bottom: 6px;
background: rgba(255, 255, 255, 0.92);
}

.gcard-v2 .gthumb-meta h3 {
font-size: clamp(18px, 1.8vw, 24px);
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
line-height: 1.1;
}

/* per-game accent stripe */
.browse-grid .gcard[data-id="run3"] { --card-accent: #28E08A; }
.browse-grid .gcard[data-id="slopkart"] { --card-accent: #4ECAFF; }
.browse-grid .gcard[data-id="sloppy-zombies"] { --card-accent: #3DFFB0; }
.browse-grid .gcard[data-id="dungeon-panic"] { --card-accent: #2B6BFF; }
.browse-grid .gcard[data-id="umbral-red"] { --card-accent: #FFD86B; }
.browse-grid .gcard[data-id="slopcraft"] { --card-accent: #5FA855; }

.gcard-v2 .gbody {
padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 20px) clamp(16px, 2vw, 20px);
border-top: 4px solid var(--card-accent, var(--pk));
background: linear-gradient(180deg, #fff 0%, #fffaf5 100%);
}

.gcard-v2 .gtitle-row { display: none; }

.gcard-v2 .gdesc {
font-size: clamp(12.5px, 1.1vw, 14px);
margin-top: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.gcard-v2 .gthumb-fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(22px, 3vw, 32px);
background: linear-gradient(135deg, rgba(255, 78, 184, 0.85), rgba(78, 202, 255, 0.85));
}

.gcard-v2 .gplays {
font-size: 14px;
}

.gcard-v2 .gcta-row { margin-top: 12px; }

.gcard-v2 .gcta {
margin-top: 0;
font-size: 14px;
padding: 10px 16px;
box-shadow: 3px 3px 0 var(--ink);
}

/* play overlay */

.gplay {
background: rgba(3, 4, 10, 0.42);
backdrop-filter: blur(2px);
font-family: 'Space Grotesk', sans-serif;
font-size: 0;
opacity: 0;
z-index: 4;
}

.gplay::before {
content: '';
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--pk);
border: 3px solid var(--ink);
box-shadow: var(--shb);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 54% center;
background-size: 28px;
transform: scale(0.92);
transition: transform 0.2s ease;
}

.gcard:hover .gplay::before { transform: scale(1); }

.gbadge,
.gmulti {
backdrop-filter: blur(6px);
box-shadow: 2px 2px 0 rgba(26, 26, 46, 0.25);
}

/* ---- responsive compact grid ---- */

@media (max-width: 1200px) {
.games-grid.browse-grid {
columns: 3;
}
}

@media (max-width: 760px) {
.games-grid.browse-grid {
columns: 2;
}

.browse-stage {
padding-left: 12px;
padding-right: 12px;
}
}

@media (max-width: 420px) {
.browse-grid .gcard-v2 .gthumb-meta h3 {
font-size: 12px;
}

.browse-grid .gcard {
border-radius: 10px;
}
}