/* ごはんモード — どうぶつが ほんとうに たべて いるように 見せる。
   このファイルの セレクタは すべて .am-root の 下に とじこめる。
   ほかの モードの スタイルへ もれない ように、たぐセレクタも :root も つかわない。 */

.am-root {
  /* おしごと机の 木目から ごはんの テーブルクロスへ かえて、
     おなじ へやの べつの じかん だと わかるように する。
     いろは 6しょく。がいぶフォント・がいぶ画像は つかわない。 */
  --am-cloth: #F3FAF1;
  --am-check: #A8DCA2;
  --am-plate: #FFFDF7;
  --am-rim:   #7FB6C9;
  --am-ink:   #3E2C23;
  --am-blush: #F0688F;
  --am-sun:   #FFCB45;

  /* JS が たべる はやさに あわせて 上書きする。
     うごきを へらす せっていの ときは みじかい 値が 入る。 */
  --am-beat: 190ms;
  --am-fly: 240ms;
  /* おさらから 口までの たかさ。たべものが とぶ きょり */
  --am-lift: clamp(34px, 9vmin, 80px);

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--am-ink);
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.am-root *,
.am-root *::before,
.am-root *::after { box-sizing: border-box; }

/* ---------- テーブル ---------- */

/* 6にんぶんの せきを おく ので、下の おびでは なく
   あそびばの ぜんめんを テーブルクロスに する。 */
.am-cloth {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* ギンガムチェック。画像を よまずに かさねた せんで つくる */
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(168, 220, 162, .5) 22px 44px),
    repeating-linear-gradient(0deg,  transparent 0 22px, rgba(168, 220, 162, .5) 22px 44px),
    var(--am-cloth);
  border-top: 5px solid rgba(62, 44, 35, .2);
}

/* ---------- 6にんの せき ---------- */

.am-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(6px, 2%, 20px);
}

.am-grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* 30にん。たてに ながい わくでは 5れつ 6だん。
     どの ならびでも かおと 口と おさらが 見える おおきさを のこす。 */
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  align-items: end;
  gap: clamp(1px, .8%, 12px);
  height: 100%;
}

.am-seat {
  position: relative;
  width: min(100%, 180px, 13vh);
  /* どうぶつの え（200x200）の したに おさらの ぶんの ばしょを あける。
     ここを あけないと おさらが 口を かくして しまい、
     いちばん 見せたい もぐもぐが 見えなく なる。
     パーセントの padding は おやの よこはば きじゅんに なって しまう ので、
     せき じたいの たてよこひで 場所を とる。 */
  aspect-ratio: 200 / 244;
}

/* host の おおきさは わたされるまで わからない。
   コンテナクエリが つかえる ブラウザでは、画面では なく host に あわせて
   だんの かずと おおきさを きめる。つかえない ブラウザは うえの 3れつの まま。 */
@supports (container-type: size) {
  .am-stage { container-type: size; }

  /* たてに ながい わく: 5れつ 6だん。6だんぶんの たかさから 1にんぶんを だす
     （せきの たてよこひは 1:1.22） */
  .am-seat { width: min(100%, 180px, 13cqh); }

  /* せいほうけい に ちかい わく: 6れつ 5だん */
  @container (min-aspect-ratio: 1 / 1) {
    .am-grid { grid-template-columns: repeat(6, 1fr); }
    .am-seat { width: min(100%, 180px, 15.5cqh); }
  }

  /* よこに ながい わく（つくえの 上など）: 10れつ 3だん。
     だんを へらす ほど 1にんが おおきく なる。 */
  @container (min-aspect-ratio: 3 / 2) {
    .am-grid { grid-template-columns: repeat(10, 1fr); }
    .am-seat { width: min(100%, 180px, 26cqh); }
  }
}

.am-animal {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* いつもの いきづかい と まばたき。active の あいだ だけ うごかす。
   stop() で .am-on が とれると アニメーションは とまる。 */
/* ずらしは せきごとに JS が --am-d1 / --am-d2 に いれる。
   30にんの いきづかいと まばたきが そろうと きかいっぽく 見える ため。 */
.am-root.am-on .am-body {
  animation: am-breathe 3.8s ease-in-out infinite;
  animation-delay: var(--am-d1, 0s);
  transform-box: view-box;
  transform-origin: 100px 200px;
}
@keyframes am-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.014, .986); }
}

