/* ===========================
   カスタムフォント
   Google Fonts から読み込み（ファイル不要）
   Hachi Maru Pop  → 手書き・ほんわか系
   Daruma Drop One → タイトル・インパクト系
   M PLUS Rounded 1c → 基本UI用
   ※ローカルファイル版（fonts/*.ttf）を置けば上書き可
=========================== */
/* ローカルフォントファイルが届いたら fonts/*.ttf に置き換え可 */

/* ===========================
   リセット & ベース
=========================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* ゲームの基準サイズ */
  --game-w: 375px;
  --game-h: 812px;

  /* PABLO パレット（DESIGN.md準拠・クレイ南の島） */
  --pablo-bg:      #F7EDD6;  /* クレイ紙ベース */
  --pablo-card:    #FBF4E2;  /* カードクリーム */
  --pablo-accent:  #F0B838;  /* ゴールドCTA */
  --pablo-accent2: #E0A024;  /* ゴールド濃 */
  --pablo-text:    #5A4632;  /* 本文 濃茶 */
  --pablo-sub:     #8A7355;  /* サブ */
  --pablo-border:  rgba(255,255,255,0.85);  /* クレイ白縁 */
  --pablo-dark:    #5A3E10;  /* ボタン上濃文字 */

  /* カラーパレット（南の島テーマ — シーン背景などに残す） */
  --col-sky:      #87CEEB;
  --col-sea:      #1E90FF;
  --col-sand:     #F5DEB3;
  --col-palm:     #228B22;
  --col-sunset:   #FF7043;
  --col-cream:    #FFF8E7;
  --col-brown:    #795548;
  --col-dark:     #2A2015;

  /* UI カラー（DESIGN.md準拠） */
  --ui-primary:   #F0B838;
  --ui-secondary: #FBF4E2;
  --ui-accent:    #F0B838;
  --ui-bg:        rgba(247, 237, 214, 0.92);
  --ui-text:      #5A4632;
  --ui-text-dark: #5A4632;

  /* フォント */
  --font-main:  'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'ヒラギノ丸ゴ ProN', sans-serif;
  --font-hand:  'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'ヒラギノ丸ゴ ProN', sans-serif;
  --font-title: 'Georgia', serif;

  /* レイアウト */
  --status-h:  52px;
  --message-h: 96px;
  --menu-h:    80px;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--pablo-bg);
  font-family: var(--font-main);
  color: var(--ui-text);
  -webkit-font-smoothing: antialiased;
  /* iOS Safari の引っぱり更新・エッジスワイプ・バウンスを抑止（スワイプ操作の誤爆防止） */
  overscroll-behavior: none;
  touch-action: manipulation;
  position: fixed;
  inset: 0;
}

/* ===========================
   アプリコンテナ（375×812中央固定）
=========================== */
#app {
  position: relative;
  width: var(--game-w);
  height: var(--game-h);
  margin: 0 auto;
  overflow: hidden;
  background: var(--pablo-bg);

  /* ビューポートが狭いときは幅を100vwに合わせてスケール */
  transform-origin: top center;
}

/* ===========================
   画面（Screen）共通
=========================== */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.screen.active {
  display: flex;
}

/* ===========================
   ローディング画面（focusのハンモック）
=========================== */
#screen-loading,
#loading-overlay {
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  background: linear-gradient(180deg, #FFE6A8 0%, #FFD085 28%, #FCE2B8 60%, #FFF6E0 100%);
}
/* オーバーレイのみ：常時表示の固定レイヤー */
#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
#screen-loading.fade-out,
#loading-overlay.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.loading-sky {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 18%, rgba(255,255,200,0.6), rgba(255,200,150,0) 60%);
  pointer-events: none;
}
.loading-cloud {
  position: absolute;
  background: rgba(255,255,255,0.9);
  border-radius: 40px;
  filter: blur(0.5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.loading-cloud::before, .loading-cloud::after {
  content:''; position:absolute; background:rgba(255,255,255,0.95); border-radius:50%;
}
.loading-cloud-1 {
  top: 14%; left: -60px; width: 80px; height: 22px;
  animation: loading-cloud-drift 28s linear infinite;
}
.loading-cloud-1::before { width:34px; height:34px; left:14px;  top:-14px; }
.loading-cloud-1::after  { width:26px; height:26px; left:42px;  top:-10px; }
.loading-cloud-2 {
  top: 26%; left: -90px; width: 60px; height: 18px;
  animation: loading-cloud-drift 36s linear infinite;
  animation-delay: -14s;
}
.loading-cloud-2::before { width:24px; height:24px; left:8px;  top:-10px; }
.loading-cloud-2::after  { width:20px; height:20px; left:30px; top:-8px; }
@keyframes loading-cloud-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(140vw); }
}
/* くつろぎfocus画像 + ハンモックゆらゆら */
.loading-kuturogi-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(78vw, 360px);
  transform-origin: 50% 0;
  animation: loading-kuturogi-sway 3.8s ease-in-out infinite;
}
@keyframes loading-kuturogi-sway {
  0%,100% { transform: translate(-50%,-50%) rotate(-2.5deg); }
  50%     { transform: translate(-50%,-50%) rotate( 2.5deg); }
}
.loading-kuturogi {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
  animation: loading-kuturogi-bob 3.8s ease-in-out infinite;
}
@keyframes loading-kuturogi-bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
.loading-zzz {
  position: absolute;
  top: 6%; right: 10%;
  font-size: 26px;
  color: #4a6741;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.12));
  animation: loading-note-drift 3.0s ease-in-out infinite;
  opacity: 0;
}
@keyframes loading-note-drift {
  0%   { opacity: 0;   transform: translate(0, 0)      scale(0.85); }
  25%  { opacity: 0.9; }
  60%  { opacity: 0.7; transform: translate(-8px,-18px) scale(1.05); }
  100% { opacity: 0;   transform: translate(4px,-32px)  scale(0.9); }
}

.loading-bottom {
  position: relative;
  width: 86%;
  max-width: 360px;
  margin-bottom: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.loading-quote {
  background: rgba(255,255,255,0.92);
  color: #6B4423;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 22px;
  border-radius: 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  border: 2px solid #FFD085;
  letter-spacing: 0.5px;
  animation: loading-quote-pop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes loading-quote-pop {
  0% { transform: scale(0.8); opacity:0; }
  100%{ transform: scale(1);   opacity:1; }
}
.loading-dots {
  display: flex;
  gap: 8px;
}
.loading-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #FF8A65;
  opacity: 0.4;
  animation: loading-dot-blink 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes loading-dot-blink {
  0%,100% { opacity: 0.3; transform: scale(0.85); }
  40%     { opacity: 1;   transform: scale(1.15); }
}

.loading-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(107,68,35,0.15);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}
.loading-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FFD085, #FF8A65);
  border-radius: 4px;
  transition: width 0.2s ease;
}
.loading-text {
  font-size: 11px;
  color: #8B6F47;
  letter-spacing: 1px;
  margin: 0;
}

/* ===========================
   タイトル画面（リデザイン）
   上：空＋ロゴ／中：カフェカウンターのふたり／下：ボタン
=========================== */
#screen-title {
  /* display と flex-direction は .screen / .screen.active が担う */
  align-items: center;
  justify-content: flex-start;
  background: #C5E8F5;
  overflow: hidden;
  padding: 0;
  position: relative;
}

/* === 背景画像：gamestart.png === */
.title-bg-image {
  position: absolute;
  inset: 0;
  background: url('backgraund/gamestart.png?v=1') center / cover no-repeat;
  z-index: 0;
  /* ゆっくり呼吸するようなパンで生命感を出す */
  animation: titleBgBreathe 22s ease-in-out infinite alternate;
}
@keyframes titleBgBreathe {
  0%   { transform: scale(1.00) translateY(0); }
  100% { transform: scale(1.04) translateY(-6px); }
}
/* 上部：ロゴ後ろの青空グラデ（線が出ないよう画面端から開始） */
.title-bg-image::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 52%;
  background: linear-gradient(to bottom,
    rgba(80, 180, 240, 0.55) 0%,
    rgba(60, 160, 230, 0.38) 30%,
    rgba(40, 140, 220, 0.15) 60%,
    transparent 100%);
  pointer-events: none;
}
/* 下部にうっすら白いグラデを重ねてボタンを見やすく */
.title-bg-image::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28%;
  background: linear-gradient(to bottom,
    rgba(255,250,235,0)    0%,
    rgba(255,245,225,0.45) 60%,
    rgba(252,238,210,0.78) 100%);
  pointer-events: none;
}

/* === 空気感レイヤー === */
.title-atmos {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
/* 太陽（右上にふわっと光るやつ） */
.title-sun {
  position: absolute;
  top: 6%; right: 8%;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,245,180,0.95) 0%,
    rgba(255,225,130,0.55) 30%,
    rgba(255,200,80,0.18)  55%,
    rgba(255,200,80,0)     75%);
  filter: blur(2px);
  animation: titleSunPulse 5s ease-in-out infinite;
}
@keyframes titleSunPulse {
  0%,100% { opacity: 0.85; transform: scale(1); }
  50%     { opacity: 1;    transform: scale(1.08); }
}
/* 光線（斜めの光のシャワー） */
.title-rays {
  position: absolute;
  top: -10%; left: -10%; width: 140%; height: 90%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,240,180,0.18) 45%,
    transparent 50%,
    rgba(255,240,180,0.10) 60%,
    transparent 65%,
    rgba(255,240,180,0.13) 75%,
    transparent 82%);
  mix-blend-mode: screen;
  animation: titleRaysShift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes titleRaysShift {
  0%   { opacity: 0.55; transform: translateX(-2%); }
  100% { opacity: 0.85; transform: translateX(2%);  }
}
/* 雲（流れる） */
.title-cloud {
  position: absolute;
  background: rgba(255,255,255,0.85);
  border-radius: 50px;
  filter: blur(1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.title-cloud::before, .title-cloud::after {
  content:''; position:absolute; background:rgba(255,255,255,0.92); border-radius:50%;
}
.title-cloud-1 {
  top: 12%; left: -90px; width: 90px; height: 22px;
  animation: titleCloudDrift 38s linear infinite;
}
.title-cloud-1::before { width:38px; height:38px; left:14px; top:-16px; }
.title-cloud-1::after  { width:28px; height:28px; left:48px; top:-12px; }
.title-cloud-2 {
  top: 24%; left: -60px; width: 60px; height: 18px;
  animation: titleCloudDrift 50s linear infinite;
  animation-delay: -18s;
  opacity: 0.78;
}
.title-cloud-2::before { width:24px; height:24px; left:8px;  top:-10px; }
.title-cloud-2::after  { width:18px; height:18px; left:30px; top:-6px;  }
.title-cloud-3 {
  top: 5%; left: -120px; width: 70px; height: 20px;
  animation: titleCloudDrift 44s linear infinite;
  animation-delay: -32s;
  opacity: 0.7;
}
.title-cloud-3::before { width:30px; height:30px; left:10px; top:-12px; }
.title-cloud-3::after  { width:22px; height:22px; left:38px; top:-8px;  }
@keyframes titleCloudDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(140vw); }
}
/* 鳥 ︵ シルエット */
.title-bird {
  position: absolute;
  font-size: 14px;
  color: #2E3D4A;
  opacity: 0.55;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.title-bird-1 {
  top: 16%;  left: -10%;
  animation: titleBirdFly 22s linear infinite;
}
.title-bird-2 {
  top: 8%;   left: -10%;
  animation: titleBirdFly 28s linear infinite;
  animation-delay: -10s;
  font-size: 12px;
}
.title-bird-3 {
  top: 22%;  left: -10%;
  animation: titleBirdFly 32s linear infinite;
  animation-delay: -20s;
  font-size: 10px;
  opacity: 0.45;
}
@keyframes titleBirdFly {
  0%   { transform: translate(0, 0);        }
  25%  { transform: translate(35vw, -10px); }
  50%  { transform: translate(70vw, 4px);   }
  75%  { transform: translate(105vw, -6px); }
  100% { transform: translate(140vw, 0);    }
}
/* 羽ばたき：内側スパンが scaleY を交互に変化 */
.bird-flap {
  display: inline-block;
  transform-origin: center center;
  animation: birdFlap 0.42s ease-in-out infinite alternate;
}
@keyframes birdFlap {
  0%   { transform: scaleY(0.45); }
  100% { transform: scaleY(1.0);  }
}
/* キラメキ（光の粒） */
.title-spark {
  position: absolute;
  color: #FFF6D8;
  text-shadow: 0 0 8px rgba(255,240,180,0.9);
  animation: titleSparkTwinkle 3s ease-in-out infinite;
}
.title-spark-1 { top: 18%; left: 22%; font-size: 12px; animation-delay: 0s;   }
.title-spark-2 { top: 35%; right: 25%; font-size: 10px; animation-delay: 0.8s; }
.title-spark-3 { top: 28%; left: 60%; font-size: 11px; animation-delay: 1.6s; }
@keyframes titleSparkTwinkle {
  0%,100% { opacity: 0;   transform: scale(0.6) rotate(0deg); }
  50%     { opacity: 0.9; transform: scale(1.1) rotate(45deg); }
}

/* === 上部：ロゴ（大きく主役に） === */
.title-logo-wrap {
  position: absolute;
  top: max(env(safe-area-inset-top, 0px), 48px);
  left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.title-logo-img {
  width: 100%;
  max-width: 560px;
  height: auto;
  /* 視認性UP：白グロー強め + 淡い影 */
  filter:
    drop-shadow(0 0 22px rgba(255,255,255,1.0))
    drop-shadow(0 0 44px rgba(200,235,255,0.8))
    drop-shadow(0 6px 16px rgba(20,60,120,0.28));
  animation: logoFloat 3.6s ease-in-out infinite;
}
@keyframes logoFloat {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* === 下部：ボタン（砂浜の上に固定） === */
.title-buttons {
  position: absolute;
  bottom: max(env(safe-area-inset-bottom, 0px), 36px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 230px;
}
.title-buttons .hidden { display: none; }
.title-version {
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  z-index: 3;
  text-align: center;
  font-size: 11px;
  color: rgba(60,40,20,0.55);
  margin: 0;
  pointer-events: none;
}


/* ===========================
   ボタン共通
=========================== */
.btn {
  display: block;
  width: 100%;
  padding: 15px 0;
  border: 2.5px solid rgba(255,255,255,0.85);
  border-radius: 999px;            /* 完全ピル（DESIGN.md準拠） */
  font-size: 16px;
  font-family: var(--font-main);
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, filter 0.1s, opacity 0.2s;
  letter-spacing: 2px;
  /* クレイ立体シャドウ */
  box-shadow:
    0 4px 0 rgba(120,90,40,0.30),
    0 6px 14px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -3px 6px rgba(160,120,60,0.10);
}

.btn:active {
  transform: translateY(3px);
  filter: brightness(0.94);
  box-shadow:
    0 1px 0 rgba(120,90,40,0.30),
    0 2px 6px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
.btn:disabled { opacity: 0.4; pointer-events: none; filter: grayscale(0.3); }

/* 通常ボタン（汎用：カフェ・選択肢など）— クレイ質感 */
.btn-primary {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.5) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 70%, rgba(180,130,40,0.15) 0%, transparent 50%),
    linear-gradient(175deg, #F6C95A 0%, #F0B838 100%);
  color: var(--pablo-dark);
}
.btn-secondary {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.6) 0%, transparent 45%),
    linear-gradient(175deg, #F2E4C2 0%, #EAD9B5 100%);
  color: var(--pablo-text);
}
.btn-danger {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 45%),
    linear-gradient(175deg, #E89080 0%, #E0796A 100%);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* ===========================
   タイトル画面のボタン：CSSでクレイテイスト再現
   （PNG拡大による歪みを避ける）
=========================== */
#screen-title .btn,
#screen-title .btn-relax {
  border-radius: 32px !important;
  border: 2.5px solid rgba(255,255,255,0.85) !important;
  padding: 15px 0 !important;
  box-shadow:
    0 5px 0 rgba(120,90,40,0.30),
    0 8px 18px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -3px 6px rgba(160,120,60,0.10) !important;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
#screen-title .btn:active,
#screen-title .btn-relax:active {
  transform: translateY(3px) !important;
  box-shadow:
    0 2px 0 rgba(120,90,40,0.30),
    0 3px 8px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* はじめる：黄色クレイ */
#screen-title .btn-primary {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 70%, rgba(180,130,40,0.15) 0%, transparent 50%),
    linear-gradient(175deg, #ffe28a 0%, #f0b850 100%) !important;
  color: #5a3e10 !important;
}

/* つづきから：白ベージュクレイ */
#screen-title .btn-secondary {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.7) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 70%, rgba(180,150,90,0.10) 0%, transparent 50%),
    linear-gradient(175deg, #fffaee 0%, #ece2c8 100%) !important;
  color: #3a2a14 !important;
}

/* くつろぐ：緑クレイ */
#screen-title .btn-relax {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.5) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 70%, rgba(40,90,30,0.15) 0%, transparent 50%),
    linear-gradient(175deg, #a8d896 0%, #6db05c 100%) !important;
  color: #1f3d18 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  width: 100% !important;
  margin-top: 0 !important;
}

/* ===========================
   メインゲーム画面
=========================== */
#screen-game {
  background: var(--pablo-bg);
}

/* ステータスバー */
#status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--status-h);
  background: var(--pablo-card);
  border-bottom: 1.5px solid var(--pablo-border);
  padding: 0 12px 0 8px;
  flex-shrink: 0;
  z-index: 10;
  gap: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  overflow: visible;
}

.status-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
}

/* Day・時間帯・😊・🌿・✨ の並び順 */
#status-day      { order: 1; }
#status-smiles   { order: 3; margin-left: auto; padding-left: 2px; }
#status-najimi   { order: 4; margin-left: 10px; }
#status-appeal   { order: 5; margin-left: 10px; }

/* 5アイテム対応：値の文字を少し小さく */
.status-value    { font-size: 14px !important; }

/* 時間帯絵文字（デジタル時計の代替） */
.status-time-emoji {
  order: 2;
  margin-left: 8px;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  color: var(--pablo-text);
  user-select: none;
  transition: opacity 0.4s ease;
  white-space: nowrap;
  /* ボタン化（🌴カウンター＝就寝ボタン） */
  border: none;
  background: transparent;
  padding: 6px 8px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
}
/* 使い切ると🌙就寝ボタンに変身：ふわっと目立たせる */
.status-time-emoji.sleep-ready {
  background: linear-gradient(135deg, #3949AB, #5C6BC0);
  color: #fff;
  box-shadow: 0 2px 10px rgba(92, 107, 192, 0.45);
  animation: sleepReadyPulse 1.8s ease-in-out infinite;
}
@keyframes sleepReadyPulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.07); }
}

.status-label {
  font-size: 10px;
  color: var(--pablo-sub);
  letter-spacing: 0.3px;
}

.status-value {
  font-size: 16px;
  font-weight: bold;
  color: var(--pablo-accent2);
  letter-spacing: 0.5px;
}

/* シーンエリア */
#scene-area {
  position: relative;
  flex: 1;
  overflow: hidden;
}

#scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#scene-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* メッセージウィンドウ — 画面下部に固定 */
#message-window {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: var(--message-h);
  background: rgba(255, 253, 248, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1.5px solid var(--pablo-border);
  border-radius: 20px 20px 0 0;
  padding: 12px 18px 20px;
  z-index: 20;
  cursor: pointer;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}

#message-speaker {
  font-family: var(--font-hand);
  font-size: 12px;
  font-weight: bold;
  color: var(--speaker-color, var(--pablo-accent2));
  letter-spacing: 0.5px;
}

#message-text {
  font-family: var(--font-hand);
  font-size: 15px;
  line-height: 1.75;
  color: var(--pablo-text);
  white-space: pre-wrap;
}

