:root {
  --wall-bg: #0d0c0e;
  --frame-bg: rgba(17, 15, 17, 0.96);
  --frame-border: transparent;
  --text-color: #f4eee5;
  --name-color: #d3a565;
  --accent: #a88ac0;
  --ui-color: #e8ded0;
  --cutin-card-bg:
    linear-gradient(145deg,
      color-mix(in srgb, var(--cutin-accent, #a97b43) 16%, #3b3028) 0%,
      #1b181b 55%,
      color-mix(in srgb, var(--cutin-accent, #8f6a9f) 10%, #241f27) 100%);
  --cutin-border: #e3bb73;
  --top-overlay: transparent;
  --text-pad-top-pc: 80px;
  --text-pad-bottom-pc: 16px;
  --text-pad-top-spv: 14px; /* プレート枠上化で上詰め(ルビ頭上8px+余裕) */
  --text-pad-bottom-spv: 12px;
  --text-pad-top-sph: 14px; /* プレート枠上化で上詰め(ルビ頭上8px+余裕。4行+ルビ収容) */
  --text-pad-bottom-sph: 14px;
}

#wallpaper {
  background-color: #0d0c0e;
  background-position: center;
  background-size: cover;
}

#canvas {
  background:
    linear-gradient(122deg, rgba(18, 15, 15, 0.98), rgba(13, 12, 16, 0.98) 54%, rgba(24, 18, 26, 0.98));
}

/* Main game: one editorial binding kit across stage, frame, tabs, and controls. */
#surface-game {
  background:
    linear-gradient(90deg, rgba(190, 132, 61, 0.07), transparent 24%, transparent 72%, rgba(123, 86, 145, 0.08)),
    linear-gradient(180deg, #171314 0%, #0f0e11 100%);
}

#surface-game::before,
#surface-game::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

#surface-game::before {
  left: 0;
  top: 0;
  width: 38%;
  height: 32%;
  background: linear-gradient(142deg, rgba(214, 166, 91, 0.12), transparent 66%);
  clip-path: polygon(0 0, 100% 0, 58% 22%, 22% 100%, 0 78%);
}

#surface-game::after {
  right: 0;
  bottom: 0;
  width: 34%;
  height: 28%;
  background: linear-gradient(320deg, rgba(147, 105, 168, 0.12), transparent 72%);
  clip-path: polygon(46% 0, 100% 16%, 100% 100%, 0 100%, 24% 66%);
}

#cgarea {
  border: 1px solid transparent;
  box-shadow:
    0 0 0 5px rgba(9, 8, 10, 0.92),
    0 0 0 6px rgba(151, 111, 171, 0.28),
    0 20px 48px rgba(0, 0, 0, 0.48);
}

/* 額縁レイヤー(内容の最前面・runtime供給)。金線は絵の縁の上に描かれ、
   絵や効果がどう動いても縁は隠れない(ちかちか防止) */
#cg-frame {
  border: 2px solid rgba(225, 187, 115, 0.62);
}

#textarea {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, 98.4% 0, 100% 15%, 100% 100%, 1.6% 100%, 0 84%);
  background:
    linear-gradient(90deg, rgba(218, 176, 105, 0.28), rgba(156, 116, 174, 0.24)) left 7px top 7px / calc(100% - 14px) 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(222, 178, 105, 0.72) 45%, rgba(151, 108, 170, 0.72)) right 3.2% bottom 8px / 28% 3px no-repeat,
    linear-gradient(90deg, rgba(210, 158, 82, 0.14) 0 14px, transparent 14px calc(100% - 18px), rgba(143, 100, 163, 0.16) calc(100% - 18px)),
    linear-gradient(180deg, rgba(36, 29, 27, 0.97), rgba(14, 13, 17, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(245, 222, 179, 0.48),
    inset 0 -1px 0 rgba(154, 111, 173, 0.48),
    inset 0 0 0 6px rgba(8, 8, 10, 0.42),
    0 18px 42px rgba(0, 0, 0, 0.52);
}

/* ネームパネルの作品統一位置(ユーザー指定 2026-09-03: 右+20px・下+10px。
   sp系は画面比に合わせた縮小値。runtimeの--plate-offset変数チャンネル経由) */
body[data-layout="pc"] { --plate-offset-x: 20px; --plate-offset-y: 10px; }
/* sp-h: プレートは枠の完全に上=重ねない(ユーザー指定 2026-09-03)。
   -31px=実測でプレート下辺が枠上辺の約2px上に出る */
body[data-layout="sp-h"] { --plate-offset-x: 8px; --plate-offset-y: -31px; }
/* sp-v: プレートは枠の完全に上=重ねない(ユーザー指定 2026-09-03)。
   -33px=実測でプレート下辺が枠上辺の約2px上に出る */
body[data-layout="sp-v"] { --plate-offset-x: 8px; --plate-offset-y: -33px; }

/* sp-v: 本文が左のフレーム装飾に乗るため半角(8px)右へ寄せる(ユーザー指摘 2026-09-03・台帳#100)。
   パディングの左右は折返し幅保護でツール固定(ビルド検査で上書き禁止)のため、
   行の描画位置だけを text-indent でずらす(組版・折返しは不変。行内余白346pxに対し320+8=328で枠内) */
body[data-layout="sp-v"] #bodyzone .line { text-indent: 8px; }

#namezone {
  color: var(--name-color);
  text-align: center;
  border: 0;
  border-left: 6px solid var(--name-color);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  background:
    linear-gradient(100deg, rgba(12, 11, 13, 0.98), rgba(47, 35, 29, 0.97) 72%, rgba(35, 27, 39, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(241, 216, 172, 0.38),
    inset 0 -1px 0 rgba(136, 101, 151, 0.42),
    8px 8px 0 rgba(7, 7, 9, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.76);
}

/* Cutin: one top-corner shape mirrored into all four slots. */
.cutin {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: none;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.52));
}

