/* 競技セブンスカイズ — 大会プログラムと日食の光冠。
   座標・寸法・書体・本文組版・キット配置はランタイムの骨格を使用する。
   和文はDOMの文言を表示し、ここでは英字の装飾のみを添える。 */

:root {
  --design-navy: #131c2e;
  --design-steel: #8b95a5;
  --design-gold: #e8b23a;
  --design-white: #eef2f7;
  --design-black: #0a0e16;
  --frame-bg: rgba(10, 14, 22, 0.94);
  --frame-border: rgba(139, 149, 165, 0.62);
  --text-color: #eef2f7;
  --accent: #e8b23a;
  --panel-bg: rgba(19, 28, 46, 0.97);
}

/* TOP: 静穏域の文字側だけを弱く補助する局所グラデーション。 */
#surface-top::before {
  content: "";
  position: absolute;
  left: calc(var(--kv-top-title-x, 170px) - 50px);
  top: calc(var(--kv-top-title-y, 120px) - 64px);
  width: 1280px;
  height: 360px;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 18% 30%, rgba(10, 14, 22, 0.23), rgba(10, 14, 22, 0.08) 50%, transparent 74%);
}

#top-panel,
#end-panel {
  color: var(--design-white);
}

/* #244: ジャンルラベルの文言は骨格定数kv.top.badge.text(調整盤「バッジ文字」)へ移管——content直書き禁止 */
#top-badge {
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--design-white);
  text-shadow: 0 2px 4px var(--design-black);
}

#top-title,
#end-title {
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--design-white);
  text-shadow: 0 3px 8px rgba(10, 14, 22, 0.56);
}

/* #244: SEVEN SKIES・飾り線・和文副題は独立要素(骨格定数)へ分離——::after直書きを全廃 */
#top-subtitle, #end-subtitle,
#top-title-en, #end-title-en {
  color: var(--design-white);
  text-shadow: 0 2px 5px rgba(10, 14, 22, 0.6);
  -webkit-text-stroke: var(--kv-outline-text, 3px) var(--design-black);
  paint-order: stroke fill;
}
:root { --kv-rule-color: var(--design-gold); }

#top-catch {
  font-weight: 600;
  letter-spacing: 0.025em;
  color: var(--design-white);
  text-shadow: 0 2px 5px rgba(10, 14, 22, 0.6);
}

/* 話番号のみのチップ。斜め裁ち落としを全操作面で共有する。 */
.uibtn,
#top-links a,
#top-links button {
  color: var(--design-white);
  background: rgba(19, 28, 46, 0.9);
  border-color: var(--design-steel);
  border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: inset 0 0 0 1px rgba(238, 242, 247, 0.16), inset 0 3px 0 rgba(238, 242, 247, 0.08);
  writing-mode: horizontal-tb;
}

.uibtn:hover,
#top-links a:hover,
#top-links button:hover {
  color: var(--design-white);
  background: rgba(19, 28, 46, 0.98);
  border-color: var(--design-gold);
  box-shadow: inset 0 0 0 2px var(--design-gold);
}

.uibtn:focus-visible,
#top-links a:focus-visible,
#top-links button:focus-visible {
  outline: 3px solid var(--design-gold);
  outline-offset: 4px;
  box-shadow: inset 0 0 0 3px var(--design-gold);
}

.ep-btn {
  background: rgba(10, 14, 22, 0.88);
  border-color: rgba(238, 242, 247, 0.65);
  font-weight: 600;
}

.ep-btn .ep-no {
  color: var(--design-white);
  letter-spacing: 0.06em;
}

/* セーブがある時は「続きから」を唯一の明色面にする。 */
#top-links #btn-start:not(.secondary),
#top-links .primary,
#end-source {
  color: var(--design-black);
  background: var(--design-gold);
  border-color: var(--design-gold);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: inset 0 3px 0 rgba(238, 242, 247, 0.48), inset 0 -3px 0 rgba(10, 14, 22, 0.2);
  text-shadow: none;
  -webkit-text-stroke: 0;
}

