/* ============================================================
   TACO CATCH — Tierra Taco Club promo mini-game
   Design system matched to jinlabs.mycafe24.com/tierrataco:
   cream ground, ink #1e1b16, orange primary, pink footer,
   colored-square accents. Type: Rubik 800 + Outfit.
   ============================================================ */

:root {
  --cream:       #f7efde;
  --cream-deep:  #f1e5c9;
  --paper:       #fffdf7;
  --ink:         #1e1b16;
  --ink-soft:    #55503f;
  --line:        rgba(30, 27, 22, .16);
  --orange:      #f5560e;
  --orange-deep: #d4460a;
  --pink:        #f04078;
  --pink-deep:   #d63067;
  --green:       #0aa332;
  --yellow:      #f8c028;
  --radius:      18px;

  --display: "Rubik", "Arial Black", sans-serif;
  --body: "Outfit", "Helvetica Neue", system-ui, sans-serif;

  --char-w: clamp(96px, 26vw, 134px);
  --ground-h: clamp(26px, 5.5vh, 38px);
  --item-w: clamp(46px, 13vw, 64px);
  --counter-h: clamp(26px, 5vh, 40px);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--cream-deep);
  font-family: var(--body);
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  justify-content: center;
}

#stage-wrap {
  position: relative;
  width: min(100vw, 480px);
  height: 100dvh;
  max-height: 900px;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  box-shadow: 0 12px 30px rgba(30, 27, 22, .10);
  overflow: hidden;
}

@media (min-width: 520px) and (min-height: 760px) {
  #stage-wrap {
    height: min(100dvh - 48px, 820px);
    border-radius: var(--radius);
  }
}

/* wide desktop: open the field up */
@media (min-width: 900px) {
  #stage-wrap {
    width: min(94vw, 1000px);
    max-height: 860px;
  }
}

/* ---------- top bar (dark, like the site nav) ---------- */

#topbar {
  flex: none;
  background: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 13px;
}

#logo {
  flex: none;
  width: clamp(57px, 15.4vw, 75px);
  height: auto;
  display: block;
  margin-left: 8px;
}

/* keeps the chip optically centred against the logo */
#topbar-spacer {
  flex: none;
  width: calc(clamp(57px, 15.4vw, 75px) + 8px);
}

#hud {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

#next-chip {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(17px, 5vw, 22px);
  letter-spacing: .02em;
  color: var(--orange);
  background: var(--paper);
  border-radius: 12px;
  padding: 5px 20px 6px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}

#next-chip #next-name { color: var(--ink); }
#next-chip.done #next-name { color: var(--green); }

#progress {
  font-weight: 600;
  font-size: clamp(11px, 3vw, 14px);
  letter-spacing: .08em;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  padding: 0 8px;
}

#progress .dash { opacity: .45; }
#progress .step b { font-weight: 600; }
#progress .step.done { color: var(--yellow); }

/* ---------- play field ---------- */

#field {
  position: relative;
  flex: 1;
  touch-action: none;
  overflow: hidden;
}

/* wooden boardwalk the cactus stands on */
#ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ground-h);
  background: #cf9455;
  border-top: 3px solid #9c6530;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 52px,
    rgba(120, 72, 28, .32) 52px 55px
  );
}

.item {
  position: absolute;
  width: var(--item-w);
  height: var(--item-w);
  margin-left: calc(var(--item-w) / -2);
  top: 0;
  left: 0;
  will-change: transform;
  pointer-events: none;
}

.item img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 3px rgba(30, 27, 22, .16));
}

.item.bomb img { animation: bombWobble .5s ease-in-out infinite alternate; }

@keyframes bombWobble {
  from { transform: rotate(-7deg); }
  to   { transform: rotate(7deg); }
}

#lives {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: clamp(25px, 6.8vw, 32px);
  line-height: 1;
  color: var(--pink);
  letter-spacing: 4px;
  z-index: 3;
  text-shadow: 0 2px 0 rgba(30, 27, 22, .12);
}

#lives .heart { transition: opacity .25s ease, filter .25s ease; }
#lives .heart.lost { opacity: .18; filter: grayscale(1); }

#warn {
  position: absolute;
  top: 6px;
  left: 0;
  margin-left: -16px;
  font-size: 30px;
  color: var(--orange);
  animation: warnBlink .28s step-end infinite;
  z-index: 3;
}

@keyframes warnBlink { 50% { opacity: .15; } }

/* ---------- player ---------- */

#player {
  position: absolute;
  bottom: calc(var(--ground-h) - 23px);
  left: 0;
  width: var(--char-w);
  margin-left: calc(var(--char-w) / -2);
  will-change: transform;
}

#player img {
  display: block;
  filter: drop-shadow(0 5px 4px rgba(30, 27, 22, .18));
}

#char-img { width: 100%; }

/* the taco rests on the cactus's raised arms */
#taco-img {
  position: absolute;
  left: 3%;
  width: 94%;
  bottom: 62%;
  z-index: 2;
}

