*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:'Segoe UI',Arial,sans-serif;background:linear-gradient(135deg,#0a1628,#1a2a1a,#0d2818);min-height:100vh;overflow:hidden;color:#fff}

.setup{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}
.setup h1{font-size:2.5rem;background:linear-gradient(90deg,#ff6b6b,#ffd93d,#6bcb77);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.setup .sub{color:#888;margin-bottom:20px}
.setup-box{background:rgba(255,255,255,0.05);padding:25px;border-radius:20px;text-align:center;border:1px solid rgba(255,255,255,0.1)}
.setup-box input{padding:10px;font-size:1.1rem;border-radius:10px;border:2px solid rgba(255,255,255,0.2);background:rgba(0,0,0,0.3);color:white;width:70px;text-align:center;margin:0 8px}
.btn{padding:14px 35px;font-size:1rem;font-weight:bold;border:none;border-radius:25px;cursor:pointer;margin:8px;transition:all 0.3s;background:linear-gradient(135deg,#667eea,#764ba2);color:white;box-shadow:0 4px 20px rgba(102,126,234,0.4)}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.btn-secondary{background:linear-gradient(135deg,#ff6b6b,#ffd93d);color:#1a1a2e}
.btn-secondary:hover{transform:translateY(-2px) scale(1.02)}
.btn-distrait{background:linear-gradient(135deg,#ff4757,#ff6348);color:white;font-size:0.85rem;padding:10px 20px;animation:pulse-distrait 1.5s infinite}
@keyframes pulse-distrait{0%,100%{box-shadow:0 0 0 0 rgba(255,71,87,0.7)}50%{box-shadow:0 0 0 10px rgba(255,71,87,0)}}
.btn-declare{background:linear-gradient(135deg,#2ed573,#1e90ff);color:white;font-size:0.85rem;padding:10px 20px;animation:pulse-declare 1.5s infinite}
@keyframes pulse-declare{0%,100%{box-shadow:0 0 0 0 rgba(46,213,115,0.7)}50%{box-shadow:0 0 0 10px rgba(46,213,115,0)}}

.special-buttons{position:fixed;bottom:120px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:50;flex-direction:column;align-items:center}
.special-buttons .btn{padding:12px 28px;font-size:0.9rem}

.game{display:none;position:fixed;top:0;left:0;right:0;bottom:0}
.table{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:55vh;background:linear-gradient(145deg,#1b5e20,#2e7d32,#1b5e20);border-radius:25px;box-shadow:0 20px 60px rgba(0,0,0,0.8),inset 0 0 100px rgba(0,0,0,0.3);border:6px solid #8B4513}

.center-info{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.7);padding:10px 20px;border-radius:15px;font-size:0.9rem;color:#ffd93d;z-index:10;border:1px solid rgba(255,217,61,0.3);white-space:nowrap}

.spot{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;z-index:20}
.spot.top{top:8px;left:50%;transform:translateX(-50%)}
.spot.bottom{bottom:8px;left:50%;transform:translateX(-50%)}
.spot.left{left:8px;top:50%;transform:translateY(-50%)}
.spot.right{right:8px;top:50%;transform:translateY(-50%)}

.avatar{width:45px;height:45px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;border:2px solid rgba(255,255,255,0.3);box-shadow:0 3px 10px rgba(0,0,0,0.4);position:relative}
.avatar.active{border-color:#ffd93d;box-shadow:0 0 15px rgba(255,217,61,0.5);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.avatar .crown{position:absolute;top:-8px;right:-3px;font-size:1rem}

.pname{font-size:0.75rem;font-weight:600;background:rgba(0,0,0,0.6);padding:2px 8px;border-radius:8px;white-space:nowrap}
.pcnt{font-size:0.65rem;color:#aaa}

.played-slot{min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer}
.pile{display:flex;flex-direction:column;align-items:center;position:relative;width:45px;min-height:60px;transition:all 0.4s ease}
.pile-card{position:absolute;width:38px;height:52px;border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:0.8rem;font-weight:bold;box-shadow:0 2px 6px rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.2);background:linear-gradient(145deg,#f5f5f5,#e0e0e0);color:#212121;transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.pile-card.h,.pile-card.d{background:linear-gradient(145deg,#fff5f5,#ffe0e0);color:#c62828}
.pile-card.c,.pile-card.s{background:linear-gradient(145deg,#f5f5f5,#e0e0e0);color:#212121}
.pile-card.winner{border:2px solid #ffd93d;box-shadow:0 0 15px rgba(255,217,61,0.8);transform:scale(1.1);z-index:100}
.pile.expanded{width:auto;min-height:60px}
.pile.expanded .pile-card{position:relative;width:38px;height:52px;margin:0 -8px;transform:none !important}
.pile.expanded .pile-card:hover{transform:translateY(-10px) scale(1.15) !important;z-index:200;box-shadow:0 8px 20px rgba(0,0,0,0.5)}

.played-slot .card{width:45px;height:65px;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1rem;font-weight:bold;box-shadow:0 3px 10px rgba(0,0,0,0.5);border:2px solid rgba(255,255,255,0.3);position:relative;animation:appear 0.4s ease-out}
@keyframes appear{from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}
.played-slot .card.h,.played-slot .card.d{background:linear-gradient(145deg,#fff5f5,#ffe0e0);color:#c62828}
.played-slot .card.c,.played-slot .card.s{background:linear-gradient(145deg,#f5f5f5,#e0e0e0);color:#212121}
.played-slot .off{position:absolute;top:-4px;right:-4px;background:#ff6b6b;color:white;font-size:0.5rem;padding:1px 4px;border-radius:4px}
.played-slot .win{position:absolute;top:-6px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#ffd93d,#ff6b6b);color:#1a1a2e;font-size:0.6rem;padding:1px 6px;border-radius:8px;font-weight:bold;white-space:nowrap}
.played-slot .wait{width:45px;height:65px;border-radius:6px;border:2px dashed rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.3);font-size:0.7rem}

.hand{display:flex;gap:6px;position:relative}
.spot.bottom .hand{flex-direction:row}
.spot.top .hand{flex-direction:row}
.spot.left .hand{flex-direction:column}
.spot.right .hand{flex-direction:column}

.hand .card{width:50px;height:75px;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.1rem;font-weight:bold;cursor:pointer;transition:all 0.25s;box-shadow:0 3px 10px rgba(0,0,0,0.4);border:2px solid rgba(255,255,255,0.3);flex-shrink:0}
.hand .card:hover{transform:translateY(-15px) scale(1.1);box-shadow:0 8px 25px rgba(0,0,0,0.6);z-index:100}
.hand .card.disabled{opacity:0.35;cursor:not-allowed;transform:none !important;filter:grayscale(0.5)}
.hand .card.h,.hand .card.d{background:linear-gradient(145deg,#fff,#ffe8e8);color:#c62828}
.hand .card.c,.hand .card.s{background:linear-gradient(145deg,#fff,#e8e8e8);color:#212121}
.hand .card.triple-highlight{border:3px solid #ffd93d;box-shadow:0 0 15px rgba(255,217,61,0.6);animation:pulse 1s infinite}

.ai-back{width:35px;height:50px;border-radius:5px;background:linear-gradient(145deg,#667eea,#764ba2);border:2px solid rgba(255,255,255,0.2);box-shadow:0 2px 6px rgba(0,0,0,0.3);flex-shrink:0}

.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.9);display:none;align-items:center;justify-content:center;z-index:1000}
.overlay.show{display:flex}
.mbox{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:20px;text-align:center;border:3px solid #ffd93d;max-width:90%;min-width:300px}
.mbox h2{font-size:1.8rem;color:#ffd93d;margin-bottom:15px}
.mbox-buttons{display:flex;flex-direction:column;gap:10px;margin-top:20px}

.reset{position:fixed;top:10px;right:10px;z-index:100}
.reset .btn{padding:8px 18px;font-size:0.8rem}

/* ========== HISTORIQUE ========== */
.history-toggle{position:fixed;top:10px;left:10px;z-index:200;padding:8px 14px;font-size:0.85rem;background:linear-gradient(135deg,#ff6b6b,#ffd93d);border:none;border-radius:20px;color:#1a1a2e;font-weight:bold;cursor:pointer;box-shadow:0 3px 15px rgba(255,107,107,0.4);transition:all 0.3s}
.history-toggle:hover{transform:scale(1.05)}
.history-toggle.active{background:linear-gradient(135deg,#ffd93d,#ff6b6b)}

.history-panel{position:fixed;top:0;left:0;width:320px;max-width:85vw;height:100vh;background:linear-gradient(180deg,#1a1a2e,#0f0f1e);border-right:3px solid #ffd93d;z-index:150;transform:translateX(-100%);transition:transform 0.4s ease;overflow-y:auto;padding:60px 15px 20px;display:flex;flex-direction:column;gap:12px}
.history-panel.open{transform:translateX(0)}
.history-panel::-webkit-scrollbar{width:6px}
.history-panel::-webkit-scrollbar-thumb{background:#ffd93d;border-radius:3px}

.history-title{font-size:1.1rem;color:#ffd93d;text-align:center;margin-bottom:10px;font-weight:bold;border-bottom:2px solid rgba(255,217,61,0.3);padding-bottom:8px}
.history-empty{text-align:center;color:#888;font-size:0.85rem;padding:20px;font-style:italic}

.round-entry{background:rgba(255,255,255,0.05);border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,0.08);transition:all 0.3s}
.round-entry:hover{background:rgba(255,255,255,0.08)}
.round-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.round-num{font-size:0.9rem;color:#ffd93d;font-weight:bold}
.round-winner{font-size:0.75rem;color:#6bcb77;font-weight:600}
.round-winner::before{content:"🏆 "}
.round-suit{font-size:0.7rem;color:#aaa;margin-bottom:6px}
.round-suit span{color:#ffd93d;font-weight:bold}

.round-cards{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.hist-card{width:32px;height:44px;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:0.65rem;font-weight:bold;box-shadow:0 2px 5px rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.15);position:relative}
.hist-card.h,.hist-card.d{background:linear-gradient(145deg,#fff5f5,#ffe0e0);color:#c62828}
.hist-card.c,.hist-card.s{background:linear-gradient(145deg,#f5f5f5,#e0e0e0);color:#212121}
.hist-card.winner{border:2px solid #ffd93d;box-shadow:0 0 10px rgba(255,217,61,0.6);transform:scale(1.05)}
.hist-card .hist-player{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:0.55rem;color:#aaa;white-space:nowrap;background:rgba(0,0,0,0.7);padding:1px 4px;border-radius:3px}

.history-stats{background:rgba(255,217,61,0.1);border-radius:10px;padding:10px;margin-top:5px;border:1px solid rgba(255,217,61,0.2)}
.history-stats-title{font-size:0.8rem;color:#ffd93d;margin-bottom:6px;font-weight:bold;text-align:center}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:0.75rem;border-bottom:1px solid rgba(255,255,255,0.05)}
.stat-row:last-child{border-bottom:none}
.stat-name{color:#ccc}
.stat-val{color:#6bcb77;font-weight:bold}

.overlay-history{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:140;display:none}
.overlay-history.show{display:block}

/* ========== BOUTON SON ========== */
.sound-toggle{position:fixed;bottom:10px;left:10px;z-index:200;padding:8px 14px;font-size:0.85rem;background:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.2);border-radius:20px;color:#fff;font-weight:bold;cursor:pointer;transition:all 0.3s}
.sound-toggle:hover{background:rgba(255,255,255,0.2)}
.sound-toggle.muted{color:#ff6b6b;border-color:#ff6b6b}

/* ========== ANIMATION DISTRIBUTION ========== */
.deal-layer{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:500}
.flying-card{position:fixed;width:50px;height:75px;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.1rem;font-weight:bold;box-shadow:0 5px 20px rgba(0,0,0,0.6);border:2px solid rgba(255,255,255,0.3);z-index:500;pointer-events:none;transition:none}
.flying-card.h,.flying-card.d{background:linear-gradient(145deg,#fff,#ffe8e8);color:#c62828}
.flying-card.c,.flying-card.s{background:linear-gradient(145deg,#fff,#e8e8e8);color:#212121}
.flying-card.back{background:linear-gradient(145deg,#667eea,#764ba2);border:2px solid rgba(255,255,255,0.2)}

@keyframes dealFly{
    0%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:1}
    70%{transform:translate(var(--tx),var(--ty)) scale(0.7) rotate(var(--rot));opacity:1}
    100%{transform:translate(var(--tx),var(--ty)) scale(0.7) rotate(var(--rot));opacity:0}
}
.flying-card.animating{animation:dealFly var(--dur) cubic-bezier(0.25,0.46,0.45,0.94) forwards}

/* Deck au centre pendant distribution */
.deck-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:55px;height:80px;border-radius:8px;background:linear-gradient(145deg,#667eea,#764ba2);border:3px solid rgba(255,255,255,0.3);box-shadow:0 5px 25px rgba(0,0,0,0.5);z-index:480;display:flex;align-items:center;justify-content:center;font-size:1.5rem;opacity:0;pointer-events:none;transition:opacity 0.3s}
.deck-center.show{opacity:1}
.deck-center::after{content:'';position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;border-radius:8px;background:linear-gradient(145deg,#667eea,#764ba2);z-index:-1;transform:translate(-4px,-4px);opacity:0.6}

/* ========== CONFIGURATION JOUEURS ========== */
.player-setup{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:10px}
.player-config{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.03);padding:10px 15px;border-radius:15px;border:1px solid rgba(255,255,255,0.08);width:100%;max-width:320px}
.player-config .avatar-select{width:45px;height:45px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer;border:2px solid rgba(255,255,255,0.3);transition:all 0.3s;position:relative;flex-shrink:0}
.player-config .avatar-select:hover{transform:scale(1.1);border-color:#ffd93d}
.player-config .avatar-select .avatar-picker{position:absolute;top:50px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #ffd93d;border-radius:15px;padding:10px;display:none;flex-direction:row;gap:8px;z-index:100;box-shadow:0 10px 30px rgba(0,0,0,0.5);white-space:nowrap}
.player-config .avatar-select .avatar-picker.show{display:flex}
.player-config .avatar-select .avatar-picker span{cursor:pointer;font-size:1.8rem;padding:4px;border-radius:8px;transition:all 0.2s}
.player-config .avatar-select .avatar-picker span:hover{background:rgba(255,217,61,0.2);transform:scale(1.2)}
.player-config .avatar-select .avatar-picker span.selected{background:rgba(255,217,61,0.3);border:2px solid #ffd93d}
.player-config input[type="text"]{padding:8px 12px;font-size:0.95rem;border-radius:10px;border:2px solid rgba(255,255,255,0.2);background:rgba(0,0,0,0.3);color:white;width:140px;text-align:center;outline:none;transition:all 0.3s}
.player-config input[type="text"]:focus{border-color:#ffd93d;box-shadow:0 0 10px rgba(255,217,61,0.3)}
.player-config .player-label{font-size:0.75rem;color:#888;min-width:50px;text-align:left}
.player-config.human .player-label{color:#ffd93d;font-weight:bold}


/* ========== MULTIJOUEUR LOCAL ========== */

/* Toggle Humain/Bot */
.player-type-toggle {
    display: flex;
    gap: 4px;
    background: rgba(0,0,0,0.3);
    border-radius: 20px;
    padding: 3px;
    margin-left: 8px;
}
.player-type-toggle button {
    padding: 5px 12px;
    font-size: 0.75rem;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    background: transparent;
    color: #888;
    transition: all 0.3s;
    font-weight: 600;
}
.player-type-toggle button.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 2px 8px rgba(102,126,234,0.4);
}
.player-type-toggle button:hover:not(.active) {
    color: #ccc;
}

/* Écran de transition Pass-and-Play */
.pass-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0a1628, #1a2a1a, #0d2818);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    flex-direction: column;
}
.pass-screen.show {
    display: flex;
    animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.pass-content {
    text-align: center;
    background: rgba(255,255,255,0.05);
    padding: 40px;
    border-radius: 25px;
    border: 2px solid rgba(255,217,61,0.3);
    max-width: 90%;
    animation: slideUp 0.5s ease;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.pass-avatar {
    font-size: 4rem;
    margin-bottom: 15px;
    animation: bounce 1s infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.pass-content h2 {
    color: #ffd93d;
    font-size: 1.8rem;
    margin-bottom: 10px;
}
.pass-content p {
    color: #aaa;
    font-size: 1.1rem;
    margin-bottom: 25px;
}
.btn-pass {
    background: linear-gradient(135deg, #6bcb77, #2ed573) !important;
    font-size: 1.1rem !important;
    padding: 16px 40px !important;
    animation: pulse-pass 2s infinite;
}
@keyframes pulse-pass {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46,213,115,0.4); }
    50% { box-shadow: 0 0 0 15px rgba(46,213,115,0); }
}

/* Cartes cachées pour joueur non-actif en mode multi */
.hand-hidden {
    opacity: 0.15;
    filter: blur(2px);
    pointer-events: none;
}
.hand-hidden .card {
    transform: none !important;
    cursor: default !important;
}

/* Indicateur de joueur local actif */
.local-player-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ffd93d, #ff6b6b);
    color: #1a1a2e;
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: bold;
    animation: pulse 1.5s infinite;
}

/* Message tour en cours pour multi */
.turn-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.85);
    padding: 20px 40px;
    border-radius: 20px;
    border: 2px solid #ffd93d;
    color: #ffd93d;
    font-size: 1.3rem;
    font-weight: bold;
    z-index: 100;
    display: none;
    text-align: center;
}
.turn-message.show {
    display: block;
    animation: popIn 0.3s ease;
}
@keyframes popIn {
    from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}


/* ========== RÉSEAU P2P ========== */
.network-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    flex-direction: column;
}
.network-overlay.show {
    display: flex;
    animation: fadeIn 0.4s ease;
}
.network-content {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    padding: 35px;
    border-radius: 25px;
    border: 3px solid #667eea;
    max-width: 90%;
    width: 450px;
    text-align: center;
    animation: slideUp 0.5s ease;
}
.network-content h2 {
    color: #ffd93d;
    font-size: 1.6rem;
    margin-bottom: 10px;
}
.network-content p {
    color: #aaa;
    font-size: 0.9rem;
}
.network-content .btn {
    padding: 12px 25px;
    font-size: 0.9rem;
}

/* Statut connexion réseau */
.network-status {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 200;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: bold;
    display: none;
}
.network-status.show {
    display: block;
}
.network-status.connected {
    background: linear-gradient(135deg, #6bcb77, #2ed573);
    color: #1a1a2e;
}
.network-status.disconnected {
    background: linear-gradient(135deg, #ff4757, #ff6348);
    color: white;
}

/* ========== ÉCRAN D'INSCRIPTION ========== */
#registerScreen input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 12px rgba(102,126,234,0.3);
}
#regAvatarDisplay:hover {
    transform: scale(1.1);
    border-color: #ffd93d;
}
@keyframes slideIn {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}