.sprites-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  margin-bottom: 0.7rem;
}

.sprite-events {
  margin: 0.75rem 0 0.85rem;
  border: 1px solid rgba(86, 120, 200, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
  box-shadow: 0 8px 22px rgba(40, 70, 120, 0.08);
  overflow: hidden;
}

body.sprites-app .sprite-events {
  margin: 0 0 0.55rem;
}

.sprite-events__toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.sprite-events__toggle-text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.sprite-events__toggle-text strong {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3d5a80;
}

.sprite-events__toggle-text em {
  font-style: normal;
  font-size: 0.92rem;
  font-weight: 700;
  color: #152033;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sprite-events__chevron {
  flex-shrink: 0;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 2px solid #3d5a80;
  border-bottom: 2px solid #3d5a80;
  transform: rotate(-135deg);
  transition: transform 0.15s ease;
}

.sprite-events.is-collapsed .sprite-events__chevron {
  transform: rotate(45deg);
}

.sprite-events__body {
  padding: 0 0.85rem 0.85rem;
}

.sprite-events__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.sprite-events__item {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(60, 90, 140, 0.12);
  background: #fff;
}

.sprite-events__item.is-highlight {
  border-color: rgba(168, 85, 247, 0.4);
  background: linear-gradient(120deg, rgba(168, 85, 247, 0.12), rgba(245, 197, 24, 0.1)), #fff;
}

.sprite-events__item.is-live {
  border-color: rgba(14, 165, 180, 0.5);
  box-shadow: inset 0 0 0 1px rgba(14, 165, 180, 0.16);
}

.sprite-events__title {
  font-size: 1rem;
  color: #152033;
}

.sprite-events__status {
  color: #0b8a9c;
  font-size: 0.86rem;
  font-weight: 700;
}

.sprite-events__when {
  color: #5b6b82;
  font-size: 0.8rem;
}

.sprite-events__note {
  margin: 0.65rem 0 0;
  font-size: 0.72rem;
  color: #5b6b82;
}

body.sprites-app #checklist .shop-head h2 {
  color: #122033;
  letter-spacing: 0.01em;
}

body.sprites-app .sprite-progress__card span {
  color: #5b6b82;
}

.sprite-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1rem 0 1.1rem;
}

.sprite-progress__card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  padding: 0.95rem 1.05rem;
  display: grid;
  gap: 0.45rem;
}

.sprite-progress__card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sprite-progress__card strong {
  font-family: 'Teko', sans-serif;
  font-size: 1.8rem;
  color: #fff;
  line-height: 1;
}

.sprite-progress__bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.sprite-progress__bar i {
  display: block;
  height: 100%;
  background: var(--fn-yellow);
}

.sprite-progress__bar--mastery i {
  background: var(--fn-blue);
}

.sprite-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: end;
  margin-bottom: 0.9rem;
}

.sprite-toolbar__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.sprite-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.28);
}

.sprite-view-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 2.4rem;
  height: 2.4rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}

.sprite-view-btn .sprites-ico {
  width: 1.15rem;
  height: 1.15rem;
}

.sprite-view-btn.is-active {
  background: var(--fn-yellow);
  color: #111;
}

.sprite-tool-btn {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(245, 197, 24, 0.55);
  border-radius: 10px;
  background: transparent;
  color: var(--fn-yellow);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.sprite-tool-btn .sprites-ico {
  width: 1.15rem;
  height: 1.15rem;
}

.sprite-tool-btn--primary {
  background: var(--fn-yellow);
  border-color: var(--fn-yellow);
  color: #111;
}

.sprite-tool-btn--check {
  position: relative;
  color: var(--muted);
  border-color: var(--border);
}

.sprite-tool-btn--check input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.sprite-tool-btn--check:has(input:checked) {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.65);
  color: #15803d;
}

.sprites-ico--cards {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='7' height='16' rx='1.5'/%3E%3Crect x='14' y='4' width='7' height='16' rx='1.5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='7' height='16' rx='1.5'/%3E%3Crect x='14' y='4' width='7' height='16' rx='1.5'/%3E%3C/svg%3E");
}

.sprites-ico--matrix {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

.sprites-ico--export {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
}

.sprites-ico--import {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='m7 14 5-5 5 5'/%3E%3Cpath d='M5 3h14'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='m7 14 5-5 5 5'/%3E%3Cpath d='M5 3h14'/%3E%3C/svg%3E");
}

.sprites-ico--reset {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E");
}

.sprites-ico--sync {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.2'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.2'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E");
}

.sprites-ico--missing {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
}

.sprites-ico--settings {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

.sprite-matrix {
  display: grid;
  gap: 1.15rem;
}

.sprite-matrix[hidden],
.sprite-grid[hidden] {
  display: none !important;
}

.sprite-type-section {
  display: grid;
  gap: 0.75rem;
}

.sprite-type-section.is-hidden {
  display: none !important;
}

.sprite-type-section__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.35rem 0 0.1rem;
}

.sprite-type-section__head h3 {
  margin: 0;
  font-family: 'Teko', sans-serif;
  font-size: 1.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.sprite-type-section__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.sprite-matrix-group {
  display: grid;
  gap: 0.7rem;
}

.sprite-matrix-group.is-hidden {
  display: none !important;
}

.sprite-matrix-group__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.sprite-matrix-group__head h4 {
  margin: 0;
  font-family: 'Teko', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}

.sprite-matrix-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.sprite-matrix-card {
  /* Contour aligné sur .sprite-locker__card */
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.62);
  padding: 0.7rem;
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  text-align: center;
}

.sprite-matrix-card.is-hidden {
  display: none;
}

.sprite-matrix-card.is-owned {
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.22);
}

.sprite-matrix-card.is-mastered {
  border-color: rgba(245, 197, 24, 0.55);
  box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.2);
}

.sprite-variant.is-owned {
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.22);
}

.sprite-variant.is-mastered {
  border-color: rgba(245, 197, 24, 0.55);
  box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.2);
}

.sprite-variant.is-coming-soon,
.sprite-matrix-card.is-coming-soon {
  opacity: 0.72;
  position: relative;
}

.sprite-matrix-card.is-coming-soon {
  pointer-events: none;
}

.sprite-soon-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f172a;
  background: linear-gradient(135deg, #7dd3fc, #a5b4fc);
  border: 1px solid rgba(15, 23, 42, 0.12);
}

.sprite-matrix-card .sprite-soon-badge {
  margin-left: 0;
}

.sprite-matrix-card__media {
  /* Même cadre image que .sprite-locker__media */
  width: 96px;
  height: 96px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.55);
  border: 0;
}

.sprite-matrix-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sprite-matrix-card h3 {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.2;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
}

.sprite-matrix-card__actions {
  display: grid;
  gap: 0.25rem;
  width: 100%;
}

.sprite-matrix-card__actions label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
}

/* display:flex écrase sinon l’attribut hidden → 3e case « Échanger » fantôme */
.sprite-matrix-card__actions label[hidden],
.sprite-variant__actions label[hidden],
.sprite-check-box--trade[hidden],
.sprite-toggle--trade[hidden] {
  display: none !important;
}

.sprite-matrix-card__actions input {
  accent-color: var(--fn-yellow);
}

.sprite-filter {
  display: grid;
  gap: 0.3rem;
  min-width: 160px;
}

.sprite-filter span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.sprite-filter select {
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  padding: 0.55rem 0.75rem;
  font: inherit;
}

.sprite-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 42px;
  color: #dce7f5;
  font-weight: 600;
  cursor: pointer;
}

.sprite-check input {
  accent-color: var(--fn-yellow);
}

.sprite-hint {
  margin: 0 0 0.9rem;
}

.sprite-grid {
  display: grid;
  gap: 1.25rem;
}

.sprite-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 0.95rem 1rem;
  display: grid;
  gap: 0.65rem;
}

.sprite-card.is-all-owned {
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
}

.sprite-card.is-all-mastered {
  border-color: var(--fn-yellow);
  box-shadow: 0 0 0 1px rgba(245, 197, 24, 0.4);
}

.sprite-matrix-group.is-all-owned .sprite-matrix-group__head h4 {
  color: #16a34a;
}

.sprite-matrix-group.is-all-mastered .sprite-matrix-group__head h4 {
  color: #ca8a04;
}

.sprite-card.is-hidden {
  display: none;
}

.sprite-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sprite-card__head h3 {
  margin: 0;
  font-size: 1.35rem;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.02em;
}

.sprite-rarity {
  display: inline-flex;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sprite-rarity--rare {
  background: rgba(20, 147, 255, 0.18);
  color: #7cc8ff;
  border: 1px solid rgba(20, 147, 255, 0.45);
}

.sprite-rarity--epic {
  background: rgba(168, 85, 247, 0.18);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.45);
}

.sprite-rarity--legendary {
  background: rgba(245, 197, 24, 0.16);
  color: #f5c518;
  border: 1px solid rgba(245, 197, 24, 0.45);
}

.sprite-rarity--mythic {
  background: rgba(255, 90, 90, 0.16);
  color: #ff8e8e;
  border: 1px solid rgba(255, 90, 90, 0.45);
}

.sprite-variants {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

@media (min-width: 720px) {
  .sprite-variants {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .sprite-variants {
    grid-template-columns: 1fr;
  }
}

.sprite-variant {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.62);
}

.sprite-variant__top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.sprite-variant__media {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.55);
  border: 0;
}

.sprite-variant__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sprite-variant__name {
  font-size: 0.95rem;
  font-weight: 700;
  min-width: 0;
  line-height: 1.15;
}

.sprite-variant__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}

.sprite-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.15rem;
  padding: 0.2rem 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: #c5d2e4;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.sprite-toggle input {
  appearance: none;
  -webkit-appearance: none;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  border-radius: 4px;
  border: 2px solid currentColor;
  background: transparent;
  display: grid;
  place-content: center;
  flex-shrink: 0;
}

.sprite-toggle input::after {
  content: '';
  width: 0.45rem;
  height: 0.28rem;
  border-left: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
}

.sprite-toggle--owned {
  color: #4ade80;
}

.sprite-toggle--mastered {
  color: #f5c518;
}

.sprite-toggle--trade,
.sprite-check-box--trade {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.85);
}

.sprite-toggle--owned:has(input:checked) {
  color: #86efac;
}

.sprite-toggle--mastered:has(input:checked) {
  color: #fde68a;
}

.sprite-toggle--trade:has(input:checked),
.sprite-check-box--trade.is-active,
.sprite-check-box--trade:has(input:checked) {
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.2);
  border-color: #0ea5e9;
}

.sprite-toggle--owned input:checked,
.sprite-toggle--mastered input:checked,
.sprite-toggle--trade input:checked {
  background: currentColor;
}

.sprite-toggle input:checked::after {
  opacity: 1;
}

.sprite-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.sprite-guide-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 1.05rem 1.15rem;
}

.sprite-guide-card h3 {
  margin: 0 0 0.65rem;
  font-size: 1.35rem;
  font-family: 'Teko', sans-serif;
}

.sprite-guide-card ol,
.sprite-guide-card ul {
  margin: 0;
  padding-left: 1.1rem;
  color: #d7e2f0;
  display: grid;
  gap: 0.35rem;
}

.sprite-external {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.1rem;
}

.sprite-credit {
  margin-top: 1rem;
  font-size: 0.85rem;
}

.sprite-friends-gate {
  display: grid;
  gap: 0.85rem;
  justify-items: start;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.sprite-friends-panel {
  display: grid;
  gap: 0.85rem;
}

.sprite-friends-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 0.55rem;
}

.sprite-friends-toolbar h2 {
  margin: 0;
}

.sprite-friends-open-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #b7d3ef;
  background: #eef6ff;
  color: #0b4f8a;
  font-weight: 800;
  cursor: pointer;
}

.sprite-friends-open-btn__badge {
  min-width: 1.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #dbeafe;
  color: #1e3a5f;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.sprite-friends-open-btn__badge.is-online {
  background: #dcfce7;
  color: #166534;
}

.sprite-friends-dash {
  display: grid;
  gap: 0.75rem;
}

/* hidden doit gagner sur display:grid (sinon Pseudo Epic / En ligne restent en vue ami) */
.sprite-friends-dash[hidden],
[data-sprite-friends].is-friend-page .sprite-friends-dash {
  display: none !important;
}

.sprite-friends-home-center {
  width: min(100%, 28rem);
  margin: 0 auto;
  display: grid;
  gap: 0.75rem;
}

.sprite-friends-pending {
  margin: 0;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: linear-gradient(160deg, #ffffff, #f3f8ff);
  padding: 0;
  overflow: hidden;
}

.sprite-friends-pending[hidden] {
  display: none !important;
}

.sprite-friends-pending__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: #152033;
}

.sprite-friends-pending__summary::-webkit-details-marker {
  display: none;
}

.sprite-friends-pending__summary::after {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid #3d5a80;
  border-bottom: 2px solid #3d5a80;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
  margin-left: 0.25rem;
}

.sprite-friends-pending[open] .sprite-friends-pending__summary::after {
  transform: rotate(-135deg);
}

.sprite-friends-pending__body {
  padding: 0 0.9rem 0.85rem;
  display: grid;
  gap: 0.75rem;
}

.sprite-friends-pending__section[hidden] {
  display: none !important;
}

.sprite-friends-pending__label {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3d5a80;
}

.sprite-friends-requests__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.sprite-friends-requests__head h3 {
  margin: 0;
}

.sprite-friends-chip {
  min-width: 1.4rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: #eef2f7;
  color: #334155;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.sprite-friends-chip.is-online {
  background: #dcfce7;
  color: #166534;
}

.sprite-friends-requests--live {
  border-color: #bfdbfe;
  background: linear-gradient(160deg, #ffffff, #f3f8ff);
  animation: sprite-friends-fade-in 0.35s ease both;
}

.sprite-friends-online {
  border: 1px solid #cfeedd;
  border-radius: 12px;
  background: linear-gradient(160deg, #ffffff, #f3fbf6);
  padding: 0.85rem 1rem;
  animation: sprite-friends-fade-in 0.35s ease both;
  margin: 0 0 0.85rem;
}

.sprite-friends-online__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  max-height: none;
}

.sprite-friends-online__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid #bbf7d0;
  background: #fff;
  color: #166534;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  animation: sprite-friends-fade-in 0.35s ease both;
}

.sprite-friends-item--enter {
  animation: sprite-friends-fade-in 0.3s ease both;
}

.sprite-friends-presence.is-online {
  animation: sprite-friends-pulse 1.8s ease-in-out infinite;
}

@keyframes sprite-friends-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sprite-friends-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sprite-friends-requests--live,
  .sprite-friends-online,
  .sprite-friends-online__chip,
  .sprite-friends-item--enter,
  .sprite-friends-presence.is-online {
    animation: none;
  }
}

.sprite-friends-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: end;
}

.sprite-friends-add .sprite-filter {
  margin: 0;
}

.sprite-friends-add input[type="text"] {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: #243447;
  padding: 0.55rem 0.7rem;
}

.sprite-friends-actions {
  margin: 0 0 0.85rem;
}

.sprite-friends-sync-epic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
  min-height: 2.2rem;
  margin: 0.55rem 0 0.15rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid #c5d0dc;
  border-radius: 10px;
  background: #fff;
  color: #243447;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.sprite-friends-sync-epic:hover {
  border-color: #8aa0b8;
  background: #f3f6fa;
}

.sprite-friends-sync-epic:disabled {
  opacity: 0.55;
  cursor: wait;
}

.sprite-friends-sync-epic .sprites-ico {
  width: 1rem;
  height: 1rem;
}

.sprite-friends-sync-epic--inline {
  width: 2.15rem;
  min-width: 2.15rem;
  min-height: 2.15rem;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  gap: 0;
}

.sprite-friends-sync-epic--inline .sprites-ico {
  width: 1.1rem;
  height: 1.1rem;
}

.sprite-friends-sync-epic--inline.is-spinning .sprites-ico,
.sprite-friends-sync-epic.is-spinning .sprites-ico {
  animation: sprites-sync-spin 0.8s linear infinite;
}

.sprite-friends-actions [data-sprite-friends-status] {
  min-height: 1.25em;
  margin: 0.35rem 0 0;
}

.sprite-friends-list-wrap,
.sprite-friends-view {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 0.85rem 0.95rem;
}

.sprite-friends-list-wrap {
  border: 0;
  background: transparent;
  padding: 0;
}

.sprite-friends-list-wrap h3,
.sprite-friends-view h3,
.sprite-friends-drawer__head h3 {
  margin: 0;
  font-family: 'Teko', sans-serif;
  font-size: 1.35rem;
}

[data-sprite-friends].is-friend-page .sprite-friends-toolbar__lead {
  display: none;
}

[data-sprite-friends].is-friend-page .sprite-friends-view {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0.35rem 1rem 1rem;
  box-sizing: border-box;
}

body.sprites-app #sprites-friends.is-friend-page {
  padding-left: 0.85rem;
  padding-right: 0.85rem;
  box-sizing: border-box;
}

body.sprites-app #sprites-friends.is-friend-page .sprite-friends-view__head {
  margin-bottom: 0.85rem;
}

body.sprites-app #sprites-friends.is-friend-page .sprite-progress--compact {
  margin-left: 0;
  margin-right: 0;
}

.sprite-friends-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 120;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 100dvh;
  height: 100lvh;
  max-height: 100dvh;
  max-height: 100lvh;
  margin: 0;
  padding: 0;
  transform: none;
  -webkit-transform: none;
}

.sprite-friends-drawer[hidden] {
  display: none !important;
}

body.sprites-app .sprite-friends-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  height: 100dvh !important;
  height: 100lvh !important;
  max-height: 100dvh !important;
  max-height: 100lvh !important;
}

.sprite-friends-drawer__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.45);
  cursor: pointer;
}

.sprite-friends-drawer__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 360px);
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: calc(0.75rem + var(--sat, env(safe-area-inset-top, 0px))) 0.9rem 0;
  background: #fff;
  box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  min-height: 0;
}

.sprite-friends-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.sprite-friends-drawer__head h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.sprite-friends-drawer__head [data-sprite-friends-sync-epic-drawer].is-spinning .sprites-ico--sync {
  animation: sprite-friends-spin 0.8s linear infinite;
}

@keyframes sprite-friends-spin {
  to {
    transform: rotate(360deg);
  }
}

.sprite-friends-drawer__add {
  flex: 0 0 auto;
  margin: 0.15rem 0 0.75rem;
  padding: 0.85rem 0.8rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(8, 16, 32, 0.55) 0%, rgba(8, 16, 32, 0.78) 100%),
    url('/assets/images/sprites-friends-bg.webp') center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.sprite-friends-add--drawer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: end;
}

.sprite-friends-add__field {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  min-width: 0;
}

.sprite-friends-add__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffe56a;
}

.sprite-friends-add--drawer input[type="text"] {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #162846;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
}

.sprite-friends-add--drawer input[type="text"]::placeholder {
  color: #6a7b93;
}

.sprite-friends-add__submit {
  min-height: 2.55rem;
  padding-inline: 0.9rem;
  border-radius: 10px;
  white-space: nowrap;
}