.tap-indicator {
  position: absolute;
  bottom: 10px;
  right: 18px;
  font-size: 11px;
  color: var(--pablo-sub);
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(4px); }
}

/* 選択肢 — メッセージ窓の直上 */
#choices-window {
  position: absolute;
  bottom: var(--message-h);
  left: 0;
  right: 0;
  z-index: 21;
  padding: 0 8px 8px;
}

#choices-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.choice-btn {
  display: block;
  width: 100%;
  padding: 13px 18px;
  background: var(--pablo-card);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid var(--pablo-border);
  border-radius: 14px;
  color: var(--pablo-text);
  font-family: var(--font-hand);
  font-size: 14px;
  font-family: var(--font-main);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.choice-btn:active {
  background: #FFF9E6;
  border-color: var(--pablo-accent);
  transform: scale(0.98);
}

/* ボトムナビ（共通） */
.bottom-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--menu-h);
  background: var(--pablo-card);
  border-top: 1.5px solid var(--pablo-border);
  flex-shrink: 0;
  z-index: 30;
  padding: 10px 24px;
  gap: 14px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
  margin-top: -1px;
}

.menu-btn {
  flex: 1;
  max-width: 160px;
  aspect-ratio: 1.6 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* クレイ素材の正方形ボタンを背景に使用 */
  background: url('clay-ui/square-lg.png') center/100% 100% no-repeat;
  border: none;
  cursor: pointer;
  transition: transform 0.12s, filter 0.15s;
  filter: saturate(0.85) brightness(0.96);
  position: relative;
}

.menu-btn:active { transform: scale(0.93); filter: brightness(0.92); }

.menu-btn.active {
  filter: saturate(1.1) brightness(1.05) drop-shadow(0 0 6px rgba(232,197,71,0.30));
}

.menu-icon  { font-size: 26px; line-height: 1; }
.menu-label { font-size: 12px; color: var(--pablo-sub); letter-spacing: 0.5px; font-weight: 600; }

.menu-btn.active .menu-label { color: var(--pablo-accent2); }

/* ===========================
   パネル（設定など）
=========================== */
.screen.panel {
  background: var(--pablo-bg);
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.screen.panel.active {
  display: flex;
  transform: translateX(0);
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--pablo-card);
  border-bottom: 1.5px solid var(--pablo-border);
  flex-shrink: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

.panel-header h2 {
  font-size: 17px;
  color: var(--pablo-text);
  font-weight: bold;
}

.btn-back {
  background: none;
  border: none;
  color: var(--pablo-text);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}

.btn-back:active { background: var(--pablo-border); }

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  -webkit-overflow-scrolling: touch;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--pablo-border);
  gap: 16px;
}

.setting-row label {
  font-size: 14px;
  color: var(--pablo-text);
  flex-shrink: 0;
}

.setting-row input[type="range"] {
  flex: 1;
  accent-color: var(--pablo-accent2);
}

.setting-row select {
  background: var(--pablo-card);
  border: 1.5px solid var(--pablo-border);
  border-radius: 10px;
  color: var(--pablo-text);
  padding: 6px 12px;
  font-size: 14px;
  font-family: var(--font-main);
}

/* ===========================
   ユーティリティ
=========================== */
.hidden { display: none !important; }

/* フェードトランジション */
.fade-enter { animation: fadeIn 0.3s ease forwards; }
.fade-exit  { animation: fadeOut 0.3s ease forwards; }

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* ===========================
   レスポンシブ：375pxより狭い端末
=========================== */
@media (max-width: 374px) {
  #app {
    width: 100vw;
    height: calc(100vw * (812 / 375));
    transform: none;
  }
}

/* ===========================
   Safe Area（ノッチ / ホームバー）
=========================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--menu-h) + env(safe-area-inset-bottom));
  }
}

/* ===========================
   UI表示状態（storyDone後）
   .ui-visible が #screen-game につく
=========================== */
#screen-game.ui-visible #message-window {
  bottom: calc(var(--menu-h) + 8px);
}

#screen-game.ui-visible #choices-window {
  bottom: calc(var(--menu-h) + 176px);
}

/* ===========================
   ステータスバー：歯車ボタン
=========================== */
.status-gear-btn {
  order: 5;
  background: none;
  border: none;
  font-size: 17px;
  cursor: pointer;
  padding: 5px 7px;
  opacity: 0.65;
  transition: opacity 0.15s, background 0.15s;
  line-height: 1;
  border-radius: 8px;
}
.status-gear-btn:active { opacity: 1; background: var(--pablo-border); }

/* ===========================
   ステータスバー：🌙ボタン
=========================== */
.status-sleep-btn {
  order: 6;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 5px 6px;
  opacity: 0.7;
  transition: opacity 0.15s, transform 0.15s, background 0.15s;
  line-height: 1;
  margin-left: 2px;
  border-radius: 8px;
}
.status-sleep-btn:active {
  opacity: 1;
  transform: scale(1.15);
  background: var(--pablo-border);
}

/* ===========================
   ステータスバー：モードキャラアイコン
=========================== */
.mode-char-wrap {
  order: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-right: 8px;
  flex-shrink: 0;
}
.mode-char-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* 顔クロップ: object-fit:cover で上部 = 顔を表示 */
  object-fit: cover;
  object-position: 50% 0%;
  background: #FFF8E7;
  border: 2.5px solid var(--pablo-accent, #E8C547);
  flex-shrink: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 2px 8px rgba(200,169,81,0.30);
}
.mode-char-icon.switching {
  opacity: 0;
  transform: scale(0.75);
}
.mode-char-label {
  font-size: 9px;
  font-weight: bold;
  color: var(--pablo-accent2, #C8A951);
  letter-spacing: 0.5px;
  line-height: 1;
  transition: opacity 0.18s ease;
}

/* ===========================
   グレードアップバナー
=========================== */
.upgrade-banner {
  position: absolute;
  top: var(--status-h);
  left: 0;
  right: 0;
  z-index: 25;
  background: linear-gradient(90deg, var(--pablo-accent), #F5D56B);
  color: var(--pablo-dark);
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
  border-bottom: 1.5px solid rgba(200,169,81,0.4);
  animation: bannerSlideDown 0.4s ease;
  box-shadow: 0 3px 12px rgba(232,197,71,0.4);
}
.upgrade-banner.hidden { display: none; }
.upgrade-banner.dim {
  background: linear-gradient(90deg, #e8e0d5, #f0e8d8);
  color: #8a7a6a;
  font-weight: normal;
  box-shadow: none;
  border-bottom-color: rgba(180,160,130,0.3);
  animation: none;
  cursor: default;
}
.upgrade-banner-text { display: inline-block; }
@keyframes bannerSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* カフェ内ナビ：無効ボタン */
.menu-btn.nav-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ===========================
   カフェ アクションシート
=========================== */
.cafe-action-sheet {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.cafe-action-sheet.hidden { display: none; }
.cafe-action-sheet:not(.hidden) { pointer-events: auto; }

.cafe-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42,32,21,0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: sheetBackdropIn 0.25s ease;
}
@keyframes sheetBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cafe-sheet-panel {
  position: absolute;
  bottom: var(--menu-h);
  left: 0;
  right: 0;
  background: var(--pablo-bg);
  border-top: 1.5px solid var(--pablo-border);
  border-radius: 22px 22px 0 0;
  padding: 12px 16px 20px;
  animation: sheetSlideUp 0.28s cubic-bezier(0.34,1.26,0.64,1);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.1);
}

/* カフェ・探索アクションシートは画面最下部まで伸ばす */
#cafe-action-sheet .cafe-sheet-panel,
#explore-action-sheet .cafe-sheet-panel {
  bottom: 0;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
}
@keyframes sheetSlideUp {
  from { transform: translateY(100%); opacity: 0.5; }
  to   { transform: translateY(0);    opacity: 1; }
}

.cafe-sheet-handle {
  width: 36px; height: 4px;
  background: var(--pablo-border);
  border-radius: 2px;
  margin: 0 auto 10px;
}

.cafe-sheet-title {
  color: var(--pablo-sub);
  font-size: 11px;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 12px;
}

/* オープンボタン（大きいメイン） */
.cafe-sheet-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 0;
  background: var(--pablo-accent);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  margin-bottom: 14px;
  box-shadow: 0 4px 18px rgba(232,197,71,0.5);
  transition: transform 0.12s, opacity 0.12s;
}
.cafe-sheet-open-btn:active { transform: scale(0.97); opacity: 0.9; }
.cafe-sheet-open-icon  { font-size: 22px; }
.cafe-sheet-open-label { color: var(--pablo-dark); font-size: 16px; font-weight: bold; letter-spacing: 0.5px; }

/* 3アクションボタン行 */
.cafe-sheet-actions {
  display: flex;
  gap: 10px;
}
.cafe-sheet-action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px;
  background: var(--pablo-card);
  border: 1.5px solid var(--pablo-border);
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, border-color 0.15s;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.cafe-sheet-action-btn:active { background: #FFF9E6; border-color: var(--pablo-accent); transform: scale(0.96); }
.cafe-action-icon  { font-size: 26px; line-height: 1; }
.cafe-action-label { color: var(--pablo-text); font-size: 11px; letter-spacing: 0.5px; font-weight: 500; }

/* ===========================
   右上SNSハブ
=========================== */
.sns-hub {
  position: absolute;
  top: calc(var(--status-h) + 6px);
  right: 8px;
  z-index: 32;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}
.sns-hub.hidden { display: none; }
.sns-hub.appearing .sns-hub-btn {
  animation: snsHubBtnIn 0.4s cubic-bezier(0.34,1.26,0.64,1) both;
}
.sns-hub.appearing .sns-hub-btn:nth-child(1) { animation-delay: 0s; }
.sns-hub.appearing .sns-hub-btn:nth-child(2) { animation-delay: 0.1s; }
.sns-hub.appearing .sns-hub-btn:nth-child(3) { animation-delay: 0.2s; }
@keyframes snsHubBtnIn {
  from { transform: scale(0) translateX(20px); opacity: 0; }
  to   { transform: scale(1) translateX(0);    opacity: 1; }
}

.sns-hub-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--pablo-border);
  background: var(--pablo-card);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.6);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, background 0.12s;
}
.sns-hub-btn:active { transform: scale(0.88); background: #FFF8D6; border-color: var(--pablo-accent); }

/* DM 未読バッジ */
.dm-badge-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  background: #FF3B30;
  border-radius: 50%;
  border: 1.5px solid #fff;
  pointer-events: none;
  animation: dm-badge-pop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes dm-badge-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ===========================
   リュック画面
=========================== */
.inv-panel-body {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ペルソナ切替タブ */
.inv-persona-tabs {
  display: flex;
  flex-shrink: 0;
  background: var(--pablo-card);
  padding: 8px 12px 0;
  gap: 8px;
  border-bottom: 1px solid var(--pablo-border);
}
.inv-persona-tab {
  flex: 1;
  padding: 10px 12px;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  background: #ECEAE5;
  color: #888;
  font-size: 13px;
  font-weight: bold;
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.18s;
}
.inv-persona-tab.active[data-persona="honi"] {
  background: linear-gradient(180deg, #E8EFE2, #D5E1CC);
  color: #4F6049;
  border-color: #B8C9AA;
  box-shadow: 0 -2px 8px rgba(120,140,100,0.12);
}
.inv-persona-tab.active[data-persona="focus"] {
  background: linear-gradient(180deg, #FFE4D5, #FFCBB5);
  color: #B65A3A;
  border-color: #FFA875;
  box-shadow: 0 -2px 8px rgba(255,140,90,0.18);
}

/* ペルソナ別のヘッダー色 */
#screen-inventory.persona-honi .panel-header {
  background: linear-gradient(180deg, #D5E1CC, #BFD0B2);
  color: #4F6049;
}
#screen-inventory.persona-focus .panel-header {
  background: linear-gradient(180deg, #FFCBB5, #FFA875);
  color: #6B3A20;
}
#screen-inventory.persona-honi .inv-panel-body {
  background: #F4F7F0;
}
#screen-inventory.persona-focus .inv-panel-body {
  background: #FFF6EE;
}

.inv-tabs {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--pablo-card);
  border-bottom: 1.5px solid var(--pablo-border);
  flex-shrink: 0;
  scrollbar-width: none;
}
.inv-tabs::-webkit-scrollbar { display: none; }

.inv-tab {
  flex-shrink: 0;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  color: var(--pablo-sub);
  font-size: 12px;
  font-family: var(--font-main);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.inv-tab.active {
  color: var(--pablo-accent2);
  border-bottom-color: var(--pablo-accent);
}

.inv-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-content: start;
}

.inv-item {
  background: var(--pablo-card);
  border: 1.5px solid var(--pablo-border);
  border-radius: 16px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: border-color 0.15s, transform 0.12s;
}
.inv-item:active { transform: scale(0.96); border-color: var(--pablo-accent); }
.inv-item-icon  { font-size: 28px; line-height: 1; }
.inv-item-name  { font-size: 11px; color: var(--pablo-sub); text-align: center; line-height: 1.3; }
.inv-item-count { font-size: 16px; font-weight: bold; color: var(--pablo-accent2); }

.inv-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--pablo-sub);
  font-size: 13px;
  padding: 32px 0;
}

/* ── 持ち物 付箋スタイル ───────────────────────── */
.inv-content-notes {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px !important;
  padding: 20px 16px 24px !important;
}
.inv-note-card {
  border-radius: 14px !important;
  box-shadow:
    3px 4px 14px rgba(0,0,0,0.14),
    1px 1px 0   rgba(0,0,0,0.04) !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
}
.inv-note-card:active {
  transform: rotate(0deg) scale(0.96) !important;
  box-shadow: 1px 2px 6px rgba(0,0,0,0.10) !important;
}

/* 旧 belonging アイコンスタイル（付箋カード内では無効化） */
.inv-note-card .inv-item-icon {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ===========================
   マップ画面
=========================== */
.map-panel-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px 8px !important;
  gap: 8px;
  overflow-y: auto;
}
#map-wrap {
  width: 100%;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--pablo-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  line-height: 0;
}
#map-wrap img {
  width: 100%;
  display: block;
  border-radius: 12px;
  user-select: none;
  -webkit-user-drag: none;
}
#map-wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
  border-radius: 12px;
}
#map-wrap svg g[style*="pointer"] {
  transition: opacity 0.12s;
}
#map-wrap svg g[style*="pointer"]:active { opacity: 0.7; }
.map-hint {
  font-size: 11px;
  color: var(--pablo-sub);
  text-align: center;
}

/* ===========================
   図鑑画面
=========================== */
#bestiary-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

/* 図鑑タブ */
.bestiary-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--pablo-border);
  flex-shrink: 0;
  background: var(--pablo-card);
}
.bestiary-tab {
  flex: 1;
  padding: 12px 8px;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  color: var(--pablo-sub);
  font-size: 12px;
  font-family: var(--font-main);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.bestiary-tab.active {
  color: var(--pablo-accent2);
  border-bottom-color: var(--pablo-accent);
}

/* キャラクター図鑑グリッド */
.bestiary-char-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
  flex: 1;
  align-content: start;
  -webkit-overflow-scrolling: touch;
}

.bestiary-char-cell {
  position: relative;
  background: var(--pablo-card);
  border: 1.5px solid var(--pablo-border);
  border-radius: 16px;
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: transform 0.12s, box-shadow 0.12s;
  min-height: 108px;
}
.bestiary-char-cell:active {
  transform: scale(0.95);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.bestiary-char-cell.locked {
  opacity: 0.30;
  filter: grayscale(1);
  cursor: default;
}
.bestiary-char-cell.locked:active {
  transform: none;
}

.bestiary-cell-avatar {
  width: 64px;
  height: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  color: #ccc;
  font-size: 26px;
  line-height: 72px;
}
.bestiary-cell-avatar svg { width: 100%; height: 100%; }

.bestiary-cell-name {
  font-size: 11px;
  font-weight: bold;
  color: var(--pablo-text);
  text-align: center;
  line-height: 1.3;
  word-break: keep-all;
}

.bestiary-cell-hearts {
  display: flex;
  gap: 1px;
  min-height: 14px;
  font-size: 9px;
}

/* 好み解禁バッジ */
.bestiary-pref-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 11px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* キャラ詳細オーバーレイ（ボトムシート） */
.char-detail-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.42);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.2s;
}
.char-detail-overlay.visible {
  opacity: 1;
}
.char-detail-overlay.visible .char-detail-sheet {
  transform: translateY(0);
}

.char-detail-sheet {
  background: var(--pablo-bg);
  border-radius: 24px 24px 0 0;
  padding: 8px 20px 40px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  -webkit-overflow-scrolling: touch;
}

.char-detail-handle {
  width: 36px;
  height: 4px;
  background: var(--pablo-border);
  border-radius: 2px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.char-detail-svg-wrap {
  width: 120px;
  height: 148px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.char-detail-svg-wrap svg { width: 100%; height: 100%; }

.char-detail-name {
  font-size: 20px;
  font-weight: bold;
  color: var(--pablo-text);
  margin-top: 2px;
}

.char-detail-hearts {
  display: flex;
  gap: 4px;
  font-size: 16px;
  margin-bottom: 4px;
}

.char-detail-desc {
  font-size: 13px;
  color: var(--pablo-sub);
  text-align: center;
  line-height: 1.75;
  max-width: 280px;
  padding: 0 4px;
}

.char-detail-block {
  width: 100%;
  background: var(--pablo-card);
  border-radius: 14px;
  padding: 12px 16px;
  border: 1.5px solid var(--pablo-border);
  margin-top: 2px;
}

.char-detail-block-label {
  font-size: 10px;
  font-weight: bold;
  color: var(--pablo-sub);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.char-detail-block-value {
  font-size: 14px;
  color: var(--pablo-text);
  line-height: 1.6;
}
.char-detail-unknown {
  color: var(--pablo-sub);
  font-style: italic;
}

.char-detail-spots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.char-detail-spot-tag {
  background: var(--pablo-accent);
  color: var(--pablo-dark);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: bold;
}

/* アイテム図鑑グリッド */
.bestiary-item-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
  flex: 1;
  align-content: start;
  -webkit-overflow-scrolling: touch;
}
.bestiary-item-card {
  background: var(--pablo-card);
  border: 1.5px solid var(--pablo-border);
  border-radius: 16px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: default;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.bestiary-item-card.locked {
  opacity: 0.28;
  filter: grayscale(1);
}
.bestiary-item-icon { font-size: 26px; line-height: 1; }
.bestiary-item-name {
  font-size: 10px;
  color: var(--pablo-text);
  text-align: center;
  line-height: 1.3;
}
.bestiary-item-desc {
  font-size: 9px;
  color: var(--pablo-sub);
  text-align: center;
  line-height: 1.4;
  margin-top: 2px;
}

/* ===========================
   インベントリ アイテムカード（拡張）
=========================== */
.inv-item {
  background: var(--pablo-card);
  border: 1.5px solid var(--pablo-border);
  border-radius: 14px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.inv-item-locked {
  opacity: 0.28;
  filter: grayscale(1);
}
.inv-item-icon  { font-size: 28px; line-height: 1; }
.inv-item-name  { font-size: 10px; color: var(--pablo-sub); text-align: center; line-height: 1.3; }
.inv-item-count {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 11px;
  font-weight: bold;
  color: var(--pablo-dark);
  background: var(--pablo-accent);
  border-radius: 8px;
  padding: 1px 5px;
}
.inv-item-desc {
  font-size: 9px;
  color: var(--pablo-sub);
  text-align: center;
  line-height: 1.4;
  margin-top: 2px;
}

/* 入れ歯「使う」ボタン */
.btn-use-tooth {
  margin-top: 4px;
  padding: 5px 8px;
  font-size: 10px;
  font-family: var(--font-main);
  background: var(--pablo-accent);
  color: var(--pablo-dark);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
  line-height: 1.3;
  font-weight: bold;
}
.btn-use-tooth:active {
  background: var(--pablo-accent2);
  transform: scale(0.96);
}

/* ===========================
   好感度マイルストーン演出
=========================== */
.affinity-toast {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pablo-card);
  color: var(--pablo-text);
  border: 1.5px solid var(--pablo-accent);
  padding: 10px 20px;
  border-radius: 20px;
  font-family: var(--font-hand);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  z-index: 100;
  animation: toastIn 0.3s ease, toastOut 0.4s ease 2s forwards;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(232,197,71,0.3);
}
@keyframes toastIn  { from { opacity:0; transform: translateX(-50%) translateY(-10px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; } }

/* スマイル獲得アニメーション */
.smiles-float {
  position: absolute;
  left: 50%;
  bottom: 38%;
  transform: translateX(-50%);
  color: var(--pablo-accent2);
  font-size: 22px;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
  pointer-events: none;
  z-index: 102;
  animation: smilesUp 1.4s ease forwards;
}
@keyframes smilesUp {
  0%   { opacity:0; transform: translateX(-50%) translateY(0); }
  20%  { opacity:1; transform: translateX(-50%) translateY(-10px); }
  80%  { opacity:1; transform: translateX(-50%) translateY(-40px); }
  100% { opacity:0; transform: translateX(-50%) translateY(-60px); }
}

/* カフェ掛け声トースト */
.cafe-greeting-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(232,197,71,0.95), rgba(245,213,107,0.95));
  color: var(--pablo-dark);
  padding: 16px 28px;
  border-radius: 20px;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
  white-space: pre-line;
  line-height: 1.6;
  z-index: 103;
  pointer-events: none;
  box-shadow: 0 6px 24px rgba(232,197,71,0.45);
  animation: greetingPop 0.4s cubic-bezier(0.34,1.56,0.64,1), greetingFade 0.5s ease 1.8s forwards;
}
@keyframes greetingPop  { from { opacity:0; transform: translate(-50%,-50%) scale(0.7); } to { opacity:1; transform: translate(-50%,-50%) scale(1); } }
@keyframes greetingFade { from { opacity:1; } to { opacity:0; } }

/* ===========================
   メンテナンスミニゲーム
=========================== */
#maintain-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.maintain-spot {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180,140,80,0.85) 0%, rgba(120,80,40,0.5) 70%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  pointer-events: all;
  animation: spotPulse 1s ease-in-out infinite alternate;
  transform: translate(-50%, -50%);
}
.maintain-spot:active { transform: translate(-50%,-50%) scale(0.8); }
@keyframes spotPulse { from { box-shadow: 0 0 6px rgba(180,140,80,0.5); } to { box-shadow: 0 0 18px rgba(180,140,80,0.9); } }

#maintain-progress {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pablo-card);
  color: var(--pablo-accent2);
  border: 1.5px solid var(--pablo-border);
  padding: 8px 18px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: bold;
  z-index: 41;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ===========================
   ミニゲーム共通：HUD
=========================== */
.mg-hud {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pablo-card);
  color: var(--pablo-accent2);
  border: 1.5px solid var(--pablo-border);
  padding: 7px 20px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: bold;
  white-space: nowrap;
  z-index: 45;
  pointer-events: none;
  letter-spacing: 1px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* ===========================
   ミニゲーム①：草むしり
=========================== */
#weeding-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
}

