@import url('https://googleapis.com');

/* =======================================================
   1. 全体設定 ＆ スマホ誤操作・選択防止
   ======================================================= */
* { 
  box-sizing: border-box; 
  -webkit-touch-callout: none; /* リンク長押しメニュー禁止 */
  user-select: none;           /* テキスト選択禁止（連打対策） */
  -webkit-user-select: none;
}

body {
  margin: 0;
  padding: 0;
  background: #020204; /* わずかに色を帯びた、深い闇の黒 */
  color: #eee;
  font-family: 'Noto Serif JP', serif;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* =======================================================
   2. 環境・ホラーエフェクト層
   ======================================================= */
/* 懐中電灯（JSで中心座標をリアルタイム制御） */
#flashlight {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle var(--light-radius, 140px) at var(--light-x, 50%) var(--light-y, 50%), transparent 20%, rgba(0, 0, 0, 0.95) 100%);
  pointer-events: none;
  z-index: 5;
}

/* フィルムノイズ */
#noise {
  position: fixed;
  inset: 0;
  background-image: url("https://vercel.app");
  opacity: 0.2;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 6;
}

/* =======================================================
   3. HUD（ミニマップシステム）
   ======================================================= */
#hud {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 20;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* JSでこのクラスを付与して表示 */
#hud.visible {
  opacity: 1;
}

.map {
  width: 90px;
  height: 90px;
  border: 1px solid #444;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.85);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0,0,0,0.7);
}

.map-path {
  position: absolute;
  left: 40px;
  top: 5px;
  width: 10px;
  height: 80px;
  background: #18181c;
}

.map-player,
.map-shadow {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  /* JSでの実数値位置更新を滑らかにつなぐ */
  transition: bottom 0.2s ease-out, top 0.2s ease-out; 
}

.map-player {
  background: #4cd137;
  left: 40px;
  bottom: 5px;
  box-shadow: 0 0 8px #4cd137;
}

.map-shadow {
  background: #e84118;
  left: 40px;
  top: 5px;
  box-shadow: 0 0 8px #e84118;
}

/* =======================================================
   4. ステージ共通レイアウト ＆ テキスト調整
   ======================================================= */
.stage {
  display: none;
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.stage.active { 
  display: block; 
}

/* テキストエリアの配置（上部にまとめることでUIと被らせない） */
.text-area {
  position: absolute;
  top: 8vh;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0 5vw;
  z-index: 10;
  pointer-events: none;
}

.center-text {
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  line-height: 1.8;
  text-shadow: 0 0 10px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,1);
}

.small { font-size: 0.95rem; color: #bbb; margin-top: 8px; }
.strong { font-weight: 700; letter-spacing: 0.15em; }

.bad-text {
  margin-top: 35vh;
  color: #ff3333;
  font-size: 1.8rem;
  text-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
}

/* 囁きテキスト */
.whisper-text {
  margin-top: 1.5rem;
  font-size: 1rem;
  min-height: 24px;
  color: #8e9597;
  font-style: italic;
  letter-spacing: 0.1em;
  transition: opacity 0.5s ease;
  opacity: 0;
}

/* =======================================================
   5. 【操作性改善】UIボタンの固定・スマホ最適化
   ======================================================= */
/* 進行ボタン、選択肢、連打エリアをすべて画面下部30%前後に完全固定 */
.next-btn, .choices, .mash-area {
  position: absolute !important;
  bottom: 28vh !important; /* 押しやすく、最下部バーを避ける絶妙な高さ */
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 100;
}

button {
  padding: 1.1rem 3.5rem;
  background: rgba(12, 12, 16, 0.85);
  border: 1px solid #444;
  color: #ddd;
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.7);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  white-space: nowrap;
  touch-action: manipulation; /* スマホのダブルタップズームを強制禁止 */
}

button:hover { 
  background: #c0392b; 
  color: #fff;
  border-color: #ff4444;
  box-shadow: 0 0 20px rgba(192, 57, 43, 0.6);
  transform: translateX(-50%) translateY(-2px) !important;
}

button:active {
  transform: translateX(-50%) translateY(1px) !important;
}

/* 分岐選択肢ボタンの横並びコンテナ */
.choices {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  width: 90vw;
  max-width: 440px;
}

.choices button {
  position: static !important;
  transform: none !important;
  flex: 1;
  padding: 1.1rem 0;
}

.choices button:hover {
  transform: translateY(-2px) !important;
}
/* =======================================================
   6. ステージ1：タイトル演出（グリッチ＆パルス）
   ======================================================= */
