/* ===============================
   ORA Quest : Day1 Common CSS
   =============================== */

#ora-app.mode-movie .action-buttons {
  display: none !important;
}

#movie-choices {
  position: absolute;
  bottom: 18rem;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  gap: 1rem;

  width: min(80vw, 600px);
}

#movie-choices button {
  width: 100%;

  padding: 1rem 1.5rem;

  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);

  background: rgba(10,10,15,0.9);
  color: #fff;

  border: 0.1rem solid rgba(255,255,255,0.4);
  border-radius: 1rem;

  backdrop-filter: blur(6px);

  cursor: pointer;
}

#movie-choices button:hover {
  background: rgba(255,255,255,0.1);
}

/* ---------- 背景 ---------- */
body {
  margin: 0;
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-manga {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
}

/* ---------- アプリ全体 ---------- */
#ora-app {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

#ora-app,
#talk-bubble,
#resident-image,
#next-button,
#choices,
.soul-flame,
.action-buttons,
.modal-overlay,
.modal-overlay * {
  pointer-events: auto;
}


/* ===============================
   Title Mode（UIを殺す）
=============================== */
#ora-app.mode-title .resident-container,
#ora-app.mode-title #talk-bubble,
#ora-app.mode-title .action-buttons,
#ora-app.mode-title .soul-flame,
#ora-app.mode-title #next-button,
#ora-app.mode-title #choices {
  display: none !important;
}



/* ==================================================
   動画
   ================================================== */
.mode-movie #talk-bubble,
.mode-movie #choice-container,
.mode-movie #next-button,
.mode-movie #resident-left,
.mode-movie #resident-right,
.mode-movie #ui-top-bar {
  display: none !important;
}
#ora-movie-video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ← 重要 */
  background: #000;
}
#ora-movie-text {
  color: #fff;
}

/* OP_warden13：赤く怪しく */
#ora-movie-text[data-key="OP_warden13"] {
  color: #ff3b3b;
  text-shadow:
    0 0 6px rgba(255,0,0,0.8),
    0 0 14px rgba(255,0,0,0.5),
    0 0 24px rgba(180,0,0,0.4);
}


/* 祈る：淡い幻想 */
#movie-choices button[data-key="day1_movie_choice_1"] {
  color: #d9f3ff;
  text-shadow:
    0 0 6px rgba(210,240,255,0.8),
    0 0 14px rgba(170,220,255,0.45);
}


/* 堕ちる：邪悪な紫 */
#movie-choices button[data-key="day1_movie_choice_2"] {
  color: #b86cff;
  text-shadow:
    0 0 6px rgba(160,80,255,0.85),
    0 0 14px rgba(110,40,180,0.6),
    0 0 22px rgba(70,0,120,0.45);
}


#ora-movie-text[data-key="movie_caution0"],
#ora-movie-text[data-key="movie_caution3"],
#ora-movie-text[data-key="OP_warden15"] {
  color: red;
}

/* ==================================================
   ソウルポイント（青い炎） mode-game 専用
   ================================================== */

#ora-app.mode-game .soul-flame {
  position: relative;

  width: clamp(5rem, 7vw, 7rem);
  height: clamp(5rem, 7vw, 7rem);

  border-radius: 50%;
  background: transparent;
  border: none;
  padding: 0;

  display: grid;
  place-items: center;

  overflow: visible;
  cursor: pointer;

  z-index: 19;
}

/* iPadだけ少し大きく（縦用） */
@media (min-width: 700px) and (max-width: 1024px) {
  #ora-app.mode-game .soul-flame {
    width: 10rem;
    height: 10rem;
  }
}

/* 横向きスマホは小さく（iPhone Pro Maxも含む） */
@media (orientation: landscape) and (max-width: 1024px) {
  #ora-app.mode-game .soul-flame {
    width: clamp(3rem, 4vw, 4.5rem);
    height: clamp(3rem, 4vw, 4.5rem);
  }
}

/* iPad横向きは少し大きく */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (min-width: 1024px) {
  #ora-app.mode-game .soul-flame {
    width: 10rem;
    height: 10rem;
  }
}

