:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #1b1b1f;
  color: #eee;
  font-family: system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

#console {
  width: min(94vw, 420px);
  background: linear-gradient(180deg, #6a6fb0, #565aa0);
  border-radius: 22px;
  padding: 18px 16px 22px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

h1 {
  font-size: 15px;
  text-align: center;
  margin: 0 0 10px;
  color: #f4f4ff;
  letter-spacing: 0.03em;
}

/* ---------------- ゲーム画面 ---------------- */

#screen-frame {
  background: #10131a;
  border-radius: 10px;
  padding: 10px;
  box-shadow: inset 0 0 0 3px #2b2f3d;
}

/* 表示枠。実際に画面上で見える大きさはこちらが決める(レスポンシブ) */
#viewport-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 60vh;
  overflow: hidden;
  position: relative;
  background: #000;
  border-radius: 4px;
}

/* 内部は常に「タイルサイズ × 表示タイル数」の固定解像度で描画し、
   JSで #viewport-frame の実サイズに合わせて縮小/拡大する(transform: scale)。
   これにより、画面サイズに関わらず常に決まったタイル数が表示される。 */
#viewport {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform-origin: top left;
}

#camera {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

#world {
  position: absolute;
  top: 0;
  left: 0;
  background: #0a0a0a;
}

.tile-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 重なり順(奥→手前): 地面 → オブジェクト(背面) → キャラクター → オブジェクト(前面)
   キャラクターより奥の行にある草むら等は背面に、手前(同じ行・足元)の
   行にあるものは前面に描画し、足元だけが隠れるようにする。
   どちらに描画するかは mapRenderer.js が毎フレーム判定している。 */
.tile-layer-ground {
  z-index: 0;
}

.tile-layer-object-back {
  z-index: 1;
}

#character {
  z-index: 2;
}

.tile-layer-object-front {
  z-index: 3;
}

.tile {
  position: absolute;
  image-rendering: pixelated;
  pointer-events: none;
}

#character {
  position: absolute;
  left: 0;
  top: 0;
}

#sprite {
  position: absolute;
  width: 69px;
  height: 128px;
  image-rendering: auto;
  transform-origin: top left;
}

#coords {
  text-align: center;
  font-size: 11px;
  color: #b9bce0;
  margin: 8px 0 4px;
  letter-spacing: 0.05em;
}

/* ---------------- 操作部(ゲームボーイ風) ---------------- */

#controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 0 4px;
}

#dpad {
  display: grid;
  grid-template-columns: 44px 44px 44px;
  grid-template-rows: 44px 44px 44px;
  gap: 0;
}

#dpad button {
  border: 0;
  background: #2c2f3a;
  color: #eee;
  font-size: 16px;
  touch-action: none;
}

#btn-up {
  grid-column: 2;
  grid-row: 1;
  border-radius: 6px 6px 0 0;
}
#btn-left {
  grid-column: 1;
  grid-row: 2;
  border-radius: 6px 0 0 6px;
}
#btn-down {
  grid-column: 2;
  grid-row: 3;
  border-radius: 0 0 6px 6px;
}
#btn-right {
  grid-column: 3;
  grid-row: 2;
  border-radius: 0 6px 6px 0;
}
#dpad .dpad-center {
  grid-column: 2;
  grid-row: 2;
  background: #23252e;
}

#action-buttons {
  display: grid;
  grid-template-columns: 46px 46px;
  column-gap: 10px;
  align-items: end;
}

#action-buttons button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: #b3405a;
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  touch-action: none;
}

#btn-b {
  margin-top: 18px;
}

#menu-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

#menu-buttons button {
  width: 60px;
  height: 20px;
  border-radius: 10px;
  border: 0;
  background: #4a4d5c;
  color: #ddd;
  font-size: 10px;
  letter-spacing: 0.08em;
  transform: rotate(-18deg);
  touch-action: none;
}

/* PCなど広い画面では少し余裕を持たせる */
@media (min-width: 720px) {
  #console {
    width: 420px;
  }
}