/* These styles are generated from project.scss. */
:root{
    --bs-body-font-size: .9rem;

    --bd-blue-100: #cfe2ff;
    --bd-blue-200: #9ec5fe;
    --bd-blue-300: #6ea8fe;
    --bd-blue-400: #3d8bfd;
    --bd-blue-500: #0d6efd;
    --bd-blue-600: #0a58ca;
    --bd-blue-700: #084298;
    --bd-blue-800: #052c65;
    --bd-blue-900: #031633;

    --bd-indigo-100: #e0cffc;
    --bd-indigo-200: #c29ffa;
    --bd-indigo-300: #a370f7;
    --bd-indigo-400: #8540f5;
    --bd-indigo-500: #6610f2;
    --bd-indigo-600: #520dc2;
    --bd-indigo-700: #3d0a91;
    --bd-indigo-800: #290661;
    --bd-indigo-900: #140330;

    --bd-purple-100: #e2d9f3;
    --bd-purple-200: #c5b3e6;
    --bd-purple-300: #a98eda;
    --bd-purple-400: #8c68cd;
    --bd-purple-500: #6f42c1;
    --bd-purple-600: #59359a;
    --bd-purple-700: #432874;
    --bd-purple-800: #2c1a4d;
    --bd-purple-900: #160d27;

    --bd-pink-100: #f7d6e6;
    --bd-pink-200: #efadce;
    --bd-pink-300: #e685b5;
    --bd-pink-400: #de5c9d;
    --bd-pink-500: #d63384;
    --bd-pink-600: #ab296a;
    --bd-pink-700: #801f4f;
    --bd-pink-800: #561435;
    --bd-pink-900: #2b0a1a;

    --bd-red-100: #f8d7da;
    --bd-red-200: #f1aeb5;
    --bd-red-300: #ea868f;
    --bd-red-400: #e35d6a;
    --bd-red-500: #dc3545;
    --bd-red-600: #b02a37;
    --bd-red-700: #842029;
    --bd-red-800: #58151c;
    --bd-red-900: #2c0b0e;

    --bd-orange-100: #ffe5d0;
    --bd-orange-200: #fecba1;
    --bd-orange-300: #feb272;
    --bd-orange-400: #fd9843;
    --bd-orange-500: #fd7e14;
    --bd-orange-600: #ca6510;
    --bd-orange-700: #984c0c;
    --bd-orange-800: #653208;
    --bd-orange-900: #331904;

    --bd-yellow-100: #fff3cd;
    --bd-yellow-200: #ffe69c;
    --bd-yellow-300: #ffda6a;
    --bd-yellow-400: #ffcd39;
    --bd-yellow-500: #ffc107;
    --bd-yellow-600: #cc9a06;
    --bd-yellow-700: #997404;
    --bd-yellow-800: #664d03;
    --bd-yellow-900: #332701;

    --bd-green-100: #d1e7dd;
    --bd-green-200: #a3cfbb;
    --bd-green-300: #75b798;
    --bd-green-400: #479f76;
    --bd-green-500: #198754;
    --bd-green-600: #146c43;
    --bd-green-700: #0f5132;
    --bd-green-800: #0a3622;
    --bd-green-900: #051b11;

    --bd-teal-100: #d2f4ea;
    --bd-teal-200: #a6e9d5;
    --bd-teal-300: #79dfc1;
    --bd-teal-400: #4dd4ac;
    --bd-teal-500: #20c997;
    --bd-teal-600: #1aa179;
    --bd-teal-700: #13795b;
    --bd-teal-800: #0d503c;
    --bd-teal-900: #06281e;

    --bd-cyan-100: #cff4fc;
    --bd-cyan-200: #9eeaf9;
    --bd-cyan-300: #6edff6;
    --bd-cyan-400: #3dd5f3;
    --bd-cyan-500: #0dcaf0;
    --bd-cyan-600: #0aa2c0;
    --bd-cyan-700: #087990;
    --bd-cyan-800: #055160;
    --bd-cyan-900: #032830;

    --bd-gray-100: #f8f9fa;
    --bd-gray-200: #e9ecef;
    --bd-gray-300: #dee2e6;
    --bd-gray-400: #ced4da;
    --bd-gray-500: #adb5bd;
    --bd-gray-600: #6c757d;
    --bd-gray-700: #495057;
    --bd-gray-800: #343a40;
    --bd-gray-900: #212529;

    --bd-white: #fff;
    --bd-black: #000;
}
#new-item-fields {
    display:none;
}