/* PCは少し小さく */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  #ora-app.mode-game .soul-flame {
    width: clamp(4.5rem, 6vw, 6rem);
    height: clamp(4.5rem, 6vw, 6rem);
  }
}

/* 炎アニメ（見た目専用） */
#ora-app.mode-game .soul-flame video {
  width: 100%;               /* ←②より吸収 */
  height: 100%;
  object-fit: cover;         /* ←②より吸収 */
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: normal;    /* ←②より吸収 */
}

/* ソウルポイント数値（中央重ね） */
#ora-app.mode-game #ora-soul-points {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  color: #eaf4ff;

  text-shadow:
    0 0 6px rgba(120,180,255,0.9),
    0 0 12px rgba(120,180,255,0.6);

  pointer-events: none;
}

/* iPadだけ少し大きく（縦） */
@media (min-width: 700px) and (max-width: 1024px) {
  #ora-app.mode-game #ora-soul-points {
    font-size: 3.8rem;
  }
}

/* 横向きSE（半分） */
@media (orientation: landscape) and (max-width: 500px) {
  #ora-app.mode-game #ora-soul-points {
    font-size: clamp(1.1rem, 2vw, 2rem);
  }
}

/* 横向きiPhone（1/3くらい） */
@media (orientation: landscape) and (min-width: 501px) and (max-width: 1024px) {
  #ora-app.mode-game #ora-soul-points {
    font-size: clamp(0.8rem, 1.5vw, 1.5rem);
  }
}

/* iPad横向き（少し大きく） */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (min-width: 1024px) {
  #ora-app.mode-game #ora-soul-points {
    font-size: 4.4rem;
  }
}

/* PCは少し小さく */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    #ora-app.mode-game #ora-soul-points {
    font-size: 2.5rem;
  }
}

/* 視覚過敏配慮 */
@media (prefers-reduced-motion: reduce) {
  #ora-app.mode-game .soul-flame {
    animation: none !important;
    transition: none !important;
  }
}


/* 選んだ選択肢によってソウルポイントの色が変わる */
.soul-flame::after {
  content: "";
  position: absolute;

  inset: 2%;

  border-radius: 50%;
  pointer-events: none;

  box-shadow:
    0 0 25px var(--flame-color),
    0 0 60px var(--flame-color),
    0 0 120px var(--flame-color);

  opacity: 1;

  filter: blur(6px);
  z-index: 20;
}

/* 強調エフェクト */
.soul-flame-wrapper.soul-shock .soul-flame::after {
  box-shadow:
    0 0 40px var(--flame-color),
    0 0 80px var(--flame-color),
    0 0 120px var(--flame-color);

  opacity: 1;
}

/* 揺れ（ズレ） */
.soul-flame {
  animation: flamePulse calc(2s - var(--flame-instability, 0) * 1s) infinite;
}

@keyframes flamePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}


/* ★ ソウル変化ショック */
.soul-flame-wrapper.soul-shock .soul-flame::before {
  box-shadow:
    0 0 30px var(--flame-color),
    0 0 60px var(--flame-color),
    0 0 120px var(--flame-color);

  opacity: 1;
}

.soul-flame-wrapper.soul-shock {
  animation: soulShock 1s linear;
}

@keyframes soulShock {
  0%   { transform: scale(1) translate(0,0) rotate(0deg); }
  10%  { transform: scale(1.02, 0.98) translate(-2px, 1px) rotate(-0.6deg); }
  22%  { transform: scale(0.97, 1.04) translate(2px, -1px) rotate(0.8deg); }
  35%  { transform: scale(1.03, 0.96) translate(-1px, -2px) rotate(-0.5deg); }
  48%  { transform: scale(0.96, 1.05) translate(1px, 2px) rotate(0.7deg); }
  60%  { transform: scale(1.02, 0.98) translate(-2px, 1px) rotate(-0.4deg); }
  72%  { transform: scale(0.98, 1.03) translate(2px, -2px) rotate(0.6deg); }
  85%  { transform: scale(1.01, 0.99) translate(-1px, 1px) rotate(-0.3deg); }
  100% { transform: scale(1) translate(0,0) rotate(0deg); }
}


