:root {
  --bg-page: #0d0e12;
  --bg-surface: #17181d;
  --bg-surface-2: #1e2026;
  --bg-header: rgba(23,24,29,0.9);
  --border-subtle: rgba(255,255,255,0.07);
  --border-base: rgba(255,255,255,0.14);
  --text-primary: #e9eaed;
  --text-secondary: #a4a8b3;
  --text-tertiary: #74777f;
  --accent: #5aa9ff;
  --accent-hover: #82c0ff;
  --accent-soft: rgba(90,169,255,0.12);
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.25);
  --width-layout: 1200px;
  /* System stack only — no webfont is downloaded. The previous value pulled Noto Sans JP
     and Roboto from fonts.googleapis.com on every page load, which sent each visitor's IP
     to Google (a disclosure obligation) and shipped a large Japanese webfont to a site whose
     articles are in English. Every OS already ships a Japanese face, so the Japanese UI text
     still renders. */
  --font-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
               'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo',
               'Noto Sans JP', sans-serif;
}

:root[data-theme="light"] {
  --bg-page: #f5f6f8;
  --bg-surface: #ffffff;
  --bg-surface-2: #eef0f3;
  --bg-header: rgba(255,255,255,0.92);
  --border-subtle: rgba(0,0,0,0.08);
  --border-base: rgba(0,0,0,0.16);
  --text-primary: #1c1d21;
  --text-secondary: #55585f;
  --text-tertiary: #85888f;
  --accent: #0a6ed8;
  --accent-hover: #0857ab;
  --accent-soft: rgba(10,110,216,0.1);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.05);
}

/* Each dictionary (history / glossary) carries its own accent so it reads as a distinct
   sub-brand under the リンカルカ hub, Fandom/GameWith-style, rather than one flat site. */
body[data-section="history"] {
  --accent: #c9974a;
  --accent-hover: #ddb268;
  --accent-soft: rgba(201,151,74,0.14);
}
body[data-section="glossary"] {
  --accent: #d15fc4;
  --accent-hover: #e084d6;
  --accent-soft: rgba(209,95,196,0.14);
}
body[data-section="industry"] {
  --accent: #45b58c;
  --accent-hover: #63cba3;
  --accent-soft: rgba(69,181,140,0.14);
}
body[data-section="vtuber"] {
  --accent: #7b7cff;
  --accent-hover: #9a9bff;
  --accent-soft: rgba(123,124,255,0.14);
}
body[data-section="internet-history"] {
  --accent: #3fb6e6;
  --accent-hover: #63c8ef;
  --accent-soft: rgba(63,182,230,0.14);
}
body[data-section="space"] {
  --accent: #6c5ce7;
  --accent-hover: #8a7cf0;
  --accent-soft: rgba(108,92,231,0.14);
}
body[data-section="game"] {
  --accent: #d1453b;
  --accent-hover: #e0665c;
  --accent-soft: rgba(209,69,59,0.14);
}
body[data-section="mahjong"] {
  --accent: #2f9e5c;
  --accent-hover: #45bd76;
  --accent-soft: rgba(47,158,92,0.14);
}
:root[data-theme="light"] body[data-section="history"] {
  --accent: #9c6b1f;
  --accent-hover: #7d5518;
  --accent-soft: rgba(156,107,31,0.1);
}
:root[data-theme="light"] body[data-section="glossary"] {
  --accent: #a8258f;
  --accent-hover: #861d73;
  --accent-soft: rgba(168,37,143,0.1);
}
:root[data-theme="light"] body[data-section="industry"] {
  --accent: #2b8a68;
  --accent-hover: #206b51;
  --accent-soft: rgba(43,138,104,0.1);
}
:root[data-theme="light"] body[data-section="vtuber"] {
  --accent: #4e4fd6;
  --accent-hover: #3d3ead;
  --accent-soft: rgba(78,79,214,0.1);
}
:root[data-theme="light"] body[data-section="internet-history"] {
  --accent: #1a7fa8;
  --accent-hover: #146283;
  --accent-soft: rgba(26,127,168,0.1);
}
:root[data-theme="light"] body[data-section="space"] {
  --accent: #4d3fc4;
  --accent-hover: #3b2fa3;
  --accent-soft: rgba(77,63,196,0.1);
}
:root[data-theme="light"] body[data-section="game"] {
  --accent: #b3392f;
  --accent-hover: #932c23;
  --accent-soft: rgba(179,57,47,0.1);
}
:root[data-theme="light"] body[data-section="mahjong"] {
  --accent: #217a45;
  --accent-hover: #195f35;
  --accent-soft: rgba(33,122,69,0.1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.7;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

img { max-width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-header);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  max-width: var(--width-layout);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-primary);
  white-space: nowrap;
}
.site-logo:hover { color: var(--text-primary); text-decoration: none; }

