/* 基本 */
:root {
  --bg: #0f1215;
  --panel: #14161a;
  --muted: #7c8a7c;
  --accent: #6aa84f;
  --accent-2: #5b8a5b;
  --accent-3: #6aa84f;
  --btn: #1a1d25;
  --btn-active: #1f2f1f;
  --glow: #6aa84f;
  --glow-off: #4a5a4a;
  --text-on: #6aa84f;
  /* 文字とボタンの枠を明るくするための変数 */
  --text-on-bright: #9ee87f;
  --accent-bright: #9ee87f;
  --text-off: #7c9a7c;
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text-off);
  font-family: "DotGothic16", monospace;
  /* スマホでのテキストサイズ調整を防ぐ */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  /* 横向きでのスクロールを防ぐ */
  overflow-x: hidden;
}

h3,
h4 {
  margin: 6px 0
}

/* ヘッダー */
#header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--glow-off);
  background: linear-gradient(#0d0f14, #080a0f);
  box-shadow: 0 2px 8px rgba(106, 168, 79, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#header-left {
  flex: 0 0 auto;
  min-width: 120px;
}

#game-title {
  font-size: 1.4em;
  font-weight: bold;
  color: var(--text-on-bright);
  letter-spacing: 3px;
  text-shadow: 0 0 8px rgba(106, 168, 79, 0.5);
  font-family: "DotGothic16", monospace;
  text-transform: uppercase;
  animation: titleFlicker 8s infinite;
}

@keyframes titleFlicker {

  0%,
  100% {
    opacity: 1;
    text-shadow: 0 0 8px rgba(106, 168, 79, 0.5);
  }

  25% {
    opacity: 0.3;
    text-shadow: 0 0 4px rgba(106, 168, 79, 0.2);
  }

  50% {
    opacity: 0.7;
    text-shadow: 0 0 6px rgba(106, 168, 79, 0.4);
  }

  75% {
    opacity: 0.4;
    text-shadow: 0 0 3px rgba(106, 168, 79, 0.15);
  }
}

#header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

#header-right {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  align-items: center;
}

.header-btn {
  font-family: "DotGothic16", monospace;
  padding: 6px 10px;
  border: 1px solid var(--glow-off);
  background: var(--btn);
  color: var(--text-off);
  cursor: pointer;
  font-size: 1.1em;
  border-radius: 2px;
  transition: all 0.15s ease;
  animation: flicker 4s infinite;
  animation-delay: calc(var(--flicker-delay, 0) * 1s);
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#btn-sound-toggle,
#btn-header-save,
#btn-header-settings,
#orientation-warning-debug {
  padding: 4px;
  background: var(--btn);
  border: 1px solid var(--glow-off);
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: all 0.15s ease;
  cursor: pointer;
}

#btn-sound-toggle:hover,
#btn-header-save:hover,
#btn-header-settings:hover,
#orientation-warning-debug:hover {
  background: var(--btn-active);
  border-color: var(--accent-bright);
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.3);
}

#sound-icon,
#save-icon,
#settings-icon,
#debug-icon {
  width: 24px;
  height: 24px;
  display: block;
  filter: brightness(0.9) saturate(1.2) hue-rotate(0deg);
  image-rendering: crisp-edges;
}

#btn-sound-toggle.active #sound-icon,
#orientation-warning-debug.active #debug-icon {
  filter: brightness(1.1) saturate(1.5) hue-rotate(0deg) drop-shadow(0 0 4px rgba(106, 168, 79, 0.6));
}

#btn-sound-toggle:hover #sound-icon,
#btn-header-save:hover #save-icon,
#btn-header-settings:hover #settings-icon,
#orientation-warning-debug:hover #debug-icon {
  filter: brightness(1.0) saturate(1.3) hue-rotate(0deg) drop-shadow(0 0 3px rgba(106, 168, 79, 0.4));
}

.header-btn:hover {
  background: var(--btn-active);
  border-color: var(--accent-bright);
  color: var(--text-on-bright);
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.3);
  animation: flicker 3s infinite;
}

.header-btn.active {
  border-color: var(--accent-bright);
  color: var(--text-on-bright);
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.4);
}

/* 音量ボタンとデバッグボタンのアクティブ状態（より高い詳細度） */
button#btn-sound-toggle.active,
button#orientation-warning-debug.active {
  border-color: #84C06B !important;
  box-shadow: 0 0 8px rgba(132, 192, 107, 0.4) !important;
  background: var(--btn-active) !important;
}

#tabs {
  display: flex;
  gap: 8px
}

.tab {
  font-family: "DotGothic16", monospace;
  background: var(--btn);
  color: var(--text-off);
  border: 1px solid var(--glow-off);
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  border-radius: 2px;
  position: relative;
  animation: flicker 5s infinite;
  animation-delay: calc(var(--flicker-delay, 0) * 1s);
}

.tab:hover {
  background: var(--btn-active);
  border-color: var(--accent-2);
  box-shadow: 0 0 4px rgba(106, 168, 79, 0.2);
  animation: flicker 4s infinite;
}

.tab.active {
  background: var(--btn-active);
  border-color: var(--accent-bright);
  color: var(--text-on-bright);
  box-shadow: 0 0 12px rgba(106, 168, 79, 0.4), inset 0 0 8px rgba(106, 168, 79, 0.15);
  animation: flicker 3s infinite;
}

.tab:active {
  transform: translateY(1px)
}

/* メイン5分割: A 履歴 / B 左 / C 中央 / D サイド / E リソース */
/* プレイヤー・敵アイコンの背景調整 */
img[src$=".svg"] {
  background-color: transparent !important;
}

/* ダメージ表示用 */
.damage-popup {
  position: absolute;
  color: #ff4444;
  /* 赤文字 */
  font-weight: bold;
  font-size: 1.5em;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  animation: damage-float 1.5s ease-out forwards;
  /* 時間延長 */
  z-index: 100;
}

@keyframes damage-float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: translateY(-40px) scale(1.2);
    opacity: 0;
  }
}

/* 揺れアニメーション（通常） */
.shake {
  animation: shake-anim 0.8s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake-anim {
  0% {
    transform: translate3d(0, 0, 0);
  }

  10% {
    transform: translate3d(-2px, 0, 0);
  }

  20% {
    transform: translate3d(2px, 0, 0);
  }

  30% {
    transform: translate3d(-4px, 0, 0);
  }

  40% {
    transform: translate3d(4px, 0, 0);
  }

  50% {
    transform: translate3d(-4px, 0, 0);
  }

  60% {
    transform: translate3d(4px, 0, 0);
  }

  70% {
    transform: translate3d(-2px, 0, 0);
  }

  80% {
    transform: translate3d(2px, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* 揺れアニメーション（Y軸中央揃えの要素用：敵アイコンなど） */
.shake-y-centered {
  animation: shake-anim-y 0.8s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake-anim-y {
  0% {
    transform: translate3d(0, -50%, 0);
  }

  10% {
    transform: translate3d(-2px, -50%, 0);
  }

  20% {
    transform: translate3d(2px, -50%, 0);
  }

  30% {
    transform: translate3d(-4px, -50%, 0);
  }

  40% {
    transform: translate3d(4px, -50%, 0);
  }

  50% {
    transform: translate3d(-4px, -50%, 0);
  }

  60% {
    transform: translate3d(4px, -50%, 0);
  }

  70% {
    transform: translate3d(-2px, -50%, 0);
  }

  80% {
    transform: translate3d(2px, -50%, 0);
  }

  100% {
    transform: translate3d(0, -50%, 0);
  }
}

/* タイムラインUI */

/* ポップアップテキスト（コンボなど） */
.battle-popup-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  font-weight: bold;
  color: #fbbf24;
  /* 金色 */
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 2px 2px 0 #000;
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  animation: popup-bounce 0.8s ease-out forwards;
}

@keyframes popup-bounce {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }

  40% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }

  60% {
    transform: translate(-50%, -50%) scale(1.0);
  }

  100% {
    transform: translate(-50%, -80%) scale(1.0);
    opacity: 0;
  }
}

/* 画面フラッシュ（被弾など） */
@keyframes flash-red {
  0% {
    box-shadow: inset 0 0 0 0 rgba(255, 0, 0, 0);
  }

  20% {
    box-shadow: inset 0 0 50px 20px rgba(255, 0, 0, 0.5);
  }

  100% {
    box-shadow: inset 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

.flash-damage {
  animation: flash-red 0.3s ease-out;
}

#main {
  display: flex;
  flex: 1;
  min-height: 0;
  /* メインコンテンツ全体をスクロール不可に（各エリアで独立スクロール） */
  overflow-y: hidden;
  overflow-x: hidden;
  /* 背景色を--panelに変更して黒い部分を解消 */
  background: var(--panel);
  /* 各エリアの高さを揃えて、区切り線を下まで伸ばす */
  align-items: stretch;
}

#main::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

/* A〜E はすべて flex ベースで幅を指定（width は使わない） */
#main>aside,
#main>section {
  min-width: 0;
  /* オーバーフロー防止 */
  /* 各エリアの高さを揃えて、区切り線を下まで伸ばす */
  height: 100%;
  align-self: stretch;
  overflow-y: auto;
  /* 独立スクロール */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

#main>aside::-webkit-scrollbar,
#main>section::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

/* A: 履歴メニュー */
#history-area {
  flex: 0 0 25%;
  /* 元に戻す */
  padding: 12px;
  background: var(--panel);
  border-right: 1px solid var(--glow-off);
  /* overflow: visible; 削除 */
  /* 個別スクロールを無効化、メインコンテンツと連動 -> 独立スクロールに変更 */
  overflow-x: hidden;
  /* 横方向のはみ出しを防止 */
  box-shadow: inset -1px 0 4px rgba(106, 168, 79, 0.03);
  position: relative;
  /* スクロール時もborderが確実に表示されるように */
}

/* B: 左エリア（場所 or モード説明） */
#left-area {
  flex: 0 0 20%;
  /* 20% */
  padding: 12px;
  background: var(--panel);
  border-right: 1px solid var(--glow-off);
  /* overflow: visible; 削除 */
  /* 個別スクロールを無効化、メインコンテンツと連動 -> 独立スクロールに変更 */
  overflow-x: hidden;
  /* 横方向のはみ出しを防止 */
  box-shadow: inset -1px 0 4px rgba(106, 168, 79, 0.03);
  position: relative;
  /* スクロール時もborderが確実に表示されるように */
}

/* C: 中央エリア */
#center-area {
  flex: 0 0 20%;
  /* 20% */
  padding: 12px;
  background: var(--panel);
  border-right: 1px solid var(--glow-off);
  /* overflow: visible; 削除 */
  /* 個別スクロールを無効化、メインコンテンツと連動 -> 独立スクロールに変更 */
  overflow-x: hidden;
  /* 横方向のはみ出しを防止 */
  box-shadow: inset -1px 0 4px rgba(106, 168, 79, 0.03);
  position: relative;
  /* スクロール時もborderが確実に表示されるように */
}