.weed-sprite {
  position: absolute;
  font-size: 30px;
  cursor: pointer;
  user-select: none;
  transform-origin: bottom center;
  transition: transform 0.25s ease, opacity 0.25s ease;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}
.weed-sprite:active { transform: scale(0.8); }
.weed-sprite.pulled {
  transform: translateY(-40px) scale(0.05) rotate(30deg) !important;
  opacity: 0 !important;
  pointer-events: none;
}

.caterpillar-wrap {
  position: absolute;
  z-index: 46;
  pointer-events: none;
  animation: catWiggle 0.4s ease-in-out infinite alternate;
}
@keyframes catWiggle {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(5deg); }
}
.caterpillar-el { font-size: 38px; line-height: 1; }

.aah-text {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 52px;
  font-weight: 900;
  color: #FF5722;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 50;
  white-space: nowrap;
  animation: aahPop 0.9s ease forwards;
}
@keyframes aahPop {
  0%   { transform: translate(-50%,-50%) scale(0);   opacity: 1; }
  40%  { transform: translate(-50%,-50%) scale(1.3); opacity: 1; }
  70%  { transform: translate(-50%,-50%) scale(1.0); opacity: 1; }
  100% { transform: translate(-50%,-70%) scale(0.9); opacity: 0; }
}

/* ===========================
   ミニゲーム②：雨漏りバケツキャッチ
=========================== */
#bucket-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  touch-action: none;
}

.raindrop {
  position: absolute;
  width: 7px;
  height: 22px;
  background: linear-gradient(180deg, transparent 0%, #88CCFF 60%, #55AAEE 100%);
  border-radius: 3px 3px 50% 50%;
  opacity: 0.85;
  pointer-events: none;
}

.bucket-el {
  position: absolute;
  font-size: 44px;
  line-height: 1;
  user-select: none;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
  z-index: 44;
  transition: left 0.04s linear;
}

.catch-pop {
  position: absolute;
  font-size: 22px;
  font-weight: bold;
  color: #88EEFF;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 48;
  animation: catchPop 0.7s ease forwards;
}
@keyframes catchPop {
  0%   { opacity: 1; transform: translateY(0)   scale(1); }
  100% { opacity: 0; transform: translateY(-32px) scale(0.6); }
}

/* ===========================
   ミニゲーム③：ボンディダンス対決
=========================== */
#bondi-dance-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 24px;
  background: rgba(10, 5, 30, 0.82);
  overflow: hidden;
}

.bondi-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding-top: 8px;
}

.bondi-k-label {
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  letter-spacing: 1px;
}

.bondi-move-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: bondiPulse 0.5s ease;
}
@keyframes bondiPulse {
  0%   { transform: scale(0.6); opacity: 0.2; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

.bondi-move-emoji {
  font-size: 72px;
  line-height: 1;
  filter: drop-shadow(0 0 16px rgba(200,160,255,0.7));
}

.bondi-move-name {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(200,160,255,0.8);
}

.bondi-prompt {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1px;
}

.bondi-feedback {
  font-size: 18px;
  font-weight: bold;
  min-height: 26px;
  text-align: center;
  letter-spacing: 1px;
}

.bondi-choices {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.bondi-choice-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px;
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  color: #fff;
  font-family: var(--font-main);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.bondi-choice-btn:active:not(:disabled) {
  transform: scale(0.93);
}
.bondi-btn-emoji {
  font-size: 32px;
  line-height: 1;
}
.bondi-btn-label {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
}
.bondi-choice-btn.bondi-correct {
  background: rgba(255,213,79,0.30);
  border-color: #FFD54F;
}
.bondi-choice-btn.bondi-wrong {
  background: rgba(239,154,154,0.25);
  border-color: #EF9A9A;
  opacity: 0.7;
}
.bondi-choice-btn:disabled {
  cursor: default;
}

/* 録音ボタン */
.btn-record {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  background: #E53935;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-family: var(--font-main);
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  letter-spacing: 1px;
  transition: opacity 0.15s;
}
.btn-record:active { opacity: 0.8; }
.btn-record.recording {
  background: #43A047;
  animation: recordPulse 0.8s ease-in-out infinite alternate;
}
@keyframes recordPulse {
  from { box-shadow: 0 0 0   rgba(67,160,71,0.5); }
  to   { box-shadow: 0 0 18px rgba(67,160,71,0.9); }
}
.record-status {
  font-size: 12px;
  color: var(--pablo-sub);
  margin-top: 6px;
  text-align: center;
}

/* ===========================
   シーンフェードトランジション
=========================== */
/* ===========================
   シェイクアニメーション（叫びシーン）
=========================== */
@keyframes scene-shake {
  0%,100% { transform: translate(0, 0) rotate(0deg); }
  10%     { transform: translate(-5px, -3px) rotate(-0.5deg); }
  20%     { transform: translate(5px,  3px) rotate( 0.5deg); }
  30%     { transform: translate(-4px,  2px) rotate(-0.3deg); }
  40%     { transform: translate(4px, -2px) rotate( 0.3deg); }
  50%     { transform: translate(-6px,  3px) rotate(-0.6deg); }
  60%     { transform: translate(6px, -3px) rotate( 0.6deg); }
  70%     { transform: translate(-3px,  4px) rotate(-0.2deg); }
  80%     { transform: translate(3px, -4px) rotate( 0.2deg); }
  90%     { transform: translate(-1px,  1px) rotate(-0.1deg); }
}
.scene-shaking {
  animation: scene-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ===========================
   背景パーティクルエフェクト
=========================== */
#scene-particles {
  position: absolute;
  inset: 0;
  z-index: 6;          /* canvas(0) より上、overlay(auto) より下 */
  pointer-events: none;
  overflow: hidden;
}
.bg-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: bg-particle-float linear infinite;
}
@keyframes bg-particle-float {
  0%   { transform: translateY(0px)    translateX(0px);               opacity: 0; }
  18%  { opacity: var(--p-opacity, 0.5); }
  80%  { opacity: var(--p-opacity, 0.5); }
  100% { transform: translateY(-110px) translateX(var(--p-drift, 8px)); opacity: 0; }
}

#scene-fade {
  position: absolute; inset: 0; z-index: 38;
  background: #000; opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease;
}
#scene-fade.out { opacity: 1; pointer-events: all; }

/* ===========================
   初登場演出オーバーレイ
=========================== */
.first-meet-overlay {
  position: absolute; inset: 0; z-index: 35;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background-color: rgba(255,255,255,0); cursor: pointer;
  animation: firstMeetFlash 0.5s ease forwards;
}
@keyframes firstMeetFlash {
  0%   { background-color: rgba(255,255,255,0.9); }
  40%  { background-color: rgba(255,255,255,0.2); }
  100% { background-color: rgba(0,0,0,0.45); }
}
.first-meet-label {
  color: #fff; font-size: 20px; font-weight: bold;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 20px rgba(255,220,80,0.6);
  margin-top: 12px; text-align: center; line-height: 1.4;
}

/* ===========================
   チュートリアルトースト
=========================== */
.tutorial-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 12px));
  background: var(--pablo-card);
  color: var(--pablo-text);
  font-size: 13px;
  line-height: 1.6;
  padding: 14px 22px;
  border-radius: 18px;
  border: 1.5px solid var(--pablo-border);
  text-align: center;
  white-space: pre-line;
  z-index: 9000;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  pointer-events: none;
  max-width: 78%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.tutorial-toast.visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* イラスト付きチュートリアル */
.tutorial-toast-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 16px;
}
.tutorial-art {
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.tutorial-text {
  white-space: pre-line;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
}

/* ===========================
   グレードアップスパークル
=========================== */
.grade-sparkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sparkle-burst {
  font-size: 90px;
  animation: sparkle-pop 0.9s ease-out forwards;
}
@keyframes sparkle-pop {
  0%   { opacity: 0; transform: scale(0.2); }
  30%  { opacity: 1; transform: scale(1.5); }
  65%  { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(0.7); }
}

/* ===========================
   章タイトルオーバーレイ
=========================== */

/* ===========================
   カフェ名入力UI
=========================== */
.sign-name-ui {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(250,247,242,0.92);
  padding: 28px 24px;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.sign-name-ui.visible {
  opacity: 1;
  pointer-events: all;
}
.sign-name-label {
  font-size: 16px;
  font-weight: bold;
  color: var(--pablo-text);
  letter-spacing: 1px;
}
.sign-name-input {
  width: 240px;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 14px;
  border: 2px solid var(--pablo-accent);
  background: var(--pablo-card);
  color: var(--pablo-text);
  text-align: center;
  outline: none;
}
.sign-name-btn {
  background: var(--pablo-accent);
  color: var(--pablo-dark);
  border: none;
  border-radius: 50px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
.sign-name-btn:active { opacity: 0.8; }

/* ===========================
   描画ミニゲームUI（看板・のぼり共通）
=========================== */
.drawing-game-ui {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(250,247,242,0.95);
  padding: 20px 16px;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.drawing-game-ui.visible {
  opacity: 1;
  pointer-events: all;
}
.drawing-game-title {
  font-size: 15px;
  font-weight: bold;
  color: var(--pablo-text);
  letter-spacing: 1px;
}
.drawing-canvas {
  border-radius: 8px;
  touch-action: none;
  cursor: crosshair;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.sign-canvas {
  border: 3px solid #8B5E2F;
}
.nobori-canvas {
  border: 3px solid #E65100;
}
.drawing-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 280px;
}
.palette-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s;
  flex-shrink: 0;
}
.palette-btn:active,
.palette-btn.active {
  transform: scale(1.3);
  box-shadow: 0 0 0 3px #fff;
}
.stamp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  max-width: 280px;
}
.stamp-btn {
  font-size: 15px;
  background: var(--pablo-card);
  border: 1.5px solid var(--pablo-border);
  border-radius: 8px;
  padding: 3px 7px;
  cursor: pointer;
  color: var(--pablo-text);
  font-weight: bold;
  line-height: 1.4;
  transition: transform 0.1s;
}
.stamp-btn.active {
  border-color: var(--pablo-accent);
  background: #FFF8D6;
  transform: scale(1.15);
}
.drawing-btn-row {
  display: flex;
  gap: 12px;
}
.drawing-btn {
  padding: 12px 22px;
  border-radius: 50px;
  border: none;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.drawing-btn-clear { background: var(--pablo-border); color: var(--pablo-text); }
.drawing-btn-done  { background: var(--pablo-accent); color: var(--pablo-dark); }
.drawing-btn:active { opacity: 0.8; }

/* ===========================
   シーン内録音UI
=========================== */
.in-scene-recording-ui {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(250,247,242,0.95);
  padding: 28px 24px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.in-scene-recording-ui.visible {
  opacity: 1;
  pointer-events: all;
}
.isr-label {
  font-size: 15px;
  color: var(--pablo-text);
  text-align: center;
  line-height: 1.6;
  white-space: pre-line;
  background: var(--pablo-bg);
  border: 1.5px solid var(--pablo-border);
  border-radius: 16px;
  padding: 14px 18px;
  width: 100%;
  max-width: 300px;
}
.isr-mic {
  font-size: 52px;
  transition: transform 0.15s;
  filter: drop-shadow(0 0 0px #fff);
}
.isr-mic.isr-mic-active {
  animation: micPulse 0.6s ease-in-out infinite alternate;
}
@keyframes micPulse {
  from { transform: scale(1.0); filter: drop-shadow(0 0 6px rgba(255,80,80,0.9)); }
  to   { transform: scale(1.15); filter: drop-shadow(0 0 18px rgba(255,80,80,0.9)); }
}
.isr-status {
  font-size: 14px;
  color: var(--pablo-sub);
  text-align: center;
  min-height: 20px;
}
.isr-btn {
  width: 100%;
  max-width: 260px;
  padding: 14px 0;
  border-radius: 50px;
  border: none;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}
.isr-btn:active { transform: scale(0.97); }
.isr-btn:disabled { opacity: 0.4; cursor: default; }
.isr-btn-rec  { background: #E53935; color: #fff; }
.isr-btn-done { background: #43A047; color: #fff; }
.isr-btn-skip { background: var(--pablo-border); color: var(--pablo-sub); font-size: 13px; padding: 10px 0; }

.chapter-title-overlay {
  position: absolute;
  inset: 0;
  z-index: 300;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  cursor: pointer;
  pointer-events: none;
}
.chapter-title-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.chapter-title-main {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 6px;
  text-align: center;
  text-shadow: 0 0 30px rgba(255, 210, 100, 0.6);
  line-height: 1.6;
}
.chapter-title-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 3px;
  margin-top: 14px;
  text-align: center;
}
.chapter-title-hint {
  position: absolute;
  bottom: 36px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 1px;
  animation: chapterHintBlink 1.8s ease infinite;
}
@keyframes chapterHintBlink {
  0%, 100% { opacity: 0.25; }
  50%       { opacity: 0.75; }
}

/* ===========================
   探索パネル（リデザイン）
=========================== */
.explore-panel {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,#FFF7EE 0%,#FFF0DC 100%);
  display: flex;
  flex-direction: column;
  z-index: 300;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.28s, transform 0.28s;
  overflow-y: auto;
}
.explore-panel.visible { opacity:1; transform:translateY(0); }

.explore-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 13px;
  flex-shrink: 0;
  background: linear-gradient(120deg,#FF8A65 0%,#FFB74D 100%);
  box-shadow: 0 3px 12px rgba(255,120,60,0.28);
}
.explore-panel-header-left { display:flex; flex-direction:column; gap:2px; }
.explore-panel-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.explore-panel-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.88);
  font-weight: 600;
}
.explore-panel-close {
  background: rgba(255,255,255,0.22);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px 12px 24px;
}

/* 共通ベース */
.explore-card {
  position: relative;
  border-radius: 18px;
  padding: 11px 6px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 90px;
  overflow: hidden;
  animation: epCardIn 0.35s both;
}

/* ── 解放済み ── */
.explore-card.unlocked {
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.11s;
}
.explore-card.unlocked:active { transform: scale(0.91); }

.ep-char {
  position: absolute;
  top: 6px; left: 7px;
  font-size: 12px;
  opacity: 0.65;
}
.ep-new {
  position: absolute;
  top: 5px; right: 5px;
  background: #FF5252;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}
.ep-icon {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.13));
  margin-top: 6px;
}
.ep-name {
  font-size: 10px;
  font-weight: 700;
  color: #3E2723;
  text-align: center;
  line-height: 1.3;
  word-break: keep-all;
}

/* ── 未解放 ── */
.explore-card.locked {
  background: linear-gradient(145deg,rgba(180,195,215,0.28),rgba(160,180,200,0.42));
  border: 1.5px dashed rgba(110,130,155,0.38);
  cursor: not-allowed;
}
.ep-icon-fog {
  font-size: 28px;
  line-height: 1;
  opacity: 0.18;
  filter: blur(3px) grayscale(1);
  margin-top: 4px;
}
.ep-lock {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-72%);
  font-size: 22px;
  opacity: 0.70;
}
.ep-teaser {
  font-size: 9px;
  color: rgba(70,90,115,0.75);
  text-align: center;
  font-style: italic;
  line-height: 1.4;
  padding: 0 3px;
  word-break: keep-all;
  margin-top: 2px;
}

/* シマー（未解放のキラキラ） */
.ep-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,0.50) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: epShimmer 2.6s ease-in-out infinite;
  border-radius: inherit;
  pointer-events: none;
}

@keyframes epShimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 200%  0; }
}
@keyframes epCardIn {
  from { opacity:0; transform:translateY(10px) scale(0.94); }
  to   { opacity:1; transform:translateY(0)    scale(1);    }
}

/* アイテムゲット演出 */
.item-get-overlay {
  position: absolute;
  inset: 0;
  background: rgba(250, 247, 242, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 400;
  opacity: 0;
  transition: opacity 0.3s;
  gap: 10px;
  cursor: pointer;
}
.item-get-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--pablo-accent2);
  margin-bottom: 6px;
}
.item-get-row {
  font-size: 22px;
  color: var(--pablo-text);
}
.item-get-hint {
  font-size: 12px;
  color: var(--pablo-sub);
  margin-top: 16px;
}

/* ===========================
   メニューバッジ通知
=========================== */
.menu-badge {
  position: absolute;
  top: 4px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #E53935;
  border: 1.5px solid var(--pablo-card);
  animation: badgePulse 1.5s ease-in-out infinite;
}
/* クラフト！吹き出しアニメーション */
@keyframes craftBubble {
  0%, 100% { transform: translateX(-50%) translateY(0px); }
  50%       { transform: translateX(-50%) translateY(-5px); }
}
/* 電波塔の青い光パルス */
@keyframes glowPulse {
  from { opacity: 0.35; }
  to   { opacity: 0.85; }
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.3); }
}

