/* Games section. Card/tile rules are copied from the homepage (index.html) so the tiles match it. */
/* Homepage refinement only. The global header/nav/footer remain the existing site design. */
.home-refresh{
  --home-line:rgba(139,173,205,.22);
  --home-line-strong:rgba(139,173,205,.35);
  --home-panel:rgba(10,17,27,.86);
  --home-panel-2:rgba(13,23,36,.94);
  --home-muted:#9dacbd;
  --home-text:#eef5fc;
  --home-accent:#67c9ff;
  --home-green:#72e0a2;
}

.home-refresh .home-top{
  padding:30px 0 12px;
}

.home-refresh .home-intro-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:end;
  padding-bottom:20px;
  border-bottom:1px solid var(--home-line);
}

.home-refresh .home-intro{
  max-width:820px;
  margin:0;
  font-size:18px;
  line-height:1.65;
  color:#c9d4df;
}

.home-refresh .home-now{
  min-width:250px;
  padding:14px 16px;
  border:1px solid var(--home-line);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(18,31,48,.78),rgba(8,15,24,.82));
}

.home-refresh .home-now .kicker{
  margin-bottom:6px;
}

.home-refresh .home-now strong{
  display:block;
  font-size:14px;
  color:#fff;
  margin-bottom:4px;
}

.home-refresh .home-now span{
  display:block;
  color:var(--home-muted);
  font-size:12px;
  line-height:1.45;
}

.home-refresh .projects{
  padding-top:18px !important;
}

.home-refresh .section-head{
  margin-bottom:16px;
  padding-top:0;
}

.home-refresh .section-head h2{
  margin:0;
  font-size:clamp(30px,3vw,40px);
  letter-spacing:-.03em;
}

.home-refresh .section-head p{
  margin:5px 0 0;
  max-width:520px;
  color:var(--home-muted);
  line-height:1.55;
}

.home-refresh .project-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
}

.home-refresh .card{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
  border:1px solid var(--home-line);
  border-radius:16px;
  background:
    radial-gradient(500px 210px at 90% 0%,rgba(74,156,238,.07),transparent 65%),
    linear-gradient(180deg,rgba(15,25,39,.96),rgba(8,14,22,.96));
  box-shadow:0 14px 35px rgba(0,0,0,.16);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

@media (hover:hover) and (pointer:fine){
  .home-refresh .card:hover{
    transform:translateY(-3px);
    border-color:var(--home-line-strong);
    box-shadow:0 20px 48px rgba(0,0,0,.25);
  }
}

.home-refresh .card.featured{
  grid-column:span 8;
}

.home-refresh .card.gime-card{
  grid-column:span 4;
}

.home-refresh .card.small-card{
  grid-column:span 4;
}

.home-refresh .card-media{
  position:relative;
  height:205px;
  border-bottom:1px solid var(--home-line);
  background:#05080c;
  overflow:hidden;
}

.home-refresh .card.featured .card-media{
  height:300px;
}

.home-refresh .card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.home-refresh .card-media.contain img{
  object-fit:contain;
  padding:10px;
  background:#070b11;
}

.home-refresh .card.featured .card-media img{
  object-fit:cover;
  object-position:center;
}

.home-refresh .card-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(3,7,12,.35));
}

.home-refresh .badge-new{
  top:13px;
  left:13px;
  z-index:3;
  border:1px solid rgba(114,224,162,.32);
  background:rgba(5,14,11,.9);
  color:#9cf0bb;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.home-refresh .card-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:20px;
}

.home-refresh .featured .card-body{
  padding:22px 24px 24px;
}

.home-refresh .card-body .kicker{
  margin-bottom:7px;
}

.home-refresh .card h3{
  margin:0 0 10px;
  font-size:24px;
  line-height:1.08;
  letter-spacing:-.025em;
}

.home-refresh .featured h3{
  font-size:31px;
}

.home-refresh .card p{
  margin:0;
  color:var(--home-muted);
  line-height:1.58;
  font-size:13px;
}

.home-refresh .featured p{
  max-width:760px;
  font-size:14px;
}

.home-refresh .meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:16px;
}

.home-refresh .pill{
  border-color:var(--home-line-strong);
  background:rgba(5,11,18,.58);
}

.home-refresh .card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:auto;
  padding-top:18px;
}

.home-refresh .card .btn{
  min-height:42px;
}

.home-refresh .card .btn.primary{
  box-shadow:0 8px 22px rgba(53,149,255,.15);
}

