/* Shared catalogue styles; the article design supplies the brand, colours and masthead. */
.masthead__inner { grid-template-columns: 246px 1fr auto; }
.masthead__nav { gap: clamp(.7rem, 1.5vw, 1.4rem); }
.site-main { max-width: var(--max); margin: auto; border-inline: 1px solid var(--line); }
.site-intro, .site-section { padding: clamp(1.4rem, 4vw, 3.5rem); }
.site-intro { border-bottom: 1px solid var(--line); }
.site-intro h1, .home-copy h1 { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(3.6rem, 7vw, 7rem); line-height: .95; letter-spacing: -.035em; margin: .6rem 0 1.4rem; }
.site-intro p:not(.eyebrow) { max-width: 65ch; color: var(--muted); }
.home-hero { display: grid; grid-template-columns: 1.2fr 1fr; min-height: 550px; border-bottom: 1px solid var(--line); }
.home-copy { padding: clamp(1.6rem, 4vw, 3.5rem); align-self: center; }
.home-copy h1 { font-size: clamp(4rem, 6.9vw, 7.5rem); max-width: 9ch; }
.home-copy h1 em { display: block; color: var(--orange); font-style: normal; }
.home-copy > p:not(.eyebrow) { max-width: 48ch; color: #c5c5c5; }
.home-feature { padding: 2.5rem; background: radial-gradient(ellipse at 50% 35%, #3b231d, #101010 70%); border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; text-decoration: none; position: relative; }
.home-feature__label, .small-label { font: .72rem var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.home-feature img { width: 100%; height: 310px; object-fit: contain; margin: 1rem 0 1.4rem; filter: drop-shadow(0 18px 22px #0008); }
.home-feature strong { display: block; font-family: var(--display); font-weight: 400; font-size: 2.4rem; line-height: 1.05; }
.home-feature__detail { color: var(--muted); font-size: .9rem; margin-top: .6rem; max-width: 44ch; }
.home-feature:hover strong, .game-row:hover h3 { color: var(--orange); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.2rem; min-height: 48px; border: 1px solid var(--line-strong); text-decoration: none; font: .85rem var(--mono); color: var(--paper); background: var(--surface); }
.button--primary { background: var(--orange); color: var(--ink); border-color: var(--orange); font-weight: 700; }
.button:hover { border-color: var(--paper); }
.catalog-stats { display: flex; flex-wrap: wrap; gap: 1.8rem; padding: 1.1rem clamp(1.4rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line); font: .78rem var(--mono); color: var(--muted); }
.catalog-stats strong { color: var(--paper); font-size: 1.05rem; margin-right: .4rem; }
.section-heading--site { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.7rem; }
.section-heading--site h2 { margin: .25rem 0 0; font: 400 clamp(2rem, 4vw, 3.2rem)/1 var(--display); text-transform: uppercase; }
.section-heading--site > a { font: .8rem var(--mono); white-space: nowrap; }
.platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.platform-tile { padding: 1.8rem; text-decoration: none; border: 1px solid var(--line-strong); background: var(--surface); display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: end; }
.platform-tile h2, .platform-tile h3 { font: 400 clamp(2.5rem, 5vw, 4.4rem)/1 var(--display); margin: .6rem 0; text-transform: uppercase; }
.platform-tile p { max-width: 35ch; margin: 0; color: var(--muted); font-size: .92rem; }
.platform-tile__count { font: .75rem var(--mono); color: var(--orange); }
.platform-tile:hover { border-color: var(--orange); background: #1c1511; }
.platform-tile--vb { box-shadow: inset 4px 0 #ce3333; }
.platform-tile--sg { box-shadow: inset 4px 0 var(--orange); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.feature-card { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--line); background: var(--surface); }
.feature-card__visual { display: flex; align-items: center; justify-content: center; height: 230px; padding: 1.3rem; background: #191919; }
.feature-card img { height: 100%; width: 100%; object-fit: contain; }
.feature-card__copy { padding: 1.2rem; }
.feature-card h3 { font: 400 1.65rem/1.08 var(--display); margin: .65rem 0; }
.feature-card p { font-size: .83rem; color: var(--muted); line-height: 1.5; margin: 0; }
.feature-card:hover { border-color: var(--orange); }
.genre-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.genre-tile { text-decoration: none; padding: 1.2rem; border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.genre-tile span:last-child { font: .75rem var(--mono); color: var(--orange); }
.genre-tile:hover { border-color: var(--orange); }
.editorial-note { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); gap: 2rem; padding: 2.2rem clamp(1.4rem, 4vw, 3.5rem); background: var(--surface); }
.editorial-note h2 { font: 400 2rem/1.1 var(--display); margin: 0; text-transform: uppercase; }
.editorial-note p { margin: 0; color: var(--muted); font-size: .9rem; }
.catalog-toolbar { display: grid; grid-template-columns: minmax(220px, 2fr) 1fr 1fr auto; gap: .9rem; align-items: end; padding: 1.2rem; margin-bottom: 1.4rem; border: 1px solid var(--line); background: var(--surface); }
.catalog-toolbar label { display: grid; gap: .45rem; font: .75rem var(--mono); color: var(--muted); }
.catalog-toolbar input, .catalog-toolbar select { width: 100%; min-height: 46px; border: 1px solid var(--line-strong); background: #080808; color: var(--paper); font: 1rem var(--sans); padding: .6rem .7rem; border-radius: 0; }
.catalog-toolbar .button { min-height: 46px; cursor: pointer; }
.catalog-count { color: var(--muted); font: .8rem var(--mono); }
.game-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.game-row { padding: 1.2rem 0; border-top: 1px solid var(--line); text-decoration: none; display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; min-width: 0; }
.game-row h3 { margin: 0; font: 400 1.65rem/1.1 var(--display); overflow-wrap: anywhere; }
.game-row p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.game-row__platform { color: var(--orange); font: .68rem/1.4 var(--mono); text-align: right; }
.game-row__genre { grid-column: 1 / -1; font: .68rem var(--mono); color: #b0b0b0; }
.catalog-empty { padding: 2rem; border: 1px solid var(--line); }
.breadcrumb { color: var(--muted); font: .73rem/1.6 var(--mono); padding: 1.1rem clamp(1.4rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: '/'; margin-right: .6rem; color: var(--orange); }
.breadcrumb a { color: inherit; }
.article > .breadcrumb { padding: 1rem 2.2rem; }
.article-related { padding: 2.2rem; border-top: 1px solid var(--line); }
.article-related h2 { font: 400 2rem var(--display); text-transform: uppercase; margin: 0 0 1rem; }
.article-related__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.article-related__links a { padding: 1.1rem; border: 1px solid var(--line); background: var(--surface); text-decoration: none; }
.article-related__links strong { display: block; font: 400 1.4rem/1.1 var(--display); }
.article-related__links span { display: block; color: var(--muted); font: .68rem var(--mono); margin-top: .7rem; }
.article-related__links a:hover { border-color: var(--orange); }
.info-content { max-width: 850px; padding: 2.5rem clamp(1.4rem, 4vw, 3.5rem) 4rem; }
.info-content h2 { margin-top: 2rem; font: 400 2rem/1.15 var(--display); }
.info-content p, .info-content li { color: #c2c2c2; }
.info-content a { color: var(--paper); text-underline-offset: .18em; overflow-wrap: anywhere; }
.contact-address { display: inline-block; color: var(--orange) !important; font-size: clamp(1.1rem, 4vw, 1.6rem); margin: .8rem 0; }
.guide-content { max-width: 960px; margin-inline: auto; padding: clamp(1.4rem, 4vw, 3.5rem); }
.guide-content h2 { margin: 2.4rem 0 1rem; font: 400 clamp(2rem, 4vw, 2.8rem)/1.12 var(--display); }
.guide-content h3 { font: 400 1.8rem/1.15 var(--display); margin: 1.4rem 0 .7rem; }
.guide-content p, .guide-content li { color: #c2c2c2; }
.guide-content li { margin-bottom: 1rem; }
.guide-content a { text-underline-offset: .18em; overflow-wrap: anywhere; }
.guide-content section { scroll-margin-top: 2rem; }
.guide-content .guide-meta, .guide-content .guide-source { font: .78rem/1.65 var(--mono); color: var(--muted); }
.guide-toc { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; padding: 1.2rem; margin: 1.8rem 0; border: 1px solid var(--line); background: var(--surface); font: .8rem/1.6 var(--mono); }
.guide-table-scroll { overflow-x: auto; }
.guide-table { min-width: 510px; margin: .3rem 0 1rem; }
.guide-table caption { text-align: left; padding: .6rem 0; color: var(--muted); font: .78rem/1.6 var(--mono); }
.guide-pick { border-top: 1px solid var(--line); padding: 1.8rem 0; }
.guide-pick h3 { margin-top: .4rem; font-size: 2.3rem; }
.guide-pick .eyebrow { color: var(--orange); margin: 0; }
.guide-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem clamp(1.4rem, 4vw, 3.5rem); background: var(--surface); border-block: 1px solid var(--line); }
.guide-banner h2 { font: 400 1.9rem/1.15 var(--display); margin: .4rem 0; }
.guide-banner p { color: var(--muted); font-size: .9rem; margin: 0; }
.article > .guide-banner { padding-inline: 2.2rem; }
.guide-method { padding: 1.4rem; margin-top: 2.5rem; background: var(--surface); border: 1px solid var(--line); }
.guide-method h2 { margin-top: 0; font-size: 1.7rem; }
.guide-method p { font-size: .9rem; }
@media (max-width: 860px) { .article > .guide-banner { padding: 1.3rem; } }
[hidden] { display: none !important; }
@media (max-width: 1180px) { .masthead__inner { grid-template-columns: 210px 1fr auto; } .feature-grid { grid-template-columns: repeat(2, 1fr); } .catalog-toolbar { grid-template-columns: 2fr 1fr; } }
@media (max-width: 860px) { .masthead__inner { grid-template-columns: 1fr auto; } .site-main { border: 0; } .home-hero { grid-template-columns: 1fr 1fr; min-height: auto; } .home-copy h1 { font-size: clamp(3.8rem, 9vw, 5.6rem); } .home-feature { padding: 1.5rem; } .home-feature img { height: 235px; } .home-feature strong { font-size: 1.9rem; } .platform-tile { grid-template-columns: 1fr; } .genre-grid { grid-template-columns: repeat(2, 1fr); } .article-related__links { grid-template-columns: 1fr; } .article > .breadcrumb, .article-related { padding: 1.3rem; } }
@media (max-width: 600px) { .home-hero { grid-template-columns: 1fr; } .home-copy { padding: 2rem 1.3rem; } .home-copy h1 { font-size: clamp(4rem, 14vw, 5.6rem); max-width: 11ch; } .home-feature { border-left: 0; border-top: 1px solid var(--line); } .home-feature img { height: 240px; } .platform-grid, .game-list, .editorial-note { grid-template-columns: 1fr; } .feature-grid { gap: .7rem; } .feature-card__visual { height: 180px; padding: .8rem; } .feature-card__copy { padding: .9rem; } .feature-card h3 { font-size: 1.4rem; } .section-heading--site { flex-wrap: wrap; align-items: start; } .catalog-toolbar { grid-template-columns: 1fr; } .genre-grid { grid-template-columns: 1fr; } .catalog-stats { gap: .8rem 1.2rem; } .editorial-note { gap: 1rem; } .platform-tile { padding: 1.4rem; } }
/* Shrinking columns prevents long headings from widening the mobile viewport. */
.home-copy, .home-feature { min-width: 0; }
.home-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.site-intro h1 { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html:not(.has-js) .masthead__nav { display: flex; position: static; grid-column: 1 / -1; flex-wrap: wrap; padding: .7rem 0; gap: .2rem .7rem; }
  html:not(.has-js) .menu-button { display: none; }
}
@media (max-width: 600px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); }
  .site-intro h1 { font-size: clamp(2rem, 9vw, 3.8rem); }
}

/* Analytics is optional; both choices have the same prominence. */
.cookie-panel { position: fixed; z-index: 150; right: 1.2rem; bottom: 1.2rem; width: min(760px, calc(100% - 2.4rem)); padding: 1.5rem; border: 1px solid var(--line-strong); background: #121212; box-shadow: 0 12px 50px #000b; }
.cookie-panel h2 { font: 400 1.8rem/1.1 var(--display); text-transform: uppercase; margin: 0 0 .7rem; }
.cookie-panel p { font-size: .93rem; line-height: 1.55; margin: 0 0 .8rem; color: #c6c6c6; max-width: 68ch; }
.cookie-panel__links { display: flex; flex-wrap: wrap; gap: 1rem; font: .75rem var(--mono); margin-bottom: 1.2rem; }
.cookie-panel__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.cookie-panel__actions .button { cursor: pointer; color: var(--paper); background: #222; border-color: #aaa; font-weight: 700; min-height: 48px; padding: .8rem; }
.cookie-panel__actions .button:hover { border-color: var(--orange); }
.cookie-settings-link { appearance: none; background: transparent; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.cookie-details { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: .9rem; }
.cookie-details th, .cookie-details td { border: 1px solid var(--line); padding: .8rem; text-align: left; vertical-align: top; }
.cookie-details th { color: var(--paper); }
.cookie-details td { color: #c2c2c2; }
.cookie-table-scroll { overflow-x: auto; }
@media (max-width: 600px) {
  .cookie-panel { right: .75rem; bottom: .75rem; width: calc(100% - 1.5rem); padding: 1.1rem; max-height: calc(100dvh - 1.5rem); overflow-y: auto; }
  .cookie-panel h2 { font-size: 1.5rem; }
  .cookie-panel__actions { grid-template-columns: 1fr; gap: .6rem; }
  .cookie-panel__actions .button { width: 100%; }
}