/* ==============================
   Base
============================== */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  background: #05070d;
  color: #ffffff;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.site-shell {
  min-height: 100svh;
  overflow: hidden;
}

/* ==============================
   Hero Background
============================== */

.hero-bg {
  position: relative;
  min-height: 100svh;
  min-height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  isolation: isolate;
  background-image: url("images/hero-miami-neon.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/*
  背景画像が明るめなので、文字を読みやすくするために薄めの暗幕を重ねています。
  ロゴ周辺は黒く潰しすぎないよう、中央上部は控えめです。
*/
.hero-bg__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.46) 0%,
      rgba(0, 0, 0, 0.20) 44%,
      rgba(0, 0, 0, 0.52) 100%
    ),
    radial-gradient(
      circle at 50% 17%,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.34) 74%
    );
}

/* ネオン街らしい色のにじみ。背景画像自体は動かさず、軽いレイヤーだけ動かします。 */
.hero-bg__glow {
  position: absolute;
  z-index: 2;
  width: 46vw;
  height: 46vw;
  min-width: 420px;
  min-height: 420px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(54px);
  opacity: 0.22;
  mix-blend-mode: screen;
  animation: neonDrift 12s ease-in-out infinite alternate;
}

.hero-bg__glow--left {
  left: -14vw;
  top: 8vh;
  background: rgba(255, 0, 150, 0.58);
}

.hero-bg__glow--right {
  right: -16vw;
  top: 12vh;
  background: rgba(0, 225, 255, 0.48);
  animation-duration: 15s;
  animation-delay: -5s;
}

/* うっすら質感を足すだけのレイヤー。邪魔なら opacity を 0 にしてください。 */
.hero-bg__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.10) 0,
      rgba(255, 255, 255, 0.10) 1px,
      transparent 1px,
      transparent 5px
    );
  mix-blend-mode: soft-light;
}

body.is-loaded .hero-bg {
  animation: bgBreath 9s ease-in-out infinite alternate;
}

/* ==============================
   Neon Logo
============================== */

.hero-logo {
  position: relative;
  z-index: 5;
  width: min(1120px, 90vw);
  margin: 0 auto;
  padding-top: clamp(56px, 7.2vh, 94px);
  text-align: center;
  transform: perspective(900px) rotateX(0deg);
  pointer-events: none;
}

.hero-logo__main,
.hero-logo__sub {
  margin: 0;
}

.neon-title {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0.24em;
  row-gap: 0;
  font-family:
    "凸版文久見出しゴシック StdN",
    "Toppan Bunkyu Midashi Gothic StdN",
    "Toppan Bunkyu Midashi Gothic",
    Impact,
    "Arial Black",
    "Yu Gothic",
    sans-serif;
  font-size: clamp(2.25rem, 5.4vw, 5.15rem);
  line-height: 0.95;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: rgba(208, 255, 202, 0.12);
  -webkit-text-stroke: 2px rgba(79, 255, 73, 0.98);
  text-shadow:
    0 0 2px rgba(230, 255, 220, 1),
    0 0 7px rgba(61, 255, 66, 0.98),
    0 0 17px rgba(38, 255, 42, 0.95),
    0 0 32px rgba(0, 255, 36, 0.86),
    0 0 54px rgba(0, 210, 38, 0.58),
    0 0 78px rgba(0, 170, 34, 0.42),
    5px 5px 0 rgba(0, 0, 0, 0.54);
  transform: skewX(-7deg);
  filter: brightness(1.18) saturate(1.18);
  animation: mainNeonPulse 6.8s ease-in-out infinite, mainTubeFlicker 8.4s linear infinite;
}

.neon-title span {
  display: inline-block;
}

.neon-subtitle {
  display: inline-block;
  margin-top: clamp(12px, 1.8vh, 22px);
  font-family:
    "凸版文久見出しゴシック StdN",
    "Toppan Bunkyu Midashi Gothic StdN",
    "Toppan Bunkyu Midashi Gothic",
    Impact,
    "Arial Black",
    "Yu Gothic",
    sans-serif;
  font-size: clamp(1.28rem, 3.1vw, 2.92rem);
  line-height: 1;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.045em;
  color: rgba(255, 255, 178, 0.12);
  -webkit-text-stroke: 1.5px rgba(255, 253, 71, 0.98);
  text-shadow:
    0 0 2px rgba(255, 255, 225, 0.98),
    0 0 6px rgba(255, 250, 55, 0.98),
    0 0 14px rgba(255, 240, 20, 0.92),
    0 0 28px rgba(255, 225, 0, 0.74),
    0 0 46px rgba(255, 210, 0, 0.50),
    4px 4px 0 rgba(0, 0, 0, 0.54);
  transform: skewX(-7deg);
  filter: brightness(1.1) saturate(1.18);
  animation: subNeonPulse 7.4s ease-in-out infinite, subTubeFlicker 10.2s linear infinite;
}

