@font-face {
  font-family: "Russo One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/russo-one.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/dmsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/dmsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}


:root {
  --void: hsl(276 42% 4%);
  --void-2: hsl(278 38% 7%);
  --ink: hsl(300 30% 96%);
  --ink-soft: hsl(290 14% 74%);
  --ink-dim: hsl(286 12% 56%);

  --sakura: hsl(341 100% 68%);
  --sakura-deep: hsl(341 86% 56%);
  --cyan: hsl(179 78% 55%);
  --cyan-deep: hsl(179 70% 44%);
  --violet: hsl(268 70% 62%);

  --glass: hsla(280 60% 16% / 0.42);
  --glass-2: hsla(286 54% 22% / 0.30);
  --glass-line: hsla(300 100% 92% / 0.16);
  --glass-line-strong: hsla(300 100% 92% / 0.32);

  --glow-sakura: 0 0 0 1px hsla(341 100% 68% / 0.35),
    0 18px 50px -18px hsla(341 100% 60% / 0.55);
  --glow-cyan: 0 0 0 1px hsla(179 78% 55% / 0.35),
    0 18px 50px -18px hsla(179 78% 50% / 0.5);

  --radius: 18px;
  --radius-sm: 12px;
  --wrap: 1280px;
  --blur: blur(16px) saturate(135%);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --pad-band: clamp(64px, 9vw, 132px);
}


*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--void);
  overflow-x: hidden;
  position: relative;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--cyan);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
a:hover {
  color: var(--sakura);
}
h1,
h2,
h3,
h4 {
  font-family: "Russo One", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.01em;
  margin: 0;
}
p {
  margin: 0 0 1.1em;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}


.gn-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(48vw 48vw at 14% 8%, hsla(341 100% 60% / 0.22), transparent 60%),
    radial-gradient(42vw 42vw at 88% 22%, hsla(179 78% 50% / 0.18), transparent 62%),
    radial-gradient(54vw 54vw at 70% 96%, hsla(268 70% 55% / 0.2), transparent 64%),
    var(--void);
}
.gn-aurora::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(30vw 30vw at 30% 60%, hsla(341 100% 65% / 0.14), transparent 60%),
    radial-gradient(26vw 26vw at 75% 40%, hsla(179 78% 55% / 0.12), transparent 60%);
  animation: drift 26s var(--ease) infinite alternate;
}
@keyframes drift {
  from {
    transform: translate3d(-3%, -2%, 0) scale(1);
  }
  to {
    transform: translate3d(4%, 3%, 0) scale(1.12);
  }
}
.gn-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: screen;
}


.gn-wrap {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 200;
  background: var(--sakura);
  color: #160712;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
}
.skip-link:focus {
  left: 16px;
}


.gn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 18px;
}
.gn-eyebrow::before {
  content: "◆";
  font-size: 0.72em;
  color: var(--sakura);
  text-shadow: 0 0 14px hsla(341 100% 68% / 0.9);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}


.gn-glass {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 24px 60px -30px hsla(276 80% 2% / 0.9);
}
.gn-glass::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  margin: 0 16px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--glass-line-strong),
    transparent
  );
}


.gn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  color: #18060f;
  background: linear-gradient(120deg, var(--sakura), var(--violet));
  box-shadow: var(--glow-sakura);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    filter 0.25s var(--ease);
}
.gn-btn:hover {
  color: #18060f;
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px hsla(341 100% 68% / 0.6),
    0 24px 60px -16px hsla(341 100% 60% / 0.7);
}
.gn-btn--ghost {
  color: var(--ink);
  background: hsla(286 54% 22% / 0.34);
  border: 1px solid var(--glass-line-strong);
  backdrop-filter: var(--blur);
  box-shadow: none;
}
.gn-btn--ghost:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan);
  filter: none;
}


.gn-head {
  position: sticky;
  top: 0;
  z-index: 90;
  background: hsla(276 46% 4% / 0.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid hsla(300 100% 92% / 0.08);
}
.gn-head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 74px;
}
.gn-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.gn-brand:hover {
  color: var(--ink);
}
.gn-brand img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 10px hsla(341 100% 68% / 0.55));
}
.gn-brand b {
  font-family: "Russo One", sans-serif;
  font-size: 1.14rem;
  letter-spacing: 0.04em;
  display: block;
  line-height: 1;
}
.gn-brand small {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan);
}
.gn-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.gn-nav a {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 9px 14px;
  border-radius: 10px;
  position: relative;
}
.gn-nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sakura), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.gn-nav a:hover,
.gn-nav a[aria-current="page"] {
  color: var(--ink);
}
.gn-nav a:hover::after,
.gn-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}
.gn-nav .gn-btn {
  margin-left: 10px;
  padding: 10px 20px;
}


