/* --- Base Styles (前回と同じ) --- */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #fff;
    overflow: hidden;
    font-family: "Courier New", monospace;
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-container {
    position: relative;
    margin-top: 30px; 
    width: 660px;
    min-width: 660px;
    max-width: 660px;
    height: calc(100% - 30px);
}

#game-container.myth-wide {
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
}

@media (max-width: 700px) {
    #game-container {
        width: 100vw;
        min-width: 0;
        max-width: 100vw;
    }
}

/* 共通：非表示クラス */
.hidden {
    display: none !important;
}

/* --- Layer 1: Fake Site --- */
#site-layer {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0; /* 初期のWixっぽい白背景 */
    color: #333;
    padding: 20px;
    box-sizing: border-box;
    font-family: sans-serif; /* サイト部分は普通のフォント */
    overflow-y: auto; /* サイト部分はスクロールできるようにする？ */
}

#site-layer header {
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

#site-layer h1 { margin: 0; font-size: 24px; letter-spacing: 2px; }
#site-layer nav span { margin-right: 15px; font-size: 12px; color: #666; cursor: pointer; }
.broken-text p { font-size: 14px; line-height: 1.6; }

/* --- Layer 2: Boot Screen --- */
#boot-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

/* --- Layer 3: Dialogue & Sprite --- */
#dialogue-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: auto; /* 会話優先：画面全体でクリックを受け付ける */
    z-index: 2100;
    --dialogue-box-fluid-width: 94%;
    --dialogue-box-max-width: 640px;
}

/* ねこ立ち絵（1200x1200） */
#cat-sprite {
    position: absolute;
    bottom: 145px; /* トークボックスに下側が約1割重なる高さ */
    right: calc((100% - min(var(--dialogue-box-fluid-width), var(--dialogue-box-max-width))) / 2);
    width: clamp(120px, 17vw, 190px); /* 旧設定の約1/2 */
    aspect-ratio: 1 / 1;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.52));
    transition: opacity 0.25s ease, transform 0.25s ease;
    animation: neko-float 3.4s ease-in-out infinite;
    z-index: 92;
}

/* 会話ウィンドウ */
/* style.css の #dialogue-box 周りを修正 */

/* 会話ウィンドウ */

#dialogue-box {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%); /* 中央揃え */
    width: min(var(--dialogue-box-fluid-width), var(--dialogue-box-max-width));
    max-width: calc(100% - 28px);
    height: 140px;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #fff;
    border-radius: 4px;
    padding: 15px;
    box-sizing: border-box;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

/* --- ページ幅の統一 --- */
/* 全ページのコンテンツを強制的に同じ幅・余白にする設定 */
#site-content {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
}

#site-content > .page-container {
    width: 100%;
    max-width: 100%;
}

#site-wrapper header,
#site-wrapper footer {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 記事ボックスのスタイル統一 */
.site-box, .profile-box, .diary-entry, .bbs-post, .game-container-embed {
    width: 100%;
    max-width: 100%; /* 親要素に合わせる */
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ccc; /* 枠線を統一 */
    padding: 20px;          /* 内側の余白を統一 */
    margin-bottom: 20px;    /* 下の余白を統一 */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05); /* 影をつける */
}

/* ページごとの微調整 */
.game-container-embed {
    text-align: center;
    background-color: #f9f9f9;
}

/* 選択肢：会話ボックスの左上に配置 */
#choices-container {
    position: absolute;
    bottom: 150px; /* 会話枠のすぐ上 */
    left: 50%;
    transform: translateX(-50%); /* コンテナ自体は中央配置だが... */
    width: min(var(--dialogue-box-fluid-width), var(--dialogue-box-max-width));
    max-width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start; /* ★左寄せに変更 */
    pointer-events: auto;
}

.choice-btn {
    background: #000;
    border: 1px solid #00ffcc;
    color: #fff;
    padding: 8px 16px;
    cursor: pointer;
    text-align: left; /* テキストも左寄せ */
    min-width: 150px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.choice-btn:hover { background: #00ffcc; color: #000; }

#speaker-name {
    font-size: 14px;
    color: #00ffcc;
    margin-bottom: 8px;
    font-weight: bold;
}

#dialogue-text {
    font-size: 16px;
    line-height: 1.4;
    flex-grow: 1;
    white-space: pre-wrap; /* ★これを追加！改行コードを反映させます */
}

#next-indicator {
    text-align: right;
    animation: blink 1s infinite;
    font-size: 12px;
}

/* --- Ending Layer --- */
#ending-layer {
    position: absolute;
    inset: 0;
    z-index: 1800;
    overflow: hidden;
    background: #000;
    pointer-events: none;
    animation: fadeIn 1s ease;
}

#ending-layer .ending-art-layer {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%),
        linear-gradient(180deg, #120000 0%, #000 100%);
    opacity: 0.75;
}

#ending-layer .ending-art-layer.has-art {
    background-image: var(--ending-art-image);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0.42;
}

#ending-layer .ending-vignette-layer {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 35%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.8) 68%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.65));
}

#ending-layer .ending-title-badge {
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    color: #ddd;
    letter-spacing: 0.08em;
    font-size: 15px;
    font-family: serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.32);
    padding: 0 12px 8px;
    text-align: center;
}

#ending-layer.ending-site-mode {
    background: transparent;
}

#ending-layer.ending-site-mode .ending-art-layer,
#ending-layer.ending-site-mode .ending-vignette-layer {
    opacity: 0;
}

#ending-layer.ending-site-mode .ending-title-badge {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 3px;
    padding: 8px 14px;
}

#dialogue-text .ending-break {
    margin: 0;
    text-align: center;
    letter-spacing: 0.3em;
    opacity: 0.75;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }


/* --- UI Layer (Achievement) --- */
#ui-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 999;
}

#achievement-popup {
    position: fixed;
    top: 20px;
    right: -320px;
    background: rgba(0,0,0,0.9);
    border: 1px solid #00ffcc;
    color: #00ffcc;
    padding: 10px 15px;
    display: flex; align-items: center; gap: 10px;
    border-radius: 5px;
    transition: right 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
    z-index: 3000;
}
#achievement-popup.show { right: 20px; }

/* --- Glitch Effect --- */
.glitch-effect #game-container {
    animation: glitch-anim 0.2s infinite;
    filter: hue-rotate(90deg) invert(1); /* 色反転して不気味に */
}

@keyframes glitch-anim {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-5px, 5px); }
    40% { transform: translate(5px, -5px); }
    60% { transform: translate(-5px, 0); }
    80% { transform: translate(5px, 0); }
    100% { transform: translate(0, 0); }
}

/* --- Phase Glitch (4 & 5) --- */
.phase-4-glitch #site-view-area {
    animation: phase4-glitch 8s infinite;
    filter: saturate(0.9) contrast(1.05);
}

@keyframes phase4-glitch {
    0%, 92%, 100% { transform: translate(0, 0); }
    94% { transform: translate(1px, -1px); }
    96% { transform: translate(-1px, 1px); }
}

.phase-5-glitch #site-view-area {
    animation: phase5-glitch 0.18s infinite;
    filter: saturate(1.4) contrast(1.2);
    background-color: #2b0000;
}

.phase-5-glitch #site-layer,
.phase-5-glitch #site-wrapper {
    background-color: #1a0000;
}

.phase-5-glitch .site-box,
.phase-5-glitch .profile-box,
.phase-5-glitch .diary-entry,
.phase-5-glitch .bbs-post,
.phase-5-glitch #bbs-container {
    background-color: #200;
    color: #f8f8f8;
    border-color: #ff2b2b;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.35);
}

.phase-5-glitch #site-wrapper nav span,
.phase-5-glitch #site-title {
    color: #ffb0b0;
}

.phase-5-glitch #site-view-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.06),
            rgba(255,255,255,0.06) 1px,
            rgba(0,0,0,0.06) 2px,
            rgba(0,0,0,0.06) 3px
        ),
        linear-gradient(90deg, rgba(255,0,0,0.04), rgba(0,255,255,0.04));
    opacity: 0.35;
    pointer-events: none;
    mix-blend-mode: screen;
    animation: phase5-scan 1.2s linear infinite;
}

@keyframes phase5-glitch {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(2px, -1px); }
    60% { transform: translate(-1px, -2px); }
    80% { transform: translate(1px, 2px); }
    100% { transform: translate(0, 0); }
}

@keyframes phase5-scan {
    0% { opacity: 0.2; transform: translateY(0); }
    50% { opacity: 0.35; }
    100% { opacity: 0.2; transform: translateY(4px); }
}

/* 探索ポイント（マウスカーソルを変えて「押せる」感を出す） */
.broken-text, .weird-space {
    cursor: pointer;
    border: 1px dashed transparent; /* 普段は見えない枠線 */
    transition: all 0.3s;
}

.broken-text:hover, .weird-space:hover {
    background-color: rgba(255, 0, 0, 0.1); /* ホバーすると薄赤く */
    border-color: rgba(255, 0, 0, 0.3);
}

/* --- Layer 1: Fake Site & Nyax Banner --- */
#site-layer {
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: #333;
    font-family: "Helvetica Neue", Arial, sans-serif;
    display: flex;
    flex-direction: column; /* 縦並びにする */
}

/* nyaxバナーのデザイン */
#nyax-banner {
    background-color: #f0f4f8; /* 薄いグレー */
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    flex-shrink: 0; /* 縮まないように */
    font-size: 12px;
    z-index: 10;
}

