@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&family=Alegreya:ital,wght@0,400;0,700;1,400&display=swap');



:root {
    

    
    --c-bg:            #fff0c4;
    --c-bg-glow:       #fffdf0;              
    --c-surface:       #fffcf0;
    --c-surface-2:     #ffeebd;
    --c-border:        #f0d48a;
    --c-border-strong: #dcaa3c;

    
    --c-text:          #4d3410;
    --c-text-strong:   #2c1a04;
    --c-text-faint:    #9a7840;

    
    --c-accent:        #d9650b;              
    --c-accent-glow:   color-mix(in srgb, var(--c-accent) 45%, transparent);
    --c-selected:      #b10b1f;              
    --c-selected-glow: color-mix(in srgb, var(--c-selected) 55%, transparent);
    --c-good:          #4b8a1c;              
    --c-bad:           #b5311e;              
    --c-frame:         #e2a01c;              
    --c-on-accent:     #fffdf0;              

    
    --c-shadow:            rgba(170, 100, 0, 0.25);
    --c-veil:              color-mix(in srgb, var(--c-bg) 65%, transparent);   
    --c-locked-brightness: 0.97;             

    
    --font-main:       'Alegreya', Georgia, serif;
    --font-display:    'Yeseva One', Georgia, serif;
    --font-card-title: var(--font-display);

    
    --radius:  16px;
    --card-ratio: 2 / 3;
    --image-height: 55%;

    
    --chapter-palette: #d2a657, #c38a3d, #d9924e, #c7763b, #dc7f52, #c76346, #d86d60, #bf5458, #ce6072,
                       #b2496a, #bd5884, #9f437a, #a75492, #884184, #8e529a, #6f4188, #73529a, #554185;
    --chapter-bar-w: 10px;

    
    --orn-corner-tl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2060%27%20fill%3D%27none%27%20stroke%3D%27black%27%3E%3Cg%20transform%3D%27%27%3E%3Cpath%20d%3D%27M3%2058V16C3%208.8%208.8%203%2016%203H58%27%20stroke-width%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M9.5%2058V20C9.5%2014.2%2014.2%209.5%2020%209.5H58%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M16%2034c0-10%208-18%2018-18%27%20stroke-width%3D%271.4%27%2F%3E%3Cpath%20d%3D%27M20%2024c3-5%2010-6%2013-2s0%209-5%208-4-6%200-5%27%20stroke-width%3D%271.3%27%2F%3E%3Cpath%20d%3D%27M9.5%204.5l5%205-5%205-5-5z%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2734%27%20cy%3D%2716%27%20r%3D%271.8%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2734%27%20r%3D%271.8%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    --orn-corner-tr: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2060%27%20fill%3D%27none%27%20stroke%3D%27black%27%3E%3Cg%20transform%3D%27translate%2860%200%29%20scale%28-1%201%29%27%3E%3Cpath%20d%3D%27M3%2058V16C3%208.8%208.8%203%2016%203H58%27%20stroke-width%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M9.5%2058V20C9.5%2014.2%2014.2%209.5%2020%209.5H58%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M16%2034c0-10%208-18%2018-18%27%20stroke-width%3D%271.4%27%2F%3E%3Cpath%20d%3D%27M20%2024c3-5%2010-6%2013-2s0%209-5%208-4-6%200-5%27%20stroke-width%3D%271.3%27%2F%3E%3Cpath%20d%3D%27M9.5%204.5l5%205-5%205-5-5z%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2734%27%20cy%3D%2716%27%20r%3D%271.8%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2734%27%20r%3D%271.8%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    --orn-corner-bl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2060%27%20fill%3D%27none%27%20stroke%3D%27black%27%3E%3Cg%20transform%3D%27translate%280%2060%29%20scale%281%20-1%29%27%3E%3Cpath%20d%3D%27M3%2058V16C3%208.8%208.8%203%2016%203H58%27%20stroke-width%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M9.5%2058V20C9.5%2014.2%2014.2%209.5%2020%209.5H58%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M16%2034c0-10%208-18%2018-18%27%20stroke-width%3D%271.4%27%2F%3E%3Cpath%20d%3D%27M20%2024c3-5%2010-6%2013-2s0%209-5%208-4-6%200-5%27%20stroke-width%3D%271.3%27%2F%3E%3Cpath%20d%3D%27M9.5%204.5l5%205-5%205-5-5z%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2734%27%20cy%3D%2716%27%20r%3D%271.8%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2734%27%20r%3D%271.8%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    --orn-corner-br: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2060%27%20fill%3D%27none%27%20stroke%3D%27black%27%3E%3Cg%20transform%3D%27translate%2860%2060%29%20scale%28-1%20-1%29%27%3E%3Cpath%20d%3D%27M3%2058V16C3%208.8%208.8%203%2016%203H58%27%20stroke-width%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M9.5%2058V20C9.5%2014.2%2014.2%209.5%2020%209.5H58%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M16%2034c0-10%208-18%2018-18%27%20stroke-width%3D%271.4%27%2F%3E%3Cpath%20d%3D%27M20%2024c3-5%2010-6%2013-2s0%209-5%208-4-6%200-5%27%20stroke-width%3D%271.3%27%2F%3E%3Cpath%20d%3D%27M9.5%204.5l5%205-5%205-5-5z%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2734%27%20cy%3D%2716%27%20r%3D%271.8%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2734%27%20r%3D%271.8%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    
    --orn-story-size: 76px;
    --orn-story-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='black'%3E%3Cg transform=''%3E%3Cpath d='M4 78V12Q4 4 12 4H78' stroke-width='2.4'/%3E%3Cpath d='M10 78V34M34 10H78' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='6.2' fill='black' stroke='none'/%3E%3Cpath d='M28 17.3L44.9 16.1M27.9 19.4L36.8 20.7M27.4 21.5L43.3 27.5M26.4 23.4L34 28.3M25.1 25.1L37.1 37.1M23.4 26.4L28.3 34M21.5 27.4L27.5 43.3M19.4 27.9L20.7 36.8M17.3 28L16.1 44.9' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M10 49.4L12.6 52L10 54.6L7.4 52Z' fill='black' stroke='none'/%3E%3Cpath d='M52 7.4L54.6 10L52 12.6L49.4 10Z' fill='black' stroke='none'/%3E%3Ccircle cx='10' cy='66' r='1.3' fill='black' stroke='none'/%3E%3Ccircle cx='66' cy='10' r='1.3' fill='black' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    --orn-story-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='black'%3E%3Cg transform='translate(80 0) scale(-1 1)'%3E%3Cpath d='M4 78V12Q4 4 12 4H78' stroke-width='2.4'/%3E%3Cpath d='M10 78V34M34 10H78' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='6.2' fill='black' stroke='none'/%3E%3Cpath d='M28 17.3L44.9 16.1M27.9 19.4L36.8 20.7M27.4 21.5L43.3 27.5M26.4 23.4L34 28.3M25.1 25.1L37.1 37.1M23.4 26.4L28.3 34M21.5 27.4L27.5 43.3M19.4 27.9L20.7 36.8M17.3 28L16.1 44.9' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M10 49.4L12.6 52L10 54.6L7.4 52Z' fill='black' stroke='none'/%3E%3Cpath d='M52 7.4L54.6 10L52 12.6L49.4 10Z' fill='black' stroke='none'/%3E%3Ccircle cx='10' cy='66' r='1.3' fill='black' stroke='none'/%3E%3Ccircle cx='66' cy='10' r='1.3' fill='black' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    --orn-story-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='black'%3E%3Cg transform='translate(0 80) scale(1 -1)'%3E%3Cpath d='M4 78V12Q4 4 12 4H78' stroke-width='2.4'/%3E%3Cpath d='M10 78V34M34 10H78' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='6.2' fill='black' stroke='none'/%3E%3Cpath d='M28 17.3L44.9 16.1M27.9 19.4L36.8 20.7M27.4 21.5L43.3 27.5M26.4 23.4L34 28.3M25.1 25.1L37.1 37.1M23.4 26.4L28.3 34M21.5 27.4L27.5 43.3M19.4 27.9L20.7 36.8M17.3 28L16.1 44.9' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M10 49.4L12.6 52L10 54.6L7.4 52Z' fill='black' stroke='none'/%3E%3Cpath d='M52 7.4L54.6 10L52 12.6L49.4 10Z' fill='black' stroke='none'/%3E%3Ccircle cx='10' cy='66' r='1.3' fill='black' stroke='none'/%3E%3Ccircle cx='66' cy='10' r='1.3' fill='black' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    --orn-story-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='black'%3E%3Cg transform='translate(80 80) scale(-1 -1)'%3E%3Cpath d='M4 78V12Q4 4 12 4H78' stroke-width='2.4'/%3E%3Cpath d='M10 78V34M34 10H78' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='6.2' fill='black' stroke='none'/%3E%3Cpath d='M28 17.3L44.9 16.1M27.9 19.4L36.8 20.7M27.4 21.5L43.3 27.5M26.4 23.4L34 28.3M25.1 25.1L37.1 37.1M23.4 26.4L28.3 34M21.5 27.4L27.5 43.3M19.4 27.9L20.7 36.8M17.3 28L16.1 44.9' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M10 49.4L12.6 52L10 54.6L7.4 52Z' fill='black' stroke='none'/%3E%3Cpath d='M52 7.4L54.6 10L52 12.6L49.4 10Z' fill='black' stroke='none'/%3E%3Ccircle cx='10' cy='66' r='1.3' fill='black' stroke='none'/%3E%3Ccircle cx='66' cy='10' r='1.3' fill='black' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    --orn-story-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' fill='none' stroke='black'%3E%3Cpath d='M8 12H92M148 12H232' stroke-width='1.2'/%3E%3Cpath d='M40 16.5H96M144 16.5H200' stroke-width='0.8'/%3E%3Ccircle cx='120' cy='12' r='4.6' fill='black' stroke='none'/%3E%3Cpath d='M127 12L131.5 12M126.1 15.5L127.8 16.5M123.5 18.1L125.8 22M120 19L120 21M116.5 18.1L114.2 22M113.9 15.5L112.2 16.5M113 12L108.5 12M113.9 8.5L112.2 7.5M116.5 5.9L114.2 2M120 5L120 3M123.5 5.9L125.8 2M126.1 8.5L127.8 7.5' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M100 9.6L102.4 12L100 14.4L97.6 12Z' fill='black' stroke='none'/%3E%3Cpath d='M140 9.6L142.4 12L140 14.4L137.6 12Z' fill='black' stroke='none'/%3E%3Ccircle cx='6' cy='12' r='1.6' fill='black' stroke='none'/%3E%3Ccircle cx='234' cy='12' r='1.6' fill='black' stroke='none'/%3E%3C/svg%3E");
    --orn-laurel: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2066%2044'%3E%3Cpath%20d%3D'M62%2C40%20Q24%2C40%205%2C7'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.6'%2F%3E%3Cg%20fill%3D'black'%3E%3Cellipse%20cx%3D'52.7'%20cy%3D'43.7'%20rx%3D'6.4'%20ry%3D'2.5'%20transform%3D'rotate(-206%2052.7%2043.7)'%2F%3E%3Cellipse%20cx%3D'46.8'%20cy%3D'34.2'%20rx%3D'6.4'%20ry%3D'2.5'%20transform%3D'rotate(-136%2046.8%2034.2)'%2F%3E%3Cellipse%20cx%3D'37.6'%20cy%3D'40.4'%20rx%3D'6.4'%20ry%3D'2.5'%20transform%3D'rotate(-193%2037.6%2040.4)'%2F%3E%3Cellipse%20cx%3D'34.4'%20cy%3D'30.0'%20rx%3D'6.4'%20ry%3D'2.5'%20transform%3D'rotate(-122%2034.4%2030.0)'%2F%3E%3Cellipse%20cx%3D'24.2'%20cy%3D'33.9'%20rx%3D'6.4'%20ry%3D'2.5'%20transform%3D'rotate(-179%2024.2%2033.9)'%2F%3E%3Cellipse%20cx%3D'23.6'%20cy%3D'23.0'%20rx%3D'6.4'%20ry%3D'2.5'%20transform%3D'rotate(-108%2023.6%2023.0)'%2F%3E%3Cellipse%20cx%3D'12.7'%20cy%3D'24.3'%20rx%3D'6.4'%20ry%3D'2.5'%20transform%3D'rotate(-166%2012.7%2024.3)'%2F%3E%3Cellipse%20cx%3D'14.2'%20cy%3D'13.3'%20rx%3D'6.4'%20ry%3D'2.5'%20transform%3D'rotate(-96%2014.2%2013.3)'%2F%3E%3Cellipse%20cx%3D'3.5'%20cy%3D'5'%20rx%3D'5.5'%20ry%3D'2.2'%20transform%3D'rotate(-120%203.5%205)'%2F%3E%3Ccircle%20cx%3D'40'%20cy%3D'33'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'22'%20cy%3D'22'%20r%3D'1.5'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 40px 40px 120px;
    min-height: 100vh;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-main);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}


