@font-face {
    font-family: "EB Garamond 12";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/EBGaramond12/webfonts/EBGaramond-Regular.woff2") format("woff2"),
         url("../fonts/EBGaramond12/otf/EBGaramond-Regular.otf") format("opentype");
}

@font-face {
    font-family: "EB Garamond 12";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/EBGaramond12/webfonts/EBGaramond-Italic.woff2") format("woff2"),
         url("../fonts/EBGaramond12/otf/EBGaramond-Italic.otf") format("opentype");
}

@font-face {
    font-family: "EB Garamond 12";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/EBGaramond12/webfonts/EBGaramond-Bold.woff2") format("woff2"),
         url("../fonts/EBGaramond12/otf/EBGaramond-Bold.otf") format("opentype");
}

@font-face {
    font-family: "EB Garamond 12";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/EBGaramond12/webfonts/EBGaramond-BoldItalic.woff2") format("woff2"),
         url("../fonts/EBGaramond12/otf/EBGaramond-BoldItalic.otf") format("opentype");
}

@font-face {
    font-family: "EB Garamond Initials";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/EB-Garamond-Initials/EBGaramond-0.016/otf/EBGaramond-Initials.otf") format("opentype"),
         url("../fonts/EB-Garamond-Initials/EBGaramond-0.016/ttf/EBGaramond-Initials.ttf") format("truetype");
}

  html {
    font-family: 'EB Garamond 12', serif;
    font-synthesis: none;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-feature-settings: 'kern' on, 'liga' on, 'onum' on, 'pnum' on, 'dlig' on, 'clig' on, 'calt' on, 'hlig' off, 'swsh' on;
    -webkit-font-smoothing: antialiased;
  }

sup {
    font-feature-settings: "sup" on;
    /* vertical-align: inherit; */
    font-size: inherit;
}

/* sub {
    font-feature-settings: "subs" on;
} */

double {
    font-size: 2rem;
    vertical-align: -10%;
    opacity: 0.8;
}

double.separator {
    display: block;
    margin: 2rem auto 3rem auto;
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: var(--default-cursor, default);
}

body {
    overflow: hidden;
    background-image: url('../images/mat.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

body.switched {
    transition: color 0.6s, background-color 0.6s;
}

:root {
    --book-font: 'EB Garamond 12';
    --book-width: 1421px;
    --book-height: 799px;
    --book-scale: 1;
    --page-line-count: 25;
    --book-page-top: 4.00%;
    --book-page-bottom: 19%;
    --book-page-height: calc(100% - var(--book-page-top) - var(--book-page-bottom));
    --book-left-page-left: 14%;
    --book-left-page-width: 34.9%;
    --book-right-page-right: 14%;
    --book-right-page-width: 34%;
    --book-page-perspective: 3200px;
    --book-left-page-transform: none;
    --book-right-page-transform: none;
    --story-line-height: calc((var(--book-height) * 0.77) / var(--page-line-count));
    --story-font-size: calc(var(--story-line-height) / 1.45);
    --img-aspect-ratio: 1.779;
    --aspect-ratio: min(var(--viewport-aspect-ratio), var(--img-aspect-ratio));  
    --ink-text: rgba(36, 25, 15, 0.94);
    --ink-strong: rgba(30, 20, 12, 0.98);
    --ink-muted: rgba(82, 62, 39, 0.82);
    --ink-disabled: rgba(74, 54, 33, 0.78);
    --rule-brown: rgba(105, 75, 42, 0.34);
    --panel-paper: rgba(228, 202, 149, 0.97);
    --panel-paper-soft: rgba(255, 246, 220, 0.24);
    --panel-border: rgba(62, 42, 24, 0.46);
    --control-radius: 0.22rem;
    --ui-menu-font-size: 0.82rem;
    --ui-modal-font-size: calc(var(--story-line-height) * 0.85);
    font-size: calc(var(--book-height)/(34 * 1.5));
}

h1 {
    font-size: 2rem;
    margin-bottom: 0.8rem;
    text-align: center;
    text-transform:uppercase;
    font-weight: normal;
    font-variant-caps: all-small-caps;
    font-feature-settings: 'smcp' on, 'c2sc' on, 'kern' on, 'liga' on;
}

h2 {
    font-size: 1.2rem;
    text-align: center;
    font-weight: normal;
}

h2.chapter-heading {
    font-style: italic;
    margin: 2rem auto 3rem auto;
}

h3 {
    font-size: 1.2rem;
    text-align: center;
    font-weight: normal;
}

.header {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/*
  Built-in class:
    # author: Name
*/
.byline {
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" on, "c2sc" on, "kern" on, "liga" on;
}

.subtitle {
    font-feature-settings: "scmp" off;
}

.separator {
    text-align: center;
}

/* 
  Enables <iframe> support work on itch.io when using mobile iOS
*/
.outerContainer {
    position: absolute;
    display: block;
    display: none;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    overflow: scroll;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    margin-top: 24px;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (max-width: 980px) {
    .outerContainer {
        margin-top: 44px;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

p, #ruler,#indent {
    font-size: 1.2rem;
    line-height: 1.45;
    color: var(--ink-text);
    margin-block-end: 0;
    margin-block-start: 0;
    /* text-indent: 1.5em; */
    /* text-align: justify; */
    /* hyphens: manual; */
}

a {
    transition: color 0.6s;
    color: var(--ink-muted);
    font-style: italic;
    text-decoration-thickness: 1px;
    cursor: var(--pointer-cursor, pointer);
}

button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="range"],
input[type="checkbox"],
select,
#controls a,
#credits_button,
.choice-button,
.volume-toggle {
    cursor: var(--pointer-cursor, pointer);
}

a:hover {
    color: var(--ink-strong);
    transition: color 0.1s;
}

strong {
    color: var(--ink-strong);
    font-weight: bold;
}

img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.drop-cap {
    font-size: 280%;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.story-drop-cap {
    position: absolute;
    left: 0;
    top: 0;
    font-family: "EB Garamond Initials", "EB Garamond 12", serif;
    font-size: calc(2 * 1.34em);
    line-height: 0.93;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    font-feature-settings: normal;
    text-transform: uppercase;
    transform: translateY(0.25rem);
}

.drop-quote {
    font-size: 180%;
    line-height: 1;
    margin: 0;
    padding: 0;
}


cap {
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" on, "c2sc" on, "kern" on, "liga" on;
}

.container .hide {
    opacity: 0.0;
}

.container .invisible {
    display: none;
}

.container > *, .container > p > * {
    opacity: 1.0;
    transition: opacity 0.5s;
}


/*
  Class applied to all choices
  (Will always appear inside <p> element by default.)
*/
li.choice {
    text-align: center;
    line-height: 1.7rem;
}

ol.choice {
    position: relative;
    /* list-style-position: inside; To make sure the number is inside the li */
    counter-reset: item; /* Set a counter */    
    padding-inline-start: 3rem;
}

/* ol.choice li::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "............................................................................";
    overflow: hidden;
    white-space: nowrap;
    text-indent: 1.5em;
} */

/* 
  Class applied to first choice
*/
:not(.choice)+.choice {
    padding-top: 1rem;
}

/*
  Class applied to choice links
*/
.choice a {
    font-size: 1.2rem;
}

/* 
  Built-in class:
    The End # CLASS: end
*/
.end {
    text-align: center;
    font-weight: bold;
    color: black;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

#controls {
    z-index: 4;
    position: absolute;
    right: 0;
    left: 0;
    top: 0.45rem;
    user-select: none;
    transition: color 0.6s, background 0.6s;
    font-size: var(--ui-menu-font-size);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    white-space: nowrap;
}

#controls a {
    color: var(--ink-text);
    text-decoration: none;
    cursor: var(--pointer-cursor, pointer);
}

#controls > span {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
}

#controls a.is-active {
    color: var(--ink-text);
    font-weight: 700;
}

#controls a.is-inactive,
#controls a[aria-pressed="false"],
#controls a[disabled],
#controls a[aria-disabled="true"] {
    color: var(--ink-disabled);
    font-weight: 400;
}

#controls a[disabled],
#controls a[aria-disabled="true"] {
    cursor: var(--default-cursor, default);
    pointer-events: none;
}

