:root { --ink: #f4e9d8; --shu: #c8322a; --gold: #f1b75a; }
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #140c12; color: var(--ink);
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  user-select: none; -webkit-user-select: none;
}
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

.screen {
  position: fixed; inset: 0; z-index: 20; padding: 16px;
  background: linear-gradient(rgba(14, 6, 12, 0.25), rgba(14, 6, 12, 0.75)), url("ref_images/concept.png") center / cover no-repeat;
  transition: opacity 0.8s;
}
.screen.fade { opacity: 0; pointer-events: none; }
.title-block { position: absolute; left: 0; right: 0; top: 18vh; text-align: center; padding: 0 16px; }
h1 {
  margin: 0; font-size: clamp(56px, 14vw, 120px); font-weight: 800; letter-spacing: 0.15em;
  text-shadow: 0 0 28px rgba(200, 50, 42, 0.85), 0 4px 0 #000;
}
/* ラテン文字の題名は横に長いので小さく */
html:not([lang="ja"]) h1 { font-size: clamp(34px, 10vw, 76px); letter-spacing: 0.1em; }
.sub { margin: 0 0 18px; font-size: 20px; letter-spacing: 0.18em; color: var(--gold); text-shadow: 0 2px 4px #000; }
.lead { font-size: 17px; line-height: 1.8; text-shadow: 0 2px 6px #000; }
.note { font-size: 13px; opacity: 0.85; text-shadow: 0 2px 4px #000; }
button {
  font-family: inherit; font-size: 22px; font-weight: 800; letter-spacing: 0.2em; color: var(--ink);
  background: var(--shu); border: 2px solid #f0c9a0; padding: 12px 40px; margin: 14px 0 6px; border-radius: 4px; cursor: pointer;
  box-shadow: 0 0 18px rgba(200, 50, 42, 0.6);
}
button:disabled { filter: grayscale(0.7) brightness(0.7); cursor: wait; }
#mode-tag { font-size: 13px; letter-spacing: 0.15em; color: #cfe0d8; text-shadow: 0 2px 4px #000; display: none; }

/* 右上: 時計 (時間帯と時刻) */
#clock {
  position: fixed; top: 14px; right: 18px; z-index: 10; display: flex; align-items: baseline; gap: 12px;
  text-shadow: 0 2px 4px #000; pointer-events: none;
}
#phase { font-size: 22px; font-weight: 800; letter-spacing: 0.15em; }
#time { font-size: 22px; font-weight: 500; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
#speed { font-size: 13px; opacity: 0.85; }
body.peaceful #mode-tag { display: block; }

#help {
  position: fixed; left: 16px; bottom: 12px; z-index: 10; font-size: 13px; line-height: 1.7; opacity: 0.8;
  text-shadow: 0 1px 3px #000; pointer-events: none;
}
#help b { color: var(--gold); font-weight: 600; }
/* 時間を操る操作はそぞろ歩きだけ */
body:not(.peaceful) #help .stroll-only { display: none; }
#quit-confirm {
  position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 15; padding: 10px 22px; max-width: calc(100vw - 32px);
  font-size: 18px; letter-spacing: 0.12em; text-align: center; background: rgba(10, 4, 8, 0.7); border-left: 3px solid #f0c9a0;
  text-shadow: 0 2px 4px #000; pointer-events: none;
}
body.photo #quit-confirm { display: block; }

