/* Import Pixel Font */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Custom cursor - apply to everything */
*,
*::before,
*::after,
html,
body,
input,
button,
textarea,
select,
a,
.inputarea,
.inputarea *,
#game,
#game * {
    cursor: url('/MERE/static/images/dialogbox/cursor_32.png') 0 0, pointer !important;
}

/* Pixelated Box Shadow Mixin - Creates 8-bit style borders */
:root {
    --pixel-border-color: #0000ff;
    --pixel-border-size: 4px;
}

body {
    margin: 0;
    background-color: #000000;
    color: white;
    font-family: "Press Start 2P", "Open Sans", Helvetica, Arial, sans-serif;
    overflow: hidden;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 6;
    /* Above Live2D canvas container (z-index: 5) */
    transition: opacity 1s ease-in-out;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

#background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 7;
    /* Above background-image (z-index: 6) */
    pointer-events: none;
    user-select: none;
}

video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.title {
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fb923c;
    font-family: "Press Start 2P", monospace;
    font-size: 14px;
    font-weight: normal;
    z-index: 5;
    background: transparent;
    padding: 15px;
    border-radius: 0;
    margin: 0;
    border: none;
    text-shadow: 0 0 10px rgba(251, 146, 60, 0.5);
    pointer-events: none;
}

/* Dialog Container */
#dialog-container {
    position: fixed;
    bottom: 120px;
    left: 0;
    width: 100%;
    /* Full width for robust centering */
    transform: none;
    /* Remove transform centering */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    /* Ensure on top */
    pointer-events: none;
    /* Allow clicks to pass through empty space */
}


/* Single Dialog Box */
.chat {
    position: relative;
    width: 100%;
    max-width: 750px;
    min-height: 160px;
    overflow: hidden;
    padding: 0;
    background: none;
    /* Remove background from main element */
    backdrop-filter: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    pointer-events: auto;
    /* Re-enable clicks */
    margin: 0 auto;
    /* Backup centering */
}

/* Add dialog box using 3-slice border-image (corners don't stretch, center does) */
.chat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    /* 3-slice approach: left 45% | center 10% | right 45% */
    border-style: solid;
    border-width: 0 150px;
    /* Left and right border widths for corners */
    border-color: transparent;
    /* Prevent white box while image loads */
    border-image-source: url('../images/dialogbox/dialogbox_transparent.png');
    border-image-slice: 0 45% fill;
    /* 0 top/bottom, 45% left/right corners */
    border-image-repeat: stretch;
    box-sizing: border-box;
    /* Dark blue glow effect */
    filter: drop-shadow(0 0 8px rgba(30, 64, 175, 0.9)) drop-shadow(0 0 15px rgba(30, 64, 175, 0.6)) drop-shadow(0 0 25px rgba(30, 64, 175, 0.4));
}

/* Hide scrollbar completely */
.chat::-webkit-scrollbar {
    display: none;
}

