/* --- CSS Reset & Global --- */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    overflow: hidden;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

/* アプリ全体コンテナ */
#app-root {
    display: flex;
    flex-direction: column;
    justify-content: center; /* ★垂直方向に中央寄せに変更 */
    position: relative;          /* ★子要素のabsolute配置の基準点にする */
    width: 100%;
    max-width: 480px;            /* ★PCでもこの幅を守る */
    margin: 0 auto;
    min-height: 100vh;           /* 最小限の高さを確保 */
    overflow: hidden;            /* 全体はスクロールさせない */
    box-shadow: 0 0 50px rgba(0,0,0,0.5); 
    background-color: #111;
}

/* 音量コントロール */
#volume-control {
    flex: 0 0 30px;
    width: 100%;
    background: #111;
    color: #fff;
    display: flex; /* Flexboxを使用 */
    justify-content: center;
    align-items: center;
    font-size: 11px;
    z-index: 10001; /* extra-containerより手前に表示 */
}

/* 中央コンテンツエリア (ゲームUIとエクストラモードUIを切り替える場所) */
#central-content-area {
    flex: 1; /* 残りの高さを全て占める */
    position: relative; /* 子要素のabsolute配置の基準点 */
    width: 100%; /* 親の幅に合わせる */
    max-width: 450px; /* ゲーム画面の最大幅に合わせる */
    height: calc(100vh - 90px); /* ボリュームとシステムボタンを除いた高さ */
    margin: 0 auto; /* 中央寄せ */
    overflow: hidden; /* 内部でスクロールを制御 */
}

/* ゲームUIグループ (ゲーム画面 + メッセージ + インベントリ) */
#game-ui-group {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex; /* 内部要素を縦に並べる */
    flex-direction: column; /* 子要素を縦に並べる */
    justify-content: center; /* 垂直方向中央寄せ */
    align-items: center; /* 水平方向中央寄せ */
    /* z-index は extra-container との切り替えで制御されるため、ここでは不要 */
}

/* ゲームラッパー */
#game-wrapper {
    transform-origin: center center; 
    box-shadow: 0 0 20px #000; 
    width: 450px !important; /* 480pxから450pxへ */
    height: 350px !important;
    overflow: hidden;
    position: relative;
    /* margin: 0 auto; は親の align-items: center で代替 */
    flex-shrink: 0; /* 縮まない */
}

/* --- 2. メッセージエリア --- */
#game-ui-group > #ui-message-area {
    flex: 0 0 120px; /* 150px -> 120px */
    width: 100%;
    padding: 10px;
    background-color: #222;
    border-top: 1px solid #444;
    max-width: 450px; /* game-wrapperの幅に合わせる */
    margin: 0 auto; /* 中央寄せ */
}

#message-window {
    width: 100% !important;
    height: 100% !important;
    background-color: #EDFFFF !important;
    border: 4px solid #000 !important;
    border-radius: 6px;
    color: #000 !important;
    padding: 10px !important;
    font-size: 16px !important;
    font-weight: normal;
    text-align: left !important;
    display: block !important;
}

#message-text {
    margin: 0;
    padding: 0;
}

/* --- 3. アイテムエリア --- */
#game-ui-group > #ui-inventory-area {
    flex: 0 0 90px; /* 100px -> 90px */
    width: 100%;
    padding: 5px 10px;
    background-color: #333;
    position: relative; /* スクロールボタン配置のため */
    user-select: none;
    -webkit-user-select: none;
}

#item-box {
    width: 100% !important;
    height: 100% !important;
    background-color: #CDCDCD !important;
    border: 4px solid #000 !important;
    border-radius: 6px;
    display: flex;
    justify-content: flex-start; /* 左詰めにする */
    flex-wrap: nowrap; /* 折り返さない */
    overflow-x: scroll; /* 横スクロールを有効化 */
    align-items: center;
    gap: 10px;
    padding: 0 10px; /* スクロール時の左右の余白 */
    /* スクロールバーを非表示にする */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
#item-box::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.item-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    margin: 0 5px;
    cursor: pointer;
    transition: transform 0.1s;
    -webkit-user-drag: none;
}

.item-icon.selected {
    border-color: #0099ff;
    background-color: rgba(0, 153, 255, 0.2);
    box-shadow: 0 0 10px #0099ff;
    transform: scale(1.1);
}

.item-icon.used-item {
    opacity: 0.25;
    pointer-events: none;
    cursor: default;
    background-color: transparent !important;
}

@keyframes itemUpdated {
    0%, 100% { transform: scale(1); filter: brightness(1); box-shadow: none; }
    50% { transform: scale(1.1); filter: brightness(1.5); box-shadow: 0 0 15px #ff0; border-radius: 8px; }
}
.item-updated {
    animation: itemUpdated 0.5s ease-in-out 4;
    z-index: 10;
}

.item-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 25px;
    height: 50px;
    background: rgba(0,0,0,0.4);
    color: white;
    border: 1px solid #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: none; /* JSで表示制御 */
}

#item-scroll-left {
    left: 15px;
}
#item-scroll-right {
    right: 15px;
}

/* --- 4. システムボタン --- */
#ui-system-area {
    flex: 0 0 60px; /* 固定 */
    width: 100%;
    background-color: #111;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    gap: 10px;
    /* position: relative; は不要、app-root の子要素として flex item になる */
    z-index: 10001; /* extra-containerより手前に表示 */
}

