:root {
  --wall-bg: #05070a;
  --frame-bg: rgba(7, 11, 16, 0.95);
  --frame-border: rgba(213, 225, 226, 0.72);
  --text-color: #edf2f0;
  --name-color: #d7bf62;
  --ui-color: #c0cdd0;
  --accent: #4ac1d0;
  --top-overlay: rgba(5, 8, 12, 0.78);
  --cutin-card-bg: #080d13;
  --cutin-border: rgba(220, 232, 233, 0.88);
  --signal-gold: #d8bd58;
  --signal-cyan: #44bdcb;
  --signal-red: #a52f45;
  --signal-magenta: #a94e86;
  --metal-white: #e9efed;
  --metal-mid: #8f9da0;
  --void: #070a0e;
}

#wallpaper {
  background-color: var(--wall-bg);
  background-image: url("assets/wall-メイン.webp");
  background-size: cover;
  background-position: center;
}

#canvas {
  background: rgba(4, 7, 10, 0.88);
  clip-path: polygon(0 18px, 18px 0, calc(100% - 34px) 0, 100% 34px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 34px 100%, 0 calc(100% - 34px));
  outline: 1px solid rgba(220, 231, 232, 0.32);
  outline-offset: -3px;
  box-shadow:
    0 0 0 2px rgba(4, 7, 10, 0.92),
    0 0 0 4px rgba(72, 192, 204, 0.16),
    0 30px 90px rgba(0, 0, 0, 0.84),
    0 0 70px rgba(219, 191, 88, 0.08);
}

#cgarea {
  background: #05080c;
  border: 2px solid rgba(193, 210, 213, 0.58);
  border-top-color: rgba(229, 239, 238, 0.88);
  border-right-color: rgba(68, 189, 203, 0.58);
  border-radius: 0;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(213, 225, 226, 0.12),
    inset 0 0 32px rgba(3, 6, 10, 0.52);
}

#textarea {
  isolation: isolate;
  background:
    linear-gradient(var(--signal-gold), var(--signal-gold)) left 18px top 12px / 104px 2px no-repeat,
    linear-gradient(var(--signal-gold), var(--signal-gold)) left 18px top 12px / 2px 32px no-repeat,
    linear-gradient(var(--signal-cyan), var(--signal-cyan)) right 18px bottom 12px / 104px 2px no-repeat,
    linear-gradient(var(--signal-cyan), var(--signal-cyan)) right 18px bottom 12px / 2px 32px no-repeat,
    linear-gradient(90deg, rgba(165, 47, 69, 0.96) 0 7px, transparent 7px) top left / 100% 100% no-repeat,
    linear-gradient(90deg, rgba(216, 189, 88, 0.96) 0 21%, rgba(68, 189, 203, 0.74) 21% 36%, transparent 36%) top left / 100% 4px no-repeat,
    linear-gradient(270deg, rgba(169, 78, 134, 0.64), transparent 24%) bottom right / 42% 3px no-repeat,
    repeating-linear-gradient(118deg, rgba(229, 238, 237, 0.018) 0 1px, transparent 1px 9px),
    linear-gradient(112deg, rgba(225, 235, 234, 0.10), transparent 27%),
    linear-gradient(180deg, rgba(22, 31, 38, 0.985), rgba(5, 9, 14, 0.98));
  border: 1px solid rgba(222, 233, 233, 0.82);
  outline: 1px solid rgba(68, 189, 203, 0.26);
  outline-offset: -5px;
  border-radius: 0;
  clip-path: polygon(0 30px, 30px 0, 76% 0, calc(76% + 18px) 14px, calc(100% - 50px) 14px, 100% 58px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  box-shadow:
    0 0 0 2px rgba(2, 5, 8, 0.94),
    0 0 0 4px rgba(195, 211, 214, 0.20),
    0 22px 50px rgba(0, 0, 0, 0.82),
    inset 0 0 0 1px rgba(4, 7, 10, 0.98),
    inset 0 0 0 3px rgba(213, 226, 227, 0.12),
    inset 22px 0 42px rgba(165, 47, 69, 0.10),
    inset -22px 0 46px rgba(68, 189, 203, 0.07);
}

#namezone {
  color: var(--name-color);
  background: transparent;
  border: 5px solid transparent;
  border-radius: 0;
  clip-path: none;
  outline: 0;
  text-align: center;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.58),
    0 0 18px color-mix(in srgb, currentColor 24%, transparent);
  text-shadow: 0 0 10px currentColor, 0 2px 3px rgba(0, 0, 0, 0.92);
}

#bodyzone {
  color: var(--text-color);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.92), 0 0 12px rgba(217, 231, 231, 0.05);
}

.cutin {
  isolation: isolate;
  overflow: visible;
  border: 0;
  border-image: none;
  border-radius: 0;
  background: url("assets/ui-cutin-bezel.webp") center / 100% 100% no-repeat;
  box-shadow: none;
}

.cutin[data-slot="左上"],
.cutin[data-slot="左下"] {
  clip-path: none;
  filter: drop-shadow(12px 14px 20px rgba(0, 0, 0, 0.72));
}

.cutin[data-slot="右上"],
.cutin[data-slot="右下"] {
  clip-path: none;
  background-image: url("assets/ui-cutin-bezel-right.webp");
  filter: drop-shadow(-12px 14px 20px rgba(0, 0, 0, 0.72));
}

.cutin img {
  background: #05080b;
}

.cutin[data-slot="左上"] img,
.cutin[data-slot="左下"] img {
  clip-path: polygon(8.25% 3.2%, 96.38% 3.2%, 97.88% 5.47%, 97.88% 94.53%, 96.38% 96.8%, 8.25% 96.8%, 2.13% 87.55%, 2.13% 12.45%);
}