.am-root.am-on .am-lid {
  animation: am-blink 5.2s steps(1, end) infinite;
  animation-delay: var(--am-d2, 0s);
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes am-blink {
  0%, 94%   { transform: scaleY(1); }
  95%, 97%  { transform: scaleY(.1); }
  98%, 100% { transform: scaleY(1); }
}

/* ---------- もぐもぐ ---------- */

/* かおの ぶひんは それぞれの まんなかを じくに して うごかす */
.am-cheek { transform-box: fill-box; transform-origin: center; }
.am-jaw   { transform-box: view-box; }
.am-head  { transform-box: view-box; transform-origin: 100px 150px; }
.am-ear   { transform-box: view-box; }
.am-throat{ transform-box: fill-box; transform-origin: center top; }

/* くちの なかは ふだん 見えない。かんで いる あいだ だけ 出す */
.am-mouth-in { opacity: 0; }
.am-seat.am-chewing .am-mouth-in { opacity: 1; }

/* たべものを 口に いれた しゅんかんの かお。
   これが この モードで いちばん だいじな 1びょう。 */
.am-seat.am-chewing .am-cheek-l { animation: am-chew-l var(--am-beat) ease-in-out 3; }
.am-seat.am-chewing .am-cheek-r { animation: am-chew-r var(--am-beat) ease-in-out 3; }
.am-seat.am-chewing .am-jaw     { animation: am-jaw    var(--am-beat) ease-in-out 3; }
.am-seat.am-chewing .am-head    { animation: am-bob    var(--am-beat) ease-in-out 3; }
.am-seat.am-chewing .am-ear-l   { animation: am-ear-l  var(--am-beat) ease-in-out 3; }
.am-seat.am-chewing .am-ear-r   { animation: am-ear-r  var(--am-beat) ease-in-out 3; }

/* ひだりと みぎの ほっぺを かわりばんこに ふくらませる。
   りょうほう いっしょに ふくらますと 「ふくれた かお」に しか 見えない。
   かたほうずつ ずらすと、口の なかで たべものが 動いて 見える。

   1しゅうきの なかで ひだり→みぎ の 2かい うごかし、
   0% と 50% と 100% は かならず もとの おおきさに もどす。
   はしを ふくらんだ ままに すると、くりかえしが おわった しゅんかんに
   ほっぺが ぱちんと もどって 見えて しまう。 */
@keyframes am-chew-l {
  0%, 50%, 100% { transform: scale(1) translateX(0); }
  25%           { transform: scale(1.5, 1.33) translateX(-3px); }
}
@keyframes am-chew-r {
  0%, 50%, 100% { transform: scale(1) translateX(0); }
  75%           { transform: scale(1.5, 1.33) translateX(3px); }
}
@keyframes am-jaw {
  0%, 50%, 100% { transform: translateY(0) scaleY(1); }
  25%, 75%      { transform: translateY(4px) scaleY(1.14); }
}
@keyframes am-bob {
  0%, 50%, 100% { transform: rotate(0deg) translateY(0); }
  25%           { transform: rotate(1.4deg) translateY(2px); }
  75%           { transform: rotate(-1.4deg) translateY(2px); }
}
@keyframes am-ear-l {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-6deg); }
}
@keyframes am-ear-r {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(6deg); }
}

/* ごっくん。のどが 1かい うごいて 口の なかが からに なる */
.am-seat.am-gulp .am-throat { animation: am-swallow 170ms ease-in-out; }
.am-seat.am-gulp .am-head   { animation: am-chin    170ms ease-in-out; }
@keyframes am-swallow {
  0%, 100% { transform: scaleY(1); }
  45%      { transform: scaleY(1.3); }
}
@keyframes am-chin {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  45%      { transform: rotate(0deg) translateY(-3px); }
}

