/* /var/www/alessio-site/public/assets/css/discovery.css */

#map {
  height: 60vh;
  min-height: 420px;
  border-radius: 12px;
  border: 1px solid var(--gt-border);
  background: var(--gt-card);
}
    :root{
  --gt-brand: #0C7489;
  --gt-brand-contrast: #ffffff;

  --gt-btn: #A4193D;
  --gt-btn-contrast: #ffffff;

  --gt-bg: #D7D9CE;
  --gt-card: #ffffff;
  --gt-text: #040404;
  --gt-border: rgba(19,80,91,.22);
  --gt-fs-bg: #D7D9CE;
  --gt-sidebar-bg: rgba(255,255,255,.92);
  --gt-sidebar-text: #040404;

  /* Markers (Découverte) */
  --gt-marker-fill: rgba(12,116,137,.55);
  --gt-marker-stroke: rgba(255,255,255,.90);
  --gt-marker-capital-fill: rgba(17,157,164,.75);

  --bs-body-bg: var(--gt-bg);
  --bs-body-color: var(--gt-text);
  --bs-secondary-color: rgba(4,4,4,.65);
  --bs-border-color: var(--gt-border);
}

[data-bs-theme="dark"]{
  --gt-brand: #FEE715;
  --gt-brand-contrast: #101820;
  --gt-btn: var(--gt-brand);
  --gt-btn-contrast: var(--gt-brand-contrast);

  --gt-bg: #101820;
  --gt-card: color-mix(in srgb, #121C26 92%, var(--gt-brand));
  --gt-text: #e9eef5;
  --gt-border: rgba(255,255,255,.12);
  --gt-fs-bg: #101820;
  --gt-sidebar-bg: rgba(16,24,32,.84);
  --gt-sidebar-text: #e9eef5;

  /* Markers (Découverte) */
  --gt-marker-fill: rgba(254,231,21,.50);       /* brand (dark) */
  --gt-marker-stroke: rgba(0,0,0,.70);
  --gt-marker-capital-fill: rgba(109,179,255,.72); /* capitale (contraste) */

  --bs-body-bg: var(--gt-bg);
  --bs-body-color: var(--gt-text);
  --bs-secondary-color: rgba(233,238,245,.70);
  --bs-border-color: var(--gt-border);
}


body{
  background: var(--gt-bg);
  color: var(--gt-text);
}

#gt-navbar-logo{
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35)) drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* ===== Cards Bootstrap (Discovery) — align DA (sinon Bootstrap reste blanc) ===== */
.card{
  background: var(--gt-card) !important;
  color: var(--gt-text) !important;
  border-color: var(--gt-border) !important;
}

.card-header,
.card-footer{
  background: color-mix(in srgb, var(--gt-card) 88%, transparent) !important;
  color: var(--gt-text) !important;
  border-color: var(--gt-border) !important;
}

/* Modals (Bootstrap default blanc) */
.modal-content{
  background: var(--gt-card) !important;
  color: var(--gt-text) !important;
  border-color: var(--gt-border) !important;
}

.shiny-text{
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--gt-text) 0%,
    color-mix(in srgb, var(--gt-text) 45%, var(--gt-brand)) 35%,
    var(--gt-text) 70%
  );
  background-size: 200% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gtShine 8s linear infinite;
}

@keyframes gtShine{
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce){
  .shiny-text{ animation: none; }
}

@media (max-width: 768px){
  .shiny-text{ animation: none; }
}


    /* ===== Fullscreen ===== */
    .geotrainer-no-scroll { overflow: hidden; }

    .geotrainer-fullscreen {
      position: fixed;
      inset: 0;
      z-index: 1050;
      background: var(--gt-fs-bg);
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 00px;
      max-width: none !important;
      border-radius: 0;
      border: 0;
      box-shadow: none;
    }

    .geotrainer-fullscreen #map {
      height: 100%;
      width: 100%;
      min-height: 0;
      border-radius: 0;
      border: 0;
    }

    #discover-container.geotrainer-fullscreen .card-body {
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }

    #discover-container.geotrainer-fullscreen .my-3 {
      flex: 1 1 auto;
      margin: 0 !important;
    }