.cutin[data-slot="右上"] img,
.cutin[data-slot="右下"] img {
  clip-path: polygon(3.62% 3.2%, 91.75% 3.2%, 97.88% 12.45%, 97.88% 87.55%, 91.75% 96.8%, 3.62% 96.8%, 2.13% 94.53%, 2.13% 5.47%);
}

.uibtn {
  color: var(--ui-color);
  background:
    linear-gradient(90deg, rgba(216, 189, 88, 0.20), transparent 36%),
    repeating-linear-gradient(118deg, rgba(240, 247, 245, 0.025) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(39, 54, 63, 0.98), rgba(6, 11, 17, 0.98));
  border: 1px solid rgba(181, 203, 208, 0.58);
  border-left: 3px solid rgba(68, 189, 203, 0.84);
  border-bottom-color: rgba(216, 189, 88, 0.48);
  border-radius: 0;
  clip-path: polygon(0 9px, 9px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 14px rgba(68, 189, 203, 0.04);
  font-family: "Segoe UI", "Yu Gothic", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.94);
}

#game-ui {
  background:
    linear-gradient(180deg, rgba(216, 189, 88, 0.78), transparent 28%) left top / 3px 100% no-repeat,
    linear-gradient(0deg, rgba(68, 189, 203, 0.72), transparent 34%) right bottom / 3px 100% no-repeat,
    repeating-linear-gradient(118deg, rgba(235, 243, 241, 0.022) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, rgba(18, 28, 35, 0.96), rgba(4, 8, 12, 0.98));
  border: 1px solid rgba(202, 218, 220, 0.42);
  border-top-color: rgba(232, 240, 239, 0.68);
  border-bottom-color: rgba(68, 189, 203, 0.48);
  clip-path: polygon(0 14px, 14px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 10px 100%, 0 calc(100% - 10px));
  box-shadow:
    0 0 0 2px rgba(3, 6, 9, 0.88),
    0 14px 34px rgba(0, 0, 0, 0.64),
    inset 0 0 0 2px rgba(226, 235, 234, 0.04),
    inset 0 0 22px rgba(68, 189, 203, 0.06);
}

#btn-auto { --btn-signal: #44bdcb; }
#btn-history { --btn-signal: #d8bd58; }
#btn-settings { --btn-signal: #a94e86; }
#btn-game-top { --btn-signal: #a52f45; }

#game-ui .uibtn {
  color: #dbe5e4;
  background:
    linear-gradient(90deg, var(--btn-signal) 0 5px, transparent 5px) top left / 100% 100% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--btn-signal) 22%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(37, 51, 59, 0.98), rgba(6, 11, 16, 0.99));
  border-color: rgba(190, 207, 210, 0.48);
  border-top-color: rgba(237, 244, 242, 0.66);
  border-left-color: var(--btn-signal);
  border-bottom-color: color-mix(in srgb, var(--btn-signal) 62%, #111820);
  clip-path: polygon(0 10px, 10px 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  box-shadow:
    inset 0 0 0 2px rgba(2, 5, 8, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 5px 14px rgba(0, 0, 0, 0.58);
}

#game-ui .uibtn::before {
  content: "▰";
  color: var(--btn-signal);
  text-shadow: 0 0 8px var(--btn-signal);
}

.uibtn::before {
  content: "◆";
  color: var(--signal-cyan);
  margin-right: 6px;
  font-size: 0.72em;
  text-shadow: 0 0 8px rgba(68, 189, 203, 0.68);
}

.uibtn:hover {
  color: #f3f7f5;
  background:
    linear-gradient(90deg, rgba(216, 189, 88, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(56, 72, 82, 0.98), rgba(10, 17, 24, 0.98));
  border-color: rgba(221, 232, 232, 0.78);
  border-left-color: var(--signal-gold);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.60), inset 0 0 18px rgba(68, 189, 203, 0.08);
}

.uibtn.active {
  color: #f0d87a;
  border-color: var(--signal-gold);
  border-left-color: var(--signal-red);
  background:
    linear-gradient(90deg, rgba(165, 47, 69, 0.28), transparent 44%),
    linear-gradient(180deg, rgba(42, 50, 57, 0.98), rgba(8, 13, 19, 0.98));
  box-shadow: 0 0 18px rgba(216, 189, 88, 0.15), inset 0 0 16px rgba(216, 189, 88, 0.08);
}

.ep {
  color: #9eafb3;
  background:
    linear-gradient(90deg, rgba(68, 189, 203, 0.58) 0 4px, transparent 4px),
    linear-gradient(180deg, rgba(227, 236, 234, 0.09), transparent 30%),
    repeating-linear-gradient(118deg, rgba(236, 244, 242, 0.02) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, rgba(14, 23, 30, 0.97), rgba(7, 12, 18, 0.72));
  border-top: 1px solid rgba(192, 208, 211, 0.24);
  border-bottom: 1px solid rgba(192, 208, 211, 0.14);
  border-left: 3px solid rgba(68, 189, 203, 0.52);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  padding: 6px 14px 6px 10px;
  font-family: "Segoe UI", "Yu Gothic", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

#ep-indicator {
  background:
    linear-gradient(180deg, rgba(216, 189, 88, 0.76), transparent 35%) left top / 2px 100% no-repeat,
    linear-gradient(90deg, rgba(68, 189, 203, 0.28), transparent 55%),
    linear-gradient(135deg, rgba(16, 25, 32, 0.92), rgba(4, 8, 12, 0.94));
  border: 1px solid rgba(192, 209, 212, 0.30);
  border-right-color: rgba(68, 189, 203, 0.52);
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  box-shadow:
    0 0 0 2px rgba(3, 6, 9, 0.78),
    0 12px 28px rgba(0, 0, 0, 0.52),
    inset 0 0 0 2px rgba(222, 232, 231, 0.035);
}

#ep-indicator .ep::before {
  content: "▰ ";
  color: var(--signal-cyan);
  text-shadow: 0 0 7px rgba(68, 189, 203, 0.72);
}