.cutin img {
  background: rgba(20, 22, 28, 0.75);
}

.cutin[data-slot="左上"] img {
  clip-path: polygon(1% 1%, 98.5% 1%, 81% 98.5%, 1% 88.5%);
}

.cutin[data-slot="右上"] img {
  clip-path: polygon(1.5% 1%, 99% 1%, 99% 88.5%, 19% 98.5%);
}

.cutin[data-slot="左下"] img {
  clip-path: polygon(1% 11.5%, 81% 1.5%, 98.5% 99%, 1% 99%);
}

.cutin[data-slot="右下"] img {
  clip-path: polygon(19% 1.5%, 99% 11.5%, 99% 99%, 1.5% 99%);
}

.cutin[data-slot="左上"] {
  background-image: url("assets/ui-cutin-left.svg");
}

.cutin[data-slot="右上"] {
  background-image: url("assets/ui-cutin-right.svg");
}

.cutin[data-slot="左下"] {
  background-image: url("assets/ui-cutin-left-bottom.svg");
}

.cutin[data-slot="右下"] {
  background-image: url("assets/ui-cutin-right-bottom.svg");
}

/* Shared controls: book tabs with the same chamfer and material language. */
.uibtn,
#top-links button,
#top-links a {
  color: #eee4d6;
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  background:
    linear-gradient(125deg, rgba(56, 42, 33, 0.96), rgba(19, 17, 20, 0.98) 58%, rgba(40, 29, 44, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(233, 202, 145, 0.46),
    inset 0 -1px 0 rgba(139, 99, 158, 0.44);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

.uibtn.active {
  color: #171213;
  background: linear-gradient(110deg, #e5c17e, #c88c51 62%, #9d719f);
  box-shadow: inset 0 1px 0 rgba(255, 247, 219, 0.72);
  text-shadow: none;
}

#game-ui {
  gap: 0;
  border-left: 4px solid rgba(218, 171, 99, 0.84);
  background:
    linear-gradient(125deg, rgba(57, 42, 32, 0.94), rgba(16, 15, 18, 0.97) 58%, rgba(41, 29, 45, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(239, 211, 158, 0.36),
    inset 0 -1px 0 rgba(145, 104, 162, 0.42),
    0 0 0 7px rgba(12, 11, 14, 0.78),
    0 14px 30px rgba(0, 0, 0, 0.42);
  clip-path: polygon(0 0, 88% 0, 100% 9%, 100% 100%, 12% 100%, 0 91%);
}

body[data-layout="pc"] #game-ui {
  gap: 44px;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

#btn-auto,
#btn-history,
#btn-settings,
#btn-game-top {
  min-width: 62px;
  min-height: 44px;
  padding: 5px 10px;
  color: rgba(239, 229, 216, 0.9);
  border: 0;
  border-bottom: 1px solid rgba(208, 160, 92, 0.34);
  clip-path: none;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
}

#btn-auto.active,
#btn-history:focus-visible,
#btn-settings:focus-visible,
#btn-game-top:focus-visible {
  color: #171213;
  background: linear-gradient(100deg, #e4bd76, #b17fa7);
}

body[data-layout="pc"] #btn-auto,
body[data-layout="pc"] #btn-history,
body[data-layout="pc"] #btn-settings,
body[data-layout="pc"] #btn-game-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 148px;
  min-height: 76px;
  padding: 10px 10px 9px 58px;
  color: rgba(238, 218, 184, 0.82);
  border: 0;
  border-bottom: 1px solid rgba(222, 174, 96, 0.28);
  background-color: transparent;
  background-position: 9px center;
  background-repeat: no-repeat;
  background-size: 42px 42px;
  box-shadow:
    inset 0 -1px 0 rgba(255, 232, 190, 0.04),
    -12px 0 0 -11px rgba(222, 174, 96, 0.52);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05;
  text-align: left;
}

body[data-layout="pc"] #btn-auto {
  background-image: url("assets/ui-control-auto.svg");
}

body[data-layout="pc"] #btn-history {
  background-image: url("assets/ui-control-history.svg");
}

