/*
 * 探索パートの共通エンジンCSS。章(chapter)が増えても全章で使い回す部分だけを置く。
 * 部屋(マップ)ごとの内容はここには書かず、各章のHTML側(インラインscript内の
 * window.GAME_CONFIG)に書く。このファイルを直接編集すれば全章に反映される。
 */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  background: transparent;
  min-height: 100vh;
}

.frame {
  /* .frame-inner(実際のゲーム画面)を囲む外枠。paddingの分だけ.frame-innerとの間に
     余白ができる(左右64px・上下32px)。画面いっぱいに使うための拡大(整数倍のみ)は
     JSがtransform: scale()でこの要素にかける。position/transform-originはJS側の
     拡大・中央寄せ計算とセットで決めている(top leftで統一) */
  position: absolute;
  top: 0;
  left: 0;
  width: 1128px; /* .frame-innerの基準幅(1000px) + 左右64pxずつ */
  height: auto;
  padding: 32px 64px;
  box-sizing: border-box;
  transform-origin: top left;
  background: #000;
}

.frame-inner {
  /* アイテム欄・テキスト・ゲーム画面を含めた全体の「基準サイズ」。 */
  width: 1000px;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
}
/* --- メモのポップアップ(調べたものの説明などを表示する)。.frame-innerの外に置いて、
   ぼかしの影響を受けない状態で常にくっきり表示する --- */
.note-popup {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.note-popup.open { display: flex; }
.note-popup-blur {
  /* すりガラス風の背景ぼかし。背景そのもの(filter: blur)ではなく、手前に薄い白の膜を1枚重ねて
     backdrop-filterでその奥だけをぼかす(ポップアップの箱自体はぼけない) */
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.00);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.note-popup-box {
  /* 紙の見た目(背景・枠線・折り目)は共通のposter.png(空の便箋)を使う。
     popupContent側は、この上に乗せる文字(タイトル・行・フッター)だけを書けばいい */
  position: relative;
  width: 448px;
  height: 576px;
  background: url('/img/game/poster.png') no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated; /* PNGをドット絵のままくっきり拡大表示する(背景画像・スプライトと同じ扱い) */
  color: #000;
}
.note-popup-box img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* --- チェスト型ポップアップ(冷蔵庫など、中身のアイテムをスロット表示するタイプ)。
   便箋(poster.png)を使わず、サイト共通のダークパネルの見た目にする --- */
.note-popup-box.chest {
  width: auto;
  height: auto;
  background: var(--color-surface);
  border: solid 2px var(--color-cyan-dim);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chest-items {
  display: flex;
  gap: 16px;
}
.note-popup-box.chest .chest-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  image-rendering: pixelated;
}

/* --- poster.png(便箋)の上に乗せるテキスト用の部品。座標はposter.pngの見た目に合わせてある --- */
.note-manual-title {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 24px;
}
.note-manual-title rt {
  font-size: 10px;
}
.note-manual-divider {
  position: absolute;
  top: 88px;
  left: 32px;
  right: 32px;
  border-top: 2px solid #000;
}
.note-manual-body {
  /* キーの一覧ではなく、普通の文章を乗せたい張り紙用(テスト表示含む)。
     あえてoverflowは隠さず、はみ出す場合はそのまま見える状態にしてある
     (余白調整のためにまず「はみ出すかどうか」を確認できるように) */
  position: absolute;
  top: 112px;
  left: 32px;
  right: 32px;
  font-family: 'PixelMplus10', sans-serif;
  font-size: 20px;
  line-height: 1.8;
}
.note-manual-row {
  position: absolute;
  left: 32px;
  right: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* :nth-of-type()はクラスを見ずに「div何番目か」で数えてしまうため使えない(タイトルや区切り線も
   divなのでズレる)。行ごとに専用クラスをつけて位置を指定する */
.note-manual-row-1 { top: 154px; }
.note-manual-row-2 { top: 228px; }
.note-manual-row-3 { top: 302px; }
.note-manual-label {
  flex-shrink: 0;
  font-size: 18px;
  white-space: nowrap;
}
.note-manual-label rt {
  font-size: 9px;
}
.note-manual-dots {
  flex: 1;
  height: 4px;
  background-image: linear-gradient(90deg, #999 0 4px, transparent 4px 8px);
  background-size: 8px 4px;
  background-repeat: repeat-x;
}
.note-manual-keys {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}
.note-manual-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 2px solid #000;
  background: #d9d9d9;
  box-shadow: 2px 2px 0 0 #000;
  font-size: 14px;
  font-family: inherit;
}
.note-manual-footer {
  /* 閉じるアイコン自体はposter.png側にすでに描かれているので、文字だけをその左に添える */
  position: absolute;
  top: 512px;
  left: 32px;
  right: 86px;
  text-align: right;
  font-size: 16px;
  color: #888;
}

/* --- アイテムアイコン列 --- */
.item-row {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start; /* 中身(.item-row-track)が画面より狭い時は左詰め */
  overflow: hidden; /* はみ出た分はここで隠す。スクロールはネイティブに任せず自前JSのtransformで動かす */
  touch-action: none; /* ブラウザ側のジェスチャー処理を無効化し、完全に自前JSで指を追跡する */
  padding: 4px 2px 20px;
}
.item-row-track {
  display: flex; /* DOM順(腕時計が最初)のまま、腕時計が1番左に来る通常の並び */
  flex-shrink: 0;
  gap: 16px;
}
/* アイテムアイコンの枠デザイン。世界観サイト側(lump-test.css)の
   「ドット絵サムネの四隅にドットのコーナーをつける」実装と揃えてある */
.item-icon {
  flex-shrink: 0; /* 増えても縮めず、はみ出た分をドラッグで見られるようにする */
  position: relative;
  width: 64px;
  height: 64px;
  opacity: 0.6; /* 選択中/ホバー中だけ1にする。img個別ではなくアイコン全体(=四隅svgも含む)にかけることで
    枠色だけ薄くなって四隅は薄くならない、というズレを防ぐ */
}
.item-icon img {
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  width: 100%;
  height: 100%;
  outline: solid 2px #7d7d7d;
  box-shadow: 4px 4px 0 0 #7d7d7d;
  transition: none; /* サイト共通のimg{transition:all 0.3s}を打ち消す。これが効いたままだと、
    outline/box-shadowの色だけ0.3秒かけてゆっくり変わり、瞬時に切り替わる四隅のsvgとズレて見える */
}
.corner-left-top, .corner-right-top, .corner-left-bottom, .corner-right-bottom {
  position: absolute;
  content: "";
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(-50%) translateY(-50%);
}
.corner-left-top {
  background-image: url(/img/common/corner-left-top.svg);
  width: 8px;
  height: 6px;
  top: 1px;
  left: 2px;
}
.corner-right-top {
  background-image: url(/img/common/corner-right-top.svg);
  width: 8px;
  height: 10px;
  top: 3px;
  right: -8px;
}
.corner-left-bottom {
  background-image: url(/img/common/corner-left-bottom.svg);
  width: 12px;
  height: 8px;
  bottom: -8px;
  left: 4px;
}
.corner-right-bottom {
  background-image: url(/img/common/corner-right-bottom.svg);
  width: 8px;
  height: 8px;
  bottom: -8px;
  right: -8px;
}
#watchIcon {
  cursor: pointer;
}
#watchIcon.active {
  opacity: 1;
}
#watchIcon.active img {
  outline-color: #f2c94c;
  box-shadow: 4px 4px 0 0 #f2c94c, 0 0 8px rgba(242, 201, 76, 0.6);
}

