:root {
  --bg: #12101c;
  --card-bg: rgba(255,255,255,0.05);
  --card-border: rgba(255,255,255,0.12);
  --primary: #22c1c3;
  --primary-2: #fdbb2d;
  --text: #f2f0f7;
  --muted: #a5a0b8;
  --success: #4ade80;
  --fail: #f87171;
  --radius: 20px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.bg-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}
.blob-1 { width: 420px; height: 420px; background: var(--primary); top: -120px; left: -100px; animation: float1 38s ease-in-out infinite; }
.blob-2 { width: 380px; height: 380px; background: var(--primary-2); bottom: -140px; right: -100px; animation: float2 44s ease-in-out infinite; }

@keyframes float1 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(60vw, 20vh); }
  50%  { transform: translate(30vw, 60vh); }
  75%  { transform: translate(-20vw, 30vh); }
  100% { transform: translate(0, 0); }
}
@keyframes float2 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-50vw, -25vh); }
  50%  { transform: translate(-25vw, -55vh); }
  75%  { transform: translate(15vw, -20vh); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-blob { animation: none !important; }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  position: relative;
  z-index: 1;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  font-weight: 800; font-size: 0.85rem;
}
.room-badge {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--card-border);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
}
.qr-icon-btn { background: none; border: none; color: var(--text); cursor: pointer; font-size: 1rem; }

#app { position: relative; z-index: 1; max-width: 820px; width: 100%; margin: 0 auto; padding: 10px 20px 60px; }

.hidden { display: none !important; }

.active-room-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(34, 193, 195, 0.15);
  border: 1px solid rgba(34, 193, 195, 0.4);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 0.9rem;
}
.active-room-banner .btn-small { padding: 8px 14px; font-size: 0.85rem; flex: 0 0 auto; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px;
  backdrop-filter: blur(20px);
}

h1 { font-size: 1.8rem; margin: 0 0 10px; }
h2 { margin: 0 0 8px; }
h3.section-title { margin: 22px 0 10px; font-size: 1rem; }
.subtitle { color: var(--muted); margin: 0 0 24px; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 6px; font-size: 0.85rem; color: var(--muted); }
input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 1rem;
}

.btn {
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.95rem;
}
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #10101a; }
.btn-secondary { background: rgba(255,255,255,0.1); color: var(--text); border: 1px solid var(--card-border); }
.btn-ghost { background: none; color: var(--muted); border: 1px solid var(--card-border); }

.home-actions { display: flex; flex-direction: column; gap: 12px; }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1 1 100px; text-transform: uppercase; letter-spacing: 2px; text-align: center; }
.error-text { color: var(--fail); min-height: 1.2em; margin-top: 14px; font-size: 0.9rem; }