.title-container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.glitch {
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  color: #fff;
  letter-spacing: 0.15em;
  white-space: nowrap;
  position: relative;
  text-shadow: 0 0 15px rgba(255,255,255,0.1);
  margin: 0;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.8;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #c0392b;
  animation: glitch 2.5s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: 2px 0 #0984e3;
  animation: glitch 1.8s infinite linear alternate-reverse;
}

@keyframes glitch {
  0% { clip-path: inset(10% 0 75% 0); }
  20% { clip-path: inset(40% 0 35% 0); }
  40% { clip-path: inset(70% 0 10% 0); }
  60% { clip-path: inset(25% 0 55% 0); }
  80% { clip-path: inset(55% 0 20% 0); }
  100% { clip-path: inset(5% 0 85% 0); }
}

.subtitle {
  color: #c0392b;
  letter-spacing: 0.4em;
  font-size: 1.15rem;
  margin-top: 15px;
}

.tagline {
  color: #888;
  font-size: 0.95rem;
  margin-top: 5vh;
  animation: pulse 2s infinite alternate;
}

@keyframes pulse {
  from { opacity: 0.3; } to { opacity: 0.8; }
}

/* =======================================================
   7. 疑似3D廊下グラフィック
   ======================================================= */
.corridor {
  position: absolute;
  top: 26vh;
  left: 0;
  width: 100vw;
  height: 40vh;
  perspective: 700px;
  z-index: 1;
  overflow: hidden;
}

.wall {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
}