body[data-layout="pc"] #btn-settings {
  background-image: url("assets/ui-control-settings.svg");
}

body[data-layout="pc"] #btn-game-top {
  background-image: url("assets/ui-control-top.svg");
}

body[data-layout="pc"] #btn-auto::after,
body[data-layout="pc"] #btn-history::after,
body[data-layout="pc"] #btn-settings::after,
body[data-layout="pc"] #btn-game-top::after {
  display: block;
  margin-top: 5px;
  color: rgba(205, 158, 89, 0.58);
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

body[data-layout="pc"] #btn-auto::after {
  content: "AUTO MODE";
}

body[data-layout="pc"] #btn-history::after {
  content: "HISTORY";
}

body[data-layout="pc"] #btn-settings::after {
  content: "SETTINGS";
}

body[data-layout="pc"] #btn-game-top::after {
  content: "TOP PAGE";
}

body[data-layout="pc"] #btn-auto.active,
body[data-layout="pc"] #btn-history:focus-visible,
body[data-layout="pc"] #btn-settings:focus-visible,
body[data-layout="pc"] #btn-game-top:focus-visible {
  color: #f1d59f;
  background-color: rgba(108, 73, 37, 0.12);
  box-shadow:
    inset 3px 0 0 #e3b765,
    inset 0 1px 0 rgba(255, 232, 190, 0.08);
}

body[data-layout="sp-v"] #btn-auto,
body[data-layout="sp-v"] #btn-history,
body[data-layout="sp-v"] #btn-settings,
body[data-layout="sp-v"] #btn-game-top {
  width: 72px;
  min-width: 72px;
  min-height: 60px;
  padding: 31px 2px 5px;
  color: rgba(236, 216, 182, 0.84);
  border: 0;
  border-bottom: 1px solid rgba(222, 174, 96, 0.34);
  background-color: rgba(11, 10, 12, 0.72);
  background-position: center 4px;
  background-repeat: no-repeat;
  background-size: 25px 25px;
  box-shadow: none;
  font-size: 14px;
  line-height: 1;
}

body[data-layout="sp-h"] #btn-auto,
body[data-layout="sp-h"] #btn-history,
body[data-layout="sp-h"] #btn-settings,
body[data-layout="sp-h"] #btn-game-top {
  width: 82px;
  min-width: 82px;
  min-height: 64px;
  padding: 35px 3px 5px;
  color: rgba(236, 216, 182, 0.84);
  border: 0;
  border-bottom: 1px solid rgba(222, 174, 96, 0.34);
  background-color: rgba(11, 10, 12, 0.58);
  background-position: center 5px;
  background-repeat: no-repeat;
  background-size: 26px 26px;
  box-shadow: none;
  font-size: 14px;
  line-height: 1;
}

body[data-layout="sp-v"] #game-ui {
  left: 16px;
  right: 16px;
  top: 12px;
  justify-content: space-between;
  gap: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

body[data-layout="sp-h"] #game-ui {
  right: 14px;
  top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 82px);
  gap: 20px 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

body[data-layout="sp-v"] #btn-auto,
body[data-layout="sp-h"] #btn-auto {
  background-image: url("assets/ui-control-auto.svg");
}

body[data-layout="sp-v"] #btn-history,
body[data-layout="sp-h"] #btn-history {
  background-image: url("assets/ui-control-history.svg");
}

body[data-layout="sp-v"] #btn-settings,
body[data-layout="sp-h"] #btn-settings {
  background-image: url("assets/ui-control-settings.svg");
}

body[data-layout="sp-v"] #btn-game-top,
body[data-layout="sp-h"] #btn-game-top {
  background-image: url("assets/ui-control-top.svg");
}

body[data-layout="sp-v"] #btn-auto.active,
body[data-layout="sp-h"] #btn-auto.active,
body[data-layout="sp-v"] #btn-history:focus-visible,
body[data-layout="sp-v"] #btn-settings:focus-visible,
body[data-layout="sp-v"] #btn-game-top:focus-visible,
body[data-layout="sp-h"] #btn-history:focus-visible,
body[data-layout="sp-h"] #btn-settings:focus-visible,
body[data-layout="sp-h"] #btn-game-top:focus-visible {
  color: #f1d59f;
  background-color: rgba(103, 68, 33, 0.34);
  box-shadow: inset 0 -3px 0 #dfae5d;
}

