/* =====================================================
   ゲヘナの恋人 ─ スタイル
   基調：灰の空 / 教団の白 / 携行灯の橙 / 欠けた光輪
   ===================================================== */
:root{
  --ash-black:#0e0f12;
  --ash:#1b1d22;
  --ink:#d9d6cd;        /* 灰白の文字色 */
  --ink-dim:#8b8d92;
  --cult-white:#f2efe8; /* 教団の白 */
  --gold:#c2a05e;       /* 紋の金 */
  --lamp:#dd8a3f;       /* 携行灯の橙 */
  --halo:#eae6da;       /* 光輪 */
  --sera:#e8b7a8;       /* セラの声 */
  --hyde:#a9c0c8;       /* ハイドの声 */
  --danger:#a3564e;
  --serif:"Shippori Mincho","Hiragino Mincho ProN",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--ash-black);color:var(--ink);font-family:var(--serif);overflow:hidden;
     user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font-family:var(--sans);cursor:pointer}
.hidden{display:none !important}
.screen{position:fixed;inset:0}

/* ---------- タイトル ---------- */
#title-screen{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%,#23262c 0%,#101216 55%,#0a0b0d 100%)}
.title-inner{text-align:center;padding:24px;max-width:420px;width:100%}
.halo{width:130px;height:130px;margin:0 auto 10px;display:block;animation:halospin 24s linear infinite}
.halo.small{width:90px;height:90px}
.halo-ring{fill:none;stroke:var(--halo);stroke-width:3;
  stroke-dasharray:193 96; /* 約1/3が欠けた円環 */
  stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(234,230,218,.45))}
@keyframes halospin{to{transform:rotate(360deg)}}
.title-eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.4em;color:var(--ink-dim);margin-bottom:6px}
.title-logo{font-size:40px;font-weight:700;letter-spacing:.14em;color:var(--cult-white);
  text-shadow:0 0 24px rgba(234,230,218,.18)}
.title-sub{font-size:12px;color:var(--ink-dim);letter-spacing:.18em;margin:10px 0 28px}
.title-menu{display:flex;flex-direction:column;gap:12px;max-width:280px;margin:0 auto}
.tbtn{background:transparent;border:1px solid #3a3e46;color:var(--ink);padding:13px 10px;
  font-size:15px;letter-spacing:.22em;border-radius:2px;transition:.2s}