/* ===========================
   タイトル くつろぐボタン
=========================== */
.btn-relax {
  display: block;
  width: 100%;
  padding: 12px 0;
  margin-top: 8px;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 28px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 16px;
  font-family: var(--font-main);
  letter-spacing: 0.05em;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s, transform 0.15s;
}
.btn-relax:active {
  background: rgba(255,255,255,0.25);
  transform: scale(0.97);
}

/* ===========================
   くつろぎモード UI
=========================== */
#screen-relax {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: #000;
  display: none;
}
#screen-relax.active {
  display: block;
}
#relax-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#relax-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* トラックバー（上部） */
.relax-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
.relax-track-bar {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 100%);
  pointer-events: auto;
}
.relax-track-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.relax-track-info {
  flex: 1;
  min-width: 0;
}
.relax-track-name {
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.relax-track-artist {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-top: 1px;
}
.relax-note-anim {
  font-size: 18px;
  animation: relaxNoteFloat 2s ease-in-out infinite;
  opacity: 0.7;
}
@keyframes relaxNoteFloat {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%       { transform: translateY(-4px); opacity: 1; }
}

/* 時計（右上） */
.relax-clock {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 48px);
  right: 16px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
}

/* ヒント（下部） */
.relax-hint {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  pointer-events: none;
}

/* BGMパネル */
.relax-bgm-panel {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  gap: 16px;
}
.relax-panel-title {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.05em;
}
.relax-record-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 340px;
}
.relax-record-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.relax-record-card:active {
  background: rgba(255,255,255,0.18);
  transform: scale(0.96);
}
.relax-record-card.locked {
  opacity: 0.45;
  cursor: default;
}
.relax-record-card.playing {
  border-color: #FFD54F;
  background: rgba(255,213,79,0.12);
}
.relax-jacket {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.relax-jacket-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.relax-jacket-icon {
  font-size: 32px;
}
.relax-playing-dot {
  position: absolute;
  top: 5px; right: 5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FFD54F;
  animation: relaxPulse 1s ease-in-out infinite;
}
@keyframes relaxPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.6; }
}
.relax-record-info {
  text-align: center;
}
.relax-record-name {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}
.relax-record-artist {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
.relax-shop-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}
.relax-close-btn {
  margin-top: 4px;
  padding: 10px 32px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 24px;
  background: transparent;
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s;
}
.relax-close-btn:active {
  background: rgba(255,255,255,0.12);
}

/* 退出メニュー */
.relax-exit-menu {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.relax-exit-box {
  background: rgba(30,30,50,0.95);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 18px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 220px;
}
.relax-exit-title {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  font-weight: bold;
}
.relax-exit-btn {
  width: 100%;
  padding: 11px 0;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.relax-exit-btn:active {
  background: rgba(255,255,255,0.18);
}
.relax-exit-cancel {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  padding: 4px 12px;
}

/* お客さんスライドイン */
.relax-customer {
  position: absolute;
  bottom: 28%;
  left: -120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: relaxCustomerSlide 6s ease-in-out forwards;
  pointer-events: none;
  z-index: 5;
}
.relax-customer-drink {
  font-size: 18px;
  animation: relaxDrinkBounce 1s ease-in-out infinite;
}
@keyframes relaxCustomerSlide {
  0%   { left: -120px; opacity: 0; }
  15%  { opacity: 1; }
  35%  { left: 18%; }
  65%  { left: 18%; }
  85%  { opacity: 1; }
  100% { left: -120px; opacity: 0; }
}
@keyframes relaxDrinkBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}

/* ===========================
   第一章 専用アニメーション
=========================== */
@keyframes ch1GlowPulse {
  0%, 100% { opacity: 0.75; transform: scale(1);    }
  50%       { opacity: 1;    transform: scale(1.25); }
}
@keyframes ch1FragBounce {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.18); }
  80%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* ===========================
   オープニングスキップ
   =========================== */
.skip-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 120;
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.80);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 14px;
  font-size: 11px;
  padding: 4px 11px;
  cursor: pointer;
  letter-spacing: 0.05em;
  backdrop-filter: blur(2px);
  transition: background 0.2s, color 0.2s;
}
.skip-btn:active {
  background: rgba(0,0,0,0.55);
  color: #fff;
}

.skip-modal {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(3px);
}
.skip-modal.hidden { display: none; }

.skip-modal-box {
  background: var(--pablo-card);
  border-radius: 22px;
  padding: 28px 24px 22px;
  max-width: 280px;
  width: 85%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  border: 1.5px solid var(--pablo-border);
}
.skip-modal-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--pablo-text);
  margin-bottom: 10px;
}
.skip-modal-desc {
  font-size: 13px;
  color: var(--pablo-sub);
  line-height: 1.6;
  margin-bottom: 20px;
}
.skip-modal-btns {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.skip-yes-btn {
  background: var(--pablo-accent);
  color: var(--pablo-dark);
  border: none;
  border-radius: 22px;
  padding: 11px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.skip-yes-btn:active { background: var(--pablo-accent2); color: #fff; }
.skip-no-btn {
  background: transparent;
  color: var(--pablo-sub);
  border: 1.5px solid var(--pablo-border);
  border-radius: 22px;
  padding: 10px;
  font-size: 13px;
  cursor: pointer;
}
.skip-no-btn:active { background: var(--pablo-bg); }

/* ミニゲーム中吹き出し（自動フェード） */
@keyframes mgSpeechFade {
  0%   { opacity: 0; transform: translateY(-5px); }
  12%  { opacity: 1; transform: translateY(0); }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===========================
   シグニファイア
   =========================== */

/* 会話 ▼ タップで進む */
.tap-indicator {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.tap-next-label {
  font-size: 10px;
  color: var(--pablo-sub);
  letter-spacing: 0.05em;
}
.msg-chevron {
  font-size: 13px;
  color: var(--pablo-sub);
  animation: bounce 1s infinite;
}
/* テキスト表示中は薄く / 完了したら明るく点滅 */
#message-window:not(.msg-done) .msg-chevron,
#message-window:not(.msg-done) .tap-next-label { opacity: 0.3; }
#message-window.msg-done .msg-chevron {
  color: var(--pablo-accent2);
  animation: msgChevronBlink 0.7s ease-in-out infinite;
}
#message-window.msg-done .tap-next-label { opacity: 1; color: var(--pablo-accent2); }
@keyframes msgChevronBlink {
  0%,100% { opacity: 1; transform: translateY(0); }
  50%      { opacity: 0.15; transform: translateY(3px); }
}

/* 最初の会話アニメーションヒント */
.first-msg-hint {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.90);
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 13px;
  color: #444;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  animation: firstHintPulse 1.3s ease-in-out 3, firstHintFade 0.5s 3.9s ease-out forwards;
}
@keyframes firstHintPulse {
  0%,100% { opacity: 0.9; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.06); }
}
@keyframes firstHintFade {
  to { opacity: 0; transform: translateX(-50%) scale(0.9); }
}

/* ===========================
   嵐：スワイプシグニファイア
   =========================== */
.storm-swipe-hint {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(0,0,0,0.50);
  pointer-events: all;
}
.storm-swipe-hand {
  font-size: 48px;
  animation: swipeHand 0.9s ease-in-out infinite;
}
@keyframes swipeHand {
  0%   { transform: translateX(-32px) rotate(-12deg); }
  50%  { transform: translateX(32px)  rotate(12deg); }
  100% { transform: translateX(-32px) rotate(-12deg); }
}
.storm-swipe-text {
  background: rgba(255,255,255,0.88);
  border-radius: 18px;
  padding: 9px 22px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.storm-swipe-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}
/* 最初の障害物警告 */
.obstacle-warn {
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 0 0 8px #FF8C00, 0 0 16px #FF4500;
  z-index: 75;
  pointer-events: none;
  white-space: nowrap;
  animation: obstacleWarnAnim 1.4s ease-out forwards;
}
@keyframes obstacleWarnAnim {
  0%   { opacity: 0; transform: scale(0.5); }
  25%  { opacity: 1; transform: scale(1.2); }
  60%  { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(0.8); }
}

/* ===========================
   素材収集：浮遊 + キラキラ
   =========================== */
@keyframes itemFloat {
  0%,100% { transform: translate(-50%,-50%) translateY(0); }
  50%      { transform: translate(-50%,-50%) translateY(-7px); }
}
@keyframes itemSparkle {
  0%,100% { filter: brightness(1); }
  50%      { filter: brightness(1.6) drop-shadow(0 0 6px gold); }
}
.collect-item-anim {
  animation: itemFloat 2s ease-in-out infinite,
             itemSparkle 1.8s ease-in-out infinite;
}

/* ===========================
   島タップ発見スポット
   =========================== */
.discover-spot {
  animation: discoveryPulse 1.8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes discoveryPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1);    box-shadow: 0 0 0  0px rgba(255,230,80,0.55); }
  50%       { transform: translate(-50%,-50%) scale(1.14); box-shadow: 0 0 0 14px rgba(255,230,80,0); }
}

/* ===========================
   入れ歯：矢印 + 口パクパク
   =========================== */
.denture-arrow {
  font-size: 28px;
  color: #FFD54F;
  text-shadow: 0 0 8px rgba(255,180,0,0.8);
  animation: arrowBounceUp 0.7s ease-in-out infinite;
  line-height: 1;
  margin: 4px 0;
}
@keyframes arrowBounceUp {
  0%,100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(-10px); opacity: 0.5; }
}
.mouth-pakupaku {
  transform-origin: center top;
  animation: pakupaku 0.7s ease-in-out infinite;
}
@keyframes pakupaku {
  0%,100% { transform: scaleY(1); }
  45%,55% { transform: scaleY(0.35); }
}

/* ===========================
   草むしり：ぷるぷる + 抜けエフェクト
   =========================== */
.weed-sprite { animation: weedShake 0.9s ease-in-out infinite; }
@keyframes weedShake {
  0%,100% { transform: rotate(0deg); }
  20%     { transform: rotate(-5deg) scale(1.06); }
  50%     { transform: rotate(5deg)  scale(1.06); }
  80%     { transform: rotate(-3deg); }
}
/* .weed-sprite.pulled はすでに定義済み（上書きはしない） */

.weed-burst {
  position: absolute;
  font-size: 22px;
  pointer-events: none;
  z-index: 48;
  animation: weedBurstAnim 0.55s ease-out forwards;
}
@keyframes weedBurstAnim {
  0%   { transform: translate(-50%,-50%) scale(0.5); opacity: 1; }
  60%  { transform: translate(-50%,-80%) scale(1.3); opacity: 0.9; }
  100% { transform: translate(-50%,-130%) scale(0.8); opacity: 0; }
}

/* ===========================
   バケツ：揺れ
   =========================== */
.bucket-el { animation: bucketSway 1.1s ease-in-out infinite; }
@keyframes bucketSway {
  0%,100% { transform: translateX(-50%) rotate(-6deg); }
  50%      { transform: translateX(-50%) rotate(6deg); }
}
/* 水滴 ! 警告 */
.drop-warn {
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  color: #FF5722;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: 43;
  transform: translateX(-50%);
  animation: dropWarnAnim 0.55s ease-out forwards;
}
@keyframes dropWarnAnim {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.4); }
  35%  { opacity: 1; transform: translateX(-50%) scale(1.2); }
  70%  { opacity: 1; transform: translateX(-50%) scale(1.0); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.8); }
}

/* ===========================
   共通ミニゲーム初回ヒント
   =========================== */
.mg-first-hint {
  position: absolute;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.90);
  border-radius: 18px;
  padding: 7px 20px;
  font-size: 13px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 28;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  animation: mgFirstHintAnim 3.8s ease-out forwards;
}
@keyframes mgFirstHintAnim {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-5px); }
  8%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── メニューチュートリアル ── */
@keyframes menuTutHint {
  0%   { opacity: 0.7; transform: translateY(0); }
  100% { opacity: 1;   transform: translateY(-4px); }
}
@keyframes menuAddedPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  80%  { transform: translate(-50%, -50%) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.lemonade-tut-panel {
  position: absolute;
  inset: 0;
  z-index: 80;
  background: rgba(250,247,242,0.96);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px 16px 16px;
  gap: 14px;
  overflow-y: auto;
}
.lemonade-tut-hint {
  color: var(--pablo-accent2);
  font-size: 13px;
  text-align: center;
  font-weight: bold;
  animation: menuTutHint 1.1s ease-in-out infinite alternate;
}
.lemonade-tut-card {
  background: var(--pablo-card);
  border: 2px solid var(--pablo-accent);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 10px rgba(232,197,71,0.2);
}
.lemonade-tut-ing-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pablo-bg);
  border-radius: 8px;
  padding: 7px 10px;
}
.lemonade-tut-craft-btn {
  margin-top: 6px;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: var(--pablo-accent);
  color: var(--pablo-dark);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(232,197,71,0.4);
  animation: menuTutHint 0.9s ease-in-out infinite alternate;
}
.menu-added-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--pablo-accent);
  color: var(--pablo-dark);
  font-size: 15px;
  font-weight: bold;
  padding: 18px 28px;
  border-radius: 18px;
  text-align: center;
  z-index: 100;
  box-shadow: 0 6px 24px rgba(232,197,71,0.4);
  animation: menuAddedPop 0.45s cubic-bezier(.36,.07,.19,.97) forwards;
}

/* ===========================
   LINE チャット UI
=========================== */
.lc-panel {
  position: absolute;
  inset: 0;
  z-index: 80;
  background: #E8EFF7;
  display: flex;
  flex-direction: column;
}
.lc-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}
.lc-tap-hint {
  text-align: center;
  color: var(--pablo-sub);
  font-size: 11px;
  padding: 7px 0 10px;
  letter-spacing: 0.04em;
}
.lc-narrator {
  text-align: center;
  color: var(--pablo-sub);
  font-size: 12px;
  background: rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 5px 14px;
  align-self: center;
  max-width: 88%;
}
.lc-row {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}
.lc-left  { flex-direction: row; }
.lc-right { flex-direction: row-reverse; }
.lc-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  flex-shrink: 0;
}
.lc-bubble {
  background: #fff;
  color: #222;
  border-radius: 16px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 72%;
  word-break: break-all;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.lc-right .lc-bubble {
  background: #A8E6CF;
  color: #1a2a1a;
}
.lc-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lc-name {
  font-size: 10px;
  color: var(--pablo-sub);
  padding-left: 2px;
}
.lc-sticker {
  font-size: 44px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* ===========================
   写真システム
=========================== */
.photo-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 200;
  pointer-events: none;
  opacity: 0.85;
}
.photo-toast {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: #fffde7;
  border: 3px solid #fff;
  border-radius: 4px;
  padding: 10px 14px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 150;
  text-align: center;
  min-width: 100px;
  pointer-events: none;
}
.photo-toast-img {
  font-size: 36px;
  margin-bottom: 4px;
}
.photo-toast-caption {
  font-size: 12px;
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
}
.photo-toast-label {
  font-size: 10px;
  color: #888;
}
.photo-album-content {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
  justify-content: center;
  overflow-y: auto;
}
/* ポラロイドカード */
.photo-polaroid {
  background: #fff;
  padding: 8px 8px 32px;
  border-radius: 2px;
  box-shadow: 3px 4px 16px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.12);
  transform: rotate(var(--photo-tilt, -2deg));
  width: 128px;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.photo-polaroid:hover {
  transform: rotate(var(--photo-tilt, -2deg)) scale(1.07);
  box-shadow: 6px 8px 24px rgba(0,0,0,0.35);
}
.photo-polaroid-img {
  width: 112px;
  height: 112px;
  background: #f0ede8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  overflow: hidden;
  border-radius: 1px;
}
.photo-polaroid-img img { width: 100%; height: 100%; object-fit: cover; }
.photo-polaroid-caption {
  margin-top: 6px;
  font-family: var(--font-hand);
  font-size: 10px;
  color: #444;
  text-align: center;
  line-height: 1.4;
}
.photo-polaroid-day {
  font-size: 9px;
  color: #aaa;
  text-align: center;
  margin-top: 2px;
}

/* ===========================
   📷 思い出写真システム
=========================== */

/* カメラシャッターボタン */
.camera-shutter-btn {
  position: absolute;
  right: 18px;
  bottom: 90px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.38);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 120;
  animation: cameraShutterPop 0.45s cubic-bezier(.36,.07,.19,.97) both;
  pointer-events: all;
}
.camera-shutter-btn:active { transform: scale(0.88) !important; }
@keyframes cameraShutterPop {
  0%   { opacity: 0; transform: scale(0) rotate(-20deg); }
  70%  { transform: scale(1.18) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.camera-shutter-btn::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.75);
  animation: cameraShutterPulse 1.3s ease-in-out infinite;
}
@keyframes cameraShutterPulse {
  0%,100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 0;   transform: scale(1.45); }
}

/* 撮り逃しトースト */
.missed-shot-toast {
  position: absolute;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.72);
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 20px;
  white-space: nowrap;
  z-index: 150;
  pointer-events: none;
  animation: toastOut 2.5s ease forwards;
}

/* ポラロイドポップアップ（撮影直後） */
.photo-popup-overlay {
  position: absolute;
  inset: 0;
  z-index: 190;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.photo-popup-card {
  background: #fff;
  padding: 10px 10px 36px;
  width: 180px;
  border-radius: 2px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.2);
  animation: polaroidPopup 3.4s ease forwards;
}
.photo-popup-img {
  width: 160px;
  height: 160px;
  background: #f0ede8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  overflow: hidden;
  border-radius: 1px;
}
.photo-popup-img img { width: 100%; height: 100%; object-fit: cover; }
.photo-popup-memo {
  margin-top: 8px;
  font-family: var(--font-hand);
  font-size: 11px;
  color: #555;
  text-align: center;
  letter-spacing: 0.05em;
}
@keyframes polaroidPopup {
  0%   { opacity: 0; transform: translateY(60px) rotate(-6deg) scale(0.65); }
  18%  { opacity: 1; transform: translateY(-6px) rotate(3deg) scale(1.06); }
  28%  { transform: translateY(0) rotate(-2deg) scale(1.0); }
  72%  { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1.0); }
  100% { opacity: 0; transform: translateY(-28px) rotate(-2deg) scale(0.9); }
}

