/* 発見録: 天文台を拠点にしたゲーム画面。本文の可読性は既存の紙面を使う。 */
:root {
  --ink: #fff8e8;
  --muted: #c8d6d8;
  --line: #486f7c;
  --bg: #071522;
  --panel: #102d3a;
  --gold: #ffd775;
  --aqua: #69e4db;
  --pink: #ff929e;
}
body {
  background:
    radial-gradient(circle at 90% 9%, #125e6b 0, transparent 26%),
    radial-gradient(circle at 25% 65%, #152a50 0, transparent 34%),
    linear-gradient(145deg, #06121f, #092032 55%, #06121e);
}
.sidebar {
  width: 222px;
  background:
    radial-gradient(circle at 50% 4%, #2b5e65 0, transparent 33%),
    linear-gradient(180deg, #091b2a, #07121f);
  border-right: 2px solid #437078;
  box-shadow: 12px 0 34px #020c1ba3, inset -1px 0 #a7d8bc2b;
}
.brand { padding-bottom: 34px; }
.brand-mark {
  width: 43px;
  height: 43px;
  transform: rotate(-9deg);
  border: 2px solid #ffdf86;
  border-radius: 10px 3px 10px 3px;
  background: linear-gradient(145deg, #235d60, #0c273c);
  color: #fff2bd;
  box-shadow: 4px 4px 0 #17434e, 0 0 24px #c6f26945;
}
.brand strong { color: #fff9e9; text-shadow: 0 2px 12px #7fd3c667; }
.sidebar-label { color: #82d4ce; }
.nav-item {
  border-radius: 8px 14px 14px 8px;
  border-left: 3px solid transparent;
  color: #d8e9e8;
}
.nav-item:hover, .nav-item.is-active {
  background: linear-gradient(90deg, #24665f, #1c4653 62%, #123340);
  border-color: #7cf4b9;
  box-shadow: 0 5px 18px #0007, inset 0 1px #ffffff2d;
}
.nav-item.is-active > span:first-child { color: #e7fc9b; filter: drop-shadow(0 0 8px #c5fe84); }
.sidebar-guide {
  border: 1px solid #a68856;
  background: linear-gradient(135deg, #263d47, #122631);
  box-shadow: inset 0 1px #ffe2a54d, 0 12px 22px #0006;
}
.guide-sigil { color: #ffe58a; }
.topbar {
  height: 72px;
  background: linear-gradient(90deg, #0c2531ed, #0d2836e8);
  border-bottom: 1px solid #698e87;
  box-shadow: 0 8px 24px #04131cb3;
}
.topbar-title small { color: #9aefd9; }
.topbar-title strong { font-size: 15px; color: #fff9e7; }
.stat-chip, .level-chip, .audio-settings summary {
  border-color: #628d89;
  background: linear-gradient(180deg, #23444e, #13313e);
  box-shadow: inset 0 1px #ffffff25, 0 3px 0 #071c27;
}
.stat-chip > span { color: #ffe48b; filter: drop-shadow(0 0 5px #ffd77b8a); }
.level-chip {
  color: #173334;
  border-color: #f7e891;
  background: linear-gradient(180deg, #e7ffa6, #a9ef6a);
  box-shadow: inset 0 1px #fff, 0 3px 0 #5e8c4f;
}
main { width: min(1450px, 100%); padding-top: 28px; }
.button {
  border-radius: 10px;
  letter-spacing: .01em;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.button-primary {
  border-color: #fff6b5;
  color: #12343b;
  background: linear-gradient(180deg, #f9ffb4 0, #c3f06d 55%, #93d849 100%);
  box-shadow: inset 0 2px #fff9, 0 5px 0 #557b3d, 0 13px 24px #091f1da3;
}
.button-primary:hover:not(:disabled) {
  box-shadow: inset 0 2px #fff9, 0 6px 0 #557b3d, 0 16px 32px #8ddd6559;
}
.button-ghost {
  border-color: #9bc8c2;
  background: linear-gradient(180deg, #214a54e8, #12333eea);
  box-shadow: inset 0 1px #ffffff22, 0 4px 0 #0a2430;
}
.hero {
  min-height: 464px;
  border: 2px solid #c9b67a;
  border-radius: 20px;
  background: #091726;
  box-shadow: 0 21px 50px #020b19c7, 0 0 0 5px #1f58634d;
}
.hero::before {
  inset: 7px;
  border-color: #fbdea96e;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #0430418a;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #071322ad 0, #07132230 48%, transparent 80%), linear-gradient(0deg, #0815205e, transparent 30%);
}
.hero-image {
  background: url('./assets/observatory-hero.webp') center right / cover no-repeat;
  transform: scale(1.006);
}
.hero-content {
  max-width: 640px;
  padding: 53px clamp(28px, 4vw, 60px) 43px;
}
.hero-kicker {
  padding: 7px 14px;
  border-color: #baffab;
  border-radius: 99px;
  background: #11433fcc;
  color: #ddffb2;
  box-shadow: 0 0 17px #9de87050, inset 0 1px #ffffff3d;
}
.hero h1 {
  max-width: 600px;
  margin: 23px 0 17px;
  font-size: clamp(39px, 4.4vw, 66px);
  font-weight: 950;
  line-height: 1.21;
  letter-spacing: -.055em;
  text-shadow: 0 4px 0 #061528, 0 8px 22px #030d1d;
}
.hero h1 em {
  color: #e2ff8b;
  text-shadow: 0 2px 0 #466e46, 0 0 20px #c4ef7199;
}
.hero p {
  max-width: 540px;
  color: #fffaf0;
  font-size: 15px;
  line-height: 1.76;
  text-shadow: 0 2px 8px #06131d;
}
.hero-facts { gap: 8px; margin: 27px 0 25px; }
.hero-facts span {
  min-width: 112px;
  min-height: 50px;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid #9abcb0a8;
  border-radius: 9px;
  background: #0b2835b8;
  box-shadow: inset 0 1px #ffffff2e;
}
.hero-facts strong { color: #fff6c8; font-size: 24px; }
.hero-facts small { color: #daf6df; }
.hero-actions { gap: 12px; }
.hero-actions .button { min-height: 54px; font-size: 15px; }
.hero-stamp {
  right: 19px;
  top: 18px;
  border-color: #ffeeb7bd;
  color: #fff4c2;
  background: #0c2c38b5;
  box-shadow: 0 0 0 4px #0f394b87, 0 0 28px #ffd67b69;
}
.study-entry {
  margin-top: 29px;
  border: 2px solid #b7ad70;
  background:
    linear-gradient(90deg, #12353ef2 0, #12353edb 62%, #12353e80 100%),
    url('./assets/observatory-hero.webp') 82% 78% / cover no-repeat;
  box-shadow: 0 13px 30px #020b17bd, inset 0 1px #fff4;
}
.study-entry h2 { color: #f8edac; font-size: clamp(23px, 2.4vw, 32px); }
.study-entry-action .button { white-space: nowrap; }
.study-entry-discovery { border-color: #b3bf9a9e; }
.difficulty-panel {
  position: relative;
  border: 2px solid #819d92;
  background: linear-gradient(155deg, #163e49, #0b2939 72%);
  box-shadow: 0 15px 28px #02121eb3, inset 0 1px #ffffff31;
}
.difficulty-panel::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 6px;
  border: 1px solid #9cd9b037;
  border-radius: 11px;
}
.difficulty-options { gap: 11px; }
.difficulty-options button {
  min-height: 138px;
  padding: 17px 15px;
  border: 1px solid #74918d;
  border-radius: 13px;
  background: linear-gradient(155deg, #204954, #102c3b);
  box-shadow: inset 0 1px #ffffff29, 0 5px 0 #071f2c;
}
.difficulty-options button[aria-pressed="true"] {
  background: linear-gradient(155deg, #366760, #1a4550);
  box-shadow: inset 0 1px #ffffff5c, 0 6px 0 #0b313b, 0 0 24px color-mix(in srgb, var(--tone) 25%, transparent);
}
.difficulty-options button::before {
  position: absolute;
  top: 13px;
  right: 14px;
  font-size: 25px;
  line-height: 1;
  color: var(--tone);
  text-shadow: 0 0 13px var(--tone);
}
.difficulty-options button[data-difficulty="junior"]::before { content: "✦"; }
.difficulty-options button[data-difficulty="basic"]::before { content: "◈"; }
.difficulty-options button[data-difficulty="standard"]::before { content: "◎"; }
.difficulty-options button[data-difficulty="advanced"]::before { content: "✶"; }
.difficulty-options button[aria-pressed="true"]::after { top: auto; bottom: 12px; }
.difficulty-options strong { font-size: 20px; }
.difficulty-options small { font-size: 12px; }
.difficulty-count { align-self: flex-start; font-size: 12px; }
.challenge-panel {
  border: 2px solid #d0a96a;
  background:
    radial-gradient(circle at 90% 12%, #f3b16680, transparent 34%),
    linear-gradient(145deg, #55463d, #253641 65%, #122938);
  box-shadow: inset 0 1px #fff5, 0 13px 27px #020a16a8;
}
.challenge-symbol { color: #ffe69e; filter: drop-shadow(0 0 12px #ffe186); }
.record-panel, .how-panel {
  background: linear-gradient(150deg, #193c47, #0d2937);
  box-shadow: inset 0 1px #ffffff24, 0 9px 20px #020b17a1;
}
.page-heading {
  border: 2px solid #afaa79;
  background: linear-gradient(90deg, #173b47e8, #102a37b3), url('./assets/observatory-hero.webp') center 58% / cover;
  box-shadow: 0 13px 27px #020b17a1;
}
.review-item, .stat-tile, .stats-era, .history-item, .empty-state {
  background: linear-gradient(150deg, #1b414e, #122e3e);
  border-color: #658888;
}
.toast { background: #1a5b61; border-color: #a9f3db; }
@media (max-width: 850px) {
  .sidebar { width: 70px; }
  .hero { min-height: 438px; }
  .hero-content { max-width: 590px; padding: 45px 30px; }
  .hero h1 { font-size: clamp(36px, 5vw, 55px); }
}
@media (max-width: 620px) {
  .sidebar {
    width: 100%;
    height: 66px;
    border-right: 0;
    border-top: 1px solid #6ea69d;
    background: #0a2631f5;
    box-shadow: 0 -9px 22px #03101c9e;
  }
  .side-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .nav-item { border: 1px solid transparent; border-radius: 10px; font-size: 10px; }
  .nav-item:hover, .nav-item.is-active { border-color: #81edbc; }
  .nav-item > span:first-child { font-size: 21px; }
  .topbar { height: 59px; }
  .mobile-brand .brand-mark { width: 31px; height: 31px; }
  main { padding: 13px 13px 92px; }
  .hero {
    min-height: 0;
    border-radius: 17px;
  }
  .hero-image {
    background-image: url('./assets/observatory-hero.webp');
    background-position: 71% top;
    background-size: auto 300px;
    background-color: #081926;
    background-repeat: no-repeat;
  }
  .hero::after {
    background: linear-gradient(180deg, transparent 0, #0818258a 140px, #081825 260px, #081825 100%);
  }
  .hero-content { max-width: none; padding: 188px 20px 25px; }
  .hero-kicker { font-size: 10px; }
  .hero h1 { font-size: clamp(31px, 8.6vw, 43px); margin: 13px 0 12px; }
  .hero p { font-size: 13px; }
  .hero-facts { flex-wrap: wrap; gap: 7px; margin: 19px 0; }
  .hero-facts span { min-width: 0; min-height: 43px; padding: 6px 8px; }
  .hero-facts strong { font-size: 19px; }
  .hero-facts small { font-size: 10px; }
  .hero-actions .button { min-height: 49px; font-size: 12px; }
  .hero-stamp { display: none; }
  .study-entry { display: block; padding: 20px; }
  .study-entry-action { align-items: stretch; }
  .difficulty-panel { padding: 17px; }
  .difficulty-options button { min-height: 118px; padding: 12px; }
  .difficulty-options button::before { font-size: 19px; top: 10px; right: 10px; }
  .difficulty-options strong { font-size: 16px; }
  .difficulty-options small { font-size: 11px; }
  .difficulty-options button[aria-pressed="true"]::after { bottom: 8px; }
  .page-heading { padding: 26px 22px; }
}
@media (max-width: 360px) {
  .hero-content { padding-top: 165px; }
  .hero h1 { font-size: 27px; letter-spacing: -.07em; }
  .hero-facts span { flex: 1; flex-direction: column; align-items: flex-start; gap: 0; }
  .hero-actions .button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .difficulty-options button { transition: none; }
}