/* =====================================================================
 * style.css —「3:00のレジ」 ベーススタイル（ステップ4で演出を強化）
 * ===================================================================== */

:root{
  --bg:#0b0e14;
  --bg2:#0e131c;
  --ink:#e7edf2;       /* 少し青みの白 */
  --ink-dim:#9aa6b0;
  --light:#cdd6dd;     /* 蛍光灰白 */
  --accent:#b23b3b;    /* にじむ赤 */
  --line:#26303c;
  --pad: clamp(14px, 4vw, 30px);
  --fs: clamp(18px, 3.4vw, 24px);   /* 本文ベース：大きめ・読みやすく */
}

/* =====================================================================
 * 店の崩れ（気づかれ度 noticed の可視化 / SPEC_v2 §4-2.3）
 *   数字は出さず、店そのものが壊れていくことで体感させる。
 *   レベルは body.crumble-0/1/2/3（ui.js _renderCrumble）。
 * ===================================================================== */
/* lv1: ときどきちらつく・わずかに彩度↓ */
body.crumble-1 #flicker{ animation-duration:4s; }
body.crumble-1::before{ filter:brightness(.96) saturate(.86); }

/* lv2: ちらつき増・棚（背景）がわずかにズレ・空気が淀む */
body.crumble-2 #flicker{ animation-duration:2.4s; }
body.crumble-2::before{ filter:brightness(.9) saturate(.7); }
body.crumble-2 .bg-img{
  transform:perspective(900px) rotateY(.7deg) skewX(-.5deg) scale(1.03);
  filter:brightness(.72) saturate(.6) contrast(1.06) hue-rotate(-6deg);
}
body.crumble-2 #vignette{
  background:radial-gradient(120% 90% at 50% 40%, transparent 48%, rgba(0,0,0,.75) 100%);
}

/* lv3: 蛍光灯が全点灯し“昼のように明るい”のに棚の影だけ濃い／ガラスに一拍遅れる自分 */
body.crumble-3 #flicker{ animation:none; opacity:0; }      /* もうちらつかない（点きっぱなし） */
body.crumble-3::before{ filter:brightness(1.18) saturate(.5); }
body.crumble-3 .bg-img{
  filter:brightness(1.18) saturate(.5) contrast(1.12);
  animation:lagShift 2.6s ease-in-out infinite;            /* 一拍遅れて動く違和感 */
}
@keyframes lagShift{ 0%,100%{transform:translateX(0)} 45%{transform:translateX(0)} 55%{transform:translateX(3px)} 70%{transform:translateX(3px)} 80%{transform:translateX(0)} }
body.crumble-3 #bgGrade{
  background:
    linear-gradient(180deg, rgba(225,233,242,.12), rgba(6,9,14,.22) 40%, rgba(6,9,14,.8)),
    radial-gradient(60% 50% at 50% 30%, rgba(255,255,255,.10), transparent 70%);
}
body.crumble-3 #vignette{                                   /* 明るいのに四隅と棚影だけ濃い */
  background:radial-gradient(120% 88% at 50% 38%, transparent 30%, rgba(0,0,0,.9) 100%);
}
/* lv2-3 は明るい背景でも本文が読めるよう、テキスト窓の黒帯を濃く */
body.crumble-2 #textWindow,
body.crumble-3 #textWindow{
  background:linear-gradient(180deg, rgba(6,9,14,0), rgba(6,9,14,.9) 16%, rgba(6,9,14,.97));
}
/* 演出オフ時は崩れアニメを止める（明暗の段階だけ残す） */
body.reduce-motion.crumble-3 .bg-img{ animation:none; }
body.reduce-motion.crumble-1 #flicker,
body.reduce-motion.crumble-2 #flicker{ animation:none; opacity:0; }

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui, "Hiragino Kaku Gothic ProN", "Hiragana Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size:var(--fs);
  line-height:1.95;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
}

.hidden{ display:none !important; }
.screen{ position:fixed; inset:0; }

/* ---------- 背景・ビネット・蛍光灯 ---------- */
/* 背景写真レイヤ：写真の上に青白グレード＋暗転で基調と可読性を保つ */
#bgLayer{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .6s ease;
}
#bgLayer.shown{ opacity:1; }
.bg-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:brightness(.78) saturate(.78) contrast(1.02) hue-rotate(-6deg);
}
/* アップ系の挿入カット（メモ・ネームタグ等）は切り抜かず全体を表示 */
.bg-img.contain{ object-fit:contain; object-position:center 40%; }
#bgGrade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,12,20,.30), rgba(6,9,14,.16) 38%, rgba(6,9,14,.70)),
    radial-gradient(90% 70% at 50% 30%, rgba(90,120,150,.10), transparent 70%);
  mix-blend-mode:normal;
}
body.silence .bg-img{ filter:brightness(.52) saturate(.55); }
body.blackout #bgLayer{ opacity:0; }