/* 本物のネオンのような、ごく短い不規則なチラつき */
.neon-flicker--a {
  animation: smallFlicker 5.8s linear infinite;
}

.neon-flicker--b {
  animation: smallFlicker 7.6s linear infinite reverse;
}

/* ==============================
   Animations
============================== */

@keyframes neonDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.16;
  }

  100% {
    transform: translate3d(3vw, 2vh, 0) scale(1.08);
    opacity: 0.28;
  }
}

@keyframes bgBreath {
  0% {
    filter: saturate(1.02) brightness(0.98);
  }

  100% {
    filter: saturate(1.13) brightness(1.03);
  }
}

@keyframes mainNeonPulse {
  0%,
  100% {
    filter: brightness(1.12) saturate(1.12);
  }

  45% {
    filter: brightness(1.33) saturate(1.32);
  }

  49% {
    filter: brightness(0.82) saturate(0.9);
  }

  50% {
    filter: brightness(1.55) saturate(1.45);
  }

  52% {
    filter: brightness(1.05) saturate(1.08);
  }
}

@keyframes subNeonPulse {
  0%,
  100% {
    filter: brightness(1.08) saturate(1.08);
  }

  38% {
    filter: brightness(1.26) saturate(1.24);
  }

  40% {
    filter: brightness(0.78) saturate(0.82);
  }

  41% {
    filter: brightness(1.46) saturate(1.32);
  }

  43% {
    filter: brightness(1.02) saturate(1.02);
  }
}

@keyframes smallFlicker {
  0%,
  8%,
  10%,
  11%,
  14%,
  28%,
  29%,
  45%,
  46%,
  100% {
    opacity: 1;
  }

  9%,
  10.5%,
  28.4%,
  45.4% {
    opacity: 0.18;
  }

  9.5%,
  28.8%,
  45.8% {
    opacity: 0.62;
  }
}


@keyframes mainTubeFlicker {
  0%,
  5%,
  8%,
  11%,
  18%,
  52%,
  55%,
  74%,
  78%,
  100% {
    opacity: 1;
    text-shadow:
      0 0 2px rgba(230, 255, 220, 1),
      0 0 7px rgba(61, 255, 66, 0.98),
      0 0 17px rgba(38, 255, 42, 0.95),
      0 0 32px rgba(0, 255, 36, 0.86),
      0 0 54px rgba(0, 210, 38, 0.58),
      0 0 78px rgba(0, 170, 34, 0.42),
      5px 5px 0 rgba(0, 0, 0, 0.54);
  }

  6%,
  53.2%,
  75% {
    opacity: 0.34;
    text-shadow:
      0 0 1px rgba(170, 255, 160, 0.35),
      0 0 5px rgba(47, 255, 51, 0.28),
      5px 5px 0 rgba(0, 0, 0, 0.54);
  }

  6.6%,
  54%,
  76% {
    opacity: 0.92;
  }
}

@keyframes subTubeFlicker {
  0%,
  9%,
  13%,
  31%,
  35%,
  66%,
  69%,
  100% {
    opacity: 1;
    text-shadow:
      0 0 2px rgba(255, 255, 225, 0.98),
      0 0 6px rgba(255, 250, 55, 0.98),
      0 0 14px rgba(255, 240, 20, 0.92),
      0 0 28px rgba(255, 225, 0, 0.74),
      0 0 46px rgba(255, 210, 0, 0.50),
      4px 4px 0 rgba(0, 0, 0, 0.54);
  }

  11%,
  33%,
  67.4% {
    opacity: 0.38;
    text-shadow:
      0 0 1px rgba(255, 255, 210, 0.30),
      0 0 5px rgba(255, 245, 40, 0.22),
      4px 4px 0 rgba(0, 0, 0, 0.54);
  }

  11.7%,
  33.8%,
  68.2% {
    opacity: 0.88;
  }
}

/* ==============================
   Responsive
============================== */

@media (max-width: 1100px) {
  .hero-logo {
    width: min(960px, 92vw);
    padding-top: clamp(52px, 7vh, 82px);
  }

  .neon-title {
    font-size: clamp(2rem, 5.7vw, 4.4rem);
  }
}