.sys-btn {
    flex: 1;
    height: 44px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid #666;
    background: #444;
    color: #fff;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* 無効化ボタンのスタイル */
.disabled-btn {
    opacity: 0.3 !important;
    pointer-events: none !important;
    background-color: #222 !important;
    color: #555 !important;
    border-color: #333 !important;
    cursor: default !important;
}

/* --- 5. アイテム詳細モーダル --- */
#item-detail-overlay {
    position: absolute; /* game-wrapperを基準にする */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* 背景を少し透過させる */
    display: none; /* JSで制御 */
    justify-content: center;
    align-items: center;
    z-index: 100; /* ゲーム画面内の他のUIより手前 */
}

#item-detail-modal {
    position: relative;
    background-color: rgba(150, 150, 255, 0.7); /* 半透明の青紫背景 */
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #fff; /* 白線 */
    width: 90%; /* game-wrapperに対する割合 */
    height: 90%; /* game-wrapperに対する割合 */
    display: flex;
    justify-content: center;
    align-items: center;
}

#item-detail-image {
    max-height: 100%; /* モーダル内に収まるように */
    max-width: 100%;  /* モーダル内に収まるように */
    object-fit: contain;
    cursor: pointer;
    transform: scale(1.5); /* アイテムを1.5倍に拡大表示 */
}

#item-detail-image.zoomed-back {
    transform: scale(2.5); /* 裏面確認時はさらに拡大 */
}

#item-detail-image.zoomed-memo {
    transform: scale(3.25); /* メモは更に拡大 */
}

/* アイテム詳細画面のカスタムUIレイヤー */
#item-detail-custom-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* 下の画像クリックを妨げないように */
}

/* 詳細画面内のカスタムボタン */
.detail-custom-btn {
    position: absolute;
    pointer-events: auto;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid white;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}
.detail-custom-btn:hover { background: rgba(0, 0, 0, 0.8); }

.btn-top-left { top: 10px; left: 10px; }
.btn-top-right { top: 10px; right: 10px; }

/* 壊れたフィギュアのつまみ */
.obj-knob-detail {
    position: absolute;
    pointer-events: auto;
    right: 20%; bottom: 20%; /* 右下に配置 */
    width: 60px; height: 60px;
    background: url('assets/images/item_knob.svg?v=1.0.0') no-repeat center center / contain;
    cursor: pointer;
    animation: bounce 2s infinite;
}

#item-detail-close-btn {
    position: absolute; top: -15px; right: -15px; width: 36px; height: 36px; border-radius: 50%; background: #ff4500; color: white; border: 2px solid white; font-size: 20px; font-weight: bold; cursor: pointer; line-height: 32px; text-align: center;
}

/* メモ詳細画面用 */
.memo-content-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    border: 2px solid #000;
}

.memo-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto; /* クリック可能にする */
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}
.memo-nav-btn:hover { background: rgba(0, 0, 0, 0.8); }
.memo-prev { left: 10px; }
.memo-next { right: 10px; }

.memo-page-num {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background: rgba(0,0,0,0.5);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 14px;
}

/* --- ゲーム内スタイル --- */
#game-container {
    position: relative;
    width: 100%; height: 100%;
    background-color: #f0f0f0;
    overflow: hidden;
    user-select: none;
    touch-action: manipulation;
}

.game-view {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: none;
}
.game-view.active { 
    display: block; 
}
/* 新しいビューの背景を設定 */
#View_Kitchen {
    background: #f0f0f0 url('assets/images/bg_kitchen.svg?v=1.0.0') center center/cover no-repeat;
}
#View_Study {
    background: #f0f0f0 url('assets/images/bg_study.svg?v=1.0.0') center center/cover no-repeat;
}
#View_Warehouse {
    background: #f0f0f0 url('assets/images/bg_warehouse.svg?v=1.0.0') center center/cover no-repeat;
}
#View_Warehouse {
    background: #f0f0f0 url('assets/images/bg_warehouse.svg?v=1.0.0') center center/cover no-repeat;
}
/* 状態によって表示が変わるオブジェクトのスタイル */
.game-object {
    position: absolute;
    cursor: pointer;
}

