/* ═══════════════════════════════════════════════════════════════════════════
   Red Conflict — thème du site

   La palette est celle du launcher (fr/launcher/ui/Theme.java), au code
   hexadécimal près : c'est la même marque, un joueur passe de l'un à l'autre en
   quelques secondes et doit reconnaître les deux.

   Le thème est volontairement SOMBRE UNIQUEMENT. Le noir et le rouge sont
   l'identité ; une variante claire donnerait un rouge criard sur blanc, qui
   n'est plus la même marque. On force donc data-bs-theme="dark" dans le layout
   plutôt que de proposer un choix qu'on ne saurait pas honorer.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Fonds ─────────────────────────────────────────────────────────── */
    --rc-bg-deep: #09080a;   /* page */
    --rc-bg-mid: #100d0f;    /* bandes, en-têtes */
    --rc-panel: #141114;     /* cartes */
    --rc-field: #0c0a0c;     /* champs et blocs en creux */
    --rc-track: #221c1f;     /* rails de barres de progression */

    /* ── Rouge de marque ───────────────────────────────────────────────── */
    --rc-red: #cc0000;
    --rc-red-hot: #ff2d2d;
    --rc-red-glow: #ff463c;
    --rc-ember: #ff6e3c;

    /* ── Texte ─────────────────────────────────────────────────────────── */
    --rc-fg: #f0eef0;
    --rc-fg-dim: #969296;
    --rc-fg-muted: #544e54;

    --rc-border: #302224;
    --rc-error: #ff6060;

    /*
     * Seule couleur froide de la palette, réservée à un état sain. Le rouge est
     * la couleur de marque : il ne peut pas dire en même temps « c'est nous » et
     * « tout va bien ». Même règle que dans le launcher.
     */
    --rc-ok: #56c480;

    --rc-radius: 10px;
    --rc-radius-sm: 6px;

    /* Bootstrap suit la palette : boutons, liens et focus n'ont pas à être
       redéfinis un par un. */
    --bs-primary: var(--rc-red);
    --bs-primary-rgb: 204, 0, 0;
    --bs-link-color: var(--rc-red-hot);
    --bs-link-hover-color: var(--rc-ember);
    --bs-border-color: var(--rc-border);
    --bs-body-bg: var(--rc-bg-deep);
    --bs-body-color: var(--rc-fg);
}

/* ═══ Ossature ══════════════════════════════════════════════════════════ */

body {
    background-color: var(--rc-bg-deep);
    color: var(--rc-fg);
    font-family: "Rajdhani", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 1.02rem;
    /*
     * Une lueur rouge très basse en haut de page, jamais assez forte pour gêner
     * la lecture. C'est ce qui empêche le fond de paraître « gris éteint » sans
     * poser d'image de fond à télécharger.
     */
    background-image:
        radial-gradient(ellipse 90% 55% at 50% -10%, rgba(204, 0, 0, .16), transparent 70%),
        radial-gradient(ellipse 60% 40% at 85% 0%, rgba(255, 110, 60, .07), transparent 65%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, .rc-display {
    font-family: "Oswald", "Rajdhani", "Segoe UI", system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: .01em;
}

a {
    transition: color .15s ease;
}

/* ═══ Barre de navigation ═══════════════════════════════════════════════ */

.rc-navbar {
    background: rgba(9, 8, 10, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rc-border);
}

.rc-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rc-fg);
    font-size: 1.15rem;
}

/*
 * Le logo est un tracé clair sur fond transparent : il se pose tel quel sur le
 * noir. Le croissant rouge du centre est sombre — une lueur derrière lui rend
 * la goutte lisible au lieu de la laisser se fondre dans le fond.
 */
.rc-brand__logo {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 45, 45, .35));
}

.rc-brand strong {
    color: var(--rc-red-hot);
    font-weight: 700;
}

.rc-navbar .nav-link {
    color: var(--rc-fg-dim);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .86rem;
    padding: .5rem .9rem;
    position: relative;
}

.rc-navbar .nav-link:hover,
.rc-navbar .nav-link:focus {
    color: var(--rc-fg);
}

.rc-navbar .nav-link.active {
    color: var(--rc-fg);
}

/* Le soulignement marque la page courante sans réserver de place quand il est
   absent : pas de saut de mise en page au survol. */
.rc-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: .15rem;
    height: 2px;
    background: linear-gradient(90deg, var(--rc-red), var(--rc-ember));
}

/* ═══ Solde en PB ═══════════════════════════════════════════════════════ */

.rc-balance {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--rc-field);
    border: 1px solid var(--rc-border);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-weight: 700;
    color: var(--rc-ember);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rc-balance small {
    color: var(--rc-fg-muted);
    font-weight: 600;
}