/* ===========================
   📸 思い出アルバム（コルクボード）
=========================== */
.memory-board {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px 16px 16px;
  background: #b8864e;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0, rgba(0,0,0,0.05) 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.03) 0, rgba(0,0,0,0.03) 1px, transparent 0, transparent 50%);
  background-size: 6px 6px;
  min-height: 100%;
  justify-content: center;
  align-content: flex-start;
  overflow-y: auto;
}
.memory-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
}
.memory-slot::before {
  content: '📌';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  z-index: 5;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
/* シルエット（未撮影） */
.memory-slot-silhouette {
  background: rgba(0,0,0,0.22);
  width: 128px;
  height: 164px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-bottom: 20px;
  transform: rotate(var(--photo-tilt, -2deg));
  box-shadow: 2px 3px 10px rgba(0,0,0,0.2);
}
.memory-slot-silhouette-icon {
  font-size: 34px;
  filter: grayscale(1) opacity(0.35);
}
.memory-slot-silhouette-q {
  font-size: 24px;
  color: rgba(255,255,255,0.4);
  font-weight: bold;
  font-family: var(--font-hand);
}

/* 拡大表示オーバーレイ */
.photo-full-overlay {
  position: absolute;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.photo-full-card {
  background: #fff;
  padding: 14px 14px 50px;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.65);
  transform: rotate(-1deg);
  max-width: 260px;
  width: 82%;
}
.photo-full-img {
  width: 100%;
  aspect-ratio: 1;
  background: #f0ede8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  overflow: hidden;
  border-radius: 1px;
}
.photo-full-img img { width: 100%; height: 100%; object-fit: cover; }
.photo-full-memo {
  margin-top: 10px;
  font-family: var(--font-hand);
  font-size: 13px;
  color: #444;
  text-align: center;
  line-height: 1.5;
}
.photo-full-day {
  font-size: 11px;
  color: #aaa;
  text-align: center;
  margin-top: 4px;
}

/* ===========================
   🎞 エンディングスライドショー
=========================== */
.photo-slideshow-overlay {
  position: absolute;
  inset: 0;
  z-index: 500;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.slideshow-photo {
  position: absolute;
  background: #fff;
  padding: 14px 14px 48px;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  animation: slideshowPhotoIn 4.5s ease forwards;
  max-width: 240px;
  width: 80%;
}
.slideshow-photo-img {
  width: 100%;
  aspect-ratio: 1;
  background: #f0ede8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  overflow: hidden;
  border-radius: 1px;
}
.slideshow-photo-img img { width: 100%; height: 100%; object-fit: cover; }
.slideshow-photo-memo {
  margin-top: 10px;
  font-family: var(--font-hand);
  font-size: 13px;
  color: #444;
  text-align: center;
}
@keyframes slideshowPhotoIn {
  0%   { opacity: 0; transform: rotate(-8deg) scale(0.7) translateY(40px); }
  20%  { opacity: 1; transform: rotate(-2deg) scale(1.0) translateY(0); }
  75%  { opacity: 1; transform: rotate(-2deg) scale(1.0) translateY(0); }
  100% { opacity: 0; transform: rotate(-2deg) scale(0.95) translateY(-20px); }
}
.slideshow-ending-text {
  position: absolute;
  bottom: 60px;
  left: 0; right: 0;
  text-align: center;
  color: rgba(255,255,255,0.92);
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  animation: fadeIn 1.2s ease both;
}
.slideshow-link {
  position: absolute;
  bottom: 30px;
  left: 0; right: 0;
  text-align: center;
  color: rgba(255,200,80,0.9);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  animation: fadeIn 1.2s ease 0.6s both;
  letter-spacing: 0.05em;
}

/* ===========================
   吹き出し（カフェキャラクターおしゃべり）
=========================== */
.cafe-bubble {
  position: absolute;
  background: #fff;
  border: 1.5px solid #E8E0D5;
  border-radius: 14px 14px 14px 4px;
  padding: 8px 13px;
  font-size: 12px;
  color: #2C2C2C;
  z-index: 35;
  pointer-events: auto;
  box-shadow: 0 3px 14px rgba(0,0,0,0.10);
  animation: cafeBubbleIn 0.38s cubic-bezier(0.34,1.26,0.64,1) forwards;
  cursor: pointer;
  max-width: 52%;
  line-height: 1.55;
}
.cafe-bubble::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 14px;
  border: 8px solid transparent;
  border-top-color: #E8E0D5;
}
.cafe-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 15px;
  border: 7px solid transparent;
  border-top-color: #fff;
}
.cafe-bubble.bubble-right {
  border-radius: 14px 14px 4px 14px;
}
.cafe-bubble.bubble-right::before {
  left: auto; right: 14px;
}
.cafe-bubble.bubble-right::after {
  left: auto; right: 15px;
}
.cafe-bubble.bubble-fade-out {
  animation: cafeBubbleOut 0.3s ease forwards !important;
}
@keyframes cafeBubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cafeBubbleOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-6px) scale(0.93); }
}

/* ===========================
   今日のヒントバー
=========================== */
.cafe-hint-bar {
  position: absolute;
  top: var(--status-h);
  left: 0; right: 0;
  z-index: 22;
  background: linear-gradient(90deg, #FFF9E0, #FFF5C6);
  border-bottom: 1.5px solid rgba(232,197,71,0.5);
  padding: 7px 36px 7px 14px;
  font-size: 11px;
  color: #C8A951;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: hintBarSlide 0.4s ease;
}
@keyframes hintBarSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.cafe-hint-close {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  font-size: 13px; color: #C8A951;
  cursor: pointer; padding: 0 4px;
  line-height: 1;
}

/* ===========================
   アクションボタン バッジ
=========================== */
.action-badge-dot {
  position: absolute;
  top: 5px; right: 5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #E53935;
  border: 2px solid #FAF7F2;
  z-index: 6;
  animation: badgePulse 1.5s ease-in-out infinite;
}
.action-badge-new {
  position: absolute;
  top: 3px; right: 2px;
  background: #E8C547;
  color: #3A3020;
  font-size: 8px;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 6px;
  z-index: 6;
  white-space: nowrap;
  line-height: 1.3;
}

/* ===========================
   初来店ウェルカムバブル
=========================== */
.first-visit-badge {
  position: absolute;
  top: calc(var(--status-h) + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #FFF9E0;
  border: 1.5px solid #E8C547;
  border-radius: 18px;
  padding: 6px 16px;
  font-size: 12px;
  color: #C8A951;
  font-weight: bold;
  z-index: 36;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(232,197,71,0.25);
  animation: firstVisitBadge 3s ease forwards;
}
@keyframes firstVisitBadge {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.8); }
  12%  { opacity: 1; transform: translateX(-50%) scale(1.05); }
  20%  { transform: translateX(-50%) scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

/* ===========================
   マップ 雲エリア（未解放）
=========================== */
@keyframes mapCloudFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ============================================================
   TapSystem — タップインタラクション演出
============================================================ */
.tap-bubble {
  position: absolute;
  z-index: 80;
  pointer-events: none;
  background: #fff;
  border: 2.5px solid #FFD54F;
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: bold;
  color: #2C2C2C;
  white-space: nowrap;
  box-shadow: 0 3px 14px rgba(0,0,0,0.12);
  animation: tapBubbleIn 0.22s cubic-bezier(0.34,1.56,0.64,1),
             tapBubbleOut 0.38s ease 1.7s forwards;
}
.tap-glow {
  position: absolute;
  width: 72px; height: 72px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 74;
  animation: tapGlow 0.65s ease forwards;
}
.tap-ripple {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2.5px solid rgba(100,190,255,0.85);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 74;
  animation: tapRipple 0.9s ease forwards;
}
.tap-fish, .tap-bird, .tap-cloud {
  position: absolute;
  pointer-events: none;
  z-index: 76;
  font-size: 22px;
}
.tap-fish  { animation: tapFish  1.1s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.tap-bird  { animation: tapBird  1.3s ease forwards; }
.tap-cloud { animation: tapCloud 1.2s ease forwards; }
.tap-sunflash {
  position: absolute;
  width: 80px; height: 80px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 73;
  animation: tapSunFlash 0.85s ease forwards;
}
.tap-rain, .tap-leaf, .tap-smoke, .tap-petal, .tap-note {
  position: absolute;
  pointer-events: none;
  z-index: 76;
  font-size: 16px;
}
.tap-rain  { animation: tapRain  0.9s ease forwards; }
.tap-leaf  { animation: tapLeaf  1.1s ease forwards; }
.tap-smoke { font-size: 22px; animation: tapSmoke 1.15s ease forwards; }
.tap-petal { animation: tapPetal 1.05s ease forwards; }
.tap-note  { font-size: 20px;  animation: tapNote  1.3s ease forwards; }

@keyframes tapBubbleIn  {
  from { opacity:0; transform:translateY(10px) scale(0.75); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}
@keyframes tapBubbleOut { to { opacity:0; transform:translateY(-8px); } }
@keyframes tapGlow {
  0%   { opacity:1; transform:scale(0.4); }
  55%  { opacity:0.55; transform:scale(1.35); }
  100% { opacity:0;   transform:scale(2.2); }
}
@keyframes tapRipple {
  0%   { width:14px;  height:14px;  opacity:1; }
  100% { width:100px; height:100px; opacity:0; }
}
@keyframes tapFish {
  0%   { transform:translate(-50%,-50%) scale(0.5); opacity:0; }
  22%  { transform:translate(-50%,-65px) scale(1.15); opacity:1; }
  68%  { transform:translate(-50%,-35px) scale(1);   opacity:0.9; }
  100% { transform:translate(-50%,10px)  scale(0.6); opacity:0; }
}
@keyframes tapBird {
  0%   { transform:translate(0,0) rotate(-8deg);  opacity:1; }
  100% { transform:translate(190px,-95px) rotate(12deg); opacity:0; }
}
@keyframes tapCloud {
  0%   { transform:scale(0.6) translateX(0);    opacity:0.85; }
  100% { transform:scale(1.5) translateX(42px); opacity:0; }
}
@keyframes tapSunFlash {
  0%   { transform:scale(0.4); opacity:0; }
  22%  { transform:scale(1.3); opacity:0.88; }
  100% { transform:scale(2.8); opacity:0; }
}
@keyframes tapRain {
  0%   { transform:translateY(0);    opacity:1; }
  100% { transform:translateY(52px); opacity:0; }
}
@keyframes tapLeaf {
  0%   { transform:rotate(0deg)   translate(0,0);         opacity:1; }
  100% { transform:rotate(65deg)  translate(32px,48px);   opacity:0; }
}
@keyframes tapSmoke {
  0%   { transform:scale(0.35) translateY(0);    opacity:0.7; }
  100% { transform:scale(1.4)  translateY(-38px); opacity:0; }
}
@keyframes tapPetal {
  0%   { transform:translate(0,0) rotate(0deg);                 opacity:1; }
  100% { transform:translate(var(--tx),var(--ty)) rotate(200deg); opacity:0; }
}
@keyframes tapNote {
  0%   { transform:translate(0,0)    scale(0.55); opacity:0; }
  22%  { transform:translate(0,-28px) scale(1.15); opacity:1; }
  100% { transform:translate(12px,-82px) scale(0.85); opacity:0; }
}

/* ══════════════════════════════════════════════════
   リッチテキスト演出
   使い方: [big]叫ぶ[/big]  [shake]震える[/shake] など
══════════════════════════════════════════════════ */
/* サイズ系 */
.rt-big   { font-size: 1.42em; font-weight: bold; line-height: 1.15; }
.rt-huge  { font-size: 1.88em; font-weight: bold; line-height: 1.1;  }
.rt-loud  { font-size: 1.26em; font-weight: bold; letter-spacing: 0.07em; }
.rt-small { font-size: 0.75em; opacity: 0.68; letter-spacing: -0.01em; }

/* アニメ系 — すべて inline-block で transform を有効に */
.rt-shake  {
  display: inline-block;
  animation: rtShake 0.10s linear infinite;
}
.rt-wave   {
  display: inline-block;
  animation: rtWave 0.55s ease-in-out infinite;
  animation-delay: calc(var(--ri, 0) * 0.07s);
}
.rt-bounce {
  display: inline-block;
  animation: rtBounce 0.48s ease-in-out infinite;
  animation-delay: calc(var(--ri, 0) * 0.09s);
}
.rt-flash  {
  animation: rtFlash 0.36s steps(1) infinite;
}

@keyframes rtShake {
  0%   { transform: translate( 0px,  0px); }
  20%  { transform: translate(-2px,  1px); }
  40%  { transform: translate( 2px, -1px); }
  60%  { transform: translate(-1px,  2px); }
  80%  { transform: translate( 1px, -2px); }
  100% { transform: translate( 0px,  0px); }
}
@keyframes rtWave {
  0%, 100% { transform: translateY( 0px); }
  50%       { transform: translateY(-5px); }
}
@keyframes rtBounce {
  0%, 100% { transform: translateY( 0px); }
  35%       { transform: translateY(-7px); }
  65%       { transform: translateY(-3px); }
}
@keyframes rtFlash {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ══════════════════════════════════════════════════
   タップ探索スポット (Interactive Explore)
══════════════════════════════════════════════════ */
.iexplore-spot {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.4s ease, transform 0.4s ease;
  /* 長押し採取中にスマホの画面スクロール/ジェスチャーに化けるのを防ぐ */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* 探索シーン全体もドラッグ採取中のスクロールを抑止 */
#iexplore-container {
  touch-action: none;
}
.iexplore-spot.ispot-found {
  opacity: 0 !important;
  transform: scale(0.15) !important;
  pointer-events: none !important;
}
/* ドラッグ採取バースト（プチプチ感） */
.ispot-drag-hit {
  animation: ispotDragBurst 0.22s ease-out forwards !important;
}
@keyframes ispotDragBurst {
  0%   { transform: scale(1.0);  opacity: 1.0; }
  30%  { transform: scale(1.60); opacity: 0.9; }
  70%  { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(0.10); opacity: 0.0; }
}
.ispot-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: ispotPulse 2.0s ease-in-out infinite alternate;
}
.iexplore-rare .ispot-glow {
  animation: ispotRarePulse 1.1s ease-in-out infinite alternate;
  box-shadow: 0 0 14px rgba(255,210,50,0.75);
}
.iexplore-char .ispot-glow {
  animation: ispotCharPulse 1.6s ease-in-out infinite alternate;
  box-shadow: 0 0 10px rgba(255,245,180,0.65);
}
.ispot-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  pointer-events: none;
  user-select: none;
  animation: ispotIconFloat 2.3s ease-in-out infinite alternate;
}
.iexplore-rare .ispot-icon { font-size: 19px; }
.iexplore-char .ispot-icon { font-size: 17px; }

/* ══════════════════════════════════════════════════════════
   🌿 島の掲示板（カフェ画面の左下）
   ══════════════════════════════════════════════════════════ */
#cafe-bulletin-board {
  position: absolute;
  bottom: 14%;
  left: 8px;
  width: 56px;
  height: 64px;
  z-index: 8;
  cursor: pointer;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
  animation: bbHover 3.2s ease-in-out infinite;
}
@keyframes bbHover {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}
#cafe-bulletin-board:active { transform: translateY(2px) scale(0.96); }

#cafe-bulletin-board .bb-roof {
  position: absolute;
  top: 0; left: -4px; right: -4px;
  height: 12px;
  background: linear-gradient(180deg, #6B4423, #8B5E3C);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
#cafe-bulletin-board .bb-body {
  position: absolute;
  top: 12px; left: 0; right: 0;
  height: 38px;
  background: linear-gradient(180deg, #B8804A, #9C6936);
  border: 1.5px solid #5A3010;
  border-radius: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
}
#cafe-bulletin-board .bb-paper {
  flex: 1 1 calc(50% - 4px);
  height: 14px;
  background: #F5E8C8;
  border: 0.5px solid #C8A951;
  border-radius: 1px;
  position: relative;
}
#cafe-bulletin-board .bb-paper::before {
  content: '';
  position: absolute;
  top: 3px; left: 2px; right: 2px;
  height: 1.5px;
  background: rgba(120,80,40,0.4);
  border-radius: 1px;
  box-shadow: 0 3px 0 rgba(120,80,40,0.4),
              0 6px 0 rgba(120,80,40,0.4);
}
#cafe-bulletin-board .bb-post {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 14px;
  background: linear-gradient(180deg, #6B4423, #4A2E18);
  border-radius: 0 0 1px 1px;
}
#cafe-bulletin-board .bb-post-l { left: 6px; }
#cafe-bulletin-board .bb-post-r { right: 6px; }
#cafe-bulletin-board .bb-badge {
  display: none;
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B6B, #E63946);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3),
              0 0 0 2px rgba(255,255,255,0.85);
  animation: bbBadgePulse 1.6s ease-in-out infinite;
  z-index: 2;
}
@keyframes bbBadgePulse {
  0%,100% { transform: scale(1);    }
  50%     { transform: scale(1.15); }
}

/* ══════════════════════════════════════════════════════════
   📋 掲示板パネル
   ══════════════════════════════════════════════════════════ */
.bulletin-panel {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bulletin-panel .bp-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: bpFadeIn 0.25s ease;
}
@keyframes bpFadeIn { from { opacity: 0; } to { opacity: 1; } }
.bulletin-panel .bp-card {
  position: relative;
  width: 90%;
  max-width: 360px;
  max-height: 82%;
  background: #FAF3DC;
  border: 4px solid #6B4423;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: bpPopIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes bpPopIn {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.bulletin-panel .bp-header {
  background: linear-gradient(180deg, #8B5E3C, #6B4423);
  color: #FFF6D5;
  padding: 10px 16px 12px;
  position: relative;
  text-align: center;
  flex-shrink: 0;
}
.bulletin-panel .bp-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.bulletin-panel .bp-sub {
  font-size: 10px;
  color: rgba(255,246,213,0.65);
  letter-spacing: 0.1em;
  margin-top: 2px;
}
.bulletin-panel .bp-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.bulletin-panel .bp-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px 16px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0, transparent 14px,
      rgba(120,80,40,0.04) 14px, rgba(120,80,40,0.04) 15px);
}
.bulletin-panel .bp-section { margin-bottom: 14px; }
.bulletin-panel .bp-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #5A3010;
  border-bottom: 1.5px dashed #B8945C;
  padding-bottom: 4px;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.bulletin-panel .bp-empty {
  font-size: 11px;
  color: #9B8060;
  text-align: center;
  padding: 8px 0;
}
.bulletin-panel .bp-quest {
  background: #FFFBF0;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-left: 3px solid #E8C547;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.bulletin-panel .bp-quest-new      { border-left-color: #FF9933; }
.bulletin-panel .bp-quest-accepted { border-left-color: #66BB6A; }
.bulletin-panel .bp-quest-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.bulletin-panel .bp-quest-mark-new {
  background: linear-gradient(135deg, #FF9933, #E66622);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}
.bulletin-panel .bp-quest-mark-accepted {
  background: #66BB6A;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
}
.bulletin-panel .bp-quest-char {
  font-size: 11px;
  color: #5A3010;
  font-weight: 700;
}
.bulletin-panel .bp-quest-title {
  font-size: 13px;
  font-weight: 700;
  color: #3A2010;
  margin-bottom: 2px;
}
.bulletin-panel .bp-quest-hint {
  font-size: 10px;
  color: #7A6A50;
  line-height: 1.5;
}
.bulletin-panel .bp-news {
  font-size: 12px;
  color: #4A3520;
  padding: 5px 8px;
  background: rgba(255,255,255,0.55);
  border-radius: 6px;
  margin-bottom: 4px;
  border-left: 2px solid #B8945C;
}
.bulletin-panel .bp-completed-count {
  font-size: 12px;
  color: #5A3010;
  text-align: center;
  padding: 6px;
  background: rgba(232,197,71,0.15);
  border-radius: 6px;
}

/* 🌿 島の頼みごと「！」マーク */
.ispot-quest-mark {
  position: absolute;
  top: -10px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg,#FFE25C,#FF9933);
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25),
              0 0 0 2px rgba(255,255,255,0.85);
  text-shadow: 0 1px 2px rgba(180,80,0,0.4);
  pointer-events: none;
  z-index: 5;
  animation: questMarkBounce 1.4s ease-in-out infinite;
}
@keyframes questMarkBounce {
  0%,100% { transform: translateY(0)   scale(1);    }
  50%     { transform: translateY(-4px) scale(1.08); }
}

.ispot-pop {
  position: absolute;
  transform: translateX(-50%);
  background: rgba(255,249,225,0.97);
  color: #3a2210;
  font-size: 13px;
  font-weight: bold;
  padding: 5px 13px;
  border-radius: 16px;
  pointer-events: none;
  z-index: 120;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  animation: ispotPop 1.5s ease-out forwards;
}
.ispot-pop-rare {
  background: rgba(255,240,100,0.98);
  font-size: 15px;
  box-shadow: 0 0 16px rgba(255,210,50,0.70), 0 2px 10px rgba(0,0,0,0.18);
}
.ispot-particle {
  position: absolute;
  transform: translateX(-50%);
  font-size: 14px;
  pointer-events: none;
  z-index: 120;
  animation: ispotParticle 1.1s ease-out forwards;
}
.iexplore-hint {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,248,225,0.96);
  color: #3a2210;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 20px;
  border-radius: 20px;
  z-index: 130;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(0,0,0,0.18);
  animation: ispotHintIn 0.5s ease-out;
}

@keyframes ispotPulse {
  from { transform: scale(0.84); opacity: 0.60; }
  to   { transform: scale(1.16); opacity: 1.00; }
}
@keyframes ispotRarePulse {
  from { transform: scale(0.80); opacity: 0.72; box-shadow: 0 0 6px rgba(255,200,50,0.55); }
  to   { transform: scale(1.22); opacity: 1.00; box-shadow: 0 0 22px rgba(255,200,50,1.00); }
}
@keyframes ispotCharPulse {
  from { transform: scale(0.87); opacity: 0.68; }
  to   { transform: scale(1.13); opacity: 1.00; }
}
@keyframes ispotIconFloat {
  from { transform: translate(-50%, -44%); }
  to   { transform: translate(-50%, -56%); }
}
@keyframes ispotPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0px); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(-8px); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(-28px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-54px); }
}
@keyframes ispotParticle {
  0%   { opacity: 1; transform: translateX(-50%) translate(0,0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translate(var(--dx),var(--dy)) scale(0.3); }
}
@keyframes ispotHintIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ══════════════════════════════════════════════════
   会話システム改善 (Dialogue System v2)
══════════════════════════════════════════════════ */

/* 話者行（アバター + 名前） */
/* ══════════════════════════════════════════════════
   話者バッジ（メッセージウィンドウ上に浮く名札）
══════════════════════════════════════════════════ */
.msg-speaker-row {
  position: absolute;
  top: -40px;
  left: 14px;
  display: none;              /* JS が .visible を付けたら表示 */
  align-items: center;
  gap: 5px;
  background: var(--speaker-color, #A0865C);
  padding: 5px 14px 5px 8px;
  border-radius: 24px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.10);
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
}
.msg-speaker-row.visible {
  display: flex;
  animation: speakerPlateIn 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
}
/* バッジ下の▼ポインター */
.msg-speaker-row::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 18px;
  border: 8px solid transparent;
  border-top: 8px solid var(--speaker-color, #A0865C);
  border-bottom: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.12));
}
.msg-avatar {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
#message-speaker {
  font-family: var(--font-hand);
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
@keyframes speakerPlateIn {
  from { opacity: 0; transform: translateY(6px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ── 話者キャラのぷよんアニメ ─────────────────────── */
/* #scene-area svg g[data-char-id] の charPopIn（登場アニメ）より
   詳細度を上げないと上書きされて一度も再生されない */
.char-speak-bounce,
#scene-area svg g[data-char-id].char-speak-bounce {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: charSpeakBounce 0.38s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
@keyframes charSpeakBounce {
  0%   { transform: translateY(0)     scaleX(1)    scaleY(1);    }
  35%  { transform: translateY(-11px) scaleX(0.94) scaleY(1.07); }
  70%  { transform: translateY(-1px)  scaleX(1.03) scaleY(0.97); }
  100% { transform: translateY(0)     scaleX(1)    scaleY(1);    }
}

/* 上ボーダーを話者カラーに */
#message-window {
  border-top: 3px solid var(--speaker-color, var(--pablo-border));
  transition: border-top-color 0.25s ease;
}

/* スキップボタン（控えめ・右上） */
.msg-skip-btn {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: 3px 10px;
  font-size: 10px;
  font-family: var(--font-main);
  color: rgba(100,85,65,0.55);
  background: rgba(240,235,225,0.70);
  border: 1px solid rgba(180,160,130,0.35);
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: color 0.15s, background 0.15s, opacity 0.15s;
  z-index: 5;
}
.msg-skip-btn:active {
  color: rgba(100,85,65,0.9);
  background: rgba(220,210,195,0.90);
}

/* 会話中はナビ・SNS・掲示板等を薄く隠す */
#screen-game.in-dialogue #nav-normal,
#screen-game.in-dialogue #sns-hub,
#screen-game.in-dialogue .upgrade-banner,
#screen-game.in-dialogue #explore-nav-bar,
#screen-game.in-dialogue #post-explore-btns,
#screen-game.in-dialogue .cafe-hint-bar {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
/* 掲示板は完全非表示（opacity だと animation で透ける場合があるため） */
#screen-game.in-dialogue #cafe-bulletin-board {
  display: none !important;
}
/* ステータスバーはそのまま（情報として有用） */

/* メッセージウィンドウのフォントサイズをやや大きく・余裕を持たせる */
#message-text {
  font-family: var(--font-hand);
  font-size: 15px;
  line-height: 1.8;
  padding-right: 60px; /* スキップボタンと重ならないように */
}
/* message-nextを小さく控えめに */
#message-next.tap-indicator {
  margin-top: 4px;
}
.tap-next-label {
  font-size: 9px;
}
.msg-chevron {
  font-size: 11px;
}

