/* ============================================================
   マスコット共通スタイル & 5体の造形
   癒し系パステルパレット / ふわふわ・まばたきアニメ
   ============================================================ */

:root {
  --cream:  oklch(0.972 0.012 85);
  --paper:  oklch(0.995 0.005 90);
  --ink:    oklch(0.36 0.022 60);
  --ink-soft: oklch(0.50 0.02 60);

  --peach:  oklch(0.80 0.075 55);
  --peach-d: oklch(0.72 0.085 50);
  --sky:    oklch(0.80 0.065 235);
  --sky-d:  oklch(0.72 0.07 235);
  --sage:   oklch(0.80 0.055 150);
  --sage-d: oklch(0.72 0.06 150);
  --butter: oklch(0.88 0.08 92);
  --blush:  oklch(0.78 0.10 22);
}

/* ---------- 共通 wrapper ---------- */
.mascot { position: relative; display: grid; place-items: center; }
.mascot .bob { position: relative; animation: floaty 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
.mascot.pose-sleep .bob { animation: breathe 4.2s ease-in-out infinite; }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(-0.5deg); }
}
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(2px) scale(1.015); }
}

/* ---------- 目・まばたき 共通 ---------- */
.eye {
  width: 13px; height: 15px; background: var(--ink);
  border-radius: 50%;
  animation: blink 5.2s ease-in-out infinite;
  transform-origin: 50% 50%;
}
.eye::after {            /* ハイライト */
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.85);
}
.eye { position: relative; }
@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(0.12); }
}
/* 寝てる目（⌒） */
.pose-sleep .eye {
  height: 7px; width: 16px; background: transparent;
  border-top: 3px solid var(--ink);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  animation: none;
}
.pose-sleep .eye::after { display: none; }

.cheek {
  position: absolute; width: 16px; height: 11px; border-radius: 50%;
  background: var(--blush); opacity: .55;
}

/* ---------- ZZZ ---------- */
.zzz {
  position: absolute; top: -6px; right: -10px;
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 700;
  color: var(--ink-soft); opacity: 0; pointer-events: none;
}
.zzz span { display: inline-block; animation: zfloat 3s ease-in-out infinite; }
.zzz span:nth-child(1){ font-size: 16px; animation-delay: 0s; }
.zzz span:nth-child(2){ font-size: 19.5px; animation-delay: .4s; }
.zzz span:nth-child(3){ font-size: 25px; animation-delay: .8s; }
.pose-sleep .zzz { opacity: 1; }
@keyframes zfloat {
  0%   { transform: translateY(6px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(-14px); opacity: 0; }
}

/* ---------- 手を振る 共通 ---------- */
@keyframes wavearm {
  0%, 100% { transform: rotate(12deg); }
  50%      { transform: rotate(-26deg); }
}

/* ============================================================
   ① まめ太 — そら豆ブロブ（フラット・ピーチ）
   ============================================================ */
.mame { width: 170px; height: 190px; }
.mame .body {
  position: relative; width: 132px; height: 150px;
  background: var(--peach);
  border-radius: 49% 51% 47% 53% / 60% 58% 42% 40%;
  box-shadow: inset -10px -12px 0 rgba(0,0,0,.05);
}
.mame .face { position: absolute; top: 64px; left: 0; right: 0; display: grid; place-items: center; gap: 7px; }
.mame .eyes { display: flex; gap: 30px; }
.mame .mouth {
  width: 16px; height: 9px; border: 3px solid var(--ink); border-top: none;
  border-radius: 0 0 16px 16px;
}
.mame .cheek-l { top: 86px; left: 20px; }
.mame .cheek-r { top: 86px; right: 20px; }
.mame .arm {
  position: absolute; top: 92px; width: 22px; height: 34px;
  background: var(--peach-d); border-radius: 12px;
}
.mame .arm-l { left: -8px; transform: rotate(14deg); transform-origin: 50% 8px; }
.mame .arm-r { right: -8px; transform: rotate(-14deg); transform-origin: 50% 8px; }
.mame .foot {
  position: absolute; bottom: 6px; width: 30px; height: 16px;
  background: var(--peach-d); border-radius: 50% 50% 45% 45%;
}
.mame .foot-l { left: 36px; }
.mame .foot-r { right: 36px; }
.mame.pose-wave .arm-r { animation: wavearm 1.1s ease-in-out infinite; transform-origin: 50% 8px; }
.mame.pose-sleep .bob { transform: rotate(-7deg); }
.mame.pose-sleep .arm-r { transform: rotate(40deg); top: 104px; }

/* ============================================================
   ② わっか — 土星さん（スカイ＋バターの輪）
   ============================================================ */
.saturn { width: 200px; height: 180px; }
.saturn .ring {
  position: absolute; top: 50%; left: 50%;
  width: 200px; height: 64px; margin: -32px 0 0 -100px;
  border: 9px solid var(--butter); border-radius: 50%;
  transform: rotate(-18deg); z-index: 0;
}
.saturn .body {
  position: relative; z-index: 1;
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--sky);
  box-shadow: inset -9px -11px 0 rgba(0,0,0,.05);
}
/* 輪の手前側を本体の上に重ねる */
.saturn .ring-front {
  position: absolute; top: 50%; left: 50%;
  width: 200px; height: 64px; margin: -32px 0 0 -100px;
  border: 9px solid transparent; border-bottom-color: var(--butter);
  border-radius: 50%; transform: rotate(-18deg); z-index: 2; pointer-events: none;
}
.saturn .face { position: absolute; z-index: 3; top: 50px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; gap: 6px; }
.saturn .eyes { display: flex; gap: 26px; }
.saturn .mouth { width: 18px; height: 6px; background: var(--ink); border-radius: 4px; }
.saturn .cheek-l { top: 70px; left: 26px; z-index: 3; }
.saturn .cheek-r { top: 70px; right: 26px; z-index: 3; }
.saturn .arm {
  position: absolute; z-index: 1; top: 74px; width: 18px; height: 26px;
  background: var(--sky-d); border-radius: 10px;
}
.saturn .arm-l { left: 28px; transform: rotate(18deg); }
.saturn .arm-r { right: 28px; transform: rotate(-18deg); transform-origin: 50% 6px; }
.saturn.pose-wave .arm-r { animation: wavearm 1.1s ease-in-out infinite; top: 60px; right: 24px; }
.saturn.pose-sleep .bob { transform: rotate(-6deg); }