/* Zoom View */
.zoom-view {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none; /* JSで制御 */
    z-index: 20; /* On top of main view */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#Zoom_Cupboard_L { background-image: url('assets/images/bg_zoom_cupboard_l.svg?v=1.0.0'); }
/* ★新しいズームビューの背景を定義 */
#Zoom_Cupboard_R_Open { background-image: url('assets/images/bg_zoom_cupboard_r_key_open.svg?v=1.0.0'); }
#Zoom_Medal_Panel { background-image: url('assets/images/bg_zoom_cupboard_r_medal_panel.svg?v=1.0.0'); }
#Zoom_Medal_Panel_Open { background-image: url('assets/images/bg_zoom_cupboard_r_medal_panel_open.svg?v=1.0.0'); }
#Zoom_Fridge_Top { background-image: url('assets/images/bg_zoom_fridge_top.svg?v=1.0.0'); }
#Zoom_Fridge_Bottom { background-image: url('assets/images/bg_zoom_fridge_bottom.svg?v=1.0.0'); }
#Zoom_Upper_L_Locked  { background-image: url('assets/images/bg_zoom_upper_l_locked.svg?v=1.0.0'); }
#Zoom_Upper_L { background-image: url('assets/images/bg_zoom_upper_l.svg?v=1.0.0'); }
#Zoom_Upper_R_Locked { background-image: url('assets/images/bg_zoom_upper_r_locked.svg?v=1.0.0'); }
#Zoom_Upper_R_Open { background-image: url('assets/images/bg_zoom_upper_r_open.svg?v=1.0.0'); }
#Zoom_Desk_Drawer_Top { background-image: url('assets/images/bg_zoom_drawer_top.svg?v=1.0.0'); /* 仮: 入力用画像ができたら差し替え */ }
#Zoom_Desk_Drawer_Top_Open { background-image: url('assets/images/bg_zoom_drawer_top_open.svg?v=1.0.0'); }
#Zoom_Desk_Drawer_Bottom { background-image: url('assets/images/bg_zoom_drawer_bottom.svg?v=1.0.0'); }
#Zoom_Desk_Box { background-image: url('assets/images/bg_zoom_desk_box_open.svg?v=1.0.0'); }
#Zoom_Poster { background-image: url('assets/images/bg_zoom_poster.svg?v=1.0.0'); }
#Zoom_Memo_Blank { background-image: url('assets/images/bg_zoom_memo_blank.svg?v=1.0.0'); }
#Zoom_Memo_Revealed { background-image: url('assets/images/bg_zoom_memo_revealed.svg?v=1.0.0'); }
#Zoom_Shelf_Back { background-image: url('assets/images/bg_zoom_shelf_back.svg?v=1.0.0'); } /* 真エンド用 */
/* --- Kitchen Objects (Added for ANOTHER 6) --- */

/* 取得可能アイテム：そば粉 */
#obj-item-soba {
    background-image: url('assets/images/obj_upper_l_soba.svg?v=1.0.0');
    position: absolute;
    left: 165px;
    top: 180px;
    width: 120px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}
/* JSで state に応じて display: block/none を切り替える想定 */

/* 取得可能アイテム：チョコ (ズームビュー内) */
#obj-item-choco {
    display: block; /* 親の.zoom-viewで表示制御 */
    left: 160px; top: 200px; width: 120px; height: 90px;
    background: url('assets/images/item_choco.svg?v=1.0.0') no-repeat center center / contain;
}

/* 冷蔵庫の上のフィギュア */
#obj-kitchen-figure {
    display: block;
    left: 0px; top: 0px; width: 450px; height: 350px;
    background-image: url('assets/images/obj_kitchen_figure_on_fridge.svg?v=1.0.0');
    pointer-events: none; /* 背景全体を覆うため、クリックイベントを透過させる */
}

/* 破壊されたフィギュア */
#obj-kitchen-figure-broken {
    display: none;
    left: 0px; top: 0px; width: 450px; height: 350px;
    background-image: url('assets/images/obj_kitchen_figure_broken.svg?v=1.0.0');
    pointer-events: none; /* 背景全体を覆うため、クリックイベントを透過させる */
}

/* 床に落ちたつまみ */
#obj-kitchen-knob-floor {
    display: none;
    left: 366px; top: 305px; width: 18px; height: 18px;
    background: url('assets/images/obj_knob_floor.svg?v=1.0.0') no-repeat center center / contain;
}

/* コンロ：つまみ無し */
#obj-kitchen-stove-off {
    display: block; /* 初期状態で表示 */
    left: 0px; top: 0px; width: 450px; height: 350px;
    background-image: url('assets/images/obj_kitchen_stove_off.svg?v=1.0.0');
    pointer-events: none;
}

/* コンロ：つまみ有り（OFF） */
#obj-kitchen-stove-knob {
    display: none;
    left: 0px; top: 0px; width: 450px; height: 350px;
    background-image: url('assets/images/obj_kitchen_stove_knob.svg?v=1.0.0');
    pointer-events: none;
}

/* コンロ：つまみ有り（ON） */
#obj-kitchen-stove-knob02 {
    display: none;
    left: 0px; top: 0px; width: 450px; height: 350px;
    background-image: url('assets/images/obj_kitchen_stove_knob02.svg?v=1.0.0');
    pointer-events: none;
}

/* コンロ：火 */
#obj-kitchen-stove-fire {
    display: none;
    left: 0px; top: 0px; width: 450px; height: 350px;
    background-image: url('assets/images/obj_kitchen_stove_fire.svg?v=1.0.0');
    pointer-events: none;
}

/* 水道から流れる水 */
#obj-kitchen-water-flow {
    display: none; /* JSで制御 */
    left: 0px; top: 0px; width: 450px; height: 350px;
    background-image: url('assets/images/obj_kitchen_water_flow.svg?v=1.0.0');
    pointer-events: none;
}

/* コンロに置かれた鍋 */
#obj-kitchen-pot-on-stove {
    display: none; /* JSで制御 */
    left: 0px; top: 0px; width: 450px; height: 350px;
    background-image: url('assets/images/obj_kitchen_pot_on_stove.svg?v=1.0.0');
    pointer-events: none;
}

/* 取得可能アイテム：おなべ (ズームビュー内) */
#obj-item-pot {
    display: block; /* 親の.zoom-viewで表示制御 */
    /* 見た目の位置を優先し、当たり判定はgame-config.jsで調整 */
    left: 175px; top: 200px; width: 100px; height: 100px;
    background: url('assets/images/obj_kitchen_pot_on_shelf.svg?v=1.0.0') no-repeat center center / contain;
}