#ora-soul-points.soul-distort {
  animation: soulDistort 0.45s linear 2;
}

@keyframes soulDistort {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1) rotate(0deg); }
  15%  { transform: translate(-50%, -50%) translate(-1px, 1px) scale(1.05, 0.95) rotate(-0.6deg); }
  30%  { transform: translate(-50%, -50%) translate(1.5px, -1px) scale(0.95, 1.05) rotate(0.7deg); }
  45%  { transform: translate(-50%, -50%) translate(-1px, -1px) scale(1.03, 0.97) rotate(-0.4deg); }
  60%  { transform: translate(-50%, -50%) translate(1px, 1.5px) scale(0.97, 1.04) rotate(0.5deg); }
  75%  { transform: translate(-50%, -50%) translate(-1.5px, 0.5px) scale(1.02, 0.97) rotate(-0.6deg); }
  90%  { transform: translate(-50%, -50%) translate(0.5px, -1px) scale(0.99, 1.02) rotate(0.3deg); }
  100% { transform: translate(-50%, -50%) translate(0, 0) scale(1) rotate(0deg); }
}

/* ==================================================
   Day 表示（ソウルポイントの真下）
   ================================================== */

#ora-app.mode-game .soul-flame-wrapper {
  position: fixed;
  top: 1.2rem;
  right: 1.4rem;
  z-index: 19;

  display: flex;
  flex-direction: column;
  align-items: center;

  /* 最初は非表示 */
  opacity: 0;
  pointer-events: none;
  
}

/* ★ ソウル解放時 */
#ora-app.mode-game .soul-flame-wrapper.soul-visible {
  opacity: 1;
  pointer-events: auto;
}

#ora-app.mode-game #ora-day {
  margin-top: 0.4rem;

  font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  font-weight: 600;
  color: #eaf4ff;

  text-shadow: 0 0 4px rgba(120,180,255,0.8);
  pointer-events: none;
}

/* iPad(縦)だけ少し大きく */
@media (min-width: 700px) and (max-width: 1024px) {
  #ora-app.mode-game #ora-day {
    font-size: 1.8rem;
  }
}

/* 横向きスマホは小さく */
@media (orientation: landscape) and (max-width: 1024px) {
  #ora-app.mode-game #ora-day {
    font-size: clamp(0.6rem, 0.8vw, 0.9rem);
  }
}

/* iPad横向きは少し大きい程度 */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (min-width: 1024px) {
  #ora-app.mode-game #ora-day {
    font-size: 2rem;
  }
}

/* PCは少し小さく */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    #ora-app.mode-game #ora-day {
    font-size: 1.1rem;
  }
}



/* ==================================================
   住人表示エリア
   ================================================== */

#ora-app.mode-game .resident-container {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);

  pointer-events: auto;
  z-index: 9;
}


/* resident画像：srcが空のときは完全に非表示 */
.resident-image:not([src]),
.resident-image[src=""] {
  display: none;
}

/* 住人画像（左右対応） */
.resident-image {
  position: absolute;
  bottom: 0;
  z-index: 8;
  width: 23vw;
  height: auto;
  pointer-events: auto;
  font-size: 0;
  color: transparent;
}

/* ipad, iPhone SEなど（縦向き） */
@media (max-width: 1024px) {
  .resident-image {
    width: 53vw;
  }
}

/* 横向きのタッチ端末だけ画像を少し小さく（PC除外） */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .resident-image {
    width: 24vw;
  }
}

/* iPad Pro横向きなど、大きいタッチ端末だけ大きく（PC除外） */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (min-width: 1100px) {
  .resident-image {
    width: 34vw;
  }
}

/* 右側表示 */
#resident-right {
  right: 0;
}

/* 左側表示 */
#resident-left {
  left: 0;
}

/* グレーアウト（直前話者） */
/* グレーアウト（非話者） */
.resident-image.gray {
  opacity: 0.5;
}





/* ==================================================
   吹き出し
   ================================================== */
