/**
 * =============================================================================
 * This is the file where all your styling should go in.
 * Instead of modifying the styles found in the monogatari.css file or others,
 * you should overwrite those styles in this file.
 *
 * The CSS selectors shown are not an extensive list but they are the most
 * common you might want to change. To find what other elements are available,
 * you can take a look at the monogatari.css file or use your browser's dev
 * tools to inspect the elements.
 * =============================================================================
**/

/**
 * ===========================
 * General Styling
 * ===========================
**/

@font-face {
    font-family: 'PT Serif';
    src: url('../assets/fonts/PTSerif-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../assets/fonts/CormorantGaramond.ttf') format('truetype');
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

.game-start-curtain {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: #000;
    opacity: 0;
}

game-screen { background-color: #000; }
#monogatari text-box {
    left: clamp(16px, 5vw, 100px);
    right: clamp(16px, 5vw, 100px);
    bottom: calc(var(--quick-menu-height, 40px) + clamp(16px, 3vh, 40px));
    width: auto;
    min-height: 150px;
    max-height: 32vh;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(8, 10, 15, .86);
    border: 1px solid rgba(255, 255, 255, .18);
}

#monogatari text-box [data-ui="say"],
#monogatari text-box [data-content="dialog"],
#monogatari text-box type-writer {
    font-family: 'PT Serif', Georgia, serif;
    font-weight: 400;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.5;
}

#monogatari text-box::after { display: none; }
game-screen.prologue text-box,
game-screen.prologue quick-menu { visibility: hidden; }
/* Во время выбора оставляем отмотку и меню доступными. */
game-screen.story-choice quick-menu { visibility: visible; }
.story-scene #monogatari game-screen quick-menu [data-action="back"] {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid rgba(235, 223, 196, .55);
    border-radius: 6px;
    background: rgba(8, 10, 15, .8);
}
.story-scene #monogatari game-screen.story-choice choice-container {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 20;
}
.story-scene #monogatari game-screen.story-choice choice-container [data-content="wrapper"] {
    flex-direction: column;
    align-items: stretch;
    width: min(560px, calc(100vw - 32px));
    gap: 20px;
}
.story-scene #monogatari game-screen.story-choice choice-container button {
    min-height: 76px;
    padding: 18px 28px;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.25;
    white-space: normal;
}
.story-scene game-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}
.story-scene game-screen.story-choice::before {
    opacity: 1;
}
.story-scene game-screen.story-choice quick-menu {
    z-index: 21;
}
/* Движок закрывает меню сразу после Start. Сохраняем его под занавесом,
   пока картинка, кнопки и звук вместе уходят в чёрный. */
#monogatari main-screen.leaving-menu {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 10999;
    pointer-events: none;
}

#monogatari choice-container button {
    border: 1px solid rgba(235, 223, 196, .8);
    border-radius: 8px;
    padding: 16px 32px;
    background: rgba(12, 14, 20, .9);
    box-shadow: 0 0 0 4px rgba(235, 223, 196, .08);
    font-size: 1.4rem;
}

#monogatari choice-container button:hover,
#monogatari choice-container button:focus-visible {
    background: rgba(55, 49, 39, .95);
    border-color: #fff3da;
}

#scene-dissolve {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-position: center;
    background-size: cover;
    pointer-events: none;
}
#scene-fade-black {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: #000;
    pointer-events: none;
}

