/*!
 * Whack-a-Bell — look.
 *
 * The Bell Garden: sky, hills, grass, and eight neutral pods in a 4x2 grid.
 * The PODS stay quiet on purpose — the bells carry all the colour, because
 * colour IS the note and nothing may compete with that. Everything else
 * follows the arcade's house look: Nunito, navy HUD chips, big friendly
 * buttons, rainbow bar up top.
 */

:root {
  --wb-navy: #1b233e;
  --wb-ink: #1f1d1a;
  --wb-ink-soft: #4a463f;
  --wb-paper: #fdfbf6;
  --wb-teal: #009999;
  --wb-teal-edge: #00706f;
  --wb-green: #6abb4a;
  --wb-green-edge: #4f9636;
  --wb-gold: #ffd25b;
  --wb-sky1: #aedcf2;
  --wb-sky2: #dff0f9;
  /* ONE field colour. There used to be three greens — a light wavy hill, a
     mid band and a darker one — so the top row of pods stood on a different
     green from the bottom row and the garden read as two places. The wave is
     now just the horizon line of this single colour. */
  --wb-grass: #7fb96e;
  --wb-pod: #e8ddc8;
  --wb-pod-rim: #d5c7ab;
  --wb-pod-dark: #b9a988;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  font-family: 'Nunito', 'Avenir Next Rounded', 'Trebuchet MS', sans-serif;
  color: var(--wb-ink);
  /* Sky only. The field is drawn by .wb-field, which is IN THE FLOW around the
     garden — so the horizon is always the same distance above the pods no
     matter the screen shape. A viewport-percentage grass band could not do
     that: on a tall iPad it landed below the pods and the bells floated in
     mid-air with dead space underneath. */
  background: linear-gradient(180deg, var(--wb-sky1) 0%, var(--wb-sky2) 70%, var(--wb-sky2) 100%);
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* no double-tap zoom on a game about tapping */
  user-select: none;
  -webkit-user-select: none;
}

/* Flex column, not a content-sized grid: the play screen has to be able to
   fill the app so the field can be pushed to the bottom of it. */
