would otherwise still zoom. `*` has zero
specificity, so all deliberate game rules below/after it win:
canvas gets `none` (gestures fully off on play surfaces) and any game
stylesheet can still override with its own class/id rules. */
* { touch-action: manipulation; }
/* Every canvas in the center is a game play surface, so browser gestures
are off on the target itself (double-tap zoom AND pan/pinch). */
canvas { touch-action: none; }
/* ---- Page frame: scoped to the center only ---- */
body.gc-body {
margin: 0;
min-height: 100vh;
box-sizing: border-box;
font-family: var(--gc-font);
font-size: 15px;
line-height: 1.55;
color: var(--gc-text);
/* Plain value first: if color-mix() is unsupported the declaration is ignored
and this survives instead of falling back to transparent. */
background: var(--gc-bg);
background:
radial-gradient(90% 60% at 50% -10%, color-mix(in srgb, var(--gc-accent) 12%, transparent) 0%, transparent 60%),
var(--gc-bg);
-webkit-font-smoothing: antialiased;
}
body.gc-body *,
body.gc-body *::before,
body.gc-body *::after { box-sizing: border-box; }
.gc-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px clamp(16px, 5vw, 48px);
border-bottom: 1px solid var(--gc-border);
background: var(--gc-surface);
background: color-mix(in srgb, var(--gc-surface) 72%, transparent);
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 10;
/* Blank header space is a scroll-to-top target (see center.js). */
cursor: pointer;
}
/* The brand is not a link, so it inherits the pointer affordance; real
controls keep their own cursors. */
.gc-header a, .gc-header button { cursor: pointer; }
.gc-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -.01em; font-size: clamp(22px, 3.6vw, 30px); }
.gc-brand svg { display: block; width: 1.35em; height: 1.35em; }
.gc-brand span {
background: linear-gradient(90deg, var(--gc-accent), var(--gc-accent-2));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* Two-line brand: the wordmark, then a small game count under it. */
.gc-brand__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.12; min-width: 0; }
/* Higher specificity than `.gc-brand span` above, so the count escapes the
gradient text clip and sits in the muted colour instead. */
.gc-brand .gc-brand__count {
background: none;
-webkit-text-fill-color: currentColor;
color: var(--gc-text-muted);
font-size: clamp(11px, 1.5vw, 13px);
font-weight: 600;
letter-spacing: .03em;
}
.gc-main {
max-width: var(--gc-content);
margin: 0 auto;
padding: clamp(24px, 6vw, 56px) clamp(16px, 5vw, 48px) 64px;
}
.gc-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* ---- Toolbar: name search + category filter chips ---- */
.gc-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 16px;
margin: 0 0 24px;
}
.gc-search {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 1 1 220px;
max-width: 340px;
padding: 8px 14px;
border: 1px solid var(--gc-border);
border-radius: 999px;
background: var(--gc-surface);
color: var(--gc-text-muted);
transition: border-color .15s ease, box-shadow .15s ease;
}
.gc-search:focus-within { border-color: var(--gc-accent); box-shadow: var(--gc-ring); }
.gc-search svg { flex: none; width: 15px; height: 15px; }
.gc-search input {
flex: 1; min-width: 0;
border: 0; outline: 0;
background: transparent;
color: var(--gc-text);
font: inherit; font-size: 14px;
}
.gc-search input::placeholder { color: var(--gc-text-muted); }
.gc-search input::-webkit-search-cancel-button { cursor: pointer; }
.gc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gc-chip {
padding: 6px 13px;
border: 1px solid var(--gc-border);
border-radius: 999px;
background: var(--gc-surface);
color: var(--gc-text);
font: inherit; font-size: 13px; font-weight: 550;
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.gc-chip:hover { border-color: var(--gc-accent); }
.gc-chip:focus-visible { outline: none; box-shadow: var(--gc-ring); }
.gc-chip--on {
color: var(--gc-on-accent);
background: linear-gradient(90deg, var(--gc-accent), var(--gc-accent-2));
border-color: transparent;
}
.gc-empty { margin: 0 0 24px; color: var(--gc-text-muted); text-align: center; }
/* ---- Game card ---- */
.gc-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--gc-border);
border-radius: var(--gc-radius);
background: var(--gc-surface);
box-shadow: var(--gc-shadow);
color: inherit;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
/* The card sets display:flex, which would beat the bare [hidden] attribute. */
.gc-card[hidden] { display: none; }
.gc-card:hover,
.gc-card:focus-visible {
transform: translateY(-4px);
border-color: var(--gc-accent);
border-color: color-mix(in srgb, var(--gc-accent) 55%, var(--gc-border));
/* The whole card lights up, not just its edge: surface takes an accent tint. */
background-color: var(--gc-surface-2);
background-color: color-mix(in srgb, var(--gc-accent) 9%, var(--gc-surface));
/* Plain value first as a fallback if color-mix() is unsupported. */
box-shadow: var(--gc-shadow-hi);
box-shadow:
var(--gc-shadow-hi),
0 0 0 1px color-mix(in srgb, var(--gc-accent) 45%, transparent),
0 10px 30px color-mix(in srgb, var(--gc-accent) 32%, transparent),
0 8px 44px color-mix(in srgb, var(--gc-accent-2) 26%, transparent);
}
/* The art panel paints over the card background, so tint it on hover too. */
.gc-card:hover .gc-card__art,
.gc-card:focus-visible .gc-card__art {
background: linear-gradient(140deg,
color-mix(in srgb, var(--gc-accent) 12%, var(--gc-surface-2)),
color-mix(in srgb, var(--gc-accent) 8%, var(--gc-surface)));
}
.gc-card:focus-visible {
outline: none;
box-shadow: var(--gc-ring),
0 10px 30px color-mix(in srgb, var(--gc-accent) 32%, transparent),
0 8px 44px color-mix(in srgb, var(--gc-accent-2) 26%, transparent);
}
.gc-card__art {
display: flex; align-items: center; justify-content: center;
padding: 26px;
background: linear-gradient(140deg, var(--gc-surface-2), var(--gc-surface));
border-bottom: 1px solid var(--gc-border);
transition: background .18s ease;
}
.gc-card__art svg { width: 132px; height: auto; display: block; }
.gc-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gc-card__title { margin: 0; font-size: 17px; font-weight: 620; letter-spacing: -.01em; }
.gc-card__desc { margin: 0; font-size: 13.5px; color: var(--gc-text-muted); }
.gc-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: auto; padding-top: 6px;
font-size: 13.5px; font-weight: 600; color: var(--gc-accent);
}
.gc-card__cta span { transition: transform .18s ease; }
.gc-card:hover .gc-card__cta span { transform: translateX(3px); }
.gc-badge {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px; font-weight: 600; letter-spacing: .02em;
color: var(--gc-on-accent);
background: var(--gc-accent);
vertical-align: middle;
}
/* Per-category badge hues, keyed off the card's data-category attribute —
the same value the filter chips use — so a badge's colour can never
drift from the category it filters. Solid fills, dark enough for the
white badge text to stay readable. */
.gc-card[data-category="puzzle"] .gc-badge { background: #12a06e; } /* green */
.gc-card[data-category="card"] .gc-badge { background: #3568e4; } /* blue */
.gc-card[data-category="board"] .gc-badge { background: #cf7212; } /* amber */
.gc-card[data-category="arcade"] .gc-badge { background: #e22a7b; } /* pink */
.gc-card[data-category="platformer"] .gc-badge { background: #7d40e0; } /* violet */
/* Casino: deep crimson. Reads as back-room felt and sits apart from the
pink arcade hue and the amber board hue so a triple stack of badges is
still distinguishable at card-thumbnail size. */
.gc-card[data-category="casino"] .gc-badge { background: #8b0f2a; } /* ruby */
/* Cross-cutting "3D" tag badge (cards opt in via data-3d="true", and the
3D filter chip keys off the same attribute). Cyan-teal sits apart from
every category hue so the two badges never read as the same thing. */
.gc-card[data-category] .gc-badge.gc-badge--3d { background: #0891b2; }
/* ---- Favourite star (top-right of each card) ---- */
.gc-fav {
position: absolute; top: 10px; right: 10px; z-index: 2;
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--gc-surface);
background: color-mix(in srgb, var(--gc-surface) 82%, transparent);
box-shadow: var(--gc-shadow);
color: var(--gc-text-muted);
cursor: pointer;
transition: transform .12s ease, color .15s ease;
}
.gc-fav svg { width: 20px; height: 20px; display: block; }
.gc-fav svg path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.gc-fav:hover { transform: scale(1.12); color: var(--gc-accent); }
.gc-fav:focus-visible { outline: none; box-shadow: var(--gc-ring), var(--gc-shadow); }
.gc-fav[aria-pressed="true"] { color: #f5b301; }
.gc-fav[aria-pressed="true"] svg path { fill: currentColor; stroke: #e0a200; }
.gc-footer {
max-width: var(--gc-content);
margin: 0 auto;
padding: 28px clamp(16px, 5vw, 48px) 44px;
border-top: 1px solid var(--gc-border);
font-size: 12.5px;
line-height: 1.6;
color: var(--gc-text-muted);
}
.gc-footer p { margin: 0 0 10px; }
.gc-footer p:last-child { margin-bottom: 0; }
/* The leading
Disclaimer
acts as a section heading. */
.gc-footer p:first-of-type strong {
display: inline-block;
font-size: 13.5px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--gc-text);
margin-bottom: 2px;
}
.gc-footer strong { color: var(--gc-text); font-weight: 600; }
.gc-footer em { font-style: italic; }
/* ---- Footer build version (text set by center.js from the ?v= token) ---- */
.gc-version {
margin-top: 18px;
text-align: center;
font-size: 11.5px;
letter-spacing: .06em;
opacity: .75;
font-variant-numeric: tabular-nums;
}
/* ---- Footer actions: clear-all-storage button ---- */
.gc-footer__actions {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin-top: 16px; padding-top: 14px;
border-top: 1px dashed var(--gc-border);
}
.gc-clear {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px;
border: 1px solid var(--gc-border);
border-radius: 999px;
background: var(--gc-surface);
color: var(--gc-text-muted);
font: inherit; font-size: 12.5px; font-weight: 550;
cursor: pointer;
transition: color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.gc-clear:hover {
color: #fff;
border-color: #d64545;
background: #d64545;
}
.gc-clear:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(214, 69, 69, .35); }
.gc-clear svg { display: block; }
.gc-clear__hint { font-size: 12px; color: var(--gc-text-muted); }
.gc-clear__hint:not(:empty) { color: #12a06e; }
/* ---- Mode toggle ---- */
.gc-toggle {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 13px;
border: 1px solid var(--gc-border);
border-radius: 999px;
background: var(--gc-surface);
color: var(--gc-text);
font: inherit; font-size: 13px; font-weight: 550;
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease;
}
.gc-toggle:hover { border-color: var(--gc-accent); }
.gc-toggle:focus-visible { outline: none; box-shadow: var(--gc-ring); }
.gc-toggle svg { display: block; }
/* ---- Back-to-center link, shown on game pages ---- */
.gc-back {
position: fixed;
left: 14px;
bottom: 14px;
z-index: 400; /* above the window chrome, below dialogs */
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--gc-border);
border-radius: 999px;
background: var(--gc-surface);
color: var(--gc-text);
font: 500 12.5px/1 var(--gc-font);
text-decoration: none;
box-shadow: var(--gc-shadow);
opacity: .72;
transition: opacity .15s ease, transform .15s ease;
}
.gc-back:hover { opacity: 1; transform: translateY(-1px); }
.gc-back:focus-visible { outline: none; box-shadow: var(--gc-ring), var(--gc-shadow); }
/* Phone sizes: auto-fill's 260px track would collapse to one column, so pin
exactly two and compact the card internals to suit the narrow columns.
Kept at the end of the file: media queries add no specificity, so these
must come after the base .gc-* rules they override. */
@media (max-width: 700px) {
.gc-search { flex: 1 1 100%; max-width: none; }
.gc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gc-card__art { padding: 20px 12px; }
.gc-card__art svg { width: 100%; max-width: 104px; }
.gc-card__body { padding: 11px 12px 14px; gap: 5px; }
.gc-card__title { font-size: 14.5px; }
.gc-badge { margin-left: 5px; padding: 1px 6px; font-size: 10px; }
.gc-card__desc {
font-size: 12px;
/* keep card heights even: long descriptions clip to three lines */
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.gc-card__cta { font-size: 12.5px; }
.gc-fav { top: 7px; right: 7px; width: 28px; height: 28px; }
.gc-fav svg { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
.gc-card, .gc-card__cta span, .gc-back, .gc-toggle { transition: none; }
.gc-card:hover, .gc-back:hover { transform: none; }
}