/* Фильтруем только изображение сцены: текст и элементы управления сохраняют цвет. */
game-screen.story-color-return [data-ui="background"],
game-screen.story-color-return #story-camera-viewport,
game-screen.story-color-return #scene-dissolve {
    filter: grayscale(0);
    transition: filter 1600ms ease-in-out;
}
game-screen.story-grayscale [data-ui="background"],
game-screen.story-grayscale #story-camera-viewport,
game-screen.story-grayscale #story-ghost,
game-screen.story-grayscale #scene-dissolve {
    filter: grayscale(1);
}
#story-ghost {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: .24;
    overflow: hidden;
    pointer-events: none;
}
.story-ghost-drift {
    position: absolute;
    inset: 0;
    animation: story-ghost-drift 3800ms ease-out forwards;
    will-change: transform;
}
.story-ghost-picture {
    position: absolute;
    inset: -1%;
    animation: story-ghost-jitter 230ms steps(2, end) infinite;
    will-change: transform;
}
@keyframes story-ghost-drift {
    from { transform: translate3d(-.9%, .3%, 0) scale(1.02); }
    to { transform: translate3d(1.1%, -.5%, 0) scale(1.04); }
}
@keyframes story-ghost-jitter {
    0%, 100% { transform: translate3d(0, 0, 0); }
    35% { transform: translate3d(2px, -1px, 0); }
    70% { transform: translate3d(-1px, 1px, 0); }
}
game-screen:not(.active) #story-ghost { display: none; }
@media (prefers-reduced-motion: reduce) {
    #story-ghost { display: none; }
}
game-screen.story-gentle-shake [data-ui="background"] {
    animation: story-gentle-shake 420ms ease-in-out infinite;
    will-change: transform;
}
@keyframes story-gentle-shake {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.012); }
    20% { transform: translate3d(-1.5px, .8px, 0) scale(1.012); }
    45% { transform: translate3d(1.2px, -.7px, 0) scale(1.012); }
    70% { transform: translate3d(-.7px, -1px, 0) scale(1.012); }
    85% { transform: translate3d(.8px, .6px, 0) scale(1.012); }
}
@media (prefers-reduced-motion: reduce) {
    game-screen.story-color-return [data-ui="background"],
    game-screen.story-color-return #story-camera-viewport,
    game-screen.story-color-return #scene-dissolve {
        transition: none;
    }
    game-screen.story-gentle-shake [data-ui="background"] {
        animation: none;
        will-change: auto;
    }
}

.storyboard-preview game-screen [data-ui="background"],
.storyboard-preview #scene-dissolve {
    background-size: contain !important;
    background-repeat: no-repeat;
    background-color: #000;
}
.storyboard-preview #monogatari choice-container {
    left: 0;
    right: 0;
    width: 100%;
    top: auto;
    bottom: 24px;
    height: auto;
    transform: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
}
.storyboard-preview #monogatari choice-container [data-content="wrapper"] {
    display: flex;
    flex-direction: row;
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.storyboard-preview #monogatari choice-container button {
    width: auto;
    margin: 0;
    padding: 8px 20px;
    font-size: 20px;
    pointer-events: auto;
}
#storyboard-frame-number {
    position: absolute;
    top: calc(max(12px, env(safe-area-inset-top)) + 8px);
    left: calc(max(12px, env(safe-area-inset-left)) + 64px);
    z-index: 30;
    color: #eee;
    background: #121212b3;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 16px;
    pointer-events: none;
}
:is(#chapter-one-test-end, #chapter-one-test-start) {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px;
    background: #000;
    color: #eee;
    text-align: center;
}
:is(#chapter-one-test-end, #chapter-one-test-start) h1 { margin: 0; font-size: clamp(36px, 6vw, 72px); }
:is(#chapter-one-test-end, #chapter-one-test-start) p { margin: 0; font-size: clamp(16px, 2vw, 24px); }
:is(#chapter-one-test-end, #chapter-one-test-start) > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
:is(#chapter-one-test-end, #chapter-one-test-start) button {
    min-width: 160px;
    padding: 14px 24px;
    border: 1px solid #c7b58b;
    border-radius: 6px;
    background: #191816;
    color: #eee;
    font: inherit;
    font-size: clamp(18px, 2vw, 26px);
    cursor: pointer;
}
:is(#chapter-one-test-end, #chapter-one-test-start) button:hover, :is(#chapter-one-test-end, #chapter-one-test-start) button:focus-visible { background: #393326; }

/* Реплики сцены: одинаковые порции текста на компьютере и телефоне. */
.story-scene #monogatari text-box {
    --story-font-size: clamp(18px, 2vw, 28px);
    --story-line-size: calc(var(--story-font-size) * 1.5);
    --story-padding-y: clamp(16px, 2vw, 28px);
    --story-padding-x: clamp(16px, 2vw, 28px);
    --story-box-height: calc(var(--story-line-size) * 2 + var(--story-padding-y) * 2 + 2px);
    /* Движок задаёт inline display:grid при каждой реплике. */
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-template-areas: "text";
    align-content: center;
    box-sizing: border-box;
    left: max(16px, 5vw, env(safe-area-inset-left));
    right: max(16px, 5vw, env(safe-area-inset-right));
    bottom: calc(var(--quick-menu-height, 40px) + 16px + env(safe-area-inset-bottom));
    height: var(--story-box-height);
    min-height: var(--story-box-height);
    max-height: var(--story-box-height);
    overflow-y: auto;
    padding: var(--story-padding-y) var(--story-padding-x);
    overscroll-behavior: contain;
}
.story-scene #monogatari text-box [data-content="name"],
.story-scene #monogatari text-box [data-content="side-image"] {
    display: none;
}
.story-scene #monogatari text-box [data-content="text"] {
    flex: 0 0 auto;
    max-height: none;
    min-height: 0;
    margin: 0;
    padding: 0;
}
.story-scene #monogatari text-box type-writer,
.story-scene #monogatari text-box p {
    margin: 0;
    padding: 0;
}
.story-scene #monogatari text-box .type-writer-container {
    margin: 0;
    padding: 0;
}
.story-scene #monogatari text-box [data-ui="say"],
.story-scene #monogatari text-box [data-content="dialog"],
.story-scene #monogatari text-box type-writer {
    font-size: var(--story-font-size);
    line-height: var(--story-line-size);
    overflow-wrap: anywhere;
}
.story-scene #monogatari choice-container {
    bottom: calc(24px + env(safe-area-inset-bottom));
}
.story-scene #monogatari choice-container button {
    min-height: 44px;
}
@media (max-width: 600px) {
    .story-scene #monogatari text-box {
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        --story-padding-y: 14px;
        --story-padding-x: 16px;
    }
}
@media (orientation: landscape) and (max-height: 500px) {
    .story-scene #monogatari text-box {
        --story-font-size: 17px;
        --story-line-size: calc(var(--story-font-size) * 1.4);
        --story-padding-y: 10px;
        --story-padding-x: 16px;
        bottom: calc(var(--quick-menu-height, 40px) + 8px + env(safe-area-inset-bottom));
    }
    .story-scene #monogatari text-box [data-ui="say"],
    .story-scene #monogatari text-box [data-content="dialog"],
    .story-scene #monogatari text-box type-writer {
        font-size: var(--story-font-size);
        line-height: var(--story-line-size);
    }
}

