* {
    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;
}

/* Quatre themes au choix (pastilles du HUD), chacun sur une vraie texture de
   feutrine/table de casino (Art Deco, coins ornes) fournie par Tom plutot
   qu'un degrade CSS plat - vert (par defaut), bleu (marine), gris (anthracite),
   rose (magenta). Toutes sombres avec un texte clair par-dessus (contrairement
   a l'ancienne generation sage/bleu pastel, qui etait a fond clair) : la
   plupart des couleurs de texte "or/creme sur sombre" du theme de base leur
   conviennent donc deja tel quel - on ne surcharge que ce qui doit vraiment
   suivre la teinte (fond, panneaux, accent). Image fixee au viewport pour que
   son cadre orne reste toujours aligne sur les coins de l'ecran, quelle que
   soit la hauteur reelle de la page. */
html[data-theme="vert"] body,
html[data-theme="bleu"] body,
html[data-theme="gris"] body,
html[data-theme="rose"] body {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

html[data-theme="vert"] body { background-image: url('/images/gang/vert.png'); }
html[data-theme="bleu"] body { background-image: url('/images/gang/bleu.png'); }
html[data-theme="gris"] body { background-image: url('/images/gang/gris.png'); }
html[data-theme="rose"] body { background-image: url('/images/gang/rose.png'); }

html[data-theme="vert"] body.tg-revealing { background-image: linear-gradient(rgba(4, 8, 5, 0.6), rgba(4, 8, 5, 0.6)), url('/images/gang/vert.png'); }
html[data-theme="bleu"] body.tg-revealing { background-image: linear-gradient(rgba(3, 6, 10, 0.6), rgba(3, 6, 10, 0.6)), url('/images/gang/bleu.png'); }
html[data-theme="gris"] body.tg-revealing { background-image: linear-gradient(rgba(4, 4, 5, 0.6), rgba(4, 4, 5, 0.6)), url('/images/gang/gris.png'); }
html[data-theme="rose"] body.tg-revealing { background-image: linear-gradient(rgba(9, 3, 5, 0.6), rgba(9, 3, 5, 0.6)), url('/images/gang/rose.png'); }

html[data-theme="vert"] .tg-card,
html[data-theme="vert"] .tg-player-card,
html[data-theme="vert"] .tg-log-panel,
html[data-theme="vert"] .tg-sabotage-card,
html[data-theme="vert"] .tg-info-popover,
html[data-theme="vert"] .tg-showdown-card,
html[data-theme="vert"] .tg-lobby-host-controls,
html[data-theme="vert"] .tg-lobby-player-item {
    background: rgba(16, 26, 18, 0.88);
    border-color: #3f6b46;
}

html[data-theme="bleu"] .tg-card,
html[data-theme="bleu"] .tg-player-card,
html[data-theme="bleu"] .tg-log-panel,
html[data-theme="bleu"] .tg-sabotage-card,
html[data-theme="bleu"] .tg-info-popover,
html[data-theme="bleu"] .tg-showdown-card,
html[data-theme="bleu"] .tg-lobby-host-controls,
html[data-theme="bleu"] .tg-lobby-player-item {
    background: rgba(12, 18, 30, 0.88);
    border-color: #3d5f82;
}

html[data-theme="gris"] .tg-card,
html[data-theme="gris"] .tg-player-card,
html[data-theme="gris"] .tg-log-panel,
html[data-theme="gris"] .tg-sabotage-card,
html[data-theme="gris"] .tg-info-popover,
html[data-theme="gris"] .tg-showdown-card,
html[data-theme="gris"] .tg-lobby-host-controls,
html[data-theme="gris"] .tg-lobby-player-item {
    background: rgba(24, 24, 26, 0.88);
    border-color: #5a5a5e;
}

html[data-theme="rose"] .tg-card,
html[data-theme="rose"] .tg-player-card,
html[data-theme="rose"] .tg-log-panel,
html[data-theme="rose"] .tg-sabotage-card,
html[data-theme="rose"] .tg-info-popover,
html[data-theme="rose"] .tg-showdown-card,
html[data-theme="rose"] .tg-lobby-host-controls,
html[data-theme="rose"] .tg-lobby-player-item {
    background: rgba(34, 14, 20, 0.88);
    border-color: #8a3050;
}

html[data-theme="vert"] .tg-brand,
html[data-theme="vert"] .tg-sabotage-name,
html[data-theme="vert"] .tg-sabotage-icon,
html[data-theme="vert"] .tg-ranking-title,
html[data-theme="vert"] .tg-scoreboard-rank,
html[data-theme="vert"] .tg-lobby-host-title,
html[data-theme="vert"] .tg-card h1,
html[data-theme="vert"] .tg-cross-link a,
html[data-theme="vert"] .tg-player-hand-desc,
html[data-theme="vert"] .tg-showdown-card h2,
html[data-theme="vert"] .tg-log-toggle:hover {
    color: #e8c25a;
}

html[data-theme="bleu"] .tg-brand,
html[data-theme="bleu"] .tg-sabotage-name,
html[data-theme="bleu"] .tg-sabotage-icon,
html[data-theme="bleu"] .tg-ranking-title,
html[data-theme="bleu"] .tg-scoreboard-rank,
html[data-theme="bleu"] .tg-lobby-host-title,
html[data-theme="bleu"] .tg-card h1,
html[data-theme="bleu"] .tg-cross-link a,
html[data-theme="bleu"] .tg-player-hand-desc,
html[data-theme="bleu"] .tg-showdown-card h2,
html[data-theme="bleu"] .tg-log-toggle:hover {
    color: #9fc4e8;
}

html[data-theme="gris"] .tg-brand,
html[data-theme="gris"] .tg-sabotage-name,
html[data-theme="gris"] .tg-sabotage-icon,
html[data-theme="gris"] .tg-ranking-title,
html[data-theme="gris"] .tg-scoreboard-rank,
html[data-theme="gris"] .tg-lobby-host-title,
html[data-theme="gris"] .tg-card h1,
html[data-theme="gris"] .tg-cross-link a,
html[data-theme="gris"] .tg-player-hand-desc,
html[data-theme="gris"] .tg-showdown-card h2,
html[data-theme="gris"] .tg-log-toggle:hover {
    color: #c9a869;
}

html[data-theme="rose"] .tg-brand,
html[data-theme="rose"] .tg-sabotage-name,
html[data-theme="rose"] .tg-sabotage-icon,
html[data-theme="rose"] .tg-ranking-title,
html[data-theme="rose"] .tg-scoreboard-rank,
html[data-theme="rose"] .tg-lobby-host-title,
html[data-theme="rose"] .tg-card h1,
html[data-theme="rose"] .tg-cross-link a,
html[data-theme="rose"] .tg-player-hand-desc,
html[data-theme="rose"] .tg-showdown-card h2,
html[data-theme="rose"] .tg-log-toggle:hover {
    color: #e8a05a;
}

html[data-theme="vert"] .tg-hint,
html[data-theme="vert"] .tg-subtitle,
html[data-theme="vert"] .tg-cross-link,
html[data-theme="vert"] .tg-ranking-scale,
html[data-theme="vert"] .tg-ranking-name,
html[data-theme="vert"] .tg-scoreboard-players,
html[data-theme="vert"] .tg-log-entry-system,
html[data-theme="vert"] .tg-log-entry-chat,
html[data-theme="vert"] .tg-toggle-title,
html[data-theme="vert"] .tg-lobby-host-row label,
html[data-theme="vert"] .tg-row label,
html[data-theme="vert"] .tg-sabotage-desc,
html[data-theme="vert"] .tg-info-btn {
    color: #8fae93;
}

html[data-theme="bleu"] .tg-hint,
html[data-theme="bleu"] .tg-subtitle,
html[data-theme="bleu"] .tg-cross-link,
html[data-theme="bleu"] .tg-ranking-scale,
html[data-theme="bleu"] .tg-ranking-name,
html[data-theme="bleu"] .tg-scoreboard-players,
html[data-theme="bleu"] .tg-log-entry-system,
html[data-theme="bleu"] .tg-log-entry-chat,
html[data-theme="bleu"] .tg-toggle-title,
html[data-theme="bleu"] .tg-lobby-host-row label,
html[data-theme="bleu"] .tg-row label,
html[data-theme="bleu"] .tg-sabotage-desc,
html[data-theme="bleu"] .tg-info-btn {
    color: #7a9ab5;
}

html[data-theme="gris"] .tg-hint,
html[data-theme="gris"] .tg-subtitle,
html[data-theme="gris"] .tg-cross-link,
html[data-theme="gris"] .tg-ranking-scale,
html[data-theme="gris"] .tg-ranking-name,
html[data-theme="gris"] .tg-scoreboard-players,
html[data-theme="gris"] .tg-log-entry-system,
html[data-theme="gris"] .tg-log-entry-chat,
html[data-theme="gris"] .tg-toggle-title,
html[data-theme="gris"] .tg-lobby-host-row label,
html[data-theme="gris"] .tg-row label,
html[data-theme="gris"] .tg-sabotage-desc,
html[data-theme="gris"] .tg-info-btn {
    color: #9a9a9e;
}

html[data-theme="rose"] .tg-hint,
html[data-theme="rose"] .tg-subtitle,
html[data-theme="rose"] .tg-cross-link,
html[data-theme="rose"] .tg-ranking-scale,
html[data-theme="rose"] .tg-ranking-name,
html[data-theme="rose"] .tg-scoreboard-players,
html[data-theme="rose"] .tg-log-entry-system,
html[data-theme="rose"] .tg-log-entry-chat,
html[data-theme="rose"] .tg-toggle-title,
html[data-theme="rose"] .tg-lobby-host-row label,
html[data-theme="rose"] .tg-row label,
html[data-theme="rose"] .tg-sabotage-desc,
html[data-theme="rose"] .tg-info-btn {
    color: #b3818f;
}

html[data-theme="vert"] .tg-info-btn { border-color: #3f6b46; }
html[data-theme="bleu"] .tg-info-btn { border-color: #3d5f82; }
html[data-theme="gris"] .tg-info-btn { border-color: #5a5a5e; }
html[data-theme="rose"] .tg-info-btn { border-color: #8a3050; }

html[data-theme="vert"] .tg-btn,
html[data-theme="vert"] .tg-hud-btn-secondary {
    background: rgba(16, 26, 18, 0.88);
    border-color: #3f6b46;
    color: #f2e6d5;
}

html[data-theme="bleu"] .tg-btn,
html[data-theme="bleu"] .tg-hud-btn-secondary {
    background: rgba(12, 18, 30, 0.88);
    border-color: #3d5f82;
    color: #f2e6d5;
}

html[data-theme="gris"] .tg-btn,
html[data-theme="gris"] .tg-hud-btn-secondary {
    background: rgba(24, 24, 26, 0.88);
    border-color: #5a5a5e;
    color: #f2e6d5;
}

html[data-theme="rose"] .tg-btn,
html[data-theme="rose"] .tg-hud-btn-secondary {
    background: rgba(34, 14, 20, 0.88);
    border-color: #8a3050;
    color: #f2e6d5;
}

html[data-theme="vert"] .tg-btn:hover { background: rgba(30, 46, 32, 0.92); }
html[data-theme="bleu"] .tg-btn:hover { background: rgba(22, 32, 48, 0.92); }
html[data-theme="gris"] .tg-btn:hover { background: rgba(38, 38, 42, 0.92); }
html[data-theme="rose"] .tg-btn:hover { background: rgba(52, 24, 34, 0.92); }

/* Bouton HUD "Suivant" et boutons d'action principale (Lancer le braquage,
   Verrouiller et reveler, Nouvelle partie...) : un degrade dans la teinte du
   theme au lieu du gradient or/brun universel, pour rester "l'action a
   faire" sans jurer avec le fond. Regles -primary placees apres .tg-btn
   pour gagner l'egalite de specificite. */
html[data-theme="vert"] .tg-hud-btn,
html[data-theme="vert"] .tg-btn-primary {
    background: linear-gradient(135deg, #4a7a52, #2f5636);
    color: #eef5ef;
}

html[data-theme="bleu"] .tg-hud-btn,
html[data-theme="bleu"] .tg-btn-primary {
    background: linear-gradient(135deg, #3d6a92, #274a6b);
    color: #eaf2fa;
}

html[data-theme="gris"] .tg-hud-btn,
html[data-theme="gris"] .tg-btn-primary {
    background: linear-gradient(135deg, #6b6b70, #45454a);
    color: #f5f5f6;
}

html[data-theme="rose"] .tg-hud-btn,
html[data-theme="rose"] .tg-btn-primary {
    background: linear-gradient(135deg, #8a3a56, #5c2438);
    color: #faeaee;
}

html[data-theme="vert"] .tg-hud-btn:disabled { background: rgba(16, 26, 18, 0.6); color: #5f8465; }
html[data-theme="bleu"] .tg-hud-btn:disabled { background: rgba(12, 18, 30, 0.6); color: #5a7fa0; }
html[data-theme="gris"] .tg-hud-btn:disabled { background: rgba(24, 24, 26, 0.6); color: #7a7a7e; }
html[data-theme="rose"] .tg-hud-btn:disabled { background: rgba(34, 14, 20, 0.6); color: #a05068; }

html[data-theme="vert"] .tg-row input[type="text"],
html[data-theme="vert"] .tg-chat-form input,
html[data-theme="vert"] .tg-guess-select,
html[data-theme="vert"] .tg-hud-guess-select {
    background: rgba(8, 14, 10, 0.85);
    color: #f2e6d5;
    border-color: #3f6b46;
}

html[data-theme="bleu"] .tg-row input[type="text"],
html[data-theme="bleu"] .tg-chat-form input,
html[data-theme="bleu"] .tg-guess-select,
html[data-theme="bleu"] .tg-hud-guess-select {
    background: rgba(6, 10, 18, 0.85);
    color: #f2e6d5;
    border-color: #3d5f82;
}

html[data-theme="gris"] .tg-row input[type="text"],
html[data-theme="gris"] .tg-chat-form input,
html[data-theme="gris"] .tg-guess-select,
html[data-theme="gris"] .tg-hud-guess-select {
    background: rgba(14, 14, 15, 0.85);
    color: #f2e6d5;
    border-color: #5a5a5e;
}

html[data-theme="rose"] .tg-row input[type="text"],
html[data-theme="rose"] .tg-chat-form input,
html[data-theme="rose"] .tg-guess-select,
html[data-theme="rose"] .tg-hud-guess-select {
    background: rgba(18, 8, 11, 0.85);
    color: #f2e6d5;
    border-color: #8a3050;
}

html[data-theme="vert"] .tg-player-vote-chip { background: rgba(232, 194, 90, 0.15); border-color: #3f6b46; }
html[data-theme="bleu"] .tg-player-vote-chip { background: rgba(159, 196, 232, 0.15); border-color: #3d5f82; }
html[data-theme="gris"] .tg-player-vote-chip { background: rgba(201, 168, 105, 0.15); border-color: #5a5a5e; }
html[data-theme="rose"] .tg-player-vote-chip { background: rgba(232, 160, 90, 0.15); border-color: #8a3050; }

html[data-theme="vert"] .tg-icon,
html[data-theme="vert"] .tg-token-empty,
html[data-theme="vert"] .tg-token-mini-empty { border-color: #3f6b46; }

html[data-theme="bleu"] .tg-icon,
html[data-theme="bleu"] .tg-token-empty,
html[data-theme="bleu"] .tg-token-mini-empty { border-color: #3d5f82; }

html[data-theme="gris"] .tg-icon,
html[data-theme="gris"] .tg-token-empty,
html[data-theme="gris"] .tg-token-mini-empty { border-color: #5a5a5e; }

html[data-theme="rose"] .tg-icon,
html[data-theme="rose"] .tg-token-empty,
html[data-theme="rose"] .tg-token-mini-empty { border-color: #8a3050; }

html[data-theme="vert"] .tg-icon-vault-off,
html[data-theme="vert"] .tg-icon-alarm-off { background: rgba(16, 26, 18, 0.7); color: #5f8465; }

html[data-theme="bleu"] .tg-icon-vault-off,
html[data-theme="bleu"] .tg-icon-alarm-off { background: rgba(12, 18, 30, 0.7); color: #5a7fa0; }

html[data-theme="gris"] .tg-icon-vault-off,
html[data-theme="gris"] .tg-icon-alarm-off { background: rgba(24, 24, 26, 0.7); color: #7a7a7e; }

html[data-theme="rose"] .tg-icon-vault-off,
html[data-theme="rose"] .tg-icon-alarm-off { background: rgba(34, 14, 20, 0.7); color: #a05068; }

html[data-theme="vert"] #tgTableArea.tg-table-circular::before {
    background: radial-gradient(ellipse at center, rgba(50, 100, 60, 0.28) 0%, rgba(30, 60, 35, 0.1) 72%, transparent 100%);
    border-color: rgba(63, 107, 70, 0.3);
}

html[data-theme="bleu"] #tgTableArea.tg-table-circular::before {
    background: radial-gradient(ellipse at center, rgba(45, 85, 120, 0.28) 0%, rgba(25, 45, 65, 0.1) 72%, transparent 100%);
    border-color: rgba(61, 95, 130, 0.3);
}

html[data-theme="gris"] #tgTableArea.tg-table-circular::before {
    background: radial-gradient(ellipse at center, rgba(90, 90, 94, 0.28) 0%, rgba(45, 45, 48, 0.1) 72%, transparent 100%);
    border-color: rgba(90, 90, 94, 0.3);
}

html[data-theme="rose"] #tgTableArea.tg-table-circular::before {
    background: radial-gradient(ellipse at center, rgba(138, 48, 80, 0.28) 0%, rgba(70, 25, 40, 0.1) 72%, transparent 100%);
    border-color: rgba(138, 48, 80, 0.3);
}

html[data-theme="vert"] body.tg-revealing .tg-sabotage-sidebar,
html[data-theme="vert"] body.tg-revealing .tg-actions,
html[data-theme="vert"] body.tg-revealing .tg-log-panel,
html[data-theme="vert"] body.tg-revealing .tg-topbar,
html[data-theme="bleu"] body.tg-revealing .tg-sabotage-sidebar,
html[data-theme="bleu"] body.tg-revealing .tg-actions,
html[data-theme="bleu"] body.tg-revealing .tg-log-panel,
html[data-theme="bleu"] body.tg-revealing .tg-topbar,
html[data-theme="gris"] body.tg-revealing .tg-sabotage-sidebar,
html[data-theme="gris"] body.tg-revealing .tg-actions,
html[data-theme="gris"] body.tg-revealing .tg-log-panel,
html[data-theme="gris"] body.tg-revealing .tg-topbar,
html[data-theme="rose"] body.tg-revealing .tg-sabotage-sidebar,
html[data-theme="rose"] body.tg-revealing .tg-actions,
html[data-theme="rose"] body.tg-revealing .tg-log-panel,
html[data-theme="rose"] body.tg-revealing .tg-topbar {
    filter: brightness(0.4) saturate(0.6);
}

.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;
}

/* Au-dela de 6 joueurs, la rangee qui deborde sur 2 lignes devient illisible :
   on passe en disposition circulaire (table de poker), chaque carte joueur
   positionnee en pourcentage sur une ellipse calculee en JS, avec le plateau
   (cartes communes + pot) au centre. */
#tgTableArea.tg-table-circular {
    display: block;
    position: relative;
    /* Largeur relative au conteneur (pas a la fenetre) : "97vw" ignorait la
       barre laterale des cartes Effraction en mode Gangster, l'anneau
       essayait alors de prendre presque toute la largeur de l'ECRAN par-dessus
       une sidebar deja presente a cote de lui - c'etait le vrai chevauchement
       "GANGSTER" signale par Tom. .tg-main-column a deja min-width:0, donc
       100% ici respecte correctement l'espace reellement disponible. */
    width: 100%;
    max-width: 1400px;
    height: clamp(420px, 46vw, 700px);
    /* Les cartes du haut debordent legerement du rayon vertical declare
       (elles sont centrees sur leur point, pas contenues dedans), et votre
       propre siege fixe deborde carrement sous le conteneur (voir
       .tg-player-me plus bas) : on ajoute de la marge pour que rien
       n'aille chevaucher le contenu suivant. */
    margin: 70px auto 150px;
}

#tgTableArea.tg-table-circular::before {
    content: '';
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(60, 38, 16, 0.4) 0%, rgba(20, 14, 8, 0.15) 72%, transparent 100%);
    border: 1px solid rgba(232, 184, 75, 0.15);
    z-index: 0;
}

.tg-table-circular .tg-player-card {
    position: absolute;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 1;
}

/* Votre propre siege n'est jamais pris dans la rotation des adversaires :
   il reste fixe en bas du centre, comme sur une table de poker en ligne
   classique - ca degage l'arc du haut pour les autres et laisse la place
   d'agrandir votre propre siege sans risquer d'en chevaucher un autre. */
.tg-table-circular .tg-player-card.tg-player-me {
    left: 50%;
    top: auto;
    bottom: -40px;
    transform: translateX(-50%);
    z-index: 3;
    min-width: clamp(150px, 15vw, 230px);
    padding: clamp(14px, 1.6vw, 22px) clamp(16px, 1.8vw, 26px);
}

/* Le siege fixe a de la place a revendre : vos propres cartes s'y affichent
   encore plus grandes que la taille (deja agrandie) utilisee partout ailleurs. */
.tg-table-circular .tg-player-me .tg-mini-card-own {
    width: clamp(58px, 6.2vw, 88px);
    height: clamp(80px, 8.6vw, 124px);
}

/* Meme dans ce siege deja agrandi, le focus "Scan" (voir plus haut) doit
   rester le maximum visuel possible - regle placee apres pour gagner
   l'egalite de specificite avec la regle precedente. */
.tg-table-circular .tg-player-me .tg-mini-card-own-focus {
    width: clamp(70px, 7.6vw, 108px);
    height: clamp(98px, 10.6vw, 152px);
}

.tg-table-circular .tg-board {
    position: absolute;
    left: 50%;
    /* Le pot reste dans la moitie haute du centre afin de ne jamais entrer
       dans le siege fixe du joueur local, plus haut que les autres cases. */
    top: 43%;
    transform: translate(-50%, -50%);
    /* Une largeur suffisante garde jusqu'a 15 jetons sur une seule ligne aux
       resolutions courantes. L'ancienne limite de 420px les repliait jusque
       sous la case du joueur local. */
    width: min(82%, 1040px);
    z-index: 1;
}

.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:hover .tg-info-popover,
.tg-info-btn:focus .tg-info-popover,
.tg-info-btn:focus-within .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;
}

/* Celebration de reussite : le voleur lance le sac dans la porte arriere,
   saute dans la camionnette, puis le vehicule quitte l'ecran. Les deux
   illustrations sont des cutouts generes pour ce jeu ; la trajectoire et le
   rythme restent entierement controles en CSS. */
.tg-success-escape {
    position: fixed;
    inset: 0;
    z-index: 58;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to bottom, transparent 36%, rgba(12, 7, 7, 0.12) 58%, rgba(8, 4, 5, 0.72) 100%);
}

.tg-success-escape-stage {
    position: absolute;
    left: 50%;
    bottom: clamp(8px, 3vh, 34px);
    width: min(1120px, 100vw);
    height: clamp(230px, 39vh, 360px);
    transform: translateX(-50%);
}

.tg-success-road {
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: 1%;
    height: 22%;
    border-top: 2px solid rgba(232, 184, 75, 0.34);
    background: linear-gradient(to bottom, rgba(36, 18, 20, 0.75), rgba(10, 6, 7, 0.96));
    transform: perspective(260px) rotateX(58deg);
    transform-origin: bottom;
}

.tg-success-road::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    height: 4px;
    background: repeating-linear-gradient(90deg, transparent 0 7%, rgba(232, 184, 75, 0.78) 7% 12%);
}

.tg-success-van,
.tg-success-thief {
    position: absolute;
    display: block;
    user-select: none;
    opacity: 0;
    will-change: left, transform, opacity;
}

.tg-success-van {
    z-index: 3;
    left: 51%;
    bottom: 5%;
    width: clamp(310px, 45vw, 620px);
}

.tg-success-thief {
    z-index: 4;
    left: -25%;
    bottom: 7%;
    width: clamp(170px, 25vw, 330px);
}

.tg-success-bag {
    position: absolute;
    z-index: 6;
    left: -2%;
    bottom: 27%;
    width: clamp(34px, 4.2vw, 56px);
    aspect-ratio: 1 / 0.92;
    display: grid;
    place-items: center;
    color: #5a3516;
    background: linear-gradient(145deg, #f2d18c, #b97835 72%);
    border: 2px solid #7b451c;
    border-radius: 48% 48% 42% 42% / 42% 42% 56% 56%;
    box-shadow: inset 7px 4px 10px rgba(255, 245, 187, 0.35), 0 8px 14px rgba(0, 0, 0, 0.4);
    font-size: clamp(0.8rem, 1.8vw, 1.25rem);
    font-weight: 1000;
    opacity: 0;
    will-change: left, bottom, transform, opacity;
}

.tg-success-bag::before {
    content: '';
    position: absolute;
    top: -22%;
    left: 29%;
    width: 42%;
    height: 30%;
    background: #d29b55;
    border: 2px solid #7b451c;
    transform: rotate(45deg);
    border-radius: 4px 50% 4px 50%;
}

.tg-success-speed-lines {
    position: absolute;
    z-index: 2;
    left: 42%;
    right: 0;
    bottom: 18%;
    height: 40%;
    opacity: 0;
    background: repeating-linear-gradient(175deg, transparent 0 15px, rgba(255, 216, 115, 0.54) 16px 19px, transparent 20px 34px);
    filter: blur(1px);
}

.tg-success-escape-active {
    animation: tg-success-scene 5.05s ease both;
}

.tg-success-escape-active .tg-success-van {
    animation: tg-getaway-van 5.05s linear both;
}

.tg-success-escape-active .tg-success-thief {
    animation: tg-getaway-thief 5.05s linear both;
}

.tg-success-escape-active .tg-success-bag {
    animation: tg-getaway-bag 5.05s cubic-bezier(0.25, 0.55, 0.38, 1) both;
}

.tg-success-escape-active .tg-success-speed-lines {
    animation: tg-getaway-speed-lines 5.05s ease both;
}

@keyframes tg-success-scene {
    0% { opacity: 0; }
    7%, 88% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes tg-getaway-van {
    0% { opacity: 0; transform: translateX(20vw) scale(0.92); }
    9% { opacity: 1; transform: translateX(0) scale(1); }
    58% { opacity: 1; transform: translateX(0) scale(1); }
    64% { transform: translateX(2vw) translateY(2px) rotate(0.5deg); }
    69% { transform: translateX(-1vw) translateY(-2px) rotate(-0.6deg); }
    100% { opacity: 1; transform: translateX(86vw) scale(0.92) rotate(1deg); }
}

@keyframes tg-getaway-thief {
    0% { left: -25%; opacity: 0; transform: translateY(0) scale(0.92) rotate(-2deg); }
    7% { opacity: 1; }
    14% { left: -8%; transform: translateY(-5px) scale(0.95) rotate(1deg); }
    22% { left: 5%; transform: translateY(3px) scale(0.98) rotate(-1deg); }
    30% { left: 17%; transform: translateY(-7px) scale(1) rotate(1deg); }
    39% { left: 29%; opacity: 1; transform: translateY(2px) scale(0.96) rotate(-1deg); }
    49% { left: 42%; opacity: 0.9; transform: translateY(9px) scale(0.72) rotate(4deg); }
    56%, 100% { left: 50%; opacity: 0; transform: translateY(18px) scale(0.18) rotate(8deg); }
}

@keyframes tg-getaway-bag {
    0% { left: -2%; bottom: 27%; opacity: 0; transform: rotate(-12deg) scale(0.8); }
    8% { opacity: 1; }
    22% { left: 15%; bottom: 34%; transform: rotate(4deg) scale(1); }
    34% { left: 34%; bottom: 68%; transform: rotate(155deg) scale(1.08); }
    46% { left: 51%; bottom: 43%; opacity: 1; transform: rotate(300deg) scale(0.86); }
    53%, 100% { left: 55%; bottom: 24%; opacity: 0; transform: rotate(380deg) scale(0.42); }
}

@keyframes tg-getaway-speed-lines {
    0%, 60% { opacity: 0; transform: translateX(0); }
    70% { opacity: 0.65; }
    100% { opacity: 0; transform: translateX(42vw); }
}

@keyframes tg-verdict-shake {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    20% { transform: translate(-53%, -50%) scale(1.03); }
    40% { transform: translate(-47%, -50%) scale(1.03); }
    60% { transform: translate(-52%, -50%) scale(1.02); }
    80% { transform: translate(-48%, -50%) scale(1.02); }
}

.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;
    }
    .tg-success-escape-stage {
        height: 260px;
    }
    .tg-success-van {
        left: 38%;
        width: 310px;
    }
    .tg-success-thief {
        width: 170px;
    }
    /* 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;
    }
    .tg-success-escape-active,
    .tg-success-escape-active .tg-success-van,
    .tg-success-escape-active .tg-success-thief,
    .tg-success-escape-active .tg-success-bag,
    .tg-success-escape-active .tg-success-speed-lines {
        animation-duration: 1ms;
        animation-iteration-count: 1;
    }
}