@media (max-width: 900px) {
  .hero-bg {
    background-position: 48% center;
  }

  .hero-bg__shade {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.50) 0%,
        rgba(0, 0, 0, 0.24) 46%,
        rgba(0, 0, 0, 0.62) 100%
      );
  }

  .hero-logo {
    padding-top: 62px;
  }

  .neon-title {
    -webkit-text-stroke-width: 1.5px;
    letter-spacing: 0.025em;
  }

  .neon-subtitle {
    -webkit-text-stroke-width: 1.15px;
  }
}

@media (max-width: 560px) {
  .hero-bg {
    background-position: 43% center;
  }

  .hero-bg__glow {
    min-width: 300px;
    min-height: 300px;
    filter: blur(44px);
  }

  .hero-logo {
    width: 94vw;
    padding-top: 54px;
  }

  .neon-title {
    column-gap: 0.18em;
    font-size: clamp(2.05rem, 12vw, 3.55rem);
    -webkit-text-stroke-width: 1.2px;
    text-shadow:
      0 0 2px rgba(230, 255, 220, 1),
      0 0 6px rgba(61, 255, 66, 0.98),
      0 0 15px rgba(38, 255, 42, 0.86),
      0 0 28px rgba(0, 255, 36, 0.68),
      4px 4px 0 rgba(0, 0, 0, 0.54);
  }

  .neon-subtitle {
    margin-top: 10px;
    font-size: clamp(1.06rem, 7.3vw, 2.05rem);
    -webkit-text-stroke-width: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ==============================
   Neon Logo Flicker - Sync / 10s
   GTA Series Community と
   Discord Server by MADARA を同時にちらつかせる
============================== */

.neon-title,
.neon-subtitle {
  animation:
    neonSyncedGlow 5.2s ease-in-out infinite alternate,
    neonSyncedFlicker 10s linear infinite !important;
}

/* 個別文字のちらつきは無効化 */
.neon-title .flicker-fast,
.neon-title .neon-flicker-fast,
.neon-title .flicker-slow,
.neon-title .neon-flicker-slow {
  animation: none !important;
}

/* 通常時のゆるい発光 */
@keyframes neonSyncedGlow {
  0% {
    filter: brightness(0.96) saturate(1.05);
  }

  100% {
    filter: brightness(1.14) saturate(1.2);
  }
}

/* 約10秒に1回、両方同時に不規則ちらつき */
@keyframes neonSyncedFlicker {
  0%,
  68%,
  72%,
  76%,
  80%,
  84%,
  100% {
    opacity: 1;
  }

  /* ここから10秒周期の中で一瞬だけ不安定にする */
  69% {
    opacity: 0.12;
    text-shadow: none;
  }

  70% {
    opacity: 0.95;
  }

  71% {
    opacity: 0.18;
    text-shadow: none;
  }

  73% {
    opacity: 0.08;
    text-shadow: none;
  }

  74% {
    opacity: 0.72;
  }

  75% {
    opacity: 0.16;
    text-shadow: none;
  }

  77% {
    opacity: 1;
  }
}

/* ==============================
   Open Sign Image
============================== */

.open-sign-image {
  position: absolute;
  z-index: 6;
  top: clamp(110px, 12vh, 190px);
  right: clamp(26px, 3.6vw, 86px);
  width: clamp(170px, 18vw, 320px);
  pointer-events: none;
  transform-origin: 50% 12%;
  animation:
    openSignSway 7.2s ease-in-out infinite alternate,
    openSignImageFlicker 10s linear infinite;
  filter:
    drop-shadow(0 0 14px rgba(255, 60, 230, 0.20))
    drop-shadow(0 0 18px rgba(84, 255, 255, 0.18));
}

.open-sign-image img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes openSignSway {
  0% {
    transform: rotate(-10deg) translate3d(0, 0, 0);
  }

  100% {
    transform: rotate(-12.4deg) translate3d(0, 5px, 0);
  }
}

@keyframes openSignImageFlicker {
  0%,
  68%,
  72%,
  76%,
  80%,
  84%,
  100% {
    opacity: 1;
    filter:
      brightness(1)
      saturate(1)
      drop-shadow(0 0 14px rgba(255, 60, 230, 0.20))
      drop-shadow(0 0 18px rgba(84, 255, 255, 0.18));
  }

  69% {
    opacity: 0.22;
    filter:
      brightness(0.70)
      saturate(0.88)
      drop-shadow(0 0 5px rgba(255, 60, 230, 0.10))
      drop-shadow(0 0 7px rgba(84, 255, 255, 0.08));
  }

  70% {
    opacity: 0.96;
  }

  71% {
    opacity: 0.38;
    filter:
      brightness(0.82)
      saturate(0.92)
      drop-shadow(0 0 7px rgba(255, 60, 230, 0.12))
      drop-shadow(0 0 8px rgba(84, 255, 255, 0.10));
  }

  73% {
    opacity: 0.18;
    filter:
      brightness(0.64)
      saturate(0.82)
      drop-shadow(0 0 4px rgba(255, 60, 230, 0.08))
      drop-shadow(0 0 5px rgba(84, 255, 255, 0.06));
  }

  74% {
    opacity: 0.74;
  }

  75% {
    opacity: 0.28;
    filter:
      brightness(0.78)
      saturate(0.90)
      drop-shadow(0 0 5px rgba(255, 60, 230, 0.10))
      drop-shadow(0 0 6px rgba(84, 255, 255, 0.08));
  }

  77% {
    opacity: 1;
    filter:
      brightness(1)
      saturate(1)
      drop-shadow(0 0 14px rgba(255, 60, 230, 0.20))
      drop-shadow(0 0 18px rgba(84, 255, 255, 0.18));
  }
}

@media (max-width: 900px) {
  .open-sign-image {
    top: clamp(118px, 14vh, 178px);
    right: clamp(14px, 2.6vw, 34px);
    width: clamp(156px, 23vw, 250px);
  }
}

@media (max-width: 560px) {
  .open-sign-image {
    top: clamp(132px, 16vh, 184px);
    right: 10px;
    width: clamp(132px, 32vw, 188px);
  }
}

/* ==============================
   Navigation Buttons
============================== */

.site-nav {
  position: relative;
  z-index: 8;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  width: min(920px, calc(100% - 32px));
  margin: clamp(22px, 3.2vh, 40px) auto 0;
  pointer-events: auto;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(118px, 15vw, 188px);
  min-height: 48px;
  padding: 13px 24px 12px;
  border: 1px solid rgba(88, 255, 255, 0.82);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(15, 26, 40, 0.72),
      rgba(5, 9, 18, 0.84)
    );
  color: rgba(230, 255, 255, 0.96);
  font-family:
    "凸版文久見出しゴシック StdN",
    "Toppan Bunkyu Midashi Gothic StdN",
    "Toppan Bunkyu Midashi Gothic",
    Impact,
    "Arial Black",
    "Yu Gothic",
    sans-serif;
  font-size: clamp(0.92rem, 1.25vw, 1.12rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-decoration: none;
  text-shadow:
    0 0 5px rgba(84, 255, 255, 0.70),
    0 0 14px rgba(84, 255, 255, 0.32);
  box-shadow:
    inset 0 0 12px rgba(84, 255, 255, 0.16),
    0 0 13px rgba(84, 255, 255, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    text-shadow 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 74, 230, 0.92);
  background:
    linear-gradient(
      180deg,
      rgba(42, 18, 54, 0.76),
      rgba(8, 10, 24, 0.88)
    );
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.86),
    0 0 14px rgba(255, 74, 230, 0.78),
    0 0 28px rgba(84, 255, 255, 0.48);
  box-shadow:
    inset 0 0 14px rgba(255, 74, 230, 0.18),
    0 0 16px rgba(255, 74, 230, 0.28),
    0 0 28px rgba(84, 255, 255, 0.18),
    0 14px 32px rgba(0, 0, 0, 0.46);
  transform: translateY(-2px);
  outline: none;
}

.site-nav__link--active {
  border-color: rgba(88, 255, 144, 0.88);
  color: rgba(224, 255, 222, 0.98);
  text-shadow:
    0 0 5px rgba(96, 255, 108, 0.78),
    0 0 15px rgba(96, 255, 108, 0.38);
  box-shadow:
    inset 0 0 12px rgba(96, 255, 108, 0.16),
    0 0 14px rgba(96, 255, 108, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.42);
}

@media (max-width: 900px) {
  .site-nav {
    margin-top: clamp(18px, 2.8vh, 32px);
    gap: 10px;
  }

  .site-nav__link {
    min-width: clamp(104px, 24vw, 150px);
    min-height: 44px;
    padding: 12px 16px 11px;
    font-size: clamp(0.82rem, 2.2vw, 0.98rem);
    letter-spacing: 0.08em;
  }
}

@media (max-width: 560px) {
  .site-nav {
    flex-wrap: wrap;
    gap: 10px;
    width: min(390px, calc(100% - 28px));
    margin-top: 18px;
  }

  .site-nav__link {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
  }
}

/* ==============================
   Discord Join Button
============================== */

.discord-join {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(420px, calc(100% - 40px));
  min-height: clamp(72px, 8.2vh, 92px);
  margin: clamp(26px, 4vh, 48px) auto 0;
  border: 1px solid rgba(112, 120, 255, 0.58);
  border-radius: 20px;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  background:
    linear-gradient(
      180deg,
      rgba(34, 36, 48, 0.78),
      rgba(8, 9, 18, 0.90)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 28px rgba(114, 137, 218, 0.10),
    0 0 18px rgba(114, 137, 218, 0.20),
    0 0 42px rgba(98, 244, 255, 0.10),
    0 18px 44px rgba(0, 0, 0, 0.54);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  transform: translateZ(0);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

/* ボタン内側の質感 */
.discord-join::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 28% 26%,
      rgba(255, 255, 255, 0.11),
      rgba(255, 255, 255, 0.0) 32%
    ),
    linear-gradient(
      180deg,
      rgba(28, 30, 42, 0.94),
      rgba(8, 9, 18, 0.96)
    );
}

/*
  外周を回る光。
  top/leftで線を曲げる方式ではなく、回転するconic-gradientを内側パネルで隠して外周だけ見せます。
*/
.discord-join::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -58%;
  pointer-events: none;
  background:
    conic-gradient(
      from 0deg,
      rgba(126, 249, 255, 0) 0deg,
      rgba(126, 249, 255, 0) 238deg,
      rgba(126, 249, 255, 0.20) 258deg,
      rgba(126, 249, 255, 1) 286deg,
      rgba(183, 92, 255, 1) 306deg,
      rgba(126, 249, 255, 0.86) 326deg,
      rgba(126, 249, 255, 0.12) 344deg,
      rgba(126, 249, 255, 0) 360deg
    );
  animation: discordBorderSpin 3.6s linear infinite !important;
}