/* On independent-dictionary pages, the hero box below already carries the sub-dictionary's
   own name as the visual lead (Fandom-style: the parent brand recedes once you're inside a
   specific wiki/dictionary). Only the hub homepage (no .Section) keeps the full-size wordmark.
   The badge this used to shrink into (a single Japanese character, "典") was removed
   2026-09-07 -- it had shown Japanese to readers of an English/Spanish site, the same defect
   c2cf39c fixed elsewhere, just never caught here because it read as a logo, not as content. */
body[data-section] .site-logo { font-size: 0.85rem; color: var(--text-tertiary); }

.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--border-base); }
.random-entry {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.random-entry:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
/* Site-wide nav lives behind this toggle instead of a row of header links -- see the comment in
   partials/header.html. The button was a fixed bottom-left circle until 2026-09-18; on a phone it
   covered two lines of body text and followed them down the page. It is a header control now, cut
   to match .random-entry and .theme-toggle beside it. */
.menu-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.menu-toggle:hover { color: var(--accent); border-color: var(--accent); }
.menu-toggle svg { display: block; }
.menu-backdrop {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.2s ease;
}
.menu-backdrop.show { opacity: 1; }
.site-menu-panel {
  position: fixed; left: 0; bottom: 0; top: 0; z-index: 66;
  width: min(260px, 80vw);
  background: var(--bg-surface); border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 2px; padding: 16px 12px;
  transform: translateX(-100%); transition: transform 0.2s ease;
  overflow-y: auto;
}
.site-menu-panel.show { transform: translateX(0); }
.site-menu-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; padding: 4px 8px 12px; color: var(--text-primary);
}
.menu-close {
  background: none; border: none; color: var(--text-secondary); font-size: 1.4rem;
  line-height: 1; cursor: pointer; padding: 4px 8px;
}
.menu-close:hover { color: var(--text-primary); }
.site-menu-panel a {
  color: var(--text-secondary);
  padding: 10px 8px;
  border-radius: var(--radius-s);
  font-size: 0.95rem;
  font-weight: 500;
}
/* The random-entry control is a button (it picks a target at runtime) but belongs in the list
   as one more menu line, so it borrows the link styling rather than looking like a form. */
.site-menu-panel__action {
  color: var(--text-secondary);
  padding: 10px 8px;
  border-radius: var(--radius-s);
  font-size: 0.95rem;
  font-weight: 500;
  width: 100%; text-align: left; background: none; border: none; font: inherit; cursor: pointer;
}
.site-menu-panel a:hover { color: var(--text-primary); background: var(--bg-surface-2); text-decoration: none; }
.site-menu-panel__group-label {
  margin-top: 10px; padding: 0 8px;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary); font-weight: 700;
}
.site-menu-panel__sub { padding-left: 20px; }

.site-search {
  display: flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
  padding: 6px 12px;
  gap: 8px;
  min-width: 220px;
}
.site-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-base);
  font-size: 0.85rem;
  width: 100%;
}
.site-search svg { flex-shrink: 0; opacity: 0.6; }

