/* --- 0. 基本リセット (body, html から余白を削除) --- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- 1. body の設定 (維持) --- */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'DotGothic16', sans-serif;
    min-height: 100vh; /* 画面の高さいっぱいを使う */
    min-width: 100vw;  /* 画面の幅いっぱいに対応 */
    background-color: #333;
    overflow: hidden; /* スクロールバーを防ぐ */
}

/* ドット絵がぼやけないようにする魔法 (維持) */
img {
    image-rendering: pixelated; 
    image-rendering: -moz-crisp-edges;
}



/* --- 2. #sandbox の設定 (フレームの土台として機能) --- */
#sandbox {
    /* 画面の短い辺（min）に合わせてサイズを決定し、比率を保つ (維持) */
    width: min(90vh, 90vw); 
    height: calc(min(90vh, 90vw) * 0.75); 
    
    position: relative; 
    overflow: hidden; 
    /* 元の枠線はフレーム画像を使うため削除 */
    border: none;
    z-index: 50; 
    
    /* ★修正点: フレーム画像を背景に設定し、サイズにフィットさせる★ */
    background-color: black; 
    background-size: 100% 100%; /* #sandbox のサイズに合わせて連動 */
    background-repeat: no-repeat;
    background-position: center;
}

/* --- ★追加: フレームを前面に表示するための ::before 疑似要素 ★ --- */
#sandbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* フレーム画像を再設定 */
    background-image: url('img/frame-top.gif'); 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    
    /* ★修正点3: 最も手前に表示させるため、z-indexを高く設定★ */
    z-index: 500; 
    pointer-events: none; /* コンテンツをクリックできるようにする */
}



/* 部屋の背景画像（静止画） - フレームとメニューバーの内側へ移動 */
#room-background {
    position: absolute;
    
    /* ★修正点1: フレームのヘッダー分、下にずらす (約 20px / 600px = 3.33%) ★ */
    top: 3.33%; 
    left: 0.5%; /* 左右の細い枠線分、少し右へずらす */
    
    /* ★修正点2: フレームヘッダー分とメニューバー分、高さを縮小★ */
    /* (上 3.33% + 下 6.67% = 10% 程度を引いた高さ) */
    width: 99%; 
    height: 89%; 
    
    background-image: url('img/back.png'); 
    background-size: cover;
    z-index: 10; 
}
    
/* --- キャラクターの位置設定 (維持) --- */
.character {
    position: absolute;
    z-index: 18; 
    width: 21.25%;
    height: auto; 
    cursor: pointer;
    /* 💡 【追加】常に translateY(30%) を適用 */
    transform: translateY(30%);
transition: left 4s linear, bottom 4s linear; /* 例: 4秒かけて移動 */
}

.character.flipped {
transform: scaleX(-1) translateY(30%);
}

.character img {
    width: 100%; 
    height: auto; 
    image-rendering: pixelated; 
}

#kaito {
    /* left: 20%;  */
/* bottom: 10vw; */
}

#shiki {
    /* left: 40%;  */
/* bottom: 10vw; */
}


/* style.css (例) */

/* 睡眠中のキャラクターの状態 */
.character.is-sleeping {
    /* 移動のトランジションはそのまま利用 */
    
    /* 立ち絵のサイズや位置を睡眠用に調整する場合 */
    width: 21.25%;
    height: auto; 
    z-index: 21; /* 少し z-index を上げて、ベッドの上に確実に配置 */
}

/* 睡眠グラフィックへの切り替え */
#kaito.is-sleeping .char-image {
    background-image: url('img/kaito-sleep.gif'); 
}

#shiki.is-sleeping .char-image {
    background-image: url('img/shiki-sleep.gif'); 
}