#top-links #btn-start:not(.secondary):hover,
#top-links .primary:hover,
#end-source:hover {
  color: var(--design-black);
  background: var(--design-gold);
  border-color: var(--design-white);
  box-shadow: inset 0 0 0 3px var(--design-white), inset 0 -5px 0 rgba(10, 14, 22, 0.18);
}

#top-links .secondary {
  color: var(--design-white);
  background: rgba(10, 14, 22, 0.72);
  border-color: var(--design-steel);
  opacity: 1;
  box-shadow: inset 0 0 0 1px rgba(139, 149, 165, 0.3);
}

#top-info {
  color: var(--design-white);
  text-shadow: 0 2px 4px rgba(10, 14, 22, 0.68);
}

#top-info > :not(:first-child) {
  border-left-color: var(--design-steel);
}

#top-author {
  opacity: 1;
  font-weight: 600;
}

#top-info button,
#top-info a {
  opacity: 1;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

#top-info button:hover,
#top-info a:hover,
#top-info button:focus-visible,
#top-info a:focus-visible {
  color: var(--design-gold);
  text-decoration-color: var(--design-gold);
}

#top-info::after {
  /* #244: 文言は骨格定数kv.top.info.hintText(調整盤「操作ヒント」)から */
  content: var(--kv-top-info-hint, "");
  margin-left: 32px;
  color: var(--design-white);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.18em;
}

/* ED: 読了文言は空のまま、骨格の読了位置へ光冠の英字バッジ。 */
/* #244: 読了文言はデータ正本(作品設定endMessage)+要素#end-message(調整盤と結線済み)へ移管。
   光冠の意匠は要素側スタイルで維持 */
#end-message {
  padding: 8px 0 8px 72px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.25;
  color: var(--design-gold);
  background: radial-gradient(circle at 22px 36%, var(--design-black) 0 15px, transparent 16px), radial-gradient(circle at 34px 50%, transparent 0 18px, var(--design-gold) 19px 22px, transparent 23px);
  text-shadow: 0 2px 5px var(--design-black);
}

#end-source {
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

#btn-end-top {
  color: var(--design-white);
  background: rgba(10, 14, 22, 0.72);
  border-color: var(--design-steel);
  font-weight: 500;
}

#end-credits {
  color: var(--design-white);
  line-height: 1.6;
  text-shadow: 0 2px 4px rgba(10, 14, 22, 0.72);
}

#end-credits::first-line {
  font-weight: 700;
  color: var(--design-white);
}

/* ポップアップ枠・仕切り・つまみ・閉じる画像はruntimeの6部品契約で読む。 */
.panel {
  color: var(--design-white);
  border-color: var(--design-steel);
  border-radius: 0;
  background: var(--panel-bg);
  box-shadow: inset 0 0 48px rgba(238, 242, 247, 0.035);
}

.popup-header h2 {
  color: var(--design-gold);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.popup-header h2::before {
  background: var(--design-steel);
}

.popup-header h2::after {
  background: var(--design-navy);
}

.setting-label,
.setting-control,
.text-popup-body {
  color: var(--design-white);
}

.option-choice {
  color: var(--design-white);
  border-color: var(--design-steel);
  border-radius: 0;
  background: rgba(10, 14, 22, 0.5);
  box-shadow: inset 0 2px 0 rgba(238, 242, 247, 0.1);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.option-choice:has(input:checked) {
  border-color: var(--design-gold);
  box-shadow: inset 0 -3px 0 var(--design-gold);
}

.option-choice:focus-within {
  outline: 3px solid var(--design-gold);
  outline-offset: 3px;
  box-shadow: inset 0 0 0 3px var(--design-gold);
}

.setting-control input {
  accent-color: var(--design-gold);
}

#history-list .h-chapter,
#history-list .h-name {
  color: var(--design-gold);
}

#history-list .h-page {
  border-top-color: rgba(139, 149, 165, 0.42);
}