/* Texte lisible en fullscreen */
#discover-container.geotrainer-fullscreen h1:not(.shiny-text),
#discover-container.geotrainer-fullscreen .text-muted,
#discover-container.geotrainer-fullscreen .h4:not(.shiny-text),
#discover-container.geotrainer-fullscreen .h6,
#discover-container.geotrainer-fullscreen label {
  color: var(--gt-text) !important;
}

#discover-container.geotrainer-fullscreen .text-muted {
  color: var(--gt-text) !important;
  opacity: .75;
}

/* Cache la card "villes trouvées" (si tu l'as en normal) */
#discover-container.geotrainer-fullscreen .card-found-normal {
  display: none !important;
}

/* Cache tout ce qui est "normal only" en fullscreen */
#discover-container.geotrainer-fullscreen .gt-normal-only {
  display: none !important;
}

/* ===== Discovery "How to play" wizard ===== */
.gt-wizard {
  position: relative;
  z-index: 20010;
  margin: 1rem 0 1.5rem;
}

.gt-wizard-card {
  position: relative;
  z-index: 20020;
  border-radius: 1rem;
  border: 1px solid var(--gt-border);
  background: var(--gt-card);
  padding: 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
  width: min(360px, calc(100vw - 32px));
}

.gt-wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.gt-wizard-indicators {
  display: flex;
  align-items: center;
  margin-top: 0.85rem;
}

.gt-wizard-indicator {
  position: relative;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}

.gt-wizard-indicator-inner {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  background: color-mix(in srgb, var(--gt-card) 75%, var(--gt-brand));
  color: var(--gt-text);
  border: 1px solid color-mix(in srgb, var(--gt-border) 60%, transparent);
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.gt-wizard-indicator.is-active .gt-wizard-indicator-inner {
  background: var(--gt-brand);
  color: var(--gt-brand-contrast);
  transform: scale(1.05);
}

.gt-wizard-indicator.is-complete .gt-wizard-indicator-inner {
  background: color-mix(in srgb, var(--gt-brand) 70%, transparent);
  color: var(--gt-brand-contrast);
}

.gt-wizard-connector {
  position: relative;
  margin: 0 0.5rem;
  height: 0.2rem;
  flex: 1;
  overflow: hidden;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--gt-border) 70%, transparent);
}

.gt-wizard-indicator:disabled {
  cursor: default;
}

.gt-wizard-connector-inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background-color: var(--gt-brand);
  transition: width 220ms ease;
}

.gt-wizard-connector.is-complete .gt-wizard-connector-inner {
  width: 100%;
}

.gt-wizard-steps {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
}

.gt-wizard-step {
  display: none;
}

.gt-wizard-step.is-active {
  display: block;
}

.gt-wizard-step-title {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.gt-wizard-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.gt-wizard-action-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gt-wizard.is-floating {
  position: fixed;
  z-index: 20020;
  margin: 0;
}

.gt-wizard.is-floating .gt-wizard-hint {
  display: none;
}

.gt-wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  pointer-events: none;
  display: none;
}

.gt-wizard-overlay.is-active {
  display: block;
}

.gt-wizard-focus {
  position: fixed;
  border: 2px solid var(--gt-brand);
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.45);
  transition: all 200ms ease;
}

.gt-wizard-overlay.is-light .gt-wizard-focus {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.25);
}

