/* ────────────────────────────────────────────────────────
thegoonergames.com — Netflix-style category rows
──────────────────────────────────────────────────────── */
/* fonts (self-hosted, latin subset) */
/* Variable font covering the full weight axis (100–900) in one file, so every
weight the CSS uses (500/600/800 included) renders from real glyphs instead
of the browser faking them — the faux-bold synthesis looked broken on
Windows (odd a / A). */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/montserrat-var.woff2') format('woff2');
}
/* Belt-and-suspenders: never synthesize a missing weight. */
body { font-synthesis-weight: none; }
/* ── design tokens ──────────────────────────────────── */
:root {
--bg: #0f0d11;
--surface: #1a1614;
--surface-alt: #231d1a;
--surface-hi: #2a221d;
--hairline: rgba(255, 240, 220, 0.06);
--hairline-strong: rgba(255, 240, 220, 0.12);
--text: #f5ede1;
--text-muted: #a89c8b;
--text-dim: #7a6f63;
--heading: #fff8ec;
--accent: #e8c074;
/* Couleur du texte POSE SUR l accent. Par defaut sombre, car l accent du
socle est clair. Un site a accent fonce la recoit en clair, calculee
automatiquement depuis sa config (voir paletteDuSite). */
--on-accent: #1a1410;
/* Bouton de telechargement : une couleur d ACTION, distincte de l identite
du site. Un accent rouge sur un bouton se lit comme un danger. */
--btn-download: var(--accent);
--on-btn-download: var(--on-accent);
--accent-hover: #f5d68a;
--danger: #d97a6c;
--fresh: #87b87a;
--font: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--container: 1320px;
--container-wide: 1600px;
--container-narrow: 720px;
--shadow-card: 0 1px 0 var(--hairline), 0 10px 24px -12px rgba(0, 0, 0, 0.6);
--shadow-card-hover: 0 1px 0 var(--hairline-strong), 0 18px 40px -12px rgba(0, 0, 0, 0.8);
}
/* (tag palette removed — chips now use a single ghost style) */
/* ── reset / base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* ── embed preroll ad ── */
.epr { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(10, 8, 12, 0.92); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.epr[hidden] { display: none; }
.epr__top { position: absolute; top: 10px; right: 12px; display: flex; align-items: center; gap: 8px; z-index: 2; }
.epr__count { padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #d8d2c8; font-size: 12.5px; font-weight: 700; }
.epr__skip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 0; color: #111; font-size: 13px; font-weight: 800; cursor: pointer; }
.epr__skip:hover { background: #e8e2d8; }
.epr__x { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.epr__x:hover { background: rgba(255, 255, 255, 0.15); }
.epr__ad { display: flex; flex-direction: column; width: min(420px, 86%); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 14px; overflow: hidden; text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease; }
.epr__ad:hover { transform: translateY(-2px); border-color: var(--accent); }
.epr__media { position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden; }
.epr__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.epr__title { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 4px 9px; border-radius: 7px; background: rgba(5, 4, 6, 0.85); color: #fff; font-size: 14px; font-weight: 800; }
.epr__title--center { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 15px; line-height: 1.3; width: max-content; max-width: 90%; }
.epr__cta { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px; padding: 11px 14px; background: var(--accent); border-radius: 9px; color: var(--on-accent); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; animation: ov-breathe 2.4s ease-in-out infinite; }
@media (max-width: 600px) {
.epr__top { top: 6px; right: 8px; }
.epr__count { font-size: 11px; padding: 5px 9px; }
}
/* ── site-wide ad banners ── */
.sitebanner { display: block; max-width: var(--container-wide); margin: 14px auto 0; padding: 0 24px; }
.sitebanner--bottom { margin: 28px auto 22px; }
.sitebanner img { display: block; width: 100%; height: auto; border-radius: 12px; transition: transform 0.4s ease; }
.sitebanner:hover img, .sitebanner:hover .sitebanner__dvideo { transform: scale(1.015); }
@keyframes ov-breathe {
0%, 100% { box-shadow: 0 8px 24px -8px rgba(249, 115, 22, 0.7); filter: brightness(1); }
50% { box-shadow: 0 10px 34px -6px rgba(249, 115, 22, 0.95); filter: brightness(1.12); }
}
.sitebanner { position: relative; }
.sitebanner--has-dvideo::before { content: ""; position: absolute; inset: 0 24px; background: radial-gradient(ellipse at center, rgba(6, 4, 8, 0.62) 0%, rgba(6, 4, 8, 0.18) 75%); border-radius: 12px; pointer-events: none; z-index: 1; }
@media (max-width: 760px) {
.sitebanner--has-dvideo::before { display: none; }
.sitebanner--has-video::before { content: ""; position: absolute; inset: 0 10px; background: linear-gradient(90deg, rgba(6, 4, 8, 0.55) 0%, rgba(6, 4, 8, 0.1) 60%); border-radius: 12px; pointer-events: none; z-index: 1; }
}
.sitebanner__ov { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 66%; z-index: 2; }
.sitebanner__ov-title { color: #fff; font-size: clamp(26px, 2.9vw, 46px); font-weight: 900; line-height: 1.08; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); }
.sitebanner__ov-hl { color: #e8c074; }
.sitebanner__ov-tag { color: #e8e2d8; font-size: clamp(13px, 1.2vw, 18px); font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85); }
.sitebanner__ov-cta { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 13px 30px; animation: ov-breathe 2.4s ease-in-out infinite; transition: transform 0.25s ease; background: linear-gradient(135deg, #fbbf24 0%, #f97316 55%, #ea580c 100%); border-radius: 999px; color: #fff; font-size: clamp(13px, 1.15vw, 16px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 8px 24px -8px rgba(249, 115, 22, 0.7); }
.sitebanner:hover .sitebanner__ov-cta { transform: scale(1.06); }
.sitebanner__ov-feats { display: flex; gap: 10px; }
.sitebanner__ov-feat { display: inline-flex; align-items: center; gap: 7px; color: #f1ece3; font-size: clamp(11px, 1vw, 14px); font-weight: 700; background: rgba(8, 6, 10, 0.55); padding: 6px 12px; border-radius: 999px; }
.sitebanner__ov-feat svg { flex-shrink: 0; }
@media (max-width: 760px) {
.sitebanner__ov { align-items: flex-start; text-align: left; gap: 2.6vw; top: 50%; left: 5%; transform: translateY(-50%); width: 52%; z-index: 2; }
.sitebanner__ov-tag { display: none; }
.sitebanner__ov-feats { flex-direction: column; gap: 1.6vw; }
.sitebanner__ov-title { color: #fff; font-size: 6vw; font-weight: 900; line-height: 1.12; text-transform: uppercase; letter-spacing: 0.01em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
.sitebanner__ov-cta { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 2.6vw 4.2vw; background: linear-gradient(135deg, #fbbf24 0%, #f97316 55%, #ea580c 100%); border-radius: 999px; color: #fff; font-size: 3.4vw; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 6px 18px -6px rgba(249, 115, 22, 0.7); }
.sitebanner__ov-feats { display: flex; flex-direction: column; gap: 1.6vw; }
.sitebanner__ov-feat { display: inline-flex; align-items: center; gap: 6px; color: #f1ece3; font-size: 3vw; font-weight: 700; background: rgba(8, 6, 10, 0.55); padding: 1.4vw 2.6vw; border-radius: 999px; }
.sitebanner__ov-feat svg { flex-shrink: 0; }
}
.sitebanner__dvideo { display: block; width: 100%; height: auto; border-radius: 12px; transition: transform 0.4s ease; }
.sitebanner--has-dvideo .sitebanner__pic { display: none; }
@media (max-width: 760px) {
.sitebanner__dvideo { display: none; }
.sitebanner--has-dvideo:not(.sitebanner--has-video) .sitebanner__pic { display: block; }
}
.sitebanner__video { display: none; }
@media (max-width: 760px) {
.sitebanner--has-video .sitebanner__pic { display: none; }
.sitebanner--has-video .sitebanner__video { display: block; width: 100%; height: auto; border-radius: 12px; }
}
@media (max-width: 760px) {
.sitebanner { padding: 0 10px; margin-top: 10px; }
.sitebanner--bottom { margin: 20px auto 16px; }
}
/* ── download interstitial popup ── */
body.dlpop-lock { overflow: hidden; }
.dlpop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 18px; }
.dlpop[hidden] { display: none; }
.dlpop__backdrop { position: absolute; inset: 0; background: rgba(8, 6, 10, 0.78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.dlpop__box { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 36px); overflow-y: auto; background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 16px; padding: 26px 22px 22px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9); }
.dlpop__x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; background: none; border: 0; color: var(--text-muted); font-size: 26px; line-height: 1; cursor: pointer; border-radius: 8px; }
.dlpop__x:hover { color: var(--heading); background: var(--hairline); }
.dlpop__title { text-align: center; font-size: 24px; font-weight: 800; color: var(--heading); margin: 0 0 8px; }
.dlpop__sub { text-align: center; color: var(--text-muted); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.dlpop__continue { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px 20px; background: #28a852; border-radius: 12px; color: #fff; font-size: 16px; font-weight: 900; text-transform: uppercase; text-decoration: none; letter-spacing: 0.01em; transition: background 0.15s ease; box-shadow: 0 10px 30px -12px rgba(40, 168, 82, 0.55); }
.dlpop__continue:hover { background: #2fb95c; }
.dlpop__or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--text-dim); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.dlpop__or::before, .dlpop__or::after { content: ''; flex: 1; height: 1px; background: var(--hairline-strong); }
.dlpop__offers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dlpop__offer { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 12px; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.dlpop__offer:hover { border-color: var(--accent); transform: translateY(-2px); }
.dlpop__media { position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 11px 11px 0 0; }
.dlpop__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dlpop__badge { position: absolute; top: -8px; right: -5px; left: auto; z-index: 3; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: #e2572b; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.05em; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.dlpop__offer-title { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); width: fit-content; padding: 4px 9px; border-radius: 7px; background: rgba(5, 4, 6, 0.85); color: #fff; font-size: 14px; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.dlpop__offer-title--center { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 16px; line-height: 1.3; }
.dlpop__offer { text-align: center; }
.dlpop__offer .dlpop__cta, .dlpop__offer .dlpop__subtag { margin-left: auto; margin-right: auto; }
.dlpop__media img { aspect-ratio: 12 / 5; object-fit: cover; width: 100%; height: auto; display: block; }
.dlpop__cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; padding: 7px 14px; background: linear-gradient(135deg, #fbbf24 0%, #f97316 55%, #ea580c 100%); border: 0; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: 0 3px 10px rgba(249, 115, 22, 0.4); transition: filter 0.15s, transform 0.15s; }
.dlpop__offer:hover .dlpop__cta { filter: brightness(1.1); transform: translateY(-1px); }
.dlpop__subtag { display: block; margin-top: 3px; color: rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: 500; }
.dlpop__offer:hover .dlpop__cta { box-shadow: 0 5px 14px rgba(249, 115, 22, 0.55); }
.dlpop__tagline { padding: 8px 12px 12px; color: var(--text-muted); font-size: 12px; line-height: 1.45; text-align: center; }
@media (max-width: 520px) {
.dlpop__offers { grid-template-columns: 1fr; }
/* Remonter une offre en haut sur mobile se DECLARE (mobileFirst dans
ads.json). Avant, une regle positionnelle remontait la 2e offre : elle
marchait pour thegoonergames et inversait l ordre des autres sites. */
.dlpop__offer--mobile-first { order: -1; }
.dlpop__title { font-size: 20px; }
}
/* ── scrollbars ── Windows renders chunky white system bars by default,
clashing with the dark theme (macOS overlays are thin and unobtrusive).
Dark-tint every scrollable region, thin bars inside panels. */
html { scrollbar-color: rgba(255, 240, 220, 0.25) var(--bg); }
.hsearch__results, .cat-tagpicker__panel, .hbrowse__grid, .notif-drop,
.cat-sidebar, .tile__tags, .cat-checks {
scrollbar-width: thin;
scrollbar-color: rgba(255, 240, 220, 0.25) transparent;
}
.hsearch__results::-webkit-scrollbar, .cat-tagpicker__panel::-webkit-scrollbar,
.hbrowse__grid::-webkit-scrollbar, .notif-drop::-webkit-scrollbar,
.cat-sidebar::-webkit-scrollbar, .cat-checks::-webkit-scrollbar { width: 8px; height: 8px; }
.hsearch__results::-webkit-scrollbar-thumb, .cat-tagpicker__panel::-webkit-scrollbar-thumb,
.hbrowse__grid::-webkit-scrollbar-thumb, .notif-drop::-webkit-scrollbar-thumb,
.cat-sidebar::-webkit-scrollbar-thumb, .cat-checks::-webkit-scrollbar-thumb { background: rgba(255, 240, 220, 0.25); border-radius: 4px; }
.hsearch__results::-webkit-scrollbar-track, .cat-tagpicker__panel::-webkit-scrollbar-track,
.hbrowse__grid::-webkit-scrollbar-track, .notif-drop::-webkit-scrollbar-track,
.cat-sidebar::-webkit-scrollbar-track, .cat-checks::-webkit-scrollbar-track { background: transparent; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; scroll-padding-top: 80px; overflow-x: clip; }
/* Hard stop on page-level horizontal scroll (a stray overflowing element on
some devices let the whole page pan sideways). Inner scrollers (nav strip,
tag panels, drawers) are unaffected. `clip` doesn't create a scroll
container, so sticky positioning keeps working. */
body { overflow-x: clip; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 15px;
font-weight: 400;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { border: none; background: none; padding: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4 { margin: 0; color: var(--heading); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
p { margin: 0 0 0.8em; }
::selection { background: var(--accent); color: var(--on-accent); }
/* ── layout ─────────────────────────────────────────── */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
.container--narrow { max-width: var(--container-narrow); }
/* Wider shell for the catalogue so the grid uses more of the screen — same
column count, bigger cards. */
.container--catalogue { max-width: var(--container-wide); }
/* Game page: everything (title, tags, info, downloads, description) lines up
at the player's width — a wide, consistent column like porngameshub. */
.container--game { max-width: min(1120px, 94vw); }
.is-hidden { display: none !important; }
.muted { color: var(--text-muted); }
/* ── topbar (minimal — just logo) ──────────────────── */
/* porngameshub-style: the header scrolls away on desktop and only sticks on
phones (portrait), where the compact two-row bar earns its place. */
.topbar {
/* relative (not static): scrolls away like a normal element but keeps its
z-index, so the Tags mega-panel stays ABOVE the game tiles. */
position: relative;
z-index: 50;
background: rgba(15, 13, 17, 0.78);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border-bottom: 1px solid var(--hairline);
}
@media (max-width: 760px) {
.topbar { position: sticky; top: 0; }
}
.topbar__inner {
max-width: var(--container-wide);
margin: 0 auto;
padding: 8px 24px;
display: flex;
align-items: center;
gap: 16px;
}
.logo { flex-shrink: 0; }
/* header instant search */
.hsearch { position: relative; flex: 1 1 auto; max-width: 640px; margin: 0 auto; min-width: 0; }
.hsearch__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-muted); pointer-events: none; }
.hsearch__input {
width: 100%; height: 40px; padding: 0 34px 0 38px;
background: var(--surface-hi); border: 1px solid var(--hairline-strong); border-radius: 10px;
color: var(--text); font-size: 14px; font-weight: 600; outline: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.hsearch__input::placeholder { color: var(--text-muted); font-weight: 500; }
.hsearch__input:focus { border-color: var(--accent); }
.hsearch__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; background: none; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 6px; }
.hsearch__clear:hover { color: var(--heading); background: var(--hairline); }
.hsearch__results {
position: absolute; top: calc(100% + 8px); left: 0; right: 0;
max-height: min(70vh, 520px); overflow-y: auto;
background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 12px;
box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.85); padding: 6px; z-index: 60;
}
.hsearch__item { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 9px; text-decoration: none; color: var(--text); }
.hsearch__item:hover, .hsearch__item.is-active { background: var(--hairline); }
.hsearch__thumb { width: 52px; height: 34px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--hairline); }
.hsearch__thumb--none { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-weight: 800; font-size: 15px; }
.hsearch__metacol { display: flex; flex-direction: column; min-width: 0; }
.hsearch__title { font-size: 13.5px; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsearch__dev { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsearch__empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
/* header row 2: nav strip (Top Rated / Popular / Tags) */
.topbar__nav { border-top: 1px solid var(--hairline); position: relative; }
.topbar__nav-inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hicons { display: none; align-items: center; gap: 2px; }
.hicon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: 0; border-radius: 9px; color: var(--text); cursor: pointer; }
.hicon:hover, .hicon[aria-expanded="true"] { background: var(--hairline); color: var(--heading); }
.tnav__link { display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 14px; background: none; border: 0; color: var(--text-muted); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; }
.tnav__link:hover { color: var(--heading); }
.tnav__link .tnav__ico { color: var(--accent); flex-shrink: 0; }
.tnav__tags { margin-left: auto; }
.hbrowse { position: static; }
.hbrowse__btn { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 14px; background: none; border: 1px solid transparent; border-radius: 9px; color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.hbrowse__btn:hover, .hbrowse__btn[aria-expanded="true"] { background: var(--hairline); color: var(--heading); }
.tnav__tags[aria-expanded="true"] { color: var(--heading); }
.hbrowse__panel {
position: absolute; top: calc(100% + 6px);
/* Anchored under the Tags button (right edge of the nav container) on
desktop; centered only on phones, where the header ☰ opens it. */
left: auto; transform: none;
right: max(24px, calc((100% - var(--container-wide)) / 2 + 24px));
width: min(94vw, 680px);
background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 12px;
box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.85); padding: 10px; z-index: 60;
}
.hbrowse__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-height: min(62vh, 540px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 760px) {
.hbrowse__grid { grid-template-columns: 1fr 1fr; }
.hbrowse__panel { right: auto; left: 50%; transform: translateX(-50%); }
}
.hbrowse__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 13.5px; font-weight: 600; }
.hbrowse__item:hover { background: var(--hairline); color: var(--heading); }
.hbrowse__count { font-size: 11px; color: var(--text-dim); font-weight: 600; }
.hbrowse__all { display: block; margin-top: 6px; padding: 9px 10px; text-align: center; border-top: 1px solid var(--hairline); color: var(--accent); font-size: 13px; font-weight: 700; text-decoration: none; }
.hbrowse__all:hover { color: var(--accent-hover); }
@media (max-width: 760px) {
/* Compact bar (porngameshub-style): the sticky header must cost as few
pixels as possible on phones. */
.topbar__inner { flex-wrap: wrap; row-gap: 8px; gap: 8px; padding: 8px 12px; }
.logo__img { height: 27px; max-width: calc(100vw - 200px); }
.hicon { width: 30px; height: 30px; }
.topbar .topbar__signin { padding: 6px 13px; font-size: 13px; }
/* Search collapses to the header loupe icon; the row appears when toggled. */
.hsearch { display: none; }
.topbar--search-open .hsearch { display: block; order: 3; flex: 1 1 100%; max-width: none; margin: 0; }
.hicons { display: flex; margin-left: auto; }
.topbar .topbar__account { margin-left: 0; gap: 4px; }
/* Avatar-only account chip (porngameshub-style profile icon): the username
would wrap the header onto a second line on small screens. */
.topbar__uname { display: none; }
/* Tags moves to the header 3-bars icon; hide its nav-row button. contents
removes .hbrowse from the flex row (no phantom 6th slot skewing the
spacing) while its absolute panel stays usable. */
.hbrowse { display: contents; }
.hbrowse .tnav__tags { display: none; }
.topbar__nav-inner { padding: 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.topbar__nav-inner::-webkit-scrollbar { display: none; }
/* App-tab-bar style: gold icon stacked above a small label. Narrower per
link than the inline layout, so all five fit un-swiped with icons. */
/* Five equal columns, each icon+label centered in its cell, so the rhythm
is perfectly regular regardless of label width. */
.tnav__link { white-space: nowrap; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; justify-content: center; height: 44px; padding: 4px 0 3px; font-size: 9.5px; gap: 2px; border-bottom-width: 2px; }
.tnav__link .tnav__ico { display: block; width: 15px; height: 15px; }
.tnav__lbl-x { display: none; }
}
/* listing pages: /top-rated/, /popular/ */
.list-main { padding: 28px 0 64px; }
.list__head { margin-bottom: 22px; }
.list__title { font-size: 28px; font-weight: 800; color: var(--heading); letter-spacing: -0.01em; }
.list__sub { margin-top: 8px; color: var(--text-muted); font-size: 15px; max-width: 640px; }
.list-grid:not(.list-grid--ready) .tile:nth-child(n+49) { display: none; }
.list__empty { text-align: center; color: var(--text-muted); padding: 44px 0; }
/* F95-style sorting: a joined row of icon buttons; the section label shows
the active sort's name at the right. */
/* NOTE: no content-visibility on tiles — its paint containment clips the
absolutely-positioned .tile__tags hover panel that hangs below the card.
The chunked display (48/102 shown + Show more) carries the perf instead. */
.cat-flat-more { display: block; margin: 26px auto 0; }
.cat-sort__head { display: flex; align-items: baseline; justify-content: space-between; }
.cat-sort__current { color: var(--heading); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.cat-sort { display: inline-flex; border: 1px solid var(--hairline-strong); border-radius: 10px; overflow: hidden; }
.cat-sort__opt { display: flex; align-items: center; justify-content: center; width: 52px; height: 40px; background: none; border: 0; border-right: 1px solid var(--hairline-strong); color: var(--accent); cursor: pointer; transition: background 0.15s ease; }
.cat-sort__opt:last-child { border-right: 0; }
.cat-sort__opt:hover { background: var(--hairline); }
.cat-sort__opt.is-active { background: var(--accent); color: var(--on-accent); }
.list__toggle { display: inline-flex; gap: 3px; margin-top: 14px; padding: 3px; background: var(--surface-hi); border: 1px solid var(--hairline-strong); border-radius: 10px; }
.list__toggle-btn { padding: 8px 16px; background: none; border: 0; border-radius: 8px; color: var(--text-muted); font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.list__toggle-btn:hover { color: var(--heading); }
.list__toggle-btn.is-active { background: var(--accent); color: var(--on-accent); }
.list__more-wrap { display: flex; justify-content: center; margin-top: 30px; }
.list__more { padding: 16px 56px; background: var(--accent); border: 1px solid var(--accent); border-radius: 12px; color: var(--on-accent); font-size: 16px; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; transition: background 0.15s ease; box-shadow: 0 8px 24px -10px rgba(232, 192, 116, 0.45); }
.list__more:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.list__more[hidden] { display: none; }
.logo {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--heading);
font-weight: 700;
font-size: 17px;
letter-spacing: -0.005em;
text-transform: uppercase;
}
.logo:hover { color: var(--heading); }
.logo__mark { color: var(--accent); font-size: 13px; }
.logo__word { white-space: nowrap; }
.logo__pop { display: none; }
/* Image logo (when the user drops logo.png/svg/... in import/). */
.logo--img { padding: 0; }
.logo__img { display: block; height: 56px; width: auto; max-width: 420px; object-fit: contain; }
@media (max-width: 600px) {
.logo__img { height: 27px; max-width: calc(100vw - 200px); }
}
/* ── hero cinema (home) ─────────────────────────────── */
.hero-cinema {
position: relative;
min-height: 520px;
display: flex;
align-items: flex-end;
overflow: hidden;
margin-bottom: 12px;
}
@media (max-width: 600px) {
.hero-cinema { min-height: 420px; }
}
/* mediaTag() wraps the bg ![]()
in a for AVIF/WebP/srcset. We need
the wrapper itself to fill the section (not just the img inside) so the
absolute positioning + object-fit cover actually take effect. */
.hero-cinema > picture {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.hero-cinema__bg {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.55) saturate(0.9);
}
/* Same wrapper-needs-dimensions story for the game-page banner + tile media. */
.game__banner > picture,
.tile__media > picture {
display: block;
width: 100%;
height: 100%;
}
.hero-cinema__overlay {
position: relative;
z-index: 1;
width: 100%;
padding: 100px 0 48px;
background:
linear-gradient(180deg, rgba(15,13,17,0) 0%, rgba(15,13,17,0) 30%, rgba(15,13,17,0.85) 80%, var(--bg) 100%),
linear-gradient(90deg, rgba(15,13,17,0.7) 0%, rgba(15,13,17,0.2) 60%, transparent 100%);
}
.hero-cinema__kicker {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
margin: 0 0 14px;
}
.hero-cinema__title {
font-size: clamp(36px, 6vw, 64px);
font-weight: 700;
margin: 0 0 14px;
line-height: 1.05;
letter-spacing: -0.022em;
max-width: 22ch;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.hero-cinema__meta {
font-size: 14px;
color: var(--text);
margin: 0 0 16px;
font-weight: 400;
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.hero-cinema__meta-sep { color: var(--text-dim); }
.hero-cinema__chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 28px;
max-width: 600px;
}
.hero-cinema__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hero-cinema__cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--accent);
color: var(--on-accent);
padding: 14px 28px;
border-radius: var(--r-sm);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.005em;
transition: background 0.15s ease, transform 0.15s ease;
}
.hero-cinema__cta:hover { background: var(--accent-hover); color: #1a1410; transform: translateY(-1px); }
.hero-cinema__cta-icon { font-size: 13px; transform: translateY(1px); }
.hero-cinema__alt {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 248, 236, 0.1);
color: var(--heading);
padding: 8px 24px;
border-radius: var(--r-sm);
font-weight: 700;
font-size: 15px;
border: 1px solid var(--hairline-strong);
transition: background 0.15s ease;
}
.hero-cinema__alt:hover { background: rgba(255, 248, 236, 0.18); color: var(--heading); }
/* ── rows ───────────────────────────────────────────── */
.rows { padding: 32px 0 80px; }
.row { margin: 0 0 44px; }
.row__head {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.row__title {
font-size: clamp(18px, 2vw, 22px);
font-weight: 700;
margin: 0;
letter-spacing: -0.01em;
display: inline-flex;
align-items: baseline;
gap: 10px;
}
.row__title-mark { color: var(--accent); font-size: 12px; transform: translateY(-2px); }
.row__see {
font-size: 13px;
color: var(--text-muted);
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
}
.row__see::after { content: ' →'; }
.row__see:hover { color: var(--accent); }
.row__scroll {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x proximity;
scroll-padding: 0 24px;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 4px 24px 16px;
-webkit-overflow-scrolling: touch;
}
.row__scroll::-webkit-scrollbar { display: none; }
/* row card — compact, image + 2 lines of text */
.tile {
position: relative;
flex: 0 0 auto;
width: 240px;
display: flex;
flex-direction: column;
color: var(--text);
text-decoration: none;
scroll-snap-align: start;
border: 2px solid transparent; /* reserved so hover accent adds no layout shift */
border-radius: var(--r-md);
transition: transform 0.2s ease;
}
.tile:hover { color: var(--text); transform: translateY(-3px); }
/* Hover/open = F95-style highlighted card: accent ring around cover+body that
merges seamlessly into the tag panel dropping below (border-bottom removed). */
.tile:hover,
.tile--tags-open {
z-index: 20;
background: var(--surface);
border-color: var(--accent);
border-bottom-color: transparent;
border-radius: var(--r-md) var(--r-md) 0 0;
}
.tile__media {
position: relative;
aspect-ratio: 16 / 10;
background: var(--surface-alt);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: box-shadow 0.2s ease;
}
.tile:hover .tile__media { box-shadow: var(--shadow-card-hover); }
.tile__img {
width: 100%;
height: 100%;
/* Fill the frame (no letterbox bars). Very wide banners are swapped for the
first screenshot at build time so cover-cropping stays gentle. */
object-fit: cover;
object-position: center;
transition: transform 0.5s ease;
}
.tile__img.tile__img--zoom { object-fit: cover; object-position: center; }
.tile:hover .tile__img { transform: scale(1.04); }
.tile__img--placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--surface-alt) 0%, var(--surface-hi) 100%);
color: var(--text-dim);
font-size: 48px;
font-weight: 700;
}
.tile__fresh {
position: absolute;
top: 8px;
right: 8px;
background: var(--fresh);
color: #142010;
padding: 3px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
}
/* F95-style tag panel: drops BELOW the card on hover/open, showing every tag as
accent pills. It overlaps the tiles beneath (absolute, high z-index) and its
accent border continues seamlessly from the card's ring above. */
.tile__tags {
position: absolute;
top: 100%;
/* absolute insets resolve against the padding box (inside the tile's 2px
border), so pull out 2px each side to line up with the card's accent ring */
left: -2px;
right: -2px;
z-index: 21;
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 10px;
/* Inner scroll only kicks in for the rare tag-heavy games; NO
overscroll-behavior so the trackpad chains to the page at the limits
instead of trapping the gesture. */
max-height: min(440px, 72vh);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--surface);
border: 2px solid var(--accent);
border-top: none;
border-radius: 0 0 var(--r-md) var(--r-md);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.16s ease, transform 0.16s ease;
pointer-events: none;
}
.tile:hover .tile__tags,
.tile--tags-open .tile__tags {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.tile__tags::-webkit-scrollbar { width: 6px; }
.tile__tags::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 3px; }
/* our users' average rating badge on a card */
.tile__rating {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: auto;
flex-shrink: 0;
font-size: 12.5px;
font-weight: 700;
color: var(--heading);
font-variant-numeric: tabular-nums;
}
.tile__rating[hidden] { display: none; }
.tile__rating-star { color: var(--accent); font-size: 13px; line-height: 1; }
.tile__rating-cnt { color: var(--text-muted); font-weight: 500; font-size: 11.5px; }
/* right-side cluster on a card: like count + rating badge */
.tile__botend { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.tile__botend .tile__rating { margin-left: 0; }
.tile__like {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12.5px;
font-weight: 700;
color: var(--heading);
font-variant-numeric: tabular-nums;
}
.tile__like[hidden] { display: none; }
.tile__like-heart { color: #ff5c7a; font-size: 12.5px; line-height: 1; }
.tile__tag {
font-size: 9.5px;
font-weight: 700;
line-height: 1.3;
color: var(--on-accent);
background: var(--accent);
padding: 2px 7px;
border-radius: 999px;
white-space: nowrap;
}
/* Tap-to-reveal tag button — touch only (hidden on hover-capable devices) */
.tile__tags-toggle {
display: none;
}
@media (hover: none) {
/* No hover: tags stay hidden (and non-blocking) until the tag button is tapped.
Sticky-hover on tap must not leave an invisible overlay eating taps. The
:not(.tile--tags-open) is critical — a tap makes the tile BOTH sticky-hover
AND open, and this higher-specificity rule would otherwise re-hide the panel. */
.tile:hover:not(.tile--tags-open) .tile__tags { opacity: 0; transform: translateY(8px); pointer-events: none; }
.tile--tags-open .tile__tags {
opacity: 1;
transform: translateY(0);
}
.tile__tags-toggle {
position: absolute;
right: 6px;
bottom: 6px;
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: #fff;
background: rgba(10, 8, 12, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
pointer-events: auto;
touch-action: manipulation;
}
/* Invisible extended hit area (~62px) so a slightly-off tap still hits the
button instead of the underlying game link. Visible circle stays 40px. */
.tile__tags-toggle::before { content: ''; position: absolute; inset: -11px; border-radius: 50%; }
.tile__tags-toggle svg { width: 17px; height: 17px; position: relative; }
.tile--tags-open .tile__tags-toggle {
background: var(--color-primary, #ff0060);
}
}
.tile__body {
padding: 10px 4px 2px;
}
.tile__title {
font-size: 14px;
font-weight: 700;
color: var(--heading);
line-height: 1.25;
margin: 0 0 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tile__dev {
font-size: 12px;
color: var(--text-muted);
font-weight: 400;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Corner overlays: flush into the cover's corners like little signboards
(status top-left, size top-right) rather than floating glassy pills. */
.tile__overlay {
position: absolute;
top: 0;
z-index: 2;
display: flex;
gap: 5px;
pointer-events: none;
}
.tile__overlay--tl { left: 0; }
.tile__overlay--tr { right: 0; }
/* Signboard look: solid gradient plaque, crafted edge (inset highlight + drop
shadow), only the inner corner rounded so it reads as attached to the corner. */
.tile__status,
.tile__dlsize {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1.5;
padding: 4px 9px;
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* Size: neutral dark plaque; only the play icon is coloured (erogames-style) */
.tile__dlsize {
border-radius: 0 0 0 9px;
background: rgba(9, 8, 10, 0.9);
}
.tile__dlsize-icon { width: 14px; height: 14px; flex: none; }
/* Status: solid coloured badge, F95-style */
.tile__status {
border-radius: 0 0 9px 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tile__status--done { background: #3f9d52; }
.tile__status--hold { background: #e08a2b; }
.tile__status--dead { background: #cf4b4b; }
.tile__status--early { background: #7c6bd6; }
/* Screenshot counter (1/7) shown bottom-left of the cover, updated on hover-cycle */
.tile__counter {
position: absolute;
left: 8px;
bottom: 8px;
z-index: 2;
font-size: 10.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
color: #fff;
background: rgba(10, 8, 12, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 2px 7px;
border-radius: 6px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
}
.tile:hover .tile__counter,
.tile--tags-open .tile__counter { opacity: 1; }
.tile__dlsize--sm .tile__dlsize-icon { color: #4ade80; }
.tile__dlsize--md .tile__dlsize-icon { color: #fbbf24; }
.tile__dlsize--lg .tile__dlsize-icon { color: #f87171; }
/* Body meta row: just the version now (status/size moved onto the image) */
/* bottom info row: engine/version on the left, our rating filling the empty
space on the right (so the rating adds no extra line) */
.tile__botrow {
display: flex;
align-items: center;
gap: 8px;
margin: 7px 0 0;
}
.tile__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
}
.tile__engine {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text-muted);
padding: 2px 7px;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--surface-hi);
}
.tile__ver {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
}
/* Tile platform row — itch-style at-a-glance OS / browser indicators */
.tile__platforms {
margin-top: 8px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tile__oses {
display: inline-flex;
align-items: center;
gap: 6px;
}
.tile__os {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
line-height: 1;
}
.tile__os svg, .tile__os img {
width: 14px;
height: 14px;
display: block;
}
/* All 4 OS icons ship as ![]()
referencing Phosphor SVG files. The SVGs
declare fill="currentColor" but ![]()
doesn't see CSS color, so we use
filter chains to recolor: invert(1) for light-on-dark contexts (tile,
play button), no-invert for dark-on-light (download button on gold). */
.tile__os img { filter: brightness(0) invert(1) opacity(0.7); }
.cta-btn--dl .cta-btn__os img { filter: brightness(0) opacity(0.85); }
.cta-btn--play .cta-btn__os img { filter: brightness(0) invert(1) opacity(0.85); }
.tile__play {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px 2px 6px;
background: rgba(255, 248, 236, 0.08);
color: var(--heading);
border: 1px solid var(--hairline-strong);
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: -0.005em;
line-height: 1.4;
}
.tile__play svg { width: 9px; height: 9px; }
@media (min-width: 600px) { .tile { width: 260px; } }
@media (max-width: 480px) { .tile { width: 200px; } }
/* ── chips (tags) — ghost style, compact ───────────── */
.chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.5;
background: transparent;
color: var(--text-muted);
border: 1px solid var(--hairline-strong);
cursor: pointer;
text-decoration: none;
transition: color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
text-transform: lowercase;
}
.chip:hover {
color: var(--accent);
border-color: var(--accent);
}
/* Subtle visibility modifier: gay tag gets accent text + heavier weight so
visitors scanning a long tag-chip row spot it instantly, without the chip
screaming for attention. */
.chip--gay {
color: var(--accent);
font-weight: 700;
}
.chip--gay:hover {
color: var(--accent-hover);
border-color: var(--accent);
}
.chip__count {
font-size: 10.5px;
color: var(--text-dim);
font-weight: 400;
}
/* ── section heading (legacy: used by SEO + FAQ sections) ── */
.section__heading {
font-size: clamp(22px, 2.6vw, 28px);
font-weight: 700;
margin: 0 0 24px;
letter-spacing: -0.015em;
}
/* ── tag page header ───────────────────────────────── */
.hero {
padding: 28px 0 18px;
border-bottom: 1px solid var(--hairline);
text-align: center;
}
.hero__kicker {
margin: 0 auto 8px;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
max-width: 760px;
}
.hero__title {
margin: 0 auto 8px;
font-size: clamp(26px, 4vw, 40px);
font-weight: 700;
letter-spacing: -0.022em;
max-width: 22ch;
}
.hero__subtitle {
margin: 0 auto;
max-width: 70ch;
color: var(--text-muted);
font-size: 14px;
line-height: 1.5;
}
.hero__subtitle strong { color: var(--text); font-weight: 600; }
/* ── catalogue grid (tag pages) ────────────────────── */
.catalogue { padding: 18px 0 80px; }
.catalogue__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.catalogue__head .section__heading { margin: 0; }
.catalogue__count {
margin: 0;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
/* Filter bar shown when ?tag= is active. Sits between the heading and the
grid; pill-shaped active-tag indicator + clear button. */
.catalogue__filter-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 20px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-sm);
}
.catalogue__filter-bar[hidden] { display: none; }
.catalogue__filter-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.catalogue__filter-tag {
padding: 3px 10px;
background: var(--accent);
color: var(--on-accent);
border-radius: 999px;
font-size: 13px;
font-weight: 700;
text-transform: capitalize;
}
.catalogue__filter-clear {
margin-left: auto;
padding: 6px 12px;
background: transparent;
border: 1px solid var(--hairline);
color: var(--text);
border-radius: var(--r-sm);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.catalogue__filter-clear:hover { background: var(--hairline); }
.catalogue__empty {
margin: 0 0 20px;
padding: 24px;
text-align: center;
color: var(--text-muted);
background: var(--surface);
border: 1px dashed var(--hairline);
border-radius: var(--r-sm);
}
.catalogue__empty[hidden] { display: none; }
/* ── catalogue layout with sidebar ──────────────────────────── */
/* Desktop: main grid on the LEFT, filter sidebar on the RIGHT. The aside is
first in the source for accessibility / mobile drawer behaviour, so we
place it explicitly via grid-column on desktop. */
.catalogue__layout {
display: grid;
grid-template-columns: 1fr 260px;
gap: 24px;
align-items: start;
align-content: start;
}
.catalogue__main { min-width: 0; grid-column: 1; grid-row: 1; align-self: start; }
.cat-sidebar { grid-column: 2; grid-row: 1; align-self: start; }
@media (max-width: 1000px), (hover: none) and (pointer: coarse) and (max-width: 1500px) {
.catalogue__layout { grid-template-columns: 1fr; gap: 0; }
.catalogue__main { grid-column: auto; }
.cat-sidebar { grid-column: auto; }
}
.cat-sidebar {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-md);
padding: 16px;
}
.cat-sidebar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cat-sidebar__title { font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.cat-sidebar__close { display: none; background: transparent; border: 0; color: var(--text); font-size: 28px; cursor: pointer; padding: 0 6px; }
.cat-sidebar__section { margin-bottom: 18px; }
/* Quick on/off switch to hide AI-generated games */
.cat-ai-toggle + .cat-ai-toggle { margin-top: 10px; }
.cat-ai-toggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 11px;
background: var(--surface-alt);
border: 1px solid var(--hairline-strong);
border-radius: 8px;
color: var(--text);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s ease;
}
.cat-ai-toggle:hover { border-color: var(--accent); }
.cat-ai-toggle.is-on { border-color: var(--accent); }
.cat-ai-toggle__label { flex: 1; text-align: left; }
.cat-ai-toggle__switch {
position: relative;
flex: none;
width: 34px;
height: 20px;
border-radius: 999px;
background: var(--hairline-strong);
transition: background 0.18s ease;
}
.cat-ai-toggle.is-on .cat-ai-toggle__switch { background: var(--accent); }
.cat-ai-toggle__knob {
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
transition: transform 0.18s ease;
}
.cat-ai-toggle.is-on .cat-ai-toggle__knob { transform: translateX(14px); }
/* ── Reviews ─────────────────────────────────────────── */
.reviews { margin: 44px 0 8px; }
.reviews__title { font-size: 22px; font-weight: 800; margin: 0 0 16px; }
.reviews__loading, .reviews__empty { color: var(--text-muted); margin: 0; }
.reviews__summary { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.reviews__avg-num { font-size: 34px; font-weight: 800; line-height: 1; color: var(--heading); }
.reviews__count { color: var(--text-muted); font-size: 14px; }
.rev-stars { display: inline-flex; gap: 2px; color: #46403a; font-size: 16px; line-height: 1; }
.rev-star.is-on { color: var(--accent); }
.rev-stars--pick { font-size: 30px; gap: 5px; }
.rev-stars--pick .rev-star { cursor: pointer; transition: transform 0.1s ease; }
.rev-stars--pick .rev-star:hover { transform: scale(1.15); }
.reviews__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); padding: 16px 18px; }
.reviews__cta span { color: var(--text-muted); }
.reviews__login { display: inline-flex; align-items: center; gap: 8px; background: #5865f2; color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer; transition: background 0.15s ease; }
.reviews__login:hover { background: #4752c4; }
.reviews__form { background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); padding: 16px 18px; }
.reviews__form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.reviews__form-title { font-weight: 700; }
.reviews__pick { margin-bottom: 12px; }
.reviews__textarea { width: 100%; min-height: 78px; resize: vertical; background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 8px; color: var(--text); padding: 10px 12px; font: inherit; font-size: 14px; }
.reviews__textarea:focus { outline: none; border-color: var(--accent); }
.reviews__form-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.reviews__error { color: #f87171; font-size: 13px; flex: 1; }
.reviews__submit { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 8px; padding: 9px 18px; font-weight: 800; cursor: pointer; transition: background 0.15s ease; }
.reviews__submit:hover { background: var(--accent-hover); }
.reviews__submit:disabled { opacity: 0.6; cursor: default; }
.rev-link { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0; }
.rev-link:hover { color: var(--text); }
.rev-link--danger { color: #e07575; }
.reviews__list { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.rev-item { display: flex; gap: 12px; }
.rev-item__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; background: var(--surface-alt); }
.rev-item__avatar--none { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-muted); }
.rev-item__main { flex: 1; min-width: 0; }
.rev-item__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rev-item__name { font-weight: 700; }
.rev-item__date { color: var(--text-dim); font-size: 12px; }
.rev-item__body { margin: 6px 0 0; color: var(--text); font-size: 14px; line-height: 1.55; word-break: break-word; }
/* ── Auth page (/login/) ─────────────────────────────── */
.auth-main { padding: 40px 0 80px; }
.auth { max-width: 400px; margin: 0 auto; }
.auth__back { display: inline-block; color: var(--text-muted); text-decoration: none; font-size: 13px; margin-bottom: 18px; }
.auth__back:hover { color: var(--text); }
.auth__title { font-size: 26px; font-weight: 800; margin: 0 0 6px; }
.auth__sub { color: var(--text-muted); font-size: 14px; margin: 0 0 22px; }
.auth__providers { display: flex; flex-direction: column; gap: 10px; }
.auth__provider { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 14px; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 10px; color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.auth__provider:hover { border-color: var(--accent); background: var(--surface-alt); }
.auth__provider svg { flex: none; }
.auth__divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline-strong); }
.auth__form { display: flex; flex-direction: column; gap: 10px; }
.auth__input { width: 100%; padding: 11px 13px; background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 10px; color: var(--text); font: inherit; font-size: 14px; }
.auth__input:focus { outline: none; border-color: var(--accent); }
.auth__captcha { display: flex; justify-content: center; }
.auth__captcha:empty { display: none; }
.auth__error { color: #f87171; font-size: 13px; min-height: 16px; }
.auth__notice { color: var(--text); font-size: 14px; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 10px; padding: 14px; margin: 0; }
.auth__submit { width: 100%; padding: 12px; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 10px; font-weight: 800; font-size: 15px; cursor: pointer; transition: background 0.15s ease; }
.auth__submit:hover { background: var(--accent-hover); }
.auth__submit:disabled { opacity: 0.6; cursor: default; }
.auth__toggle { text-align: center; color: var(--text-muted); font-size: 13px; margin: 18px 0 0; }
.auth__toggle-btn { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
.auth__toggle-btn:hover { text-decoration: underline; }
/* ── Community: star rating + comments ───────────────── */
.community { margin: 44px 0 8px; }
.rating { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 30px; }
.rating__loading { color: var(--text-muted); margin: 0; }
.rating__score { display: flex; align-items: baseline; gap: 4px; }
.rating__num { font-size: 40px; font-weight: 800; line-height: 1; color: var(--heading); }
.rating__outof { color: var(--text-dim); font-size: 14px; font-weight: 600; }
.rating__meta { display: flex; flex-direction: column; gap: 4px; }
.rating__count { color: var(--text-muted); font-size: 13px; }
.rating__yours { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.rating__yours-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.rating__signin { margin-left: auto; color: var(--accent); text-decoration: none; font-weight: 700; font-size: 14px; }
.rating__signin:hover { text-decoration: underline; }
.c-stars { display: inline-flex; gap: 2px; color: #46403a; font-size: 18px; line-height: 1; }
.c-star.is-on { color: var(--accent); }
.c-stars--pick { font-size: 26px; gap: 4px; }
.c-stars--pick .c-star { cursor: pointer; transition: transform 0.1s ease; }
.c-stars--pick .c-star:hover { transform: scale(1.12); }
/* description + rating panel side by side (stacks below on mobile) */
.game__body { display: flex; gap: 28px; align-items: flex-start; margin: 0 0 8px; }
.game__body .game__desc { flex: 1 1 auto; min-width: 0; margin: 0; }
.rpanel {
flex: 0 0 316px;
width: 316px;
background: var(--surface);
border: 1px solid var(--hairline-strong);
border-radius: 14px;
padding: 18px;
}
.rpanel__loading { color: var(--text-muted); font-size: 13px; margin: 0; }
.rpanel__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.rpanel__title { font-size: 17px; font-weight: 800; color: var(--heading); }
.rpanel__nums { display: flex; gap: 14px; font-size: 12.5px; color: var(--text-muted); }
.rpanel__nums b { color: var(--heading); font-weight: 700; }
.rpanel__bars { display: flex; flex-direction: column; gap: 8px; }
.rpanel__row { display: flex; align-items: center; gap: 10px; }
/* bigger, denser row stars with visible empty stars (like the reference) */
.rpanel .c-stars { color: #5e564d; }
.rpanel__row .c-stars { flex-shrink: 0; font-size: 15px; letter-spacing: 2px; white-space: nowrap; }
.rpanel__track { flex: 1; height: 8px; background: var(--surface-hi); border-radius: 6px; overflow: hidden; }
.rpanel__track i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.rpanel__num { flex-shrink: 0; min-width: 30px; text-align: right; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rpanel__rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--hairline); }
.rpanel__rate-label { font-size: 13px; font-weight: 600; color: var(--heading); }
@media (max-width: 860px) {
.game__body { flex-direction: column; gap: 22px; }
.rpanel { width: 100%; flex-basis: auto; }
}
.comments__title { font-size: 22px; font-weight: 800; margin: 0 0 16px; }
.comments__loading, .comments__empty { color: var(--text-muted); margin: 14px 0 0; }
.cm-signin { display: inline-block; color: var(--accent); text-decoration: none; font-weight: 700; font-size: 14px; }
.cm-signin:hover { text-decoration: underline; }
.cm-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.cm-form__name { width: 100%; max-width: 260px; padding: 9px 12px; background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 9px; color: var(--text); font: inherit; font-size: 14px; }
.cm-form__name:focus { outline: none; border-color: var(--accent); }
.cm-form__text { width: 100%; min-height: 80px; resize: vertical; background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 10px; color: var(--text); padding: 11px 13px; font: inherit; font-size: 14px; }
.cm-form__text:focus { outline: none; border-color: var(--accent); }
.cm-form__captcha:empty { display: none; }
.cm-form__actions { display: flex; align-items: center; gap: 12px; }
.cm-form__error { color: #f87171; font-size: 13px; flex: 1; }
.cm-form__submit { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 9px; padding: 9px 18px; font-weight: 800; cursor: pointer; transition: background 0.15s ease; }
.cm-form__submit:hover { background: var(--accent-hover); }
.cm-form__submit:disabled { opacity: 0.6; cursor: default; }
.cm-list { display: flex; flex-direction: column; gap: 20px; }
.cm-more {
margin-top: 20px;
padding: 10px 18px;
border-radius: 10px;
background: var(--surface-alt);
border: 1px solid var(--hairline-strong);
color: var(--heading);
font: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.cm-more:hover { border-color: var(--accent); background: var(--surface-hi); }
.cm-item { display: flex; gap: 12px; }
.cm-item__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; background: var(--surface-alt); }
.cm-item__avatar--none { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-muted); }
.cm-item__main { flex: 1; min-width: 0; }
.cm-item__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-item__name { font-weight: 700; }
.cm-item__date { color: var(--text-dim); font-size: 12px; }
.cm-item__del { margin-left: auto; }
.cm-item__flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }
.cm-item__body { margin: 5px 0 0; color: var(--text); font-size: 14px; line-height: 1.55; word-break: break-word; }
/* comment footer: like / dislike / report */
.cm-item__foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.cm-vote {
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: 1px solid var(--hairline-strong);
border-radius: 8px;
color: var(--text-muted);
font: inherit;
font-size: 12.5px;
font-weight: 600;
padding: 4px 9px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cm-vote svg { flex-shrink: 0; }
.cm-vote:hover { color: var(--heading); border-color: var(--hairline); }
.cm-vote.is-up { color: var(--accent); border-color: var(--accent); }
.cm-vote.is-down { color: #ff5a6a; border-color: #ff5a6a; }
.cm-reply-link {
background: none;
border: none;
color: var(--text-muted);
font: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
}
.cm-reply-link:hover { color: var(--accent); }
.cm-report-link {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: auto;
background: none;
border: none;
color: var(--text-dim);
font: inherit;
font-size: 12px;
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
}
.cm-report-link:hover { color: var(--text); }
/* threaded replies: each nested node carries its own indent (capped in JS);
a left rail shows the thread relationship. */
.cm-node--reply { border-left: 2px solid var(--hairline-strong); padding-left: 14px; }
/* highlight the comment a notification links to */
.cm-node--flash { animation: cmFlash 2.4s ease; border-radius: 10px; }
@keyframes cmFlash {
0%, 30% { background: rgba(233, 192, 116, 0.16); box-shadow: 0 0 0 6px rgba(233, 192, 116, 0.16); }
100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
.cm-replyform { margin-top: 12px; margin-bottom: 4px; display: flex; flex-direction: column; gap: 10px; }
.cm-form__cancel {
background: none;
border: 1px solid var(--hairline-strong);
border-radius: 8px;
color: var(--text-muted);
font: inherit;
font-size: 13px;
font-weight: 600;
padding: 8px 14px;
cursor: pointer;
}
.cm-form__cancel:hover { color: var(--heading); border-color: var(--hairline); }
/* ── Header account ── */
.topbar__account { margin-left: auto; position: relative; display: flex; align-items: center; gap: 6px; }
/* notification bell */
.topbar__bell-wrap { position: relative; }
.topbar__bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 0; color: var(--text-muted); cursor: pointer; border-radius: 9px; transition: color 0.15s ease, background 0.15s ease; }
.topbar__bell:hover { color: var(--heading); background: var(--hairline); }
.topbar__bell-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff3b52; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 16px; text-align: center; }
.topbar__bell-badge[hidden] { display: none; }
.notif-drop { position: absolute; right: 0; top: calc(100% + 8px); width: 320px; max-width: 88vw; max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 6px; box-shadow: 0 16px 40px -8px rgba(0,0,0,0.7); z-index: 40; }
.notif-drop[hidden] { display: none; }
.notif-drop__empty { color: var(--text-muted); font-size: 13px; margin: 0; padding: 14px; text-align: center; }
.notif-item { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; padding: 10px 11px; border-radius: 9px; }
.notif-item:hover { background: var(--surface-alt); }
.notif-item.is-unread { background: rgba(233,192,116,0.07); }
.notif-item__avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover; background: var(--surface-alt); }
.notif-item__avatar--none { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-muted); font-size: 13px; }
.notif-item__body { min-width: 0; flex: 1; }
.notif-item__text { display: block; color: var(--text); font-size: 13px; }
.notif-item__text b { color: var(--heading); }
.notif-item__snippet { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-item__date { display: block; color: var(--text-dim); font-size: 11px; margin-top: 3px; }
.topbar__signin { color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; padding: 8px 16px; border: 1px solid var(--hairline-strong); border-radius: 8px; transition: border-color 0.15s ease; }
.topbar__signin:hover { border-color: var(--accent); }
.topbar__user { display: flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; color: var(--text); font: inherit; font-weight: 700; font-size: 14px; padding: 4px; }
.topbar__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--surface-alt); }
.topbar__avatar--none { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-muted); font-size: 13px; }
.topbar__uname { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 10px; padding: 6px; min-width: 140px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); z-index: 30; }
.topbar__menu[hidden] { display: none; }
.topbar__logout { width: 100%; text-align: left; background: none; border: 0; color: var(--text); cursor: pointer; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 6px; }
.topbar__logout:hover { background: var(--surface-alt); }
/* ── Account page ── */
.acct { max-width: 440px; margin: 0 auto; }
.acct__title { font-size: 26px; font-weight: 800; margin: 0 0 20px; }
.acct__loading, .acct-signedout { color: var(--text-muted); }
.acct-card { background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 18px; margin-bottom: 14px; }
.acct-card--slim { padding: 13px 18px; }
.acct-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(232, 192, 116, 0.12); border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
.acct-banner__btn { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 7px; padding: 6px 12px; font-weight: 700; cursor: pointer; }
.acct-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.acct-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-alt); }
.acct-avatar--none { display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: var(--text-muted); }
.acct-upload { display: inline-block; background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 8px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; transition: border-color 0.15s ease; }
.acct-upload:hover { border-color: var(--accent); }
.acct-hint { color: var(--text-dim); font-size: 12px; margin-top: 6px; }
.acct-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 6px; }
.acct-input { width: 100%; padding: 11px 13px; background: var(--surface-alt); border: 1px solid var(--hairline-strong); border-radius: 9px; color: var(--text); font: inherit; font-size: 14px; }
.acct-input:focus { outline: none; border-color: var(--accent); }
.acct-email { margin-top: 10px; color: var(--text-muted); font-size: 13px; }
.acct-verified { color: #4ade80; font-weight: 700; }
.acct-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.acct-msg { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.acct-msg--error { color: #ff5a6a; }
.acct-msg--ok { color: #35d07f; }
.acct-save { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 8px; padding: 9px 20px; font-weight: 800; cursor: pointer; transition: background 0.15s ease; }
.acct-save:hover { background: var(--accent-hover); }
.acct-save:disabled { opacity: 0.6; cursor: default; }
.cat-sidebar__label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.cat-sidebar__section--collapsible { padding: 0; }
.cat-sidebar__section--collapsible > .cat-checks { margin-top: 8px; }
.cat-sidebar__label--summary {
cursor: pointer;
list-style: none;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.cat-sidebar__label--summary::-webkit-details-marker { display: none; }
.cat-sidebar__label--summary::after {
content: '+';
font-size: 18px;
color: var(--accent);
font-weight: 700;
line-height: 1;
transition: transform 0.15s ease;
}
.cat-sidebar__section--collapsible[open] > .cat-sidebar__label--summary::after { transform: rotate(45deg); }
.cat-sidebar__sublabel { color: var(--text-muted); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 11px; }
.cat-sidebar__input {
width: 100%;
background: var(--bg);
border: 1px solid var(--hairline);
border-radius: var(--r-sm);
color: var(--text);
font-size: 14px;
padding: 8px 12px;
outline: none;
}
.cat-sidebar__input:focus { border-color: var(--accent); }
.cat-sidebar__results {
display: flex; justify-content: space-between; align-items: center;
padding-top: 12px;
border-top: 1px solid var(--hairline);
font-size: 13px;
font-weight: 700;
color: var(--text-muted);
}
.cat-sidebar__clear {
background: transparent;
border: 1px solid var(--hairline);
color: var(--text);
font-size: 12px;
font-weight: 600;
border-radius: var(--r-sm);
padding: 5px 10px;
cursor: pointer;
}
.cat-sidebar__clear:hover { background: var(--hairline); }
.cat-sidebar__apply { display: none; margin-top: 14px; }
.cat-sidebar__apply-btn {
width: 100%;
background: var(--accent);
border: 0;
color: var(--on-accent);
font-weight: 800;
font-size: 14px;
border-radius: var(--r-sm);
padding: 12px;
cursor: pointer;
}
/* Tag pickers — input with autosuggest dropdown + chip list */
.cat-tagpicker { position: relative; }
.cat-tagpicker__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.cat-tagpicker__chip {
display: inline-flex; align-items: center; gap: 4px;
background: var(--accent);
color: var(--on-accent);
border-radius: 999px;
padding: 3px 10px;
font-size: 12px;
font-weight: 700;
text-transform: capitalize;
}
.cat-tagpicker--exclude .cat-tagpicker__chip { background: #c84f4f; color: #fff; }
.cat-tagpicker__chip-x { cursor: pointer; border: 0; background: transparent; color: inherit; font-size: 14px; padding: 0; line-height: 1; }
.cat-tagpicker__input {
width: 100%;
background: var(--bg);
border: 1px solid var(--hairline);
border-radius: var(--r-sm);
color: var(--text);
font-size: 13px;
padding: 7px 10px;
outline: none;
}
.cat-tagpicker__input:focus { border-color: var(--accent); }
/* Touch: the tagpicker opens keyboard-less; this button summons the keyboard. */
.cat-tagpicker__kb { position: absolute; right: 4px; bottom: 4px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--surface-hi); border: 1px solid var(--hairline-strong); border-radius: 8px; color: var(--accent); font-size: 18px; cursor: pointer; }
.cat-tagpicker__kb:hover, .cat-tagpicker__kb:active { background: var(--hairline); color: var(--accent-hover); }
.cat-tagpicker__input--kb { padding-right: 40px; }
.cat-tagpicker__panel {
position: absolute;
top: 100%; left: 0; right: 0;
margin-top: 4px;
background: var(--bg);
border: 1px solid var(--hairline);
border-radius: var(--r-sm);
max-height: min(320px, 42vh);
overflow-y: auto;
z-index: 20;
box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}
.cat-tagpicker__option {
display: flex; justify-content: space-between;
padding: 7px 10px;
font-size: 13px;
color: var(--text);
cursor: pointer;
text-transform: capitalize;
}
.cat-tagpicker__option:hover, .cat-tagpicker__option.is-active { background: var(--surface); color: var(--accent); }
.cat-tagpicker__option small { color: var(--text-muted); font-weight: 600; }
/* Engine / Platform checkbox row */
.cat-checks { display: flex; flex-direction: column; gap: 6px; }
.cat-checks label {
display: flex; align-items: center; gap: 8px;
font-size: 13px;
color: var(--text);
cursor: pointer;
text-transform: capitalize;
}
.cat-checks input[type="checkbox"] { accent-color: var(--accent); }
.cat-checks small { color: var(--text-muted); margin-left: auto; }
/* Filters trigger (desktop = hidden; mobile = visible button) */
.cat-filters-trigger {
display: none;
align-items: center;
gap: 8px;
background: var(--accent);
color: var(--on-accent);
border: 0;
border-radius: var(--r-sm);
padding: 10px 14px;
font-weight: 800;
font-size: 14px;
margin: 0 0 14px;
cursor: pointer;
}
.cat-filters-trigger__count {
background: rgba(0,0,0,0.18);
padding: 1px 7px;
border-radius: 999px;
font-size: 12px;
}
@media (max-width: 1000px), (hover: none) and (pointer: coarse) and (max-width: 1500px) {
.cat-filters-trigger { display: inline-flex; }
.cat-sidebar {
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(360px, 92vw);
/* 100vh includes the area behind Chrome mobile's bottom URL bar, hiding
the drawer's last rows; dvh tracks the real visible height. */
height: 100vh;
height: 100dvh;
max-height: none;
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
border-radius: 0;
border: 0;
border-left: 1px solid var(--hairline);
transform: translateX(100%);
transition: transform 0.22s ease;
z-index: 60;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.cat-sidebar.is-open { transform: translateX(0); }
/* Mobile browsers auto-zoom the page when focusing an input whose font is
under 16px — keep every text field at 16px on small screens. */
.cat-sidebar__input, .cat-tagpicker__input, .hsearch__input { font-size: 16px; }
.cat-sidebar__close { display: inline-flex; }
.cat-sidebar__apply { display: block; }
.cat-sidebar-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
z-index: 50;
}
body.cat-sidebar-locked { overflow: hidden; }
}
/* Default grid: 1 col mobile, 3 col desktop (porngameshub-style). */
.catalogue__grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 720px) { .catalogue__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
/* Tiles carry a fixed width (240/260px) for other contexts; inside the grid
they must never outgrow their track — on ~800px landscape phones the fixed
width overflowed the 3rd column onto the sidebar behind it. */
.catalogue__grid .tile { max-width: 100%; }
/* ── Pagination visibility (filter-aware) ────────────────────────────
The build renders the FULL listing (all matching games) into every
paginated page so the sidebar filter can scan everything — not just
the 36 visible tiles. Each tile carries a tile--p class for its
pagination chunk; the grid carries cat-grid--show for the chunk
currently displayed. The pair below hides every tile except those
tagged for the current page. When the filter is active, JS adds
`cat-grid--filtering` to the grid which lifts the chunk constraint
so all matching tiles can be shown via inline style.
Cap: 60 chunks (60 * 36 = 2160 games) — comfortably above the home's
~1500 today. Extend if a single listing ever crosses that ceiling. */
.catalogue__grid:not(.cat-grid--filtering) .tile[class*="tile--p"] { display: none; }
.cat-grid--show1:not(.cat-grid--filtering) .tile.tile--p1,
.cat-grid--show2:not(.cat-grid--filtering) .tile.tile--p2,
.cat-grid--show3:not(.cat-grid--filtering) .tile.tile--p3,
.cat-grid--show4:not(.cat-grid--filtering) .tile.tile--p4,
.cat-grid--show5:not(.cat-grid--filtering) .tile.tile--p5,
.cat-grid--show6:not(.cat-grid--filtering) .tile.tile--p6,
.cat-grid--show7:not(.cat-grid--filtering) .tile.tile--p7,
.cat-grid--show8:not(.cat-grid--filtering) .tile.tile--p8,
.cat-grid--show9:not(.cat-grid--filtering) .tile.tile--p9,
.cat-grid--show10:not(.cat-grid--filtering) .tile.tile--p10,
.cat-grid--show11:not(.cat-grid--filtering) .tile.tile--p11,
.cat-grid--show12:not(.cat-grid--filtering) .tile.tile--p12,
.cat-grid--show13:not(.cat-grid--filtering) .tile.tile--p13,
.cat-grid--show14:not(.cat-grid--filtering) .tile.tile--p14,
.cat-grid--show15:not(.cat-grid--filtering) .tile.tile--p15,
.cat-grid--show16:not(.cat-grid--filtering) .tile.tile--p16,
.cat-grid--show17:not(.cat-grid--filtering) .tile.tile--p17,
.cat-grid--show18:not(.cat-grid--filtering) .tile.tile--p18,
.cat-grid--show19:not(.cat-grid--filtering) .tile.tile--p19,
.cat-grid--show20:not(.cat-grid--filtering) .tile.tile--p20,
.cat-grid--show21:not(.cat-grid--filtering) .tile.tile--p21,
.cat-grid--show22:not(.cat-grid--filtering) .tile.tile--p22,
.cat-grid--show23:not(.cat-grid--filtering) .tile.tile--p23,
.cat-grid--show24:not(.cat-grid--filtering) .tile.tile--p24,
.cat-grid--show25:not(.cat-grid--filtering) .tile.tile--p25,
.cat-grid--show26:not(.cat-grid--filtering) .tile.tile--p26,
.cat-grid--show27:not(.cat-grid--filtering) .tile.tile--p27,
.cat-grid--show28:not(.cat-grid--filtering) .tile.tile--p28,
.cat-grid--show29:not(.cat-grid--filtering) .tile.tile--p29,
.cat-grid--show30:not(.cat-grid--filtering) .tile.tile--p30,
.cat-grid--show31:not(.cat-grid--filtering) .tile.tile--p31,
.cat-grid--show32:not(.cat-grid--filtering) .tile.tile--p32,
.cat-grid--show33:not(.cat-grid--filtering) .tile.tile--p33,
.cat-grid--show34:not(.cat-grid--filtering) .tile.tile--p34,
.cat-grid--show35:not(.cat-grid--filtering) .tile.tile--p35,
.cat-grid--show36:not(.cat-grid--filtering) .tile.tile--p36,
.cat-grid--show37:not(.cat-grid--filtering) .tile.tile--p37,
.cat-grid--show38:not(.cat-grid--filtering) .tile.tile--p38,
.cat-grid--show39:not(.cat-grid--filtering) .tile.tile--p39,
.cat-grid--show40:not(.cat-grid--filtering) .tile.tile--p40,
.cat-grid--show41:not(.cat-grid--filtering) .tile.tile--p41,
.cat-grid--show42:not(.cat-grid--filtering) .tile.tile--p42,
.cat-grid--show43:not(.cat-grid--filtering) .tile.tile--p43,
.cat-grid--show44:not(.cat-grid--filtering) .tile.tile--p44,
.cat-grid--show45:not(.cat-grid--filtering) .tile.tile--p45,
.cat-grid--show46:not(.cat-grid--filtering) .tile.tile--p46,
.cat-grid--show47:not(.cat-grid--filtering) .tile.tile--p47,
.cat-grid--show48:not(.cat-grid--filtering) .tile.tile--p48,
.cat-grid--show49:not(.cat-grid--filtering) .tile.tile--p49,
.cat-grid--show50:not(.cat-grid--filtering) .tile.tile--p50,
.cat-grid--show51:not(.cat-grid--filtering) .tile.tile--p51,
.cat-grid--show52:not(.cat-grid--filtering) .tile.tile--p52,
.cat-grid--show53:not(.cat-grid--filtering) .tile.tile--p53,
.cat-grid--show54:not(.cat-grid--filtering) .tile.tile--p54,
.cat-grid--show55:not(.cat-grid--filtering) .tile.tile--p55,
.cat-grid--show56:not(.cat-grid--filtering) .tile.tile--p56,
.cat-grid--show57:not(.cat-grid--filtering) .tile.tile--p57,
.cat-grid--show58:not(.cat-grid--filtering) .tile.tile--p58,
.cat-grid--show59:not(.cat-grid--filtering) .tile.tile--p59,
.cat-grid--show60:not(.cat-grid--filtering) .tile.tile--p60 { display: flex; }
/* ── Pagination footer (porngameshub-style numbered pager) ───────── */
.pag { padding: 32px 0 40px; }
.pag__inner {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.pag__num, .pag__nav, .pag__current, .pag__ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 12px;
border-radius: 8px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
}
.pag__num, .pag__nav {
color: var(--color-text, #d8d4dc);
background: var(--color-surface, #1a1820);
border: 1px solid var(--color-border, #2a2632);
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.pag__num:hover, .pag__nav:hover {
background: var(--color-surface-hover, #221f2a);
border-color: var(--color-primary, #e91e63);
color: var(--color-text-strong, #fff);
}
.pag__current {
color: #fff;
background: var(--color-primary, #e91e63);
border: 1px solid var(--color-primary, #e91e63);
}
.pag__ellipsis {
color: var(--color-text-muted, #7a7480);
min-width: 24px;
padding: 0 4px;
}
.pag__nav { font-size: 18px; }
/* Compact density: 2 cols mobile, 5 cols PC */
.catalogue__grid--compact { grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 600px) { .catalogue__grid--compact { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 920px) { .catalogue__grid--compact { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1180px) { .catalogue__grid--compact { grid-template-columns: repeat(5, 1fr); } }
/* Comfort density: 1 col mobile, 3 cols PC */
.catalogue__grid--comfort { grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 600px) { .catalogue__grid--comfort { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 920px) { .catalogue__grid--comfort { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .catalogue__grid--comfort { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) { .catalogue__grid--comfort { grid-template-columns: repeat(3, 1fr); } }
/* Density toggle + count row in catalogue head */
.catalogue__head-right {
display: flex;
align-items: center;
gap: 14px;
}
/* When the head-right is the only child of catalogue__head (tag pages,
after removing the redundant tag H2), align it to the right edge. */
.catalogue__head-right--solo { margin-left: auto; }
.density-toggle {
display: inline-flex;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-sm);
overflow: hidden;
}
.density-toggle__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 30px;
background: transparent;
border: 0;
color: var(--text-muted);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.density-toggle__btn:hover { color: var(--text); }
.density-toggle__btn + .density-toggle__btn { border-left: 1px solid var(--hairline); }
.density-toggle__btn.is-active { background: var(--accent); color: var(--on-accent); }
/* The .tile component was designed for the horizontal-scroll row layout
(.row__scroll) with a fixed 240–260px width. When reused inside a CSS grid
it would overflow its 1fr column on narrow viewports. Reset to auto. */
.catalogue__grid .tile { width: auto; }
.tag-h2 { color: var(--accent); }
/* ── tag page SEO content + FAQ section ──────────── */
.tag-seo {
padding: 36px 0 8px;
border-top: 1px solid var(--hairline);
}
.tag-seo .prose {
max-width: 78ch;
margin: 0 auto;
color: var(--text-muted);
font-size: 14.5px;
line-height: 1.65;
}
.tag-seo .section__heading {
text-align: center;
margin: 0 0 16px;
font-size: 22px;
color: var(--heading);
}
.tag-seo .prose p { margin: 0 0 0.9em; }
.tag-seo .prose p:last-child { margin-bottom: 0; }
.tag-seo .prose strong { color: var(--heading); font-weight: 600; }
.tag-seo .prose h3 {
margin: 22px 0 8px;
font-size: 15.5px;
color: var(--heading);
font-weight: 700;
}
.tag-faq {
padding: 40px 0 64px;
border-top: 1px solid var(--hairline);
}
.tag-faq .section__heading { text-align: center; margin: 0 0 18px; }
.tag-faq .faq__item {
border-top: 1px solid var(--hairline);
padding: 4px 0;
}
.tag-faq .faq__item:last-child { border-bottom: 1px solid var(--hairline); }
.tag-faq .faq__q {
cursor: pointer;
list-style: none;
padding: 14px 0;
font-weight: 700;
color: var(--heading);
font-size: 15px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.tag-faq .faq__q::-webkit-details-marker { display: none; }
.tag-faq .faq__q::after {
content: '+';
font-size: 22px;
color: var(--accent);
font-weight: 700;
line-height: 1;
transition: transform 0.2s ease;
}
.tag-faq .faq__item[open] .faq__q::after { transform: rotate(45deg); }
.tag-faq .faq__a {
padding: 0 0 14px;
color: var(--text-muted);
font-size: 14.5px;
max-width: 78ch;
}
.tag-faq .faq__a p { margin: 0 0 0.8em; }
.tag-faq .faq__a strong { color: var(--heading); }
/* ── seo / faq sections ─────────────────────────────── */
.prose {
max-width: 68ch;
color: var(--text);
font-size: 15.5px;
line-height: 1.7;
}
.prose h2 { margin: 1.6em 0 0.4em; font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; }
.prose h2:first-child { margin-top: 0; }
/* In-content h3 (used as section divider inside long descriptions). Kept
editorial / magazine style on purpose: white heading colour, slightly
larger than body copy, with a thin hairline underneath as the only visual
break. Avoids the "labelled SEO encart" look — feels like prose, not a
marketing block. */
.prose h3 {
margin: 2em 0 0.6em;
padding-bottom: 6px;
border-bottom: 1px solid var(--hairline);
font-size: 18px;
font-weight: 700;
color: var(--heading);
}
.prose p { margin: 0 0 1em; }
.prose strong { color: var(--heading); font-weight: 700; }
.prose ol, .prose ul { margin: 0 0 1em; padding-left: 1.4em; }
/* Mobile: long descriptions read as a wall of text without extra breathing
room between paragraphs. Bump paragraph gap + line-height a notch. */
@media (max-width: 600px) {
.game__desc { font-size: 15px; line-height: 1.8; }
.game__desc p { margin: 0 0 1.5em; }
.game__desc ol, .game__desc ul { margin: 0 0 1.5em; }
}
.seo-section {
padding: 48px 0 24px;
border-top: 1px solid var(--hairline);
}
.seo-section .prose { margin-bottom: 40px; }
.seo-section .prose:last-child { margin-bottom: 0; }
.faq-section { padding: 32px 0 80px; }
.faq__item {
border-top: 1px solid var(--hairline);
padding: 16px 0;
}
.faq__item:last-child { border-bottom: 1px solid var(--hairline); }
.faq__q {
font-weight: 700;
font-size: 16px;
color: var(--heading);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
content: '+';
font-family: var(--font-mono);
font-size: 18px;
color: var(--accent);
transition: transform 0.2s ease;
font-weight: 400;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a {
margin-top: 10px;
color: var(--text-muted);
font-size: 14.5px;
line-height: 1.65;
}
/* ── footer ─────────────────────────────────────────── */
.footer {
border-top: 1px solid var(--hairline);
padding: 40px 0 56px;
color: var(--text-muted);
font-size: 13px;
text-align: center;
}
.footer__disclaimer {
margin: 0 auto 20px;
max-width: 80ch;
line-height: 1.6;
}
.footer .footer__browse,
.footer .footer__browse-row,
.footer .footer__browse-links,
.footer__links { justify-content: center; }
.footer__links {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-bottom: 14px;
}
.footer__links a { color: var(--text-muted); }
.footer__links a:hover { color: var(--text); }
.footer__browse {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0 0 16px;
padding: 0;
}
.footer__browse-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px 14px;
font-size: 13px;
color: var(--text-muted);
}
.footer__browse-label {
font-weight: 600;
letter-spacing: 0.02em;
}
.footer__browse-label::after { content: ":"; margin-left: 1px; }
.footer__browse-links {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
}
.footer__browse-links a {
color: var(--text-muted);
text-decoration: none;
}
.footer__browse-links a:hover { color: var(--text); text-decoration: underline; }
.footer__contact {
margin: 0 0 14px;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 12.5px;
}
.footer__copyright {
margin: 0;
color: var(--text-dim);
font-size: 12px;
}
/* ── game page (vertical stack) ─────────────────────── */
.game-main { padding: 0 0 80px; }
.game { padding: 32px 0 0; }
.game__crumbs {
margin: 0 0 20px;
font-size: 13px;
color: var(--text-muted);
}
.game__crumbs a { color: var(--text-muted); }
.game__crumbs a:hover { color: var(--accent); }
/* tag chips above title */
.game__chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 0 0 18px;
}
/* title + rating row */
.game__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 12px 24px;
margin: 0 0 28px;
}
/* ── In-browser playable embed ────────────────────────
States:
- idle : thumbnail + play button + tips, game NOT loaded yet
- loaded : iframe + toolbar (Maximize, Fullscreen, Close)
- maximized : container goes fixed-fullscreen over the viewport
- fullscreen: native browser fullscreen, toolbar hidden
JS: initEmbed() in script.js drives state transitions. */
.game-embed {
margin-block: 24px 36px;
/* The whole game page is now player-width (.container--game), so the player
just fills the column — no breakout needed. */
width: 100%;
}
.game-embed__heading {
text-align: center;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.01em;
margin: 0 0 14px;
}
.game-embed__heading-hl {
background: color-mix(in srgb, var(--accent) 28%, transparent);
padding: 2px 8px;
}
.game-embed__toolbar-version {
font-size: 12px;
font-weight: 600;
color: var(--muted);
margin-left: 8px;
padding: 2px 6px;
border-radius: 4px;
background: color-mix(in srgb, var(--fg) 10%, transparent);
}
.game-embed__title-hint .game-embed__toolbar-version {
font-size: 16px;
font-weight: 700;
color: #fff;
margin-left: 10px;
padding: 3px 10px;
background: var(--accent);
}
.game-embed__container {
position: relative;
width: 100%;
/* Cap at the game's native width (never exceed 1280). RPG Maker MZ on
desktop renders its canvas at native size centered — if the frame is
wider than native, the game sits centered with black bars around it.
Sizing the frame to the native width makes the game fill it exactly
(and stays pixel-perfect, no upscale blur). Games wider than 1280 are
capped at 1280 and scale down to fit. */
max-width: min(1280px, var(--embed-native-width, 1280px));
margin: 0 auto;
aspect-ratio: var(--embed-aspect, 16 / 9);
background: #000;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--hairline);
}
/* Responsive HTML games (Twine/SugarCube): no fixed aspect ratio — a
full-width, generous fixed-height frame that scrolls internally. */
.game-embed__container--responsive {
aspect-ratio: auto;
max-width: 1280px;
height: min(85vh, 900px);
}
.game-embed__container--maximized {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
max-width: none;
z-index: 100;
aspect-ratio: auto;
border-radius: 0;
border: 0;
display: flex;
flex-direction: column;
}
/* Light scroll lock. We used to pin the body with position:fixed, but that
takes the page out of the normal scroll flow and stops iOS Safari from ever
collapsing its URL bar — so the maximized game never got a real fullscreen.
Competitors use overflow:hidden alone and DO get the collapsed bar. Safe for
us now: hardenGameFrame() already swallows touch-scroll inside the game
iframe, which was the actual source of the page-behind-the-game scrolling. */
body.embed-locked { overflow: hidden; overscroll-behavior: none; }
/* Idle state */
.game-embed__idle {
position: absolute;
inset: 0;
display: block;
}
.game-embed__thumb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.55);
}
.game-embed__idle-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 20px;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.68) 100%);
}
/* erogames-style call-to-action: a big red play-circle + "START PLAYING",
both visible by default, that scale up and glow brighter on hover. */
.game-embed__play {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.5, 1);
}
/* Icon wrapper carries the always-on attention animation: expanding "sonar"
rings that radiate out continuously so it's unmistakably a clickable play
button, plus a soft breathing scale. Hover pauses the breathing and gives
the crisp pop. */
.game-embed__play-icon {
position: relative;
display: inline-flex;
}
.game-embed__play-icon::before,
.game-embed__play-icon::after {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
border: 3px solid rgba(255,0,96,0.7);
animation: gg-sonar 2.1s ease-out infinite;
pointer-events: none;
}
.game-embed__play-icon::after { animation-delay: 1.05s; }
@keyframes gg-sonar {
0% { transform: scale(0.82); opacity: 0.75; }
100% { transform: scale(1.7); opacity: 0; }
}
.game-embed__play-circle {
width: 96px;
height: 96px;
color: #ff0060;
filter: drop-shadow(0 6px 20px rgba(0,0,0,0.55));
transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.5, 1), color 0.25s ease, filter 0.25s ease;
animation: gg-play-breathe 2.1s ease-in-out infinite;
}
@keyframes gg-play-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.07); }
}
.game-embed__play:hover .game-embed__play-circle { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.game-embed__play-icon::before,
.game-embed__play-icon::after,
.game-embed__play-circle { animation: none; }
}
.game-embed__play-text {
color: #fff;
font-family: inherit;
font-size: 30px;
font-weight: 700;
letter-spacing: 0.14em;
text-shadow: 0 2px 10px rgba(0,0,0,0.75);
}
.game-embed__play:hover { transform: translateY(-3px); }
.game-embed__play:hover .game-embed__play-circle {
transform: scale(1.14);
color: #ff2a77;
filter: drop-shadow(0 10px 30px rgba(255,0,96,0.6));
}
@media (max-width: 600px) {
.game-embed__play-circle { width: 72px; height: 72px; }
.game-embed__play-text { font-size: 22px; }
}
.game-embed__subtitle {
margin: 2px 0 0;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255,255,255,0.82);
text-shadow: 0 1px 6px rgba(0,0,0,0.75);
}
.game-embed__title-hint {
margin: 4px 0 0;
font-size: 20px;
font-weight: 700;
color: #fff;
text-align: center;
text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.game-embed__tips {
list-style: none;
margin: 6px 0 0;
padding: 14px 18px;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
color: rgba(255,255,255,0.9);
text-align: left;
}
.game-embed__tips li::before { content: "• "; color: rgba(255,255,255,0.4); }
/* Chapter / version selector — pills that wrap. Shown on the idle screen for
games released as multiple standalone builds. */
.game-embed__chapters {
margin: 12px 0 2px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
max-width: 92%;
}
.game-embed__chapters-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: rgba(255,255,255,0.75);
text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.game-embed__chapters-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.game-embed__chapter {
cursor: pointer;
font: inherit;
font-size: 13px;
font-weight: 600;
color: #fff;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.25);
background: rgba(0,0,0,0.55);
backdrop-filter: blur(8px);
transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.game-embed__chapter:hover { border-color: rgba(255,255,255,0.55); }
.game-embed__chapter:active { transform: scale(0.96); }
.game-embed__chapter.is-active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* Loaded state — `display: flex` would otherwise override the [hidden]
attribute so we re-assert display:none for both states when hidden. */
.game-embed__idle[hidden],
.game-embed__loaded[hidden] { display: none !important; }
.game-embed__loaded {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
}
.game-embed__container--maximized .game-embed__loaded { position: static; flex: 1; }
.game-embed__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 14px;
background: #0a0a12;
border-bottom: 1px solid rgba(255,255,255,0.1);
flex-shrink: 0;
}
.game-embed__toolbar--hidden { display: none; }
.game-embed__toolbar-title {
font-size: 13px;
color: rgba(255,255,255,0.7);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.game-embed__toolbar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.game-embed__btn[hidden] { display: none !important; }
.game-embed__perf-notice[hidden] { display: none !important; }
/* Small note under the player. "download" is a clear link that jumps to the
download section further down the page. */
.game-embed__perf-notice {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 13px;
color: var(--text-muted);
text-align: center;
margin: 14px auto 0;
max-width: 660px;
line-height: 1.5;
}
.game-embed__dl-link {
color: var(--accent);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.game-embed__dl-link:hover { color: var(--accent-hover); }
.game-embed__perf-notice-text { }
.game-embed__perf-close {
flex-shrink: 0;
background: transparent;
border: 0;
color: var(--text-muted);
font-size: 20px;
line-height: 1;
padding: 0 6px;
cursor: pointer;
opacity: 0.7;
}
.game-embed__perf-close:hover { opacity: 1; color: var(--text); }
.game-embed__mobile-warn {
text-align: center;
font-size: 13px;
color: #f59e0b;
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: 8px;
padding: 10px 14px;
margin: 0 auto 14px;
max-width: 600px;
}
.game-embed__btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 6px 14px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.game-embed__btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.game-embed__btn:hover { background: var(--accent); border-color: var(--accent); }
.game-embed__btn--close:hover { background: #c81e3a; border-color: #c81e3a; }
.game-embed__frame-wrap {
position: relative;
flex: 1;
background: #000;
}
.game-embed__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.game__title {
margin: 0;
font-size: clamp(32px, 5vw, 48px);
font-weight: 700;
letter-spacing: -0.022em;
line-height: 1.05;
flex: 1 1 auto;
min-width: 0;
}
.game__rating {
display: inline-flex;
align-items: baseline;
gap: 6px;
flex-shrink: 0;
}
.game__rating-star { color: var(--accent); font-size: 18px; line-height: 1; }
.game__rating-value {
color: var(--heading);
font-weight: 700;
font-size: 18px;
letter-spacing: -0.01em;
}
.game__rating-meta {
color: var(--text-muted);
font-size: 12.5px;
font-weight: 400;
}
.game__rating-source {
color: var(--text-muted);
text-decoration: none;
border-bottom: 1px solid var(--hairline-strong);
transition: color 0.15s ease, border-color 0.15s ease;
}
.game__rating-source:hover {
color: var(--heading);
border-bottom-color: var(--hairline);
}
.game__ratings {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
flex-shrink: 0;
}
/* the hidden attribute must win over .game__rating's inline-flex display */
.game__rating[hidden] { display: none !important; }
/* our own users' rating: a plain, non-link "on this site" tag */
.game__rating-source--ours {
border-bottom: none;
font-style: italic;
}
/* When our own users have rated, our score becomes the prominent badge and the
third-party score shrinks to a small companion beside it. Only applied once
script.js confirms cnt > 0; a third-party-only header stays untouched. */
.game__ratings--has-ours .game__rating--ours {
order: -1;
align-items: baseline;
gap: 7px;
padding: 7px 13px;
border-radius: 11px;
background: var(--surface-hi);
border: 1px solid var(--accent);
box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.7);
}
.game__ratings--has-ours .game__rating--ours .game__rating-star,
.game__ratings--has-ours .game__rating--ours .game__rating-value { font-size: 21px; }
.game__ratings--has-ours .game__rating--ours .game__rating-meta { font-size: 13px; }
.game__ratings--has-ours .game__rating:not(.game__rating--ours) { opacity: 0.72; }
.game__ratings--has-ours .game__rating:not(.game__rating--ours) .game__rating-star,
.game__ratings--has-ours .game__rating:not(.game__rating--ours) .game__rating-value { font-size: 14px; }
.game__ratings--has-ours .game__rating:not(.game__rating--ours) .game__rating-meta { font-size: 11.5px; }
/* bookmark: small icon that flows at the end of the title text */
.game__title-bm { white-space: nowrap; }
.game-bookmark {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: baseline;
position: relative;
top: 0.08em;
margin-left: 0.35em;
padding: 6px;
border: none;
background: none;
color: var(--text-muted);
cursor: pointer;
border-radius: 8px;
transition: color 0.15s ease, background 0.15s ease;
}
.game-bookmark:hover { color: var(--accent); background: var(--hairline); }
.game-bookmark__icon { width: 0.74em; height: 0.74em; display: block; }
/* default = "add" (outline + plus); hide the filled "saved" icon */
.game-bookmark__icon--saved { display: none; }
.game-bookmark.is-on { color: var(--accent); }
.game-bookmark.is-on .game-bookmark__icon--add { display: none; }
.game-bookmark.is-on .game-bookmark__icon--saved { display: block; }
/* rating + public like button share a row under the title */
.game__head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.game-like {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
border: 1px solid var(--hairline);
background: var(--surface-hi);
color: var(--text);
border-radius: 999px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
font-variant-numeric: tabular-nums;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.game-like:hover { border-color: #ff5c7a; transform: translateY(-1px); }
.game-like__icon { width: 17px; height: 17px; display: block; fill: currentColor; color: var(--text-muted); transition: color 0.15s ease; }
.game-like:hover .game-like__icon { color: #ff5c7a; }
.game-like__count { line-height: 1; }
.game-like.is-on { border-color: #ff5c7a; background: rgba(255, 92, 122, 0.12); color: #ff7a92; }
.game-like.is-on .game-like__icon { color: #ff5c7a; }
/* transient confirmation toast */
.tgg-toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%) translateY(12px);
background: var(--surface-hi);
color: var(--heading);
border: 1px solid var(--accent);
border-radius: 10px;
padding: 11px 18px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.75);
opacity: 0;
pointer-events: none;
z-index: 9999;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.tgg-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* report buttons (embed toolbar + download card) + modal */
/* download-card report: compact button pushed to the right of the card head */
.dl-report {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
background: var(--surface-alt);
border: 1px solid var(--hairline-strong);
color: var(--text-muted);
font: inherit;
font-size: 12.5px;
font-weight: 600;
padding: 6px 11px;
border-radius: 8px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.dl-report:hover { color: var(--heading); border-color: var(--accent); background: var(--surface-hi); }
.dl-report svg { opacity: 0.85; }
/* embed toolbar report: hide the word on small screens, keep the flag icon */
@media (max-width: 600px) {
.game-embed__btn--report .game-embed__btn-label { display: none; }
}
.modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.66);
backdrop-filter: blur(2px);
}
.modal__box {
position: relative;
width: 100%;
max-width: 420px;
background: var(--surface);
border: 1px solid var(--hairline-strong);
border-radius: 14px;
padding: 22px;
box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8);
}
.modal__close {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: none;
color: var(--text-muted);
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 6px;
border-radius: 6px;
}
.modal__close:hover { color: var(--heading); }
.modal__title { font-size: 18px; margin: 0 0 2px; color: var(--heading); }
.modal__sub { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }
.modal__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin: 12px 0 6px; }
.modal__select,
.modal__textarea {
width: 100%;
background: var(--surface-alt);
border: 1px solid var(--hairline-strong);
border-radius: 9px;
color: var(--heading);
font: inherit;
font-size: 14px;
padding: 10px 12px;
}
.modal__select:focus,
.modal__textarea:focus { outline: none; border-color: var(--accent); }
.modal__textarea { min-height: 80px; resize: vertical; }
.modal__actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.modal__error { flex: 1; font-size: 12.5px; font-weight: 600; color: #ff5a6a; }
.modal__submit {
background: var(--accent);
border: none;
border-radius: 9px;
color: var(--on-accent);
font: inherit;
font-size: 14px;
font-weight: 700;
padding: 10px 18px;
cursor: pointer;
}
.modal__submit:hover { background: var(--accent-hover); }
.modal__submit:disabled { opacity: 0.6; cursor: default; }
/* account: bookmarks list (thumbnail cards) */
.acct-subtitle { font-size: 15px; margin: 0 0 14px; color: var(--heading); }
.acct-bm { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acct-bm__item { display: flex; align-items: center; gap: 8px; }
.acct-bm__card {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
min-width: 0;
padding: 10px;
border-radius: 12px;
background: var(--surface-alt);
border: 1px solid var(--hairline);
text-decoration: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.acct-bm__card:hover { border-color: var(--accent); background: var(--surface-hi); }
.acct-bm__thumb {
width: 104px;
height: 66px;
flex-shrink: 0;
object-fit: cover;
border-radius: 8px;
background: var(--surface);
}
.acct-bm__thumb--none {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-weight: 700;
font-size: 24px;
}
.acct-bm__title {
color: var(--heading);
font-weight: 600;
font-size: 15.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 480px) {
.acct-bm__thumb { width: 84px; height: 54px; }
.acct-bm__title { font-size: 14.5px; }
}
.acct-bm__card:hover .acct-bm__title { color: var(--accent); }
.acct-bm__remove {
background: none;
border: none;
color: var(--text-muted);
font-size: 15px;
line-height: 1;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
flex-shrink: 0;
}
.acct-bm__remove:hover { color: #ff5a6a; }
.acct-bm__empty { color: var(--text-muted); font-size: 13.5px; margin: 0; }
/* account tabs */
.acct-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--hairline); }
/* Upload tab: disabled dropzone */
.acct-upload { padding: 4px 2px; }
.acct-upload__zone { border: 2px dashed var(--hairline-strong); border-radius: 14px; padding: 38px 20px 34px; text-align: center; background: rgba(255, 240, 220, 0.02); }
.acct-upload__ico { width: 46px; height: 46px; color: var(--text-dim); margin: 0 auto 14px; display: block; }
.acct-upload__title { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 14px; }
.acct-upload__badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: rgba(224, 117, 117, 0.12); border: 1px solid rgba(224, 117, 117, 0.4); color: #e07575; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.acct-tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-muted);
font: inherit;
font-size: 14px;
font-weight: 700;
padding: 9px 10px;
margin-bottom: -1px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.acct-tab:hover { color: var(--heading); }
.acct-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.acct-panel[hidden] { display: none; }
/* ratings history */
.acct-rate { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acct-rate__item { display: flex; align-items: center; gap: 12px; }
.acct-rate__link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; }
.acct-rate__title { color: var(--heading); font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-rate__link:hover .acct-rate__title { color: var(--accent); }
.acct-rate__stars { flex-shrink: 0; font-size: 14px; }
/* comments history */
.acct-cmt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.acct-cmt__item { border-bottom: 1px solid var(--hairline); }
.acct-cmt__item:last-child { border-bottom: none; }
.acct-cmt__link { display: block; padding: 10px 2px; text-decoration: none; }
.acct-cmt__link:hover { background: var(--surface-alt); border-radius: 8px; }
.acct-cmt__body { display: block; color: var(--text); font-size: 13.5px; }
.acct-cmt__meta { display: block; color: var(--text-dim); font-size: 11.5px; margin-top: 3px; }
.acct-bm__count { color: var(--text-muted); font-size: 12.5px; margin: 0 0 10px; }
/* pager */
.acct-pg { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 16px; }
.acct-pg__btn {
min-width: 34px;
height: 34px;
padding: 0 9px;
border-radius: 8px;
background: var(--surface-alt);
border: 1px solid var(--hairline-strong);
color: var(--heading);
font: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.acct-pg__btn:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-hi); }
.acct-pg__btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.acct-pg__btn:disabled { opacity: 0.4; cursor: default; }
.acct-pg__gap { display: inline-flex; align-items: center; color: var(--text-muted); padding: 0 2px; }
/* big banner image — full image visible (no crop), height matches source ratio */
.game__banner {
border-radius: var(--r-lg);
overflow: hidden;
background: var(--surface-alt);
border: 1px solid var(--hairline);
margin: 0 0 28px;
}
.game__banner > picture {
height: auto;
}
.game__banner-img {
width: 100%;
height: auto;
display: block;
}
/* meta row: dev, devlink, updated, language, version */
.meta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
margin: 0 0 28px;
font-size: 14px;
color: var(--text);
line-height: 1.6;
}
.meta__item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.meta__label {
color: var(--text-dim);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
}
.meta-row a {
color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--hairline-strong);
transition: color 0.15s ease, border-color 0.15s ease;
}
.meta-row a:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}
.meta__devlinks { gap: 8px; flex-wrap: wrap; }
.meta__devlink {
display: inline-flex;
align-items: center;
gap: 4px;
}
.meta__ext { color: var(--text-dim); font-size: 11px; transition: color 0.15s ease; }
.meta-row a:hover .meta__ext { color: var(--accent); }
.meta__sep { color: var(--text-dim); user-select: none; }
/* ── Developer support zone ─────────────────────────── */
.devzone {
margin: 0 0 28px;
background: linear-gradient(180deg, var(--surface-hi), var(--surface));
border: 1px solid var(--hairline-strong);
border-radius: 14px;
padding: 16px 18px;
}
.devzone__head { display: flex; align-items: center; gap: 12px; }
.devzone__heart { color: var(--accent); flex-shrink: 0; }
.devzone__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.devzone__by { font-size: 16px; color: var(--text); }
.devzone__by strong { color: var(--heading); font-weight: 800; }
.devzone__msg { font-size: 12.5px; color: var(--text-muted); }
.devzone__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.devzone__link {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 13px;
border-radius: 9px;
background: var(--surface);
border: 1px solid var(--hairline-strong);
color: var(--heading);
text-decoration: none;
font-size: 13.5px;
font-weight: 600;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.devzone__link:hover { border-color: var(--accent); background: var(--surface-hi); }
.devzone__link svg { width: 16px; height: 16px; flex-shrink: 0; }
.devzone__ext { color: var(--text-dim); font-size: 12px; }
.devzone__link:hover .devzone__ext { color: var(--accent); }
@media (max-width: 600px) {
.devzone__link { width: 100%; justify-content: flex-start; }
.devzone__ext { margin-left: auto; }
}
/* ── Download takedown notice + Copyright & Terms dropdown ────────── */
.dl-notice { margin: -20px 0 22px; }
.dl-notice__short { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin: 0 0 6px; }
.dl-notice__short strong { color: var(--text-muted); font-weight: 700; }
.dl-notice__more > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
padding: 4px 0;
}
.dl-notice__more > summary::-webkit-details-marker { display: none; }
.dl-notice__more > summary::before { content: '+'; color: var(--text-dim); font-weight: 800; }
.dl-notice__more[open] > summary::before { content: '−'; }
.dl-notice__more > summary:hover { color: var(--heading); }
.dl-notice__body { font-size: 12px; color: var(--text-dim); line-height: 1.65; }
.dl-notice__body p { margin: 8px 0 0; }
.dl-notice__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* ── Compact facts line (Updated / Status / Language / Engine) ─────── */
.game__facts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
margin: 0 0 30px;
padding-top: 18px;
border-top: 1px solid var(--hairline);
font-size: 13.5px;
color: var(--text);
}
.game__fact { display: inline-flex; align-items: center; gap: 6px; }
.game__fact-label {
color: var(--text-dim);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
}
.game__fact-link { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--hairline-strong); transition: color 0.15s ease, border-color 0.15s ease; }
.game__fact-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.game__fact-sep { color: var(--text-dim); user-select: none; }
.meta__rating {
display: inline-flex;
align-items: center;
gap: 5px;
}
.meta__rating-star { color: var(--accent); font-size: 13px; }
.meta__rating-value { color: var(--heading); font-weight: 700; }
.meta__rating-count { color: var(--text-dim); font-size: 12.5px; }
/* One-line heads-up shown when itch.io's pay-what-you-want popup is
active on a game (set the payWhatYouWant flag in custom.json). */
.pwyw {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
background: color-mix(in oklab, var(--accent) 7%, var(--surface));
border-radius: var(--r-sm);
margin: 0 0 18px;
font-size: 13.5px;
line-height: 1.5;
color: var(--text);
}
.pwyw__icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.pwyw strong { color: var(--heading); font-weight: 700; }
.pwyw em { font-style: italic; }
/* CTA row — one button per OS (Download) + optional Play button (online) */
.game__cta-row { margin: 0 0 16px; }
/* ── Download card (flat games): header + OS tabs + primary CTA ── */
.dl-card {
margin: 14px 0 34px;
padding: 20px;
background: linear-gradient(180deg, var(--surface-hi), var(--surface));
border: 1px solid var(--accent-soft, rgba(232, 192, 116, 0.22));
border-radius: 14px;
box-shadow: 0 16px 38px -20px rgba(0, 0, 0, 0.8);
}
.dl-card__head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.dl-card__icon {
display: flex; align-items: center; justify-content: center;
width: 46px; height: 46px; flex: none;
border-radius: 12px;
background: rgba(232, 192, 116, 0.14);
color: var(--accent);
}
.dl-card__icon svg { width: 23px; height: 23px; }
.dl-card__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-card__title { font-size: 17px; font-weight: 800; color: var(--heading); }
.dl-card__sub { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.dl-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dl-tab {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 14px;
background: var(--surface-alt);
border: 1px solid var(--hairline-strong);
border-radius: 9px;
color: var(--text-muted);
font: inherit; font-size: 13px; font-weight: 700;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.dl-tab svg, .dl-tab img { width: 15px; height: 15px; }
/* /os/*.svg are black — invert to white on dark tabs, keep dark on the gold active tab */
.dl-tab img { filter: brightness(0) invert(1) opacity(0.85); }
.dl-tab.is-active img { filter: brightness(0); }
/* OS selector: click an OS → its links appear (nothing shown by default) */
.dl-os-select { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-os-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px;
background: var(--surface-alt);
border: 1px solid var(--hairline-strong);
border-radius: 10px;
color: var(--text);
font: inherit; font-size: 14px; font-weight: 700;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.dl-os-btn img, .dl-os-btn svg { width: 17px; height: 17px; }
.dl-os-btn img { filter: brightness(0) invert(1) opacity(0.85); }
.dl-os-btn:hover { border-color: var(--accent); }
.dl-os-btn.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.dl-os-btn.is-active img { filter: brightness(0); }
.dl-os-panel { margin-top: 15px; }
.dl-os-panel[hidden] { display: none; }
.dl-tab:hover { color: var(--text); border-color: var(--accent); }
.dl-tab.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.dl-tab.is-active svg { color: #1a1410; }
.dl-panel { display: none; }
.dl-panel.is-active { display: block; }
.dl-primary {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; padding: 15px 20px;
background: var(--accent); color: var(--on-accent);
border-radius: 11px;
font-weight: 800; font-size: 16px;
text-decoration: none;
transition: background 0.15s ease, transform 0.08s ease;
}
.dl-primary:hover { background: var(--accent-hover); }
.dl-primary:active { transform: translateY(1px); }
.dl-primary svg { width: 20px; height: 20px; flex: none; }
.dl-primary__text { display: inline-flex; align-items: baseline; gap: 8px; }
.dl-primary__via { font-size: 12px; font-weight: 600; opacity: 0.72; }
.dl-alts { margin-top: 15px; }
.dl-alts__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 9px; }
.dl-alts__list { display: flex; flex-wrap: wrap; gap: 8px; }
/* Mirror list = all links for an OS, as equal buttons */
.dl-mirror-list { display: flex; flex-wrap: wrap; gap: 9px; }
.dl-mirror-list .dl-mirror { padding: 11px 15px; font-size: 13px; }
/* Mobile: one host per line for a cleaner column */
@media (max-width: 560px) {
.dl-mirror-list { flex-direction: column; align-items: stretch; }
.dl-mirror-list .dl-mirror { width: 100%; }
.dl-mirror-list .dl-mirror__ext { margin-left: auto; }
}
/* One-link-per-OS: a labelled row per platform */
.dl-os-rows { display: flex; flex-direction: column; gap: 18px; }
.dl-os-row__os { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; color: var(--heading); margin-bottom: 14px; }
.dl-os-row__os svg, .dl-os-row__os img { width: 20px; height: 20px; }
.dl-os-row__os img { filter: brightness(0) invert(1); }
/* Multi-build versions → collapsible sub-blocks inside the card */
.dl-sec { border-top: 1px solid var(--hairline); }
.dl-sec:first-child { border-top: 0; }
.dl-sec__summary {
cursor: pointer; list-style: none;
display: flex; align-items: center; gap: 8px;
padding: 13px 0 11px;
font-weight: 800; font-size: 14px; color: var(--heading);
}
.dl-sec__summary::-webkit-details-marker { display: none; }
.dl-sec__summary::before {
content: "+"; flex: none;
width: 26px; height: 26px; line-height: 24px; text-align: center;
font-size: 19px;
border: 1px solid var(--hairline-strong); border-radius: 6px;
color: var(--accent); font-weight: 700;
}
.dl-sec[open] > .dl-sec__summary::before { content: "\2212"; }
.dl-sec__body { display: flex; flex-direction: column; gap: 16px; padding: 2px 0 14px; }
/* Backup mirrors folded under the gold itch download buttons */
.dl-card__backup { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--hairline); }
/* ── download mirrors / older builds ──────────────────
Native -driven accordion sitting between the primary CTA row and
the rest of the page. Two shapes:
- .dl-mirrors → wrapper for nested section structures (F95-style:
current build + older builds + extras).
- .dl-mirrors-flat → wrapper for flat single-section structures that
only need to collapse because they have many hosts. */
.dl-mirrors { margin: 0 0 28px; }
.dl-mirrors__heading {
margin: 0 0 12px;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
}
/* Flat variant: no nested sections, just one or a few platform groups with
their mirrors. Renders inline (no accordion) inside a bordered card so the
user doesn't have to click to see what's downloadable. */
.dl-mirrors--flat {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-sm);
padding: 14px 16px;
}
.dl-mirrors--flat .dl-mirrors__heading { margin: 0 0 8px; }
/* Backup mirrors variant: rendered as a accordion (closed by
default) — the dev has provided primary download buttons (e.g. Patreon
posts) and these are alternative mirrors users only need if the primary
fails. */
.dl-mirrors-backup {
margin: 0 0 28px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-sm);
padding: 0 16px;
}
.dl-mirrors-flat__summary {
cursor: pointer;
list-style: none;
padding: 14px 0;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
}
.dl-mirrors-flat__summary::-webkit-details-marker { display: none; }
.dl-mirrors-flat__summary::before {
content: '+';
display: inline-block;
width: 22px;
margin-right: 10px;
color: var(--accent);
font-size: 24px;
line-height: 1;
font-weight: 700;
text-align: center;
transition: transform 0.2s ease;
}
.dl-mirrors-backup[open] .dl-mirrors-flat__summary::before { transform: rotate(45deg); }
.dl-mirrors-flat__body { padding: 4px 0 14px; }
.dl-section {
margin: 0 0 10px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-sm);
overflow: hidden;
}
.dl-section__summary {
cursor: pointer;
list-style: none;
padding: 14px 16px;
font-size: 15px;
font-weight: 800;
color: var(--heading);
letter-spacing: -0.005em;
background: linear-gradient(180deg, rgba(232, 192, 116, 0.08), rgba(232, 192, 116, 0));
border-bottom: 1px solid transparent;
transition: background 0.15s ease, border-color 0.15s ease;
}
.dl-section__summary:hover { background: linear-gradient(180deg, rgba(232, 192, 116, 0.14), rgba(232, 192, 116, 0)); }
.dl-section[open] > .dl-section__summary { border-bottom-color: var(--hairline); }
.dl-section__summary::-webkit-details-marker { display: none; }
.dl-section__summary::before {
content: '+';
display: inline-block;
width: 22px;
margin-right: 10px;
color: var(--accent);
font-size: 24px;
line-height: 1;
font-weight: 700;
text-align: center;
transition: transform 0.2s ease;
}
.dl-section[open] > .dl-section__summary::before { transform: rotate(45deg); }
.dl-section__body { padding: 8px 16px 16px; }
.dl-section--depth-1 { margin: 8px 0 0; background: rgba(255,255,255,0.02); }
.dl-section--depth-1 > .dl-section__summary {
font-size: 14px;
padding: 11px 14px;
background: none;
}
/* Always stack the OS label above the hosts row. Previous side-by-side
flexbox flipped to wrapped depending on how many hosts fit, which made
rows with 4 hosts look inline and rows with 5 look weirdly wrapped. */
.dl-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 12px 0;
border-top: 1px dashed var(--hairline);
}
.dl-group:first-child { border-top: 0; padding-top: 6px; }
.dl-group__os {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 15px;
font-weight: 800;
color: var(--heading);
letter-spacing: -0.005em;
}
.dl-group__os svg, .dl-group__os img {
width: 18px;
height: 18px;
/* /os/*.svg files are black — invert + tint to the accent gold so they're
visible on the dark surface background. */
filter: brightness(0) saturate(100%) invert(80%) sepia(35%) saturate(450%) hue-rotate(0deg);
}
.dl-group__hosts {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dl-mirror {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
background: rgba(255,255,255,0.045);
border: 1px solid var(--hairline);
border-radius: 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--text);
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.dl-mirror:hover {
background: rgba(255,255,255,0.1);
border-color: var(--accent);
transform: translateY(-1px);
}
.dl-mirror__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
border-radius: 4px;
object-fit: contain;
}
.dl-mirror__icon--generic { border-radius: 0; color: var(--text-muted); }
.dl-mirror__name { white-space: nowrap; }
.dl-mirror__ext { color: var(--text-muted); font-size: 12px; margin-left: 1px; }
.dl-mirror:hover .dl-mirror__ext { color: var(--accent); }
.dl-mirror--itch {
background: #fa5c5c;
border-color: #fa5c5c;
color: #fff;
text-transform: none;
font-size: 14px;
font-weight: 700;
padding: 9px 16px;
border-radius: 10px;
gap: 8px;
}
.dl-mirror--itch:hover {
background: #e54444;
border-color: #e54444;
color: #fff;
}
.dl-mirror--itch svg,
.dl-mirror--itch img {
width: 18px;
height: 18px;
filter: brightness(0) invert(1);
flex-shrink: 0;
}
.dl-mirror__action {
font-weight: 700;
}
.dl-mirror__dest {
background: rgba(255, 255, 255, 0.18);
border-radius: 5px;
padding: 3px 7px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.02em;
}
@media (max-width: 600px) {
.dl-group { flex-direction: column; align-items: flex-start; gap: 6px; }
.dl-group__os { min-width: 0; }
}
/* Destination indicator inside each button — pink itch face + "itch.io"
wordmark. Replaces the action arrow because the action label already says
what the button does; users need to see WHERE they're going more than HOW. */
.cta-btn__dest {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: auto;
padding: 3px 7px;
border-radius: 5px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: -0.005em;
line-height: 1;
flex-shrink: 0;
}
.cta-btn__dest svg, .cta-btn__dest img { width: 13px; height: 13px; }
.cta-btn__dest--itch {
background: #fa5c5c;
color: #fff;
}
.cta-btn__dest--itch img {
/* SVG file is pink #fa5c5c — invert to pure white so it shows on the pink pill */
filter: brightness(0) invert(1);
}
.cta-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.cta-browse {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin-top: 10px;
font-size: 12.5px;
}
.cta-browse__link {
color: var(--text-muted);
text-decoration: none;
transition: color 0.12s ease;
display: inline-flex;
align-items: center;
gap: 4px;
}
.cta-browse__link:hover {
color: var(--color-primary);
text-decoration: underline;
}
.cta-browse__arrow {
font-weight: 600;
letter-spacing: -0.02em;
}
.cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 12px 10px 14px;
border-radius: var(--r-sm);
text-decoration: none;
transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
min-width: 215px;
border: 1px solid transparent;
}
.cta-btn:hover { transform: translateY(-1px); }
/* Mobile: itch.io download buttons stack one per line (like the host list).
Must override the flex-basis (flex-basis wins over width in flexbox), and be
more specific than the .cta-btn 50%-column rule further down. */
@media (max-width: 600px) {
.cta-row .cta-btn { flex: 1 1 100%; min-width: 0; }
}
/* Download — primary, gold */
.cta-btn--dl {
background: var(--btn-download);
color: var(--on-btn-download);
}
.cta-btn--dl:hover { background: var(--btn-download); filter: brightness(1.12); color: var(--on-btn-download); }
.cta-btn--dl .cta-btn__action { color: var(--on-btn-download); opacity: 0.7; }
/* Play (online) — same gold styling as download, the "Play" label + globe
icon are enough to distinguish action without a separate colour scheme. */
.cta-btn--play {
background: var(--accent);
color: var(--on-accent);
}
.cta-btn--play:hover { background: var(--accent-hover); color: #1a1410; }
.cta-btn--play .cta-btn__action { color: rgba(26, 20, 16, 0.7); }
/* "More mirrors" — outline/ghost button in the brand accent colour. Sits
alongside the primary CTAs but visually secondary; used when the dev's
official download page is short on mirrors and there's a fuller list
hosted elsewhere. */
.cta-btn--more {
background: transparent;
color: var(--accent);
border: 1.5px solid var(--accent);
box-shadow: none;
}
.cta-btn--more:hover {
background: var(--accent);
color: var(--on-accent);
}
.cta-btn--more .cta-btn__action { color: rgba(232, 192, 116, 0.7); }
.cta-btn--more:hover .cta-btn__action { color: rgba(26, 20, 16, 0.7); }
.cta-btn--more .cta-btn__dest { color: var(--accent); opacity: 0.85; }
.cta-btn--more:hover .cta-btn__dest { color: #1a1410; opacity: 0.7; }
.cta-btn--more .cta-btn__os img { filter: brightness(0) saturate(100%) invert(80%) sepia(40%) saturate(400%) hue-rotate(0deg); opacity: 0.9; }
.cta-btn--more:hover .cta-btn__os img { filter: brightness(0) opacity(0.85); }
/* OS cluster (4 icons in a tight 2x2 square) for the "More mirrors" button.
Double-class selector boosts specificity above the base .cta-btn__os rule
so the display:grid + dimensions actually apply. */
.cta-btn__os.cta-btn__os--cluster {
display: grid;
grid-template-columns: 14px 14px;
grid-template-rows: 14px 14px;
gap: 0;
width: 28px;
height: 28px;
place-items: center;
flex-shrink: 0;
}
.cta-btn__os.cta-btn__os--cluster img { width: 12px; height: 12px; }
.cta-btn__os {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
}
.cta-btn__os svg { width: 22px; height: 22px; }
.cta-btn__label {
display: flex;
flex-direction: column;
line-height: 1.15;
gap: 1px;
text-align: left;
}
.cta-btn__action {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
}
.cta-btn__os-name {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.005em;
}
.cta-btn__action-icon {
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
width: 16px;
flex-shrink: 0;
}
@media (max-width: 480px) {
.cta-btn { min-width: 0; }
/* The itch download buttons are full-width (one per line) on mobile, so the
full "itch.io" wordmark + logo fits — same as desktop. */
}
/* steam widget */
.steam {
margin: 0 0 36px;
padding: 16px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-md);
}
.steam__heading {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin: 0 0 12px;
}
.steam iframe {
display: block;
width: 100%;
border: 0;
border-radius: var(--r-sm);
overflow: hidden;
}
/* YouTube trailer embed — 16:9 responsive */
.trailer { margin: 0 0 36px; }
.trailer__heading {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin: 0 0 12px;
}
.trailer__embed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--r-md);
overflow: hidden;
background: #000;
border: 1px solid var(--hairline);
}
.trailer__embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* gallery */
.screens {
margin: 22px 0 36px;
width: 100%;
}
.screens__title {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.01em;
margin: 0 0 12px;
}
/* Horizontal carousel (porngameshub-style): a scroll-snapping strip of
thumbnails with prev/next arrows. Swipeable on touch, arrow-driven on
desktop. */
/* One-image-at-a-time slider (porngameshub-style): swipeable, dot indicators,
plus prev/next arrows. Full-width slides give each item a deterministic width
(= carousel width) so index math works even before lazy images load. */
.screens__carousel { position: relative; }
.screens__strip {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 2px;
}
.screens__strip::-webkit-scrollbar { display: none; }
.screens__item {
/* 3 per view on desktop (2 gaps of 10px). Taller 3:2 frame = bigger visual
area at the same width, so the served image file is unchanged (no extra
load). */
flex: 0 0 calc((100% - 20px) / 3);
aspect-ratio: 3 / 2;
border-radius: var(--r-md);
overflow: hidden;
background: var(--surface-alt);
scroll-snap-align: start;
cursor: zoom-in;
-webkit-user-drag: none;
}
@media (max-width: 900px) { .screens__item { flex-basis: calc((100% - 10px) / 2); } }
@media (max-width: 600px) { .screens__item { flex-basis: 82%; } }
.screens__item img,
.screens__item picture { width: 100%; height: 100%; display: block; }
.screens__item img { object-fit: cover; }
/* Route clicks to the and kill native image drag — rapid arrow/image
clicking could otherwise start a drag that swallows subsequent clicks and
leaves the cursor stuck as a zoom-in. */
.screens__item img,
.screens__item picture,
.screens__item source { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.screens__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: rgba(0,0,0,0.62);
color: #fff;
cursor: pointer;
opacity: 0.9;
transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.screens__nav:hover { background: rgba(0,0,0,0.85); transform: translateY(-50%) scale(1.06); }
.screens__nav svg { width: 22px; height: 22px; }
.screens__nav--prev { left: 10px; }
.screens__nav--next { right: 10px; }
/* Dot indicators */
.screens__dots {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 7px;
margin-top: 12px;
}
.screens__dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--hairline-strong);
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.screens__dot:hover { background: var(--text-muted); }
.screens__dot--active { background: var(--accent); transform: scale(1.3); }
@media (max-width: 600px) {
.screens__nav { width: 36px; height: 36px; }
.screens__nav svg { width: 18px; height: 18px; }
}
.game__desc { max-width: none; }
/* Extra sections — collapsible accordion (F95-spoiler style). Closed by
default to keep the page scannable; click expands the content. */
.extras {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0 0 32px;
}
.extra {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-md);
overflow: hidden;
transition: border-color 0.15s ease;
}
.extra[open] { border-color: var(--hairline-strong); }
.extra__title {
font-weight: 700;
font-size: 14.5px;
letter-spacing: 0.005em;
color: var(--heading);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 13px 16px;
user-select: none;
transition: background 0.15s ease;
}
.extra__title:hover { background: var(--surface-alt); }
.extra__title::-webkit-details-marker { display: none; }
.extra__title::after {
content: '+';
font-family: var(--font-mono);
font-size: 26px;
line-height: 1;
color: var(--accent);
font-weight: 700;
transition: transform 0.2s ease;
}
.extra[open] .extra__title::after { transform: rotate(45deg); }
.extra__body {
padding: 0 16px 16px;
color: var(--text-muted);
font-size: 14.5px;
line-height: 1.65;
}
.extra__body p { margin: 0 0 0.8em; }
.extra__body p:last-child { margin-bottom: 0; }
.extra__body strong { color: var(--heading); font-weight: 700; }
.extra__body ol, .extra__body ul { padding-left: 1.4em; margin: 0 0 0.8em; }
.extra__body li { margin: 0 0 0.3em; }
.extra__video { position: relative; padding-bottom: 56.25%; height: 0; margin: 0.8em 0; border-radius: 8px; overflow: hidden; }
.extra__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.extra__video + .extra__video { margin-top: 1.2em; }
.extra__body a {
color: var(--accent);
text-decoration: underline;
text-decoration-color: rgba(232, 192, 116, 0.4);
text-underline-offset: 2px;
}
.extra__body a:hover { color: var(--accent-hover); text-decoration-color: var(--accent); }
.extra__body code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 0.9em;
padding: 1px 5px;
background: rgba(255, 255, 255, 0.06);
border-radius: 3px;
color: var(--heading);
}
/* Same link styling inside the main description prose for consistency. */
.prose a {
color: var(--accent);
text-decoration: underline;
text-decoration-color: rgba(232, 192, 116, 0.4);
text-underline-offset: 2px;
}
.prose a:hover { color: var(--accent-hover); text-decoration-color: var(--accent); }
.prose code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 0.9em;
padding: 1px 5px;
background: rgba(255, 255, 255, 0.06);
border-radius: 3px;
}
/* ── similar games ──────────────────────────────────── */
.similar {
margin-top: 56px;
padding-top: 40px;
border-top: 1px solid var(--hairline);
}
.similar .section__heading { margin: 0 0 20px; }
.similar__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
@media (min-width: 600px) { .similar__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 920px) { .similar__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .similar__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* min-width:0 lets the grid items shrink below their content's intrinsic width,
preventing horizontal overflow (esp. after a landscape → portrait rotation). */
.similar__grid .tile { width: auto; min-width: 0; }
/* ── legal pages ────────────────────────────────────── */
.legal { padding: 56px 0 80px; }
.legal__title {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 700;
margin: 0 0 32px;
}
/* ── 404 ────────────────────────────────────────────── */
.notfound { padding: 120px 0; text-align: center; }
.notfound__kicker {
font-family: var(--font-mono);
color: var(--accent);
font-size: 13px;
letter-spacing: 0.1em;
margin: 0 0 14px;
}
.notfound__title { font-size: clamp(32px, 5vw, 48px); margin: 0 0 14px; }
.notfound__sub { color: var(--text-muted); margin: 0 0 28px; }
/* ── lightbox ───────────────────────────────────────── */
.lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__stage {
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox__media {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
border-radius: var(--r-md);
}
.lightbox__close, .lightbox__nav {
position: absolute;
background: rgba(15, 13, 17, 0.78);
color: #fff;
font-family: var(--font-mono);
width: 52px;
height: 52px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.55);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.lightbox__close { top: 16px; right: 20px; font-size: 26px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 30px; font-weight: 700; line-height: 1; }
.lightbox__close:hover, .lightbox__nav:hover {
background: rgba(15, 13, 17, 0.92);
border-color: var(--accent);
color: var(--accent);
}
.lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }
@media (max-width: 600px) {
.lightbox__nav { width: 46px; height: 46px; font-size: 26px; }
.lightbox__prev { left: 8px; }
.lightbox__next { right: 8px; }
}
/* ── responsive tweaks ──────────────────────────────── */
@media (max-width: 600px) {
.container { padding: 0 20px; }
.row__head { padding: 0 20px; }
.row__scroll { padding-left: 20px; padding-right: 20px; }
.hero { padding: 48px 0 24px; }
.topbar__inner { padding: 8px 12px; }
.game__title { font-size: clamp(26px, 8vw, 36px); }
/* Tighter tag chips on mobile — 40+ tags eat too much vertical space */
.chip {
padding: 1px 7px;
font-size: 10px;
gap: 4px;
}
.game__chips,
.hero-cinema__chips,
.hero__chips { gap: 3px; }
}
/* reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ── related tag pages (internal-linking block) ──── */
.related-tags {
padding: 36px 0 56px;
border-top: 1px solid var(--hairline);
}
.related-tags .section__heading {
text-align: center;
margin: 0 0 20px;
font-size: 20px;
color: var(--heading);
}
.related-tags__grid {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
justify-content: center;
max-width: 78ch;
margin: 0 auto;
}
.related-tag {
display: inline-flex;
align-items: center;
padding: 9px 16px;
border: 1px solid var(--hairline);
border-radius: 999px;
background: var(--surface);
color: var(--heading);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.related-tag:hover {
border-color: var(--accent);
background: var(--surface-2, var(--surface));
transform: translateY(-1px);
}
/* Mobile: the player goes edge-to-edge (the 20px page padding + 94vw cap made
the game ~18% smaller than the screen allows) and the idle cover gets some
extra height. While PLAYING the pure aspect-ratio still rules — the
min-height only applies while the idle poster shows. */
@media (max-width: 760px) {
.game-embed { width: auto; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.game-embed__container { max-width: none; border-radius: 0; }
.game-embed__container:has([data-embed-idle]:not([hidden])) { min-height: min(80vw, 380px); }
}
/* Mobile maximize = immersion mode: the title bar disappears, replaced by two
small floating translucent controls over the game; dvh keeps everything
inside the area the browser actually shows (iOS URL bar can't be hidden). */
@media (max-width: 1000px), (hover: none) and (pointer: coarse) and (max-width: 1500px) {
.game-embed__container--maximized { height: 100dvh; }
.game-embed__container--maximized .game-embed__toolbar {
position: absolute; top: 8px; right: 8px; z-index: 6;
width: auto; padding: 0; margin: 0; background: none; border: 0;
}
/* In REAL fullscreen (Android) the desktop rule hides the whole toolbar;
on touch there is no Esc key, so keep the floating controls available. */
.game-embed__container--maximized .game-embed__toolbar.game-embed__toolbar--hidden { display: flex; }
.game-embed__container--maximized .game-embed__toolbar-title { display: none; }
.game-embed__container--maximized .game-embed__toolbar-actions { gap: 8px; flex-direction: column; align-items: flex-end; }
.game-embed__container--maximized .game-embed__btn {
width: 40px; height: 40px; padding: 0; font-size: 0; gap: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(10, 8, 12, 0.55); border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 50%; color: #fff;
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.game-embed__container--maximized .game-embed__btn svg { width: 18px; height: 18px; }
.game-embed__container--maximized .game-embed__btn-label { display: none; }
}
/* ── touch gamepad (RPG Maker embeds on phones) ── */
.tpad { display: none; }
@media (hover: none) and (pointer: coarse) {
.tpad {
display: flex; align-items: flex-end; justify-content: space-between;
position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
pointer-events: none; /* only the buttons catch taps */
touch-action: none; user-select: none; -webkit-user-select: none;
}
.tpad[hidden] { display: none; }
.tpad__dpad {
position: relative; width: 132px; height: 132px;
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
pointer-events: auto;
}
.tpad__btn, .tpad__act, .tpad__toggle {
display: flex; align-items: center; justify-content: center;
/* Deliberately discreet: a louder version was tried and rejected — it broke
immersion during play. Keep it subtle. */
background: rgba(12, 10, 14, 0.5); border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff; cursor: pointer; pointer-events: auto;
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
-webkit-tap-highlight-color: transparent; touch-action: none;
}
.tpad__btn { border-radius: 12px; }
.tpad__btn--up { grid-area: 1 / 2; }
.tpad__btn--left { grid-area: 2 / 1; }
.tpad__hub { grid-area: 2 / 2; }
.tpad__btn--right { grid-area: 2 / 3; }
.tpad__btn--down { grid-area: 3 / 2; }
.tpad__btn.is-held, .tpad__act.is-held { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tpad__actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.tpad__act {
width: 66px; height: 52px; border-radius: 14px;
font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em;
}
.tpad__act--ok { background: rgba(232, 192, 116, 0.35); border-color: rgba(232, 192, 116, 0.6); }
.tpad__toggle {
position: absolute; top: -34px; right: 12px;
width: 30px; height: 30px; border-radius: 50%; font-size: 17px; line-height: 1;
}
/* Folded: only the toggle stays, so the pad never blocks the game. */
.tpad--folded .tpad__dpad, .tpad--folded .tpad__actions { display: none; }
.tpad--folded .tpad__toggle { top: auto; bottom: 6px; width: 38px; height: 38px; }
.tpad__toggle-pad { display: none; width: 21px; height: 21px; }
.tpad--folded .tpad__toggle-x { display: none; }
.tpad--folded .tpad__toggle-pad { display: block; }
/* Maximized/fullscreen: give the pad a bit more breathing room. */
.game-embed__container--maximized .tpad { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
/* Maximized on touch: after 3s the floating controls tuck against the right
edge, leaving a fully-opaque crescent — always visible, but off the game.
First tap slides them back out; the next tap acts. */
@media (hover: none) and (pointer: coarse) {
.game-embed__container--maximized { overflow: hidden; }
.game-embed__container--maximized .game-embed__toolbar { transition: transform 0.35s ease; }
.game-embed__container--ctl-faded .game-embed__toolbar { transform: translateX(calc(100% - 16px)); }
}
/* ── sponsored tiles (EMD-style native ads) ── */
.tile--sponsor .tile__media { background: #0e0c11; }
.tile__img--sponsorfit { object-fit: contain; padding: 13%; box-sizing: border-box; }
.tile__gofree {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
margin-top: 6px; padding: 9px 12px;
background: #28a852; color: #fff; border-radius: 9px;
font-size: 11.5px; font-weight: 900; letter-spacing: 0.05em;
transition: background 0.15s ease;
}
.tile--sponsor:hover .tile__gofree { background: #2fb95c; }
.tile--sponsor:hover .tile__img { transform: scale(1.04); }
/* gallery promo slide: same footprint as a real screenshot */
.screens__item--promo { position: relative; }
.screens__item--promo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.screens__promo-ov {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
padding: 8%; text-align: center; pointer-events: none;
}
.screens__promo-title { color: #fff; font-size: clamp(14px, 1.3vw, 19px); font-weight: 900; line-height: 1.25; letter-spacing: 0.02em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); max-width: 62%; }
.screens__promo-hl { color: var(--accent); }
.screens__promo-cta {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px; background: #28a852; color: #fff; border-radius: 9px;
font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;
box-shadow: 0 8px 22px -8px rgba(40, 168, 82, 0.7);
transition: background 0.15s ease;
}
.screens__item--promo:hover .screens__promo-cta { background: #2fb95c; }
/* ═══════════════════════════════════════════════════════════════
BANNIERES DE SITE SATELLITE (config.banners)
Reprises telles quelles du moteur d origine de bbcporngames, pour que
ses creations gardent EXACTEMENT le rendu qu elles avaient. Ces regles
ne s appliquent qu au balisage produit par bannerBlock() ; un site qui
ne declare pas config.banners n emet aucune de ces classes, donc
thegoonergames n est pas concerne (verifie : aucune collision).
═══════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────── */
/* BANNER */
/* ───────────────────────────────────────────────────────────── */
.banner {
display: block;
position: relative;
max-width: 1400px;
margin: 24px auto;
padding: 0 24px;
text-decoration: none;
color: inherit;
}
.banner__img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius);
border: 1px solid var(--border);
transition: transform 0.2s, box-shadow 0.2s;
}
.banner:not(.banner--static):hover .banner__img {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
/* Static (link-less) banners don't get hover lift — no affordance for click. */
.banner--static { cursor: default; }
/* Overlay sits on top of the image, centered in the empty middle region.
The content is flexbox-stacked so rows wrap cleanly on narrow screens.
Horizontal padding keeps content off the subjects on the sides. */
.banner__overlay {
position: absolute;
inset: 0 24px; /* match the .banner horizontal padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
padding: 16px 12%; /* keeps content in the middle third on wide screens */
pointer-events: none; /* let clicks pass through to the parent */
/* Subtle radial darkening behind the centered text column. Keeps the
image fully visible on the sides but gives text enough contrast
against any background (skin tones, bright scenes, etc). */
background: radial-gradient(
ellipse 50% 75% at center,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.25) 55%,
rgba(0, 0, 0, 0) 100%
);
}
.banner__title {
font-size: clamp(28px, 4.2vw, 60px);
font-weight: 900;
letter-spacing: 0.04em;
color: #fff;
text-transform: uppercase;
line-height: 1;
/* Neutral strong dark glow by default so the title stays readable on
any background (skin tones, bright scenes, dark scenes). Brand-specific
colored glows opt in via .banner--glow- modifiers. */
text-shadow:
0 0 18px rgba(0, 0, 0, 0.85),
0 0 40px rgba(0, 0, 0, 0.6),
0 2px 4px rgba(0, 0, 0, 0.95);
}
/* Iridescent purple/indigo glow — used by BNWO AI banners to echo the
purple/cyan stones in the hero image. */
.banner--glow-purple .banner__title {
text-shadow:
0 0 24px rgba(168, 85, 247, 0.7),
0 0 48px rgba(99, 102, 241, 0.5),
0 2px 4px rgba(0, 0, 0, 0.9);
}
/* Two-tone wordmark part: used in banner__title to render a brand logo
where one word is a muted gray and the other stays white (Blacked Raw). */
.banner__title-dim { color: #b3b3b3; }
.banner__tagline {
font-size: clamp(11px, 1.2vw, 15px);
color: rgba(255, 255, 255, 0.95);
font-weight: 500;
line-height: 1.3;
text-shadow: 0 0 10px rgba(0,0,0,0.95), 0 2px 4px rgba(0,0,0,0.95);
max-width: 520px;
}
/* Feature list sits under the CTA as supporting proof points. Styled as
a minimal inline checklist (no bg, no border, no pill shape) so it
reads as info, not as competing buttons next to the real CTA. */
.banner__features {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
justify-content: center;
font-size: clamp(10px, 0.95vw, 13px);
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
margin-top: 2px;
}
.banner__feature {
display: inline-flex;
align-items: center;
gap: 5px;
text-shadow: 0 0 8px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.9);
}
.banner__feature svg { color: #22c55e; flex-shrink: 0; }
.banner__cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 11px 22px 11px 26px;
/* Warm amber-orange gradient: complementary to the purple/magenta
artwork, so the CTA pops hard against the iridescent scene instead
of blending in. Classic conversion color for affiliate CTAs. */
background: linear-gradient(135deg, #fbbf24 0%, #f97316 55%, #ea580c 100%);
color: #fff;
font-size: clamp(13px, 1.15vw, 16px);
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
border-radius: 999px;
box-shadow: 0 4px 18px rgba(249, 115, 22, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.25);
animation: banner-cta-pulse 2.4s ease-in-out infinite;
pointer-events: auto;
}
.banner__cta svg { transition: transform 0.2s; }
/* Responsive CTA label: short version on mobile, long on desktop. Only
applied when the renderer emits both variants. */
.banner__cta-short { display: inline; }
.banner__cta-long { display: none; }
@media (min-width: 640px) {
.banner__cta-short { display: none; }
.banner__cta-long { display: inline; }
}
.banner:not(.banner--static):hover .banner__cta {
filter: brightness(1.1);
transform: translateY(-1px);
box-shadow: 0 6px 22px rgba(249, 115, 22, 0.75), 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.banner:not(.banner--static):hover .banner__cta svg { transform: translateX(3px); }
@media (max-width: 380px) {
.banner__features { display: none; }
}
/* When a dedicated mobile image is provided, the image is typically a
full-bleed hero shot (subjects everywhere, no empty center) — so we add
a dark bottom-anchored gradient to make the overlay text readable, and
anchor the content to the lower half of the image. Desktop behavior is
unchanged (the media query gates this). */
.banner--has-mobile .banner__picture { display: block; }
/* Game page banners live inside a narrower (1000px) .container that already
provides horizontal padding — strip the .banner defaults so they fit flush
within the column. Margin-top stays smaller since they follow the download
section closely; B sits tighter below A. */
.banner--game-a,
.banner--game-b {
max-width: none;
padding: 0;
margin: 20px 0;
}
.banner--game-a .banner__overlay,
.banner--game-b .banner__overlay { inset: 0; }
.banner--game-b { margin-top: 12px; }
/* Home page has the banner in two slots: top (desktop) and below the
games grid (mobile). We render the same banner in both places and
toggle visibility per viewport — mobile users shouldn't eat a tall
vertical banner before they see any games. */
.banner--home-mobile { display: none; }
@media (max-width: 640px) {
.banner--top { display: none; }
.banner--home-mobile { display: block; }
}
/* Desktop top banner is a 4:1 strip — at the default 1400px max-width it
still eats ~350px of vertical space above the fold. Cap tighter to keep
it visible but not dominating the first screen. */
.banner--top { max-width: 1100px; margin: 16px auto; }
/* Home page desktop secondary banner that sits below the games grid.
Same sizing as the top banner, hidden on mobile (mobile already has
two BNWO slots — top strip and after-games vertical — so a third
banner would be overkill). */
.banner--home-bottom { max-width: 1100px; margin: 16px auto; }
@media (max-width: 640px) {
.banner--home-bottom { display: none; }
}
/* Mobile-only thin top banner (horizontal strip). Rendered above everything
on mobile so users see a compact visible promo before scrolling, without
the tall vertical format eating the first screen. Hidden on desktop since
the main .banner--top already lives there. */
.banner--mobile-top { display: none; }
@media (max-width: 640px) {
.banner--mobile-top {
display: block;
margin: 8px auto 4px;
padding: 0 8px;
}
}
/* ── POPUP : valeurs reprises du site d origine de bbcporngames.
Aucune regle d affichage ici : l ouverture reste geree par le socle. ── */
.dlpop__continue { padding: 18px 26px; background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); border: 0; color: #fff; font-size: 17px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }
.dlpop__continue:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(34, 197, 94, 0.6); }
.dlpop__offer-title, .dlpop__offer-title--center {
position: absolute; top: 50%; left: 50%; right: auto; bottom: auto;
transform: translate(-50%, -50%); max-width: none; width: auto;
background: none; padding: 0; border-radius: 0;
color: #fff; font-size: 18px; font-weight: 900; text-transform: uppercase;
letter-spacing: 0.04em; white-space: nowrap; pointer-events: none;
text-shadow: 0 0 14px rgba(0,0,0,0.85), 0 2px 4px rgba(0,0,0,0.95);
}
.dlpop__offer-title-dim { color: #b3b3b3; }
.dlpop__subtag { display: block; margin: 3px 0 0; color: rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: 500; text-align: center; }
@media (max-width: 520px) { .dlpop__offer-title, .dlpop__offer-title--center { font-size: 20px; } }
/* Ecarts mesures par comparaison des styles calcules avec le site en ligne. */
.dlpop__offer { display: block; position: static; background: #0f0a14; font-size: 16px; color: #e8e0e0; }
.dlpop__cta { display: inline-flex; }
.dlpop__subtag { color: rgba(255,255,255,0.55); font-weight: 500; text-align: center; }
.dlpop__or span { font-weight: 700; color: rgba(255,255,255,0.5); text-align: center; }
.dlpop__continue { text-align: center; margin-bottom: 22px; }
.dlpop__or span { font-size: 11px; }
.dlpop__box { font-size: 16px; text-align: center; padding: 34px 28px 26px; background-color: transparent; background-image: linear-gradient(160deg, rgb(26,20,35), rgb(13,10,20)); }
.dlpop__title { font-weight: 900; margin-bottom: 10px; }
.dlpop__sub { font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 20px; }
.dlpop__media img { aspect-ratio: 12 / 5; object-fit: cover; width: 100%; height: auto; display: block; }
.dlpop__media { aspect-ratio: 12 / 5; height: auto; }
.dlpop__cta { margin-top: 12px; }
.dlpop__offer { padding-bottom: 12px; }
.dlpop__cta { line-height: 1.6; }
/* Bannieres : ecarts mesures avec le site d origine (vue mobile). */
.banner__img { border-radius: 10px; }
@media (max-width: 640px) {
.banner--game-a, .banner--game-b { margin-left: -16px; margin-right: -16px; }
.banner__overlay { padding: 8px 8%; gap: 6px; }
}
@media (max-width: 640px) {
.banner__cta { padding: 8px 18px; font-size: 12px; }
.banner__features { font-size: 10px; }
.banner__tagline { display: none; }
.banner--mobile-vertical .banner__tagline { display: block; font-size: 13px; max-width: 92%; }
}
/* Palette du site (config.colors) */
:root {
--bg: #0a0808;
--surface: #151010;
--surface-alt: #1f1818;
--text: #e8e0e0;
--text-muted: #8a8080;
--heading: #ffffff;
--accent: #d32f2f;
--primary: #d32f2f;
--border: #2a2020;
--on-accent: #ffffff;
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--btn-download: #ffb300;
--on-btn-download: #1a1410;
}
body { font-size: 16px; }