/* Sparximer portfolio design, based on approved V13 Neon Arcade.
   Edit CSS variables at the top for site-wide colors.
   Card animations at bottom, category layouts near the middle. */
/* Sparximer V4 — real-game catalog, responsive category archives */
:root {
  --bg: #06142d;
  --surface: #091e3d;
  --card: #0c2850;
  --line: #194672;
  --text: #f8fbff;
  --muted: #adc0d9;
  --cyan: #06c9ee;
  --cyan-bright: #27dffa;
  --font: 'Space Grotesk',sans-serif;
  --body: 'DM Sans',sans-serif
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body)
}
a {
  color: inherit;
  text-decoration: none
}
button,input {
  font: inherit
}
button {
  cursor: pointer
}
button:disabled {
  cursor: default
}
img {
  display: block;
  max-width: 100%
}
::selection {
  background: #23d5f3;
  color: #06142d
}
:focus-visible {
  outline: 2px solid var(--cyan-bright);
  outline-offset: 4px
}
.container {
  width: min(1450px,calc(100% - 76px));
  margin: auto
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid #18517b;
  background: #05152cf4;
  backdrop-filter: blur(14px)
}
.header-shell {
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 23px
}
.logo img {
  width: 190px;
  height: auto;
  max-height: 55px;
  object-fit: contain
}
.desktop-nav {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-left: auto
}
.desktop-nav a {
  font-size: 13px;
  font-weight: 800;
  color: #d0e3f3;
  white-space: nowrap
}
.desktop-nav a:hover,.desktop-nav a:focus-visible {
  color: var(--cyan)
}
.header-search {
  border: 1px solid #285784;
  border-radius: 50px;
  background: #0c2448;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  height: 42px;
  max-width: 320px;
  min-width: 150px;
  flex: 1
}
.header-search span {
  font-size: 25px;
  line-height: 1;
  color: var(--cyan)
}
.header-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  color: #fff;
  outline: 0;
  background: transparent;
  font-size: 12px
}
.header-search input::placeholder {
  color: #aac4df
}
.contact-button {
  background: var(--cyan);
  color: #06172a;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap
}
.contact-button:hover,.btn-primary:hover {
  background: #57e5ff
}
.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 26px
}
.mobile-nav {
  display: none
}
.section {
  padding: 38px 0 58px
}
.overline {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 800
}
.hero {
  overflow: hidden;
  background: linear-gradient(120deg,#07172c,#061730 42%,#0a1e48);
  border-bottom: 1px solid #1a4f7d
}
.hero-grid {
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: center;
  min-height: 395px
}
.hero-copy {
  padding: 45px 30px 40px 0;
  position: relative;
  z-index: 2
}
.eyebrow {
  color: #cce2ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.8px
}
.hero h1 {
  font: 700 clamp(38px,4.3vw,72px)/.98 var(--font);
  letter-spacing: -2.7px;
  margin: 24px 0 18px
}
.hero h1 span,.about-grid h2 span {
  color: var(--cyan)
}
.hero p {
  font-size: 16px;
  line-height: 1.65;
  color: #d7e8f9;
  max-width: 510px
}
.hero-actions {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  margin-top: 22px
}
.btn {
  border-radius: 9px;
  padding: 12px 17px;
  border: 1px solid #2f89c5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
  min-height: 43px
}
.btn-primary {
  background: var(--cyan);
  color: #082038;
  border-color: var(--cyan)
}
.btn-secondary {
  background: #081c38;
  color: #ecfaff
}
.btn-secondary:hover {
  background: #123460
}
.proof-chips {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px
}
.proof-chips span {
  font-size: 10px;
  color: #bad1ec
}
.hero-art {
  height: 360px;
  position: relative
}
.hero-art::before {
  content: '';
  position: absolute;
  inset: 0 0 0 -85px;
  background: linear-gradient(90deg,#07172c 0%,transparent 33%);
  z-index: 1;
  pointer-events: none
}
.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}
.section-title-row,.portfolio-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 25px;
  margin-bottom: 24px
}
.section-title-row h2,.portfolio-top h2 {
  font: 700 clamp(25px,3vw,39px)/1.1 var(--font);
  margin: 8px 0 5px
}
.section-title-row p,.portfolio-top p {
  margin: 0;
  color: var(--muted);
  font-size: 13px
}
.subtle-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  white-space: nowrap
}
.category-strip {
  background: #081b37;
  border-bottom: 1px solid #154472
}
.category-featured {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 14px
}
.category-tile {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid #225181;
  border-radius: 12px;
  padding: 19px 13px;
  background: #11316b;
  min-width: 0
}
.category-tile:hover,.directory-links a:hover {
  transform: translateY(-2px);
  border-color: var(--cyan)
}
.category-tile.cat-0 {
  background: #261d64
}
.category-tile.cat-1 {
  background: #4e293d
}
.category-tile.cat-2 {
  background: #164d39
}
.category-tile.cat-3 {
  background: #13407c
}
.category-tile.cat-4 {
  background: #542044
}
.category-icon {
  background: #163967;
  padding: 11px;
  border-radius: 9px;
  font-size: 27px
}
.category-tile strong {
  font: 700 15px var(--font);
  display: block;
  line-height: 1.2
}
.category-hints {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 7px
}
.category-hints span {
  font-size: 9px;
  border-radius: 4px;
  padding: 3px 6px;
  background: #0004
}
.chev {
  margin-left: auto;
  color: #dbeafc
}
.portfolio-section {
  background: #071b37
}
.portfolio-count {
  font: 700 12px var(--font);
  color: #7ddffc;
  white-space: nowrap
}
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 24px
}
.filter-pill {
  font-size: 12px;
  color: #ceddf1;
  background: #082346;
  border: 1px solid #215384;
  border-radius: 28px;
  padding: 8px 13px;
  font-weight: 600
}
.filter-pill:hover {
  border-color: var(--cyan)
}
.filter-pill.active {
  background: var(--cyan);
  color: #021b30;
  border-color: var(--cyan);
  font-weight: 800
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 13px
}
.game-card {
  background: #0b2345;
  border: 1px solid #246193;
  border-radius: 9px;
  overflow: hidden;
  min-width: 0;
  position: relative
}
.game-card:has(.game-launch):hover {
  box-shadow: 0 0 0 1px #16c7f6,0 10px 26px #0005;
  transform: translateY(-2px)
}
.game-launch,.game-static {
  display: block
}
.game-image {
  height: 125px;
  background: #102a4a;
  overflow: hidden;
  position: relative
}
.game-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.game-launch:hover img {
  transform: scale(1.05);
  transition: transform .2s
}
.external-arrow {
  position: absolute;
  right: 8px;
  top: 8px;
  border-radius: 5px;
  background: #072342dd;
  border: 1px solid #fff8;
  font-size: 15px;
  padding: 2px 6px
}
.game-static .external-arrow {
  display: none
}
.game-info {
  padding: 9px 9px 11px
}
.game-info strong {
  display: block;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.game-tags {
  margin-top: 8px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap
}
.game-tags span {
  background: #123f73;
  border: 1px solid #215d90;
  border-radius: 5px;
  padding: 3px 6px;
  color: #e8f2ff;
  font-size: 9px
}
.buy-link {
  display: block;
  font-size: 10px;
  margin: 0 9px 9px;
  padding: 6px 8px;
  border: 1px solid #11a7d5;
  color: #8feaff;
  border-radius: 5px;
  text-align: center
}
.buy-link:hover {
  background: #06345d
}
.no-demo-note {
  display: block;
  font-size: 10px;
  color: #91a6c0;
  margin: 0 9px 9px
}
.load-more {
  text-align: center;
  padding-top: 30px
}
.load-more [hidden] {
  display: none
}
#noResults {
  padding: 28px;
  border: 1px dashed #265a82;
  border-radius: 10px;
  color: #c2d5ec
}
.about-section {
  background: #08182f;
  border-top: 1px solid #134372
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px
}
.about-grid h2 {
  font: 700 clamp(40px,5vw,65px)/1.04 var(--font);
  letter-spacing: -3px;
  margin: 15px 0 0
}
.about-grid p {
  line-height: 1.8;
  color: #c5d7eb;
  font-size: 15px
}
.contact-section {
  background: linear-gradient(120deg,#0c3c65,#036483);
  padding: 56px 0
}
.contact-section h2 {
  font: 700 clamp(35px,5vw,60px) var(--font);
  margin: 13px 0
}
.contact-section a {
  color: #d8f9ff;
  font-size: 22px;
  font-weight: 700
}
.footer {
  background: #041226;
  border-top: 1px solid #1b4970
}
.footer-grid {
  display: grid;
  grid-template-columns: 220px minmax(0,1fr) 200px;
  gap: 33px;
  padding-top: 39px;
  padding-bottom: 37px
}
.footer-brand img {
  width: 190px
}
.footer-brand p,.footer-contact p {
  font-size: 12px;
  line-height: 1.65;
  color: #a7bbd4
}
.footer-cta,.footer-contact>a {
  font-size: 12px;
  color: var(--cyan)
}
.footer-taxonomy {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 20px
}
.footer-column {
  display: flex;
  flex-direction: column;
  gap: 7px
}
.footer-column h3 {
  font: 700 13px var(--font);
  margin: 0 0 6px
}
.footer-column h3 a:hover {
  color: var(--cyan)
}
.footer-column>a {
  font-size: 11px;
  color: #aac1dd;
  line-height: 1.5
}
.footer-column>a:hover {
  color: var(--cyan)
}
.footer-contact h3 {
  margin: 0;
  font: 700 15px var(--font)
}
.footer-quick {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 15px
}
.footer-quick a {
  color: #a3bfdc;
  font-size: 11px
}
.footer-bottom {
  border-top: 1px solid #113758;
  padding-top: 13px;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  color: #7a9ab6;
  font-size: 10px
}
.archive-head {
  background: linear-gradient(120deg,#0b3051,#08204b 65%,#08172e);
  padding: 63px 0;
  border-bottom: 1px solid #185b87
}
.archive-head h1 {
  font: 700 clamp(39px,5.5vw,68px) var(--font);
  margin: 12px 0
}
.archive-head p {
  color: #c7d9ee;
  max-width: 750px;
  font-size: 16px
}
.breadcrumbs {
  font-size: 12px;
  color: #aac4e3;
  margin-bottom: 25px
}
.breadcrumbs a {
  color: #77dcf6
}
.category-submenu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 25px
}
.category-submenu a {
  font-size: 12px;
  border: 1px solid #1b739c;
  border-radius: 22px;
  padding: 8px 12px;
  background: #0d3761
}
.category-submenu a:hover {
  border-color: var(--cyan);
  color: var(--cyan)
}
.category-directory {
  background: #071a36
}
.category-directory .container {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px
}
.directory-panel {
  background: #0b274e;
  border: 1px solid #25619a;
  border-radius: 13px;
  padding: 27px
}
.directory-panel h2 {
  margin: 0;
  font: 700 25px var(--font)
}
.directory-panel h2 a:hover {
  color: var(--cyan)
}
.directory-panel p {
  color: #a7bfdc;
  font-size: 13px;
  line-height: 1.7
}
.directory-links {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px
}
.directory-links a {
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  border: 1px solid #20527f;
  border-radius: 7px;
  background: #092c54
}
.directory-links a span {
  color: var(--cyan)
}
@media(max-width:1250px) {
  .header-shell {
    gap: 12px
  }
  .desktop-nav {
    gap: 15px
  }
  .header-search {
    max-width: 230px
  }
  .category-tile {
    flex-wrap: wrap;
    align-content: start
  }
  .game-grid {
    grid-template-columns: repeat(5,minmax(0,1fr))
  }
  .footer-grid {
    grid-template-columns: 185px minmax(0,1fr)
  }
  .footer-contact {
    grid-column: 1/-1
  }
}
@media(max-width:900px) {
  .container {
    width: calc(100% - 38px)
  }
  .desktop-nav,.contact-button {
    display: none
  }
  .menu-toggle {
    display: block;
    margin-left: auto
  }
  .header-search {
    max-width: none;
    flex: 1
  }
  .mobile-nav.open {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 21px 19px;
    border-top: 1px solid #18466d;
    background: #051830
  }
  .mobile-nav a {
    padding: 12px;
    border-bottom: 1px solid #163c5e;
    font-size: 13px
  }
  .hero-grid {
    grid-template-columns: 1fr
  }
  .hero-copy {
    padding: 55px 0 15px
  }
  .hero-art {
    height: 320px
  }
  .hero-art::before {
    display: none
  }
  .category-featured {
    grid-template-columns: repeat(3,minmax(0,1fr))
  }
  .game-grid {
    grid-template-columns: repeat(4,minmax(0,1fr))
  }
  .footer-taxonomy {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
  .footer-grid {
    grid-template-columns: 1fr 2fr;
    gap: 22px
  }
}
@media(max-width:640px) {
  .logo img {
    width: 140px
  }
  .header-shell {
    min-height: 73px
  }
  .header-search {
    min-width: 0;
    height: 38px
  }
  .header-search input {
    font-size: 11px
  }
  .hero h1 {
    font-size: 42px;
    letter-spacing: -1.9px
  }
  .hero-copy {
    padding-top: 39px
  }
  .proof-chips {
    gap: 12px
  }
  .hero-art {
    height: 240px;
    margin-bottom: 5px
  }
  .section {
    padding: 30px 0 38px
  }
  .section-title-row,.portfolio-top {
    align-items: flex-start
  }
  .category-featured {
    grid-template-columns: 1fr 1fr
  }
  .category-tile {
    padding: 12px
  }
  .category-icon {
    font-size: 20px;
    padding: 7px
  }
  .category-tile strong {
    font-size: 12px
  }
  .category-hints {
    display: none
  }
  .game-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px
  }
  .game-image {
    height: 100px
  }
  .game-info {
    padding: 8px
  }
  .game-tags span {
    font-size: 8px;
    padding: 2px 5px
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }
  .contact-section a {
    font-size: 18px
  }
  .footer-grid {
    grid-template-columns: 1fr
  }
  .footer-contact {
    grid-column: auto
  }
  .footer-taxonomy {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 17px
  }
  .category-directory .container {
    grid-template-columns: 1fr
  }
  .archive-head {
    padding: 37px 0
  }
  .archive-head p {
    font-size: 13px
  }
  .directory-links {
    grid-template-columns: 1fr
  }
}
@media(max-width:420px) {
  .header-search {
    max-width: 115px
  }
  .header-search input::placeholder {
    color: transparent
  }
  .category-featured {
    grid-template-columns: 1fr
  }
  .category-tile {
    gap: 10px
  }
  .category-hints {
    display: flex
  }
  .hero-art {
    height: 180px
  }
  .hero p {
    font-size: 14px
  }
  .game-image {
    height: 96px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior: auto!important;
    transition: none!important
  }
}
/* V5: the original interactive featured-card hero replaces the static illustrated banner. */
.hero {
  background: radial-gradient(ellipse at 76% 48%,#145078 0%,#0a2a50 37%,#06142d 81%)
}
.hero-grid {
  grid-template-columns: 44% 56%;
  min-height: 570px
}
.hero-copy {
  padding-top: 70px;
  padding-bottom: 70px
}
.hero-interactive {
  height: 555px;
  isolation: isolate;
  position: relative;
  overflow: visible
}
.hero-interactive::before {
  display: none
}
.hero-interactive::after {
  content: "";
  position: absolute;
  inset: 6% 5%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,#2fc8ed33,transparent 65%);
  filter: blur(12px)
}
.showcase-orbit {
  position: absolute;
  border: 1px solid #29d8f044;
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(-22deg)
}
.orbit-one {
  width: 75%;
  height: 69%;
  left: 15%;
  top: 14%
}
.orbit-two {
  width: 59%;
  height: 84%;
  left: 19%;
  top: 5%;
  border-style: dashed;
  opacity: .55;
  transform: rotate(17deg)
}
.showcase-slot {
  position: absolute;
  transition: transform .17s ease-out;
  will-change: transform
}
.showcase-card {
  height: 100%;
  display: block;
  position: relative;
  border: 5px solid #1b628c;
  border-radius: 18px;
  overflow: hidden;
  background: #071d3d;
  box-shadow: 0 28px 55px #0009,0 0 0 1px #53daf444;
  animation: showcase-bob 6s ease-in-out infinite;
  transition: border-color .25s ease,box-shadow .25s ease;
}
.showcase-card:hover,.showcase-card:focus-visible {
  border-color: #59efff;
  box-shadow: 0 29px 63px #000a,0 0 24px #03d8ff70;
  animation-play-state: paused
}
.showcase-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #09284d;
  transition: transform .35s ease
}
.showcase-card:hover img,.showcase-card:focus-visible img {
  transform: scale(1.045)
}
.showcase-darken {
  position: absolute;
  inset: 42% 0 0;
  pointer-events: none;
  background: linear-gradient(transparent,#041429bd 35%,#031227f6)
}
.showcase-caption {
  position: absolute;
  bottom: 16px;
  left: 17px;
  right: 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-shadow: 0 2px 8px #000
}
.showcase-caption small {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: #98f1ff;
  font-weight: 800
}
.showcase-caption strong {
  font: 800 22px/1.09 var(--font);
  letter-spacing: -.7px
}
.showcase-caption em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: #d4faff
}
.showcase-main {
  width: 58%;
  height: 78%;
  left: 27%;
  top: 10%;
  z-index: 2;
  rotate: 5deg
}
.showcase-main .showcase-caption strong {
  font-size: 30px
}
.showcase-top {
  width: 39%;
  height: 46%;
  left: 1%;
  top: 2%;
  z-index: 3;
  rotate: -11deg
}
.showcase-top .showcase-card {
  animation-delay: -2.25s
}
.showcase-bottom {
  width: 37%;
  height: 44%;
  right: -1%;
  bottom: 2%;
  z-index: 3;
  rotate: 10deg
}
.showcase-bottom .showcase-card {
  animation-delay: -4.0s
}
.showcase-sticker {
  position: absolute;
  z-index: 5;
  left: 4%;
  bottom: 8%;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  rotate: -14deg;
  background: #10d6f4;
  color: #06203a;
  box-shadow: 0 15px 25px #0008;
  border: 4px solid #75eaff;
  font: 800 16px/1.03 var(--font)
}
.showcase-sticker span+span {
  font-size: 24px;
  margin-top: 4px
}
.showcase-spark {
  position: absolute;
  z-index: 3;
  color: #2ce9ff;
  pointer-events: none;
  animation: showcase-twinkle 4s ease-in-out infinite
}
.spark-one {
  top: 0;
  right: 12%;
  font-size: 36px
}
.spark-two {
  bottom: 9%;
  left: 30%;
  font-size: 25px;
  animation-delay: -2s
}
.showcase-hint {
  position: absolute;
  top: 4%;
  left: 35%;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #a8eafd
}
@keyframes showcase-bob {
  0%,100% {
    translate: 0 0
  }
  50% {
    translate: 0 -12px
  }
}
@keyframes showcase-twinkle {
  0%,100% {
    opacity: .5;
    scale: .88
  }
  50% {
    opacity: 1;
    scale: 1.16
  }
}
/* Preserve every square source thumbnail as a 1:1 tile. No forced landscape cropping. */
.game-image {
  height: auto!important;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center
}
.game-image img {
  width: 100%;
  height: 100%;
  object-fit: contain
}
@media(max-width:900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto
  }
  .hero-copy {
    padding: 49px 0 8px
  }
  .hero-interactive {
    height: 540px;
    max-width: 650px;
    width: 100%;
    margin: 0 auto
  }
}
@media(max-width:640px) {
  .hero-copy {
    padding: 42px 0 5px
  }
  .hero-interactive {
    height: 390px;
    max-width: 440px
  }
  .showcase-card {
    border-width: 3px;
    border-radius: 12px
  }
  .showcase-main .showcase-caption strong {
    font-size: 17px
  }
  .showcase-caption strong {
    font-size: 14px
  }
  .showcase-caption small {
    font-size: 7px;
    letter-spacing: .4px
  }
  .showcase-caption {
    bottom: 9px;
    left: 9px;
    right: 5px;
    gap: 3px
  }
  .showcase-caption em {
    font-size: 8px
  }
  .showcase-sticker {
    width: 70px;
    height: 70px;
    font-size: 11px;
    border-width: 2px
  }
  .showcase-sticker span+span {
    font-size: 15px
  }
  .showcase-hint {
    font-size: 7px
  }
}
@media(max-width:420px) {
  .hero-interactive {
    height: 315px
  }
  .showcase-sticker {
    left: 2%;
    bottom: 2%;
    width: 64px;
    height: 64px
  }
  .showcase-main {
    width: 58%;
    left: 27%
  }
}
@media(prefers-reduced-motion:reduce) {
  .showcase-card,.showcase-spark {
    animation: none!important
  }
  .showcase-slot {
    transition: none
  }
}
/* V6: original Sparximer category page section grouping */
.game-grid.grouped-portfolio {
  display: block!important;
}
.game-section {
  margin: 0 0 42px;
}
.game-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(111,198,245,.25);
  padding-bottom: 14px;
  margin-bottom: 20px;
}
.game-section-header h3 {
  font-family: 'Space Grotesk',sans-serif;
  font-size: clamp(1.25rem,2vw,1.65rem);
  color: #f0faff;
  margin: 0;
}
.game-section-header span {
  font-size: .82rem;
  color: #79b7d7;
}
.game-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(100%,180px),1fr));
  gap: 16px;
}
.source-link {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #8bc2e5!important;
}
@media(max-width:650px) {
  .game-section-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }
}
/* V7: display small source thumbnails at their actual pixel dimensions.
   No upscaling even when the card has more room; never crop. */
