/* ============================================================
   THE LOUNGE — habillage autour du canvas
   Le jeu assume un seul monde visuel (soir a l'hotel) :
   tout est peint explicitement, pas de theme clair.
   ============================================================ */

:root{
  /* Repaire forestier : bois, mousse, or vole. */
  --bg:     #0B0F0B;
  --panel:  #2C3A26;
  --line:   #43533A;
  --text:   #F0EFE2;
  --muted:  #94A386;
  --accent: #D8A94A;
}

*{ box-sizing:border-box; }

body{
  margin:0; min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:"Verdana", "DejaVu Sans", sans-serif;
  display:grid; place-items:center;
  padding:18px;
}

.stage{ width:min(100%, 1000px); display:grid; gap:14px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#3A2A05; padding:10px 16px; }
.skip:focus{ left:0; }

.head{ text-align:center; }
.head h1{
  margin:0 0 6px; font-size:1.7rem; letter-spacing:.05em;
  color:var(--accent);
  text-shadow:0 2px 0 rgba(0,0,0,.55), 0 0 18px rgba(255,201,77,.25);
}
.head__sub{ margin:0 0 10px; font-size:.78rem; color:var(--muted); }
.head__stats{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.stat{
  font-size:.75rem; color:var(--muted);
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-radius:100px; padding:5px 13px;
}
.stat b{ color:var(--text); font-size:.9rem; }
.stat i{ font-style:normal; }
.stat--coin b{ color:var(--accent); }

/* Les deux actions du projet vivent dans l'entete, pas dans la
   barre de meubles : ce ne sont pas des outils de jeu. */
.head__stats .tool{ padding:5px 13px; font-size:.74rem; }
.tool--x{
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none;
  background:linear-gradient(180deg, #2E3A28, #1C2418);
  border-color:#3E4B36;
}
.tool--x svg{ width:12px; height:12px; }
.tool--wallet{
  background:linear-gradient(180deg, #8A6B49, #63482E);
  border-color:#523B24;
}
.tool--wallet.is-on{
  background:linear-gradient(180deg, #57B26A, #3E8F50);
  border-color:#38834A; color:var(--text); text-shadow:none;
}

.roomWrap{
  background:#0F160E;
  border:2px solid var(--line);
  border-radius:10px;
  padding:6px;
  box-shadow:0 18px 50px -22px rgba(0,0,0,.9);
}
canvas{
  display:block; width:100%; height:auto;
  image-rendering:pixelated;
  border-radius:6px;
  cursor:pointer;
  touch-action:manipulation;
}

/* ── Barre facon client ──────────────────────────────────── */
.bar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:linear-gradient(180deg, #38492F, var(--panel));
  border:2px solid var(--line); border-radius:10px;
  padding:10px 12px;
}
.bar__group{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.bar__chat{ margin-left:auto; }

.tool{
  font:inherit; font-size:.78rem; color:var(--text);
  background:linear-gradient(180deg, #7E8A6A, #5C6650);
  border:1px solid #4B563E; border-bottom-width:3px;
  border-radius:7px; padding:7px 10px; cursor:pointer;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  transition:transform .08s ease;
}
.tool:hover{ transform:translateY(-1px); }
.tool:active{ transform:translateY(1px); border-bottom-width:1px; }
.tool.is-on{
  background:linear-gradient(180deg, #EFCE86, #D8A94A);
  color:#33260A; border-color:#B08A32; text-shadow:none;
}
/* Un meuble verrouille reste visible : voir ce qu'on n'a pas
   encore est ce qui donne envie de rejouer. */
.tool.is-locked{ opacity:.5; filter:grayscale(.5); }
.tool.is-locked.can-afford{
  opacity:1; filter:none;
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(255,201,77,.5), 0 0 14px -4px rgba(255,201,77,.8);
}
.price:not(:empty){
  display:inline-block; margin-left:4px; padding:1px 6px;
  border-radius:100px; background:rgba(0,0,0,.35);
  color:var(--accent); font-size:.68rem; font-weight:700;
}
.price:not(:empty)::after{ content:" \1FA99"; }

.tool--util{ background:linear-gradient(180deg, #8A7E63, #665C46); border-color:#544B39; }
.tool--util.is-on{
  background:linear-gradient(180deg, #EFCE86, #D8A94A);
  color:#33260A; border-color:#B08A32;
}
.tool--send{ background:linear-gradient(180deg, #4E9B5C, #386F44); border-color:#31653C; }

.nameInput, .chatInput{
  font:inherit; font-size:.8rem; color:#2A2E22;
  background:#F2F1E2; border:1px solid #2C3324;
  border-radius:7px; padding:8px 10px;
}
.nameInput::placeholder, .chatInput::placeholder{ color:#8C917A; }
.nameInput{ width:110px; }
.chatInput{ width:min(240px, 50vw); }
.nameInput:focus-visible, .chatInput:focus-visible, .tool:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

.swatches{ display:flex; gap:5px; }
.swatch{
  width:22px; height:22px; border-radius:6px; cursor:pointer;
  border:2px solid rgba(255,255,255,.3);
}
.swatch.is-on{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.35); }

.hint{ margin:0; text-align:center; font-size:.72rem; color:var(--muted); }

/* ── Duck Pong ───────────────────────────────────────────── */
.pong{
  position:fixed; inset:0; z-index:60;
  background:rgba(8,12,18,.74);
  display:grid; place-items:center; padding:16px;
  overflow:auto;   /* telephone en paysage : le bouton Close reste atteignable */
}
.pong[hidden]{ display:none; }
.pong__frame{
  background:linear-gradient(180deg, #38492F, var(--panel));
  border:2px solid var(--line); border-radius:12px;
  padding:12px; width:min(96vw, 520px);
  max-height:94vh; overflow:auto;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.95);
}
.pong__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.pong__head b{ color:var(--accent); letter-spacing:.12em; font-size:.95rem;
  text-shadow:0 2px 0 rgba(0,0,0,.5); }
.pong__frame canvas{
  width:100%; height:auto; display:block;
  border:2px solid #1B2418; border-radius:8px;
  cursor:crosshair; touch-action:none;
}
.pong__hint{ margin:10px 0 2px; text-align:center; font-size:.72rem; color:var(--muted); }

.pong__hud{ display:flex; gap:14px; margin-left:auto; margin-right:12px; }
.pong__hud span{ font-size:.68rem; letter-spacing:.12em; color:var(--muted); }
.pong__hud i{ font-style:normal; font-size:.92rem; color:var(--text); font-weight:700; }

.pong__over{ text-align:center; padding:12px 0 4px; }
.pong__tag{
  margin:0 0 4px; font-size:.78rem; letter-spacing:.2em;
  color:var(--muted);
}
.pong__tag.is-best{ color:var(--accent); text-shadow:0 0 14px rgba(255,201,77,.6); }
.pong__final{ margin:0 0 14px; }
.pong__final b{ font-size:2.6rem; color:var(--text); }
.pong__final span{ color:var(--accent); font-weight:700; margin-left:6px; }
.pong__actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* ── Toast ───────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 18px);
  background:var(--panel); border:2px solid var(--accent);
  color:var(--text); padding:11px 20px; border-radius:8px;
  font-size:.8rem; font-weight:700; z-index:80;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.is-on{ opacity:1; transform:translate(-50%, 0); }

/* ── Classement ──────────────────────────────────────────
   Le jeu et le tableau vivent cote a cote sur grand ecran,
   l'un sous l'autre en dessous de 1000 px.               */
.play{ display:grid; grid-template-columns:1fr 280px; gap:14px; align-items:start; }

.board{
  background:linear-gradient(180deg, #38492F, var(--panel));
  border:2px solid var(--line); border-radius:10px;
  padding:16px 16px 14px;
}
.board__title{
  margin:0 0 2px; font-size:.92rem; letter-spacing:.06em;
  color:var(--accent); text-shadow:0 2px 0 rgba(0,0,0,.5);
}
.board__tag{
  margin:0 0 14px; font-size:.72rem; color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase;
}
.board__list{
  list-style:none; margin:0 0 12px; padding:0;
  display:flex; flex-direction:column; gap:2px;
  counter-reset:rank;
}
.board__list li{
  display:grid; grid-template-columns:22px 1fr auto; gap:8px;
  align-items:baseline;
  padding:6px 8px; border-radius:6px;
  background:rgba(0,0,0,.16);
  font-size:.8rem;
}
.board__list li::before{
  counter-increment:rank; content:counter(rank);
  color:var(--muted); font-size:.72rem; text-align:right;
}
.board__list li:nth-child(1){ background:rgba(216,169,74,.22); }
.board__list li:nth-child(1)::before{ color:var(--accent); }
.board__list li:nth-child(2){ background:rgba(255,255,255,.09); }
.board__list li:nth-child(3){ background:rgba(201,120,58,.16); }
.board__list li.is-me{ box-shadow:inset 0 0 0 1px var(--accent); }
.board__name{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.board__gold{ color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }

.board__empty{
  background:none !important; color:var(--muted);
  font-style:italic; padding:14px 4px !important;
  grid-template-columns:1fr !important; text-align:center;
}
.board__empty::before{ content:none !important; }

.board__me{
  margin:0 0 10px; font-size:.76rem; color:var(--text);
  background:rgba(0,0,0,.22); border-radius:6px; padding:7px 9px;
}
.board__me b{ color:var(--accent); }
.board__note{ margin:0; font-size:.66rem; color:var(--muted); line-height:1.5; }

@media (max-width: 1000px){
  .play{ grid-template-columns:1fr; }
  .board{ order:2; }
}