/* ============================================================
   JUMP'N BUMP — habillage
   L'arene est un canvas de taille fixe (1448x1086) mis a l'echelle
   par le navigateur ; tout le reste est de l'interface posee
   par-dessus, dans la langue graphique du reste du site.
   ============================================================ */

.jnb{
  --grass:#7BC043;
  --sky:#0B62D6;
  --gold:#FFD447;
  grid-template-rows:minmax(0,1fr);
  background:#05060A;
}

.jnb-stage{
  position:relative;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, #123a72 0%, #0a1730 55%, #05060A 100%);
}

/* ---------- l'arene ---------- */

/* La piste explicite (100% / 100%) donne a la case une hauteur
   definie : sans elle, le `max-height:100%` du canvas se resout
   contre une hauteur automatique, donc contre rien, et l'arene
   deborde par le bas. */
.jnb-frame{
  position:absolute;
  inset:0;
  display:grid;
  grid-template:100% / 100%;
  place-items:center;
  overflow:hidden;
  padding:clamp(4px, 1.2vmin, 22px) clamp(4px, 1.2vmin, 22px) clamp(22px, 3.4vmin, 44px);
}

#stage{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
  border:2px solid rgba(237,231,218,.14);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 30px 90px rgba(0,0,0,.65);
  background:#0B1608;
}

/* ============================================================
   LA BARRE DU LOBBY
   Elle occupe la bande noire du bas de la carte. Sa position est
   calculee en JS ; tout ce qui suit est mis a l'echelle par --u,
   le rapport entre la carte affichee et sa taille d'origine.
   ============================================================ */

.lobbybar, .lobbytip{
  position:absolute;
  z-index:15;
  --u:1;
  display:flex;
  align-items:center;
  pointer-events:none;
}
.lobbybar[hidden], .lobbytip[hidden]{ display:none }

.lobbybar{
  padding:0 calc(var(--u) * 40px);
  gap:calc(var(--u) * 30px);
}

.lb-col{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(var(--u) * 8px);
  pointer-events:auto;
}

.lb-t{
  font-size:calc(var(--u) * 15px);
  letter-spacing:.26em;
  color:var(--txt-3);
  white-space:nowrap;
}

.lb-row{ display:flex; align-items:center; gap:calc(var(--u) * 10px) }

.lobbybar #f-name{
  flex:0 0 auto;
  width:calc(var(--u) * 300px);
  text-align:center;
  padding:calc(var(--u) * 10px) calc(var(--u) * 14px);
  font-size:calc(var(--u) * 22px);
  letter-spacing:.18em;
  background:rgba(237,231,218,.07);
  border-color:rgba(237,231,218,.28);
}

.lobbybar .colors{
  display:flex;
  gap:calc(var(--u) * 8px);
  grid-template-columns:none;
}
.lobbybar .swatch{
  padding:calc(var(--u) * 6px);
  border-width:2px;
}
.lobbybar .swatch i{
  width:calc(var(--u) * 26px);
  height:calc(var(--u) * 26px);
}

.lobbybar .btn{
  font-size:calc(var(--u) * 17px);
  padding:calc(var(--u) * 11px) calc(var(--u) * 20px);
}

.roomtag{
  font-family:'Archivo Black',Impact,sans-serif;
  font-size:calc(var(--u) * 26px);
  letter-spacing:.2em;
  color:var(--cyan);
  background:rgba(95,235,247,.08);
  border:2px solid rgba(95,235,247,.45);
  padding:calc(var(--u) * 7px) calc(var(--u) * 14px);
  cursor:pointer;
}
.roomtag:hover{ background:rgba(95,235,247,.2); color:var(--bone) }
.roomtag[hidden]{ display:none }

.lobbytip{
  justify-content:center;
  font-size:calc(var(--u) * 22px);
  letter-spacing:.3em;
  color:var(--orange);
  text-align:center;
  margin:0;
}

/* ---------- panneaux (multijoueur, reglages) ---------- */

