@charset "utf-8"; /* 文字化け防止 */

/* ---------- ステータス画面の武器・防具の表示崩れ防止 ---------- */

/* どんな要素よりもボタンを一番手前に配置し、クリックを許可する */
#commands {
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

#commands button {
  pointer-events: auto !important;
}

body {
  /* margin: 0; */
  background: #222;
  color: #fff;
  font-family: sans-serif;
}

/* shopModalの中にあるpanelだけに限定して適用 */
#shopModal .panel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.panel {
  background: #333;
  padding: 2%;
  border-radius: 12px;
  flex: 1; /* 親要素に合わせて幅を均等に */
}

/* 親要素（画像を囲む枠） */
.container {
  position: relative; /* これが基準になります */
  width: 450px; /* 任意のサイズ */
  height: 450px;
  overflow: hidden; /* 枠からはみ出た分を隠す場合 */
}


#enemyImage {
  pointer-events: none;
}

#log {
  height: 120px;
  background: #111;
  border-radius: 10px;
  padding: 8px;
  overflow-y: auto;
  font-size: 14px;
}

#commands {
  /* ボタンを均等配置 */
  display: flex;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
}

button {
  background: #000;
  color: #fff;
  border: 1.5px solid #fff;
  border-radius: 10px;
  padding: 8px;
  font-size: 15px;
  flex-grow: 1; /* ボタンを均等な大きさに引き伸ばす */
}

/* モーダル関連 */
#modal-overlay {
  /* 半透明の背景 */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2147483647; /* CSSで指定できる実質的な最大値 */
}

.modal-content {
  /* ウィンドウ本体 */
  background: #333;
  padding: 10px;
  border-radius: 10px;
  /* width, height はJSで制御するか、コンテンツ次第 */
}

#game-container {
  max-width: 800px; /* PC画面に合わせて最大幅を調整 */
  margin: auto; /* 画面中央に配置 */
  /* padding: 10px; */
  font-size: 14px; /* 全体的にフォントを小さく */
}

/* その他の文字要素も調整が必要であれば */
h3 {
  font-size: 14px;
}
p {
  font-size: 12px;
}


/* モーダルウィンドウのサイズも調整 */
.modal-content {
  max-width: 450px;
  width: 90%;
  overflow: auto;
}

/* --- 【調節のコード】メインエリア：PC・タブレット向け --- */
#main-area {
  display: flex;
  justify-content: center;
  align-items: stretch;    /* ★重要：左右のパネルの高さを強制的に揃える */
  gap: 10px;
  margin-bottom: 10px;
}

/* パネル（自分・敵）の基本設定：ここで大きさを統一 */
#player-status, #enemy-status {
  flex: 1;                 /* 同じ比率で幅を持たせる */
  min-width: 200px;        /* 小さくなりすぎないように制限 */
  padding: 10px;
  box-sizing: border-box;  /* 余白を含めたサイズ計算にする */
}

#battle-view {
  position: relative;
  height: 300px;
  flex: 2;
  display: flex;
  /* ★ここが重要！ stretch の影響を受けずに、自分を上下中央に配置します */
  align-self: center;      
  align-items: center;     /* 中の画像を上下中央にする */
  justify-content: center; /* 中の画像を左右中央にする */
  pointer-events: none !important;
}

/* 画像自体の設定 */
#enemyImage,
#bg {
  pointer-events: none !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- 【調節のコード】モバイル向け（600px以下）を一括管理 --- */
@media (max-width: 600px) {
  #main-area {
    display: flex;
    flex-wrap: wrap; 
    flex-direction: row; 
    justify-content: space-between;
    align-items: stretch; /* スマホでも高さを揃える */
    gap: 4px;
  }

  /* ステータスと敵情報を横に2つ並べる */
  #player-status, #enemy-status {
    flex: 1;
    min-width: 0;         /* 幅を自由に縮められるようにする */
    width: 45%;           /* 画面の約半分 */
    order: 1;             /* 上段に配置 */
    padding: 8px 5px;
    font-size: 0.85em;
    overflow-wrap: break-word; 
    word-break: break-all;
  }

  /* 画像エリアを下段に配置 */
  #battle-view {
    width: 100%;
    height: 180px;        /* スマホでは高さを抑える */
    order: 2;             /* 下段に配置 */
    flex: none;
    margin-top: 5px;
  }

  /* ボタンエリアの調整 */
  #commands {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  #commands button {
    flex: 1 1 30%;
    margin: 2px;
  }
}