.game-logo-wrapper {
    display: flex;
    justify-content: center;
    margin: 1rem 0 2rem;
}
.game-logo {
    width: clamp(280px, 55vw, 700px);
    max-width: 100%;
    height: auto;
}
.game-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--c-text-strong);
    text-align: center;
}


.cyoa-section {
    max-width: 2400px;
    margin: 0 auto 32px;
}
.cyoa-section.hidden { display: none; }

.section-header {
    margin-bottom: 28px;
    padding: 0 10px;
    text-align: center;
}
.section-title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 0.05em;
    color: var(--c-accent);
}
.section-title-image { max-width: 100%; }
.section-description {
    max-width: 780px;
    margin: 0 auto;
    font-size: 1.12rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--c-text);
}
.section-title-image + .section-description { margin-top: 6px; }
.section-limit-info {
    margin: 8px 0 0;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--c-text-faint);
}

.section-limit-info.below-min { color: var(--c-bad); }

.grid-comment {
    flex-basis: 100%;
    grid-column: 1 / -1;
    text-align: center;
}


.story-block {
    max-width: 1000px;
    margin: 0 auto 30px;
    padding: 16px 20px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-frame);
    border-radius: var(--radius);
    box-shadow: 0 2px 12px var(--c-shadow);
    line-height: 1.55;
}
.story-title {
    margin: 0 0 10px;
    font-family: var(--font-card-title);
    font-size: 1.15rem;
    color: var(--c-accent);
}