.ep.current {
  color: #f0d77b;
  background:
    linear-gradient(90deg, rgba(165, 47, 69, 0.24), rgba(13, 21, 28, 0.74)),
    linear-gradient(90deg, rgba(216, 189, 88, 0.92) 0 4px, transparent 4px);
  border-left-color: var(--signal-gold);
  box-shadow: 0 0 16px rgba(216, 189, 88, 0.12);
  text-shadow: 0 0 10px rgba(216, 189, 88, 0.38), 0 1px 4px rgba(0, 0, 0, 0.92);
}

#ep-indicator .ep.current::before {
  color: var(--signal-gold);
  text-shadow: 0 0 9px rgba(216, 189, 88, 0.82);
}

#click-wait::after {
  content: "◇";
  display: block;
  color: #f0d77a;
  text-shadow:
    0 0 4px #ffffff,
    0 0 12px rgba(216, 189, 88, 0.92),
    8px 0 0 rgba(68, 189, 203, 0.48);
}

#top-panel,
#end-panel {
  color: var(--metal-white);
  background:
    linear-gradient(90deg, rgba(165, 47, 69, 0.22) 0 7px, transparent 7px),
    linear-gradient(90deg, rgba(216, 189, 88, 0.88) 0 20%, rgba(68, 189, 203, 0.46) 20% 34%, transparent 34%) top left / 100% 3px no-repeat,
    linear-gradient(135deg, rgba(15, 23, 30, 0.94), rgba(5, 9, 14, 0.82)),
    var(--top-overlay);
  border: 1px solid rgba(203, 219, 221, 0.66);
  border-left: 5px solid var(--signal-gold);
  border-right: 2px solid rgba(68, 189, 203, 0.62);
  border-radius: 0;
  clip-path: polygon(0 24px, 24px 0, calc(100% - 54px) 0, 100% 54px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(4, 8, 12, 0.82),
    0 0 0 3px rgba(68, 189, 203, 0.10),
    inset 22px 0 42px rgba(165, 47, 69, 0.08),
    inset -18px 0 38px rgba(68, 189, 203, 0.05);
  backdrop-filter: blur(5px) saturate(0.82);
}

#top-panel {
  padding-left: 42px;
  padding-right: 36px;
  clip-path: polygon(0 0, calc(100% - 54px) 0, 100% 54px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}

body[data-layout="sp-v"] #top-panel,
body[data-layout="sp-h"] #top-panel {
  padding-left: 28px;
  padding-right: 24px;
}

#top-title {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 4px 16px 5px 12px;
  white-space: nowrap;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 900;
  letter-spacing: 0;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #d8e2e1 18%, #69777a 38%, #f4f7f4 51%, #8b9698 63%, #f0d77b 80%, #6f5920 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.65px rgba(234, 241, 239, 0.72);
  paint-order: stroke fill;
  border-left: 4px solid var(--signal-gold);
  border-bottom: 1px solid rgba(68, 189, 203, 0.58);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  filter: drop-shadow(0 3px 1px rgba(0, 0, 0, 0.92)) drop-shadow(0 0 15px rgba(216, 189, 88, 0.28));
}

#top-title::after {
  content: "CIVIL HERITAGE";
  display: block;
  color: transparent;
  background: linear-gradient(180deg, #f5f8f6, #8b999c 52%, #d8bd58 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  font-family: "Segoe UI", "Yu Gothic", sans-serif;
  font-size: 0.30em;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.90), 0 0 8px rgba(68, 189, 203, 0.18);
}

#top-catch {
  color: #e0e7e5;
  background: linear-gradient(90deg, rgba(68, 189, 203, 0.13), transparent 86%);
  border-left: 3px solid rgba(68, 189, 203, 0.72);
  border-bottom: 1px solid rgba(203, 218, 220, 0.22);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  padding: 7px 14px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.90);
}

#top-author {
  display: inline-block;
  color: #d5c47e;
  background: rgba(8, 13, 19, 0.74);
  border-bottom: 1px solid rgba(216, 189, 88, 0.54);
  border-left: 2px solid var(--signal-red);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  padding: 4px 12px;
  letter-spacing: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.86);
}

#top-episodes .uibtn {
  color: #e0e8e8;
  background:
    linear-gradient(90deg, rgba(165, 47, 69, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(34, 47, 57, 0.96), rgba(7, 12, 18, 0.96));
  border-left-color: var(--signal-gold);
  border-bottom-color: rgba(68, 189, 203, 0.48);
  clip-path: polygon(0 12px, 12px 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

#top-links a,
#top-links button {
  color: #bfcdd0;
  background: linear-gradient(90deg, rgba(68, 189, 203, 0.10), rgba(8, 13, 19, 0.74));
  border: 0;
  border-bottom: 1px solid rgba(68, 189, 203, 0.54);
  border-left: 2px solid rgba(169, 78, 134, 0.72);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  padding: 4px 10px;
  text-decoration: none;
  letter-spacing: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.88);
}

