/* Habillage visuel du jeu UNO. Feuille de style dédiée (ne touche pas à
   style.css/style.min.css, qui est spécifique à la Belote) - réutilise les
   variables de couleur du thème du site (--main-purple, --dark-purple,
   --light-purple-bg, définies dans style.css et redéfinies par
   theme-clair.css/theme-sombre.css) pour rester cohérent visuellement,
   quel que soit le thème choisi par le joueur. */

:root {
    --main-purple: rgb(130, 5, 177);
    --dark-purple: rgb(93, 4, 128);
    --light-purple-bg: rgb(240, 230, 247);
    --uno-red: #d32f2f;
    --uno-yellow: #f9a825;
    --uno-green: #2e7d32;
    --uno-blue: #1565c0;
    --uno-black: #1a1a1a;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Même fond que le reste du site (voir body dans style.css) - pas de
       détection webp ici (uno-client.js ne fait pas ce test contrairement à
       client.js) : le .png suffit, différence invisible à l'œil nu. */
    background-image: url('/images/fond.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: var(--background-color, var(--dark-purple));
    color: var(--text-color, #222);
    min-height: 100vh;
}

#uno-app {
    max-width: 960px;
    margin: 0 auto;
    padding: 12px 16px 24px;
}

/* Même traitement que header h1 dans style.css (posé directement sur le
   fond de la page, pas sur une carte --modal-content-background-color -
   contexte différent de .uno-modal h3/#uno-lobby-section h2 ci-dessus). */
#uno-header h1 {
    text-align: center;
    color: var(--dark-purple);
    font-size: 1.8em;
    margin: 0 0 16px;
}

#uno-error {
    background: #ffe1e1;
    color: #b00020;
    border: 1px solid #b00020;
    border-radius: 8px;
    padding: 8px 12px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 12px;
}

/* Même traitement que #app dans style.css (fond/rayon/ombre), pour que ces
   sections lisent comme la même "carte" que la page Belote plutôt qu'un
   encart blanc générique. */
#uno-lobby-section,
#uno-waiting-section,
#uno-game-section {
    background-color: var(--modal-content-background-color, white);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

/* --main-purple (pas --dark-purple) : même raison que .uno-modal h3
   ci-dessous - ces titres reposent sur le fond --modal-content-background-
   color, qui vaut lui-même --dark-purple en thème sombre. */
#uno-lobby-section h2,
#uno-waiting-section h2 {
    color: var(--main-purple);
    margin-top: 0;
}

#uno-manual-create {
    margin-bottom: 16px;
    border: 1px dashed #ccc;
    border-radius: 8px;
    padding: 8px 12px;
}

#uno-manual-create summary {
    cursor: pointer;
    color: var(--main-purple);
    font-weight: bold;
}

.uno-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.uno-checkbox-label {
    display: flex;
    align-items: center;
    gap: 4px;
}

#uno-game-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#uno-game-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
}

#uno-game-list li:nth-child(odd) {
    background-color: var(--light-purple-bg);
}

/* --- Boutons génériques --- */

.uno-btn {
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--main-purple);
    background-color: white;
    color: var(--main-purple);
    font-weight: bold;
    cursor: pointer;
    transition:
        transform 0.15s,
        background-color 0.15s;
}

.uno-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    background-color: var(--light-purple-bg);
}

.uno-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.uno-btn-primary {
    background-color: var(--main-purple);
    color: white;
}

.uno-btn-primary:hover:not(:disabled) {
    background-color: var(--dark-purple);
}

/* Mêmes teintes que .modal-button.secondary dans style.css. */
.uno-btn-secondary {
    background-color: #e9ecef;
    border-color: #e9ecef;
    color: #495057;
}

.uno-btn-secondary:hover:not(:disabled) {
    background-color: #dee2e6;
}

.uno-btn-uno {
    background-color: var(--uno-red);
    border-color: var(--uno-red);
    color: white;
    font-size: 1.1em;
    animation: uno-pulse 1.4s ease-in-out infinite;
}

@keyframes uno-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.5);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(211, 47, 47, 0);
    }
}

.uno-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* --- Salle d'attente --- */

#uno-waiting-players {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#uno-waiting-players li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background-color: var(--light-purple-bg);
}

#uno-waiting-players li.uno-empty-seat {
    background-color: #f5f5f5;
    color: #999;
    font-style: italic;
}

#uno-waiting-players img.uno-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

/* --- Disposition de la partie sur le modèle Belote/Coinche/Tarot ---
   (colonne de table + colonne de tchat/déroulement, voir #game-columns-
   container/#game-main-column/#game-right-column dans style.css). Reprend
   les mêmes proportions (flex: 2 / 1.3) pour un rendu identique. */