.nyax-logo { font-weight: 900; font-size: 16px; letter-spacing: 1px; }
.nyax-text { flex-grow: 1; margin: 0 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nyax-btn {
    background: transparent;
    border: 1px solid #3366ff;
    color: #3366ff;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}
.nyax-btn:hover { background: #3366ff; color: #fff; }

/* サイト本体のスクロールエリア */
#site-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    padding: 20px;
    background-color: #fcfcfc;
    /* 全ページのコンテンツ幅を統一 */
    box-sizing: border-box;
}

#site-wrapper header {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

#site-title {
    font-family: "Georgia", serif; /* ちょっとエモいフォント */
    font-weight: normal;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

#site-wrapper nav span {
    margin: 0 10px;
    font-size: 14px;
    color: #888;
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.3s;
}
#site-wrapper nav span:hover { color: #000; text-decoration: underline; }

/* ページ内コンテンツのスタイル */
.page-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    animation: fadeIn 0.5s ease;
}
.entry-date { color: #999; font-size: 12px; margin-bottom: 5px; }
.entry-body { line-height: 1.8; margin-bottom: 30px; font-size: 14px; }
.locked-msg { color: #cc0000; font-weight: bold; margin-bottom: 10px; }
input.password-input { padding: 5px; border: 1px solid #ccc; margin-right: 5px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* style.css (追加・修正分) */

/* 日記のデザイン */
.diary-entry {
    border: 1px dashed #ccc;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 0px #eee;
}

.diary-entry .date {
    font-size: 0.8em;
    color: #888;
    border-bottom: 1px solid #eee;
    margin-bottom: 5px;
}

.diary-entry .title {
    font-weight: bold;
    font-size: 1.1em;
    color: #444;
    margin-bottom: 10px;
}

.diary-entry .body {
    line-height: 1.6;
    font-size: 0.95em;
}

/* BBSのデザイン */
#bbs-container {
    background-color: #f0f0f0;
    padding: 0;
    border: 1px inset #ccc;
    height: 300px;
    overflow-y: auto;
}

.bbs-post {
    background-color: #fff;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 8px;
    font-size: 0.9em;
}

.bbs-post.admin-self {
    background-color: #e6f7ff; /* 管理人は青っぽい背景 */
    border-color: #91d5ff;
}

.bbs-post.guest-warning {
    background-color: #fff1f0; /* 警告は赤っぽい背景 */
    border-color: #ffa39e;
}

.bbs-post .meta {
    font-size: 0.8em;
    color: #666;
    margin-bottom: 4px;
    border-bottom: 1px dotted #ddd;
}

.bbs-post .user {
    font-weight: bold;
    color: #222;
}

/* リンク演出 */
.link-text {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

/* 赤文字ギミック */
.red-char {
    color: #ff3b3b;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(255, 0, 0, 0.6);
    animation: red-pulse 1.2s infinite;
}
.red-char.collected {
    color: #222;
    text-shadow: none;
    animation: none;
}

@keyframes red-pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 6px rgba(255, 0, 0, 0.6); }
    50% { opacity: 0.6; text-shadow: 0 0 12px rgba(255, 0, 0, 0.9); }
}

.phase-5-glitch .red-char {
    color: #ff5a5a;
    text-shadow: 0 0 12px rgba(255, 0, 0, 0.9), 0 0 2px #fff;
}

/* 点滅演出 */
.blink {
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0; }
}

/* フェーズ変化時のグリッチ演出用クラス（JSで制御） */
.phase-change-glitch {
    animation: glitch-anim 0.2s infinite;
    filter: invert(1);
}

@keyframes glitch-anim {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 2px) }
    40% { transform: translate(-2px, -2px) }
    60% { transform: translate(2px, 2px) }
    80% { transform: translate(2px, -2px) }
    100% { transform: translate(0) }
}

/* --- 以下を style.css の一番下に追記してください --- */

/* ▼ UIボタンの配置修正 */

/* セーブ・ロードボタンを右上に配置 */
#system-menu {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: #222; /* 黒帯 */
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    align-items: center;
    padding-right: 20px;
    z-index: 2000; /* 最前面 */
    box-sizing: border-box;
    border-bottom: 1px solid #444;
    pointer-events: auto;
}

#system-menu button {
    background: #444;
    color: #fff;
    border: 1px solid #666;
    padding: 2px 10px;
    margin-left: 10px;
    cursor: pointer;
    font-family: "Courier New", monospace;
    font-size: 12px;
    pointer-events: auto;
}

#system-menu button:hover {
    background: #666;
    border-color: #fff;
}

#system-menu button.golden-locked-btn {
    background: linear-gradient(180deg, #3a0505, #1f0202);
    color: #ffb7b7;
    border-color: #9d2b2b;
    text-shadow: 0 0 8px rgba(255, 76, 76, 0.38);
}

#system-menu button.golden-locked-btn:hover {
    background: linear-gradient(180deg, #541010, #2a0505);
    border-color: #e06d6d;
}

/* Talkボタンを右下に配置 */
#talk-btn {
    position: absolute;
    bottom: 12px;
    right: 20px;
    background: rgba(0, 0, 0, 0.9);
    color: #00ffcc;
    border: 2px solid #00ffcc;
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: bold;
    font-family: sans-serif;
    cursor: pointer;
    pointer-events: auto;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
    transition: all 0.2s ease;
}

#talk-btn:hover {
    background: #00ffcc;
    color: #000;
    transform: scale(1.05);
}

#source-code-modal {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; height: 80%;
    background: #fff;
    color: #000;
    border: 2px solid #3366ff;
    font-family: monospace;
    padding: 10px;
    overflow: auto;
    z-index: 1500;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
    white-space: pre;
}
.hidden { display: none !important; }

.diary-entry, .bbs-post, .profile-box, .site-box, #bbs-container {
    width: 100%;
    max-width: 100%; /* 親要素に合わせる */
    box-sizing: border-box; /* パディングを含める */
}

/* --- UI Buttons --- */
#mail-btn {
    position: absolute;
    bottom: 20px;
    left: 20px; /* 左下に配置 */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border: 1px solid #aaa;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000;
    font-family: sans-serif;
    pointer-events: auto;
}
#mail-btn:hover { background: #333; }
#mail-btn.has-new { border-color: red; color: red; animation: blink 1s infinite; } /* 新着あり演出 */

/* --- Generic Popup Window (Mailer & Othello) --- */
.popup-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1500;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-window {
    width: 80%;
    max-width: 500px;
    height: 70%;
    background: #fff;
    border: 2px solid #000;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    color: #333;
}

.popup-header {
    background: #000080; /* Windows 95風の青 */
    color: #fff;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.close-btn {
    cursor: pointer;
    background: #ccc;
    color: #000;
    border: 1px outset #fff;
    padding: 0 5px;
    font-size: 12px;
}

.popup-content {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
    background: #f0f0f0;
}

.fake-save-corruption-overlay {
    position: fixed;
    inset: 0;
    z-index: 3200;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.fake-save-corruption-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.24s ease;
}

.fake-save-corruption-window {
    width: min(640px, calc(100% - 16px));
    border: 1px solid #874444;
    background: linear-gradient(180deg, #180606, #080202);
    color: #ffe3e3;
    box-shadow:
        0 28px 54px rgba(0, 0, 0, 0.75),
        0 0 22px rgba(180, 35, 35, 0.28);
    padding: 14px;
    font-family: "Courier New", monospace;
}

.fake-save-corruption-window h3 {
    margin: 0 0 4px;
    font-size: 15px;
    color: #ff8f8f;
    letter-spacing: 0.08em;
}

.fake-save-corruption-sub {
    margin: 0 0 10px;
    font-size: 12px;
    color: #caa8a8;
}

#fake-save-corruption-log {
    margin: 0;
    min-height: 160px;
    max-height: 42vh;
    overflow: auto;
    padding: 10px;
    background: rgba(0, 0, 0, 0.56);
    border: 1px solid rgba(170, 72, 72, 0.52);
    color: #ffd9d9;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.fake-save-corruption-close {
    margin-top: 10px;
    min-width: 138px;
    border: 1px solid #a85b5b;
    background: #240a0a;
    color: #ffd7d7;
    padding: 7px 12px;
    font-family: "Courier New", monospace;
    cursor: pointer;
}

.fake-save-corruption-close:hover {
    background: #411515;
}

.fake-save-corruption-overlay.golden .fake-save-corruption-window {
    border-color: #af6c24;
    box-shadow:
        0 28px 54px rgba(0, 0, 0, 0.78),
        0 0 24px rgba(214, 168, 66, 0.36);
}

.fake-save-corruption-overlay.golden #fake-save-corruption-log {
    border-color: rgba(192, 138, 55, 0.66);
    color: #ffe8c4;
}

#lock-dial-overlay {
    background: rgba(8, 0, 0, 0.74);
}

#lock-dial-overlay .lock-dial-window {
    width: min(520px, calc(100% - 28px));
    max-width: 520px;
    background: linear-gradient(170deg, #171111, #0d0909 55%, #1c0f0f);
    border: 1px solid #6e4343;
    color: #f7eaea;
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.62), 0 0 24px rgba(150, 24, 24, 0.25);
}

#lock-dial-overlay .popup-header {
    background: linear-gradient(180deg, #412222, #2a1414);
    border-bottom: 1px solid #765050;
    color: #ffe5e5;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

#lock-dial-overlay .close-btn {
    border: 1px solid #8b6464;
    background: #231515;
    color: #ffeaea;
}

#lock-dial-overlay .close-btn:hover {
    background: #3a1f1f;
    border-color: #c18888;
}

#lock-dial-overlay .lock-dial-content {
    background:
        radial-gradient(circle at 50% 0%, rgba(188, 35, 35, 0.14), transparent 56%),
        linear-gradient(180deg, #120d0d 0%, #1a1212 100%);
    padding: 14px;
}

#lock-dial-overlay .lock-dial-content p {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #e8d0d0;
    letter-spacing: 0.04em;
}

#lock-dial-overlay .lock-dial-grid {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

#lock-dial-overlay .dial-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #5a3a3a;
    background: linear-gradient(180deg, rgba(49, 28, 28, 0.9), rgba(24, 16, 16, 0.95));
}

#lock-dial-overlay .dial-btn {
    width: 100%;
    padding: 7px 0;
    border: 1px solid #8e6262;
    background: linear-gradient(180deg, #3f2929, #291a1a);
    color: #ffdddd;
    cursor: pointer;
    font-weight: bold;
}

#lock-dial-overlay .dial-btn:hover {
    background: linear-gradient(180deg, #583434, #341f1f);
    border-color: #bf8686;
}

#lock-dial-overlay .dial-btn:active {
    transform: translateY(1px);
}