.panel{
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  padding:clamp(14px, 3vmin, 40px);
  overflow:auto;
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(5,6,10,.72), rgba(5,6,10,.94));
  backdrop-filter:blur(4px);
}

.panel.hidden{ display:none }

.panel.modal{
  background:rgba(5,6,10,.82);
}

.panel-in{
  width:min(560px, 100%);
  border:var(--edge) solid var(--line);
  background:linear-gradient(180deg, rgba(20,20,22,.96), rgba(10,10,11,.96));
  padding:clamp(20px, 3.4vmin, 40px);
  display:flex;
  flex-direction:column;
  gap:clamp(12px, 1.8vmin, 20px);
}

.panel-in.wide{ width:min(760px, 100%) }

/* ---------- typographie ---------- */

.eyebrow{
  display:flex;
  align-items:center;
  gap:.7em;
  font-size:var(--fs-xs);
  letter-spacing:.34em;
  color:var(--txt-3);
  text-transform:uppercase;
}
.eyebrow i{ flex:1 1 0; height:1px; background:var(--line) }
.eyebrow u{ text-decoration:none; color:var(--orange) }
.eyebrow .code{ color:var(--cyan); letter-spacing:.5em; font-weight:700 }

.title{
  font-family:'Archivo Black',Impact,sans-serif;
  font-size:clamp(30px, 6.4vmin, 68px);
  line-height:.94;
  letter-spacing:-.02em;
  color:var(--bone);
}
.title span{ color:var(--orange) }
.title.small{
  font-size:clamp(16px, 2.4vmin, 26px);
  letter-spacing:.06em;
  color:var(--txt-2);
}

.lead{ color:var(--txt-2); font-size:var(--fs-sm); line-height:1.65; max-width:52ch }

.hint{ font-size:var(--fs-xs); color:var(--txt-3); line-height:1.7 }
.hint b{
  color:var(--cyan);
  font-weight:700;
  border:1px solid var(--line);
  padding:.05em .45em;
}

/* ---------- controles ---------- */

.row{ display:flex; align-items:center; gap:clamp(8px, 1.2vmin, 14px) }
.row.wrap{ flex-wrap:wrap }
.row.join{ gap:6px }

input[type=text], input[type=number]{
  flex:1 1 0;
  min-width:0;
  background:rgba(237,231,218,.05);
  border:var(--edge) solid var(--line);
  color:var(--bone);
  font:inherit;
  font-size:var(--fs-md);
  letter-spacing:.12em;
  padding:.7em .9em;
}
input[type=text]:focus, input[type=number]:focus{
  outline:none;
  border-color:var(--orange);
  background:rgba(255,77,0,.06);
}
/* ---------- code du salon : quatre cases d'un chiffre ---------- */

.code-lbl{ font-size:var(--fs-xs); letter-spacing:.24em; color:var(--txt-3) }
.code-in{ display:flex; gap:6px }
.code-in input{
  flex:0 0 auto;
  width:2.2em;
  padding:.5em 0;
  text-align:center;
  font-size:var(--fs-md);
  font-weight:700;
  letter-spacing:0;
  color:var(--cyan);
  caret-color:var(--orange);
}
.code-in input:focus{ border-color:var(--cyan); background:rgba(95,235,247,.08) }

.bigcode{
  font-size:var(--fs-xs);
  letter-spacing:.3em;
  color:var(--txt-3);
}
.bigcode b{
  display:inline-block;
  margin-left:.6em;
  font-family:'Archivo Black',Impact,sans-serif;
  font-size:clamp(22px, 3.4vmin, 40px);
  letter-spacing:.18em;
  color:var(--cyan);
  vertical-align:-.15em;
}
#f-target{ flex:0 0 6ch; text-align:center; padding:.4em }
#f-target:disabled{ opacity:.45 }

