/* 配色は防衛拠点の管理端末イメージ：土・鉄・警告色（黄黒ストライプ）基調。丸くない、無骨な見た目にする */
:root {
  --bg-deep: #1a1712;
  --bg-mid: #2b241c;
  --warn-yellow: #f0b429;
  --warn-black: #1a1712;
  --ember: #ff7a52;
  --ember-dark: #c9482c;
  --steel: #8a9199;
  --steel-dark: #4d5359;
  --text-main: #f2ede2;
  --text-dim: #a9a08f;
  --panel-bg: rgba(20, 17, 13, 0.88);
  --hazard-stripe: repeating-linear-gradient(45deg, var(--warn-yellow) 0 12px, var(--warn-black) 12px 24px);
  --font: 'M PLUS 1p', system-ui, sans-serif;
  --safe-top: max(10px, env(safe-area-inset-top));
  --safe-bottom: max(16px, env(safe-area-inset-bottom));
  --safe-left: max(14px, env(safe-area-inset-left));
  --safe-right: max(14px, env(safe-area-inset-right));
}

* {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  height: var(--app-height, 100%);
  overflow: hidden;
  background: var(--bg-deep);
  font-family: var(--font);
  color: var(--text-main);
  -webkit-tap-highlight-color: transparent;
}

#stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: var(--app-height, 100vh);
}

canvas#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.hidden { display: none !important; }

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  background: var(--panel-bg);
  backdrop-filter: blur(2px);
  z-index: 10;
}
/* 警告テープの縁取り：画面の上端に、管理端末らしい黄黒の斜線ストライプを1本入れる */
.overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  background: var(--hazard-stripe);
}
#pauseScreen { z-index: 20; }
#settingsScreen { z-index: 30; }

h1.logo {
  font-weight: 800;
  font-size: clamp(2rem, 8vw, 3.2rem);
  margin: 0;
  color: var(--warn-yellow);
  text-shadow: 0 0 24px rgba(240, 180, 41, 0.45);
}
h2 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  color: var(--warn-yellow);
}
p.tagline { color: var(--text-dim); margin: 0 0 20px; }
.title-progress { color: var(--warn-yellow); font-size: 0.9rem; margin: -8px 0 12px; min-height: 1.2em; }
.best { color: var(--text-dim); margin: 12px 0 0; }

.btn-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.btn {
  touch-action: manipulation;
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--warn-black);
  background: linear-gradient(180deg, #ffcf5c, var(--warn-yellow));
  border: 2px solid var(--warn-black);
  border-radius: 6px;
  padding: 14px 44px;
  min-width: 220px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 6px 0 #8a6a12, 0 8px 16px rgba(0, 0, 0, 0.45);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
/* ボルト風の小さな点を、板金パネルの両角に */
.btn::before, .btn::after {
  content: '';
  position: absolute;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn::before { left: 8px; }
.btn::after { right: 8px; }
.btn:active {
  transform: translateY(6px);
  box-shadow: 0 1px 0 #8a6a12, 0 2px 6px rgba(0, 0, 0, 0.45);
}
.btn-sub {
  color: var(--text-main);
  background: linear-gradient(180deg, #a9b0b6, var(--steel));
  border-color: #2c3033;
  box-shadow: 0 6px 0 var(--steel-dark), 0 8px 16px rgba(0, 0, 0, 0.45);
}
.btn-sub:active {
  box-shadow: 0 1px 0 var(--steel-dark), 0 2px 6px rgba(0, 0, 0, 0.45);
}
.endless-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.endless-btn { font-size: 0.95rem; padding: 10px 16px; line-height: 1.4; white-space: pre-line; }
.btn:disabled { opacity: 0.45; cursor: default; }
.link-btn {
  font-family: var(--font);
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
}

#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--safe-top) var(--safe-right) 0 var(--safe-left);
  pointer-events: none;
  z-index: 5;
  font-weight: 800;
}
#hudLives { color: var(--ember); font-size: 1.4rem; letter-spacing: 2px; }
#hudScore { font-size: 1.2rem; }
.hud-right { display: flex; align-items: center; gap: 12px; }
#hudTime { color: var(--text-dim); }
.icon-btn {
  pointer-events: auto;
  touch-action: manipulation;
  font-size: 1.3rem;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 2px solid rgba(240, 180, 41, 0.5);
  background: rgba(20, 17, 13, 0.55);
  color: var(--text-main);
  cursor: pointer;
}

#hint {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-top) + 200px);
  transform: translateX(-50%);
  max-width: 92vw;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid rgba(240, 180, 41, 0.35);
  background: rgba(20, 17, 13, 0.75);
  font-size: 0.95rem;
  text-align: center;
  pointer-events: none;
  z-index: 4;
}

#touchControls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
  pointer-events: none;
  z-index: 5;
}
.turn-btn {
  pointer-events: auto;
  touch-action: none;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  border: 2px solid rgba(240, 180, 41, 0.5);
  background: rgba(138, 145, 153, 0.2);
  color: var(--warn-yellow);
  font-size: 2rem;
}
.turn-btn.active { background: rgba(240, 180, 41, 0.35); }