/* ---------- Layout ---------- */
.page-wrap {
  max-width: var(--width-layout);
  margin: 0 auto;
  padding: 28px 20px 60px;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 32px;
  align-items: start;
}
.page-wrap--full { grid-template-columns: 1fr; }
.page-main { min-width: 0; }

/* ---------- Sidebar ---------- */
.sidebar { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 16px; }
.sidebar-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
  padding: 16px;
}
.sidebar-card h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin: 0 0 12px;
  font-weight: 700;
}
.sidebar-stats { display: flex; flex-direction: column; gap: 8px; }
.sidebar-stats__item { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-secondary); }
.sidebar-stats__item b { color: var(--text-primary); }

.sidebar-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sidebar-related-list a { display: block; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.4; }
.sidebar-related-list a:hover { color: var(--text-primary); }

.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.toc-list a {
  display: block; color: var(--text-secondary); font-size: 0.85rem; padding: 4px 0;
  border-left: 2px solid transparent; padding-left: 10px;
}
.toc-list a:hover { color: var(--accent); text-decoration: none; border-left-color: var(--accent); }

/* ---------- Hero (top page) ---------- */
.hero {
  background: linear-gradient(135deg, rgba(90,169,255,0.1), rgba(123,92,255,0.08));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-l);
  padding: 40px;
  margin-bottom: 32px;
}

/* Sub-dictionary top pages (history/glossary) — carries the section accent so each reads
   as its own independent dictionary under the リンカルカ hub, not a generic category page. */
.hero--sub {
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  border-color: var(--accent);
}
.hero--sub__eyebrow {
  display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 10px;
}
.hero h1 { margin: 0 0 8px; font-size: 1.8rem; }
.hero p { margin: 0; color: var(--text-secondary); }
.hero__stat { margin-top: 12px !important; font-size: 0.8rem; color: var(--text-tertiary) !important; }
.hero__stat b { color: var(--text-primary); }

/* Optional hand-drawn illustration accent in a dictionary's hero box. On narrow screens the
   box stacks vertically (image centered above the text) instead of hiding the image, so
   mobile readers still see it; the side-by-side layout only kicks in once there's room. */
.hero--with-image { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.hero--with-image .hero__text { flex: 1 1 auto; }
.hero__image { display: block; max-width: 140px; height: auto; border-radius: var(--radius-l); flex-shrink: 0; }
@media (min-width: 640px) {
  .hero--with-image { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
  .hero__image { max-width: 180px; }
}

/* えりぬき記事(featured article) spotlight — dashed border marks it as a curated pick,
   distinct from the plain-bordered article cards in the grid below. */
.featured-article {
  display: block; padding: 24px; margin-bottom: 32px;
  border: 2px dashed var(--accent); border-radius: var(--radius-l);
  background: var(--accent-soft);
}
.featured-article__eyebrow {
  display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 10px;
}
.featured-article h2 { margin: 0 0 10px; font-size: 1.3rem; color: var(--text-primary); }
.featured-article p { margin: 0 0 12px; color: var(--text-secondary); line-height: 1.7; }
.featured-article__link { font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.featured-article:hover { text-decoration: none; }
.featured-article:hover h2 { text-decoration: underline; }

.section-heading {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 36px 0 16px;
}
.section-heading h2 { font-size: 1.15rem; margin: 0; border-left: 4px solid var(--accent); padding-left: 10px; }
.section-heading a { font-size: 0.85rem; color: var(--text-secondary); }

.category-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 4px; }
.category-nav a {
  font-size: 0.85rem; color: var(--text-secondary);
  background: var(--accent-soft); border: 1px solid var(--border-base);
  border-radius: var(--radius-l); padding: 6px 14px;
}
.category-nav a:hover { color: var(--accent); text-decoration: none; border-color: var(--accent); }

.category-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.category-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill, 999px);
  padding: 8px 16px;
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 500;
}
.category-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* Hub cards linking to each independent dictionary — each carries its own accent
   (history=amber, glossary=pink; see body[data-section] rules) so the hub reads as a
   directory of separate sub-brands, not a flat list of categories. */
