/* ============ marquee strip ============ */
.mq-wrap {
background: var(--ink);
border-top: var(--bw) solid var(--ink);
border-bottom: var(--bw) solid var(--ink);
overflow: hidden;
padding: 16px 0;
}

.mq {
display: flex;
align-items: center;
gap: 30px;
width: max-content;
animation: mq 22s linear infinite;
}

.mq span {
font-family: 'Space Grotesk', sans-serif;
font-size: 18px;
color: var(--y);
white-space: nowrap;
}

.mq .diamond { color: var(--pk); font-size: 14px; }

/* ============ meme banner — frosted pill before footer ============ */
.meme-banner {
display: flex;
justify-content: center;
padding: clamp(28px, 5vw, 44px) clamp(16px, 4vw, 28px);
background: linear-gradient(180deg, transparent 0%, rgba(255, 251, 240, 0.65) 100%);
}

.meme-banner-text {
margin: 0;
max-width: min(680px, 100%);
padding: clamp(14px, 2.4vw, 18px) clamp(20px, 4vw, 28px);
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(15px, 2.2vw, 18px);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.45;
color: var(--ink);
text-align: center;
background: rgba(255, 255, 255, 0.58);
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 999px;
box-shadow:
  0 12px 36px rgba(17, 18, 26, 0.08),
  inset 0 1px 0 rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(18px) saturate(160%);
backdrop-filter: blur(18px) saturate(160%);
}

.meme-hl {
display: inline-block;
margin: 0 2px;
padding: 2px 10px;
font-weight: 700;
color: var(--ink);
background: var(--mt);
border-radius: 999px;
}

/* ============ games grid ============ */
/* background lives in browse.css (shader + watercolor) */

.fbtn {
font-weight: 800;
font-size: 14px;
background: var(--wh);
border: var(--bw) solid var(--ink);
border-radius: 100px;
padding: 9px 20px;
transition: transform .12s ease, box-shadow .12s ease;
}
.fbtn:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.fbtn.active {
background: var(--pk);
color: var(--wh);
box-shadow: 3px 3px 0 var(--ink);
}

.games-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}

.gcard {
background: var(--wh);
border: var(--bw) solid var(--ink);
border-radius: var(--r);
box-shadow: var(--sh);
overflow: hidden;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
display: flex;
flex-direction: column;
}
.gcard:hover { transform: translate(-3px, -3px); box-shadow: var(--shb); }

.gcard.featured { grid-column: span 2; }
.gcard.featured .gthumb { aspect-ratio: 16 / 7; }

.crown {
background: var(--y);
border-bottom: var(--bw) solid var(--ink);
font-family: 'Space Grotesk', sans-serif;
font-size: 15px;
text-align: center;
padding: 9px;
}

.gthumb {
position: relative;
aspect-ratio: 16 / 10;
display: flex;
align-items: center;
justify-content: center;
border-bottom: var(--bw) solid var(--ink);
}

.gemoji { font-size: 64px; }
.gcard.featured .gemoji { font-size: 88px; }

.gplay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 78, 184, .82);
color: var(--wh);
font-size: 44px;
opacity: 0;
transition: opacity .18s ease;
}
.gcard:hover .gplay { opacity: 1; }

.gbadge {
position: absolute;
top: 12px;
left: 12px;
background: var(--wh);
border: 2.5px solid var(--ink);
border-radius: 100px;
padding: 4px 12px;
font-weight: 900;
font-size: 12px;
z-index: 2;
}

.gmulti {
position: absolute;
top: 12px;
right: 12px;
background: var(--ink);
color: var(--wh);
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: 10px;
border-radius: 100px;
padding: 5px 11px;
z-index: 2;
}

.gbody { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }

.gtitle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.gtitle-row h3 { font-size: 22px; }

.gstars {
font-weight: 900;
font-size: 14px;
color: #E5A800;
white-space: nowrap;
}

.gdesc {
margin-top: 8px;
font-size: 14px;
font-weight: 600;
color: var(--soft);
line-height: 1.55;
flex: 1;
}

.gmeta {
margin-top: 14px;
display: flex;
align-items: center;
justify-content: space-between;
}

.gcreator {
font-family: 'Space Mono', monospace;
font-size: 12px;
font-weight: 700;
color: var(--soft);
}

.gplays {
font-family: 'Space Grotesk', sans-serif;
font-size: 15px;
color: var(--pk);
}

.gcta {
margin-top: 16px;
align-self: flex-start;
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
background: var(--pk);
color: var(--wh);
border: var(--bw) solid var(--ink);
border-radius: 100px;
padding: 11px 28px;
box-shadow: var(--sh);
transition: transform .12s ease, box-shadow .12s ease;
}
.gcta:hover { transform: translate(-2px, -2px); box-shadow: var(--shb); }

@media (max-width: 900px) {
.games-grid { grid-template-columns: 1fr; }
.gcard.featured { grid-column: span 1; }
}