#controls a:not(.is-inactive):not([disabled]):not([aria-disabled="true"]):hover {
    color: var(--ink-strong);
}

#controls input[type=range] {
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
    width: 5rem;
    cursor: var(--pointer-cursor, pointer);
    outline: none;
    height: 0.5rem;
    background-color: transparent;
    box-sizing: border-box;
    border: 1px solid var(--ink-strong);
    border-radius: var(--control-radius);
    overflow: hidden;
}

#controls input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: var(--control-radius);
    background-color: var(--ink-strong);
    border: none;
    box-shadow: -407px 0 0 400px rgba(88, 61, 35, 0.34);
}

#controls input::-webkit-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    height: 0.5rem;
    border-radius: var(--control-radius);
}

#controls>a:not(:last-of-type):after, #controls>span::after {
    content: "|";
    color: var(--ink-text);
    display: inline-block;
    margin: 0 0.18rem;
    pointer-events: none;
}

#book {
    position: fixed;
    left: 50%;
    top: 50%;
    width: var(--book-width);
    height: var(--book-height);
    background-image: url('../images/book_detailed.png');
    background-size: contain; /* Changed from cover to contain */
    background-position: center;
    background-repeat: no-repeat; /* Prevents repeating the image when aspect ratio doesn't match */
    perspective: var(--book-page-perspective);
    perspective-origin: 50% 50%;
    transform: translate(-50%, -50%) scale(var(--book-scale));
    transform-origin: center center;
}

#page_left, #page_right {
    position: absolute;
    top: var(--book-page-top);
    bottom: var(--book-page-bottom);
    width: var(--book-right-page-width);
    box-sizing: border-box;
    padding: 0 3rem 1rem 1rem;
    /* border: 1px dotted rgba(200,200,200,1); */
    overflow: visible;
    opacity: 0.95;
    mix-blend-mode: darken;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}

#story {
    overflow: visible !important;
    box-sizing: border-box;
    overflow-anchor: none;
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 0;
    font-size: var(--story-font-size);
    line-height: var(--story-line-height);
    will-change: transform;
    transform: translateY(0);
}

#paragraphs {
    position: relative;
    box-sizing: border-box;
    overflow: visible !important;
    overflow-anchor: none;
    margin: 0;
    padding: 0;
    transition: opacity 220ms ease;
}

#paragraphs.story-history-fading {
    opacity: 0;
}

.story-block-archiving {
    opacity: 0;
    transition: opacity 320ms ease;
}

.story-image-block {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background: rgba(218, 188, 130, 0.18);
    background-blend-mode: multiply;
}

.story-image-block img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: color-burn;
    /* filter: grayscale(0.72) sepia(0.18) contrast(1.22) brightness(0.96); */
    opacity: 0.94;
}

.story-image-landscape,
.story-image-square {
    margin-left: auto;
    margin-right: auto;
}

.story-image-portrait {
    margin-left: 0;
    margin-right: 0;
}