.tbtn:active{background:#23262c;border-color:var(--gold);color:var(--cult-white)}
.tbtn:disabled{opacity:.32}
.title-note{margin-top:22px;font-family:var(--sans);font-size:12px;color:var(--gold);letter-spacing:.08em}
.title-note.small{font-size:10px;color:var(--ink-dim);margin-top:8px}

/* ---------- 背景 ---------- */
.bg{position:absolute;inset:0;transition:background 1.4s ease, filter 1.4s ease}
.bg-black      {background:#050506}
.bg-graysky    {background:linear-gradient(180deg,#4a4c50 0%,#35373b 45%,#5a4744 78%,#2c2624 100%)}
.bg-plaza      {background:linear-gradient(180deg,#57595d,#3b3d41 60%,#2a2b2e)}
.bg-room       {background:linear-gradient(180deg,#17181c,#221f1c 70%,#131316)}
.bg-cathedral  {background:linear-gradient(180deg,#f3f0e7,#ddd6c4 55%,#c9c0aa)}
.bg-white      {background:linear-gradient(180deg,#eeece5,#dcd9d0 70%,#cfccc2)}
.bg-office     {background:linear-gradient(180deg,#e5e2d9,#c9c5ba)}
.bg-red        {background:linear-gradient(180deg,#3a1c17,#4d251c 55%,#2a1310)}
.bg-elevator   {background:linear-gradient(180deg,#101114,#1a1b1f 65%,#0a0a0c)}
.bg-gehenna    {background:radial-gradient(110% 75% at 50% 105%,#3c2a1c 0%,#221712 40%,#0c0a09 100%)}
.bg-water      {background:radial-gradient(100% 80% at 50% 100%,#14202a 0%,#0c1218 50%,#07090c 100%)}
.bg-lamp       {background:radial-gradient(70% 55% at 50% 78%,#5a3a1c 0%,#26180e 45%,#0a0806 100%)}
.bg-dawn       {background:linear-gradient(180deg,#6b6d72 0%,#8a827a 55%,#5a4f49 100%)}
.bg-halo-light {background:radial-gradient(80% 60% at 50% 40%,#efece2 0%,#8f887a 55%,#2a2521 100%)}
/* 白系背景では文字が沈むため、ウィンドウ側で対応（下記） */
#vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}

/* ---------- HUD ---------- */
#hud{position:absolute;top:0;left:0;right:0;z-index:35;padding:10px 12px 8px;
  padding-top:calc(10px + env(safe-area-inset-top));
  background:linear-gradient(180deg,rgba(8,9,11,.88),rgba(8,9,11,.55) 75%,transparent);
  font-family:var(--sans)}
.hud-row1{display:flex;justify-content:space-between;align-items:center}
.hud-place{font-size:11px;letter-spacing:.2em;color:var(--gold)}
.hud-btn{background:rgba(255,255,255,.06);border:1px solid #3a3e46;color:var(--ink);
  font-size:12px;padding:6px 12px;border-radius:2px;letter-spacing:.1em}
.hud-row2{margin-top:6px;display:flex;align-items:baseline;gap:8px}
.hud-obj-label{font-size:10px;color:var(--ash-black);background:var(--gold);padding:1px 6px;
  letter-spacing:.2em;border-radius:1px;flex-shrink:0}
.hud-obj{font-size:12px;color:var(--ink);letter-spacing:.06em;line-height:1.5}
.hud-row3{margin-top:7px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.stat{display:flex;align-items:center;gap:6px}
.stat-label{font-size:11px;color:var(--ink-dim);letter-spacing:.08em}
.stat-label b{color:var(--ink);font-size:12px}
.stat-halo{width:22px;height:22px}
.bar{width:56px;height:5px;background:#2a2d33;border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;width:0%;background:var(--danger);transition:width .5s}

/* ---------- テキストウィンドウ ---------- */
#textbox{position:absolute;left:0;right:0;bottom:0;z-index:15;
  min-height:34vh;max-height:70vh;padding:16px 18px 32px;
  padding-bottom:calc(32px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(10,11,13,.0),rgba(10,11,13,.86) 22%,rgba(10,11,13,.95));
  overflow-y:auto}
.speaker{font-family:var(--sans);font-size:13px;letter-spacing:.25em;margin-bottom:8px;min-height:1em}
.speaker.c-sera{color:var(--sera)} .speaker.c-hyde{color:var(--hyde)}
.speaker.c-other{color:var(--gold)}
.line{font-size:16px;line-height:1.8;letter-spacing:.04em;color:var(--ink);white-space:pre-wrap}
.line.stage{color:var(--ink-dim);font-size:13px;letter-spacing:.15em;text-align:center;padding:8px 0}
.next-cursor{position:absolute;right:16px;bottom:calc(10px + env(safe-area-inset-bottom));
  color:var(--gold);font-size:12px;animation:blink 1.1s infinite}
@keyframes blink{0%,100%{opacity:.15}50%{opacity:1}}

/* ---------- タップレイヤ ---------- */
#tap-layer{position:absolute;inset:0;z-index:18}

/* ---------- 選択肢 ---------- */
#choices{position:absolute;left:0;right:0;top:0;bottom:0;z-index:30;
  display:flex;flex-direction:column;justify-content:center;gap:12px;padding:20px 22px;
  background:rgba(8,9,11,.72);backdrop-filter:blur(2px);overflow-y:auto}
.choice-head{font-family:var(--sans);font-size:12px;color:var(--gold);letter-spacing:.25em;
  text-align:center;margin-bottom:4px}
.cbtn{position:relative;background:rgba(20,22,26,.92);border:1px solid #454a54;color:var(--ink);
  font-family:var(--serif);font-size:15px;letter-spacing:.06em;line-height:1.7;
  padding:14px 14px 14px 34px;border-radius:2px;text-align:left;transition:.15s}
.cbtn::before{content:"";position:absolute;left:12px;top:50%;width:10px;height:10px;margin-top:-5px;
  border:1.5px solid var(--gold);border-radius:50%;
  clip-path:polygon(0 0,100% 0,100% 66%,0 66%)} /* 欠けた輪 */
.cbtn:active{border-color:var(--gold);background:rgba(46,42,32,.95)}
.cbtn small{display:block;font-family:var(--sans);font-size:11px;color:var(--ink-dim);margin-top:5px;letter-spacing:.05em}
.cbtn.grey{opacity:.42;border-style:dashed;pointer-events:none}
.cbtn.grey::before{border-color:#555}
.cbtn.grey small{color:#7c6a4d}
.choice-foot{font-family:var(--sans);font-size:11px;color:var(--ink-dim);text-align:center;
  letter-spacing:.1em;line-height:1.8;margin-top:6px}

/* ---------- 章タイトルカード ---------- */
#chapter-card{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:#050506;gap:20px}
#chapter-card-text{font-size:24px;letter-spacing:.3em;color:var(--cult-white);text-align:center;
  line-height:2;animation:fadein 1.2s}
.tap-hint{font-family:var(--sans);font-size:11px;color:var(--ink-dim);letter-spacing:.3em;
  animation:blink 1.6s infinite}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1}}

/* ---------- スキップ表示 ---------- */
#skip-indicator{position:absolute;top:calc(96px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);z-index:35;background:rgba(194,160,94,.92);color:#111;
  font-family:var(--sans);font-size:12px;letter-spacing:.15em;padding:7px 16px;border-radius:2px}

/* ---------- 回想バナー ---------- */
#replay-banner{position:absolute;bottom:0;left:0;right:0;z-index:50;text-align:center;
  background:var(--gold);color:#111;font-family:var(--sans);font-size:12px;
  padding:6px;letter-spacing:.1em;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
#replay-banner button{background:none;border:none;text-decoration:underline;font-size:12px}
#replay-banner:not(.hidden) ~ #textbox {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* ---------- オーバーレイ／パネル ---------- */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(5,5,6,.8);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.panel{background:#16181d;border:1px solid #3a3e46;border-radius:4px;width:100%;max-width:380px;
  max-height:82vh;overflow-y:auto;padding:22px 18px}
.panel-title{font-family:var(--serif);font-size:17px;letter-spacing:.3em;color:var(--cult-white);
  text-align:center;margin-bottom:16px}
.panel-btns{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.pbtn{background:#22252b;border:1px solid #454a54;color:var(--ink);padding:13px;
  font-size:14px;letter-spacing:.15em;border-radius:2px}
.pbtn:active{border-color:var(--gold)}
.pbtn.danger{color:#d99a93;border-color:#5c3a36}
.pbtn.ghost{background:transparent;color:var(--ink-dim)}
.panel-note{font-family:var(--sans);font-size:11px;color:var(--ink-dim);line-height:1.8;
  margin-top:14px;letter-spacing:.05em}

/* セーブスロット */
.slot{width:100%;display:flex;flex-direction:column;gap:3px;background:#1d2026;
  border:1px solid #3a3e46;border-radius:2px;padding:12px 14px;margin-bottom:10px;
  color:var(--ink);text-align:left;font-family:var(--sans)}
.slot:active{border-color:var(--gold)}
.slot .slot-name{font-size:13px;letter-spacing:.1em;color:var(--gold)}
.slot .slot-info{font-size:12px;line-height:1.6}
.slot .slot-date{font-size:10px;color:var(--ink-dim)}
.slot.empty .slot-info{color:var(--ink-dim)}

/* ギャラリー */
.gcard{width:100%;display:flex;align-items:center;gap:12px;background:#1d2026;
  border:1px solid #3a3e46;border-radius:2px;padding:13px 14px;margin-bottom:10px;
  color:var(--ink);text-align:left}
.gcard:active{border-color:var(--gold)}
.gcard .gmark{font-family:var(--serif);font-size:20px;color:var(--gold);width:34px;text-align:center}
.gcard .gname{font-family:var(--serif);font-size:15px;letter-spacing:.15em}
.gcard .gsub{font-family:var(--sans);font-size:11px;color:var(--ink-dim);margin-top:3px}
.gcard.locked{opacity:.4;pointer-events:none}

/* ---------- エンディング画面 ---------- */
#ending-screen{display:flex;align-items:center;justify-content:center;background:#050506}
.ending-inner{text-align:center;padding:24px;animation:fadein 2s}
.ending-label{font-family:var(--sans);font-size:11px;letter-spacing:.5em;color:var(--gold);margin:14px 0 10px}
.ending-name{font-size:34px;letter-spacing:.3em;color:var(--cult-white);margin-bottom:22px}
.ending-note{font-family:var(--sans);font-size:12px;color:var(--ink-dim);line-height:2;margin-bottom:26px}

/* バックログ */
.log-panel {
  max-width: 600px;
  width: 95%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.log-content {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  margin-top: 10px;
  margin-bottom: 15px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.055);
}
.log-item {
  margin-bottom: 20px;
  line-height: 1.8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  padding-bottom: 12px;
}
.log-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.log-who {
  font-family: var(--sans);
  font-weight: bold;
  font-size: 13px;
  letter-spacing: .15em;
  margin-bottom: 6px;
}
.log-text {
  font-size: 15px;
  letter-spacing: .03em;
  white-space: pre-wrap;
  color: var(--ink);
}
.log-text.stage {
  color: var(--ink-dim);
  font-size: 13px;
  letter-spacing: .1em;
  text-align: center;
}

@media (min-width:600px){
  #textbox{max-width:600px;left:50%;transform:translateX(-50%);max-height:50vh}
  #choices{padding-left:calc(50% - 280px);padding-right:calc(50% - 280px)}
}
@media (prefers-reduced-motion:reduce){
  .halo{animation:none}
}