/* おいしい かお。かんだ あとに ちいさく でる */
.am-eyes-happy { opacity: 0; }
.am-seat.am-glad .am-eyes-open  { opacity: 0; }
.am-seat.am-glad .am-eyes-happy { opacity: 1; }
.am-seat.am-glad .am-body { animation: am-glad 420ms cubic-bezier(.3, 1.5, .5, 1); }
@keyframes am-glad {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  40%      { transform: translateY(-7px) scale(.985, 1.02); }
}

/* おさらが からに なった ときの よろこびかた。
   1口ごとの よろこびより おおきく して、くぎりが わかるように する */
.am-seat.am-done .am-eyes-open  { opacity: 0; }
.am-seat.am-done .am-eyes-happy { opacity: 1; }
.am-seat.am-done .am-body { animation: am-done 780ms cubic-bezier(.3, 1.4, .5, 1); }
@keyframes am-done {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  22%      { transform: translateY(-20px) rotate(-4deg); }
  50%      { transform: translateY(0) rotate(3deg); }
  74%      { transform: translateY(-9px) rotate(-1deg); }
}

/* ---------- おなかいっぱい ---------- */
/* たべた かずが かみつくと、おなかが ふくらんで まんぞくした かおの まま とまる。
   この子は もう たべられず、つぎに たべる子の くじからも はずれる。 */

.am-belly { transform-box: fill-box; transform-origin: center bottom; transition: opacity .5s ease; }
.am-torso { transform-box: view-box; transform-origin: 100px 200px; }

/* さいごの すがたは class だけで きまる ように して、
   アニメーションは そこへ たどりつく ための ものに とどめる。
   こう して おくと うごきを へらす せっていで アニメーションを けしても
   「おなかが ふくらんだ すがた」は のこる。 */
.am-seat.am-full .am-belly { opacity: .2; transform: scale(1.18); }
.am-seat.am-full .am-torso { transform: scale(1.08, 1.03); }
.am-seat.am-full .am-belly { animation: am-belly .6s cubic-bezier(.3, 1.4, .5, 1); }
.am-seat.am-full .am-torso { animation: am-tummy .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes am-belly {
  0%   { transform: scale(.7); }
  100% { transform: scale(1.18); }
}
@keyframes am-tummy {
  0%   { transform: scale(1, 1); }
  100% { transform: scale(1.08, 1.03); }
}

.am-seat.am-full .am-eyes-open  { opacity: 0; }
.am-seat.am-full .am-eyes-happy { opacity: 1; }
.am-seat.am-full .am-animal { opacity: .92; }

/* ---------- おさら と たべもの ---------- */

.am-dish {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 78%;
  transform: translateX(-50%);
  pointer-events: none;
}

.am-dish-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* おさらの うえの たべもの。5こを さいしょに つくって、
   へらす ときは class で かくす だけに する。
   あそんで いる あいだ 要素を つくったり けしたり しない。 */
.am-morsel {
  transition: opacity 180ms ease, transform 180ms ease;
  transform-box: fill-box;
  transform-origin: center bottom;
}
.am-morsel.am-eaten {
  opacity: 0;
  transform: scale(.4) translateY(6px);
}

/* おさらから 口へ はこばれる 1口。せきごとに 1つだけ つかいまわす */
.am-bite {
  position: absolute;
  left: 50%;
  top: 52%;                 /* どうぶつの 口の たかさ */
  width: 23%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, var(--am-lift)) scale(.7);
}
.am-bite svg { display: block; width: 100%; height: auto; overflow: visible; }

.am-seat.am-flying .am-bite { animation: am-fly var(--am-fly) cubic-bezier(.4, .1, .7, 1) both; }
@keyframes am-fly {
  0%   { opacity: 1; transform: translate(-50%, var(--am-lift)) scale(.7) rotate(-10deg); }
  55%  { opacity: 1; transform: translate(calc(-50% + 9px), calc(var(--am-lift) * .3)) scale(1.06) rotate(6deg); }
  100% { opacity: 0; transform: translate(-50%, 0) scale(.36) rotate(0deg); }
}

/* ---------- ことば と きらきら ---------- */