.offcanvas {
    --bs-offcanvas-width: 50%;
}

.alert-debug {
    color: black;
    background-color: white;
    border-color: #d6e9c6;
}

.alert-error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}

/* Dropped item dimming */
.item-dropped .facet-name,
.item-dropped .facet-name-desc-tags,
.item-dropped .facet-dice,
.item-dropped .facet-action-cost {
    opacity: 0.4;
}

/* Locked form dimming */
.facet-disabled .facet-name,
.facet-disabled .facet-name-desc-tags,
.facet-disabled .facet-dice,
.facet-disabled .facet-action-cost {
    opacity: 0.4;
}

/* Small visual helpers (allowed minimal inline styles) */
.track-square {
    width: 28px;
    height: 22px;
    border: 1px solid #ddd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    font-weight: 700;
    font-size: 0.9rem;
}

/* HP pip grid: one small square per HP point, wraps to multiple rows for
   high HP totals instead of overflowing the vitals card. */
.hp-pip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-height: 96px;
    overflow-y: auto;
    padding: 2px;
}

.hp-pip {
    width: 12px;
    height: 12px;
    border: 1px solid #ddd;
    cursor: pointer;
    flex-shrink: 0;
}

.hp-pip-filled {
    background-color: var(--bd-red-700);
    border-color: var(--bd-red-700);
}

@media (max-width: 767.98px) {
    .hp-pip {
        width: 10px;
        height: 10px;
    }
}

.armor-pip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-height: 96px;
    overflow-y: auto;
    padding: 2px;
}

.armor-pip {
    width: 12px;
    height: 12px;
    border: 1px solid #ddd;
    cursor: pointer;
    flex-shrink: 0;
}

.armor-pip-filled {
    background-color: var(--bs-purple);
    border-color: var(--bs-purple);
}

@media (max-width: 767.98px) {
    .armor-pip {
        width: 10px;
        height: 10px;
    }
}

.track-black {
    background: #666;
    color: #fff;
}

.track-red {
    background: #e63946;
    color: #fff;
}

.track-yellow {
    background: #ffd166;
    color: #000;
}

.track-blue {
    background: #4cc9f0;
    color: #000;
}

.skill-icon {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #bbb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    margin-right: .5rem;
    font-size: .85rem;
}
.field-label .lucide {
    margin-right: .25rem;
}

.btn-primary-subtle{
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}
.btn-secondary-subtle{
    background-color: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary-text-emphasis);
}
.btn-success-subtle{
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}
.btn-info-subtle{
    background-color: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
}
.btn-danger-subtle,
.btn-failed-subtle{
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}
.btn-warning-subtle{
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}
.btn-light-subtle{
    background-color: var(--bs-light-bg-subtle);
    color: var(--bs-light-text-emphasis);
}
.btn-dark-subtle{
    background-color: var(--bs-dark-bg-subtle);
    color: var(--bs-dark-text-emphasis);
}
@media (max-width:767.98px) {
    .track-square {
        width: 20px;
        height: 18px;
    }

    .skill-icon {
        width: 24px;
        height: 24px;
        font-size: .75rem
    }
}


.bd-blue-100 {
    color: #000;
    background-color: var(--bd-blue-100)
}

.bd-blue-200 {
    color: #000;
    background-color: var(--bd-blue-200)
}

.bd-blue-300 {
    color: #000;
    background-color: var(--bd-blue-300)
}

.bd-blue-400 {
    color: #000;
    background-color: var(--bd-blue-400)
}

