.games-page{
  --pixel-bg:rgba(11, 17, 25, .7);
  --pixel-bg-strong:rgba(5, 9, 16, .84);
  --pixel-cyan:#75f7ff;
  --pixel-pink:#ff6bd6;
  --pixel-green:#9dff8c;
  --pixel-yellow:#f6df73;
  --pixel-cream:#fff6d6;
  --svg-sun: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'>\
<rect x='4' y='0' width='1' height='1' fill='%23ffd34a'/>\
<rect x='0' y='4' width='1' height='1' fill='%23ffd34a'/>\
<rect x='8' y='4' width='1' height='1' fill='%23ffd34a'/>\
<rect x='4' y='8' width='1' height='1' fill='%23ffd34a'/>\
<rect x='1' y='1' width='1' height='1' fill='%23ffd34a'/><rect x='7' y='1' width='1' height='1' fill='%23ffd34a'/>\
<rect x='1' y='7' width='1' height='1' fill='%23ffd34a'/><rect x='7' y='7' width='1' height='1' fill='%23ffd34a'/>\
<rect x='3' y='3' width='3' height='3' fill='%23ffd34a'/>\
</svg>");
  --svg-moon: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'>\
<rect x='2' y='2' width='5' height='5' fill='%23bfe7ff'/>\
<rect x='5' y='2' width='2' height='5' fill='black'/>\
<rect x='4' y='3' width='2' height='3' fill='black'/>\
</svg>");
  min-height:100vh;
  padding-top:1.35rem;
  overflow-x:hidden;
  background-color:#172019;
  background-image:url("../images/fandom_bg.webp");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  image-rendering:pixelated;
}

body.games-page::before,
body.games-page::after{
  content:none;
}

.pixel-hud-glow,
.pixel-wash,
.crt-lines,
.pixel-stars{
  position:fixed;
  inset:0;
  pointer-events:none;
}

.pixel-hud-glow{
  z-index:1;
  opacity:.74;
  background:url("../images/fandom_bg.webp") center / cover no-repeat;
  -webkit-mask-image:url("../images/hud-glow-mask.png");
          mask-image:url("../images/hud-glow-mask.png");
  -webkit-mask-size:cover;
          mask-size:cover;
  -webkit-mask-position:center;
          mask-position:center;
  filter:
    hue-rotate(78deg)
    saturate(1.55)
    brightness(1.36)
    contrast(1.08);
  image-rendering:pixelated;
  mix-blend-mode:screen;
}

.pixel-wash{
  z-index:2;
  background:
    radial-gradient(700px 520px at 14% 24%, rgba(255,223,132,.18), transparent 64%),
    radial-gradient(820px 620px at 84% 8%, rgba(148,255,205,.13), transparent 62%),
    radial-gradient(680px 520px at 70% 82%, rgba(157,255,140,.11), transparent 66%),
    linear-gradient(180deg, rgba(24,34,28,.22), rgba(11,16,18,.48));
  mix-blend-mode:normal;
}

.crt-lines{
  z-index:3;
  opacity:.18;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(117,247,255,.08) 0 1px, transparent 1px 8px);
  mix-blend-mode:soft-light;
}

.pixel-stars{
  z-index:3;
  overflow:hidden;
}

.pixel-stars span{
  position:absolute;
  width:6px;
  height:6px;
  background:var(--pixel-yellow);
  box-shadow:
    12px 18px 0 rgba(117,247,255,.7),
    -18px 42px 0 rgba(255,107,214,.55),
    34px 72px 0 rgba(157,255,140,.5);
  opacity:.42;
  animation:pixel-drift 12s linear infinite;
}

.pixel-stars span:nth-child(1){ left:8%; top:12%; animation-delay:-1s; }
.pixel-stars span:nth-child(2){ left:24%; top:62%; animation-delay:-5s; }
.pixel-stars span:nth-child(3){ left:42%; top:24%; animation-delay:-8s; }
.pixel-stars span:nth-child(4){ left:58%; top:78%; animation-delay:-3s; }
.pixel-stars span:nth-child(5){ left:76%; top:18%; animation-delay:-9s; }
.pixel-stars span:nth-child(6){ left:86%; top:54%; animation-delay:-6s; }
.pixel-stars span:nth-child(7){ left:14%; top:82%; animation-delay:-11s; }
.pixel-stars span:nth-child(8){ left:68%; top:38%; animation-delay:-2s; }

