/* Améliorations tactiles (Mobile & WebApp) */
* {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
input, textarea, .chat-messages {
    -webkit-user-select: auto;
    user-select: auto;
}


  :root{
    --felt-1:#1c9e5c;
    --felt-2:#0d6238;
    --felt-3:#053420;
    --gold:#f2c516;
    --gold-dark:#c9960a;
    --gold-soft:rgba(242,197,22,.35);
    --red:#e6483f;
    --blue:#3fa0e0;
    --ink:#ffffff;
    --panel:rgba(4,18,11,.55);
    --panel-strong:rgba(3,16,10,.82);
    --line:rgba(255,255,255,.14);
    --safe-t:env(safe-area-inset-top,0px);
    --safe-b:env(safe-area-inset-bottom,0px);
    --safe-l:env(safe-area-inset-left,0px);
    --safe-r:env(safe-area-inset-right,0px);
  }
  *{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    width:100vw;height:100vh;overflow:hidden;
    background:radial-gradient(130% 150% at 50% 34%, var(--felt-1) 0%, var(--felt-2) 60%, var(--felt-3) 100%);
    position:relative;
  }
  /* quiet felt texture + premium rim, no literal wood — just depth */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
    background:repeating-radial-gradient(circle at 50% 40%, rgba(255,255,255,.022) 0 2px, transparent 2px 5px);
    mix-blend-mode:overlay;
  }
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:400;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 2px 2px var(--gold-soft), inset 0 0 90px rgba(0,0,0,.5);
  }
  svg.icon{width:1em;height:1em;display:block;fill:none;flex:none;}

  /* ---------- Rotate hint (portrait) ---------- */
  .rotate-hint{
    display:none;position:fixed;inset:0;z-index:999;
    background:#04150c;color:#fff;flex-direction:column;gap:14px;
    align-items:center;justify-content:center;text-align:center;padding:30px;
  }
  .rotate-hint svg{width:46px;height:46px;color:var(--gold);animation:tilt 1.6s ease-in-out infinite;}
  .rotate-hint h2{font-size:18px;font-weight:700;}
  .rotate-hint p{font-size:13px;color:rgba(255,255,255,.6);max-width:260px;}
  @keyframes tilt{0%,100%{transform:rotate(0deg)}50%{transform:rotate(90deg)}}
  @media (orientation:portrait){ #ecran-jeu .rotate-hint{display:flex;} #ecran-jeu .table-wrap{display:none;} } /* only hide game table in portrait, lobby stays visible */

  .table-wrap{
    position:absolute;inset:0;z-index:2;
    padding-top:var(--safe-t);padding-bottom:var(--safe-b);
    padding-left:var(--safe-l);padding-right:var(--safe-r);
  }

  /* ---------- Top-left cluster: menu + score card only ---------- */
  .menu-btn{
    position:absolute;top:calc(8px + var(--safe-t));right:calc(8px + var(--safe-r));
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    background:var(--panel-strong);border:1px solid var(--line);border-radius:9px;
    color:#fff;font-size:15px;z-index:50;
  }
  .score-single {
    position: absolute;
    width: 58px;
    box-sizing: border-box;
    z-index: 45;
    background: var(--panel-strong);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
    text-align: center;
  }
  .score-single.nous {
    bottom: calc(145px + var(--safe-b));
    left: calc(5px + var(--safe-l));
  }
  .score-single.eux {
    bottom: calc(145px + var(--safe-b));
    right: calc(5px + var(--safe-r));
    left: auto;
  }
  .score-single .lbl { font-size:8px; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,.55); text-transform:uppercase; margin-bottom:1px; }
  .score-single .val { font-size:14px; font-weight:800; line-height:1.1; }
  .score-single.nous .val { color: var(--blue); }
  .score-single.eux .val { color: var(--red); }

  .turn-indicator{
    display:flex;align-items:center;gap:6px;
    font-size:10px;font-weight:700;letter-spacing:.02em;
    background:var(--panel-strong);padding:4px 10px;border-radius:14px;
    border:1px solid var(--gold);color:var(--gold);z-index:50;
    margin-bottom:4px;max-width:100%;white-space:nowrap;
  }
  .turn-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 1.6s ease-in-out infinite;flex-shrink:0;}
  @keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(242,197,22,.5)}50%{opacity:.5;box-shadow:0 0 0 5px rgba(242,197,22,0)}}

  /* ---------- Bottom-left cluster: avatar + utility icons ---------- */
  .me-dock{
    position:absolute;left:calc(10px + var(--safe-l));bottom:calc(8px + var(--safe-b));
    display:flex;align-items:center;gap:6px;z-index:45;
  }
  .me-badge{
    display:flex;align-items:center;gap:6px;
    background:var(--panel-strong);border:1px solid var(--line);
    padding:4px 10px 4px 4px;border-radius:20px;
  }
  .me-badge .avatar-name{font-size:10px;font-weight:700;}
  .icon-btn{
    width:28px;height:28px;border-radius:50%;border:1px solid var(--line);
    background:var(--panel-strong);color:rgba(255,255,255,.85);font-size:13px;
    display:flex;align-items:center;justify-content:center;
  }

  /* ---------- Opponents ---------- */
  .opponent{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;z-index:30;}
  .opponent-top{top:calc(6px + var(--safe-t));left:50%;transform:translateX(-50%);flex-direction:column;}
  .opponent-left{left:calc(10px + var(--safe-l));top:32%;transform:translateY(-50%);}
  .opponent-right{right:calc(10px + var(--safe-r));top:32%;transform:translateY(-50%);}

  .avatar-wrap{position:relative;}
  .avatar{
    width:clamp(30px,7.2vh,40px);height:clamp(30px,7.2vh,40px);
    border-radius:50%;background:linear-gradient(160deg,#2f3a34,#1a221e);
    border:2px solid var(--gold);display:flex;justify-content:center;align-items:center;
    color:var(--gold);font-size:16px;box-shadow:0 3px 8px rgba(0,0,0,.5);
  }
  .card-count{
    position:absolute;top:-5px;right:-6px;background:var(--red);
    color:#fff;font-size:8.5px;font-weight:800;border-radius:8px;
    padding:1px 4.5px;border:1.5px solid var(--felt-2);min-width:15px;text-align:center;
  }
  .avatar-name{font-size:9px;font-weight:600;background:rgba(0,0,0,.55);padding:1px 7px;border-radius:8px;white-space:nowrap;max-width:78px; overflow:hidden;}

  .hand-fan{display:flex;position:relative;height:17px;}
  .mini-back{
    width:13px;height:18px;border-radius:2px;
    background:repeating-linear-gradient(135deg,#2c6cb5 0 2px,#245a95 2px 4px);
    border:1px solid rgba(255,255,255,.6);position:absolute;top:0;box-shadow:0 1px 3px rgba(0,0,0,.35);
  }
  .opponent-left .hand-fan,.opponent-right .hand-fan{flex-direction:column;height:auto;width:17px;margin-bottom:2px;}
  .opponent-left .mini-back,.opponent-right .mini-back{left:0;}

  /* ---------- Main play surface ---------- */
  .table-area{
    height:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;gap:15px;
    padding:calc(15px + var(--safe-t)) 68px calc(110px + var(--safe-b)) 68px;
  }

  .meld-col{
    flex:1; display:flex; flex-direction:column; align-items:stretch; gap:8px;
    background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-radius:12px;
    padding:8px; overflow-y:auto; overflow-x:hidden;
  }
  .meld-col.nous{border-color:rgba(63,160,224,.4);}
  .meld-col.eux{border-color:rgba(230,72,63,.4);}
  .meld-label{
    display:flex; justify-content:space-between; align-items:center; 
    font-size:11px;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.04em;
    width:100%; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 6px; margin-bottom: 2px;
  }

  .canasta-list {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; align-items: start; width: 100%;
  }

  /* canasta group: up to 7 slots, closed groups get a coloured cap */
  .canasta{
    display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.08);
    border-radius:6px;padding:3px 4px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.2s;
    cursor: pointer;
  }
  .canasta:hover {
    background:rgba(255,255,255,.15);
    transform: translateY(-1px);
  }
  .canasta.compatible {
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(242,197,22,0.4);
    animation: pulseCompatible 1.5s infinite;
  }
  .canasta.staged {
    background: rgba(242,197,22,0.15);
    border: 1px dashed var(--gold);
  }
  @keyframes pulseCompatible {
    0%, 100% { box-shadow: 0 0 5px rgba(242,197,22,0.4); }
    50% { box-shadow: 0 0 15px rgba(242,197,22,0.8); border-color: #ffe066; }
  }

  .canasta.closed.pure{box-shadow:0 0 0 1px rgba(242,197,22,.65),0 0 10px rgba(242,197,22,.3);}
  .canasta.closed.mixed{box-shadow:0 0 0 1px rgba(255,255,255,.4);}
  .slots{display:flex;}
  .slot{width:18px;height:26px;border-radius:4px;margin-left:-9px; transition: transform 0.2s;}
  .slot:first-child{margin-left:0;}
  .slot:hover{ transform: translateY(-4px); z-index: 10; position: relative; }
  .slot.filled{background:#fdfdfd;color:#151515;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;border:1px solid #aaa;box-shadow:0 2px 4px rgba(0,0,0,.4);}
  .slot.filled.red{color:var(--red);}
  .slot.empty{background:transparent;border:1px dashed rgba(255,255,255,.4);}
  
  .canasta-tag{font-size:8px;font-weight:800;padding:2px 4px;border-radius:8px;display:flex;align-items:center;gap:2px;white-space:nowrap; margin-left: 2px;}
  .canasta-tag.pure{color:#241b00;background:var(--gold);}
  .canasta-tag.mixed{color:#fff;background:rgba(255,255,255,.22);}
  .canasta-tag.open{color:rgba(255,255,255,.8);background:rgba(255,255,255,.15);}
  .canasta-tag svg{width:8px;height:8px;}

  .bonus-chip{font-size:9.5px;font-weight:700;color:var(--red);background:rgba(230,72,63,.15);border:1px solid rgba(230,72,63,.4);padding:3px 8px;border-radius:10px;white-space:nowrap;}
  .meld-ghost{width:18px;height:26px;border:1px dashed rgba(255,255,255,.4);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(255,255,255,.5); margin-top: 4px; cursor: pointer;}
  .meld-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--gold); color: var(--gold); }

  .center-piles{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:35px;padding:0 10px;position:relative; width:90px; margin-top: 90px;}

  .draw-stack{position:relative;width:clamp(50px,9vh,64px);height:clamp(70px,13vh,90px);}
  .draw-layer{
    position:absolute;inset:0;border-radius:7px;border:2px solid rgba(255,255,255,.85);
    background:repeating-linear-gradient(135deg,#2c6cb5 0 6px,#23548e 6px 12px);
    box-shadow:0 5px 12px rgba(0,0,0,.5);
  }
  .draw-layer:nth-child(1){transform:translate(3px,3px);opacity:.55;}
  .draw-layer:nth-child(2){transform:translate(1.5px,1.5px);opacity:.8;}
  .draw-layer:nth-child(3){display:flex;align-items:center;justify-content:center;}
  .draw-layer:nth-child(3)::after{content:"";width:46%;height:46%;border:2px solid rgba(255,255,255,.55);border-radius:50%;}
  .pile-count{position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);background:var(--gold);color:#1a1200;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:9px;white-space:nowrap;box-shadow:0 2px 5px rgba(0,0,0,.3);}
  .pile.discard{
    width:clamp(50px,9vh,64px);height:clamp(70px,13vh,90px);border-radius:7px;
    background:#fdfdfd;border:2px solid #fff;box-shadow:0 5px 14px rgba(0,0,0,.5);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    color:var(--red);font-size:19px;font-weight:800;line-height:1;position:relative;
  }
  .frozen-badge{
    position:absolute;top:-10px;right:-14px;display:flex;align-items:center;gap:3px;
    background:#1c4a82;color:#dcecff;font-size:8.5px;font-weight:700;padding:2.5px 7px 2.5px 5px;
    border-radius:9px;border:1px solid rgba(255,255,255,.4);white-space:nowrap;box-shadow:0 2px 5px rgba(0,0,0,.3);
  }
  .frozen-badge svg{width:9px;height:9px;}

  /* ---------- Player hand ---------- */
  .player-area{
    position:absolute;left:30px;right:130px;bottom:0;padding-bottom:calc(10px + var(--safe-b));
    display:flex;justify-content:center;align-items:flex-end;z-index:35;
  }
  .hand{display:flex; width:100%; justify-content:center; align-items:flex-end; height:100px; gap:0px; box-sizing:border-box;}
  .card{
    width:clamp(50px,9vw,68px);height:clamp(70px,21vh,94px);
    background:linear-gradient(155deg,#ffffff,#f3f3f3);border-radius:7px;border:1px solid #d6d6d6;
    box-shadow:-3px 0 6px rgba(0,0,0,.35);position:relative;color:#151515;
    margin-left:-24px;transition:transform .15s ease, box-shadow .15s ease;
  }
  .card:first-child{margin-left:0;}

  .card.red{color:var(--red);}
  .idx{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;font-weight:800;font-size:clamp(9px,1.7vh,11px);}
  .idx.tl{top:4px;left:4px;}
  .idx.br{bottom:4px;right:4px;transform:rotate(180deg);}
  .idx span:last-child{font-size:.9em;margin-top:1px;}
  .pip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(20px,4.4vh,28px);opacity:.13;}

  .descendre-fab{
    border:none;border-radius:10px;font-weight:800;cursor:pointer;
    padding:4px 10px;font-size:9px;display:flex;align-items:center;gap:3px;
    background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#221900;
    box-shadow:0 2px 6px rgba(0,0,0,.4);
    width:84px !important;
}
.descendre-fab svg{width:8px;height:8px;}


.card.selectionnee { transform: translateY(-20px); z-index: 10; position: relative; border: 2px solid var(--gold); box-shadow: 0 -5px 15px rgba(242,197,22,0.6); }
.card.selectionnee.sel-group-1 { border-color: var(--gold); box-shadow: 0 -5px 15px rgba(242,197,22,0.6); }
.card.selectionnee.sel-group-2 { border-color: #06b6d4; box-shadow: 0 -5px 15px rgba(6,182,212,0.6); } /* Cyan */
.card.selectionnee.sel-group-3 { border-color: #ec4899; box-shadow: 0 -5px 15px rgba(236,72,153,0.6); } /* Pink */
.card.selectionnee.sel-group-4 { border-color: #22c55e; box-shadow: 0 -5px 15px rgba(34,197,94,0.6); } /* Green */
.card.selectionnee.sel-group-5 { border-color: #a855f7; box-shadow: 0 -5px 15px rgba(168,85,247,0.6); } /* Purple */

.badge-terre { position:absolute; top:auto !important; bottom:-6px !important; right:-6px !important; background:var(--red); color:white; font-size:10px; font-weight:bold; padding:2px 6px; border-radius:10px; box-shadow:0 2px 4px rgba(0,0,0,0.5); z-index:10; }
/* Nouvelles classes Pro */
.joueur-actif .avatar {
    box-shadow: 0 0 15px var(--gold);
    border: 2px solid var(--gold);
    transform: scale(1.1);
    transition: all 0.3s ease;
}

.carte-animee {
    position: fixed;
    z-index: 9999;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}

/* --- Styles pour le tour actif et animations --- */
.tour-actif .avatar {
    box-shadow: 0 0 20px 8px rgba(242, 197, 22, 0.6);
    border-color: var(--gold);
}
.tour-actif .avatar-name {
    color: var(--gold);
    font-weight: 800;
    background: rgba(0,0,0,0.8);
}
.tour-actif.hand {
    box-shadow: 0 0 30px rgba(242, 197, 22, 0.4) inset;
    border-radius: 12px;
}
.animated-card-throw {
    width: 26px;
    height: 36px;
    border-radius: 4px;
    background: repeating-linear-gradient(135deg, #2c6cb5 0 2px, #245a95 2px 4px);
    border: 1px solid white;
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ========== LOBBY & SALON — Professional Responsive Design ========== */

/* --- Lobby Screen --- */
#ecran-lobby, #ecran-salon {
    width: 100%; height: 100%; overflow-y: auto; padding: 16px;
    display: flex; justify-content: center; align-items: center;
}
.lobby-conteneur, .salon-conteneur {
    background: linear-gradient(145deg, rgba(8, 28, 18, 0.96), rgba(4, 14, 8, 0.98));
    border: 1.5px solid rgba(242,197,22,0.25);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    max-width: 460px;
    width: 100%;
    max-height: 95vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: none;
}
.lobby-conteneur::-webkit-scrollbar, .salon-conteneur::-webkit-scrollbar { display: none; }

/* Header */
.lobby-header {
    display: flex; align-items: center; gap: 12px; justify-content: center;
    padding-bottom: 12px; border-bottom: 1px solid rgba(242,197,22,0.2);
}
.lobby-logo { font-size: 36px; line-height: 1; }
.lobby-title-group { text-align: left; }
.lobby-title-group h1 {
    font-size: 22px; font-weight: 800; color: var(--gold); line-height: 1.15;
    letter-spacing: 0.5px; margin: 0;
}
.lobby-title-group h1 span { color: #fff; font-weight: 600; font-size: 18px; }
.lobby-sous-titre { color: rgba(255,255,255,0.45); font-size: 11px; margin-top: 2px; letter-spacing: 0.3px; }

/* Profil Card */
.profil-card {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 14px 16px;
}
.profil-card-title {
    color: rgba(255,255,255,0.7); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px; text-align: center; margin-bottom: 10px;
}
.input-profil {
    width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1);
    font-size: 15px; background: rgba(255,255,255,0.08); color: #fff; text-align: center;
    margin-bottom: 12px; transition: border-color 0.2s;
}
.input-profil:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 2px rgba(242,197,22,0.15); }

/* Avatar Grid */
.avatar-grid {
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.avatar-option {
    font-size: 26px; cursor: pointer; padding: 6px;
    border: 2px solid transparent; border-radius: 50%;
    transition: all 0.2s ease; line-height: 1;
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
}
.avatar-option:hover { background: rgba(255,255,255,0.1); transform: scale(1.1); }
.avatar-option.selected {
    border-color: var(--gold); background: rgba(242,197,22,0.12);
    box-shadow: 0 0 10px rgba(242,197,22,0.3);
}

/* Create Section */
.lobby-create-section { display: flex; flex-direction: column; gap: 8px; }
.lobby-actions { display: flex; flex-direction: column; gap: 8px; }
.lobby-actions input[type="text"] {
    width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.08); color: #fff; font-size: 14px; margin: 0;
}
.lobby-actions input[type="text"]:focus { border-color: var(--gold); outline: none; }

/* Rooms Section */
.lobby-rooms-section { margin-top: 4px; }
.rooms-title {
    color: rgba(255,255,255,0.5); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px;
}
.liste-salons {
    background: rgba(0,0,0,0.25); border-radius: 12px; padding: 10px;
    max-height: 180px; overflow-y: auto; scrollbar-width: thin;
}
.texte-vide { text-align: center; color: rgba(255,255,255,0.4); font-style: italic; font-size: 13px; padding: 10px 0; }
.salon-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; background: rgba(255,255,255,0.04); border-radius: 10px;
    margin-bottom: 6px; border: 1px solid rgba(255,255,255,0.06); transition: background 0.2s;
}
.salon-item:hover { background: rgba(255,255,255,0.08); }
.salon-item:last-child { margin-bottom: 0; }

/* Buttons */
.btn {
    padding: 11px 18px; border: none; border-radius: 10px; font-weight: 700;
    cursor: pointer; transition: all 0.2s; font-size: 14px; text-align: center; color: #fff;
}
.btn:active { transform: scale(0.97); }
.btn-large { width: 100%; padding: 13px 18px; font-size: 15px; }
.btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #1a1200;
    box-shadow: 0 4px 14px rgba(242,197,22,0.35); text-shadow: none;
}
.btn-gold:active { box-shadow: 0 2px 8px rgba(242,197,22,0.2); }
.btn-blue { background: linear-gradient(135deg, var(--blue), #2980b9); box-shadow: 0 4px 12px rgba(52,152,219,0.3); }
.btn-dark { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); }
.btn-dark:hover { background: rgba(255,255,255,0.1); }
.btn-green { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.btn-red { background: linear-gradient(135deg, #e74c3c, #c0392b); }

/* --- Salon (Waiting Room) Screen --- */
.salon-conteneur { max-width: 750px; }
.salon-conteneur h2 {
    color: var(--gold); font-size: 22px; text-align: center; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    border-bottom: 1px solid rgba(242,197,22,0.2); padding-bottom: 12px; margin: 0 0 12px 0;
}

/* Salon Layout Grid */
.salon-layout-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px; align-items: stretch;
}
.grille-sieges {
    display: flex !important; flex-direction: column; height: 100%;
}

/* Seats */
.siege {
    background: rgba(0,0,0,0.3); border: 2px dashed rgba(255,255,255,0.15);
    border-radius: 8px; padding: 6px; text-align: center; font-size: 11px;
    transition: all 0.25s; cursor: default; min-height: 50px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.siege:not(.occupe) { cursor: pointer; }
.siege:not(.occupe):hover {
    background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35);
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.siege.occupe {
    background: rgba(255,255,255,0.06); border-style: solid;
    border-color: rgba(46,204,113,0.5);
}

/* Chat */
.chat-container {
    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; display: flex; flex-direction: column; height: 100%; min-height: 120px;
}
.chat-messages {
    flex: 1; overflow-y: auto; padding: 8px 10px; font-size: 12px; text-align: left;
    display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin;
}
.chat-message { background: rgba(255,255,255,0.04); padding: 5px 8px; border-radius: 6px; }
.chat-message span.sender { font-weight: 700; color: var(--gold); margin-right: 4px; }
.chat-message span.time { font-size: 9px; color: rgba(255,255,255,0.4); margin-left: 4px; }
.chat-input-area {
    display: flex; gap: 4px; padding: 6px; border-top: 1px solid rgba(255,255,255,0.08);
}
.chat-input-area input { margin-bottom: 0; padding: 8px 10px; flex: 1; font-size: 13px; border-radius: 8px; }
.chat-input-area button { padding: 8px 12px; font-size: 12px; border-radius: 8px; }

/* Salon Actions */
.salon-actions {
    display: grid !important; grid-template-columns: 1fr 1.5fr 1fr;
    gap: 10px; margin-top: 8px;
}
.salon-statut {
    text-align: center; font-size: 12px; color: rgba(255,255,255,0.45);
    font-style: italic; margin-top: 4px;
}

/* --- Responsive Breakpoints --- */
@media (max-width: 600px) {
    .lobby-conteneur, .salon-conteneur { padding: 18px; border-radius: 16px; max-height: 100vh; }
    .lobby-header { gap: 10px; }
    .lobby-logo { font-size: 30px; }
    .lobby-title-group h1 { font-size: 20px; }
    .lobby-title-group h1 span { font-size: 16px; }
    .salon-layout-grid { grid-template-columns: 1fr; gap: 12px; }
    .salon-actions { grid-template-columns: 1fr !important; }
    .salon-conteneur h2 { font-size: 18px; }
    .chat-container { min-height: 120px; }
}

@media (max-width: 380px) {
    .lobby-conteneur, .salon-conteneur { padding: 14px; gap: 12px; }
    .profil-card { padding: 10px 12px; }
    .avatar-option { width: 36px; height: 36px; font-size: 22px; }
}

/* Landscape phone for salon — side by side layout */
@media (orientation: landscape) and (max-height: 500px) {
    #ecran-lobby, #ecran-salon { padding: 8px; align-items: flex-start; }
    .lobby-conteneur { max-height: 100vh; flex-direction: row; flex-wrap: wrap; max-width: 700px; gap: 10px; padding: 16px; }
    .lobby-header { width: 100%; padding-bottom: 8px; }
    .profil-card { flex: 1; min-width: 200px; }
    .lobby-create-section { flex: 1; min-width: 200px; }
    .lobby-rooms-section { width: 100%; }
    .salon-conteneur { max-height: 100vh; max-width: 95vw; }
    .salon-layout-grid { grid-template-columns: 1fr 1fr; }
    .salon-actions { grid-template-columns: 1fr 1.5fr 1fr !important; }
}

#panneau-emojis.panneau-emojis {
    display: none;
    position: absolute;
    bottom: calc(60px + var(--safe-b));
    left: calc(8px + var(--safe-l));
    top: auto !important;
    background: rgba(15, 25, 20, 0.95) !important;
    border: 1px solid var(--gold-soft) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
    z-index: 100 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8) !important;
    width: max-content !important;
}
#panneau-emojis .emoji-option {
    font-size: 28px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: transform 0.2s, text-shadow 0.2s !important;
}
#panneau-emojis .emoji-option:hover {
    transform: scale(1.3) !important;
    text-shadow: 0 0 10px var(--gold) !important;
}

/* Fix z-index of modals to be above everything */
#modal-overlay { z-index: 9999; }




.nouvelle-carte-piochee {
    box-shadow: 0 0 10px 3px rgba(242,197,22,0.5), 0 0 20px 5px rgba(242,197,22,0.2);
    border: 1.5px solid var(--gold) !important;
    animation: pulseNewCard 1.5s ease-in-out infinite;
    z-index: 5;
    position: relative;
}
@keyframes pulseNewCard {
    0%, 100% { box-shadow: 0 0 10px 3px rgba(242,197,22,0.5), 0 0 20px 5px rgba(242,197,22,0.2); }
    50% { box-shadow: 0 0 15px 5px rgba(242,197,22,0.7), 0 0 30px 10px rgba(242,197,22,0.3); }
}

.animated-face {
    background: #fff !important;
    border: 1px solid #ccc !important;
    color: #151515;
    display: flex;
    justify-content: center;
    align-items: center;
}
.animated-face.red { color: var(--red); }
.animated-face .idx { font-size: 8px; }
.animated-face .idx.tl { top: 2px; left: 2px; }
.animated-face .idx.br { bottom: 2px; right: 2px; }
.animated-face .pip { font-size: 16px; opacity: 0.2; }

.badge-nouvelle { position: absolute; top: -6px; right: -6px; font-size: 12px; z-index: 10; animation: popIn 0.3s ease-out; pointer-events: none; line-height: 1; text-shadow: 0 0 6px var(--gold); }
@keyframes popIn { 0% { transform: scale(0); } 80% { transform: scale(1.2); } 100% { transform: scale(1); } }

.player-dot {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    z-index: 5;
    pointer-events: none;
}

.highlight-card-glow {
    animation: card-pulse-glow 0.8s infinite alternate;
    z-index: 10;
    position: relative;
    border: 2px solid var(--glow-color, #f2c516) !important;
}
@keyframes card-pulse-glow {
    0% {
        box-shadow: 0 0 5px var(--glow-color, rgba(242,197,22,0.6));
        filter: brightness(1);
    }
    100% {
        box-shadow: 0 0 15px var(--glow-color, rgba(242,197,22,1));
        filter: brightness(1.1);
    }
}

/* APP PRO DESIGN - MENU SCREENS */
.ecran-plein {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, #1b4e33 0%, #0d281a 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    overflow-y: auto;
}

.login-conteneur, .menu-conteneur {
    width: 90%;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.menu-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 10px;
}

.menu-profil-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.menu-avatar {
    font-size: 3.5rem;
    background: rgba(0,0,0,0.2);
    width: 90px; height: 90px;
    display: flex; justify-content: center; align-items: center;
    border-radius: 50%;
    border: 3px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}
.menu-pseudo {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-menu-hero, .btn-menu-secondary, .btn-menu-tertiary {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: left;
    width: 100%;
}
.btn-menu-hero:active, .btn-menu-secondary:active, .btn-menu-tertiary:active {
    transform: scale(0.96);
}

.btn-menu-hero {
    background: linear-gradient(135deg, #ffd700, #b8860b);
    box-shadow: 0 8px 20px rgba(218, 165, 32, 0.4);
    border: 2px solid #fff;
    color: #333;
}
.btn-menu-secondary {
    background: linear-gradient(135deg, #4b7bec, #3867d6);
    box-shadow: 0 8px 20px rgba(56, 103, 214, 0.4);
    border: 2px solid rgba(255,255,255,0.5);
    color: white;
}
.btn-menu-tertiary {
    background: linear-gradient(135deg, #a55eea, #8854d0);
    box-shadow: 0 8px 20px rgba(136, 84, 208, 0.4);
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
}

.btn-menu-icon {
    font-size: 2.5rem;
    margin-right: 15px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.btn-menu-text {
    display: flex;
    flex-direction: column;
}

.btn-menu-title {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.btn-menu-sub {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.9;
}

.lobby-header-mini {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.lobby-header-mini h2 {
    color: var(--gold);
    margin: 0 auto;
    font-size: 1.5rem;
}


@keyframes tutoPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.8); } 70% { box-shadow: 0 0 0 20px rgba(255, 215, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); } }
.tuto-highlight { animation: tutoPulse 1.5s infinite !important; border: 3px solid var(--gold) !important; border-radius: 12px; }

@keyframes canastaBurst {
    0%   { transform: scale(0.7) rotate(-4deg); opacity: 0; }
    35%  { transform: scale(1.2) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 0; }
}
.canasta-burst {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 8px var(--gold), 0 0 16px var(--gold-dark);
    pointer-events: none;
    animation: canastaBurst 1.2s ease-out forwards;
    z-index: 50;
    white-space: nowrap;
}
@keyframes ligneReveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ligne-score.reveal {
    opacity: 0;
    animation: ligneReveal 0.35s ease forwards;
}

.opponent-left .avatar-name, .opponent-right .avatar-name { max-width: 54px; }