.bd-blue-500 {
    color: #fff;
    background-color: var(--bd-blue-500)
}

.bd-blue-600 {
    color: #fff;
    background-color: var(--bd-blue-600)
}

.bd-blue-700 {
    color: #fff;
    background-color: var(--bd-blue-700)
}

.bd-blue-800 {
    color: #fff;
    background-color: var(--bd-blue-800)
}

.bd-blue-900 {
    color: #fff;
    background-color: var(--bd-blue-900)
}

.bd-indigo-100 {
    color: #000;
    background-color: var(--bd-indigo-100)
}

.bd-indigo-200 {
    color: #000;
    background-color: var(--bd-indigo-200)
}

.bd-indigo-300 {
    color: #000;
    background-color: var(--bd-indigo-300)
}

.bd-indigo-400 {
    color: #fff;
    background-color: var(--bd-indigo-400)
}

.bd-indigo-500 {
    color: #fff;
    background-color: var(--bd-indigo-500)
}

.bd-indigo-600 {
    color: #fff;
    background-color: var(--bd-indigo-600)
}

.bd-indigo-700 {
    color: #fff;
    background-color: var(--bd-indigo-700)
}

.bd-indigo-800 {
    color: #fff;
    background-color: var(--bd-indigo-800)
}

.bd-indigo-900 {
    color: #fff;
    background-color: var(--bd-indigo-900)
}

.bd-purple-100 {
    color: #000;
    background-color: var(--bd-purple-100)
}

.bd-purple-200 {
    color: #000;
    background-color: var(--bd-purple-200)
}

.bd-purple-300 {
    color: #000;
    background-color: var(--bd-purple-300)
}

.bd-purple-400 {
    color: #000;
    background-color: var(--bd-purple-400)
}

.bd-purple-500 {
    color: #fff;
    background-color: var(--bd-purple-500)
}

.bd-purple-600 {
    color: #fff;
    background-color: var(--bd-purple-600)
}

.bd-purple-700 {
    color: #fff;
    background-color: var(--bd-purple-700)
}

.bd-purple-800 {
    color: #fff;
    background-color: var(--bd-purple-800)
}

.bd-purple-900 {
    color: #fff;
    background-color: var(--bd-purple-900)
}

.bd-pink-100 {
    color: #000;
    background-color: var(--bd-pink-100)
}

.bd-pink-200 {
    color: #000;
    background-color: var(--bd-pink-200)
}

.bd-pink-300 {
    color: #000;
    background-color: var(--bd-pink-300)
}

.bd-pink-400 {
    color: #000;
    background-color: var(--bd-pink-400)
}

.bd-pink-500 {
    color: #fff;
    background-color: var(--bd-pink-500)
}

.bd-pink-600 {
    color: #fff;
    background-color: var(--bd-pink-600)
}

.bd-pink-700 {
    color: #fff;
    background-color: var(--bd-pink-700)
}

.bd-pink-800 {
    color: #fff;
    background-color: var(--bd-pink-800)
}

.bd-pink-900 {
    color: #fff;
    background-color: var(--bd-pink-900)
}

.bd-red-100 {
    color: #000;
    background-color: var(--bd-red-100)
}

.bd-red-200 {
    color: #000;
    background-color: var(--bd-red-200)
}

.bd-red-300 {
    color: #000;
    background-color: var(--bd-red-300)
}

.bd-red-400 {
    color: #000;
    background-color: var(--bd-red-400)
}

.bd-red-500 {
    color: #fff;
    background-color: var(--bd-red-500)
}

.bd-red-600 {
    color: #fff;
    background-color: var(--bd-red-600)
}

.bd-red-700 {
    color: #fff;
    background-color: var(--bd-red-700)
}

.bd-red-800 {
    color: #fff;
    background-color: var(--bd-red-800)
}

.bd-red-900 {
    color: #fff;
    background-color: var(--bd-red-900)
}

