/* Shared layout and responsive styles for sloperidercity.com. */
.site-header { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; height: auto; min-height: 100px; gap: 22px; }
.header-left { display: flex; align-items: center; width: auto; min-width: 0; gap: 22px; }
.logo { flex-shrink: 0; }
.logo img { width: 270px; height: 88px; object-fit: contain; }
.hot-tags { flex: 1; justify-content: center; margin-left: 0; gap: 8px; }
.hot-tags .tag { white-space: nowrap; padding: 9px 12px; font-size: 16px; }
.header-right { width: 260px; min-width: 0; }
.search { width: 100%; flex: none; }
.search input { width: 100%; min-width: 0; padding-left: 15px; }
.taxonomy-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.browse-categories { padding: 24px; background: var(--panel); border-radius: 18px; }
.browse-categories h2 { margin: 0 0 12px; font-size: 22px; }
#comments .comment-checkbox a { color: var(--accent); text-decoration: underline; }
#comment-form button:disabled { opacity: .55; cursor: not-allowed; }
.game-subtitle p { margin: 0; }
.statistics-source { line-height: 1.55; }
.static-card.policy-copy { font-size: 19px; line-height: 1.75; }
.policy-copy h2 { margin-top: 34px; margin-bottom: 12px; }
.policy-copy h2:first-child { margin-top: 0; }
.policy-copy a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.policy-copy li { margin-bottom: 10px; }
.static-hero p { max-width: 78ch; }
.static-link { color: var(--accent); }
.taxonomy-game-card img { aspect-ratio: 1 / 1; object-fit: cover; }
.taxonomy-page .recommend-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.search-empty { grid-column: 1 / -1; }
.site-footer .footer-note { max-width: 55ch; }
.footer-logo img { object-fit: contain; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 1100px) {
  .taxonomy-page .recommend-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 700px) {
  .taxonomy-page .recommend-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .taxonomy-page .taxonomy-game-card > span { font-size: 12px; padding: 18px 7px 8px; }
}
@media (max-width: 360px) {
  .taxonomy-page .recommend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
  .site-header { grid-template-columns: minmax(0, 1fr) 230px; padding: 8px 20px; gap: 16px; }
  .header-left { gap: 16px; }
  .logo img { width: 220px; }
  .hot-tags .tag { padding: 8px 10px; font-size: 15px; }
  .header-right { width: 230px; }
}
@media (max-width: 900px) {
  .site-header { grid-template-columns: minmax(0, 1fr) 230px; padding: 8px 12px 12px; gap: 4px 12px; }
  .header-left { display: contents; }
  .logo { grid-column: 1; grid-row: 1; justify-self: start; }
  .logo img { height: 72px; width: 220px; }
  .header-right { grid-column: 2; grid-row: 1; width: 230px; }
  .hot-tags { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: flex-start; padding: 4px 0; }
}
@media (max-width: 600px) {
  .site-header { grid-template-columns: minmax(0, 1fr) minmax(150px, 48%); }
  .logo { width: 100%; }
  .logo img { height: auto; width: 100%; max-width: 220px; max-height: 68px; }
  .header-right { width: 100%; }
  .search input { padding: 10px 68px 10px 12px; font-size: 13px; }
  .search button { padding: 8px; font-size: 10px; }
  .hot-tags .tag { padding: 8px 10px; font-size: 14px; }
  .static-card.policy-copy { font-size: 18px; }
  .detail-player-bar > span { overflow-wrap: anywhere; min-width: 0; }
  .detail-player-bar > button { flex-shrink: 0; }
  .browse-categories { padding: 20px; }
}

/* Tag filters share the catalog without creating duplicate collection routes. */
.filter-bar { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 24px; }
.filter-bar button { font: 600 17px 'Rajdhani', sans-serif; border: 0; border-radius: 9px; padding: 10px 16px; background: var(--panel-2); color: var(--text); cursor: pointer; }
.filter-bar button:hover { background: var(--button-hover); }
.filter-bar button[aria-pressed="true"] { background: var(--highlight); color: var(--on-highlight); }
[hidden] { display: none !important; }
.stat dd { font-size: 17px; overflow-wrap: anywhere; }

/* A fixed landscape stays visible behind every page and long guide. */
body { isolation: isolate; background: var(--bg); }
.site-background { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; opacity: .32; pointer-events: none; }
body > header, body > main, body > footer { position: relative; z-index: 1; }

/* Keep the game recovery control usable on narrow screens. */
@media (max-width: 600px) {
  .player-toolbar { flex-wrap: wrap; }
  .player-toolbar > div { flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 360px) {
  .hot-tags { flex-wrap: wrap; overflow: visible; }
}