:root {
  --ink: #4a3b2a;
  --paper: #f6efd9;
  --edge: #e6dcc0;
  --accent: #e8a33d;
  --btn-col: #e8a33d;
  --btn-img: none;
  --bg-img: none;
  --u: 1px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: var(--edge);
  color: var(--ink);
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
  font-weight: 800;
}

body { position: fixed; inset: 0; }

#app { position: absolute; inset: 0; overflow: hidden; }

#play {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background-color: var(--paper);
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
}

#monsters, #potatoes, #hands, #ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- ポテト ---------- */
.potato {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  pointer-events: auto;
  will-change: transform;
  z-index: 1;
  touch-action: none;
}
.potato.onplate { pointer-events: none; }
.potato.gone { display: none; }
.potato img, .potato .nopic {
  width: 88%;
  height: 88%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
.potato.scatter img, .potato.scatter .nopic { width: 74%; height: 74%; }

/* 絵が無いときの代わり(四角に色) */
.nopic {
  display: block;
  background: #cdbf9a;
  border: 3px dashed #8a7a58;
  border-radius: 22%;
}

/* ---------- モンスター ---------- */
.mg {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
}
.mg > * { position: absolute; }
.mg.enter {
  animation: walkin 0.8s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 0.15s);
}
@keyframes walkin {
  from { transform: translateX(var(--wx, 120%)); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.mbody img, .mbody .nopic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  -webkit-user-drag: none;
}
.mbody img.on, .mbody .nopic.on { opacity: 1; }
.mbody.hop, .mfront.hop { animation: hop 0.5s ease-in-out 2; }
.mbody.shake, .mfront.shake { animation: shake 0.16s linear 7; }
.mfront, .mfront img { pointer-events: none; -webkit-user-drag: none; }
.mfront img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes hop {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-12%); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4%); }
  75% { transform: translateX(4%); }
}

.plate, .plate-img, .hole { pointer-events: none; -webkit-user-drag: none; }
.plate-img { width: 100%; height: 100%; display: block; object-fit: contain; }
.plate-hit { pointer-events: auto; touch-action: none; }

.hole { opacity: 0.9; }
.hole.filled { opacity: 0; }
.hole img, .hole .nopic { width: 100%; height: 100%; object-fit: contain; display: block; }

.sel {
  border-radius: 50%;
  background: rgba(255, 214, 90, 0.55);
  pointer-events: none;
  display: none;
}
.mg.chosen .sel { display: block; }
.mg.chosen .bub { animation: bob 0.9s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5%); }
}

.bub { pointer-events: none; }
.bub .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.bub .bc {
  position: absolute;
  inset: 0 0 12% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8%;
  line-height: 1;
}
.bub .item { display: flex; align-items: center; gap: 4%; }
.bub .item img, .bub .item .nopic { height: 1em; width: 1em; object-fit: contain; display: block; }
.bub .num { font-weight: 900; color: var(--ink); }
.bub .bc > img { height: 90%; width: auto; max-width: 90%; object-fit: contain; }

.mg.rej .bub { animation: wob 0.3s linear 1; }
@keyframes wob {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6%); }
  75% { transform: translateX(6%); }
}

/* ---------- 画面の上の物 ---------- */
#hud {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
#levelText {
  font-size: calc(var(--u) * 22);
  font-weight: 900;
  padding-left: calc(var(--u) * 6);
  white-space: nowrap;
}
#mute {
  pointer-events: auto;
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80% 80%;
  touch-action: manipulation;
  border-radius: 50%;
}
#mute.nopic { background-color: #cdbf9a; }
#timer { display: none; flex: 1; height: 10px; background: rgba(0,0,0,.12); border-radius: 5px; overflow: hidden; }
#timer.show { display: block; }
#timer i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; }

#hint {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: calc(var(--u) * 20);
  font-weight: 900;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
#hint.show { opacity: 1; }

#hand {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transform-origin: 20% 10%;
  z-index: 6;
  -webkit-user-drag: none;
}