.btn{
  flex:none;
  border:var(--edge) solid var(--line);
  background:rgba(237,231,218,.04);
  color:var(--txt);
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:.2em;
  padding:.75em 1.3em;
  cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover{ border-color:var(--bone); background:rgba(237,231,218,.1) }
.btn.primary{ border-color:var(--orange); color:var(--orange); background:rgba(255,77,0,.08) }
.btn.primary:hover{ background:var(--orange); color:var(--black) }
.btn.ghost{ color:var(--txt-3) }
.btn.ghost:hover{ color:var(--txt) }
.btn.on{ border-color:var(--cyan); color:var(--cyan); background:rgba(95,235,247,.1) }
.btn.hidden{ display:none }

.back{
  align-self:flex-start;
  font-size:var(--fs-xs);
  letter-spacing:.2em;
  color:var(--txt-3);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.back:hover{ color:var(--orange); border-color:var(--orange) }
.back.as-btn{ background:none; border:0; font:inherit; font-size:var(--fs-xs);
  letter-spacing:.2em; cursor:pointer; padding:0 }

.target{
  display:flex;
  align-items:center;
  gap:.6em;
  font-size:var(--fs-xs);
  letter-spacing:.2em;
  color:var(--txt-3);
}
.target output{ color:var(--cyan); min-width:3ch; text-align:right }
.target input[type=range]{
  width:clamp(80px, 14vmin, 160px);
  accent-color:var(--cyan);
}

/* ---------- liste des salons ---------- */

.rooms-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
  font-size:var(--fs-xs);
  letter-spacing:.2em;
  color:var(--txt-3);
}
#rooms-state.bad{ color:var(--orange) }
.eyebrow #rooms-state{ letter-spacing:.24em }

.mini{
  background:none;
  border:1px solid var(--line);
  color:var(--txt-3);
  font:inherit;
  font-size:var(--fs-xs);
  letter-spacing:.2em;
  padding:.25em .8em;
  cursor:pointer;
}
.mini:hover{ color:var(--cyan); border-color:var(--cyan) }

.rooms{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:34vh;
  overflow:auto;
  border:1px solid var(--line);
  padding:6px;
}
.rooms .empty{
  padding:1.6em .8em;
  text-align:center;
  color:var(--txt-3);
  font-size:var(--fs-xs);
  letter-spacing:.14em;
}

.room{
  display:grid;
  grid-template-columns:5ch 1fr auto auto;
  align-items:center;
  gap:1em;
  text-align:left;
  background:rgba(237,231,218,.04);
  border:1px solid transparent;
  color:var(--txt-2);
  font:inherit;
  font-size:var(--fs-xs);
  padding:.75em .9em;
  cursor:pointer;
}
.room:hover:not(:disabled){ border-color:var(--orange); background:rgba(255,77,0,.08) }
.room:disabled{ opacity:.4; cursor:not-allowed }
.room-code{ font-weight:700; letter-spacing:.28em; color:var(--cyan) }
.room-who{ color:var(--txt-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.room-n{
  color:var(--bone);
  font-weight:700;
  border:1px solid var(--line);
  padding:.15em .6em;
  white-space:nowrap;
}
.room-n s{ text-decoration:none; color:var(--txt-3); margin:0 .1em }
.room-n.full{ color:var(--orange); border-color:var(--orange) }
.room-go{ color:var(--orange); letter-spacing:.2em }

/* ---------- choix du pelage ---------- */

.colors{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
}

.swatch{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5em;
  padding:.5em;
  background:rgba(237,231,218,.04);
  border:var(--edge) solid var(--line);
  color:var(--txt-3);
  font:inherit;
  font-size:var(--fs-xs);
  letter-spacing:.1em;
  cursor:pointer;
}
.swatch i{
  width:1.9em;
  height:1.9em;
  border-radius:50%;
  background:var(--tint);
  box-shadow:inset 0 -.35em .5em rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.5);
}
.swatch:hover:not(:disabled){ border-color:var(--bone); color:var(--txt) }
.swatch.on{ border-color:var(--cyan); color:var(--cyan); background:rgba(95,235,247,.1) }
.swatch.taken{ opacity:.28; cursor:not-allowed }

/* ---------- joueurs du salon ---------- */

.slots{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
}

.slot{
  display:flex;
  flex-direction:column;
  gap:.35em;
  padding:.8em .7em;
  border:var(--edge) solid var(--line);
  border-left:3px solid var(--tint, var(--line));
  background:rgba(237,231,218,.04);
  font-size:var(--fs-xs);
  min-width:0;
}
.slot.empty{ opacity:.35; border-left-color:var(--line) }
.slot.ready{ background:rgba(95,235,247,.07) }
.slot-n{ font-weight:700; color:var(--bone); letter-spacing:.06em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.slot-c{ color:var(--txt-3); letter-spacing:.12em }
.slot-s{ color:var(--txt-3); letter-spacing:.18em }
.slot.ready .slot-s{ color:var(--cyan) }

/* ---------- reassignation des touches ---------- */

.binds{ list-style:none; display:flex; flex-direction:column; gap:6px }
.binds li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
  flex-wrap:wrap;
  padding:.55em .8em;
  border:1px solid var(--line);
  background:rgba(237,231,218,.03);
  font-size:var(--fs-xs);
  color:var(--txt-2);
  letter-spacing:.1em;
}
.keys{ display:flex; align-items:center; gap:5px; flex-wrap:wrap }

.key{
  min-width:6.5ch;
  border:var(--edge) solid var(--line);
  background:rgba(237,231,218,.06);
  color:var(--cyan);
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.16em;
  padding:.4em .8em;
  cursor:pointer;
}
.key:hover{ border-color:var(--cyan) }
.key.add{
  min-width:0;
  padding:.4em .7em;
  color:var(--orange);
  border-color:rgba(255,77,0,.4);
  background:rgba(255,77,0,.07);
}
.key.add:hover{ border-color:var(--orange); background:rgba(255,77,0,.18) }
.key.listening{
  border-color:var(--orange);
  color:var(--orange);
  animation:jnb-pulse 1s ease-in-out infinite;
}
@keyframes jnb-pulse{ 50%{ background:rgba(255,77,0,.16) } }

/* ---------- messages en jeu ---------- */

.toast{
  position:absolute;
  z-index:30;
  left:50%;
  bottom:9vmin;
  transform:translateX(-50%);
  padding:.7em 1.4em;
  border:var(--edge) solid var(--orange);
  background:rgba(10,10,11,.9);
  color:var(--bone);
  font-size:var(--fs-sm);
  letter-spacing:.16em;
  white-space:nowrap;
  pointer-events:none;
}
.toast.hidden{ display:none }

.tip{
  position:absolute;
  z-index:25;
  left:50%;
  bottom:1.6vmin;
  transform:translateX(-50%);
  font-size:var(--fs-xs);
  letter-spacing:.16em;
  color:var(--txt-3);
  white-space:nowrap;
  pointer-events:none;
  text-align:center;
}
.tip.hidden{ display:none }

.check{
  display:flex;
  align-items:center;
  gap:.5em;
  font-size:var(--fs-xs);
  letter-spacing:.2em;
  color:var(--txt-3);
  cursor:pointer;
}
.check input{ accent-color:var(--orange); width:1em; height:1em }
.check span{ color:var(--txt-2) }
.tip b{ color:var(--cyan); font-weight:700 }
.tip em{
  font-style:normal;
  color:var(--orange);
  letter-spacing:.24em;
  margin-right:.8em;
  padding-right:.8em;
  border-right:1px solid var(--line);
}

@media (max-width:620px){
  .colors{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .slots{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .room{ grid-template-columns:5ch 1fr auto; }
  .room-go{ display:none }
  .tip{ white-space:normal; width:90% }
}

@media (prefers-reduced-motion:reduce){
  .key.listening{ animation:none }
}