.chat {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Dialog content inside the box */
.dialog-content {
    padding: 30px 100px;
    /* Symmetrical padding for perfect centering */
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Message styling inside dialog - default orange for narrative */
.dialog-message {
    color: #fb923c;
    font-family: "Press Start 2P", "SimHei", "Microsoft YaHei", "Meiryo", "MS Gothic", monospace;
    font-size: 20px;
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
    user-select: none;
    /* Make text non-selectable */
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE/Edge */
}

/* Blue text for player inner monologue */
.dialog-message.monologue {
    color: #ffffff !important;
}

/* Blue text for Mere's dialogue */
.dialog-message.dialogue {
    color: #0000ff !important;
    text-shadow: 0 0 2px #fff, 0 0 4px rgba(255, 255, 255, 0.5);
}

/* Color-coded text styles - WHITE: inner monologue (player thoughts) */
.inner-monologue,
.dialog-message.inner-monologue {
    color: #ffffff !important;
}

.inner-monologue b {
    color: #ffffff !important;
    font-weight: bold;
}

/* BLUE: Mere's dialogue */
.mere-dialogue,
.dialog-message.mere-dialogue {
    color: #0000ff !important;
    text-shadow: 0 0 9px #fff, 0 0 9px rgba(255, 255, 255, 0.8);
}

.mere-dialogue b {
    color: #0000ff !important;
    font-weight: bold;
    text-shadow: 0 0 2px #fff, 0 0 4px rgba(255, 255, 255, 0.5);
}

/* WHITE: narrative or scene description (changed from orange) */
.narrative,
.dialog-message.narrative {
    color: #ffffff !important;
}

/* WHITE: video segment text (same as monologue) */
.video,
.dialog-message.video {
    color: #ffffff !important;
}

/* Keywords - inherit parent styling */
.keyword {
    font-weight: bold;
}

/* Ensure heavy bolding for Simplified and Traditional Chinese */
:lang(zh) .dialog-message,
:lang(zh-tw) .dialog-message {
    font-weight: 800 !important;
    /* Physical thickening */
}

/* Vertical flex container for choices */
.choice-container-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    z-index: 101;
    pointer-events: auto;
}

/* Premium choice button - Blue glow style */
.choice-btn-premium {
    padding: 20px 40px;
    font-size: 14px;
    border: 4px solid #0000ff;
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    cursor: pointer;
    width: 100%;
    max-width: 750px;
    min-height: 80px;
    transition: all 0.3s;
    font-family: "Press Start 2P", "SimHei", "Microsoft YaHei", "Meiryo", "MS Gothic", monospace;
    font-weight: 900;
    text-shadow: 0 0 10px #0000ff, 0 0 20px rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
    image-rendering: pixelated;
    -webkit-font-smoothing: none;
    box-shadow: 0 0 15px #0000ff, 0 0 30px rgba(0, 0, 255, 0.4), inset 0 0 15px rgba(0, 0, 255, 0.4);
    text-align: center;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Specific thickening for choices in Chinese */
:lang(zh) .choice-btn-premium,
:lang(zh-tw) .choice-btn-premium {
    -webkit-text-stroke: 0.1px currentColor;
}

.choice-btn-premium:hover {
    background: rgba(0, 0, 255, 0.2);
    box-shadow: 0 0 25px #0000ff, 0 0 50px rgba(0, 0, 255, 0.6), inset 0 0 20px rgba(0, 0, 255, 0.6);
    transform: scale(1.02);
    color: #fff;
}

.restart-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.restart-btn {
    color: #fb923c;
    font-size: 1.4rem;
    text-align: center;
    text-shadow: 0 0 10px rgba(251, 146, 60, 0.5);
    font-weight: bold;
    padding: 15px 40px;
    background: transparent;
    border: 2px solid #fb923c;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(251, 146, 60, 0.3);
}

.restart-btn:hover {
    background: rgba(251, 146, 60, 0.15);
    box-shadow: 0 0 30px rgba(251, 146, 60, 0.6);
    transform: translateY(-2px);
}

.inputarea {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(60% + 140px);
    max-width: 800px;
    display: none;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 110;
    background: transparent;
    padding: 15px;
    border-radius: 0;
    opacity: 1;
}

#layover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/dialogbox/layover.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: 50;
    pointer-events: none;
    user-select: none;
}

input {
    width: 60%;
    background: #000000;
    padding: 12px 16px;
    border: none;
    border-radius: 0;
    color: #ffffff;
    font-size: 12px;
    font-family: "Press Start 2P", "Microsoft YaHei", "SimHei", "Meiryo", "MS Gothic", monospace;
    font-weight: bold;
    outline: none;
    user-select: text !important;
    -webkit-user-select: text !important;
    transition: all 0.2s;
    /* Pixelated border: Blue inner, Black outer */
    box-shadow:
        /* Blue inner border (2px) - listed LAST to appear ON TOP */
        0 -2px 0 0 #0000ff,
        0 2px 0 0 #0000ff,
        -2px 0 0 0 #0000ff,
        2px 0 0 0 #0000ff,
        -2px -2px 0 0 #0000ff,
        2px -2px 0 0 #0000ff,
        -2px 2px 0 0 #0000ff,
        2px 2px 0 0 #0000ff,
        /* Black outer border (2.5px = 0.5px outside blue 2px) */
        0 -2.5px 0 0 #000000,
        0 2.5px 0 0 #000000,
        -2.5px 0 0 0 #000000,
        2.5px 0 0 0 #000000,
        -2.5px -2.5px 0 0 #000000,
        2.5px -2.5px 0 0 #000000,
        -2.5px 2.5px 0 0 #000000,
        2.5px 2.5px 0 0 #000000;
}

input:focus {
    /* Pixelated border: Blue inner, Black outer */
    box-shadow:
        /* Blue inner border (2px) - listed LAST to appear ON TOP */
        0 -2px 0 0 #0000ff,
        0 2px 0 0 #0000ff,
        -2px 0 0 0 #0000ff,
        2px 0 0 0 #0000ff,
        -2px -2px 0 0 #0000ff,
        2px -2px 0 0 #0000ff,
        -2px 2px 0 0 #0000ff,
        2px 2px 0 0 #0000ff,
        /* Black outer border (2.5px) - listed FIRST, behind blue */
        0 -2.5px 0 0 #000000,
        0 2.5px 0 0 #000000,
        -2.5px 0 0 0 #000000,
        2.5px 0 0 0 #000000,
        -2.5px -2.5px 0 0 #000000,
        2.5px -2.5px 0 0 #000000,
        -2.5px 2.5px 0 0 #000000,
        2.5px 2.5px 0 0 #000000,
        /* Focus glow */
        inset 0 0 0 2px rgba(0, 0, 255, 0.4);

    /* Keep background on focus */
    background: #0a0a0a;
}

input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-family: "Press Start 2P", "Microsoft YaHei", "SimHei", "Meiryo", "MS Gothic", monospace;
    font-size: 8px;
    font-weight: bold;
}