@media (prefers-reduced-motion: reduce) {
  .gt-wizard-focus {
    transition: none;
  }
}

    /* ================================
       GeoTrainer Sidebar Template
       ================================ */

    body.gt-fs-active .gt-sidebar,
    body.gt-fs-active .gt-sidebar-handle {
      display: block;
    }

    .gt-sidebar,
    .gt-sidebar-handle {
      display: none;
    }

    .gt-sidebar-handle {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1205;
      padding: 10px;
      border: 1px solid rgba(255,255,255,0.25);
      border-right: 0;
      border-radius: 10px 0 0 10px;
      background: var(--gt-sidebar-bg);
      color: var(--gt-sidebar-text);
      cursor: pointer;
    }

    .gt-sidebar {
      position: fixed;
      top: 0;
      right: 0;
      width: 360px;
      height: 100vh;
      z-index: 1200;
      background: var(--gt-sidebar-bg);
      transform: translateX(100%);
      transition: transform 0.2s ease;
      pointer-events: none;
    }

    .gt-sidebar.is-open { transform: translateX(0); }

    body.gt-sidebar-open .gt-sidebar-handle {
      right: 360px;
    }

    .gt-sidebar__inner {
      height: 100%;
      padding: 12px;
      display: flex;
      flex-direction: column;
      pointer-events: auto;
    }

    .gt-sidebar__header {
    color: var(--gt-sidebar-text);
    }

    .gt-sidebar__content {
      overflow: auto;
      flex: 1;
    }

    .gt-sidebar .list-group-item {
    color: var(--gt-sidebar-text);
    }

    /* ================================
   GeoTrainer - Map error animation
   ================================ */

#map.gt-map-error {
  animation: gtMapShake 0.35s ease, gtMapRedPulse 0.6s ease;
}

@keyframes gtMapShake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

@keyframes gtMapRedPulse {
  0%   { box-shadow: 0 0 0 rgba(220, 53, 69, 0); }
  30%  { box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.35); }
  100% { box-shadow: 0 0 0 rgba(220, 53, 69, 0); }
}

/* Petit badge centré sur la carte */
.gt-map-toast {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(220, 53, 69, 0.92);
  color: #fff;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
}

.gt-map-toast.is-show {
  animation: gtToastInOut 1.1s ease forwards;
}

@keyframes gtToastInOut {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

/* Variantes toast */
.gt-map-toast--success { background: rgba(25, 135, 84, 0.92); } /* Bootstrap success */
.gt-map-toast--info{
  background: color-mix(in srgb, var(--gt-brand) 92%, transparent);
  color: var(--gt-brand-contrast);
}

/* Petit “pop” sur le marqueur Leaflet */
.leaflet-marker-icon.gt-marker-pop {
  animation: gtMarkerPop 0.45s ease;
}

@keyframes gtMarkerPop {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-4px) scale(1.15); }
  100% { transform: translateY(0) scale(1); }
}

/* Pop sur circleMarker (canvas/svg path) */
.leaflet-interactive.gt-circle-pop {
  animation: gtCirclePop 0.45s ease;
}

@keyframes gtCirclePop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ================================
   Found card (dark)
   ================================ */

.gt-found-card {
  background: var(--gt-card);
  color: var(--gt-text);
  border: 1px solid var(--gt-border);
}

.gt-found-card__header {
  background: color-mix(in srgb, var(--gt-card) 85%, transparent);
  border-bottom: 1px solid var(--gt-border);
  color: var(--gt-text);
}

.gt-found-hint {
  color: rgba(255,255,255,0.65) !important;
}

.gt-badge-dark {
  background: color-mix(in srgb, var(--gt-text) 10%, transparent);
  color: var(--gt-text);
  border: 1px solid var(--gt-border);
}

/* Colonnes continents */
.gt-continent-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
}

/* ================================
   Continents dépliants (details/summary)
   ================================ */

.gt-continent-details {
  padding: 0;
}

.gt-continent-summary {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  cursor: pointer;
  list-style: none; /* important */
  user-select: none;

  transition: transform .12s ease, filter .12s ease;
}

.gt-continent-summary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.gt-continent-summary::-webkit-details-marker {
  display: none;
}

.gt-continent-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.gt-continent-countries {
  opacity: .8;
  font-size: 0.82rem;
  white-space: nowrap;
}