.story-image-pending img {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 0);
}

.story-image-visible img {
    opacity: 1;
    clip-path: polygon(0 0, 220% 0, 0 220%);
    transition: opacity 2000ms ease, clip-path 2000ms ease;
}

/* #story p span {
    font-feature-settings: 'kern' on, 'liga' on, 'onum' on, 'clig' on, 'hlig' on;
} */

#page_left {
    left: var(--book-left-page-left);
    width: var(--book-left-page-width);
    overflow: hidden;
    transform: var(--book-left-page-transform);
    transform-origin: 100% 50%;
    clip-path: polygon(0.5% 0.4%, 99.7% 0, 100% 99.2%, 0 100%);
}

#page_right {
    /* background-color: rgba(200,200,200,0.5); */
    right: var(--book-right-page-right);
    width: var(--book-right-page-width);
    padding-bottom: 0;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scroll-behavior: auto;
    overscroll-behavior: none;
    overflow-anchor: none;
    scrollbar-width: none;
    transform: var(--book-right-page-transform);
    transform-origin: 0 50%;
    clip-path: polygon(0.2% 0, 99.3% 0.5%, 100% 100%, 0 100%);
}

#page_right::-webkit-scrollbar {
    display: none;
}

#page_right *,
#page_right *::-webkit-scrollbar {
    scrollbar-width: none;
}

#page_right *::-webkit-scrollbar {
    display: none;
}

#story_scrollbar {
    position: absolute;
    top: 0;
    right: 0.35rem;
    bottom: 0;
    width: 0.22rem;
    height: 100%;
    margin: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.12);
    z-index: 12;
    pointer-events: auto;
    touch-action: none;
    cursor: var(--pointer-cursor, pointer);
}

#story_scrollbar_thumb {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    min-height: 1rem;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.72);
    transition: top 260ms ease, height 260ms ease;
    pointer-events: auto;
}

#story_scrollbar[data-dragging="true"] #story_scrollbar_thumb {
    transition: none;
}


/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #000000 rgba(255,255,255,0);
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: calc(1rem/4);
  }

  *::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.0);
  }

  *::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: calc(1rem/4/2);
    border: none;
  }

.fade-in {
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s;
    -moz-animation: fadeIn ease 1s;
    -o-animation: fadeIn ease 1s;
    -ms-animation: fadeIn ease 1s;
}

/* Style for individual words that need to fade in */
.word.fade-in {
    animation-fill-mode: forwards;
    opacity: 0; /* Start invisible */
}

@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

#versions {
    position: fixed;
    top: 0px;
    right: 12px;
    font-size: 10px;
}

#preview {
    position: absolute;
    top: 0px;
    left: 0px;
    border: 1px none red;
    background-color: #d8bf89;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

#preview p {
    text-indent: 0;
    text-align: left;
}

#ruler, #indent {
    visibility: hidden;
    position: absolute;
    top: -8000px;
    width: auto;
    display: inline;
    left: -8000px;
    text-indent: 0;
    text-align: left;
    hyphens: none;
    margin-block-end: 0;
}

#ruler i {
    font-style: italic;
}

#indent {
    text-indent: 1.5em;
}

#remark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.65rem;
    text-align: center;
    margin: 0 auto;
    background-color: transparent;
    line-height: 1.1;
    pointer-events: none;
}

#remark_hint {
    font-size: 0.82rem;
}

#game_title {
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" on, "c2sc" on, "case" on, "kern" on, "liga" on;
    letter-spacing: 0.018em;
}

#game_author,
#game_legal {
    font-variant-caps: small-caps;
    font-feature-settings: "smcp" on, "kern" on, "liga" on, "onum" on;
}

#game_subtitle {
    font-feature-settings: "kern" on, "liga" on, "onum" on, "pnum" on, "dlig" on;
}

#game_legal {
    margin-top: 0.18rem;
    font-size: 0.72rem;
    color: var(--ink-text);
}

#credits_button {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--ink-text);
    font: inherit;
    font-style: italic;
    cursor: var(--pointer-cursor, pointer);
    pointer-events: auto;
}

#credits_button:hover {
    color: var(--ink-strong);
}

.credits-modal,
.story-popup-modal,
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: calc(var(--book-height) * 0.04) calc(var(--book-width) * 0.035);
    background: rgba(10, 7, 4, 0.52);
}

.credits-modal {
    z-index: 1200;
}

.story-popup-modal {
    z-index: 1250;
}

.modal {
    z-index: 1000;
}

.credits-modal.visible,
.story-popup-modal.visible,
.modal[style*="display: block"],
.modal[style*="display:block"] {
    display: flex;
}

.credits-dialog,
.story-popup-dialog,
.modal-content {
    background: var(--panel-paper);
    color: var(--ink-text);
    border: 1px solid var(--panel-border);
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.44);
    font-family: 'EB Garamond', var(--book-font), serif;
    font-size: var(--ui-modal-font-size);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.credits-dialog {
    width: min(calc(var(--book-width) * 0.58), 92vw);
    height: min(calc(var(--book-height) * 0.78), 88vh);
    padding: 0;
    gap: 0;
}

.credits-dialog-header,
.story-popup-dialog-header,
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--rule-brown);
    padding: calc(var(--story-line-height) * 0.45) calc(var(--story-line-height) * 0.7) calc(var(--story-line-height) * 0.32);
}

.credits-dialog-header h2,
.story-popup-dialog-header h2,
.modal-header h2 {
    margin: 0;
    font-size: var(--ui-modal-font-size);
    font-style: italic;
    font-weight: normal;
    line-height: 1.15;
    color: var(--ink-strong);
}

