/* Panneaux flottants : choix, événements, consultation (CardChoicePanels, TableEventPanels,
   GirlPowerPanels, PendingPanels, InfoPanels, et les briques PickCard / PickPlayer de Room.razor). */

.mini-card {
    background: linear-gradient(160deg, #fffdf6 0%, #f1eee0 100%);
    color: #222;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top-style: solid;
    border-top-width: 4px;
    /* Comme .hand-card : ne jamais fixer border-top-color ici, seulement dans les .mini-card.cat-XXX
       ci-dessous, pour ne pas écraser leur couleur (voir la note détaillée sur .hand-card). */
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.15;
    padding: 0.22rem 0.4rem;
    min-width: 38px;
    text-align: center;
    white-space: nowrap;
}

.mini-stack .mini-card + .mini-card {
    margin-left: -16px;
}

.mini-card[class*="cat-"] { border-top-color: var(--cat-color); }
/* Panneau voyante (bonus p.14) : ordre de sortie des prochaines cartes de la pioche, très visuel
   avec un badge de rang numéroté sur chaque mini-carte plutôt qu'une simple liste de texte. */
.fortune-order {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.fortune-order .mini-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 64px;
    padding-top: 0.5rem;
    white-space: normal;
}

.fortune-rank {
    position: absolute;
    top: -10px;
    left: -10px;
    background: #7a4ed9;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.floating-panel {
    background: rgba(255, 255, 255, 0.96);
    color: #222;
    border-radius: var(--card-radius);
    padding: 0.65rem 0.85rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    border: 2px solid transparent;
}

.floating-panel.birthday-panel {
    border-color: var(--gold);
}

.floating-panel.purchase-panel,
.floating-panel.info-panel {
    border-color: #2fa84f;
}

.floating-panel.capacity-panel {
    border-color: #c0392b;
}

.floating-panel.capacity-panel strong {
    color: #c0392b;
}

.log-list {
    max-height: 30vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.log-time {
    color: #9a9a9a;
    font-variant-numeric: tabular-nums;
    margin-right: 0.35em;
}

/* Panneau "🚩 Anomalies" : distingue visuellement ce qui demande encore un vrai examen de ce qui
   s'est résolu tout seul depuis (voir GameRoom.ResolveAnomaliesNotIn). */
.anomaly-active {
    color: #ffb4b4;
}

.anomaly-resolved {
    color: #8a8a8a;
    text-decoration: line-through;
}

.anomaly-resolved em {
    font-style: normal;
    text-decoration: none;
}

/* Sélecteur de carte dans la défausse complète (Étoile filante, astronaute, responsables des
   achats / commercial) : filtres par catégorie + grille qui défile. */
.discard-picker {
    margin-top: 0.4rem;
}

.discard-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}

.discard-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-height: 45vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.2rem;
}

.mini-card.discard-pick {
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.35rem 0.55rem;
    white-space: normal;
    max-width: 11rem;
}

.mini-card.discard-pick:hover:not(:disabled) {
    outline: 2px solid #2fa84f;
}

.mini-card.discard-pick:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------- Panneaux d'action en partie (trafic d'organes, échange, paiement, bourreau…) ----------
   Demande : « le design du trafic d'organes est à revoir pour matcher celui actuellement ». Les
   anciens panneaux blancs à listes à puces passent au thème de la table : feutrine sombre,
   liseré doré, vraies cartes cliquables et jetons de joueurs colorés. */
.game-shell .floating-panel {
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, rgba(9, 52, 32, 0.97) 0%, rgba(5, 32, 19, 0.97) 100%);
    color: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 3px solid var(--panel-accent, var(--gold));
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    margin: 0.4rem 0.6rem;
    padding: 0.7rem 0.95rem 0.8rem;
    flex: 0 0 auto;
    max-height: 52vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

.game-shell .floating-panel.purchase-panel,
.game-shell .floating-panel.info-panel {
    --panel-accent: #2fa84f;
}

.game-shell .floating-panel.capacity-panel {
    --panel-accent: #e5533d;
}

.game-shell .floating-panel.capacity-panel strong {
    color: #ffb4a8;
}

.game-shell .floating-panel.traffic-panel {
    --panel-accent: #e0559b;
}