.sprite-friends-drawer__add [data-sprite-friends-status] {
  min-height: 1.2em;
  margin: 0.4rem 0 0;
  color: rgba(232, 238, 248, 0.9);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Zone scrollable : invitations en haut, amis poussés vers le bas */
.sprite-friends-drawer__panel [data-sprite-friends-home] {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(5.5rem + var(--sab, env(safe-area-inset-bottom, 0px)));
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sprite-friends-drawer__invites {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 0.7rem 0.75rem 0.8rem;
  border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: linear-gradient(160deg, #faf5ff 0%, #eff6ff 100%);
  box-shadow: 0 6px 16px rgba(76, 29, 149, 0.1);
}

.sprite-friends-drawer__invites[hidden] {
  display: none !important;
}

.sprite-friends-drawer__invites-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.sprite-friends-drawer__invites-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #4c1d95;
}

.sprite-friends-drawer__invites-section {
  display: grid;
  gap: 0.4rem;
}

.sprite-friends-drawer__invites-section + .sprite-friends-drawer__invites-section {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(167, 139, 250, 0.28);
}

.sprite-friends-drawer__invites-section[hidden] {
  display: none !important;
}

.sprite-friends-drawer__invites .sprite-friends-item--request {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 0.55rem 0.6rem;
}

.sprite-friends-drawer__invites .sprite-friends-request-actions .btn {
  flex: 1 1 auto;
  min-height: 2.35rem;
  font-weight: 700;
}

.sprite-friends-drawer__panel .sprite-friends-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.sprite-friends-drawer__panel .sprite-friends-list {
  padding-bottom: 0.5rem;
}

.sprite-friends-drawer__panel [data-sprite-friends-home]::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.sprites-friends-drawer-open {
  overflow: hidden;
}

.sprite-friends-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.sprite-friends-empty {
  color: #9fb0c5;
  font-size: 0.92rem;
}

.sprite-friends-requests {
  margin: 0 0 1rem;
  border: 1px solid var(--border, rgba(22, 40, 70, 0.12));
  border-radius: 12px;
  background: #fff;
  padding: 0.85rem 1rem;
}

.sprite-friends-requests h3 {
  margin: 0 0 0.65rem;
  font-family: 'Teko', sans-serif;
  font-size: 1.35rem;
}

.sprite-friends-item--request {
  grid-template-columns: 1fr;
  gap: 0.45rem;
}

.sprite-friends-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.sprite-friends-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.35rem;
  align-items: stretch;
}

.sprite-friends-item.is-active .sprite-friends-item__open {
  border-color: #8aa0b8;
  background: #eef2f7;
}

.sprite-friends-item__open {
  text-align: left;
  border: 1px solid var(--border, #d5dde8);
  border-radius: 10px;
  background: #fff;
  color: #243447;
  padding: 0.55rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  overflow: visible;
  cursor: pointer;
}

.sprite-friends-item__text {
  display: grid;
  gap: 0.1rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

.sprite-friends-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
}

.sprite-friends-avatar {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  background: #e8eef6;
  border: 1px solid #d5dde8;
}

.sprite-friends-avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  border-color: transparent;
}

.sprite-friends-avatar-wrap .sprite-friends-presence {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0.55rem;
  height: 0.55rem;
  box-shadow: 0 0 0 2px #fff;
}

.sprite-friends-online__chip .sprite-friends-avatar-wrap {
  width: 1.55rem;
  height: 1.55rem;
}

.sprite-friends-online__chip .sprite-friends-avatar {
  width: 1.55rem;
  height: 1.55rem;
}

.sprite-friends-online__chip .sprite-friends-avatar--fallback {
  font-size: 0.7rem;
}

.sprite-friends-presence {
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}

.sprite-friends-presence.is-online {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.sprite-friends-avatar-wrap .sprite-friends-presence.is-online {
  box-shadow: 0 0 0 2px #fff;
}

.sprite-friends-icon-btn {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  width: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sprite-friends-item__ghost {
  color: #5b6cff;
}

.sprite-friends-item__remove {
  color: #e35d5d;
  font-size: 1.25rem;
  line-height: 1;
}

.sprite-friends-item__locker {
  color: #334155;
}

.sprite-friends-item__locker-img {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
}

.sprite-locker-page__title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.sprite-locker-page__title-row h2 {
  margin: 0;
}

.sprite-locker-page__back {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
}

.sprite-locker-page.is-friend-view .sprite-locker__check {
  pointer-events: none;
  opacity: 0.9;
}

.sprite-locker-page.is-friend-view .sprite-locker-viewer__check {
  pointer-events: none;
}

/* Vue ami : pas besoin de la pastille filtre (déjà forcés obtenus). */
.sprite-locker-page.is-friend-view .sprite-locker__filter--chip {
  display: none !important;
}

.sprite-locker-page.is-friend-view .sprite-locker__search-row {
  grid-template-columns: 1fr;
}

/* Casier ami vide : cases fantômes (preuve visuelle, sans texte accusateur). */
.sprite-locker__empty {
  margin: 0.15rem 0 0.4rem;
}

.sprite-locker__empty[hidden] {
  display: none !important;
}

.sprite-locker__empty-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.sprite-locker__empty-slot {
  display: block;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  background:
    linear-gradient(
      145deg,
      rgba(15, 23, 42, 0.35) 0%,
      rgba(30, 41, 59, 0.22) 55%,
      rgba(15, 23, 42, 0.4) 100%
    );
  box-shadow: inset 0 0 0 1px rgba(2, 6, 23, 0.35);
  position: relative;
  overflow: hidden;
}

.sprite-locker__empty-slot::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.28);
}

.sprite-locker-page.is-friend-empty .sprite-locker__grid {
  display: none;
}

@media (max-width: 640px) {
  .sprite-locker__empty-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sprite-locker__empty-slot:nth-child(n + 7) {
    display: none;
  }
}

.sprite-friends-back {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.sprite-checklist-placeholder {
  padding: 1.1rem 1rem;
}

.sprite-friends-checklist-host {
  margin-top: 0.85rem;
}

.sprite-friends-checklist-host #checklist {
  margin: 0;
  padding: 0;
  max-width: none;
}

.sprite-friends-checklist-host #checklist > .shop-head,
.sprite-friends-checklist-host #checklist > .sprite-credit {
  display: none;
}

.sprite-friends-item__name {
  font-weight: 600;
  color: #152033;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.sprite-friends-item__meta {
  font-size: 0.8rem;
  color: #9fb0c5;
}

.sprite-friends-view__head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.sprite-friends-view__title h3 {
  margin: 0;
}

.sprite-friends-view__name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.sprite-friends-view__name-row h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sprite-friends-info {
  position: relative;
  flex: 0 0 auto;
}

.sprites-app-bar__friend-info {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 50;
}

.sprites-app-bar__friend-info[hidden] {
  display: none !important;
}

/* Même grosseur que le logo amis (.sprites-app-bar__icon-btn) */
.sprites-app-bar__friend-info .sprite-friends-info__btn {
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #f4f7fc;
  color: #24344d;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  padding: 0;
  overflow: visible;
}

.sprites-app-bar__friend-info .sprite-friends-info__btn:hover,
.sprites-app-bar__friend-info.is-open .sprite-friends-info__btn {
  border-color: #8aa0b8;
  background: #eef2f7;
  color: #152033;
}

.sprite-friends-info__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  left: auto;
  z-index: 80;
  min-width: 14rem;
  max-width: min(20rem, calc(100vw - 1.25rem));
  padding: 0.6rem 0.75rem 0.7rem;
  border: 1px solid rgba(22, 40, 70, 0.12);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.sprite-friends-info__menu[hidden] {
  display: none !important;
}

.sprite-friends-info__text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #3d5168;
  font-weight: 600;
}

.sprite-friends-info__text:empty {
  display: none;
}

.sprite-friends-info__legend-title {
  margin: 0.55rem 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.sprite-friends-info__text:empty + .sprite-friends-info__legend-title {
  margin-top: 0;
}

.sprite-friends-info__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.sprite-friends-info__legend li {
  display: grid;
  grid-template-columns: 0.85rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
  font-size: 0.78rem;
  line-height: 1.3;
  color: #334155;
  font-weight: 600;
}

.sprite-friends-info__legend strong {
  color: #0f172a;
  font-weight: 800;
}

.sprite-friends-info__swatch {
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.12rem;
  border-radius: 3px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  flex-shrink: 0;
}

.sprite-friends-info__swatch--owned {
  background: #22c55e;
  border-color: rgba(21, 128, 61, 0.55);
}

.sprite-friends-info__swatch--mastered {
  background: #f5c518;
  border-color: rgba(180, 83, 9, 0.45);
}

.sprite-friends-info__swatch--mauve {
  background: #a855f7;
  border-color: rgba(126, 34, 206, 0.55);
}

.sprite-friends-info__swatch--trade {
  background: #facc15;
  border-color: rgba(161, 98, 7, 0.5);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.15);
}

.sprite-friends-info__swatch--star {
  background: transparent;
  border: 1.5px solid #a855f7;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25);
}

.sprite-friends-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(8, 14, 24, 0.55);
}

.sprite-friends-modal[hidden] {
  display: none !important;
}

.sprite-friends-modal__card {
  width: min(100%, 22rem);
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(22, 40, 70, 0.12);
  padding: 1.15rem 1.2rem;
  box-shadow: 0 16px 40px rgba(8, 14, 24, 0.22);
}

.sprite-friends-modal__card p {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  color: #162846;
}

.sprite-friends-modal__actions {
  display: flex;
  gap: 0.55rem;
  justify-content: flex-end;
}

.sprite-stats-panel {
  display: grid;
  gap: 0.55rem;
  padding-bottom: 0.5rem;
  min-width: 0;
  min-height: 100%;
}

.sprite-stats-status {
  margin: 0;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  background: #fff5f5;
  border: 1px solid rgba(227, 93, 93, 0.35);
  color: #b42318;
  font-size: 0.86rem;
  font-weight: 600;
}

.sprite-stats-status[hidden] {
  display: none !important;
}

.sprite-stats-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  min-height: calc(100dvh - 9.5rem);
  min-width: 0;
  padding-top: 0.85rem;
}

.sprite-stats-stack {
  width: min(100%, 26rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  margin: 0 auto;
  flex: 1 1 auto;
  min-height: 0;
}

.sprite-stats-controls[hidden] {
  display: none !important;
}

/* Tes stats toujours en haut ; ami / comparaison juste en dessous */

.sprite-stats-compare-zone {
  display: none;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100dvh - 11rem);
}

.sprite-stats-compare-zone.is-idle {
  display: none !important;
}

.sprite-stats-compare-zone.is-open {
  display: flex;
  animation: sprite-stats-show-in 0.08s ease-out;
}

.sprite-stats-compare-zone .sprite-stats-show {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Chrome sticky sans plaque blanche derrière */
.sprite-stats-compare-zone__chrome {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  gap: 0.4rem;
  padding: 0.35rem 0.15rem 0.55rem;
  margin: 0 -0.05rem;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

.sprite-stats-compare-zone__body {
  flex: 0 0 auto;
  min-height: 0;
  padding: 0.15rem 0.05rem 0.65rem;
  display: grid;
  gap: 0.4rem;
}

.sprite-stats-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.65rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(22, 40, 70, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #111;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.sprite-stats-back-btn__icon {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  color: #111;
}

.sprite-stats-back-btn:hover,
.sprite-stats-back-btn:focus-visible {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
  outline: none;
}

.sprite-stats-back-btn:active {
  transform: translateY(0) scale(0.995);
}

@keyframes sprite-stats-show-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown visible seulement sans ami ; caché dès qu’un nom est choisi */
.sprite-stats-rest {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 10rem;
}

.sprite-stats-home.is-friend-open .sprite-stats-rest {
  display: none !important;
}

.sprite-stats-home.is-friend-open .sprite-stats-compare-zone.is-open {
  margin-top: 0.15rem;
}

.sprite-stats-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(100%, 18rem);
  transform: translate(-50%, -50%);
}

.sprite-stats-friend-slot {
  width: 100%;
  display: flex;
  justify-content: center;
}

.sprite-stats-friend-pick {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  width: min(100%, 18rem);
}

.sprite-stats-friend-pick span,
.sprite-stats-rank__sort span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5a6b82;
  text-align: center;
}

.sprite-stats-friend-pick select,
.sprite-stats-rank__sort select {
  width: 100%;
  margin-top: 0;
  border: 1px solid rgba(22, 40, 70, 0.14);
  border-radius: 14px;
  padding: 0.52rem 0.75rem;
  min-height: 2.35rem;
  background: rgba(255, 255, 255, 0.97);
  color: inherit;
  font-size: 0.9rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  transition:
    border-color 0.2s ease,
    box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.2s ease,
    background 0.2s ease;
}

.sprite-stats-friend-pick select:hover {
  transform: translateY(-1px);
  border-color: rgba(18, 32, 51, 0.28);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.sprite-stats-friend-pick select:focus {
  outline: none;
  border-color: #122033;
  background: #fff;
  transform: translateY(-1px) scale(1.01);
  box-shadow:
    0 0 0 3px rgba(18, 32, 51, 0.12),
    0 12px 26px rgba(15, 23, 42, 0.14);
}

.sprite-stats-friend-pick select:active {
  transform: translateY(0) scale(0.995);
}

.sprite-stats-show {
  width: 100%;
  display: grid;
  gap: 0.45rem;
}

.sprite-stats-show[hidden] {
  display: none !important;
}

.sprite-stats-mode-rail {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem;
  align-items: center;
  gap: 0.4rem;
}

.sprite-stats-mode-nav {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(22, 40, 70, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #243447;
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  transition: transform 0.15s ease, background 0.15s ease;
}

.sprite-stats-mode-nav:hover,
.sprite-stats-mode-nav:focus-visible {
  transform: scale(1.05);
  background: #fff;
  outline: none;
}

/* 1 seul mode visible à la fois */
.sprite-stats-mode-current {
  margin: 0;
  min-height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #122033;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgba(18, 32, 51, 0.18);
  user-select: none;
}


.sprite-stats-view-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  padding: 0.2rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(22, 40, 70, 0.1);
}

.sprite-stats-view-tab {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #5a6b82;
  min-height: 2.1rem;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.sprite-stats-view-tab.is-active {
  background: #122033;
  color: #fff;
  box-shadow: 0 6px 14px rgba(18, 32, 51, 0.16);
}

.sprite-stats-slides {
  min-width: 0;
  touch-action: pan-y;
}

.sprite-stats-slide[hidden] {
  display: none !important;
}

.sprite-stats-slide.is-active {
  animation: sprite-stats-slide-in 0.22s ease;
}

@keyframes sprite-stats-slide-in {
  from {
    opacity: 0.35;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sprite-stats-mode-dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.1rem 0 0.2rem;
}

.sprite-stats-mode-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: rgba(18, 32, 51, 0.22);
  cursor: pointer;
}

.sprite-stats-mode-dot.is-active {
  width: 1rem;
  background: #122033;
}

.sprite-stats-bp,
.sprite-stats-bp[hidden] {
  display: none !important;
}

.sprite-stats-card {
  border: 1px solid rgba(22, 40, 70, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  padding: 0.55rem 0.75rem;
  width: 100%;
  min-width: 0;
  height: fit-content;
  align-self: center;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.sprite-stats-card--self {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  position: relative;
  z-index: 2;
}

.sprite-stats-card--locker {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  position: relative;
  z-index: 2;
}

.sprite-stats-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.3rem;
}

.sprite-stats-card h3 {
  margin: 0;
  font-family: 'Teko', sans-serif;
  font-size: 1.15rem;
  line-height: 1;
}

.sprite-stats-card__name {
  margin: 0;
  font-weight: 700;
  font-size: 0.82rem;
  color: #5a6b82;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sprite-stats-grid {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 0.16rem 0.5rem;
  align-content: start;
  height: auto;
}

.sprite-stats-grid dt {
  margin: 0;
  color: #6b7c93;
  font-size: 0.76rem;
  line-height: 1.2;
}

.sprite-stats-grid dd {
  margin: 0;
  text-align: right;
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1.2;
  color: #152033;
}

.sprite-stats-empty {
  grid-column: 1 / -1;
  color: #9fb0c5;
  font-size: 0.9rem;
}

.sprite-stats-compare {
  border: 1px solid rgba(22, 40, 70, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  padding: 0.65rem 0.75rem;
  min-width: 0;
  height: auto;
  overflow-x: auto;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.sprite-stats-compare h3 {
  margin: 0 0 0.45rem;
  font-family: 'Teko', sans-serif;
  font-size: 1.15rem;
  line-height: 1;
}

.sprite-stats-compare__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 0.35rem;
  align-items: center;
  padding: 0.28rem 0;
  border-top: 1px solid rgba(22, 40, 70, 0.08);
  font-size: 0.84rem;
}

.sprite-stats-compare__row.is-head {
  border-top: none;
  font-size: 0.8rem;
  color: #6b7c93;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sprite-stats-compare__label {
  font-weight: 600;
}

.sprite-stats-compare__val {
  text-align: right;
  font-weight: 700;
}

.sprite-stats-compare__val.is-win {
  color: #1a9d5c;
}

.sprite-stats-compare__val.is-lose {
  color: #c44b4b;
}

.sprite-stats-rank {
  border: 1px solid rgba(22, 40, 70, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  padding: 0.9rem 0.85rem 1rem;
  min-width: 0;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
}

.sprite-stats-rank__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  padding: 0 0.2rem;
}

.sprite-stats-rank__head h3 {
  margin: 0;
  font-family: 'Teko', sans-serif;
  font-size: 1.45rem;
}

.sprite-stats-rank__sort {
  min-width: 10rem;
}

.sprite-stats-rank__note {
  display: none;
}

.sprite-stats-rank__table {
  display: grid;
  gap: 0.35rem;
  overflow-x: auto;
}

.sprite-stats-rank__row {
  display: grid;
  grid-template-columns: 2.2rem minmax(8rem, 1.7fr) repeat(4, minmax(3.2rem, 0.7fr));
  gap: 0.35rem;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.sprite-stats-rank__row.is-head {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7c93;
  padding-bottom: 0.25rem;
}

.sprite-stats-rank__row.is-clickable {
  cursor: pointer;
}

.sprite-stats-rank__row.is-clickable:hover,
.sprite-stats-rank__row.is-clickable:focus-visible {
  background: #f3f7fc;
  border-color: rgba(22, 40, 70, 0.1);
  transform: translateY(-1px);
}

.sprite-stats-rank__row.is-self {
  background: rgba(245, 197, 24, 0.16);
  border-color: rgba(245, 197, 24, 0.35);
}

.sprite-stats-rank__row.is-selected {
  background: #eef5ff;
  border-color: #bfd3ef;
}

.sprite-stats-rank__row:disabled {
  cursor: default;
}

.sprite-stats-rank__pos {
  font-weight: 800;
  color: #5a6b82;
  text-align: center;
}

.sprite-stats-rank__pos.is-gold {
  color: #b8860b;
}

.sprite-stats-rank__pos.is-silver {
  color: #6b7c93;
}

.sprite-stats-rank__pos.is-bronze {
  color: #a16207;
}

.sprite-stats-rank__player {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.sprite-stats-rank__avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
}

.sprite-stats-rank__avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
}

.sprite-stats-rank__presence {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 2px #fff;
}

.sprite-stats-rank__presence.is-online {
  background: #22c55e;
}

.sprite-stats-rank__name {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.sprite-stats-rank__name strong {
  font-weight: 800;
  color: #152033;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sprite-stats-rank__name em {
  font-style: normal;
  font-weight: 700;
  color: #16a34a;
  font-size: 0.72rem;
}

.sprite-stats-rank__name em.is-you {
  color: #8a6a00;
}

.sprite-stats-rank__stat {
  text-align: right;
  font-weight: 800;
  color: #243447;
}

.sprite-stats-rank__row.is-head > span:nth-child(n + 3) {
  text-align: right;
}

@media (max-width: 700px) {
  .sprite-stats-home {
    min-height: calc(100dvh - 10.5rem);
    padding-top: 0.7rem;
  }

  .sprite-stats-stack {
    width: min(100%, 22.5rem);
  }

  .sprite-stats-rest {
    min-height: 8.5rem;
  }

  .sprite-stats-grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: 0.22rem 0.45rem;
  }

  .sprite-stats-rank__row {
    grid-template-columns: 1.8rem minmax(5.5rem, 1.4fr) repeat(4, minmax(2.6rem, 0.65fr));
    font-size: 0.82rem;
  }
}

.sprite-progress--compact {
  margin-top: 0.75rem;
}

.sprite-hint.is-error {
  color: #ff9d9d;
}

.sprite-matrix-card.is-trade-note,
.sprite-variant.is-trade-note {
  box-shadow: inset 0 0 0 1px rgba(120, 200, 255, 0.55);
}

#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-trade-note,
#checklist.is-friend-view .sprite-toggle--owned.is-trade-note {
  box-shadow: 0 0 0 2px rgba(120, 200, 255, 0.85);
}

/* Vue ami : Obtenu + Maîtrisé mauves */
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--owned.is-you-have,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--mastered.is-you-have {
  color: #a855f7 !important;
  border-color: rgba(168, 85, 247, 0.5);
  background: transparent !important;
}

#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have [data-owned-label],
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--owned.is-you-have [data-owned-label],
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have span,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--mastered.is-you-have span {
  color: #a855f7 !important;
}

#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have input,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--owned.is-you-have input,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have input,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--mastered.is-you-have input {
  display: inline-grid;
  place-content: center;
  width: 0.95rem;
  height: 0.95rem;
  min-width: 0.95rem;
  min-height: 0.95rem;
  border: 2px solid #a855f7 !important;
  background: #fff;
  color: #a855f7 !important;
  flex-shrink: 0;
}

/* Échanger : jaune + texte noir (très visible) */
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--trade.is-you-have {
  color: #111 !important;
  border-color: #ca8a04 !important;
  background: #f5c518 !important;
}

#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have [data-trade-label],
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--trade.is-you-have [data-trade-label],
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have span,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--trade.is-you-have span {
  color: #111 !important;
  font-weight: 800;
}

#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have input,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--trade.is-you-have input {
  display: inline-grid;
  place-content: center;
  width: 0.95rem;
  height: 0.95rem;
  min-width: 0.95rem;
  min-height: 0.95rem;
  border: 2px solid #111 !important;
  background: #fff !important;
  color: #111 !important;
  flex-shrink: 0;
}

/* Offre reçue : reste MAUVE même cochée (sinon on dirait un Obtenu normal). */
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have.is-trade-incoming:has(input:checked),
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--owned.is-you-have.is-trade-incoming:has(input:checked),
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have.is-trade-incoming:has(input:checked),
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--mastered.is-you-have.is-trade-incoming:has(input:checked) {
  color: #7e22ce !important;
  border-color: #a855f7 !important;
  background: rgba(168, 85, 247, 0.18) !important;
}

#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have.is-trade-incoming input:checked,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--owned.is-you-have.is-trade-incoming input:checked,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have.is-trade-incoming input:checked,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--mastered.is-you-have.is-trade-incoming input:checked {
  background: #a855f7 !important;
  border-color: #7e22ce !important;
  color: #a855f7 !important;
}

