:root {
  --card-bg: rgba(0,0,0,0.82);
  --card-br: 14px;
  --card-pad: 18px;
  --scroll-pad: 140px;
  --text: #fff;
  --accent: #4dd2ff;
  --frame-width: min(1200px, 94vw);
  --accent-dark: color-mix(in oklch, var(--accent) 50%, black);
}

/* Prevent layout shift when vertical scrollbar appears/disappears */
html { scrollbar-gutter: stable both-edges; }
@supports not (scrollbar-gutter: stable) {
  @media (hover: hover) and (pointer: fine) {
      body { overflow-y: scroll; }
  }
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: system-ui, Arial, sans-serif;
  color: var(--text);
  background-color: #000000;
}
canvas { display: block; position: fixed; inset: 0; z-index: 0; }

/* Frame */
.frame {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 0 0 var(--scroll-pad);
  pointer-events: none;
  min-height: 100svh;
}
.frame .inner { width: var(--frame-width); }

/* Add invisible content box at the bottom in single-column view */
@media (max-width: 640px) {
  .frame::after {
      content: '';
      display: block;
      height: var(--scroll-pad);
      width: 100%;
  }
}

/* Header */
header.site { pointer-events: none; margin: 0 0 18px 0; }
header.site img.logo { display: block; height: 72px; width: auto; }
/* Smaller logo on mobile */
@media (max-width: 640px) {
  header.site img.logo {
      height: 56px; /* was 72px */
  }
}

/* Nav */
.nav { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; pointer-events: auto; }
.nav a { color: var(--text); text-decoration: none; font-size: 16px; padding: 6px 12px; border-radius: 6px; transition: background .2s ease, color .2s ease; }
.nav a:hover { background: rgba(255,255,255,0.1); }
.nav a.active { background: var(--accent); color: #000; }

/* Cards grid */
.cards { pointer-events: none; width: var(--frame-width); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }

/* Logo centering tweaks on smaller screens */
@media (max-width: 980px) { header.site img.logo { margin: 0 auto; } }
@media (max-width: 640px) { header.site img.logo { margin: 0 auto; } }

/* Card */
.game-card {
  pointer-events: auto;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--card-br);
  padding: var(--card-pad);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
}
.game-card:hover { transform: translateY(-2px); border-color: rgba(0,255,191,0.25); box-shadow: 0 18px 50px rgba(0,0,0,0.55); }
.game-card h2 { margin: 0 0 6px 0; font-size: 18px; line-height: 1.2; letter-spacing: .02em; }
.game-card p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.85); flex-grow: 1; }

/* Coming soon highlight */
.game-card.coming-soon { border-color: var(--accent-dark); }
.game-card.coming-soon:hover { transform: translateY(-2px); border-color: rgba(0,255,191,0.25); box-shadow: 0 18px 50px rgba(0,0,0,0.55); }

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tag {
  display: inline-flex;
  line-height: 14px;
  align-items: center;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.37);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  padding: 1px 8px;
  border-radius: 999px;
}
.game-card.coming-soon .tag:last-child { border-color: var(--accent-dark); }

/* Links + footer */
.links { font-size: 14px; display: flex; justify-content: center; flex-direction: column; }
.links a { color: var(--accent); text-decoration: none; display: block; }
.links a:hover { text-decoration: underline; }