/* 取得可能アイテム：クレヨン */
#obj-kitchen-crayon {
    display: block; /* 初期状態で表示 */
    left: 7px; top: 313px; width: 52px; height: 23px;
    background: url('assets/images/obj_kitchen_crayon_on_floor.svg?v=1.0.0') no-repeat center center / contain;
}

/* 取得可能アイテム：メダル（☆） */
#obj-kitchen-medal-star {
    display: block; /* 初期状態で表示 */
    left: 303px; top: 261px; width: 28px; height: 28px;
    background: url('assets/images/obj_kitchen_medal_star_in_gap.svg?v=1.0.0') no-repeat center center / contain;
}

/* 取得可能アイテム：メダル（○） (ズームビュー内) */
#obj-item-medal-circle {
    display: block;
    left: 190px; top: 206px; width: 74px; height: 74px; /* 元に戻す */
    background: url('assets/images/obj_medal_circle.svg?v=1.0.0') no-repeat center center / contain;
}

/* 取得可能アイテム：メダル（△） (ズームビュー内) */
#obj-item-medal-triangle {
    display: block; /* 親の.zoom-viewで表示制御 */
    left: 190px; top: 80px; width: 70px; height: 70px; /* 位置を少し調整 */
    background: url('assets/images/obj_medal_tri.svg?v=1.0.0') no-repeat center center / contain;
}

/* 取得可能アイテム：メダル（無） (ズームビュー内) */
#obj-item-medal-blank {
    display: block; /* 親の.zoom-viewで表示制御 */
    left: 190px; top: 215px; width: 70px; height: 70px;
    background: url('assets/images/obj_medal_blank.svg?v=1.0.0') no-repeat center center / contain;
    /* 当たり判定は game-config.js の item_medal_blank で定義 */
}

/* 取得可能アイテム：カギ（紫） (ズームビュー内) */
#obj-item-key-purple {
    display: block; /* 親の.zoom-viewで表示制御 */
    left: 200px; top: 240px; width: 50px; height: 50px;
    background: url('assets/images/item_key_03_purple.svg?v=1.0.0') no-repeat center center / contain;
    /* 当たり判定は game-config.js の item_key_purple で定義 */
}

/* メダルパネルにはめられたメダル */
.placed-medal {
    position: absolute;
    display: none; /* JSで制御 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; /* クリックは背後のhitboxで判定 */
}

/* 各スロットの位置をhitboxに合わせて定義 */
#obj-medal-in-slot-1 { left: 80px; top: 150px; width: 50px; height: 50px; }
#obj-medal-in-slot-2 { left: 140px; top: 150px; width: 50px; height: 50px; }
#obj-medal-in-slot-3 { left: 200px; top: 150px; width: 50px; height: 50px; }
#obj-medal-in-slot-4 { left: 260px; top: 150px; width: 50px; height: 50px; }
#obj-medal-in-slot-5 { left: 320px; top: 150px; width: 50px; height: 50px; }

/* ポスター拡大画像 (ズームビュー内) */
#poster_graphic {
    display: block;
    left: 50px; top: 20px; width: 350px; height: 310px;
    /* 画像は親の背景(bg_zoom_poster.svg)で表示される想定ですが、必要であればここに指定 */
}

/* 取得可能アイテム：メダル（□） (ズームビュー内) */
#obj-item-medal-square {
    display: block; /* 親の.zoom-viewで表示制御 */
    left: 190px; top: 80px; width: 70px; height: 70px; /* こちらを修正 */
    background: url('assets/images/obj_medal_square.svg?v=1.0.0') no-repeat center center / contain;
    /* 当たり判定は game-config.js の item_medal_square で定義 */
}

/* --- Study Objects --- */
/* 箱の中の赤いカギ */
#obj-desk-box-key-red {
    display: block;
    /* 見た目の位置を優先し、当たり判定はgame-config.jsで調整 */
    left: 185px; top: 135px; width: 80px; height: 80px;
    background: url('assets/images/obj_desk_box_key_red.svg?v=1.0.0') no-repeat center center / contain;
}

/* ドライバー */
#obj-study-driver {
    display: block;
    left: 189px; top: 286px; width: 32px; height: 32px;
    background: url('assets/images/obj_study_driver.svg?v=1.0.0') no-repeat center center / contain;
}

/* 茶色のカギ */
#obj-study-key-brown {
    display: block;
    left: 2px; top: 262px; width: 26px; height: 26px;
    background: url('assets/images/obj_study_key_brown.svg?v=1.0.0') no-repeat center center / contain;
}

/* 机の上の木箱 */
#obj-study-box01,
#obj-study-box02 {
    display: none; /* JSで制御 */
    position: absolute;
    left: 0; top: 0; width: 450px; height: 350px;
    background-repeat: no-repeat;
    pointer-events: none; /* クリックはhitboxで判定するため透過させる */
}
#obj-study-box01 {
    background-image: url('assets/images/obj_study_box01.svg?v=1.0.0');
}
#obj-study-box02 {
    background-image: url('assets/images/obj_study_box02.svg?v=1.0.0');
}