/* ══════════════════════════════════════════════════
   📷 カメラ・思い出写真システム強化
══════════════════════════════════════════════════ */

/* ステータスバーのカメラボタン */
.status-camera-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 8px;
  transition: transform 0.12s, background 0.12s;
  line-height: 1;
}
.status-camera-btn:active {
  transform: scale(0.82);
  background: rgba(0,0,0,0.08);
}

/* カメラモードオーバーレイ（ファインダー風） */
.camera-mode-overlay {
  position: absolute;
  inset: 0;
  z-index: 90;
  opacity: 0;
  background: rgba(0,0,0,0.18);
  cursor: crosshair;
  transition: opacity 0.25s;
}
.cam-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: rgba(255,255,255,0.9);
  border-style: solid;
}
.cam-tl { top: 18px; left: 18px; border-width: 3px 0 0 3px; }
.cam-tr { top: 18px; right: 18px; border-width: 3px 3px 0 0; }
.cam-bl { bottom: 18px; left: 18px; border-width: 0 0 3px 3px; }
.cam-br { bottom: 18px; right: 18px; border-width: 0 3px 3px 0; }
.cam-hint {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  font-weight: bold;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  white-space: nowrap;
  letter-spacing: 0.05em;
  pointer-events: none;
}
.cam-close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  z-index: 5;
}

/* ポラロイドポップアップ – Day ラベル */
.photo-popup-day {
  font-size: 10px;
  color: rgba(80,60,40,0.55);
  text-align: center;
  margin-top: 2px;
  font-family: var(--font-hand);
}

/* ══ コルクボード アルバム ══ */
.photo-album-content {
  background: #c8a87a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(0,0,0,0.07)'/%3E%3C/svg%3E");
  padding: 0 !important;
  overflow-y: auto !important;
  display: block !important;
}
.photo-album-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  background: rgba(0,0,0,0.18);
}
.photo-album-title {
  font-size: 14px;
  font-weight: bold;
  color: #fff9f0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  letter-spacing: 0.08em;
}
.photo-album-count {
  font-size: 12px;
  color: rgba(255,245,220,0.8);
  font-weight: 600;
}
.photo-corkboard {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 12px 8px 16px;
  justify-content: center;
}

/* ポラロイドカード（共通） */
.photo-polaroid {
  position: relative;
  width: 130px;
  background: #fff;
  border-radius: 3px;
  padding: 8px 8px 24px;
  margin: 10px 8px;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.35), 1px 1px 3px rgba(0,0,0,0.18);
  transform: rotate(var(--photo-tilt, 0deg));
  cursor: default;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  /* 画鋲 */
}
.photo-polaroid::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8888, #cc2222);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  z-index: 2;
}
.photo-polaroid-taken {
  cursor: pointer;
}
.photo-polaroid-taken:active {
  transform: rotate(var(--photo-tilt, 0deg)) scale(1.06);
  box-shadow: 6px 6px 18px rgba(0,0,0,0.45);
  z-index: 10;
}

/* 写真部分（絵文字 or 画像） */
.photo-polaroid-img {
  width: 100%;
  aspect-ratio: 1;
  background: #f0ede8;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  overflow: hidden;
}
.photo-polaroid-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* キャプション（手書き風） */
.photo-polaroid-caption {
  font-size: 9px;
  font-family: var(--font-hand);
  color: #3a2c1a;
  text-align: center;
  margin-top: 5px;
  line-height: 1.4;
  white-space: pre-wrap;
}
.photo-polaroid-day {
  font-size: 8px;
  color: rgba(80,60,40,0.50);
  text-align: center;
  margin-top: 2px;
}

/* シルエット写真 */
.photo-polaroid-silhouette {
  opacity: 0.65;
  cursor: default;
}
.photo-sil-img {
  background: #c8b89a;
  position: relative;
}
.photo-sil-q {
  font-size: 36px;
  color: rgba(120,95,65,0.55);
  font-weight: bold;
}
.photo-sil-caption {
  font-size: 8px;
  color: rgba(80,65,45,0.60);
}

/* 自由撮影セクション */
.photo-album-free-section {
  padding: 0 0 16px;
}
.photo-album-free-title {
  font-size: 12px;
  font-weight: bold;
  color: rgba(255,245,220,0.85);
  text-align: center;
  padding: 8px 0 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* 拡大表示 */
.photo-full-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-full-card {
  background: #fff;
  border-radius: 4px;
  padding: 14px 14px 32px;
  width: 200px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  animation: polaroidPopup 0.4s cubic-bezier(.22,.68,0,1.3);
}
.photo-full-img {
  width: 100%;
  aspect-ratio: 1;
  background: #f0ede8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  overflow: hidden;
}
.photo-full-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.photo-full-memo {
  font-size: 11px;
  font-family: var(--font-hand);
  color: #3a2c1a;
  text-align: center;
  margin-top: 8px;
  line-height: 1.5;
}
.photo-full-day {
  font-size: 9px;
  color: rgba(80,60,40,0.50);
  text-align: center;
  margin-top: 4px;
}

/* ============================================================
   ちょきシステム
============================================================ */

/* 黒い残像（右→左へ走り抜ける） */
@keyframes chokiShadowRun {
  0%   { left: calc(100% + 80px); opacity: 0; }
  8%   { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { left: -80px; opacity: 0; }
}
.choki-shadow {
  position: absolute;
  bottom: 20%;
  width: 64px;
  height: 96px;
  pointer-events: none;
  overflow: visible;
  z-index: 30;
  filter: brightness(0) opacity(0.82);
  animation: chokiShadowRun 1.3s ease-in-out forwards;
}
.choki-shadow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

/* ちょき命名画面 */
.choki-naming-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: rgba(10,10,10,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
}
.choki-naming-box {
  background: #FAF7F2;
  border-radius: 24px;
  padding: 32px 24px 28px;
  width: min(340px, 90vw);
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.30);
}
.choki-naming-emoji {
  width: 80px;
  height: 80px;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  margin: 0 auto 12px;
  filter: brightness(0) opacity(0.82);
}
.choki-naming-title {
  color: #3A3020;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 6px;
}
.choki-naming-sub {
  color: #7A6A4A;
  font-size: 13px;
  margin-bottom: 18px;
  line-height: 1.5;
}
.choki-naming-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #E8C547;
  border-radius: 12px;
  font-size: 18px;
  text-align: center;
  background: #FFFDF7;
  color: #3A3020;
  box-sizing: border-box;
  margin-bottom: 16px;
  outline: none;
}
.choki-naming-input:focus {
  border-color: #C8A951;
  box-shadow: 0 0 0 3px rgba(200,169,81,0.18);
}
.choki-naming-btn {
  background: linear-gradient(135deg, #1A1A1A, #3A3020);
  color: #FFD54F;
  border: none;
  border-radius: 14px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  letter-spacing: 0.05em;
}
.choki-naming-btn:active {
  opacity: 0.85;
}

/* ちょきごはんミニゲーム */
/* ── ちょきごはんミニゲーム ── */
@keyframes chokiMgShake {
  0%,100% { transform: scale(1) translateX(0); }
  20%     { transform: scale(1) translateX(-8px) rotate(-3deg); }
  40%     { transform: scale(1) translateX(8px) rotate(3deg); }
  60%     { transform: scale(1) translateX(-6px) rotate(-2deg); }
  80%     { transform: scale(1) translateX(6px) rotate(2deg); }
}
.choki-mg-shake {
  animation: chokiMgShake 0.35s ease-in-out infinite !important;
}
@keyframes chokiMgFeedBtn {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.93); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
#choki-mg-feed-btn:active {
  animation: chokiMgFeedBtn 0.15s ease;
}

.choki-feed-overlay {
  position: absolute;
  inset: 0;
  z-index: 190;
  background: rgba(10,10,10,0.78);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.choki-feed-panel {
  background: #FAF7F2;
  border-radius: 24px 24px 0 0;
  padding: 24px 20px 40px;
  width: 100%;
  max-width: 440px;
}
.choki-feed-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #E8E0D5;
  margin: 0 auto 16px;
}
.choki-feed-title {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #3A3020;
  margin-bottom: 4px;
}
.choki-feed-heart {
  text-align: center;
  font-size: 22px;
  margin-bottom: 20px;
  letter-spacing: 2px;
}
.choki-feed-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.choki-feed-item {
  background: #fff;
  border: 1.5px solid #E8E0D5;
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.choki-feed-item:active {
  transform: scale(0.93);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.choki-feed-item-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 4px;
}
.choki-feed-item-name {
  font-size: 11px;
  color: #7A6A4A;
}
.choki-feed-item-count {
  font-size: 11px;
  color: #B07A3A;
  font-weight: bold;
}
.choki-feed-close {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px solid #E8E0D5;
  background: #fff;
  color: #888;
  font-size: 14px;
  cursor: pointer;
}

/* ちょきハートアップアニメ */
@keyframes chokiHeartPop {
  0%   { transform: scale(0.5) translateY(0); opacity: 1; }
  60%  { transform: scale(1.3) translateY(-24px); opacity: 1; }
  100% { transform: scale(1.0) translateY(-44px); opacity: 0; }
}
.choki-heart-pop {
  position: absolute;
  font-size: 28px;
  pointer-events: none;
  z-index: 250;
  animation: chokiHeartPop 0.9s ease-out forwards;
}

/* ちょき探索サポート（影が走る演出） */
@keyframes chokiExploreRun {
  0%   { left: 0%;   opacity: 0; }
  10%  { opacity: 0.7; }
  50%  { left: 40%;  opacity: 0.7; }
  80%  { opacity: 0.5; }
  100% { left: 80%;  opacity: 0; }
}
.choki-explore-shadow {
  position: absolute;
  bottom: 24%;
  width: 28px;
  height: 34px;
  pointer-events: none;
  z-index: 25;
  filter: opacity(0.9);
  animation: chokiExploreRun 2.2s ease-in-out forwards;
}
.choki-explore-shadow img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 歩行サイクル：2枚を交互に表示 */
@keyframes chokiWalkA {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes chokiWalkB {
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: 1; }
}
.choki-walk-a { animation: chokiWalkA 0.32s steps(1, end) infinite; }
.choki-walk-b { animation: chokiWalkB 0.32s steps(1, end) infinite; }

/* ============================================================
   図鑑登録ポップアップ
============================================================ */
.bestiary-unlock-popup {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 310;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,253,245,0.97);
  border: 1.5px solid #C8A951;
  border-radius: 14px;
  padding: 9px 14px 9px 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  font-size: 13px;
  color: #3A3020;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px) scale(0.94);
  transition: opacity 0.28s ease, transform 0.28s ease;
  max-width: 210px;
  line-height: 1.4;
}
.bestiary-unlock-popup.bup-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.bup-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.bup-text b {
  color: #C8A951;
}

/* ============================================================
   ◆◆◆ 統一ボタンテーマ（pill型・4px影・押したら沈む）◆◆◆
   角丸999px / min-height56px / box-shadow 0 4px 0 #0002
   押下時：translateY(2px) & box-shadow:none
============================================================ */

/* カラートークン（DESIGN.md準拠・クレイCTA） */
:root {
  --btn-action-bg:   #F0B838;  /* ゴールド主アクション */
  --btn-action-text: #5A3E10;
  --btn-confirm-bg:   #6BAE5C;  /* 決定グリーン */
  --btn-confirm-text: #ffffff;
  --btn-cancel-bg:   #EAD9B5;  /* ベージュ戻る */
  --btn-cancel-text: #5A4632;
  --btn-danger-bg:   #E0796A;  /* 危険コーラル */
  --btn-danger-text: #ffffff;
  /* クレイ立体シャドウ */
  --btn-shadow:      0 4px 0 rgba(120,90,40,0.30), 0 6px 14px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.92), inset 0 -3px 6px rgba(160,120,60,0.10);
  --btn-radius:      999px;
  --btn-min-h:       56px;
  --btn-font-size:   16px;
}

/* ── 基底：あらゆるアクションボタンに共通で適用 ── */
.btn,
.choice-btn,
.cafe-sheet-open-btn,
.cafe-sheet-action-btn,
.btn-use-tooth,
.btn-record,
.btn-relax,
.lemonade-tut-craft-btn,
.skip-yes-btn,
.skip-no-btn,
.bup-btn,
.btn-pill {
  border-radius: var(--btn-radius) !important;
  min-height: var(--btn-min-h);
  padding: 12px 22px;
  border: 2.5px solid rgba(255,255,255,0.85) !important;
  font-family: var(--font-main);
  font-size: var(--btn-font-size) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s, opacity 0.2s;
  box-shadow: var(--btn-shadow) !important;
  line-height: 1.2;
  text-align: center;
  color: var(--btn-action-text);
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.45) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 75%, rgba(150,110,40,0.12) 0%, transparent 50%),
    var(--btn-action-bg);
  -webkit-tap-highlight-color: transparent;
}
.btn:active,
.choice-btn:active,
.cafe-sheet-open-btn:active,
.cafe-sheet-action-btn:active,
.btn-use-tooth:active,
.btn-record:active,
.btn-relax:active,
.lemonade-tut-craft-btn:active,
.skip-yes-btn:active,
.skip-no-btn:active,
.bup-btn:active,
.btn-pill:active {
  transform: translateY(3px) !important;
  filter: brightness(0.94);
  /* 沈み込むクレイ感（影だけ薄く残す） */
  box-shadow:
    0 1px 0 rgba(120,90,40,0.30),
    0 2px 6px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
.btn:disabled,
.choice-btn:disabled,
.cafe-sheet-open-btn:disabled,
.cafe-sheet-action-btn:disabled,
.btn-pill:disabled {
  opacity: 0.45;
  pointer-events: none;
  box-shadow: none !important;
  transform: none !important;
}

/* ── プライマリ：アクション系（作る・育てる・探索など）──
   #E8C547 (黄) / text: #2C2C2C */
.btn-primary,
.cafe-sheet-open-btn,
.cafe-sheet-action-btn,
.btn-relax,
.lemonade-tut-craft-btn,
.bup-btn {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.45) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 75%, rgba(150,110,40,0.12) 0%, transparent 50%),
    var(--btn-action-bg) !important;
  color: var(--btn-action-text) !important;
}
.cafe-sheet-open-btn .cafe-sheet-open-label,
.cafe-sheet-action-btn .cafe-action-label {
  color: var(--btn-action-text) !important;
  font-weight: 700 !important;
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* ── 決定系：はい・進む・購入 ──
   #5BB98C (緑) / text: white */
.btn-confirm,
.skip-yes-btn,
.btn-use-tooth {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.40) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 75%, rgba(30,80,30,0.15) 0%, transparent 50%),
    var(--btn-confirm-bg) !important;
  color: var(--btn-confirm-text) !important;
}

/* ── キャンセル系：もどる・やめる ──
   #F0EDE8 (ベージュ) / text: #2C2C2C */
.btn-secondary,
.btn-cancel,
.skip-no-btn,
.choice-btn {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.55) 0%, transparent 45%),
    var(--btn-cancel-bg) !important;
  color: var(--btn-cancel-text) !important;
}

/* choice-btn は左寄せレイアウトを維持（ボーダーはクレイ白縁を残す） */
.choice-btn {
  text-align: left !important;
}

/* ── 危険（セーブデータ削除など）── */
.btn-danger {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.38) 0%, transparent 45%),
    var(--btn-danger-bg) !important;
  color: var(--btn-danger-text) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* ── cafe-sheet-action-btn は縦積み（アイコン + ラベル）を維持 ── */
