/**
 * =============================================================================
 * 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
 * ===========================
**/

/* 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"] {
    background-size: contain;
    background: transparent url("./../assets/scenes/obloga.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

[data-screen="main"]::before {
    content: '';
    background-size: contain;
    background: #000 url("./../assets/scenes/obloga.webp") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    filter: blur(20px);
}

/* 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) {

}

.invisible {
    display: none;
}

.choice-box-full {
    width: 80%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.question-top-text {
    background: linear-gradient(red 16.66%, orange 0 33.33%, yellow 0 50%, green 0 66.66%, blue 0 83.33%, indigo 0);
    font-weight: 900;
    text-shadow: rgb(35, 148, 197) 3px 0px 0px, rgb(35, 148, 197) 2.83487px 0.981584px 0px, rgb(35, 148, 197) 2.35766px 1.85511px 0px, rgb(35, 148, 197) 1.62091px 2.52441px 0px, rgb(35, 148, 197) 0.705713px 2.91581px 0px, rgb(35, 148, 197) -0.287171px 2.98622px 0px, rgb(35, 148, 197) -1.24844px 2.72789px 0px, rgb(35, 148, 197) -2.07227px 2.16926px 0px, rgb(35, 148, 197) -2.66798px 1.37182px 0px, rgb(35, 148, 197) -2.96998px 0.42336px 0px, rgb(35, 148, 197) -2.94502px -0.571704px 0px, rgb(35, 148, 197) -2.59586px -1.50383px 0px, rgb(35, 148, 197) -1.96093px -2.27041px 0px, rgb(35, 148, 197) -1.11013px -2.78704px 0px, rgb(35, 148, 197) -0.137119px -2.99686px 0px, rgb(35, 148, 197) 0.850987px -2.87677px 0px, rgb(35, 148, 197) 1.74541px -2.43999px 0px, rgb(35, 148, 197) 2.44769px -1.73459px 0px, rgb(35, 148, 197) 2.88051px -0.838247px 0px;
}

[data-component="timer-display"] > div {
    background: linear-gradient(45deg, red 16.66%, orange 0 33.33%, yellow 0 50%, green 0 66.66%, blue 0 83.33%, indigo 0);
}

@keyframes polish-rage-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px) rotate(-1deg); }
    20%, 40%, 60%, 80% { transform: translateX(5px) rotate(1deg); }
}

@keyframes polish-rage-flash {
    0%, 100% { background-color: rgba(255, 0, 0, 0); }
    50% { background-color: rgba(255, 0, 0, 0.3); }
}

.polish-rage-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    animation: polish-rage-flash 0.3s ease-in-out infinite;
}

.polish-rage-shake {
    animation: polish-rage-shake 0.2s infinite;
}