/* ═══════════════════════════════════════════════
   Game page — game-page.css
   ═══════════════════════════════════════════════ */

/* ── HERO ── */
.gp-hero {
  min-height: 70vh;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 3rem;
  padding: 7rem 3rem 4rem;
  position: relative; overflow: hidden;
}
.gp-hero[data-color="1"] { background: #1a3a8f; color: #fff; }
.gp-hero[data-color="2"] { background: #c8391f; color: #fff; }
.gp-hero[data-color="3"] { background: #1a5c2a; color: #fff; }
.gp-hero[data-color="4"] { background: #111;    color: #fff; }
.gp-hero[data-color="5"] { background: #4a1a8f; color: #fff; }
.gp-hero[data-color="6"] { background: #0f5c5c; color: #fff; }

/* Grid bg */
.gp-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.gp-hero-inner { position: relative; z-index: 1; }

/* Variante senza key visual — usata quando non c'è ancora un'immagine da mostrare */
.gp-hero.gp-hero-solo { grid-template-columns: 1fr; }
.gp-hero.gp-hero-solo .gp-hero-inner { max-width: 640px; }

.gp-breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-family: 'Space Grotesk', sans-serif; font-size: .7rem; font-weight: 600;
  color: rgba(255,255,255,.5); margin-bottom: 1.2rem; letter-spacing: .04em;
}
.gp-breadcrumb a { color: rgba(255,255,255,.5); transition: color .15s; }
.gp-breadcrumb a:hover { color: #fff; }

.gp-jam-badge {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif; font-size: .65rem; font-weight: 700;
  color: rgba(255,255,255,.65); letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255,255,255,.1); padding: .28rem .7rem;
  margin-bottom: .8rem;
}
.gp-jam-asterisk { cursor: help; }
.gp-jam-note {
  font-size: .75rem; color: rgba(255,255,255,.4); font-style: italic;
  margin-bottom: .8rem; max-width: 420px; line-height: 1.5;
}

.gp-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 700;
  color: #fff; line-height: .95; letter-spacing: -.03em;
  text-shadow: 4px 4px 0 rgba(0,0,0,.3);
  margin-bottom: 1rem;
}

.gp-desc {
  font-size: 1rem; color: rgba(255,255,255,.75);
  max-width: 420px; line-height: 1.7; margin-bottom: 1.8rem; font-weight: 500;
}

.gp-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.gp-tba {
  font-family: 'Space Grotesk', sans-serif; font-size: .78rem; font-weight: 600;
  color: rgba(255,255,255,.4); letter-spacing: .08em; text-transform: uppercase;
  padding: .8rem 0;
}

.gp-meta-row {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
}
.gp-meta-item {
  font-family: 'Space Grotesk', sans-serif; font-size: .72rem; font-weight: 600;
  color: rgba(255,255,255,.5); letter-spacing: .05em;
}

/* ── SHARE BUTTONS ── */
.gp-share-row {
  display: flex; align-items: center; gap: .7rem; margin-top: 1.4rem;
}
.gp-share-label {
  font-family: 'Space Grotesk', sans-serif; font-size: .68rem; font-weight: 600;
  color: rgba(255,255,255,.4); letter-spacing: .08em; text-transform: uppercase;
}
.gp-share-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; font-size: 1rem;
  background: rgba(255,255,255,.1); border: none; cursor: pointer;
  color: inherit; text-decoration: none; transition: background .15s;
}
.gp-share-link:hover { background: rgba(255,255,255,.2); }

/* Thumbnail */
.gp-hero-thumb {
  position: relative; z-index: 1;
  aspect-ratio: 4/3;
  border: 1px solid rgba(255,255,255,.15);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.gp-hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gp-thumb-placeholder {
  font-size: 6rem; opacity: .25;
}

/* ── SCREENSHOTS ── */
.gp-screenshots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(0,0,0,.1);
}
.gp-screenshots img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
}
.gp-screenshot-placeholder {
  aspect-ratio: 16/9; background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Courier New', monospace; font-size: .72rem;
  color: var(--muted); transition: background .4s;
}
body.dark-mode .gp-screenshot-placeholder { background: #161616; }

/* ── ABOUT GRID ── */
.gp-about-grid {
  display: grid; grid-template-columns: 1fr 340px;
  gap: 3rem; align-items: start;
}

.gp-info-box {
  background: var(--surface2); border: 2px solid rgba(0,0,0,.1);
  padding: 1.3rem; transition: background .4s;
}
body.dark-mode .gp-info-box { background: #161616; border-color: rgba(255,255,255,.07); }

.gp-info-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: .82rem;
}
.gp-info-row:last-of-type { border-bottom: none; }
.gp-info-row span:first-child { color: var(--muted); font-weight: 600; letter-spacing: .03em; }
.gp-info-row span:last-child  { color: var(--ink); font-weight: 500; text-align: right; }
body.dark-mode .gp-info-row span:last-child { color: #ede8d6; }

.gp-tba-box {
  margin-top: 1.2rem; text-align: center;
  font-family: 'Space Grotesk', sans-serif; font-size: .72rem; font-weight: 600;
  color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
  border: 1px dashed rgba(0,0,0,.15); padding: .8rem;
}

/* ── PROGRESS ── */
.gp-progress-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
  gap: 1px; background: rgba(0,0,0,.08);
}
.gp-progress-card {
  background: var(--surface2); padding: 1.4rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  transition: background .4s;
}
body.dark-mode .gp-progress-card { background: #161616; }
.gp-progress-emoji { font-size: 1.8rem; line-height: 1; }
.gp-progress-bar {
  width: 100%; height: 6px; background: rgba(0,0,0,.08); overflow: hidden;
}
body.dark-mode .gp-progress-bar { background: rgba(255,255,255,.08); }
.gp-progress-fill {
  height: 100%; background: var(--ink); transition: width 1s ease;
}
body.dark-mode .gp-progress-fill { background: #ede8d6; }
.gp-progress-pct {
  font-family: 'Space Grotesk', sans-serif; font-size: .68rem; font-weight: 700;
  color: var(--muted); letter-spacing: .04em;
}

/* ── CREDITS ── */
.gp-credits-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 1px; background: rgba(0,0,0,.08);
}
.gp-credit-card {
  background: var(--surface2); padding: 1.2rem 1.3rem; transition: background .4s;
}
body.dark-mode .gp-credit-card { background: #161616; }
.gp-credit-name {
  font-family: 'Space Grotesk', sans-serif; font-size: .92rem; font-weight: 700;
  color: var(--ink); margin-bottom: .3rem; letter-spacing: -.01em;
}
body.dark-mode .gp-credit-name { color: #ede8d6; }
.gp-credit-name a {
  color: inherit; border-bottom: 2px solid rgba(0,0,0,.15);
  transition: border-color .14s;
}
body.dark-mode .gp-credit-name a { border-color: rgba(255,255,255,.15); }
.gp-credit-name a:hover { border-color: currentColor; }
.gp-ptd-badge {
  display: inline-block; font-size: .45rem; font-weight: 800;
  background: var(--ink); color: var(--bg);
  padding: .1rem .4rem; letter-spacing: .1em; text-transform: uppercase;
  vertical-align: middle; margin-left: .4rem; position: relative; top: -1px;
}
body.dark-mode .gp-ptd-badge { background: #ede8d6; color: #111; }
.gp-credit-roles { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.gp-credit-role {
  font-size: .62rem; font-weight: 600;
  background: rgba(0,0,0,.06); color: var(--muted);
  padding: .12rem .45rem; letter-spacing: .04em; text-transform: uppercase;
}
body.dark-mode .gp-credit-role { background: rgba(255,255,255,.06); }

/* ── GAME NAV (prev/next) ── */
.gp-game-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 2.5rem; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid rgba(0,0,0,.08);
}
body.dark-mode .gp-game-nav { border-color: rgba(255,255,255,.07); }
.gp-game-nav-link {
  font-family: 'Space Grotesk', sans-serif; font-size: .78rem; font-weight: 700;
  color: var(--ink); letter-spacing: .02em;
  border-bottom: 1px solid rgba(0,0,0,.15); transition: border-color .15s;
}
body.dark-mode .gp-game-nav-link { color: #ede8d6; border-color: rgba(255,255,255,.15); }
.gp-game-nav-link:hover { border-color: currentColor; }
.gp-game-nav-link.next { margin-left: auto; }

/* ── BACK BAR ── */
.gp-back-bar {
  background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2.5rem; flex-wrap: wrap; gap: .5rem;
  transition: background .4s;
}
.gp-back-bar a {
  font-family: 'Space Grotesk', sans-serif; font-size: .78rem; font-weight: 700;
  color: var(--bg); letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,.2); transition: border-color .15s;
}
.gp-back-bar a:hover { border-color: var(--bg); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .gp-hero { grid-template-columns: 1fr; padding: 6rem 1.5rem 3rem; }
  .gp-hero-thumb { display: none; }
  .gp-about-grid { grid-template-columns: 1fr; }
  .gp-screenshots { grid-template-columns: 1fr; }
  .gp-title { font-size: clamp(2.2rem, 8vw, 3rem); }
}