/* ═══ Cartes ════════════════════════════════════════════════════════════ */

.rc-card {
    background: var(--rc-panel);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color .18s ease, transform .18s ease;
}

.rc-card:hover {
    border-color: rgba(255, 45, 45, .45);
    transform: translateY(-2px);
}

/*
 * Bandeau d'illustration, facultatif. La hauteur est fixe et le recadrage
 * automatique : des captures d'écran de tailles différentes ne doivent pas
 * donner des cartes de hauteurs différentes dans une même grille.
 */
.rc-card__banner {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--rc-border);
}

.rc-card__head {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1.1rem;
    background: var(--rc-bg-mid);
    border-bottom: 1px solid var(--rc-border);
}

.rc-card__icon {
    font-size: 1.3rem;
    color: var(--rc-red-hot);
    line-height: 1;
}

.rc-card__title {
    font-family: "Oswald", sans-serif;
    font-size: 1.05rem;
    margin: 0;
    color: var(--rc-fg);
}

.rc-card__body {
    padding: 1rem 1.1rem;
    flex: 1 1 auto;
}

.rc-card__foot {
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--rc-border);
    background: rgba(12, 10, 12, .5);
}

/* Un article déjà possédé reste lisible mais visiblement hors jeu : on ne le
   masque pas, le joueur doit voir ce qu'il a. */
.rc-card--owned {
    opacity: .62;
}

.rc-card--owned:hover {
    border-color: var(--rc-border);
    transform: none;
}

/* ═══ Listes de description ═════════════════════════════════════════════ */

.rc-features {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .93rem;
    color: var(--rc-fg-dim);
}

.rc-features li {
    padding: .22rem 0 .22rem 1.1rem;
    position: relative;
}

.rc-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 5px;
    height: 5px;
    background: var(--rc-red);
    transform: rotate(45deg);
}

/* ═══ Étiquettes ════════════════════════════════════════════════════════ */

.rc-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: var(--rc-radius-sm);
    border: 1px solid var(--rc-border);
    color: var(--rc-fg-dim);
    background: var(--rc-field);
}

.rc-tag--ok      { color: var(--rc-ok);      border-color: rgba(86, 196, 128, .4); }
.rc-tag--pending { color: var(--rc-ember);   border-color: rgba(255, 110, 60, .4); }
.rc-tag--error   { color: var(--rc-error);   border-color: rgba(255, 96, 96, .4); }
.rc-tag--perm    { color: var(--rc-red-hot); border-color: rgba(255, 45, 45, .45); }

/* ═══ Boutons ═══════════════════════════════════════════════════════════ */

.rc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .55rem .9rem;
    border-radius: var(--rc-radius-sm);
    border: 1px solid transparent;
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.rc-btn--buy {
    background: linear-gradient(180deg, var(--rc-red-hot), var(--rc-red));
    color: #fff;
    border-color: var(--rc-red-hot);
}

.rc-btn--buy:hover {
    background: linear-gradient(180deg, var(--rc-red-glow), var(--rc-red-hot));
    color: #fff;
}

.rc-btn--rent {
    background: var(--rc-field);
    color: var(--rc-fg);
    border-color: var(--rc-border);
}

.rc-btn--rent:hover {
    border-color: var(--rc-red-hot);
    color: var(--rc-red-hot);
}

.rc-btn:disabled,
.rc-btn--disabled {
    background: var(--rc-field);
    color: var(--rc-fg-muted);
    border-color: var(--rc-border);
    cursor: not-allowed;
}

/* Deux systèmes, deux icônes, serrées comme une seule marque. */
.rc-os {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/*
 * Téléchargements par système. La détection d'OS (home.blade.php) pose
 * rc-dl--primary sur le bouton du système du visiteur : on le grossit un peu et
 * on l'entoure d'un liseré pour attirer l'œil, sans jamais masquer les autres —
 * une détection qui se trompe ne doit pas priver le joueur de sa version. Sans
 * JavaScript, ou si la détection échoue, les trois restent identiques et
 * cliquables.
 */
.rc-dl {
    transition: transform .15s ease, box-shadow .15s ease,
                background .15s ease, border-color .15s ease, color .15s ease;
}

.rc-dl--primary {
    transform: scale(1.06);
    box-shadow: 0 0 0 2px var(--rc-red-hot), 0 6px 18px rgba(0, 0, 0, .35);
}

.rc-dl--primary::after {
    content: "détecté";
    margin-left: .5rem;
    padding: .05rem .4rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
}

.rc-price {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

/* ═══ Boutons d'achat ═══════════════════════════════════════════════════ */

/*
 * Les deux modes côte à côte quand ils existent tous les deux : c'est la
 * comparaison directe « 30 jours à 50 » contre « à vie à 150 » qui fait
 * décider. Empilés, il fallait lire deux fois.
 */
.rc-buy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: .5rem;
}

.rc-buy-grid form {
    margin: 0;
    display: flex;
}

.rc-buy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    width: 100%;
    padding: .5rem .6rem;
    border-radius: var(--rc-radius-sm);
    border: 1px solid var(--rc-border);
    background: var(--rc-field);
    color: var(--rc-fg);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.rc-buy__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rc-fg-dim);
    line-height: 1;
}

