/* =============================================================================
   The Allowance Adventure: series UI kit (shared by all nine games)
   MASTER COPY lives in games/shared/ui/. Each game gets a synced copy in
   src/series/ (run `py -3 sync_series.py` from games/). Never edit the copies.
   Spec and rules: games/shared/series-style.md
   Everything here is prefixed `aa-` / `--aa-` so it never collides with a
   game's own classes. Games map their existing classes onto these values.
   ============================================================================= */

:root {
  /* ---- palette (same values as art-style-guide.md) ---- */
  --aa-teal: #6ec9c7;      --aa-teal-dark: #3e9b99;   --aa-teal-ink: #2a7472;
  --aa-pink: #f08fb0;      --aa-pink-dark: #c96a8c;   --aa-pink-ink: #b94a73;
  --aa-blue: #6b9bd1;      --aa-blue-dark: #48719f;   --aa-blue-ink: #3f6794;
  --aa-gold: #f7c948;      --aa-gold-dark: #d9a520;   --aa-gold-ink: #6b4c00;
  --aa-green: #8fd18c;     --aa-green-dark: #5fae5c;  --aa-green-ink: #3f7a37;
  --aa-coral: #f2766b;     --aa-coral-dark: #cf5347;  --aa-coral-ink: #c4473b;
  --aa-cream: #faf3e3;     --aa-paper: #fff9ee;       --aa-bubble: #fffdf7;
  --aa-line: #e6d8bd;      --aa-line-dark: #d9cbb2;
  --aa-ink: #4a4440;       --aa-ink-deep: #2b2623;    --aa-ink-soft: #6b635c;
  --aa-p1: #f6c6d8; --aa-p2: #cde8c5; --aa-p3: #d9cff0; --aa-p4: #bfe0f2; --aa-p5: #fbe6a3;
  --aa-focus: #3a64a8;

  /* ---- character colours (outline colours from the animated episodes) ---- */
  --aa-roundy: #1f8b83;  --aa-fifi: #c93e70;  --aa-rouck: #356ca3;
  --aa-bubba: #6e9cc4;   --aa-gremlin: #5e7a2e; --aa-narrator: #b9a57f;

  /* ---- type ---- */
  --aa-head: 'Baloo 2', 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif;
  --aa-body: 'Nunito', 'Trebuchet MS', sans-serif;

  /* ---- shape ---- */
  --aa-radius-panel: 28px;  --aa-radius-card: 22px;  --aa-radius-btn: 22px;
  --aa-lip: 6px;
  --aa-shadow-panel: 0 8px 0 rgba(190, 172, 140, .45), 0 14px 28px rgba(74, 68, 64, .18);
  --aa-shadow-card: 0 6px 0 rgba(190, 172, 140, .45);
  --aa-veil: rgba(74, 68, 64, .45);

  /* ---- motion (matches the episodes: springy pops, gentle bob) ---- */
  --aa-ease-pop: cubic-bezier(.34, 1.56, .64, 1);   /* overshoot spring, like the episode bubbles */
  --aa-ease-out: cubic-bezier(.2, .8, .2, 1);
  --aa-ease-in: cubic-bezier(.5, 0, .75, 0);
  --aa-t-press: 90ms;  --aa-t-hover: 150ms;  --aa-t-pop: 340ms;  --aa-t-bubble: 420ms;
  --aa-t-screen: 300ms; --aa-t-exit: 160ms;
  --aa-bob-period: .84s;  --aa-bob-height: 5px;     /* episodes: 1.2 bobs/second, 5px at 1080p */
}

