/* UI type: Mochiy Pop One (SIL OFL 1.1), subset to the characters the UI uses.
   Rebuild with tools/subset-font.mjs after changing visible text. */
@font-face {
  font-family: 'Piyorat UI';
  src: url('./assets/fonts/piyorat-ui.woff2') format('woff2');
  font-display: swap;
}
/* Controls are made of the same stuff as Piyorat: a soft cream body, a thick
   ink outline, a hard toy-like ink shadow, and Piyorat's ears as the motif. */
:root {
  /* Colors are taken from the watercolor forest: deep moss for ink, moss and
     sunlit greens for the selected state, sun-warmed cream, honey sunlight. */
  --ink: #3e4a30;
  --ink-soft: rgb(62 74 48 / 0.55);
  --ink-hard: #2c3622;
  --cream: #fffbe8;
  --cream-top: #fffdf0;
  --cream-bottom: #f1e8c6;
  --moss-top: #8aa463;
  --moss-bottom: #5f7841;
  --sun-top: #fbe49a;
  --sun-bottom: #e9c25e;
  --mist: #e6ebd3;
  --ambient: 0 8px 18px rgb(46 62 30 / 0.2);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family:
    'Piyorat UI', 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic', 'Yu Gothic UI', Meiryo, system-ui,
    sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: var(--mist);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
button {
  font: inherit;
  color: inherit;
}
button:focus-visible,
#scene:focus-visible {
  outline: 3px solid var(--sun-bottom);
  outline-offset: 4px;
}
#game {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 340px;
  overflow: hidden;
}
#scene {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline-offset: -5px;
}

/* Dock: one row at the top, showing only what can be used right now. */
#dock {
  position: absolute;
  top: max(24px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: 0 12px;
  pointer-events: none;
}
#game:is([data-state='loading'], [data-state='reaching']) #dock {
  display: none;
}
.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  animation: dock-in 0.3s var(--bounce);
}
.controls > * {
  flex-shrink: 0;
}
/* Held: the touch tools, then turning over and letting go. Too narrow for one
   row, the two hold buttons wrap together onto a second row. */
#held-controls {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 14px;
}
.pair {
  display: flex;
  gap: inherit;
}

/* A mochi-like pill. It sinks onto its ink shadow when pressed. Moving it with
   `top` (not transform) keeps the ears painted behind the body. */
.pill {
  position: relative;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 50px;
  padding: 0 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(var(--cream-top), var(--cream-bottom));
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -3px 0 rgb(62 74 48 / 0.08),
    0 3px 0 var(--ink),
    var(--ambient);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    top 0.08s,
    box-shadow 0.08s,
    background 0.15s,
    color 0.15s;
}
.pill:active:not(:disabled) {
  top: 3px;
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -2px 0 rgb(62 74 48 / 0.08),
    0 0 0 var(--ink),
    0 3px 8px rgb(46 62 30 / 0.18);
}
@media (hover: hover) {
  .pill:hover:not(:disabled, [aria-pressed='true'], .primary) {
    background: linear-gradient(#fffef6, #f6eed2);
  }
}

/* Curry: the very plate that is dragged onto the ground. */
.curry-button {
  padding: 0 22px 0 8px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.plate {
  position: relative;
  width: 54px;
  height: 38px;
  transform: rotate(-8deg);
  transition: transform 0.2s var(--bounce);
}
.plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
@media (hover: hover) {
  .curry-button:hover:not(:disabled) .plate {
    transform: rotate(-14deg) translateY(-2px);
  }
}
/* Pressed in moss: tap-to-place until the ground is tapped, and turning over
   while Piyorat shows its back. */
.curry-button[aria-pressed='true'],
#flip[aria-pressed='true'] {
  background: linear-gradient(var(--moss-top), var(--moss-bottom));
  color: var(--cream);
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.25),
    0 3px 0 var(--ink-hard),
    var(--ambient);
}
.curry-button[aria-pressed='true'] .plate {
  animation: wiggle 0.9s ease-in-out infinite;
}

/* Primary: dashed while disabled; curry-yellow with Piyorat's ears peeking
   out from behind otherwise (the catch sign). */