.gn-burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--glass-line-strong);
  background: hsla(286 54% 22% / 0.34);
  backdrop-filter: var(--blur);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.gn-burger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.gn-burger span:nth-child(1) {
  top: 16px;
}
.gn-burger span:nth-child(2) {
  top: 22px;
}
.gn-burger span:nth-child(3) {
  top: 28px;
}
.gn-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.gn-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.gn-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}


.gn-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: hsla(276 50% 3% / 0.86);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  display: grid;
  place-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.gn-overlay[data-open="true"] {
  opacity: 1;
  visibility: visible;
}
.gn-overlay ul {
  display: grid;
  gap: 6px;
}
.gn-overlay li {
  opacity: 0;
  transform: translateY(18px);
}
.gn-overlay[data-open="true"] li {
  animation: rise 0.5s var(--ease) forwards;
}
.gn-overlay[data-open="true"] li:nth-child(1) { animation-delay: 0.06s; }
.gn-overlay[data-open="true"] li:nth-child(2) { animation-delay: 0.12s; }
.gn-overlay[data-open="true"] li:nth-child(3) { animation-delay: 0.18s; }
.gn-overlay[data-open="true"] li:nth-child(4) { animation-delay: 0.24s; }
.gn-overlay[data-open="true"] li:nth-child(5) { animation-delay: 0.3s; }
.gn-overlay[data-open="true"] li:nth-child(6) { animation-delay: 0.36s; }
.gn-overlay[data-open="true"] li:nth-child(7) { animation-delay: 0.42s; }
.gn-overlay[data-open="true"] li:nth-child(8) { animation-delay: 0.48s; }
@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.gn-overlay a {
  font-family: "Russo One", sans-serif;
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 8px 16px;
}
.gn-overlay a span {
  font-family: "DM Sans", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--sakura);
}
.gn-overlay a:hover {
  color: var(--cyan);
}
.gn-overlay__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--glass-line-strong);
  background: hsla(286 54% 22% / 0.4);
  color: var(--ink);
  font-size: 1.5rem;
  cursor: pointer;
}


.gn-hero {
  position: relative;
  padding: clamp(48px, 8vw, 92px) 0 clamp(56px, 8vw, 100px);
  overflow: hidden;
}
.gn-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.gn-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.gn-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      180deg,
      hsla(276 50% 4% / 0.55) 0%,
      hsla(276 50% 4% / 0.82) 55%,
      var(--void) 100%
    ),
    radial-gradient(60% 60% at 20% 30%, hsla(341 100% 55% / 0.25), transparent 70%);
}
.gn-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.gn-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--glass-line-strong);
  background: hsla(286 54% 22% / 0.3);
  backdrop-filter: var(--blur);
  margin-bottom: 22px;
}
.gn-hero__tag b {
  color: var(--sakura);
}
.gn-hero h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.6rem);
  margin-bottom: 22px;
}
.gn-hero h1 em {
  font-style: normal;
  background: linear-gradient(110deg, var(--sakura), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gn-hero__lead {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 54ch;
  margin-bottom: 30px;
}
.gn-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}


.gn-collage {
  position: relative;
  height: clamp(360px, 42vw, 520px);
}
.gn-collage__card {
  position: absolute;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--glass-line-strong);
  box-shadow: 0 30px 70px -28px hsla(276 90% 2% / 0.95);
}
.gn-collage__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gn-collage__card--a {
  width: 64%;
  height: 70%;
  top: 0;
  left: 4%;
  z-index: 3;
  transform: rotate(-4deg);
  animation: float1 7s var(--ease) infinite alternate;
  box-shadow: var(--glow-sakura), 0 30px 70px -28px hsla(276 90% 2% / 0.95);
}
.gn-collage__card--b {
  width: 52%;
  height: 56%;
  top: 30%;
  right: 0;
  z-index: 2;
  transform: rotate(5deg);
  animation: float2 8s var(--ease) infinite alternate;
}
.gn-collage__card--c {
  width: 44%;
  height: 46%;
  bottom: 0;
  left: 0;
  z-index: 4;
  transform: rotate(-7deg);
  box-shadow: var(--glow-cyan), 0 30px 70px -28px hsla(276 90% 2% / 0.95);
  animation: float3 6.4s var(--ease) infinite alternate;
}
.gn-collage__tag {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: linear-gradient(0deg, hsla(276 60% 3% / 0.92), transparent);
}
@keyframes float1 {
  to { transform: rotate(-4deg) translateY(-14px); }
}
@keyframes float2 {
  to { transform: rotate(5deg) translateY(12px); }
}
@keyframes float3 {
  to { transform: rotate(-7deg) translateY(-10px); }
}