.game-shell .floating-panel > strong:first-child {
    color: var(--gold);
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.game-shell .floating-panel p {
    color: rgba(255, 255, 255, 0.82);
    margin: 0.35rem 0 0.5rem;
}

.game-shell .floating-panel .log-list {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
    color: rgba(255, 255, 255, 0.88);
}

.game-shell .floating-panel .log-list li {
    padding: 0.18rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.game-shell .floating-panel .log-time {
    color: rgba(255, 255, 255, 0.45);
}

.game-shell .floating-panel .btn.secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.game-shell .floating-panel .btn.secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.16);
}

/* En-tête commun des panneaux redessinés. */
.action-panel-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.action-panel-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.06) 70%);
    box-shadow: inset 0 0 0 2px var(--panel-accent, var(--gold));
}

.action-panel-heading {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.game-shell .floating-panel .action-panel-title {
    color: var(--gold);
    font-size: 1.1rem;
    font-weight: 800;
}

.action-panel-sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.game-shell .floating-panel .action-panel-prompt {
    margin: 0.6rem 0 0.4rem;
    color: #fff;
}

.action-panel-wait {
    color: rgba(255, 255, 255, 0.65);
    font-style: italic;
}

.action-panel-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.55rem;
}

/* Qui vole qui : une pastille par joueur, cochée quand il a choisi. */
.traffic-chain {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.traffic-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem 0.22rem 0.4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.8rem;
    color: #fff;
}

.traffic-chip.done {
    border-color: rgba(47, 168, 79, 0.8);
    background: rgba(47, 168, 79, 0.18);
}

.traffic-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--seat-color, #ccc);
}

.traffic-arrow {
    opacity: 0.7;
}

.traffic-state {
    margin-left: 0.1rem;
}

/* Rangée de cartes cliquables (même papier que la défausse et la rivière). */
.pick-row {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 1.1rem 0.7rem 0.6rem 0.3rem;
    /* place pour la carte levée et sa coche */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.pick-card {
    position: relative;
    flex: 0 0 auto;
    width: 104px;
    height: 134px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    border-radius: var(--card-radius);
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
    --pile-h: 134px;
}

.pick-card .card-face {
    transform: none;
}

.pick-card .card-face-name {
    font-size: 0.72rem;
    overflow-wrap: break-word;
    /* coupe un mot seulement s'il ne tient vraiment pas sur la ligne */
    hyphens: auto;
}

.pick-card:hover:not(:disabled) {
    transform: translateY(-5px);
}

.pick-card.selected {
    transform: translateY(-7px);
}

.pick-card.selected::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: calc(var(--card-radius) + 5px);
    box-shadow: 0 0 0 3px var(--gold), 0 0 16px 3px rgba(255, 200, 0, 0.45);
    pointer-events: none;
}

.pick-card:disabled {
    cursor: not-allowed;
    filter: grayscale(0.6) brightness(0.8);
}

.pick-check {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gold);
    color: #2a1e00;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    z-index: 2;
}

.pick-note {
    font-size: 0.62rem;
    font-weight: 700;
    color: #7a4ed9;
}

/* Jeton de joueur cliquable (cible d'un effet). */
.pick-row.players {
    gap: 0.5rem;
    flex-wrap: wrap;
    overflow: visible;
}

.pick-player {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.85rem 0.35rem 0.35rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font: inherit;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    text-align: left;
    max-width: 100%;
}

.pick-player:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.pick-player:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pick-player-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    min-width: 0;
}

.pick-player-name {
    font-weight: 800;
}

.pick-player-sub {
    font-size: 0.72rem;
    opacity: 0.7;
}

.pick-row.readonly .pick-card {
    cursor: default;
}

.pick-row.readonly .pick-card:hover {
    transform: none;
}

.game-shell .floating-panel.collection-panel {
    --panel-accent: #3d9e9e;
}

.game-shell .floating-panel.perk-panel {
    --panel-accent: var(--gold);
}

/* Cartes à choisir : une note (« annuler », « 2 liasse(s) ») s'ajoute sous l'illustration. */
.pick-card .card-face.top .card-art {
    font-size: calc(var(--pile-h, 134px) * 0.27);
}

.card-face.top .pick-note {
    margin-top: -0.1rem;
}

.fortune-order .card-art.fortune-art {
    font-size: 1.9rem;
}

/* ---------- Extension Fantastique sur téléphone (vérifiée en 400×860) ---------- */
/* Cartes à choisir : l'illustration suit la hauteur de la carte (plus petite sur mobile). */
/* Pied des panneaux d'action : collant en bas du panneau quand celui-ci défile (Messe noire,
   Démon, Sirène, Magicien, paiement…), pour que « Distribuer », « Redistribuer », « Terminer mes
   achats » ou « Confirmer l'achat » restent visibles sans faire défiler toutes les cartes. */