#lock-dial-overlay .dial-val {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    border: 1px solid #916868;
    background: #0f0a0a;
    color: #ffd3d3;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(255, 64, 64, 0.55);
}

#lock-dial-overlay .lock-dial-actions {
    display: flex;
    justify-content: center;
}

#lock-dial-overlay .lock-dial-actions button {
    padding: 9px 22px;
    border: 1px solid #bf8787;
    background: linear-gradient(180deg, #4a2b2b, #2a1a1a);
    color: #ffeded;
    letter-spacing: 0.1em;
    cursor: pointer;
}

#lock-dial-overlay .lock-dial-actions button:hover {
    background: linear-gradient(180deg, #6f3a3a, #3e2424);
    border-color: #e3aaaa;
}

/* --- Othello --- */
.othello-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #073b1a;
    color: #e8ffe8;
}

.othello-status {
    font-size: 12px;
    letter-spacing: 0.5px;
}

.othello-board {
    display: grid;
    grid-template-columns: repeat(8, 32px);
    grid-template-rows: repeat(8, 32px);
    gap: 2px;
    padding: 8px;
    background: #0b5a28;
    border: 2px solid #073b1a;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
}

.othello-cell {
    width: 32px;
    height: 32px;
    background: #0a4a21;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.othello-cell.valid::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
}

.othello-disc {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2);
}

.othello-disc.black { background: #111; }
.othello-disc.white { background: #f2f2f2; }

.othello-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.othello-controls button {
    background: #0f6a31;
    color: #fff;
    border: 1px solid #0b4a24;
    padding: 4px 10px;
    cursor: pointer;
    font-family: "Courier New", monospace;
    font-size: 11px;
}

.othello-controls button:hover {
    background: #12903f;
}

.othello-debug {
    color: #b5ffb5;
    font-size: 10px;
    opacity: 0.8;
}

.golden-othello-overlay .popup-window {
    border-color: #8c1a1a;
    box-shadow:
        0 0 0 1px rgba(255, 70, 70, 0.3),
        0 0 24px rgba(255, 45, 45, 0.45);
}

.golden-othello-overlay .othello-content {
    background:
        radial-gradient(circle at 20% 0%, rgba(130, 0, 0, 0.45), rgba(30, 0, 0, 0.95) 55%, rgba(0, 0, 0, 1));
    color: #ffe2e2;
    position: relative;
    overflow: hidden;
}

.golden-othello-overlay .othello-content::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.09) 1px,
            rgba(0, 0, 0, 0.08) 2px,
            rgba(0, 0, 0, 0.08) 3px
        );
    mix-blend-mode: screen;
    opacity: 0.34;
    animation: golden-othello-scan 0.22s steps(2, end) infinite;
}

.golden-othello-overlay .othello-board {
    background: #2b0000;
    border-color: #5f0f0f;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.75),
        0 0 15px rgba(255, 54, 54, 0.25);
}

.golden-othello-overlay .othello-cell {
    background: #1f0000;
    border: 1px solid rgba(255, 90, 90, 0.16);
    animation: golden-othello-cell-jitter 0.3s steps(2, end) infinite;
}

.golden-othello-overlay .othello-disc.black {
    background: radial-gradient(circle at 30% 30%, #ff8a8a 0%, #250000 62%, #000 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 130, 130, 0.35),
        0 0 8px rgba(255, 62, 62, 0.25);
}

.golden-othello-overlay .othello-disc.white {
    background: radial-gradient(circle at 30% 30%, #fff 0%, #ffc3c3 46%, #6c1010 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 70, 70, 0.45),
        0 0 10px rgba(255, 62, 62, 0.22);
}

.golden-othello-overlay .othello-disc.chaos {
    filter: invert(1) hue-rotate(120deg);
}

.golden-othello-overlay .othello-board.chaos-flash {
    filter: invert(0.25) saturate(1.7) contrast(1.35);
}

@keyframes golden-othello-scan {
    0% { transform: translateY(0); opacity: 0.22; }
    50% { transform: translateY(1px); opacity: 0.37; }
    100% { transform: translateY(0); opacity: 0.22; }
}

@keyframes golden-othello-cell-jitter {
    0% { transform: translate(0, 0); }
    25% { transform: translate(1px, 0); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(0, -1px); }
    100% { transform: translate(0, 0); }
}

/* --- Virus Ad Popups (Phase 5) --- */
.virus-ad {
    position: absolute;
    background: #fff;
    border: 2px solid #ff2b2b;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.3);
    font-family: sans-serif;
    color: #111;
    z-index: 1700;
    animation: virus-jitter 0.25s infinite;
}

.virus-ad-header {
    background: #b80000;
    color: #fff;
    font-weight: bold;
    padding: 4px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.virus-ad-close {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
}

.virus-ad-body {
    padding: 8px;
    font-size: 12px;
    line-height: 1.3;
}

.virus-ad-body .cta {
    margin-top: 6px;
    display: inline-block;
    padding: 2px 6px;
    background: #111;
    color: #fff;
    font-size: 11px;
}

@keyframes virus-jitter {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 1px); }
    50% { transform: translate(1px, -1px); }
    75% { transform: translate(1px, 1px); }
    100% { transform: translate(0, 0); }
}

/* --- Download Screen (Phase 6) --- */
.download-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    color: #f00;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2200;
    font-family: "Courier New", monospace;
}

.download-window {
    text-align: center;
}

.download-window h1 {
    margin-bottom: 20px;
}

.download-window #download-btn {
    padding: 15px 40px;
    font-size: 1.2em;
    border: 2px solid #f00;
    background: transparent;
    color: #f00;
    cursor: pointer;
}

.download-window #download-btn:hover {
    background: #f00;
    color: #000;
}

.download-window p {
    margin-top: 10px;
    font-size: 0.8em;
    color: #ff6666;
}

.download-trigger {
    margin-top: 10px;
    padding: 10px 24px;
    border: 2px solid #f00;
    background: transparent;
    color: #f00;
    cursor: pointer;
}

.download-trigger:hover {
    background: #f00;
    color: #000;
}

/* --- Top Menu Overlay --- */
.top-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 2600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Courier New", monospace;
}

.top-menu-window {
    width: 90%;
    max-width: 520px;
    background: #111;
    color: #fff;
    border: 2px solid #555;
    padding: 16px;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
}

.top-menu-window h2 {
    margin: 0 0 8px 0;
    font-size: 16px;
    letter-spacing: 1px;
}

.top-menu-window .hint {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 12px;
}

.top-menu-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
}

.top-menu-actions button {
    background: #222;
    color: #fff;
    border: 1px solid #666;
    padding: 6px 12px;
    cursor: pointer;
    font-family: "Courier New", monospace;
    font-size: 12px;
}

.top-menu-actions button:hover {
    background: #444;
}

.debug-panel {
    margin-top: 10px;
    border-top: 1px solid #333;
    padding-top: 10px;
}

.debug-panel h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #ffcc66;
}

.debug-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
}

.debug-row label {
    width: 48px;
    color: #aaa;
}

.debug-row input,
.debug-row select {
    flex: 1;
    background: #000;
    color: #fff;
    border: 1px solid #555;
    padding: 4px 6px;
    font-family: "Courier New", monospace;
    font-size: 12px;
}

.debug-jump-btn {
    background: #330;
    color: #ffcc66;
    border: 1px solid #aa7;
    padding: 6px 12px;
    cursor: pointer;
    font-family: "Courier New", monospace;
    font-size: 12px;
}

.debug-jump-btn:hover {
    background: #553;
}

.debug-tracker {
    margin-top: 10px;
    border: 1px solid #413017;
    background: rgba(10, 8, 4, 0.72);
    border-radius: 6px;
    padding: 8px;
}

.debug-tracker h4 {
    margin: 0 0 6px;
    font-size: 12px;
    color: #ffd27a;
    letter-spacing: 0.08em;
}

#debug-tracker-text {
    margin: 0;
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    font-size: 11px;
    line-height: 1.45;
    color: #ffe8b7;
    font-family: "Courier New", monospace;
}

.progress-panel {
    margin-top: 10px;
    border-top: 1px solid #333;
    padding-top: 10px;
    max-height: 260px;
    overflow-y: auto;
}

.progress-panel h3 {
    margin: 6px 0;
    font-size: 13px;
    color: #00ffcc;
}

.progress-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px 0;
    font-size: 12px;
}

.progress-item {
    padding: 4px 0;
    border-bottom: 1px dotted #333;
}

.progress-item.locked {
    color: #666;
}

.progress-item.observer-log-item {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-size: 11px;
    line-height: 1.45;
    color: #c5d8d2;
}

.observer-log-time {
    color: #86a59a;
    font-family: "Courier New", monospace;
    flex: 0 0 auto;
}

.observer-log-text {
    color: inherit;
    word-break: break-word;
}

/* Mail List Styles */
.mail-item {
    background: #fff;
    border: 1px solid #999;
    margin-bottom: 5px;
    padding: 5px;
    cursor: pointer;
}
.mail-item:hover { background: #e0e0ff; }
.mail-item.unread { font-weight: bold; border-left: 5px solid red; }

.mail-body-view {
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border: 1px inset #ccc;
    height: 200px;
    overflow-y: auto;
}

/* --- 以下、新しいブラウザ風UIのデザイン --- */
/* 擬似ブラウザの外枠 */
#browser-frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #ddd;
    font-family: sans-serif;
}

/* ブラウザのツールバー（上部） */
#browser-toolbar {
    height: 40px;
    background: #e0e0e0;
    border-bottom: 1px solid #999;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 10px;
    flex-shrink: 0;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

/* 戻る・進むボタン風 */
.browser-nav-btn {
    width: 24px; height: 24px;
    border: 1px solid #999;
    background: #fff;
    border-radius: 4px;
    text-align: center;
    line-height: 22px;
    color: #555;
    font-weight: bold;
    cursor: default; /* ダミーなので押せない */
}

/* URLバー */
#url-bar {
    flex-grow: 1;
    height: 24px;
    background: #fff;
    border: 1px solid #999;
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 12px;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
}