#credits_close,
#credits_close_footer,
#story_popup_ok,
#story_popup_close,
.modal-footer button,
.close {
    border: 1px solid var(--panel-border);
    border-radius: var(--control-radius);
    background: var(--panel-paper-soft);
    color: var(--ink-text);
    font: inherit;
    padding: 0.18rem 0.75rem;
    cursor: var(--pointer-cursor, pointer);
}

#credits_close:hover,
#credits_close_footer:hover,
#story_popup_ok:hover,
#story_popup_close:hover,
.modal-footer button:hover,
.close:hover {
    background: rgba(255, 246, 220, 0.36);
    color: var(--ink-strong);
}

#credits_close:focus-visible,
#credits_close_footer:focus-visible,
#story_popup_ok:focus-visible,
#story_popup_close:focus-visible,
.modal-footer button:focus-visible,
.close:focus-visible,
button:focus-visible {
    outline: 1px dotted rgba(47, 31, 18, 0.48);
    outline-offset: 0.12rem;
}

.credits-creative {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    padding: calc(var(--story-line-height) * 0.45) calc(var(--story-line-height) * 0.7) calc(var(--story-line-height) * 0.35);
    border-bottom: 1px solid rgba(42, 31, 18, 0.24);
}

.credits-creative-column h3 {
    margin: 0 0 0.45rem;
    color: var(--ink-strong);
    font-size: var(--ui-modal-font-size);
    font-style: italic;
    font-weight: normal;
}

.credits-creative-row {
    display: grid;
    grid-template-columns: minmax(7rem, 0.72fr) 1fr;
    gap: 0.65rem;
    margin: 0.2rem 0;
}

.credits-creative-row dt {
    color: var(--ink-muted);
    font-variant: small-caps;
    letter-spacing: 0.015em;
}

.credits-creative-row dd {
    margin: 0;
    color: var(--ink-text);
}

.credits-creative a,
.credits-content a {
    color: var(--ink-strong);
    text-decoration: none;
    border-bottom: 1px solid rgba(71, 46, 24, 0.28);
}

.story-popup-dialog {
    width: min(calc(var(--book-width) * 0.34), 88vw);
    max-height: min(calc(var(--book-height) * 0.58), 80vh);
    padding: 0;
    gap: 0;
}

#story_popup_message {
    flex: 1 1 auto;
    min-height: 0;
    white-space: pre-wrap;
    line-height: 1.35;
    font-size: var(--ui-modal-font-size);
    padding: calc(var(--story-line-height) * 0.45) calc(var(--story-line-height) * 0.7);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(43, 31, 20, 0.58) rgba(151, 111, 64, 0.08);
}

#story_popup_message::-webkit-scrollbar {
    width: 0.22rem;
}

#story_popup_message::-webkit-scrollbar-track {
    background: rgba(151, 111, 64, 0.08);
    border-radius: 999px;
}

#story_popup_message::-webkit-scrollbar-thumb {
    background-color: rgba(43, 31, 20, 0.58);
    border-radius: 999px;
}

#story_popup_ok { align-self: flex-end; }

.credits-content {
    flex: 1;
    overflow: auto;
    margin: 0 calc(var(--story-line-height) * 0.7);
    padding: 0.8rem;
    background: var(--panel-paper-soft);
    border: 1px solid var(--rule-brown);
    font-family: "EB Garamond", serif;
    font-size: var(--ui-modal-font-size);
    line-height: 1.32;
}

.credits-content h1,
.credits-content h2,
.credits-content h3 {
    color: var(--ink-strong);
    font-weight: normal;
    font-style: italic;
}

.credits-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.6rem 0 1rem;
}

.credits-content th,
.credits-content td {
    border-bottom: 1px solid rgba(72, 52, 31, 0.24);
    padding: 0.22rem 0.35rem;
    text-align: left;
    vertical-align: top;
}

.credits-content code {
    color: rgba(42, 28, 16, 0.95);
    background: rgba(255, 246, 220, 0.22);
    padding: 0 0.16rem;
}

#lighting {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}

#lighting::before,
#lighting::after {
    content: "";
    position: absolute;
    inset: -18%;
    pointer-events: none;
}

#lighting::before {
    background:
        radial-gradient(circle at 16% 5%,
            rgba(255, 214, 150, 0.36) 0%,
            rgba(210, 126, 64, 0.20) 14%,
            rgba(120, 65, 38, 0.08) 34%,
            rgba(60, 36, 24, 0.025) 58%,
            rgba(60, 36, 24, 0) 76%);
    mix-blend-mode: soft-light;
    opacity: 0.42;
    animation: candle-flicker 6.8s infinite ease-in-out;
    will-change: opacity, transform, filter;
}

#lighting::after {
    background:
        radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.035) 50%,
            rgba(0, 0, 0, 0.18) 100%);
    mix-blend-mode: multiply;
    opacity: 0.24;
}