.rule { font-size: 14px; line-height: 1.8; opacity: 0.9; text-shadow: 0 2px 4px #000; }
.lead b { color: var(--gold); }

/* 左上: 目的とスタミナ */
#hud-left {
  position: fixed; top: 16px; left: 16px; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  pointer-events: none;
}
#night {
  font-size: 18px; font-weight: 800; letter-spacing: 0.2em; text-align: left;
  text-shadow: 0 0 10px rgba(200, 50, 42, 0.7), 0 2px 4px #000;
}
#stamina { display: flex; align-items: center; gap: 8px; }
#stamina-label { font-size: 14px; font-weight: 800; letter-spacing: 0.2em; color: #e8d8b8; text-shadow: 0 2px 4px #000; min-width: 2em; text-align: left; }
#stamina svg { filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9)); overflow: visible; }
#stamina .bg { fill: rgba(12, 2, 4, 0.72); }
#stamina .fill { fill: #d8c890; transition: fill 0.25s; }
#stamina .rim { fill: none; stroke: #7a5a38; stroke-width: 1.6; stroke-linejoin: bevel; }
#stamina .drip { fill: #4a3218; }
#stamina.low .fill { fill: #d8742a; }
#stamina.sprint .rim { stroke: #e8c878; }
#stamina.exhausted .fill { fill: #6a2a24; }
#stamina.exhausted .rim { stroke: #a8281c; }
#stamina.exhausted svg { animation: shiver 0.14s infinite; }
#stamina.exhausted #stamina-label { color: #ff6a4a; }
#stamina.full:not(.sprint) { opacity: 0.55; transition: opacity 0.6s; }
body:not(.playing) #stamina { display: none; }

