/* ============================================
   Yoshioka Yutaka — base.css
   共通の色・文字・リンク。外部フォント不使用。
   ============================================ */
:root {
  --bg: #000;
  --bg2: #0b0b10;
  --panel: #111118;
  --line: #3a3a4a;
  --text: #d8d8d8;
  --dim: #8a8a96;
  --accent: #39ff88;   /* 蛍光グリーン */
  --accent2: #ff3b6b;  /* 警告の赤 */
  --link: #6ec6ff;
  --visited: #c79bff;
  --yellow: #ffe14a;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "MS PGothic", "ＭＳ Ｐゴシック", "Osaka", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.8;
}

a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: var(--yellow); }
a:focus-visible { outline: 2px dashed var(--yellow); outline-offset: 2px; }

img { max-width: 100%; height: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--yellow); color: #000; padding: 4px 8px; z-index: 1000;
}
.skip:focus { left: 8px; }

/* 外部リンクの印 */
a.ext::after { content: " ↗"; font-size: .85em; }

/* ---------- 読み込み中オーバーレイ（JSが付与） ---------- */
.loading {
  position: fixed; inset: 0; z-index: 999;
  background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: "Courier New", monospace; color: var(--accent);
  transition: opacity .35s ease;
}
.loading.is-done { opacity: 0; pointer-events: none; }
.loading__title { font-size: 14px; letter-spacing: .2em; margin-bottom: 10px; }
.loading__bar {
  width: min(280px, 80vw); height: 16px; border: 2px inset #555; background: #111;
  padding: 2px;
}
.loading__fill {
  height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, #1f6fff 0 10px, transparent 10px 12px);
  animation: load-fill 1.1s steps(18) forwards;
}
.loading__note { margin-top: 10px; font-size: 12px; color: var(--dim); }
@keyframes load-fill { to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}