/* D: サイドエリア（設備など） */
#build-area {
  flex: 0 0 20%;
  /* 20% */
  padding: 12px;
  background: var(--panel);
  border-right: 1px solid var(--glow-off);
  /* overflow: visible; 削除 */
  /* 個別スクロールを無効化、メインコンテンツと連動 -> 独立スクロールに変更 */
  overflow-x: hidden;
  /* 横方向のはみ出しを防止 */
  box-shadow: inset -1px 0 4px rgba(106, 168, 79, 0.03);
  position: relative;
  /* スクロール時もborderが確実に表示されるように */
}

/* E: リソースメニュー */
#right-area {
  flex: 0 0 15%;
  /* 15% (100%を超えないように調整) */
  padding: 12px;
  background: var(--panel);
  border-left: 1px solid var(--glow-off);
  overflow: hidden;
  /* 資源メニューだけをスクロール可能にするため、親要素はoverflowをhiddenに */
  overflow-x: hidden;
  /* 横方向のはみ出しを防止 */
  box-shadow: inset 1px 0 4px rgba(106, 168, 79, 0.03);
  position: relative;
  /* スクロール時もborderが確実に表示されるように */
  display: flex;
  flex-direction: column;
}

/* ▼ レイアウトモード（タブごとに #main にクラスを付け替える） */
/* デフォルト: 生活拠点タブ想定（A,B,C,D,E の5カラム）
   A:30% / B:20% / C:20% / D:20% / E:10% (合計100%) */
#main.layout-home #history-area {
  flex: 0 0 30%;
  /* 25% + 5% */
}

#main.layout-home #left-area {
  flex: 0 0 18%;
}

#main.layout-home #center-area {
  flex: 0 0 18%;
}

#main.layout-home #build-area {
  flex: 0 0 18%;
}

#main.layout-home #right-area {
  flex: 0 0 16%;
  /* B、C、Dから均等に削って広げた */
}

/* 保存タブ:
   A:25% / B:0% / C:60% / D:0% / E:15% (合計100%) */
#main.layout-save #left-area {
  flex: 0 0 0%;
  padding: 0;
  border-right: none;
  display: none;
}

#main.layout-save #center-area {
  flex: 0 0 60%;
}

/* D は 0% に圧縮（余白・枠線も消す） */
#main.layout-save #build-area {
  flex: 0 0 0%;
  padding: 0;
  border-right: none;
}

#main.layout-save #right-area {
  flex: 0 0 15%;
  /* 100%を超えないように調整 */
}

/* 物語（測量室）タブ:
   A:25% / B:0% / C:35% / D:25% / E:15% (合計100%) */
#main.layout-story #left-area {
  flex: 0 0 0%;
  padding: 0;
  border-right: none;
  display: none;
}

#main.layout-story #center-area {
  flex: 0 0 35%;
  /* 100%を超えないように調整 */
}

#main.layout-story #build-area {
  flex: 0 0 25%;
  display: block;
}

#main.layout-story #right-area {
  flex: 0 0 15%;
  /* 100%を超えないように調整 */
}

/* 古代の機械・戦闘・取引タブ:
   古代の機械: A:25% / B:0% / C:35% / D:25% / E:15% (合計100%)
   戦闘: A:25% / B:15% / C:25% / D:20% / E:15% (合計100%)
   戦闘中（BC結合）: A:25% / B:0% / C:40% / D:20% / E:15% (合計100%)
   取引: A:25% / B:30% / C:30% / D:0% / E:15% (合計100%) */

#main.layout-cave #left-area {
  flex: 0 0 0%;
  padding: 0;
  border-right: none;
  display: none;
}

#main.layout-battle #left-area {
  flex: 0 0 15%;
}

#main.layout-battle-combined #left-area {
  flex: 0 0 0%;
  padding: 0;
  border-right: none;
  display: none;
}

#main.layout-trade #left-area {
  flex: 0 0 30%;
}

#main.layout-cave #center-area {
  flex: 0 0 35%;
  /* 100%を超えないように調整 */
}

#main.layout-battle #center-area {
  flex: 0 0 20%;
  /* 100%を超えないように調整 */
}

#main.layout-battle-combined #center-area {
  flex: 0 0 35%;
  /* B(15%) -> 0% なので C を少し広げる */
  border-left: none;
}

#main.layout-trade #center-area {
  flex: 0 0 30%;
}

#main.layout-cave #build-area {
  flex: 0 0 25%;
}

#main.layout-battle #build-area {
  flex: 0 0 25%;
}

#main.layout-battle-combined #build-area {
  flex: 0 0 25%;
}

#main.layout-trade #build-area {
  flex: 0 0 0%;
  /* 100%を超えないように調整 */
  padding: 0;
  border-right: none;
  display: none;
}

#main.layout-cave #right-area,
#main.layout-battle #right-area,
#main.layout-battle-combined #right-area,
#main.layout-trade #right-area {
  flex: 0 0 15%;
  /* 100%を超えないように調整 */
}

/* 保管室タブ: A:25% / B:0% / C:60% / D:0% / E:15% (合計100%) */
#main.layout-storage #left-area {
  flex: 0 0 0%;
  padding: 0;
  border-right: none;
  display: none;
}

#main.layout-storage #center-area {
  flex: 0 0 60%;
  /* 100%を超えないように調整 */
}

#main.layout-storage #build-area {
  flex: 0 0 0%;
  padding: 0;
  border-right: none;
  display: none;
}

#main.layout-storage #right-area {
  flex: 0 0 15%;
  /* 100%を超えないように調整 */
}

/* 古代の機械：導入シーン用（E を消して A/B/C/D のみ） */
#main.layout-cave-intro #right-area {
  display: none;
}


#main.layout-cave-intro #left-area {
  flex: 0 0 0%;
  padding: 0;
  border-right: none;
  display: none;
}

#main.layout-cave-intro #center-area {
  flex: 0 0 45%;
}

#main.layout-cave-intro #build-area {
  flex: 0 0 30%;
}

/* 整備室タブ: A:25% / B:20% / C:20% / D:20% / E:15% (合計100%) */
#main.layout-maintenance #left-area {
  flex: 0 0 20%;
}

#main.layout-maintenance #center-area {
  flex: 0 0 20%;
}

#main.layout-maintenance #build-area {
  flex: 0 0 20%;
}

#main.layout-maintenance #right-area {
  flex: 0 0 15%;
  /* 100%を超えないように調整 */
}

/* 操縦室タブ: A:25% / B:20% / C:40% / D:20% / E:15% (合計100%) */
#main.layout-control #left-area {
  flex: 0 0 20%;
}

#main.layout-control #center-area {
  flex: 0 0 40%;
  /* 100%を超えないように調整 */
}

#main.layout-control #build-area {
  flex: 0 0 20%;
}

#main.layout-control #right-area {
  flex: 0 0 15%;
  /* 100%を超えないように調整 */
}

/* 遺構探索タブ: A:25% / B:0% / C:60% / D:20% / E:15% (合計100%) */
#main.layout-ruins #left-area {
  flex: 0 0 0%;
  padding: 0;
  border-right: none;
  display: none;
}

#main.layout-ruins #center-area {
  flex: 0 0 60%;
  /* 100%を超えないように調整 */
}

#main.layout-ruins #build-area {
  flex: 0 0 20%;
}

#main.layout-ruins #right-area {
  flex: 0 0 15%;
  /* 100%を超えないように調整 */
}

/* 整備室モジュールボタン */
.maintenance-module-btn,
.btn-block.maintenance-module-btn {
  width: 100%;
  margin: 8px 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  animation: none !important;
  /* デフォルトのアニメーションを無効化 */
  min-height: 80px;
  /* 最小高さを設定して縦幅を統一 */
  align-items: flex-start;
}

/* .btn-blockのアニメーションを上書き */
.btn-block.maintenance-module-btn {
  animation: none !important;
}

.maintenance-module-name {
  font-size: 1.1em;
  font-weight: bold;
  flex-shrink: 0;
}

.maintenance-module-desc {
  font-size: 0.85em;
  color: var(--text-off);
  line-height: 1.4;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maintenance-module-btn.active,
.btn-block.maintenance-module-btn.active {
  background: var(--btn-active) !important;
  border-color: var(--accent) !important;
  color: var(--text-on) !important;
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.3), inset 0 0 6px rgba(106, 168, 79, 0.1) !important;
  animation: flicker 3s infinite !important;
  animation-delay: 0s !important;
  will-change: opacity;
}

.maintenance-module-btn.active:hover,
.btn-block.maintenance-module-btn.active:hover {
  background: var(--btn-active) !important;
  border-color: var(--accent) !important;
  color: var(--text-on) !important;
  box-shadow: 0 0 12px rgba(106, 168, 79, 0.5), inset 0 0 8px rgba(106, 168, 79, 0.15) !important;
  animation: flicker 2.5s infinite !important;
  animation-delay: 0s !important;
}

/* 共通ボタンスタイル（行動・場所・建設・取引用） */
.btn-block {
  width: 100%;
  margin: 4px 0;
  padding: 6px 10px;
  border: 1px solid var(--glow-off);
  background: var(--btn);
  color: var(--text-off);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 2px;
  animation: flicker 4s infinite;
  animation-delay: calc(var(--flicker-delay, 0) * 1s);
  font-family: "DotGothic16", monospace;
  min-height: 44px;
}

.btn-block:hover {
  background: var(--btn-active);
  border-color: var(--accent-2);
  box-shadow: 0 0 6px rgba(106, 168, 79, 0.2);
  color: var(--accent-2);
  animation: flicker 3s infinite;
}

.btn-block:active {
  transform: translateY(1px);
  box-shadow: 0 0 4px rgba(106, 168, 79, 0.3);
}

.btn-block.disabled {
  background: var(--btn-active);
  color: var(--text-on-bright);
  border-color: var(--accent-bright);
  cursor: default;
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.3), inset 0 0 6px rgba(106, 168, 79, 0.1);
  animation: flicker 3s infinite;
}

.btn-block.disabled:hover {
  background: var(--btn-active);
  color: var(--text-on-bright);
  border-color: var(--accent-bright);
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.3), inset 0 0 6px rgba(106, 168, 79, 0.1);
  animation: flicker 3s infinite;
}

/* 資源不足で押せない場合は暗く表示 */
.btn-block.disabled.resource-disabled {
  background: var(--btn);
  color: var(--text-off);
  border-color: var(--glow-off);
  cursor: default;
  box-shadow: none;
  opacity: 0.5;
  animation: none;
}

.btn-block.disabled.resource-disabled:hover {
  background: var(--btn);
  color: var(--text-off);
  border-color: var(--glow-off);
  box-shadow: none;
  opacity: 0.5;
  animation: none;
}

/* ラベル名エリア（固定幅） */
.btn-main-wrap {
  flex: 1 1 140px;
  min-width: 0;
  text-align: left;
  overflow: visible;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.btn-main-label {
  display: block;
  font-size: 1.1em;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
}

/* 説明エリア（固定幅） */
.btn-sub-wrap {
  flex: 1;
  text-align: left;
  overflow: visible;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

.btn-sub-label {
  display: block;
  font-size: 0.9em;
  color: var(--muted);
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
}

/* インジケーターエリア（固定幅） */
.btn-indicator-wrap {
  flex: 0 0 32px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 6px;
}

.btn-indicator {
  width: 32px;
  height: 32px;
  position: relative;
}

.btn-indicator-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

/* 左エリア内 */
#left-content {
  margin-top: 0px;
}

/* 行動カラム（生活拠点タブ） */
#actions-columns {
  display: flex;
  gap: 10px;
  height: 100%;
  overflow-y: auto;
  /* スクロール機能は有効、スクロールバーは非表示 */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

#actions-columns::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.action-column {
  width: 50%;
  padding: 4px;
  background: transparent;
  overflow-y: auto;
  /* スクロール機能は有効、スクロールバーは非表示 */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.action-column::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

/* 設備リスト（生活拠点タブ） */
#build-list {
  padding-top: 4px;
}