/* ブラウザ内蔵メールボタン */
#browser-mail-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #999;
    border-radius: 4px;
    padding: 2px 8px;
    height: 24px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
    transition: background 0.2s;
}
#browser-mail-btn:hover { background: #f0f0ff; }
#browser-mail-btn.has-new { color: red; border-color: red; }

/* サイト表示エリア */
#site-view-area {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    overflow: hidden; /* 内部でスクロールさせる */
    background: #fff;
}

/* ▼▼▼ 幅の統一設定 ▼▼▼ */
/* どのページでもこのクラスで囲めば同じ幅・同じ見た目になる */
.common-content-box {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

/* 既存のクラスにも同じスタイルを適用 */
.site-box, .profile-box, .diary-entry, .bbs-post, .game-container-embed {
    /* common-content-box と同じ設定を継承 */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

/* ゲーム画面用の微調整（中央寄せなど） */
.game-container-embed {
    text-align: center;
    background-color: #f9f9f9;
}

/* ねこ立ち絵（6表情） */
#cat-sprite {
    bottom: 145px;
    right: calc((100% - min(var(--dialogue-box-fluid-width), var(--dialogue-box-max-width))) / 2);
    width: clamp(120px, 17vw, 190px);
    aspect-ratio: 1 / 1;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.52));
    transition: opacity 0.25s ease, transform 0.25s ease;
    animation: neko-float 3.4s ease-in-out infinite;
    z-index: 92;
}

@keyframes neko-float {
    0%,
    100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -8px;
    }
}

#cat-sprite.neko-normal {
    background-image: url("assets/myth/characters/neko/neko_normal.webp");
}

#cat-sprite.neko-playful {
    background-image: url("assets/myth/characters/neko/neko_playful.webp");
    transform: translateY(-2px);
}

#cat-sprite.neko-smile-eerie {
    background-image: url("assets/myth/characters/neko/neko_smile_eerie.webp");
}

#cat-sprite.neko-annoyed {
    background-image: url("assets/myth/characters/neko/neko_annoyed.webp");
}

#cat-sprite.neko-stare {
    background-image: url("assets/myth/characters/neko/neko_stare.webp");
}

#cat-sprite.neko-stare-deep {
    background-image: url("assets/myth/characters/neko/neko_stare_deep.webp");
}

/* ミク立ち絵（4表情） */
#miku-sprite {
    position: absolute;
    bottom: 20px; /* トーク枠の一番下に合わせる */
    right: calc((100% - min(var(--dialogue-box-fluid-width), var(--dialogue-box-max-width))) / 2 + 4px);
    width: clamp(220px, 36vw, 390px);
    aspect-ratio: 1200 / 1406;
    max-height: min(62vh, 460px);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.52));
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 91;
}

#miku-sprite.miku-neutral {
    background-image: url("assets/myth/characters/miku/miku_neutral.webp");
}

#miku-sprite.miku-soft {
    background-image: url("assets/myth/characters/miku/miku_soft.webp");
}

#miku-sprite.miku-smile {
    background-image: url("assets/myth/characters/miku/miku_smile.webp");
    transform: translateY(-2px);
}

#miku-sprite.miku-neutral-closed {
    background-image: url("assets/myth/characters/miku/miku_neutral_closed.webp");
}

#miku-sprite.miku-smile-closed {
    background-image: url("assets/myth/characters/miku/miku_smile_closed.webp");
    transform: translateY(-2px);
}

/* --- Phase 7: Red Desktop --- */
#glitch-layer {
    position: absolute;
    inset: 0;
    z-index: 500;
}

#red-desktop {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #500; /* 暗い赤 */
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #000 3px); /* 走査線 */
    overflow: hidden;
    font-family: sans-serif;
}

.desktop-icon {
    position: absolute;
    width: 60px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    text-shadow: 2px 2px 0 #000;
}
#icon-myth { color: #ff6666; }
#icon-terminal { color: #0f0; border: 1px dashed #0f0; padding: 5px; background: #000; }

.terminal-flicker {
    animation: terminal-flicker 0.5s steps(2, end) infinite;
}

@keyframes terminal-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* 狂気のウィンドウ */
.glitch-window {
    position: absolute;
    width: 250px;
    background: #ccc;
    border: 2px solid #fff;
    box-shadow: 5px 5px 0 #000;
    font-size: 12px;
    color: #000;
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }

.glitch-window.enemy {
    border-color: red;
    background: #ffcccc;
}
.glitch-window.friendly {
    border-color: blue;
    background: #ccffff;
    z-index: 2000; /* ねこは常に手前に */
}

.win-header {
    background: #000080;
    color: #fff;
    padding: 3px;
    display: flex;
    justify-content: space-between;
}
.enemy .win-header { background: #b00; }

.win-body { padding: 10px; }
.win-close { cursor: pointer; }

/* --- Phase 8: CLI Screen --- */
#cli-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000;
    color: #00ff00; /* 伝統的なグリーンモニター */
    font-family: "Courier New", monospace;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    text-shadow: 0 0 5px #00ff00; /* グロー効果 */
}

#cli-output {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 10px;
}

.cli-line { margin: 5px 0; line-height: 1.4; }
.cli-line.system { color: #88ff88; }
.cli-line.neko { color: #00ffff; }
.cli-line.warning { color: #ff00ff; font-weight: bold; }
.cli-line.error { color: red; }
.cli-line.user { color: #fff; opacity: 0.8; }
.cli-line.locked { color: #555; text-decoration: line-through; }

#cli-input-line {
    display: flex;
    align-items: center;
    border-top: 1px solid #005500;
    padding-top: 5px;
}

.prompt { margin-right: 10px; color: #00ff00; }

#cli-input {
    background: transparent;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    flex-grow: 1;
    outline: none;
}

/* --- Phase 9: Myth World (Wide Layout) --- */
#myth-layer {
    position: absolute;
    inset: 0;
    z-index: 800;
}

#myth-layout {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

#myth-screen {
    position: absolute;
    width: 1344px;
    height: 1008px;
    left: 50%;
    top: 4px;
    transform: translateX(-50%) scale(1);
    transform-origin: top center;
    background: transparent;
    color: #fff;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; /* 雰囲気重視のフォント */
    overflow: visible;
}

#myth-screen.interaction-locked {
    cursor: none;
}

#myth-screen.interaction-locked #click-layer,
#myth-screen.interaction-locked #inventory-area,
#myth-screen.interaction-locked #item-action-panel,
#myth-screen.interaction-locked #message-area {
    pointer-events: none !important;
}

#myth-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 1344px;
    height: 896px;
    overflow: hidden;
    background: #000;
}

#myth-lock-cursor {
    position: absolute;
    left: 672px;
    top: 448px;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    margin-top: -23px;
    pointer-events: none;
    opacity: 0;
    z-index: 32;
    transform: scale(0.8);
    transition: opacity 0.1s linear, transform 0.12s ease;
}

#myth-lock-cursor::before,
#myth-lock-cursor::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

#myth-lock-cursor::before {
    border: 1px solid rgba(228, 64, 64, 0.92);
    box-shadow:
        0 0 8px rgba(220, 42, 42, 0.65),
        0 0 18px rgba(120, 10, 10, 0.52) inset;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 88, 88, 0.05), rgba(0, 0, 0, 0.1) 62%, rgba(0, 0, 0, 0.25));
    animation: horror-lock-cursor-spin 0.9s linear infinite;
}

#myth-lock-cursor::after {
    inset: 10px;
    border: 1px dashed rgba(255, 140, 140, 0.66);
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08) 1px,
            rgba(0, 0, 0, 0.14) 2px,
            rgba(0, 0, 0, 0.14) 3px
        );
    animation:
        horror-lock-cursor-jitter 0.22s steps(2, end) infinite,
        horror-lock-cursor-spin-rev 0.7s linear infinite;
}

#myth-lock-cursor.active {
    opacity: 0.96;
    transform: scale(1);
}

@keyframes horror-lock-cursor-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes horror-lock-cursor-spin-rev {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

@keyframes horror-lock-cursor-jitter {
    0% { translate: 0 0; opacity: 0.42; }
    25% { translate: -1px 1px; opacity: 0.64; }
    50% { translate: 1px -1px; opacity: 0.5; }
    75% { translate: -1px -1px; opacity: 0.68; }
    100% { translate: 0 0; opacity: 0.42; }
}

#myth-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    transition: filter 0.5s ease;
}

#myth-ui {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

#item-action-panel {
    position: absolute;
    top: 88px;
    left: 30px;
    width: min(480px, calc(100% - 60px));
    background: linear-gradient(165deg, rgba(20, 20, 20, 0.96), rgba(34, 16, 16, 0.93));
    border: 1px solid #664242;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    padding: 10px;
    pointer-events: auto;
    z-index: 30;
}

#item-action-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

#item-action-title {
    font-size: 18px;
    color: #ffd0d0;
    letter-spacing: 0.04em;
}

#item-action-close {
    border: 1px solid #855;
    background: #2a1a1a;
    color: #fff;
    width: 26px;
    height: 22px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

#item-action-description {
    color: #f3f3f3;
    font-size: 18px;
    line-height: 1.45;
    margin-bottom: 10px;
    min-height: 36px;
}

#item-action-buttons,
#item-action-choices {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

#item-action-buttons button,
#item-action-choices button {
    border: 1px solid #746262;
    background: #261f1f;
    color: #fff;
    padding: 5px 10px;
    font-size: 18px;
    cursor: pointer;
}

#item-action-buttons button:hover,
#item-action-choices button:hover,
#item-action-close:hover {
    background: #3a2a2a;
    border-color: #a77;
}

#location-name {
    position: absolute;
    top: 26px;
    left: 30px;
    max-width: calc(100% - 60px);
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px #000, -1px -1px 0 #800;
    border-left: 6px solid #c00;
    padding-left: 15px;
    letter-spacing: 0.1em;
}

/* メッセージエリア：ワイド画面用に中央下部へ広く配置 */
#message-area {
    position: absolute;
    left: 0;
    top: 896px;
    width: 1344px;
    height: 112px;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.9) 90%, rgba(0,0,0,0));
    border-top: 1px solid #555;
    border-bottom: 1px solid #555;
    padding: 12px 32px;
    box-sizing: border-box;
    font-size: 26px;
    line-height: 1.5;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 2px #000;
    z-index: 20;
}