.gn-runas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: clamp(40px, 6vw, 70px);
}
.gn-runa {
  padding: 22px 20px;
  text-align: center;
}
.gn-runa b {
  display: block;
  font-family: "Russo One", sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  background: linear-gradient(120deg, var(--sakura), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gn-runa span {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  text-transform: uppercase;
}


.gn-ticker {
  border-block: 1px solid hsla(300 100% 92% / 0.08);
  background: hsla(278 40% 6% / 0.6);
  overflow: hidden;
  padding: 14px 0;
  margin-top: clamp(48px, 7vw, 80px);
}
.gn-ticker__track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: ticker 32s linear infinite;
}
.gn-ticker span {
  font-family: "Russo One", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  white-space: nowrap;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.gn-ticker span b {
  color: var(--sakura);
}
.gn-ticker span::before {
  content: "◆";
  color: var(--cyan);
  font-size: 0.7em;
}
@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}


.gn-band {
  padding-block: var(--pad-band);
  position: relative;
}
.gn-band__head {
  max-width: 760px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.gn-band__head--center {
  margin-inline: auto;
  text-align: center;
}
.gn-band__head--center .gn-eyebrow {
  justify-content: center;
}
.gn-band h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin-bottom: 16px;
}
.gn-band h2 em {
  font-style: normal;
  color: var(--sakura);
  text-shadow: 0 0 30px hsla(341 100% 64% / 0.45);
}
.gn-band__sub {
  color: var(--ink-soft);
  font-size: 1.06rem;
  margin: 0;
}


.gn-shrine {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
}
.gn-card {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.gn-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--glow-cyan), 0 30px 60px -30px hsla(276 90% 2% / 0.95);
}
.gn-card__top {
  display: flex;
  gap: 16px;
  align-items: center;
}
.gn-card__icon {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  border: 1px solid var(--glass-line-strong);
  flex-shrink: 0;
  box-shadow: 0 10px 26px -10px hsla(341 100% 50% / 0.4);
}
.gn-card__name {
  font-size: 1.18rem;
  margin-bottom: 4px;
}
.gn-card__genre {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
  text-transform: uppercase;
}
.gn-card__rate {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: hsla(341 60% 30% / 0.18);
  border: 1px solid hsla(341 100% 68% / 0.22);
}
.gn-card__score {
  font-family: "Russo One", sans-serif;
  font-size: 1.3rem;
  color: var(--sakura);
}
.gn-card__stars {
  color: var(--sakura);
  letter-spacing: 2px;
  font-size: 0.95rem;
}
.gn-card__scale {
  margin-left: auto;
  font-size: 0.74rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gn-card__text {
  color: var(--ink-soft);
  font-size: 0.96rem;
  margin: 0;
  flex: 1;
}
.gn-card__verdict {
  font-size: 0.9rem;
  color: var(--cyan);
  font-weight: 600;
  margin: 0;
}
.gn-card__link {
  align-self: flex-start;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  display: inline-flex;
  gap: 6px;
  padding: 8px 0;
}
.gn-card__link:hover {
  color: var(--sakura);
}
.gn-tier {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: "Russo One", sans-serif;
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 999px;
  color: #18060f;
  background: linear-gradient(120deg, var(--cyan), var(--sakura));
}


.gn-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
}
.gn-feature__vis {
  position: relative;
  min-height: 360px;
}
.gn-feature__vis img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gn-feature__vis::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 40%, var(--glass) 100%),
    radial-gradient(70% 70% at 30% 30%, hsla(341 100% 55% / 0.25), transparent);
}
.gn-feature__body {
  padding: clamp(28px, 4vw, 50px);
}
.gn-feature__badge {
  display: inline-block;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #18060f;
  background: linear-gradient(120deg, var(--sakura), var(--violet));
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.gn-feature__body h3 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom: 10px;
}
.gn-feature__meta {
  color: var(--cyan);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.gn-feature__body p {
  color: var(--ink-soft);
}


.gn-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  counter-reset: step;
}
.gn-step {
  padding: 28px 24px;
  position: relative;
}
.gn-step__num {
  font-family: "Russo One", sans-serif;
  font-size: 2.4rem;
  background: linear-gradient(120deg, var(--cyan), var(--sakura));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-bottom: 10px;
}
.gn-step h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.gn-step p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
}