/* 生活拠点を1カラム化するためのクラス */
#actions-columns.single-column {
  flex-direction: column;
}

#actions-columns.single-column #action-left {
  width: 100%;
}

#actions-columns.single-column #action-right {
  display: none;
}

/* セーブ UI */
.save-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.btn-main,
.btn-sub {
  width: 100%;
  margin: 4px 0;
  padding: 6px 10px;
  border: 1px solid var(--glow-off);
  background: var(--btn);
  color: var(--text-off);
  cursor: pointer;
  font-family: "DotGothic16", monospace;
  font-size: 0.9em;
  border-radius: 2px;
  transition: all 0.15s ease;
  animation: flicker 4s infinite;
  animation-delay: calc(var(--flicker-delay, 0) * 1s);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-main:hover,
.btn-sub:hover {
  background: var(--btn-active);
  border-color: var(--accent-bright);
  color: var(--text-on-bright);
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.3);
  animation: flicker 3s infinite;
}

/* デバッグモードがONの時のボタンスタイル */
.btn-sub.debug-on {
  background: var(--btn-active);
  border-color: var(--accent-bright);
  color: var(--text-on-bright);
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.3), inset 0 0 6px rgba(106, 168, 79, 0.1);
  animation: flicker 3s infinite;
}

/* デバッグモードボタンがOFFの時は光らないようにする */
#orientation-warning-debug:not(.debug-on) {
  animation: none !important;
  box-shadow: none !important;
  background: var(--btn) !important;
  border-color: var(--glow-off) !important;
  color: var(--text-off) !important;
}

.btn-main:active,
.btn-sub:active {
  transform: translateY(1px);
  box-shadow: 0 0 4px rgba(106, 168, 79, 0.4);
}

#save-combined {
  margin-top: 8px;
}

#save-data {
  width: 100%;
  height: 160px;
  padding: 8px;
  background: #0f1215;
  color: var(--text-on-bright);
  border: 1px solid var(--accent);
  resize: none;
  /* スクロールバー抑制 */
  border-radius: 2px;
  box-shadow: inset 0 0 8px rgba(106, 168, 79, 0.1);
  font-family: "DotGothic16", monospace;
  margin-bottom: 8px;
}

#btn-copy {
  width: 100%;
}

.save-guide {
  margin-top: 8px;
  font-size: 0.9em;
  color: var(--muted);
  line-height: 1.5;
}

/* これまでの物語（実績グリッド） */
#achievement-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* B, C, D のイメージ */
  gap: 8px;
  font-size: 0.85em;
}

.achievement-block {
  border: 1px solid var(--glow-off);
  padding: 6px;
  min-height: 40px;
  background: var(--btn);
  line-height: 1.4;
  color: var(--text-off);
  border-radius: 2px;
  box-shadow: inset 0 0 4px rgba(106, 168, 79, 0.03);
}

/* ランダムイベント表示（取引所の取引依頼） */
#trade-event-current {
  margin-top: 4px;
  padding: 6px;
  border: 1px solid var(--glow-off);
  background: var(--btn);
  font-size: 0.9em;
  color: var(--text-off);
  border-radius: 2px;
  box-shadow: inset 0 0 4px rgba(106, 168, 79, 0.03);
}

#trade-event-current h5 {
  margin: 0 0 4px 0;
  font-size: 0.9em;
}

.event-buttons {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.event-buttons button {
  padding: 4px 8px;
  border: 1px solid var(--glow-off);
  background: var(--btn);
  color: var(--text-off);
  cursor: pointer;
  font-size: 0.85em;
  border-radius: 2px;
  transition: all 0.15s ease;
  animation: flicker 4s infinite;
  animation-delay: calc(var(--flicker-delay, 0) * 1s);
}

.event-buttons button:hover {
  background: var(--btn-active);
  border-color: var(--accent-bright);
  color: var(--text-on-bright);
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.3);
  animation: flicker 3s infinite;
}

/* 古代の機械 */
#cave-ui {
  margin-bottom: 0;
  padding-bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

#cave-display-wrapper {
  margin-top: 1.5em;
  width: 100%;
  box-sizing: border-box;
}

#cave-display {
  margin-top: 4px;
  margin-bottom: 8px;
  padding: 6px;
  border: 1px solid var(--glow-off);
  background: #0f1215;
  height: 40px;
  min-height: 40px;
  font-size: 1em;
  color: var(--text-off);
  box-shadow: inset 0 0 8px rgba(106, 168, 79, 0.05);
  border-radius: 2px;
  display: flex;
  align-items: center;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

/* 洞窟キーボード（Cエリア下） */
#cave-keyboard {
  margin-top: 8px;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.cave-key {
  padding: 8px 0;
  text-align: center;
  border: 1px solid var(--glow-off);
  background: var(--btn);
  color: var(--text-off);
  cursor: pointer;
  font-size: 0.9em;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: all 0.15s ease;
  animation: flicker 4.5s infinite;
  animation-delay: calc(var(--flicker-delay, 0) * 1s);
}

.cave-key:hover {
  background: var(--btn-active);
  border-color: var(--accent-2);
  box-shadow: 0 0 6px rgba(106, 168, 79, 0.2);
  color: var(--accent-2);
  animation: flicker 3.5s infinite;
}

.cave-key:not(.disabled):active {
  border-color: var(--accent-bright);
  color: var(--text-on-bright);
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.4);
}

.cave-key.disabled {
  color: var(--text-off);
  background: #14161a;
  border-color: var(--glow-off);
  cursor: default;
  opacity: 0.3;
  animation: none;
}

.cave-key.special {
  grid-column: span 4;
}

.cave-key.special[data-type="delete"] {
  grid-column: span 4;
  /* ○と×を等幅にする */
}

.cave-key.special[data-type="enter"] {
  grid-column: span 4;
  /* ○と×を等幅にする */
}

/* 履歴（ログ）表示：最大30件想定。最新を上に表示 */
#log-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85em;
  overflow-y: auto;
  /* スクロール機能は有効、スクロールバーは非表示 */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

#log-list::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

/* 資源リスト（個別スクロールを無効化、メインコンテンツと連動） */
#resource-list {
  overflow-y: auto;
  /* スクロールを有効化 */
  overflow-x: hidden;
  scrollbar-width: none;
  /* Firefoxでスクロールバーを非表示 */
  -ms-overflow-style: none;
  /* IE/Edgeでスクロールバーを非表示 */
}

#resource-list::-webkit-scrollbar {
  display: none;
  /* Chrome/Safariでスクロールバーを非表示 */
}

.log-entry {
  white-space: pre-wrap;
}

/* 資源エリアのヘッダー */
#resource-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 8px;
  gap: 0px;
  flex-wrap: wrap;
  row-gap: 4px;
  /* 改行時の縦方向の間隔 */
}

#resource-header h3 {
  margin: 0;
  margin-right: 0px;
  padding-right: 0px;
  flex: 0 0 auto;
}

#resource-pagination {
  display: none;
  /* 不要になったので非表示 */
}

.resource-page-btn {
  padding: 4px 8px;
  border: 1px solid var(--glow-off);
  background: var(--btn);
  color: var(--text-off);
  cursor: pointer;
  font-family: "DotGothic16", monospace;
  font-size: 0.8em;
  border-radius: 2px;
  transition: all 0.15s ease;
  min-width: 28px;
  width: auto;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.resource-page-btn:hover:not(:disabled) {
  background: var(--btn-active);
  border-color: var(--accent-bright);
  color: var(--text-on-bright);
  box-shadow: 0 0 4px rgba(106, 168, 79, 0.2);
}

.resource-page-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

#resource-page-info {
  font-size: 0.8em;
  color: var(--text-off);
  min-width: 25px;
  text-align: center;
  margin: 0;
  padding: 0;
}

/* 資源グループタイトル */
.resource-group-title {
  font-family: "DotGothic16", monospace;
  font-size: 0.9em;
  color: var(--accent);
  padding: 8px 0 4px 0;
  margin-top: 8px;
  border-bottom: 1px solid var(--glow-off);
  text-shadow: 0 0 4px rgba(106, 168, 79, 0.3);
}

/* 資源リストのインデントを揃える */
.resource-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: "DotGothic16", monospace;
  padding: 2px 0;
  color: var(--text-off);
  gap: 4px;
}

.resource-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.resource-icon svg {
  width: 100%;
  height: 100%;
}

.resource-name {
  flex: 1;
  min-width: 0;
  margin-right: 2px;
  /* 最大2行まで表示 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  word-wrap: break-word;
  word-break: break-word;
}

/* 画面幅800以下でアイコンを非表示（テキストラベルのみ表示） */
@media (max-width: 900px) {
  .resource-icon {
    display: none !important;
  }

  /* 資源ヘッダーの間隔を狭く（800-700px） */
  #resource-header {
    gap: 0px;
  }

  #resource-header h3 {
    margin-right: 0;
    padding-right: 0;
  }


  /* ターミナル表示ウィンドウの縦幅をさらに小さく（800px以下） */
  #cave-display {
    height: 24px !important;
    min-height: 24px !important;
    padding: 3px;
  }

  /* キーボードを8列維持（改行しない） */
  #cave-keyboard {
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    width: 100%;
  }

  .cave-key {
    font-size: 0.72em;
    padding: 3px 0;
    min-height: 20px;
  }

  /* キーボードのキーの縦幅をさらに小さく（800px以下） */
  .cave-key {
    min-height: 27px;
    padding: 5px 0;
    font-size: 0.84em;
  }

  /* クールタイム管理バーのサイズを小さく（800px以下） */
  .queue-item {
    padding: 2px 6px;
    gap: 4px;
  }

  .queue-item-progress {
    width: 50px;
    height: 3px;
  }

  .queue-item-time {
    font-size: 0.75em;
  }

  /* ボタン内の円形クールタイムバーのサイズを小さく（800px以下） */
  .btn-indicator {
    width: 16px;
    height: 16px;
  }

  .btn-indicator-wrap {
    flex: 0 0 16px;
    padding-top: 2px;
  }

  .btn-block {
    min-height: 24px;
  }
}

