/**
 * =============================================================================
 * 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;
}
main-screen.leaving-menu main-menu,
main-screen.leaving-menu #menu-volume-control { visibility: hidden; }

#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;
}

.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: 16px;
    left: 20px;
    z-index: 5;
    color: #eee;
    background: #121212b3;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 16px;
    pointer-events: none;
}

/* Реплики сцены: одинаковые порции текста на компьютере и телефоне. */
.story-scene #monogatari text-box {
    /* Движок задаёт 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: auto;
    min-height: 130px;
    max-height: 42vh;
    max-height: 42dvh;
    overflow-y: auto;
    padding: clamp(16px, 2vw, 28px);
    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: auto 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: clamp(18px, 2vw, 28px);
    line-height: 1.5;
    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));
        min-height: 110px;
        padding: 14px 16px;
    }
}
@media (orientation: landscape) and (max-height: 500px) {
    .story-scene #monogatari text-box {
        min-height: 80px;
        max-height: 46vh;
        max-height: 46dvh;
        padding: 10px 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: 17px;
        line-height: 1.4;
    }
}

/* 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-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.prologue:not(.story-choice) #story-menu-toggle {
    display: none;
}
.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; }

/* This comparison build intentionally has no menu video. */
main-screen { background: #000 !important; }