.result-stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: 6px 24px;
  margin: 0 0 8px;
  font-size: 1.1rem;
}
.result-stats dt { color: var(--text-dim); text-align: right; }
.result-stats dd { margin: 0; text-align: left; font-weight: 800; }
.new-best { color: var(--warn-yellow); font-weight: 800; margin: 0; }
.new-best.celebrate { animation: celebrate-pulse 0.9s ease-in-out 2; }
@keyframes celebrate-pulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 0 rgba(240, 180, 41, 0); }
  50% { transform: scale(1.15); text-shadow: 0 0 18px rgba(240, 180, 41, 0.9); }
}

.slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(320px, 80vw);
  font-weight: 700;
}
.slider-row input { flex: 1; accent-color: var(--warn-yellow); }

/* 縦が足りない画面（スマホの横向きなど）で、オーバーレイの中身が切れないようにする */
.overlay { overflow-y: auto; }
@supports (justify-content: safe center) {
  .overlay { justify-content: safe center; }
}

#stageGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
  width: min(560px, 92vw);
}
.stage-tile {
  touch-action: manipulation;
  font-family: var(--font);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: 6px;
  border: 2px solid rgba(138, 145, 153, 0.4);
  background: rgba(43, 36, 28, 0.92);
  cursor: pointer;
}
.stage-tile:hover:not(:disabled) { border-color: var(--warn-yellow); }
.stage-tile:disabled { opacity: 0.45; cursor: default; }
.stage-tile.cleared { border-color: rgba(182, 255, 176, 0.7); }
.tile-num { font-weight: 800; font-size: 1.3rem; color: var(--warn-yellow); }
.tile-status { font-size: 0.85rem; color: var(--text-dim); }
.tile-best { font-size: 0.8rem; color: var(--text-dim); min-height: 1.1em; }

#hudPowerups { font-size: 0.95rem; color: var(--text-dim); min-height: 1.2em; }