.wall.left {
  left: 0;
  transform-origin: right center;
  transform: skewY(12deg);
  background: linear-gradient(to right, #030305, #16161c);
  border-right: 1px solid #25252e;
}

.wall.right {
  right: 0;
  transform-origin: left center;
  transform: skewY(-12deg);
  background: linear-gradient(to left, #030305, #16161c);
  border-left: 1px solid #25252e;
}

.floor {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35%;
  background: linear-gradient(to top, #06060a, #000);
}

/* 廊下のバリエーション演出 */
.corridor.flicker {
  animation: flickerBg 0.12s infinite;
}

@keyframes flickerBg {
  0% { filter: brightness(0.6) contrast(1.3); }
  50% { filter: brightness(1.2) contrast(0.85); }
  100% { filter: brightness(0.5) contrast(1.15); }
}

.corridor.dark {
  filter: brightness(0.2) blur(1px);
}

/* =======================================================
   8. 不気味な影（シルエット構造）
   ======================================================= */
.shadow-figure {
  position: absolute;
  width: 65px;
  height: 145px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 30% 20%, rgba(0,0,0,0.1), transparent 50%),
              linear-gradient(to bottom, #000000, #0c0c10);
  border-radius: 40px 40px 20px 20px;
  box-shadow: 0 0 25px rgba(0,0,0,0.95);
  filter: blur(2px);
  transition: all 0.3s ease-out;
}

.shadow-figure::before,
.shadow-figure::after {
  content: "";
  position: absolute;
  background: #000;
}

/* 頭部 */
.shadow-figure::before {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  top: -32px;
  left: 11px;
}

/* 足元の影のブレンド */
.shadow-figure::after {
  width: 75px;
  height: 22px;
  border-radius: 50%;
  bottom: -15px;
  left: -5px;
  background: radial-gradient(circle, rgba(0,0,0,0.9), transparent 70%);
}

/* 影の距離ステージング */
.shadow-figure.far { bottom: 12%; opacity: 0.35; transform: translateX(-50%) scale(0.5); filter: blur(5px); }
.shadow-figure.side { bottom: 5%; left: 26%; opacity: 0.65; transform: translateX(-50%) rotate(-6deg); }
.shadow-figure.mid { bottom: 6%; opacity: 0.85; transform: translateX(-50%) scale(0.95); }
.shadow-figure.close { bottom: 2%; opacity: 1; transform: translateX(-50%) scale(1.3); filter: blur(0px); }

/* 追跡ステージの激しい揺れ動く影 */
.corridor.chase {
  overflow: hidden;
}
.corridor.chase .shadow-figure {
  bottom: 2%;
  opacity: 0.6;
  transform: translateX(-50%) scale(1);
  animation: chaseBob 0.4s infinite alternate ease-in-out;
}

@keyframes chaseBob {
  0% { margin-bottom: 0px; filter: blur(2px); }
  100% { margin-bottom: 8px; filter: blur(4px); }
}

/* =======================================================
   9. 部屋 ＆ 各種ギミック構造
   ======================================================= */
.room {
  position: absolute;
  top: 26vh;
  left: 0;
  width: 100vw;
  height: 40vh;
  background: radial-gradient(circle at center, #121218, #000);
  z-index: 1;
}

/* 扉の選択 */
.doors .door {
  position: absolute;
  width: 85px;
  height: 165px;
  bottom: 8%;
  background: linear-gradient(to bottom, #191922, #020204);
  border: 1px solid #353540;
  box-shadow: inset 0 0 15px #000;
}
.left-door { left: 22%; }
.right-door { right: 22%; }

/* 脱出口 */
.exit {
  background: radial-gradient(circle at top, #202028, #000);
}
.exit-door {
  position: absolute;
  width: 110px;
  height: 190px;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #777, #1a1a20);
  box-shadow: 0 0 40px rgba(255,255,255,0.12);
  border: 1px solid #444;
}
.exit-shadow {
  position: absolute;
  width: 75px;
  height: 150px;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  filter: blur(2px);
  opacity: 0.95;
}

/* 呪われた鏡 */
.mirror {
  width: 230px;
  height: 230px;
  margin: 3vh auto 0;
  border-radius: 50%;
  border: 3px solid #3a3a45;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle, #16161f, #020205);
  box-shadow: 0 0 25px rgba(0,0,0,0.9);
}

.mirror-self {
  position: absolute;
  width: 60%;
  height: 85%;
  left: 20%;
  bottom: 0;
  background: linear-gradient(to top, #333940, transparent);
  opacity: 0.3;
  filter: blur(1px);
}

.mirror-shadow {
  position: absolute;
  width: 60%;
  height: 85%;
  left: 24%;
  bottom: -5%;
  background: linear-gradient(to top, #8a0303, transparent);
  opacity: 0;
  animation: appearShadow 3.5s infinite ease-in-out;
}

@keyframes appearShadow {
  0% { opacity: 0; transform: translateY(15px) scale(0.9); filter: blur(6px); }
  50% { opacity: 0.75; transform: translateY(0) scale(1); filter: blur(2px); }
  100% { opacity: 0; transform: translateY(-15px) scale(1.05); filter: blur(7px); }
}

/* 壁から伸びる無数の手 */
.hands-wall {
  position: absolute;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 15% 35%, rgba(138,3,3,0.45), transparent 45%),
    radial-gradient(circle at 85% 65%, rgba(138,3,3,0.45), transparent 45%);
  animation: hands 2s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes hands {
  0% { filter: blur(6px); opacity: 0.1; transform: scale(0.95); }
  100% { filter: blur(2px); opacity: 0.6; transform: scale(1.05); }
}

/* =======================================================
   10. ステージ8：連打（Mash）UIの最適化
   ======================================================= */
.mash-area {
  width: 85vw;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#mashBtn {
  position: static !important;
  transform: none !important;
  width: 100%;
  background: #250404;
  border-color: #550a0a;
  color: #ffcccc;
  font-weight: 700;
  padding: 1.2rem 0;
  box-shadow: 0 6px 20px rgba(138, 3, 3, 0.3);
}

#mashBtn:hover {
  background: #8a0303;
  border-color: #ff3333;
  box-shadow: 0 0 25px #8a0303;
}

.mash-bar {
  width: 100%;
  height: 14px;
  margin-top: 1.2rem;
  border-radius: 7px;
  border: 1px solid #444;
  overflow: hidden;
  background: #060608;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
}

.mash-fill {
  width: 0%; /* 初期値はJS依存 */
  height: 100%;
  background: linear-gradient(to right, #8a0303, #ff3333);
  box-shadow: 0 0 10px #ff0000;
  transition: width 0.08s linear;
}

/* =======================================================
   11. システム・画面揺れ ＆ バッドエンド演出
   ======================================================= */
/* クラス付与による激しい画面揺れ */
.shake {
  animation: shakeEffect 0.35s linear;
}

@keyframes shakeEffect {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 4px) rotate(-0.5deg); }
  40% { transform: translate(6px, -4px) rotate(0.5deg); }
  60% { transform: translate(-4px, -2px) rotate(-0.2deg); }
  80% { transform: translate(4px, 3px) rotate(0.3deg); }
  100% { transform: translate(0, 0); }
}

/* バッドエンド：覆い尽くす影 */
.grab-screen {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, #000 15%, transparent 65%),
    radial-gradient(circle at 70% 70%, #000 15%, transparent 65%),
    rgba(0, 0, 0, 0.9);
  animation: grabAnimation 1.2s forwards cubic-bezier(0.1, 0.8, 0.1, 1);
  z-index: 1;
}

@keyframes grabAnimation {
  0% { transform: scale(1.4); opacity: 0; filter: blur(12px); }
  100% { transform: scale(1); opacity: 1; filter: blur(0px); }
}