#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have.is-trade-incoming [data-owned-label],
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--owned.is-you-have.is-trade-incoming [data-owned-label],
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have.is-trade-incoming span,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--mastered.is-you-have.is-trade-incoming span {
  color: #7e22ce !important;
}

/* Sélection échange (envoi) : couleurs normales une fois coché */
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have:not(.is-trade-incoming):has(input:checked),
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--owned.is-you-have:not(.is-trade-incoming):has(input:checked) {
  color: #16a34a !important;
  border-color: #16a34a;
  background: rgba(34, 197, 94, 0.12) !important;
}

#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have:not(.is-trade-incoming) input:checked,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--owned.is-you-have:not(.is-trade-incoming) input:checked {
  background: #22c55e !important;
  border-color: #15803d !important;
  color: #22c55e !important;
}

#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have:not(.is-trade-incoming):has(input:checked),
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--mastered.is-you-have:not(.is-trade-incoming):has(input:checked) {
  color: #b45309 !important;
  border-color: #ca8a04;
  background: rgba(245, 197, 24, 0.16) !important;
}

#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have:not(.is-trade-incoming) input:checked,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--mastered.is-you-have:not(.is-trade-incoming) input:checked {
  background: #f5c518 !important;
  border-color: #ca8a04 !important;
  color: #f5c518 !important;
}

.sprite-incoming-trades {
  margin: 0.55rem 0 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1.5px solid rgba(168, 85, 247, 0.65);
  background: rgba(168, 85, 247, 0.12);
  color: #5b21b6;
}

.sprite-incoming-trades strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}

.sprite-incoming-trades ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.sprite-incoming-trades__jump {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 8px;
  background: #fff;
  color: #5b21b6;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.sprite-incoming-trades__jump em {
  font-style: normal;
  font-weight: 800;
  color: #7e22ce;
}

.sprite-incoming-trades__hint {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: #6b21a8;
}

.sprite-variant.is-trade-incoming,
.sprite-matrix-card.is-trade-incoming {
  box-shadow: inset 0 0 0 2px rgba(168, 85, 247, 0.75);
  background: rgba(168, 85, 247, 0.06);
}

.sprite-variant.is-trade-incoming-flash,
.sprite-matrix-card.is-trade-incoming-flash,
.sprite-card.is-trade-incoming-flash {
  animation: sprite-trade-flash 1.6s ease;
}

@keyframes sprite-trade-flash {
  0%,
  100% {
    box-shadow: inset 0 0 0 2px rgba(168, 85, 247, 0.75);
  }
  40% {
    box-shadow: inset 0 0 0 3px #a855f7, 0 0 0 3px rgba(168, 85, 247, 0.35);
  }
}

#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have:has(input:checked),
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--trade.is-you-have:has(input:checked) {
  color: #111 !important;
  border-color: #a16207 !important;
  background: #facc15 !important;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.55);
}

#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have input:checked,
#checklist:is(.is-friend-view, .is-incoming-offers) .sprite-toggle--trade.is-you-have input:checked {
  background: #111 !important;
  border-color: #111 !important;
  color: #facc15 !important;
}

/* Contour bleu : lui l’a, toi non — autour de l’image */
#checklist.is-friend-view .sprite-matrix-card.is-friend-star::before,
#checklist.is-friend-view .sprite-variant.is-friend-star::before {
  content: none;
}

#checklist.is-friend-view .sprite-matrix-card.is-friend-star .sprite-matrix-card__media,
#checklist.is-friend-view .sprite-variant.is-friend-star .sprite-variant__media {
  border: 2px solid #3b82f6;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.35);
}

#checklist.is-friend-view .shop-head h2::after {
  content: ' (vue ami)';
  font-size: 0.7em;
  color: #9fb0c5;
}

@media (max-width: 900px) {
  .sprite-progress,
  .sprite-guide-grid,
  .sprite-type-section__cards {
    grid-template-columns: 1fr;
  }

}

/* ——— Webapp shell edge-to-edge (PWA iOS) ——— */
/*
  Ce qui bloquait haut/bas :
  1) padding safe-area mal placé → bandes / contenu “monté”
  2) height:100dvh fixe → splash plus court que l’écran
  3) header sans padding mais top:0 → texte sous l’heure + fond qui “fuit”
  Pattern correct : chrome (header/footer/splash) collé aux bords ;
  petites safe-areas natives UNIQUEMENT en padding interne (fond peint dedans).
*/
html.is-webapp:has(body.sprites-app:not(.sprites-app--gate)) {
  /* Même --cover-h que le bootsplash (100lvh + JS screen.height) */
  --cover-h: 100lvh;
  background: #ffffff !important;
  height: var(--cover-h) !important;
  min-height: var(--cover-h) !important;
  max-height: none;
  /* hidden : pas de scrollbar fenêtre (PC) ; scroll dans .sprites-app-main */
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html.is-webapp:has(body.sprites-app:not(.sprites-app--gate))::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

html.is-webapp:has(body.sprites-app:not(.sprites-app--gate)) body.sprites-app {
  --cover-h: 100lvh;
  height: var(--cover-h) !important;
  min-height: var(--cover-h) !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  /* Body blanc : le bleu reste seulement dans le contenu scrollable */
  background-color: #ffffff !important;
  background-image: none !important;
}

html.is-webapp:has(body.sprites-app:not(.sprites-app--gate)) body.sprites-app::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

html.is-webapp:has(body.sprites-app--gate) {
  background: #071225 !important;
  /* Login : aucune réserve “barre Safari” fantôme */
  --sat: 0px !important;
  --sab: 0px !important;
}

body.sprites-app {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sprites-app-bar-h: 58px;
  --sprites-app-tabs-content-h: 0px;
  --sprites-app-tabs-visual-h: 0px;
  --sprites-app-bar-total-h: calc(var(--sprites-app-bar-h) + var(--sat));
  /* 0 = pas de réserve qui remonte l’UI ; le menu est en overlay collé au bas */
  --sprites-app-tabs-h: 0px;
  --cover-h: 100lvh;
  /* Voile blanc fort sur les fonds image (News / Amis / Stats) */
  --sprites-bg-overlay: rgba(255, 255, 255, 0.92);
  --surface: #ffffff;
  --border: rgba(22, 40, 70, 0.12);
  --muted: #5b6b82;
  --text: #152033;
  color: var(--text);
  position: relative !important;
  width: 100% !important;
  height: var(--cover-h, 100lvh) !important;
  min-height: var(--cover-h, 100lvh) !important;
  max-height: none !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  /* Blanc jusqu’au bord bas (home indicator) — plus de fuite bleue */
  background: #ffffff !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body.sprites-app input,
body.sprites-app select,
body.sprites-app textarea {
  touch-action: manipulation;
  font-size: 16px; /* évite le zoom auto iOS sur focus */
}

body.sprites-app .site-header,
body.sprites-app .site-footer,
body.sprites-app .characters,
body.sprites-app .character,
body.sprites-app .fn-stage,
body.sprites-app .fn-char,
body.sprites-app .fn-spark {
  display: none !important;
}

body.sprites-app--gate {
  --sprites-app-bar-h: 0px;
  --sprites-app-bar-total-h: 0px;
  --sprites-app-tabs-h: 0px;
  --sat: 0px !important;
  --sab: 0px !important;
  color: #fff;
  background: #071225 !important;
  background-color: #071225 !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.sprites-app--gate .sprites-app-main,
body.sprites-app--gate .sprites-app-bar,
body.sprites-app--gate .sprites-app-tabs {
  display: none !important;
}

/* Icônes app (CSS masks) */
.sprites-ico {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.sprites-ico--grid {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

.sprites-ico--friends {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.sprites-ico--guide {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.1 9a3 3 0 1 1 4.4 2.6c-.8.5-1.5 1.1-1.5 2.1'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.1 9a3 3 0 1 1 4.4 2.6c-.8.5-1.5 1.1-1.5 2.1'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.sprites-ico--stats {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V9'/%3E%3Cpath d='M10 19V5'/%3E%3Cpath d='M16 19v-7'/%3E%3Cpath d='M22 19V8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V9'/%3E%3Cpath d='M10 19V5'/%3E%3Cpath d='M16 19v-7'/%3E%3Cpath d='M22 19V8'/%3E%3C/svg%3E");
}

.sprites-ico--news {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M10 6h8'/%3E%3Cpath d='M10 10h8'/%3E%3Cpath d='M10 14h4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M10 6h8'/%3E%3Cpath d='M10 10h8'/%3E%3Cpath d='M10 14h4'/%3E%3C/svg%3E");
}

.sprites-ico--globe {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

.sprites-ico--shop {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

.sprites-ico--map {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l-6 3V6l6-3 6 3 6-3v15l-6 3-6-3z'/%3E%3Cpath d='M9 3v15'/%3E%3Cpath d='M15 6v15'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l-6 3V6l6-3 6 3 6-3v15l-6 3-6-3z'/%3E%3Cpath d='M9 3v15'/%3E%3Cpath d='M15 6v15'/%3E%3C/svg%3E");
}

.sprites-ico--modes {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' x2='10' y1='12' y2='12'/%3E%3Cline x1='8' x2='8' y1='10' y2='14'/%3E%3Cline x1='15' x2='15.01' y1='13' y2='13'/%3E%3Cline x1='18' x2='18.01' y1='11' y2='11'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' x2='10' y1='12' y2='12'/%3E%3Cline x1='8' x2='8' y1='10' y2='14'/%3E%3Cline x1='15' x2='15.01' y1='13' y2='13'/%3E%3Cline x1='18' x2='18.01' y1='11' y2='11'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
}

.sprites-ico--user {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* Toile d’araignée (voir les esprits d’un ami) */
.sprites-ico--ghost,
.sprites-ico--web {
  mask-image: url('/assets/images/sprite-web.png');
  -webkit-mask-image: url('/assets/images/sprite-web.png');
}

.sprites-ico--back {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
}

/* ——— Bootlogo (réouverture app) : hachures + logo (pas d’esprits) ——— */
.sprites-bootlogo {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: #071225;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.38s ease;
  overflow: hidden;
}

.sprites-bootlogo.is-done {
  opacity: 0;
}

.sprites-bootlogo__hatch {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #071225;
  background-image: repeating-linear-gradient(
    -18deg,
    rgba(255, 255, 255, 0.06) 0 14px,
    transparent 14px 34px
  );
  background-repeat: repeat;
}

.sprites-bootlogo__logo {
  position: relative;
  z-index: 2;
  display: block;
  width: min(86vw, 24rem);
  height: auto;
  object-fit: contain;
  filter: none;
}

/* Shell connecté : zone scroll entre header et footer (hauteurs déjà + safe-area) */
body.sprites-app:not(.sprites-app--gate) .sprites-app-main {
  position: fixed !important;
  top: var(--sprites-app-bar-total-h);
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  /* Scrollbar invisible partout */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Bleu jusqu’en bas, derrière le menu ; padding pour le scroll */
  padding-bottom: 52px;
  box-sizing: border-box;
  background-color: #e8eef6;
  background-image:
    radial-gradient(1100px 480px at 12% -8%, rgba(86, 150, 255, 0.18), transparent 55%),
    radial-gradient(900px 420px at 92% 0%, rgba(255, 210, 48, 0.16), transparent 50%);
}

body.sprites-app:not(.sprites-app--gate) .sprites-app-main::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.sprites-app .sprites-app-panel {
  padding-top: 0.85rem;
  padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
  margin: 0 auto;
}

body.sprites-app #sprites-news.sprites-app-panel {
  padding-bottom: 0;
}

/* Collect : accordéon événements au plus près du header, sans coller */
body.sprites-app [data-sprite-collection-panel] {
  padding-top: 0.25rem;
}

/* #checklist.section hérite de base.css (padding 4.5rem) — à neutraliser en app */
body.sprites-app #checklist.section {
  padding-top: 0;
  padding-bottom: 0.5rem;
}

body.sprites-app #checklist .shop-head {
  display: none;
}

body.sprites-app .sprites-app-panel[hidden] {
  display: none !important;
}

body.sprites-app .sprites-app-panel .shop-head {
  margin-bottom: 0.75rem;
}

body.sprites-app .sprites-app-panel .shop-head h2 {
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  margin: 0.15rem 0;
}

body.sprites-app .sprites-app-panel .shop-head p {
  margin: 0;
  max-width: 42rem;
}

.sprites-app-bar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  box-sizing: border-box;
  /* Fond blanc jusque sous l’heure ; texte descendé via padding (= petite zone haut) */
  padding-top: var(--sat, env(safe-area-inset-top, 0px));
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  overflow: visible;
}

/* Couvre toute fuite bleue éventuelle au-dessus du header */
.sprites-app-bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 80px;
  background: #ffffff;
  pointer-events: none;
}

.sprites-app-bar__inner {
  max-width: 1100px;
  margin: 0 auto;
  min-height: var(--sprites-app-bar-h);
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Menu casier : coin gauche du topbar, onglet Casier uniquement */
.sprites-app-bar__locker {
  display: none;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 1;
  min-width: 0;
  margin-right: auto;
  max-width: min(58vw, 16rem);
}

body.sprites-app[data-sprite-tab="locker"] .sprites-app-bar__locker {
  display: inline-flex;
}

.sprites-app-bar__locker-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.05rem;
  min-width: 0;
  line-height: 1.1;
}

.sprites-app-bar__locker-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sprites-app-bar__locker-count {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #5b6b82;
  white-space: nowrap;
}

.sprites-app-bar__locker-back {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #8a6a00;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sprites-app-bar__locker-back:not([hidden]) {
  display: inline;
}

body.sprites-app[data-sprite-tab="locker"] .sprite-locker-page.is-friend-view .sprites-app-bar__locker-back:not([hidden]) {
  display: inline;
}

.sprites-app-bar__locker-btn {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f4f7fc;
  color: #24344d;
  display: inline-grid;
  place-content: center;
  gap: 0.26rem;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  flex-shrink: 0;
}

.sprites-app-bar__locker-btn span {
  display: block;
  width: 1.05rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.sprites-app-bar__locker-btn:hover {
  border-color: rgba(245, 197, 24, 0.7);
  color: #8a6a00;
}

.sprites-app-bar__locker-btn[aria-expanded="true"] {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.sprites-app-bar__brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  flex: 1 1 auto;
}

/* Logo marque (bootlogo transparent) */
.sprites-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  line-height: 1;
}

.sprites-brand__logo {
  display: block;
  width: auto;
  height: 36px;
  max-width: min(52vw, 11.5rem);
  object-fit: contain;
  flex-shrink: 0;
  filter: none;
}

.sprites-brand--compact .sprites-brand__logo {
  height: 32px;
  max-width: min(48vw, 10rem);
}

.sprites-app-bar__sync-btn {
  width: 2.05rem;
  height: 2.05rem;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #f4f7fc;
  color: #24344d;
  cursor: pointer;
  padding: 0;
}

.sprites-app-bar__sync-btn .sprites-ico {
  width: 1.15rem;
  height: 1.15rem;
}

.sprites-app-bar__sync-btn:hover {
  border-color: rgba(245, 197, 24, 0.7);
  color: #8a6a00;
}

.sprites-app-bar__sync-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.sprites-app-bar__sync-btn.is-spinning .sprites-ico {
  animation: sprites-sync-spin 0.8s linear infinite;
}

@keyframes sprites-sync-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Grille/liste + C/M : visibles seulement sur l’onglet Collect (esprits) */
body.sprites-app:not([data-sprite-tab="collection"]) .sprites-app-bar__views,
body.sprites-app:not([data-sprite-tab="collection"]) .sprites-app-bar__stats {
  display: none !important;
}

/* Sync Epic : visible seulement sur l’onglet Amis */
.sprites-app-bar__friends {
  display: none;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  margin-left: 0;
}

/* Icône Amis : toujours à côté de Paramètres */
.sprites-app-bar__friends-btn {
  position: relative;
  overflow: visible;
}

.sprites-app-bar__friends-btn .sprites-ico--friends {
  width: 1.2rem;
  height: 1.2rem;
}

.sprites-app-bar__friends-btn .sprites-app-bar__friend-badge {
  position: absolute;
  top: -0.2rem;
  right: -0.25rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.22rem;
  font-size: 0.62rem;
  pointer-events: none;
  z-index: 2;
}

/* Classement : visible seulement sur l’onglet Stats */
.sprites-app-bar__rank {
  display: none;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  margin-left: 0;
}

body.sprites-app[data-sprite-tab="friends"] .sprites-app-bar__friends {
  display: inline-flex;
}

body.sprites-app[data-sprite-tab="stats"] .sprites-app-bar__rank {
  display: inline-flex;
}

body.sprites-app[data-sprite-tab="friends"] .sprites-app-bar__brand,
body.sprites-app[data-sprite-tab="stats"] .sprites-app-bar__brand {
  flex: 0 1 auto;
}

.sprites-app-bar__friend-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.15rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #f4f7fc;
  color: #24344d;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.sprites-app-bar__friend-btn .sprites-ico {
  width: 1.1rem;
  height: 1.1rem;
}

.sprites-app-bar__friend-btn:hover {
  border-color: rgba(245, 197, 24, 0.7);
  color: #8a6a00;
}

.sprites-app-bar__friend-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.sprites-app-bar__friend-btn.is-spinning .sprites-ico {
  animation: sprites-sync-spin 0.8s linear infinite;
}

.sprites-app-bar__friend-btn--list {
  padding-inline: 0.7rem;
  background: #fff;
}

.sprites-app-bar__friend-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #24344d;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
}

.sprites-app-bar__friend-badge.is-online {
  background: #16a34a;
}

.sprites-app-bar__friend-badge[hidden] {
  display: none !important;
}

.sprites-app-bar__views {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  padding: 0.15rem;
  border-radius: 10px;
  background: #f2f5fa;
  border: 1px solid var(--border);
}

.sprites-app-bar__view-btn {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6a7b93;
  cursor: pointer;
  padding: 0;
}

.sprites-app-bar__view-btn .sprites-ico {
  width: 1.15rem;
  height: 1.15rem;
}

.sprites-app-bar__view-btn.is-active {
  background: #ffffff;
  color: #111;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.sprites-app-bar__refresh-btn {
  color: #24344d;
}

.sprites-app-bar__refresh-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.sprites-app-bar__stats {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  flex-shrink: 0;
}

.sprites-app-bar__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0.15rem 0.35rem;
  border-radius: 8px;
  background: #f2f5fa;
  border: 1px solid var(--border);
  line-height: 1;
  gap: 0.12rem;
}

.sprites-app-bar__stat span {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.sprites-app-bar__stat strong {
  font-family: 'Teko', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.sprites-account {
  position: relative;
}

.sprites-account-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  /* Profil à gauche → menu s’ouvre vers la droite */
  left: 0;
  right: auto;
  min-width: 180px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 35, 60, 0.14);
  padding: 0.4rem;
  z-index: 50;
}

.sprites-account-menu__name {
  padding: 0.45rem 0.65rem 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sprites-account-menu__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text, #162846);
  text-align: left;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
}

.sprites-account-menu__item:hover,
.sprites-account-menu__item:focus {
  background: rgba(22, 40, 70, 0.06);
}

.sprites-account-menu__item--danger {
  color: #b42318;
}

.sprites-account-menu__item--danger:hover,
.sprites-account-menu__item--danger:focus {
  background: rgba(180, 35, 24, 0.08);
}

.sprites-account.is-open .sprites-app-bar__user-btn {
  border-color: rgba(245, 197, 24, 0.7);
  background: rgba(245, 197, 24, 0.18);
}

.sprites-app-bar__actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: 0;
  margin-right: auto;
  flex-shrink: 0;
  order: -1;
}

.sprites-app-bar__end {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  flex-shrink: 0;
  order: 30;
  overflow: visible;
  padding: 0.15rem 0.1rem;
}

.sprites-app-bar__settings-btn .sprites-ico--settings {
  width: 1.2rem;
  height: 1.2rem;
}

.sprite-settings-sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: #f4f7fc;
  color: #162846;
}

.sprite-settings-sheet[hidden] {
  display: none !important;
}

.sprite-settings-sheet__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: var(--sat, env(safe-area-inset-top, 0px));
  padding-bottom: var(--sab, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.sprite-settings-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border, #d7e0ec);
  background: #ffffff;
  flex-shrink: 0;
}

.sprite-settings-sheet__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sprite-settings-sheet__close {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border, #d7e0ec);
  background: #f4f7fc;
  color: #24344d;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-family: inherit;
}