#message-area.has-next-page {
    cursor: pointer;
}

#message-area .message-next-indicator {
    position: absolute;
    right: 16px;
    bottom: 8px;
    color: #ffaaaa;
    font-size: 18px;
    line-height: 1;
    text-shadow: 0 0 8px rgba(255, 80, 80, 0.55);
    animation: blink 1.1s infinite;
}

/* クリック領域レイヤー */
#click-layer {
    position: absolute;
    width: 100%; height: 100%;
    pointer-events: auto;
    z-index: 5;
}

.hotspot {
    position: absolute;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    /* デバッグ用に見えるようにしていますが、本番では枠線を消してもOK */
    border: 1px dashed rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.1);
}

.hotspot:hover {
    background: rgba(255, 50, 50, 0.2);
    border-color: rgba(255, 50, 50, 0.6);
    color: #fff;
    transform: scale(1.02);
}

.item-hotspot {
    border-color: rgba(255, 210, 120, 0.75);
    background: rgba(120, 80, 0, 0.25);
    color: #ffe8b4;
}

.event-hotspot {
    border-color: rgba(120, 255, 230, 0.85);
    background: rgba(18, 80, 74, 0.32);
    color: #d7fff8;
}

.event-hotspot span {
    letter-spacing: 0.04em;
    animation: event-glow 1.2s ease-in-out infinite;
}

@keyframes event-glow {
    0%, 100% {
        opacity: 0.72;
        text-shadow: 0 0 0 rgba(160, 255, 232, 0);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 10px rgba(160, 255, 232, 0.85);
    }
}

.key-hotspot span {
    letter-spacing: 0.06em;
    animation: key-glint 1.1s ease-in-out infinite;
}

@keyframes key-glint {
    0%, 100% { opacity: 0.55; text-shadow: 0 0 0 rgba(255,255,180,0); }
    50% { opacity: 1; text-shadow: 0 0 10px rgba(255,255,180,0.9); }
}

/* 矢印タイプのホットスポット */
.hotspot[data-type="move"] {
    border: none;
    background: transparent;
    font-size: 20px;
}
.hotspot[data-type="move"]:hover {
    color: #f55;
    transform: translateX(5px);
}

.hotspot.edge-move-hotspot {
    align-items: center;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
    border: none;
    font-size: 28px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.68);
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease;
}

.hotspot.edge-move-hotspot.edge-left {
    justify-content: flex-start;
    padding-left: 12px;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.02) 72%, rgba(0, 0, 0, 0));
}

.hotspot.edge-move-hotspot.edge-right {
    justify-content: flex-end;
    padding-right: 12px;
    box-sizing: border-box;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.02) 72%, rgba(0, 0, 0, 0));
}

.hotspot.edge-move-hotspot.edge-bottom {
    justify-content: center;
    padding-left: 0;
    text-align: center;
    box-sizing: border-box;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.02) 72%, rgba(0, 0, 0, 0));
}

.hotspot.edge-move-hotspot:hover {
    color: rgba(255, 255, 255, 0.95);
    transform: none;
}

.hotspot.edge-move-hotspot.edge-left:hover {
    background: linear-gradient(90deg, rgba(96, 18, 18, 0.32), rgba(0, 0, 0, 0.02) 72%, rgba(0, 0, 0, 0));
}

.hotspot.edge-move-hotspot.edge-right:hover {
    background: linear-gradient(270deg, rgba(96, 18, 18, 0.32), rgba(0, 0, 0, 0.02) 72%, rgba(0, 0, 0, 0));
}

.hotspot.edge-move-hotspot.edge-bottom:hover {
    background: linear-gradient(0deg, rgba(96, 18, 18, 0.32), rgba(0, 0, 0, 0.02) 72%, rgba(0, 0, 0, 0));
}

/* インベントリ：右下に固定 */
#inventory-area {
    position: absolute;
    width: 188px;
    min-width: 188px;
    height: 896px;
    left: -200px;
    top: 0;
    transform: none;
    max-height: 896px;
    box-sizing: border-box;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    pointer-events: auto;
    background: linear-gradient(160deg, rgba(14, 14, 14, 0.95), rgba(28, 28, 28, 0.92));
    border: 1px solid #555;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(2px);
    z-index: 25;
    overflow: hidden;
}

#inventory-head {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
}

.inventory-title {
    color: #d2d2d2;
    font-size: 18px;
    letter-spacing: 0.12em;
}

#inventory-selected {
    color: #ffb4b4;
    font-size: 18px;
    max-width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#inventory-box {
    display: flex;
    width: 100%;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
}

#inventory-box::-webkit-scrollbar {
    width: 6px;
}

#inventory-box::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 99px;
}

.inv-empty {
    color: #888;
    font-size: 18px;
    align-self: center;
    margin: auto 0;
}

.inv-item {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border: 1px solid #4d4d4d;
    background: linear-gradient(180deg, #303030, #202020);
    color: #fff;
    font-size: 18px;
    display: flex;
    gap: 6px;
    justify-content: flex-start;
    align-items: center;
    padding: 0 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.inv-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    border: 1px solid #777;
    border-radius: 4px;
    background: #171717;
    color: #d6d6d6;
    font-size: 16px;
    letter-spacing: 0.03em;
}

.inv-name {
    color: #f2f2f2;
    font-size: 18px;
    white-space: nowrap;
}

.inv-item:hover {
    background: linear-gradient(180deg, #3a3a3a, #262626);
    border-color: #808080;
    transform: translateY(-1px);
}

.inv-item.selected {
    border-color: #ff6464;
    box-shadow: 0 0 10px rgba(255, 80, 80, 0.55);
    background: linear-gradient(180deg, #572323, #341414);
}

/* ===== Dialogue / Ending Tone Override ===== */

#dialogue-box {
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 84, 84, 0.18), transparent 45%),
        linear-gradient(180deg, rgba(22, 8, 8, 0.97) 0%, rgba(8, 3, 3, 0.95) 100%);
    border: 1px solid #8f3f3f;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.52),
        inset 0 0 0 1px rgba(255, 179, 179, 0.08);
}

#dialogue-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 150, 150, 0.65), transparent);
}

#speaker-name {
    color: #ffb6b6;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(255, 88, 88, 0.24);
}

#speaker-name:empty {
    display: none;
    margin: 0;
}

#dialogue-box[data-speaker="system"] #speaker-name {
    color: #ff8080;
    text-shadow: 0 0 12px rgba(255, 42, 42, 0.45);
}

#dialogue-box[data-speaker="k"] #speaker-name {
    color: #ffd4d4;
    text-shadow: 0 0 10px rgba(255, 164, 164, 0.28);
}

#dialogue-box[data-speaker="miku"] #speaker-name {
    color: #a7f4ff;
    text-shadow: 0 0 10px rgba(95, 227, 255, 0.4);
}

#dialogue-text {
    color: #f8ecec;
}

#next-indicator {
    color: #ff9b9b;
}

.choice-btn {
    background: linear-gradient(180deg, rgba(56, 20, 20, 0.95), rgba(29, 10, 10, 0.95));
    border: 1px solid #9a5050;
    color: #ffeaea;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.45);
}

.choice-btn:hover {
    background: linear-gradient(180deg, #8e3131, #662020);
    border-color: #d07f7f;
    color: #fff;
}

#talk-btn {
    background: linear-gradient(180deg, rgba(50, 16, 16, 0.95), rgba(28, 8, 8, 0.95));
    color: #ffd6d6;
    border: 2px solid #b05858;
    box-shadow: 0 0 12px rgba(176, 51, 51, 0.4);
}

#talk-btn:hover {
    background: linear-gradient(180deg, #aa3d3d, #7a2525);
    color: #fff;
    border-color: #d28484;
}

#talk-btn.myth-temp-locked {
    pointer-events: none !important;
    opacity: 0.55;
    filter: saturate(0.55);
}

#ending-layer .ending-title-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: min(86vw, 560px);
    max-width: 90%;
    padding: 18px 24px;
    border: 1px solid rgba(230, 145, 145, 0.56);
    border-radius: 8px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 110, 110, 0.24), transparent 55%),
        linear-gradient(165deg, rgba(22, 8, 8, 0.86), rgba(8, 3, 3, 0.9));
    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.56),
        0 0 28px rgba(150, 30, 30, 0.32);
    pointer-events: none;
    animation: ending-title-card-in 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#ending-layer .ending-title-code {
    font-size: 12px;
    letter-spacing: 0.28em;
    color: rgba(255, 186, 186, 0.82);
    margin-bottom: 8px;
    text-transform: uppercase;
}

#ending-layer .ending-title-main {
    font-size: clamp(20px, 3vw, 34px);
    letter-spacing: 0.04em;
    color: #fff4f4;
    text-shadow: 0 0 18px rgba(255, 116, 116, 0.38);
    margin-bottom: 6px;
}

#ending-layer .ending-title-sub {
    font-size: clamp(14px, 2vw, 20px);
    color: #ffcece;
    letter-spacing: 0.12em;
}

#ending-layer .ending-title-branch {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(255, 188, 188, 0.24);
    font-size: 12px;
    line-height: 1.55;
    letter-spacing: 0.08em;
    color: rgba(255, 216, 216, 0.85);
}

#ending-layer .ending-title-actions {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

#ending-layer .ending-title-action-btn {
    appearance: none;
    border: 1px solid rgba(255, 176, 176, 0.52);
    border-radius: 6px;
    padding: 8px 14px;
    background: linear-gradient(180deg, rgba(64, 20, 20, 0.96), rgba(32, 10, 10, 0.96));
    color: #ffe3e3;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(150, 40, 40, 0.26);
    transition: background 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

#ending-layer .ending-title-action-btn:hover {
    background: linear-gradient(180deg, rgba(128, 38, 38, 0.98), rgba(74, 20, 20, 0.98));
    border-color: rgba(255, 212, 212, 0.74);
    transform: translateY(-1px);
}

#ending-layer .ending-title-share-btn::before {
    content: "↗ ";
}