/* --- セリフの吹き出しの基本スタイル (不要な !important を削除) --- */
.speech-bubble {
    position: absolute;
    top: -10%; 
    left: 50%;
    
/* ★修正: 複雑な translateY を削除し、X移動とY微調整の 2つの transform に分ける★ */
    transform: translateX(-50%) translateY(-5px); /* Y移動を -5px に調整 */

    box-sizing: border-box;
    

    width: 30vw; 
    max-width: 200px;
/* ★修正2: min-heightを削除し、正確な aspect-ratio で縦横比を固定★ */
    /* (225px / 100px = 2.25) */
    aspect-ratio: 2.25 / 1;
    
    background-size: contain; 
    background-position: center; 
    background-repeat: no-repeat;
    
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    
/* 縦方向の固定上限を下げ、横方向の vw の割合を下げる */
    padding-top: min(2.5vw, 15px);
    padding-bottom: min(3vw, 15px);
/* ★修正点: 左右の padding の値を増やし、セリフを中央に寄せ、画像の内側に収める★ */
    /* 10px から 15px や 18px に増やして試す */
　　padding-right: min(0.5vw, 18px); /* 16px → 18px などに増やす */
    padding-left: min(0.5vw, 18px);  /* 16px → 18px などに増やす */
    
    font-size: min(1.8vw, 13px);
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word; 
    text-align: center;
    color: black;
    
    background-image: url('img/dot-speech-bubble.png');
    background-color: transparent;
    border: none;
    box-shadow: none;
    display: none; 
    z-index: 30;
}

/* --- ★修正: 反転時の吹き出し位置修正と反転解除 (シンプル化) ★ */
.character.flipped .speech-bubble {
    /* 1. 通常時の位置設定をベースにする */
    top: -10%; 
    left: 50%; 
    
    /* 2. 通常時の transform に scaleX(-1) を追加して反転解除 */
    /* ★修正: translateY の値を -10px に変更し、少し下に下げる★ */
    transform: translateX(-50%) translateY(-10px) scaleX(-1); 
    
    /* 3. テキストの再反転 */
    /* left: 50%; は必要に応じて残します */
}

/* ★重要★: 吹き出し内のテキストをさらに反転して、読めるようにする */
.character.flipped .speech-bubble * {
    transform: scaleX(-1);
}




/* ★追加: 箱庭下部のメニューバーのスタイル (レスポンシブ対応) ★ */
#menu-bar {
    position: absolute;
    bottom: 2.9%; 
    left: 0;
    
    width: 100%;
    /* 高さをパーセントで設定 (40px / 600px = 6.67%) */
    height: 8.6%;
    
    background-color: #bbb; 
    border-top: 1px solid #777;
    z-index: 55; /* フレーム (50) より上に配置 */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.menu-item {
    /* フォントサイズを vw/vh でレスポンシブにする */
    font-size: min(1.5vw, 12px); 
    padding: 1% 2%; 
    cursor: pointer;
/* ★修正点1: 枠線や背景色を削除し、画像に置き換える準備★ */
    background-color: transparent; 
    border: none;
/* テキストを隠す設定 */
    color: transparent; 
    width: 30%; 
    /* ★修正点: 高さを90%から85%に下げ、上下の余白を増やす★ */
    height: 90%;
    /* ★修正点2: 画像を背景として中央に表示させる★ */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    box-sizing: border-box;
}

.menu-item:hover {
/* ホバー時の背景色も透明に（画像が光るなら画像側で対応） */
    background-color: transparent;
}

/* ★個別: メニューボタンの画像設定（IDはHTMLで割り当ててください）★ */

#menu-about {
    background-image: url('img/menu-about.gif');
}

#menu-char {
    background-image: url('img/menu-char.gif');
}

#menu-game {
    background-image: url('img/menu-game.gif');
}



/* --- ミニウィンドウの基本スタイル --- */
.mini-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 47vw;
    height: 50vh; /* 高さを少し広めに確保 */
    
    min-width: 300px;
/* 🚨 修正: max-widthに相対的な値を追加し、より小さい値が適用されるようにする */
    max-width: min(500px, 90vw);
    
    background-color: #c0c0c0;
    
    /* 🚨 修正: 全角スペースを除去しました */
    border: 1px solid #000000;
    box-shadow: 2px 2px 0px 0px #ffffff, 4px 4px 0px 0px #808080;
    
    box-sizing: border-box;
    z-index: 600;

    /* 🚨 修正: レイアウトを強制的に「縦並び」にします */
    display: flex;
    flex-direction: column !important; /* 重要: これでヘッダーが上、中身が下になります */

    overflow: hidden; 
    font-size: min(1.5vw, 14px);

    /* 🚨 初期状態は非表示（JSで表示切替） */
    display: none; 
}

/* --- ヘッダーのスタイル --- */
.window-header {
    background-color: #000080;
    color: white;
    
    /* 親要素の幅いっぱいに広げる */
    width: 100%;
    
    /* 🚨 修正: ヘッダーの高さが潰れないように固定 */
    flex-shrink: 0;
    height: 20px;
    line-height: 20px;
    
    padding: 0 0.5vw 0 1vw;
    margin-top: 0 !important;
    
    overflow: visible;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
    position: relative;
}