.sprite-settings-sheet__close:hover {
  border-color: rgba(245, 197, 24, 0.7);
  color: #8a6a00;
}

.sprite-settings-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 1rem;
  -webkit-overflow-scrolling: touch;
}

.sprite-settings-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.4rem;
  border: 1px solid var(--border, #d7e0ec);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(20, 35, 60, 0.14);
  box-sizing: border-box;
}

.sprite-settings-menu__name {
  padding: 0.45rem 0.65rem 0.35rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted, #6a7b93);
  border-bottom: 1px solid var(--border, #d7e0ec);
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sprite-settings-menu__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text, #162846);
  text-align: left;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
}

.sprite-settings-menu__item:hover,
.sprite-settings-menu__item:focus {
  background: rgba(22, 40, 70, 0.06);
}

.sprite-settings-menu__item--danger {
  color: #b42318;
}

.sprite-settings-menu__item--danger:hover,
.sprite-settings-menu__item--danger:focus {
  background: rgba(180, 35, 24, 0.08);
}

.sprite-epic-zones {
  width: 100%;
  max-width: none;
  margin: 1rem 0 0;
  touch-action: pan-y;
  box-sizing: border-box;
}

.sprite-epic-zones__slider {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
}

.sprite-epic-zones__track {
  flex: 1 1 auto;
  min-width: 0;
  touch-action: pan-y;
}

.sprite-epic-zones__nav {
  display: none;
  flex: 0 0 auto;
  align-self: center;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border, #d7e0ec);
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(20, 35, 60, 0.1);
  color: #162846;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.sprite-epic-zones__nav:hover,
.sprite-epic-zones__nav:focus-visible {
  border-color: rgba(245, 197, 24, 0.7);
  color: #8a6a00;
}

/* Flèches : PC / souris / app bureau — pas sur téléphone tactile */
@media (hover: hover) and (pointer: fine) {
  .sprite-epic-zones__nav {
    display: inline-grid;
  }
}

.sprite-epic-zones__slide[hidden] {
  display: none !important;
}

.sprite-epic-zones .sprite-epic-links,
.sprite-epic-zones .sprite-epic-dev {
  margin-top: 0;
  max-width: none;
  width: 100%;
}

body.sprites-settings-open {
  overflow: hidden;
}

body.sprites-app.sprites-settings-open .sprites-app-tabs {
  visibility: hidden;
  pointer-events: none;
}

.sprites-app-bar__icon-btn,
.sprites-app-bar__user-btn {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f4f7fc;
  color: #24344d;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}

.sprites-app-bar__icon-btn.sprites-app-bar__friends-btn {
  overflow: visible;
}

.sprites-account-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}

.sprites-account-avatar[hidden] {
  display: none !important;
}

.sprites-app-bar__user-btn .sprites-ico--user {
  width: 1.15rem;
  height: 1.15rem;
}

.sprites-account-avatar-fallback-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.95rem;
  font-weight: 700;
  color: #24344d;
  line-height: 1;
}

.sprites-app-bar__icon-btn:hover,
.sprites-app-bar__user-btn:hover {
  border-color: rgba(245, 197, 24, 0.7);
  color: #8a6a00;
}

.sprites-app-tabs {
  --tabs-ink: #6a7b93;
  --tabs-ink-active: #8a6a00;
  --tabs-surface: rgba(255, 255, 255, 0.94);
  /*
   * iOS : fixed + top:0 + height:--cover-h, onglets en flex-end.
   * Android (html.is-android-shell) : dock bottom:0 — voir bloc dédié.
   */
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  z-index: 60;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-content: flex-end;
  align-items: flex-end;
  justify-content: stretch;
  gap: 0;
  height: var(--cover-h, 100lvh) !important;
  min-height: var(--cover-h, 100lvh) !important;
  /* 12px = petite zone sous les icônes (HR dedans) */
  padding: 0 0.2rem 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: visible !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-shadow: none !important;
  pointer-events: none;
}

.sprites-app-tabs::-webkit-scrollbar {
  display: none;
}

/* Bande blanche du menu + petite zone sous les icônes */
.sprites-app-tabs::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(52px + 12px);
  border-top: 1px solid rgba(22, 40, 70, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, var(--tabs-surface) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.06);
  pointer-events: none;
  z-index: 0;
}

/* HR dans la petite zone sous le menu */
.sprites-app-tabs::after {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 5px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(22, 40, 70, 0.14) 20%,
    rgba(22, 40, 70, 0.18) 50%,
    rgba(22, 40, 70, 0.14) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Plus de bande blanche au-dessus de la HR du footer */
body.sprites-app:not(.sprites-app--gate)::after {
  content: none !important;
  display: none !important;
}

.sprites-app-tab {
  --hero-size: 3.95rem;
  --hero-lift: -0.75rem;
  border: 0;
  background: transparent !important;
  color: var(--tabs-ink);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  min-height: 2.4rem;
  height: 52px;
  max-height: 52px;
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 12px;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.sprites-app-tab .sprites-ico {
  width: 1.38rem;
  height: 1.38rem;
  transition: opacity 0.18s ease;
  opacity: 0.88;
}

.sprites-app-tab__label {
  display: none;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.9;
}

/* Android PWA/Chrome : menu bas toujours dans la zone visible + petits labels */
html.is-android-shell body.sprites-app:not(.sprites-app--gate) .sprites-app-tabs {
  top: auto !important;
  bottom: 0 !important;
  height: auto !important;
  min-height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  max-height: none !important;
  align-items: stretch !important;
  align-content: stretch !important;
  padding: 0.15rem 0.1rem max(8px, env(safe-area-inset-bottom, 0px)) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, #fbfcfe 100%) !important;
  border-top: 1px solid rgba(22, 40, 70, 0.1) !important;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08) !important;
  pointer-events: auto !important;
  z-index: 80 !important;
  overflow: visible !important;
}

html.is-android-shell body.sprites-app:not(.sprites-app--gate) .sprites-app-tabs::before,
html.is-android-shell body.sprites-app:not(.sprites-app--gate) .sprites-app-tabs::after {
  display: none !important;
  content: none !important;
}

html.is-android-shell body.sprites-app:not(.sprites-app--gate) .sprites-app-tab {
  height: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  gap: 0.15rem;
  padding: 0.2rem 0.05rem;
}

html.is-android-shell body.sprites-app:not(.sprites-app--gate) .sprites-app-tab__label {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0;
}

html.is-android-shell body.sprites-app:not(.sprites-app--gate) .sprites-app-tab--hero {
  --hero-size: 3.25rem;
  --hero-lift: -0.35rem;
}

html.is-android-shell body.sprites-app:not(.sprites-app--gate) .sprites-app-main {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}

.sprites-app-tab.is-active {
  background: transparent !important;
  color: var(--tabs-ink-active);
}

.sprites-app-tab.is-active .sprites-ico {
  color: var(--fn-yellow);
  background: var(--fn-yellow);
  opacity: 1;
}

.sprites-app-tab.is-active .sprites-app-tab__label {
  color: var(--tabs-ink-active);
  opacity: 1;
}

/* Point actif sous les onglets non-hero */
.sprites-app-tab:not(.sprites-app-tab--hero).is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.2rem;
  transform: translateX(-50%);
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 999px;
  background: var(--fn-yellow);
  box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.2);
}

/* Collect : bouton central — logo V-Bucks (à la place du cercle jaune) */
.sprites-app-tab--hero {
  z-index: 3;
  overflow: visible;
  color: var(--tabs-ink-active);
}

.sprites-app-tab--hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: var(--hero-lift);
  transform: translateX(-50%);
  width: var(--hero-size);
  height: var(--hero-size);
  border-radius: 999px;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sprites-app-tab--hero .sprites-ico {
  display: none;
}

.sprites-app-tab__vbucks {
  position: absolute;
  left: 50%;
  top: calc(var(--hero-lift) + (var(--hero-size) / 2));
  z-index: 1;
  width: var(--hero-size);
  height: var(--hero-size);
  margin: 0;
  transform: translate(-50%, -50%);
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter:
    drop-shadow(0 0 6px rgba(168, 85, 247, 0.45))
    drop-shadow(0 4px 10px rgba(56, 189, 248, 0.4))
    drop-shadow(0 8px 14px rgba(76, 29, 149, 0.35));
  transition: transform 0.18s ease, filter 0.18s ease;
}

.sprites-app-tab--hero .sprites-app-tab__label {
  display: none;
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(76, 29, 149, 0.55),
    0 2px 6px rgba(56, 189, 248, 0.45),
    0 0 10px rgba(168, 85, 247, 0.35);
}

.sprites-app-tab--hero.is-active {
  color: #ffffff;
}

.sprites-app-tab--hero.is-active .sprites-app-tab__vbucks {
  transform: translate(-50%, -50%) scale(1.06);
  filter:
    drop-shadow(0 0 8px rgba(168, 85, 247, 0.65))
    drop-shadow(0 0 14px rgba(56, 189, 248, 0.5))
    drop-shadow(0 8px 16px rgba(76, 29, 149, 0.45));
}

.sprites-app-tab--hero.is-active::before {
  transform: translateX(-50%) scale(1.04);
}

.sprites-app-tab:active:not(.sprites-app-tab--hero) {
  transform: scale(0.96);
}

.sprites-app-tab--hero:active::before {
  transform: translateX(-50%) scale(0.96);
}

.sprites-app-tab--hero:active .sprites-app-tab__vbucks {
  transform: translate(-50%, -50%) scale(0.96);
}

body.sprites-app .hub-muted,
body.sprites-app .sprite-hint,
body.sprites-app .sprite-credit,
body.sprites-app .sprite-filter span {
  color: var(--muted);
}

body.sprites-app .sprite-progress__card,
body.sprites-app .sprite-card,
body.sprites-app .sprite-guide-card,
body.sprites-app .sprite-friends-gate {
  display: block !important;
  margin-bottom: 0.35rem;
}

body.sprites-app .sprite-friends-view,
body.sprites-app .sprite-friends-list-wrap {
  margin-bottom: 0.35rem;
}

body.sprites-app .sprite-friends-item__open {
  display: flex !important;
  background: #fff;
  color: #243447;
  border-color: var(--border);
}

body.sprites-app .sprite-friends-icon-btn,
body.sprites-app .sprite-friends-back {
  display: inline-flex !important;
}

/*
 * Fonds collage (News / Amis) : calque FIXED
 * → image + overlay restent, seul le contenu scroll (plus de bleu qui fuit).
 */
body.sprites-app[data-sprite-tab="fortnite"] .sprites-app-main,
body.sprites-app[data-sprite-tab="news"] .sprites-app-main,
body.sprites-app[data-sprite-tab="friends"] .sprites-app-main {
  background-color: transparent !important;
  background-image: none !important;
}

body.sprites-app[data-sprite-tab="fortnite"] .sprites-app-main::before,
body.sprites-app[data-sprite-tab="news"] .sprites-app-main::before,
body.sprites-app[data-sprite-tab="friends"] .sprites-app-main::before {
  content: '';
  position: fixed;
  top: var(--sprites-app-bar-total-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #d7e0ec;
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

html.is-news-bg-ready body.sprites-app[data-sprite-tab="fortnite"] .sprites-app-main::before,
html.is-news-bg-ready body.sprites-app[data-sprite-tab="news"] .sprites-app-main::before {
  background-image:
    linear-gradient(var(--sprites-bg-overlay), var(--sprites-bg-overlay)),
    url('/assets/images/sprites-news-bg.jpg?v=20260805bg3');
  background-image:
    linear-gradient(var(--sprites-bg-overlay), var(--sprites-bg-overlay)),
    image-set(
      url('/assets/images/sprites-news-bg.webp?v=20260805bg3') type('image/webp'),
      url('/assets/images/sprites-news-bg.jpg?v=20260805bg3') type('image/jpeg')
    );
}

html.is-friends-bg-ready body.sprites-app[data-sprite-tab="friends"] .sprites-app-main::before {
  background-image:
    linear-gradient(var(--sprites-bg-overlay), var(--sprites-bg-overlay)),
    url('/assets/images/sprites-friends-bg.jpg?v=20260805bg3');
  background-image:
    linear-gradient(var(--sprites-bg-overlay), var(--sprites-bg-overlay)),
    image-set(
      url('/assets/images/sprites-friends-bg.webp?v=20260805bg3') type('image/webp'),
      url('/assets/images/sprites-friends-bg.jpg?v=20260805bg3') type('image/jpeg')
    );
}

body.sprites-app[data-sprite-tab="fortnite"] .sprites-app-main > *,
body.sprites-app[data-sprite-tab="news"] .sprites-app-main > *,
body.sprites-app[data-sprite-tab="friends"] .sprites-app-main > * {
  position: relative;
  z-index: 1;
}

body.sprites-app #sprites-fortnite-site.sprites-app-panel,
body.sprites-app #sprites-news.sprites-app-panel {
  background: transparent;
}

/* ——— Onglet Site Fortnite ——— */
.sprite-fn-site {
  display: grid;
  gap: 1rem;
  padding-bottom: 1rem;
}

.sprite-fn-site__hero {
  padding: 1.05rem 1.1rem 1.15rem;
  border-radius: 16px;
  border: 1px solid rgba(245, 197, 24, 0.3);
  background:
    linear-gradient(155deg, rgba(245, 197, 24, 0.14), transparent 50%),
    linear-gradient(180deg, #152238 0%, #0c1628 100%);
  color: #e8eef8;
}

.sprite-fn-site__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f5c518;
}

.sprite-fn-site__title {
  margin: 0 0 0.4rem;
  font-size: 1.45rem;
  color: #fff;
}

.sprite-fn-site__lead {
  margin: 0 0 0.95rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(232, 238, 248, 0.82);
}

.sprite-fn-site__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.55rem 1.05rem;
  border-radius: 10px;
  background: #f5c518;
  color: #141414;
  font-weight: 800;
  text-decoration: none;
}

.sprite-fn-site__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.sprite-fn-site__card {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--border, #d5dde8);
  background: #fff;
}

.sprite-fn-site__card h3 {
  margin: 0 0 0.2rem;
  font-size: 0.98rem;
  color: #0f172a;
}

.sprite-fn-site__card p {
  margin: 0;
  font-size: 0.84rem;
  color: #5b6b80;
  line-height: 1.4;
}

.sprite-fn-site__card-link {
  justify-self: start;
  font-size: 0.86rem;
  font-weight: 700;
  color: #0b4f8a;
  text-decoration: none;
}

.sprite-fn-site__card-link:hover,
.sprite-fn-site__card-link:focus-visible {
  text-decoration: underline;
}

body.sprites-app #sprites-fortnite-site .sprite-fn-site__card {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.22);
}

body.sprites-app #sprites-fortnite-site .sprite-fn-site__card h3 {
  color: #f8fafc;
}

body.sprites-app #sprites-fortnite-site .sprite-fn-site__card p {
  color: rgba(226, 232, 240, 0.78);
}

body.sprites-app #sprites-fortnite-site .sprite-fn-site__card-link {
  color: #f5c518;
}

button.sprite-fn-site__card-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.sprite-shop-vbucks {
  display: inline-flex;
  align-items: center;
  margin-top: 0.65rem;
  min-height: 2.2rem;
  padding: 0.4rem 0.85rem;
  border-radius: 10px;
  background: linear-gradient(180deg, #f5c518, #e0a800);
  color: #141414;
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
}

.sprite-shop-vbucks:hover,
.sprite-shop-vbucks:focus-visible {
  filter: brightness(1.05);
}

.sprite-shop-featured {
  margin: 0 0 1rem;
  padding: 0.85rem 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(245, 197, 24, 0.35);
  background:
    radial-gradient(420px 160px at 0% 0%, rgba(245, 197, 24, 0.16), transparent 55%),
    linear-gradient(165deg, rgba(15, 23, 42, 0.92), rgba(12, 22, 40, 0.88));
}

.sprite-shop-featured__head {
  margin-bottom: 0.7rem;
}

.sprite-shop-featured__head h3 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  color: #f5c518;
}

.sprite-shop-featured__head p {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(226, 232, 240, 0.78);
}

.sprite-shop-featured__grid {
  margin-top: 0;
}

body.sprites-app .shop-card {
  position: relative;
}

body.sprites-app .shop-card-banner {
  position: absolute;
  z-index: 2;
  top: 0.45rem;
  left: 0.45rem;
  max-width: calc(100% - 0.9rem);
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  background: rgba(245, 197, 24, 0.95);
  color: #141414;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.sprites-app .shop-card--featured {
  border-color: rgba(245, 197, 24, 0.45);
  box-shadow: 0 0 0 1px rgba(245, 197, 24, 0.12);
}

body.sprites-app #sprites-friends.sprites-app-panel {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-top: 0.35rem;
  /* main s’arrête déjà au-dessus du menu : pas de double réserve */
  padding-bottom: 1rem;
  background: transparent;
}

body.sprites-app #sprites-friends.sprites-app-panel > *:not(.sprite-friends-drawer) {
  position: relative;
  z-index: 1;
}

/* Tiroir amis : overlay body plein écran au-dessus de la barre app */
body.sprites-app .sprite-friends-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  height: 100dvh !important;
  height: 100lvh !important;
  max-height: 100dvh !important;
  max-height: 100lvh !important;
}

body.sprites-app #sprites-friends:not(.is-friend-page) .sprite-friends-panel,
body.sprites-app #sprites-friends:not(.is-friend-page) .sprite-friends-dash:not([hidden]) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.sprites-app #sprites-friends:not(.is-friend-page) .sprite-friends-dash:not([hidden]) {
  justify-content: center;
  gap: 1rem;
}

body.sprites-app #sprites-friends.is-friend-page .sprite-friends-dash,
body.sprites-app #sprites-friends.is-friend-page .sprite-friends-dash[hidden] {
  display: none !important;
}

body.sprites-app #sprites-friends .sprite-friends-gate {
  margin: auto;
  text-align: center;
  max-width: 22rem;
}

body.sprites-app #sprites-friends .sprite-friends-actions:not(.sprite-friends-drawer__add) {
  margin: 0;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(22, 40, 70, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

body.sprites-app .sprite-friends-drawer__add {
  margin: 0.15rem 0 0.75rem;
  padding: 0.85rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(8, 16, 32, 0.55) 0%, rgba(8, 16, 32, 0.78) 100%),
    url('/assets/images/sprites-friends-bg.webp') center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.sprites-app .sprite-friends-add--drawer input[type="text"] {
  background: rgba(255, 255, 255, 0.92);
  color: #162846;
  border-color: rgba(255, 255, 255, 0.28);
}

body.sprites-app .sprite-friends-drawer__panel .sprite-friends-item__name {
  font-size: 0.95rem;
  color: #152033;
}

body.sprites-app .sprite-friends-drawer__panel .sprite-friends-list-wrap {
  border: 0;
  background: transparent;
  padding: 0;
  overflow: visible;
}

/* Neutraliser le padding .section (4.5rem) sur Amis */
body.sprites-app #sprites-friends.section {
  padding-top: 0;
  padding-bottom: 0;
}

body.sprites-app .sprite-friends-drawer__panel {
  background: #fff;
}

/* Vue ami : pas d’accordéon événements — place pour la liste d’esprits */
body.sprites-app #checklist.is-friend-view .sprite-events,
body.sprites-app #checklist.is-embedded-friend .sprite-events,
body.sprites-app #checklist.is-friend-view .sprite-hint,
body.sprites-app #checklist.is-embedded-friend .sprite-hint,
body.sprites-app #checklist.is-friend-view .sprite-incoming-trades,
body.sprites-app #checklist.is-embedded-friend .sprite-incoming-trades {
  display: none !important;
}

body.sprites-app .sprite-friends-checklist-host #checklist {
  display: block !important;
  visibility: visible !important;
}

body.sprites-app .sprite-friends-requests {
  background: #fff;
}

body.sprites-app .sprite-stats-status[hidden],
body.sprites-app .sprite-stats-bp,
body.sprites-app .sprite-stats-bp[hidden] {
  display: none !important;
}

body.sprites-app #sprites-stats.sprites-app-panel,
body.sprites-app #sprites-shop.sprites-app-panel,
body.sprites-app #guide.sprites-app-panel,
body.sprites-app #sprites-status.sprites-app-panel,
body.sprites-app #sprites-map.sprites-app-panel,
body.sprites-app #sprites-codes.sprites-app-panel,
body.sprites-app #sprites-locker.sprites-app-panel,
body.sprites-app #sprites-island-analyzer.sprites-app-panel {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

/* Nouvelles : dernière image collée au footer (pas de bande vide) */
body.sprites-app #sprites-news.sprites-app-panel {
  padding-bottom: 0;
}

.sprite-status-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  margin: 0 0 1rem;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid #d5e4f5;
  background:
    radial-gradient(420px 180px at 0% 0%, rgba(20, 147, 255, 0.12), transparent 60%),
    linear-gradient(160deg, #ffffff, #f3f8fd);
}