#ora-app.mode-game #talk-bubble {
  position: relative;
  width: min(95vw, 1500px);

  background: rgba(0,0,0,0.8);
  color: #ffffff;

  font-size: clamp(1.1rem, 0.9rem + 1.4vw, 2.9rem);
  line-height: 1.6;
  font-family: "Noto Sans", sans-serif;

  max-height: 24vh;

  padding: 1.2rem 1.6rem;

  overflow-y: auto;
  z-index: 10;
}

/* AUTOボタン */
#auto-button {
  position: absolute;
  top: 1.2em;
  right: 1em;

  font-size: 0.3em;
  padding: 0.1em 0.3em;

  background: rgba(255,255,255,0.1);
  color: #fff;

  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 0.5em;

  cursor: pointer;
  z-index: 12;

  opacity: 0.7;
  transition: all 0.2s ease;
}

/* ON状態 */
#auto-button.active {
  opacity: 1;

  box-shadow:
    0 0 6px rgba(120,180,255,0.9),
    0 0 12px rgba(120,180,255,0.6);

  background: rgba(120,180,255,0.2);
}

/* iPadだけ文字を大きくする */
@media (min-width: 1024px) and (hover: none) and (pointer: coarse) {

  #ora-app.mode-game #talk-bubble {
    font-size: clamp(1.4rem, 1.2rem + 1.8vw, 3.2rem);
  }

}

/* ==================================================
   ▽ボタンを吹き出し右下に配置
   ================================================== */
#ora-app.mode-game #next-button {
  position: absolute;
  right: 0.6em;
  bottom: 0.4em;

  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;

  z-index: 11;

  /* ★ 有効時に「光ってる」と分かる表現 */
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(120,180,255,0.9));
  transition: opacity 0.2s ease, filter 0.2s ease;
}


/* ★ 無効時：完全グレーアウト（▽）
   mode-game の通常スタイル（#ora-app.mode-game #next-button）に勝つため
   同等以上の強さで上書きする
*/
#ora-app.mode-game #next-button.disabled {
  opacity: 0.25;
  filter: grayscale(100%) drop-shadow(0 0 0 rgba(0,0,0,0));
  pointer-events: none;
}


/* =========================
   履歴ボタン（吹き出し内）
========================= */
#ora-app.mode-game #back-button {
  position: absolute;

  left: 0.6em;   /* 左下に配置 */
  bottom: 0.4em;

  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;

  z-index: 11;

  opacity: 0.9;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
}

/* =========================
   吹き出し上の名前枠
========================= */

.name-box {
  position: absolute;
  bottom: 95%;
  min-width: 6rem;
  height: 2.4em;
  padding: 0.2rem 1rem;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  border: 2px solid #888;
  border-radius: 6px;
  font-size: clamp(0.9rem, 2vw, 1.8rem);
  text-align: center;
  pointer-events: auto;
  transition: opacity 0.2s ease;
  z-index: 11;
}



@media (hover: none) and (pointer: coarse) and (min-width: 1024px) {
    .name-box {
    font-size: 1.7rem;
  }
}


.name-left {
  left: 2%;
}

.name-right {
  right: 2%;
}

.name-box.gray {
  opacity: 0.2;
}



/* ==================================================
   行動ボタン（左上のボタン）
   ================================================== */

#ora-app.mode-game .action-buttons {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;

  display: flex;
  flex-direction: column;
  gap: 0.6rem;

  z-index: 7;
}

/* ===== 基本（PC基準） ===== */

.action-buttons button {

  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.6rem);

  padding:
    clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem)
    clamp(1.2rem, 1rem + 1.2vw, 2.6rem);

  background: rgba(20, 25, 40, 0.85);
  color: #eaf4ff;

  border: 0.12rem solid rgba(150,200,255,0.8);
  border-radius: 999px;

  text-shadow: 0 0 0.6rem rgba(200,220,255,0.9);

  box-shadow:
    0 0 0.6rem rgba(120,160,255,0.6),
    inset 0 0 0.6rem rgba(120,160,255,0.25);

  cursor: pointer;
}

/* ===== 縦スマホ ===== */

