/* Main catalogue only: shared board-game styles remain in site.css. */
.home-page { background:radial-gradient(ellipse at 50% 0,#12272b55,transparent 65%),#090f15; }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.home-page .topbar { min-height:96px; border-color:#243039; }
.home-page .brand-mark { width:44px; height:44px; }
.home-page main { padding-top:26px; }
.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.catalog-toolbar[hidden] { display:none; }
.catalog-filters { display:flex; gap:10px; }
.catalog-filter,.catalog-sort select { min-height:48px; padding:11px 18px; border:1px solid #28343e; border-radius:12px; background:#111b23; color:#bfccd3; cursor:pointer; }
.catalog-filter { min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-size:14px; font-weight:650; transition:background .2s,border-color .2s; }
.catalog-filter span { min-width:0; overflow-wrap:anywhere; }
.catalog-filter svg,.catalog-filter img { width:21px; height:21px; flex-shrink:0; }
.catalog-filter:hover { background:#1c2b33; border-color:#5a7b80; }
.catalog-filter[aria-pressed="true"] { color:#d5fff2; border-color:#68cfb2; background:linear-gradient(120deg,#20463e,#132c2a); box-shadow:inset 0 0 16px #79e1c50a; }
.catalog-sort select { min-width:156px; padding-right:32px; font-size:14px; }
.home-page .games-grid { grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:18px; }
.home-page .game-card { display:flex; flex-direction:column; border-color:#32414a; background:linear-gradient(150deg,#14212b,#0e1820); box-shadow:0 12px 28px #0002; }
.home-page .game-card[hidden] { display:none; }
.home-page .game-card:hover { border-color:#72b5a6; transform:translateY(-3px); }
.home-page .game-card--upcoming { border-color:#575991; background:linear-gradient(145deg,#25233e,#131b28 80%); }
.home-page .game-card--upcoming:hover { border-color:#a29cf4; }
.home-page .game-media { isolation:isolate; }
.home-page .game-image { aspect-ratio:16/9; object-fit:contain; }
.game-cover-link { display:block; }
.game-cover-link:focus-visible { outline-offset:-4px; }
.media-badges { position:absolute; inset:12px 12px auto; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; z-index:2; pointer-events:none; }
.home-page .status { gap:7px; min-height:34px; padding:6px 10px; border:1px solid #a3a0ff99; border-radius:9px; background:#3b3597ed; box-shadow:0 3px 12px #0004; color:#f0edff; font-size:12px; backdrop-filter:blur(10px); }
.home-page .status-dot { width:12px; height:12px; border:1.5px solid currentColor; background:transparent; position:relative; }
.home-page .status:not(.status--released):not(.status--experimental) .status-dot::after { content:""; position:absolute; left:4px; top:1px; width:3px; height:5px; border-left:1px solid; border-bottom:1px solid; }
.home-page .status--released { color:#b4ffe8; border-color:#68cfb288; background:#123d35ed; }
.home-page .status--released .status-dot { width:8px; height:8px; border:0; background:#6de8bd; box-shadow:0 0 10px #6de8bd55; }
.home-page .status--experimental { color:#ffe3ff; border-color:#d79fdf99; background:#492749ed; }
.home-page .status--experimental .status-dot { width:8px; height:8px; border:0; border-radius:2px; background:#e7adeb; box-shadow:0 0 10px #e7adeb55; transform:rotate(45deg); }
.platform-links { display:flex; gap:5px; pointer-events:auto; }
.platform-link { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid #d6eeff26; border-radius:10px; background:#08131ee8; color:#edf6ff; box-shadow:0 3px 12px #0003; }
.platform-link:hover { background:#23414d; border-color:#b5dfda; }
.platform-link svg,.platform-link img { width:23px; height:23px; }
.home-page .gallery-controls { padding:10px 16px 0; border:0; background:transparent; }
.home-page .gallery-thumbs { width:100%; gap:8px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#43525c transparent; }
.home-page .image-choice { flex-shrink:0; width:calc((100% - 16px)/3); height:auto; aspect-ratio:16/9; border-radius:7px; border-color:#43525c; opacity:.5; }
.home-page .image-choice[aria-pressed="true"] { border-color:var(--teal); opacity:1; box-shadow:0 0 9px #79e1c520; }
.home-page .image-choice:hover { opacity:1; }
.home-page .gallery-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.home-page .gallery-label.has-error { position:static; width:auto; height:auto; clip-path:none; color:#ffd1c7; text-align:left; }
.home-page .gallery-controls:has(.has-error) { flex-wrap:wrap; }
.home-page .game-copy { display:flex; flex:1; flex-direction:column; padding:16px 18px 18px; }
.home-page h2 { font-size:24px; letter-spacing:-.035em; }
.game-genre { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:8px 0 20px; color:#acbcc6; font-size:12px; letter-spacing:.025em; line-height:1.5; }
.home-page .card-meta { margin: auto 0 0; min-height:44px; }
.availability-badge { position:absolute; left:10px; bottom:10px; z-index:2; display:inline-flex; align-items:center; gap:7px; max-width:calc(100% - 20px); padding:7px 10px; border:1px solid #75d4b980; border-radius:7px; background:#133b32f5; color:#bcffe7; box-shadow:0 2px 8px #0003; font-size:12px; font-weight:650; line-height:1.5; overflow-wrap:anywhere; pointer-events:none; }
.availability-badge-dot { width:6px; height:6px; flex-shrink:0; border-radius:50%; background:currentColor; }
.home-page .reactions { margin:0; width:100%; }
.home-page .reaction-options { gap:10px; }
.home-page .reaction { flex-direction:row; gap:8px; min-width:68px; padding:9px 12px; border:1px solid #67cfb12b; border-radius:12px; background:#23534626; }
.home-page .reaction[data-reaction="not-sure"] { border-color:#e3bd5f29; background:#6b542317; }
.home-page .reaction[data-reaction="not-for-me"] { border-color:#e6929225; background:#673e3917; }
.home-page .reaction:hover:not(:disabled) { background:#2d4e50; }
.home-page .reaction[aria-pressed="true"] { border-color:#79e1c5; background:#235b4c; box-shadow:0 0 0 1px #79e1c526; }
.home-page .reaction-count { font-size:14px; }
.home-page .reaction-emoji { font-size:20px; }
.home-page .has-error .reaction-feedback { position:static; width:auto; margin-top:10px; box-shadow:none; }
.gallery-navigation { position:absolute; inset:50% 10px auto; display:flex; justify-content:space-between; pointer-events:none; opacity:0; transition:opacity .2s; }
.game-media:hover .gallery-navigation,.game-media:focus-within .gallery-navigation { opacity:1; }
.gallery-step,.gallery-play { display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid #e2f0ff66; border-radius:50%; background:#08131ddd; color:white; cursor:pointer; pointer-events:auto; }
.gallery-step { font-size:25px; }
.gallery-play { position:absolute; right:12px; bottom:10px; z-index:2; opacity:0; }
.gallery-play[hidden] { display:none; }
.game-media:hover .gallery-play,.game-media:focus-within .gallery-play { opacity:1; }
.home-page .browse-bar { margin:30px 0 0; padding-top:24px; border-top:1px solid #27333d; }
.home-page .language-bar { font-size:12px; }
.site-footer { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 24px; padding-block:12px calc(128px + env(safe-area-inset-bottom)); color:var(--muted); }
.site-actions { position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); z-index:100; display:flex; flex-direction:column; align-items:stretch; gap:8px; max-width:calc(100vw - max(16px,env(safe-area-inset-left)) - max(16px,env(safe-area-inset-right))); }
.site-action-links { display:flex; flex-direction:column; gap:8px; max-width:100%; }
.site-action-links[hidden] { display:none; }
.site-actions-toggle { display:none; }
.site-actions .feedback-site-link { position:static; justify-content:center; }
.support-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; max-width:100%; min-height:44px; padding:9px 14px; border:1px solid #3c655b; border-radius:12px; background:#142b27; color:#c4f5e6; font-size:13px; font-weight:650; overflow-wrap:anywhere; transition:background .2s,border-color .2s; }
.support-link svg { flex-shrink:0; }
.support-link span { min-width:0; }
.support-link:hover { border-color:var(--teal); background:#20443b; }
@media (max-width:680px), (max-width:1000px) and (pointer:coarse) {
  .site-footer { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  .site-actions.site-actions--ready { align-items:flex-end; gap:12px; }
  .site-actions--ready .site-action-links { width:160px; }
  .site-actions--ready .feedback-site-link,.site-actions--ready .support-link { min-height:44px; border-radius:22px; box-shadow:0 3px 12px #0004; }
  .site-actions--ready .site-actions-toggle { order:1; display:grid; place-items:center; flex-shrink:0; width:52px; height:52px; padding:0; border:1px solid #5f9b86; border-radius:50%; background:#254735; color:#e5fbf0; box-shadow:0 4px 16px #0005; cursor:pointer; }
  .site-actions-toggle:hover { background:#315b44; }
  .site-actions-toggle:focus-visible { outline:3px solid #abc6a1; outline-offset:3px; }
  .site-actions-toggle .site-actions-close,.site-actions.is-open .site-actions-more { display:none; }
  .site-actions.is-open .site-actions-close { display:block; }
}
.site-copyright { color:#c2d1d8; font-size:13px; }
.home-page .steam-attribution { max-width:540px; padding:0; font-size:11px; }
.steam-attribution summary { min-height:44px; padding-block:14px; cursor:pointer; }
.steam-attribution summary:hover { color:var(--ink); }
.steam-attribution[open] small { display:block; padding:8px 12px; border-left:2px solid var(--line); line-height:1.7; }
@media (hover:none) { .gallery-navigation { opacity:1; } .gallery-play { display:none; } }
@media (min-width:1001px) {
  .home-page .game-copy { padding:12px 14px 14px; }
  .home-page h2 { font-size:20px; }
  .home-page .game-genre { margin:7px 0 14px; }
  .home-page .gallery-controls { padding:8px 12px 0; }
  .home-page .gallery-thumbs { gap:6px; }
  .home-page .image-choice { width:calc((100% - 12px)/3); }
  .home-page .media-badges { inset:8px 8px auto; }
  .home-page .status { font-size:11px; padding:5px 7px; }
  .home-page .reaction-options { gap:6px; }
  .home-page .reaction { flex:1; min-width:0; gap:4px; padding:8px 5px; }
  .home-page .reaction-emoji { font-size:18px; }
  .home-page .reaction-count { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
}
@media (max-width:1000px) { .home-page .games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
@media (max-width:680px) {
  .home-page .topbar { min-height:76px; }
  .home-page .brand-mark { width:36px; height:36px; }
  .catalog-toolbar { align-items:stretch; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
  .catalog-filters { width:100%; gap:7px; }
  .catalog-filter { flex:1; padding:10px 8px; gap:6px; font-size:12px; }
  .catalog-filter svg,.catalog-filter img { width:18px; height:18px; }
  .catalog-sort { margin-left:auto; }
  .catalog-sort select { min-height:44px; padding:8px 28px 8px 12px; }
  .home-page .games-grid { gap:18px; }
  .home-page .game-copy { padding:14px; }
  .home-page h2 { font-size:21px; }
  .home-page .reaction-options { gap:7px; }
  .home-page .reaction { min-width:44px; padding:8px; }
  .home-page .gallery-controls { padding:9px 10px 0; }
  .media-badges { inset:8px 8px auto; }
  .home-page .status { font-size:11px; padding:5px 7px; }
}
@media (max-width:540px) {
  .home-page .games-grid { grid-template-columns:1fr; }
  .home-page .game-copy { padding:16px 18px 18px; }
  .home-page .reaction { min-width:70px; }
  .home-page .gallery-controls { padding-inline:16px; }
  .home-page .language-bar { width:100%; margin-top:6px; }
}