/* Playful layer -- minimal edition. Same functionality (level indicator,
   level-up notice, score feedback, selection highlight, button press
   feedback) as before, restyled to be quiet and understated per OJ's
   request for a minimal design: thin outlines instead of filled badges,
   muted gold text instead of bold gradient fills, short fades instead of
   bouncy pops and expanding rings. Purely additive -- nothing here
   overrides existing layout, colors, or the site's own wizard/aisle/sound
   system in wizard.js. Remove by deleting the <link>/<script> tags that
   include game-feel.css / game-feel.js (see index.html, right after
   wizard.css and wizard.js). */

:root {
  --gf-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Button / chip press + hover feedback (subtle) ---------- */
button,
.preset-chip,
.callback-btn,
.success-btn-primary,
.success-btn-secondary,
.success-btn-tertiary,
.hero-cta {
  transition: transform 0.15s var(--gf-ease), opacity 0.15s ease;
}
button:not(:disabled):hover,
.preset-chip:hover,
.callback-btn:hover {
  transform: translateY(-1px);
}
button:not(:disabled):active,
.preset-chip:active,
.callback-btn:active,
.hero-cta:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}

/* Small settle animation on click / chip selection -- barely-there scale */
@keyframes gfPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.gf-pop {
  animation: gfPop 0.22s var(--gf-ease);
}
.preset-chip.selected,
.day-preset-btn.selected {
  animation: gfPop 0.22s var(--gf-ease);
}

/* Running total: a quiet opacity flash instead of a scale+color pop */
@keyframes gfScoreFlash {
  0%   { opacity: 1; }
  45%  { opacity: 0.55; }
  100% { opacity: 1; }
}
.gf-score-tick {
  display: inline-block;
  animation: gfScoreFlash 0.3s ease-out;
}

/* Guest count / day stepper +/- buttons: light tactile feedback */
.deliv-qty-controls button:active,
.stepper button:active {
  transform: scale(0.94);
}

/* ---------- Level indicator: thin outline, no fill ---------- */
.gf-level-badge {
  display: flex; align-items: baseline; gap: 5px; margin-left: 14px; padding: 5px 12px;
  border-radius: 999px; border: 1px solid rgba(138,63,34,0.3); background: transparent;
  color: var(--gold-text, #8A3F22); font-weight: 600; font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
}
.gf-level-badge .gf-level-of {
  font-weight: 400; opacity: 0.6; text-transform: none; letter-spacing: 0.01em;
}
@media (max-width: 760px) { .gf-level-badge { display: none; } }

/* ---------- Level-up notice: quiet, text-only, no inner chip ---------- */
.gf-levelup-toast {
  position: fixed; top: 84px; left: 50%; z-index: 95;
  transform: translate(-50%, -6px); opacity: 0;
  background: rgba(255,253,249,0.95); color: var(--gold-text, #8A3F22);
  border: 1px solid rgba(193,98,59,0.18);
  border-radius: 999px; padding: 7px 16px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(20,17,13,0.08);
  transition: transform 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
}
.gf-levelup-toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- "+score" popup: small, quiet ---------- */
.gf-score-popup {
  position: fixed; z-index: 96; transform: translate(-50%, 0);
  color: var(--gold-text, #8A3F22); font-weight: 600; font-size: 12px;
  font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap;
  animation: gfScoreRise 0.7s ease-out forwards;
}
.gf-score-popup.gf-score-popup-dark { color: var(--gold-light, #E0885A); }
@keyframes gfScoreRise {
  0%   { transform: translate(-50%, 0); opacity: 0; }
  25%  { opacity: 0.9; }
  100% { transform: translate(-50%, -20px); opacity: 0; }
}

/* ---------- Selection highlight: a quick fade, no expanding ring ---------- */
@keyframes gfSelectFade {
  0%   { background-color: rgba(193,98,59,0.08); }
  100% { background-color: transparent; }
}
.opt-card.on::after,
.deliv-card.on::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  animation: gfSelectFade 0.5s ease-out; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .gf-pop, .gf-score-tick, .preset-chip.selected, .day-preset-btn.selected,
  .gf-score-popup, .opt-card.on::after, .deliv-card.on::after { animation: none !important; }
  button, .preset-chip, .callback-btn, .hero-cta { transition: none !important; }
  .gf-levelup-toast { transition: none !important; }
}