/* --- 1. VARIABLES & CORE --- */
:root {
  /* Colors: Indian Traditional & Cyber-Vedic */
  --bg-deep: #1e1a2f;
  --bg-surface: #2a2340;
  --color-saffron: #ff9933;
  --color-turmeric: #f4c542;
  --color-maroon: #b43b3b;
  --color-indigo: #6a4e9b;
  --color-rose: #e27c7c;
  --color-teal: #2c8c7c;
  --text-main: #faf9f6;
  /* Headings use their own token: a game page may override it from theme data
     (theme.headingColor). Everywhere else it tracks --text-main. */
  --text-heading: var(--text-main);
  --text-dim: #cdc9e6;
  --border-glow: rgba(255, 153, 51, 0.6);
  --color-steel: #3f3f46; /* structural borders (cards, tables, footers) */

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #ff9933 0%, #f4c542 50%, #b43b3b 100%);
  --grad-secondary: linear-gradient(135deg, #6a4e9b 0%, #2c8c7c 100%);
  --grad-surface: linear-gradient(145deg, #2a2340 0%, #1e1a2f 100%);
  --grad-hero: linear-gradient(145deg, rgba(30, 26, 47, 0.85), rgba(108, 78, 155, 0.6));

  /* Spacing & Typography */
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;

  --font-indic: 'Jaini', system-ui;
  --font-header: 'Rajdhani', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  /* The nav is site chrome, not page content: it keeps this font even when a
     game page overrides --font-header from its theme. */
  --font-nav: 'Rajdhani', sans-serif;
  --fs-h1: 4.0rem;
  --fs-h2: 2.5rem;
  --fs-h3: 1.5rem;
  /* The single game page title: 30% larger than the h2 size. */
  --fs-game-title: calc(var(--fs-h2) * 1.3);
  --fs-small: 0.875rem;
  --site-width: 1024px;
  /* Square portrait beside a founder's name (studio.php, presskit.php).
     Keep the img width/height attributes in the markup in sync. */
  --founder-thumb: 96px;

  /* High-shine Polished Steel Gradient */
  --grad-steel: linear-gradient(
    135deg,
    #9f9f9f 0%,
    #d1d1d1 35%,
    #ffffff 50%,
    #d1d1d1 65%,
    #757575 100%
  );
}

/* --- 2. BASE ELEMENTS --- */
body {
  background: linear-gradient(rgba(30, 26, 47, 0.7), rgba(20, 18, 35, 0.8)),
              repeating-linear-gradient(45deg, rgba(255, 153, 51, 0.03) 0px, rgba(255, 153, 51, 0.03) 2px, transparent 2px, transparent 8px),
              url('/mainbg.webp') fixed center/cover;
  background-blend-mode: overlay;
  color: var(--text-main);
  font-family: var(--font-body);
  margin: 0;
  line-height: 1.6;
}

.container {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  position: relative;
  z-index: 2;
}

h1 {
  font-family: var(--font-indic); /* Switched to Indic-style font */
  font-size: var(--fs-h1);
  font-weight: 700;
  text-transform: none; /* Indic fonts often look better without forced caps */
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(255, 153, 51, 0.3));
  margin-bottom: var(--space-md);
  display: table;
}

h2 {
  font-family: var(--font-header); /* Kept Rajdhani as requested */
  font-size: var(--fs-h2);
  font-weight: 600;
  text-transform: uppercase;
  background: var(--grad-steel);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  border-left: 5px solid var(--color-saffron);
  padding-left: var(--space-md);
  margin-bottom: var(--space-lg);
  display: table;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

h3 {
  font-family: var(--font-header); /* Kept Rajdhani as requested */
  font-size: var(--fs-h3);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text-heading);
  margin-bottom: var(--space-sm);
}

/* --- 3. COMMON COMPONENTS --- */

/* Navigation */
.nav-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(30, 26, 47, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 153, 51, 0.4);
  transition: background 0.3s;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 0;
}

.logo {
  font-family: var(--font-header);
  font-size: 1.5rem;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #ff9933, #f4c542);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
}

