* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Glissement des jetons entre le pot central et les zones joueurs : chaque
   jeton cliquable porte un view-transition-name dynamique ("gang-token-<etape>-<numero>"),
   attribue en JS. Le navigateur anime alors automatiquement le deplacement
   entre son ancienne et sa nouvelle position au lieu d'un remplacement net. */
::view-transition-group(*) {
    animation-duration: 380ms;
    animation-timing-function: cubic-bezier(0.22, 0.8, 0.28, 1);
}

/* Sans nom explicite, le navigateur traite TOUTE la page comme un seul
   groupe "root" et le fait fonduenchainer (cross-fade) a chaque rendu -
   visible/moche sur un gros changement (ex: 15 joueurs qui apparaissent
   d'un coup). On desactive cette transition par defaut : seuls les
   elements explicitement nommes (les jetons, via applyTokenViewTransitions)
   continuent a s'animer. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: radial-gradient(circle at 50% 0%, #3a2a1c 0%, #1c140d 55%, #120c08 100%);
    color: #f2e6d5;
    min-height: 100vh;
    transition: background 0.3s ease, color 0.3s ease;
}

.hidden {
    display: none !important;
}

.tg-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tg-card {
    background: rgba(30, 20, 12, 0.9);
    border: 1px solid #6b4a26;
    border-radius: 14px;
    padding: 28px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.tg-card h1 {
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: #e8b84b;
    letter-spacing: 0.03em;
}

.tg-logo {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto 8px;
}

.tg-subtitle {
    color: #cbb491;
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.tg-row {
    margin-bottom: 16px;
}

.tg-row label {
    display: block;
    font-size: 0.85rem;
    color: #cbb491;
    margin-bottom: 6px;
}

.tg-row input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #6b4a26;
    background: #14100a;
    color: #f2e6d5;
    font-size: 1rem;
}

.tg-row input[type="range"] {
    width: 100%;
}

.tg-settings-select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #6b4a26;
    background: #14100a;
    color: #f2e6d5;
    font-size: 0.9rem;
}

.tg-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tg-toggle-title {
    font-weight: 600;
    color: #f2e6d5;
}

.tg-hint {
    font-size: 0.78rem;
    color: #9c8563;
}

.tg-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex: none;
}

.tg-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.tg-switch-track {
    position: absolute;
    inset: 0;
    background: #4a3520;
    border-radius: 999px;
    transition: background 0.15s;
}

.tg-switch-track::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #f2e6d5;
    border-radius: 50%;
    transition: transform 0.15s;
}

.tg-switch input:checked + .tg-switch-track {
    background: #b23a3a;
}

.tg-switch input:checked + .tg-switch-track::before {
    transform: translateX(20px);
}

.tg-btn {
    display: inline-block;
    padding: 11px 18px;
    border-radius: 8px;
    border: 1px solid #6b4a26;
    background: #2a1e12;
    color: #f2e6d5;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.tg-btn:hover {
    background: #3a2a1a;
}

.tg-btn-primary {
    width: 100%;
    background: linear-gradient(135deg, #c9962f, #a5731f);
    color: #241a0c;
    font-weight: 700;
    border: none;
}

.tg-btn-primary:hover {
    filter: brightness(1.08);
}

.tg-btn-small {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.tg-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tg-error {
    margin-top: 12px;
    color: #ff8080;
    font-size: 0.85rem;
}

.tg-table-screen {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 12px;
    gap: 12px;
    max-width: 1760px;
    margin: 0 auto;
}

.tg-cross-link {
    margin-top: 16px;
    font-size: 0.82rem;
    color: #9c8563;
    text-align: center;
}

.tg-cross-link a {
    color: #e8b84b;
}

.tg-scoreboard {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tg-scoreboard-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(30, 20, 12, 0.85);
    border: 1px solid #6b4a26;
    border-radius: 10px;
    padding: 10px 14px;
}

.tg-scoreboard-row.tg-scoreboard-row-mine {
    border-color: #e8b84b;
}

.tg-scoreboard-rank {
    font-weight: 700;
    color: #e8b84b;
    width: 24px;
}

.tg-scoreboard-players {
    flex: 1;
    font-size: 0.8rem;
    color: #cbb491;
}

.tg-scoreboard-stats {
    font-size: 0.85rem;
    white-space: nowrap;
}

.tg-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.tg-brand {
    font-size: clamp(1.3rem, 2.3vw, 1.8rem);
    font-weight: 700;
    color: #e8b84b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tg-brand-logo {
    height: clamp(64px, 7vw, 96px);
    width: auto;
}

.tg-badge {
    font-size: 0.65rem;
    background: #b23a3a;
    color: white;
    padding: 3px 8px;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 8px;
}

.tg-spectator-badge {
    background: #315d78;
    border: 1px solid rgba(190, 226, 245, 0.55);
    letter-spacing: 0.08em;
}

.tg-join-spectator {
    width: 100%;
    margin-top: 10px;
}

.tg-heist-tracker {
    display: flex;
    gap: 16px;
}

.tg-vaults, .tg-alarms {
    display: flex;
    gap: 4px;
    align-items: center;
}

.tg-icon {
    width: clamp(26px, 2.6vw, 36px);
    height: clamp(26px, 2.6vw, 36px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.85rem, 1.3vw, 1.1rem);
    border: 1px solid #6b4a26;
}

.tg-icon-vault-on { background: #c9962f; color: #241a0c; }
.tg-icon-vault-off { background: #241a0c; color: #6b4a26; }
.tg-icon-alarm-on { background: #b23a3a; color: white; }
.tg-icon-alarm-off { background: #241a0c; color: #6b4a26; }

.tg-hud-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tg-hud-btn {
    padding: 7px 14px;
    font-size: 0.8rem;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #c9962f, #a5731f);
    color: #241a0c;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.tg-hud-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #2a1e12;
    color: #f2e6d5;
}

.tg-hud-btn-secondary {
    background: #2a1e12;
    border: 1px solid #6b4a26;
    color: #f2e6d5;
    font-weight: 600;
}

/* Quatre pastilles carrees, une par theme (voir le bloc de themes tout en
   haut du fichier) : chacune montre une vraie miniature de sa texture de
   fond (pas juste une couleur unie), avec un liseret dore qui se detache
   sur celle actuellement active. */
