/* ==========================================================================
   Reusable UI parts: buttons, cards, HUD, modals, toasts, tool tray
   ========================================================================== */

/* --- buttons ------------------------------------------------------------ */
.btn {
  --btn-face: var(--sky);
  --btn-edge: var(--sky-deep);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 14px 26px;
  border: none;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn-face) 88%, white) 0%, var(--btn-face) 100%);
  box-shadow: 0 6px 0 var(--btn-edge), 0 12px 22px rgba(44,51,80,.22), var(--inset);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  text-shadow: 0 2px 0 rgba(0,0,0,.14);
  cursor: pointer;
  transition: transform .12s cubic-bezier(.3,1.4,.5,1), box-shadow .12s, filter .12s;
  user-select: none;
}
.btn:hover  { transform: translateY(-2px); filter: saturate(1.06) brightness(1.03); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--btn-edge), 0 4px 10px rgba(44,51,80,.2), var(--inset); }
.btn:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }
.btn[disabled] { filter: grayscale(.7) opacity(.65); pointer-events: none; }

.btn--coral { --btn-face: var(--coral); --btn-edge: var(--coral-deep); }
.btn--mint  { --btn-face: var(--mint);  --btn-edge: var(--mint-deep); }
.btn--sun   { --btn-face: var(--sun);   --btn-edge: var(--sun-deep); color: #6b4a00; text-shadow: 0 2px 0 rgba(255,255,255,.4); }
.btn--grape { --btn-face: var(--grape); --btn-edge: var(--grape-deep); }
.btn--ghost {
  background: rgba(255,255,255,.94); color: var(--ink);
  box-shadow: 0 5px 0 rgba(44,51,80,.18), 0 10px 20px rgba(44,51,80,.14);
  text-shadow: none;
}
.btn--huge  { padding: 22px 48px; font-size: var(--step-3); border-radius: var(--r-xl); }
.btn--small { min-height: 46px; padding: 8px 18px; font-size: var(--step-0); }

/* round icon button — used for back / sound / help, always same spot */
.iconbtn {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 4px 0 rgba(44,51,80,.16), 0 8px 18px rgba(44,51,80,.16);
  font-size: 26px; line-height: 1; cursor: pointer;
  transition: transform .12s;
}
.iconbtn:hover { transform: translateY(-2px) scale(1.05); }
.iconbtn:active { transform: translateY(3px); }
.iconbtn:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }

/* --- cards -------------------------------------------------------------- */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-2);
  padding: 20px;
}

/* --- top HUD ------------------------------------------------------------ */
.hud {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px calc(12px);
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  z-index: 40;
  flex: none;
}
.hud__spacer { flex: 1; }
.hud__title {
  font-family: var(--font-display); font-size: var(--step-2); color: #fff;
  text-shadow: 0 3px 0 rgba(44,51,80,.28); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hud--dark .hud__title { color: var(--ink); text-shadow: 0 2px 0 rgba(255,255,255,.6); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 46px; padding: 0 16px 0 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 0 rgba(44,51,80,.14), 0 8px 16px rgba(44,51,80,.14);
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-1);
  color: var(--ink); white-space: nowrap;
}
.chip__icon { font-size: 22px; }
.chip--bump { animation: chip-bump .55s cubic-bezier(.2,1.5,.4,1); }

/* On a phone the title takes its own line so the chips never squeeze it out. */
/* Phones get a two-row bar: back + title + sound, then the chips beneath —
   so the title is never squeezed to nothing and no control wraps alone. */
@media (max-width: 620px) {
  .hud { flex-wrap: wrap; row-gap: 8px; }
  /* The title absorbs the slack and truncates; the round buttons never shrink
     and never wrap onto a line of their own. */
  .hud__title { font-size: var(--step-1); flex: 1 1 0; min-width: 0; }
  .hud__spacer { flex: 0 0 0px; }
  .hud > .iconbtn { flex: none; }
  .chip { height: 40px; padding: 0 13px 0 9px; font-size: var(--step-0); }
  .chip__icon { font-size: 19px; }
  .iconbtn { width: 48px; height: 48px; font-size: 22px; }

  /* Row 1: back, title, then the two toggles kept together on the right.
     Row 2: the currency chips. */
  .hud--chips > .iconbtn       { order: 2; }
  .hud--chips > .iconbtn--back { order: 0; }
  .hud--chips > .hud__title    { order: 1; }
  .hud--chips > .iconbtn:last-child { margin-left: 0; }
  .hud--chips > .hud__spacer   { order: 3; flex: 1 0 100%; height: 0; }
  .hud--chips > .chip          { order: 4; }
  /* Push the toggles right when there is no back button to anchor the row. */
  .hud--chips > .hud__title { margin-right: auto; }
}
@keyframes chip-bump {
  0% { transform: scale(1) } 35% { transform: scale(1.28) rotate(-4deg) } 100% { transform: scale(1) }
}