/* 画面幅700以下 */
@media (max-width: 800px) {

  /* 資源ページボタンを小さく（800px以下、改行を防ぐため） */
  .resource-page-btn {
    padding: 0px 1px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    font-size: 0.5em;
    margin: 0;
  }

  #resource-page-info {
    font-size: 0.5em;
    min-width: 20px;
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 700px) {

  /* 資源ヘッダーの間隔を0距離に設定（700-600px） */
  #resource-header {
    gap: 0px;
  }

  #resource-header h3 {
    margin-right: 0px;
    padding-right: 0px;
  }

  /* 資源ページボタンをさらに小さく */
  .resource-page-btn {
    padding: 0px 1px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    font-size: 0.5em;
    margin: 0;
  }

  #resource-page-info {
    font-size: 0.5em;
    min-width: 20px;
    margin: 0;
    padding: 0;
  }

  /* ターミナル表示ウィンドウの縦幅をさらに小さく（700px以下） */
  #cave-display {
    height: 20px !important;
    min-height: 20px !important;
    padding: 2px;
  }

  /* キーボードを8列維持（改行しない） */
  #cave-keyboard {
    grid-template-columns: repeat(8, 1fr);
    gap: 1px;
    width: 100%;
  }

  .cave-key {
    font-size: 0.7em;
    padding: 2px 0;
    min-height: 18px;
  }

  /* キーボードのキーの縦幅をさらに小さく（700px以下） */
  .cave-key {
    min-height: 25px;
    padding: 4px 0;
    font-size: 0.82em;
  }

  /* クールタイム管理バーのサイズをさらに小さく（700px以下） */
  .queue-item {
    padding: 1px 4px;
    gap: 3px;
  }

  .queue-item-progress {
    width: 40px;
    height: 3px;
  }

  .queue-item-time {
    font-size: 0.7em;
  }

  .queue-item-label {
    font-size: 0.85em;
  }

  /* ボタン内の円形クールタイムバーのサイズをさらに小さく（700px以下） */
  .btn-indicator {
    width: 12px;
    height: 12px;
  }

  .btn-indicator-wrap {
    flex: 0 0 12px;
    padding-top: 1px;
  }

  .btn-block {
    min-height: 20px;
  }
}

/* 画面幅600以下 */
@media (max-width: 600px) {

  /* 資源ヘッダーの間隔を最小限に（改行時の上下間隔も最小限） */
  #resource-header {
    gap: 0px;
    row-gap: 0px;
    /* 改行時の縦方向の間隔を0に */
    margin-bottom: 0px;
    /* 下部のマージンを0に */
  }

  #resource-header h3 {
    margin-bottom: 0px;
  }

  /* 改行されたページ情報と主要資源の間隔を最小限に */
  #resource-header+#resource-list {
    margin-top: 0px;
  }

  /* 資源グループタイトルの上マージンを0に */
  .resource-group-title {
    margin-top: 0px;
    padding-top: 0px;
  }

  /* 資源リストの最初の要素のマージンも0に */
  #resource-list>.resource-group-title:first-child {
    margin-top: 0px;
    padding-top: 0px;
  }

  /* 資源ページボタンを最小サイズに */
  .resource-page-btn {
    padding: 0px 1px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    font-size: 0.5em;
    margin: 0;
  }

  #resource-page-info {
    font-size: 0.5em;
    min-width: 20px;
    margin: 0;
    padding: 0;
  }

  #resource-header h3 {
    margin-right: 0px;
    padding-right: 0px;
  }

  /* ターミナル表示ウィンドウの縦幅をさらに小さく（600px以下） */
  #cave-display {
    height: 18px !important;
    min-height: 18px !important;
    padding: 2px;
  }

  /* キーボードを8列維持（改行しない） */
  #cave-keyboard {
    grid-template-columns: repeat(8, 1fr);
    gap: 1px;
    width: 100%;
  }

  .cave-key {
    font-size: 0.65em;
    padding: 2px 0;
    min-height: 16px;
  }

  /* キーボードのキーの縦幅をさらに小さく（600px以下） */
  .cave-key {
    min-height: 23px;
    padding: 3px 0;
    font-size: 0.8em;
  }

  /* クールタイム管理バーのサイズを最小に（600px以下） */
  .queue-item {
    padding: 1px 3px;
    gap: 2px;
  }

  .queue-item-progress {
    width: 35px;
    height: 2px;
  }

  .queue-item-time {
    font-size: 0.65em;
  }

  .queue-item-label {
    font-size: 0.8em;
  }

  /* ボタン内の円形クールタイムバーのサイズを最小に（600px以下） */
  .btn-indicator {
    width: 8px;
    height: 8px;
  }

  .btn-indicator-wrap {
    flex: 0 0 8px;
    padding-top: 0px;
  }

  .btn-block {
    min-height: 16px;
  }
}

.resource-value {
  text-align: right;
  /* 固定幅を廃止し、内容に応じて伸縮するように変更 */
  flex-shrink: 0;
  margin-left: 4px;
  color: var(--text-off);
  font-variant-numeric: tabular-nums;
  /* 数字の幅を統一 */
}

/* 資源ホバー時のツールチップ */
.resource-row-hoverable {
  cursor: default;
}

#resource-tooltip {
  display: none;
  position: fixed;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--accent);
  color: var(--text-on-bright);
  font-family: "DotGothic16", monospace;
  font-size: 0.85em;
  white-space: pre-wrap;
  max-width: min(280px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  z-index: 10000;
  box-shadow: 0 0 12px rgba(106, 168, 79, 0.4);
  border-radius: 4px;
  pointer-events: none;
  line-height: 1.4;
  overflow: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* 画面端にはみ出さないように制御 */
  left: clamp(12px, var(--tooltip-left, 0px), calc(100vw - 12px));
  top: clamp(12px, var(--tooltip-top, 0px), calc(100vh - 12px));
  transform: none;
  /* テキストの重複を防ぐ */
  min-height: 0;
  min-width: 0;
}

#resource-tooltip.hidden {
  display: none !important;
  visibility: hidden;
  opacity: 0;
}

/* 建設済み表示用（色は白黒系） */
.build-done {
  border-color: #777;
  background: #1a1a1a;
  color: #ddd;
}

/* 取引所 UI */
#trade-main {
  margin-top: 8px;
}

#trade-merchant-name {
  margin-bottom: 4px;
  font-size: 0.9em;
  color: var(--muted);
}

/* 戦闘 UI の簡易スタイル */
#battle-main {
  font-size: 0.9em;
  color: var(--text-off);
}

.battle-block {
  border: 1px solid var(--glow-off);
  padding: 6px;
  margin-bottom: 8px;
  background: var(--btn);
  border-radius: 2px;
  box-shadow: inset 0 0 4px rgba(106, 168, 79, 0.03);
}

.battle-actions button {
  margin: 2px 0;
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--glow-off);
  background: var(--btn);
  color: var(--text-off);
  cursor: pointer;
  font-size: 0.85em;
  border-radius: 2px;
  transition: all 0.15s ease;
  animation: flicker 4s infinite;
  animation-delay: calc(var(--flicker-delay, 0) * 1s);
}

.battle-actions button:hover {
  background: var(--btn-active);
  border-color: var(--accent-bright);
  color: var(--text-on-bright);
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.3);
  animation: flicker 3s infinite;
}

/* footer （キュー表示とアイテム通知） */
#footer {
  padding: 6px 12px;
  border-top: 1px solid var(--glow-off);
  background: linear-gradient(#0d0f14, #0f1215);
  min-height: 64px;
  font-size: 0.8em;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 -2px 8px rgba(106, 168, 79, 0.05);
  position: relative;
  overflow: hidden;
}

#footer-row-1 {
  display: flex;
  align-items: center;
  min-height: 28px;
}

#footer-row-2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 28px;
  position: relative;
}

#queue-display {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.queue-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--glow-off);
  background: var(--btn);
  border-radius: 2px;
}

.queue-item-completed {
  background: #1a1a0f;
  border-color: #6aa84f;
  opacity: 0.9;
}

.queue-item-label {
  font-weight: bold;
  color: var(--text-off);
}

.queue-item-completed .queue-item-label {
  color: var(--text-on-bright);
}

.queue-item-progress {
  width: 60px;
  height: 4px;
  border: 1px solid var(--glow-off);
  background: #0f1215;
  position: relative;
  overflow: hidden;
}

.queue-item-progress-fill {
  height: 100%;
  background: var(--accent-2);
  transition: width 0.1s linear;
}

.queue-item-completed .queue-item-progress-fill {
  background: #6aa84f;
}

.queue-item-time {
  font-size: 0.85em;
  color: var(--muted);
}

.queue-item-completed .queue-item-time {
  color: #6aa84f;
  min-width: 40px;
  text-align: right;
}

/* アイテム取得通知エリア */
#item-notifications {
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.item-notification {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--accent);
  background: var(--panel);
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--text-on-bright);
  box-shadow: 0 2px 8px rgba(106, 168, 79, 0.3);
  animation: itemNotificationSlideIn 0.3s ease-out, itemNotificationFadeOut 0.3s ease-in 4.7s;
  animation-fill-mode: both;
  pointer-events: auto;
  min-width: 120px;
}

.item-notification-name {
  font-weight: bold;
  color: var(--accent);
}

.item-notification-amount {
  color: var(--text-on-bright);
  font-weight: bold;
}

.item-notification-negative {
  border-color: #cc4444;
}

.item-notification-negative .item-notification-name {
  color: #cc4444;
}

.item-notification-negative .item-notification-amount {
  color: #ff6666;
}

.item-notification-warning {
  border-color: #ccaa44;
}

.item-notification-warning .item-notification-name {
  color: #ccaa44;
}

.item-notification-warning .item-notification-amount {
  color: #ffcc66;
}

@keyframes itemNotificationSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes itemNotificationFadeOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* ゲーム内モーダル（確認ウィンドウ） */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* 画面最前面 */
}

#modal-overlay.hidden {
  display: none;
}

#modal-dialog {
  min-width: 260px;
  max-width: 480px;
  padding: 12px;
  border: 1px solid var(--accent);
  background: var(--panel);
  box-shadow: 0 0 20px rgba(106, 168, 79, 0.3), inset 0 0 20px rgba(106, 168, 79, 0.1);
  font-size: 0.9em;
  border-radius: 2px;
  color: var(--text-on-bright);
}

#modal-message {
  margin-bottom: 8px;
  white-space: pre-wrap;
}

#modal-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#modal-buttons button {
  padding: 4px 10px;
  border: 1px solid var(--glow-off);
  background: var(--btn);
  color: var(--text-off);
  cursor: pointer;
  font-family: "DotGothic16", monospace;
  font-size: 0.85em;
  border-radius: 2px;
  transition: all 0.15s ease;
  animation: flicker 4s infinite;
  animation-delay: calc(var(--flicker-delay, 0) * 1s);
}

#modal-buttons button:hover {
  background: var(--btn-active);
  border-color: var(--accent-bright);
  color: var(--text-on-bright);
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.3);
  animation: flicker 3s infinite;
}

/* Orientation Warning：スマートフォン向けメッセージ */
#orientation-warning {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

#orientation-warning.hidden {
  display: none;
}

#orientation-warning-content {
  text-align: center;
  padding: 20px;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(106, 168, 79, 0.3);
  max-width: 600px;
  max-height: 95vh;
  width: 90%;
  overflow-y: auto;
  box-sizing: border-box;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

#orientation-warning-content::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

#orientation-warning-text {
  font-size: 1.2em;
  line-height: 1.8;
  color: var(--text-on-bright);
  margin-bottom: 20px;
  font-family: "DotGothic16", monospace;
}

#orientation-warning-sound {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#orientation-warning-sound-toggle {
  width: 48px;
  height: 48px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#orientation-warning-sound-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#orientation-warning-next {
  font-size: 1.1em;
  padding: 12px 40px;
  font-family: "DotGothic16", monospace;
}

#start-save-input,
#save-data {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

#start-save-input::-webkit-scrollbar,
#save-data::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