#commands {
  position: relative;
  z-index: 1000;
}
#commands button {
  pointer-events: auto;
}

.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#shopModal {
  position: fixed; /* 画面に固定して浮かせる */
  top: 50%; /* 上から50%の位置 */
  left: 50%; /* 左から50%の位置 */
  transform: translate(-50%, -50%); /* 自分の大きさ分だけ微調整して真ん中へ */

  display: none; /* 普段は消しておく */
  z-index: 1000; /* 他のUIより手前に出す */
}

input[type="range"] {
  width: 80%;
  cursor: pointer;
}

/* メイン画像タイトル */
.yuusya {
  font-family:
    "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; /* フォント */
  text-align: center;
  color: #2a7ede;
  text-shadow: 2px 2px 4px #f2f3f5; /* 影 */
  font-size: 25px;
  /* -webkit-text-stroke: 1px #fbfdfc;縁 */
  box-shadow: 0px 0px 8px #f2f3f5;
  border: 4px solid#2a7ede;
}

/* ---------- 質問モーダルの見た目調整（PC/スマホ両立版） ---------- */
#quizModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 95%;
  max-width: 500px;
  
  /* 【調節のコード】基本は画面に収めるが、中身が溢れる時はスクロールを許可する */
  max-height: 95vh;     /* 90から95へ少し拡大 */
  overflow-y: auto;     /* 「hidden」から「auto」に戻して、ボタンを救出します */
  
  display: flex;
  flex-direction: column;

  padding: 15px;
  background-color: #333;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  z-index: 1001;
}

/* 【調節のコード】画像が場所を取りすぎないようにさらに制限 */
#quiz-image {
  max-height: 25vh;    /* 30vhから25vhへ。画像を少し小さくしてボタンの場所を確保 */
  width: auto;
  object-fit: contain;
  margin-bottom: 10px;
  flex-shrink: 0;      /* 画像が潰れすぎないように保護 */
}
/* 質問屋スライダー（スリム化） */
.quiz-item {
  margin-bottom: 8px; /* 15pxから8pxに短縮 */
  border-bottom: 1px solid #444;
  padding-bottom: 5px;
}

/* スライダーの横幅を確保 */
.quiz-item input[type="range"] {
  cursor: pointer;
  margin: 0 10px;
  flex: 1; /* スライダーをできるだけ長く見せる */
}

/* 数値表示の色（背景が白なら黒、黒なら白に調整してください） */
.quiz-item span {
  font-size: 0.9em;
  color: #333; /* 背景が白モーダルなら濃い色がおすすめ */
  font-weight: bold;
}

/* ---------- ステータス画面の武器・防具の表示崩れ防止 ---------- */

/* 武器と防具の行を、文字が長くても1行に収まるように設定 */
#p-weapon, #p-armor {
  font-size: 0.85em;    /* 文字を少しだけ小さくする */
  display: inline-block; /* 幅の調整を有効にする */
  vertical-align: bottom;
  max-width: 200px;      /* 枠からはみ出さない最大幅（環境に合わせて微調整可） */
  overflow: hidden;      /* はみ出た文字を隠す */
  text-overflow: ellipsis; /* 文字が入り切らない場合「...」にする */
   /* word-break: break-all; 自動改行 */
  /* white-space: nowrap;   勝手に改行させない */
}

/* 「武器：」「防具：」というラベル部分も少し整理 */
#player-status p {
  margin-bottom: 8px;    /* 行の間隔を少し広げて見やすくする */
  white-space: nowrap;   /* 1行に収める */
}

/* 画面全体を白く光らせるための設定 */
.flash-white {
  background-color: white !important;
  transition: background-color 0.1s; /* パッと白くなる */
}