/* サイドテーブルのメモ */
#obj-study-memo01,
#obj-study-memo02 {
    display: none; /* JSで制御 */
    position: absolute;
    left: 0; top: 0; width: 450px; height: 350px;
    background-repeat: no-repeat;
    pointer-events: none; /* クリックはhitboxで判定するため透過させる */
}
#obj-study-memo01 { background-image: url('assets/images/obj_study_memo01.svg?v=1.0.0'); }
#obj-study-memo02 { background-image: url('assets/images/obj_study_memo02.svg?v=1.0.0'); }

/* --- Warehouse Objects --- */
/* 壁のハシゴ */
#obj-ladder-on-wall {
    display: block;
    left: 236px;
    top: 68px;
    width: 227px;
    height: 248px;
    background: url('assets/images/obj_warehouse_ladder.svg?v=1.0.0') no-repeat center center / contain; /* アスペクト比を維持 */
    /* 当たり判定は hitbox_data.json の ladder_wall で定義 */
}

/* 高い棚の氷の塊 (ズームビュー内) */
#obj-item-ice-box {
    display: block;
    left: 178px; top: 121px; width: 97px; height: 75px;
    background: url('assets/images/obj_warehouse_ice_box.svg?v=1.0.0') no-repeat center center / contain;
    /* 当たり判定は hitbox_data.json の item_ice_box で定義 */
}

/* 高い棚の氷の塊 (倉庫ビュー内) */
#obj-ice-box-on-shelf {
    display: block;
    left: 70px; top: 10px; width: 80px; height: 60px;
    background: url('assets/images/obj_warehouse_ice_box.svg?v=1.0.0') no-repeat center center / contain;
    pointer-events: none; /* クリックは背後のhigh_shelfで判定 */
}

/* ナビゲーションボタン */
.nav-btn {
    position: absolute;
    z-index: 21; /* ズームビュー(20)より手前に表示 */
    background: rgba(0,0,0,0.5);
    color: white;
    border: 1px solid #fff;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

#nav-left, #nav-right {
    /* 左右矢印の共通スタイル */
    width: 40px;
    height: 60px;
    font-size: 1.5rem;
    /* hitbox_data.jsonのy:156, h:40の中心に合わせる */
    top: 146px; /* 156 + 20 - 30 */
}

#nav-left {
    /* hitbox_data.jsonのx:2に合わせる */
    left: 5px;
}

#nav-right {
    /* hitbox_data.jsonのx:421に合わせる */
    right: 5px;
}

#btn-return {
    /* hitbox_data.json の back_button (x:205, y:320, w:43, h:26) を参考に配置 */
    left: 205px;
    top: 320px;
    width: 43px;
    height: 26px;
    font-size: 1rem;
}

/* --- ムービー用要素 --- */
#cutscene-char {
    position: absolute;
    left: 50%;
    bottom: -70px; /* 全員共通の床位置（少しはみ出す） */
    height: 400px; /* ベースの高さ */
    width: auto;   /* アスペクト比維持 */
    object-fit: contain;
    display: none; /* JSで制御 */
    z-index: 10;
    transform-origin: bottom center; /* 足元基準で拡大縮小 */
    --char-scale: 1; /* デフォルトスケール */
    transform: translateX(-50%) scale(var(--char-scale));
}

/* キャラクター別スケール調整 */
/* --char-y-new: HTML5版の上下位置調整 (マイナスで上へ、プラスで下へ) */
#cutscene-char.char-gas,    .new-version img.char-gas,    .chara-img.char-gas    { --char-scale: 1.4; --char-y-new: -35px; }
#cutscene-char.char-tencho, .new-version img.char-tencho, .chara-img.char-tencho { --char-scale: 1.5; --char-y-new: -35px; }
#cutscene-char.char-makaimon, .new-version img.char-makaimon, .chara-img.char-makaimon { --char-scale: 1.2; --char-y-new: 0px; }
#cutscene-char.char-wanpa,  .new-version img.char-wanpa,  .chara-img.char-wanpa  { --char-scale: 1.0; --char-y-new: 0px; }
#cutscene-char.char-shiori, .new-version img.char-shiori, .chara-img.char-shiori { --char-scale: 0.9; --char-y-new: 0px; }
#cutscene-char.char-himajin, .new-version img.char-himajin, .chara-img.char-himajin { --char-scale: 0.9; --char-y-new: -30px; }

/* Flash版 (Old Version) キャラクター別スケール調整 */
/* --char-y-old: Flash版の上下位置調整 (マイナスで上へ、プラスで下へ) */
.old-version img.char-gas      { --char-scale: 1.1; --char-y-old: 0px; }
.old-version img.char-tencho   { --char-scale: 1.1; --char-y-old: 0px; }
.old-version img.char-makaimon { --char-scale: 0.85; --char-y-old: -15px; }
.old-version img.char-wanpa    { --char-scale: 0.9; --char-y-old: -10px; }
.old-version img.char-shiori   { --char-scale: 0.9; --char-y-old: 0px; }
.old-version img.char-himajin  { --char-scale: 0.9; --char-y-old: 0px; }

#cutscene-next-btn {
    display: none; /* JSで制御 */
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 11;
    width: 120px;
    height: 40px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid #007799;
    background: linear-gradient(to bottom, #87ceeb, #4682b4);
    color: white;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    cursor: pointer;
    transition: background 0.2s;
}

