/* ==========================================================================
   SOLITAIRE KLONDIKE, styles specifiques.

   Ce fichier vient APRES ../styles.css, qui porte tout ce que les jeux ont en
   commun : barre laterale, menus, plateau, feutre, cartes, fenetres modales,
   barres de defilement, bascule de langue. On ne trouve ici que ce dont le
   seul solitaire a besoin : le tableau et ses colonnes, la pioche et la
   defausse, les fondations, le glisser-deposer, la fenetre de victoire et le
   tableau des meilleurs scores.
   ========================================================================== */

  #win-rate {
    color: #bbb;
    font-size: 17px;
    margin-bottom: 10px;
  }

  /* ---------- LIGNE DE SCORE ---------- */
  #score-line {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, "URW Palladio L", "Palatino LT STD", Georgia, "Times New Roman", serif;
    font-weight: bold;
    font-size: 30px;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 18px;
  }

  /* Le "box" epouse la largeur du texte : les etiquettes +10 / -15 peuvent
     ainsi etre ancrees juste apres le chiffre, quelle que soit sa longueur. */
  #score-box {
    position: relative;
    display: inline-block;
  }

  #score-delta-layer {
    position: absolute;
    left: 100%;
    top: 0;
    width: 0;
    height: 0;
  }

  .score-delta {
    position: absolute;
    left: 10px;
    top: 0;
    font-size: 22px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    animation: scoreFade 1s ease-out forwards;
  }

  #top-row {
    display: flex;
    align-items: flex-start;
    gap: 2.35cqw;
    margin-bottom: 40px; /* plus d'espace pour laisser respirer la bordure des fondations */
  }

  #stock, #waste {
    margin-top: 16px; /* compense padding (10px) + bordure (6px) de #foundations, pour aligner les cartes */
  }

  #foundations {
    display: flex;
    gap: 1.6cqw;
    margin-left: auto; /* pousse les fondations jusqu'au bord droit (aligne avec le tableau) */
    padding: 10px;
    border: 6px solid rgba(243, 234, 105, 0.5);
    border-radius: 12px;
  }

  #tableau {
    display: flex;
    gap: 2.35cqw;
  }

  .tableau-col {
    width: var(--card-w);
    min-height: calc(var(--card-w) * 244 / 168);
    position: relative;
  }

  .tableau-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--card-w);
    aspect-ratio: 168 / 244;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    box-sizing: border-box;
  }

  /* Ombre plus marquee pour donner l'impression que la carte est soulevee
     pendant un glissement (ou l'animation de double-clic). */
  .card-lifted {
    box-shadow: 0 10px 18px rgba(0,0,0,0.35);
  }

  #drag-ghost {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    top: 0;
    left: 0;
  }

  #win-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    font-size: 64px;
    font-weight: 800;
    color: #4ade80;
    text-shadow: 0 0 20px rgba(74,222,128,0.85), 0 0 50px rgba(74,222,128,0.5), 0 0 90px rgba(74,222,128,0.3);
    opacity: 0;
    z-index: 1500;
    pointer-events: none;
    white-space: nowrap;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  }

  .victory-card {
    position: fixed;
    width: var(--card-w);
    aspect-ratio: 168 / 244;
    border-radius: 6px;
    border: var(--card-border, 1px solid #999);
    background: #fff;
    background-size: var(--card-bg-size, 104% 102.7%);
    background-position: center;
    z-index: 1600;
    pointer-events: none;
    will-change: transform;
  }

  .modal-score {
    font-size: 20px;
    margin-bottom: 18px;
  }

  #final-score { color: #4ade80; font-weight: bold; }

  #player-name {
    width: 100%;
    padding: 8px 10px;
    font-size: 18px;
    font-family: inherit;
    color: #fff;
    background: #111;
    border: 1px solid #777;
    border-radius: 0;
    text-align: center;
  }

  #player-name:focus { outline: none; border-color: #fff; }

  #scores-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 18px;
  }

  #scores-table td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
  }
  #scores-table .rank { width: 2em; color: #888; text-align: right; }
  #scores-table .name { text-align: left; }
  #scores-table .pts { text-align: right; font-weight: bold; }
  #scores-table .date { color: #888; font-size: 14px; text-align: right; white-space: nowrap; }

  #scores-table tr.highlight td { color: #4ade80; }

  .no-scores { color: #888; font-size: 18px; padding: 10px 0; }

  .rules-score {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    color: #ccc;
  }

  .rules-score td {
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }

  .rules-score .pts {
    text-align: right;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
  }

  /* Emplacement vide : simple contour, comme sur le plateau. */
  .fig-empty-slot {
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.5);
  }

  /* Colonne du tableau : cartes decalees verticalement de 26px. La hauteur du
     conteneur suit le nombre de cartes, sinon la derniere deborderait. */
  /* La hauteur est posee en ligne par le script, a partir du meme ratio
     d'empilement que le plateau de jeu. */
  .fig-stack {
    position: relative;
    width: var(--fig-card-w, 46px);
  }

  /* ---------- ETATS DE LA FENETRE DES SCORES ---------- */
  .scores-loading,
  .scores-error {
    font-size: 16px;
    padding: 12px 0;
  }

  .scores-loading { color: #888; }
  .scores-error { color: #f87171; }

  /* Message d'erreur sous la saisie du nom : reserve sa place en permanence,
     pour que la fenetre ne saute pas de hauteur quand il apparait. */
  .dialog-error {
    min-height: 1.2em;
    margin-top: 8px;
    font-size: 14px;
    color: #f87171;
  }

  /* ---------- MENTION RGPD (fenetres de saisie et de scores) ----------
     ATTENTION au nom de cette classe : toute variante contenant "privacy",
     "cookie", "consent" ou "gdpr" est masquee d'office par les bloqueurs de
     publicite, dont les listes de filtres visent les bandeaux de consentement.
     Une mention legale doit rester visible : ne pas renommer a la legere. */
  .dialog-footnote {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 12px;
    line-height: 1.45;
    color: #777;
    text-align: left;
  }

  .dialog-footnote a { color: #999; }
  .dialog-footnote a:hover { color: #fff; }

  #win-message.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: winPulse 1.6s ease-in-out 0.5s infinite;
  }

  @keyframes winPulse {
    0%, 100% { text-shadow: 0 0 20px rgba(74,222,128,0.85), 0 0 50px rgba(74,222,128,0.5), 0 0 90px rgba(74,222,128,0.3); }
    50% { text-shadow: 0 0 30px rgba(74,222,128,1), 0 0 70px rgba(74,222,128,0.7), 0 0 120px rgba(74,222,128,0.45); }
  }

  /* L'etiquette reste strictement immobile : seule l'opacite varie. */
  @keyframes scoreFade {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    45%  { opacity: 1; }
    100% { opacity: 0; }
  }