/* ===========================================================
   GAME PAGE - one per game, generated by _dev/build-games.py
   =========================================================== */
body{padding-top:66px}
.gmain{max-width:920px;margin:0 auto;padding:18px 16px 60px}

.crumbs{font-size:12.5px;color:var(--ink-mute);margin-bottom:18px}
.crumbs a{color:var(--teal)}
.crumbs span{color:var(--ink-soft)}

.ghero{display:grid;gap:22px;margin-bottom:34px}
.ghero-art{position:relative;max-width:260px;margin:0 auto;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--ocean-600);background:var(--ocean-700)}
.ghero-art img{width:100%;display:block;aspect-ratio:16/10;object-fit:contain;background:#080a14}
.ghero-txt h1{font-size:clamp(25px,6vw,38px);font-weight:800;line-height:1.15;margin:0 0 12px}
.glede{color:var(--ink-mute);font-size:15.5px;margin:0 0 20px}
.gbtns{display:grid;gap:9px}
.gbtns .btn{width:100%}
.gnote{font-size:12px;color:var(--ink-mute);margin:14px 0 0}

.gsect{margin-bottom:34px}
.gsect h2{font-size:21px;font-weight:800;margin:0 0 14px}
.gp{color:var(--ink-mute);font-size:15px;margin:0 0 16px;line-height:1.7}

.gfacts{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.gfacts div{background:var(--ocean-700);border:1px solid var(--ocean-600);
  border-radius:var(--radius);padding:16px;text-align:center}
.gfacts b{display:block;font-size:20px;font-weight:800;background:var(--sea-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gfacts span{display:block;font-size:12.5px;color:var(--ink-mute);margin-top:3px}

.gsteps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:11px}
.gsteps li{background:var(--ocean-700);border:1px solid var(--ocean-600);
  border-radius:var(--radius);padding:15px 16px 15px 54px;position:relative;
  font-size:14.5px;color:var(--ink-mute);line-height:1.6}
.gsteps li b{color:var(--ink)}
.gsteps li em{font-style:normal;color:var(--teal)}
.gsteps li::before{counter-increment:s;content:counter(s);position:absolute;
  left:15px;top:14px;width:26px;height:26px;border-radius:8px;background:var(--sea-grad);
  color:#042224;font-weight:800;font-size:13px;display:grid;place-items:center}

.grelated{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.grel{display:block;background:var(--ocean-700);border:1px solid var(--ocean-600);
  border-radius:12px;overflow:hidden;transition:transform .16s,border-color .16s}
.grel:hover{transform:translateY(-3px);border-color:var(--teal)}
.grel img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.grel span{display:block;padding:8px 9px;font-size:12.5px;font-weight:600;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.gcta{text-align:center;padding:40px 22px;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(255,107,74,.13),rgba(45,212,191,.10));
  border:1px solid var(--ocean-600)}
.gcta h2{font-size:clamp(22px,5vw,30px);font-weight:800;margin:0 0 10px}
.gcta p{color:var(--ink-soft);margin:0 0 20px}

@media(min-width:700px){
  .ghero{grid-template-columns:260px 1fr;align-items:center}
  .ghero-art{margin:0}
  .gbtns{grid-template-columns:1fr 1fr}
  .gfacts{grid-template-columns:repeat(4,1fr)}
  .grelated{grid-template-columns:repeat(6,1fr)}
}

/* Play sends the visitor to the game company site, so it is deliberately
   styled apart from our own actions - gold, not teal or coral. */
.btn-play{background:linear-gradient(135deg,var(--gold),#f59e0b);color:#2a1c02;
  box-shadow:0 8px 26px rgba(251,191,36,.3)}
.btn-play:hover{box-shadow:0 12px 34px rgba(251,191,36,.42)}
.gnote em{font-style:normal;color:var(--teal)}