#ep-indicator {
  gap: 4px;
  border-left: 3px solid rgba(211, 164, 93, 0.72);
  background: linear-gradient(105deg, rgba(48, 36, 29, 0.84), rgba(16, 15, 18, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(231, 202, 148, 0.24),
    0 0 0 6px rgba(12, 11, 14, 0.72);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

body[data-layout="pc"] #ep-indicator {
  gap: 0;
  color: rgba(224, 198, 151, 0.72);
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

body[data-layout="pc"] #ep-indicator::before {
  content: "EPISODE";
  color: #d9a858;
  border-bottom: 1px solid rgba(220, 169, 88, 0.72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 2.8;
}

.ep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 25px;
  color: rgba(232, 220, 204, 0.5);
  border: 0;
  border-left: 3px solid rgba(200, 151, 83, 0.3);
  background: transparent;
  clip-path: none;
  opacity: 1;
}

.ep.current {
  color: #171214;
  border-left-color: #eee0bd;
  background: linear-gradient(90deg, #d8a75e, #a77a9f);
}

body[data-layout="pc"] .ep {
  justify-content: flex-start;
  width: 82px;
  min-height: 31px;
  padding: 0 8px 0 0;
  color: rgba(218, 190, 142, 0.36);
  border: 0;
  border-left: 1px solid rgba(220, 170, 90, 0.34);
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 600;
}

body[data-layout="pc"] .ep::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: -4px;
  margin-right: 13px;
  border: 1px solid rgba(224, 177, 96, 0.62);
  border-radius: 50%;
  background: #171315;
  box-shadow: 0 0 0 2px rgba(10, 9, 11, 0.86);
}

body[data-layout="pc"] .ep:has(~ .ep.current) {
  color: rgba(224, 196, 146, 0.66);
}

body[data-layout="pc"] .ep.current ~ .ep {
  color: rgba(218, 190, 142, 0.28);
}

body[data-layout="pc"] .ep.current {
  width: 96px;
  min-height: 38px;
  padding-left: 0;
  color: #f0d69e;
  border: 1px solid rgba(231, 185, 103, 0.86);
  border-left: 4px solid #e7b662;
  background: linear-gradient(90deg, rgba(94, 62, 29, 0.42), rgba(17, 14, 17, 0.9));
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 166, 0.08),
    0 0 18px rgba(190, 128, 53, 0.12);
}

body[data-layout="pc"] .ep.current::before {
  border-color: #f0ca7e;
  background: #dca75a;
}

body[data-layout="pc"] .ep.current::after {
  content: ">";
  margin-left: auto;
  color: #e9bc6c;
  font-family: Arial, sans-serif;
  font-size: 11px;
}

body[data-layout="sp-v"] #ep-indicator {
  left: 15px;
  top: 770px;
  gap: 4px;
  border: 0;
  background: linear-gradient(90deg, transparent 1%, rgba(220, 170, 90, 0.48) 8% 92%, transparent 99%) center / 100% 1px no-repeat;
  box-shadow: none;
  clip-path: none;
}

body[data-layout="sp-v"] .ep {
  width: 27px;
  min-width: 27px;
  height: 28px;
  min-height: 28px;
  color: rgba(225, 195, 145, 0.4);
  border: 0;
  border-radius: 50%;
  background: #171315;
  box-shadow: inset 0 0 0 1px rgba(222, 174, 96, 0.5);
  font-size: 0;
}

body[data-layout="sp-v"] .ep.current {
  width: 36px;
  min-width: 36px;
  height: 32px;
  min-height: 32px;
  color: #f0d59b;
  border: 1px solid rgba(235, 191, 109, 0.9);
  border-radius: 50%;
  font-size: 14px;
  background: linear-gradient(120deg, rgba(117, 78, 36, 0.78), rgba(29, 21, 25, 0.98));
  box-shadow: 0 0 12px rgba(208, 145, 63, 0.22);
}

body[data-layout="sp-h"] #ep-indicator {
  left: 14px;
  top: 12px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, 29px);
  grid-template-columns: repeat(2, 82px);
  gap: 0 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

body[data-layout="sp-h"] .ep {
  justify-content: flex-start;
  width: 82px;
  min-width: 82px;
  height: 29px;
  min-height: 29px;
  padding-right: 4px;
  color: rgba(224, 195, 145, 0.44);
  border: 0;
  border-left: 1px solid rgba(220, 170, 90, 0.38);
  border-radius: 0;
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1;
}