.home-refresh .project-factline{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:15px;
  color:#8190a2;
  font-size:11px;
}

.home-refresh .project-factline strong{
  color:#dce7f2;
  font-weight:700;
}

.home-refresh .latest-strip{
  margin-top:16px;
  border:1px solid var(--home-line);
  border-radius:14px;
  background:rgba(9,16,25,.74);
  overflow:hidden;
}

.home-refresh .latest-strip-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:13px 16px;
  border-bottom:1px solid var(--home-line);
}

.home-refresh .latest-strip-head .kicker{
  margin:0;
}

.home-refresh .latest-strip-head span{
  color:#718094;
  font-size:11px;
}

.home-refresh .latest-items{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.home-refresh .latest-item{
  min-width:0;
  padding:14px 16px;
}

.home-refresh .latest-item + .latest-item{
  border-left:1px solid var(--home-line);
}

.home-refresh .latest-item strong{
  display:block;
  margin-bottom:4px;
  color:#eef5fb;
  font-size:12px;
}

.home-refresh .latest-item span{
  display:block;
  color:var(--home-muted);
  font-size:11px;
  line-height:1.5;
}

.home-refresh .about-restored{
  padding-top:26px;
}

.home-refresh .about-restored .content-card{
  position:relative;
  overflow:hidden;
  padding:26px 28px;
  border-color:var(--home-line);
  background:
    radial-gradient(700px 260px at 100% 0%,rgba(69,151,232,.09),transparent 66%),
    linear-gradient(180deg,rgba(15,25,39,.9),rgba(8,14,22,.92));
}

.home-refresh .about-restored .content-card::after{
  content:"COCO 3";
  position:absolute;
  right:22px;
  bottom:-25px;
  color:rgba(255,255,255,.025);
  font-size:90px;
  font-weight:900;
  letter-spacing:-.07em;
  pointer-events:none;
}

.home-refresh .about-restored h2{
  margin-bottom:10px;
  font-size:32px;
  letter-spacing:-.03em;
}

.home-refresh .about-restored p{
  max-width:820px;
  color:var(--home-muted);
}

@media(max-width:980px){
  .home-refresh .home-intro-row{
    grid-template-columns:1fr;
  }
  .home-refresh .home-now{
    min-width:0;
  }
  .home-refresh .card.featured,
  .home-refresh .card.gime-card{
    grid-column:span 12;
  }
  .home-refresh .card.small-card{
    grid-column:span 6;
  }
  .home-refresh .latest-items{
    grid-template-columns:1fr;
  }
  .home-refresh .latest-item + .latest-item{
    border-left:0;
    border-top:1px solid var(--home-line);
  }
}

@media(max-width:650px){
  .home-refresh .home-top{
    padding-top:20px;
  }
  .home-refresh .home-intro{
    font-size:16px;
  }
  .home-refresh .card.small-card{
    grid-column:span 12;
  }
  .home-refresh .card.featured .card-media{
    height:230px;
  }
  .home-refresh .card-media{
    height:210px;
  }
  .home-refresh .featured h3{
    font-size:25px;
  }
  .home-refresh .latest-strip-head{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
}

/* Flashy refinement layer — restrained motion/light, same layout. */
.home-refresh{
  position:relative;
  isolation:isolate;
}

.home-refresh::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(700px 360px at 18% 22%,rgba(0,183,255,.045),transparent 68%),
    radial-gradient(760px 420px at 86% 48%,rgba(151,72,255,.035),transparent 70%),
    radial-gradient(620px 350px at 55% 92%,rgba(0,255,173,.025),transparent 72%);
}

/* Gentle entrance sequence. */
@keyframes homeRise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes statusPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(114,224,162,.0),0 0 10px rgba(114,224,162,.25)}
  50%{box-shadow:0 0 0 4px rgba(114,224,162,.055),0 0 18px rgba(114,224,162,.45)}
}
@keyframes imageDrift{
  0%{transform:scale(1.012)}
  100%{transform:scale(1.045)}
}
@keyframes sheen{
  0%{transform:translateX(-140%) skewX(-18deg)}
  100%{transform:translateX(260%) skewX(-18deg)}
}

.home-refresh .home-top{
  animation:homeRise .42s ease-out both;
}
.home-refresh .projects{
  animation:homeRise .5s .06s ease-out both;
}
.home-refresh .about-restored{
  animation:homeRise .55s .12s ease-out both;
}