.sprite-status-hero.is-warn {
  border-color: #f0d2a8;
  background:
    radial-gradient(420px 180px at 0% 0%, rgba(245, 158, 11, 0.14), transparent 60%),
    linear-gradient(160deg, #ffffff, #fff8ef);
}

.sprite-status-hero__text {
  min-width: 0;
}

.sprite-status-hero__text h2 {
  margin: 0.1rem 0 0.35rem;
}

.sprite-status-hero__text p {
  margin: 0;
  color: #5b6c82;
  font-size: 0.88rem;
}

.sprite-status-hero__text a {
  color: #0b4f8a;
  font-weight: 700;
  text-decoration: none;
}

.sprite-status-hero__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 46%;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}

.sprite-status-hero__badge.is-ok {
  background: #e7f8ee;
  color: #166534;
}

.sprite-status-hero__badge.is-warn {
  background: #fff1dc;
  color: #9a3412;
}

.sprite-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2);
}

.sprite-status-dot.is-ok {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.sprite-status-dot.is-warn {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.sprite-status-dot.is-bad {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.sprite-status-card {
  border: 1px solid var(--border, #d5dde8);
  border-radius: 14px;
  background: #fff;
  padding: 0.95rem 1rem;
  margin-bottom: 0.85rem;
}

.sprite-status-card--build {
  background: linear-gradient(145deg, #fff, #f7fafc);
}

.sprite-status-card--ok {
  border-color: #cfeedd;
  background: #f4fbf7;
}

.sprite-status-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: #243447;
}

.sprite-status-build {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #162846;
  word-break: break-word;
}

.sprite-status-empty {
  margin: 0;
  color: #3f6b52;
  font-weight: 600;
}

.sprite-status-section {
  margin: 1.1rem 0 0;
}

.sprite-status-section__title {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6b7c93;
}

.sprite-status-events {
  display: grid;
  gap: 0.55rem;
}

.sprite-status-event {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  padding: 0.8rem 0.9rem;
}

.sprite-status-event.is-warn {
  border-color: #f0d2a8;
  background: #fffaf2;
}

.sprite-status-event.is-bad {
  border-color: #f2c0c0;
  background: #fff5f5;
}

.sprite-status-event header {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.3rem;
}

.sprite-status-event strong {
  color: #243447;
}

.sprite-status-event em {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b7c93;
}

.sprite-status-event p {
  margin: 0.25rem 0 0;
  font-size: 0.86rem;
  color: #4b5d75;
}

.sprite-status-event__meta {
  font-size: 0.8rem !important;
  color: #6b7c93 !important;
}

.sprite-status-groups {
  display: grid;
  gap: 0.5rem;
}

.sprite-status-group {
  border: 1px solid var(--border, #d5dde8);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.sprite-status-group > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  user-select: none;
}

.sprite-status-group > summary::-webkit-details-marker {
  display: none;
}

.sprite-status-group > summary strong {
  flex: 1;
  color: #243447;
}

.sprite-status-group > summary em {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
}

.sprite-status-group > summary em.is-ok {
  color: #166534;
}

.sprite-status-group > summary em.is-warn {
  color: #9a3412;
}

.sprite-status-group > summary em.is-bad {
  color: #b91c1c;
}

.sprite-status-group .sprite-status-list,
.sprite-status-group .hub-muted {
  margin: 0;
  padding: 0.15rem 0.9rem 0.8rem;
  border-top: 1px solid #eef2f7;
}

.sprite-status-list {
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.sprite-status-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.35rem 0;
  font-size: 0.88rem;
  color: #243447;
  border-bottom: 1px solid #f1f5f9;
}

.sprite-status-list li:last-child {
  border-bottom: 0;
}

.sprite-status-list li span {
  display: grid;
  gap: 0.1rem;
}

.sprite-status-list li small {
  color: #6b7c93;
  font-size: 0.75rem;
}

.sprite-status-list em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b7c93;
}

.sprite-status-list li.is-ok em {
  color: #166534;
}

.sprite-status-list li.is-warn em {
  color: #9a3412;
}

.sprite-status-list li.is-bad em {
  color: #b91c1c;
}

.sprite-status-link-wrap {
  margin: 1.15rem 0 0;
}

.sprite-status-link {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 0.95rem;
  border-radius: 12px;
  border: 1px solid #b7d3ef;
  background: #eef6ff;
  font-weight: 700;
  color: #0b4f8a;
  text-decoration: none;
}

.sprite-status-link:hover,
.sprite-status-link:focus {
  background: #e3f0ff;
}

body.sprites-app .sprite-status-card,
body.sprites-app .sprite-status-group,
body.sprites-app .sprite-status-event {
  background: #fff;
  border-color: var(--border);
}

@media (max-width: 640px) {
  .sprite-status-hero {
    flex-direction: column;
  }

  .sprite-status-hero__badge {
    max-width: 100%;
  }
}

body.sprites-app #sprites-news .sprite-hub-block {
  padding-bottom: 2rem;
}

body.sprites-app #sprites-news .sprite-news-head {
  margin-bottom: 0.55rem;
}

body.sprites-app #sprites-news .sprite-news-head h2 {
  margin: 0;
}

.sprite-news-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  padding: 0.3rem;
  border: 1px solid var(--border, #d5dde8);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
}

/* Code créateur — Nouvelles */
.sprite-creator-code {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(245, 197, 24, 0.45);
  background:
    linear-gradient(135deg, rgba(10, 28, 56, 0.92), rgba(7, 18, 37, 0.96)),
    #0a1c38;
  color: #eef4ff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.sprite-creator-code__eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f5c518;
}

.sprite-creator-code__name {
  margin: 0.15rem 0 0;
  font-size: clamp(1.35rem, 4.5vw, 1.7rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: #fff;
}

.sprite-creator-code__code {
  margin: 0.35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.55rem;
  font-size: 0.95rem;
}

.sprite-creator-code__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(215, 228, 247, 0.7);
}

.sprite-creator-code__code strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffe56a;
}

.sprite-creator-code__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.sprite-creator-code__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: 10px;
  border: 2px solid #111;
  font-weight: 800;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.sprite-creator-code__btn--copy {
  background: linear-gradient(180deg, #ffe56a 0%, #f5c518 55%, #e0a800 100%);
  color: #111;
  box-shadow: 0 3px 0 #8a6a00;
}

.sprite-creator-code__btn--link {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.sprite-creator-code__btn--link:hover,
.sprite-creator-code__btn--link:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.sprite-creator-code__hint {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #b8f0c8;
}

body.sprites-app #sprites-news .sprite-creator-code {
  border-color: rgba(245, 197, 24, 0.55);
}

.sprite-news-tabs__btn {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #5a6b82;
  font: inherit;
  font-size: clamp(0.68rem, 2.6vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-height: 2.35rem;
  cursor: pointer;
  padding: 0.45rem 0.2rem;
  white-space: nowrap;
  min-width: 0;
}

.sprite-news-tabs__btn.is-active {
  background: #122033;
  color: #fff;
  box-shadow: 0 6px 16px rgba(18, 32, 51, 0.18);
}

.sprite-news-panel[hidden] {
  display: none !important;
}

.sprite-news-empty {
  margin: 0.75rem 0;
}

.sprite-news-channels {
  margin-top: 0.85rem;
}

.sprite-news-pull {
  position: absolute;
  top: -2.6rem;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.sprite-news-pull[hidden] {
  display: none !important;
}

.sprite-news-pull__label {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #e8eef8;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.sprite-news-pull.is-ready .sprite-news-pull__label {
  color: #111;
  background: linear-gradient(180deg, #ffe56a 0%, #f5c518 55%, #e0a800 100%);
  border-color: transparent;
}

.sprite-news-pull.is-loading .sprite-news-pull__label {
  color: #ffe56a;
  background: rgba(15, 23, 42, 0.9);
}

body.sprites-app #sprites-news {
  position: relative;
}

.sprite-news-hero {
  position: relative;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  border: 0;
  background: #0f172a;
  box-shadow: none;
}

/* Full-bleed : touche les rebords gauche/droite */
/* Décompte saison : sous le header, au-dessus du slideshow */
.sprite-season-countdown {
  margin: 0;
  padding: 0.55rem 0.9rem 0.6rem;
  background: linear-gradient(180deg, #0b1730 0%, #10203c 100%);
  border-bottom: 1px solid rgba(245, 197, 24, 0.28);
  color: #e8eef8;
}

body.sprites-app #sprites-news .sprite-season-countdown {
  width: 100vw;
  max-width: 100vw;
  margin: -0.85rem calc(50% - 50vw) 0;
  border-radius: 0;
}

.sprite-season-countdown__inner {
  display: grid;
  gap: 0.15rem;
  text-align: center;
}

.sprite-season-countdown__eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f5c518;
}

.sprite-season-countdown__timer {
  margin: 0;
  font-size: clamp(0.95rem, 3.6vw, 1.15rem);
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.sprite-season-countdown__local {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: rgba(226, 232, 240, 0.72);
}

.sprite-season-countdown.is-ended .sprite-season-countdown__timer {
  color: #fca5a5;
}

body.sprites-app #sprites-news .sprite-news-hero {
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw);
  border-radius: 0;
}

.sprite-news-hero__track {
  min-width: 0;
}

.sprite-news-hero__slide {
  margin: 0;
  display: block;
}

.sprite-news-hero__slide[hidden] {
  display: none !important;
}

.sprite-news-hero__slide img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  background: #0f172a;
}

body.sprites-app #sprites-news .sprite-news-hero__slide img {
  max-height: none;
}

.sprite-news-hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  pointer-events: auto;
  z-index: 2;
}

.sprite-news-hero__dot {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
}

.sprite-news-hero__dot:hover,
.sprite-news-hero__dot:focus-visible {
  background: rgba(255, 255, 255, 0.7);
  outline: none;
}

.sprite-news-hero__dot.is-active {
  background: #f5c518;
}

.sprite-news-crew {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #0f172a;
  box-shadow: none;
}

body.sprites-app #sprites-news .sprite-news-crew {
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw);
  border-radius: 0;
  background: #0f172a;
}

.sprite-news-crew__media {
  position: relative;
  width: 100%;
  min-height: 12rem;
  background: #0f172a;
}

.sprite-news-crew__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 0.85s ease;
  vertical-align: middle;
}

.sprite-news-crew__img.is-active {
  opacity: 1;
}

.sprite-news-crew__img:not(.is-active) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sprite-news-crew__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1.1rem 1rem 1.25rem;
  background:
    linear-gradient(180deg, rgba(8, 14, 28, 0.05) 20%, rgba(8, 14, 28, 0.78) 100%);
  pointer-events: none;
}

.sprite-news-crew__copy {
  max-width: 28rem;
  display: grid;
  gap: 0.2rem;
  opacity: 1;
  transform: translateY(0);
}

.sprite-news-crew__copy.is-fading {
  animation: sprite-news-crew-fade-in 0.9s ease both;
}

@keyframes sprite-news-crew-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sprite-news-crew__eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffe56a;
}

.sprite-news-crew__title {
  margin: 0;
  font-size: clamp(1.25rem, 4.5vw, 1.7rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.sprite-news-crew__text {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(232, 238, 248, 0.92);
  line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.sprite-news-crew__cta {
  margin-top: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #111;
  background: linear-gradient(180deg, #ffe56a 0%, #f5c518 55%, #e0a800 100%);
  box-shadow: 0 3px 0 #8a6a00;
}

body.sprites-app #sprites-news .sprite-news-crew__eyebrow {
  color: #ffe56a;
}

body.sprites-app #sprites-news .sprite-news-crew__title {
  color: #fff;
}

body.sprites-app #sprites-news .sprite-news-crew__text {
  color: rgba(232, 238, 248, 0.92);
}

body.sprites-app #sprites-news .sprite-news-crew__cta {
  color: #111;
}

.sprite-news-creator-support {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #0b1622;
}

body.sprites-app #sprites-news .sprite-news-creator-support {
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw);
  border-radius: 0;
}

.sprite-news-creator-support__media {
  position: relative;
  width: 100%;
  height: min(48vw, 15.5rem);
  min-height: 12.5rem;
  max-height: 17rem;
  overflow: hidden;
  background: #0b1622;
}

.sprite-news-creator-support__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% 28%;
  background: #0b1622;
}

.sprite-news-creator-support__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem 0.85rem;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(4, 10, 20, 0.08) 22%,
      rgba(4, 10, 20, 0.5) 42%,
      rgba(4, 10, 20, 0.9) 68%,
      rgba(4, 10, 20, 0.97) 100%
    );
  pointer-events: none;
}

.sprite-news-creator-support__copy {
  max-width: min(68%, 19rem);
  display: grid;
  gap: 0.1rem;
  text-align: right;
  justify-items: end;
  pointer-events: auto;
  animation: sprite-news-crew-fade-in 0.9s ease both;
}

.sprite-news-creator-support__eyebrow {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffe56a;
}

.sprite-news-creator-support__title {
  margin: 0;
  font-size: clamp(1.1rem, 4vw, 1.45rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.sprite-news-creator-support__code {
  margin: 0.15rem 0 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.4rem;
  flex-wrap: wrap;
  color: rgba(232, 238, 248, 0.92);
}

.sprite-news-creator-support__label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffe56a;
}

.sprite-news-creator-support__code strong {
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.sprite-news-creator-support__text {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(232, 238, 248, 0.92);
  line-height: 1.25;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.sprite-news-creator-support__actions {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.sprite-news-creator-support__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 0;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  color: #111;
  background: linear-gradient(180deg, #ffe56a 0%, #f5c518 55%, #e0a800 100%);
  box-shadow: 0 3px 0 #8a6a00;
}

.sprite-news-creator-support__btn--copy {
  color: #111;
  background: linear-gradient(180deg, #ffe56a 0%, #f5c518 55%, #e0a800 100%);
  box-shadow: 0 3px 0 #8a6a00;
}

.sprite-news-creator-support__btn--link {
  color: #111;
  background: linear-gradient(180deg, #ffe56a 0%, #f5c518 55%, #e0a800 100%);
  box-shadow: 0 3px 0 #8a6a00;
  border: 0;
}

.sprite-news-creator-support__btn--link:hover,
.sprite-news-creator-support__btn--link:focus-visible,
.sprite-news-creator-support__btn--copy:hover,
.sprite-news-creator-support__btn--copy:focus-visible {
  filter: brightness(1.05);
}

.sprite-news-creator-support__hint {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffe56a;
}

.sprite-hero-admin {
  margin: 1rem 0 0;
  padding: 0.85rem;
  border: 1px solid var(--border, #d7e0ec);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 35, 60, 0.1);
  display: grid;
  gap: 0.75rem;
}

.sprite-hero-admin__head {
  display: grid;
  gap: 0.2rem;
}

.sprite-hero-admin__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 900;
  color: #122033;
}

.sprite-hero-admin__hint {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6a7b93;
  line-height: 1.35;
}

.sprite-hero-admin__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.sprite-hero-admin__empty {
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: #f4f7fb;
  color: #5a6b82;
  font-size: 0.82rem;
  font-weight: 600;
}

.sprite-hero-admin__item {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.45rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fafbfd;
}

.sprite-hero-admin__thumb {
  width: 4.2rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 8px;
  background: #0f172a;
}

.sprite-hero-admin__url {
  margin: 0;
  min-width: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: #3d4f66;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sprite-hero-admin__remove {
  border: 1px solid rgba(180, 35, 24, 0.35);
  border-radius: 8px;
  background: #fff;
  color: #b42318;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
}

.sprite-hero-admin__form,
.sprite-hero-admin__code-form {
  display: grid;
  gap: 0.4rem;
}

.sprite-hero-admin__code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
}

.sprite-hero-admin__code {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d5dde8;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.sprite-hero-admin__label {
  font-size: 0.75rem;
  font-weight: 800;
  color: #3d4f66;
}

.sprite-hero-admin__input,
.sprite-hero-admin__textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d5dde8;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-size: 0.85rem;
}

.sprite-hero-admin__textarea {
  min-height: 7.5rem;
  resize: vertical;
  line-height: 1.4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
}

.sprite-hero-admin__add,
.sprite-hero-admin__generate {
  border: 0;
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  color: #111;
  background: linear-gradient(180deg, #ffe56a 0%, #f5c518 55%, #e0a800 100%);
  box-shadow: 0 3px 0 #8a6a00;
}

.sprite-hero-admin__generate:disabled {
  opacity: 0.55;
  cursor: wait;
}

.sprite-hero-admin__generator {
  display: grid;
  gap: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid #e2e8f0;
}

.sprite-hero-admin__generator-row {
  display: grid;
  grid-template-columns: auto 4.5rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
}

.sprite-hero-admin__attempts-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: #3d4f66;
}

.sprite-hero-admin__attempts {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d5dde8;
  border-radius: 10px;
  padding: 0.55rem 0.45rem;
  font: inherit;
  font-size: 0.85rem;
  text-align: center;
}

.sprite-hero-admin__status {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f766e;
}

.sprite-hero-admin__status.is-error {
  color: #b42318;
}

.sprite-news-slider {
  margin: 0.15rem 0 0.35rem;
  display: grid;
  gap: 0.45rem;
}

.sprite-news-slider[hidden] {
  display: none !important;
}

.sprite-news-slider__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 0;
}

.sprite-news-slider__page {
  min-width: 2.4rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: #5a6b82;
}

.sprite-news-slider__nav {
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--border, #d5dde8);
  border-radius: 999px;
  background: #fff;
  color: #122033;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 auto;
}

.sprite-news-slider__nav:hover:not(:disabled),
.sprite-news-slider__nav:focus-visible:not(:disabled) {
  border-color: #9eb2c9;
  background: #f4f7fb;
}

.sprite-news-slider__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.sprite-news-slider__track {
  min-width: 0;
}

.sprite-news-slide {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(22, 40, 70, 0.12);
  background: #0f172a;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sprite-news-slide[hidden] {
  display: none !important;
}

.sprite-news-slide:hover,
.sprite-news-slide:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.sprite-news-slide img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: #0f172a;
}

.sprite-news-slider--media .sprite-news-slide img {
  max-height: none;
  width: 100%;
  height: auto;
}

.sprite-news-slide.is-pinned {
  border-color: rgba(245, 197, 24, 0.45);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
}

body.sprites-app #sprites-news .sprite-news-slide img {
  width: 100%;
  height: auto;
  max-height: min(52vh, 28rem);
  object-fit: contain;
}

.sprite-news-detail {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.75rem;
}

.sprite-news-detail[hidden] {
  display: none !important;
}

.sprite-news-detail__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(8, 14, 24, 0.55);
  cursor: pointer;
}

.sprite-news-detail__card {
  position: relative;
  z-index: 1;
  width: min(100%, 28rem);
  max-height: min(78vh, 34rem);
  overflow: auto;
  border-radius: 16px 16px 12px 12px;
  background: #fff;
  border: 1px solid rgba(22, 40, 70, 0.12);
  box-shadow: 0 18px 40px rgba(8, 14, 24, 0.28);
}

.sprite-news-detail__close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #122033;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.sprite-news-detail__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(48vh, 22rem);
  aspect-ratio: auto;
  object-fit: contain;
  background: #0f172a;
}

.sprite-news-detail__body {
  padding: 0.9rem 1rem 1.1rem;
  display: grid;
  gap: 0.55rem;
}

.sprite-news-detail__body h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #122033;
}

.sprite-news-detail__body p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #3d5168;
}

.sprite-news-detail__body .btn {
  justify-self: start;
  margin-top: 0.2rem;
}

body.sprites-news-detail-open {
  overflow: hidden;
}

a.news-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

a.news-card--link:hover,
a.news-card--link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 35, 60, 0.1);
}

.news-card-date {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b7c93;
}

.sprite-creator-tools__intro {
  margin: 0.75rem 0 0.7rem;
}

.sprite-creator-tools__links {
  list-style: none;
  margin: 0 0 0.35rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.sprite-creator-tools__links li {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border, #d5dde8);
  border-radius: 10px;
  background: #f8fafc;
}

.sprite-creator-tools__links a {
  font-weight: 700;
  color: #0b4f8a;
  text-decoration: none;
}

.sprite-creator-tools__links a:hover,
.sprite-creator-tools__links a:focus {
  text-decoration: underline;
}

.sprite-creator-tools__links span {
  font-size: 0.78rem;
  color: #6b7c93;
}

/* ——— Casier Fortnite (page Paramètres) ——— */
.sprite-locker-page .shop-head {
  margin-bottom: 0.85rem;
}

/* App : pas de bandeau titre (titre/compteur dans le topbar) */
body.sprites-app .sprite-locker-page__web-head {
  display: none !important;
}

body.sprites-app #sprites-locker.sprites-app-panel {
  padding-top: 0.55rem;
}