body[data-layout="sp-h"] .ep::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: -4px;
  margin-right: 9px;
  border: 1px solid rgba(224, 177, 96, 0.62);
  border-radius: 50%;
  background: #171315;
}

body[data-layout="sp-h"] .ep:has(~ .ep.current) {
  color: rgba(224, 196, 146, 0.68);
}

body[data-layout="sp-h"] .ep.current {
  color: #f0d69e;
  border: 1px solid rgba(231, 185, 103, 0.86);
  border-left: 4px solid #e7b662;
  background: linear-gradient(90deg, rgba(94, 62, 29, 0.52), rgba(17, 14, 17, 0.92));
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}

body[data-layout="sp-h"] .ep.current::before {
  border-color: #f0ca7e;
  background: #dca75a;
}

#click-wait {
  width: 24px;
  height: 18px;
  color: transparent;
  border: 0;
  background: none;
}

#click-wait::before,
#click-wait::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#click-wait::before {
  left: 7px;
  top: 1px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #f0d397, #9d74af);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow: 0 0 12px rgba(197, 149, 84, 0.56);
}

#click-wait::after {
  left: 2px;
  bottom: 0;
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4a45f, #9c72ad, transparent);
}

.panel {
  color: #eee5da;
  border: 0;
  border-left: 6px solid #c99555;
  border-radius: 0;
  background:
    linear-gradient(120deg, rgba(52, 39, 31, 0.98), rgba(18, 16, 19, 0.99) 62%, rgba(37, 27, 42, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(232, 199, 139, 0.42),
    inset 0 -1px 0 rgba(139, 99, 158, 0.36),
    0 24px 60px rgba(0, 0, 0, 0.56);
  clip-path: polygon(0 0, 97% 0, 100% 6%, 100% 100%, 3% 100%, 0 94%);
}

.panel h2 {
  color: #e3bb76;
}

#ov-credits .panel {
  width: min(680px, 86%);
}

#credits-text {
  color: #eee5da;
  font-size: 14px;
  line-height: 1.6 !important;
}

#credits-text .credits-primary {
  padding: 4px 0 18px;
  border-bottom: 1px solid rgba(227, 187, 118, 0.38);
}

#credits-text .credits-primary-label {
  color: #e3bb76;
  font-size: 13px;
  font-weight: 800;
}

#credits-text .credits-primary-role {
  margin-top: 7px;
  color: rgba(238, 229, 218, 0.76);
  font-size: 13px;
}

#credits-text .credits-primary-author {
  color: #fff4e2;
  font-size: 22px;
  font-weight: 800;
}

#credits-text .credits-primary-title {
  margin-top: 5px;
  color: rgba(238, 229, 218, 0.9);
  font-size: 14px;
  line-height: 1.6;
}

#credits-text .credits-secondary {
  padding-top: 16px;
  color: rgba(238, 229, 218, 0.82);
  font-size: 13px;
  line-height: 1.6;
}

body[data-layout="sp-v"] #credits-text,
body[data-layout="sp-h"] #credits-text {
  font-size: 12px;
}

body[data-layout="sp-v"] #credits-text .credits-primary-author,
body[data-layout="sp-h"] #credits-text .credits-primary-author {
  font-size: 18px;
}

body[data-layout="sp-v"] #credits-text .credits-primary-title,
body[data-layout="sp-h"] #credits-text .credits-primary-title,
body[data-layout="sp-v"] #credits-text .credits-secondary,
body[data-layout="sp-h"] #credits-text .credits-secondary {
  font-size: 12px;
}

/* TOP: the panel is only a semantic wrapper; composition is directly on the KV. */
#surface-top::before,
#surface-end::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#surface-top::before {
  background: linear-gradient(90deg, rgba(9, 9, 12, 0.94) 0%, rgba(12, 11, 14, 0.78) 34%, rgba(11, 10, 13, 0.18) 52%, transparent 70%);
}

#top-panel,
#end-panel {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#top-panel {
  inset: 0;
  width: auto;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}

body[data-layout="pc"] #top-panel,
body[data-layout="sp-v"] #top-panel,
body[data-layout="sp-h"] #top-panel {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  max-width: none;
  max-height: none;
}

#top-panel > * {
  pointer-events: auto;
}

#top-title,
#top-catch,
#top-author,
#top-episodes,
#top-links {
  position: absolute;
  margin: 0;
}

#top-title {
  color: #fff5e7;
  font-weight: 900;
  line-height: 1.18;
  overflow-wrap: anywhere;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.84);
}

#top-title::before {
  content: "SECOND LOOP / REBIND THE FATE";
  display: block;
  margin-bottom: 12px;
  color: #d8a963;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}

