:root {
  --c-dark: #1c2230;
  --c-light: #e8dcc4;
  --c-accent: #e0a25a;
  --c-glow: #bfe4f0;
  --c-mid: #3a4a5c;
  --c-ink: #0d1118;
}

/* TOPの黒パラ(斜めの減光)は外した——KVをそのまま見せる(ユーザー裁定 2026-09-07)。
   文字の可読性は黒縁(kv-screens.outline)が担う */

#top-title {
  font-family: var(--body-font);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-light);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* バッジの文言・位置・サイズは骨格定数(kv.top.badge)が持つ。ここは意匠のみ */
#top-badge {
  letter-spacing: .3em;
  color: var(--c-glow);
  border-bottom: 1px solid var(--c-glow);
  padding-bottom: 10px;
  width: max-content;
  text-shadow: none;
}

#top-title span:last-child {
  font-size: 1.12em;
}

#top-catch {
  font-weight: 500;
  color: rgba(232,220,196,.92);
}

#top-author {
  opacity: 1;
  color: rgba(232,220,196,.9);
}

#top-episodes {
  gap: 18px;
}

.ep-btn {
  height: calc(var(--kv-top-episodes-font, 1px) * 1.9);
  min-height: calc(var(--kv-top-episodes-font, 1px) * 1.9);
  min-width: calc(var(--kv-top-episodes-font, 1px) * 1.9);
  flex: 0 0 auto;
  padding: 0 calc(var(--kv-top-episodes-font, 1px) * 0.55);
  border: 1px solid rgba(191,228,240,.4);
  border-radius: 6px;
  background: rgba(28,34,48,.55);
  color: var(--c-light);
  box-shadow: none;
}

.ep-btn.read {
  background: var(--c-mid);
}

.ep-btn.current {
  border-color: rgba(224,162,90,.95);
  box-shadow: none;
}

.ep-btn .ep-title,
.ep-btn .ep-min {
  display: none;
}

#top-links .uibtn,
#top-links a,
#top-links button {
  border: 1px solid rgba(232,220,196,.5);
  border-radius: 999px;
  background: transparent;
  color: rgba(232,220,196,.9);
  box-shadow: none;
}

#btn-top-mute,
#btn-credits,
#btn-policy,
#top-source {
  font-size: var(--kv-top-info-font, 1px);
}

#top-links .primary,
#top-links #btn-start,
#top-links #btn-continue {
  border: 1px solid rgba(224,162,90,.92);
  border-radius: 6px;
  background: var(--c-accent);
  color: var(--c-ink);
  box-shadow: inset 0 0 0 1px rgba(232,220,196,.5);
  font-weight: 700;
  opacity: 1;
}

/* EDの黒パラ(上からの減光)も外した——KVをそのまま見せる(ユーザー裁定 2026-09-07)。
   文字の可読性は黒縁が担う */

#end-message {
  letter-spacing: .35em;
  color: var(--c-glow);
}

#end-title {
  font-family: var(--body-font);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-light);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

#end-title span:last-child {
  font-size: 1.12em;
}

#end-source {
  border: 1px solid rgba(232,220,196,.55);
  border-radius: 6px;
  background: var(--c-accent);
  color: var(--c-ink);
  box-shadow: inset 0 0 0 1px rgba(232,220,196,.55);
  font-weight: 700;
}

#btn-end-top {
  border: 1px solid rgba(232,220,196,.5);
  border-radius: 999px;
  background: transparent;
  color: rgba(232,220,196,.9);
}

#end-credits {
  color: rgba(232,220,196,.8);
  line-height: 1.6;
}

/* ポップアップ意匠(2026-09-08強化——「簡素な下地フレームしかない」指摘対応):
   二重罫の枠+青白のコーナー飾り+層のある地+題字の下線グロー。KVの座標記号モチーフと同系 */
.popup-panel {
  background: transparent;
  color: var(--c-light);
  box-shadow: none;
}

.popup-panel::before {
  content: "";
  position: absolute;
  inset: 16px;
  pointer-events: none;
  border: 1px solid transparent; /* 縁はキット枠が担う(#174)。未供給時のみ下で色を付ける */
  border-radius: 4px;
  background:
    linear-gradient(160deg, rgba(191,228,240,.07) 0%, rgba(28,34,48,0) 30%),
    linear-gradient(180deg, rgba(28,34,48,.58) 0%, rgba(13,17,24,.62) 100%);
  box-shadow: inset 0 0 60px rgba(13,17,24,.55), 0 12px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

html:not([data-kit-popup-frame="1"]) .popup-panel::before {
  border-color: rgba(191,228,240,.4);
  outline: 1px solid rgba(13,17,24,.9);
  outline-offset: 4px;
}

html:not([data-kit-popup-frame="1"]) .popup-panel::after {
  /* 四隅のかぎ飾り(青白)——上二隅を明るく、下二隅は沈める */
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  background:
    linear-gradient(rgba(191,228,240,.9), rgba(191,228,240,.9)) left  top    / 26px 2px,
    linear-gradient(rgba(191,228,240,.9), rgba(191,228,240,.9)) left  top    / 2px 26px,
    linear-gradient(rgba(191,228,240,.9), rgba(191,228,240,.9)) right top    / 26px 2px,
    linear-gradient(rgba(191,228,240,.9), rgba(191,228,240,.9)) right top    / 2px 26px,
    linear-gradient(rgba(191,228,240,.45), rgba(191,228,240,.45)) left  bottom / 26px 2px,
    linear-gradient(rgba(191,228,240,.45), rgba(191,228,240,.45)) left  bottom / 2px 26px,
    linear-gradient(rgba(191,228,240,.45), rgba(191,228,240,.45)) right bottom / 26px 2px,
    linear-gradient(rgba(191,228,240,.45), rgba(191,228,240,.45)) right bottom / 2px 26px;
  background-repeat: no-repeat;
}

.popup-header h2 {
  color: var(--c-glow);
  letter-spacing: .3em;
  text-indent: .3em;
  text-shadow: 0 0 12px rgba(191,228,240,.35);
}
/* 下線グラデは題字板が未供給の時だけ(供給時はbackgroundを触らない——
   backgroundの一括指定が題字板画像を塗りつぶしていた事故 #174) */
html:not([data-kit-title-plate="1"]) .popup-header h2 {
  padding-bottom: 10px;
  background:
    linear-gradient(90deg, rgba(191,228,240,0) 0%, rgba(191,228,240,.85) 18%,
      rgba(191,228,240,.85) 82%, rgba(191,228,240,0) 100%) center bottom / 100% 1px no-repeat;
}

.popup-body,
#credits-text,
#policy-text {
  color: var(--c-light);
}

.setting-label {
  color: var(--c-light);
  font-weight: 700;
}

#history-list .h-name {
  color: var(--c-glow);
  font-weight: 700;
}

#history-list .h-chapter {
  color: var(--c-accent);
}

.option-choice {
  border: 1px solid rgba(232,220,196,.4);
  border-radius: 4px;
  background: transparent;
  color: var(--c-light);
}

.option-choice:has(input:checked) {
  background: var(--c-accent);
  color: var(--c-ink);
}

input[type="range"] {
  accent-color: var(--c-mid);
}

#btn-settings-top,
#btn-confirm-top-no,
.ov-close.uibtn {
  border: 1px solid rgba(224,162,90,.72);
  background: transparent;
  color: var(--c-accent);
}

#btn-confirm-top-yes {
  border-color: rgba(224,162,90,.95);
  background: var(--c-accent);
  color: var(--c-ink);
}