#history-list::-webkit-scrollbar-track,
#ov-credits .popup-body::-webkit-scrollbar-track {
  background: rgba(10, 14, 22, 0.7);
  border-left: 1px solid rgba(139, 149, 165, 0.4);
}

.credits-primary-label,
.credits-song-title {
  color: var(--design-gold);
  opacity: 1;
}

.credits-primary-role,
.credits-primary-author,
.credits-primary-title,
.credits-secondary,
.credits-song-credit,
.credits-song-lyrics {
  color: var(--design-white);
  opacity: 1;
}

.credits-secondary {
  border-top-color: var(--design-steel);
}

.credits-secondary-line,
#policy-text {
  line-height: 1.6;
}

/* ==== 重なりゼロ組版(2026-09-16 ユーザー指示「そのまま使える水準」) ====
   タイトルは1ノードのまま ::first-line で主題行を大きく、副題行を小さく組む。
   TOP: 左上の空(静穏域)に主題「競技セブンスカイズ〜」+副題1行が収まる幅900px。
   ED: 右上の星空の列に同構成(幅880px)。位置はkv-screensが正本。 */
#top-title {
  max-width: 900px;
  line-height: 1.22;
}
#end-title {
  max-width: 880px;
  line-height: 1.24;
}
#top-catch {
  max-width: 860px;
}
#top-info {
  max-width: 1040px;
}
#end-credits {
  /* 音楽権利表記を曲ごとに改行した(2026-09-19ユーザー指示)ため、結合1行を
     折り返させないための旧幅2300pxは不要。短い行だけになったので幅を絞り、
     クレジット箱が「TOPへ戻る」(x=1150〜)の下へ潜らないようにする
     ——潜らなければ縦の重なり検査に当たらず、行数を増やす余地が作れる */
  max-width: 1000px;
}
#end-source {
  max-width: 860px;
}


/* クレジットポップアップの目視調整(2026-09-17ユーザー指摘): 見出し札の上端欠け・
   素材行の泣き別れ・歌詞の行内折返し(1行=表示1行の契約)を解消 */
/* 追補2(同日ユーザー再指摘「まだ重なっている」): タブ跨ぎ意匠を廃し、
   札・閉じる・スクロールバーを枠線の完全内側へ(交差ゼロ) */
#credits-title { top: 28px; }
.overlay .popup-header [id$="-title"] { background: var(--panel-bg, rgba(18, 18, 24, 0.96)); padding: 2px 26px; z-index: 2; }
.overlay .popup-close { top: 26px; right: 26px; }
.overlay .popup-body { margin-top: 26px; margin-right: 26px; }
#credits-text .credits-secondary { word-break: keep-all; }
/* 従属クレジット(音楽・効果音)の字を制作表記「Created by へろ式」と同じ大きさへ揃える
   (2026-09-19ユーザー指示)。既定は item*0.9 で、最終行だけ item*0.55 と不揃いだった */
#credits-text .credits-secondary { font-size: calc(var(--popup-item-px, 14px) * 0.55); }
/* 表記を統一する(同日ユーザー指示「TOPのクレジット表記は統一とって。へろ式の文字の色も
   音楽や効果音と同じでいい」)。既定は制作表記だけ小さく薄く別扱いだったのをやめ、
   字サイズ・濃さ・字間を従属クレジットと同一にする(序列は最終行という位置が担う) */
#credits-text .credits-secondary > :last-child {
  font-size: inherit;
  opacity: 1;
  letter-spacing: inherit;
}
.credits-theme-song { width: min(90%, 1200px); margin-top: 0; }  /* 上の区切り線と同間隔(実測38pxへ一致・ユーザー指摘) */
/* 枠と下地の整合はツール本体の表示契約(#245・runtime.css)が正——作品側ハックは撤去 */  /* 既定760pxでは英語詞が折り返す——枠を広げ字サイズは既定の階層のまま */