/* ============================================================
   水戸産の黒い荷物 — スタイル
   3301Works 第二作。前作（仏像）と兄弟関係にあるが、
   ・色は骨色 → 紙のような象牙色へ
   ・差し色は赤錆 → 黄紫（UDTGの色）へ
   ・余白はやや広く、語り手の冷静さを強調する
   ============================================================ */

:root {
  --bg: #08080a;
  --ink: #d1c8b5;       /* 紙の白に近い象牙色 */
  --ink-dim: #8a8175;
  --ink-faint: #595348;
  --line: #1f1e22;
  /* UDTG の "黄紫" を、苦い黄ばみと滲んだ紫の２色に分解 */
  --ochre: #a78a45;     /* 黄味の方 */
  --ochre-dim: #6a5828;
  --purple: #6a4f80;    /* 紫の方 */
  --purple-dim: #3d2c4a;
  --danger: #9a4a3a;    /* 火薬／血 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
    "Noto Serif JP", "Shippori Mincho", serif;
  font-size: 17px;
  line-height: 2.05;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 仏像より控えめなヴィネット（語り手は冷静なので、闇に沈めすぎない） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.45) 100%
  );
  z-index: 50;
}

.hidden { display: none !important; }

/* ===================== 言語選択画面 ===================== */
#lang-pick {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8vh 24px;
  animation: fadeIn 2.0s ease both;
}

.brand {
  font-size: 14px;
  letter-spacing: 0.6em;
  color: var(--ink-faint);
  margin: 0 0 0.4em;
  font-weight: 400;
}
.brand-sub {
  font-size: 11px;
  letter-spacing: 0.5em;
  color: var(--ink-faint);
  margin: 0 0 4em;
}

.lang-title {
  font-size: clamp(20px, 3.4vw, 30px);
  font-weight: 500;
  letter-spacing: 0.16em;
  margin: 0 0 3em;
  color: var(--ink);
  line-height: 1.7;
}

.lang-menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.lang-btn {
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 14px 36px;
  min-width: 14em;
  cursor: pointer;
  transition: border-color 0.4s ease, color 0.4s ease, background 0.4s ease;
}
.lang-btn:hover {
  border-color: var(--ochre-dim);
  color: var(--ochre);
  background: rgba(167, 138, 69, 0.04);
}

.lang-warn {
  margin-top: 4em;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.9;
  white-space: pre-line;
  min-height: 4em;
}

/* ===================== タイトル画面（白地に黒文字＝本編と反転） ===================== */
#title {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8vh 24px;
  animation: fadeIn 2.2s ease both;
  position: relative;
  isolation: isolate;
  background: #ece2c8; /* 古紙のような象牙の地 */
  color: #161208;
}

#title .game-title {
  color: #050300;
  text-shadow:
    0 0 14px rgba(255, 245, 220, 0.85),
    0 0 4px rgba(255, 245, 220, 1);
}
#title .tagline {
  color: #1a1208;
  font-weight: 500;
  font-size: 15px;
  text-shadow:
    0 0 10px rgba(255, 245, 220, 0.95),
    0 0 3px rgba(255, 245, 220, 1);
}
#title .tagline.gallery {
  color: #1a1208;
  font-weight: 500;
  text-shadow:
    0 0 10px rgba(255, 245, 220, 0.95),
    0 0 3px rgba(255, 245, 220, 1);
}
#title .title-note {
  color: #1a1208;
  font-size: 13px;
  text-align: left;
  white-space: pre-line;
  text-shadow:
    0 0 10px rgba(255, 245, 220, 0.95),
    0 0 3px rgba(255, 245, 220, 1);
}

#title .choice {
  color: #050300;
  font-weight: 600;
  background: linear-gradient(180deg, rgba(245, 230, 195, 0.92), rgba(218, 198, 152, 0.92));
  border-color: #6a5832;
  border-left-color: var(--ochre);
  text-shadow:
    0 0 8px rgba(255, 245, 220, 0.8);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 6px 14px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.06);
}
#title .choice::before { color: var(--ochre); }
#title .choice:hover {
  background: linear-gradient(180deg, rgba(255, 240, 200, 0.95), rgba(225, 200, 145, 0.95));
  color: #050505;
  border-color: #4a3818;
  border-left-color: #5a4218;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 8px 18px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(106, 88, 50, 0.4);
}
#title .choice:hover::before { color: #5a4218; }