.gt-chevron {
  display: inline-block;
  font-weight: 900;
  opacity: .85;
  transform: rotate(0deg);
  transition: transform .16s ease, opacity .16s ease;
}

.gt-continent-details[open] .gt-chevron {
  transform: rotate(90deg);
  opacity: 1;
}

.gt-continent-body {
  padding: 8px;
}

.gt-continent-wrapper {
  padding: 0;
}

.gt-continent-card__header {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.gt-continent-title {
  font-weight: 700;
  color: #fff;
}

.gt-continent-sub {
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
}

/* Accordions */
.gt-acc .accordion-item {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.gt-acc .accordion-button {
  background: transparent;
  color: #fff;
  padding: 10px 12px;
}

.gt-acc .accordion-button:not(.collapsed) {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

.gt-acc .accordion-button::after {
  filter: invert(1);
}

.gt-acc .accordion-body {
  padding: 10px 12px;
}

/* List items */
.gt-list .list-group-item {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.10);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.gt-list .list-group-item small {
  color: rgba(255,255,255,0.75);
}

.gt-city-cap {
  font-weight: 700;
}

/* bouton suppression ville (croix rouge) */
.gt-del-city {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(220,53,69,0.5);
  background: rgba(220,53,69,0.15);
  color: #ff5c70;
  font-weight: 800;
  cursor: pointer;
  flex: 0 0 auto;
}

.gt-del-city:hover {
  background: rgba(220,53,69,0.25);
}

/* GeoTrainer theme glue */
#discover-container.card,
#discover-container details.card,
#discover-container details.card .card-header,
#discover-container details.card .card-body,
#gt-homonyms-stats-card.card {
  background: var(--gt-card) !important;
  color: var(--gt-text) !important;
  border-color: var(--gt-border) !important;
}

#discover-container details.card .card-header {
  border-bottom-color: var(--gt-border) !important;
}

/* Nav game modes container */
.gt-nav-modes {
  background: color-mix(in srgb, var(--gt-bg) 85%, #ffffff);
  border-color: color-mix(in srgb, var(--gt-border) 70%, transparent) !important;
}

/* Smooth reveal for details content */
#discover-container details.card > .card-body {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  overflow: hidden;
  transition: max-height 0.50s ease, opacity 0.50s ease, transform 0.35s ease;
}

#discover-container details.card[open] > .card-body {
  max-height: 2000px;
  opacity: 1;
  transform: translateY(0);
}

/* Chevron for expandable cards */
.gt-summary-chevron {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.50s ease;
  opacity: 0.8;
}

details[open] .gt-summary-chevron {
  transform: rotate(-135deg);
}

/* Titles / labels that were forced white */
.gt-continent-title,
.gt-acc .accordion-button,
.gt-acc .accordion-button:not(.collapsed),
.gt-list .list-group-item,
.gt-list .list-group-item small {
  color: var(--gt-text) !important;
}

/* ================================
   Input modernisé (light/dark)
   ================================ */
.gt-input-group {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--gt-border);
  background: var(--gt-card);
}

.gt-input-group .input-group-text {
  background: color-mix(in srgb, var(--gt-card) 92%, transparent);
  border: 0;
}

/* Fix: arrondis visibles sur le dernier bouton (Terminer la partie) */
.gt-input-group .gt-btn-end{
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

.gt-city-input {
  border: 0 !important;
  background: transparent !important;
  color: var(--gt-text) !important;
}

.gt-city-input:focus {
  box-shadow: none !important;
}

.gt-btn-validate,
.gt-btn-reset {
  font-weight: 700;
}

/* ================================
   Tiers pays (Bronze/Argent/Or/Diamant)
   - Badge réaliste + surbrillance
   - La "case pays" (summary) peut recevoir les mêmes classes
   ================================ */

/* Base badge (look premium, réaliste) */
.gt-tier-badge{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  font-weight: 900;
  letter-spacing: .25px;
  line-height: 1;

  padding: 6px 10px;
  border-radius: 999px;

  border: 1px solid color-mix(in srgb, var(--gt-border) 65%, transparent);
  color: var(--gt-text);

  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -10px 18px rgba(0,0,0,.18),
    0 6px 18px rgba(0,0,0,.18);

  overflow: hidden;
  transform: translateZ(0);
}

/* Surbrillance diagonale (effet métal) */
.gt-tier-badge::before{
  content:"";
  position:absolute;
  inset:-40% -35%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.00) 35%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.00) 65%
  );
  transform: rotate(12deg);
  opacity: .55;
  pointer-events:none;
}