@keyframes candle-flicker {
    0% {
        opacity: 0.36;
        filter: brightness(0.99) sepia(0.08) saturate(1.02);
        transform: translate3d(0, 0, 0) scale(1);
    }
    18% {
        opacity: 0.46;
        filter: brightness(1.06) sepia(0.12) saturate(1.07);
        transform: translate3d(0.18%, -0.08%, 0) scale(1.008);
    }
    31% {
        opacity: 0.39;
        filter: brightness(1.01) sepia(0.09) saturate(1.04);
        transform: translate3d(-0.08%, 0.08%, 0) scale(1.003);
    }
    49% {
        opacity: 0.5;
        filter: brightness(1.08) sepia(0.14) saturate(1.08);
        transform: translate3d(0.24%, -0.13%, 0) scale(1.011);
    }
    64% {
        opacity: 0.41;
        filter: brightness(1.02) sepia(0.1) saturate(1.04);
        transform: translate3d(-0.12%, 0.1%, 0) scale(1.004);
    }
    81% {
        opacity: 0.47;
        filter: brightness(1.065) sepia(0.13) saturate(1.07);
        transform: translate3d(0.14%, -0.06%, 0) scale(1.008);
    }
    100% {
        opacity: 0.36;
        filter: brightness(1) sepia(0.08) saturate(1.02);
        transform: translate3d(0, 0, 0) scale(1);
    }
}
  

/* Command history */
#choices {
    position: absolute;
    left: 1rem;
    right: 3rem;
    top: 39.2%;
    bottom: 3.15rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 0.95rem;
}

#left_control_separator {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(143, 108, 63, 0.28);
    pointer-events: none;
}

#command_history {
    display: none;
    position: absolute;
    inset: 0.95rem 0 0 0;
    overflow-y: auto;
    font-size: 1rem;
    line-height: 1.2;
    margin: 0;
    border-top: 0;
    padding-top: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-muted) rgba(151, 111, 64, 0.12);
}

html[data-input-mode="text"] body[data-game-running="true"] #command_history {
    display: block;
}

#command_history .history-item {
    margin-bottom: 0.25rem;
    color: rgba(0, 0, 0, 0.82);
    cursor: var(--pointer-cursor, pointer);
    transition: color 160ms ease, opacity 160ms ease;
}

#command_history .history-item:hover,
#command_history .history-item.active {
    color: rgba(0, 0, 0, 1);
}

#command_history .history-item.active {
    font-weight: 600;
}

#command_history::-webkit-scrollbar {
    width: 6px;
}

#command_history::-webkit-scrollbar-track {
    background: rgba(151, 111, 64, 0.12);
}

#command_history::-webkit-scrollbar-thumb {
    background-color: var(--ink-muted);
    border-radius: 4px;
}

/* Input area */
#input_area {
    display: block;
    margin-top: 15px;
    margin-bottom: 10px;
    width: 100%;
}

/* Command input container */
#command_input {
    width: 100%;
    position: relative;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, max-height 0.45s ease, margin-top 0.45s ease, visibility 0s linear 0.45s;
}

/* Fade out command input when loading */
#command_input.fading {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Prevent interaction while faded out */
}

html[data-input-mode="text"][data-process-state="ready"] body[data-game-running="true"] #command_input {
    max-height: 3rem;
    margin-top: 10px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.story-choices {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc((1rem * 1.25 + 0.36rem + 0.24rem) * 10 + 0.16rem);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.08rem 0.55rem 0.08rem 0.1rem;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(43, 31, 20, 0.58) rgba(151, 111, 64, 0.08);
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
    pointer-events: none;
}

.story-choices[hidden] {
    display: block;
}

html[data-history-restoring="true"] .story-choices,
body:not([data-game-running="true"]) .story-choices,
html[data-process-state="waiting-generating"] .story-choices,
html[data-process-state="playing-generating"] .story-choices,
html[data-process-state="playing-ready"] .story-choices,
html[data-process-state="command-waiting"] .story-choices {
    opacity: 0;
    pointer-events: none;
}

html[data-process-state="ready"] .story-choices[data-choice-ready="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.story-choices::-webkit-scrollbar {
    width: 0.22rem;
}

.story-choices::-webkit-scrollbar-track {
    background: rgba(151, 111, 64, 0.08);
    border-radius: 999px;
}

.story-choices::-webkit-scrollbar-thumb {
    background-color: rgba(43, 31, 20, 0.58);
    border-radius: 999px;
}

.choice-list {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.choice-list-item {
    list-style: none;
    margin: 0 0 0.24rem 0;
}

.choice-list-item::marker {
    content: "";
}

.choice-list .choice-button {
    display: grid;
    grid-template-columns: 1.65em 1fr;
    align-items: baseline;
    gap: 0.58rem;
    width: 100%;
    padding: 0.18rem 0.22rem;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.25;
    text-align: left;
    cursor: var(--pointer-cursor, pointer);
    border-radius: var(--control-radius);
    transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.choice-list .choice-button:hover,
.choice-list .choice-button:focus-visible {
    color: var(--ink-strong);
    background: rgba(73, 48, 25, 0.07);
    text-decoration: none;
    outline: 1px dotted rgba(47, 31, 18, 0.45);
    outline-offset: 0.08rem;
    transform: translateX(0.04rem);
}

.choice-list kbd {
    display: inline-block;
    min-width: 1.4em;
    font-family: inherit;
    font-size: 0.85em;
    color: var(--ink-strong);
    font-weight: 700;
    text-align: center;
    border-bottom: 0;
    font-style: normal;
    text-transform: lowercase;
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-feature-settings: "smcp" on, "c2sc" on, "onum" on, "pnum" on, "kern" on, "liga" on;
}

/* Input wrapper for positioning cursor */
.input-wrapper {
    position: relative;
    width: 100%;
    display: inline-block;
    min-height: 1.5em; /* Minimum height for one line */
    max-height: 6em; /* Maximum height - about 4 lines */
    overflow: visible; /* Changed from 'auto' to 'visible' to hide scrollbars when not needed */
}

/* Player input styling - now a textarea for multiline support */
#player_input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #8b7765;
    font-family: 'EB Garamond', serif;
    font-size: 1.1rem;
    color: var(--ink-text);
    outline: none;
    padding: 5px 0;
    caret-color: transparent; /* Hide the default caret */
    box-sizing: border-box;
    resize: none; /* Disable manual resizing */
    overflow: hidden; /* Hide all scrollbars */
    line-height: 1.2; /* Match paragraph line height */
    height: auto; /* Allow height to adjust */
    min-height: 1.5em; /* Ensure minimum height */
}

/* Custom cursor styling */
#cursor {
    position: absolute;
    display: inline-block;
    width: 8px;
    height: 1.2em;
    background-color: var(--ink-strong);
    top: 6px;
    left: 0;
    animation: blink 1s step-end infinite;
    pointer-events: none; /* Allow clicks to pass through to the input */
    z-index: 1; /* Ensure cursor appears above text */
}

