/* ============================================================
   RAMI — Multijoueur
   Même thème "arcade nocturne" que le reste du hub, accent vert tapis.
   ============================================================ */
:root{
  --bg:#0a0e1a;
  --surface:rgba(255,255,255,0.04);
  --surface-2:rgba(255,255,255,0.07);
  --line:rgba(255,255,255,0.10);
  --line-2:rgba(255,255,255,0.16);
  --text:#eef1f8;
  --muted:#9aa3bd;
  --dim:#626b86;
  --accent:#4ade80;
  --accent-2:#bbf7d0;
  --success:#34d399;
  --warn:#fbbf24;
  --danger:#fb7185;
  --rouge:#f43f5e;
  --bleu:#3b82f6;
  --agent:#22c55e;
  --neutre:#a8a29e;
  --assassin:#111827;
  --panel-solid:#131a2c;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* Garantit que l'attribut HTML "hidden" masque vraiment un élément, même si
   une règle plus bas lui donne un display explicite (.modal est en flex).
   Une feuille d'auteur l'emporte toujours sur le [hidden]{display:none} du
   navigateur : sans ce garde-fou, la modale des règles reste affichée en
   permanence et bloque toute la page. */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(74,222,128,0.13), transparent 70%),
    radial-gradient(50% 40% at 90% 100%, rgba(21,128,61,0.08), transparent 70%),
    var(--bg);
  color:var(--text);
  min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(40px + env(safe-area-inset-bottom));
}

/* ===== Intégration iOS ===== */
body::before, body::after{
  content:""; position:fixed; left:0; right:0; z-index:60; pointer-events:none;
  background:rgba(0,0,0,0.18);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  backdrop-filter:saturate(140%) blur(16px);
}
body::before{ top:0; height:env(safe-area-inset-top); }
body::after{ bottom:0; height:env(safe-area-inset-bottom); }

.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(74,222,128,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,0.03) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 75%);
}

/* ---------- Header ---------- */
.app-header{
  position:relative; z-index:1; text-align:center;
  padding:calc(16px + env(safe-area-inset-top)) 16px 10px;
}
.app-header h1{
  font-family:var(--font-display); font-size:1.5rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:10px;
  letter-spacing:-0.02em;
}
.game-logo{width:30px; height:30px; color:var(--accent);}
.home-btn{
  position:absolute; left:14px; top:calc(16px + env(safe-area-inset-top));
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  text-decoration:none;
}
.home-btn svg{width:20px; height:20px;}