@media (max-width: 600px) {

  .action-buttons button {

    font-size: 1.2rem;

    padding:
      0.8rem
      1.4rem;

  }

}

/* ===== 横スマホ ===== */

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {

  .action-buttons button {

    font-size: 1.2rem;

    padding:
      0.2rem
      3rem;

  }

}

/* ===== タブレット（iPad） ===== */

@media (min-width: 1024px) and (hover: none) and (pointer: coarse) {

  .action-buttons button {

    font-size: 2rem;

    padding:
      1.5rem
      5rem;

  }

}

/* ===== PC ===== */

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {

  .action-buttons button {

    font-size: 2rem;

    padding:
      1rem
      7rem;

  }

}

.action-buttons button:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 1rem rgba(140,180,255,0.8),
    inset 0 0 0.8rem rgba(140,180,255,0.3);
}

/* 行動ボタンロック（必須イベント・モーダル・夢イベント共通） */
.action-buttons.locked {
  opacity: 0.1;
  pointer-events: none;
}


/* ==================================================
   選択肢エリア
   ================================================== */

#ora-app.mode-game #choices {
  position: fixed;

  bottom: 17rem;   /* 吹き出しの上に配置 */

  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 20;
}

#choices button {
  width: min(85vw, 32rem);
  padding: 0.7rem 1.6rem;
  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
  background: rgba(10,10,15,0.9);
  color: #ffffff;
  border: 0.1rem solid rgba(255,255,255,0.4);
  border-radius: 0.9rem;
}



/* ==================================================
   Modal : 共通オーバーレイ（全モーダル共通）
   ================================================== */

/* overlay が画面を完全占有 */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999;

  justify-content: center;
  align-items: center;
}

/* モーダル本体は1つだけ表示 */
.modal-panel {
  display: none;
}

/* 開いたモーダルだけ表示 */
.modal-panel.active {
  display: block;
}


/* ==================================================
   Modal : Content（common）
   ================================================== */

.modal-content {
  position: relative;
  background: rgba(20, 20, 20, 0.9);
  color: #ffffff;

  padding: 1.6rem 1.8rem 0.3rem;
  border-radius: 0.8rem;

  font-size: 1.4rem;
  line-height: 1.6;

  width: min(98vw, 75rem);
  min-height: 50vh;
  max-height: 80vh;

  display: flex;
  flex-direction: column;

  overflow-y: auto;
  z-index: 22;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.modal-content::-webkit-scrollbar {
  display: none;
}

/* ==================================================
   Modal : Content（Scribble）
   ================================================== */

.bedroom-modal-content {
  position: relative;
  background: rgba(10, 10, 30, 0.9);
  color: #ffffff;

  padding: 1.6rem 1.8rem 4.5rem;
  border-radius: 0.8rem;

  font-size: 1.4rem;
  line-height: 1.6;

  width: min(96vw, 70rem);
  min-height: 45vh;
  max-height: 80vh;

  display: flex;
  flex-direction: column;

  overflow: visible;
  z-index: 22;
}

#info-modal.modal-scribble .modal-content {
  font-family: "onryou", serif;
  color: red;
  font-size: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}


/* ==================================================
   Modal : 共通クローズボタン
   ================================================== */

.modal-close {
  position: sticky;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  margin-top: auto;
  width: 5rem;
  height: 3.2rem;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.6rem;
  font-weight: 600;

  color: #eaf4ff;

  background: rgba(20, 25, 40, 0.85);

  border: 0.12rem solid rgba(150,200,255,0.8);
  border-radius: 999px;

  text-shadow: 0 0 0.6rem rgba(200,220,255,0.9);

  box-shadow:
    0 0 0.8rem rgba(120,160,255,0.6),
    inset 0 0 0.6rem rgba(120,160,255,0.25);

  cursor: pointer;

  transition: transform 0.25s ease, box-shadow 0.25s ease;

  z-index: 10000;
}

.modal-close:hover {
  transform: translateX(-50%) scale(1.08);

  box-shadow:
    0 0 1.2rem rgba(140,180,255,0.9),
    inset 0 0 0.8rem rgba(140,180,255,0.35);
}