.tg-theme-swatches {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.tg-theme-swatch {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    padding: 0;
    background-size: cover;
    background-position: center;
}

.tg-theme-swatch-active {
    border-color: #e8b84b;
    box-shadow: 0 0 0 1px #e8b84b;
}

/* Engrenage "Parametres" (sons/musique) tout a droite de la topbar - meme
   esprit visuel que .tg-info-btn (petit rond discret) mais taille alignee
   sur les autres boutons de la topbar plutot que sur le mini bouton "i". */
.tg-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #6b4a26;
    background: #2a1e12;
    color: #e8b84b;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tg-icon-btn:hover {
    background: #3a2a1a;
}

.tg-players-row {
    display: flex;
    gap: clamp(10px, 1.3vw, 18px);
    flex-wrap: wrap;
    justify-content: center;
}

.tg-player-card {
    background: rgba(30, 20, 12, 0.85);
    border: 1px solid #6b4a26;
    border-radius: 10px;
    padding: clamp(10px, 1.1vw, 16px) clamp(12px, 1.3vw, 18px);
    min-width: clamp(110px, 10vw, 160px);
    text-align: center;
    position: relative;
}

.tg-player-card.tg-player-me {
    border-color: #e8b84b;
}

/* Alarme persistante du reveal : le joueur courant a casse l'ordre par
   rapport a la main immediatement precedente. Elle reste dans son cadre pour
   la lecture finale, avec un clignotement plus fort au moment de la faute. */
.tg-player-order-alarm {
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: 8;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #ffca55;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(116, 19, 28, 0.98) 0 56%, rgba(45, 8, 13, 0.96) 58% 100%);
    border: 2px solid #e8b84b;
    box-shadow: 0 0 0 3px rgba(124, 22, 30, 0.55), 0 5px 16px rgba(0, 0, 0, 0.5);
}

.tg-order-alarm-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.tg-order-alarm-rays {
    opacity: 0.72;
    transform-origin: 32px 32px;
}

