/* CHOISE, VILLAIND OR NOT!! — fantasy romance and mystery */
.choice-page { --choice-ink: #302744; --choice-deep: #241d38; --choice-lilac: #a28ac8; --choice-rose: #d98b9d; --choice-gold: #d7b46f; --choice-paper: #faf6f1; background: var(--choice-paper); color: var(--choice-ink); }
.choice-page .site-header { color: var(--choice-ink); }
.choice-page .site-nav a:hover { color: #a66b8d; }
.choice-page .scroll-progress span { background: linear-gradient(90deg, var(--choice-rose), var(--choice-gold)); }
.choice-hero { position: relative; display: grid; min-height: min(900px, 100vh); grid-template-columns: minmax(0, 1fr) minmax(320px, .86fr); align-items: center; gap: 4vw; overflow: hidden; padding: 145px 9vw 105px; background: radial-gradient(ellipse at 72% 40%, #d9c8ed 0, transparent 38%), radial-gradient(ellipse at 20% 12%, #fff 0, transparent 30%), linear-gradient(135deg, #fbf5f2 0%, #eee8f8 55%, #f8eee8 100%); }
.choice-hero::before { position: absolute; top: -18%; right: 19%; width: 62vw; aspect-ratio: 1; border: 1px solid #9d87bd38; border-radius: 50%; content: ''; }
.choice-hero::after { position: absolute; right: -15%; bottom: 7%; width: 78%; height: 15%; transform: rotate(-13deg); background: linear-gradient(90deg, transparent, #d7b46f44, #c997c255, transparent); clip-path: polygon(0 40%, 100% 0, 86% 60%, 14% 100%); content: ''; }
.choice-hero-sparkles { position: absolute; inset: 0; opacity: .45; pointer-events: none; background-image: radial-gradient(#8d77a6 1px, transparent 1.5px), radial-gradient(#c79d65 1px, transparent 1.5px); background-position: 23px 40px, 95px 130px; background-size: 150px 170px, 210px 230px; mask-image: linear-gradient(90deg, transparent, #000 70%); }
.choice-hero-copy { position: relative; z-index: 3; max-width: 660px; }
.choice-hero-copy .eyebrow { color: #81708e; }
.choice-title { margin: 0; color: #352c4b; font: 900 clamp(63px, 9.4vw, 126px)/.78 var(--display); letter-spacing: -.04em; text-shadow: 0 9px 25px #fff9; }
.choice-title span { color: #a16f9b; }
.choice-subtitle { max-width: 460px; margin: 28px 0 22px; color: #665b70; font-size: 14px; line-height: 1.9; }
.choice-genre-tags, .choice-theme-list { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-genre-tags span { padding: 8px 10px; border: 1px solid #9181a548; border-radius: 999px; background: #fff8; color: #675875; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.choice-scroll { margin-top: 29px; border-color: #a28eae; color: #554b67; }
.choice-hero-art { position: relative; z-index: 2; display: grid; width: min(100%, 520px); height: min(650px, 72vh); min-height: 420px; justify-self: center; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 41%, #fff9 0 17%, #d9c7eb66 18% 36%, transparent 63%); }
.choice-hero-art::before { position: absolute; z-index: 0; inset: 7% 9%; border: 1px solid #8d79a83b; border-radius: 48% 52% 44% 56%; transform: rotate(-9deg); content: ''; }
.choice-art-orbit { position: absolute; z-index: 0; width: 82%; aspect-ratio: 1; border: 1px solid #aa8fbb57; border-radius: 50%; }
.choice-art-orbit--one { transform: rotate(24deg) scaleY(.64); }
.choice-art-orbit--two { transform: rotate(-28deg) scaleY(.82); border-color: #d6b87868; }
.choice-figure-placeholder { position: absolute; z-index: 1; bottom: 8%; left: 50%; width: 48%; height: 68%; transform: translateX(-50%); border-radius: 48% 48% 18% 18%; background: linear-gradient(160deg, #fff6e9, #b8a3ca 48%, #665775 49%, #40394f); clip-path: polygon(35% 0, 65% 0, 74% 9%, 82% 18%, 100% 100%, 0 100%, 18% 18%, 26% 9%); filter: drop-shadow(0 15px 20px #54436635); opacity: .82; transition: opacity .4s ease; }
.choice-figure-placeholder::before { position: absolute; top: -13%; left: 30%; width: 40%; height: 28%; border-radius: 48% 48% 44% 44%; background: linear-gradient(120deg, #f6e5d4, #c6aabd); box-shadow: -12px -5px 0 1px #695a75; content: ''; }
.choice-figure-placeholder i { position: absolute; top: 4%; right: 7%; width: 44%; height: 31%; transform: rotate(17deg); border-radius: 0 90% 10% 85%; background: #f2e9e4; }
.choice-figure-placeholder b { position: absolute; top: 35%; left: -12%; width: 65%; height: 48%; transform: rotate(19deg); background: linear-gradient(130deg, #e8d7e9, #8f78aa); clip-path: polygon(0 5%, 100% 0, 76% 100%, 32% 71%); }
.choice-figure-placeholder span { position: absolute; right: -15%; bottom: 2%; width: 55%; height: 42%; transform: rotate(-16deg); background: #342b44; clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); }
.choice-hero-art img { position: absolute; z-index: 2; inset: 4%; display: none; width: 92%; height: 92%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 20px 30px #49385145); }
.choice-hero-art.has-image img { display: block; }
.choice-hero-art.has-image .choice-figure-placeholder { opacity: 0; }
.choice-art-caption { position: absolute; z-index: 3; right: 8%; bottom: 5%; color: #776986; font-size: 8px; letter-spacing: .22em; }
.choice-side-note { position: absolute; z-index: 3; top: 43%; right: 3.4vw; margin: 0; writing-mode: vertical-rl; color: #84768f; font-size: 8px; letter-spacing: .22em; }
.choice-hero-footer { position: absolute; z-index: 3; right: 5.4vw; bottom: 23px; left: 5.4vw; display: flex; justify-content: space-between; color: #796e84; font-size: 8px; letter-spacing: .18em; }
.choice-overview { min-height: 560px; overflow: hidden; background: #fffdfa; }
.choice-overview-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 9vw; }
.choice-overview-copy .eyebrow, .choice-synopsis-heading .eyebrow { color: #9a708f; }
.choice-overview-copy .display-title { font-size: clamp(60px, 8.5vw, 108px); }
.choice-overview-copy .display-title em { color: #c0809c; }
.choice-overview-detail { max-width: 490px; color: #655d6d; font-size: 13px; line-height: 1.95; }
.choice-lead { color: #3c334d; font: 600 20px/1.55 var(--body); }
.choice-theme-list { margin-top: 25px; }
.choice-theme-list span { padding: 8px 10px; border: 1px solid #d3c6db; border-radius: 999px; color: #806887; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.choice-watermark { position: absolute; right: 2%; bottom: -12%; color: #9c78b10b; font: 900 clamp(120px, 25vw, 300px)/.8 var(--display); letter-spacing: -.05em; pointer-events: none; }
.choice-cast { background: linear-gradient(135deg, #f5eff9, #fffaf6); }
.choice-cast-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 45px; }
.choice-cast-heading .display-title em { color: #a779a6; }
.choice-cast-heading > p { max-width: 270px; color: #726a76; font-size: 12px; line-height: 1.9; }
.choice-character-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 4vw, 48px); margin-top: 62px; }
.choice-character { min-width: 0; }
.choice-portrait { position: relative; display: grid; aspect-ratio: 4 / 5; place-items: center; overflow: hidden; border: 1px solid #c6b4d2; background: linear-gradient(160deg, #dfd2eb, #f8eff0 56%, #c6b4d6); box-shadow: 0 18px 36px #44354d17; }
.choice-portrait::before { position: absolute; inset: 8%; border: 1px solid #fff9; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); content: ''; }
.choice-portrait--challenger { background: linear-gradient(155deg, #f5dce0, #fff7ef 55%, #d5c3e5); }
.choice-portrait--past { background: linear-gradient(155deg, #d9d8f0, #fbf2ee 55%, #bca6cc); }
.choice-portrait-placeholder { position: relative; z-index: 1; color: #83728e; font: 700 12px/1.7 var(--display); letter-spacing: .2em; text-align: center; }
.choice-portrait-label { position: absolute; z-index: 3; right: 12px; bottom: 12px; left: 12px; padding: 10px; background: #352b48d9; color: #fff8ee; font-size: 8px; letter-spacing: .18em; text-align: center; }
.choice-portrait img { position: absolute; z-index: 2; inset: 0; display: none; width: 100%; height: 100%; padding: 9px; object-fit: contain; object-position: center bottom; }
.choice-portrait.has-image img { display: block; }
.choice-portrait.has-image .choice-portrait-placeholder { opacity: 0; }
.choice-character h3 { margin: 18px 0 5px; color: #352b47; font: 700 24px var(--display); text-transform: uppercase; }
.choice-character > p { margin: 0; color: #746b78; font-size: 11px; line-height: 1.8; }
.choice-image-note { margin-top: 38px; color: #847990; font-size: 10px; line-height: 1.8; }
.choice-synopsis { background: radial-gradient(ellipse at 90% 13%, #eadff0, transparent 30%), linear-gradient(180deg, #fbf8f4, #f3edf7 68%, #eee8f4); }
.choice-synopsis-heading { max-width: 770px; margin: 0 auto 70px; text-align: center; }
.choice-synopsis-heading .display-title { color: #342b47; font-size: clamp(55px, 8vw, 96px); }
.choice-synopsis-heading .display-title em { color: #ad769e; }
.choice-synopsis-heading > p:last-child { max-width: 430px; margin: 25px auto 0; color: #736b78; font-size: 13px; line-height: 1.9; }
.choice-chapter { position: relative; display: grid; grid-template-columns: 58px minmax(0, 720px); gap: 24px; max-width: 900px; margin: 0 auto; padding: 28px 0 37px; border-top: 1px solid #d8ccdc; }
.choice-chapter-number { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #b89ab9; border-radius: 50%; color: #986c94; font: 700 18px var(--display); }
.choice-chapter h3 { margin: 0 0 14px; color: #372d49; font: 700 26px var(--display); text-transform: uppercase; }
.choice-chapter p { margin: 0 0 15px; color: #5f5767; font-size: 13px; line-height: 2; }
.choice-chapter p:last-child { margin-bottom: 0; }
.choice-chapter--mystery .choice-chapter-number { border-color: #9d86bc; color: #766092; box-shadow: 0 0 20px #a68ac72b; }
.choice-chapter--ending { border-bottom: 1px solid #d8ccdc; }
.choice-chapter--ending .choice-chapter-number { background: #d7c4e2; color: #4c3c5e; }
.choice-memory-break { display: flex; max-width: 900px; align-items: center; justify-content: space-between; margin: 28px auto 34px; padding: 24px 28px; background: linear-gradient(100deg, #3b304f, #624a68 58%, #9b7189); color: #fff6ec; }
.choice-memory-break span { font-size: 9px; font-weight: 700; letter-spacing: .22em; }
.choice-memory-break b { color: #f0d99c; font-size: 32px; }
.choice-back { display: flex; width: fit-content; max-width: 100%; margin: 35px auto 0; color: #51455f; }
.choice-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 26px 5.4vw; background: #2e2740; color: #e9dff0; }
.choice-footer > span { font-size: 8px; letter-spacing: .15em; text-align: right; }
.choice-page .music-toggle { background: #342a49ec; }
@media (max-width: 900px) {
  .choice-hero { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); padding-right: 7vw; padding-left: 7vw; }
  .choice-title { font-size: clamp(58px, 9vw, 92px); }
}
@media (max-width: 700px) {
  .choice-hero { min-height: 980px; grid-template-columns: 1fr; align-content: start; gap: 15px; padding: 130px 8vw 90px; }
  .choice-hero-copy { max-width: 100%; }
  .choice-title { font-size: clamp(58px, 17vw, 92px); }
  .choice-subtitle { max-width: 340px; font-size: 12px; }
  .choice-genre-tags { max-width: 360px; }
  .choice-hero-art { width: min(100%, 380px); height: 390px; min-height: 330px; justify-self: center; }
  .choice-side-note { top: auto; right: 2%; bottom: 29%; font-size: 7px; }
  .choice-hero-footer { bottom: 17px; font-size: 6px; }
  .choice-overview { min-height: 0; }
  .choice-overview-layout { grid-template-columns: 1fr; gap: 30px; }
  .choice-overview-copy .display-title { font-size: clamp(58px, 16vw, 84px); }
  .choice-cast-heading { display: block; }
  .choice-cast-heading > p { margin-top: 22px; }
  .choice-character-grid { grid-template-columns: 1fr; max-width: 390px; margin: 42px auto 0; gap: 38px; }
  .choice-portrait { max-height: 470px; }
  .choice-synopsis-heading { margin-bottom: 45px; }
  .choice-synopsis-heading .display-title { font-size: clamp(50px, 14vw, 72px); }
  .choice-chapter { grid-template-columns: 38px minmax(0, 1fr); gap: 13px; padding: 23px 0 28px; }
  .choice-chapter-number { width: 34px; height: 34px; font-size: 15px; }
  .choice-chapter h3 { font-size: 23px; }
  .choice-chapter p { font-size: 12px; line-height: 1.9; }
  .choice-memory-break { padding: 19px; }
  .choice-memory-break span { max-width: 75%; font-size: 8px; line-height: 1.6; }
  .choice-footer { align-items: flex-start; flex-direction: column; }
  .choice-footer > span { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .choice-hero-art, .choice-hero-art *, .choice-memory-break { animation: none !important; }
}
/* Link to the dedicated reading page */
.choice-title-row { display:flex; align-items:flex-end; gap:12px; }
.choice-title-row .choice-title { min-width:0; font-size:clamp(48px,7.2vw,96px); }
.choice-read-link { display:inline-flex; flex:0 0 68px; align-items:center; justify-content:center; gap:3px; margin:0 0 7px; padding:8px 5px; border:1px solid #a779a67a; border-radius:50%; aspect-ratio:1; background:#fff9; color:#55445f; font-size:7px; font-weight:800; line-height:1.35; letter-spacing:.08em; text-align:center; transition:transform .25s,background .25s; }
.choice-read-link:hover { transform:translateY(-4px) rotate(5deg); background:#eadced; }
.choice-read-link b { color:#a16f9b; font-size:14px; }
@media(max-width:700px) { .choice-title-row { align-items:flex-start; flex-wrap:wrap; } .choice-title-row .choice-title { width:100%; font-size:clamp(58px,14vw,84px); } .choice-read-link { flex-basis:auto; width:auto; min-height:44px; border-radius:999px; aspect-ratio:auto; padding:9px 14px; } .choice-read-link span br { display:none; } }

/* Royal mystery palette and floating relics */
.choice-page { --choice-ink:#f2eee6; --choice-deep:#171820; --choice-lilac:#9e8db7; --choice-rose:#a85d70; --choice-gold:#cbb078; --choice-paper:#f2eee6; background:#171820; color:#f2eee6; }
.choice-page .site-header { color:#f4efe6; }
.choice-page .site-nav a:hover { color:#e0c486; }
.choice-page .choice-hero { background:radial-gradient(ellipse at 75% 34%,#523c59 0,transparent 37%),radial-gradient(ellipse at 18% 8%,#30443b 0,transparent 33%),radial-gradient(ellipse at 58% 100%,#713e4b38,transparent 46%),linear-gradient(135deg,#171820 0%,#20202a 53%,#27202c 100%); }
.choice-page .choice-hero::before { border-color:#cdb47735; box-shadow:0 0 0 25px #d6bf7908,0 0 0 58px #d6bf7905; }
.choice-page .choice-hero::after { background:linear-gradient(90deg,transparent,#bf9c5c3b,#986a8a55,transparent); }
.choice-page .choice-hero-sparkles { opacity:.32; background-image:radial-gradient(#e1c989 1px,transparent 1.5px),radial-gradient(#c0b1d8 1px,transparent 1.5px); }
.choice-page .choice-hero-copy .eyebrow,.choice-page .choice-side-note,.choice-page .choice-hero-footer { color:#c9bdc8; }
.choice-page .choice-title { color:#f2ecdf; text-shadow:0 8px 28px #0008; }
.choice-page .choice-title span { color:#d6b979; }
.choice-page .choice-subtitle { color:#d0c8d0; }
.choice-page .choice-genre-tags span { border-color:#d1b97850; background:#ffffff0a; color:#e0d5c2; }
.choice-page .choice-scroll { border-color:#d1bd83; color:#eddfbd; }
.choice-page .choice-hero-art { width:min(100%,520px); border:1px solid #d2b77b4d; background:radial-gradient(ellipse at 50% 42%,#e9dfcf 0 18%,#a58a9d 19% 34%,#41394c 35% 55%,transparent 72%); box-shadow:0 25px 85px #07080c77,inset 0 0 55px #d9bb6b16; }
.choice-page .choice-hero-art::before { border-color:#e0c88870; box-shadow:0 0 0 10px #d8c17c0a,inset 0 0 50px #f6e6c51c; }
.choice-page .choice-art-orbit { border-color:#dfc68775; animation:choice-orbit-turn 32s linear infinite; }
.choice-page .choice-art-orbit--two { border-color:#c6a6d27a; animation-direction:reverse; animation-duration:42s; }
.choice-page .choice-art-caption { color:#f0dfb7; text-shadow:0 2px 8px #171820; }
.choice-page .choice-hero-art > .choice-hero-character { position:absolute; z-index:2; inset:4%; display:none; width:92%; height:92%; border:1px solid #d7c79c99; border-radius:48% 48% 9% 9%; object-fit:contain; object-position:center bottom; box-shadow:0 16px 45px #06070b66; }
.choice-page .choice-hero-art.has-image > .choice-hero-character { display:block; }
.choice-hero-relics { position:absolute; z-index:4; inset:0; pointer-events:none; }
.choice-page .choice-hero-art .choice-hero-relics .choice-relic { position:absolute; z-index:4; inset:auto; display:block; width:auto; max-width:27%; padding:0; object-fit:contain; opacity:.92; filter:drop-shadow(0 8px 12px #05060b88) drop-shadow(0 0 7px #d4b36a60); }
.choice-page .choice-hero-art .choice-hero-relics .choice-relic--sword { top:12%; right:3%; height:54%; animation:choice-sword-float 6.8s ease-in-out infinite; }
.choice-page .choice-hero-art .choice-hero-relics .choice-relic--amber-staff { bottom:7%; left:2%; height:39%; animation:choice-staff-float 7.8s ease-in-out infinite; }
.choice-page .choice-hero-art .choice-hero-relics .choice-relic--azure-staff { right:10%; bottom:3%; height:42%; animation:choice-blue-relic-float 8.6s ease-in-out infinite; }
.choice-page .choice-overview { color:#ece5db; background:radial-gradient(ellipse at 80% 10%,#31433b50,transparent 34%),linear-gradient(135deg,#1b1d22,#24212a 65%,#29212b); }
.choice-page .choice-overview .section-index,.choice-page .choice-cast .section-index,.choice-page .choice-synopsis .section-index { color:#d1b879; }
.choice-page .section-index span { color:#bfb5c3; }
.choice-page .choice-overview-copy .eyebrow,.choice-page .choice-synopsis-heading .eyebrow { color:#d2b97f; }
.choice-page .choice-overview-copy .display-title { color:#f1ebdf; }
.choice-page .choice-overview-copy .display-title em { color:#c5a1bc; }
.choice-page .choice-overview-detail { color:#c9c2ca; }
.choice-page .choice-lead { color:#f3ead8; }
.choice-page .choice-theme-list span { border-color:#d0b87960; color:#ddc990; background:#ffffff06; }
.choice-page .choice-watermark { color:#d6c19e0c; }
.choice-page .choice-cast { color:#eee8df; background:radial-gradient(ellipse at 12% 4%,#38433d70,transparent 34%),linear-gradient(135deg,#22212a,#302538 58%,#24242b); }
.choice-page .choice-cast-heading .display-title { color:#f2ecdf; }
.choice-page .choice-cast-heading .display-title em { color:#d2b777; }
.choice-page .choice-cast-heading > p { color:#c9c0cb; }
.choice-page .choice-portrait { border-color:#c9ad6d88; background:linear-gradient(155deg,#3b3545,#27242d 55%,#453446); box-shadow:0 18px 42px #09090e55; }
.choice-page .choice-portrait::before { border-color:#e2cd9a60; }
.choice-page .choice-portrait--challenger { background:linear-gradient(155deg,#473640,#28232e 56%,#4a3546); }
.choice-page .choice-portrait--past { background:linear-gradient(155deg,#33423e,#28242f 56%,#423547); }
.choice-page .choice-portrait-placeholder { color:#d2c292; }
.choice-page .choice-portrait-label { border-top:1px solid #d4bb7b88; background:#19181ddd; color:#f1e5ca; }
.choice-page .choice-character h3 { color:#e4ca8d; }
.choice-page .choice-character > p,.choice-page .choice-image-note { color:#c2bac5; }
.choice-page .choice-synopsis { color:#ede7de; background:radial-gradient(ellipse at 88% 12%,#45344777,transparent 35%),radial-gradient(ellipse at 10% 75%,#273d3659,transparent 38%),linear-gradient(180deg,#1b1c23,#25212a 65%,#1d2021); }
.choice-page .choice-synopsis-heading .display-title { color:#f1ecdf; }
.choice-page .choice-synopsis-heading .display-title em { color:#d4b675; }
.choice-page .choice-synopsis-heading > p:last-child { color:#c9c2cb; }
.choice-page .choice-chapter { border-color:#c8b57a40; }
.choice-page .choice-chapter-number { border-color:#d1b97988; color:#e4cc8a; background:#ffffff07; }
.choice-page .choice-chapter h3 { color:#e7cf92; }
.choice-page .choice-chapter p { color:#d0c9d0; }
.choice-page .choice-chapter--ending .choice-chapter-number { background:#bda36e; color:#201d24; }
.choice-page .choice-memory-break { border:1px solid #c7ad724d; background:linear-gradient(100deg,#30332e,#3d2d42 58%,#67424e); box-shadow:0 12px 35px #09090d55; }
.choice-page .choice-back { color:#ebdfc8; }
.choice-page .choice-footer { border-top:1px solid #d1b77940; background:#14151a; color:#d7cda9; }
.choice-page .choice-footer .brand { color:#f2ecdf; }
.choice-page .music-toggle { border:1px solid #d3b77588; box-shadow:0 8px 24px #08090d77; }
@keyframes choice-orbit-turn { to { transform:rotate(360deg) scaleY(.72); } }
@keyframes choice-sword-float { 0%,100% { transform:translateY(0) rotate(7deg); } 50% { transform:translateY(-13px) rotate(12deg); } }
@keyframes choice-staff-float { 0%,100% { transform:translateY(0) rotate(-24deg); } 50% { transform:translateY(-9px) rotate(-19deg); } }
@keyframes choice-blue-relic-float { 0%,100% { transform:translateY(0) rotate(42deg); } 50% { transform:translateY(-11px) rotate(48deg); } }
@media(max-width:700px) {
  .choice-page .choice-hero-art { height:390px; }
  .choice-page .choice-hero-art .choice-hero-relics .choice-relic--sword { top:8%; right:0; height:48%; }
  .choice-page .choice-hero-art .choice-hero-relics .choice-relic--amber-staff { bottom:6%; left:0; height:34%; }
  .choice-page .choice-hero-art .choice-hero-relics .choice-relic--azure-staff { right:7%; bottom:2%; height:37%; }
}
@media(prefers-reduced-motion:reduce) {
  .choice-page .choice-art-orbit,.choice-hero-relics .choice-relic { animation:none !important; }
}