:root {
  --bg: #0c0d11;
  --surface: #13151b;
  --surface-raised: #191c24;
  --text: #f2f3f7;
  --muted: #989daa;
  --quiet: #646a78;
  --accent: #9da7ff;
  --accent-bright: #bcc3ff;
  --accent-ink: #111425;
  --line: rgba(242, 243, 247, 0.11);
  --line-strong: rgba(242, 243, 247, 0.2);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --content-width: 1240px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 78% 4%, rgba(157, 167, 255, 0.08), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  z-index: 10;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 4px,
    rgba(255, 255, 255, 0.012) 4px 5px
  );
  content: "";
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

.skip-link {
  position: fixed;
  z-index: 30;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 700;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-shell {
  width: min(100%, calc(var(--content-width) + 64px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 32px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 700;
  transition: background 180ms ease, transform 180ms ease;
}

.brand:hover .brand-mark {
  background: var(--accent-bright);
  transform: translateY(-2px);
}

.brand-name strong,
.brand-name small {
  display: block;
}

.brand-name strong {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.brand-name small {
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.04em;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 28px;
  color: var(--muted);
  font-size: 12px;
}

.topnav > a {
  position: relative;
  padding: 10px 0;
  transition: color 160ms ease;
}

.topnav > a::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: var(--accent);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.topnav > a:hover {
  color: var(--text);
}

.topnav > a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.local-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 28px;
  border-left: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.local-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #86cd78;
  box-shadow: 0 0 0 4px rgba(134, 205, 120, 0.09), 0 0 10px rgba(134, 205, 120, 0.52);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(300px, 0.62fr);
  align-items: end;
  gap: clamp(56px, 9vw, 130px);
  padding: clamp(72px, 8vw, 104px) 0 clamp(82px, 9vw, 116px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.eyebrow span {
  width: 22px;
  height: 2px;
  background: var(--accent);
}

.hero h1 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(42px, 5.2vw, 66px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.16;
}

.hero h1 em {
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
}

.hero-description {
  max-width: 540px;
  margin: 24px 0 0;
  color: #a7acb8;
  font-size: 14px;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 30px;
}

.primary-button,
.launch-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.primary-button {
  min-width: 150px;
  padding: 14px 16px;
}

.primary-button span,
.launch-button span {
  font-family: var(--mono);
  font-size: 16px;
}

.primary-button:hover,
.launch-button:hover {
  background: var(--accent-bright);
  box-shadow: 0 10px 30px rgba(157, 167, 255, 0.15);
  transform: translateY(-2px);
}

.library-summary {
  min-height: 270px;
  padding: 28px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.summary-count {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.summary-count strong {
  color: var(--text);
  font-family: var(--mono);
  font-size: 58px;
  letter-spacing: -0.08em;
  line-height: 1;
}

.summary-count span {
  color: var(--muted);
  font-size: 12px;
}

.summary-list {
  margin: 16px 0 0;
}

.summary-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.summary-list dt,
.summary-list dd {
  font-size: 11px;
}

.summary-list dt {
  color: var(--quiet);
}

.summary-list dd {
  margin: 0;
  color: var(--muted);
}

.game-meta li {
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.07em;
}

.catalog {
  padding-bottom: 116px;
  scroll-margin-top: 32px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.section-heading p {
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(27px, 3vw, 38px);
  letter-spacing: -0.045em;
}

.game-count {
  color: var(--muted);
  font-size: 11px;
}

.game-grid {
  display: grid;
  gap: 30px;
}

.game-card {
  --game-accent: var(--accent);
  --game-accent-soft: rgba(157, 167, 255, 0.5);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr);
  min-height: 475px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.backrooms-card {
  --game-accent: #d7c95d;
}

.abyss-card {
  --game-accent: #73ddd5;
}

.neon-card {
  --game-accent: #a889ff;
  --game-accent-soft: rgba(168, 137, 255, 0.55);
}

.sand-card {
  --game-accent: #efbb62;
  --game-accent-soft: rgba(239, 187, 98, 0.55);
}

.sand-cover {
  background: #17100a;
}

.sand-cover::after {
  background:
    linear-gradient(180deg, rgba(9, 8, 6, 0.02) 32%, rgba(8, 6, 4, 0.84) 100%),
    radial-gradient(circle at 50% 47%, transparent 17%, rgba(5, 4, 3, 0.64) 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.13) 3px 4px);
}

.sand-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 26% 24%, rgba(255, 233, 190, 0.13), transparent 23%),
    radial-gradient(circle at 61% 48%, rgba(112, 218, 210, 0.1), transparent 19%),
    linear-gradient(180deg, #20201d 0%, #4b3020 49%, #160f09 100%);
  transition: filter 300ms ease, transform 1s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.game-card:hover .sand-scene {
  filter: brightness(1.12) saturate(1.08);
  transform: scale(1.035);
}

.sand-moon {
  position: absolute;
  top: 8%;
  left: 16%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff2cf, #c9c0a5 57%, #665f54 73%, transparent 74%);
  box-shadow: 0 0 55px rgba(255, 229, 181, 0.15);
  opacity: 0.82;
}

.sand-ring {
  position: absolute;
  z-index: 1;
  top: 14%;
  left: 51%;
  width: 31%;
  aspect-ratio: 1;
  border: 22px solid #1d1710;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px rgba(139, 232, 226, 0.25),
    0 0 0 3px rgba(5, 4, 3, 0.72),
    0 28px 45px rgba(0, 0, 0, 0.42);
  transform: rotate(-9deg);
}

.sand-ring::before {
  position: absolute;
  inset: 17%;
  border: 2px dashed rgba(139, 232, 226, 0.48);
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(139, 232, 226, 0.17);
  content: "";
}

.sand-dune {
  position: absolute;
  right: -12%;
  bottom: -22%;
  left: -12%;
  height: 62%;
  border-radius: 50% 50% 0 0 / 45% 45% 0 0;
}

.dune-back {
  background: radial-gradient(ellipse at 57% 0, #a56937, #4b2f1c 42%, #1a110a 75%);
  transform: rotate(-4deg);
}

.dune-front {
  right: -22%;
  bottom: -34%;
  left: 14%;
  background: radial-gradient(ellipse at 33% 0, #664025, #24170e 55%, #0c0906);
  transform: rotate(7deg);
}

.sand-skiff {
  position: absolute;
  z-index: 2;
  bottom: 28%;
  left: 30%;
  width: 106px;
  height: 35px;
  border: 2px solid rgba(239, 187, 98, 0.64);
  background: linear-gradient(180deg, #403421, #110e0a);
  clip-path: polygon(0 61%, 14% 14%, 74% 0, 100% 43%, 80% 88%, 18% 100%);
  filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.48));
  transform: rotate(-7deg);
}

.sand-skiff::before {
  position: absolute;
  top: 10px;
  right: 20px;
  bottom: 9px;
  left: 29px;
  border-top: 2px solid #c79449;
  border-bottom: 2px solid #66502d;
  content: "";
}

.sand-skiff i,
.sand-skiff b {
  position: absolute;
  left: -60px;
  width: 67px;
  height: 6px;
  background: linear-gradient(90deg, transparent, rgba(139, 232, 226, 0.72));
  box-shadow: 0 0 14px rgba(139, 232, 226, 0.32);
}

.sand-skiff i { top: 10px; }
.sand-skiff b { top: 21px; opacity: 0.55; }

.sand-streaks {
  position: absolute;
  z-index: 2;
  inset: -18%;
  opacity: 0.35;
  background: repeating-linear-gradient(101deg, transparent 0 25px, rgba(255, 224, 164, 0.18) 26px 27px);
  transform: rotate(-2deg);
}

.ember-label i {
  background: #8be8e2;
  box-shadow: 0 0 9px #8be8e2;
}

.sand-title small { color: #a9ece6; }
.sand-title strong {
  color: #fff0d5;
  text-shadow: 0 0 24px rgba(239, 187, 98, 0.22);
}

.neon-cover {
  background: #080714;
}

.neon-cover::after {
  background:
    linear-gradient(180deg, rgba(4, 3, 11, 0.02) 34%, rgba(4, 3, 11, 0.83) 100%),
    radial-gradient(circle at 50% 48%, transparent 18%, rgba(3, 2, 9, 0.6) 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.13) 3px 4px);
}

.neon-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 53% 45%, rgba(125, 68, 205, 0.22), transparent 24%),
    radial-gradient(circle at 24% 22%, rgba(32, 158, 190, 0.12), transparent 29%),
    linear-gradient(180deg, #17102e 0%, #0c0b1a 46%, #05050b 100%);
  transition: filter 300ms ease, transform 1s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.game-card:hover .neon-scene {
  filter: brightness(1.13) saturate(1.14);
  transform: scale(1.035);
}

.neon-skyline {
  position: absolute;
  right: -4%;
  bottom: 31%;
  left: -4%;
  background-repeat: repeat-x;
}

.skyline-back {
  height: 44%;
  opacity: 0.6;
  background:
    linear-gradient(90deg, transparent 0 4%, rgba(83, 61, 122, 0.45) 4% 10%, transparent 10% 13%, rgba(59, 52, 95, 0.58) 13% 21%, transparent 21% 25%, rgba(74, 57, 113, 0.5) 25% 31%, transparent 31% 35%, rgba(50, 50, 82, 0.65) 35% 45%, transparent 45% 48%, rgba(69, 51, 111, 0.54) 48% 57%, transparent 57% 61%, rgba(49, 45, 82, 0.66) 61% 72%, transparent 72% 77%, rgba(85, 61, 120, 0.48) 77% 85%, transparent 85% 89%, rgba(49, 44, 76, 0.7) 89% 97%, transparent 97%),
    repeating-linear-gradient(90deg, rgba(94, 214, 236, 0.2) 0 2px, transparent 2px 29px);
  clip-path: polygon(0 48%, 6% 48%, 6% 24%, 14% 24%, 14% 41%, 20% 41%, 20% 8%, 28% 8%, 28% 34%, 35% 34%, 35% 18%, 44% 18%, 44% 43%, 52% 43%, 52% 4%, 61% 4%, 61% 29%, 70% 29%, 70% 13%, 78% 13%, 78% 39%, 86% 39%, 86% 21%, 94% 21%, 94% 46%, 100% 46%, 100% 100%, 0 100%);
}

.skyline-front {
  height: 36%;
  background:
    repeating-linear-gradient(90deg, rgba(90, 227, 255, 0.16) 0 3px, transparent 3px 31px),
    linear-gradient(90deg, #080812, #111024 45%, #07070f);
  box-shadow: 0 -5px 40px rgba(31, 19, 70, 0.55);
  clip-path: polygon(0 43%, 8% 43%, 8% 18%, 17% 18%, 17% 49%, 27% 49%, 27% 4%, 37% 4%, 37% 38%, 47% 38%, 47% 24%, 57% 24%, 57% 49%, 67% 49%, 67% 9%, 78% 9%, 78% 37%, 87% 37%, 87% 20%, 96% 20%, 96% 44%, 100% 44%, 100% 100%, 0 100%);
}

.neon-road {
  position: absolute;
  right: -16%;
  bottom: -18%;
  left: -16%;
  height: 62%;
  background:
    linear-gradient(90deg, rgba(87, 231, 255, 0.18), transparent 1.2% 98.8%, rgba(255, 79, 154, 0.2)),
    linear-gradient(180deg, #111022, #05050b 72%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 20px 45px rgba(77, 47, 136, 0.18);
}

.neon-road::before {
  position: absolute;
  top: 6%;
  right: 49.7%;
  width: 2px;
  height: 94%;
  background: repeating-linear-gradient(180deg, rgba(203, 255, 102, 0.7) 0 20px, transparent 20px 42px);
  box-shadow: 0 0 12px rgba(203, 255, 102, 0.35);
  content: "";
  transform: perspective(120px) rotateX(-12deg);
}

.neon-lane {
  position: absolute;
  bottom: -11%;
  width: 2px;
  height: 55%;
  background: linear-gradient(180deg, rgba(87, 231, 255, 0.18), #57e7ff);
  box-shadow: 0 0 15px currentColor;
  transform-origin: bottom;
}

.lane-left {
  left: 23%;
  color: #57e7ff;
  transform: rotate(24deg);
}

.lane-right {
  right: 23%;
  color: #ff4f9a;
  transform: rotate(-24deg);
}

.neon-bike {
  position: absolute;
  z-index: 2;
  left: 51%;
  bottom: 27%;
  width: 92px;
  height: 36px;
  border: 2px solid rgba(190, 166, 255, 0.8);
  background: linear-gradient(180deg, #242040, #0a0913);
  box-shadow: 0 0 28px rgba(168, 137, 255, 0.25);
  clip-path: polygon(100% 50%, 76% 5%, 26% 12%, 0 50%, 26% 88%, 76% 95%);
  transform: translateX(-50%) rotate(-5deg);
}

.neon-bike::before,
.neon-bike::after {
  position: absolute;
  top: 9px;
  width: 22px;
  height: 5px;
  content: "";
  box-shadow: 0 0 15px currentColor;
}

.neon-bike::before {
  right: 15px;
  background: #57e7ff;
  color: #57e7ff;
}

.neon-bike::after {
  right: 18px;
  top: 20px;
  background: #ff4f9a;
  color: #ff4f9a;
}

.neon-bike i,
.neon-bike b {
  position: absolute;
  left: -58px;
  width: 66px;
  height: 7px;
  background: linear-gradient(90deg, transparent, rgba(87, 231, 255, 0.55));
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.neon-bike i {
  top: 8px;
}

.neon-bike b {
  top: 21px;
  background: linear-gradient(90deg, transparent, rgba(255, 79, 154, 0.48));
}

.neon-rain {
  position: absolute;
  inset: -15%;
  opacity: 0.4;
  background: repeating-linear-gradient(104deg, transparent 0 17px, rgba(189, 205, 255, 0.16) 17px 18px, transparent 18px 35px);
  transform: rotate(-4deg);
}

.rain-right {
  opacity: 0.2;
  transform: translateX(21px) rotate(-4deg);
}

.neon-label i {
  background: #ff4f9a;
  box-shadow: 0 0 9px #ff4f9a;
}

.neon-title small {
  color: #8fefff;
}

.neon-title strong {
  color: #f4efff;
  text-shadow: 0 0 24px rgba(168, 137, 255, 0.25);
}

.abyss-cover {
  background: #03141c;
}

.abyss-cover::after {
  background:
    linear-gradient(180deg, rgba(2, 13, 19, 0.03) 38%, rgba(1, 7, 10, 0.84) 100%),
    radial-gradient(circle at 50% 45%, transparent 18%, rgba(0, 5, 8, 0.6) 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.12) 3px 4px);
}

.abyss-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(54, 163, 161, 0.18), transparent 24%),
    radial-gradient(circle at 65% 14%, rgba(55, 120, 151, 0.17), transparent 26%),
    linear-gradient(180deg, #061f2b 0%, #03202a 43%, #020b10 100%);
  transition: filter 300ms ease, transform 1s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.game-card:hover .abyss-scene {
  filter: brightness(1.12) saturate(1.08);
  transform: scale(1.035);
}

.abyss-beam {
  position: absolute;
  top: -12%;
  height: 120%;
  background: linear-gradient(180deg, rgba(121, 224, 217, 0.16), rgba(46, 145, 153, 0));
  filter: blur(2px);
  opacity: 0.75;
  transform: rotate(-10deg);
}

.beam-a {
  left: 15%;
  width: 16%;
}

.beam-b {
  right: 16%;
  width: 10%;
  opacity: 0.38;
  transform: rotate(8deg);
}

.abyss-ruin {
  position: absolute;
  bottom: -5%;
  height: 54%;
  width: 15%;
  background:
    repeating-linear-gradient(0deg, rgba(95, 156, 151, 0.12) 0 2px, transparent 2px 36px),
    linear-gradient(90deg, #031015, #0a2528 48%, #031015);
  border: 1px solid rgba(105, 184, 177, 0.15);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.58);
}

.abyss-ruin::before {
  position: absolute;
  top: -46px;
  left: -25%;
  width: 150%;
  height: 65px;
  border: 10px solid #071b20;
  border-bottom: 0;
  border-radius: 80px 80px 0 0;
  content: "";
}

.ruin-left {
  left: 6%;
  transform: rotate(-4deg);
}

.ruin-right {
  right: 5%;
  height: 66%;
  transform: rotate(5deg);
}

.abyss-ring {
  position: absolute;
  left: 50%;
  bottom: -19%;
  border: 9px solid rgba(55, 127, 124, 0.24);
  border-bottom-color: rgba(16, 55, 58, 0.55);
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(79, 195, 185, 0.08);
  transform: translateX(-50%);
}

.ring-outer {
  width: 44%;
  aspect-ratio: 1;
}

.ring-inner {
  bottom: -12%;
  width: 29%;
  aspect-ratio: 1;
  border-width: 5px;
}

.abyss-sub {
  position: absolute;
  z-index: 2;
  top: 34%;
  left: 48%;
  width: 96px;
  height: 37px;
  border: 2px solid rgba(136, 225, 217, 0.72);
  border-radius: 52% 61% 51% 55%;
  background: linear-gradient(180deg, #173b43, #081a20);
  box-shadow: 0 0 22px rgba(67, 192, 185, 0.16);
  transform: translate(-50%, -50%) rotate(-8deg);
}

.abyss-sub::before {
  position: absolute;
  top: -16px;
  left: 34px;
  width: 34px;
  height: 20px;
  border: 2px solid rgba(136, 225, 217, 0.65);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  background: #12313a;
  content: "";
}

.abyss-sub::after {
  position: absolute;
  top: 7px;
  right: -10px;
  width: 12px;
  height: 20px;
  background: #07171d;
  content: "";
}

.abyss-sub i {
  position: absolute;
  top: 8px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f0b55e;
  box-shadow:
    0 13px 0 #f0b55e,
    20px 6px 23px 12px rgba(240, 181, 94, 0.24);
}

.abyss-sub b {
  position: absolute;
  top: 8px;
  left: -31px;
  width: 34px;
  height: 20px;
  background: linear-gradient(90deg, rgba(75, 209, 203, 0), rgba(75, 209, 203, 0.35));
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.abyss-bubbles {
  position: absolute;
  width: 4px;
  height: 4px;
  border: 1px solid rgba(143, 232, 224, 0.5);
  border-radius: 50%;
  box-shadow:
    24px -31px 0 -1px rgba(143, 232, 224, 0.35),
    42px -66px 0 1px rgba(143, 232, 224, 0.26),
    8px -93px 0 0 rgba(143, 232, 224, 0.24),
    61px -119px 0 -1px rgba(143, 232, 224, 0.22);
}

.bubbles-a {
  left: 27%;
  bottom: 24%;
}

.bubbles-b {
  right: 24%;
  top: 57%;
  transform: scale(0.7);
}

.sonar-label i {
  background: #73ddd5;
  box-shadow: 0 0 9px #73ddd5;
}

.abyss-title small {
  color: #9fe3dc;
}

.abyss-title strong {
  color: #ecfffb;
}

.game-card:hover {
  border-color: var(--game-accent-soft);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.27);
  transform: translateY(-4px);
}

.game-cover {
  position: relative;
  display: block;
  min-height: 475px;
  overflow: hidden;
  background: #282512;
}

.game-cover::before {
  position: absolute;
  z-index: 4;
  inset: 13px;
  border: 1px solid rgba(255, 251, 224, 0.18);
  content: "";
  pointer-events: none;
}

.game-cover::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 3, 0.08) 42%, rgba(5, 5, 3, 0.72) 100%),
    radial-gradient(circle at 50% 46%, transparent 22%, rgba(5, 5, 3, 0.65) 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.15) 3px 4px);
  content: "";
  pointer-events: none;
}

.corridor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(48, 42, 16, 0.54), transparent 25% 75%, rgba(48, 42, 16, 0.54)),
    linear-gradient(#c9ba61 0 64%, #6d6539 64% 100%);
  transition: filter 300ms ease, transform 900ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.corridor::before,
.corridor::after {
  position: absolute;
  left: 50%;
  width: 180%;
  content: "";
  transform: translateX(-50%);
}

.corridor::before {
  top: 0;
  height: 43%;
  background:
    repeating-linear-gradient(90deg, rgba(78, 70, 28, 0.35) 0 2px, transparent 2px 110px),
    linear-gradient(#8c844d, #cfc56f);
  clip-path: polygon(0 0, 100% 0, 67% 100%, 33% 100%);
}

.corridor::after {
  bottom: 0;
  height: 38%;
  background:
    repeating-linear-gradient(90deg, rgba(40, 38, 19, 0.3) 0 2px, transparent 2px 130px),
    linear-gradient(#756e42, #38371f);
  clip-path: polygon(33% 0, 67% 0, 100% 100%, 0 100%);
}

.game-cover:hover .corridor,
.game-cover:focus-visible .corridor {
  filter: brightness(1.08) saturate(1.06);
  transform: scale(1.035);
}

.ceiling-light {
  position: absolute;
  z-index: 2;
  left: 50%;
  height: 3.4%;
  background: #f7f0bd;
  box-shadow: 0 0 24px 6px rgba(255, 247, 186, 0.42);
  transform: translateX(-50%);
}

.light-one {
  top: 8%;
  width: 27%;
}

.light-two {
  top: 25%;
  width: 13%;
}

.wall-line {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 2px;
  height: 65%;
  background: rgba(79, 69, 22, 0.75);
}

.line-one {
  left: 21%;
  transform: rotate(-5deg);
}

.line-two {
  right: 21%;
  transform: rotate(5deg);
}

.dark-door {
  position: absolute;
  z-index: 2;
  bottom: 36%;
  left: 50%;
  width: 8%;
  height: 22%;
  background: #11110a;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.65);
  transform: translateX(-50%);
}

.rec-label,
.level-label {
  position: absolute;
  z-index: 5;
  top: 28px;
  color: rgba(255, 255, 245, 0.88);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.13em;
}

.rec-label {
  left: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.rec-label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ec514c;
  box-shadow: 0 0 9px #ec514c;
}

.level-label {
  right: 30px;
}

.cover-title {
  position: absolute;
  z-index: 5;
  bottom: 30px;
  left: 31px;
  text-shadow: 0 3px 20px #000;
}

.cover-title small,
.cover-title strong {
  display: block;
}

.cover-title small {
  margin-bottom: 5px;
  color: #ded7a4;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.3em;
}

.cover-title strong {
  color: #fffbe3;
  font-family: "SimSun", "Songti SC", serif;
  font-size: clamp(38px, 4.2vw, 58px);
  letter-spacing: 0.18em;
}

.play-button {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid rgba(255, 251, 224, 0.6);
  border-radius: 50%;
  background: rgba(9, 9, 5, 0.72);
  backdrop-filter: blur(6px);
  transform: translate(-50%, -50%);
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.play-button i {
  margin-left: 4px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #fffbe3;
}

.game-cover:hover .play-button,
.game-cover:focus-visible .play-button {
  border-color: var(--game-accent);
  background: var(--game-accent);
  transform: translate(-50%, -50%) scale(1.08);
}

.game-cover:hover .play-button i,
.game-cover:focus-visible .play-button i {
  border-left-color: var(--accent-ink);
}

.game-info {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-left: 1px solid var(--line);
}

.game-number {
  margin-bottom: auto;
  color: var(--quiet);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.game-kicker {
  margin: 0 0 9px;
  color: var(--game-accent);
  font-size: 10px;
  letter-spacing: 0.05em;
}

.game-info h3 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.18;
}

.game-info h3 span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.game-description {
  margin: 20px 0 23px;
  color: #a2a7b2;
  font-size: 12px;
  line-height: 1.8;
}

.game-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 25px;
  padding: 0;
  list-style: none;
}

.game-meta li {
  padding: 6px 8px;
}

.launch-button {
  width: 100%;
  padding: 13px 14px;
}

.auto-cover {
  background:
    radial-gradient(circle at 72% 24%, var(--game-accent-soft), transparent 27%),
    linear-gradient(145deg, #20232e, #0d0f15 72%);
}

.auto-cover::after {
  background:
    linear-gradient(180deg, transparent 38%, rgba(5, 6, 10, 0.82) 100%),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(255, 255, 255, 0.025) 4px 5px);
}

.auto-cover-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: filter 300ms ease, transform 900ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.auto-cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.05);
  transition: filter 300ms ease, transform 900ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.auto-card:hover .auto-cover-image {
  filter: saturate(1.08) contrast(1.08) brightness(1.08);
  transform: scale(1.035);
}

.auto-cover-art::before {
  position: absolute;
  top: 17%;
  left: 16%;
  width: 48%;
  aspect-ratio: 1;
  border: 1px solid var(--game-accent);
  border-radius: 50%;
  box-shadow: 0 0 80px var(--game-accent-soft);
  content: "";
  opacity: 0.55;
}

.auto-cover-art span {
  position: absolute;
  top: 12%;
  right: 8%;
  width: 44%;
  height: 76%;
  border: 1px solid rgba(255, 255, 255, 0.11);
  transform: skewX(-15deg) rotate(8deg);
}

.auto-cover-art i,
.auto-cover-art b {
  position: absolute;
  display: block;
  height: 1px;
  background: var(--game-accent);
  box-shadow: 0 0 18px var(--game-accent-soft);
  content: "";
  transform-origin: left;
}

.auto-cover-art i {
  top: 31%;
  left: 8%;
  width: 84%;
  transform: rotate(17deg);
}

.auto-cover-art b {
  right: 6%;
  bottom: 24%;
  width: 58%;
  transform: rotate(-26deg);
}

.auto-card:hover .auto-cover-art {
  filter: brightness(1.12) saturate(1.1);
  transform: scale(1.035);
}

.auto-card .cover-title strong {
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.auto-card .cover-title small {
  color: var(--game-accent);
}

.auto-card--abyss .auto-cover {
  background: radial-gradient(circle at 52% 30%, #155269, transparent 36%), #03141c;
}

.auto-card--backrooms .auto-cover {
  background: radial-gradient(circle at 52% 30%, #786c35, transparent 36%), #1c1a0e;
}

.auto-card--neon .auto-cover {
  background: radial-gradient(circle at 52% 30%, #4b2777, transparent 36%), #090714;
}

.auto-card--sand .auto-cover {
  background: radial-gradient(circle at 52% 30%, #70401e, transparent 36%), #17100a;
}

.auto-card--riftblade .auto-cover {
  background: radial-gradient(circle at 48% 28%, #5f2a32, transparent 34%), #100b0e;
}

.auto-card--soul-ninja .auto-cover {
  background: radial-gradient(circle at 44% 26%, #a8441f, transparent 32%), radial-gradient(circle at 70% 36%, #174d7c, transparent 34%), #0b090d;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 23px 0 32px;
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.13em;
}

a:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 4px;
}

@media (max-width: 920px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .library-summary {
    width: min(100%, 520px);
  }

  .game-card {
    grid-template-columns: 1fr;
  }

  .game-cover {
    min-height: 430px;
  }

  .game-info {
    min-height: 340px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .game-number {
    margin-bottom: 56px;
  }

  .launch-button {
    width: min(100%, 320px);
  }
}

@media (max-width: 620px) {
  .site-shell {
    padding: 0 18px;
  }

  .topbar {
    min-height: 74px;
  }

  .topnav > a,
  .local-status {
    font-size: 0;
  }

  .local-status {
    gap: 0;
    padding-left: 18px;
  }

  .local-status i {
    width: 8px;
    height: 8px;
  }

  .hero {
    gap: 48px;
    padding: 58px 0 74px;
  }

  .hero h1 {
    font-size: clamp(38px, 11.5vw, 50px);
    line-height: 1.18;
  }

  .hero-description {
    margin-top: 24px;
    font-size: 13px;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    margin-top: 30px;
  }

  .primary-button {
    width: 100%;
  }

  .library-summary {
    min-height: 250px;
    padding: 22px;
  }

  .catalog {
    padding-bottom: 82px;
  }

  .game-count {
    display: none;
  }

  .game-card,
  .game-cover {
    min-height: 0;
  }

  .game-cover {
    aspect-ratio: 4 / 3;
  }

  .game-cover::before {
    inset: 9px;
  }

  .rec-label,
  .level-label {
    top: 22px;
  }

  .rec-label {
    left: 23px;
  }

  .level-label {
    right: 23px;
  }

  .cover-title {
    bottom: 23px;
    left: 24px;
  }

  .play-button {
    width: 54px;
    height: 54px;
  }

  .game-info {
    min-height: 0;
    padding: 24px 21px 22px;
  }

  .game-number {
    margin-bottom: 42px;
  }

  .launch-button {
    width: 100%;
  }

  footer {
    flex-direction: column;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}