/* Interface typography; story text keeps its own reading font. */
#monogatari button,
#monogatari h1,
#monogatari h2,
#monogatari h3,
#monogatari label,
#monogatari select,
#monogatari input,
#monogatari output,
#monogatari settings-screen,
#monogatari help-screen,
#monogatari quick-menu,
#monogatari [data-ui="who"],
#monogatari [data-content="name"],
#entry-screen,
#menu-volume-control {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
}

#monogatari main-menu button {
    font-size: 1.5rem;
}

/* General Style */
body {

}

/* Simple Button styles*/
button {

}

/* Simple Button Style on Hover */
button:hover {

}

/* General Styling for Menu Screens */
[data-screen] {

}

/**
 * ===========================
 * Main Menu Styling
 * ===========================
**/

/* Main Menu Styling */
[data-screen="main"] {

}

/* Main Menu Buttons Styling */
[data-screen="main"] button {

}

/**
 * ===========================
 * Save and Load Menus Styling
 * ===========================
**/

/* Slots Style */
[data-component="save-slot"] figure {

}

/* Slot's Image Style */
[data-component="save-slot"] img {

}

/* Slots Title Style */
[data-component="save-slot"] figcaption {

}

/* Slots Delete Button Style */
[data-component="save-slot"] button {

}

/**
 * ===========================
 * Game Elements Styling
 * ===========================
**/

/* Choice Buttons style */
[data-component="choice-container"] button {

}

/* Choice Button Style on Hover */
[data-component="choice-container"] button:hover {

}

/* Text Box styling */
[data-component="text-box"] {

}

/* Character Name Style */
[data-ui="who"] {

}

/* Style for Centered Text */
[data-component="centered-dialog"] {

}

/* Character Images Styles */
[data-screen="game"] [data-character] {

}

/* Other Images Styles */
[data-screen="game"] [data-image] {

}

/**
 * ===========================
 * Quick Menu Styling
 * ===========================
**/

/* These styles are applied to the Mobile version of the Quick Menu */