#uno-game-columns {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

#uno-main-column {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: flex-start;
    min-width: 280px;
}

#uno-right-column {
    flex: 1.3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 260px;
}

/* --- Tchat de partie : ids/classes REPRIS TELS QUELS de style.css
   (#in-game-chat-container, #in-game-chat-box, ...) plutôt qu'importés
   depuis ce fichier de ~4000 lignes en entier - style.css cible des
   dizaines d'ids Belote absents ici et redéfinit `body`/`#app` d'une façon
   qui entrerait en conflit avec cette page (fond de table sombre propre à
   UNO, layout différent) ; ce copier-coller ciblé garantit un rendu
   identique sans ce risque. Les variables de thème utilisées ci-dessous
   (--chat-background-color, --game-list-row-background-color,
   --create-game-button-bg) sont déjà chargées par theme-clair.css/
   theme-sombre.css (voir <head> de uno.html) : aucune redéfinition
   nécessaire ici. */

#in-game-chat-container {
    background-color: var(--game-list-row-background-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 200px;
    overflow-y: auto;
    min-height: 0;
    border-radius: 10px;
    padding: 8px;
}

#in-game-chat-box {
    height: 100%;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: var(--chat-background-color);
    overflow-wrap: break-word;
    word-break: break-all;
    flex-grow: 1;
    min-width: 0;
    color: #222;
}

#in-game-chat-box p {
    margin: 3px 0;
    padding: 0;
    line-height: 1.4;
    word-break: break-all;
}

#in-game-chat-input-controls {
    display: flex;
    gap: 10px;
}

#in-game-chat-input {
    background-color: var(--chat-background-color);
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 0;
    color: #222;
}

#send-in-game-chat {
    padding: 8px 15px;
    background-color: var(--create-game-button-bg);
    color: black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

/* --- Rangée d'actions (icônes rondes), voir #game-controls dans style.css --- */

#game-controls {
    display: flex;
    justify-content: center;
    gap: 6px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 6px;
}

.icon-button {
    position: relative;
    background: none;
    border: none;
    font-size: 1.3em;
    padding: 8px;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    color: white;
    transition: all 0.2s ease;
}

.icon-button:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.2);
}

.icon-button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.icon-button.leave {
    color: #ff8080;
}

.icon-button.leave:hover {
    background-color: #ff4d4d;
    color: #fff;
}

.icon-button[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
    z-index: 100;
}

.icon-button[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* --- Déroulement de la partie : mêmes ids/classes que #game-messages en
   Belote (voir plus haut, même raison de copie ciblée). */

#game-messages {
    height: 150px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px 12px;
    background-color: rgb(35, 10, 48);
    border-radius: 10px;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
    flex-grow: 1;
}

#game-messages p {
    margin: 3px 0;
    font-size: 0.9em;
}

.game-message {
    color: #e0e0e0;
}

#game-messages .info {
    color: #4dabf7;
}

#game-messages .error {
    color: #ff6b6b;
    font-weight: bold;
}

#game-messages .announcement {
    color: #3bd6ef;
    font-weight: bold;
    font-style: italic;
}

/* --- Table de jeu --- */

/* Même image de fond + bordure/ombre que #game-area dans style.css (le
   "feutre" de la table Belote), plutôt qu'un dégradé vert générique sans
   rapport avec le reste du site. */
#uno-table {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url('/images/table_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
    border: 5px solid var(--dark-purple);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    padding: 16px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

#uno-opponents {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Même traitement que .game-player dans style.css : transparent sur le
   feutre de la table, texte blanc avec ombre portée pour rester lisible
   sans plaque de fond opaque (contrairement à l'ancien style "carte
   blanche" ci-dessus, qui tranchait avec le reste du site). */
.uno-opponent {
    background-color: transparent;
    border: 4px solid transparent;
    border-radius: 12px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease-in-out;
}

/* Réutilise .current-turn-highlight de style.css (halo doré pulsant déjà
   utilisé pour signaler le tour en cours à la table Belote) plutôt qu'un
   simple contour jaune fixe. */
.uno-opponent.uno-current-turn {
    position: relative;
    border-color: #ffd700;
    box-shadow: 0 0 14px 5px rgba(255, 215, 0, 0.5);
    transform: scale(1.05);
}

.uno-opponent.uno-vulnerable {
    border-color: var(--uno-red);
    box-shadow: 0 0 14px 5px rgba(211, 47, 47, 0.6);
}

.uno-opponent img.uno-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.uno-opponent-catch-btn {
    background-color: var(--uno-red);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.8em;
    cursor: pointer;
}

#uno-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.uno-pile-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.uno-pile-label {
    color: white;
    font-size: 0.8em;
    opacity: 0.85;
}

