/* =========================================================
   FANTASY BLASTER - スタイルシート
   - 全画面ダーク背景にネオン枠のゲーム画面を中央配置
   - canvas は内部解像度固定、CSSで画面幅にフィット
   - スマホではタッチUI（十字キー＋ショット）を重ねる
   ========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #07071a;
  /* 上下グラデで宇宙っぽい雰囲気 */
  background: radial-gradient(circle at 50% 30%, #161640 0%, #07071a 70%);
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  touch-action: none;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ---------- ゲーム画面ラッパー ---------- */
#gameWrap {
  position: relative;
  width: 100%;
  max-width: 960px;
  /* 高さは canvas のアスペクト比に追従 */
}

#gameCanvas {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border: 3px solid #ffd83a;
  border-radius: 6px;
  box-shadow: 0 0 36px rgba(255, 216, 58, 0.45),
              0 0 70px rgba(255, 90, 180, 0.25),
              inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  image-rendering: pixelated;          /* ドット感を保つ */
  image-rendering: crisp-edges;
}

/* ---------- 操作ヒント（PC） ---------- */
#hint {
  margin-top: 8px;
  color: #9aa0c8;
  font-size: 12px;
  text-align: center;
  padding: 0 10px;
  line-height: 1.6;
}

/* ---------- ローディング ---------- */
#loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07071a;
  border-radius: 6px;
  z-index: 50;
  transition: opacity 0.4s;
}
#loading.hidden { opacity: 0; pointer-events: none; }
.loadInner { text-align: center; color: #fff; }
.loadTitle {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffd83a;
  text-shadow: 0 0 14px rgba(255, 216, 58, 0.7);
  margin-bottom: 18px;
}
.loadBar {
  width: 240px;
  height: 14px;
  margin: 0 auto;
  border: 2px solid #ffd83a;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
#loadFill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ff5ab4, #ffd83a);
  transition: width 0.2s;
}
.loadMsg { margin-top: 10px; font-size: 12px; color: #aab; }

/* =========================================================
   タッチ操作UI（スマホ用）
   - 既定は非表示。JSがタッチ環境を検知して表示する。
   ========================================================= */
#touchCtrl {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;       /* 子要素だけ反応 */
  z-index: 30;
}
body.touch #touchCtrl { display: block; }

/* 十字キー */
#dpad {
  position: absolute;
  left: 3%;
  bottom: 6%;
  width: 38vw;
  max-width: 190px;
  aspect-ratio: 1 / 1;
  pointer-events: auto;
}
.dpBtn {
  position: absolute;
  width: 33.3%;
  height: 33.3%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5vw;
  color: #fff;
  background: rgba(255, 216, 58, 0.22);
  border: 2px solid rgba(255, 216, 58, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(2px);
}
.dpBtn.pressed { background: rgba(255, 216, 58, 0.55); }
.dpBtn[data-key="up"]    { top: 0;    left: 33.3%; }
.dpBtn[data-key="left"]  { top: 33.3%; left: 0;    }
.dpBtn[data-key="right"] { top: 33.3%; right: 0;   }
.dpBtn[data-key="down"]  { bottom: 0; left: 33.3%; }

/* 右側ボタン */
#rbtns {
  position: absolute;
  right: 4%;
  bottom: 7%;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
}
.actBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4vw;
  font-weight: 700;
  color: #fff;
  border-radius: 50%;
  width: 16vw; height: 16vw;
  max-width: 86px; max-height: 86px;
  background: rgba(120, 180, 255, 0.25);
  border: 2px solid rgba(120, 180, 255, 0.7);
}
.actBtn.fire {
  width: 22vw; height: 22vw;
  max-width: 110px; max-height: 110px;
  font-size: 4vw;
  background: rgba(255, 80, 140, 0.3);
  border: 3px solid rgba(255, 80, 140, 0.8);
}
.actBtn.pressed { filter: brightness(1.6); }

/* 上部ミニボタン */
#topBtns {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.miniBtn {
  min-width: 40px;
  padding: 6px 10px;
  font-size: 13px;
  color: #cfe;
  text-align: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
}
.miniBtn.pressed { background: rgba(255, 255, 255, 0.3); }

/* 横向きスマホでヒントを隠す */
@media (max-width: 820px) {
  #hint { font-size: 10px; }
}
@media (max-height: 480px) {
  #hint { display: none; }
}

/* 縦持ち警告オーバーレイ */
#rotateHint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a1f;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

/* スマホ縦持ち（幅<高さ かつ 幅が狭い）でのみ表示 */
@media (max-width: 600px) and (orientation: portrait) {
  #rotateHint { display: flex; }
  #gameWrap   { display: none; }
  #hint       { display: none; }
}

/* スマホ横向きでタッチUIを最適化 */
@media (max-height: 420px) {
  /* ランドスケープスマホ: タッチボタンをコンパクトに */
  #dpad {
    width: 28vw;
    max-width: 150px;
  }
  .actBtn {
    width: 13vw; height: 13vw;
    max-width: 70px; max-height: 70px;
  }
  .actBtn.fire {
    width: 17vw; height: 17vw;
    max-width: 90px; max-height: 90px;
  }
}