/* Quick Menu Style */
[data-component="quick-menu"] {

}

/* Quick Menu Buttons Style */
[data-component="quick-menu"] span {

}

/* Quick Menu Buttons Style on Hover */
[data-component="quick-menu"] span:hover {

}

/* Quick Menu Buttons Icon Style */
[data-component="quick-menu"] > span > .fa {

}

/**
 * ===========================
 * Range Styling
 * ===========================
**/

/* Use the background property to set a color for these */
input[type=range]:focus::-webkit-slider-runnable-track {

}

input[type=range]::-webkit-slider-runnable-track {

}

input[type=range]:focus::-ms-fill-upper {

}

input[type=range]:focus::-ms-fill-lower {

}

input[type=range]::-moz-range-track {

}

input[type=range]::-ms-fill-lower {

}

input[type=range]::-ms-fill-upper {

}

/** Medium Screens, Phablets (601px) **/
@media screen and (min-width: 37.56255em) {
	/* Styles for the desktop version of the Quick Menu */

	/* Quick Menu Style */
	[data-component="quick-menu"] {

	}

	/* Quick Menu Buttons Style */
	[data-component="quick-menu"] span {

	}

	/* Quick Menu Buttons Style on Hover */
	[data-component="quick-menu"] span:hover {

	}
}

/** Medium Devices, Tablets (992px)**/
@media screen and (min-width: 62em) {

}

/** HD Screen, Large Devices, Wide Screens, Desktop (1200px) **/
@media screen and (min-width: 75em) {

}

/** Full HD Screen, Large Devices, Wide Screens, Large Desktops (1920px) **/
@media screen and (min-width: 120em) {

}

/** Retina Screen , Large Devices, Wide Screens(2560px) **/
@media screen and (min-width: 160em) {

}

/** 4k Screens, Large Devices, Wide Screens (3840px) **/
@media screen and (min-width: 240em) {

}

/** 5k Screens, Large Devices, Wide Screens (5000px) **/
@media screen and (min-width: 312.5em) {

}

/** 8k Screens, Large Devices, Wide Screens (8000px) **/
@media screen and (min-width: 500em) {

}

#intro-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    background: #000 url('../assets/images/BlackSolid.jpg') center / cover no-repeat;
}

#intro-logo {
    width: min(60vw, 640px);
    max-height: 60vh;
    object-fit: contain;
    opacity: 0;
}

#entry-screen[hidden] { display: none; }

#entry-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 1.5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.25rem, 3vw, 2rem);
    cursor: pointer;
    opacity: 1;
}

main-screen {
    isolation: isolate;
    overflow: hidden;
}

#menu-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

main-screen main-menu {
    z-index: 1;
    top: auto;
    left: 50%;
    right: auto;
    bottom: clamp(32px, 8vh, 96px);
    transform: translateX(-50%);
    align-self: center;
    align-items: center;
    width: max-content;
    max-width: 100%;
}

#menu-volume-control {
    position: absolute;
    z-index: 2;
    right: clamp(12px, 3vw, 48px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 14px;
}

#menu-volume {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 28px;
    height: clamp(90px, 20vh, 180px);
    margin: 0;
    accent-color: #fff;
    cursor: pointer;
}

#menu-volume::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, .35);
    border-radius: 8px;
}

#menu-volume::-moz-range-track {
    background: rgba(255, 255, 255, .35);
    border-radius: 8px;
}

@media screen and (max-width: 480px) {
    #menu-volume-control { font-size: 11px; padding: 12px 6px; }
}

