/* 宝の迷宮 - シニア・キッズ両対応の大きめUI
   文字サイズはrem基準：設定の「もじの おおきさ」で html の font-size を 16/18.5/21px に切替 */
:root {
  --bg: #141628;
  --panel: #1e2140;
  --border: #3a3f6e;
  --gold: #f5c542;
  --txt: #f2ecd9;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--txt);
  font-family: 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
}
.hidden { display: none !important; }
button { cursor: pointer; font-family: inherit; }

/* 全体レイアウト：迷路とアイテム欄は独立した枠（重ならない） */
#appWrap { display: flex; flex-direction: column; width: 100%; height: 100%; }
#mainCol { order: 1; flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
#gameArea { position: relative; flex: 1; min-height: 0; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }

/* 上部HUD（独立枠・不透明） */
#hudTop {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; padding-top: calc(6px + env(safe-area-inset-top));
  background: #10122a; border-bottom: 2px solid var(--border);
}
#timeBox { white-space: nowrap; flex-shrink: 0; line-height: 1.15; }
#timeNow { font-size: 1.7rem; font-weight: bold; letter-spacing: 1px; }
#timeTarget { font-size: 0.8rem; opacity: 0.85; }
#diffName {
  font-size: 0.875rem; opacity: 0.9; flex: 1; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.camBtns { display: flex; gap: 5px; flex-shrink: 0; }
.camBtns button {
  font-size: 1.1rem; background: var(--panel); color: var(--txt);
  border: 2px solid var(--border); border-radius: 10px; padding: 8px 10px;
}

/* アイテム欄（独立枠・不透明・迷路とは重ならない） */
#hudBottom {
  order: 2;
  background: #10122a; border-top: 2px solid var(--border);
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
}
#slots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.slot {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 1.5rem; background: var(--panel); color: var(--txt);
  border: 2px solid var(--border); border-radius: 14px; padding: 8px 8px 6px; min-width: 62px;
}
.sIco { line-height: 1.05; }
.sIco b { font-size: 0.875rem; margin-left: 3px; }
.sLbl { font-size: 0.65rem; opacity: 0.85; font-weight: normal; white-space: nowrap; }
.slot.dim { opacity: 0.45; }
.slot.sel { border-color: var(--gold); box-shadow: 0 0 8px var(--gold); }
#desc { margin-top: 6px; text-align: center; font-size: 0.95rem; min-height: 2.6em; line-height: 1.3; opacity: 0.95; }

/* 横向き：アイテム欄は左側に縦並びで固定 */
@media (orientation: landscape) {
  #appWrap { flex-direction: row; }
  #hudBottom {
    order: 0; width: 128px; flex-shrink: 0;
    display: flex; flex-direction: column; gap: 8px;
    border-top: none; border-right: 2px solid var(--border);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
    overflow-y: auto;
  }
  #mainCol { order: 1; }
  #slots { flex-direction: column; gap: 8px; }
  .slot { width: 100%; min-width: 0; }
  #desc { margin-top: auto; font-size: 0.7rem; line-height: 1.35; min-height: 0; }
}