.am-word {
  position: absolute;
  left: 50%;
  top: -2%;
  margin: 0;
  /* 30にん ならぶ ので、ことばは ちいさめに して かおを かくさない */
  font-size: clamp(9px, 1.7vmin, 18px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--am-ink);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0);
}
.am-seat.am-say .am-word { animation: am-say 900ms cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes am-say {
  0%   { opacity: 0; transform: translate(-50%, 14px) scale(.5) rotate(-7deg); }
  22%  { opacity: 1; transform: translate(-50%, 0) scale(1.06) rotate(2deg); }
  34%  { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0deg); }
  74%  { opacity: 1; transform: translate(-50%, -4px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -22px) scale(.86); }
}

.am-sparks {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* 8こを さいしょに つくって つかいまわす。とぶ むきは nth-child で きめる */
.am-spark {
  position: absolute;
  width: clamp(7px, 1.5vmin, 15px);
  height: clamp(7px, 1.5vmin, 15px);
  border-radius: 42% 58% 53% 47%;
  opacity: 0;
}
.am-spark:nth-child(1) { --am-sx:  70px; --am-sy: -34px; background: var(--am-sun); }
.am-spark:nth-child(2) { --am-sx:  52px; --am-sy:  44px; background: var(--am-blush); }
.am-spark:nth-child(3) { --am-sx:   0px; --am-sy: -78px; background: var(--am-check); }
.am-spark:nth-child(4) { --am-sx: -52px; --am-sy:  44px; background: var(--am-sun); }
.am-spark:nth-child(5) { --am-sx: -70px; --am-sy: -34px; background: var(--am-rim); }
.am-spark:nth-child(6) { --am-sx:  30px; --am-sy: -66px; background: var(--am-blush); }
.am-spark:nth-child(7) { --am-sx: -30px; --am-sy: -66px; background: var(--am-sun); }
.am-spark:nth-child(8) { --am-sx:   0px; --am-sy:  58px; background: var(--am-check); }

.am-seat.am-done .am-spark { animation: am-spark 780ms ease-out both; }
@keyframes am-spark {
  0%   { opacity: 1; transform: translate(0, 0) scale(.3); }
  100% { opacity: 0; transform: translate(var(--am-sx), var(--am-sy)) scale(1.1) rotate(150deg); }
}

/* ---------- あしもと: ひとこと と おかわり ---------- */

.am-foot {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 1vh, 8px);
  /* あんないと ボタンの ばしょを いつも とって おく。
     じょうたいで たかさが かわると どうぶつの おおきさまで うごいて しまう。 */
  min-height: clamp(60px, 13%, 104px);
  padding: 0 12px clamp(6px, 1.6vh, 14px);
}

.am-hint {
  margin: 0;
  text-align: center;
  font-size: clamp(12px, 2vmin, 19px);
  line-height: 1.3;
  min-height: 1.3em;
  color: rgba(62, 44, 35, .8);
}
/* あそびが はじまったら「ごはんを あげてね」は 消す。
   おかわりの あんないは 消さない。キーだけで つづけられる ことを
   つたえる ための ことばな ので、ここが 見えないと 手が とまる。 */
.am-root.am-tasted .am-hint { opacity: 0; transition: opacity 400ms ease; }
.am-root.am-ask-more .am-hint,
.am-root.am-over .am-hint { opacity: 1; }

/* ---------- ボタン ---------- */

.am-btn {
  border: 4px solid var(--am-ink);
  border-radius: 999px;
  background: var(--am-sun);
  color: var(--am-ink);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(62, 44, 35, .28);
}
.am-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(62, 44, 35, .28); }
.am-btn:focus-visible { outline: 3px solid var(--am-ink); outline-offset: 3px; }

/* おかわりは あしもとに 出す。じどうでは はじまらず、1かい おすと
   ぜんいんの おさらに もりつけて そのまま たべはじめる。 */