.rules-box > summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--c-accent);
    list-style: none;
    user-select: none;
}
.rules-box > summary::-webkit-details-marker { display: none; }
.rules-box > summary::before { content: '▸ '; }
.rules-box[open] > summary::before { content: '▾ '; }
.rules-box .rules-body { margin-top: 10px; font-size: 0.92rem; }


.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--card-width, 320px));
    justify-content: var(--grid-justify, center);
    gap: var(--row-gap, 25px) var(--col-gap, 20px);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--side-padding, 15px) 20px;
}
.card-grid.stretch-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-width, 320px)), 1fr));
}

.card-grid.flex-centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.card-grid.flex-centered > .card-glow-wrapper {
    flex: 0 0 var(--card-width, 320px);
    width: var(--card-width, 320px);
}


.card-glow-wrapper {
    position: relative;
    aspect-ratio: var(--card-ratio);
    filter: drop-shadow(0 4px 10px var(--c-shadow));
    transition: filter 0.2s ease, transform 0.15s ease;
}

.card-grid.fit-columns { container-type: inline-size; }
.cyoa-section:has(> .card-grid.fit-columns) { container: fit-section / inline-size; }
.card-grid.fit-columns > .card-glow-wrapper {
    aspect-ratio: auto;
    height: calc(var(--card-full-width) / (var(--card-ratio))
                 + clamp(0px, (var(--card-full-width) - var(--card-width-cq)) * 0.65, 4rem));
}
.card-grid.fit-columns .cyoa-card .card-image { height: calc(var(--card-full-width) / (var(--card-ratio)) * 0.55); }
.card-glow-wrapper.hidden-card,
.cyoa-card.hidden-card { display: none !important; }

