/* ============================================================
   Cocoa & Crumb by Ray - Grab Them All! mini game
   ============================================================ */

.game-body{
  height:100svh;
  overflow:hidden;
  background:
    radial-gradient(110% 70% at 50% 100%, var(--pink-soft) 0%, transparent 62%),
    var(--cream);
  position:relative;
}

/* ---------- playfield ---------- */
.game-field{position:fixed;inset:0;overflow:hidden;z-index:1}

.game-title{
  position:absolute;top:clamp(1rem,4vh,2.6rem);left:50%;transform:translateX(-50%);
  z-index:4;text-align:center;width:max-content;max-width:92vw;
  font-size:clamp(1.5rem,4.5vw,2.9rem);pointer-events:none;
}
.game-title small{
  display:block;font-family:var(--font-body);font-weight:600;
  font-size:clamp(.8rem,1.6vw,1rem);color:var(--brown);
  text-transform:none;letter-spacing:0;margin-top:.4rem;
}

/* a cookie in play */
.cookie{
  position:absolute;top:0;left:0;
  width:var(--size,96px);
  cursor:grab;touch-action:none;z-index:10;
  filter:drop-shadow(0 12px 18px rgba(109,65,42,.3));
  will-change:transform;user-select:none;-webkit-user-drag:none;
}
.cookie:active{cursor:grabbing}

/* the bag you drop them into.
   The bag art is 427x503, so it renders 1.18x its width tall. The hint is
   offset from that real height - deriving it from the width alone put the
   label behind the bag. */
.game-body{
  --bag-w:clamp(170px,21vw,270px);
  --bag-ratio:1.18;
  --bag-bottom:0px;
}
.game-bag{
  position:absolute;left:50%;bottom:var(--bag-bottom);
  width:var(--bag-w);
  transform:translateX(-50%);
  z-index:5;pointer-events:none;
  filter:drop-shadow(0 20px 26px rgba(109,65,42,.3));
}
.game-bag__hint{
  position:absolute;left:50%;
  bottom:calc(var(--bag-bottom) + var(--bag-w) * var(--bag-ratio) + .8rem);
  transform:translateX(-50%);
  z-index:5;pointer-events:none;white-space:nowrap;
  font-family:var(--font-display);font-weight:600;font-size:.9rem;
  color:var(--brown);background:var(--cream);
  border:2.5px dashed var(--brown);border-radius:var(--r-pill);
  padding:.5rem 1.1rem;
}

/* ---------- HUD ---------- */
.hud{
  position:fixed;top:clamp(.8rem,2.5vh,1.6rem);left:clamp(.8rem,2.5vw,1.6rem);
  z-index:30;width:clamp(140px,15vw,180px);
  background:var(--cream);border:3px solid var(--brown);
  border-radius:1.6rem;padding:1rem .9rem;text-align:center;
  box-shadow:0 10px 0 -2px var(--brown);
}
.hud__label{
  font-family:var(--font-display);font-weight:600;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--brown);margin:0 0 .3rem;
}
.hud__value{
  font-family:var(--font-display);font-weight:700;
  background:var(--yellow);color:var(--brown);
  border-radius:.9rem;padding:.5rem .6rem;margin:0 0 .9rem;
  font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.hud__value--score span{display:block;font-size:max(11px,.5em);letter-spacing:.1em;text-transform:uppercase}
.hud__value--danger{background:var(--brown);color:var(--cream)}
.hud__stop{
  width:100%;font-family:var(--font-display);font-weight:700;
  font-size:1rem;text-transform:uppercase;letter-spacing:.06em;
  padding:.7rem .5rem;border-radius:var(--r-pill);cursor:pointer;
  background:var(--yellow);color:var(--brown);border:2.5px solid var(--brown);
  box-shadow:0 5px 0 -1px var(--brown);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
}
.hud__stop:hover{transform:translateY(-2px);box-shadow:0 8px 0 -1px var(--brown)}
.hud__stop:active{transform:translateY(2px);box-shadow:0 2px 0 -1px var(--brown)}

/* score bump feedback */
.pop{
  position:absolute;z-index:20;pointer-events:none;
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  color:var(--brown);text-shadow:0 2px 0 var(--cream);
}

/* ---------- game over ---------- */
.over{
  position:fixed;inset:0;z-index:40;
  display:grid;place-items:center;text-align:center;
  background:color-mix(in srgb, var(--cream) 94%, transparent);
  backdrop-filter:blur(8px);
  padding:2rem 1.25rem;
}
.over[hidden]{display:none}
.over__inner{max-width:38rem}
.over h2{font-size:clamp(1.5rem,4.5vw,2.5rem);margin-bottom:.6rem}
.over__score{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(4.5rem,15vw,8.5rem);line-height:.82;color:var(--brown);
  font-variant-numeric:tabular-nums;
  margin:.5rem 0 .2rem;
}
.over__points{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.2rem,3.2vw,1.8rem);letter-spacing:.16em;
  text-transform:uppercase;color:var(--brown);margin:0 0 1rem;
}
.over__verdict{
  font-size:clamp(1.3rem,4vw,2rem);font-family:var(--font-display);
  font-weight:700;color:var(--brown);margin-bottom:1.8rem;
}
.over__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* On phones the boxed HUD would sit on top of the title, so it becomes a
   compact bar across the top and the title drops below it. */
@media (max-width:640px){
  .hud{
    left:50%;transform:translateX(-50%);
    width:min(94vw,420px);
    display:grid;grid-template-columns:1fr 1fr auto;
    gap:.15rem .6rem;align-items:center;
    padding:.6rem .75rem;border-radius:1.3rem;
  }
  .hud > :nth-child(1){grid-area:1/1}
  .hud > :nth-child(2){grid-area:2/1}
  .hud > :nth-child(3){grid-area:1/2}
  .hud > :nth-child(4){grid-area:2/2}
  .hud > :nth-child(5){grid-area:1/3/3/4}
  .hud__label{margin:0;font-size:.6rem}
  .hud__value{margin:0;font-size:1.15rem;padding:.4rem .5rem}
  .hud__stop{width:auto;padding:.7rem 1.1rem;font-size:.9rem}

  .game-body{--bag-w:clamp(150px,42vw,200px)}
  .game-title{top:7.8rem;font-size:1.5rem}
  .game-title small{font-size:.8rem;margin-top:.25rem}
  .game-bag__hint{font-size:.8rem}

  /* the top-right link would sit under the HUD bar - move it out of the way */
  .game-back{top:auto;bottom:1rem;left:1rem;right:auto}
}

/* back-to-site link */
.game-back{
  position:fixed;top:clamp(.8rem,2.5vh,1.6rem);right:clamp(.8rem,2.5vw,1.6rem);
  z-index:30;display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--brown);
  background:var(--cream);border:2.5px solid var(--brown);
  border-radius:var(--r-pill);padding:.45rem 1rem .45rem .5rem;
}
.game-back img{width:32px;height:32px;border-radius:50%}
@media (max-width:640px){.game-back span{display:none}.game-back{padding:.4rem}}