#ending-layer .ending-title-download-btn::before {
    content: "↓ ";
}

#ending-layer .ending-title-card.fade-out {
    animation: ending-title-card-out 0.5s ease forwards;
}

@keyframes ending-title-card-in {
    0% {
        opacity: 0;
        transform: translate(-50%, -44%) scale(0.92);
        filter: blur(7px);
    }
    28% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.01);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
    }
}

@keyframes ending-title-card-out {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -54%) scale(1.06);
    }
}

.ending-credits-overlay {
    position: fixed;
    inset: 0;
    z-index: 3920;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 15%, rgba(136, 26, 26, 0.28), rgba(0, 0, 0, 0) 44%),
        linear-gradient(180deg, rgba(8, 3, 3, 0.96), rgba(0, 0, 0, 0.98));
    color: #ffe9e9;
    animation: ending-credits-fade-in 0.45s ease forwards;
}

.ending-credits-overlay.fade-out {
    animation: ending-credits-fade-out 0.4s ease forwards;
}

.ending-credits-mask {
    position: relative;
    width: min(780px, 92vw);
    height: min(78vh, 740px);
    overflow: hidden;
    border: 1px solid rgba(255, 178, 178, 0.34);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(20, 7, 7, 0.82), rgba(8, 2, 2, 0.92));
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.65),
        inset 0 0 30px rgba(156, 38, 38, 0.22);
}

.ending-credits-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 0 46px;
    box-sizing: border-box;
    text-align: center;
    font-family: "Courier New", "Noto Serif JP", serif;
    letter-spacing: 0.04em;
    line-height: 1.8;
    will-change: transform;
}

.ending-credits-game-title {
    font-size: clamp(26px, 4vw, 44px);
    letter-spacing: 0.09em;
    color: #fff8f8;
    text-shadow: 0 0 16px rgba(255, 129, 129, 0.34);
    margin: 10px 0 16px;
}

.ending-credits-true-title {
    font-size: clamp(14px, 2vw, 22px);
    color: #ffd5d5;
    letter-spacing: 0.14em;
    margin: 8px 0 12px;
}

.ending-credits-divider {
    font-size: 14px;
    color: rgba(255, 192, 192, 0.78);
    letter-spacing: 0.18em;
    margin: 14px 0;
}

.ending-credits-section {
    font-size: clamp(14px, 1.95vw, 22px);
    color: #ffd9b6;
    letter-spacing: 0.16em;
    margin: 20px 0 10px;
}

.ending-credits-line {
    font-size: clamp(13px, 1.7vw, 21px);
    color: #ffecec;
    margin: 2px 0;
}

.ending-credits-link {
    font-size: clamp(12px, 1.55vw, 18px);
    color: #ffd2d2;
    letter-spacing: 0.02em;
    margin: 2px 0;
}

.ending-credits-finale {
    font-size: clamp(14px, 1.95vw, 22px);
    color: #fff4f4;
    text-shadow: 0 0 12px rgba(255, 165, 165, 0.35);
    letter-spacing: 0.08em;
    margin: 8px 0;
}

.ending-credits-gap {
    height: 28px;
}

.ending-credits-skip {
    font-size: 12px;
    color: rgba(255, 211, 211, 0.82);
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(255, 110, 110, 0.24);
}

@keyframes ending-credits-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes ending-credits-fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* --- Object Art Hotspot --- */
.hotspot.object-art-hotspot {
    border: none !important;
    background-color: transparent !important;
    color: transparent;
    text-shadow: none;
    transition: filter 0.16s ease, transform 0.16s ease;
}

.hotspot.object-art-hotspot.mask-only-hotspot {
    background: transparent !important;
}

.hotspot.object-art-hotspot.mask-only-hotspot.pixel-hover {
    background: rgba(120, 20, 20, 0.16) !important;
    box-shadow:
        inset 0 0 0 2px rgba(255, 130, 130, 0.78),
        0 0 14px rgba(255, 84, 84, 0.48);
}

.hotspot.object-art-hotspot span {
    display: none;
}

.hotspot.object-art-hotspot:hover {
    transform: none;
}

.hotspot.object-art-hotspot.pixel-hover {
    filter:
        drop-shadow(0 0 8px rgba(255, 120, 120, 0.72))
        drop-shadow(0 0 18px rgba(255, 70, 70, 0.48));
}

/* --- Title Screen --- */
.title-overlay {
    position: fixed;
    inset: 0;
    z-index: 3400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 8%, rgba(182, 36, 36, 0.24), rgba(0, 0, 0, 0) 42%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.028) 1px, rgba(0, 0, 0, 0.06) 2px, rgba(0, 0, 0, 0.06) 3px),
        linear-gradient(180deg, #050202 0%, #130707 48%, #040202 100%);
}

.title-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    transition: opacity 0.28s ease;
}

.title-overlay.has-bouquet::before {
    opacity: 0.9;
    background-image: url("assets/title_bouquet.webp");
}

.title-overlay.scarred-title .title-window {
    border-color: #8d2a2a;
    box-shadow:
        0 26px 52px rgba(0, 0, 0, 0.62),
        0 0 34px rgba(168, 24, 24, 0.42);
}

.title-overlay.scarred-title .title-noise {
    opacity: 0.18;
    mix-blend-mode: screen;
}

.title-overlay.golden-unlocked .title-window {
    border-color: #b49344;
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.56),
        0 0 28px rgba(210, 166, 70, 0.3);
}

.title-window {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    overflow: auto;
    border: 1px solid #6f3a3a;
    border-radius: 10px;
    padding: 26px 26px 18px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 92, 92, 0.2), rgba(255, 92, 92, 0) 60%),
        linear-gradient(180deg, rgba(25, 9, 9, 0.95) 0%, rgba(8, 4, 4, 0.96) 100%);
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.56),
        0 0 24px rgba(140, 32, 32, 0.34);
}

.title-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
    background:
        linear-gradient(90deg, rgba(255, 90, 90, 0.08), rgba(0, 0, 0, 0)),
        repeating-radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.16) 1px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 5px);
}

.title-main,
.title-sub,
.title-actions,
.title-save-hint,
.title-gallery-panel {
    position: relative;
    z-index: 1;
}

.title-main {
    text-align: center;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: clamp(40px, 8vw, 86px);
    line-height: 1;
    letter-spacing: 0.08em;
    color: #fff0f0;
    text-shadow: 0 0 22px rgba(255, 108, 108, 0.55);
    margin: 8px 0 10px;
}

.title-sub {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.22em;
    color: #d6b4b4;
    margin-bottom: 18px;
}

.title-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.title-actions button {
    min-width: 140px;
    border: 1px solid #8f5757;
    background: linear-gradient(180deg, #381919, #231010);
    color: #ffecec;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 15px;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.14s ease;
}

.title-actions button:hover:not(:disabled) {
    background: linear-gradient(180deg, #6a2b2b, #3b1717);
    border-color: #c98989;
    transform: translateY(-1px);
}

.title-actions button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.title-actions .golden-talisman-btn {
    border-color: #d7bc63;
    background: linear-gradient(180deg, #6f5822, #3a2d13);
    color: #fff7d6;
    text-shadow: 0 0 8px rgba(255, 222, 126, 0.3);
}

.title-actions .golden-talisman-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #8f7030, #564220);
    border-color: #f2d889;
}

body.golden-mode-transition #game-container {
    animation: golden-mode-transition-flicker 0.26s linear 1;
}

@keyframes golden-mode-transition-flicker {
    0% {
        filter: saturate(1) contrast(1);
        transform: translate(0, 0);
    }
    28% {
        filter: invert(1) hue-rotate(130deg) contrast(1.25);
        transform: translate(-2px, 1px);
    }
    56% {
        filter: invert(0.4) hue-rotate(40deg) contrast(1.35);
        transform: translate(2px, -1px);
    }
    100% {
        filter: saturate(1) contrast(1);
        transform: translate(0, 0);
    }
}

/* --- Golden Mode: Full-Screen Corruption --- */
body.golden-mode #site-layer {
    position: relative;
    background: linear-gradient(180deg, #1a0000 0%, #070000 58%, #000 100%);
    color: #ffd7d7;
    filter: saturate(1.35) contrast(1.24) hue-rotate(-16deg);
}

body.golden-mode #site-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.3;
    mix-blend-mode: screen;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.09) 1px,
            rgba(0, 0, 0, 0.12) 2px,
            rgba(0, 0, 0, 0.12) 3px
        ),
        linear-gradient(90deg, rgba(255, 0, 85, 0.18), rgba(30, 225, 255, 0.14));
    animation: golden-site-noise 0.24s steps(2, end) infinite;
}

body.golden-mode #site-layer.golden-site-chrome #nyax-banner {
    background: linear-gradient(90deg, #1b0909, #2e0000 60%, #1b0909);
    border-bottom-color: #8a1a1a;
    color: #ffd0d0;
    text-shadow: 0 0 8px rgba(255, 95, 95, 0.45);
}

body.golden-mode #site-layer.golden-site-chrome .nyax-btn {
    border-color: #ff4d4d;
    color: #ffb3b3;
    background: #240000;
    box-shadow: 0 0 10px rgba(255, 54, 54, 0.35);
}

body.golden-mode #site-layer.golden-site-chrome #site-wrapper {
    background: radial-gradient(circle at center, #1c0505 0%, #090101 74%);
    color: #ffdddd;
}

body.golden-mode #site-layer.golden-site-chrome #site-wrapper header {
    border-bottom-color: rgba(170, 44, 44, 0.45);
}

body.golden-mode #site-layer.golden-site-chrome #site-wrapper nav span {
    color: #ffb4b4;
    text-shadow: 0 0 8px rgba(255, 65, 65, 0.4);
}

body.golden-mode #site-layer.golden-site-chrome #site-wrapper nav span:hover {
    color: #fff1f1;
}

body.golden-mode #site-layer.golden-site-chrome .site-box,
body.golden-mode #site-layer.golden-site-chrome .profile-box,
body.golden-mode #site-layer.golden-site-chrome .diary-entry,
body.golden-mode #site-layer.golden-site-chrome .bbs-post {
    background-color: rgba(29, 5, 5, 0.9);
    border-color: rgba(170, 40, 40, 0.72);
    color: #ffdcdc;
    box-shadow: 0 0 14px rgba(90, 0, 0, 0.38);
}