/* 表面を横切る光。見えていた横移動方式を維持。 */
.discord-join__shine {
  position: absolute !important;
  z-index: 999 !important;
  top: 8px !important;
  left: 0 !important;
  width: 190px !important;
  height: 48px !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      112deg,
      rgba(255, 214, 120, 0) 0%,
      rgba(255, 214, 120, 0.04) 14%,
      rgba(255, 220, 135, 0.18) 30%,
      rgba(255, 246, 205, 0.52) 48%,
      rgba(255, 218, 130, 0.28) 62%,
      rgba(255, 184, 70, 0.10) 78%,
      rgba(255, 184, 70, 0) 100%
    ) !important;
  opacity: 1 !important;
  transform: translateX(-230px) skewX(-18deg);
  animation: discordSurfaceLightSweep 5s ease-in-out infinite !important;
  mix-blend-mode: normal !important;
  box-shadow:
    0 0 8px rgba(255, 224, 145, 0.12),
    0 0 18px rgba(255, 194, 80, 0.06) !important;
}

.discord-join__content {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.discord-join__logo {
  display: block;
  width: clamp(210px, 24vw, 305px);
  max-height: 54px;
  height: auto;
  filter:
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.72))
    drop-shadow(0 0 16px rgba(114, 137, 218, 0.48));
}

