/* Tiendita. A fruit stall at a Mexican street market (tianguis) on a bright morning: a striped
   rosa-mexicano awning and papel picado over a turquoise wall, Tere the axolotl behind a magenta
   counter, a woven palm tray for the coins and the child's embroidered purse in front. Rosa mexicano
   for the stall and the one action, marigold gold for coins and "paid", teal for "exactly right",
   terracotta for "too much", cocoa ink like the Ludo outlines. Lilita One (a hand-painted market sign
   face) for prices, numbers and titles; Andika (made for early readers) for words. */

:root {
  --ink: #4a2a1f;
  --ink-soft: #7a5442;
  --cream: #fff7ec;
  --paper: #fffaf3;
  --rosa: #e4007c;
  --rosa-dark: #9e0057;
  --rosa-soft: #ffe0f0;
  --gold: #ffc93c;
  --gold-dark: #c98a00;
  --teal: #20a69d;
  --teal-dark: #13716b;
  --terra: #d9774a;
  --terra-dark: #a8502b;
  --silver: #d9dde2;
  --display: "Lilita One", "Andika", system-ui, sans-serif;
  --text: "Andika", system-ui, sans-serif;
  --knob: 52px;
  /* Stage geometry, set by js/shop.js layout() from the window's size. */
  --coin: 64px;
  --coins-bottom: 80px;
  --purse-h: 130px;
  --counter-w: 380px;
  --counter-h: 147px;
  --counter-top: 480px;
  --tere-h: 300px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--text);
}
body.bare { overflow: hidden; overscroll-behavior: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 4px solid var(--rosa-dark); outline-offset: 3px; }

/* The stage */
.shop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: manipulation;
  background: #7cc7bf;
}
.scene { position: absolute; inset: 0; }
.scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.confetti { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }

/* Bar: the shopping list and the corner knobs */
.bar {
  position: absolute;
  z-index: 5;
  left: 14px;
  right: 14px;
  top: calc(12px + env(safe-area-inset-top));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.list-chip {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  min-width: 0;
  padding: 6px 14px 8px;
  border: 0;
  border-image: url("/tiendita/static/art/list.b4515ce458.webp") 14% 10% fill / 12px 10px stretch;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 3px 0 rgba(74, 42, 31, .25));
  transform: rotate(-1.5deg);
}
.list-ticks { display: flex; align-items: center; gap: 2px; }
.list-ticks img { height: 30px; width: 30px; object-fit: contain; opacity: .35; filter: grayscale(.7); transition: opacity .3s, filter .3s, transform .3s; }
.list-ticks img.is-done { opacity: 1; filter: none; }
.list-ticks img.is-now { opacity: 1; filter: none; transform: scale(1.25); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: scale(1.25) translateY(-3px); } }
.corner { display: flex; gap: 8px; flex: none; }
.knob {
  display: inline-grid;
  place-items: center;
  width: var(--knob);
  height: var(--knob);
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 4px 0 var(--ink);
  color: var(--ink);
  font: 400 19px/1 var(--display);
  text-decoration: none;
  cursor: pointer;
}
.knob:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.knob svg { width: 24px; height: 24px; }
.knob.small { width: 48px; height: 48px; box-shadow: 0 3px 0 var(--ink); background: var(--rosa-soft); }
.knob.small svg { width: 20px; height: 20px; }
.knob.big { width: 56px; height: 56px; background: var(--cream); }
.knob.big svg { width: 26px; height: 26px; }
#sound .sound-off, #sound[aria-pressed="false"] .sound-on { display: none; }
#sound[aria-pressed="false"] .sound-off { display: block; }

/* Tere's bubble */
.bubble {
  position: absolute;
  z-index: 4;
  left: 14px;
  right: 14px;
  top: calc(74px + env(safe-area-inset-top));
  max-width: 560px;
  min-height: 56px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 16px;
  border: 3px solid var(--ink);
  border-radius: 22px 22px 22px 22px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(74, 42, 31, .22);
  font: 400 clamp(17px, 2.2vw, 21px)/1.25 var(--text);
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border: solid var(--ink);
  border-width: 0 3px 3px 0;
  background: #fff;
  transform: rotate(45deg);
}
.bubble p { margin: 0; flex: 1; }
.bubble.pop { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.92); opacity: .4; } }