/* ============================================================
   ③ ピコ — 8bitドット（セージ）  ※スプライトはJSXで生成
   ============================================================ */
.pixel { width: 184px; height: 168px; image-rendering: pixelated; }
.pixel svg { display: block; overflow: visible; }
.pixel .px-eye { animation: pxblink 5s steps(1,end) infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes pxblink {
  0%, 90%, 100% { transform: scaleY(1); }
  93%, 97%      { transform: scaleY(0.1); }
}
.pixel .px-hand { transform-origin: 50% 100%; }
.pixel.pose-wave .px-hand { animation: pxwave 0.95s ease-in-out infinite; }
/* ヤギ：右横の蹄の位置で手を振る（2ドット／下のドットはクリーム色） */
.pixel.goat.pose-wave .px-hand { top: 56px !important; right: 0 !important; }
.pixel.goat.pose-wave .px-hand > div:nth-child(2) { background: oklch(0.93 0.012 85) !important; }
@keyframes pxwave {
  0%, 100% { transform: rotate(7deg); }
  50%      { transform: rotate(33deg); }
}
.pixel.pose-sleep .bob { transform: rotate(-7deg); }

/* ウニ：手がないので「手をふる」は体全体をふるふる揺らす */
.pixel.uni.pose-wave .bob { animation: unishake 0.5s ease-in-out infinite; transform-origin: 50% 70%; }
/* 梅干し：丸いので手をふる＝体全体をふるふる揺らす */
.pixel.ume.pose-wave .bob { animation: unishake 0.5s ease-in-out infinite; transform-origin: 50% 70%; }
/* うんち：上げた右手だけを振る（2ドット斜め・付け根＝下左が支点） */
.pixel.unchi .unchi-arm { transform-origin: 0% 100%; animation: unchiarm 0.5s ease-in-out infinite; }
@keyframes unchiarm { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(22deg); } }
/* 玄人：右腕（別レイヤー）を上下にパタパタ */
.pixel.kuroto .kuro-arm { animation: kuroarm 0.55s ease-in-out infinite; }
@keyframes kuroarm {
  0%, 100% { transform: translateY(2px); }
  50%      { transform: translateY(-9px); }
}
@keyframes unishake {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}