.window-title {
    font-weight: bold;
    background-color: transparent;
}

/* --- 閉じるボタンのスタイル --- */
.close-btn {
    background-color: #c0c0c0;
    color: #000000;
    
    /* 🚨 修正: 絶対配置を削除し、Flexboxの配置に任せる */
    /* position: absolute; 削除済み */
    margin-left: auto; /* 万が一のために右寄せ */

    border: none;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    
    width: 16px;
    height: 16px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    padding: 0;
    font-size: 14px;
    line-height: 1;
    font-weight: bold;
}

.close-btn:hover {
    background-color: #a0a0a0;
}

/* --- コンテンツエリアのスタイル --- */
.window-content {
    /* 上のパディングを少し開けて見やすくする */
    padding: 5px 10px 20px 10px;
    
    width: 100%;

    /* 🚨 修正: 残りの高さを全て使い、入り切らない場合はスクロールさせる */
    flex: 1; /* これで高さが自動計算されます */
    
    overflow-y: auto; /* コンテンツが多い時だけスクロールバーを出す */
    box-sizing: border-box;
}

/* --- ★追加: ウィンドウごとの初期位置調整 ★ --- */

/* ABOUTウィンドウ（元々中央に表示されていたはず） */
#about-window {
    /* 中央から少し左上に配置 */
    top: 45%; 
    left: 45%;
    transform: translate(-45%, -45%);
}

#about-window .window-header {
/* 🚨 ズレに応じてヘッダー全体を上に移動 */
    /* ★↓↓↓↓ この行を削除・コメントアウトしてください ↓↓↓↓★ */
    /* margin-top: -21px !important; */
}

/* MINI GAMEウィンドウ（ABOUTと位置をずらす） */
#game-window {
    /* 中央から少し右下に配置 */
    top: 55%; 
    left: 55%;
    transform: translate(-55%, -55%);
    /* 🚨 高さを増やす！ 37vh から 45vh などに */
    height: 50vh; /* 例: 45vh に変更 */
    
    /* 最小・最大サイズも少し調整 */
    min-height: 400px; /* 例えば、最小高さを確保 */
    max-height: 550px;
}


/* --- 動くオブジェクト（テレビ画面など）の設定 (維持) --- */
#tv-screen {
    position: absolute;
    width: 28.125%; 
    height: 28.33%; 
    left: 12.5%; 
    bottom: 28.67%; 
    z-index: 15;
    cursor: pointer;
}
/* ... TV ON/OFFのスタイルは維持 ... */

/* 動くオブジェクトの位置調整（テレビ画面など） */
#tv-screen {
    position: absolute;
    
    /* ★修正点: 新しいピクセルサイズに基づくパーセント値に更新★ */
    width: 28.125%; /* 225px / 800px */
    height: 28.33%; /* 170px / 600px */
    
    /* 位置の再設定（前回と同じ） */
    left: 12.5%; 
    bottom: 26.67%; 
    
    z-index: 15;
    cursor: pointer;
}

/* ★この設定は重要なので、もし無ければ追加してください★ */
#tv-screen img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 親要素の幅いっぱいに！ */
    height: 100%; /* 親要素の高さいっぱいに！ */
    image-rendering: pixelated;
}

/* ON状態のGIFは最初、非表示にしておく */
#tv-on-img {
    display: none; 
}

/* ★ONクラスが付いた時のスタイル★ */
#tv-screen.is-on #tv-off-img {
    display: none; /* OFF画像を隠す */
}

#tv-screen.is-on #tv-on-img {
    display: block; /* ON画像を出す */
}



/* --- ドアの位置設定 ★ --- */
#door {
    position: absolute;
    z-index: 17; /* キャラクター(18)より手前で、テレビ(15)と同じくらい */
    
    /* 位置の調整 */
    left: 70%;      /* 画面右寄り */
    bottom: 10%;    /* 下から少し高めに */
    
    /* サイズの調整 (例: 150px / 800px = 18.75%, 250px / 600px = 41.67%) */
    width: 18.75%; 
    height: 41.67%; 
    
    background-image: url('img/door.gif'); /* ⬅️ ファイル名を指定 */
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer; /* クリックできるように */
}