.dict-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 32px; }
.dict-card {
  display: block; padding: 20px; border-radius: var(--radius-l);
  border: 1px solid var(--border-subtle); background: var(--bg-surface);
  box-shadow: var(--shadow-card); transition: border-color 0.15s, transform 0.15s;
}
.dict-card[data-section="history"] { border-top: 3px solid #c9974a; }
.dict-card[data-section="glossary"] { border-top: 3px solid #d15fc4; }
.dict-card[data-section="industry"] { border-top: 3px solid #45b58c; }
.dict-card[data-section="vtuber"] { border-top: 3px solid #7b7cff; }
.dict-card[data-section="internet-history"] { border-top: 3px solid #3fb6e6; }
.dict-card[data-section="space"] { border-top: 3px solid #6c5ce7; }
.dict-card[data-section="game"] { border-top: 3px solid #d1453b; }
.dict-card[data-section="mahjong"] { border-top: 3px solid #2f9e5c; }
.dict-card:hover { transform: translateY(-2px); text-decoration: none; }
.dict-card[data-section="history"]:hover { border-color: #c9974a; }
.dict-card[data-section="glossary"]:hover { border-color: #d15fc4; }
.dict-card[data-section="industry"]:hover { border-color: #45b58c; }
.dict-card[data-section="vtuber"]:hover { border-color: #7b7cff; }
.dict-card[data-section="internet-history"]:hover { border-color: #3fb6e6; }
.dict-card[data-section="space"]:hover { border-color: #6c5ce7; }
.dict-card[data-section="game"]:hover { border-color: #d1453b; }
.dict-card[data-section="mahjong"]:hover { border-color: #2f9e5c; }
.dict-card h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--text-primary); }
.dict-card p { margin: 0 0 14px; font-size: 0.85rem; color: var(--text-secondary); }
.dict-card__count { font-size: 0.75rem; color: var(--text-tertiary); }
/* Games section: same card shape as the dictionaries, but visually set apart (dashed border,
   slightly dimmer background) so it doesn't read as a fourth dictionary -- the games are
   deliberately unrelated content living below the encyclopedia, not part of it. */
.games-sub { margin: -20px 0 16px; color: var(--text-tertiary); font-size: 0.85rem; }
.dict-grid--games .dict-card { border-style: dashed; background: var(--bg-surface-2); }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.article-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, transform 0.15s;
}
.article-card:hover { border-color: var(--border-base); transform: translateY(-2px); }
.article-card__cat {
  font-size: 0.7rem; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.article-card h3 { margin: 0; font-size: 1rem; color: var(--text-primary); line-height: 1.4; }
.article-card:hover h3 { color: var(--accent); }
.article-card p { margin: 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
.article-card__meta { font-size: 0.75rem; color: var(--text-tertiary); margin-top: auto; }

/* ---------- Article page ---------- */
.article-header { border-bottom: 1px solid var(--border-subtle); padding-bottom: 16px; margin-bottom: 24px; }
.article-header__cat { font-size: 0.8rem; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.article-header h1 { margin: 0 0 8px; font-size: 1.9rem; }
.article-header__meta { color: var(--text-tertiary); font-size: 0.85rem; }

/* 1行117文字あった(1440px幅で実測)。組版の標準は60〜75文字で、長すぎる行は目が
   次の行頭を見つけられず読み飛ばしを生む。本文だけを詰める —— 見出しやカード類は
   カラム幅いっぱいのままでよい。 */
.article-body { max-width: 68ch; }

.article-body h2 {
  font-size: 1.3rem; margin: 32px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.article-body h3 { font-size: 1.05rem; margin: 24px 0 10px; }
.article-body p { margin: 0 0 16px; color: var(--text-primary); }
.article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 24px; color: var(--text-primary); }
.article-body li { margin-bottom: 6px; }
.article-body blockquote {
  margin: 16px 0; padding: 12px 16px; border-left: 3px solid var(--accent);
  background: var(--bg-surface); color: var(--text-secondary); border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.article-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.9rem; }
.article-body th, .article-body td { border: 1px solid var(--border-subtle); padding: 8px 12px; text-align: left; }
.article-body th { background: var(--bg-surface-2); }
.article-body code { background: var(--bg-surface-2); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; }

.share-buttons { display: flex; align-items: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.share-buttons__label { font-size: 0.78rem; color: var(--text-secondary); }
.share-buttons__link {
  background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-s);
  padding: 4px 10px; font-size: 0.78rem; color: var(--text-secondary); text-decoration: none;
}
.share-buttons__link:hover { color: var(--accent); border-color: var(--accent); }

.category-badges { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.category-badge {
  background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-s);
  padding: 4px 10px; font-size: 0.78rem; color: var(--text-secondary);
}

/* ---------- Category / list page ---------- */
.category-header { margin-bottom: 24px; }
.category-header h1 { margin: 0 0 6px; font-size: 1.6rem; }
.category-header p { color: var(--text-secondary); margin: 0; }

/* ---------- Search page ---------- */
.search-box-full {
  display: flex; align-items: center; gap: 10px; background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-m); padding: 12px 16px; margin-bottom: 24px;
}
.search-box-full input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 1rem; font-family: var(--font-base); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  margin-top: 60px;
  padding: 28px 20px;
  color: var(--text-tertiary);
  font-size: 0.8rem;
}
.site-footer__inner { max-width: var(--width-layout); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.site-footer a { color: var(--text-secondary); }
.site-footer__langs { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; justify-content: center; }
.site-footer__lang--current { color: var(--text-primary); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .page-wrap { grid-template-columns: 1fr; }
  /* order:-1 が入っていたのは、トップページのサイドバーに「記事数」カードがあった頃の
     名残である。その後トップは page-wrap--full になりサイドバーを持たなくなったので、
     この規則は記事ページにしか効かず、しかも逆効果だった —— 検索から記事に直接来た
     読者が最初に見るのが、探していた本文ではなく目次と関連項目の一覧になっていた。
     本文に届くまで1画面半スクロールする。このサイトは検索流入だけに賭けているので、
     ここは content-first でなければならない。 */
  .sidebar { position: static; }
  /* --- ここから下は 375px を基準に実測して決めた。このサイトの読者は検索から
     携帯で記事に直接来るので、携帯が主で、デスクトップが従である。 --- */

  /* 本文 15px は携帯では小さい。iOS の既定本文は 16px。
     rem 指定の見出し・カード類は動かないので、上がるのは地の文だけ。 */
  body { font-size: 16px; }

  /* ★ iOS Safari は 16px 未満の入力欄にフォーカスするとページを勝手に拡大する。
     検索欄が 12.75px だったので、タップするたびに版面が飛んでいた。 */
  .site-search input { font-size: 16px; }

  /* The header row holds a logo, a menu button, a search field and two icon buttons. On a 375px
     phone that left the search input 24px wide -- too narrow to see what you had typed. So on
     phones the search collapses to its magnifier and expands over the row when tapped, which is
     the usual phone pattern and takes the width question out of the layout entirely.
     (Measured 2026-09-18, right after the menu button moved into the header.) */
  .site-search {
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    flex: 0 0 auto;
  }
  .site-search input {
    width: 0;
    padding: 0;
    border: none;
  }
  .site-search svg {
    width: 34px; height: 34px; padding: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-s);
    background: var(--bg-surface);
    box-sizing: border-box;
    opacity: 1;
    color: var(--text-secondary);
    cursor: pointer;
  }
  /* Open: the field takes the whole row and everything else steps aside. */
  .site-search.is-open {
    position: absolute; left: 12px; right: 12px; z-index: 5;
    padding: 6px 12px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    border-radius: var(--radius-m);
    flex: 1;
  }
  .site-search.is-open svg {
    width: 16px; height: 16px; padding: 0;
    border: none; background: none; opacity: 0.6;
  }
  .site-search.is-open input { width: 100%; }
  .site-header__inner { position: relative; }
  /* サイト名は残す。検索から直接来た読者が、ここが何のサイトかを知る唯一の手がかり
     になる(パロディ事典なので、名乗りは信用に効く)。 */
  .site-logo { font-size: 0.9rem; }

  /* タップ領域。指針は 44px 角で、実測すると20箇所が下回っていた。
     実際に押されるのは目次・関連項目・フッターの言語切替なので、そこを広げる。 */
  .sidebar-card li a,
  .sidebar-related-list a { display: block; padding: 11px 0; }
  .site-footer__lang,
  .site-footer__inner a { display: inline-block; padding: 10px 4px; }
  .site-menu-panel a { padding: 12px 8px; }
  .category-nav a { padding: 12px 14px; }
  .section-heading a { display: inline-block; padding: 10px 0; }

  /* 注目記事の抜粋は450字ある。デスクトップでは3行だが、携帯では517px=画面の64%を
     占めてしまい、その下のカテゴリ移動の帯が画面外(Y=992)に押し出されていた。
     携帯だけ4行に切る。全文は記事を開けば読める。 */
  .featured-article p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero { padding: 24px; }

  /* The homepage "article count" card is the only sidebar content most mobile visitors see
     above the fold — the full card chrome (border, box, uppercase label) reads as an
     oversized frame around one small number. Strip it down to a plain inline line here;
     the TOC/page-info cards on article pages keep their normal boxed styling. */
  .sidebar-card--compact { background: none; border: none; padding: 4px 0 12px; }
  .sidebar-card--compact h3 { display: none; }
  .sidebar-card--compact .sidebar-stats__item { justify-content: flex-start; gap: 6px; font-size: 0.8rem; }

  /* section-heading's h2 + trailing note/link fight for space side by side on narrow
     screens (e.g. the hub page's group descriptions), wrapping both mid-word. Stack them. */
  .section-heading { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- Game (Kaiten Typing) ---------- */
/* Uses the same tokens as everything else (--bg-surface, --accent, --radius-*) rather than a
   separate palette, so the game reads as this site's fourth dictionary, not a bolted-on widget. */
.game-frame {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-l);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-card);
}
.game-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.game-hud .stat { display: flex; flex-direction: column; align-items: center; min-width: 74px; }
.game-hud .stat .label {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary);
}
.game-hud .stat .value {
  font-size: 1.3rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums;
}
.game-holder {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-page);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.game-holder canvas { display: block; width: 100%; height: auto; }
.game-overlay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px; background: rgba(0,0,0,0.72); text-align: center; padding: 16px;
  overflow-y: auto;
}
.game-overlay.show { display: flex; }
.game-overlay h2 { margin: 0; font-size: 1.3rem; color: #fff; }
.game-overlay .score-big {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 2rem; font-weight: 700; color: var(--accent-hover); font-variant-numeric: tabular-nums;
}
.game-overlay p { margin: 0; color: #d7d8db; max-width: 340px; font-size: 0.82rem; line-height: 1.4; }
.game-overlay button {
  font-family: var(--font-base); font-weight: 700; font-size: 0.9rem;
  background: var(--accent); color: #fff; border: none; padding: 9px 20px;
  border-radius: 999px; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}
.game-overlay button:hover { background: var(--accent-hover); transform: translateY(-2px); }
.game-overlay button:focus-visible { outline: 3px solid var(--accent-hover); outline-offset: 3px; }
.game-course-pick-label { margin: 0; color: #d7d8db; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.game-course-list { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; flex-shrink: 0; }
.game-note { margin-top: 12px; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.6; }
.game-note kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg-surface); border: 1px solid var(--border-base); border-radius: 4px;
  padding: 1px 6px; color: var(--text-primary);
}

@media (max-width: 640px) {
  .game-hud .stat { min-width: 60px; }
  .game-hud .stat .value { font-size: 1.1rem; }
}