.bd-orange-100 {
    color: #000;
    background-color: var(--bd-orange-100)
}

.bd-orange-200 {
    color: #000;
    background-color: var(--bd-orange-200)
}

.bd-orange-300 {
    color: #000;
    background-color: var(--bd-orange-300)
}

.bd-orange-400 {
    color: #000;
    background-color: var(--bd-orange-400)
}

.bd-orange-500 {
    color: #000;
    background-color: var(--bd-orange-500)
}

.bd-orange-600 {
    color: #000;
    background-color: var(--bd-orange-600)
}

.bd-orange-700 {
    color: #fff;
    background-color: var(--bd-orange-700)
}

.bd-orange-800 {
    color: #fff;
    background-color: var(--bd-orange-800)
}

.bd-orange-900 {
    color: #fff;
    background-color: var(--bd-orange-900)
}

.bd-yellow-100 {
    color: #000;
    background-color: var(--bd-yellow-100)
}

.bd-yellow-200 {
    color: #000;
    background-color: var(--bd-yellow-200)
}

.bd-yellow-300 {
    color: #000;
    background-color: var(--bd-yellow-300)
}

.bd-yellow-400 {
    color: #000;
    background-color: var(--bd-yellow-400)
}

.bd-yellow-500 {
    color: #000;
    background-color: var(--bd-yellow-500)
}

.bd-yellow-600 {
    color: #000;
    background-color: var(--bd-yellow-600)
}

.bd-yellow-700 {
    color: #000;
    background-color: var(--bd-yellow-700)
}

.bd-yellow-800 {
    color: #fff;
    background-color: var(--bd-yellow-800)
}

.bd-yellow-900 {
    color: #fff;
    background-color: var(--bd-yellow-900)
}

.bd-green-100 {
    color: #000;
    background-color: var(--bd-green-100)
}

.bd-green-200 {
    color: #000;
    background-color: var(--bd-green-200)
}

.bd-green-300 {
    color: #000;
    background-color: var(--bd-green-300)
}

.bd-green-400 {
    color: #000;
    background-color: var(--bd-green-400)
}

.bd-green-500 {
    color: #fff;
    background-color: var(--bd-green-500)
}

.bd-green-600 {
    color: #fff;
    background-color: var(--bd-green-600)
}

.bd-green-700 {
    color: #fff;
    background-color: var(--bd-green-700)
}

.bd-green-800 {
    color: #fff;
    background-color: var(--bd-green-800)
}

.bd-green-900 {
    color: #fff;
    background-color: var(--bd-green-900)
}

.bd-teal-100 {
    color: #000;
    background-color: var(--bd-teal-100)
}

.bd-teal-200 {
    color: #000;
    background-color: var(--bd-teal-200)
}

.bd-teal-300 {
    color: #000;
    background-color: var(--bd-teal-300)
}

.bd-teal-400 {
    color: #000;
    background-color: var(--bd-teal-400)
}

.bd-teal-500 {
    color: #000;
    background-color: var(--bd-teal-500)
}

.bd-teal-600 {
    color: #000;
    background-color: var(--bd-teal-600)
}

.bd-teal-700 {
    color: #fff;
    background-color: var(--bd-teal-700)
}

.bd-teal-800 {
    color: #fff;
    background-color: var(--bd-teal-800)
}

.bd-teal-900 {
    color: #fff;
    background-color: var(--bd-teal-900)
}

.bd-cyan-100 {
    color: #000;
    background-color: var(--bd-cyan-100)
}

.bd-cyan-200 {
    color: #000;
    background-color: var(--bd-cyan-200)
}

.bd-cyan-300 {
    color: #000;
    background-color: var(--bd-cyan-300)
}

.bd-cyan-400 {
    color: #000;
    background-color: var(--bd-cyan-400)
}

.bd-cyan-500 {
    color: #000;
    background-color: var(--bd-cyan-500)
}

.bd-cyan-600 {
    color: #000;
    background-color: var(--bd-cyan-600)
}