.cafe-sheet-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  padding: 10px 6px;
}
.cafe-sheet-action-btn .cafe-action-icon { font-size: 24px; line-height: 1; }

.cafe-sheet-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cafe-sheet-open-btn .cafe-sheet-open-icon { font-size: 22px; }
.cafe-sheet-open-btn .cafe-sheet-open-label { font-size: 16px; }

/* ── 録音ボタン：録音中はアクセント色を維持 ── */
.btn-record.recording {
  background: #E57373 !important;
  color: #fff !important;
}

/* ── 「戻る」矢印ボタン（.btn-back）は小型アイコンなので独自ルール ── */
.btn-back {
  min-height: 40px;
  width: 40px;
  height: 40px;
  border-radius: 999px !important;
  background: var(--btn-cancel-bg) !important;
  color: var(--btn-cancel-text) !important;
  box-shadow: var(--btn-shadow) !important;
  font-weight: 700;
  font-size: 18px;
  border: none !important;
  padding: 0 !important;
}
.btn-back:active {
  transform: translateY(2px);
  box-shadow: none !important;
}

/* ── メニューナビ（下部のカフェ/探索タブ）：pill化 ── */
.bottom-nav {
  gap: 12px;
  padding: 8px 16px 12px;
}
.menu-btn {
  flex: 1;
  min-height: 56px;
  border-radius: 999px !important;
  background: var(--btn-cancel-bg);
  box-shadow: var(--btn-shadow);
  gap: 2px;
  padding: 8px 0;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
  border: none;
}
.menu-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}
.menu-btn.active {
  background: var(--btn-action-bg);
}
.menu-btn.active .menu-label { color: var(--btn-action-text); }
.menu-btn .menu-label { font-weight: 700; font-size: 11px; }

/* ── skip-modal ボタンの並びを pill 対応に ── */
.skip-modal-btns {
  display: flex;
  gap: 10px;
}
.skip-yes-btn, .skip-no-btn {
  flex: 1;
  font-size: 14px !important;
}

/* グレードアップバナーは内部にボタンを持つ場合あり */
.upgrade-banner button,
.upgrade-banner .bup-btn {
  background: var(--btn-action-bg) !important;
  color: var(--btn-action-text) !important;
  border-radius: 999px !important;
  box-shadow: var(--btn-shadow) !important;
  font-weight: 700 !important;
  min-height: 44px;
}
.upgrade-banner button:active,
.upgrade-banner .bup-btn:active {
  transform: translateY(2px);
  box-shadow: none !important;
}

/* ══════════════════════════════════════
   Shop Panel — slide-up detail sheet
══════════════════════════════════════ */
.shop-detail-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.shop-detail-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.shop-detail-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 24px 24px 0 0;
  z-index: 21;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 32px;
  gap: 14px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 78vh;
  overflow-y: auto;
}
.shop-detail-sheet.open {
  transform: translateY(0);
}

/* ===========================
   水やりミニゲーム
=========================== */
@keyframes wgDrop {
  0%   { transform: translateX(-50%) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) translateY(65px); opacity: 0; }
}

/* ===========================
   バケツキャッチ：大物ドロップ
=========================== */
.raindrop-big {
  font-size: 34px !important;
  filter: drop-shadow(0 0 6px #FF6B00);
}

/* ===========================
   入れ歯シューティング
=========================== */
#denture-overlay canvas {
  pointer-events: none;
}

/* ===========================
   好感度アップ ハート浮遊
=========================== */
@keyframes heartFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  20%  { opacity: 1; transform: translateY(calc(var(--heart-dy) * 0.2)) scale(1.1); }
  80%  { opacity: 0.7; transform: translateY(calc(var(--heart-dy) * 0.85)) scale(1.0); }
  100% { opacity: 0; transform: translateY(var(--heart-dy)) scale(0.8); }
}

/* 好感度ゲインフロート（+1 💛 名前） */
@keyframes affinityGainFloat {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.7); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1.12); }
  35%  { transform: translateX(-50%) translateY(-4px) scale(1); }
  85%  { opacity: 1; transform: translateX(-50%) translateY(-44px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-80px) scale(0.95); }
}

/* ===========================
   探索 残数カウンター
=========================== */
#iexplore-counter {
  font-family: var(--font-hand);
  transition: background 0.3s ease, transform 0.15s ease;
}
#iexplore-counter.iexplore-counter-pop {
  animation: counterPop 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes counterPop {
  0%   { transform: translateX(-50%) scale(1); }
  45%  { transform: translateX(-50%) scale(1.20); }
  100% { transform: translateX(-50%) scale(1); }
}

/* 残り2個以下：常時ぴょこぴょこ */
#iexplore-counter.iexplore-counter-low {
  animation: counterPop 0.28s cubic-bezier(0.34,1.56,0.64,1), counterBob 1.4s ease-in-out 0.3s infinite;
  box-shadow: 0 2px 12px rgba(255,180,0,0.35) !important;
}
@keyframes counterBob {
  0%,100% { transform: translateX(-50%) scale(1) translateY(0); }
  50%     { transform: translateX(-50%) scale(1.05) translateY(-3px); }
}

/* 残り1個：プルプル震えて光る */
#iexplore-counter.iexplore-counter-final {
  animation: counterPop 0.28s cubic-bezier(0.34,1.56,0.64,1), counterShake 0.45s ease-in-out 0.3s infinite, counterGlow 1.2s ease-in-out infinite;
  font-size: 14px !important;
  box-shadow: 0 4px 16px rgba(255,140,0,0.55) !important;
}
@keyframes counterShake {
  0%,100% { transform: translateX(-50%) scale(1.05) rotate(-2deg); }
  50%     { transform: translateX(-50%) scale(1.05) rotate( 2deg); }
}
@keyframes counterGlow {
  0%,100% { box-shadow: 0 4px 16px rgba(255,140,0,0.55); }
  50%     { box-shadow: 0 4px 22px rgba(255,180,0,0.85), 0 0 14px rgba(255,200,80,0.6); }
}

/* 全部見つけた：金色グラデでぴょん */
#iexplore-counter.iexplore-counter-done {
  animation: counterDone 0.6s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 6px 22px rgba(255,180,0,0.55) !important;
}
@keyframes counterDone {
  0%   { transform: translateX(-50%) scale(0.6); opacity: 0.4; }
  60%  { transform: translateX(-50%) scale(1.25); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); }
}

/* ===========================
   夜の暗転オーバーレイ
=========================== */
#scene-area.time-night::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 30, 0.38);
  pointer-events: none;
  z-index: 5;
  animation: nightFadeIn 2.5s ease forwards;
}
@keyframes nightFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===========================
   カフェステータス画面
=========================== */
.cafe-status-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 16px;
  background: linear-gradient(180deg, #F0F7EE 0%, #FAFFF8 100%);
  min-height: 100%;
}

.cs-cafe-block {
  text-align: center;
  padding: 18px 16px 14px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  border: 1.5px solid #D5E8CB;
}
.cs-cafe-name {
  font-size: 22px;
  font-weight: bold;
  color: #3A6B35;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.cs-cafe-grade {
  font-size: 12px;
  color: #7A9E74;
  letter-spacing: 0.5px;
}

.cs-stats-block {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  border: 1.5px solid #D5E8CB;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cs-stat-label {
  font-size: 13px;
  color: #5A7A55;
}
.cs-stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #3A6B35;
}

.cs-najimi-name {
  font-size: 11px;
  color: #7A9E74;
  text-align: right;
  margin-top: -6px;
}

.cs-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cs-progress-bar {
  flex: 1;
  height: 8px;
  background: #E8F0E5;
  border-radius: 4px;
  overflow: hidden;
}
.cs-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #66BB6A, #43A047);
  border-radius: 4px;
  transition: width 0.5s ease;
}
.cs-progress-label {
  font-size: 10px;
  color: #7A9E74;
  white-space: nowrap;
}

.cs-records-block {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  border: 1.5px solid #D5E8CB;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-record-title {
  font-size: 11px;
  font-weight: bold;
  color: #7A9E74;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cs-settings-btn {
  margin-top: 4px;
  width: 100%;
  font-size: 14px !important;
}

/* ===========================
   なじみLvアップバナー
=========================== */
.najimi-lv-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #2E7D32, #43A047);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 16px 28px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 8px 28px rgba(46,125,50,0.5);
  z-index: 300;
  pointer-events: none;
  animation: najimiLvBannerIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
  white-space: nowrap;
}
.najimi-lv-banner-sub {
  display: block;
  font-size: 13px;
  font-weight: normal;
  opacity: 0.85;
  margin-top: 4px;
}
.najimi-lv-banner-out {
  animation: najimiLvBannerOut 0.4s ease forwards !important;
}
@keyframes najimiLvBannerIn {
  from { opacity: 0; transform: translate(-50%, -60%) scale(0.7); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes najimiLvBannerOut {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -44%) scale(0.9); }
}

/* ===========================
   １日の終わりの手書きメモ
=========================== */
@keyframes memoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes memoSlideUp {
  from { transform: translateY(72px); opacity: 0.4; }
  to   { transform: translateY(0);    opacity: 1; }
}

.day-memo-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  background: rgba(42,32,21,0.58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: memoFadeIn 0.32s ease;
  cursor: pointer;
}

.day-memo-paper {
  width: 100%;
  animation: memoSlideUp 0.42s cubic-bezier(0.34,1.18,0.6,1);
}

/* スパイラルバインド（上部リング） */
.memo-binding {
  display: flex;
  justify-content: space-around;
  padding: 0 20px;
  margin-bottom: -10px;
  position: relative;
  z-index: 2;
}
.memo-binding-ring {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3.5px solid #7A6040;
  background: #2A2015;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
}

/* ページ本体（罫線ノート） */
.memo-page {
  background: #FFFEF2;
  border-radius: 14px 14px 0 0;
  padding: 22px 22px 10px;
  position: relative;
  overflow: hidden;
  background-image:
    repeating-linear-gradient(
      transparent,
      transparent 31px,
      rgba(130,155,210,0.18) 31px,
      rgba(130,155,210,0.18) 32px
    ),
    linear-gradient(180deg, #FFFEF2 0%, #FFFCE6 100%);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
}

/* 赤い余白線 */
.memo-page::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 52px;
  width: 1.5px;
  background: rgba(215,110,110,0.28);
  pointer-events: none;
}

/* コーヒーカップの染み（薄い装飾） */
.memo-page::after {
  content: '';
  position: absolute;
  top: 16px; right: 20px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(160,120,60,0.13);
  box-shadow: 0 0 0 6px rgba(160,120,60,0.05);
  pointer-events: none;
}

.memo-header-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 8px;
  padding-left: 2px;
}

.memo-date-label {
  font-size: 10px;
  color: rgba(160,115,50,0.60);
  letter-spacing: 0.18em;
  font-family: 'Georgia', serif;
  margin-bottom: 3px;
}

.memo-day-number {
  font-size: 38px;
  font-weight: 900;
  color: #221408;
  font-family: 'Daruma Drop One', 'Georgia', serif;
  line-height: 1;
  letter-spacing: 0.02em;
}

.memo-weather-icon {
  font-size: 24px;
  margin-left: auto;
  margin-right: 52px; /* 染みとかぶらない */
  margin-bottom: 6px;
}

.memo-hr {
  border: none;
  border-top: 1px dashed rgba(180,145,70,0.32);
  margin: 8px 0 6px;
}

.memo-section-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(155,115,50,0.65);
  margin-bottom: 2px;
  padding-left: 2px;
  font-family: 'Georgia', serif;
}

.memo-text-line {
  font-size: 15px;
  color: #1E1208;
  line-height: 2.07; /* 32px罫線に合わせる */
  padding-left: 4px;
  font-family: var(--font-main);
}

.memo-text-line.sub {
  font-size: 13px;
  color: rgba(50,30,5,0.65);
}

/* フォーカスの付箋コメント */
.memo-focus-sticky {
  margin-top: 14px;
  background: rgba(255,238,120,0.62);
  border-radius: 4px 16px 16px 4px;
  border-left: 4px solid rgba(220,190,50,0.55);
  padding: 10px 14px 10px 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-shadow: 2px 3px 10px rgba(170,140,0,0.13), -1px 1px 0 rgba(255,255,255,0.6);
}

.memo-focus-cat {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}

.memo-focus-words {
  font-size: 14px;
  color: #4A3200;
  line-height: 1.65;
  font-family: var(--font-main);
}

.memo-close-hint {
  text-align: center;
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  font-size: 11px;
  color: rgba(155,120,60,0.50);
  letter-spacing: 0.14em;
}

/* ═══════════════════════════════════════
   第三章 石板パズル（ruins_chapter3）
═══════════════════════════════════════ */
@keyframes ruinsParticle {
  0%   { transform: translateY(0) scale(1);   opacity: 0.7; }
  50%  { transform: translateY(-24px) scale(1.3); opacity: 1; }
  100% { transform: translateY(-48px) scale(0.6); opacity: 0; }
}
@keyframes ruinsShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-4px) rotate(-0.4deg); }
  40%     { transform: translateX(4px)  rotate(0.4deg); }
  60%     { transform: translateX(-3px) rotate(-0.3deg); }
  80%     { transform: translateX(3px)  rotate(0.3deg); }
}
@keyframes ruinsGoldFlash {
  0%   { opacity: 0; }
  40%  { opacity: 0.75; }
  100% { opacity: 0; }
}
@keyframes tileCorrect {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.ruins-puzzle-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: radial-gradient(ellipse at 50% 30%, #2A1F0F 0%, #0E0A06 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.ruins-tile {
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ruins-tile.selected {
  background: rgba(255,200,80,0.25) !important;
  border-color: #FFD54F !important;
  box-shadow: 0 0 18px rgba(255,200,80,0.4);
}
.ruins-tile.correct {
  animation: tileCorrect 0.35s ease;
  background: rgba(80,200,100,0.25) !important;
  border-color: #66BB6A !important;
}

/* ═══════════════════════════════════════
   第三章 サニーバーガー料理ミニゲーム
═══════════════════════════════════════ */
@keyframes burgerSuccess {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.2) rotate(-8deg); }
  60%  { transform: scale(1.1) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes burgerBounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
@keyframes slideUpSheet {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.burger-cooking-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: radial-gradient(ellipse at 50% 40%, #FFF9E6 0%, #F5E8CC 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.burger-tap-btn {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 35% 35%, #FFD700, #FF9800);
  box-shadow: 0 4px 20px rgba(255,150,0,0.45);
  transition: transform 0.1s;
}
.burger-tap-btn:active {
  transform: scale(0.88);
}
.burger-seq-btn {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: rgba(255,255,255,0.85);
  border: 2px solid rgba(0,0,0,0.10);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.15s;
}

/* ══════════════════════════════════════
   掲示板システム
══════════════════════════════════════ */
.board-badge-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  background: #E53935;
  border-radius: 50%;
  display: none;
}
.board-overlay {
  position: absolute;
  inset: 0;
  z-index: 120;
  overflow-y: auto;
  background: rgba(42, 22, 6, 0.96);
  -webkit-overflow-scrolling: touch;
}
.board-container {
  padding: 16px 12px 88px;
  max-width: 400px;
  margin: 0 auto;
}
.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
}
.board-title { font-size: 16px; font-weight: bold; color: #FFD54F; }
.board-close-btn {
  background: none; border: none;
  font-size: 22px; color: #bbb;
  cursor: pointer; padding: 4px 8px;
}
.board-section-title {
  font-size: 10px;
  color: #FFD54F;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 18px 0 10px;
  border-bottom: 1px solid rgba(255,213,79,0.2);
  padding-bottom: 6px;
}
.board-news-card {
  background: linear-gradient(135deg, #FFF8DC, #FFF0BE);
  border-radius: 5px;
  padding: 10px 14px;
  margin-bottom: 8px;
  position: relative;
  box-shadow: 2px 3px 7px rgba(0,0,0,0.4);
}
.board-news-text {
  font-size: 12px;
  color: #5D4037;
  line-height: 1.85;
  white-space: pre-line;
  font-family: 'FuiFont', sans-serif;
}
.board-news-footer {
  font-size: 10px;
  color: #A1887F;
  text-align: right;
  margin-top: 4px;
}
.board-new-badge {
  position: absolute;
  top: -5px; right: 10px;
  background: #E53935;
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 8px;
}
.board-memo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}
.board-memo-card {
  border-radius: 4px;
  padding: 10px 10px 14px;
  position: relative;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.45);
  transition: transform 0.12s;
}
.board-memo-card.tappable { cursor: pointer; }
.board-memo-card.tappable:active { transform: scale(0.95) !important; }
.board-pin {
  width: 11px; height: 11px;
  border-radius: 50%;
  position: absolute;
  top: -5px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
  z-index: 1;
}
.board-memo-text {
  font-size: 11px;
  color: #4E342E;
  line-height: 1.75;
  white-space: pre-line;
  font-family: 'FuiFont', sans-serif;
}
.board-memo-author {
  font-size: 10px;
  color: #8D6E63;
  text-align: right;
  margin-top: 6px;
  font-style: italic;
}
.board-quest-card {
  background: #FFFDE7;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  position: relative;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.3);
  border-left: 3px solid #FFB300;
}
.board-quest-card.accepted { border-left-color: #29B6F6; background: #F3FBFF; }
.board-quest-card.done     { border-left-color: #66BB6A; background: #F1F8E9; opacity: 0.82; }
.board-quest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.board-quest-char { font-size: 12px; font-weight: bold; color: #5D4037; }
.board-quest-status {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 8px;
  font-weight: bold;
}
.board-quest-status.available { background: #FFF9C4; color: #F57F17; }
.board-quest-status.accepted  { background: #E1F5FE; color: #0277BD; }
.board-quest-status.done      { background: #E8F5E9; color: #2E7D32; }
.board-quest-text {
  font-size: 12px;
  color: #6D4C41;
  line-height: 1.75;
  white-space: pre-line;
  font-family: 'FuiFont', sans-serif;
}
.board-quest-hint {
  font-size: 10px;
  color: #90A4AE;
  margin-top: 5px;
  line-height: 1.6;
}
.board-done-stamp {
  position: absolute;
  bottom: 8px; right: 10px;
  font-size: 20px;
  opacity: 0.45;
  transform: rotate(12deg);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════
   リッチUI v1 — メッセージ / 選択肢 / ステータス / ナビ
   (v113)
══════════════════════════════════════════════════ */

/* ─── メッセージウィンドウ: 温かみカード ─── */
#message-window {
  background: linear-gradient(170deg, #FFFEFB 0%, #FFF8EC 100%);
  box-shadow:
    0 -8px 40px rgba(60,40,20,0.10),
    0 -2px  8px rgba(60,40,20,0.06),
    inset 0 1px 0 rgba(255,255,255,0.80);
  padding: 16px 20px 30px;
  border-radius: 24px 24px 0 0;
}

#message-text {
  font-size: 15.5px;
  line-height: 1.90;
  letter-spacing: 0.02em;
  color: #2A2015;
}

/* ─── 選択肢: ピルシェイプ・ゴールドドット ─── */
#choices-window {
  bottom: calc(var(--message-h) + 4px);
  padding: 0 16px 10px;
}

#choices-list {
  gap: 10px;
}

.choice-btn {
  border-radius: 999px;
  padding: 14px 24px 14px 40px;
  background: linear-gradient(135deg, #FFFDF6 0%, #FFF5DF 100%);
  border: 1.5px solid rgba(232,197,71,0.45);
  color: #3A2C10;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow:
    0 3px 14px rgba(200,155,40,0.12),
    0 1px  4px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.85);
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  transition: background 0.18s, border-color 0.18s, transform 0.10s, box-shadow 0.18s;
}

.choice-btn::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F0CC50, #D4A830);
  box-shadow: 0 1px 5px rgba(200,155,40,0.50);
}

.choice-btn:active {
  background: linear-gradient(135deg, #FFF0C0 0%, #FFE494 100%);
  border-color: rgba(232,197,71,0.75);
  transform: scale(0.97);
  box-shadow: 0 1px 6px rgba(200,155,40,0.18);
}

/* ─── ステータスバー: バッジ化 ─── */
#status-bar {
  background: linear-gradient(180deg, #FFFEFB 0%, #FAF6EE 100%);
  gap: 6px;
}

#status-day {
  background: linear-gradient(135deg, #6BBFE8, #4AA4D4);
  border-radius: 999px;
  padding: 4px 11px;
  gap: 3px;
  box-shadow: 0 1px 6px rgba(70,160,210,0.22);
}
#status-day .status-label {
  color: rgba(255,255,255,0.78);
  font-size: 9px;
}
#status-day .status-value {
  color: #fff;
  font-size: 13px !important;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

#status-smiles {
  background: linear-gradient(135deg, #FFE87C, #F5C832);
  border-radius: 999px;
  padding: 4px 11px;
  gap: 3px;
  box-shadow: 0 1px 6px rgba(220,180,30,0.28);
  margin-left: auto;
}
#status-smiles .status-label {
  font-size: 12px;
  color: rgba(80,55,0,0.65);
}
#status-smiles .status-value {
  color: #4A3000;
  font-size: 13px !important;
  font-weight: 800;
}

#status-najimi {
  background: linear-gradient(135deg, #D8F5C8, #B8EAA0);
  border-radius: 999px;
  padding: 4px 11px;
  gap: 3px;
  box-shadow: 0 1px 6px rgba(100,190,70,0.20);
}
#status-najimi .status-label {
  font-size: 12px;
  color: rgba(30,80,20,0.55);
}
#status-najimi .status-value {
  color: #1A5010;
  font-size: 11px !important;
  font-weight: 800;
}