html[data-process-state="command-waiting"] body {
    cursor: var(--process-cursor, wait) !important;
}

html[data-process-state="waiting-generating"] body,
html[data-process-state="playing-generating"] body,
html[data-process-state="playing-ready"] body {
    cursor: var(--process-cursor, progress) !important;
}

html body.modal-open {
    cursor: var(--default-cursor, default) !important;
}

html[data-process-state="command-waiting"] a:not([aria-disabled="true"]),
html[data-process-state="command-waiting"] button:not([disabled]),
html[data-process-state="command-waiting"] input:not([disabled]),
html[data-process-state="command-waiting"] textarea:not([disabled]),
html[data-process-state="command-waiting"] select:not([disabled]),
html[data-process-state="command-waiting"] [role="button"],
html[data-process-state="waiting-generating"] a:not([aria-disabled="true"]),
html[data-process-state="waiting-generating"] button:not([disabled]),
html[data-process-state="waiting-generating"] input:not([disabled]),
html[data-process-state="waiting-generating"] textarea:not([disabled]),
html[data-process-state="waiting-generating"] select:not([disabled]),
html[data-process-state="waiting-generating"] [role="button"],
html[data-process-state="playing-generating"] a:not([aria-disabled="true"]),
html[data-process-state="playing-generating"] button:not([disabled]),
html[data-process-state="playing-generating"] input:not([disabled]),
html[data-process-state="playing-generating"] textarea:not([disabled]),
html[data-process-state="playing-generating"] select:not([disabled]),
html[data-process-state="playing-generating"] [role="button"],
html[data-process-state="playing-ready"] a:not([aria-disabled="true"]),
html[data-process-state="playing-ready"] button:not([disabled]),
html[data-process-state="playing-ready"] input:not([disabled]),
html[data-process-state="playing-ready"] textarea:not([disabled]),
html[data-process-state="playing-ready"] select:not([disabled]),
html[data-process-state="playing-ready"] [role="button"] {
    cursor: var(--pointer-cursor, pointer) !important;
}

/* Placeholder styling - lighter and italic, with padding to avoid cursor overlap */
#player_input::placeholder {
    color: var(--ink-disabled);
    font-style: italic;
    padding-left: 15px; /* Add padding to move placeholder text to the right */
}

/* Blinking animation */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Fade-in animation for input area */
@keyframes fadeInInput {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

.fade-in-input {
    animation: fadeInInput 0.5s ease forwards;
}

/* Text animation and typography styles */

/* Fade-in animation for text elements */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
}

/* Hyphenation settings */
.story-paragraph {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* Justified text styles */
#story p {
  text-align: justify;
  text-justify: inter-word;
  font-size: var(--story-font-size);
  margin: 0;
  line-height: var(--story-line-height);
}

#story p.story-chapter-heading {
  position: relative;
  height: auto;
  text-align: center;
  font-size: var(--story-font-size);
  font-style: italic;
  font-weight: 400;
  line-height: var(--story-line-height);
}

#story p.story-section-heading {
  position: relative;
  height: auto;
  text-align: center;
  font-style: normal;
  line-height: var(--story-line-height);
}

/* Typography for word elements in rendered paragraphs */
.word {
  display: inline-block;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path, opacity;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-feature-settings: "kern" on, "liga" on, "onum" on, "pnum" on, "dlig" on, "clig" on, "calt" on;
}

.story-glossary-word {
  border-bottom: none;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(74, 54, 33, 0.62);
  text-decoration-thickness: 0.035em;
  text-underline-offset: 0.12em;
  cursor: var(--pointer-cursor, help);
}

.story-glossary-word:hover,
.story-glossary-word:focus-visible {
  color: var(--ink-strong);
  clip-path: none !important;
  outline: none;
}

@keyframes wordReveal {
  0% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

.story-glossary-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 240;
  width: min(calc(var(--book-width) * 0.22), 28rem);
  max-width: calc(100vw - 2rem);
  background: var(--panel-paper);
  color: var(--ink-text);
  border: 1px solid var(--panel-border);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.34);
  font-family: 'EB Garamond', var(--book-font), serif;
  font-size: var(--ui-modal-font-size);
  line-height: 1.25;
  opacity: 0;
  transform: translateY(0.22rem);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.story-glossary-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.story-glossary-tooltip-header {
  border-bottom: 1px solid var(--rule-brown);
  padding: calc(var(--story-line-height) * 0.35) calc(var(--story-line-height) * 0.55) calc(var(--story-line-height) * 0.24);
}

.story-glossary-tooltip-title {
  margin: 0;
  color: var(--ink-strong);
  font: inherit;
  font-style: italic;
  line-height: 1.15;
}

.story-glossary-tooltip-body {
  padding: calc(var(--story-line-height) * 0.38) calc(var(--story-line-height) * 0.55) calc(var(--story-line-height) * 0.48);
}