.discord-join:hover,
.discord-join:focus-visible {
  transform: scale(1.045);
  border-color: rgba(154, 164, 255, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 30px rgba(114, 137, 218, 0.16),
    0 0 24px rgba(114, 137, 218, 0.36),
    0 0 58px rgba(98, 244, 255, 0.18),
    0 22px 50px rgba(0, 0, 0, 0.58);
  filter: brightness(1.08) saturate(1.12);
  outline: none;
}

.discord-join:hover::before,
.discord-join:focus-visible::before {
  animation-duration: 2.7s !important;
}

.discord-join:hover .discord-join__shine,
.discord-join:focus-visible .discord-join__shine {
  animation-duration: 4.2s !important;
}

@keyframes discordBorderSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes discordSurfaceLightSweep {
  0%,
  48% {
    transform: translateX(-230px) skewX(-18deg);
  }

  64% {
    transform: translateX(460px) skewX(-18deg);
  }

  100% {
    transform: translateX(460px) skewX(-18deg);
  }
}

@media (max-width: 900px) {
  .discord-join {
    width: min(360px, calc(100% - 36px));
    min-height: 68px;
    margin-top: clamp(22px, 3.2vh, 36px);
  }

  .discord-join__logo {
    width: clamp(190px, 42vw, 260px);
    max-height: 48px;
  }
}

@media (max-width: 560px) {
  .discord-join {
    width: min(320px, calc(100% - 32px));
    min-height: 62px;
    margin-top: 20px;
    border-radius: 16px;
  }

  .discord-join::after {
    border-radius: 14px;
  }

  .discord-join::before {
    inset: -64%;
  }

  .discord-join__logo {
    width: clamp(170px, 62vw, 230px);
    max-height: 42px;
  }
}

/* ==============================
   Discord Server Status
============================== */

.server-status {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: fit-content;
  min-height: 34px;
  margin: clamp(18px, 2.8vh, 30px) auto 0;
  padding: 8px 18px 7px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(18, 20, 28, 0.76),
      rgba(5, 6, 12, 0.86)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 16px rgba(114, 137, 218, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.server-status__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(238, 238, 246, 0.92);
  font-family:
    "凸版文久見出しゴシック StdN",
    "Toppan Bunkyu Midashi Gothic StdN",
    "Toppan Bunkyu Midashi Gothic",
    "Arial Black",
    "Yu Gothic",
    sans-serif;
  font-size: clamp(0.72rem, 0.9vw, 0.88rem);
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 1;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.20),
    0 0 14px rgba(114, 137, 218, 0.16);
}

.server-status__item--online {
  color: rgba(232, 255, 236, 0.96);
}

.server-status__dot {
  position: relative;
  width: 9px;
  height: 9px;
  margin-right: 2px;
  border-radius: 50%;
  background: #18d66b;
  box-shadow:
    0 0 5px rgba(24, 214, 107, 1),
    0 0 12px rgba(24, 214, 107, 0.72),
    0 0 22px rgba(24, 214, 107, 0.32);
  animation: serverStatusDotGlow 1.8s ease-in-out infinite;
}

.server-status__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(24, 214, 107, 0.16);
  box-shadow:
    0 0 12px rgba(24, 214, 107, 0.42),
    0 0 24px rgba(24, 214, 107, 0.18);
  transform: scale(0.72);
  opacity: 0.25;
  animation: serverStatusDotRing 1.8s ease-in-out infinite;
}

