/* Bane.fr -- styles partagés par toutes les pages du site (mêmes tokens
   que ceux utilisés dans le jeu, pour que le site et le jeu se ressemblent). */

:root{
  --bg:#0d0a07;
  --stone-1:#171310;
  --stone-2:#241d15;
  --stone-3:#332819;
  --stone-4:#3d3020;
  --stone-edge:#463621;
  --parchment:#e9dfc2;
  --ink:#efe4c8;
  --muted:#a3947a;
  --muted-2:#71624a;
  --gold:#cb9f3e;
  --gold-bright:#e9c168;
  --gold-dim:#7c5f24;
  --blue:#5a9bcf;
  --blue-dim:#284256;
  --red:#c4574a;
  --red-dim:#5c2823;
  --good:#7fae5c;
  --danger:#d9503f;
  --shadow-deep: 0 10px 30px rgba(0,0,0,.55);
  --font-display:'Cinzel','Times New Roman',serif;
  --font-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}

*{box-sizing:border-box;}
html{background:var(--bg);}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
a{color:inherit;}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:var(--font-display);color:var(--gold-bright);margin:0;text-wrap:balance;}
.wrap{max-width:1180px;margin:0 auto;padding-inline:24px;}

::selection{background:var(--gold-dim);color:var(--parchment);}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--gold-bright); outline-offset:2px; border-radius:4px;
}

/* ---------- shared panel look, matches the game's UI ---------- */
.stonepanel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.15)),
    var(--stone-2);
  border:1px solid var(--stone-edge);
  border-radius:10px;
  box-shadow: var(--shadow-deep), inset 0 0 0 1px rgba(255,255,255,.03);
}
.eyebrow{
  font-family:var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12.5px;
  color:var(--gold);
}
.icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- nav ---------- */
header.nav{
  position:sticky; top:0; z-index:20;
  background:rgba(13,10,7,.86);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--stone-edge);
}
header.nav .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px;
}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:19px; letter-spacing:.04em; color:var(--parchment); text-decoration:none;}
.brand .icon{width:22px;height:22px;color:var(--gold-bright);}
nav.links{display:flex; align-items:center; gap:28px;}
nav.links a.navlink{font-size:14.5px; color:var(--muted); text-decoration:none; transition:color .15s;}
nav.links a.navlink:hover{color:var(--gold-bright);}
.navactions{display:flex; align-items:center; gap:10px;}

/* ---------- sélecteur de langue FR/EN (public/_main_nav.php) ---------- */
/* Hors de nav.links exprès -- ce bloc reste visible même quand nav.links
   disparaît sous 860px (voir plus bas). */
.lang-switch{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.02em;
}
.lang-switch .lang-sep{color:var(--stone-edge);}
.lang-switch .lang-link{color:var(--muted); text-decoration:none; transition:color .15s;}
.lang-switch .lang-link:hover{color:var(--gold-bright);}
.lang-switch .lang-link.active{color:var(--gold-bright); font-weight:600; pointer-events:none;}

/* ---------- menu compte (icône + popup au survol) ---------- */
/* padding-bottom étend la zone survolable de .account-menu (invisible, pas
   de fond ni de bordure sur ce bloc) jusqu'à toucher .account-dropdown en
   dessous -- sans ça, le survol se perd dans l'espace vide entre l'icône
   et le popup dès que la souris le traverse, refermant le menu avant même
   d'atteindre ses options. */