#powerupScreen { z-index: 12; }
.offer-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.offer-card {
  touch-action: manipulation;
  font-family: var(--font);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(210px, 42vw);
  min-width: 150px;
  padding: 18px 12px 16px;
  border-radius: 8px;
  border: 2px solid rgba(240, 180, 41, 0.5);
  background: rgba(43, 36, 28, 0.92);
  cursor: pointer;
  position: relative;
  transition: transform 0.08s ease, border-color 0.08s ease;
}
.offer-card:hover, .offer-card:focus-visible { border-color: var(--warn-yellow); transform: translateY(-3px); }
.offer-card:active { transform: translateY(1px); }
.offer-card.hidden { display: none; }
.card-key {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.card-icon { font-size: 2.2rem; line-height: 1; }
.card-name { font-weight: 800; font-size: 1.05rem; color: var(--warn-yellow); }
.card-desc { font-size: 0.9rem; color: var(--text-dim); }
.card-level { font-weight: 800; font-size: 0.95rem; }
.offer-hint { color: var(--text-dim); font-size: 0.85rem; margin: 6px 0 0; }
/* 出た直後は誤選択を防ぐため押せない（見た目でも分かるように薄くする） */
#powerupScreen.locked .offer-card { opacity: 0.45; pointer-events: none; }
/* 出た直後は連打での誤操作を防ぐため押せない */
#endlessQuitScreen.locked .btn, #endlessQuitScreen.locked .link-btn { opacity: 0.45; pointer-events: none; }
.endless-quit-stats { color: var(--text-dim); margin: 0 0 8px; }
.danger-link { color: var(--ember); }
.danger-link.armed { color: var(--ember-dark); font-weight: 800; text-decoration: none; }
/* 日記：見開きノート風。外枠（背景・戻るボタン・ページ数）はゲーム共通のダーク×シアンのまま、
   本文だけクリーム色の紙・和文フォントに切り替える */
.diary-overlay { padding: 16px; gap: 10px; }
.diary-topbar { width: 100%; max-width: 640px; display: flex; align-items: center; justify-content: space-between; }
.diary-back { padding: 4px; }
.diary-pagecount { font-family: var(--font); font-weight: 800; letter-spacing: 1px; color: var(--text-dim); }
.diary-book {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 640px;
  min-height: 320px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.diary-page {
  flex: 1;
  position: relative;
  box-sizing: border-box;
  padding: 20px 18px;
  background: #f4e9d3;
  color: #3b2f22;
  overflow: hidden;
}
.diary-page::before {
  /* 紙の質感（かすかな濃淡） */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 25%, rgba(0, 0, 0, 0.04) 0, transparent 42%),
    radial-gradient(circle at 82% 75%, rgba(0, 0, 0, 0.04) 0, transparent 42%);
  pointer-events: none;
}
.diary-ink {
  /* インクの染み */
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 47, 34, 0.16), transparent 70%);
  pointer-events: none;
}
.diary-ink-tl { top: -14px; left: -14px; }
.diary-ink-br { bottom: -14px; right: -14px; }
.diary-spine {
  width: 14px;
  flex: 0 0 auto;
  position: relative;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.2));
}
.diary-ribbon {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 44px;
  background: var(--ember);
}
.diary-ribbon::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--ember);
}
.diary-toc-heading {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(59, 47, 34, 0.25);
}
.diary-list { display: flex; flex-direction: column; gap: 4px; position: relative; }
.diary-list button {
  text-align: left;
  background: none;
  border: none;
  padding: 6px 6px;
  border-radius: 6px;
  font-family: 'Klee One', sans-serif;
  font-size: 0.92rem;
  color: #3b2f22;
  cursor: pointer;
}
.diary-list button:disabled { opacity: 0.35; cursor: default; }
.diary-list button.active { background: rgba(255, 122, 82, 0.18); font-weight: 700; }
.skin-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 320px; }
.skin-swatch { width: 44px; height: 44px; border-radius: 6px; border: 3px solid rgba(255,255,255,0.25); cursor: pointer; padding: 0; }
.skin-swatch:disabled, .skin-swatch.locked { opacity: 0.35; cursor: default; }
.skin-swatch.active { border-color: var(--warn-yellow); box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.35); }
.skin-preview-canvas { background: rgba(255,255,255,0.05); border-radius: 6px; margin: 8px 0; }
.skin-preview-name { font-weight: 800; color: var(--warn-yellow); margin: 0; }
.skin-preview-desc { font-size: 0.85rem; color: var(--text-dim); max-width: 320px; margin: 0 0 8px; text-align: center; }
.skin-code-row { display: flex; gap: 8px; align-items: center; }
.skin-code-input {
  font-family: var(--font);
  font-size: 0.95rem;
  padding: 10px 14px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  width: 160px;
}
.skin-code-input::placeholder { color: var(--text-dim); }
.skin-code-status { font-size: 0.85rem; color: var(--warn-yellow); min-height: 1.2em; margin: 0; }
.diary-text {
  position: relative;
  margin: 0;
  font-family: 'Klee One', sans-serif;
  font-size: 0.98rem;
  line-height: 2;
  white-space: pre-line;
  text-align: left;
}
@media (max-width: 640px) {
  .diary-book { flex-direction: column; min-height: 0; }
  .diary-spine { width: 100%; height: 14px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.2)); }
  .diary-ribbon { top: 50%; left: -6px; transform: translateY(-50%) rotate(90deg); }
  .diary-page-right { max-height: 46vh; overflow-y: auto; }
}
.howto-diagram { width: 260px; max-width: 80vw; }
.howto-diagram svg { width: 100%; height: auto; display: block; }
.howto-body { max-width: 520px; max-height: 48vh; overflow-y: auto; padding: 14px 18px; border-radius: 6px; background: rgba(20, 17, 13, 0.75); white-space: pre-line; line-height: 1.8; text-align: left; }
.howto-page { color: var(--text-dim); margin: 0; }
.howto-nav-row { display: flex; gap: 16px; align-items: center; }