/* 開始画面のメニュー (左下)。上下で選び、左右で切り替える */
#menu {
  /* 2列の格子: 左が項目名、右が選択肢。選択肢の左端を全部の行でそろえる */
  position: absolute; left: max(16px, 6vw); bottom: max(56px, 10vh); display: grid; grid-template-columns: auto 1fr; gap: 4px 0;
  min-width: min(360px, calc(100vw - 32px)); padding: 10px 24px 10px 0;
  background: linear-gradient(90deg, rgba(10, 4, 8, 0.6), rgba(10, 4, 8, 0.35) 70%, rgba(10, 4, 8, 0));
}
.menu-item {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; column-gap: 28px; padding: 8px 16px 8px 30px; position: relative;
  font-size: 20px; letter-spacing: 0.15em; cursor: pointer; text-shadow: 0 2px 5px #000; border-left: 3px solid transparent;
  opacity: 0.72; transition: opacity 0.15s, background 0.15s;
}
.menu-item.sel { opacity: 1; background: linear-gradient(90deg, rgba(200, 50, 42, 0.55), rgba(200, 50, 42, 0)); border-left-color: #f0c9a0; }
.menu-item.sel::before { content: "◆"; position: absolute; left: 8px; font-size: 12px; color: var(--gold); }
.menu-item.disabled { opacity: 0.45; cursor: wait; }
.menu-item.main { font-size: 26px; font-weight: 800; }
/* 設定の選択肢: すべて並べ、今の値だけ金色で下線を引く */
.menu-item:not(.setting) > span { grid-column: 1 / -1; }   /* 選択肢のない項目は2列ぶん使う (長い名前で左の列が広がらないように) */
.menu-item .options { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 16px; letter-spacing: 0.08em; }
.menu-item .option { padding: 2px 8px; border-bottom: 2px solid transparent; opacity: 0.5; transition: opacity 0.15s, color 0.15s; }
.menu-item .option:hover { opacity: 0.85; }
.menu-item .option.on { opacity: 1; color: var(--gold); border-bottom-color: var(--gold); }
#menu-hint {
  position: absolute; left: max(16px, 6vw); bottom: max(20px, 4vh); margin: 0; font-size: 13px; opacity: 0.75;
  letter-spacing: 0.08em; text-shadow: 0 2px 4px #000;
}
/* 心得 (遊び方の説明) と この作品について。背景はそのまま、文字だけ */
/* 画面が低くて入りきらない時は上から並べてスクロールできるように (safe: はみ出した上の端が切れないように) */
.page { position: absolute; inset: 0; display: flex; align-items: safe center; justify-content: center; padding: 16px; overflow-y: auto; background: rgba(10, 4, 8, 0.45); cursor: pointer; }
/* 箱はまん中、見出しと文は左揃え。「戻る」の案内は右下に寄せて、締めくくりに置く */
.guide-inner { max-width: 720px; text-align: left; }
.guide-inner .note { text-align: right; margin-top: 18px; }
.guide-inner h2 { margin: 0 0 12px; font-size: 30px; letter-spacing: 0.3em; color: var(--gold); text-shadow: 0 2px 6px #000; }
.guide-inner .controls { font-size: 13px; line-height: 1.9; margin: 14px 0; text-shadow: 0 1px 3px #000; opacity: 0.9; }
.guide-inner .controls b { color: var(--gold); font-weight: 600; }
.guide-inner .notice-body { line-height: 2; }
body.guide-open #menu, body.guide-open #menu-hint, body.guide-open .title-block { display: none; }

/* 写真を撮る時: 画面の表示をすべて消す (U / BACK) */
body.photo #clock, body.photo #hud-left, body.photo #help, body.photo #gauges { display: none !important; }

body.ending #clock, body.ending #hud-left, body.ending #help, body.ending #gauges { display: none; }

/* 妖怪の頭上: 目と注意ゲージ (縁はいびつ、下に滴) */
#gauges { position: fixed; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.gauge { position: absolute; left: 0; top: 0; width: 0; height: 0; display: none; transform-origin: 0 0; }
.gauge svg { position: absolute; left: -42px; top: -33px; overflow: visible; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9)); }
.gauge .bg { fill: rgba(12, 2, 4, 0.78); }
.gauge .fill { fill: #b8641e; transition: fill 0.3s; }
.gauge .rim { fill: none; stroke: #6a1410; stroke-width: 1.6; stroke-linejoin: bevel; }
.gauge .drip { fill: #4a0a08; }
/* 目: 閉じている (こちらを向いていない) / 半目 (向いているが物陰) / 見開く (見ている) */
.gauge .eye .white { fill: #e8dcc8; opacity: 0; transition: opacity 0.2s; }
.gauge .eye .pupil { fill: #1a0404; opacity: 0; transition: opacity 0.2s; }
.gauge .eye .lid { fill: none; stroke: #c8a890; stroke-width: 1.4; opacity: 0; }
.gauge .eye .shut { fill: none; stroke: rgba(200, 170, 150, 0.7); stroke-width: 1.4; stroke-linecap: round; }
.gauge[data-look="hidden"] .eye .lid { opacity: 1; stroke-dasharray: 3 2.5; }
.gauge[data-look="hidden"] .eye .shut { opacity: 0; }
.gauge[data-look="see"] .eye .white, .gauge[data-look="see"] .eye .pupil, .gauge[data-look="see"] .eye .lid { opacity: 1; }
.gauge[data-look="see"] .eye .shut { opacity: 0; }
.gauge[data-look="see"] .eye .pupil { fill: #c81408; }
.gauge[data-look="see"] .eye .lid { stroke: #7a0a06; }
.gauge[data-state="search"] .fill { fill: #6a5a78; }
.gauge[data-state="hunt"] .fill { fill: #e0180c; }
.gauge[data-state="hunt"] .rim { stroke: #ff4a2a; }
.gauge[data-state="hunt"] svg { animation: shiver 0.12s infinite; filter: drop-shadow(0 0 5px rgba(255, 30, 10, 0.9)); }
.gauge[data-state="hunt"] .eye .white { fill: #2a0404; }
.gauge[data-state="hunt"] .eye .pupil { fill: #ff2a10; }
@keyframes shiver { 0% { transform: translate(0, 0); } 33% { transform: translate(1px, -1px); } 66% { transform: translate(-1px, 1px); } }

/* ゲームオーバー / クリアの幕 */
#fx { position: fixed; inset: 0; z-index: 30; display: none; opacity: 0; pointer-events: none; }
#fx-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; padding: 16px; text-align: center; }
#fx-text h2 { margin: 0; font-size: clamp(40px, 10vw, 84px); font-weight: 800; letter-spacing: 0.25em; }
#fx-text p { margin: 14px 0 0; font-size: 18px; letter-spacing: 0.2em; }
#fx.over #fx-text h2 { color: #d8261a; text-shadow: 0 0 30px rgba(255, 30, 10, 0.8), 0 3px 0 #000; }
#fx.over #fx-text p { color: #e8b8a8; text-shadow: 0 2px 6px #000; }
#fx.clear #fx-text h2 { color: #b8322a; text-shadow: 0 0 24px rgba(255, 220, 160, 0.9); }
#fx.clear #fx-text p { color: #6a4a30; }