.gn-board-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
}
.gn-board {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.96rem;
}
.gn-board th,
.gn-board td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid hsla(300 100% 92% / 0.08);
}
.gn-board thead th {
  font-family: "DM Sans", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.gn-board tbody tr {
  transition: background 0.2s var(--ease);
}
.gn-board tbody tr:hover {
  background: hsla(341 60% 30% / 0.12);
}
.gn-board__rank {
  font-family: "Russo One", sans-serif;
  color: var(--sakura);
  font-size: 1.05rem;
}
.gn-board__name {
  font-weight: 700;
  color: var(--ink);
}
.gn-board__score {
  font-family: "Russo One", sans-serif;
  color: var(--cyan);
}


.gn-quote {
  position: relative;
  padding-block: clamp(70px, 10vw, 140px);
  overflow: hidden;
}
.gn-quote__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.gn-quote__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}
.gn-quote__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--void),
    hsla(276 50% 4% / 0.55) 50%,
    var(--void)
  );
}
.gn-quote__in {
  max-width: 880px;
  text-align: center;
  margin-inline: auto;
}
.gn-quote blockquote {
  font-family: "Russo One", sans-serif;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 20px;
}
.gn-quote blockquote em {
  font-style: normal;
  color: var(--sakura);
}
.gn-quote cite {
  font-style: normal;
  color: var(--cyan);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.85rem;
}


.gn-voices {
  columns: 3 300px;
  column-gap: 22px;
}
.gn-voice {
  break-inside: avoid;
  margin: 0 0 22px;
  padding: 22px;
}
.gn-voice p {
  color: var(--ink-soft);
  font-size: 0.97rem;
}
.gn-voice figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.gn-voice__sigil {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  font-family: "Russo One", sans-serif;
  font-size: 0.9rem;
  color: #18060f;
  background: linear-gradient(120deg, var(--sakura), var(--cyan));
  flex-shrink: 0;
}
.gn-voice__name {
  display: block;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.94rem;
}
.gn-voice__place {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-dim);
}
.gn-voice__game {
  margin-left: auto;
  font-size: 0.74rem;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


.gn-orac {
  display: grid;
  gap: 16px;
  max-width: 700px;
  margin-inline: auto;
}
.gn-orac details {
  padding: 4px 26px;
  overflow: hidden;
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease),
    background 0.35s var(--ease);
}
.gn-orac details[open] {
  border-color: hsla(341 100% 68% / 0.45);
  background: linear-gradient(
    160deg,
    hsla(341 60% 30% / 0.22),
    hsla(179 60% 30% / 0.12)
  ), var(--glass);
  box-shadow: var(--glow-sakura), 0 24px 60px -28px hsla(276 90% 2% / 0.95);
}
.gn-orac summary {
  list-style: none;
  cursor: pointer;
  font-family: "Russo One", sans-serif;
  font-size: 1.05rem;
  padding: 20px 46px 20px 0;
  position: relative;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}
.gn-orac summary:hover {
  color: var(--cyan);
}
.gn-orac details[open] summary {
  color: var(--sakura);
  text-shadow: 0 0 22px hsla(341 100% 64% / 0.45);
}
.gn-orac summary::-webkit-details-marker {
  display: none;
}