@keyframes pixel-drift{
  from{ transform:translateY(0); }
  to{ transform:translateY(-110vh); }
}

.games-page .godrays{
  opacity:.28;
  filter:saturate(85%);
}

.games-page .fireflies-container .firefly{
  width:6px !important;
  height:6px !important;
  border-radius:0 !important;
  background:rgba(117,247,255,.82) !important;
  box-shadow:
    0 0 6px rgba(117,247,255,.75),
    0 0 16px rgba(255,107,214,.26),
    8px 14px 0 rgba(246,223,115,.42) !important;
  image-rendering:pixelated;
}

.games-nav,
.games-hero,
.games-shell{
  position:relative;
  z-index:4;
  box-sizing:border-box;
  max-width:100%;
}

.games-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.5rem 1rem;
  max-width:980px;
  margin:0 auto 2.25rem;
  padding:0 3.25rem;
  font-family:"VT323", ui-monospace, monospace;
  font-size:1.25rem;
}

.games-nav a{
  margin:0;
  color:var(--pixel-yellow);
  border-bottom:2px solid rgba(246,223,115,.32);
  text-shadow:
    2px 0 rgba(255,107,214,.4),
    -2px 0 rgba(117,247,255,.34);
}

.games-night-switch,
.games-night-switch::before,
.games-night-switch::after{
  all:unset;
}

.games-night-switch{
  position:fixed;
  left:clamp(.75rem, 2.6vw, 2rem);
  top:clamp(.75rem, 2.6vw, 2rem);
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:6;
  -webkit-appearance:none;
  appearance:none;
}

.games-night-switch::after{
  content:"";
  width:100%;
  height:100%;
  display:block;
  background:var(--svg-sun) no-repeat 0 0 / 100% 100% !important;
  image-rendering:pixelated;
  filter:
    drop-shadow(2px 0 rgba(255,107,214,.4))
    drop-shadow(-2px 0 rgba(117,247,255,.34))
    drop-shadow(0 0 5px rgba(255,211,74,.48));
  transition:transform .15s ease, filter .15s ease;
}

.games-night-switch[aria-checked="true"]::after,
body.night.games-page .games-night-switch::after{
  background:var(--svg-moon) no-repeat 0 0 / 100% 100% !important;
  filter:
    drop-shadow(2px 0 rgba(255,107,214,.26))
    drop-shadow(-2px 0 rgba(117,247,255,.52))
    drop-shadow(0 0 6px rgba(121,233,255,.62));
}

.games-night-switch:hover::after{
  transform:translateY(-1px);
}

.games-night-switch:active::after{
  transform:translateY(0) scale(.96);
}

.games-night-switch:focus-visible{
  outline:2px dashed var(--pixel-yellow);
  outline-offset:4px;
  border-radius:4px;
}

.games-hero{
  position:relative;
  isolation:isolate;
  max-width:1120px;
  margin:0 auto 2rem;
  padding:.95rem 1.1rem 1.1rem;
}

.games-hero::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:min(100%, 74rem);
  z-index:-1;
  border:1px solid rgba(117,247,255,.14);
  background:
    linear-gradient(90deg, rgba(5,9,13,.74), rgba(5,9,13,.46) 68%, rgba(5,9,13,.04));
  box-shadow:
    0 16px 42px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.035);
}

.games-page .eyebrow{
  margin:0 0 .5rem;
  color:var(--pixel-green);
  font:400 1.15rem/1 "VT323", ui-monospace, monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-shadow:
    0 2px 0 rgba(0,0,0,.88),
    0 0 12px rgba(157,255,140,.48);
}