.cyoa-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.cyoa-card:active:not(.locked):not(.display-only) { transform: scale(0.985); }
.cyoa-card.display-only { cursor: default; }
.cyoa-card.display-only .card-points { display: none; }

@media (hover: hover) {
    .card-glow-wrapper:has(.cyoa-card:not(.locked):not(.selected):not(.display-only)):hover {
        filter: drop-shadow(0 0 10px var(--c-accent-glow)) drop-shadow(0 6px 14px var(--c-shadow));
        transform: translateY(-3px);
    }
    .cyoa-card:hover:not(.locked):not(.selected):not(.display-only) { border-color: var(--c-accent); }
}


.cyoa-card.selected { border-color: var(--c-selected); }
.card-glow-wrapper:has(.cyoa-card.selected) {
    filter: drop-shadow(0 0 6px var(--c-selected-glow)) drop-shadow(0 0 18px var(--c-selected-glow));
}


.cyoa-card.locked {
    cursor: not-allowed;
    filter: grayscale(0.6) brightness(var(--c-locked-brightness));
}
.cyoa-card.locked .card-image { filter: blur(1.5px) saturate(0.5); }

.cyoa-card .lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: var(--c-veil);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.cyoa-card.locked .lock-overlay { opacity: 1; }
.cyoa-card .lock-reason {
    padding: 6px 10px;
    font-size: 0.82rem;
    line-height: 1.4;
    white-space: pre-line;
    text-align: center;
    color: var(--c-bad);
    background: var(--c-surface);
    border: 1px solid color-mix(in srgb, var(--c-bad) 35%, transparent);
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--c-shadow);
}
.req-selected { color: var(--c-good); font-weight: bold; }


.cyoa-card .card-image {
    flex-shrink: 0;
    width: 100%;
    height: var(--image-height);
    background-color: var(--c-surface-2);
    background-size: cover;
    background-position: center top;
    border-bottom: 1px solid var(--c-border);
}
.cyoa-card video.card-image {
    display: block;
    object-fit: cover;
    object-position: center top;
}
.card-image.card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--c-text) 7%, transparent) 7px 8px);
}
.card-image.card-image-placeholder span {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-text-faint);
    user-select: none;
}

.cyoa-card .card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 4px;
    min-height: 0;
    padding: 10px 12px 12px;
}
.cyoa-card .card-title {
    margin: 0;
    font-family: var(--font-card-title);
    font-size: 1.1rem;
    line-height: 1.15;
    text-align: center;
    color: var(--c-text-strong);
}
.cyoa-card .card-points {
    min-height: 1em;
    font-size: 0.85rem;
    font-weight: bold;
    text-align: center;
    color: var(--c-bad);
}
.cyoa-card .card-points.cost-positive { color: var(--c-good); }
.cyoa-card .card-free-tag {
    margin-left: 6px;
    font-size: 0.75rem;
    color: var(--c-good);
    white-space: nowrap;
    cursor: help;
}
.cyoa-card .card-note {
    font-size: 0.75rem;
    text-align: center;
    color: var(--c-good);
}
.cyoa-card .card-text {
    flex-grow: 1;
    overflow-y: auto;
    font-size: 0.88rem;
    line-height: 1.4;
    text-align: center;
}


.cyoa-card .card-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
    font-size: 0.8rem;
}
.cyoa-card .card-stat { color: var(--c-text-faint); }
.cyoa-card .card-stat-value { font-weight: bold; color: var(--c-accent); }


.cyoa-card .stack-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 2px 0;
}
.cyoa-card .stack-stepper button {
    width: 26px;
    height: 26px;
    font-size: 15px;
    line-height: 1;
    color: var(--c-text-strong);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-strong);
    border-radius: 4px;
    cursor: pointer;
}
.cyoa-card .stack-stepper button:hover:not(:disabled) { border-color: var(--c-accent); color: var(--c-accent); }
.cyoa-card .stack-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.cyoa-card .stack-count { min-width: 16px; font-weight: bold; text-align: center; color: var(--c-accent); }
.cyoa-card .stack-max { font-size: 0.75rem; color: var(--c-text-faint); }


.card-glow-wrapper--text { aspect-ratio: auto; }