/* Tere */
.tere {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(var(--counter-top) + var(--counter-h) * .16 - var(--tere-h));
  height: var(--tere-h);
  width: calc(var(--tere-h) * 443 / 520);
  transform: translateX(-50%);
  pointer-events: none;
}
.tere .pose { position: absolute; inset: 0; width: 100%; height: 100%; display: none; filter: drop-shadow(0 4px 0 rgba(74, 42, 31, .15)); }
.tere[data-pose="stand"] .stand, .tere[data-pose="cheer"] .cheer, .tere[data-pose="sorry"] .sorry, .tere[data-pose="give"] .give { display: block; }
.tere[data-pose="stand"] .stand { animation: breathe 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.tere[data-pose="cheer"] .cheer { animation: jump .55s cubic-bezier(.3, 1.5, .5, 1) 3; transform-origin: 50% 100%; }
.tere[data-pose="sorry"] .sorry { animation: tilt .5s ease-in-out; transform-origin: 50% 100%; }
.tere[data-pose="give"] .give { animation: lean .4s cubic-bezier(.3, 1.5, .5, 1); transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: scale(1.012, .99); } }
@keyframes jump { 40% { transform: translateY(-9%); } }
@keyframes tilt { 30% { transform: rotate(-4deg); } 70% { transform: rotate(3deg); } }
@keyframes lean { from { transform: scale(.96) translateY(3%); } }