strong {
  font-weight: bold;
  font-synthesis: none;
}

em {
  font-style: italic;
  font-synthesis: none;
}

.story-small-caps,
.story-dropcap-first-line {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" on, "c2sc" on, "kern" on, "liga" on, "onum" on, "pnum" on;
  letter-spacing: 0.012em;
}

.story-title-caps {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" on, "c2sc" on, "case" on, "kern" on, "liga" on;
}

/* Typography for hyphen at line breaks */
.hyphen-marker {
  display: inline-block;
}

/* Highlight the latest paragraph being rendered */
.latest-paragraph {
  color: var(--ink-strong);
}

/* Completed paragraphs style */
.completed-paragraph {
  color: var(--ink-text);
}

/* Animation speed controls */
#speed {
  width: 80px;
  vertical-align: middle;
  margin: 0 5px;
}

body:not([data-game-running="true"]) #command_input {
  display: none;
}

#start_prompt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12%;
  font-family: 'EB Garamond', var(--book-font), serif;
  font-size: 34px;
  font-style: italic;
  color: rgba(45, 34, 24, 0.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.choice-list-item.choice-optional .choice-button span {
    font-style: italic;
}

body:not([data-game-running="true"]) #start_prompt {
  opacity: 1;
}

/* Options Modal Styling */
.modal {
    width: 100%;
    height: 100%;
}

.modal-content {
    width: min(calc(var(--book-width) * 0.44), calc(100vw - 2rem));
    max-width: 100%;
    max-height: calc(100vh - 2rem);
    padding: 0;
    position: relative;
    font-size: var(--ui-modal-font-size);
    transform-origin: center center;
}

.modal-header {
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding: calc(var(--story-line-height) * 0.45) calc(var(--story-line-height) * 0.7) calc(var(--story-line-height) * 0.32);
}

.modal-header h2 {
    letter-spacing: 0.02rem;
}

.close {
    font-size: var(--ui-modal-font-size);
    line-height: 1;
}

.close:hover {
    color: var(--ink-strong);
}

.options-section {
    margin-bottom: 1.5rem;
}

.modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: calc(var(--story-line-height) * 0.45) calc(var(--story-line-height) * 0.7);
}

.modal-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--rule-brown);
    padding: calc(var(--story-line-height) * 0.35) calc(var(--story-line-height) * 0.7) calc(var(--story-line-height) * 0.45);
    text-align: right;
}

.modal-footer button,
.option-item input[type="text"],
.option-item input[type="password"],
.option-item input[type="url"],
.option-item input[type="number"] {
    background-color: transparent;
    border: 1px solid var(--panel-border);
    border-radius: var(--control-radius);
    color: var(--ink-text);
    font-family: 'EB Garamond', var(--book-font), serif;
    font-size: inherit;
}

.modal-footer button {
    padding: 0.35rem 1rem;
    cursor: var(--pointer-cursor, pointer);
}

.option-item input[type="text"],
.option-item input[type="password"],
.option-item input[type="url"],
.option-item input[type="number"] {
    box-sizing: border-box;
    width: min(18rem, 60%);
    padding: 0.3rem 0.5rem;
}

.option-item input[type="text"]:focus,
.option-item input[type="password"]:focus,
.option-item input[type="url"]:focus,
.option-item input[type="number"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(90, 57, 33, 0.14);
}

.options-section h3 {
    font-family: 'EB Garamond', var(--book-font), serif;
    font-weight: normal;
    font-size: inherit;
    margin-top: 0;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--rule-brown);
    padding-bottom: 0.4rem;
    color: var(--ink-strong);
}

.option-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.7rem;
    padding: 0.25rem 0;
}

.option-item label {
    font-family: 'EB Garamond', var(--book-font), serif;
    font-size: inherit;
    color: var(--ink-muted);
    flex: 1 1 auto;
}

.option-item .slider-value {
    min-width: 3rem;
    text-align: right;
}

.option-item .game-language-value {
    min-width: 8rem;
    text-align: right;
    font-style: italic;
}

.volume-option {
    justify-content: flex-start;
}

.volume-option label {
    flex: 1 1 auto;
}

.volume-toggle {
    width: 1.55rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--panel-border);
    border-radius: var(--control-radius);
    background: transparent;
    color: var(--ink-text);
    cursor: var(--pointer-cursor, pointer);
    font-size: inherit;
    line-height: 1;
}

.volume-toggle svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.volume-toggle:hover {
    background-color: rgba(83, 56, 31, 0.08);
}

.volume-toggle.is-muted {
    opacity: 0.55;
}

.provider-status-list {
    margin: 0.5rem 0 1rem;
    border: 1px solid var(--rule-brown);
    border-radius: var(--control-radius);
}

.provider-status-row {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) auto;
    gap: 1rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--rule-brown);
    font-size: inherit;
}

.provider-status-row:last-child {
    border-bottom: none;
}

.provider-status-value {
    font-style: italic;
    text-align: right;
}

/* Elegant checkboxes */
.option-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--control-radius);
    outline: none;
    cursor: var(--pointer-cursor, pointer);
    position: relative;
    background-color: transparent;
    overflow: hidden;
}

.option-item input[type="checkbox"]:checked::before {
    content: "✓";
    position: absolute;
    font-family: 'EB Garamond', var(--book-font), serif;
    font-size: inherit;
    top: -0.05rem;
    left: 0.15rem;
    color: var(--ink-text);
}