#start-save-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.4);
}

/* イントロのフェード（最初だけ白→黒） */
#intro-fade {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 10000;
  opacity: 0;
  pointer-events: auto;
  display: none;
  transition: opacity 2s ease;
}

#intro-fade.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* ストーリー用モーダル（導入・HELLO クリアなど） */
#story-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  opacity: 1;
  transition: opacity 0.8s ease-in;
  padding: 20px;
  box-sizing: border-box;
}

#story-overlay.hidden {
  display: none;
}

#story-dialog {
  max-width: 750px;
  width: 90%;
  height: 300px;
  padding: 20px;
  border: 2px solid var(--accent);
  background: var(--panel);
  box-shadow: 0 0 20px rgba(106, 168, 79, 0.3), inset 0 0 30px rgba(106, 168, 79, 0.1);
  font-size: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 4px;
  color: var(--text-off);
  position: relative;
}

#story-modal {
  max-width: 750px;
  width: 90%;
  min-height: 300px;
  padding: 20px;
  border: 2px solid var(--accent);
  background: var(--panel);
  box-shadow: 0 0 20px rgba(106, 168, 79, 0.3), inset 0 0 30px rgba(106, 168, 79, 0.1);
  font-size: 1.2em !important;
  /* 画面横幅1000以下でもフォントサイズを維持 */
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 4px;
  color: var(--text-off);
  position: relative;
  /* ポートレートウィンドウを含めた高さを考慮 */
  max-height: calc(100vh - 40px);
  /* オーバーレイのパディング(20px * 2)を考慮 */
  overflow-y: auto;
  overflow-x: hidden;
}

/* ストーリーモーダルコンテナ（モーダル+ポートレートウィンドウを含む） */
#story-windows {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

#story-player-window {
  position: relative;
  width: 80px;
  height: 80px;
  padding: 5px;
  border: 2px solid var(--accent);
  background: var(--panel);
  box-shadow: 0 0 20px rgba(106, 168, 79, 0.3), inset 0 0 30px rgba(106, 168, 79, 0.1);
  border-radius: 4px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#story-player-window.hidden {
  /* display: none; を削除 - 常にエリアを確保 */
  opacity: 0.3;
  /* 無のSVGを表示している感じ */
  pointer-events: none;
  border: none;
  /* 枠を非表示 */
}

#story-player-portrait {
  width: 70px;
  height: 70px;
  opacity: 0.9;
  transition: transform 0.1s ease;
}

#story-player-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#story-player-portrait.speaking {
  animation: speaking 0.5s ease-in-out infinite;
}

@keyframes speaking {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }
}

#story-robot-window {
  position: relative;
  width: 80px;
  height: 80px;
  padding: 5px;
  border: 2px solid var(--accent);
  background: var(--panel);
  box-shadow: 0 0 20px rgba(106, 168, 79, 0.3), inset 0 0 30px rgba(106, 168, 79, 0.1);
  border-radius: 4px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#story-robot-window.hidden {
  /* display: none; を削除 - 常にエリアを確保 */
  opacity: 0.3;
  /* 無のSVGを表示している感じ */
  pointer-events: none;
  border: none;
  /* 枠を非表示 */
}

#story-robot-portrait {
  width: 70px;
  height: 70px;
  opacity: 0.9;
  transition: transform 0.1s ease;
}

#story-robot-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#story-robot-portrait.speaking {
  animation: speaking 0.5s ease-in-out infinite;
}

#story-overlay.achievement-story #story-dialog {
  max-width: 580px;
  width: 80%;
  height: 80vh;
  max-height: 600px;
  padding: 20px;
}

#story-overlay.achievement-story #story-scroll-container {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#story-overlay.achievement-story #story-text {
  font-size: 1.2em;
  line-height: 2;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: 100%;
  padding-right: 50px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

#story-overlay.achievement-story #story-text::-webkit-scrollbar {
  display: none;
}

#story-overlay.achievement-story #story-scroll-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

#story-overlay.achievement-story .story-scroll-btn {
  width: 32px;
  height: 32px;
  border: 2px solid var(--accent);
  background: var(--btn-active);
  color: var(--text-on-bright);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  font-family: "DotGothic16", monospace;
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.3);
  transition: all 0.15s ease;
  animation: flicker 3s infinite;
}

#story-overlay.achievement-story .story-scroll-btn:hover {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(106, 168, 79, 0.5);
  animation: flicker 2s infinite;
}

#story-overlay.achievement-story .story-scroll-btn:active {
  transform: translateY(1px);
}

#story-overlay.achievement-story .story-scroll-btn.disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

#story-scroll-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

#story-scroll-buttons.hidden {
  display: none;
}

#story-text {
  white-space: pre-wrap;
  line-height: 1.8;
  margin-bottom: 0;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  font-size: 1.2em !important;
  /* 画面横幅1000以下でもフォントサイズを維持 */
  font-weight: 500;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

#story-text::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
  letter-spacing: 0.5px;
  font-family: "DotGothic16", monospace;
  padding-right: 0;
}

#story-divider {
  height: 1px;
  background: var(--accent);
  opacity: 0.3;
  margin: 0;
  margin-top: 12px;
  margin-bottom: 12px;
  position: relative;
  flex-shrink: 0;
}

#story-divider.typing {
  animation: waveform 0.5s ease-in-out infinite;
}

@keyframes waveform {

  0%,
  100% {
    transform: translateX(0);
    opacity: 0.3;
  }

  25% {
    transform: translateX(-2px);
    opacity: 0.5;
  }

  50% {
    transform: translateX(2px);
    opacity: 0.4;
  }

  75% {
    transform: translateX(-1px);
    opacity: 0.45;
  }
}

#story-choices {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 40px;
  /* ボタン表示エリアを最初から確保 */
  gap: 8px;
  padding-top: 0;
  margin-top: 0;
  flex-shrink: 0;
  position: relative;
  /* スキップボタンの絶対配置の基準点 */
}

.story-choice-btn {
  padding: 6px 12px;
  border: 1px solid var(--glow-off);
  background: var(--btn);
  color: var(--text-off);
  cursor: pointer;
  font-family: "DotGothic16", monospace;
  font-size: 0.9em;
  border-radius: 2px;
  transition: all 0.15s ease;
  animation: flicker 4s infinite;
  animation-delay: calc(var(--flicker-delay, 0) * 1s);
}

.story-choice-btn:hover {
  background: var(--btn-active);
  border-color: var(--accent-bright);
  color: var(--text-on-bright);
  box-shadow: 0 0 8px rgba(106, 168, 79, 0.3);
  animation: flicker 3s infinite;
}

/* 電源切れそうな明滅アニメーション */
@keyframes flicker {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

@keyframes flicker-strong {

  0%,
  100% {
    opacity: 1;
  }

  25% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.8;
  }

  75% {
    opacity: 0.4;
  }
}

/* ランダムに明滅する要素（JavaScriptで動的に追加） */
.flicker-random {
  animation: flicker 3s infinite;
  animation-delay: 0s;
}

.flicker-random-1 {
  animation: flicker 4s infinite;
  animation-delay: 0.5s;
}

.flicker-random-2 {
  animation: flicker 5s infinite;
  animation-delay: 1s;
}

.flicker-random-3 {
  animation: flicker 3.5s infinite;
  animation-delay: 1.5s;
}

.flicker-random-4 {
  animation: flicker-strong 6s infinite;
  animation-delay: 2s;
}

/* helpers */
.hidden {
  display: none
}

/* 電源不安定状態（プロローグからHELLO入力まで、再利用可能） */
body.power-unstable .tab.active,
body.power-unstable .header-btn.active,
body.power-unstable .btn-main.active,
body.power-unstable .btn-sub.active,
body.power-unstable .story-choice-btn,
body.power-unstable #game-title,
body.power-unstable svg,
body.power-unstable .cave-key.active,
body.power-unstable .resource-page-btn:not(:disabled),
body.power-unstable .queue-item-completed,
body.power-unstable [style*="color:var(--text-on)"],
body.power-unstable [style*="color:var(--accent)"],
body.power-unstable [style*="border-color:var(--accent)"],
body.power-unstable [style*="box-shadow"][style*="rgba(106,168,79"] {
  animation: power-flicker var(--flicker-duration, 15s) ease-in-out infinite;
}

/* ストーリーモーダルは読めるように明るく保つ（同期させる） */
body.power-unstable #story-overlay,
body.power-unstable #story-overlay * {
  animation: power-flicker-modal var(--flicker-duration, 15s) ease-in-out infinite;
}

/* マイルドな明滅（電源復旧後） */
body.power-mild .tab.active,
body.power-mild .header-btn.active,
body.power-mild .btn-main.active,
body.power-mild .btn-sub.active,
body.power-mild .story-choice-btn,
body.power-mild #game-title,
body.power-mild svg,
body.power-mild .cave-key.active,
body.power-mild .resource-page-btn:not(:disabled),
body.power-mild .queue-item-completed,
body.power-mild [style*="color:var(--text-on)"],
body.power-mild [style*="color:var(--accent)"],
body.power-mild [style*="border-color:var(--accent)"],
body.power-mild [style*="box-shadow"][style*="rgba(106,168,79"] {
  animation: power-flicker-mild var(--flicker-duration, 25s) ease-in-out infinite;
}

/* ストーリーモーダルもマイルドに（同期させる） */
body.power-mild #story-overlay,
body.power-mild #story-overlay * {
  animation: power-flicker-mild var(--flicker-duration, 25s) ease-in-out infinite;
}

@keyframes power-flicker {
  0% {
    filter: brightness(1) saturate(1);
    opacity: 1;
  }

  50% {
    filter: brightness(0.65) saturate(0.8);
    opacity: 0.85;
  }

  100% {
    filter: brightness(1) saturate(1);
    opacity: 1;
  }
}

@keyframes power-flicker-modal {
  0% {
    filter: brightness(1) saturate(1);
    opacity: 1;
  }

  50% {
    filter: brightness(0.9) saturate(0.9);
    opacity: 0.95;
  }

  100% {
    filter: brightness(1) saturate(1);
    opacity: 1;
  }
}

/* マイルドな明滅（電源復旧後） */
@keyframes power-flicker-mild {
  0% {
    filter: brightness(1) saturate(1);
    opacity: 1;
  }

  50% {
    filter: brightness(0.92) saturate(0.96);
    opacity: 0.96;
  }

  100% {
    filter: brightness(1) saturate(1);
    opacity: 1;
  }
}

/* 操縦室 */
#control-ui {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#control-monitor {
  width: 100%;
  height: 400px;
  background: #000;
  border: 3px solid var(--accent);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(106, 168, 79, 0.3), inset 0 0 40px rgba(106, 168, 79, 0.1);
}

#control-monitor-content {
  width: 100%;
  height: 100%;
  position: relative;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 100%);
}

