:root{
  --velours:#0F1A14;
  --feutre:#16281E;
  --feutre-clair:#1D3428;
  --laiton:#C9A227;
  --laiton-clair:#E8CE79;
  --creme:#F1E9D6;
  --sang:#A8332C;
  --vert-gain:#5FBF8A;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--velours);
  color:var(--creme);
  font-family:"Instrument Sans",system-ui,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
#scene{position:fixed;inset:0;z-index:0}
#scene canvas{display:block;cursor:default}
body[data-mode="walk"] #scene canvas{cursor:none}
body[data-mode="seated"] #scene canvas{cursor:crosshair}

/* vignette */
#vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.35) 100%)}

/* ---------- chargement ---------- */
#boot{
  position:fixed;inset:0;z-index:50;
  background:var(--velours);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .6s ease;
}
#boot.parti{opacity:0;pointer-events:none}
#boot h1,.titre{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(30px,7vw,64px);
  font-variation-settings:"SOFT" 40,"WONK" 1;color:var(--laiton);letter-spacing:-.02em}
#boot p{opacity:.55;font-size:14px}
.barre{width:min(240px,60vw);height:2px;background:#2A3A31;overflow:hidden}
.barre i{display:block;height:100%;width:35%;background:var(--laiton);animation:glisse 1.1s ease-in-out infinite}
@keyframes glisse{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}

/* ---------- overlays (intro / pause / ruine) ---------- */
.voile{
  position:fixed;inset:0;z-index:30;display:none;
  background:rgba(8,14,11,.78);backdrop-filter:blur(8px);
  flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;
}
.voile.vu{display:flex}
.voile h2{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(26px,6vw,50px);color:var(--laiton-clair);letter-spacing:-.02em}
.voile p{opacity:.6;font-size:14px;max-width:46ch;line-height:1.6}
.voile .btn{
  font-family:"Instrument Sans",sans-serif;font-size:15px;font-weight:600;
  background:var(--laiton);color:#1A1305;border:0;border-radius:999px;padding:14px 28px;cursor:pointer;
  transition:transform .12s,background .18s;
}
.voile .btn:hover{background:var(--laiton-clair);transform:translateY(-1px)}
.voile .btn.sec{background:transparent;color:var(--creme);border:1px solid rgba(241,233,214,.3)}
.voile .btn.sec:hover{background:rgba(241,233,214,.08)}
.boutons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.touches{
  display:grid;grid-template-columns:auto 1fr;gap:6px 16px;text-align:left;
  font-size:13px;opacity:.75;margin-top:8px;background:rgba(0,0,0,.25);padding:14px 18px;border-radius:14px;
  border:1px solid rgba(201,162,39,.18)
}
.touches kbd{
  font-family:"Instrument Sans",monospace;font-size:12px;font-weight:600;color:var(--laiton-clair);
  border:1px solid rgba(232,206,121,.4);border-radius:6px;padding:2px 7px;white-space:nowrap
}
.voile small{opacity:.4;font-size:11px;max-width:52ch;line-height:1.5}
#ruine h2{color:var(--sang)}

/* ---------- HUD marche ---------- */
#crosshair{
  position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:rgba(241,233,214,.85);box-shadow:0 0 0 1.5px rgba(0,0,0,.35);z-index:10;display:none;pointer-events:none
}
body[data-mode="walk"] #crosshair{display:block}
#prompt{
  position:fixed;left:50%;top:58%;transform:translate(-50%,0) translateY(6px);z-index:10;
  display:flex;align-items:center;gap:10px;
  background:rgba(12,20,16,.72);backdrop-filter:blur(12px);border:1px solid rgba(201,162,39,.3);
  border-radius:999px;padding:9px 16px 9px 9px;font-size:14px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
#prompt.vu{opacity:1;transform:translate(-50%,0)}
#prompt kbd{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;
  background:var(--laiton);color:#1A1305;font-weight:700;font-family:"Instrument Sans",sans-serif;font-size:14px
}
#walkHint{
  position:fixed;left:18px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:10;display:none;
  font-size:12px;opacity:.55;line-height:1.7
}
body[data-mode="walk"] #walkHint{display:block}
#walkHint kbd{font-family:inherit;font-weight:600;color:var(--laiton-clair)}
#fps{position:fixed;right:14px;bottom:10px;z-index:10;font-size:11px;opacity:.3;font-variant-numeric:tabular-nums}