.sprite-locker__zone-banner {
  width: 100%;
  margin: 0 0 0.45rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(245, 197, 24, 0.35);
  background:
    linear-gradient(105deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 58, 95, 0.95) 55%, rgba(15, 23, 42, 0.96) 100%);
  box-shadow: 0 6px 16px rgba(2, 6, 23, 0.3);
  box-sizing: border-box;
}

.sprite-locker__zone {
  margin: 0;
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* Labels accessibles sans prendre de place (base.css peut être absent en app). */
.sprite-locker .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sprite-locker__search-row,
.sprite-locker__sort-row,
.sprite-locker__meta-row {
  display: grid;
  gap: 0.3rem;
  align-items: center;
  width: 100%;
}

.sprite-locker__search-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.sprite-locker__sort-row {
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.35fr);
}

.sprite-locker__meta-row {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.sprite-locker__order-btn {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(2, 6, 23, 0.65);
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}

.sprite-locker__order-btn:hover,
.sprite-locker__order-btn:focus-visible {
  border-color: rgba(245, 197, 24, 0.7);
  color: #f5c518;
}

.sprite-locker-sidebar {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
}

.sprite-locker-sidebar:not([hidden]) {
  pointer-events: auto;
}

/* Au-dessus de la topbar, mais sous la barre d’heure (safe-area iOS/Android). */
body.sprites-app .sprite-locker-sidebar {
  top: var(--sat, env(safe-area-inset-top, 0px));
  bottom: 0;
  z-index: 140;
}

body.sprites-app.sprite-locker-menu-open .sprites-app-bar {
  z-index: 100;
}

.sprite-locker-sidebar[hidden] {
  display: none !important;
}

.sprite-locker-sidebar__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.62);
  cursor: pointer;
}

.sprite-locker-sidebar__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(82vw, 17.5rem);
  background: linear-gradient(180deg, #140a1c 0%, #0a060e 55%, #050308 100%);
  border-right: 1px solid rgba(196, 181, 253, 0.22);
  box-shadow: 10px 0 32px rgba(0, 0, 0, 0.55);
  padding: 0.85rem 0.7rem calc(1rem + var(--sab, env(safe-area-inset-bottom, 0px)));
  overflow: auto;
  transform: translateX(0);
  animation: sprite-locker-sidebar-in 90ms ease-out;
  pointer-events: auto;
  box-sizing: border-box;
}

@keyframes sprite-locker-sidebar-in {
  from {
    transform: translateX(-10px);
    opacity: 0.9;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.sprite-locker-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.sprite-locker-sidebar__head h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #faf5ff;
}

.sprite-locker-sidebar__close {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(196, 181, 253, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #faf5ff;
  cursor: pointer;
}

.sprite-locker-sidebar__label {
  margin: 0.55rem 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(233, 213, 255, 0.55);
}

.sprite-locker__tabs {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0;
}

.sprite-locker__tab {
  border: 1px solid rgba(196, 181, 253, 0.22);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(250, 245, 255, 0.9);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.48rem 0.7rem;
  cursor: pointer;
  text-align: left;
}

.sprite-locker__tab.is-active {
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
  border-color: #c4b5fd;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.sprite-locker__tab--esprit {
  margin-top: 0.35rem;
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(127, 29, 29, 0.35);
  color: #ef4444;
  font-weight: 800;
}

.sprite-locker__tab--esprit:hover,
.sprite-locker__tab--esprit:focus-visible {
  border-color: #f87171;
  background: rgba(185, 28, 28, 0.45);
  color: #ff6b6b;
}

.sprite-locker__blocks {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.sprite-locker__block {
  border: 1px solid rgba(196, 181, 253, 0.2);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(250, 245, 255, 0.9);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  text-align: left;
}

.sprite-locker__block.is-active {
  background: rgba(124, 58, 237, 0.28);
  border-color: rgba(196, 181, 253, 0.7);
  color: #faf5ff;
}

body.sprite-locker-menu-open {
  overflow: hidden;
}

.sprite-locker__filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.28rem;
  align-items: stretch;
  margin: 0 0 0.4rem;
}

.sprite-locker__field,
.sprite-locker__select {
  display: block;
  min-width: 0;
  margin: 0;
}

.sprite-locker__field input,
.sprite-locker__select select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.5);
  color: #f8fafc;
  padding: 0.38rem 0.55rem;
  font-size: 0.78rem;
  min-height: 2rem;
}

/* Pastille Obtenu — bien lisible */
.sprite-locker__filter--chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.28rem 0.55rem;
  min-height: 2rem;
  border-radius: 8px;
  border: 1px solid rgba(245, 197, 24, 0.55);
  background: rgba(15, 23, 42, 0.92);
  color: #f5c518;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.sprite-locker__filter--chip span {
  color: #f5c518;
  font-weight: 800;
}

.sprite-locker__filter--chip input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: #f5c518;
  flex-shrink: 0;
}

.sprite-locker__filter--chip:has(input:checked) {
  background: rgba(245, 197, 24, 0.18);
  border-color: #f5c518;
  box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.25);
}

@media (max-width: 720px) {
  .sprite-locker__filters {
    gap: 0.22rem;
  }

  .sprite-locker__search-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem;
  }

  /* Rangée 2 : Tri + sens + Saison */
  .sprite-locker__sort-row {
    grid-template-columns: minmax(0, 1fr) 1.9rem minmax(0, 1.15fr);
    gap: 0.22rem;
  }

  /* Rangée 3 : Lettre + Catégorie */
  .sprite-locker__meta-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0.22rem;
  }

  .sprite-locker__field input,
  .sprite-locker__select select,
  .sprite-locker__order-btn,
  .sprite-locker__filter--chip {
    min-height: 1.9rem;
  }

  .sprite-locker__order-btn {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.95rem;
  }

  .sprite-locker__filter--chip {
    padding: 0.22rem 0.45rem;
    font-size: 0.76rem;
  }

  .sprite-locker__field input,
  .sprite-locker__select select {
    padding: 0.32rem 0.45rem;
    font-size: 0.74rem;
  }
}

.sprite-locker__status {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  color: rgba(226, 232, 240, 0.7);
  min-height: 1.1em;
}

.sprite-locker__status.is-error {
  color: #fca5a5;
}

.sprite-locker__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  transition: opacity 120ms ease;
}

.sprite-locker__grid.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.sprite-locker__card {
  display: grid;
  gap: 0.28rem;
  padding: 0.35rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.62);
  content-visibility: auto;
  contain-intrinsic-size: 0 11rem;
  cursor: pointer;
}

.sprite-locker__card.is-owned {
  border-color: rgba(245, 197, 24, 0.55);
  box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.2);
}

.sprite-locker__media {
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.55);
}

.sprite-locker__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sprite-locker__body h4 {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.2;
  color: #f8fafc;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sprite-locker__body p {
  margin: 0.1rem 0 0;
  font-size: 0.62rem;
  color: rgba(226, 232, 240, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sprite-locker__check {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #f5c518;
  cursor: pointer;
}

.sprite-locker__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0.9rem 0 0.25rem;
}

.sprite-locker__pager button {
  border: 0;
  border-radius: 10px;
  background: rgba(245, 197, 24, 0.9);
  color: #111827;
  font-weight: 700;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}

.sprite-locker__pager button:disabled {
  opacity: 0.45;
  cursor: default;
}

.sprite-locker__pager span {
  font-size: 0.84rem;
  color: rgba(226, 232, 240, 0.75);
}

.sprite-locker-viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.sprite-locker-viewer[hidden] {
  display: none !important;
}

.sprite-locker-viewer__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(2, 6, 23, 0.78);
  cursor: pointer;
}

.sprite-locker-viewer__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 22rem);
  max-height: min(96vh, 52rem);
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  padding: 1rem 1rem 1.1rem;
}

.sprite-locker-viewer__close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.7);
  color: #f8fafc;
  font-size: 1rem;
  cursor: pointer;
}

.sprite-locker-viewer__nav {
  position: absolute;
  top: 42%;
  z-index: 2;
  width: 2.35rem;
  height: 2.35rem;
  border: 0;
  border-radius: 999px;
  background: rgba(245, 197, 24, 0.92);
  color: #111827;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  transform: translateY(-50%);
}

.sprite-locker-viewer__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.sprite-locker-viewer__nav--prev {
  left: 0.35rem;
}

.sprite-locker-viewer__nav--next {
  right: 0.35rem;
}

.sprite-locker-viewer__media {
  border-radius: 12px;
  overflow: visible;
  background: rgba(2, 6, 23, 0.55);
  margin: 0.35rem 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sprite-locker-viewer__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(72vh, 36rem);
  object-fit: contain;
  object-position: center;
}

.sprite-locker-viewer__info h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #f8fafc;
  padding-right: 1.5rem;
}

.sprite-locker-viewer__info p {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: rgba(226, 232, 240, 0.7);
}

.sprite-locker-viewer__check {
  margin-top: 0.75rem;
  font-size: 0.95rem;
}

.sprite-locker-viewer__pos {
  margin-top: 0.55rem !important;
  font-size: 0.75rem !important;
  color: rgba(226, 232, 240, 0.55) !important;
}

body.sprite-locker-viewer-open {
  overflow: hidden;
}

/* ——— Analyseur d’île (page Paramètres) ——— */
.sprite-island-analyzer-page .shop-head {
  margin-bottom: 0.85rem;
}

.sprite-island-analyzer {
  margin: 0;
  padding: 0;
}

.sprite-island-analyzer__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin: 0 0 0.65rem;
}

.sprite-island-analyzer__field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.55);
  color: #f8fafc;
  padding: 0.7rem 0.8rem;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.sprite-island-analyzer__submit {
  border: 0;
  border-radius: 10px;
  background: #f5c518;
  color: #111827;
  font-weight: 700;
  padding: 0 0.95rem;
  cursor: pointer;
}

.sprite-island-analyzer__status {
  margin: 0 0 0.65rem;
  font-size: 0.86rem;
  color: rgba(226, 232, 240, 0.75);
}

.sprite-island-analyzer__status.is-error {
  color: #fca5a5;
}

.sprite-island-analyzer__result {
  display: grid;
  gap: 0.85rem;
}

.sprite-island-analyzer__meta {
  padding: 0.8rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.62);
}

.sprite-island-analyzer__badge {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(148, 163, 184, 0.2);
  color: #e2e8f0;
}

.sprite-island-analyzer__badge[data-engine='uefn'] {
  background: rgba(245, 197, 24, 0.18);
  color: #f5c518;
}

.sprite-island-analyzer__badge[data-engine='creative'] {
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
}

.sprite-island-analyzer__meta h4 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  color: #f8fafc;
}

.sprite-island-analyzer__code {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: rgba(226, 232, 240, 0.8);
}

.sprite-island-analyzer__creator {
  margin: 0 0 0.5rem;
  font-size: 0.86rem;
  color: rgba(226, 232, 240, 0.7);
}

.sprite-island-analyzer__creator strong {
  color: #f8fafc;
}

.sprite-island-analyzer__tags {
  list-style: none;
  margin: 0 0 0.55rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.sprite-island-analyzer__tags li {
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  background: rgba(30, 41, 59, 0.9);
  color: rgba(226, 232, 240, 0.85);
}

.sprite-island-analyzer__desc {
  margin: 0 0 0.55rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgba(226, 232, 240, 0.72);
}

.sprite-island-analyzer__link {
  font-size: 0.86rem;
  font-weight: 700;
  color: #f5c518;
  text-decoration: none;
}

.sprite-island-analyzer__metrics {
  padding: 0.8rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.5);
}

.sprite-island-analyzer__metrics-title {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.6);
}

.sprite-island-analyzer__metrics-grid {
  display: grid;
  gap: 0.45rem;
}

.sprite-island-analyzer__metric {
  display: grid;
  gap: 0.15rem;
}

.sprite-island-analyzer__metric-label {
  font-size: 0.8rem;
  color: #f8fafc;
}

.sprite-island-analyzer__metric-values {
  font-size: 0.78rem;
  color: rgba(226, 232, 240, 0.72);
}

.sprite-island-analyzer__metric-values em {
  font-style: normal;
  color: rgba(245, 197, 24, 0.9);
}

.sprite-island-analyzer__metrics-empty {
  margin: 0;
  font-size: 0.84rem;
  color: rgba(226, 232, 240, 0.65);
}

/* ——— Onglet UEFN (legacy, non branché) ——— */
.sprite-uefn {
  display: grid;
  gap: 1rem;
}

.sprite-uefn__hero {
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(245, 197, 24, 0.28);
  background:
    linear-gradient(160deg, rgba(245, 197, 24, 0.12), transparent 55%),
    linear-gradient(180deg, #121c2e 0%, #0b1424 100%);
  color: #e8eef8;
}

.sprite-uefn__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f5c518;
}

.sprite-uefn__title {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
  line-height: 1.2;
  color: #fff;
}

.sprite-uefn__lead {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(232, 238, 248, 0.82);
}

.sprite-uefn__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sprite-uefn__portal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 10px;
  background: #f5c518;
  color: #141414;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
}

.sprite-uefn__portal-btn--ghost {
  background: transparent;
  color: #f5c518;
  border: 1px solid rgba(245, 197, 24, 0.45);
}

.sprite-uefn__portal-btn:hover,
.sprite-uefn__portal-btn:focus-visible {
  filter: brightness(1.05);
}

.sprite-uefn__card-link--btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.sprite-uefn__live {
  margin: 0 0 0.85rem;
  display: grid;
  gap: 0.65rem;
}

.sprite-uefn__live-main {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.55);
  color: rgba(226, 232, 240, 0.88);
  font-size: 0.88rem;
  line-height: 1.45;
}

.sprite-uefn__live-main strong {
  display: block;
  margin-bottom: 0.2rem;
  color: #f8fafc;
  font-size: 0.95rem;
}

.sprite-uefn__live-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.sprite-uefn__live-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: stretch;
  padding: 0.55rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.62);
}

.sprite-uefn__live-card:not(:has(.sprite-uefn__live-img)) {
  grid-template-columns: minmax(0, 1fr);
}

.sprite-uefn__live-img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.55);
}

.sprite-uefn__live-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
}

.sprite-uefn__live-body h4 {
  margin: 0;
  font-size: 0.92rem;
  color: #f8fafc;
}

.sprite-uefn__live-body p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(226, 232, 240, 0.75);
}

.sprite-uefn__live-link {
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #f5c518;
  text-decoration: none;
}

.sprite-uefn__live-link:hover,
.sprite-uefn__live-link:focus-visible {
  text-decoration: underline;
}

.sprite-uefn__live-empty {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(226, 232, 240, 0.65);
}

.sprite-uefn__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.sprite-uefn__card {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--border, #d5dde8);
  background: #fff;
}

.sprite-uefn__card h4 {
  margin: 0 0 0.2rem;
  font-size: 0.98rem;
  color: #0f172a;
}

.sprite-uefn__card p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: #5b6b80;
}

.sprite-uefn__card-link {
  justify-self: start;
  font-size: 0.86rem;
  font-weight: 700;
  color: #0b4f8a;
  text-decoration: none;
}

.sprite-uefn__card-link:hover,
.sprite-uefn__card-link:focus-visible {
  text-decoration: underline;
}

body.sprites-app #sprites-news .sprite-uefn__card {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.22);
}

body.sprites-app #sprites-news .sprite-uefn__card h4 {
  color: #f8fafc;
}

body.sprites-app #sprites-news .sprite-uefn__card p {
  color: rgba(226, 232, 240, 0.78);
}

body.sprites-app #sprites-news .sprite-uefn__card-link {
  color: #f5c518;
}

/* ——— Popup Portail créateur ——— */
.sprite-creator-portal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.85rem;
  padding-bottom: calc(0.85rem + var(--sab, 0px));
}

.sprite-creator-portal[hidden] {
  display: none !important;
}

.sprite-creator-portal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(7, 18, 37, 0.62);
  cursor: pointer;
}

.sprite-creator-portal__card {
  position: relative;
  z-index: 1;
  width: min(100%, 26rem);
  padding: 1.15rem 1.15rem 1.05rem;
  border-radius: 18px 18px 14px 14px;
  border: 1px solid rgba(245, 197, 24, 0.28);
  background: linear-gradient(180deg, #152238 0%, #0d1626 100%);
  color: #e8eef8;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.sprite-creator-portal__close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.sprite-creator-portal__eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f5c518;
}

.sprite-creator-portal__title {
  margin: 0 0 0.45rem;
  padding-right: 2rem;
  font-size: 1.2rem;
  color: #fff;
}

.sprite-creator-portal__text {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(232, 238, 248, 0.88);
}

.sprite-creator-portal__note {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(203, 213, 225, 0.75);
}

.sprite-creator-portal__actions {
  display: grid;
  gap: 0.45rem;
}

.sprite-creator-portal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  border: 0;
}

.sprite-creator-portal__btn--primary {
  background: #f5c518;
  color: #141414;
}

.sprite-creator-portal__btn--ghost {
  background: transparent;
  color: rgba(232, 238, 248, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

body.sprites-creator-portal-open {
  overflow: hidden;
}

@media (min-width: 720px) {
  .sprite-creator-portal {
    align-items: center;
  }

  .sprite-creator-portal__card {
    border-radius: 16px;
  }
}

/* ——— Popup navigateur UEFN (embed Collect) ——— */
.sprite-uefn-browser {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: flex;
  flex-direction: column;
  background: #071225;
  padding-top: var(--sat, 0px);
  padding-bottom: var(--sab, 0px);
}

.sprite-uefn-browser[hidden] {
  display: none !important;
}

.sprite-uefn-browser__sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #0b1424;
}

.sprite-uefn-browser__chrome {
  display: grid;
  grid-template-columns: 2.4rem 1fr 2.4rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  background: #101b2e;
}

.sprite-uefn-browser__back,
.sprite-uefn-browser__close {
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.sprite-uefn-browser__url {
  min-width: 0;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #cbd5e1;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sprite-uefn-browser__url span {
  color: #f5c518;
  font-weight: 700;
}

.sprite-uefn-browser__url em {
  font-style: normal;
  color: #94a3b8;
}

.sprite-uefn-browser__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1rem 0.5rem;
  -webkit-overflow-scrolling: touch;
}

.sprite-uefn-browser__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f5c518;
}

.sprite-uefn-browser__title {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  color: #fff;
}

.sprite-uefn-browser__note {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(203, 213, 225, 0.78);
}

.sprite-uefn-browser__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  display: grid;
  gap: 0.55rem;
}

.sprite-uefn-browser__card {
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.72);
}

.sprite-uefn-browser__card-img {
  display: block;
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 0.55rem;
  background: rgba(2, 6, 23, 0.55);
}

.sprite-uefn-browser__card h4 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  color: #f8fafc;
}

.sprite-uefn-browser__card p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgba(226, 232, 240, 0.78);
}

.sprite-uefn-browser__card-link {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #f5c518;
  text-decoration: none;
}

.sprite-uefn-browser__card-link:hover,
.sprite-uefn-browser__card-link:focus-visible {
  text-decoration: underline;
}

.sprite-uefn-browser__pane[hidden] {
  display: none !important;
}

.sprite-uefn-browser__frame-wrap {
  margin: 0 0 0.75rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #020617;
  min-height: min(52vh, 28rem);
}

.sprite-uefn-browser__frame {
  display: block;
  width: 100%;
  height: min(52vh, 28rem);
  border: 0;
  background: #fff;
}

.sprite-uefn-browser__empty {
  margin: 0.5rem 0 0;
  font-size: 0.86rem;
  color: rgba(203, 213, 225, 0.75);
}

.sprite-uefn-browser__footer {
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem 1rem calc(0.85rem + var(--sab, 0px));
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  background: #101b2e;
}

.sprite-uefn-browser__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  border: 0;
}

.sprite-uefn-browser__btn--primary {
  background: #f5c518;
  color: #141414;
}

