/* SlotSpecs phone layer. Desktop is untouched: every rule sits inside a phone/tablet media query. */

/* ---------- full-screen game player (all touch devices and narrow screens) ---------- */
html.ss-noscroll, html.ss-noscroll body { overflow: hidden !important; height: 100%; }
.demo-player.ss-demo-full {
  position: fixed !important; inset: 0 !important; z-index: 2147483000 !important;
  width: 100vw !important; height: 100vh !important; height: 100dvh !important;
  max-width: none !important; margin: 0 !important; border-radius: 0 !important;
  aspect-ratio: auto !important; background: #000 !important;
}
.demo-player.ss-demo-full iframe { width: 100% !important; height: 100% !important; }
.demo-player.ss-demo-full [data-stop] {
  position: fixed !important; z-index: 2147483001 !important;
  top: max(10px, env(safe-area-inset-top)) !important; right: max(10px, env(safe-area-inset-right)) !important;
  width: 40px !important; height: 40px !important; border-radius: 999px !important;
  background: rgba(0,0,0,.55) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.35) !important;
}
.ss-rotate-hint {
  position: fixed; z-index: 2147483001; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; pointer-events: none;
  background: rgba(0,0,0,.7); color: #fff; font: 600 13px/1.3 inherit; white-space: nowrap;
  transition: opacity .4s ease;
}
@media (orientation: landscape) { .ss-rotate-hint { opacity: 0; } }

