/* =========================================================
   酒と私 — character.css
   画面下を歩き回る女将ミニキャラの見た目
   （DOMは js/character.js が #okami-root に生成します）
   ========================================================= */

/* ---- 舞台：画面下いっぱい。ページ操作の邪魔はしない ---- */
.okami-stage {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;               /* 高さ0でもキャラは下端基準ではみ出して見える */
  z-index: var(--z-okami);
  pointer-events: none;    /* 舞台自体はクリックを素通し */
}

/* ---- 女将本体：ここだけクリックできる ---- */
.okami {
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* スプライト画像（高さはJSが OKAMI_SETTINGS から上書きする） */
.okami-sprite {
  display: block;
  height: 110px;
  width: auto;
}

/* 左向きのときは絵ごと反転（絵は1方向だけ用意すればよい） */
.okami-flip { transform-origin: 50% 100%; }
.okami-flip.face-left { transform: scaleX(-1); }

/* ---- ドット絵（ピクセルアート）モード ----
   character-sprites.js の pixelArt を true にすると有効。
   縮小してもドットがぼやけず、カクカクの輪郭のまま表示される */
.okami.is-pixel .okami-sprite {
  image-rendering: pixelated;
}

/* ---- 歩行中のかすかな上下バウンス ---- */
.okami-body { transform-origin: 50% 100%; }
.okami.is-walking .okami-body {
  animation: okami-bob 0.66s ease-in-out infinite;
}
@keyframes okami-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ---- 酔っ払いの千鳥足ゆらゆら ---- */
.okami.is-drunk .okami-body {
  animation: okami-sway 1.4s ease-in-out infinite;
}
@keyframes okami-sway {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-2px); }
}

/* ---- うたた寝：こっくりこっくり（ゆっくり寝息） ---- */
.okami.is-sleeping .okami-body {
  animation: okami-breathe 3.2s ease-in-out infinite;
}
@keyframes okami-breathe {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(3deg) translateY(1px); }
}

/* ---- 小ジャンプ「ぴょこっ」（酔っ払い中にクリックされたとき）
       ※千鳥足より後ろに書いて優先させる ---- */
.okami .okami-body.is-hop {
  animation: okami-hop 0.5s ease-out;
}
@keyframes okami-hop {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-16px) rotate(2deg); }
  70%  { transform: translateY(0); }
  85%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* ---- 音符（♪♫）：頭の上からふわふわ上昇して消える ---- */
.okami-notes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;   /* キャラの頭上 */
  height: 0;
  pointer-events: none;
}
.okami-note {
  position: absolute;
  bottom: 0;
  font-family: var(--font-mincho);
  color: var(--murasaki-koi);
  opacity: 0;
  will-change: transform, opacity;
  animation: okami-note-rise 1.8s ease-out forwards;
}
.okami-note.is-shu { color: var(--shu); }
@keyframes okami-note-rise {
  0%   { opacity: 0;    transform: translateY(8px)   scale(0.7) rotate(-10deg); }
  20%  { opacity: 0.95; }
  100% { opacity: 0;    transform: translateY(-68px) scale(1.05) rotate(12deg); }
}

/* 寝息の Z：ゆっくり斜め上にただよう */
.okami-note.is-zzz {
  color: var(--sumi-usu);
  animation: okami-zzz-rise 2.6s ease-out forwards;
}
@keyframes okami-zzz-rise {
  0%   { opacity: 0;    transform: translate(0, 6px)      scale(0.7); }
  20%  { opacity: 0.8; }
  100% { opacity: 0;    transform: translate(16px, -54px) scale(1.15); }
}

/* かまってもらえた時の ♡ */
.okami-note.is-heart { color: var(--shu); }

/* ---- 吹き出し（生成り地に墨文字・上品に） ---- */
.okami-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translateX(-50%) scale(0.85);
  background: var(--kinari);
  color: var(--sumi);
  border: 1.5px solid var(--sumi-usu);
  border-radius: 10px;
  padding: 4px 12px;
  font-family: var(--font-mincho);
  font-size: 13px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(43, 36, 38, 0.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* 吹き出しのしっぽ */
.okami-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--sumi-usu);
}
.okami-bubble.is-show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ---- 「動きを減らす」設定の人向け：右下に静かに立つだけ ---- */
.okami.is-static {
  left: auto;
  right: 14px;
  cursor: default;
  transform: none;
}

/* ---- スマホ（600px未満）は小さめに ---- */
@media (max-width: 599px) {
  .okami-sprite { height: 80px; } /* JSも heightMobile で同じ値を入れる */
  .okami-bubble { font-size: 12px; padding: 3px 10px; }
}