.account-menu{position:relative; display:flex; align-items:center; gap:9px; padding-bottom:9px; margin-bottom:-9px;}
.account-pseudo{font-size:14px; color:var(--parchment); white-space:nowrap;}
.account-pseudo strong{color:var(--gold-bright);}
.account-icon-btn{
  width:32px; height:32px; border-radius:999px; flex:none;
  border:1px solid var(--stone-edge); background:var(--stone-3); color:var(--muted);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s, border-color .15s;
}
.account-icon-btn svg{width:17px; height:17px;}
.account-icon-btn:hover, .account-icon-btn.open{
  background:var(--stone-edge); color:var(--gold-bright); border-color:var(--gold-dim);
}
.account-dropdown{
  position:absolute; top:calc(100% + 9px); right:0; min-width:184px;
  background:var(--stone-2); border:1px solid var(--stone-edge); border-radius:10px;
  box-shadow:var(--shadow-deep); padding:6px; z-index:30;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
/* Ouvert au survol de tout le bloc (icône + nom), ou via .open (clic/clavier,
   voir assets/js/account-menu.js -- utile au tactile, qui n'a pas de survol). */
.account-menu:hover .account-dropdown, .account-dropdown.open{
  opacity:1; visibility:visible; transform:translateY(0);
}
.account-dropdown-item{
  display:block; width:100%; text-align:left; padding:9px 12px; border-radius:7px;
  font-family:var(--font-body); font-size:13.5px; color:var(--parchment);
  text-decoration:none; background:none; border:none; cursor:pointer;
}
.account-dropdown-item:hover{background:var(--stone-3); color:var(--gold-bright);}
.account-dropdown-btn{
  border-top:1px solid var(--stone-edge); margin-top:4px; padding-top:10px; color:var(--muted);
}
.account-dropdown-btn:hover{color:var(--danger);}

/* ---------- bulle score + classement (jamais un lien -- purement informatif) ---------- */
.score-bubble{
  display:flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px;
  background:var(--stone-3); border:1px solid var(--stone-edge);
  font-family:var(--font-mono); font-size:12px; white-space:nowrap; cursor:default;
}
.score-bubble[hidden]{display:none;}
.score-bubble-value{color:var(--gold-bright); font-weight:600;}
.score-bubble-rank{color:var(--muted);}

@media (max-width:560px){
  .account-pseudo{display:none;}
  .score-bubble{padding:6px 10px; font-size:11px;}
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  padding:10px 20px; border-radius:8px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; white-space:nowrap;
}
.btn-primary{background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#241a06; box-shadow:0 4px 14px rgba(203,159,62,.25);}
.btn-primary:hover{filter:brightness(1.06);}
.btn-primary:disabled{filter:grayscale(.4); opacity:.6; cursor:not-allowed;}
.btn-ghost{background:rgba(233,223,194,.05); color:var(--parchment); border-color:var(--stone-edge);}
.btn-ghost:hover{border-color:var(--gold-dim); color:var(--gold-bright);}
.btn-sm{padding:7px 14px; font-size:13px;}
.btn-block{width:100%;}

/* ---------- panels + room list (page d'accueil et liste des parties) ---------- */
.panel{padding:26px 26px 10px;}
.panel-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; flex-wrap:wrap;}
.panel-head h2{font-size:20px;}
.panel-count{font-family:var(--font-mono); font-size:12.5px; color:var(--muted);}
.panel-note{font-size:12.5px; color:var(--muted-2); margin:0 0 18px; font-style:italic;}

.room-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 0; border-top:1px solid var(--stone-edge); flex-wrap:wrap;
}
.room-row:first-child{border-top:none;}
.room-main{min-width:0;}
.room-name{font-family:var(--font-display); font-size:15.5px; color:var(--parchment); letter-spacing:.01em;}
.room-host{font-size:12.5px; color:var(--muted); margin-top:2px;}
.room-host b{color:var(--muted-2); font-weight:600;}
.room-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.players-count{font-family:var(--font-mono); font-size:13px; color:var(--gold-bright); font-variant-numeric:tabular-nums;}
.status-pill{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.status-waiting{background:rgba(127,174,92,.14); color:var(--good); border:1px solid rgba(127,174,92,.35);}
.status-live{background:rgba(217,80,63,.14); color:var(--danger); border:1px solid rgba(217,80,63,.35);}
.status-full{background:rgba(163,148,122,.12); color:var(--muted); border:1px solid var(--stone-edge);}
.room-time{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2); min-width:64px; text-align:right;}

@media (max-width:520px){
  .room-meta{justify-content:flex-start; width:100%;}
  .room-time{text-align:left;}
}

footer{border-top:1px solid var(--stone-edge); padding-block:36px; text-align:center;}
footer .brand{justify-content:center; margin-bottom:8px;}
footer p{color:var(--muted-2); font-size:13px; margin:4px 0 0;}

@media (max-width:860px){
  nav.links{display:none;}
}
@media (max-width:480px){
  .wrap{padding-inline:16px;}
  header.nav .bar{gap:10px;}
  .brand{font-size:15px; gap:6px;}
  .brand .icon{width:18px; height:18px;}
  .navactions{gap:6px;}
  .btn-sm{padding:7px 11px; font-size:12.5px;}
}

/* ---------- présence (en ligne / hors ligne) + défis -- voir _presence.php, assets/js/presence.js ---------- */
.presence-dot{
  display:inline-block; width:9px; height:9px; border-radius:999px; flex:none;
  background:var(--muted-2); box-shadow:0 0 0 2px rgba(0,0,0,.15) inset;
}
/* Vert plus saturé qu'un simple var(--good) (trop terne sur le fond sombre)
   + halo lumineux, pour que le statut "en ligne" saute vraiment aux yeux
   dans un tableau dense. */
.presence-dot.online{
  background:#3ddc6f;
  box-shadow:0 0 0 3px rgba(61,220,111,.22), 0 0 9px 1px rgba(61,220,111,.75);
}

.bane-challenge-overlay{
  position:fixed; inset:0; background:rgba(10,8,5,.62); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;
}
.bane-challenge-overlay[hidden]{display:none;}
.bane-challenge-box{
  width:min(400px, 100%); padding:26px 24px; text-align:center;
}
.bane-challenge-box p{font-size:15px; color:var(--parchment); margin:0 0 20px;}
.bane-challenge-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.bane-challenge-actions .btn{flex:1 1 140px;}