/* Vogimo 2026: bright, playful, games-first design */

@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #f3f1ff;
  --surface: #ffffff;
  --surface-2: #f8f6ff;
  --tint: #f1ecff;
  --line: #e8e3fa;
  --line-2: #d9d1f5;
  --text: #1e1a3c;
  --text-2: #4a4570;
  --muted: #7a7599;
  --brand: #7c3aed;
  --brand-deep: #5b21b6;
  --brand-soft: #ede7ff;
  --play: linear-gradient(135deg, #a78bfa 0%, #7c3aed 52%, #6d28d9 100%);
  --play-shadow: 0 12px 26px -10px rgb(109 40 217 / .6);
  --tile-shadow: 0 1px 0 rgb(43 29 102 / .05), 0 6px 16px -6px rgb(43 29 102 / .28);
  --tile-shadow-hover: 0 18px 34px -12px rgb(91 33 182 / .55);
  --card-shadow: 0 1px 0 rgb(43 29 102 / .04), 0 10px 30px -18px rgb(43 29 102 / .35);
  --radius: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --max: 1360px;
  --gutter: clamp(12px, 3vw, 28px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font: 500 16px/1.6 "Nunito", ui-rounded, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 520px at 0% -5%, #e6dcff 0%, transparent 60%),
    radial-gradient(900px 520px at 100% 0%, #d6ecff 0%, transparent 58%),
    radial-gradient(900px 700px at 50% 110%, #ffe6f3 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgb(124 58 237 / .09) 1.2px, transparent 1.3px);
  background-size: 24px 24px;
}
body.has-overlay { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-deep); }
:focus-visible { outline: 3px solid #a78bfa; outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.01em; }
p { margin: 0; }
button { font: inherit; }
main { display: block; min-height: 60vh; }
.icon { width: 20px; height: 20px; flex: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 800; }
.skip-link:focus { top: 12px; color: #fff; }
.shell { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 900px; }

/* ---------- premium header ---------- */
:root { --hdr-main: 74px; --hdr-cats: 52px; }
body { padding-top: calc(var(--hdr-main) + var(--hdr-cats)); }

.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-mark { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(150deg, #ffffff 0%, #efe8ff 100%); box-shadow: inset 0 0 0 1px rgb(124 58 237 / .14), 0 8px 18px -10px rgb(109 40 217 / .7); transition: transform .35s var(--ease); }
.brand-mark img { width: 34px; height: 34px; }
.brand:hover .brand-mark { transform: rotate(-7deg) scale(1.05); }
.brand-name { background: linear-gradient(120deg, #2e1065 0%, #6d28d9 52%, #c026d3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 27px; font-weight: 900; letter-spacing: -.035em; line-height: 1; }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; border-bottom: 1px solid rgb(124 58 237 / .1); background: rgb(255 255 255 / .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); transition: box-shadow .3s; }
.site-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #7c3aed 0%, #c026d3 30%, #f97316 55%, #eab308 72%, #06b6d4 100%); }
.site-header.is-scrolled { box-shadow: 0 14px 34px -22px rgb(43 29 102 / .55); }
.header-main { max-width: var(--max); height: var(--hdr-main); margin: 0 auto; padding: 3px var(--gutter) 0; display: flex; align-items: center; gap: 18px; transition: height .3s var(--ease); }
.site-header.is-scrolled .header-main { height: 62px; }

.main-nav { display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid rgb(124 58 237 / .1); border-radius: 999px; background: rgb(241 236 255 / .7); }
.main-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; color: var(--text-2); font-size: 15px; font-weight: 800; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.main-nav a:hover { color: var(--brand-deep); background: rgb(255 255 255 / .7); }
.main-nav a[aria-current="page"] { color: var(--brand-deep); background: #fff; box-shadow: 0 2px 8px -2px rgb(76 29 149 / .3); }
.main-nav .nav-season { color: color-mix(in oklab, var(--hue) 75%, black); }
.main-nav .nav-season .icon { width: 18px; height: 18px; color: var(--hue); stroke-width: 2.2; }

.search-trigger { display: flex; align-items: center; gap: 10px; width: min(360px, 28vw); height: 46px; margin-left: auto; padding: 0 8px 0 16px; border: 1px solid #e3dcf7; border-radius: 999px; background: linear-gradient(180deg, #fff 0%, #faf8ff 100%); color: #8f8aae; font-size: 15px; font-weight: 700; text-align: left; box-shadow: inset 0 1px 2px rgb(43 29 102 / .06); cursor: text; transition: border-color .2s, box-shadow .2s; }
.search-trigger:hover { border-color: #c4b5fd; box-shadow: 0 0 0 4px rgb(167 139 250 / .14); }
.search-trigger .icon { width: 19px; height: 19px; color: var(--brand); stroke-width: 2.3; }
.search-trigger span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-trigger kbd { padding: 2px 9px; border-width: 1px; box-shadow: 0 2px 0 var(--line-2); color: var(--muted); font-size: 12.5px; }
.btn-surprise { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--play); color: #fff; font-size: 15px; font-weight: 900; white-space: nowrap; box-shadow: var(--play-shadow), inset 0 1px 0 rgb(255 255 255 / .3); transition: transform .2s var(--ease), box-shadow .2s; }
.btn-surprise:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgb(109 40 217 / .7), inset 0 1px 0 rgb(255 255 255 / .3); }
.btn-surprise .icon { width: 21px; height: 21px; transition: transform .45s var(--ease); }
.btn-surprise:hover .icon { transform: rotate(200deg); }
.icon-btn { display: none; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border: 1px solid #e3dcf7; border-radius: 14px; background: #fff; color: var(--brand-deep); cursor: pointer; transition: background .2s; }
.icon-btn:hover { background: var(--tint); }
.icon-btn .icon { width: 21px; height: 21px; stroke-width: 2.3; }

.cat-bar { max-width: var(--max); max-height: var(--hdr-cats); margin: 0 auto; overflow: hidden; padding: 0 var(--gutter); transition: max-height .3s var(--ease), opacity .25s; }
.site-header.is-scrolled .cat-bar { max-height: 0; opacity: 0; }
.cat-bar-track { display: flex; gap: 8px; height: var(--hdr-cats); padding: 2px 2px 10px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.cat-bar-track::-webkit-scrollbar { display: none; }
.cat-pill { --hue: var(--brand); flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px 0 5px; border: 1px solid #ece6fb; border-radius: 999px; background: #fff; color: var(--text); font-size: 14.5px; font-weight: 800; box-shadow: 0 1px 0 rgb(43 29 102 / .04); transition: transform .2s var(--ease), border-color .2s, background .2s; }
.cat-pill:hover { color: var(--text); transform: translateY(-1px); border-color: color-mix(in oklab, var(--hue) 45%, white); background: color-mix(in oklab, var(--hue) 7%, white); }
.cat-pill .cat-ico { width: 30px; height: 30px; }
.cat-pill .cat-ico .icon { width: 16px; height: 16px; }
.cat-pill[aria-current="page"] { border-color: transparent; background: var(--hue); color: #fff; }
.cat-pill[aria-current="page"] .cat-ico { background: rgb(255 255 255 / .25); }

@media (max-width: 1180px) {
  .main-nav a { padding: 8px 12px; }
  .btn-surprise span { display: none; }
  .btn-surprise { width: 46px; padding: 0; justify-content: center; }
}
@media (max-width: 960px) {
  :root { --hdr-main: 64px; --hdr-cats: 50px; }
  .main-nav, .search-trigger { display: none; }
  .header-main { gap: 8px; }
  .btn-surprise { width: 44px; height: 44px; margin-left: auto; border-radius: 14px; }
  .icon-btn { display: inline-flex; }
  .site-header.is-scrolled .header-main { height: 58px; }
}
@media (max-width: 400px) {
  .brand-name { font-size: 23px; }
  .brand-mark { width: 40px; height: 40px; border-radius: 13px; }
  .brand-mark img { width: 30px; height: 30px; }
}

/* Search dialog */
.search-dialog { position: fixed; inset: 0; z-index: 90; display: grid; align-items: start; justify-items: center; padding: clamp(14px, 9vh, 90px) var(--gutter) 20px; background: rgb(30 20 70 / .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.search-dialog[hidden] { display: none; }
.search-dialog:not([hidden]) .search-panel { animation: pop .25s var(--ease); }
.search-panel { width: min(700px, 100%); max-height: calc(100vh - 2 * clamp(14px, 9vh, 90px)); overflow: auto; padding: 14px; border-radius: 26px; background: var(--surface); box-shadow: 0 30px 80px -20px rgb(30 20 70 / .6); }
.search { position: relative; }
.search-icon { position: absolute; left: 18px; top: 50%; width: 22px; height: 22px; color: var(--brand); transform: translateY(-50%); pointer-events: none; }
.search input, .filter-search input { width: 100%; height: 46px; padding: 0 18px 0 46px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 15.5px; font-weight: 700; box-shadow: inset 0 2px 4px rgb(43 29 102 / .05); transition: border-color .2s, box-shadow .2s; }
.search input { height: 58px; padding: 0 58px 0 52px; font-size: 18px; }
.search input::-webkit-search-cancel-button { display: none; }
.search input::placeholder, .filter-search input::placeholder { color: #9a95b8; font-weight: 600; }
.search input:focus, .filter-search input:focus { outline: none; border-color: #a78bfa; box-shadow: 0 0 0 4px rgb(167 139 250 / .25); }
.filter-search .search-icon { left: 16px; width: 19px; height: 19px; }
.search-close { position: absolute; right: 9px; top: 50%; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--brand-soft); color: var(--brand-deep); transform: translateY(-50%); cursor: pointer; }
.search-close .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.search-results { display: none; margin-top: 10px; }
.search-results.is-open { display: block; }
.search-results a { display: flex; align-items: center; gap: 12px; padding: 7px; border-radius: 14px; color: var(--text); }
.search-results a:hover, .search-results a[aria-selected="true"] { background: var(--tint); }
.search-results img { width: 80px; height: 50px; flex: none; border-radius: 10px; object-fit: cover; }
.search-results strong { display: block; font-size: 16px; font-weight: 900; }
.search-results small { color: var(--muted); font-size: 13px; font-weight: 700; }
.search-results .search-all { justify-content: center; margin-top: 4px; padding: 12px; border-radius: 14px; background: var(--surface-2); color: var(--brand); font-size: 14.5px; font-weight: 900; }
.search-empty { padding: 14px; color: var(--muted); font-size: 15px; font-weight: 700; }
.search-suggest { margin-top: 16px; padding: 0 4px 4px; }
.search-suggest p { margin-bottom: 10px; color: var(--muted); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.search-cats { display: flex; flex-wrap: wrap; gap: 8px; }

/* Slide-out menu */
.menu-backdrop { position: fixed; inset: 0; z-index: 80; background: rgb(30 20 70 / .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.menu-backdrop[hidden], .site-menu[hidden] { display: none; }
.site-menu { position: fixed; top: 0; left: 0; bottom: 0; z-index: 85; width: min(360px, 90vw); overflow-y: auto; padding: 16px 16px 24px; border-radius: 0 26px 26px 0; background: var(--surface); box-shadow: 30px 0 60px -30px rgb(30 20 70 / .55); animation: slide-in .28s var(--ease); }
.menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.site-menu .icon-btn { display: inline-flex; }
.menu-links, .menu-cats, .menu-foot { margin: 0; padding: 0; list-style: none; }
.menu-links { display: grid; gap: 4px; }
.menu-links a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; color: var(--text); font-size: 17px; font-weight: 900; }
.menu-links a:hover, .menu-links a[aria-current="page"] { background: var(--tint); color: var(--brand-deep); }
.menu-links .icon { width: 22px; height: 22px; color: var(--brand); stroke-width: 2.2; }
.menu-season { background: color-mix(in oklab, var(--hue) 14%, white); }
.menu-season .icon { color: color-mix(in oklab, var(--hue) 80%, black); }
.menu-title { margin: 18px 6px 10px; color: var(--muted); font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.menu-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.menu-cats a { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 14px; color: var(--text); font-size: 15px; font-weight: 800; }
.menu-cats a:hover, .menu-cats a[aria-current="page"] { background: color-mix(in oklab, var(--hue) 12%, white); }
.menu-cats .cat-ico { width: 32px; height: 32px; background: var(--hue); }
.menu-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; padding: 14px 6px 0; border-top: 1px solid var(--line); }
.menu-foot a { color: var(--muted); font-size: 14px; font-weight: 800; }
@keyframes slide-in { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { from { transform: translateY(-10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }


/* ---------- headings & intro ---------- */
.intro-strip { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 18px 2px 14px; }
.intro-strip h1 { font-size: clamp(21px, 2.4vw, 28px); font-weight: 900; }
.intro-strip h1 span { color: var(--muted); font-weight: 800; }
.intro-strip p { color: var(--muted); font-size: 15px; font-weight: 700; }
.block { padding-top: 34px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.sec-head h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(21px, 2.2vw, 26px); font-weight: 900; }
.sec-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--hue, var(--brand)); color: #fff; box-shadow: 0 8px 18px -8px var(--hue, var(--brand)); }
.sec-ico .icon { width: 21px; height: 21px; stroke-width: 2.1; }
.sec-link { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--brand-deep); font-size: 14.5px; font-weight: 800; white-space: nowrap; transition: border-color .2s, transform .2s var(--ease); }
.sec-link:hover { border-color: #c4b5fd; transform: translateX(2px); }
.sec-link .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.eyebrow { display: inline-flex; padding: 5px 14px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- mosaic ---------- */
.mosaic { container-type: inline-size; }
.mosaic-grid {
  --cols: 3;
  --gap: 10px;
  --row: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * .625);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  /* Tile rows are exactly one tile high (tiles take no height from their picture, below); a row holding an ad
     grows to the ad's height. */
  grid-auto-rows: minmax(var(--row), auto);
  grid-auto-flow: row dense;
  gap: var(--gap);
}
.mosaic-grid > .tile img { position: absolute; inset: 0; }
@container (min-width: 480px) { .mosaic-grid { --cols: 4; --gap: 12px; } }
@container (min-width: 700px) { .mosaic-grid { --cols: 5; } }
@container (min-width: 1000px) { .mosaic-grid { --cols: 7; --gap: 14px; } }

/* Trim to complete rows (big tiles come first in each list). */
@container (max-width: 479px) {
  .mosaic-hero .tile:nth-child(n+19) { display: none; }
  .mosaic-section .tile:nth-child(n+7) { display: none; }
  .mosaic-stage .tile:nth-child(n+13) { display: none; }
}
@container (min-width: 480px) and (max-width: 699px) {
  .mosaic-section .tile:nth-child(n+10) { display: none; }
  .mosaic-stage .tile:nth-child(n+13) { display: none; }
}
@container (min-width: 700px) and (max-width: 999px) {
  .mosaic-hero .tile:nth-child(n+24) { display: none; }
  .mosaic-section .tile:nth-child(n+13) { display: none; }
  .mosaic-stage .tile:nth-child(n+16) { display: none; }
}
@container (min-width: 1000px) {
  .mosaic-hero .tile:nth-child(n+24) { display: none; }
  .mosaic-stage .tile:nth-child(n+22) { display: none; }
}

/* Shelf: one scrolling row of larger tiles for smaller collections. */
.mosaic-strip .mosaic-grid {
  --cols: 2;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols));
  grid-auto-rows: auto;
  margin: -8px -4px -12px;
  padding: 8px 4px 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 4px;
  scrollbar-width: none;
}
.mosaic-strip .mosaic-grid::-webkit-scrollbar { display: none; }
@container (min-width: 480px) { .mosaic-strip .mosaic-grid { --cols: 3; } }
@container (min-width: 700px) { .mosaic-strip .mosaic-grid { --cols: 4; } }
@container (min-width: 1000px) { .mosaic-strip .mosaic-grid { --cols: 5; } }
.mosaic-strip .tile { aspect-ratio: 16 / 10; scroll-snap-align: start; }
.mosaic-strip .tile:hover, .mosaic-strip .tile:focus-visible { transform: scale(1.03); }
.mosaic-strip .tile-title { font-size: 16px; padding: 28px 12px 10px; }
.sec-tools { display: flex; align-items: center; gap: 8px; }
.strip-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--brand-deep); cursor: pointer; transition: border-color .2s, opacity .2s; }
.strip-btn:hover { border-color: #c4b5fd; }
.strip-btn:disabled { opacity: .35; cursor: default; }
.strip-btn .icon { width: 18px; height: 18px; stroke-width: 2.4; }
@media (hover: none) { .strip-btn { display: none; } }

.tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--surface); color: #fff; box-shadow: var(--tile-shadow); transform: translateZ(0); transition: transform .25s var(--ease), box-shadow .25s; }
.tile:hover, .tile:focus-visible { z-index: 2; color: #fff; transform: scale(1.06); box-shadow: var(--tile-shadow-hover); }
.tile-big { grid-column: span 2; grid-row: span 2; border-radius: calc(var(--radius) + 4px); }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; }
.tile video { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.tile video.is-playing { opacity: 1; }
.tile[hidden] { display: none !important; }
.tile-title { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 10px 8px; overflow: hidden; background: linear-gradient(180deg, transparent, rgb(20 12 50 / .82)); font-size: 13.5px; font-weight: 900; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 1px 2px rgb(0 0 0 / .4); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease); }
.tile-big .tile-title { padding: 34px 16px 12px; font-size: 19px; }
.tile:hover .tile-title, .tile:focus-visible .tile-title, .tile-labeled .tile-title { opacity: 1; transform: none; }
@media (hover: none) {
  .tile-title { display: none; }
  .tile-labeled .tile-title { display: block; }
}
/* Badges the owner sets on a game in the admin (Hot, New, Most liked): a pill in the top-left corner of its tiles
   and in the title bar of its page. */
.game-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 900; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 1px rgb(0 0 0 / .15); box-shadow: 0 2px 8px -2px rgb(20 12 50 / .45); }
.game-badge .icon { flex: none; width: 13px; height: 13px; stroke-width: 2.4; }
.game-badge.is-hot { background: linear-gradient(135deg, #ff8a00, #ff2d55); }
.game-badge.is-new { background: linear-gradient(135deg, #10b981, #0ea5e9); }
.game-badge.is-liked { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.game-badge-tile { position: absolute; top: 7px; left: 7px; z-index: 2; pointer-events: none; }
.tile-big .game-badge-tile { top: 11px; left: 11px; gap: 5px; padding: 4px 11px 4px 8px; font-size: 13px; }
.tile-big .game-badge-tile .icon { width: 15px; height: 15px; }
@container (max-width: 479px) {
  .game-badge-tile { top: 5px; left: 5px; gap: 3px; padding: 2px 6px 2px 4px; font-size: 9.5px; }
  .game-badge-tile .icon { width: 11px; height: 11px; }
}
.game-badge-page { margin-right: 4px; padding: 2px 8px 2px 5px; font-size: 10.5px; vertical-align: 1px; box-shadow: none; }
.game-badge-page .icon { width: 12px; height: 12px; }

/* ---------- category cards ---------- */
.cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cat-card { --hue: var(--brand); position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg, color-mix(in oklab, var(--hue) 82%, white) 0%, var(--hue) 100%); color: #fff; box-shadow: 0 10px 22px -14px var(--hue), inset 0 1px 0 rgb(255 255 255 / .35); transition: transform .25s var(--ease), box-shadow .25s; }
.cat-card::after { content: ""; position: absolute; right: -22px; top: -22px; width: 74px; height: 74px; border-radius: 50%; background: rgb(255 255 255 / .16); }
.cat-card:hover { color: #fff; transform: translateY(-3px) rotate(-1deg); box-shadow: 0 16px 28px -14px var(--hue); }
.cat-card-ico { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: rgb(255 255 255 / .24); }
.cat-card-ico .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.cat-card-name { font-size: 16px; font-weight: 900; line-height: 1.2; text-shadow: 0 1px 2px rgb(0 0 0 / .18); }
.cat-card-count { font-size: 12.5px; font-weight: 800; opacity: .9; }

.cat-chip { --hue: var(--brand); flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 800; transition: border-color .2s, transform .2s var(--ease); }
.cat-chip:hover { color: var(--text); transform: translateY(-2px); border-color: color-mix(in oklab, var(--hue) 50%, white); }
.cat-chip small { color: var(--muted); font-size: 13px; font-weight: 800; }
.cat-ico { --hue-i: var(--hue, var(--brand)); width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--hue-i); color: #fff; }
.cat-ico .icon { width: 18px; height: 18px; stroke-width: 2.2; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); grid-auto-flow: row dense; gap: 18px; }
.cat-tile { --hue: var(--brand); position: relative; display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--card-shadow); transition: transform .3s var(--ease), box-shadow .3s; }
.cat-tile:hover { color: var(--text); transform: translateY(-4px); box-shadow: 0 22px 40px -22px color-mix(in oklab, var(--hue) 80%, black); }
.cat-tile-media { position: relative; display: block; height: 140px; background: linear-gradient(135deg, color-mix(in oklab, var(--hue) 70%, white), var(--hue)); }
.cat-tile-media img { position: absolute; width: 50%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 3px solid #fff; border-radius: 12px; box-shadow: 0 10px 20px -8px rgb(0 0 0 / .45); transition: transform .45s var(--ease); }
.cat-tile-media img:nth-child(1) { left: 4%; top: 32px; transform: rotate(-8deg); }
.cat-tile-media img:nth-child(2) { left: 46%; top: 32px; transform: rotate(8deg); }
.cat-tile-media img:nth-child(3) { left: 25%; top: 14px; z-index: 2; }
.cat-tile:hover .cat-tile-media img:nth-child(1) { transform: translateX(-6px) rotate(-11deg); }
.cat-tile:hover .cat-tile-media img:nth-child(2) { transform: translateX(6px) rotate(11deg); }
.cat-tile:hover .cat-tile-media img:nth-child(3) { transform: translateY(-4px); }
.cat-tile-body { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 16px 16px; }
.cat-tile-body .cat-ico { grid-row: span 2; width: 42px; height: 42px; border-radius: 13px; }
.cat-tile-body strong { font-size: 17px; font-weight: 900; line-height: 1.25; }
.cat-tile-body small { color: var(--muted); font-size: 13.5px; font-weight: 800; }

/* ---------- ads ---------- */
/* Every ad is responsive and sits in a soft panel with a thin frame and its label; the sidebar panel holds a tall ad
   such as 300x600. Google often sends an ad smaller than the space and centres it inside its frame, where the page
   cannot measure it, so a filled panel turns see-through: no empty bands show beside the ad (the owner's choice).
   The <ins> keeps its reserved height, so the page does not jump; when Google returns no ad, the soft panel stays as
   free space (also the owner's choice). */
.ad { margin: 34px auto 0; padding: 10px 12px 12px; border-radius: var(--radius); background: rgb(255 255 255 / .55); text-align: center; }
.ad-label { display: block; margin-bottom: 8px; color: #a29dbf; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ad ins { width: 100%; min-height: 90px; }
.ad-banner { max-width: 970px; }
.ad-in-article { margin: 30px 0 0; }
.ad-in-article ins { min-height: 200px; }
.ad-rail { padding: 10px 10px 12px; }
.ad-rail ins { min-height: 600px; }
.ad-multiplex ins { min-height: 280px; }
@media (max-width: 700px) { .ad-banner ins { min-height: 250px; } }
@media (max-width: 1100px) { .ad-only-wide { display: none; } }
@media (min-width: 1101px) { .ad-only-narrow { display: none; } }
/* Ad rows inside game grids span the full width, and their row grows to the ad's height (a mosaic row is at least
   one tile high, see .mosaic-grid); dense packing fills the row above. */
.mosaic-grid > .ad, .cat-grid > .ad { grid-column: 1 / -1; display: grid; align-content: center; margin: 0; padding: 10px 12px 12px; border-radius: var(--radius); background: rgb(255 255 255 / .55); }
.mosaic-grid.is-filtered > .ad { display: none; }
.ad:has(> ins[data-ad-status="filled"]) { background: transparent; }

/* ---------- breadcrumbs & page heroes ---------- */
.crumbs { padding: 16px 2px 12px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; color: var(--muted); font-size: 14px; font-weight: 700; list-style: none; }
.crumbs li:not(:last-child)::after { content: "›"; margin-left: 6px; color: #b7b1d6; }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--brand); }
.page-hero { padding: 6px 2px 20px; }
.page-hero h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 900; }
.page-hero p { max-width: 46em; margin-top: 10px; color: var(--text-2); font-size: 18px; }
.page-hero.center { padding-top: 48px; text-align: center; }
.page-hero.center p { margin-inline: auto; }
.page-hero .eyebrow { margin-bottom: 14px; }

.cat-hero { --hue: var(--brand); position: relative; display: flex; align-items: flex-start; gap: 20px; margin-bottom: 20px; padding: clamp(20px, 3vw, 32px); overflow: hidden; border: 1px solid color-mix(in oklab, var(--hue) 22%, white); border-radius: var(--radius-lg); background: linear-gradient(120deg, color-mix(in oklab, var(--hue) 20%, white) 0%, #fff 72%); box-shadow: var(--card-shadow); }
.cat-hero::after { content: ""; position: absolute; top: -70px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: color-mix(in oklab, var(--hue) 14%, transparent); }
.cat-hero-ico { width: 62px; height: 62px; flex: none; display: grid; place-items: center; border-radius: 20px; background: var(--hue); color: #fff; box-shadow: 0 14px 28px -12px var(--hue); }
.cat-hero-ico .icon { width: 30px; height: 30px; stroke-width: 2.1; }
.cat-hero h1 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 900; }
.cat-hero p { position: relative; z-index: 1; max-width: 62em; margin-top: 10px; color: var(--text-2); }
.cat-hero .cat-meta { font-size: 15px; font-weight: 700; }
.cat-hero .cat-meta strong { color: var(--text); }

/* ---------- game page ---------- */
.game-page { container: gamepage / inline-size; }
.stage { display: block; }
.player { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 2px 0 rgb(43 29 102 / .05), 0 24px 50px -24px rgb(76 29 149 / .55); }
.player-stage { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 9; background: #1b1433; }
.player-bg { position: absolute; inset: -10%; width: 120%; max-width: none; height: 120%; object-fit: cover; filter: blur(26px) saturate(1.4) brightness(.62); }
.player-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgb(20 12 50 / .05), rgb(20 12 50 / .5)); pointer-events: none; }
.player-start { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; border: 0; background: none; color: #fff; cursor: pointer; }
.player-start[hidden] { display: none; }
.player-start-ring { position: relative; width: 98px; height: 98px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50%; background: var(--play); box-shadow: 0 16px 40px -10px rgb(109 40 217 / .85); transition: transform .3s var(--ease); }
.player-start-ring::before { content: ""; position: absolute; inset: -14px; border: 3px solid rgb(255 255 255 / .7); border-radius: 50%; animation: pulse 2s var(--ease) infinite; }
.player-start-ring .icon { width: 42px; height: 42px; margin-left: 6px; }
.player-start:hover .player-start-ring { transform: scale(1.08) rotate(-4deg); }
.player-start-label { padding: 8px 20px; border-radius: 999px; background: #fff; color: var(--brand-deep); font-size: 18px; font-weight: 900; box-shadow: 0 10px 24px -10px rgb(0 0 0 / .5); }
.player-stage iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #000; }
.player-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--surface); }
.player-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player-name img { width: 60px; height: 38px; flex: none; border-radius: 9px; object-fit: cover; }
.player-name div { display: grid; min-width: 0; }
.player-name h1 { overflow: hidden; font-size: clamp(18px, 2vw, 22px); font-weight: 900; white-space: nowrap; text-overflow: ellipsis; }
.player-name small { color: var(--muted); font-size: 13px; font-weight: 700; }
.player-tools { display: flex; flex: none; gap: 8px; }
.tool { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--brand-soft); color: var(--brand-deep); font-size: 14px; font-weight: 800; cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.tool:hover { background: #e2d8ff; transform: translateY(-1px); }
.tool[hidden] { display: none; }
.tool .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.player-tools { flex-wrap: wrap; justify-content: flex-end; }
/* Like / dislike (counts stay visible on phones, where tool labels are hidden) and the share menu. */
.vote { display: flex; gap: 6px; }
.tool-vote b { font-weight: 900; font-variant-numeric: tabular-nums; }
.tool-vote b:empty { display: none; }
.tool-vote[data-vote="up"][aria-pressed="true"] { background: #dcfce7; color: #15803d; }
.tool-vote[data-vote="down"][aria-pressed="true"] { background: #fee2e2; color: #b91c1c; }
.share { position: relative; }
/* The player clips what overflows it, so the menu opens upward over the game (downward in the phone overlay). */
.share-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 40; display: grid; min-width: 200px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 40px -18px rgb(30 20 70 / .5); }
.share-menu[hidden] { display: none; }
.player.is-overlay .share-menu { top: calc(100% + 8px); bottom: auto; }
.share-menu a, .share-menu button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 14.5px; font-weight: 800; text-align: left; cursor: pointer; }
.share-menu a:hover, .share-menu button:hover { background: var(--brand-soft); color: var(--brand-deep); }
.share-menu .icon { width: 18px; height: 18px; }
.player.is-overlay { position: fixed; inset: 0; z-index: 1000; border-radius: 0; background: #000; }
.player.is-overlay .player-stage { flex: 1; aspect-ratio: auto; }
.player.is-overlay .player-bar { order: -1; padding-top: max(10px, env(safe-area-inset-top)); }
.player:fullscreen { border-radius: 0; }
.player:fullscreen .player-stage { flex: 1; aspect-ratio: auto; }
@keyframes pulse { from { opacity: 1; transform: scale(.88); } to { opacity: 0; transform: scale(1.3); } }

.mosaic-stage { margin-top: 14px; }
@container gamepage (min-width: 1040px) {
  .stage {
    --cols: 9;
    --gap: 12px;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * .625);
    grid-auto-flow: row dense;
    gap: var(--gap);
  }
  .stage .player { grid-column: 2 / span 7; grid-row: 1 / span 7; }
  .stage .player-stage { flex: 1; aspect-ratio: auto; }
  .stage .mosaic-stage, .stage .mosaic-stage > .mosaic-grid { display: contents; }
  .stage .mosaic-stage .tile { display: block; }
}
/* Google asks for at least 150px between ads and a game. Below 1040px two or more tile rows separate them;
   on wider screens one tile row sits under the player, so the margin makes up the rest. */
.ad-stage { margin-top: 48px; }
@container gamepage (min-width: 1040px) { .ad-stage { margin-top: 72px; } }

.game-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-top: 26px; }
.game-copy { padding: clamp(20px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--card-shadow); }
.game-copy h2 { margin: 32px 0 12px; font-size: 22px; font-weight: 900; }
.game-tagline { color: var(--brand-deep); font-size: 19px; font-weight: 900; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; padding: 0; list-style: none; }
.tag { --hue: var(--brand); display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: color-mix(in oklab, var(--hue) 14%, white); color: color-mix(in oklab, var(--hue) 75%, black); font-size: 14px; font-weight: 800; }
.tag .icon { width: 16px; height: 16px; stroke-width: 2.2; }
a.tag:hover { background: color-mix(in oklab, var(--hue) 24%, white); color: color-mix(in oklab, var(--hue) 85%, black); }
.tag-plain { --hue: #64748b; }
.lead { color: var(--text); font-size: 18px; font-weight: 600; }
.steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 12px 16px 12px 58px; border-radius: 14px; background: var(--surface-2); color: var(--text-2); counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; top: 10px; left: 14px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: var(--play); color: #fff; font-size: 15px; font-weight: 900; box-shadow: 0 6px 12px -6px rgb(109 40 217 / .7); }
.controls { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.controls th { width: 38%; padding-right: 16px; font-weight: 500; text-align: left; vertical-align: top; }
.controls td { color: var(--text-2); }
kbd { display: inline-block; padding: 4px 10px; border: 2px solid var(--line-2); border-radius: 10px; background: var(--surface); box-shadow: 0 3px 0 var(--line-2); color: var(--text); font: inherit; font-size: 14px; font-weight: 900; }
.tips { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tips li { position: relative; padding-left: 30px; color: var(--text-2); }
.tips li::before { content: ""; position: absolute; top: .45em; left: 4px; width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, #f472b6, #8b5cf6); transform: rotate(45deg); }
.yt { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px; background: #000; box-shadow: var(--tile-shadow); }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt button { position: absolute; inset: 0; width: 78px; height: 56px; margin: auto; display: grid; place-items: center; border: 0; border-radius: 16px; background: #ef4444; color: #fff; box-shadow: 0 12px 26px -8px rgb(239 68 68 / .8); cursor: pointer; transition: transform .2s var(--ease); }
.yt button:hover { transform: scale(1.08); }
.yt button .icon { width: 28px; height: 28px; margin-left: 3px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.caption { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 14px; font-weight: 700; }
.caption .icon { width: 16px; height: 16px; }
.faq-list { display: grid; gap: 10px; }
.faq { border: 2px solid var(--line); border-radius: 16px; background: var(--surface); transition: border-color .2s; }
.faq[open] { border-color: #c4b5fd; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px; font-weight: 900; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq-chevron { width: 18px; height: 18px; color: var(--brand); stroke-width: 2.4; transition: transform .25s var(--ease); }
.faq[open] .faq-chevron { transform: rotate(90deg); }
.faq p { padding: 0 18px 15px; color: var(--text-2); }

.game-side { display: grid; gap: 18px; }
.game-side .ad { margin: 0; }
/* The sidebar runs the full height of the article so its ad can stay in view while the page scrolls, when the
   window is tall enough to show the whole 300x600 ad. */
@media (min-width: 1101px) {
  .game-side { align-self: stretch; align-content: start; }
}
@media (min-width: 1101px) and (min-height: 760px) {
  .game-side .ad-rail { position: sticky; top: 84px; }
}
.panel { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--card-shadow); }
.panel-title { margin-bottom: 10px; font-size: 18px; font-weight: 900; }
.facts { display: grid; margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px dashed var(--line-2); font-size: 14.5px; }
.facts div:first-child { padding-top: 2px; border-top: 0; }
.facts dt { color: var(--muted); font-weight: 700; }
.facts dd { margin: 0; font-weight: 800; text-align: right; }

.mini { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 14px; color: var(--text); transition: background .2s; }
.mini:hover { color: var(--text); background: var(--tint); }
.mini img { width: 88px; height: 55px; flex: none; border-radius: 10px; object-fit: cover; }
.mini span { display: grid; min-width: 0; }
.mini strong { overflow: hidden; font-size: 15px; font-weight: 900; white-space: nowrap; text-overflow: ellipsis; }
.mini small { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- all games filters ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 8px; }
.filter-search { position: relative; flex: 1 1 220px; max-width: 300px; }
.filter-chips { display: flex; flex: 1 1 360px; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.chip { --hue: var(--brand); flex: none; height: 38px; padding: 0 15px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 14px; font-weight: 800; cursor: pointer; transition: border-color .2s, background .2s; }
.chip:hover { border-color: color-mix(in oklab, var(--hue) 45%, white); }
.chip.is-active { border-color: var(--hue); background: var(--hue); color: #fff; }
.filter-sort select { height: 40px; padding: 0 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 800; }
.filter-count { margin: 0 2px 12px; color: var(--muted); font-size: 14px; font-weight: 800; }
.filter-empty { padding: 40px 0; color: var(--text-2); font-weight: 700; text-align: center; }

/* ---------- home about ---------- */
.about-block { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 34px; }
.about-copy { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--card-shadow); }
.about-copy h2 { font-size: 24px; font-weight: 900; }
.about-copy p { margin-top: 12px; color: var(--text-2); }

/* ---------- text pages ---------- */
.prose { margin-bottom: 20px; padding: clamp(22px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--card-shadow); }
.prose h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 900; }
.prose h2 { margin: 30px 0 8px; font-size: 21px; font-weight: 900; }
.prose p { margin-top: 12px; color: var(--text-2); }
.prose .lead { color: var(--text); }
.prose ul { padding-left: 20px; color: var(--text-2); }
.prose li { margin: 8px 0; }
.prose strong { color: var(--text); }
.updated { margin: 8px 0 18px; color: var(--muted); font-size: 14px; font-weight: 700; }

/* ---------- footer ---------- */
.site-footer { margin-top: 56px; border-top: 1px solid var(--line); background: rgb(255 255 255 / .75); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 44px var(--gutter) 26px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.footer-brand p { max-width: 34em; margin: 12px 0; color: var(--muted); font-size: 14.5px; font-weight: 600; }
.footer-mail { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; }
.footer-mail .icon { width: 18px; height: 18px; }
.footer-col h2 { margin: 6px 0 12px; color: var(--muted); font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.footer-col ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer-col a { color: var(--text-2); font-size: 14.5px; font-weight: 700; }
.footer-col a:hover { color: var(--brand); }
.footer-bottom { max-width: var(--max); margin: 0 auto; padding: 16px var(--gutter) 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .game-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .about-block { grid-template-columns: minmax(0, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .cat-cards { display: flex; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scrollbar-width: none; }
  .cat-cards::-webkit-scrollbar { display: none; }
  .cat-card { flex: none; min-width: 152px; }
}
@media (max-width: 640px) {
  .intro-strip h1 span { display: none; }
  .search-panel { padding: 10px; border-radius: 20px; }
  .search input { height: 52px; font-size: 16px; }
  .player-start-ring { width: 78px; height: 78px; }
  .player-start-ring .icon { width: 34px; height: 34px; }
  .player-start-label { font-size: 16px; }
  .tool { padding: 0 11px; }
  .tool span { display: none; }
  .player-name img, .player-name small { display: none; }
  .cat-hero { flex-direction: column; }
  .controls th { width: 46%; }
  .footer-inner { grid-template-columns: 1fr; }
  .sec-link { padding: 6px 12px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}