/* ===========================
   Wordy – styles.css (v7)
   Thème "classe d'école" pastel
   =========================== */

/* ---------- Variables ---------- */
:root{
  --paper:      #f7f7fb;      /* fond principal doux */
  --paper-2:    #ffffff;      /* cartes / modales */
  --ink:        #1f2937;      /* texte principal */
  --ink-dim:    #4b5563;      /* texte secondaire */
  --line:       #d9dde6;      /* bordures fines */
  --shadow:     0 10px 26px rgba(31,41,55,.16);

  --primary:        #2b6cb0;  /* bleu ardoise doux */
  --primary-soft:   #e6eef8;
  --accent:         #c084fc;  /* violet pastel discret */
  --success:        #16a34a;
  --danger:         #dc2626;
  --warning:        #f59e0b;

  --glass:      rgba(255,255,255,.68);
  --glass-weak: rgba(255,255,255,.45);

  --ease: cubic-bezier(.2,.9,.2,1);

  /* Tailles mini-cartes */
  --mini-w: 58px;
  --mini-h: 80px;

  --radius: 14px;
}

/* ---------- Fonts ---------- */
@font-face{
  font-family: 'BalooLocal';
  src: url('/assets/fonts/Baloo2-Regular.ttf') format('truetype');
  font-display: swap;
}

/* ---------- Reset / base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  font-family: BalooLocal, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--paper);
}

/* Backgrounds (2 thèmes) */
body.theme-night{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.0)),
    url('/assets/bg/bg_night.png') center/cover fixed no-repeat;
}
body.theme-nay{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.0)),
    url('/assets/bg/bg_nay.png') center/cover fixed no-repeat;
}

#app{ max-width:1200px; margin:18px auto; padding:0 14px; }

/* ---------- Header ---------- */
.head-bar{
  display:flex; gap:8px; align-items:center;
  background:var(--glass); backdrop-filter: blur(6px);
  padding:10px; border-radius: var(--radius); border:1px solid var(--line);
  box-shadow: 0 6px 18px rgba(31,41,55,.10);
}
.pill{
  padding:6px 10px;
  border-radius:999px;
  background: var(--primary-soft);
  border:1px solid var(--line);
  color: var(--ink);
  font-weight:800;
}
.spacer{ flex:1; }

/* ---------- Cards / blocs ---------- */
.card{ border-radius: var(--radius); padding:12px; }
.translucent{ background:var(--glass); border:1px solid var(--line); }

/* ---------- Form & pickers ---------- */
.controls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.controls input,.controls button,.controls select{
  padding:8px 12px; border-radius:12px;
  border:1px solid var(--line); background: var(--paper-2); color: var(--ink);
}
.controls select{ cursor:pointer; }
.picker{ display:flex; align-items:center; gap:8px; }
#avImg{ width:44px; height:44px; border-radius:10px; border:1px solid var(--line); object-fit:cover; display:block; }
.picker button{ width:32px; height:32px; border-radius:10px; border:1px solid var(--line); background:var(--paper-2); cursor:pointer; }