.primary:disabled {
  cursor: default;
  background: rgb(255 251 232 / 0.72);
  border-style: dashed;
  border-color: var(--ink-soft);
  color: var(--ink-soft);
  box-shadow: none;
}
.primary:not(:disabled) {
  background: linear-gradient(var(--sun-top), var(--sun-bottom));
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.6),
    inset 0 -3px 0 rgb(130 90 10 / 0.12),
    0 3px 0 var(--ink),
    var(--ambient);
}
.primary:not(:disabled)::before,
.primary:not(:disabled)::after,
.ears::before,
.ears::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 12px;
  height: 32px;
  border: 2px solid var(--ink);
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: linear-gradient(var(--cream-top), #efe5c2);
  transform-origin: 50% 100%;
  /* Each ear's lean is its own rotate; the sprout animations only move and
     squash it along that lean, so they need no per-ear values. */
}
/* Wherever Piyorat's ears appear, they sprout up from behind (ear-pop). */
.primary:not(:disabled)::before {
  rotate: -12deg;
  top: -25px;
  left: calc(50% - 16px);
  animation:
    ear-pop 0.45s var(--bounce) both,
    ear-flick-left 3.6s ease-in-out 1s infinite;
}
.primary:not(:disabled)::after {
  rotate: 9deg;
  top: -27px;
  left: calc(50% + 3px);
  animation:
    ear-pop 0.45s 0.06s var(--bounce) both,
    ear-flick-right 3.6s ease-in-out 1.15s infinite;
}

/* Touch style: a recessed track with a sliding ink thumb wearing Piyorat's ears. */
.segmented {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 50px;
  padding: 4px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(#ece2bf, #f9f3dc);
  box-shadow:
    inset 0 2px 3px rgb(62 74 48 / 0.18),
    0 3px 0 var(--ink),
    var(--ambient);
}
.thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  /* Always its own layer so the ears look the same in both positions. */
  transform: translateX(0);
  border-radius: 999px;
  background: linear-gradient(var(--moss-top), var(--moss-bottom));
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.25);
  transition: transform 0.32s var(--bounce);
}
#game[data-tool='pinch'] .thumb {
  transform: translateX(100%);
}
/* The thumb's ears sit in a strip that ends just inside the thumb's top edge,
   so they sprout out of the thumb as from behind the catch button. */
.ears {
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  height: 38px;
  overflow: hidden;
}
.ears::before,
.ears::after {
  top: 4px;
  width: 11px;
  height: 28px;
  border-bottom-color: transparent;
}
.ears::before {
  rotate: -13deg;
  left: calc(50% - 14px);
  animation: ear-pop 0.45s var(--bounce) both;
}
.ears::after {
  rotate: 11deg;
  left: calc(50% + 3px);
  animation: ear-pop 0.45s 0.06s var(--bounce) both;
}
/* Switching tools: the ears duck in, the thumb slides, and they sprout again.
   Each switch flips data-hop between two sets of animations whose names differ
   from each other and from the first sprout: a running animation keeps going
   while its name stays in the list, so only new names make the ears move. */
.thumb[data-hop='a'] .ears::before {
  animation:
    ear-duck-a 0.12s ease-in both,
    ear-pop-a 0.45s 0.26s var(--bounce) forwards;
}
.thumb[data-hop='a'] .ears::after {
  animation:
    ear-duck-a 0.12s ease-in both,
    ear-pop-a 0.45s 0.32s var(--bounce) forwards;
}
.thumb[data-hop='b'] .ears::before {
  animation:
    ear-duck-b 0.12s ease-in both,
    ear-pop-b 0.45s 0.26s var(--bounce) forwards;
}
.thumb[data-hop='b'] .ears::after {
  animation:
    ear-duck-b 0.12s ease-in both,
    ear-pop-b 0.45s 0.32s var(--bounce) forwards;
}
.segmented button {
  position: relative;
  z-index: 1;
  min-width: 80px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 17px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
}
.segmented button[aria-pressed='true'] {
  color: var(--cream);
  cursor: default;
}