.card-footer { margin-top: 12px; min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gallery-btn {
  appearance: none;
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
}
.gallery-btn:hover { background: rgba(255,255,255,0.2); }
.gallery-btn:disabled { opacity: .5; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .game-card { transition: none; }
}

/* --- Lightbox / Gallery --- */
.lightbox { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; background: rgba(0,0,0,0.72); backdrop-filter: blur(4px); }
.lightbox.open { display: grid; animation: fadeIn .18s ease-out; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.lb-shell { position: relative; width: min(1100px, 94vw); }

/* controls ABOVE the gallery box */
.lb-controls {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: auto;
}
.lb-leftcontrols { display: flex; gap: 8px; }

.lb-controls button {
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.lb-controls button:hover { background: rgba(255,255,255,0.12); }

.lb-media { position: relative; border-radius: 16px; overflow: hidden; background: #0b0b0b; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 20px 70px rgba(0,0,0,0.6); }
.lb-media img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; }

/* arrows */
.lb-arrow { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; }
.lb-arrow button { appearance: none; background: none; border: none; pointer-events: auto; cursor: pointer; }
.lb-left { justify-self: start; width: 36%; }
.lb-right { justify-self: end; width: 36%; }

.lb-index { margin-top: 10px; font-size: 12px; opacity: 0.8; text-align: center; }
.lb-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 6px; }
.lb-thumbs img { height: 64px; width: auto; border-radius: 8px; opacity: .6; cursor: pointer; border: 1px solid transparent; }
.lb-thumbs img.active { opacity: 1; border-color: var(--accent); }

.lb-hint { position: absolute; bottom: -28px; left: 0; font-size: 12px; opacity: .75; }

/* Mobile: keep image nicely horizontal */
@media (max-width: 768px) {
  .lb-media img {
      width: 100%;
      height: auto;
      max-height: 70vh;
      object-fit: contain;
  }
}

/* ===== Fullscreen & fallback fullscreen ("fs" class) ===== */

/* True fullscreen: expand shell to screen and stack vertically */
.lightbox:fullscreen .lb-shell,
.lightbox.fs .lb-shell {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Controls inside the viewport, not negative */
.lightbox:fullscreen .lb-controls,
.lightbox.fs .lb-controls {
  position: relative;
  top: 0;
  left: 0;
  padding: 0px 14px;
  margin-bottom: 8px;
}

/* Media takes remaining height */
.lightbox:fullscreen .lb-media,
.lightbox.fs .lb-media {
  flex: 1 1 auto;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image scales to fit screen */
.lightbox:fullscreen .lb-media img,
.lightbox.fs .lb-media img {
  height: auto;
  max-width: 100vw;
  max-height: calc(100vh - 120px); /* room for controls/index */
  object-fit: contain;
}

/* Hide thumbnails in fullscreen (they steal vertical space) */
.lightbox:fullscreen .lb-thumbs,
lightbox.fs .lb-thumbs {
  display: none;
}

/* Center the index below image; smaller margin in FS */
.lightbox:fullscreen .lb-index,
lightbox.fs .lb-index {
  margin-top: 8px;
}

/* On small screens in fullscreen, ensure the image really dominates */
@media (max-width: 768px) {
  .lightbox:fullscreen .lb-media img,
  .lightbox.fs .lb-media img {
      max-width: 100vw;
      max-height: calc(100vh - 32px);
  }
}

/* ===== Desktop fullscreen: fill the actual viewport and center image ===== */
@media (min-width: 1024px) {
  /* Fill viewport without using vw (avoids gutter math) */
  .lightbox:fullscreen .lb-shell,
  .lightbox.fs .lb-shell {
      position: fixed;
      inset: 0;
      height: auto;
      display: flex;
      flex-direction: column;
  }

  .lightbox:fullscreen .lb-media,
  .lightbox.fs .lb-media {
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
      min-height: 0;
      border: none;
      border-radius: 0;
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #000;
  }

  .lightbox:fullscreen .lb-media img,
  .lightbox.fs .lb-media img {
      max-width: 100%;
      max-height: 100%;
      height: auto;
      object-fit: contain;
      display: block;
  }

  /* Keep controls/index overlaid and not affecting layout */
  .lightbox:fullscreen .lb-controls,
  .lightbox.fs .lb-controls {
      position: fixed;
      top: 12px;
      left: 0;
      right: 0;
      z-index: 2;
  }

  .lightbox:fullscreen .lb-index,
  .lightbox.fs .lb-index {
      position: fixed;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      margin: 0;
      z-index: 2;
  }
}

/* When the lightbox is open, donΓÇÖt reserve scrollbar gutters globally */
html.no-gutter { scrollbar-gutter: auto !important; }

/* ===== OPTION B: Compact lightbox UI on small screens (<600px) ===== */

/* Portrait or landscape ΓÇö ensure controls arenΓÇÖt pushed off-screen */
@media (max-height: 600px) {
  /* Keep controls inside the media box region (override negative offset) */
  .lb-controls {
      position: relative;
      top: 0;
      left: 0;
      padding: 6px 10px;
      margin-bottom: 6px;
      gap: 8px;
  }
  .lb-leftcontrols { gap: 6px; }

  .lb-controls button {
      padding: 6px 10px;
      font-size: 12px;
      line-height: 1;
      border-radius: 999px;
  }

  /* Slightly tighter chrome */
  .lb-media { border-radius: 12px; }
  .lb-index { margin-top: 6px; font-size: 11px; }
}

/* On phone-landscape specifically, prioritize the image and hide chrome that eats space */
@media (max-height: 800px) and (orientation: landscape) {
  .lb-shell { width: 100vw; max-width: 100vw; }

  .lb-media img {
      max-height: 70vh; /* comfy in short viewports */
      object-fit: contain;
  }

  /* Edge click targets still tappable but not too wide */
  .lb-left { width: 44%; }
  .lb-right { width: 44%; }

  /* Trim non-essential UI */
  .lb-hint { display: none; }
  .lb-thumbs { display: none; }
}

/***** Blog view *****/
.blog-article {
  pointer-events: auto;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--card-br);
  padding: clamp(16px, 3vw, 28px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  width: var(--frame-width);
  margin: 0 auto 48px;
}
.blog-article .blog-back {
  display: inline-block;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--accent);
  text-decoration: none;
}
.blog-article .blog-back:hover { text-decoration: underline; }
.blog-article h1 {
  margin: 8px 0 6px;
  font-size: clamp(22px, 4vw, 32px);
  letter-spacing: .01em;
}
.blog-article .blog-meta { font-size: 13px; opacity: .8; margin-bottom: 8px; }
.blog-article .blog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.blog-article .blog-content { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.92); }
.blog-article .blog-content h2 { font-size: clamp(18px, 3.2vw, 24px); margin: 20px 0 8px; }
.blog-article .blog-content p { margin: 0 0 12px 0; }
.blog-article .blog-content ul { margin: 0 0 14px 20px; }
.blog-article img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); }
@media (max-width: 640px) { .blog-article { padding: 16px; } }
.cards[hidden] { display: none !important; }