/* only the taco pops when an ingredient lands — the cactus holds still */
#player.pop #taco-img {
  animation: pop .5s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: 50% 100%;
}

@keyframes pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18) translateY(-6px); }
  100% { transform: scale(1); }
}

#player.shake img { animation: shake .4s ease-in-out; }

@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-7px) rotate(-4deg); }
  40% { transform: translateX(6px) rotate(3deg); }
  60% { transform: translateX(-5px) rotate(-2deg); }
  80% { transform: translateX(3px) rotate(1deg); }
}

/* the finished taco lifts to centre stage on its own */
#hero-taco {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  transition: transform .9s cubic-bezier(.34, 1.25, .5, 1);
}

#hero-taco img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 8px 10px rgba(30, 27, 22, .22));
}

/* ---------- toast messages ---------- */

#toast {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(19px, 6vw, 28px);
  letter-spacing: .01em;
  text-align: center;
  line-height: 1.15;
  color: var(--ink);
  text-shadow: 2px 2px 0 var(--paper);
  white-space: nowrap;
  z-index: 4;
  animation: toastIn .45s cubic-bezier(.34, 1.56, .64, 1);
}

#toast.good { color: var(--green); }
#toast.bad  { color: var(--pink); font-size: clamp(14px, 4.4vw, 20px); }

@keyframes toastIn {
  from { transform: translateX(-50%) scale(.4); opacity: 0; }
  to   { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* ---------- counter strip (matches the header) ---------- */

#counter {
  flex: none;
  height: var(--counter-h);
  background: var(--ink);
}

/* ---------- overlays ---------- */

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(30, 27, 22, .45);
  z-index: 10;
}

.card, .coupon {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(30, 27, 22, .12);
  text-align: center;
  padding: 30px 30px 28px;
  max-width: 330px;
  width: 100%;
  animation: cardIn .5s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes cardIn {
  from { transform: scale(.7) translateY(30px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.eyebrow {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--orange);
}

.title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 11vw, 52px);
  letter-spacing: -.01em;
  line-height: .86;
  margin: 4px 0 14px;
  color: var(--ink);
}

#start-overlay .card { max-width: 380px; }
#start-overlay .eyebrow { margin-bottom: 12px; }  /* eyebrow → title */
#start-overlay .title { margin-bottom: 18px; }    /* title → copy */
#start-overlay .lede { margin-bottom: 26px; }     /* copy → button */

.title.small { font-size: clamp(28px, 8.6vw, 40px); }

#over-overlay .title { margin-bottom: 24px; }

/* colored-square "period" accents, from the site's headline style */
.sq {
  display: inline-block;
  width: .16em;
  height: .16em;
  margin-left: .1em;
  vertical-align: baseline;
}
.sq-orange { background: var(--orange); }
.sq-pink   { background: var(--pink); }
.sq-green  { background: var(--green); }

.lede {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
}

.lede b { color: var(--ink); font-weight: 600; }

.hint {
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.btn {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--orange);
  border: none;
  border-radius: 12px;
  padding: 9px 24px 10px;
  box-shadow: 0 4px 0 var(--orange-deep);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

#start-btn, #retry-btn {
  font-size: 24px;
  padding: 12px 32px 13px;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--orange-deep); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--orange-deep); }
.btn:focus-visible { outline: 3px dashed var(--green); outline-offset: 4px; }

/* ---------- win coupon ---------- */

.coupon {
  position: relative;
  overflow: hidden;
  padding: 34px 30px 30px;
}

.win-eyebrow {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(19px, 5.4vw, 23px);
  letter-spacing: .04em;
  color: var(--green);
  margin-bottom: 4px;
}

.you-made {
  margin: 14px 0 0;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--ink-soft);
}

.taco-name { margin: 6px 0 14px; color: var(--ink); }

.descriptors {
  margin: 0 0 16px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--ink-soft);
}

.price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 34px;
  margin: 0 0 26px;
  color: var(--orange);
}

/* tear-off stub: the part the customer redeems */
.stub {
  margin: 0 -30px 16px;
  padding: 22px 24px 24px;
  background: var(--yellow);
  border-top: 3px dashed rgba(30, 27, 22, .35);
  border-bottom: 3px dashed rgba(30, 27, 22, .35);
}

.unlock {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(17px, 5vw, 20px);
  letter-spacing: .04em;
  color: var(--ink);
}

.code {
  margin: 0;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .06em;
}

.code b {
  font-family: var(--display);
  font-weight: 800;
  background: var(--paper);
  border-radius: 8px;
  padding: 4px 14px 5px;
  margin-left: 4px;
  letter-spacing: .06em;
}

.cta {
  margin: 0 0 22px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
}

#again-btn {
  font-size: 24px;
  padding: 12px 32px 13px;
}

/* ---------- accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  #player.pop #taco-img,
  #player.shake img,
  .item.bomb img,
  #toast,
  .card, .coupon { animation: none; }
  #hero-taco { transition: none; }
  #warn { animation: none; }
}