#end-panel::before {
  content: "シビル・ヘリテージ";
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  margin-bottom: 5px;
  padding: 4px 16px 5px 12px;
  white-space: nowrap;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.45em;
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: 0;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #d8e2e1 18%, #69777a 38%, #f4f7f4 51%, #8b9698 63%, #f0d77b 80%, #6f5920 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.65px rgba(234, 241, 239, 0.72);
  paint-order: stroke fill;
  border-left: 4px solid var(--signal-gold);
  border-bottom: 1px solid rgba(68, 189, 203, 0.58);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  filter: drop-shadow(0 3px 1px rgba(0, 0, 0, 0.92)) drop-shadow(0 0 15px rgba(216, 189, 88, 0.28));
}

#end-message {
  color: #edf2f0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  letter-spacing: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.90);
}

#end-message::before {
  content: "CIVIL HERITAGE\A ORIGINAL STORY / らぱすてー";
  display: block;
  margin-bottom: 14px;
  padding-bottom: 12px;
  white-space: pre-line;
  color: transparent;
  background: linear-gradient(180deg, #f5f8f6, #8b999c 52%, #d8bd58 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom: 1px solid rgba(216, 189, 88, 0.52);
  font-family: "Segoe UI", "Yu Gothic", sans-serif;
  font-size: 0.52em;
  font-weight: 650;
  line-height: 1.55;
  letter-spacing: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.88), 0 0 8px rgba(68, 189, 203, 0.16);
}

#end-credits {
  color: #aab8ba;
  padding: 6px 8px;
  background: rgba(3, 7, 11, 0.38);
  border: 0;
  font-size: 0.72em;
  line-height: 1.55;
  opacity: 0.76;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.90);
}

.overlay {
  background-color: rgba(3, 6, 9, 0.92);
  background-image:
    linear-gradient(135deg, rgba(165, 47, 69, 0.08), transparent 24%),
    linear-gradient(315deg, rgba(68, 189, 203, 0.08), transparent 26%),
    linear-gradient(rgba(3, 6, 9, 0.44), rgba(3, 6, 9, 0.44)),
    url("assets/ui-material-master.webp");
  background-size: 100% 100%, 100% 100%, 100% 100%, cover;
  background-position: center;
  color: var(--metal-white);
  backdrop-filter: blur(7px);
}

.panel {
  color: var(--metal-white);
  background:
    linear-gradient(90deg, rgba(216, 189, 88, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(20, 30, 38, 0.98), rgba(6, 10, 15, 0.98));
  border: 2px solid rgba(196, 213, 216, 0.62);
  border-left: 5px solid var(--signal-cyan);
  border-bottom-color: rgba(216, 189, 88, 0.52);
  border-radius: 0;
  clip-path: polygon(0 24px, 24px 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.82), inset 0 0 28px rgba(68, 189, 203, 0.04);
}

.panel h2 {
  color: #f0d77b;
  background: linear-gradient(90deg, rgba(165, 47, 69, 0.22), transparent 74%);
  border-left: 4px solid var(--signal-gold);
  border-bottom: 1px solid rgba(68, 189, 203, 0.36);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  padding: 7px 12px;
  letter-spacing: 0;
  text-shadow: 0 0 10px rgba(216, 189, 88, 0.26);
}

#ov-credits .panel {
  width: min(760px, 82%);
  min-width: 0;
}

#credits-text {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 38px;
  align-items: stretch;
  padding: 18px 8px 22px;
  white-space: normal !important;
}

.credits-primary {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 138px;
  padding: 10px 20px 12px 24px;
  background:
    linear-gradient(90deg, rgba(216, 189, 88, 0.12), transparent 78%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(2, 6, 10, 0.18));
  border-left: 4px solid var(--signal-gold);
  border-bottom: 1px solid rgba(216, 189, 88, 0.34);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.credits-primary::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 14px;
  width: 38px;
  height: 2px;
  background: linear-gradient(90deg, var(--signal-gold), var(--signal-cyan));
  box-shadow: 0 0 8px rgba(216, 189, 88, 0.32);
}

.credits-primary-label {
  color: #9cabad;
  font-family: "Segoe UI", sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
}

.credits-primary-role {
  margin-top: 8px;
  color: #f0d77b;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.credits-primary-author {
  margin-top: 2px;
  color: #f7f8f4;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.92), 0 0 10px rgba(216, 189, 88, 0.14);
}

.credits-primary-title {
  margin-top: 8px;
  color: #cdd7d6;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.credits-secondary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 8px 12px 20px;
  color: #9fadaf;
  border-right: 2px solid rgba(68, 189, 203, 0.34);
  text-align: right;
}

.credits-secondary::before {
  content: "MATERIALS / PRODUCTION";
  margin-bottom: 9px;
  color: #6f8588;
  font-family: "Segoe UI", sans-serif;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.2;
}

.credits-secondary-line {
  font-size: 11px;
  line-height: 1.65;
}

#ov-credits .setting-row {
  margin-top: 0;
}

body[data-layout="sp-v"] #ov-credits .panel {
  width: 86%;
  padding-left: 16px;
  padding-right: 16px;
}

body[data-layout="sp-v"] #credits-text {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 12px;
  padding: 12px 2px 16px;
}

body[data-layout="sp-v"] .credits-primary {
  min-height: 126px;
  padding: 8px 10px 10px 14px;
}

body[data-layout="sp-v"] .credits-primary-author {
  font-size: 24px;
}

body[data-layout="sp-v"] .credits-primary-title {
  font-size: 10px;
}

body[data-layout="sp-v"] .credits-secondary {
  padding: 8px 5px 8px 8px;
}

body[data-layout="sp-v"] .credits-secondary-line {
  font-size: 8px;
}

body[data-layout="sp-h"] #credits-text {
  gap: 22px;
  padding-top: 10px;
  padding-bottom: 12px;
}