/* Petit “glow” discret */
.gt-tier-badge::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.0);
  pointer-events:none;
}

/* ========= Case pays (summary) =========
   -> même rendu “métal”, mais format carte / ligne */
.gt-country-summary{
  position: relative;
  border-radius: 12px;
  padding: 9px 10px;

  border: 1px solid color-mix(in srgb, var(--gt-border) 70%, transparent);
  background: color-mix(in srgb, var(--gt-card) 92%, transparent);
  color: var(--gt-text);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -12px 20px rgba(0,0,0,.10),
    0 8px 22px rgba(0,0,0,.14);

  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  overflow: hidden;
  transform: translateZ(0);
}

/* Surbrillance sur la case pays (même style que badge) */
.gt-country-summary::before{
  content:"";
  position:absolute;
  inset:-45% -40%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.00) 35%,
    rgba(255,255,255,0.24) 50%,
    rgba(255,255,255,0.00) 65%
  );
  transform: rotate(12deg);
  opacity: .55;
  pointer-events:none;
}

.gt-country-summary:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -14px 24px rgba(0,0,0,.12),
    0 14px 30px rgba(0,0,0,.18);
}

/* Petites pastilles compteur (à droite) */
.gt-country-count{
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gt-border) 75%, transparent);
  background: color-mix(in srgb, var(--gt-text) 8%, transparent);
}