/* The counter: the fruit and its price, the Tray, the bag, and the dots and sum on its front */
.counter {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: var(--counter-top);
  width: var(--counter-w);
  height: var(--counter-h);
  transform: translateX(-50%);
}
.counter-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.goods {
  position: absolute;
  left: 2%;
  bottom: 84%;
  width: 34%;
  height: calc(var(--counter-h) * .78);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.fruit {
  position: relative;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 20px;
  transition: transform .2s;
}
.fruit img { height: 100%; width: auto; max-width: calc(var(--counter-w) * .3); object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 4px 0 rgba(74, 42, 31, .2)); }
.shop:not(.is-asked) .fruit { animation: beckon 1.8s ease-in-out infinite; }
@keyframes beckon { 0%, 60%, 100% { transform: none; } 70% { transform: rotate(-6deg) scale(1.04); } 85% { transform: rotate(5deg) scale(1.04); } }
.fruit.nudge { animation: nudge .45s ease-in-out !important; }
@keyframes nudge { 25% { transform: translateY(-10%) scale(1.08); } 60% { transform: translateY(0) scale(.97); } }
.fruit.gone { visibility: hidden; }
/* Two fruits in one payment: side by side, smaller; the tag says both prices */
.is-two .fruit { height: 78%; min-width: 48px; } /* a phone on its side makes each good narrower than a finger */
.is-two .fruit img { max-width: calc(var(--counter-w) * .17); }
.is-two .tag { font-size: calc(var(--counter-h) * .2); }
/* The vendor's tier: Tere's coin lies on the counter next to the fruit */
.paid-coin { position: absolute; left: 1%; bottom: -12%; z-index: 1; --c: calc(var(--coin) * .8); pointer-events: none; }
.paid-coin .coin { cursor: default; }
.tag {
  position: absolute;
  right: -14%;
  top: 4%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  width: calc(var(--counter-h) * .62);
  height: calc(var(--counter-h) * .38);
  margin: 0;
  padding: 0 0 0 10%;
  background: url("/tiendita/static/art/tag.2f31c79365.webp") center / 100% 100% no-repeat;
  color: var(--rosa-dark);
  font: 400 calc(var(--counter-h) * .27)/1.35 var(--display);
  transform: rotate(8deg) scale(0);
  transform-origin: 20% 50%;
  filter: drop-shadow(0 3px 0 rgba(74, 42, 31, .25));
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.tag-sign { font-size: .7em; }
.is-asked .tag { transform: rotate(8deg) scale(1); }
.tray {
  position: absolute;
  left: 37%;
  bottom: 70%;
  width: 42%;
  aspect-ratio: 722 / 281;
}
.tray-art { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(74, 42, 31, .2)); transition: filter .2s; }
.shop.is-target .tray-art { filter: drop-shadow(0 0 10px var(--gold)) drop-shadow(0 0 4px #fff); }
.tray-coins {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 30%;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-items: flex-end;
  --c: calc(var(--coin) * .78);
}
.tray-coins .coin { margin: 0 -4px -10px; }
.bag {
  position: absolute;
  right: 0;
  bottom: 84%;
  width: 21%;
  aspect-ratio: 369 / 420;
}
.bag-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.bag-fruit { position: absolute; left: 10%; right: 10%; top: -30%; height: 70%; display: flex; justify-content: center; }
.bag-fruit img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.front {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 26%;
  bottom: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4%;
}
.dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  --d: clamp(12px, calc(var(--counter-h) * .12), 22px);
}
.dot {
  width: var(--d);
  height: var(--d);
  border: 2.5px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transition: background-color .25s, transform .25s;
}
.dot.gap { margin-left: calc(var(--d) * .5); }
.dot.is-1, .dot.is-2, .dot.is-5 { background: var(--gold); border-color: var(--ink); transform: scale(1.08); }
.dot.is-10 { background: var(--silver); border-color: var(--ink); transform: scale(1.08); }
.dot.is-over { background: var(--terra); border-color: #fff; border-style: dashed; animation: wobble .5s ease-in-out; }
@keyframes wobble { 30% { transform: translateY(-4px); } 60% { transform: translateY(2px); } }
.sum {
  display: flex;
  align-items: center;
  gap: .18em;
  min-height: 1.1em;
  margin: 0;
  color: #fff;
  font: 400 clamp(20px, calc(var(--counter-h) * .2), 38px)/1 var(--display);
  text-shadow: 0 2px 0 var(--rosa-dark);
  white-space: nowrap;
}
.sum-plus, .sum-eq { opacity: .85; font-size: .8em; }
.sum-total { display: inline-grid; place-items: center; min-width: 1.3em; height: 1.3em; padding: .12em .2em 0; border: 3px solid var(--ink); border-radius: 999px; background: var(--cream); color: var(--ink); text-shadow: none; }
.sum.is-exact .sum-total { background: var(--teal); color: #fff; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.sum.is-over .sum-total { background: var(--terra); color: #fff; }

/* Coins: painted blanks with the value lettered on */
.coin {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--c, var(--coin)) * var(--k, 1));
  height: calc(var(--c, var(--coin)) * var(--k, 1));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: grab;
  touch-action: none;
}
.coin img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(74, 42, 31, .3)); }
.coin-face {
  position: relative;
  display: flex;
  align-items: baseline;
  padding-top: 6%;
  color: #7a4a00;
  font: 400 calc(var(--c, var(--coin)) * var(--k, 1) * .4)/1 var(--display);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.coin[data-value="10"] .coin-face { color: #4d5560; font-size: calc(var(--c, var(--coin)) * var(--k, 1) * .34); }
.coin-face small { font-size: .55em; margin-right: 1px; }
.purse-coins .coin { min-width: 48px; min-height: 48px; }
.coin.is-lifted { opacity: .3; }
.coin.is-change { pointer-events: none; }
.coin:disabled { cursor: default; }
.ghost { position: fixed; z-index: 9; left: 0; top: 0; pointer-events: none; filter: drop-shadow(0 12px 8px rgba(74, 42, 31, .3)); }

/* The purse: the coins lie on its open mouth */
.purse {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--coins-bottom) + var(--coin) * .95);
  pointer-events: none;
}
.purse-art {
  position: absolute;
  left: 50%;
  bottom: calc(-.18 * var(--purse-h));
  height: var(--purse-h);
  width: auto;
  transform: translateX(-50%);
}
.purse-coins {
  position: absolute;
  left: 50%;
  bottom: var(--coins-bottom);
  width: min(calc(100% - 24px), calc(var(--coin) * 7.4));
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  pointer-events: auto;
}
.purse-coins .slot { display: grid; place-items: end center; width: calc(var(--coin) * var(--k-slot, 1)); min-height: calc(var(--coin) * .76); }
.purse-coins .slot:empty { width: calc(var(--coin) * .5); }
.purse-coins .slot.is-change .coin { animation: shine 1.2s ease-in-out 2; }
@keyframes shine { 50% { filter: brightness(1.25) drop-shadow(0 0 8px var(--gold)); } }

.reset {
  position: absolute;
  z-index: 3;
  top: -18px;
  right: -14px;
  width: 48px !important;
  height: 48px !important;
}
.reset svg { width: 20px !important; height: 20px !important; }
.shop:not(.is-asked) .reset, .shop.is-paid .reset { visibility: hidden; }

.coach {
  position: absolute;
  z-index: 8;
  width: 56px;
  height: 64px;
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linejoin: round;
  pointer-events: none;
  animation: tap 1.4s ease-in-out infinite;
}
@keyframes tap { 0%, 100% { transform: translate(0, 10px); } 50% { transform: translate(0, 0) scale(.92); } }