.server-status__value {
  color: rgba(255, 255, 255, 0.98);
}

.server-status__label {
  color: rgba(210, 211, 224, 0.86);
}

.server-status__divider {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(130, 132, 150, 0.58);
  box-shadow: 0 0 8px rgba(130, 132, 150, 0.20);
}

@keyframes serverStatusDotGlow {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(0.95);
    box-shadow:
      0 0 5px rgba(24, 214, 107, 0.86),
      0 0 12px rgba(24, 214, 107, 0.54),
      0 0 22px rgba(24, 214, 107, 0.24);
  }

  50% {
    transform: scale(1.22);
    filter: brightness(1.28);
    box-shadow:
      0 0 7px rgba(24, 214, 107, 1),
      0 0 18px rgba(24, 214, 107, 0.86),
      0 0 34px rgba(24, 214, 107, 0.42);
  }
}

@keyframes serverStatusDotRing {
  0%,
  100% {
    transform: scale(0.68);
    opacity: 0.16;
  }

  50% {
    transform: scale(1.25);
    opacity: 0.56;
  }
}

@media (max-width: 560px) {
  .server-status {
    gap: 10px;
    padding: 8px 14px 7px;
    margin-top: 16px;
  }

  .server-status__item {
    font-size: 0.72rem;
    letter-spacing: 0.025em;
  }

  .server-status__dot {
    width: 8px;
    height: 8px;
  }
}

/* ==============================
   Server Status Dot - Final Adjust
   発光範囲を少し小さく、速度を少しだけ遅く
============================== */

.server-status__dot {
  width: 10px !important;
  height: 10px !important;
  background: #19ff78 !important;
  box-shadow:
    0 0 5px rgba(25, 255, 120, 1),
    0 0 12px rgba(25, 255, 120, 0.76),
    0 0 23px rgba(25, 255, 120, 0.36) !important;
  animation: serverStatusDotGlowFinal 1.55s ease-in-out infinite !important;
}