.game-card--tiny-art .game-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 45%,#18406d,#0a213c 76%);
}
.game-card--tiny-art .game-image img {
  width: auto!important;
  height: auto!important;
  max-width: 80px;
  max-height: 80px;
  object-fit: contain!important;
  image-rendering: auto;
}
.game-card--tiny-art .game-launch:hover .game-image img {
  transform: none;
  /* no zoom that blurs a small image */
}
/* The Mini Games category is an intentionally dense icon library: its
   image/buttons are exactly 80 × 80 at natural resolution on all screens. */
body[data-category="mini-games"] .game-section-grid,
body[data-category="mini-games"] .game-grid:not(.grouped-portfolio) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px,1fr));
  gap: 13px;
}
body[data-category="mini-games"] .game-card--mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 9px 4px 8px;
  border-radius: 10px;
  text-align: center;
  min-width: 0;
}
body[data-category="mini-games"] .game-card--mini .game-launch,
body[data-category="mini-games"] .game-card--mini .game-static {
  width: 100%;
}
body[data-category="mini-games"] .game-card--mini .game-image {
  width: 80px!important;
  height: 80px!important;
  margin: 0 auto;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #102e55;
}
body[data-category="mini-games"] .game-card--mini .game-image img {
  width: 80px!important;
  height: 80px!important;
  max-width: 80px!important;
  max-height: 80px!important;
  object-fit: contain!important;
  transform: none!important;
}
body[data-category="mini-games"] .game-card--mini .external-arrow {
  right: 3px;
  top: 3px;
  font-size: 12px;
  padding: 0 4px;
}
body[data-category="mini-games"] .game-card--mini .game-info {
  padding: 8px 3px 2px;
}
body[data-category="mini-games"] .game-card--mini .game-info strong {
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 29px;
}
body[data-category="mini-games"] .game-card--mini .game-tags {
  display: none;
}
body[data-category="mini-games"] .game-card--mini .no-demo-note {
  font-size: 9px;
  line-height: 1.3;
  margin: 5px 2px 0;
  color: #a6c1d7;
}
body[data-category="mini-games"] .game-card--mini .buy-link {
  font-size: 9px;
  margin: 6px 2px 0;
}
@media(max-width:420px) {
  body[data-category="mini-games"] .game-section-grid,
  body[data-category="mini-games"] .game-grid:not(.grouped-portfolio) {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
  }
  body[data-category="mini-games"] .game-card--mini {
    padding: 7px 1px;
  }
}
/* V9: source-faithful editorial introductions and TV portfolio section */
.game-section-header {
  align-items: flex-start;
}
.game-section-intro {
  max-width: 980px;
}
.game-section-intro p {
  max-width: 920px;
  margin: 10px 0 3px;
  color: #bcd8ee;
  line-height: 1.65;
  font-size: 14px;
}
.archive-info {
  margin-top: 28px;
}
.video-project {
  border: 1px solid #2c668f;
  background: #09274a;
  border-radius: 16px;
  padding: 26px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.25fr);
  gap: 28px;
  align-items: center;
}
.video-project h2 {
  font: 700 clamp(26px,3vw,40px) 'Space Grotesk',sans-serif;
  margin: 11px 0;
}
.video-project p,.archive-note p,.video-pending p {
  font-size: 14px;
  line-height: 1.7;
  color: #bcd3e9;
}
.video-project a.btn {
  margin-top: 12px;
}
.video-frame {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  background: #06182f;
  border: 1px solid #296089;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.video-pending {
  padding: 26px;
  text-align: center;
}
.video-pending strong {
  color: #65dbf6;
}
.archive-note {
  padding: 23px 25px;
  background: #0a2b52;
  border: 1px solid #23658e;
  border-radius: 12px;
}
.archive-note strong {
  color: #a8edff;
}
.archive-note a {
  color: #28dafa;
  text-decoration: underline;
}
@media(max-width:760px) {
  .video-project {
    grid-template-columns: 1fr;
    padding: 18px;
  }
}
.game-section-intro p {
  white-space: pre-line;
}
/* V13 — approved Neon Arcade: clean artwork (no play medallion or link arrows),
   animated cyan corner brackets and scanline. Preserves source image sizes. */