body[data-layout="sp-h"] .credits-primary {
  min-height: 106px;
  padding-top: 7px;
  padding-bottom: 8px;
}

body[data-layout="sp-h"] .credits-primary-author {
  font-size: 27px;
}

body[data-layout="sp-h"] .credits-secondary-line {
  font-size: 9px;
  line-height: 1.45;
}

.setting-row {
  color: #c9d4d5;
  background: linear-gradient(90deg, rgba(68, 189, 203, 0.06), transparent);
  border-bottom: 1px solid rgba(195, 212, 214, 0.14);
  padding: 6px 8px;
}

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

#history-list .h-name {
  color: #f0d77b;
  text-shadow: 0 0 8px rgba(216, 189, 88, 0.28);
}

#history-list .h-page {
  color: #d9e2e1;
  background: linear-gradient(90deg, rgba(68, 189, 203, 0.06), transparent 86%);
  border-left: 2px solid rgba(68, 189, 203, 0.42);
  border-bottom: 1px solid rgba(195, 212, 214, 0.12);
  padding: 8px 10px;
}

/* Recovered cryogenic flight-recorder assembly. The runtime owns geometry;
   these generated parts supply the machine's shared physical language. */
#canvas {
  background-color: #05080b;
  background-image:
    linear-gradient(rgba(3, 6, 9, 0.10), rgba(3, 6, 9, 0.10)),
    url("assets/ui-recorder-chassis-pc.webp");
  background-size: 100% 100%, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

body[data-layout="sp-v"] #canvas {
  background-image:
    linear-gradient(rgba(3, 6, 9, 0.10), rgba(3, 6, 9, 0.10)),
    url("assets/ui-recorder-chassis-spv.webp");
}

body[data-layout="sp-h"] #canvas {
  background-image:
    linear-gradient(rgba(3, 6, 9, 0.10), rgba(3, 6, 9, 0.10)),
    url("assets/ui-recorder-chassis-sph.webp");
}

#textarea {
  background-color: #06090d;
  background-image:
    linear-gradient(rgba(2, 5, 8, 0.12), rgba(2, 5, 8, 0.12)),
    url("assets/ui-name-dock.webp"),
    url("assets/ui-transcript-bay-pc.webp");
  background-size: 100% 100%, 254px 74px, 100% 100%;
  background-position: center, left 3px top, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  border-color: rgba(221, 232, 232, 0.18);
  outline-color: rgba(68, 189, 203, 0.16);
  clip-path: none;
}

body[data-layout="sp-v"] #textarea {
  background-image:
    linear-gradient(rgba(2, 5, 8, 0.12), rgba(2, 5, 8, 0.12)),
    url("assets/ui-name-dock.webp"),
    url("assets/ui-transcript-bay-spv.webp");
  background-size: 100% 100%, 187px 54px, 100% 100%;
  background-position: center, left -16px top, center;
}

body[data-layout="sp-h"] #textarea {
  background-image:
    linear-gradient(rgba(2, 5, 8, 0.12), rgba(2, 5, 8, 0.12)),
    url("assets/ui-name-dock.webp"),
    url("assets/ui-transcript-bay-sph.webp");
  background-size: 100% 100%, 187px 54px, 100% 100%;
  background-position: center, left -14px top, center;
}

#namezone {
  background-color: transparent;
  background-image: url("assets/ui-name-cartridge.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: 5px solid transparent;
  outline: 0;
  clip-path: none;
  text-indent: 0;
  text-align: center;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.72),
    0 0 12px color-mix(in srgb, currentColor 18%, transparent);
}

#game-ui {
  background-color: rgba(4, 8, 12, 0.92);
  background-image: url("assets/ui-command-rail-v.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.58);
}

body[data-layout="sp-v"] #game-ui {
  background-image: url("assets/ui-command-rail-h.webp");
}

body[data-layout="sp-h"] #game-ui {
  background-image: url("assets/ui-command-rail-v.webp");
}

#game-ui .uibtn {
  background-color: rgba(3, 7, 11, 0.66);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--btn-signal) 18%, transparent), transparent 54%),
    linear-gradient(180deg, rgba(34, 45, 52, 0.44), rgba(4, 8, 12, 0.70));
  border-color: color-mix(in srgb, var(--btn-signal) 42%, #8e9ca0);
  box-shadow:
    inset 0 0 0 1px rgba(229, 237, 235, 0.10),
    inset 0 0 15px rgba(0, 0, 0, 0.54);
}

#ep-indicator .ep {
  background-color: rgba(4, 8, 12, 0.88);
  background-image:
    linear-gradient(90deg, rgba(68, 189, 203, 0.10), transparent 64%),
    url("assets/ui-name-cartridge.webp");
  background-size: 100% 100%, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border: 0;
}

#top-panel,
#end-panel,
.panel {
  background-color: rgba(4, 8, 12, 0.90);
  background-image:
    linear-gradient(rgba(4, 8, 12, 0.04), rgba(4, 8, 12, 0.04)),
    url("assets/ui-story-panel.webp");
  background-size: 100% 100%, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border: 0;
  clip-path: none;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.76),
    0 0 0 1px rgba(104, 122, 126, 0.34);
}

body[data-layout="sp-h"] #top-panel,
body[data-layout="sp-h"] #end-panel {
  background-image:
    linear-gradient(rgba(4, 8, 12, 0.04), rgba(4, 8, 12, 0.04)),
    url("assets/ui-story-band.webp");
}

body[data-layout="sp-v"] #top-episodes,
body[data-layout="sp-v"] #top-links {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

body[data-layout="sp-v"] #top-episodes .uibtn {
  flex: 1 1 100%;
  min-width: 0;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

