/* shop game (site/shop.js): ร้านขนมของหนู, a dessert shop with animal customers */
.shop { --aw: clamp(26px, 7vh, 64px); --ct: 64vh; --c: min(46vh, 29vw); --d: min(50vh, 32vw); --b: min(13vh, 8.6vw);
  --dt: calc(var(--ct) - var(--c));
  background: #FFF1F5 repeating-linear-gradient(90deg, #FFE3EC 0 5vmin, #FFF1F5 5vmin 10vmin); overflow: hidden; }
@media (orientation: portrait) {
  .shop { --ct: 65vh; --c: min(25vh, 44vw); --d: min(32vh, 70vw); --b: min(9.5vh, 16.5vw);
    --dt: max(calc(var(--aw) + 4vmin + 4px), 70px); }
}

/* awning with a scalloped edge */
.shop-awning { position: absolute; left: 0; right: 0; top: 0; height: var(--aw); z-index: 2;
  background: repeating-linear-gradient(90deg, #FF7FA8 0 8vmin, #FFFFFF 8vmin 16vmin); }
.shop-awning::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 4vmin;
  background: radial-gradient(circle at 4vmin 0, #FF7FA8 4vmin, transparent calc(4vmin + 1px)) 0 0 / 16vmin 4vmin repeat-x,
    radial-gradient(circle at 12vmin 0, #FFFFFF 4vmin, transparent calc(4vmin + 1px)) 0 0 / 16vmin 4vmin repeat-x;
  filter: drop-shadow(0 .5vmin 0 rgba(0,0,0,.06)); }

/* the doorway the customer stands in (its colour matches the animal pictures' background) */
.shop-door { position: absolute; z-index: 1; left: 3vw; top: var(--dt); width: calc(var(--c) * 1.1); height: calc(var(--c) * 1.05);
  background: #FDF4E0; border: 1vmin solid #F7A8C0; border-bottom: 0; border-radius: 50% 50% 0 0 / 34% 34% 0 0; overflow: hidden; }
@media (orientation: portrait) {
  .shop-door { left: 4vw; border-bottom: 1.6vmin solid #F58FAE; border-radius: 50% 50% 2vmin 2vmin / 34% 34% 2vmin 2vmin; }
}
.shop-cust { position: absolute; left: 50%; bottom: calc(var(--c) * -.08); width: var(--c); height: var(--c);
  margin-left: calc(var(--c) / -2); cursor: pointer; transform-origin: 50% 100%; }
@media (orientation: portrait) { .shop-cust { bottom: calc(var(--c) * -.04); } }
.shop-cust img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shop-cust .emoji { width: 100%; height: 100%; display: grid; place-items: center; font-size: calc(var(--c) * .6); }
.shop-cust.shop-want { animation: shopbob 1.8s ease-in-out infinite; }
@keyframes shopbob { 50% { transform: translateY(-2.5%) rotate(-2deg) } }
.shop-cust.shop-leave { transform: translateX(-130%); transition: transform .6s ease-in; animation: none; }
.shop .shop-arrive { animation: shopin .8s cubic-bezier(.3,1.25,.5,1); }
@keyframes shopin { from { transform: translateX(-130%) } }
.shop .jump { animation: jump .7s ease; }
.shop .wiggle { animation: wiggle .5s ease; }

/* speech bubble with the order as a picture */
.shop-bubble { position: absolute; z-index: 6; left: calc(3vw + var(--c) * 1.02); top: calc(var(--dt) - 1vh); width: calc(var(--c) * .72);
  background: #fff; border-radius: 3vmin; padding: 1.2vmin 1.2vmin .8vmin; box-shadow: 0 .8vmin 0 rgba(0,0,0,.08);
  display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.shop-bubble::before { content: ""; position: absolute; left: -2.4vmin; top: 40%; border: 1.6vmin solid transparent; border-right: 2.4vmin solid #fff; border-left: 0; }
@media (orientation: portrait) {
  .shop-bubble { left: calc(4vw + var(--c) * 1.1 + 3vw); top: var(--dt); width: calc(89vw - var(--c) * 1.1); }
}
.shop-order { position: relative; height: calc(var(--c) * .5); width: 100%; display: flex; justify-content: center; }
@media (orientation: portrait) { .shop-order { height: calc(var(--c) * .7); } }
.shop-order svg { height: 100%; width: 100%; }
.shop-q { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); font-size: calc(var(--c) * .2); color: #FF7FA8;
  text-shadow: 0 .4vmin 0 #fff; }
.shop-cap { font-size: clamp(12px, 2.1vmin, 18px); line-height: 1.3; text-align: center; color: var(--ink); font-weight: 700; margin-top: .4vmin; }
.shop-cap:empty { display: none; }
.shop-cap span { display: inline-block; white-space: nowrap; margin: 0 .2em; }
.shop-spk { position: absolute; right: -1.2vmin; top: -1.2vmin; width: clamp(26px, 5vmin, 40px); aspect-ratio: 1; border-radius: 50%;
  background: var(--butter); display: grid; place-items: center; font-size: clamp(13px, 2.4vmin, 20px); }
.shop .shop-pop { animation: shoppop .5s cubic-bezier(.3,1.4,.5,1); }
@keyframes shoppop { from { transform: scale(.3); opacity: 0 } }

/* counter, the dessert being made, the give button */
.shop-counter { position: absolute; z-index: 4; left: 0; right: 0; top: var(--ct); bottom: 0;
  background: linear-gradient(#FFB3C7 0 2.4vh, #F58FAE 2.4vh 3.4vh, transparent 3.4vh),
    repeating-linear-gradient(90deg, #FFE2C2 0 12vmin, #FFD7B0 12vmin 12.6vmin); box-shadow: 0 -.6vmin 0 rgba(0,0,0,.05); }
.shop-make { position: absolute; z-index: 5; left: calc(3vw + var(--c) * 1.8); top: calc(var(--ct) + 1.4vh - var(--d));
  width: calc(var(--d) * .82); height: var(--d); cursor: pointer; transform-origin: 50% 100%; }
@media (orientation: portrait) { .shop-make { left: calc(46vw - var(--d) * .41); } }
.shop-make svg { width: 100%; height: 100%; display: block; overflow: visible; }
.shop-make::before { content: ""; position: absolute; left: 15%; right: 15%; bottom: -1vh; height: 2vh; border-radius: 50%; background: rgba(160,80,90,.18); }
.shop-give { position: absolute; z-index: 7; right: 3vw; top: calc(var(--ct) - var(--b) * 1.7); width: calc(var(--b) * 1.25); aspect-ratio: 1;
  border-radius: 50%; background: #7CC98A; box-shadow: 0 1vmin 0 #4FA866; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; cursor: pointer; opacity: 0; transform: scale(.3); pointer-events: none; transition: opacity .3s, transform .35s cubic-bezier(.3,1.4,.5,1); }
.shop-give span { font-size: calc(var(--b) * .5); line-height: 1; }
.shop-give small { font-size: clamp(11px, calc(var(--b) * .18), 18px); }
.shop-give.shop-on { opacity: 1; transform: none; pointer-events: auto; animation: shopbeat 1.8s ease-in-out infinite; }
.shop-give.shop-on.shop-glow { animation: glow .75s ease 2; }
@keyframes shopbeat { 50% { transform: scale(1.07) } }
@media (orientation: portrait) {
  .shop-give { right: 4vw; top: calc(var(--ct) - var(--b) * 1.45); width: calc(var(--b) * 1.15); }
}
.shop-clear { position: absolute; z-index: 7; left: calc(3vw + var(--c) * 1.8 - var(--b) * .9); top: calc(var(--ct) - var(--b) * .95);
  width: calc(var(--b) * .75); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--soft);
  display: grid; place-items: center; font-size: calc(var(--b) * .45); font-weight: 700; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .3s; box-shadow: 0 .6vmin 0 rgba(0,0,0,.08); }
.shop-clear.shop-on { opacity: 1; pointer-events: auto; }
@media (orientation: portrait) { .shop-clear { left: 3vw; top: calc(var(--ct) - var(--b) * 1.1); } }

/* tray: flavour colours, then toppings */
.shop-tray { position: absolute; z-index: 6; left: 0; right: 0; top: calc(var(--ct) + 4.4vh); display: flex; justify-content: center;
  align-items: center; gap: 4vmin; padding: 0 2vw; }
@media (orientation: portrait) { .shop-tray { flex-direction: column; gap: 1.6vh; top: calc(var(--ct) + 4.2vh); } }
.shop-group { display: flex; gap: min(1.8vmin, 1.6vw); }
.shop-btn { width: var(--b); height: var(--b); flex: none; display: grid; place-items: center; cursor: pointer; position: relative;
  box-shadow: 0 .9vmin 0 rgba(0,0,0,.1); }
.shop-btn > img { width: 62%; height: 62%; object-fit: contain; }
.shop-btn > svg { width: 80%; height: 80%; }
.shop-btn .emoji { font-size: calc(var(--b) * .5); }
.shop-col { border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.7) 0 12%, transparent 13%), var(--f);
  border: .7vmin solid var(--s); }
.shop-col > img { filter: drop-shadow(0 .3vmin 0 rgba(255,255,255,.8)); }
.shop-x { border-radius: 26%; background: #fff; border: .7vmin solid #F7C9D6; }

/* coins earned */
.shop-jar { position: absolute; z-index: 20; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  height: 56px; display: flex; align-items: center; gap: 6px; padding: 0 18px 0 8px; background: rgba(255,255,255,.9); border-radius: 999px;
  font-size: 26px; color: var(--ink); box-shadow: 0 .6vmin 0 rgba(0,0,0,.08); }
.shop-jar img { height: 42px; width: 42px; }

/* flying dessert / coin */
.shop-fly, .shop-coin { position: fixed; pointer-events: none; z-index: 60; }
.shop-fly svg, .shop-coin img { width: 100%; height: 100%; display: block; }

/* SVG part animations */
.shop-drop { animation: shopdrop .55s cubic-bezier(.3,1.2,.5,1) both; }
@keyframes shopdrop { from { transform: translateY(-140px); opacity: .3 } 70% { transform: translateY(5px); opacity: 1 } }
.shop-fall { animation: shopfall .7s ease-out both; }
@keyframes shopfall { from { transform: translateY(-60px); opacity: 0 } }
.shop-pour { transform-box: fill-box; transform-origin: 50% 0; animation: shoppour .5s ease-out both; }
@keyframes shoppour { from { transform: scaleY(.15); opacity: .4 } }
.shop-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: shopflick .45s ease-in-out infinite alternate; }
@keyframes shopflick { to { transform: scale(.85, 1.12) } }
.shop-out .shop-flame { opacity: 0; animation: none; transition: opacity .4s; }