/* =============================================================================
   RetroGame AI Lab のデザイン
   明るい版 = ドット方眼(PICO-8 の配色)/ 暗い版 = 星空ブラウン管(dArkOS の画面)
   表とバッジは 90年代攻略本 風。見出しはドットの日本語フォント DotGothic16。
   ============================================================================= */
@import url("https://fonts.googleapis.com/css2?family=DotGothic16&display=swap");

:root {
  --rg-dot: "DotGothic16", "MS Gothic", "Osaka-Mono", monospace;
  --rg-navy: #1d2b53;
  --rg-red: #ff004d;
  --rg-yellow: #ffec27;
  --rg-blue: #29adff;
}

/* ---------- 明るい版: ドット方眼 ---------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--rg-navy);
  --md-primary-fg-color--light: #2c3f73;
  --md-primary-fg-color--dark: #121c38;
  --md-primary-bg-color: #fff1e8;
  --md-accent-fg-color: var(--rg-red);
  --md-default-bg-color: #fff1e8;
  --md-default-fg-color: var(--rg-navy);
  --md-typeset-color: #1d2440;
  --md-typeset-a-color: #c8003c;
  --md-code-bg-color: #f6ece4;
  --rg-panel: #ffffff;
  --rg-grid: #eadbd0;
  --rg-frame: var(--rg-navy);
  --rg-tab-bg: var(--rg-red);
  --rg-th-bg: var(--rg-navy);
  --rg-th-fg: #fff1e8;
  --rg-row: #fff8f3;
  --rg-badge: var(--rg-blue);
}

/* ---------- 暗い版: 星空ブラウン管 ---------- */
[data-md-color-scheme="slate"] {
  --md-hue: 230;
  --md-primary-fg-color: #0b1230;
  --md-primary-fg-color--light: #141d47;
  --md-primary-fg-color--dark: #070c22;
  --md-primary-bg-color: #e8ecff;
  --md-accent-fg-color: var(--rg-blue);
  --md-default-bg-color: #0b1230;
  --md-default-fg-color: #e8ecff;
  --md-typeset-color: #d8ddf5;
  --md-typeset-a-color: #5cc3ff;
  --md-code-bg-color: #141d47;
  --rg-panel: #10183c;
  --rg-grid: transparent;
  --rg-frame: #2b3a85;
  --rg-tab-bg: #e8323c;
  --rg-th-bg: #141d47;
  --rg-th-fg: #5cc3ff;
  --rg-row: #0d1536;
  --rg-badge: #e8323c;
}

/* ---------- 背景 ---------- */
[data-md-color-scheme="default"] .md-main {
  background-image:
    linear-gradient(var(--rg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--rg-grid) 1px, transparent 1px);
  background-size: 16px 16px;
}
[data-md-color-scheme="slate"] body {
  background-color: #0b1230;
  background-image:
    radial-gradient(1px 1px at 12% 20%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 12%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 48%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 70%, #aab6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 38%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 82%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 7% 88%, #ffffff 50%, transparent 51%);
  background-attachment: fixed;
  background-size: 600px 600px;
}

/* 本文は無地のパネルに載せる(方眼や星が文字と重ならないように) */
.md-content__inner {
  background: var(--rg-panel);
  padding: 1rem 1.4rem 1.6rem;
  box-shadow: 0 -3px 0 0 var(--rg-frame), 0 3px 0 0 var(--rg-frame),
              -3px 0 0 0 var(--rg-frame), 3px 0 0 0 var(--rg-frame);
  margin: 1.4rem 0.8rem 2rem;
}
.md-content__inner::before { display: none; }

/* ---------- ヘッダーとタブ ---------- */
.md-header__title, .md-tabs__link, .md-nav__title {
  font-family: var(--rg-dot);
}
.md-header__button.md-logo img, .md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
  image-rendering: pixelated;
}
.md-tabs { background-color: var(--rg-tab-bg); }
.md-tabs__link { opacity: 1; font-size: 0.75rem; }
.md-tabs__item--active .md-tabs__link {
  background: var(--rg-yellow);
  color: var(--rg-navy);
  padding: 0 0.4em;
}
[data-md-color-scheme="slate"] .md-tabs__link { font-style: italic; }
[data-md-color-scheme="slate"] .md-header {
  border-bottom: 1px solid #26306a;
  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}
[data-md-color-scheme="slate"] .md-header__title {
  text-shadow: 0 0 6px rgba(41, 173, 255, .6);
}

/* ---------- 見出し ---------- */
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: var(--rg-dot);
  font-weight: 400;
  letter-spacing: .02em;
  text-wrap: balance;
}
.md-typeset h1 { color: var(--md-default-fg-color); }
[data-md-color-scheme="slate"] .md-typeset h1 { text-shadow: 2px 2px 0 #e8323c; }
.md-typeset h2 {
  display: flex;
  align-items: center;
  gap: .5em;
  padding-bottom: .2em;
  border-bottom: 2px dotted var(--rg-frame);
}
.md-typeset h2::before {
  content: "";
  flex: none;
  width: .55em;
  height: .55em;
  background: var(--md-accent-fg-color);
}

/* ---------- 表(攻略本風) ---------- */
.md-typeset table:not([class]) {
  font-size: 0.8rem;
  border: 2px solid var(--rg-frame);
  border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.md-typeset table:not([class]) th {
  background: var(--rg-th-bg);
  color: var(--rg-th-fg);
  font-family: var(--rg-dot);
  font-weight: 400;
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.6em 0.8em;
}
.md-typeset table:not([class]) tr:nth-child(even) td { background: var(--rg-row); }

/* ---------- 囲み(admonition)をドットの枠に ---------- */
.md-typeset .admonition, .md-typeset details {
  border-radius: 0;
  border-width: 0 0 0 4px;
  box-shadow: none;
}
.md-typeset .admonition-title, .md-typeset summary {
  font-family: var(--rg-dot);
  font-weight: 400;
}

/* ---------- バッジ: <span class="badge">確認済み</span> ---------- */
.md-typeset .badge {
  display: inline-block;
  font-family: var(--rg-dot);
  font-size: .75em;
  line-height: 1.6;
  padding: 0 .5em;
  color: #ffffff;
  background: var(--rg-badge);
}
.md-typeset .badge--warn { background: #ff7a00; }

/* ---------- YouTube の埋め込み: <div class="video"><iframe ...></iframe></div> ---------- */
.md-typeset .video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  margin: 1.2em 0;
  background: #000;
  box-shadow: 0 -3px 0 0 var(--rg-frame), 0 3px 0 0 var(--rg-frame),
              -3px 0 0 0 var(--rg-frame), 3px 0 0 0 var(--rg-frame);
}
.md-typeset .video iframe,
.md-typeset .video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- ドット拡大の画像: ![説明](img.png){ .dot } ---------- */
.md-typeset img.dot { image-rendering: pixelated; }

/* ---------- 広告の枠: <div class="ad-slot">(広告コード)</div> ---------- */
/* ステマ規制に合わせて「広告」と表示する。中身が空のときは出さない */
.md-typeset .ad-slot {
  margin: 1.6em 0;
  padding: .4em;
  border: 1px dashed var(--rg-frame);
  text-align: center;
}
.md-typeset .ad-slot::before {
  content: "広告";
  display: block;
  font-family: var(--rg-dot);
  font-size: .65rem;
  opacity: .7;
  margin-bottom: .3em;
}
.md-typeset .ad-slot:empty { display: none; }

@media screen and (max-width: 44.984375em) {
  .md-content__inner { margin: 1rem 0.4rem 1.6rem; padding: 0.8rem 1rem 1.2rem; }
}