/* ============================================================
   Lethonaut — 星図ページ (Phase 2c v1.4)
   円形星図 + パン/ズーム + LOD + 豆知識カード.
   CSS 変数は static/css/theme.css の --star / --sky 系を参照.
   ============================================================ */

/* 星図ページは narrow より広い独自幅 (振り返り系よりさらに広い、
   星図フレームの見応えを優先。max-width は base.html の他 CSS より
   後で読まれるため上書きされない). */
.app-content--starmap {
  max-width: 1040px;
  margin: 0 auto;
}

.starmap-polaris-record {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.starmap-polaris-record .ph {
  color: var(--polaris);
}
.starmap-polaris-record time {
  margin-left: auto;
  font-family: var(--font-mono);
}

/* ============================================================
   Viewer (SVG コンテナ)
   ============================================================ */
.starmap-viewer {
  margin: var(--space-4) 0 var(--space-6);
}

.starmap-svg-wrap {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.starmap-svg-wrap.dragging {
  cursor: grabbing;
}

/* 全画面トグル(⤢ ボタンで有効化): ブラウザ枠内で最大化.
   Fullscreen API は使わず CSS オーバーレイで実装(Esc やブラウザボタンでの
   離脱時のステート齟齬を避ける、静けさに合わせて遷移アニメも入れない). */
.starmap-svg-wrap.expanded {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  z-index: 900;
  background: var(--sky);
}

/* 全画面時は丸い枠(円形 clip + 円形の背景/境界)だけ取り払う.
   星と文字のサイズは通常時と同じ(SVG の meet 描画スケールを維持).
   sky-guides の同心円は「星図の背景」として残す(北極星中心のガイド). */
.starmap-svg-wrap.expanded svg [clip-path] {
  clip-path: none;
}
.starmap-svg-wrap.expanded .sky-bg,
.starmap-svg-wrap.expanded .sky-boundary,
/* 四季ラベルは元の「円の縁」の位置に描かれるため、円を取り払った全画面時に
   残ると中心に円状の文字列だけ浮いて見えて違和感が強い。全画面時は非表示. */
.starmap-svg-wrap.expanded .cardinal-labels {
  display: none;
}

.starmap-svg-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 星図の背景 (円内は夜空、モック v3 で確定) */
.sky-bg {
  fill: var(--sky);
}
.sky-guide {
  fill: none;
  stroke: var(--sky-guide);
  stroke-width: 0.5;
}
.sky-boundary {
  stroke: var(--sky-boundary);
  stroke-width: 1;
  fill: none;
}

/* 星 */
.star {
  fill: var(--star);
}
.star.polaris {
  fill: var(--polaris);
}
.star-glow {
  fill: var(--star-glow);
  pointer-events: none;
}
.polaris-glow-outer {
  fill: var(--polaris-glow);
  opacity: 0.32;
}
.polaris-glow-mid {
  fill: var(--polaris-glow);
  opacity: 1;
}
.recent-glow {
  fill: var(--star-glow);
  opacity: 0.55;
}
.bright-glow {
  fill: var(--star-glow);
  opacity: 0.5;
}
.star-hit {
  fill: transparent;
  /* SVG のデフォルト pointer-events は visiblePainted のため fill:transparent
     ではクリックを拾えない。all を明示して透明でも hit test を通す。 */
  pointer-events: all;
  cursor: pointer;
}
.star-group:focus-within .star,
.star-group:hover .star {
  filter: brightness(1.2);
}
/* 一覧クリック or 星クリックでハイライト: 対応する星を明るく大きく光らせる.
   drop-shadow は SVG scale で小さくなる傾向があるため、色を不透明の
   polaris に統一して 3 段重ねで確実にした. 星径は JS 側で 1.8 倍にブースト. */
.star-group.highlighted .star {
  fill: var(--polaris);
  filter:
    drop-shadow(0 0 3px var(--polaris))
    drop-shadow(0 0 8px var(--polaris))
    drop-shadow(0 0 18px var(--polaris));
}

/* 星座線 (両端獲得済みのみ、vector-effect で太さ固定) */
.star-line {
  stroke: var(--star-line);
  stroke-width: 0.45;
  fill: none;
}
.star-line.complete {
  stroke: var(--star-line-complete);
  stroke-width: 0.6;
}

/* 背景微光星 */
.bg-star {
  fill: var(--fg-muted);
  opacity: 0.35;
  pointer-events: none;
}

/* ラベル (paint-order でハロー効果 = 星や線と重なっても読める) */
.constellation-label,
.star-name-label,
.cardinal {
  font-family: var(--font-sans);
  paint-order: stroke fill;
  stroke: var(--sky);
  stroke-width: 3;
  stroke-linejoin: round;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.constellation-label {
  fill: var(--constellation-label);
  font-size: 12px;
  font-weight: 500;
}
.constellation-label.complete {
  fill: var(--constellation-label-complete);
}
/* カテゴリ名(日記/プロフィール等): 星座名の上にルビ風に配置.
   .complete による黄色は継承しない(独立の fill 指定で覆う). */
.constellation-category {
  fill: var(--field-label);
  font-size: 8px;
  font-weight: 400;
  opacity: 0.65;
}
.star-name-label {
  fill: var(--star-name-label);
  font-size: 11px;
  transform: translateY(14px); /* 星の下 */
}
.cardinal {
  fill: var(--field-label);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .constellation-label,
  .star-name-label {
    transition: none;
  }
}

/* ============================================================
   ズームコントロール (右下フローティング)
   ============================================================ */
.starmap-zoom-controls {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: rgba(22, 19, 15, 0.65);
  backdrop-filter: blur(4px);
  padding: 4px;
  border-radius: var(--radius-md);
}
.starmap-zoom-btn {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(163, 156, 150, 0.25);
  background: rgba(22, 19, 15, 0.4);
  color: var(--star-name-label);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background var(--transition-fast);
}
.starmap-zoom-btn:hover,
.starmap-zoom-btn:focus-visible {
  background: rgba(163, 156, 150, 0.15);
}
.starmap-zoom-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* ズームインジケータ (左下) */
.starmap-zoom-indicator {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--star-name-label);
  background: rgba(22, 19, 15, 0.55);
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
  pointer-events: none;
  font-family: var(--font-mono);
}
.starmap-zoom-indicator .muted {
  font-family: var(--font-sans);
  color: var(--field-label);
}

/* ============================================================
   豆知識カード (下部固定、モーダルなし)
   ============================================================ */
.starmap-card {
  position: fixed;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  width: min(760px, calc(100vw - var(--space-4)));
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  /* 全画面時の wrap.expanded (z-index 900) の上に重ねる */
  z-index: 950;
  padding: var(--space-4) var(--space-5);
}
.starmap-card[hidden] {
  display: none;
}
.starmap-card-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.starmap-card-close:hover,
.starmap-card-close:focus-visible {
  background: var(--hover-overlay);
}
.starmap-card-close:focus-visible {
  outline: 2px solid var(--focus-ring);
}
.starmap-card-header {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-2);
  padding-right: var(--space-8);
}
.starmap-card-icon {
  font-size: 22px;
  color: var(--polaris);
  margin-top: 2px;
}
.starmap-card-star-name {
  font-size: var(--text-lg);
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--fg-base);
}
.starmap-card-badge-label {
  font-size: var(--text-sm);
  margin-top: 2px;
}
.starmap-card-description {
  font-size: var(--text-sm);
  color: var(--fg-base);
  line-height: 1.6;
  margin-top: var(--space-2);  /* バッジラベルとの間に軽い余白 */
}
/* Phase 2d v5: バッジ説明と星の豆知識を 2 セクションに分離.
   バッジ説明は常時、豆知識は登録済み星のみ表示 (JS 側で trivia-section を hidden).
   豆知識は副情報として fg-muted + border-left 2px で視覚区分 (斜体は日本語で
   可読性が下がるため避ける、[[feedback-css-class-collision]] 遵守で衝突確認済み). */