button {
    padding: 12px 24px;
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-family: "Press Start 2P", "Microsoft YaHei", "SimHei", "Meiryo", "MS Gothic", monospace;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.2s;
    /* Pixelated border: Blue inner, Black outer */
    box-shadow:
        /* Blue inner border (2px) - listed LAST to appear ON TOP */
        0 -2px 0 0 #0000ff,
        0 2px 0 0 #0000ff,
        -2px 0 0 0 #0000ff,
        2px 0 0 0 #0000ff,
        -2px -2px 0 0 #0000ff,
        2px -2px 0 0 #0000ff,
        -2px 2px 0 0 #0000ff,
        2px 2px 0 0 #0000ff,
        /* Black outer border (2.5px = 0.5px outside blue 2px) */
        0 -2.5px 0 0 #000000,
        0 2.5px 0 0 #000000,
        -2.5px 0 0 0 #000000,
        2.5px 0 0 0 #000000,
        -2.5px -2.5px 0 0 #000000,
        2.5px -2.5px 0 0 #000000,
        -2.5px 2.5px 0 0 #000000,
        2.5px 2.5px 0 0 #000000;
}

button:hover {
    background: #1a1a1a;
    box-shadow:
        0 -4px 0 0 #0000ff,
        0 4px 0 0 #0000ff,
        -4px 0 0 0 #0000ff,
        4px 0 0 0 #0000ff,
        -4px -4px 0 0 #0000ff,
        4px -4px 0 0 #0000ff,
        -4px 4px 0 0 #0000ff,
        4px 4px 0 0 #0000ff;
    transform: translateY(-2px);
}

button:active {
    transform: translateY(2px);
}

.mic-btn {
    width: 60px;
    height: 54px;
    padding: 0;
    border-radius: 8px;
    background: #000000;
    border: 2px solid #0000ff;
    color: #ffffff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    box-shadow: 0 0 20px rgba(0, 0, 255, 0.6), inset 0 0 10px rgba(0, 0, 255, 0.1);
    box-sizing: border-box;
    line-height: 1;
}

.mic-btn:hover {
    background: #1a1a1a;
    box-shadow: 0 0 30px rgba(0, 0, 255, 0.8), inset 0 0 15px rgba(0, 0, 255, 0.2);
    opacity: 1;
}

.mic-btn.listening {
    background: linear-gradient(135deg, #ff0066 0%, #cc0052 100%);
    border-color: #ff0066;
    color: #fff;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 0, 102, 0.5);
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 0, 102, 0.8);
    }
}

#skip {
    background: linear-gradient(-229deg, #1900ff, #000000);
    border: 2px solid #1900ff;
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(25, 0, 255, 0.3);
    border-radius: 5px;
}

#skip:hover {
    background: linear-gradient(-229deg, #3d3dff, #1900ff);
    box-shadow: 0 6px 20px rgba(25, 0, 255, 0.5);
    opacity: 1;
}

#live2d {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    z-index: 5 !important;
    pointer-events: none;
    filter: drop-shadow(0 0 20px rgba(25, 0, 255, 0.5));
    display: block;
}