/* 配達伝票風の背景 ——
   タイトル画面のときだけ出る。テキストの読みやすさを優先して、
   ヴィネット側でやや沈めつつ、わずかに傾けて貼る。 */
#title::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("bg-title.svg");
  background-position: center 50%;
  background-repeat: no-repeat;
  background-size: clamp(540px, 88vw, 980px) auto;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transform: rotate(-2.2deg);
  animation: bgFadeIn 3.4s ease 0.4s forwards;
}
@keyframes bgFadeIn {
  to { opacity: 0.28; }
}

.game-title {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 500;
  letter-spacing: 0.2em;
  margin: 0 0 1.4em;
  color: var(--ink);
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.85);
  /* 暗闇から浮かび上がるフェードイン */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 2.0s ease, transform 2.0s ease;
}
.game-title.show {
  opacity: 1;
  transform: none;
  /* 表示完了後、ごくゆるい呼吸（filter で opacity 競合を避ける） */
  animation: breathe 11s ease-in-out infinite 2s;
}

.tagline {
  color: var(--ink-dim);
  font-size: 14px;
  letter-spacing: 0.2em;
  margin: 0.4em 0 2.6em;
  min-height: 1.5em;
}
.tagline.gallery { margin-top: 2.4em; color: var(--ink-faint); }

.title-menu {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.title-menu.show { opacity: 1; }

.title-note {
  margin-top: 3.5em;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.1em;
  max-width: 32em;
  line-height: 1.95;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.title-note.show { opacity: 1; }

.tagline.gallery {
  opacity: 0;
  transition: opacity 1.4s ease;
}
.tagline.gallery.show { opacity: 1; }

/* ===================== 本編画面 ===================== */
#screen {
  max-width: 700px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 12vh 32px 16vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

#text {
  margin-bottom: 3.4em;
}

.line {
  margin: 0 0 1.1em;
  opacity: 1;
}
.line.show { opacity: 1; }

/* タイプライター表示中のカーソル */
.line.typing::after {
  content: "▎";
  color: var(--ochre);
  margin-left: 0.1em;
  animation: blink 0.85s steps(2) infinite;
}
@keyframes blink {
  to { opacity: 0; }
}

/* 会話 */
.line.dialogue {
  color: #e2d8c3;
  text-indent: 0;
}

/* 状況描写の地の文 */
.line.narration { /* デフォルト */ }

/* 思考・モノローグ */
.line.thought {
  color: var(--ink-dim);
  font-style: normal;
}

/* 場面見出し ―― バナー風の「状況解説テキスト」として明示 */
.line.scene-head {
  color: var(--ink);
  background: linear-gradient(
    180deg,
    transparent,
    rgba(167, 138, 69, 0.10) 50%,
    transparent
  );
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-align: center;
  padding: 0.85em 0;
  margin: 1.6em 0 2.6em;
  border-top: 1px solid var(--ochre-dim);
  border-bottom: 1px solid var(--ochre-dim);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.65);
}

/* UDTG・科学的記述（少し違う質感に） */
.line.sci {
  color: var(--ochre);
  letter-spacing: 0.08em;
  font-size: 0.96em;
}

/* 強い無音・空白 */
.line.silent {
  text-align: center;
  color: var(--ink-faint);
  letter-spacing: 0.4em;
}

/* 公的文書・遺書など */
.line.document {
  color: var(--ink);
  text-align: left;
  border-left: 1px solid var(--ink-faint);
  padding-left: 1.4em;
  margin-left: 0.4em;
}

/* ===================== 選択肢 ===================== */
#choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.choice {
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #ece2c8;
  background: linear-gradient(180deg, rgba(60, 48, 28, 0.45), rgba(36, 28, 16, 0.55));
  border: 1.5px solid #6a5832;
  border-left: 6px solid var(--ochre);
  border-radius: 2px;
  padding: 17px 22px 17px 24px;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  position: relative;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 6px 14px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.4);
  transition: opacity 0.7s ease, transform 0.7s ease,
    border-color 0.3s ease, color 0.3s ease, background 0.3s ease,
    box-shadow 0.3s ease, padding-left 0.3s ease;
}
.choice.show { opacity: 1; transform: none; }