/* Active nav state (templates/header.php) */
.nav-links a.is-active { color: var(--color-saffron); }

.nav-links a {
  color: var(--text-main);
  text-decoration: none;
  margin-left: var(--space-lg);
  font-family: var(--font-nav);
  text-transform: uppercase;
  transition: 0.3s;
}

/* The CTA inside the nav is part of the menu, so it follows --font-nav too. */
.nav-header .btn-secondary { font-family: var(--font-nav); }

.nav-links a:hover { color: var(--color-turmeric); }
.nav-blur { background: rgba(42, 35, 64, 0.96); }

/* Buttons */
.btn-primary, .btn-secondary {
  display: inline-block;
  font-family: var(--font-header);
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  padding: var(--space-md) var(--space-lg);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.btn-primary {
  background: var(--grad-primary);
  color: #1e1a2f;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  border: 1px solid rgba(255, 153, 51, 0.5);
}

.btn-primary:hover {
  background: transparent;
  color: var(--color-saffron);
  box-shadow: 0 0 20px var(--border-glow);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-turmeric);
  border: 1px solid var(--color-turmeric);
}

.btn-secondary:hover {
  background: var(--grad-secondary);
  color: #fff;
  box-shadow: 0 0 25px rgba(108, 78, 155, 0.6);
}

/* Cards & Thumbnails */
.card, .devlog-card {
  background: var(--grad-surface);
  border: 1px solid #3f3f46;
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  /* Added transition for smooth hover entry/exit */
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}


.card::before, .devlog-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--color-saffron), var(--color-indigo), var(--color-rose));
  opacity: 0.7;
}

.card:hover, .devlog-card:hover {
  border-color: var(--color-saffron);
  transform: translateY(-5px);
  /* Removed glitch-border animation to stop flickering */
  /* Added a static glow instead for that Vedic-Cyber feel */
  box-shadow: 0 10px 20px rgba(255, 153, 51, 0.2);
}

.game-thumbnail {
  display: block; /* also used as the card's <a> wrapper, so it must be a block */
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  margin-bottom: var(--space-md);
  border: 1px solid #3f3f46;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.game-thumbnail img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
  opacity: 0.9;
}

.card:hover .game-thumbnail img { transform: scale(1.05); opacity: 1; }

/* Catalog card copy + "More Info" link (games.php) */
.card-tagline {
  font-size: var(--fs-small);
  color: var(--text-dim);
  margin-bottom: var(--space-md);
}

.card-link {
  color: var(--color-indigo);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: bold;
  text-transform: uppercase;
}

.card-link:hover { color: var(--color-saffron); }

/* Contact page (contact.php) */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.email-plate {
  margin-top: var(--space-md);
  border: 1px dashed var(--color-indigo);
  padding: var(--space-md);
  display: inline-block;
}

.email-plate img {
  display: block;
  width: auto;
  max-width: 220px;
  height: auto;
}

.social-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.social-list a {
  color: var(--color-turmeric);
  text-decoration: none;
  font-weight: bold;
}

.social-list a:hover { color: var(--color-saffron); }

.section-label {
  color: var(--color-rose);
  font-family: var(--font-header);
  letter-spacing: 3px;
  font-size: 0.8rem;
  margin-bottom: var(--space-sm);
  display: block;
  font-weight: 600;
  text-transform: uppercase;
}

.section-label::before { content: '✦'; color: var(--color-turmeric); margin-right: 6px; }

/* --- 4. PAGE SPECIFIC LAYOUTS --- */

/* Index / Hero */
.hero {
  /* padding: var(--space-xl) 0; */
  height: 74vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--grad-hero);
  border-bottom: 2px solid var(--color-saffron);
}

/* The h1 is display:table (shrink-to-fit for the gradient text), which defeats
   the hero's text-align and left-aligns the title — centre it explicitly, so
   the game name and the description below it are both centred. */
.hero h1 {
  margin-left: auto;
  margin-right: auto;
}

.hero-media-container {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  margin-bottom: var(--space-lg);
  box-shadow: 0 0 35px rgba(0,0,0,0.6);
  overflow: hidden;
}