.card-glow-wrapper--wide { aspect-ratio: auto; height: 54px; }
.cyoa-card.tpl-wide {
    justify-content: center;
    border-color: color-mix(in srgb, var(--c-frame) 70%, var(--c-border));
}
.cyoa-card.tpl-wide.selected { background: color-mix(in srgb, var(--c-selected) 12%, var(--c-surface)); }
.cyoa-card.tpl-wide .card-inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
}
.cyoa-card.tpl-wide .card-title {
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-text);
}
.cyoa-card.tpl-wide .card-points:empty { display: none; }
.cyoa-card.tpl-wide.selected .card-title { color: var(--c-selected); }
.cyoa-card.tpl-wide.locked { opacity: 0.4; filter: none; }
.cyoa-card.tpl-wide .lock-overlay { display: none; }


.card-glow-wrapper--widetext {
    aspect-ratio: 9 / 4;
    grid-column: span 3;
}
.card-grid.flex-centered > .card-glow-wrapper--widetext {
    flex-basis: calc(var(--card-width) * 3 + var(--col-gap) * 2);
    width: calc(var(--card-width) * 3 + var(--col-gap) * 2);
    max-width: 100%;
}
.cyoa-card.tpl-widetext { flex-direction: row; }
.cyoa-card.tpl-widetext .card-image {
    width: 33.333%;
    height: 100%;
    background-position: center;
    border-bottom: none;
    border-right: 1px solid var(--c-border);
}
.cyoa-card.tpl-widetext .card-inner { width: 66.667%; }


.card-glow-wrapper--story {
    flex-basis: 100%;
    grid-column: 1 / -1;
    aspect-ratio: auto;
}
.card-grid.flex-centered > .card-glow-wrapper--story { flex: 0 0 100%; width: 100%; }
.cyoa-card.tpl-story {
    max-width: 1100px;
    margin: 0 auto;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, var(--c-bg-glow), transparent 70%),
        var(--c-surface);
}
.cyoa-card.tpl-story .card-image {
    height: auto;
    aspect-ratio: 16 / 7;
    background-position: center 25%;
}
.cyoa-card.tpl-story .card-inner {
    gap: 10px;
    padding: 26px clamp(18px, 5vw, 60px) 48px;
}
.cyoa-card.tpl-story .card-title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    color: var(--c-accent);
}
.cyoa-card.tpl-story .card-title::after {
    content: '';
    display: block;
    width: min(240px, 80%);
    height: 24px;
    margin: 8px auto 0;
    background: var(--c-frame);
    -webkit-mask: var(--orn-story-divider) center / contain no-repeat;
            mask: var(--orn-story-divider) center / contain no-repeat;
}

.cyoa-card.tpl-story:not(.tpl-wide)::after {
    inset: 5px;
    -webkit-mask: var(--orn-story-tl) top left / var(--orn-story-size) no-repeat, var(--orn-story-tr) top right / var(--orn-story-size) no-repeat,
                  var(--orn-story-bl) bottom left / var(--orn-story-size) no-repeat, var(--orn-story-br) bottom right / var(--orn-story-size) no-repeat;
            mask: var(--orn-story-tl) top left / var(--orn-story-size) no-repeat, var(--orn-story-tr) top right / var(--orn-story-size) no-repeat,
                  var(--orn-story-bl) bottom left / var(--orn-story-size) no-repeat, var(--orn-story-br) bottom right / var(--orn-story-size) no-repeat;
}
.cyoa-card.tpl-story .card-text {
    overflow: visible;
    font-size: 1.08rem;
    line-height: 1.65;
    text-align: left;
    hyphens: auto;
}
.cyoa-card.tpl-story .card-text p { margin: 0 0 0.9em; text-indent: 1.5em; }
.cyoa-card.tpl-story .card-text p:last-child { margin-bottom: 0; }
.cyoa-card.tpl-story .card-text p:first-child { text-indent: 0; }
.cyoa-card.tpl-story .card-text:not(.no-dropcap) p:first-child::first-letter {
    float: left;
    margin: 0.06em 0.12em 0 0;
    font-family: var(--font-display);
    font-size: 3.3em;
    line-height: 0.85;
    color: var(--c-accent);
}
.cyoa-card.tpl-story.story-img-left,
.cyoa-card.tpl-story.story-img-right { flex-direction: row; }
.cyoa-card.tpl-story.story-img-right { flex-direction: row-reverse; }
.cyoa-card.tpl-story.story-img-left .card-image,
.cyoa-card.tpl-story.story-img-right .card-image {
    width: 38%;
    height: auto;
    min-height: 100%;
    aspect-ratio: auto;
    border-bottom: none;
    background-position: center top;
}
.cyoa-card.tpl-story.story-img-left .card-image { border-right: 1px solid var(--c-frame); }
.cyoa-card.tpl-story.story-img-right .card-image { border-left: 1px solid var(--c-frame); }
.cyoa-card.tpl-story.story-img-left .card-inner,
.cyoa-card.tpl-story.story-img-right .card-inner { flex: 1; min-width: 0; }

.cyoa-card.tpl-story.story-img-top-tall .card-image { aspect-ratio: 3 / 4; }