.star-field {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 60% 70%, #fff, transparent),
    radial-gradient(1px 1px at 50% 50%, #fff, transparent),
    radial-gradient(1px 1px at 80% 10%, #fff, transparent),
    radial-gradient(2px 2px at 90% 40%, #fff, transparent),
    radial-gradient(1px 1px at 33% 60%, #fff, transparent),
    radial-gradient(1px 1px at 66% 80%, #fff, transparent);
  background-size: 200% 200%;
  animation: starMove 20s linear infinite;
  opacity: 0.8;
}

@keyframes starMove {
  0% {
    background-position: 0% 0%
  }

  100% {
    background-position: 100% 100%
  }
}

.planet {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: transparent;
  box-shadow: 0 0 20px rgba(106, 168, 79, 0.4);
}

.planet-1 {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 15%;
  animation: planetFloat1 8s ease-in-out infinite;
}

.planet-1::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--accent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}

.planet-1::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  border: 1px solid var(--accent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.4;
}

.planet-2 {
  width: 60px;
  height: 60px;
  top: 60%;
  right: 20%;
  animation: planetFloat2 10s ease-in-out infinite;
}

.planet-2::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--accent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}

.planet-2::after {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  border: 1px solid var(--accent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.4;
}

.planet-3 {
  width: 100px;
  height: 100px;
  bottom: 15%;
  left: 50%;
  animation: planetFloat3 12s ease-in-out infinite;
}

.planet-3::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--accent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}

.planet-3::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  border: 1px solid var(--accent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.4;
}

@keyframes planetFloat1 {

  0%,
  100% {
    transform: translate(0, 0) scale(1)
  }

  50% {
    transform: translate(10px, -10px) scale(1.1)
  }
}

@keyframes planetFloat2 {

  0%,
  100% {
    transform: translate(0, 0) scale(1)
  }

  50% {
    transform: translate(-15px, 15px) scale(1.15)
  }
}

@keyframes planetFloat3 {

  0%,
  100% {
    transform: translate(0, 0) scale(1)
  }

  50% {
    transform: translate(20px, -20px) scale(1.2)
  }
}

#control-status {
  padding: 12px;
  background: var(--panel);
  border: 2px solid var(--glow-off);
  border-radius: 4px;
  text-align: center;
}

#control-status p {
  margin: 0;
  color: var(--text-off);
}

/* 遺構探索 */
#ruins-visual {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  min-height: 240px;
}

#ruins-visual-top-left {
  grid-column: 1;
  grid-row: 1;
}

#ruins-visual-center {
  grid-column: 2;
  grid-row: 1;
}

#ruins-visual-top-right {
  grid-column: 3;
  grid-row: 1;
}

#ruins-visual-left {
  grid-column: 1;
  grid-row: 2;
}

#ruins-visual-front {
  grid-column: 2;
  grid-row: 2;
}

#ruins-visual-right {
  grid-column: 3;
  grid-row: 2;
}

.ruins-visual-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  padding: 8px;
}

.ruins-visual-cell svg {
  width: 100%;
  height: 100%;
  max-width: 120px;
  max-height: 120px;
}

/* small screens - 900pxのメディアクエリを削除（667px以下のみレスポンシブ対応） */