.wb-app {
  position: relative;
  width: min(1060px, 100%);
  margin: 0 auto;
  padding: 12px 14px 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── scenery: clouds and hills, pure decoration, never tappable ─────────── */
.wb-scenery { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.wb-scenery svg { width: 100%; height: 100%; display: block; }
.wb-cloud { animation: wb-drift 52s ease-in-out infinite alternate; }
.wb-cloud-b { animation-duration: 70s; animation-delay: -25s; }
@keyframes wb-drift { from { transform: translateX(-30px); } to { transform: translateX(50px); } }

.wb-app > * { position: relative; z-index: 1; }

/* ── header ─────────────────────────────────────────────────────────────── */
.wb-head { text-align: center; padding-top: 34px; }
.wb-title {
  margin: 0;
  font-size: clamp(30px, 6vw, 44px); font-weight: 900; color: var(--wb-navy);
  letter-spacing: -0.5px; line-height: 1.05;
}
.wb-sub {
  margin: 2px 0 0;
  font-size: clamp(13px, 2.6vw, 16px); font-weight: 800; color: var(--wb-ink-soft);
}

/* ── menu ───────────────────────────────────────────────────────────────── */
/* Flex, and it GROWS, so the decorative field at its foot can be pushed to the
   bottom of the screen the same way the real one is on the play screen. */
.wb-menu {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  min-height: 0;
}
/* The menu's field is scenery only — the garden it frames is on the next
   screen. Without it the menu was a page of pale sky, because the grass used
   to come from a body gradient that the play screen no longer uses. */
.wb-field-deco { width: 100%; padding-bottom: 0; pointer-events: none; }
.wb-modes {
  display: grid; gap: 12px; width: min(720px, 100%);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 640px) { .wb-modes { grid-template-columns: 1fr; } }

.wb-mode {
  border: 0; cursor: pointer; font-family: inherit;
  background: var(--wb-paper); border-radius: 20px;
  padding: 16px 12px 14px;
  display: grid; gap: 4px; justify-items: center;
  box-shadow: 0 6px 0 rgba(27, 35, 62, 0.14), 0 12px 26px rgba(27, 35, 62, 0.12);
  transition: transform 0.12s cubic-bezier(.3,1.4,.4,1);
}
.wb-mode:hover { transform: translateY(-3px); }
.wb-mode:active { transform: translateY(1px); }
.wb-mode-emoji { font-size: 34px; line-height: 1; }
.wb-mode-name { font-size: 18px; font-weight: 900; color: var(--wb-navy); }
.wb-mode-blurb { font-size: 12px; font-weight: 700; color: var(--wb-ink-soft); text-align: center; }
.wb-mode.is-primary { outline: 3px solid var(--wb-teal); outline-offset: -3px; }

/* option rows: tiny pills, one decision each */
.wb-optrow {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
}
.wb-optlabel {
  font-size: 11px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--wb-navy); opacity: 0.75; margin-right: 2px;
}
.wb-opt {
  border: 2px solid rgba(27, 35, 62, 0.18); background: rgba(253, 251, 246, 0.85);
  color: var(--wb-navy); font: 800 13px/1 'Nunito', sans-serif; font-family: inherit;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
}
.wb-opt.is-on { background: var(--wb-teal); border-color: var(--wb-teal); color: #fff; }

/* ── play screen ───────────────────────────────────────────────────────── */
#wbPlay { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; }

/* The chips sit LEFT, tucked in beside the Menu pill, so the prompt below can
   own the middle of the screen without the two crowding each other. */
.wb-hud {
  display: flex; justify-content: flex-start; gap: 10px; align-items: center;
  padding: 26px 96px 0 150px;   /* 150px clears the Menu pill at every size */
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  /* No room to sit beside the pill — go back to centred, under it. */
  .wb-hud { justify-content: center; padding: 26px 12px 0; }
}
.wb-chip {
  min-width: 108px; text-align: center;
  background: var(--wb-navy); color: #fff;
  border-radius: 16px; padding: 8px 16px 9px;
  box-shadow: 0 4px 0 rgba(27, 35, 62, 0.35);
}
.wb-chip b { display: block; font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wb-chip small {
  display: block; font-size: 9.5px; font-weight: 900; letter-spacing: 1.6px;
  text-transform: uppercase; opacity: 0.75;
}
.wb-chip.is-endless b { font-size: 20px; }

/* the Find/Echo prompt bar — real air above it, or it reads as part of the
   navy chips instead of as the instruction it is */
.wb-prompt {
  display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 54px;
  padding-top: 18px;
}
.wb-ask {
  font-size: clamp(20px, 4.4vw, 30px); font-weight: 900; color: var(--wb-navy);
  background: rgba(253, 251, 246, 0.9); border-radius: 16px; padding: 8px 18px;
  box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12);
}
.wb-ask .wb-ask-note { padding: 0 6px; border-radius: 8px; }
.wb-hear {
  border: 0; cursor: pointer; font-family: inherit;
  background: var(--wb-teal); color: #fff;
  font-size: 15px; font-weight: 900;
  border-radius: 999px; padding: 12px 18px;
  box-shadow: 0 4px 0 var(--wb-teal-edge);
}
.wb-hear:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--wb-teal-edge); }

/* ── the field: the grass the garden is planted in ─────────────────────────
   Wraps the garden IN THE FLOW, bleeds to the viewport edges, and runs far
   past the bottom of the screen — so the pods are always standing on grass and
   there is never leftover sky under them. `margin-top: auto` sinks it to the
   bottom of the play screen, which is what turns the iPad's dead space into
   field. */
.wb-field {
  position: relative;
  margin-top: auto;
  padding: 56px 0 clamp(10px, 3.5vh, 48px);
}
.wb-field::after {                    /* the ground, from just under the wave down */
  content: "";
  position: absolute; z-index: -1;
  left: 50%; transform: translateX(-50%);
  width: 100vw; top: 52px; height: 300vh;
  background: var(--wb-grass);
}
.wb-wave {                            /* the horizon: same colour, just a shape */
  position: absolute; z-index: -1;
  left: 50%; transform: translateX(-50%);
  width: 100vw; top: 0; height: 58px;
  display: block; color: var(--wb-grass);
}
/* A tall screen (iPad portrait) has slack between the prompt and the pods.
   Spend it on GRASS rather than leaving a lake of empty sky: the horizon
   climbs, the field reads as a field, and the pods stay planted at the bottom
   where a child's thumbs are. Short windows keep the tight 56px. */
@media (min-height: 720px) {
  .wb-field { padding-top: clamp(56px, 15vh, 240px); }
  .wb-wave { height: clamp(58px, 9vh, 120px); }
  .wb-field::after { top: clamp(52px, 8.4vh, 112px); }
}