#point-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 20px;
    background: color-mix(in srgb, var(--c-bg) 94%, transparent);
    border-top: 2px solid var(--c-frame);
    box-shadow: 0 -4px 18px var(--c-shadow);
    backdrop-filter: blur(6px);
}
.bar-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--c-text-strong);
    background: transparent;
    border: 1px solid var(--c-border-strong);
    border-radius: 6px;
    cursor: pointer;
}
.bar-button:hover { border-color: var(--c-accent); color: var(--c-accent); }
.bar-button[hidden] { display: none; }

#points-container {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.point-item { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.point-value { font-size: 1.1rem; font-weight: bold; color: var(--c-text-strong); }
.point-value.negative { color: var(--c-bad); }
.point-value.positive { color: var(--c-good); }
.point-group-sep { width: 1px; height: 18px; background: var(--c-border-strong); }


.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--c-bg) 80%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}
.modal-overlay.active { opacity: 1; visibility: visible; }

.modal-content {
    position: relative;
    width: 90%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 25px;
    background: var(--c-surface);
    border: 1px solid var(--c-frame);
    border-radius: 12px;
    box-shadow: 0 20px 60px var(--c-shadow);
}
.modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 30px;
    height: 30px;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--c-text);
    background: transparent;
    border: 1px solid var(--c-border-strong);
    border-radius: 6px;
    cursor: pointer;
}
.modal-close:hover { border-color: var(--c-bad); color: var(--c-bad); }
.modal-title {
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    text-align: center;
    color: var(--c-accent);
}
.modal-section h3 {
    margin: 0 0 8px;
    padding-bottom: 4px;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-strong);
    border-bottom: 1px solid var(--c-border);
}
.modal-hint { margin: 0 0 6px; font-size: 0.82rem; }
.modal-content > hr { margin: 16px 0; border: none; border-top: 1px solid var(--c-border); }

.modal-section textarea,
.modal-section input[type="text"],
.llm-grid select {
    width: 100%;
    padding: 8px 10px;
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    color: var(--c-text-strong);
    background: var(--c-bg);
    border: 1px solid var(--c-border-strong);
    border-radius: 6px;
    outline: none;
}
.modal-section textarea { height: 110px; resize: vertical; }
.modal-section textarea:focus,
.modal-section input:focus,
.llm-grid select:focus { border-color: var(--c-accent); }
#llm-export-textarea { height: 180px; }

.modal-btn,
.modal-buttons button {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-strong);
    background: transparent;
    border: 1px solid var(--c-border-strong);
    border-radius: 6px;
    cursor: pointer;
}
.modal-btn:hover,
.modal-buttons button:hover { border-color: var(--c-accent); color: var(--c-accent); }
.modal-btn-danger { color: var(--c-bad); border-color: color-mix(in srgb, var(--c-bad) 50%, transparent); }
.modal-btn-danger:hover { border-color: var(--c-bad); color: var(--c-bad); }
.modal-buttons { display: flex; gap: 8px; margin: 8px 0; }
.modal-buttons button { margin-top: 0; font-size: 0.72rem; }

.modal-message { min-height: 1.2em; margin-top: 8px; font-size: 0.85rem; text-align: center; opacity: 0; }
.modal-message.visible { opacity: 1; }
.modal-message.success { color: var(--c-good); }
.modal-message.error { color: var(--c-bad); }

details.modal-section-rp > summary { list-style: none; cursor: pointer; user-select: none; }
details.modal-section-rp > summary::-webkit-details-marker { display: none; }
details.modal-section-rp > summary h3::before {
    content: ''; display: inline-block; width: 1.1em; height: 1.1em; margin-right: 4px; vertical-align: -0.2em;
    background: currentColor; transition: transform .15s;
    -webkit-mask: var(--icon-chevron) center / contain no-repeat; mask: var(--icon-chevron) center / contain no-repeat;
}
details.modal-section-rp[open] > summary h3::before { transform: rotate(90deg); }

.llm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.llm-grid label,
.llm-wide { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; }
.llm-wide { grid-column: 1 / -1; }
.llm-grid label[hidden] { display: none; }


.cyoa-tooltip {
    position: absolute;
    z-index: 9999;
    max-width: 260px;
    padding: 7px 11px;
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: pre-line;
    color: var(--c-text-strong);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-strong);
    border-radius: 6px;
    box-shadow: 0 6px 22px var(--c-shadow);
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.cyoa-tooltip--visible { opacity: 1; transform: translateY(0); }
.cyoa-tooltip::after {
    content: "";
    position: absolute;
    left: var(--arrow-x, 50%);
    width: 9px;
    height: 9px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-strong);
    transform: translateX(-50%) rotate(45deg);
}
.cyoa-tooltip[data-placement="top"]::after { bottom: -5px; border-top: none; border-left: none; }
.cyoa-tooltip[data-placement="bottom"]::after { top: -5px; border-bottom: none; border-right: none; }



body::before {
    background:
        radial-gradient(ellipse 70% 45% at 50% -5%, var(--c-bg-glow), transparent 75%),
        repeating-conic-gradient(from 0deg at 50% -8%, color-mix(in srgb, var(--c-frame) 13%, transparent) 0deg 3.5deg, transparent 3.5deg 11deg);
    -webkit-mask: radial-gradient(ellipse 95% 85% at 50% 0%, black 30%, transparent 100%);
            mask: radial-gradient(ellipse 95% 85% at 50% 0%, black 30%, transparent 100%);
}


