/* ============================================================
   色・フォントなどをまとめて定義(CSS変数)
   ここの値を変えるだけで全体の色味を調整できます
============================================================ */
:root {
  --sky: #bcdcec;
  --grass: #6e8f4c;
  --grass-dark: #4f6d35;
  --soil-1: #9c7350;
  --soil-2: #79542f;
  --soil-3: #4a3323;
  --tunnel: #e8d2ae;
  --tunnel-wall: #c9a06e;
  --tunnel-outline: #4a3323; /* 部屋の輪郭線・出入り口の穴など、濃い色のまま残したい箇所用 */

  /* 青ゲルステージ用の色(地中が土の代わりに透明感のある青ゲルになる) */
  --gel-1: #b8ecf5;      /* 浅い部分。明るく透明感のある水色 */
  --gel-2: #7ed3e8;      /* 中間の深さ */
  --gel-3: #46a9c9;      /* 深い部分。少し濃いめの青 */
  --gel-tunnel: #4fb8d8;      /* 通路(掘られた空洞)。周りのゲルより少し濃い青 */
  --gel-tunnel-wall: #2f8fb3;  /* 通路の壁。ゲル色をさらに濃くした青 */

  --amber: #e3a13d;
  --amber-soft: #f0c581;
  --cream: #f3e9d8;
  --frame-wood-light: #6b4a32;
  --frame-wood-dark: #3a281c;
  --queen-gold: #d9b65c;

  /* 部屋の種類ごとの色 */
  --room-queen: #d9b65c;       /* 女王の部屋(金色、特別な存在として目立たせる) */
  --room-incubation: #f3e9d8;  /* 孵化室(卵のような、白っぽいクリーム色) */
  --room-nursery: #a9c98a;     /* 育児室(幼虫を育てる、やわらかい黄緑色) */
  --room-storage: #e3a13d;     /* 貯蔵室(食料庫、アンバー色) */
  --room-honeypot: #c9762e;    /* ハニーポットアント専用部屋(蜜を思わせる濃いオレンジ) */
  --room-breeding: #b98bc9;    /* 繁殖室(新しい女王・雄アリが育つ、特別感のある紫) */

  --font-heading: 'Zen Maru Gothic', sans-serif;
  --font-number: 'DotGothic16', sans-serif;
}

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

html, body {
  height: 100%;
}

body {
  font-family: var(--font-heading);
  background: linear-gradient(180deg, #2a2018 0%, #1c140e 100%);
  color: var(--cream);
  min-height: 100dvh; /* iPhone Safariのアドレスバー表示/非表示にも追従する高さ指定 */
  display: flex;
  overflow: hidden; /* iOS Safari特有の「引っ張って伸びる」バウンス挙動を抑える */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent; /* タップ時の灰色ハイライトを消す */
  -webkit-text-size-adjust: 100%;
}

.hidden {
  display: none !important;
}

/* ============================================================
   セットアップ画面
============================================================ */
.setup-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px;
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.setup-card {
  background: linear-gradient(180deg, #f3e9d8 0%, #e8dac2 100%);
  color: #3a281c;
  border-radius: 18px;
  padding: 32px 26px;
  max-width: 400px; /* iPhone 15/15 Pro(幅393pt)〜15 Plus(幅430pt)を想定した収まり */
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.eyebrow {
  font-family: var(--font-number);
  letter-spacing: 0.15em;
  font-size: 12px;
  color: var(--frame-wood-light);
  margin-bottom: 6px;
}

.setup-card h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--frame-wood-dark);
}

.setup-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #5a4630;
  margin-bottom: 24px;
}

.setup-field {
  text-align: left;
  margin-bottom: 24px;
}

.setup-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--frame-wood-dark);
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--amber);
}

.slider-value {
  font-family: var(--font-number);
  font-size: 22px;
  min-width: 24px;
  text-align: center;
  color: var(--frame-wood-dark);
}

.slider-unit {
  font-size: 13px;
  color: #5a4630;
}

.start-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--amber-soft), var(--amber));
  color: #3a281c;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 6px 0 #b3762a;
  transition: transform 0.1s ease;
}

.start-btn + .start-btn {
  margin-top: 12px;
}

.start-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #b3762a;
}