/* ── the garden: 4x2 pods ──────────────────────────────────────────────── */
.wb-garden {
  /* Pod height follows pod width (aspect-ratio below), so the only way to keep
     two rows on a short screen is to cap the WIDTH by the height left over
     after the chrome. 2.17 is the ratio that turns "height available for two
     rows" back into a garden width. Without it the bottom row walks off the
     bottom of a laptop window. */
  --wb-chrome: 300px;                       /* HUD + prompt + wave + padding */
  --wb-garden-max: 940px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2.4vw, 26px);
  width: min(var(--wb-garden-max), 100%, calc((100svh - var(--wb-chrome)) * 2.17));
  margin: 6px auto 0;
  padding: 8px 4px 4px;
}
/* Phones hold landscape spirit: 4x2 stays 4x2 until it truly cannot — and now
   it matters more than layout taste. Echo teaches a tune as a sequence of
   SEATS (homeHole), so the keyboard's shape has to stay the same everywhere;
   two columns would re-fold C D E F / G A B C into four unrelated pairs and
   the pattern a child learned on the iPad would not transfer.
   The chrome is tightened instead, which also buys the pods back some size. */
@media (max-width: 560px) {
  .wb-garden { --wb-chrome: 340px; gap: 8px; }
  .wb-hud { padding-top: 20px; }
  .wb-chip { min-width: 84px; padding: 6px 12px 7px; }
  .wb-chip b { font-size: 20px; }
  .wb-prompt { padding-top: 12px; min-height: 46px; }
  .wb-ask { padding: 6px 14px; }
}
/* Below this a 4-wide row cannot hold a finger any more, so fold to 2x4. */
@media (max-width: 380px) {
  .wb-garden {
    grid-template-columns: repeat(2, 1fr);
    --wb-garden-max: 420px;
    width: min(var(--wb-garden-max), 100%, calc((100svh - var(--wb-chrome)) * 0.54));
  }
}

.wb-pod {
  position: relative;
  aspect-ratio: 1 / 0.92;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* It is a <button> for the tap semantics, not for the chrome. */
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
}

/* The bell rises from BEHIND the pod lip: the pod is two layers with the
   bell sandwiched between, and the sleeve clips the bell below its pop
   height so it genuinely emerges rather than fading in. */
.wb-pod-back {
  position: absolute; left: 8%; right: 8%; bottom: 4%;
  height: 34%;
  background: var(--wb-pod-dark);
  border-radius: 50% / 62%;
}
.wb-sleeve {
  position: absolute; left: 0; right: 0; top: 0; bottom: 14%;
  overflow: hidden;                 /* the mask that makes the pop a POP */
  pointer-events: none;
}
.wb-bell {
  position: absolute; left: 50%; bottom: -4%;
  width: 74%;
  transform: translate(-50%, 108%);  /* parked underground */
  will-change: transform;
  pointer-events: none;
}
.wb-bell img { width: 100%; height: auto; display: block; }

.wb-pod.is-up .wb-bell { animation: wb-pop 0.16s cubic-bezier(.2,1.5,.5,1) forwards; }
@keyframes wb-pop {
  from { transform: translate(-50%, 108%); }
  60%  { transform: translate(-50%, -6%) scale(1.04, 0.98); }
  to   { transform: translate(-50%, 0%); }
}
.wb-pod.is-down .wb-bell { animation: wb-sink 0.12s ease-in forwards; }
@keyframes wb-sink {
  from { transform: translate(-50%, 0%); }
  to   { transform: translate(-50%, 108%); }
}
.wb-pod.is-hit .wb-bell { animation: wb-squash 0.16s ease-out forwards; }
@keyframes wb-squash {
  0%   { transform: translate(-50%, 0%) scale(1, 1); }
  45%  { transform: translate(-50%, 6%) scale(1.18, 0.74); }
  100% { transform: translate(-50%, 104%) scale(0.9, 1); }
}
/* Find mode: choices sit still until answered */
.wb-pod.is-held .wb-bell { animation: none; transform: translate(-50%, 0%); }
.wb-pod.is-wrong .wb-bell {
  animation: wb-wobble 0.4s ease-in-out;
  transform: translate(-50%, 0%);
}
@keyframes wb-wobble {
  0%, 100% { transform: translate(-50%, 0) rotate(0deg); }
  25% { transform: translate(-50%, 0) rotate(-7deg); }
  75% { transform: translate(-50%, 0) rotate(7deg); }
}
.wb-pod.is-lit .wb-bell img { filter: drop-shadow(0 0 14px rgba(255, 210, 91, 0.95)) brightness(1.1); }