/* --- modal -------------------------------------------------------------- */
.modal-veil {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(29,36,64,.55);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: 20px;
  animation: veil-in .25s ease both;
}
@keyframes veil-in { from { opacity: 0 } to { opacity: 1 } }
.modal {
  width: min(560px, 100%);
  max-height: 88vh; overflow-y: auto;
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: var(--lift-3);
  padding: 30px 26px calc(26px + var(--safe));
  text-align: center;
  animation: pop-in .42s cubic-bezier(.2,1.3,.4,1.1) both;
}
.modal h2 { font-size: var(--step-3); margin-bottom: 8px; }
.modal p  { font-size: var(--step-1); color: var(--ink-soft); margin: 0 0 18px; }

/* --- toast (gentle nudges) ---------------------------------------------- */
.toast-lane {
  position: fixed; left: 50%; bottom: calc(26px + var(--safe));
  transform: translateX(-50%);
  z-index: 880; display: flex; flex-direction: column-reverse;
  gap: 10px; pointer-events: none; width: min(520px, 92vw);
}
.toast {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.98);
  box-shadow: var(--lift-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  color: var(--ink);
  animation: toast-in .34s cubic-bezier(.2,1.4,.4,1) both;
}
.toast--warm { background: linear-gradient(180deg,#fff,#fff2d9); }
.toast--good { background: linear-gradient(180deg,#fff,#dcfbee); }
.toast.out { animation: toast-out .3s ease forwards; }
@keyframes toast-in  { from { opacity:0; transform: translateY(26px) scale(.9) } to { opacity:1; transform:none } }
@keyframes toast-out { to { opacity: 0; transform: translateY(14px) scale(.94) } }

/* --- particles ---------------------------------------------------------- */
.confetti-bit {
  position: absolute; width: 13px; height: 18px; border-radius: 3px;
  will-change: transform, opacity;
}
.spark {
  position: absolute; font-size: 24px; will-change: transform, opacity;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.floater {
  position: absolute; font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-2); color: #fff;
  text-shadow: 0 3px 0 rgba(44,51,80,.35);
  animation: float-up 1.25s ease-out forwards;
  white-space: nowrap;
}

/* --- speech bubble ------------------------------------------------------ */
.bubble {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 16px 22px;
  box-shadow: var(--lift-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--ink);
  max-width: 34ch;
  animation: pop-in .35s cubic-bezier(.2,1.3,.4,1.1) both;
}
.bubble::after {
  content: ""; position: absolute; bottom: -14px; left: 34px;
  border: 12px solid transparent; border-top-color: #fff; border-bottom: 0;
  filter: drop-shadow(0 3px 1px rgba(44,51,80,.1));
}
.bubble--thought { background: var(--card-2); font-style: italic; }
.bubble--translate {
  background: var(--sun); color: #6b4a00; font-size: var(--step-0);
  padding: 10px 18px; max-width: 30ch;
}
.bubble--translate::after { border-top-color: var(--sun); }

/* --- progress ----------------------------------------------------------- */
.bar {
  height: 18px; border-radius: var(--r-pill);
  background: rgba(44,51,80,.14); overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(44,51,80,.16);
}
.bar__fill {
  height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--mint), var(--sun));
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
  transition: width .5s cubic-bezier(.2,.9,.3,1.2);
}

/* --- scrollbars (chunky + friendly) ------------------------------------- */
.screen-scroll::-webkit-scrollbar { width: 12px; }
.screen-scroll::-webkit-scrollbar-thumb {
  background: rgba(44,51,80,.22); border-radius: 99px; border: 3px solid transparent;
  background-clip: padding-box;
}

/* --- character artwork -------------------------------------------------- */
.charsvg { width: 100%; height: 100%; overflow: visible; display: block; }
.patient-art { width: 100%; height: 100%; display: block; }

.char-idle { animation: bob-slow 3.4s ease-in-out infinite; transform-origin: 100px 240px; }
.char-head { animation: sway 5.2s ease-in-out infinite; transform-origin: 100px 130px; }
.tail-wag  { animation: wiggle 1.1s ease-in-out infinite; }
.ear-l, .ear-r { animation: sway 3.8s ease-in-out infinite; transform-origin: 100px 80px; }
.wing-l { animation: sway 2.6s ease-in-out infinite; }
.wing-r { animation: sway 2.6s ease-in-out infinite reverse; }
.ear-bunny { animation: sway 4.4s ease-in-out infinite; transform-origin: 100px 110px; }

/* reaction states the case runner toggles on the patient wrapper */
.patient-art.react-happy  { animation: patient-hop .7s cubic-bezier(.25,1.6,.4,1); }
.patient-art.react-wiggle { animation: wiggle .5s ease-in-out 2; }
.patient-art.react-shy    { animation: patient-shy .8s ease; }
@keyframes patient-hop { 0%,100% { transform: translateY(0) scale(1) } 40% { transform: translateY(-26px) scale(1.05) } 70% { transform: translateY(0) scale(.96,1.04) } }
@keyframes patient-shy { 0%,100% { transform: translateX(0) } 30% { transform: translateX(-10px) rotate(-3deg) } 65% { transform: translateX(6px) rotate(2deg) } }