body[data-layout="sp-v"] #top-links > * {
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

/* Smartphone landscape: runtime owns the lower band position. Content remains
   shallow and horizontal so the KV faces stay visible above it. */
body[data-layout="sp-h"] #top-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr);
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  row-gap: 2px;
  padding: 11px 18px 9px;
  min-height: 126px;
  box-sizing: border-box;
}

body[data-layout="sp-h"] #top-title {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  padding: 2px 8px 3px 7px;
  font-size: 18px;
  line-height: 1.15;
}

body[data-layout="sp-h"] #top-title::after {
  font-size: 0.28em;
  line-height: 1.1;
}

body[data-layout="sp-h"] #top-catch {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: 2px 7px;
  font-size: 10px;
  line-height: 1.25;
}

body[data-layout="sp-h"] #top-author {
  grid-column: 1;
  grid-row: 3;
  margin: 0;
  padding: 2px 7px;
  font-size: 9px;
  line-height: 1.2;
}

body[data-layout="sp-h"] #top-episodes {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  align-content: center;
  gap: 4px;
  margin: 0;
}

body[data-layout="sp-h"] #top-episodes .uibtn {
  min-width: 0;
  min-height: 30px;
  padding: 2px 7px;
  font-size: 9px;
  white-space: nowrap;
}

body[data-layout="sp-h"] #top-links {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 9px;
}

body[data-layout="sp-h"] #top-links a,
body[data-layout="sp-h"] #top-links button {
  min-height: 26px;
  padding: 2px 6px;
  font-size: 9px;
  white-space: nowrap;
}

body[data-layout="sp-h"] #end-panel {
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) minmax(0, 1.5fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 3px;
  padding: 10px 18px 8px;
  text-align: left;
  min-height: 126px;
  box-sizing: border-box;
}

body[data-layout="sp-h"] #end-panel::before {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0;
  padding: 2px 8px 3px 7px;
  font-size: 17px;
  line-height: 1.15;
}

body[data-layout="sp-h"] #end-message {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  font-size: 12px;
  line-height: 1.25;
}

body[data-layout="sp-h"] #end-message::before {
  margin-bottom: 3px;
  padding-bottom: 3px;
  font-size: 0.58em;
  line-height: 1.15;
}

body[data-layout="sp-h"] #end-credits {
  grid-column: 2;
  grid-row: 1;
  column-count: 2;
  column-gap: 12px;
  margin: 0;
  padding: 1px 0;
  font-size: 8px;
  line-height: 1.12;
  text-align: left;
}

body[data-layout="sp-h"] #end-actions {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-content: flex-end;
  gap: 5px;
  margin: 0;
}

body[data-layout="sp-h"] #end-actions .uibtn {
  min-height: 28px;
  padding: 2px 7px;
  font-size: 9px;
}

/* ===== 一括修正2: KVに直接組むエディトリアルTOP / END ===== */
#top-kv::after,
#end-kv::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#top-kv::after {
  background:
    linear-gradient(90deg, rgba(2, 5, 8, 0.92) 0%, rgba(3, 7, 11, 0.78) 31%, rgba(3, 7, 11, 0.24) 56%, transparent 72%),
    linear-gradient(0deg, rgba(2, 5, 8, 0.72), transparent 44%);
}

#end-kv::after {
  background:
    linear-gradient(90deg, rgba(2, 5, 8, 0.84) 0%, rgba(3, 7, 11, 0.62) 32%, rgba(3, 7, 11, 0.12) 58%, transparent 72%),
    linear-gradient(0deg, rgba(2, 5, 8, 0.76), transparent 48%);
}

#top-panel,
#end-panel {
  color: #edf3f1;
  background: none;
  background-image: none;
  border: 0;
  clip-path: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-layout="pc"] #top-panel {
  left: 5%;
  bottom: 6%;
  width: 650px;
  max-width: 44%;
  padding: 0;
}

#top-title {
  display: block;
  max-width: 100%;
  padding: 0 0 12px;
  white-space: nowrap;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 58px;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #dbe4e2 20%, #748184 40%, #fbfdf9 52%, #a0aaab 67%, #f2d979 84%, #725b20 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.7px rgba(237, 244, 241, 0.70);
  border: 0;
  clip-path: none;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 18px rgba(216, 189, 88, 0.18));
}

#top-title::before {
  content: "POST-APOCALYPTIC SCIENCE FICTION  /  CIVIL HERITAGE";
  display: block;
  margin-bottom: 10px;
  padding: 0 0 7px;
  color: #8ddce4;
  background: none;
  -webkit-text-fill-color: #8ddce4;
  -webkit-text-stroke: 0;
  border-bottom: 1px solid rgba(100, 208, 220, 0.56);
  font-family: "Segoe UI", "Yu Gothic", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.92);
}

#top-title::after {
  content: none;
}

#top-catch {
  margin-top: 4px;
  padding: 8px 0 8px 16px;
  color: #eef3f1;
  background: none;
  border: 0;
  border-left: 3px solid #d8bd58;
  clip-path: none;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 17px;
  line-height: 1.55;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.96);
}

#top-author {
  margin-top: 7px;
  padding: 0 0 0 16px;
  color: #cfdbda;
  background: none;
  border: 0;
  clip-path: none;
  font-family: "Segoe UI", "Yu Gothic", sans-serif;
  font-size: 12px;
  opacity: 0.82;
}

#top-author::before {
  content: "ORIGINAL STORY  /  ";
  color: #d8bd58;
  font-size: 0.82em;
}

#top-episodes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin-top: 17px;
}