.am-more {
  padding: .34em 1.5em .42em;
  font-size: clamp(15px, 2.6vmin, 26px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms;
}
.am-root.am-ask-more .am-more { opacity: 1; visibility: visible; }

/* ---------- おしまい ---------- */

.am-end {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(12px, 3%, 28px);
  /* うすく しか かぶせない。おなかの ふくらんだ 6にんが
     この ばめんの ごほうびな ので、かくしては いけない。 */
  background: rgba(243, 250, 241, .3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease, visibility 500ms;
}
.am-root.am-over .am-end { opacity: 1; visibility: visible; }

.am-end-word {
  margin: 0;
  padding: .3em .8em .38em;
  border: 5px solid var(--am-ink);
  border-radius: 26px;
  background: var(--am-sun);
  max-width: 96%;
  text-align: center;
  /* 1ぎょうに おさめて、うしろの 6にんを かくす はんいを 小さく する */
  font-size: clamp(17px, 4.2vmin, 42px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--am-ink);
  box-shadow: 0 6px 0 rgba(62, 44, 35, .24);
}
.am-root.am-over .am-end-word { animation: am-end-pop 700ms cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes am-end-pop {
  0%   { transform: scale(.5) rotate(-5deg); opacity: 0; }
  55%  { transform: scale(1.06) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.am-again {
  padding: .38em 1.4em .46em;
  font-size: clamp(14px, 2.4vmin, 24px);
  background: var(--am-plate);
}
/* ごほうびの あとの つぎの いっぽは p1 が うけもつ。
   ここで「もういちど あそぶ」を 出すと、おなじ ばめんに
   ふたつの つぎへ が ならんで しまう。 */
.am-root.am-celebration .am-again { display: none; }

/* ---------- せまい・ひくい 画面 ---------- */

/* テーブルクロスは あそびばぜんたいに しいた ので、
   ここで たかさを きめなおさない（きめると 上の おびだけに もどって しまう）。 */
@media (max-width: 560px) {
  .am-grid { gap: clamp(1px, 1%, 8px); }
  .am-word { font-size: clamp(13px, 3vmin, 22px); }
}

/* ---------- うごきを へらす せってい ---------- */
/* JS 側でも びょうすうを みじかく するが、CSS 単体でも 成り立つように
   ふりはばの おおきい うごきは ここで けす。
   もぐもぐ じたいは のこす。けすと 「たべて いる」ことが 見えなく なるため、
   ふりはばだけ 小さく して かいすうは そのまま に する。 */
@media (prefers-reduced-motion: reduce) {
  .am-root.am-on .am-body,
  .am-root.am-on .am-lid { animation: none !important; }

  .am-seat.am-chewing .am-head,
  .am-seat.am-chewing .am-ear-l,
  .am-seat.am-chewing .am-ear-r { animation: none !important; }

  @keyframes am-chew-l {
    0%, 50%, 100% { transform: scale(1); }
    25%           { transform: scale(1.2, 1.14); }
  }
  @keyframes am-chew-r {
    0%, 50%, 100% { transform: scale(1); }
    75%           { transform: scale(1.2, 1.14); }
  }
  @keyframes am-jaw {
    0%, 50%, 100% { transform: translateY(0); }
    25%, 75%      { transform: translateY(2px); }
  }
  @keyframes am-fly {
    0%   { opacity: 1; transform: translate(-50%, var(--am-lift)) scale(.7); }
    100% { opacity: 0; transform: translate(-50%, 0) scale(.5); }
  }
  @keyframes am-say {
    0%        { opacity: 0; transform: translate(-50%, 0) scale(1); }
    18%, 78%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100%      { opacity: 0; transform: translate(-50%, 0) scale(1); }
  }
  @keyframes am-spark {
    0%   { opacity: 1; transform: translate(0, 0) scale(.6); }
    100% { opacity: 0; transform: translate(calc(var(--am-sx) * .4), calc(var(--am-sy) * .4)) scale(.8); }
  }
  .am-seat.am-glad .am-body,
  .am-seat.am-done .am-body,
  .am-seat.am-gulp .am-throat,
  .am-seat.am-gulp .am-head,
  .am-seat.am-full .am-belly,
  .am-seat.am-full .am-torso,
  .am-root.am-over .am-end-word { animation: none !important; }
  /* アニメーションを けしても、おなかが ふくらんだ すがたは class で のこる */
  .am-morsel { transition: opacity 100ms linear; }
  .am-more, .am-end { transition: none; }
}