/* 立ち絵レイヤ：背景の上・テキスト窓の下 */
#spriteLayer{
  position:fixed; inset:0; z-index:8; pointer-events:none;
  opacity:0; transition:opacity .45s ease, filter .45s ease;
}
#spriteLayer.shown{ opacity:1; }
#spriteLayer.dim{ opacity:.55; filter:brightness(.55) saturate(.7); }
.sprite-img{
  position:absolute; bottom:24%; width:auto; max-width:48%; max-height:64%;
  object-fit:contain;
  filter:saturate(.82) brightness(.92) drop-shadow(0 6px 26px rgba(0,0,0,.6));
}
#spriteLayer.pos-left .sprite-img{ left:3%; }
#spriteLayer.pos-center .sprite-img{ left:50%; transform:translateX(-50%); }
#spriteLayer.pos-right .sprite-img{ right:3%; }
body.silence #spriteLayer.shown{ filter:brightness(.5) saturate(.5); }
body.blackout #spriteLayer{ opacity:0; }
@media (max-width:560px){
  .sprite-img{ max-width:74%; max-height:54%; bottom:34%; }
}

#vignette{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.65) 100%);
}
body::before{ /* 店内の冷たい明かり */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(80% 60% at 50% 18%, rgba(120,150,170,.10), transparent 70%),
    linear-gradient(180deg, var(--bg2), var(--bg));
}
#flicker{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background:#000; opacity:0; mix-blend-mode:multiply;
  animation:flicker 7s infinite steps(1);
}
@keyframes flicker{
  0%,97%,100%{ opacity:0; }
  97.4%{ opacity:.45; }
  97.8%{ opacity:0; }
  98.2%{ opacity:.30; }
  98.6%{ opacity:0; }
}
body.flicker-strong #flicker{ animation:flickerStrong .5s steps(1) 3; }
@keyframes flickerStrong{
  0%{opacity:0} 20%{opacity:.6} 30%{opacity:0} 55%{opacity:.45} 65%{opacity:0} 100%{opacity:0}
}
body.reduce-motion #flicker{ animation:none; opacity:0; }

#flash{
  position:fixed; inset:0; z-index:40; pointer-events:none; background:#f6f8fb; opacity:0;
}
#flash.on{ animation:flash .5s ease-out; }
@keyframes flash{ 0%{opacity:.0} 8%{opacity:.85} 100%{opacity:0} }

#flash.soft.on{ animation:flashSoft .6s ease-out; }
@keyframes flashSoft{ 0%{opacity:0} 12%{opacity:.4} 100%{opacity:0} }

#redwash{
  position:fixed; inset:0; z-index:37; pointer-events:none; opacity:0;
  background:radial-gradient(120% 100% at 50% 50%, rgba(150,20,20,.0) 30%, rgba(120,10,10,.55) 100%);
}
#redwash.pulse{ animation:redPulse .9s ease-out; }
#redwash.pulse-strong{ animation:redPulse 1.4s ease-out; }
@keyframes redPulse{ 0%{opacity:0} 18%{opacity:1} 60%{opacity:.25} 100%{opacity:0} }
#redwash.hold{ opacity:1; background:radial-gradient(120% 100% at 50% 50%, rgba(160,20,20,.55), rgba(90,5,5,.92)); transition:opacity .3s; }

#fade{
  position:fixed; inset:0; z-index:38; pointer-events:none; background:#05070b; opacity:0;
  transition:opacity .2s ease;
}
#fade.on{ opacity:1; }

body.blackout{ background:#000; }
body.blackout #vignette{ background:#000; }
body.blackout::before{ opacity:0; }

/* 静寂（3:00直前）：明かりを引き、空気を止める */
body.silence::before{ filter:brightness(.55) saturate(.7); }
body.silence #flicker{ animation:none; opacity:0; }

/* 画面のわずかな揺れ */
#game.shake{ animation:shake .5s ease-in-out; }
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-2px,1px)} 40%{transform:translate(2px,-1px)}
  60%{transform:translate(-1px,-1px)} 80%{transform:translate(1px,1px)}
}
body.reduce-motion #game.shake{ animation:none; }
body.reduce-motion #redwash.pulse,
body.reduce-motion #redwash.pulse-strong{ animation:none; opacity:0; }