/* ---------- Structure ---------- */
.wrap{position:relative; z-index:1; max-width:620px; margin:0 auto; padding:8px 14px 40px;}
.screen{display:none;}
.screen.active{display:block;}

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:16px; margin-bottom:14px;
}
.card h2{
  font-family:var(--font-display); font-size:1rem; font-weight:600;
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
label{display:block; font-size:0.82rem; color:var(--muted); margin:10px 0 6px;}
input[type=text], input[type=number]{
  width:100%; padding:13px 14px; border-radius:12px;
  background:rgba(0,0,0,0.28); border:1px solid var(--line-2);
  color:var(--text); font-family:var(--font-body); font-size:1rem;
}
input[type=range]{width:100%; accent-color:var(--accent);}
button{
  font-family:var(--font-body); font-size:0.95rem; cursor:pointer;
  border-radius:12px; border:1px solid transparent; padding:13px 18px;
  margin-top:10px; color:var(--text); background:var(--surface-2);
}
button.primary{
  width:100%; background:linear-gradient(120deg, var(--accent), #16a34a);
  color:#052e16; font-weight:600; border:0;
}
button.ghost{background:var(--surface); border:1px solid var(--line-2); color:var(--muted);}
button.full{width:100%;}
button.danger-btn{color:var(--danger); border-color:rgba(251,113,133,0.3);}
button:disabled{opacity:0.45;}
.hint{font-size:0.78rem; color:var(--dim); margin-top:8px; line-height:1.5;}
.val-tag{color:var(--accent); font-weight:600;}
.count-badge{
  font-size:0.72rem; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:2px 9px; color:var(--muted);
}
.or-sep{text-align:center; margin:6px 0 14px; color:var(--dim); font-size:0.8rem;}

.code-card{text-align:center;}
.code-label{font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.16em;}
.code-display{
  font-family:var(--font-display); font-size:2.6rem; font-weight:700;
  letter-spacing:0.34em; color:var(--accent); margin:6px 0 4px; padding-left:0.34em;
}
.code-input{text-align:center; letter-spacing:0.4em; text-transform:uppercase; font-size:1.3rem;}

/* ---------- Joueurs ---------- */
.player-row{
  display:flex; align-items:center; gap:8px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.player-row:last-child{border-bottom:0;}
.player-row.off{opacity:0.42;}
.pl-name{flex:1; font-size:0.92rem;}
.pl-seat{font-size:0.74rem; color:var(--dim);}
.pl-seat.team-r{color:var(--rouge);} .pl-seat.team-b{color:var(--bleu);}
.pl-seat.team-A{color:var(--accent);} .pl-seat.team-B{color:#a78bfa;}
.tag{
  font-size:0.66rem; background:var(--surface-2); border-radius:999px;
  padding:1px 7px; color:var(--muted);
}
.kick-btn{
  margin:0; padding:4px 9px; font-size:0.75rem;
  background:transparent; border:1px solid var(--line-2); color:var(--danger);
}
.lobby-actions{margin-top:4px;}
.waiting-note{text-align:center;}

/* ---------- Bandeau de tour ---------- */
.round-head{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.round-badge{
  flex:1; font-family:var(--font-display); font-size:0.9rem; font-weight:600;
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:10px 14px;
}
.round-badge.mine{border-color:var(--accent); color:var(--accent); background:rgba(74,222,128,0.10);}
.manche-badge{
  font-family:var(--font-display); font-weight:700; font-size:0.85rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:10px 14px; color:var(--muted);
}

/* ---------- Adversaires ---------- */
.opps{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;}
.opp{
  flex:1 1 46%; display:grid; grid-template-columns:1fr auto; gap:1px 8px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:9px 12px;
}
.opp.actif{border-color:var(--accent); background:rgba(74,222,128,0.08);}
.opp-name{font-size:0.86rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.opp-nb{font-size:0.74rem; color:var(--accent-2); text-align:right;}
.opp-tag{font-size:0.7rem; color:var(--dim);}
.opp-score{font-size:0.7rem; color:var(--dim); text-align:right;}

/* ---------- Talon et défausse ---------- */
.piles{display:flex; gap:12px; margin-bottom:12px;}
.pile{
  flex:1; margin:0; padding:12px 8px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
}
/* Piocher n'est possible qu'au bon moment : on le montre au lieu de
   laisser le joueur découvrir le refus par un message d'erreur. */
.pile.jouable{border-color:var(--accent); box-shadow:0 0 0 2px rgba(74,222,128,0.25);}
.pile:not(.jouable){opacity:0.6;}
.pile-lab{font-size:0.7rem; color:var(--dim); text-transform:uppercase; letter-spacing:0.1em;}
.pile-lab b{color:var(--text);}
.card-back{
  width:44px; height:62px; border-radius:7px;
  background:repeating-linear-gradient(45deg, #1e293b 0 5px, #0f172a 5px 10px);
  border:1px solid var(--line-2);
}
.card-empty{
  width:44px; height:62px; border-radius:7px;
  border:1px dashed var(--line-2);
}

/* ---------- Les cartes ---------- */
.pc{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:38px; height:54px; border-radius:7px;
  background:#f8fafc; border:1px solid #cbd5e1;
  font-family:var(--font-display); line-height:1;
  box-shadow:0 2px 5px rgba(0,0,0,0.35);
  user-select:none; flex:none;
}
.pc b{font-size:0.95rem; font-weight:700;}
.pc i{font-size:0.95rem; font-style:normal;}
.pc.rouge{color:#dc2626;}
.pc.noir{color:#111827;}
.pc.joker{
  background:linear-gradient(140deg,#facc15,#f59e0b); color:#3f2d00;
  border-color:#b45309;
}
.pc.joker b{font-size:0.5rem; letter-spacing:0.04em;}
.pc.gros{width:48px; height:68px;}
.pc.gros b, .pc.gros i{font-size:1.15rem;}
.pc.mini{width:26px; height:36px; box-shadow:none;}
.pc.mini b, .pc.mini i{font-size:0.65rem;}
.pc.mini.joker b{font-size:0.38rem;}

/* ---------- Combinaisons sur la table ---------- */
.melds{display:flex; flex-direction:column; gap:8px;}
.meld{
  display:flex; align-items:center; gap:3px; flex-wrap:wrap;
  padding:9px 10px; border-radius:12px;
  background:rgba(0,0,0,0.25); border:1px solid var(--line-2);
  cursor:pointer;
}
.meld:active{transform:scale(0.99);}
.meld-own{
  font-size:0.66rem; color:var(--dim); width:100%;
  text-transform:uppercase; letter-spacing:0.08em;
}

/* ---------- La main ---------- */
.hand-card h2{justify-content:space-between;}
.sel-info{margin-left:auto; font-size:0.72rem; color:var(--accent); font-weight:500; text-align:right;}
.sel-info.ko{color:var(--danger);}
.hand{
  display:flex; flex-wrap:wrap; gap:5px;
  padding:10px; border-radius:14px;
  background:rgba(0,0,0,0.28); border:1px solid var(--line);
  min-height:64px;
}
.hand .pc{
  cursor:pointer;
  /* L'appui long doit pouvoir démarrer un déplacement : on empêche le
     navigateur de s'approprier le geste pour faire défiler la page ou
     ouvrir sa sélection de texte. La page reste défilable partout
     ailleurs, la main ne fait que deux ou trois lignes. */
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none;
}

/* Carte qui vient d'être piochée : à 15 cartes en main, on ne la
   retrouve pas à l'oeil sans repère. */
.hand .pc.pioche{
  box-shadow:0 0 0 2px #facc15, 0 4px 12px rgba(250,204,21,0.45);
}
.hand .pc.pioche::after{
  content:""; position:absolute; top:-4px; right:-4px;
  width:9px; height:9px; border-radius:50%;
  background:#facc15; border:1.5px solid var(--bg);
}
.pc{position:relative;}

/* Déplacement en cours */
.hand .pc.en-vol{opacity:0.25;}
.pc.fantome{
  position:fixed; z-index:120; pointer-events:none;
  transform:scale(1.12) rotate(-3deg);
  box-shadow:0 12px 26px rgba(0,0,0,0.6);
}
.hand.glisse{background:rgba(74,222,128,0.06);}
/* Trait d'insertion : on montre OÙ la carte va tomber. */
.hand .pc.cible-avant{box-shadow:-3px 0 0 0 var(--accent);}
.hand .pc.cible-apres{box-shadow:3px 0 0 0 var(--accent);}
.hand .pc.sel{
  transform:translateY(-8px);
  box-shadow:0 6px 14px rgba(0,0,0,0.5), 0 0 0 2px var(--accent);
}
/* Carte déjà rangée dans une combinaison mise de côté : on la grise
   pour éviter de la resélectionner par erreur. */
.hand .pc.reserve{opacity:0.4;}

.hand-tip{margin:8px 0 0; text-align:center;}
.hand-actions{display:flex; gap:8px;}
.hand-actions button{flex:1;}
.act-zone{margin-top:4px;}
.pending{margin:8px 0;}
.pending-row{
  display:flex; align-items:center; gap:3px; flex-wrap:wrap;
  padding:7px 8px; margin-bottom:6px; border-radius:10px;
  background:rgba(74,222,128,0.08); border:1px solid rgba(74,222,128,0.3);
}
.pending-pts{
  margin-left:auto; font-size:0.7rem; color:var(--accent); font-weight:600;
  white-space:nowrap;
}
.pending-del{
  margin:0 0 0 8px; padding:3px 9px; font-size:0.75rem;
  background:transparent; border:1px solid var(--line-2); color:var(--danger);
}

/* ---------- Décomptes ---------- */
.score-row{
  display:flex; align-items:center; gap:8px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.score-row:last-child{border-bottom:0;}
.score-row.winner .sr-name{color:var(--accent);}
.sr-pos{
  font-family:var(--font-display); font-weight:700; color:var(--dim);
  width:20px; text-align:center;
}
.sr-name{font-size:0.9rem; font-weight:500; min-width:70px;}
.sr-cards{display:flex; flex-wrap:wrap; gap:2px; flex:1;}
.sr-pts{font-size:0.8rem; color:var(--danger); min-width:38px; text-align:right;}
.sr-tot{
  font-family:var(--font-display); font-weight:700;
  min-width:52px; text-align:right;
}

/* ---------- Journal ---------- */
.log{max-height:190px; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.log-line{
  font-size:0.8rem; color:var(--muted);
  padding:6px 0; border-bottom:1px solid var(--line);
}
.log-line:last-child{border-bottom:0;}

/* ---------- Fin ---------- */
.end-card{text-align:center;}
.end-emoji{font-size:3rem; margin-bottom:6px;}
#end-title{justify-content:center; font-size:1.35rem;}
.end-score{
  font-family:var(--font-display); font-weight:700; font-size:2.8rem;
  color:var(--accent); margin:6px 0;
}
.log-tall{max-height:320px;}

/* ---------- Modale règles ---------- */
.modal{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center; padding:5vh 16px;
  pointer-events:none;
}
.modal:not([hidden]){pointer-events:auto;}
.modal-backdrop{position:absolute; inset:0; background:rgba(3,7,18,0.86);}
.modal-box{
  position:relative; z-index:1; width:100%; max-width:520px;
  max-height:86vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--panel-solid); border:1px solid var(--line-2);
  border-radius:20px; padding:22px;
}
.modal-box h2{font-family:var(--font-display); font-size:1.15rem; margin-bottom:14px;}
.modal-box p{font-size:0.86rem; color:var(--muted); line-height:1.6; margin-bottom:12px;}
.modal-box b{color:var(--text);}
.modal-close{
  position:absolute; top:10px; right:12px; margin:0;
  width:34px; height:34px; padding:0; border-radius:50%;
  background:var(--surface-2); color:var(--muted); font-size:1.3rem; line-height:1;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translate(-50%, 24px); z-index:100;
  background:var(--panel-solid); border:1px solid var(--line-2);
  border-radius:12px; padding:12px 18px; font-size:0.85rem;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  max-width:88vw; text-align:center;
}
.toast.show{opacity:1; transform:translate(-50%, 0);}

/* ---------- Petits écrans ---------- */
@media (max-width:380px){
  .code-display{font-size:2.1rem;}
  .pc{width:32px; height:46px;}
  .pc b, .pc i{font-size:0.8rem;}
  .hand{gap:4px; padding:8px;}
  .opp{flex:1 1 100%;}
}