.cyoa-card:not(.tpl-wide) { border: 1px solid color-mix(in srgb, var(--c-frame) 75%, transparent); }
.cyoa-card:not(.tpl-wide)::after {
    content: '';
    position: absolute;
    inset: 3px;
    z-index: 5;
    pointer-events: none;
    background: var(--c-frame);
    -webkit-mask: var(--orn-corner-tl) top left / 54px no-repeat, var(--orn-corner-tr) top right / 54px no-repeat,
                  var(--orn-corner-bl) bottom left / 54px no-repeat, var(--orn-corner-br) bottom right / 54px no-repeat;
            mask: var(--orn-corner-tl) top left / 54px no-repeat, var(--orn-corner-tr) top right / 54px no-repeat,
                  var(--orn-corner-bl) bottom left / 54px no-repeat, var(--orn-corner-br) bottom right / 54px no-repeat;
}
.cyoa-card .card-image { border-bottom-color: var(--c-frame); }
.cyoa-card.cyoa-card.selected { border-color: var(--c-selected); }
.cyoa-card.selected::after { background: var(--c-selected); }


.section-title { display: flex; align-items: center; justify-content: center; gap: 14px; }
.section-title::before,
.section-title::after {
    content: '';
    flex: none;
    width: 66px;
    height: 44px;
    background: var(--c-frame);
    -webkit-mask: var(--orn-laurel) center / contain no-repeat;
            mask: var(--orn-laurel) center / contain no-repeat;
}
.section-title::after { transform: scaleX(-1); }


.game-title,
.section-title { isolation: isolate; }
.game-title .title-text,
.section-title .title-text {
    position: relative;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--c-frame) 35%, white) 0%, var(--c-frame) 45%,
        color-mix(in srgb, var(--c-frame) 65%, black) 55%, var(--c-frame) 78%,
        color-mix(in srgb, var(--c-frame) 45%, white) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.game-title .title-text::after,
.section-title .title-text::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: -1;
    color: transparent;
    text-shadow: 0 1px 0 color-mix(in srgb, var(--c-frame) 45%, black), 0 2px 6px var(--c-shadow);
    pointer-events: none;
}


.section-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 1180px;
    margin: 0 auto;
}
.section-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    min-height: 46px;
    padding: 8px 18px;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    color: var(--c-text);
    background: linear-gradient(180deg, var(--c-surface), var(--c-surface-2));
    border: 1px solid color-mix(in srgb, var(--c-frame) 75%, transparent);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px var(--c-shadow), inset 0 0 0 3px var(--c-surface), inset 0 0 0 4px color-mix(in srgb, var(--c-frame) 35%, transparent);
    transition: color .15s, border-color .15s, transform .15s;
}
.section-menu-item:hover { color: var(--c-accent); border-color: var(--c-frame); transform: translateY(-2px); }
.section-menu-item.hidden { display: none; }
.cyoa-section { scroll-margin-top: 16px; }


::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-accent); }


.card-glow-wrapper.chapter-pending { display: none !important; }
.cyoa-section.chapter-collapsed { display: none; }   


.chapter-next {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    margin: 36px auto 8px;
}
.chapter-next[hidden] { display: none; }
.card-grid > .chapter-next { flex: 0 0 100%; grid-column: 1 / -1; margin: 4px auto 12px; }
.chapter-next-btn {
    min-width: 150px;
    min-height: 42px;
    padding: 6px 26px;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: var(--c-text);
    background: linear-gradient(180deg, var(--c-surface), var(--c-surface-2));
    border: 1px solid var(--c-frame);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px var(--c-shadow), inset 0 0 0 3px var(--c-surface), inset 0 0 0 4px color-mix(in srgb, var(--c-frame) 45%, transparent);
    cursor: pointer;
    transition: color .15s, border-color .15s, transform .15s;
}
.chapter-next-btn:hover:not(:disabled) { color: var(--c-accent); border-color: var(--c-border-strong); transform: translateY(-2px); }
.chapter-next-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.chapter-next-hint { margin: 0; font-size: 0.9rem; font-style: italic; color: var(--c-text-faint); }
.chapter-next-hint:empty { display: none; }