/* ==================================================
   Gate専用装飾（必要な場合のみ）
   ================================================== */

.gate-highlight-button {
  border-color: gold !important;
}


/* ===============================
   Diary Modal (Bedroom)
   =============================== */
/* モーダル自体は固定 */
#bedroom-diary-modal {
  max-height: 95vh;
}

/* モーダル内レイアウト */
#bedroom-diary-modal .bedroom-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* Chrome / Safari */
#bedroom-diary-modal .bedroom-modal-content::-webkit-scrollbar {
  display: none;
}

/* 日記全体 */
#diary-area.board {
  display: flex;
  width: 100%;
  max-width: 720px;
  background: rgba(10, 10, 20, 0.92);
  border: 2px solid rgba(160, 200, 255, 0.6);
  border-radius: 12px;
  padding: 1.2rem;
  box-shadow:
    0 0 1.2rem rgba(120,160,255,0.45),
    inset 0 0 0.8rem rgba(120,160,255,0.2);
}

/* 内側 */
#diary-area .board-content {
  width: 100%;
  color: #eaf4ff;
}

/* 説明文 */
#diary-description {
  margin-bottom: 1rem;
  line-height: 1.6;
  text-shadow: 0 0 0.4rem rgba(200,220,255,0.8);
}

/* 入力グリッド */
.diary-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

/* テキストエリア */
/* テキストエリア（WPに負けない背景色を指定するだけ） */
#bedroom-diary-modal textarea.diary-input {
  width: 100%;
  min-height: 4.2rem;
  padding: 0.6rem 0.7rem;
  font-size: 0.95rem;

  color: #000000;        /* ← 黒文字 */
  background: #ffffff;  /* ← 白背景（WPと合わせる） */

  border: 2px solid rgba(140,180,255,0.6);
  border-radius: 1px;
  resize: vertical;
  outline: none;
}


.diary-input:focus {
  border-color: #ffe066;
  box-shadow:
    0 0 0.6rem rgba(255,224,102,0.9),
    inset 0 0 0.6rem rgba(0,0,0,0.6);
}

/* 曜日別アクセント */
#input-mon { border-color:#4488ff; box-shadow:0 0 0.4rem rgba(68,136,255,.6); }
#input-tue { border-color:#ff4444; box-shadow:0 0 0.4rem rgba(255,68,68,.6); }
#input-wed { border-color:#44ccff; box-shadow:0 0 0.4rem rgba(68,204,255,.6); }
#input-thu { border-color:#44dd88; box-shadow:0 0 0.4rem rgba(68,221,136,.6); }
#input-fri { border-color:#ffee44; box-shadow:0 0 0.4rem rgba(255,238,68,.6); }
#input-sat { border-color:#cc9966; box-shadow:0 0 0.4rem rgba(204,153,102,.6); }
#input-sun { border-color:#ff77aa; box-shadow:0 0 0.4rem rgba(255,119,170,.6); }

/* ボタン共通 */
#diary-area button {
  margin-top: 0.6rem;
  padding: 0.6rem 1.4rem;
  font-size: 0.95rem;
  border-radius: 3px;
  border: 2px solid rgba(160,200,255,0.7);
  background: rgba(20,25,45,0.9);
  color: #eaf4ff;
  cursor: pointer;
  text-shadow: 0 0 0.4rem rgba(200,220,255,0.8);
  box-shadow: 0 0 0.6rem rgba(120,160,255,0.5);
}

#diary-area button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0.9rem rgba(140,180,255,0.8);
}

/* クリアボタン強調 */
#clear-diary {
  border-color: rgba(255,120,120,0.8);
  box-shadow: 0 0 0.6rem rgba(255,120,120,0.6);
}








/* ======================================
   Emotion Animation CSS
   住人画像に emotion-xxx クラスを付けて使う
   例:
   <img id="resident-right" class="emotion-fear">
   ====================================== */

/* ------------------------------
   共通
------------------------------ */
#resident-right,
#resident-left {
  transform-origin: center bottom;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* アニメーション重複時の崩れを減らす */
