/* ===== JOBBY — dossier RH, tampons et post-it sur un bureau en bois sombre ===== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --desk:#2A2521;
  --desk-2:#332C26;
  --paper:#F2EAD8;
  --paper-dark:#E4D8BC;
  --white:#FFFDF8;
  --ink:#211C16;
  --ink-soft:#4A4136;
  --stamp-red:#B5301F;
  --stamp-green:#2F6B42;
  --sticky:#F2C94E;
  --clip-blue:#2F5F80;
  --radius:10px;
  --shadow-card:0 6px 0 rgba(0,0,0,.2), 0 16px 26px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html,body{min-height:100%;}
body{
  margin:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.04), transparent 40%),
    repeating-linear-gradient(92deg, rgba(255,255,255,.012) 0 3px, transparent 3px 11px),
    var(--desk);
  background-attachment:fixed;
  color:var(--paper);
  font-family:'IBM Plex Sans', sans-serif;
  overflow-x:hidden;
}

.wrap{width:100%; max-width:1100px; margin:0 auto; padding:64px 20px 60px;}
.wrap.narrow{max-width:520px;}

h1,h2,h3{
  font-family:'Anton', sans-serif;
  font-weight:400;
  letter-spacing:.5px;
  text-transform:uppercase;
  margin:0 0 10px;
  line-height:1.12;
}
h1{font-size:clamp(28px,5vw,52px);}
h1.logo{font-size:clamp(56px,11vw,104px); line-height:1; margin-bottom:12px;}
h1.duel-q{font-size:clamp(24px,3.6vw,42px); text-transform:none;}
h2{font-size:clamp(22px,4vw,30px); text-transform:none;}
h3{font-size:20px; color:var(--ink);}
.wrap.narrow h1.logo{font-size:clamp(56px,16vw,88px);}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--sticky);
  margin-bottom:8px;
}
.subtitle{
  font-family:'IBM Plex Mono', monospace;
  color:#d2c8b2;
  font-size:14px;
  line-height:1.55;
  margin:0 0 30px;
}

/* ---- Dossiers en carton ---- */
.card{
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--radius);
  padding:26px 24px 24px;
  box-shadow:var(--shadow-card);
  position:relative;
}
.card + .card{margin-top:30px;}
.card.mt{margin-top:30px;}
.card p{margin:0 0 12px;}
.card ol{margin:6px 0 0; padding-left:22px; font-size:clamp(16px,2vw,20px); line-height:1.5;}
.card ol li + li{margin-top:8px;}
.left{text-align:left;}

.folder-tab{
  position:absolute; top:-13px; left:20px;
  background:var(--sticky);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:4px;
  transform:rotate(-2deg);
  box-shadow:0 3px 6px rgba(0,0,0,.3);
}
.question{
  font-family:'Anton', sans-serif;
  font-size:clamp(24px,3.6vw,40px);
  line-height:1.2;
  margin:6px 0 0 !important;
}
.blank{color:var(--clip-blue);}

/* ---- Boutons : pastilles épaisses ---- */
button, .btn{
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  border:none;
  border-radius:12px;
  padding:13px 22px;
  display:inline-block;
  text-align:center;
  text-decoration:none;
  color:var(--ink);
  transition:transform .08s ease, box-shadow .08s ease;
}
button:disabled{opacity:.45; cursor:not-allowed;}
button:focus-visible, .btn:focus-visible{outline:3px solid var(--sticky); outline-offset:2px;}