/* Stronger but still subtle section divider glow. */
.home-refresh .home-intro-row{
  position:relative;
}
.home-refresh .home-intro-row::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:34%;
  height:1px;
  background:linear-gradient(90deg,rgba(94,193,255,.8),rgba(133,82,255,.22),transparent);
}

/* Latest box gets a hardware-status feel. */
.home-refresh .home-now{
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 14px 32px rgba(0,0,0,.12);
}
.home-refresh .home-now::before{
  content:"";
  display:block;
  position:absolute;
  right:13px;
  top:13px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#72e0a2;
  animation:statusPulse 2.6s ease-in-out infinite;
}

/* Per-project accent system. */
.home-refresh .card{
  --card-accent:103,201,255;
  --card-accent2:110,116,255;
}

.home-refresh .accent-sinistar{
  --card-accent:255,70,92;
  --card-accent2:75,129,255;
}
.home-refresh .accent-gime{
  --card-accent:50,201,255;
  --card-accent2:118,92,255;
}
.home-refresh .accent-rmb{
  --card-accent:255,166,70;
  --card-accent2:255,88,63;
}
.home-refresh .accent-matrix{
  --card-accent:65,236,126;
  --card-accent2:0,180,112;
}
.home-refresh .accent-space{
  --card-accent:88,143,255;
  --card-accent2:177,89,255;
}

.home-refresh .card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 14px 35px rgba(0,0,0,.16);
}

.home-refresh .card::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:0;
  pointer-events:none;
  border-radius:16px;
  background:
    radial-gradient(480px 180px at 80% -10%,rgba(var(--card-accent),.13),transparent 66%),
    linear-gradient(135deg,rgba(var(--card-accent),.04),transparent 35%,rgba(var(--card-accent2),.035));
  opacity:.72;
  transition:opacity .2s ease;
}

.home-refresh .card > *{
  position:relative;
  z-index:1;
}

@media (hover:hover) and (pointer:fine){
  .home-refresh .card:hover{
    border-color:rgba(var(--card-accent),.48);
    box-shadow:
      0 20px 50px rgba(0,0,0,.28),
      0 0 0 1px rgba(var(--card-accent),.08),
      0 0 32px rgba(var(--card-accent),.10);
  }

  .home-refresh .card:hover::before{
    opacity:1;
  }

  .home-refresh .card:hover .card-media img{
    transform:scale(1.028);
  }

  .home-refresh .card:hover .pill{
    border-color:rgba(var(--card-accent),.42);
    box-shadow:0 0 13px rgba(var(--card-accent),.08);
  }

  .home-refresh .card:hover .btn{
    border-color:rgba(var(--card-accent),.58);
  }
}

/* Screenshot treatment: faint CRT scanline/edge illumination, image only. */
.home-refresh .card-media{
  isolation:isolate;
}
.home-refresh .card-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.13;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.055) 0,
      rgba(255,255,255,.055) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode:soft-light;
}

.home-refresh .card-media::after{
  z-index:3;
  background:
    linear-gradient(180deg,transparent 58%,rgba(3,7,12,.38)),
    radial-gradient(90% 70% at 50% 10%,rgba(var(--card-accent),.10),transparent 68%);
}

.home-refresh .card-media img{
  transition:transform .38s cubic-bezier(.22,.61,.36,1),filter .25s ease;
}

/* Sinistar gets the strongest treatment. */
.home-refresh .accent-sinistar{
  box-shadow:
    0 18px 44px rgba(0,0,0,.22),
    0 0 44px rgba(72,119,255,.035);
}
.home-refresh .accent-sinistar .card-media{
  background:
    radial-gradient(circle at 75% 35%,rgba(70,115,255,.12),transparent 38%),
    radial-gradient(circle at 28% 35%,rgba(255,48,73,.10),transparent 36%),
    #05070b;
}
.home-refresh .accent-sinistar .card-media img{
  animation:imageDrift 10s ease-in-out infinite alternate;
}
.home-refresh .accent-sinistar .badge-new{
  display:flex;
  align-items:center;
  gap:7px;
}
.home-refresh .accent-sinistar .badge-new::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#72e0a2;
  animation:statusPulse 2.2s ease-in-out infinite;
}

/* Main CTA sheen, hover only. */
.home-refresh .accent-sinistar .btn.primary{
  position:relative;
  overflow:hidden;
}
.home-refresh .accent-sinistar .btn.primary::after{
  content:"";
  position:absolute;
  top:-25%;
  left:-25%;
  width:26%;
  height:150%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  transform:translateX(-140%) skewX(-18deg);
}
@media (hover:hover) and (pointer:fine){
  .home-refresh .accent-sinistar .btn.primary:hover::after{
    animation:sheen .65s ease;
  }
}