@media (max-width: 767px) {
  /* ---------- header ---------- */
  .site-header .header-inner { gap: 6px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .site-header .site-logo b { font-size: 19px !important; }
  .site-header .site-logo svg { width: 30px !important; height: 30px !important; }
  .site-header [aria-label*="dark mode" i], .site-header [aria-label*="light mode" i] { width: 36px !important; height: 36px !important; min-width: 36px !important; }
  .site-header .header-inner > a.inline-flex, .site-header .header-inner > button[data-sr-signin]:last-child {
    height: 36px !important; padding: 0 12px !important; font-size: 14px !important; border-radius: 10px !important;
  }

  /* ---------- cookie bar: one slim strip ---------- */
  .cookie {
    left: 8px !important; right: 8px !important; bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important; transform: none !important; flex-wrap: nowrap !important;
    max-width: none !important; padding: 10px 12px !important; gap: 10px !important;
    display: flex !important; flex-direction: row !important; align-items: center !important; border-radius: 14px !important;
  }
  .cookie p { margin: 0 !important; font-size: 13px !important; line-height: 1.35 !important; flex: 1 1 auto; }
  .cookie p a { display: inline !important; padding: 0 !important; min-height: 0 !important; font-size: 13px !important; }
  .cookie { grid-template-columns: minmax(0,1fr) auto !important; }
  .cookie p { min-width: 0 !important; width: auto !important; flex: 1 1 0 !important; font-size: 12.5px !important; }
  .cookie > div button { height: 34px !important; min-height: 34px !important; padding: 0 11px !important; }
  .cookie > div { flex: 0 0 auto; display: flex !important; gap: 6px !important; flex-direction: row !important; width: auto !important; }
  .cookie > div > * { width: auto !important; flex: 0 0 auto !important; }
  .cookie button { height: 32px !important; min-height: 32px !important; padding: 0 12px !important; font-size: 13px !important; border-radius: 9px !important; }

  /* ---------- menu sheet ---------- */
  .mobile-menu { padding: 18px 18px 24px !important; }
  .mobile-menu details summary, .mobile-menu .ss-menu-direct { padding: 13px 2px !important; font-size: 17px !important; min-height: 0 !important; }
  .mobile-menu .ss-menu-direct { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line, #e2e4e8); font-weight: 600; color: inherit; text-decoration: none; }
  .mobile-menu .mobile-submenu a { padding: 10px 4px !important; font-size: 15px !important; }
  .mobile-menu .mobile-menu-actions { margin-top: 18px !important; gap: 8px !important; }
  .mobile-menu .mobile-menu-actions button, .mobile-menu .mobile-menu-actions a { height: 44px !important; font-size: 15px !important; }

  /* ---------- page rhythm ---------- */
  .ss-home > section, .ss-home > .ss-section { margin-top: 34px !important; padding-top: 0 !important; }
  .ss-head { margin-bottom: 14px !important; gap: 6px !important; }
  .ss-head h2 { font-size: 22px !important; line-height: 1.2 !important; }
  .ss-head p { font-size: 14.5px !important; line-height: 1.45 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ss-head-link { font-size: 14px !important; }

  /* ---------- hero ---------- */
  .ss-hero { padding-top: 12px !important; }
  html, body { overflow-x: clip; }
  .ss-hero-grid { grid-template-columns: minmax(0, 1fr) !important; width: calc(100% - 24px) !important; box-sizing: border-box; }
  .ss-hero-grid > *, .ss-hero-copy > *, .ss-pick > * { min-width: 0 !important; max-width: 100%; }
  .ss-hero-search { display: flex !important; gap: 8px; }
  .ss-hero-search input { min-width: 0 !important; flex: 1 1 auto; }
  .ss-hero-search button { flex: 0 0 auto; padding: 0 14px !important; }
  .ss-hero-grid { padding: 22px 18px !important; gap: 18px !important; border-radius: 18px !important; }
  .ss-hero-copy h1 { font-size: 31px !important; line-height: 1.08 !important; }
  .ss-hero-copy > p { font-size: 15px !important; line-height: 1.5 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ss-hero-copy form input { font-size: 16px !important; }
  .ss-hero-copy .ss-chips, .ss-hero-copy [class*="chips"] { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ss-hero-copy .ss-chips::-webkit-scrollbar, .ss-hero-copy [class*="chips"]::-webkit-scrollbar { display: none; }
  .ss-hero-copy .ss-chips a, .ss-hero-copy [class*="chips"] a { flex: 0 0 auto; }

  /* ---------- swipeable rows instead of tall stacks ---------- */
  .ss-home .ss-grid, .ss-home .ss-quicks, .ss-home .ss-studios, .ss-home .ss-mag-briefs, .ss-home .ss-mag-side,
  .ss-home ol.ss-guides, .ss-home .ss-ed-grid {
    display: flex !important; flex-wrap: nowrap !important; gap: 12px !important;
    overflow-x: auto !important; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-left: -16px !important; margin-right: -16px !important; padding: 2px 16px 14px !important;
    scroll-padding-left: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    grid-template-columns: none !important;
  }
  .ss-home .ss-grid::-webkit-scrollbar, .ss-home .ss-quicks::-webkit-scrollbar, .ss-home .ss-studios::-webkit-scrollbar,
  .ss-home .ss-mag-briefs::-webkit-scrollbar, .ss-home .ss-mag-side::-webkit-scrollbar, .ss-home ol.ss-guides::-webkit-scrollbar,
  .ss-home .ss-ed-grid::-webkit-scrollbar { display: none; }
  .ss-home .ss-grid > *, .ss-home .ss-quicks > *, .ss-home .ss-mag-briefs > *, .ss-home .ss-mag-side > *,
  .ss-home ol.ss-guides > * { flex: 0 0 74% !important; max-width: 74% !important; scroll-snap-align: start; }
  .ss-home .ss-studios > * { flex: 0 0 46% !important; max-width: 46% !important; scroll-snap-align: start; }
  .ss-home .ss-ed-grid > * { flex: 0 0 86% !important; max-width: 86% !important; scroll-snap-align: start; }
  .ss-home .ss-mag { display: block !important; }
  .ss-home .ss-mag-side { margin-top: 12px !important; }
  .ss-home .ss-mag-briefs { margin-top: 4px !important; }
  .ss-home .ss-quick { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; }
  .ss-home .ss-quick .ss-quick-media { width: 100% !important; height: 150px !important; min-height: 0 !important; }
  .ss-home .ss-quick .ss-quick-body { padding: 12px 14px 14px !important; }
  .ss-home .ss-quick-specs > div { padding: 7px 8px !important; }
  .ss-home .ss-quick-specs dd { font-size: 14px !important; }
  .ss-home .ss-quick-actions a, .ss-home .ss-quick-actions button { white-space: nowrap; font-size: 14px !important; padding: 0 8px !important; }
  .ss-home .ss-quick .ss-quick-body { height: auto !important; }
  .ss-home ol.ss-guides > li { margin: 0 !important; }
  .ss-home .ss-ed .ss-ed-bio { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .ss-swipe-hint { display: block; margin: -6px 0 0; font-size: 12.5px; color: var(--muted, #6b7280); }

  /* game cards inside a row: tighter */
  .ss-home .ss-card .ss-card-media { aspect-ratio: 16 / 10 !important; height: auto !important; }
  .ss-home .ss-card .ss-card-body { padding: 12px !important; gap: 10px !important; }
  .ss-home .ss-card h3 { font-size: 16px !important; }

  /* ---------- compare + ask band ---------- */
  .ss-compare-pick { gap: 10px !important; }
  .ss-compare-pick select { height: 46px !important; font-size: 16px !important; }
  .ss-compare .cmp-heads { gap: 10px !important; }
  .ss-compare .cmp-table td, .ss-compare .cmp-table th { padding: 10px 8px !important; font-size: 14px !important; }
  .ss-ask-band { padding: 22px 18px !important; gap: 16px !important; border-radius: 18px !important; }
  .ss-ask-band h2 { font-size: 22px !important; line-height: 1.2 !important; }
  .ss-ask-chips a { padding: 12px 14px !important; font-size: 14.5px !important; }

  /* ---------- game page ---------- */
  .player-shell { border-radius: 14px !important; }
  .player-launch { padding: 22px 16px !important; }
}

/* phones in landscape and small tablets: player still goes full screen via JS; keep rows swipeable up to 900px */
@media (min-width: 768px) and (max-width: 900px) and (pointer: coarse) {
  .ss-home .ss-quicks, .ss-home .ss-mag-briefs { gap: 14px !important; }
}