/* オーバーレイ画面 */
.overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(10, 12, 28, 0.85); padding: 20px; text-align: center; overflow-y: auto;
}
#title h1 {
  font-size: 2.75rem; margin: 0; color: var(--gold);
  text-shadow: 3px 3px 0 #7a5a10; letter-spacing: 3px;
}
.sub { margin: 0; opacity: 0.85; font-size: 0.95rem; }
.subEn { margin: 0; font-size: 0.75rem; letter-spacing: 4px; opacity: 0.55; }
h2 { margin: 0; color: var(--gold); }
button.big {
  font-size: 1.5rem; padding: 14px 34px; background: var(--gold); color: #3a2a05;
  border: none; border-radius: 14px; font-weight: bold; box-shadow: 0 4px 0 #a07f20;
}
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.row button, #btnBackTitle, #btnBackTitle2, #btnBackTitle3, #btnBackTitle4 {
  background: var(--panel); color: var(--txt);
  border: 2px solid var(--border); border-radius: 12px; padding: 10px 16px; font-size: 1rem;
}
#charPick { display: flex; gap: 12px; }
.charBtn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--panel); color: var(--txt); font-size: 0.95rem;
  border: 2px solid var(--border); border-radius: 12px; padding: 10px 14px;
}
.charBtn.sel { border-color: var(--gold); box-shadow: 0 0 10px var(--gold); }
.charBtn canvas { image-rendering: pixelated; }
#lvBox { width: min(320px, 80vw); font-size: 1.1rem; font-weight: bold; }
#expBar { height: 10px; background: rgba(0,0,0,0.5); border-radius: 6px; overflow: hidden; margin: 4px 0; }
#expFill { height: 100%; background: linear-gradient(90deg, #7bd44a, #f5c542); width: 0; }
#expTxt, #passiveNow { font-size: 0.8rem; opacity: 0.85; font-weight: normal; }
.credit { font-size: 0.75rem; opacity: 0.7; margin-top: 8px; }
.credit a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(245,197,66,0.5); }
/* やりこみスコア（LV99カンスト後・別枠）とトレジャーマスターの金きらきらバッジ */
#masteryBox { font-size: 0.85rem; font-weight: bold; color: var(--gold); text-shadow: 0 0 6px rgba(245,197,66,0.4); margin-top: 2px; }
#masterBadge {
  margin: 3px 0 1px; font-weight: bold; font-size: 1.2rem; letter-spacing: 1px;
  color: var(--gold); text-shadow: 0 0 8px rgba(245,197,66,0.8), 2px 2px 0 #7a5a10;
  animation: mbTwinkle 1.6s ease-in-out infinite;
}
@keyframes mbTwinkle {
  0%, 100% { text-shadow: 0 0 6px rgba(245,197,66,0.6), 2px 2px 0 #7a5a10; transform: scale(1); }
  50% { text-shadow: 0 0 16px rgba(255,236,158,1), 0 0 26px rgba(245,197,66,0.85), 2px 2px 0 #7a5a10; transform: scale(1.06); }
}
#congratsMain.master { font-size: 2.6rem; filter: drop-shadow(0 0 14px rgba(245,197,66,0.95)); }

/* 難易度選択 */
#diffList { display: flex; flex-direction: column; gap: 8px; width: min(400px, 94vw); }
.diffRow { display: flex; gap: 6px; align-items: stretch; }
.diffBtn {
  font-size: 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--panel); color: var(--txt);
  border: 2px solid var(--border); border-radius: 12px; padding: 12px 14px; flex: 1; min-width: 0;
}
.diffBtn small { opacity: 0.6; }
.diffBtn.locked { opacity: 0.5; }
/* シンプルモード（各難易度の横・スキル/宝箱なし・EXP×1.5） */
.diffBtn.simple {
  flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 0;
  font-size: 0.9rem; padding: 8px 12px; min-width: 76px;
  background: #191c36; color: #cfd3ee;
}
.diffBtn.simple small { font-size: 0.7rem; color: var(--gold); opacity: 0.95; }
.badge { color: var(--gold); font-size: 0.875rem; min-width: 52px; text-align: right; }

/* スキル選択 */
#skillNote { font-size: 0.8rem; opacity: 0.8; margin: 0; }
#skillCards { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.skillCard {
  display: flex; flex-direction: column; gap: 6px; width: min(250px, 80vw);
  background: var(--panel); border: 2px solid var(--border); border-radius: 14px;
  padding: 14px; color: var(--txt); font-size: 0.875rem; text-align: left;
}
.skillCard b { font-size: 1.1rem; }
.skillCard .val { color: var(--gold); }
.skillCard.sel { border-color: var(--gold); box-shadow: 0 0 10px var(--gold); }
.skillCard.locked { opacity: 0.55; }
.tag { font-size: 0.75rem; opacity: 0.9; }
#skillSel { justify-content: flex-start; padding-top: calc(24px + env(safe-area-inset-top)); }
#langSel { justify-content: flex-start; padding-top: calc(24px + env(safe-area-inset-top)); }
#langList { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 8px; width: min(360px, 90vw); }
.langBtn {
  background: var(--panel); color: var(--txt);
  border: 2px solid var(--border); border-radius: 10px; padding: 11px 8px; font-size: 0.95rem;
}
.langBtn.sel { border-color: var(--gold); box-shadow: 0 0 8px var(--gold); }
#skillList { display: flex; flex-direction: column; gap: 6px; width: min(380px, 92vw); padding-bottom: 8px; }
.skillRow {
  display: flex; align-items: center; gap: 8px; text-align: left;
  background: var(--panel); border: 2px solid var(--border); border-radius: 10px; padding: 8px 10px;
  color: var(--txt); font-family: inherit;
}
.skillRow.locked { opacity: 0.5; }
.skillRow.sel { border-color: var(--gold); box-shadow: 0 0 8px var(--gold); }
.srIco { font-size: 1.4rem; }
.srBody { flex: 1; display: flex; flex-direction: column; font-size: 0.75rem; min-width: 0; }
.srBody b { font-size: 0.875rem; }
.srVal { color: var(--gold); font-size: 0.7rem; max-width: 100px; white-space: normal; text-align: right; }