#top-title::after {
  content: "";
  display: block;
  width: 42%;
  height: 4px;
  margin-top: 16px;
  background: linear-gradient(90deg, #d3a15b, #9f76ad, transparent);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

#top-catch {
  color: rgba(245, 236, 224, 0.88);
  line-height: 1.65;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.86);
}

#top-author {
  color: #d6b77f;
  font-weight: 700;
}

#top-author::before {
  content: "ORIGINAL / ";
  color: rgba(183, 147, 191, 0.9);
}

#top-episodes {
  display: grid;
  grid-template-columns: repeat(6, 76px);
  gap: 2px 8px;
  max-height: none;
  overflow: visible;
}

#top-episodes::before {
  content: "EPISODE";
  position: absolute;
  left: 0;
  top: -21px;
  width: 100%;
  height: 17px;
  color: #d9a858;
  border-bottom: 1px solid rgba(220, 169, 88, 0.58);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  pointer-events: none;
}

#top-episodes .ep-title,
#top-episodes .ep-min {
  display: none;
}

#top-episodes .ep-no {
  display: inline;
}

#top-episodes .ep-btn {
  position: relative;
  width: 76px;
  min-width: 76px;
  min-height: 44px;
  padding: 0 4px 0 17px;
  color: rgba(232, 221, 207, 0.72);
  border: 0;
  border-bottom: 1px solid rgba(207, 156, 86, 0.42);
  border-radius: 0;
  background: transparent;
  clip-path: none;
  font-size: 14px;
  line-height: 1;
  box-shadow: none;
  text-align: left;
  text-shadow: none;
}

#top-episodes .ep-btn::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(228, 207, 178, 0.48);
  border-radius: 50%;
  transform: translateY(-50%);
}

#top-episodes .ep-btn:hover,
#top-episodes .ep-btn:focus-visible {
  color: #171214;
  border-bottom-color: #f2d391;
  background: linear-gradient(90deg, #e2b96f, #aa7aa5);
}

#top-episodes .ep-btn:hover::before,
#top-episodes .ep-btn:focus-visible::before {
  border-color: #fff1cf;
  background: #fff1cf;
}

#top-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lbl-full {
  display: inline;
}

.lbl-short {
  display: none;
}

#btn-start {
  flex: 0 0 310px;
  min-width: 310px;
  min-height: 62px;
  color: #171112;
  background: linear-gradient(105deg, #f2d391, #d99b58 62%, #b486af);
  font-size: 18px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 229, 0.8),
    0 14px 30px rgba(194, 133, 69, 0.28);
  text-shadow: none;
}

#btn-start::after {
  content: "  /  START";
  font-size: 14px;
  font-weight: 800;
}

#btn-continue,
#btn-top-mute,
#btn-credits,
#btn-policy,
#top-source {
  min-height: 44px;
  padding: 6px 12px;
  color: rgba(239, 228, 214, 0.82);
  font-size: 14px;
  background: rgba(17, 15, 18, 0.72);
  border-bottom: 1px solid rgba(181, 132, 194, 0.4);
}

body[data-layout="pc"] #top-title {
  left: 74px;
  top: 72px;
  width: 620px;
  font-size: 42px;
  line-height: 1.16;
}

body[data-layout="pc"] #top-catch {
  left: 78px;
  top: 410px;
  width: 620px;
  font-size: 18px;
}

body[data-layout="pc"] #top-author {
  left: 78px;
  top: 482px;
  font-size: 15px;
}

body[data-layout="pc"] #top-episodes {
  left: 76px;
  top: 620px;
  width: 496px;
}

body[data-layout="pc"] #top-links {
  left: 76px;
  bottom: 72px;
  width: 760px;
}

body[data-layout="sp-v"] #surface-top::before,
body[data-layout="sp-v"] #surface-end::before {
  background: linear-gradient(180deg, transparent 0 219px, rgba(19, 16, 18, 0.98) 219px, rgba(12, 11, 14, 0.99) 100%);
}

body[data-layout="sp-v"] #top-title {
  left: 18px;
  top: 246px;
  width: 354px;
  font-size: 22px;
  line-height: 1.24;
}

body[data-layout="sp-v"] #top-title::before {
  margin-bottom: 8px;
  font-size: 14px;
}

body[data-layout="sp-v"] #top-title::after {
  margin-top: 10px;
}

body[data-layout="sp-v"] #top-catch {
  left: 18px;
  top: 420px;
  width: 354px;
  font-size: 14px;
  line-height: 1.55;
}

body[data-layout="sp-v"] #top-author {
  left: 18px;
  top: 480px;
  font-size: 14px;
}