.hero-media-container video,
.hero-media-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Prevents stretching and ensures it fills the 16:9 box */
}

.active-projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Fix: 2 items per line */
  gap: var(--space-lg);
  margin: var(--space-lg) 0 var(--space-xl);
}

/* A lone active project spans the row and sits centred; adding a second
   project restores the two-column layout automatically. */
.active-projects-grid > .card:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 640px;
}

.legacy-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Fix: 3 items per line */
  gap: var(--space-lg);
  margin: var(--space-lg) 0;
}

/* Home page card grids (news strip + devlog). The class was used in HTML with
   no rule (cards stacked full-width); it is a real two-column grid now and
   collapses to one column in the ≤850px block below. */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin: var(--space-lg) 0 var(--space-xl);
}


/* Devlog Masonry */
.devlog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-auto-rows: 20px;
  gap: var(--space-lg);
}
.card-short { grid-row-end: span 6; }
.card-medium { grid-row-end: span 8; }
.card-long { grid-row-end: span 12; }

.filter-nav {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid #3f3f46;
}

.filter-btn {
  background: none; border: none; color: var(--text-dim);
  font-family: var(--font-header); text-transform: uppercase;
  cursor: pointer; padding: 5px 15px; transition: 0.3s;
}

.filter-btn.active, .filter-btn:hover {
  color: var(--color-saffron);
  border-bottom: 2px solid var(--color-saffron);
}

/* Game Detail */
.main-display {
  width: 100%; 
  border: 1px solid var(--color-saffron);
  box-shadow: 0 0 30px var(--border-glow);
  margin-bottom: var(--space-md);
}

.thumbnail-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
.thumb {
  width: 160px; aspect-ratio: 16 / 9; border: 1px solid #3f3f46;
  cursor: pointer; opacity: 0.7; transition: 0.3s;
}
.thumb.active, .thumb:hover { opacity: 1; border-color: var(--color-saffron); }

.game-content { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-xl); }
.buy-box {
  background: var(--grad-surface);
  padding: var(--space-lg);
  border: 1px solid #3f3f46;
  position: sticky; top: 100px;
}

.specs-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-small);
  background: rgba(255, 255, 255, 0.03);
}
.specs-table td { padding: 12px; border-bottom: 1px solid #3f3f46; }
.specs-label { color: var(--color-saffron); font-weight: bold; text-transform: uppercase; }

/* Studio & Narrative */
.history-content {
  position: relative; padding: var(--space-lg);
  background: var(--grad-surface); border-left: 3px solid var(--color-saffron);
}

.jali-texture {
  background-image: repeating-linear-gradient(45deg, rgba(244,197,66,0.1) 0px, rgba(244,197,66,0.1) 1px, transparent 1px, transparent 8px);
  background-size: 20px 20px;
  top: 0; left: 0; right: 0; bottom: 0;
  position: absolute; pointer-events: none; opacity: 0.2;
}

.press-kit-box {
  background: rgba(108, 78, 155, 0.12);
  border: 1px solid var(--color-indigo);
  padding: var(--space-lg);
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-md); transition: 0.3s;
}

.download-link {
  color: var(--color-turmeric); text-decoration: none; font-weight: bold;
  border: 1px solid var(--color-turmeric); padding: 10px 20px; transition: 0.3s;
}
.download-link:hover { background: var(--grad-secondary); color: #fff; }

/* Founders + press kit (studio.php, presskit.php) */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

/* A founder card is a small round portrait plus name, role and a two-line intro. */
.founder {
  display: grid;
  grid-template-columns: var(--founder-thumb) 1fr;
  gap: var(--space-md);
  align-items: start;
}

.founder-photo {
  width: var(--founder-thumb);
  height: var(--founder-thumb);
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-steel);
  background: var(--bg-deep);
  display: block;
}

.founder-text h3 { margin: 0; }

.founder-bio {
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-small);
  color: var(--text-dim);
}

.press-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  background: var(--grad-surface);
  border: 1px solid var(--color-steel);
  padding: var(--space-lg);
  margin-top: var(--space-xl);
}