/* Buttons painted by Ludo */
.plank-btn {
  min-height: 62px;
  min-width: 230px;
  padding: 6px 30px 12px;
  border: 0;
  border-image: url("/tiendita/static/art/button.89f87bce2d.webp") 40% 18% fill / auto stretch;
  border-image-width: 100% 56px;
  background: none;
  color: #fff;
  font: 400 clamp(22px, 2.6vw, 27px)/1.05 var(--display);
  text-shadow: 0 2px 0 var(--rosa-dark), 0 0 8px rgba(120, 0, 60, .4);
  cursor: pointer;
}
.plank-btn:active { transform: translateY(3px); }

/* Cards: hello, done */
.card {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: min(600px, calc(100% - 24px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 20px;
  border: 4px solid var(--ink);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 0 8px 0 rgba(74, 42, 31, .25), 0 0 0 100vmax rgba(74, 42, 31, .18);
  text-align: center;
  animation: rise .4s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes rise { from { transform: translate(-50%, 30px); opacity: 0; } }
.card h2 { margin: 0; font: 400 clamp(30px, 4vw, 40px)/1.05 var(--display); color: var(--rosa); }
.card p { margin: 0; font: 400 clamp(17px, 2.2vw, 20px)/1.35 var(--text); }
.hello .logo { width: min(320px, 80%); height: auto; margin-top: -6px; }
.hello-tere { width: 104px; height: auto; margin: -8px 0 -6px; }
.card-line b { font: 400 1.15em var(--display); color: var(--rosa-dark); }
.done-head { display: flex; align-items: center; gap: 12px; }
.done-art { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 150px; }
.done-cup { height: 100%; width: auto; animation: jump .6s cubic-bezier(.3, 1.5, .5, 1) 2; }
.done-pilon { height: 70%; width: auto; transform: rotate(14deg); animation: shine 1.2s ease-in-out 3; }
.acorns {
  display: inline-block;
  padding: 6px 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--gold);
  font: 400 20px/1.1 var(--display) !important;
}
.card-actions { display: flex; gap: 12px; align-items: center; }

/* The shopping list */
.sheet {
  position: absolute;
  z-index: 9;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(70px + env(safe-area-inset-top));
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  border: 4px solid var(--ink);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  background: var(--cream) repeating-linear-gradient(180deg, transparent 0 38px, rgba(43, 179, 163, .25) 38px 40px);
  box-shadow: 0 0 0 100vmax rgba(74, 42, 31, .35);
  overflow-y: auto;
}
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sheet h2 { margin: 0; font: 400 32px/1 var(--display); color: var(--rosa); }
.errand-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.errand-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 112px;
  padding: 12px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(74, 42, 31, .2);
  cursor: pointer;
}
.errand-card img { height: 80px; width: 100%; object-fit: contain; }
.errand-card:disabled { opacity: .45; cursor: default; }
.errand-card.is-current { border-color: var(--rosa); box-shadow: 0 4px 0 var(--rosa-dark); }
.errand-done {
  position: absolute; right: 8px; top: 8px;
  display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid var(--ink); border-radius: 50%;
  background: var(--teal); color: #fff; font: 400 18px/1 var(--display);
}

.tiers { margin-top: 16px; padding-top: 14px; border-top: 3px dashed var(--ink-soft); }
.stalls { margin-top: 16px; padding-top: 0; border-top: 0; }
.stall-card { gap: 6px; align-content: center; }
.stall-art { position: relative; display: block; width: 100%; height: 70px; border-radius: 10px; overflow: hidden; }
.stall-art .stall-scene { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.stall-art .stall-good { position: absolute; left: 50%; top: 50%; height: 54px; width: auto; max-width: 70%; transform: translate(-50%, -50%); object-fit: contain; filter: drop-shadow(0 2px 0 rgba(74, 42, 31, .35)); }
.tier-card { gap: 6px; align-content: center; }
.tier-card.is-new { border-color: var(--teal); }
.tier-art { display: flex; align-items: center; justify-content: center; gap: 4px; height: 70px; }
.tier-art img { height: 62px; width: auto; max-width: 64px; object-fit: contain; }
/* Two fruits and the Change arrow: smaller fruits, so the arrow stays inside the narrowest card */
.tier-art:has(> img + img + svg) img { height: 44px; max-width: 44px; }
.tier-art .coin img { height: 100%; width: 100%; max-width: none; }
.tier-art img.tier-small { height: 30px; }
.tier-art .coin { --c: 40px; cursor: inherit; }
.tier-art svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tier-dots { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 22px; }
.tier-dots i { width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 50%; background: var(--cream); }
.tier-dots i.on { background: var(--teal); }
.tier-dots svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tier-star, .tier-new { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; }
.tier-star { right: 6px; top: 6px; }
.tier-star svg { width: 30px; height: 30px; fill: var(--gold); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.tier-new { left: 6px; top: 6px; }
.tier-new svg { width: 26px; height: 26px; fill: none; stroke: var(--teal-dark); stroke-width: 3; stroke-linecap: round; }
.unlocked { display: inline-flex; align-items: center; gap: 8px; font: 400 20px/1.1 var(--display) !important; color: var(--teal-dark); }
.unlocked svg { width: 30px; height: 30px; fill: none; stroke: var(--teal-dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bag-fruit img:not(:only-child) { max-width: 50%; }

.noscript { position: absolute; z-index: 9; inset: auto 0 40% 0; text-align: center; font: 700 22px var(--text); }

/* Tablet and phone on their side: Tere's bubble beside her */
.shop.is-land .bubble {
  --tere-w: calc(var(--tere-h) * 443 / 520);
  left: auto; right: calc(50% + var(--tere-w) * .42);
  top: max(calc(64px + env(safe-area-inset-top)), calc(var(--counter-top) + var(--counter-h) * .16 - var(--tere-h) * .88));
  width: min(32vw, 360px, calc(50% - var(--tere-w) * .42 - 14px)); margin: 0;
}
.shop.is-land .bubble::after { left: auto; right: -14px; bottom: auto; top: 50%; margin: -11px 0 0; transform: rotate(-45deg); }
@media (max-width: 700px) {
  .card { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 440px) {
  .list-chip { padding: 6px 10px 8px; }
  .list-ticks img { width: 24px; height: 24px; }
}
@media (max-height: 520px) {
  .card { gap: 6px; padding: 10px 14px 12px; width: min(520px, calc(100% - 24px)); }
  .card h2 { font-size: 24px; }
  .card p { font-size: 15px; }
  .card .knob.big { width: 46px; height: 46px; }
  .done-art { height: 80px; }
  .plank-btn { min-height: 48px; min-width: 190px; font-size: 19px; }
  .hello .logo { width: 180px; }
  .hello-tere { display: none; }
  .bubble { font-size: 15px; min-height: 44px; padding: 4px 6px 4px 12px; }
  /* A phone on its side: Tere's bubble reaches down to the goods, so the tag hangs off the counter's end, under it */
  .shop.is-land .tag { right: auto; left: calc(var(--counter-h) * -.5); top: 84%; transform: rotate(-6deg) scale(0); transform-origin: 80% 0; }
  .shop.is-land.is-asked .tag { transform: rotate(-6deg) scale(1); }
  /* and Tere's coin lies at that end too, off a small good (a mazapán hid under it) */
  .shop.is-land .paid-coin { left: calc(var(--coin) * -.6); bottom: -30%; }
  .shop.is-land .paid-coin:not([hidden]) ~ .tag { top: 128%; }
  .shop.is-land .bubble { width: min(40vw, 360px, calc(50% - var(--tere-w) * .42 - 14px)); } /* fewer lines over the goods */
  .list-ticks img { width: 24px; height: 24px; }
  :root { --knob: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .coach { animation: none; }
}

/* Error pages */
body.paper { background: linear-gradient(180deg, #7cc7bf, #fff7ec 70%); min-height: 100%; }
.note-page {
  max-width: 520px;
  margin: 14vh auto 0;
  padding: 26px 22px 30px;
  border: 5px solid var(--ink);
  border-radius: 30px;
  background: var(--paper);
  text-align: center;
  box-shadow: 0 10px 0 rgba(74, 42, 31, .25);
}
.note-friend { width: 110px; height: auto; margin-top: -110px; }
.note-code { margin: 4px 0; font: 400 17px var(--display); color: var(--rosa-dark); letter-spacing: .04em; }
.note-page h1 { margin: 6px 0; font: 400 34px/1.1 var(--display); color: var(--rosa); }
.note-line { margin: 0 0 18px; font: 400 18px/1.4 var(--text); }
.hub-row { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0; }
.go {
  display: inline-grid;
  place-items: center;
  min-height: 56px;
  padding: 6px 28px 12px;
  border-image: url("/tiendita/static/art/button.89f87bce2d.webp") 40% 18% fill / auto stretch;
  border-image-width: 100% 50px;
  color: #fff;
  font: 400 22px/1 var(--display);
  text-decoration: none;
  text-shadow: 0 2px 0 var(--rosa-dark);
}