/* ---------- 重ね画面 ---------- */
.panel {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 18);
  z-index: 20;
  text-align: center;
  padding: 0 calc(var(--u) * 20);
}
.panel.show { display: flex; }
#intro, #clear { pointer-events: none; }
#intro span, #clear span {
  font-size: calc(var(--u) * 54);
  font-weight: 900;
  color: var(--ink);
  background: rgba(246, 239, 217, 0.88);
  padding: calc(var(--u) * 6) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 28);
  animation: pop 0.35s ease-out both;
}
@keyframes pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
#start, #end, #timeup {
  background: rgba(246, 239, 217, 0.96);
  pointer-events: auto;
}
#startTitle, #endTitle {
  font-size: calc(var(--u) * 40);
  font-weight: 900;
  line-height: 1.25;
}
#timeupText { font-size: calc(var(--u) * 40); font-weight: 900; }
#endSub { font-size: calc(var(--u) * 22); font-weight: 800; }
/* 体の数は config で決まる。JS が --cols(1 列の数)と --mh(1 体の高さの上限)を入れる。多いときは折り返す */
#startMonsters, #endMonsters {
  --cols: 3;
  --mh: 170;
  --gap: calc(var(--u) * 8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  align-content: center;
  gap: var(--gap);
  width: 100%;
  max-width: 100%;
}
#startMonsters img, #endMonsters img, #startMonsters .nopic, #endMonsters .nopic {
  height: auto;
  width: auto;
  max-height: calc(var(--u) * var(--mh));
  max-width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
  object-fit: contain;
  -webkit-user-drag: none;
}
#startMonsters .nopic, #endMonsters .nopic { width: calc(var(--u) * 100); height: calc(var(--u) * 116); }

/* ---------- 冒頭の変身 ---------- */
.oplayer {
  position: absolute;
  inset: 0;
  z-index: 8;
  touch-action: none;
}
.oplayer { pointer-events: auto; }
.oplayer .gwrap {
  position: absolute;
  transform-origin: 50% 100%;
  will-change: transform;
}
.oplayer .gwrap img, .oplayer .gwrap .nopic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 55%;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* 煙: 平らな塗り。輪郭は絵と同じ茶色の線。つやも影も付けない */
.oplayer .puff {
  position: absolute;
  border-radius: 50%;
  background: #fffaf0;
  border: calc(var(--u) * 3.5) solid var(--ink);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.mg.oh-body .mbody { visibility: hidden; }
.mg.oh-rest .mfront, .mg.oh-rest .plate, .mg.oh-rest .hole, .mg.oh-rest .bub, .mg.oh-rest .plate-hit, .mg.oh-rest .sel, .mg.oh-rest .eat-btn { visibility: hidden; }
#potatoes.oh { visibility: hidden; }
#play.opening .mg { pointer-events: none; }
#startMonsters > *:nth-child(odd), #endMonsters > *:nth-child(odd) { animation: hop 1.2s ease-in-out infinite; }
#startMonsters > *:nth-child(even), #endMonsters > *:nth-child(even) { animation: hop 1.2s ease-in-out 0.4s infinite; }

.btn {
  min-width: calc(var(--u) * 230);
  height: calc(var(--u) * 72);
  padding: 0 calc(var(--u) * 24);
  border: 0;
  border-radius: calc(var(--u) * 36);
  font: inherit;
  font-size: calc(var(--u) * 28);
  font-weight: 900;
  color: var(--ink);
  background-color: var(--btn-col);
  background-image: var(--btn-img);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  touch-action: manipulation;
  cursor: pointer;
}
.btn.sub { height: calc(var(--u) * 56); font-size: calc(var(--u) * 22); }
.btn:active { transform: scale(0.97); }
.btn small { display: block; font-size: 0.6em; font-weight: 800; line-height: 1.1; opacity: 0.9; }
.btn:has(small) { height: calc(var(--u) * 84); }
.mg.done .hole { display: none; }

/* ---------- 読み込み・横向き・止まったとき ---------- */
#loading {
  position: absolute;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  font-size: 24px;
  font-weight: 900;
}
#loading.hide { display: none; }

#rotate {
  position: absolute;
  inset: 0;
  z-index: 180;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--paper);
  font-size: 28px;
  font-weight: 900;
}
#rotate img { height: min(52vh, 180px); width: auto; max-width: 40vw; object-fit: contain; }
@media (orientation: landscape) and (max-height: 560px) {
  #rotate { display: flex; }
}

#fatal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--paper);
}
#fatal.show { display: flex; }
#fatal button {
  min-width: 230px;
  height: 80px;
  border: 0;
  border-radius: 40px;
  background: var(--accent);
  color: var(--ink);
  font: inherit;
  font-size: 30px;
  font-weight: 900;
  touch-action: manipulation;
}

/* autoEat=false のとき、皿がいっぱいで出る「たべて！」 */
.eat-btn {
  display: none;
  border: 0;
  border-radius: calc(var(--u) * 24);
  font: inherit;
  font-weight: 900;
  color: var(--ink);
  background-color: var(--btn-col);
  background-image: var(--btn-img);
  background-size: 100% 100%;
  touch-action: manipulation;
  pointer-events: auto;
  padding: 0;
  z-index: 4;
}
.eat-btn.show { display: block; animation: pop 0.3s ease-out both; }

#ui { z-index: 9; }