.game-shell .floating-panel > .action-panel-foot:last-child {
    position: sticky;
    bottom: -0.8rem;
    z-index: 3;
    margin: 0.55rem -0.95rem -0.8rem;
    padding: 0.5rem 0.95rem 0.65rem;
    background: #05251a;
    /* L'ombre pleine recouvre aussi la marge intérieure du bas du panneau. */
    box-shadow: 0 0.8rem 0 #05251a, 0 -8px 14px rgba(0, 0, 0, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sirène : une ligne par carte, un bouton par joueur de même largeur (noms tronqués au besoin). */
.siren-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0 0 0.45rem;
}

.siren-count {
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.siren-count.ok {
    background: rgba(47, 168, 79, 0.22);
    border-color: rgba(47, 168, 79, 0.75);
    color: #bff0cc;
}

.game-shell .siren-count.error {
    background: rgba(229, 83, 61, 0.2);
    border-color: rgba(229, 83, 61, 0.8);
    color: #ffc9bf;
    font-size: 0.78rem;
}

.siren-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.siren-row {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
    align-items: center;
    gap: 6px;
}

.siren-row .mini-card.siren-card {
    min-width: 0;
    white-space: normal;
    text-align: left;
    font-size: 0.74rem;
    padding: 0.3rem 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.siren-choices {
    display: grid;
    grid-template-columns: repeat(var(--players, 4), minmax(0, 1fr));
    gap: 4px;
}

.game-shell .siren-choices .btn.siren-choice {
    min-width: 0;
    margin: 0;
    padding: 0.35rem 0.3rem;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
    .floating-panel {
        font-size: 0.8rem;
    }
}

@media (max-width: 600px) {
    /* Jetons de joueur : l'avatar ne s'écrase plus quand le texte (pouvoir du mutant…) est long. */
    .siren-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .siren-row + .siren-row {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 6px;
    }
}

@media (max-width: 480px), (orientation: landscape) and (max-height: 500px) {
    .pick-card {
        width: 84px;
        height: 110px;
        --pile-h: 110px;
    }

    .action-panel-icon {
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
    }

    .game-shell .floating-panel {
        margin: 0.3rem 0.4rem;
    }

    .pick-card .card-face.top {
        padding-left: 0.22rem;
        padding-right: 0.22rem;
    }

    .pick-card .card-face-name {
        font-size: 0.6rem;
    }

    .pick-row {
        padding-top: 0.7rem;
    }

    .game-shell .floating-panel .action-panel-foot .btn {
        padding: 0.45rem 0.7rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .floating-panel p {
        margin: 0.3rem 0;
    }

    .mini-card {
        font-size: 0.6rem;
        padding: 0.18rem 0.32rem;
        min-width: 32px;
    }

    .mini-stack .mini-card + .mini-card {
        margin-left: -13px;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .floating-panel {
        padding: 0.5rem 0.65rem;
    }
}

@media (max-width: 480px) {
    .floating-panel {
        padding: 0.4rem 0.6rem;
    }
}

@media (orientation: landscape) and (max-height: 340px) {
    .log-list {
        max-height: 30svh;
        overflow-y: auto;
    }
}

/* « 🐞 Signaler un problème », en bas du journal. */
.report-box {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.report-box textarea {
    flex: 1 1 100%;
    min-width: 0;
    box-sizing: border-box;
    font: inherit;
}

.report-done {
    flex: 1 1 100%;
    margin: 0;
    color: #2fa84f;
}

/* ---------- Bulles de décision ----------
   Tout ce que la partie attend du joueur (paiement, cartes à choisir, réponses…) s'affiche au
   premier plan, au milieu de l'écran, au même format (Room.razor, calque .decision-layer). La
   table reste visible et cliquable autour ; « Voir la table » réduit les bulles en une pastille. */
.decision-layer {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 4rem 1rem 8.5rem;
    pointer-events: none;
    box-sizing: border-box;
}

.decision-layer:has(> .floating-panel)::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    pointer-events: none;
    z-index: -1;
}

.game-shell .decision-layer > .floating-panel {
    pointer-events: auto;
    width: min(620px, 100%);
    max-height: calc(100svh - 13rem);
    margin: 0;
    box-sizing: border-box;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 215, 0, 0.18);
    animation: decision-in 0.18s ease-out;
}

@keyframes decision-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.decision-minimize,
.decision-restore {
    display: none;
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font: inherit;
    font-size: 0.85rem;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
}

.decision-layer:not(.minimized):has(> .floating-panel) > .decision-minimize {
    display: inline-block;
    align-self: center;
}

.decision-layer.minimized {
    justify-content: flex-end;
}

.decision-layer.minimized::before {
    display: none;
}

.decision-layer.minimized > .floating-panel {
    display: none;
}

.decision-layer.minimized:has(> .floating-panel) > .decision-restore {
    display: inline-block;
    background: var(--gold, #d4a017);
    color: #222;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    animation: decision-in 0.18s ease-out;
}

.waiting-pill {
    position: fixed;
    top: 3.3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2400;
    max-width: calc(100vw - 2rem);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
    pointer-events: none;
}

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
    .decision-layer {
        padding: 3.2rem 0.5rem 6rem;
    }

    .game-shell .decision-layer > .floating-panel {
        max-height: calc(100svh - 9.5rem);
    }
}

/* Options du tour (TurnOffers) : badge ⚡ sur la carte qui les donne (métier, personnage, boule de
   cristal, éphéméride, Casino), rappel en début de tour, bulle de l'option et bulle « carte ». */
.player-board .mini-card {
    position: relative;
    cursor: pointer;
}

.offer-badge {
    position: absolute;
    top: -9px;
    right: -9px;
    z-index: 3;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid var(--gold);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3a4a2a 0%, #14200f 100%);
    color: var(--gold);
    font-size: 0.8rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(224, 180, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.45);
    animation: offer-pulse 1.6s ease-in-out infinite;
}

.offer-badge.static { pointer-events: none; }

@keyframes offer-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 180, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.45); }
    50% { box-shadow: 0 0 0 7px rgba(224, 180, 0, 0), 0 2px 5px rgba(0, 0, 0, 0.45); }
}

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