/* ============================================================
   ④ ぽやん — 手描き風パンダ（クリーム本体・インク線）
   ============================================================ */
.panda { width: 180px; height: 190px; filter: url(#wobble); }
.panda svg { display: block; overflow: visible; }
.panda .pd-eye { animation: blink 5.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.panda .pd-arm-r { transform-origin: 118px 116px; }
.panda.pose-wave .pd-arm-r { animation: pdwave 1.1s ease-in-out infinite; }
@keyframes pdwave {
  0%,100% { transform: rotate(8deg); }
  50%     { transform: rotate(-34deg); }
}
.panda.pose-sleep .bob { transform: rotate(-7deg); }
.panda.pose-sleep .pd-eye { animation: none; }

/* ============================================================
   ⑤ ロボたん — ゆるロボ（スカイグレー＋バター）
   ============================================================ */
.robo { width: 168px; height: 196px; }
.robo .antenna {
  position: absolute; top: -2px; left: 50%; width: 4px; height: 22px;
  margin-left: -2px; background: var(--ink-soft); border-radius: 3px;
  transform-origin: 50% 100%; animation: antsway 3.2s ease-in-out infinite;
}
.robo .antenna::before {
  content: ""; position: absolute; top: -10px; left: -5px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--butter);
  box-shadow: 0 0 0 0 var(--butter); animation: antglow 3.2s ease-in-out infinite;
}
@keyframes antsway { 0%,100%{ transform: rotate(-8deg);} 50%{ transform: rotate(8deg);} }
@keyframes antglow { 0%,100%{ box-shadow: 0 0 0 0 rgba(0,0,0,0);} 50%{ box-shadow: 0 0 10px 2px var(--butter);} }
.robo .head {
  position: relative; margin-top: 20px; width: 138px; height: 120px;
  background: var(--sky); border-radius: 34px;
  box-shadow: inset -8px -10px 0 rgba(0,0,0,.05);
}
.robo .ear {
  position: absolute; top: 38px; width: 12px; height: 30px;
  background: var(--sky-d); border-radius: 6px;
}
.robo .ear-l { left: -10px; } .robo .ear-r { right: -10px; }
.robo .screen {
  position: absolute; inset: 26px 18px auto 18px; height: 64px;
  background: var(--ink); border-radius: 18px;
  display: grid; place-items: center; gap: 9px;
}
.robo .screen .eyes { display: flex; gap: 26px; }
.robo .screen .eye { background: var(--butter); width: 14px; height: 16px; }
.robo .screen .eye::after { background: rgba(0,0,0,.25); }
.robo .screen .mouth { width: 22px; height: 7px; border-radius: 4px; background: var(--sage); }
.pose-sleep .robo .screen .eye, .robo.pose-sleep .screen .eye {
  border-top-color: var(--butter);
}
.robo .arm {
  position: absolute; top: 70px; width: 16px; height: 30px;
  background: var(--sky-d); border-radius: 9px; z-index: -1;
}
.robo .arm-l { left: -8px; transform: rotate(12deg); }
.robo .arm-r { right: -8px; transform: rotate(-12deg); transform-origin: 50% 6px; }
.robo .foot {
  position: absolute; bottom: 2px; width: 30px; height: 18px;
  background: var(--ink-soft); border-radius: 8px;
}
.robo .legs { position: relative; width: 138px; height: 20px; }
.robo .foot-l { left: 26px; } .robo .foot-r { right: 26px; }
.robo.pose-wave .arm-r { animation: wavearm 1.1s ease-in-out infinite; top: 54px; }
.robo.pose-sleep .bob { transform: rotate(-6deg); }
.robo.pose-sleep .antenna { animation: none; transform: rotate(20deg); }

/* ---------- パンダ 寝てる目の出し分け ---------- */
.panda .pd-sleep-eye { display: none; }
.panda.pose-sleep .pd-eye { display: none; }
.panda.pose-sleep .pd-sleep-eye { display: block; }

/* ---------- アイコン用クロップ ---------- */
.avatar {
  position: relative;
  width: 104px; height: 104px; border-radius: 50%; overflow: hidden;
  box-shadow: inset 0 0 0 4px var(--paper), 0 5px 16px rgba(0,0,0,.09);
}
.avatar-inner { position: absolute; left: 50%; top: 50%; }
.avatar .bob { animation: none !important; }   /* クロップ内はふわふわ停止、まばたきは継続 */