/* アイテム欄の選択モード(↑で入り、←→で選択移動、↓で抜ける)。選択中のアイテムだけ枠と
   コーナー装飾を水色版に切り替える。マウスホバーでも同じ見た目にする */
.item-icon.selected,
.item-icon:hover {
  opacity: 1;
}
.item-icon.selected img,
.item-icon:hover img {
  outline-color: #00cccc;
  box-shadow: 4px 4px 0 0 #00cccc;
}
.item-icon.selected .corner-left-top,
.item-icon:hover .corner-left-top { background-image: url(/img/common/corner-left-top-b.svg); }
.item-icon.selected .corner-right-top,
.item-icon:hover .corner-right-top { background-image: url(/img/common/corner-right-top-b.svg); }
.item-icon.selected .corner-left-bottom,
.item-icon:hover .corner-left-bottom { background-image: url(/img/common/corner-left-bottom-b.svg); }
.item-icon.selected .corner-right-bottom,
.item-icon:hover .corner-right-bottom { background-image: url(/img/common/corner-right-bottom-b.svg); }

/* --- 探索シーン本体(カメラが追従する広いワールドを窓から見るイメージ) ---
   このページはPC専用。表示サイズは全てあらかじめ2倍(ネイティブ)で設計してあるので、
   ここにCSSのscale()は一切使わない(スケールと当たり判定/カメラ計算がズレるバグの元だったため) */