.games-hero h1{
  display:inline-block;
  margin:.05rem 0 .7rem;
  text-align:left;
  color:var(--pixel-cream);
  font:400 clamp(1.55rem, 3.8vw, 3rem)/1.18 "Press Start 2P", ui-monospace, monospace;
  letter-spacing:0;
  text-shadow:
    4px 0 rgba(255,107,214,.6),
    -4px 0 rgba(117,247,255,.5),
    0 3px 0 rgba(0,0,0,.84),
    0 0 20px rgba(246,223,115,.34);
}

.hero-copy{
  max-width:64rem;
  margin:0;
  color:rgba(255,249,230,.98);
  font:400 clamp(1.2rem, 2.1vw, 1.55rem)/1.25 "VT323", ui-monospace, monospace;
  text-shadow:
    0 2px 0 rgba(0,0,0,.88),
    0 0 10px rgba(0,0,0,.8);
}

.games-shell{
  max-width:1120px;
  margin:0 auto 4rem;
  padding:0 1rem;
}

.section-head{
  margin:1.5rem 0 .9rem;
}

.section-head h2{
  margin:0;
  color:var(--pixel-cream);
  text-align:left;
  font:400 clamp(1.25rem, 3vw, 1.85rem)/1.2 "Press Start 2P", ui-monospace, monospace;
  text-shadow:
    2px 0 rgba(255,107,214,.5),
    -2px 0 rgba(117,247,255,.42);
}

.game-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:1rem;
}

.game-card{
  position:relative;
  display:grid;
  grid-template-columns:210px minmax(0, 1fr);
  align-items:center;
  flex:1 1 460px;
  max-width:calc(50% - .5rem);
  min-height:286px;
  min-width:0;
  color:var(--pixel-cream);
  text-decoration:none;
  border:2px solid rgba(117,247,255,.34);
  border-radius:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 30%),
    radial-gradient(80% 90% at 100% 0%, rgba(255,107,214,.12), transparent 58%),
    linear-gradient(180deg, var(--pixel-bg), var(--pixel-bg-strong));
  box-shadow:
    0 18px 44px rgba(0,0,0,.46),
    4px 4px 0 rgba(255,107,214,.28),
    -4px -4px 0 rgba(117,247,255,.18),
    inset 0 0 0 2px rgba(255,255,255,.035);
  overflow:hidden;
  contain:layout paint style;
  transition:
    grid-template-columns .42s cubic-bezier(.2, .78, .18, 1),
    min-height .42s cubic-bezier(.2, .78, .18, 1),
    border-color .22s ease,
    box-shadow .22s ease;
}

.game-grid .game-card:last-child:nth-child(odd){
  flex-basis:100%;
  max-width:100%;
}

.game-card::before{
  content:"";
  position:absolute;
  inset:8px;
  pointer-events:none;
  border:1px solid rgba(246,223,115,.22);
  background:
    linear-gradient(90deg, rgba(255,107,214,.055), transparent 22% 78%, rgba(117,247,255,.055)),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(255,255,255,.03) 11px, transparent 12px);
}

.game-card::after{
  content:"";
  position:absolute;
  left:-34%;
  top:0;
  width:28%;
  height:100%;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(246,223,115,.16), transparent);
  transform:skewX(-14deg);
  transition:left .42s cubic-bezier(.2, .78, .18, 1);
}

.game-card:hover::after,
.game-card:focus-visible::after,
.game-card:focus-within::after{
  left:116%;
}

.game-card:hover,
.game-card:focus-visible,
.game-card:focus-within{
  grid-template-columns:132px minmax(0, 1fr);
  min-height:260px;
  outline:none;
  border-color:rgba(246,223,115,.7);
  box-shadow:
    0 20px 50px rgba(0,0,0,.5),
    6px 6px 0 rgba(255,107,214,.34),
    -6px -6px 0 rgba(117,247,255,.24),
    0 0 26px rgba(157,255,140,.16);
}

.linked-game,
.latest-game{
  border-color:rgba(246,223,115,.48);
}

.game-placeholder,
.game-copy{
  position:relative;
  z-index:1;
}