/* スマホ横向き対応 */
@media (max-height: 600px) and (orientation: landscape),
(max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {

  /* 基本フォントサイズの調整 */
  html,
  body {
    font-size: 14px;
  }

  /* ターミナル表示ウィンドウの縦幅を小さく */
  #cave-display {
    height: 32px;
    min-height: 32px;
  }

  /* キーボードのキーの縦幅を小さく */
  .cave-key {
    min-height: 26px;
    padding: 5px 0;
  }

  /* ヘッダーの調整 */
  #header {
    padding: 6px 8px;
    gap: 8px;
  }

  #game-title {
    font-size: 1.1em;
    letter-spacing: 2px;
  }

  .header-btn {
    font-size: 0.9em;
    padding: 4px 8px;
    min-width: 32px;
    height: 32px;
  }

  #sound-icon,
  #save-icon {
    width: 20px;
    height: 20px;
  }

  /* タブの調整 */
  .tab {
    padding: 6px 8px;
    font-size: 0.85em;
  }

  #tabs {
    gap: 4px;
    flex-wrap: wrap;
  }

  /* レスポンシブ対応: 画面幅が1000px～1400pxの場合 */
  @media (max-width: 1400px) and (min-width: 1001px) {

    /* 資源名と数量のフォントサイズを少し小さく */
    .resource-name {
      font-size: 0.9em;
    }

    .resource-value {
      font-size: 0.9em;
    }
  }

  /* レスポンシブ対応: 画面幅が1100px以下の場合 */
  @media (max-width: 1100px) {

    /* 宇宙船前のボタンテキストのフォントサイズを小さく */
    #main.layout-home .btn-main-label {
      font-size: 1.0em;
    }

    #main.layout-home .btn-sub-label {
      font-size: 0.8em;
    }

    #main.layout-home .btn-block {
      font-size: 0.85em;
    }

    #main.layout-home .btn-main,
    #main.layout-home .btn-sub {
      font-size: 0.8em;
    }

    #resource-header {
      gap: 2px;
    }

    #resource-header h3 {
      margin-right: 1px;
    }
  }

  /* レスポンシブ対応: 画面幅が1000px以下の場合 */
  @media (max-width: 1000px) {

    /* 全体的にフォントサイズを小さく */
    body {
      font-size: 0.9em;
    }

    /* ヘッダーの調整 */
    #header {
      padding: 6px 10px;
    }

    #game-title {
      font-size: 1.2em;
    }

    .tab {
      padding: 4px 8px;
      font-size: 0.85em;
    }

    /* 資源メニューの調整 */
    .resource-row {
      font-size: 0.8em;
    }

    .resource-name {
      font-size: 0.85em;
    }

    .resource-value {
      font-size: 0.85em;
    }

    /* 資源ヘッダーの間隔を詰める */
    #resource-header {
      gap: 1px;
    }

    #resource-header h3 {
      margin-right: 1px;
    }

    /* アクションボタンの調整 */
    .btn-block {
      font-size: 0.8em;
      padding: 4px 6px;
    }

    /* 履歴エリアの調整 */
    #log-list {
      font-size: 0.75em;
    }


    /* ターミナル表示ウィンドウの縦幅を少し小さく（1000px以下） */
    #cave-display {
      height: 36px !important;
      min-height: 36px !important;
      padding: 4px;
    }

    /* キーボードのキーの縦幅を少し小さく（1000px以下） */
    .cave-key {
      min-height: 31px;
      padding: 7px 0;
      font-size: 0.88em;
    }

    /* クールタイム管理バーのサイズを少し小さく（1000px以下） */
    .queue-item {
      padding: 2px 7px;
      gap: 5px;
    }

    .queue-item-progress {
      width: 55px;
      height: 3.5px;
    }

    .queue-item-time {
      font-size: 0.8em;
    }

    /* ボタン内の円形クールタイムバーのサイズを小さく（1000px以下） */
    .btn-indicator {
      width: 24px;
      height: 24px;
    }

    .btn-indicator-wrap {
      flex: 0 0 24px;
      padding-top: 4px;
    }

    .btn-block {
      min-height: 32px;
    }

    /* その他のUI要素の調整 */
    h3 {
      font-size: 1.1em;
    }

    h4 {
      font-size: 1em;
    }

    /* 宇宙船前のラベルテキスト（場所・行動・設備）のフォントサイズを一段階下げる */
    #left-title,
    #home-ui h3,
    #build-panel h3 {
      font-size: 1.0em;
    }

    /* 宇宙船前のボタンラベルテキストを折り返し可能にする（クールタイムバーにかからないように） */
    #main.layout-home .btn-main-wrap {
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    #main.layout-home .btn-main-label {
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
  }

  /* レスポンシブ対応: 画面幅が830px以下の場合 */
  @media (max-width: 830px) {

    /* ターミナル部分のフォントサイズを小さく（830px以下） */
    #cave-display {
      font-size: 0.9em;
      padding: 2px;
      height: 26px !important;
      min-height: 26px !important;
    }

    /* 説明文とラベルのフォントサイズを統一 */
    #cave-display-label,
    #cave-explanation,
    p,
    .save-guide,
    #control-info-ui p,
    #control-status-ui p,
    #ruins-description,
    #trade-merchant-name,
    #battle-main p,
    #storage-main p,
    #maintenance-module-desc,
    .achievement-block p {
      font-size: 0.85em;
    }

    /* ターミナルキーボードの調整（改行しない、8列維持） */
    #cave-keyboard {
      grid-template-columns: repeat(8, 1fr);
      gap: 2px;
      width: 100%;
    }

    .cave-key {
      font-size: 0.75em;
      padding: 3px 0;
      min-height: 22px;
    }

    .cave-key.special {
      grid-column: span 4;
    }

    .cave-key.special[data-type="delete"] {
      grid-column: span 4;
      /* ○と×を等幅にする */
    }

    .cave-key.special[data-type="enter"] {
      grid-column: span 4;
      /* ○と×を等幅にする */
    }

    /* ターミナルUI全体の幅制限 */
    #cave-ui {
      max-width: 100%;
      overflow-x: hidden;
      box-sizing: border-box;
    }

    #cave-display-wrapper {
      max-width: 100%;
      box-sizing: border-box;
    }
  }

  /* レスポンシブ対応: 画面幅が900px以下の場合 */
  @media (max-width: 900px) {

    /* メインエリアのパディング調整 */
    #main>aside,
    #main>section {
      padding: 8px;
    }

    /* 資源アイコンを非表示 */
    .resource-icon {
      display: none !important;
    }

    /* 資源ヘッダーの間隔を狭く（900-800px） */
    #resource-header {
      gap: 0px;
    }

    #resource-header h3 {
      margin-right: 0;
      padding-right: 0;
    }



    /* ボタン内の円形クールタイムバーのサイズを小さく（900px以下） */
    .btn-indicator {
      width: 20px;
      height: 20px;
    }

    .btn-indicator-wrap {
      flex: 0 0 20px;
      padding-top: 3px;
    }

    .btn-block {
      min-height: 28px;
    }

    /* ターミナル表示ウィンドウの縦幅をさらに小さく（900px以下） */
    #cave-display {
      height: 32px !important;
      min-height: 32px !important;
      padding: 4px;
    }

    /* キーボードのキーの縦幅をさらに小さく（900px以下） */
    .cave-key {
      min-height: 29px;
      padding: 6px 0;
      font-size: 0.86em;
    }

    /* 資源ヘッダーの間隔をさらに詰める */
    #resource-header {
      gap: 0px;
    }

    #resource-header h3 {
      margin-right: 0px;
    }

    /* 見出しの調整 */
    h3,
    h4 {
      margin: 4px 0;
    }

    /* 宇宙船前のラベルテキスト（場所・行動・設備）のフォントサイズを一段階下げる */
    #left-title,
    #home-ui h3,
    #build-panel h3 {
      font-size: 0.9em;
    }

    /* 宇宙船前のボタンラベルテキストを折り返し可能にする（クールタイムバーにかからないように） */
    #main.layout-home .btn-main-wrap {
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    #main.layout-home .btn-main-label {
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    /* ボタンの調整 */
    .btn-block {
      padding: 5px 8px;
      min-height: 36px;
      margin: 3px 0;
    }

    .btn-main,
    .btn-sub {
      padding: 6px 10px;
    }

    /* 宇宙船前のボタンテキストのフォントサイズをさらに小さく（900px以下） */
    #main.layout-home .btn-main-label {
      font-size: 0.9em;
    }

    #main.layout-home .btn-sub-label {
      font-size: 0.75em;
    }

    #main.layout-home .btn-block {
      font-size: 0.8em;
    }

    #main.layout-home .btn-main,
    #main.layout-home .btn-sub {
      font-size: 0.75em;
    }

    /* 履歴エリアの調整（遺構探索以外すべてに適用、ただし宇宙船前は除外） */
    #main.layout-save #history-area,
    #main.layout-story #history-area,
    #main.layout-cave #history-area,
    #main.layout-battle #history-area,
    #main.layout-trade #history-area,
    #main.layout-storage #history-area,
    #main.layout-cave-intro #history-area,
    #main.layout-maintenance #history-area,
    #main.layout-control #history-area {
      flex: 0 0 18%;
      /* 遺構探索と同じ（900px以下） */
    }

    /* 履歴エリアの削減分（7%）を各ヘッダーごとに適切なエリアに割り振る */
    /* 指令室: Cエリア（ターミナル）に追加 */
    #main.layout-cave #center-area {
      flex: 0 0 40%;
      /* 35% + 5% (100%を超えないように調整) */
    }

    /* 遺構探索: Cエリアに追加 */
    #main.layout-ruins #center-area {
      flex: 0 0 65%;
      /* 60% + 5% (100%を超えないように調整) */
    }

    /* 測量室: Cエリア（日誌）に追加 */
    #main.layout-story #center-area {
      flex: 0 0 40%;
      /* 35% + 5% (100%を超えないように調整) */
    }

    /* 転送室: Dエリア（商品ラインナップ）に追加 */
    #main.layout-trade #build-area {
      flex: 0 0 5%;
      /* 0% + 5% (100%を超えないように調整) */
      padding: 8px;
      border-right: 1px solid var(--glow-off);
      display: block;
    }

    /* 保管室: Cエリアに追加 */
    #main.layout-storage #center-area {
      flex: 0 0 65%;
      /* 60% + 5% (100%を超えないように調整) */
    }

    /* 客室: Cエリアに追加 */
    #main.layout-battle #center-area {
      flex: 0 0 30%;
      /* 25% + 5% (100%を超えないように調整) */
    }

    /* 操縦室: Cエリアに追加 */
    #main.layout-control #center-area {
      flex: 0 0 45%;
      /* 40% + 5% (100%を超えないように調整) */
    }

    /* 履歴エリアの調整 */
    .log-entry {
      padding: 2px 0;
      line-height: 1.3;
    }

    /* 資源リストの調整 */
    .resource-row {
      padding: 1px 0;
    }

    .resource-group-title {
      padding: 6px 0 3px 0;
      margin-top: 6px;
    }

    .resource-icon {
      flex: 0 0 14px;
      width: 14px;
      height: 14px;
    }

    .resource-value {
      width: 50px;
    }

    /* フッターの調整 */
    #footer {
      padding: 4px 8px;
      min-height: 48px;
    }

    .item-notification {
      padding: 3px 6px;
      margin: 2px 4px;
    }

    /* ストーリーモーダルの調整 */
    #story-modal {
      padding: 12px;
      max-width: 90vw;
    }

    #story-text {
      font-size: 1.2em !important;
      line-height: 1.4;
      padding: 8px;
    }

    /* モーダルの調整 */
    #modal {
      padding: 12px;
      max-width: 90vw;
    }

    #modal-message {
      font-size: 0.9em;
      padding: 8px;
    }

    /* ターミナルキーボードの調整 */
    .cave-key {
      padding: 6px 8px;
      font-size: 0.85em;
      min-width: 32px;
      height: 32px;
    }

    /* 実績グリッドの調整 */
    .achievement-block {
      padding: 6px;
      font-size: 0.8em;
    }

    /* 操縦室モニタの調整 */
    #control-monitor {
      height: 200px;
    }

    /* 遺構探索の調整 */
    #ruins-visual {
      gap: 4px;
    }

    .ruins-visual-cell {
      min-height: 60px;
    }

    /* 戦闘UIの調整 */
    .battle-actions button {
      padding: 6px 10px;
      font-size: 0.85em;
    }

    /* 取引UIの調整 */
    .trade-item {
      padding: 6px;
      font-size: 0.85em;
    }

    /* 保管室UIの調整 */
    .storage-creature {
      padding: 8px;
    }

    .storage-creature-image {
      width: 60px;
      height: 60px;
    }

    /* 整備室モジュールボタンの調整 */
    .maintenance-module-btn {
      padding: 8px;
      min-height: 60px;
      font-size: 0.85em;
    }

    .maintenance-module-name {
      font-size: 1em;
    }

    .maintenance-module-desc {
      font-size: 0.75em;
    }

    /* タッチ操作の改善 */
    .btn-block,
    .tab,
    .header-btn,
    .btn-main,
    .btn-sub,
    .cave-key {
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(106, 168, 79, 0.3);
    }

    /* スクロール可能なエリアの調整（個別スクロールを無効化、メインコンテンツと連動） */
    #log-list,
    #resource-list {
      max-height: none;
      /* 高さ制限を解除 */
      overflow-y: visible;
      /* 個別スクロールを無効化、メインコンテンツと連動 */
    }

    /* ページ送りボタンの調整 */
    .resource-page-btn {
      padding: 4px 8px;
      font-size: 0.8em;
      min-width: 28px;
      height: 28px;
    }

    /* キュー表示の調整 */
    .queue-item {
      padding: 3px 6px;
      font-size: 0.75em;
      margin: 2px;
    }

    /* 5分割レイアウトの調整（横向きで全エリアを表示） */
    #history-area {
      flex: 0 0 18%;
      /* 測量室と同じ */
    }

    #left-area {
      flex: 0 0 16%;
    }

    #center-area {
      flex: 0 0 20%;
    }

    #build-area {
      flex: 0 0 20%;
    }

    #right-area {
      flex: 0 0 18%;
      /* 16%から2%増加 */
    }

    /* アクションカラムの調整 */
    .action-column {
      gap: 3px;
    }

    /* ストーリーサイドパネルの調整 */
    #story-side-panel,
    #cave-side-panel {
      font-size: 0.85em;
    }

    /* ターミナル表示の調整 */
    #cave-display {
      font-size: 0.9em;
      padding: 6px;
      min-height: 40px;
    }

    /* 戦闘UIの調整 */
    #battle-main {
      font-size: 0.85em;
    }

    .battle-enemy-name {
      font-size: 1em;
    }

    .battle-hp-bar {
      height: 20px;
    }

    /* 取引UIの調整 */
    #trade-main {
      font-size: 0.85em;
    }

    /* 保管室UIの調整 */
    #storage-main {
      font-size: 0.85em;
    }
  }

  /* メインコンテンツ用スクロールボタン */
  #main-scroll-up,
  #main-scroll-down {
    display: none !important;
    /* 完全に非表示 */
  }

  /* ヘッダー内の上ボタン */
  #header-right #main-scroll-up {
    position: static !important;
    width: 32px;
    height: 32px;
    font-size: 1.2em;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }

  /* 右端の下ボタン */
  #main-scroll-down {
    position: fixed !important;
    right: 10px !important;
    z-index: 10000 !important;
    /* 最優先で表示 */
    width: 32px;
    height: 32px;
  }

  /* ストーリーモーダル表示時は上下ボタンを無効化 */
  #story-overlay:not(.hidden)~* #main-scroll-up,
  body:has(#story-overlay:not(.hidden)) #main-scroll-up {
    pointer-events: none !important;
    opacity: 0.3 !important;
    cursor: default !important;
    animation: none !important;
    /* アニメーションを停止（光らないように） */
  }

  #story-overlay:not(.hidden)~* #main-scroll-down,
  body:has(#story-overlay:not(.hidden)) #main-scroll-down {
    pointer-events: none !important;
    opacity: 0.15 !important;
    /* ダウンボタンはもっと暗く */
    cursor: default !important;
    animation: none !important;
    /* アニメーションを停止（光らないように） */
  }

  /* 画面の縦幅が500px以上の時は非表示 */
  @media (min-height: 500px) {

    #main-scroll-up,
    #main-scroll-down {
      display: none !important;
    }
  }

  /* #main-scroll-up はヘッダー内に配置されるため、top指定は不要 */
  #main-scroll-down {
    bottom: 70px !important;
    /* フッターのすぐ上（フッターの高さ+少し余白） */
  }

  #main-scroll-up.hidden,
  #main-scroll-down.hidden {
    display: flex !important;
    /* hiddenでも表示 */
    opacity: 0.3;
    /* 代わりに透明度で制御 */
    pointer-events: none;
  }

  .main-scroll-btn:hover {
    background: var(--accent);
    box-shadow: 0 0 12px rgba(106, 168, 79, 0.5);
    animation: flicker 2s infinite;
  }

  .main-scroll-btn:active {
    transform: translateY(1px);
  }

  .main-scroll-btn.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
  }

  /* レスポンシブ対応: width 667px, height 375px のブレークポイント */
  /* 画面幅700px以下で段階的にレイアウトを調整 */
  @media (max-width: 700px) {

    /* 資源エリアを少し小さく（段階的変化） */
    #right-area {
      flex: 0 0 16.5%;
    }

    /* 中央エリアを少し広げる */
    #center-area {
      flex: 0 0 20.5%;
    }
  }

  /* 画面幅680px以下でさらに調整 */
  @media (max-width: 680px) {
    #right-area {
      flex: 0 0 16%;
    }

    #center-area {
      flex: 0 0 21%;
    }
  }

  /* 画面幅670px以下でさらに調整 */
  @media (max-width: 670px) {
    #right-area {
      flex: 0 0 15.8%;
    }

    #center-area {
      flex: 0 0 21.2%;
    }
  }

  /* 画面幅665px以下でさらに調整 */
  @media (max-width: 665px) {
    #right-area {
      flex: 0 0 15.6%;
    }

    #center-area {
      flex: 0 0 21.4%;
    }
  }

  /* 画面幅660px以下でさらに調整 */
  @media (max-width: 660px) {
    #right-area {
      flex: 0 0 15.4%;
    }

    #center-area {
      flex: 0 0 21.6%;
    }
  }

  /* 画面幅667px以下（横375px以下）で最終調整 */
  @media (max-width: 667px) and (max-height: 375px) {

    /* ヘッダーとフッターを固定 */
    #header {
      flex-shrink: 0;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    #footer {
      flex-shrink: 0;
      position: sticky;
      bottom: 0;
      z-index: 100;
    }

    /* メインコンテンツをスクロール可能に（スクロールバーは非表示） */
    #main {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      -webkit-overflow-scrolling: touch;
      /* スクロールバーを非表示 */
      scrollbar-width: none;
      /* Firefox */
      -ms-overflow-style: none;
      /* IE/Edge */
      /* 背景色を--panelに変更して黒い部分を解消 */
      background: var(--panel);
      /* 各エリアの高さを揃えない（flex-start） */
      align-items: flex-start;
    }

    #main::-webkit-scrollbar {
      display: none;
      /* Chrome/Safari */
    }

    /* メインコンテンツ内の各エリアを横並びに（個別スクロールは無効化、連動スクロール） */
    #main>aside,
    #main>section {
      flex-shrink: 1;
      min-width: 0;
      overflow-x: hidden;
      overflow-y: visible;
      /* 個別スクロールを無効化、メインコンテンツと連動 */
      word-wrap: break-word;
      word-break: break-word;
      position: relative;
      /* borderが確実に表示されるように */
    }

    /* スクロール時もborderが表示されるように */
    #history-area,
    #left-area,
    #center-area,
    #build-area {
      border-right: 1px solid var(--glow-off) !important;
      box-shadow: inset -1px 0 4px rgba(106, 168, 79, 0.03) !important;
    }

    #right-area {
      border-left: 1px solid var(--glow-off) !important;
      box-shadow: inset 1px 0 4px rgba(106, 168, 79, 0.03) !important;
    }

    /* 履歴エリア */
    #history-area {
      flex: 0 0 18%;
      /* 測量室と同じ（667px以下） */
      padding: 6px;
      overflow-x: hidden;
      overflow-y: visible;
      /* 個別スクロールを無効化 */
      word-wrap: break-word;
      word-break: break-word;
    }

    /* 左エリア */
    #left-area {
      flex: 0 0 16%;
      padding: 6px;
      overflow-x: hidden;
      overflow-y: visible;
      /* 個別スクロールを無効化 */
      word-wrap: break-word;
      word-break: break-word;
    }

    /* 中央エリア（段階的に変化した最終値） */
    #center-area {
      flex: 0 0 21.8%;
      padding: 6px;
      overflow-x: hidden;
      overflow-y: visible;
      /* 個別スクロールを無効化 */
      word-wrap: break-word;
      word-break: break-word;
      min-width: 0;
    }

    /* サイドエリア */
    #build-area {
      flex: 0 0 20%;
      padding: 6px;
      overflow-x: hidden;
      overflow-y: visible;
      /* 個別スクロールを無効化 */
      word-wrap: break-word;
      word-break: break-word;
    }

    /* リソースエリア（段階的に変化した最終値） */
    #right-area {
      flex: 0 0 15.2%;
      padding: 6px;
      overflow-x: hidden;
      overflow-y: visible;
      /* 個別スクロールを無効化 */
      word-wrap: break-word;
      word-break: break-word;
    }

    /* ヘッダーの調整 */
    #header {
      padding: 4px 6px;
      gap: 8px;
    }

    #game-title {
      font-size: 1em;
      min-width: 80px;
    }

    #tabs {
      gap: 4px;
      flex-wrap: wrap;
    }

    .tab {
      padding: 4px 6px;
      font-size: 0.7em;
    }

    .header-btn {
      min-width: 28px;
      height: 28px;
      padding: 2px;
    }

    #sound-icon,
    #save-icon {
      width: 20px;
      height: 20px;
    }

    /* フッターの調整 */
    #footer {
      padding: 2px 4px;
      min-height: 40px;
    }

    #footer-row-1,
    #footer-row-2 {
      font-size: 0.7em;
    }

    /* 履歴エリアの調整（個別スクロールを無効化） */
    #log-list {
      font-size: 0.7em;
      max-height: none;
      overflow-y: visible;
      /* 個別スクロールを無効化、メインコンテンツと連動 */
    }

    /* リソースエリアの調整（個別スクロールを無効化） */
    #resource-list {
      font-size: 0.7em;
      max-height: none;
      overflow-y: visible;
      /* 個別スクロールを無効化、メインコンテンツと連動 */
    }

    /* アクションボタンの調整 */
    .action-column {
      gap: 2px;
    }

    .btn-block {
      padding: 4px 6px;
      font-size: 0.7em;
      min-height: 32px;
      word-wrap: break-word;
      word-break: break-word;
      white-space: normal;
    }

    /* 宇宙船前のボタンラベルテキストを折り返し可能にする（クールタイムバーにかからないように） */
    #main.layout-home .btn-main-wrap {
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    #main.layout-home .btn-main-label {
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    /* すべてのテキスト要素がはみ出さないように */
    h3,
    h4,
    p,
    span,
    div,
    button {
      word-wrap: break-word;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    /* ストーリーモーダルの調整（ポートレートウィンドウ+モーダルの高さを含める） */
    #story-overlay {
      align-items: center;
      justify-content: center;
      padding: 10px;
      overflow: hidden;
      box-sizing: border-box;
    }

    #story-modal {
      padding: 6px;
      max-width: 95vw;
      max-height: calc(100vh - 20px);
      /* オーバーレイのパディング(10px * 2)を考慮 */
      width: 90%;
      min-height: auto;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
    }

    #story-windows {
      margin-bottom: 4px;
    }

    #story-text {
      font-size: 1.2em !important;
      line-height: 1.8;
      padding: 4px;
      max-height: none;
      /* モーダル全体がスクロール可能なので制限なし */
      overflow-y: visible;
    }

    #story-choices {
      padding: 4px;
    }

    .story-choice-btn {
      padding: 4px 8px;
    }

    /* achievement-storyクラスの場合の調整 */
    #story-overlay.achievement-story #story-modal {
      max-height: 70vh;
      padding: 6px;
    }

    #story-overlay.achievement-story #story-text {
      font-size: 1.2em !important;
      line-height: 2;
      padding: 4px;
      max-height: 50vh;
    }

    #story-overlay.achievement-story #story-scroll-container {
      max-height: 50vh;
    }

    /* intro-fadeを確実に非表示にする */
    #intro-fade {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      z-index: -1 !important;
      position: fixed !important;
      top: -9999px !important;
      left: -9999px !important;
      width: 0 !important;
      height: 0 !important;
    }

    /* モーダルの調整 */
    #modal {
      padding: 8px;
      max-width: 95vw;
    }

    #modal-message {
      font-size: 0.8em;
      padding: 6px;
    }

    /* ターミナル表示ウィンドウの縦幅をさらに小さく（667px以下） */
    #cave-display {
      height: 14px !important;
      min-height: 14px !important;
      padding: 1px;
    }

    /* ターミナルキーボードの調整（667px以下、8列維持） */
    #cave-keyboard {
      grid-template-columns: repeat(8, 1fr);
      gap: 1px;
      width: 100%;
    }

    .cave-key {
      padding: 1px 2px;
      font-size: 0.6em;
      min-width: 18px;
      min-height: 16px;
      height: 16px;
    }

    /* 実績グリッドの調整 */
    .achievement-block {
      padding: 4px;
      font-size: 0.7em;
    }

    /* 操縦室モニタの調整 */
    #control-monitor {
      height: 150px;
    }

    /* 遺構探索の調整 */
    #ruins-visual {
      gap: 2px;
    }

    .ruins-visual-cell {
      min-height: 40px;
    }

    /* 戦闘UIの調整 */
    .battle-actions button {
      padding: 4px 8px;
      font-size: 0.7em;
    }

    /* 取引UIの調整 */
    .trade-item {
      padding: 4px;
      font-size: 0.7em;
    }

    /* 保管室UIの調整 */
    .storage-creature {
      padding: 4px;
    }

    .storage-creature-image {
      width: 40px;
      height: 40px;
    }

    /* 整備室モジュールボタンの調整 */
    .maintenance-module-btn {
      padding: 4px;
      min-height: 40px;
      font-size: 0.7em;
    }

    /* スクロールボタンの表示（レスポンシブ対応時 - 最優先で表示） */
    #main-scroll-up,
    #main-scroll-down {
      position: fixed !important;
      right: 10px !important;
      z-index: 10000 !important;
      /* 最優先 */
      width: 28px !important;
      height: 28px !important;
      font-size: 1em !important;
      display: flex !important;
      /* 常に表示 */
    }

    #main-scroll-up {
      top: 45px !important;
      /* ヘッダーのすぐ下（レスポンシブ時はヘッダーが小さい） */
    }

    #main-scroll-down {
      bottom: 65px !important;
      /* フッターのすぐ上（レスポンシブ時はフッターが小さい） */
    }

    #main-scroll-up.hidden,
    #main-scroll-down.hidden {
      display: flex !important;
      /* hiddenでも表示 */
      opacity: 0.3 !important;
      pointer-events: none !important;
    }

    /* レイアウトクラスごとの調整（667px以下、合計100%になるように調整） */
    #main.layout-save #center-area {
      flex: 0 0 70%;
    }

    #main.layout-save #right-area {
      flex: 0 0 15.2%;
      /* 100%を超えないように調整 */
    }

    #main.layout-story #left-area {
      flex: 0 0 0%;
      display: none;
    }

    #main.layout-story #center-area {
      flex: 0 0 50%;
    }

    #main.layout-story #build-area {
      flex: 0 0 20%;
    }

    #main.layout-story #right-area {
      flex: 0 0 15.2%;
      /* 100%を超えないように調整 */
    }

    #main.layout-cave #left-area {
      flex: 0 0 0%;
      display: none;
    }

    #main.layout-cave #center-area {
      flex: 0 0 50%;
    }

    #main.layout-cave #build-area {
      flex: 0 0 20%;
    }

    #main.layout-cave #right-area {
      flex: 0 0 15.2%;
      /* 100%を超えないように調整 */
    }

    #main.layout-battle #left-area {
      flex: 0 0 0%;
      display: none;
    }

    #main.layout-battle #center-area {
      flex: 0 0 60%;
    }

    #main.layout-battle #build-area {
      flex: 0 0 30%;
    }

    #main.layout-battle #right-area {
      flex: 0 0 15.2%;
      /* 100%を超えないように調整 */
    }

    #main.layout-trade #left-area {
      flex: 0 0 0%;
      display: none;
    }

    #main.layout-trade #center-area {
      flex: 0 0 60%;
    }

    #main.layout-trade #build-area {
      flex: 0 0 0%;
      display: none;
    }

    #main.layout-trade #right-area {
      flex: 0 0 15.2%;
      /* 100%を超えないように調整 */
    }

    #main.layout-storage #left-area {
      flex: 0 0 0%;
      display: none;
    }

    #main.layout-storage #center-area {
      flex: 0 0 70%;
    }

    #main.layout-storage #build-area {
      flex: 0 0 0%;
      display: none;
    }

    #main.layout-storage #right-area {
      flex: 0 0 15.2%;
      /* 100%を超えないように調整 */
    }

    #main.layout-maintenance #left-area {
      flex: 0 0 20%;
    }

    #main.layout-maintenance #center-area {
      flex: 0 0 50%;
    }

    #main.layout-maintenance #build-area {
      flex: 0 0 20%;
    }

    #main.layout-maintenance #right-area {
      flex: 0 0 15.2%;
      /* 100%を超えないように調整 */
    }

    #main.layout-ruins #left-area {
      flex: 0 0 0%;
      display: none;
    }

    #main.layout-ruins #center-area {
      flex: 0 0 65%;
      /* 100%を超えないように調整 */
    }

    #main.layout-ruins #build-area {
      flex: 0 0 20%;
    }

    #main.layout-ruins #right-area {
      flex: 0 0 15.2%;
      /* 100%を超えないように調整 */
    }

    #main.layout-control #left-area {
      flex: 0 0 20%;
    }

    #main.layout-control #center-area {
      flex: 0 0 45%;
      /* 100%を超えないように調整 */
    }

    #main.layout-control #build-area {
      flex: 0 0 20%;
    }

    #main.layout-control #right-area {
      flex: 0 0 15.2%;
      /* 100%を超えないように調整 */
    }
  }
}

/* 船内見取り図のスクロールバーを非表示にする（機能は維持） */
#ship-map {
  overflow: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

#ship-map::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}