/* =========================================================
   GAME ROOT RESET
========================================================= */

html,
body {
    margin: 0 !important;
    padding: 0 !important;

    width: 100%;
    height: 100%;

    overflow: hidden !important;

    background: #000 !important;
    color: #2AFF99;

    font-family: "Courier New", monospace;

    overscroll-behavior: none;
}

/* =========================================================
   WORDPRESS THEME BLOCK
========================================================= */

#header,
#masthead,
.site-header,
.header-container,
#wpadminbar,
#sidebar,
.sidebar,
.footer,
#footer,
nav,
.menu,
.breadcrumb,
#breadcrumb,
.widget-area {
    display: none !important;
}

/* テーマ由来 transform/filter 対策 */

body,
#page,
#content,
#main,
.site-content {
    background: #000 !important;

    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
}

/* =========================================================
   GAME WRAPPER
========================================================= */

#game-wrapper {
    position: fixed !important;

    inset: 0;

    width: 100vw;
    height: 100dvh;

    overflow: hidden;

    background: #000;

    z-index: 999999;
}

/* =========================================================
   GAME CONTAINER
========================================================= */

#game-container {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

/* =========================================================
   BACKGROUND OVERLAY
========================================================= */

#background-overlay {
    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(0,255,100,0.03),
            rgba(0,255,100,0.03) 1px,
            transparent 1px,
            transparent 3px
        );

    pointer-events: none;
    z-index: 1;
}

/* =========================================================
   TITLE SCREEN
========================================================= */

#title-screen {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;

    z-index: 5;

    padding: 20px;
    box-sizing: border-box;
}

#title-screen h1 {
    margin-bottom: 30px;

    font-size: clamp(32px, 6vw, 72px);

    text-shadow:
        0 0 10px #2AFF99,
        0 0 20px #2AFF99;
}

/* =========================================================
   BUTTON
========================================================= */

button {
    background: #2AFF99;

    color: #000;

    border: none;

    padding: 14px 28px;

    font-size: clamp(16px, 2vw, 22px);

    font-family: inherit;

    cursor: pointer;

    transition:
        background 0.2s,
        color 0.2s,
        transform 0.2s;
}

button:hover {
    background: #fff;

    transform: scale(1.03);
}

/* =========================================================
   GAME SCREEN
========================================================= */

#game-screen {
    position: absolute;
    inset: 0;

    z-index: 3;
}

/* =========================================================
   SPEAKER
========================================================= */

#speaker {
    position: absolute;

    bottom: 290px;
    left: 6%;

    font-weight: bold;

    font-size: clamp(16px, 2vw, 24px);

    z-index: 10;
}

/* =========================================================
   MESSAGE WINDOW
========================================================= */

#message-window {
    position: absolute;

    left: 50%;
    bottom: 40px;

    transform: translateX(-50%);

    width: min(90%, 1100px);

    min-height: 180px;

    background: rgba(0,0,0,0.88);

    border: 1px solid #2AFF99;

    padding: 28px;

    box-sizing: border-box;

    cursor: pointer;

    z-index: 10;

    box-shadow:
        0 0 15px rgba(42,255,153,0.15);
}

#message {
    font-size: clamp(16px, 2vw, 24px);

    line-height: 1.9;

    white-space: pre-wrap;
}

/* =========================================================
   CHOICES
========================================================= */

#choices {
    position: absolute;

    right: 5%;
    bottom: 260px;

    display: flex;
    flex-direction: column;

    gap: 12px;

    z-index: 20;
}

.choice-btn {
    background: rgba(0,0,0,0.92);

    border: 1px solid #2AFF99;

    color: #2AFF99;

    padding: 12px 18px;

    font-family: inherit;

    font-size: 16px;

    cursor: pointer;

    transition:
        background 0.2s,
        color 0.2s,
        transform 0.2s;
}

.choice-btn:hover {
    background: #2AFF99;

    color: #000;

    transform: translateX(-4px);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    #speaker {
        bottom: 240px;
        left: 5%;
    }

    #message-window {
        width: 94%;
        bottom: 20px;

        min-height: 160px;

        padding: 18px;
    }

    #choices {
        left: 50%;
        right: auto;

        bottom: 210px;

        transform: translateX(-50%);

        width: 90%;
    }

    .choice-btn {
        width: 100%;
    }
}