.game-placeholder{
  width:164px;
  height:226px;
  margin:1rem 0 1rem 1rem;
  display:grid;
  place-items:center;
  align-self:center;
  border:2px solid rgba(246,223,115,.42);
  color:rgba(255,246,214,.78);
  background:
    linear-gradient(45deg, rgba(117,247,255,.18) 25%, transparent 25% 50%, rgba(255,107,214,.16) 50% 75%, transparent 75%),
    radial-gradient(circle at 50% 34%, rgba(246,223,115,.16), transparent 34%),
    rgba(4,5,13,.8);
  background-size:18px 18px, 100% 100%, 100% 100%;
  box-shadow:
    0 12px 22px rgba(0,0,0,.36),
    inset 0 0 0 2px rgba(0,0,0,.35);
  overflow:hidden;
  transition:
    width .42s cubic-bezier(.2, .78, .18, 1),
    height .42s cubic-bezier(.2, .78, .18, 1),
    margin .42s cubic-bezier(.2, .78, .18, 1),
    box-shadow .22s ease,
    border-color .22s ease;
}

.game-card:hover .game-placeholder,
.game-card:focus-visible .game-placeholder,
.game-card:focus-within .game-placeholder{
  width:104px;
  height:144px;
  margin:.9rem 0 .9rem .9rem;
}

.game-placeholder img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:auto;
  z-index:1;
}

.game-placeholder img:not([hidden]) ~ span{
  display:none;
}

.game-placeholder::before{
  content:"?";
  position:absolute;
  inset:auto 0 50%;
  transform:translateY(50%);
  color:rgba(117,247,255,.38);
  font:400 5rem/1 "VT323", ui-monospace, monospace;
  text-align:center;
}

.game-placeholder span{
  position:relative;
  z-index:2;
  padding:.25rem .35rem;
  color:var(--pixel-cream);
  background:rgba(4,5,13,.78);
  font:400 1.05rem/1 "VT323", ui-monospace, monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:2px 0 rgba(255,107,214,.4), -2px 0 rgba(117,247,255,.36);
}

.game-copy{
  min-width:0;
  padding:1rem;
}

.game-copy h3{
  margin:0 0 .55rem;
  color:var(--pixel-cream);
  font:400 clamp(1rem, 2vw, 1.32rem)/1.35 "Press Start 2P", ui-monospace, monospace;
  letter-spacing:0;
  text-shadow:2px 0 rgba(255,107,214,.45), -2px 0 rgba(117,247,255,.38);
}

.game-copy .meta{
  margin:0 0 .65rem;
  color:#c5ffb9;
  font:400 1.18rem/1.1 "VT323", ui-monospace, monospace;
  letter-spacing:.04em;
  text-shadow:0 1px 0 rgba(0,0,0,.9);
}

.game-copy p:not(.meta){
  margin:0;
  color:rgba(255,249,230,.96);
  font:400 clamp(1.12rem, 1.8vw, 1.34rem)/1.18 "VT323", ui-monospace, monospace;
  letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(0,0,0,.86);
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(6px);
  transition:
    max-height .46s cubic-bezier(.2, .78, .18, 1),
    opacity .28s ease .06s,
    transform .34s cubic-bezier(.2, .78, .18, 1);
}

.stat-list{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:0;
  padding:0;
  list-style:none;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(6px);
  transition:
    max-height .46s cubic-bezier(.2, .78, .18, 1),
    opacity .28s ease .08s,
    transform .34s cubic-bezier(.2, .78, .18, 1),
    margin .28s ease;
}

.game-card:hover .game-copy p:not(.meta),
.game-card:focus-visible .game-copy p:not(.meta),
.game-card:focus-within .game-copy p:not(.meta),
.game-card:hover .stat-list,
.game-card:focus-visible .stat-list,
.game-card:focus-within .stat-list{
  max-height:12rem;
  opacity:1;
  transform:translateY(0);
}

.game-card:hover .stat-list,
.game-card:focus-visible .stat-list,
.game-card:focus-within .stat-list{
  margin:.85rem 0 0;
}

.stat-list li{
  display:flex;
  gap:.35rem;
  align-items:baseline;
  padding:.22rem .42rem;
  border:1px solid rgba(117,247,255,.28);
  background:rgba(117,247,255,.055);
  font-family:"VT323", ui-monospace, monospace;
  font-size:1rem;
}

.stat-list span{
  color:var(--pixel-yellow);
  text-transform:uppercase;
}