.server-status__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(25, 255, 120, 0.18);
  box-shadow:
    0 0 13px rgba(25, 255, 120, 0.48),
    0 0 26px rgba(25, 255, 120, 0.22);
  animation: serverStatusDotRingFinal 1.55s ease-in-out infinite !important;
}

@keyframes serverStatusDotGlowFinal {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(0.92);
  }

  50% {
    transform: scale(1.28);
    filter: brightness(1.45);
  }
}

@keyframes serverStatusDotRingFinal {
  0% {
    transform: scale(0.62);
    opacity: 0.14;
  }

  50% {
    transform: scale(1.28);
    opacity: 0.62;
  }

  100% {
    transform: scale(0.62);
    opacity: 0.14;
  }
}

/* ==============================
   Boost Members
============================== */

.boost-members {
  position: relative;
  z-index: 8;
  width: min(930px, calc(100% - 36px));
  margin: clamp(44px, 7vh, 74px) auto 0;
}

.boost-members__heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  margin: 0 auto clamp(22px, 3vh, 32px);
}

.boost-members__heading span {
  display: block;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(126, 249, 255, 0),
      rgba(183, 92, 255, 0.32),
      rgba(126, 249, 255, 0)
    );
  box-shadow:
    0 0 10px rgba(126, 249, 255, 0.10),
    0 0 20px rgba(183, 92, 255, 0.10);
}

.boost-members__heading h2 {
  margin: 0;
  color: rgba(196, 179, 255, 0.86);
  font-family:
    "凸版文久見出しゴシック StdN",
    "Toppan Bunkyu Midashi Gothic StdN",
    "Toppan Bunkyu Midashi Gothic",
    "Arial Black",
    "Yu Gothic",
    sans-serif;
  font-size: clamp(0.68rem, 0.88vw, 0.86rem);
  font-weight: 900;
  letter-spacing: 0.46em;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 0 8px rgba(183, 92, 255, 0.34),
    0 0 18px rgba(126, 249, 255, 0.14);
}

.boost-members__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 18px;
  justify-items: stretch;
}

.boost-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 70px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(18, 20, 28, 0.66),
      rgba(5, 6, 12, 0.78)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 16px rgba(114, 137, 218, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.boost-card__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(183, 92, 255, 0.50);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.96);
  font-family:
    "Arial Black",
    "Yu Gothic",
    sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.0) 30%
    ),
    linear-gradient(
      135deg,
      rgba(126, 249, 255, 0.44),
      rgba(183, 92, 255, 0.62),
      rgba(255, 74, 230, 0.42)
    );
  box-shadow:
    0 0 10px rgba(183, 92, 255, 0.34),
    0 0 18px rgba(126, 249, 255, 0.16);
}

.boost-card__body {
  min-width: 0;
}

.boost-card__name,
.boost-card__id {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family:
    "凸版文久見出しゴシック StdN",
    "Toppan Bunkyu Midashi Gothic StdN",
    "Toppan Bunkyu Midashi Gothic",
    "Arial Black",
    "Yu Gothic",
    sans-serif;
  line-height: 1.05;
}

.boost-card__name {
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(0.82rem, 1vw, 0.98rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.16),
    0 0 14px rgba(183, 92, 255, 0.16);
}

.boost-card__id {
  margin-top: 5px;
  color: rgba(183, 150, 255, 0.78);
  font-size: clamp(0.62rem, 0.78vw, 0.76rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow:
    0 0 8px rgba(183, 92, 255, 0.20);
}

@media (max-width: 900px) {
  .boost-members {
    width: min(720px, calc(100% - 34px));
    margin-top: clamp(36px, 5.6vh, 56px);
  }

  .boost-members__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .boost-members {
    width: min(360px, calc(100% - 28px));
    margin-top: 34px;
  }

  .boost-members__heading {
    gap: 14px;
  }

  .boost-members__heading h2 {
    font-size: 0.66rem;
    letter-spacing: 0.26em;
  }

  .boost-members__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .boost-card {
    min-height: 64px;
    padding: 10px 15px;
  }

  .boost-card__avatar {
    width: 40px;
    height: 40px;
  }
}

/* ==============================
   Boost Members - JSON Rendering
============================== */

.boost-members__loading,
.boost-members__empty,
.boost-members__error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 999px;
  color: rgba(210, 211, 224, 0.78);
  font-family:
    "凸版文久見出しゴシック StdN",
    "Toppan Bunkyu Midashi Gothic StdN",
    "Toppan Bunkyu Midashi Gothic",
    "Arial Black",
    "Yu Gothic",
    sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  background:
    linear-gradient(
      180deg,
      rgba(18, 20, 28, 0.56),
      rgba(5, 6, 12, 0.68)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 12px 28px rgba(0, 0, 0, 0.30);
}

.boost-members__error {
  color: rgba(255, 190, 190, 0.82);
}

.boost-card__avatar {
  overflow: hidden;
}

.boost-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.boost-card__avatar--fallback {
  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.0) 30%
    ),
    linear-gradient(
      135deg,
      rgba(126, 249, 255, 0.44),
      rgba(183, 92, 255, 0.62),
      rgba(255, 74, 230, 0.42)
    );
}

