/* =========================================================
   恋愛一徹 ちょBit★魔改造版 - スタイルシート
   
   【目次】
   01. 基本設定 (Base Settings)
   02. アニメーション (Animations)
   03. レイアウト・共通パーツ (Layout & Common)
   04. カラー定義 (Colors)
   05. ステータスバー (Status Bar)
   06. チャットUI (Chat UI)
   07. 選択肢エリア (Choice Area)
   08. 天の声メニュー (Save Menu)
   09. やりこみ・実績画面 (Collection & Trophy)
   10. システムUI・ダイアログ (System UI & Dialog)
   11. 隠し要素・演出 (Hidden Elements & Effects)
   12. スマートフォン向け調整 (Responsive / Mobile)
   13. Mac環境向け描画バグ対策 (Mac Rendering Fixes)
========================================================= */

/* =========================================================
   01. 基本設定 (Base Settings)
========================================================= */
* {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.emoji-fix {
    color: transparent !important;
    text-shadow: 0 0 0 #cccccc !important;
    font-family: "MS Gothic", "ＭＳ ゴシック", sans-serif !important;
}

.c-30 .emoji-fix { text-shadow: 0 0 0 #000000 !important; }
.c-31 .emoji-fix { text-shadow: 0 0 0 #ff5555 !important; }
.c-32 .emoji-fix { text-shadow: 0 0 0 #55ff55 !important; }
.c-33 .emoji-fix { text-shadow: 0 0 0 #ffff55 !important; }
.c-34 .emoji-fix { text-shadow: 0 0 0 #8888ff !important; }
.c-35 .emoji-fix { text-shadow: 0 0 0 #ff55ff !important; }
.c-36 .emoji-fix { text-shadow: 0 0 0 #55ffff !important; }
.c-37 .emoji-fix { text-shadow: 0 0 0 #ffffff !important; }
.c-def .emoji-fix { text-shadow: 0 0 0 #cccccc !important; }
.c-333 .emoji-fix { text-shadow: 0 0 0 #333333 !important; }
.c-555 .emoji-fix { text-shadow: 0 0 0 #555555 !important; }
.c-777 .emoji-fix { text-shadow: 0 0 0 #777777 !important; }
.c-hifumi .emoji-fix { text-shadow: 0 0 0 #ff88bb !important; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    position: relative;
    color: #ccc;
    font-family: "MS Gothic", "ＭＳ ゴシック", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 1.3;
    box-sizing: border-box;
    overscroll-behavior-y: none;
    word-break: break-all;
    overflow-wrap: break-word;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   スマホ・タブレット限定：スクロールバー非表示設定
   （PCではマウス操作のためにスクロールバーを残す）
========================================================= */
@media (pointer: coarse) {
    /* Chrome, Safari, Android等のスクロールバーを消す */
    #game-container::-webkit-scrollbar {
        display: none;
    }
    
    /* Firefoxやその他のブラウザのスクロールバーを消す */
    #game-container {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
}

/* =========================================================
   02. アニメーション (Animations)
========================================================= */
@keyframes breathing {
    0%   { opacity: 0.3; }
    50%  { opacity: 1.0; }
    100% { opacity: 0.3; }
}

@keyframes arrow-wave {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; }
}

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

@keyframes retro-blink {
    0%  { color: #ff0000; }
    50% { color: #ffff00; }
}

@keyframes shake {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-8px, 6px); }
    40%  { transform: translate(8px, -6px); }
    60%  { transform: translate(-8px, -6px); }
    80%  { transform: translate(8px, 6px); }
    100% { transform: translate(0, 0); }
}

.shake-anim {
    animation: shake 0.25s ease-in-out;
}

/* =========================================================
   03. レイアウト・共通パーツ (Layout & Common)
========================================================= */
#game-container {
    width: 100%;
    max-width: none;
    margin: 0;
    height: 100%;
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 10px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- コンテンツ幅の制限 --- */
#status-bar, #display-area, #choice-area {
    width: 100%;
    max-width: 640px;
    box-sizing: border-box;
}

/* --- 画面端の余白設定 --- */
#display-area, #choice-area {
    padding-left: 10px;
    padding-right: 10px;
}

.text-line {
    margin-bottom: 4px;
}

/* --- 汎用エフェクト用クラス --- */
.mark-new {
    display: inline-block;
    color: #ff55ff;
    font-size: 1.2em;
    margin-left: 10px;
    vertical-align: middle;
    animation: breathing 3s ease-in-out infinite;
}

.arrow-char {
    display: inline-block;
    opacity: 0;           
    margin-right: -1px;   
    font-family: sans-serif; 
    font-weight: 900;     
    font-style: italic;   
    color: #ff55ff;       
    animation: arrow-wave 1.2s linear infinite;
    position: relative;
    top: 0px;
}

.typing-cursor {
    display: inline-block;
    width: 1px;
    margin-right: -1px;
    overflow: visible;
    white-space: nowrap;
    vertical-align: bottom;
    animation: blink 1s infinite;
    opacity: 1;
}

.next-scene-cursor {
    color: #55ff55 !important;
    animation-duration: 0.5s !important;
    text-shadow: 0 0 5px #55ff55;
}

.cursor-blink::after {
    content: "■"; 
    animation: blink 1s infinite;
}

.skip-text {
    position: absolute;
    left: 5px;
    color: #cccccc;
    font-weight: bold;
    font-style: italic;
    font-size: 0.9em;
}

.nowrap {
    white-space: nowrap;
}

/* =========================================================
   04. カラー定義 (Colors)
========================================================= */
.c-30  { color: #000000; }
.c-31  { color: #ff5555; }
.c-32  { color: #55ff55; }
.c-33  { color: #ffff55; }
.c-34  { color: #8888ff; }
.c-35  { color: #ff55ff; }
.c-36  { color: #55ffff; }
.c-37  { color: #ffffff; }
.c-def { color: #cccccc; }
.c-333 { color: #333333; }
.c-555 { color: #555555; }
.c-777 { color: #777777; }

/* =========================================================
   05. ステータスバー (Status Bar)
========================================================= */
#status-bar {
    background-color: #000000 !important; 
    border-bottom: 1px solid #555555 !important; 
    color: #cccccc !important;
    font-family: "MS Gothic", "ＭＳ ゴシック", monospace !important;
    font-size: 14px; 
    font-weight: normal !important; 
    
    position: sticky;
    top: 0;
    margin: 0 0 10px 0;
    padding: 8px 70px 6px 10px;
    width: 100%;
    box-sizing: border-box;
    z-index: 2000;

    display: flex;
    flex-direction: row;
    align-items: center;
}

#status-left {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    z-index: 1; 
}

.status-row {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* --- 名前の幅を固定して開始位置を揃える --- */
.status-target, .status-spacer {
    width: 3.5em;
    display: inline-block;
}

/* --- 数値の幅固定とゲージへの密着設定 --- */
.status-val {
    width: 1.5em;
    text-align: right;
    margin-left: 4px;
    margin-right: 0;
    color: #ffffff;
}

#status-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    z-index: 0;
}

.status-center-row {
    height: 1.4em;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

#skip-indicator {
    position: static;
    transform: none;
    margin: 0;
    color: #cccccc;
    font-weight: bold;
    font-style: italic;
    font-size: 0.9em;
}

.status-day-num { 
    color: #ffffff; 
    white-space: pre; 
}

/* --- ゲージ用デザイン --- */
.gauge-block {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: -1px;
    vertical-align: -1px;
}

.gauge-fill {
    background-color: currentColor;
}

.gauge-empty {
    border: 1px solid currentColor;
    box-sizing: border-box;
}

#gauge-love, #gauge-affection {
    margin-left: 3px;
    letter-spacing: -4px;
}

.gauge-off, .aff-off { color: #777777; } 
.aff-on { color: #8888ff; }

/* =========================================================
   06. チャットUI (Chat UI)
========================================================= */
.chat-row {
    display: flex;
    gap: 6px; 
    margin-bottom: 12px;
    align-items: flex-start;
}

.chat-row.right { flex-direction: row-reverse; }
.chat-system-row { justify-content: center; }

.chat-icon {
    min-width: 45px;
    white-space: nowrap;
    padding: 6px 5px;
    border: 1px solid #555555; 
    box-shadow: 4px 4px 0 #222222; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    flex-shrink: 0;
}

.chat-message {
    max-width: 88%; 
    padding: 12px;
    border: 1px solid #555555;
    color: #cccccc; 
    box-shadow: 4px 4px 0 #222222; 
    font-size: 14px;
    line-height: 1.5;
}

.chat-content {
    padding-right: 8px; 
    text-align: left; 
}

/* --- キャラクター別カラー設定 --- */
.chat-icon.ite       { color: #ff55ff; background-color: #1a001a; }
.chat-message.ite    { background-color: #1a001a; }
.chat-icon.iroha     { color: #55ff55; background-color: #002600; }
.chat-message.iroha  { background-color: #002600; }
.chat-icon.doremi    { color: #55ffff; background-color: #00222b; }
.chat-message.doremi { background-color: #00222b; }
.chat-icon.other     { color: #cccccc; background-color: #111111; }
.chat-message.other  { background-color: #111111; }
.c-hifumi            { color: #ff88bb; }
.chat-icon.hifumi    { color: #ff88bb; background-color: #2a0015; }
.chat-message.hifumi { background-color: #2a0015; }

/* =========================================================
   07. 選択肢エリア (Choice Area)
========================================================= */
#choice-area {
    display: none;
    flex-direction: column;
    gap: 0px; 
    margin-top: 4px; 
    background-color: transparent; 
    border: none;                  
    box-shadow: none;              
    position: relative;
    z-index: 100;
}

.choice-prompt {
    font-size: 14px;
    margin-bottom: 8px; 
    line-height: 1.5;
    text-align: left;
    color: #cccccc;
}

#choice-area button {
    display: block;
    width: 100%;
    margin: 0;
    background-color: #000033; 
    color: #cccccc;
    border: 1px solid #555577; 
    padding: 12px; 
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    line-height: 1.4;
    box-shadow: 4px 4px 0 #222222; 
    transition: all 0.1s ease;
}

#choice-area button:active {
    background-color: #0000aa; 
    border-color: #ffffff;
    color: #ffffff;
    transform: translate(2px, 2px); 
    box-shadow: 2px 2px 0 #111111;  
}

@media (hover: hover) {
    #choice-area button:hover {
        background-color: #0000aa; 
        border-color: #ffffff;
        color: #ffffff;
        transform: translate(2px, 2px); 
        box-shadow: 2px 2px 0 #111111;  
    }
}

#choice-area button:disabled {
    pointer-events: none !important;
    opacity: 1;
}

/* =========================================================
   08. 天の声メニュー (Save Menu)
========================================================= */
.save-menu-title {
    text-align: center;
    margin-top: 10px;
}

.save-menu-label {
    width: 100%;
    max-width: 310px;
    margin: 0 auto 5px auto;
    text-align: left;
    font-size: 14px;
    box-sizing: border-box;
    padding-left: 2px;
}

.save-textarea {
    width: 100%;
    max-width: 310px;
    margin: 0 auto 6px auto;
    height: 119px;
    font-size: 14px;
    line-height: 1.2;
    text-align: left;
    font-family: "MS Gothic", "ＭＳ ゴシック", monospace;
    box-sizing: border-box;
    display: block;
    padding: 8px 10px 8px 19px; 
    resize: none;
    letter-spacing: 1px;
}

.save-textarea-export {
    background-color: #111111;
    color: #cccccc;
    border: 1px solid #aaaa55;
}

.save-textarea-import {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #55aa55;
}

.save-msg-area {
    text-align: center;
    font-weight: bold;
    min-height: 1.5em;
    font-size: 14px;
}

/* --- ボタン用デザイン --- */
.save-menu-btn {
    display: block;
    width: 100%;
    max-width: 310px;
    box-sizing: border-box;
    margin: 4px auto 8px auto;
    padding: 12px;
    font-size: 14px;
    font-family: inherit;
    text-align: center; 
    cursor: pointer;
    line-height: 1.4;
    transition: all 0.1s ease;
    box-shadow: 4px 4px 0 #222222;
}

.save-menu-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #111111;
}

@media (hover: hover) {
    .save-menu-btn:hover {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0 #111111;
    }
}

.btn-yellow { background-color: #332200; color: #ffff55; border: 1px solid #aaaa55; }
.btn-yellow:active { background-color: #664400; border-color: #ffffaa; }
@media (hover: hover) { .btn-yellow:hover { background-color: #664400; border-color: #ffffaa; } }

.btn-green { background-color: #001a00; color: #55ff55; border: 1px solid #55aa55; }
.btn-green:active { background-color: #004400; border-color: #aaffaa; }
@media (hover: hover) { .btn-green:hover { background-color: #004400; border-color: #aaffaa; } }

/* =========================================================
   09. やりこみ・実績画面 (Collection & Trophy)
========================================================= */
.collection-container {
    text-align: center;
    padding: 10px 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    line-height: 1.5;
}

.collection-list {
    width: 100%;
    text-align: left;
    line-height: 1.15;
    margin-top: 5px;
}

.ending-collection .collection-list {
    max-width: 480px;
    margin: 0 auto;
}

.collection-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.collection-title { padding-right: 5px; }
.collection-time { white-space: nowrap; flex-shrink: 0; }
.time-text { font-family: monospace; font-weight: bold; letter-spacing: 1px; margin-right: 4px; }

/* --- タイムアタック用バッジ --- */
.badge { display: inline-block; width: 2.5em; text-align: center; }
.badge-shunsatsu { 
    color: #ff5555; 
    transform: skewX(-20deg);
}
.badge-kusen { color: #888888; }
.badge-hidden { visibility: hidden; }

/* --- イベント回収率の表示 --- */
.event-collection-summary {
    text-align: center;
    margin: 20px 0 0 0; 
}

.event-label {
    margin-bottom: 4px;
}

.event-count {
    font-family: monospace;
    font-weight: bold;
    font-size: 1.2em;
    letter-spacing: 1px;
    color: #ffffff;
}

.dashed-line { border-bottom: 1px dashed #555555; margin: 12px 0; }

.event-grid {
    text-align: left;
    display: inline-block;
    font-size: 0.75em;
    line-height: 1.4;
    font-family: monospace;
    margin-top: 5px;
}

/* --- 虎の巻（トロフィー）用装飾 --- */
.trophy-header { text-align: center; margin-bottom: 4px; }
.trophy-title-large { font-size: 1.1em; }
.trophy-no { display: inline-block; width: 3.4em; }
.trophy-desc { display: block; margin-left: 3.4em; margin-top: 8px; margin-bottom: 0.5em; text-align: left; line-break: strict; }

/* --- デベロッパーズ・タイム用テーブル --- */
.dev-time-container { margin-top: 20px; text-align: center; }
.dev-time-table { margin: 8px auto 0 auto; text-align: left; font-size: 13px; border-collapse: collapse; line-height: 1.3; }
.dev-time-table .col-name { padding-right: 4px; }
.dev-time-table .col-time { padding-right: 15px; }
.dev-time-notes { margin-top: 10px; line-height: 1.5; text-align: center; }
.note-main { font-size: 11px; }
.note-sub { font-size: 10px; }

/* --- 結果画面アニメーション＆装飾 --- */
.new-record-anim {
    display: inline-block;
    color: #ff0000;
    font-weight: bold;
    animation: retro-blink 0.4s steps(2, start) infinite;
}

.final-time-display { 
    font-family: monospace; 
    font-weight: bold; 
    font-size: 1.2em; 
    letter-spacing: 1px; 
    color: #ffffff;
}

.perfect-wrapper {
    position: relative;
    display: inline-block;
}

.perfect-badge {
    position: absolute;
    left: 115%;
    bottom: 2px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.ending-spacer { height: 35vh; }
.tap-return-msg { text-align: center; margin-top: 15px; font-size: 0.9em; }

/* =========================================================
   10. システムUI・ダイアログ (System UI & Dialog)
========================================================= */
#reset-btn {
    position: absolute; 
    top: 11px;          
    right: 10px;
    width: auto;       
    height: 32px;
    min-width: 32px;   
    background-color: #000000; 
    color: #cccccc; 
    border: 1px solid #555555;
    box-shadow: none; 
    padding: 0 10px;
    text-align: center;
    line-height: 30px; 
    font-family: inherit;
    font-size: 14px; 
    font-weight: normal !important; 
    cursor: pointer;
    z-index: 3000; 
    display: none;
    transition: all 0.2s ease; 
}

#reset-btn:active {
    background-color: #0000aa; 
    border-color: #cccccc;     
    color: #cccccc;            
    transform: none; 
    box-shadow: none;
}

@media (hover: hover) {
    #reset-btn:hover {
        background-color: #0000aa; 
        border-color: #cccccc;     
        color: #cccccc;            
        transform: none; 
        box-shadow: none;
    }
}

#dos-dialog-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

#dos-dialog {
    background-color: #0000aa; 
    color: #cccccc; 
    border: 2px solid #cccccc; 
    box-shadow: 6px 6px 0 #000000; 
    padding: 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
}

.dos-dialog-msg { margin-bottom: 25px; line-height: 1.4; text-align: center; }

.dos-dialog-btn {
    background-color: #0000aa; 
    color: #cccccc; 
    border: 1px solid #cccccc; 
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 20px;
    margin: 0 10px;
    min-width: 100px;
    transition: all 0.1s ease;
}

.dos-dialog-btn:active {
    background-color: #cccccc; 
    color: #0000aa;            
    border-color: #cccccc; 
}

@media (hover: hover) {
    .dos-dialog-btn:hover {
        background-color: #cccccc; 
        color: #0000aa;            
        border-color: #cccccc; 
    }
}

#tap-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    cursor: pointer;
    display: none;
    height: 100% !important;
    width: 100% !important;
    pointer-events: none !important;
}

/* =========================================================
   11. 隠し要素・演出 (Hidden Elements & Effects)
========================================================= */

/* --- 開発室用のアコーディオン（折りたたみ）スタイル --- */
.dev-accordion {
    background: #0d0d0d;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
    text-align: left;
}
.dev-accordion summary {
    cursor: pointer;
    font-weight: bold;
    outline: none;
    user-select: none;
}
.dev-accordion[open] summary {
    border-bottom: 1px dashed #555;
    padding-bottom: 6px;
    margin-bottom: 8px;
}
.dev-accordion-content {
    line-height: 1.5;
    font-size: 14px;
    padding-left: 10px;
}

/* --- 開発室用の暗号コード表示ボックス --- */
.dev-code-box {
    display: inline-block;
    background-color: #111111;
    color: #55ffff;
    padding: 6px 12px;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid #55ffff;
    font-size: 1.0em;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: "Courier New", monospace;
    user-select: text;
    -webkit-user-select: text;
}

/* --- 隠しタイトル（イースターエッグ）用スタイル --- */
.curse-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    color: #880000;
    font-size: 16px;
    line-height: 1;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-all;
    pointer-events: none;
    opacity: 0.5;
}

.curse-text {
    animation: blink 3s infinite;
    font-weight: bold;
}

#title-logo {
    cursor: pointer;
    display: inline-block;
    padding: 0px;
    user-select: none;
    -webkit-user-select: none;
}

.title-logo-bold {
    font-weight: bold;
}

.blood-splash-text {
    font-size: 2em;
    font-weight: bold;
}

/* --- スタッフロール（エンディングクレジット）用スタイル --- */
.staff-roll-btn {
    margin: 10px auto;
    width: auto;
    padding: 8px 25px;
    display: inline-block;
}

.staff-roll-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 4000;
    overflow: hidden;
    cursor: pointer;
}

.staff-roll-container {
    position: absolute;
    width: 100%;
    text-align: center;
    animation: scroll-up 35s linear forwards; 
    color: #ffffff;
    font-size: 15px;
    line-height: 2.5; 
}

@keyframes scroll-up {
    0% {
        top: 100%;
        transform: translateY(0);
    }
    100% {
        top: 0%;
        transform: translateY(-100%);
    }
}

.staff-roll-section {
    margin-bottom: 45px;
}

.staff-roll-job {
    color: #ffff55;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
}

.staff-roll-name {
    font-size: 17px;
    font-weight: normal;
}

.sr-title  { font-size: 22px; font-weight: bold; letter-spacing: 2px; }
.sr-spacer { margin-top: 100px; margin-bottom: 100px; }
.sr-thanks { font-size: 19px; font-weight: bold; }
.sr-end    { font-size: 14px; letter-spacing: 1px; }

/* =========================================================
   12. スマートフォン向け調整 (Responsive / Mobile)
========================================================= */
@media screen and (max-width: 480px) {
    body {
        font-size: 13px;
    }

    .ending-collection {
        font-size: 0.9em;
    }

    /* --- ステータスバーの最適化 --- */
    #status-bar { padding: 6px 60px 4px 5px; margin-bottom: 5px; }
    #reset-btn { top: 9px; }
    .status-target, .status-spacer { width: 3.2em; }
    
    #status-center { 
        position: relative; 
        left: auto; top: auto; transform: none; 
        margin-left: auto; 
        margin-right: auto; 
        align-items: center; 
    }

    /* --- ゲージのサイズを少し小さくして余白を確保 --- */
    .gauge-block {
        width: 10px;
        height: 10px;
        vertical-align: 0px;
    }

    .arrow-char { top: -1px; }

    /* --- チャットUIの最適化 --- */
    .chat-row { gap: 4px; margin-bottom: 8px; }
    
    .chat-icon { 
        min-width: 38px; white-space: nowrap; padding: 5px 4px; font-size: 11px; 
        box-shadow: 2px 2px 0 #222222; flex-shrink: 0; 
    }
    
    .chat-message { 
        padding: 8px 10px; font-size: 13px; max-width: 88%; 
        box-shadow: 2px 2px 0 #222222; 
    }

    /* --- 選択肢ボタンの最適化 --- */
    #choice-area button { 
        padding: 10px; 
        font-size: 13px; 
        box-shadow: 2px 2px 0 #222222; 
    }
    #choice-area button:active { 
        transform: translate(1px, 1px); 
        box-shadow: 1px 1px 0 #111111; 
    }

    /* --- ダイアログボタンの最適化 --- */
    .dos-dialog-btn { 
        padding: 6px 15px; 
        font-size: 13px; 
        min-width: 80px; 
    }

    /* --- 天の声メニュー等の縦幅極限圧縮（Safari対策） --- */
    .save-menu-title {
        margin-top: 4px;
    }
    .save-menu-label {
        margin-bottom: 2px;
    }
    .save-textarea { 
        height: 108px;             
        font-size: 13px;           
        line-height: 1.2;          
        padding: 5px 10px 5px 28px;
        margin-bottom: 4px;        
    }
    .save-menu-btn { 
        padding: 8px 4px;       
        margin-bottom: 5px;     
        font-size: 13px;        
        letter-spacing: -0.5px; 
        box-shadow: 2px 2px 0 #222222; 
        width: 100%;            
        box-sizing: border-box; 
    }
    .save-msg-area {
        font-size: 12px; 
    }

    /* --- エンディング全集の縦幅圧縮（Safari対策） --- */
    .collection-container {
        padding: 5px 0;
    }
    .collection-row {
        margin-bottom: 4px;
    }
    .event-collection-summary {
        margin-top: 10px;
    }

    /* --- 画面下部の戻るメッセージの余白圧縮（Safari対策） --- */
    .tap-return-msg {
        margin-top: 5px;
    }
}

/* =========================================================
   13. Mac環境向け描画バグ対策 (Mac Rendering Fixes)
========================================================= */
.arrow-char,
.typing-cursor {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: opacity;
}

.chat-content {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}