/* ===================== buttons ===================== */
.aa-btn {
  --face: var(--aa-teal); --lip: var(--aa-teal-dark); --label: var(--aa-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; min-width: 64px; padding: 12px 28px 10px;
  font: 800 24px/1.05 var(--aa-head); color: var(--label);
  background: var(--face); border: 0; border-bottom: var(--aa-lip) solid var(--lip);
  border-radius: var(--aa-radius-btn); cursor: pointer; user-select: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform var(--aa-t-press) ease, filter var(--aa-t-hover) ease, border-bottom-width var(--aa-t-press) ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.aa-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.aa-btn:active { transform: translateY(4px); border-bottom-width: 2px; }
.aa-btn:focus-visible { outline: 4px solid var(--aa-focus); outline-offset: 3px; }
.aa-btn:disabled, .aa-btn[aria-disabled='true'] {
  filter: grayscale(.55) brightness(1.04); opacity: .6; cursor: not-allowed; transform: none;
}
.aa-btn svg, .aa-ico svg { width: 1.1em; height: 1.1em; flex: none; }
.aa-ico { display: inline-flex; vertical-align: middle; }
.aa-btn--big { min-height: 76px; padding: 16px 44px 13px; font-size: 32px; border-radius: 26px; }
.aa-btn--small { min-height: 48px; padding: 8px 18px 6px; font-size: 19px; border-radius: 16px; border-bottom-width: 5px; }
.aa-btn--pink  { --face: var(--aa-pink);  --lip: var(--aa-pink-dark);  --label: var(--aa-ink-deep); }
.aa-btn--gold  { --face: var(--aa-gold);  --lip: var(--aa-gold-dark);  --label: var(--aa-gold-ink); text-shadow: none; }
.aa-btn--green { --face: var(--aa-green); --lip: var(--aa-green-dark); --label: var(--aa-ink); }
.aa-btn--blue  { --face: var(--aa-blue);  --lip: var(--aa-blue-dark);  --label: var(--aa-ink-deep); }
.aa-btn--coral { --face: var(--aa-coral); --lip: var(--aa-coral-dark); --label: var(--aa-ink-deep); }
.aa-btn--ghost { --face: var(--aa-bubble); --lip: var(--aa-line-dark); --label: var(--aa-ink);
  box-shadow: inset 0 0 0 3px var(--aa-line); }  /* lighter face + outline so it still reads on cream panels */

/* round icon button (HUD toolbar) */
.aa-icon-btn {
  --face: var(--aa-cream); --lip: var(--aa-line-dark);
  width: 56px; height: 56px; min-width: 56px; padding: 0; border-radius: 50%;
  display: inline-grid; place-items: center; color: var(--aa-teal-ink);
  background: var(--face); border: 0; border-bottom: 5px solid var(--lip); cursor: pointer;
  transition: transform var(--aa-t-press) ease, filter var(--aa-t-hover) ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.aa-icon-btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.aa-icon-btn:active { transform: translateY(3px); border-bottom-width: 2px; }
.aa-icon-btn:focus-visible { outline: 4px solid var(--aa-focus); outline-offset: 3px; }
.aa-icon-btn svg { width: 30px; height: 30px; }
.aa-icon-btn.is-off { color: var(--aa-ink-soft); }
.aa-icon-btn:disabled, .aa-icon-btn[aria-disabled='true'] {
  filter: grayscale(.55) brightness(1.04); opacity: .6; cursor: not-allowed; transform: none;
}

/* HUD toolbar: top-right, sound button is always the right-most */
.aa-toolbar { position: absolute; top: 14px; right: 16px; display: flex; gap: 10px; z-index: 60; }

/* ===================== panels, cards, chips ===================== */
.aa-panel {
  background: var(--aa-cream); border: 4px solid var(--aa-line);
  border-radius: var(--aa-radius-panel); box-shadow: var(--aa-shadow-panel); padding: 20px 24px;
}
.aa-card {
  background: var(--aa-cream); border: 4px solid var(--aa-line);
  border-radius: var(--aa-radius-card); box-shadow: var(--aa-shadow-card);
}
.aa-card.is-selected { border-color: var(--aa-teal-dark); box-shadow: 0 6px 0 var(--aa-teal-dark), 0 0 0 5px rgba(110, 201, 199, .35); }
.aa-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 18px 2px 10px;
  font: 800 24px/1 var(--aa-head); color: var(--aa-ink);
  background: var(--aa-cream); border: 4px solid var(--aa-line); border-radius: 999px;
  box-shadow: 0 5px 0 rgba(190, 172, 140, .4);
}
.aa-chip img, .aa-chip svg { width: 34px; height: 34px; flex: none; }

/* ===================== modal ===================== */
.aa-veil { position: absolute; inset: 0; background: var(--aa-veil); display: grid; place-items: center;
  z-index: 200; animation: aa-fade-in 200ms ease both; }
.aa-veil.is-leaving { animation: aa-fade-out var(--aa-t-exit) ease both; }
.aa-modal { animation: aa-pop-in var(--aa-t-pop) var(--aa-ease-pop) both; }
.aa-veil.is-leaving .aa-modal { animation: aa-pop-out var(--aa-t-exit) var(--aa-ease-in) both; }

/* ===================== speech bubble (episode style) ===================== */
/* <div class="aa-speech aa-speech--roundy [aa-speech--right]">
     <img class="aa-speech__face" src="roundy-happy.webp" alt="">
     <div class="aa-bubble"><b class="aa-bubble__name">Roundy</b><p class="aa-bubble__text">…</p></div>
   </div> */
.aa-speech { --who: var(--aa-narrator); display: flex; align-items: flex-end; gap: 14px;
  animation: aa-pop-in var(--aa-t-bubble) var(--aa-ease-pop) both; transform-origin: 0% 100%; }
.aa-speech--right { flex-direction: row-reverse; transform-origin: 100% 100%; }
.aa-speech--roundy { --who: var(--aa-roundy); }
.aa-speech--fifi { --who: var(--aa-fifi); }
.aa-speech--rouck { --who: var(--aa-rouck); }
.aa-speech--bubba { --who: var(--aa-bubba); }
.aa-speech--gremlin { --who: var(--aa-gremlin); }
.aa-speech__face { width: 120px; height: auto; flex: none; filter: drop-shadow(0 6px 6px rgba(74, 68, 64, .22)); }
.aa-bubble {
  position: relative; max-width: 620px; padding: 12px 22px 14px;
  background: var(--aa-bubble); border: 4px solid var(--who); border-radius: 24px;
  box-shadow: 0 6px 14px rgba(26, 34, 42, .18); color: var(--aa-ink);
}
/* tail: points at the face (left by default) */
.aa-bubble::before, .aa-bubble::after { content: ''; position: absolute; bottom: 18px; border-style: solid; }
.aa-bubble::before { left: -20px; border-width: 10px 20px 10px 0; border-color: transparent var(--who) transparent transparent; }
.aa-bubble::after { left: -13px; border-width: 7px 14px 7px 0; border-color: transparent var(--aa-bubble) transparent transparent; }
.aa-speech--right .aa-bubble::before { left: auto; right: -20px; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent var(--who); }
.aa-speech--right .aa-bubble::after { left: auto; right: -13px; border-width: 7px 0 7px 14px; border-color: transparent transparent transparent var(--aa-bubble); }
.aa-bubble--no-tail::before, .aa-bubble--no-tail::after { display: none; }
.aa-bubble__name { display: block; font: 800 16px/1.1 var(--aa-head); letter-spacing: .05em; text-transform: uppercase; color: var(--who); margin-bottom: 2px; }
.aa-bubble__text { margin: 0; font: 700 21px/1.35 var(--aa-body); color: var(--aa-ink); }
/* the Bubbas never speak: mime bubble */
.aa-bubble--mime { border-style: dashed; background: #f6f1fb; }
.aa-bubble--mime .aa-bubble__text { font-style: italic; font-weight: 600; color: #6c6280; }

/* ===================== toast ===================== */
.aa-toast { --tone: var(--aa-teal-dark);
  position: absolute; left: 50%; top: 86px; transform: translateX(-50%); z-index: 150;
  padding: 10px 22px 8px; border-radius: 999px; background: var(--aa-bubble); border: 4px solid var(--tone);
  font: 800 21px/1.15 var(--aa-head); color: var(--aa-ink); box-shadow: 0 6px 14px rgba(26, 34, 42, .18);
  animation: aa-drop-in 260ms var(--aa-ease-pop) both; pointer-events: none; }
.aa-toast--good { --tone: var(--aa-green-dark); }
.aa-toast--warn { --tone: var(--aa-coral); }
.aa-toast.is-leaving { animation: aa-fade-out var(--aa-t-exit) ease both; }

/* ===================== characters ===================== */
/* Wrap any standing character: <div class="aa-char"><img …></div>
   Idle bob like the episodes, plus a soft contact shadow under the feet. */
.aa-char { position: relative; display: inline-block; isolation: isolate; }
.aa-char > img { display: block; animation: aa-bob var(--aa-bob-period) ease-in-out infinite alternate;
  animation-delay: var(--aa-bob-delay, 0s); transform-origin: 50% 100%; }
.aa-char::after { content: ''; position: absolute; left: 16%; right: 16%; bottom: -3%; height: 9%; z-index: -1;
  border-radius: 50%; background: radial-gradient(ellipse at center, rgba(28, 36, 20, .30) 0%, rgba(28, 36, 20, .14) 52%, rgba(28, 36, 20, 0) 76%); }
.aa-char--still > img { animation: none; }
.aa-char--no-shadow::after { display: none; }
.aa-enter { animation: aa-char-in 420ms var(--aa-ease-pop) both; }
.aa-react { animation: aa-squash 240ms var(--aa-ease-out); }

/* ===================== stars & stickers ===================== */
.aa-sticker { display: inline-block; vertical-align: middle; flex: none; user-select: none; }
.aa-stars { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.aa-star-pop { animation: aa-star-pop 450ms var(--aa-ease-pop) both; }

/* ===================== rotate-your-device card ===================== */
.aa-rotate-card { position: fixed; inset: 0; z-index: 9999; display: none; place-items: center; text-align: center;
  padding: 24px; background: var(--aa-paper); color: var(--aa-ink); font: 800 26px/1.2 var(--aa-head); }
.aa-rotate-card img { width: 120px; height: 120px; margin: 0 auto 12px; display: block; animation: aa-wiggle 2.2s ease-in-out infinite; }

/* ===================== keyframes ===================== */
@keyframes aa-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes aa-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes aa-pop-in { from { opacity: 0; transform: scale(.74); } 35% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
@keyframes aa-pop-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.94); } }
@keyframes aa-drop-in { from { opacity: 0; transform: translate(-50%, -14px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes aa-screen-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes aa-bob { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--aa-bob-height))); } }
@keyframes aa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes aa-char-in { from { opacity: 0; transform: translateY(14px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes aa-squash { 0% { transform: scale(1, 1); } 35% { transform: scale(1.05, .95); } 70% { transform: scale(.98, 1.02); } 100% { transform: scale(1, 1); } }
@keyframes aa-star-pop { 0% { opacity: 0; transform: scale(0) rotate(-20deg); } 60% { opacity: 1; transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes aa-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes aa-confetti-fall { from { transform: translateY(-40px) rotate(0); } to { transform: translateY(110vh) rotate(720deg); } }

.aa-screen-in { animation: aa-screen-in var(--aa-t-screen) var(--aa-ease-out) both; }
.aa-float { animation: aa-float 3.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .aa-char > img, .aa-float, .aa-btn, .aa-icon-btn { animation: none !important; transition: none !important; }
  .aa-modal, .aa-speech, .aa-veil, .aa-toast, .aa-enter, .aa-react, .aa-star-pop, .aa-screen-in { animation-duration: 1ms !important; }
}