.rc-buy__price {
    font-family: "Oswald", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.rc-buy--rent:hover {
    border-color: var(--rc-fg-dim);
}

.rc-buy--rent:hover .rc-buy__label {
    color: var(--rc-fg);
}

/* L'achat définitif est l'option qu'on met en avant. */
.rc-buy--perm {
    background: linear-gradient(180deg, rgba(255, 45, 45, .18), rgba(204, 0, 0, .10));
    border-color: rgba(255, 45, 45, .45);
}

.rc-buy--perm .rc-buy__label {
    color: var(--rc-red-hot);
}

.rc-buy--perm:hover {
    background: linear-gradient(180deg, var(--rc-red-hot), var(--rc-red));
    border-color: var(--rc-red-hot);
    color: #fff;
}

.rc-buy--perm:hover .rc-buy__label {
    color: rgba(255, 255, 255, .85);
}

/* ═══ Bannière d'accueil ════════════════════════════════════════════════ */

.rc-hero {
    position: relative;
    padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem);
    text-align: center;
    border-bottom: 1px solid var(--rc-border);
}

.rc-hero__logo {
    width: clamp(6.5rem, 16vw, 10rem);
    height: auto;
    margin: 0 auto 1.2rem;
    display: block;
    filter: drop-shadow(0 0 22px rgba(204, 0, 0, .45));
}

.rc-hero__title {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.02;
    font-size: clamp(2.6rem, 8vw, 5rem);
    margin: 0;
}

.rc-hero__title span {
    background: linear-gradient(100deg, var(--rc-red-hot), var(--rc-ember));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rc-hero__tagline {
    color: var(--rc-fg-dim);
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    max-width: 44ch;
    margin: 1rem auto 0;
}

/* ═══ Adresse du serveur ════════════════════════════════════════════════ */

.rc-address {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    overflow: hidden;
    background: var(--rc-field);
    max-width: 100%;
}

.rc-address code {
    padding: .7rem 1.1rem;
    color: var(--rc-fg);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
    background: none;
    white-space: nowrap;
    overflow-x: auto;
}

.rc-address button {
    border: 0;
    border-left: 1px solid var(--rc-border);
    background: var(--rc-panel);
    color: var(--rc-fg-dim);
    padding: 0 1rem;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.rc-address button:hover {
    background: var(--rc-red);
    color: #fff;
}

/* ═══ Statut du serveur ═════════════════════════════════════════════════ */

.rc-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--rc-fg-dim);
}

.rc-status__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--rc-fg-muted);
    flex: none;
}

.rc-status--online .rc-status__dot {
    background: var(--rc-ok);
    box-shadow: 0 0 0 3px rgba(86, 196, 128, .18);
}

.rc-status--offline .rc-status__dot {
    background: var(--rc-error);
}

/* ═══ Tableaux (classements) ════════════════════════════════════════════ */

.rc-table-wrap {
    /* Un classement large ne doit jamais faire défiler la page entière. */
    overflow-x: auto;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    background: var(--rc-panel);
}

.rc-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    white-space: nowrap;
}

.rc-table th {
    background: var(--rc-bg-mid);
    color: var(--rc-fg-dim);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--rc-border);
    position: sticky;
    top: 0;
}

.rc-table td {
    padding: .62rem .9rem;
    border-bottom: 1px solid rgba(48, 34, 36, .55);
    font-variant-numeric: tabular-nums;
}

.rc-table tbody tr:last-child td {
    border-bottom: 0;
}

.rc-table tbody tr:hover {
    background: rgba(204, 0, 0, .07);
}

.rc-table .rc-name {
    font-weight: 600;
    color: var(--rc-fg);
    font-variant-numeric: normal;
}

/* Le podium se lit d'un coup d'œil, sans avoir à comparer les chiffres. */
.rc-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--rc-radius-sm);
    background: var(--rc-field);
    border: 1px solid var(--rc-border);
    font-weight: 700;
    color: var(--rc-fg-dim);
}