body.golden-mode #site-layer.golden-site-chrome .golden-gallery-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(220, 70, 70, 0.75);
}

body.golden-mode #site-layer.golden-site-chrome .golden-gallery-visual {
    position: relative;
    width: 100%;
    height: clamp(170px, 32vh, 260px);
    margin: 12px 0 10px;
    border: 1px solid rgba(255, 120, 120, 0.36);
    background:
        linear-gradient(135deg, rgba(255, 0, 76, 0.18), rgba(46, 0, 0, 0.7)),
        url("assets/site/gallery/first_digital_art.webp") center / cover no-repeat;
    filter: contrast(1.38) saturate(0.55) brightness(0.5) hue-rotate(148deg);
    box-shadow:
        inset 0 0 32px rgba(0, 0, 0, 0.68),
        0 0 12px rgba(255, 70, 70, 0.22);
    animation: golden-gallery-glitch 0.24s steps(2, end) infinite;
}

body.golden-mode #site-layer.golden-site-chrome .golden-gallery-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 38% 43%, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0) 16%),
        radial-gradient(circle at 62% 43%, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0) 16%);
    opacity: 0.58;
    mix-blend-mode: multiply;
}

body.golden-mode #site-layer.golden-site-chrome .golden-gallery-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08) 1px,
            rgba(0, 0, 0, 0.14) 2px,
            rgba(0, 0, 0, 0.14) 3px
        );
    opacity: 0.3;
}

body.golden-mode #site-layer.golden-site-chrome .golden-gallery-card[data-golden-variant="1"] .golden-gallery-visual {
    filter: invert(0.34) saturate(1.48) contrast(1.45) brightness(0.58);
}

body.golden-mode #site-layer.golden-site-chrome .golden-gallery-card[data-golden-variant="2"] .golden-gallery-visual {
    filter: hue-rotate(218deg) saturate(0.72) contrast(1.62) brightness(0.42);
}

body.golden-mode .golden-gallery-unlock-card {
    border: 2px solid rgba(255, 86, 86, 0.58);
    padding: 8px;
    display: inline-block;
    background: #0c0000;
    box-shadow: 0 0 12px rgba(255, 45, 45, 0.28);
}

body.golden-mode .golden-gallery-unlock-art {
    display: block;
    width: min(260px, 64vw);
    height: auto;
    filter: contrast(1.45) brightness(0.56) saturate(0.48) hue-rotate(150deg);
}

body.golden-mode .golden-gallery-unlock-caption {
    margin-top: 7px;
    font-size: 12px;
    color: #ffc9c9;
    letter-spacing: 0.06em;
}

body.golden-mode #source-code-modal {
    background: #130303;
    color: #ffd8d8;
    border-color: #a11;
    box-shadow: 0 0 24px rgba(255, 24, 24, 0.38);
}

body.golden-mode .download-overlay {
    background:
        radial-gradient(circle at 50% 50%, rgba(110, 0, 0, 0.6), rgba(0, 0, 0, 0.95)),
        #000;
    color: #ff5f5f;
}

body.golden-mode .download-window h1 {
    color: #ff9b9b;
    text-shadow: 0 0 16px rgba(255, 62, 62, 0.56);
}

body.golden-mode #red-desktop {
    filter: invert(0.2) hue-rotate(162deg) saturate(1.55) contrast(1.35);
    animation: golden-desktop-flicker 0.22s steps(2, end) infinite;
}

body.golden-mode .glitch-window.enemy {
    background: #3a0202;
    border-color: #ff5a5a;
    color: #ffd8d8;
}

body.golden-mode .glitch-window.friendly {
    background: #201818;
    border-color: #ff8b6f;
    color: #ffe4d8;
}

body.golden-mode #cli-screen {
    color: #ffbaba;
    text-shadow: 0 0 7px rgba(255, 86, 86, 0.72);
    background:
        linear-gradient(180deg, rgba(30, 0, 0, 0.95), rgba(0, 0, 0, 1)),
        #000;
    animation: golden-cli-jitter 0.18s steps(2, end) infinite;
}

body.golden-mode #cli-input-line {
    border-top-color: #6f1111;
}

body.golden-mode .prompt {
    color: #ff8585;
}

body.golden-mode #myth-stage {
    animation: golden-myth-warp 0.3s steps(2, end) infinite;
}

body.golden-mode #myth-bg {
    filter: invert(0.16) hue-rotate(148deg) saturate(1.62) contrast(1.38) brightness(0.82);
}

body.golden-mode #myth-corruption-overlay {
    opacity: 0.66 !important;
    mix-blend-mode: screen;
}

body.golden-mode #message-area {
    border-top-color: rgba(255, 102, 102, 0.74);
    border-bottom-color: rgba(255, 102, 102, 0.74);
    color: #ffe7e7;
    text-shadow:
        0 0 10px rgba(255, 70, 70, 0.55),
        -1px 0 0 rgba(255, 34, 34, 0.38),
        1px 0 0 rgba(64, 180, 255, 0.24);
}

body.golden-mode #location-name {
    color: #ffd9d9;
    border-left-color: #ff5a5a;
    text-shadow: 2px 2px 4px #000, 0 0 16px rgba(255, 70, 70, 0.58);
}

body.golden-mode #inventory-area {
    border-color: #a22;
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.55),
        0 0 16px rgba(155, 20, 20, 0.38);
}

body.golden-mode #item-action-panel {
    border-color: rgba(160, 46, 46, 0.82);
    box-shadow: 0 0 14px rgba(170, 36, 36, 0.3);
}

body.golden-mode #cat-sprite {
    filter:
        grayscale(1)
        contrast(1.95)
        brightness(0.34)
        hue-rotate(160deg)
        drop-shadow(0 0 16px rgba(255, 70, 70, 0.34));
    animation:
        neko-float 3.4s ease-in-out infinite,
        golden-cat-jitter 0.19s steps(2, end) infinite;
}

body.golden-mode #cat-sprite::before,
body.golden-mode #cat-sprite::after {
    content: "";
    position: absolute;
    top: 32%;
    width: 17%;
    height: 17%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.98) 0%, rgba(5, 5, 5, 0.96) 62%, rgba(0, 0, 0, 0) 100%);
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.9);
    opacity: 0.95;
}

body.golden-mode #cat-sprite::before {
    left: 29%;
}

body.golden-mode #cat-sprite::after {
    left: 50%;
}

body.golden-mode .hotspot {
    border-color: rgba(255, 88, 88, 0.5);
    background: rgba(55, 0, 0, 0.18);
    color: rgba(255, 229, 229, 0.82);
}

body.golden-mode .hotspot:hover {
    background: rgba(255, 0, 76, 0.28);
    border-color: rgba(255, 116, 116, 0.8);
}

@keyframes golden-site-noise {
    0% { opacity: 0.22; transform: translate(0, 0); }
    30% { opacity: 0.34; transform: translate(-1px, 1px); }
    60% { opacity: 0.28; transform: translate(1px, -1px); }
    100% { opacity: 0.22; transform: translate(0, 0); }
}

@keyframes golden-desktop-flicker {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-1px, 1px); }
    40% { transform: translate(1px, -1px); }
    60% { transform: translate(-1px, -1px); }
    80% { transform: translate(1px, 1px); }
    100% { transform: translate(0, 0); }
}

@keyframes golden-cli-jitter {
    0% { transform: translate(0, 0); }
    25% { transform: translate(1px, 0); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(0, -1px); }
    100% { transform: translate(0, 0); }
}

@keyframes golden-myth-warp {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 1px); }
    50% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, -1px); }
    100% { transform: translate(0, 0); }
}

@keyframes golden-gallery-glitch {
    0% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(-1px, 1px) scale(1.01); }
    40% { transform: translate(1px, -1px) scale(1); }
    60% { transform: translate(-1px, -1px) scale(1.012); }
    80% { transform: translate(1px, 1px) scale(1); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes golden-cat-jitter {
    0% { transform: translate(0, 0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, 0); }
    100% { transform: translate(0, 0); }
}

.title-save-hint {
    text-align: center;
    font-size: 12px;
    color: #bda6a6;
    margin-bottom: 8px;
}

.title-gallery-panel {
    margin-top: 10px;
    border-top: 1px solid rgba(255, 190, 190, 0.2);
    padding-top: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.title-gallery-panel h3 {
    margin: 6px 0;
    color: #ffcbcb;
    font-size: 13px;
    letter-spacing: 0.08em;
}

.title-gallery-panel .progress-list {
    margin-bottom: 12px;
}

.title-gallery-panel .progress-item {
    border-bottom-color: rgba(255, 200, 200, 0.14);
    color: #f1e6e6;
}

.title-gallery-panel .progress-item.locked {
    color: #7b6767;
}

.title-gallery-panel .progress-item.observer-log-item {
    color: #ecdede;
}

.title-gallery-panel .observer-log-time {
    color: #b89f9f;
}

@media (max-width: 700px) {
    .title-overlay {
        padding: 12px;
    }

    .title-window {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 24px);
        padding: 18px 14px 14px;
    }

    .title-actions button {
        width: 100%;
        min-width: 0;
    }
}

/* --- Karma Corruption --- */
#myth-stage {
    isolation: isolate;
}

#myth-transition-fade {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    background: #000;
    transition: opacity 0.14s ease;
}

#myth-transition-fade.active {
    opacity: 1;
}

#myth-subliminal-flash {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(42, 0, 0, 0.72)),
        url("assets/myth/characters/miku/miku_neutral.webp") center bottom / contain no-repeat;
    filter: contrast(1.55) saturate(0.18) hue-rotate(318deg) invert(0.08);
}

#myth-subliminal-flash.active {
    opacity: 0.95;
}

#myth-corruption-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.32s ease;
    background:
        radial-gradient(circle at 52% 10%, rgba(210, 48, 48, 0.24), rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, rgba(115, 0, 0, 0.18), rgba(0, 0, 0, 0.26) 68%, rgba(0, 0, 0, 0.4));
}