/* モンスターがダメージを受けた時の「揺れ」アニメーションの定義 */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

/* このクラスをモンスター画像につけると揺れが実行される */
.shake-animation {
  animation: shake 0.3s ease-in-out;
}
/* 【調節のコード】ボス出現時の見た目の設定 */
.boss-image {
  /* position: relative; は削除し、元の absolute のままにします */
  
  /* 下端を基準にして大きくする設定 */
  transform: scale(1.35);
  transform-origin: bottom center; 
  
  /* 【重要】画面の下から 10% の位置に固定することで、リサイズしてもズレにくくします */
  bottom: 10%; 
  top: auto; /* 上からの固定を解除します */
  
  z-index: 10;
  
  /* 画像の下側を透明にする設定 */
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);

  display: block;
  margin: 0 auto;
}

/* 3から移植 */

/* フッター的注記 */
.footer-notes {
    font-size: 0.85rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.disclaimer-footer {
    text-align: center;
    margin-top: 3rem;
    font-size: 0.8rem;
    opacity: 0.6;
}

/* ハンバーガーアイコン */
.menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.menu-trigger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #2c5282; /* 誠実な水色ネイビー */
    transition: all 0.3s;
}

/* 展開メニューの隠し状態 */
.nav-links {
    position: absolute;
    top: 40px;
    right: 0;
    background: white;
    list-style: none;
    padding: 20px;
    margin: 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #bee3f8;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s;
    z-index: 2147483647;
}

/* ホバー時にメニューを展開 */
.menu-wrapper:hover .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* メニュー項目 */
.nav-links li {
    margin-bottom: 15px;
}

.nav-links li:last-child {
    margin-bottom: 0;
}

.nav-links a {
    text-decoration: none;
    color: #2c5282;
    font-size: 0.9rem;
    font-weight: 500;
    display: block;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: #3182ce; /* ホバーで少し明るい水色に */
}

.field-group {
    margin-bottom: 25px;
    /* ここが重要：ラベルと入力を確実に揃える */
    display: flex; 
    flex-direction: column; /* 縦並びに固定 */
    width: 100%; /* 親要素の幅いっぱいに広げる */
}

.field-group label {
    font-size: 0.9rem;
    font-weight: bold;
    color: #2c5282;
    margin-bottom: 8px; /* ラベルと入力欄の間の余白 */
    /* vertical-align: top; は不要になりました */
}

.field-group input, 
.field-group textarea {
    /* ここが重要：box-sizingを徹底する */
    box-sizing: border-box; 
    width: 100%; /* paddingを含めて100%になるようにする */
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 1rem;
    transition: border-color 0.3s;
    /* vertical-align: top; は不要になりました */
}

.nav-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    color: #2c5282;
    font-weight: bold;
    font-size: 12px;
}

/* メニューの包み込み */
.menu-wrapper {
    position: relative;
}

/* ruby要素自体の設定 */
.nav-links ruby {
    display: inline-flex;    /* flexに変更して制御しやすくする */
    flex-direction: column-reverse; /* 上下に並べ替え */
    ruby-align: start;       /* 標準のルビ位置を左に */
    text-align: left;
}

/* ルび（英語）部分の強制左寄せ */
.nav-links rt {
    display: block;          /* ブロック要素化して幅を制御 */
    text-align: left;        /* 文字を左寄せ */
    margin: 0;
    padding: 0;
    font-size: 0.65em;       /* 英語のサイズ */
    line-height: 1.2;        /* 英語と日本語の間の隙間調整 */
    letter-spacing: 0.05em;
}

/* ボタンが表示された時の状態 */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* ホバー時の演出（少し浮き上がる） */
.back-to-top:hover {
    background-color: #555;
    transform: translateY(-5px);
}

/* 矢印（CSSで描画） */
.arrow {
    display: block;
    width: 12px;
    height: 12px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: translateY(3px) rotate(-45deg);
}

/* CSS側の .end-overlay にこれを追加 */
.end-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw !important; /* ブラウザの表示幅を強制的に100%にする */
  height: 100vh !important; /* ブラウザの表示高さを強制的に100%にする */
}