.choice::before {
  content: "›";
  color: var(--ochre);
  margin-right: 0.9em;
  font-weight: 600;
  font-size: 1.1em;
  transition: color 0.3s ease, transform 0.3s ease;
}

.choice:hover {
  border-color: #c0a050;
  border-left-color: #d8b760;
  background: linear-gradient(180deg, rgba(100, 78, 38, 0.6), rgba(60, 46, 22, 0.7));
  color: #fff4d6;
  padding-left: 30px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 8px 18px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(167, 138, 69, 0.3),
    0 0 18px rgba(167, 138, 69, 0.15);
}
.choice:hover::before {
  color: #f4d878;
  transform: translateX(4px);
}

.choice.cold {
  color: var(--purple);
  border-left-color: var(--purple-dim);
}
.choice.cold:hover {
  color: #b8a0d0;
  border-color: var(--purple);
  border-left-color: var(--purple);
  background: rgba(106, 79, 128, 0.1);
}
.choice.cold:hover::before { color: var(--purple); }

.choice.danger {
  color: var(--danger);
  border-left-color: var(--danger);
}
.choice.danger:hover {
  color: #d06a5a;
  border-color: var(--danger);
  border-left-color: var(--danger);
  background: rgba(154, 74, 58, 0.1);
}
.choice.danger:hover::before { color: var(--danger); }

.choice.subtle {
  color: var(--ink-faint);
  background: transparent;
  border-color: transparent;
  border-left-color: transparent;
  font-size: 14px;
  text-align: center;
  padding-left: 22px;
}
.choice.subtle::before { content: ""; margin: 0; }
.choice.subtle:hover {
  color: var(--ink-dim);
  background: transparent;
  padding-left: 22px;
}

#title .choice,
.ending-block .choice {
  text-align: center;
  min-width: 12em;
}

/* ===================== 作中時計 ===================== */
#clock {
  position: fixed;
  top: 18px;
  right: 24px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  z-index: 40;
  pointer-events: none;
  transition: opacity 1.2s ease, color 0.8s ease;
}
#clock.urgent { color: var(--danger); }

/* ===================== 言語切替ボタン ===================== */
#lang-toggle {
  position: fixed;
  top: 14px;
  left: 18px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #d1c8b5;
  background: rgba(30, 22, 12, 0.85);
  border: 1px solid var(--ochre-dim);
  border-radius: 3px;
  padding: 6px 12px;
  cursor: pointer;
  z-index: 55; /* body::after の vignette より上に */
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease,
              transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
#lang-toggle:hover {
  color: #fff4d6;
  border-color: var(--ochre);
  background: rgba(80, 60, 30, 0.95);
  transform: translateY(-1px);
}

/* ===================== エンディング ===================== */
.ending-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  margin-top: 1em;
}
.ending-label {
  color: var(--ink);
  letter-spacing: 0.3em;
  font-size: 1.05em;
  margin: 0 0 0.3em;
}
.ending-count {
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: 0.16em;
  margin: 0 0 1.4em;
}

/* ===================== 軋み・効果オーバーレイ ===================== */
.creak-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.0) 30%,
    rgba(0, 0, 0, 0.6) 100%
  );
  opacity: 0;
  transition: opacity 0.9s ease;
}
.creak-overlay.show { opacity: 1; }
.creak-overlay p {
  margin: 0;
  color: var(--ink-dim);
  letter-spacing: 0.5em;
  font-size: clamp(18px, 3.4vw, 26px);
  text-align: center;
}

/* ===================== アニメーション ===================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes breathe {
  0%, 100% { filter: brightness(0.95); }
  50% { filter: brightness(1.05); }
}

/* 画面効果 */
.fx-shudder { animation: shudder 0.6s ease; }
@keyframes shudder {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -2px); }
  75% { transform: translate(-1px, 2px); }
  100% { transform: translate(0, 0); }
}
.fx-flash { animation: flash 0.5s steps(2) 1; }
@keyframes flash {
  0%, 100% { filter: none; }
  50% { filter: brightness(2.4); }
}
.fx-darken { animation: darken 1.4s ease both; }
@keyframes darken {
  to { filter: brightness(0.2); }
}

::-webkit-scrollbar { width: 0; background: transparent; }

@media (max-width: 480px) {
  body { font-size: 15px; line-height: 2.0; }
  #screen { padding: 9vh 22px 13vh; }
  #clock { top: 12px; right: 16px; font-size: 11px; }
}