/* Pills behave like tiny indicator labels. */
.home-refresh .pill{
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .home-refresh .pill:hover{
    transform:translateY(-1px);
  }
}

/* Recent project work gets a faint terminal/data rail effect. */
.home-refresh .latest-strip{
  position:relative;
}
.home-refresh .latest-strip::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,#67c9ff,#7d6cff,#65e3a1);
  opacity:.75;
}
.home-refresh .latest-item{
  position:relative;
}
.home-refresh .latest-item strong::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:7px;
  border-radius:50%;
  background:#67c9ff;
  box-shadow:0 0 10px rgba(103,201,255,.28);
  vertical-align:1px;
}
.home-refresh .latest-item:nth-child(2) strong::before{
  background:#9b78ff;
}
.home-refresh .latest-item:nth-child(3) strong::before{
  background:#66df94;
}

/* About card gets restrained RGB edge detail tied to site logo. */
.home-refresh .about-restored .content-card{
  position:relative;
}
.home-refresh .about-restored .content-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:180px;
  height:2px;
  background:linear-gradient(90deg,#39c7ff,#7d64ff,#ff5d84);
}

/* Buttons feel a little more alive. */
.home-refresh .btn{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .home-refresh .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(0,0,0,.16);
  }
}

/* Accessibility / user preference. */
@media (prefers-reduced-motion:reduce){
  .home-refresh *,
  .home-refresh *::before,
  .home-refresh *::after{
    animation:none !important;
    transition:none !important;
  }
}


