/* =========================================================================
   « SERVEUR REQUIS » — bandeau de la page « Sélectionnez un serveur »
   =========================================================================
   S'affiche quand on clique un module sans avoir choisi de serveur. Logique
   dans dashboard/core.js (`window.showServerRequired`), rendu par
   `renderServerSelectPage()`.

   ⚠️ Il REMPLACE l'ancienne `centerAlert` : un voile flouté plein écran et un
   panneau rouge en majuscules, posés par-dessus la liste des serveurs — soit
   précisément ce qu'il fallait cliquer. Ce n'est pas une erreur mais un
   détour : couleur primaire (jamais le rouge du danger), dans le flux de la
   page, sans minuterie — il reste tant que la demande tient.

   Tout passe par les jetons `--tc-*` : les quatre thèmes (classes
   `.theme-*`) s'appliquent sans règle dédiée. Aucun style en ligne côté JS,
   hormis `--tcsr-i` (rang de la carte dans la vague).

   Préfixe `tcsr-` (TennoCore Server Required) : fichier autonome.
   ========================================================================= */

.tcsr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tc-space-3) var(--tc-space-4);
    margin: 0 0 var(--tc-space-6);
    padding: var(--tc-space-4) var(--tc-space-5);
    /* Teinte primaire posée SUR la surface, pas sur la page : en thème clair
       le fond de page est déjà bleuté, une teinte seule s'y fondrait. */
    background: linear-gradient(var(--tc-primary-soft), var(--tc-primary-soft)), var(--tc-surface);
    border: 1px solid var(--tc-primary-border);
    border-radius: var(--tc-radius-lg);
    box-shadow: var(--tc-shadow-sm);
    color: var(--tc-text);
    animation: tcsr-arrive var(--tc-duration-slow) var(--tc-ease-out);
}

/* L'icône du module demandé : c'est elle qui dit « on parle de CE module ». */
.tcsr__tile {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--tc-radius-md);
    background: var(--tc-primary-fill);
    color: var(--tc-primary-contrast);
    font-size: var(--tc-text-lg);
}

.tcsr__text {
    flex: 1 1 16rem;
    min-width: 0;
}

.tcsr__title {
    margin: 0;
    font-size: var(--tc-text-lg);
    font-weight: var(--tc-weight-semibold);
    line-height: var(--tc-leading-snug);
    color: var(--tc-text);
}

.tcsr__body {
    margin: var(--tc-space-1) 0 0;
    max-width: 68ch;
    font-size: var(--tc-text-md);
    line-height: var(--tc-leading-normal);
    color: var(--tc-text-muted);
}

/* Poussé à droite ; sur écran étroit il passe sous le texte, toujours à droite. */
.tcsr__actions {
    flex-shrink: 0;
    margin-left: auto;
}

/* Second clic pendant que le bandeau est là : un éclat, pas un nouveau glissé. */
.tcsr.is-nudged {
    animation: tcsr-nudge 520ms var(--tc-ease-out);
}

/* ------------------------------------------------------- Vague sur les cartes */
/* Une seule fois, carte après carte : montre OÙ cliquer. `both` est exclu à
   dessein — pendant le délai, la carte doit garder son ombre et sa bordure. */
.tcsr-beckon {
    animation: tcsr-beckon 900ms var(--tc-ease-out);
    animation-delay: calc(var(--tcsr-i, 0) * 70ms + 160ms);
}

@keyframes tcsr-arrive {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes tcsr-nudge {
    0%   { box-shadow: var(--tc-shadow-sm), 0 0 0 0 var(--tc-primary-border); }
    35%  { box-shadow: var(--tc-shadow-sm), 0 0 0 5px var(--tc-primary-border); }
    100% { box-shadow: var(--tc-shadow-sm), 0 0 0 0 transparent; }
}

@keyframes tcsr-beckon {
    0%, 100% { border-color: var(--tc-border); box-shadow: var(--tc-shadow-sm); }
    40%      { border-color: var(--tc-primary); box-shadow: var(--tc-shadow-sm), 0 0 0 4px var(--tc-primary-soft); }
}

@media (prefers-reduced-motion: reduce) {
    .tcsr,
    .tcsr.is-nudged,
    .tcsr-beckon {
        animation: none;
    }
}

@media (max-width: 600px) {
    .tcsr {
        padding: var(--tc-space-4);
    }
    .tcsr__title {
        font-size: var(--tc-text-md);
    }
    .tcsr__body {
        font-size: var(--tc-text-sm);
    }
}