.start-btn.secondary-btn {
  background: linear-gradient(180deg, #e8dac2, #d8c6a4);
  color: #5a4630;
  box-shadow: 0 6px 0 #b3a37e;
}

.start-btn.secondary-btn:active {
  box-shadow: 0 2px 0 #b3a37e;
}

/* ============================================================
   メイン画面全体
============================================================ */
.game-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 480px; /* iPhoneの縦画面幅を想定。タブレット等で開いても広がりすぎないための上限 */
  margin: 0 auto;
  padding: 10px;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* ---------------- ステータスバー ---------------- */
.status-bar {
  width: 100%;
  display: flex;
  gap: 20px;
  background: linear-gradient(180deg, #3a281c, #2a1c13);
  border: 1px solid #5c4029;
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cream);
}

.status-icon {
  font-size: 16px;
}

.status-number {
  font-family: var(--font-number);
  font-size: 20px;
  color: var(--amber-soft);
}

.food-status {
  flex: 1;
}

.food-bar {
  flex: 1;
  height: 10px;
  background: #1c140e;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #5c4029;
}

.food-bar-fill {
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg, #c98a2e, var(--amber-soft));
  transition: width 0.4s ease;
}

/* ---------------- テラリウム(巣の額縁) ---------------- */
.terrarium-frame {
  position: relative;
  width: 100%;
  flex: 1; /* ステータスバーと餌トレイの残り縦スペースをすべて使う */
  min-height: 0; /* flexコンテナ内で正しく縮小・拡大させるために必要 */
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(160deg, var(--frame-wood-light), var(--frame-wood-dark) 70%);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.15);
}

#nest-canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35);
  cursor: default;
}

.terrarium-frame.drag-over #nest-canvas {
  filter: brightness(1.08);
}

.food-toast {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: rgba(58, 40, 28, 0.9);
  color: var(--amber-soft);
  font-family: var(--font-number);
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.food-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(6px);
}

/* 巣に関するログを1行だけ表示するエリア(地上のすぐ下、左上に配置) */
.nest-log {
  position: absolute;
  top: 17%;
  left: 26px;
  right: 26px;
  font-family: var(--font-number); /* 2Dドット文字風フォント */
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--cream);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ログ表示のすぐ下に置く「中断して戻る」ボタン */
.interrupt-btn {
  position: absolute;
  top: calc(17% + 20px);
  left: 26px;
  font-family: var(--font-heading);
  font-size: 11px;
  color: var(--cream);
  background: rgba(42, 28, 19, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}

.interrupt-btn:active {
  background: rgba(42, 28, 19, 0.95);
}

/* ---------------- 中断確認モーダル ---------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.modal-box {
  background: linear-gradient(180deg, #f3e9d8 0%, #e8dac2 100%);
  color: #3a281c;
  border-radius: 16px;
  padding: 26px 22px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.modal-message {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.modal-submessage {
  font-size: 13px;
  color: #5a4630;
  line-height: 1.6;
  margin-bottom: 20px;
}

.modal-actions {
  display: flex;
  gap: 10px;
}

.modal-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.modal-btn-confirm {
  background: linear-gradient(180deg, var(--amber-soft), var(--amber));
  color: #3a281c;
  box-shadow: 0 4px 0 #b3762a;
}

.modal-btn-confirm:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b3762a;
}

.modal-btn-cancel {
  background: linear-gradient(180deg, #e8dac2, #d8c6a4);
  color: #5a4630;
  box-shadow: 0 4px 0 #b3a37e;
}

.modal-btn-cancel:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b3a37e;
}

/* ---------------- 餌トレイ ---------------- */
.food-tray {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #3a281c, #2a1c13);
  border: 1px solid #5c4029;
  border-radius: 14px;
  flex-shrink: 0; /* テラリウムが伸びても、このトレイは潰れないようにする */
}

.food-item {
  font-size: 40px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* 指でつまんだときにページ全体がスクロールしてしまうのを防ぐ */
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
  transition: transform 0.15s ease, opacity 0.15s ease;
  padding: 8px; /* タップしやすいように、見た目より広めの当たり判定にする */
}

.food-item:active {
  cursor: grabbing;
}

.food-item.dragging {
  opacity: 0.35;
}

/* 指の動きに追従する「餐の分身」。指の下に常に表示される */
.food-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  font-size: 40px;
  transform: translate(-50%, -50%) scale(1.15);
  pointer-events: none; /* この要素自体が指の操作を邪魔しないようにする */
  z-index: 999;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
}

.food-hint {
  font-size: 12px;
  color: #c9b89a;
}

@media (max-width: 480px) {
  .status-bar {
    flex-wrap: wrap;
    gap: 10px;
  }
}