.bd-cyan-700 {
    color: #fff;
    background-color: var(--bd-cyan-700)
}

.bd-cyan-800 {
    color: #fff;
    background-color: var(--bd-cyan-800)
}

.bd-cyan-900 {
    color: #fff;
    background-color: var(--bd-cyan-900)
}

.bd-gray-100 {
    color: #000;
    background-color: var(--bd-gray-100)
}

.bd-gray-200 {
    color: #000;
    background-color: var(--bd-gray-200)
}

.bd-gray-300 {
    color: #000;
    background-color: var(--bd-gray-300)
}

.bd-gray-400 {
    color: #000;
    background-color: var(--bd-gray-400)
}

.bd-gray-500 {
    color: #000;
    background-color: var(--bd-gray-500)
}

.bd-gray-600 {
    color: #fff;
    background-color: var(--bd-gray-600)
}

.bd-gray-700 {
    color: #fff;
    background-color: var(--bd-gray-700)
}

.bd-gray-800 {
    color: #fff;
    background-color: var(--bd-gray-800)
}

.bd-gray-900 {
    color: #fff;
    background-color: var(--bd-gray-900)
}

.bd-white {
    color: #000;
    background-color: var(--bd-white)
}

.bd-black {
    color: #fff;
    background-color: var(--bd-black)
}

/* Tag interaction states */
/* When tags are inactive (dimmed during filter), make them more transparent */
.tag-clickable.bg-opacity-50 {
    opacity: 0.5;
}

/* Optional: Add hover effect for clickable tags */
.tag-clickable:hover {
    filter: brightness(1.1);
    cursor: pointer;
}

#hp-current-display {
    cursor: pointer;
    text-decoration: underline dotted;
}

#hp-current-input {
    display: none;
    width: 4em;
}

.icon-sm {
    width: 16px;
    height: 16px;
}