.press-logo {
  display: block;
  width: 155px; /* native size of the only logo asset that exists */
  height: auto;
}

.press-header-text h1 { margin-bottom: var(--space-sm); }

.press-header-text a { color: var(--color-saffron); }

.press-tagline {
  color: var(--text-dim);
  max-width: 560px;
}

.press-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-xl);
  align-items: start;
  margin: var(--space-lg) 0 var(--space-xl);
}

.press-nav {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border-left: 2px solid var(--color-steel);
  padding-left: var(--space-md);
}

.press-nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-family: var(--font-header);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.press-nav a:hover { color: var(--color-saffron); }

.press-main section {
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-steel);
}

.press-main section:last-child { border-bottom: 0; margin-bottom: 0; }

.press-main h2 { margin-bottom: var(--space-md); }

.press-main a { color: var(--color-saffron); }

.press-project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
  background: var(--grad-surface);
  border: 1px solid var(--color-steel);
  padding: var(--space-md);
}

.press-project img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-steel);
}

.press-games {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.press-game h3 a {
  color: var(--text-heading);
  text-decoration: none;
}

.press-game h3 a:hover { color: var(--color-saffron); }

.press-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.press-list li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-steel); }

.press-list a { text-decoration: none; }

.press-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
}

.press-asset { margin: 0; }

.press-asset img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-steel);
  margin-bottom: var(--space-sm);
}

.press-asset figcaption,
.press-note {
  font-size: var(--fs-small);
  color: var(--text-dim);
}

/* --- Blog (blog.php, post.php, index.php featured posts) ------------------ */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-lg) 0 var(--space-xl);
}

.post-card h3 { margin-bottom: var(--space-sm); }

.post-card h3 a {
  color: var(--text-main);
  text-decoration: none;
}

.post-card h3 a:hover { color: var(--color-saffron); }

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-family: var(--font-header);
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-saffron);
}

.post-tag { color: var(--color-indigo); }

.post-surface {
  background: var(--grad-surface);
  border: 1px solid var(--color-steel);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.post-surface > :first-child { margin-top: 0; }

/* Draft preview banner (templates/post.php) */
.post-draft-banner {
  border: 1px solid var(--color-maroon);
  border-left: 4px solid var(--color-maroon);
  background: rgba(180, 59, 59, 0.12);
  color: var(--text-main);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: var(--fs-small);
}

.post-draft-banner strong { color: var(--color-rose); letter-spacing: 1px; }
.post-draft-banner a { color: var(--color-saffron); }

/* Date label left, "all entries" link right. */
.post-topline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.post-topline .section-label { margin-bottom: 0; }

.post-backlink {
  color: var(--color-indigo);
  text-decoration: none;
  font-family: var(--font-header);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

.post-backlink:hover { color: var(--color-saffron); }

.post-tagline {
  color: var(--text-dim);
  max-width: 720px;
  margin-top: var(--space-sm);
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
}

.post-tags li {
  font-size: var(--fs-small);
  color: var(--color-indigo);
  border: 1px solid var(--color-indigo);
  padding: 2px var(--space-sm);
}

.post-hero { margin: var(--space-lg) 0; }

.post-hero img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-steel);
}

.post-body { color: var(--text-dim); }

.post-body img {
  /* Never blow a small image up to the column width: it renders at its natural
     size (the markdown renderer emits width/height), shrinks when it is wider
     than the column, and is centred. */
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--space-lg) auto var(--space-sm);
  border: 1px solid var(--color-steel);
}

.post-body h2,
.post-body h3 { margin-top: var(--space-xl); }

.post-body a { color: var(--color-saffron); }

.post-body ul { line-height: 2; }

.post-back {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-steel);
}

.post-back a {
  color: var(--color-indigo);
  text-decoration: none;
  font-family: var(--font-header);
  text-transform: uppercase;
  font-size: var(--fs-small);
}

.post-back a:hover { color: var(--color-saffron); }

@media (max-width: 850px) {
  .post-surface { padding: var(--space-md); }
}