/* ---------- enseigne + compteur d'argent ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:10;
  padding:18px 22px 0;
  display:none;align-items:flex-start;justify-content:space-between;gap:16px;
  pointer-events:none;
}
body[data-mode="seated"] header{display:flex}
.enseigne{line-height:.86}
.enseigne b{
  display:block;font-family:"Fraunces",serif;font-weight:900;
  font-size:clamp(24px,4.4vw,46px);letter-spacing:-.03em;
  font-variation-settings:"SOFT" 40,"WONK" 1;
  color:var(--laiton-clair);
  text-shadow:0 0 26px rgba(201,162,39,.35),0 2px 8px rgba(0,0,0,.5);
}
.enseigne span{display:inline-block;font-size:11px;margin-top:9px;max-width:30ch;line-height:1.45;padding:6px 10px;border-radius:10px;background:rgba(10,18,14,.6);backdrop-filter:blur(8px)}
.compteur{
  text-align:right;background:rgba(10,18,14,.72);backdrop-filter:blur(14px);
  border:1px solid rgba(201,162,39,.25);border-radius:18px;padding:12px 18px 12px 22px;min-width:190px;
  pointer-events:auto;
}
.compteur em{display:block;font-style:normal;font-size:11px;opacity:.5;margin-bottom:2px;letter-spacing:.04em;text-transform:uppercase}
.compteur b#solde{
  font-family:"Fraunces",serif;font-weight:900;font-size:clamp(26px,5vw,42px);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:block;line-height:1;
  transition:color .25s,transform .25s;
}
#solde.up{color:var(--vert-gain);transform:scale(1.06)}
#solde.down{color:#E05B52;transform:scale(.97)}
.net{
  display:flex;justify-content:flex-end;align-items:baseline;gap:8px;margin-top:8px;padding-top:8px;
  border-top:1px solid rgba(241,233,214,.12);font-variant-numeric:tabular-nums
}
.net .lbl{font-size:11px;opacity:.5;text-transform:uppercase;letter-spacing:.04em}
.net #netVal{font-family:"Fraunces",serif;font-weight:700;font-size:20px;transition:color .25s}
.net.up #netVal{color:var(--vert-gain)}
.net.down #netVal{color:#E05B52}
.net.flat #netVal{color:var(--creme);opacity:.7}
.stats{font-size:11px;opacity:.45;margin-top:6px}
#reset{
  margin-top:8px;font:inherit;font-size:11px;background:transparent;border:1px solid rgba(241,233,214,.18);
  color:var(--creme);opacity:.6;border-radius:999px;padding:4px 10px;cursor:pointer
}
#reset:hover{opacity:1;border-color:var(--laiton)}

/* ---------- verdict ---------- */
#verdict{
  position:fixed;left:50%;top:clamp(96px,17vh,150px);transform:translateX(-50%);
  z-index:10;text-align:center;pointer-events:none;width:min(520px,90vw);display:none
}
body[data-mode="seated"] #verdict{display:block}
#verdict .gros{
  font-family:"Fraunces",serif;font-weight:900;font-size:clamp(26px,5.5vw,46px);
  letter-spacing:-.02em;opacity:0;transform:translateY(8px);transition:all .3s;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