.btn-primary{background:linear-gradient(#3B8253, var(--stamp-green)); color:#fff; box-shadow:0 5px 0 #1E4A2C;}
.btn-danger{background:linear-gradient(#C63C2A, var(--stamp-red)); color:#fff; box-shadow:0 4px 0 #7A1F13;}
.btn-ghost{background:var(--paper-dark); color:var(--ink); box-shadow:0 4px 0 #B3A688;}
.btn-primary:active:not(:disabled), .btn-danger:active:not(:disabled), .btn-ghost:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
.wide{display:block; width:100%;}
.big{font-size:18px; padding:16px 34px;}
.small{font-size:13px; padding:9px 14px;}

/* ---- Formulaires ---- */
input[type=text], textarea{
  font-family:'IBM Plex Mono', monospace;
  font-size:16px;
  padding:12px 14px;
  border:2px solid var(--ink);
  border-radius:8px;
  background:var(--white);
  color:var(--ink);
  width:100%;
}
input[type=text]:focus, textarea:focus{outline:3px solid var(--clip-blue); outline-offset:1px;}
input:disabled{opacity:.5;}
label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  font-weight:600;
  letter-spacing:.6px;
  color:var(--ink-soft);
  margin-bottom:7px;
  line-height:1.4;
}
.err{color:var(--stamp-red); font-weight:600;}

/* ---- Lobby ---- */
.lobby{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px; align-items:stretch;}
.lobby .card + .card{margin-top:0;}
.code-row{display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; margin-bottom:6px;}
.code-row p{word-break:break-all; margin:4px 0 0;}
.room-code{
  font-family:'Anton', sans-serif;
  font-size:clamp(64px,9vw,104px);
  letter-spacing:8px;
  line-height:1;
  color:var(--ink);
}
.qr{display:flex; flex-direction:column; align-items:center; gap:4px; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft);}
.qr svg{width:124px; height:124px; background:#fff; border-radius:6px; display:block;}
.tools{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center;}

.player-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:10px; margin-top:8px;}
.badge{
  background:var(--white);
  color:var(--ink);
  border-radius:9px;
  padding:9px 12px;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 3px 0 rgba(0,0,0,.2);
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  font-weight:600;
  min-width:0;
}
.badge .initial{
  flex:none;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper);
  font-family:'Anton', sans-serif; font-size:15px;
}
.badge .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.badge small{color:var(--clip-blue); font-weight:500;}
.badge .score{font-weight:700; color:var(--ink-soft);}
.badge .kick{background:transparent; color:var(--stamp-red); padding:2px 8px; font-size:14px; border-radius:6px;}
.badge .kick:hover{background:var(--stamp-red); color:#fff;}

.pack-picker{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:12px; margin:8px 0 14px;}
.pack{
  background:var(--paper-dark);
  border:2px solid transparent;
  padding:12px 14px;
  text-align:left;
  display:flex; flex-direction:column; gap:4px;
  box-shadow:0 4px 0 #B3A688;
}
.pack.on{background:linear-gradient(#F7D567, var(--sticky)); border-color:var(--ink); box-shadow:0 4px 0 var(--ink);}
.pack-name{font-size:16px;}
.pack-desc{font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:400; color:var(--ink-soft); line-height:1.4;}

/* ---- Fenêtre questions maison ---- */
.modal{
  position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  overflow:auto;
}
.modal[hidden]{display:none;}
.modal-card{width:100%; max-width:560px; max-height:90vh; overflow:auto; margin-top:12px;}
.modal-card .folder-tab{position:static; display:inline-block; margin-bottom:12px;}
.modal-card textarea{font-size:14px; min-height:110px; resize:vertical;}

/* ---- Banque de mots : lettres découpées ---- */
.word-bank{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:14px;
  background:var(--paper-dark);
  border-radius:9px;
  margin:14px 0 10px;
}
.chip{
  background:var(--white);
  border:1.5px solid var(--ink);
  padding:7px 12px;
  border-radius:7px;
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:15px;
  color:var(--ink);
  box-shadow:0 2px 0 rgba(0,0,0,.28);
  user-select:none;
  touch-action:manipulation;
}
.chip:nth-child(3n){transform:rotate(-1.6deg);}
.chip:nth-child(3n+1){transform:rotate(1.2deg);}
.chip:hover{background:var(--sticky);}
.chip:active{transform:translateY(2px); box-shadow:none;}
.word-bank.punct{background:transparent; padding:0; margin:0 0 14px;}
.punct-chip{background:var(--sticky); min-width:44px;}

.compose-sticky{
  position:sticky; top:8px; z-index:20;
  background:var(--paper);
  padding:6px 0 10px;
  border-bottom:2px dashed rgba(0,0,0,.14);
}
.compose-box{
  min-height:68px;
  background:var(--white);
  border:2px dashed var(--ink);
  border-radius:9px;
  padding:9px;
  display:flex; flex-wrap:wrap; gap:6px;
  align-content:flex-start;
  cursor:text;
}
.compose-box.active{border:2px solid var(--clip-blue); box-shadow:0 0 0 2px var(--clip-blue);}
.compose-box.empty::before{
  content:attr(data-placeholder);
  font-family:'IBM Plex Mono', monospace;
  color:#6E6452;
  font-size:13px;
  line-height:1.4;
}
.token{
  background:var(--paper-dark);
  border-radius:6px;
  padding:5px 9px;
  font-family:'IBM Plex Mono', monospace;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  user-select:none;
  touch-action:manipulation;
}
.token:hover{background:var(--stamp-red); color:#fff;}
.token.punct{background:var(--sticky);}
.token.joker-token{background:var(--clip-blue); color:#fff;}

.cv-line{display:flex; flex-direction:column; gap:7px; font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:15px;}
.cv-line .compose-box{min-height:50px;}

.joker{border-top:2px dashed rgba(0,0,0,.14); padding-top:12px; margin-bottom:14px;}
.joker-row{display:flex; gap:8px;}
.joker-row input{flex:1; min-width:0; padding:9px 12px;}
.joker p{margin:8px 0 0;}

.send-sticky{position:sticky; bottom:10px; z-index:20;}

/* ---- Duels ---- */
.matchup{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:stretch; margin:24px 0;}
.matchup.trio{grid-template-columns:1fr auto 1fr auto 1fr;}
.matchup .vs{font-family:'Anton', sans-serif; color:var(--sticky); font-size:30px; align-self:center;}
.answer-card{
  display:block;
  width:100%;
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--radius);
  padding:18px 18px 20px;
  font-family:'IBM Plex Mono', monospace;
  font-weight:500;
  font-size:17px;
  text-align:left;
  box-shadow:var(--shadow-card);
  border:3px solid transparent;
  position:relative;
  overflow:visible;
}
body.host .answer-card{min-height:190px;}
body.host .answer-text{font-size:clamp(20px,2.5vw,32px); line-height:1.3; font-weight:600;}
.answer-text{display:block; line-height:1.4; overflow-wrap:anywhere;}
button.answer-card:hover:not(.disabled){border-color:var(--clip-blue);}
.answer-card.disabled{cursor:default;}
.answer-card.selected{border-color:var(--stamp-green);}
.answer-card.mine{border-style:dashed; border-color:var(--clip-blue);}
.answer-card.win{border-color:var(--stamp-green); border-style:solid;}
.answer-card.lose{background:var(--paper-dark);}
.card-head{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.letter{
  flex:none;
  font-family:'Anton', sans-serif;
  background:var(--ink); color:var(--paper);
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
}
.tag{font-size:10px; font-weight:600; letter-spacing:1px; background:var(--clip-blue); color:#fff; padding:3px 7px; border-radius:4px;}
.tag.vote{background:var(--stamp-green);}
.result-line{display:flex; flex-direction:column; gap:3px; margin-top:14px;}
.author{font-size:14px; font-weight:700;}
.gain{font-size:13px; font-weight:600; color:var(--ink-soft);}
.ribbon{
  position:absolute; bottom:12px; right:-8px;
  background:var(--sticky); color:var(--ink);
  font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:700;
  letter-spacing:1px; padding:3px 8px;
  transform:rotate(-3deg);
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.duel-list{display:flex; flex-direction:column; gap:16px; margin-top:14px;}

/* ---- Tampon ---- */
.stamp{
  font-family:'Anton', sans-serif;
  font-size:clamp(30px,6vw,54px);
  letter-spacing:3px;
  text-transform:uppercase;
  border:6px solid currentColor;
  border-radius:9px;
  padding:8px 22px;
  display:inline-block;
  background:var(--paper);
  transform:rotate(-8deg);
  animation:stampIn .32s cubic-bezier(.2,1.3,.4,1) backwards;
}
.stamp.small{font-size:clamp(15px,2vw,20px); border-width:3px; padding:2px 9px; letter-spacing:2px;}
.stamp.corner{position:absolute; top:8px; right:10px; background:var(--paper);}
.answer-card.lose .stamp.corner{background:var(--paper-dark);}
.stamp.hired{color:var(--stamp-green);}
.stamp.rejected{color:var(--stamp-red);}
@keyframes stampIn{
  0%{transform:rotate(-8deg) scale(2.4); opacity:0;}
  60%{transform:rotate(-8deg) scale(.92); opacity:1;}
  100%{transform:rotate(-8deg) scale(1); opacity:1;}
}

/* ---- Classements ---- */
.mini-board{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(242,234,216,.2);
  border-radius:9px;
  padding:10px 12px;
  text-align:left;
}
.mini-title{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--sticky); margin-bottom:6px;}
.mini-row{display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono', monospace; font-size:14px; color:#e2d8c2; padding:3px 0;}
.mini-row.me{color:var(--sticky); font-weight:700;}
.mini-row .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mini-row .rank{opacity:.75; width:28px;}
.mini-row .sc{font-weight:700;}

.tracker{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:12px 0;}
.track-chip{
  background:var(--paper-dark);
  color:var(--ink);
  border-radius:20px;
  padding:6px 13px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  font-weight:600;
}
.track-chip.done{background:var(--stamp-green); color:#fff;}

.podium{display:flex; align-items:flex-end; justify-content:center; gap:12px; margin-top:32px;}
.podium .step{
  background:var(--paper); color:var(--ink);
  border-radius:9px 9px 0 0;
  padding:14px 10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  box-shadow:var(--shadow-card);
  width:min(30%,170px);
  overflow-wrap:anywhere;
}
.podium .step h3{margin-bottom:4px; font-size:clamp(14px,2vw,20px);}
.podium .step.p1{min-height:190px; background:var(--sticky);}
.podium .step.p2{min-height:150px;}
.podium .step.p3{min-height:115px;}
.pearl{display:flex; flex-direction:column; gap:4px; padding:10px 0; border-bottom:2px dashed rgba(0,0,0,.14);}
.pearl:last-child{border-bottom:0;}
.pearl strong{font-family:'IBM Plex Mono', monospace; font-size:clamp(15px,2vw,19px); overflow-wrap:anywhere;}

/* ---- Barre d'outils ---- */
.topbar{
  position:absolute; top:14px; right:14px; z-index:1000;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  justify-content:flex-end;
}
.topbar button{font-size:12px; padding:8px 12px;}
.music-ctrl{
  display:flex; align-items:center; gap:10px;
  background:var(--paper-dark);
  border-radius:12px;
  padding:0 12px 0 0;
  box-shadow:0 4px 0 #B3A688;
}
.music-ctrl .btn-ghost{box-shadow:none;}
.vol-label{font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:700; color:var(--ink); width:36px; text-align:right;}
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:90px; height:6px;
  background:var(--ink-soft);
  border-radius:3px;
  outline:none;
  cursor:pointer;
}
input[type=range]:focus-visible{outline:3px solid var(--clip-blue); outline-offset:3px;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--stamp-green); border:2px solid var(--ink);}
input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--stamp-green); border:2px solid var(--ink);}

/* ---- Chrono ---- */
.timer-bar{position:fixed; top:0; left:0; right:0; height:7px; background:rgba(0,0,0,.4); z-index:2000;}
.timer-bar[hidden]{display:none;}
.timer-fill{height:100%; width:100%; background:var(--stamp-green); transition:width .4s linear;}
.timer-bar.urgent .timer-fill{background:var(--stamp-red);}
.timer-text{
  position:absolute; top:7px; left:50%; transform:translateX(-50%);
  font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:700;
  color:var(--paper);
  background:rgba(0,0,0,.65);
  padding:2px 10px; border-radius:0 0 7px 7px;
}
.timer-bar.urgent .timer-text{background:var(--stamp-red); color:#fff;}

/* ---- Divers ---- */
.center{text-align:center;}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.mt{margin-top:22px;}
.mt-sm{margin-top:10px;}
.muted{color:var(--ink-soft); font-family:'IBM Plex Mono', monospace; font-size:13px; line-height:1.45;}
.muted-light{color:#cfc5ae; font-family:'IBM Plex Mono', monospace; font-size:13px; line-height:1.45; margin:6px 0;}
.waiting{text-align:center; padding:30px 20px;}
.waiting .pulse{
  width:14px; height:14px; border-radius:50%;
  background:var(--sticky);
  display:inline-block;
  animation:pulse 1.2s infinite ease-in-out;
  margin:0 3px;
}
.waiting .pulse:nth-child(2){animation-delay:.15s;}
.waiting .pulse:nth-child(3){animation-delay:.3s;}
@keyframes pulse{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}
footer.hint{margin-top:34px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:#a99f8c; text-align:center;}

/* ---- Mode photosensible : tout est immobile ---- */
body.photosensible *, body.photosensible *::before, body.photosensible *::after{
  animation:none !important;
  transition:none !important;
}

@media (max-width:760px){
  .lobby{grid-template-columns:minmax(0,1fr); gap:30px;}
  .matchup, .matchup.trio{grid-template-columns:minmax(0,1fr);}
  .matchup .vs{display:none;}
  .wrap{padding:64px 16px 70px;}
  /* the language button and the timer sit above the title, never on it */
  .wrap.narrow{padding-top:64px !important;}
  body.host .wrap{padding-top:110px;}
  .card{padding:24px 16px 20px;}
  .chip{font-size:16px; padding:8px 13px;}
}