/* =========================================================
   GOOGLE FONTS IMPORT
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Noto+Serif+JP:wght@900&family=Roboto+Condensed:wght@400;700&family=Courier+Prime:wght@400;700&display=swap");

/* =========================================================
   DESIGN TOKENS
   ========================================================= */

:root {
  --bg: #020805;
  --bg-deep: #010402;
  --panel: rgba(3, 18, 11, 0.86);
  --panel-strong: rgba(4, 24, 14, 0.96);

  --green: #72ffb2;
  --green-bright: #9affc9;
  --green-dim: #2aa765;
  --green-dark: #124a30;

  --orange: #ff7a2d;
  --orange-bright: #ffad62;
  --orange-dark: #7d3216;

  --text: #9affc9;
  --text-muted: #68bc8e;

  --line: rgba(91, 255, 169, 0.38);
  --line-strong: rgba(91, 255, 169, 0.72);

  --glow-green:
    0 0 4px rgba(104, 255, 176, 0.5), 0 0 12px rgba(104, 255, 176, 0.16);

  --glow-orange:
    0 0 4px rgba(255, 122, 45, 0.65), 0 0 14px rgba(255, 122, 45, 0.2);

  --font-ja:
    "Noto Sans JP", "Hiragino Sans", "Noto Sans CJK JP", "Segoe UI", sans-serif;

  --font-ja-serif:
    "Noto Serif JP", "Hiragino Mincho ProN", "HGS創英角ﾎﾟｯﾌﾟ体", serif;

  --font-en:
    "Arial Narrow", "Roboto Condensed", "Courier Prime", "Courier New",
    "Impact", monospace;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg-deep);
  color-scheme: dark;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(
      circle at 52% 38%,
      rgba(53, 255, 145, 0.055),
      transparent 38%
    ),
    linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), var(--bg);
  font-family: var(--font-ja);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-shadow: 0 0 4px rgba(114, 255, 178, 0.2);
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover,
a:focus-visible {
  color: var(--green-bright);
  text-shadow: var(--glow-green);
}
button,
input {
  font: inherit;
}

body::before {
  content: "";
  position: fixed;
  z-index: 9998;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: screen;
  opacity: 0.65;
}

body::after {
  content: "";
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.22) 78%,
    rgba(0, 0, 0, 0.56) 100%
  );
}

h1 {
  font-family: var(--font-ja-serif);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 1.2;
  margin: 0;
  text-shadow:
    0 0 4px rgba(114, 255, 178, 0.3),
    0 0 8px rgba(114, 255, 178, 0.12);
}

h2 {
  font-family: var(--font-ja-serif);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1.3;
  margin: 0;
  text-shadow:
    0 0 4px rgba(114, 255, 178, 0.25),
    0 0 8px rgba(114, 255, 178, 0.1);
}

h3 {
  font-family: var(--font-ja-serif);
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1.3;
  margin: 0;
  text-shadow:
    0 0 3px rgba(114, 255, 178, 0.2),
    0 0 6px rgba(114, 255, 178, 0.08);
}

h4 {
  font-family: var(--font-ja-serif);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.4;
  margin: 0;
}

h5 {
  font-family: var(--font-ja-serif);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin: 0;
}

h6 {
  font-family: var(--font-ja-serif);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: -0.038em;
  margin: 0;
}

.ja {
  display: block;
}

.en {
  display: block;
  font-family: var(--font-en);
  font-size: 0.75em;
  font-weight: 700;
  font-stretch: condensed;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  opacity: 0.85;
  text-shadow:
    0 0 2px rgba(154, 255, 201, 0.4),
    0 0 6px rgba(154, 255, 201, 0.2);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.orange {
  color: var(--orange-bright);
  text-shadow: var(--glow-orange);
}
.small {
  font-size: 0.76rem;
}
.skip-link {
  position: absolute;
  left: -9999px;
}