/* Выезжающее игровое меню вместо постоянной нижней полосы. */
#story-movie[hidden] { display: none !important; }
#story-movie {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: #000;
}
#story-movie-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
#story-movie button {
    position: absolute;
    z-index: 1;
    padding: 10px 18px;
    min-height: 44px;
    background: rgba(8, 10, 15, .85);
    border: 1px solid rgba(235, 223, 196, .5);
    border-radius: 8px;
    color: #fff;
    font-size: 20px;
}
#story-movie .story-movie-skip {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
}
#story-movie .story-movie-play {
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#story-movie .story-movie-message {
    position: absolute;
    top: 40%;
    left: 10%;
    right: 10%;
    text-align: center;
    color: #fff;
    font-size: 22px;
}
#story-movie [hidden] { display: none !important; }
#story-developer-menu[hidden] { display: none !important; }
#story-developer-menu {
    position: absolute;
    inset: max(20px, env(safe-area-inset-top)) auto auto 50%;
    transform: translateX(-50%);
    width: min(540px, calc(100% - 40px));
    max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px;
    z-index: 80;
    border: 1px solid rgba(235, 223, 196, .6);
    border-radius: 12px;
    background: rgba(8, 10, 15, .98);
    color: #fff;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .65);
}
#story-developer-menu h2 { margin: 0 0 12px; font-size: 28px; }
#story-developer-menu button {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 6px 0;
    padding: 10px 14px;
    font-size: 22px;
    text-align: left;
    border: 1px solid rgba(235, 223, 196, .3);
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
}
.story-scene-links {
    border-top: 1px solid rgba(235, 223, 196, .3);
    margin-top: 8px;
    padding-top: 10px;
}
.story-scene-links strong {
    display: block;
    padding: 4px 14px;
    font-size: 20px;
}
.story-scene #monogatari game-screen #story-menu-toggle {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    z-index: 51;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(235, 223, 196, .55);
    border-radius: 12px;
    background: rgba(8, 10, 15, .86);
    color: #fff;
    font-family: system-ui, sans-serif;
    font-size: 30px;
    line-height: 1;
    touch-action: manipulation;
}
.story-scene #monogatari game-screen quick-menu {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    position: absolute;
    top: calc(max(12px, env(safe-area-inset-top)) + 60px);
    left: max(12px, env(safe-area-inset-left));
    right: auto;
    bottom: auto;
    width: min(280px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    height: auto;
    max-height: calc(100vh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    box-sizing: border-box;
    overflow-y: auto;
    padding: 10px;
    gap: 4px;
    border: 1px solid rgba(235, 223, 196, .4);
    border-radius: 12px;
    background: rgba(8, 10, 15, .96);
    z-index: 50;
    transform: translateX(calc(-100% - 32px - env(safe-area-inset-left)));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 220ms ease, opacity 220ms ease, visibility 220ms;
}
.story-scene #monogatari game-screen.story-menu-open quick-menu {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.story-scene #monogatari game-screen quick-menu button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 22px;
    text-align: left;
}
.story-scene #monogatari game-screen quick-menu button [data-string] {
    display: inline;
}
.story-scene #monogatari game-screen quick-menu button:hover,
.story-scene #monogatari game-screen quick-menu button:focus-visible {
    border: 1px solid rgba(235, 223, 196, .55);
    background: rgba(255, 255, 255, .08);
}
.story-scene #monogatari game-screen text-box {
    bottom: calc(18px + env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion: reduce) {
    .story-scene #monogatari game-screen quick-menu { transition: none; }
}

/* Своя кнопка fullscreen для запуска отдельным сайтом. */
#monogatari #fullscreen-toggle {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 60;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(235, 223, 196, .55);
    border-radius: 12px;
    background: rgba(8, 10, 15, .86);
    color: #fff;
    font-family: system-ui, sans-serif;
    font-size: 32px;
    line-height: 1;
    touch-action: manipulation;
}
#fullscreen-message {
    position: fixed;
    top: calc(max(12px, env(safe-area-inset-top)) + 60px);
    right: max(12px, env(safe-area-inset-right));
    z-index: 61;
    box-sizing: border-box;
    width: min(360px, calc(100vw - 32px));
    padding: 16px;
    border-radius: 10px;
    background: rgba(8, 10, 15, .96);
    color: #fff;
    font: 18px/1.4 system-ui, sans-serif;
}
html:fullscreen, html:-webkit-full-screen { background: #000; }

#monogatari settings-screen .story-volume-controls {
    width: min(440px, 100%);
    padding: 0 12px;
    box-sizing: border-box;
    text-align: left;
}
#monogatari settings-screen .story-volume-controls label {
    display: block;
    margin-top: 18px;
    font-size: 22px;
}
#monogatari settings-screen .story-volume-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
#monogatari settings-screen .story-volume-row input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    margin: 0;
}
#monogatari settings-screen .story-volume-row output {
    min-width: 4ch;
    text-align: right;
    font-size: 20px;
}