/* Styles différés pour les surfaces UI non critiques au premier rendu. */

/* Profil local, récompenses, défis et diplômes */

.local-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 12400;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 28px);
  background: rgba(5, 13, 10, 0.56);
  backdrop-filter: blur(5px);
}

.local-profile-modal[hidden] {
  display: none;
}

.local-profile-card {
  position: relative;
  width: min(94vw, 720px);
  max-height: min(88dvh, 820px);
  overflow: hidden;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(215, 168, 96, 0.32);
  border-radius: 22px;
  background:
    radial-gradient(circle at 16% 12%, rgba(215, 168, 96, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(37, 58, 48, 0.98), rgba(8, 23, 18, 0.99)),
    #0e1c16;
  color: #fff7e8;
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 246, 225, 0.09);
}

.local-profile-tabs {
  display: flex;
  gap: 8px;
  margin: 18px 44px 14px 0;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.local-profile-tabs button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(215, 168, 96, 0.24);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.06), rgba(255, 246, 213, 0.018)),
    rgba(7, 22, 17, 0.62);
  color: rgba(255, 247, 232, 0.78);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.local-profile-tabs button:hover,
.local-profile-tabs button:focus-visible {
  color: #fff7e8;
  border-color: rgba(215, 168, 96, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.12), rgba(255, 246, 213, 0.03)),
    rgba(13, 38, 30, 0.78);
  outline: none;
}

.local-profile-tabs button.is-active,
.local-profile-tabs button[aria-selected="true"] {
  color: #2e2217;
  border-color: rgba(255, 230, 167, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.98), rgba(215, 168, 96, 0.92)),
    #d7a860;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.local-profile-panels {
  max-height: min(58dvh, 520px);
  overflow: auto;
  padding-right: 3px;
}

@media (min-width: 721px) {
  .local-profile-card {
    display: flex;
    width: min(94vw, 820px);
    max-height: calc(100dvh - 36px);
    flex-direction: column;
    overflow: hidden;
    padding: 18px 30px 18px;
  }

  .local-profile-tabs {
    flex: 0 0 auto;
    margin: 12px 48px 12px 0;
  }

  .local-profile-panels {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 0 6px 72px 0;
  }

  .local-profile-actions {
    flex: 0 0 auto;
  }

  .local-profile-hero {
    padding: 16px;
  }

  .local-profile-avatar {
    width: 118px;
    height: 118px;
  }

  .local-profile-status,
  .local-profile-section {
    margin-top: 12px;
    padding: 14px 16px;
  }

  .local-profile-stats article {
    display: flex;
    min-height: 84px;
    flex-direction: column;
    justify-content: space-between;
  }

  .local-profile-stats span {
    min-height: 2.2em;
  }
}

@media (min-width: 1181px) {
  .local-profile-card {
    display: block;
    width: min(96vw, 1020px);
    max-height: calc(100dvh - 36px);
    overflow: auto;
  }

  .local-profile-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-right: 48px;
    overflow-x: visible;
    scrollbar-width: none;
  }

  .local-profile-tabs::-webkit-scrollbar {
    display: none;
  }

  .local-profile-tabs button {
    flex: 1 1 auto;
    min-width: max-content;
    padding-inline: 12px;
    font-size: 0.84rem;
  }

  .local-profile-panels {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .local-profile-actions {
    margin-top: 10px;
  }
}

@media (max-width: 720px) {
  .local-profile-editor__grid {
    grid-template-columns: 1fr;
  }

  .local-profile-avatar-grid {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 9px;
    max-height: min(44dvh, 360px);
    padding-right: 2px;
  }

  .local-profile-avatar-choice {
    gap: 6px;
    padding: 7px;
    border-radius: 13px;
  }

  .local-profile-avatar-choice img {
    height: clamp(96px, 28vw, 126px);
    border-radius: 11px;
  }

  .local-profile-avatar-choice span {
    font-size: 0.78rem;
    line-height: 1.05;
  }
}

.local-profile-panel[hidden] {
  display: none;
}

.local-profile-panel.is-active {
  display: block;
}

.local-profile-close {
  position: absolute;
  top: 12px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(215, 168, 96, 0.36);
  border-radius: 999px;
  background: rgba(7, 20, 15, 0.82);
  color: #f6dfaa;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.local-profile-close:hover,
.local-profile-close:focus-visible {
  background: rgba(215, 168, 96, 0.16);
  color: #fff7e8;
  outline: none;
}

.local-profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(215, 168, 96, 0.26);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.1), rgba(255, 246, 213, 0.025)),
    rgba(12, 43, 33, 0.72);
}

.local-profile-hero--overview {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 230, 167, 0.34);
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 231, 168, 0.18), transparent 32%),
    linear-gradient(135deg, rgba(255, 246, 213, 0.12), rgba(255, 246, 213, 0.025) 48%, rgba(12, 43, 33, 0.52)),
    rgba(8, 29, 22, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 213, 0.1),
    0 18px 34px rgba(0, 0, 0, 0.18);
}

.local-profile-avatar {
  width: clamp(104px, 14vw, 136px);
  height: clamp(104px, 14vw, 136px);
  border-radius: 24px;
  object-fit: cover;
  object-position: center top;
  border: 5px solid rgba(241, 210, 142, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 247, 213, 0.18), rgba(255, 247, 213, 0.02)),
    rgba(7, 22, 17, 0.72);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(215, 168, 96, 0.24);
}

.local-profile-heading {
  min-width: 0;
}

.local-profile-eyebrow,
.local-profile-status span,
.local-profile-section h3,
.local-profile-section-head h3,
.local-profile-stats span {
  color: #d7a860;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.local-profile-heading h2 {
  margin: 2px 0 4px;
  color: #fff7e8;
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 0.95;
}

.local-profile-country,
.local-profile-level-line,
.local-profile-warm-note,
.local-profile-section p {
  margin: 0;
  color: rgba(255, 247, 232, 0.86);
  font-weight: 800;
}

.local-profile-level-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
}

.local-profile-warm-note {
  max-width: 34ch;
  margin-top: 9px;
  color: rgba(255, 247, 232, 0.72);
  font-size: 0.92rem;
  line-height: 1.35;
}

.local-profile-star {
  width: 22px;
  height: 22px;
}

.local-profile-star.is-trophy-icon {
  width: 30px;
  height: 30px;
}

.local-profile-status,
.local-profile-section {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(215, 168, 96, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.08), rgba(255, 246, 213, 0.018)),
    rgba(9, 29, 23, 0.74);
}

.local-profile-panel > .local-profile-section:first-child,
.local-profile-panel > .local-profile-hero:first-child {
  margin-top: 0;
}

.local-profile-status {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border-color: rgba(255, 230, 167, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 213, 0.09),
    0 0 18px rgba(215, 168, 96, 0.08);
}

.local-profile-status > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.local-profile-status p {
  margin: 0;
  color: rgba(255, 247, 232, 0.76);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.3;
}

.local-profile-status strong {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 230, 167, 0.46);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.16), rgba(255, 246, 213, 0.04)),
    rgba(10, 35, 27, 0.78);
  color: #ffe4a8;
  font-size: clamp(1.08rem, 2.5vw, 1.38rem);
  box-shadow: 0 0 14px rgba(215, 168, 96, 0.12);
  text-align: right;
}

.local-profile-section-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  margin-bottom: 10px;
}

.local-profile-section h3,
.local-profile-section-head h3 {
  margin: 0;
}

.local-profile-section-head strong {
  color: #ffe4a8;
  font-size: 1.2rem;
}

.local-profile-progress-card {
  border-color: rgba(255, 230, 167, 0.32);
  background:
    radial-gradient(circle at 92% 18%, rgba(215, 168, 96, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(255, 246, 213, 0.09), rgba(255, 246, 213, 0.018)),
    rgba(8, 25, 19, 0.82);
}

.local-profile-xp-bar {
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(215, 168, 96, 0.38);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.05)),
    rgba(6, 20, 16, 0.76);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 244, 205, 0.08);
}

.local-profile-xp-bar span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 247, 213, 0.7), rgba(255, 247, 213, 0.1)),
    linear-gradient(90deg, #916227, #d7a860 54%, #fff0b7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 14px rgba(215, 168, 96, 0.34);
  transition: width 420ms ease;
}

.local-profile-section p {
  margin-top: 8px;
  font-size: 0.94rem;
}

.local-profile-progress-card p {
  color: rgba(255, 247, 232, 0.82);
  font-weight: 850;
}

.local-profile-edit-open {
  width: fit-content;
  min-height: 34px;
  margin-top: 12px;
  padding: 0 13px;
  border: 1px solid rgba(215, 168, 96, 0.38);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.11), rgba(255, 246, 213, 0.03)),
    rgba(7, 22, 17, 0.68);
  color: #fff7e8;
  font-weight: 900;
  cursor: pointer;
}

.local-profile-edit-open:hover,
.local-profile-edit-open:focus-visible {
  border-color: rgba(255, 230, 167, 0.62);
  outline: none;
}

.local-profile-editor[hidden] {
  display: none;
}

.local-profile-editor__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.local-profile-editor__grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.local-profile-avatar-picker {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.local-profile-editor__grid span {
  color: #d7a860;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.local-profile-editor__grid input,
.local-profile-editor__grid select {
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(215, 168, 96, 0.32);
  border-radius: 12px;
  background: rgba(7, 22, 17, 0.72);
  color: #fff7e8;
  font: inherit;
  font-weight: 800;
}

.local-profile-editor__grid input:focus,
.local-profile-editor__grid select:focus {
  border-color: rgba(255, 230, 167, 0.72);
  outline: none;
  box-shadow: 0 0 0 3px rgba(215, 168, 96, 0.16);
}

.local-profile-avatar-picker__current {
  display: flex;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid rgba(215, 168, 96, 0.32);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.1), rgba(255, 246, 213, 0.03)),
    rgba(7, 22, 17, 0.72);
  color: #fff7e8;
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.local-profile-avatar-picker__current img {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 230, 167, 0.52);
  border-radius: 12px;
  object-fit: cover;
  object-position: center top;
}

.local-profile-avatar-picker__current strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.local-profile-avatar-picker__current:hover,
.local-profile-avatar-picker__current:focus-visible {
  border-color: rgba(255, 230, 167, 0.72);
  outline: none;
  box-shadow: 0 0 0 3px rgba(215, 168, 96, 0.16);
}

.local-profile-avatar-grid[hidden] {
  display: none;
}

.avatar-filter-bar[hidden] {
  display: none;
}

.avatar-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
  max-width: 100%;
  overflow-x: visible;
  padding: 2px 2px 6px;
}

.avatar-filter-group {
  display: contents;
}

.avatar-filter-group__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.avatar-filter-bar--setup {
  margin: 0 0 12px;
}

.avatar-filter-button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 7px;
  border: 1px solid rgba(215, 168, 96, 0.24);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.06), rgba(255, 246, 213, 0.018)),
    rgba(7, 22, 17, 0.62);
  color: rgba(255, 247, 232, 0.78);
  font-size: 0.66rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 120ms ease,
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

@media (min-width: 900px) {
  .avatar-filter-bar {
    gap: 3px;
  }

  .avatar-filter-button {
    min-height: 30px;
    padding-inline: 8px;
    font-size: 0.76rem;
  }
}

.avatar-filter-button:hover,
.avatar-filter-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(215, 168, 96, 0.46);
  color: #fff7e8;
  outline: none;
}

.avatar-filter-button.is-active,
.avatar-filter-button[aria-pressed="true"] {
  border-color: rgba(255, 230, 167, 0.68);
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.96), rgba(215, 168, 96, 0.9)),
    #d7a860;
  color: #2e2217;
  box-shadow:
    0 7px 14px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.avatar-filter-empty {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 18px 16px;
  border: 1px dashed rgba(215, 168, 96, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.045), rgba(255, 246, 213, 0.015)),
    rgba(5, 18, 14, 0.5);
  color: rgba(255, 247, 232, 0.76);
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
}

.local-profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 14px;
  max-height: min(50dvh, 480px);
  margin-top: 14px;
  overflow: auto;
  padding: 4px 6px 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.local-profile-avatar-choice {
  display: grid;
  min-width: 0;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(212, 184, 141, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(11, 18, 16, 0.5);
  color: #f7ead0;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  transition:
    transform 120ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.local-profile-avatar-choice img {
  width: 100%;
  height: clamp(112px, 12vw, 170px);
  border: 0;
  border-radius: 16px;
  background: rgba(15, 23, 19, 0.82);
  object-fit: cover;
  object-position: center top;
}

.local-profile-avatar-choice span {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: 0.98rem;
  line-height: 1.1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.avatar-card-badges em {
  display: inline-flex;
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid rgba(215, 168, 96, 0.22);
  border-radius: 999px;
  background: rgba(215, 168, 96, 0.12);
  color: rgba(255, 232, 178, 0.9);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.local-profile-avatar-choice.is-avatar-new-reward,
.setup-avatar-option.is-avatar-new-reward {
  position: relative;
  border-color: rgba(255, 215, 128, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 225, 0.12),
    0 0 0 2px rgba(215, 168, 96, 0.16),
    0 0 22px rgba(215, 168, 96, 0.18);
}

.local-profile-avatar-choice.is-avatar-new-reward::after,
.setup-avatar-option.is-avatar-new-reward::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 0;
  border: 1px solid rgba(255, 224, 150, 0.28);
  border-radius: inherit;
  pointer-events: none;
}

.local-profile-avatar-choice.is-avatar-new-reward > *,
.setup-avatar-option.is-avatar-new-reward > * {
  position: relative;
  z-index: 1;
}

.local-profile-avatar-choice:hover,
.local-profile-avatar-choice:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(223, 193, 147, 0.34);
  color: #ffe4a8;
  outline: none;
}

.local-profile-avatar-choice.is-selected {
  border-color: rgba(239, 203, 136, 0.5);
  color: #ffe4a8;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 225, 0.1),
    0 10px 18px rgba(0, 0, 0, 0.16),
    0 0 0 2px rgba(215, 168, 96, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 240, 205, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(17, 28, 23, 0.58);
}

.local-profile-avatar-choice.is-avatar-locked {
  position: relative;
  border-color: rgba(222, 190, 126, 0.26);
  background:
    linear-gradient(180deg, rgba(43, 75, 61, 0.18), rgba(255, 255, 255, 0.02)),
    rgba(11, 18, 16, 0.54);
}

.local-profile-avatar-choice.is-avatar-locked::before {
  content: "";
  position: absolute;
  inset: 10px 10px auto;
  aspect-ratio: 1 / 1;
  z-index: 1;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(6, 16, 13, 0.2), rgba(236, 200, 129, 0.12)),
    radial-gradient(circle at 50% 18%, rgba(255, 238, 191, 0.13), transparent 42%);
  box-shadow: inset 0 0 0 1px rgba(239, 205, 137, 0.14);
  pointer-events: none;
}

.local-profile-avatar-choice.is-avatar-locked img {
  filter: saturate(0.74) contrast(0.92) brightness(0.86) blur(0.35px);
}

.local-profile-avatar-choice .avatar-unlock-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(235, 203, 139, 0.42);
  border-radius: 999px;
  background: rgba(18, 52, 40, 0.86);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
  color: #f2d186;
  font-size: 0.74rem;
  line-height: 1;
}

.local-profile-avatar-choice .avatar-unlock-progress {
  display: grid;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-top: -2px;
  padding: 4px 7px;
  border: 1px solid rgba(215, 168, 96, 0.18);
  border-radius: 999px;
  background: rgba(16, 46, 36, 0.68);
  color: rgba(255, 236, 192, 0.94);
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

.local-profile-avatar-choice .avatar-unlock-progress__label {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  text-overflow: ellipsis;
}

.local-profile-avatar-choice .avatar-unlock-progress__bar {
  display: block;
  width: 100%;
  min-width: 42px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
}

.local-profile-avatar-choice .avatar-unlock-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d1a854, #f0d08a);
}

.local-profile-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.local-profile-editor__actions button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(215, 168, 96, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.1), rgba(255, 246, 213, 0.03)),
    rgba(7, 22, 17, 0.7);
  color: #fff7e8;
  font-weight: 900;
  cursor: pointer;
}

.local-profile-editor__actions button:first-child {
  background:
    linear-gradient(180deg, rgba(255, 236, 178, 0.2), rgba(215, 168, 96, 0.1)),
    rgba(10, 35, 27, 0.82);
  color: #ffe4a8;
}

.local-profile-editor__actions button:hover,
.local-profile-editor__actions button:focus-visible {
  border-color: rgba(255, 230, 167, 0.62);
  outline: none;
}

.local-profile-editor__message {
  min-height: 1.25em;
  color: rgba(255, 247, 232, 0.78);
}

.local-profile-editor__message[data-state="success"] {
  color: var(--good);
}

.local-profile-editor__message[data-state="error"] {
  color: var(--warn);
}

.local-profile-backup p {
  color: rgba(255, 247, 232, 0.72);
}

.local-profile-backup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.local-profile-backup__actions button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(215, 168, 96, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.1), rgba(255, 246, 213, 0.03)),
    rgba(7, 22, 17, 0.7);
  color: #fff7e8;
  font-weight: 900;
  cursor: pointer;
}

.local-profile-backup__actions button:hover,
.local-profile-backup__actions button:focus-visible {
  border-color: rgba(255, 230, 167, 0.62);
  outline: none;
}

.local-profile-backup__message {
  min-height: 1.25em;
  color: rgba(255, 247, 232, 0.78);
}

.local-profile-backup__message[data-state="success"] {
  color: var(--good);
}

.local-profile-backup__message[data-state="error"] {
  color: var(--warn);
}

.local-profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.local-profile-stats article,
.local-profile-records article,
.local-profile-modes article,
.local-profile-recent-matches article,
.local-profile-stats-grid article,
.local-profile-difficulty-grid article,
.local-profile-stats-recent article {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(215, 168, 96, 0.2);
  border-radius: 13px;
  background: rgba(7, 22, 17, 0.48);
}

.local-profile-overview-summary .local-profile-stats article {
  display: grid;
  min-height: 96px;
  align-content: start;
  gap: 12px;
  border-color: rgba(215, 168, 96, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.08), rgba(255, 246, 213, 0.018)),
    rgba(7, 22, 17, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 246, 213, 0.06);
}

.local-profile-overview-summary .local-profile-summary-card--wide {
  grid-column: span 2;
}

.local-profile-stats span,
.local-profile-records span,
.local-profile-stats-grid span {
  display: block;
  margin-bottom: 8px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

.local-profile-stats strong,
.local-profile-records strong,
.local-profile-stats-grid strong {
  color: #fff7e8;
  font-size: clamp(1.28rem, 2.5vw, 1.72rem);
  line-height: 1;
}

.local-profile-overview-summary .local-profile-stats strong {
  color: #fff7e8;
}

.local-profile-stats-grid small,
.local-profile-records small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 247, 232, 0.76);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
}

.local-profile-records,
.local-profile-modes {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.local-profile-records {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.local-profile-modes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.local-profile-modes article {
  display: grid;
  gap: 5px;
}

.local-profile-stat-block {
  margin-top: 14px;
}

.local-profile-stat-block h4 {
  margin: 0 0 8px;
  color: #d7a860;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.local-profile-stats-grid,
.local-profile-difficulty-grid {
  display: grid;
  gap: 10px;
}

.local-profile-stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.local-profile-difficulty-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.local-profile-difficulty-grid article,
.local-profile-stats-recent article {
  display: grid;
  gap: 5px;
}

.local-profile-difficulty-grid strong {
  color: #ffe4a8;
  font-size: 1.18rem;
}

.local-profile-difficulty-grid span,
.local-profile-stats-recent article,
.local-profile-stats-recent p {
  color: rgba(255, 247, 232, 0.84);
  font-size: 0.98rem;
  line-height: 1.35;
}

.local-profile-stats-recent {
  display: grid;
  gap: 8px;
}

.local-profile-record-word {
  display: block;
  overflow-wrap: anywhere;
  color: #fff7e8;
  font-size: clamp(1.2rem, 2.7vw, 1.6rem);
  line-height: 1.08;
}

.local-profile-modes strong {
  color: #ffe4a8;
  font-size: 1.05rem;
}

.local-profile-modes span,
.local-profile-chrono span,
.local-profile-saved-game p,
.local-profile-saved-game__details span,
.local-profile-recent-matches p,
.local-profile-recent-matches article,
.local-profile-rewards p {
  color: rgba(255, 247, 232, 0.84);
  font-size: 0.88rem;
  line-height: 1.35;
}

.local-profile-chrono {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.local-profile-chrono span,
.local-profile-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(215, 168, 96, 0.24);
  border-radius: 999px;
  background: rgba(7, 22, 17, 0.52);
}

.local-profile-saved-game,
.local-profile-recent-matches,
.local-profile-rewards {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.local-profile-history-intro p {
  max-width: 62ch;
  color: rgba(255, 247, 232, 0.78);
}

.local-profile-recent-summary-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.local-profile-recent-summary-cards article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(215, 168, 96, 0.22);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.07), rgba(255, 246, 213, 0.018)),
    rgba(7, 22, 17, 0.5);
}

.local-profile-recent-summary-cards span {
  color: #d7a860;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.local-profile-recent-summary-cards strong {
  color: #fff7e8;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.08;
}

.local-profile-history-empty {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(215, 168, 96, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.07), rgba(255, 246, 213, 0.018)),
    rgba(7, 22, 17, 0.5);
}

.local-profile-history-empty strong {
  color: #fff7e8;
  font-size: 1.02rem;
  line-height: 1.25;
}

.local-profile-history-empty p {
  margin: 0;
  color: rgba(255, 247, 232, 0.76);
}

.local-profile-match-card {
  display: grid;
  gap: 12px;
  border-color: rgba(215, 168, 96, 0.25);
  background:
    radial-gradient(circle at 92% 12%, rgba(215, 168, 96, 0.11), transparent 34%),
    linear-gradient(180deg, rgba(255, 246, 213, 0.08), rgba(255, 246, 213, 0.018)),
    rgba(7, 22, 17, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 246, 213, 0.06);
}

