/* ===================== ブヒ押し style ===================== */
:root {
  --bg-1: #ffe9f2;
  --bg-2: #fff7e6;
  --bg-3: #e6f4ff;
  --ink: #5a3b46;
  --pink: #ffc0d4;
  --pink-deep: #ff8fb2;
  --nose: #ff7aa2;
  --nose-deep: #e85c89;
  --cheek: #ff7e9b;
  --aff: linear-gradient(90deg, #ffd166, #06d6a0);
  --danger: #ff4d4d;
  --card: rgba(255, 255, 255, 0.78);
  --shadow: 0 10px 30px rgba(180, 90, 120, 0.22);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; margin: 0; }

body {
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3));
  background-attachment: fixed;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh; /* 縦長スマがツールバー開閉で縮まないよう動的ビューポート基準 */
  max-width: 520px;
  margin: 0 auto;
}

/* ===================== 画面切り替え ===================== */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  text-align: center;
}
.screen.active { display: flex; }

/* ===================== ボタン ===================== */
.btn {
  font: inherit;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 14px 34px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: var(--shadow);
}
.btn:active { transform: translateY(2px) scale(0.98); }
.btn-primary { background: var(--nose); color: #fff; font-size: 1.25rem; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { background: var(--card); color: var(--ink); font-size: 1rem; }

/* ===================== フッターナビ ===================== */
.footer-nav {
  position: fixed; /* ビューポート下端に固定（スクロール／ツールバー開閉で動かない） */
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 520px;
  z-index: 30;
  display: none;
  height: 60px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 -2px 12px rgba(180, 90, 120, 0.14);
  border-radius: 18px 18px 0 0;
}
/* 表示するのはハブ画面と結果画面（プレイ中は隠す） */
body[data-state="title"] .footer-nav,
body[data-state="records"] .footer-nav,
body[data-state="shop"] .footer-nav,
body[data-state="over"] .footer-nav,
body[data-state="room"] .footer-nav { display: flex; }
.foot-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: none; background: none; cursor: pointer;
  color: #b9a7ad; font: inherit;
  padding: 6px 0;
}
.foot-btn:active { transform: scale(0.92); }
.foot-ic { display: inline-flex; }
.foot-ic .ic { width: 24px; height: 24px; }
.foot-label { font-size: .66rem; font-weight: 700; }
/* 現在の画面をハイライト */
body[data-state="title"] .foot-btn[data-nav="title"],
body[data-state="room"] .foot-btn[data-nav="room"],
body[data-state="records"] .foot-btn[data-nav="records"],
body[data-state="shop"] .foot-btn[data-nav="shop"] { color: var(--nose-deep); }
/* フッターと内容が重ならないよう、ハブ画面は下に余白 */
body[data-state="records"] #screen-records,
body[data-state="shop"] #screen-shop,
body[data-state="over"] #screen-over,
body[data-state="room"] #screen-room { padding-bottom: 80px; }

/* 音のオン/オフ */
.mute-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: 1.1rem;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.mute-btn:active { transform: scale(0.94); }

/* ゲーム中だけ表示する「やめてタイトルへ」ボタン（左上） */
.quit-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 20;
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  padding: 0;
}
.quit-btn:active { transform: scale(0.94); }
body[data-state="game"] .quit-btn { display: flex; }
body.outro .quit-btn { display: none; } /* 締め演出中は×ボタンに任せる */
.hud .hud-item:first-child { margin-left: 44px; } /* やめるボタンと重ならないよう余白 */

/* 締め演出中の「結果へ進む」×ボタン（右下） */
.skip-btn {
  position: absolute;
  bottom: 18px;
  right: 16px;
  z-index: 20;
  width: 52px;
  height: 52px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--nose);
  color: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
  padding: 0;
}
.skip-btn:active { transform: scale(0.94); }
body.outro .skip-btn { display: flex; }
body.outro .demand-label { visibility: hidden; }

/* 締め演出中はHUDを隠し、ブタ顔の上は終了見出しのみ表示 */
.outro-headline {
  display: none;
  font-size: 2rem;
  font-weight: 800;
  color: var(--nose-deep);
  text-shadow: 0 2px 0 #fff;
  padding: 14px 0 6px;
}
body.outro .hud { display: none; }
body.outro .outro-headline { display: block; }