/* Elegant select dropdowns */
.option-item select {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid var(--panel-border);
    border-radius: var(--control-radius);
    padding: 0.3rem 1.5rem 0.3rem 0.5rem;
    font-family: 'EB Garamond', var(--book-font), serif;
    font-size: inherit;
    color: var(--ink-text);
    cursor: var(--pointer-cursor, pointer);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    background-size: 0.6rem;
    min-width: 8rem;
}

.option-item select:focus {
    outline: none;
}

/* Range inputs (sliders) - match the main menu style */
.option-item input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 8rem;
    height: 0.5rem;
    background-color: transparent;
    box-sizing: border-box;
    border: 1px solid var(--panel-border);
    border-radius: var(--control-radius);
    outline: none;
    margin: 0;
    overflow: hidden;
    cursor: var(--pointer-cursor, pointer);
}

.option-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 0.25rem;
    background-color: rgba(58, 39, 24, 0.92);
    border: none;
    box-shadow: -407px 0 0 400px rgba(96, 66, 38, 0.32);
}

.option-item input[type="range"]::-moz-range-thumb {
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 0.25rem;
    background-color: rgba(58, 39, 24, 0.92);
    border: none;
    box-shadow: -407px 0 0 400px rgba(96, 66, 38, 0.32);
}

/* Reload notice */
.reload-notice {
    margin-top: 1rem;
    padding: 0.5rem;
    border: 1px solid var(--rule-brown);
    border-radius: var(--control-radius);
    background-color: rgba(233, 221, 200, 0.3);
    font-family: 'EB Garamond', var(--book-font), serif;
    font-style: italic;
    font-size: inherit;
    color: var(--ink-muted);
    text-align: center;
}

.api-settings {
    margin-top: 1rem;
    padding: 0;
}

.elevenlabs-setting,
.openai-setting {
    display: none; /* Hidden by default, shown when the relevant provider is selected */
}

body.webgl-mode {
    background: #090705;
    align-items: stretch;
    justify-content: stretch;
    --ui-menu-font-size: 1rem;
    --ui-modal-font-size: 1.18rem;
    font-size: 18px;
}

body.webgl-mode #choices,
body.webgl-mode .story-choices {
    color: rgba(246, 231, 201, 0.92);
    scrollbar-color: rgba(246, 231, 201, 0.54) rgba(255, 236, 190, 0.08);
}

body.webgl-mode #command_history .history-item {
    color: rgba(246, 231, 201, 0.78);
}

body.webgl-mode #command_history .history-item:hover,
body.webgl-mode #command_history .history-item.active {
    color: rgba(255, 246, 220, 0.96);
}

body.webgl-mode .story-choices::-webkit-scrollbar-track {
    background: rgba(255, 236, 190, 0.08);
}

body.webgl-mode .story-choices::-webkit-scrollbar-thumb {
    background-color: rgba(246, 231, 201, 0.54);
}

body.webgl-mode .choice-list .choice-button {
    color: rgba(246, 231, 201, 0.82);
}

body.webgl-mode .choice-list .choice-button:hover,
body.webgl-mode .choice-list .choice-button:focus-visible {
    color: rgba(255, 248, 225, 0.98);
    background: rgba(255, 236, 190, 0.12);
    outline-color: rgba(255, 236, 190, 0.48);
}

body.webgl-mode .choice-list kbd {
    color: rgba(255, 248, 225, 0.96);
}

#webgl_app {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #090705;
}

#webgl_canvas,
#scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

#top_menu {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    right: 0;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    box-sizing: border-box;
    color: rgba(246, 231, 201, 0.94);
    background: linear-gradient(180deg, rgba(13, 10, 7, 0.88), rgba(13, 10, 7, 0.46));
    border-bottom: 1px solid rgba(246, 231, 201, 0.18);
    font-size: 16px;
    line-height: 1;
}

#top_menu_title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

#top_menu_controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.control_group {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.control_group label,
#lab_status {
    white-space: nowrap;
}

#top_menu_controls button,
.transport_button,
.modal-overview-row {
    font-family: 'EB Garamond', serif;
    font-size: 14px;
    line-height: 1;
    color: rgba(246, 231, 201, 0.92);
    background: rgba(44, 28, 17, 0.72);
    border: 1px solid rgba(246, 231, 201, 0.24);
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
}

#top_menu_controls button:hover,
.transport_button:hover,
.modal-overview-row:hover {
    background: rgba(87, 55, 31, 0.78);
}

.transport_button {
    width: 28px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
}

.transport_button:disabled {
    cursor: var(--default-cursor, default);
    opacity: 0.38;
}

#modal_overview {
    position: fixed;
    z-index: 45;
    top: 52px;
    right: 14px;
    width: 164px;
    color: rgba(246, 231, 201, 0.9);
    background: rgba(12, 9, 7, 0.58);
    border: 1px solid rgba(246, 231, 201, 0.18);
    border-radius: 6px;
    padding: 8px;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
}

.modal-overview-title {
    font-size: 13px;
    line-height: 1;
    margin: 0 0 8px;
    color: rgba(246, 231, 201, 0.68);
}

#modal_overview_list {
    display: grid;
    gap: 6px;
}

.modal-overview-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
}

.modal-overview-row span:last-child {
    color: rgba(246, 231, 201, 0.62);
}

body.webgl-mode #lighting {
    display: none;
}

@media (max-width: 780px) {
    #modal_overview {
        display: none;
    }

    #top_menu {
        height: auto;
        min-height: 42px;
        gap: 8px;
        padding: 6px 10px;
    }

    #top_menu_controls button {
        padding: 6px 7px;
    }

    #lab_status,
    .control_group label {
        display: none;
    }

}