/* Animations */
@keyframes glitch-border {
  0% { box-shadow: 2px 0 0 var(--color-saffron), -2px 0 0 var(--color-indigo); }
  50% { box-shadow: -2px 0 0 var(--color-saffron), 2px 0 0 var(--color-indigo); }
  100% { box-shadow: 2px 0 0 var(--color-saffron), -2px 0 0 var(--color-indigo); }
}

/* --- 5. FOOTER & MANDALA --- */
footer {
  padding: var(--space-sm) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Minimalist Mandala Pattern as a Top Border */
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px; /* Height of the pattern strip */
  background-image: radial-gradient(circle at 4px 4px, var(--color-saffron) 1px, transparent 1px),
                    radial-gradient(circle at 12px 12px, var(--color-indigo) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.6;
  border-top: 1px solid var(--color-saffron);
}


/* Responsive */
@media (max-width: 850px) {
  .game-content, .active-projects-grid, .legacy-projects-grid, .team-grid, .contact-grid, .press-layout, .press-project, .press-games, .grid-layout { grid-template-columns: 1fr; }
  .press-header { grid-template-columns: 1fr; }
  .press-logo { width: 140px; }
  .press-nav { position: static; flex-direction: row; flex-wrap: wrap; border-left: 0; border-bottom: 1px solid var(--color-steel); padding: 0 0 var(--space-sm); }
  .hero h1 { font-size: 2.5rem; }
}

/* --- Game media gallery (templates/game.php) ------------------------------
   Scoped to .media-stage/.sidebar-stack/.thumb-column so the legacy .html
   pages, which share .main-display/.thumb/.buy-box, keep their layout. */
.media-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-deep);
}

.media-stage .media-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

/* Sidebar: buy box and thumbnail column travel together (the old .buy-box
   sticky rule would otherwise let the box float over the thumbnails). */
.sidebar-stack {
  position: sticky;
  top: 100px;
  align-self: start;
}

.sidebar-stack .buy-box { position: static; }

.thumb-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.thumb-column .thumb {
  width: 100%;
  padding: 0;
  background: none;
  display: block;
  overflow: hidden;
}

.thumb-column .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Selected thumbnail: glowing rectangle in the page's text colour, so it
   follows the per-game theme instead of being a fixed accent. */
.thumb-column .thumb.active {
  opacity: 1;
  border-color: var(--text-main);
  box-shadow:
    0 0 0 1px var(--text-main),
    0 0 14px var(--text-main);
}

/* Long galleries scroll inside the column instead of stretching the sidebar
   past the viewport, so the column never leaves the screen. */
.thumb-column {
  max-height: min(58vh, 620px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-saffron) transparent;
}

.thumb-column::-webkit-scrollbar { width: 6px; }
.thumb-column::-webkit-scrollbar-thumb {
  background: var(--color-saffron);
  border-radius: 3px;
}

@media (max-width: 850px) {
  .sidebar-stack { position: static; }
}

/* Translucent panel behind the game content (theme.surface).
   Covers the title, media stage, copy, specs and the sidebar, so text stays
   readable over bright key art. Colour and alpha come from the game's theme. */
.game-surface {
  background: var(--game-surface, rgba(30, 26, 47, 0.72));
  border: 1px solid #3f3f46;
  /* No empty space above the game name: it is the first thing in the panel. Left,
     right and bottom keep the panel's normal inset. */
  padding: 0 var(--space-lg) var(--space-lg);
  margin-bottom: var(--space-xl);
}

.game-surface > :first-child { margin-top: 0; }

/* Markdown "## ..." in a game description labels a section the same way the
   Key Features and System Requirements <h3>s do, so it renders at the h3 size
   instead of the page-level h2 size. Scoped to the description so other pages
   that reuse .game-surface keep their own heading sizes. */
.game-description h2 { font-size: var(--fs-h3); }

/* Markdown tables (a game description or a blog body — md_to_html() emits the
   .md-table wrapper). A table cannot wrap, so a wide one scrolls inside its own
   box instead of pushing the 1024px container sideways on a phone. */
.md-table {
  overflow-x: auto;
  margin: 0 0 var(--space-lg);
  -webkit-overflow-scrolling: touch;
}