/* ===================== タイトル画面 ===================== */
.title-logo {
  font-size: clamp(2.6rem, 12vw, 4rem);
  margin: 4px 0 0;
  letter-spacing: 2px;
  color: var(--nose-deep);
  text-shadow: 0 3px 0 #fff, 0 6px 12px rgba(232, 92, 137, .3);
}
.title-sub { font-size: 1.1rem; margin: 0; font-weight: 700; }
.title-desc { font-size: .95rem; margin: 0 0 6px; opacity: .8; }
.title-hint { font-size: .8rem; opacity: .6; margin-top: 4px; }
.title-pig { width: min(56vw, 220px); }
.title-pig svg { width: 100%; height: auto; display: block; }
.breathing { transform-origin: 50% 62%; animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ===================== HUD ===================== */
#shake-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; }
.hud { width: 100%; padding: 6px 4px 0; }
.hud-row { display: flex; justify-content: space-between; align-items: baseline; }
.hud-item { display: flex; flex-direction: column; align-items: flex-start; }
.hud-label { font-size: .7rem; letter-spacing: 1px; opacity: .65; }
.hud-score { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--nose-deep); }
.hud-high { font-size: 1.3rem; font-weight: 800; opacity: .8; }
.hud-sub { justify-content: center; gap: 8px; margin-top: 6px; }
.chip {
  background: var(--card);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(180,90,120,.12);
}
.chip b { color: var(--nose-deep); }
.chip-match b { color: #06b894; }
.chip-miss b { color: var(--danger); }

/* ===================== 残り時間ゲージ ===================== */
.time-gauge { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.gauge-time { background: #37c8c3; }
.hud-time { font-size: 1.2rem; font-weight: 800; min-width: 2.2em; text-align: right; color: var(--ink); }
.hud-time.low { color: var(--danger); animation: timeBlink .6s steps(2, start) infinite; }
@keyframes timeBlink { 50% { opacity: .35; } }
.hud-item-r { align-items: flex-end; margin-right: 42px; } /* ミュートボタンと重ならないよう余白 */

/* ===================== 要求モード表示 ===================== */
.demand-label {
  margin: 6px 0 2px; /* ブタ顔の上に表示 */
  font-size: 1.5rem;
  font-weight: 800;
  padding: 6px 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.demand-label[data-mode="rush"]   { color: #fff; background: #e0157a; }
.demand-label[data-mode="fast"]   { color: #fff; background: #ff5d5d; }
.demand-label[data-mode="normal"] { color: #fff; background: #ffa63d; }
.demand-label[data-mode="slow"]   { color: #fff; background: #4d9de0; }
.demand-label[data-mode="wait"]   { color: #fff; background: #8a7bb0; }
.demand-label.flash { animation: demandFlash .5s ease-out; }
@keyframes demandFlash {
  0% { transform: scale(.6); opacity: 0; }
  40% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===================== ゲージ ===================== */
.gauges { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.gauge { display: flex; align-items: center; gap: 8px; }
.gauge-name { font-size: .8rem; font-weight: 700; width: 4.5em; text-align: right; flex: none; }
.gauge-track {
  flex: 1; height: 16px; border-radius: 999px;
  background: rgba(0,0,0,.08); overflow: hidden;
}
.gauge-fill { height: 100%; width: 0%; border-radius: 999px; transition: width .12s linear, background .2s; }
.gauge-aff { background: var(--aff); }
.gauge-irr { background: #ffd166; }

/* ===================== なつきタイムバナー（豚ステージ上のオーバーレイ） ===================== */
.attached-banner {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 5;
  font-size: 1.3rem;
  font-weight: 800;
  color: #ff5fa2;
  text-shadow: 0 2px 0 #fff;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.attached-banner.show {
  opacity: 1;
  transform: scale(1);
  animation: bannerPulse .8s ease-in-out infinite;
}
@keyframes bannerPulse { 50% { transform: scale(1.08); } }

/* ===================== イベントバナー（豚ステージ上のオーバーレイ） ===================== */
.event-banner {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 5;
  font-size: 1.15rem;
  font-weight: 800;
  color: #c98a00;
  text-shadow: 0 2px 0 #fff;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.event-banner.show {
  opacity: 1;
  transform: scale(1);
  animation: bannerPulse .8s ease-in-out infinite;
}

/* ===================== 豚ステージ（中央の主役領域） ===================== */
.pig-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0; /* flex内で縮めるようにして見切れを防ぐ */
  max-height: min(48vh, 380px); /* 伸びすぎ防止：上限を設けセリフ/要求ラベルを画面内に収める */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 豚はステージの空き領域いっぱいに、ただし高さ上限で見切れ防止 */
#pig-game { width: min(86vw, 360px); max-height: 100%; height: auto; display: block; }

.judge-text {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.9rem;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 2px 0 #fff;
}

/* 豚のセリフ（吹き出し。豚が喋っているように上向きのしっぽ付き） */
.speech {
  position: relative;
  align-self: center;
  max-width: 86%;
  margin: 6px 0 6px;
  padding: 8px 18px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: none; /* 通常（プレイ中）は出さない。締め演出のときだけ表示 */
}
body.outro .speech { display: block; } /* タイムアップ／ゲームオーバーの締めセリフ */
.speech::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #fff;
}

/* ===================== 浮き文字 ===================== */
.floating {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, 0);
  font-size: 1.5rem;
  font-weight: 800;
  opacity: 0; /* アニメ無効環境では非表示のまま（保険タイマーで除去） */
  pointer-events: none;
  text-shadow: 0 2px 0 #fff, 0 0 8px rgba(255,255,255,.6);
  animation: floatUp .85s ease-out forwards;
  white-space: nowrap;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.7); }
  20%  { opacity: 1; transform: translate(-50%, -10px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -90px) scale(1); }
}
.f-BAD     { color: var(--danger); }
.f-GOOD    { color: #ff8c42; }
.f-PERFECT { color: #06b894; }
.f-GENTLE  { color: #4d9de0; }

/* ===================== ゲームオーバー / 記録 ===================== */
.over-headline {
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  margin: 0;
  line-height: 1.2;
  text-wrap: balance; /* 折り返す場合も行を均等にし「プ！」だけ落ちるのを防ぐ */
  color: var(--danger);
  text-shadow: 0 3px 0 #fff;
}
.over-headline.timeup { color: #06b894; }
.over-card {
  background: var(--card);
  border-radius: 22px;
  padding: 18px 22px;
  box-shadow: var(--shadow);
  width: min(92%, 420px);
}
.over-score-big { display: flex; flex-direction: column; align-items: center; }
.over-score-big span:last-child { font-size: 3rem; font-weight: 800; color: var(--nose-deep); line-height: 1; }
.over-title-main { font-size: 1.2rem; margin: 12px 0 8px; }
.over-title-main b { color: var(--nose-deep); }
.over-comment { font-size: 1rem; font-weight: 700; margin: 8px 0; }
.over-stats {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
  font-size: .9rem;
}
.over-stats b { color: var(--nose-deep); }
.over-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ===================== ブヒ記録：称号カード＋2列スタッツ ===================== */
.rec-title-card {
  width: min(92%, 420px);
  background: linear-gradient(135deg, #ffffff, #fff2f7);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.rec-title-label { font-size: .72rem; font-weight: 700; opacity: .6; letter-spacing: 1px; }
.rec-title-val { font-size: 1.3rem; font-weight: 800; color: var(--nose-deep); display: inline-flex; align-items: center; gap: 4px; }
.rec-stats {
  width: min(92%, 420px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.rec-stat {
  background: var(--card); border-radius: 12px; padding: 8px 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  box-shadow: 0 2px 6px rgba(180,90,120,.10);
}
.rec-stat .rec-k { font-size: .66rem; font-weight: 700; opacity: .6; }
.rec-stat b { font-size: 1.4rem; font-weight: 800; color: var(--nose-deep); line-height: 1.1; }
.rec-stat-wide { grid-column: 1 / -1; }

/* ===================== アイコン（SVG） ===================== */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; }
.title-ic { display: inline-flex; color: var(--nose-deep); margin-right: 4px; }
.title-ic .ic { width: 1.1em; height: 1.1em; }

/* 結果画面：新バッジ獲得 */
.over-newbadges {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 10px; margin: 6px 0 2px;
  background: #fff4f8; border-radius: 14px; padding: 8px 12px;
}
.over-newbadges .newbadge-head {
  width: 100%; font-size: .8rem; font-weight: 800; color: var(--nose-deep);
}
.newbadge { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; font-weight: 700; }
.newbadge-ic { display: inline-flex; color: var(--nose-deep); font-size: 1.2rem; }
.newbadge-themes { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 4px; }
.newbadge-theme { font-size: .9rem; font-weight: 800; color: #c98a00; }
.newbadge-event { font-size: .9rem; font-weight: 800; color: #5aa0d0; }
.newbadge-themes small { font-size: .72rem; font-weight: 700; opacity: .7; }

/* ===================== バッジコレクション（記録画面） ===================== */
.badges-section { width: min(92%, 420px); }
/* ブヒ日記 */
.diary-list { display: flex; flex-direction: column; gap: 16px; max-height: 56vh; overflow-y: auto; padding: 10px 4px 6px; }
/* 日記帳っぽいカード：罫線の紙＋マスキングテープ＋日付スタンプ＋書いた子の顔 */
.diary-card {
  position: relative; background: #fffdf6; border-radius: 12px; padding: 16px 14px 13px; text-align: left;
  box-shadow: 0 3px 9px rgba(150,120,90,.2);
  background-image: repeating-linear-gradient(transparent 0, transparent 27px, #efe6d4 27px, #efe6d4 28px);
  background-position: 0 16px;
}
.diary-tape {
  position: absolute; top: -7px; left: 50%; width: 66px; height: 17px; opacity: .72; border-radius: 2px;
  transform: translateX(-50%) rotate(-2deg); box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.diary-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.diary-date {
  font-weight: 800; color: #c5688c; border: 2px solid #eaa6bf; border-radius: 8px;
  padding: 1px 8px; font-size: .82rem; transform: rotate(-3deg); background: rgba(255,255,255,.7);
}
.diary-stamp { font-size: 1.25rem; line-height: 1; }
.diary-avatar {
  position: absolute; top: 11px; right: 11px; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.16); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.diary-avatar svg { width: 132%; height: 132%; }
.diary-text { font-size: .92rem; line-height: 1.75; color: #50474a; padding-right: 42px; }
.diary-empty { font-size: .9rem; opacity: .7; text-align: left; line-height: 1.6; }
/* ブヒ日記のプレゼント（遊んでくれた感謝。タップであける） */
.diary-gift {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font: inherit; font-weight: 800; font-size: .82rem; color: #fff;
  border: none; border-radius: 999px; padding: 5px 14px 5px 10px; cursor: pointer;
  background: var(--nose); box-shadow: 0 2px 6px rgba(180,90,120,.22);
  animation: diaryGiftBob 1.1s ease-in-out infinite;
}
.diary-gift .dg-box { font-size: 1.15rem; line-height: 1; }
.diary-gift:active { transform: scale(.94); }
.diary-gift.opened {
  background: #f3ecdf; color: #8a7d6b; cursor: default; box-shadow: none; animation: none;
}
@keyframes diaryGiftBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.badges-head {
  font-size: 1rem; font-weight: 800; text-align: left; margin: 4px 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.badge-count { font-size: .8rem; font-weight: 700; opacity: .7; }
.badges-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.badge {
  position: relative;
  background: var(--card); border-radius: 14px; padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 2px 6px rgba(180,90,120,.12);
}
.badge-icon { font-size: 1.7rem; line-height: 1; }
.badge-icon .ic { width: 1.7rem; height: 1.7rem; }
.badge-name { font-size: .62rem; font-weight: 700; text-align: center; line-height: 1.2; }
.badge-desc { display: none; } /* グリッドでは非表示（名前のみ） */
.badge.unlocked .badge-icon { color: var(--nose-deep); }
.badge.unlocked .badge-name { color: var(--ink); }
.badge.locked { opacity: .55; }
.badge.locked .badge-icon { color: #b9a7ad; }
.badge.locked .badge-name { color: #b9a7ad; }
.badge.is-new::after {
  content: "NEW";
  position: absolute; top: -6px; right: -4px;
  background: var(--nose); color: #fff;
  font-size: .55rem; font-weight: 800; line-height: 1;
  padding: 3px 5px; border-radius: 8px;
  box-shadow: 0 2px 4px rgba(180,90,120,.3);
}
/* 記録画面は内容が多いのでスクロール可能に */
#screen-records { justify-content: flex-start; overflow-y: auto; padding-top: 24px; padding-bottom: 24px; }

/* ===================== ブヒ一覧（キャラ図鑑） ===================== */
.pigdex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pigdex {
  position: relative;
  background: var(--card); border-radius: 14px; padding: 8px 4px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 2px 6px rgba(180,90,120,.12);
}
.minipig { width: 74%; height: auto; display: block; }
.pigdex-name { font-size: .68rem; font-weight: 700; text-align: center; line-height: 1.2; }
.pigdex-lock {
  width: 74%; aspect-ratio: 300 / 240;
  display: flex; align-items: center; justify-content: center;
  color: #b9a7ad;
}
.pigdex-lock .ic { width: 42%; height: auto; }
.pigdex.locked { opacity: .6; }
.pigdex.locked .pigdex-name { color: #b9a7ad; }
/* レアキャラの枠を少しだけ特別に */
.pigdex.rare.unlocked { box-shadow: 0 0 0 2px #ffd27a, 0 2px 6px rgba(180,90,120,.18); }
.pigdex.unlocked { cursor: pointer; transition: transform .08s ease; }
.pigdex.unlocked:active { transform: scale(0.95); }
/* 広場メンバー選択：カード右上のチェック（タップで出す/外す。カード本体タップは紹介ダイアログ） */
.pd-check {
  position: absolute; top: 5px; right: 5px; z-index: 2; width: 20px; height: 20px;
  border-radius: 50%; border: 2px solid #e0c2cd; background: #fff; box-sizing: border-box;
  padding: 0; cursor: pointer;
}
.pd-check:active { transform: scale(0.88); }
.pigdex.on-yard .pd-check { background: var(--nose); border-color: var(--nose); }
.pigdex.on-yard .pd-check::after {
  content: "✓"; color: #fff; font-size: 13px; font-weight: 900;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%);
}
.pigdex.on-yard { box-shadow: 0 0 0 2px var(--nose), 0 2px 6px rgba(180,90,120,.18); }
/* 紹介ダイアログ右上のチェック（広場に出す/外す） */
.pig-dialog-check {
  position: absolute; top: 9px; right: 50px; width: 32px; height: 32px;
  border-radius: 50%; border: 2px solid #e0c2cd; background: #fff; cursor: pointer; padding: 0;
}
.pig-dialog-check:active { transform: scale(0.92); }
.pig-dialog-check.on { background: var(--nose); border-color: var(--nose); }
.pig-dialog-check.on::after {
  content: "✓"; color: #fff; font-size: 18px; font-weight: 900;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%);
}
/* 背景一覧のサムネ（ブヒ一覧と同じカード内に、風景＋枠を縮小表示） */
.scene-thumb { width: 80%; aspect-ratio: 300 / 240; }
.scene-thumb.room-stage { flex: none; min-height: 0; margin: 0; border-width: 5px; }
.scene-thumb.scene-locked {
  display: flex; align-items: center; justify-content: center;
  background: #efe2e7; border-radius: 8px; color: #b9a7ad;
}
.scene-thumb.scene-locked .ic { width: 38%; height: auto; }
.scene-thumb.scene-random {
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: #fff; font-weight: 800; font-size: 1.4rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
  background: linear-gradient(135deg, #ff9aa2, #ffd59a, #a8e6a0, #9ad0ff, #c9a8ff);
}
/* 選択中の背景カードを強調 */
.scenedex.selected { box-shadow: 0 0 0 3px var(--nose-deep), 0 2px 6px rgba(180,90,120,.2); }

/* ===================== ブタ紹介ダイアログ ===================== */
.pig-dialog {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(90, 59, 70, 0.45);
  backdrop-filter: blur(2px);
}
.pig-dialog[hidden] { display: none; }
.pig-dialog-card {
  position: relative;
  width: min(90%, 340px);
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px 20px 16px;
  text-align: center;
  animation: dlgPop .2s ease-out;
}
@keyframes dlgPop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.pig-dialog-close {
  position: absolute; top: 8px; right: 8px;
  width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: var(--card); color: var(--ink);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.pig-dialog-close:active { transform: scale(0.92); }
.dlg-pig { width: min(48vw, 150px); height: auto; display: block; margin: 4px auto 2px; cursor: pointer; }
.pig-dialog-name { font-size: 1.2rem; font-weight: 800; color: var(--nose-deep); }
.pig-dialog-bio { font-size: .82rem; opacity: .8; margin: 4px 0 10px; line-height: 1.4; }

/* なかよし度（friendship）表示 */
.pig-dialog-friend {
  background: #fff4f8;
  border-radius: 14px;
  padding: 8px 12px;
  margin: 0 0 10px;
}
.pig-dialog-friend:empty { display: none; }
.friend-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: .82rem; font-weight: 800;
}
.friend-lv { color: var(--nose-deep); }
.friend-pts { color: var(--nose); letter-spacing: .5px; }
.friend-track {
  height: 8px; border-radius: 999px;
  background: rgba(232, 92, 137, .15);
  overflow: hidden; margin: 5px 0 3px;
}
.friend-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--pink-deep), var(--nose-deep));
  transition: width .3s ease;
}
.friend-next { font-size: .66rem; font-weight: 700; opacity: .6; text-align: right; }
.pig-dialog-quote {
  font-size: 1.05rem; font-weight: 700; color: var(--ink);
  background: #fff4f8; border-radius: 14px; padding: 10px 12px; min-height: 1.4em;
}

/* ===================== ドングリ通貨 ===================== */
.ic.acorn-ic { color: #b07a2e; vertical-align: -0.15em; }
.acorn-have { font-weight: 800; color: #b07a2e; }
.over-acorns { font-size: .95rem; font-weight: 800; color: #b07a2e; margin: 4px 0 2px; }

/* ===================== 着せ替えUI（ダイアログ内・セレクトボックス） ===================== */
.pig-dialog-equip { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pig-dialog-equip:empty { display: none; }
.equip-title { font-size: .8rem; font-weight: 700; opacity: .6; }
.equip-select {
  font: inherit; font-size: .9rem; font-weight: 700;
  color: var(--ink); background: #fff;
  border: 2px solid var(--pink); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; max-width: 60%;
}

/* ===================== ショップ画面 ===================== */
#screen-shop { justify-content: flex-start; overflow-y: auto; padding-top: 24px; padding-bottom: 24px; }
.shop-balance { font-size: 1.1rem; margin: 2px 0; }
.shop-hint { font-size: .78rem; opacity: .7; margin: 0 0 12px; }
.shop-grid {
  width: min(94%, 440px);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px;
}
.shop-item {
  background: var(--card); border-radius: 16px; padding: 10px 8px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: 0 2px 6px rgba(180,90,120,.12);
}
.shop-item.owned { opacity: .9; }
.shop-pig { width: 64%; height: auto; display: block; }
.shop-name { font-size: .85rem; font-weight: 800; }
.shop-buy {
  font: inherit; font-weight: 800; font-size: .9rem;
  border: none; border-radius: 999px; padding: 6px 16px; cursor: pointer;
  background: var(--nose); color: #fff; box-shadow: 0 2px 6px rgba(180,90,120,.18);
}
.shop-buy .ic.acorn-ic { color: #fff; }
.shop-buy.off { background: #d9c7cd; box-shadow: none; cursor: default; }
.shop-owned { font-size: .82rem; font-weight: 800; color: #06b894; }
.shop-secret { font-size: .68rem; font-weight: 800; color: #fff; background: var(--nose); border-radius: 999px; padding: 1px 9px; }

/* ===================== 豚 表情制御 ===================== */
.pig { overflow: visible; }
.face { fill: var(--pink); transition: fill .25s; }
.ear  { fill: var(--pink-deep); }
.nose { fill: var(--nose); transition: fill .25s; }
.nostril { fill: var(--nose-deep); }
.eye-white { fill: #fff; }
.eye-pupil { fill: #4a2c36; }
.eye-shine { fill: #fff; }
.brow { stroke: #6b4350; stroke-width: 6; stroke-linecap: round; fill: none; opacity: 0; transition: opacity .2s; }
.cheek { fill: var(--cheek); opacity: 0; transition: opacity .25s; }
.sweat { fill: #7fc8ff; opacity: 0; transition: opacity .2s; }
.anger { stroke: #ff3b3b; stroke-width: 5; stroke-linecap: round; fill: none; opacity: 0; transition: opacity .2s; }
.eye-dizzy { stroke: #4a2c36; stroke-width: 5; stroke-linecap: round; fill: none; opacity: 0; }
.sparkle { fill: #fff3a8; opacity: 0; transition: opacity .25s; }
.nose-heart { fill: #ff5d8f; opacity: 0; transition: opacity .25s; }

/* 押しごろの影楕円：通常は透明。押しごろ（メトロノームの拍）の間だけ
   表示して、鼻の下に薄い灰色の影が覗くようにする。影あり＝押して／
   影なし＝まだ、で見分けられる。実体の楕円なのでフィルタ非対応の
   ブラウザでも確実に見える。 */
.nose-shadow {
  fill: #9c8a92;
  opacity: 0;
  transition: opacity .1s ease-out;
}
.pig.nose-ready .nose-shadow {
  opacity: .5;
}

.mouth { transition: opacity .2s; }
.mouth-smile, .mouth-frown { fill: none; stroke: #6b4350; stroke-width: 6; stroke-linecap: round; }
.mouth-frown { opacity: 0; }
.mouth-open { fill: #b23a5b; opacity: 0; }
.mouth-flat { fill: none; stroke: #6b4350; stroke-width: 6; stroke-linecap: round; opacity: 0; }

/* 変形の基準を各要素の中心に */
.eye, .nose-group { transform-box: fill-box; transform-origin: center; }
.eye { transition: transform .15s; }

/* --- pleased --- */
.pig[data-mood="pleased"] .cheek { opacity: .4; }

/* --- happy --- */
.pig[data-mood="happy"] .cheek { opacity: 1; }
.pig[data-mood="happy"] .sparkle { opacity: 1; }

/* --- uncomfortable --- */
.pig[data-mood="uncomfortable"] .brow { opacity: 1; }
.pig[data-mood="uncomfortable"] .mouth-smile { opacity: 0; }
.pig[data-mood="uncomfortable"] .mouth-frown { opacity: 1; }
.pig[data-mood="uncomfortable"] .sweat-1 { opacity: 1; }

/* --- angry --- */
.pig[data-mood="angry"] .brow { opacity: 1; }
.pig[data-mood="angry"] .eye { transform: scaleY(.35); }
.pig[data-mood="angry"] .cheek { opacity: 1; }
.pig[data-mood="angry"] .anger { opacity: 1; }
.pig[data-mood="angry"] .mouth-smile { opacity: 0; }
.pig[data-mood="angry"] .mouth-frown { opacity: 1; }

/* --- critical --- */
.pig[data-mood="critical"] { animation: tremble .1s infinite; }
.pig[data-mood="critical"] .face { fill: #ff9aa6; }
.pig[data-mood="critical"] .brow { opacity: 1; }
.pig[data-mood="critical"] .eye { transform: scaleY(.3); }
.pig[data-mood="critical"] .nose { fill: var(--nose-deep); }
.pig[data-mood="critical"] .nose-group { transform: scale(1.18); }
.pig[data-mood="critical"] .anger { opacity: 1; }
.pig[data-mood="critical"] .sweat { opacity: 1; }
.pig[data-mood="critical"] .mouth-smile { opacity: 0; }
.pig[data-mood="critical"] .mouth-frown { opacity: 1; }

/* --- burst --- */
.pig[data-mood="burst"] .face { fill: #ff8090; }
.pig[data-mood="burst"] .eye { opacity: 0; }
.pig[data-mood="burst"] .eye-dizzy { opacity: 1; }
.pig[data-mood="burst"] .nose-group { transform: scale(1.3); }
.pig[data-mood="burst"] .nose { fill: var(--nose-deep); }
.pig[data-mood="burst"] .mouth-smile { opacity: 0; }
.pig[data-mood="burst"] .mouth-open { opacity: 1; }
.pig[data-mood="burst"] .sweat { opacity: 1; }

/* --- attached（なつき） --- */
.pig[data-mood="attached"] .cheek { opacity: 1; }
.pig[data-mood="attached"] .sparkle { opacity: 1; }
.pig[data-mood="attached"] .nose-heart { opacity: 1; }
.pig[data-mood="attached"] .nostril { opacity: 0; }
.pig[data-mood="attached"] .mouth-smile { stroke-width: 7; }
.pig-stage.attached::after {
  content: "";
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,180,210,.45), transparent 62%);
  pointer-events: none;
  animation: glow 1.2s ease-in-out infinite;
}
@keyframes glow { 50% { opacity: .5; transform: scale(1.05); } }
/* 悟り中はなつきタイムの後光を消す（無表情との矛盾を避ける） */
.pig-stage.zen::after { display: none; }

/* 特別イベントのステージ演出 */
.pig-stage.goldrush::after {
  content: "";
  position: absolute; inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,206,58,.6), transparent 62%);
  pointer-events: none;
  animation: glow .7s ease-in-out infinite;
}
.pig-stage.matsuri::after {
  content: "";
  position: absolute; inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,120,170,.5), rgba(255,206,58,.3) 45%, transparent 65%);
  pointer-events: none;
  animation: glow .5s ease-in-out infinite;
}
.pig-stage.fubuki::after {
  content: "";
  position: absolute; inset: -8%;
  border-radius: 26px;
  background: radial-gradient(circle, rgba(160,210,255,.45), rgba(220,240,255,.35) 55%, transparent 75%);
  pointer-events: none;
  animation: glow 1s ease-in-out infinite;
}

/* --- zen（豚、悟る：無表情） --- */
.pig[data-mood="zen"] .face { fill: var(--pink); }
.pig[data-mood="zen"] .eye { transform: none; opacity: 1; }
.pig[data-mood="zen"] .brow,
.pig[data-mood="zen"] .cheek,
.pig[data-mood="zen"] .anger,
.pig[data-mood="zen"] .sweat,
.pig[data-mood="zen"] .sparkle,
.pig[data-mood="zen"] .mouth-smile,
.pig[data-mood="zen"] .mouth-frown,
.pig[data-mood="zen"] .mouth-open,
.pig[data-mood="zen"] .nose-heart { opacity: 0; }
.pig[data-mood="zen"] .mouth-flat { opacity: 1; }

/* --- 金鼻チャンス（鼻が金色） --- */
.pig.gold .nose { fill: #ffce3a; filter: drop-shadow(0 0 8px rgba(255,196,0,.85)); }
.pig.gold .nostril { fill: #a9770a; }

/* ===================== キャラクター（テーマ別の顔。アクセサリを重ねる） ===================== */
.acc { opacity: 0; }
.acc-blush { fill: #ff9bb3; }
.acc-lashes { fill: none; stroke: #4a2f38; stroke-width: 3; stroke-linecap: round; }
.acc-bow { fill: #ff5d8f; }
.acc-mustache { fill: #5b3b22; }
.acc-twinkle { fill: #fff; }
.acc-brow-old, .acc-mustache-w { fill: #e9e4dc; }
.acc-beard { fill: #f0ece4; }
.acc-zzz { fill: none; stroke: #8aa0c0; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.acc-cat-ears { fill: var(--pink-deep); }
.acc-whiskers { fill: none; stroke: #b9889a; stroke-width: 2.4; stroke-linecap: round; }
.acc-cat-nose { fill: var(--nose-deep); }
.acc-dog-ears { fill: #b07a4e; }
.acc-dog-nose { fill: #3a2a2a; }
.acc-tongue { fill: #ff7a93; }

/* 女の子ブタ：リボン＋まつげ＋ほっぺ */
.pig.face-girl .acc-bow,
.pig.face-girl .acc-lashes,
.pig.face-girl .acc-blush { opacity: 1; }

/* ハンサムぶた：立派な鼻＋口ひげ＋きらり */
.pig.face-handsome .acc-mustache,
.pig.face-handsome .acc-twinkle { opacity: 1; }
.pig.face-handsome .nose-group { transform: scale(1.2); }

/* おじいさんぶた：白ひげ＋もじゃ眉＋眠い目＋zzz */
.pig.face-grandpa .acc-beard,
.pig.face-grandpa .acc-mustache-w,
.pig.face-grandpa .acc-brow-old,
.pig.face-grandpa .acc-zzz { opacity: 1; }
.pig.face-grandpa .eye { transform: scaleY(.5); }

/* にゃんたろう（猫）：とんがり耳＋ひげ＋小さい鼻。ブタ耳と鼻は隠す */
.pig.face-cat .acc-cat-ears,
.pig.face-cat .acc-whiskers,
.pig.face-cat .acc-cat-nose,
.pig.face-cat .acc-blush { opacity: 1; }
.pig.face-cat .ear,
.pig.face-cat .nose-group { opacity: 0; }

/* わんたろう（犬）：たれ耳＋黒鼻＋べろ。ブタ耳は隠す */
.pig.face-dog .acc-dog-ears,
.pig.face-dog .acc-dog-nose,
.pig.face-dog .acc-tongue { opacity: 1; }
.pig.face-dog .ear,
.pig.face-dog .nose-group { opacity: 0; }

/* ゆっきー（雪だるま）：目＝縦楕円のつぶらな瞳／口＝赤いにっこり／鼻＝短く太いニンジン（最前面） */
.pig.face-snowman .acc-snow { opacity: 1; }
.pig.face-snowman .ear,
.pig.face-snowman .cheek,
.pig.face-snowman .eye,
.pig.face-snowman .sparkle,
.pig.face-snowman .brow,
.pig.face-snowman .nose-group,
.pig.face-snowman .mouth { opacity: 0; }
.pig.face-snowman .face { fill: #fbfdff; stroke: #dbe6f0; stroke-width: 2; }
.acc-snow .sn-eye { fill: #3a3a44; }                    /* つぶらな瞳 */
.acc-snow .sn-eye-shine { fill: #ffffff; }
.acc-snow .sn-smile { fill: none; stroke: #e23b3b; stroke-width: 6; stroke-linecap: round; } /* 赤いにっこり */
.acc-snow .sn-carrot { fill: #ff8a3c; stroke: #e0702a; stroke-width: 1.5; } /* 短く太いニンジンの鼻 */
.acc-snow .sn-carrot-ridge { fill: none; stroke: #e0702a; stroke-width: 1.6; stroke-linecap: round; }
.acc-snow .sn-leaf { fill: #6fbf57; stroke: #4f9a3c; stroke-width: 1; } /* 人参の葉っぱ */
/* ブヒ部屋の小さい体も雪だるま色に・足はなし */
.roompig.face-snowman .rp-body { fill: #fbfdff; }
.roompig.face-snowman .rp-legs { display: none; }
.roompig.face-snowman .rp-tail-line { stroke: #cdd8e4; }

/* タコたろー：赤い顔＋足のヒント＋小さな口。ブタ耳・鼻は隠す */
.pig.face-octopus .acc-oct { opacity: 1; }
.pig.face-octopus .ear,
.pig.face-octopus .nose-group,
.pig.face-octopus .mouth { opacity: 0; }
.pig.face-octopus .face { fill: #e85563; }
.pig.face-octopus .cheek { fill: #ff95a4; }
.acc-oct .oct-arm { fill: none; stroke: #e85563; stroke-width: 15; stroke-linecap: round; } /* 8本足・両サイドはくるりん */
.acc-oct .oct-mouth-ring { fill: #f0883c; }  /* うー口（すぼめ口） */
.acc-oct .oct-mouth-hole { fill: #9c2a22; }

/* 宇宙人（うちゅうじん）：エメラルド色の顔＋アンテナ＋大きな黒い目。ブタの目・鼻・耳は隠す */
.pig.face-alien .acc-alien { opacity: 1; }
.pig.face-alien .ear,
.pig.face-alien .nose-group,
.pig.face-alien .eye,
.pig.face-alien .sparkle,
.pig.face-alien .brow,
.pig.face-alien .cheek,
.pig.face-alien .mouth { opacity: 0; }
.pig.face-alien .face { fill: #28c79a; stroke: #1fa882; stroke-width: 2; } /* エメラルド */
.acc-alien .al-antenna { fill: none; stroke: #1fa882; stroke-width: 5; stroke-linecap: round; }
.acc-alien .al-knob { fill: #ff7aa2; }
.acc-alien .al-eye { fill: #1a1a22; }
.acc-alien .al-eye-shine { fill: #ffffff; }
.acc-alien .al-mouth { fill: none; stroke: #13705a; stroke-width: 4; stroke-linecap: round; }
.roompig.face-alien .rp-body { fill: #28c79a; }
.roompig.face-alien .al-arm { fill: none; stroke: #28c79a; stroke-width: 9; stroke-linecap: round; } /* 横に長い腕 */
.roompig.face-alien .al-hand { fill: #28c79a; }
/* 宇宙人が乗るUFO（移動中＝.riding のときだけ表示） */
.rp-ufo { opacity: 0; transition: opacity .15s; }
.room-pig.riding .rp-ufo { opacity: 1; }
.rp-ufo .uf-base { fill: #9aa3c4; }
.rp-ufo .uf-top { fill: #c6cdea; }
.rp-ufo .uf-l { fill: #ffe06a; }
.room-pig.riding .uf-l { animation: ufoBlink .5s linear infinite; }
@keyframes ufoBlink { 0%, 100% { fill: #ffe06a; } 50% { fill: #ff8fbf; } }

/* ブチギレロック：熱唱（.singing のときだけ音符を飛ばす。姿勢は変えず・顔に小道具は載せない） */
.rp-rock { opacity: 0; transition: opacity .15s; }
.room-pig.singing .rp-rock { opacity: 1; }
.rp-notes path.note { fill: none; stroke: #ff3d7f; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.rp-notes circle.note { fill: #ff3d7f; stroke: none; }
.room-pig.singing .rp-notes { animation: rockNotes .8s ease-in-out infinite; }
@keyframes rockNotes { 0% { opacity: .2; transform: translateY(6px); } 50% { opacity: 1; transform: translateY(-4px); } 100% { opacity: .2; transform: translateY(6px); } }

/* お花畑：花かんむり（.flowercrown のときだけ頭にのる） */
.rp-crown { opacity: 0; transition: opacity .15s; }
.room-pig.flowercrown .rp-crown { opacity: 1; animation: crownPop .35s ease-out; }
.rp-crown .cr-band { fill: none; stroke: #8bbf6a; stroke-width: 3; stroke-linecap: round; }
@keyframes crownPop { 0% { opacity: 0; transform: translateY(-9px); } 100% { opacity: 1; transform: translateY(0); } }

/* 庭：池で釣り（.fishing のときだけ竿を前へ垂らす） */
.rp-rod { opacity: 0; transition: opacity .15s; }
.room-pig.fishing .rp-rod { opacity: 1; }
.rp-rod .fr-pole { fill: none; stroke: #8a5a2b; stroke-width: 4; stroke-linecap: round; }
.rp-rod .fr-line { fill: none; stroke: rgba(60,60,70,.7); stroke-width: 1.5; }
.rp-rod .fr-float { fill: #ff5d5d; stroke: #fff; stroke-width: 1.5; }
.room-pig.fishing .fr-float { transform-box: fill-box; transform-origin: center; animation: floatBob 1.5s ease-in-out infinite; }
@keyframes floatBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
/* 釣れたもの（ぴょこっと出てふわっと上がる） */
.room-catch { position: absolute; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; font-size: clamp(18px, 5.5vw, 26px); animation: catchPop 1.5s ease-out forwards; }
@keyframes catchPop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.4); }
  25% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1); }
}

/* にじうま：疾走（ぱからっと弾むように駆ける）。歩きワドルより優先 */
.room-pig.gallop { animation: piggyGallop .3s ease-in-out infinite; }
@keyframes piggyGallop {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-11px); }
}

/* ユニコ（虹のユニコーン）：ブタ顔を隠して馬の顔を描く。立派な金のらせんツノ＋虹のたてがみ */
.pig.face-unicorn .acc-unicorn { opacity: 1; }
.pig.face-unicorn .ear,
.pig.face-unicorn .face,
.pig.face-unicorn .cheek,
.pig.face-unicorn .eye,
.pig.face-unicorn .sparkle,
.pig.face-unicorn .brow,
.pig.face-unicorn .nose-group,
.pig.face-unicorn .mouth { opacity: 0; } /* ブタの顔パーツは消す */
.acc-unicorn .uni-head { fill: #fff7fb; stroke: #ecd4e6; stroke-width: 2.5; } /* 面長の馬の顔 */
.acc-unicorn .uni-ear { fill: #fff7fb; stroke: #ecd4e6; stroke-width: 2; }
.acc-unicorn .uni-ear-in { fill: #ffd3e6; }
.acc-unicorn .uni-muzzle { fill: #ffeaf3; } /* 鼻先 */
.acc-unicorn .uni-nostril { fill: #d28bb0; }
.acc-unicorn .uni-lip { fill: none; stroke: #d28bb0; stroke-width: 3; stroke-linecap: round; }
.acc-unicorn .uni-eye { fill: #4a3340; } /* 大きな馬の目 */
.acc-unicorn .uni-eye-shine { fill: #ffffff; }
.acc-unicorn .uni-lash { fill: none; stroke: #4a3340; stroke-width: 2.5; stroke-linecap: round; }
.acc-unicorn .uni-horn { fill: #ffd54a; stroke: #e3a92f; stroke-width: 2; } /* 立派な金のツノ */
.acc-unicorn .uni-horn-spiral { fill: none; stroke: #e3a92f; stroke-width: 2.6; stroke-linecap: round; } /* らせん */
.acc-unicorn .um1 { fill: #ff6b6b; } /* 虹のたてがみ */
.acc-unicorn .um2 { fill: #ffb14e; }
.acc-unicorn .um3 { fill: #ffe14e; }
.acc-unicorn .um4 { fill: #6fdc6f; }
.acc-unicorn .um5 { fill: #5bc7ff; }
.acc-unicorn .um6 { fill: #b88bff; }
.roompig.face-unicorn .rp-body { fill: #fff7fb; }
.roompig.face-unicorn .rp-niji-tail path { fill: none; stroke-width: 5; stroke-linecap: round; } /* 虹色のしっぽ */

/* おさる（温泉ザル）：ブタ顔を隠して、茶色の毛＋赤い顔＋丸い横耳を描く */
.pig.face-monkey .acc-monkey { opacity: 1; }
.pig.face-monkey .ear,
.pig.face-monkey .face,
.pig.face-monkey .cheek,
.pig.face-monkey .eye,
.pig.face-monkey .sparkle,
.pig.face-monkey .brow,
.pig.face-monkey .nose-group,
.pig.face-monkey .mouth { opacity: 0; }
.acc-monkey .mk-fur { fill: #b29b86; }            /* 灰茶色の毛 */
.acc-monkey .mk-ear { fill: #b29b86; }
.acc-monkey .mk-ear-in { fill: #e8a59c; }
.acc-monkey .mk-face { fill: #ef9a93; stroke: #e1857d; stroke-width: 2; } /* マカクの赤い顔 */
.acc-monkey .mk-eye { fill: #3a2a2a; }
.acc-monkey .mk-eye-shine { fill: #ffffff; }
.acc-monkey .mk-nostril { fill: #c56b63; }
.acc-monkey .mk-mouth { fill: none; stroke: #b5564d; stroke-width: 4; stroke-linecap: round; }
.roompig.face-monkey .rp-body { fill: #b29b86; }
.roompig.face-monkey .rp-monkey-tail { fill: none; stroke: #9c846f; stroke-width: 9; stroke-linecap: round; } /* おさるのしっぽ */

/* 王の風格：王冠 */
.acc-crown .crown-body, .acc-crown .crown-base { fill: #ffce3a; }
.acc-crown .crown-jewel { fill: #ff5d8f; }
.pig.face-regal .acc-crown { opacity: 1; }

/* ブチギレロック：サングラス */
.acc-shades .shade-l, .acc-shades .shade-r { fill: #1c1c22; }
.acc-shades .shade-bridge { fill: none; stroke: #1c1c22; stroke-width: 5; }
.pig.face-punk .acc-shades { opacity: 1; }

/* なごみ：お茶 */
.acc-tea .t-cup { fill: #7fbf9a; }
.acc-tea .t-handle { fill: none; stroke: #7fbf9a; stroke-width: 4; }
.acc-tea .t-steam { fill: none; stroke: #cdd6dc; stroke-width: 2.5; stroke-linecap: round; }
.pig.face-healing .acc-tea { opacity: 1; }
/* なごみは女性のブタ：ぱっちり大きめの目＋目の上のまつげ＋ほっぺ＋少し小さい鼻でブヒミと差別化 */
.pig.face-healing .acc-nagomi-lash,
.pig.face-healing .acc-blush { opacity: 1; }
.pig.face-healing .eye { transform: scale(1.26); }
.pig.face-healing .nose-group { transform: scale(0.86); }
.acc-nagomi-lash { fill: none; stroke: #4a2f38; stroke-width: 3; stroke-linecap: round; }

/* ===================== 着せ替えアクセサリ（ショップ購入・装着） ===================== */
/* 塗り（ピンク基調に合わせた配色） */
.acc-shop-mask .mk-body { fill: #f4f7fb; stroke: #d2dae6; stroke-width: 2; }
.acc-shop-mask .mk-strap { fill: none; stroke: #d2dae6; stroke-width: 4; stroke-linecap: round; }
.acc-shop-mask .mk-pleat { fill: none; stroke: #ccd5e2; stroke-width: 3; stroke-linecap: round; }

.acc-shop-blackmask .bk-body { fill: #3a3340; stroke: #2a2530; stroke-width: 2; }
.acc-shop-blackmask .bk-strap { fill: none; stroke: #2a2530; stroke-width: 4; stroke-linecap: round; }
.acc-shop-blackmask .bk-pleat { fill: none; stroke: #564d61; stroke-width: 3; stroke-linecap: round; }

.acc-shop-tophat .th-brim,
.acc-shop-tophat .th-body { fill: #4a3a52; }
.acc-shop-tophat .th-band { fill: #ff8fb2; }

.acc-shop-glasses .gl-lens { fill: #ffffff; fill-opacity: .35; stroke: #6b4a57; stroke-width: 4; }
.acc-shop-glasses .gl-bridge,
.acc-shop-glasses .gl-temple { fill: none; stroke: #6b4a57; stroke-width: 4; stroke-linecap: round; }

.acc-shop-scarf .sc-band,
.acc-shop-scarf .sc-tail { fill: #e23b3b; }
.acc-shop-scarf .sc-tail { fill: #ff5a5a; }

.acc-shop-flower .fl-petals { fill: #fff0f5; }
.acc-shop-flower .fl-core { fill: #ffce3a; }

.acc-shop-headphone .hp-band { fill: none; stroke: #5a4d6a; stroke-width: 9; stroke-linecap: round; }
.acc-shop-headphone .hp-cup { fill: #ff8fb2; }

.acc-shop-cap .cp-crown,
.acc-shop-cap .cp-peak { fill: #7ec8e3; }
.acc-shop-cap .cp-btn { fill: #fff0f5; }

.acc-shop-ribbon2 .rb-wing,
.acc-shop-ribbon2 .rb-knot { fill: #ff5d8f; }
.acc-shop-ribbon2 .rb-dot { fill: #fff0f5; }

.acc-shop-monocle .mo-lens { fill: #ffffff; fill-opacity: .3; stroke: #c9a227; stroke-width: 4; }
.acc-shop-monocle .mo-chain { fill: none; stroke: #c9a227; stroke-width: 2.6; stroke-linecap: round; }

.acc-shop-earring .er-stud { fill: #f0c040; }
.acc-shop-earring .er-drop { fill: #fff7fb; stroke: #e6cdd8; stroke-width: 2; }
.acc-shop-pearl .pl-string { fill: none; stroke: #d99bb4; stroke-width: 2.4; }
.acc-shop-pearl .pl-bead { fill: #fdf3f8; stroke: #c47f9c; stroke-width: 2.4; }
.acc-shop-bowtie .bt-wing, .acc-shop-bowtie .bt-knot { fill: #e0506a; }
.acc-shop-bowtie .bt-knot { fill: #c23a55; }
.acc-shop-heartglasses .hg-lens { fill: #ff7aa2; fill-opacity: .85; stroke: #d9335c; stroke-width: 3; }
.acc-shop-heartglasses .hg-bridge, .acc-shop-heartglasses .hg-temple { fill: none; stroke: #d9335c; stroke-width: 3.5; stroke-linecap: round; }
.acc-shop-tiara .ti-band { fill: none; stroke: #ffd21a; stroke-width: 6; stroke-linecap: round; }
.acc-shop-tiara .ti-point { fill: #ffcc00; stroke: #f0a800; stroke-width: 1.2; }
.acc-shop-tiara .ti-gem { fill: #ff5d8f; }
/* 幽霊三角巾＝お化けの体（足なし・白くてふわふわ） */
.roompig.equip-yurei .rp-ghostbody { fill: rgba(245,246,250,.92); stroke: #dfe3ec; stroke-width: 2; }
.room-pig.ghost-fade { opacity: 0; transition: opacity .9s ease; pointer-events: none; } /* すーっと消える */
/* ロック＆タコ：デュエットで踊る（その場でノリノリに弾む） */
.room-pig.dancing { animation: duetDance .34s ease-in-out infinite; }
@keyframes duetDance {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-12px) rotate(5deg); }
}
/* 夏祭り：盆踊り（ゆったり左右にゆれて手をふる感じ） */
.room-pig.bondance { animation: bonDance .7s ease-in-out infinite; }
@keyframes bonDance {
  0%, 100% { transform: translateX(-4px) rotate(-7deg); }
  50% { transform: translateX(4px) rotate(7deg); }
}
/* デュエット中に飛ぶ音符 */
.duet-note { position: absolute; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; font-size: clamp(14px, 4.5vw, 22px); color: #ff5d9e; font-weight: 700; animation: duetNote 1.3s ease-out forwards; }
@keyframes duetNote {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -140%) scale(1); }
}
/* サンタがソリから落とすプレゼント（空から降ってくる） */
.room-present { position: absolute; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; font-size: clamp(16px, 5vw, 24px); transition: top 1.3s cubic-bezier(.45,.05,.6,1); }
/* おさるが投げるどんぐり（サル→カニへヒュッと飛ぶ） */
.room-throw-acorn { position: absolute; width: clamp(15px, 4.6vw, 22px); transform: translate(-50%, -50%); z-index: 6; pointer-events: none; transition: left .42s ease-in, top .42s ease-in; }
.room-throw-acorn .ic { width: 100%; height: auto; display: block; }
/* ゆっきーのまわりに降る雪 */
.yukki-snow { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 3px rgba(255,255,255,.85); pointer-events: none; z-index: 5; opacity: 0; animation: yukkiSnow 2.6s ease-in forwards; }
@keyframes yukkiSnow {
  0% { opacity: 0; transform: translateY(-6px); }
  20% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--dx), var(--fall)); }
}
/* 天使のわっか：天に召されてふわ〜っと上昇しながら消える（約10秒いなくなる） */
/* 宇宙人のUFO連れ去り：同じく上昇しながら消える（宇宙人はUFOも見せる） */
.room-pig.ascending, .room-pig.abducting { animation: ascendUp 1.3s ease-in forwards; pointer-events: none; }
@keyframes ascendUp {
  0% { transform: translateY(0); opacity: 1; }
  55% { opacity: 1; }
  100% { transform: translateY(-130px); opacity: 0; }
}
.room-pig.abducting .rp-ufo { opacity: 1; } /* 連れ去り中は宇宙人のUFOを表示 */
/* ティアラ装着中のお姫様ドレス（部屋の全身表示） */
.rp-dress .pd-skirt { fill: #f7a8d0; stroke: #e87fb6; stroke-width: 2.5; }
.rp-dress .pd-sash { fill: #e87fb6; }
.rp-dress .pd-hem { fill: none; stroke: #fff0f7; stroke-width: 4; stroke-linecap: round; }
.rp-dress .pd-gem { fill: #fff0f7; }

.acc-shop-usamimi .ua-outer { fill: #fff4f8; stroke: #ffbcd3; stroke-width: 3; }
.acc-shop-usamimi .ua-inner { fill: #ffb0cb; }
.acc-shop-kumamimi .km-outer { fill: #b07a4a; }
.acc-shop-kumamimi .km-inner { fill: #dcab7c; }
.acc-shop-nekomimi .nk-outer { fill: #9a8aa6; }
.acc-shop-nekomimi .nk-inner { fill: #ffb9d2; }
.acc-shop-nekomimi .nk-whisker { fill: none; stroke: #b9889a; stroke-width: 2.4; stroke-linecap: round; }
.acc-shop-ninja .nj-wrap,
.acc-shop-ninja .nj-tie { fill: #2b2b33; }
.acc-shop-tsukematsu .tm-lash { fill: none; stroke: #2a2230; stroke-width: 2.6; stroke-linecap: round; }
.acc-shop-mohawk .mh-spike { fill: #e0157a; }
.acc-shop-yurei .yr-tri { fill: #f5f7f5; stroke: #b7c2be; stroke-width: 2; }
.acc-shop-yurei .yr-band { fill: none; stroke: #cad3cf; stroke-width: 3; stroke-linecap: round; }
/* 幽霊セット：装着で顔色を青白くする */
.pig.equip-yurei .face { fill: #dde7e3; }
.pig.equip-yurei .ear { fill: #c3d1cd; }
.pig.equip-yurei .nose { fill: #c8b7bd; }
.pig.equip-yurei .cheek { opacity: 0; }
.acc-shop-hachimaki .hm-band { fill: #fbfbfb; stroke: #d8c5cc; stroke-width: 1.6; }
.acc-shop-hachimaki .hm-tail { fill: #fbfbfb; stroke: #d8c5cc; stroke-width: 1.4; }
.acc-shop-hachimaki .hm-maru { fill: #e0282d; }
.acc-shop-onituno .ot-horn { fill: #efe3c2; stroke: #cbb485; stroke-width: 1.6; }
.acc-shop-onituno .ot-base { fill: #d9a86a; }
.acc-shop-onituno .ot-fang { fill: #fffaf0; stroke: #d8cfc0; stroke-width: 1; } /* 牙 */
/* 鬼つの装着中は全身が赤くなって鬼に */
.pig.equip-onituno .face { fill: #e0443a; stroke: #b8302a; }
.pig.equip-onituno .ear { fill: #d83a31; }
.pig.equip-onituno .cheek { fill: #c5362f; }
.pig.equip-onituno .nose, .pig.equip-onituno .nose-shadow { fill: #c5362f; }
.pig.equip-onituno .nostril { fill: #7d201c; }
.roompig.equip-onituno .rp-body { fill: #e0443a; }
.roompig.equip-onituno .rp-leg { fill: #d33d34; }
.roompig.equip-onituno .rp-tail-line { stroke: #c5362f; }
/* 鬼つの装着中は、体・顔が別物の特別キャラ（雪だるま/タコ/宇宙人/ユニコーン/おさる）も
   全身まっ赤になる（牙・ツノ・金棒は上に重なって表示される）。 */
.pig.equip-onituno .mk-fur,
.pig.equip-onituno .mk-ear,
.pig.equip-onituno .mk-face,
.pig.equip-onituno .uni-head,
.pig.equip-onituno .uni-ear,
.pig.equip-onituno .uni-muzzle,
.pig.equip-onituno .al-hand,
.pig.equip-onituno .al-knob { fill: #e0443a; }
.pig.equip-onituno .uni-head,
.pig.equip-onituno .uni-ear { stroke: #b8302a; }
.pig.equip-onituno .al-arm,
.pig.equip-onituno .al-antenna { stroke: #e0443a; }
.pig.equip-onituno .oct-arm,
.roompig.equip-onituno .rp-oct-arms path { stroke: #e0443a; }
.roompig.equip-onituno .rp-alien .rp-body { fill: #e0443a; }
/* 鬼の金棒（鬼つの装着中・体の横）。柄も頭もぜんぶ鉄色で一体 */
.rp-kanabo .kb-iron { fill: #6b7079; stroke: #474b52; stroke-width: 2.5; }
.rp-kanabo .kb-studs circle { fill: #c2c7cf; }
.acc-shop-karakon .kk-iris { fill: #9a7bff; stroke: #6a4fd0; stroke-width: 2.4; }
.acc-shop-karakon .kk-pupil { fill: #241a3a; }
.acc-shop-karakon .kk-shine { fill: #ffffff; }
.acc-shop-nekosuzu .sz-collar { fill: none; stroke: #e23b3b; stroke-width: 6; stroke-linecap: round; }
.acc-shop-nekosuzu .sz-bell { fill: #f6c739; stroke: #d49a1f; stroke-width: 2; }
.acc-shop-nekosuzu .sz-cap { fill: #e8b21f; }
.acc-shop-nekosuzu .sz-line { fill: none; stroke: #a9791a; stroke-width: 3; stroke-linecap: round; }
.acc-shop-nekosuzu .sz-hole { fill: #8a6314; }
.acc-shop-nekosuzu .sz-slit { fill: none; stroke: #8a6314; stroke-width: 2.6; stroke-linecap: round; }
/* ねこすず装着中：体がドラえもん（青い体＋白いおなか＋四次元ポケット） */
.roompig.equip-nekosuzu .rp-body { fill: #28a6e4; }       /* ドラえもんブルー */
.roompig.equip-nekosuzu .rp-leg { fill: #f4f8fc; }        /* 白い足 */
.roompig.equip-nekosuzu .rp-tail-line { stroke: #1f8fc6; }
.rp-dora .dr-belly { fill: #f4f9ff; stroke: #d4e4f0; stroke-width: 2; }
.rp-dora .dr-pocket { fill: #e8f2fb; stroke: #bcd4e6; stroke-width: 2; }
.acc-shop-pipe .pp-stem { fill: none; stroke: #5a3d28; stroke-width: 8; stroke-linecap: round; }
.acc-shop-pipe .pp-bowl { fill: #6e4a2e; stroke: #4a3320; stroke-width: 2.5; }
.acc-shop-pipe .pp-smoke { fill: none; stroke: #cfc8c8; stroke-width: 4; stroke-linecap: round; opacity: .85; }
.acc-shop-mayuge .my-brow { fill: #3a2d27; }
.acc-shop-halo .ha-ring { fill: none; stroke: #ffd21a; stroke-width: 8; }
.acc-shop-halo .ha-glow { fill: none; stroke: #fff3a0; stroke-width: 16; opacity: .45; }
/* 天使のわっか：装着中は全身がぼんやり明るく光る（いつも） */
.pig.equip-halo { filter: drop-shadow(0 0 6px rgba(255,246,196,.9)); }
.room-pig .roompig.equip-halo { filter: drop-shadow(0 0 7px rgba(255,246,196,.85)) drop-shadow(0 2px 2px rgba(80,40,55,.32)); }
.acc-shop-nosering .ns-ring { fill: none; stroke: #e8b23a; stroke-width: 4; }
.acc-shop-nosering .ns-bead { fill: #f6d36a; }
.acc-shop-strawhat .st-brim,
.acc-shop-strawhat .st-crown { fill: #e7c66e; stroke: #c9a23f; stroke-width: 2; }
.acc-shop-strawhat .st-band { fill: #ff8fb2; stroke: none; }

/* 表示ルール：装着クラスでそのアクセサリだけを表示 */
.pig.equip-mask         .acc-shop-mask,
.pig.equip-blackmask    .acc-shop-blackmask,
.pig.equip-tophat       .acc-shop-tophat,
.pig.equip-glasses      .acc-shop-glasses,
.pig.equip-scarf        .acc-shop-scarf,
.pig.equip-flower       .acc-shop-flower,
.pig.equip-headphone    .acc-shop-headphone,
.pig.equip-cap          .acc-shop-cap,
.pig.equip-ribbon2      .acc-shop-ribbon2,
.pig.equip-monocle      .acc-shop-monocle,
.pig.equip-earring      .acc-shop-earring,
.pig.equip-pearl        .acc-shop-pearl,
.pig.equip-bowtie       .acc-shop-bowtie,
.pig.equip-heartglasses .acc-shop-heartglasses,
.pig.equip-tiara        .acc-shop-tiara,
.pig.equip-usamimi      .acc-shop-usamimi,
.pig.equip-kumamimi     .acc-shop-kumamimi,
.pig.equip-nekomimi     .acc-shop-nekomimi,
.pig.equip-nosering     .acc-shop-nosering,
.pig.equip-strawhat     .acc-shop-strawhat,
.pig.equip-ninja        .acc-shop-ninja,
.pig.equip-yurei        .acc-shop-yurei,
.pig.equip-tsukematsu   .acc-shop-tsukematsu,
.pig.equip-mohawk       .acc-shop-mohawk,
.pig.equip-hachimaki    .acc-shop-hachimaki,
.pig.equip-onituno      .acc-shop-onituno,
.pig.equip-nekosuzu     .acc-shop-nekosuzu,
.pig.equip-pipe         .acc-shop-pipe,
.pig.equip-mayuge       .acc-shop-mayuge,
.pig.equip-halo         .acc-shop-halo,
.pig.equip-nusutto      .acc-shop-nusutto,
.pig.equip-santa        .acc-shop-santa,
.pig.equip-yukatam      .acc-shop-yukatam,
.pig.equip-yukataf      .acc-shop-yukataf,
.pig.equip-perm         .acc-shop-perm,
.pig.equip-thicksideburn .acc-shop-thicksideburn,
.pig.equip-kaeruzukin   .acc-shop-kaeruzukin,
.pig.equip-kinmic       .acc-shop-kinmic,
.pig.equip-ushitsuno    .acc-shop-ushitsuno,
.pig.equip-rapper       .acc-shop-rapper,
.pig.equip-chouchou     .acc-shop-chouchou,
.pig.equip-karakon      .acc-shop-karakon { opacity: 1; }
/* 金のマイク（ライブを5回で入手。歌手以外もステージで歌える） */
.acc-shop-kinmic .km-head { fill: #f3cd52; stroke: #d6a92f; stroke-width: 2; }
.acc-shop-kinmic .km-handle { fill: #6a5a2a; stroke: #4a3d1c; stroke-width: 1.5; }
.acc-shop-kinmic .km-grille { fill: none; stroke: #b9892a; stroke-width: 2; stroke-linecap: round; }
/* 隠しアイテム：パーマかつら（もこもこの巻き毛）／太いもみあげ */
.acc-shop-perm .pm-base { fill: #7a4a28; }
.acc-shop-perm .pm-curl { fill: #8a5832; stroke: #5e3819; stroke-width: 2.5; }
.acc-shop-thicksideburn .sb-burn { fill: #3a2c22; stroke: #261b14; stroke-width: 1.5; }
/* かえるずきん：緑のずきん＋ぱっちりカエル目 */
.acc-shop-kaeruzukin .kz-hood { fill: #5cba47; stroke: #3f8f33; stroke-width: 2.5; }
.acc-shop-kaeruzukin .kz-eye-w { fill: #fbfff5; stroke: #3f8f33; stroke-width: 2.5; }
.acc-shop-kaeruzukin .kz-eye-p { fill: #2a2a2a; }
.acc-shop-kaeruzukin .kz-eye-s { fill: #ffffff; }
/* かえるずきんのブタが広場でたまにぴょん跳ね */
.room-pig.froghop { animation: frogHop .6s ease-out; }
@keyframes frogHop {
  0% { transform: translateY(0) scaleX(1); }
  25% { transform: translateY(-26px) scaleX(.96); }
  50% { transform: translateY(-30px) scaleX(.96); }
  75% { transform: translateY(-6px) scaleX(1.04); }
  100% { transform: translateY(0) scaleX(1); }
}
/* 隠しアイテム：うしのツノ（角＋鼻の金のわっか） */
.acc-shop-ushitsuno .ut-horn { fill: #efe6cf; stroke: #c7b184; stroke-width: 2; }
.acc-shop-ushitsuno .ut-ring circle { fill: none; stroke: #f1c54a; stroke-width: 4.5; }
/* 隠しアイテム：ラッパーセット（黒サングラス＋金チェーン） */
.acc-shop-rapper .rp-shade { fill: #23242a; }
.acc-shop-rapper .rp-shade-br { fill: none; stroke: #23242a; stroke-width: 4; stroke-linecap: round; }
.acc-shop-rapper .rp-chain { fill: none; stroke: #f1c54a; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 5; }
.acc-shop-rapper .rp-medal { fill: #f3cd52; stroke: #d6a92f; stroke-width: 2; }
.acc-shop-rapper .rp-medal-s { fill: none; stroke: #b9892a; stroke-width: 2.5; stroke-linecap: round; }
/* ラッパー装着中はノリよく頭を振る */
.room-pig .roompig.equip-rapper { animation: rapperBob .56s ease-in-out infinite; }
@keyframes rapperBob { 0%, 100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-4px) rotate(2.5deg); } }
/* 隠しアイテム：ちょうちょセット（頭の触覚＋背中のはね） */
.acc-shop-chouchou .cc-ant { fill: none; stroke: #6b4a86; stroke-width: 4; stroke-linecap: round; }
.acc-shop-chouchou .cc-tip { fill: #ff7ec2; }
.rp-wings .cw-wing { fill: #ff8fd0; stroke: #e060a8; stroke-width: 2; opacity: .92; }
.rp-wings .cw-dot { fill: #fff3fb; }
.rp-wings { animation: wingFlap .5s ease-in-out infinite; transform-origin: 150px 200px; }
@keyframes wingFlap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.8); } }
/* ちょうちょ装着中はふわふわ浮く */
.room-pig .roompig.equip-chouchou { animation: chouchouFloat 2.1s ease-in-out infinite; }
@keyframes chouchouFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* ぬすっと頭巾（唐草の風呂敷） */
.acc-shop-nusutto .nt-cloth { fill: #4f8f4a; stroke: #356331; stroke-width: 2; }
.acc-shop-nusutto .nt-knot { fill: #58994f; stroke: #356331; stroke-width: 1.5; }
.acc-shop-nusutto .nt-end { fill: #4f8f4a; stroke: #356331; stroke-width: 1.5; }
.acc-shop-nusutto .nt-pat path { fill: none; stroke: #d3e8c4; stroke-width: 3; stroke-linecap: round; }
/* サンタぼうし＋おひげの配色 */
.acc-shop-santa .st-hat { fill: #d83b34; }
.acc-shop-santa .st-brim, .acc-shop-santa .st-pom { fill: #fbfdff; }
.acc-shop-santa .st-beard { fill: #fbfdff; stroke: #e3e9ef; stroke-width: 1.5; }
.acc-shop-santa .st-mustache { fill: #fbfdff; }
/* 浴衣：ショップ等の顔SVGでは衿だけ／広場では全身が浴衣（rp-yukata） */
.acc-shop-yukatam .yk-under, .acc-shop-yukataf .yk-under,
.rp-yukata .yk-under { fill: #f7f0e2; }
.acc-shop-yukatam .yk-collar { fill: #324c78; }
.acc-shop-yukataf .yk-collar { fill: #d96198; }
.acc-shop-yukataf .yk-flower circle { fill: #fff0f6; }
.acc-shop-yukataf .yk-flower .yk-flower-core { fill: #f4c64a; }
/* 広場：浴衣の全身（身ごろ＋衿＋帯） */
.rp-yukata.yk-m .yk-robe { fill: #3a5688; stroke: #2a3f66; stroke-width: 2.5; }
.rp-yukata.yk-f .yk-robe { fill: #e87aab; stroke: #cf5d92; stroke-width: 2.5; }
.rp-yukata.yk-m .yk-collar { fill: #2a3f66; }
.rp-yukata.yk-f .yk-collar { fill: #cf5d92; }
.rp-yukata.yk-m .yk-obi { fill: #d2b24a; stroke: #b08f2e; stroke-width: 1.5; }
.rp-yukata.yk-f .yk-obi { fill: #d23b5a; stroke: #ad2c46; stroke-width: 1.5; }
.rp-yukata .yk-knot { fill: #b89233; stroke: #94731f; stroke-width: 1.5; }
.rp-yukata .yk-bow { fill: #f3cd52; stroke: #d6a92f; stroke-width: 1.5; }
/* サンタ服：赤いコート＋黒ブーツ＋白い裾 */
.roompig.equip-santa .rp-body { fill: #d83b34; }
.roompig.equip-santa .rp-leg { fill: #3a3a40; }
.rp-santa .sa-belt { fill: #2a2a2e; }
.rp-santa .sa-buckle { fill: #e9c33a; stroke: #b9982a; stroke-width: 1.5; }
.rp-santa .sa-hem { fill: none; stroke: #fbfdff; stroke-width: 7; stroke-linecap: round; }
/* サンタのソリ（空を飛ぶとき＝.flying のときだけ表示） */
.rp-sleigh { opacity: 0; transition: opacity .2s; }
.room-pig.flying .rp-sleigh { opacity: 1; }
.rp-sleigh .sl-body { fill: #b5402f; stroke: #8a2c20; stroke-width: 2; }
.rp-sleigh .sl-runner { fill: none; stroke: #e9c33a; stroke-width: 4; stroke-linecap: round; }
/* 雪のソリ（ソリ滑り中＝.sledding のとき表示） */
.rp-sled { opacity: 0; transition: opacity .15s; }
.room-pig.sledding .rp-sled { opacity: 1; }
.rp-sled .sd-board { fill: #9a6a3c; stroke: #6f4a28; stroke-width: 2; }
.rp-sled .sd-runner { fill: none; stroke: #c9c9d2; stroke-width: 4; stroke-linecap: round; }

/* つけ耳を着けたらブタ本来の耳は隠す（耳が二重に／前に重なって見えないように） */
.pig.equip-usamimi  .ear,
.pig.equip-kumamimi .ear,
.pig.equip-nekomimi .ear { opacity: 0; }
/* 立派なまゆげを着けたら、もとの細い眉は隠す */
.pig.equip-mayuge .brow { opacity: 0; }

/* ショップのプレビューSVG（accessoryIconSvg）はアクセサリを常に表示 */
.acc-icon.show-acc .acc { opacity: 1; }
.acc-icon { width: 100%; height: 100%; display: block; }

/* ===================== アニメーション ===================== */
.nose-group { transform-box: fill-box; transform-origin: center; }
.nose-group.squish { animation: noseSquish .22s ease-out; }
@keyframes noseSquish {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.18, .75); }
  60%  { transform: scale(.95, 1.08); }
  100% { transform: scale(1, 1); }
}
#pig-game.wobble { animation: wobble .25s ease-out; }
@keyframes wobble {
  0% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  60% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}

@keyframes tremble {
  0% { transform: translate(0,0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, -1px); }
  100% { transform: translate(0,0); }
}

#shake-wrap.shake { animation: screenShake .4s ease-out; }
@keyframes screenShake {
  0%,100% { transform: translate(0,0); }
  15% { transform: translate(-10px, 4px) rotate(-1deg); }
  30% { transform: translate(9px, -6px) rotate(1deg); }
  45% { transform: translate(-8px, 6px); }
  60% { transform: translate(7px, -3px); }
  75% { transform: translate(-4px, 2px); }
}

.judge-text.pop { animation: judgePop .5s ease-out; }
@keyframes judgePop {
  0% { opacity: 0; transform: translateX(-50%) scale(.5); }
  25% { opacity: 1; transform: translateX(-50%) scale(1.15); }
  100% { opacity: 0; transform: translateX(-50%) scale(1); }
}

/* ===================== ブヒ部屋（癒し） ===================== */
/* ブヒ一覧も載るので上から積んでスクロール可能に */
#screen-room { justify-content: flex-start; overflow-y: auto; }
.room-title { color: var(--nose-deep); }
.room-hint { font-size: .9rem; opacity: .7; margin: 0; }

/* 広場／ブヒ一覧 のタブ */
.room-tabs { display: flex; gap: 8px; }
.room-tab {
  font: inherit; font-weight: 700; font-size: .95rem;
  border: none; border-radius: 999px; padding: 7px 20px; cursor: pointer;
  background: var(--card); color: var(--ink);
  box-shadow: 0 2px 6px rgba(180,90,120,.12);
}
.room-tab.active { background: var(--nose); color: #fff; }
.room-tab:active { transform: scale(.96); }
.room-tab[hidden] { display: none; }
/* タブの中身（広場／一覧）。アクティブな方だけ表示し、空きを埋める */
.room-tabpane { display: none; width: 100%; }
.room-tabpane.active { display: flex; flex: 1; min-height: 0; flex-direction: column; align-items: center; gap: 8px; }
#room-pigdex-pane.active { overflow-y: auto; }

/* 牧場：牧草の床＋柵（ピケット風の木枠）で囲う */
.room-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 6px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 16%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(180deg, #e9f7dc 0%, #cdeccd 55%, #b7e0a4 100%);
  border: 13px solid #c89b5e;
  border-image: repeating-linear-gradient(90deg, #cda064 0 14px, #ac7b3c 14px 19px) 13;
}
/* 牧草の茂み（装飾） */
.grass {
  position: absolute;
  width: clamp(20px, 6vw, 30px);
  transform-origin: bottom center;
  pointer-events: none;
}
.grass svg { width: 100%; height: auto; display: block; }
.room-pig {
  position: absolute;
  left: 40%; top: 40%;
  width: clamp(58px, 19vw, 92px);
  cursor: pointer;
  z-index: 3; /* どんぐりより前面（背景＜どんぐり＜ブタ） */
  /* 位置は requestAnimationFrame で毎フレーム更新（避けながら歩く）。CSSトランジションは付けない */
}
/* 歩行中だけ左右にゆれるワドル（外側） */
.room-pig.walking { animation: piggyWalk .42s ease-in-out infinite; }
@keyframes piggyWalk {
  0%, 100% { transform: rotate(-3.5deg) translateY(0); }
  50%      { transform: rotate(3.5deg) translateY(-2px); }
}
/* 宇宙：歩かずにぷかぷか漂う（ゆっくり上下＋ゆらゆら回転）。脚は動かさない */
.room-pig.rp-float { animation: piggyFloat 4.2s ease-in-out infinite; }
@keyframes piggyFloat {
  0%   { transform: translateY(0) rotate(-6deg); }
  50%  { transform: translateY(-7px) rotate(6deg); }
  100% { transform: translateY(0) rotate(-6deg); }
}
/* 雪景色：ブタはワドルせず、スーっと滑る（ゆっくり左右に傾くスケート風）。脚は止める。
   犬は駆け回るので除外（通常のワドル）、ネコはほぼ動かない。 */
.room-stage[data-scene="snow"] .room-pig.walking:not([data-char="wan"]) { animation: piggySlide 1.5s ease-in-out infinite; }
@keyframes piggySlide {
  0%, 100% { transform: rotate(-9deg) translateY(0); }
  50%      { transform: rotate(9deg) translateY(0); }
}
.room-stage[data-scene="snow"] .room-pig.walking:not([data-char="wan"]) .rp-leg-l,
.room-stage[data-scene="snow"] .room-pig.walking:not([data-char="wan"]) .rp-leg-r { animation: none; }

/* idleの呼吸はSVG側（外側のワドルと競合しないよう分離） */
.room-pig .roompig { width: 100%; height: auto; display: block; animation: roomBob var(--bob, 2.4s) ease-in-out infinite; filter: drop-shadow(0 2px 2px rgba(80,40,55,.32)); }
.room-nose-hit { cursor: pointer; }
/* ゆっきー：ころころ転がる（外側を一回転） */
.room-pig.rolling { animation: yukkiRoll .85s linear; }
@keyframes yukkiRoll { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* 浜辺のサッカーボール（ころころ転がる） */
.room-ball { position: absolute; width: clamp(26px, 8vw, 38px); z-index: 5; pointer-events: auto; cursor: pointer; transform: translate(-50%, -50%); }
.room-ball svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 2px rgba(80,70,40,.25)); }
/* 浜辺：バレーボールのネット（画面を縦に横切る。ブタ・ボールより後ろ） */
.room-volleynet { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); height: 66%; z-index: 1; pointer-events: none; }
.room-volleynet svg { height: 100%; width: auto; display: block; filter: drop-shadow(0 2px 2px rgba(80,70,40,.16)); }
.room-volleynet .vn-post { fill: #eaf0f5; stroke: #c4ccd5; stroke-width: 2; }
.room-volleynet .vn-tape { fill: #fbfdff; stroke: #d7dee6; stroke-width: 1.5; }
.room-volleynet .vn-tape-s { stroke: #fbfdff; stroke-width: 3; stroke-linecap: round; }
.room-volleynet .vn-mesh line { stroke: #ffffff; stroke-width: 1.4; opacity: .8; }
/* ボールの地面の影（高く上がるほど小さく薄く） */
.room-ball-shadow {
  position: absolute; width: clamp(22px, 6.5vw, 32px); height: 9px; z-index: 3; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(70,55,30,.45), rgba(70,55,30,0) 70%);
}
@keyframes roomBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* 体・脚・しっぽ（顔と同じピンクで統一。付属物だけキャラ別） */
.rp-body, .rp-leg { fill: var(--pink); }
.rp-tail-line { fill: none; stroke: var(--nose-deep); stroke-width: 9; stroke-linecap: round; }
.rp-bow { fill: #ff5d8f; }
.rp-tuft { fill: #ffe08a; }
.rp-spark { fill: #fff3a8; }
/* 猫は猫の体・犬は犬の体（部屋だけ。本編の顔色は変えない） */
.roompig.face-cat .rp-body, .roompig.face-cat .rp-leg { fill: #c8cdd7; }
.roompig.face-cat .face { fill: #d4d9e1; }
.roompig.face-cat .rp-tail-line { stroke: #a7adba; }
.roompig.face-dog .rp-body, .roompig.face-dog .rp-leg { fill: #e3c596; }
.roompig.face-dog .face { fill: #eed8af; }
.roompig.face-dog .rp-tail-line { stroke: #c6a368; }
/* タコたろー：体・顔を赤く、脚はタコ足に */
.roompig.face-octopus .rp-body { display: none; }   /* からだ無し */
.roompig.face-octopus .oct-arm { display: none; }    /* 顔側の足は隠し、rp-oct-arms を使う */
.roompig.face-octopus .face { fill: #e85563; }
.roompig.face-octopus .rp-oct-arms path { fill: none; stroke: #e85563; stroke-width: 13; stroke-linecap: round; }
/* 歩行中の脚ステップ */
.room-pig.walking .rp-leg-l { animation: rpStep .42s ease-in-out infinite; }
.room-pig.walking .rp-leg-r { animation: rpStep .42s ease-in-out infinite .21s; }
@keyframes rpStep { 50% { transform: translateY(-6px); } }
/* 寝るとき：横になって目を瞑る（bob・歩行・しっぽ停止） */
.room-pig.sleeping { animation: none; }
.room-pig.sleeping .roompig { animation: none; transform: rotate(74deg); transform-origin: 50% 80%; transition: transform .45s ease; }
.room-pig.sleeping .rp-wag { animation: none; }
.room-pig.sleeping .rp-face .eye { transform: scaleY(.12); }
.room-pig.sleeping .rp-face .eye-shine,
.room-pig.sleeping .rp-face .sparkle { opacity: 0; }
/* いびき（Zzz） */
.rp-snore { stroke: #7f97bd; stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.room-pig.sleeping .rp-snore { opacity: 1; animation: snore 2.2s ease-in-out infinite; }
@keyframes snore { 0% { transform: translateY(3px); opacity: .15; } 45% { opacity: 1; } 100% { transform: translateY(-9px); opacity: 0; } }
/* 犬・猫のしっぽふりふり */
.roompig.tail-wag .rp-wag { transform-box: fill-box; transform-origin: 20% 90%; animation: rpWag .5s ease-in-out infinite; }
@keyframes rpWag { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }

/* セリフ吹き出し：話したブタの頭上に出す。位置はJSがpxで指定しステージ内にクランプ */
.room-speech {
  position: absolute;
  left: 0; top: 0;
  max-width: min(70%, 200px);
  padding: 5px 12px;
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.25;
  text-align: center;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: scale(.6);
  transform-origin: center bottom;
  transition: opacity .15s, transform .15s;
  z-index: 7;
  white-space: normal;       /* 長文は折り返す（横に伸ばさない） */
  overflow-wrap: anywhere;
}
.room-speech.show { opacity: 1; transform: scale(1); }

.room-pokes-line { font-size: 1rem; font-weight: 700; margin: 0; }
.room-pokes-line b { color: var(--nose-deep); font-size: 1.2rem; }
.room-stat-sep { margin: 0 .5em; opacity: .45; }

/* ===================== 広場：時間帯・どんぐり・ハート・ホタル ===================== */
.room-stage { transition: background .8s linear; }
.room-stage[data-phase="morning"] { background: linear-gradient(180deg, #ffe6b0, #dff0c6 55%, #c6e6ac); }
.room-stage[data-phase="day"]     { background: radial-gradient(circle at 28% 16%, rgba(255,255,255,.35), transparent 55%), linear-gradient(180deg, #e9f7dc 0%, #cdeccd 55%, #b7e0a4 100%); }
.room-stage[data-phase="evening"] { background: linear-gradient(180deg, #ffb46e, #f0b07e 50%, #b6d496); }
.room-stage[data-phase="night"]   { background: linear-gradient(180deg, #56629a, #7983ad 55%, #7c977a); }

/* 風景（なでた鼻の累計で解放・入室ごとにランダム）。data-phase より後に置き、
   草原以外は時間帯背景を上書きする（草原は data-scene 背景を持たず時間帯を残す）。 */
.room-stage[data-scene="garden"] {
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.10), transparent 42%),
    linear-gradient(180deg, #cfeecb 0%, #aedd9f 55%, #93cf83 100%);
}
.room-stage[data-scene="onsen"] {
  background:
    radial-gradient(circle at 50% 2%, rgba(255,255,255,.5), transparent 46%),
    linear-gradient(180deg, #f3e6cf 0%, #ecdcc2 20%, #c7e3e7 40%, #9fd2dd 100%);
}
/* 湯船：下部に半透明の湯を前面に重ね、ブタの下半身が浸かって見える */
.onsen-water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, rgba(150,212,222,.5), rgba(108,190,206,.62));
  border-top: 3px solid rgba(255,255,255,.6);
}
/* 湯けむり（ふわっと立ちのぼる） */
.steam {
  position: absolute; width: clamp(26px, 8vw, 42px); height: clamp(26px, 8vw, 42px);
  border-radius: 50%; pointer-events: none; z-index: 6; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.55), transparent 68%);
  animation: steamRise 5s ease-in-out infinite;
}
@keyframes steamRise {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  30%  { opacity: .7; }
  100% { opacity: 0; transform: translateY(-72px) scale(1.6); }
}
/* アヒル（湯面をぷかぷか漂う） */
.onsen-duck { position: absolute; bottom: 42%; left: 12%; width: clamp(30px, 9vw, 46px); z-index: 6; pointer-events: none; animation: duckDrift 9s ease-in-out infinite; }
.onsen-duck svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 2px rgba(60,90,110,.3)); }
@keyframes duckDrift { 0%, 100% { transform: translateX(0) rotate(-3deg); } 50% { transform: translateX(64px) rotate(3deg); } }
/* 温泉ではほっぺが赤く（のぼせ） */
.room-stage[data-scene="onsen"] .room-pig .cheek { opacity: .7; }
.room-stage[data-scene="beach"] {
  background: linear-gradient(180deg, #45b4d4 0%, #62c2dd 9%, #e1f3ec 12%, #ffffff 15%, #ddc894 20%, #f1e2b2 32%, #efd79e 100%);
}
/* 浜辺：小さいカニ（横にゆっくり移動して消える） */
.room-crab { position: absolute; width: clamp(34px, 11vw, 52px); z-index: 5; pointer-events: none; will-change: left; }
.room-crab .crab-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 1px rgba(80,40,20,.25)); }
.room-crab .cr-body, .room-crab .cr-claw { fill: #ec5b3d; }
.room-crab .cr-arm { fill: none; stroke: #ec5b3d; stroke-width: 3; stroke-linecap: round; }
.room-crab .cr-leg { stroke: #d2492e; stroke-width: 2; stroke-linecap: round; }
.room-crab .cr-stalk { stroke: #c9442b; stroke-width: 2; }
.room-crab .cr-eye { fill: #2e1c28; }
.room-crab.walk .crab-svg { transform-origin: 50% 80%; animation: crabBob .34s ease-in-out infinite; }
@keyframes crabBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-2px) rotate(3deg); } }
.room-stage[data-scene="snow"] {
  background:
    radial-gradient(circle at 50% 6%, #ffffff 0 24%, transparent 55%),
    linear-gradient(180deg, #cfe3f2 0%, #e8f2f9 55%, #f7fbff 100%);
}
.room-stage[data-scene="sakura"] {
  background: linear-gradient(180deg, #ffd9e6 0%, #ffe7ef 50%, #f6cfb0 100%);
}
/* 桜の花びら（桜の風景だけ。外側で落下、内側で揺れ＋回転） */
.petal { position: absolute; top: -10%; display: none; pointer-events: none; animation: petalFall linear infinite; }
.room-stage[data-scene="sakura"] .petal { display: block; }
.petal-i {
  width: 100%; height: 100%;
  background: #ffc2d6; border-radius: 80% 5% 80% 5%;
  transform-origin: center; animation: petalSway ease-in-out infinite alternate;
}
@keyframes petalFall {
  0%   { top: -10%; opacity: 0; }
  8%   { opacity: .92; }
  90%  { opacity: .92; }
  100% { top: 108%; opacity: 0; }
}
@keyframes petalSway {
  0%   { transform: translateX(-10px) rotate(-25deg); }
  100% { transform: translateX(10px) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .petal { animation: none; display: none !important; }
}

/* 海の中：空気の泡（海の中の風景だけ。外側で上昇、内側で左右にゆらゆら） */
.bubble { position: absolute; bottom: -8%; display: none; pointer-events: none; animation: bubbleRise linear infinite; }
.room-stage[data-scene="sea"] .bubble { display: block; }
.bubble-i {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.95), rgba(255,255,255,.28) 55%, rgba(255,255,255,.06) 78%);
  box-shadow: inset 0 0 2px rgba(255,255,255,.6), 0 0 3px rgba(255,255,255,.25);
  transform-origin: center; animation: bubbleWobble ease-in-out infinite alternate;
}
@keyframes bubbleRise {
  0%   { bottom: -8%; opacity: 0; }
  12%  { opacity: .9; }
  88%  { opacity: .9; }
  100% { bottom: 106%; opacity: 0; }
}
@keyframes bubbleWobble {
  0%   { transform: translateX(-6px); }
  100% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; display: none !important; }
}

.room-stage[data-scene="space"] {
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 72% 18%, #fff, transparent),
    radial-gradient(2px 2px at 42% 58%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 68%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 84%, #fff, transparent),
    radial-gradient(2px 2px at 14% 78%, #fff, transparent),
    linear-gradient(180deg, #1a1338, #2a2058 60%, #3a2d5e);
}
/* 流れ星（宇宙）：頭が明るく尾を引く。ブタより後ろ（DOM先頭に挿入） */
.room-star {
  position: absolute; width: 64px; height: 3px; border-radius: 3px; pointer-events: none;
  transform-origin: left center; opacity: .95;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(190,220,255,.6) 60%, #ffffff);
  box-shadow: 0 0 6px rgba(200,225,255,.85);
}
/* UFO（宇宙）：なめらかに位置移動。ブタより後ろ */
.room-ufo {
  position: absolute; width: clamp(40px, 12vw, 58px); cursor: pointer; z-index: 4;
  transition: left 1.1s ease-in-out, top 1.1s ease-in-out;
}
.room-ufo svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 4px rgba(80,120,200,.5)); }
.room-ufo.uf-hit svg { animation: ufHit .18s ease; }
@keyframes ufHit { 0%,100% { transform: translateX(0) } 30% { transform: translateX(-3px) rotate(-6deg) } 70% { transform: translateX(3px) rotate(6deg) } }
.room-ufo.uf-crash { transition: top 1.1s cubic-bezier(.5,0,.9,.6), left 1.1s ease-in, transform 1.1s ease-in, opacity 1.1s ease-in; pointer-events: none; }

/* にじのくに：空を駆ける虹のユニコーン */
.room-unicorn {
  position: absolute; width: clamp(46px, 13vw, 66px); cursor: pointer; z-index: 4;
  transition: left 1.0s ease-in-out, top 1.0s ease-in-out;
}
.room-unicorn svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 4px rgba(150,110,200,.45)); overflow: visible; }
.room-unicorn .un-tail path { fill: none; stroke-width: 2.6; stroke-linecap: round; } /* 虹色のしっぽ */
.room-unicorn.un-hit svg { animation: unHit .2s ease; }
@keyframes unHit { 0%,100% { transform: translateY(0) } 40% { transform: translateY(-4px) rotate(-5deg) } 70% { transform: translateY(2px) rotate(5deg) } }
.room-unicorn.un-loop svg { animation: unLoop .9s cubic-bezier(.4,0,.5,1); transform-origin: center; }
@keyframes unLoop { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.12); } 100% { transform: rotate(360deg) scale(1); } }
/* 虹のかけら（宙返りで撒かれるきらきら→どんぐり） */
.room-stardust {
  position: absolute; z-index: 5; pointer-events: none; font-size: clamp(13px, 3.4vw, 18px);
  text-shadow: 0 0 4px rgba(255,255,255,.9); animation: stardustFall 1.4s ease-out forwards;
}
@keyframes stardustFall {
  0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(180deg); }
}

/* 温泉：湯につかりに来る温泉ザル。湯（onsen-water z5）より後ろ＝肩までつかって見える */
.room-monkey {
  position: absolute; width: clamp(40px, 12vw, 56px); cursor: pointer; z-index: 4;
  transition: left 2s ease-in-out, top 2s ease-in-out;
  animation: monkeyBob 2.4s ease-in-out infinite;
}
.room-monkey svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 3px rgba(80,60,50,.35)); }
.room-monkey .mz-body, .room-monkey .mz-head, .room-monkey .mz-ear { fill: #b29b86; }
.room-monkey .mz-ear-in { fill: #e8a59c; }
.room-monkey .mz-face { fill: #ef9a93; stroke: #e1857d; stroke-width: 1.4; }
.room-monkey .mz-eye { fill: none; stroke: #3a2a2a; stroke-width: 1.8; stroke-linecap: round; }
.room-monkey .mz-nostril { fill: #c56b63; }
.room-monkey .mz-mouth { fill: none; stroke: #b5564d; stroke-width: 1.8; stroke-linecap: round; }
.room-monkey .mz-cheek { fill: #f6b6af; }
@keyframes monkeyBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.room-monkey.mz-hit svg { animation: mzHit .22s ease; }
@keyframes mzHit { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12) rotate(-4deg); } 70% { transform: scale(1.08) rotate(4deg); } }
.room-monkey.mz-happy { animation: monkeyHappy .45s ease-in-out 3; }
@keyframes monkeyHappy { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
.room-monkey.mz-leave { transition: top .9s ease-in, opacity .9s ease-in; top: 120% !important; opacity: 0; pointer-events: none; }

.room-stage[data-scene="flower"] {
  background: linear-gradient(180deg, #bfe8ff 0%, #d8f3c8 52%, #a8dd86 100%);
}
/* お花畑：散らした色とりどりの花（ブタより後ろ・装飾） */
.room-flower { position: absolute; width: clamp(15px, 4.6vw, 24px); transform-origin: center bottom; cursor: pointer; pointer-events: auto; z-index: 2; }
.room-flower svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 1px 1px rgba(80,60,90,.18)); }
/* 花をつむ：ポンッとはじけて消える／新しく咲くときはにょきっと育つ */
.room-flower.picked { pointer-events: none; animation: flowerPick .26s ease-out forwards; }
@keyframes flowerPick { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.room-flower.sprout { animation: flowerSprout .4s ease-out; }
@keyframes flowerSprout { 0% { transform: scale(0); } 100% { transform: scale(1); } }
/* つんだ瞬間に舞う花びら */
.petal-burst { position: absolute; width: 9px; height: 9px; border-radius: 50% 50% 50% 0; pointer-events: none; z-index: 4; animation: petalBurst .85s ease-out forwards; }
@keyframes petalBurst {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(200deg); }
}
/* ちょうちょ（お花畑・ブタより前で舞う） */
.room-butterfly { position: absolute; width: clamp(18px, 5vw, 26px); z-index: 3; pointer-events: none; }
.room-butterfly svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 1px 1px rgba(80,60,90,.2)); }
.room-butterfly .bf-wings { transform-box: fill-box; transform-origin: center; animation: flutter .22s ease-in-out infinite alternate; }
@keyframes flutter { from { transform: scaleX(1); } to { transform: scaleX(.45); } }
/* ハチ（お花畑・たまに飛来。ブタが逃げ惑う） */
.room-bee { position: absolute; width: clamp(22px, 6vw, 32px); z-index: 4; pointer-events: none; }
.room-bee svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.room-bee .be-wing { transform-box: fill-box; transform-origin: center; animation: flutter .1s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .room-butterfly .bf-wings, .room-bee .be-wing { animation: none; }
}
.room-stage[data-scene="autumn"] {
  background: linear-gradient(180deg, #ffd9a0 0%, #ffb56b 45%, #d9742f 100%);
}
/* 紅葉：もみじの落ち葉（ブタより後ろ）。ブタが通るとスッと滑って散らかる */
.room-leaf { position: absolute; width: clamp(16px, 4.6vw, 24px); transform-origin: center; cursor: pointer; z-index: 2; pointer-events: auto; transition: left .45s ease-out, top .45s ease-out, transform .45s ease-out; }
.room-leaf svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 1px 1px rgba(90,50,20,.28)); }

/* 紅葉：焚き火（落ち葉に着火→5秒燃える） */
.room-bonfire { position: absolute; width: clamp(46px, 13vw, 64px); transform: translate(-50%, -78%); z-index: 2; pointer-events: none; }
.room-bonfire svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 4px rgba(120,40,0,.4)); }
.room-bonfire .bf-base { fill: rgba(60,30,10,.28); }
.room-bonfire .bf-log { fill: #7a4a26; }
.room-bonfire .bf-fl-o { fill: #ff8a1e; }
.room-bonfire .bf-fl-i { fill: #ffd23e; }
.room-bonfire .bf-flames { transform-box: fill-box; transform-origin: 50% 100%; animation: bonfireFlicker .26s ease-in-out infinite alternate; }
.room-bonfire .bf-fl-i { animation: bonfireInner .19s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes bonfireFlicker { 0% { transform: scaleY(.92) scaleX(1.04) rotate(-2deg); } 100% { transform: scaleY(1.08) scaleX(.95) rotate(2deg); } }
@keyframes bonfireInner { 0% { transform: scaleY(.85) translateY(2px); } 100% { transform: scaleY(1.12) translateY(-1px); } }

/* 紅葉：焼き芋（焚き火が燃え尽きると現れる） */
.room-yam { position: absolute; width: clamp(26px, 7vw, 36px); transform: translate(-50%, -50%); z-index: 2; pointer-events: none; animation: yamPop .35s ease-out; }
.room-yam svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 2px rgba(80,40,60,.35)); }
.room-yam .ym-skin { fill: #8b3a86; }
.room-yam .ym-flesh { fill: #ffd86b; }
@keyframes yamPop { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* おならのもくもく */
.room-puff { position: absolute; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; font-size: clamp(16px, 5vw, 24px); animation: puffRise .9s ease-out forwards; }
@keyframes puffRise { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; } 25% { opacity: .9; } 100% { transform: translate(-50%, -160%) scale(1.3); opacity: 0; } }
/* 忍者頭巾：消える（ドロン）／分身／そのときの煙 */
.room-pig.ninja-gone { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.room-clone { pointer-events: none; }
.room-ninja-smoke {
  position: absolute; width: clamp(48px, 15vw, 74px); z-index: 7; pointer-events: none;
  transform: translate(-30%, -40%); animation: ninjaPoof .8s ease-out forwards;
}
.room-ninja-smoke svg { width: 100%; height: auto; display: block; }
.room-ninja-smoke circle { fill: #dde1e7; }
@keyframes ninjaPoof {
  0% { opacity: 0; transform: translate(-30%, -40%) scale(.3); }
  30% { opacity: .95; }
  100% { opacity: 0; transform: translate(-30%, -55%) scale(1.6); }
}
/* カゼマスク：くしゃみ（びくっと前のめり）／寒気（小刻みに震える） */
.room-pig.sneezing { animation: roomSneeze .55s ease; }
@keyframes roomSneeze {
  0% { transform: translateY(0) scale(1, 1); }
  35% { transform: translateY(-3px) scale(1.06, .94); }
  55% { transform: translateY(4px) scale(.9, 1.1); }
  100% { transform: translateY(0) scale(1, 1); }
}
.room-pig.shivering { animation: roomShiver .12s linear infinite; }
@keyframes roomShiver { 0%, 100% { transform: translateX(-1.6px); } 50% { transform: translateX(1.6px); } }
/* うさみみ：その場でぴょんぴょん跳ねる */
.room-pig.hopping { animation: roomHop .4s ease-in-out infinite; }
@keyframes roomHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-15px); } }
/* パイプ：煙のわっか（ふわっと上って広がりながら消える） */
.room-smokering {
  position: absolute; width: clamp(22px, 7vw, 34px); z-index: 6; pointer-events: none;
  transform: translate(-50%, -50%); animation: smokeRingRise 2.6s ease-out forwards;
}
.room-smokering svg { width: 100%; height: auto; display: block; }
.room-smokering .sm-p { fill: rgba(208,210,218,.8); }
@keyframes smokeRingRise {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  22% { opacity: .85; }
  100% { opacity: 0; transform: translate(calc(-50% + 10px), -240%) scale(1.7); }
}
.room-stage[data-scene="sea"] {
  background:
    radial-gradient(5px 5px at 25% 30%, rgba(255,255,255,.5) 60%, transparent 62%),
    radial-gradient(4px 4px at 60% 50%, rgba(255,255,255,.4) 60%, transparent 62%),
    radial-gradient(6px 6px at 80% 24%, rgba(255,255,255,.4) 60%, transparent 62%),
    linear-gradient(180deg, #3fb6d6 0%, #1f8fc0 50%, #0f6f9e 100%);
}
.room-stage[data-scene="rainbow"] {
  background: linear-gradient(180deg, #ff9aa2, #ffd59a, #fff6a0, #a8e6a0, #9ad0ff, #c9a8ff);
}
/* 夏祭り：夜空＋ぼんやり地面 */
.room-stage[data-scene="matsuri"] {
  background:
    radial-gradient(4px 4px at 22% 18%, rgba(255,255,255,.5) 60%, transparent 62%),
    radial-gradient(3px 3px at 70% 12%, rgba(255,255,255,.4) 60%, transparent 62%),
    radial-gradient(3px 3px at 48% 26%, rgba(255,255,255,.4) 60%, transparent 62%),
    linear-gradient(180deg, #2a2350 0%, #3b2f63 42%, #6b4b6e 72%, #7a5a52 100%);
}
/* 提灯ガーランド */
.matsuri-lantern {
  position: absolute; width: clamp(15px, 4.4vw, 22px); height: clamp(20px, 5.6vw, 30px);
  background: var(--lc); border-radius: 46%; z-index: 2; pointer-events: none;
  box-shadow: inset 0 -3px 5px rgba(0,0,0,.18), 0 0 8px rgba(255,180,80,.35);
}
.matsuri-lantern::before { content: ""; position: absolute; top: -7px; left: 50%; width: 2px; height: 7px; background: #4a3520; transform: translateX(-50%); }
.matsuri-lantern::after { content: ""; position: absolute; bottom: -3px; left: 50%; width: 8px; height: 4px; background: #f0c64a; border-radius: 0 0 2px 2px; transform: translateX(-50%); }
/* 屋台 */
.matsuri-stall { position: absolute; right: 3%; bottom: 6%; width: clamp(72px, 22vw, 120px); z-index: 2; pointer-events: none; }
.matsuri-stall svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.matsuri-stall .ya-post { fill: #6f4a2a; }
.matsuri-stall .ya-counter { fill: #c89a5e; stroke: #9c7340; stroke-width: 1.5; }
.matsuri-stall .ya-awning { fill: #d63a32; }
.matsuri-stall .ya-stripe { fill: #fbf3e8; }
.matsuri-stall .ya-sign { fill: #fbf3e8; stroke: #d63a32; stroke-width: 2; }
/* 中心の大太鼓：配置とサイズの基準のみここで持つ。見た目・タップ判定・鼓動アニメは
   matsuri-upgrade.css（再設計版SVG）が担当する。 */
.matsuri-taiko { position: absolute; width: 24%; z-index: 2; cursor: pointer; transform: translate(-50%, -50%); }
.matsuri-taiko svg { width: 100%; height: auto; display: block; }
/* 打ち上げ花火 */
.firework { position: absolute; width: clamp(64px, 20vw, 110px); transform: translate(-50%, -50%); z-index: 1; pointer-events: none; animation: fwBurst 1.2s ease-out forwards; }
.firework svg { width: 100%; height: auto; display: block; }
.firework .fw-ray { stroke: hsl(var(--fh) 90% 66%); stroke-width: 2.5; stroke-linecap: round; }
.firework .fw-dot { fill: hsl(var(--fh) 92% 72%); }
@keyframes fwBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}

/* 風景に合わせた枠（border-image）。幅は基本の13pxのまま色味だけ変える。
   grass / garden / wood は自然な木枠（既定）のまま。 */
.room-stage[data-scene="beach"]  { border-image: repeating-linear-gradient(90deg, #ecd28f 0 14px, #d3a85f 14px 19px) 13; } /* 流木・砂 */
.room-stage[data-scene="snow"]   { border-image: repeating-linear-gradient(90deg, #eaf6ff 0 14px, #bcdcf2 14px 19px) 13; } /* 氷 */
.room-stage[data-scene="sakura"] { border-image: repeating-linear-gradient(90deg, #ffd9e6 0 14px, #f4a6c4 14px 19px) 13; } /* 桜色 */
.room-stage[data-scene="space"]  { border-image: repeating-linear-gradient(90deg, #4a4f73 0 14px, #272b46 14px 19px) 13; } /* メタリック */
.room-stage[data-scene="flower"] { border-image: repeating-linear-gradient(90deg, #a6d977 0 14px, #76b743 14px 19px) 13; } /* 葉っぱ */
.room-stage[data-scene="autumn"] { border-image: repeating-linear-gradient(90deg, #e09a4a 0 14px, #a85a26 14px 19px) 13; } /* 紅葉色 */
.room-stage[data-scene="sea"]    { border-image: repeating-linear-gradient(90deg, #5cc6d6 0 14px, #2f97a8 14px 19px) 13; } /* 海色 */
.room-stage[data-scene="rainbow"] { border-image: linear-gradient(90deg, #ff6b6b, #ffb14e, #ffe14e, #6fdc6f, #5bc7ff, #b88bff) 13; } /* 虹 */
.room-stage[data-scene="matsuri"] { border-image: repeating-linear-gradient(90deg, #d63a32 0 14px, #fbf3e8 14px 19px) 13; } /* 紅白幕 */

/* 雪だるま（ブタだるま）：雪景色にランダム2体 */
.room-snowman { position: absolute; width: clamp(36px, 12vw, 56px); cursor: pointer; z-index: 4; transition: transform .12s ease; }
.room-snowman svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 3px rgba(90,100,130,.28)); }
.room-snowman.sm-hit { animation: smHit .18s ease; }
@keyframes smHit { 0%,100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(-3px) rotate(-5deg); } 70% { transform: translateX(3px) rotate(5deg); } }
.room-snowman.sm-break { animation: smBreak .6s ease forwards; pointer-events: none; }
@keyframes smBreak { 0% { transform: scale(1) translateY(0); opacity: 1; } 40% { transform: scale(1.15) translateY(-2px); } 100% { transform: scale(.3) translateY(14px) rotate(20deg); opacity: 0; } }
.sm-body, .sm-head { fill: #fbfdff; stroke: #dbe6f0; stroke-width: 1.5; }
.sm-snout { fill: #ffc8d8; }
.sm-nostril { fill: #e69bb0; }
.sm-eye { fill: #4a4a55; }

/* 池の魚（庭の池にたまに泳ぐ） */
.room-fish { position: absolute; width: clamp(24px, 7vw, 34px); z-index: 1; pointer-events: none; }
.room-fish svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 1px 1px rgba(20,80,110,.3)); }
.room-fish.flip { transform: scaleX(-1); }

/* 竜宮城（海の中・ブタが避けて泳ぐ）。ブタより奥のレイヤー */
.room-ryugu { position: absolute; width: clamp(86px, 28vw, 150px); z-index: 1; pointer-events: none; }
.room-ryugu svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 4px rgba(10,60,90,.4)); }
/* 海の生き物（イカ・タコ・タイ）。ブタ(3)の1つ後ろ＝z-index 2 */
.room-swimmer { position: absolute; width: clamp(30px, 8vw, 44px); z-index: 2; pointer-events: none; }
.room-swimmer svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 1px 2px rgba(10,60,90,.32)); }
.room-swimmer.flip { transform: scaleX(-1); }
/* 海の中ではブタは歩かず泳ぐ（足踏みをやめ、ゆらりと揺れる） */
.room-stage[data-scene="sea"] .room-pig.walking { animation: piggySwim 1.4s ease-in-out infinite; }
.room-stage[data-scene="sea"] .room-pig.walking .rp-leg-l,
.room-stage[data-scene="sea"] .room-pig.walking .rp-leg-r { animation: none; }
@keyframes piggySwim {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50% { transform: rotate(7deg) translateY(-3px); }
}
/* 海の中：泳ぎ達者なブタは泳ぎ方が違う（足踏みはしない） */
.room-stage[data-scene="sea"] .room-pig.swim-dog .rp-leg-l,
.room-stage[data-scene="sea"] .room-pig.swim-dog .rp-leg-r,
.room-stage[data-scene="sea"] .room-pig.swim-tako .rp-leg-l,
.room-stage[data-scene="sea"] .room-pig.swim-tako .rp-leg-r,
.room-stage[data-scene="sea"] .room-pig.swim-frog .rp-leg-l,
.room-stage[data-scene="sea"] .room-pig.swim-frog .rp-leg-r { animation: none; }
/* わんたろう：いぬかき（小刻みに前へかく） */
.room-stage[data-scene="sea"] .room-pig.swim-dog { animation: dogPaddle .34s ease-in-out infinite; }
@keyframes dogPaddle {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-2px); }
}
/* たこたろー：タコ泳ぎ（伸び縮みのジェット推進） */
.room-stage[data-scene="sea"] .room-pig.swim-tako { animation: takoSwim .9s ease-in-out infinite; }
@keyframes takoSwim {
  0%, 100% { transform: scale(1, 1) translateY(0); }
  40% { transform: scale(1.12, .84) translateY(3px); }
  70% { transform: scale(.9, 1.12) translateY(-5px); }
}
/* かえるずきん：カエル泳ぎ（足を広げて蹴り→すーっと伸びる） */
.room-stage[data-scene="sea"] .room-pig.swim-frog { animation: frogSwim .9s ease-in-out infinite; }
@keyframes frogSwim {
  0%, 100% { transform: scaleX(1) scaleY(1) translateY(0); }
  32% { transform: scaleX(1.2) scaleY(.86) translateY(0); }
  58% { transform: scaleX(.9) scaleY(1.08) translateY(-4px); }
}

/* 池（庭の中央）。白枠ではなく、芝に溶け込むやわらかい縁にする */
.room-pond {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 32%, #cdeff8, #79ccea 50%, #3fa6d2 100%);
  box-shadow:
    inset 0 6px 14px rgba(255,255,255,.40),
    inset 0 -12px 18px rgba(18,86,116,.30),
    0 0 0 5px rgba(126,176,96,.45),
    0 0 16px 11px rgba(150,196,120,.32);
}

/* ホタル（草原の夜だけ） */
.firefly {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #fff3a0; box-shadow: 0 0 8px 2px rgba(255,240,150,.8);
  opacity: 0; pointer-events: none; display: none;
}
.room-stage[data-scene="grass"][data-phase="night"] .firefly { display: block; animation: firefly 3s ease-in-out infinite; }
@keyframes firefly { 0%, 100% { opacity: 0; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-8px); } }

/* どんぐり */
.room-acorn { position: absolute; width: clamp(22px, 6vw, 30px); cursor: pointer; z-index: 2; color: #b5793b; animation: acornDrop .4s ease-out; }
.room-acorn .ic { width: 100%; height: auto; }
.room-acorn:active { transform: scale(.9); }
@keyframes acornDrop { 0% { transform: translateY(-14px) scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0) scale(1); } }

/* ふわっと上がるハート／＋1 */
.room-heart { position: absolute; transform: translateX(-50%); color: #ff6f9c; pointer-events: none; z-index: 6; animation: roomFloat 1.6s ease-out forwards; }
.room-heart .ic { width: 18px; height: 18px; }
.room-plus { position: absolute; transform: translateX(-50%); color: #b5793b; font-weight: 800; font-size: .9rem; pointer-events: none; z-index: 6; animation: roomFloat 1s ease-out forwards; }
@keyframes roomFloat { 0% { opacity: 0; transform: translate(-50%, 0) scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -42px) scale(1); } }

/* タコたろーの墨（黒い雲がふわっと広がって消える） */
.room-ink {
  position: absolute; width: 64px; height: 64px; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; z-index: 7;
  background: radial-gradient(circle, rgba(28,18,38,.88), rgba(28,18,38,.55) 50%, transparent 72%);
  animation: inkPuff 1.4s ease-out forwards;
}
@keyframes inkPuff {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  18%  { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
}

/* 桜：お猪口（お花見の盃）。地面に置かれ、飲み手が寄って飲む */
.room-sake { position: absolute; width: clamp(18px, 5vw, 26px); transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
.room-sake svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 2px rgba(120,60,40,.3)); }
.room-sake .sk-bottle, .room-sake .sk-neck { fill: #2f6b3f; stroke: #1f4a2c; stroke-width: 1.4; } /* 一升瓶（緑のガラス） */
.room-sake .sk-cap { fill: #d4a838; stroke: #a9801f; stroke-width: 1; }
.room-sake .sk-label { fill: #fbf6ea; stroke: #e0d6bf; stroke-width: 1; }
.room-sake .sk-text { fill: #b3402a; font-weight: 800; font-size: 12px; font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", serif; }
/* 桜：三色だんご（みんなで食べる） */
.room-dango { position: absolute; width: clamp(16px, 4.6vw, 24px); transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
.room-dango svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 2px rgba(120,80,60,.3)); }
.room-dango .dg-stick { stroke: #c9a06a; stroke-width: 2.4; stroke-linecap: round; }
.room-dango .dg-ball { stroke: rgba(150,110,90,.35); stroke-width: 1; }
.room-dango .dg-p { fill: #f6aecb; }
.room-dango .dg-w { fill: #fbf3e8; }
.room-dango .dg-g { fill: #bcdd8e; }
/* ほろ酔い：ほっぺを赤く、ふらふら揺れる */
.room-pig.tipsy .cheek { opacity: .85; }
.room-pig.tipsy { animation: tipsyWobble 1.1s ease-in-out infinite; }
@keyframes tipsyWobble { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
/* 千鳥足：左右にふらつきながら大きく傾く（酔っぱらいモード） */
.room-pig.drunk { animation: drunkStagger 1.2s ease-in-out infinite; }
@keyframes drunkStagger {
  0%   { transform: translateX(-5px) rotate(-9deg); }
  25%  { transform: translateX(4px)  rotate(6deg); }
  50%  { transform: translateX(-4px) rotate(-6deg); }
  75%  { transform: translateX(5px)  rotate(9deg); }
  100% { transform: translateX(-5px) rotate(-9deg); }
}

/* 新キャラ解放トースト（画面中央にふわっと） */
.unlock-toast {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.8);
  z-index: 60; pointer-events: none; opacity: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 26px; border-radius: 20px; text-align: center;
  background: rgba(255, 255, 255, .96); box-shadow: 0 12px 34px rgba(180, 90, 120, .35);
  border: 3px solid var(--nose);
}
.unlock-toast.show { animation: unlockPop 3.8s ease-out forwards; }
.unlock-toast .ut-burst { font-size: 1.8rem; }
.unlock-toast .ut-head { font-weight: 800; color: var(--nose-deep); font-size: 1.05rem; }
.unlock-toast .ut-name { font-weight: 800; font-size: 1.3rem; color: var(--ink); }
.unlock-toast .ut-sub { font-size: .72rem; opacity: .65; }
@keyframes unlockPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  16%  { transform: translate(-50%, -50%) scale(1); }
  88%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(.96); }
}

/* ===================== レスポンシブ ===================== */
@media (min-width: 521px) {
  body { background: linear-gradient(160deg, #ffdcea, #ffeccb 55%, #d7eeff); }
  #app { box-shadow: 0 0 60px rgba(180,90,120,.18); background: linear-gradient(160deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3)); }
}
@media (prefers-reduced-motion: reduce) {
  *, .floating { animation: none !important; transition: none !important; }
}

/* タイトル画面：プライバシーポリシーへの小さなリンク */
.title-policy { margin-top: 14px; font-size: .72rem; }
.title-policy a { color: #b98ea0; text-decoration: underline; }