.viewport {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  height: 512px; /* 元の256pxの2倍 */
  overflow: hidden;
  background: #000;
}
.viewport.pannable { cursor: grab; } /* ズーム中はドラッグでカメラを動かせることが分かるように */
.viewport.pannable.dragging { cursor: grabbing; }
.hud-buttons {
  position: absolute;
  bottom: 10px;
  right: 8px;
  z-index: 40;
  display: flex;
  gap: 6px;
}
.zoom-toggle,
.menu-button {
  background: rgba(28, 28, 28, 0.85);
  color: #ccc;
  border: 1px solid #666;
  border-radius: 0;
  font-size: 11px;
  padding: 4px 6px 4px 8px;
  letter-spacing: 0.15rem;
  cursor: pointer;
}
.zoom-toggle.zoomed {
  background: rgba(242, 201, 76, 0.85);
  color: #2a2000;
  border-color: #fff3c4;
}

/* --- 記念写真用の一時ズーム(さらに2倍)。ゲーム的な数値は一切変えず、見た目だけ拡大する ---
   横方向はleft基準(カメラ計算(camX)の座標系と揃える。centerだとマップ端でズレる)。
   縦方向は地面ラインのさらに248px上(=地面までの距離124pxの2倍)が基準点で、
   ズーム後に足がちょうど表示領域の下端に来て床が1pxも見えなくなるようにしてある。
   アニメーションさせず瞬時に切り替える(ふわっと動かすと一瞬視界がブレて見づらいため) */
.viewport-zoom {
  position: absolute;
  inset: 0;
  transform-origin: left calc(100% - 248px);
}
.viewport-zoom.zoomed {
  transform: scale(2);
}

.dark-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.75); /* デフォルトは薄暗い状態 */
  z-index: 10;
}
.world {
  position: absolute;
  top: 0;
  left: 0;
  /* width/height/background-imageは部屋ごとに違うので、初期値はここに置かず
     JS側(loadRoom/GAME_CONFIGの初期部屋)で必ず設定する */
  image-rendering: pixelated; /* 2倍表示にしても輪郭がボケずドット絵のままくっきり出るように */
}
.world-layer {
  /* キャラより手前に見せたいもの(テーブルの手前側など)だけを描いた透過PNGを重ねるための層。
     背景(.world)と同じ大きさ・同じカメラ移動に追従させたいので、.worldの中に.charの後ろ
     (=DOM順で後ろ、つまり見た目は手前)に置き、サイズは.worldにぴったり合わせている。
     背景を持たない部屋ではJS側でbackground-imageを'none'にする */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  pointer-events: none;
}
.world::before {
  /* 床のさらに下(地下)。配管など将来の見せ場用に、ズーム中のドラッグでだけ覗けるようにしてある(通常のカメラでは映らない)。
     深さは床の厚み(128px)ぶんだけ。
     .world自体の高さ/top(地面の基準位置)は変えず、::beforeだけが.worldの外側にはみ出す形にしている */
  content: "";
  position: absolute;
  bottom: -132px;
  left: 0;
  right: 0;
  height: 128px;
  background: linear-gradient(180deg, #232327 0%, #000 100%);
}
.interact-marker {
  /* ドアに限らず、調べられるオブジェクト全般(張り紙など)の上に出るアイコン。
     アイコン画像(16x16)自体に黄色いバッジ背景が焼き込み済みなので、ここでは枠を付けない */
  position: absolute;
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: markerBounce 0.9s ease-in-out infinite;
  z-index: 20;
}
.interact-marker img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
@keyframes markerBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.char {
  /* 清沼スプライトシート(48x76pxのセル、6列×3行: 1行目idle/2行目walk/3行目run)を
     2倍サイズで表示(image-rendering:pixelatedでドットが荒れずくっきり拡大される)。
     leftは部屋ごとの初期スポーン位置によって変わるので、ここでは指定しない
     (JSが読み込み時に必ずposXの値で上書きするので、指定しなくても表示は乱れない) */
  position: absolute;
  bottom: 124px;
  width: 96px;
  height: 152px;
  transform-origin: bottom center;
  background-image: url('/img/game/kiyonuma/sprite-sheet.png');
  background-repeat: no-repeat;
  background-size: 576px 608px; /* 元画像(288x304、4行目=専用の空中ポーズを追加)の2倍 */
  background-position: 0 0; /* 通常時=idle 1コマ目 */
  image-rendering: pixelated;
}
.char.idle    { animation: spriteIdle 1s steps(6) infinite; }
.char.walking { animation: spriteWalk 1s steps(6) infinite; }
.char.dashing { animation: spriteRun 0.7s steps(6) infinite; } /* .walkingと同時に付くのでこちらが優先される */
.char.airborne { background-position: 0 -456px; animation: none; } /* 4行目の専用の空中ポーズ */
@keyframes spriteIdle { from { background-position: 0 0; }     to { background-position: -576px 0; } }
@keyframes spriteWalk { from { background-position: 0 -152px; }  to { background-position: -576px -152px; } }
@keyframes spriteRun  { from { background-position: 0 -304px; } to { background-position: -576px -304px; } }
.char.flip { transform: scaleX(-1); }