.offer-reminder {
    position: fixed;
    top: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2400;
    max-width: calc(100vw - 2rem);
    display: flex;
    align-items: center;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.offer-reminder button {
    border: none;
    background: none;
    color: #2a1e00;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.offer-reminder-open { padding: 0.4rem 0.4rem 0.4rem 1rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

@media (max-width: 700px) {
    .offer-reminder { top: 4.3rem; }
    .offer-reminder button { font-size: 0.78rem; }
}
.offer-reminder-close { padding: 0.4rem 0.8rem 0.4rem 0.3rem; font-size: 1.05rem !important; opacity: 0.7; }

.offer-panel .offer-choice + .offer-choice { margin-top: 0.5rem; }
.offer-panel .offer-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

.card-info-body {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.card-info-body .card-info-text {
    flex: 1 1 220px;
    min-width: 0;
    line-height: 1.35;
}

.card-info-body .card-info-text p { margin: 0 0 0.4rem; }

/* Défausse : carte qu'on ne pourrait pas poser tout de suite (astronaute, Étoile filante), avec la raison. */
.discard-pick.not-posable {
    opacity: 0.55;
    filter: grayscale(0.6);
    cursor: not-allowed;
}

.discard-pick .pick-why {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.62rem;
    font-weight: 600;
    color: #b32121;
    white-space: normal;
    max-width: 9rem;
}

.card-info-group {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-height: 60vh;
    overflow: auto;
}

/* Défausse complète : la carte survolée (touchée au téléphone) en grand, avec ses informations. */
.discard-preview {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 0.45rem 0 0.5rem;
    min-height: 3rem;
}

.discard-preview.empty {
    min-height: 0;
}

.discard-preview-hint {
    font-size: 0.8rem;
    opacity: 0.75;
    font-style: italic;
}

.discard-preview .discard-preview-card {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: 96px;
    height: 134px;
    transform: none;
    --pile-h: 134px;
}

.discard-preview-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    font-size: 0.82rem;
    line-height: 1.3;
}

.discard-preview-name {
    font-size: 0.98rem;
}

.discard-preview-meta,
.discard-preview-by {
    font-size: 0.72rem;
    opacity: 0.7;
}

.discard-preview-short {
    font-weight: 600;
}

.mini-card.discard-pick.previewed {
    outline: 2px solid var(--gold);
}

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
    .discard-preview .discard-preview-card {
        width: 72px;
        height: 100px;
        --pile-h: 100px;
    }

    .discard-preview-text {
        font-size: 0.76rem;
    }
}