:root {
  --ps-blue: #F0A500;
  --ps-dark-blue: #C47F00;
  --ps-light-blue: #FFD700;
  --bg-dark: #0a0a0a;
  --bg-card: #141414;
  --bg-card-hover: #1e1e1e;
  --text-primary: #ffffff;
  --text-secondary: #aaaaaa;
  --accent: #F0A500;
  --success: #2ecc71;
  --danger: #e74c3c;
  --warning: #F0A500;
  --border: #222222;
}

/* ── LIGHT MODE ── */
body.light-mode {
  --bg-dark: #f0f2f5;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f9fa;
  --text-primary: #111111;
  --text-secondary: #555555;
  --border: #dddddd;
}
body.light-mode nav { background: #fff; border-bottom: 1px solid #ddd; }
body.light-mode .admin-container { background: #f0f2f5; }
body.light-mode .admin-header { background: #fff; border-color: #ddd; }
body.light-mode .admin-tabs { background: #fff; border-color: #ddd; }
body.light-mode .admin-tab { color: #555; }
body.light-mode .admin-tab:hover { background: #f0f2f5; color: #111; }
body.light-mode .admin-tab.active { background: #f0f2f5; color: #111; border-color: var(--ps-blue); }
body.light-mode .tab-panel { background: #f0f2f5; }
body.light-mode .form-card { background: #fff; border-color: #ddd; }
body.light-mode .form-card h2 { color: #111; border-color: #ddd; }
body.light-mode .form-group label { color: #444; }
body.light-mode .form-group input,
body.light-mode .form-group select,
body.light-mode .form-group textarea { background: #f8f9fa; border-color: #ccc; color: #111; }
body.light-mode .form-group input:focus,
body.light-mode .form-group select:focus,
body.light-mode .form-group textarea:focus { border-color: var(--ps-blue); background: #fff; }
body.light-mode .ss-input { background: #f8f9fa; border-color: #ccc; color: #111; }
body.light-mode .ss-input:focus { border-color: var(--ps-blue); background: #fff; }
body.light-mode .ss-panel { background: #fff; border-color: #ddd; }
body.light-mode .ss-group { color: #888; }
body.light-mode .ss-option { color: #222; }
body.light-mode .ss-option:hover, body.light-mode .ss-option.hover { background: #f0f2f5; }
body.light-mode .table-card { background: #fff; border-color: #ddd; }
body.light-mode .table-card h2 { color: #111; border-color: #eee; }
body.light-mode .games-table th { background: #f0f2f5; color: #444; border-color: #eee; }
body.light-mode .games-table td { border-color: #f0f0f0; color: #222; }
body.light-mode .games-table tr:hover td { background: #fafafa; }
body.light-mode .btn-outline { border-color: #ccc; color: #444; }
body.light-mode .btn-outline:hover { background: #f0f2f5; }
body.light-mode #mongoIndicator { background: #f8f9fa; border-color: #ddd; }
body.light-mode .add-choice-grid .add-choice-card { background: #f8f9fa; border-color: #ddd; }
body.light-mode .add-choice-card:hover { background: #fff; border-color: var(--ps-blue); }
body.light-mode .add-choice-card .label { color: #111; }
body.light-mode .add-choice-card .desc { color: #666; }
body.light-mode .cust-row td { color: #222; }
body.light-mode .badge-available { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
body.light-mode .badge-unavailable { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
body.light-mode .game-desc-inline { background: #f8f8f8; color: #333; }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* No overflow-x:hidden on html/body — it breaks nav's position:sticky by turning the
   root into its own scroll container instead of the real viewport. The actual overflow
   source (.navsearch not shrinking below its content width) is fixed at the source
   instead — confirmed via testing that scrollWidth matches clientWidth without this. */

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg-dark);
  color: var(--text-primary);
  min-height: 100vh;
}

/* ANNOUNCEMENT BAR */
.announcement-bar {
  background: linear-gradient(90deg, #C47F00 0%, #F0A500 50%, #C47F00 100%);
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
  color: #fff;
  text-align: center;
  padding: 0.6rem 3rem;
  font-size: 0.875rem;
  font-weight: 600;
  position: relative;
  letter-spacing: 0.1px;
}
.announcement-bar a { color: #fff; text-decoration: underline; opacity: 0.85; }
.announcement-bar a:hover { opacity: 1; }
.announcement-close {
  position: absolute;
  right: 0.25rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: rgba(255,255,255,0.6);
  font-size: 1.1rem; cursor: pointer;
  line-height: 1;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.announcement-close:hover { color: #fff; background: rgba(255,255,255,0.15); }
@keyframes shimmer { 0%{background-position:0%} 100%{background-position:200%} }

/* NAV */
nav {
  background: #000;
  padding: 0 2rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #141414;
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo img { height: 44px; width: auto; display: block; }
/* fallback text logo */
.logo-text {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}
.logo-text span { color: var(--ps-blue); }

.nav-links { display: flex; gap: 1.85rem; align-items: center; }
.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.2s;
  position: relative;
  padding: 0.4rem 0;
}
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-links a.active { color: var(--ps-blue); }
.nav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--ps-blue); border-radius: 2px;
}
.nav-links a[href="/admin"] { color: #888; font-size: 0.82rem; }
.nav-links a[href="/admin"]:hover { color: #ccc; }
.nav-cta {
  background: var(--ps-blue);
  color: #000;
  padding: 0.5rem 1.15rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.nav-cta:hover { background: #FFD700; color: #000; }

/* ── NAV ICONS (search toggle, admin, message pill) ───────────────────────── */
.navicons { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; }
.navicon-btn {
  background: none; border: none; color: #ccc; cursor: pointer; text-decoration: none;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border-radius: 50%; transition: background 0.15s, color 0.15s;
}
.navicon-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.navicon-btn svg { width: 19px; height: 19px; }

/* ── NAV SEARCH ─────────────────────────────────────────────────────────── */
/* Collapsed to an icon at all sizes; clicking it drops this box down as a
   full-width dropdown instead of it permanently eating nav space. */
.navsearch {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: #0a0a0a; border-bottom: 1px solid #222; padding: 0.7rem 2rem; z-index: 130;
}
.navsearch.navsearch-active { display: block; }
.navsearch.navsearch-active .navsearch-box { max-width: 520px; margin: 0 auto; width: 100%; }
.navsearch.navsearch-active .navsearch-results { max-width: 520px; margin: 0.5rem auto 0; position: static; }
.navsearch-box {
  display: flex; align-items: center; gap: 0.55rem; background: #111; border: 1px solid #262626;
  border-radius: 10px; padding: 0 0.8rem; height: 38px; transition: border-color 0.15s; color: #666;
}
.navsearch-box:focus-within { border-color: var(--ps-blue); background: #141414; color: var(--ps-blue); }
.navsearch-box input {
  flex: 1; background: none; border: none; outline: none; color: #fff;
  font-size: 0.86rem; font-family: inherit; min-width: 0;
}
.navsearch-box input::placeholder { color: #5a5a5a; }
.navsearch-kbd {
  font-size: 0.75rem; color: #555; border: 1px solid #2c2c2c; border-radius: 4px;
  padding: 0.1rem 0.3rem; font-family: inherit; background: #0c0c0c; flex-shrink: 0;
}
.navsearch-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #111;
  border: 1px solid #2a2a2a; border-radius: 14px; overflow: hidden; display: none;
  box-shadow: 0 18px 50px rgba(0,0,0,0.75); max-height: 70vh; overflow-y: auto; z-index: 150;
}
.navsearch-results.show { display: block; }
.navsearch-head {
  font-size: 0.75rem; letter-spacing: 0.14em; color: #5a5a5a; font-weight: 800;
  padding: 0.7rem 0.9rem 0.4rem; text-transform: uppercase;
}
.navsearch-item {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; text-decoration: none;
  color: inherit; cursor: pointer; border-left: 2px solid transparent;
}
.navsearch-item:hover, .navsearch-item.sel { background: #1a1a1a; border-left-color: var(--ps-blue); }
.navsearch-thumb {
  width: 38px; height: 48px; border-radius: 6px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(150deg,#1e1e1e,#0e0e0e); border: 1px solid #262626;
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.navsearch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.navsearch-body { min-width: 0; flex: 1; }
.navsearch-title {
  font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin-bottom: 0.15rem; color: #eee;
}
.navsearch-title mark { background: rgba(240,165,0,0.22); color: var(--ps-light-blue); border-radius: 2px; padding: 0 1px; }
.navsearch-meta { font-size: 0.75rem; color: #666; display: flex; gap: 0.5rem; align-items: center; }
.navsearch-price { color: var(--ps-blue); font-weight: 800; font-size: 0.82rem; flex-shrink: 0; }
.navsearch-avail-yes { color: #3f9e6a; }
.navsearch-avail-no {
  background: #2a1010; color: #c9605d; font-size: 0.75rem; font-weight: 800;
  padding: 0.12rem 0.4rem; border-radius: 20px; border: 1px solid #3d1a1a;
}
.navsearch-badge-soon {
  background: linear-gradient(135deg,#7b2ff7,#f107a3); color: #fff; font-size: 0.75rem;
  font-weight: 900; padding: 0.14rem 0.45rem; border-radius: 20px; letter-spacing: 0.05em; flex-shrink: 0;
}
.navsearch-badge-psplus {
  background: linear-gradient(135deg,#856200,#FFD700); color: #000; font-size: 0.75rem;
  font-weight: 900; padding: 0.14rem 0.45rem; border-radius: 20px; letter-spacing: 0.05em; flex-shrink: 0;
}
.navsearch-all {
  display: block; text-align: center; padding: 0.7rem; font-size: 0.78rem; color: var(--ps-blue);
  text-decoration: none; border-top: 1px solid #1e1e1e; font-weight: 600;
}
.navsearch-all:hover { background: #161616; }
.navsearch-empty { padding: 1.6rem 1.2rem; text-align: center; }
.navsearch-empty-ico { font-size: 1.6rem; opacity: 0.5; }
.navsearch-empty-title { font-size: 0.88rem; font-weight: 600; margin: 0.5rem 0 0.3rem; color: #eee; }
.navsearch-empty-sub { font-size: 0.76rem; color: #6a6a6a; margin-bottom: 1rem; line-height: 1.55; }
.navsearch-empty-acts { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.navsearch-empty-btn, .navsearch-empty-btn2 {
  font-size: 0.76rem; padding: 0.5rem 0.9rem; border-radius: 8px; text-decoration: none; font-weight: 600;
}
.navsearch-empty-btn { background: var(--ps-blue); color: #000; }
.navsearch-empty-btn2 { border: 1px solid #333; color: #bbb; }

/* ── NAV HAMBURGER + MOBILE DRAWER ─────────────────────────────────────── */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 4px; width: 44px; height: 44px; background: none; border: none; cursor: pointer;
  flex-shrink: 0; padding: 0;
}
.nav-hamburger span { width: 20px; height: 2px; background: #ccc; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-drawer-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 149;
}
.nav-drawer-overlay.open { display: block; }
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 260px; max-width: 80vw;
  background: #0d0d0d; border-left: 1px solid #222; z-index: 150;
  display: flex; flex-direction: column; gap: 0.25rem; padding: 5rem 1.25rem 1.5rem;
  transform: translateX(100%); transition: transform 0.25s ease;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer a {
  color: #ccc; text-decoration: none; font-size: 0.95rem; font-weight: 500;
  padding: 0.85rem 0.25rem; border-bottom: 1px solid #1c1c1c;
}
.nav-drawer a.active { color: var(--ps-blue); }
.nav-drawer a.nav-cta {
  background: var(--ps-blue); color: #000; border-radius: 10px; text-align: center;
  margin-top: 0.75rem; border-bottom: none; font-weight: 700;
}
.mobile-fab {
  display: none; position: fixed; right: 16px; bottom: 16px; z-index: 140;
  background: linear-gradient(135deg, #0099ff, #a033ff); color: #fff; text-decoration: none;
  font-size: 0.82rem; font-weight: 800; padding: 0.75rem 1.1rem; border-radius: 30px;
  align-items: center; gap: 0.4rem; box-shadow: 0 8px 24px rgba(0,140,255,0.45);
}
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .mobile-fab { display: flex; }
  .navicons .nav-cta, .navicons .navicon-btn[href="/admin"] { display: none; }
  .navsearch { padding: 0.7rem 1rem; }
  .navsearch.navsearch-active .navsearch-box { max-width: none; }
  .navsearch.navsearch-active .navsearch-results { max-width: none; margin-top: 0.5rem; }
}

/* Hero trust strip — sits under either hero variant (default or slideshow) */
.hero-trust-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(240,165,0,0.1); border: 1px solid rgba(240,165,0,0.3);
  color: var(--ps-blue); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: 20px; margin-bottom: 1.25rem;
}
.hero-trust-strip {
  max-width: 1400px; margin: 0 auto; padding: 1.75rem 2rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.hero-trust-item { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }
.hero-trust-item b { display: block; color: var(--text-primary); font-size: 0.85rem; font-weight: 700; margin-bottom: 0.15rem; }
@media (max-width: 700px) {
  .hero-trust-strip { grid-template-columns: repeat(2, 1fr); padding: 1.5rem; gap: 1rem; }
}

/* HERO */
.hero {
  background: linear-gradient(135deg, #000 0%, #1a1000 50%, #000 100%);
  padding: 5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-custom-bg { background: #000; }
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 1;
  pointer-events: none;
}
.hero-custom-bg .hero-content { z-index: 2; }
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(240,165,0,0.1) 0%, transparent 60%);
}
.hero-content { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  margin-bottom: 1rem;
  letter-spacing: -1px;
}
.hero h1 span { color: var(--ps-blue); }
.hero p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 500px;
  margin: 0 auto 2rem;
}
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Proposed hero redesign: edge-to-edge game photo on the right half,
   faded into the dark text half via a mask + gradient so it reads as one
   continuous surface instead of a framed panel. Cover picker sits directly
   on the photo. Falls back to the boxed .hero-grid layout when an admin has
   configured a custom hero background image/video. ── */
.hero-v2 { min-height: 560px; padding: 0; display: flex; align-items: center; text-align: left; }
.hero-photo {
  position: absolute; inset: 0; left: 50%; width: 50%; z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 18%, #000 40%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 18%, #000 40%);
}
.hero-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 1s ease;
}
.hero-photo img.active { opacity: 1; }
.hero-photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, #000 0%, rgba(0,0,0,.55) 22%, transparent 55%),
              linear-gradient(to top, rgba(0,0,0,.5), transparent 30%, transparent 70%, rgba(0,0,0,.35));
}
.hero-v2 .hero-glow {
  position: absolute; left: 50%; top: 50%; width: 60%; height: 70%; transform: translate(-30%,-50%);
  background: radial-gradient(ellipse, rgba(240,165,0,.16), transparent 65%); pointer-events: none; z-index: 0;
}
.hero-cover-picker { position: absolute; z-index: 3; right: 2.5rem; bottom: 1.75rem; display: flex; gap: .55rem; }
.hero-cover-thumb {
  width: 52px; height: 70px; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid rgba(255,255,255,.25); padding: 0; background: #111;
  transition: border-color .2s, transform .2s;
}
.hero-cover-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-cover-thumb:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.6); }
.hero-cover-thumb.active { border-color: var(--ps-blue); box-shadow: 0 0 0 2px rgba(240,165,0,.35); }
.hero-v2 .hero-inner { position: relative; z-index: 2; max-width: 1300px; margin: 0 auto; padding: 4.5rem 2rem; width: 100%; }
.hero-v2 .hero-content { max-width: 560px; }
.hero-v2 .hero-content p { margin: 0 0 1.75rem; max-width: 48ch; }
.hero-v2 .hero-actions { justify-content: flex-start; margin-bottom: 1.85rem; }
.hero-v2:not(:has(.hero-photo)) .hero-content { max-width: 640px; margin: 0 auto; }
.hero-v2:not(:has(.hero-photo)) .hero-content p { margin: 0 auto 1.75rem; }
.hero-v2:not(:has(.hero-photo)) .hero-actions { justify-content: center; }
.hero-v2:not(:has(.hero-photo)) { text-align: center; }

@media (max-width: 900px) {
  .hero-v2 { min-height: 0; }
  .hero-photo {
    position: relative; left: 0; width: 100%; height: 280px;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 45%);
    mask-image: linear-gradient(to top, transparent 0%, #000 45%);
  }
  .hero-photo::after { background: linear-gradient(to top, #000 0%, transparent 60%); }
  .hero-v2 { flex-direction: column; }
  .hero-v2 .hero-inner { padding: 0 1.25rem 2.5rem; }
  .hero-v2 .hero-content { max-width: 100%; text-align: center; margin: -2.5rem auto 0; position: relative; z-index: 3; }
  .hero-v2 .hero-content p { margin-left: auto; margin-right: auto; }
  .hero-v2 .hero-actions { justify-content: center; }
  .hero-v2 .hero-pay-methods { justify-content: center; }
  .hero-v2 .hero-stats { justify-content: center; }
  .hero-cover-picker { right: 1rem; bottom: .9rem; gap: .4rem; }
  .hero-cover-thumb { width: 40px; height: 54px; }
}
@media (max-width: 480px) {
  .hero-v2 .hero-content p { display: block; }
  .hero-cover-picker { right: .6rem; bottom: .6rem; gap: .3rem; }
  .hero-cover-thumb { width: 32px; height: 43px; }
}

/* Two-column hero: text box left, auto-rotating real-game showcase right (custom hero-bg fallback) */
.hero-grid {
  position: relative; z-index: 1; max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; text-align: left;
}
.hero-grid.no-showcase { grid-template-columns: 1fr; text-align: center; }
.hero-grid .hero-content { max-width: 560px; }
.hero-grid.no-showcase .hero-content { max-width: 640px; margin: 0 auto; }
.hero-grid .hero-content p { margin: 0 0 1.75rem; max-width: 48ch; }
.hero-grid.no-showcase .hero-content p { margin: 0 auto 1.75rem; }
.hero-grid .hero-actions { justify-content: flex-start; margin-bottom: 1.85rem; }
.hero-grid.no-showcase .hero-actions { justify-content: center; }
.hero-trust-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.75rem; max-width: 480px; }
.hero-grid.no-showcase .hero-trust-row { max-width: 540px; margin: 0 auto; }
.hero-trust-row .hero-trust-item { font-size: 0.75rem; }
.hero-trust-row .hero-trust-item:last-child { grid-column: 1 / -1; }

/* Payment method badges — sits right under the GCash/Maya trust item */
.hero-pay-methods { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.9rem; }
.hero-grid.no-showcase .hero-pay-methods { justify-content: center; }
.pay-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; font-weight: 700; color: #fff;
  padding: 0.28rem 0.55rem; border-radius: 7px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
}
.pay-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.pay-gcash { background: rgba(0,133,242,0.15); border-color: rgba(0,133,242,0.4); color: #4fa8ff; }
.pay-maya { background: rgba(0,199,120,0.15); border-color: rgba(0,199,120,0.4); color: #3fd68f; }
.pay-qrph { background: rgba(240,165,0,0.15); border-color: rgba(240,165,0,0.4); color: var(--ps-blue); }
.pay-bank { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #ddd; }

/* Real-site stats — moved into the hero, below the payment badges */
.hero-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.25rem; }
.hero-grid.no-showcase .hero-stats { justify-content: center; }
.hero-stat-num { font-size: 0.95rem; font-weight: 800; color: #fff; margin-bottom: 0.1rem; }
.hero-stat-label { font-size: 0.78rem; color: var(--text-secondary); }

.hero-showcase { position: relative; aspect-ratio: 4/3.4; border-radius: 20px; overflow: hidden; }
.hero-showcase-card {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; background: #0d0d0d;
}
.hero-showcase-card.active { opacity: 1; }
.hero-showcase-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-showcase-info {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  background: rgba(10,10,10,0.82); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
  padding: 0.9rem 1.1rem; display: flex; align-items: center; gap: 0.75rem;
}
.hero-showcase-title { font-size: 0.92rem; font-weight: 700; color: #fff; }
.hero-showcase-meta { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.2rem; }
.hero-showcase-price { margin-left: auto; font-size: 1.1rem; font-weight: 800; color: var(--ps-blue); white-space: nowrap; }
.hero-showcase-thumbs { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; gap: 6px; }
.hero-showcase-thumb {
  width: 34px; height: 46px; padding: 0; border-radius: 7px; overflow: hidden; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.3); background: #111; transition: border-color 0.2s, transform 0.2s;
}
.hero-showcase-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-showcase-thumb:hover { border-color: rgba(255,255,255,0.7); transform: translateY(-2px); }
.hero-showcase-thumb.active { border-color: var(--ps-blue); box-shadow: 0 0 0 2px rgba(0,112,209,0.35); }

@media (max-width: 480px) {
  .hero-showcase-thumb { width: 26px; height: 35px; }
  .hero-showcase-thumbs { top: 8px; right: 8px; gap: 4px; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  .hero-grid .hero-content { max-width: 100%; margin: 0 auto; }
  .hero-grid .hero-content p { margin: 0 auto 1.75rem; }
  .hero-grid .hero-actions { justify-content: center; }
  .hero-trust-row { margin: 0 auto; }
  .hero-showcase { max-width: 420px; margin: 0 auto; }
}
/* Compact phone hero — the two-column layout above still stacks fine down to ~860px,
   but on an actual phone the rotating showcase panel and full trust-item grid push
   games several screens down. Below 480px: drop the showcase, shrink the headline,
   and turn the trust row into a horizontal-scrolling strip of small chips instead of
   a 2x2 grid, so the hero clears in well under one screen. */
@media (max-width: 480px) {
  .hero, .hero-custom-bg { padding: 1.75rem 1.25rem 1.5rem; }
  .hero-grid { gap: 0.9rem; }
  .hero h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
  .hero-grid .hero-content p { font-size: 0.85rem; margin: 0 auto 0.9rem; }
  .hero-actions { display: none; }
  .hero-showcase { display: none; }
  .hero-trust-row {
    display: flex; grid-template-columns: none; overflow-x: auto; gap: 0.5rem;
    max-width: 100%; padding-bottom: 2px; scrollbar-width: none;
  }
  .hero-trust-row::-webkit-scrollbar { display: none; }
  .hero-trust-item {
    flex: 0 0 auto; font-size: 0.68rem; white-space: nowrap;
    background: rgba(240,165,0,0.08); border: 1px solid rgba(240,165,0,0.25);
    border-radius: 20px; padding: 0.35rem 0.75rem; display: flex; gap: 0.3rem; align-items: baseline;
  }
  .hero-trust-item b { font-size: inherit; }
}
/* Homepage only, phones: remove the hero entirely rather than just compact it — the
   nav (with search) is the new top of page, straight into Most Popular below it. The
   480px compaction rules above become moot once this hides the whole section, which
   is fine — they still apply harmlessly between 480-600px if this threshold changes. */
@media (max-width: 600px) {
  .home-page .hero, .home-page #heroSlideshow { display: none; }
}

/* ── Game Detail Page ─────────────────────────────────────── */
.gd-page { max-width: 960px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.gd-back a { color: #555; text-decoration: none; font-size: 0.85rem; }
.gd-back a:hover { color: var(--ps-blue); }
.gd-layout { display: flex; gap: 2.5rem; margin-top: 1.5rem; align-items: flex-start; }
.gd-cover-col { position: relative; flex-shrink: 0; width: 380px; }
.gd-cover { width: 100%; height: 480px; border-radius: 14px; object-fit: cover; object-position: top; display: block; }
.gd-cover-placeholder { height: 480px; background: #111; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.gd-platform-badge { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.8); color: #fff; font-size: 0.75rem; font-weight: 800; padding: 0.25rem 0.5rem; border-radius: 5px; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.15); z-index: 3; }

/* ── Gameplay Slider ─────────────────────────────────────── */
.gd-slider { position: relative; width: 100%; border-radius: 14px; overflow: hidden; }
.gd-slider-track { display: flex; transition: transform 0.35s ease; }
.gd-slide { flex: 0 0 100%; }
.gd-slide .gd-cover { border-radius: 0; }
.gd-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.55); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; transition: background 0.15s; }
.gd-slider-arrow:hover { background: rgba(0,0,0,0.85); }
.gd-slider-prev { left: 8px; }
.gd-slider-next { right: 8px; }
.gd-slider-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 3; }
.gd-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,0.4); cursor: pointer; padding: 0; transition: background 0.15s, width 0.15s; }
.gd-dot.active { background: #fff; width: 20px; border-radius: 4px; }
.gd-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.gd-thumb { flex: 0 0 auto; width: 68px; height: 68px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: none; padding: 0; cursor: pointer; opacity: 0.6; transition: opacity 0.15s, border-color 0.15s; }
.gd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gd-thumb.active { opacity: 1; border-color: var(--ps-blue); }
.gd-thumb:hover { opacity: 1; }
.gd-detail-col { flex: 1; min-width: 0; }
.gd-genres { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.gd-genre-tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.8px; padding: 0.2rem 0.6rem; border-radius: 4px; background: rgba(255,255,255,0.07); color: #aaa; border: 1px solid #222; }
.gd-title { font-size: 1.6rem; font-weight: 900; line-height: 1.2; margin: 0 0 0.5rem; }
.gd-desc { font-size: 0.85rem; color: #888; margin: 0 0 1rem; line-height: 1.6; }
.gd-section-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 1.2px; color: #555; text-transform: uppercase; margin-bottom: 0.75rem; }
.gd-type-options { display: flex; flex-direction: column; gap: 0.6rem; }
.gd-type-card { display: flex; align-items: flex-start; gap: 0.75rem; background: #111; border: 1.5px solid #222; border-radius: 12px; padding: 0.85rem 1rem; cursor: pointer; transition: border-color 0.15s; }
.gd-type-card:hover:not(.gd-type-disabled) { border-color: #444; }
.gd-type-card.gd-type-selected { border-color: var(--ps-blue); background: rgba(0,112,209,0.06); }
.gd-type-card.gd-type-disabled { opacity: 0.45; cursor: not-allowed; }
.gd-type-card input[type="radio"] { margin-top: 3px; accent-color: var(--ps-blue); flex-shrink: 0; }
.gd-type-body { flex: 1; min-width: 0; }
.gd-type-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.gd-type-icon { font-size: 0.9rem; }
.gd-type-name { font-weight: 700; font-size: 0.95rem; }
.gd-type-status { font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 4px; margin-left: auto; }
.gd-status-avail { background: rgba(34,197,94,0.15); color: #22c55e; }
.gd-status-rented { background: rgba(239,68,68,0.15); color: #ef4444; }
.gd-slots-left { font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 4px; background: rgba(0,112,209,0.15); color: #38bdf8; margin-left: 0.35rem; }
.gd-type-desc { font-size: 0.78rem; color: #666; line-height: 1.5; }
.gd-duration-grid { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.gd-dur-btn { position: relative; flex: 1; min-width: 70px; background: #111; border: 1.5px solid #222; border-radius: 10px; padding: 0.75rem 0.5rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; transition: border-color 0.15s, background 0.15s; color: #fff; }
.gd-dur-btn:hover { border-color: #444; }
.gd-dur-btn.active { border-color: var(--ps-blue); background: rgba(0,112,209,0.1); }
.gd-dur-grid-shake { animation: durShake 0.5s ease; border-radius: 10px; outline: 2px solid #ef4444; outline-offset: 3px; }
@keyframes durShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.gd-dur-days { font-size: 1.4rem; font-weight: 900; line-height: 1; }
.gd-dur-label { font-size: 0.75rem; font-weight: 700; color: #555; letter-spacing: 0.5px; }
.gd-dur-price { font-size: 0.82rem; font-weight: 700; color: var(--ps-blue); margin-top: 0.25rem; }
.gd-dur-price-orig { font-size: 0.75rem; font-weight: 500; color: #666; text-decoration: line-through; margin-right: 0.25rem; }
.gd-dur-promo { position: absolute; top: -8px; right: -4px; background: #ef4444; color: #fff; font-size: 0.75rem; font-weight: 800; padding: 0.15rem 0.3rem; border-radius: 4px; letter-spacing: 0.3px; }
.gd-total-box { background: #0d0d0d; border: 1px solid #222; border-radius: 12px; padding: 1rem 1.1rem; margin-top: 1.25rem; }
.gd-total-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; color: #444; text-transform: uppercase; margin-bottom: 0.65rem; }
.gd-total-rows { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; border-bottom: 1px solid #1a1a1a; padding-bottom: 0.75rem; }
.gd-total-row { display: flex; justify-content: space-between; font-size: 0.82rem; color: #888; }
.gd-total-disc { color: #22c55e; }
.gd-total-dep { color: #f59e0b; }
.gd-total-final { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 0.9rem; color: #fff; }
.gd-cta-btn { display: block; width: 100%; text-align: center; background: var(--ps-blue); color: #fff; padding: 0.9rem; border-radius: 10px; font-weight: 700; font-size: 1rem; text-decoration: none; margin-top: 1.25rem; transition: opacity 0.15s; }
.gd-cta-btn:hover { opacity: 0.85; }
.gd-cta-hint { text-align: center; font-size: 0.75rem; color: #444; margin-top: 0.5rem; }

/* No-slot reservation options */
.gd-avail-soon {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: #f59e0b;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  display: inline-block;
}
.gd-avail-soon strong { color: #fbbf24; }

.gd-noslot-banner {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: #1a0f00; border: 1px solid #3a2200; border-radius: 12px;
  padding: 1rem 1.25rem; margin-top: 0.5rem;
}
.gd-noslot-icon { font-size: 1.5rem; flex-shrink: 0; }
.gd-noslot-title { font-weight: 800; font-size: 0.95rem; color: #f59e0b; margin-bottom: 0.2rem; }
.gd-noslot-sub { font-size: 0.8rem; color: #776040; line-height: 1.5; }

.gd-reserve-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem;
}
.gd-reserve-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-radius: 14px; padding: 1.25rem 1rem; gap: 0.35rem;
  text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;
  position: relative; overflow: hidden;
}
.gd-reserve-card:hover { transform: translateY(-3px); }
.gd-reserve-priority {
  background: linear-gradient(135deg, #1a0800, #2d1500);
  border: 1px solid #7c4a00;
}
.gd-reserve-priority:hover { box-shadow: 0 8px 30px rgba(245,158,11,0.3); border-color: #f59e0b; }
.gd-reserve-queue {
  background: linear-gradient(135deg, #0a0f1a, #0f1a2d);
  border: 1px solid #1e3a5f;
}
.gd-reserve-queue:hover { box-shadow: 0 8px 30px rgba(59,130,246,0.25); border-color: #3b82f6; }
.gd-reserve-badge {
  position: absolute; top: 0.6rem; right: 0.6rem;
  background: #f59e0b; color: #000;
  font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em;
  padding: 0.15rem 0.45rem; border-radius: 4px;
}
.gd-reserve-icon { font-size: 1.75rem; }
.gd-reserve-name { font-weight: 800; font-size: 0.95rem; color: #fff; }
.gd-reserve-fee { font-size: 1.1rem; font-weight: 900; }
.gd-reserve-priority .gd-reserve-fee { color: #f59e0b; }
.gd-reserve-queue .gd-reserve-fee { color: #22c55e; }
.gd-reserve-note { font-size: 0.75rem; color: #666; line-height: 1.45; }
.gd-reserve-cta {
  margin-top: 0.5rem; font-size: 0.8rem; font-weight: 700;
  padding: 0.5rem 1rem; border-radius: 50px; width: 100%;
}
.gd-reserve-priority .gd-reserve-cta { background: #f59e0b; color: #000; }
.gd-reserve-queue .gd-reserve-cta { background: #1e3a5f; color: #93c5fd; border: 1px solid #3b82f6; }
@media (max-width: 650px) {
  .gd-layout { flex-direction: column; gap: 1.5rem; }
  .gd-cover-col { width: 100%; }
  .gd-cover { height: 300px; }
  .gd-title { font-size: 1.25rem; }
}

/* ── Hero Slideshow ───────────────────────────────────────── */
.hero-slideshow {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background: #000;
}
.hero-slides-track { position: relative; width: 100%; height: 100%; }
.hero-slide {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-slide.active { display: block; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  animation: slideIn 0.5s ease;
}
@keyframes slideIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }
.hero-slide-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  color: #fff;
  padding: 2rem 1.5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}
.hero-slide-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  border: none;
  color: #fff;
  font-size: 2.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  padding: 0;
  line-height: 1;
}
.hero-slide-arrow:hover { background: var(--ps-blue); }
.hero-slide-prev { left: 12px; }
.hero-slide-next { right: 12px; }
.hero-slide-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.hero-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s;
}
.hero-dot.active { background: var(--ps-blue); border-color: var(--ps-blue); }
@media (max-width: 600px) {
  .hero-slideshow { height: 220px; }
  .hero-slide-arrow { width: 36px; height: 36px; font-size: 1.8rem; }
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}
.btn-primary { background: var(--ps-blue); color: #000; font-weight: 700; }
.btn-primary:hover { background: #FFD700; transform: translateY(-1px); }
.btn-outline { background: transparent; color: #fff; border: 2px solid #333; }
.btn-outline:hover { border-color: var(--ps-blue); color: var(--ps-blue); }

/* STATS BAR */
.stats-bar {
  background: #111;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
}
.stat { text-align: center; }
.stat-num { font-size: 1.8rem; font-weight: 800; color: var(--ps-blue); }
.stat-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.2rem; }

/* SECTION */
.section { padding: 3rem 2rem; max-width: 1400px; margin: 0 auto; }
.section-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
/* Homepage only: drop the trailing divider line next to section headers. */
.home-page .section-title::after, .browse-page .section-title::after { content: none; }

.section-viewall {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: #191919; color: #fff; text-decoration: none;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 0.4rem 0.9rem; border-radius: 20px; border: 1px solid #2a2a2a;
  transition: background 0.15s, border-color 0.15s;
}
.section-viewall:hover { background: #242424; border-color: #3a3a3a; }
.section-viewall svg { width: 13px; height: 13px; flex-shrink: 0; }
/* Homepage only: one variable controls the gap above every section (top-driven, so
   each section only needs to know its own distance from whatever came before it).
   Overridable per-request via an inline style on <body> from admin settings. */
.home-page { --section-gap: 4rem; }
.home-page .section { padding-top: var(--section-gap); padding-bottom: 0; }
.section-toggle-btn {
  background: none; border: 1px solid var(--border); color: var(--text-secondary);
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: 0.8rem; line-height: 1;
  flex-shrink: 0; transition: transform 0.25s ease, background 0.15s, color 0.15s;
}
.section-toggle-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.section-toggle-btn.collapsed { transform: rotate(-90deg); }
.collapsible-body {
  overflow: hidden; max-height: 600px; opacity: 1;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease;
}
.collapsible-body.collapsed { max-height: 0; opacity: 0; margin-top: 0; }

/* Per-category "Price Starts at" pill next to the game-count badge on Browse Games */
.cat-price-start { font-size: 0.78rem; font-weight: 700; color: #F0A500; background: rgba(240,165,0,0.12); border: 1px solid rgba(240,165,0,0.35); border-radius: 20px; padding: 0.2rem 0.65rem; }

/* ── HOMEPAGE: PRICE TIERS — "Split Art" layout ──────────────────────────
   Text sits on the left of a dark card while the tier's picture bleeds in
   from the right edge and dissolves into the card via a gradient, mirroring
   the homepage hero so the page reads as one design. Picture, panel width,
   opacity, accent colour and title styling are all per-tier admin settings.
   The gradient below is keyed to --tier-bg, so if the card background is
   ever re-themed the fade follows it instead of leaving a hard seam. */
.tier-section { padding: var(--section-gap) 2rem 0; max-width: 1400px; margin: 0 auto; }
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.tier-card {
  --tier-bg: #101010;
  --tier-accent: #F0A500;
  position: relative; overflow: hidden; border-radius: 16px;
  background: var(--tier-bg); border: 1px solid #1e1e1e;
  padding: 1.15rem 1.1rem; text-decoration: none; color: inherit;
  display: flex; align-items: center; min-height: 210px;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.25s;
}
.tier-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tier-accent) 45%, #2e2e2e);
  box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--tier-accent) 35%, transparent);
}
/* A soft glow in the tier's own accent colour, washing in from behind the text
   on hover — z-index sits above the background but below the art/text so it
   reads as ambient light rather than a flat overlay. */
.tier-card-glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 70% 90% at 0% 50%, color-mix(in srgb, var(--tier-accent) 22%, transparent), transparent 70%);
  opacity: 0; transition: opacity 0.35s ease;
}
.tier-card:hover .tier-card-glow { opacity: 1; }
/* overflow:hidden matters — on hover the image scales 5% and would otherwise
   spill past this panel's left edge, where the ::after fade below cannot reach
   it, leaving a hard vertical seam down the middle of the card. */
.tier-card-art { position: absolute; right: 0; top: 0; bottom: 0; z-index: 1; overflow: hidden; }
.tier-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.tier-card:hover .tier-card-art img { transform: scale(1.05); }
.tier-card-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, var(--tier-bg) 2%, rgba(16,16,16,0.62) 38%, transparent 85%);
}
.tier-card-art-fallback {
  position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
  font-size: 2.6rem; opacity: 0.22; z-index: 1;
}
.tier-card-top { position: relative; z-index: 3; max-width: 62%; }
.tier-card-name { font-weight: 900; letter-spacing: -0.01em; margin-bottom: 0.1rem; }
.tier-card-count { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; margin-bottom: 0.8rem; }
.tier-card-price { font-size: 0.86rem; font-weight: 900; white-space: nowrap; }
.tier-card-go {
  position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 3; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(0,0,0,0.45); backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center;
}
.tier-card-go svg { width: 14px; height: 14px; color: #fff; }
.tier-card:hover .tier-card-go { background: rgba(0,0,0,0.65); }

/* ── HOMEPAGE: SPOTLIGHT ────────────────────────────────────────────────── */
.spotlight-section { padding: var(--section-gap) 2rem 0; max-width: 1400px; margin: 0 auto; }
.spotlight-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 2.5rem;
}
.spotlight-cover { border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: #111; display: flex; align-items: center; justify-content: center; }
.spotlight-cover img { width: 100%; height: 100%; object-fit: contain; }
.spotlight-tag {
  display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ps-blue); background: rgba(240,165,0,0.1);
  border: 1px solid rgba(240,165,0,0.3); padding: 0.35rem 0.75rem; border-radius: 20px; margin-bottom: 1rem;
}
.spotlight-title { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.75rem; }
.spotlight-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 1.25rem; }
.spotlight-price { font-size: 1.9rem; font-weight: 800; color: var(--ps-blue); letter-spacing: -0.02em; }
.spotlight-avail { font-size: 0.78rem; color: #22c55e; font-weight: 600; margin: 0.4rem 0 1.5rem; }
.spotlight-link { font-size: 0.85rem; color: var(--ps-blue); font-weight: 600; text-decoration: none; }
.spotlight-link:hover { text-decoration: underline; }

/* ── HOMEPAGE: PROMO LADDER ─────────────────────────────────────────────── */
.promo-section { padding: var(--section-gap) 2rem 0; max-width: 1400px; margin: 0 auto; }
.promo2 {
  border-radius: 20px; border: 1px solid rgba(240,165,0,0.3);
  background: linear-gradient(100deg, rgba(240,165,0,0.1), transparent 65%), var(--bg-card);
  padding: 2.25rem 2.5rem;
}
.promo2-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.promo2-flag {
  background: var(--ps-blue); color: #000; font-size: 0.75rem; font-weight: 900;
  letter-spacing: 0.09em; padding: 0.3rem 0.75rem; border-radius: 20px;
}
.promo2-count { font-size: 0.78rem; color: #8a8a8a; font-weight: 600; }
.promo2-grid { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: 2rem; align-items: center; }
.promo2-grid.nomedia { grid-template-columns: 1fr; }
.promo2-media {
  border-radius: 14px; overflow: hidden; background: #0e0e0e; aspect-ratio: 4/5;
  display: flex; align-items: center; justify-content: center;
}
.promo2-media img, .promo2-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo2-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.35rem; line-height: 1.15; }
.promo2-sub { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1.4rem; }
.ladder { display: flex; flex-direction: column; gap: 0.6rem; }
.rung {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--bg-dark); border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 1.15rem;
}
.rung .days { font-size: 0.8rem; color: #9a9a9a; font-weight: 700; width: 72px; flex-shrink: 0; }
.rung .pct { font-size: 1.25rem; font-weight: 900; color: var(--ps-blue); width: 92px; flex-shrink: 0; letter-spacing: -0.02em; }
.rung .price { font-size: 0.8rem; color: #5f5f5f; }
.rung .price s { opacity: 0.8; }
.rung .price b { color: var(--text-primary); font-size: 1rem; font-weight: 800; margin-left: 0.3rem; }
.rung.best {
  background: linear-gradient(100deg, rgba(240,165,0,0.13), transparent 70%), var(--bg-dark);
  border: 2px solid var(--ps-blue);
}
.rung.best .days { color: #c9a54a; }
.best-tag {
  margin-left: auto; background: var(--ps-blue); color: #000; font-size: 0.75rem; font-weight: 900;
  letter-spacing: 0.07em; padding: 0.25rem 0.65rem; border-radius: 20px; white-space: nowrap;
}
.promo2-cta { display: flex; gap: 0.6rem; margin-top: 1.5rem; flex-wrap: wrap; }
.btn-ghost {
  border: 1px solid #3a3a3a; color: #ccc; font-weight: 600; font-size: 0.9rem;
  padding: 0.8rem 1.6rem; border-radius: 10px; text-decoration: none; display: inline-block;
}
.btn-ghost:hover { background: var(--bg-card-hover); }
@media (max-width: 700px) {
  .promo2-grid { grid-template-columns: 1fr; }
  .promo2-media { aspect-ratio: 16/9; }
  .promo2 { padding: 1.75rem; }
  .rung .pct { width: 74px; font-size: 1.1rem; }
}

/* ── HOMEPAGE POPUP ─────────────────────────────────────────────────────── */
.popup-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.82); align-items: center; justify-content: center; padding: 1.25rem;
}
.popup-overlay.active { display: flex; }
.popup-card {
  background: var(--bg-card); border: 1px solid #2a2a2a; border-radius: 18px;
  width: 100%; max-width: 420px; max-height: 88vh; overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  box-shadow: 0 24px 70px rgba(0,0,0,0.75);
  animation: popupIn 0.28s cubic-bezier(0.2,0.9,0.3,1.2);
}
@keyframes popupIn {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to { opacity: 1; transform: none; }
}
.popup-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.popup-close:hover { background: rgba(0,0,0,0.85); }
.popup-img-link {
  display: flex; align-items: center; justify-content: center;
  min-height: 0; flex: 1; background: #0e0e0e; overflow: hidden;
}
.popup-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.popup-foot { padding: 1rem 1.15rem 1.1rem; flex-shrink: 0; }
.popup-cta {
  display: block; width: 100%; text-align: center; background: var(--ps-blue); color: #000;
  font-weight: 800; font-size: 0.92rem; padding: 0.85rem; border-radius: 11px; text-decoration: none;
}
.popup-cta:hover { background: #ffb81f; }
.popup-skip {
  display: block; width: 100%; margin-top: 0.7rem; background: none; border: none; cursor: pointer;
  color: #6e6e6e; font-size: 0.78rem; font-family: inherit; padding: 0.3rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.popup-skip:hover { color: #a0a0a0; }
@media (max-width: 600px) {
  .popup-card { max-width: 340px; }
}

/* ── HOMEPAGE: WHY RENT FROM US ─────────────────────────────────────────── */
.why-section { padding: var(--section-gap) 2rem 0; max-width: 1400px; margin: 0 auto; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.why-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 1.75rem 1.5rem; }
.why-icon {
  width: 40px; height: 40px; border-radius: 11px; background: rgba(240,165,0,0.1);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 1rem;
}
.why-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.4rem; }
.why-desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; }

@media (max-width: 900px) {
  .tier-grid, .why-grid { grid-template-columns: repeat(2, 1fr); }
  .spotlight-card { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .tier-section, .spotlight-section, .promo-section, .why-section { padding-left: 1rem; padding-right: 1rem; }
  .spotlight-card { padding: 1.5rem; }
  .promo-band { padding: 1.75rem; flex-direction: column; align-items: flex-start; }
  /* Price tiers as a horizontal-scrolling chip strip instead of 4 stacked full-width
     cards (~790px of scroll) — same tap targets, a fraction of the height. */
  .tier-grid {
    display: flex; grid-template-columns: none; overflow-x: auto; gap: 0.6rem;
    padding-bottom: 0.3rem; scrollbar-width: none;
  }
  .tier-grid::-webkit-scrollbar { display: none; }
  .tier-card { flex: 0 0 auto; min-width: 160px; min-height: 130px; padding: 0.85rem 1rem; }
  .tier-card-count { display: none; }
  .tier-card-go { display: none; }
  /* No room for the side artwork on a 160px chip — text gets the full width. */
  .tier-card-art, .tier-card-art-fallback { display: none; }
  .tier-card-top { max-width: 100%; }
  .tier-card-price { margin-top: 0.5rem; }
}

/* ── HOMEPAGE (PHONE ONLY): reorder so the game grid appears right after the hero,
   instead of after the price-tier grid and PS Plus spotlight. Every homepage section
   is a direct child of <body> with no shared wrapper, so this reorders via flex
   `order` rather than moving markup — desktop/tablet keep the original source order
   untouched (this query only applies <=600px), and elements that render nothing
   (inline <script> tags between sections, position:fixed overlays) are unaffected
   since order only affects elements that actually take up visual space. ──────────── */
@media (max-width: 600px) {
  /* In a column flex container, cross-axis (width) stretch doesn't reliably override
     a child's content-based intrinsic width — any section containing a horizontal-
     scroll strip (tier chips, sliders, reviews) was sizing itself to fit ALL of that
     content instead of clipping to the viewport, causing page-wide horizontal
     overflow (measured 988px). Forcing width:100% (verified live) makes every section
     respect the viewport width so its own overflow-x:auto can actually do its job.
     Scoped to a named list of the actual content sections rather than `> *` — the
     mobile-fab, popup overlay, and nav drawer are ALSO direct children of body and
     are position:fixed with their own intentional widths; the earlier `> *` version
     stretched the fab into a full-width bar that covered the cards behind it. */
  body.home-page { display: flex; flex-direction: column; }
  .home-page .hero,
  .home-page #heroSlideshow,
  .home-page #mostPopularSection,
  .home-page .tier-section,
  .home-page .spotlight-section,
  .home-page .section[data-upcoming],
  .home-page #mostPlayedPsplusSection,
  .home-page .promo-section,
  .home-page .why-section,
  .home-page .how-section,
  .home-page #reviewsSection,
  .home-page footer {
    min-width: 0; width: 100%;
  }
  .home-page #heroSlideshow,
  .home-page .hero { order: 10; }
  .home-page #mostPopularSection { order: 20; }
  .home-page .tier-section { order: 30; }
  .home-page .spotlight-section { order: 40; }
  .home-page .section[data-upcoming] { order: 50; }
  .home-page #mostPlayedPsplusSection { order: 60; }
  .home-page .promo-section { order: 70; }
  .home-page .why-section { order: 80; }
  .home-page .how-section { order: 90; }
  .home-page #reviewsSection { order: 100; }
  .home-page footer { order: 110; }

  /* Stats bar (63+ Games / ₱249 Starting Price / etc.) is desktop trust-signal
     clutter that eats a full row above the fold on a phone — drop it here. */
  .home-page .stats-bar { display: none; }

  /* Most Popular becomes the immediate 2-column grid a customer sees after the hero,
     instead of a horizontal slider — bigger cards, no arrows to discover, everything
     visible without a sideways swipe. Scoped to this one section only; Coming Soon and
     Most Played in PS Plus keep their slider treatment. */
  #mostPopularSection .upcoming-slider-wrap { display: block; }
  #mostPopularSection .slider-arrow { display: none; }
  #mostPopularSection .upcoming-slider {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
    overflow: visible; padding: 0;
  }
  #mostPopularSection .slider-card-wrap {
    min-width: 0 !important; max-width: none !important; width: 100%;
  }
  /* A later rule (.upcoming-slider .game-card, further down this file) fixes every
     slider card to calc(50vw - 1px) regardless of section — that's correct for the
     2-per-screen Coming Soon/Most Played sliders but overflows this grid's actual
     185px columns by 20px per card, which is what was causing the overlap. */
  #mostPopularSection .game-card {
    min-width: 0 !important; max-width: none !important; width: 100% !important;
  }
}

/* GAME GRID */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  /* Grid items stretch to the row's tallest cell by default — this keeps each card
     sized to its own content instead of matching its tallest row-mate. */
  align-items: start;
}

/* ── New Game Card Layout ─────────────────────────────────── */
.game-card-link { text-decoration: none; color: inherit; cursor: pointer; }
.rent-btn-unavail { background: #1a1a1a !important; color: #444 !important; cursor: not-allowed !important; }
.rent-btn-reserve { background: linear-gradient(135deg,#1a0a3a,#3a1a6a) !important; color: #a78bfa !important; border: 1px solid #4a2a8a !important; }
.gc-cover-wrap { position: relative; }
.gc-platform-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.2rem 0.45rem;
  border-radius: 5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.15);
}
/* Corner badge instead of a full-width strip — stays urgent without covering the cover art */
.gc-slot-banner {
  position: absolute;
  top: 8px; left: 8px;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  padding: 0.28rem 0.6rem;
  border-radius: 6px;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.gc-slot-banner-last {
  background: #dc2626;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 2px 10px rgba(220,38,38,0.5);
  animation: gc-pulse 1.6s ease-in-out infinite;
}
.gc-slot-banner-none {
  background: rgba(15, 15, 15, 0.92);
  color: #bbb;
  border: 1px solid rgba(255,255,255,0.18);
}
.gc-new-badge {
  position: absolute;
  bottom: 6px; right: 6px;
  background: linear-gradient(135deg, var(--ps-blue), #FFD700);
  color: #000;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 8px rgba(240,165,0,0.5);
}
@keyframes gc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}
@keyframes gc-breathe {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 rgba(220,38,38,0); }
  50% { opacity: 0.8; box-shadow: 0 0 16px rgba(220,38,38,0.65); }
}
.gc-new-days-left {
  display: block;
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  padding: 0.55rem 0.75rem;
  animation: gc-breathe 2.4s ease-in-out infinite;
}
.gc-genre {
  font-size: 0.75rem;
  font-weight: 700;
  color: #555;
  letter-spacing: 0.8px;
  margin-bottom: -0.2rem;
}
/* ── Summary price ──────────────────────────────────────────────────────
   Replaces the full Non-Trophy/Trophy × 10/15/30-day table with one
   "Starts at ₱X" number plus availability pills — that table was the
   source of every mobile clipping/overflow bug on this card. The full
   table now lives on the game page. Always visible; no hover/tap reveal. */
.gc-summary {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 0.5rem; background: #111; border: 1px solid #222; border-radius: 8px;
  padding: 0.5rem 0.6rem; margin-top: 0.5rem;
}
.gc-summary-label { font-size: 0.62rem; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.3px; }
.gc-summary-amount { font-size: 1.05rem; font-weight: 800; color: #F0A500; line-height: 1.15; }
.gc-summary-was { font-size: 0.68rem; color: #555; text-decoration: line-through; }
.gc-summary-status { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.gc-pill {
  font-size: 0.66rem; font-weight: 700; padding: 0.1rem 0.32rem;
  border-radius: 4px; display: inline-block; white-space: nowrap;
}
.gc-pill-yes { background: rgba(34,197,94,0.15); color: #22c55e; }
.gc-pill-tr  { background: rgba(255,196,0,0.15); color: #ffc400; }
.gc-pill-ps4 { background: rgba(96,165,250,0.15); color: #60a5fa; }
.gc-pill-no  { background: rgba(239,68,68,0.12); color: #ef4444; }
.gc-summary-more {
  display: block; font-size: 0.72rem; font-weight: 600; color: var(--ps-blue);
  text-decoration: none; margin-top: 0.35rem;
}
.gc-summary-more:hover { text-decoration: underline; }

.game-card {
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: auto;
}
.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(240,165,0,0.15);
  border-color: rgba(240,165,0,0.25);
}

.game-cover {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  background: #111;
  flex-shrink: 0;
}

.game-cover-placeholder {
  width: 100%;
  height: 260px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #111 0%, #1a1a2e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #333;
}
.game-cover-placeholder svg { width: 48px; height: 48px; opacity: 0.4; }
.game-cover-placeholder span { font-size: 0.75rem; opacity: 0.5; }

.game-info { padding: 1rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; }
.game-title { font-weight: 700; font-size: 0.95rem; line-height: 1.3; height: 1.24rem; overflow: hidden; white-space: nowrap; flex-shrink: 0; }
.game-platform {
  font-size: 0.75rem;
  color: var(--ps-blue);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.slot-availability { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.6rem; }
.slot-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; }
.slot-label { color: var(--text-secondary); font-weight: 600; }
.slot-avail { color: #22c55e; font-weight: 700; }
.slot-unavail { color: #ef4444; font-weight: 600; opacity: 0.8; }
.game-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.badge-available { background: rgba(46,204,113,0.15); color: #2ecc71; border: 1px solid rgba(46,204,113,0.3); }
.badge-unavailable { background: rgba(231,76,60,0.15); color: #e74c3c; border: 1px solid rgba(231,76,60,0.3); }
.badge-renters { background: rgba(255,255,255,0.07); color: var(--text-secondary); border: 1px solid var(--border); }

.price-block {
  margin-top: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: #111;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.price-block-trophy {
  background: #110d00;
  border-color: rgba(255,196,0,0.2);
}
.price-block-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 0.4rem;
}
.price-tiers {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
}
.price-label { color: var(--text-secondary); }
.price-val { font-weight: 700; color: #fff; }
.trophy-deposit-note {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: #886600;
  font-style: italic;
}

.trophy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-weight: 600;
  background: rgba(255, 196, 0, 0.12);
  color: #ffc400;
  border: 1px solid rgba(255, 196, 0, 0.3);
}
.trophy-badge svg { width: 11px; height: 11px; }

.rent-btn {
  width: 100%;
  padding: 0.65rem;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: auto;
  flex-shrink: 0;
}
.rent-btn:hover { background: #F0A500; color: #000; }
.rent-btn:disabled { background: #1a1a1a; color: #444; cursor: not-allowed; }

/* BROWSE PAGE */
.browse-header {
  padding: 2rem 2rem 0;
  max-width: 1400px;
  margin: 0 auto;
}
.browse-header h1 { font-size: 2rem; font-weight: 900; margin-bottom: 1.5rem; }

.filters {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2rem;
}
.filter-select {
  padding: 0.65rem 1rem;
  background: #111;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}
.filter-select:focus { outline: none; border-color: #F0A500; }
.filter-btn {
  padding: 0.65rem 1.25rem;
  background: var(--ps-blue);
  color: #000;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9rem;
}
.filter-btn:hover { background: #FFD700; }

.results-count {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

/* VISITOR STAT CARDS */
.stat-card {
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.stat-card-label { font-size: 0.75rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.35rem; }
.stat-card-num { font-size: 2rem; font-weight: 900; line-height: 1; margin-bottom: 0.2rem; }
.stat-card-sub { font-size: 0.75rem; color: #555; }

/* ADMIN */
.admin-container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.admin-header h1 { font-size: 1.8rem; font-weight: 900; }

.alert {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.alert-success { background: rgba(46,204,113,0.15); color: #2ecc71; border: 1px solid rgba(46,204,113,0.3); }
.alert-danger { background: rgba(231,76,60,0.15); color: #e74c3c; border: 1px solid rgba(231,76,60,0.3); }

/* ADD GAME FORM */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.form-card h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group.full { grid-column: 1 / -1; }
.form-group input[hidden] { display: none !important; }
.form-group[hidden] { display: none !important; }
.form-group label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.65rem 0.9rem;
  background: #111;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  font-family: inherit;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: #F0A500; box-shadow: 0 0 0 2px rgba(240,165,0,0.1); }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-actions { margin-top: 1rem; display: flex; gap: 0.75rem; }

/* Game swap preview — shown on the customer edit page when the selected game
   differs from the one originally rented/bought. */
.cust-swap-box { background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 10px; padding: 0.9rem 1rem; }
.cust-swap-title { font-size: 0.78rem; font-weight: 800; color: #ccc; margin-bottom: 0.6rem; letter-spacing: 0.3px; }
.cust-swap-rows { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px dashed #2a2a2a; }
.cust-swap-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
.cust-swap-row span { color: #666; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4px; }
.cust-swap-row strong { color: #fff; }
.cust-swap-topup { color: #fbbf24; font-size: 0.9rem; font-weight: 700; }
.cust-swap-ok { color: #4ade80; font-size: 0.9rem; font-weight: 700; }
.cust-swap-sub { color: #888; font-size: 0.75rem; font-weight: 500; margin-top: 0.2rem; }
.cust-swap-note { color: #f59e0b; font-size: 0.75rem; margin-top: 0.5rem; }

/* SEARCHABLE SELECT — replaces plain <select> with a filterable combobox in the admin panel */
.ss-wrap { position: relative; }
/* Visually hidden (not display:none) so native `required` validation still fires on submit. */
select.ss-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ss-input {
  width: 100%; padding: 0.65rem 0.9rem; background: #111; border: 1px solid var(--border);
  border-radius: 8px; color: #fff; font-size: 0.9rem; font-family: inherit; cursor: pointer;
}
.ss-input:focus { outline: none; border-color: #F0A500; box-shadow: 0 0 0 2px rgba(240,165,0,0.1); }
.ss-panel {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  max-height: 260px; overflow-y: auto; background: #161616; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.ss-panel.open { display: block; }
.ss-group { padding: 0.4rem 0.8rem 0.2rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #666; }
.ss-option { padding: 0.5rem 0.9rem; font-size: 0.85rem; color: #eee; cursor: pointer; }
.ss-option:hover, .ss-option.hover { background: rgba(240,165,0,0.15); }
.ss-option.active { color: #F0A500; font-weight: 600; }
.ss-empty { padding: 0.6rem 0.9rem; font-size: 0.82rem; color: #555; font-style: italic; }

/* Business Dashboard — year filter, live-status tag, month drill-down */
.dash-tag { font-size: 0.75rem; font-weight: 700; color: #666; text-transform: none; letter-spacing: 0; background: #1a1a1a; border-radius: 4px; padding: 0.05rem 0.35rem; margin-left: 0.3rem; }
.dash-month-stat { background: #0d0d0d; border: 1px solid #1e1e1e; border-radius: 8px; padding: 0.6rem 0.5rem; text-align: center; }
.dash-month-val { font-size: 1.1rem; font-weight: 900; line-height: 1.1; }
.dash-month-lbl { font-size: 0.75rem; color: #555; margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.4px; }

/* GAMES TABLE */
.table-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.table-card h2 { font-size: 1.1rem; font-weight: 700; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.games-table { width: 100%; border-collapse: collapse; }
.games-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  background: #111;
}
.games-table td { padding: 0.875rem 1rem; border-top: 1px solid var(--border); font-size: 0.875rem; vertical-align: middle; }
.games-table tr:hover td { background: rgba(255,255,255,0.02); }

.table-cover { width: 40px; height: 53px; object-fit: cover; border-radius: 4px; background: #111; display: block; }
.table-cover-placeholder { width: 40px; height: 53px; background: #1a1a1a; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #333; font-size: 1.2rem; }

.action-btns { display: flex; gap: 0.5rem; }
.btn-edit, .btn-delete {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.btn-edit { background: rgba(240,165,0,0.15); color: #F0A500; }
.btn-edit:hover { background: #F0A500; color: #000; }
.btn-delete { background: rgba(231,76,60,0.15); color: #e74c3c; }
.btn-delete:hover { background: #e74c3c; color: #fff; }

/* EDIT PAGE */
.edit-container { max-width: 700px; margin: 2rem auto; padding: 0 2rem; }
.edit-container h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 1.5rem; }
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-secondary); text-decoration: none; font-size: 0.875rem; margin-bottom: 1.5rem; }
.back-link:hover { color: #fff; }

/* MODAL / RENT FLOW */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  max-width: 420px;
  width: 90%;
  text-align: center;
}
.modal h2 { font-size: 1.3rem; margin-bottom: 0.75rem; }
.modal p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.5rem; }
.modal-actions { display: flex; gap: 1rem; justify-content: center; }

/* HOW IT WORKS */
.how-section { padding: 4rem 2rem; }
.how-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.how-inner h2 { font-size: 1.75rem; font-weight: 900; margin-bottom: 3rem; }
/* Steps connect via a horizontal track running through the circle centers, like a
   checkout progress bar. Each segment is anchored to its own step's center and
   spans exactly one column width plus the grid gap, so it lands precisely on the
   next circle's center regardless of container width — a single bar sized by
   percentage would drift off-center once `gap` eats into the column widths.
   Hidden once .steps wraps to a narrower grid below 900px. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.step { padding: 1.5rem; position: relative; z-index: 1; }
.step:not(:last-child)::after {
  content: ''; position: absolute; top: 48px; left: 50%; width: calc(100% + 2rem); height: 2px;
  background: linear-gradient(90deg, var(--ps-blue), rgba(240,165,0,0.25));
  z-index: 0;
}
.step-num {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, #C47F00, #F0A500);
  border: 3px solid #111;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.2rem;
  margin: 0 auto 1rem;
  box-shadow: 0 0 0 1px rgba(240,165,0,0.4);
}
.step h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.step p { font-size: 0.875rem; color: var(--text-secondary); }
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
}
@media (max-width: 480px) {
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* Homepage only: all 4 steps condensed onto one horizontally-scrollable line
     instead of stacking into 4 separate rows — description text drops so each
     step is just a number + short title. */
  .home-page .steps {
    display: flex; grid-template-columns: none; flex-wrap: nowrap;
    overflow-x: auto; gap: 0.75rem; padding-bottom: 0.4rem; scrollbar-width: none;
  }
  .home-page .steps::-webkit-scrollbar { display: none; }
  .home-page .step { flex: 0 0 auto; width: 92px; padding: 0.6rem 0.4rem; text-align: center; }
  .home-page .step p { display: none; }
  .home-page .step h3 { font-size: 0.72rem; line-height: 1.2; margin: 0; }
  .home-page .step .step-num { width: 32px; height: 32px; font-size: 0.85rem; border-width: 2px; margin: 0 auto 0.4rem; }
}

/* FOOTER */
footer {
  background: #000;
  border-top: 1px solid #111;
  padding: 3rem 2rem 1.5rem;
}
.footer-inner { max-width: 1300px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2rem;
}
.footer-col { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col-title {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #666; margin-bottom: 0.15rem;
}
.footer-col a { color: var(--text-secondary); text-decoration: none; font-size: 0.85rem; transition: color 0.15s; }
.footer-col a:hover { color: var(--ps-blue); }
.footer-note { font-size: 0.76rem; color: #555; line-height: 1.5; }
.footer-brand p { color: var(--text-secondary); font-size: 0.82rem; line-height: 1.6; margin: 0.15rem 0 0.35rem; max-width: 34ch; }
.social-icons { display: flex; gap: 0.6rem; }
.social-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0.85;
}
.social-icon:hover { transform: translateY(-3px); opacity: 1; }
.social-icon svg { width: 18px; height: 18px; }
.social-icon.facebook { background: #1877f2; color: #fff; }
.social-icon.messenger { background: linear-gradient(135deg, #0099ff, #a033ff); color: #fff; }
.footer-pay-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.footer-pay-badge {
  font-size: 0.75rem; font-weight: 700; color: #ccc; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem 0.7rem;
}
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  padding-top: 1.5rem; border-top: 1px solid #141414;
}
.footer-copy { font-size: 0.75rem; color: #444; }
.footer-tagline { font-size: 0.75rem; color: #333; }
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* TOAST */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 999;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s;
  max-width: 300px;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { border-color: rgba(46,204,113,0.4); color: #2ecc71; }
.toast.error { border-color: rgba(231,76,60,0.4); color: #e74c3c; }

/* PS PLUS BROWSE ENTRIES */
.psplus-browse-entry {
  background: linear-gradient(135deg,#0d0d00,#111);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  transition: border-color 0.2s;
}
.psplus-browse-entry:hover { border-color: rgba(255,215,0,0.35); }
.psplus-browse-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.psplus-browse-cover {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.psplus-browse-cover-wide {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
}
.psplus-browse-cover-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: linear-gradient(135deg,#1a1a00,#2a2000);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFD700;
  flex-shrink: 0;
}
.psplus-browse-games {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.psplus-browse-game-tag {
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.2);
  color: #ccc;
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
}

/* PS PLUS DELUXE */
.psplus-hero {
  position: relative;
  background: #000;
  padding: 4rem 2rem 3.5rem;
  overflow: hidden;
}
.psplus-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(255,215,0,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(255,165,0,0.05) 0%, transparent 50%),
    linear-gradient(135deg, #000 0%, #0a0800 100%);
  pointer-events: none;
}
.psplus-hero-bg::after {
  content: '';
  position: absolute;
  right: -100px; top: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,215,0,0.06) 0%, transparent 70%);
}
.psplus-hero-content { position: relative; z-index: 1; max-width: 700px; }
.psplus-logo-row { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; }
.psplus-ps-icon { width: 56px; height: 56px; flex-shrink: 0; }
.psplus-eyebrow { font-size: 0.75rem; color: #666; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.25rem; }
.psplus-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1;
}
.psplus-title span { color: #FFD700; }
.psplus-subtitle { font-size: 0.9rem; color: #886600; font-weight: 600; margin-top: 0.35rem; font-style: italic; }
.psplus-desc { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.65; margin-bottom: 1.5rem; max-width: 520px; }
.psplus-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Pricing */
.psplus-pricing-section {
  background: #080600;
  border-top: 2px solid #1a1500;
  border-bottom: 1px solid #1a1500;
  padding: 3rem 2rem;
}
.psplus-pricing-inner { max-width: 700px; margin: 0 auto; text-align: center; }
.psplus-pricing-inner h2 { font-size: 1.75rem; font-weight: 900; margin-bottom: 0.25rem; }
.psplus-price-grid {
  display: flex;
  gap: 0;
  margin: 0 0 1.5rem;
  background: #111;
  border: 1px solid #2a2000;
  border-radius: 16px;
  overflow: hidden;
}
.psplus-price-card { flex: 1; padding: 1.5rem 1.25rem; }
.psplus-price-card-trophy { background: #0d0900; }
.psplus-price-divider { width: 1px; background: #2a2000; flex-shrink: 0; }
.psplus-price-card-label { font-size: 0.9rem; font-weight: 800; margin-bottom: 0.2rem; color: #aaa; }
.psplus-price-card-sub { font-size: 0.75rem; color: #444; margin-bottom: 1rem; }
.psplus-price-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.psplus-price-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
}
.psplus-price-row-highlight { background: rgba(255,215,0,0.06); }
.psplus-price-days { font-size: 0.82rem; color: #777; font-weight: 600; }
.psplus-price-amount { font-size: 1.1rem; font-weight: 900; color: #fff; }
.psplus-deposit-note { font-size: 0.75rem; color: #886600; margin-top: 0.75rem; font-style: italic; }
.psplus-notes {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.75rem 1.5rem;
  font-size: 0.78rem; color: #555;
  margin-top: 2rem;
}

/* Year section */
.psplus-year-section { padding: 3rem 2rem 1rem; max-width: 1400px; margin: 0 auto; }
.psplus-year-inner { max-width: 1400px; margin: 0 auto; }
.psplus-year-header { margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.psplus-year-title {
  font-size: 1.3rem; font-weight: 900;
  display: flex; align-items: center; gap: 0.75rem;
}
.psplus-year-title::after { content: ''; flex: 1; height: 1px; background: #1a1500; }
.psplus-year-badge {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000;
  font-size: 0.85rem; font-weight: 900;
  padding: 0.2rem 0.75rem;
  border-radius: 20px;
}
.psplus-months-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.psplus-month-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.psplus-month-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(255,215,0,0.12);
  border-color: rgba(255,215,0,0.3);
}
.psplus-month-cover-wrap { position: relative; }
.psplus-month-cover {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  background: #111;
}
.psplus-month-cover-placeholder {
  width: 100%; aspect-ratio: 16/9;
  background: linear-gradient(135deg, #0a0800, #1a1400);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.psplus-month-placeholder-icon { font-size: 2rem; opacity: 0.4; }
.psplus-month-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  padding: 1rem 0.75rem 0.5rem;
  font-size: 0.75rem; font-weight: 900; color: #FFD700;
  letter-spacing: 1.5px;
}
.psplus-month-info { padding: 0.75rem; }
.psplus-month-name { font-weight: 700; font-size: 0.875rem; margin-bottom: 0.4rem; }
.psplus-games-list { display: flex; flex-direction: column; gap: 0.15rem; }
.psplus-game-item { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; }
.psplus-month-notes { font-size: 0.75rem; color: #444; margin-top: 0.5rem; font-style: italic; }

/* PS Plus Most Played — compact card */
.psplus-popular-card {
  border-color: #2a2000;
  height: 380px !important;
}
.psplus-popular-card:hover { box-shadow: 0 12px 40px rgba(255,215,0,0.18); border-color: rgba(255,215,0,0.4); }
.psplus-popular-card .game-cover,
.psplus-popular-card .game-cover-placeholder { height: 200px !important; }
.psplus-popular-card .game-info { gap: 0.25rem; padding: 0.75rem; }
.psplus-popular-card .rent-btn { margin-top: auto; flex-shrink: 0; }
.psplus-popular-rank {
  position: absolute;
  top: 8px; left: 8px;
  background: linear-gradient(135deg, #856200, #FFD700);
  color: #000;
  font-size: 0.75rem; font-weight: 900;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* Admin PS Plus table */
.psplus-admin-entry {
  display: flex; gap: 0.75rem; align-items: center;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
}
.psplus-admin-entry:last-child { border-bottom: none; }
.psplus-admin-cover { width: 64px; height: 36px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: #111; }
.psplus-admin-cover-placeholder { width: 64px; height: 36px; background: #1a1400; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }

/* UPCOMING GAMES SLIDER */
.upcoming-slider-wrap { position: relative; display: flex; align-items: center; gap: 0.5rem; }
/* align-items: flex-start — otherwise flex stretches every card in the row to
   match the tallest card's height. */
.upcoming-slider { display: flex; align-items: flex-start; gap: 1.25rem; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0.5rem; padding-top: 18px; flex: 1; }
.upcoming-slider::-webkit-scrollbar { display: none; }
.upcoming-slider .game-card { min-width: 240px; max-width: 240px; scroll-snap-align: start; flex-shrink: 0; }
.slider-arrow { background: rgba(30,30,30,0.9); border: 1px solid #333; color: #fff; font-size: 2rem; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; z-index: 2; padding: 0; }
.slider-arrow:hover { background: #7b2ff7; border-color: #7b2ff7; }

/* UPCOMING GAMES — compact card */
.upcoming-card {
  border-color: #2a1a3a;
  height: 380px !important;
  overflow: visible;
}
.upcoming-card:hover { box-shadow: 0 12px 40px rgba(123,47,247,0.25); border-color: #5a2a8a; }
.upcoming-card .game-cover,
.upcoming-card .game-cover-placeholder { height: 200px !important; border-radius: 13px 13px 0 0; }
.upcoming-card .game-info { gap: 0.25rem; padding: 0.75rem; }
.upcoming-card .rent-btn { margin-top: auto; flex-shrink: 0; }
.upcoming-overlay-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: linear-gradient(135deg, #7b2ff7, #f107a3);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  text-transform: uppercase;
}

/* HOW IT WORKS PAGE */
.hiw-step {
  display: grid;
  grid-template-columns: 56px 2px 1fr;
  gap: 0 1.5rem;
  margin-bottom: 0;
}
.hiw-num {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #C47F00, #F0A500);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 900; color: #000;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(240,165,0,0.2);
  position: relative; z-index: 1;
}
.hiw-connector {
  width: 2px;
  background: linear-gradient(to bottom, var(--ps-blue), transparent);
  margin: 0 auto;
  min-height: 40px;
}
.hiw-card {
  display: flex;
  gap: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem;
  margin-bottom: 2.5rem;
  align-items: flex-start;
  grid-column: 3;
  grid-row: 1;
}
.hiw-step { align-items: start; }
.hiw-num { grid-column: 1; grid-row: 1; margin-top: 1.75rem; }
.hiw-connector { grid-column: 2; grid-row: 1 / 3; }

.hiw-icon {
  font-size: 2rem;
  width: 52px; height: 52px;
  background: rgba(0,112,209,0.12);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hiw-body { flex: 1; }
.hiw-body h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 0.6rem; }
.hiw-body p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.65; }

.hiw-tip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1rem;
  background: rgba(240,165,0,0.08);
  border: 1px solid rgba(240,165,0,0.25);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  font-size: 0.8rem; color: #F0A500; font-weight: 600;
}

.hiw-details {
  display: flex; flex-direction: column; gap: 0.75rem;
  margin: 1.25rem 0;
}
.hiw-detail-item {
  display: flex; align-items: flex-start; gap: 0.85rem;
  background: #111;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.hiw-detail-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; }
.hiw-detail-item strong { display: block; font-size: 0.9rem; margin-bottom: 0.15rem; }
.hiw-detail-item span { font-size: 0.8rem; color: var(--text-secondary); }

.hiw-example {
  background: #0a0a0a;
  border: 1px solid #222;
  border-left: 3px solid var(--ps-blue);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}

@media (max-width: 600px) {
  .hiw-step { grid-template-columns: 40px 2px 1fr; gap: 0 1rem; }
  .hiw-num { width: 40px; height: 40px; font-size: 1rem; }
  .hiw-card { flex-direction: column; gap: 0.75rem; padding: 1.25rem; }
  .hiw-icon { width: 40px; height: 40px; font-size: 1.5rem; }
}

/* TOGGLE SWITCH */
.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: #222; border: 1px solid #333;
  border-radius: 26px; transition: 0.2s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #555; border-radius: 50%; transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: rgba(240,165,0,0.2); border-color: #F0A500; }
.toggle-switch input:checked + .toggle-slider::before { background: #F0A500; transform: translateX(22px); }

/* GAME DESCRIPTION INLINE HOVER */
.game-desc-inline {
  display: none;
  font-size: 0.75rem;
  color: #888;
  line-height: 1.5;
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.65rem;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid var(--ps-blue);
  border-radius: 0 6px 6px 0;
}
.game-card:hover .game-desc-inline { display: block; }

/* RESPONSIVE */
@media (max-width: 600px) {
  nav { padding: 0 1rem; }
  .stats-bar { gap: 2rem; }
  .section { padding: 2rem 1rem; }
  .games-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .gc-summary { padding: 0.4rem 0.5rem; }
  .gc-summary-amount { font-size: 0.92rem; }
  .gc-pill { font-size: 0.6rem; padding: 0.08rem 0.26rem; }
  .psplus-months-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .psplus-month-cover { aspect-ratio: 16/9; }
  .psplus-month-cover-placeholder { aspect-ratio: 16/9; }
  /* Browse PS Plus monthly — full width 16:9 on mobile */
  .psplus-browse-header { flex-wrap: wrap; }
  .psplus-browse-cover-wide { width: 100%; height: auto; aspect-ratio: 16/9; border-radius: 8px 8px 0 0; margin-bottom: 0.5rem; }
  .admin-container { padding: 1rem; }
  .games-table { font-size: 0.8rem; }
  .games-table th:nth-child(4),
  .games-table td:nth-child(4) { display: none; }

  /* Compact card for mobile 3-column */
  .game-card { height: auto; min-height: 0; border-radius: 10px; }
  .game-cover { height: 130px; }
  .gc-cover-wrap .game-cover { height: 130px; }
  .game-info { padding: 0.5rem; }
  .game-title { font-size: 0.75rem; line-height: 1.2; margin-bottom: 0.25rem; -webkit-line-clamp: 2; }
  .game-platform { font-size: 0.75rem; margin-bottom: 0.2rem; }
  .rent-btn { font-size: 0.75rem; padding: 0.4rem 0.5rem; margin-top: 0.4rem; border-radius: 6px; }
  .gc-platform-badge { font-size: 0.75rem; padding: 0.2rem 0.4rem; }
  .gc-slot-row { font-size: 0.75rem; }
  .gc-price-row { font-size: 0.75rem; }
  .game-desc-inline { display: none !important; }

  /* Upcoming/Coming Soon slider compact */
  .upcoming-slider .game-card { min-width: calc(50vw - 1px); max-width: calc(50vw - 1px); }

  /* Home page sliders — tight 2-card layout */
  .upcoming-slider { gap: 1px; }
  .slider-arrow { display: none; }
  .upcoming-slider-wrap { gap: 0; }
  .slider-card-wrap {
    min-width: calc(50vw - 1px) !important;
    max-width: calc(50vw - 1px) !important;
  }
  .slider-card-wrap .game-card { height: auto; border-radius: 12px; }
  .slider-card-wrap .game-cover { height: 160px; }
  .slider-card-wrap .gc-cover-wrap .game-cover { height: 160px; }
  .slider-card-wrap .game-info { padding: 0.5rem 0.5rem 0.6rem; }
  .slider-card-wrap .gc-genre { font-size: 0.75rem; }
  .slider-card-wrap .game-title { font-size: 0.8rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.3rem; }
  /* Compact summary price — these cards run ~50vw wide, tighter than a full-width card. */
  .slider-card-wrap .gc-summary { padding: 0.35rem 0.45rem; margin-top: 0.3rem; }
  .slider-card-wrap .gc-summary-label { font-size: 0.56rem; }
  .slider-card-wrap .gc-summary-amount { font-size: 0.85rem; }
  .slider-card-wrap .gc-summary-was { font-size: 0.58rem; }
  .slider-card-wrap .gc-pill { font-size: 0.54rem; padding: 0.06rem 0.22rem; }
  .slider-card-wrap .gc-summary-more { font-size: 0.62rem; margin-top: 0.25rem; }
  .slider-card-wrap .rent-btn { font-size: 0.75rem; padding: 0.35rem 0.4rem; margin-top: 0.35rem; border-radius: 7px; }
  .slider-card-wrap .gc-platform-badge { font-size: 0.75rem; padding: 0.18rem 0.4rem; }
  /* PS Plus cards */
  .slider-card-wrap .psplus-popular-card { height: auto !important; }
  .slider-card-wrap .psplus-popular-card > div:first-child img { height: 160px; width: 100%; object-fit: cover; border-radius: 12px 12px 0 0; }
  .slider-card-wrap .psplus-popular-card .game-info { padding: 0.5rem; }
  .slider-card-wrap .psplus-popular-card .game-title { font-size: 0.8rem; font-weight: 700; }
  .slider-card-wrap .psplus-popular-card .rent-btn { font-size: 0.75rem; padding: 0.35rem; margin-top: 0.35rem; }
}

/* Reviews */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; padding: 0 1rem; }
.review-card { background: #111; border: 1px solid #222; border-radius: 14px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; transition: transform 0.2s, box-shadow 0.2s; }
.review-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.4); border-color: #333; }
.review-stars { font-size: 1rem; letter-spacing: 2px; }
.review-text { color: #ccc; font-size: 0.88rem; line-height: 1.65; flex: 1; margin: 0; font-style: italic; }
.review-footer { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.review-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #7b2ff7, #f107a3); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 0.9rem; flex-shrink: 0; }
.review-name { font-weight: 700; color: #fff; font-size: 0.88rem; }
.review-game { font-size: 0.75rem; color: #777; margin-top: 0.1rem; }
.review-fb-badge { margin-left: auto; display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: #1877F2; font-weight: 600; background: rgba(24,119,242,0.1); border: 1px solid rgba(24,119,242,0.2); border-radius: 20px; padding: 0.2rem 0.6rem; flex-shrink: 0; }
@media (max-width: 600px) {
  .reviews-grid { grid-template-columns: 1fr; gap: 0.75rem; padding: 0 0.5rem; }
  /* Homepage only: reviews scroll horizontally like Coming Soon / Most Played,
     instead of stacking into a tall vertical list. */
  .home-page .reviews-grid {
    display: flex; grid-template-columns: none; overflow-x: auto; gap: 0.75rem;
    padding: 0 1rem 0.4rem; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .home-page .reviews-grid::-webkit-scrollbar { display: none; }
  .home-page .review-card { flex: 0 0 auto; width: 78vw; max-width: 300px; scroll-snap-align: start; }
}

/* Visitor / filter buttons */
.vis-filter-btn { background:#1a1a1a; color:#777; border:1px solid #333; border-radius:20px; cursor:pointer; font-weight:600; transition:all 0.15s; }
.vis-filter-btn:hover { border-color:#555; color:#ccc; }
.vis-filter-btn.vis-filter-active { background:rgba(0,112,209,0.15); border-color:var(--ps-blue); color:var(--ps-blue); }