.rc-rank--1 { background: linear-gradient(180deg, #ffd166, #d9a441); color: #191207; border-color: #d9a441; }
.rc-rank--2 { background: linear-gradient(180deg, #d8d8de, #a9a9b2); color: #16161a; border-color: #a9a9b2; }
.rc-rank--3 { background: linear-gradient(180deg, #d08b52, #a3653a); color: #1a0f07; border-color: #a3653a; }

/* ═══ Widget de vote ════════════════════════════════════════════════════ */

.rc-vote {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.2rem;
    border-radius: var(--rc-radius);
    border: 1px solid rgba(255, 110, 60, .45);
    background:
        linear-gradient(90deg, rgba(255, 110, 60, .12), rgba(204, 0, 0, .05));
}

.rc-vote__icon {
    font-size: 1.6rem;
    color: var(--rc-ember);
    line-height: 1;
}

.rc-vote__text {
    flex: 1 1 15rem;
}

.rc-vote__title {
    font-family: "Oswald", sans-serif;
    font-size: 1.05rem;
    margin: 0;
    color: var(--rc-fg);
}

.rc-vote__sub {
    margin: .15rem 0 0;
    font-size: .9rem;
    color: var(--rc-fg-dim);
}

.rc-vote .rc-btn {
    width: auto;
    padding-inline: 1.4rem;
}

/* ═══ Sections ══════════════════════════════════════════════════════════ */

.rc-section-title {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 1.15rem;
    color: var(--rc-fg);
    margin: 0 0 1.1rem;
}

.rc-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--rc-border), transparent);
}

.rc-muted {
    color: var(--rc-fg-muted);
    font-size: .85rem;
}

/* ═══ Alertes ═══════════════════════════════════════════════════════════ */

.rc-alert {
    border-radius: var(--rc-radius);
    border: 1px solid var(--rc-border);
    background: var(--rc-panel);
    padding: .85rem 1.1rem;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.rc-alert--success { border-color: rgba(86, 196, 128, .45); color: var(--rc-ok); }
.rc-alert--error   { border-color: rgba(255, 96, 96, .45);  color: var(--rc-error); }

/* ═══ Statistiques du profil ════════════════════════════════════════════ */

.rc-stat {
    background: var(--rc-panel);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    padding: .9rem 1rem;
    height: 100%;
}

.rc-stat__label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rc-fg-muted);
    font-weight: 700;
}

.rc-stat__value {
    font-family: "Oswald", sans-serif;
    font-size: 1.6rem;
    line-height: 1.15;
    color: var(--rc-fg);
    font-variant-numeric: tabular-nums;
}

/* ═══ Pied de page ══════════════════════════════════════════════════════ */

.rc-footer {
    margin-top: 4rem;
    padding: 2.5rem 0 2rem;
    background: var(--rc-bg-mid);
    border-top: 1px solid var(--rc-border);
    color: var(--rc-fg-dim);
}

.rc-footer a {
    color: var(--rc-fg-dim);
    text-decoration: none;
}

.rc-footer a:hover {
    color: var(--rc-red-hot);
}

.rc-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    border: 1px solid var(--rc-border);
    color: var(--rc-fg-dim);
    transition: transform .15s ease, border-color .15s ease, color .15s ease;
}

.rc-social:hover {
    transform: translateY(-2px);
    border-color: var(--rc-red-hot);
    color: var(--rc-red-hot);
}

/* ═══ Formulaires ═══════════════════════════════════════════════════════ */

.form-control,
.form-select {
    background-color: var(--rc-field);
    border-color: var(--rc-border);
    color: var(--rc-fg);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--rc-field);
    border-color: var(--rc-red-hot);
    color: var(--rc-fg);
    box-shadow: 0 0 0 .2rem rgba(204, 0, 0, .2);
}

.card {
    background-color: var(--rc-panel);
    border-color: var(--rc-border);
}

.page-link {
    background-color: var(--rc-panel);
    border-color: var(--rc-border);
    color: var(--rc-fg-dim);
}

.page-item.active .page-link {
    background-color: var(--rc-red);
    border-color: var(--rc-red);
    color: #fff;
}

/* ═══ Accessibilité ═════════════════════════════════════════════════════ */

/* Le survol des cartes et le décalage du pied de page sont du confort, pas de
   l'information : on les coupe pour qui demande moins d'animation. */
@media (prefers-reduced-motion: reduce) {
    .rc-card,
    .rc-social,
    a,
    .rc-btn {
        transition: none;
    }

    .rc-card:hover,
    .rc-social:hover {
        transform: none;
    }
}

:focus-visible {
    outline: 2px solid var(--rc-ember);
    outline-offset: 2px;
}