.sprite-uefn-browser__btn--ghost {
  background: transparent;
  color: rgba(232, 238, 248, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

body.sprites-uefn-browser-open {
  overflow: hidden;
}

.sprite-news-more {
  margin-top: 1.25rem;
}

.sprite-news-acc {
  margin: 0.55rem 0 0;
  border: 1px solid var(--border, #d5dde8);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.sprite-news-acc > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  font-weight: 700;
  color: #243447;
  user-select: none;
}

.sprite-news-acc > summary::-webkit-details-marker {
  display: none;
}

.sprite-news-acc > summary::after {
  content: '+';
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eef2f7;
  color: #4b5d75;
  font-size: 1rem;
  line-height: 1;
}

.sprite-news-acc[open] > summary::after {
  content: '−';
}

.sprite-news-acc__count {
  margin-left: auto;
  margin-right: 0.35rem;
  min-width: 1.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #eef2f7;
  color: #4b5d75;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.sprite-news-acc__body {
  padding: 0 0.75rem 0.9rem;
  border-top: 1px solid var(--border, #d5dde8);
}

/* Pas de pastilles jaune pâle / texte jaune (illisibles sur fond clair) */
body.sprites-app .shop-status {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #4b5d75;
  font-size: 0.9rem;
  font-weight: 700;
}

body.sprites-app .shop-price {
  background: #f5c518;
  border: 1px solid #d4a017;
  color: #1a1a1a;
}

body.sprites-app .skin-date {
  background: #eef2f7;
  border-color: #c5d0dc;
  color: #243447;
}

body.sprites-app .skin-date--muted {
  background: #f5f7fa;
  border-color: #d5dde8;
  color: #4b5d75;
}

body.sprites-app .skin-date--soon {
  background: #eef2f7;
  border-color: #c5d0dc;
  color: #243447;
}

body.sprites-app .stats-pill--warn {
  background: #eef2f7;
  color: #243447;
}

body.sprites-app .sprite-stats-mode-btn.is-active {
  border-color: #122033;
  background: #122033;
  color: #fff;
}

.sprite-codes-panel .shop-head,
.sprite-codes-panel .sprite-hint {
  display: none;
}

.sprite-codes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
}

.sprite-codes-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.65rem;
}

.sprite-codes-head__title .eyebrow {
  margin: 0;
}

.sprite-codes-head__title h2 {
  margin: 0;
  font-size: clamp(1.55rem, 4vw, 1.9rem);
  line-height: 1;
}

.sprite-codes-head .shop-status {
  flex-shrink: 0;
  font-size: 0.85rem;
}

.sprite-codes-status {
  min-height: 1.15em;
  margin: 0.35rem 0 0.65rem;
  font-size: 0.86rem;
}

.sprite-codes-status[hidden] {
  display: none;
}

.sprite-codes-saved,
.sprite-codes-catalog,
.sprite-codes-featured,
.sprite-codes-recent {
  margin-top: 0.35rem;
}

.sprite-codes-saved h3,
.sprite-codes-catalog h3,
.sprite-codes-featured h3,
.sprite-codes-recent h3,
.sprite-codes-results h3 {
  margin: 0 0 0.35rem;
  font-family: 'Teko', sans-serif;
  font-size: 1.45rem;
}

.sprite-codes-note {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
}

.sprite-codes-manual,
.sprite-codes-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: stretch;
  margin: 0 0 0.15rem;
}

.sprite-codes-manual__field {
  margin: 0;
}

.sprite-codes-manual .btn {
  min-height: 2.65rem;
  padding-inline: 1.1rem;
  white-space: nowrap;
}

.sprite-codes-manual input,
.sprite-codes-search input {
  width: 100%;
  margin-top: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  background: #fff;
  color: inherit;
  font-size: 1rem;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.sprite-codes-manual input:focus,
.sprite-codes-search input:focus {
  outline: 2px solid rgba(245, 197, 24, 0.55);
  outline-offset: 1px;
  border-color: #f5c518;
}

.sprite-codes-results {
  margin: 0 0 1.1rem;
}

.sprite-codes-results h3 {
  margin: 0 0 0.65rem;
  font-family: 'Teko', sans-serif;
  font-size: 1.45rem;
}

.sprite-codes-list {
  display: grid;
  gap: 0.5rem;
}

.sprite-code-card {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.sprite-code-card.is-saved {
  border-color: rgba(245, 197, 24, 0.65);
  box-shadow: 0 0 0 1px rgba(245, 197, 24, 0.12);
}

.sprite-code-card__media {
  position: relative;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  background-size: cover;
  background-position: center;
}

.sprite-code-card__media.has-image {
  background-color: #0b1220;
}

.sprite-code-card__media.has-image .sprite-code-card__initial {
  display: none;
}

.sprite-code-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.sprites-app .news-card img {
  max-height: 160px;
  width: 100%;
  object-fit: cover;
  background: #e8eef6;
}

body.sprites-app .skin-card-media img {
  max-height: 180px;
  width: 100%;
  object-fit: cover;
  background: #e8eef6;
}

.sprite-code-card__media.island-media--tone-0 { background: linear-gradient(145deg, #3b82f6, #1d4ed8); }
.sprite-code-card__media.island-media--tone-1 { background: linear-gradient(145deg, #f59e0b, #b45309); }
.sprite-code-card__media.island-media--tone-2 { background: linear-gradient(145deg, #10b981, #047857); }
.sprite-code-card__media.island-media--tone-3 { background: linear-gradient(145deg, #8b5cf6, #5b21b6); }
.sprite-code-card__media.island-media--tone-4 { background: linear-gradient(145deg, #ef4444, #b91c1c); }
.sprite-code-card__media.island-media--tone-5 { background: linear-gradient(145deg, #06b6d4, #0e7490); }

.sprite-code-card__initial {
  font-family: 'Teko', sans-serif;
  font-size: 1.55rem;
  line-height: 1;
}

.sprite-code-card__players {
  position: absolute;
  left: 0.25rem;
  bottom: 0.25rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
}

.sprite-code-card__body h4 {
  margin: 0 0 0.1rem;
  font-size: 0.98rem;
  line-height: 1.2;
}

.sprite-code-card__code {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #8a6a00;
}

.sprite-code-card__creator {
  font-weight: 700;
  color: #2563eb;
}

.sprite-code-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.sprite-code-card__actions a.btn {
  text-decoration: none;
}

.sprite-codes-catalog__more {
  margin-top: 0.85rem;
  display: flex;
  justify-content: center;
}

.sprite-codes-catalog__more .btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

.sprite-codes-empty {
  margin: 0;
  padding: 1rem 0.85rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
}

.sprite-codes-panel .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 700px) {
  .sprite-code-card {
    grid-template-columns: 3.2rem minmax(0, 1fr);
  }

  .sprite-code-card__media {
    width: 3.2rem;
    height: 3.2rem;
  }

  .sprite-code-card__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .sprite-codes-manual,
  .sprite-codes-search {
    grid-template-columns: 1fr;
  }

  .sprite-codes-manual .btn {
    width: 100%;
  }
}

.sprite-map-picker {
  margin: 0 0 0.85rem;
}

.sprite-map-picker__label {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  max-width: 22rem;
}

.sprite-map-picker__label span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b6b7f;
}

.sprite-map-picker select {
  width: 100%;
  min-height: 2.5rem;
  border: 1px solid var(--border, #d5dde8);
  border-radius: 10px;
  background: #fff;
  color: #243447;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-weight: 600;
}

.sprite-map-status {
  margin: 0.55rem 0 0;
}

.sprite-map-status.is-error {
  color: #b42318;
}

.sprite-map-credit {
  margin: 0.55rem 0 0;
  font-size: 0.86rem;
}

.sprite-map-credit a {
  color: #5b6b7f;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sprite-map-hint,
.sprite-map-login-hint {
  margin: 0.45rem 0 0;
  font-size: 0.84rem;
  color: #6b7c90;
}

.sprite-map-toolbar {
  display: grid;
  gap: 0.7rem;
  margin: 0 0 0.65rem;
  padding: 0.75rem 0.8rem;
  border-radius: 14px;
  border: 1px solid rgba(22, 40, 70, 0.12);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(243, 247, 252, 0.94));
}

.sprite-map-ping-bar {
  display: grid;
  gap: 0.55rem;
}

.sprite-map-ping-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.sprite-map-ping-bar__label {
  flex: 0 0 auto;
  min-width: 4.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5b6b7f;
}

.sprite-map-ping-colors,
.sprite-map-ping-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.sprite-map-ping-color {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 2px solid #c5d0dc;
  background: var(--ping-color, #f5c518);
  cursor: pointer;
  padding: 0;
}

.sprite-map-ping-color.is-active {
  border-color: #243447;
  box-shadow: 0 0 0 2px rgba(36, 52, 71, 0.18);
}

.sprite-map-ping-marker {
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.35rem;
  border-radius: 9px;
  border: 1px solid #c5d0dc;
  background: #fff;
  color: #243447;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}

.sprite-map-ping-marker.is-active {
  border-color: #8a6a00;
  background: #f5c518;
  color: #141414;
  box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.28);
}

.sprite-map-ping-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sprite-map-ping-clear {
  border: 1px solid #c5d0dc;
  border-radius: 8px;
  background: #fff;
  color: #243447;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

.sprite-map-ping-clear--all {
  border-color: rgba(239, 68, 68, 0.35);
  color: #b91c1c;
}

.sprite-map-board {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border, #d5dde8);
  background: #0b1220;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.sprite-map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  max-width: min(100%, 820px);
  max-height: min(82vh, 820px);
  margin-inline: auto;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background: #0b1220;
}

body.sprites-app .sprite-map-stage {
  max-height: min(72dvh, 720px);
  max-width: min(100%, 720px);
  aspect-ratio: 1 / 1;
  height: auto;
}

.sprite-map-stage.is-dragging {
  cursor: grabbing;
}

.sprite-map-world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
  transition: none;
}

.sprite-map-static__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
}

.sprite-map-pings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sprite-map-ping {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.7rem;
  height: 1.7rem;
  margin: -1.7rem 0 0 -0.85rem;
  border: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  cursor: default;
  transform-origin: 50% 100%;
  z-index: 2;
}

.sprite-map-ping__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: var(--ping-color, #f5c518);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(0, 0, 0, 0.28);
  color: #111;
  font-weight: 900;
  font-size: 0.82rem;
  line-height: 1;
}

.sprite-map-ping.is-pin .sprite-map-ping__mark {
  border-radius: 999px 999px 999px 0.35rem;
  transform: rotate(-45deg);
  color: transparent;
  font-size: 0;
}

.sprite-map-ping.is-pin .sprite-map-ping__mark::after {
  content: '!';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  color: #111;
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1;
}

.sprite-map-ping.is-dir .sprite-map-ping__mark {
  border-radius: 10px;
  min-width: 1.7rem;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25) inset,
    0 2px 10px rgba(0, 0, 0, 0.4);
}

.sprite-map-ping__name {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.18rem);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sprite-map-ping.is-mine .sprite-map-ping__mark {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.65),
    0 2px 10px rgba(0, 0, 0, 0.4);
}

body.sprites-app .sprite-map-toolbar {
  background:
    linear-gradient(160deg, rgba(15, 23, 42, 0.72), rgba(12, 22, 40, 0.88));
  border-color: rgba(148, 163, 184, 0.22);
}

body.sprites-app .sprite-map-ping-bar__label {
  color: rgba(226, 232, 240, 0.78);
}

body.sprites-app .sprite-map-ping-marker {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.35);
  color: #f8fafc;
}

body.sprites-app .sprite-map-ping-marker.is-active {
  background: #f5c518;
  border-color: #f5c518;
  color: #141414;
}

body.sprites-app .sprite-map-ping-clear {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
}

body.sprites-app .sprite-map-ping-clear--all {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fca5a5;
}

body.sprites-app .sprite-map-picker select {
  background: rgba(15, 23, 42, 0.65);
  color: #f8fafc;
  border-color: rgba(148, 163, 184, 0.35);
}

body.sprites-app #sprites-map .map-section,
body.sprites-app #sprites-map.sprites-app-panel {
  max-width: 100%;
}

body.sprites-app .sprite-map-static {
  width: calc(100% + 0px);
}

body.sprites-app .sprite-map-picker select {
  background: #fff;
  color: #243447;
}

body.sprites-app .sprite-map-credit a {
  color: #5b6b7f;
}

.sprite-shop-section {
  margin-top: 1.1rem;
}

.sprite-shop-section__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #122033;
}

.sprite-shop-shell {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 0.85rem;
  margin-top: 0.75rem;
  align-items: start;
  min-height: 420px;
}

.sprite-shop-nav {
  position: sticky;
  top: 0.5rem;
  border: 1px solid var(--border, #d5dde8);
  border-radius: 14px;
  background: linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%);
  overflow: hidden;
  max-height: min(70vh, 640px);
}

.sprite-shop-nav__scroll {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.45rem;
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sprite-shop-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #1a2b3d;
  text-align: left;
  padding: 0.65rem 0.7rem;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.sprite-shop-nav__item:hover,
.sprite-shop-nav__item:focus-visible {
  background: #fff;
  border-color: #c5d2e2;
  outline: none;
}

.sprite-shop-nav__item.is-active {
  background: #fff;
  border-color: #1f6fbf;
  box-shadow: inset 3px 0 0 #1f6fbf;
  transform: translateX(1px);
}

.sprite-shop-nav__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sprite-shop-nav__count {
  flex: 0 0 auto;
  min-width: 1.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #e5edf6;
  color: #3d536b;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.sprite-shop-nav__item.is-active .sprite-shop-nav__count {
  background: #d7e8fa;
  color: #0b4f8a;
}

.sprite-shop-stage {
  min-width: 0;
  border: 1px solid var(--border, #d5dde8);
  border-radius: 14px;
  background: #fff;
  padding: 0.75rem 0.8rem 1rem;
  min-height: 420px;
}

.sprite-shop-panel[hidden] {
  display: none !important;
}

.sprite-shop-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.sprite-shop-panel__meta {
  font-size: 0.8rem;
  font-weight: 700;
  color: #6b7c93;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .sprite-shop-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .sprite-shop-nav {
    position: relative;
    top: 0;
    max-height: none;
  }

  .sprite-shop-nav__scroll {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    padding: 0.4rem;
    gap: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }

  .sprite-shop-nav__item {
    flex: 0 0 auto;
    min-width: 8.5rem;
    max-width: 12rem;
  }

  .sprite-shop-nav__item.is-active {
    box-shadow: inset 0 -3px 0 #1f6fbf;
    transform: none;
  }

  .sprite-shop-stage {
    min-height: 0;
  }
}

body.sprites-app .sprite-shop-reset {
  margin: 0 0 0.85rem;
  font-weight: 700;
  color: #8a6a00;
}

body.sprites-app .sprite-hub-block {
  margin-top: 1.25rem;
}

body.sprites-app .sprite-hub-grid {
  margin-top: 0.5rem;
}

body.sprites-app .news-card,
body.sprites-app .skin-card,
body.sprites-app .shop-card,
body.sprites-app .playlist-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

body.sprites-app .stats-pill {
  display: inline-flex;
  align-items: center;
  margin: 0.15rem 0.2rem 0 0;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(22, 40, 70, 0.08);
  color: #4b5d75;
  font-size: 0.75rem;
  font-weight: 700;
}

body.sprites-app .stats-pill--warn {
  background: #eef2f7;
  color: #243447;
}

/* Fond collage — Stats : calque FIXED (toggle opacity = rapide) */
body.sprites-app[data-sprite-tab="stats"] .sprites-app-main {
  background-color: transparent !important;
  background-image: none !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.sprites-app[data-sprite-tab="stats"] .sprites-app-main::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.sprites-app[data-sprite-tab="stats"] .sprites-app-main::before {
  content: none;
}

html.is-stats-bg-ready body.sprites-app .sprites-app-main::after {
  content: '';
  position: fixed;
  top: var(--sprites-app-bar-total-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-color: #d5deea;
  background-image:
    linear-gradient(var(--sprites-bg-overlay), var(--sprites-bg-overlay)),
    url('/assets/images/sprites-stats-bg.jpg?v=20260805bg3');
  background-image:
    linear-gradient(var(--sprites-bg-overlay), var(--sprites-bg-overlay)),
    image-set(
      url('/assets/images/sprites-stats-bg.webp?v=20260805bg3') type('image/webp'),
      url('/assets/images/sprites-stats-bg.jpg?v=20260805bg3') type('image/jpeg')
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: opacity;
}

html.is-stats-bg-ready body.sprites-app[data-sprite-tab="stats"] .sprites-app-main::after {
  opacity: 1;
}

body.sprites-app[data-sprite-tab="stats"] .sprites-app-main > * {
  position: relative;
  z-index: 1;
}

body.sprites-app #sprites-stats.sprites-app-panel {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  box-sizing: border-box;
  padding-top: 0.85rem;
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  background: transparent;
}

body.sprites-app #sprites-stats.section {
  padding-top: 0;
  padding-bottom: 0;
}

body.sprites-app #sprites-stats .sprite-stats-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-height: calc(100dvh - 8.5rem);
  padding-bottom: 0.25rem;
}

body.sprites-app #sprites-stats .sprite-stats-panel.is-loading .sprite-stats-stack {
  opacity: 0.72;
  transition: opacity 0.2s ease;
}

body.sprites-app #sprites-stats .sprite-stats-gate {
  margin: auto;
  text-align: center;
  max-width: 22rem;
}

body.sprites-app #sprites-stats .sprite-stats-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  width: 100%;
  gap: 0.65rem;
  min-height: calc(100dvh - 8.75rem);
  padding-top: 0.55rem;
}

body.sprites-app #sprites-stats .sprite-stats-home[hidden],
body.sprites-app #sprites-stats .sprite-stats-rank-page[hidden] {
  display: none !important;
}

body.sprites-app #sprites-stats .sprite-stats-stack {
  width: min(100%, 24rem);
}

body.sprites-app #sprites-stats .sprite-stats-card--self {
  width: 100%;
  height: fit-content;
  flex: 0 0 auto;
  padding-bottom: 0.5rem;
}

body.sprites-app #sprites-stats .sprite-stats-rest {
  flex: 1 1 auto;
  min-height: 0;
}

body.sprites-app #sprites-stats .sprite-stats-anchor,
body.sprites-app #sprites-stats .sprite-stats-friend-pick {
  width: min(100%, 17.5rem);
}

body.sprites-app #sprites-stats .sprite-stats-back-btn__icon {
  color: #111;
}

body.sprites-app #sprites-stats .sprite-stats-home.is-friend-open .sprite-stats-card--self {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.sprites-app #sprites-stats .sprite-stats-view-tab.is-active {
  background: #122033;
  color: #fff;
}

body.sprites-app #sprites-stats .sprite-stats-rank-page {
  display: grid;
  gap: 0.75rem;
}

body.sprites-app #sprites-stats .sprite-stats-rank-page__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

body.sprites-app #sprites-stats .sprite-stats-rank-page__head h3 {
  margin: 0;
  font-family: 'Teko', sans-serif;
  font-size: 1.55rem;
}

body.sprites-app #sprites-stats .sprite-stats-rank__hint {
  margin: 0;
  font-size: 0.85rem;
}

body.sprites-app #sprites-stats .sprite-stats-rank {
  margin-bottom: 0.25rem;
}

body.sprites-app .sprite-stats-card,
body.sprites-app .sprite-stats-rank {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(22, 40, 70, 0.12);
}

body.sprites-app .sprite-stats-compare {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(22, 40, 70, 0.12);
}

