/* Find A Brainrot — Bootstrap 5.3 theme (no build step, CSS custom properties only)
   Load order (see layouts): bootstrap.min.css → bootstrap-icons.css → theme.css → rarity.css → application.css
   Palette/type/radius tokens come from FABR/bsaic_css_style_guide (story 3033/3034).
   Rarity tier variables are NOT here: RarityTheme emits them from the rarity_tiers table. */

/* ---- Fredoka (self-hosted variable font, OFL) ---- */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fredoka-latin-c7301cae.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fredoka-latin-ext-04ba9568.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root,
[data-bs-theme=light] {
  /* ---- palette ---- */
  --fab-void:     #12063A;  /* deepest bg */
  --fab-ink:      #1D0B4E;  /* text on light, surface on dark */
  --fab-purple:   #9B3DFF;  /* primary */
  --fab-pink:     #FF3FBF;  /* secondary */
  --fab-slime:    #5EEB3C;  /* success */
  --fab-lava:     #FF3B3B;  /* danger */
  --fab-gold:     #FFC93C;  /* warning / coins */
  --fab-ice:      #2FE6FF;  /* info */
  --fab-lilac:    #F4EEFF;  /* light bg */

  /* ---- bootstrap theme colors ---- */
  --bs-primary: var(--fab-purple);      --bs-primary-rgb: 155, 61, 255;
  --bs-secondary: var(--fab-pink);      --bs-secondary-rgb: 255, 63, 191;
  --bs-success: var(--fab-slime);       --bs-success-rgb: 94, 235, 60;
  --bs-danger: var(--fab-lava);         --bs-danger-rgb: 255, 59, 59;
  --bs-warning: var(--fab-gold);        --bs-warning-rgb: 255, 201, 60;
  --bs-info: var(--fab-ice);            --bs-info-rgb: 47, 230, 255;
  --bs-dark: var(--fab-void);           --bs-dark-rgb: 18, 6, 58;
  --bs-light: var(--fab-lilac);         --bs-light-rgb: 244, 238, 255;

  /* ---- body ---- */
  --bs-body-bg: var(--fab-lilac);
  --bs-body-bg-rgb: 244, 238, 255;
  --bs-body-color: var(--fab-ink);
  --bs-body-font-family: "Fredoka", "Nunito", system-ui, -apple-system, sans-serif;
  --bs-body-font-weight: 500;
  --bs-body-line-height: 1.4;
  --bs-heading-font-weight: 700;
  --bs-link-color: var(--fab-purple);
  --bs-link-hover-color: #7A1FE0;
  --bs-border-color: rgba(29, 11, 78, .15);
  --bs-border-radius: 1rem;
  --bs-border-radius-sm: .625rem;
  --bs-border-radius-lg: 1.5rem;
  --bs-border-radius-pill: 50rem;

  /* ---- components ---- */
  --bs-btn-padding-y: .8rem;               /* ≥44pt tap target */
  --bs-progress-height: 1.25rem;
  --bs-progress-bg: rgba(29, 11, 78, .12);

  /* ---- fab effects ---- */
  --fab-outline: #1D0B4E;                  /* display text stroke / chunky borders */
  --fab-gradient-primary: linear-gradient(135deg, #B15CFF 0%, #FF3FBF 100%);
  --fab-gradient-ice: linear-gradient(135deg, #2F7BFF 0%, #2FE6FF 100%);
  --fab-gradient-fire: linear-gradient(135deg, #FF5A2D 0%, #FFC93C 100%);
  --fab-gradient-slime: linear-gradient(135deg, #22C55E 0%, #C6FF3C 100%);
  --fab-gradient-rainbow: linear-gradient(90deg, #FF3B3B, #FFC93C, #5EEB3C, #2FE6FF, #9B3DFF, #FF3FBF);
  --fab-tap-target: 44px;
}

[data-bs-theme=dark] {
  --bs-body-bg: var(--fab-void);
  --bs-body-color: #F4EEFF;
  --bs-body-bg-rgb: 18, 6, 58;
  --bs-secondary-bg: var(--fab-ink);
  --bs-tertiary-bg: #2A1470;
  --bs-border-color: rgba(244, 238, 255, .14);
  --bs-link-color: #C48CFF;
  --bs-link-hover-color: #DDB4FF;
  --bs-progress-bg: rgba(244, 238, 255, .12);
  --bs-card-bg: var(--fab-ink);
  --bs-modal-bg: var(--fab-ink);
  --fab-outline: #0B0324;
}

/* ---- Utilities Bootstrap lacks ---- */
/* Lets a flex/grid child shrink below its content width so text-truncate can work (Tailwind has it, Bootstrap doesn't). */
.min-w-0 { min-width: 0 !important; }

/* ---- Tap targets: every button/input is at least 44pt tall ---- */
.btn, .form-control, .form-select { min-height: var(--fab-tap-target); }
.btn-sm { --bs-btn-padding-y: .55rem; }
.btn-lg { --bs-btn-padding-y: 1rem; }

/* ---- Display type: the thumbnail treatment ---- */
.fab-display {
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: #fff;
  -webkit-text-stroke: 0.045em var(--fab-outline);
  paint-order: stroke fill;
  text-shadow: 0 .06em 0 var(--fab-outline);
}
.fab-display-gold {
  color: var(--fab-gold);
  text-shadow: 0 .06em 0 var(--fab-outline), 0 -.02em 0 #FFE27A;
}
.fab-display-lg { font-size: clamp(2.25rem, 8vw, 4rem); }
.fab-display-md { font-size: clamp(1.5rem, 5vw, 2.25rem); }

/* ---- Glows: one per theme color, used sparingly ---- */
.fab-glow-primary { box-shadow: 0 0 24px rgba(var(--bs-primary-rgb), .55); }
.fab-glow-secondary { box-shadow: 0 0 24px rgba(var(--bs-secondary-rgb), .55); }
.fab-glow-info { box-shadow: 0 0 24px rgba(var(--bs-info-rgb), .55); }
.fab-glow-warning { box-shadow: 0 0 24px rgba(var(--bs-warning-rgb), .6); }
.fab-glow-danger { box-shadow: 0 0 24px rgba(var(--bs-danger-rgb), .55); }

/* ---- Gradient surfaces ---- */
.fab-bg-primary { background: var(--fab-gradient-primary); color: #fff; }
.fab-bg-ice { background: var(--fab-gradient-ice); color: #fff; }
.fab-bg-fire { background: var(--fab-gradient-fire); color: var(--fab-ink); }
.fab-bg-slime { background: var(--fab-gradient-slime); color: var(--fab-ink); }

/* ---- Buttons: chunky, outlined, no hover tricks ---- */
.btn {
  --bs-btn-font-weight: 700;
  --bs-btn-border-width: 3px;
  --bs-btn-font-size: 1.05rem;
}
.btn-primary { --bs-btn-color: #fff; --bs-btn-border-color: var(--fab-outline); --bs-btn-hover-bg: #8A2BF0; --bs-btn-hover-border-color: var(--fab-outline); --bs-btn-active-bg: #7A1FE0; }
.btn-secondary { --bs-btn-color: #fff; --bs-btn-border-color: var(--fab-outline); --bs-btn-hover-bg: #F02AAA; --bs-btn-hover-border-color: var(--fab-outline); }
.btn-success { --bs-btn-color: var(--fab-ink); --bs-btn-border-color: var(--fab-outline); --bs-btn-hover-bg: #4BD82C; --bs-btn-hover-border-color: var(--fab-outline); }
.btn-danger { --bs-btn-color: #fff; --bs-btn-border-color: var(--fab-outline); --bs-btn-hover-bg: #E92E2E; --bs-btn-hover-border-color: var(--fab-outline); }
.btn-warning { --bs-btn-color: var(--fab-ink); --bs-btn-border-color: var(--fab-outline); --bs-btn-hover-bg: #F5B900; --bs-btn-hover-border-color: var(--fab-outline); }
.btn-info { --bs-btn-color: var(--fab-ink); --bs-btn-border-color: var(--fab-outline); --bs-btn-hover-bg: #1FD3EC; --bs-btn-hover-border-color: var(--fab-outline); }
.btn:focus-visible { outline: 3px solid var(--fab-ice); outline-offset: 2px; }

/* ---- Soft buttons: variant-coloured text on a tint of the same colour, no border. The secondary
   action style — use these wherever Bootstrap would use btn-outline-* (which is banned here). ---- */
.btn-soft-primary, .btn-soft-secondary, .btn-soft-success, .btn-soft-danger, .btn-soft-warning, .btn-soft-info, .btn-soft-light, .btn-soft-dark {
  --bs-btn-color: var(--soft-color); --bs-btn-bg: rgba(var(--soft-rgb), .14); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--soft-color); --bs-btn-hover-bg: rgba(var(--soft-rgb), .26); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--soft-color); --bs-btn-active-bg: rgba(var(--soft-rgb), .38); --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--soft-color); --bs-btn-disabled-bg: rgba(var(--soft-rgb), .1); --bs-btn-disabled-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--soft-rgb); --bs-btn-active-shadow: none;
}
/* Light theme: darker shades of each hue so the text stays legible on the lilac page. */
.btn-soft-primary   { --soft-rgb: var(--bs-primary-rgb);   --soft-color: #7A1FE0; }
.btn-soft-secondary { --soft-rgb: var(--bs-secondary-rgb); --soft-color: #C9128F; }
.btn-soft-success   { --soft-rgb: var(--bs-success-rgb);   --soft-color: #1F8F12; }
.btn-soft-danger    { --soft-rgb: var(--bs-danger-rgb);    --soft-color: #D42020; }
.btn-soft-warning   { --soft-rgb: var(--bs-warning-rgb);   --soft-color: #A66E00; }
.btn-soft-info      { --soft-rgb: var(--bs-info-rgb);      --soft-color: #0B8A9E; }
.btn-soft-light     { --soft-rgb: 29, 11, 78;              --soft-color: var(--fab-ink); }
.btn-soft-dark      { --soft-rgb: var(--bs-dark-rgb);      --soft-color: var(--fab-void); }
/* Dark theme: the raw palette colours already pop on the void background. */
[data-bs-theme=dark] .btn-soft-primary   { --soft-color: var(--bs-primary); }
[data-bs-theme=dark] .btn-soft-secondary { --soft-color: var(--bs-secondary); }
[data-bs-theme=dark] .btn-soft-success   { --soft-color: var(--bs-success); }
[data-bs-theme=dark] .btn-soft-danger    { --soft-color: var(--bs-danger); }
[data-bs-theme=dark] .btn-soft-warning   { --soft-color: var(--bs-warning); }
[data-bs-theme=dark] .btn-soft-info      { --soft-color: var(--bs-info); }
[data-bs-theme=dark] .btn-soft-light     { --soft-rgb: 244, 238, 255; --soft-color: #F4EEFF; }
[data-bs-theme=dark] .btn-soft-dark      { --soft-rgb: 0, 0, 0; --soft-color: #F4EEFF; --bs-btn-bg: rgba(0, 0, 0, .35); --bs-btn-hover-bg: rgba(0, 0, 0, .5); --bs-btn-active-bg: rgba(0, 0, 0, .6); }
/* Toggle groups (avatar picker): a selected soft button gets the active tint plus a ring. */
.btn-check:checked + [class*="btn-soft-"], .btn-check:active + [class*="btn-soft-"] { box-shadow: 0 0 0 3px rgba(var(--soft-rgb), .55); }

/* ---- Gradient buttons: hero actions only (catch, revive, trade) ---- */
.btn-fab {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-border-color: var(--fab-outline); --bs-btn-hover-border-color: var(--fab-outline); --bs-btn-active-border-color: var(--fab-outline);
  --bs-btn-bg: transparent; --bs-btn-hover-bg: transparent; --bs-btn-active-bg: transparent;
  background-image: var(--fab-btn-gradient);
  box-shadow: 0 0 22px rgba(var(--fab-btn-glow), .6), inset 0 -4px 0 rgba(0,0,0,.25);
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.btn-fab:hover { filter: brightness(1.08); }
.btn-fab:active { transform: translateY(2px); box-shadow: 0 0 14px rgba(var(--fab-btn-glow), .5), inset 0 -2px 0 rgba(0,0,0,.25); }
.btn-fab-primary { --fab-btn-gradient: var(--fab-gradient-primary); --fab-btn-glow: 255, 63, 191; }
.btn-fab-ice     { --fab-btn-gradient: var(--fab-gradient-ice);     --fab-btn-glow: 47, 230, 255; }
.btn-fab-fire    { --fab-btn-gradient: var(--fab-gradient-fire);    --fab-btn-glow: 255, 201, 60; --bs-btn-color: var(--fab-ink); --bs-btn-hover-color: var(--fab-ink); --bs-btn-active-color: var(--fab-ink); text-shadow: none; }
.btn-fab-slime   { --fab-btn-gradient: var(--fab-gradient-slime);   --fab-btn-glow: 94, 235, 60;  --bs-btn-color: var(--fab-ink); --bs-btn-hover-color: var(--fab-ink); --bs-btn-active-color: var(--fab-ink); text-shadow: none; }
.btn-fab-rainbow { --fab-btn-gradient: var(--fab-gradient-rainbow); --fab-btn-glow: 155, 61, 255; }

/* ---- Coins ---- */
.fab-coin {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .35em .85em; border-radius: var(--bs-border-radius-pill);
  background: var(--fab-gold); color: var(--fab-ink);
  border: 3px solid var(--fab-outline); font-weight: 700; white-space: nowrap;
}
.fab-coin-lg { font-size: 1.35rem; }

/* ---- Gradient badges (same look as .btn-fab, but flat: labels, not buttons) ---- */
.badge-fab {
  --fab-badge-gradient: var(--fab-gradient-primary); --fab-badge-glow: 255, 63, 191;
  display: inline-block; padding: .2em .7em; border-radius: var(--bs-border-radius-pill);
  background-image: var(--fab-badge-gradient); color: #fff;
  border: 2px solid var(--fab-outline); font-weight: 600; font-size: .75rem; line-height: 1.3;
  box-shadow: 0 0 8px rgba(var(--fab-badge-glow), .3);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  cursor: default; user-select: none;
}
.badge-fab-ice     { --fab-badge-gradient: var(--fab-gradient-ice);     --fab-badge-glow: 47, 230, 255; }
.badge-fab-fire    { --fab-badge-gradient: var(--fab-gradient-fire);    --fab-badge-glow: 255, 201, 60; color: var(--fab-ink); text-shadow: none; }
.badge-fab-slime   { --fab-badge-gradient: var(--fab-gradient-slime);   --fab-badge-glow: 94, 235, 60;  color: var(--fab-ink); text-shadow: none; }
.badge-fab-rainbow { --fab-badge-gradient: var(--fab-gradient-rainbow); --fab-badge-glow: 155, 61, 255; }

/* ---- Need bars (Ui::NeedBar sets need-* + band classes from Game.care thresholds) ---- */
.progress { border: 2px solid var(--fab-outline); }
.progress-bar { font-weight: 700; transition: width .6s linear; }
.need-hunger  { --bs-progress-bar-bg: #FF8A3C;       --fab-bar-gradient: var(--fab-gradient-fire);  --fab-bar-glow: 255, 138, 60; }
.need-thirst  { --bs-progress-bar-bg: var(--fab-ice);   --fab-bar-gradient: var(--fab-gradient-ice);   --fab-bar-glow: 47, 230, 255; }
.need-energy  { --bs-progress-bar-bg: var(--fab-slime); --fab-bar-gradient: var(--fab-gradient-slime); --fab-bar-glow: 94, 235, 60; }
.need-low     { --bs-progress-bar-bg: var(--fab-gold);  --fab-bar-gradient: linear-gradient(90deg, #FFB300, #FFE27A); --fab-bar-glow: 255, 201, 60; }
.need-critical { --bs-progress-bar-bg: var(--fab-lava); --fab-bar-gradient: linear-gradient(90deg, #C41E1E, #FF5A5A); --fab-bar-glow: 255, 59, 59; animation: fab-pulse 1s ease-in-out infinite; }
.need-empty { border-color: var(--fab-lava); }
.progress-sm { --bs-progress-height: .6rem; border-width: 1px; }
.progress-fab { overflow: visible; border-width: 3px; }
.progress-fab .progress-bar {
  background-image: var(--fab-bar-gradient); color: var(--fab-ink);
  border-radius: var(--bs-border-radius-pill);
  box-shadow: 0 0 14px rgba(var(--fab-bar-glow), .6), inset 0 -3px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.35);
  text-shadow: none;
}
.progress-fab.need-thirst .progress-bar, .progress-fab.need-critical .progress-bar { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.need-bar__label { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
@keyframes fab-pulse { 50% { opacity: .55; } }

/* ---- Cards ---- */
.card { --bs-card-border-width: 3px; --bs-card-border-color: var(--fab-outline); }

/* ---- Brainrot card (Brainrots::Card) ---- */
.brainrot-card { position: relative; text-align: center; }
.brainrot-card__art {
  width: 4.5rem; height: 4.5rem; margin: 0 auto .5rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 2.25rem; overflow: hidden;
  border: 3px solid var(--fab-outline);
}
.brainrot-card__art img { width: 100%; height: 100%; object-fit: cover; }
.brainrot-card--fainted .brainrot-card__art { filter: grayscale(1) opacity(.7); }
.brainrot-card__ghost { position: absolute; top: .5rem; right: .75rem; font-size: 1.25rem; }
.brainrot-card__name { font-weight: 700; margin-bottom: 0; }
.brainrot-card__species { font-size: .85rem; opacity: .75; }
.brainrot-card__income { font-weight: 700; color: var(--fab-gold); text-shadow: 0 1px 0 var(--fab-outline); }

/* ---- Floating top bar (web only; native has its own chrome) — Ui::Topbar ---- */
.fab-topbar-wrap { position: sticky; top: .75rem; z-index: 1030; padding-top: .75rem; }
.fab-topbar {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem .4rem .5rem;
  border-radius: var(--bs-border-radius-pill);
  background: rgba(var(--bs-body-bg-rgb), .62);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(29, 11, 78, .12);
  box-shadow: 0 12px 32px rgba(18, 6, 58, .16), inset 0 1px 0 rgba(255, 255, 255, .45);
}
[data-bs-theme=dark] .fab-topbar {
  background: rgba(29, 11, 78, .55);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.fab-topbar__brand { display: flex; align-items: center; gap: .55rem; min-height: var(--fab-tap-target); padding-right: .5rem; color: inherit; text-decoration: none; border-radius: var(--bs-border-radius-pill); }
.fab-topbar__brand:hover { color: inherit; }
.fab-topbar__brand:focus-visible { outline: 3px solid var(--fab-ice); outline-offset: 2px; }
.fab-topbar__avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem;
  background: var(--fab-gradient-primary);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 4px 12px rgba(var(--bs-primary-rgb), .35);
}
.fab-topbar__name { font-weight: 700; }
.fab-topbar__handle { opacity: .6; font-size: .85rem; }
.fab-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.fab-topbar__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-width: var(--fab-tap-target); height: var(--fab-tap-target); padding: 0 .75rem;
  border-radius: var(--bs-border-radius-pill); color: var(--bs-body-color); text-decoration: none; font-weight: 600;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.fab-topbar__btn .bi { font-size: 1.2rem; }
.fab-topbar__btn:hover { background: rgba(var(--bs-primary-rgb), .14); color: var(--bs-primary); }
.fab-topbar__btn:active { transform: scale(.96); }
.fab-topbar__btn:focus-visible { outline: 3px solid var(--fab-ice); outline-offset: 1px; }
.fab-topbar__btn--danger:hover { background: rgba(var(--bs-danger-rgb), .14); color: var(--bs-danger); }
.fab-topbar__label { display: none; }
@media (min-width: 576px) { .fab-topbar__label { display: inline; } }
@media (max-width: 575.98px) { .fab-topbar__btn { padding: 0; width: var(--fab-tap-target); } .fab-topbar__handle { display: none; } }
@media (prefers-reduced-transparency: reduce) { .fab-topbar { background: var(--bs-body-bg); backdrop-filter: none; -webkit-backdrop-filter: none; } }

.fab-footer { font-size: .85rem; opacity: .55; }

/* ---- Toasts (Ui::Toast in Ui::Toasts) — solid variant colour, chunky outline, countdown bar ---- */
.fab-toasts { position: fixed; z-index: 1090; top: 5.25rem; right: 1rem; width: min(24rem, calc(100vw - 2rem)); display: grid; gap: .6rem; pointer-events: none; }
.fab-toasts > * { pointer-events: auto; }
@media (max-width: 575.98px) { .fab-toasts { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom)); left: 1rem; right: 1rem; width: auto; } }
.fab-toast {
  --toast-bg: var(--bs-primary); --toast-bg-rgb: var(--bs-primary-rgb); --toast-fg: #fff; --toast-fg-rgb: 255, 255, 255;
  --toast-close-filter: invert(1) grayscale(100%) brightness(200%);
  --bs-toast-max-width: 100%; --bs-toast-padding-x: 0; --bs-toast-padding-y: 0; --bs-toast-font-size: 1rem;
  --bs-toast-bg: var(--toast-bg); --bs-toast-color: var(--toast-fg);
  --bs-toast-border-width: 3px; --bs-toast-border-color: var(--fab-outline); --bs-toast-border-radius: var(--bs-border-radius-lg);
  --bs-toast-box-shadow: 0 14px 34px rgba(var(--toast-bg-rgb), .35), 0 4px 12px rgba(5, 1, 15, .25), inset 0 -4px 0 rgba(0, 0, 0, .18);
  position: relative; overflow: hidden;
}
.fab-toast--success { --toast-bg: var(--bs-success); --toast-bg-rgb: var(--bs-success-rgb); --toast-fg: var(--fab-ink); --toast-fg-rgb: 29, 11, 78; --toast-close-filter: none; }
.fab-toast--warning { --toast-bg: var(--bs-warning); --toast-bg-rgb: var(--bs-warning-rgb); --toast-fg: var(--fab-ink); --toast-fg-rgb: 29, 11, 78; --toast-close-filter: none; }
.fab-toast--info    { --toast-bg: var(--bs-info);    --toast-bg-rgb: var(--bs-info-rgb);    --toast-fg: var(--fab-ink); --toast-fg-rgb: 29, 11, 78; --toast-close-filter: none; }
.fab-toast--danger  { --toast-bg: var(--bs-danger);  --toast-bg-rgb: var(--bs-danger-rgb);  --toast-fg: #fff; --toast-fg-rgb: 255, 255, 255; }
.fab-toast--primary { --toast-bg: var(--bs-primary); --toast-bg-rgb: var(--bs-primary-rgb); --toast-fg: #fff; --toast-fg-rgb: 255, 255, 255; }
.fab-toast__body { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem 1rem; }
.fab-toast__icon { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; color: var(--toast-fg); background: rgba(var(--toast-fg-rgb), .18); box-shadow: inset 0 0 0 2px rgba(var(--toast-fg-rgb), .25); }
.fab-toast__text { flex: 1 1 auto; align-self: center; color: var(--toast-fg); }
.fab-toast__title { font-weight: 700; }
.fab-toast__message { font-weight: 600; }
.fab-toast .btn-close { flex: none; margin: -.25rem -.25rem -.25rem 0; padding: .75rem; filter: var(--toast-close-filter); opacity: .75; }
.fab-toast .btn-close:hover { opacity: 1; }
.fab-toast__progress { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: rgba(var(--toast-fg-rgb), .55); animation: fab-toast-progress var(--toast-delay, 5000ms) linear forwards; }
@keyframes fab-toast-progress { to { width: 0; } }

/* ---- Confirm / alert dialog (Ui::ConfirmModal) — raised surface, accent border, dimmed + blurred page ---- */
.modal-backdrop { --bs-backdrop-bg: #05010F; --bs-backdrop-opacity: .72; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fab-confirm { --bs-modal-bg: #fff; --bs-modal-color: var(--fab-ink); }
[data-bs-theme=dark] .fab-confirm { --bs-modal-bg: #2A1470; --bs-modal-color: #F4EEFF; }
.fab-confirm .modal-dialog { max-width: 26rem; }
/* Fade only — Bootstrap's default slide moves the buttons while a fast finger is already tapping. */
.fab-confirm.fade .modal-dialog { transform: none; transition: none; }
.fab-confirm__content {
  --confirm-accent: var(--bs-primary); --confirm-accent-rgb: var(--bs-primary-rgb);
  border: 3px solid rgba(var(--confirm-accent-rgb), .9); border-radius: var(--bs-border-radius-lg); overflow: hidden;
  box-shadow: 0 0 0 6px rgba(var(--confirm-accent-rgb), .16), 0 0 48px rgba(var(--confirm-accent-rgb), .28), 0 32px 80px rgba(5, 1, 15, .6);
}
.fab-confirm__content::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 10rem; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(var(--confirm-accent-rgb), .3), transparent 70%); }
.fab-confirm--info        { --confirm-accent: var(--bs-info);    --confirm-accent-rgb: var(--bs-info-rgb); }
.fab-confirm--success     { --confirm-accent: var(--bs-success); --confirm-accent-rgb: var(--bs-success-rgb); }
.fab-confirm--warning     { --confirm-accent: var(--bs-warning); --confirm-accent-rgb: var(--bs-warning-rgb); }
.fab-confirm--danger,
.fab-confirm--destructive { --confirm-accent: var(--bs-danger);  --confirm-accent-rgb: var(--bs-danger-rgb); }
.fab-confirm__icon { position: relative; width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.25rem; color: var(--confirm-accent); background: rgba(var(--confirm-accent-rgb), .18); box-shadow: 0 0 0 8px rgba(var(--confirm-accent-rgb), .1); }
.fab-confirm__title { position: relative; font-weight: 700; }
.fab-confirm__message { position: relative; color: var(--bs-secondary-color); }
.fab-confirm__actions .btn { min-width: 8rem; }

/* ---- Settings page (adults): cards on a grid, avatar chips, status pills ---- */
.fab-settings__card .card-header,
.fab-settings__card .card-footer { background: transparent; padding: 1rem 1.25rem; }
.fab-settings__card .card-header { border-bottom: 1px solid var(--bs-border-color); display: flex; align-items: center; gap: .6rem; }
.fab-settings__card .card-footer { border-top: 1px solid var(--bs-border-color); }
.fab-settings__title { font-weight: 700; font-size: 1.1rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.fab-settings__title .bi { color: var(--bs-primary); }
.fab-settings__list { margin: 0; padding: 0; list-style: none; }
.fab-settings__row { display: flex; align-items: center; gap: .85rem; padding: .85rem 0; }
.fab-settings__row:first-child { padding-top: 0; }
.fab-settings__row:last-child { padding-bottom: 0; }
.fab-settings__row + .fab-settings__row { border-top: 1px dashed var(--bs-border-color); }
.fab-settings__row form { margin-left: auto; }
.fab-avatar { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; background: var(--fab-gradient-primary); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 4px 12px rgba(var(--bs-primary-rgb), .35); }
.fab-status { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: var(--bs-border-radius-pill); border: 2px solid var(--fab-outline); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.fab-status--on { background: var(--bs-success); color: var(--fab-ink); }
.fab-status--off { background: var(--bs-warning); color: var(--fab-ink); }
.fab-status--none { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }

/* ---- 3D model viewer (Species#show; later the Dex and Catch screens) ---- */
/* model-viewer's own :host style fixes height at 150px — height:auto hands it back to aspect-ratio. */
.fab-model-viewer {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 78vh;
  border-radius: var(--bs-border-radius-lg); border: 3px solid var(--fab-outline);
  background: radial-gradient(ellipse at 50% 40%, rgba(var(--rarity-rgb, var(--bs-primary-rgb)), .35), transparent 65%), var(--bs-tertiary-bg);
  --poster-color: transparent; --progress-bar-color: var(--fab-ice); --progress-bar-height: 4px;
}
.fab-model-viewer [slot="ar-button"] { position: absolute; bottom: 1rem; right: 1rem; }
.btn-soft-primary.active { --bs-btn-active-bg: rgba(var(--soft-rgb), .38); }

/* ---- Admin roster table ---- */
.fab-admin-table { --bs-table-bg: transparent; --bs-table-color: inherit; --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .07); --bs-table-hover-color: inherit; --bs-table-border-color: var(--bs-border-color); }
.fab-admin-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 700; }
.fab-admin-table td, .fab-admin-table th { padding: .7rem .9rem; }
.fab-thumb { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .9rem; object-fit: cover; border: 2px solid var(--fab-outline); background: var(--bs-tertiary-bg); font-weight: 700; }
.fab-admin-files .bi { font-size: 1.1rem; margin-right: .35rem; }

.fab-thumb--lg { width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; font-size: 1.6rem; }
.fab-help { color: var(--bs-secondary-color); cursor: help; font-size: .85em; vertical-align: middle; border-radius: .3rem; }
.fab-help:hover, .fab-help:focus-visible { color: var(--bs-primary); outline: none; }
.fab-help:focus-visible { box-shadow: 0 0 0 3px rgba(var(--bs-info-rgb), .5); }
.fab-tooltip-wide { --bs-tooltip-max-width: 19rem; text-align: left; font-weight: 500; }
.fab-run { margin: 0; }

/* ---- Multiview card + review banner ---- */
.fab-multiview__view { display: flex; flex-direction: column; }
.fab-multiview__img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: .9rem; border: 2px solid var(--fab-outline); background: #fff; }
.fab-review-banner { padding: .85rem 1rem; border-radius: var(--bs-border-radius-lg); border: 3px solid rgba(var(--bs-warning-rgb), .8); background: rgba(var(--bs-warning-rgb), .12); }
.fab-review-banner .bi { color: var(--bs-warning); font-size: 1.3rem; }

/* ---- Drop zone (reference image upload) ---- */
.fab-dropzone-form { margin: 0; }
.fab-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center;
  padding: 1.75rem 1rem; cursor: pointer; border-radius: var(--bs-border-radius-lg);
  border: 3px dashed rgba(var(--bs-primary-rgb), .55); background: rgba(var(--bs-primary-rgb), .06);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.fab-dropzone:hover, .fab-dropzone:focus-visible { background: rgba(var(--bs-primary-rgb), .12); border-color: var(--bs-primary); outline: none; }
.fab-dropzone:focus-visible { box-shadow: 0 0 0 3px rgba(var(--bs-info-rgb), .5); }
.fab-dropzone.is-dragover { background: rgba(var(--bs-primary-rgb), .22); border-color: var(--bs-primary); border-style: solid; transform: scale(1.01); }
.fab-dropzone.is-uploading, .fab-dropzone.is-disabled { opacity: .55; pointer-events: none; }
.fab-dropzone__icon { font-size: 2.4rem; line-height: 1; color: var(--bs-primary); }
.fab-dropzone__title { font-weight: 700; }
.fab-dropzone--compact { flex-direction: row; text-align: left; gap: .8rem; padding: .8rem 1rem; }
.fab-dropzone--compact .fab-dropzone__icon { font-size: 1.6rem; }
.fab-dropzone--compact .fab-dropzone__title { font-size: .95rem; }
.fab-file { display: inline-block; cursor: help; border-radius: .4rem; }
.fab-file:focus-visible { outline: 3px solid var(--fab-ice); outline-offset: 2px; }

/* ---- Pagination (pagy series_nav(:bootstrap)) — separate rounded pills: soft primary, solid when active ---- */
.fab-pager .pagination {
  gap: .4rem;
  --bs-pagination-padding-x: .95rem; --bs-pagination-padding-y: .55rem; --bs-pagination-font-size: .95rem;
  --bs-pagination-border-width: 3px; --bs-pagination-border-color: transparent; --bs-pagination-border-radius: .85rem;
  --bs-pagination-bg: rgba(var(--bs-primary-rgb), .14); --bs-pagination-color: #7A1FE0;
  --bs-pagination-hover-bg: rgba(var(--bs-primary-rgb), .26); --bs-pagination-hover-color: #7A1FE0; --bs-pagination-hover-border-color: transparent;
  --bs-pagination-focus-bg: rgba(var(--bs-primary-rgb), .3); --bs-pagination-focus-color: #7A1FE0; --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(var(--bs-info-rgb), .55);
  --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-color: #fff; --bs-pagination-active-border-color: var(--fab-outline);
  --bs-pagination-disabled-bg: rgba(var(--bs-primary-rgb), .07); --bs-pagination-disabled-color: rgba(122, 31, 224, .45); --bs-pagination-disabled-border-color: transparent;
}
[data-bs-theme=dark] .fab-pager .pagination { --bs-pagination-color: var(--bs-primary); --bs-pagination-hover-color: var(--bs-primary); --bs-pagination-focus-color: var(--bs-primary); --bs-pagination-disabled-color: rgba(var(--bs-primary-rgb), .45); }
.fab-pager .pagination .page-item .page-link { border-radius: var(--bs-pagination-border-radius); min-width: 2.75rem; text-align: center; font-weight: 700; margin-left: 0; line-height: 1.2; }
.fab-pager .pagination .page-item.active .page-link { box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), .35); }

.tooltip { --bs-tooltip-bg: var(--fab-ink); --bs-tooltip-color: #F4EEFF; --bs-tooltip-border-radius: .6rem; --bs-tooltip-font-size: .8rem; --bs-tooltip-padding-x: .7rem; --bs-tooltip-padding-y: .45rem; --bs-tooltip-opacity: 1; font-weight: 600; }
[data-bs-theme=dark] .tooltip { --bs-tooltip-bg: #F4EEFF; --bs-tooltip-color: var(--fab-ink); }

/* ---- Copy buttons + command list (Ui::CopyButton, species Pipeline card) ---- */
.fab-copy { flex: none; --bs-btn-padding-x: .6rem; }
.fab-copy.is-copied { --soft-rgb: var(--bs-success-rgb); --soft-color: #1F8F12; }
[data-bs-theme=dark] .fab-copy.is-copied { --soft-color: var(--bs-success); }
.fab-copy--inline { min-height: 0; --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .8rem; }
.fab-commands { --bs-list-group-bg: transparent; --bs-list-group-color: inherit; --bs-list-group-border-color: var(--bs-border-color); --bs-list-group-item-padding-x: 0; --bs-list-group-item-padding-y: .6rem; }
.fab-commands code { font-size: .78rem; color: var(--bs-body-color); opacity: .8; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .btn-fab:active { transform: none; }
  .fab-topbar__btn:active { transform: none; }
  .fab-toast__progress { animation: none; display: none; }
  .modal-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .need-critical { animation: none; }
  .progress-bar { transition: none; }
}