#top-episodes::before {
  content: "EPISODE SELECT";
  display: block;
  padding-bottom: 4px;
  color: #7f9295;
  border-bottom: 1px solid rgba(139, 160, 163, 0.32);
  font-family: "Segoe UI", sans-serif;
  font-size: 9px;
  font-weight: 700;
}

#top-episodes .uibtn {
  justify-content: flex-start;
  min-height: 38px;
  padding: 5px 14px;
  color: #dbe5e4;
  background: linear-gradient(90deg, rgba(32, 43, 51, 0.88), rgba(7, 12, 17, 0.32));
  border: 0;
  border-left: 2px solid rgba(68, 189, 203, 0.78);
  border-bottom: 1px solid rgba(134, 154, 158, 0.28);
  clip-path: none;
  font-size: 12px;
  text-align: left;
}

#top-links {
  display: grid;
  grid-template-columns: repeat(6, auto);
  gap: 6px;
  margin-top: 12px;
  align-items: center;
}

#top-links #btn-start {
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 62px;
  color: #10171b;
  background: linear-gradient(180deg, #fff9c8 0%, #ead46f 55%, #c6a53b 100%);
  border: 1px solid #fff5b4;
  border-left: 8px solid #f4e48e;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.50), inset 0 0 0 1px rgba(83, 66, 18, 0.32);
  font-size: 0;
}

#top-links #btn-start::before {
  display: none;
}

#top-links #btn-start::after {
  content: "第一話から読む  ▶";
  font-family: "Yu Gothic", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #10171b;
}

#btn-continue {
  min-height: 34px;
  color: #d9e3e2;
  background: rgba(9, 16, 22, 0.76);
  border: 1px solid rgba(112, 137, 141, 0.48);
}

#top-links a,
#top-links button:not(#btn-start):not(#btn-continue) {
  min-height: 30px;
  padding: 3px 7px;
  color: #9eafb1;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(95, 125, 130, 0.36);
  clip-path: none;
  font-size: 9px;
  text-decoration: none;
}

#top-links::after {
  content: "CLICK / TAP   ·   ENTER / SPACE   ·   AUTO SAVE";
  grid-column: 1 / -1;
  display: block;
  margin-top: 2px;
  color: #63777a;
  font-family: "Segoe UI", sans-serif;
  font-size: 8px;
  line-height: 1;
}

/* END: 読了から原作へ視線を一本に通す。 */
body[data-layout="pc"] #end-panel {
  left: 5%;
  right: auto;
  top: auto;
  bottom: 5%;
  width: 620px;
  max-width: 46%;
  transform: none;
  padding: 0;
  text-align: left;
}

#end-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#end-panel::before {
  content: "【第二話】エンジェルステーション  読了";
  order: 0;
  align-self: flex-start;
  margin: 0 0 10px;
  padding: 5px 10px;
  color: #a4eff2;
  background: rgba(9, 25, 31, 0.74);
  border: 1px solid rgba(83, 200, 211, 0.58);
  font-family: "Segoe UI", "Yu Gothic", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

#end-message {
  order: 1;
  margin: 0;
  color: #f4f7f4;
  font-size: 0;
  text-align: left;
}

#end-message::before {
  content: "シビル・ヘリテージ";
  display: block;
  margin: 0;
  padding: 0 0 12px;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #d9e3e1 21%, #758184 42%, #fbfcf8 53%, #9ca7a8 68%, #f1d879 84%, #735b20 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.65px rgba(237, 244, 241, 0.68);
  border: 0;
  border-bottom: 1px solid rgba(216, 189, 88, 0.50);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 48px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
  text-shadow: 0 4px 2px rgba(0, 0, 0, 0.92);
}

#end-message::after {
  content: "物語の続きは、小説家になろうで！";
  display: block;
  margin-top: 15px;
  color: #f5f7f4;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.94);
}

#end-actions {
  order: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  justify-content: stretch;
  margin-top: 14px;
}

#end-source {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 8px 20px;
  color: #10171b;
  background: linear-gradient(180deg, #fff9c8 0%, #ead46f 56%, #c6a53b 100%);
  border: 1px solid #fff5b4;
  border-left: 8px solid #f4e48e;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.52), inset 0 0 0 1px rgba(83, 66, 18, 0.32);
  font-size: 0;
}

#end-source::before {
  display: none;
}

#end-source::after {
  content: "小説家になろうで続きを読む  ▶";
  color: #10171b;
  font-family: "Yu Gothic", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

#btn-end-top {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  min-height: 30px;
  padding: 2px 10px;
  color: #9eafb1;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(95, 125, 130, 0.40);
  font-size: 0;
}

#btn-end-top::after {
  content: "タイトルへ戻る";
  font-size: 10px;
}

#end-author {
  grid-column: 1 / -1;
  grid-row: 3;
  width: 100%;
  color: #f5f7f4;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.94);
}

#end-credits {
  order: 3;
  margin-top: 12px;
  padding: 7px 0 0;
  color: #7e9092;
  background: none;
  border: 0;
  border-top: 1px solid rgba(107, 130, 134, 0.26);
  font-size: 9px;
  line-height: 1.36;
  text-align: left;
  opacity: 0.78;
}

/* スマホ縦: 16:9 KV帯の下を誌面として使う。 */
body[data-layout="sp-v"] #top-kv::after,
body[data-layout="sp-v"] #end-kv::after {
  background: linear-gradient(0deg, rgba(2, 5, 8, 0.58), transparent 70%);
}

body[data-layout="sp-v"] #top-panel {
  left: 5%;
  right: 5%;
  top: 239px;
  bottom: auto;
  max-width: none;
  padding: 20px 18px 22px;
  background: linear-gradient(180deg, rgba(5, 10, 15, 0.98), rgba(2, 5, 8, 0.92));
}