#myth-screen.karma-heavy #myth-bg {
    filter: saturate(0.82) contrast(1.12) brightness(0.82) hue-rotate(-10deg);
}

#myth-screen.karma-heavy #message-area {
    border-top-color: rgba(190, 90, 90, 0.72);
    border-bottom-color: rgba(190, 90, 90, 0.72);
    text-shadow: 0 0 10px rgba(255, 92, 92, 0.2), 1px 1px 2px #000;
}

#myth-screen.karma-heavy #location-name {
    text-shadow: 2px 2px 4px #000, 0 0 16px rgba(190, 42, 42, 0.5);
}

#myth-screen.karma-glitch-pulse #myth-stage {
    animation: myth-karma-stage-glitch 0.24s steps(2, end);
}

#myth-screen.karma-glitch-pulse #myth-bg {
    filter: saturate(1.26) contrast(1.32) brightness(0.72) hue-rotate(-16deg);
}

#myth-screen.karma-glitch-pulse #myth-corruption-overlay {
    opacity: 0.52 !important;
}

#myth-screen.karma-glitch-pulse #message-area {
    color: #ffe6e6;
    text-shadow:
        0 0 4px rgba(255, 106, 106, 0.7),
        -1px 0 0 rgba(255, 50, 50, 0.38),
        1px 0 0 rgba(110, 0, 0, 0.42);
}

#myth-screen.miku-pain-react #myth-stage {
    filter: saturate(1.35) contrast(1.22) brightness(0.82);
}

#myth-screen.miku-pain-react #myth-corruption-overlay {
    opacity: 0.62 !important;
}

#myth-screen.miku-pain-react #message-area {
    color: #ffd9d9;
    text-shadow:
        0 0 6px rgba(255, 62, 62, 0.66),
        -1px 0 0 rgba(255, 10, 10, 0.32),
        1px 0 0 rgba(140, 0, 0, 0.38);
}

@keyframes myth-karma-stage-glitch {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(2px, -1px); }
    60% { transform: translate(-1px, -2px); }
    80% { transform: translate(1px, 2px); }
    100% { transform: translate(0, 0); }
}

/* --- Glitch Flower --- */
.hotspot[data-object-id="glitch_flower"].object-art-hotspot {
    animation: glitch-flower-jitter 0.22s steps(2, end) infinite;
    filter:
        drop-shadow(0 0 8px rgba(255, 78, 140, 0.7))
        drop-shadow(0 0 18px rgba(98, 216, 255, 0.38));
}

.hotspot[data-object-id="glitch_flower"].object-art-hotspot::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.24;
    mix-blend-mode: screen;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.1) 1px,
            rgba(0, 0, 0, 0.08) 2px,
            rgba(0, 0, 0, 0.08) 3px
        ),
        linear-gradient(90deg, rgba(255, 0, 75, 0.12), rgba(0, 255, 255, 0.12));
    animation: glitch-flower-noise 0.26s steps(4, end) infinite;
}

.hotspot[data-object-id="glitch_flower"].object-art-hotspot.pixel-hover {
    filter:
        drop-shadow(0 0 10px rgba(255, 110, 160, 0.88))
        drop-shadow(0 0 24px rgba(70, 240, 255, 0.52));
}

@keyframes glitch-flower-jitter {
    0% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-1px, 1px) rotate(-0.18deg); }
    40% { transform: translate(1px, -1px) rotate(0.16deg); }
    60% { transform: translate(-1px, -1px) rotate(-0.14deg); }
    80% { transform: translate(1px, 1px) rotate(0.14deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes glitch-flower-noise {
    0% { opacity: 0.16; transform: translate(0, 0); }
    30% { opacity: 0.3; transform: translate(1px, 0); }
    60% { opacity: 0.2; transform: translate(-1px, 1px); }
    100% { opacity: 0.16; transform: translate(0, 0); }
}

/* --- Miku Body Glitch (heavier than flower) --- */
.hotspot[data-object-id="miku_body"] {
    isolation: isolate;
    overflow: hidden;
    animation: miku-body-jitter 0.12s steps(2, end) infinite;
}

.hotspot[data-object-id="miku_body"]::before,
.hotspot[data-object-id="miku_body"]::after {
    content: '';
    position: absolute;
    inset: -1px;
    pointer-events: none;
}

.hotspot[data-object-id="miku_body"]::before {
    opacity: 0.48;
    mix-blend-mode: screen;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.2) 1px,
            rgba(0, 0, 0, 0.18) 2px,
            rgba(0, 0, 0, 0.18) 3px
        ),
        linear-gradient(90deg, rgba(255, 0, 85, 0.24), rgba(80, 255, 255, 0.2));
    animation: miku-body-noise 0.14s steps(5, end) infinite;
}

.hotspot[data-object-id="miku_body"]::after {
    opacity: 0.34;
    mix-blend-mode: lighten;
    background:
        linear-gradient(90deg, rgba(255, 34, 84, 0.28), rgba(255, 34, 84, 0)),
        linear-gradient(270deg, rgba(56, 220, 255, 0.3), rgba(56, 220, 255, 0));
    transform: translateX(1px);
    animation: miku-body-rgb-split 0.1s steps(2, end) infinite;
}

.hotspot[data-object-id="miku_body"].object-art-hotspot {
    filter:
        saturate(1.35)
        contrast(1.28)
        drop-shadow(0 0 12px rgba(255, 70, 132, 0.86))
        drop-shadow(0 0 30px rgba(54, 228, 255, 0.58));
}

.hotspot[data-object-id="miku_body"].object-art-hotspot.pixel-hover {
    filter:
        saturate(1.55)
        contrast(1.35)
        drop-shadow(0 0 16px rgba(255, 92, 152, 0.95))
        drop-shadow(0 0 38px rgba(80, 241, 255, 0.66));
}

@keyframes miku-body-jitter {
    0% { transform: translate(0, 0) skewX(0deg); }
    16% { transform: translate(-2px, 1px) skewX(-0.8deg); }
    33% { transform: translate(3px, -2px) skewX(0.9deg); }
    50% { transform: translate(-3px, 2px) skewX(-0.6deg); }
    66% { transform: translate(2px, 1px) skewX(0.6deg); }
    83% { transform: translate(-1px, -2px) skewX(-0.4deg); }
    100% { transform: translate(0, 0) skewX(0deg); }
}

@keyframes miku-body-noise {
    0% { opacity: 0.32; transform: translate(0, 0); }
    25% { opacity: 0.55; transform: translate(-2px, 1px); }
    50% { opacity: 0.4; transform: translate(2px, -1px); }
    75% { opacity: 0.58; transform: translate(-1px, -1px); }
    100% { opacity: 0.32; transform: translate(0, 0); }
}

@keyframes miku-body-rgb-split {
    0% { transform: translateX(0); opacity: 0.22; }
    50% { transform: translateX(3px); opacity: 0.38; }
    100% { transform: translateX(-2px); opacity: 0.22; }
}

/* --- Irreversible / Crash --- */
.scarred-prelude-overlay {
    position: fixed;
    inset: 0;
    z-index: 3900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.scarred-prelude-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.scarred-prelude-text {
    max-width: min(88vw, 720px);
    padding: 18px 20px;
    text-align: center;
    border: 1px solid rgba(171, 77, 77, 0.56);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(22, 5, 5, 0.92), rgba(7, 3, 3, 0.94));
    box-shadow: 0 0 24px rgba(152, 24, 24, 0.34);
}

.scarred-prelude-text .speaker {
    font-size: 13px;
    color: #ffb7b7;
    letter-spacing: 0.1em;
    margin-bottom: 7px;
}

.scarred-prelude-text .line {
    font-size: clamp(16px, 2.2vw, 24px);
    color: #ffe3e3;
    letter-spacing: 0.05em;
}

.fake-crash-overlay {
    position: fixed;
    inset: 0;
    z-index: 3950;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    box-sizing: border-box;
    background:
        linear-gradient(180deg, #0d2f8f 0%, #0c1f64 54%, #08133d 100%);
    color: #dbe7ff;
    font-family: "Courier New", monospace;
    text-shadow: 0 0 3px rgba(25, 63, 181, 0.5);
}

.fake-crash-content {
    width: min(780px, 100%);
    border: 1px solid rgba(182, 201, 255, 0.5);
    padding: 18px 20px;
    background: rgba(5, 15, 46, 0.72);
}

.fake-crash-title {
    font-size: clamp(24px, 4vw, 42px);
    font-weight: bold;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.fake-crash-lines {
    margin: 0;
    font-size: clamp(12px, 1.55vw, 16px);
    line-height: 1.65;
    white-space: pre-wrap;
}

.fake-crash-hint {
    margin-top: 14px;
    font-size: 12px;
    color: #aac0ff;
}

.fake-crash-overlay.ready {
    cursor: pointer;
}

.fake-crash-overlay.ready .fake-crash-hint {
    color: #e3ecff;
    text-shadow: 0 0 8px rgba(210, 227, 255, 0.48);
}

.pc-only-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 77, 77, 0.28), rgba(0, 0, 0, 0) 45%),
        linear-gradient(180deg, rgba(20, 2, 2, 0.98), rgba(0, 0, 0, 0.99));
}

.pc-only-window {
    width: min(460px, 100%);
    border: 1px solid rgba(255, 158, 158, 0.52);
    border-radius: 10px;
    padding: 24px 20px;
    background:
        linear-gradient(180deg, rgba(36, 8, 8, 0.94), rgba(12, 3, 3, 0.95));
    box-shadow:
        0 0 24px rgba(160, 34, 34, 0.4),
        0 14px 40px rgba(0, 0, 0, 0.66);
    text-align: center;
    color: #ffe8e8;
}

.pc-only-window h1 {
    margin: 0 0 14px;
    font-size: clamp(28px, 8vw, 40px);
    letter-spacing: 0.12em;
    color: #fff3f3;
    text-shadow: 0 0 18px rgba(255, 105, 105, 0.44);
}

.pc-only-window p {
    margin: 8px 0;
    line-height: 1.7;
    font-size: clamp(14px, 4vw, 17px);
}