.status-time-emoji {
  margin-left: 2px;
  margin-right: 0;
  font-size: 16px;
}

/* ─── ボトムナビ: 温かみグラデ + リッチアクティブ ─── */
.bottom-nav {
  background: linear-gradient(180deg, #FFFEFB 0%, #FFF8EC 100%);
  box-shadow: 0 -4px 20px rgba(60,40,20,0.08);
}

.menu-btn.active {
  background: linear-gradient(135deg, #FFF6D0 0%, #FFEEA0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 8px rgba(200,155,40,0.18);
}
.menu-btn.active .menu-icon {
  filter: drop-shadow(0 1px 4px rgba(200,155,40,0.4));
}
.menu-btn.active .menu-label {
  color: #9A7010;
  font-weight: 800;
}

/* ─── パネルヘッダー: ウッドテクスチャ風（リュック以外） ─── */
#screen-settings .panel-header,
#screen-map .panel-header,
#screen-bestiary .panel-header,
#screen-cafe-status .panel-header {
  background: linear-gradient(135deg, #6B4A2A 0%, #7C5834 45%, #8B6540 100%);
  border-bottom: 2px solid rgba(90,55,20,0.55);
  box-shadow: 0 2px 10px rgba(50,30,10,0.20);
}
#screen-settings .panel-header h2,
#screen-map .panel-header h2,
#screen-bestiary .panel-header h2,
#screen-cafe-status .panel-header h2 {
  color: #FFF5E0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
#screen-settings .btn-back,
#screen-map .btn-back,
#screen-bestiary .btn-back,
#screen-cafe-status .btn-back {
  color: #FFE8B0;
  border-color: rgba(255,220,130,0.30);
}
/* ─── 戻るボタン: 全パネル共通（丸形） ─── */
.btn-back {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(200,185,160,0.35);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 20px;
  color: var(--pablo-text);
}
.btn-back:active {
  background: rgba(255,255,255,0.42);
}

/* ─── 選択肢ウィンドウ: 背景ブラー補強 ─── */
#choices-window {
  background: linear-gradient(180deg, transparent 0%, rgba(20,15,8,0.18) 100%);
  border-radius: 0;
  padding-bottom: 14px;
}

/* ══════════════════════════════════════════════════
   会話バブル v2: 有機吹き出し + しっぽ + 名前タブ
   参照画像スタイル準拠
══════════════════════════════════════════════════ */

/* キャラクター SVG: スケール（CSS変数でデバッグ調整可能） */
:root { --char-scene-scale: 1.0; }
#scene-area { overflow: visible !important; }
#scene-area svg {
  transform: scale(var(--char-scene-scale)) !important;
  transform-origin: 50% 88% !important;
  overflow: visible !important;
}

/* キャラ登場アニメ: drawCharsのたびにふわっと */
@keyframes charPopIn {
  from { opacity: 0; transform: translateY(14px) scale(0.90); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
#scene-area svg g[data-char-id] {
  animation: charPopIn 0.30s cubic-bezier(0.34, 1.4, 0.60, 1) both;
}

/* 吹き出し本体: 有機形状 */
#message-window {
  bottom: auto !important;
  top: 22% !important;
  left: 10px !important;
  right: 10px !important;
  min-height: auto !important;
  border-radius: 20px 24px 22px 18px / 22px 18px 24px 20px !important;
  padding: 14px 16px 14px !important;
  background: rgba(255, 254, 250, 0.97) !important;
  border: 1.5px solid rgba(200, 170, 110, 0.38) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.13),
    0 1px 6px rgba(0,0,0,0.07),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}
#screen-game.ui-visible #message-window {
  bottom: auto !important;
  top: 34% !important;
}

/* しっぽ: 外枠（ボーダー色の三角形） */
#message-window::before {
  content: '' !important;
  position: absolute !important;
  bottom: -20px !important;
  left: 22px !important;
  width: 0 !important; height: 0 !important;
  border-style: solid !important;
  border-width: 20px 6px 0 14px !important;
  border-color: rgba(200,170,110,0.38) transparent transparent transparent !important;
  display: block !important;
  pointer-events: none !important;
}
/* しっぽ: 内塗り（バブル背景色の三角形） */
#message-window::after {
  content: '' !important;
  position: absolute !important;
  bottom: -17px !important;
  left: 23px !important;
  width: 0 !important; height: 0 !important;
  border-style: solid !important;
  border-width: 18px 5px 0 12px !important;
  border-color: rgba(255,254,250,0.97) transparent transparent transparent !important;
  display: block !important;
  pointer-events: none !important;
}

/* テキスト */
#message-text {
  font-size: 15px !important;
  line-height: 1.70 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

/* タップインジケーター */
#message-next.tap-indicator {
  position: absolute !important;
  bottom: 8px !important;
  right: 12px !important;
  margin: 0 !important;
}

/* スキップボタン: メッセージウィンドウ外・画面右下 */
.msg-skip-btn {
  position: absolute !important;
  top: auto !important;
  bottom: calc(var(--menu-h) + 10px) !important;
  right: 14px !important;
  font-size: 11px !important;
  z-index: 60 !important;
}

/* 話者名タブ: アバターなし・小さい角丸ラベル */
.msg-speaker-row {
  position: absolute !important;
  top: -28px !important;
  left: 14px !important;
  right: auto !important;
  width: auto !important;
  display: none !important;
  align-items: center !important;
  gap: 0 !important;
  background: rgba(255,254,250,0.97) !important;
  border: 1.5px solid rgba(200,170,110,0.38) !important;
  border-radius: 8px !important;
  padding: 3px 10px 3px 8px !important;
  box-shadow: 0 1px 5px rgba(0,0,0,0.09) !important;
}
.msg-speaker-row.visible {
  display: flex !important;
}
/* 話者バッジのしっぽ・ボーダー線を消す */
.msg-speaker-row::after { display: none !important; }

/* アバター（顔画像・絵文字）を非表示 */
#msg-avatar, .msg-avatar { display: none !important; }

/* 話者名テキスト */
#message-speaker {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--speaker-color, #A0865C) !important;
  letter-spacing: 0.03em !important;
}

/* 選択肢: 配置 */
#choices-window {
  bottom: 10px !important;
  left: 10px !important;
  right: 10px !important;
  padding: 0 0 10px !important;
  background: none !important;
}
#screen-game.ui-visible #choices-window {
  bottom: calc(var(--menu-h, 64px) + 10px) !important;
}

/* 選択肢ボタン: ドットなし・シンプルクリーム */
.choice-btn {
  border-radius: 999px !important;
  padding: 13px 20px !important;
  background: rgba(255, 254, 250, 0.97) !important;
  border: 1.5px solid rgba(200, 170, 110, 0.38) !important;
  color: #3A2C10 !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  text-align: left !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.09), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  letter-spacing: 0.02em !important;
}
.choice-btn::before { display: none !important; }
.choice-btn:active {
  background: rgba(255, 242, 210, 0.98) !important;
  transform: scale(0.97) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}

/* バブル入場アニメ */
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
#message-window:not(.hidden) {
  animation: bubbleIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

/* ─── 話者バッジ: 顔クロップ画像（ほに・フォーカス）残骸コード維持 ─── */
.msg-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.msg-face-wrap {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.15);
}
.msg-face-img {
  position: absolute;
  /* 横幅を約 260% に広げて顔エリアをズームイン */
  width: 88px;          /* 260% of 34px ≈ 88px */
  height: auto;
  left: -27px;          /* -(88-34)/2 = -27px で水平中央 */
  /* top は JS が inline style で上書き */
}

/* ══════════════════════════════════════════════════
   探索UI v2 — 参照画像準拠
   プログレスバー / 採取素材パネル / アイテムポップアップ
══════════════════════════════════════════════════ */

/* ── プログレスバー ── */
#iexplore-progress-wrap {
  position: absolute;
  bottom: 146px;   /* 素材パネル(136px)の上 */
  left: 14px;
  right: 14px;
  z-index: 56;
  pointer-events: none;
}
#iexplore-progress-label {
  font-size: 12px;
  font-weight: 700;
  color: #3A3020;
  text-align: center;
  margin-bottom: 5px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(255,255,255,0.85);
}
#iexplore-progress-track {
  height: 9px;
  background: rgba(255,255,255,0.55);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.14);
}
#iexplore-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #66BB6A, #43A047);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.34,1.2,0.64,1);
  box-shadow: 0 1px 4px rgba(76,175,80,0.45);
}

/* ── 採取できる素材パネル ── */
#explore-nav-bar {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 136px !important;
  z-index: 55;
  background: rgba(252, 249, 243, 0.97) !important;
  border-top: 1.5px solid rgba(210, 190, 150, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 -3px 14px rgba(0,0,0,0.09) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 12px 6px !important;
  gap: 0 !important;
}
.explore-mat-header {
  font-size: 11px;
  font-weight: 700;
  color: #8a7a62;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-align: center;
}
.explore-mat-grid {
  display: flex;
  flex-direction: row;
  gap: 6px;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.explore-mat-grid::-webkit-scrollbar { display: none; }
.explore-mat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(200,175,130,0.3);
  border-radius: 10px;
  padding: 4px 8px;
  min-width: 50px;
  max-width: 62px;
}
.explore-mat-icon  { font-size: 20px; line-height: 1; }
.explore-mat-name  { font-size: 9px; color: #6a5a48; font-weight: 600; text-align: center; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56px; }
.explore-mat-count { font-size: 12px; color: #3A2C10; font-weight: 700; transition: color 0.2s; }

/* ── かご演出 ── */
.explore-basket-bar {
  /* explore-nav-bar の上書き */
}
.explore-basket-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.explore-basket-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  background: linear-gradient(165deg, #fff5dc, #e7c889);
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow:
    0 3px 0 rgba(140,100,40,0.25),
    0 2px 8px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.85);
  transition: transform 0.2s;
}
.basket-emoji { line-height: 1; }
@keyframes basketBounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30%      { transform: scale(1.18) rotate(-6deg); }
  60%      { transform: scale(0.94) rotate(4deg); }
}
.explore-basket-icon.basket-bounce {
  animation: basketBounce 0.45s ease-out;
}
.explore-basket-grid {
  display: flex;
  flex-direction: row;
  gap: 5px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.explore-basket-grid::-webkit-scrollbar { display: none; }

/* 素材取得時の脈動 */
@keyframes matPulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(255,200,80,0); }
  30%  { transform: scale(1.18); box-shadow: 0 0 16px rgba(255,200,80,0.7); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,200,80,0); }
}
.explore-mat-item.mat-pulse {
  animation: matPulse 0.6s ease-out;
}
.explore-mat-item.mat-pulse .explore-mat-count {
  color: #d97700;
}

/* 飛ぶアイコン（採取→かご） */
.explore-fly-icon {
  text-shadow: 0 0 8px rgba(255,255,200,0.7);
}
.explore-fly-icon.rare {
  text-shadow: 0 0 12px rgba(255,180,80,0.9);
}

/* 👆 指でなぞるチュートリアル */
@keyframes fingerSwipe {
  0%   { left: 20%; top: 60%; transform: rotate(-12deg) scale(1.0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { left: 60%; top: 45%; transform: rotate(-8deg) scale(1.05); }
  90%  { opacity: 1; }
  100% { left: 80%; top: 35%; transform: rotate(-5deg) scale(1.0); opacity: 0; }
}
.finger-hint {
  position: absolute;
  font-size: 38px;
  z-index: 200;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  animation: fingerSwipe 2.2s ease-in-out infinite;
}
@keyframes fingerTrailFade {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2); }
}
.finger-trail {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,120,0.7), rgba(255,220,120,0));
  z-index: 199;
  pointer-events: none;
  animation: fingerTrailFade 0.5s ease-out forwards;
}

/* チャカポコ虫キャッチ：画面端から覗き込む */
@keyframes kobitoPeekOut {
  0%   { right: -60px; transform: rotate(-30deg) translateY(0); opacity: 0; }
  20%  { right:   2px; transform: rotate(-25deg) translateY(0); opacity: 1; }
  50%  { right:   8px; transform: rotate(-22deg) translateY(-4px); opacity: 1; }
  80%  { right:   2px; transform: rotate(-25deg) translateY(0); opacity: 1; }
  100% { right: -60px; transform: rotate(-30deg) translateY(0); opacity: 0; }
}
.kobito-catch {
  position: absolute;
  bottom: 22%;
  width: 52px; height: 70px;
  background: url('characters/kobito_cho.png') no-repeat center/contain;
  cursor: pointer;
  z-index: 80;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.30));
  animation: kobitoPeekOut 3.5s ease-in-out forwards;
  transform-origin: bottom right;
  /* タップ範囲を拡張 */
  padding: 12px;
  box-sizing: content-box;
  background-origin: content-box;
}
@keyframes kobitoCaught {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.4) rotate(15deg); }
  100% { transform: scale(0) rotate(-90deg); opacity: 0; }
}
.kobito-catch.caught {
  animation: kobitoCaught 0.5s ease-out forwards !important;
}

/* ── アクションボタン帯 ── */
.explore-action-strip {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 5px;
}
.explore-action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(200,175,130,0.4);
  border-radius: 999px;
  padding: 3px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.explore-action-btn:active { background: rgba(255,240,200,0.95); }
.explore-action-icon  { font-size: 14px; }
.explore-action-label { font-size: 11px; font-weight: 600; color: #3A2C10; }

/* ── アイテム取得ポップアップ（右上カード）── */
#iexplore-item-popup {
  position: absolute;
  top: 38%;
  right: 14px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 254, 250, 0.97);
  border: 1.5px solid rgba(200,170,110,0.35);
  border-radius: 12px;
  padding: 8px 12px 8px 10px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.13);
  pointer-events: none;
  animation: itemPopupIn 0.22s cubic-bezier(0.34,1.4,0.64,1) both;
}
@keyframes itemPopupIn {
  from { opacity: 0; transform: translateX(14px) scale(0.92); }
  to   { opacity: 1; transform: translateX(0)    scale(1);    }
}
.iitem-popup-icon { font-size: 26px; line-height: 1; }
.iitem-popup-name  { font-size: 13px; font-weight: 700; color: #3A2C10; line-height: 1.2; }
.iitem-popup-count { font-size: 11px; color: #8a7a62; margin-top: 1px; }

/* 選択肢の bottom を素材パネル分だけ上げる */
#screen-game.ui-visible #choices-window {
  bottom: calc(var(--menu-h, 64px) + 136px + 10px) !important;
}

/* ============================================================
   吹き出し: 話者側にしっぽを寄せる + 端からマージン取る
   .speaker-left  : 既定（しっぽ左下、ほに側）
   .speaker-right : しっぽ右下に反転（島民側）
   .speaker-center: 真ん中下に対称しっぽ（モノローグ等）
   ============================================================ */

/* 吹き出しをコンパクト化＆キャラ寄りの位置に */
#message-window {
  top: 26% !important;
  left: 18px !important;
  right: 18px !important;
  padding: 12px 14px 12px !important;
}

/* テキストのpadding-rightを小さく（スキップボタンの分だけ） */
#message-text {
  padding-right: 44px !important;
  line-height: 1.6 !important;
}

/* しっぽを少し大きめ・はっきり見せる */
#message-window::before {
  bottom: -18px !important;
  border-width: 18px 6px 0 14px !important;
  border-color: rgba(200,170,110,0.65) transparent transparent transparent !important;
}
#message-window::after {
  bottom: -15px !important;
  border-width: 16px 5px 0 12px !important;
}

/* speaker-right: しっぽを右側にミラーリング ─────────── */
#message-window.speaker-right::before {
  left: auto !important;
  right: 22px !important;
  border-width: 18px 14px 0 6px !important;
}
#message-window.speaker-right::after {
  left: auto !important;
  right: 23px !important;
  border-width: 16px 12px 0 5px !important;
}
/* 話者ラベルは常に左（しっぽ方向に関わらず） */
#message-window.speaker-right .msg-speaker-row {
  left: 14px !important;
  right: auto !important;
}

/* speaker-center: しっぽを真ん中下に対称配置 ─────────── */
#message-window.speaker-center::before {
  left: 50% !important;
  margin-left: -10px !important;
  border-width: 20px 8px 0 8px !important;
}
#message-window.speaker-center::after {
  left: 50% !important;
  margin-left: -8px !important;
  border-width: 18px 7px 0 7px !important;
}

/* 話者なし（独白・地の文）はしっぽを消す */
#message-window:not(.speaker-left):not(.speaker-right):not(.speaker-center)::before,
#message-window:not(.speaker-left):not(.speaker-right):not(.speaker-center)::after {
  display: none !important;
}

/* 選択肢: 吹き出しと幅を揃えて少し詰める */
#choices-window {
  left: 22px !important;
  right: 22px !important;
}
#screen-game.ui-visible #choices-window {
  left: 22px !important;
  right: 22px !important;
}

/* ============================================================
   紙片風ナレーション (showNarration)
   時間経過・場所転換・章タイトル等の特別な地の文用
   ============================================================ */
#narration-strip {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 88%;
  padding: 9px 18px 10px;
  background:
    linear-gradient(180deg, rgba(255,250,232,0.97), rgba(252,243,218,0.97));
  border: 1.5px dashed rgba(180, 145, 90, 0.55);
  border-radius: 6px;
  box-shadow:
    0 4px 14px rgba(120, 90, 50, 0.18),
    0 1px 3px rgba(120, 90, 50, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.85);
  /* やや傾けて紙が留めてある感を出す */
  rotate: -1.2deg;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#narration-strip.hidden { display: none !important; }

.narration-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.narration-text {
  font-family: 'Daruma Drop One', 'M PLUS Rounded 1c', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #5C4A2A;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* 入場：上からふわっと降りてくる */
@keyframes narrationIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-10px) rotate(-1.2deg) scale(0.94); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(2px) rotate(-1.2deg) scale(1.02); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0)    rotate(-1.2deg) scale(1.00); }
}
/* 退場：ゆっくりフェード */
@keyframes narrationOut {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0)   rotate(-1.2deg) scale(1.00); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px) rotate(-1.2deg) scale(0.96); }
}
#narration-strip.narration-in {
  animation: narrationIn 0.50s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
#narration-strip.narration-out {
  animation: narrationOut 0.38s ease-in both;
}