body[data-layout="sp-v"] #top-title {
  font-size: 30px;
}

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

body[data-layout="sp-v"] #top-catch {
  padding: 6px 0 6px 11px;
  font-size: 14px;
}

body[data-layout="sp-v"] #top-author {
  padding-left: 11px;
  font-size: 10px;
}

body[data-layout="sp-v"] #top-episodes {
  margin-top: 12px;
}

body[data-layout="sp-v"] #top-episodes .uibtn {
  min-height: 42px;
  padding: 5px 10px;
  font-size: 10px;
}

body[data-layout="sp-v"] #top-links {
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 10px;
}

body[data-layout="sp-v"] #top-links #btn-start {
  grid-column: 1 / -1;
  min-height: 54px;
}

body[data-layout="sp-v"] #top-links #btn-start::after {
  font-size: 16px;
}

body[data-layout="sp-v"] #btn-continue {
  grid-column: 1 / -1;
}

body[data-layout="sp-v"] #top-links::after {
  font-size: 7px;
}

body[data-layout="sp-v"] #end-panel {
  left: 5%;
  right: 5%;
  top: 250px;
  bottom: auto;
  width: auto;
  max-width: none;
  transform: none;
  padding: 22px 20px;
  background: linear-gradient(180deg, rgba(5, 10, 15, 0.98), rgba(2, 5, 8, 0.92));
  text-align: left;
}

body[data-layout="sp-v"] #end-message::before {
  font-size: 29px;
}

body[data-layout="sp-v"] #end-message::after {
  margin-top: 13px;
  font-size: 22px;
}

body[data-layout="sp-v"] #end-source {
  min-height: 56px;
}

body[data-layout="sp-v"] #end-source::after {
  font-size: 16px;
}

body[data-layout="sp-v"] #end-author {
  font-size: 22px;
}

/* スマホ横: 高さ1/3以下の横長誌面。 */
body[data-layout="sp-h"] #top-panel {
  display: grid;
  grid-template-columns: minmax(178px, 0.88fr) minmax(245px, 1.25fr) minmax(190px, 0.95fr);
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  row-gap: 2px;
  padding: 9px 14px 8px;
  min-height: 126px;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgba(3, 7, 11, 0.98), rgba(7, 13, 18, 0.94));
}

body[data-layout="sp-h"] #top-title {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  padding: 0 0 4px;
  font-size: 17px;
}

body[data-layout="sp-h"] #top-title::before {
  margin-bottom: 4px;
  padding-bottom: 3px;
  font-size: 5.5px;
}

body[data-layout="sp-h"] #top-catch {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: 2px 0 2px 6px;
  font-size: 8px;
  line-height: 1.2;
}

body[data-layout="sp-h"] #top-author {
  grid-column: 1;
  grid-row: 3;
  margin: 0;
  padding: 0 0 0 6px;
  font-size: 7px;
  line-height: 1.1;
}

body[data-layout="sp-h"] #top-episodes {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 3px;
  margin: 0;
}

body[data-layout="sp-h"] #top-episodes::before {
  padding-bottom: 2px;
  font-size: 6px;
}

body[data-layout="sp-h"] #top-episodes .uibtn {
  min-height: 29px;
  padding: 2px 7px;
  font-size: 8px;
}

body[data-layout="sp-h"] #top-links {
  grid-column: 3;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: center;
  gap: 3px;
  margin: 0;
}

body[data-layout="sp-h"] #top-links #btn-start {
  grid-column: 1 / -1;
  min-height: 34px;
  border-left-width: 4px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

body[data-layout="sp-h"] #top-links #btn-start::after {
  font-size: 11px;
}

body[data-layout="sp-h"] #btn-continue,
body[data-layout="sp-h"] #top-links a,
body[data-layout="sp-h"] #top-links button:not(#btn-start) {
  min-height: 22px;
  padding: 1px 3px;
  font-size: 6.5px;
}

body[data-layout="sp-h"] #top-links::after {
  margin: 0;
  font-size: 5px;
}

body[data-layout="sp-h"] #end-panel {
  display: grid;
  grid-template-columns: minmax(185px, 0.9fr) minmax(260px, 1.3fr) minmax(175px, 0.86fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  padding: 9px 14px 8px;
  min-height: 126px;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgba(3, 7, 11, 0.98), rgba(7, 13, 18, 0.94));
  text-align: left;
}

body[data-layout="sp-h"] #end-panel::before {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0 0 3px;
  padding: 2px 5px;
  font-size: 6px;
}

body[data-layout="sp-h"] #end-message {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  font-size: 0;
}

body[data-layout="sp-h"] #end-message::before {
  padding-bottom: 4px;
  font-size: 17px;
  line-height: 1.05;
}

body[data-layout="sp-h"] #end-message::after {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.15;
}

body[data-layout="sp-h"] #end-credits {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  column-count: 2;
  column-gap: 10px;
  margin: 0;
  padding: 2px 0;
  font-size: 7px;
  line-height: 1.18;
}

body[data-layout="sp-h"] #end-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: 4px;
  margin: 0;
}

body[data-layout="sp-h"] #end-source {
  min-height: 38px;
  padding: 3px 6px;
  border-left-width: 4px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

body[data-layout="sp-h"] #end-source::after {
  font-size: 10px;
}

body[data-layout="sp-h"] #btn-end-top {
  min-height: 23px;
  padding: 1px 4px;
}

body[data-layout="sp-h"] #btn-end-top::after {
  font-size: 7px;
}

body[data-layout="sp-h"] #end-author {
  width: 100%;
  font-size: 11px;
  line-height: 1.15;
  text-align: right;
}

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