/* Skills grid — Bootstrap grid-based layout */
.col-20, .col-225 {
    flex: 0 0 auto;
    width: 20%;
}
.col-225 {
    width: 22.5%;
}
.skills-grid-container {
    border-top: 1px solid var(--bs-border-color);
    border-left: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

.skills-grid-cell {
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.skills-grid-corner {
    background: transparent;
}

/* Compact track squares inside the skills grid header */
.skills-grid-container .track-square {
    width: 16px;
    height: 14px;
    font-size: 0.65rem;
    margin-right: 2px;
    margin-bottom: 2px;
    border-color: #222;
}

.skills-die {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.skills-die-sm {
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.85;
}

.skills-die-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 2px;
}

.dice-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: #444;
}

.dice-icon.skill-icon {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #bbb;
    padding: 3px;
    margin-right: .5rem;
}

.dice-icon.attribute-dice {
    width: 40px;
    height: 40px;
}

@media (max-width: 767.98px) {
    .skills-grid-container .track-square {
        width: 12px;
        height: 12px;
    }
    .skills-die {
        width: 22px;
        height: 22px;
    }
    .skills-die-sm {
        width: 12px;
        height: 12px;
    }
    .dice-icon {
        width: 22px;
        height: 22px;
    }
}

.drag-handle {
    cursor: grab;
}

.facet-class-col {
    min-width: 350px;
    max-width: 420px;
}
.kymera-constant-key {
    font-weight: bold;
}
.kymera-constant-value {
    font-family: "Courier New", Courier, monospace;
}

/* ---- Level-up celebration ---- */
.level-up-banner {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 2000;
  pointer-events: none;
  font-weight: 800;
  font-size: clamp(2.5rem, 10vw, 6rem);
  letter-spacing: 0.05em;
  color: #ffd447;
  text-shadow:
    0 0 12px rgba(255, 200, 40, 0.9),
    0 0 32px rgba(255, 140, 0, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  animation: level-up-pop 1200ms ease-out forwards;
}

@keyframes level-up-pop {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  35%  { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  75%  { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0; }
}

/* ---- Relationship spectrum ---- */
:root {
  --relationship-height: 18px;
  --marker-size: 22px;
  --rel-positive: 13, 110, 253;
  --rel-negative: 253, 126, 20;
  --rel-neutral: 108, 117, 125;
}

.relationship-avatar-col {
  flex: 0 0 44px;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.relationship-avatar-col .badge {
  font-size: .65rem;
}

.character-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: #e9ecef;
  flex: 0 0 auto;
  overflow: hidden;
}

.character-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.relationship-row {
  padding: 1.25rem 0;
  border-top: 1px solid #e9ecef;
}

.relationship-row:first-of-type {
  border-top: 0;
}

.relationship-track-wrap {
  position: relative;
  padding: 12px 0;
}

.relationship-track {
  position: relative;
  height: var(--relationship-height);
  border-radius: 999px;
  background:
    linear-gradient(
      to right,
      rgba(var(--rel-negative), .95) 0%,
      rgba(var(--rel-negative), .68) 24%,
      rgba(var(--rel-negative), .18) 47%,
      rgba(var(--rel-neutral), .24) 50%,
      rgba(var(--rel-positive), .18) 53%,
      rgba(var(--rel-positive), .68) 76%,
      rgba(var(--rel-positive), .95) 100%
    );
  overflow: visible;
}

.change-bridge {
  position: absolute;
  left: var(--bridge-left);
  width: var(--bridge-width);
  top: 50%;
  height: 0;
  border-top: 3px dashed;
  transform: translateY(-50%);
  z-index: 3;
}

.change-bridge.increased {
  border-color: rgba(var(--rel-positive), .9);
}

.change-bridge.decreased {
  border-color: rgba(var(--rel-negative), .95);
}

.current-marker,
.previous-marker {
  position: absolute;
  top: 50%;
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.current-marker {
  left: var(--current-pos);
}

.previous-marker {
  left: var(--previous-pos);
  background: #fff;
  opacity: .9;
}

.current-marker.positive {
  background: rgb(var(--rel-positive));
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(var(--rel-positive), .55);
}

.current-marker.negative {
  background: rgb(var(--rel-negative));
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(var(--rel-negative), .6);
}

.previous-marker.positive {
  border: 2px dashed rgb(var(--rel-positive));
}

.previous-marker.negative {
  border: 2px dashed rgb(var(--rel-negative));
}

.note {
  font-size: .875rem;
  color: #6c757d;
}

/* ------------------------------------------------------------------
   The Friends Along the Way — NPC avatars
   Scoped to .npc-avatar so the 44px .character-avatar used by the
   character sheet and relationship spectrum is untouched.
   ------------------------------------------------------------------ */
.npc-avatar {
  width: 96px;
  height: 96px;
  position: relative;
  /* The preview escapes the circular clip. */
  overflow: visible;
  border-radius: 50%;
  font-size: 2rem;
}

.npc-avatar > img {
  border-radius: 50%;
}

.npc-avatar-preview {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%) scale(0.96);
  z-index: 1080;
  display: block;
  width: 400px;
  height: 400px;
  padding: 4px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.npc-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.npc-avatar:hover .npc-avatar-preview,
.npc-avatar:focus .npc-avatar-preview,
.npc-avatar:focus-within .npc-avatar-preview {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
}

/* Cards in the last column would push the preview off-screen; flip it. */
.row > .col:nth-child(3n) .npc-avatar-preview {
  left: auto;
  right: calc(100% + 12px);
}

/* No room to flank a narrow viewport — centre it over the card instead. */
@media (max-width: 991.98px) {
  .npc-avatar-preview,
  .row > .col:nth-child(3n) .npc-avatar-preview {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    width: min(400px, 90vw);
    height: min(400px, 90vw);
    transform: translate(-50%, -50%) scale(0.96);
  }

  .npc-avatar:hover .npc-avatar-preview,
  .npc-avatar:focus .npc-avatar-preview,
  .npc-avatar:focus-within .npc-avatar-preview {
    transform: translate(-50%, -50%) scale(1);
  }
}