/* ========= Dégradés “métal” par tier ========= */
/* Bronze */
.gt-tier-bronze{
  background: linear-gradient(135deg,
    #a86022 0%,
    #cd7f32 35%,
    #7a3f18 70%,
    #d9a26c 100%);
  border-color: color-mix(in srgb, #cd7f32 55%, var(--gt-border));
}

/* Argent */
.gt-tier-silver{
  background: linear-gradient(135deg,
    #f3f3f3 0%,
    #cfcfcf 35%,
    #8f8f8f 70%,
    #ffffff 100%);
  border-color: color-mix(in srgb, #c0c0c0 55%, var(--gt-border));
}

/* Or */
.gt-tier-gold{
  background: linear-gradient(135deg,
    #fff0a8 0%,
    #ffd54a 30%,
    #b8860b 70%,
    #fff6cf 100%);
  border-color: color-mix(in srgb, #ffc400 55%, var(--gt-border));
}

/* Diamant (bleu glacé) */
.gt-tier-diamond{
  background: linear-gradient(135deg,
    #baf2ff 0%,
    #6dd5ff 35%,
    #2193b0 70%,
    #e9fbff 100%);
  border-color: color-mix(in srgb, #56ccf2 55%, var(--gt-border));
}

/* Ruby (rouge profond) */
.gt-tier-ruby{
  background: linear-gradient(135deg,
    #ffb3c1 0%,
    #ff4d6d 28%,
    #b00020 70%,
    #ffe3ea 100%);
  border-color: color-mix(in srgb, #ff4d6d 55%, var(--gt-border));
}

/* Émeraude (vert riche) */
.gt-tier-emerald{
  background: linear-gradient(135deg,
    #c7ffe6 0%,
    #34d399 32%,
    #047857 72%,
    #eafff5 100%);
  border-color: color-mix(in srgb, #34d399 55%, var(--gt-border));
}

/* Harmonisation case pays : mêmes règles que les autres tiers */
.gt-country-summary.gt-tier-ruby,
.gt-country-summary.gt-tier-emerald{
  color: #111;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -16px 26px rgba(0,0,0,.18),
    0 14px 30px rgba(0,0,0,.18);
}

/* ========= Harmonisation : appliquer un tier à la case pays =========
   Si un <summary class="gt-country-summary gt-tier-gold">... */
.gt-country-summary.gt-tier-bronze,
.gt-country-summary.gt-tier-silver,
.gt-country-summary.gt-tier-gold,
.gt-country-summary.gt-tier-diamond{
  /* on garde le look “carte” mais avec le dégradé tier */
  color: #111; /* lisible sur métal clair */
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -16px 26px rgba(0,0,0,.18),
    0 14px 30px rgba(0,0,0,.18);
}

/* Dark mode : éviter trop “blanc” sur silver */
[data-bs-theme="dark"] .gt-country-summary.gt-tier-silver{
  color: #0b0f14;
}

/* ================================
   Overlay fin de partie (centré sur la map)
   ================================ */
#map { position: relative; } /* important pour overlay */

.gt-end-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  background: color-mix(in srgb, #000 45%, transparent);
  backdrop-filter: blur(2px);
  padding: 16px;
}

.gt-end-overlay.is-open { display: flex; }

.gt-end-card {
  width: min(520px, 92vw);
  border-radius: 16px;
  border: 1px solid var(--gt-border);
  background: var(--gt-card);
  color: var(--gt-text);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}

.gt-end-card__top {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gt-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gt-end-card__body { padding: 14px 16px; }

.gt-end-badges { display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0 0; }

.gt-reward {
  font-weight: 800;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 8px;
}

.gt-reward-emoji {
  font-size: 1.4rem;
  display:inline-block;
}

.gt-reward-emoji.is-pop {
  animation: gtPop 0.55s ease;
}

@keyframes gtPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35) rotate(-8deg); }
  100% { transform: scale(1); }
}

/* Petites “étincelles” (simple, léger) */
.gt-sparkles {
  position: relative;
  height: 18px;
  margin-top: 6px;
  overflow: hidden;
  opacity: .85;
}
.gt-sparkles i {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, #ffc107 80%, transparent);
  transform: translateY(-50%);
  animation: gtSpark 1.4s ease infinite;
}
.gt-sparkles i:nth-child(1){ left: 12%; animation-delay: 0s; }
.gt-sparkles i:nth-child(2){ left: 33%; animation-delay: .2s; }
.gt-sparkles i:nth-child(3){ left: 58%; animation-delay: .4s; }
.gt-sparkles i:nth-child(4){ left: 82%; animation-delay: .6s; }

@keyframes gtSpark {
  0% { transform: translateY(-50%) scale(.7); opacity: .2; }
  45% { transform: translateY(-50%) scale(1.25); opacity: 1; }
  100% { transform: translateY(-50%) scale(.7); opacity: .25; }
}

.gt-end-save-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.92rem;
  color: var(--gt-text);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity .2s ease, transform .2s ease;
}

.gt-end-save-confirm.is-show {
  opacity: 0.9;
  transform: translateY(0) scale(1);
}

.gt-end-save-confirm__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 25%, transparent);
}

.gt-end-save-confirm.is-show .gt-end-save-confirm__dot {
  animation: gtSavePulse 0.6s ease;
}

@keyframes gtSavePulse {
  0% { transform: scale(0.6); opacity: 0.5; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}

/* ===== GeoTrainers brand buttons (Discovery) ===== */
.btn-primary{
  background-color: var(--gt-btn) !important;
  border-color: var(--gt-btn) !important;
  color: var(--gt-btn-contrast) !important;
}
.btn-primary:hover{ filter: brightness(.95); }
.btn-primary:active{ filter: brightness(.92); }

.btn-outline-primary{
  border-color: var(--gt-btn) !important;
  color: var(--gt-btn) !important;
}
.btn-outline-primary:hover{
  background-color: var(--gt-btn) !important;
  border-color: var(--gt-btn) !important;
  color: var(--gt-btn-contrast) !important;
}