/* --- ドアから顔を出すキャラクターの共通設定 --- */
#door-character {
    position: absolute; /* JSで設定されていますが、念のため */
    
    /* ★★★ 扉と同じ位置に配置する ★★★ */
left: 68%;  /* 0.5% 右に移動 */
    bottom: 23%; /* 0.5% 上に移動 */
    width: 18.75%; /* 元の扉 #door と全く同じ幅 */
    height: 41.67%; /* 元の扉 #door と全く同じ高さ */
    
    z-index: 40; /* 扉より手前 */
}

/* 画像自体のサイズ調整 */
#door-character img {
    /* 親要素(#door-character)のサイズに画像をぴったり合わせる */
    width: 100%;
    height: 100%;
    /* 画像の元の比率(328x464)が、コンテナの比率(18.75% x 41.67%)とズレるため、
       この設定だと画像が少し歪む可能性がありますが、まずはこの方法を試します。*/
    object-fit: fill; /* 領域に合わせて画像をストレッチ */
}


/* --- ★追加: ベッドの位置設定 ★ --- */
#bed {
    position: absolute;
    z-index: 20; /* キャラクター(18)より奥に配置 */
    
    /* 🚨 位置の調整 */
    left: 13%;       /* 画面左寄り */
    bottom: -7%;    /* 下端に近い位置 */
    
    /* 🚨 サイズの調整 (例: 300px / 800px = 37.5%, 200px / 600px = 33.33%) */
    width: 37.5%;
    height: 33.33%;
    
    background-image: url('img/bed.gif'); /* ⬅️ ファイル名を指定 */
    background-size: contain;
    background-repeat: no-repeat;
}






/* キャラクター紹介用スタイル */
.char-content {
    display: flex;
    flex-direction: column;
    gap: 20px; /* キャラごとの隙間 */
}

.char-entry {
    border-bottom: 1px dashed #999;
    padding-bottom: 15px;
}

.char-header-row {
    display: flex;
    align-items: center;
    gap: 15px; /* 画像と名前の隙間 */
    margin-bottom: 8px;
}

.char-thumb {
    width: 48px;
    height: 48px;
    border: 1px solid #000;
    background: #fff;
    image-rendering: pixelated;
}

.char-name {
    font-size: 1.2rem;
    margin: 0;
}

.char-desc {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
    padding-left: 5px;
}

/* ウィンドウが重ならないように少しずらす */
#char-window {
    z-index: 601;
}


/* --- ★追加: ウィンドウ内部の統一デザイン --- */

/* アバウトページなどのセクション区切り */
.info-section {
    border-bottom: 1px dashed #999;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
/* 最後のセクションは線を消す */
.info-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* 見出しのデザイン（キャラ名と同じ雰囲気） */
.info-title {
    color: #000080;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
}

/* ゲームエリアの配置微調整 */
#game-area {
    /* 横幅いっぱいではなく、少し余白を持たせる */
    width: 95%;
    height: 200px;
    margin: 0 auto 15px auto; /* 上 左右(自動) 下 */
    
    /* 枠線と背景 */
    border: 2px solid #000080;
    background-image: url('img/game-bg.gif');
    background-size: cover;
    background-position: center;
    
    position: relative;
    overflow: hidden;
    cursor: crosshair;
}

/* ゲーム情報のテキスト調整 */
#game-info {
    text-align: center;
    background-color: #eee;
    padding: 8px;
    border-radius: 4px;
    font-weight: bold;
    display: flex;
    justify-content: space-around;
    align-items: center;
}


/* --- ★追加: ウィンドウコンテンツ内の最後の要素のマージンをリセットし、縦幅を安定させる★ --- */
.window-content p:last-child {
    margin-bottom: 0;
}



/* =========================================
   📱 スマホ専用の強制レイアウト修正 (最終決定版)
   ========================================= */
@media (max-width: 600px) {

    /* 1. 全ウィンドウ共通: 画面中央に、中身に合わせて表示 */
    .mini-window {
        width: 90vw !important;       /* 幅は画面の90% */
        height: auto !important;      /* 高さは中身なり */
        max-height: 80vh !important;  /* ただし画面の80%は超えない */
        
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        
        /* 余計な最小・最大制限を解除 */
        min-width: auto !important;
        min-height: auto !important;
    }

    /* 2. ゲームウィンドウ特有の修正 */
    #game-window {
        /* PC版の高さ固定(50vh)を打ち消して、中身に合わせる */
        height: auto !important; 
    }

    /* 3. 中身が溢れたらスクロール */
    .window-content {
        max-height: 70vh !important;
        overflow-y: auto !important;
        padding: 15px !important; /* スマホで見やすい余白 */
    }
    
    /* 4. ヘッダーのズレ補正をリセット */
    .window-header {
        margin-top: 0 !important;
    }
}