.game-card {
  isolation: isolate;
  border-color: #285e91;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px #092a51;
  transition: transform .48s cubic-bezier(.2,.8,.2,1),
             border-color .32s ease,box-shadow .43s ease,
             opacity .78s cubic-bezier(.18,.77,.21,1),
             filter .78s ease;
}
.game-card .game-image {
  isolation: isolate;
}
.game-card .game-image img {
  transition: transform .65s cubic-bezier(.18,.8,.2,1),filter .5s ease;
}
.game-card .game-info {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg,#0c2546,#0b1b38);
  border-top: 1px solid #2b5b87;
}
.game-card .neon-corner {
  position: absolute;
  z-index: 3;
  display: block;
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: scale(.75);
  pointer-events: none;
  border-color: #59efff;
  transition: opacity .27s,transform .4s cubic-bezier(.2,.8,.2,1);
}
.neon-tl {
  left: 10px;
  top: 10px;
  border-left: 3px solid;
  border-top: 3px solid;
}
.neon-tr {
  right: 10px;
  top: 10px;
  border-right: 3px solid;
  border-top: 3px solid;
}
.neon-bl {
  left: 10px;
  bottom: 10px;
  border-left: 3px solid;
  border-bottom: 3px solid;
}
.neon-br {
  right: 10px;
  bottom: 10px;
  border-right: 3px solid;
  border-bottom: 3px solid;
}
.game-card .neon-scanline {
  position: absolute;
  z-index: 3;
  display: block;
  left: 0;
  right: 0;
  top: -12%;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg,transparent,#60effff5,transparent);
  box-shadow: 0 0 16px 6px #3bdff326;
}
.game-launch .game-image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(0deg,transparent 0,transparent 5px,#06325125 6px);
  transition: opacity .35s ease;
}
.game-card:has(.game-launch):is(:hover,:focus-within) {
  transform: translateY(-7px) scale(1.012);
  border-color: #35e7f7;
  box-shadow: 0 20px 34px #0008,0 0 0 1px #62dcf5,0 0 26px #24c9f52e;
}
.game-card:has(.game-launch):is(:hover,:focus-within) .game-image img {
  transform: scale(1.04);
  filter: brightness(.83) saturate(1.18);
}
.game-card:has(.game-launch):is(:hover,:focus-within) .neon-corner {
  opacity: 1;
  transform: scale(1);
}
.game-card:has(.game-launch):is(:hover,:focus-within) .neon-scanline {
  opacity: 1;
  animation: sparximer-scan-pass 1.75s linear infinite;
}
.game-card:has(.game-launch):is(:hover,:focus-within) .game-image::after {
  opacity: 1;
}
@keyframes sparximer-scan-pass {
  from {
    top: -12%
  }
  to {
    top: 112%
  }
}
/* Small icon games must remain at 80 x 80; no enlarging or blurring on hover. */
.game-card--tiny-art:has(.game-launch):is(:hover,:focus-within) .game-image img,
body[data-category="mini-games"] .game-card--mini:has(.game-launch):is(:hover,:focus-within) .game-image img {
  transform: none!important;
  filter: none!important;
}
body[data-category="mini-games"] .game-card--mini .neon-corner {
  width: 12px;
  height: 12px;
  border-width: 2px;
}
body[data-category="mini-games"] .game-card--mini .neon-tl {
  top: 5px;
  left: 5px;
}
body[data-category="mini-games"] .game-card--mini .neon-tr {
  top: 5px;
  right: 5px;
}
body[data-category="mini-games"] .game-card--mini .neon-bl {
  bottom: 5px;
  left: 5px;
}
body[data-category="mini-games"] .game-card--mini .neon-br {
  bottom: 5px;
  right: 5px;
}
/* Entrance: staggered slide up + fade, only when IntersectionObserver is active. */
.game-card.reveal-item {
  opacity: 0;
  transform: translate3d(0,40px,0) scale(.985);
  filter: blur(3px);
  transition-delay: var(--reveal-delay,0ms);
}
.game-card.reveal-item.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}
.game-card.reveal-item.is-visible:has(.game-launch):is(:hover,:focus-within) {
  transform: translateY(-7px) scale(1.012);
}
/* Keep hover response immediate after entrance animation (no artificial delay). */
.game-card.reveal-item.is-visible:hover,.game-card.reveal-item.is-visible:focus-within {
  transition-delay: 0ms;
}
.video-local-preview {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 22px;
  text-align: center;
}
.video-local-preview>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .23;
}
.video-local-preview>div {
  position: relative;
  max-width: 430px;
}
.video-local-preview strong {
  font: 700 20px var(--font);
  color: #effaff;
}
.video-local-preview p {
  font-size: 12px;
  line-height: 1.5;
  color: #d5ecfa;
}
.video-local-preview a {
  display: inline-block;
  color: #68e7ff;
  font-size: 12px;
  font-weight: 700;
}
@media(hover:none) {
  .game-card .game-image img {
    filter: none!important;
  }
}
@media(prefers-reduced-motion:reduce) {
  .game-card,.game-card.reveal-item {
    opacity: 1!important;
    transform: none!important;
    filter: none!important;
    transition: none!important;
  }
  .game-card .neon-scanline {
    animation: none!important;
  }
}