/* ---------- Boutons ---------- */
.btn{
  cursor:pointer; font-weight:900; color:#fff;
  background: linear-gradient(180deg, #6ea8e3, #2b6cb0);
  border:1px solid #2b6cb0;
  border-radius:999px; padding:9px 14px;
  box-shadow: 0 2px 6px rgba(15,23,42,.12);
  transition: transform .08s var(--ease), filter .08s var(--ease), opacity .08s var(--ease);
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn:active{ transform: translateY(0); }
.btn.ghost{
  background: linear-gradient(180deg, #f1f5f9, #e2e8f0);
  border-color: #cbd5e1;
  color:#1f2937;
}
.btn.primary{
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  border-color: #2563eb;
  color:#fff;
}
.btn.danger{
  background: linear-gradient(180deg, #f87171, #dc2626);
  border-color:#dc2626; color:#fff;
}
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* ---------- Slider volume ---------- */
#vol{
  -webkit-appearance: none;
  width: 140px; height: 12px;
  background: transparent; outline: none;
  margin: 0 8px; padding: 0;
}
#vol::-webkit-slider-runnable-track{
  height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, #e2e8f0, #93c5fd);
  border: 1px solid #cbd5e1;
}
#vol::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 18px; height: 18px; margin-top: -4px;
  background: #fff; border-radius: 50%;
  border: 2px solid #2563eb;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
#vol::-moz-range-track{
  height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, #e2e8f0, #93c5fd);
  border: 1px solid #cbd5e1;
}
#vol::-moz-range-thumb{
  width: 18px; height: 18px; background: #fff; border-radius: 50%;
  border: 2px solid #2563eb; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* ---------- Table layout ---------- */
.table-area{
  position:relative; min-height:70vh; margin-top:12px;
  display:grid; grid-template-areas:
    "c0 center c1"
    ".  center ."
    "c2 center c3";
  grid-template-columns: 1fr minmax(280px, 360px) 1fr;
  grid-template-rows: auto 1fr auto;
  gap:14px;
}
.center-col{grid-area:center; display:flex; flex-direction:column; align-items:center; gap:12px}
.corner.c0{grid-area:c0}.corner.c1{grid-area:c1}.corner.c2{grid-area:c2}.corner.c3{grid-area:c3}
.corner{display:flex;justify-content:center;align-items:flex-start}

/* ---------- Joueurs & mini-mains ---------- */
.playerCard{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); padding:10px;
  backdrop-filter: blur(4px);
  margin: 0 auto;
  max-width: 100%;
  box-shadow: 0 6px 18px rgba(31,41,55,.08);
  transition: box-shadow .12s var(--ease), transform .08s var(--ease);
  position: relative; /* pour le halo pulse */
}
/* État "à toi de jouer" — contour plus épais + pulse */
.playerCard.is-turn{
  box-shadow: 0 0 0 4px rgba(37,99,235,.35), 0 12px 28px rgba(37,99,235,.20);
  transform: translateY(-1px);
}
.playerCard.is-turn::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius: calc(var(--radius) + 8px);
  border: 3px solid rgba(37,99,235,.35);
  pointer-events:none;
  animation: turnPulse 1.6s ease-out infinite;
}
@keyframes turnPulse{
  0%   { transform: scale(1);   opacity:.55; }
  70%  { transform: scale(1.06); opacity:0;  }
  100% { transform: scale(1.06); opacity:0;  }
}

.playerCard .head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.playerCard .head img{width:28px;height:28px;border-radius:50%}
.playerCard .name{font-weight:900}
.score-badge{
  margin-left:auto;background:var(--primary-soft);border:1px solid var(--line);
  border-radius:999px;padding:3px 8px;font-weight:800;color:var(--primary)
}

.mini-hand{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.mini-card{
  width: var(--mini-w); height: var(--mini-h);
  border-radius: 10px; border:1px solid var(--line);
  background:#fff; box-shadow: 0 4px 10px rgba(0,0,0,.08);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  transition: transform .08s var(--ease), box-shadow .12s var(--ease), outline-color .08s var(--ease);
}
.mini-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.mini-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.12); cursor:pointer; }
.mini-card[data-sel="1"]{
  outline: 3px solid #2563eb;
  box-shadow: 0 8px 22px rgba(37,99,235,.25);
}

/* ---------- Thème courant ---------- */
.theme-box{display:flex;flex-direction:column;align-items:center;margin:6px 0 2px}
#themeRibbon{
  font-size:12px;font-weight:900;color:#2563eb;letter-spacing:.08em;
  text-transform:uppercase;
}
.theme-current{
  font-size:22px;font-weight:900;color:#2563eb;text-align:center;
}

/* ---------- Piles ---------- */
/* (correctif alignement sur UNE ligne + mêmes dimensions + bloc) */
.piles{
  display:flex;
  gap:16px;
  align-items:flex-start;   /* aligne les sommets */
  flex-wrap:nowrap;         /* force une seule ligne */
  margin-top:6px;
}
.pile{position:relative;text-align:center}
.pile-img{
  width:96px;
  height:132px;
  display:block;            /* évite la baseline des <img> */
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow: var(--shadow);
  transition: transform .08s var(--ease), box-shadow .12s var(--ease), filter .08s var(--ease);
}
.pile-img.deck{
  background:url(/assets/cards/Carte_dos.png) center/cover no-repeat;
}
.pile-img.deck.clickable{ cursor:pointer; box-shadow: 0 10px 26px rgba(37,99,235,.25); }
.pile-img.deck.clickable:hover{ transform: translateY(-2px); }
.pile-img.discard{ object-fit:cover; border-radius:12px; }