.stat-list strong{
  color:rgba(255,249,230,.95);
  font-weight:400;
}

body.night.games-page .godrays{
  opacity:.08;
  pointer-events:none;
}

body.night.games-page .pixel-wash{
  opacity:1;
  background:
    radial-gradient(700px 520px at 14% 24%, rgba(107,154,255,.1), transparent 64%),
    radial-gradient(820px 620px at 84% 8%, rgba(117,247,255,.13), transparent 62%),
    radial-gradient(680px 520px at 70% 82%, rgba(155,128,255,.1), transparent 66%),
    linear-gradient(180deg, rgba(1,4,14,.68), rgba(1,3,10,.9));
}

body.night.games-page .pixel-hud-glow{
  opacity:.36;
  filter:
    hue-rotate(132deg)
    saturate(1.15)
    brightness(.72)
    contrast(1.18);
}

body.night.games-page .game-card{
  --pixel-bg:rgba(3, 7, 18, .9);
  --pixel-bg-strong:rgba(1, 3, 10, .98);
  border-color:rgba(117,247,255,.42);
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 28%),
    radial-gradient(80% 90% at 100% 0%, rgba(117,247,255,.13), transparent 58%),
    linear-gradient(180deg, var(--pixel-bg), var(--pixel-bg-strong));
}

body.night.games-page .games-hero::before{
  border-color:rgba(117,247,255,.18);
  background:
    linear-gradient(90deg, rgba(1,4,14,.88), rgba(1,4,14,.66) 68%, rgba(1,4,14,.12));
}

body.night.games-page .games-nav a,
body.night.games-page .section-head h2,
body.night.games-page .games-hero h1{
  text-shadow:
    2px 0 rgba(255,107,214,.32),
    -2px 0 rgba(117,247,255,.58),
    0 0 16px rgba(117,247,255,.24);
}

body.night.games-page .game-copy .meta{
  color:#aeefff;
}

body.night.games-page .fireflies-container .firefly{
  background:rgba(151,221,255,.86) !important;
  box-shadow:
    0 0 7px rgba(117,247,255,.8),
    0 0 18px rgba(117,247,255,.3),
    8px 14px 0 rgba(175,152,255,.35) !important;
}

@media (max-width:680px){
  .games-page{
    padding-top:.85rem;
    background-attachment:scroll;
  }

  .games-nav{
    justify-content:center;
    margin:0 0 2rem;
    padding:0 3.65rem;
    gap:.45rem .75rem;
    font-size:1.1rem;
  }

  .games-night-switch{
    position:absolute;
    left:.85rem;
    top:.8rem;
  }

  .games-hero{
    text-align:center;
    margin-bottom:1.35rem;
    padding:0 .85rem;
  }

  .games-hero h1,
  .section-head h2{
    text-align:center;
  }

  .games-shell{
    padding:0 .85rem;
  }

  .game-card{
    grid-template-columns:96px minmax(0, 1fr);
    flex-basis:100%;
    max-width:100%;
    min-height:0;
  }

  .game-placeholder{
    width:76px;
    height:108px;
    margin:.75rem 0 .75rem .75rem;
  }

  .game-placeholder::before{
    font-size:4rem;
  }

  .game-placeholder span{
    font-size:.86rem;
  }

  .game-copy{
    padding:.85rem;
  }
}

@media (pointer:coarse), (max-width:680px){
  .pixel-stars span:nth-child(n+5),
  .games-page .firefly:nth-child(n+6){
    display:none;
  }

  .crt-lines{
    opacity:.12;
  }

  .game-card::before{
    opacity:.75;
  }

  .game-copy p:not(.meta),
  .stat-list{
    max-height:none;
    opacity:1;
    overflow:visible;
    transform:none;
  }

  .stat-list{
    margin:.85rem 0 0;
  }
}

@media (prefers-reduced-motion:reduce){
  .pixel-stars span,
  .games-page .firefly,
  .games-page .godrays,
  .games-page .godrays::after,
  .games-page h1,
  .games-page h2{
    animation:none !important;
  }

  .game-card::after{
    transition:none;
  }
}