.emotion-clear {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ------------------------------
   1. 微待機（普段使い）
------------------------------ */
.emotion-idle {
  animation: emotionIdle 2.8s ease-in-out infinite;
}

@keyframes emotionIdle {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-0.25rem) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

/* ------------------------------
   2. 恐怖
------------------------------ */
.emotion-fear {
  animation: emotionFear 0.32s ease-in-out 3;
}

@keyframes emotionFear {
  0%   { transform: translateX(0) translateY(0) rotate(0deg); }
  20%  { transform: translateX(-0.12rem) translateY(0.03rem) rotate(-0.6deg); }
  40%  { transform: translateX(0.12rem) translateY(-0.03rem) rotate(0.6deg); }
  60%  { transform: translateX(-0.1rem) translateY(0.02rem) rotate(-0.4deg); }
  80%  { transform: translateX(0.1rem) translateY(-0.02rem) rotate(0.4deg); }
  100% { transform: translateX(0) translateY(0) rotate(0deg); }
}

/* ------------------------------
   3. 強い恐怖
------------------------------ */
.emotion-fear-strong {
  animation: emotionFearStrong 0.26s ease-in-out 3;
}

@keyframes emotionFearStrong {
  0%   { transform: translateX(0) translateY(0) scale(1); }
  20%  { transform: translateX(-0.16rem) translateY(0.04rem) scale(0.99); }
  40%  { transform: translateX(0.16rem) translateY(-0.04rem) scale(0.985); }
  60%  { transform: translateX(-0.14rem) translateY(0.03rem) scale(0.99); }
  80%  { transform: translateX(0.14rem) translateY(-0.03rem) scale(0.985); }
  100% { transform: translateX(0) translateY(0) scale(1); }
}

/* ------------------------------
   4. 喜び
------------------------------ */
.emotion-happy {
  animation: emotionHappy 0.9s ease-in-out 2;
}

@keyframes emotionHappy {
  0%   { transform: translateY(0) scale(1); }
  20%  { transform: translateY(-0.4rem) scale(1.03, 0.98); }
  40%  { transform: translateY(0) scale(0.99, 1.02); }
  60%  { transform: translateY(-0.22rem) scale(1.02, 0.99); }
  100% { transform: translateY(0) scale(1); }
}

/* ------------------------------
   5. 大喜び
------------------------------ */
.emotion-happy-strong {
  animation: emotionHappyStrong 0.72s ease-in-out 2;
}

@keyframes emotionHappyStrong {
  0%   { transform: translateY(0) scale(1); }
  18%  { transform: translateY(-0.6rem) scale(1.05, 0.96); }
  36%  { transform: translateY(0) scale(0.98, 1.03); }
  54%  { transform: translateY(-0.3rem) scale(1.03, 0.98); }
  100% { transform: translateY(0) scale(1); }
}

/* ------------------------------
   6. 驚き（1回）
------------------------------ */
.emotion-surprise {
  animation: emotionSurprise 0.42s ease-out 1;
}

@keyframes emotionSurprise {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.06) translateY(-0.18rem); }
  60%  { transform: scale(0.98) translateY(0.05rem); }
  100% { transform: scale(1) translateY(0); }
}

/* ------------------------------
   7. 怒り
------------------------------ */
.emotion-anger {
  animation: emotionAnger 0.46s ease-in-out 3;
}

@keyframes emotionAnger {
  0%   { transform: translateX(0) scale(1); }
  25%  { transform: translateX(-0.08rem) scale(1.02); }
  50%  { transform: translateX(0.08rem) scale(1.025); }
  75%  { transform: translateX(-0.05rem) scale(1.02); }
  100% { transform: translateX(0) scale(1); }
}

/* ------------------------------
   8. 悲しみ
------------------------------ */
.emotion-sad {
  animation: emotionSad 1.8s ease-in-out 2;
}