.player-list { list-style: none; padding: 0; margin: 18px 0; display: flex; flex-direction: column; gap: 8px; }
.player-list li {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--card-border);
  padding: 10px 14px;
  border-radius: 12px;
}
.tag { font-size: 0.7rem; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#10101a; padding: 2px 8px; border-radius: 999px; }
.tag-offline { background: rgba(248,113,113,0.2) !important; color: var(--fail); border: 1px solid rgba(248,113,113,0.4); }
.kick-btn { background: none; border: 1px solid rgba(248,113,113,0.4); color: var(--fail); border-radius: 8px; padding: 4px 10px; font-size: 0.75rem; cursor: pointer; }

.bot-controls { display: flex; gap: 10px; margin: 4px 0 16px; flex-wrap: wrap; align-items: center; }
.game-mode-controls { display: flex; gap: 10px; margin: 4px 0 10px; flex-wrap: wrap; align-items: center; }
.bot-difficulty {
  width: auto;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 0.9rem;
}
/* Les <option> ignorent souvent le style du <select> parent et retombent sur le blanc par
   defaut du systeme/navigateur pour le menu deroulant : on force explicitement le theme sombre. */
select option { background: var(--bg); color: var(--text); }

.turn-banner {
  text-align: center;
  font-weight: 700;
  padding: 10px;
  border-radius: 12px;
  background: rgba(34,193,195,0.15);
  border: 1px solid rgba(34,193,195,0.4);
  margin-bottom: 6px;
}
.turn-banner.mine { background: rgba(74,222,128,0.18); border-color: rgba(74,222,128,0.5); }

.build-piles, .discard-row, .hand-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.playing-card {
  width: 52px;
  height: 74px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  background: linear-gradient(160deg, #fff, #e4e4e4);
  color: #16151f;
  border: 2px solid rgba(0,0,0,0.15);
  cursor: default;
  user-select: none;
  flex: 0 0 auto;
  transition: transform 0.12s, outline 0.12s;
}
.playing-card.skipbo { background: linear-gradient(160deg, var(--primary), var(--primary-2)); color: #0e0e16; font-size: 0.65rem; text-align: center; }
.playing-card.empty { background: rgba(255,255,255,0.05); color: var(--muted); border: 2px dashed var(--card-border); font-weight: 600; font-size: 0.75rem; }
.playing-card.clickable { cursor: pointer; }
.playing-card.clickable:hover { transform: translateY(-4px); }
.playing-card.selected { outline: 3px solid var(--primary-2); transform: translateY(-6px); }
.playing-card.draggable { cursor: grab; }
.playing-card.draggable:active { cursor: grabbing; }
.playing-card.dragging { opacity: 0.4; }

/* Zones de depot (piles de construction, defausses perso) : bordure en pointilles qui se
   met en valeur au survol d'une carte glissee, pour rendre le drag-and-drop instinctif. */
.drop-zone.drag-over { outline: 3px dashed var(--primary-2); outline-offset: 2px; border-radius: 10px; }

.table-area { margin-bottom: 18px; }
.table-area .build-piles { justify-content: center; gap: 14px; }
.table-area .build-piles .playing-card { width: 60px; height: 84px; font-size: 1.2rem; }
.table-center { text-align: center; }

/* Une ligne compacte par adversaire (nom + pioche + defausses) : reste lisible sans defiler
   meme avec le maximum de 5 adversaires (6 joueurs), plutot qu'une carte large par joueur. */
.opponents {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
  max-height: 220px;
  overflow-y: auto;
}
.opponent {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 5px 10px;
}
.opponent.current-turn { border-color: var(--primary-2); box-shadow: 0 0 0 1px var(--primary-2); }
.opponent-name { font-weight: 700; font-size: 0.8rem; flex: 0 0 auto; min-width: 80px; }
.opponent-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.opponent-group { display: flex; align-items: center; gap: 3px; }
.opponent .playing-card { width: 24px; height: 34px; font-size: 0.62rem; border-width: 1px; }

/* Sur grand ecran : les adversaires sont disposes en cercle autour des piles communes, comme
   une table de poker. Bascule geree en JS (isCircleLayout) selon la largeur de fenetre, pour
   garder l'affichage mobile simple (liste compacte empilee) tel quel. */
@media (min-width: 768px) {
  /* Hauteur ajustee au strict necessaire pour le rayon vertical fixe utilise dans
     seatPosition() (ryPx/centerYPx, en JS) : l'arc de sieges n'occupe que le haut de
     l'ellipse, donc pas besoin de reserver la hauteur d'un cercle complet. Si ryPx/centerYPx
     changent en JS, revalider cette hauteur (doit couvrir centerYPx + ryPx + ~45px de marge). */
  .table-area.circle-mode {
    position: relative;
    height: 240px;
    margin-bottom: 4px;
  }
  .table-area.circle-mode #opponents {
    position: absolute;
    inset: 0;
    display: block;
    max-height: none;
    overflow: visible;
    margin-bottom: 0;
  }
  /* Ancre les piles communes sur le MEME point de reference vertical que les sieges
     (centerYPx dans seatPosition(), app.js) : sinon un centrage flex independant se
     desynchronise visuellement du cercle des que la hauteur du conteneur change. */
  .table-area.circle-mode .table-center {
    position: absolute;
    top: 165px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .table-area.circle-mode .opponent {
    position: absolute;
    transform: translate(-50%, -50%);
    flex-direction: column;
    text-align: center;
    width: 150px;
    padding: 6px 10px;
    gap: 4px;
    overflow: hidden;
  }
  .table-area.circle-mode .opponent-name {
    font-size: 0.72rem;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .table-area.circle-mode .opponent-row { flex-direction: column; gap: 2px; }
  .table-area.circle-mode .opponent-group.discard-row { flex-wrap: nowrap; }
  .table-area.circle-mode .opponent .playing-card { width: 22px; height: 32px; font-size: 0.58rem; }
}

.my-area { margin-top: 4px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.my-zones { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; align-items: flex-end; margin-bottom: 6px; }
.my-zone { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.my-area .hand-row { justify-content: center; }
.card-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.slot-label { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.zone-label { font-size: 0.7rem; color: var(--muted); }

.action-hint { min-height: 1.2em; margin: 4px 0 14px; text-align: center; }

.history-panel { display: none; }
.history-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column-reverse; gap: 8px; overflow-y: auto; }
.history-list li { font-size: 0.82rem; color: var(--muted); border-bottom: 1px solid var(--card-border); padding-bottom: 8px; }
.history-list li:last-child { color: var(--text); font-weight: 600; }

/* Panneau d'historique FIXE hors flux, comme le chat mais a gauche : ne reduit jamais la
   zone de jeu centrale. Visible seulement si la fenetre est assez large pour ne pas empieter
   sur le contenu centre (#app fait 820px de large max) - sinon simplement absent, plutot que
   de rogner la place du plateau. */
@media (min-width: 1180px) {
  .history-panel {
    display: block;
    position: fixed;
    left: 24px;
    top: 90px;
    width: 260px;
    max-height: calc(100vh - 120px);
    z-index: 30;
  }
  .history-panel .history-list { max-height: calc(100vh - 200px); }
}

.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 10;
  padding: 20px;
}
.modal-content {
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  position: relative;
  max-width: 320px;
  width: 100%;
}
.modal-close { position: absolute; top: 10px; right: 14px; background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
#qrImage { width: 100%; border-radius: 12px; margin: 12px 0; background: #fff; }

@media (max-width: 480px) {
  .playing-card { width: 44px; height: 62px; font-size: 0.95rem; }
  .card { padding: 20px; }
}

/* ---------- Chat du salon ---------- */
.chat-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(34, 193, 195, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-fab:hover { box-shadow: 0 10px 30px rgba(34, 193, 195, 0.55); }

.chat-unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--fail);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 40;
  width: min(340px, calc(100vw - 48px));
  height: min(440px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  background: #14121f;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--card-border);
  font-weight: 700;
  flex: 0 0 auto;
}
.chat-header .modal-close { position: static; }

.chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-msg { max-width: 88%; }
.chat-msg .chat-msg-name { font-size: 0.72rem; color: var(--muted); margin-bottom: 2px; }
.chat-msg .chat-msg-bubble {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--card-border);
  font-size: 0.92rem;
  word-break: break-word;
}
.chat-msg.chat-msg-mine { align-self: flex-end; text-align: right; }
.chat-msg.chat-msg-mine .chat-msg-bubble {
  background: linear-gradient(135deg, rgba(34,193,195,0.4), rgba(253,187,45,0.35));
  border-color: rgba(34,193,195,0.5);
}
.chat-msg-system { align-self: center; color: var(--muted); font-size: 0.78rem; }

.chat-input-row {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--card-border);
}
.chat-input-row input { flex: 1; min-width: 0; }
.chat-send-btn { flex: 0 0 auto; padding: 10px 16px; }

@media (max-width: 420px) {
  .chat-panel { right: 12px; bottom: 84px; }
  .chat-fab { right: 16px; bottom: 16px; }
}

/* ---------- Salons publics (parite avec Just One) ---------- */
.brand-link {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 10px;
  transition: background 0.15s;
  font-family: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-link:hover { background: rgba(255,255,255,0.08); }

.footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 30px 20px 40px;
  position: relative;
  z-index: 1;
}

.public-rooms-link {
  display: block;
  text-align: center;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}
.public-rooms-link:hover { color: var(--text); text-decoration: underline; }

.public-controls { margin: 18px 0; }
.public-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.25);
}
.public-toggle-title { font-weight: 700; margin: 0 0 2px; }

.switch {
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  border: 1px solid var(--card-border);
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
.switch[aria-checked="true"] {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: transparent;
}
.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); }

.rooms-list { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.room-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 16px 18px;
}
.room-card-title { font-weight: 700; margin-bottom: 4px; }
.room-card-code {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 1px;
  margin-left: 6px;
}