#verdict .gros.vu{opacity:1;transform:none}
#verdict .petit{display:inline-block;font-size:13px;margin-top:6px;min-height:1.2em;padding:6px 14px;border-radius:999px;background:rgba(10,18,14,.62);backdrop-filter:blur(8px);border:1px solid rgba(241,233,214,.1)}
#verdict .petit:empty{display:none}
#verdict .heat{display:block;width:max-content;margin:8px auto 0}
.heat{
  display:inline-block;margin-top:10px;font-size:13px;font-weight:600;letter-spacing:.02em;
  padding:6px 14px;border-radius:999px;background:rgba(10,18,14,.7);border:1px solid rgba(241,233,214,.15);
  min-height:0;transition:opacity .2s
}
.heat:empty{display:none}
.heat.h4{color:#ffb28a;border-color:rgba(255,138,61,.6)}
.heat.h3{color:#ffd28a;border-color:rgba(255,179,71,.5)}
.heat.h2{color:#c9d6ff;border-color:rgba(155,183,255,.4)}
.heat.h1{color:#9fb4ff;border-color:rgba(111,143,255,.4)}

/* ---------- comptoir des mises ---------- */
footer{
  position:fixed;bottom:0;left:0;right:0;z-index:10;
  padding:0 16px calc(16px + env(safe-area-inset-bottom));
  display:none;flex-direction:column;align-items:center;gap:10px;
}
body[data-mode="seated"] footer{display:flex}
.mises{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;
  background:rgba(12,20,16,.78);backdrop-filter:blur(14px);
  border:1px solid rgba(201,162,39,.25);
  border-radius:22px;padding:10px 12px;
}
.mises .lbl{font-size:11px;opacity:.5;padding:0 4px 0 8px;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.saisie{display:flex;align-items:center;background:var(--feutre);border:1px solid rgba(241,233,214,.14);border-radius:999px;overflow:hidden}
.saisie button{
  background:transparent;border:0;color:var(--creme);width:36px;height:40px;font-size:18px;cursor:pointer;opacity:.75
}
.saisie button:hover{opacity:1;background:rgba(255,255,255,.06)}
#mise{
  width:96px;height:40px;background:transparent;border:0;color:var(--laiton-clair);text-align:center;
  font-family:"Fraunces",serif;font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;outline:none;
  -moz-appearance:textfield
}
#mise::-webkit-outer-spin-button,#mise::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.saisie .eur{opacity:.5;padding-right:10px;font-size:14px}
.jetons{display:flex;gap:6px}
.jeton{
  font-family:"Fraunces",serif;font-weight:600;font-variant-numeric:tabular-nums;
  font-size:14px;color:var(--creme);
  background:var(--feutre);border:1px solid rgba(241,233,214,.13);
  min-width:46px;height:36px;padding:0 10px;border-radius:999px;cursor:pointer;
  transition:transform .12s,background .18s,color .18s,border-color .18s;
}
.jeton:hover{transform:translateY(-2px)}
.jeton[aria-pressed="true"]{background:var(--laiton);color:#1A1305;border-color:var(--laiton-clair)}
.jeton:focus-visible{outline:2px solid var(--laiton-clair);outline-offset:2px}
.cote{
  display:flex;align-items:center;gap:8px;padding:0 6px 0 10px;border-left:1px solid rgba(241,233,214,.12);
  font-size:12px;opacity:.85
}
.cote b{font-family:"Fraunces",serif;font-size:18px;color:var(--laiton-clair)}
.essais{display:flex;gap:4px}
.essais i{width:8px;height:8px;border-radius:50%;border:1px solid rgba(241,233,214,.4)}
.essais i.on{background:var(--laiton);border-color:var(--laiton)}
.essais i.x{background:var(--sang);border-color:var(--sang);opacity:.7}
#lever{
  font:inherit;font-size:13px;font-weight:600;background:rgba(241,233,214,.08);color:var(--creme);
  border:1px solid rgba(241,233,214,.2);border-radius:999px;padding:9px 16px;cursor:pointer;
}
#lever:hover{background:rgba(241,233,214,.16)}
#lever kbd{font-family:inherit;color:var(--laiton-clair);margin-right:4px}
.indice{font-size:12px;opacity:.85;text-align:center;max-width:60ch;line-height:1.5;padding:6px 12px;border-radius:10px;background:rgba(10,18,14,.55);backdrop-filter:blur(8px)}
.serie{display:flex;gap:5px;height:8px}
.serie i{width:8px;height:8px;border-radius:50%;background:var(--sang);opacity:.75}
.serie i.g{background:var(--vert-gain)}

#flash{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:0;transition:opacity .45s}

/* ---------- tactile ---------- */
.touchUI{display:none;position:fixed;z-index:12;bottom:calc(24px + env(safe-area-inset-bottom));gap:12px}
body.touch[data-mode="walk"] .touchUI{display:flex}
.touchUI{right:18px}
.touchUI button{
  width:64px;height:64px;border-radius:50%;border:1px solid rgba(201,162,39,.4);background:rgba(12,20,16,.7);
  color:var(--laiton-clair);font-weight:700;font-size:16px;font-family:inherit
}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media (max-width:640px){
  .enseigne span{display:none}
  .compteur{min-width:150px;padding:10px 14px}
  .jeton{min-width:40px;height:34px;font-size:13px;padding:0 6px}
  .indice{display:none}
  #verdict{top:120px}
  .mises{gap:6px;padding:8px}
}

/* ---------- écran de compte ---------- */
#compteForm{display:flex;flex-direction:column;gap:12px;width:min(340px,86vw);margin-top:6px}
.champ{display:flex;flex-direction:column;gap:5px;text-align:left}
.champ label{font-size:11px;opacity:.5;letter-spacing:.05em;text-transform:uppercase}
.champ input{
  font:inherit;font-size:15px;color:var(--creme);
  background:rgba(0,0,0,.3);border:1px solid rgba(201,162,39,.28);border-radius:12px;
  padding:12px 14px;outline:none;transition:border-color .18s,background .18s;
  user-select:text;
}
.champ input:focus{border-color:var(--laiton);background:rgba(0,0,0,.45)}
.voile .err{
  color:#F0938C;font-size:13px;opacity:1;min-height:18px;max-width:none;
  margin:-2px 0 -2px;line-height:1.4
}
.voile .err:empty{min-height:0}
.bascule{display:flex;gap:8px;align-items:baseline;justify-content:center;font-size:13px;opacity:.6}
.bascule button{
  font:inherit;font-size:13px;font-weight:600;background:none;border:0;padding:0;cursor:pointer;
  color:var(--laiton-clair);text-decoration:underline;text-underline-offset:3px
}
.bascule button:hover{color:var(--creme)}

/* ---------- qui est connecté ---------- */
.qui{
  display:flex;align-items:baseline;justify-content:flex-end;gap:8px;margin-top:8px;
  padding-top:8px;border-top:1px solid rgba(241,233,214,.12)
}
.qui b{font-size:12px;font-weight:600;color:var(--laiton-clair);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:12ch}
.qui button{
  font:inherit;font-size:10px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--creme);opacity:.4;text-decoration:underline;text-underline-offset:2px
}
.qui button:hover{opacity:.9}

/* ---------- game over : score et tableau ---------- */
.scoreFinal{
  margin-top:4px;padding:14px 26px;border-radius:16px;
  background:rgba(0,0,0,.3);border:1px solid rgba(201,162,39,.28);text-align:center
}
.scoreFinal em{display:block;font-style:normal;font-size:11px;opacity:.5;letter-spacing:.05em;text-transform:uppercase}
.scoreFinal b{
  display:block;font-family:"Fraunces",serif;font-weight:900;font-size:clamp(28px,6vw,44px);
  color:var(--laiton-clair);line-height:1.1;font-variant-numeric:tabular-nums;margin-top:3px
}
.scoreFinal span{display:block;font-size:12px;opacity:.55;margin-top:3px}
.tableau{
  width:min(400px,88vw);max-height:min(38vh,300px);overflow-y:auto;
  background:rgba(0,0,0,.26);border:1px solid rgba(201,162,39,.2);border-radius:16px;padding:10px 6px
}
.tableau ol{list-style:none;margin:0;padding:0}
.tableau li{
  display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:baseline;
  padding:6px 14px;font-size:13px;border-radius:8px
}
.tableau li.moi{background:rgba(201,162,39,.14)}
.tableau li i{font-style:normal;font-family:"Fraunces",serif;font-weight:900;opacity:.45;text-align:right}
.tableau li.podium i{opacity:1;color:var(--laiton)}
.tableau li b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.tableau li.moi b{font-weight:600}
.tableau li span{
  font-family:"Fraunces",serif;font-weight:700;font-variant-numeric:tabular-nums;opacity:.8
}
.tableau li.podium span{color:var(--laiton);opacity:1}
.tableau .vide{padding:18px 14px;font-size:13px;opacity:.5;text-align:center;line-height:1.5}

/* ---------- selecteur de table ---------- */
.tables{
  margin-top:10px;text-align:right;background:rgba(10,18,14,.72);backdrop-filter:blur(14px);
  border:1px solid rgba(201,162,39,.25);border-radius:16px;padding:9px 12px;pointer-events:auto;
}
.tables em{display:block;font-style:normal;font-size:10px;opacity:.5;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.tables .choix{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.tables button{
  font:inherit;font-size:11px;font-weight:600;color:var(--creme);
  background:rgba(241,233,214,.06);border:1px solid rgba(241,233,214,.14);
  border-radius:9px;padding:7px 8px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;
}
.tables button:hover{background:rgba(241,233,214,.13)}
.tables button[aria-pressed="true"]{background:var(--laiton);border-color:var(--laiton);color:#1A1305}

/* ---------- panneaux d'action, un par jeu ---------- */
.actions{display:none;align-items:center;gap:8px;flex-wrap:wrap}
body[data-jeu="caresses"]  #actCaresses,
body[data-jeu="roulette"]  #actRoulette,
body[data-jeu="blackjack"] #actBlackjack,
body[data-jeu="slots"]     #actSlots{display:flex}
.actions .agir{
  font:inherit;font-size:13px;font-weight:600;background:var(--laiton);color:#1A1305;
  border:0;border-radius:999px;padding:10px 18px;cursor:pointer;transition:background .15s,transform .1s;
}
.actions .agir:hover:not(:disabled){background:var(--laiton-clair);transform:translateY(-1px)}
.actions .agir.sec{background:transparent;color:var(--creme);border:1px solid rgba(241,233,214,.28)}
.actions .agir.sec:hover:not(:disabled){background:rgba(241,233,214,.1)}
.actions .agir:disabled{opacity:.35;cursor:default;transform:none}

.paris{display:flex;gap:4px;flex-wrap:wrap;align-items:center;max-width:430px}
.paris button{
  font:inherit;font-size:11px;font-weight:600;color:var(--creme);
  background:rgba(241,233,214,.06);border:1px solid rgba(241,233,214,.14);
  border-radius:8px;padding:6px 9px;cursor:pointer
}
.paris button:hover{background:rgba(241,233,214,.14)}
.paris button[aria-pressed="true"]{background:var(--laiton);border-color:var(--laiton);color:#1A1305}
.paris .p-rouge[aria-pressed="true"]{background:var(--sang);border-color:var(--sang);color:var(--creme)}
.paris .p-noir[aria-pressed="true"]{background:#14161A;border-color:#3a3f45;color:var(--creme)}
.paris .plein{display:flex;align-items:center;gap:4px}
.paris .plein label{font-size:11px;opacity:.5}
.paris .plein input{
  width:48px;font:inherit;font-size:12px;text-align:center;color:var(--creme);
  background:rgba(0,0,0,.3);border:1px solid rgba(201,162,39,.28);border-radius:8px;padding:5px 4px;
  user-select:text;
}
.mainsBJ{display:flex;align-items:baseline;gap:6px;font-size:12px;opacity:.75}
.mainsBJ span{font-family:"Fraunces",serif;font-weight:900;font-size:18px;color:var(--laiton-clair);font-variant-numeric:tabular-nums}
.mainsBJ i{font-style:normal;opacity:.5;margin-right:6px}

/* ---------- table des gains ---------- */
.tableGains{display:flex;flex-direction:column;gap:4px;width:min(340px,86vw);margin-top:4px}
.tableGains .l{
  display:grid;grid-template-columns:38px 1fr auto auto;gap:10px;align-items:center;
  padding:6px 12px;border-radius:10px;background:rgba(0,0,0,.26);font-size:13px
}
.tableGains .l img{width:30px;height:30px;justify-self:center}
.tableGains .l b{font-family:"Fraunces",serif;font-weight:900;color:var(--laiton);font-variant-numeric:tabular-nums}
.tableGains .l i{font-style:normal;font-size:11px;opacity:.45;min-width:58px;text-align:right}
.tableGains .jack{border:1px solid rgba(201,162,39,.5)}

/* Le verdict est centre en haut, le compteur et le selecteur de table sont a
   droite : sous 1100 px ils se chevauchaient. On descend le verdict sous le
   bandeau plutot que de retrecir l'un des deux. */
/* Le bandeau de droite (compteur + selecteur de table) descend plus bas
   qu'avant : le verdict, centre en haut, le chevauchait a toutes les
   largeurs. On le passe sous ce bandeau une fois pour toutes. */
#verdict{top:clamp(170px,34vh,272px)}
@media (max-width: 1100px){
  #verdict{width:min(430px,74vw)}
}
@media (max-width: 780px){
  .tables .choix{grid-template-columns:1fr 1fr 1fr 1fr}
  #verdict{top:clamp(140px,24vh,200px)}
}