body.sprites-app .sprite-stats-controls {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

body.sprites-app .sprite-card.is-all-owned {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
}

body.sprites-app .sprite-card.is-all-mastered {
  border-color: #f5c518 !important;
  box-shadow: 0 0 0 1px rgba(245, 197, 24, 0.45);
}

body.sprites-app .sprite-matrix-group.is-all-owned .sprite-matrix-group__head h4 {
  color: #16a34a;
}

body.sprites-app .sprite-matrix-group.is-all-mastered .sprite-matrix-group__head h4 {
  color: #ca8a04;
}

body.sprites-app .sprite-stats-filters select,
body.sprites-app .sprite-stats-friend-pick select,
body.sprites-app .sprite-stats-rank__sort select,
body.sprites-app .sprite-stats-mode-btn {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}

body.sprites-app .sprite-stats-mode-btn.is-active {
  border-color: #122033;
  background: #122033;
  color: #fff;
  box-shadow: 0 6px 14px rgba(18, 32, 51, 0.18);
}

body.sprites-app .sprite-stats-rank__row.is-head {
  color: #6b7c93;
}

body.sprites-app .sprite-friends-item__ghost {
  color: #5b6cff;
}

body.sprites-app .sprite-friends-item__remove {
  color: #e35d5d;
}

body.sprites-app .sprite-friends-back,
body.sprites-app .sprite-friends-icon-btn {
  color: var(--text);
}

body.sprites-app .sprite-variant {
  background: rgba(15, 23, 42, 0.62);
  border-color: rgba(148, 163, 184, 0.18);
}

body.sprites-app .sprite-variant__media {
  background: rgba(2, 6, 23, 0.55);
  border: 0;
  border-radius: 6px;
}

body.sprites-app .sprite-variant__name {
  color: #f8fafc;
}

body.sprites-app .sprite-toggle {
  background: transparent;
  border: 0;
  color: #5b6b82;
  box-shadow: none;
}

body.sprites-app .sprite-toggle--owned {
  color: #16a34a;
}

body.sprites-app .sprite-toggle--mastered {
  color: #b45309;
}

body.sprites-app .sprite-toggle--owned:has(input:checked) {
  background: transparent;
  border: 0;
  color: #15803d;
  box-shadow: none;
}

body.sprites-app .sprite-toggle--mastered:has(input:checked) {
  background: transparent;
  border: 0;
  color: #92400e;
  box-shadow: none;
}

body.sprites-app .sprite-progress__card strong,
body.sprites-app .sprite-card__head h3,
body.sprites-app .sprites-app-panel .shop-head h2,
body.sprites-app .sprite-friends-list-wrap h3,
body.sprites-app .sprite-friends-view h3 {
  color: var(--text);
}

body.sprites-app .sprite-matrix-card h3 {
  color: #f8fafc;
}

body.sprites-app .sprite-filter select,
body.sprites-app .sprite-friends-add input[type="text"],
body.sprites-app .sprite-friends-item__open {
  background: #fff;
  color: var(--text);
  border-color: var(--border);
}

body.sprites-app .sprite-view-toggle {
  background: #fff;
  border-color: var(--border);
}

body.sprites-app .sprite-view-btn {
  color: var(--muted);
}

body.sprites-app .sprite-tool-btn {
  background: #fff;
  border-color: rgba(180, 140, 20, 0.45);
  color: #8a6a00;
}

body.sprites-app .sprite-tool-btn--primary {
  background: var(--fn-yellow);
  border-color: var(--fn-yellow);
  color: #111;
}

body.sprites-app .sprite-tool-btn--check {
  color: var(--muted);
  border-color: var(--border);
}

body.sprites-app .sprite-matrix-card {
  background: rgba(15, 23, 42, 0.62);
  border-color: rgba(148, 163, 184, 0.18);
}

body.sprites-app .sprite-friends-item__meta {
  color: var(--muted);
}

body.sprites-app .sprite-matrix {
  gap: 1.25rem;
}

body.sprites-app .sprite-matrix-group {
  gap: 0.75rem;
}

body.sprites-app .sprite-matrix-group__grid {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 0.7rem;
}

body.sprites-app .sprite-type-section__head h3 {
  color: var(--text);
  font-size: 1.45rem;
}

body.sprites-app .sprite-matrix-group__head h4 {
  color: var(--text);
}

body.sprites-app .sprite-matrix-card {
  padding: 0.55rem;
}

body.sprites-app .sprite-matrix-card h3 {
  font-size: 0.95rem;
}

/* Compact mobile Matrix — style tracker dense */
@media (max-width: 900px) {
  body.sprites-app .sprites-collection-shell,
  body.sprites-app #checklist {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  body.sprites-app .sprite-friends-checklist-host #checklist {
    padding-left: 0;
    padding-right: 0;
  }

  body.sprites-app #checklist .shop-head .eyebrow,
  body.sprites-app #checklist .shop-head p,
  body.sprites-app #checklist .sprite-hint,
  body.sprites-app #checklist .sprite-credit {
    display: none;
  }

  body.sprites-app .sprite-events {
    margin: 0 0 0.55rem;
  }

  body.sprites-app #checklist .shop-head {
    display: none;
  }

  body.sprites-app .sprites-brand__logo {
    height: 30px;
    max-width: min(46vw, 9.5rem);
  }

  body.sprites-app .sprites-app-bar__views {
    order: 0;
  }

  body.sprites-app .sprites-app-bar__stat {
    min-width: 2.35rem;
    padding: 0.12rem 0.3rem;
  }

  body.sprites-app .sprites-app-bar__stat strong {
    font-size: 0.98rem;
  }

  body.sprites-app .sprite-matrix {
    gap: 1.15rem;
  }

  body.sprites-app .sprite-matrix-group {
    gap: 0.65rem;
  }

  body.sprites-app .sprite-matrix-group__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem 0.45rem;
  }

  body.sprites-app .sprite-type-section__head {
    margin: 0.15rem 0 0;
  }

  body.sprites-app .sprite-type-section__head h3 {
    font-size: 1.3rem;
  }

  body.sprites-app .sprite-matrix-group__head h4 {
    font-size: 1.1rem;
  }

  /* Même style carte que la vue ami */
  body.sprites-app .sprite-matrix-card {
    padding: 0.35rem 0.3rem 0.4rem;
    gap: 0.28rem;
    border-radius: 10px;
    background: #4b5160;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  body.sprites-app .sprite-matrix-card.is-owned {
    border-color: rgba(34, 197, 94, 0.55);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.22);
  }

  body.sprites-app .sprite-matrix-card.is-mastered {
    border-color: rgba(245, 197, 24, 0.55);
    box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.2);
  }

  body.sprites-app .sprite-matrix-card h3 {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.sprites-app .sprite-matrix-card .sprite-rarity {
    display: none;
  }

  body.sprites-app .sprite-matrix-card__media {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border: 0;
    border-radius: 8px;
    background: #2c3038;
    max-width: 100%;
    min-width: 0;
  }

  body.sprites-app .sprite-matrix-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.22rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  body.sprites-app .sprite-check-box {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 1.55rem;
    margin: 0;
    padding: 0.22rem 0.3rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.28rem;
    border-radius: 6px;
    border: 0;
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }

  body.sprites-app .sprite-check-box--owned {
    border-color: transparent;
  }

  body.sprites-app .sprite-check-box--mastered {
    border-color: transparent;
  }

  body.sprites-app .sprite-check-box--trade {
    border-color: rgba(56, 189, 248, 0.9);
    color: #0284c7;
  }

  body.sprites-app .sprite-check-box--trade input {
    color: #38bdf8;
  }

  body.sprites-app .sprite-check-box--trade input:checked,
  body.sprites-app .sprite-check-box--trade.is-active input:checked {
    background: #38bdf8 !important;
    border-color: #0284c7 !important;
    color: #38bdf8 !important;
  }

  body.sprites-app .sprite-check-box--trade.is-active,
  body.sprites-app .sprite-check-box--trade:has(input:checked) {
    background: rgba(56, 189, 248, 0.22) !important;
    border-color: #0ea5e9 !important;
  }

  /* Vue ami mobile : max 3 esprits par rangée */
  body.sprites-app #checklist.is-friend-view .sprite-matrix-group__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem 0.45rem;
  }

  body.sprites-app #checklist.is-friend-view .sprite-matrix-card {
    padding: 0.35rem 0.3rem 0.4rem;
    gap: 0.28rem;
    background: #4b5160;
    border-color: rgba(255, 255, 255, 0.12);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  body.sprites-app #checklist.is-friend-view .sprite-matrix-card h3 {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.sprites-app #checklist.is-friend-view .sprite-matrix-card__media {
    border-radius: 8px;
    background: #2c3038;
    max-width: 100%;
    min-width: 0;
  }

  body.sprites-app #checklist.is-friend-view .sprite-matrix-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.22rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: stretch;
    overflow: hidden;
    box-sizing: border-box;
  }

  body.sprites-app #checklist.is-friend-view .sprite-check-box--owned,
  body.sprites-app #checklist.is-friend-view .sprite-check-box--mastered,
  body.sprites-app #checklist.is-friend-view .sprite-check-box--trade {
    position: relative;
    z-index: 1;
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 0.28rem;
    min-height: 1.55rem;
    padding: 0.22rem 0.3rem;
    border-radius: 6px;
  }

  /* Texte des cases visible, contenu dans la carte */
  body.sprites-app #checklist.is-friend-view .sprite-check-box span,
  body.sprites-app #checklist.is-friend-view .sprite-check-box [data-owned-label],
  body.sprites-app #checklist.is-friend-view .sprite-check-box [data-trade-label] {
    position: static !important;
    flex: 1 1 auto;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    clip: auto !important;
    white-space: nowrap;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #e2e8f0;
    pointer-events: none;
  }

  body.sprites-app #checklist.is-friend-view .sprite-check-box {
    background: transparent;
    border-color: transparent;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have {
    z-index: 2;
  }

  body.sprites-app #checklist.is-friend-view .sprite-check-box--owned.is-readonly,
  body.sprites-app #checklist.is-friend-view .sprite-check-box--mastered.is-readonly,
  body.sprites-app #checklist.is-friend-view .sprite-check-box--trade.is-readonly,
  body.sprites-app #checklist.is-friend-view .sprite-toggle--owned.is-readonly,
  body.sprites-app #checklist.is-friend-view .sprite-toggle--mastered.is-readonly,
  body.sprites-app #checklist.is-friend-view .sprite-toggle--trade.is-readonly {
    pointer-events: none;
    cursor: default;
  }

  body.sprites-app #checklist.is-friend-view .sprite-check-box--trade[hidden],
  body.sprites-app #checklist.is-friend-view .sprite-toggle--trade[hidden] {
    display: none !important;
  }

  body.sprites-app .sprite-check-box span,
  body.sprites-app .sprite-check-box [data-owned-label] {
    position: static;
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    clip: auto;
    white-space: nowrap;
    border: 0;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.15;
    color: #e2e8f0;
    pointer-events: none;
  }

  body.sprites-app .sprite-check-box--owned span,
  body.sprites-app .sprite-check-box--owned [data-owned-label] {
    color: #4ade80;
  }

  body.sprites-app .sprite-check-box--mastered span {
    color: #fde047;
  }

  body.sprites-app .sprite-check-box input {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    margin: 0;
    border-radius: 3px;
    border: 2px solid #e2e8f0;
    background: #fff;
    display: grid;
    place-content: center;
    color: inherit;
    flex-shrink: 0;
  }

  body.sprites-app .sprite-check-box--owned input {
    border-color: #4ade80;
    color: #22c55e;
  }

  body.sprites-app .sprite-check-box--mastered input {
    border-color: #fde047;
    color: #f5c518;
  }

  body.sprites-app .sprite-check-box input::after {
    content: '';
    width: 8px;
    height: 5px;
    border-left: 2px solid #111;
    border-bottom: 2px solid #111;
    transform: rotate(-45deg) translateY(-1px);
    opacity: 0;
  }

  body.sprites-app .sprite-check-box input:checked {
    background: currentColor;
  }

  body.sprites-app .sprite-check-box input:checked::after {
    opacity: 1;
  }

  body.sprites-app .sprite-check-box--owned input:checked::after,
  body.sprites-app .sprite-check-box--mastered input:checked::after {
    border-color: #111;
  }

  body.sprites-app .sprite-matrix-card.is-trade-note {
    box-shadow: inset 0 0 0 2px rgba(120, 200, 255, 0.7);
  }

  /* Vue ami : obtenu de l’ami bien visible (vert rempli) */
  body.sprites-app #checklist.is-friend-view .sprite-check-box--owned.is-friend-owned,
  body.sprites-app #checklist.is-friend-view .sprite-check-box--owned.is-self-owned {
    background: rgba(34, 197, 94, 0.22) !important;
    border-color: #16a34a !important;
    pointer-events: auto !important;
    cursor: pointer;
  }

  body.sprites-app #checklist.is-friend-view .sprite-check-box--owned.is-friend-owned input:checked,
  body.sprites-app #checklist.is-friend-view .sprite-check-box--owned.is-self-owned input:checked {
    background: #22c55e !important;
    border-color: #15803d !important;
    color: #22c55e !important;
  }

  body.sprites-app #checklist.is-friend-view .sprite-check-box--mastered.is-self-mastered {
    background: rgba(245, 197, 24, 0.2) !important;
    border-color: #ca8a04 !important;
    pointer-events: auto !important;
    cursor: pointer;
  }

  body.sprites-app #checklist.is-friend-view .sprite-check-box--mastered.is-self-mastered input:checked {
    background: #f5c518 !important;
    border-color: #ca8a04 !important;
    color: #f5c518 !important;
  }

  body.sprites-app #checklist.is-friend-view .sprite-check-box--owned.is-self-owned input,
  body.sprites-app #checklist.is-friend-view .sprite-check-box--mastered.is-self-mastered input {
    pointer-events: none !important;
  }

  /* Obtenu + Maîtrisé mauves — contenu dans la carte */
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have,
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have {
    background: transparent !important;
    border-color: transparent !important;
    color: #c084fc !important;
    pointer-events: auto !important;
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.28rem;
    min-height: 1.55rem;
    padding: 0.18rem 0.1rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 1;
    isolation: isolate;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have [data-owned-label],
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have span {
    color: #c084fc !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have input,
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have input {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: grid !important;
    place-content: center;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    margin: 0 !important;
    border-radius: 3px;
    border: 2px solid #e9d5ff !important;
    background: #fff !important;
    color: #a855f7 !important;
    pointer-events: none !important;
    flex-shrink: 0;
  }

  /* Échanger : barre jaune dans la carte (pas de débordement) */
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have {
    background: #ffcc00 !important;
    border-color: #e6b800 !important;
    color: #111 !important;
    pointer-events: auto !important;
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.28rem;
    min-height: 1.65rem;
    padding: 0.28rem 0.35rem;
    border-radius: 6px;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 2;
    isolation: isolate;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have [data-trade-label],
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have span {
    color: #111 !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have input {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: grid !important;
    place-content: center;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    margin: 0 !important;
    border-radius: 3px;
    border: 2px solid #111 !important;
    background: #fff !important;
    color: #111 !important;
    pointer-events: none !important;
    flex-shrink: 0;
  }

  /* Labels verts / or aussi lisibles quand ami/self a coché */
  body.sprites-app #checklist.is-friend-view .sprite-check-box--owned.is-friend-owned span,
  body.sprites-app #checklist.is-friend-view .sprite-check-box--owned.is-self-owned [data-owned-label],
  body.sprites-app #checklist.is-friend-view .sprite-check-box--owned.is-friend-owned [data-owned-label] {
    color: #4ade80 !important;
  }

  body.sprites-app #checklist.is-friend-view .sprite-check-box--mastered.is-self-mastered span,
  body.sprites-app #checklist.is-friend-view .sprite-check-box--mastered:not(.is-you-have) span {
    color: #fde047 !important;
  }

  /* Offre reçue cochée : reste mauve (pas vert/or) */
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have.is-trade-incoming:has(input:checked),
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have.is-trade-incoming:has(input:checked) {
    background: rgba(168, 85, 247, 0.2) !important;
    border-color: #a855f7 !important;
    color: #7e22ce !important;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have.is-trade-incoming:has(input:checked) [data-owned-label],
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have.is-trade-incoming:has(input:checked) span {
    color: #7e22ce !important;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have.is-trade-incoming input:checked,
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have.is-trade-incoming input:checked {
    background: #a855f7 !important;
    border-color: #7e22ce !important;
    color: #a855f7 !important;
  }

  /* Sélection pour envoi : vert / or une fois coché */
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have:not(.is-trade-incoming):has(input:checked) {
    background: rgba(34, 197, 94, 0.18) !important;
    border-color: #16a34a !important;
    color: #16a34a !important;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have:not(.is-trade-incoming):has(input:checked) [data-owned-label] {
    color: #16a34a !important;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--owned.is-you-have:not(.is-trade-incoming) input:checked {
    background: #22c55e !important;
    border-color: #15803d !important;
    color: #22c55e !important;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have:not(.is-trade-incoming):has(input:checked) {
    background: rgba(245, 197, 24, 0.2) !important;
    border-color: #ca8a04 !important;
    color: #b45309 !important;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have:not(.is-trade-incoming):has(input:checked) span {
    color: #b45309 !important;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--mastered.is-you-have:not(.is-trade-incoming) input:checked {
    background: #f5c518 !important;
    border-color: #ca8a04 !important;
    color: #f5c518 !important;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have:has(input:checked),
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have.is-active {
    background: #facc15 !important;
    border-color: #a16207 !important;
    color: #111 !important;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.55);
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have:has(input:checked) [data-trade-label],
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have:has(input:checked) span {
    color: #111 !important;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-check-box--trade.is-you-have input:checked {
    background: #111 !important;
    border-color: #111 !important;
    color: #facc15 !important;
  }

  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-matrix-card.is-trade-note .sprite-check-box--owned.is-you-have,
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-matrix-card.is-trade-note .sprite-check-box--mastered.is-you-have,
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-matrix-card.is-trade-note .sprite-check-box--trade.is-you-have,
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-matrix-card.is-trade-incoming .sprite-check-box--owned.is-you-have,
  body.sprites-app #checklist:is(.is-friend-view, .is-incoming-offers) .sprite-matrix-card.is-trade-incoming .sprite-check-box--mastered.is-you-have {
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.7);
  }

  body.sprites-app #checklist.is-friend-view .sprite-matrix-card.is-friend-star .sprite-matrix-card__media,
  body.sprites-app #checklist.is-friend-view .sprite-variant.is-friend-star .sprite-variant__media {
    border: 2px solid #3b82f6;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.35);
  }
}

@media (max-width: 420px) {
  body.sprites-app .sprite-matrix-group__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/*
 * PC (souris) — toute largeur : footer 64px collé au bas de la FENÊTRE.
 * Ne s’applique pas au tactile / iPhone (shell cover-h inchangé).
 */
@media (hover: hover) and (pointer: fine) {
  body.sprites-app {
    --sprites-app-tabs-content-h: 0px;
    --sprites-app-tabs-visual-h: 0px;
    --sprites-app-tabs-h: 0px;
  }

  .sprites-app-tabs {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none;
    margin: 0 !important;
    z-index: 45 !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch !important;
    align-content: stretch !important;
    justify-content: stretch;
    gap: 0.15rem;
    border: 0 !important;
    border-top: 1px solid rgba(22, 40, 70, 0.08) !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    padding: 0.25rem 0.45rem !important;
    background:
      linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.06) !important;
    clip-path: none;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .sprites-app-tabs::after,
  .sprites-app-tabs::before {
    display: none !important;
    content: none !important;
  }

  .sprites-app-tab {
    flex: 1 1 0;
    min-width: 3.5rem;
    height: auto !important;
    max-height: none !important;
    min-height: 100% !important;
    pointer-events: auto !important;
  }

  .sprites-app-tab__label {
    display: block;
    font-size: 0.74rem;
  }

  body.sprites-app:not(.sprites-app--gate) .sprites-app-main {
    padding-bottom: 64px !important;
  }
}

@media (min-width: 901px) {
  body.sprites-app {
    --sprites-app-tabs-content-h: 0px;
    --sprites-app-tabs-visual-h: 0px;
    /* Desktop large : footer collé en bas (overlay) */
    --sprites-app-tabs-h: 0px;
    padding-bottom: 0;
  }

  .sprites-app-tabs {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none;
    margin: 0 !important;
    /* Collé au rebord bas de l’écran (app PC) */
    z-index: 45 !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch !important;
    align-content: stretch !important;
    justify-content: stretch;
    gap: 0.15rem;
    border: 0 !important;
    border-top: 1px solid rgba(22, 40, 70, 0.08) !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    padding: 0.25rem 0.45rem !important;
    background:
      linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.06) !important;
    clip-path: none;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .sprites-app-tab {
    flex: 1 1 0;
    min-width: 4.5rem;
    height: auto;
    max-height: none;
    min-height: 100%;
    padding: 0.3rem 0.45rem;
    border-radius: 12px;
    gap: 0.28rem;
  }

  .sprites-app-tabs::after,
  .sprites-app-tabs::before,
  .sprites-app-bar::before,
  body.sprites-app:not(.sprites-app--gate)::after {
    display: none !important;
    content: none !important;
  }

  .sprites-app-tab__label {
    display: block;
    font-size: 0.74rem;
  }

  .sprites-app-tab {
    gap: 0.28rem;
    --hero-size: 3.15rem;
    --hero-lift: 0.28rem;
  }

  .sprites-app-tab.is-active {
    background: rgba(245, 197, 24, 0.12) !important;
    color: #b8860b;
  }

  .sprites-app-tab.is-active .sprites-app-tab__label {
    color: #8a6a00;
  }

  .sprites-app-tab:not(.sprites-app-tab--hero).is-active::after {
    display: none;
  }

  /* Desktop : Collect mis en avant — logo V-Bucks */
  .sprites-app-tab--hero::before {
    border-width: 0;
    box-shadow: none;
    background: transparent;
  }

  .sprites-app-tab--hero .sprites-ico {
    display: none;
  }

  .sprites-app-tab--hero .sprites-app-tab__vbucks {
    width: var(--hero-size);
    height: var(--hero-size);
  }

  .sprites-app-tab--hero .sprites-app-tab__label {
    display: block;
    margin-top: 1.85rem;
    font-size: 0.74rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow:
      0 1px 0 rgba(76, 29, 149, 0.55),
      0 2px 6px rgba(56, 189, 248, 0.45),
      0 0 10px rgba(168, 85, 247, 0.35);
  }

  .sprites-app-tab--hero.is-active {
    background: transparent !important;
  }

  .sprites-app-tab--hero.is-active .sprites-ico {
    transform: translate(-50%, -50%);
  }

  .sprites-app-tab--hero.is-active::before {
    transform: translateX(-50%) scale(1.02);
  }

  body.sprites-app:not(.sprites-app--gate) .sprites-app-main {
    top: var(--sprites-app-bar-total-h);
    bottom: 0;
    margin: 0;
    height: auto;
    /* Place pour le footer collé en bas */
    padding-bottom: 64px;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  body.sprites-app:not(.sprites-app--gate) .sprites-app-main::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  html.is-webapp:has(body.sprites-app:not(.sprites-app--gate)),
  html.is-webapp:has(body.sprites-app:not(.sprites-app--gate)) body.sprites-app {
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

}