.pile-count{
  position:absolute;right:-8px;top:-8px;
  background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:2px 6px;
  font-size:12px;font-weight:900;box-shadow:0 2px 8px rgba(30,50,80,.10)
}
.pile-title{font-size:12px;color:var(--ink-dim);margin-top:6px}

/* ---------- Zone de jeu (actions) ---------- */
.play-area{
  width:100%; background:var(--glass); border:1px solid var(--line);
  border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px;
}
#selectedCard{ font-weight:800; color:var(--ink-dim); }
.play-actions{ display:flex; gap:8px; }
.play-actions input{
  flex:1; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
}
.swap-box{ display:flex; gap:8px; align-items:center; }

/* ---------- Chat ---------- */
.chat{
  width:100%;
  background:var(--glass); border:1px solid var(--line); border-radius:12px;
  padding:8px; display:flex; flex-direction:column; gap:8px;
}
.chat-body{ max-height:200px; height:200px; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.chat-input{ display:flex; gap:8px }
.chat-input input{
  flex:1; padding:8px 10px; border-radius:10px; border:1px solid var(--line);
  background:#fff; color:var(--ink)
}
.chat-msg{ display:flex; gap:8px; align-items:flex-start }
.chat-msg .avatar{ width:24px; height:24px; border-radius:50% }
.chat-msg .bubble{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px; max-width:100%
}
.small{ font-size:12px }
.dim{ color: var(--ink-dim) }
.big{ font-size:18px; font-weight:900 }

/* Chat : messages Système */
.chat-msg.system .avatar{
  filter: grayscale(100%);
  opacity: .9;
}
.chat-msg.system .bubble{
  background: var(--sys-bg, #f1f5f9);
  border-color: var(--sys-border, #e2e8f0);
  color: var(--sys-ink, #334155);
  border-left: 4px solid #60a5fa;
  padding-left: 10px;
}
.chat-msg.system .bubble .small.dim b{
  color: var(--sys-ink, #334155);
}

/* ---------- Overlay (notif) ---------- */
.overlay{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999}
.overlay-card{
  padding:16px 22px; border-radius:18px; text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
  border:1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.overlay-title{ font-size:42px; line-height:1; color:#1e3a8a; font-weight:900 }
.overlay-sub{ margin-top:6px; font-weight:800; color:#334155 }

/* ---------- Modales ---------- */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:60 }
.modal-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.35) }
.modal-card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:12px; min-width:320px; max-width:92vw; max-height:80vh;
  padding:10px; overflow:auto; box-shadow: var(--shadow);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.modal-body{ max-height:70vh; overflow:auto }

/* ---------- Sélecteur de thèmes (modal) ---------- */
.theme-options-grid{
  display:grid; grid-template-columns: repeat(1, minmax(220px, 1fr));
  gap:10px; margin-top:10px;
}
.theme-card{
  display:block; width:100%;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px; text-align:center; font-weight:900; color:#1f2937;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .08s var(--ease), box-shadow .12s var(--ease), border-color .08s var(--ease);
}
.theme-card:hover{
  transform: translateY(-2px);
  border-color:#60a5fa;
  box-shadow: 0 12px 28px rgba(37,99,235,.18);
  cursor:pointer;
}

/* ---------- Public list item (home) ---------- */
.public-item{ transition: box-shadow .12s var(--ease), transform .08s var(--ease); }
.public-item:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }

/* ---------- Responsive ---------- */
@media (min-width: 520px){
  .theme-options-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (min-width: 880px){
  .theme-options-grid{ grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}
@media (max-width: 900px){
  .table-area{
    grid-template-areas:
      "center"
      "c0"
      "c1"
      "c2"
      "c3";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .center-col{ order: -1; }
  :root{
    --mini-w: 54px;
    --mini-h: 74px;
  }
}