/* ==============================
   Server Profile
============================== */

.server-profile {
  position: relative;
  z-index: 8;
  width: min(820px, calc(100% - 36px));
  margin: clamp(22px, 3.4vh, 38px) auto 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(18px, 2.8vw, 30px);
  border: 1px solid rgba(126, 249, 255, 0.12);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(126, 249, 255, 0.075),
      rgba(126, 249, 255, 0.0) 48%
    ),
    linear-gradient(
      180deg,
      rgba(10, 13, 24, 0.54),
      rgba(5, 6, 14, 0.68)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 18px rgba(126, 249, 255, 0.06),
    0 0 32px rgba(183, 92, 255, 0.055),
    0 14px 34px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.server-profile::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(126, 249, 255, 0),
      rgba(126, 249, 255, 0.32),
      rgba(183, 92, 255, 0.28),
      rgba(126, 249, 255, 0)
    );
  opacity: 0.72;
}

.server-profile p {
  margin: 0;
  color: rgba(238, 242, 255, 0.86);
  font-family:
    "凸版文久見出しゴシック StdN",
    "Toppan Bunkyu Midashi Gothic StdN",
    "Toppan Bunkyu Midashi Gothic",
    "Yu Gothic",
    "Segoe UI",
    sans-serif;
  font-size: clamp(0.82rem, 1vw, 0.98rem);
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.82;
  text-align: center;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.10),
    0 0 16px rgba(126, 249, 255, 0.08);
}

@media (max-width: 900px) {
  .server-profile {
    width: min(720px, calc(100% - 34px));
    margin-top: clamp(18px, 3vh, 30px);
  }

  .server-profile p {
    font-size: 0.82rem;
    line-height: 1.78;
  }
}

@media (max-width: 560px) {
  .server-profile {
    width: min(360px, calc(100% - 28px));
    margin-top: 18px;
    padding: 13px 15px;
    border-radius: 18px;
  }

  .server-profile p {
    font-size: 0.76rem;
    line-height: 1.72;
    text-align: left;
    letter-spacing: 0.015em;
  }
}

/* ==============================
   Profile Section Heading
============================== */

.profile-section {
  position: relative;
  z-index: 8;
  width: min(930px, calc(100% - 36px));
  margin: clamp(44px, 7vh, 74px) auto 0;
}

.profile-section__heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  margin: 0 auto clamp(22px, 3vh, 32px);
}

.profile-section__heading span {
  display: block;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(126, 249, 255, 0),
      rgba(183, 92, 255, 0.32),
      rgba(126, 249, 255, 0)
    );
  box-shadow:
    0 0 10px rgba(126, 249, 255, 0.10),
    0 0 20px rgba(183, 92, 255, 0.10);
}

.profile-section__heading h2 {
  margin: 0;
  color: rgba(196, 179, 255, 0.86);
  font-family:
    "凸版文久見出しゴシック StdN",
    "Toppan Bunkyu Midashi Gothic StdN",
    "Toppan Bunkyu Midashi Gothic",
    "Arial Black",
    "Yu Gothic",
    sans-serif;
  font-size: clamp(0.68rem, 0.88vw, 0.86rem);
  font-weight: 900;
  letter-spacing: 0.46em;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 0 8px rgba(183, 92, 255, 0.34),
    0 0 18px rgba(126, 249, 255, 0.14);
}

.profile-section .server-profile {
  margin-top: 0;
}

@media (max-width: 900px) {
  .profile-section {
    width: min(720px, calc(100% - 34px));
    margin-top: clamp(36px, 5.6vh, 56px);
  }
}

@media (max-width: 560px) {
  .profile-section {
    width: min(360px, calc(100% - 28px));
    margin-top: 34px;
  }

  .profile-section__heading {
    gap: 14px;
  }

  .profile-section__heading h2 {
    font-size: 0.66rem;
    letter-spacing: 0.26em;
  }
}