/* =================================================================
   Brain Box — "Sticker Craft" visual system.
   Ported faithfully from ~/Documents/al-idrisi-games/style.css +
   index.html (the hub's landing/auth screens). Same palette, same
   chunky flat-shadow button pattern, same floating decorations —
   this file has zero shared code with the old project, just the
   same hand-copied values, so Brain Box stays visually consistent
   with the rest of Adit's game family without depending on it.
   ================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap");

* { box-sizing: border-box; }

/* Sticker Craft is a light-only design — without this, Android WebView's
   "Force Dark" auto-darkens the whole page (inverts lightness per-hue)
   for any site that doesn't explicitly declare it's light-only, since
   the OS is in dark mode. The <meta name="color-scheme"> tag in
   index.html covers the document; this covers the root element itself. */
html, body.sc-page { color-scheme: light only; }
html { overflow-x: hidden; }

body.sc-page {
  margin: 0;
  min-height: 100vh;
  font-family: "Nunito", sans-serif;
  color: #3d2e22;
  background: linear-gradient(180deg, #fdedd3 0%, #e9dcc5 55%, #dccba9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

h1, h2, h3, .sc-display {
  font-family: "Baloo 2", sans-serif;
  margin: 0;
}

/* ---- Card shell ---- */
.sc-card {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  background: #fbf3e7;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(60, 40, 20, 0.2);
  overflow: hidden;
  padding: 1.5rem;
}
@media (max-width: 480px) {
  .sc-card { border-radius: 0; box-shadow: none; min-height: 100vh; }
}

/* ---- Tablet layout (e.g. iPad/OPPO Pad-class devices, both orientations) ----
   Everything below 700px (all phones) is completely untouched — this only
   widens the card so tablets don't just show a letterboxed phone strip in
   the middle of a huge screen. Drive Mode is deliberately excluded: its
   obstacle spacing/dino speed are tuned in % of the world's width (ported
   from mathville), so stretching that specific screen would need its own
   gameplay re-tuning — only its chrome gets more breathing room, not the
   actual play area. */
@media (min-width: 700px) {
  .sc-card { max-width: 640px; }
  .sc-hero-title { font-size: 2.9rem; }
  .bb-hero-icon { width: 52px; }
  #bb-screen-drive { max-width: 430px; margin: 0 auto; }
}

/* ---- Screens ---- */
.sc-screen { display: none; flex-direction: column; position: relative; z-index: 1; }
.sc-screen.active { display: flex; }

.sc-badge {
  font-size: 1.375rem;
  font-weight: 800;
  text-align: center;
}
.sc-screen-title { font-size: 1.875rem; font-weight: 700; margin-bottom: 0.5rem; }
.sc-subtitle { font-size: 0.94rem; color: #9c8a76; margin-bottom: 1rem; }

/* ---- Sign Up / Sign In toggle — ported from al-idrisi-games/style.css:227-241.
   The active tab gets a white pill + shadow so it's visibly "pressed in"
   against the muted track, vs. the inactive tab sitting flat/transparent. */
.sc-auth-toggle {
  display: flex; gap: 6px; background: #f1e6d3; padding: 5px;
  border-radius: 16px; margin: 1rem 0;
}
.sc-auth-tab {
  flex: 1; border: none; background: none; cursor: pointer;
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 0.92rem;
  color: #9c8a76; padding: 10px 0; border-radius: 12px;
  transition: transform 0.15s ease;
}
.sc-auth-tab.active {
  background: #fff; color: #3d2e22; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.06);
}
.sc-auth-tab:active { transform: scale(0.96); }

/* ---- Chunky buttons (flat shadow, not blurred — the signature Sticker
   Craft "sticker being pressed" effect) ---- */
.sc-btn {
  border: none;
  border-radius: 16px;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 0.9rem 1.25rem;
  cursor: pointer;
  background: #c1e1c1;
  color: #3d2e22;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
  transition: transform 0.28s cubic-bezier(.33, 1.2, .3, 1), box-shadow 0.15s;
}
.sc-btn:hover, .sc-btn:focus-visible { transform: translateY(-3px) scale(1.03); }
.sc-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
  transition-duration: 0.15s;
}
.sc-btn.sc-btn-secondary { background: #c1d4f6; }
.sc-btn.sc-btn-pink { background: #f6c1c1; }
.sc-btn.sc-btn-yellow { background: #f6e3b4; }
.sc-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

/* ---- Chip / tile pattern (game cards, child cards, topic chips) ---- */
.sc-chip {
  border: none;
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.06);
  transition: transform 0.28s cubic-bezier(.33, 1.2, .3, 1);
  cursor: pointer;
  background: #fff;
  text-align: left;
}
.sc-chip:hover, .sc-chip:focus-visible { transform: translateY(-3px) scale(1.03); }
.sc-chip:active { transform: translateY(1px) scale(0.94); transition-duration: 0.15s; }

/* ---- Inputs ---- */
.sc-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.9rem; }
.sc-field-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.5px; color: #c2ac91; text-transform: uppercase; }
.sc-input {
  border: 2px solid #f1e6d3;
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  background: #fff;
}
.sc-input:focus { outline: none; border-color: #f6c1c1; }
.sc-input.invalid { border-color: #e2685f; }
.sc-error { display: none; font-size: 0.8rem; color: #e2685f; }
.sc-error.visible { display: block; }

/* ---- Cards / panels ---- */
.sc-panel { background: #fdf6ea; border-radius: 20px; padding: 1rem; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05); }
/* ---- Landing/menu layout — ported from al-idrisi-games/style.css:301-492
   (header + hero + game-card list + bobbing greeting), same values. ---- */
.sc-header {
  padding: 0.3rem 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}
.sc-trophy {
  width: 42px; height: 42px; border-radius: 12px; background: #f6e3b4;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; transform: rotate(-4deg);
}
.sc-player-chip {
  display: flex; align-items: center; gap: 8px; background: #fff;
  padding: 8px 14px 8px 8px; border-radius: 100px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);
}
.sc-player-avatar {
  width: 26px; height: 26px; border-radius: 50%; color: #3d2e22;
  display: flex; align-items: center; justify-content: center;
  font-family: "Baloo 2", sans-serif; font-size: 0.75rem; font-weight: 700;
}
.sc-player-name { font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: 0.875rem; color: #3d2e22; }
.bb-logout-link {
  font: inherit; font-size: 0.75rem; color: #9c8a76; background: none; border: none;
  cursor: pointer; text-decoration: underline; padding: 0 0.3rem;
}
.bb-logout-link:active { color: #e2685f; }

.sc-hero {
  margin: 1.35rem 0 0; text-align: center; padding: 2rem 1.25rem 1.75rem;
  background: #f6e3b4; border-radius: 24px; transform: rotate(-1deg);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05); position: relative;
}
.sc-hero-title { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 2.375rem; line-height: 1.05; display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; }
.sc-hero-title .w1 { color: #e8735a; display: inline-block; transform: rotate(-4deg); }
.sc-hero-title .w2 { color: #2f4c8c; display: inline-block; transform: rotate(3deg); }
.sc-hero-title .w3 { color: #c1e1c1; -webkit-text-stroke: 1px #3f7a4e; display: inline-block; transform: rotate(-3deg); }
.bb-hero-icon { width: 42px; height: auto; display: inline-block; animation: bb-hero-icon-sway 3.2s ease-in-out infinite; }
@keyframes bb-hero-icon-sway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
.sc-hero-tagline { font-family: "Baloo 2", sans-serif; font-size: 0.875rem; color: #7a5a2e; margin-top: 0.5rem; font-weight: 600; }

.sc-game-list { padding: 1.9rem 0 1.4rem; display: flex; flex-direction: column; gap: 1rem; position: relative; }
button.sc-game-card {
  font: inherit; text-align: left; border: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 0.9rem; border-radius: 20px;
  padding: 1rem; position: relative; z-index: 1; transition: transform 0.15s ease;
}
button.sc-game-card:hover, button.sc-game-card:focus-visible { transform: translateY(-2px) scale(1.01); }
button.sc-game-card:active { transform: scale(0.98); }
.sc-game-card.math { background: #c1d4f6; transform: rotate(0.6deg); }
.sc-game-card.lang { background: #f6c1e0; transform: rotate(-0.6deg); }
.sc-game-card.solar { background: #c1e1c1; transform: rotate(0.6deg); }
.sc-game-icon {
  width: 52px; height: 52px; border-radius: 14px; background: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
  font-size: 1.6rem; overflow: hidden;
}
.sc-game-title { display: block; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 1.06rem; }
.sc-game-sub { display: block; font-size: 0.81rem; }
.sc-game-card.math .sc-game-title { color: #2f4c8c; } .sc-game-card.math .sc-game-sub { color: #5a6d99; }
.sc-game-card.lang .sc-game-title { color: #8c2f6b; } .sc-game-card.lang .sc-game-sub { color: #9b5d84; }
.sc-game-card.solar .sc-game-title { color: #3f7a4e; } .sc-game-card.solar .sc-game-sub { color: #5d9268; }

/* ---- First-run guidance: Practice/Drive Mode are locked until the Box
   has at least 1 topic, and the Box card itself pulses to say "start
   here" — kids were tapping the 3 menu cards in random order with no
   idea Box comes first. ---- */
.sc-game-card.sc-locked { opacity: 0.5; filter: grayscale(0.4); cursor: not-allowed; }
.sc-game-card.sc-locked:hover, .sc-game-card.sc-locked:focus-visible { transform: none; }
.sc-game-card.sc-locked .sc-game-sub { font-weight: 700; }
.sc-game-card.sc-shake { animation: sc-card-shake 0.4s ease-in-out; }
@keyframes sc-card-shake {
  0%, 100% { transform: translateX(0) rotate(0.6deg); }
  25%      { transform: translateX(-6px) rotate(0.6deg); }
  75%      { transform: translateX(6px) rotate(0.6deg); }
}
.sc-game-card.sc-highlight { animation: sc-card-glow 1.4s ease-in-out infinite; }
@keyframes sc-card-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 76, 140, 0.35); }
  50%      { box-shadow: 0 0 0 10px rgba(47, 76, 140, 0); }
}

.sc-greeting {
  margin: 30px 0 1.5rem; padding: 0.25rem 1.1rem; font-family: "Baloo 2", sans-serif;
  font-size: 0.95rem; font-weight: 600; color: #8a6d3a; text-align: center; position: relative; z-index: 1;
}
@keyframes sc-greeting-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.sc-greeting-word { display: inline-block; animation: sc-greeting-bob 1.4s ease-in-out infinite; }
.sc-greeting-name.blue { color: #2f4c8c; } .sc-greeting-name.pink { color: #8c2f6b; } .sc-greeting-name.green { color: #3f7a4e; }

/* ---- Topic tile (used in Box builder + subject list) — compact, wraps
   into a grid instead of one tile per full-width row ---- */
.sc-topic-tile {
  border-radius: 14px;
  padding: 0.4rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.8rem;
  flex: 0 0 calc(50% - 0.25rem);
  min-width: 0;
}
.sc-topic-tile span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-topic-tile .sc-topic-icon {
  width: 26px; height: 26px; border-radius: 8px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; flex-shrink: 0;
}
.sc-topic-tile.subject-math { background: #c1d4f6; }
.sc-topic-tile.subject-language { background: #f6c1e0; }
.sc-topic-tile.subject-science { background: #c1f0e8; }

/* ---- Box builder layout ---- */
.bb-box-dropzone {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-content: flex-start;
  border: 2px dashed #d9c7ac;
  border-radius: 18px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  min-height: 3rem;
}
.bb-box-count { flex: 1 0 100%; font-size: 0.8rem; font-weight: 700; color: #9c8a76; }
.bb-box-fullmsg { flex: 1 0 100%; font-size: 0.8rem; color: #e2685f; font-weight: 700; }
.bb-box-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bb-box-group { margin-bottom: 0.9rem; }
.bb-box-group .sc-field-label { margin-bottom: 0.4rem; }
.bb-box-pool { max-height: 45vh; overflow-y: auto; }

/* ---- Floating decorations ---- */
.sc-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.sc-cloud { position: absolute; background: #fff; opacity: 0.9; border-radius: 50%; pointer-events: none; }
.sc-star {
  position: absolute;
  pointer-events: none;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.sc-dot { position: absolute; border-radius: 50%; background: #fff; pointer-events: none; }
.sc-balloon { position: absolute; border-radius: 50%; pointer-events: none; }
.sc-emoji { position: absolute; pointer-events: none; }

@keyframes sc-bob {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}
.sc-bob { animation: sc-bob 6.5s ease-in-out infinite; }

/* ---- Palette reference (pastel accents for avatars/decorations) ----
   #F6C1C1 pink   #C1E1C1 mint   #C1D4F6 blue   #F6E3B4 yellow
   #D9C1F6 lavender   #F6C1E0 bubblegum   #C1F0E8 aqua           */

/* ---- Drive Mode — ported from al-idrisi-games/mathville/style.css:215-309,
   same SVG sprites, same sizes/offsets/animations (own class names). ---- */
.bb-drive-hud {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.75rem; font-family: "Baloo 2", sans-serif; font-weight: 700;
}
.bb-drive-exit { padding: 0.4rem 0.7rem; font-size: 0.9rem; box-shadow: 0 3px 0 rgba(0,0,0,0.08); }
.bb-drive-world {
  position: relative;
  z-index: 0; /* explicit (not auto) so obstacle/car/dino's own z-index values
                 stay contained here instead of comparing directly against
                 the question/end overlay's stacking level and painting
                 on top of it */
  width: 100%;
  /* Same technique as mathville/style.css:223 (height tied to viewport,
     not aspect-ratio) — a fixed aspect-ratio made the world taller than
     the actual visible viewport on phones once the HUD row and card
     padding were accounted for, cutting the top off. 100dvh (not 100vh)
     so mobile Safari's address-bar show/hide doesn't reintroduce the
     same overflow. 150px ≈ card padding (2×24px) + HUD row (~40px) +
     a little breathing room. */
  height: calc(100dvh - 150px);
  min-height: 320px;
  background: linear-gradient(180deg, #f2e9d8 0%, #F7EEE0 100%);
  border-radius: 20px;
  overflow: hidden;
  touch-action: none;
  box-shadow: inset 0 0 0 3px #D8C7AE;
}
.bb-drive-car {
  position: absolute; width: 38px; height: 38px; margin-left: -19px; margin-top: -19px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 3px 4px rgba(59,42,26,.35)); z-index: 5;
  transition: transform .12s ease-out;
}
.bb-drive-car.bitten { animation: bb-drive-bitten .35s ease-in-out 3; }
.bb-drive-car.invincible { animation: bb-drive-invincible .4s ease-in-out infinite; }
@keyframes bb-drive-invincible {
  0%, 100% { filter: drop-shadow(0 0 8px #6FD68A) drop-shadow(0 3px 4px rgba(59,42,26,.35)); opacity: 1; }
  50% { filter: drop-shadow(0 0 14px #6FD68A) drop-shadow(0 3px 4px rgba(59,42,26,.35)); opacity: .7; }
}
@keyframes bb-drive-bitten {
  0%, 100% { filter: drop-shadow(0 3px 4px rgba(59,42,26,.35)); }
  50% { filter: drop-shadow(0 0 8px #D64545) brightness(1.3); }
}
.bb-drive-dino {
  position: absolute; width: 34px; height: 34px; margin-left: -17px; margin-top: -17px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 3px 4px rgba(59,42,26,.35)); z-index: 4;
  transition: transform .12s ease-out;
}
.bb-dino-leg { transform-box: fill-box; transform-origin: top center; }
.bb-drive-dino.walking .bb-dino-leg-l { animation: bb-dino-leg-swing .3s ease-in-out infinite; }
.bb-drive-dino.walking .bb-dino-leg-r { animation: bb-dino-leg-swing .3s ease-in-out infinite reverse; }
@keyframes bb-dino-leg-swing { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } }
.bb-drive-city {
  position: absolute; width: 58px; height: 58px; margin-left: -29px; margin-top: -29px;
  display: flex; align-items: center; justify-content: center; font-size: 36px; z-index: 2;
  text-align: center; pointer-events: none;
}
.bb-drive-city::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(247,197,72,.4) 0%, rgba(247,197,72,0) 70%);
  animation: bb-drive-city-glow-ring 2.4s ease-in-out infinite;
}
@keyframes bb-drive-city-glow-ring { 0%, 100% { opacity: .55; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.18); } }
.bb-drive-city > span:first-child { animation: bb-drive-city-glow 2.4s ease-in-out infinite; }
@keyframes bb-drive-city-glow {
  0%, 100% { filter: drop-shadow(0 2px 3px rgba(59,42,26,.3)) drop-shadow(0 0 3px rgba(247,197,72,.3)); }
  50% { filter: drop-shadow(0 2px 3px rgba(59,42,26,.3)) drop-shadow(0 0 15px rgba(247,197,72,1)); }
}
.bb-drive-city-label {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px;
  font-family: "Baloo 2", sans-serif; font-size: 9px; font-weight: 700; color: #6b5a44;
  white-space: nowrap; background: rgba(247,238,224,.92); padding: 1px 5px; border-radius: 6px;
}
.bb-drive-obstacle {
  position: absolute; width: 32px; height: 32px; margin-left: -16px; margin-top: -16px;
  display: flex; align-items: center; justify-content: center; font-size: 22px; z-index: 3;
  pointer-events: none;
}
.bb-drive-toast {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  background: #D64545; color: #fff; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 13px;
  padding: 6px 14px; border-radius: 14px; z-index: 9; box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
.bb-drive-joystick {
  position: absolute; left: 10px; bottom: 14px; width: 92px; height: 92px;
  border-radius: 50%; background: rgba(247,238,224,.6); touch-action: none;
  box-shadow: 0 2px 4px rgba(59,42,26,.15), inset 0 0 0 3px rgba(216,199,174,.85); z-index: 8;
}
.bb-drive-joystick-knob {
  position: absolute; left: 25px; top: 25px; width: 42px; height: 42px;
  border-radius: 50%; background: #C1793E; box-shadow: 0 2px 5px rgba(59,42,26,.3);
}
.bb-drive-question, .bb-drive-end {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(61, 46, 34, 0.55); padding: 1rem;
}
.bb-drive-question.hidden, .bb-drive-end.hidden { display: none; }
.bb-drive-question-card, .bb-drive-end-card { width: 100%; display: flex; flex-direction: column; gap: 0.6rem; text-align: center; }
.bb-drive-question-prompt { font-weight: 700; }
.bb-drive-question-options { display: flex; flex-direction: column; gap: 0.5rem; }
.bb-drive-question-options button.bb-correct { background: #c1e1c1; }
.bb-drive-question-options button.bb-wrong { background: #f6c1c1; }
.bb-drive-end-emoji { font-size: 3rem; }

/* ---- Practice session ---- */
.bb-practice-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.bb-practice-home { padding: 0.4rem 0.6rem; font-size: 1.1rem; flex: 0 0 auto; }
.bb-practice-progress { margin-bottom: 0; }
.bb-practice-card, .bb-practice-summary { display: flex; flex-direction: column; gap: 0.75rem; text-align: center; }
.bb-practice-prompt { font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 1.1rem; }
.bb-practice-diagram { display: flex; justify-content: center; background: #fff; border-radius: 14px; padding: 0.5rem; }
.bb-practice-diagram svg { max-width: 100%; height: auto; }
.bb-practice-options { display: flex; flex-direction: column; gap: 0.6rem; }
.bb-practice-options button.bb-correct, .sc-btn.bb-correct { background: #c1e1c1; }
.bb-practice-options button.bb-wrong, .sc-btn.bb-wrong { background: #f6c1c1; }
.bb-practice-hint {
  background: #f6e3b4; border-radius: 14px; padding: 0.7rem; font-size: 0.9rem; text-align: left;
}
.bb-practice-hint-label {
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.5px; text-transform: uppercase; color: #8a6d3a;
}
.bb-practice-hint.hidden, .bb-practice-progress.hidden { display: none; }

/* ---- Bo avatar (hint card header) ---- */
.bb-ai-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; }
.bb-ai-avatar {
  width: 26px; height: auto; display: inline-block;
  animation: bb-ai-avatar-bob 1s ease-in-out infinite;
}
@keyframes bb-ai-avatar-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-3px) rotate(4deg); }
}
.bb-ai-thinking-label {
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 0.85rem;
  color: #8a6d3a;
}
.bb-ai-thinking-dots { display: inline-flex; gap: 3px; }
.bb-ai-thinking-dots span {
  width: 5px; height: 5px; border-radius: 50%; background: #8a6d3a;
  opacity: 0.3; animation: bb-ai-dot-pulse 1s ease-in-out infinite;
}
.bb-ai-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.bb-ai-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bb-ai-dot-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.3); }
}

/* ---- Landing screen decorative walking dino ---- */
/* Auth screen only wraps its form content by default (no fixed height),
   so an absolute-positioned bottom element would sit right under the
   button instead of the actual bottom of the card. Stretch it so the
   dino has real walking room below the form. */
#bb-screen-auth { min-height: calc(100vh - 3rem); }
.bb-landing-dino-walk {
  position: absolute;
  bottom: 106px;
  left: -84px;
  width: 60px;
  height: 60px;
  z-index: 2;
  animation: bb-landing-dino-walk 9s linear infinite;
  /* Reset button defaults — this is a tap target now (opens DinoRace),
     not just decoration, but must look/move exactly like it did before. */
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.bb-landing-dino {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 4px rgba(59, 42, 26, 0.3));
  /* Artwork faces left by default; mirror it so it faces the direction
     it's walking (left to right), baked into the waddle keyframes below
     since both would otherwise fight over the `transform` property. */
  animation: bb-landing-dino-waddle 0.5s ease-in-out infinite;
}
/* One-directional walk: crosses from fully off the left edge to fully
   off the right edge, then holds there for a 2s pause (the 77.78%-100%
   flat segment, out of a 9s total cycle — 7s walking + 2s hidden)
   before the loop snaps back to the left start. The +/-84px (not just
   +/-60px, the sprite's own width) accounts for .sc-card's 1.5rem
   padding around this screen — without it, the last bit of the sprite
   stayed visible in that padding strip instead of being fully clipped
   by the card's own overflow:hidden edge. */
@keyframes bb-landing-dino-walk {
  0%      { left: -84px; }
  77.78%  { left: calc(100% + 84px); }
  100%    { left: calc(100% + 84px); }
}
/* Little bounce/waddle so it reads as walking rather than sliding. */
@keyframes bb-landing-dino-waddle {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(-4deg); }
  50%      { transform: scaleX(-1) translateY(-4px) rotate(4deg); }
}