.gn-orac summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 13px;
  height: 13px;
  border-right: 2px solid var(--sakura);
  border-bottom: 2px solid var(--sakura);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.35s var(--ease),
    border-color 0.35s var(--ease), filter 0.35s var(--ease);
  filter: drop-shadow(0 0 6px hsla(341 100% 68% / 0.6));
}
.gn-orac summary:hover::after {
  border-color: var(--cyan);
  filter: drop-shadow(0 0 8px hsla(179 78% 55% / 0.8));
}
.gn-orac details[open] summary::after {
  transform: translateY(-35%) rotate(-135deg);
  border-color: var(--cyan);
  filter: drop-shadow(0 0 10px hsla(179 78% 55% / 0.9));
}
.gn-orac__ans {
  padding-bottom: 22px;
  color: var(--ink-soft);
}
.gn-orac__ans p {
  margin: 0;
}


.gn-summon {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 0;
  overflow: hidden;
}
.gn-summon__lore {
  padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(160deg, hsla(341 60% 30% / 0.22), hsla(268 60% 30% / 0.12));
  border-right: 1px solid var(--glass-line);
}
.gn-summon__lore h3 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 14px;
}
.gn-summon__lore p {
  color: var(--ink-soft);
}
.gn-perks {
  display: grid;
  gap: 12px;
  margin: 22px 0;
}
.gn-perks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.gn-perks li::before {
  content: "◆";
  color: var(--cyan);
  font-size: 0.85em;
  margin-top: 3px;
}
.gn-nap {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--glass-line);
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.8;
}
.gn-nap b {
  color: var(--ink);
  font-family: "Russo One", sans-serif;
  font-size: 0.98rem;
  display: block;
  margin-bottom: 4px;
}
.gn-summon__form {
  padding: clamp(28px, 4vw, 48px);
}
.gn-field {
  margin-bottom: 16px;
}
.gn-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 7px;
}
.gn-field input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-line-strong);
  background: hsla(276 40% 5% / 0.55);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.gn-field input::placeholder {
  color: hsla(290 12% 60% / 0.7);
}
.gn-field input:focus {
  outline: none;
  border-color: var(--sakura);
  box-shadow: 0 0 0 3px hsla(341 100% 68% / 0.18);
}
.gn-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 18px 0 22px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.gn-consent input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--sakura);
}
.gn-consent a {
  color: var(--cyan);
}
.gn-summon__form .gn-btn {
  width: 100%;
}
.gn-success {
  display: none;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: hsla(179 60% 30% / 0.2);
  border: 1px solid hsla(179 78% 55% / 0.4);
  color: var(--ink);
  font-weight: 600;
}
.gn-success.show {
  display: block;
  animation: rise 0.4s var(--ease);
}


.gn-about {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
.gn-about p {
  color: var(--ink-soft);
}
.gn-about__creed {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}
.gn-about__creed li {
  display: flex;
  gap: 12px;
  color: var(--ink-soft);
}
.gn-about__creed li::before {
  content: "◆";
  color: var(--sakura);
  font-size: 0.85em;
  margin-top: 4px;
}
.gn-about__vis {
  position: relative;
}
.gn-about__vis img {
  border-radius: var(--radius);
  border: 1px solid var(--glass-line-strong);
  box-shadow: var(--glow-sakura), 0 30px 70px -30px hsla(276 90% 2% / 0.95);
}
.gn-about__cap {
  display: block;
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
}


.gn-marquee {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  align-items: center;
}
.gn-marquee span {
  font-family: "Russo One", sans-serif;
  font-size: 0.95rem;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  opacity: 0.8;
}


.gn-foot {
  border-top: 1px solid hsla(300 100% 92% / 0.08);
  background: hsla(278 40% 5% / 0.7);
  padding-block: clamp(48px, 6vw, 72px) 28px;
  margin-top: clamp(40px, 6vw, 80px);
}
.gn-foot__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 36px;
  margin-bottom: 40px;
}
.gn-foot__blurb {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-top: 14px;
  max-width: 38ch;
}
.gn-foot h4 {
  font-family: "Russo One", sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 16px;
}
.gn-foot ul {
  display: grid;
  gap: 10px;
}
.gn-foot ul a {
  color: var(--ink-soft);
  font-size: 0.94rem;
}
.gn-foot ul a:hover {
  color: var(--sakura);
}
.gn-foot__nap {
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.9;
  margin: 0;
}
.gn-foot__nap b {
  color: var(--ink);
}
.gn-foot__bar {
  border-top: 1px solid hsla(300 100% 92% / 0.08);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  align-items: center;
}
.gn-foot__bar p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--ink-dim);
}
.gn-foot__disclaim {
  max-width: 60ch;
}