.section-menu-item.locked,
.chapter-next-btn:disabled {
    color: color-mix(in srgb, var(--c-text-faint) 85%, transparent);
    background: color-mix(in srgb, var(--c-surface) 45%, transparent);
    border: 1.5px dashed color-mix(in srgb, var(--c-border-strong) 75%, transparent);
    box-shadow: none;
    cursor: default;
    transform: none;
}
.section-menu-item.locked:hover { color: color-mix(in srgb, var(--c-text-faint) 85%, transparent); border-color: color-mix(in srgb, var(--c-border-strong) 75%, transparent); transform: none; }
.chapter-next-btn:disabled { cursor: not-allowed; }
.chapter-collapse-all {
    display: block;
    margin: 12px auto 0;
    padding: 4px 12px;
    font: 0.85rem var(--font-main);
    letter-spacing: 0.04em;
    color: var(--c-text-faint);
    background: transparent;
    border: none; border-radius: 999px;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.chapter-collapse-all:hover { color: var(--c-accent); }
.chapter-collapse-all[hidden] { display: none; }


html.has-chapter-bar { scrollbar-width: none; }
html.has-chapter-bar::-webkit-scrollbar { display: none; }
#chapter-bar {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: var(--chapter-bar-w);
    z-index: 999;                       
    background: color-mix(in srgb, var(--c-border) 30%, var(--c-bg));
    border-left: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent);
    touch-action: none;
    user-select: none;
    transition: width .15s ease;
}
#chapter-bar[hidden] { display: none; }
#chapter-bar:hover, #chapter-bar.dragging { width: calc(var(--chapter-bar-w) + 6px); }
.chapter-marker {
    position: absolute; left: 0; right: 0;
    margin: 0; padding: 0; border: 0; border-radius: 0;
    background: var(--c);
    opacity: .6;
    cursor: pointer;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--c-bg) 70%, transparent);   
    transition: opacity .15s ease;
}
.chapter-marker.active { opacity: 1; }
.chapter-marker:hover { opacity: .85; }
.chapter-thumb {
    position: absolute; left: 1px; right: 1px;
    border: 2px solid color-mix(in srgb, var(--c-text-strong) 55%, transparent);
    border-radius: 3px;
    background: color-mix(in srgb, var(--c-surface) 20%, transparent);
    pointer-events: none;
}
#chapter-tip {
    position: fixed; right: calc(var(--chapter-bar-w) + 12px);
    transform: translateY(-50%);
    z-index: 1001;
    padding: 5px 10px 5px 8px;
    font: 0.95rem/1.2 var(--font-display);
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: var(--c-text-strong);
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-left: 4px solid var(--c);
    border-radius: 6px;
    box-shadow: 0 3px 12px var(--c-shadow);
    pointer-events: none;
}
#chapter-tip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
    #chapter-bar, .chapter-marker, .chapter-next-btn { transition: none; }
}


@media (max-width: 768px) {
    body { padding: 15px 15px 80px; }
    .section-title { font-size: 1.5rem; }
    #point-bar { gap: 10px; padding: 8px 10px; }
    #points-container { gap: 12px; }
    
    #points-container { position: absolute; left: 50%; transform: translateX(-50%); flex-grow: 0; width: max-content; }
    .point-name { display: none; }
    .point-item:only-child .point-name { display: inline; }   
    :root { --chapter-bar-w: 6px; }
    #chapter-bar:hover, #chapter-bar.dragging { width: 14px; }
    .has-chapter-bar body { padding-right: 18px; }
    .chapter-next { margin-top: 24px; }
}

@media (max-width: 600px) {
    .card-grid,
    .card-grid.flex-centered {
        display: grid;
        grid-template-columns: repeat(var(--mobile-cols, 1), minmax(0, 1fr));
        gap: 12px;
        padding: 0;
    }
    .card-grid.flex-centered > .card-glow-wrapper { width: auto; }
    .section-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .section-menu-item { min-width: 0; min-height: 42px; padding: 6px 8px; font-size: 0.9rem; }
    .card-glow-wrapper { aspect-ratio: auto; }
    .card-glow-wrapper--widetext { grid-column: auto; }
    .cyoa-card .card-image { height: auto; aspect-ratio: 16 / 10; }
    
    .card-grid.fit-columns > .card-glow-wrapper,
    .card-grid.fit-columns .cyoa-card .card-image { height: auto; }
    .cyoa-card.tpl-widetext { flex-direction: column; }
    .cyoa-card.tpl-widetext .card-image { width: 100%; border-right: none; border-bottom: 1px solid var(--c-border); }
    .cyoa-card.tpl-widetext .card-inner { width: 100%; }
    .cyoa-card.tpl-story.story-img-left,
    .cyoa-card.tpl-story.story-img-right { flex-direction: column; }
    .cyoa-card.tpl-story.story-img-left .card-image,
    .cyoa-card.tpl-story.story-img-right .card-image {
        width: 100%;
        min-height: 0;
        aspect-ratio: 16 / 10;
        border: none;
        border-bottom: 1px solid var(--c-frame);
    }
    .cyoa-card.tpl-story .card-inner { padding: 22px 20px 42px; }
    .cyoa-card.tpl-story .card-title { padding: 0 26px; font-size: 1.4rem; }
    .cyoa-card.tpl-story { --orn-story-size: 48px; }
    .cyoa-card.tpl-story .card-text { font-size: 1rem; }
}



:root { --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01%27/%3E%3C/svg%3E"); }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; vertical-align: -0.25em; }
.bar-button .icon { width: 22px; height: 22px; }
.modal-close { display: flex; align-items: center; justify-content: center; padding: 0; }
.modal-close .icon { width: 20px; height: 20px; }
.modal-btn .icon { margin-right: 8px; }
.cyoa-card .stack-stepper button { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.cyoa-card .stack-stepper .icon { width: 16px; height: 16px; }
.modal-message .icon { width: 1.15em; height: 1.15em; margin-right: 6px; vertical-align: -0.22em; }


.cyoa-card .card-text a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.cyoa-card .card-text a:hover { text-decoration-thickness: 2px; }