.wb-pod-front {
  position: absolute; left: 4%; right: 4%; bottom: 0;
  height: 30%;
  background: linear-gradient(180deg, var(--wb-pod) 0%, var(--wb-pod-rim) 100%);
  border-radius: 50% / 60%;
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.55),
    inset 0 -6px 0 rgba(27, 35, 62, 0.10),
    0 5px 10px rgba(27, 35, 62, 0.14);
}

/* +1 float and particles live on the pod, above everything */
.wb-plus {
  position: absolute; left: 50%; top: 8%;
  transform: translateX(-50%);
  font-size: 22px; font-weight: 900; color: var(--wb-navy);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8);
  animation: wb-plus 0.55s ease-out forwards;
  pointer-events: none;
}
@keyframes wb-plus {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, -34px); }
}
.wb-spark {
  position: absolute; left: 50%; top: 34%;
  width: 10px; height: 10px; border-radius: 50%;
  pointer-events: none;
  animation: wb-spark 0.5s ease-out forwards;
}
.wb-spark.is-note {
  border-radius: 0; background: transparent !important;
  font-size: 15px; font-weight: 900; width: auto; height: auto; line-height: 1;
}
@keyframes wb-spark {
  from { opacity: 1; transform: translate(-50%, 0) scale(1); }
  to   { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(0.6); }
}

/* ── results ───────────────────────────────────────────────────────────── */
.wb-veil {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 18px;
  background: rgba(27, 35, 62, 0.45);
}
.wb-card {
  width: min(430px, 100%);
  background: var(--wb-paper); border-radius: 24px;
  padding: 26px 22px 20px; text-align: center;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3);
  display: grid; gap: 8px; justify-items: center;
}
.wb-card h2 { margin: 0; font-size: 30px; font-weight: 900; color: var(--wb-navy); }
.wb-big {
  font-size: 54px; font-weight: 900; color: var(--wb-teal); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wb-big small { display: block; font-size: 12px; letter-spacing: 2px; color: var(--wb-ink-soft); }
.wb-stats { font-size: 15px; font-weight: 800; color: var(--wb-ink-soft); }
.wb-best { color: var(--wb-gold); text-shadow: 0 1px 0 rgba(0,0,0,0.15); }
.wb-again {
  border: 0; cursor: pointer; font-family: inherit;
  background: var(--wb-green); color: #fff;
  font-size: 22px; font-weight: 900;
  border-radius: 999px; padding: 16px 44px; margin-top: 6px;
  box-shadow: 0 6px 0 var(--wb-green-edge);
}
.wb-again:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--wb-green-edge); }
.wb-menu-btn2 {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  color: var(--wb-ink-soft); font-size: 14px; font-weight: 800; text-decoration: underline;
}

/* countdown before a round */
.wb-count {
  position: fixed; inset: 0; z-index: 55; display: grid; place-items: center;
  pointer-events: none;
}
.wb-count b {
  font-size: 110px; font-weight: 900; color: var(--wb-navy);
  text-shadow: 0 4px 0 rgba(255, 255, 255, 0.7);
  animation: wb-count 0.7s ease-out;
}
@keyframes wb-count {
  from { transform: scale(1.6); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

/* streak toast */
.wb-toast {
  position: fixed; left: 50%; top: 17%;
  transform: translateX(-50%);
  z-index: 50; pointer-events: none;
  font-size: 26px; font-weight: 900; color: #fff;
  background: var(--wb-teal); border-radius: 999px; padding: 8px 22px;
  box-shadow: 0 5px 0 var(--wb-teal-edge);
  animation: wb-toast 1s ease-out forwards;
}
@keyframes wb-toast {
  from { opacity: 0; transform: translate(-50%, 8px) scale(0.8); }
  20%  { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
  80%  { opacity: 1; }
  to   { opacity: 0; transform: translate(-50%, -10px); }
}

/* mute — same corner and size as every other arcade game */
/* confetti */
.wb-confetti {
  position: fixed; top: -14px; z-index: 70; width: 10px; height: 14px;
  pointer-events: none;
  animation: wb-fall linear forwards;
}
@keyframes wb-fall {
  to { transform: translateY(105vh) rotate(var(--spin)); }
}

@media (prefers-reduced-motion: reduce) {
  .wb-cloud, .wb-cloud-b { animation: none; }
  .wb-pod.is-up .wb-bell { animation: none; transform: translate(-50%, 0); }
  .wb-pod.is-down .wb-bell { animation: none; transform: translate(-50%, 108%); }
  .wb-confetti { display: none; }
}