#curry {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
  width: 125px;
  height: 86px;
  filter: drop-shadow(0 8px 5px #46573d22);
}
#curry img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#curry.dragging {
  z-index: 5;
  filter: drop-shadow(0 12px 8px #46573d33);
}
/* Thinking of the curry: the same watercolor plate, small, in a bubble. */
.thought {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -100%);
  padding: 9px 11px 8px;
  background: #fffdf3;
  border-radius: 50%;
  box-shadow: 0 3px 8px #47697c13;
  animation: anticipation 0.7s ease-in-out infinite alternate;
}
.thought img {
  display: block;
  width: 52px;
  height: auto;
}
#contact {
  position: absolute;
  pointer-events: none;
  width: 84px;
  height: 36px;
  border: 1.5px solid #99603f85;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  background: #fffaf00a;
}
#game[data-tool='pinch'] #contact {
  border-style: dashed;
}

/* Loading: a pair of ears bobbing while Piyorat is called. */
#loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  background: var(--mist);
  z-index: 5;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 24px;
}
.loader {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 40px;
}
.loader i {
  width: 14px;
  height: 34px;
  border: 2px solid var(--ink);
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: var(--cream);
  transform-origin: 50% 100%;
  animation: ear-bob 0.9s ease-in-out infinite alternate;
}
.loader i + i {
  animation-delay: -0.45s;
}

[hidden] {
  display: none !important;
}
@keyframes anticipation {
  to {
    transform: translate(-50%, -110%) rotate(5deg);
  }
}
@keyframes dock-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
}
@keyframes wiggle {
  0%,
  100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(-2deg) translateY(-2px);
  }
}
/* The sprout; the -a/-b copies serve tool switches (see data-hop). */
@keyframes ear-pop {
  from {
    transform: translateY(18px) scaleY(0.4);
  }
}
@keyframes ear-duck-a {
  to {
    transform: translateY(18px) scaleY(0.4);
  }
}
/* Names its end, so following ear-duck it ends upright, not ducked. */
@keyframes ear-pop-a {
  from {
    transform: translateY(18px) scaleY(0.4);
  }
  to {
    transform: none;
  }
}
@keyframes ear-duck-b {
  to {
    transform: translateY(18px) scaleY(0.4);
  }
}
/* Names its end, so following ear-duck it ends upright, not ducked. */
@keyframes ear-pop-b {
  from {
    transform: translateY(18px) scaleY(0.4);
  }
  to {
    transform: none;
  }
}
@keyframes ear-flick-left {
  0%,
  86%,
  100% {
    rotate: -12deg;
  }
  92% {
    rotate: -24deg;
  }
}
@keyframes ear-flick-right {
  0%,
  86%,
  100% {
    rotate: 9deg;
  }
  92% {
    rotate: 20deg;
  }
}
@keyframes ear-bob {
  from {
    transform: rotate(-10deg) scaleY(0.82);
  }
  to {
    transform: rotate(8deg) scaleY(1);
  }
}
@media (max-width: 480px) {
  #held-controls {
    column-gap: 8px;
  }
  #held-controls .pill,
  #held-controls .segmented button {
    font-size: 15px;
    letter-spacing: 0.03em;
  }
  #held-controls .pill {
    padding: 0 14px;
  }
  #held-controls .segmented button {
    min-width: 0;
    padding: 0 12px;
  }
}
@media (max-width: 360px) {
  .controls {
    gap: 8px;
  }
  .pill,
  .segmented button {
    font-size: 15px;
    letter-spacing: 0.03em;
  }
  .pill {
    padding: 0 15px;
  }
  .curry-button {
    padding: 0 15px 0 6px;
  }
  .segmented button {
    min-width: 0;
    padding: 0 13px;
  }
  .thought img {
    width: 46px;
  }
}
@media (min-width: 900px) and (min-height: 640px) {
  #dock {
    top: max(30px, env(safe-area-inset-top));
  }
  .pill,
  .segmented {
    height: 56px;
  }
  .pill,
  .segmented button {
    font-size: 19px;
  }
  .segmented button {
    min-width: 92px;
  }
}
@media (max-height: 520px) {
  /* Room above for the ears. */
  #dock {
    top: max(28px, env(safe-area-inset-top));
  }
  .pill,
  .segmented {
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}