body[data-layout="sp-v"] #top-episodes {
  left: 18px;
  top: 545px;
  width: 354px;
  grid-template-columns: repeat(6, 52px);
  gap: 5px 7px;
}

body[data-layout="sp-v"] #top-episodes .ep-btn {
  width: 52px;
  min-width: 52px;
  min-height: 44px;
  padding-left: 15px;
}

body[data-layout="sp-v"] #top-links {
  left: 18px;
  right: 18px;
  bottom: 22px;
  width: auto;
  gap: 6px;
}

body[data-layout="sp-v"] #btn-start {
  flex-basis: 100%;
  min-width: 100%;
  min-height: 54px;
}

body[data-layout="sp-v"] #btn-continue,
body[data-layout="sp-v"] #btn-top-mute,
body[data-layout="sp-v"] #btn-credits,
body[data-layout="sp-v"] #btn-policy,
body[data-layout="sp-v"] #top-source {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 4px 7px;
  font-size: 14px;
}

body[data-layout="sp-h"] #surface-top::before,
body[data-layout="sp-h"] #surface-end::before {
  background: linear-gradient(90deg, rgba(9, 9, 12, 0.98) 0, rgba(12, 11, 14, 0.9) 36%, rgba(12, 11, 14, 0.16) 52%, transparent 68%);
}

body[data-layout="sp-h"] #top-title {
  left: 16px;
  top: 16px;
  width: 334px;
  font-size: 16px;
  line-height: 1.18;
}

body[data-layout="sp-h"] #top-title::before {
  margin-bottom: 5px;
  font-size: 14px;
}

body[data-layout="sp-h"] #top-title::after {
  width: 34%;
  height: 3px;
  margin-top: 6px;
}

body[data-layout="sp-h"] #top-catch {
  left: 16px;
  /* 説明文を1行分上へ: 直下のORIGINAL/原作行との重なり防止(ユーザー指摘 2026-09-03・台帳#100) */
  top: 107px;
  width: 330px;
  font-size: 14px;
  line-height: 1.35;
}

body[data-layout="sp-h"] #top-author {
  left: 16px;
  top: 150px;
  font-size: 14px;
}

body[data-layout="sp-h"] #top-episodes {
  left: 16px;
  top: 190px;
  width: 308px;
  grid-template-columns: repeat(6, 46px);
  gap: 3px 6px;
}

body[data-layout="sp-h"] #top-episodes::before {
  top: -17px;
}

body[data-layout="sp-h"] #top-episodes .ep-btn {
  width: 46px;
  min-width: 46px;
  min-height: 44px;
  padding-left: 14px;
  font-size: 14px;
}

body[data-layout="sp-h"] #top-links {
  left: 16px;
  bottom: 8px;
  width: 330px;
  gap: 4px;
}

body[data-layout="sp-h"] #btn-start {
  flex-basis: 100%;
  min-width: 100%;
  min-height: 48px;
}

body[data-layout="sp-h"] #btn-continue,
body[data-layout="sp-h"] #btn-top-mute,
body[data-layout="sp-h"] #btn-credits,
body[data-layout="sp-h"] #btn-policy,
body[data-layout="sp-h"] #top-source {
  flex: 1 1 54px;
  min-width: 54px;
  min-height: 44px;
  padding: 2px 4px;
  font-size: 14px;
}

body[data-layout="sp-h"] #btn-policy .lbl-full,
body[data-layout="sp-h"] #top-source .lbl-full {
  display: none;
}

body[data-layout="sp-h"] #btn-policy .lbl-short,
body[data-layout="sp-h"] #top-source .lbl-short {
  display: inline;
}

/* ED: one title, then the continuation CTA; credits stay small and last. */
#surface-end::before {
  background: linear-gradient(90deg, rgba(8, 8, 10, 0.2), rgba(8, 8, 10, 0.08) 42%, rgba(10, 9, 12, 0.74) 68%, rgba(10, 9, 12, 0.94));
}

#end-panel {
  inset: 0;
  width: auto;
  max-width: none;
  max-height: none;
  padding: 0;
  transform: none;
  text-align: left;
  overflow: visible;
}

body[data-layout="pc"] #end-panel,
body[data-layout="sp-v"] #end-panel,
body[data-layout="sp-h"] #end-panel {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  max-width: none;
  max-height: none;
  transform: none;
}

#end-message,
#end-title,
#end-credits,
#end-source,
#btn-end-top,
#end-author {
  position: absolute;
  margin: 0;
}

#end-message {
  color: rgba(244, 235, 223, 0.88);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.82);
}