#cutscene-skip-btn {
    display: none; /* JSで制御 */
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 12;
    width: 120px;
    height: 40px;
    padding: 0;
    font-size: 16px;
    font-weight: bold;
    border-radius: 20px;
    border: 1px solid #c00070;
    background: linear-gradient(to bottom, #ff80c0, #ff40a0);
    color: white;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    cursor: pointer;
    transition: background 0.2s;
}

#cutscene-next-btn:hover {
    background: linear-gradient(to bottom, #98d8f4, #5a94c8);
}

/* SKIPボタン専用のホバーエフェクト */
#cutscene-skip-btn:hover {
    background: linear-gradient(to bottom, #ff99d0, #ff60b0);
}

/* --- 画面遷移用オーバーレイ --- */
#transition-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 9990; /* start-screenより下、他より上 */
    opacity: 0;
    pointer-events: none;
}

/* 初期ローダー */
#initial-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #B0E0E6; /* スタート画面と同じ背景色 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10002; /* ボリュームやシステムボタン(10001)よりも最前面に配置 */
    /* transitionはgame.jsで動的に設定されます */
}
.loader-content {
    width: 80%;
    max-width: 300px;
    text-align: center;
}
#loader-text {
    color: #333;
    font-size: 2rem;
    margin-bottom: 15px;
}
.pulse-text {
    animation: pulseText 1.5s infinite;
    font-weight: bold;
    cursor: pointer;
}
@keyframes pulseText {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.05); }
}
#loader-bar-container {
    width: 100%;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid #888;
    border-radius: 5px;
    overflow: hidden;
}
#loader-bar {
    width: 0%; /* JSで制御 */
    height: 100%;
    background: linear-gradient(to right, #ff4500, #ff8c00);
    border-radius: 5px;
    /* transitionはgame.jsで動的に設定されます */
}

/* スタート画面 */
#start-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #B0E0E6;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    padding-bottom: 40px; /* ボタン群をさらに下部へ */
    z-index: 9999; /* 最前面に固定 */ color: #333;
    text-align: center;
}
.start-menu-btn {
    padding: 8px 16px; /* さらに小さく */
    font-size: 1rem;
    cursor: pointer;
    background-color: #ff4500; color: white; border: none; border-radius: 5px;
    margin: 5px;
    font-weight: bold;
    width: 160px; /* 幅も小さく */
    position: relative; /* z-indexを効かせるため */
    z-index: 10; /* ロゴ・しおりちゃんより奥（一番下）に配置 */
}
.start-menu-btn.disabled {
    background-color: #888;
    cursor: not-allowed;
}
#title-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 20; /* 最前面に配置 */
}
#char-shiori { position: absolute; left: 10px; bottom: 10%; width: 40%; max-width: 200px; pointer-events: none; transform: scale(1.2); z-index: 15; /* ロゴの下、ボタンの上 */ }
#copyright-notice {
    position: absolute; bottom: 5px; left: 0; width: 100%; text-align: center; font-size: 12px; color: #5f6c6f;
}

/* クリア画面 */
#clear-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: transparent;
    display: none; flex-direction: column; justify-content: center; align-items: center;
    z-index: 9991; /* transition-overlay(9990) より上 */
}
#clear-msg { font-size: 2rem; font-weight: bold; color: #ff4500; margin-bottom: 20px; }
.cta-btn {
    display: block; width: 220px; padding: 12px; margin: 10px 0;
    text-align: center; text-decoration: none; color: white;
    border-radius: 5px; font-weight: bold; font-size: 1rem; border: none; cursor: pointer;
}
#share-btn { background-color: #000; }
#clear-title-btn { background-color: #666; }

/* アニメーション定義（復元） */
@keyframes shake {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-1px, -1px); }
    20% { transform: translate(-2px, 0px); }
    30% { transform: translate(2px, 1px); }
    40% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    60% { transform: translate(-2px, 0px); }
    70% { transform: translate(2px, 0px); }
    80% { transform: translate(-1px, -1px); }
    90% { transform: translate(1px, 1px); }
    100% { transform: translate(0, 0); }
}
.shake-effect {
    animation: shake 0.5s; /* 0.3sから0.5sに戻して余韻を持たせる */
}

@keyframes flash-red {
    0% { background-color: rgba(255, 69, 0, 0); }
    50% { background-color: rgba(255, 69, 0, 0.4); }
    100% { background-color: rgba(255, 69, 0, 0); }
}
.fire-effect {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 20; animation: flash-red 0.5s;
}

/* デバッグ用 */
#debug-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* Clicks pass through */
    z-index: 9000;
}
.debug-hitbox {
    position: absolute;
    background-color: rgba(255, 0, 0, 0.4);
    border: 1px dashed #ff0000;
}
.debug-hitbox-label {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 12px;
    padding: 1px 3px;
    white-space: normal; /* 折り返しを許可 */
    line-height: 1.2;
    z-index: 1;
}

/* デバッグ用フラグエディタ */
#debug-flag-editor {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background-color: rgba(0, 0, 0, 0.85);
    color: #0f0;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    z-index: 9001; /* hitbox overlayより手前 */
    display: none; /* JSで制御 */
    border: 1px solid #0f0;
    padding: 10px;
    overflow-y: scroll;
}
#debug-flag-editor h3 {
    margin-top: 0;
    border-bottom: 1px solid #0f0;
    padding-bottom: 5px;
}
#debug-flag-editor .flag-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
#debug-flag-editor .flag-item input {
    background: #222;
    color: #0f0;
    border: 1px solid #090;
    font-family: inherit;
    font-size: inherit;
}