/* 設定（文字サイズ・音量） */
#setSel { justify-content: flex-start; padding-top: calc(24px + env(safe-area-inset-top)); }
.setRow {
  display: flex; flex-direction: column; gap: 8px; width: min(380px, 92vw);
  background: var(--panel); border: 2px solid var(--border); border-radius: 12px; padding: 12px;
}
.setLbl { font-size: 1rem; font-weight: bold; text-align: left; }
.volRow { display: flex; align-items: center; gap: 10px; }
.volRow input[type=range] { flex: 1; height: 36px; accent-color: var(--gold); }
.volV { min-width: 58px; text-align: right; color: var(--gold); font-size: 1rem; font-weight: bold; }

/* クリア画面（紙吹雪が見えるよう半透明） */
#clearOv { background: rgba(10, 12, 28, 0.75); }
#clearTitle { font-size: 1.9rem; margin: 0; color: var(--gold); }
.crow { font-size: 1rem; }
.crow.cbig { font-size: 1.5rem; color: var(--gold); }
.crow.cmaze { font-size: 1.15rem; color: #cfd6ff; margin-bottom: 2px; }

/* ステージ開始時の「○○の迷宮」中央大表示→ゆっくりフェード */
#stagename {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  color: var(--gold); font-size: 2.4rem; font-weight: bold; text-align: center;
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(245,197,66,0.5);
  z-index: 24; pointer-events: none; opacity: 0; white-space: nowrap;
}
#stagename.show { animation: stagepop 3s ease forwards; }
@keyframes stagepop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  22%  { transform: translate(-50%, -50%) scale(1); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(1); }
}

/* コングラチュレーション（最高難易度クリア・LV99） */
#congrats {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(6, 6, 18, 0.5); cursor: pointer;
}
#congratsMain {
  font-size: 2.1rem; font-weight: bold; text-align: center; padding: 0 10px;
  background: linear-gradient(90deg, #ffd76e, #ff8fb0, #8fd0ff, #b0ff9e, #ffd76e);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cgRainbow 2.2s linear infinite, cgBounce 1s ease-in-out infinite;
}
#congratsSub {
  font-size: 1.2rem; color: #ffe9a8; font-weight: bold;
  text-shadow: 2px 2px 0 #000; text-align: center; padding: 0 12px;
}
@keyframes cgRainbow { 0% { background-position: 0% 0; } 100% { background-position: 300% 0; } }
@keyframes cgBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* トースト・レベルアップ */
#toast {
  position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.82); color: #fff; padding: 10px 18px; border-radius: 12px;
  font-size: 0.95rem; z-index: 20; transition: opacity 0.3s; opacity: 0;
  pointer-events: none; white-space: nowrap; max-width: 92vw;
}
#toast.show { opacity: 1; }
#lvup {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(0.6);
  color: var(--gold); font-size: 2.1rem; font-weight: bold;
  text-shadow: 2px 2px 0 #000; z-index: 25; pointer-events: none; opacity: 0;
}
#lvup.pop { animation: lvpop 1.9s ease forwards; }
@keyframes lvpop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  30%  { transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}