.starmap-card-section {
  margin-top: var(--space-3);
}
.starmap-card-section-label {
  /* h4 タグの browser デフォルト margin と font-weight bold をリセット
     (a11y のため h4、見た目は他の muted テキストと揃える) */
  font-size: var(--text-xs);
  font-weight: normal;
  color: var(--fg-muted);
  margin: 0 0 var(--space-1) 0;
  letter-spacing: 0.02em;
}
.starmap-card-trivia {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  border-left: 2px solid var(--border);
  padding-left: var(--space-3);
  line-height: 1.7;
}
.starmap-card-meta {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}

/* ============================================================
   獲得済み一覧 (JS 無効時の主経路)
   ============================================================ */
.starmap-list {
  margin-top: var(--space-8);
}
.starmap-list-group + .starmap-list-group {
  margin-top: var(--space-5);
}
.section-subtitle-sub {
  font-size: var(--text-sm);
  font-weight: 500;
  margin: 0 0 var(--space-2);
}
.starmap-star-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.starmap-list-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon title badge"
    "icon meta  meta";
  gap: 2px var(--space-3);
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg-base);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.starmap-list-item > .ph {
  grid-area: icon;
  color: var(--polaris);
  font-size: 18px;
}
.starmap-list-title {
  grid-area: title;
  font-weight: 500;
}
.starmap-list-badge {
  grid-area: badge;
  font-size: var(--text-sm);
  text-align: right;
}
.starmap-list-meta {
  grid-area: meta;
  font-size: var(--text-xs);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.starmap-list-item:hover,
.starmap-list-item:focus-visible {
  border-color: var(--border-strong);
}
.starmap-list-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.starmap-credit {
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  text-align: center;
}

/* ============================================================
   モバイル (375px 相当) 調整
   ============================================================ */
@media (max-width: 480px) {
  .starmap-list-item {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "icon badge"
      "icon meta";
  }
  .starmap-list-badge {
    text-align: left;
  }
  .starmap-zoom-btn {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }
  .starmap-card {
    padding: var(--space-3) var(--space-4);
  }
  .starmap-polaris-record time {
    display: block;
    margin-left: 0;
  }
}

/* モバイル/狭いビューポート: 豆知識カードとズームコントロールの下端が
   下中央 vs 右下で衝突する. カード表示中は zoom-controls をカードの
   高さ分上に退避して、操作を潰さず視覚的にも干渉しない位置に. */
@media (max-width: 640px) {
  .starmap-card:not([hidden]) ~ .starmap-svg-wrap .starmap-zoom-controls,
  .starmap-svg-wrap:has(.starmap-card:not([hidden])) .starmap-zoom-controls {
    display: none;
  }
  /* :has() 非対応ブラウザ用のフォールバック: JS 側で wrap に
     .card-open class を付ける形にも対応 */
  .starmap-svg-wrap.card-open .starmap-zoom-controls,
  .starmap-svg-wrap.card-open .starmap-zoom-indicator {
    opacity: 0;
    pointer-events: none;
  }
}