.gn-cookie {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 120;
  max-width: 640px;
  margin-inline: auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  transform: translateY(140%);
  transition: transform 0.45s var(--ease);
}
.gn-cookie[data-show="true"] {
  transform: translateY(0);
}
.gn-cookie p {
  margin: 0;
  flex: 1 1 280px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.gn-cookie__btns {
  display: flex;
  gap: 10px;
}
.gn-cookie__btns button {
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--glass-line-strong);
  background: transparent;
  color: var(--ink-soft);
}
.gn-cookie__acc {
  border-color: transparent !important;
  color: #18060f !important;
  background: linear-gradient(120deg, var(--sakura), var(--violet)) !important;
}


.gn-page-hero {
  padding: clamp(48px, 7vw, 92px) 0 clamp(30px, 4vw, 48px);
  position: relative;
  border-bottom: 1px solid hsla(300 100% 92% / 0.08);
}
.gn-page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: 14px;
}
.gn-page-hero p {
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0;
}
.gn-crumbs {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 18px;
}
.gn-crumbs a {
  color: var(--cyan);
}
.gn-prose {
  max-width: 820px;
  padding-block: clamp(40px, 6vw, 70px);
}
.gn-prose h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 44px 0 14px;
  color: var(--ink);
}
.gn-prose h2:first-child {
  margin-top: 0;
}
.gn-prose h3 {
  font-size: 1.15rem;
  margin: 28px 0 10px;
  color: var(--cyan);
}
.gn-prose p,
.gn-prose li {
  color: var(--ink-soft);
}
.gn-prose ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0 0 1.2em;
}
.gn-prose ul li {
  display: flex;
  gap: 12px;
}
.gn-prose ul li::before {
  content: "◆";
  color: var(--sakura);
  font-size: 0.8em;
  margin-top: 5px;
}
.gn-prose__updated {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--cyan);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--glass-line-strong);
  margin-bottom: 30px;
}
.gn-callout {
  padding: 22px 24px;
  margin: 28px 0;
  border-left: 3px solid var(--sakura);
}
.gn-callout p:last-child {
  margin-bottom: 0;
}


.gn-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.gn-contact__cards {
  display: grid;
  gap: 18px;
}
.gn-info {
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.gn-info__ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--sakura);
  background: hsla(341 60% 30% / 0.2);
  border: 1px solid hsla(341 100% 68% / 0.25);
}
.gn-info h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}
.gn-info p,
.gn-info a {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.gn-info a:hover {
  color: var(--sakura);
}


.gn-404 {
  min-height: 70vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 60px 20px;
}
.gn-404 .gn-glyph {
  font-family: "Russo One", sans-serif;
  font-size: clamp(5rem, 20vw, 12rem);
  line-height: 1;
  background: linear-gradient(120deg, var(--sakura), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.gn-404 h1 {
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  margin-bottom: 14px;
}
.gn-404 p {
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto 26px;
}


@media (max-width: 1080px) {
  .gn-foot__grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .gn-voices {
    columns: 2 280px;
  }
}
@media (max-width: 920px) {
  .gn-nav {
    display: none;
  }
  .gn-burger {
    display: block;
  }
  .gn-hero__grid {
    grid-template-columns: 1fr;
  }
  .gn-collage {
    height: clamp(320px, 70vw, 440px);
    max-width: 520px;
    margin-inline: auto;
    width: 100%;
  }
  .gn-feature,
  .gn-summon,
  .gn-about,
  .gn-contact {
    grid-template-columns: 1fr;
  }
  .gn-summon__lore {
    border-right: none;
    border-bottom: 1px solid var(--glass-line);
  }
  .gn-feature__vis {
    min-height: 260px;
  }
  .gn-about__vis {
    order: -1;
  }
}
@media (max-width: 680px) {
  body {
    font-size: 16px;
  }
  .gn-runas {
    grid-template-columns: 1fr 1fr;
  }
  .gn-voices {
    columns: 1;
  }
  .gn-foot__grid {
    grid-template-columns: 1fr;
  }
  .gn-foot__bar {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 400px) {
  .gn-wrap {
    width: min(100% - 28px, var(--wrap));
  }
  .gn-hero__cta {
    flex-direction: column;
  }
  .gn-hero__cta .gn-btn {
    width: 100%;
  }
}