.home-refresh .featured-status{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:7px;
  margin:0 0 11px;
  padding:6px 9px;
  border:1px solid rgba(114,224,162,.30);
  border-radius:999px;
  background:rgba(7,18,14,.72);
  color:#9cf0bb;
  font:800 9px/1 var(--hp-mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.home-refresh .featured-status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#72e0a2;
  animation:statusPulse 2.2s ease-in-out infinite;
}

/* October 2026: Space Raid takes the featured project slot. */
.home-refresh .space-spotlight .card-media.space-hero-media{
  height:300px;
  background:#050913;
}
.home-refresh .space-hero-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  height:100%;
  width:100%;
  gap:1px;
  background:rgba(121,166,220,.3);
}
.home-refresh .space-hero-shot{
  position:relative;
  min-width:0;
  margin:0;
  background:radial-gradient(circle at 50% 45%,#14213a,#020409 80%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.home-refresh .space-hero-shot img,
.home-refresh .card.featured .space-hero-shot img{
  display:block;
  width:100%;
  height:100%;
  padding:10px 8px 24px;
  object-fit:contain;
  object-position:center;
  image-rendering:auto;
}
.home-refresh .space-hero-shot figcaption{
  position:absolute;
  z-index:4;
  bottom:0;
  left:0;
  right:0;
  padding:6px 12px 7px;
  color:#c2dbf7;
  background:linear-gradient(180deg,rgba(1,5,11,.6),rgba(1,5,11,.96));
  font-size:10px;
  line-height:1.4;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.home-refresh .space-spotlight .card-body h3{
  font-size:clamp(30px,3.1vw,37px);
}
.home-refresh .space-spotlight .card-actions{
  margin-bottom:12px;
}
.home-refresh .space-home-preorder{
  display:grid;
  grid-template-columns:168px minmax(0,1fr);
  align-items:stretch;
  gap:16px;
  margin-top:13px;
  padding:13px;
  border-radius:12px;
  border:1px solid rgba(232,187,102,.36);
  background:linear-gradient(110deg,rgba(55,42,23,.55),rgba(13,21,33,.84));
}
.home-refresh .space-home-preorder-image{
  display:block;
  min-width:0;
  border-radius:8px;
  overflow:hidden;
  background:#05080c;
  border:1px solid rgba(255,255,255,.07);
}
.home-refresh .space-home-preorder-image img{
  display:block;
  width:100%;
  height:100%;
  max-height:170px;
  min-height:134px;
  object-fit:cover;
}
.home-refresh .space-home-preorder-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.home-refresh .space-home-preorder-label{
  font-size:10px;
  font-weight:750;
  letter-spacing:.07em;
  color:#e8b969;
  text-transform:uppercase;
  line-height:1.4;
  margin-bottom:5px;
}
.home-refresh .space-home-preorder-copy strong{
  display:block;
  color:#fff;
  font-size:16px;
  line-height:1.25;
  margin-bottom:5px;
}
.home-refresh .space-home-preorder-copy p{
  font-size:12px;
  color:#ccd4df;
  line-height:1.5;
}
.home-refresh .space-home-preorder-link{
  display:inline-block;
  margin-top:9px;
  color:#ffd17e;
  font-size:12px;
  font-weight:700;
  text-underline-offset:4px;
}
.home-refresh .space-home-preorder-link:hover{color:#fff1cd}
.home-refresh .space-home-preorder-paypal{
  padding:9px 13px;
  border:1px solid #e8be73;
  border-radius:7px;
  background:linear-gradient(95deg,#e9b968,#ffe0a1);
  color:#1c1a21;
  text-decoration:none;
  font-size:13px;
  line-height:1.4;
  font-weight:800;
}
.home-refresh .space-home-preorder-paypal:hover{color:#161923;filter:brightness(1.08);text-decoration:none}
.home-refresh .space-home-preorder-details{margin-top:8px}
.home-refresh .space-home-preorder-paypal:focus-visible{outline:2px solid #fff5ca;outline-offset:3px}
.home-refresh .secondary-spotlight .card-media{
  height:300px;
}
.home-refresh .secondary-spotlight .card-media img{
  object-fit:contain;
  padding:12px;
}
.home-refresh .secondary-spotlight .card-body h3{
  font-size:23px;
}
/* Support the new featured game with same light treatment as the old main card. */
.home-refresh .accent-space .badge-new{display:none}
.home-refresh .space-spotlight .card-media{
  background:radial-gradient(circle at 50% 35%,rgba(69,124,255,.16),transparent 70%),#04070d;
}
.home-refresh .space-spotlight .featured-status{
  border-color:rgba(103,201,255,.35);
  color:#c4eaff;
  background:rgba(10,22,38,.82);
}
.home-refresh .space-spotlight .featured-status-dot{
  background:#67c9ff;
  box-shadow:0 0 12px rgba(103,201,255,.4);
}
.home-refresh .space-spotlight .btn.primary{
  position:relative;
  overflow:hidden;
}
@media (hover:hover) and (pointer:fine){
  .home-refresh .space-spotlight .btn.primary:hover::after{
    content:"";
    position:absolute;
    top:-25%;left:-25%;width:26%;height:150%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
    animation:sheen .65s ease;
  }
  .home-refresh .space-spotlight .space-hero-shot:hover img{
    transform:scale(1.02);
  }
}
@media(max-width:700px){
  .home-refresh .space-spotlight .card-media.space-hero-media{height:auto}
  .home-refresh .space-hero-gallery{grid-template-columns:1fr}
  .home-refresh .space-hero-shot{height:235px}
  .home-refresh .space-home-preorder{grid-template-columns:112px minmax(0,1fr);gap:12px}
  .home-refresh .space-home-preorder-image img{min-height:124px}
}
@media(max-width:430px){
  .home-refresh .space-home-preorder{grid-template-columns:1fr}
  .home-refresh .space-home-preorder-image img{height:160px;min-height:0;max-height:none}
  .home-refresh .space-hero-shot{height:210px}
}

/* Animated backgrounds: each project card crossfades to its own scene (assets/bg-scenes-v1.js) */
.bg-scenes{position:fixed;inset:0;z-index:-1;pointer-events:none}
.bg-scene{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .7s ease}

/* Top-right Latest box: four updates, each displayed for 8 seconds.
   The first slide is RetroModem Bridge. Everything crossfades smoothly. */
.home-refresh .home-latest-rotator{
  display:grid;
  min-width:0;
}
.home-refresh .home-latest-slide{
  grid-area:1 / 1;
  min-width:0;
  opacity:0;
  animation:homeLatestCrossfade 32s ease-in-out infinite;
}
.home-refresh .home-latest-slide:nth-child(1){animation-delay:0s}
.home-refresh .home-latest-slide:nth-child(2){animation-delay:-24s}
.home-refresh .home-latest-slide:nth-child(3){animation-delay:-16s}
.home-refresh .home-latest-slide:nth-child(4){animation-delay:-8s}
@keyframes homeLatestCrossfade{
  0%,18.75%{opacity:1}
  25%,93.75%{opacity:0}
  100%{opacity:1}
}
/* Respect reduced-motion settings: keep the initial RMB update visible. */
@media (prefers-reduced-motion:reduce){
  .home-refresh .home-latest-slide{
    animation:none !important;
    opacity:0;
  }
  .home-refresh .home-latest-slide:first-child{opacity:1}
}

/* ---------------------------------------------------------------- games index */
.home-refresh .accent-daggorath{--card-accent:255,176,64;--card-accent2:90,110,255}
.home-refresh .accent-pop{--card-accent:96,128,255;--card-accent2:230,230,255}
.home-refresh .accent-rotor{--card-accent:70,200,120;--card-accent2:60,170,255}
.home-refresh .accent-deathlane{--card-accent:120,230,90;--card-accent2:255,92,70}
.home-refresh .accent-vectrex{--card-accent:225,235,255;--card-accent2:120,150,255}
.home-refresh .accent-metalslug{--card-accent:255,170,60;--card-accent2:140,190,90}

.home-refresh .card.wide-card{grid-column:span 6}
.home-refresh .games-library{margin-top:34px}
.home-refresh .games-library .section-head{margin-bottom:16px}
.home-refresh .card-media.pixel img{image-rendering:pixelated;object-fit:cover}
.home-refresh .card-media.pixel.contain img{object-fit:contain;padding:0;background:#000}
.home-refresh .card .btn.dl{border-color:rgba(114,224,162,.38)}

@media(max-width:980px){.home-refresh .card.wide-card{grid-column:span 6}}
@media(max-width:650px){.home-refresh .card.wide-card{grid-column:span 12}}

/* ---------------------------------------------------------------- game pages */
.game-page .page-hero{padding:40px 0 24px}
.game-page .page-hero h1{margin:.35em 0 .25em}
.game-page .page-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:36px;align-items:center}
.game-page .hero-shot{margin:0;border:1px solid var(--home-line);border-radius:16px;overflow:hidden;background:#000;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.game-page .hero-shot img,.game-page .shot img{width:100%;height:auto;display:block;image-rendering:pixelated;aspect-ratio:4/3;object-fit:contain;background:#000}
.game-page .hero-shot figcaption,.game-page .shot figcaption{padding:9px 13px;font-size:12px;color:var(--home-muted);border-top:1px solid var(--home-line);background:rgba(5,10,18,.9)}
.game-page .button-row{margin-top:22px}
.game-page .page-layout{padding-bottom:70px}
.game-page .shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px}
.game-page .shot{margin:0;border:1px solid var(--home-line);border-radius:12px;overflow:hidden;background:#000}
.game-page table.keys{width:100%;border-collapse:collapse;font-size:.92rem}
.game-page table.keys th,.game-page table.keys td{text-align:left;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top}
.game-page table.keys th{color:#9dacbd;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.game-page table.keys td:first-child{white-space:nowrap;color:#eef5fc;font-weight:700}
.game-page .run{display:block;margin:10px 0;padding:12px 14px;font-family:"Courier New",monospace;background:#03070e;border:1px solid var(--line);border-radius:10px;color:#d7f9e1;white-space:pre-wrap}
.game-page .dl-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.game-page .dl-list li{margin:0!important}
.game-page .dl-list .btn{width:100%;justify-content:space-between}
.game-page .dl-list small{color:#7d8ea3;font-weight:600}
.game-page .breadcrumb{font-size:.85rem;color:var(--home-muted)}
.game-page .breadcrumb a{color:#a9c6e3}

@media(max-width:980px){
  .game-page .page-hero-grid{grid-template-columns:1fr}
  .game-page .page-layout{grid-template-columns:1fr}
  .game-page .side-stack{position:static}
}
@media(max-width:560px){.game-page .shots{grid-template-columns:1fr}}

/* Vertical (YouTube Shorts) video */
.game-page .video-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.game-page .video-row h2{margin-top:0}
@media(max-width:720px){.game-page .video-row{grid-template-columns:1fr}.game-page .short-video{max-width:420px;margin:0 auto}}
.game-page .short-video{width:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.12)}
.game-page .short-video iframe{width:100%;height:100%;border:0;display:block}
/* Regular 16:9 video */
.game-page .wide-video{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.12)}
.game-page .wide-video iframe{width:100%;height:100%;border:0;display:block}
.game-page .wide-video + p{margin:10px 0 22px}
/* Photos, unlike screenshots, scale smoothly */
.game-page .hero-shot img[src$=".jpg"],.game-page .shot img[src$=".jpg"]{image-rendering:auto}

/* A game logo in place of the text title */
.game-page h1.game-logo{width:min(100%,276px);margin:6px 0 18px;line-height:1}
.game-page h1.game-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}