@keyframes emotionSad {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  50%  { transform: translateY(0.28rem) scale(0.99); opacity: 0.94; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ------------------------------
   9. 落ち込み強め
------------------------------ */
.emotion-depressed {
  animation: emotionDepressed 2.2s ease-in-out 2;
}

@keyframes emotionDepressed {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  50%  { transform: translateY(0.42rem) scale(0.98); opacity: 0.88; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ------------------------------
   10. 考え中（状態系）
------------------------------ */
.emotion-thinking {
  animation: emotionThinking 2.4s ease-in-out infinite;
}

@keyframes emotionThinking {
  0%   { transform: rotate(0deg) translateY(0); }
  25%  { transform: rotate(-1.2deg) translateY(-0.05rem); }
  50%  { transform: rotate(0deg) translateY(0); }
  75%  { transform: rotate(1.2deg) translateY(-0.05rem); }
  100% { transform: rotate(0deg) translateY(0); }
}

/* ------------------------------
   11. 不穏
------------------------------ */
.emotion-uneasy {
  animation: emotionUneasy 1.6s ease-in-out 2;
}

@keyframes emotionUneasy {
  0%   { transform: translateX(0) rotate(0deg); }
  20%  { transform: translateX(-0.08rem) rotate(-0.5deg); }
  40%  { transform: translateX(0.06rem) rotate(0.4deg); }
  60%  { transform: translateX(-0.05rem) rotate(-0.35deg); }
  80%  { transform: translateX(0.04rem) rotate(0.2deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* ------------------------------
   12. 自信（状態系）
------------------------------ */
.emotion-confident {
  animation: emotionConfident 2s ease-in-out infinite;
}

@keyframes emotionConfident {
  0%   { transform: scale(1) translateY(0); }
  50%  { transform: scale(1.025) translateY(-0.08rem); }
  100% { transform: scale(1) translateY(0); }
}

/* ------------------------------
   13. 照れ
------------------------------ */
.emotion-shy {
  animation: emotionShy 1.2s ease-in-out 2;
}

@keyframes emotionShy {
  0%   { transform: translateX(0) translateY(0); }
  25%  { transform: translateX(-0.06rem) translateY(-0.02rem); }
  50%  { transform: translateX(0.06rem) translateY(0); }
  75%  { transform: translateX(-0.04rem) translateY(-0.02rem); }
  100% { transform: translateX(0) translateY(0); }
}

/* ------------------------------
   14. 威圧
------------------------------ */
.emotion-intimidate {
  animation: emotionIntimidate 1.1s ease-in-out 2;
}

@keyframes emotionIntimidate {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}

/* ------------------------------
   15. 一回退場
------------------------------ */
.emotion-fade-down {
  animation: emotionFadeDown 0.5s ease forwards;
}

@keyframes emotionFadeDown {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0.6rem); opacity: 0; }
}


/* ------------------------------
   16. キラキラ演出
------------------------------ */

.emotion-sparkle {
  pointer-events: auto;
}

.emotion-sparkle::after {
  content: "";
  position: absolute;
  inset: -10%;

  pointer-events: none;

  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,200,0.9) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255,255,220,0.9) 0%, transparent 40%),
    radial-gradient(circle at 30% 80%, rgba(255,255,200,0.9) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(255,255,220,0.9) 0%, transparent 40%);

  animation: sparkleEffect 0.9s ease-out 2;
  opacity: 0;
}

@keyframes sparkleEffect {

  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}


/* ------------------------------
direction用のCSS 
------------------------------ */
#flash-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: transparent; /* ← ここを変更 */
  opacity: 0;
  z-index: 9999;
}

#flash-layer.flash-red {
  background: rgba(255, 0, 0, 0.8);
}

#flash-layer.flash-purple {
  background: rgba(120, 0, 255, 0.7);
}

#flash-layer.flash-dark {
  background: rgba(0, 0, 0, 0.9);
}

#flash-layer.flash-white {
  background: white;
}

#flash-layer.flash-yellow {
  background: yellow;
}

.flash-active {
  animation: flashAnim ease;
}

@keyframes flashAnim {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}


#ora-bg {
  position: fixed;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}


/* ------------------------------
フォント
------------------------------ */

@font-face {
  font-family: "onryou";
  src: url("../fonts/onryou.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}