/* --- パスワード入力UI (CSS描画) --- */
#password-input-ui {
    position: absolute;
    top: 80px; left: 0; width: 100%; height: 170px;
    pointer-events: none; /* クリックは背後のHitboxで判定するため透過 */
    
    /* Flexboxレイアウトに変更 */
    display: flex;
    justify-content: center;
    gap: 20px;
}

.pass-digit-col {
    /* 絶対配置をやめてFlexアイテムにする */
    position: relative;
    top: auto !important;
    left: auto !important; /* JSによる配置を無効化 */
    
    width: 54px; height: 170px;
    display: flex; flex-direction: column; justify-content: space-between; align-items: center;
    margin-left: 0; /* 個別の位置調整をリセット */
}

.pass-btn-up, .pass-btn-down {
    width: 54px; height: 48px; /* 幅をカラム幅に合わせる */
    background-color: transparent;
    background-image: url('assets/images/obj_password_button_tri.svg?v=1.0.0');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    box-shadow: none;
    color: transparent; /* 元のテキスト(▲▼)を透明にして隠す */
    cursor: pointer;
    transform-origin: center; /* 回転の中心を明示 */
}

/* 左向き画像を回転させて上下に向ける */
.pass-btn-up   { transform: rotate(90deg); }
.pass-btn-down { transform: rotate(-90deg); }

.pass-num {
    width: 54px; height: 60px;
    background-color: transparent;
    background-image: url('assets/images/obj_password_number.svg?v=1.0.0');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    color: #000; /* 黒文字 */
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 38px; font-weight: bold;
    display: flex; justify-content: center; align-items: center;
}

/* --- カットシーン用アニメーション --- */
/* キャラクターはデフォルトで translate(-50%, 0) で下端中央配置されているため、それを基準に動かす */

@keyframes slideInLeft { from { transform: translate(-150%, 0) scale(var(--char-scale)); opacity: 0; } to { transform: translate(-50%, 0) scale(var(--char-scale)); opacity: 1; } }
.slide-in-left { animation: slideInLeft 0.5s ease-out forwards; }

@keyframes slideInRight { from { transform: translate(50%, 0) scale(var(--char-scale)); opacity: 0; } to { transform: translate(-50%, 0) scale(var(--char-scale)); opacity: 1; } }
.slide-in-right { animation: slideInRight 0.5s ease-out forwards; }

@keyframes fadeInCenter { from { opacity: 0; transform: translate(-50%, 0) scale(calc(var(--char-scale) * 0.9)); } to { opacity: 1; transform: translate(-50%, 0) scale(var(--char-scale)); } }
.fade-in-center { animation: fadeInCenter 0.8s ease-out forwards; }

@keyframes shakeAnim { 0%, 100% { transform: translate(-50%, 0) scale(var(--char-scale)); } 10%, 30%, 50%, 70%, 90% { transform: translate(-52%, 0) scale(var(--char-scale)); } 20%, 40%, 60%, 80% { transform: translate(-48%, 0) scale(var(--char-scale)); } }
.shake { animation: shakeAnim 0.5s; }

@keyframes bounceAnim { 0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0) scale(var(--char-scale)); } 40% { transform: translate(-50%, -20px) scale(var(--char-scale)); } 60% { transform: translate(-50%, -10px) scale(var(--char-scale)); } }
.bounce { animation: bounceAnim 0.8s; }

@keyframes bounceCenter {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, -50%); }
    40% { transform: translate(-50%, calc(-50% - 20px)); }
    60% { transform: translate(-50%, calc(-50% - 10px)); }
}
.bounce-center { animation: bounceCenter 0.8s; }

@keyframes slideOutRight { from { transform: translate(-50%, 0) scale(var(--char-scale)); opacity: 1; } to { transform: translate(150%, 0) scale(var(--char-scale)); opacity: 0; } }
.slide-out-right { animation: slideOutRight 0.5s ease-in forwards; }

@keyframes tiltAnim {
    0% { transform: translate(-50%, 0) scale(var(--char-scale)) rotate(0deg); }
    50% { transform: translate(-50%, 0) scale(var(--char-scale)) rotate(10deg); }
    100% { transform: translate(-50%, 0) scale(var(--char-scale)) rotate(0deg); }
}
.tilt { animation: tiltAnim 1.0s ease-out forwards; }

/* --- Epilogue Styles --- */
.epilogue-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: cover;
    background-position: center;
    display: none; /* Initially hidden */
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: white;
    font-family: 'DotGothic16', sans-serif; /* ドット絵風フォントがあれば適用 */
    z-index: 2000; /* 最前面近く */
}

/* 背景画像を暗くするためのオーバーレイ */
.epilogue-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 背景を70%暗くする */
    z-index: 0;
}

.epilogue-scene {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1; /* オーバーレイより手前に表示 */
}