.local-profile-match-card__head,
.local-profile-match-card__score {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.local-profile-match-card__head strong {
  color: #ffe4a8;
  font-size: 1.05rem;
}

.local-profile-match-card__head time {
  color: rgba(255, 247, 232, 0.68);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.local-profile-match-card__score span {
  color: #d7a860;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.local-profile-match-card__score strong {
  color: #fff7e8;
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  line-height: 1;
}

.local-profile-match-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.local-profile-match-card__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(215, 168, 96, 0.22);
  border-radius: 999px;
  background: rgba(7, 22, 17, 0.48);
  color: rgba(255, 247, 232, 0.82);
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.1;
}

.local-profile-rewards {
  gap: 14px;
}

.local-profile-saved-game__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.local-profile-saved-game__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.local-profile-saved-game__actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.12), rgba(255, 246, 213, 0.03)),
    rgba(9, 29, 23, 0.84);
  color: #fff7e8;
  font-weight: 800;
  cursor: pointer;
}

.local-profile-saved-game__actions button:hover,
.local-profile-saved-game__actions button:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.2), rgba(255, 246, 213, 0.05)),
    rgba(14, 45, 35, 0.94);
  outline: none;
}

.local-profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.local-profile-badges span {
  color: #d7a860;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.local-profile-badges span.is-unlocked {
  color: #113023;
  border-color: rgba(255, 230, 167, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.98), rgba(215, 168, 96, 0.92)),
    #d7a860;
}

.local-profile-badges span.is-next {
  color: #fff7e8;
  border-color: rgba(215, 168, 96, 0.68);
  box-shadow: 0 0 16px rgba(215, 168, 96, 0.2);
}

.local-profile-badges span.is-locked {
  opacity: 0.68;
}

.profile-trophy-current {
  display: grid;
  min-width: 132px;
  justify-items: center;
  gap: 4px;
  align-self: stretch;
  padding: 10px;
  border: 1px solid rgba(215, 168, 96, 0.26);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 228, 168, 0.18), transparent 52%),
    rgba(7, 22, 17, 0.42);
  text-align: center;
}

.profile-trophy-current.is-locked {
  align-content: center;
  opacity: 0.78;
}

.profile-trophy-current span,
.profile-reward-card span {
  color: #d7a860;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.profile-trophy-current small {
  color: rgba(255, 247, 232, 0.72);
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.15;
}

.profile-trophy-current strong,
.profile-reward-card strong {
  color: #fff7e8;
  font-size: 0.9rem;
  line-height: 1.1;
}

.profile-reward-card strong {
  font-size: 1.02rem;
  line-height: 1.12;
}

.profile-trophy-image {
  display: block;
  width: clamp(70px, 9vw, 102px);
  height: clamp(70px, 9vw, 102px);
  object-fit: contain;
  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 10px rgba(215, 168, 96, 0.18));
}

.profile-reward-current-showcase {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(255, 230, 167, 0.5);
  border-radius: 18px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 228, 168, 0.22), transparent 40%),
    linear-gradient(135deg, rgba(37, 74, 55, 0.92), rgba(7, 22, 17, 0.9)),
    rgba(10, 35, 27, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 213, 0.14),
    0 0 24px rgba(215, 168, 96, 0.12);
}

.profile-reward-current-showcase .profile-trophy-image {
  width: clamp(86px, 12vw, 124px);
  height: clamp(86px, 12vw, 124px);
}

.profile-reward-current-showcase:not(.is-locked) .profile-trophy-image {
  animation: profileTrophyGlow 4.5s ease-in-out infinite;
}

.profile-reward-current-showcase span,
.profile-reward-card small {
  color: #d7a860;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.profile-reward-current-showcase strong {
  display: block;
  margin-top: 3px;
  color: #fff7e8;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.05;
}

.profile-reward-current-showcase p,
.profile-reward-next p {
  margin: 7px 0 0;
  color: rgba(255, 247, 232, 0.86);
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.profile-reward-next p strong {
  color: #ffe4a8;
  font-size: 1.08rem;
  font-weight: 900;
}

.profile-reward-progress-summary {
  display: grid;
  gap: 10px;
  margin-top: 13px;
  padding: 12px;
  border: 1px solid rgba(215, 168, 96, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.08), rgba(255, 246, 213, 0.02)),
    rgba(5, 17, 13, 0.42);
}

.profile-reward-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.profile-reward-progress-head span,
.profile-reward-progress-metrics span {
  color: #d7a860;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.profile-reward-progress-head strong {
  color: #ffe4a8;
  font-size: 1.26rem;
  line-height: 1;
}

.profile-reward-progress-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-reward-progress-metrics article {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(215, 168, 96, 0.16);
  border-radius: 11px;
  background: rgba(7, 22, 17, 0.48);
}

.profile-reward-progress-metrics strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: #fff7e8;
  font-size: 0.98rem;
  line-height: 1.16;
}

.profile-reward-current-showcase.is-locked {
  border-color: rgba(215, 168, 96, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.08), rgba(255, 246, 213, 0.02)),
    rgba(7, 22, 17, 0.62);
}

.profile-reward-current-showcase.is-complete {
  border-color: rgba(255, 230, 167, 0.72);
}

.profile-reward-empty-trophy {
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 18px;
  background: rgba(7, 22, 17, 0.56);
  color: rgba(255, 228, 168, 0.68);
  font-size: 2.2rem;
  font-weight: 900;
}

.profile-reward-next {
  padding: 13px 14px;
  border: 1px solid rgba(215, 168, 96, 0.22);
  border-radius: 15px;
  background: rgba(7, 22, 17, 0.44);
}

.profile-reward-next p:first-child {
  margin-top: 0;
}

.profile-reward-progress {
  height: 12px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(215, 168, 96, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.05)),
    rgba(6, 20, 16, 0.76);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.46),
    0 1px 0 rgba(255, 244, 205, 0.08);
}

.profile-reward-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 247, 213, 0.72), rgba(255, 247, 213, 0.08)),
    linear-gradient(90deg, #8f5d21, #d7a860 56%, #fff0b7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 0 14px rgba(215, 168, 96, 0.3);
  transition: width 420ms ease;
}

.profile-reward-grid {
  display: flex;
  gap: 10px;
  margin-top: 2px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.profile-reward-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.profile-reward-grid-head h4 {
  margin: 0;
  color: #f4c774;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-challenges {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(215, 168, 96, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.055), rgba(255, 246, 213, 0.015)),
    rgba(7, 22, 17, 0.62);
}

.profile-challenges--renewable {
  border-color: rgba(244, 199, 116, 0.26);
  background:
    radial-gradient(circle at 12% 0%, rgba(244, 199, 116, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(255, 246, 213, 0.06), rgba(255, 246, 213, 0.018)),
    rgba(7, 24, 18, 0.68);
}

.profile-challenges__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-challenges__head h4 {
  margin: 0;
  color: #f4c774;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-challenges__head span {
  color: rgba(255, 247, 232, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
}

.profile-challenges__note {
  margin: -3px 0 0;
  color: rgba(255, 247, 232, 0.62);
  font-size: 0.78rem;
  font-style: italic;
}

.profile-challenges__grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.profile-challenge-card {
  display: grid;
  flex: 0 0 min(300px, 72vw);
  gap: 6px;
  min-height: 108px;
  padding: 9px 11px;
  border: 1px solid rgba(215, 168, 96, 0.18);
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 0%, rgba(215, 168, 96, 0.13), transparent 46%),
    rgba(8, 27, 21, 0.72);
  scroll-snap-align: start;
}

.profile-challenge-card.is-completed {
  border-color: rgba(255, 224, 150, 0.42);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 224, 150, 0.2), transparent 48%),
    rgba(14, 44, 34, 0.82);
}

.profile-challenge-card--renewable {
  flex-basis: min(280px, 72vw);
}

.profile-challenge-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.profile-challenge-card__top span,
.profile-challenge-card__top strong {
  color: rgba(255, 247, 232, 0.74);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profile-challenge-card.is-completed .profile-challenge-card__top strong {
  color: #f4c774;
}

.profile-challenge-card h5 {
  margin: 0;
  color: #fff7e8;
  font-size: 0.94rem;
  line-height: 1.1;
}

.profile-challenge-card p {
  margin: 0;
  color: rgba(255, 247, 232, 0.78);
  font-size: 0.82rem;
  line-height: 1.26;
}

.profile-challenge-card small {
  color: rgba(255, 247, 232, 0.66);
  font-size: 0.76rem;
  font-weight: 800;
}

.profile-challenge-card__progress {
  color: rgba(255, 239, 191, 0.88);
}

.profile-challenge-card__date {
  margin-top: -2px;
  font-size: 0.72rem;
  font-weight: 700;
}

.profile-challenge-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.36);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.42);
}

.profile-challenge-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8a6129, #d7a860 58%, #fff0b7);
}

.profile-reward-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  flex: 0 0 min(340px, 82vw);
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(215, 168, 96, 0.22);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.08), rgba(255, 246, 213, 0.018)),
    rgba(7, 22, 17, 0.5);
  scroll-snap-align: start;
}

.profile-reward-card .profile-trophy-image {
  width: 64px;
  height: 64px;
  justify-self: start;
}

.profile-reward-card > div {
  display: grid;
  gap: 5px;
  justify-items: start;
  min-width: 0;
  text-align: left;
}

.profile-reward-card__title {
  display: block;
  text-align: left;
}

.profile-reward-card__title span {
  display: inline;
  margin-right: 5px;
  white-space: nowrap;
}

.profile-reward-card em {
  display: inline-flex;
  width: fit-content;
  margin-top: 1px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(215, 168, 96, 0.12);
  color: #ffe4a8;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.profile-reward-card small {
  display: block;
  color: rgba(255, 247, 232, 0.68);
  font-size: 0.68rem;
  text-align: left;
  text-transform: uppercase;
}

.profile-reward-card p {
  margin: 2px 0 0;
  font-size: 0.84rem;
  line-height: 1.32;
  text-align: left;
}

.profile-reward-card.is-unlocked {
  border-color: rgba(255, 230, 167, 0.46);
  box-shadow: 0 0 18px rgba(215, 168, 96, 0.1);
}

.profile-reward-card.is-current {
  border-color: rgba(255, 230, 167, 0.86);
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 228, 168, 0.18), transparent 44%),
    linear-gradient(180deg, rgba(255, 246, 213, 0.1), rgba(255, 246, 213, 0.02)),
    rgba(12, 43, 33, 0.76);
  box-shadow:
    0 0 24px rgba(215, 168, 96, 0.24),
    inset 0 1px 0 rgba(255, 246, 213, 0.16);
}

.profile-reward-card.is-current .profile-trophy-image {
  animation: profileTrophyGlow 4.5s ease-in-out infinite;
}

.profile-reward-card.is-next {
  border-color: rgba(255, 230, 167, 0.72);
  box-shadow:
    0 0 20px rgba(215, 168, 96, 0.16),
    inset 0 1px 0 rgba(255, 246, 213, 0.1);
}

.profile-reward-card.is-locked {
  opacity: 0.72;
}

.profile-reward-card.is-locked .profile-trophy-image {
  filter: grayscale(0.85) opacity(0.72) drop-shadow(0 5px 9px rgba(0, 0, 0, 0.28));
}

@keyframes profileTrophyGlow {
  0%,
  100% {
    transform: translateY(0);
    filter:
      drop-shadow(0 8px 12px rgba(0, 0, 0, 0.32))
      drop-shadow(0 0 10px rgba(215, 168, 96, 0.2));
  }
  50% {
    transform: translateY(-3px);
    filter:
      drop-shadow(0 10px 14px rgba(0, 0, 0, 0.34))
      drop-shadow(0 0 18px rgba(255, 228, 168, 0.34));
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-reward-current-showcase:not(.is-locked) .profile-trophy-image,
  .profile-reward-card.is-current .profile-trophy-image {
    animation: none;
  }
}

.local-profile-diploma-intro {
  max-width: 62ch;
}

.profile-diploma-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.profile-diploma-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 230, 167, 0.42);
  border-radius: 15px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 228, 168, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(255, 246, 213, 0.08), rgba(255, 246, 213, 0.018)),
    rgba(7, 22, 17, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 246, 213, 0.1);
}

.profile-diploma-card.is-latest {
  box-shadow:
    0 0 22px rgba(215, 168, 96, 0.18),
    inset 0 1px 0 rgba(255, 246, 213, 0.14);
}

.profile-diploma-card.is-new {
  border-color: rgba(255, 220, 132, 0.72);
  box-shadow:
    0 0 24px rgba(215, 168, 96, 0.28),
    0 0 0 1px rgba(255, 230, 167, 0.18),
    inset 0 1px 0 rgba(255, 246, 213, 0.16);
}

.profile-diploma-card.is-unlocking {
  animation: diploma-card-unlock 4s ease-in-out;
}

.profile-diploma-card.is-unlocking::before {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 236, 174, 0.2) 48%,
    rgba(255, 236, 174, 0.36) 50%,
    transparent 64%
  );
  animation: diploma-card-shine 4s ease-in-out;
}

.profile-diploma-card.is-unlocking img {
  animation: diploma-trophy-pulse 4s ease-in-out;
}

.profile-diploma-card.is-locked {
  border-color: rgba(215, 168, 96, 0.18);
  opacity: 0.72;
}

.profile-diploma-card img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter:
    drop-shadow(0 7px 10px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 10px rgba(215, 168, 96, 0.18));
}

.profile-diploma-card.is-locked img {
  filter: grayscale(0.9) opacity(0.68);
}

.profile-diploma-card span {
  display: block;
  color: #d7a860;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.profile-diploma-card strong {
  display: block;
  margin-top: 3px;
  color: #fff7e8;
  font-size: 1rem;
  line-height: 1.08;
}

.profile-diploma-card p {
  margin: 6px 0 0;
  color: rgba(255, 247, 232, 0.75);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
}

.profile-diploma-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 8px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 230, 167, 0.72);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe7a8, #d7a860);
  color: #2e2217;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-diploma-card__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-diploma-card__actions button,
.profile-diploma-card__actions span {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.12), rgba(255, 246, 213, 0.03)),
    rgba(9, 29, 23, 0.84);
  color: #fff7e8;
  font-size: 0.78rem;
  font-weight: 900;
}

.profile-diploma-card__actions button {
  cursor: pointer;
}

.profile-diploma-card__actions button:hover,
.profile-diploma-card__actions button:focus-visible {
  border-color: rgba(255, 230, 167, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.2), rgba(255, 246, 213, 0.05)),
    rgba(14, 45, 35, 0.94);
  outline: none;
}

.profile-diploma-card__actions span {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 247, 232, 0.58);
}

.diploma-unlock-toast {
  position: fixed;
  right: clamp(16px, 4vw, 44px);
  bottom: clamp(18px, 5vw, 52px);
  z-index: 12900;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  width: min(430px, calc(100vw - 28px));
  padding: 16px;
  border: 1px solid rgba(255, 230, 167, 0.58);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 230, 167, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(35, 67, 49, 0.98), rgba(6, 26, 19, 0.98));
  color: #fff7e8;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 246, 213, 0.16);
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 180ms ease, transform 220ms ease;
}

.diploma-unlock-toast[hidden] {
  display: none;
}

.diploma-unlock-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.diploma-unlock-toast__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffe7a8, #c99342);
  color: #123125;
  font-size: 1.2rem;
  box-shadow: 0 0 18px rgba(215, 168, 96, 0.35);
}

.diploma-unlock-toast h3 {
  margin: 0;
  color: #ffe7a8;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.diploma-unlock-toast p {
  margin: 6px 0 0;
  font-weight: 800;
  line-height: 1.28;
}

.diploma-unlock-toast__subtext {
  color: rgba(255, 247, 232, 0.78);
  font-size: 0.92rem;
}

.diploma-unlock-toast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
}

.diploma-unlock-toast__actions button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(255, 230, 167, 0.48);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.13), rgba(255, 246, 213, 0.04)),
    rgba(9, 29, 23, 0.9);
  color: #fff7e8;
  font-weight: 950;
  cursor: pointer;
}

.diploma-unlock-toast__actions button:first-child {
  background: linear-gradient(180deg, #ffe8af, #d7a860);
  color: #2e2217;
}

.diploma-unlock-toast__actions button:hover,
.diploma-unlock-toast__actions button:focus-visible {
  border-color: rgba(255, 246, 213, 0.76);
  outline: none;
  transform: translateY(-1px);
}

@keyframes diploma-card-unlock {
  0% {
    border-color: rgba(255, 220, 132, 0.72);
    box-shadow:
      0 0 18px rgba(215, 168, 96, 0.22),
      inset 0 1px 0 rgba(255, 246, 213, 0.14);
    transform: scale(1);
  }
  18%,
  72% {
    box-shadow:
      0 0 34px rgba(255, 220, 132, 0.46),
      0 0 0 1px rgba(255, 230, 167, 0.32),
      inset 0 1px 0 rgba(255, 246, 213, 0.24);
    transform: scale(1.012);
  }
  100% {
    box-shadow:
      0 0 24px rgba(215, 168, 96, 0.28),
      0 0 0 1px rgba(255, 230, 167, 0.18),
      inset 0 1px 0 rgba(255, 246, 213, 0.16);
    transform: scale(1);
  }
}

@keyframes diploma-card-shine {
  0%,
  18% {
    transform: translateX(-58%) rotate(0.001deg);
    opacity: 0;
  }
  42% {
    opacity: 1;
  }
  76%,
  100% {
    transform: translateX(58%) rotate(0.001deg);
    opacity: 0;
  }
}

@keyframes diploma-trophy-pulse {
  0%,
  100% {
    filter:
      drop-shadow(0 7px 10px rgba(0, 0, 0, 0.3))
      drop-shadow(0 0 10px rgba(215, 168, 96, 0.18));
    transform: scale(1);
  }
  35%,
  68% {
    filter:
      drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34))
      drop-shadow(0 0 18px rgba(255, 220, 132, 0.48));
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-diploma-card.is-unlocking,
  .profile-diploma-card.is-unlocking::before,
  .profile-diploma-card.is-unlocking img,
  .diploma-unlock-toast {
    animation: none;
    transition: none;
    transform: none;
  }
}

.diploma-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 12600;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.6vw, 28px);
  background: rgba(5, 13, 10, 0.64);
  backdrop-filter: blur(6px);
}

.diploma-preview-modal[hidden] {
  display: none;
}

.diploma-preview-card {
  position: relative;
  width: min(99vw, 1540px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(215, 168, 96, 0.36);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 10%, rgba(215, 168, 96, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(37, 58, 48, 0.98), rgba(8, 23, 18, 0.99)),
    #0e1c16;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.48);
}

.diploma-preview-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(215, 168, 96, 0.36);
  border-radius: 999px;
  background: rgba(7, 20, 15, 0.86);
  color: #f6dfaa;
  font-size: 1.35rem;
  font-weight: 900;
  cursor: pointer;
}

.diploma-preview-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 48px 12px 0;
}

.diploma-preview-actions button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 230, 167, 0.64);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.98), rgba(215, 168, 96, 0.92)),
    #d7a860;
  color: #2e2217;
  font-weight: 900;
  cursor: pointer;
}

.diploma-preview-scroll {
  overflow: auto;
  padding-bottom: 4px;
}

.diploma-certificate {
  position: relative;
  width: min(100%, 1460px);
  aspect-ratio: 14 / 9;
  margin: 0 auto;
  overflow: hidden;
  border: 8px solid rgba(141, 101, 40, 0.9);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.8), transparent 42%),
    linear-gradient(135deg, #f8e9c7, #fff8e5 52%, #e3c386);
  color: #251b12;
  box-shadow:
    inset 0 0 0 3px rgba(215, 168, 96, 0.82),
    0 18px 40px rgba(0, 0, 0, 0.36);
}

.diploma-certificate::before,
.diploma-certificate::after {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(141, 101, 40, 0.4);
  pointer-events: none;
}

.diploma-certificate__brand {
  position: absolute;
  top: 42px;
  left: 54px;
  display: grid;
  gap: 2px;
  color: #0e1c16;
  text-transform: uppercase;
}

.diploma-certificate__brand span {
  color: #8d6528;
  font-size: clamp(0.58rem, 1.3vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.2em;
}

.diploma-certificate__brand strong {
  font-size: clamp(1rem, 2vw, 1.6rem);
}

.diploma-certificate__trophy {
  position: absolute;
  top: 48px;
  right: 76px;
  width: clamp(76px, 13vw, 136px);
  height: clamp(76px, 13vw, 136px);
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.26));
}

.diploma-certificate__content {
  position: absolute;
  inset: 22% 11% auto;
  text-align: center;
}