#end-author::before {
  content: "READ COMPLETE";
  display: block;
  width: max-content;
  margin-bottom: 10px;
  padding: 7px 16px 7px 12px;
  color: #171113;
  background: linear-gradient(100deg, #e5bf78, #b686ad);
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
  font-size: 14px;
  font-weight: 900;
}

#end-title {
  color: #fff3e2;
  font-weight: 900;
  line-height: 1.18;
  overflow-wrap: anywhere;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.86);
}

#end-title::after {
  content: "";
  display: block;
  width: 34%;
  height: 4px;
  margin-top: 14px;
  background: linear-gradient(90deg, #efc679, #a77aad, transparent);
}

#end-actions {
  display: contents;
}

#end-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #171113;
  border: 0;
  background: linear-gradient(104deg, #f2d38f, #d99a57 62%, #b285ad);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  padding: 10px 24px;
  text-align: center;
  white-space: normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 228, 0.82),
    0 14px 32px rgba(198, 135, 69, 0.3);
  text-shadow: none;
}

#btn-end-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  color: rgba(237, 226, 212, 0.72);
  background: rgba(18, 15, 19, 0.7);
  font-size: 14px;
}

#end-author {
  color: rgba(234, 219, 198, 0.78);
  font-size: 14px;
  font-weight: 700;
}

#end-credits {
  color: rgba(222, 208, 191, 0.56);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre;
  opacity: 1;
}

body[data-layout="pc"] #end-message {
  left: 1056px;
  top: 72px;
  width: 560px;
}

body[data-layout="pc"] #end-author {
  left: 1056px;
  top: 496px;
  color: #e6c889;
  font-size: 16px;
}

body[data-layout="pc"] #end-title {
  left: 1056px;
  top: 570px;
  width: 720px;
  font-size: 38px;
}

body[data-layout="pc"] #end-source {
  left: 1056px;
  top: 800px;
  width: 620px;
  min-height: 66px;
}

body[data-layout="pc"] #btn-end-top {
  left: 1692px;
  top: 811px;
  width: 150px;
}

body[data-layout="pc"] #end-credits {
  left: 80px;
  top: 930px;
  width: 900px;
  line-height: 1.35;
}

body[data-layout="sp-v"] #end-message {
  left: 18px;
  top: 244px;
  width: 354px;
  font-size: 14px;
}

body[data-layout="sp-v"] #end-author::before {
  margin-bottom: 8px;
  padding: 5px 12px 5px 9px;
  font-size: 14px;
}

body[data-layout="sp-v"] #end-author {
  left: 18px;
  top: 324px;
  color: #e6c889;
  font-size: 14px;
}

body[data-layout="sp-v"] #end-title {
  left: 18px;
  top: 380px;
  width: 354px;
  font-size: 20px;
  line-height: 1.23;
}

body[data-layout="sp-v"] #end-source {
  left: 18px;
  top: 560px;
  width: 354px;
  min-height: 64px;
  font-size: 16px;
}

body[data-layout="sp-v"] #btn-end-top {
  left: 18px;
  top: 644px;
  width: 150px;
}

body[data-layout="sp-v"] #end-credits {
  left: 18px;
  top: 706px;
  width: 354px;
  font-size: 14px;
  line-height: 1.45;
}

body[data-layout="sp-h"] #surface-end::before {
  background: linear-gradient(90deg, rgba(9, 9, 11, 0.92), rgba(10, 9, 12, 0.46) 46%, rgba(10, 9, 12, 0.1) 70%, transparent);
}

body[data-layout="sp-h"] #end-message {
  left: 16px;
  top: 16px;
  width: 184px;
  font-size: 14px;
  line-height: 1.35;
}

body[data-layout="sp-h"] #end-author::before {
  margin-bottom: 6px;
  padding: 4px 10px 4px 7px;
  font-size: 14px;
}

body[data-layout="sp-h"] #end-author {
  left: 16px;
  top: 202px;
  color: #e6c889;
  font-size: 14px;
}

body[data-layout="sp-h"] #end-title {
  left: 16px;
  top: 258px;
  width: 390px;
  font-size: 18px;
  line-height: 1.18;
}

body[data-layout="sp-h"] #end-source {
  left: 460px;
  top: 258px;
  width: 366px;
  min-height: 58px;
  font-size: 16px;
}

body[data-layout="sp-h"] #btn-end-top {
  left: 696px;
  top: 328px;
  width: 130px;
  min-height: 36px;
}

body[data-layout="sp-h"] #end-credits {
  left: 16px;
  top: 326px;
  width: 410px;
  height: 56px;
  font-size: 14px;
  line-height: 1.35;
  column-count: 2;
  column-gap: 20px;
  column-fill: auto;
}

#wallpaper { background-image: url("assets/wall-メイン.webp"); }