/* --- body (すでに存在するCSS) --- */
/* ... */

/* --- ★追加: 時間帯ごとの背景設定 --- */
body.time-morning {
    background-color: #87ceeb; /* 空色 */
}

body.time-day {
    background-color: #333; /* 元の夜の色（昼はサンドボックスの背景色で目立たなくする） */
}

body.time-evening {
    background-color: #555; /* 夕焼けっぽい濃い色 */
}

/* --- #room-background の画像設定 (元々あるものに追記) --- */
#room-background {
    /* ... (元の設定を維持) ... */
    background-size: cover;
    z-index: 10;
}

/* ★追加: 部屋の背景画像の切り替えクラス ★ */
#room-background.morning-bg {
    background-image: url('img/back-morning.gif'); 
}
#room-background.day-bg {
    background-image: url('img/back-day.gif'); /* 昼は既存の背景を使う */
}
#room-background.evening-bg {
    background-image: url('img/back-evening.gif');
}



/* --- 好感度表示専用のスタイル --- */
/* 他のメニューアイテムと区別し、視覚的に目立たせる */
#affinity-display-kaito,
#affinity-display-shiki {
    /* 1. 見た目の調整 */
    padding: 5px 8px; /* 内側の余白を少し調整 */
    margin: 0px; /* 左右の余白を微調整 */
    
    /* 2. 背景と境界線 */
    /* 背景色をメニューバーの背景から少し変えて、区切りを明確に */
    background-color: rgba(255, 255, 255, 0.15); 
    border: 1px solid rgba(255, 255, 255, 0.3); /* 薄い枠線で囲む */
    border-radius: 4px; /* 角を軽く丸める */
    
    /* 3. テキストの調整 */
    color: #ec6d71; /* 目立つ色（ゴールドなど）に変更 */
    font-weight: bold;
    font-size: 0.6em; /* 周辺のアイテムより少し小さめに */
    white-space: nowrap; /* 項目が折り返されないように */
    
    /* 4. flexコンテナ内での位置 */
    flex-grow: 0; /* スペースを均等に広げない */
}

/* --- 好感度表示専用のスタイル (海人くんの表示に左マージンを追加) --- */
#affinity-display-kaito {
    /* ... 既存のスタイルを維持 ... */
    
    /* 左側にマージンを追加して、全体を右に寄せる */
    margin-left: 15px; /* 例として10px追加します。この数値を調整してください */
    
    /* 左右の余白は統一感を出すために維持 */
    margin-right: 4px; /* 識くんとの間の余白 */
}

/* --- 識くんの表示 (海人くんとの間に余白を追加するだけ) --- */
#affinity-display-shiki {
    /* ... 既存のスタイルを維持 ... */

    /* 右側の余白は隣のメニューアイテムとの隙間用として維持 */
    margin-right: 8px; /* 好感度表示群とメニューアイテムの間の余白 */
    
    /* 海人くんとの間は近付けるために左マージンは小さく */
    margin-left: 4px;
}

/* --- 秘密の扉 (#secret-door) の最終スタイル --- */
#secret-door {
    position: absolute;
    z-index: 550; 
    cursor: default; /* ロック中はカーソルを変えない */

    /* 位置設定 (以前の設定を維持) */
    left: 30%; 
    bottom: 60%;
    
    /* サイズ設定 (通常の扉との統一感を考慮) */
    width: 18%;   
    height: 35%;  
    
    /* 背景画像を適用 */
    background-image: url('img/secret-door.gif'); 
    background-size: contain;         
    background-repeat: no-repeat;
    background-position: center bottom; /* ドアの下端を合わせる */
    }

/* 好感度MAXでロック解除されたとき */
#secret-door.is-open {
    cursor: pointer;
    /* (オプション) 解放後の画像に切り替えるCSSは後で追加可能 */
}

/* --- 秘密の扉 (#secret-door) のロック状態 --- */
#secret-door.is-locked {

    pointer-events: none; 
    cursor: default;
    display: none;
}