/* ---------- タイトル ---------- */
#titleScreen{
  z-index:30; display:flex; align-items:center; justify-content:center;
  /* タイトル専用の固定画像（無ければ暗い背景にフォールバック） */
  background:
    radial-gradient(120% 95% at 50% 40%, rgba(6,9,14,.05) 0%, rgba(6,9,14,.34) 64%, rgba(4,6,10,.66) 100%),
    linear-gradient(180deg, rgba(6,9,14,.24), rgba(6,9,14,.06) 38%, rgba(6,9,14,.60)),
    url("../assets/bg_title.jpg") center/cover no-repeat,
    var(--bg);
}
.title-inner{ text-align:center; padding:var(--pad); position:relative; z-index:3; }
.title-time{
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-variant-numeric:tabular-nums; letter-spacing:.4em; color:var(--accent);
  opacity:.85; margin:0 0 .4em; font-size:1.15em;
}
/* ホラー調タイトル（外部フォント不使用：明朝＋赤グリッチ＋にじみで“怖い”質感） */
.title-main{
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP","Yu Mincho",serif;
  font-weight:900;
  font-size:clamp(40px, 13vw, 96px); margin:.1em 0; letter-spacing:.06em;
  color:#d7dde2;
  text-shadow:
    0 0 1px #000,
    1px 1px 0 rgba(0,0,0,.7),
    2px 0 0 rgba(150,20,20,.45),
   -2px 0 0 rgba(30,60,110,.35),
    0 0 26px rgba(150,30,30,.30);
  animation:titleHaunt 7s steps(60) infinite;
}
@keyframes titleHaunt{
  0%,46%,52%,100%{ transform:translate(0,0); opacity:1;
    text-shadow:0 0 1px #000, 1px 1px 0 rgba(0,0,0,.7), 2px 0 0 rgba(150,20,20,.45), -2px 0 0 rgba(30,60,110,.35), 0 0 26px rgba(150,30,30,.30); }
  47%{ transform:translate(-3px,1px); opacity:.78;
    text-shadow:4px 0 0 rgba(170,20,20,.8), -4px 0 0 rgba(20,50,120,.7), 0 0 30px rgba(170,30,30,.5); }
  48%{ transform:translate(3px,-1px); opacity:1; }
  49%{ transform:translate(-2px,0); opacity:.9; }
  50%{ transform:translate(0,0); opacity:1; }
}
body.reduce-motion .title-main{ animation:none; }
.title-sub{
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  color:#9aa6b0; letter-spacing:.26em; margin:.2em 0 2em;
}
.title-buttons{ display:flex; flex-direction:column; gap:.7em; align-items:center; }
.title-time{ animation:breathe 4s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{opacity:.55} 50%{opacity:.9} }
.title-note{ margin-top:1.6em; color:#5d6772; font-size:.78em; letter-spacing:.05em; }

/* 見たエンディングの記録（コレクション） */
.ending-collection{ margin-top:1.8em; }
.ec-head{ color:#5d6772; font-size:.78em; letter-spacing:.18em; margin:0 0 .7em; }
.ending-tracker{ display:flex; gap:.7em; justify-content:center; flex-wrap:wrap; }
.ending-tracker .pip{
  display:flex; flex-direction:column; align-items:center; gap:.25em;
  min-width:5.2em; padding:.55em .6em; border-radius:6px;
  background:rgba(16,22,32,.6); border:1px solid var(--line);
  color:#4a535d; font-family:inherit; cursor:default;
}
.ending-tracker .pip .pip-id{ font-size:.95em; letter-spacing:.1em; }
.ending-tracker .pip .pip-label{ font-size:.72em; letter-spacing:.05em; }
.ending-tracker .pip.seen{ color:var(--light); border-color:#5a6a7a; cursor:pointer;
  box-shadow:0 0 8px rgba(120,150,180,.2); }
.ending-tracker .pip.seen:hover{ background:rgba(34,46,62,.8); border-color:#46586c; }
.ending-tracker .pip:disabled{ opacity:.6; }
.ending-tracker.all .pip.seen{ border-color:var(--accent); color:#e7c9c9; box-shadow:0 0 10px rgba(150,60,60,.28); }

/* メニュー / スロット モーダル */
.menu-box, .slots-box{
  width:min(92vw,440px); background:#0c1119; border:1px solid var(--line); border-radius:8px;
  padding:clamp(18px,4vw,28px); box-shadow:0 18px 60px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:.7em; align-items:stretch;
}
.menu-title{ text-align:center; letter-spacing:.2em; color:var(--light); margin:.1em 0 .6em; font-size:1.1em; }
.menu-box .menu-btn{ min-width:0; width:100%; }
.menu-btn.ghost{ opacity:.7; border-style:dashed; }

#slotsList{ display:flex; flex-direction:column; gap:.5em; margin-bottom:.4em; }
.slot-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:.3em 1em; align-items:center; text-align:left;
  background:rgba(18,24,34,.9); color:var(--ink); border:1px solid var(--line);
  padding:.65em .9em; font-family:inherit; cursor:pointer; border-radius:6px;
  transition:background .14s, border-color .14s;
}
.slot-row:hover{ background:rgba(34,46,62,.95); border-color:#46586c; }
.slot-row.empty{ opacity:.45; cursor:default; }
.slot-name{ font-weight:600; color:var(--light); letter-spacing:.05em; }
.slot-meta{ color:var(--ink-dim); font-size:.82em; }
.slot-ts{ color:#5d6772; font-size:.72em; font-variant-numeric:tabular-nums; grid-column:2 / 4; }
.slot-note{ color:var(--ink-dim); text-align:center; font-size:.85em; margin:.4em 0; }

/* トースト */
#toast{
  position:fixed; left:50%; bottom:14%; transform:translateX(-50%);
  z-index:70; background:rgba(8,12,20,.95); color:var(--ink); border:1px solid var(--line);
  padding:.6em 1.2em; border-radius:6px; font-size:.85em; letter-spacing:.05em;
  opacity:0; transition:opacity .3s ease; pointer-events:none; box-shadow:0 6px 24px rgba(0,0,0,.5);
}
#toast.show{ opacity:1; }

.end-allclear{ color:var(--accent); letter-spacing:.2em; margin:-0.6em 0 1.4em; opacity:.9;
  animation:breathe 3.5s ease-in-out infinite; }

#nameScreen{ z-index:31; display:flex; align-items:center; justify-content:center; background:rgba(6,9,14,.92); }
.name-input{
  display:block; margin:1.2em auto; width:min(80vw,16em);
  background:rgba(12,16,23,.9); color:var(--light); border:1px solid var(--line);
  border-radius:6px; padding:.6em .8em; font-family:inherit; font-size:1.2em;
  text-align:center; letter-spacing:.12em;
}
.name-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 10px rgba(150,40,40,.25); }

.menu-btn{
  background:rgba(20,26,36,.7); color:var(--ink); border:1px solid var(--line);
  padding:.7em 2.4em; font-size:1em; font-family:inherit; letter-spacing:.15em;
  cursor:pointer; min-width:14em; transition:background .15s, border-color .15s;
}
.menu-btn:hover{ background:rgba(40,52,70,.8); border-color:#3a4a5c; }
.menu-btn.disabled, .menu-btn:disabled{ opacity:.35; cursor:not-allowed; }

/* ---------- HUD ---------- */
#game{ z-index:10; }
#hud{
  position:fixed; top:0; left:0; right:0; z-index:12;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:calc(var(--pad)*.7) var(--pad); pointer-events:none;
}
#clock{
  font-variant-numeric:tabular-nums; letter-spacing:.25em; color:var(--light);
  opacity:0; font-size:1.05em; text-shadow:0 0 10px rgba(150,180,200,.3);
}
#clock.show{ animation:clockIn 1.1s ease forwards; }
@keyframes clockIn{ 0%{opacity:0} 25%{opacity:.95} 80%{opacity:.95} 100%{opacity:.7} }

/* v2: 認識度メーターは廃止（気づかれ度は「店の崩れ」で表現） */

#topButtons{
  position:fixed; right:var(--pad); bottom:calc(34% + 14px); z-index:24; /* テキスト窓(z15)より前面=クリック可能 */
  display:flex; gap:.5em;
}
.ui-btn{
  display:inline-flex; align-items:center; gap:.35em;
  background:rgba(15,20,28,.8); color:var(--ink-dim); border:1px solid var(--line);
  padding:.4em .8em; font-family:inherit; font-size:.82em; cursor:pointer; border-radius:4px;
}
.ui-btn .ui-ico{ font-size:1.05em; line-height:1; }
.ui-btn:hover{ color:var(--ink); border-color:#3a4a5c; }
.ui-btn.active{ color:#e7c9c9; border-color:var(--accent); background:rgba(80,28,34,.9);
  box-shadow:0 0 10px rgba(150,40,40,.3); }

.panel{
  position:fixed; right:var(--pad); bottom:calc(40% + 8px); z-index:20;
  background:rgba(12,16,23,.96); border:1px solid var(--line); padding:.9em 1em; border-radius:6px;
  font-size:.85em; max-width:min(86vw,320px);
}
.setting-row{ display:flex; gap:.6em; align-items:center; cursor:pointer; }

/* ---------- レジUI ---------- */
#register{
  position:fixed; left:50%; top:26%; transform:translateX(-50%); z-index:11;
  display:flex; flex-direction:column; align-items:center; gap:.5em; width:min(86vw,300px);
}
.reg-item{
  width:100%; background:#cfd6da; color:#1a1f24; border-radius:5px;
  padding:.5em .8em; display:flex; flex-direction:column; gap:.35em;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.reg-name{ font-size:.86em; letter-spacing:.05em; }
.reg-barcode{ display:flex; align-items:flex-end; gap:2px; height:30px; }
.reg-barcode span{ display:block; height:100%; background:#15191d; }
.reg-barcode span:nth-child(3n){ height:80%; }
.reg-barcode span:nth-child(4n){ height:92%; }
.reg-screen{
  background:#0a1410; color:#7fd6a0; border:2px solid #1d3a2c; border-radius:6px;
  font-family:"Courier New",monospace; letter-spacing:.1em;
  padding:.45em 1.1em; display:flex; gap:1.4em; box-shadow:0 0 16px rgba(40,90,60,.25);
}
.reg-label{ opacity:.7; }
#register.danger .reg-item{ box-shadow:0 0 22px rgba(150,30,30,.55); }
#register.danger .reg-screen{ color:#d68a8a; border-color:#5a1d1d; box-shadow:0 0 18px rgba(150,40,40,.4); }
#register.danger .reg-barcode span{ background:#2a1414; }

/* スキャナのトリガに見立てた危険ボタン */
.choice-btn.scan-btn{ border-color:#5a2230; background:rgba(50,18,24,.92); }
.choice-btn.scan-btn .choice-num{ color:#d98; border-color:#5a2230; }
.choice-btn.scan-btn:hover{ background:rgba(90,28,34,.95); border-color:var(--accent);
  box-shadow:0 0 14px rgba(150,40,40,.35); }

/* ---------- テキストウィンドウ ---------- */
#textWindow{
  position:fixed; left:0; right:0; bottom:0; z-index:15;
  min-height:32%;
  background:linear-gradient(180deg, rgba(6,9,14,.0), rgba(6,9,14,.82) 20%, rgba(6,9,14,.95));
  padding:clamp(20px,5vw,44px) var(--pad) calc(var(--pad) + 6px + env(safe-area-inset-bottom, 0px));
  cursor:pointer; user-select:none;
}
#speaker{
  display:inline-block; color:var(--light); font-weight:700; letter-spacing:.08em;
  font-size:1.02em; border-left:3px solid var(--accent); padding-left:.5em; margin-bottom:.45em;
}
#body{
  margin:0; max-width:40em; min-height:3.2em;
  font-size:1.06em; line-height:1.95;
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}
#textWindow.dialogue #body{ color:#f1f5f8; }
#nextHint{
  position:absolute; right:calc(var(--pad) + 4px); bottom:10px;
  color:var(--ink-dim); animation:bob 1.1s infinite; font-size:.8em;
}
@keyframes bob{ 0%,100%{transform:translateY(0);opacity:.4} 50%{transform:translateY(3px);opacity:.9} }

/* ---------- 選択肢 ---------- */
#choices{ margin-top:1.1em; display:flex; flex-direction:column; gap:.6em; max-width:40em; }
.choice-btn{
  display:flex; align-items:center; gap:.7em; text-align:left;
  background:rgba(18,24,34,.92); color:var(--ink); border:1px solid var(--line);
  padding:.85em 1em; font-family:inherit; font-size:1.02em; line-height:1.5;
  cursor:pointer; border-radius:6px; min-height:2.8em;
  transition:background .14s, border-color .14s, transform .1s;
}
.choice-btn:hover{ background:rgba(34,46,62,.95); border-color:#46586c; transform:translateX(2px); }
.choice-num{
  flex:none; width:1.6em; height:1.6em; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:3px; color:var(--ink-dim); font-size:.8em;
}

/* ---------- ノート オーバーレイ ---------- */
.overlay{
  position:fixed; inset:0; z-index:35; background:rgba(2,4,7,.78);
  display:flex; align-items:center; justify-content:center; padding:var(--pad);
}
.notebook{
  position:relative; width:min(94vw,560px); max-height:86vh; overflow:auto;
  background:#e9e3d2; color:#23201a; border-radius:4px;
  padding:clamp(20px,5vw,40px); line-height:2;
  box-shadow:0 18px 60px rgba(0,0,0,.6);
  background-image:repeating-linear-gradient(transparent, transparent 2.0em, rgba(60,80,120,.16) 2.05em, transparent 2.1em);
  font-family: "Yu Mincho","Hiragino Mincho ProN", serif;
}
.notebook-close{
  position:absolute; top:8px; right:8px; z-index:3;
  width:1.7em; height:1.7em; display:grid; place-items:center;
  background:rgba(10,12,16,.7); color:#f2f4f7; border:1px solid rgba(255,255,255,.25);
  border-radius:50%; font-size:1.4em; line-height:1; cursor:pointer;
}
.notebook-close:hover{ background:rgba(40,46,56,.9); }
.notebook-img{ display:block; width:100%; height:auto; border-radius:4px; box-shadow:0 6px 20px rgba(0,0,0,.4); }

/* 画像のみ表示モード：紙の下地・罫線・余白を消し、画像＋×だけにする */
.notebook.image-only{
  background:none; background-image:none; box-shadow:none; padding:0; overflow:visible;
}
.notebook.image-only .notebook-img{ border-radius:6px; box-shadow:0 18px 60px rgba(0,0,0,.6); }

/* ノートが“ふわっと”開く演出（立ち絵のフェードインに近い） */
.notebook.opening{ animation:noteOpen .4s cubic-bezier(.2,.7,.3,1); }
@keyframes noteOpen{
  0%{ opacity:0; transform:translateY(14px) scale(.92); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
body.reduce-motion .notebook.opening{ animation:none; }
.notebook-head{ text-align:center; margin:.2em 0 .6em; letter-spacing:.2em; font-size:1em; color:#4a4436; }
/* 主旨文＝主役（大きめ）。ルールはその下にぶら下げる */
.notebook-principle{ margin:0 0 1.1em; }
.notebook-principle .principle-line{
  margin:.15em 0; text-align:center; font-weight:700; letter-spacing:.04em;
  font-size:clamp(18px,3.4vw,25px); line-height:1.7; color:#1a160e;
  transform:rotate(-.4deg);
}
.notebook-principle .principle-line.muted{ font-weight:400; color:#8a8472; font-style:italic; transform:none; }
.notebook-principle .principle-line:last-child{ color:#7a1d1d; }   /* 「気づかせるな」を赤系で強調 */
#notebookRules{ margin:0; padding:.6em 0 0; list-style:none; border-top:1px dashed rgba(60,50,40,.3); }
#notebookRules .rule{
  margin:.2em 0; padding:.25em 0; border-bottom:1px dashed rgba(60,50,40,.25);
  transform:rotate(-.3deg);
}
#notebookRules .muted{ color:#8a8472; font-style:italic; border:none; }

/* ---------- エンドカード ---------- */
#endCard{ z-index:42; display:flex; align-items:center; justify-content:center; background:rgba(2,3,5,.92); animation:endIn 1.6s ease both; }
@keyframes endIn{ 0%{opacity:0} 40%{opacity:0} 100%{opacity:1} }
.end-inner{ text-align:center; padding:var(--pad); }
#endTitle{ font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif; font-weight:900; font-size:clamp(24px,7vw,44px); letter-spacing:.18em; color:var(--light); margin-bottom:1.4em; text-shadow:1px 1px 0 rgba(0,0,0,.7), 0 0 20px rgba(150,30,30,.25); }
/* エンディングのボタンは3つとも同じ横幅で縦並び（長いLINEラベルに合わせる） */
.end-buttons{ display:flex; flex-direction:column; gap:.7em; align-items:stretch; width:min(20em,82vw); margin:.2em auto 0; }
.end-buttons .menu-btn{ width:100%; min-width:0; }

/* END D / E のみ：専用アートを背景に残す（A/B/C・END Bの暗転には影響しない）。
 * 全面92%の暗パネルではなく半透明グラデ。中央（文字周辺）だけ濃く、周縁は絵が透ける。 */
#endCard.art{
  background:
    radial-gradient(82% 64% at 50% 50%, rgba(3,4,8,.80) 0%, rgba(3,4,8,.56) 52%, rgba(3,4,8,.52) 100%);
}
#endCard.art #endTitle{
  text-shadow:0 2px 8px rgba(0,0,0,.9), 0 0 24px rgba(0,0,0,.72), 1px 1px 0 rgba(0,0,0,.85);
}
#endCard.art .menu-btn{ background:rgba(10,14,21,.84); }

/* ---------- デバッグ ---------- */
#debugPanel{
  position:fixed; left:6px; bottom:6px; z-index:60;
  background:rgba(0,0,0,.85); border:1px solid #394; color:#bdf; font-size:11px;
  padding:8px; border-radius:6px; max-width:min(94vw,340px); line-height:1.5;
}
#debugPanel strong{ color:#7f7; }
.dbg-row{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-top:5px; }
#debugPanel select,#debugPanel button,#debugPanel input{ font-size:11px; }
.dbg-toggles{ display:flex; flex-wrap:wrap; gap:2px 8px; margin-top:5px; max-height:120px; overflow:auto; }
.dbg-tog{ display:flex; align-items:center; gap:2px; white-space:nowrap; }

/* ---------- レスポンシブ（スマホ） ---------- */
@media (max-width:560px){
  :root{ --fs: clamp(18px, 4.6vw, 22px); --pad: clamp(14px, 4.5vw, 22px); }
  #hud{ padding-top:max(8px, env(safe-area-inset-top, 0px)); }
  /* 常設ボタンは上部に寄せ、タップしやすいサイズに */
  #topButtons{ bottom:auto; top:max(6px, env(safe-area-inset-top, 0px)); right:6px; gap:.3em; max-width:62vw; justify-content:flex-end; }
  /* スマホはアイコンのみ・小型化（左上の時計と被らないように） */
  .ui-btn .ui-lbl{ display:none; }
  .ui-btn{ font-size:.9em; padding:.34em .5em; min-width:2.2em; justify-content:center; }
  .ui-btn .ui-ico{ font-size:1.1em; }
  #hud{ padding-right:calc(62vw + 10px); }   /* 時計をボタン群の左側に確保 */
  .panel{ bottom:auto; top:54px; right:8px; max-width:min(92vw,340px); font-size:.95em; }
  #register{ top:20%; width:min(92vw,300px); }

  /* 本文：画面を広めに使って大きく */
  #textWindow{ min-height:38%; }
  #body{ font-size:1.12em; }
  #choices{ max-width:100%; }
  .choice-btn{ font-size:1.05em; padding:.95em 1em; min-height:3em; }

  /* タイトル / メニュー / エンド：押しやすく */
  .menu-btn{ min-width:min(82vw,16em); padding:.9em 1.6em; }
  .title-buttons{ width:100%; }
  .notebook{ padding:clamp(18px,6vw,28px); line-height:1.9; }
  .ending-tracker .pip{ min-width:4.6em; }
  /* スロット行：縦並びで見やすく */
  .slot-row{ grid-template-columns:1fr; gap:.15em; }
  .slot-ts{ grid-column:1; }
}
/* 画面が低い横向き等で立ち絵がテキストに被りすぎないよう調整 */
@media (max-height:560px){
  .sprite-img{ max-height:80%; bottom:20%; }
  #textWindow{ min-height:30%; }
}
@media (prefers-reduced-motion: reduce){
  #flicker{ animation:none; opacity:0; }
  #clock.show{ animation:none; opacity:.7; }
}

/* ---------- 「何もしない＝耐える」カウントダウン演出 ---------- */
#countdown{
  position:fixed; inset:0; z-index:36; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35em;
}
#countdownNum{
  font-size:clamp(80px, 26vmin, 240px); font-weight:700; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums; opacity:.92;
  text-shadow:0 0 26px rgba(150,40,40,.5), 0 0 8px rgba(0,0,0,.85);
}
#countdownNum.tick{ animation:cdTick .9s ease-out; }
@keyframes cdTick{
  0%{ transform:scale(1.35); opacity:.15; }
  30%{ opacity:.95; }
  100%{ transform:scale(1); opacity:.92; }
}
#countdownText{
  color:var(--accent); letter-spacing:.35em; font-size:clamp(16px, 3.4vw, 24px);
  text-shadow:0 0 10px rgba(0,0,0,.9);
}
body.reduce-motion #countdownNum.tick{ animation:none; }
@media (prefers-reduced-motion: reduce){
  #countdownNum.tick{ animation:none; }
}

/* ---------- 顔の「ペン書きスクリブル（ぐちゃぐちゃ落書き）」演出 ---------- */
/* faceGlitch シーンで #glitchLines に .on が付く。中央上部（顔の位置）に、
 * ペンで丸くぐるぐる塗り潰したような黒い落書きを重ね、SVGの揺らぎフィルタ
 * （feTurbulence＋feDisplacementMap）でうねうね蠢かせ続ける。 */
#glitchLines{
  position:fixed; left:55%; top:8%; transform:translateX(-50%);
  width:min(54vmin, 76vw); height:min(58vmin, 62vh);
  z-index:9;                 /* 立ち絵(8)より前・テキスト窓(15)より後ろ */
  pointer-events:none; opacity:0; transition:opacity .35s ease;
}
#glitchLines.on{ opacity:1; }
#glitchLines svg{
  width:100%; height:100%; display:block; overflow:visible;
  transform-origin:50% 46%;
  animation:scribbleWobble .16s steps(2) infinite;
  /* 白いペン線をうっすら発光させる（LINE MOSAIC THE FACE 風） */
  filter:drop-shadow(0 0 .6px rgba(235,240,255,.5)) drop-shadow(0 0 2px rgba(200,215,255,.22));
}
/* 全体を小刻みに回転・移動させ、フィルタのうねりと合わせて「生きている」質感に */
@keyframes scribbleWobble{
  0%{   transform:rotate(-1.6deg) translate(-1px, 0); }
  50%{  transform:rotate(1.3deg)  translate(1px, -1px); }
  100%{ transform:rotate(-0.5deg) translate(0, 1px); }
}
/* 演出軽減時：全体の揺れだけ止める（SVG内のうねりは演出の核なので残す） */
body.reduce-motion #glitchLines svg{ animation:none; }
@media (prefers-reduced-motion: reduce){
  #glitchLines svg{ animation:none; }
}