.epilogue-scene.full-color {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.old-version, .new-version {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45%;
    height: 100%;
    justify-content: flex-start;
    padding-top: 30px;
}

.version-label {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #ccc;
    text-shadow: 1px 1px 2px black;
}

.old-version img {
    filter: sepia(60%) contrast(90%);
    width: 80%;
    max-height: 250px;
    object-fit: contain;
    margin-top: 30px;
    transform: translateY(var(--char-y-old, 0px)) scale(var(--char-scale, 1));
}

.new-version img {
    width: 80%;
    max-height: 250px;
    object-fit: contain;
    transform: translateY(var(--char-y-new, -10px)) scale(var(--char-scale, 1));
}

.cast-text {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5em;
    text-shadow: 2px 2px 4px #000;
    width: 100%;
    text-align: center;
}

.thank-you-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 10px;
    z-index: 1; /* オーバーレイより手前に表示 */
    width: 90%;
}

.thank-you-text p {
    font-size: 1.5em;
    margin: 0;
}

.thank-you-text h2 {
    margin: 10px 0 0;
    font-size: 2.5em;
    color: #FFD700;
}

/* --- Extra Mode --- */
#extra-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; /* 親要素を完全に埋める */
    width: 100%; /* 親要素の幅いっぱいに広がる */
    height: 100%; /* 親要素の高さいっぱいに広がる */
    /* width: auto; height: auto; は不要 */
    background-color: #B0E0E6; /* タイトル画面と同じ水色 */
    z-index: 9999; /* ボリューム/システムボタンより奥、ゲームコンテンツより手前 */
    display: none; /* JSで制御 */
    flex-direction: column;
    color: white;
    height: 100%; /* 親要素の高さいっぱいに広がる */
    /* overflow: hidden; // コンテンツエリアでスクロールを制御するため、ここでは不要 */
}

.extra-content {
    flex: 1;
    /* position: relative; // 親が flex item なので不要 */
    /* overflow: hidden; // スクロールは #extra-mode-content-area で制御 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* コンテンツを上から配置 */
    min-height: 0; /* Flexbox内で子要素のスクロールを有効にするための制限 */
}

/* Extra Mode のコンテンツ表示領域 */
#extra-mode-content-area {
    flex: 1; /* 残りのスペースを全て占める */
    /* overflow-y: auto; */ /* ここではなく、chara-info-areaでスクロールを制御 */
    padding: 10px; /* 必要に応じてパディングを追加 */
    display: flex; /* .extra-content を配置するため */
    flex-direction: column;
    min-height: 0; /* Flexbox内で子要素のスクロールを有効にするための制限 */
    /* align-items: center; // 中央寄せは内部の .extra-content で制御 */
}

/* Extra Menu Hub (キャラ図鑑・ムービー図鑑ボタンのコンテナ) */
.extra-content.menu-hub {
    padding-top: 75px; /* 上部から少し離す */
}

/* Extra Hub */
.extra-hub-btn {
    width: 200px;
    padding: 20px;
    margin: 15px;
    font-size: 1.2rem;
    background: #444;
    color: white;
    border: 2px solid #888;
    border-radius: 10px;
    cursor: pointer;
}
.extra-hub-btn:hover { background: #666; }
/* Extra Mode の共通戻るボタン */
#extra-mode-back-button {
    width: 150px;
    padding: 10px 20px;
    font-size: 1rem;
    margin: 10px auto 20px; /* 中央に配置し、上部に10px、下部に15pxの余白 */
    display: block; /* flex-direction: column の子要素なので block で中央寄せ */
    flex-shrink: 0; /* 縮まないように */
}
#extra-mode-back-button:hover { background: #666; }

.chara-img-area {
    flex: 0 0 50%; /* 高さを親の40%にする */
    min-height: 150px; /* 画面が小さすぎても最低限の高さを確保 */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: rgba(255, 255, 255, 0.3);
    flex-shrink: 0; /* 縮まないように */
}
.chara-img {
    max-height: 90%;
    max-width: 80%;
    object-fit: contain;
    transform: scale(var(--char-scale, 1)) translateY(var(--char-y-new, 0px));
}
.chara-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
}
.chara-prev { left: 10px; }
.chara-next { right: 10px; }

.chara-info-area {
    /* height: 180px; // 固定高さを削除 */
    flex: 1; /* 残りのスペースを埋める */
    width: 95%;
    background: rgba(0,0,0,0.5);
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    overflow-y: auto;
    flex-shrink: 1; /* 縮むことも許可 */
    min-height: 50px; /* 最小高さを設定 */
}
.chara-dots {
    height: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0; /* 縮まないように */
    margin-top: 10px; /* 画像とドットの間に少しスペース */
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: #555; }
.dot.active { background: #fff; }
.movie-list {
    width: 100%;
    flex: 1; /* 残りのスペースを埋める */
    overflow-y: auto;
    padding: 10px;
}
.movie-cassette {
    display: flex;
    width: 100%;
    height: 100px;
    background: #333;
    margin-bottom: 10px;
    border: 1px solid #555;
    border-radius: 5px;
    overflow: hidden;
}
.movie-thumb { width: 120px; height: 100%; background: #000; display: flex; justify-content: center; align-items: center; }
.movie-thumb img { max-width: 100%; max-height: 100%; }
.movie-thumb.locked { filter: blur(5px) grayscale(100%); }
.movie-info { width: 240px; padding: 10px; display: flex; flex-direction: column; justify-content: center; }
.movie-title { font-weight: bold; font-size: 1.1rem; margin-bottom: 5px; }
.movie-status { font-size: 0.8rem; color: #aaa; }
.movie-play-area { width: 40px; display: flex; justify-content: center; align-items: center; background: #222; cursor: pointer; }
.movie-play-btn { font-size: 20px; }