.diploma-certificate__eyebrow {
  margin: 0;
  color: #8d6528;
  font-size: clamp(1.45rem, 3.6vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
}

.diploma-certificate__content h2 {
  margin: 0.2em 0 0.08em;
  color: #251b12;
  font-size: clamp(2.15rem, 6vw, 5.4rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.diploma-certificate__content p {
  margin: 0.55em auto 0;
  max-width: 72ch;
  color: #33271b;
  font-size: clamp(0.8rem, 1.9vw, 1.34rem);
  font-weight: 700;
  line-height: 1.35;
}

.diploma-certificate__rank {
  display: inline-block;
  margin-top: 0.42em;
  color: #0e1c16;
  font-size: clamp(1.05rem, 2.8vw, 2.3rem);
}

.diploma-certificate__phrase {
  font-style: italic;
}

.diploma-certificate__stats {
  position: absolute;
  right: 54px;
  bottom: 58px;
  left: 54px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.diploma-certificate__stats div {
  padding: 8px;
  border: 1px solid rgba(141, 101, 40, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.22);
}

.diploma-certificate__stats dt {
  color: #8d6528;
  font-size: clamp(0.5rem, 1vw, 0.76rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.diploma-certificate__stats dd {
  margin: 3px 0 0;
  color: #251b12;
  font-size: clamp(0.7rem, 1.25vw, 0.96rem);
  font-weight: 900;
}

.diploma-certificate__signature {
  position: absolute;
  right: 54px;
  bottom: 20px;
  left: 54px;
  color: #0e1c16;
  font-size: clamp(0.62rem, 1.15vw, 0.9rem);
  font-weight: 800;
  text-align: center;
}

.diploma-certificate__seal,
.diploma-certificate__direction,
.diploma-certificate__motto small {
  display: none;
}

.diploma-certificate.is-level-5-certificate {
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 38%, #f8f1de 0%, #f1e7cd 55%, #e7d9b6 100%);
  box-shadow:
    inset 0 0 0 3px #1a3527,
    inset 0 0 0 13px #f1e7cd,
    inset 0 0 0 14px #a5713d,
    inset 0 0 0 19px rgba(165, 113, 61, 0.45),
    0 18px 40px rgba(0, 0, 0, 0.36);
  color: #1a3527;
  font-family: Georgia, "Times New Roman", serif;
}

.diploma-certificate.is-level-5-certificate::before {
  inset: 22px;
  border: 0;
  background:
    linear-gradient(45deg, transparent 38%, #a5713d 39% 61%, transparent 62%) 0 0 / 22px 22px no-repeat,
    linear-gradient(45deg, transparent 38%, #a5713d 39% 61%, transparent 62%) 100% 0 / 22px 22px no-repeat,
    linear-gradient(45deg, transparent 38%, #a5713d 39% 61%, transparent 62%) 0 100% / 22px 22px no-repeat,
    linear-gradient(45deg, transparent 38%, #a5713d 39% 61%, transparent 62%) 100% 100% / 22px 22px no-repeat;
}

.diploma-certificate.is-level-5-certificate::after {
  inset: 88px auto auto 50%;
  width: min(38%, 520px);
  height: 10px;
  border: 0;
  transform: translateX(-50%);
  background:
    linear-gradient(to left, #a5713d, transparent) left 50% / 45% 1px no-repeat,
    linear-gradient(to right, #a5713d, transparent) right 50% / 45% 1px no-repeat,
    linear-gradient(45deg, transparent 32%, #a5713d 33% 67%, transparent 68%) center / 10px 10px no-repeat;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__brand {
  top: 48px;
  right: 0;
  left: 0;
  justify-items: center;
  color: #1a3527;
  text-align: center;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__brand span {
  color: #1a3527;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(0.94rem, 1.55vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.36em;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__brand strong {
  color: #8a5a2f;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(0.54rem, 0.92vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__brand strong::before {
  content: "MOTS & STRATÉGIE — JEU DE LETTRES";
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__brand strong {
  font-size: 0;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__brand strong::before {
  display: block;
  font-size: clamp(0.54rem, 0.92vw, 0.9rem);
  line-height: 1.15;
  margin-top: 0.92em;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__trophy {
  top: 25.2%;
  right: 50%;
  width: clamp(54px, 6.9vw, 90px);
  height: clamp(54px, 6.9vw, 90px);
  transform: translateX(50%);
  filter: drop-shadow(0 6px 10px rgba(70, 45, 15, 0.35));
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__content {
  inset: 18.2% 9% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__eyebrow {
  color: #173021;
  font-size: clamp(1.9rem, 3.8vw, 3.9rem);
  letter-spacing: 0.08em;
  order: 1;
  text-transform: uppercase;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__content h2 {
  order: 3;
  max-width: 82%;
  margin-top: 1.18em;
  color: #1a3527;
  font-size: clamp(1.9rem, 3.8vw, 3.9rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__content h2::after {
  content: "";
  display: block;
  width: min(44%, 420px);
  height: 1px;
  margin: 0.1em auto 0.24em;
  background: #a5713d;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__content p {
  margin-top: 0.34em;
  color: #5c5138;
  font-size: clamp(0.68rem, 1.1vw, 1.08rem);
  font-style: italic;
  font-weight: 500;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__content p.diploma-certificate__eyebrow {
  color: #1a3527;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.18rem, 2.35vw, 2.42rem);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.032em;
  line-height: 1.05;
  text-transform: uppercase;
}

.diploma-certificate.is-level-5-certificate #diplomaPreviewText {
  order: 2;
  margin-top: 8.35em;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__rank {
  order: 4;
  margin-top: 0.5em;
  color: #8a5a2f;
  font-size: clamp(0.98rem, 2.05vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__rank::before {
  content: "NIVEAU 5";
  display: table;
  margin: 0 auto 0.28em;
  padding: 0.28em 1.08em;
  border-radius: 3px;
  background: #1a3527;
  color: #e9d9a8;
  font-size: clamp(0.5rem, 0.94vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0.24em;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__phrase {
  order: 5;
  max-width: 74ch;
  margin-top: 0.28em;
  color: #4a4131;
  font-size: clamp(0.62rem, 1.05vw, 1.04rem);
  line-height: 1.3;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__stats {
  right: 310px;
  bottom: 92px;
  left: 360px;
  grid-template-columns: repeat(5, max-content);
  justify-content: center;
  gap: 0;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__stats div {
  min-width: 76px;
  padding: 0 0.5vw;
  border: 0;
  border-right: 1px solid #cbb187;
  border-radius: 0;
  background: transparent;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__stats div:last-child {
  border-right: 0;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__stats dt {
  color: #8a5a2f;
  font-size: clamp(0.36rem, 0.58vw, 0.62rem);
  letter-spacing: 0.15em;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__stats dd {
  color: #1a3527;
  font-size: clamp(0.44rem, 0.72vw, 0.78rem);
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__signature {
  right: 46px;
  bottom: 38px;
  left: 46px;
  display: grid;
  grid-template-columns: 100px 118px minmax(0, 1fr) 124px 156px;
  align-items: end;
  gap: 18px;
  text-align: center;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__qr,
.diploma-certificate.is-level-5-certificate .diploma-certificate__seal {
  justify-self: center;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__seal,
.diploma-certificate.is-level-5-certificate .diploma-certificate__qr {
  padding-right: 12px;
  border-right: 1px solid rgba(165, 113, 61, 0.42);
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__qr,
.diploma-certificate.is-level-5-certificate .diploma-certificate__seal,
.diploma-certificate.is-level-5-certificate .diploma-certificate__direction,
.diploma-certificate.is-level-5-certificate .diploma-certificate__motto small {
  display: block;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__qr img {
  display: block;
  width: clamp(82px, 8.8vw, 118px);
  height: clamp(82px, 8.8vw, 118px);
  padding: 0;
  border: 1px solid rgba(165, 113, 61, 0.7);
  background: #fff8e5;
  object-fit: contain;
  image-rendering: pixelated;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__qr span {
  display: block;
  margin-top: 0.2em;
  color: #8a5a2f;
  font-size: clamp(0.42rem, 0.64vw, 0.66rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.05;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__seal {
  width: clamp(62px, 7vw, 100px);
  height: clamp(62px, 7vw, 100px);
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(70, 45, 15, 0.3));
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__motto {
  color: #5c5138;
  font-size: clamp(0.5rem, 0.86vw, 0.86rem);
  font-style: italic;
  font-weight: 500;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__motto small {
  margin-top: 0.22em;
  color: #8a5a2f;
  font-size: clamp(0.42rem, 0.74vw, 0.76rem);
  font-style: normal;
  letter-spacing: 0.12em;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__direction strong {
  display: block;
  color: #1a3527;
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.18rem, 2.25vw, 2.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__direction {
  grid-column: 5;
  transform: translateY(6px);
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__direction strong::after {
  content: "";
  display: block;
  width: min(100%, 150px);
  height: 1px;
  margin: 0.2em auto 0.32em;
  background: #a5713d;
}

.diploma-certificate.is-level-5-certificate .diploma-certificate__direction span {
  color: #8a5a2f;
  font-size: clamp(0.42rem, 0.7vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.diploma-certificate.is-level-10-certificate {
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(to bottom, #123622 0 13.1%, transparent 13.1% 88.3%, #123622 88.3% 100%),
    radial-gradient(ellipse at 50% 30%, #f8f1de 0%, #f1e7cd 60%, #e9dcbb 100%);
  box-shadow:
    inset 0 0 0 3px #173021,
    0 18px 40px rgba(0, 0, 0, 0.36);
  color: #173021;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  overflow: hidden;
}

.diploma-certificate.is-level-10-certificate::before {
  inset: 15% 1.7% 13.9%;
  border: 1px solid rgba(142, 151, 158, 0.55);
  box-shadow: 0 0 0 6px rgba(201, 162, 75, 0.18);
}

.diploma-certificate.is-level-10-certificate::after {
  display: block;
  inset: 14.6% 2.35% 13.4% 1.25%;
  border: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Crect x='1.5' y='1.5' width='7' height='7' fill='%23c9a24b' transform='rotate(45 5 5)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Crect x='1.5' y='1.5' width='7' height='7' fill='%23c9a24b' transform='rotate(45 5 5)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Crect x='1.5' y='1.5' width='7' height='7' fill='%23c9a24b' transform='rotate(45 5 5)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Crect x='1.5' y='1.5' width='7' height='7' fill='%23c9a24b' transform='rotate(45 5 5)'/%3E%3C/svg%3E");
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
  background-size: 9px 9px;
  pointer-events: none;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__brand {
  top: 4.2%;
  left: 13.1%;
  right: 4.3%;
  color: #e8d7a4;
  text-align: left;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__brand span {
  color: #e6c87e;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.78rem, 1.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 5px;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__brand strong {
  color: #9db8a3;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(0.46rem, 1.03vw, 0.9375rem);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 4.25px;
  line-height: 1;
  text-transform: uppercase;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__brand strong::after {
  content: " — Jeu de lettres";
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__brand strong::after {
  content: " — Jeu de lettres";
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__brand strong::after {
  content: " — Jeu de lettres";
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__brand strong::after {
  content: " \2014  Jeu de lettres";
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__brand::after {
  content: "CERTIFICAT DE PROGRESSION";
  position: absolute;
  top: 2px;
  right: 0;
  width: 58%;
  color: #f3e5ba;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.05rem, 2.3vw, 2.05rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: right;
  white-space: nowrap;
  word-spacing: normal;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__trophy {
  top: 30.8%;
  right: 9.4%;
  width: auto;
  height: clamp(132px, 17.8vw, 250px);
  object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(40, 45, 50, 0.4));
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__content {
  inset: 27.2% 31% auto 10%;
  transform: none;
  text-align: center;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__eyebrow {
  color: #5c5138;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(0.62rem, 1.28vw, 1.16rem);
  font-style: italic;
  font-weight: 400;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__eyebrow::before {
  content: none;
}

.diploma-certificate.is-level-10-certificate #diplomaPreviewText {
  display: none;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__content h2 {
  margin-top: 0.05em;
  color: #173021;
  font-size: clamp(1.48rem, 4.15vw, 3.1rem);
  letter-spacing: 0.05em;
  line-height: 1.08;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__content h2::after {
  content: "";
  display: block;
  width: min(70%, 520px);
  height: 1px;
  margin: 0.12em auto 0.25em;
  background: linear-gradient(to right, transparent, #b99558 28%, #b99558 72%, transparent);
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__content p {
  color: #5c5138;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(0.78rem, 1.7vw, 1.75rem);
  font-style: italic;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__rank {
  position: relative;
  display: inline-block;
  margin-top: 1.95em;
  padding: 0.28em 0.92em;
  border: 2px solid #c9a24b;
  border-radius: 4px;
  background: #123622;
  color: rgb(230, 200, 126);
  box-shadow: 0 6px 18px rgba(20, 40, 28, 0.35);
  font-size: clamp(0.82rem, 2.55vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__rank::before {
  content: "NIVEAU 10";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.55em);
  display: block;
  width: max-content;
  margin: 0;
  padding: 0.3em 1.25em;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(160deg, #dfe4e8, #aab3ba);
  color: #1d2a22;
  box-shadow: 0 2px 6px rgba(40, 45, 50, 0.3);
  font-size: clamp(0.48rem, 1.1vw, 1.05rem);
  letter-spacing: 0.24em;
  text-shadow: none;
  transform: translateX(-50%);
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__phrase {
  max-width: 58ch;
  margin: 0.75em auto 0;
  color: #4a4131;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(0.58rem, 1.15vw, 1.04rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__stats {
  right: 43%;
  bottom: 4.8%;
  left: 4.7%;
  grid-template-columns: 172px 118px 174px 142px;
  justify-content: start;
  gap: 0;
  z-index: 2;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__stats div {
  min-width: 0;
  padding: 0 0 0 1.45vw;
  border: 0;
  border-right: 1px solid rgba(232, 215, 164, 0.42);
  border-radius: 0;
  background: transparent;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__stats div:first-child {
  display: none;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__stats div:nth-child(2) {
  order: 2;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__stats div:nth-child(3) {
  order: 3;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__stats div:nth-child(4) {
  order: 4;
  border-right: 0;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__stats div:nth-child(5) {
  order: 1;
  border-right: 1px solid rgba(232, 215, 164, 0.42);
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__stats div:last-child {
  border-right: 0;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__stats dt {
  color: #9db8a3;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(0.38rem, 0.9vw, 0.82rem);
  font-weight: 600;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__stats dd {
  color: #f0e3bd;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.52rem, 1.25vw, 1.08rem);
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__signature {
  position: absolute;
  inset: 0;
  display: block;
  text-align: center;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__seal {
  position: absolute;
  top: 3.3%;
  left: 3.7%;
  display: block;
  width: clamp(52px, 6.45vw, 76px);
  height: clamp(52px, 6.45vw, 76px);
  padding: 0;
  border: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__qr {
  position: absolute;
  bottom: 17.3%;
  left: 3.9%;
  display: block;
  padding: 0;
  border: 0;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__qr img {
  width: clamp(72px, 8.5vw, 100px);
  height: clamp(72px, 8.5vw, 100px);
  padding: 5px;
  border: 2px solid #c9a24b;
  border-radius: 6px;
  background: #fffdf6;
  box-shadow: 0 4px 12px rgba(40, 45, 50, 0.25);
  image-rendering: pixelated;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__qr span,
.diploma-certificate.is-level-10-certificate .diploma-certificate__motto small,
.diploma-certificate.is-level-10-certificate .diploma-certificate__direction {
  display: block;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__qr span {
  margin-top: 0.04em;
  color: #5f6b74;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(0.34rem, 0.76vw, 0.72rem);
  font-style: italic;
  line-height: 1;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__motto {
  position: absolute;
  right: 4.5%;
  bottom: 4.4%;
  left: auto;
  width: 36%;
  color: #cfdccb;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(0.44rem, 0.93vw, 0.84rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  text-align: right;
  z-index: 2;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__motto small {
  display: block;
  margin-top: 0.3em;
  color: #c9a24b;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.12em;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__direction {
  position: absolute;
  right: 5.2%;
  bottom: 22.8%;
  width: 18%;
  min-width: 128px;
  text-align: center;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__direction strong {
  display: block;
  color: #1a3527;
  font-family: "Great Vibes", cursive;
  font-size: clamp(0.95rem, 2vw, 1.7rem);
  font-weight: 400;
  line-height: 1;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__direction strong::after {
  display: block;
  width: 70%;
  height: 1px;
  margin: 0.1em auto 0.28em;
  background: #8e979e;
}

.diploma-certificate.is-level-10-certificate .diploma-certificate__direction span {
  display: block;
  clear: both;
  color: #5f6b74;
  font-size: clamp(0.28rem, 0.56vw, 0.54rem);
  line-height: 1.1;
  text-align: center;
}

.diploma-certificate.is-level-20-certificate {
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 30%, #1d3d2b 0%, #142e20 55%, #0e2418 100%);
  box-shadow:
    inset 0 0 0 3px #c9a24b,
    inset 0 0 0 13px rgba(201, 162, 75, 0.18),
    inset 0 0 40px rgba(0, 0, 0, 0.4),
    0 18px 40px rgba(0, 0, 0, 0.36);
  color: #f0e3bd;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
}

.diploma-certificate.is-level-20-certificate::before {
  inset: 3.8%;
  border: 1px solid rgba(201, 162, 75, 0.4);
}

.diploma-certificate.is-level-20-certificate::after {
  display: block;
  inset: 0;
  border: 0;
  background-image:
    url("../assets/diplomas/trophy-level-20-hd.png"),
    url("../assets/diplomas/trophy-level-20-hd.png");
  background-position:
    6.5% 34%,
    93.5% 34%;
  background-repeat: no-repeat;
  background-size:
    clamp(98px, 12vw, 170px) auto,
    clamp(98px, 12vw, 170px) auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__level20-decor {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.diploma-certificate.is-level-20-certificate .diploma-level20-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 3.8vw, 52px);
  height: clamp(34px, 3.8vw, 52px);
  border: 1px solid rgba(88, 95, 74, 0.35);
  border-radius: 7px;
  background: linear-gradient(160deg, #fff4d3 0%, #e5d19b 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.48),
    0 4px 10px rgba(0, 0, 0, 0.38);
  color: #31452f;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1rem, 2vw, 1.875rem);
  font-weight: 700;
  line-height: 1;
}

.diploma-certificate.is-level-20-certificate .diploma-level20-corner {
  position: absolute;
}

.diploma-certificate.is-level-20-certificate .diploma-level20-corner.is-top-left {
  top: 3.7%;
  left: 3.7%;
}

.diploma-certificate.is-level-20-certificate .diploma-level20-corner.is-top-right {
  top: 3.7%;
  right: 3.7%;
}

.diploma-certificate.is-level-20-certificate .diploma-level20-corner.is-bottom-left {
  bottom: 3.7%;
  left: 3.7%;
}

.diploma-certificate.is-level-20-certificate .diploma-level20-corner.is-bottom-right {
  right: 3.7%;
  bottom: 3.7%;
}

.diploma-certificate.is-level-20-certificate .diploma-level20-word {
  position: absolute;
  top: 24%;
  left: 50%;
  display: flex;
  gap: clamp(5px, 0.85vw, 12px);
  transform: translateX(-50%);
}

.diploma-certificate.is-level-20-certificate .diploma-level20-trophy-label {
  position: absolute;
  top: 56%;
  color: #c9a24b;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.42rem, 0.78vw, 0.875rem);
  letter-spacing: 0.2em;
  transform: translateX(-50%);
}

.diploma-certificate.is-level-20-certificate .diploma-level20-trophy-label.is-left {
  left: 12.5%;
}

.diploma-certificate.is-level-20-certificate .diploma-level20-trophy-label.is-right {
  left: 87.5%;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__brand {
  top: 13.6%;
  right: 32%;
  left: 32%;
  color: #e6c87e;
  text-align: center;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__brand span {
  color: #e6c87e;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.72rem, 1.55vw, 1.4rem);
  font-weight: 800;
  letter-spacing: 0.22em;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__brand strong {
  color: #b9cbb9;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(0.46rem, 0.96vw, 0.92rem);
  font-weight: 400;
  letter-spacing: 0.24em;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__trophy {
  display: none;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__content {
  inset: 34.2% 22% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__eyebrow {
  order: 1;
  color: #f0e3bd;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.25rem, 3.1vw, 2.75rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__eyebrow::before {
  content: "M A Î T R E";
  display: block;
  width: max-content;
  margin: 0 auto 0.42em;
  padding: 0.12em 0.32em;
  border-radius: 6px;
  background: linear-gradient(160deg, #f8efd7, #e8d7ae);
  color: #2f4530;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  font-size: clamp(1rem, 2vw, 1.875rem);
  letter-spacing: 0.24em;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__eyebrow::before {
  content: none;
  display: none;
}

.diploma-certificate.is-level-20-certificate #diplomaPreviewText {
  order: 2;
  margin: 0.42em 0 0.12em;
  color: #b9cbb9;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(0.6rem, 1.35vw, 1.3rem);
  font-style: italic;
  font-weight: 400;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__content h2 {
  order: 3;
  margin: 0.02em 0 0;
  color: #e6c87e;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.55rem, 4vw, 3.75rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.05;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__rank {
  order: 4;
  margin-top: 0.5em;
  color: #f0e3bd;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1rem, 2.6vw, 2.375rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__rank::before {
  content: "NIVEAU 20";
  display: flex;
  align-items: center;
  gap: 1.2em;
  justify-content: center;
  margin: 0 auto 0.45em;
  padding: 0 9.6em;
  color: #c9a24b;
  font-size: clamp(0.44rem, 1.05vw, 1.12rem);
  font-weight: 400;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  background:
    linear-gradient(#c9a24b, #c9a24b) left center / 8.4em 1px no-repeat,
    linear-gradient(#c9a24b, #c9a24b) right center / 8.4em 1px no-repeat;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__phrase {
  order: 5;
  max-width: 64ch;
  margin: 0.8em auto 0;
  color: #cfdccb;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(0.62rem, 1.4vw, 1.375rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__stats {
  right: 22%;
  bottom: 8.7%;
  left: 22%;
  display: grid;
  grid-template-columns: 1.28fr repeat(3, 1fr);
  gap: clamp(7px, 1vw, 16px);
  z-index: 3;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__stats div {
  min-width: 0;
  padding: clamp(8px, 1.1vw, 16px) clamp(14px, 2.25vw, 38px);
  border: 1px solid rgba(201, 162, 75, 0.4);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  text-align: center;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__stats div:first-child {
  display: none;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__stats div:nth-child(2) {
  order: 2;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__stats div:nth-child(3) {
  order: 3;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__stats div:nth-child(4) {
  order: 4;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__stats div:nth-child(5) {
  order: 1;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__stats dt {
  color: #9db8a3;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.4rem, 0.9vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.14em;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__stats dd {
  color: #f0e3bd;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.52rem, 1.16vw, 1.22rem);
  white-space: nowrap;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__signature {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 3;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__seal {
  position: absolute;
  top: 4.4%;
  left: 50%;
  width: clamp(50px, 6vw, 84px);
  height: clamp(50px, 6vw, 84px);
  display: block;
  padding: 0;
  border: 0;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
  transform: translateX(-50%);
  z-index: 5;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__qr {
  position: absolute;
  bottom: 15.8%;
  left: 4.6%;
  display: block;
  padding: 0;
  border: 0;
  text-align: center;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__qr img {
  width: clamp(72px, 8.2vw, 108px);
  height: clamp(72px, 8.2vw, 108px);
  padding: 5px;
  border: 2px solid #c9a24b;
  border-radius: 6px;
  background: #fffdf6;
  box-shadow: 0 4px 12px rgba(40, 45, 50, 0.25);
  image-rendering: pixelated;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__qr span {
  display: block;
  margin-top: 0.24em;
  color: #cfdccb;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(0.34rem, 0.78vw, 0.72rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__direction {
  position: absolute;
  right: 5.2%;
  bottom: 12.4%;
  width: 18%;
  text-align: center;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__direction strong {
  display: block;
  color: #f0e3bd;
  font-family: "Great Vibes", cursive;
  font-size: clamp(1rem, 2.15vw, 1.9rem);
  font-weight: 400;
  line-height: 1;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__direction strong::after {
  display: none;
  width: 70%;
  height: 1px;
  margin: 0.16em auto 0.34em;
  background: #c9a24b;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__direction span {
  display: block;
  color: #9db8a3;
  font-size: clamp(0.32rem, 0.64vw, 0.62rem);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__motto {
  position: absolute;
  right: auto;
  bottom: 3.8%;
  left: 50%;
  width: 42%;
  color: #cfdccb;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(0.42rem, 0.92vw, 0.84rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
  transform: translateX(-50%);
}

.diploma-certificate.is-level-20-certificate .diploma-certificate__motto small {
  display: block;
  margin-top: 0.3em;
  color: #c9a24b;
  font-family: "EB Garamond", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.diploma-certificate.is-level-30-certificate {
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 244, 206, 0.9), rgba(239, 226, 191, 0.94) 46%, rgba(215, 185, 111, 0.86)),
    #efe2bf;
  box-shadow: inset 0 0 0 3px #173021, inset 0 0 0 8px #c9a24b, inset 0 0 0 11px rgba(23, 48, 33, 0.22);
}

.diploma-certificate.is-level-30-certificate::before {
  inset: 3.2% 3.8% 6.6%;
  border: 1px solid rgba(201, 162, 75, 0.5);
}

.diploma-certificate.is-level-30-certificate::after {
  display: block;
  inset: 0;
  background:
    linear-gradient(#0f3323, #0f3323) top / 100% 14.2% no-repeat,
    linear-gradient(#0f3323, #0f3323) bottom / 100% 12% no-repeat;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__level30-decor {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-corner {
  position: absolute;
  width: 11px;
  height: 11px;
  background: #c9a24b;
  transform: rotate(45deg);
}

.diploma-certificate.is-level-30-certificate .diploma-level30-corner.is-top-left {
  top: 2.65%;
  left: 2.85%;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-corner.is-top-right {
  top: 2.65%;
  right: 2.85%;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-corner.is-bottom-left {
  bottom: 5.95%;
  left: 2.85%;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-corner.is-bottom-right {
  right: 2.85%;
  bottom: 5.95%;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-word {
  position: absolute;
  top: 18.8%;
  left: 50%;
  display: flex;
  gap: clamp(4px, 0.55vw, 9px);
  transform: translateX(-50%);
}

.diploma-certificate.is-level-30-certificate .diploma-level30-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 4.4vw, 58px);
  height: clamp(30px, 4.4vw, 58px);
  border-radius: 6px;
  background: linear-gradient(145deg, #fff3d2, #dfc78e);
  color: #31452f;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1rem, 2.5vw, 2rem);
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.diploma-certificate.is-level-30-certificate .diploma-level30-trophy {
  position: absolute;
  top: 33%;
  width: clamp(92px, 14vw, 174px);
  filter: drop-shadow(0 9px 18px rgba(70, 45, 15, 0.35));
}

.diploma-certificate.is-level-30-certificate .diploma-level30-trophy img {
  display: block;
  width: 100%;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-trophy.is-left {
  left: 8%;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-trophy.is-right {
  right: 8%;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-trophy-label {
  position: absolute;
  top: 56.5%;
  color: #8a5a2f;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.4rem, 0.92vw, 0.82rem);
  letter-spacing: 0.22em;
  transform: translateX(-50%);
}

.diploma-certificate.is-level-30-certificate .diploma-level30-trophy-label.is-left {
  left: 14.2%;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-trophy-label.is-right {
  left: 85.8%;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__brand {
  top: 3.7%;
  left: 50%;
  z-index: 4;
  display: grid;
  justify-items: center;
  text-align: center;
  transform: translateX(-50%);
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__brand::before {
  content: "";
  width: clamp(32px, 5vw, 58px);
  height: clamp(32px, 5vw, 58px);
  margin-bottom: 0.38em;
  border-radius: 8px;
  background: url("../assets/brand/concept-5/agora-des-mots-logo-stacked.webp") center / contain no-repeat;
  filter: drop-shadow(0 3px 8px rgba(70, 45, 15, 0.2));
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__brand span {
  color: #1a3527;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.7rem, 1.65vw, 1.36rem);
  font-weight: 700;
  letter-spacing: 0.34em;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__brand strong {
  color: #8a5a2f;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.42rem, 0.9vw, 0.78rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__brand::after {
  content: "CERTIFICAT D’EXCELLENCE";
  position: absolute;
  top: 8px;
  left: 46vw;
  width: 50vw;
  color: #f0e3bd;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.9rem, 2.8vw, 2.55rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  white-space: nowrap;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__trophy {
  display: none;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__content {
  inset: 26.2% 21% auto;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__eyebrow {
  order: 1;
  color: #173021;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.25rem, 3.1vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.diploma-certificate.is-level-30-certificate #diplomaPreviewText {
  order: 2;
  margin-top: 0.7em;
  color: #5c5138;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(0.82rem, 1.58vw, 1.36rem);
  font-style: italic;
  font-weight: 400;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__content h2 {
  order: 3;
  max-width: 72%;
  margin: 0.08em 0 0;
  color: #8a5a2f;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(2rem, 6.1vw, 5rem);
  line-height: 1;
  text-transform: uppercase;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__rank {
  order: 4;
  margin-top: 0.36em;
  padding: 0.38em 1.7em;
  border: 2px solid #c9a24b;
  border-radius: 4px;
  background: #0f3323;
  color: #e6c87e;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.95rem, 3.05vw, 2.55rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  box-shadow: 0 7px 18px rgba(20, 40, 28, 0.35);
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__rank::before {
  content: "NIVEAU 30";
  display: table;
  margin: -1.55em auto 0.62em;
  padding: 0.3em 1.55em;
  border-radius: 3px;
  background: linear-gradient(160deg, #f2e5b8, #c9a24b);
  color: #173021;
  font-size: clamp(0.46rem, 0.92vw, 0.84rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__phrase {
  order: 5;
  max-width: 70ch;
  margin-top: 0.72em;
  color: #5c5138;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(0.84rem, 1.68vw, 1.42rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats {
  right: 24%;
  bottom: 8.9%;
  z-index: 5;
  display: flex;
  gap: clamp(8px, 1.4vw, 20px);
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats div:first-child {
  display: none;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats div {
  min-width: clamp(80px, 11vw, 178px);
  padding: clamp(8px, 1.1vw, 14px) clamp(10px, 1.45vw, 24px);
  border: 1px solid rgba(201, 162, 75, 0.62);
  border-radius: 7px;
  background: rgba(15, 51, 35, 0.9);
  text-align: center;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats dt,
.diploma-certificate.is-level-30-certificate .diploma-certificate__stats dd {
  font-family: "Cinzel", Georgia, serif;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats dt {
  color: #cfdccb;
  font-size: clamp(0.34rem, 0.72vw, 0.68rem);
  letter-spacing: 0.12em;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats dd {
  color: #f0e3bd;
  font-size: clamp(0.58rem, 1.35vw, 1.18rem);
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__signature {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__seal {
  display: none;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__qr {
  position: absolute;
  bottom: 18.8%;
  left: 4.5%;
  display: block;
  padding: 0;
  border: 0;
  text-align: center;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__qr img {
  width: clamp(72px, 8.5vw, 112px);
  height: clamp(72px, 8.5vw, 112px);
  padding: 5px;
  border: 2px solid #c9a24b;
  border-radius: 6px;
  background: #fffdf6;
  box-shadow: 0 4px 12px rgba(70, 45, 15, 0.22);
  image-rendering: pixelated;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__qr span {
  display: block;
  margin-top: 0.24em;
  color: #8a5a2f;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(0.34rem, 0.72vw, 0.7rem);
  font-style: italic;
  line-height: 1;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__direction {
  position: absolute;
  right: 6.8%;
  bottom: 20.2%;
  display: block;
  width: 18%;
  text-align: center;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__direction strong {
  display: block;
  color: #173021;
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.1rem, 2.5vw, 2.2rem);
  font-weight: 400;
  line-height: 1;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__direction span {
  display: block;
  margin-top: 0.45em;
  color: #5c5138;
  font-size: clamp(0.34rem, 0.72vw, 0.7rem);
  font-weight: 700;
  text-transform: uppercase;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__motto {
  position: absolute;
  bottom: 3.2%;
  left: 50%;
  display: block;
  width: 44%;
  color: #cfdccb;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(0.42rem, 0.9vw, 0.82rem);
  font-style: italic;
  text-align: center;
  transform: translateX(-50%);
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__motto small {
  display: block;
  margin-top: 0.25em;
  color: #c9a24b;
  font-family: "EB Garamond", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.diploma-certificate.is-level-30-certificate {
  background:
    radial-gradient(ellipse at 50% 34%, #fbf4e2 0%, #f1e7cd 58%, #e5d5ae 100%);
  box-shadow:
    inset 0 0 0 4px #b9964a,
    inset 0 0 0 9px #1a3527,
    inset 0 0 0 13px rgba(185, 150, 74, 0.5);
}

.diploma-certificate.is-level-30-certificate::before {
  inset: 4.2%;
  border: 1px solid rgba(185, 150, 74, 0.45);
}

.diploma-certificate.is-level-30-certificate::after {
  display: none;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-word,
.diploma-certificate.is-level-30-certificate .diploma-level30-tile,
.diploma-certificate.is-level-30-certificate .diploma-level30-trophy-label {
  display: none;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-corner {
  width: clamp(7px, 0.9vw, 14px);
  height: clamp(7px, 0.9vw, 14px);
  border: 1px solid #b9964a;
  background: #1a3527;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-corner.is-top-left {
  top: 2.7%;
  left: 2.7%;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-corner.is-top-right {
  top: 2.7%;
  right: 2.7%;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-corner.is-bottom-left {
  bottom: 2.7%;
  left: 2.7%;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-corner.is-bottom-right {
  right: 2.7%;
  bottom: 2.7%;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__brand {
  top: 5.6%;
  left: 50%;
  z-index: 4;
  display: grid;
  justify-items: center;
  text-align: center;
  transform: translateX(-50%);
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__brand img {
  width: clamp(32px, 5.2vw, 64px);
  height: clamp(32px, 5.2vw, 64px);
  margin-bottom: 0.55em;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__brand span {
  color: #1a3527;
  font-size: clamp(0.76rem, 1.65vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.34em;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__brand strong {
  color: #8a6d2f;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.45rem, 0.95vw, 0.9rem);
  letter-spacing: 0.28em;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__brand::after {
  display: none;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__content {
  inset: 20.8% 18% auto;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__eyebrow {
  padding: 0.34em 1.55em;
  background: linear-gradient(160deg, #eed690, #c9a24b 60%, #a8802f);
  color: #173021;
  font-size: clamp(0.95rem, 3.25vw, 2.45rem);
  letter-spacing: 0.12em;
  box-shadow: 0 4px 12px rgba(120, 90, 30, 0.32);
}

.diploma-certificate.is-level-30-certificate #diplomaPreviewText {
  order: 2;
  margin-top: 0.7em;
  color: #5c5138;
  font-size: clamp(0.62rem, 1.4vw, 1.15rem);
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__content h2 {
  order: 3;
  margin-top: 0.08em;
  color: #1a3527;
  font-size: clamp(2.05rem, 5.2vw, 4.4rem);
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__content h2::after {
  content: "";
  display: block;
  width: min(38vw, 460px);
  height: 1px;
  margin: 0.12em auto 0;
  background: #b9964a;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__rank {
  order: 4;
  margin-top: 1.55em;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b9964a;
  font-size: clamp(1.1rem, 3.5vw, 3rem);
  letter-spacing: 0.12em;
  box-shadow: none;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__rank::before {
  content: "NIVEAU 30";
  display: table;
  margin: -1.25em auto 0.6em;
  padding: 0.36em 1.35em;
  background: #173021;
  color: #e6c87e;
  font-size: clamp(0.48rem, 0.95vw, 0.86rem);
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__phrase {
  max-width: 66ch;
  margin-top: 0.75em;
  color: #4a4131;
  font-size: clamp(0.64rem, 1.35vw, 1.16rem);
}

.diploma-certificate.is-level-30-certificate .diploma-level30-trophy {
  top: 40%;
  width: clamp(80px, 13vw, 170px);
}

.diploma-certificate.is-level-30-certificate .diploma-level30-trophy.is-left {
  left: 13.7%;
}

.diploma-certificate.is-level-30-certificate .diploma-level30-trophy.is-right {
  right: 13.7%;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats {
  left: 50%;
  right: auto;
  bottom: 11.2%;
  gap: 0;
  border-top: 0;
  padding-top: 0;
  transform: translateX(-50%);
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats div:first-child {
  display: none;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats div:nth-child(5) {
  order: 1;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats div:nth-child(2) {
  order: 2;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats div:nth-child(3) {
  order: 3;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats div:nth-child(4) {
  order: 4;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats div {
  min-width: clamp(82px, 10.5vw, 156px);
  padding: 0 clamp(8px, 1.35vw, 22px);
  border: 0;
  border-right: 1px solid #cbb87f;
  border-radius: 0;
  background: transparent;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats div:last-child {
  border-right: 0;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats dt {
  color: #8a6d2f;
  font-size: clamp(0.34rem, 0.7vw, 0.68rem);
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__stats dd {
  color: #1a3527;
  font-size: clamp(0.52rem, 1.18vw, 1.05rem);
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__qr {
  bottom: 13.8%;
  left: 4.9%;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__direction {
  right: 7.8%;
  bottom: 15%;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__direction strong {
  color: #173021;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__motto {
  bottom: 7.2%;
  color: #5c5138;
}

.diploma-certificate.is-level-30-certificate .diploma-certificate__motto small {
  color: #8a6d2f;
}

.diploma-certificate.is-level-40-certificate {
  background:
    radial-gradient(circle 420px at 12% 14%, rgba(202, 178, 106, 0.2) 0%, transparent 70%),
    radial-gradient(circle 380px at 88% 82%, rgba(64, 140, 96, 0.26) 0%, transparent 72%),
    linear-gradient(135deg, #1d3d2b 0%, #17311f 40%, #122718 70%, #0e2418 100%);
  color: #173021;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.diploma-certificate.is-level-40-certificate::before {
  inset: 9.45% 8.93%;
  border: 3px solid #aab3ba;
  box-shadow:
    0 0 0 8px #1a3527,
    0 0 0 10px rgba(185, 195, 201, 0.65),
    0 24px 60px rgba(0, 0, 0, 0.55);
  background: radial-gradient(ellipse at 50% 36%, #fff8e8 0%, #f2ead2 60%, #e5d8b8 100%);
}

.diploma-certificate.is-level-40-certificate::after {
  inset: calc(9.45% + 12px) calc(8.93% + 12px);
  border: 1px solid rgba(142, 151, 158, 0.55);
  outline: none;
  box-shadow: none;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__level40-decor {
  position: absolute;
  inset: 9.45% 8.93%;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__level40-decor::before,
.diploma-certificate.is-level-40-certificate .diploma-certificate__level40-decor::after {
  content: "";
  position: absolute;
  width: clamp(70px, 9vw, 135px);
  height: auto;
  aspect-ratio: 137 / 116;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.16));
  opacity: 0.96;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__level40-decor::before {
  top: 40%;
  left: -155px;
  transform: translateY(-50%);
  background-image: url("../assets/diplomas/bandeau-arc-gauche.png");
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__level40-decor::after {
  top: 60%;
  right: -155px;
  transform: translateY(-50%);
  background-image: url("../assets/diplomas/bandeau-arc-droit.png");
}


.diploma-certificate.is-level-40-certificate .diploma-level40-palm,
.diploma-certificate.is-level-40-certificate .diploma-level40-trophy,
.diploma-certificate.is-level-40-certificate .diploma-level40-divider {
  position: absolute;
}


.diploma-certificate.is-level-40-certificate .diploma-level40-palm {
  top: 11.5%;
  height: clamp(72px, 10.7vw, 150px);
  filter: drop-shadow(0 5px 10px rgba(120, 90, 30, 0.34));
}

.diploma-certificate.is-level-40-certificate .diploma-level40-palm img,
.diploma-certificate.is-level-40-certificate .diploma-level40-trophy img {
  width: auto;
  height: 100%;
  display: block;
}

.diploma-certificate.is-level-40-certificate .diploma-level40-palm.is-left {
  left: 2.45%;
}

.diploma-certificate.is-level-40-certificate .diploma-level40-palm.is-right {
  right: 2.45%;
  transform: scaleX(-1);
}

.diploma-certificate.is-level-40-certificate .diploma-level40-trophy {
  top: 43%;
  height: clamp(80px, 10.2vw, 142px);
  filter: drop-shadow(0 6px 12px rgba(40, 45, 50, 0.38));
}

.diploma-certificate.is-level-40-certificate .diploma-level40-trophy.is-left {
  left: 5.5%;
}

.diploma-certificate.is-level-40-certificate .diploma-level40-trophy.is-right {
  right: 5.5%;
}

.diploma-certificate.is-level-40-certificate .diploma-level40-divider {
  left: 50%;
  display: flex;
  align-items: center;
  gap: clamp(7px, 1vw, 14px);
  width: min(44vw, 520px);
  transform: translateX(-50%);
}

.diploma-certificate.is-level-40-certificate .diploma-level40-divider i {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #8e979e, transparent);
}

.diploma-certificate.is-level-40-certificate .diploma-level40-divider b {
  width: clamp(5px, 0.7vw, 8px);
  height: clamp(5px, 0.7vw, 8px);
  background: #8e979e;
  transform: rotate(45deg);
}

.diploma-certificate.is-level-40-certificate .diploma-level40-divider.is-top {
  top: 28.6%;
}

.diploma-certificate.is-level-40-certificate .diploma-level40-divider.is-signature {
  right: 11.5%;
  bottom: 18.6%;
  left: auto;
  width: min(19vw, 180px);
  transform: none;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__trophy {
  display: none;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__brand {
  top: 11.8%;
  left: 50%;
  z-index: 4;
  display: grid;
  justify-items: center;
  text-align: center;
  transform: translateX(-50%);
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__brand img {
  width: clamp(38px, 5.2vw, 66px);
  height: clamp(38px, 5.2vw, 66px);
  margin-bottom: 0.5em;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__brand span {
  color: #173021;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(24px, 3.2vw, 42px);
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__brand strong {
  color: #5f6b74;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.48rem, 1.15vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.25em;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__brand::after {
  display: none;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__content {
  inset: 0;
  z-index: 4;
  display: block;
  text-align: center;
  pointer-events: none;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__eyebrow {
  display: none;
  color: #173021;
  font-size: clamp(1.35rem, 3.7vw, 3.1rem);
  font-weight: 700;
  letter-spacing: 0.19em;
}

.diploma-certificate.is-level-40-certificate #diplomaPreviewText {
  position: absolute;
  top: 36.5%;
  left: 50%;
  width: min(62%, 760px);
  margin: 0;
  color: #5c5138;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.56rem, 1.2vw, 1rem);
  letter-spacing: 0.15em;
  transform: translateX(-50%);
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__content h2 {
  position: absolute;
  top: 40%;
  left: 50%;
  width: min(62%, 760px);
  margin: 0;
  color: #1a3527;
  font-family: "Great Vibes", cursive;
  font-size: clamp(2.2rem, 6.4vw, 5.2rem);
  font-weight: 400;
  line-height: 1;
  text-transform: none !important;
  transform: translateX(-50%);
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__content h2::after {
  content: "";
  display: block;
  width: min(42vw, 520px);
  height: 1px;
  margin: 0.08em auto 0.18em;
  background: #8e979e;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__rank {
  position: absolute;
  top: 55%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  width: min(64%, 800px);
  margin: 0;
  padding: 0;
  border: 0;
  background: linear-gradient(160deg, #6e7a80, #b9c3c9 35%, #eef3f6 55%, #8d999f 80%);
  background-clip: text;
  box-shadow: none;
  color: transparent;
  font-size: clamp(1.2rem, 3.4vw, 3.15rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__rank::before {
  content: "NIVEAU 40";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.36em 1.35em;
  border: 2px solid #8e979e;
  border-radius: 4px;
  background: linear-gradient(160deg, #e8eef1, #b9c3c9 55%, #eef3f6);
  color: #1d2a22;
  font-size: clamp(0.46rem, 0.85vw, 0.84rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__phrase {
  position: absolute;
  top: 64.5%;
  left: 50%;
  width: min(60%, 790px);
  max-width: none;
  margin: 0;
  color: #4a4131;
  font-size: clamp(0.72rem, 1.55vw, 1.32rem);
  transform: translateX(-50%);
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__qr {
  position: absolute !important;
  top: 68% !important;
  bottom: auto !important;
  left: 7%;
  width: clamp(58px, 7.2vw, 100px);
  display: block;
  padding: 0;
  border: 0;
  text-align: center;
  transform: translateY(clamp(-205px, -15vw, -72px)) !important;
  z-index: 8;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__qr img {
  width: clamp(52px, 6.4vw, 88px);
  height: clamp(52px, 6.4vw, 88px);
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__qr span {
  display: block;
  margin-top: 0.45em;
  color: #5f6b74;
  font-size: clamp(0.48rem, 0.82vw, 0.78rem);
  font-style: italic;
  line-height: 1.1;
}

/* Ajustement mobile - QR diplôme niveau 40 */
@media (max-width: 640px) {
  .diploma-certificate.is-level-40-certificate .diploma-certificate__qr {
    position: absolute !important;
    top: auto !important;
    bottom: 18% !important;
    left: 5.4% !important;
    width: clamp(42px, 13vw, 58px);
    transform: translateY(clamp(-44px, -8vw, -22px)) !important;
    z-index: 8;
  }

  .diploma-certificate.is-level-40-certificate .diploma-certificate__qr img {
    width: clamp(40px, 12vw, 54px);
    height: clamp(40px, 12vw, 54px);
  }

  .diploma-certificate.is-level-40-certificate .diploma-certificate__qr span {
    margin-top: 0.2em;
    font-size: clamp(0.34rem, 1.35vw, 0.5rem);
    line-height: 1;
  }
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__stats {
  right: auto;
  bottom: 18.7%;
  left: 26.5%;
  display: flex;
  gap: 0;
  border-top: 0;
  padding-top: 0;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__stats div:first-child {
  display: block;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__stats div:nth-child(5) {
  display: none;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__stats div:nth-child(2) {
  order: 2;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__stats div:nth-child(3) {
  order: 3;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__stats div:nth-child(4) {
  order: 4;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__stats div {
  min-width: clamp(76px, 9.4vw, 132px);
  padding: 0 clamp(8px, 1.1vw, 18px);
  border: 0;
  border-right: 1px solid #b6bcc1;
  border-radius: 0;
  background: transparent;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__stats div:last-child {
  border-right: 0;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__stats dt {
  color: #5f6b74;
  font-size: clamp(0.34rem, 0.62vw, 0.62rem);
  line-height: 1.12;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__stats dd {
  color: #1a3527;
  font-size: clamp(0.54rem, 1.05vw, 1rem);
  line-height: 1.08;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__direction {
  position: absolute;
  right: 11.8%;
  bottom: 16.8%;
  left: auto;
  display: block;
  min-width: clamp(110px, 16vw, 220px);
  text-align: center;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__direction strong {
  display: block;
  color: #173021;
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.35rem, 3vw, 2.7rem);
  font-weight: 400;
  line-height: 1;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__direction span {
  display: block;
  margin-top: 0.7em;
  border-top: 1px solid #8e979e;
  padding-top: 0.55em;
  color: #5f6b74;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.5rem, 1vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__motto {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 12.5% !important;
  width: min(58%, 620px);
  transform: translate(-50%, -72px) !important;
  color: #5c5138;
  text-align: center;
  z-index: 9;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__motto span {
  display: inline;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__motto small {
  display: inline;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__motto small {
  color: #8a6d2f;
}

@media (max-width: 720px) {
  .profile-diploma-grid {
    grid-template-columns: 1fr;
  }

  .profile-diploma-card {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
  }

  .profile-diploma-card img {
    width: 62px;
    height: 62px;
  }

  .diploma-preview-card {
    width: calc(100vw - 18px);
    padding: 14px 12px;
  }

  .diploma-preview-scroll {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .diploma-certificate {
    width: 760px;
    min-width: 760px;
  }
}

@media (max-width: 520px) {
  .diploma-preview-actions {
    justify-content: flex-start;
    margin-right: 46px;
  }

  .profile-diploma-card__actions button,
  .profile-diploma-card__actions span {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ONLINE-1C — panneau "En ligne" du profil : tableau de carriere ONLINE.
   Lecture seule des donnees ONLINE-1B (state.onlinePlayerStats). Reutilise
   le vocabulaire visuel des autres panneaux profil (vert profond, dore,
   serif, cartes sobres). Modale profil : theme sombre unique. */
.local-profile-online-career {
  display: grid;
  gap: 14px;
}

.agora-leaderboards-shell {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(215, 168, 96, 0.32);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.08), rgba(255, 246, 213, 0.02)),
    rgba(6, 24, 18, 0.72);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 246, 213, 0.08);
}

.agora-rank-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.76fr);
  align-items: end;
  gap: 14px;
}

.agora-rank-hero__copy h3 {
  margin: 3px 0 5px;
  color: #fff7e8;
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  line-height: 1.02;
  text-transform: uppercase;
}

.agora-rank-hero__subtitle {
  max-width: 52ch;
  margin: 0;
  color: rgba(255, 247, 232, 0.82);
  font-weight: 850;
  line-height: 1.4;
}

.agora-rank-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(215, 168, 96, 0.25);
  border-radius: 14px;
  background: rgba(7, 22, 17, 0.62);
}

.agora-rank-identity__avatar {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 230, 167, 0.58);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 247, 232, 0.08);
}

.agora-rank-identity__avatar[hidden] {
  display: none;
}

.agora-rank-identity__text {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.agora-rank-identity__text strong {
  overflow: hidden;
  color: #fff7e8;
  font-size: 1rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agora-rank-identity__text span {
  overflow: hidden;
  color: rgba(255, 247, 232, 0.68);
  font-size: 0.8rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agora-rank-identity__xp {
  color: #ffe4a8;
  font-size: 1rem;
  font-weight: 950;
  white-space: nowrap;
}

.agora-rank-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.agora-rank-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 108px;
  align-content: center;
  padding: 12px 13px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 20%, rgba(244, 197, 112, 0.14), transparent 54%),
    rgba(7, 22, 17, 0.58);
  text-align: center;
}

.agora-rank-card__scope {
  overflow: hidden;
  color: #d7a860;
  font-size: 0.74rem;
  font-weight: 950;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.agora-rank-card__rank {
  color: #fff7e8;
  font-size: clamp(2rem, 4.2vw, 3.05rem);
  font-weight: 950;
  line-height: 0.95;
  text-shadow: 0 0 18px rgba(215, 168, 96, 0.22);
}

.agora-rank-card__meta {
  color: rgba(255, 247, 232, 0.68);
  font-size: 0.8rem;
  font-weight: 850;
}

.local-profile-online-intro h3 {
  margin: 4px 0 6px;
  color: #fff7e8;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.05;
}

.local-profile-online-intro__text {
  max-width: 62ch;
  margin: 0;
  color: rgba(255, 247, 232, 0.82);
  font-weight: 800;
  line-height: 1.45;
}

.local-profile-online-keycards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.local-profile-online-keycards article {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 92px;
  min-width: 0;
  padding: 13px 12px;
  border: 1px solid rgba(215, 168, 96, 0.26);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.09), rgba(255, 246, 213, 0.02)),
    rgba(7, 22, 17, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 246, 213, 0.06);
}

.local-profile-online-keycards span {
  color: #d7a860;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.local-profile-online-keycards strong {
  color: #fff7e8;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 900;
  line-height: 1;
}

.local-profile-online-empty {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(215, 168, 96, 0.24);
  border-radius: 13px;
  background: rgba(7, 22, 17, 0.44);
  color: rgba(255, 247, 232, 0.84);
  font-weight: 850;
  line-height: 1.4;
}

.local-profile-online-empty[hidden] {
  display: none;
}

.local-profile-online-tabs {
  display: flex;
  gap: 8px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.local-profile-online-tabs::-webkit-scrollbar {
  height: 5px;
}

.local-profile-online-tabs::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(215, 168, 96, 0.42);
}

.local-profile-online-tabs button {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(215, 168, 96, 0.24);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.06), rgba(255, 246, 213, 0.018)),
    rgba(7, 22, 17, 0.62);
  color: rgba(255, 247, 232, 0.78);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.local-profile-online-tabs button:hover,
.local-profile-online-tabs button:focus-visible {
  color: #fff7e8;
  border-color: rgba(215, 168, 96, 0.46);
  outline: none;
}

.local-profile-online-tabs button.is-active,
.local-profile-online-tabs button[aria-selected="true"] {
  color: #2e2217;
  border-color: rgba(255, 230, 167, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.98), rgba(215, 168, 96, 0.92)),
    #d7a860;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.local-profile-online-subpanel[hidden] {
  display: none;
}

.local-profile-online-subpanel {
  display: grid;
  gap: 12px;
}

.local-profile-online-subpanel.is-active {
  animation: onlineStatsPanelFade 180ms ease;
}

@keyframes onlineStatsPanelFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.local-profile-online-note {
  margin: 0;
  color: rgba(255, 247, 232, 0.72);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.4;
}

.local-profile-online-note--legacy {
  padding: 10px 12px;
  border: 1px solid rgba(215, 168, 96, 0.2);
  border-radius: 12px;
  background: rgba(7, 22, 17, 0.4);
}

/* ONLINE-2C.6-C — mention de couverture du sous-bloc « Détail de jeu
   vérifié » : discrète, sans encadré, jamais alarmante. */
.local-profile-online-note--coverage {
  margin-top: 8px;
  color: rgba(255, 247, 232, 0.58);
  font-size: 0.8rem;
  font-weight: 700;
}

.local-profile-online-matches {
  display: grid;
  gap: 10px;
}

.local-profile-online-match {
  display: grid;
  gap: 8px;
  padding: 12px 13px;
  border: 1px solid rgba(215, 168, 96, 0.2);
  border-left: 3px solid rgba(215, 168, 96, 0.4);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.05), rgba(255, 246, 213, 0.015)),
    rgba(7, 22, 17, 0.5);
}

.local-profile-online-match[data-result="win"] {
  border-left-color: #e4b45c;
  background:
    linear-gradient(180deg, rgba(255, 231, 168, 0.12), rgba(255, 231, 168, 0.03)),
    rgba(7, 22, 17, 0.5);
}

.local-profile-online-match[data-result="tie"] {
  border-left-color: rgba(215, 168, 96, 0.6);
}

.local-profile-online-match[data-result="loss"] {
  border-left-color: rgba(215, 168, 96, 0.22);
  background: rgba(6, 18, 14, 0.55);
}

.local-profile-online-match__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.local-profile-online-match__result {
  color: #fff7e8;
  font-size: 1.02rem;
  font-weight: 900;
}

.local-profile-online-match[data-result="win"] .local-profile-online-match__result {
  color: #ffe4a8;
}

.local-profile-online-match[data-result="loss"] .local-profile-online-match__result {
  color: rgba(255, 247, 232, 0.78);
}

.local-profile-online-match__head time {
  color: rgba(255, 247, 232, 0.62);
  font-size: 0.82rem;
  font-weight: 800;
}

.local-profile-online-match__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: rgba(255, 247, 232, 0.82);
  font-size: 0.9rem;
  font-weight: 800;
}

.local-profile-online-formats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.local-profile-online-format {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 13px 12px;
  border: 1px solid rgba(215, 168, 96, 0.2);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.06), rgba(255, 246, 213, 0.018)),
    rgba(7, 22, 17, 0.5);
}

.local-profile-online-format h4 {
  margin: 0;
  color: #d7a860;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.local-profile-online-format__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.local-profile-online-format__row span {
  color: rgba(255, 247, 232, 0.74);
  font-size: 0.86rem;
  font-weight: 800;
}

.local-profile-online-format__row strong {
  color: #fff7e8;
  font-size: 1rem;
  font-weight: 900;
}

/* ONLINE-2C.5-C — bloc SEPARE des statistiques verifiees du compte.
   Volontairement distinct visuellement des stats locales de l'appareil
   (accent dore leger + puce "verifie") pour qu'aucun melange ne soit
   suggere. Reutilise les classes de grille/bloc/notes existantes. */
.local-profile-verified-stats {
  margin-top: 4px;
  padding: 14px 14px 4px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(215, 168, 96, 0.08), rgba(7, 22, 17, 0.28));
}

.local-profile-verified-stats[hidden] {
  display: none;
}

.local-profile-verified-stats .local-profile-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.local-profile-verified-stats .local-profile-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d7a860;
  box-shadow: 0 0 8px rgba(215, 168, 96, 0.7);
}

#verifiedOnlineStatsBody {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

/* ACCOUNT-LOCAL-RESULTS-B5.3 — bloc SEPARE "Solo & Local sauvegardees dans
   mon compte", onglet Statistiques, sous le bloc "Sur cet appareil". Cadre
   distinct (accent vert leger) pour qu'aucun melange avec les stats appareil
   ne soit suggere. PAS la puce doree "verifie" du bloc ONLINE : ces resultats
   sont rapportes par le client, jamais "verifies". Reutilise les classes de
   grille / bloc / notes / cartes existantes. */
.local-profile-account-stats {
  margin-top: 8px;
  padding: 14px 14px 4px;
  border: 1px solid rgba(112, 178, 150, 0.3);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(112, 178, 150, 0.08), rgba(7, 22, 17, 0.28));
}

#localProfileAccountStatsBody {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.local-profile-account-stats__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.local-profile-account-stats__actions button {
  padding: 9px 14px;
  border: 1px solid rgba(215, 168, 96, 0.32);
  border-radius: 9px;
  background: rgba(10, 32, 25, 0.7);
  color: #f4ead3;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease;
}

.local-profile-account-stats__actions button:hover,
.local-profile-account-stats__actions button:focus-visible {
  border-color: rgba(247, 216, 145, 0.6);
  background: rgba(17, 49, 38, 0.95);
  color: #fff7e8;
  outline: none;
}

.local-profile-account-stats__empty-title {
  display: block;
  margin-bottom: 6px;
  color: #ffe4a8;
  font-size: 1rem;
  font-weight: 900;
}

.local-profile-account-stats__recent {
  display: grid;
  gap: 10px;
}

.local-profile-account-stats__recent .local-profile-match-card {
  min-width: 0;
  gap: 6px;
  padding: 12px 13px;
  border: 1px solid rgba(112, 178, 150, 0.28);
  border-radius: 13px;
}

.local-profile-account-stats__recent .local-profile-match-card__date {
  color: rgba(255, 247, 232, 0.68);
  font-size: 0.82rem;
  font-weight: 800;
}

.local-profile-account-stats__recent .local-profile-match-card__mode {
  color: #d7a860;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.local-profile-account-stats__recent .local-profile-match-card strong {
  color: #fff7e8;
  font-size: 1rem;
}

.local-profile-account-stats__recent .local-profile-match-card__best {
  color: rgba(255, 247, 232, 0.78);
  font-size: 0.82rem;
}

.local-profile-online-soon {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid rgba(215, 168, 96, 0.2);
}

.local-profile-online-soon__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.local-profile-online-soon__grid article {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px dashed rgba(215, 168, 96, 0.28);
  border-radius: 12px;
  background: rgba(7, 22, 17, 0.38);
}

.local-profile-online-soon__grid strong {
  color: rgba(255, 247, 232, 0.9);
  font-size: 0.95rem;
  font-weight: 900;
}

.local-profile-online-soon__grid span {
  color: rgba(255, 247, 232, 0.66);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.35;
}

.agora-leaderboards-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(215, 168, 96, 0.18);
  border-radius: 14px;
  background: rgba(6, 18, 14, 0.42);
}

.agora-leaderboards-card__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.agora-leaderboards-card__head div {
  display: grid;
  gap: 3px;
}

.agora-leaderboards-card__head strong {
  color: #fff7e8;
  font-size: 1.05rem;
  font-weight: 950;
}

.agora-leaderboards-card__head span {
  color: #d7a860;
  font-size: 0.8rem;
  font-weight: 950;
  text-transform: uppercase;
}

.agora-leaderboards-card__head p {
  max-width: 30ch;
  margin: 0;
  color: rgba(255, 247, 232, 0.62);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

.agora-leaderboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.agora-leaderboard-tabs button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 999px;
  background: rgba(255, 247, 232, 0.06);
  color: rgba(255, 247, 232, 0.72);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.agora-leaderboard-tabs button:hover,
.agora-leaderboard-tabs button:focus-visible,
.agora-leaderboard-tabs button.is-active {
  border-color: rgba(244, 197, 112, 0.62);
  background: rgba(244, 197, 112, 0.14);
  color: #fff7e8;
  outline: none;
}

.agora-leaderboard-status,
.agora-leaderboard-own-rank {
  color: rgba(255, 247, 232, 0.72);
  font-size: 0.84rem;
  font-weight: 800;
}

.agora-leaderboard-list {
  display: grid;
  gap: 6px;
}

.agora-leaderboard-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1.4fr) minmax(52px, 0.4fr) minmax(90px, 0.7fr) minmax(130px, 0.9fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(215, 168, 96, 0.18);
  border-radius: 8px;
  background: rgba(255, 247, 232, 0.045);
}

.agora-leaderboard-row.is-current-player {
  border-color: rgba(92, 214, 153, 0.5);
  background: rgba(92, 214, 153, 0.1);
}

.agora-leaderboard-rank,
.agora-leaderboard-xp {
  color: #fff7e8;
  font-weight: 950;
}

.agora-leaderboard-player {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: rgba(255, 247, 232, 0.9);
  font-weight: 900;
}

.agora-leaderboard-player img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.agora-leaderboard-player span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agora-leaderboard-country {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 247, 232, 0.7);
  font-size: 0.78rem;
  font-weight: 900;
}

.agora-leaderboard-meta {
  color: rgba(255, 247, 232, 0.62);
  font-size: 0.78rem;
  font-weight: 800;
}

.agora-leaderboard-public-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: rgba(255, 247, 232, 0.68);
  font-size: 0.76rem;
  font-weight: 800;
}

.agora-leaderboard-public-stats strong {
  color: #fff7e8;
}

@media (prefers-reduced-motion: reduce) {
  .local-profile-online-subpanel.is-active {
    animation: none;
  }
}

/* ONLINE-1C — responsive : 4 cartes cles en 2x2 des que la ligne devient
   serree, formats et "prochainement" en colonne unique sur mobile etroit. */
@media (max-width: 680px) {
  .agora-rank-hero {
    grid-template-columns: 1fr;
  }

  .agora-rank-cards {
    grid-template-columns: 1fr;
  }

  .local-profile-online-keycards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .local-profile-online-formats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .agora-leaderboards-shell {
    padding: 11px;
  }

  .agora-rank-identity {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .agora-rank-identity__xp {
    grid-column: 1 / -1;
  }

  .agora-rank-card {
    min-height: 86px;
  }

  .agora-leaderboards-card__head {
    display: grid;
  }

  .agora-leaderboards-card__head p {
    max-width: none;
    text-align: left;
  }

  .local-profile-online-soon__grid {
    grid-template-columns: 1fr;
  }

  .agora-leaderboard-row {
    grid-template-columns: 44px minmax(0, 1fr) minmax(76px, auto);
  }

  .agora-leaderboard-country,
  .agora-leaderboard-meta {
    display: none;
  }

  .local-profile-online-match__meta {
    gap: 4px 12px;
  }
}

@media (max-width: 520px) {
  #localProfilePanelOnline .local-profile-online-tabs {
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 5px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  #localProfilePanelOnline .local-profile-online-tabs button {
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.78rem;
    text-align: center;
  }

  #localProfilePanelOnline .local-profile-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  #localProfilePanelOnline .local-profile-stats-grid article,
  #localProfilePanelOnline .local-profile-online-keycards article,
  #localProfilePanelOnline .local-profile-online-format {
    padding: 11px;
  }

  #localProfilePanelOnline .local-profile-stats-grid span,
  #localProfilePanelOnline .local-profile-online-keycards span,
  #localProfilePanelOnline .local-profile-online-format h4 {
    margin-bottom: 6px;
    font-size: 0.68rem;
    letter-spacing: 0.045em;
    line-height: 1.22;
    overflow-wrap: anywhere;
  }

  #localProfilePanelOnline .local-profile-stats-grid strong,
  #localProfilePanelOnline .local-profile-online-keycards strong {
    font-size: clamp(1.1rem, 6vw, 1.42rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  #localProfilePanelOnline .local-profile-online-subpanel {
    gap: 10px;
  }

  #localProfilePanelOnline .local-profile-stat-block {
    margin-top: 12px;
  }
}

@media (max-width: 380px) {
  #localProfilePanelOnline .local-profile-online-keycards,
  #localProfilePanelOnline .local-profile-stats-grid {
    grid-template-columns: 1fr;
  }

  #localProfilePanelOnline .local-profile-online-tabs button {
    flex-basis: auto;
    min-width: 92px;
  }

  #localProfilePanelOnline .local-profile-online-format__row {
    display: grid;
    gap: 4px;
  }

  #localProfilePanelOnline .local-profile-online-format__row span,
  #localProfilePanelOnline .local-profile-online-format__row strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

.local-profile-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.local-profile-actions button {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(201, 171, 124, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.96), rgba(238, 224, 197, 0.94)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
  color: #2e2217;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 16px rgba(0, 0, 0, 0.18);
}

/* Démonstration lexique du guide interactif */

.interactive-guide-lexicon-demo {
  display: grid;
  gap: 8px;
  align-content: start;
  height: 100%;
  min-height: 0;
  padding: 12px 13px;
  border-radius: 18px;
  border: 1px solid rgba(229, 196, 132, 0.28);
  background:
    radial-gradient(circle at 14% 0%, rgba(229, 196, 132, 0.15), transparent 34%),
    linear-gradient(180deg, rgba(36, 66, 54, 0.96), rgba(13, 27, 22, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 220, 0.1),
    0 12px 22px rgba(0, 0, 0, 0.16);
  overflow: auto;
}

.interactive-guide-lexicon-demo__eyebrow {
  color: rgba(229, 196, 132, 0.86);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.interactive-guide-lexicon-demo__title {
  color: #fff2d6;
  font-size: 1rem;
  line-height: 1.15;
}

.interactive-guide-lexicon-demo__definition {
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(229, 196, 132, 0.18);
  background: rgba(255, 239, 199, 0.06);
}

.interactive-guide-lexicon-demo__hint {
  color: rgba(229, 211, 176, 0.76);
  font-size: 0.76rem;
  font-weight: 750;
}

.interactive-guide-lexicon-demo p {
  margin: 0;
  color: rgba(244, 233, 212, 0.9);
  font-size: 0.88rem;
  line-height: 1.32;
}

.interactive-guide-lexicon-demo strong {
  color: #efd39b;
}

.enriched-word-content {
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(229, 196, 132, 0.42) rgba(255, 255, 255, 0.04);
}

.enriched-word-content::-webkit-scrollbar {
  width: 6px;
}

.enriched-word-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.enriched-word-content::-webkit-scrollbar-thumb {
  background: rgba(229, 196, 132, 0.42);
  border-radius: 999px;
}

.enriched-word-eyebrow {
  color: rgba(229, 196, 132, 0.86);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.enriched-word-title {
  color: #fff2d6;
  font-size: clamp(0.98rem, 1.08vw, 1.16rem);
  line-height: 1.14;
  letter-spacing: 0.02em;
}

.enriched-word-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.enriched-word-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(230, 205, 156, 0.18);
  background: rgba(255, 239, 199, 0.08);
  color: rgba(246, 231, 202, 0.9);
  font-size: 0.72rem;
  font-weight: 700;
}

.enriched-word-definition,
.enriched-word-message,
.enriched-word-notes {
  margin: 0;
  color: rgba(244, 233, 212, 0.88);
  font-size: 0.96rem;
  line-height: 1.32;
}

.enriched-word-missing-inline {
  margin: 0;
  color: rgba(244, 233, 212, 0.88);
  font-size: 0.93rem;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.enriched-word-compact {
  margin: 0;
  color: rgba(244, 233, 212, 0.9);
  font-size: 0.98rem;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.enriched-word-detail {
  margin: 3px 0 0;
  color: rgba(229, 211, 176, 0.76);
  font-size: 0.82rem;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.enriched-word-inline-title {
  color: #fff2d6;
  letter-spacing: 0.02em;
}

.enriched-word-inline-pos,
.enriched-word-lemma {
  color: rgba(229, 196, 132, 0.92);
  font-weight: 800;
}

.enriched-word-lemma {
  display: inline;
}

.enriched-word-notes {
  display: inline;
  max-width: 100%;
  color: rgba(229, 211, 176, 0.72);
}

.enriched-word-definition-main {
  color: inherit;
  font: inherit;
  font-weight: inherit;
}

.enriched-word-definition-separator {
  color: rgba(229, 211, 176, 0.56);
  font-weight: 700;
}

.enriched-word-external-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
}

.enriched-word-external-link {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 7px;
  border: 1px solid rgba(229, 196, 132, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 239, 199, 0.1), rgba(255, 239, 199, 0.045)),
    rgba(24, 43, 36, 0.36);
  color: rgba(255, 238, 203, 0.92);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.05;
  text-decoration: none;
  vertical-align: baseline;
}

.enriched-word-external-link:hover {
  border-color: rgba(229, 196, 132, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 239, 199, 0.16), rgba(255, 239, 199, 0.07)),
    rgba(31, 55, 46, 0.5);
  color: #fff1d2;
  text-decoration: none;
}

.enriched-word-external-separator {
  color: rgba(229, 211, 176, 0.48);
  font-weight: 700;
}

/* Démonstrations plateau du guide interactif */

.interactive-guide-demo-layer {
  position: absolute;
  inset: var(--board-grid-top) var(--board-grid-right) var(--board-grid-bottom) var(--board-grid-left);
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  grid-template-rows: repeat(15, minmax(0, 1fr));
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}

.board-stage.is-guide-demo-clean .board .cell > .tile,
.board-stage.is-guide-demo-clean .word-highlights {
  opacity: 0;
  visibility: hidden;
}

.board-stage.is-guide-demo-clean .board .cell.pending,
.board-stage.is-guide-demo-clean .board .cell.held-source {
  box-shadow: none;
}

.tour-demo-tile {
  align-self: center;
  justify-self: center;
  width: 82%;
  height: 82%;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: transparent;
  box-shadow:
    0 0 0 2px rgba(255, 225, 153, 0.5),
    0 0 18px rgba(255, 190, 81, 0.48),
    0 10px 16px rgba(32, 19, 5, 0.18);
  transform: translateZ(0);
}

.tour-demo-tile-face {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(116, 82, 34, 0.44);
  border-radius: 7px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 232, 0.72), transparent 30%),
    linear-gradient(180deg, #fff4c6 0%, #f1d289 54%, #d99d37 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(104, 62, 16, 0.22),
    0 5px 7px rgba(45, 27, 10, 0.3);
  color: #24170a;
}

.tour-demo-tile-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 40%);
  pointer-events: none;
}

.tour-demo-tile-face__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.tour-demo-tile-face__letter {
  position: relative;
  z-index: 1;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.05rem, 1.9vw, 1.78rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.015em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.56);
}

.tour-demo-tile-face__value {
  position: absolute;
  right: 8%;
  bottom: 7%;
  z-index: 1;
  color: rgba(66, 46, 20, 0.84);
  font-size: 0.48em;
  font-weight: 900;
  line-height: 1;
}

.tour-demo-tile-face.has-art:not(.is-art-missing) .tour-demo-tile-face__letter,
.tour-demo-tile-face.has-art:not(.is-art-missing) .tour-demo-tile-face__value {
  opacity: 0;
}

.tour-demo-tile-face.is-joker .tour-demo-tile-face__letter {
  color: #8d3838;
}

.tour-demo-tile .tile {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: 1;
  filter: drop-shadow(0 5px 7px rgba(45, 27, 10, 0.3));
}

body[data-board-style="art"] .interactive-guide-demo-layer .tile {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
}

body[data-board-style="art"] .interactive-guide-demo-layer .tile-art {
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: none;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 251, 232, 0.98), rgba(244, 233, 190, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(126, 106, 67, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body[data-board-style="native-css"] .interactive-guide-demo-layer .tile {
  border-radius: 5px;
}

body[data-board-style="native-css"] .interactive-guide-demo-layer .tile-art {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: 50% 50%;
  transform: none;
  filter: none;
  border-radius: 5px;
}

.tour-demo-tile--shared {
  box-shadow:
    0 0 0 3px rgba(255, 235, 147, 0.35),
    0 0 26px rgba(255, 213, 96, 0.72),
    0 12px 18px rgba(32, 19, 5, 0.26);
}

.tour-demo-tile--added {
  box-shadow:
    0 0 0 2px rgba(255, 184, 88, 0.52),
    0 0 20px rgba(255, 165, 64, 0.46),
    0 10px 16px rgba(32, 19, 5, 0.18);
}

.tour-demo-label {
  align-self: center;
  justify-self: center;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid rgba(255, 223, 144, 0.62);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(44, 72, 58, 0.96), rgba(14, 27, 22, 0.96));
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.26),
    0 0 14px rgba(255, 194, 92, 0.24);
  color: #fff0c7;
  font-size: clamp(0.48rem, 1.1vw, 0.72rem);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  white-space: normal;
}

.tour-demo-label--horizontal {
  grid-column: 6 / span 5;
  grid-row: 7;
}

.tour-demo-label--vertical {
  grid-column: 10 / span 4;
  grid-row: 9;
}

.tour-bonus-label {
  --tour-bubble-tail: rgba(13, 27, 22, 0.96);
  --tour-bubble-tail-x: 50%;
  --tour-bubble-shift-y: 0px;
  align-self: center;
  justify-self: center;
  position: relative;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(255, 235, 168, 0.68);
  border-radius: 15px 15px 15px 6px;
  background:
    linear-gradient(180deg, rgba(42, 68, 55, 0.96), rgba(13, 27, 22, 0.96));
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    0 0 16px rgba(255, 198, 104, 0.28);
  color: #fff2d2;
  font-size: clamp(0.56rem, 1.18vw, 0.82rem);
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34);
  white-space: normal;
  transform: translateY(var(--tour-bubble-shift-y));
}

.tour-bonus-label::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22));
}

.tour-bonus-label--word4::after,
.tour-bonus-label--word3::after {
  left: var(--tour-bubble-tail-x);
  bottom: -8px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid var(--tour-bubble-tail);
}

.tour-bonus-label--word2::after,
.tour-bonus-label--letter3::after,
.tour-bonus-label--letter2::after {
  left: var(--tour-bubble-tail-x);
  top: -8px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 9px solid var(--tour-bubble-tail);
}

.tour-bonus-label--word4 {
  grid-column: 7 / span 3;
  grid-row: 14;
  --tour-bubble-tail: rgba(7, 66, 51, 0.98);
  background:
    linear-gradient(180deg, rgba(13, 111, 82, 0.98), rgba(7, 66, 51, 0.98));
}

.tour-bonus-label--word3 {
  grid-column: 1 / span 4;
  grid-row: 14;
  --tour-bubble-tail: rgba(74, 28, 57, 0.98);
  --tour-bubble-tail-x: 14%;
  background:
    linear-gradient(180deg, rgba(110, 45, 80, 0.98), rgba(74, 28, 57, 0.98));
}

.tour-bonus-label--word2 {
  grid-column: 8 / span 5;
  grid-row: 7;
  --tour-bubble-tail: rgba(64, 128, 130, 0.98);
  --tour-bubble-tail-x: 50%;
  --tour-bubble-shift-y: 0px;
  background:
    linear-gradient(180deg, rgba(64, 128, 130, 0.98), rgba(42, 89, 94, 0.98));
}

.tour-bonus-label--letter3 {
  grid-column: 2 / span 4;
  grid-row: 3;
  --tour-bubble-tail: rgba(190, 120, 48, 0.98);
  --tour-bubble-tail-x: 14%;
  background:
    linear-gradient(180deg, rgba(190, 120, 48, 0.98), rgba(142, 81, 31, 0.98));
}

.tour-bonus-label--letter2 {
  grid-column: 9 / span 5;
  grid-row: 2;
  --tour-bubble-tail: rgba(126, 151, 78, 0.98);
  --tour-bubble-tail-x: 70%;
  background:
    linear-gradient(180deg, rgba(126, 151, 78, 0.98), rgba(86, 111, 55, 0.98));
}

/* Modale du guide interactif */

.interactive-guide {
  --tour-card-left: 50%;
  --tour-card-top: 50%;
  --tour-spot-left: 50%;
  --tour-spot-top: 50%;
  --tour-spot-width: 0px;
  --tour-spot-height: 0px;
  --tour-spot-radius: 22px;
  position: fixed;
  inset: 0;
  z-index: 45;
  color: #f7ead0;
  pointer-events: auto;
}

.interactive-guide[hidden] {
  display: none;
}

.interactive-guide.is-target-clickable {
  pointer-events: none;
}

.interactive-guide.is-target-clickable .interactive-guide__card {
  pointer-events: none;
}

.interactive-guide.is-target-clickable .interactive-guide__actions button,
.interactive-guide.is-target-clickable .interactive-guide__choice input {
  pointer-events: auto;
}

.interactive-guide.is-targetless {
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6, 13, 11, 0.62);
  backdrop-filter: blur(3px);
}

.interactive-guide__spotlight {
  position: fixed;
  left: var(--tour-spot-left);
  top: var(--tour-spot-top);
  width: var(--tour-spot-width);
  height: var(--tour-spot-height);
  border-radius: var(--tour-spot-radius);
  border: 2px solid rgba(229, 196, 132, 0.92);
  background: rgba(255, 228, 166, 0.06);
  box-shadow:
    0 0 0 9999px rgba(5, 11, 9, 0.58),
    0 0 0 6px rgba(229, 196, 132, 0.08),
    0 0 30px rgba(229, 196, 132, 0.28);
  pointer-events: none;
  transition:
    left 180ms ease,
    top 180ms ease,
    width 180ms ease,
    height 180ms ease,
    border-radius 180ms ease;
}

.interactive-guide.is-targetless .interactive-guide__spotlight {
  display: none;
}

.interactive-guide__card {
  position: fixed;
  left: var(--tour-card-left);
  top: var(--tour-card-top);
  width: min(380px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(229, 196, 132, 0.32);
  background:
    radial-gradient(circle at 14% 0%, rgba(229, 196, 132, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(31, 49, 40, 0.98), rgba(12, 21, 18, 0.98));
  box-shadow:
    0 24px 44px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 244, 220, 0.1);
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  animation: interactiveGuideIn 180ms ease-out;
}

.interactive-guide__pdf-download {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 12px;
  border: 1px solid rgba(105, 66, 27, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 246, 214, 0.96), rgba(229, 176, 78, 0.96)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent);
  color: #251707;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 244, 214, 0.45);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 245, 221, 0.48);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.interactive-guide__pdf-download:hover {
  color: #1b1105;
  border-color: rgba(255, 226, 165, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 250, 229, 1), rgba(241, 190, 88, 1)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent);
  transform: translateY(-1px);
  box-shadow:
    0 12px 22px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 249, 235, 0.58);
}

.interactive-guide__card--lexicon-demo {
  width: min(720px, calc(100vw - 32px));
}

.interactive-guide.is-targetless .interactive-guide__card {
  position: relative;
  left: auto;
  top: auto;
}

.interactive-guide__progress {
  margin: 0;
  color: rgba(229, 196, 132, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.interactive-guide__card h3 {
  margin: 0;
  color: #fff2dc;
  font-size: 1.12rem;
  line-height: 1.2;
}

.interactive-guide__card p {
  margin: 0;
  color: rgba(244, 233, 212, 0.88);
  font-size: 0.96rem;
  line-height: 1.55;
}

.interactive-guide__text {
  display: grid;
  gap: 10px;
  margin: 0;
  color: rgba(244, 233, 212, 0.88);
  font-size: 0.96rem;
  line-height: 1.55;
}

.interactive-guide__text p {
  margin: 0;
}

.interactive-guide__inline-download {
  color: #ffe1a1;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-color: rgba(255, 225, 161, 0.46);
  text-underline-offset: 3px;
}

.interactive-guide__inline-download:hover {
  color: #fff2dc;
  text-decoration-color: rgba(255, 242, 220, 0.78);
}

.interactive-guide__card--actions {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-color: rgba(229, 196, 132, 0.52) rgba(9, 18, 15, 0.44);
}

.interactive-guide-actions-list {
  display: grid;
  gap: 8px;
}

.interactive-guide-action-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid rgba(229, 196, 132, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 244, 220, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(11, 24, 19, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.07);
}

.interactive-guide-action-icon {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.interactive-guide-action-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.interactive-guide-action-text strong {
  color: #f8d98f;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.interactive-guide-action-text span {
  color: rgba(244, 233, 212, 0.86);
  font-size: 0.84rem;
  line-height: 1.35;
}

.interactive-guide__choice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: rgba(244, 233, 212, 0.78);
  font-size: 0.84rem;
  line-height: 1.3;
}

.interactive-guide__choice input {
  margin-top: 2px;
  accent-color: #d9b26e;
}

.interactive-guide__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.interactive-guide__nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.interactive-guide__actions button {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 12px;
  border: 1px solid rgba(201, 171, 124, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.96), rgba(238, 224, 197, 0.94)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
  color: #2e2217;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 6px 12px rgba(0, 0, 0, 0.16);
}

.interactive-guide__actions button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.interactive-guide__actions button:disabled {
  opacity: 0.48;
  transform: none;
}

.interactive-guide__skip {
  background:
    linear-gradient(180deg, rgba(255, 244, 220, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(14, 24, 20, 0.82) !important;
  color: rgba(244, 233, 212, 0.88) !important;
}

@keyframes interactiveGuideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.setup-form {
  display: grid;
  gap: 18px;
  min-height: 0;
}

/* Repères du guide interactif */

.interactive-guide-target-cue {
  position: relative;
  isolation: isolate;
  animation: interactiveGuideTargetPulse 1.45s ease-in-out infinite;
  box-shadow:
    0 0 0 3px rgba(255, 244, 216, 0.18),
    0 0 24px rgba(229, 196, 132, 0.38),
    inset 0 1px 0 rgba(255, 244, 216, 0.2) !important;
}

.interactive-guide-target-cue::after {
  content: attr(data-guide-cue);
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  z-index: 2;
  width: max-content;
  max-width: min(280px, 72vw);
  padding: 7px 10px;
  border: 1px solid rgba(229, 196, 132, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 244, 216, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(13, 24, 20, 0.96);
  color: #fff2dc;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.2;
  pointer-events: none;
  text-align: center;
  text-transform: none;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
}

@keyframes interactiveGuideTargetPulse {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}

/* Accès résumé et écran de fin */

.panel-status.is-endgame-access {
  border-color: rgba(232, 194, 119, 0.32);
}

.panel-status.is-endgame-access > .panel-head,
.panel-status.is-endgame-access > .lexicon-loading,
.panel-status.is-endgame-access > .message,
.panel-status.is-endgame-access > #lastMoveSummary {
  display: none !important;
}

.endgame-status-access {
  display: grid;
  gap: 8px;
  padding: 12px 13px;
  border-radius: 18px;
  border: 1px solid rgba(232, 194, 119, 0.24);
  background:
    radial-gradient(circle at 16% 0%, rgba(230, 190, 110, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(37, 68, 51, 0.84), rgba(12, 24, 19, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.08);
}

.endgame-status-access[hidden] {
  display: none;
}

.endgame-status-access__eyebrow {
  margin: 0;
  color: rgba(239, 203, 134, 0.86);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.endgame-status-access h3 {
  margin: 0;
  color: #fff1d2;
  font-size: 1.05rem;
}

.endgame-status-access p {
  margin: 0;
  color: rgba(245, 233, 210, 0.86);
  font-size: 0.84rem;
  line-height: 1.28;
}

.endgame-status-access__button {
  min-height: 38px;
  margin-top: 3px;
  border-radius: 12px;
  border: 1px solid rgba(236, 196, 115, 0.42);
  background:
    linear-gradient(180deg, rgba(237, 196, 121, 0.95), rgba(184, 127, 59, 0.96));
  color: #21170e;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 225, 0.32),
    0 8px 16px rgba(0, 0, 0, 0.2);
}

.endgame-status-access__button:hover {
  transform: translateY(-1px);
}

.endgame-screen {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vh, 28px);
  background: rgba(8, 13, 12, 0.54);
  backdrop-filter: blur(5px);
  overflow: hidden;
}

.endgame-screen[hidden] {
  display: none;
}

.endgame-card {
  position: relative;
  z-index: 5;
  width: min(92vw, 780px);
  max-height: calc(100vh - clamp(28px, 6vh, 56px));
  padding: 24px 64px 22px 24px;
  border-radius: 28px;
  border: 1px solid rgba(221, 194, 150, 0.24);
  background:
    linear-gradient(180deg, rgba(249, 238, 219, 0.12), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(22, 34, 29, 0.98), rgba(12, 20, 17, 0.98));
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 246, 225, 0.08);
  color: #f8edda;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.endgame-card::-webkit-scrollbar {
  width: 10px;
}

.endgame-card::-webkit-scrollbar-track {
  background: rgba(7, 14, 12, 0.36);
  border-radius: 999px;
}

.endgame-card::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(241, 207, 145, 0.72), rgba(138, 103, 52, 0.78));
  border: 2px solid rgba(12, 20, 17, 0.72);
}

.endgame-card {
  scrollbar-color: rgba(207, 165, 91, 0.82) rgba(7, 14, 12, 0.36);
  scrollbar-width: thin;
}

.endgame-top-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(224, 187, 116, 0.38);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 239, 190, 0.16), transparent 56%),
    rgba(9, 24, 19, 0.78);
  color: rgba(255, 238, 199, 0.94);
  display: inline-grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.1),
    0 8px 18px rgba(0, 0, 0, 0.24);
  transition:
    transform 120ms ease,
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.endgame-top-close:hover,
.endgame-top-close:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 221, 144, 0.78);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 236, 181, 0.28), transparent 58%),
    rgba(27, 48, 38, 0.94);
  color: #ffe6a8;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.18),
    0 10px 20px rgba(0, 0, 0, 0.28),
    0 0 0 3px rgba(231, 185, 100, 0.16);
}

@media (max-width: 520px) {
  .endgame-card {
    padding: 22px 56px 20px 18px;
  }

  .endgame-top-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    font-size: 1.8rem;
  }
}

.endgame-fireworks {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.endgame-premium-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.endgame-phase[hidden] {
  display: none;
}

.endgame-card .subtle {
  color: rgba(244, 232, 211, 0.88);
}

.endgame-eyebrow {
  margin-bottom: 8px;
  color: rgba(232, 216, 193, 0.68);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.74rem;
  font-weight: 700;
}

.endgame-card h2 {
  color: #fff3df;
}

.endgame-hero {
  position: relative;
  margin-top: 18px;
  padding: 18px 18px 16px;
  border-radius: 20px;
  border: 1px solid rgba(214, 179, 118, 0.22);
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 224, 156, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(35, 64, 51, 0.92), rgba(17, 30, 25, 0.96));
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: center;
  overflow: hidden;
}

.endgame-hero--ceremony {
  min-height: 196px;
  padding: 18px clamp(18px, 4vw, 34px);
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 2.2vw, 24px);
  justify-items: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 229, 160, 0.16), transparent 30%),
    radial-gradient(circle at 16% 28%, rgba(255, 241, 197, 0.13), transparent 32%),
    linear-gradient(135deg, rgba(45, 78, 61, 0.9), rgba(14, 42, 31, 0.98) 48%, rgba(8, 24, 19, 0.98));
  border-color: rgba(218, 183, 108, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 199, 0.12),
    0 16px 32px rgba(0, 0, 0, 0.2);
}

.endgame-hero-center {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
}

/* ONLINE-0D-C.7-H.1-F — UNIQUEMENT l'ecran de fin ONLINE avec carrousel
   narratif : la colonne centrale occupe toute la largeur utile du hero
   (1fr, entre les palmes) au lieu de se limiter au plus large enfant, ce
   qui donne au texte narratif la pleine largeur sous la couronne. Cible
   via :has -> aucun impact sur la phase penalites ni sur l'ecran de fin
   LOCAL (pas de #onlineNarrativeCarousel visible). */
.endgame-hero--ceremony:has(#onlineNarrativeCarousel:not([hidden])) .endgame-hero-center {
  justify-self: stretch;
}

.endgame-hero--ceremony:has(#onlineNarrativeCarousel:not([hidden])) .endgame-hero-center > * {
  max-width: 100%;
}

.endgame-hero-kicker {
  margin: 0 0 2px;
  color: rgba(229, 184, 101, 0.92);
  font-size: clamp(0.82rem, 1.7vw, 1.08rem);
  font-weight: 800;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.36);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}

.endgame-hero-kicker span {
  display: inline-block;
}

.endgame-hero-star {
  width: clamp(13px, 1.55vw, 18px);
  height: clamp(13px, 1.55vw, 18px);
  object-fit: contain;
  flex: 0 0 auto;
  filter:
    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 7px rgba(235, 196, 106, 0.35));
}

.endgame-hero-palm {
  align-self: center;
  width: clamp(54px, 8vw, 92px);
  max-height: 158px;
  object-fit: contain;
  opacity: 0.95;
  filter:
    drop-shadow(0 12px 18px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 12px rgba(229, 188, 96, 0.24));
  pointer-events: none;
}

.endgame-hero-palm--right {
  transform: scaleX(-1);
}

.endgame-hero-copy {
  width: 100%;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.endgame-hero-visual {
  width: 112px;
  height: 112px;
  border-radius: 30px;
  padding: 5px;
  background:
    linear-gradient(180deg, rgba(245, 220, 163, 0.94), rgba(158, 116, 47, 0.92));
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 244, 214, 0.2),
    inset 0 1px 0 rgba(255, 250, 236, 0.45);
}

.endgame-hero--ceremony .endgame-hero-visual {
  width: clamp(88px, 13vw, 116px);
  height: clamp(88px, 13vw, 116px);
  border-radius: 28px;
  position: relative;
}

.endgame-hero-visual.is-tie {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  background: none;
  box-shadow: none;
}

.endgame-hero-visual.is-tie .endgame-hero-avatar {
  width: clamp(72px, 11vw, 94px);
  height: clamp(72px, 11vw, 94px);
  border: 4px solid rgba(245, 220, 163, 0.92);
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 244, 214, 0.2);
}

.endgame-hero-extra {
  width: clamp(54px, 8vw, 70px);
  height: clamp(54px, 8vw, 70px);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #241b12;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(255, 238, 191, 0.98), rgba(225, 188, 113, 0.94));
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.22);
}

.endgame-hero-avatar {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: linear-gradient(180deg, rgba(22, 45, 35, 0.82), rgba(11, 19, 16, 0.76));
}

.endgame-hero-message {
  margin: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  color: rgba(250, 237, 213, 0.9);
  font-size: clamp(1.16rem, 1.55vw, 1.42rem);
  line-height: 1.42;
  font-weight: 700;
}

/* ONLINE-0D-C.7-H.1-E — sans cette regle, l'attribut hidden pose par
   renderEndGameScreen() (isOnlineEndGame) est neutralise par le display:flex
   ci-dessus (regle auteur > feuille UA), et le message LOCAL restait visible
   en meme temps que le carrousel ONLINE. */
.endgame-hero-message[hidden] {
  display: none;
}

.endgame-praise-text {
  display: inline-block;
  max-width: 100%;
  color: #ffe9bc;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

.endgame-praise-text.is-swapping {
  animation: endgamePraiseSwap 420ms ease;
}

/* ONLINE-0D-C.7-H.1-D — resume fixe + mini-carrousel narratif ONLINE.
   Masque par defaut (LOCAL/SOLO/IA) : n'apparait que lorsque
   renderOnlineNarrativeSummary() le remplit reellement en mode ONLINE. */
.endgame-narrative {
  margin: 4px 0 0;
  display: grid;
  gap: 6px;
  /* ONLINE-0D-C.7-H.1-F — exploite toute la largeur de la colonne centrale
     du hero (sous la couronne, entre les palmes), au lieu d'un bloc etroit
     visuellement detache. Reste borne a .endgame-hero-copy : jamais de
     chevauchement avec les palmes. */
  width: 100%;
  justify-self: stretch;
}

.endgame-narrative[hidden] {
  display: none;
}

.endgame-narrative-summary {
  margin: 0;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(212, 184, 141, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(11, 18, 16, 0.34);
  color: rgba(250, 237, 213, 0.94);
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  font-weight: 750;
  line-height: 1.45;
  text-align: center;
}

.endgame-narrative-summary[hidden] {
  display: none;
}

.endgame-narrative-summary:empty {
  display: none;
}

.endgame-narrative-carousel {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.endgame-narrative-carousel[hidden] {
  display: none;
}

/* Section 11 du mandat : les deux slides partagent la meme grid-area, le
   conteneur prend donc naturellement la hauteur de la plus longue —
   jamais de saut de hauteur au changement de slide, jamais de
   min-height arbitraire. */
.endgame-narrative-track {
  display: grid;
  width: 100%;
}

/* ONLINE-0D-C.7-H.1-F — alignement visuel sur le texte de l'ecran de fin
   LOCAL (.endgame-hero-message / .endgame-praise-text) : meme famille de
   police (heritee du body serif), meme teinte doree premium, meme ombre
   portee, presence de taille comparable. Pas de fond ni de bordure : le
   texte s'integre sous la couronne au lieu de former un bloc separe. */
.endgame-narrative-slide {
  grid-area: 1 / 1;
  margin: 0;
  padding: 2px 6px;
  color: #ffe9bc;
  font-size: clamp(1.12rem, 1.5vw, 1.4rem);
  font-weight: 700;
  line-height: 1.42;
  text-align: center;
  text-wrap: pretty;
  overflow-wrap: break-word;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 190ms ease, transform 190ms ease;
}

/* Reduction adaptative pilotee par renderOnlineNarrativeCarousel() (classe
   posee d'apres le message le plus long) : la police/couleur/ombre premium
   sont conservees, seule la taille diminue pour eviter tout debordement. */
.endgame-narrative-track[data-length="long"] .endgame-narrative-slide {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.endgame-narrative-track[data-length="xlong"] .endgame-narrative-slide {
  font-size: clamp(0.94rem, 1.15vw, 1.08rem);
  line-height: 1.4;
}

.endgame-narrative-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.endgame-narrative-slide[hidden] {
  display: none;
}

.endgame-narrative-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.endgame-narrative-controls[hidden] {
  display: none;
}

.endgame-narrative-arrow {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(212, 184, 141, 0.24);
  background: rgba(11, 18, 16, 0.4);
  color: rgba(250, 237, 213, 0.85);
  font-size: 1rem;
  line-height: 1;
  display: grid;
  place-items: center;
}

.endgame-narrative-arrow:hover,
.endgame-narrative-arrow:focus-visible {
  border-color: rgba(215, 168, 96, 0.55);
  color: #ffe9bc;
  outline: none;
}

.endgame-narrative-dots {
  display: flex;
  gap: 6px;
}

.endgame-narrative-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(212, 184, 141, 0.3);
}

.online-history-help {
  margin: 2px 0 10px;
  color: rgba(250, 237, 213, 0.72);
  font-size: 0.92rem;
  line-height: 1.45;
}

.endgame-narrative-dot:hover,
.endgame-narrative-dot:focus-visible {
  background: rgba(215, 168, 96, 0.6);
  outline: none;
}

.endgame-narrative-dot.is-active {
  background: #d7a860;
  box-shadow: 0 0 6px rgba(215, 168, 96, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .endgame-narrative-slide {
    transition: none;
    transform: none;
  }
}

/* ONLINE-0D-C.7-H.1-F — sur petit ecran, la colonne centrale du hero est
   tres etroite : quand la zone narrative ONLINE est affichee (et seulement
   dans ce cas, via :has), on resserre les marges du hero et on reduit
   legerement les palmes pour donner de la largeur au texte et eviter tout
   chevauchement. Aucun effet sur l'ecran de fin LOCAL (pas de carrousel). */
@media (max-width: 560px) {
  .endgame-hero--ceremony:has(#onlineNarrativeCarousel:not([hidden])) {
    padding-left: 10px;
    padding-right: 10px;
    column-gap: 6px;
  }

  .endgame-hero--ceremony:has(#onlineNarrativeCarousel:not([hidden])) .endgame-hero-palm {
    width: clamp(28px, 7.5vw, 42px);
  }

  .endgame-narrative-slide {
    font-size: clamp(1rem, 3.4vw, 1.2rem);
  }

  .endgame-narrative-track[data-length="long"] .endgame-narrative-slide {
    font-size: clamp(0.94rem, 3.1vw, 1.1rem);
  }

  .endgame-narrative-track[data-length="xlong"] .endgame-narrative-slide {
    font-size: clamp(0.9rem, 2.9vw, 1.02rem);
  }
}

.endgame-winner {
  display: block;
  margin-top: 0;
  font-size: clamp(2.15rem, 4.6vw, 3.35rem);
  line-height: 1.05;
  color: #fff4df;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.26);
}

.endgame-victory-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 14px);
  min-width: 0;
  flex-wrap: wrap;
  text-align: center;
}

.endgame-victory-palm {
  flex: 0 0 auto;
  width: clamp(38px, 5vw, 62px);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 7px 12px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 10px rgba(230, 186, 100, 0.22));
  opacity: 0.9;
  pointer-events: none;
}

.endgame-victory-palm--right {
  transform: scaleX(-1);
}

.endgame-winner-crown {
  flex: 0 0 auto;
  width: clamp(40px, 5.4vw, 74px);
  height: auto;
  object-fit: contain;
  margin-left: -4px;
  filter:
    drop-shadow(0 7px 11px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 10px rgba(238, 200, 115, 0.34))
    drop-shadow(0 0 18px rgba(255, 222, 145, 0.14));
  animation: endgameCrownFloat 3.8s ease-in-out infinite;
  transform-origin: 50% 72%;
  pointer-events: none;
}

.endgame-winner-crown[hidden] {
  display: none;
}

.endgame-screen.is-celebrating .endgame-card {
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 231, 180, 0.08),
    inset 0 1px 0 rgba(255, 246, 225, 0.08);
}

.endgame-section {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}

.endgame-summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.endgame-summary-head > div {
  min-width: 0;
}

.endgame-profile-action {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(128, 82, 31, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 239, 190, 0.98), rgba(210, 155, 70, 0.96)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent);
  color: #2e2217;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 16px rgba(0, 0, 0, 0.18);
  transition:
    transform 120ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    filter 160ms ease;
}

.endgame-profile-action:hover,
.endgame-profile-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 223, 151, 0.9);
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 10px 18px rgba(0, 0, 0, 0.24),
    0 0 0 3px rgba(231, 185, 100, 0.16);
}

.endgame-ranking {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.endgame-ranking li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(212, 184, 141, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(13, 20, 18, 0.45);
}

.endgame-ranking li.is-winner {
  border-color: rgba(241, 201, 124, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 240, 205, 0.1), rgba(255, 255, 255, 0.03)),
    rgba(16, 25, 21, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 225, 0.1),
    0 0 0 1px rgba(235, 200, 126, 0.08);
}

.endgame-rank {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #2d2218;
  background: linear-gradient(180deg, rgba(255, 238, 191, 0.98), rgba(225, 188, 113, 0.94));
  font-weight: 800;
  font-size: 0.88rem;
}

.endgame-player {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.endgame-player-copy {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 5px;
  align-items: center;
}

.endgame-player strong {
  color: #fff0d6;
  font-size: 1rem;
}

.endgame-player .subtle {
  color: rgba(241, 228, 203, 0.84);
}

.endgame-penalty-rack {
  display: flex;
  flex: 1 1 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.endgame-penalty-tile {
  flex: 0 0 auto;
  width: 34px;
  height: 33px;
  border-radius: 8px;
  cursor: default;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
}

.endgame-penalty-rack--compact {
  gap: 4px;
}

.endgame-penalty-rack--compact .endgame-penalty-tile {
  width: 31px;
  height: 30px;
  border-radius: 7px;
}

.endgame-penalty-rack--dense {
  gap: 3px;
}

.endgame-penalty-rack--dense .endgame-penalty-tile {
  width: 29px;
  height: 28px;
  border-radius: 6px;
}

.endgame-penalty-tile .tile-art {
  object-fit: contain;
}

.endgame-penalty-tile .tile-glyph {
  font-size: 1rem;
}

.endgame-penalty-tile small {
  right: 4px;
  bottom: 3px;
  font-size: 0.56rem;
}

.endgame-penalty-rack--compact .endgame-penalty-tile .tile-glyph {
  font-size: 0.92rem;
}

.endgame-penalty-rack--compact .endgame-penalty-tile small {
  right: 4px;
  bottom: 3px;
  font-size: 0.52rem;
}

.endgame-penalty-rack--dense .endgame-penalty-tile .tile-glyph {
  font-size: 0.84rem;
}

.endgame-penalty-rack--dense .endgame-penalty-tile small {
  right: 3px;
  bottom: 2px;
  font-size: 0.48rem;
}

.endgame-penalty-unavailable {
  flex-basis: 100%;
  font-size: 0.78rem;
  font-style: italic;
}

.endgame-ranking-crown {
  width: 34px;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 6px 9px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 8px rgba(238, 200, 115, 0.22));
}

.endgame-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border: 1px solid rgba(255, 241, 212, 0.16);
  background: linear-gradient(180deg, rgba(24, 46, 37, 0.86), rgba(14, 22, 19, 0.82));
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.16);
}

.endgame-score {
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff6e5;
}

.endgame-score-penalty {
  min-width: 66px;
  text-align: right;
}

.endgame-collector {
  margin-top: 2px;
  color: rgba(255, 235, 196, 0.94);
}

.endgame-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 12px;
}

.endgame-stat {
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(212, 184, 141, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(11, 18, 16, 0.42);
  display: grid;
  gap: 4px;
}

.stat-label {
  color: rgba(243, 230, 205, 0.82);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stat-value {
  color: #fff2db;
  font-size: 1.3rem;
  line-height: 1.1;
}

.endgame-stat .subtle {
  color: rgba(245, 233, 211, 0.86);
}

.endgame-xp-card {
  grid-column: span 2;
  min-height: 150px;
  align-content: center;
  position: relative;
  overflow: hidden;
  border-color: rgba(215, 168, 96, 0.24);
  background:
    linear-gradient(180deg, rgba(215, 168, 96, 0.12), rgba(255, 255, 255, 0.018)),
    rgba(13, 36, 29, 0.58);
}

.endgame-xp-card .stat-value {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
}

.endgame-xp-card .subtle {
  max-width: 42ch;
}

.endgame-xp-card .endgame-xp-progress {
  width: min(100%, 360px);
  height: 11px;
}

.endgame-xp-card.is-level-up {
  border-color: rgba(255, 220, 137, 0.48);
  box-shadow:
    0 0 0 1px rgba(215, 168, 96, 0.08),
    0 0 22px rgba(215, 168, 96, 0.16),
    inset 0 1px 0 rgba(247, 241, 227, 0.11);
}

.endgame-xp-card.is-level-up .stat-value {
  color: #ffe0a0;
}

.endgame-xp-card.is-xp-animating .endgame-xp-progress span {
  box-shadow:
    0 0 16px rgba(255, 220, 140, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.endgame-xp-card.is-xp-celebrating {
  animation: endgame-xp-card-glow 1.45s ease-out;
}

.endgame-xp-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.endgame-xp-particles span {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff4c9 0 18%, #e1ad54 42%, rgba(225, 173, 84, 0) 76%);
  filter: drop-shadow(0 0 8px rgba(255, 218, 135, 0.5));
  animation: endgame-xp-particle 1.15s ease-out var(--xp-particle-delay, 0ms) both;
}

@keyframes endgame-xp-card-glow {
  0% {
    box-shadow:
      0 0 0 1px rgba(215, 168, 96, 0.08),
      0 0 10px rgba(215, 168, 96, 0.1),
      inset 0 1px 0 rgba(247, 241, 227, 0.11);
  }
  45% {
    box-shadow:
      0 0 0 1px rgba(255, 222, 149, 0.22),
      0 0 32px rgba(215, 168, 96, 0.3),
      inset 0 1px 0 rgba(247, 241, 227, 0.18);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(215, 168, 96, 0.08),
      0 0 22px rgba(215, 168, 96, 0.16),
      inset 0 1px 0 rgba(247, 241, 227, 0.11);
  }
}

@keyframes endgame-xp-particle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--xp-particle-x, 0px)),
      calc(-50% + var(--xp-particle-y, -28px))
    ) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .endgame-xp-card,
  .endgame-xp-card.is-xp-celebrating,
  .endgame-xp-particles span {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .endgame-xp-card {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .endgame-xp-card .endgame-xp-progress {
    width: 100%;
  }
}

.endgame-actions {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.endgame-actions button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(201, 171, 124, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.96), rgba(238, 224, 197, 0.94)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
  color: #2e2217;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 6px 12px rgba(0, 0, 0, 0.16);
}

.endgame-actions .primary {
  background:
    linear-gradient(180deg, rgba(121, 213, 139, 0.9), rgba(48, 94, 58, 0.98)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent);
  color: #f4fff4;
  border-color: rgba(117, 214, 138, 0.3);
}

@keyframes endgamePraiseSwap {
  0% {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(5px);
  }
  55% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes endgameCrownFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    filter:
      drop-shadow(0 7px 11px rgba(0, 0, 0, 0.32))
      drop-shadow(0 0 10px rgba(238, 200, 115, 0.34))
      drop-shadow(0 0 18px rgba(255, 222, 145, 0.14));
  }

  50% {
    transform: translate3d(2px, -6px, 0) rotate(-1.5deg);
    filter:
      drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3))
      drop-shadow(0 0 15px rgba(244, 207, 128, 0.46))
      drop-shadow(0 0 26px rgba(255, 228, 161, 0.22));
  }
}

@media (prefers-reduced-motion: reduce) {
  .endgame-premium-canvas {
    display: none;
  }

  .endgame-winner-crown {
    animation: none;
    filter:
      drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28))
      drop-shadow(0 0 8px rgba(238, 200, 115, 0.24));
  }
}

/* Démonstration chevalet du guide interactif */

.interactive-guide-rack-demo {
  position: absolute;
  inset: 3px 6px 7px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 42px));
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(229, 196, 132, 0.34);
  background:
    linear-gradient(180deg, rgba(33, 55, 46, 0.92), rgba(9, 18, 15, 0.92));
  box-shadow:
    0 14px 22px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 220, 0.08);
  overflow: visible;
  pointer-events: none;
}

.interactive-guide-rack-demo__badge {
  position: absolute;
  left: 10px;
  top: -10px;
  align-self: auto;
  justify-self: auto;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(229, 196, 132, 0.32);
  background: rgba(11, 24, 19, 0.78);
  color: #f7dfaa;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.interactive-guide-rack-demo__slot {
  min-width: 0;
  display: grid;
  place-items: center;
}

.interactive-guide-rack-demo__tile {
  width: min(96%, 42px);
  cursor: default;
}

.interactive-guide-rack-demo__tile .tile {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 5px 7px rgba(45, 27, 10, 0.32));
}

.interactive-guide-rack-demo__tile .tour-demo-tile-face {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 5px 7px rgba(45, 27, 10, 0.32));
}

/* ============================================================
   ACCOUNT-PROFILE-B7.2 — modale « Mon compte Agora »
   Le gabarit (.online-mode-modal / .online-mode-modal__card /
   .player-account-field / .online-mode-modal__actions) vient de app.css.
   Ici : uniquement les zones propres a cette modale (sections, avatar,
   grille d'avatars compacte, bloc email). Aucune duplication d'assets :
   les <img> pointent vers assets/avatars/*.webp via AVATAR_CATALOG.
   ============================================================ */
.account-settings-form {
  display: grid;
  gap: 18px;
  margin-top: 6px;
}

.account-settings-section {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(215, 168, 96, 0.16);
}

.account-settings-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

/* ACCOUNT-PROFILE-B7.2.5 — zone du picker avatar (message + filtres + grille),
   sortie APRÈS « Accès au compte » : l'email reste visible sans scroll quand le
   picker est ouvert. Picker fermé : la zone est vide (enfants [hidden]) et
   n'ajoute aucun espace (pas de bordure/padding). */
.account-settings-avatar-picker-region {
  display: grid;
  gap: 12px;
}

.account-settings-card.is-avatar-picker-open .account-settings-avatar-picker-region {
  padding-top: 14px;
  border-top: 1px solid rgba(215, 168, 96, 0.16);
}

.account-settings-section__heading {
  margin: 0;
  color: #d7a860;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ============================================================
   ACCOUNT-PROFILE-B7.2.3 — structure alignée sur « Modifier mon profil »
   La ligne Nom / Avatar / Pays réutilise .local-profile-editor__grid
   (défini plus haut). Ici : uniquement le gabarit de la modale (largeur/
   hauteur), la densité de la grille d'avatars SCOPÉE à cette modale
   (#playerAccountSettingsModal, ne touche NI le picker local NI le setup),
   la phrase explicative et le bloc email.
   ============================================================ */

/* Carte : compacte picker FERMÉ, généreuse picker OUVERT sur desktop pour
   recevoir le même éditeur 3 colonnes + grille ~5 colonnes que le profil
   local. Transition width héritée de .online-mode-modal__card. */
.account-settings-card {
  /* B7.3.3 — un peu plus large : les 3 champs profil + la section email
     (une ligne + actions) respirent mieux. */
  width: min(94vw, 680px);
}

/* ACCOUNT-PROFILE-B7.2.4 — picker OUVERT sur desktop : la carte utilise plus de
   hauteur (2 rangées de 5 avatars entièrement visibles d'emblée) tout en gardant
   une marge autour ; on récupère de la hauteur au-dessus de la grille en masquant
   l'intro et le rappel de nom et en resserrant les espacements + la section
   « Accès au compte ». B7.2.5 : cette section est REMONTÉE au-dessus de la grille,
   donc l'email et « Modifier l'adresse email » sont visibles SANS scroll dès
   l'ouverture du picker, tout en gardant 2 rangées de 5 avatars visibles. */
@media (min-width: 760px) {
  .account-settings-card.is-avatar-picker-open {
    width: min(95vw, 980px);
    max-height: min(97vh, 990px);
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open #playerAccountSettingsText,
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-name-hint {
    display: none;
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-form {
    gap: 11px;
    margin-top: 2px;
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-section {
    gap: 7px;
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-section,
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-avatar-picker-region {
    padding-top: 9px;
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open h3 {
    margin: 0 0 1px;
    line-height: 1.15;
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .online-mode-modal__eyebrow {
    margin-bottom: 0;
  }
  /* le titre de section « Profil du compte » est redondant avec les libellés de
     champ quand la place est comptée : masqué (« Accès au compte » reste). */
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open #accountSettingsProfileHeading {
    display: none;
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-avatar-hint {
    font-size: 0.82rem;
    line-height: 1.3;
  }
  /* « Accès au compte » sur UNE ligne quand le picker est ouvert :
       Adresse email   auth-test@agoradesmots.com   Modifier l'adresse email  */
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-email {
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 0;
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-email__label {
    white-space: nowrap;
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-email__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-email__action {
    margin-top: 0;
    white-space: nowrap;
  }
}

/* ACCOUNT-PROFILE-B7.2.5 — ordre visuel :
   DESKTOP : Nom/Avatar/Pays → « Accès au compte » (email visible sans scroll) → picker.
   MOBILE (≤ 600px, comportement B7.2.4 conservé) : Nom/Avatar/Pays → picker → « Accès au
   compte ». On remonte donc le picker AVANT la section email via `order` (les 3 blocs
   sont des grid items de .account-settings-form). Le picker LOCAL et le setup ne sont
   pas concernés (sélecteurs scopés #playerAccountSettingsModal). */
@media (max-width: 600px) {
  #playerAccountSettingsModal .account-settings-avatar-picker-region {
    order: 2;
  }
  #playerAccountSettingsModal .account-settings-access-section {
    order: 3;
    /* pas de bordure haute juste sous la grille (déjà séparée visuellement) */
    padding-top: 12px;
  }
}

/* Ligne d'édition Nom | Avatar | Pays : 3 colonnes desktop (héritées de
   .local-profile-editor__grid), EMPILÉE en mobile portrait — scopé à cette
   modale (l'override mobile générique de .local-profile-editor__grid ne
   s'applique pas ici de façon fiable). */
@media (max-width: 600px) {
  #playerAccountSettingsModal .account-settings-editor-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (min-width: 601px) {
  #playerAccountSettingsModal .account-settings-editor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Le libellé « Avatar » du picker est stylé par .local-profile-editor__grid span
   (le picker est maintenant dans .local-profile-editor__grid).
   Petit rappel de validation du nom, sous la ligne d'édition. */
.account-settings-name-hint {
  margin: -4px 0 0;
  color: rgba(232, 216, 193, 0.6);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Phrase explicative du picker COMPTE — entre la ligne Nom/Avatar/Pays et les
   filtres, discrète, peu haute. Jamais dans le picker du PROFIL LOCAL. */
.account-settings-avatar-hint {
  margin: 0;
  color: rgba(232, 216, 193, 0.7);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
}

.account-settings-avatar-hint[hidden] {
  display: none;
}

/* ---- Grille d'avatars du COMPTE — densité SCOPÉE (#playerAccountSettingsModal) ----
   Mobile portrait : ~3 colonnes, petites cartes carrées, comme
   « Configurer la prochaine manche » (.setup-avatar-*). Le composant reste
   .local-profile-avatar-grid / .local-profile-avatar-choice ; seuls le nombre
   de colonnes et la taille des cartes sont resserrés ici. */
#playerAccountSettingsModal .account-settings-avatar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: min(52dvh, 360px);
  margin-top: 10px;
  /* la dernière rangée d'avatars ne doit jamais rester collée sous le footer */
  padding-bottom: 6px;
}

/* Mobile portrait, picker OUVERT : on récupère de la hauteur pour la grille
   (elle doit dominer, comme « Configurer la prochaine manche ») en masquant
   l'intro et le rappel de nom, et en resserrant les espacements. Le footer
   Enregistrer / Fermer reste après la grille dans le flux (jamais par-dessus). */
@media (max-width: 600px) {
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open #playerAccountSettingsText,
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-name-hint {
    display: none;
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-section {
    gap: 8px;
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-avatar-hint {
    font-size: 0.8rem;
    line-height: 1.3;
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-avatar-grid {
    max-height: min(56dvh, 420px);
  }
}

#playerAccountSettingsModal .account-settings-avatar-grid .local-profile-avatar-choice {
  padding: 7px;
  border-radius: 12px;
  gap: 6px;
}

#playerAccountSettingsModal .account-settings-avatar-grid .local-profile-avatar-choice img {
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
}

#playerAccountSettingsModal .account-settings-avatar-grid .local-profile-avatar-choice span {
  font-size: 0.74rem;
  line-height: 1.1;
}

/* Mobile paysage : ~4 colonnes, utilise la largeur disponible ; on récupère
   de la hauteur (intro + rappel masqués) car le viewport est très court. */
@media (orientation: landscape) and (max-height: 560px) {
  #playerAccountSettingsModal .account-settings-avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: min(58dvh, 240px);
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open #playerAccountSettingsText,
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-name-hint {
    display: none;
  }
  #playerAccountSettingsModal .account-settings-card.is-avatar-picker-open .account-settings-section {
    gap: 7px;
  }
}

/* Tablette / desktop : ~4 puis ~5 colonnes, cartes plus généreuses (proches du
   profil local). */
@media (min-width: 620px) {
  #playerAccountSettingsModal .account-settings-avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (min-width: 760px) {
  #playerAccountSettingsModal .account-settings-avatar-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    /* B7.2.4 — au moins 2 rangées de 5 avatars (images + noms) entièrement
       visibles d'emblée ; le reste des ~56 avatars se parcourt par scroll
       interne de la grille. min(...) borne la boîte à ce qui tient au-dessus
       du footer sur un viewport desktop courant. */
    max-height: min(64vh, 520px);
  }
  #playerAccountSettingsModal .account-settings-avatar-grid .local-profile-avatar-choice {
    padding: 12px;
    border-radius: 18px;
    gap: 10px;
  }
  /* desktop : mêmes cartes que « Modifier mon profil » (image généreuse,
     pas la vignette carrée mobile). */
  #playerAccountSettingsModal .account-settings-avatar-grid .local-profile-avatar-choice img {
    height: clamp(104px, 9vw, 150px);
    aspect-ratio: auto;
  }
  #playerAccountSettingsModal .account-settings-avatar-grid .local-profile-avatar-choice span {
    font-size: 0.9rem;
  }
  /* le scroll interne de la grille ne piège pas le geste : une fois la grille
     en butée, la molette continue naturellement vers la section « Accès au
     compte » (comportement navigateur par défaut, on ne met PAS overscroll-behavior: contain). */
  #playerAccountSettingsModal .account-settings-avatar-grid {
    overscroll-behavior: auto;
  }
}

/* Footer : ne jamais recouvrir la dernière rangée d'avatars. */
#playerAccountSettingsModal .online-mode-modal__actions {
  margin-top: 6px;
}

.account-settings-email {
  display: grid;
  gap: 4px;
}

.account-settings-email__label {
  color: rgba(232, 216, 193, 0.7);
  font-size: 0.78rem;
  font-weight: 700;
}

.account-settings-email__value {
  color: #f7ead0;
  font-size: 0.98rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* B7.3.3 — groupe d'actions email (dans la zone haute « Accès au compte »). */
.account-settings-email__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.account-settings-email__controls button[hidden] {
  display: none;
}

.account-settings-email__action {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: rgba(232, 216, 193, 0.82);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.account-settings-email__action:hover,
.account-settings-email__action:focus-visible {
  color: #f7ead0;
}

.account-settings-email__cancel {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 10px;
  background: rgba(13, 34, 27, 0.7);
  color: rgba(247, 241, 227, 0.9);
  font-weight: 800;
  cursor: pointer;
}

.account-settings-email__submit {
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(255, 230, 167, 0.7);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.96), rgba(215, 168, 96, 0.92)),
    #d7a860;
  color: #2e2217;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.account-settings-email__cancel:hover,
.account-settings-email__cancel:focus-visible,
.account-settings-email__submit:hover,
.account-settings-email__submit:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

/* B7.3.3.2 — état désactivé (email vide / invalide / identique, ou « Envoi… ») :
   même langage visuel que le bouton principal désactivé du footer
   (.online-mode-modal__actions .online-mode-modal__primary:disabled, app.css) —
   fond vert très sombre, texte atténué mais lisible, bordure discrète, aucune
   trace de doré. opacity n'est PLUS le seul signal. Placée après :hover (même
   spécificité) pour neutraliser aussi le survol ; cursor:not-allowed hérité de
   la règle globale button:disabled. */
.account-settings-email__submit:disabled,
.account-settings-email__submit:disabled:hover,
.account-settings-email__submit:disabled:focus-visible {
  border-color: rgba(215, 168, 96, 0.24);
  background:
    linear-gradient(180deg, rgba(247, 241, 227, 0.05), rgba(247, 241, 227, 0.02)),
    rgba(13, 34, 27, 0.9);
  color: rgba(247, 241, 227, 0.5);
  box-shadow: none;
  opacity: 1;
  transform: none;
  cursor: not-allowed;
}

/* Desktop / tablette : la zone email sur UNE ligne (libellé · adresse · actions
   à droite), les actions immédiatement visibles sans scroll. */
@media (min-width: 601px) {
  #playerAccountSettingsModal .account-settings-email {
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 0;
  }
  #playerAccountSettingsModal .account-settings-email__label {
    white-space: nowrap;
  }
  #playerAccountSettingsModal .account-settings-email__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #playerAccountSettingsModal .account-settings-email__controls {
    margin-top: 0;
    align-self: center;
    justify-content: flex-end;
    white-space: nowrap;
  }
}

/* ---- ACCOUNT-EMAIL-B7.3.2/B7.3.3 — sous-formulaire « Modifier l'adresse email » ----
   Bloc discret dans la section « Accès au compte » de #playerAccountSettingsModal.
   Aucune nouvelle carte/modale : champs repliés par défaut, dévoilés au clic ;
   les actions vivent au-dessus (voir .account-settings-email__controls). */
.account-settings-email-pending {
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(215, 168, 96, 0.22);
  border-radius: 10px;
  background: rgba(215, 168, 96, 0.08);
  color: rgba(255, 232, 178, 0.9);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
}

.account-settings-email-pending[hidden] {
  display: none;
}

.account-settings-email-form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(215, 168, 96, 0.18);
  border-radius: 12px;
  background: rgba(7, 22, 17, 0.4);
}

.account-settings-email-form[hidden] {
  display: none;
}

.account-settings-email-form__fields {
  display: grid;
  gap: 10px;
}

/* Desktop : « Adresse actuelle » et « Nouvelle adresse email » côte à côte
   -> le sous-formulaire reste bas, les champs immédiatement visibles. */
@media (min-width: 601px) {
  #playerAccountSettingsModal .account-settings-email-form__fields {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

.account-settings-email-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.account-settings-email-form label span {
  color: #d7a860;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.account-settings-email-form input {
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(215, 168, 96, 0.32);
  border-radius: 12px;
  background: rgba(7, 22, 17, 0.72);
  color: #fff7e8;
  font: inherit;
  font-weight: 700;
}

.account-settings-email-form input:focus {
  border-color: rgba(255, 230, 167, 0.72);
  outline: none;
  box-shadow: 0 0 0 3px rgba(215, 168, 96, 0.16);
}

.account-settings-email-form input[readonly] {
  color: rgba(232, 216, 193, 0.7);
  background: rgba(7, 22, 17, 0.45);
  cursor: default;
}

.account-settings-email-form__hint {
  margin: 0;
  color: rgba(232, 216, 193, 0.66);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
}

.account-settings-email-form__notice {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
}

.account-settings-email-form__notice[hidden] {
  display: none;
}

.account-settings-email-form__notice[data-state="error"] {
  border: 1px solid rgba(214, 92, 92, 0.4);
  background: rgba(214, 92, 92, 0.1);
  color: #f3b8b8;
}

.account-settings-email-form__notice[data-state="success"] {
  border: 1px solid rgba(120, 190, 130, 0.4);
  background: rgba(120, 190, 130, 0.1);
  color: #bfe6c4;
}

/* Mobile portrait : la zone email s'empile ; les actions (Annuler / Envoyer)
   passent pleine largeur, juste sous le libellé/adresse -> visibles sans scroll.
   Le sous-formulaire n'a plus d'actions en bas (B7.3.3) : un petit padding-bas
   suffit pour que le texte de confirmation ne colle pas au footer sticky. */
@media (max-width: 600px) {
  #playerAccountSettingsModal .account-settings-email__controls {
    width: 100%;
  }
  #playerAccountSettingsModal .account-settings-email__controls .account-settings-email__cancel,
  #playerAccountSettingsModal .account-settings-email__controls .account-settings-email__submit {
    flex: 1 1 auto;
    min-height: 42px;
  }
  #playerAccountSettingsModal .account-settings-card.is-email-form-open .account-settings-form {
    padding-bottom: 24px;
  }
}

/* ---- ACCOUNT-EMAIL-B7.3.3 — lisibilité des textes secondaires sur desktop ----
   Interface premium : on remonte légèrement les tailles des aides / petits
   libellés SANS toucher la hiérarchie (titres > libellés > valeurs > aides) ni
   grossir uniformément. Scopé #playerAccountSettingsModal + desktop uniquement :
   le mobile garde ses tailles compactes (pas de lignes en trop, pas de
   débordement, modale non rallongée). */
@media (min-width: 601px) {
  #playerAccountSettingsModal .account-settings-section__heading {
    font-size: 0.76rem;
  }
  #playerAccountSettingsModal .account-settings-email__label {
    font-size: 0.86rem;
  }
  #playerAccountSettingsModal .account-settings-editor-grid span {
    font-size: 0.82rem;
  }
  #playerAccountSettingsModal .account-settings-name-hint {
    font-size: 0.88rem;
    color: rgba(232, 216, 193, 0.72);
  }
  #playerAccountSettingsModal .account-settings-avatar-hint {
    font-size: 0.9rem;
  }
  #playerAccountSettingsModal .account-settings-email-form label span {
    font-size: 0.82rem;
  }
  #playerAccountSettingsModal .account-settings-email-form__hint {
    font-size: 0.88rem;
    color: rgba(232, 216, 193, 0.74);
  }
  #playerAccountSettingsModal .account-settings-email-form__notice {
    font-size: 0.9rem;
  }
  #playerAccountSettingsModal .account-settings-email-pending {
    font-size: 0.86rem;
  }
}

/* ---- ACCOUNT-EMAIL-B7.3.3 — modale « Mon compte Agora » : un peu plus de
   hauteur utile -> plus de contenu visible avant scroll (largeur : voir
   .account-settings-card plus haut). Jamais plein écran, marges conservées.
   Exclut explicitement le picker OUVERT, qui garde son propre gabarit B7.2.4
   (2 rangées d'avatars visibles). */
#playerAccountSettingsModal .online-mode-modal__card.account-settings-card:not(.is-avatar-picker-open) {
  max-height: min(92vh, 880px);
}

/* ---- ACCOUNT-EMAIL-B7.3.3 — viewports COURTS (paysage mobile, petit portrait) :
   quand le sous-formulaire email est ouvert, on masque le préambule descriptif
   (« Personnalisez… », rappel du nom, eyebrow « Profil du compte ») et on
   resserre les espacements, afin que « Accès au compte » + les actions email +
   « Nouvelle adresse » soient visibles d'emblée après l'auto-scroll d'ouverture.
   Miroir du comportement .is-avatar-picker-open (B7.2.4). */
@media (orientation: landscape) and (max-height: 560px) {
  #playerAccountSettingsModal .account-settings-card.is-email-form-open #playerAccountSettingsText,
  #playerAccountSettingsModal .account-settings-card.is-email-form-open .account-settings-name-hint,
  #playerAccountSettingsModal .account-settings-card.is-email-form-open #accountSettingsProfileHeading {
    display: none;
  }
  #playerAccountSettingsModal .account-settings-card.is-email-form-open .account-settings-form {
    gap: 10px;
  }
  #playerAccountSettingsModal .account-settings-card.is-email-form-open .account-settings-section {
    gap: 8px;
    padding-top: 9px;
  }
  #playerAccountSettingsModal .account-settings-card.is-email-form-open h3 {
    margin: 0 0 2px;
    line-height: 1.15;
  }
  #playerAccountSettingsModal .account-settings-card.is-email-form-open .online-mode-modal__eyebrow {
    margin-bottom: 0;
  }
}

@media (max-width: 600px) and (max-height: 720px) {
  #playerAccountSettingsModal .account-settings-card.is-email-form-open #playerAccountSettingsText,
  #playerAccountSettingsModal .account-settings-card.is-email-form-open .account-settings-name-hint,
  #playerAccountSettingsModal .account-settings-card.is-email-form-open #accountSettingsProfileHeading {
    display: none;
  }
  #playerAccountSettingsModal .account-settings-card.is-email-form-open .account-settings-form {
    gap: 12px;
  }
  #playerAccountSettingsModal .account-settings-card.is-email-form-open .account-settings-section {
    gap: 10px;
    padding-top: 10px;
  }
}

/* B7.3.3 — paysage mobile LARGE (≈ 896px) : le picker retombe à ~4 colonnes
   (l'ancienne règle min-width:760 -> 5 col gagnait par ordre pour ce cas non
   testé en B7.2 ; on la remet à ~4, cohérent avec « Paysage : 4 colonnes »). */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 760px) {
  #playerAccountSettingsModal .account-settings-avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ============================================================
   ONLINE-IDENTITY-PREFLIGHT-B8.2 — écran « Préparez votre profil »
   Affiché dans #onlineSearchModal (état 'identity', même mécanisme que les
   autres écrans du lobby). Réutilise .local-profile-editor__grid (ligne
   Pseudo / Avatar / Pays) et le composant .local-profile-avatar-* pour le
   picker. Ici : uniquement le gabarit propre à cet écran + la densité de la
   grille d'avatars SCOPÉE à #onlineLobbyIdentity (ne touche NI le picker
   local, NI « Mon compte Agora », NI le setup de partie).
   ============================================================ */
.online-lobby-identity {
  display: block;
}

.online-lobby-identity[hidden] {
  display: none;
}

.online-lobby-identity h3 {
  margin: 0 0 6px;
  font-family: var(--font-online-heading, inherit);
  color: #fff2dc;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.online-lobby-identity > .subtle {
  margin: 0 0 16px;
  font-family: var(--font-online-body, inherit);
  font-size: 0.9rem;
}

.online-lobby-identity__grid {
  margin-top: 4px;
  align-items: start;
}

/* La ligne Pseudo / Avatar / Pays : 3 colonnes ≥ 601px, empilée en dessous.
   L'override générique de .local-profile-editor__grid (max-width: 720px) est
   masqué par une règle non conditionnelle plus bas dans ce fichier, d'où ce
   scope dédié — même approche que « Mon compte Agora » (B7.2.3). */
@media (max-width: 600px) {
  #onlineLobbyIdentity .online-lobby-identity__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (min-width: 601px) {
  #onlineLobbyIdentity .online-lobby-identity__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.online-lobby-identity__hint {
  margin: 10px 0 0;
  color: rgba(232, 216, 193, 0.62);
  font-size: 0.82rem;
  font-weight: 600;
}

/* ---- Grille d'avatars du pré-vol — densité SCOPÉE (#onlineLobbyIdentity) ----
   Mobile portrait : ~3 colonnes, petites cartes carrées (comme « Configurer
   la prochaine manche »). Le composant reste .local-profile-avatar-grid /
   .local-profile-avatar-choice ; seuls le nombre de colonnes et la taille des
   cartes changent ici. */
#onlineLobbyIdentity .online-lobby-identity__avatar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: min(48dvh, 320px);
  margin-top: 12px;
  padding-bottom: 6px;
}

#onlineLobbyIdentity .online-lobby-identity__avatar-grid .local-profile-avatar-choice {
  padding: 7px;
  border-radius: 12px;
  gap: 6px;
}

#onlineLobbyIdentity .online-lobby-identity__avatar-grid .local-profile-avatar-choice img {
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
}

#onlineLobbyIdentity .online-lobby-identity__avatar-grid .local-profile-avatar-choice span {
  font-size: 0.74rem;
  line-height: 1.1;
}

/* Mobile paysage : ~4 colonnes, viewport très court -> grille plus plate. */
@media (orientation: landscape) and (max-height: 560px) {
  #onlineLobbyIdentity .online-lobby-identity__avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: min(56dvh, 220px);
  }
  #onlineLobbyIdentity .online-lobby-identity > .subtle,
  #onlineLobbyIdentity .online-lobby-identity__hint {
    display: none;
  }
}

/* Tablette : ~4 colonnes. */
@media (min-width: 620px) {
  #onlineLobbyIdentity .online-lobby-identity__avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Desktop : ~5 colonnes, cartes généreuses (proches de « Modifier mon
   profil »), 2 rangées entièrement visibles d'emblée ; le reste se parcourt
   par scroll interne de la grille. La carte du modal s'élargit temporairement
   quand le picker est ouvert (classe posée en JS). */
@media (min-width: 760px) {
  #onlineLobbyIdentity .online-lobby-identity__avatar-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    max-height: min(58vh, 460px);
  }
  #onlineLobbyIdentity .online-lobby-identity__avatar-grid .local-profile-avatar-choice {
    padding: 12px;
    border-radius: 18px;
    gap: 10px;
  }
  #onlineLobbyIdentity .online-lobby-identity__avatar-grid .local-profile-avatar-choice img {
    height: clamp(104px, 9vw, 148px);
    aspect-ratio: auto;
  }
  #onlineLobbyIdentity .online-lobby-identity__avatar-grid .local-profile-avatar-choice span {
    font-size: 0.9rem;
  }
  .online-mode-modal__card.is-identity-picker-open {
    width: min(95vw, 940px);
  }
}