/* ---------- オープニング・ポップアップ / LINEボタン ---------- */
/* タイトルと同じ明朝・配色・ボタン寸法に統一（雰囲気を壊さない） */
#introPopup{ z-index:88; }
.intro-box{
  text-align:center; width:min(92vw,420px);
  background:rgba(8,11,17,.92); border:1px solid var(--line); border-radius:8px;
  padding:clamp(22px,5vw,34px) clamp(18px,4vw,28px);
  box-shadow:0 18px 60px rgba(0,0,0,.6);
}
.intro-box .title-time{ font-size:.85em; margin-bottom:.2em; }
.intro-title{
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-weight:900; letter-spacing:.08em; color:#d7dde2; margin:.05em 0 .1em;
  font-size:clamp(19px,4.6vw,26px);
  text-shadow:0 0 1px #000, 1px 1px 0 rgba(0,0,0,.7), 2px 0 0 rgba(150,20,20,.35), -2px 0 0 rgba(30,60,110,.28), 0 0 22px rgba(150,30,30,.22);
}
.intro-sub{ font-size:.74em; margin:.1em 0 .6em; }   /* .title-sub を小さめ＆下マージン圧縮 */
.intro-lead{
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  color:var(--ink-dim); line-height:1.8; letter-spacing:.04em; margin:.2em 0 1.1em; font-size:.8em;
}
/* 2ボタンの横幅を揃える（長いLINEラベルに合わせて両方とも同じ幅） */
.intro-box .title-buttons{ align-items:stretch; }
.intro-box .menu-btn{ font-size:.9em; width:100%; min-width:0; padding-left:1em; padding-right:1em; }
.intro-box .title-buttons{ gap:.7em; }
/* LINE（友だち追加）ボタン：明度を抑えたくすんだ緑で、夜の雰囲気に馴染ませる */
.line-btn{ color:#bfe6cd; border-color:#2f7a4a; background:rgba(18,30,24,.7); }
.line-btn:hover{ color:#dff5e6; border-color:#3fa05f; background:rgba(26,46,36,.85); }
/* アート系エンドカードでも同じくすんだ緑を維持 */
#endCard.art .line-btn{ color:#bfe6cd; border-color:#2f7a4a; background:rgba(18,30,24,.72); }

/* =====================================================================
 * エンディング後アンケート ポップアップ（#endpop）
 *   すべて #endpop にスコープし、既存クラス(.line-btn 等)へ波及させない。
 *   配色は本編の寒色系・蛍光灯の夜に合わせる。
 * ===================================================================== */
#endpop.modal{
  position:fixed; inset:0; z-index:99998; display:none;
  align-items:center; justify-content:center; padding:18px;
  background:rgba(3,5,9,.86);
}
#endpop.modal.show{ display:flex; }
#endpop .modal-card{
  position:relative; width:100%; max-width:520px; max-height:92vh; overflow-y:auto;
  background:linear-gradient(#141b26,#0b0f16);
  border:1px solid #3f5064; border-radius:14px;
  box-shadow:0 0 60px rgba(0,0,0,.85), 0 0 40px rgba(178,59,59,.16), inset 0 0 30px rgba(0,0,0,.5);
  padding:34px 24px 30px; text-align:center;
  animation:endpopIn .42s ease;
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--ink);
}
@keyframes endpopIn{ from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none} }
#endpop .modal-x{
  position:absolute; top:8px; right:14px; font-size:26px; line-height:1;
  color:#7d8894; cursor:pointer; transition:color .15s; background:none; border:none;
}
#endpop .modal-x:hover{ color:#fff; }
#endpop .end-name{ margin:0 0 1.2em; }
#endpop .end-name-kicker{
  display:block; font-size:clamp(11px,3vw,13px); letter-spacing:.35em; text-indent:.35em;
  color:var(--ink-dim); margin-bottom:.5em;
}
#endpop .end-name-title{
  display:block; font-weight:800; font-size:clamp(22px,6vw,30px); line-height:1.3;
  color:var(--ink); letter-spacing:.06em; text-shadow:0 0 22px rgba(178,59,59,.35);
}
#endpop .pop-head{
  font-weight:800; font-size:clamp(19px,5.4vw,26px); line-height:1.5;
  color:var(--ink); text-shadow:0 0 24px rgba(178,59,59,.3); letter-spacing:.06em;
}
#endpop .pop-label{
  text-align:left; margin:1.5em 0 .5em; font-size:clamp(13px,3.6vw,15px);
  letter-spacing:.08em; color:var(--light);
}
#endpop .stars{ display:flex; justify-content:center; gap:12px; font-size:clamp(30px,9vw,42px); }
#endpop .star{ color:#39424f; cursor:pointer; transition:color .15s, text-shadow .15s; user-select:none; }
#endpop .star:hover, #endpop .star.on{ color:#f0c34a; text-shadow:0 0 16px rgba(240,195,74,.55); }
#endpop .fb-text{
  width:100%; min-height:104px; resize:vertical;
  background:#070a0f; border:1px solid #2c3542; border-radius:8px;
  color:var(--ink); font-family:inherit; font-size:15px; line-height:1.7;
  padding:12px 14px; box-sizing:border-box;
}
#endpop .fb-text::placeholder{ color:#5c6672; }
#endpop .fb-send{
  margin:1.4em auto 0; display:block; font-family:inherit;
  font-size:clamp(15px,4.2vw,18px); letter-spacing:.2em; text-indent:.2em;
  color:var(--ink); background:linear-gradient(#1a2230,#0d131c);
  border:1px solid #3a4657; border-radius:30px; padding:12px 42px;
  cursor:pointer; transition:color .2s, border-color .2s;
}
#endpop .fb-send:hover{ color:#fff; border-color:#5a6b80; }
#endpop .fb-send:disabled{ opacity:.5; cursor:default; }
#endpop .fb-thanks{
  display:none; margin:1.6em 0; font-size:clamp(15px,4vw,18px);
  color:var(--light); letter-spacing:.08em;
}
#endpop .pop-div{ height:1px; background:#242e3a; margin:1.9em 0 1.4em; }
#endpop .line-pitch{
  font-size:clamp(13px,3.6vw,15px); color:var(--ink-dim);
  letter-spacing:.05em; line-height:1.8;
}
#endpop .end-line-btn{
  margin:1.1em auto 0; display:block; font-family:inherit;
  font-size:clamp(15px,4.4vw,18px); font-weight:700; letter-spacing:.1em;
  color:#fff; background:linear-gradient(#1f7a44,#13502d);
  border:1px solid #3ac472; border-radius:30px; padding:14px 30px;
  cursor:pointer; transition:background .2s, box-shadow .2s;
  box-shadow:0 0 20px rgba(40,180,90,.28);
}
#endpop .end-line-btn:hover{ background:linear-gradient(#26a157,#177038); box-shadow:0 0 32px rgba(60,220,120,.5); }
/* 演出を弱める設定時はポップインを止める */
body.reduce-motion #endpop .modal-card{ animation:none; }