/* Plain WordPress content pages. Existing portfolio templates are unchanged. */
.spx-content-page{max-width:980px;margin-inline:auto}
.spx-content-body{color:#dce6f5;font-size:1.06rem;line-height:1.78}
.spx-content-body h2,.spx-content-body h3,.spx-content-body h4{color:#f5f9ff;margin:1.7em 0 .55em;line-height:1.25}
.spx-content-body p,.spx-content-body ul,.spx-content-body ol,.spx-content-body blockquote{margin:0 0 1.2em}
.spx-content-body a{color:#48dbff;text-decoration:underline;text-underline-offset:3px}
.spx-content-body img,.spx-content-body video,.spx-content-body iframe{max-width:100%;height:auto;border-radius:12px}
.spx-content-body iframe{height:auto;aspect-ratio:16/9;width:100%}
.spx-content-body .wp-block-button__link{display:inline-block;padding:.7em 1.2em;text-decoration:none}
.spx-content-body :is(input,textarea,select){max-width:100%}

/* Homepage shortcuts use the same live category hierarchy as the footer. */
.filter-pill--subcategory:not(.active) {
  background: #091f3d;
  border-color: #25476c;
  color: #bcd2ee;
}
.filter-pill:focus-visible {
  outline: 2px solid #16c7f6;
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .filter-pills { gap: 7px; }
  .filter-pill { padding: 7px 11px; max-width: 100%; white-space: normal; }
}