/* =========================================================
   終夜観測 / AFTERGLOW
   読みやすさ優先版
   ========================================================= */

:root {
  --bg: #080a0f;
  --bg-soft: #0d1219;
  --panel: #111823;
  --panel-2: #151e2a;
  --text: #f3f6fa;
  --body: #d7dee8;
  --muted: #b7c0cc;
  --line: #334052;
  --accent: #c7e0ff;
  --content: 1120px;
  --radius: 10px;
  --shadow: 0 22px 60px rgba(0,0,0,.24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(199,224,255,.08), transparent 34rem),
    linear-gradient(180deg, #0a0d13 0%, var(--bg) 28rem);
  color: var(--text);
  font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button,input,select { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(199,224,255,.22); color: var(--text); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(8,10,15,.9);
  backdrop-filter: blur(14px);
}
.site-header__inner {
  width: min(calc(100% - 36px), var(--content));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .12em;
}
.site-title__symbol { color: var(--muted); font-size: 12px; }
.global-nav { display: flex; align-items: center; gap: 8px; }
.global-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 7px;
  color: var(--body);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
.global-nav a:hover,
.global-nav a[aria-current="page"] {
  background: rgba(199,224,255,.08);
  color: var(--text);
}
.menu-button {
  display: none;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
}

.hero {
  min-height: 72vh;
  display: grid;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.hero__content {
  width: min(calc(100% - 36px), 920px);
  margin: 0 auto;
  padding: 88px 0;
}
.eyebrow,.file-label {
  margin: 0 0 10px;
  color: var(--muted);
  font-family: "Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
}
.hero__title {
  margin: 0;
  max-width: 900px;
  font-family: "Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  font-size: clamp(38px, 7vw, 72px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .04em;
}
.hero__title strong { color: #fff; font-weight: 600; }
.hero__description {
  max-width: 760px;
  margin: 26px 0 0;
  color: var(--body);
  font-size: 18px;
  line-height: 2;
}
.hero-keywords { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-keywords > span {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(199,224,255,.035);
}
.hero-keywords strong { font-size: 15px; }
.hero-keywords small { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button,.observation-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 24px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #0b0f15;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
}
.button--sub {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.button:hover,.button--sub:hover,.observation-button:hover { transform: translateY(-1px); filter: brightness(1.05); }

.section {
  width: min(calc(100% - 36px), var(--content));
  margin: 0 auto;
  padding: 76px 0;
}
.section--narrow { max-width: 850px; }
.section--compact { padding-top: 20px; padding-bottom: 20px; }
.section-heading { margin-bottom: 30px; }
.section-heading h2,.archive-head h2 {
  margin: 0 0 8px;
  font-size: clamp(28px,4vw,38px);
  line-height: 1.45;
}
.section-heading > p:last-child { margin: 0; color: var(--muted); font-size: 16px; }

.intro-grid,.archive-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.info-card,.archive-card,.character-card,.world-entry,.observation-terminal,.record-fragment,.system-message,.external-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(199,224,255,.035), transparent 38%),
    var(--panel);
  box-shadow: var(--shadow);
}
.info-card,.archive-card { padding: 26px; }
.info-card h3,.archive-card h3 { margin: 0 0 14px; font-size: 24px; }
.info-card > p:not(.file-label),.archive-card > p {
  color: var(--body);
  font-size: 16px;
  line-height: 1.95;
}
.muted-note { color: var(--muted)!important; font-size: 15px!important; }
blockquote {
  margin: 22px 0 0;
  padding: 15px 18px;
  border-left: 2px solid rgba(199,224,255,.45);
  background: rgba(199,224,255,.035);
  color: #e9eef5;
  font-family: "Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  font-size: 17px;
  line-height: 1.95;
}
.notice-box,.fact-box,.rumor-box {
  margin: 22px 0;
  padding: 17px 18px;
  border: 1px solid rgba(199,224,255,.16);
  border-left: 3px solid rgba(199,224,255,.65);
  background: rgba(199,224,255,.04);
}
.notice-box strong,.fact-box strong,.rumor-box strong {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 14px;
}
.notice-box p,.fact-box p,.rumor-box p { margin: 0; color: var(--body); font-size: 15px; line-height: 1.9; }
.rumor-box { border-left-style: dashed; }

.terminal-status {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.terminal-status > div { padding: 18px 20px; border-right: 1px solid var(--line); }
.terminal-status > div:last-child { border-right: 0; }
.terminal-status span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.terminal-status strong { font-size: 17px; }

.archive-card__top,.character-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid rgba(199,224,255,.2);
  border-radius: 999px;
  color: var(--body);
  font-size: 11px;
  letter-spacing: .06em;
}
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 10px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.text-link:hover { text-decoration: underline; }
.record-fragment,.system-message { padding: 26px 28px; }
.record-fragment blockquote { margin-top: 10px; font-size: 20px; }
.record-fragment__note { margin: 14px 0 0; color: var(--muted); text-align: right; font-size: 14px; }
.system-message > p:last-child { margin: 0; color: var(--body); font-size: 17px; }
.external-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.external-card {
  display: grid;
  gap: 3px;
  min-height: 88px;
  padding: 20px 22px;
  align-content: center;
  text-decoration: none;
}
.external-card:hover { border-color: rgba(199,224,255,.4); }
.external-card strong { font-size: 17px; }
.external-card span { color: var(--muted); font-size: 13px; }

.page-heading {
  width: min(calc(100% - 36px), var(--content));
  margin: 0 auto;
  padding: 72px 0 34px;
}
.page-heading h1 {
  margin: 0 0 14px;
  font-family: "Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  font-size: clamp(38px,6vw,58px);
  font-weight: 600;
}
.page-heading > p:last-child { max-width: 780px; margin: 0; color: var(--body); font-size: 17px; line-height: 1.9; }

.world-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 34px; padding-top: 24px; }
.world-index { position: sticky; top: 98px; align-self: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.world-index__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.world-index nav { display: grid; gap: 4px; }
.world-index a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 7px 9px;
  border-radius: 5px;
  color: var(--body);
  font-size: 14px;
  text-decoration: none;
}
.world-index a:hover { background: rgba(199,224,255,.06); color: var(--text); }
.world-archive { min-width: 0; display: grid; gap: 22px; }
.world-entry { scroll-margin-top: 100px; padding: 30px; }
.world-entry:target { border-color: rgba(199,224,255,.45); }
.entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.entry-head h2 { margin: 0; font-size: 30px; }
.world-entry > p { color: var(--body); font-size: 16px; line-height: 2; }
.world-entry .lead {
  color: #f2f6fb;
  font-family: "Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  font-size: 21px;
  line-height: 1.85;
}
.data-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 24px 0; }
.data-grid > div { padding: 15px; border: 1px solid rgba(199,224,255,.13); border-radius: 6px; background: rgba(199,224,255,.025); }
.data-grid strong { display: block; margin-bottom: 4px; font-size: 15px; }
.data-grid span { color: var(--muted); font-size: 14px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.tag-list span { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 10px; border: 1px solid rgba(199,224,255,.15); border-radius: 5px; color: var(--body); font-size: 13px; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 24px 0 0; padding: 15px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.flow span { color: var(--body); font-size: 14px; }
.flow b { color: var(--muted); font-weight: 400; }
.record-list { padding-left: 24px; color: var(--body); }
.record-list li { margin: 8px 0; font-size: 15px; }
.rules-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.rules-list li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  padding: 17px;
  border: 1px solid rgba(199,224,255,.13);
  background: rgba(199,224,255,.025);
}
.rules-list li > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.rules-list strong { color: #edf2f7; font-size: 16px; line-height: 1.8; }
.rules-list p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.end-record { display: grid; justify-items: center; gap: 8px; margin-top: 30px; padding: 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.end-record span { color: var(--muted); font-size: 11px; letter-spacing: .16em; }
.end-record strong { font-family: "Hiragino Mincho ProN","Yu Mincho","YuMincho",serif; font-size: 19px; }

.archive-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.count-box { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.count-box span,.count-box small { color: var(--muted); font-size: 13px; }
.count-box strong { font-size: 24px; }
.search-panel { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 16px; align-items: center; margin-bottom: 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.search-panel label { display: grid; }
.search-panel label span { font-weight: 700; }
.search-panel label small { color: var(--muted); font-size: 12px; }
input[type="search"],select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid #44536a;
  border-radius: 7px;
  background: #0a0f16;
  color: var(--text);
  font-size: 16px;
}
.character-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 28px; }
.character-card { overflow: hidden; }
.character-card__top { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.character-card__identity { padding: 24px 22px 10px; }
.character-card__identity h2 { margin: 0; font-family: "Hiragino Mincho ProN","Yu Mincho","YuMincho",serif; font-size: 30px; }
.character-card > .tag-list { padding: 0 22px; margin: 10px 0 20px; }
.character-quote { margin: 0 22px 22px; font-size: 17px; }
.character-details { display: grid; grid-template-columns: repeat(2,1fr); margin: 0 22px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.character-details > div { padding: 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.character-details dt { color: var(--muted); font-size: 12px; }
.character-details dd { margin: 4px 0 0; color: var(--body); font-size: 14px; }
.character-text { margin: 24px 22px 0; }
.character-text:last-child { padding-bottom: 24px; }
.character-text h3 { margin: 0 0 7px; padding-bottom: 7px; border-bottom: 1px solid var(--line); font-size: 16px; }
.character-text p { margin: 0; color: var(--body); font-size: 15px; line-height: 1.95; }
.empty-state { grid-column: 1/-1; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.empty-state strong { font-size: 18px; }
.empty-state p { color: var(--muted); }

.observation-terminal { overflow: hidden; }
.observation-terminal__header { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding: 24px; border-bottom: 1px solid var(--line); }
.observation-terminal__header h2 { margin: 0; font-size: 28px; }
.observation-terminal > .notice-box { margin: 22px 24px 0; }
.observation-control { display: grid; grid-template-columns: 150px minmax(0,1fr) 220px; gap: 14px; align-items: end; padding: 24px; }
.observation-control label { display: grid; }
.observation-control label span { font-weight: 700; }
.observation-control label small { color: var(--muted); font-size: 12px; }
.observation-button { min-height: 58px; display: grid; align-content: center; padding: 8px 18px; }
.observation-button strong { font-size: 16px; }
.observation-button span { font-size: 8px; letter-spacing: .12em; }
.observation-result { border-top: 1px solid var(--line); background: rgba(0,0,0,.1); }
.observation-result__top { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.observation-result__status { margin: 0; color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .15em; }
.signal { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(199,224,255,.55); }
.observation-result__body { padding: 28px 24px; }
.observation-result__body h2 { margin: 0; font-family: "Hiragino Mincho ProN","Yu Mincho","YuMincho",serif; font-size: clamp(28px,4vw,38px); }
.observation-result__body > p:last-child { margin: 18px 0 0; color: var(--body); font-size: 17px; line-height: 2; }
.observation-meta { display: grid; grid-template-columns: repeat(2,1fr); margin: 0; padding: 0 24px 24px; }
.observation-meta > div { padding: 14px; border: 1px solid var(--line); }
.observation-meta > div + div { border-left: 0; }
.observation-meta dt { color: var(--muted); font-size: 12px; }
.observation-meta dd { margin: 4px 0 0; font-weight: 700; font-size: 15px; }
.observation-result.is-anomaly { background: repeating-linear-gradient(0deg,rgba(199,224,255,.012) 0 1px,transparent 1px 4px),rgba(0,0,0,.12); }
.observation-result.is-anomaly .signal,.moon-status--anomaly { animation: blink 1s steps(2,end) infinite; }
.note-card { margin-top: 18px; padding: 16px 18px; border-left: 2px solid var(--line); }
.note-card strong { color: var(--text); }
.note-card p { margin: 4px 0 0; }

.site-footer {
  width: min(calc(100% - 36px), var(--content));
  margin: 60px auto 0;
  padding: 30px 0 44px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .1em;
}
.site-footer p { margin: 3px 0; }

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@keyframes blink { 50% { opacity: .25; } }

@media (max-width: 900px) {
  .intro-grid,.archive-grid { grid-template-columns: 1fr; }
  .world-layout { grid-template-columns: 1fr; }
  .world-index { position: static; }
  .world-index nav { grid-template-columns: repeat(2,1fr); }
  .character-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .site-header__inner { min-height: 70px; }
  .menu-button { display: inline-flex; align-items: center; }
  .global-nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    padding: 12px 18px 18px;
    grid-template-columns: 1fr;
    border-bottom: 1px solid var(--line);
    background: rgba(8,10,15,.98);
  }
  .global-nav.is-open { display: grid; }
  .global-nav a {
    justify-content: flex-start;
    min-height: 54px;
    padding: 0 14px;
    border: 1px solid rgba(199,224,255,.08);
    background: var(--panel);
    font-size: 16px;
  }
  .hero { min-height: auto; }
  .hero__content { padding: 70px 0; }
  .hero__description { font-size: 16px; }
  .button { width: 100%; min-height: 58px; }
  .section { padding: 58px 0; }
  .terminal-status { grid-template-columns: 1fr; }
  .terminal-status > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .terminal-status > div:last-child { border-bottom: 0; }
  .external-grid { grid-template-columns: 1fr; }
  .page-heading { padding-top: 58px; }
  .world-entry { padding: 22px 18px; }
  .entry-head { gap: 10px; }
  .entry-head h2 { font-size: 26px; }
  .data-grid { grid-template-columns: 1fr; }
  .rules-list li { grid-template-columns: 36px 1fr; padding: 15px; }
  .archive-head { align-items: flex-start; }
  .search-panel { grid-template-columns: 1fr; }
  .character-details { grid-template-columns: 1fr; }
  .observation-terminal__header { flex-direction: column; }
  .observation-control { grid-template-columns: 1fr; }
  .observation-button { width: 100%; min-height: 62px; }
  .observation-meta { grid-template-columns: 1fr; }
  .observation-meta > div + div { border-left: 1px solid var(--line); border-top: 0; }
}

@media (max-width: 480px) {
  .site-header__inner,.hero__content,.section,.page-heading,.site-footer { width: min(calc(100% - 24px), var(--content)); }
  .site-title { font-size: 16px; }
  .site-title__symbol { display: none; }
  .hero__title { font-size: 35px; }
  .hero-keywords > span { grid-template-columns: 1fr; gap: 0; }
  .info-card,.archive-card { padding: 21px 18px; }
  .record-fragment,.system-message { padding: 21px 18px; }
  .world-index nav { grid-template-columns: 1fr; }
  .character-card__identity,.character-card > .tag-list,.character-text { margin-left: 0; margin-right: 0; }
  .character-details { margin-left: 16px; margin-right: 16px; }
  .character-card__identity { padding-left: 18px; padding-right: 18px; }
  .character-card > .tag-list { padding-left: 18px; padding-right: 18px; }
  .character-quote { margin-left: 18px; margin-right: 18px; }
  .character-text { margin-left: 18px; margin-right: 18px; }
}

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

/* =========================================================
   24. 視認性アップデート / 背景 + 操作UI
   ========================================================= */

/* 背景画像は使わず、CSSだけで幾何学模様を描画する。 */
body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 24% 16%, rgba(116,170,230,.11), transparent 26rem),
    radial-gradient(circle at 78% 34%, rgba(102,222,225,.07), transparent 30rem),
    linear-gradient(180deg, #09101a 0%, #070a10 52%, #05070b 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(30deg, transparent 48.8%, rgba(186,214,244,.16) 49.4%, rgba(186,214,244,.16) 50.6%, transparent 51.2%),
    linear-gradient(150deg, transparent 48.8%, rgba(186,214,244,.12) 49.4%, rgba(186,214,244,.12) 50.6%, transparent 51.2%),
    linear-gradient(90deg, transparent 49.4%, rgba(186,214,244,.08) 49.7%, rgba(186,214,244,.08) 50.3%, transparent 50.6%),
    radial-gradient(circle, transparent 0 36px, rgba(186,214,244,.11) 37px 38px, transparent 39px 100%);
  background-size:
    180px 104px,
    180px 104px,
    180px 104px,
    360px 360px;
  background-position:
    0 0,
    0 0,
    90px 52px,
    18vw 8vh;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.82) 55%, rgba(0,0,0,.45) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,255,255,.025) 120px),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(255,255,255,.02) 120px),
    radial-gradient(circle at 50% 14%, rgba(0,0,0,0) 0 18rem, rgba(0,0,0,.28) 44rem, rgba(0,0,0,.58) 100%);
}

/* 本文の可読性を少し底上げ */
body { font-size: 18px; }
.hero { min-height: auto; }
.hero__content { padding: 74px 0 82px; }
.hero__description { margin-top: 0; font-size: 19px; font-weight: 500; }

/* 「押せる場所」を共通して分かりやすくする */
.global-nav a,
.menu-button,
.button,
.text-link,
.external-card,
.world-index a,
.observation-button {
  position: relative;
  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

/* ヘッダーナビ */
.global-nav a {
  min-height: 54px;
  padding: 0 20px;
  border: 1px solid rgba(199,224,255,.18);
  background: rgba(13,18,25,.78);
  color: #f5f8fc;
  font-size: 16px;
}
.global-nav a:hover,
.global-nav a[aria-current="page"] {
  transform: translateY(-2px);
  border-color: rgba(199,224,255,.72);
  background: rgba(199,224,255,.16);
  box-shadow: 0 8px 24px rgba(104,163,224,.16), inset 0 0 0 1px rgba(255,255,255,.04);
  color: #fff;
}

/* メインCTA */
.button,
.observation-button {
  min-height: 64px;
  padding: 0 30px;
  border: 2px solid #d9eaff;
  border-radius: 9px;
  background: #d5e8ff;
  color: #070b10;
  box-shadow: 0 8px 26px rgba(111,169,229,.16);
  font-size: 17px;
  font-weight: 800;
}
.button::after,
.text-link::after {
  content: "→";
  margin-left: 12px;
  font-weight: 800;
}
.button:hover,
.observation-button:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 12px 34px rgba(139,193,249,.28);
  filter: none;
}
.button--sub {
  background: rgba(16,24,34,.92);
  color: #f7f9fc;
  border-color: rgba(199,224,255,.68);
}
.button--sub:hover {
  background: rgba(199,224,255,.18);
  color: #fff;
}

/* カード内リンクも小さな文字リンクではなくボタン化 */
.text-link {
  width: 100%;
  min-height: 54px;
  margin-top: 18px;
  padding: 0 18px;
  justify-content: space-between;
  border: 1px solid rgba(199,224,255,.48);
  border-radius: 7px;
  background: rgba(199,224,255,.08);
  color: #f4f8fd;
  font-size: 16px;
  text-decoration: none;
}
.text-link:hover {
  transform: translateY(-2px);
  border-color: #cfe5ff;
  background: rgba(199,224,255,.18);
  box-shadow: 0 8px 24px rgba(104,163,224,.14);
  text-decoration: none;
}
/* 元のテキストに矢印があるため二重表示を防ぐ */
.text-link::after { content: none; }

/* 外部リンクカード */
.external-card {
  border-width: 1px;
  border-color: rgba(199,224,255,.32);
  background: rgba(17,24,35,.92);
}
.external-card:hover {
  transform: translateY(-3px);
  border-color: rgba(199,224,255,.78);
  background: rgba(29,43,59,.96);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

/* 世界設定の索引も「クリックできる」見た目に */
.world-index a {
  min-height: 48px;
  padding: 9px 12px;
  border: 1px solid transparent;
  font-size: 15px;
}
.world-index a:hover {
  transform: translateX(3px);
  border-color: rgba(199,224,255,.32);
  background: rgba(199,224,255,.12);
  color: #fff;
}

/* メニューボタン */
.menu-button {
  min-height: 52px;
  padding: 0 19px;
  border-color: rgba(199,224,255,.52);
  background: rgba(17,24,35,.96);
  color: #fff;
  cursor: pointer;
}
.menu-button:hover {
  transform: translateY(-2px);
  border-color: #d5e8ff;
  background: rgba(199,224,255,.15);
}

/* 入力UI */
input,
select {
  min-height: 54px;
  border-width: 1px !important;
  border-color: rgba(199,224,255,.38) !important;
  background: rgba(8,13,20,.96) !important;
  color: #f5f8fc !important;
  font-size: 16px !important;
}
input:hover,
select:hover { border-color: rgba(199,224,255,.7) !important; }

/* キーボード操作でも明確に */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #d9eaff;
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .global-nav a {
    min-height: 58px;
    justify-content: flex-start;
    padding: 0 18px;
    border-color: rgba(199,224,255,.24);
  }
  .hero__content { padding: 54px 0 64px; }
  .hero__description { font-size: 18px; }
  .button,
  .observation-button { min-height: 64px; font-size: 17px; }
  .text-link { min-height: 58px; }
}

/* =========================================================
   24. Dashboard UI v4
   生成モックアップを「画像」ではなく実UIとして再構成
   ========================================================= */

.home-page {
  --dash-blue: #7fc1ff;
  --dash-violet: #9b91ff;
  --dash-teal: #63d6dc;
  --dash-gold: #e0b75f;
  --dash-line: rgba(190, 211, 234, .22);
  background:
    radial-gradient(circle at 50% 16%, rgba(54, 112, 163, .11), transparent 28rem),
    linear-gradient(rgba(6, 10, 15, .94), rgba(6, 10, 15, .96)),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(150, 184, 218, .035) 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(150, 184, 218, .035) 80px),
    #06090e;
  min-height: 100vh;
}

.home-page::before,
.home-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.home-page::before {
  opacity: .22;
  background:
    radial-gradient(circle at 12% 26%, transparent 0 110px, rgba(126, 169, 207, .18) 111px 112px, transparent 113px),
    radial-gradient(circle at 84% 42%, transparent 0 180px, rgba(126, 169, 207, .12) 181px 182px, transparent 183px),
    linear-gradient(32deg, transparent 49.7%, rgba(126,169,207,.08) 50%, transparent 50.3%),
    linear-gradient(-32deg, transparent 49.7%, rgba(126,169,207,.06) 50%, transparent 50.3%);
  background-size: 520px 520px, 760px 760px, 220px 220px, 260px 260px;
}

.dashboard-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(5, 8, 13, .94);
  border-bottom: 1px solid rgba(191, 214, 237, .18);
  backdrop-filter: blur(18px);
}

.dashboard-header__inner {
  width: min(calc(100% - 32px), 1240px);
  min-height: 92px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 250px 1fr;
  align-items: stretch;
}

.dashboard-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 26px;
  border-right: 1px solid rgba(191,214,237,.14);
  text-decoration: none;
}

.dashboard-brand__small { color: #aab5c1; font-size: 11px; letter-spacing: .24em; }
.dashboard-brand strong { margin: 3px 0; font-family: "Hiragino Mincho ProN","Yu Mincho",serif; font-size: 25px; font-weight: 500; letter-spacing: .15em; }
.dashboard-brand__en { color: #8d9bab; font-size: 8px; letter-spacing: .34em; }

.dashboard-nav { justify-content: flex-end; gap: 0; }
.dashboard-nav a {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 145px;
  min-height: 92px;
  padding: 8px 20px;
  border-radius: 0;
  border-right: 1px solid rgba(191,214,237,.08);
  color: #d9e0e8;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.dashboard-nav a::after {
  content: "";
  position: absolute;
  left: 20%; right: 20%; bottom: 0;
  height: 2px;
  background: var(--dash-blue);
  box-shadow: 0 0 16px rgba(127,193,255,.8);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.dashboard-nav a:hover,
.dashboard-nav a:focus-visible,
.dashboard-nav a[aria-current="page"] { background: rgba(127,193,255,.055); color: #fff; text-decoration: none; }
.dashboard-nav a:hover::after,
.dashboard-nav a:focus-visible::after,
.dashboard-nav a[aria-current="page"]::after { transform: scaleX(1); }
.dashboard-nav strong { font-size: 14px; letter-spacing: .1em; }
.dashboard-nav small { margin-top: 2px; color: #8795a5; font-size: 7px; letter-spacing: .24em; }
.nav-symbol { color: #dfe8f2; font-size: 23px; line-height: 1; }
.dashboard-menu-button { display: none; }

.dashboard-main {
  width: min(calc(100% - 32px), 1240px);
  margin: 0 auto;
  padding: 34px 0 64px;
}

.dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, .75fr) minmax(310px, .72fr);
  gap: 34px;
  align-items: center;
  min-height: 420px;
  padding: 34px 20px 30px;
  border-bottom: 1px solid rgba(190,211,234,.16);
}

.dashboard-kicker { margin: 0 0 12px; color: #b3bfcc; font-size: 13px; letter-spacing: .32em; }
.dashboard-hero h1 { margin: 0; font-family: "Hiragino Mincho ProN","Yu Mincho",serif; font-size: clamp(48px, 6vw, 78px); font-weight: 500; line-height: 1.12; letter-spacing: .13em; text-shadow: 0 0 26px rgba(167,204,236,.12); }
.dashboard-hero__en { margin: 14px 0 0; color: #aab8c7; font-size: 11px; letter-spacing: .44em; }
.dashboard-rule { display: flex; align-items: center; width: min(100%, 450px); height: 28px; margin-top: 14px; }
.dashboard-rule::before,.dashboard-rule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(177,203,227,.42)); }
.dashboard-rule::after { background: linear-gradient(90deg, rgba(177,203,227,.42), transparent); }
.dashboard-rule span { width: 8px; height: 8px; border: 1px solid rgba(177,203,227,.5); transform: rotate(45deg); }
.dashboard-hero__description { max-width: 560px; margin: 10px 0 0; color: #cbd4df; font-size: 16px; line-height: 2.05; }

.dashboard-primary-button,
.wide-outline-button,
.gold-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 20px;
  border: 1px solid rgba(127,193,255,.72);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(40,90,136,.26), rgba(36,65,95,.13));
  color: #f4f8fc;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: inset 0 0 28px rgba(81,151,213,.06), 0 0 16px rgba(73,145,207,.05);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.dashboard-primary-button { width: min(100%, 360px); margin-top: 24px; }
.button-arrow { margin-left: auto; font-size: 22px; }
.button-icon { color: var(--dash-blue); font-size: 20px; }
.dashboard-primary-button:hover,.dashboard-primary-button:focus-visible,
.wide-outline-button:hover,.wide-outline-button:focus-visible { transform: translateY(-2px); border-color: #a8d5ff; background: linear-gradient(90deg, rgba(55,119,178,.4), rgba(37,73,109,.22)); box-shadow: 0 0 22px rgba(74,157,228,.2), inset 0 0 28px rgba(74,157,228,.08); }

.dashboard-hero__visual { display: grid; place-items: center; min-height: 300px; }
.compass-mark { position: relative; width: 250px; aspect-ratio: 1; display: grid; place-items: center; opacity: .72; filter: drop-shadow(0 0 14px rgba(140,190,232,.1)); }
.compass-mark__ring { position: absolute; border: 1px solid rgba(157,194,227,.32); border-radius: 50%; }
.compass-mark__ring--1 { inset: 22%; }
.compass-mark__ring--2 { inset: 34%; }
.compass-mark__vertical,.compass-mark__horizontal { position: absolute; background: linear-gradient(transparent, rgba(180,210,235,.68), transparent); }
.compass-mark__vertical { width: 1px; height: 100%; }
.compass-mark__horizontal { width: 100%; height: 1px; background: linear-gradient(90deg,transparent,rgba(180,210,235,.55),transparent); }
.compass-mark__star { font-size: 88px; color: #d5e5f3; text-shadow: 0 0 28px rgba(142,195,239,.38); }

.status-panel,.night-note-panel,.information-panel,.dashboard-external,.dashboard-system-message {
  position: relative;
  border: 1px solid var(--dash-line);
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(166,203,235,.045), rgba(10,15,22,.88));
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
}
.status-panel { padding: 22px; }
.panel-corners::before,.panel-corners::after { content: ""; position: absolute; width: 12px; height: 12px; border-color: rgba(224,183,95,.38); }
.panel-corners::before { left: 5px; top: 5px; border-left: 1px solid; border-top: 1px solid; }
.panel-corners::after { right: 5px; bottom: 5px; border-right: 1px solid; border-bottom: 1px solid; }
.status-panel__heading { display: grid; gap: 2px; margin-bottom: 13px; }
.status-panel__heading span { font-family: "Hiragino Mincho ProN","Yu Mincho",serif; font-size: 16px; letter-spacing: .1em; }
.status-panel__heading small { color: #8997a7; font-size: 8px; letter-spacing: .3em; }
.status-list { border: 1px solid rgba(190,211,234,.18); border-radius: 4px; overflow: hidden; }
.status-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; min-height: 65px; padding: 10px 12px; border-bottom: 1px solid rgba(190,211,234,.12); }
.status-row:last-child { border-bottom: 0; }
.status-icon { font-size: 22px; }
.status-row--blue .status-icon { color: var(--dash-blue); }
.status-row--teal .status-icon { color: var(--dash-teal); }
.status-row--gold .status-icon { color: var(--dash-gold); }
.status-name { display: grid; }
.status-name strong { font-size: 14px; }
.status-name small { color: #8391a1; font-size: 7px; letter-spacing: .2em; }
.status-row b { color: #f4f7fa; font-family: "Segoe UI",sans-serif; font-size: 16px; font-weight: 600; }
.status-panel__footer { display: flex; align-items: center; gap: 10px; margin-top: 13px; color: #8594a4; font-size: 9px; letter-spacing: .18em; }
.status-panel__footer i { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #8ed8ff; box-shadow: 0 0 10px #6ec8ff; }

.dashboard-links { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 18px; }
.dashboard-card {
  --card-accent: var(--dash-blue);
  position: relative;
  min-height: 305px;
  padding: 26px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(190,211,234,.26);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(22,31,43,.92), rgba(9,14,20,.94));
  color: #eef4fa;
  text-decoration: none;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.dashboard-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--card-accent) 11%, transparent), transparent 42%); opacity: .9; pointer-events: none; }
.dashboard-card--violet { --card-accent: var(--dash-violet); }
.dashboard-card--teal { --card-accent: var(--dash-teal); }
.dashboard-card--gold { --card-accent: var(--dash-gold); }
.dashboard-card:hover,.dashboard-card:focus-visible { transform: translateY(-5px); border-color: color-mix(in srgb, var(--card-accent) 72%, white 8%); box-shadow: 0 16px 34px rgba(0,0,0,.32), 0 0 24px color-mix(in srgb, var(--card-accent) 22%, transparent); background: linear-gradient(180deg, rgba(29,42,57,.98), rgba(10,16,23,.96)); }
.dashboard-card__icon { position: relative; z-index: 1; color: var(--card-accent); font-size: 40px; line-height: 1; text-shadow: 0 0 16px color-mix(in srgb, var(--card-accent) 40%, transparent); }
.dashboard-card > strong { position: relative; z-index: 1; margin-top: 20px; font-family: "Hiragino Mincho ProN","Yu Mincho",serif; font-size: 25px; font-weight: 500; letter-spacing: .12em; }
.dashboard-card > small { position: relative; z-index: 1; margin-top: 2px; color: #9ca9b7; font-size: 8px; letter-spacing: .34em; }
.dashboard-card > p { position: relative; z-index: 1; margin: 18px 0 22px; color: #bfc9d4; font-size: 14px; line-height: 1.9; }
.dashboard-card__button { position: relative; z-index: 1; margin-top: auto; width: 100%; min-height: 54px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--card-accent); border-radius: 4px; background: color-mix(in srgb, var(--card-accent) 11%, transparent); color: #f4f7fa; font-size: 15px; font-weight: 700; box-shadow: inset 0 0 22px color-mix(in srgb, var(--card-accent) 9%, transparent), 0 0 12px color-mix(in srgb, var(--card-accent) 9%, transparent); }
.dashboard-card__button b { margin-left: auto; font-size: 20px; font-weight: 400; }
.dashboard-card:hover .dashboard-card__button,.dashboard-card:focus-visible .dashboard-card__button { background: color-mix(in srgb, var(--card-accent) 19%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--card-accent) 22%, transparent); }

.dashboard-bottom { display: grid; grid-template-columns: 1.35fr .85fr; gap: 14px; margin-top: 16px; }
.information-panel,.night-note-panel { padding: 24px; }
.dashboard-section-title { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid rgba(190,211,234,.16); }
.dashboard-section-title__icon { color: #c9d8e6; font-size: 24px; }
.dashboard-section-title div { display: grid; gap: 1px; }
.dashboard-section-title strong { font-family: "Hiragino Mincho ProN","Yu Mincho",serif; font-size: 18px; font-weight: 500; letter-spacing: .09em; }
.dashboard-section-title small { color: #8795a5; font-size: 8px; letter-spacing: .28em; }
.information-list > div { display: grid; grid-template-columns: 85px 62px 1fr; gap: 12px; align-items: center; min-height: 58px; border-bottom: 1px solid rgba(190,211,234,.1); }
.information-list time { color: #9eabb9; font-family: "Segoe UI",sans-serif; font-size: 11px; letter-spacing: .08em; }
.info-tag { display: inline-grid; place-items: center; min-height: 27px; border-radius: 3px; background: rgba(87,151,206,.12); color: #9fd3f7; font-size: 10px; }
.information-list p { margin: 0; color: #c7d0da; font-size: 13px; line-height: 1.65; }
.wide-outline-button { width: 100%; justify-content: center; margin-top: 16px; }
.wide-outline-button span { margin-left: auto; font-size: 20px; }
.night-note-panel { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.night-note-panel__heading { margin: 0 0 18px; color: #d9caa7; font-family: "Hiragino Mincho ProN","Yu Mincho",serif; font-size: 17px; letter-spacing: .12em; }
.night-note-panel blockquote { margin: 0; padding: 0; border: 0; background: none; color: #cbd3dd; font-size: 15px; line-height: 2.15; }
.gold-button { width: 100%; justify-content: center; margin-top: 26px; border-color: rgba(224,183,95,.8); background: linear-gradient(90deg,rgba(116,83,28,.25),rgba(157,116,39,.18)); box-shadow: inset 0 0 24px rgba(224,183,95,.07),0 0 14px rgba(224,183,95,.08); }
.gold-button span { margin-left: auto; font-size: 20px; }
.gold-button:hover,.gold-button:focus-visible { transform: translateY(-2px); border-color: #f0ca75; background: linear-gradient(90deg,rgba(146,102,28,.36),rgba(177,131,47,.28)); box-shadow: 0 0 22px rgba(224,183,95,.18); }

.dashboard-external { margin-top: 16px; padding: 22px 24px; }
.dashboard-external__links { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 16px; }
.dashboard-external__links a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; min-height: 70px; padding: 14px 16px; border: 1px solid rgba(190,211,234,.17); border-radius: 4px; background: rgba(125,166,203,.025); text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.dashboard-external__links a:hover,.dashboard-external__links a:focus-visible { transform: translateY(-2px); border-color: rgba(127,193,255,.55); background: rgba(127,193,255,.07); }
.dashboard-external__links span { font-size: 14px; font-weight: 700; }
.dashboard-external__links small { color: #8d9bab; font-size: 10px; }
.dashboard-external__links b { grid-row: 1 / 3; grid-column: 2; font-size: 20px; }

.dashboard-system-message { display: flex; gap: 18px; align-items: center; margin-top: 14px; padding: 16px 20px; }
.dashboard-system-message span { color: #88a2b9; font-size: 8px; letter-spacing: .25em; white-space: nowrap; }
.dashboard-system-message p { margin: 0; color: #b9c6d2; font-size: 13px; }
.dashboard-footer { border-top: 1px solid rgba(190,211,234,.13); background: rgba(4,7,11,.72); }
.dashboard-footer strong { letter-spacing: .35em; font-size: 10px; font-weight: 500; }
.dashboard-footer span { color: #7f8d9c; font-size: 11px; }

.home-page a:focus-visible,
.home-page button:focus-visible { outline: 2px solid #b8dcff; outline-offset: 3px; }

@media (max-width: 1000px) {
  .dashboard-header__inner { grid-template-columns: 200px 1fr; }
  .dashboard-nav a { min-width: 118px; padding-inline: 10px; }
  .dashboard-hero { grid-template-columns: 1fr 300px; }
  .dashboard-hero__visual { position: absolute; right: 305px; top: 70px; opacity: .42; }
  .compass-mark { width: 190px; }
  .dashboard-links { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
  .home-page { font-size: 16px; }
  .dashboard-header__inner { width: min(calc(100% - 24px),1240px); min-height: 70px; grid-template-columns: 1fr auto; align-items: center; }
  .dashboard-brand { min-height: 70px; border-right: 0; padding-right: 0; }
  .dashboard-brand strong { font-size: 20px; }
  .dashboard-brand__small { font-size: 9px; }
  .dashboard-menu-button { display: inline-flex; align-items: center; justify-content: center; min-width: 62px; min-height: 46px; border-color: rgba(190,211,234,.28); background: rgba(15,23,32,.9); color: #eef5fb; }
  .dashboard-nav { display: none; position: absolute; top: 70px; left: 12px; right: 12px; padding: 8px; border: 1px solid rgba(190,211,234,.2); background: rgba(6,10,15,.98); box-shadow: 0 16px 30px rgba(0,0,0,.4); }
  .dashboard-nav.is-open { display: grid; grid-template-columns: 1fr; }
  .dashboard-nav a { min-width: 0; min-height: 62px; grid-template-columns: 38px 1fr auto; justify-items: start; border-right: 0; border-bottom: 1px solid rgba(190,211,234,.08); }
  .dashboard-nav a::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; transform: scaleY(0); }
  .dashboard-nav a:hover::after,.dashboard-nav a:focus-visible::after,.dashboard-nav a[aria-current="page"]::after { transform: scaleY(1); }
  .dashboard-nav small { justify-self: end; }
  .nav-symbol { font-size: 20px; }

  .dashboard-main { width: min(calc(100% - 22px),1240px); padding-top: 20px; }
  .dashboard-hero { display: block; min-height: 0; padding: 24px 10px 20px; }
  .dashboard-hero h1 { font-size: clamp(42px,15vw,62px); letter-spacing: .1em; }
  .dashboard-kicker { font-size: 10px; }
  .dashboard-hero__en { font-size: 8px; letter-spacing: .3em; }
  .dashboard-hero__description { font-size: 15px; line-height: 1.9; }
  .dashboard-primary-button { min-height: 62px; width: 100%; font-size: 15px; }
  .dashboard-hero__visual { right: 0; top: 42px; opacity: .18; }
  .compass-mark { width: 150px; }
  .status-panel { margin-top: 24px; padding: 16px; }
  .status-row { min-height: 60px; }

  .dashboard-links { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
  .dashboard-card { min-height: 0; display: grid; grid-template-columns: 48px 1fr auto; grid-template-rows: auto auto; align-items: center; text-align: left; padding: 14px; }
  .dashboard-card__icon { grid-row: 1 / 3; font-size: 29px; }
  .dashboard-card > strong { margin: 0; font-size: 20px; }
  .dashboard-card > small { margin: 2px 0 0; font-size: 7px; }
  .dashboard-card > p { display: none; }
  .dashboard-card__button { grid-column: 3; grid-row: 1 / 3; width: auto; min-height: 44px; padding: 0 13px; font-size: 0; border: 0; background: transparent; box-shadow: none; }
  .dashboard-card__button b { font-size: 24px; }
  .dashboard-card:hover .dashboard-card__button,.dashboard-card:focus-visible .dashboard-card__button { background: transparent; box-shadow: none; }

  .dashboard-bottom { grid-template-columns: 1fr; }
  .information-panel,.night-note-panel { padding: 18px; }
  .information-list > div { grid-template-columns: 70px 50px 1fr; gap: 8px; }
  .information-list p { font-size: 12px; }
  .night-note-panel { min-height: 270px; }
  .dashboard-external { padding: 18px; }
  .dashboard-external__links { grid-template-columns: 1fr; }
  .dashboard-system-message { align-items: flex-start; flex-direction: column; gap: 6px; }
}

@media (max-width: 430px) {
  .dashboard-hero h1 { font-size: 42px; }
  .status-row { grid-template-columns: 30px 1fr auto; padding-inline: 9px; }
  .status-name strong { font-size: 13px; }
  .status-row b { font-size: 14px; }
  .dashboard-card > strong { font-size: 18px; }
  .information-list > div { grid-template-columns: 1fr auto; padding: 10px 0; }
  .information-list time { grid-column: 1; }
  .info-tag { grid-column: 2; grid-row: 1; min-width: 48px; }
  .information-list p { grid-column: 1 / -1; }
}

/* =========================================================
   V6 TYPOGRAPHY / ARCHIVE REFINEMENT
   ========================================================= */

.page-heading h1,
.section-heading h2,
.archive-head h2,
.observation-terminal__header h2 {
  font-family: "Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  font-weight: 600;
  letter-spacing: .065em;
}

.page-heading > p:last-child,
.section-heading > p:last-child,
.info-card > p:not(.file-label),
.archive-card > p,
.character-text p,
.notice-box p,
.fact-box p,
.rumor-box p {
  font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  letter-spacing: .02em;
}

.page-heading h1 {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  font-size: clamp(36px, 6vw, 54px);
}
.page-heading h1::before {
  content: "";
  position: absolute;
  inset: .15em auto .15em 0;
  width: 3px;
  border-radius: 10px;
  background: linear-gradient(180deg,var(--accent),rgba(199,224,255,.12));
  box-shadow: 0 0 14px rgba(199,224,255,.2);
}

.archive-head h2,
.section-heading h2 {
  color: #fff;
  font-size: clamp(30px,4vw,40px);
}

.character-card__name {
  font-family: "Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  font-size: clamp(27px,3.4vw,34px);
  letter-spacing: .06em;
}

.search-panel input,
.observation-control select {
  min-height: 56px;
  font-size: 16px;
}

/* =========================================================
   WORLD ARCHIVE — UNIFIED TYPOGRAPHY + STRONG TERMS
   ========================================================= */

.world-layout { grid-template-columns: 230px minmax(0,1fr); gap: 36px; padding-top: 24px; }
.world-archive { display: grid; gap: 26px; min-width: 0; }
.world-index { position: sticky; top: 98px; align-self: start; padding: 22px 18px; }
.world-index__title { margin: 0 0 14px; color: var(--text); font-size: 16px; font-weight: 700; letter-spacing: .08em; }
.world-index__title::after { content: " / INDEX"; color: var(--muted); font: 600 9px/1.3 "Segoe UI","Helvetica Neue",Arial,sans-serif; letter-spacing: .16em; }
.world-index nav { display: grid; gap: 5px; }
.world-index a { position: relative; display: flex; align-items: center; min-height: 46px; padding: 8px 10px 8px 18px; border-radius: 6px; color: var(--body); font-size: 15px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: color .2s ease,background .2s ease,transform .2s ease; }
.world-index a::before { content: ""; position: absolute; left: 6px; width: 4px; height: 4px; border-radius: 50%; background: rgba(199,224,255,.45); }
.world-index a:hover { transform: translateX(2px); background: rgba(199,224,255,.07); color: #fff; }

.world-entry { position: relative; scroll-margin-top: 105px; padding: 34px 34px 36px; }
.world-entry::before { content: ""; position: absolute; top: 0; left: 0; width: 92px; height: 2px; background: linear-gradient(90deg,var(--accent),transparent); opacity: .8; }
.world-entry:target { border-color: rgba(199,224,255,.52); box-shadow: 0 0 0 1px rgba(199,224,255,.08),var(--shadow); }
.entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 24px; padding-bottom: 19px; border-bottom: 1px solid rgba(199,224,255,.11); }
.entry-head .file-label { margin: 0 0 7px; font-size: 10px; }
.entry-head h2 { position: relative; margin: 0; padding-left: 17px; color: #fff; font-family: "Hiragino Mincho ProN","Yu Mincho","YuMincho",serif; font-size: clamp(30px,4vw,40px); font-weight: 600; line-height: 1.35; letter-spacing: .07em; }
.entry-head h2::before { content: ""; position: absolute; top: .12em; bottom: .12em; left: 0; width: 3px; border-radius: 10px; background: linear-gradient(180deg,rgba(199,224,255,1),rgba(199,224,255,.18)); box-shadow: 0 0 12px rgba(199,224,255,.2); }
.entry-head .tag { flex: 0 0 auto; min-height: 31px; padding: 4px 10px; border-radius: 4px; font-size: 11px; }
.world-entry > p { margin: 18px 0; color: var(--body); font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif; font-size: 16px; line-height: 2; letter-spacing: .025em; }
.world-entry .lead { margin: 0 0 22px; color: #f2f6fb; font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif; font-size: 19px; font-weight: 600; line-height: 1.85; letter-spacing: .04em; }
.data-grid strong { font-size: 16px; }
.data-grid span { font-size: 14px; }
.tag-list span { min-height: 36px; font-size: 14px; }
.world-entry blockquote { font-size: 17px; }
.rules-list strong { font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif; font-size: 16px; }
.end-record strong { font-family: "Hiragino Mincho ProN","Yu Mincho","YuMincho",serif; font-size: 20px; }

/* =========================================================
   OBSERVATION — HERO INTERACTION
   ========================================================= */

.observation-page {
  background:
    radial-gradient(circle at 50% 18rem,rgba(91,225,219,.07),transparent 30rem),
    radial-gradient(circle at 86% 40rem,rgba(135,107,255,.055),transparent 28rem),
    linear-gradient(180deg,#090d13 0%,var(--bg) 38rem);
}

.page-heading--observation { padding-bottom: 28px; }
.observation-stage { max-width: 980px; padding-top: 16px; }
.observation-terminal--luxury { position: relative; overflow: hidden; border-color: rgba(118,219,230,.28); background: linear-gradient(145deg,rgba(82,206,220,.045),transparent 35%),linear-gradient(180deg,rgba(255,255,255,.01),rgba(0,0,0,.08)),var(--panel); box-shadow: 0 30px 90px rgba(0,0,0,.38),0 0 0 1px rgba(120,225,235,.035),inset 0 1px 0 rgba(255,255,255,.035); }
.observation-terminal--luxury::before,.observation-terminal--luxury::after { content: ""; position: absolute; pointer-events: none; }
.observation-terminal--luxury::before { inset: 0; background-image: linear-gradient(rgba(199,224,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(199,224,255,.018) 1px,transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom,black,transparent 60%); }
.observation-terminal--luxury::after { width: 280px; height: 280px; top: -130px; right: -110px; border: 1px solid rgba(111,222,230,.08); border-radius: 50%; box-shadow: 0 0 0 38px rgba(111,222,230,.018),0 0 0 76px rgba(111,222,230,.012); }

.observation-terminal__ornament { position: relative; z-index: 1; height: 44px; display: flex; align-items: center; justify-content: center; gap: 10px; border-bottom: 1px solid rgba(199,224,255,.075); color: rgba(199,224,255,.65); }
.observation-terminal__ornament span,.observation-terminal__ornament i { width: min(24vw,170px); height: 1px; background: linear-gradient(90deg,transparent,rgba(199,224,255,.24)); }
.observation-terminal__ornament i { transform: scaleX(-1); }
.observation-terminal__ornament b { font-size: 12px; text-shadow: 0 0 12px rgba(111,222,230,.55); }

.observation-terminal--luxury .observation-terminal__header { position: relative; z-index: 1; padding: 32px 34px 28px; }
.observation-terminal--luxury .observation-terminal__header h2 { font-size: clamp(34px,5vw,48px); color: #fff; }
.observation-terminal__intro { max-width: 600px; margin: 10px 0 0; color: var(--body); font-size: 16px; }
.count-box--observation { min-width: 170px; padding: 13px 15px; border-color: rgba(111,222,230,.22); background: rgba(85,208,219,.035); }
.count-box--observation strong { font-size: 28px; color: #eafcff; }
.count-box--observation small { display: block; color: var(--muted); font-size: 8px; letter-spacing: .13em; }

.observation-control--luxury { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,340px); gap: 18px; align-items: end; padding: 30px 34px 34px; }
.observation-field label { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 9px; }
.observation-field label span { font-size: 15px; font-weight: 700; }
.observation-field label small { color: var(--muted); font: 700 9px/1.2 "Segoe UI","Helvetica Neue",Arial,sans-serif; letter-spacing: .16em; }
.select-shell { position: relative; }
.select-shell::after { content: "⌄"; position: absolute; top: 50%; right: 17px; transform: translateY(-54%); color: var(--accent); pointer-events: none; }
.observation-control--luxury select { width: 100%; min-height: 64px; appearance: none; padding: 0 48px 0 17px; border: 1px solid rgba(199,224,255,.25); border-radius: 8px; background: rgba(5,10,15,.68); color: #f4f8fb; font-weight: 650; cursor: pointer; transition: border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.observation-control--luxury select:hover,.observation-control--luxury select:focus { border-color: rgba(111,222,230,.62); background: rgba(11,21,28,.86); box-shadow: 0 0 0 3px rgba(111,222,230,.07),0 0 24px rgba(71,207,220,.07); }

.observation-button--hero { position: relative; overflow: hidden; min-height: 76px; display: grid; grid-template-columns: 40px 1fr 26px; gap: 11px; align-items: center; padding: 10px 17px; border: 1px solid rgba(135,240,241,.82); border-radius: 9px; background: linear-gradient(135deg,#c7f4f2 0%,#9be4eb 100%); color: #071015; box-shadow: 0 0 0 1px rgba(176,250,251,.08),0 11px 32px rgba(32,174,190,.15),inset 0 1px 0 rgba(255,255,255,.7); transition: transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.observation-button--hero::before { content: ""; position: absolute; top: -100%; left: -35%; width: 28%; height: 300%; transform: rotate(18deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transition: left .55s ease; }
.observation-button--hero:hover { transform: translateY(-3px); filter: none; box-shadow: 0 0 0 1px rgba(176,250,251,.12),0 17px 42px rgba(32,174,190,.22),0 0 32px rgba(83,218,227,.12),inset 0 1px 0 rgba(255,255,255,.78); }
.observation-button--hero:hover::before { left: 115%; }
.observation-button__symbol { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(4,36,43,.18); border-radius: 50%; font-size: 16px; }
.observation-button__copy { display: grid; justify-items: start; }
.observation-button__copy strong { font-size: 18px; letter-spacing: .05em; }
.observation-button__copy small { margin-top: 1px; font: 800 8px/1.2 "Segoe UI","Helvetica Neue",Arial,sans-serif; letter-spacing: .17em; opacity: .65; }
.observation-button__arrow { justify-self: end; font-size: 20px; }
.observation-button--hero.is-activated { animation: observationButtonPulse .42s ease; }

.observation-divider { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 34px; }
.observation-divider span { height: 1px; background: linear-gradient(90deg,transparent,rgba(111,222,230,.28)); }
.observation-divider span:last-child { transform: scaleX(-1); }
.observation-divider i { width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid rgba(111,222,230,.52); }

.observation-result--luxury { position: relative; z-index: 1; margin: 30px 34px 34px; overflow: hidden; border: 1px solid rgba(199,224,255,.2); border-radius: 9px; background: radial-gradient(circle at 82% 8%,rgba(111,222,230,.06),transparent 23rem),rgba(3,8,13,.5); box-shadow: inset 0 0 45px rgba(0,0,0,.18); transition: border-color .3s ease,box-shadow .3s ease,background .3s ease; }
.observation-result--luxury::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; background: repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px); }
.observation-result--luxury .observation-result__top { position: relative; padding: 18px 22px; background: rgba(255,255,255,.012); }
.observation-result__state { display: flex; align-items: center; gap: 12px; }
.observation-result__state .signal { flex: 0 0 auto; }
.observation-result__state small,.observation-result__serial { color: var(--muted); font: 650 8px/1.3 "Segoe UI","Helvetica Neue",Arial,sans-serif; letter-spacing: .15em; }
.observation-result__state .observation-result__status { margin: 0 0 2px; }
.observation-result--luxury .observation-result__body { position: relative; padding: 42px 36px 36px; }
.observation-result--luxury .observation-result__body h2 { max-width: 760px; color: #fff; font-size: clamp(32px,5vw,50px); line-height: 1.45; letter-spacing: .055em; text-wrap: balance; }
.observation-result__rule { width: 84px; height: 2px; margin: 20px 0; background: linear-gradient(90deg,var(--accent),rgba(199,224,255,.06)); box-shadow: 0 0 10px rgba(111,222,230,.15); }
.observation-result--luxury .observation-result__body > p:last-child { max-width: 790px; margin: 0; color: #e0e7ef; font-size: clamp(17px,2vw,19px); line-height: 2.05; letter-spacing: .025em; }
.observation-result--luxury .observation-meta { position: relative; padding: 0 36px 34px; gap: 10px; }
.observation-result--luxury .observation-meta > div { padding: 16px 17px; border: 1px solid rgba(199,224,255,.13); border-radius: 6px; background: rgba(199,224,255,.024); }
.observation-result--luxury .observation-meta > div + div { border-left: 1px solid rgba(199,224,255,.13); }
.observation-meta dt small { margin-left: 6px; color: rgba(183,192,204,.65); font: 700 8px/1 "Segoe UI","Helvetica Neue",Arial,sans-serif; letter-spacing: .13em; }
.observation-result--luxury .observation-meta dd { color: #f0f5fa; font-size: 16px; }
.observation-result__footer { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 11px 20px; border-top: 1px solid rgba(199,224,255,.085); color: rgba(183,192,204,.68); font: 650 8px/1.4 "Segoe UI","Helvetica Neue",Arial,sans-serif; letter-spacing: .14em; }

.observation-caution { position: relative; z-index: 1; margin: 0 34px 34px; padding: 17px 19px; border-left: 2px solid rgba(199,224,255,.3); background: linear-gradient(90deg,rgba(199,224,255,.025),transparent); }
.observation-caution strong { color: #eef4fa; font-size: 14px; }
.observation-caution p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.85; }

.observation-result.is-normal { border-color: rgba(120,210,235,.32); }
.observation-result.is-caution { border-color: rgba(226,196,109,.45); box-shadow: 0 0 35px rgba(226,196,109,.055),inset 0 0 45px rgba(0,0,0,.18); }
.observation-result.is-caution .signal { background: #e8cf85; box-shadow: 0 0 15px rgba(232,207,133,.55); }
.observation-result.is-caution .observation-result__status { color: #e8cf85; }
.observation-result.is-anomaly { border-color: rgba(167,129,255,.55); background: radial-gradient(circle at 80% 10%,rgba(149,110,255,.105),transparent 23rem),repeating-linear-gradient(0deg,rgba(199,224,255,.014) 0 1px,transparent 1px 5px),rgba(3,8,13,.58); box-shadow: 0 0 44px rgba(149,110,255,.09),inset 0 0 50px rgba(0,0,0,.2); }
.observation-result.is-anomaly .signal { background: #b79aff; box-shadow: 0 0 17px rgba(183,154,255,.68); }
.observation-result.is-anomaly .observation-result__status { color: #c8b4ff; }
.observation-result.is-unknown { border-color: rgba(183,192,204,.2); filter: saturate(.75); }

.observation-result.is-revealing .observation-result__body h2 { animation: recordReveal .5s cubic-bezier(.2,.7,.2,1); }
.observation-result.is-revealing .observation-result__body > p:last-child { animation: recordTextReveal .65s cubic-bezier(.2,.7,.2,1); }
.observation-result.is-revealing .observation-result__rule { animation: ruleReveal .55s ease; transform-origin: left center; }

@keyframes observationButtonPulse { 50% { transform: scale(.985); box-shadow: 0 0 36px rgba(83,218,227,.28); } }
@keyframes recordReveal { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes recordTextReveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes ruleReveal { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

@media (max-width:900px) {
  .world-layout { grid-template-columns: 1fr; }
  .world-index { position: static; }
  .world-index nav { grid-template-columns: repeat(3,1fr); }
  .observation-control--luxury { grid-template-columns: 1fr; }
  .observation-button--hero { width: 100%; }
}

@media (max-width:620px) {
  .world-index nav { grid-template-columns: repeat(2,1fr); }
  .world-entry { padding: 26px 19px 28px; }
  .entry-head { gap: 12px; margin-bottom: 20px; padding-bottom: 16px; }
  .entry-head h2 { padding-left: 14px; font-size: 29px; }
  .entry-head .tag { min-height: 27px; padding: 3px 8px; font-size: 10px; }
  .world-entry .lead { font-size: 18px; }
  .observation-terminal--luxury .observation-terminal__header { padding: 25px 20px 22px; }
  .count-box--observation { min-width: 0; width: 100%; }
  .observation-control--luxury { padding: 24px 20px 27px; }
  .observation-control--luxury select { min-height: 62px; font-size: 16px; }
  .observation-button--hero { min-height: 78px; grid-template-columns: 38px 1fr 24px; }
  .observation-result--luxury { margin: 24px 20px 27px; }
  .observation-result--luxury .observation-result__top { align-items: flex-start; gap: 12px; }
  .observation-result__serial { display: none; }
  .observation-result--luxury .observation-result__body { padding: 32px 22px 28px; }
  .observation-result--luxury .observation-result__body h2 { font-size: clamp(29px,9vw,38px); }
  .observation-result--luxury .observation-result__body > p:last-child { font-size: 17px; }
  .observation-result--luxury .observation-meta { grid-template-columns: 1fr; padding: 0 22px 27px; }
  .observation-result--luxury .observation-meta > div + div { border-top: 1px solid rgba(199,224,255,.13); }
  .observation-caution { margin: 0 20px 27px; }
}

@media (max-width:420px) {
  .world-index nav { grid-template-columns: 1fr; }
  .entry-head { display: grid; }
  .entry-head .tag { justify-self: start; }
  .entry-head h2 { font-size: 27px; }
  .observation-terminal__ornament { height: 38px; }
  .observation-button--hero { padding-left: 13px; padding-right: 13px; }
  .observation-button__copy strong { font-size: 17px; }
}