.md-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  border: 1px solid var(--color-steel);
}

.md-table th,
.md-table td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-steel);
  text-align: left;
  vertical-align: top;
}

.md-table thead th {
  font-family: var(--font-header);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-heading);
  background: var(--grad-surface);
}

/* Alignment from the separator row (:---, :---:, ---:). Scoped with the element
   so it wins over the text-align: left above. */
.md-table th.md-align-center,
.md-table td.md-align-center { text-align: center; }

.md-table th.md-align-right,
.md-table td.md-align-right { text-align: right; }

/* An image in a cell is capped by its column, never by the page. */
.md-table img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
}

/* The game name stays the page's single h1 (search + screen readers), but a game
   page is denser than a landing page, so it renders 30% above the h2 size
   instead of at the hero size. */
.game-header h1 { font-size: var(--fs-game-title); }

/* The description is followed by the "Key Features" <h3>, which has no top
   margin of its own, while System Requirements gets --space-xl. Give the
   description the same bottom gap so the column is evenly spaced. */
.game-description { margin-bottom: var(--space-xl); }

/* theme.label ("HIDDEN OBJECT ADVENTURE // PC") used to sit above the title; it
   is a fact about the game, so it is a card above System Requirements now. */
.game-type-card {
  margin-top: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background: var(--grad-surface);
  border: 1px solid var(--color-steel);
}

.game-type-value {
  margin: 0;
  font-family: var(--font-header);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-heading);
}

@media (max-width: 850px) {
  .game-surface { padding: var(--space-md); }
}

/* --- Lightbox (screenshot viewer, templates/game.php) --------------------
   The stage scrolls out of view on long pages, so thumbnails open the media
   here instead. Shown/hidden with .is-open; no JS-driven layout. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: rgba(10, 8, 18, 0.93);
  backdrop-filter: blur(6px);
  /* Fade in. visibility (not display) so the opacity transition can run. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.lightbox.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.22s ease;
}

/* Grid stacking: incoming and outgoing items share one cell, so they can slide
   over each other while the stage keeps its intrinsic size. */
.lightbox-stage {
  display: grid;
  place-items: center;
  max-width: min(92vw, 1400px);
  max-height: 82vh;
  /* Clipping is what makes the slide read as one image leaving and the next
     arriving. Without it the outgoing image stays visible outside the frame. */
  overflow: hidden;
  border: 1px solid var(--text-main);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.85), 0 0 12px var(--color-saffron);
  background: #000;
  transform: scale(0.94);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lightbox.is-open .lightbox-stage { transform: scale(1); }

.lightbox-stage > * {
  grid-area: 1 / 1;
  will-change: transform;
}

.lightbox-stage img,
.lightbox-stage iframe,
.lightbox-stage video {
  max-width: min(92vw, 1400px);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 0;
  background: #000;
}

.lightbox-stage iframe {
  width: min(92vw, 1100px);
  aspect-ratio: 16 / 9;
  height: auto;
}

.lightbox-close,
.lightbox-nav {
  background: rgba(30, 26, 47, 0.9);
  color: var(--text-main);
  border: 1px solid #3f3f46;
  font-family: var(--font-header);
  cursor: pointer;
  transition: 0.2s;
  line-height: 1;
}

.lightbox-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
}

.lightbox-nav {
  width: 52px;
  height: 52px;
  font-size: 2rem;
  flex: 0 0 auto;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  border-color: var(--color-saffron);
  color: var(--color-saffron);
  box-shadow: 0 0 14px var(--color-saffron);
}

.lightbox-counter {
  position: absolute;
  bottom: var(--space-md);
  left: 0;
  right: 0;
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fs-small);
  font-family: var(--font-header);
  letter-spacing: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox-stage,
  .lightbox-stage > *,
  .media-stage .media-item {
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 850px) {
  .lightbox { padding: var(--space-sm); gap: var(--space-sm); }
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.5rem; }
  .lightbox-counter { bottom: 4px; font-size: 0.75rem; }
}

.main-display.media-stage { cursor: zoom-in; }