#uno-center-info {
    color: white;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

#uno-current-color-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: bold;
}

.uno-color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

#uno-pending-draw {
    color: var(--uno-yellow);
    font-weight: bold;
}

/* --- Cartes --- */

.uno-card {
    width: 74px;
    height: 108px;
    border-radius: 10px;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--uno-black);
    color: white;
    font-weight: 900;
    font-size: 1.8em;
    flex-shrink: 0;
}

.uno-card::before {
    content: '';
    position: absolute;
    width: 82%;
    height: 60%;
    background-color: rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    transform: rotate(-20deg);
    z-index: 0;
}

.uno-card-symbol {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.uno-card-back {
    background: repeating-linear-gradient(
        45deg,
        var(--main-purple),
        var(--main-purple) 6px,
        var(--dark-purple) 6px,
        var(--dark-purple) 12px
    );
    cursor: pointer;
    border-color: white;
}

.uno-card-back::before {
    content: '?';
    position: static;
    background: none;
    width: auto;
    height: auto;
    transform: none;
    color: white;
    font-size: 1.4em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.uno-color-red {
    background-color: var(--uno-red);
}

.uno-color-yellow {
    background-color: var(--uno-yellow);
}

.uno-color-green {
    background-color: var(--uno-green);
}

.uno-color-blue {
    background-color: var(--uno-blue);
}

.uno-color-none {
    background-color: var(--uno-black);
}

/* --- Main du joueur --- */

#uno-your-area {
    margin-top: 14px;
    text-align: center;
}

/* Bouton "UNO !" : reste un bouton proéminent dédié (pas un .icon-button
   parmi d'autres dans #game-controls) - c'est l'action la plus fréquente et
   la plus urgente du jeu, la reléguer à une petite icône ronde nuirait à
   l'utilisabilité. Passer/Contester restent eux des icônes secondaires. */
#uno-your-area .uno-btn-uno {
    margin-bottom: 10px;
}

#uno-hand {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background-color: var(--light-purple-bg);
    border-radius: 12px;
    min-height: 130px;
}

#uno-hand .uno-card {
    cursor: not-allowed;
    opacity: 0.55;
    transition:
        transform 0.15s,
        opacity 0.15s;
}

#uno-hand .uno-card.uno-playable {
    cursor: pointer;
    opacity: 1;
}

#uno-hand .uno-card.uno-playable:hover {
    transform: translateY(-10px);
}

/* --- Modales (choix de couleur, échange 7-0, fin de partie) ---
   Mêmes valeurs que .modal/.modal-content dans style.css (masquage par
   l'attribut `hidden` côté JS ici, plutôt que style.display comme en
   Belote - la logique d'affichage de uno-client.js repose déjà dessus,
   pas de raison de la réécrire pour cette passe visuelle). */

.uno-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    animation: uno-modal-fade-in 0.3s ease-out;
}

.uno-modal {
    background: var(--modal-content-background-color, white);
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    padding: 20px 24px;
    text-align: center;
    max-width: 90vw;
    animation: uno-modal-slide-up 0.4s ease-out;
}

/* --main-purple (pas --dark-purple) : ce dernier ne change jamais entre
   thèmes, alors que le fond de la modale (--modal-content-background-color)
   devient lui aussi --dark-purple en thème sombre - un titre en
   --dark-purple y serait donc invisible (même teinte que le fond). Voir le
   même type de correctif déjà appliqué à .modal-header h2 dans
   theme-sombre.css côté Belote. */
.uno-modal h3 {
    margin-top: 0;
    color: var(--main-purple);
}

@keyframes uno-modal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes uno-modal-slide-up {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.uno-color-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.uno-color-choice {
    width: 90px;
    height: 60px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: transform 0.15s;
}

.uno-color-choice:hover {
    transform: scale(1.05);
}

#uno-swap-targets {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

#uno-swap-targets button {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--main-purple);
    background: white;
    color: var(--main-purple);
    font-weight: bold;
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

/* --- Responsive : reste utilisable en portrait mobile (contrairement à la
   Belote, UNO n'a pas besoin d'une table fixe en paysage - une main qui
   passe à la ligne et un empilement vertical suffisent). --- */
@media (max-width: 480px) {
    .uno-card {
        width: 56px;
        height: 84px;
        font-size: 1.3em;
    }
    #uno-app {
        padding: 8px 8px 16px;
    }
}