.tg-player-order-alarm-live {
    animation: tg-player-alarm-pop 1.05s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.tg-player-order-alarm-live .tg-order-alarm-rays {
    animation: tg-alarm-rays 280ms steps(2, end) 4;
}

@keyframes tg-player-alarm-pop {
    0% { opacity: 0; transform: scale(0.3) rotate(-14deg); }
    18% { opacity: 1; transform: scale(1.35) rotate(12deg); box-shadow: 0 0 0 7px rgba(255, 61, 73, 0.35), 0 0 32px rgba(255, 48, 64, 0.9); }
    38% { transform: scale(0.9) rotate(-9deg); }
    58% { transform: scale(1.14) rotate(7deg); box-shadow: 0 0 0 4px rgba(255, 61, 73, 0.22), 0 0 24px rgba(255, 48, 64, 0.72); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes tg-alarm-rays {
    0%, 100% { opacity: 0.2; transform: scale(0.82); }
    50% { opacity: 1; transform: scale(1.18); }
}

.tg-player-card.tg-player-disconnected {
    opacity: 0.45;
}

.tg-player-card.tg-player-ready {
    box-shadow: 0 0 0 2px #5ba85b;
}

.tg-player-card.tg-player-ready::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #5ba85b;
    color: #0e1c0e;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Siege de la personne visee par un Scan retinien/empreintes pendant la
   devinette : un simple reperage visuel (aucune carte n'est reveleee) pour
   que le groupe sache clairement de qui il discute. */
.tg-player-card.tg-player-scanned {
    box-shadow: 0 0 0 2px #c9962f, 0 0 18px rgba(201, 150, 47, 0.45);
}

.tg-player-card.tg-player-scanned::before {
    content: '🔍';
    position: absolute;
    top: -10px;
    left: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #c9962f;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tg-guess-select {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #6b4a26;
    background: #14100a;
    color: #f2e6d5;
    font-size: 0.9rem;
}

/* Variante compacte pour vivre dans le HUD a cote des coffres/alarmes,
   plutot que dans le bas de l'ecran. */
.tg-hud-guess-select {
    padding: 6px 8px;
    font-size: 0.78rem;
    max-width: 150px;
}

/* Vote(s) affiches directement sur la case du joueur (etape "devinette")
   plutot que dans une liste a part sous le menu deroulant - plus facile de
   relier "qui" a "quel choix" quand c'est ecrit sur son propre rectangle. */
.tg-player-votes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-bottom: 6px;
}

.tg-player-vote-chip {
    background: rgba(232, 184, 75, 0.15);
    border: 1px solid #6b4a26;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #e8b84b;
}

.tg-player-vote-pending {
    background: transparent;
    border-style: dashed;
    color: #6b4a26;
    font-weight: 400;
}

.tg-player-name {
    font-size: clamp(0.85rem, 1.2vw, 1.05rem);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-token {
    width: clamp(34px, 3.4vw, 50px);
    height: clamp(34px, 3.4vw, 50px);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: clamp(0.95rem, 1.4vw, 1.25rem);
    font-family: inherit;
    border: 2px solid rgba(0, 0, 0, 0.3);
    padding: 0;
    margin: 0;
}

.tg-token-empty {
    background: transparent;
    border: 2px dashed #6b4a26;
    color: #6b4a26;
}

.tg-token-white { background: #f2e6d5; color: #241a0c; }
.tg-token-yellow { background: #e8c94b; color: #241a0c; }
.tg-token-orange { background: #e08a3c; color: #241a0c; }
.tg-token-red { background: #c23636; color: white; }

.tg-token-clickable {
    cursor: pointer;
    transition: transform 0.1s;
}

.tg-token-clickable:hover {
    transform: scale(1.08);
}

.tg-token-mine {
    box-shadow: 0 0 0 3px #e8b84b;
}

.tg-token-locked {
    box-shadow: 0 0 0 3px #b23a3a;
    cursor: not-allowed;
}

/* Historique des jetons deja decides (etapes precedentes), affiche en petit
   au-dessus du grand jeton de l'etape en cours - voir Player.png de reference. */
.tg-token-history {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 6px;
}

.tg-token-mini {
    width: clamp(18px, 2vw, 26px);
    height: clamp(18px, 2vw, 26px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: clamp(0.6rem, 0.95vw, 0.78rem);
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.tg-token-mini-empty {
    background: transparent;
    border: 1px dashed #6b4a26;
    color: #6b4a26;
}

.tg-token-pool {
    display: flex;
    gap: clamp(12px, 1.4vw, 20px);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 34px;
}

.tg-main-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.tg-sabotage-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 172px;
    flex: none;
}

.tg-main-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#tgTableArea {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tg-sabotage-card {
    background: #1c1410;
    border: 1px solid #b23a3a;
    border-radius: 10px;
    padding: 10px;
}

.tg-sabotage-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tg-sabotage-icon {
    width: 26px;
    height: 26px;
    flex: none;
    color: #e8b84b;
}

.tg-sabotage-name {
    color: #e8b84b;
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1.25;
}

.tg-sabotage-desc {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    font-size: 0.72rem;
    color: #cbb491;
    line-height: 1.35;
    margin-top: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
}

.tg-sabotage-card:hover .tg-sabotage-desc,
.tg-sabotage-card:focus-within .tg-sabotage-desc {
    max-height: 140px;
    opacity: 1;
    margin-top: 8px;
}

.tg-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.tg-community {
    display: flex;
    gap: clamp(8px, 1vw, 14px);
    min-height: 84px;
}

.tg-card-face {
    width: clamp(54px, 6.6vw, 92px);
    height: clamp(76px, 9.3vw, 130px);
    background: #f7f0e4;
    color: #1c1410;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(4px, 0.5vw, 8px) clamp(6px, 0.7vw, 10px);
    font-weight: 700;
    font-size: clamp(0.9rem, 1.6vw, 1.2rem);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.tg-card-face.tg-suit-red { color: #b23030; }
.tg-card-face .tg-card-suit-big {
    font-size: clamp(1.3rem, 2.3vw, 1.8rem);
    align-self: center;
}

/* L'illustration (sprite SVG-cards) dessine deja son propre fond blanc, sa
   bordure et son rang/couleur dans les coins - c'est une carte a jouer
   complete a elle seule. Ajouter notre propre fond/bordure/texte par-dessus
   ne ferait que dupliquer visuellement une "carte dans la carte" et rendre
   tout moins lisible : le conteneur devient donc transparent, sans padding,
   et l'illustration occupe la quasi-totalite de l'espace disponible. */
.tg-card-face-illustrated {
    background: transparent;
    box-shadow: none;
    padding: 0;
    justify-content: center;
    align-items: center;
}

.tg-card-illustration {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tg-mini-card-illustrated,
.tg-reveal-spotlight-card-illustrated {
    align-items: center;
    justify-content: center;
}

.tg-mini-card-illustrated .tg-card-illustration,
.tg-reveal-spotlight-card-illustrated .tg-card-illustration {
    width: 100%;
    height: 100%;
}

/* Meme logique pour les conteneurs "exterieurs" (case de main, dos de carte
   retourne, grande carte du spotlight) : leur propre fond/bordure ne sert
   plus a rien des qu'ils accueillent une illustration deja auto-suffisante.
   Le liseret dore de .tg-mini-card-own reste (c'est un vrai indicateur "a
   vous", pas un cadre de carte), seul son fond disparait. */
.tg-mini-card-own:has(.tg-mini-card-illustrated) {
    background: transparent;
}

.tg-flip-face-revealed:has(.tg-mini-card-illustrated) {
    background: transparent;
}

.tg-reveal-spotlight-face-front:has(.tg-reveal-spotlight-card-illustrated) {
    background: transparent;
    border: none;
}

.tg-info-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #9c8563;
    color: #9c8563;
    font-size: 0.7rem;
    font-style: italic;
    cursor: pointer;
    flex: none;
}

.tg-info-popover {
    position: absolute;
    left: 50%;
    top: 26px;
    transform: translateX(-50%);
    width: 260px;
    max-width: calc(100vw - 24px);
    background: #1c1410;
    border: 1px solid #6b4a26;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    text-align: left;
}

.tg-info-btn.tg-info-open .tg-info-popover {
    opacity: 1;
    pointer-events: auto;
}

.tg-ranking-title {
    color: #e8b84b;
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 6px;
    text-align: center;
}

.tg-ranking-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: #9c8563;
    margin-bottom: 6px;
}

.tg-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.tg-ranking-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    padding: 3px 6px;
}

.tg-ranking-cards {
    display: flex;
    gap: 2px;
}

.tg-rk-card {
    width: 20px;
    height: 28px;
    background: #f7f0e4;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #1c1410;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    flex: none;
}

.tg-rk-card.tg-suit-red {
    color: #b23030;
}

.tg-rk-card-suit {
    font-size: 0.6rem;
}

.tg-ranking-name {
    font-size: 0.72rem;
    color: #f2e6d5;
    font-weight: 600;
}

.tg-mini-cards {
    display: flex;
    gap: 3px;
    justify-content: center;
    margin-bottom: 6px;
}

/* Ta propre main : toujours face visible (le serveur ne t'envoie de toute
   facon jamais les cartes des autres). Nettement plus grande que les
   anciens dos de cartes adverses auxquels elle s'alignait avant - les
   adversaires n'affichent plus rien du tout avant la revelation (voir
   renderPlayers), donc plus aucune raison de rester petite pour "rester
   coherente" avec une rangee qui n'existe plus. */
.tg-mini-card-own {
    width: clamp(46px, 5vw, 70px);
    height: clamp(64px, 7vw, 98px);
    background: #f7f0e4;
    border-radius: 4px;
    box-shadow: 0 0 0 2px #e8b84b;
    transition: width 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
}

/* Notre main quand elle est justement celle visee par un Scan (retinien ou
   empreintes) : agrandie encore pour la relire clairement au moment ou tout
   repose dessus, sans rien reveler a personne d'autre (c'est deja notre
   propre main). */
.tg-mini-card-own.tg-mini-card-own-focus {
    width: clamp(64px, 7vw, 96px);
    height: clamp(90px, 9.8vw, 136px);
    box-shadow: 0 0 0 3px #c9962f, 0 0 16px rgba(201, 150, 47, 0.55);
}

/* Mains des AUTRES joueurs une fois revelees (voir markSeatRevealed) :
   restee a l'ancienne taille "dos de carte" pendant plusieurs rounds
   d'agrandissement qui n'ont touche que .tg-mini-card-own (sa propre main) -
   les joueurs se plaignaient de ne pas voir les mains reveleees des autres.
   Alignee sur la meme echelle que sa propre main pour que tout le monde soit
   lisible pareil au moment du reveal. */
.tg-flip-card {
    width: clamp(46px, 5vw, 70px);
    height: clamp(64px, 7vw, 98px);
    perspective: 300px;
}

.tg-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

.tg-flip-card.tg-flipped .tg-flip-inner {
    transform: rotateY(180deg);
}

.tg-flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 4px;
    overflow: hidden;
}

.tg-flip-face-back {
    background-image: url('/images/gang/cartes_png/back_card.png');
    background-size: cover;
    background-position: center;
}

.tg-flip-face-revealed {
    transform: rotateY(180deg);
    background: #f7f0e4;
}

.tg-mini-card-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #1c1410;
    font-weight: 700;
    font-size: clamp(0.6rem, 0.95vw, 0.8rem);
    line-height: 1;
    gap: 1px;
}

.tg-mini-card-content.tg-suit-red {
    color: #b23030;
}

.tg-mini-card-suit {
    font-size: clamp(0.85rem, 1.2vw, 1.05rem);
}

.tg-player-hand-desc {
    font-size: clamp(0.78rem, 1.05vw, 0.95rem);
    color: #e8b84b;
    min-height: 16px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Double chevron : notre propre main vient de s'ameliorer par rapport a
   l'etape precedente (ex: carte haute -> paire au flop). Visible seulement
   par nous - c'est toujours notre propre etiquette de main. */
.tg-hand-up-arrow {
    width: 0.85em;
    height: 0.85em;
    color: #5ba85b;
    flex: none;
}

.tg-lobby-host-controls {
    background: rgba(20, 16, 10, 0.85);
    border: 1px solid #6b4a26;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0 auto 16px;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tg-lobby-host-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #e8b84b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tg-lobby-host-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tg-lobby-host-row label {
    font-size: 0.85rem;
    color: #f2e6d5;
    flex: none;
}

.tg-lobby-host-row input[type="range"] {
    flex: 1;
    min-width: 120px;
}

.tg-lobby-player-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tg-lobby-player-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid #4a3620;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.85rem;
}

.tg-kick-btn {
    background: #6b2323;
    border: 1px solid #a13a3a;
    color: #ffdada;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    line-height: 1;
    font-size: 0.85rem;
    cursor: pointer;
    flex: none;
}

.tg-kick-btn:hover {
    background: #8a2e2e;
}

.tg-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.tg-log-panel {
    display: flex;
    flex-direction: column;
    background: rgba(20, 16, 10, 0.85);
    border: 1px solid #6b4a26;
    border-radius: 10px;
    overflow: hidden;
}

.tg-log-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: #cbb491;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.tg-log-toggle:hover {
    color: #e8b84b;
}

.tg-log-toggle-badge {
    background: #b23a3a;
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.tg-log-toggle-icon {
    margin-left: auto;
    transition: transform 0.2s;
}

.tg-log-panel.tg-log-expanded .tg-log-toggle-icon {
    transform: rotate(180deg);
}

.tg-log-body {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.tg-log-panel.tg-log-expanded .tg-log-body {
    max-height: 260px;
    border-top: 1px solid #6b4a26;
}

.tg-log {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tg-log-entry-system {
    color: #9c8563;
    font-style: italic;
}

.tg-log-entry-chat {
    color: #f2e6d5;
}

.tg-chat-form {
    display: flex;
    border-top: 1px solid #6b4a26;
}

.tg-chat-form input {
    flex: 1;
    padding: 10px 12px;
    background: #14100a;
    border: none;
    color: #f2e6d5;
}

.tg-chat-form button {
    border-radius: 0;
    border: none;
    border-left: 1px solid #6b4a26;
}

/* Bandeau de fin de partie (victoire/defaite) : contrairement a l'ancien
   overlay plein ecran, il ne masque plus jamais la table - tout le monde
   garde la vue d'ensemble du dernier reveal, l'hote a juste un bouton pour
   relancer sans avoir a recreer un lien. */
.tg-end-banner {
    position: fixed;
    top: 74px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(20, 16, 10, 0.94);
    border: 1px solid #e8b84b;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 700;
    /* Fond toujours sombre quel que soit le theme actif (comme les autres
       panneaux flottants, ex. .tg-sabotage-card) : le texte reste donc
       toujours clair, jamais la couleur sombre-sur-clair heritee du theme. */
    color: #f2e6d5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    max-width: calc(100vw - 24px);
    flex-wrap: wrap;
    justify-content: center;
}

.tg-toast {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #b23a3a;
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    z-index: 50;
}

/* Sequence de reveal du showdown : assombrit tout sauf la table (joueurs +
   plateau) pour concentrer l'attention pendant le suspense, pendant qu'un
   ticker liste les mains au fur et a mesure puis le verdict flashe en grand. */
body.tg-revealing {
    background: radial-gradient(circle at 50% 0%, #1c130c 0%, #0d0906 55%, #060402 100%);
    transition: background 0.8s ease;
}

body.tg-revealing .tg-sabotage-sidebar,
body.tg-revealing .tg-actions,
body.tg-revealing .tg-log-panel,
body.tg-revealing .tg-topbar {
    filter: brightness(0.25) saturate(0.5);
    transition: filter 0.7s ease;
    pointer-events: none;
}

/* Ne jamais filtrer .tg-players-row lui-meme : filter lui faisait creer un
   nouveau containing block de hauteur nulle. Tous les sieges absolus se
   retrouvaient alors assembles sur une seule ligne pendant le reveal. */
body.tg-revealing .tg-player-card {
    filter: drop-shadow(0 0 24px rgba(232, 184, 75, 0.18));
    transition: filter 0.7s ease;
}

body.tg-revealing .tg-board {
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* Spotlight de reveal : un joueur a la fois, ses cartes grandissent au
   centre, se retournent, affichent leur categorie de main, puis retrecissent
   et repartent dans son siege avant de passer au joueur suivant. */
.tg-reveal-spotlight {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: none;
    /* Panneau de fond : sans lui, les cartes agrandies se melangent
       visuellement avec le plateau/cartes communes juste en-dessous, qui
       occupent le meme centre d'ecran. */
    background: rgba(18, 13, 8, 0.96);
    border: 1px solid rgba(232, 184, 75, 0.28);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
    padding: 46px 70px;
    border-radius: 28px;
}

/* Meme sous les themes clairs, ce panneau reste sombre (c'est le but : faire
   ressortir les cartes agrandies) - mais teinte de la couleur du theme actif
   plutot qu'un noir/brun neutre qui jurait avec le reste de la page. */
html[data-theme="vert"] .tg-reveal-spotlight { background: rgba(12, 25, 16, 0.97); }
html[data-theme="bleu"] .tg-reveal-spotlight { background: rgba(10, 18, 31, 0.97); }
html[data-theme="gris"] .tg-reveal-spotlight { background: rgba(22, 22, 25, 0.97); }
html[data-theme="rose"] .tg-reveal-spotlight { background: rgba(34, 13, 20, 0.97); }

.tg-reveal-spotlight-name {
    font-size: clamp(1.1rem, 2.6vw, 1.6rem);
    font-weight: 800;
    color: #e8b84b;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.tg-reveal-spotlight-name-visible {
    opacity: 1;
    transform: translateY(0);
}

.tg-reveal-spotlight-cards {
    display: flex;
    gap: 16px;
}

.tg-reveal-spotlight-flip {
    width: clamp(70px, 9vw, 108px);
    height: clamp(98px, 12.6vw, 151px);
    perspective: 900px;
    transform: scale(0.3);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}

.tg-reveal-spotlight-flip-grown {
    transform: scale(1);
    opacity: 1;
}

.tg-reveal-spotlight-flip-shrink {
    transform: scale(0.3);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.45s ease;
}

.tg-reveal-spotlight-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.3, 0.1, 0.3, 1);
}

.tg-reveal-spotlight-flip.tg-flipped .tg-reveal-spotlight-flip-inner {
    transform: rotateY(180deg);
}

.tg-reveal-spotlight-face {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.tg-reveal-spotlight-face-back {
    background-image: url('/images/gang/cartes_png/back_card.png');
    background-size: cover;
    background-position: center;
}

.tg-reveal-spotlight-face-front {
    background: #f7f0e4;
    border: 2px solid #d8c8a0;
    transform: rotateY(180deg);
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    font-weight: 800;
    flex-direction: column;
    gap: 2px;
}

.tg-reveal-spotlight-desc {
    font-size: clamp(1rem, 2.4vw, 1.35rem);
    font-weight: 700;
    color: #f2e6d5;
    background: rgba(20, 16, 10, 0.85);
    border: 1px solid #6b4a26;
    border-radius: 999px;
    padding: 8px 24px;
    opacity: 0;
    transform: translateY(10px) scale(0.92);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    white-space: nowrap;
}

.tg-reveal-spotlight-desc-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Signal bref au centre au moment exact ou deux mains consecutives ne sont
   plus dans le bon ordre. Le badge de siege prend ensuite le relais. */
.tg-reveal-order-alarm {
    position: absolute;
    top: 34%;
    right: -42px;
    z-index: 4;
    width: 94px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #ffd05d;
    opacity: 0;
    transform: scale(0.35) rotate(-16deg);
    filter: drop-shadow(0 0 14px rgba(255, 44, 58, 0.75));
}

.tg-reveal-order-alarm .tg-order-alarm-svg {
    width: 72px;
    height: 72px;
}

.tg-reveal-order-alarm span {
    padding: 3px 9px;
    color: #fff2d0;
    background: rgba(87, 10, 18, 0.96);
    border: 1px solid #ff6b72;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tg-reveal-order-alarm-live {
    animation: tg-reveal-alarm-flash 1.05s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.tg-reveal-order-alarm-live .tg-order-alarm-rays {
    animation: tg-alarm-rays 240ms steps(2, end) 5;
}

@keyframes tg-reveal-alarm-flash {
    0% { opacity: 0; transform: scale(0.35) rotate(-16deg); }
    16% { opacity: 1; transform: scale(1.28) rotate(12deg); }
    34% { transform: scale(0.92) rotate(-8deg); }
    52% { transform: scale(1.14) rotate(6deg); }
    70% { opacity: 1; transform: scale(1) rotate(-3deg); }
    100% { opacity: 0.92; transform: scale(1) rotate(0); }
}

.tg-reveal-spotlight-card-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #1c1410;
    font-weight: 800;
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    gap: 4px;
}

.tg-reveal-spotlight-card-content.tg-suit-red {
    color: #b23030;
}

.tg-reveal-spotlight-card-suit {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

/* Animation du redessin de main privee (effet Effraction) : les anciennes
   cartes grandissent au centre puis disparaissent, remplacees par les
   nouvelles qui font de meme - visible uniquement par le joueur concerne. */
.tg-reveal-redraw-card {
    transform: scale(0.3);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}

.tg-reveal-redraw-grown {
    transform: scale(1.3);
    opacity: 1;
}

.tg-reveal-redraw-shrink {
    transform: scale(0.3);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.4s ease;
}

.tg-reveal-verdict {
    position: fixed;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.65);
    z-index: 60;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 20px 40px;
    border-radius: 18px;
    opacity: 0;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
    pointer-events: none;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.tg-reveal-verdict-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.tg-reveal-verdict-success {
    color: #ffd873;
    background: radial-gradient(circle, rgba(201, 150, 47, 0.35), transparent 70%);
}

.tg-reveal-verdict-fail {
    color: #ff8a8a;
    background: radial-gradient(circle, rgba(178, 58, 58, 0.4), transparent 70%);
}

.tg-reveal-verdict-fail.tg-reveal-verdict-visible {
    animation: tg-verdict-shake 0.5s ease;
}

.tg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 7, 4, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    padding: 20px;
}

.tg-showdown-card {
    background: #1c1410;
    border: 1px solid #6b4a26;
    border-radius: 14px;
    padding: 24px;
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    text-align: center;
}

.tg-showdown-card h2 {
    color: #e8b84b;
    margin-bottom: 14px;
}

@media (max-width: 720px) {
    .tg-main-layout {
        flex-direction: column;
    }
    .tg-sabotage-sidebar {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .tg-sabotage-card {
        min-width: 160px;
        flex: none;
    }
    .tg-reveal-spotlight {
        max-width: calc(100vw - 16px);
        padding: 38px 34px;
    }
    .tg-reveal-order-alarm {
        top: -38px;
        right: 6px;
        width: 76px;
    }
    .tg-reveal-order-alarm .tg-order-alarm-svg {
        width: 58px;
        height: 58px;
    }
    .tg-player-order-alarm {
        top: -13px;
        right: -10px;
        width: 40px;
        height: 40px;
    }
    /* Le popover "i" (classement des mains) se centre normalement sur son
       propre bouton (18px, quelque part dans la topbar qui wrap) via
       left:50%/translateX(-50%) relatif a lui - correct sur desktop ou le
       bouton a de la marge des deux cotes, mais des que ce bouton finit pres
       du bord droit de la topbar (frequent en layout mobile qui wrap), le
       popover de 260px se retrouve centre sur un point trop pres du bord et
       deborde largement hors ecran. max-width le limitait deja mais sans
       jamais repositionner son centre. Fixe : sous 720px, on l'ancre au
       viewport (position:fixed) plutot qu'au petit bouton qui l'a declenche,
       toujours centre horizontalement quel que soit l'endroit ou "i" atterrit. */
    .tg-info-popover {
        position: fixed;
        left: 50%;
        top: auto;
        bottom: 12px;
        transform: translateX(-50%);
        width: calc(100vw - 24px);
        max-width: 340px;
        max-height: 60vh;
        overflow-y: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tg-reveal-order-alarm-live,
    .tg-player-order-alarm-live,
    .tg-reveal-order-alarm-live .tg-order-alarm-rays,
    .tg-player-order-alarm-live .tg-order-alarm-rays {
        animation-duration: 1ms;
        animation-iteration-count: 1;
    }

}